stateofpixel 1.0.0 → 1.2.0

package/dist/index.mjs

@@ -1,74 +1,14 @@
 #!/usr/bin/env node
-import { createRequire } from "node:module";
+import { _ as readPngSize, a as defaultNonce, c as resolveToken, d as createApiClient, f as isRateLimited, g as collectSnapshots, h as createDiffEngine, i as waitForFinalize, l as ApiError, m as formatCounts, n as uploadCommand, o as readCiInfo, p as isServerError, r as metadataFile, s as readGitInfo, t as parseShard, u as DEFAULT_API_URL, v as sha256, y as mapConcurrent } from "./upload-DKzFVTAz.mjs";
 import { Command, InvalidArgumentError } from "commander";
-import { copyFile, mkdir, mkdtemp, open, readFile, readdir, rename, rm, stat, writeFile } from "node:fs/promises";
+import { copyFile, mkdir, mkdtemp, readFile, rename, rm, stat, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { availableParallelism, tmpdir } from "node:os";
-import { createHash } from "node:crypto";
-import pixelmatch from "pixelmatch";
-import { PNG } from "pngjs";
-import { execFile } from "node:child_process";
-import { promisify } from "node:util";
+import { createReadStream } from "node:fs";
+import { createServer } from "node:http";
 
 //#region package.json
-var version = "1.0.0";
-
-//#endregion
-//#region src/map-concurrent.ts
-async function mapConcurrent(items, concurrency, fn) {
-	const results = new Array(items.length);
-	let nextIndex = 0;
-	async function worker() {
-		while (nextIndex < items.length) {
-			const index = nextIndex++;
-			results[index] = await fn(items[index], index);
-		}
-	}
-	await Promise.all(Array.from({ length: Math.min(concurrency, items.length) }, worker));
-	return results;
-}
-
-//#endregion
-//#region src/png.ts
-const PNG_SIGNATURE = Buffer.from([
-	137,
-	80,
-	78,
-	71,
-	13,
-	10,
-	26,
-	10
-]);
-function sha256(bytes) {
-	return createHash("sha256").update(bytes).digest("hex");
-}
-function readPngSize(bytes) {
-	if (bytes.length < 24 || !bytes.subarray(0, 8).equals(PNG_SIGNATURE)) throw new Error("Not a PNG file");
-	return {
-		width: bytes.readUInt32BE(16),
-		height: bytes.readUInt32BE(20)
-	};
-}
-
-//#endregion
-//#region src/snapshots.ts
-async function collectSnapshots(dir) {
-	const entries = await readdir(dir, {
-		recursive: true,
-		withFileTypes: true
-	});
-	const snapshots = /* @__PURE__ */ new Map();
-	for (const entry of entries) {
-		if (!entry.isFile() || !entry.name.toLowerCase().endsWith(".png")) continue;
-		const filePath = path.join(entry.parentPath, entry.name);
-		snapshots.set(snapshotName(dir, filePath), filePath);
-	}
-	return new Map([...snapshots].sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0));
-}
-function snapshotName(dir, filePath) {
-	return path.relative(dir, filePath).split(path.sep).join("/").slice(0, -4);
-}
+var version = "1.2.0";
 
 //#endregion
 //#region src/compare.ts
@@ -140,93 +80,6 @@ async function storeImage(filePath, imagesDir, { move = false } = {}) {
 	};
 }
 
-//#endregion
-//#region src/diff/odiff.ts
-async function createOdiffEngine() {
-	const { findBinary } = createRequire(import.meta.url)("odiff-bin/binary.js");
-	findBinary();
-	const { compare } = await import("odiff-bin");
-	return {
-		name: "odiff",
-		async diff(basePath, newPath, diffPath, options) {
-			const result = await compare(basePath, newPath, diffPath, {
-				threshold: options.threshold,
-				antialiasing: !options.includeAA,
-				outputDiffMask: true
-			});
-			if (result.match) return {
-				diffPixels: 0,
-				diffRatio: 0
-			};
-			if (result.reason === "pixel-diff") {
-				const [base, next] = await Promise.all([readPngSizeFromFile(basePath), readPngSizeFromFile(newPath)]);
-				const pixels = Math.max(base.width, next.width) * Math.max(base.height, next.height);
-				return {
-					diffPixels: result.diffCount,
-					diffRatio: result.diffCount / pixels
-				};
-			}
-			throw new Error(`odiff could not compare ${newPath}: ${result.reason}`);
-		}
-	};
-}
-async function readPngSizeFromFile(filePath) {
-	const file = await open(filePath);
-	try {
-		const { buffer } = await file.read(Buffer.alloc(24), 0, 24, 0);
-		return readPngSize(buffer);
-	} finally {
-		await file.close();
-	}
-}
-
-//#endregion
-//#region src/diff/pixelmatch.ts
-function createPixelmatchEngine() {
-	return {
-		name: "pixelmatch",
-		async diff(basePath, newPath, diffPath, options) {
-			const [base, next] = await Promise.all([readPng(basePath), readPng(newPath)]);
-			const width = Math.max(base.width, next.width);
-			const height = Math.max(base.height, next.height);
-			const diff = new PNG({
-				width,
-				height
-			});
-			const diffPixels = pixelmatch(padTo(base, width, height), padTo(next, width, height), diff.data, width, height, {
-				threshold: options.threshold,
-				includeAA: options.includeAA,
-				diffMask: true
-			});
-			if (diffPixels > 0) await writeFile(diffPath, PNG.sync.write(diff));
-			return {
-				diffPixels,
-				diffRatio: diffPixels / (width * height)
-			};
-		}
-	};
-}
-async function readPng(filePath) {
-	return PNG.sync.read(await readFile(filePath));
-}
-function padTo(image, width, height) {
-	if (image.width === width && image.height === height) return image.data;
-	const padded = new Uint8Array(width * height * 4);
-	const rowBytes = image.width * 4;
-	for (let y = 0; y < image.height; y++) padded.set(image.data.subarray(y * rowBytes, (y + 1) * rowBytes), y * width * 4);
-	return padded;
-}
-
-//#endregion
-//#region src/diff/engine.ts
-async function createDiffEngine() {
-	try {
-		return await createOdiffEngine();
-	} catch {
-		return createPixelmatchEngine();
-	}
-}
-
 //#endregion
 //#region src/report/template.ts
 function renderReport(snapshots, meta) {
@@ -623,7 +476,7 @@ async function compareCommand(dir, baselineDir, options) {
 	const counts = countByStatus(results.map((result) => result.status));
 	const seconds = ((performance.now() - startedAt) / 1e3).toFixed(1);
 	console.log(`stateofpixel  compare  ${dir} vs ${baselineDir}`);
-	console.log(`  ${formatCount$1(results.length)} snapshots  ${formatCount$1(counts.unchanged)} unchanged  ${formatCount$1(counts.changed)} changed  ${formatCount$1(counts.added)} added  ${formatCount$1(counts.removed)} removed`);
+	console.log(formatCounts(results.length, counts));
 	console.log(`  compared with ${engine.name} in ${seconds} s`);
 	console.log(`  report: ${path.relative(process.cwd(), reportPath)}`);
 }
@@ -645,406 +498,6 @@ function countByStatus(statuses) {
 	for (const status of statuses) counts[status]++;
 	return counts;
 }
-function formatCount$1(count) {
-	return count.toLocaleString("en-US");
-}
-
-//#endregion
-//#region src/api.ts
-const DEFAULT_API_URL = "https://graceful-dogfish-423.convex.site/api/v1";
-var ApiError = class extends Error {
-	status;
-	code;
-	constructor(status, code, message) {
-		super(message);
-		this.status = status;
-		this.code = code;
-	}
-};
-function createApiClient({ baseUrl, token, fetch = globalThis.fetch, retries = 3, retryDelayMs = 1e3 }) {
-	async function withRetries(fn) {
-		for (let attempt = 0;; attempt++) try {
-			return await fn();
-		} catch (error) {
-			if (attempt >= retries || !isServerError(error)) throw error;
-			await sleep(retryDelayMs * 2 ** attempt);
-		}
-	}
-	function request(method, path, body) {
-		return withRetries(async () => {
-			const response = await fetch(`${baseUrl}${path}`, {
-				method,
-				headers: {
-					Authorization: `Bearer ${token}`,
-					"Content-Type": "application/json"
-				},
-				...body === void 0 ? {} : { body: JSON.stringify(body) }
-			});
-			if (!response.ok) throw await toApiError(response);
-			return await response.json();
-		});
-	}
-	function upload(uploadUrl, bytes) {
-		return withRetries(async () => {
-			const response = await fetch(uploadUrl, {
-				method: "POST",
-				headers: { "Content-Type": "image/png" },
-				body: new Uint8Array(bytes)
-			});
-			if (!response.ok) throw await toApiError(response);
-			const { storageId } = await response.json();
-			return storageId;
-		});
-	}
-	function download(url) {
-		return withRetries(async () => {
-			const response = await fetch(url);
-			if (!response.ok) throw await toApiError(response);
-			return Buffer.from(await response.arrayBuffer());
-		});
-	}
-	return {
-		request,
-		upload,
-		download
-	};
-}
-async function toApiError(response) {
-	const body = await response.json().catch(() => null);
-	return new ApiError(response.status, body?.error?.code ?? "http_error", body?.error?.message ?? `HTTP ${response.status}`);
-}
-function isServerError(error) {
-	return error instanceof ApiError && error.status >= 500 || error instanceof TypeError;
-}
-function sleep(ms) {
-	return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-//#endregion
-//#region src/ci-env.ts
-const execFileAsync = promisify(execFile);
-const MAX_ANCESTORS = 100;
-const OIDC_AUDIENCE = "stateofpixel";
-async function readGitInfo(env, cwd, baselineBranchOverride) {
-	const event = await readGithubEvent(env);
-	const pullRequest = event?.pull_request;
-	const commit = pullRequest?.head.sha || env.GITHUB_SHA || await git(cwd, "rev-parse", "HEAD");
-	if (commit === null) throw new Error("Could not find the commit. Run inside a git checkout.");
-	const branch = pullRequest?.head.ref || env.GITHUB_HEAD_REF || env.GITHUB_REF_NAME || await git(cwd, "rev-parse", "--abbrev-ref", "HEAD") || "HEAD";
-	const baselineBranch = baselineBranchOverride || pullRequest?.base.ref || event?.repository?.default_branch || await defaultBranch(cwd) || "main";
-	return {
-		commit,
-		commitMessage: await git(cwd, "log", "-1", "--format=%s", commit) ?? event?.head_commit?.message?.split("\n")[0] ?? "",
-		branch,
-		baselineBranch,
-		prNumber: pullRequest?.number ?? null,
-		mergeBase: await git(cwd, "merge-base", commit, `origin/${baselineBranch}`),
-		ancestors: await ancestors(cwd, commit)
-	};
-}
-function readCiInfo(env) {
-	if (env.GITHUB_ACTIONS === "true") return {
-		provider: "github-actions",
-		runUrl: env.GITHUB_SERVER_URL && env.GITHUB_REPOSITORY && env.GITHUB_RUN_ID ? `${env.GITHUB_SERVER_URL}/${env.GITHUB_REPOSITORY}/actions/runs/${env.GITHUB_RUN_ID}` : void 0
-	};
-	return env.CI ? { provider: "unknown" } : {};
-}
-function defaultNonce(env) {
-	if (env.GITHUB_RUN_ID) return `${env.GITHUB_RUN_ID}-${env.GITHUB_RUN_ATTEMPT ?? "1"}`;
-	return null;
-}
-async function resolveToken(env, fetchImpl = fetch) {
-	if (env.STATEOFPIXEL_TOKEN) return env.STATEOFPIXEL_TOKEN;
-	const requestUrl = env.ACTIONS_ID_TOKEN_REQUEST_URL;
-	const requestToken = env.ACTIONS_ID_TOKEN_REQUEST_TOKEN;
-	if (!requestUrl || !requestToken) throw new Error("No token. On GitHub Actions add `permissions: id-token: write`, elsewhere set STATEOFPIXEL_TOKEN.");
-	const url = new URL(requestUrl);
-	url.searchParams.set("audience", OIDC_AUDIENCE);
-	const response = await fetchImpl(url, { headers: { Authorization: `Bearer ${requestToken}` } });
-	if (!response.ok) throw new Error(`GitHub Actions OIDC token request failed with HTTP ${response.status}.`);
-	const { value } = await response.json();
-	return value;
-}
-async function readGithubEvent(env) {
-	if (!env.GITHUB_EVENT_PATH) return null;
-	try {
-		return JSON.parse(await readFile(env.GITHUB_EVENT_PATH, "utf8"));
-	} catch {
-		return null;
-	}
-}
-async function ancestors(cwd, commit) {
-	for (const start of [commit, "HEAD"]) {
-		const output = await git(cwd, "rev-list", `--max-count=102`, start);
-		if (output !== null) return output.split("\n").filter((sha) => sha !== "" && sha !== commit).slice(start === "HEAD" ? 1 : 0).slice(0, MAX_ANCESTORS);
-	}
-	return [];
-}
-async function defaultBranch(cwd) {
-	return (await git(cwd, "symbolic-ref", "--short", "refs/remotes/origin/HEAD"))?.replace(/^origin\//, "") ?? null;
-}
-async function git(cwd, ...args) {
-	try {
-		const { stdout } = await execFileAsync("git", args, { cwd });
-		return stdout.trim();
-	} catch {
-		return null;
-	}
-}
-
-//#endregion
-//#region src/upload.ts
-const UPLOAD_CONCURRENCY = 8;
-const FINALIZE_POLLS = 10;
-const FINALIZE_POLL_MS = 1e3;
-async function readSnapshots(dir) {
-	const files = await collectSnapshots(dir);
-	return mapConcurrent([...files], availableParallelism(), async ([name, file]) => {
-		const bytes = await readFile(file);
-		return {
-			name,
-			file,
-			hash: sha256(bytes),
-			bytes: bytes.length,
-			...readPngSize(bytes)
-		};
-	});
-}
-async function uploadDirectory(input) {
-	const snapshots = await readSnapshots(input.dir);
-	const build = await input.api.request("POST", "/builds", {
-		buildName: input.buildName,
-		nonce: input.nonce,
-		shard: input.shard,
-		subset: input.subset,
-		git: input.git,
-		ci: input.ci,
-		snapshots: snapshots.map(({ name, hash, bytes, width, height }) => ({
-			name,
-			hash,
-			bytes,
-			width,
-			height
-		}))
-	});
-	const lookups = new Map(build.snapshots.map((lookup) => [lookup.name, lookup]));
-	const failedUploads = [];
-	const uploads = [];
-	let uploadedBytes = 0;
-	const pendingUploads = uniqueByHash(snapshots.filter((snapshot) => lookups.get(snapshot.name)?.uploadUrl));
-	await mapConcurrent(pendingUploads, UPLOAD_CONCURRENCY, async (snapshot) => {
-		const uploadUrl = lookups.get(snapshot.name)?.uploadUrl;
-		try {
-			const bytes = await readFile(snapshot.file);
-			uploads.push({
-				hash: snapshot.hash,
-				storageId: await input.api.upload(uploadUrl, bytes),
-				kind: "screenshot",
-				width: snapshot.width,
-				height: snapshot.height
-			});
-			uploadedBytes += bytes.length;
-		} catch {
-			failedUploads.push(snapshot.hash);
-		}
-	});
-	const failedScreenshots = new Set(failedUploads);
-	const options = {
-		threshold: input.threshold ?? build.diff.threshold,
-		includeAA: build.diff.includeAA
-	};
-	const diffs = /* @__PURE__ */ new Map();
-	const results = await mapConcurrent(snapshots, availableParallelism(), async (snapshot, index) => {
-		const lookup = lookups.get(snapshot.name);
-		const base = {
-			name: snapshot.name,
-			hash: snapshot.hash
-		};
-		if (failedScreenshots.has(snapshot.hash)) return {
-			...base,
-			status: "failed"
-		};
-		if (lookup.status !== "changed") return {
-			...base,
-			status: lookup.status
-		};
-		if (lookup.baselineUrl === void 0) return {
-			...base,
-			status: "changed"
-		};
-		try {
-			const baselineFile = path.join(input.workDir, `baseline-${index}.png`);
-			const diffFile = path.join(input.workDir, `diff-${index}.png`);
-			await writeFile(baselineFile, await input.api.download(lookup.baselineUrl));
-			const { diffPixels, diffRatio } = await input.engine.diff(baselineFile, snapshot.file, diffFile, options);
-			if (diffPixels === 0) return {
-				...base,
-				status: "unchanged"
-			};
-			const diffBytes = await readFile(diffFile);
-			const diffHash = sha256(diffBytes);
-			diffs.set(diffHash, {
-				file: diffFile,
-				hash: diffHash,
-				...readPngSize(diffBytes)
-			});
-			return {
-				...base,
-				status: "changed",
-				diffHash,
-				diffRatio,
-				diffPixels
-			};
-		} catch {
-			return {
-				...base,
-				status: "failed"
-			};
-		}
-	});
-	if (diffs.size > 0) {
-		const { uploads: diffTargets } = await input.api.request("POST", `/builds/${build.buildId}/upload-urls`, { hashes: [...diffs.keys()] });
-		await mapConcurrent(diffTargets, UPLOAD_CONCURRENCY, async ({ hash, uploadUrl }) => {
-			const diff = diffs.get(hash);
-			if (diff === void 0) return;
-			try {
-				const bytes = await readFile(diff.file);
-				uploads.push({
-					hash,
-					storageId: await input.api.upload(uploadUrl, bytes),
-					kind: "diff",
-					width: diff.width,
-					height: diff.height
-				});
-				uploadedBytes += bytes.length;
-			} catch {
-				failedUploads.push(hash);
-			}
-		});
-	}
-	const { rejectedUploads } = await input.api.request("POST", `/builds/${build.buildId}/shards/${build.shardIndex}/complete`, {
-		uploads,
-		results
-	});
-	failedUploads.push(...rejectedUploads);
-	return {
-		build,
-		results,
-		uploadedImages: uploads.length,
-		uploadedBytes,
-		failedUploads,
-		final: await waitForFinalize(input.api, build.buildId, false)
-	};
-}
-async function waitForFinalize(api, buildId, finalizeRequested) {
-	for (let poll = 0; poll < FINALIZE_POLLS; poll++) {
-		const build = await api.request("GET", `/builds/${buildId}`);
-		const lastShardDone = build.shards.total !== null && build.shards.done >= build.shards.total;
-		if (build.status !== "pending" || !(finalizeRequested || lastShardDone)) return build.status === "finalized" ? build : null;
-		await new Promise((resolve) => setTimeout(resolve, FINALIZE_POLL_MS));
-	}
-	return null;
-}
-function uniqueByHash(snapshots) {
-	return [...new Map(snapshots.map((snapshot) => [snapshot.hash, snapshot])).values()];
-}
-
-//#endregion
-//#region src/commands/upload.ts
-async function uploadCommand(dir, options) {
-	const env = process.env;
-	if (!(await stat(dir).catch(() => void 0))?.isDirectory()) throw new Error(`Not a directory: ${dir}`);
-	const shard = options.shard ?? parseShard(env.STATEOFPIXEL_SHARD ?? "1/1");
-	const buildName = options.buildName ?? env.STATEOFPIXEL_BUILD_NAME ?? "default";
-	const nonce = options.nonce ?? env.STATEOFPIXEL_NONCE ?? defaultNonce(env);
-	if (nonce === null && shard.total !== 1) throw new Error("Set --nonce so every shard joins the same build.");
-	const git = await readGitInfo(env, process.cwd(), options.baselineBranch ?? env.STATEOFPIXEL_BASELINE_BRANCH);
-	if (options.dryRun) {
-		const snapshots = await readSnapshots(dir);
-		console.log(`stateofpixel  dry run  ${git.branch} vs ${git.baselineBranch}`);
-		console.log(`  ${formatCount(snapshots.length)} snapshots in ${dir}`);
-		console.log(`  build ${buildName}, shard ${shard.total === null ? "auto" : `${shard.index}/${shard.total}`}, commit ${git.commit.slice(0, 7)}, ${git.ancestors.length} ancestors`);
-		return;
-	}
-	const startedAt = performance.now();
-	const workDir = await mkdtemp(path.join(tmpdir(), "stateofpixel-upload-"));
-	let output;
-	try {
-		output = await uploadDirectory({
-			dir,
-			workDir,
-			api: createApiClient({
-				baseUrl: env.STATEOFPIXEL_API_URL ?? "https://graceful-dogfish-423.convex.site/api/v1",
-				token: await resolveToken(env)
-			}),
-			engine: await createDiffEngine(),
-			buildName,
-			nonce: nonce ?? `local-${Date.now()}`,
-			shard,
-			subset: options.subset,
-			threshold: options.threshold,
-			git,
-			ci: readCiInfo(env)
-		});
-	} catch (error) {
-		if (isServerError(error) && !options.strict) {
-			console.warn(`stateofpixel: skipped, the service is not reachable (${error instanceof Error ? error.message : error}). Use --strict to fail instead.`);
-			return;
-		}
-		if (error instanceof ApiError) throw new Error(`${error.message} (${error.code})`);
-		throw error;
-	} finally {
-		await rm(workDir, {
-			recursive: true,
-			force: true
-		});
-	}
-	printSummary(output, git.branch, git.baselineBranch, startedAt);
-	if (output.failedUploads.length > 0) throw new Error(`${output.failedUploads.length} uploads failed.`);
-}
-function printSummary(output, branch, baselineBranch, startedAt) {
-	const { build, results, final } = output;
-	const counts = final?.counts ?? countResults(results);
-	const baseline = build.baseline === null ? "no baseline" : `#${build.baseline.buildNumber}`;
-	const seconds = ((performance.now() - startedAt) / 1e3).toFixed(1);
-	const megabytes = (output.uploadedBytes / 1024 / 1024).toFixed(1);
-	console.log(`stateofpixel  build #${build.buildNumber}  ${branch} vs ${baselineBranch} (${baseline})`);
-	console.log(formatCounts(results.length, counts));
-	console.log(`  uploaded ${formatCount(output.uploadedImages)} images (${megabytes} MB) in ${seconds} s`);
-	for (const warning of build.warnings) console.log(`  warning: ${warning}`);
-	console.log(`  review: ${build.url}`);
-}
-function formatCounts(total, counts) {
-	return `  ${formatCount(total)} snapshots  ${formatCount(counts.unchanged)} unchanged  ${formatCount(counts.changed)} changed  ${formatCount(counts.added)} added  ${formatCount(counts.removed)} removed${counts.failed > 0 ? `  ${formatCount(counts.failed)} failed` : ""}`;
-}
-function countResults(results) {
-	const counts = {
-		unchanged: 0,
-		changed: 0,
-		added: 0,
-		removed: 0,
-		failed: 0
-	};
-	for (const result of results) counts[result.status]++;
-	return counts;
-}
-function parseShard(value) {
-	if (value === "auto") return {
-		index: null,
-		total: null
-	};
-	const match = /^(\d+)\/(\d+)$/.exec(value);
-	const index = Number(match?.[1]);
-	const total = Number(match?.[2]);
-	if (!match || index < 1 || total < 1 || index > total) throw new InvalidArgumentError("Must look like 1/4, or auto.");
-	return {
-		index,
-		total
-	};
-}
-function formatCount(count) {
-	return count.toLocaleString("en-US");
-}
 
 //#endregion
 //#region src/commands/finalize.ts
@@ -1070,6 +523,10 @@ async function finalizeCommand(options) {
 		});
 		final = await waitForFinalize(api, build.buildId, true);
 	} catch (error) {
+		if (isRateLimited(error) && !options.strict) {
+			console.warn(`stateofpixel: skipped, ${error.message} Use --strict to fail instead.`);
+			return;
+		}
 		if (isServerError(error) && !options.strict) {
 			console.warn(`stateofpixel: skipped, the service is not reachable (${error instanceof Error ? error.message : error}). Use --strict to fail instead.`);
 			return;
@@ -1086,11 +543,161 @@ async function finalizeCommand(options) {
 	console.log(`  review: ${build.url}`);
 }
 
+//#endregion
+//#region src/commands/storybook.ts
+const CAPTURE_CONCURRENCY = 4;
+const STORY_TIMEOUT_MS = 15e3;
+const VIEWPORT_HEIGHT = 720;
+const CONTENT_TYPES = {
+	".html": "text/html",
+	".js": "text/javascript",
+	".mjs": "text/javascript",
+	".css": "text/css",
+	".json": "application/json",
+	".svg": "image/svg+xml",
+	".png": "image/png",
+	".jpg": "image/jpeg",
+	".gif": "image/gif",
+	".webp": "image/webp",
+	".woff": "font/woff",
+	".woff2": "font/woff2",
+	".ttf": "font/ttf"
+};
+async function storybookCommand(staticDir, options) {
+	const stories = filterStories(await readStories(staticDir), options.include, options.exclude);
+	if (stories.length === 0) throw new Error(`No stories found in ${staticDir}/index.json.`);
+	const outDir = await mkdtemp(path.join(tmpdir(), "stateofpixel-storybook-"));
+	try {
+		const failed = await captureStories(staticDir, outDir, stories, options);
+		if (failed.length > 0) throw new Error(`Stories that did not render: ${failed.join(", ")}`);
+		await uploadCommand(outDir, options);
+	} finally {
+		await rm(outDir, {
+			recursive: true,
+			force: true
+		});
+	}
+}
+async function readStories(staticDir) {
+	const text = await readFile(path.join(staticDir, "index.json"), "utf8").catch(() => {
+		throw new Error(`No index.json in ${staticDir}. Run storybook build first, Storybook 7 or newer.`);
+	});
+	const index = JSON.parse(text);
+	return Object.values(index.entries ?? {}).filter((entry) => entry.type === "story").map(({ id, title, name, importPath }) => ({
+		id,
+		title,
+		name,
+		importPath
+	}));
+}
+function filterStories(stories, include, exclude) {
+	const includes = include === void 0 ? null : globToRegExp(include);
+	const excludes = exclude === void 0 ? null : globToRegExp(exclude);
+	return stories.filter((story) => {
+		const name = `${story.title}/${story.name}`;
+		return (includes === null || includes.test(name)) && (excludes === null || !excludes.test(name));
+	});
+}
+function globToRegExp(glob) {
+	const source = glob.split("**").map((part) => part.split("*").map((text) => text.replace(/[.+?^${}()|[\]\\]/g, "\\$&")).join("[^/]*")).join(".*");
+	return new RegExp(`^${source}$`);
+}
+function storySnapshotName(story, width) {
+	return `${story.title}/${story.name} [chromium ${width}]`;
+}
+async function captureStories(staticDir, outDir, stories, options) {
+	const { chromium } = await import("playwright").catch(() => {
+		throw new Error("stateofpixel storybook needs Playwright. Run npm install -D playwright, then npx playwright install chromium.");
+	});
+	const server = await serveStatic(staticDir);
+	const baseUrl = `http://127.0.0.1:${server.address().port}`;
+	const browser = await chromium.launch();
+	const failed = [];
+	try {
+		for (const width of options.viewports) {
+			const context = await browser.newContext({
+				viewport: {
+					width,
+					height: VIEWPORT_HEIGHT
+				},
+				deviceScaleFactor: 1,
+				reducedMotion: "reduce"
+			});
+			await mapConcurrent(stories, CAPTURE_CONCURRENCY, async (story) => {
+				const name = storySnapshotName(story, width);
+				const file = path.join(outDir, `${name}.png`);
+				const page = await context.newPage();
+				try {
+					await page.goto(`${baseUrl}/iframe.html?id=${encodeURIComponent(story.id)}&viewMode=story`, { timeout: STORY_TIMEOUT_MS });
+					await page.waitForSelector(options.waitForSelector, { timeout: STORY_TIMEOUT_MS });
+					await page.evaluate("document.fonts.ready");
+					if (options.delay > 0) await page.waitForTimeout(options.delay);
+					await mkdir(path.dirname(file), { recursive: true });
+					await page.screenshot({
+						path: file,
+						fullPage: true,
+						animations: "disabled",
+						caret: "hide"
+					});
+					await writeFile(metadataFile(file), JSON.stringify({
+						browser: "chromium",
+						viewport: width,
+						storyId: story.id,
+						importPath: story.importPath
+					}));
+				} catch {
+					failed.push(name);
+				} finally {
+					await page.close();
+				}
+			});
+			await context.close();
+		}
+	} finally {
+		await browser.close();
+		server.close();
+	}
+	console.log(`stateofpixel  captured ${stories.length * options.viewports.length - failed.length} screenshots from ${stories.length} stories`);
+	return failed;
+}
+async function serveStatic(root) {
+	const base = path.resolve(root);
+	const server = createServer((request, response) => {
+		const pathname = decodeURIComponent(new URL(request.url ?? "/", "http://localhost").pathname);
+		const file = path.join(base, pathname.endsWith("/") ? `${pathname}index.html` : pathname);
+		if (!file.startsWith(`${base}${path.sep}`)) {
+			response.writeHead(403).end();
+			return;
+		}
+		stat(file).then((stats) => {
+			if (!stats.isFile()) {
+				response.writeHead(404).end();
+				return;
+			}
+			response.writeHead(200, { "Content-Type": CONTENT_TYPES[path.extname(file).toLowerCase()] ?? "application/octet-stream" });
+			createReadStream(file).pipe(response);
+		}, () => response.writeHead(404).end());
+	});
+	await new Promise((resolve) => server.listen(0, "127.0.0.1", resolve));
+	return server;
+}
+function parseViewports(value) {
+	const widths = value.split(",").map((width) => Number(width.trim()));
+	if (widths.length === 0 || widths.some((width) => !Number.isInteger(width) || width < 1)) throw new InvalidArgumentError("Must look like 375,1280.");
+	return widths;
+}
+function parseDelay(value) {
+	const delay = Number(value);
+	if (!Number.isInteger(delay) || delay < 0) throw new InvalidArgumentError("Must be a whole number of milliseconds.");
+	return delay;
+}
+
 //#endregion
 //#region src/index.ts
 const program = new Command().name("stateofpixel").description("Visual regression testing that runs in your CI").version(version);
 program.command("compare").description("Compare a folder of screenshots against a baseline folder").argument("<dir>", "folder with new screenshots").argument("<baseline-dir>", "folder with baseline screenshots").option("--out <dir>", "report folder", "stateofpixel-report").option("--threshold <number>", "color difference threshold, 0 to 1", parseThreshold, .1).option("--include-aa", "count anti-aliased pixels as changes", false).action(compareCommand);
 program.command("upload").description("Upload a folder of screenshots and compare it with the baseline").argument("<dir>", "folder with screenshots").option("--build-name <name>", "separate builds of one project, like storybook").option("--shard <i/n>", "this shard and the shard count, or auto with a finalize step", parseShard).option("--nonce <id>", "shared by every shard of one build").option("--baseline-branch <branch>", "branch to compare against").option("--subset", "only some snapshots ran, do not mark others removed", false).option("--threshold <number>", "color difference threshold, 0 to 1, overrides project settings", parseThreshold).option("--strict", "fail when the service is not reachable", false).option("--dry-run", "hash and print the plan, upload nothing", false).action(uploadCommand);
+program.command("storybook").description("Capture every story of a built Storybook, then upload").argument("<static-dir>", "the output of storybook build").option("--viewports <widths>", "comma separated viewport widths", parseViewports, [1280]).option("--include <glob>", "only stories whose title/name match").option("--exclude <glob>", "skip stories whose title/name match").option("--wait-for-selector <selector>", "wait for this before each screenshot", "#storybook-root > *").option("--delay <ms>", "wait this long before each screenshot", parseDelay, 0).option("--build-name <name>", "separate builds of one project, like storybook").option("--shard <i/n>", "this shard and the shard count, or auto with a finalize step", parseShard).option("--nonce <id>", "shared by every shard of one build").option("--baseline-branch <branch>", "branch to compare against").option("--subset", "only some snapshots ran, do not mark others removed", false).option("--threshold <number>", "color difference threshold, 0 to 1, overrides project settings", parseThreshold).option("--strict", "fail when the service is not reachable", false).option("--dry-run", "capture and print the plan, upload nothing", false).action(storybookCommand);
 program.command("finalize").description("Finish a build whose shards ran with --shard auto").option("--build-name <name>", "the build name the shards used").option("--nonce <id>", "the nonce the shards used").option("--baseline-branch <branch>", "branch to compare against, for --skip-if-empty").option("--skip-if-empty", "create a build with no changes when no shard ran", false).option("--strict", "fail when the service is not reachable", false).action(finalizeCommand);
 try {
 	await program.parseAsync();