afterbefore 0.1.2 → 0.1.3

package/README.md

@@ -3,12 +3,125 @@
 [![npm version](https://img.shields.io/npm/v/afterbefore?color=blue)](https://www.npmjs.com/package/afterbefore)
 [![npm downloads](https://img.shields.io/npm/dm/afterbefore?color=green)](https://www.npmjs.com/package/afterbefore)
 
-Automatic before/after screenshot capture for Next.js pull requests. The git diff is the config.
+Automatic before/after screenshot capture for Next.js pull requests.
+
+## The idea
+
+Other visual regression tools make you list which URLs to capture. afterbefore reads your git diff instead, builds an import graph, and figures out which routes were affected by your changes. You change a button component, it finds every page that uses that button, and captures those. No URL lists, no config.
+
+## Quick start
+
+Run it from a feature branch in any Next.js app router project:
 
 ```bash
 npx afterbefore
 ```
 
+It spins up two dev servers (your branch and the base branch), captures screenshots of affected routes, diffs them pixel by pixel, and generates an HTML report with interactive before/after sliders.
+
+Output lands in `.afterbefore/`:
+
+```
+.afterbefore/
+└── feature-branch_2026-02-26/
+    ├── index.html          # visual report
+    ├── summary.md          # markdown table
+    ├── about-before.png
+    ├── about-after.png
+    ├── about-diff.png
+    ├── about-compare.png
+    └── about-slider.html   # interactive slider
+```
+
+Open the report automatically:
+
+```bash
+npx afterbefore --open
+```
+
+## How it works
+
+1. Reads `git diff` to find changed files
+2. Classifies each file (page, component, layout, style, utility, config)
+3. Builds an import graph by parsing ES module imports across your codebase
+4. Walks the graph backward from each changed file to find which `page.tsx` files are affected
+5. Creates a git worktree for the base branch and runs `npm install`
+6. Starts two Next.js dev servers in parallel (base branch + current branch)
+7. Captures full-page screenshots of each affected route on both servers using Playwright
+8. Compares screenshots with pixelmatch and generates diff images
+9. Builds an HTML report with side-by-side comparisons and interactive sliders
+
+Layouts work the same way. Edit `app/dashboard/layout.tsx` and it captures every page under `app/dashboard/`.
+
+If only global files changed (like `globals.css` or `tailwind.config.ts`) and no specific routes were found, it captures all pages.
+
+## Options
+
+| Flag | Default | Description |
+|------|---------|-------------|
+| `--base <ref>` | `main` | Base branch to compare against |
+| `--output <dir>` | `.afterbefore` | Output directory |
+| `--post` | `false` | Post results as a GitHub PR comment |
+| `--threshold <percent>` | `0.1` | Ignore diffs below this percentage |
+| `--max-routes <count>` | `6` | Cap the number of routes captured (0 = unlimited) |
+| `--open` | `false` | Open the HTML report in your browser |
+| `--width <pixels>` | `1280` | Viewport width |
+| `--height <pixels>` | `720` | Viewport height |
+| `--device <name>` | — | Playwright device, e.g. `"iPhone 14"` |
+| `--delay <ms>` | `0` | Extra wait time after page load |
+| `--no-auto-tabs` | — | Disable auto-detection of ARIA tab states |
+| `--max-tabs <count>` | `5` | Max tabs to capture per route |
+| `--auto-sections` | `false` | Capture heading-labeled sections individually |
+| `--max-sections <count>` | `10` | Max sections per page state |
+
+## Post to PR
+
+The `--post` flag uses the GitHub CLI (`gh`) to add a comment to your open pull request with a markdown summary of the results. On subsequent runs, it updates the same comment instead of creating a new one.
+
+```bash
+npx afterbefore --post
+```
+
+You need `gh` installed and authenticated.
+
+## Auto-detection
+
+**Tabs.** If a page has ARIA tab controls (`role="tablist"` and `role="tab"`), afterbefore clicks through each tab and captures the state. This is on by default. Disable it with `--no-auto-tabs`.
+
+**Sections.** With `--auto-sections`, pages with 3+ headings get captured section by section. Each heading-labeled section is matched by text between before and after, so you can see exactly which section changed.
+
+## Configuration file
+
+For pages that need interaction before capture (opening a modal, clicking a dropdown), create an `afterbefore.config.json`:
+
+```json
+{
+  "scenarios": {
+    "/design-system": [
+      {
+        "name": "components-tab",
+        "actions": [
+          { "click": ".tab-components" },
+          { "wait": 300 }
+        ]
+      }
+    ]
+  }
+}
+```
+
+Actions run in order before the screenshot is taken. Supported actions: `click` (CSS selector), `scroll` (CSS selector), `wait` (milliseconds).
+
+When scenarios are defined for a route, auto-tabs are disabled for that route.
+
+## Requirements
+
+- Next.js with the app router (`app/` directory)
+- Git
+- Node.js >= 18
+
+Playwright's Chromium browser is installed automatically on first run if it's missing.
+
 ## License
 
 Licensed under [PolyForm Shield 1.0.0](https://polyformproject.org/licenses/shield/1.0.0)

package/dist/cli.js

@@ -1958,7 +1958,7 @@ async function runPipeline(options) {
   const outputDir = resolve4(cwd, output, sessionName);
   const startTime = Date.now();
   try {
-    const version = true ? "0.1.2" : "dev";
+    const version = true ? "0.1.3" : "dev";
     console.log(`
 afterbefore v${version} \xB7 Comparing against ${base}
 `);
@@ -2092,7 +2092,7 @@ afterbefore v${version} \xB7 Comparing against ${base}
 var program = new Command();
 program.name("afterbefore").description(
   "Automatic before/after screenshot capture for PRs. Git diff is the config."
-).version("0.1.2").option("--base <ref>", "Base branch or ref to compare against", "main").option("--output <dir>", "Output directory for screenshots", ".afterbefore").option("--post", "Post results as a PR comment via gh CLI", false).option(
+).version("0.1.3").option("--base <ref>", "Base branch or ref to compare against", "main").option("--output <dir>", "Output directory for screenshots", ".afterbefore").option("--post", "Post results as a PR comment via gh CLI", false).option(
   "--threshold <percent>",
   "Diff threshold percentage (changes below this are ignored)",
   "0.1"

package/dist/index.js

@@ -1945,7 +1945,7 @@ async function runPipeline(options) {
   const outputDir = resolve4(cwd, output, sessionName);
   const startTime = Date.now();
   try {
-    const version = true ? "0.1.2" : "dev";
+    const version = true ? "0.1.3" : "dev";
     console.log(`
 afterbefore v${version} \xB7 Comparing against ${base}
 `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "afterbefore",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Automatic before/after screenshot capture for PRs. Git diff is the config.",
   "type": "module",
   "bin": {
@@ -22,7 +22,6 @@
     "dev": "tsup --watch",
     "test": "vitest run",
     "test:watch": "vitest",
-
     "typecheck": "tsc --noEmit",
     "lint": "tsc --noEmit",
     "prepare": "tsup"