afterbefore 0.1.1 → 0.1.3

package/LICENSE

@@ -1,21 +1,143 @@
-MIT License
-
-Copyright (c) 2026 Kai Revicius
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+PolyForm Shield License 1.0.0
+
+<https://polyformproject.org/licenses/shield/1.0.0>
+
+Copyright (c) 2026 Paulius Kairevicius
+
+Acceptance
+
+In order to get any license under these terms, you must agree to them as
+both strict obligations and conditions to all your licenses.
+
+Copyright License
+
+The licensor grants you a copyright license for the software to do
+everything you might do with the software that would otherwise infringe
+the licensor's copyright in it for any permitted purpose. However, you
+may only distribute the software according to Distribution License and
+make changes or new works based on the software according to Changes and
+New Works License.
+
+Distribution License
+
+The licensor grants you an additional copyright license to distribute
+copies of the software. Your license to distribute covers distributing
+the software with changes and new works permitted by Changes and New
+Works License.
+
+Notices
+
+You must ensure that anyone who gets a copy of any part of the software
+from you also gets a copy of these terms or the URL for them above, as
+well as copies of any plain-text lines beginning with "Required Notice:"
+that the licensor provided with the software.
+
+Changes and New Works License
+
+The licensor grants you an additional copyright license to make changes
+and new works based on the software for any permitted purpose.
+
+Patent License
+
+The licensor grants you a patent license for the software that covers
+patent claims the licensor can license, or becomes able to license, that
+you would infringe by using the software.
+
+Noncompete
+
+Any purpose is a permitted purpose, except for providing any product
+that competes with the software or any product the licensor or any of
+its affiliates provides using the software.
+
+Competition
+
+Goods and services compete even when they provide functionality through
+different kinds of interfaces or for different technical platforms.
+Applications can compete with services, libraries with plugins,
+frameworks with development tools, and so on, even if they're written in
+different programming languages or for different computer architectures.
+Goods and services compete even when provided free of charge. If you
+market a product as a practical substitute for the software or another
+product, it definitely competes.
+
+New Products
+
+If you are using the software to provide a product that does not
+compete, but the licensor or any of its affiliates brings your product
+into competition by providing a new version of the software or another
+product using the software, you may continue using versions of the
+software available under these terms beforehand to provide your
+competing product, but not any later versions.
+
+Discontinued Products
+
+You may begin using the software to compete with a product or service
+that the licensor or any of its affiliates has stopped providing, unless
+the licensor includes a plain-text line beginning with "Licensor Line of
+Business:" with the software that mentions that line of business.
+
+Sales of Business
+
+If the licensor or any of its affiliates sells a line of business
+developing the software or using the software to provide a product, the
+buyer can also enforce Noncompete for that product.
+
+Fair Use
+
+You may have "fair use" rights for the software under the law. These
+terms do not limit them.
+
+No Other Rights
+
+These terms do not allow you to sublicense or transfer any of your
+licenses to anyone else, or prevent the licensor from granting licenses
+to anyone else. These terms do not imply any other licenses.
+
+Patent Defense
+
+If you make any written claim that the software infringes or contributes
+to infringement of any patent, your patent license for the software
+granted under these terms ends immediately. If your company makes such a
+claim, your patent license ends immediately for work on behalf of your
+company.
+
+Violations
+
+The first time you are notified in writing that you have violated any of
+these terms, or done anything with the software not covered by your
+licenses, your licenses can nonetheless continue if you come into full
+compliance with these terms, and take practical steps to correct past
+violations, within 32 days of receiving notice. Otherwise, all your
+licenses end immediately.
+
+No Liability
+
+As far as the law allows, the software comes as is, without any warranty
+or condition, and the licensor will not be liable to you for any damages
+arising out of these terms or the use or nature of the software, under
+any kind of legal claim.
+
+Definitions
+
+The licensor is the individual or entity offering these terms, and the
+software is the software the licensor makes available under these terms.
+
+A product can be a good or service, or a combination of them.
+
+You refers to the individual or entity agreeing to these terms.
+
+Your company is any legal entity, sole proprietorship, or other kind of
+organization that you work for, plus all its affiliates.
+
+Affiliates means the other organizations than an organization has
+control over, is under the control of, or is under common control with.
+
+Control means ownership of substantially all the assets of an entity, or
+the power to direct its management and policies by vote, contract, or
+otherwise. Control can be direct or indirect.
+
+Your licenses are all the licenses granted to you for the software under
+these terms.
+
+Use means anything you do with the software requiring one of your
+licenses.

package/README.md

@@ -1,141 +1,127 @@
 # afterbefore
 
-[![npm version](https://img.shields.io/npm/v/afterbefore)](https://www.npmjs.com/package/afterbefore)
-[![npm downloads](https://img.shields.io/npm/dm/afterbefore)](https://www.npmjs.com/package/afterbefore)
+[![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.
 
-Change code, run one command, and get a visual report of only impacted routes.
+## The idea
 
-```bash
-npx afterbefore
-```
+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.
 
-## What It Does
+## Quick start
 
-1. Reads changed files from `git diff` against a base ref
-2. Builds an import graph and finds affected `app/**/page.*` routes
-3. Handles layout/global style changes that are not direct imports
-4. Creates a temporary git worktree for the base ref
-5. Starts two Next.js dev servers (before + after)
-6. Captures screenshots with Playwright
-7. Computes pixel diffs with `pixelmatch`
-8. Generates:
-   - `index.html` visual report
-   - per-route slider pages for changed routes
-   - `summary.md` for PR comments
-9. Optionally posts/updates a GitHub PR comment (`--post`)
-
-## Installation
+Run it from a feature branch in any Next.js app router project:
 
 ```bash
-# npm
-npm install --save-dev afterbefore
+npx afterbefore
+```
 
-# from GitHub
-npm install --save-dev github:kairevicius/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.
 
-# run without installing
-npx afterbefore
+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
 ```
 
-## Usage
+Open the report automatically:
 
 ```bash
-# compare current branch vs main
-npx afterbefore
+npx afterbefore --open
+```
 
-# compare against a different base branch
-npx afterbefore --base develop
+## 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.
 
-# post/update comment on the open PR (requires gh auth)
+```bash
 npx afterbefore --post
 ```
 
-### CLI Options
+You need `gh` installed and authenticated.
 
-| Flag | Description | Default |
-|------|-------------|---------|
-| `--base <ref>` | Base branch or ref to compare against | `main` |
-| `--output <dir>` | Output directory root | `.afterbefore` |
-| `--post` | Post/update results as a PR comment via `gh` CLI | `false` |
-| `--threshold <percent>` | Diff threshold percentage below which route is marked unchanged | `0.1` |
-| `--max-routes <count>` | Maximum routes to capture (`0` = unlimited) | `6` |
-| `--open` | Auto-open `index.html` after run | `false` |
-| `--width <pixels>` | Viewport width | `1280` |
-| `--height <pixels>` | Viewport height | `720` |
-| `--device <name>` | Playwright device preset (for example `iPhone 14`) | unset |
-| `--delay <ms>` | Extra wait after page load/actions | `0` |
-| `--no-auto-tabs` | Disable ARIA tab state auto-capture | auto-tabs enabled |
-| `--max-tabs <count>` | Max auto-detected inactive tabs per route | `5` |
-| `--auto-sections` | Auto-detect and capture heading-labeled sections | `false` |
-| `--max-sections <count>` | Max auto-detected sections per page/tab state | `10` |
+## Auto-detection
 
-## Optional Scenario Config
+**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`.
 
-`afterbefore` can run scripted interactions before capture via config files:
+**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.
 
-- `afterbefore.config.json`
-- `afterbefore.config.js`
-- `afterbefore.config.mjs`
+## Configuration file
 
-Example:
+For pages that need interaction before capture (opening a modal, clicking a dropdown), create an `afterbefore.config.json`:
 
 ```json
 {
   "scenarios": {
-    "/pricing": [
+    "/design-system": [
       {
-        "name": "annual-toggle",
+        "name": "components-tab",
         "actions": [
-          { "click": "[data-testid='billing-toggle']" },
+          { "click": ".tab-components" },
           { "wait": 300 }
         ]
-      },
-      {
-        "name": "plan-cards-only",
-        "selector": "[data-testid='plan-grid']",
-        "actions": []
       }
     ]
   }
 }
 ```
 
-When a route has manual scenarios, default auto tab/section expansion is skipped for that route.
+Actions run in order before the screenshot is taken. Supported actions: `click` (CSS selector), `scroll` (CSS selector), `wait` (milliseconds).
 
-## Output
-
-Each run creates a dated session directory:
-
-```text
-.afterbefore/
-  <branch>_YYYY-MM-DD/
-    index.html
-    summary.md
-    _root-before.png
-    _root-after.png
-    _root-diff.png
-    _root-compare.png       # only when changed
-    _root-slider.html       # only when changed
-    about-before.png
-    about-after.png
-    about-diff.png
-    about-compare.png
-    about-slider.html
-```
+When scenarios are defined for a route, auto-tabs are disabled for that route.
 
-Open `index.html` to review all captured states.
+## Requirements
 
-## Requirements And Limits
+- Next.js with the app router (`app/` directory)
+- Git
+- Node.js >= 18
 
-- Node.js `>=18`
-- Git repository
-- Next.js App Router project (`app/` pages)
-- Dependencies installable in temporary worktree
-- `gh` CLI authenticated if using `--post`
-- Dynamic routes (for example `app/blog/[slug]/page.tsx`) are currently skipped
+Playwright's Chromium browser is installed automatically on first run if it's missing.
 
 ## License
 
-MIT
+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.1" : "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.1").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.1" : "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.1",
+  "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"
@@ -39,7 +38,7 @@
     "visual-testing"
   ],
   "author": "Kai Revicius",
-  "license": "MIT",
+  "license": "PolyForm-Shield-1.0.0",
   "bugs": {
     "url": "https://github.com/kairevicius/afterbefore/issues"
   },