@reshotdev/screenshot 0.0.1-beta.10 → 0.0.1-beta.12

package/LICENSE

@@ -175,7 +175,7 @@ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
 
 END OF TERMS AND CONDITIONS
 
-Copyright 2026 Mindy, Inc.
+Copyright 2026 The Plain Works Co., Ltd.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

package/README.md

@@ -1,6 +1,6 @@
 # @reshotdev/screenshot
 
-Product screenshots in documentation go stale within days of a deploy. Manually recapturing them across themes, viewports, and locales is tedious and error-prone. This CLI automates screenshot and video capture in CI/CD, comparing against baselines to detect visual drift before it reaches production docs.
+Product screenshots in documentation go stale within days of a UI change. Manually recapturing them across themes, viewports, and locales is tedious and error-prone. This CLI runs screenshot and video capture against a localhost build, comparing each run against the previous capture so teams can review diffs before docs change.
 
 [![npm](https://img.shields.io/npm/v/@reshotdev/screenshot)](https://www.npmjs.com/package/@reshotdev/screenshot)
 [![CI](https://github.com/reshotdev/screenshot/actions/workflows/ci.yml/badge.svg)](https://github.com/reshotdev/screenshot/actions/workflows/ci.yml)
@@ -41,7 +41,7 @@ runtime. Use a production-like local server and see the
 
 ## Certified Targets
 
-This release adds a **Certified Targets** contract for apps that need stronger guarantees than ad hoc capture. Certified targets declare their readiness selectors, auth mode, required routes, and expected published assets in `reshot.config.json`, then pass the full doctor/capture/publish/delivery pipeline before release.
+This release adds a **Certified Targets** contract for apps that need stronger guarantees than ad hoc capture. Certified targets declare their readiness selectors, localhost runtime, required routes, and expected published assets in `reshot.config.json`, then pass the full doctor/capture/publish/delivery pipeline before release.
 
 ## Configuration
 
@@ -120,8 +120,6 @@ Create `reshot.config.json` in your project root:
 | `reshot certify` | Run the full certified-target pipeline | `--scenarios`, `--tag`, `--json` |
 | `reshot drifts` | Manage visual drift notifications | `approve`, `reject`, `ignore`, `approve-all` |
 | `reshot import-tests` | Import Playwright tests as scenarios | `--dry-run`, `--no-interactive` |
-| `reshot ci setup` | Generate CI/CD workflow files | — |
-| `reshot ci run` | Capture + publish in one step (CI) | `--tag`, `--no-publish`, `--dry-run` |
 
 ## Certification Workflow
 
@@ -343,37 +341,27 @@ Set `"format": "summary-video"` in scenario output config to record the full bro
 
 Crops the screenshot to the bounding box of the selected element.
 
-## CI/CD Integration
-
-### GitHub Actions
-
-```yaml
-name: Visual Capture
-on:
-  push:
-    branches: [main]
-
-jobs:
-  capture:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with: { node-version: 20 }
-      - run: npm ci
-      - run: npm start &  # start your app
-      - run: npx @reshotdev/screenshot ci run --tag ${{ github.sha }} --message "Deploy ${{ github.sha }}"
-        env:
-          RESHOT_TOKEN: ${{ secrets.RESHOT_TOKEN }}
+## Automation in Scripts
+
+Use headless mode with environment variables to integrate into build scripts or local workflows:
+
+```bash
+# In your Makefile or build script
+export RESHOT_API_KEY=$(cat .reshot/api-key)
+reshot run --scenarios dashboard --no-headless false
+reshot publish --tag v1.2.0
 ```
 
-Or use the setup wizard:
+Set `RESHOT_API_KEY` and `RESHOT_PROJECT_ID` to run without interactive auth:
 
 ```bash
-reshot ci setup
+RESHOT_API_KEY=your-key RESHOT_PROJECT_ID=your-project reshot run
 ```
 
-This generates a `.github/workflows/reshot.yml` tailored to your project.
+For headless execution, ensure:
+- Your app is running on localhost (e.g., `npm run build && npm run start`)
+- `headless: true` is set in `reshot.config.json`
+- API credentials are available as environment variables
 
 ## Asset Map for Builds
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@reshotdev/screenshot",
-  "version": "0.0.1-beta.10",
-  "description": "CI/CD screenshot and video capture CLI",
+  "version": "0.0.1-beta.12",
+  "description": "Screenshot and video capture CLI",
   "author": "Reshot <hello@reshot.dev>",
   "license": "MIT",
   "homepage": "https://reshot.dev",
@@ -15,7 +15,7 @@
   },
   "keywords": [
     "screenshots",
-    "ci-cd",
+    "cli",
     "documentation",
     "visual-testing",
     "automation",

package/src/commands/auth.js

@@ -158,7 +158,7 @@ async function verifyApiKey(apiBaseUrl, apiKey, httpClient = axios) {
 }
 
 async function authCommand(options = {}) {
-  // Support non-interactive auth via environment variables (for CI/CD)
+  // Support non-interactive auth via environment variables
   const envApiKey = process.env.RESHOT_API_KEY;
   const envProjectId = process.env.RESHOT_PROJECT_ID;
   const httpClient = options.httpClient || axios;

package/src/commands/pull.js

@@ -1,5 +1,5 @@
 // pull.js - Pull asset map from Reshot platform
-// Generates JSON, TypeScript, or CSV files for consumption in build pipelines
+// Generates JSON, TypeScript, or CSV files for local workflows
 const chalk = require("chalk");
 const fs = require("fs-extra");
 const path = require("path");
@@ -493,9 +493,9 @@ async function pullCommand(options = {}) {
       console.log(chalk.gray("  • Width/Height  - Dimensions in pixels\n"));
     }
 
-    // CI/CD integration tip
-    console.log(chalk.blue("━━━ CI/CD Integration ━━━\n"));
-    console.log(chalk.white("Add to your build pipeline:\n"));
+    // Workflow integration tip
+    console.log(chalk.blue("━━━ Workflow Integration ━━━\n"));
+    console.log(chalk.white("Add to your local workflow:\n"));
     console.log(chalk.cyan("  # package.json"));
     console.log(chalk.cyan('  "scripts": {'));
     console.log(chalk.cyan(`    "prebuild": "npx reshot pull --format=${format}${output ? ` --output=${output}` : ''}"`));

package/src/index.js

@@ -329,10 +329,10 @@ program
     }
   });
 
-// Pull: Generate asset map for build pipelines
+// Pull: Generate asset map for local workflows
 program
   .command("pull")
-  .description("Pull asset map for your build pipeline")
+  .description("Pull asset map for your capture workflow")
   .option("-f, --format <format>", "Output format: json, ts, csv", "json")
   .option("-o, --output <path>", "Output file path")
   .option("--full", "Include full metadata in TypeScript output")
@@ -424,42 +424,6 @@ program
     }
   });
 
-// CI: CI/CD integration commands
-const ciCommand = program
-  .command("ci")
-  .description("CI/CD integration commands");
-
-ciCommand
-  .command("setup")
-  .description("Interactive CI/CD setup wizard (GitHub Actions, etc.)")
-  .action(async () => {
-    try {
-      const ciSetup = require("./commands/ci-setup");
-      await ciSetup();
-    } catch (error) {
-      console.error(chalk.red("Error:"), error.message);
-      process.exit(1);
-    }
-  });
-
-ciCommand
-  .command("run")
-  .description("Run capture + publish in one step (CI-optimized)")
-  .option("-c, --config <path>", "Path to reshot.config.json")
-  .option("--tag <tag>", "Version tag for publish")
-  .option("-m, --message <message>", "Commit message for publish")
-  .option("--dry-run", "Preview without uploading")
-  .option("--no-publish", "Run capture only, skip publish")
-  .option("--skip-release-doctor", "Skip the composed release gate precheck")
-  .action(async (options) => {
-    try {
-      const ciRun = require("./commands/ci-run");
-      await ciRun(options);
-    } catch (error) {
-      console.error(chalk.red("Error:"), error.message);
-      process.exit(1);
-    }
-  });
 
 // ============================================================================
 // DRIFT MANAGEMENT COMMANDS

package/src/lib/capture-script-runner.js

@@ -165,7 +165,61 @@ async function assertForbiddenTextAbsent(page, forbidText = []) {
   }
 
   const visibleText = normalizeVisibleText(
-    await page.evaluate(() => document.body?.innerText || ""),
+    await page.evaluate(() => {
+      const isElementVisibleInViewport = (element) => {
+        if (!(element instanceof Element)) {
+          return false;
+        }
+
+        const style = window.getComputedStyle(element);
+        if (
+          style.display === "none" ||
+          style.visibility === "hidden" ||
+          Number(style.opacity || "1") === 0
+        ) {
+          return false;
+        }
+
+        const rect = element.getBoundingClientRect();
+        if (rect.width <= 0 || rect.height <= 0) {
+          return false;
+        }
+
+        return (
+          rect.bottom > 0 &&
+          rect.right > 0 &&
+          rect.top < window.innerHeight &&
+          rect.left < window.innerWidth
+        );
+      };
+
+      const walker = document.createTreeWalker(
+        document.body,
+        NodeFilter.SHOW_TEXT,
+        {
+          acceptNode(node) {
+            const text = node.textContent?.replace(/\s+/g, " ").trim();
+            if (!text) {
+              return NodeFilter.FILTER_REJECT;
+            }
+
+            const parent = node.parentElement;
+            if (!parent || !isElementVisibleInViewport(parent)) {
+              return NodeFilter.FILTER_REJECT;
+            }
+
+            return NodeFilter.FILTER_ACCEPT;
+          },
+        },
+      );
+
+      const textParts = [];
+      while (walker.nextNode()) {
+        textParts.push(walker.currentNode.textContent || "");
+      }
+
+      return textParts.join(" ");
+    }),
   );
   const matched = forbidText.find((candidate) =>
     visibleText.includes(normalizeVisibleText(candidate)),

package/src/lib/config.js

@@ -650,10 +650,10 @@ function getPrivacyConfig(scenarioOverrides = {}) {
  * Default style configuration
  */
 const DEFAULT_STYLE_CONFIG = {
-  enabled: true,
+  enabled: false,
   frame: "none",
-  shadow: "medium",
-  padding: 40,
+  shadow: "none",
+  padding: 0,
   background: "transparent",
   borderRadius: 0,
 };

package/src/lib/output-path-template.js

@@ -54,8 +54,8 @@ const TEMPLATE_PRESETS = {
   // GitHub Pages / Static site friendly
   "static-site": "./public/screenshots/{{locale}}/{{scenario}}/{{name}}.{{ext}}",
   
-  // CI/CD artifacts
-  ci: "./artifacts/screenshots/{{scenario}}/{{viewport}}/{{variant}}/{{name}}.{{ext}}",
+  // Local CLI artifacts
+  cli: "./artifacts/screenshots/{{scenario}}/{{viewport}}/{{variant}}/{{name}}.{{ext}}",
 };
 
 /**
@@ -291,7 +291,7 @@ function getTemplatePresets() {
     { name: "docs", template: TEMPLATE_PRESETS.docs, description: "Simple docs asset structure" },
     { name: "variant-matrix", template: TEMPLATE_PRESETS["variant-matrix"], description: "Hierarchical by variant dimensions" },
     { name: "static-site", template: TEMPLATE_PRESETS["static-site"], description: "GitHub Pages / static site friendly" },
-    { name: "ci", template: TEMPLATE_PRESETS.ci, description: "CI/CD artifact organization" },
+    { name: "cli", template: TEMPLATE_PRESETS.cli, description: "Local CLI artifact organization" },
   ];
 }
 

package/src/lib/storage-providers.js

@@ -191,7 +191,7 @@ Use Reshot for full governance features (review queue, version control, etc.):
 1. ${chalk.yellow('Authenticate:')}
    ${chalk.gray('reshot auth')}
 
-2. ${chalk.yellow('Or set environment variable for CI/CD:')}
+2. ${chalk.yellow('Or set environment variable:')}
    ${chalk.gray('export RESHOT_API_KEY="your-api-key"')}
 
 3. ${chalk.yellow('Config (optional):')}

package/src/lib/style-engine.js

@@ -16,10 +16,10 @@ try {
  * Default style configuration
  */
 const DEFAULT_STYLE_CONFIG = {
-  enabled: true,
+  enabled: false,
   frame: "none",
-  shadow: "medium",
-  padding: 40,
+  shadow: "none",
+  padding: 0,
   background: "transparent",
   borderRadius: 0,
 };
@@ -479,8 +479,8 @@ async function applyStyle(inputBuffer, styleConfig, logger, dpr = 1) {
 
   const {
     frame = "none",
-    shadow = "medium",
-    padding = 40,
+    shadow = "none",
+    padding = 0,
     background = "transparent",
     borderRadius = 0,
   } = styleConfig;