styleproof 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -7,6 +7,16 @@ this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+## [1.3.1]
+
+### Changed
+
+- The before/after composite no longer draws coloured accent strips (grey for
+  before, blue for after) above each crop. They were a font-free before/after
+  cue, but a strip that differs between the two sides reads as a _second_ change
+  in the pair. Now the only thing that differs across the composite is the actual
+  change; before/after stays conveyed by position (left = before) and the caption.
+
 ## [1.3.0]
 
 Clearer reports: one section per screenshot.

package/README.md

@@ -18,7 +18,32 @@ On every PR, StyleProof captures a `StyleMap` from the HEAD and from the base br
 - An **approval checkbox per change**, driving a `StyleProof` commit status: red until every change is signed off, green when there are none.
 - No committed baseline to maintain — the diff is HEAD-vs-base, so the report is _exactly what this PR changes_.
 
-A second mode certifies a refactor changed _nothing_: any diff fails the job (use it for CSS-to-Tailwind migrations, design-system swaps, build-tooling changes).
+## What a report looks like
+
+One change — the hero CTA recoloured cyan → amber — posts as a single section: a side-by-side before/after cropped screenshot, a one-line summary, then the exact property change folded under a toggle.
+
+![A StyleProof report: the CTA button before (cyan) and after (amber), side by side](docs/demo-composite.png)
+
+As it renders in the PR comment (colours become live swatches; the full table sits inside the toggle):
+
+```text
+### `a.btn-solid` · 1 element restyled
+_landing @ 1280_
+
+`background-color` `rgb(95, 202, 219)` → `rgb(245, 158, 11)`
+
+▾ Show the property change
+   | Property         | Before            | After             |
+   | background-color | rgb(95, 202, 219) | rgb(245, 158, 11) |
+```
+
+## Works with any styling system
+
+StyleProof reads the browser's **computed styles** — the values it actually resolves — never your source CSS. Tailwind, CSS Modules, styled-components, Sass, vanilla CSS, inline styles: all produce the same computed output, and that's what it diffs. Elements are keyed by **DOM structure, not class name**, so a refactor that rewrites every `class` still lines up element-for-element.
+
+## Certify a refactor
+
+The same engine has a second mode that proves a change touched _nothing_ visual: with `fail-on-diff: true`, any difference at all fails the job. It's the job StyleProof was born for — certifying a CSS-to-Tailwind migration rendered byte-for-byte identical. Reach for it on any change whose whole promise is "the output is unchanged": a utility-class migration, a design-system swap, a dependency or build-tooling bump. Zero diff is the contract; one drifting longhand is a regression to investigate, not a change to approve.
 
 ## Install
 

package/dist/report.js

@@ -80,28 +80,26 @@ function fillRect(png, x, y, w, h, [r, g, b]) {
     }
 }
 /**
- * One labelled before|after image: the two equal-size crops on a dark canvas,
- * a divider between them, and a top accent bar per side (grey = before,
- * blue = after) as a font-free before/after cue. Left is always before.
+ * One before|after image: the two equal-size crops on a dark canvas with a
+ * neutral divider between them. Left is always before; before/after is labelled
+ * by the caption under the image. The divider is identical on both sides, so the
+ * ONLY thing that differs across the pair is the actual change — no extra chrome
+ * (e.g. a coloured accent strip) that reads as a second diff.
  */
 function compositePair(before, after) {
     const PAD = 20;
     const GAP = 28;
-    const BAR = 6; // accent strip height
     const w = Math.max(before.width, after.width);
     const h = Math.max(before.height, after.height);
     const width = PAD + w + GAP + w + PAD;
-    const height = PAD + BAR + h + PAD;
+    const height = PAD + h + PAD;
     const canvas = new PNG({ width, height });
     fillRect(canvas, 0, 0, width, height, [13, 17, 23]); // GitHub dark
     const leftX = PAD;
     const rightX = PAD + w + GAP;
-    const top = PAD + BAR;
-    fillRect(canvas, leftX, PAD, w, BAR, [110, 118, 129]); // before: grey
-    fillRect(canvas, rightX, PAD, w, BAR, [88, 166, 255]); // after: blue
-    PNG.bitblt(before, canvas, 0, 0, before.width, before.height, leftX, top);
-    PNG.bitblt(after, canvas, 0, 0, after.width, after.height, rightX, top);
-    fillRect(canvas, PAD + w + GAP / 2 - 1, PAD, 2, BAR + h, [48, 54, 61]); // divider
+    PNG.bitblt(before, canvas, 0, 0, before.width, before.height, leftX, PAD);
+    PNG.bitblt(after, canvas, 0, 0, after.width, after.height, rightX, PAD);
+    fillRect(canvas, PAD + w + GAP / 2 - 1, PAD, 2, h, [48, 54, 61]); // divider
     return canvas;
 }
 function readPng(file) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "styleproof",
-  "version": "1.3.0",
-  "description": "Certify CSS refactors with the browser's computed styles: capture every resolved longhand, pseudo-element, and forced hover/focus/active state, then diff before against after.",
+  "version": "1.3.1",
+  "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",
     "css",