heroshot 0.0.5 → 0.0.6

package/dist/cli.js

@@ -1,17 +1,19 @@
 #!/usr/bin/env node
 
 // src/cli.ts
-import { existsSync as existsSync3, rmSync } from "fs";
+import { existsSync as existsSync4, readFileSync as readFileSync4, rmSync } from "fs";
+import path5 from "path";
 import { Command } from "commander";
 
 // src/browser.ts
-import { readFileSync as readFileSync2 } from "fs";
-import { homedir } from "os";
-import path2 from "path";
-import { chromium } from "playwright";
+import { readFileSync as readFileSync3 } from "fs";
+import path3 from "path";
+import {
+  chromium
+} from "playwright";
 
 // src/configFile.ts
-import { existsSync, readFileSync, writeFileSync } from "fs";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
 import path from "path";
 
 // src/schema.ts
@@ -48,11 +50,13 @@ var screenshotSchema = z.object({
 });
 var browserSchema = z.object({
   viewport: viewportSchema.optional(),
-  colorScheme: colorSchemeSchema.optional()
+  colorScheme: colorSchemeSchema.optional(),
+  /** Device scale factor for retina/high-DPI screenshots (1 = standard, 2 = retina) */
+  deviceScaleFactor: z.number().min(1).max(3).optional()
 });
 var configSchema = z.object({
   /** Output directory for screenshots (relative to config file) */
-  outputDirectory: z.string().default("."),
+  outputDirectory: z.string().default("heroshots"),
   /** Output format for screenshots (png or jpeg) */
   outputFormat: outputFormatSchema.optional(),
   /** JPEG quality (1-100), only used when outputFormat is 'jpeg' */
@@ -69,9 +73,52 @@ function parseConfig(input) {
 }
 
 // src/configFile.ts
-var CONFIG_FILENAME = "heroshot.json";
+var HEROSHOT_DIRECTORY_NAME = ".heroshot";
+var CONFIG_FILENAME = "config.json";
+function getHeroshotDirectory(directory = process.cwd()) {
+  return path.join(directory, HEROSHOT_DIRECTORY_NAME);
+}
+var README_CONTENT = `# Heroshot
+
+This folder contains heroshot configuration and encrypted session data.
+
+## Files
+
+- \`config.json\` - Screenshot definitions (URLs, selectors, output settings)
+- \`session.enc\` - Encrypted browser session (cookies, localStorage)
+
+## Safe to commit
+
+This folder is safe to commit to source control:
+
+- \`config.json\` contains no secrets
+- \`session.enc\` is encrypted with AES-256-GCM
+
+## CI/CD Usage
+
+To use heroshot in CI, add your session key as a secret:
+
+\`\`\`yaml
+- run: npx heroshot --session-key=\${{ secrets.HEROSHOT_SESSION_KEY }}
+\`\`\`
+
+To get your session key, run: \`heroshot session-key\`
+
+Learn more: https://heroshot.sh/docs
+`;
+function ensureHeroshotDirectory(directory = process.cwd()) {
+  const heroshotPath = getHeroshotDirectory(directory);
+  const readmePath = path.join(heroshotPath, "README.md");
+  if (!existsSync(heroshotPath)) {
+    mkdirSync(heroshotPath, { recursive: true });
+    writeFileSync(readmePath, README_CONTENT, "utf8");
+  } else if (!existsSync(readmePath)) {
+    writeFileSync(readmePath, README_CONTENT, "utf8");
+  }
+  return heroshotPath;
+}
 function getConfigPath(directory = process.cwd()) {
-  return path.join(directory, CONFIG_FILENAME);
+  return path.join(directory, HEROSHOT_DIRECTORY_NAME, CONFIG_FILENAME);
 }
 function loadConfig(configPath) {
   if (!existsSync(configPath)) {
@@ -82,6 +129,10 @@ function loadConfig(configPath) {
   return parseConfig(json);
 }
 function saveConfig(configPath, config) {
+  const parentDirectory = path.dirname(configPath);
+  if (!existsSync(parentDirectory)) {
+    mkdirSync(parentDirectory, { recursive: true });
+  }
   const content = JSON.stringify(config, null, 2);
   writeFileSync(configPath, content, "utf8");
 }
@@ -103,45 +154,156 @@ log.error = (message) => {
   console.error(message);
 };
 
-// src/browser.ts
-var PROFILE_DIR = path2.join(homedir(), ".heroshot", "browser-profile");
-var TOOLBAR_DIR = path2.join(import.meta.dirname, "..", "toolbar");
-function getProfilePath() {
-  return PROFILE_DIR;
+// src/session.ts
+import { createCipheriv, createDecipheriv, createHash, randomBytes, scryptSync } from "crypto";
+import { existsSync as existsSync2, mkdirSync as mkdirSync2, readFileSync as readFileSync2, writeFileSync as writeFileSync2 } from "fs";
+import { homedir } from "os";
+import path2 from "path";
+var SESSION_FILENAME = "session.enc";
+var KEYS_DIRECTORY = path2.join(homedir(), ".heroshot", "keys");
+var ALGORITHM = "aes-256-gcm";
+var KEY_LENGTH = 32;
+var IV_LENGTH = 16;
+var AUTH_TAG_LENGTH = 16;
+var SALT_LENGTH = 16;
+var SESSION_KEY_LENGTH = 20;
+function generateSessionKey() {
+  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const bytes = randomBytes(SESSION_KEY_LENGTH);
+  return [...bytes].map((byte) => alphabet[byte % alphabet.length]).join("");
+}
+function deriveKey(sessionKey, salt) {
+  return scryptSync(sessionKey, salt, KEY_LENGTH);
+}
+function encrypt(data, sessionKey) {
+  const salt = randomBytes(SALT_LENGTH);
+  const key = deriveKey(sessionKey, salt);
+  const iv = randomBytes(IV_LENGTH);
+  const cipher = createCipheriv(ALGORITHM, key, iv);
+  const encrypted = Buffer.concat([cipher.update(data, "utf8"), cipher.final()]);
+  const authTag = cipher.getAuthTag();
+  return Buffer.concat([salt, iv, authTag, encrypted]);
+}
+function decrypt(encryptedData, sessionKey) {
+  const salt = encryptedData.subarray(0, SALT_LENGTH);
+  const iv = encryptedData.subarray(SALT_LENGTH, SALT_LENGTH + IV_LENGTH);
+  const authTag = encryptedData.subarray(
+    SALT_LENGTH + IV_LENGTH,
+    SALT_LENGTH + IV_LENGTH + AUTH_TAG_LENGTH
+  );
+  const ciphertext = encryptedData.subarray(SALT_LENGTH + IV_LENGTH + AUTH_TAG_LENGTH);
+  const key = deriveKey(sessionKey, salt);
+  const decipher = createDecipheriv(ALGORITHM, key, iv);
+  decipher.setAuthTag(authTag);
+  const decrypted = Buffer.concat([decipher.update(ciphertext), decipher.final()]);
+  return decrypted.toString("utf8");
+}
+function getProjectId(directory = process.cwd()) {
+  const hash = createHash("sha256").update(directory).digest("hex");
+  return hash.slice(0, 16);
+}
+function getSessionPath(directory = process.cwd()) {
+  return path2.join(getHeroshotDirectory(directory), SESSION_FILENAME);
+}
+function getLocalKeyPath(directory = process.cwd()) {
+  const projectId = getProjectId(directory);
+  return path2.join(KEYS_DIRECTORY, projectId);
+}
+function saveLocalKey(sessionKey, directory = process.cwd()) {
+  if (!existsSync2(KEYS_DIRECTORY)) {
+    mkdirSync2(KEYS_DIRECTORY, { recursive: true, mode: 448 });
+  }
+  const keyPath = getLocalKeyPath(directory);
+  writeFileSync2(keyPath, sessionKey, { encoding: "utf8", mode: 384 });
+}
+function loadLocalKey(directory = process.cwd()) {
+  const keyPath = getLocalKeyPath(directory);
+  if (!existsSync2(keyPath)) {
+    return null;
+  }
+  return readFileSync2(keyPath, "utf8").trim();
+}
+function saveSession(storageState, sessionKey, directory = process.cwd()) {
+  const heroshotPath = getHeroshotDirectory(directory);
+  if (!existsSync2(heroshotPath)) {
+    mkdirSync2(heroshotPath, { recursive: true });
+  }
+  const json = JSON.stringify(storageState);
+  const encrypted = encrypt(json, sessionKey);
+  const sessionPath = getSessionPath(directory);
+  writeFileSync2(sessionPath, encrypted, { mode: 420 });
+}
+function loadSession(sessionKey, directory = process.cwd()) {
+  const sessionPath = getSessionPath(directory);
+  if (!existsSync2(sessionPath)) {
+    return null;
+  }
+  try {
+    const encrypted = readFileSync2(sessionPath);
+    const json = decrypt(encrypted, sessionKey);
+    const parsed = JSON.parse(json);
+    if (parsed && typeof parsed === "object") {
+      return parsed;
+    }
+    return null;
+  } catch {
+    return null;
+  }
 }
+function sessionExists(directory = process.cwd()) {
+  return existsSync2(getSessionPath(directory));
+}
+function getSessionKey(cliKey, directory = process.cwd()) {
+  if (cliKey) {
+    return cliKey;
+  }
+  const environmentKey = process.env["HEROSHOT_SESSION_KEY"];
+  if (environmentKey) {
+    return environmentKey;
+  }
+  return loadLocalKey(directory);
+}
+
+// src/browser.ts
+var TOOLBAR_DIR = path3.join(import.meta.dirname, "..", "toolbar");
 var DEFAULT_VIEWPORT = { width: 1280, height: 800 };
 var BROWSER_CHANNELS = ["chrome", "chromium"];
-async function launchPersistentBrowser(options = {}) {
+async function launchBrowser(options = {}) {
   const viewport = options.viewport ?? DEFAULT_VIEWPORT;
-  const baseOptions = {
-    headless: options.headless ?? false,
-    viewport
-  };
+  let browser = null;
   for (const channel of BROWSER_CHANNELS) {
     try {
-      const context = await chromium.launchPersistentContext(PROFILE_DIR, {
-        ...baseOptions,
+      browser = await chromium.launch({
+        headless: options.headless ?? false,
         channel
       });
-      return context;
+      break;
     } catch {
       continue;
     }
   }
-  const message = [
-    "",
-    "Error: No browser found.",
-    "",
-    "Heroshot needs a browser to capture screenshots. Options:",
-    "",
-    "  1. Install Chrome (recommended):",
-    "     https://www.google.com/chrome/",
-    "",
-    "  2. Or install Playwright browsers:",
-    "     npx playwright install chromium",
-    ""
-  ].join("\n");
-  throw new Error(message);
+  if (!browser) {
+    const message = [
+      "",
+      "Error: No browser found.",
+      "",
+      "Heroshot needs a browser to capture screenshots. Options:",
+      "",
+      "  1. Install Chrome (recommended):",
+      "     https://www.google.com/chrome/",
+      "",
+      "  2. Or install Playwright browsers:",
+      "     npx playwright install chromium",
+      ""
+    ].join("\n");
+    throw new Error(message);
+  }
+  const context = await browser.newContext({
+    viewport,
+    ...options.deviceScaleFactor && { deviceScaleFactor: options.deviceScaleFactor },
+    ...options.storageState && { storageState: options.storageState }
+  });
+  return { browser, context };
 }
 var exposedPages = /* @__PURE__ */ new WeakSet();
 async function injectToolbar(page, options) {
@@ -177,16 +339,30 @@ async function injectToolbar(page, options) {
       },
     };
   `);
-  const scriptPath = path2.join(TOOLBAR_DIR, "dist", "toolbar.js");
-  const script = readFileSync2(scriptPath, "utf8");
+  const scriptPath = path3.join(TOOLBAR_DIR, "dist", "toolbar.js");
+  const script = readFileSync3(scriptPath, "utf8");
   await page.addScriptTag({ content: script });
 }
 async function setup() {
   log.verbose("Opening browser...");
-  log.verbose(`Profile: ${PROFILE_DIR}`);
+  ensureHeroshotDirectory();
   const configPath = getConfigPath();
   const config = loadConfig(configPath);
   const viewport = config.browser?.viewport ?? DEFAULT_VIEWPORT;
+  let sessionKey = loadLocalKey();
+  const isNewKey = !sessionKey;
+  if (!sessionKey) {
+    sessionKey = generateSessionKey();
+    saveLocalKey(sessionKey);
+  }
+  let storageState;
+  if (sessionExists()) {
+    const state = loadSession(sessionKey);
+    if (state) {
+      storageState = state;
+      log.verbose("Loaded existing session.");
+    }
+  }
   const allScreenshots = config.screenshots.map((screenshot, index) => ({
     id: screenshot.id,
     name: screenshot.name,
@@ -201,7 +377,7 @@ async function setup() {
   let pendingJob = null;
   let selectedId = null;
   let sidebarExpanded = false;
-  const context = await launchPersistentBrowser({ headless: false, viewport });
+  const { browser, context } = await launchBrowser({ headless: false, viewport, storageState });
   const handleEvent = (event) => {
     switch (event.type) {
       case "screenshot-added": {
@@ -248,7 +424,15 @@ async function setup() {
         break;
       }
       case "done": {
-        void context.close();
+        void (async () => {
+          try {
+            const currentStorageState = await context.storageState();
+            saveSession(currentStorageState, sessionKey);
+            log.verbose("Session saved.");
+          } catch {
+          }
+          await browser.close();
+        })();
         break;
       }
     }
@@ -278,40 +462,46 @@ async function setup() {
   await page.goto("https://heroshot.sh/welcome", { waitUntil: "domcontentloaded" });
   log("Pick elements to screenshot. Close browser or click Done when finished.");
   await new Promise((resolve) => {
-    context.once("close", () => resolve());
+    browser.once("disconnected", () => resolve());
   });
-  if (newlyAddedIds.size > 0) {
-    const latestConfig = loadConfig(configPath);
-    for (const element of allScreenshots) {
-      if (!newlyAddedIds.has(element.id)) continue;
-      const filename = element.name.toLowerCase().replaceAll(/[^a-z0-9]+/g, "-").replaceAll(/(?:^-|-$)/g, "") + ".png";
-      const screenshot = {
-        id: element.id,
-        name: element.name,
-        url: element.url,
-        selector: element.selector,
-        filename,
-        ...element.padding && { padding: element.padding },
-        ...element.scroll && { scroll: element.scroll }
-      };
-      const existingIndex = latestConfig.screenshots.findIndex((item) => item.id === element.id);
-      if (existingIndex === -1) {
-        latestConfig.screenshots.push(screenshot);
-        log.verbose(`+ ${element.name}`);
-      } else {
-        latestConfig.screenshots[existingIndex] = screenshot;
-        log.verbose(`~ ${element.name} (updated)`);
-      }
+  const latestConfig = loadConfig(configPath);
+  for (const element of allScreenshots) {
+    if (!newlyAddedIds.has(element.id)) continue;
+    const filename = element.name.toLowerCase().replaceAll(/[^a-z0-9]+/g, "-").replaceAll(/(?:^-|-$)/g, "") + ".png";
+    const screenshot = {
+      id: element.id,
+      name: element.name,
+      url: element.url,
+      selector: element.selector,
+      filename,
+      ...element.padding && { padding: element.padding },
+      ...element.scroll && { scroll: element.scroll }
+    };
+    const existingIndex = latestConfig.screenshots.findIndex((item) => item.id === element.id);
+    if (existingIndex === -1) {
+      latestConfig.screenshots.push(screenshot);
+      log.verbose(`+ ${element.name}`);
+    } else {
+      latestConfig.screenshots[existingIndex] = screenshot;
+      log.verbose(`~ ${element.name} (updated)`);
     }
-    saveConfig(configPath, latestConfig);
-    log.verbose(`Config saved: ${configPath}`);
+  }
+  saveConfig(configPath, latestConfig);
+  log.verbose(`Config saved: ${configPath}`);
+  if (isNewKey) {
+    log("");
+    log("Session encrypted and saved to .heroshot/session.enc");
+    log("");
+    log("To print your session key, run: heroshot session-key");
+    log("");
+    log("For CI, add HEROSHOT_SESSION_KEY as a repository secret.");
   }
   return { hasScreenshots: allScreenshots.length > 0 };
 }
 
 // src/sync.ts
-import { existsSync as existsSync2, mkdirSync } from "fs";
-import path3 from "path";
+import { existsSync as existsSync3, mkdirSync as mkdirSync3 } from "fs";
+import path4 from "path";
 async function findElement(page, selector, maxAttempts = 10, intervalMs = 500) {
   for (let attempt = 1; attempt <= maxAttempts; attempt++) {
     const handle = await page.evaluateHandle(`
@@ -348,10 +538,10 @@ async function findElement(page, selector, maxAttempts = 10, intervalMs = 500) {
   return null;
 }
 function addFilenameSuffix(filename, suffix) {
-  const extension = path3.extname(filename);
-  const base = path3.basename(filename, extension);
-  const directory = path3.dirname(filename);
-  return path3.join(directory, `${base}${suffix}${extension}`);
+  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;
@@ -387,10 +577,10 @@ async function captureScreenshot(page, screenshot, outputDirectory, captureOptio
     await page.evaluate(`window.scrollTo(${scroll.x}, ${scroll.y})`);
     await page.waitForTimeout(100);
   }
-  const outputPath = path3.join(outputDirectory, finalFilename);
-  const outputDirectoryPath = path3.dirname(outputPath);
-  if (!existsSync2(outputDirectoryPath)) {
-    mkdirSync(outputDirectoryPath, { recursive: true });
+  const outputPath = path4.join(outputDirectory, finalFilename);
+  const outputDirectoryPath = path4.dirname(outputPath);
+  if (!existsSync3(outputDirectoryPath)) {
+    mkdirSync3(outputDirectoryPath, { recursive: true });
   }
   try {
     if (selector) {
@@ -443,8 +633,21 @@ async function captureAndLog(page, screenshot, outputDirectory, captureOptions,
     error: result.error
   };
 }
+function loadEncryptedSession(sessionKeyOption) {
+  const sessionKey = getSessionKey(sessionKeyOption);
+  if (!sessionKey || !sessionExists()) {
+    return void 0;
+  }
+  const state = loadSession(sessionKey);
+  if (state) {
+    log.verbose("Using encrypted session.");
+    return state;
+  }
+  log.verbose("Failed to decrypt session - using fresh browser.");
+  return void 0;
+}
 async function sync(options = {}) {
-  const configPath = getConfigPath();
+  const configPath = options.configPath ?? getConfigPath();
   const config = loadConfig(configPath);
   if (config.screenshots.length === 0) {
     log("No screenshots defined.");
@@ -457,12 +660,17 @@ async function sync(options = {}) {
     return { total: 0, success: 0, failed: 0, results: [] };
   }
   log.verbose(`Syncing ${screenshots.length} screenshot(s)...`);
-  const configDirectory = path3.dirname(configPath);
-  const outputDirectory = path3.resolve(configDirectory, config.outputDirectory);
+  const configDirectory = path4.dirname(configPath);
+  const projectRoot = path4.dirname(configDirectory);
+  const outputDirectory = path4.resolve(projectRoot, config.outputDirectory);
+  const storageState = loadEncryptedSession(options.sessionKey);
   const viewport = config.browser?.viewport ?? { width: 1280, height: 800 };
-  const context = await launchPersistentBrowser({
+  const deviceScaleFactor = config.browser?.deviceScaleFactor;
+  const { browser, context } = await launchBrowser({
     headless: true,
-    viewport
+    viewport,
+    deviceScaleFactor,
+    storageState
   });
   const page = await context.newPage();
   const colorSchemeSetting = config.browser?.colorScheme;
@@ -491,7 +699,7 @@ async function sync(options = {}) {
       }
     }
   }
-  await context.close();
+  await browser.close();
   const { length: totalCount } = results;
   const successfulResults = results.filter(({ success }) => success);
   const { length: successCount } = successfulResults;
@@ -510,19 +718,28 @@ async function sync(options = {}) {
 }
 
 // src/cli.ts
+var packageJsonPath = path5.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();
-program.name("heroshot").description("Define your screenshots once, update them forever with one command").version("0.0.2-alpha.2").option("-v, --verbose", "Show detailed output").hook("preAction", () => {
+program.name("heroshot").description("Define your screenshots once, update them forever with one command").version(version).option("-v, --verbose", "Show detailed output").option("-c, --config <path>", "Path to config file").option("-s, --session-key <key>", "Session key for encrypted auth (or set HEROSHOT_SESSION_KEY)").hook("preAction", () => {
   const options = program.opts();
   setVerbose(options.verbose ?? false);
 });
 program.command("run", { isDefault: true, hidden: true }).description("Run heroshot (setup if no config, otherwise sync)").action(async () => {
-  const configPath = getConfigPath();
-  if (existsSync3(configPath)) {
-    const result = await sync({});
+  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;
     }
   } else {
+    if (options.config) {
+      log(`Config file not found: ${configPath}`);
+      process.exitCode = 1;
+      return;
+    }
     const { hasScreenshots } = await setup();
     if (hasScreenshots) {
       log("");
@@ -533,21 +750,32 @@ program.command("run", { isDefault: true, hidden: true }).description("Run heros
     }
   }
 });
-program.command("config").description("Open browser to add/edit screenshot definitions").option("--reset", "Clear existing browser profile and start fresh").option("--only", "Only run config, skip sync afterwards").action(async (options) => {
-  if (options.reset) {
-    const profilePath = getProfilePath();
-    if (existsSync3(profilePath)) {
-      rmSync(profilePath, { recursive: true });
-      log.verbose("Browser profile cleared.");
+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").action(async (commandOptions) => {
+  const globalOptions = program.opts();
+  if (commandOptions.reset) {
+    const sessionPath = getSessionPath();
+    if (existsSync4(sessionPath)) {
+      rmSync(sessionPath);
+      log.verbose("Session cleared.");
     }
   }
   const { hasScreenshots } = await setup();
-  if (hasScreenshots && !options.only) {
+  if (hasScreenshots && !commandOptions.only) {
     log("");
-    const result = await sync({});
+    const configPath = globalOptions.config ? path5.resolve(globalOptions.config) : void 0;
+    const result = await sync({ configPath, sessionKey: globalOptions.sessionKey });
     if (result.failed > 0) {
       process.exitCode = 1;
     }
   }
 });
+program.command("session-key").description("Print the session key for this project (for CI setup)").action(() => {
+  const sessionKey = loadLocalKey();
+  if (sessionKey) {
+    log(sessionKey);
+  } else {
+    log('No session key found. Run "heroshot config" first to generate one.');
+    process.exitCode = 1;
+  }
+});
 program.parse();

package/package.json

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

package/toolbar/dist/toolbar.js

@@ -3949,14 +3949,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     function isEditingNewElement() {
       return get(isNewElement);
     }
-    function getSelectedElementSide() {
-      const element = get(selectedElement) ?? get(currentElement);
-      if (!element) return null;
-      const rect = element.getBoundingClientRect();
-      const viewportCenter = globalThis.innerWidth / 2;
-      const elementCenter = rect.left + rect.width / 2;
-      return elementCenter < viewportCenter ? "left" : "right";
-    }
     function getOverlayRects(element, _scrollX, _scrollY, padding) {
       if (!element) return null;
       const rect = element.getBoundingClientRect();
@@ -4082,8 +4074,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       confirmDraft,
       getCurrentPadding,
       getCurrentScroll,
-      isEditingNewElement,
-      getSelectedElementSide
+      isEditingNewElement
     };
     var fragment = comment();
     event("scroll", $window, handleScroll);
@@ -4299,23 +4290,26 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   }
   delegate(["click", "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-6"><span class="block text-sm text-slate-400 mb-2">Color Scheme</span> <div class="flex gap-2"><button type="button">Auto</button> <button type="button">Light</button> <button type="button">Dark</button> <button type="button" title="Capture both light and dark versions">Both</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>`);
+  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">Auto</button> <button type="button">Light</button> <button type="button">Dark</button> <button type="button" title="Capture both light and dark versions">Both</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) {
     push($$props, true);
     let width = /* @__PURE__ */ state(0);
     let height = /* @__PURE__ */ state(0);
     let colorScheme = /* @__PURE__ */ state(void 0);
+    let deviceScaleFactor = /* @__PURE__ */ state(void 0);
     user_effect(() => {
       if ($$props.visible) {
         set(width, $$props.settings.viewport.width, true);
         set(height, $$props.settings.viewport.height, true);
         set(colorScheme, $$props.settings.colorScheme, true);
+        set(deviceScaleFactor, $$props.settings.deviceScaleFactor, true);
       }
     });
     function handleSave() {
       $$props.onSave({
         viewport: { width: get(width), height: get(height) },
-        colorScheme: get(colorScheme)
+        colorScheme: get(colorScheme),
+        deviceScaleFactor: get(deviceScaleFactor)
       });
       $$props.onClose();
     }
@@ -4353,23 +4347,31 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         var div_4 = sibling(div_2, 2);
         var div_5 = sibling(child(div_4), 2);
         var button = child(div_5);
-        button.__click = () => {
+        button.__click = () => set(deviceScaleFactor, void 0);
+        var button_1 = sibling(button, 2);
+        button_1.__click = () => set(deviceScaleFactor, 2);
+        var button_2 = sibling(button_1, 2);
+        button_2.__click = () => set(deviceScaleFactor, 3);
+        var div_6 = sibling(div_4, 2);
+        var div_7 = sibling(child(div_6), 2);
+        var button_3 = child(div_7);
+        button_3.__click = () => {
           set(colorScheme, void 0);
           applyColorScheme();
         };
-        var button_1 = sibling(button, 2);
-        button_1.__click = () => {
+        var button_4 = sibling(button_3, 2);
+        button_4.__click = () => {
           set(colorScheme, "light");
           applyColorScheme("light");
         };
-        var button_2 = sibling(button_1, 2);
-        button_2.__click = () => {
+        var button_5 = sibling(button_4, 2);
+        button_5.__click = () => {
           set(colorScheme, "dark");
           applyColorScheme("dark");
         };
-        var button_3 = sibling(button_2, 2);
-        button_3.__click = () => set(colorScheme, "both");
-        var node_1 = sibling(div_5, 2);
+        var button_6 = sibling(button_5, 2);
+        button_6.__click = () => set(colorScheme, "both");
+        var node_1 = sibling(div_7, 2);
         {
           var consequent = ($$anchor3) => {
             var p = root_2();
@@ -4379,19 +4381,22 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             if (get(colorScheme) === "both") $$render(consequent);
           });
         }
-        var div_6 = sibling(div_4, 2);
-        var button_4 = child(div_6);
-        button_4.__click = function(...$$args) {
+        var div_8 = sibling(div_6, 2);
+        var button_7 = child(div_8);
+        button_7.__click = function(...$$args) {
           var _a2;
           (_a2 = $$props.onClose) == null ? void 0 : _a2.apply(this, $$args);
         };
-        var button_5 = sibling(button_4, 2);
-        button_5.__click = handleSave;
+        var button_8 = sibling(button_7, 2);
+        button_8.__click = handleSave;
         template_effect(() => {
-          set_class(button, 1, `px-3 py-1.5 rounded text-sm transition-colors ${get(colorScheme) === void 0 ? "bg-blue-600 text-white" : "bg-slate-700 text-slate-300 hover:bg-slate-600"}`);
-          set_class(button_1, 1, `px-3 py-1.5 rounded text-sm transition-colors ${get(colorScheme) === "light" ? "bg-blue-600 text-white" : "bg-slate-700 text-slate-300 hover:bg-slate-600"}`);
-          set_class(button_2, 1, `px-3 py-1.5 rounded text-sm transition-colors ${get(colorScheme) === "dark" ? "bg-blue-600 text-white" : "bg-slate-700 text-slate-300 hover:bg-slate-600"}`);
-          set_class(button_3, 1, `px-3 py-1.5 rounded text-sm transition-colors ${get(colorScheme) === "both" ? "bg-blue-600 text-white" : "bg-slate-700 text-slate-300 hover:bg-slate-600"}`);
+          set_class(button, 1, `px-3 py-1.5 rounded text-sm transition-colors ${get(deviceScaleFactor) === void 0 || get(deviceScaleFactor) === 1 ? "bg-blue-600 text-white" : "bg-slate-700 text-slate-300 hover:bg-slate-600"}`);
+          set_class(button_1, 1, `px-3 py-1.5 rounded text-sm transition-colors ${get(deviceScaleFactor) === 2 ? "bg-blue-600 text-white" : "bg-slate-700 text-slate-300 hover:bg-slate-600"}`);
+          set_class(button_2, 1, `px-3 py-1.5 rounded text-sm transition-colors ${get(deviceScaleFactor) === 3 ? "bg-blue-600 text-white" : "bg-slate-700 text-slate-300 hover:bg-slate-600"}`);
+          set_class(button_3, 1, `px-3 py-1.5 rounded text-sm transition-colors ${get(colorScheme) === void 0 ? "bg-blue-600 text-white" : "bg-slate-700 text-slate-300 hover:bg-slate-600"}`);
+          set_class(button_4, 1, `px-3 py-1.5 rounded text-sm transition-colors ${get(colorScheme) === "light" ? "bg-blue-600 text-white" : "bg-slate-700 text-slate-300 hover:bg-slate-600"}`);
+          set_class(button_5, 1, `px-3 py-1.5 rounded text-sm transition-colors ${get(colorScheme) === "dark" ? "bg-blue-600 text-white" : "bg-slate-700 text-slate-300 hover:bg-slate-600"}`);
+          set_class(button_6, 1, `px-3 py-1.5 rounded text-sm transition-colors ${get(colorScheme) === "both" ? "bg-blue-600 text-white" : "bg-slate-700 text-slate-300 hover:bg-slate-600"}`);
         });
         bind_value(input, () => get(width), ($$value) => set(width, $$value));
         bind_value(input_1, () => get(height), ($$value) => set(height, $$value));
@@ -4465,7 +4470,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   function Sidebar($$anchor, $$props) {
     push($$props, true);
     append_styles($$anchor, $$css$1);
-    let side = /* @__PURE__ */ user_derived(() => $$props.selectedElementPosition === "right" ? "left" : "right");
     let localEditingId = /* @__PURE__ */ state(null);
     let editValue = /* @__PURE__ */ state("");
     let inputElement = /* @__PURE__ */ state(null);
@@ -4562,7 +4566,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       return "bg-slate-700/50 hover:bg-slate-600";
     }
     let dragTransform = /* @__PURE__ */ user_derived(() => get(dragOffsetX) !== 0 || get(dragOffsetY) !== 0 ? `transform: translate(${get(dragOffsetX)}px, ${get(dragOffsetY)}px);` : "");
-    let positionStyle = /* @__PURE__ */ user_derived(() => get(side) === "right" ? `right: 16px; left: auto; ${get(dragTransform)}` : `left: 16px; right: auto; ${get(dragTransform)}`);
+    let positionStyle = /* @__PURE__ */ user_derived(() => `right: 16px; left: auto; ${get(dragTransform)}`);
     var div = root$1();
     div.__keydown = stopKeyboardEvent;
     div.__keyup = (event2) => event2.stopPropagation();
@@ -4754,7 +4758,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       // ID of draft item (not yet saved)
     );
     let selectedScreenshotId = /* @__PURE__ */ state(proxy($$props.initialSelectedId ?? null));
-    let selectedElementPosition = /* @__PURE__ */ state(null);
     let elementPicker;
     let screenshotCount = /* @__PURE__ */ user_derived(() => get(screenshots).length);
     let sidebarButtonClass = /* @__PURE__ */ user_derived(() => get(sidebarExpanded) ? "bg-blue-600" : "bg-slate-700 hover:bg-slate-600");
@@ -4782,7 +4785,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         // Focus the name input
         true
       );
-      set(selectedElementPosition, elementPicker.getSelectedElementSide(), true);
     }
     function handlePaddingUpdate(id, padding) {
       const hasPadding = padding.top > 0 || padding.right > 0 || padding.bottom > 0 || padding.left > 0;
@@ -4813,11 +4815,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         set(editingId, null);
       }
       set(selectedScreenshotId, null);
-      set(selectedElementPosition, null);
     }
     function handleDeselect() {
       set(selectedScreenshotId, null);
-      set(selectedElementPosition, null);
     }
     function handleDraftConfirm(id) {
       if (id === get(draftId)) {
@@ -4864,12 +4864,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       const currentUrl = globalThis.location.href;
       if (screenshot.url === currentUrl) {
         elementPicker.highlightElement(screenshot.selector, screenshot.id);
-        globalThis.setTimeout(
-          () => {
-            set(selectedElementPosition, elementPicker.getSelectedElementSide(), true);
-          },
-          200
-        );
       } else {
         emit({
           type: "screenshot-selected",
@@ -4881,12 +4875,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     }
     function executePendingJob(job) {
       elementPicker.highlightElement(job.selector, job.screenshotId);
-      globalThis.setTimeout(
-        () => {
-          set(selectedElementPosition, elementPicker.getSelectedElementSide(), true);
-        },
-        200
-      );
       emit({ type: "job-complete" });
     }
     function isToolbarJob(value) {
@@ -4984,9 +4972,6 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       get selectedId() {
         return get(selectedScreenshotId);
       },
-      get selectedElementPosition() {
-        return get(selectedElementPosition);
-      },
       onToggle: () => set(sidebarExpanded, !get(sidebarExpanded)),
       onSelect: handleSelectScreenshot,
       onRemove: handleRemoveScreenshot,