heroshot 0.16.0 → 0.17.0

package/dist/cli/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { C as intro, D as setVerbose, E as outro, O as spinner, S as error, T as note, _ as loadConfig, a as launchBrowser, c as generateSessionKey, d as loadSession, f as saveLocalKey, g as getConfigPath, h as ensureHeroshotDirectory, k as verbose, l as getSessionPath, m as sessionExists, n as snippetAction, o as DEFAULT_VIEWPORT, p as saveSession, r as sync, s as EDITOR_DIR, u as loadLocalKey, v as saveConfig, w as log, x as generateUid, y as VIEWPORT_PRESETS } from "../snippet-Fc-PkcTD.js";
+import { C as intro, D as setVerbose, E as outro, O as spinner, S as error, T as note, _ as loadConfig, a as launchBrowser, c as generateSessionKey, d as loadSession, f as saveLocalKey, g as getConfigPath, h as ensureHeroshotDirectory, k as verbose, l as getSessionPath, m as sessionExists, n as snippetAction, o as DEFAULT_VIEWPORT, p as saveSession, r as sync, s as EDITOR_DIR, u as loadLocalKey, v as saveConfig, w as log, x as generateUid, y as VIEWPORT_PRESETS } from "../snippet-Cm6b-EdU.js";
 import { existsSync, readFileSync, rmSync } from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";

package/dist/mcp/index.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { _ as loadConfig, b as screenshotSchema, g as getConfigPath, i as filterScreenshots, r as sync, t as generateSnippets, v as saveConfig, x as generateUid } from "../snippet-Fc-PkcTD.js";
+import { _ as loadConfig, b as screenshotSchema, g as getConfigPath, i as filterScreenshots, r as sync, t as generateSnippets, v as saveConfig, x as generateUid } from "../snippet-Cm6b-EdU.js";
 import { ZodOptional, z } from "zod";
 import * as z3rt from "zod/v3";
 import { ZodFirstPartyTypeKind } from "zod/v3";

package/dist/{snippet-Fc-PkcTD.js → snippet-Cm6b-EdU.js}

@@ -371,7 +371,8 @@ const configSchema = z.object({
 	browser: browserSchema.optional().describe("Default browser settings applied to all screenshots"),
 	workers: z.number().int().min(1).optional().describe("Number of parallel capture workers (default: 1)"),
 	screenshots: z.array(screenshotSchema).default([]).describe("Screenshot definitions"),
-	hiddenElements: z.record(z.string(), z.array(z.string())).optional().describe("Elements to hide per domain (hostname → CSS selectors)")
+	hiddenElements: z.record(z.string(), z.array(z.string())).optional().describe("Elements to hide per domain (hostname → CSS selectors)"),
+	locales: z.array(z.string().min(1)).optional().describe("Locale codes (e.g., [\"en\", \"de\"]).")
 });
 
 //#endregion
@@ -731,7 +732,9 @@ async function launchBrowser(options = {}) {
 		...options.storageState && { storageState: options.storageState },
 		...options.colorScheme && { colorScheme: options.colorScheme },
 		...options.reducedMotion && { reducedMotion: options.reducedMotion },
-		...options.userAgent && { userAgent: options.userAgent }
+		...options.userAgent && { userAgent: options.userAgent },
+		...options.locale && { locale: options.locale },
+		...options.locale && { extraHTTPHeaders: { "Accept-Language": options.locale } }
 	});
 	return {
 		browser,
@@ -778,12 +781,13 @@ function resolveOutputDirectory(configPath, configOutputDirectory, override) {
 /**
 * Calculate total number of captures needed.
 */
-function calculateTotalCaptures(screenshots, schemeCount) {
+function calculateTotalCaptures(screenshots, schemeCount, localeCount = 1) {
 	let total = 0;
 	const adjustedSchemeCount = Math.max(1, schemeCount);
+	const adjustedLocaleCount = Math.max(1, localeCount);
 	for (const screenshot of screenshots) {
 		const viewportCount = screenshot.viewports?.length ?? 1;
-		total += viewportCount * adjustedSchemeCount;
+		total += viewportCount * adjustedSchemeCount * adjustedLocaleCount;
 	}
 	return total;
 }
@@ -814,6 +818,23 @@ function buildBrowserOptions(config) {
 	};
 }
 
+//#endregion
+//#region src/utils/localeUrl.ts
+/**
+* Apply locale to a URL by replacing the {locale} placeholder.
+* If the URL contains no placeholder, it is returned unchanged.
+*
+* @example
+* applyLocale('http://localhost:5173/{locale}/about', 'de')
+* // → 'http://localhost:5173/de/about'
+*
+* applyLocale('http://localhost:5173/about', 'de')
+* // → 'http://localhost:5173/about'
+*/
+function applyLocale(url, locale) {
+	return url.replaceAll("{locale}", locale);
+}
+
 //#endregion
 //#region src/utils/parseViewport.ts
 /**
@@ -861,7 +882,7 @@ function slugifySegment(text) {
 * Supports subdirectory paths via forward slashes in the name (e.g., "registry/login-01").
 */
 function generateScreenshotFilename(options) {
-	const { name, viewport, colorScheme, format = "png" } = options;
+	const { name, viewport, colorScheme, locale, format = "png" } = options;
 	const segments = name.split("/").map(slugifySegment).filter(Boolean);
 	const directory = segments.length > 1 ? segments.slice(0, -1).join("/") : "";
 	const parts = [segments.at(-1) ?? ""];
@@ -869,7 +890,8 @@ function generateScreenshotFilename(options) {
 	if (colorScheme) parts.push(colorScheme);
 	const extension = format === "jpeg" ? "jpg" : "png";
 	const filename = `${parts.join("-")}.${extension}`;
-	return directory ? `${directory}/${filename}` : filename;
+	const pathWithDirectory = directory ? `${directory}/${filename}` : filename;
+	return locale ? `${locale}/${pathWithDirectory}` : pathWithDirectory;
 }
 
 //#endregion
@@ -1749,8 +1771,12 @@ async function captureElementScreenshot(options) {
 /**
 * Build a variant ID suffix.
 */
-function buildVariantSuffix(viewportName, colorScheme) {
-	return [viewportName, colorScheme].filter(Boolean).join("-");
+function buildVariantSuffix(viewportName, colorScheme, locale) {
+	return [
+		locale,
+		viewportName,
+		colorScheme
+	].filter(Boolean).join("-");
 }
 /**
 * Show capture results and return summary.
@@ -1854,18 +1880,20 @@ async function captureScreenshot(page, screenshot, outputDirectory, captureOptio
 		name,
 		viewport: variant.viewportName,
 		colorScheme: variant.colorScheme,
+		locale: variant.locale,
 		format
 	});
-	const suffix = buildVariantSuffix(variant.viewportName, variant.colorScheme);
+	const suffix = buildVariantSuffix(variant.viewportName, variant.colorScheme, variant.locale);
 	verbose(`Capturing: ${name}${suffix ? ` (${suffix})` : ""}`);
-	const navResult = await navigateAndPrepare(page, url, variant.colorScheme);
+	const effectiveUrl = variant.localeUrl ?? url;
+	const navResult = await navigateAndPrepare(page, effectiveUrl, variant.colorScheme);
 	if (!navResult.success) return {
 		...navResult,
 		filename
 	};
 	if (captureOptions.hiddenElements) {
 		const { hiddenElements: hiddenByDomain } = captureOptions;
-		const { hostname } = new URL(url);
+		const { hostname } = new URL(effectiveUrl);
 		if (hiddenByDomain[hostname]?.length) await executeHide(page, {
 			type: "hide",
 			selectors: hiddenByDomain[hostname]
@@ -1928,7 +1956,7 @@ async function captureAndLog(page, screenshot, outputDirectory, captureOptions,
 			await page.waitForTimeout(delay);
 		}
 	}
-	const suffix = buildVariantSuffix(variant.viewportName, variant.colorScheme);
+	const suffix = buildVariantSuffix(variant.viewportName, variant.colorScheme, variant.locale);
 	const displayName = suffix ? `${screenshot.name} (${suffix})` : screenshot.name;
 	const idSuffix = suffix ? `-${suffix}` : "";
 	return {
@@ -1946,31 +1974,41 @@ async function captureAndLog(page, screenshot, outputDirectory, captureOptions,
 * Parallel screenshot capture with multiple workers.
 */
 /**
-* Build capture jobs from screenshots and schemes.
+* Build capture jobs from screenshots, schemes, and locales.
 * Each job represents a single screenshot capture task.
 */
-function buildCaptureJobs(screenshots, schemes) {
+function buildCaptureJobs(screenshots, schemes, locales = []) {
 	const jobs = [];
 	const hasMultipleSchemes = schemes.length > 1;
 	const schemesToCapture = schemes.length === 0 ? [void 0] : schemes;
+	const localesToCapture = locales.length === 0 ? [void 0] : locales;
 	for (const screenshot of screenshots) {
 		const viewportVariants = screenshot.viewports ?? [];
 		const hasMultipleViewports = viewportVariants.length > 1;
-		for (const scheme of schemesToCapture) if (viewportVariants.length === 0) jobs.push({
-			screenshot,
-			colorScheme: scheme,
-			hasMultipleSchemes,
-			hasMultipleViewports: false
-		});
-		else for (const viewportVariant of viewportVariants) {
-			const parsedViewport = parseViewport(viewportVariant);
-			jobs.push({
+		for (const locale of localesToCapture) {
+			const localeUrl = locale && screenshot.url.includes("{locale}") ? applyLocale(screenshot.url, locale) : void 0;
+			for (const scheme of schemesToCapture) if (viewportVariants.length === 0) jobs.push({
 				screenshot,
 				colorScheme: scheme,
-				viewport: parsedViewport,
 				hasMultipleSchemes,
-				hasMultipleViewports
+				hasMultipleViewports: false,
+				locale,
+				locales,
+				localeUrl
 			});
+			else for (const viewportVariant of viewportVariants) {
+				const parsedViewport = parseViewport(viewportVariant);
+				jobs.push({
+					screenshot,
+					colorScheme: scheme,
+					viewport: parsedViewport,
+					hasMultipleSchemes,
+					hasMultipleViewports,
+					locale,
+					locales,
+					localeUrl
+				});
+			}
 		}
 	}
 	return jobs;
@@ -1987,12 +2025,13 @@ async function executeBatch(jobs, outputDirectory, captureOptions, browserOption
 		storageState: browserOptions.storageState,
 		bypassCSP: browserOptions.bypassCSP,
 		reducedMotion: browserOptions.reducedMotion,
-		userAgent: browserOptions.userAgent
+		userAgent: browserOptions.userAgent,
+		locale: jobs[0]?.locale
 	});
 	const page = await context.newPage();
 	try {
 		for (const job of jobs) {
-			const { screenshot, colorScheme, viewport, hasMultipleSchemes, hasMultipleViewports } = job;
+			const { screenshot, colorScheme, viewport, hasMultipleSchemes, hasMultipleViewports, locale, locales } = job;
 			if (viewport) await page.setViewportSize({
 				width: viewport.width,
 				height: viewport.height
@@ -2000,7 +2039,9 @@ async function executeBatch(jobs, outputDirectory, captureOptions, browserOption
 			if (colorScheme) await page.emulateMedia({ colorScheme });
 			const result = await captureAndLog(page, screenshot, outputDirectory, captureOptions, {
 				viewportName: hasMultipleViewports ? viewport?.name : void 0,
-				colorScheme: hasMultipleSchemes ? colorScheme : void 0
+				colorScheme: hasMultipleSchemes ? colorScheme : void 0,
+				locale: (locales ?? []).length > 1 ? locale : void 0,
+				localeUrl: job.localeUrl
 			});
 			results.push(result);
 			onProgress(result);
@@ -2011,16 +2052,17 @@ async function executeBatch(jobs, outputDirectory, captureOptions, browserOption
 	return results;
 }
 /**
-* Group jobs by URL to minimize page navigations.
-* Jobs for the same URL are kept together.
+* Group jobs by effective URL + locale to minimize page navigations.
+* Jobs for the same URL AND same locale are kept together.
+* Locale is a browser context-level setting, so different locales must be separate groups.
 */
 function groupJobsByUrl(jobs) {
 	const groups = /* @__PURE__ */ new Map();
 	for (const job of jobs) {
-		const { url } = job.screenshot;
-		const group = groups.get(url) ?? [];
+		const key = `${job.localeUrl ?? job.screenshot.url}::${job.locale ?? ""}`;
+		const group = groups.get(key) ?? [];
 		group.push(job);
-		groups.set(url, group);
+		groups.set(key, group);
 	}
 	return groups;
 }
@@ -2065,11 +2107,15 @@ async function captureParallel(options) {
 //#endregion
 //#region src/sync/schemeCapture.ts
 /**
-* Capture screenshots for a single color scheme.
+* Capture screenshots for a single color scheme + locale combination.
 * Launches a browser, captures all screenshots, and closes the browser.
+*
+* Locale is a browser context-level setting in Playwright, so each locale
+* gets its own browser launch. This ensures Accept-Language and JS locale APIs
+* (Intl, navigator.language) reflect the correct locale for all pages captured.
 */
 async function captureWithScheme(options) {
-	const { screenshots, outputDirectory, captureOptions, browserOptions, colorScheme, schemes, captureSpinner, progress } = options;
+	const { screenshots, outputDirectory, captureOptions, browserOptions, colorScheme, schemes, locale, locales, captureSpinner, progress } = options;
 	const results = [];
 	const { browser, context } = await launchBrowser({
 		headless: !browserOptions.headed,
@@ -2079,22 +2125,32 @@ async function captureWithScheme(options) {
 		colorScheme,
 		bypassCSP: browserOptions.bypassCSP,
 		reducedMotion: browserOptions.reducedMotion,
-		userAgent: browserOptions.userAgent
+		userAgent: browserOptions.userAgent,
+		locale
 	});
 	const page = await context.newPage();
 	if (colorScheme) await page.emulateMedia({ colorScheme });
 	const hasMultipleSchemes = schemes.length > 1;
+	const hasMultipleLocales = locales.length > 1;
 	for (const screenshot of screenshots) {
 		const viewportVariants = screenshot.viewports ?? [];
 		const hasMultipleViewports = viewportVariants.length > 1;
+		const localeUrl = locale && screenshot.url.includes("{locale}") ? applyLocale(screenshot.url, locale) : void 0;
 		if (viewportVariants.length === 0) {
 			progress.captured++;
-			const variant = { colorScheme: hasMultipleSchemes ? colorScheme : void 0 };
-			const suffix = variant.colorScheme ? ` (${variant.colorScheme})` : "";
-			captureSpinner.message(`Capturing ${progress.captured}/${progress.total}: ${screenshot.name}${suffix}`);
+			const variant = {
+				colorScheme: hasMultipleSchemes ? colorScheme : void 0,
+				locale: hasMultipleLocales ? locale : void 0,
+				localeUrl
+			};
+			const suffix = [variant.locale, variant.colorScheme].filter(Boolean).join(", ");
+			const suffixDisplay = suffix ? ` (${suffix})` : "";
+			captureSpinner.message(`Capturing ${progress.captured}/${progress.total}: ${screenshot.name}${suffixDisplay}`);
 			const result = await captureAndLog(page, screenshot, outputDirectory, captureOptions, variant);
 			results.push(result);
-		} else for (const viewportVariant of viewportVariants) {
+			continue;
+		}
+		for (const viewportVariant of viewportVariants) {
 			const parsedViewport = parseViewport(viewportVariant);
 			await page.setViewportSize({
 				width: parsedViewport.width,
@@ -2103,9 +2159,15 @@ async function captureWithScheme(options) {
 			progress.captured++;
 			const variant = {
 				viewportName: hasMultipleViewports ? parsedViewport.name : void 0,
-				colorScheme: hasMultipleSchemes ? colorScheme : void 0
+				colorScheme: hasMultipleSchemes ? colorScheme : void 0,
+				locale: hasMultipleLocales ? locale : void 0,
+				localeUrl
 			};
-			const suffix = [variant.viewportName, variant.colorScheme].filter(Boolean).join(", ");
+			const suffix = [
+				variant.locale,
+				variant.viewportName,
+				variant.colorScheme
+			].filter(Boolean).join(", ");
 			const suffixDisplay = suffix ? ` (${suffix})` : "";
 			captureSpinner.message(`Capturing ${progress.captured}/${progress.total}: ${screenshot.name}${suffixDisplay}`);
 			const result = await captureAndLog(page, screenshot, outputDirectory, captureOptions, variant);
@@ -2204,9 +2266,9 @@ function handleStaleFiles(outputDirectory, results, options) {
 * Execute screenshot capture (parallel or sequential based on workers).
 */
 async function executeCapture(context) {
-	const { screenshots, outputDirectory, captureOptions, browserOptions, schemes, workers, captureSpinner, progress } = context;
+	const { screenshots, outputDirectory, captureOptions, browserOptions, schemes, locales, workers, captureSpinner, progress } = context;
 	if (workers > 1) return captureParallel({
-		jobs: buildCaptureJobs(screenshots, schemes),
+		jobs: buildCaptureJobs(screenshots, schemes, locales),
 		outputDirectory,
 		captureOptions,
 		browserOptions,
@@ -2216,7 +2278,8 @@ async function executeCapture(context) {
 	});
 	const results = [];
 	const schemesToCapture = schemes.length === 0 ? [void 0] : schemes;
-	for (const colorScheme of schemesToCapture) {
+	const localesToCapture = locales.length === 0 ? [void 0] : locales;
+	for (const locale of localesToCapture) for (const colorScheme of schemesToCapture) {
 		const schemeResults = await captureWithScheme({
 			screenshots,
 			outputDirectory,
@@ -2224,6 +2287,8 @@ async function executeCapture(context) {
 			browserOptions,
 			colorScheme,
 			schemes,
+			locale,
+			locales,
 			captureSpinner,
 			progress
 		});
@@ -2265,8 +2330,9 @@ async function sync(options = {}) {
 	const outputDirectory = resolveOutputDirectory(configPath, config.outputDirectory, options.outputDirectory);
 	const storageState = loadEncryptedSession(options.sessionKey);
 	const schemes = getColorSchemes(config.browser?.colorScheme);
+	const locales = config.locales ?? [];
 	const captureOptions = buildCaptureOptions(config, options.viewportOnly);
-	const totalToCapture = calculateTotalCaptures(screenshots, schemes.length);
+	const totalToCapture = calculateTotalCaptures(screenshots, schemes.length, Math.max(1, locales.length));
 	const browserOptions = {
 		...buildBrowserOptions(config),
 		storageState,
@@ -2284,6 +2350,7 @@ async function sync(options = {}) {
 			captureOptions,
 			browserOptions,
 			schemes,
+			locales,
 			workers,
 			captureSpinner,
 			progress: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heroshot",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "description": "Define your screenshots once, update them forever with one command",
   "type": "module",
   "author": "Ondrej Machala",