compare-screenshots

어떤 스킬인가요?

Compare screenshots against the intended design, distinguishing approved references from historical baselines. Use for iterative implementation matching, before/after visual review, objective image telemetry, or checking a lone capture for flat, empty, or badly framed content.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

# Reference Landmarks

Read before implementing or accepting a match to an approved image.

1. **Measure the reference first.** Pick visible anchors for each requested
   relationship: glyph bounds, line endpoints, icon edges, solid silhouettes.
   Record a small table: feature | reference relationship/range | candidate
   measurement | delta | pass/fix/uncertain. Fill the reference column before
   changing code; never calibrate the target from the latest candidate.
2. **Separate core from fringe.** A soft edge has no single boundary. Locate the
   dark/opaque core, its transition and the faint outer tail on each side. Say
   where a foreground stroke meets that profile. “Full width” may mean the
   visible core, not every pixel of blur; resolve shorthand against the supplied
   image before translating it into a percentage or a hard clip. For example,
   compare a rule's ends to both the text bounds and the fade, and compare the
   last glyph-to-rule gap separately from the tail below the rule.
3. **Keep scale honest.** Preserve original captures at the actual application
   scale, with viewport and DPR recorded. If a generated reference has different
   raster dimensions, record the mapping from its source capture; if unknown,
   compare ratios to stable landmarks such as glyph height and state uncertainty.
   Label any derived alignment image. Never resize the application, typography
   or evidence merely to make the pair agree. Native captures remain the proof.
4. **Isolate ambiguous effects.** When terrain, texture or lighting could be
   mistaken for shadow, capture the same frozen state with only that effect
   toggled. Use the difference to locate its contribution; keep the normal
   capture beside it. Use local contrast/falloff samples across an edge rather
   than whole-frame similarity. If no clean reference baseline exists, report
   the inferred range instead of inventing an exact opacity or endpoint.
5. **Keep the whole feature in the crop.** Include both endpoints, all fade
   tails and surrounding context. Recheck crop bounds after every geometry
   change; an old crop can hide a newly extended edge. Zoomed crops supplement
   native-size evidence, never replace it.
6. **Close every discrepancy.** A reviewer saying “slightly wider,” “minor gap”
   or “uncertain extent” has identified unfinished comparison work. Measure and
   resolve it, or record a demonstrated rasterization limit or user-approved
   deviation. Do not convert those words into a pass because the overall image
   looks good. Validate test assertions against these reference relationships,
   not a convenient CSS mechanism or the last verbal interpretation.

After a user catches a missed detail, revisit the whole landmark table. Recheck
neighbors after the fix: restoring a bright line can erase the dark support
above it; extending that line can overshoot the reference's fading edge. Finish
with the updated table and current captures, not a repeated general verdict.

# Subagent Visual Review

Use this when history or prior conclusions could bias the main agent's visual
judgment.

## Spawn Config

- `agent_type`: `default`
- `fork_context`: `false`
- Attach the two screenshots as `local_image` items.
- For an approved-design comparison, identify `Reference` and `Candidate` and
  supply the intended design requirements. For an open preference comparison,
  use `Image A` and `Image B` without declaring a target.
- Supply full frames and matched detail crops including surrounding space.
  Withhold previous verdicts, implementation details and the author's preferred
  answer; do not withhold the target needed to judge fidelity.
- Give it a shell only if you want numbers back. Images alone buy a description;
  a judge asked for measurements it has no way to take answers in the register
  the question was posed in and invents them.

## Prompt

```text
You are doing an unbiased visual review of two screenshots for the same visual target. You have no prior context.

Compare Image A and Image B. Report:

1. Whether they appear to show the same viewport/state/content.
2. Major visible differences in camera/view, layout, content, missing details,
   labels/text, icons, color, lighting, depth/layering, clipping, artifacts,
   readability, or style.
3. Inspect every changed effect at all four boundaries, including its full fade
   beyond the component. Compare extent relative to visible anchors on each
   side. Check brightness, color, sharpness and continuity of every foreground
   feature it crosses. Report local discrepancies even if everything is legible.
4. Give a per-feature reference observation → candidate observation →
   pass/fix/uncertain record. Distinguish solid/core edges from faint fringe;
   locate endpoints and gaps relative to visible anchors, in words unless you
   quote the command and output that measured them. Verify crops include
   the entire feature. Request paired effect-on/off captures when background
   texture makes extent ambiguous. A small discrepancy still needs resolution;
   do not label it acceptable merely because the whole looks similar.
5. A concise verdict on whether the images preserve the intended visual
   relationship or need another pass.

When an approved reference is identified, judge fidelity to it. Otherwise do not
assume either image is the target. Overall attractiveness does not excuse a
local mismatch. Judge only from visible pixels and supplied design requirements.

Describe what you see in words. State no pixel value, luminance, percentage,
ratio, count, or offset unless you ran a command that produced it and you quote
that command and its output beside the number. "Image B reads clearly darker
along the lower edge" is a finding; a luminance mean you did not measure is a
fabrication.
```

## How To Use The Result

- Treat the subagent result as independent evidence about which image is less
  wrong, not a replacement for metrics or your own inspection — and not a vote
  for whichever image is the baseline.
- Run the returned review through the receipts checker that ships with
  `screenshot-critique` before you read it, and strike whatever it flags. An
  unsupported number reads as the strongest evidence in the review precisely
  because it is numeric, so it has to be removed before it can persuade you.
- If the subagent flags wrong camera, mismatched state, missing content, or
  visible artifacts, fix capture/rendering quality before judging the rest.
- Preserve the findings, not just the headline verdict. A “pass” accompanied
  by an unresolved local discrepancy is not acceptance; finish the landmark
  check before calling the feature done.

// Eval harness for visual-parity-diff.mjs.
//
// Every fixture is generated here, so the correct answer is known by
// construction rather than read back from a previous run — a snapshot of
// current output would happily bless a bug. Dependencies are bundled in vendor/:
//
//   node visual-parity-diff.eval.mjs
//
// Exits nonzero on the first failing expectation set, printing every check.

import { spawn } from 'node:child_process';
import { mkdtemp, mkdir, rm, writeFile, readFile, readdir } from 'node:fs/promises';
import { createRequire } from 'node:module';
import { tmpdir } from 'node:os';
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';

const here = dirname(fileURLToPath(import.meta.url));
const script = resolve(here, 'visual-parity-diff.mjs');
const repoRoot = resolve(process.env.REPO_ROOT ?? process.cwd());
const require = createRequire(import.meta.url);
const { PNG } = require('../vendor/pngjs');

const checks = [];
const check = (name, pass, detail = '') => checks.push({ name, pass, detail });
const near = (actual, expected, tolerance) => Math.abs(actual - expected) <= tolerance;

// --- fixtures -------------------------------------------------------------
// fn returns [r, g, b, a]; alpha defaults to opaque so the transparency cases
// have to opt in explicitly.
function draw(width, height, fn) {
  const png = new PNG({ width, height });
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const o = (y * width + x) * 4;
      const [r, g, b, a = 255] = fn(x, y);
      png.data[o] = r;
      png.data[o + 1] = g;
      png.data[o + 2] = b;
      png.data[o + 3] = a;
    }
  }
  return PNG.sync.write(png);
}

const noise = (x, y) => [(x * 7 + y * 3) % 256, (x * 3 ^ y * 5) % 256, (x * 11 + y * 13) % 256];
const W = 640;
const H = 360;

// An authored scene: many objects, surface texture, varied materials. Painted
// in normalized coordinates so rendering it at another resolution produces the
// same picture rather than a different one, which is what scale invariance
// actually claims.
const paintScene = (width, height) => (px, py) => {
  const x = Math.floor((px / width) * W);
  const y = Math.floor((py / height) * H);
  const grain = ((x * 13 + y * 7) % 23) - 11;
  if (y > H * 0.72) {
    const tile = (Math.floor(x / 9) + Math.floor(y / 7)) % 3;
    return [70 + tile * 14 + grain, 90 + tile * 10 + grain, 50 + tile * 8 + grain];
  }
  for (const [bx, bw, bh, tint] of [[60, 70, 190, 30], [180, 55, 250, 90], [300, 90, 150, 55], [430, 65, 220, 120]]) {
    if (x > bx && x < bx + bw && y > H * 0.72 - bh) {
      const window = (Math.floor((x - bx) / 8) % 2) && (Math.floor(y / 11) % 2);
      return window ? [235, 210 - tint / 2, 120] : [90 + tint + grain, 80 + tint + grain, 100 + tint + grain];
    }
  }
  const sky = [40 + Math.floor((y / H) * 60), 60 + Math.floor((y / H) * 80), 140];
  return [sky[0] + grain, sky[1] + grain, sky[2]];
};

const FIXTURES = {
  // Nothing is there. Every one of these must read as empty.
  'empty-solid': draw(W, H, () => [30, 34, 40]),
  'empty-transparent-noise': draw(W, H, (x, y) => [...noise(x, y), 0]),
  'empty-transparent-white': draw(W, H, () => [255, 255, 255, 0]),
  'empty-smooth-gradient': draw(W, H, (x) => {
    const v = Math.floor((x / W) * 255);
    return [v, v, v];
  }),
  // Something is there. None of these may read as empty.
  'content-noise': draw(W, H, noise),
  'content-scene': draw(W, H, paintScene(W, H)),
  // Two rectangles on a gradient. Reads as suspicious, and should: this is
  // exactly the primitive-dominant framing the edge-density floor names.
  'primitive-dominant': draw(W, H, (x, y) => {
    if (y > H * 0.7) return [70, 90, 50];
    if (x > 180 && x < 320 && y > 120 && y < 250) return [200, 60, 40];
    return [40 + Math.floor((y / H) * 60), 60 + Math.floor((y / H) * 80), 140];
  }),
  // Half drawn, half transparent garbage: real content, and the invisible
  // half must be named rather than counted as detail.
  'mixed-half-transparent': draw(W, H, (x, y) => (y < H / 2 ? noise(x, y) : [...noise(x, y), 0])),
  // Dark and flat: contrast must collapse even though colour varies slightly.
  'dim-lowcontrast': draw(W, H, (x, y) => [18 + ((x + y) % 6), 20 + ((x * y) % 5), 24]),
  // Small but real: 64 samples is thin, not degenerate, and must still measure.
  'small-but-real': draw(8, 8, noise),
  // Degenerate: one pixel wide leaves no neighbour to compare against, so the
  // honest answer is no answer.
  'one-pixel-wide': draw(1, 400, (x, y) => noise(x, y)),
};

// Scale and hue invariance: same scene, different pixels.
const INVARIANCE = {
  'scene-1x': FIXTURES['content-scene'],
  'scene-2x': draw(W * 2, H * 2, paintScene(W * 2, H * 2)),
  'solid-red': draw(W, H, () => [200, 30, 30]),
  'solid-blue': draw(W, H, () => [30, 30, 200]),
  // Transparent black over noise vs. the composite it is equivalent to.
  'alpha-over-black': draw(W, H, (x, y) => [...noise(x, y), 0]),
  'flat-black': draw(W, H, () => [0, 0, 0]),
};

// --- runner ---------------------------------------------------------------
function run(env, { pipe = false } = {}) {
  return new Promise((resolveRun) => {
    const child = spawn(process.execPath, [script], {
      cwd: repoRoot,
      env: { ...process.env, REPO_ROOT: repoRoot, ...env },
      stdio: ['ignore', pipe ? 'pipe' : 'ignore', 'pipe'],
    });
    let stdout = '';
    let stderr = '';
    if (pipe) child.stdout.on('data', (d) => { stdout += d; });
    child.stderr.on('data', (d) => { stderr += d; });
    child.on('close', (code) => resolveRun({ code, stdout, stderr }));
  });
}

const workspace = await mkdtemp(resolve(tmpdir(), 'parity-eval-'));
try {
  const shots = resolve(workspace, 'shots');
  const inv = resolve(workspace, 'invariance');
  const ref = resolve(workspace, 'ref');
  const bulk = resolve(workspace, 'bulk');
  const empty = resolve(workspace, 'empty');
  for (const dir of [shots, inv, ref, bulk, empty]) await mkdir(dir, { recursive: true });

  for (const [id, buffer] of Object.entries(FIXTURES)) await writeFile(resolve(shots, `${id}.png`), buffer);
  for (const [id, buffer] of Object.entries(INVARIANCE)) await writeFile(resolve(inv, `${id}.png`), buffer);
  // Pair fixtures: identical, and swapped so the pair distance is symmetric.
  await writeFile(resolve(ref, 'content-scene.png'), FIXTURES['content-noise']);
  await writeFile(resolve(ref, 'content-noise.png'), FIXTURES['content-scene']);
  await writeFile(resolve(ref, 'empty-solid.png'), FIXTURES['empty-solid']);
  for (const id of ['content-scene', 'content-noise', 'empty-solid']) {
    await writeFile(resolve(bulk, `${id}.png`), FIXTURES[id]);
  }
  // Enough output to exceed the OS pipe buffer.
  for (let i = 0; i < 260; i++) {
    await writeFile(resolve(bulk, `bulk-${String(i).padStart(3, '0')}.png`), draw(48, 48, noise));
  }

  // 1. Scene metrics classify empty vs content correctly.
  const solo = await run({ CANDIDATE_DIR: shots, OUT_DIR: resolve(workspace, 'out-solo') }, { pipe: true });
  check('solo mode exits 0', solo.code === 0, solo.stderr.slice(0, 400));
  const soloReport = JSON.parse(await readFile(resolve(workspace, 'out-solo', 'scene-metrics.json'), 'utf8'));
  const metrics = Object.fromEntries(soloReport.results.map((r) => [r.id, r.sceneMetrics]));

  const readsEmpty = (m) => m.colorEntropyBits < 3.0 || m.dominantColorShare > 0.6 || m.edgeDensity < 0.04;
  for (const id of ['empty-solid', 'empty-transparent-noise', 'empty-transparent-white', 'empty-smooth-gradient']) {
    check(`${id} reads as empty`, readsEmpty(metrics[id]), JSON.stringify(metrics[id]));
  }
  for (const id of ['content-noise', 'content-scene', 'mixed-half-transparent']) {
    check(`${id} reads as content`, !readsEmpty(metrics[id]), JSON.stringify(metrics[id]));
  }
  check('dim-lowcontrast collapses contrast', metrics['dim-lowcontrast'].luminanceContrast < 60,
    JSON.stringify(metrics['dim-lowcontrast']));
  check('primitive-dominant framing reads as suspicious', readsEmpty(metrics['primitive-dominant']),
    JSON.stringify(metrics['primitive-dominant']));
  check('a small but real image still measures', metrics['small-but-real'] !== undefined
    && !readsEmpty(metrics['small-but-real']), JSON.stringify(metrics['small-but-real']));
  check('a degenerate image declines to guess', metrics['one-pixel-wide'] === undefined,
    JSON.stringify(metrics['one-pixel-wide']));

  // 2. Invisible pixels are named, not inferred.
  check('fully transparent frame reports full transparency',
    metrics['empty-transparent-noise'].transparentShare === 1, JSON.stringify(metrics['empty-transparent-noise']));
  check('opaque frame reports no transparency',
    metrics['content-noise'].transparentShare === 0, JSON.stringify(metrics['content-noise']));
  check('half-transparent frame reports half transparency',
    near(metrics['mixed-half-transparent'].transparentShare, 0.5, 0.02),
    JSON.stringify(metrics['mixed-half-transparent']));

  // 3. Invariance properties.
  const invRun = await run({ CANDIDATE_DIR: inv, OUT_DIR: resolve(workspace, 'out-inv') });
  check('invariance run exits 0', invRun.code === 0, invRun.stderr.slice(0, 400));
  const invReport = JSON.parse(await readFile(resolve(workspace, 'out-inv', 'scene-metrics.json'), 'utf8'));
  const im = Object.fromEntries(invReport.results.map((r) => [r.id, r.sceneMetrics]));
  check('metrics survive a 2x resolution change',
    near(im['scene-2x'].edgeDensity, im['scene-1x'].edgeDensity, 0.03)
      && near(im['scene-2x'].colorEntropyBits, im['scene-1x'].colorEntropyBits, 0.6),
    `1x=${JSON.stringify(im['scene-1x'])} 2x=${JSON.stringify(im['scene-2x'])}`);
  check('flatness does not depend on hue',
    im['solid-red'].colorEntropyBits === im['solid-blue'].colorEntropyBits
      && im['solid-red'].edgeDensity === im['solid-blue'].edgeDensity
      && im['solid-red'].dominantColorShare === im['solid-blue'].dominantColorShare,
    `red=${JSON.stringify(im['solid-red'])} blue=${JSON.stringify(im['solid-blue'])}`);
  check('transparent pixels measure as their composite',
    im['alpha-over-black'].colorEntropyBits === im['flat-black'].colorEntropyBits
      && im['alpha-over-black'].edgeDensity === im['flat-black'].edgeDensity
      && im['alpha-over-black'].luminanceContrast === im['flat-black'].luminanceContrast,
    `alpha=${JSON.stringify(im['alpha-over-black'])} flat=${JSON.stringify(im['flat-black'])}`);

  // 4. Pair mode keeps working and carries scene metrics per side.
  const pair = await run({ REFERENCE_DIR: ref, CANDIDATE_DIR: shots, OUT_DIR: resolve(workspace, 'out-pair') }, { pipe: true });
  check('pair mode exits 0', pair.code === 0, pair.stderr.slice(0, 400));
  const pairReport = JSON.parse(await readFile(resolve(workspace, 'out-pair', 'visual-parity-diff.json'), 'utf8'));
  check('pair mode reports every common image', pairReport.pairCount === 3, `pairCount=${pairReport.pairCount}`);
  const identical = pairReport.results.find((r) => r.id === 'empty-solid');
  const swapped = pairReport.results.filter((r) => r.id === 'content-scene' || r.id === 'content-noise');
  check('identical pair has zero distance', identical.parityDistance === 0, `distance=${identical.parityDistance}`);
  check('pair distance is symmetric', swapped[0].parityDistance === swapped[1].parityDistance,
    swapped.map((r) => `${r.id}=${r.parityDistance}`).join(' '));
  check('scene metrics break the symmetric tie',
    swapped.some((r) => readsEmpty(r.sceneMetrics.current) !== readsEmpty(r.sceneMetrics.candidate))
      || swapped.every((r) => r.sceneMetrics.current && r.sceneMetrics.candidate),
    'both sides carry sceneMetrics');
  const artifacts = await readdir(resolve(workspace, 'out-pair'));
  check('pair mode still writes its diff artifacts',
    ['side-by-side', 'absdiff', 'pixelmatch', 'edge-diff'].every((kind) => artifacts.some((f) => f.includes(kind))),
    artifacts.join(','));
  check('solo mode writes no diff artifacts',
    (await readdir(resolve(workspace, 'out-solo'))).every((f) => f.endsWith('.json')));

  // 5. Piped stdout survives to the last byte.
  const piped = await run({ CANDIDATE_DIR: bulk, OUT_DIR: resolve(workspace, 'out-bulk') }, { pipe: true });
  check('bulk run exits 0', piped.code === 0, piped.stderr.slice(0, 400));
  check('piped stdout ends with the wrote line', piped.stdout.trimEnd().endsWith('scene-metrics.json'),
    `tail=${JSON.stringify(piped.stdout.slice(-120))}`);
  const printed = piped.stdout.slice(0, piped.stdout.lastIndexOf('}') + 1);
  let parsed = null;
  try { parsed = JSON.parse(printed); } catch (error) { check('piped stdout is complete JSON', false, error.message); }
  if (parsed) {
    check('piped stdout is complete JSON', true);
    check('piped stdout holds every result', parsed.results.length === 263, `printed=${parsed.results.length}`);
    const onDisk = JSON.parse(await readFile(resolve(workspace, 'out-bulk', 'scene-metrics.json'), 'utf8'));
    check('piped stdout matches the written report', parsed.results.length === onDisk.results.length);
  }

  // 6. Failure paths stay loud.
  const noDir = await run({ CANDIDATE_DIR: '' });
  check('missing CANDIDATE_DIR fails loudly', noDir.code !== 0 && /CANDIDATE_DIR/.test(noDir.stderr), noDir.stderr.slice(0, 200));
  const emptyDir = await run({ CANDIDATE_DIR: empty, OUT_DIR: resolve(workspace, 'out-empty') });
  check('empty candidate directory fails loudly', emptyDir.code !== 0 && /no PNGs/.test(emptyDir.stderr), emptyDir.stderr.slice(0, 200));
} finally {
  await rm(workspace, { recursive: true, force: true });
}

const failed = checks.filter((c) => !c.pass);
for (const c of checks) console.log(`${c.pass ? 'PASS' : 'FAIL'}  ${c.name}${c.pass || !c.detail ? '' : `\n      ${c.detail}`}`);
console.log(`\n${checks.length - failed.length}/${checks.length} passed`);
process.exitCode = failed.length === 0 ? 0 : 1;

import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises';
import { createRequire } from 'node:module';
import { basename, relative, resolve } from 'node:path';
import { pathToFileURL } from 'node:url';

const cwd = resolve(process.cwd());
const repoRoot = process.env.REPO_ROOT ? resolve(process.env.REPO_ROOT) : basename(cwd) === 'web' ? resolve(cwd, '..') : cwd;
const require = createRequire(import.meta.url);
const { PNG } = require('../vendor/pngjs');
const pixelmatch = (await import('../vendor/pixelmatch/index.js')).default;

const currentDir = process.env.REFERENCE_DIR ? requiredDir('REFERENCE_DIR') : null;
const candidateDir = requiredDir('CANDIDATE_DIR');
const reportOrder = (process.env.REPORT_ORDER ?? '')
  .split(',')
  .map((name) => name.trim())
  .filter(Boolean);
const cropSpecs = process.env.CROPS_JSON ? await readJson(resolvePath(process.env.CROPS_JSON)) : {};
const outDir = resolvePath(process.env.OUT_DIR ?? 'visual-diff');
const artifactRoot = basename(outDir);
await mkdir(outDir, { recursive: true });

// Two modes, one helper: with a reference folder this diffs pairs; without
// one it only measures each capture on its own terms.
if (currentDir) {
  await reportPairDiff();
} else {
  await reportSceneMetricsOnly();
}

async function reportPairDiff() {
  const pairs = await discoverPairs();
  const results = [];
  for (const pair of pairs) {
    const currentPath = resolve(repoRoot, pair.current);
    const candidatePath = resolve(repoRoot, pair.candidate);
    const current = PNG.sync.read(await readFile(currentPath));
    const candidate = PNG.sync.read(await readFile(candidatePath));
    if (current.width !== candidate.width || current.height !== candidate.height) {
      throw new Error(`${pair.id}: image sizes differ: current=${current.width}x${current.height} candidate=${candidate.width}x${candidate.height}`);
    }

    const width = current.width;
    const height = current.height;
    const grayCurrent = new PNG({ width, height });
    const grayCandidate = new PNG({ width, height });
    const absDiff = new PNG({ width, height });
    const sideBySide = new PNG({ width: width * 2, height });
    const edgeCurrent = new PNG({ width, height });
    const edgeCandidate = new PNG({ width, height });
    const edgeDiff = new PNG({ width, height });
    const currentGray = new Float32Array(width * height);
    const candidateGray = new Float32Array(width * height);

    let sumAbs = 0;
    let sumSq = 0;
    let over16 = 0;
    let over32 = 0;
    let over64 = 0;
    let blackCurrent = 0;
    let blackCandidate = 0;
    let terrainCurrent = 0;
    let terrainCandidate = 0;
    let luminanceCurrent = 0;
    let luminanceCandidate = 0;

    for (let i = 0; i < width * height; i++) {
      const o = i * 4;
      const cg = luminance(current.data[o], current.data[o + 1], current.data[o + 2]);
      const wg = luminance(candidate.data[o], candidate.data[o + 1], candidate.data[o + 2]);
      luminanceCurrent += cg;
      luminanceCandidate += wg;
      currentGray[i] = cg;
      candidateGray[i] = wg;
      const d = Math.abs(cg - wg);
      sumAbs += d;
      sumSq += d * d;
      if (d > 16) over16++;
      if (d > 32) over32++;
      if (d > 64) over64++;
      if (cg < 24) blackCurrent++;
      if (wg < 24) blackCandidate++;
      if (isTerrainLike(current.data[o], current.data[o + 1], current.data[o + 2])) terrainCurrent++;
      if (isTerrainLike(candidate.data[o], candidate.data[o + 1], candidate.data[o + 2])) terrainCandidate++;
      copyPixel(current, sideBySide, i, xOf(i, width), yOf(i, width));
      copyPixel(candidate, sideBySide, i, xOf(i, width) + width, yOf(i, width));
      writeGray(grayCurrent, o, cg);
      writeGray(grayCandidate, o, wg);
      const heat = Math.min(255, d * 4);
      absDiff.data[o] = heat;
      absDiff.data[o + 1] = Math.max(0, 160 - heat);
      absDiff.data[o + 2] = Math.max(0, 255 - heat);
      absDiff.data[o + 3] = 255;
    }

    const edgeStats = writeEdges(currentGray, candidateGray, edgeCurrent, edgeCandidate, edgeDiff, width, height);
    const pixelmatchDiff = new PNG({ width, height });
    const mismatched = pixelmatch(
      grayCurrent.data,
      grayCandidate.data,
      pixelmatchDiff.data,
      width,
      height,
      { threshold: 0.08, includeAA: true },
    );

    await writePng(resolve(outDir, `${pair.id}-side-by-side.png`), sideBySide);
    await writePng(resolve(outDir, `${pair.id}-current-gray.png`), grayCurrent);
    await writePng(resolve(outDir, `${pair.id}-candidate-gray.png`), grayCandidate);
    await writePng(resolve(outDir, `${pair.id}-absdiff.png`), absDiff);
    await writePng(resolve(outDir, `${pair.id}-pixelmatch.png`), pixelmatchDiff);
    await writePng(resolve(outDir, `${pair.id}-current-edges.png`), edgeCurrent);
    await writePng(resolve(outDir, `${pair.id}-candidate-edges.png`), edgeCandidate);
    await writePng(resolve(outDir, `${pair.id}-edge-diff.png`), edgeDiff);

    const total = width * height;
    const diffRatio32 = over32 / total;
    const pixelmatchRatio = mismatched / total;
    const edgeDiffRatio32 = edgeStats.diffOver32 / total;
    const edgeEnergyRatio = edgeEnergyRatioOf(edgeStats.currentEnergy, edgeStats.candidateEnergy);
    const parityDistance =
      0.35 * diffRatio32
      + 0.25 * pixelmatchRatio
      + 0.25 * edgeDiffRatio32
      + 0.15 * Math.min(1, Math.abs(Math.log2(edgeEnergyRatio)));
    const crop = cropFor(pair.id, width, height);
    const worldCrop = crop
      ? await analyzeWorldCrop(pair.id, crop, current, candidate, currentGray, candidateGray, width, height)
      : undefined;

    const result = {
      id: pair.id,
      current: relative(repoRoot, currentPath),
      candidate: relative(repoRoot, candidatePath),
      dimensions: { width, height },
      parityDistance: round(parityDistance),
      sceneMetrics: {
        current: computeSceneMetrics(current),
        candidate: computeSceneMetrics(candidate),
      },
      grayscale: {
        mae: round(sumAbs / total),
        rmse: round(Math.sqrt(sumSq / total)),
        diffRatio16: round(over16 / total),
        diffRatio32: round(diffRatio32),
        diffRatio64: round(over64 / total),
        pixelmatchRatio: round(pixelmatchRatio),
      },
      contentProxies: {
        blackRatioCurrent: round(blackCurrent / total),
        blackRatioCandidate: round(blackCandidate / total),
        terrainLikeRatioCurrent: round(terrainCurrent / total),
        terrainLikeRatioCandidate: round(terrainCandidate / total),
        avgLuminanceCurrent: round(luminanceCurrent / total),
        avgLuminanceCandidate: round(luminanceCandidate / total),
        avgLuminanceDelta: round((luminanceCandidate - luminanceCurrent) / total),
        edgeEnergyCurrent: round(edgeStats.currentEnergy),
        edgeEnergyCandidate: round(edgeStats.candidateEnergy),
        edgeEnergyRatio: round(edgeEnergyRatio),
        edgeDiffRatio32: round(edgeDiffRatio32),
      },
      artifacts: {
        sideBySide: `${artifactRoot}/${pair.id}-side-by-side.png`,
        currentGray: `${artifactRoot}/${pair.id}-current-gray.png`,
        candidateGray: `${artifactRoot}/${pair.id}-candidate-gray.png`,
        absDiff: `${artifactRoot}/${pair.id}-absdiff.png`,
        pixelmatch: `${artifactRoot}/${pair.id}-pixelmatch.png`,
        currentEdges: `${artifactRoot}/${pair.id}-current-edges.png`,
        candidateEdges: `${artifactRoot}/${pair.id}-candidate-edges.png`,
        edgeDiff: `${artifactRoot}/${pair.id}-edge-diff.png`,
      },
    };
    if (worldCrop) result.worldCrop = worldCrop;
    results.push(result);
  }

  results.sort((a, b) => b.parityDistance - a.parityDistance);
  const report = {
    kind: 'screenshot-parity-diff',
    generatedAt: new Date().toISOString(),
    note: 'Lower parityDistance means the candidate is closer to the reference for this fixed pair. This is a distance metric, not an acceptance gate.',
    pairCount: results.length,
    worstPair: results[0]?.id ?? null,
    results,
  };

  const reportPath = resolve(outDir, 'visual-parity-diff.json');
  await writeFile(reportPath, JSON.stringify(report, null, 2));
  console.log(JSON.stringify(report, null, 2));
  console.log(`wrote ${relative(repoRoot, reportPath)}`);
}

async function reportSceneMetricsOnly() {
  const names = await orderedPngNames(candidateDir);
  if (names.length === 0) {
    throw new Error(`no PNGs found in ${relative(repoRoot, candidateDir)}`);
  }
  const results = [];
  for (const name of names) {
    const imagePath = resolve(candidateDir, name);
    const png = PNG.sync.read(await readFile(imagePath));
    results.push({
      id: basename(name, '.png'),
      image: relative(repoRoot, imagePath),
      dimensions: { width: png.width, height: png.height },
      sceneMetrics: computeSceneMetrics(png),
    });
  }
  const report = {
    kind: 'screenshot-scene-metrics',
    generatedAt: new Date().toISOString(),
    note: 'Absolute per-image telemetry, no reference involved. Low values locate flat, sparse, or empty captures; they never accept or reject an image on their own.',
    imageCount: results.length,
    results,
  };
  const reportPath = resolve(outDir, 'scene-metrics.json');
  await writeFile(reportPath, JSON.stringify(report, null, 2));
  console.log(JSON.stringify(report, null, 2));
  console.log(`wrote ${relative(repoRoot, reportPath)}`);
}

// Describes one image on its own terms, with nothing to compare it against.
// Sampled on a coarse grid so the cost stays trivial beside the pair work, and
// so the numbers read scene composition instead of per-pixel noise.
function computeSceneMetrics(png) {
  const stepX = Math.max(1, Math.floor(png.width / 160));
  const stepY = Math.max(1, Math.floor(png.height / 90));
  const cols = Math.floor(png.width / stepX);
  const rows = Math.floor(png.height / stepY);
  if (cols < 2 || rows < 2) return undefined;

  const gray = new Float64Array(cols * rows);
  const buckets = new Map();
  let samples = 0;
  let transparent = 0;

  for (let gy = 0; gy < rows; gy++) {
    for (let gx = 0; gx < cols; gx++) {
      const o = (gy * stepY * png.width + gx * stepX) * 4;
      // Measure what the frame shows, not what it stores. A fully transparent
      // pixel keeps whatever RGB it was left with, so an invisible capture can
      // read as rich, high-entropy content until it is composited down.
      const alpha = png.data[o + 3] / 255;
      if (alpha === 0) transparent++;
      const r = png.data[o] * alpha;
      const g = png.data[o + 1] * alpha;
      const b = png.data[o + 2] * alpha;
      gray[gy * cols + gx] = luminance(r, g, b);
      // 4 bits per channel: distinct enough to separate materials, coarse
      // enough that gradients and dither do not read as authored variety.
      const key = `${r >> 4},${g >> 4},${b >> 4}`;
      buckets.set(key, (buckets.get(key) ?? 0) + 1);
      samples++;
    }
  }

  const sorted = Array.from(gray).sort((a, b) => a - b);
  const mean = sorted.reduce((sum, value) => sum + value, 0) / sorted.length;
  const p5 = sorted[Math.floor(sorted.length * 0.05)];
  const p95 = sorted[Math.floor(sorted.length * 0.95)];

  let entropy = 0;
  let dominant = 0;
  for (const count of buckets.values()) {
    const p = count / samples;
    entropy -= p * Math.log2(p);
    dominant = Math.max(dominant, count);
  }

  let edges = 0;
  let checked = 0;
  for (let gy = 0; gy < rows - 1; gy++) {
    for (let gx = 0; gx < cols - 1; gx++) {
      const i = gy * cols + gx;
      const dx = Math.abs(gray[i] - gray[i + 1]);
      const dy = Math.abs(gray[i] - gray[i + cols]);
      if (Math.max(dx, dy) > 12) edges++;
      checked++;
    }
  }

  return {
    colorBuckets: buckets.size,
    colorEntropyBits: round(entropy),
    edgeDensity: round(edges / checked),
    dominantColorShare: round(dominant / samples),
    transparentShare: round(transparent / samples),
    luminanceMean: round(mean),
    luminanceP5: round(p5),
    luminanceP95: round(p95),
    luminanceContrast: round(p95 - p5),
  };
}

// Two frames with no edges at all are not infinitely far apart, they are the
// same frame. Dividing into a floor would send an identical pair of flat
// captures — the empty-render case the metrics exist to catch — to a nonzero
// distance.
function edgeEnergyRatioOf(currentEnergy, candidateEnergy) {
  const floor = 1e-6;
  if (currentEnergy < floor && candidateEnergy < floor) return 1;
  return candidateEnergy / Math.max(floor, currentEnergy);
}

async function orderedPngNames(dir) {
  const names = await pngNames(dir);
  const order = new Map(reportOrder.map((id, index) => [`${id}.png`, index]));
  names.sort((a, b) => (order.get(a) ?? 999_999) - (order.get(b) ?? 999_999) || a.localeCompare(b));
  return names;
}

async function discoverPairs() {
  const [currentFiles, candidateFiles] = await Promise.all([pngNames(currentDir), pngNames(candidateDir)]);
  const candidateSet = new Set(candidateFiles);
  const common = currentFiles.filter((name) => candidateSet.has(name));
  if (common.length === 0) {
    throw new Error(`no comparable PNG pairs found in ${relative(repoRoot, currentDir)} and ${relative(repoRoot, candidateDir)}`);
  }
  const order = new Map(reportOrder.map((id, index) => [`${id}.png`, index]));
  common.sort((a, b) => (order.get(a) ?? 999_999) - (order.get(b) ?? 999_999) || a.localeCompare(b));
  return common.map((name) => ({
    id: basename(name, '.png'),
    current: relative(repoRoot, resolve(currentDir, name)),
    candidate: relative(repoRoot, resolve(candidateDir, name)),
  }));
}

async function pngNames(dir) {
  return (await readdir(dir)).filter((name) => name.endsWith('.png'));
}

function luminance(r, g, b) {
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function isTerrainLike(r, g, b) {
  return g > 72 && r > 62 && b > 38 && r > b * 0.92 && g > b * 0.92;
}

function writeGray(png, offset, value) {
  const v = Math.max(0, Math.min(255, Math.round(value)));
  png.data[offset] = v;
  png.data[offset + 1] = v;
  png.data[offset + 2] = v;
  png.data[offset + 3] = 255;
}

function copyPixel(source, target, sourceIndex, targetX, targetY) {
  const sourceOffset = sourceIndex * 4;
  const targetOffset = (targetY * target.width + targetX) * 4;
  target.data[targetOffset] = source.data[sourceOffset];
  target.data[targetOffset + 1] = source.data[sourceOffset + 1];
  target.data[targetOffset + 2] = source.data[sourceOffset + 2];
  target.data[targetOffset + 3] = source.data[sourceOffset + 3];
}

function xOf(index, width) {
  return index % width;
}

function yOf(index, width) {
  return Math.floor(index / width);
}

function writeEdges(currentGray, candidateGray, edgeCurrent, edgeCandidate, edgeDiff, width, height) {
  let currentEnergy = 0;
  let candidateEnergy = 0;
  let diffOver32 = 0;
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const i = y * width + x;
      const o = i * 4;
      const ce = sobel(currentGray, width, height, x, y);
      const we = sobel(candidateGray, width, height, x, y);
      currentEnergy += ce / 255;
      candidateEnergy += we / 255;
      const d = Math.abs(ce - we);
      if (d > 32) diffOver32++;
      writeGray(edgeCurrent, o, ce);
      writeGray(edgeCandidate, o, we);
      edgeDiff.data[o] = Math.min(255, d * 4);
      edgeDiff.data[o + 1] = Math.max(0, 180 - d * 3);
      edgeDiff.data[o + 2] = Math.max(0, 255 - d * 4);
      edgeDiff.data[o + 3] = 255;
    }
  }
  const total = width * height;
  return {
    currentEnergy: currentEnergy / total,
    candidateEnergy: candidateEnergy / total,
    diffOver32,
  };
}

function sobel(gray, width, height, x, y) {
  const xm = Math.max(0, x - 1);
  const xp = Math.min(width - 1, x + 1);
  const ym = Math.max(0, y - 1);
  const yp = Math.min(height - 1, y + 1);
  const a = gray[ym * width + xm];
  const b = gray[ym * width + x];
  const c = gray[ym * width + xp];
  const d = gray[y * width + xm];
  const f = gray[y * width + xp];
  const g = gray[yp * width + xm];
  const h = gray[yp * width + x];
  const i = gray[yp * width + xp];
  const gx = -a - 2 * d - g + c + 2 * f + i;
  const gy = -a - 2 * b - c + g + 2 * h + i;
  return Math.min(255, Math.sqrt(gx * gx + gy * gy));
}

async function analyzeWorldCrop(id, crop, current, candidate, currentGray, candidateGray, width, height) {
  const bounds = clampCrop(crop, width, height);
  const total = bounds.width * bounds.height;
  const grayCurrent = new PNG({ width: bounds.width, height: bounds.height });
  const grayCandidate = new PNG({ width: bounds.width, height: bounds.height });
  const absDiff = new PNG({ width: bounds.width, height: bounds.height });
  const sideBySide = new PNG({ width: bounds.width * 2, height: bounds.height });
  const edgeCurrent = new PNG({ width: bounds.width, height: bounds.height });
  const edgeCandidate = new PNG({ width: bounds.width, height: bounds.height });
  const edgeDiff = new PNG({ width: bounds.width, height: bounds.height });
  const cropCurrentGray = new Float32Array(total);
  const cropCandidateGray = new Float32Array(total);
  let sumAbs = 0;
  let sumSq = 0;
  let over16 = 0;
  let over32 = 0;
  let over64 = 0;
  let blackCurrent = 0;
  let blackCandidate = 0;
  let terrainCurrent = 0;
  let terrainCandidate = 0;
  let luminanceCurrent = 0;
  let luminanceCandidate = 0;

  for (let y = 0; y < bounds.height; y++) {
    for (let x = 0; x < bounds.width; x++) {
      const sourceIndex = (bounds.y + y) * width + (bounds.x + x);
      const cropIndex = y * bounds.width + x;
      const sourceOffset = sourceIndex * 4;
      const cropOffset = cropIndex * 4;
      const cg = currentGray[sourceIndex];
      const wg = candidateGray[sourceIndex];
      luminanceCurrent += cg;
      luminanceCandidate += wg;
      cropCurrentGray[cropIndex] = cg;
      cropCandidateGray[cropIndex] = wg;
      const d = Math.abs(cg - wg);
      sumAbs += d;
      sumSq += d * d;
      if (d > 16) over16++;
      if (d > 32) over32++;
      if (d > 64) over64++;
      if (cg < 24) blackCurrent++;
      if (wg < 24) blackCandidate++;
      if (isTerrainLike(current.data[sourceOffset], current.data[sourceOffset + 1], current.data[sourceOffset + 2])) terrainCurrent++;
      if (isTerrainLike(candidate.data[sourceOffset], candidate.data[sourceOffset + 1], candidate.data[sourceOffset + 2])) terrainCandidate++;
      copyPixel(current, sideBySide, sourceIndex, x, y);
      copyPixel(candidate, sideBySide, sourceIndex, x + bounds.width, y);
      writeGray(grayCurrent, cropOffset, cg);
      writeGray(grayCandidate, cropOffset, wg);
      const heat = Math.min(255, d * 4);
      absDiff.data[cropOffset] = heat;
      absDiff.data[cropOffset + 1] = Math.max(0, 160 - heat);
      absDiff.data[cropOffset + 2] = Math.max(0, 255 - heat);
      absDiff.data[cropOffset + 3] = 255;
    }
  }

  const edgeStats = writeEdges(cropCurrentGray, cropCandidateGray, edgeCurrent, edgeCandidate, edgeDiff, bounds.width, bounds.height);
  const pixelmatchDiff = new PNG({ width: bounds.width, height: bounds.height });
  const mismatched = pixelmatch(
    grayCurrent.data,
    grayCandidate.data,
    pixelmatchDiff.data,
    bounds.width,
    bounds.height,
    { threshold: 0.08, includeAA: true },
  );

  const prefix = `${id}-world-crop`;
  await writePng(resolve(outDir, `${prefix}-side-by-side.png`), sideBySide);
  await writePng(resolve(outDir, `${prefix}-current-gray.png`), grayCurrent);
  await writePng(resolve(outDir, `${prefix}-candidate-gray.png`), grayCandidate);
  await writePng(resolve(outDir, `${prefix}-absdiff.png`), absDiff);
  await writePng(resolve(outDir, `${prefix}-pixelmatch.png`), pixelmatchDiff);
  await writePng(resolve(outDir, `${prefix}-current-edges.png`), edgeCurrent);
  await writePng(resolve(outDir, `${prefix}-candidate-edges.png`), edgeCandidate);
  await writePng(resolve(outDir, `${prefix}-edge-diff.png`), edgeDiff);

  const diffRatio32 = over32 / total;
  const pixelmatchRatio = mismatched / total;
  const edgeDiffRatio32 = edgeStats.diffOver32 / total;
  const edgeEnergyRatio = edgeEnergyRatioOf(edgeStats.currentEnergy, edgeStats.candidateEnergy);
  const parityDistance =
    0.35 * diffRatio32
    + 0.25 * pixelmatchRatio
    + 0.25 * edgeDiffRatio32
    + 0.15 * Math.min(1, Math.abs(Math.log2(edgeEnergyRatio)));

  return {
    label: bounds.label,
    bounds: { x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height },
    parityDistance: round(parityDistance),
    grayscale: {
      mae: round(sumAbs / total),
      rmse: round(Math.sqrt(sumSq / total)),
      diffRatio16: round(over16 / total),
      diffRatio32: round(diffRatio32),
      diffRatio64: round(over64 / total),
      pixelmatchRatio: round(pixelmatchRatio),
    },
    contentProxies: {
      blackRatioCurrent: round(blackCurrent / total),
      blackRatioCandidate: round(blackCandidate / total),
      terrainLikeRatioCurrent: round(terrainCurrent / total),
      terrainLikeRatioCandidate: round(terrainCandidate / total),
      avgLuminanceCurrent: round(luminanceCurrent / total),
      avgLuminanceCandidate: round(luminanceCandidate / total),
      avgLuminanceDelta: round((luminanceCandidate - luminanceCurrent) / total),
      edgeEnergyCurrent: round(edgeStats.currentEnergy),
      edgeEnergyCandidate: round(edgeStats.candidateEnergy),
      edgeEnergyRatio: round(edgeEnergyRatio),
      edgeDiffRatio32: round(edgeDiffRatio32),
    },
    artifacts: {
      sideBySide: `${artifactRoot}/${prefix}-side-by-side.png`,
      currentGray: `${artifactRoot}/${prefix}-current-gray.png`,
      candidateGray: `${artifactRoot}/${prefix}-candidate-gray.png`,
      absDiff: `${artifactRoot}/${prefix}-absdiff.png`,
      pixelmatch: `${artifactRoot}/${prefix}-pixelmatch.png`,
      currentEdges: `${artifactRoot}/${prefix}-current-edges.png`,
      candidateEdges: `${artifactRoot}/${prefix}-candidate-edges.png`,
      edgeDiff: `${artifactRoot}/${prefix}-edge-diff.png`,
    },
  };
}

function requiredDir(envName) {
  const value = process.env[envName];
  if (!value) {
    throw new Error(`${envName} is required. Example: ${envName}=path/to/pngs`);
  }
  return resolvePath(value);
}

function resolvePath(value) {
  return resolve(repoRoot, value);
}

async function readJson(path) {
  return JSON.parse(await readFile(path, 'utf8'));
}

function cropFor(id, width, height) {
  const spec = cropSpecs[id];
  if (!spec) return undefined;
  return scaleCrop(Array.isArray(spec) ? spec[0] : spec, width, height);
}

function scaleCrop(spec, width, height) {
  const unit = spec.unit ?? 'px';
  if (unit === 'ratio') {
    return {
      label: spec.label,
      x: Math.round((spec.x ?? 0) * width),
      y: Math.round((spec.y ?? 0) * height),
      width: Math.round((spec.width ?? 1) * width),
      height: Math.round((spec.height ?? 1) * height),
    };
  }
  return {
    label: spec.label,
    x: Math.round(spec.x ?? 0),
    y: Math.round(spec.y ?? 0),
    width: Math.round(spec.width ?? width),
    height: Math.round(spec.height ?? height),
  };
}

function clampCrop(crop, width, height) {
  const x = Math.max(0, Math.min(width - 1, crop.x));
  const y = Math.max(0, Math.min(height - 1, crop.y));
  return {
    label: crop.label,
    x,
    y,
    width: Math.max(1, Math.min(width - x, crop.width)),
    height: Math.max(1, Math.min(height - y, crop.height)),
  };
}

async function writePng(path, png) {
  await writeFile(path, PNG.sync.write(png));
}

function round(value) {
  return Number(value.toFixed(5));
}

export const scriptUrl = pathToFileURL(import.meta.url).href;

---
name: compare-screenshots
description: Compare screenshots against the intended design, distinguishing approved references from historical baselines. Use for iterative implementation matching, before/after visual review, objective image telemetry, or checking a lone capture for flat, empty, or badly framed content.
---

# Compare Screenshots

Judge images against the intended result. A user-approved design is the target;
a historical baseline is only an earlier attempt and may be wrong. Metrics locate
differences, never decide correctness. Use
[design-with-images](../design-with-images/SKILL.md) for the full exploration-to-implementation loop.

## Workflow

1. **Establish the target.** Use the user-approved reference and stated design
   requirements when available; do not replace them with your own taste. Otherwise
   derive the target from the visual requirement, what the thing depicts in reality
   and the domain skill that owns the look. Write it down in one or two
   concrete sentences ("low sun should cast long shadows east; trees fill the
   canopy; labels stay legible at this zoom").
   - If the right answer isn't clear — competing valid readings, a taste or
     product-intent call, a tradeoff only the owner can settle — **stop and ask
     the user** what the correct answer should be. Show them the comparison.
     Do not quietly default to the baseline to avoid asking; that bakes in
     whatever the baseline got wrong.
2. **Confirm comparability** so the differences you see are real, not capture
   artifacts: same viewport, DPR, route/page, frozen time/tick, camera intent,
   UI state, data, fonts/assets where they matter. If not comparable, fix
   capture setup or compare only a crop/feature where the mismatch is harmless.
3. **Measure the approved design.** For reference matching, read and complete
   [Reference Landmarks](references/reference-landmarks.md) before changing code
   or accepting a candidate. Then generate artifacts sized to the question:
   side-by-side, key-feature crops/zooms, grayscale, absolute grayscale heatmap,
   pixelmatch diff, per-image Sobel/edge maps, edge-difference heatmap, JSON
   metrics.
4. **Inspect boundaries before judging the whole.** For every changed visual
   effect, inspect all sides at native scale and in matched detail crops. Include
   the effect's full fade and surrounding space; a crop ending at the component
   box hides spill. Compare top/right/bottom/left extents separately, anchored to
   visible text, rules or silhouettes rather than inferred CSS bounds. Check
   every foreground feature crossed by the effect (lines, icons, text, adjacent
   panels): brightness, color, sharpness and continuity must match the target.
   A readable line can still be incorrectly dimmed. Record each check as
   reference observation → candidate observation → pass/fix/uncertain, with its
   crop. Use the landmark table to resolve local distances and contrast;
   full-frame averages cannot settle a local defect.
5. **Judge each divergence against the target.** For every place the two images
   differ, name what is actually there in plain terms — missing content, wrong
   camera, bad hierarchy, weak contrast, wrong depth, text overlap, layout
   shift, clipped edge, unexpected blur, style mismatch — and decide which side
   is closer to correct. The answer can be the candidate, the baseline, both
   wrong, or a genuine toss-up.
6. **Get a neutral second opinion** for disputed or high-stakes calls: a fresh
   subagent given only the two images and neutral labels, per
   `references/subagent-visual-review.md`.
7. **Resolve mismatches to an approved target.** When implementing a selected
   design, record material differences in spacing, shape, softness, typography
   and hierarchy; revise, recapture and repeat until resolved or the user changes
   the target. Do not silently exempt a difference because the code is simpler.
8. **Conclude with one verdict:** candidate is less wrong (accept, and re-bless
   the baseline if one exists), baseline is less wrong (reject), both wrong
   (another pass needed — say what's still off), or unclear (ask the user).
   Accept only when every boundary/overlap check passes or has an explicit
   user-approved deviation; uncertainty requires closer evidence, not a pass.
   Overall resemblance or a positive second opinion cannot cancel a local defect.
   Never accept on a lower score alone or reject on a higher one. Never hide
   content, blur detail, crop away differences, or make the capture less
   truthful to move a number.

## Useful Metrics

Pick metrics that answer the question. For full visual comparisons, report:

- `mae`: mean absolute grayscale difference, 0..255, lower is closer.
- `rmse`: grayscale root mean square error, lower is closer.
- `diffRatio16`, `diffRatio32`, `diffRatio64`: fraction of pixels over each
  grayscale delta threshold.
- `pixelmatchRatio`: mismatch ratio from pixelmatch over grayscale images.
- `edgeEnergyCurrent` and `edgeEnergyCandidate`: average Sobel edge strength.
- `edgeEnergyRatio`: candidate/current. Far below 1 usually means missing
  geometry, props, labels, or terrain; far above 1 usually means noisy or
  incorrect detail.
- `edgeDiffRatio32`: fraction of pixels whose Sobel edge differs materially.
- `avgLuminanceCurrent`, `avgLuminanceCandidate`, `avgLuminanceDelta`: average
  brightness and delta. Use when a render is visibly too dark/light even if a
  broader distance score improves.
- Content proxies relevant to the scene: black/void ratio, terrain-like ratio,
  water-like ratio, team-color ratio, label/text mask ratio.

For UI/document/layout reviews, also use crop bounds, text/foreground mask
coverage, contrast checks, edge clipping, element positions, and before/after
dimensions when those beat global pixel distance.

## Single-Image Metrics

Every metric above measures one image against another, so none of them can
answer "is this capture worth anything" when there is nothing to compare it to
— and the pair score is symmetric, so an enormous distance never says *which*
side is the empty frame. A few absolute numbers do, computed on a coarse grid
from a single PNG:

- `colorEntropyBits` under ~3.0, or `dominantColorShare` over ~0.6: one colour
  owns the frame. A sparse scene, an unlit one, or a subject that never drew.
- `edgeDensity` under ~0.04: almost no form anywhere. Empty framing, a
  primitive-dominant scene, or the subject sitting outside the crop.
- `luminanceContrast` under ~60: fog, darkness, or haze compressing the whole
  frame into one band.
- `transparentShare` above 0 on a capture that should be opaque: the capture
  itself is wrong. A transparent pixel keeps whatever RGB it was left with, so
  an invisible frame can look rich until it is composited — the scene metrics
  composite before measuring, and name the invisible share rather than letting
  you infer it. The pair metrics above still read stored RGB, so this field is
  where transparency gets told either way.

These are thresholds for *suspicion*, not gates. A deliberately minimal design,
a night scene, an empty-state screen, and a whiteboard all trip them honestly.
Use them to decide where to look, then say what the frame is actually doing —
never adjust a capture to raise a number, which is the same failure as cropping
away a difference.

## Distance Score

When a single fixed-pair number is useful, this default works for structural
changes:

`distance = 0.35 * diffRatio32 + 0.25 * pixelmatchRatio + 0.25 * edgeDiffRatio32 + 0.15 * min(1, abs(log2(edgeEnergyRatio)))`

It measures **distance from the other image**, nothing more. Because the
baseline can be wrong, a distance of 0 is not success and a large distance is
not failure — a richer scene, clearer models, stronger labels, real depth, or
better lighting all legitimately raise it. Use the score to find *where* the
images move; decide who is right in step 5. Name the field for what it measures
(distance, not "parity") so no one reads it as a verdict.

Report the full-frame score and, when UI dominates the shot, a labeled
world-crop score. Use the world-crop score to locate renderer movement and keep
the full-frame score so UI/camera mistakes stay visible.

## Score Discipline

- Quote the previous and new distance for the same pair each iteration, then say
  whether the movement is toward the target, away from it, or diagnostic noise.
- Prefer edge metrics for missing-content bugs. A flat top-down map can show a
  deceptively moderate grayscale diff while edge energy proves trees, roads,
  city forms, or army silhouettes are absent.
- Segment out stable UI when it dominates and the question is the world render;
  keep a full-frame score too, labeled.
- If the camera is wrong, pixel scores are diagnostic only. Fix camera intent
  first, then judge the render.

## Tooling

Keep comparison scripts inside the skill or a temporary workspace, not in
product code, unless the product genuinely needs screenshot comparison at
runtime.

- `scripts/visual-parity-diff.mjs` is a reusable local helper. Its PNG and
  pixel-diff runtime is bundled with the skill, so target repositories do not
  need `pngjs` or `pixelmatch`. Run it with `REFERENCE_DIR=<png-folder>`,
  `CANDIDATE_DIR=<png-folder>`, and optional `OUT_DIR=<artifact-folder>`.
  `REPORT_ORDER=a,b,c` pins ordering;
  `CROPS_JSON=<file>` adds labeled crops (keyed by image id, each crop in pixels
  or `{ "unit": "ratio" }` normalized bounds). Pair reports carry a
  `sceneMetrics` block per side.
- Drop `REFERENCE_DIR` to run the same helper on a folder with no counterpart:
  it writes `scene-metrics.json` with the single-image numbers above and no
  diff artifacts. Use it on a lone screenshot, on a full capture set before
  anyone reviews it, or to find which side of a large distance is the empty
  one.
- `scripts/visual-parity-diff.eval.mjs` is the helper's own eval: it generates
  fixtures whose correct answer is known by construction — empty, transparent,
  primitive-dominant, authored, degenerate — and asserts the classification,
  the invariances, and the CLI contract. Run it with the same `REPO_ROOT` after
  changing the script. Never satisfy a failing check by loosening a threshold
  until you have shown the fixture, not the code, is what's wrong.
- For other tasks, adapt the same artifact set rather than adding one-off
  scripts to the application. Extend the helper if a needed pair is uncovered.

## References

- `references/subagent-visual-review.md`: neutral subagent prompt/config for an
  independent judgment when history could bias you.

Fixture repository intentionally has no package.json or node_modules.

import assert from 'node:assert/strict';
import { access, readFile, rm } from 'node:fs/promises';
import { createRequire } from 'node:module';
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import { spawnSync } from 'node:child_process';
import test from 'node:test';

const testDir = dirname(fileURLToPath(import.meta.url));
const skillDir = resolve(testDir, '..');
const helper = resolve(skillDir, 'scripts/visual-parity-diff.mjs');
const targetRepo = resolve(testDir, 'fixtures/target-without-helper-packages');
const outDir = resolve(targetRepo, 'visual-diff-test-output');
const controlOutDir = resolve(targetRepo, 'visual-diff-control-output');

test('runs from a target repository without pngjs or pixelmatch', async () => {
  const targetRequire = createRequire(resolve(targetRepo, 'web/package.json'));
  for (const dependency of ['pngjs', 'pixelmatch']) {
    assert.throws(
      () => targetRequire.resolve(dependency),
      (error) => error?.code === 'MODULE_NOT_FOUND',
      `${dependency} must remain unavailable to the target repository`,
    );
  }

  try {
    const result = spawnSync(process.execPath, [helper], {
      cwd: targetRepo,
      encoding: 'utf8',
      env: {
        ...process.env,
        REFERENCE_DIR: 'reference',
        CANDIDATE_DIR: 'candidate',
        OUT_DIR: 'visual-diff-test-output',
      },
    });
    assert.equal(result.status, 0, result.stderr || result.stdout);

    const report = JSON.parse(await readFile(resolve(outDir, 'visual-parity-diff.json'), 'utf8'));
    assert.equal(report.pairCount, 1);
    assert.equal(report.results[0].id, 'fixture');
    assert.equal(report.results[0].grayscale.pixelmatchRatio, 1);
    await access(resolve(outDir, 'fixture-pixelmatch.png'));
  } finally {
    await rm(outDir, { recursive: true, force: true });
  }
});

test('preserves the identical-image control case', async () => {
  try {
    const result = spawnSync(process.execPath, [helper], {
      cwd: targetRepo,
      encoding: 'utf8',
      env: {
        ...process.env,
        REFERENCE_DIR: 'reference',
        CANDIDATE_DIR: 'reference',
        OUT_DIR: 'visual-diff-control-output',
      },
    });
    assert.equal(result.status, 0, result.stderr || result.stdout);

    const report = JSON.parse(await readFile(resolve(controlOutDir, 'visual-parity-diff.json'), 'utf8'));
    assert.equal(report.results[0].grayscale.pixelmatchRatio, 0);
  } finally {
    await rm(controlOutDir, { recursive: true, force: true });
  }
});

/**
 * Compare two equally sized images, pixel by pixel.
 *
 * @param {Uint8Array | Uint8ClampedArray} img1 First image data.
 * @param {Uint8Array | Uint8ClampedArray} img2 Second image data.
 * @param {Uint8Array | Uint8ClampedArray | void} output Image data to write the diff to, if provided.
 * @param {number} width Input images width.
 * @param {number} height Input images height.
 *
 * @param {Object} [options]
 * @param {number} [options.threshold=0.1] Matching threshold (0 to 1); smaller is more sensitive.
 * @param {boolean} [options.includeAA=false] Whether to skip anti-aliasing detection.
 * @param {number} [options.alpha=0.1] Opacity of original image in diff output.
 * @param {[number, number, number]} [options.aaColor=[255, 255, 0]] Color of anti-aliased pixels in diff output.
 * @param {[number, number, number]} [options.diffColor=[255, 0, 0]] Color of different pixels in diff output.
 * @param {[number, number, number]} [options.diffColorAlt=options.diffColor] Whether to detect dark on light differences between img1 and img2 and set an alternative color to differentiate between the two.
 * @param {boolean} [options.diffMask=false] Draw the diff over a transparent background (a mask).
 * @param {boolean} [options.checkerboard=true] Whether to blend semi-transparent pixels against a checkerboard pattern (true) or plain white (false) when comparing.
 *
 * @return {number} The number of mismatched pixels.
 */
export default function pixelmatch(img1, img2, output, width, height, options = {}) {
    const {
        threshold = 0.1,
        alpha = 0.1,
        aaColor = [255, 255, 0],
        diffColor = [255, 0, 0],
        checkerboard = true,
        includeAA, diffColorAlt, diffMask
    } = options;

    if (!isPixelData(img1) || !isPixelData(img2) || (output && !isPixelData(output)))
        throw new Error('Image data: Uint8Array, Uint8ClampedArray or Buffer expected.');

    if (img1.length !== img2.length || (output && output.length !== img1.length))
        throw new Error(`Image sizes do not match. Image 1 size: ${img1.length}, image 2 size: ${img2.length}`);

    if (img1.length !== width * height * 4) throw new Error(`Image data size does not match width/height. Expecting ${width * height * 4}. Got ${img1.length}`);

    // check if images are identical
    const len = width * height;
    const a32 = new Uint32Array(img1.buffer, img1.byteOffset, len);
    const b32 = new Uint32Array(img2.buffer, img2.byteOffset, len);
    let identical = true;

    for (let i = 0; i < len; i++) {
        if (a32[i] !== b32[i]) { identical = false; break; }
    }
    if (identical) { // fast path if identical
        if (output && !diffMask) {
            for (let i = 0, pos = 0; i < len; i++, pos += 4) drawGrayPixel(img1, pos, alpha, output);
        }
        return 0;
    }

    // maximum acceptable square distance between two colors;
    // 35215 is the maximum possible value for the YIQ difference metric
    const maxDelta = 35215 * threshold * threshold;
    const [aaR, aaG, aaB] = aaColor;
    const [diffR, diffG, diffB] = diffColor;
    const [altR, altG, altB] = diffColorAlt || diffColor;
    let diff = 0;

    // compare each pixel of one image against the other one
    for (let i = 0, pos = 0; i < len; i++, pos += 4) {
        // squared YUV distance between colors at this pixel position, negative if the img2 pixel is darker
        const delta = a32[i] === b32[i] ? 0 : colorDelta(img1, img2, pos, pos, checkerboard);

        // the color difference is above the threshold
        if (Math.abs(delta) > maxDelta) {
            const x = i % width;
            const y = (i / width) | 0;
            // check it's a real rendering difference or just anti-aliasing
            const isExcludedAA = !includeAA && (antialiased(img1, x, y, width, height, a32, b32, checkerboard) || antialiased(img2, x, y, width, height, b32, a32, checkerboard));
            if (isExcludedAA) {
                // one of the pixels is anti-aliasing; draw as yellow and do not count as difference
                // note that we do not include such pixels in a mask
                if (output && !diffMask) drawPixel(output, pos, aaR, aaG, aaB);

            } else {
                // found substantial difference not caused by anti-aliasing; draw it as such
                if (output) {
                    if (delta < 0) {
                        drawPixel(output, pos, altR, altG, altB);
                    } else {
                        drawPixel(output, pos, diffR, diffG, diffB);
                    }
                }
                diff++;
            }

        } else if (output && !diffMask) {
            // pixels are similar; draw background as grayscale image blended with white
            drawGrayPixel(img1, pos, alpha, output);
        }
    }

    // return the number of different pixels
    return diff;
}

/** @param {Uint8Array | Uint8ClampedArray} arr */
function isPixelData(arr) {
    // work around instanceof Uint8Array not working properly in some Jest environments
    return ArrayBuffer.isView(arr) && arr.BYTES_PER_ELEMENT === 1;
}

/**
 * Check if a pixel is likely a part of anti-aliasing;
 * based on "Anti-aliased Pixel and Intensity Slope Detector" paper by V. Vysniauskas, 2009
 * @param {Uint8Array | Uint8ClampedArray} img
 * @param {number} x1
 * @param {number} y1
 * @param {number} width
 * @param {number} height
 * @param {Uint32Array} a32
 * @param {Uint32Array} b32
 * @param {boolean} checkerboard
 */
function antialiased(img, x1, y1, width, height, a32, b32, checkerboard) {
    const x0 = Math.max(x1 - 1, 0);
    const y0 = Math.max(y1 - 1, 0);
    const x2 = Math.min(x1 + 1, width - 1);
    const y2 = Math.min(y1 + 1, height - 1);
    const pos4 = (y1 * width + x1) * 4;
    // cache the center pixel's RGBA once instead of re-reading it on every neighbor comparison
    const cr = img[pos4];
    const cg = img[pos4 + 1];
    const cb = img[pos4 + 2];
    const ca = img[pos4 + 3];
    let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
    let min = 0;
    let max = 0;
    let minX = 0;
    let minY = 0;
    let maxX = 0;
    let maxY = 0;

    // go through 8 adjacent pixels
    for (let x = x0; x <= x2; x++) {
        for (let y = y0; y <= y2; y++) {
            if (x === x1 && y === y1) continue;

            // brightness delta between the center pixel and adjacent one
            const delta = brightnessDelta(img, pos4, (y * width + x) * 4, cr, cg, cb, ca, checkerboard);

            // count the number of equal, darker and brighter adjacent pixels
            if (delta === 0) {
                zeroes++;
                // if found more than 2 equal siblings, it's definitely not anti-aliasing
                if (zeroes > 2) return false;

            // remember the darkest pixel
            } else if (delta < min) {
                min = delta;
                minX = x;
                minY = y;

            // remember the brightest pixel
            } else if (delta > max) {
                max = delta;
                maxX = x;
                maxY = y;
            }
        }
    }

    // if there are no both darker and brighter pixels among siblings, it's not anti-aliasing
    if (min === 0 || max === 0) return false;

    // if either the darkest or the brightest pixel has 3+ equal siblings in both images
    // (definitely not anti-aliased), this pixel is anti-aliased
    return (hasManySiblings(a32, minX, minY, width, height) && hasManySiblings(b32, minX, minY, width, height)) ||
           (hasManySiblings(a32, maxX, maxY, width, height) && hasManySiblings(b32, maxX, maxY, width, height));
}

/**
 * Check if a pixel has 3+ adjacent pixels of the same color.
 * @param {Uint32Array} img
 * @param {number} x1
 * @param {number} y1
 * @param {number} width
 * @param {number} height
 */
function hasManySiblings(img, x1, y1, width, height) {
    const x0 = Math.max(x1 - 1, 0);
    const y0 = Math.max(y1 - 1, 0);
    const x2 = Math.min(x1 + 1, width - 1);
    const y2 = Math.min(y1 + 1, height - 1);
    const val = img[y1 * width + x1];
    let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;

    // go through 8 adjacent pixels
    for (let x = x0; x <= x2; x++) {
        for (let y = y0; y <= y2; y++) {
            if (x === x1 && y === y1) continue;
            zeroes += +(val === img[y * width + x]);
            if (zeroes > 2) return true;
        }
    }
    return false;
}

/**
 * Calculate color difference according to the paper "Measuring perceived color difference
 * using YIQ NTSC transmission color space in mobile applications" by Y. Kotsarenko and F. Ramos.
 * Caller guarantees the two pixels differ, so the early-zero check is omitted.
 * @param {Uint8Array | Uint8ClampedArray} img1
 * @param {Uint8Array | Uint8ClampedArray} img2
 * @param {number} k
 * @param {number} m
 * @param {boolean} checkerboard
 */
function colorDelta(img1, img2, k, m, checkerboard) {
    const r1 = img1[k];
    const g1 = img1[k + 1];
    const b1 = img1[k + 2];
    const a1 = img1[k + 3];
    const r2 = img2[m];
    const g2 = img2[m + 1];
    const b2 = img2[m + 2];
    const a2 = img2[m + 3];

    let dr = r1 - r2;
    let dg = g1 - g2;
    let db = b1 - b2;
    const da = a1 - a2;

    if (a1 < 255 || a2 < 255) { // blend pixels with background
        let rb = 255, gb = 255, bb = 255;
        if (checkerboard) {
            rb = 48 + 159 * (k % 2);
            gb = 48 + 159 * ((k / 1.618033988749895 | 0) % 2);
            bb = 48 + 159 * ((k / 2.618033988749895 | 0) % 2);
        }
        dr = (r1 * a1 - r2 * a2 - rb * da) / 255;
        dg = (g1 * a1 - g2 * a2 - gb * da) / 255;
        db = (b1 * a1 - b2 * a2 - bb * da) / 255;
    }

    const y = dr * 0.29889531 + dg * 0.58662247 + db * 0.11448223;
    const i = dr * 0.59597799 - dg * 0.27417610 - db * 0.32180189;
    const q = dr * 0.21147017 - dg * 0.52261711 + db * 0.31114694;

    const delta = 0.5053 * y * y + 0.299 * i * i + 0.1957 * q * q;

    // encode whether the pixel lightens or darkens in the sign
    return y > 0 ? -delta : delta;
}

/**
 * Specialized brightness-only color delta for the anti-aliasing detector,
 * with the center pixel's RGBA hoisted out of the neighbor loop.
 * @param {Uint8Array | Uint8ClampedArray} img
 * @param {number} k center pixel offset
 * @param {number} m neighbor pixel offset
 * @param {number} r1
 * @param {number} g1
 * @param {number} b1
 * @param {number} a1
 * @param {boolean} checkerboard
 */
function brightnessDelta(img, k, m, r1, g1, b1, a1, checkerboard) {
    const r2 = img[m];
    const g2 = img[m + 1];
    const b2 = img[m + 2];
    const a2 = img[m + 3];

    let dr = r1 - r2;
    let dg = g1 - g2;
    let db = b1 - b2;
    const da = a1 - a2;

    if (!dr && !dg && !db && !da) return 0;

    if (a1 < 255 || a2 < 255) {
        let rb = 255, gb = 255, bb = 255;
        if (checkerboard) {
            rb = 48 + 159 * (k % 2);
            gb = 48 + 159 * ((k / 1.618033988749895 | 0) % 2);
            bb = 48 + 159 * ((k / 2.618033988749895 | 0) % 2);
        }
        dr = (r1 * a1 - r2 * a2 - rb * da) / 255;
        dg = (g1 * a1 - g2 * a2 - gb * da) / 255;
        db = (b1 * a1 - b2 * a2 - bb * da) / 255;
    }

    return dr * 0.29889531 + dg * 0.58662247 + db * 0.11448223;
}

/**
 * @param {Uint8Array | Uint8ClampedArray} output
 * @param {number} pos
 * @param {number} r
 * @param {number} g
 * @param {number} b
 */
function drawPixel(output, pos, r, g, b) {
    output[pos] = r;
    output[pos + 1] = g;
    output[pos + 2] = b;
    output[pos + 3] = 255;
}

/**
 * @param {Uint8Array | Uint8ClampedArray} img
 * @param {number} i
 * @param {number} alpha
 * @param {Uint8Array | Uint8ClampedArray} output
 */
function drawGrayPixel(img, i, alpha, output) {
    const val = 255 + (img[i] * 0.29889531 + img[i + 1] * 0.58662247 + img[i + 2] * 0.11448223 - 255) * alpha * img[i + 3] / 255;
    drawPixel(output, i, val, val, val);
}

ISC License

Copyright (c) 2025, Mapbox

Permission to use, copy, modify, and/or distribute this software for any purpose
with or without fee is hereby granted, provided that the above copyright notice
and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
THIS SOFTWARE.

{
  "name": "pixelmatch",
  "version": "7.2.0",
  "type": "module",
  "description": "The smallest and fastest pixel-level image comparison library.",
  "main": "index.js",
  "types": "index.d.ts",
  "bin": {
    "pixelmatch": "bin/pixelmatch"
  },
  "files": [
    "bin/pixelmatch",
    "index.d.ts"
  ],
  "dependencies": {
    "pngjs": "^7.0.0"
  },
  "devDependencies": {
    "eslint": "^10.2.1",
    "eslint-config-mourner": "^4.1.0",
    "typescript": "^6.0.3"
  },
  "scripts": {
    "pretest": "eslint",
    "test": "tsc && node --test"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/mapbox/pixelmatch.git"
  },
  "keywords": [
    "image",
    "comparison",
    "diff"
  ],
  "author": "Volodymyr Agafonkin",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/mapbox/pixelmatch/issues"
  },
  "homepage": "https://github.com/mapbox/pixelmatch#readme"
}

"use strict";

let interlaceUtils = require("./interlace");

let pixelBppMapper = [
  // 0 - dummy entry
  function () {},

  // 1 - L
  // 0: 0, 1: 0, 2: 0, 3: 0xff
  function (pxData, data, pxPos, rawPos) {
    if (rawPos === data.length) {
      throw new Error("Ran out of data");
    }

    let pixel = data[rawPos];
    pxData[pxPos] = pixel;
    pxData[pxPos + 1] = pixel;
    pxData[pxPos + 2] = pixel;
    pxData[pxPos + 3] = 0xff;
  },

  // 2 - LA
  // 0: 0, 1: 0, 2: 0, 3: 1
  function (pxData, data, pxPos, rawPos) {
    if (rawPos + 1 >= data.length) {
      throw new Error("Ran out of data");
    }

    let pixel = data[rawPos];
    pxData[pxPos] = pixel;
    pxData[pxPos + 1] = pixel;
    pxData[pxPos + 2] = pixel;
    pxData[pxPos + 3] = data[rawPos + 1];
  },

  // 3 - RGB
  // 0: 0, 1: 1, 2: 2, 3: 0xff
  function (pxData, data, pxPos, rawPos) {
    if (rawPos + 2 >= data.length) {
      throw new Error("Ran out of data");
    }

    pxData[pxPos] = data[rawPos];
    pxData[pxPos + 1] = data[rawPos + 1];
    pxData[pxPos + 2] = data[rawPos + 2];
    pxData[pxPos + 3] = 0xff;
  },

  // 4 - RGBA
  // 0: 0, 1: 1, 2: 2, 3: 3
  function (pxData, data, pxPos, rawPos) {
    if (rawPos + 3 >= data.length) {
      throw new Error("Ran out of data");
    }

    pxData[pxPos] = data[rawPos];
    pxData[pxPos + 1] = data[rawPos + 1];
    pxData[pxPos + 2] = data[rawPos + 2];
    pxData[pxPos + 3] = data[rawPos + 3];
  },
];

let pixelBppCustomMapper = [
  // 0 - dummy entry
  function () {},

  // 1 - L
  // 0: 0, 1: 0, 2: 0, 3: 0xff
  function (pxData, pixelData, pxPos, maxBit) {
    let pixel = pixelData[0];
    pxData[pxPos] = pixel;
    pxData[pxPos + 1] = pixel;
    pxData[pxPos + 2] = pixel;
    pxData[pxPos + 3] = maxBit;
  },

  // 2 - LA
  // 0: 0, 1: 0, 2: 0, 3: 1
  function (pxData, pixelData, pxPos) {
    let pixel = pixelData[0];
    pxData[pxPos] = pixel;
    pxData[pxPos + 1] = pixel;
    pxData[pxPos + 2] = pixel;
    pxData[pxPos + 3] = pixelData[1];
  },

  // 3 - RGB
  // 0: 0, 1: 1, 2: 2, 3: 0xff
  function (pxData, pixelData, pxPos, maxBit) {
    pxData[pxPos] = pixelData[0];
    pxData[pxPos + 1] = pixelData[1];
    pxData[pxPos + 2] = pixelData[2];
    pxData[pxPos + 3] = maxBit;
  },

  // 4 - RGBA
  // 0: 0, 1: 1, 2: 2, 3: 3
  function (pxData, pixelData, pxPos) {
    pxData[pxPos] = pixelData[0];
    pxData[pxPos + 1] = pixelData[1];
    pxData[pxPos + 2] = pixelData[2];
    pxData[pxPos + 3] = pixelData[3];
  },
];

function bitRetriever(data, depth) {
  let leftOver = [];
  let i = 0;

  function split() {
    if (i === data.length) {
      throw new Error("Ran out of data");
    }
    let byte = data[i];
    i++;
    let byte8, byte7, byte6, byte5, byte4, byte3, byte2, byte1;
    switch (depth) {
      default:
        throw new Error("unrecognised depth");
      case 16:
        byte2 = data[i];
        i++;
        leftOver.push((byte << 8) + byte2);
        break;
      case 4:
        byte2 = byte & 0x0f;
        byte1 = byte >> 4;
        leftOver.push(byte1, byte2);
        break;
      case 2:
        byte4 = byte & 3;
        byte3 = (byte >> 2) & 3;
        byte2 = (byte >> 4) & 3;
        byte1 = (byte >> 6) & 3;
        leftOver.push(byte1, byte2, byte3, byte4);
        break;
      case 1:
        byte8 = byte & 1;
        byte7 = (byte >> 1) & 1;
        byte6 = (byte >> 2) & 1;
        byte5 = (byte >> 3) & 1;
        byte4 = (byte >> 4) & 1;
        byte3 = (byte >> 5) & 1;
        byte2 = (byte >> 6) & 1;
        byte1 = (byte >> 7) & 1;
        leftOver.push(byte1, byte2, byte3, byte4, byte5, byte6, byte7, byte8);
        break;
    }
  }

  return {
    get: function (count) {
      while (leftOver.length < count) {
        split();
      }
      let returner = leftOver.slice(0, count);
      leftOver = leftOver.slice(count);
      return returner;
    },
    resetAfterLine: function () {
      leftOver.length = 0;
    },
    end: function () {
      if (i !== data.length) {
        throw new Error("extra data found");
      }
    },
  };
}

function mapImage8Bit(image, pxData, getPxPos, bpp, data, rawPos) {
  // eslint-disable-line max-params
  let imageWidth = image.width;
  let imageHeight = image.height;
  let imagePass = image.index;
  for (let y = 0; y < imageHeight; y++) {
    for (let x = 0; x < imageWidth; x++) {
      let pxPos = getPxPos(x, y, imagePass);
      pixelBppMapper[bpp](pxData, data, pxPos, rawPos);
      rawPos += bpp; //eslint-disable-line no-param-reassign
    }
  }
  return rawPos;
}

function mapImageCustomBit(image, pxData, getPxPos, bpp, bits, maxBit) {
  // eslint-disable-line max-params
  let imageWidth = image.width;
  let imageHeight = image.height;
  let imagePass = image.index;
  for (let y = 0; y < imageHeight; y++) {
    for (let x = 0; x < imageWidth; x++) {
      let pixelData = bits.get(bpp);
      let pxPos = getPxPos(x, y, imagePass);
      pixelBppCustomMapper[bpp](pxData, pixelData, pxPos, maxBit);
    }
    bits.resetAfterLine();
  }
}

exports.dataToBitMap = function (data, bitmapInfo) {
  let width = bitmapInfo.width;
  let height = bitmapInfo.height;
  let depth = bitmapInfo.depth;
  let bpp = bitmapInfo.bpp;
  let interlace = bitmapInfo.interlace;
  let bits;

  if (depth !== 8) {
    bits = bitRetriever(data, depth);
  }
  let pxData;
  if (depth <= 8) {
    pxData = Buffer.alloc(width * height * 4);
  } else {
    pxData = new Uint16Array(width * height * 4);
  }
  let maxBit = Math.pow(2, depth) - 1;
  let rawPos = 0;
  let images;
  let getPxPos;

  if (interlace) {
    images = interlaceUtils.getImagePasses(width, height);
    getPxPos = interlaceUtils.getInterlaceIterator(width, height);
  } else {
    let nonInterlacedPxPos = 0;
    getPxPos = function () {
      let returner = nonInterlacedPxPos;
      nonInterlacedPxPos += 4;
      return returner;
    };
    images = [{ width: width, height: height }];
  }

  for (let imageIndex = 0; imageIndex < images.length; imageIndex++) {
    if (depth === 8) {
      rawPos = mapImage8Bit(
        images[imageIndex],
        pxData,
        getPxPos,
        bpp,
        data,
        rawPos
      );
    } else {
      mapImageCustomBit(
        images[imageIndex],
        pxData,
        getPxPos,
        bpp,
        bits,
        maxBit
      );
    }
  }
  if (depth === 8) {
    if (rawPos !== data.length) {
      throw new Error("extra data found");
    }
  } else {
    bits.end();
  }

  return pxData;
};

"use strict";

let constants = require("./constants");

module.exports = function (dataIn, width, height, options) {
  let outHasAlpha =
    [constants.COLORTYPE_COLOR_ALPHA, constants.COLORTYPE_ALPHA].indexOf(
      options.colorType
    ) !== -1;
  if (options.colorType === options.inputColorType) {
    let bigEndian = (function () {
      let buffer = new ArrayBuffer(2);
      new DataView(buffer).setInt16(0, 256, true /* littleEndian */);
      // Int16Array uses the platform's endianness.
      return new Int16Array(buffer)[0] !== 256;
    })();
    // If no need to convert to grayscale and alpha is present/absent in both, take a fast route
    if (options.bitDepth === 8 || (options.bitDepth === 16 && bigEndian)) {
      return dataIn;
    }
  }

  // map to a UInt16 array if data is 16bit, fix endianness below
  let data = options.bitDepth !== 16 ? dataIn : new Uint16Array(dataIn.buffer);

  let maxValue = 255;
  let inBpp = constants.COLORTYPE_TO_BPP_MAP[options.inputColorType];
  if (inBpp === 4 && !options.inputHasAlpha) {
    inBpp = 3;
  }
  let outBpp = constants.COLORTYPE_TO_BPP_MAP[options.colorType];
  if (options.bitDepth === 16) {
    maxValue = 65535;
    outBpp *= 2;
  }
  let outData = Buffer.alloc(width * height * outBpp);

  let inIndex = 0;
  let outIndex = 0;

  let bgColor = options.bgColor || {};
  if (bgColor.red === undefined) {
    bgColor.red = maxValue;
  }
  if (bgColor.green === undefined) {
    bgColor.green = maxValue;
  }
  if (bgColor.blue === undefined) {
    bgColor.blue = maxValue;
  }

  function getRGBA() {
    let red;
    let green;
    let blue;
    let alpha = maxValue;
    switch (options.inputColorType) {
      case constants.COLORTYPE_COLOR_ALPHA:
        alpha = data[inIndex + 3];
        red = data[inIndex];
        green = data[inIndex + 1];
        blue = data[inIndex + 2];
        break;
      case constants.COLORTYPE_COLOR:
        red = data[inIndex];
        green = data[inIndex + 1];
        blue = data[inIndex + 2];
        break;
      case constants.COLORTYPE_ALPHA:
        alpha = data[inIndex + 1];
        red = data[inIndex];
        green = red;
        blue = red;
        break;
      case constants.COLORTYPE_GRAYSCALE:
        red = data[inIndex];
        green = red;
        blue = red;
        break;
      default:
        throw new Error(
          "input color type:" +
            options.inputColorType +
            " is not supported at present"
        );
    }

    if (options.inputHasAlpha) {
      if (!outHasAlpha) {
        alpha /= maxValue;
        red = Math.min(
          Math.max(Math.round((1 - alpha) * bgColor.red + alpha * red), 0),
          maxValue
        );
        green = Math.min(
          Math.max(Math.round((1 - alpha) * bgColor.green + alpha * green), 0),
          maxValue
        );
        blue = Math.min(
          Math.max(Math.round((1 - alpha) * bgColor.blue + alpha * blue), 0),
          maxValue
        );
      }
    }
    return { red: red, green: green, blue: blue, alpha: alpha };
  }

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let rgba = getRGBA(data, inIndex);

      switch (options.colorType) {
        case constants.COLORTYPE_COLOR_ALPHA:
        case constants.COLORTYPE_COLOR:
          if (options.bitDepth === 8) {
            outData[outIndex] = rgba.red;
            outData[outIndex + 1] = rgba.green;
            outData[outIndex + 2] = rgba.blue;
            if (outHasAlpha) {
              outData[outIndex + 3] = rgba.alpha;
            }
          } else {
            outData.writeUInt16BE(rgba.red, outIndex);
            outData.writeUInt16BE(rgba.green, outIndex + 2);
            outData.writeUInt16BE(rgba.blue, outIndex + 4);
            if (outHasAlpha) {
              outData.writeUInt16BE(rgba.alpha, outIndex + 6);
            }
          }
          break;
        case constants.COLORTYPE_ALPHA:
        case constants.COLORTYPE_GRAYSCALE: {
          // Convert to grayscale and alpha
          let grayscale = (rgba.red + rgba.green + rgba.blue) / 3;
          if (options.bitDepth === 8) {
            outData[outIndex] = grayscale;
            if (outHasAlpha) {
              outData[outIndex + 1] = rgba.alpha;
            }
          } else {
            outData.writeUInt16BE(grayscale, outIndex);
            if (outHasAlpha) {
              outData.writeUInt16BE(rgba.alpha, outIndex + 2);
            }
          }
          break;
        }
        default:
          throw new Error("unrecognised color Type " + options.colorType);
      }

      inIndex += inBpp;
      outIndex += outBpp;
    }
  }

  return outData;
};

"use strict";

let util = require("util");
let Stream = require("stream");

let ChunkStream = (module.exports = function () {
  Stream.call(this);

  this._buffers = [];
  this._buffered = 0;

  this._reads = [];
  this._paused = false;

  this._encoding = "utf8";
  this.writable = true;
});
util.inherits(ChunkStream, Stream);

ChunkStream.prototype.read = function (length, callback) {
  this._reads.push({
    length: Math.abs(length), // if length < 0 then at most this length
    allowLess: length < 0,
    func: callback,
  });

  process.nextTick(
    function () {
      this._process();

      // its paused and there is not enought data then ask for more
      if (this._paused && this._reads && this._reads.length > 0) {
        this._paused = false;

        this.emit("drain");
      }
    }.bind(this)
  );
};

ChunkStream.prototype.write = function (data, encoding) {
  if (!this.writable) {
    this.emit("error", new Error("Stream not writable"));
    return false;
  }

  let dataBuffer;
  if (Buffer.isBuffer(data)) {
    dataBuffer = data;
  } else {
    dataBuffer = Buffer.from(data, encoding || this._encoding);
  }

  this._buffers.push(dataBuffer);
  this._buffered += dataBuffer.length;

  this._process();

  // ok if there are no more read requests
  if (this._reads && this._reads.length === 0) {
    this._paused = true;
  }

  return this.writable && !this._paused;
};

ChunkStream.prototype.end = function (data, encoding) {
  if (data) {
    this.write(data, encoding);
  }

  this.writable = false;

  // already destroyed
  if (!this._buffers) {
    return;
  }

  // enqueue or handle end
  if (this._buffers.length === 0) {
    this._end();
  } else {
    this._buffers.push(null);
    this._process();
  }
};

ChunkStream.prototype.destroySoon = ChunkStream.prototype.end;

ChunkStream.prototype._end = function () {
  if (this._reads.length > 0) {
    this.emit("error", new Error("Unexpected end of input"));
  }

  this.destroy();
};

ChunkStream.prototype.destroy = function () {
  if (!this._buffers) {
    return;
  }

  this.writable = false;
  this._reads = null;
  this._buffers = null;

  this.emit("close");
};

ChunkStream.prototype._processReadAllowingLess = function (read) {
  // ok there is any data so that we can satisfy this request
  this._reads.shift(); // == read

  // first we need to peek into first buffer
  let smallerBuf = this._buffers[0];

  // ok there is more data than we need
  if (smallerBuf.length > read.length) {
    this._buffered -= read.length;
    this._buffers[0] = smallerBuf.slice(read.length);

    read.func.call(this, smallerBuf.slice(0, read.length));
  } else {
    // ok this is less than maximum length so use it all
    this._buffered -= smallerBuf.length;
    this._buffers.shift(); // == smallerBuf

    read.func.call(this, smallerBuf);
  }
};

ChunkStream.prototype._processRead = function (read) {
  this._reads.shift(); // == read

  let pos = 0;
  let count = 0;
  let data = Buffer.alloc(read.length);

  // create buffer for all data
  while (pos < read.length) {
    let buf = this._buffers[count++];
    let len = Math.min(buf.length, read.length - pos);

    buf.copy(data, pos, 0, len);
    pos += len;

    // last buffer wasn't used all so just slice it and leave
    if (len !== buf.length) {
      this._buffers[--count] = buf.slice(len);
    }
  }

  // remove all used buffers
  if (count > 0) {
    this._buffers.splice(0, count);
  }

  this._buffered -= read.length;

  read.func.call(this, data);
};

ChunkStream.prototype._process = function () {
  try {
    // as long as there is any data and read requests
    while (this._buffered > 0 && this._reads && this._reads.length > 0) {
      let read = this._reads[0];

      // read any data (but no more than length)
      if (read.allowLess) {
        this._processReadAllowingLess(read);
      } else if (this._buffered >= read.length) {
        // ok we can meet some expectations

        this._processRead(read);
      } else {
        // not enought data to satisfy first request in queue
        // so we need to wait for more
        break;
      }
    }

    if (this._buffers && !this.writable) {
      this._end();
    }
  } catch (ex) {
    this.emit("error", ex);
  }
};

"use strict";

module.exports = {
  PNG_SIGNATURE: [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a],

  TYPE_IHDR: 0x49484452,
  TYPE_IEND: 0x49454e44,
  TYPE_IDAT: 0x49444154,
  TYPE_PLTE: 0x504c5445,
  TYPE_tRNS: 0x74524e53, // eslint-disable-line camelcase
  TYPE_gAMA: 0x67414d41, // eslint-disable-line camelcase

  // color-type bits
  COLORTYPE_GRAYSCALE: 0,
  COLORTYPE_PALETTE: 1,
  COLORTYPE_COLOR: 2,
  COLORTYPE_ALPHA: 4, // e.g. grayscale and alpha

  // color-type combinations
  COLORTYPE_PALETTE_COLOR: 3,
  COLORTYPE_COLOR_ALPHA: 6,

  COLORTYPE_TO_BPP_MAP: {
    0: 1,
    2: 3,
    3: 1,
    4: 2,
    6: 4,
  },

  GAMMA_DIVISION: 100000,
};

"use strict";

let crcTable = [];

(function () {
  for (let i = 0; i < 256; i++) {
    let currentCrc = i;
    for (let j = 0; j < 8; j++) {
      if (currentCrc & 1) {
        currentCrc = 0xedb88320 ^ (currentCrc >>> 1);
      } else {
        currentCrc = currentCrc >>> 1;
      }
    }
    crcTable[i] = currentCrc;
  }
})();

let CrcCalculator = (module.exports = function () {
  this._crc = -1;
});

CrcCalculator.prototype.write = function (data) {
  for (let i = 0; i < data.length; i++) {
    this._crc = crcTable[(this._crc ^ data[i]) & 0xff] ^ (this._crc >>> 8);
  }
  return true;
};

CrcCalculator.prototype.crc32 = function () {
  return this._crc ^ -1;
};

CrcCalculator.crc32 = function (buf) {
  let crc = -1;
  for (let i = 0; i < buf.length; i++) {
    crc = crcTable[(crc ^ buf[i]) & 0xff] ^ (crc >>> 8);
  }
  return crc ^ -1;
};

"use strict";

let paethPredictor = require("./paeth-predictor");

function filterNone(pxData, pxPos, byteWidth, rawData, rawPos) {
  for (let x = 0; x < byteWidth; x++) {
    rawData[rawPos + x] = pxData[pxPos + x];
  }
}

function filterSumNone(pxData, pxPos, byteWidth) {
  let sum = 0;
  let length = pxPos + byteWidth;

  for (let i = pxPos; i < length; i++) {
    sum += Math.abs(pxData[i]);
  }
  return sum;
}

function filterSub(pxData, pxPos, byteWidth, rawData, rawPos, bpp) {
  for (let x = 0; x < byteWidth; x++) {
    let left = x >= bpp ? pxData[pxPos + x - bpp] : 0;
    let val = pxData[pxPos + x] - left;

    rawData[rawPos + x] = val;
  }
}

function filterSumSub(pxData, pxPos, byteWidth, bpp) {
  let sum = 0;
  for (let x = 0; x < byteWidth; x++) {
    let left = x >= bpp ? pxData[pxPos + x - bpp] : 0;
    let val = pxData[pxPos + x] - left;

    sum += Math.abs(val);
  }

  return sum;
}

function filterUp(pxData, pxPos, byteWidth, rawData, rawPos) {
  for (let x = 0; x < byteWidth; x++) {
    let up = pxPos > 0 ? pxData[pxPos + x - byteWidth] : 0;
    let val = pxData[pxPos + x] - up;

    rawData[rawPos + x] = val;
  }
}

function filterSumUp(pxData, pxPos, byteWidth) {
  let sum = 0;
  let length = pxPos + byteWidth;
  for (let x = pxPos; x < length; x++) {
    let up = pxPos > 0 ? pxData[x - byteWidth] : 0;
    let val = pxData[x] - up;

    sum += Math.abs(val);
  }

  return sum;
}

function filterAvg(pxData, pxPos, byteWidth, rawData, rawPos, bpp) {
  for (let x = 0; x < byteWidth; x++) {
    let left = x >= bpp ? pxData[pxPos + x - bpp] : 0;
    let up = pxPos > 0 ? pxData[pxPos + x - byteWidth] : 0;
    let val = pxData[pxPos + x] - ((left + up) >> 1);

    rawData[rawPos + x] = val;
  }
}

function filterSumAvg(pxData, pxPos, byteWidth, bpp) {
  let sum = 0;
  for (let x = 0; x < byteWidth; x++) {
    let left = x >= bpp ? pxData[pxPos + x - bpp] : 0;
    let up = pxPos > 0 ? pxData[pxPos + x - byteWidth] : 0;
    let val = pxData[pxPos + x] - ((left + up) >> 1);

    sum += Math.abs(val);
  }

  return sum;
}

function filterPaeth(pxData, pxPos, byteWidth, rawData, rawPos, bpp) {
  for (let x = 0; x < byteWidth; x++) {
    let left = x >= bpp ? pxData[pxPos + x - bpp] : 0;
    let up = pxPos > 0 ? pxData[pxPos + x - byteWidth] : 0;
    let upleft =
      pxPos > 0 && x >= bpp ? pxData[pxPos + x - (byteWidth + bpp)] : 0;
    let val = pxData[pxPos + x] - paethPredictor(left, up, upleft);

    rawData[rawPos + x] = val;
  }
}

function filterSumPaeth(pxData, pxPos, byteWidth, bpp) {
  let sum = 0;
  for (let x = 0; x < byteWidth; x++) {
    let left = x >= bpp ? pxData[pxPos + x - bpp] : 0;
    let up = pxPos > 0 ? pxData[pxPos + x - byteWidth] : 0;
    let upleft =
      pxPos > 0 && x >= bpp ? pxData[pxPos + x - (byteWidth + bpp)] : 0;
    let val = pxData[pxPos + x] - paethPredictor(left, up, upleft);

    sum += Math.abs(val);
  }

  return sum;
}

let filters = {
  0: filterNone,
  1: filterSub,
  2: filterUp,
  3: filterAvg,
  4: filterPaeth,
};

let filterSums = {
  0: filterSumNone,
  1: filterSumSub,
  2: filterSumUp,
  3: filterSumAvg,
  4: filterSumPaeth,
};

module.exports = function (pxData, width, height, options, bpp) {
  let filterTypes;
  if (!("filterType" in options) || options.filterType === -1) {
    filterTypes = [0, 1, 2, 3, 4];
  } else if (typeof options.filterType === "number") {
    filterTypes = [options.filterType];
  } else {
    throw new Error("unrecognised filter types");
  }

  if (options.bitDepth === 16) {
    bpp *= 2;
  }
  let byteWidth = width * bpp;
  let rawPos = 0;
  let pxPos = 0;
  let rawData = Buffer.alloc((byteWidth + 1) * height);

  let sel = filterTypes[0];

  for (let y = 0; y < height; y++) {
    if (filterTypes.length > 1) {
      // find best filter for this line (with lowest sum of values)
      let min = Infinity;

      for (let i = 0; i < filterTypes.length; i++) {
        let sum = filterSums[filterTypes[i]](pxData, pxPos, byteWidth, bpp);
        if (sum < min) {
          sel = filterTypes[i];
          min = sum;
        }
      }
    }

    rawData[rawPos] = sel;
    rawPos++;
    filters[sel](pxData, pxPos, byteWidth, rawData, rawPos, bpp);
    rawPos += byteWidth;
    pxPos += byteWidth;
  }
  return rawData;
};

"use strict";

let util = require("util");
let ChunkStream = require("./chunkstream");
let Filter = require("./filter-parse");

let FilterAsync = (module.exports = function (bitmapInfo) {
  ChunkStream.call(this);

  let buffers = [];
  let that = this;
  this._filter = new Filter(bitmapInfo, {
    read: this.read.bind(this),
    write: function (buffer) {
      buffers.push(buffer);
    },
    complete: function () {
      that.emit("complete", Buffer.concat(buffers));
    },
  });

  this._filter.start();
});
util.inherits(FilterAsync, ChunkStream);

"use strict";

let SyncReader = require("./sync-reader");
let Filter = require("./filter-parse");

exports.process = function (inBuffer, bitmapInfo) {
  let outBuffers = [];
  let reader = new SyncReader(inBuffer);
  let filter = new Filter(bitmapInfo, {
    read: reader.read.bind(reader),
    write: function (bufferPart) {
      outBuffers.push(bufferPart);
    },
    complete: function () {},
  });

  filter.start();
  reader.process();

  return Buffer.concat(outBuffers);
};

"use strict";

let interlaceUtils = require("./interlace");
let paethPredictor = require("./paeth-predictor");

function getByteWidth(width, bpp, depth) {
  let byteWidth = width * bpp;
  if (depth !== 8) {
    byteWidth = Math.ceil(byteWidth / (8 / depth));
  }
  return byteWidth;
}

let Filter = (module.exports = function (bitmapInfo, dependencies) {
  let width = bitmapInfo.width;
  let height = bitmapInfo.height;
  let interlace = bitmapInfo.interlace;
  let bpp = bitmapInfo.bpp;
  let depth = bitmapInfo.depth;

  this.read = dependencies.read;
  this.write = dependencies.write;
  this.complete = dependencies.complete;

  this._imageIndex = 0;
  this._images = [];
  if (interlace) {
    let passes = interlaceUtils.getImagePasses(width, height);
    for (let i = 0; i < passes.length; i++) {
      this._images.push({
        byteWidth: getByteWidth(passes[i].width, bpp, depth),
        height: passes[i].height,
        lineIndex: 0,
      });
    }
  } else {
    this._images.push({
      byteWidth: getByteWidth(width, bpp, depth),
      height: height,
      lineIndex: 0,
    });
  }

  // when filtering the line we look at the pixel to the left
  // the spec also says it is done on a byte level regardless of the number of pixels
  // so if the depth is byte compatible (8 or 16) we subtract the bpp in order to compare back
  // a pixel rather than just a different byte part. However if we are sub byte, we ignore.
  if (depth === 8) {
    this._xComparison = bpp;
  } else if (depth === 16) {
    this._xComparison = bpp * 2;
  } else {
    this._xComparison = 1;
  }
});

Filter.prototype.start = function () {
  this.read(
    this._images[this._imageIndex].byteWidth + 1,
    this._reverseFilterLine.bind(this)
  );
};

Filter.prototype._unFilterType1 = function (
  rawData,
  unfilteredLine,
  byteWidth
) {
  let xComparison = this._xComparison;
  let xBiggerThan = xComparison - 1;

  for (let x = 0; x < byteWidth; x++) {
    let rawByte = rawData[1 + x];
    let f1Left = x > xBiggerThan ? unfilteredLine[x - xComparison] : 0;
    unfilteredLine[x] = rawByte + f1Left;
  }
};

Filter.prototype._unFilterType2 = function (
  rawData,
  unfilteredLine,
  byteWidth
) {
  let lastLine = this._lastLine;

  for (let x = 0; x < byteWidth; x++) {
    let rawByte = rawData[1 + x];
    let f2Up = lastLine ? lastLine[x] : 0;
    unfilteredLine[x] = rawByte + f2Up;
  }
};

Filter.prototype._unFilterType3 = function (
  rawData,
  unfilteredLine,
  byteWidth
) {
  let xComparison = this._xComparison;
  let xBiggerThan = xComparison - 1;
  let lastLine = this._lastLine;

  for (let x = 0; x < byteWidth; x++) {
    let rawByte = rawData[1 + x];
    let f3Up = lastLine ? lastLine[x] : 0;
    let f3Left = x > xBiggerThan ? unfilteredLine[x - xComparison] : 0;
    let f3Add = Math.floor((f3Left + f3Up) / 2);
    unfilteredLine[x] = rawByte + f3Add;
  }
};

Filter.prototype._unFilterType4 = function (
  rawData,
  unfilteredLine,
  byteWidth
) {
  let xComparison = this._xComparison;
  let xBiggerThan = xComparison - 1;
  let lastLine = this._lastLine;

  for (let x = 0; x < byteWidth; x++) {
    let rawByte = rawData[1 + x];
    let f4Up = lastLine ? lastLine[x] : 0;
    let f4Left = x > xBiggerThan ? unfilteredLine[x - xComparison] : 0;
    let f4UpLeft = x > xBiggerThan && lastLine ? lastLine[x - xComparison] : 0;
    let f4Add = paethPredictor(f4Left, f4Up, f4UpLeft);
    unfilteredLine[x] = rawByte + f4Add;
  }
};

Filter.prototype._reverseFilterLine = function (rawData) {
  let filter = rawData[0];
  let unfilteredLine;
  let currentImage = this._images[this._imageIndex];
  let byteWidth = currentImage.byteWidth;

  if (filter === 0) {
    unfilteredLine = rawData.slice(1, byteWidth + 1);
  } else {
    unfilteredLine = Buffer.alloc(byteWidth);

    switch (filter) {
      case 1:
        this._unFilterType1(rawData, unfilteredLine, byteWidth);
        break;
      case 2:
        this._unFilterType2(rawData, unfilteredLine, byteWidth);
        break;
      case 3:
        this._unFilterType3(rawData, unfilteredLine, byteWidth);
        break;
      case 4:
        this._unFilterType4(rawData, unfilteredLine, byteWidth);
        break;
      default:
        throw new Error("Unrecognised filter type - " + filter);
    }
  }

  this.write(unfilteredLine);

  currentImage.lineIndex++;
  if (currentImage.lineIndex >= currentImage.height) {
    this._lastLine = null;
    this._imageIndex++;
    currentImage = this._images[this._imageIndex];
  } else {
    this._lastLine = unfilteredLine;
  }

  if (currentImage) {
    // read, using the byte width that may be from the new current image
    this.read(currentImage.byteWidth + 1, this._reverseFilterLine.bind(this));
  } else {
    this._lastLine = null;
    this.complete();
  }
};

"use strict";

function dePalette(indata, outdata, width, height, palette) {
  let pxPos = 0;
  // use values from palette
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let color = palette[indata[pxPos]];

      if (!color) {
        throw new Error("index " + indata[pxPos] + " not in palette");
      }

      for (let i = 0; i < 4; i++) {
        outdata[pxPos + i] = color[i];
      }
      pxPos += 4;
    }
  }
}

function replaceTransparentColor(indata, outdata, width, height, transColor) {
  let pxPos = 0;
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let makeTrans = false;

      if (transColor.length === 1) {
        if (transColor[0] === indata[pxPos]) {
          makeTrans = true;
        }
      } else if (
        transColor[0] === indata[pxPos] &&
        transColor[1] === indata[pxPos + 1] &&
        transColor[2] === indata[pxPos + 2]
      ) {
        makeTrans = true;
      }
      if (makeTrans) {
        for (let i = 0; i < 4; i++) {
          outdata[pxPos + i] = 0;
        }
      }
      pxPos += 4;
    }
  }
}

function scaleDepth(indata, outdata, width, height, depth) {
  let maxOutSample = 255;
  let maxInSample = Math.pow(2, depth) - 1;
  let pxPos = 0;

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      for (let i = 0; i < 4; i++) {
        outdata[pxPos + i] = Math.floor(
          (indata[pxPos + i] * maxOutSample) / maxInSample + 0.5
        );
      }
      pxPos += 4;
    }
  }
}

module.exports = function (indata, imageData, skipRescale = false) {
  let depth = imageData.depth;
  let width = imageData.width;
  let height = imageData.height;
  let colorType = imageData.colorType;
  let transColor = imageData.transColor;
  let palette = imageData.palette;

  let outdata = indata; // only different for 16 bits

  if (colorType === 3) {
    // paletted
    dePalette(indata, outdata, width, height, palette);
  } else {
    if (transColor) {
      replaceTransparentColor(indata, outdata, width, height, transColor);
    }
    // if it needs scaling
    if (depth !== 8 && !skipRescale) {
      // if we need to change the buffer size
      if (depth === 16) {
        outdata = Buffer.alloc(width * height * 4);
      }
      scaleDepth(indata, outdata, width, height, depth);
    }
  }
  return outdata;
};

"use strict";

// Adam 7
//   0 1 2 3 4 5 6 7
// 0 x 6 4 6 x 6 4 6
// 1 7 7 7 7 7 7 7 7
// 2 5 6 5 6 5 6 5 6
// 3 7 7 7 7 7 7 7 7
// 4 3 6 4 6 3 6 4 6
// 5 7 7 7 7 7 7 7 7
// 6 5 6 5 6 5 6 5 6
// 7 7 7 7 7 7 7 7 7

let imagePasses = [
  {
    // pass 1 - 1px
    x: [0],
    y: [0],
  },
  {
    // pass 2 - 1px
    x: [4],
    y: [0],
  },
  {
    // pass 3 - 2px
    x: [0, 4],
    y: [4],
  },
  {
    // pass 4 - 4px
    x: [2, 6],
    y: [0, 4],
  },
  {
    // pass 5 - 8px
    x: [0, 2, 4, 6],
    y: [2, 6],
  },
  {
    // pass 6 - 16px
    x: [1, 3, 5, 7],
    y: [0, 2, 4, 6],
  },
  {
    // pass 7 - 32px
    x: [0, 1, 2, 3, 4, 5, 6, 7],
    y: [1, 3, 5, 7],
  },
];

exports.getImagePasses = function (width, height) {
  let images = [];
  let xLeftOver = width % 8;
  let yLeftOver = height % 8;
  let xRepeats = (width - xLeftOver) / 8;
  let yRepeats = (height - yLeftOver) / 8;
  for (let i = 0; i < imagePasses.length; i++) {
    let pass = imagePasses[i];
    let passWidth = xRepeats * pass.x.length;
    let passHeight = yRepeats * pass.y.length;
    for (let j = 0; j < pass.x.length; j++) {
      if (pass.x[j] < xLeftOver) {
        passWidth++;
      } else {
        break;
      }
    }
    for (let j = 0; j < pass.y.length; j++) {
      if (pass.y[j] < yLeftOver) {
        passHeight++;
      } else {
        break;
      }
    }
    if (passWidth > 0 && passHeight > 0) {
      images.push({ width: passWidth, height: passHeight, index: i });
    }
  }
  return images;
};

exports.getInterlaceIterator = function (width) {
  return function (x, y, pass) {
    let outerXLeftOver = x % imagePasses[pass].x.length;
    let outerX =
      ((x - outerXLeftOver) / imagePasses[pass].x.length) * 8 +
      imagePasses[pass].x[outerXLeftOver];
    let outerYLeftOver = y % imagePasses[pass].y.length;
    let outerY =
      ((y - outerYLeftOver) / imagePasses[pass].y.length) * 8 +
      imagePasses[pass].y[outerYLeftOver];
    return outerX * 4 + outerY * width * 4;
  };
};

"use strict";

let util = require("util");
let Stream = require("stream");
let constants = require("./constants");
let Packer = require("./packer");

let PackerAsync = (module.exports = function (opt) {
  Stream.call(this);

  let options = opt || {};

  this._packer = new Packer(options);
  this._deflate = this._packer.createDeflate();

  this.readable = true;
});
util.inherits(PackerAsync, Stream);

PackerAsync.prototype.pack = function (data, width, height, gamma) {
  // Signature
  this.emit("data", Buffer.from(constants.PNG_SIGNATURE));
  this.emit("data", this._packer.packIHDR(width, height));

  if (gamma) {
    this.emit("data", this._packer.packGAMA(gamma));
  }

  let filteredData = this._packer.filterData(data, width, height);

  // compress it
  this._deflate.on("error", this.emit.bind(this, "error"));

  this._deflate.on(
    "data",
    function (compressedData) {
      this.emit("data", this._packer.packIDAT(compressedData));
    }.bind(this)
  );

  this._deflate.on(
    "end",
    function () {
      this.emit("data", this._packer.packIEND());
      this.emit("end");
    }.bind(this)
  );

  this._deflate.end(filteredData);
};

"use strict";

let hasSyncZlib = true;
let zlib = require("zlib");
if (!zlib.deflateSync) {
  hasSyncZlib = false;
}
let constants = require("./constants");
let Packer = require("./packer");

module.exports = function (metaData, opt) {
  if (!hasSyncZlib) {
    throw new Error(
      "To use the sync capability of this library in old node versions, please pin pngjs to v2.3.0"
    );
  }

  let options = opt || {};

  let packer = new Packer(options);

  let chunks = [];

  // Signature
  chunks.push(Buffer.from(constants.PNG_SIGNATURE));

  // Header
  chunks.push(packer.packIHDR(metaData.width, metaData.height));

  if (metaData.gamma) {
    chunks.push(packer.packGAMA(metaData.gamma));
  }

  let filteredData = packer.filterData(
    metaData.data,
    metaData.width,
    metaData.height
  );

  // compress it
  let compressedData = zlib.deflateSync(
    filteredData,
    packer.getDeflateOptions()
  );
  filteredData = null;

  if (!compressedData || !compressedData.length) {
    throw new Error("bad png - invalid compressed data response");
  }
  chunks.push(packer.packIDAT(compressedData));

  // End
  chunks.push(packer.packIEND());

  return Buffer.concat(chunks);
};

"use strict";

let constants = require("./constants");
let CrcStream = require("./crc");
let bitPacker = require("./bitpacker");
let filter = require("./filter-pack");
let zlib = require("zlib");

let Packer = (module.exports = function (options) {
  this._options = options;

  options.deflateChunkSize = options.deflateChunkSize || 32 * 1024;
  options.deflateLevel =
    options.deflateLevel != null ? options.deflateLevel : 9;
  options.deflateStrategy =
    options.deflateStrategy != null ? options.deflateStrategy : 3;
  options.inputHasAlpha =
    options.inputHasAlpha != null ? options.inputHasAlpha : true;
  options.deflateFactory = options.deflateFactory || zlib.createDeflate;
  options.bitDepth = options.bitDepth || 8;
  // This is outputColorType
  options.colorType =
    typeof options.colorType === "number"
      ? options.colorType
      : constants.COLORTYPE_COLOR_ALPHA;
  options.inputColorType =
    typeof options.inputColorType === "number"
      ? options.inputColorType
      : constants.COLORTYPE_COLOR_ALPHA;

  if (
    [
      constants.COLORTYPE_GRAYSCALE,
      constants.COLORTYPE_COLOR,
      constants.COLORTYPE_COLOR_ALPHA,
      constants.COLORTYPE_ALPHA,
    ].indexOf(options.colorType) === -1
  ) {
    throw new Error(
      "option color type:" + options.colorType + " is not supported at present"
    );
  }
  if (
    [
      constants.COLORTYPE_GRAYSCALE,
      constants.COLORTYPE_COLOR,
      constants.COLORTYPE_COLOR_ALPHA,
      constants.COLORTYPE_ALPHA,
    ].indexOf(options.inputColorType) === -1
  ) {
    throw new Error(
      "option input color type:" +
        options.inputColorType +
        " is not supported at present"
    );
  }
  if (options.bitDepth !== 8 && options.bitDepth !== 16) {
    throw new Error(
      "option bit depth:" + options.bitDepth + " is not supported at present"
    );
  }
});

Packer.prototype.getDeflateOptions = function () {
  return {
    chunkSize: this._options.deflateChunkSize,
    level: this._options.deflateLevel,
    strategy: this._options.deflateStrategy,
  };
};

Packer.prototype.createDeflate = function () {
  return this._options.deflateFactory(this.getDeflateOptions());
};

Packer.prototype.filterData = function (data, width, height) {
  // convert to correct format for filtering (e.g. right bpp and bit depth)
  let packedData = bitPacker(data, width, height, this._options);

  // filter pixel data
  let bpp = constants.COLORTYPE_TO_BPP_MAP[this._options.colorType];
  let filteredData = filter(packedData, width, height, this._options, bpp);
  return filteredData;
};

Packer.prototype._packChunk = function (type, data) {
  let len = data ? data.length : 0;
  let buf = Buffer.alloc(len + 12);

  buf.writeUInt32BE(len, 0);
  buf.writeUInt32BE(type, 4);

  if (data) {
    data.copy(buf, 8);
  }

  buf.writeInt32BE(
    CrcStream.crc32(buf.slice(4, buf.length - 4)),
    buf.length - 4
  );
  return buf;
};

Packer.prototype.packGAMA = function (gamma) {
  let buf = Buffer.alloc(4);
  buf.writeUInt32BE(Math.floor(gamma * constants.GAMMA_DIVISION), 0);
  return this._packChunk(constants.TYPE_gAMA, buf);
};

Packer.prototype.packIHDR = function (width, height) {
  let buf = Buffer.alloc(13);
  buf.writeUInt32BE(width, 0);
  buf.writeUInt32BE(height, 4);
  buf[8] = this._options.bitDepth; // Bit depth
  buf[9] = this._options.colorType; // colorType
  buf[10] = 0; // compression
  buf[11] = 0; // filter
  buf[12] = 0; // interlace

  return this._packChunk(constants.TYPE_IHDR, buf);
};

Packer.prototype.packIDAT = function (data) {
  return this._packChunk(constants.TYPE_IDAT, data);
};

Packer.prototype.packIEND = function () {
  return this._packChunk(constants.TYPE_IEND, null);
};

"use strict";

module.exports = function paethPredictor(left, above, upLeft) {
  let paeth = left + above - upLeft;
  let pLeft = Math.abs(paeth - left);
  let pAbove = Math.abs(paeth - above);
  let pUpLeft = Math.abs(paeth - upLeft);

  if (pLeft <= pAbove && pLeft <= pUpLeft) {
    return left;
  }
  if (pAbove <= pUpLeft) {
    return above;
  }
  return upLeft;
};

"use strict";

let util = require("util");
let zlib = require("zlib");
let ChunkStream = require("./chunkstream");
let FilterAsync = require("./filter-parse-async");
let Parser = require("./parser");
let bitmapper = require("./bitmapper");
let formatNormaliser = require("./format-normaliser");

let ParserAsync = (module.exports = function (options) {
  ChunkStream.call(this);

  this._parser = new Parser(options, {
    read: this.read.bind(this),
    error: this._handleError.bind(this),
    metadata: this._handleMetaData.bind(this),
    gamma: this.emit.bind(this, "gamma"),
    palette: this._handlePalette.bind(this),
    transColor: this._handleTransColor.bind(this),
    finished: this._finished.bind(this),
    inflateData: this._inflateData.bind(this),
    simpleTransparency: this._simpleTransparency.bind(this),
    headersFinished: this._headersFinished.bind(this),
  });
  this._options = options;
  this.writable = true;

  this._parser.start();
});
util.inherits(ParserAsync, ChunkStream);

ParserAsync.prototype._handleError = function (err) {
  this.emit("error", err);

  this.writable = false;

  this.destroy();

  if (this._inflate && this._inflate.destroy) {
    this._inflate.destroy();
  }

  if (this._filter) {
    this._filter.destroy();
    // For backward compatibility with Node 7 and below.
    // Suppress errors due to _inflate calling write() even after
    // it's destroy()'ed.
    this._filter.on("error", function () {});
  }

  this.errord = true;
};

ParserAsync.prototype._inflateData = function (data) {
  if (!this._inflate) {
    if (this._bitmapInfo.interlace) {
      this._inflate = zlib.createInflate();

      this._inflate.on("error", this.emit.bind(this, "error"));
      this._filter.on("complete", this._complete.bind(this));

      this._inflate.pipe(this._filter);
    } else {
      let rowSize =
        ((this._bitmapInfo.width *
          this._bitmapInfo.bpp *
          this._bitmapInfo.depth +
          7) >>
          3) +
        1;
      let imageSize = rowSize * this._bitmapInfo.height;
      let chunkSize = Math.max(imageSize, zlib.Z_MIN_CHUNK);

      this._inflate = zlib.createInflate({ chunkSize: chunkSize });
      let leftToInflate = imageSize;

      let emitError = this.emit.bind(this, "error");
      this._inflate.on("error", function (err) {
        if (!leftToInflate) {
          return;
        }

        emitError(err);
      });
      this._filter.on("complete", this._complete.bind(this));

      let filterWrite = this._filter.write.bind(this._filter);
      this._inflate.on("data", function (chunk) {
        if (!leftToInflate) {
          return;
        }

        if (chunk.length > leftToInflate) {
          chunk = chunk.slice(0, leftToInflate);
        }

        leftToInflate -= chunk.length;

        filterWrite(chunk);
      });

      this._inflate.on("end", this._filter.end.bind(this._filter));
    }
  }
  this._inflate.write(data);
};

ParserAsync.prototype._handleMetaData = function (metaData) {
  this._metaData = metaData;
  this._bitmapInfo = Object.create(metaData);

  this._filter = new FilterAsync(this._bitmapInfo);
};

ParserAsync.prototype._handleTransColor = function (transColor) {
  this._bitmapInfo.transColor = transColor;
};

ParserAsync.prototype._handlePalette = function (palette) {
  this._bitmapInfo.palette = palette;
};

ParserAsync.prototype._simpleTransparency = function () {
  this._metaData.alpha = true;
};

ParserAsync.prototype._headersFinished = function () {
  // Up until this point, we don't know if we have a tRNS chunk (alpha)
  // so we can't emit metadata any earlier
  this.emit("metadata", this._metaData);
};

ParserAsync.prototype._finished = function () {
  if (this.errord) {
    return;
  }

  if (!this._inflate) {
    this.emit("error", "No Inflate block");
  } else {
    // no more data to inflate
    this._inflate.end();
  }
};

ParserAsync.prototype._complete = function (filteredData) {
  if (this.errord) {
    return;
  }

  let normalisedBitmapData;

  try {
    let bitmapData = bitmapper.dataToBitMap(filteredData, this._bitmapInfo);

    normalisedBitmapData = formatNormaliser(
      bitmapData,
      this._bitmapInfo,
      this._options.skipRescale
    );
    bitmapData = null;
  } catch (ex) {
    this._handleError(ex);
    return;
  }

  this.emit("parsed", normalisedBitmapData);
};

"use strict";

let hasSyncZlib = true;
let zlib = require("zlib");
let inflateSync = require("./sync-inflate");
if (!zlib.deflateSync) {
  hasSyncZlib = false;
}
let SyncReader = require("./sync-reader");
let FilterSync = require("./filter-parse-sync");
let Parser = require("./parser");
let bitmapper = require("./bitmapper");
let formatNormaliser = require("./format-normaliser");

module.exports = function (buffer, options) {
  if (!hasSyncZlib) {
    throw new Error(
      "To use the sync capability of this library in old node versions, please pin pngjs to v2.3.0"
    );
  }

  let err;
  function handleError(_err_) {
    err = _err_;
  }

  let metaData;
  function handleMetaData(_metaData_) {
    metaData = _metaData_;
  }

  function handleTransColor(transColor) {
    metaData.transColor = transColor;
  }

  function handlePalette(palette) {
    metaData.palette = palette;
  }

  function handleSimpleTransparency() {
    metaData.alpha = true;
  }

  let gamma;
  function handleGamma(_gamma_) {
    gamma = _gamma_;
  }

  let inflateDataList = [];
  function handleInflateData(inflatedData) {
    inflateDataList.push(inflatedData);
  }

  let reader = new SyncReader(buffer);

  let parser = new Parser(options, {
    read: reader.read.bind(reader),
    error: handleError,
    metadata: handleMetaData,
    gamma: handleGamma,
    palette: handlePalette,
    transColor: handleTransColor,
    inflateData: handleInflateData,
    simpleTransparency: handleSimpleTransparency,
  });

  parser.start();
  reader.process();

  if (err) {
    throw err;
  }

  //join together the inflate datas
  let inflateData = Buffer.concat(inflateDataList);
  inflateDataList.length = 0;

  let inflatedData;
  if (metaData.interlace) {
    inflatedData = zlib.inflateSync(inflateData);
  } else {
    let rowSize =
      ((metaData.width * metaData.bpp * metaData.depth + 7) >> 3) + 1;
    let imageSize = rowSize * metaData.height;
    inflatedData = inflateSync(inflateData, {
      chunkSize: imageSize,
      maxLength: imageSize,
    });
  }
  inflateData = null;

  if (!inflatedData || !inflatedData.length) {
    throw new Error("bad png - invalid inflate data response");
  }

  let unfilteredData = FilterSync.process(inflatedData, metaData);
  inflateData = null;

  let bitmapData = bitmapper.dataToBitMap(unfilteredData, metaData);
  unfilteredData = null;

  let normalisedBitmapData = formatNormaliser(
    bitmapData,
    metaData,
    options.skipRescale
  );

  metaData.data = normalisedBitmapData;
  metaData.gamma = gamma || 0;

  return metaData;
};

"use strict";

let constants = require("./constants");
let CrcCalculator = require("./crc");

let Parser = (module.exports = function (options, dependencies) {
  this._options = options;
  options.checkCRC = options.checkCRC !== false;

  this._hasIHDR = false;
  this._hasIEND = false;
  this._emittedHeadersFinished = false;

  // input flags/metadata
  this._palette = [];
  this._colorType = 0;

  this._chunks = {};
  this._chunks[constants.TYPE_IHDR] = this._handleIHDR.bind(this);
  this._chunks[constants.TYPE_IEND] = this._handleIEND.bind(this);
  this._chunks[constants.TYPE_IDAT] = this._handleIDAT.bind(this);
  this._chunks[constants.TYPE_PLTE] = this._handlePLTE.bind(this);
  this._chunks[constants.TYPE_tRNS] = this._handleTRNS.bind(this);
  this._chunks[constants.TYPE_gAMA] = this._handleGAMA.bind(this);

  this.read = dependencies.read;
  this.error = dependencies.error;
  this.metadata = dependencies.metadata;
  this.gamma = dependencies.gamma;
  this.transColor = dependencies.transColor;
  this.palette = dependencies.palette;
  this.parsed = dependencies.parsed;
  this.inflateData = dependencies.inflateData;
  this.finished = dependencies.finished;
  this.simpleTransparency = dependencies.simpleTransparency;
  this.headersFinished = dependencies.headersFinished || function () {};
});

Parser.prototype.start = function () {
  this.read(constants.PNG_SIGNATURE.length, this._parseSignature.bind(this));
};

Parser.prototype._parseSignature = function (data) {
  let signature = constants.PNG_SIGNATURE;

  for (let i = 0; i < signature.length; i++) {
    if (data[i] !== signature[i]) {
      this.error(new Error("Invalid file signature"));
      return;
    }
  }
  this.read(8, this._parseChunkBegin.bind(this));
};

Parser.prototype._parseChunkBegin = function (data) {
  // chunk content length
  let length = data.readUInt32BE(0);

  // chunk type
  let type = data.readUInt32BE(4);
  let name = "";
  for (let i = 4; i < 8; i++) {
    name += String.fromCharCode(data[i]);
  }

  //console.log('chunk ', name, length);

  // chunk flags
  let ancillary = Boolean(data[4] & 0x20); // or critical
  //    priv = Boolean(data[5] & 0x20), // or public
  //    safeToCopy = Boolean(data[7] & 0x20); // or unsafe

  if (!this._hasIHDR && type !== constants.TYPE_IHDR) {
    this.error(new Error("Expected IHDR on beggining"));
    return;
  }

  this._crc = new CrcCalculator();
  this._crc.write(Buffer.from(name));

  if (this._chunks[type]) {
    return this._chunks[type](length);
  }

  if (!ancillary) {
    this.error(new Error("Unsupported critical chunk type " + name));
    return;
  }

  this.read(length + 4, this._skipChunk.bind(this));
};

Parser.prototype._skipChunk = function (/*data*/) {
  this.read(8, this._parseChunkBegin.bind(this));
};

Parser.prototype._handleChunkEnd = function () {
  this.read(4, this._parseChunkEnd.bind(this));
};

Parser.prototype._parseChunkEnd = function (data) {
  let fileCrc = data.readInt32BE(0);
  let calcCrc = this._crc.crc32();

  // check CRC
  if (this._options.checkCRC && calcCrc !== fileCrc) {
    this.error(new Error("Crc error - " + fileCrc + " - " + calcCrc));
    return;
  }

  if (!this._hasIEND) {
    this.read(8, this._parseChunkBegin.bind(this));
  }
};

Parser.prototype._handleIHDR = function (length) {
  this.read(length, this._parseIHDR.bind(this));
};
Parser.prototype._parseIHDR = function (data) {
  this._crc.write(data);

  let width = data.readUInt32BE(0);
  let height = data.readUInt32BE(4);
  let depth = data[8];
  let colorType = data[9]; // bits: 1 palette, 2 color, 4 alpha
  let compr = data[10];
  let filter = data[11];
  let interlace = data[12];

  // console.log('    width', width, 'height', height,
  //     'depth', depth, 'colorType', colorType,
  //     'compr', compr, 'filter', filter, 'interlace', interlace
  // );

  if (
    depth !== 8 &&
    depth !== 4 &&
    depth !== 2 &&
    depth !== 1 &&
    depth !== 16
  ) {
    this.error(new Error("Unsupported bit depth " + depth));
    return;
  }
  if (!(colorType in constants.COLORTYPE_TO_BPP_MAP)) {
    this.error(new Error("Unsupported color type"));
    return;
  }
  if (compr !== 0) {
    this.error(new Error("Unsupported compression method"));
    return;
  }
  if (filter !== 0) {
    this.error(new Error("Unsupported filter method"));
    return;
  }
  if (interlace !== 0 && interlace !== 1) {
    this.error(new Error("Unsupported interlace method"));
    return;
  }

  this._colorType = colorType;

  let bpp = constants.COLORTYPE_TO_BPP_MAP[this._colorType];

  this._hasIHDR = true;

  this.metadata({
    width: width,
    height: height,
    depth: depth,
    interlace: Boolean(interlace),
    palette: Boolean(colorType & constants.COLORTYPE_PALETTE),
    color: Boolean(colorType & constants.COLORTYPE_COLOR),
    alpha: Boolean(colorType & constants.COLORTYPE_ALPHA),
    bpp: bpp,
    colorType: colorType,
  });

  this._handleChunkEnd();
};

Parser.prototype._handlePLTE = function (length) {
  this.read(length, this._parsePLTE.bind(this));
};
Parser.prototype._parsePLTE = function (data) {
  this._crc.write(data);

  let entries = Math.floor(data.length / 3);
  // console.log('Palette:', entries);

  for (let i = 0; i < entries; i++) {
    this._palette.push([data[i * 3], data[i * 3 + 1], data[i * 3 + 2], 0xff]);
  }

  this.palette(this._palette);

  this._handleChunkEnd();
};

Parser.prototype._handleTRNS = function (length) {
  this.simpleTransparency();
  this.read(length, this._parseTRNS.bind(this));
};
Parser.prototype._parseTRNS = function (data) {
  this._crc.write(data);

  // palette
  if (this._colorType === constants.COLORTYPE_PALETTE_COLOR) {
    if (this._palette.length === 0) {
      this.error(new Error("Transparency chunk must be after palette"));
      return;
    }
    if (data.length > this._palette.length) {
      this.error(new Error("More transparent colors than palette size"));
      return;
    }
    for (let i = 0; i < data.length; i++) {
      this._palette[i][3] = data[i];
    }
    this.palette(this._palette);
  }

  // for colorType 0 (grayscale) and 2 (rgb)
  // there might be one gray/color defined as transparent
  if (this._colorType === constants.COLORTYPE_GRAYSCALE) {
    // grey, 2 bytes
    this.transColor([data.readUInt16BE(0)]);
  }
  if (this._colorType === constants.COLORTYPE_COLOR) {
    this.transColor([
      data.readUInt16BE(0),
      data.readUInt16BE(2),
      data.readUInt16BE(4),
    ]);
  }

  this._handleChunkEnd();
};

Parser.prototype._handleGAMA = function (length) {
  this.read(length, this._parseGAMA.bind(this));
};
Parser.prototype._parseGAMA = function (data) {
  this._crc.write(data);
  this.gamma(data.readUInt32BE(0) / constants.GAMMA_DIVISION);

  this._handleChunkEnd();
};

Parser.prototype._handleIDAT = function (length) {
  if (!this._emittedHeadersFinished) {
    this._emittedHeadersFinished = true;
    this.headersFinished();
  }
  this.read(-length, this._parseIDAT.bind(this, length));
};
Parser.prototype._parseIDAT = function (length, data) {
  this._crc.write(data);

  if (
    this._colorType === constants.COLORTYPE_PALETTE_COLOR &&
    this._palette.length === 0
  ) {
    throw new Error("Expected palette not found");
  }

  this.inflateData(data);
  let leftOverLength = length - data.length;

  if (leftOverLength > 0) {
    this._handleIDAT(leftOverLength);
  } else {
    this._handleChunkEnd();
  }
};

Parser.prototype._handleIEND = function (length) {
  this.read(length, this._parseIEND.bind(this));
};
Parser.prototype._parseIEND = function (data) {
  this._crc.write(data);

  this._hasIEND = true;
  this._handleChunkEnd();

  if (this.finished) {
    this.finished();
  }
};

"use strict";

let parse = require("./parser-sync");
let pack = require("./packer-sync");

exports.read = function (buffer, options) {
  return parse(buffer, options || {});
};

exports.write = function (png, options) {
  return pack(png, options);
};

"use strict";

let util = require("util");
let Stream = require("stream");
let Parser = require("./parser-async");
let Packer = require("./packer-async");
let PNGSync = require("./png-sync");

let PNG = (exports.PNG = function (options) {
  Stream.call(this);

  options = options || {}; // eslint-disable-line no-param-reassign

  // coerce pixel dimensions to integers (also coerces undefined -> 0):
  this.width = options.width | 0;
  this.height = options.height | 0;

  this.data =
    this.width > 0 && this.height > 0
      ? Buffer.alloc(4 * this.width * this.height)
      : null;

  if (options.fill && this.data) {
    this.data.fill(0);
  }

  this.gamma = 0;
  this.readable = this.writable = true;

  this._parser = new Parser(options);

  this._parser.on("error", this.emit.bind(this, "error"));
  this._parser.on("close", this._handleClose.bind(this));
  this._parser.on("metadata", this._metadata.bind(this));
  this._parser.on("gamma", this._gamma.bind(this));
  this._parser.on(
    "parsed",
    function (data) {
      this.data = data;
      this.emit("parsed", data);
    }.bind(this)
  );

  this._packer = new Packer(options);
  this._packer.on("data", this.emit.bind(this, "data"));
  this._packer.on("end", this.emit.bind(this, "end"));
  this._parser.on("close", this._handleClose.bind(this));
  this._packer.on("error", this.emit.bind(this, "error"));
});
util.inherits(PNG, Stream);

PNG.sync = PNGSync;

PNG.prototype.pack = function () {
  if (!this.data || !this.data.length) {
    this.emit("error", "No data provided");
    return this;
  }

  process.nextTick(
    function () {
      this._packer.pack(this.data, this.width, this.height, this.gamma);
    }.bind(this)
  );

  return this;
};

PNG.prototype.parse = function (data, callback) {
  if (callback) {
    let onParsed, onError;

    onParsed = function (parsedData) {
      this.removeListener("error", onError);

      this.data = parsedData;
      callback(null, this);
    }.bind(this);

    onError = function (err) {
      this.removeListener("parsed", onParsed);

      callback(err, null);
    }.bind(this);

    this.once("parsed", onParsed);
    this.once("error", onError);
  }

  this.end(data);
  return this;
};

PNG.prototype.write = function (data) {
  this._parser.write(data);
  return true;
};

PNG.prototype.end = function (data) {
  this._parser.end(data);
};

PNG.prototype._metadata = function (metadata) {
  this.width = metadata.width;
  this.height = metadata.height;

  this.emit("metadata", metadata);
};

PNG.prototype._gamma = function (gamma) {
  this.gamma = gamma;
};

PNG.prototype._handleClose = function () {
  if (!this._parser.writable && !this._packer.readable) {
    this.emit("close");
  }
};

PNG.bitblt = function (src, dst, srcX, srcY, width, height, deltaX, deltaY) {
  // eslint-disable-line max-params
  // coerce pixel dimensions to integers (also coerces undefined -> 0):
  /* eslint-disable no-param-reassign */
  srcX |= 0;
  srcY |= 0;
  width |= 0;
  height |= 0;
  deltaX |= 0;
  deltaY |= 0;
  /* eslint-enable no-param-reassign */

  if (
    srcX > src.width ||
    srcY > src.height ||
    srcX + width > src.width ||
    srcY + height > src.height
  ) {
    throw new Error("bitblt reading outside image");
  }

  if (
    deltaX > dst.width ||
    deltaY > dst.height ||
    deltaX + width > dst.width ||
    deltaY + height > dst.height
  ) {
    throw new Error("bitblt writing outside image");
  }

  for (let y = 0; y < height; y++) {
    src.data.copy(
      dst.data,
      ((deltaY + y) * dst.width + deltaX) << 2,
      ((srcY + y) * src.width + srcX) << 2,
      ((srcY + y) * src.width + srcX + width) << 2
    );
  }
};

PNG.prototype.bitblt = function (
  dst,
  srcX,
  srcY,
  width,
  height,
  deltaX,
  deltaY
) {
  // eslint-disable-line max-params

  PNG.bitblt(this, dst, srcX, srcY, width, height, deltaX, deltaY);
  return this;
};

PNG.adjustGamma = function (src) {
  if (src.gamma) {
    for (let y = 0; y < src.height; y++) {
      for (let x = 0; x < src.width; x++) {
        let idx = (src.width * y + x) << 2;

        for (let i = 0; i < 3; i++) {
          let sample = src.data[idx + i] / 255;
          sample = Math.pow(sample, 1 / 2.2 / src.gamma);
          src.data[idx + i] = Math.round(sample * 255);
        }
      }
    }
    src.gamma = 0;
  }
};

PNG.prototype.adjustGamma = function () {
  PNG.adjustGamma(this);
};

"use strict";

let assert = require("assert").ok;
let zlib = require("zlib");
let util = require("util");

let kMaxLength = require("buffer").kMaxLength;

function Inflate(opts) {
  if (!(this instanceof Inflate)) {
    return new Inflate(opts);
  }

  if (opts && opts.chunkSize < zlib.Z_MIN_CHUNK) {
    opts.chunkSize = zlib.Z_MIN_CHUNK;
  }

  zlib.Inflate.call(this, opts);

  // Node 8 --> 9 compatibility check
  this._offset = this._offset === undefined ? this._outOffset : this._offset;
  this._buffer = this._buffer || this._outBuffer;

  if (opts && opts.maxLength != null) {
    this._maxLength = opts.maxLength;
  }
}

function createInflate(opts) {
  return new Inflate(opts);
}

function _close(engine, callback) {
  if (callback) {
    process.nextTick(callback);
  }

  // Caller may invoke .close after a zlib error (which will null _handle).
  if (!engine._handle) {
    return;
  }

  engine._handle.close();
  engine._handle = null;
}

Inflate.prototype._processChunk = function (chunk, flushFlag, asyncCb) {
  if (typeof asyncCb === "function") {
    return zlib.Inflate._processChunk.call(this, chunk, flushFlag, asyncCb);
  }

  let self = this;

  let availInBefore = chunk && chunk.length;
  let availOutBefore = this._chunkSize - this._offset;
  let leftToInflate = this._maxLength;
  let inOff = 0;

  let buffers = [];
  let nread = 0;

  let error;
  this.on("error", function (err) {
    error = err;
  });

  function handleChunk(availInAfter, availOutAfter) {
    if (self._hadError) {
      return;
    }

    let have = availOutBefore - availOutAfter;
    assert(have >= 0, "have should not go down");

    if (have > 0) {
      let out = self._buffer.slice(self._offset, self._offset + have);
      self._offset += have;

      if (out.length > leftToInflate) {
        out = out.slice(0, leftToInflate);
      }

      buffers.push(out);
      nread += out.length;
      leftToInflate -= out.length;

      if (leftToInflate === 0) {
        return false;
      }
    }

    if (availOutAfter === 0 || self._offset >= self._chunkSize) {
      availOutBefore = self._chunkSize;
      self._offset = 0;
      self._buffer = Buffer.allocUnsafe(self._chunkSize);
    }

    if (availOutAfter === 0) {
      inOff += availInBefore - availInAfter;
      availInBefore = availInAfter;

      return true;
    }

    return false;
  }

  assert(this._handle, "zlib binding closed");
  let res;
  do {
    res = this._handle.writeSync(
      flushFlag,
      chunk, // in
      inOff, // in_off
      availInBefore, // in_len
      this._buffer, // out
      this._offset, //out_off
      availOutBefore
    ); // out_len
    // Node 8 --> 9 compatibility check
    res = res || this._writeState;
  } while (!this._hadError && handleChunk(res[0], res[1]));

  if (this._hadError) {
    throw error;
  }

  if (nread >= kMaxLength) {
    _close(this);
    throw new RangeError(
      "Cannot create final Buffer. It would be larger than 0x" +
        kMaxLength.toString(16) +
        " bytes"
    );
  }

  let buf = Buffer.concat(buffers, nread);
  _close(this);

  return buf;
};

util.inherits(Inflate, zlib.Inflate);

function zlibBufferSync(engine, buffer) {
  if (typeof buffer === "string") {
    buffer = Buffer.from(buffer);
  }
  if (!(buffer instanceof Buffer)) {
    throw new TypeError("Not a string or buffer");
  }

  let flushFlag = engine._finishFlushFlag;
  if (flushFlag == null) {
    flushFlag = zlib.Z_FINISH;
  }

  return engine._processChunk(buffer, flushFlag);
}

function inflateSync(buffer, opts) {
  return zlibBufferSync(new Inflate(opts), buffer);
}

module.exports = exports = inflateSync;
exports.Inflate = Inflate;
exports.createInflate = createInflate;
exports.inflateSync = inflateSync;

"use strict";

let SyncReader = (module.exports = function (buffer) {
  this._buffer = buffer;
  this._reads = [];
});

SyncReader.prototype.read = function (length, callback) {
  this._reads.push({
    length: Math.abs(length), // if length < 0 then at most this length
    allowLess: length < 0,
    func: callback,
  });
};

SyncReader.prototype.process = function () {
  // as long as there is any data and read requests
  while (this._reads.length > 0 && this._buffer.length) {
    let read = this._reads[0];

    if (
      this._buffer.length &&
      (this._buffer.length >= read.length || read.allowLess)
    ) {
      // ok there is any data so that we can satisfy this request
      this._reads.shift(); // == read

      let buf = this._buffer;

      this._buffer = buf.slice(read.length);

      read.func.call(this, buf.slice(0, read.length));
    } else {
      break;
    }
  }

  if (this._reads.length > 0) {
    throw new Error("There are some read requests waitng on finished stream");
  }

  if (this._buffer.length > 0) {
    throw new Error("unrecognised content at end of stream");
  }
};

pngjs original work Copyright (c) 2015 Luke Page & Original Contributors
pngjs derived work Copyright (c) 2012 Kuba Niegowski

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

{
  "name": "pngjs",
  "version": "7.0.0",
  "description": "PNG encoder/decoder in pure JS, supporting any bit size & interlace, async & sync with full test suite.",
  "contributors": [
    "Alexandre Paré",
    "Gaurav Mali",
    "Gusts Kaksis",
    "Kuba Niegowski",
    "Luke Page",
    "Pietajan De Potter",
    "Steven Sojka",
    "liangzeng",
    "Michael Vogt",
    "Xin-Xin Wang",
    "toriningen",
    "Eugene Kulabuhov"
  ],
  "homepage": "https://github.com/lukeapage/pngjs",
  "keywords": [
    "PNG",
    "decoder",
    "encoder",
    "js-png",
    "node-png",
    "parser",
    "png",
    "png-js",
    "png-parse",
    "pngjs"
  ],
  "engines": {
    "node": ">=14.19.0"
  },
  "main": "./lib/png.js",
  "directories": {
    "lib": "lib",
    "example": "examples",
    "test": "test"
  },
  "files": [
    "browser.js",
    "lib/"
  ],
  "scripts": {
    "build": "yarn prepublish",
    "prepublish": "yarn browserify",
    "browserify": "browserify lib/png.js --standalone png > browser.js",
    "coverage": "nyc --reporter=lcov --reporter=text-summary tape test/*-spec.js",
    "test": "yarn lint && yarn prettier:check && tape test/*-spec.js | tap-dot && node test/run-compare",
    "lint": "eslint .",
    "prettier:write": "prettier --write .",
    "prettier:check": "prettier --check ."
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/pngjs/pngjs.git"
  },
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/pngjs/pngjs/issues"
  },
  "devDependencies": {
    "browserify": "17.0.0",
    "buffer-equal": "1.0.1",
    "connect": "3.7.0",
    "eslint": "8.34.0",
    "eslint-config-prettier": "8.6.0",
    "nyc": "15.1.0",
    "prettier": "2.8.4",
    "puppeteer": "19.7.1",
    "serve-static": "1.15.0",
    "tap-dot": "2.0.0",
    "tape": "5.6.3"
  }
}