styleproof 1.8.0 → 1.8.1

package/CHANGELOG.md

@@ -7,6 +7,15 @@ this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+## [1.8.1]
+
+### Fixed
+
+- The crop annotation now boxes the **innermost** changed elements (the added
+  avatars, the restyled cards) instead of the container the crop anchors on —
+  whose box just traced the whole frame and told you nothing. An element present
+  on only one side (added/removed) is boxed only there.
+
 ## [1.8.0]
 
 The crop now shows you where to look — without painting over the UI.

package/dist/report.js

@@ -20,10 +20,17 @@ const union = (a, b) => {
 };
 const intersects = (a, b) => a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
 const visible = (b) => !!b && b.w > 0 && b.h > 0;
-/** Outermost changed paths: drop any path that has a changed strict ancestor. */
+/** Outermost changed paths: drop any path that has a changed strict ancestor.
+ *  Used to ANCHOR a crop (zoom to the whole changed region, not a leaf). */
 function outermost(paths) {
     return paths.filter((p) => !paths.some((q) => q !== p && p.startsWith(q + ' > ')));
 }
+/** Innermost changed paths: drop any path that has a changed strict descendant.
+ *  Used to ANNOTATE — box the leaf elements that actually changed (the added
+ *  avatars, the restyled cards), not their container, whose box ≈ the whole crop. */
+function innermost(paths) {
+    return paths.filter((p) => !paths.some((q) => q !== p && q.startsWith(p + ' > ')));
+}
 /** Headline counts with the zeros dropped — `0 state-delta difference(s)` is noise. */
 function changeCountLabel(shown) {
     const parts = [];
@@ -748,10 +755,13 @@ export function generateStyleMapReport(opts) {
                 const after = cropPng(pngB, cropBox, w, h);
                 const composite = compositePair(before.png, after.png);
                 writePng(path.join(outDir, `${stem}-composite.png`), composite);
-                // Annotated twin: outline each changed element on both sides, so the eye
-                // lands on what the bullet named. The clean image stays the default.
-                const rectsA = g.paths.map((p) => mapA.elements[p]?.rect).filter((r) => !!r);
-                const rectsB = g.paths.map((p) => mapB.elements[p]?.rect).filter((r) => !!r);
+                // Annotated twin: outline the LEAF changed elements (the added avatars, the
+                // restyled 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 annotated = compositePair(annotateCrop(before, rectsA), annotateCrop(after, rectsB));
                 writePng(path.join(outDir, `${stem}-annotated.png`), annotated);
                 images = { composite: `${stem}-composite.png`, annotated: `${stem}-annotated.png` };

package/package.json

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