@coder/pixel-storybook 0.1.0

package/dist/shots/utils.d.ts

@@ -0,0 +1,33 @@
+import type { BrowserType, Page } from 'playwright-core';
+import type { log } from '../log.js';
+import type { StabilizationResult } from '../types.js';
+/**
+ * Wait until the page looks visually settled, up to `maxMs`.
+ *
+ * Returns a `StabilizationResult` describing how the wait concluded:
+ *
+ * - `stable`: web fonts loaded, every pending `<img>` resolved, one
+ *   animation frame committed, and the DOM stayed quiet for `idleMs`.
+ * - `fonts-not-ready` / `images-not-ready` / `unstable`: the cap was hit
+ *   waiting for the named step.
+ */
+export declare const waitForStability: (page: Page, { maxMs, idleMs }: {
+    maxMs: number;
+    idleMs?: number;
+}) => Promise<StabilizationResult>;
+export declare const waitForNetworkRequests: ({ page, logger, timeout, waitForFirstRequest, waitForLastRequest, ignoreUrls, }: {
+    page: Page;
+    logger: ReturnType<typeof log.item>;
+    timeout?: number;
+    waitForFirstRequest?: number;
+    waitForLastRequest?: number;
+    ignoreUrls?: string[];
+}) => Promise<unknown>;
+export declare const resizeViewportToFullscreen: ({ page }: {
+    page: Page;
+}) => Promise<void>;
+export declare const selectBreakpoints: (topLevelBreakpoints?: number[], modeBreakpoints?: number[], shotBreakpoints?: number[]) => number[];
+export declare const generateLabel: ({ breakpoint, browser, }: {
+    breakpoint?: number;
+    browser?: BrowserType;
+}) => string;

package/dist/shots/utils.js

@@ -0,0 +1,177 @@
+import { config } from '../config.js';
+/**
+ * Wait until the page looks visually settled, up to `maxMs`.
+ *
+ * Returns a `StabilizationResult` describing how the wait concluded:
+ *
+ * - `stable`: web fonts loaded, every pending `<img>` resolved, one
+ *   animation frame committed, and the DOM stayed quiet for `idleMs`.
+ * - `fonts-not-ready` / `images-not-ready` / `unstable`: the cap was hit
+ *   waiting for the named step.
+ */
+export const waitForStability = async (page, { maxMs, idleMs = 100 }) => {
+    if (maxMs <= 0) {
+        return { status: 'stable', elapsedMs: 0, capMs: maxMs };
+    }
+    const inner = await page.evaluate(async ({ maxMs, idleMs }) => {
+        const start = performance.now();
+        const deadline = start + maxMs;
+        const remaining = () => Math.max(0, deadline - performance.now());
+        const settled = (promise) => Promise.race([
+            promise.then(() => true),
+            new Promise((resolve) => setTimeout(() => resolve(false), remaining())),
+        ]);
+        // 1. Web fonts.
+        if (document.fonts?.ready) {
+            if (!(await settled(document.fonts.ready))) {
+                return {
+                    status: 'fonts-not-ready',
+                    elapsedMs: performance.now() - start,
+                };
+            }
+        }
+        // 2. Pending images.
+        const pendingImages = [...document.images].filter((img) => !img.complete);
+        if (pendingImages.length > 0) {
+            const all = Promise.all(pendingImages.map((img) => new Promise((resolve) => {
+                img.addEventListener('load', () => resolve(), { once: true });
+                img.addEventListener('error', () => resolve(), {
+                    once: true,
+                });
+            })));
+            if (!(await settled(all))) {
+                return {
+                    status: 'images-not-ready',
+                    elapsedMs: performance.now() - start,
+                };
+            }
+        }
+        // 3. One frame committed.
+        await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
+        // 4. DOM idle for `idleMs`, capped by the deadline.
+        if (remaining() <= 0) {
+            return {
+                status: 'unstable',
+                elapsedMs: performance.now() - start,
+            };
+        }
+        const stable = await new Promise((resolve) => {
+            const finish = (didSettle) => {
+                clearTimeout(idleTimer);
+                clearTimeout(capTimer);
+                observer.disconnect();
+                resolve(didSettle);
+            };
+            let idleTimer = setTimeout(() => finish(true), idleMs);
+            const capTimer = setTimeout(() => finish(false), remaining());
+            const observer = new MutationObserver(() => {
+                clearTimeout(idleTimer);
+                idleTimer = setTimeout(() => finish(true), idleMs);
+            });
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                characterData: true,
+            });
+        });
+        return {
+            status: stable ? 'stable' : 'unstable',
+            elapsedMs: performance.now() - start,
+        };
+    }, { maxMs, idleMs });
+    return { ...inner, capMs: maxMs };
+};
+const checkIgnoreUrls = (url, ignoreUrls) => {
+    for (const ignoreUrl of ignoreUrls) {
+        if (url.includes(ignoreUrl)) {
+            return true;
+        }
+    }
+    return false;
+};
+export const waitForNetworkRequests = async ({ page, logger, timeout = config.timeouts.networkRequests, waitForFirstRequest = config.waitForFirstRequest, waitForLastRequest = config.waitForLastRequest, ignoreUrls = [], }) => new Promise((resolve, reject) => {
+    let requestCounter = 0;
+    const requests = new Set();
+    let lastRequestTimeoutId;
+    const timeoutId = setTimeout(() => {
+        const pendingUrls = [...requests].map((request) => request.url());
+        logger.process('info', 'network', 'Pending requests:', pendingUrls);
+        cleanup();
+        reject(new Error('Timeout'));
+    }, timeout);
+    const firstRequestTimeoutId = setTimeout(() => {
+        cleanup();
+        resolve(true);
+    }, waitForFirstRequest);
+    const onRequest = (request) => {
+        if (!checkIgnoreUrls(request.url(), ignoreUrls)) {
+            clearTimeout(firstRequestTimeoutId);
+            clearTimeout(lastRequestTimeoutId);
+            requestCounter++;
+            requests.add(request);
+            logger.browser('info', 'network', `+ ${request.url()}`);
+        }
+    };
+    const onRequestFinished = async (request) => {
+        clearTimeout(lastRequestTimeoutId);
+        if (!checkIgnoreUrls(request.url(), ignoreUrls)) {
+            const failure = request.failure();
+            const response = await request.response();
+            requestCounter--;
+            requests.delete(request);
+            const statusText = failure
+                ? failure.errorText
+                : `${response?.status() ?? 'unknown'} ${response?.statusText() ?? 'unknown'}`;
+            logger.browser('info', 'network', `- ${request.url()} [${statusText}]`);
+        }
+        lastRequestTimeoutId = setTimeout(() => {
+            // `requestCounter` can be below 0 if requests have completed before they were being tracked
+            if (requestCounter <= 0) {
+                cleanup();
+                resolve(true);
+            }
+        }, waitForLastRequest);
+    };
+    function cleanup() {
+        clearTimeout(timeoutId);
+        clearTimeout(firstRequestTimeoutId);
+        clearTimeout(lastRequestTimeoutId);
+        page.removeListener('request', onRequest);
+        page.removeListener('requestfinished', onRequestFinished);
+        page.removeListener('requestfailed', onRequestFinished);
+    }
+    page.on('request', onRequest);
+    page.on('requestfinished', onRequestFinished);
+    page.on('requestfailed', onRequestFinished);
+});
+export const resizeViewportToFullscreen = async ({ page }) => {
+    const viewport = await page.evaluate(async () => new Promise((resolve) => {
+        const { body } = document;
+        const html = document.documentElement;
+        const height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
+        const width = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
+        resolve({ height, width });
+    }));
+    await page.setViewportSize({
+        width: Math.max(page.viewportSize()?.width ?? 800, viewport.width),
+        height: viewport.height,
+    });
+};
+export const selectBreakpoints = (topLevelBreakpoints, modeBreakpoints, shotBreakpoints) => {
+    if (shotBreakpoints && shotBreakpoints.length > 0) {
+        return shotBreakpoints;
+    }
+    if (modeBreakpoints && modeBreakpoints.length > 0) {
+        return modeBreakpoints;
+    }
+    return topLevelBreakpoints ?? [];
+};
+export const generateLabel = ({ breakpoint, browser, }) => {
+    const widthLabel = breakpoint && breakpoint > 0 ? `w${breakpoint}px` : '';
+    const browserLabel = browser?.name() ?? '';
+    const labels = [widthLabel, browserLabel].filter(Boolean);
+    if (labels.length === 0)
+        return '';
+    return `__[${labels.join('|')}]`;
+};

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+import type * as z from 'zod';
+import type { BrowserSchema, MaskSchema, ShotItemSchema, ShotModeSchema, StabilizationResultSchema, StabilizationStatusSchema } from './schemas.js';
+export type BrowserName = z.infer<typeof BrowserSchema>;
+export type ShotMode = z.infer<typeof ShotModeSchema>;
+export type Mask = z.infer<typeof MaskSchema>;
+export type ShotItem = z.infer<typeof ShotItemSchema>;
+export type StabilizationStatus = z.infer<typeof StabilizationStatusSchema>;
+export type StabilizationResult = z.infer<typeof StabilizationResultSchema>;
+export type ExtendedShotItem = ShotItem & {
+    uniqueName: string;
+    hash: string;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/upload.d.ts

@@ -0,0 +1,10 @@
+import type { PlatformModeConfig } from './config.js';
+import type { ExtendedShotItem } from './types.js';
+export declare const uploadRequiredShots: ({ config, apiToken, uploadToken, uploadUrl, requiredFileHashes, extendedShotItems, }: {
+    config: PlatformModeConfig;
+    apiToken: string;
+    uploadToken: string;
+    uploadUrl: string;
+    requiredFileHashes: string[];
+    extendedShotItems: ExtendedShotItem[];
+}) => Promise<boolean>;

package/dist/upload.js

@@ -0,0 +1,32 @@
+import { uploadShot } from './api.js';
+import { mapLimit } from './concurrency.js';
+import { MEDIA_UPLOAD_CONCURRENCY } from './constants.js';
+import { log } from './log.js';
+import { parseHrtimeToSeconds } from './utils.js';
+export const uploadRequiredShots = async ({ config, apiToken, uploadToken, uploadUrl, requiredFileHashes, extendedShotItems, }) => {
+    if (requiredFileHashes.length > 0) {
+        log.process('info', 'api', '📤 Uploading shots');
+        const uploadStart = process.hrtime();
+        const requiredShotItems = extendedShotItems.filter((shotItem) => requiredFileHashes.includes(shotItem.hash));
+        await mapLimit([...requiredShotItems.entries()], MEDIA_UPLOAD_CONCURRENCY, async ([index, shotItem]) => {
+            const logger = log.item({
+                shotMode: shotItem.shotMode,
+                uniqueItemId: shotItem.shotName,
+                itemIndex: index,
+                totalItems: requiredShotItems.length,
+            });
+            await uploadShot({
+                config,
+                apiToken,
+                uploadToken,
+                uploadUrl,
+                name: `${shotItem.shotMode}/${shotItem.shotName}`,
+                file: shotItem.filePathCurrent,
+                logger,
+            });
+        });
+        const uploadStop = process.hrtime(uploadStart);
+        log.process('info', 'api', `📤 Uploading shots took ${parseHrtimeToSeconds(uploadStop)} seconds`);
+    }
+    return true;
+};

package/dist/uploadStorybook.d.ts

@@ -0,0 +1,2 @@
+import type { PlatformModeConfig } from './config.js';
+export declare const uploadStorybook: (config: PlatformModeConfig, apiToken: string) => Promise<void>;

package/dist/uploadStorybook.js

@@ -0,0 +1,56 @@
+import { execSync } from 'node:child_process';
+import { existsSync, unlinkSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { isAbsolute, join, resolve } from 'node:path';
+import { uploadStorybookBuild } from './api.js';
+import { log } from './log.js';
+import { parseHrtimeToSeconds } from './utils.js';
+const resolveStorybookBuildPath = (config) => {
+    const storybookUrl = config.storybookShots?.storybookUrl;
+    if (!storybookUrl) {
+        log.process('error', 'general', 'No storybookShots.storybookUrl configured. Cannot determine storybook build path.');
+        process.exit(1);
+    }
+    // Remote URLs are not supported — we need a local directory to archive
+    if (storybookUrl.startsWith('http://') ||
+        storybookUrl.startsWith('https://')) {
+        log.process('error', 'general', 'upload-storybook requires a local storybook build directory, not a remote URL.');
+        process.exit(1);
+    }
+    const cleaned = storybookUrl.replace(/^file:\/\//, '');
+    if (isAbsolute(cleaned)) {
+        return cleaned;
+    }
+    return resolve(process.cwd(), cleaned);
+};
+const createArchive = (buildPath) => {
+    const archivePath = join(tmpdir(), `pixel-storybook-${Date.now()}.tar.gz`);
+    log.process('info', 'general', `📦 Archiving storybook build: ${buildPath}`);
+    execSync(`tar czf "${archivePath}" -C "${buildPath}" .`, {
+        stdio: 'pipe',
+    });
+    log.process('info', 'general', `📦 Archive created: ${archivePath}`);
+    return archivePath;
+};
+export const uploadStorybook = async (config, apiToken) => {
+    const executionStart = process.hrtime();
+    const buildPath = resolveStorybookBuildPath(config);
+    if (!existsSync(buildPath)) {
+        log.process('error', 'general', `Storybook build directory not found: ${buildPath}`);
+        process.exit(1);
+    }
+    log.process('info', 'general', `🚀 Uploading storybook build from: ${buildPath}`);
+    let archivePath;
+    try {
+        archivePath = createArchive(buildPath);
+        await uploadStorybookBuild(config, apiToken, archivePath);
+        log.process('info', 'general', '✅ Storybook build uploaded successfully');
+    }
+    finally {
+        if (archivePath && existsSync(archivePath)) {
+            unlinkSync(archivePath);
+        }
+    }
+    const executionStop = process.hrtime(executionStart);
+    log.process('info', 'general', `⏱  Storybook upload took ${parseHrtimeToSeconds(executionStop)} seconds`);
+};

package/dist/utils.d.ts

@@ -0,0 +1,50 @@
+import { type BrowserType } from 'playwright-core';
+import type { ShotItem } from './types.js';
+export type ShardConfig = {
+    current: number;
+    total: number;
+};
+export declare const getShardConfig: () => ShardConfig | undefined;
+type FilenameWithPath = {
+    name: string;
+    path: string;
+};
+type FilenameWithAllPaths = {
+    name: string;
+    path: string;
+    pathCurrent?: string;
+};
+type Files = {
+    baseline: FilenameWithPath[];
+    current: FilenameWithPath[];
+    difference: FilenameWithPath[];
+};
+export type Changes = {
+    difference: FilenameWithAllPaths[];
+    deletion: FilenameWithAllPaths[];
+    addition: FilenameWithAllPaths[];
+};
+export declare const isUpdateMode: () => boolean;
+export declare const isLocalDebugMode: () => boolean;
+export declare const shallGenerateMeta: () => boolean;
+export declare const getChanges: (files: Files) => Changes;
+type ExtendFileName = {
+    fileName: string;
+    extension: 'after' | 'before' | 'difference';
+};
+export declare const extendFileName: ({ fileName, extension }: ExtendFileName) => string;
+export declare const createShotsFolders: () => void;
+export declare const sleep: (ms: number) => Promise<unknown>;
+export declare const removeFilesInFolder: (path: string, excludePaths?: string[]) => void;
+export declare const getBrowser: () => BrowserType;
+export declare const getBrowsers: () => BrowserType[];
+export declare const getVersion: () => string | undefined;
+export declare const readDirIntoShotItems: (path: string) => ShotItem[];
+export declare const parseHrtimeToSeconds: (hrtime: [number, number]) => string;
+export declare const exitProcess: (properties: {
+    exitCode?: 0 | 1;
+}) => never;
+export declare const hashFile: (filePath: string) => string;
+export declare const featureNotSupported: (feature: string) => never;
+export declare const launchBrowser: (_browser?: BrowserType) => Promise<import("playwright-core").Browser>;
+export {};

package/dist/utils.js

@@ -0,0 +1,194 @@
+import * as crypto from 'node:crypto';
+import { existsSync, mkdirSync, readdirSync, readFileSync, unlinkSync, writeFileSync, } from 'node:fs';
+import { createRequire } from 'node:module';
+import { join, normalize } from 'node:path';
+import { parseArgs } from 'node:util';
+import { chromium, firefox, webkit } from 'playwright-core';
+import { config, isPlatformModeConfig } from './config.js';
+import { notSupported } from './constants.js';
+import { log } from './log.js';
+const { positionals, values } = parseArgs({
+    args: process.argv.slice(2),
+    options: {
+        m: { type: 'string', short: 'm' },
+        shard: { type: 'string' },
+    },
+    allowPositionals: true,
+    strict: false,
+});
+export const getShardConfig = () => {
+    const raw = values.shard ??
+        process.env.LOST_PIXEL_SHARD;
+    if (!raw || typeof raw !== 'string')
+        return undefined;
+    const match = raw.match(/^(\d+)\/(\d+)$/);
+    if (!match) {
+        throw new Error(`Invalid --shard format "${raw}". Expected "current/total" (e.g. "2/4").`);
+    }
+    const current = Number(match[1]);
+    const total = Number(match[2]);
+    if (total < 1)
+        throw new Error(`Shard total must be >= 1, got ${total}`);
+    if (current < 1 || current > total) {
+        throw new Error(`Shard current must be between 1 and ${total}, got ${current}`);
+    }
+    return { current, total };
+};
+export const isUpdateMode = () => {
+    return (positionals.includes('update') ||
+        values.m === 'update' ||
+        process.env.LOST_PIXEL_MODE === 'update');
+};
+export const isLocalDebugMode = () => {
+    return (positionals.includes('local') || process.env.LOST_PIXEL_LOCAL === 'true');
+};
+export const shallGenerateMeta = () => {
+    return (positionals.includes('meta') ||
+        process.env.LOST_PIXEL_GENERATE_META === 'true');
+};
+export const getChanges = (files) => {
+    return {
+        difference: files.difference
+            .map((file) => ({
+            ...file,
+            pathCurrent: files.current.find(({ name }) => name === file.name)?.path, // Keep track of custom shots path
+        }))
+            .sort((a, b) => a.name.localeCompare(b.name)),
+        deletion: files.baseline
+            .filter((file1) => !files.current.some((file2) => file1.name === file2.name))
+            .sort((a, b) => a.name.localeCompare(b.name)),
+        addition: files.current
+            .filter((file1) => !files.baseline.some((file2) => file1.name === file2.name))
+            .sort((a, b) => a.name.localeCompare(b.name)),
+    };
+};
+export const extendFileName = ({ fileName, extension }) => {
+    const parts = fileName.split('.').filter((part) => part !== '');
+    const extensionIndex = parts.length - 1;
+    if (parts.length === 1) {
+        return `${extension}.${parts[0]}`;
+    }
+    if (parts.length === 0) {
+        return extension;
+    }
+    parts[extensionIndex] = `${extension}.${parts[extensionIndex]}`;
+    return parts.join('.');
+};
+export const createShotsFolders = () => {
+    const paths = isPlatformModeConfig(config)
+        ? [config.imagePathCurrent]
+        : [
+            config.imagePathBaseline,
+            config.imagePathCurrent,
+            config.imagePathDifference,
+        ];
+    for (const path of paths) {
+        if (!existsSync(path)) {
+            mkdirSync(path, { recursive: true });
+        }
+    }
+    const ignoreFile = normalize(join(config.imagePathCurrent, '..', '.gitignore'));
+    if (!existsSync(ignoreFile)) {
+        writeFileSync(ignoreFile, 'current\ndifference\n');
+    }
+};
+export const sleep = async (ms) => new Promise((resolve) => {
+    setTimeout(resolve, ms);
+});
+export const removeFilesInFolder = (path, excludePaths) => {
+    const files = readdirSync(path);
+    const filesPathsIgnoringExclude = files
+        .map((file) => join(path, file))
+        .filter((filePath) => !excludePaths?.includes(filePath));
+    log.process('info', 'general', `Removing ${filesPathsIgnoringExclude.length} files from ${path}`);
+    for (const filePath of filesPathsIgnoringExclude) {
+        unlinkSync(filePath);
+    }
+};
+const convertBrowser = (browserKey) => {
+    switch (browserKey) {
+        case 'chromium': {
+            return chromium;
+        }
+        case 'firefox': {
+            return firefox;
+        }
+        case 'webkit': {
+            return webkit;
+        }
+        default: {
+            return chromium;
+        }
+    }
+};
+export const getBrowser = () => {
+    if (Array.isArray(config.browser))
+        return convertBrowser(config.browser[0]);
+    return convertBrowser(config.browser);
+};
+export const getBrowsers = () => {
+    if (!Array.isArray(config.browser) || config.browser.length === 0)
+        return [getBrowser()];
+    const browsers = config.browser.map((key) => convertBrowser(key));
+    return [...new Set(browsers)];
+};
+const require = createRequire(import.meta.url);
+export const getVersion = () => {
+    try {
+        const packageJson = require('../package.json');
+        return packageJson.version;
+    }
+    catch { }
+    return undefined;
+};
+const fileNameWithoutExtension = (fileName) => {
+    return fileName.split('.').slice(0, -1).join('.');
+};
+export const readDirIntoShotItems = (path) => {
+    const files = readdirSync(path);
+    return files
+        .filter((name) => name.endsWith('.png'))
+        .map((fileNameWithExt) => {
+        const fileName = fileNameWithoutExtension(fileNameWithExt);
+        return {
+            id: fileName,
+            shotName: fileName,
+            shotMode: 'storybook',
+            filePathBaseline: isPlatformModeConfig(config)
+                ? notSupported
+                : join(config.imagePathBaseline, fileNameWithExt),
+            filePathCurrent: join(path, fileNameWithExt),
+            filePathDifference: isPlatformModeConfig(config)
+                ? notSupported
+                : join(config.imagePathDifference, fileNameWithExt),
+            url: fileName,
+            // TODO: custom shots take thresholds only from config - not possible to source configs from individual story
+            threshold: config.threshold,
+        };
+    });
+};
+export const parseHrtimeToSeconds = (hrtime) => {
+    const seconds = (hrtime[0] + hrtime[1] / 1e9).toFixed(3);
+    return seconds;
+};
+export const exitProcess = (properties) => {
+    process.exit(properties.exitCode ?? 1);
+};
+const hashBuffer = (buffer) => {
+    const hashSum = crypto.createHash('sha256');
+    hashSum.update(buffer);
+    return hashSum.digest('hex');
+};
+export const hashFile = (filePath) => {
+    const file = readFileSync(filePath);
+    return hashBuffer(file);
+};
+export const featureNotSupported = (feature) => {
+    log.process('error', 'general', `${feature} is not supported in this configuration mode`);
+    process.exit(1);
+};
+export const launchBrowser = async (_browser) => {
+    const browserType = _browser ?? getBrowser();
+    const browserName = browserType.name();
+    return browserType.launch(config.browserLaunchOptions?.[browserName]);
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@coder/pixel-storybook",
+  "version": "0.1.0",
+  "description": "Visual regression testing tool for Storybook",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "bin": {
+    "pixel-storybook": "dist/bin.js"
+  },
+  "files": [
+    "dist/**/*.js",
+    "dist/**/*.d.ts"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "repository": "https://github.com/coder/pixel-storybook",
+  "keywords": [],
+  "authors": [
+    "Jeremy Ruppel <jeremy@coder.com>",
+    "McKayla Washburn <kayla@coder.com>"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "get-port-please": "3.1.2",
+    "odiff-bin": "2.6.1",
+    "pixelmatch": "7.2.0",
+    "pngjs": "7.0.0",
+    "serve-handler": "6.1.7",
+    "tsx": "^4.22.0",
+    "zod": "3.23.8"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.4.15",
+    "@playwright/test": "1.60.0",
+    "@types/node": "22.9.3",
+    "@types/pngjs": "6.0.5",
+    "@types/serve-handler": "6.1.4",
+    "typescript": "5.6.2",
+    "vitest": "^4.1.6"
+  },
+  "peerDependencies": {
+    "playwright-core": ">=1.47.2"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "build": "rm -rf dist/ && tsc",
+    "lint": "biome check .",
+    "lint-fix": "biome check --fix .",
+    "release": "np --no-publish",
+    "version": "./update-versions.sh",
+    "dev": "node --loader ts-node/esm src/bin.ts",
+    "start": "NODE_ENV=production node dist/bin.js",
+    "knip": "knip"
+  }
+}