styleproof 3.8.0 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -7,6 +7,29 @@ this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [3.9.0] - 2026-07-05
11
+
12
+ ### Added
13
+
14
+ - **Coverage provenance — a green now states its completeness basis.** Source-of-truth
15
+ step 1: a green from `styleproof-diff` used to silently imply completeness it couldn't
16
+ back up (it certified only the surfaces it happened to capture). Now the capture writes
17
+ a coverage ledger (`styleproof-coverage.json`) into the bundle — the declared
18
+ `expected` registry, or `null` — and `styleproof-diff` reads it and:
19
+ - **blocks (exit 1) when a registered surface was never captured**, even if the style
20
+ diff is empty — the one failure the gate couldn't catch before (a green over a
21
+ surface it never looked at). This checks the surfaces actually captured, so a
22
+ declared surface whose capture _failed_ is caught here, where the suite guard (which
23
+ checks the declared list) cannot see it;
24
+ - prints the basis on every run: `✓ coverage complete — all N registered surface(s)
25
+ captured`, `✗ coverage INCOMPLETE — …`, or `⚠ completeness NOT asserted` (no
26
+ registry — certifies only the captured surfaces, so declare `expected` to certify
27
+ completeness). A crawl records `expected: null` honestly (it captures what the nav
28
+ links to, not proven-every-route).
29
+ - `isMapFile` / `RESERVED_BUNDLE_FILES` (map-store) — one place that knows which bundle
30
+ files are surface maps vs metadata sidecars, so a new sidecar can't read as a phantom
31
+ "new surface".
32
+
10
33
  ## [3.8.0] - 2026-07-05
11
34
 
12
35
  ### Added
@@ -41,6 +41,8 @@ import {
41
41
  } from '../dist/cli-errors.js';
42
42
  import { loadStyleMap } from '../dist/capture.js';
43
43
  import { auditRunInventory } from '../dist/inventory.js';
44
+ import { auditCoverage, COVERAGE_LEDGER } from '../dist/coverage.js';
45
+ import { isMapFile } from '../dist/map-store.js';
44
46
 
45
47
  const COMMAND = path.basename(process.argv[1] ?? 'styleproof-diff').replace(/\.mjs$/, '');
46
48
 
@@ -55,7 +57,7 @@ const COMMAND = path.basename(process.argv[1] ?? 'styleproof-diff').replace(/\.m
55
57
  function dirInventories(dir) {
56
58
  return fs
57
59
  .readdirSync(dir)
58
- .filter((f) => f !== 'styleproof-manifest.json' && /\.json(\.gz)?$/.test(f))
60
+ .filter(isMapFile)
59
61
  .map((f) => loadStyleMap(path.join(dir, f)))
60
62
  .map((m) => (m.inventory ? { inventory: m.inventory } : {}));
61
63
  }
@@ -110,6 +112,59 @@ function printInventoryAudit(audit) {
110
112
  return unexplained.length;
111
113
  }
112
114
 
115
+ // ── coverage provenance (the completeness basis of a green) ──────────────────────
116
+ // The head bundle carries a coverage ledger (the declared registry). The gate audits
117
+ // the ACTUALLY-captured surfaces against it, so "clean" states its basis — complete vs
118
+ // the registry, or explicitly "not asserted" — instead of silently implying completeness.
119
+
120
+ // Surface keys captured in a dir (file `<key>@<width>.json[.gz]` → `<key>`, deduped).
121
+ function capturedSurfaceKeys(dir) {
122
+ return [
123
+ ...new Set(
124
+ fs
125
+ .readdirSync(dir)
126
+ .filter(isMapFile)
127
+ .map((f) => f.replace(/@\d+\.json(\.gz)?$/, '')),
128
+ ),
129
+ ];
130
+ }
131
+
132
+ function readCoverageVerdict(dir) {
133
+ let ledger = null;
134
+ const p = path.join(dir, COVERAGE_LEDGER);
135
+ if (fs.existsSync(p)) {
136
+ try {
137
+ ledger = JSON.parse(fs.readFileSync(p, 'utf8'));
138
+ } catch {
139
+ /* a corrupt ledger reads as no registry → "not asserted", never a false green */
140
+ }
141
+ }
142
+ return auditCoverage(capturedSurfaceKeys(dir), ledger);
143
+ }
144
+
145
+ // Print the completeness verdict; return true if it BLOCKS (a registered surface is missing).
146
+ function printCoverageVerdict(v) {
147
+ if (v.basis === 'complete') {
148
+ console.log(`\n✓ coverage complete — all ${v.registrySize} registered surface(s) captured`);
149
+ return false;
150
+ }
151
+ if (v.basis === 'unasserted') {
152
+ console.log(
153
+ '\n⚠ completeness NOT asserted — the spec declared no `expected` registry, so this certifies only the\n' +
154
+ ' surfaces that were captured, not that they are all of them. Declare `expected` to certify completeness.',
155
+ );
156
+ return false;
157
+ }
158
+ console.log(
159
+ `\n✗ coverage INCOMPLETE — ${v.uncovered.length} registered surface(s) not captured (of ${v.registrySize}):`,
160
+ );
161
+ for (const k of v.uncovered) console.log(` ✗ missing: ${k}`);
162
+ console.log(
163
+ " → capture each (or move it to `exclude` with a reason). A green can't certify what was never captured.",
164
+ );
165
+ return true;
166
+ }
167
+
113
168
  const HELP = `${COMMAND} — certify a CSS refactor by diffing two computed-style map captures
114
169
 
115
170
  usage: ${COMMAND} [baseRef] [options]
@@ -201,12 +256,15 @@ if (args.length <= 1) {
201
256
 
202
257
  let result;
203
258
  let inventoryAudit = null;
259
+ let coverageVerdict = null;
204
260
  try {
205
261
  assertCompatibleMapDirs(dirA, dirB);
206
262
  result = diffStyleMapDirs(dirA, dirB);
207
- // Read inventory here, while the (possibly cached/restored) dirs still exist —
208
- // the finally below deletes them in cached-map mode.
263
+ // Read inventory + coverage here, while the (possibly cached/restored) dirs still
264
+ // exist — the finally below deletes them in cached-map mode. Coverage is the HEAD
265
+ // bundle's completeness basis.
209
266
  inventoryAudit = readInventoryAudit(dirA, dirB);
267
+ coverageVerdict = readCoverageVerdict(dirB);
210
268
  } catch (e) {
211
269
  console.error(e.message);
212
270
  process.exit(2);
@@ -243,8 +301,10 @@ for (const sd of surfaces) {
243
301
  }
244
302
 
245
303
  const invRemovals = printInventoryAudit(inventoryAudit);
304
+ const coverageFails = printCoverageVerdict(coverageVerdict);
246
305
 
247
- if (jsonOut) fs.writeFileSync(jsonOut, JSON.stringify({ counts, surfaces, compared }, null, 2));
306
+ if (jsonOut)
307
+ fs.writeFileSync(jsonOut, JSON.stringify({ counts, surfaces, compared, coverage: coverageVerdict }, null, 2));
248
308
 
249
309
  const total = counts.dom + counts.style + counts.state;
250
310
  const newSurfaces = surfaces.filter((s) => s.missing).length;
@@ -252,13 +312,15 @@ const newSurfaces = surfaces.filter((s) => s.missing).length;
252
312
  const surfaceCount = surfaces.length;
253
313
  const newNote = newSurfaces ? ` (+${newSurfaces} new surface(s) with no baseline)` : '';
254
314
  const invNote = invRemovals ? ` + ${invRemovals} unacknowledged inventory removal(s)` : '';
315
+ const covNote = coverageFails ? ` + ${coverageVerdict.uncovered.length} uncaptured registered surface(s)` : '';
316
+ const clean = total === 0 && invRemovals === 0 && !coverageFails;
255
317
  console.log(
256
- total === 0 && invRemovals === 0
318
+ clean
257
319
  ? newSurfaces === 0
258
320
  ? `\n✓ 0 changed surfaces across ${compared} captured surface(s): every computed style, pseudo-element, and hover/focus/active state matches`
259
321
  : `\nℹ ${newSurfaces} new surface(s) captured with no baseline to compare — review before baselining`
260
- : `\n✗ ${counts.dom} DOM change(s), ${counts.style} computed-style difference(s), ${counts.state} state-delta difference(s) across ${surfaceCount} surfaces${newNote}${invNote}`,
322
+ : `\n✗ ${counts.dom} DOM change(s), ${counts.style} computed-style difference(s), ${counts.state} state-delta difference(s) across ${surfaceCount} surfaces${newNote}${invNote}${covNote}`,
261
323
  );
262
- // 0 = identical, 1 = reviewable differences (incl. unacknowledged inventory
263
- // removals), 3 = only new surfaces (no baseline). 2 reserved for usage/capture errors.
264
- process.exit(total > 0 || invRemovals > 0 ? 1 : newSurfaces > 0 ? 3 : 0);
324
+ // 0 = identical, 1 = reviewable differences (incl. unacknowledged inventory removals or
325
+ // an incomplete coverage registry), 3 = only new surfaces (no baseline). 2 = usage/capture error.
326
+ process.exit(total > 0 || invRemovals > 0 || coverageFails ? 1 : newSurfaces > 0 ? 3 : 0);
@@ -34,3 +34,26 @@ export type CoverageGaps = {
34
34
  * dir), and it's exported so a consumer can assert coverage however it likes.
35
35
  */
36
36
  export declare function coverageGaps(capturedKeys: Iterable<string>, expected: Iterable<string>, exclude?: Record<string, string>): CoverageGaps;
37
+ /** Bundled next to the maps, so the completeness basis travels with the capture. */
38
+ export declare const COVERAGE_LEDGER = "styleproof-coverage.json";
39
+ export type CoverageLedger = {
40
+ version: 1;
41
+ /** The declared surface registry, or null when the spec asserted none. */
42
+ expected: string[] | null;
43
+ /** Reviewed opt-outs (`key → reason`). */
44
+ exclude: Record<string, string>;
45
+ };
46
+ export type CoverageVerdict = {
47
+ /** `complete` — every registered surface captured; `incomplete` — a registered
48
+ * surface is missing (gates); `unasserted` — no registry, so a green can only
49
+ * certify the captured surfaces, not that they are all of them. */
50
+ basis: 'complete' | 'incomplete' | 'unasserted';
51
+ /** Size of the declared registry, or null when unasserted. */
52
+ registrySize: number | null;
53
+ /** Registered surfaces neither captured nor excluded — the coverage hole. */
54
+ uncovered: string[];
55
+ /** `exclude` entries no longer in `expected` — a rotted opt-out. */
56
+ staleExclusions: string[];
57
+ };
58
+ /** The gate's completeness call: audit what was actually captured against the ledger. */
59
+ export declare function auditCoverage(capturedKeys: Iterable<string>, ledger: CoverageLedger | null): CoverageVerdict;
package/dist/coverage.js CHANGED
@@ -34,3 +34,26 @@ export function coverageGaps(capturedKeys, expected, exclude = {}) {
34
34
  const staleExclusions = Object.keys(exclude).filter((k) => !expectedSet.has(k));
35
35
  return { uncovered, staleExclusions };
36
36
  }
37
+ // ── coverage provenance (the gate-level completeness assertion) ──────────────────
38
+ // The guard above runs in the app's SUITE. That fails a build when the spec forgets a
39
+ // route, but the GATE (styleproof-diff, reading captured maps) never learns whether
40
+ // coverage was asserted at all — so a green silently implies a completeness it can't
41
+ // back up. The capture writes this ledger into the bundle; the gate reads it and
42
+ // certifies "clean" only against a STATED basis, enforcing the registry against the
43
+ // maps actually captured (a declared surface whose capture FAILED is caught here, where
44
+ // the suite guard — which checks the declared list — cannot see it).
45
+ /** Bundled next to the maps, so the completeness basis travels with the capture. */
46
+ export const COVERAGE_LEDGER = 'styleproof-coverage.json';
47
+ /** The gate's completeness call: audit what was actually captured against the ledger. */
48
+ export function auditCoverage(capturedKeys, ledger) {
49
+ if (!ledger || ledger.expected == null) {
50
+ return { basis: 'unasserted', registrySize: null, uncovered: [], staleExclusions: [] };
51
+ }
52
+ const { uncovered, staleExclusions } = coverageGaps(capturedKeys, ledger.expected, ledger.exclude);
53
+ return {
54
+ basis: uncovered.length ? 'incomplete' : 'complete',
55
+ registrySize: ledger.expected.length,
56
+ uncovered,
57
+ staleExclusions,
58
+ };
59
+ }
package/dist/diff.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import fs from 'node:fs';
2
2
  import path from 'node:path';
3
3
  import { loadStyleMap, isUnder } from './capture.js';
4
+ import { isMapFile } from './map-store.js';
4
5
  function diffProps(propsA, propsB, fallbackA, fallbackB, unsetA, unsetB) {
5
6
  const changed = [];
6
7
  for (const prop of new Set([...Object.keys(propsA), ...Object.keys(propsB)])) {
@@ -173,7 +174,7 @@ function tallyCounts(findings, counts) {
173
174
  function indexDir(dir) {
174
175
  return Object.fromEntries(fs
175
176
  .readdirSync(dir)
176
- .filter((f) => f !== 'styleproof-manifest.json' && /\.json(\.gz)?$/.test(f))
177
+ .filter(isMapFile)
177
178
  .map((f) => [f.replace(/\.json(\.gz)?$/, ''), path.join(dir, f)]));
178
179
  }
179
180
  /** Diff every same-named capture between two directories. `volatile` is the
@@ -3,6 +3,12 @@ export declare const DEFAULT_MAP_LABEL = "current";
3
3
  export declare const DEFAULT_MAP_STORE_BRANCH = "styleproof-maps";
4
4
  export declare const DEFAULT_REMOTE = "origin";
5
5
  export declare const MAP_MANIFEST = "styleproof-manifest.json";
6
+ /** Bundle files that sit alongside the maps but are NOT surfaces (manifest, coverage
7
+ * ledger, and any future sidecar). Every place that enumerates surface maps must skip
8
+ * these, or a sidecar reads as a phantom "new surface". */
9
+ export declare const RESERVED_BUNDLE_FILES: ReadonlySet<string>;
10
+ /** True for a captured surface map (`<key>@<width>.json[.gz]`), false for metadata. */
11
+ export declare function isMapFile(name: string): boolean;
6
12
  export declare class MapStoreError extends Error {
7
13
  }
8
14
  export interface MapManifest {
package/dist/map-store.js CHANGED
@@ -5,12 +5,21 @@ import { createRequire } from 'node:module';
5
5
  import os from 'node:os';
6
6
  import path from 'node:path';
7
7
  import { inferBaseRef } from './gitref.js';
8
+ import { COVERAGE_LEDGER } from './coverage.js';
8
9
  export const DEFAULT_MAP_DIR = '.styleproof/maps';
9
10
  export const DEFAULT_MAP_LABEL = 'current';
10
11
  export const DEFAULT_MAP_STORE_BRANCH = 'styleproof-maps';
11
12
  export const DEFAULT_REMOTE = 'origin';
12
13
  export const MAP_MANIFEST = 'styleproof-manifest.json';
13
14
  const GENERATED_DIRTY_ALLOWLIST = new Set(['next-env.d.ts']);
15
+ /** Bundle files that sit alongside the maps but are NOT surfaces (manifest, coverage
16
+ * ledger, and any future sidecar). Every place that enumerates surface maps must skip
17
+ * these, or a sidecar reads as a phantom "new surface". */
18
+ export const RESERVED_BUNDLE_FILES = new Set([MAP_MANIFEST, COVERAGE_LEDGER]);
19
+ /** True for a captured surface map (`<key>@<width>.json[.gz]`), false for metadata. */
20
+ export function isMapFile(name) {
21
+ return !RESERVED_BUNDLE_FILES.has(name) && /\.json(\.gz)?$/.test(name);
22
+ }
14
23
  export class MapStoreError extends Error {
15
24
  }
16
25
  function runGit(cwd, args, maxBuffer = 1 << 28) {
package/dist/report.js CHANGED
@@ -2,6 +2,7 @@ import fs from 'node:fs';
2
2
  import path from 'node:path';
3
3
  import { PNG } from 'pngjs';
4
4
  import { loadStyleMap } from './capture.js';
5
+ import { isMapFile } from './map-store.js';
5
6
  import { diffStyleMapDirs, diffContentDirs, } from './diff.js';
6
7
  import { describeChange, tokenIndex, toHex, trackCount } from './describe.js';
7
8
  // Re-export the plain-English summariser so consumers (and tests) reach it
@@ -443,9 +444,7 @@ function liveCandidateLabel(candidate) {
443
444
  return `${label} (${candidate.reason})`;
444
445
  }
445
446
  function captureFiles(dir) {
446
- return fs.existsSync(dir)
447
- ? fs.readdirSync(dir).filter((f) => f !== 'styleproof-manifest.json' && /\.json(\.gz)?$/.test(f))
448
- : [];
447
+ return fs.existsSync(dir) ? fs.readdirSync(dir).filter(isMapFile) : [];
449
448
  }
450
449
  function collectLiveCandidateLabels(beforeDir, afterDir) {
451
450
  const seen = new Set();
package/dist/runner.d.ts CHANGED
@@ -222,19 +222,6 @@ export declare function resolveBaseDir(baseDir: string | undefined, env?: string
222
222
  export declare function resolveScreenshots(screenshots: boolean | undefined, env?: string | undefined): boolean;
223
223
  /** The capture settings every capturer shares (everything bar the surface set). */
224
224
  type CaptureConfig = Omit<DefineOptions, 'surfaces' | 'expected' | 'exclude'>;
225
- /**
226
- * Generate one Playwright test per surface × width that captures the style
227
- * map to `<baseDir>/<dir>/<key>@<width>.json.gz`. Captures are made
228
- * deterministic with no per-repo fixtures: the baseline run records each
229
- * surface's data responses to a HAR, and the comparison run replays them (set
230
- * STYLEPROOF_REPLAY_FROM=<baseline dir> on the comparison capture), while the
231
- * clock is frozen so time-derived styling is stable.
232
- *
233
- * ```ts
234
- * // styleproof.spec.ts
235
- * defineStyleMapCapture({ surfaces: SURFACES, dir: process.env.STYLEMAP_DIR });
236
- * ```
237
- */
238
225
  export declare function defineStyleMapCapture(options: DefineOptions): void;
239
226
  /** Options for {@link defineCrawlCapture}: where to crawl, how to filter/key the
240
227
  * links, and the viewport sweep — plus the shared capture settings. */
package/dist/runner.js CHANGED
@@ -3,7 +3,7 @@ import fs from 'node:fs';
3
3
  import path from 'node:path';
4
4
  import { captureStyleMap, saveStyleMap, trackInflightRequests, } from './capture.js';
5
5
  import { diffStyleMaps } from './diff.js';
6
- import { coverageGaps } from './coverage.js';
6
+ import { coverageGaps, COVERAGE_LEDGER } from './coverage.js';
7
7
  import { detectViewportWidths } from './breakpoints.js';
8
8
  import { selectCrawlLinks } from './crawl.js';
9
9
  /** One-line description of the first drift finding, for the self-check error. */
@@ -452,6 +452,20 @@ function resolveSettings(c) {
452
452
  * defineStyleMapCapture({ surfaces: SURFACES, dir: process.env.STYLEMAP_DIR });
453
453
  * ```
454
454
  */
455
+ /**
456
+ * Emit a test that records the coverage ledger into the capture bundle, so the GATE
457
+ * (styleproof-diff) can state its completeness basis — not just the app's own suite.
458
+ * `expected: null` records that the spec declared no registry, so a green can only
459
+ * certify the captured surfaces. Runs on a capture run (dir set) only.
460
+ */
461
+ function writeCoverageLedgerTest(baseDir, dir, expected, exclude) {
462
+ test('styleproof coverage ledger', () => {
463
+ const outDir = path.join(baseDir, dir);
464
+ fs.mkdirSync(outDir, { recursive: true });
465
+ const ledger = { version: 1, expected, exclude };
466
+ fs.writeFileSync(path.join(outDir, COVERAGE_LEDGER), JSON.stringify(ledger, null, 2));
467
+ });
468
+ }
455
469
  export function defineStyleMapCapture(options) {
456
470
  const { surfaces, expected, exclude = {}, dir } = options;
457
471
  const settings = resolveSettings(options);
@@ -475,6 +489,8 @@ export function defineStyleMapCapture(options) {
475
489
  }
476
490
  test.describe('styleproof capture', () => {
477
491
  test.skip(!dir, 'set STYLEMAP_DIR=<label> to capture computed-style maps');
492
+ if (dir)
493
+ writeCoverageLedgerTest(settings.baseDir, dir, expected ?? null, exclude);
478
494
  for (const surface of captureSurfaces) {
479
495
  if (surface.widths && surface.widths.length > 0) {
480
496
  // Explicit widths: one parallelizable test per surface × width.
@@ -525,6 +541,11 @@ export function defineCrawlCapture(options) {
525
541
  // that styleproof-map uses to select capture tests picks up crawl specs too.
526
542
  test.describe('styleproof capture (crawl)', () => {
527
543
  test.skip(!dir, 'set STYLEMAP_DIR=<label> to capture computed-style maps');
544
+ // A crawl DISCOVERS its surfaces from the nav — it has no registry to check against,
545
+ // so it records `expected: null` (completeness honestly "not asserted": the crawl
546
+ // captures what the nav links to, and can't prove that's every route in the app).
547
+ if (dir)
548
+ writeCoverageLedgerTest(settings.baseDir, dir, null, {});
528
549
  test('discover surfaces by crawling links, then capture each', async ({ page }) => {
529
550
  // 1. Load the root and wait for its nav links to hydrate — an SPA renders them
530
551
  // client-side, so they aren't in the initial HTML.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "styleproof",
3
- "version": "3.8.0",
3
+ "version": "3.9.0",
4
4
  "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.",
5
5
  "keywords": [
6
6
  "playwright",