styleproof 4.0.2 → 4.2.0

package/CHANGELOG.md

@@ -7,6 +7,62 @@ this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+## [4.2.0] - 2026-07-13
+
+### Changed
+
+- **`styleproof-capture --crawl` now follows same-origin nav links.** Every
+  page the site links to is crawled like the entry page, keyed by its route
+  (`about`, `pricing`, …), with class coverage aggregated across the pages that
+  share stylesheets. Previously the CLI crawl drove controls but silently
+  dropped links, so a multi-page site reported "1/1 surfaces, coverage ✓" while
+  losing every other page. `--no-follow-links` restores the entry-page-only
+  sweep.
+
+### Fixed
+
+- **A non-head checkout in CI is no longer stamped with the pull request's head
+  SHA.** `currentGitSha` now trusts `git rev-parse HEAD` and relabels only a
+  checkout of the synthetic `GITHUB_SHA` merge commit, so a base-branch capture
+  (the scaffolded cache-miss job) can never publish a base-tree map under the
+  head's store key — a store poisoning that made later restores diff
+  base-vs-base and report a false green. `pull_request_target` payloads are no
+  longer trusted for relabeling at all, and a malformed `STYLEPROOF_SHA`
+  override now errors instead of silently falling back.
+- **Annotation move-suppression now requires provable displacement.** A
+  cross-path annotation match may suppress its magenta boxes only when the
+  container where the two paths diverge gained or lost captured children, or
+  when the element slid into a vacated slot in its own container. This fixes
+  three truthfulness bugs at once: a size-changing duplicate restyle swap no
+  longer loses all visual proof, a sibling insertion into a uniform-shell list
+  (menus, navs) no longer re-boxes every unchanged displaced item, and an
+  independent removal + identical addition in different containers no longer
+  cancel each other's annotations to zero.
+- **`styleproof-diff` no longer misreports fresh ad-hoc captures as predating
+  the determinism ledger.** The unknown-basis warning now names the real cause:
+  ad-hoc `styleproof-capture` output records no ledger; spec-driven captures
+  self-check and do.
+
+## [4.1.0] - 2026-07-12
+
+### Fixed
+
+- **Annotated report crops no longer paint path-shifted subtrees as visual
+  changes.** When an unkeyed sibling insertion renumbers `:nth-child()` paths,
+  the report reconciles exact-equivalent entries across paths for annotation
+  only. Genuine additions and removals stay highlighted, while exhaustive
+  structural findings remain in the certification and audit details.
+- **Pull-request captures and reports now stay bound to the real head commit.**
+  GitHub's synthetic merge SHA no longer becomes the map or report provenance,
+  and published report links point to the immutable report commit.
+- **Certify-mode report comments now carry their source head marker**, so stale
+  comments can be distinguished from the current PR head.
+- **Annotation reconciliation preserves duplicate additions, removals, and
+  forced-state changes.** Matching is one-to-one within a structural
+  neighborhood, and indistinguishable duplicate provenance is reported as a
+  deterministic unmatched occurrence rather than guessed. Ambiguous duplicate
+  restyle swaps retain visual proof on both sides.
+
 ## [4.0.2] - 2026-07-11
 
 ### Fixed

package/README.md

@@ -217,6 +217,16 @@ summary, and the exact property change folded under a toggle. A change too small
 to see at 1:1 (say a 2px icon tweak) also gets a magnified zoom crop, so a
 sub-pixel change can't slip past a reviewer.
 
+Annotation boxes reconcile exact-equivalent elements one-to-one within a structural
+neighborhood. When an unkeyed sibling insertion shifts unchanged descendants, the
+clean comparison still shows the complete rendered result and the audit keeps every
+structural finding, but magenta boxes mark only unmatched additions, removals, and
+restyles instead of painting the displaced subtree as changed. Visually identical
+duplicates have no provable physical provenance, so the report marks a deterministic
+unmatched occurrence rather than claiming which duplicate moved. When duplicate
+restyles could also be explained as a swap, the report keeps both sides annotated
+because the captured data cannot prove a move.
+
 When one change appears both on an ordinary page and in an open popup, the report
 chooses a representative where the changed element is visibly exposed, then prefers
 the ordinary page before using viewport width as a tie-breaker. Modal-background DOM
@@ -751,6 +761,8 @@ You watch one number as you implement: the diff starts large and shrinks toward
 
 A design is mostly _behind clicks_ — modals, drawers, popovers, tabs that don't exist in the DOM until you open them. A single capture sees only the landing state. `--crawl` maps the rest for you: point it at the URL and it drives every non-destructive control, keeps whatever opens a structurally new surface, and recurses into it — a modal's tabs, a drawer's sub-views, a popover's panels — capturing each under a derived key. No spec, no selectors, no hand-holding.
 
+It follows the nav too: every same-origin page the site links to is crawled the same way, keyed by its route (`about`, `pricing`, `blog-post`, …), with class coverage aggregated across the pages that share stylesheets. `--no-follow-links` keeps the sweep to the entry page's interactive surface only.
+
 ```bash
 styleproof-capture https://example.com --crawl --out design    # maps every reachable surface
 styleproof-diff design .styleproof/maps/current                # diff the whole surface vs your build

package/bin/styleproof-capture.mjs

@@ -20,6 +20,7 @@ import { chromium } from '@playwright/test';
 import { isHelpArg, showHelpAndExit } from '../dist/cli-errors.js';
 import { UsageError, parseCaptureUrlArgs, runCaptureUrl, loadSetupSteps } from '../dist/capture-url.js';
 import { crawlAndCapture } from '../dist/crawl-surfaces.js';
+import { selectCrawlLinks, dedupIdentity } from '../dist/crawl.js';
 import { writeCaptureManifest } from '../dist/map-store.js';
 
 const COMMAND = 'styleproof-capture';
@@ -56,6 +57,9 @@ whole surface: --crawl
                     fulfilled with 500 → error render)
   --workers <n>     concurrent sweep workers (default 4); same surface set as a
                     serial crawl — pass 1 for byte-stable key attribution
+  --no-follow-links crawl the entry page's interactive surface only. By default
+                    every same-origin page the nav links to is crawled too,
+                    each keyed by its route (about, pricing, blog-post, ...)
   --until-covered   stop the crawl early the moment every stylesheet class has
                     been rendered — a coverage-oriented sweep for design mockups
   --max-depth <n>   throttle recursion depth (default: 16 — backstop for
@@ -95,61 +99,133 @@ try {
   throw e;
 }
 
+// Read the freshly-loaded page's same-origin nav links, keyed by route.
+async function harvestPageLinks(page, url) {
+  await page.goto(url, { waitUntil: 'load' });
+  const hrefs = await page.$$eval('a[href]', (els) => els.map((e) => e.getAttribute('href'))).catch(() => []);
+  return selectCrawlLinks(hrefs, { base: page.url() });
+}
+
+function printCoverage(cov, label) {
+  const unreadable = cov.unreadable ?? [];
+  if (unreadable.length > 0) {
+    console.log(
+      `⚠ coverage${label}: ${unreadable.length} stylesheet(s) unreadable — class coverage not provable against them ` +
+        `(cross-origin, no CORS; make them same-origin / CORS-readable, or pin --widths):\n    ${unreadable.join(' ')}`,
+    );
+  }
+  if (cov.missing.length === 0) {
+    if (unreadable.length === 0)
+      console.log(
+        `✓ coverage${label}: all ${cov.defined} stylesheet classes rendered in at least one captured surface`,
+      );
+  } else {
+    console.log(
+      `⚠ coverage${label}: ${cov.rendered}/${cov.defined} stylesheet classes rendered — ${cov.missing.length} never seen ` +
+        `(dead CSS, or a state the crawl could not reach):\n    ${cov.missing.join(' ')}`,
+    );
+  }
+}
+
+function pageCrawlOptions(browser, url, prefix, statesLeft) {
+  return {
+    url,
+    out: opts.out,
+    widths: opts.widths, // empty = auto-detect the page's real breakpoints
+    ignore: opts.ignore,
+    height: opts.height,
+    screenshots: opts.screenshots,
+    waitSelector: opts.waitSelector,
+    maxDepth: opts.maxDepth,
+    maxActionsPerState: opts.maxActionsPerState,
+    maxStates: statesLeft,
+    resetStorage: opts.resetStorage,
+    setup: setupSteps,
+    dataStates: opts.dataStates,
+    stopWhenCovered: opts.untilCovered,
+    workers: opts.workers,
+    keyPrefix: prefix,
+    // each worker page in its OWN context, so storage resets can't interfere
+    newPage: async () => (await browser.newContext()).newPage(),
+    // Stream each surface as it is captured, so progress is visible live and an
+    // interrupted run still shows exactly what it mapped.
+    onSurface: (s, ok) =>
+      console.log(`  ${'·'.repeat(s.depth)}${s.key} (${s.elements} elements)${ok ? '' : ' — CAPTURE FAILED'}`),
+  };
+}
+
+// Aggregate coverage: pages share stylesheets, so a class unrendered on one
+// page but rendered on another IS covered. defined = rendered ∪ missing.
+function aggregateCoverage(reports) {
+  const rendered = new Set(reports.flatMap((r) => r.coverage.renderedClasses));
+  const missing = [...new Set(reports.flatMap((r) => r.coverage.missing))].filter((c) => !rendered.has(c)).sort();
+  const unreadable = [...new Set(reports.flatMap((r) => r.coverage.unreadable ?? []))];
+  return { defined: rendered.size + missing.length, rendered: rendered.size, missing, unreadable };
+}
+
+function printCrawlSummary(reports) {
+  const surfaces = reports.reduce((n, r) => n + r.surfaces.length, 0);
+  const captured = reports.reduce((n, r) => n + r.captured, 0);
+  const tried = reports.reduce((n, r) => n + r.actionsTried, 0);
+  const skipped = reports.reduce((n, r) => n + r.skipped, 0);
+  const failed = reports.flatMap((r) => r.failed);
+  const widths = opts.widths.length ? `${opts.widths.length} width(s)` : 'auto widths';
+  console.log(
+    `✓ ${captured}/${surfaces} surface(s) across ${reports.length} page(s) × ${widths} → ${opts.out}  ` +
+      `(${tried} actions tried, ${skipped} skipped${failed.length ? `, ${failed.length} capture-failed` : ''})`,
+  );
+}
+
+// Enqueue every not-yet-seen page the just-crawled page links to, giving each a
+// unique route-key prefix ('base' is reserved for the entry crawl's root).
+function enqueueLinkedPages(links, sweep) {
+  for (const link of links) {
+    const id = dedupIdentity(link.url);
+    if (sweep.seenPages.has(id)) continue;
+    sweep.seenPages.add(id);
+    let prefix = link.key;
+    for (let i = 2; sweep.usedPrefixes.has(prefix); i++) prefix = `${link.key}-${i}`;
+    sweep.usedPrefixes.add(prefix);
+    sweep.queue.push({ url: new URL(link.url, sweep.entry).href, prefix });
+  }
+}
+
 async function runCrawl() {
   const browser = await chromium.launch();
   try {
     const page = await browser.newPage();
-    const crawlOpts = {
-      url: opts.url,
-      out: opts.out,
-      widths: opts.widths, // empty = auto-detect the page's real breakpoints
-      ignore: opts.ignore,
-      height: opts.height,
-      screenshots: opts.screenshots,
-      waitSelector: opts.waitSelector,
-      maxDepth: opts.maxDepth,
-      maxActionsPerState: opts.maxActionsPerState,
-      maxStates: opts.maxStates,
-      resetStorage: opts.resetStorage,
-      setup: setupSteps,
-      dataStates: opts.dataStates,
-      stopWhenCovered: opts.untilCovered,
-      workers: opts.workers,
-      // each worker page in its OWN context, so storage resets can't interfere
-      newPage: async () => (await browser.newContext()).newPage(),
-      // Stream each surface as it is captured, so progress is visible live and an
-      // interrupted run still shows exactly what it mapped.
-      onSurface: (s, ok) =>
-        console.log(`  ${'·'.repeat(s.depth)}${s.key} (${s.elements} elements)${ok ? '' : ' — CAPTURE FAILED'}`),
+    // Page-level breadth-first sweep: crawl the entry page's whole interactive
+    // surface, then every same-origin page its nav links to (and theirs), each
+    // namespaced by its route key so a shared --out directory never collides.
+    const entry = new URL(opts.url);
+    const sweep = {
+      entry,
+      queue: [{ url: opts.url, prefix: '' }],
+      seenPages: new Set([dedupIdentity(entry.pathname + entry.search)]),
+      usedPrefixes: new Set(['base']), // 'base' is the entry crawl's root key
     };
-    const report = await crawlAndCapture(page, crawlOpts);
+    const reports = [];
+    let statesLeft = opts.maxStates;
+
+    while (sweep.queue.length > 0 && statesLeft > 0) {
+      const { url, prefix } = sweep.queue.shift();
+      const report = await crawlAndCapture(page, pageCrawlOptions(browser, url, prefix, statesLeft));
+      reports.push(report);
+      statesLeft -= report.surfaces.length;
+      if (opts.followLinks) enqueueLinkedPages(await harvestPageLinks(page, url), sweep);
+    }
+    if (sweep.queue.length > 0)
+      console.log(`⚠ --max-states reached: ${sweep.queue.length} linked page(s) left uncrawled — raise --max-states`);
+
     // Stamp a manifest so a two-directory diff against this crawl output has the
     // same-environment guard on both sides (v4 refuses a manifest-less side).
     writeCaptureManifest({ dir: opts.out, screenshots: opts.screenshots });
-    console.log(
-      `✓ ${report.captured}/${report.surfaces.length} surface(s) × ${crawlOpts.widths.length} width(s) → ${opts.out}  ` +
-        `(${report.actionsTried} actions tried, ${report.skipped} skipped${report.failed.length ? `, ${report.failed.length} capture-failed` : ''})`,
-    );
-    const cov = report.coverage;
-    const unreadable = cov.unreadable ?? [];
-    if (unreadable.length > 0) {
-      console.log(
-        `⚠ coverage: ${unreadable.length} stylesheet(s) unreadable — class coverage not provable against them ` +
-          `(cross-origin, no CORS; make them same-origin / CORS-readable, or pin --widths):\n    ${unreadable.join(' ')}`,
-      );
-    }
-    if (cov.missing.length === 0) {
-      if (unreadable.length === 0)
-        console.log(`✓ coverage: all ${cov.defined} stylesheet classes rendered in at least one captured surface`);
-    } else {
-      console.log(
-        `⚠ coverage: ${cov.rendered}/${cov.defined} stylesheet classes rendered — ${cov.missing.length} never seen ` +
-          `(dead CSS, or a state the crawl could not reach):\n    ${cov.missing.join(' ')}`,
-      );
-    }
+    printCrawlSummary(reports);
+    const cov = aggregateCoverage(reports);
+    printCoverage(cov, reports.length > 1 ? ` (${reports.length} pages)` : '');
     // Residue under --require-full-coverage → exit 4: a never-seen class OR an
     // unreadable sheet (whose vocabulary can't be proven covered at all).
-    if (opts.requireFullCoverage && (cov.missing.length > 0 || unreadable.length > 0)) process.exit(4);
+    if (opts.requireFullCoverage && (cov.missing.length > 0 || cov.unreadable.length > 0)) process.exit(4);
   } finally {
     await browser.close();
   }

package/bin/styleproof-diff.mjs

@@ -238,7 +238,13 @@ function printDeterminismVerdict(v) {
     return false;
   }
   if (v.status === 'unknown') {
-    console.log('\n⚠ determinism basis unknown — a capture predates the determinism ledger; recapture to certify it.');
+    // No ledger at all = an ad-hoc `styleproof-capture` output (which doesn't
+    // self-check) or a pre-3.10 bundle; a spec capture records the basis.
+    console.log(
+      '\n⚠ determinism basis unknown — a side carries no determinism ledger (an ad-hoc styleproof-capture\n' +
+        '  output, or a capture from before the ledger existed). A spec-driven capture (styleproof-map)\n' +
+        '  self-checks and records it; ad-hoc captures are compared as-is.',
+    );
     return false;
   }
   console.log(

package/dist/capture-url.d.ts

@@ -72,6 +72,9 @@ export type CaptureUrlOptions = {
     dataStates: boolean;
     /** crawl: concurrent sweep workers (default 4). 1 = byte-stable key attribution. */
     workers: number;
+    /** crawl: also crawl every same-origin page the nav links to (default true).
+     *  Off = the entry page's interactive surface only. */
+    followLinks: boolean;
 };
 /**
  * Parse `styleproof-capture` argv into options. Pure and throwing so the CLI

package/dist/capture-url.js

@@ -40,6 +40,7 @@ const DEFAULTS = {
     untilCovered: false,
     dataStates: true,
     workers: 4,
+    followLinks: true,
 };
 function positiveNumber(raw, flag) {
     const n = Number(raw);
@@ -81,6 +82,8 @@ const BOOL_FLAGS = {
     '--until-covered': (o) => (o.untilCovered = true),
     '--data-states': (o) => (o.dataStates = true),
     '--no-data-states': (o) => (o.dataStates = false),
+    '--follow-links': (o) => (o.followLinks = true),
+    '--no-follow-links': (o) => (o.followLinks = false),
 };
 // Apply one argv token to the accumulator; returns the index to resume from
 // (advanced past a consumed `--flag value` pair). Flat early-returns so the
@@ -131,6 +134,7 @@ export function parseCaptureUrlArgs(argv) {
         setupFile: undefined,
         dataStates: DEFAULTS.dataStates,
         workers: DEFAULTS.workers,
+        followLinks: DEFAULTS.followLinks,
     };
     const positional = [];
     for (let i = 0; i < argv.length; i++)

package/dist/crawl-surfaces.d.ts

@@ -53,6 +53,9 @@ export type CrawlCoverage = {
     rendered: number;
     missing: string[];
     unreadable: string[];
+    /** The class names that WERE rendered — so a multi-page caller can aggregate
+     *  coverage across crawls sharing stylesheets (defined = rendered ∪ missing). */
+    renderedClasses: string[];
 };
 export type CrawlReport = {
     surfaces: CrawledSurface[];
@@ -122,6 +125,9 @@ export type SurfaceCrawlOptions = {
     /** Factory for worker pages — create each in its OWN browser context so
      *  storage resets cannot interfere across concurrent sweeps. */
     newPage?: () => Promise<Page>;
+    /** Namespace for every derived surface key (multi-page sweeps): the root
+     *  surface keys as the prefix itself, sub-states as `<prefix>-<label>`. */
+    keyPrefix?: string;
 };
 export declare const CRAWL_DEFAULTS: {
     height: number;

package/dist/crawl-surfaces.js

@@ -37,8 +37,12 @@ function pathAndSearch(url) {
         return url;
     }
 }
-function deriveKey(steps, used) {
-    const base = steps.length === 0 ? 'base' : slug(steps[steps.length - 1].label);
+function deriveKey(steps, used, prefix = '') {
+    const bare = steps.length === 0 ? 'base' : slug(steps[steps.length - 1].label);
+    // A prefixed crawl (one page of a multi-page sweep) keys its root surface as
+    // the prefix itself and namespaces every sub-state under it, so two pages'
+    // surfaces can never overwrite each other in a shared --out directory.
+    const base = prefix === '' ? bare : bare === 'base' ? prefix : `${prefix}-${bare}`;
     let key = base;
     for (let i = 2; used.has(key); i++)
         key = `${base}-${i}`;
@@ -500,7 +504,7 @@ function stateKey(steps) {
 /** Record a newly-found surface, capture it in place (page is already there), and
  *  queue it for its own sweep. Streams progress via onSurface. */
 async function record(page, opts, newPath, depth, fp, st, sink, retryOnly = false, viaRetry = false) {
-    const key = deriveKey(newPath, st.used);
+    const key = deriveKey(newPath, st.used, opts.keyPrefix ?? '');
     const surface = { key, depth, path: newPath, elements: fp.elements };
     st.surfaces.push(surface);
     let addsVocab = false;
@@ -753,7 +757,7 @@ async function recordDataState(page, opts, mode, st) {
         st.seen.add(fp.sig);
         for (const c of fp.classes)
             st.classes.add(c);
-        const key = deriveKey([{ action: 'click', selector: `(data:${mode})`, label: mode, reason: 'data-state' }], st.used);
+        const key = deriveKey([{ action: 'click', selector: `(data:${mode})`, label: mode, reason: 'data-state' }], st.used, opts.keyPrefix ?? '');
         const surface = { key, depth: 0, path: [], elements: fp.elements };
         st.surfaces.push(surface);
         await captureAndReport(page, opts, surface, st);
@@ -894,7 +898,13 @@ async function discover(page, opts) {
         skipped: counters.skipped,
         captured: st.captured,
         failed: st.failed,
-        coverage: { defined: defined.length, rendered: defined.length - missing.length, missing, unreadable },
+        coverage: {
+            defined: defined.length,
+            rendered: defined.length - missing.length,
+            missing,
+            unreadable,
+            renderedClasses: defined.filter((c) => st.classes.has(c)).sort(),
+        },
     };
 }
 /**

package/dist/crawl.d.ts

@@ -57,6 +57,23 @@ export type SelectLinksOptions = {
  * nav-regressions / unowned routes for a route that never changed.
  */
 export declare function defaultLinkKey(url: URL): string;
+/**
+ * Dedup identity for a navigable path+query. Two forms of the same route must share
+ * one identity, or a static multi-page site (whose nav links the `.html` files) gets
+ * captured twice as byte-near-identical maps, doubling the work and duplicating every
+ * finding in the diff:
+ *
+ * - A trailing slash isn't a distinct surface (`/about` and `/about/` render the same
+ *   route), so it's stripped — but never from the root `/` itself, nor from the query.
+ * - A trailing `index.html` is the directory's index (`/index.html` IS `/`, and
+ *   `/docs/index.html` IS `/docs/`), so it collapses to the directory path. Only the
+ *   literal `index.html` filename normalizes — a real `about.html` is left untouched
+ *   and stays a distinct surface from `about`.
+ *
+ * The navigable url the caller returns keeps its original form; only the SET
+ * membership test is normalized, so the first-seen href still wins.
+ */
+export declare function dedupIdentity(pathAndSearch: string): string;
 /**
  * Turn a page's raw `<a href>` values into a deduped, keyed surface list.
  *

package/dist/crawl.js

@@ -95,7 +95,7 @@ function toLink(href, base, keyFor, match) {
  * The navigable url the caller returns keeps its original form; only the SET
  * membership test is normalized, so the first-seen href still wins.
  */
-function dedupIdentity(pathAndSearch) {
+export function dedupIdentity(pathAndSearch) {
     const q = pathAndSearch.indexOf('?');
     const path = q === -1 ? pathAndSearch : pathAndSearch.slice(0, q);
     const search = q === -1 ? '' : pathAndSearch.slice(q);

package/dist/map-store.js

@@ -139,13 +139,47 @@ export function expectedCompatibilityKey(options = {}) {
     }))).slice(0, 16);
 }
 export function currentGitSha(cwd = process.cwd(), env = process.env) {
-    const fromEnv = env.GITHUB_SHA || env.GITHUB_HEAD_SHA;
-    if (fromEnv && /^[0-9a-f]{7,40}$/i.test(fromEnv))
-        return fromEnv;
-    const sha = gitOutput(cwd, ['rev-parse', 'HEAD']);
-    if (!sha)
-        throw new MapStoreError('must run inside a git repository, or pass --sha <commit>');
-    return sha;
+    const fromEvent = (() => {
+        // pull_request_target is deliberately absent: there GITHUB_SHA *is* the base
+        // tip, so its default checkout would be relabeled to the fork's (attacker-
+        // chosen) head. A pull_request_target job that really checks out the head
+        // gets the right SHA from `git rev-parse HEAD` with no relabel needed.
+        if (!env.GITHUB_EVENT_PATH || !['pull_request', 'workflow_run'].includes(env.GITHUB_EVENT_NAME ?? '')) {
+            return undefined;
+        }
+        try {
+            const event = JSON.parse(fs.readFileSync(env.GITHUB_EVENT_PATH, 'utf8'));
+            return event.pull_request?.head?.sha ?? event.workflow_run?.head_sha;
+        }
+        catch {
+            return undefined;
+        }
+    })();
+    // STYLEPROOF_SHA/GITHUB_HEAD_SHA are explicit overrides: they always win, and
+    // a malformed value errors instead of silently falling through to a wrong label.
+    const explicit = env.STYLEPROOF_SHA || env.GITHUB_HEAD_SHA;
+    if (explicit) {
+        if (!/^[0-9a-f]{7,40}$/i.test(explicit)) {
+            throw new MapStoreError(`STYLEPROOF_SHA/GITHUB_HEAD_SHA is not a commit SHA: ${explicit}`);
+        }
+        return explicit;
+    }
+    const head = gitOutput(cwd, ['rev-parse', 'HEAD']);
+    if (head) {
+        // The checked-out tree is the truth. The one exception: a checkout of the
+        // synthetic GITHUB_SHA commit (pull_request merge commit / workflow_run
+        // default tip) is labeled with the event's real head, because nothing ever
+        // restores by the synthetic SHA. A checkout of anything else — e.g. the
+        // base branch in a cache-miss job — keeps its own SHA, so a base-tree map
+        // is never published under the head's store key (a false-green poisoning).
+        if (fromEvent && head === env.GITHUB_SHA)
+            return fromEvent;
+        return head;
+    }
+    const fallback = fromEvent ?? env.GITHUB_SHA;
+    if (fallback && /^[0-9a-f]{7,40}$/i.test(fallback))
+        return fallback;
+    throw new MapStoreError('must run inside a git repository, or pass --sha <commit>');
 }
 export function refSha(ref, cwd = process.cwd()) {
     const sha = gitOutput(cwd, ['rev-parse', `${ref}^{commit}`]);

package/dist/report.js

@@ -48,6 +48,195 @@ function outermost(paths) {
 function innermost(paths) {
     return paths.filter((p) => !paths.some((q) => q !== p && q.startsWith(p + ' > ')));
 }
+function sortedProperties(props) {
+    return Object.entries(props).sort(([left], [right]) => left.localeCompare(right, 'en'));
+}
+function restingAnnotationIdentity(entry) {
+    if (!entry)
+        return null;
+    const sortedPseudo = Object.fromEntries(Object.entries(entry.pseudo ?? {})
+        .sort(([left], [right]) => left.localeCompare(right, 'en'))
+        .map(([pseudo, properties]) => [pseudo, sortedProperties(properties)]));
+    return [
+        entry.tag,
+        entry.cls,
+        entry.rect?.[2] ?? null,
+        entry.rect?.[3] ?? null,
+        sortedProperties(entry.style),
+        sortedPseudo,
+    ];
+}
+function normalizeStructuralPath(elementPath) {
+    return elementPath.replace(/:nth-(?:child|of-type)\(\d+\)/g, (selector) => selector.replace(/\d+/, '*'));
+}
+function annotationScope(elementPath) {
+    const parentSeparator = elementPath.lastIndexOf(' > ');
+    return normalizeStructuralPath(parentSeparator === -1 ? '' : elementPath.slice(0, parentSeparator));
+}
+function relativeStateTarget(ownerPath, targetPath) {
+    if (targetPath === ownerPath)
+        return '';
+    const ownerPseudoPrefix = `${ownerPath}::`;
+    if (targetPath.startsWith(ownerPseudoPrefix))
+        return targetPath.slice(ownerPath.length);
+    const descendantPrefix = `${ownerPath} > `;
+    const relativePath = targetPath.startsWith(descendantPrefix) ? targetPath.slice(descendantPrefix.length) : targetPath;
+    return normalizeStructuralPath(relativePath);
+}
+function canonicalForcedStates(map, ownerPath) {
+    return Object.entries(map.states?.[ownerPath] ?? {})
+        .sort(([left], [right]) => left.localeCompare(right, 'en'))
+        .map(([stateName, deltas]) => [
+        stateName,
+        Object.entries(deltas)
+            .map(([targetPath, properties]) => [
+            relativeStateTarget(ownerPath, targetPath),
+            restingAnnotationIdentity(map.elements[targetPath]),
+            sortedProperties(properties),
+        ])
+            .sort((left, right) => JSON.stringify(left).localeCompare(JSON.stringify(right), 'en')),
+    ]);
+}
+function annotationIdentity(map, elementPath, entry) {
+    return JSON.stringify([restingAnnotationIdentity(entry), canonicalForcedStates(map, elementPath)]);
+}
+function sortedAnnotationPaths(paths) {
+    return [...paths].sort((left, right) => left.localeCompare(right, 'en', { numeric: true }));
+}
+function indexAnnotationIdentities(map) {
+    const pathsByIdentity = new Map();
+    for (const [elementPath, entry] of Object.entries(map.elements)) {
+        const identity = annotationIdentity(map, elementPath, entry);
+        pathsByIdentity.set(identity, [...(pathsByIdentity.get(identity) ?? []), elementPath]);
+    }
+    return pathsByIdentity;
+}
+function pathsByAnnotationScope(paths) {
+    const pathsByScope = new Map();
+    for (const elementPath of paths) {
+        const scope = annotationScope(elementPath);
+        pathsByScope.set(scope, [...(pathsByScope.get(scope) ?? []), elementPath]);
+    }
+    for (const scopedPaths of pathsByScope.values())
+        scopedPaths.sort((left, right) => left.localeCompare(right, 'en', { numeric: true }));
+    return pathsByScope;
+}
+/** Captured children per concrete container path, for the displacement proof. */
+function containerChildCounts(map) {
+    const counts = new Map();
+    for (const elementPath of Object.keys(map.elements)) {
+        const separator = elementPath.lastIndexOf(' > ');
+        const container = separator === -1 ? '' : elementPath.slice(0, separator);
+        counts.set(container, (counts.get(container) ?? 0) + 1);
+    }
+    return counts;
+}
+/** The concrete container where two element paths diverge (never the leaf itself). */
+function deepestCommonContainer(beforePath, afterPath) {
+    const beforeSegments = beforePath.split(' > ');
+    const afterSegments = afterPath.split(' > ');
+    const shared = [];
+    const limit = Math.min(beforeSegments.length, afterSegments.length) - 1;
+    for (let i = 0; i < limit && beforeSegments[i] === afterSegments[i]; i++)
+        shared.push(beforeSegments[i]);
+    return shared.join(' > ');
+}
+function containerOf(elementPath) {
+    const separator = elementPath.lastIndexOf(' > ');
+    return separator === -1 ? '' : elementPath.slice(0, separator);
+}
+/**
+ * A cross-path match is a MOVE claim, and a matched pair's annotations are
+ * suppressed — so the move must be PROVABLE from the captured data, one of:
+ *
+ * - the container where the two paths diverge gained or lost captured children
+ *   (a sibling insertion/removal displaced everything after it), or
+ * - a same-container slide into a vacated slot: the source slot emptied and the
+ *   destination slot is new. That is displacement by an UNCAPTURED sibling — an
+ *   injected `<style>`/`<script>` shifts `nth-child` without entering the census.
+ *
+ * A pair with neither proof — a style swap between siblings, a pure reorder of
+ * occupied slots, or a coincidental twin in a cousin container — stays
+ * annotated, because the data cannot prove nothing changed there.
+ */
+function canReconcileAnnotationPair(beforeMap, afterMap, beforeCounts, afterCounts, beforePath, afterPath, remainingAfter) {
+    if (!remainingAfter.has(afterPath))
+        return false;
+    const divergence = deepestCommonContainer(beforePath, afterPath);
+    if ((beforeCounts.get(divergence) ?? 0) !== (afterCounts.get(divergence) ?? 0))
+        return true;
+    if (containerOf(beforePath) !== containerOf(afterPath))
+        return false;
+    return !beforeMap.elements[afterPath] && !afterMap.elements[beforePath];
+}
+function reconcileIdentityPaths(beforeMap, afterMap, beforeCounts, afterCounts, beforePaths, afterPaths, matches) {
+    const remainingBefore = new Set(beforePaths);
+    const remainingAfter = new Set(afterPaths);
+    // Preserve stable paths first. This keeps duplicate occurrences deterministic
+    // without claiming which indistinguishable physical node was inserted.
+    for (const beforePath of beforePaths) {
+        if (!remainingAfter.has(beforePath))
+            continue;
+        matches.beforeToAfter.set(beforePath, beforePath);
+        matches.afterToBefore.set(beforePath, beforePath);
+        remainingBefore.delete(beforePath);
+        remainingAfter.delete(beforePath);
+    }
+    const remainingAfterPathsByScope = pathsByAnnotationScope(remainingAfter);
+    // Reconcile only within the same normalized structural neighborhood. Any
+    // excess occurrence remains unmatched and is annotated as an addition/removal.
+    for (const beforePath of sortedAnnotationPaths([...remainingBefore])) {
+        const candidates = remainingAfterPathsByScope.get(annotationScope(beforePath)) ?? [];
+        const afterPath = candidates.find((candidate) => canReconcileAnnotationPair(beforeMap, afterMap, beforeCounts, afterCounts, beforePath, candidate, remainingAfter));
+        if (!afterPath)
+            continue;
+        matches.beforeToAfter.set(beforePath, afterPath);
+        matches.afterToBefore.set(afterPath, beforePath);
+        remainingBefore.delete(beforePath);
+        remainingAfter.delete(afterPath);
+    }
+}
+function reconcileAnnotationPaths(beforeMap, afterMap) {
+    const beforePathsByIdentity = indexAnnotationIdentities(beforeMap);
+    const afterPathsByIdentity = indexAnnotationIdentities(afterMap);
+    const beforeCounts = containerChildCounts(beforeMap);
+    const afterCounts = containerChildCounts(afterMap);
+    const matches = {
+        beforeToAfter: new Map(),
+        afterToBefore: new Map(),
+    };
+    const identities = new Set([...beforePathsByIdentity.keys(), ...afterPathsByIdentity.keys()]);
+    for (const identity of identities) {
+        reconcileIdentityPaths(beforeMap, afterMap, beforeCounts, afterCounts, sortedAnnotationPaths(beforePathsByIdentity.get(identity) ?? []), sortedAnnotationPaths(afterPathsByIdentity.get(identity) ?? []), matches);
+    }
+    return matches;
+}
+function annotationSides(finding, beforeMoved, afterMoved) {
+    if (finding.kind !== 'dom')
+        return { before: !beforeMoved, after: !afterMoved };
+    if (finding.change === 'removed')
+        return { before: !beforeMoved, after: false };
+    if (finding.change === 'added')
+        return { before: false, after: !afterMoved };
+    return { before: true, after: true };
+}
+function annotationPaths(findings, beforeMap, afterMap) {
+    const matches = reconcileAnnotationPaths(beforeMap, afterMap);
+    const beforePaths = new Set();
+    const afterPaths = new Set();
+    for (const finding of findings) {
+        const beforeMatch = matches.beforeToAfter.get(finding.path);
+        const afterMatch = matches.afterToBefore.get(finding.path);
+        const beforeMoved = beforeMatch !== undefined && beforeMatch !== finding.path;
+        const afterMoved = afterMatch !== undefined && afterMatch !== finding.path;
+        const sides = annotationSides(finding, beforeMoved, afterMoved);
+        if (sides.before)
+            beforePaths.add(finding.path);
+        if (sides.after)
+            afterPaths.add(finding.path);
+    }
+    return { before: innermost([...beforePaths]), after: innermost([...afterPaths]) };
+}
 /** Headline counts with the zeros dropped — `0 state-delta difference(s)` is noise. */
 function changeCountLabel(shown) {
     const parts = [];
@@ -853,9 +1042,9 @@ function buildRegionImages(args) {
     // cards) on each side — not the merged container the crop anchors on, whose box would
     // just trace the whole frame. An element present on only one side (added/removed) is
     // boxed only there.
-    const markPaths = innermost([...new Set(regionFindings.map((f) => f.path))]);
-    const rectsA = markPaths.map((p) => mapA.elements[p]?.rect).filter((r) => !!r);
-    const rectsB = markPaths.map((p) => mapB.elements[p]?.rect).filter((r) => !!r);
+    const markedPaths = annotationPaths(regionFindings, mapA, mapB);
+    const rectsA = markedPaths.before.map((p) => mapA.elements[p]?.rect).filter((r) => !!r);
+    const rectsB = markedPaths.after.map((p) => mapB.elements[p]?.rect).filter((r) => !!r);
     const annotatedBefore = annotateCrop(before, rectsA);
     const annotatedAfter = annotateCrop(after, rectsB);
     const images = {
@@ -869,8 +1058,10 @@ function buildRegionImages(args) {
     // Name the changed element(s) so the reviewer knows where to look without expanding
     // anything (e.g. `changed: span.caret`).
     const changedNames = [
-        ...new Set(markPaths
-            .map((p) => mapA.elements[p] ?? mapB.elements[p])
+        ...new Set([
+            ...markedPaths.before.map((elementPath) => mapA.elements[elementPath]),
+            ...markedPaths.after.map((elementPath) => mapB.elements[elementPath]),
+        ]
             .filter((e) => !!e)
             .map((e) => (e.cls ? `${e.tag}.${e.cls.split(/\s+/)[0]}` : e.tag))),
     ].slice(0, 3);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styleproof",
-  "version": "4.0.2",
+  "version": "4.2.0",
   "description": "Catch every CSS change before it ships — review PRs and certify refactors by the browser's computed styles, not pixels. Works with any styling system.",
   "keywords": [
     "playwright",