styleproof 3.4.0 → 3.5.0

package/CHANGELOG.md

@@ -7,6 +7,49 @@ this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Fixed
+
+- Report tables never show an equal-looking Before/After pair for a real diff.
+  A colour embedded in a compound value (gradient, shadow) no longer stands in
+  for the whole value — `toHex` only converts values that ARE a colour — and
+  long value pairs (gradients, data URIs) are excerpted around the differing
+  substring with a little shared context on each side.
+- Report values render verbatim: display rounding of decimals is gone (alpha
+  `0.18` was shown as `0.2`, and a real `0.18 → 0.2` change could be dropped
+  as a no-op after rounding).
+
+### Changed
+
+- Control identity is now SEMANTIC, not positional: the driven-once dedup keys
+  on tag ancestry (no indices, no classes) + label + role — what stays stable
+  across every re-render — instead of nth-of-type selectors. Mode switches
+  re-render subtrees and re-mint positional selectors for the same logical
+  controls, which made every combination view refill the fresh-candidate pool
+  (a crawl inflated past 2,500 surfaces through that leak). Positional clones
+  with identical tag-path AND label (a repeated row's expand button) merge —
+  one is explored; distinctly-labeled controls stay distinct; anything hidden
+  behind a merge is still NAMED by the coverage verifier.
+- Family retries no longer compound: a state reached via a retry still explores
+  its genuinely-new UI, but never re-retries mode-switchers. Every PAIRWISE
+  combination of independent modes is captured (a tab's edit state, a decided
+  list's other tab); 3-way-and-deeper toggle products — which multiply surfaces
+  without new render vocabulary — are not walked. Observed live: an exhaustive
+  crawl inflated past 725 surfaces in the N-way product tail; the pairwise walk
+  covers the same vocabulary in a fraction of the states. Anything class-visible
+  only at deeper combination depth is still NAMED by the coverage verifier.
+
+## [3.5.0] - 2026-07-02
+
+### Added
+
+- Parallel crawl: `--workers <n>` (default 4) sweeps queued states concurrently,
+  each worker on its own browser context. The surface set is identical to a
+  serial crawl — dedup sets are shared, and a state's children only join the
+  queue when its sweep completes, so family retry never reads a half-built
+  changer registry. Only dup-key suffix attribution can vary with timing; pass
+  `--workers 1` for byte-stable keys. Exhaustive runs drop from hours to
+  minutes on lattice-heavy designs.
+
 ## [3.4.0] - 2026-07-02
 
 ### Fixed

package/README.md

@@ -424,7 +424,7 @@ styleproof-diff design .styleproof/maps/current                # diff the whole
 
 It's **exhaustive by default**: the crawl stops when there is nothing left to drive — every control tried once, every structurally new surface captured — not at a budget. Termination is guaranteed by dedup (controls dedup by selector, surfaces by a structural fingerprint), and the `--max-depth` / `--max-actions` / `--max-states` flags exist only as deliberate throttles. It's deterministic (document order; the same surface reached two ways is captured once) and self-settling — it waits for an async app (React/Vue/Babel that boots after `load`) to mount before reading, so a bare crawl of a client-rendered page still captures the mounted UI.
 
-What makes exhaustive affordable is that the sweep works **in place**: standing in a state, each control is clicked right where the page is, and a cheap DOM fingerprint decides what happened — a no-op click costs nothing, and only a state-changing click pays a reset (fresh navigation + replay of the click-path), which is then **verified by fingerprint** so children are never attributed to the wrong parent. New surfaces are captured at every width the moment they're reached — a deep or animated click-path is never re-driven to capture, so it can't be the thing that drops a surface. Progress streams as it goes, one line per captured surface.
+What makes exhaustive affordable is that the sweep works **in place**: standing in a state, each control is clicked right where the page is, and a cheap DOM fingerprint decides what happened — a no-op click costs nothing, and only a state-changing click pays a reset (fresh navigation + replay of the click-path), which is then **verified by fingerprint** so children are never attributed to the wrong parent. New surfaces are captured at every width the moment they're reached — a deep or animated click-path is never re-driven to capture, so it can't be the thing that drops a surface. Progress streams as it goes, one line per captured surface. And it's **parallel by default** — `--workers <n>` (default 4) sweeps states concurrently on isolated browser contexts with the exact same surface set as a serial crawl (dedup is shared; children only enter the queue when their parent's sweep completes); `--workers 1` if you want byte-stable dup-key attribution.
 
 **And it proves nothing was missed.** After the crawl, StyleProof compares every class the page's own stylesheets define (read from the parsed CSSOM) against the classes actually rendered across the captured surfaces, and prints what — if anything — was never seen. `--require-full-coverage` turns any residue into exit code 4, so "the design is fully covered" is a CI-checkable property, not a judgement call. What's left is either dead CSS (delete it) or a state the crawl couldn't reach (drive it with a spec, or file the gap).
 

package/bin/styleproof-capture.mjs

@@ -51,6 +51,8 @@ whole surface: --crawl
   --no-data-states  skip the automatic loading/error captures of the entry page
                     (on by default: data requests stalled → loading skeleton;
                     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
   --max-depth <n>   throttle recursion depth (default: unbounded)
   --max-actions <n> throttle controls tried per state (default: unbounded)
   --max-states <n>  throttle total surfaces (default: unbounded)
@@ -105,6 +107,9 @@ async function runCrawl() {
       resetStorage: opts.resetStorage,
       setup: setupSteps,
       dataStates: opts.dataStates,
+      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) =>

package/dist/capture-url.d.ts

@@ -65,6 +65,8 @@ export type CaptureUrlOptions = {
     /** crawl: also capture automatic `loading`/`error` data states of the entry
      *  page (default true). */
     dataStates: boolean;
+    /** crawl: concurrent sweep workers (default 4). 1 = byte-stable key attribution. */
+    workers: number;
 };
 /**
  * Parse `styleproof-capture` argv into options. Pure and throwing so the CLI

package/dist/capture-url.js

@@ -32,6 +32,7 @@ const DEFAULTS = {
     resetStorage: true,
     requireFullCoverage: false,
     dataStates: true,
+    workers: 4,
 };
 function positiveNumber(raw, flag) {
     const n = Number(raw);
@@ -62,6 +63,7 @@ const VALUE_FLAGS = {
     '--max-actions': (o, v) => (o.maxActionsPerState = positiveNumber(v, '--max-actions')),
     '--max-states': (o, v) => (o.maxStates = positiveNumber(v, '--max-states')),
     '--setup': (o, v) => (o.setupFile = v),
+    '--workers': (o, v) => (o.workers = positiveNumber(v, '--workers')),
 };
 const BOOL_FLAGS = {
     '--screenshots': (o) => (o.screenshots = true),
@@ -119,6 +121,7 @@ export function parseCaptureUrlArgs(argv) {
         requireFullCoverage: DEFAULTS.requireFullCoverage,
         setupFile: undefined,
         dataStates: DEFAULTS.dataStates,
+        workers: DEFAULTS.workers,
     };
     const positional = [];
     for (let i = 0; i < argv.length; i++)

package/dist/crawl-surfaces.d.ts

@@ -101,6 +101,15 @@ export type SurfaceCrawlOptions = {
     /** Called as each surface is recorded (captured=false when its full capture failed).
      *  Lets CLIs stream progress instead of reporting only at the end. */
     onSurface?: (surface: CrawledSurface, captured: boolean) => void;
+    /** Concurrent sweep workers (default 4). Each worker gets its own page from
+     *  `newPage`; without a factory the crawl runs single-page regardless. The
+     *  surface SET is identical to a serial crawl (same dedup sets); only which
+     *  path first claims a shape — and so dup-key suffixes — can vary run to run.
+     *  Use workers: 1 for byte-stable key attribution. */
+    workers?: number;
+    /** Factory for worker pages — create each in its OWN browser context so
+     *  storage resets cannot interfere across concurrent sweeps. */
+    newPage?: () => Promise<Page>;
 };
 export declare const CRAWL_DEFAULTS: {
     height: number;
@@ -109,14 +118,10 @@ export declare const CRAWL_DEFAULTS: {
     maxActionsPerState: number;
     maxStates: number;
     resetStorage: boolean;
+    workers: number;
 };
 /** Run the caller's deterministic setup steps (login, unlock, seed input). A
  *  non-optional step that fails throws loudly — a half-established gate must
  *  never silently crawl the ungated page instead. */
 export declare function runSetup(page: Page, steps: SetupStep[]): Promise<void>;
-/**
- * Crawl `opts.url` and capture every reachable surface at every width — runs to
- * natural termination by default. Returns the surfaces mapped (with the click-path
- * that reached each), how many actions were tried/skipped, and captured/failed.
- */
 export declare function crawlAndCapture(page: Page, opts: SurfaceCrawlOptions): Promise<CrawlReport>;

package/dist/crawl-surfaces.js

@@ -11,6 +11,7 @@ export const CRAWL_DEFAULTS = {
     maxActionsPerState: 100000,
     maxStates: 100000,
     resetStorage: true,
+    workers: 4,
 };
 function slug(value) {
     return (value
@@ -77,6 +78,19 @@ function collectClickable() {
         .replace(/\s+/g, ' ')
         .trim()
         .slice(0, 80) || el.tagName.toLowerCase();
+    const identityFor = (el) => {
+        // Tag-path only — NO classes and NO indices: classes carry state (body.alt,
+        // .on) and would re-contextualize the same control per mode; indices carry
+        // position and drift on re-render. Tag ancestry + label is what stays
+        // stable across every context the same logical control appears in.
+        const parts = [];
+        let cur = el;
+        while (cur && cur !== document.documentElement) {
+            parts.unshift(cur.tagName.toLowerCase());
+            cur = cur.parentElement;
+        }
+        return `${parts.join('>')}|${labelFor(el)}|${el.getAttribute('role') ?? ''}`;
+    };
     // Semantic controls first (stable, meaningful), then anything styled clickable.
     // `grab` counts too: a draggable card is routinely ALSO a click target (open on
     // click, drag to move), and we never drag — el.click() fires no drag gesture.
@@ -117,6 +131,7 @@ function collectClickable() {
         out.push({
             action: 'fill-input',
             selector,
+            identity: identityFor(el),
             label: labelFor(el) === el.tagName.toLowerCase() ? (el.getAttribute('placeholder') ?? 'input') : labelFor(el),
             reason: 'auto-fill',
             value: AUTO_VALUE[kind] ?? 'sample text',
@@ -139,12 +154,21 @@ function collectClickable() {
         if (el instanceof HTMLSelectElement) {
             const next = [...el.options].find((o) => !o.disabled && o.value !== el.value);
             if (next)
-                out.push({ action: 'select-option', selector, label, reason: 'select-option', value: next.value, unsafe });
+                out.push({
+                    action: 'select-option',
+                    selector,
+                    identity: identityFor(el),
+                    label,
+                    reason: 'select-option',
+                    value: next.value,
+                    unsafe,
+                });
         }
         else {
             out.push({
                 action: 'click',
                 selector,
+                identity: identityFor(el),
                 label,
                 reason: el.getAttribute('role') === 'tab' ? 'tab' : 'click',
                 unsafe,
@@ -412,11 +436,14 @@ 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, retryOnly = false) {
+async function record(page, opts, newPath, depth, fp, st, sink, retryOnly = false, viaRetry = false) {
     const key = deriveKey(newPath, st.used);
     const surface = { key, depth, path: newPath, elements: fp.elements };
     st.surfaces.push(surface);
-    st.queue.push({ path: newPath, depth, sig: fp.sig, retryOnly });
+    // Children buffer in the sweep's sink and enter the shared queue only when the
+    // parent's sweep completes — family retry reads the parent's changer registry,
+    // which is only complete then. (Serial mode passes st.queue directly.)
+    sink.push({ path: newPath, depth, sig: fp.sig, retryOnly, viaRetry });
     for (const c of fp.classes)
         st.classes.add(c);
     await captureAndReport(page, opts, surface, st);
@@ -451,7 +478,7 @@ async function tryInPlace(page, c) {
 }
 /** Drive one candidate from where the page stands. Returns whether the page is
  *  still in the swept state (no-op click) and whether the action was a skip. */
-async function driveCandidate(page, opts, entry, c, st) {
+async function driveCandidate(page, opts, entry, c, st, sink, viaRetry) {
     // (retry-only lineage is inherited: a consumed state's descendants can also
     // only be mode-switch views, never fresh-candidate exploration.)
     const outcome = await tryInPlace(page, c);
@@ -468,7 +495,7 @@ async function driveCandidate(page, opts, entry, c, st) {
         .catch(() => false);
     const from = stateKey(entry.path);
     const list = st.changersFrom.get(from) ?? [];
-    if (!list.some((x) => x.c.selector === c.selector))
+    if (!list.some((x) => x.c.identity === c.identity))
         list.push({ c, persists });
     st.changersFrom.set(from, list);
     const fp = await fingerprint(page);
@@ -482,7 +509,7 @@ async function driveCandidate(page, opts, entry, c, st) {
         reason: c.reason,
         ...(c.value ? { value: c.value } : {}),
     };
-    await record(page, opts, [...entry.path, step], entry.depth + 1, fp, st, entry.retryOnly || !persists);
+    await record(page, opts, [...entry.path, step], entry.depth + 1, fp, st, sink, entry.retryOnly || !persists, viaRetry);
     return { inState: false, skipped: false };
 }
 /**
@@ -494,14 +521,26 @@ async function driveCandidate(page, opts, entry, c, st) {
 /** The family-retry list for a state: its parent's persistent mode-switchers that
  *  are visible right now — minus the step that created this state itself. */
 function familyRetries(entry, all, st) {
+    // RETRIES DO NOT COMPOUND: a state reached via a family retry still explores
+    // its genuinely-new UI (fresh selectors), but never re-retries mode-switchers.
+    // Every PAIRWISE mode combination is captured; N-way products of independent
+    // toggles are not walked — they multiply states without new render vocabulary,
+    // and anything class-visible only at 3-way depth is still NAMED by the
+    // coverage verifier.
+    if (entry.viaRetry)
+        return [];
     if (entry.path.length === 0)
         return [];
     const parentKey = stateKey(entry.path.slice(0, -1));
     const ownSelector = entry.path[entry.path.length - 1].selector;
-    const visibleNow = new Set(all.map((c) => c.selector));
+    // Match registered changers to THIS state's candidates by semantic identity —
+    // the mode switch re-rendered the subtree, so positional selectors drifted;
+    // the current candidate carries the right selector for this state.
+    const byIdentity = new Map(all.map((c) => [c.identity, c]));
     return (st.changersFrom.get(parentKey) ?? [])
-        .filter((x) => x.persists && x.c.selector !== ownSelector && visibleNow.has(x.c.selector))
-        .map((x) => x.c);
+        .filter((x) => x.persists && x.c.selector !== ownSelector)
+        .map((x) => byIdentity.get(x.c.identity))
+        .filter((c) => Boolean(c));
 }
 /** The work list for one state's sweep: fresh controls first (already-driven
  *  global chrome would otherwise starve a deep surface's own controls; the
@@ -509,13 +548,13 @@ function familyRetries(entry, all, st) {
  *  re-tried in THIS sibling mode. A state reached through a consuming action
  *  collects NO fresh candidates — see QueueEntry.retryOnly. */
 function sweepWorkList(entry, all, opts, st) {
-    const fresh = entry.retryOnly ? [] : all.filter((c) => !st.tried.has(c.selector)).slice(0, opts.maxActionsPerState);
+    const fresh = entry.retryOnly ? [] : all.filter((c) => !st.tried.has(c.identity)).slice(0, opts.maxActionsPerState);
     return [
         ...fresh.map((c) => ({ c, retry: false })),
         ...familyRetries(entry, all, st).map((c) => ({ c, retry: true })),
     ];
 }
-async function sweepState(page, opts, entry, st) {
+async function sweepState(page, opts, entry, st, sink) {
     if (!(await resetToState(page, opts, entry.path, entry.sig)))
         return { tried: 0, skipped: 0 };
     const all = await page.evaluate(collectClickable).catch(() => []);
@@ -532,13 +571,13 @@ async function sweepState(page, opts, entry, st) {
             inState = true;
         }
         if (!retry)
-            st.tried.add(c.selector);
+            st.tried.add(c.identity);
         if (c.unsafe) {
             skipped++;
             continue;
         }
         tried++;
-        const r = await driveCandidate(page, opts, entry, c, st);
+        const r = await driveCandidate(page, opts, entry, c, st, sink, retry);
         inState = r.inState;
         if (r.skipped)
             skipped++;
@@ -578,6 +617,53 @@ async function recordDataState(page, opts, mode, st) {
         await page.unroute('**/*');
     }
 }
+/**
+ * Sweep the queue with N concurrent workers, each on its own page. LIFO keeps
+ * the depth-first bias; a worker's discovered children enter the shared queue
+ * only when its sweep completes (see record). The surface SET matches a serial
+ * crawl — dedup sets are shared and mutated synchronously — only dup-key
+ * suffix attribution can vary with timing.
+ */
+async function runPool(primary, opts, st, counters) {
+    const target = Math.max(1, opts.workers ?? 1);
+    const pages = [primary];
+    while (opts.newPage && pages.length < target) {
+        const extra = await opts.newPage();
+        if (opts.resetStorage)
+            await armResetStorage(extra);
+        pages.push(extra);
+    }
+    let active = 0;
+    await new Promise((resolve) => {
+        const pump = () => {
+            while (pages.length > 0 && st.queue.length > 0 && st.surfaces.length < opts.maxStates) {
+                const entry = st.queue.pop(); // LIFO → depth-first
+                if (entry.depth >= opts.maxDepth)
+                    continue;
+                const worker = pages.pop();
+                active++;
+                const sink = [];
+                sweepState(worker, opts, entry, st, sink)
+                    .then((r) => {
+                    counters.tried += r.tried;
+                    counters.skipped += r.skipped;
+                })
+                    .catch(() => {
+                    /* fail-soft: the state's surface was already captured in place */
+                })
+                    .finally(() => {
+                    st.queue.push(...sink);
+                    pages.push(worker);
+                    active--;
+                    pump();
+                });
+            }
+            if (active === 0 && (st.queue.length === 0 || st.surfaces.length >= opts.maxStates))
+                resolve();
+        };
+        pump();
+    });
+}
 /** Depth-first discovery + in-place capture of every reachable surface. Depth-first
  *  so a surface's OWN sub-states (a modal's tab → its toggles) are mapped while the
  *  branch is fresh; with no budget, order affects time-to-depth, not coverage. */
@@ -617,7 +703,7 @@ async function discover(page, opts) {
         captured: 0,
         failed: [],
     };
-    await record(page, opts, [], 0, fp, st, false);
+    await record(page, opts, [], 0, fp, st, st.queue, false, false);
     // Automatic data states of the entry page — the loading skeleton and the
     // error render exist in every data-driven app but almost never in a click
     // path. Captured out of the box; identical-to-base renders dedup away.
@@ -625,21 +711,13 @@ async function discover(page, opts) {
         await recordDataState(page, opts, 'loading', st);
         await recordDataState(page, opts, 'error', st);
     }
-    let actionsTried = 0;
-    let skipped = 0;
-    while (st.queue.length > 0 && st.surfaces.length < opts.maxStates) {
-        const entry = st.queue.pop(); // LIFO → depth-first
-        if (entry.depth >= opts.maxDepth)
-            continue;
-        const r = await sweepState(page, opts, entry, st);
-        actionsTried += r.tried;
-        skipped += r.skipped;
-    }
+    const counters = { tried: 0, skipped: 0 };
+    await runPool(page, opts, st, counters);
     const missing = defined.filter((c) => !st.classes.has(c)).sort();
     return {
         surfaces: st.surfaces,
-        actionsTried,
-        skipped,
+        actionsTried: counters.tried,
+        skipped: counters.skipped,
         captured: st.captured,
         failed: st.failed,
         coverage: { defined: defined.length, rendered: defined.length - missing.length, missing },
@@ -650,19 +728,21 @@ async function discover(page, opts) {
  * natural termination by default. Returns the surfaces mapped (with the click-path
  * that reached each), how many actions were tried/skipped, and captured/failed.
  */
+/** Clear storage before the app's code runs on EVERY load, so each gotoFresh is
+ *  a clean slate in one navigation (no clear-then-reload round trip). */
+async function armResetStorage(page) {
+    await page.addInitScript(() => {
+        try {
+            localStorage.clear();
+            sessionStorage.clear();
+        }
+        catch {
+            /* storage unavailable (e.g. file://) — ignore */
+        }
+    });
+}
 export async function crawlAndCapture(page, opts) {
-    if (opts.resetStorage) {
-        // Clear storage before the app's code runs on EVERY load, so each gotoFresh is
-        // a clean slate in one navigation (no clear-then-reload round trip).
-        await page.addInitScript(() => {
-            try {
-                localStorage.clear();
-                sessionStorage.clear();
-            }
-            catch {
-                /* storage unavailable (e.g. file://) — ignore */
-            }
-        });
-    }
+    if (opts.resetStorage)
+        await armResetStorage(page);
     return discover(page, opts);
 }

package/dist/describe.js

@@ -18,7 +18,10 @@ const PALETTE = [
     ['pink', [236, 64, 122]],
 ];
 function parseColor(v) {
-    const m = v.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)(?:[,/\s]+([\d.]+))?\s*\)/i);
+    // Anchored: only a value that IS a colour parses. An embedded colour inside a
+    // gradient/shadow/url must not stand in for the whole value — that once made a
+    // report show the same "representative" rgba on both sides of a real diff.
+    const m = v.match(/^rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)(?:[,/\s]+([\d.]+))?\s*\)$/i);
     if (!m)
         return null;
     return [Number(m[1]), Number(m[2]), Number(m[3]), m[4] === undefined ? 1 : Number(m[4])];

package/dist/report.d.ts

@@ -71,4 +71,5 @@ export type ReportResult = {
 export declare function summarizeProps(props: PropChange[]): PropChange[];
 /** `div.who-grid`, `a.nav-cta`, `h3` — the semantic marker class, else the tag. */
 export declare function prettyLabel(p: string, cls: string): string;
+export declare function excerptPair(before: string, after: string): [string, string];
 export declare function generateStyleMapReport(opts: ReportOptions): ReportResult;

package/dist/report.js

@@ -292,7 +292,9 @@ const orderIdx = (p) => {
     return i === -1 ? PROP_ORDER.length : i;
 };
 function cleanVal(v) {
-    let s = v.replace(/-?\d+\.\d+/g, (m) => String(Math.round(parseFloat(m) * 10) / 10));
+    // Verbatim by design: no rounding. Rounding once showed alpha 0.18 as 0.2 —
+    // and could erase a real 0.18→0.2 diff entirely via the no-op filter below.
+    let s = v;
     if (!s.includes('(')) {
         const toks = s.split(' ');
         if (toks.length > 1 && new Set(toks).size === 1)
@@ -512,11 +514,48 @@ function regionHeading(regionPaths, findings) {
 // A "no value here" marker renders as an em dash; colours render as `#hex` so the
 // table cell shows GitHub's live swatch.
 const cell = (v) => (isNonValue(v) ? '—' : `\`${toHex(v)}\``);
+// Long values (gradients, data URIs) would swamp the table, but truncating each
+// side independently can show two IDENTICAL cells for a real diff: both
+// sides of a gradient rendered as the same rgba while the actual change — a
+// dropped `0px` stop — was elsewhere in the string. Instead, trim the shared
+// prefix/suffix and show each side's differing substring with a little context.
+const EXCERPT_AT = 64; // both sides at or under this → show whole values
+const EXCERPT_CTX = 12; // chars of shared context kept around the diff
+const EXCERPT_MAX = 96; // hard cap per excerpt; the diff itself may be huge
+export function excerptPair(before, after) {
+    if (before.length <= EXCERPT_AT && after.length <= EXCERPT_AT)
+        return [before, after];
+    let p = 0;
+    while (p < before.length && p < after.length && before[p] === after[p])
+        p++;
+    let s = 0;
+    const maxS = Math.min(before.length, after.length) - p;
+    while (s < maxS && before[before.length - 1 - s] === after[after.length - 1 - s])
+        s++;
+    const cut = (v) => {
+        const start = Math.max(0, p - EXCERPT_CTX);
+        let end = Math.min(v.length, v.length - s + EXCERPT_CTX);
+        if (end - start > EXCERPT_MAX)
+            end = start + EXCERPT_MAX;
+        return (start > 0 ? '…' : '') + v.slice(start, end) + (end < v.length ? '…' : '');
+    };
+    return [cut(before), cut(after)];
+}
+/** Before/After cells as a pair, so long values excerpt around their actual diff. */
+function cellPair(before, after) {
+    if (isNonValue(before) || isNonValue(after))
+        return [cell(before), cell(after)];
+    const [b, a] = excerptPair(before, after);
+    return [`\`${toHex(b)}\``, `\`${toHex(a)}\``];
+}
 function beforeAfterTable(rows) {
     return [
         '| Property | Before | After |',
         '| --- | --- | --- |',
-        ...rows.map((r) => `| \`${r.prop}\` | ${cell(r.before)} | ${cell(r.after)} |`),
+        ...rows.map((r) => {
+            const [b, a] = cellPair(r.before, r.after);
+            return `| \`${r.prop}\` | ${b} | ${a} |`;
+        }),
     ];
 }
 // A brand-new element has no meaningful "before", so its resting style renders
@@ -546,10 +585,12 @@ function styleSection(styles, added) {
 function statesSection(states, added) {
     const rows = [];
     for (const st of states)
-        for (const c of summarizeProps(st.props))
+        for (const c of summarizeProps(st.props)) {
+            const [b, a] = cellPair(c.before, c.after);
             rows.push(added
                 ? `| \`:${st.state}\` | \`${c.prop}\` | ${cell(c.after)} |`
-                : `| \`:${st.state}\` | \`${c.prop}\` | ${cell(c.before)} → ${cell(c.after)} |`);
+                : `| \`:${st.state}\` | \`${c.prop}\` | ${b} → ${a} |`);
+        }
     if (!rows.length)
         return [];
     return [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styleproof",
-  "version": "3.4.0",
+  "version": "3.5.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",