heroshot 0.2.0 → 0.3.0

package/README.md

@@ -5,18 +5,43 @@
 <h1 align="center">heroshot</h1>
 
 <p align="center">
-  <strong>Screenshots that stay true.</strong><br>
-  Your UI evolves. Heroshot keeps your docs and marketing in sync - automatically.
+  <a href="https://www.npmjs.com/package/heroshot"><img src="https://img.shields.io/npm/v/heroshot?style=for-the-badge&logo=npm" alt="npm version"></a>
+  <a href="https://github.com/omachala/heroshot/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/heroshot?style=for-the-badge" alt="license"></a>
+  <a href="https://codecov.io/gh/omachala/heroshot"><img src="https://img.shields.io/codecov/c/github/omachala/heroshot?style=for-the-badge" alt="coverage"></a>
+  <a href="https://sonarcloud.io/summary/new_code?id=omachala_heroshot"><img src="https://img.shields.io/sonar/quality_gate/omachala_heroshot?server=https%3A%2F%2Fsonarcloud.io&style=for-the-badge&logo=sonarcloud" alt="quality gate"></a>
+  <a href="https://heroshot.sh"><img src="https://img.shields.io/badge/docs-heroshot.sh-blue?style=for-the-badge" alt="docs"></a>
 </p>
 
-<p align="center">
-  <a href="https://www.npmjs.com/package/heroshot"><img src="https://img.shields.io/npm/v/heroshot" alt="npm"></a>
-  <a href="https://heroshot.sh"><img src="https://img.shields.io/badge/docs-heroshot.sh-blue" alt="docs"></a>
-</p>
-
-<p align="center">
-  <img src="https://github.com/omachala/heroshot/blob/main/toolbar/tests/snapshots/manage-screenshots.test.ts/after-rename.png?raw=true" alt="heroshot toolbar demo" width="800">
-</p>
+Documentation screenshots rot. Your UI changes, but the images in your README, docs, and tutorials become outdated. The manual fix is painful: navigate, log in, screenshot, crop, save, commit. Repeat for every image.
+
+**Heroshot treats screenshots as code** - define them once, regenerate with one command.
+
+- **Visual picker** - Point and click to select elements, generates config for you
+- **Multi-variant** - Desktop, tablet, mobile + light/dark from a single definition
+- **CI/CD ready** - Automate updates with encrypted session support
+
+<table align="center">
+  <tr>
+    <th></th>
+    <th>Light</th>
+    <th>Dark</th>
+  </tr>
+  <tr>
+    <th>Desktop</th>
+    <td><img src="https://github.com/omachala/heroshot/blob/main/docs/public/screenshots/hero-desktop-light.png?raw=true" alt="Desktop Light"></td>
+    <td><img src="https://github.com/omachala/heroshot/blob/main/docs/public/screenshots/hero-desktop-dark.png?raw=true" alt="Desktop Dark"></td>
+  </tr>
+  <tr>
+    <th>Tablet</th>
+    <td><img src="https://github.com/omachala/heroshot/blob/main/docs/public/screenshots/hero-tablet-light.png?raw=true" alt="Tablet Light"></td>
+    <td><img src="https://github.com/omachala/heroshot/blob/main/docs/public/screenshots/hero-tablet-dark.png?raw=true" alt="Tablet Dark"></td>
+  </tr>
+  <tr>
+    <th>Mobile</th>
+    <td><img src="https://github.com/omachala/heroshot/blob/main/docs/public/screenshots/hero-mobile-light.png?raw=true" alt="Mobile Light"></td>
+    <td><img src="https://github.com/omachala/heroshot/blob/main/docs/public/screenshots/hero-mobile-dark.png?raw=true" alt="Mobile Dark"></td>
+  </tr>
+</table>
 
 ## Get Started
 
@@ -58,7 +83,7 @@ Heroshot automates **documentation screenshots** - not visual regression testing
 
 ## Automated Updates
 
-Run heroshot in CI to keep screenshots always current. See the [full guide](https://heroshot.sh/guide/automated-updates).
+Run heroshot in CI to keep screenshots always current. See the [full guide](https://heroshot.sh/docs/guide/automated-updates).
 
 **Quick setup:**
 

package/dist/cli.js

@@ -2,7 +2,7 @@
 
 // src/cli.ts
 import { existsSync as existsSync4, readFileSync as readFileSync4, rmSync } from "fs";
-import path5 from "path";
+import path6 from "path";
 import { Command } from "commander";
 
 // src/browser.ts
@@ -18,9 +18,18 @@ import path from "path";
 
 // src/schema.ts
 import { z } from "zod";
+
+// src/utils/generateUid.ts
 function generateUid() {
-  return Math.random().toString(36).slice(2, 10);
+  return crypto.randomUUID().slice(0, 8);
 }
+
+// src/schema.ts
+var VIEWPORT_PRESETS = {
+  desktop: { width: 1280, height: 800 },
+  tablet: { width: 768, height: 1024 },
+  mobile: { width: 375, height: 667 }
+};
 var viewportSchema = z.object({
   width: z.number().int().positive().default(1280),
   height: z.number().int().positive().default(800)
@@ -39,7 +48,7 @@ var scrollPositionSchema = z.object({
 });
 var viewportVariantSchema = z.string().refine(
   (value) => {
-    if (["desktop", "tablet", "mobile"].includes(value)) return true;
+    if (value in VIEWPORT_PRESETS) return true;
     const match = /^(\d+)x(\d+)$/.exec(value);
     if (!match) return false;
     const width = parseInt(match[1] ?? "0", 10);
@@ -70,6 +79,42 @@ var browserSchema = z.object({
   /** Device scale factor for retina/high-DPI screenshots (1 = standard, 2 = retina) */
   deviceScaleFactor: z.number().min(1).max(3).optional()
 });
+var shotCliOptionsSchema = z.object({
+  /** CSS selector(s) to capture - if multiple, captures bounding box of all */
+  selector: z.array(z.string()).optional(),
+  /** Output filename (auto-generated from URL if not provided) */
+  output: z.string().optional(),
+  /** Padding around element in pixels */
+  padding: z.number().int().min(0).optional(),
+  /** Viewport width */
+  width: z.number().int().positive().optional(),
+  /** Viewport height */
+  height: z.number().int().positive().optional(),
+  /** Use mobile viewport preset (375x667) */
+  mobile: z.boolean().optional(),
+  /** Use tablet viewport preset (768x1024) */
+  tablet: z.boolean().optional(),
+  /** Use desktop viewport preset (1280x800) */
+  desktop: z.boolean().optional(),
+  /** Force dark color scheme */
+  dark: z.boolean().optional(),
+  /** Force light color scheme */
+  light: z.boolean().optional(),
+  /** Device scale factor (1, 2, 3) */
+  scale: z.number().min(1).max(3).optional(),
+  /** Shortcut for scale=2 */
+  retina: z.boolean().optional(),
+  /** JPEG quality (1-100) - outputs JPEG instead of PNG */
+  quality: z.number().int().min(1).max(100).optional(),
+  /** Omit background for transparent PNG */
+  omitBackground: z.boolean().optional(),
+  /** Timeout in milliseconds */
+  timeout: z.number().int().positive().optional()
+});
+var shotCommandOptionsSchema = shotCliOptionsSchema.extend({
+  /** Save screenshot definition to config file */
+  save: z.boolean().optional()
+});
 var configSchema = z.object({
   /** Output directory for screenshots (relative to config file) */
   outputDirectory: z.string().default("heroshots"),
@@ -622,19 +667,35 @@ async function setup(options = {}) {
 
 // src/sync.ts
 import { existsSync as existsSync3, mkdirSync as mkdirSync3 } from "fs";
+import path5 from "path";
+
+// src/utils/addSuffix.ts
 import path4 from "path";
-var VIEWPORT_DESKTOP = { width: 1280, height: 800 };
-var VIEWPORT_TABLET = { width: 768, height: 1024 };
-var VIEWPORT_MOBILE = { width: 375, height: 667 };
+function addSuffix(filename, suffix) {
+  const extension = path4.extname(filename);
+  const base = path4.basename(filename, extension);
+  const directory = path4.dirname(filename);
+  return path4.join(directory, `${base}${suffix}${extension}`);
+}
+
+// src/utils/getColorSchemes.ts
+function getColorSchemes(setting) {
+  if (setting === "auto") return [];
+  if (setting === "light") return ["light"];
+  if (setting === "dark") return ["dark"];
+  return ["light", "dark"];
+}
+
+// src/utils/parseViewport.ts
 function parseViewport(variant) {
   if (variant === "desktop") {
-    return { name: "desktop", ...VIEWPORT_DESKTOP };
+    return { name: "desktop", ...VIEWPORT_PRESETS.desktop };
   }
   if (variant === "tablet") {
-    return { name: "tablet", ...VIEWPORT_TABLET };
+    return { name: "tablet", ...VIEWPORT_PRESETS.tablet };
   }
   if (variant === "mobile") {
-    return { name: "mobile", ...VIEWPORT_MOBILE };
+    return { name: "mobile", ...VIEWPORT_PRESETS.mobile };
   }
   const match = /^(\d+)x(\d+)$/.exec(variant);
   if (match) {
@@ -645,8 +706,10 @@ function parseViewport(variant) {
       return { name: variant, width, height };
     }
   }
-  return { name: "desktop", ...VIEWPORT_DESKTOP };
+  return { name: "desktop", ...VIEWPORT_PRESETS.desktop };
 }
+
+// src/sync.ts
 var GET_BACKGROUND_COLOR_SCRIPT = String.raw`
   (element) => {
     const toHex = (bgColor) => {
@@ -777,12 +840,6 @@ async function findElement(page, selector, maxAttempts = 10, intervalMs = 500) {
   }
   return null;
 }
-function addFilenameSuffix(filename, suffix) {
-  const extension = path4.extname(filename);
-  const base = path4.basename(filename, extension);
-  const directory = path4.dirname(filename);
-  return path4.join(directory, `${base}${suffix}${extension}`);
-}
 async function takeScreenshot(target, outputPath, format, quality, clip) {
   const isPage = "goto" in target;
   if (format === "jpeg") {
@@ -804,7 +861,7 @@ async function takeScreenshot(target, outputPath, format, quality, clip) {
 async function captureScreenshot(page, screenshot, outputDirectory, captureOptions, filenameSuffix = "") {
   const { name, url, selector, filename, padding, scroll, maskPadding } = screenshot;
   const { format, quality } = captureOptions;
-  const finalFilename = filenameSuffix ? addFilenameSuffix(filename, filenameSuffix) : filename;
+  const finalFilename = filenameSuffix ? addSuffix(filename, filenameSuffix) : filename;
   verbose(`Capturing: ${name}${filenameSuffix}`);
   try {
     await page.goto(url, { waitUntil: "domcontentloaded", timeout: 3e4 });
@@ -817,8 +874,8 @@ async function captureScreenshot(page, screenshot, outputDirectory, captureOptio
     await page.evaluate(`window.scrollTo(${scroll.x}, ${scroll.y})`);
     await page.waitForTimeout(100);
   }
-  const outputPath = path4.join(outputDirectory, finalFilename);
-  const outputDirectoryPath = path4.dirname(outputPath);
+  const outputPath = path5.join(outputDirectory, finalFilename);
+  const outputDirectoryPath = path5.dirname(outputPath);
   if (!existsSync3(outputDirectoryPath)) {
     mkdirSync3(outputDirectoryPath, { recursive: true });
   }
@@ -882,15 +939,9 @@ async function captureScreenshot(page, screenshot, outputDirectory, captureOptio
   }
   return { success: true };
 }
-function getColorSchemes(setting) {
-  if (setting === "auto") return [];
-  if (setting === "light") return ["light"];
-  if (setting === "dark") return ["dark"];
-  return ["light", "dark"];
-}
 var RETRY_DELAYS = [500, 1e3, 2e3, 3e3, 5e3];
 async function captureAndLog(page, screenshot, outputDirectory, captureOptions, suffix) {
-  const filename = suffix ? addFilenameSuffix(screenshot.filename, suffix) : screenshot.filename;
+  const filename = suffix ? addSuffix(screenshot.filename, suffix) : screenshot.filename;
   const { length: maxRetries } = RETRY_DELAYS;
   let result = { success: false };
   for (let attempt = 0; attempt < maxRetries; attempt++) {
@@ -948,7 +999,7 @@ function showResults(results, outputDirectory) {
 }
 async function sync(options = {}) {
   const configPath = options.configPath ?? getConfigPath();
-  const config = loadConfig(configPath);
+  const config = options.config ?? loadConfig(configPath);
   if (config.screenshots.length === 0) {
     warn("No screenshots defined.");
     outro('Run "heroshot config" to add screenshots');
@@ -967,9 +1018,14 @@ async function sync(options = {}) {
     const names = screenshots.map(({ name }) => name).join(", ");
     verbose(`Matched ${screenshots.length}: ${names}`);
   }
-  const configDirectory = path4.dirname(configPath);
-  const projectRoot = path4.dirname(configDirectory);
-  const outputDirectory = path4.resolve(projectRoot, config.outputDirectory);
+  let outputDirectory;
+  if (options.outputDirectory) {
+    outputDirectory = path5.resolve(options.outputDirectory);
+  } else {
+    const configDirectory = path5.dirname(configPath);
+    const projectRoot = path5.dirname(configDirectory);
+    outputDirectory = path5.resolve(projectRoot, config.outputDirectory);
+  }
   const storageState = loadEncryptedSession(options.sessionKey);
   const captureSpinner = spinner();
   captureSpinner.start("Launching browser...");
@@ -1057,8 +1113,24 @@ async function sync(options = {}) {
   return showResults(results, config.outputDirectory);
 }
 
+// src/utils/generateScreenshotFilename.ts
+function generateScreenshotFilename(url, selector) {
+  try {
+    const parsed = new URL(url);
+    const parts = [parsed.hostname, ...parsed.pathname.split("/").filter(Boolean)];
+    let base = parts.join("-").replaceAll(/[^\w-]/g, "-").replaceAll(/-+/g, "-");
+    if (selector) {
+      const selectorPart = selector.replaceAll(/[^\w-]/g, "-").replaceAll(/-+/g, "-").slice(0, 20);
+      base = `${base}-${selectorPart}`;
+    }
+    return `${base || "screenshot"}.png`;
+  } catch {
+    return "screenshot.png";
+  }
+}
+
 // src/cli.ts
-var packageJsonPath = path5.join(import.meta.dirname, "..", "package.json");
+var packageJsonPath = path6.join(import.meta.dirname, "..", "package.json");
 var packageJson = JSON.parse(readFileSync4(packageJsonPath, "utf8"));
 var version = packageJson && typeof packageJson === "object" && "version" in packageJson ? String(packageJson.version) : "0.0.0";
 var program = new Command();
@@ -1067,27 +1139,138 @@ program.name("heroshot").description("Define your screenshots once, update them
   setVerbose(options.verbose ?? false);
   intro(version);
 });
-program.command("run", { isDefault: true, hidden: true }).description("Run heroshot (setup if no config, otherwise sync)").action(async () => {
-  const options = program.opts();
-  const configPath = options.config ? path5.resolve(options.config) : getConfigPath();
-  if (existsSync4(configPath)) {
-    const result = await sync({ configPath, sessionKey: options.sessionKey });
-    if (result.failed > 0) {
-      process.exitCode = 1;
+function buildScreenshotEntry(url, options) {
+  const selectorValue = options?.selector?.[0];
+  const filename = options?.output ?? generateScreenshotFilename(url, selectorValue);
+  const screenshot = {
+    id: generateUid(),
+    name: path6.basename(filename, path6.extname(filename)),
+    url,
+    filename,
+    selector: selectorValue
+  };
+  if (options?.padding) {
+    screenshot.padding = {
+      top: options.padding,
+      right: options.padding,
+      bottom: options.padding,
+      left: options.padding
+    };
+  }
+  if (options?.mobile) {
+    screenshot.viewports = ["mobile"];
+  } else if (options?.tablet) {
+    screenshot.viewports = ["tablet"];
+  } else if (options?.desktop) {
+    screenshot.viewports = ["desktop"];
+  }
+  return screenshot;
+}
+function getColorScheme(options) {
+  if (options?.dark) return "dark";
+  if (options?.light) return "light";
+  return void 0;
+}
+function getDeviceScaleFactor(options, existingConfig) {
+  if (options?.retina) return 2;
+  if (options?.scale) return options.scale;
+  return existingConfig?.browser?.deviceScaleFactor;
+}
+function getViewport(options, existingConfig) {
+  if (options?.mobile) return VIEWPORT_PRESETS.mobile;
+  if (options?.tablet) return VIEWPORT_PRESETS.tablet;
+  if (options?.desktop) return VIEWPORT_PRESETS.desktop;
+  if (options?.width || options?.height) {
+    const base = existingConfig?.browser?.viewport;
+    return {
+      width: options?.width ?? base?.width ?? 1280,
+      height: options?.height ?? base?.height ?? 800
+    };
+  }
+  return existingConfig?.browser?.viewport;
+}
+function buildShotConfig(url, options, existingConfig) {
+  const screenshot = buildScreenshotEntry(url, options);
+  const outputFormat = options?.quality ? "jpeg" : existingConfig?.outputFormat ?? "png";
+  return {
+    outputDirectory: ".",
+    outputFormat,
+    jpegQuality: options?.quality ?? existingConfig?.jpegQuality ?? 80,
+    browser: {
+      viewport: getViewport(options, existingConfig),
+      colorScheme: getColorScheme(options),
+      deviceScaleFactor: getDeviceScaleFactor(options, existingConfig)
+    },
+    screenshots: [screenshot]
+  };
+}
+function saveScreenshotToConfig(configPath, screenshot, shotConfig, existingConfig) {
+  const configForSave = existingConfig ?? loadConfig("");
+  if (shotConfig.browser?.colorScheme) {
+    configForSave.browser = {
+      ...configForSave.browser,
+      colorScheme: shotConfig.browser.colorScheme
+    };
+  }
+  if (shotConfig.browser?.deviceScaleFactor) {
+    configForSave.browser = {
+      ...configForSave.browser,
+      deviceScaleFactor: shotConfig.browser.deviceScaleFactor
+    };
+  }
+  configForSave.screenshots.push(screenshot);
+  saveConfig(configPath, configForSave);
+  verbose(`Saved to config: ${screenshot.name}`);
+}
+async function handleUrlCapture(url, options, configPath, sessionKey) {
+  const existingConfig = existsSync4(configPath) ? loadConfig(configPath) : void 0;
+  const shotConfig = buildShotConfig(url, options, existingConfig);
+  const outputDirectory = options?.output ? path6.dirname(path6.resolve(options.output)) : process.cwd();
+  const result = await sync({
+    config: shotConfig,
+    outputDirectory,
+    sessionKey
+  });
+  if (options?.save && result.failed === 0) {
+    const screenshot = shotConfig.screenshots[0];
+    if (screenshot) {
+      saveScreenshotToConfig(configPath, screenshot, shotConfig, existingConfig);
     }
+  }
+  return result.failed === 0;
+}
+async function handleDefaultCommand(configPath, sessionKey, hasExplicitConfig) {
+  if (existsSync4(configPath)) {
+    const result = await sync({ configPath, sessionKey });
+    return result.failed === 0;
+  }
+  if (hasExplicitConfig) {
+    error(`Config file not found: ${configPath}`);
+    return false;
+  }
+  const { hasScreenshots } = await setup();
+  if (hasScreenshots) {
+    const result = await sync({});
+    return result.failed === 0;
+  }
+  return true;
+}
+program.command("shot [url]", { isDefault: true, hidden: true }).description("Take a screenshot (URL capture mode, or sync if no URL)").option("--selector <selector...>", "CSS selector(s) to capture").option("-o, --output <file>", "Output filename").option("-p, --padding <pixels>", "Padding around element", parseInt).option("-w, --width <pixels>", "Viewport width", parseInt).option("--height <pixels>", "Viewport height", parseInt).option("--mobile", "Use mobile viewport (375x667)").option("--tablet", "Use tablet viewport (768x1024)").option("--desktop", "Use desktop viewport (1280x800)").option("--dark", "Force dark color scheme").option("--light", "Force light color scheme").option("--scale <factor>", "Device scale factor (1, 2, 3)", parseInt).option("--retina", "Use retina scale (2x)").option("-q, --quality <percent>", "JPEG quality (1-100), outputs JPEG", parseInt).option("--omit-background", "Transparent background (PNG only)").option("--timeout <ms>", "Timeout in milliseconds", parseInt).option("--save", "Save screenshot definition to config").action(async (url, options) => {
+  const globalOptions = program.opts();
+  const configPath = globalOptions.config ? path6.resolve(globalOptions.config) : getConfigPath();
+  if (url?.startsWith("http")) {
+    const success2 = await handleUrlCapture(url, options, configPath, globalOptions.sessionKey);
+    if (!success2) process.exitCode = 1;
+  } else if (url) {
+    const result = await sync({ configPath, sessionKey: globalOptions.sessionKey, filter: url });
+    if (result.failed > 0) process.exitCode = 1;
   } else {
-    if (options.config) {
-      error(`Config file not found: ${configPath}`);
-      process.exitCode = 1;
-      return;
-    }
-    const { hasScreenshots } = await setup();
-    if (hasScreenshots) {
-      const result = await sync({});
-      if (result.failed > 0) {
-        process.exitCode = 1;
-      }
-    }
+    const success2 = await handleDefaultCommand(
+      configPath,
+      globalOptions.sessionKey,
+      !!globalOptions.config
+    );
+    if (!success2) process.exitCode = 1;
   }
 });
 program.command("config").description("Open browser to add/edit screenshot definitions").option("--reset", "Clear existing session and start fresh").option("--only", "Only run config, skip sync afterwards").option("--light", "Force light mode (prefers-color-scheme: light)").option("--dark", "Force dark mode (prefers-color-scheme: dark)").action(
@@ -1105,7 +1288,7 @@ program.command("config").description("Open browser to add/edit screenshot defin
     else if (commandOptions.dark) colorScheme = "dark";
     const { hasScreenshots } = await setup({ colorScheme });
     if (hasScreenshots && !commandOptions.only) {
-      const configPath = globalOptions.config ? path5.resolve(globalOptions.config) : void 0;
+      const configPath = globalOptions.config ? path6.resolve(globalOptions.config) : void 0;
       const result = await sync({ configPath, sessionKey: globalOptions.sessionKey });
       if (result.failed > 0) {
         process.exitCode = 1;
@@ -1115,7 +1298,7 @@ program.command("config").description("Open browser to add/edit screenshot defin
 );
 program.command("sync [pattern]").description("Capture screenshots (optionally filter by pattern)").action(async (pattern) => {
   const options = program.opts();
-  const configPath = options.config ? path5.resolve(options.config) : getConfigPath();
+  const configPath = options.config ? path6.resolve(options.config) : getConfigPath();
   if (!existsSync4(configPath)) {
     error('No config found. Run "heroshot config" first.');
     process.exitCode = 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heroshot",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Define your screenshots once, update them forever with one command",
   "type": "module",
   "author": "Ondrej Machala",
@@ -73,6 +73,7 @@
     "build:toolbar": "vite build --config toolbar/vite.config.ts",
     "test": "vitest",
     "test:run": "vitest run",
+    "test:cli": "vitest run --config vitest.cli.config.ts",
     "test:toolbar": "vitest run --config toolbar/vite.config.ts",
     "test:toolbar:coverage": "vitest run --config toolbar/vite.config.ts --coverage",
     "test:toolbar:e2e": "playwright test --config toolbar/playwright.config.ts",
@@ -80,6 +81,7 @@
     "typecheck:toolbar": "tsc --noEmit -p toolbar/tsconfig.json --incremental --tsBuildInfoFile node_modules/.cache/tsbuildinfo-toolbar",
     "lint": "eslint --cache --cache-location node_modules/.cache/eslint src/",
     "lint:toolbar": "eslint --cache --cache-location node_modules/.cache/eslint-toolbar toolbar/src/",
+    "check:svelte": "pnpm build:toolbar 2>&1 | grep -q '\\[vite-plugin-svelte\\].*warning' && echo 'Svelte warnings found!' && exit 1 || exit 0",
     "lint:fix": "eslint --cache --cache-location node_modules/.cache/eslint src/ --fix",
     "format": "prettier --write . --cache --cache-location node_modules/.cache/prettier",
     "format:check": "prettier --check . --cache --cache-location node_modules/.cache/prettier",

package/toolbar/dist/toolbar.js

@@ -3783,10 +3783,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   function findElementBySelector(selector) {
     return selector.includes(">>>") ? querySelectorPiercing(selector) : document.querySelector(selector);
   }
-  var root_4$1 = /* @__PURE__ */ from_html(`<div class="fixed pointer-events-auto cursor-pointer"></div>`);
-  var root_5$1 = /* @__PURE__ */ from_html(`<div class="fixed pointer-events-auto cursor-pointer"></div>`);
-  var root_6$1 = /* @__PURE__ */ from_html(`<div class="fixed pointer-events-auto cursor-pointer"></div>`);
-  var root_7$1 = /* @__PURE__ */ from_html(`<div class="fixed pointer-events-auto cursor-pointer"></div>`);
+  var root_4$1 = /* @__PURE__ */ from_html(`<div role="button" tabindex="-1" class="fixed pointer-events-auto cursor-pointer"></div>`);
+  var root_5$1 = /* @__PURE__ */ from_html(`<div role="button" tabindex="-1" class="fixed pointer-events-auto cursor-pointer"></div>`);
+  var root_6$1 = /* @__PURE__ */ from_html(`<div role="button" tabindex="-1" class="fixed pointer-events-auto cursor-pointer"></div>`);
+  var root_7$1 = /* @__PURE__ */ from_html(`<div role="button" tabindex="-1" class="fixed pointer-events-auto cursor-pointer"></div>`);
   var root_8$1 = /* @__PURE__ */ from_html(`<div class="fixed h-0.5 bg-heroshot-primary/50 pointer-events-none"></div>`);
   var root_9$1 = /* @__PURE__ */ from_html(`<div class="fixed h-0.5 bg-heroshot-primary/50 pointer-events-none"></div>`);
   var root_10$1 = /* @__PURE__ */ from_html(`<div class="fixed w-0.5 bg-heroshot-primary/50 pointer-events-none"></div>`);
@@ -3794,7 +3794,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   var root_3 = /* @__PURE__ */ from_html(`<!> <!> <!> <!> <!> <!> <!> <!>`, 1);
   var root_2$1 = /* @__PURE__ */ from_html(`<!> <div></div> <div class="fixed bg-white rounded-sm pointer-events-auto -translate-x-1/2 -translate-y-1/2" role="button" tabindex="0"></div> <div class="fixed bg-white rounded-sm pointer-events-auto -translate-x-1/2 -translate-y-1/2" role="button" tabindex="0"></div> <div class="fixed bg-white rounded-sm pointer-events-auto -translate-x-1/2 -translate-y-1/2" role="button" tabindex="0"></div> <div class="fixed bg-white rounded-sm pointer-events-auto -translate-x-1/2 -translate-y-1/2" role="button" tabindex="0"></div> <div class="fixed bg-white rounded-sm pointer-events-auto -translate-x-1/2 -translate-y-1/2" role="button" tabindex="0"></div> <div class="fixed bg-white rounded-sm pointer-events-auto -translate-x-1/2 -translate-y-1/2" role="button" tabindex="0"></div> <div class="fixed bg-white rounded-sm pointer-events-auto -translate-x-1/2 -translate-y-1/2" role="button" tabindex="0"></div> <div class="fixed bg-white rounded-sm pointer-events-auto -translate-x-1/2 -translate-y-1/2" role="button" tabindex="0"></div>`, 1);
   var root_12 = /* @__PURE__ */ from_html(`<div class="fixed border-[3px] pointer-events-none box-border border-heroshot-primary bg-heroshot-primary/10"></div>`);
-  var root_1$3 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 w-screen h-screen z-[2147483646] pointer-events-none"><div></div> <div></div> <div></div> <div></div> <!></div>`);
+  var root_1$3 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 w-screen h-screen z-[2147483646] pointer-events-none"><div role="button" tabindex="-1"></div> <div role="button" tabindex="-1"></div> <div role="button" tabindex="-1"></div> <div role="button" tabindex="-1"></div> <!></div>`);
   var root_14 = /* @__PURE__ */ from_html(`<span style="color:#fbbf24;"> </span>`);
   var root_15 = /* @__PURE__ */ from_html(`<span style="color:#67e8f9;"> </span>`);
   var root_16 = /* @__PURE__ */ from_html(`<span style="color:#22c55e;"> </span>`);
@@ -4220,12 +4220,16 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         var div = root_1$3();
         var div_1 = child(div);
         div_1.__click = handleOverlayClick;
+        div_1.__keydown = (event2) => event2.key === "Enter" && handleOverlayClick();
         var div_2 = sibling(div_1, 2);
         div_2.__click = handleOverlayClick;
+        div_2.__keydown = (event2) => event2.key === "Enter" && handleOverlayClick();
         var div_3 = sibling(div_2, 2);
         div_3.__click = handleOverlayClick;
+        div_3.__keydown = (event2) => event2.key === "Enter" && handleOverlayClick();
         var div_4 = sibling(div_3, 2);
         div_4.__click = handleOverlayClick;
+        div_4.__keydown = (event2) => event2.key === "Enter" && handleOverlayClick();
         var node_1 = sibling(div_4, 2);
         {
           var consequent_9 = ($$anchor3) => {
@@ -4239,6 +4243,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                   var consequent = ($$anchor5) => {
                     var div_5 = root_4$1();
                     div_5.__click = handlePaddingClick;
+                    div_5.__keydown = (event2) => event2.key === "Enter" && handlePaddingClick();
                     div_5.__mousemove = handlePaddingMouseMove;
                     template_effect(() => set_style(div_5, `top:${get(expandedRect).top ?? ""}px;left:${get(expandedRect).left ?? ""}px;width:${get(expandedRect).width ?? ""}px;height:${get(selectedPadding).top ?? ""}px;background:${(get(maskPadding) ? get(detectedBgColor) : "rgba(34, 197, 94, 0.25)") ?? ""};`));
                     event("mouseenter", div_5, handlePaddingMouseMove);
@@ -4254,6 +4259,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                   var consequent_1 = ($$anchor5) => {
                     var div_6 = root_5$1();
                     div_6.__click = handlePaddingClick;
+                    div_6.__keydown = (event2) => event2.key === "Enter" && handlePaddingClick();
                     div_6.__mousemove = handlePaddingMouseMove;
                     template_effect(() => set_style(div_6, `top:${get(overlayRects).highlight.top + get(overlayRects).highlight.height}px;left:${get(expandedRect).left ?? ""}px;width:${get(expandedRect).width ?? ""}px;height:${get(selectedPadding).bottom ?? ""}px;background:${(get(maskPadding) ? get(detectedBgColor) : "rgba(34, 197, 94, 0.25)") ?? ""};`));
                     event("mouseenter", div_6, handlePaddingMouseMove);
@@ -4269,6 +4275,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                   var consequent_2 = ($$anchor5) => {
                     var div_7 = root_6$1();
                     div_7.__click = handlePaddingClick;
+                    div_7.__keydown = (event2) => event2.key === "Enter" && handlePaddingClick();
                     div_7.__mousemove = handlePaddingMouseMove;
                     template_effect(() => set_style(div_7, `top:${get(overlayRects).highlight.top ?? ""}px;left:${get(expandedRect).left ?? ""}px;width:${get(selectedPadding).left ?? ""}px;height:${get(overlayRects).highlight.height ?? ""}px;background:${(get(maskPadding) ? get(detectedBgColor) : "rgba(34, 197, 94, 0.25)") ?? ""};`));
                     event("mouseenter", div_7, handlePaddingMouseMove);
@@ -4284,6 +4291,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                   var consequent_3 = ($$anchor5) => {
                     var div_8 = root_7$1();
                     div_8.__click = handlePaddingClick;
+                    div_8.__keydown = (event2) => event2.key === "Enter" && handlePaddingClick();
                     div_8.__mousemove = handlePaddingMouseMove;
                     template_effect(() => set_style(div_8, `top:${get(overlayRects).highlight.top ?? ""}px;left:${get(overlayRects).highlight.left + get(overlayRects).highlight.width}px;width:${get(selectedPadding).right ?? ""}px;height:${get(overlayRects).highlight.height ?? ""}px;background:${(get(maskPadding) ? get(detectedBgColor) : "rgba(34, 197, 94, 0.25)") ?? ""};`));
                     event("mouseenter", div_8, handlePaddingMouseMove);
@@ -4464,7 +4472,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     append($$anchor, fragment);
     return pop($$exports);
   }
-  delegate(["click", "mousemove", "mousedown"]);
+  delegate(["click", "keydown", "mousemove", "mousedown"]);
   var root_2 = /* @__PURE__ */ from_html(`<p class="text-xs text-slate-500 mt-2">Will capture two screenshots: -light and -dark variants</p>`);
   var root_1$2 = /* @__PURE__ */ from_html(`<div class="fixed inset-0 bg-black/50 z-[2147483647] flex items-center justify-center pointer-events-auto" role="button" tabindex="0"><div class="bg-slate-800 rounded-lg p-6 w-80 shadow-2xl" role="dialog" aria-modal="true" aria-label="Settings" tabindex="-1"><h2 class="text-lg font-semibold text-white mb-4">Settings</h2> <div class="mb-4"><span class="block text-sm text-slate-400 mb-2">Viewport Size</span> <div class="flex gap-2 items-center"><label class="sr-only" for="viewport-width">Width</label> <input id="viewport-width" type="number" class="w-20 px-2 py-1 bg-slate-700 text-white rounded border border-slate-600 focus:border-blue-500 focus:outline-none" min="320" max="3840"/> <span class="text-slate-400">x</span> <label class="sr-only" for="viewport-height">Height</label> <input id="viewport-height" type="number" class="w-20 px-2 py-1 bg-slate-700 text-white rounded border border-slate-600 focus:border-blue-500 focus:outline-none" min="200" max="2160"/> <span class="text-slate-500 text-sm">px</span></div></div> <div class="mb-4"><span class="block text-sm text-slate-400 mb-2">Scale (Retina)</span> <div class="flex gap-2"><button type="button">1x</button> <button type="button">2x</button> <button type="button">3x</button></div> <p class="text-xs text-slate-500 mt-2">Higher scale = sharper images, larger file size</p></div> <div class="mb-6"><span class="block text-sm text-slate-400 mb-2">Color Scheme</span> <div class="flex gap-2"><button type="button" title="Capture both light and dark versions (default)">Both</button> <button type="button" title="Use browser's color scheme preference">Auto</button> <button type="button">Light</button> <button type="button">Dark</button></div> <!></div> <div class="flex justify-end gap-2"><button type="button" class="px-4 py-2 rounded bg-slate-700 text-white hover:bg-slate-600 transition-colors">Cancel</button> <button type="button" class="px-4 py-2 rounded bg-green-500 text-white hover:bg-green-600 transition-colors">Save</button></div></div></div>`);
   function SettingsModal($$anchor, $$props) {