afterbefore 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+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.

package/README.md

@@ -0,0 +1,122 @@
+# afterbefore
+
+Automatic before/after screenshot capture for pull requests. **The git diff is the config.**
+
+Change code, run one command, get a visual comparison. No config files, no manual URL lists, no SaaS — `afterbefore` reads your diff, walks the import graph, and captures both versions automatically.
+
+```bash
+npx afterbefore
+```
+
+## The Problem
+
+Visual PR reviews are painful:
+
+1. Switch to main, start the app, take screenshots
+2. Switch back to your branch, start the app, take more screenshots
+3. Crop, label, and paste into the PR description
+
+This takes 5-10 minutes. Most developers skip it. Reviewers approve visual changes blind.
+
+## How It Works
+
+```
+git diff → classify changed files → build import graph → BFS to find affected pages
+→ git worktree for base version → start 2 dev servers → Playwright capture
+→ pixelmatch diff → side-by-side comparison → HTML report + PR comment
+```
+
+1. **Diff** — reads `git diff --name-status` to find changed files
+2. **Classify** — categorizes as page, component, style, layout, utility, config, test
+3. **Import graph** — parses all imports with `es-module-lexer`, resolves `@/` tsconfig aliases
+4. **Impact analysis** — BFS traverses the reverse import graph (depth 3) to find affected pages
+5. **Worktree** — creates a git worktree for the base branch, installs deps
+6. **Dev servers** — starts two Next.js dev servers (before + after) on random ports
+7. **Capture** — Playwright takes full-page screenshots at 1280x720 for each affected route
+8. **Compare** — pixelmatch detects pixel-level differences, sharp generates side-by-side images
+9. **Report** — HTML card grid, drag-to-compare sliders, markdown summary, optional PR comment
+
+## Installation
+
+```bash
+# npm
+npm install --save-dev afterbefore
+
+# From GitHub (builds automatically on install)
+npm install --save-dev github:kairevicius/afterbefore
+
+# Or run directly without installing
+npx afterbefore
+```
+
+Playwright's Chromium browser is required for screenshots:
+
+```bash
+npx playwright install chromium
+```
+
+## Usage
+
+```bash
+# Compare current branch against main
+npx afterbefore
+
+# Compare against a different base
+npx afterbefore --base develop
+
+# Capture and post results to the open PR
+npx afterbefore --post
+```
+
+### Options
+
+| Flag | Description | Default |
+|------|-------------|---------|
+| `--base <ref>` | Base branch or ref to compare against | `main` |
+| `--output <dir>` | Output directory | `.afterbefore` |
+| `--post` | Post results as a PR comment via `gh` CLI | `false` |
+
+## Output
+
+```
+.afterbefore/
+  summary.md              Markdown table (for PR comments)
+  index.html              HTML report with card grid
+  _root/
+    before.png             Screenshot of / on base branch
+    after.png              Screenshot of / on current branch
+    diff.png               Pixel diff overlay
+    side-by-side.png       Labeled comparison image
+    slider.html            Interactive drag-to-compare
+  about/
+    before.png
+    after.png
+    diff.png
+    side-by-side.png
+    slider.html
+```
+
+Open `index.html` in a browser to see all comparisons at a glance. Each changed route gets a card with before/after/diff images and a link to the interactive slider.
+
+## Requirements
+
+- Node.js 18+
+- Git
+- Next.js project using the app router
+- Playwright Chromium (`npx playwright install chromium`)
+
+## How It's Different
+
+Every visual regression tool either captures everything on every run (Chromatic, Lost Pixel) or requires manual URL configuration (Percy, BackstopJS). `afterbefore` is the only tool that figures out what to capture from the code diff.
+
+| | Visual regression tools | afterbefore |
+|---|---|---|
+| Config | URL lists, story lists | Zero — reads git diff |
+| Scope | Everything, every run | Only affected pages |
+| Philosophy | "Did anything break?" | "Here's what changed" |
+| Hosting | Cloud SaaS | Local, nothing leaves your machine |
+| Cost | Per-snapshot pricing | Free, open source |
+
+## License
+
+MIT