heroshot 0.0.6 → 0.1.0

package/README.md

@@ -1,33 +1,95 @@
 <p align="center">
-  <img src="https://github.com/omachala/heroshot/blob/main/assets/icon-128.svg?raw=true" alt="heroshot logo" width="128" height="128">
+  <img src="https://github.com/omachala/heroshot/blob/main/assets/logo.svg?raw=true" alt="heroshot logo" height="80">
 </p>
 
 <h1 align="center">heroshot</h1>
 
 <p align="center">
-  <strong>Keep your product screenshots always up to date.</strong><br>
-  No more stale images in docs, landing pages, or blog posts.
+  <strong>Screenshot automation for docs, landing pages, and more.</strong><br>
+  Point and click to define. One command to regenerate when your UI changes.
 </p>
 
-**How it works:**
+<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>
+
+## Get Started
 
-1. Run `npx heroshot` - opens a browser with a visual picker
+```bash
+npx heroshot
+```
+
+**First run** opens an interactive browser:
+
+1. Navigate to any URL
 2. Click on elements you want to screenshot
-3. Close browser - screenshots are captured automatically
+3. Name your screenshots and adjust settings
+4. Close the browser when done
+
+**Subsequent runs** regenerate all screenshots headlessly:
+
+```bash
+npx heroshot
+```
+
+**Reconfigure** anytime by running:
 
-**Why heroshot?**
+```bash
+npx heroshot config
+```
+
+## Why heroshot?
 
 - **Visual picker** - Point and click to select elements, no DevTools needed
 - **Zero config** - No YAML to write, config is auto-generated
 - **Element-precise** - Capture specific UI components, not just full pages
 - **One command** - Regenerate all screenshots anytime your UI changes
+- **CI ready** - Automate updates with encrypted session support
 
----
+## Automated Updates
+
+Run heroshot in CI to keep screenshots always current. See the [full guide](https://heroshot.sh/guide/automated-updates).
+
+**Quick setup:**
+
+1. Get your session key: `npx heroshot session-key`
+2. Add as GitHub secret: `gh secret set HEROSHOT_SESSION_KEY`
+3. Create workflow:
 
-[![npm](https://img.shields.io/npm/v/heroshot)](https://www.npmjs.com/package/heroshot)
+```yaml
+# .github/workflows/heroshot.yaml
+name: Heroshot
+
+on:
+  workflow_dispatch:
+
+jobs:
+  screenshots:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npx heroshot --session-key=${{ secrets.HEROSHOT_SESSION_KEY }}
+      - run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add heroshots/
+          git diff --staged --quiet || git commit -m "chore: update screenshots" && git push
+```
+
+---
 
 **Status:** Early alpha. [See releases](https://github.com/omachala/heroshot/releases) for current version.
 
+**Docs:** [heroshot.sh](https://heroshot.sh)
+
 ## License
 
 MIT

package/dist/cli.js

@@ -46,7 +46,9 @@ var screenshotSchema = z.object({
   /** Padding to expand capture area beyond element bounds */
   padding: paddingSchema.optional(),
   /** Scroll position to restore when capturing */
-  scroll: scrollPositionSchema.optional()
+  scroll: scrollPositionSchema.optional(),
+  /** Fill padding area with detected background color */
+  maskPadding: z.boolean().optional()
 });
 var browserSchema = z.object({
   viewport: viewportSchema.optional(),
@@ -102,7 +104,7 @@ To use heroshot in CI, add your session key as a secret:
 - run: npx heroshot --session-key=\${{ secrets.HEROSHOT_SESSION_KEY }}
 \`\`\`
 
-To get your session key, run: \`heroshot session-key\`
+To get your session key, run: \`npx heroshot session-key\`
 
 Learn more: https://heroshot.sh/docs
 `;
@@ -371,9 +373,11 @@ async function setup() {
     // Use index as fallback createdAt for existing items (older items first)
     createdAt: index,
     ...screenshot.padding && { padding: screenshot.padding },
-    ...screenshot.scroll && { scroll: screenshot.scroll }
+    ...screenshot.scroll && { scroll: screenshot.scroll },
+    ...screenshot.maskPadding && { maskPadding: screenshot.maskPadding }
   }));
   const newlyAddedIds = /* @__PURE__ */ new Set();
+  const deletedIds = /* @__PURE__ */ new Set();
   let pendingJob = null;
   let selectedId = null;
   let sidebarExpanded = false;
@@ -395,6 +399,16 @@ async function setup() {
         }
         break;
       }
+      case "screenshot-removed": {
+        const index = allScreenshots.findIndex((item) => item.id === event.id);
+        if (index !== -1) {
+          const [removed] = allScreenshots.splice(index, 1);
+          deletedIds.add(event.id);
+          newlyAddedIds.delete(event.id);
+          log.verbose(`Removed: ${removed?.name ?? event.id}`);
+        }
+        break;
+      }
       case "screenshot-selected": {
         const [currentPage] = context.pages();
         if (!currentPage) break;
@@ -475,7 +489,8 @@ async function setup() {
       selector: element.selector,
       filename,
       ...element.padding && { padding: element.padding },
-      ...element.scroll && { scroll: element.scroll }
+      ...element.scroll && { scroll: element.scroll },
+      ...element.maskPadding && { maskPadding: element.maskPadding }
     };
     const existingIndex = latestConfig.screenshots.findIndex((item) => item.id === element.id);
     if (existingIndex === -1) {
@@ -486,13 +501,20 @@ async function setup() {
       log.verbose(`~ ${element.name} (updated)`);
     }
   }
+  for (const id of deletedIds) {
+    const index = latestConfig.screenshots.findIndex((item) => item.id === id);
+    if (index !== -1) {
+      const [removed] = latestConfig.screenshots.splice(index, 1);
+      log.verbose(`- ${removed?.name ?? id} (deleted)`);
+    }
+  }
   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("To print your session key, run: npx heroshot session-key");
     log("");
     log("For CI, add HEROSHOT_SESSION_KEY as a repository secret.");
   }
@@ -502,6 +524,84 @@ async function setup() {
 // src/sync.ts
 import { existsSync as existsSync3, mkdirSync as mkdirSync3 } from "fs";
 import path4 from "path";
+var GET_BACKGROUND_COLOR_SCRIPT = String.raw`
+  (element) => {
+    let current = element.parentElement;
+    while (current) {
+      const style = globalThis.getComputedStyle(current);
+      const bgColor = style.backgroundColor;
+      if (bgColor && bgColor !== 'transparent' && !bgColor.startsWith('rgba(0, 0, 0, 0)')) {
+        const rgbMatch = bgColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+        if (rgbMatch && rgbMatch[1] && rgbMatch[2] && rgbMatch[3]) {
+          const red = parseInt(rgbMatch[1], 10);
+          const green = parseInt(rgbMatch[2], 10);
+          const blue = parseInt(rgbMatch[3], 10);
+          return '#' + red.toString(16).padStart(2, '0') + green.toString(16).padStart(2, '0') + blue.toString(16).padStart(2, '0');
+        }
+        return bgColor;
+      }
+      const root = current.getRootNode();
+      if (root instanceof ShadowRoot) {
+        current = root.host;
+      } else {
+        current = current.parentElement;
+      }
+    }
+    return '#ffffff';
+  }
+`;
+async function injectPaddingMask(page, element, padding, bgColor) {
+  const box = await element.boundingBox();
+  if (!box) return;
+  await page.evaluate(`
+    (() => {
+      const box = ${JSON.stringify(box)};
+      const padding = ${JSON.stringify(padding)};
+      const bgColor = ${JSON.stringify(bgColor)};
+      const maskId = 'heroshot-padding-mask';
+
+      // Remove any existing mask
+      document.querySelector('#' + maskId)?.remove();
+
+      const container = document.createElement('div');
+      container.id = maskId;
+      container.style.cssText = 'position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2147483646;';
+
+      // Top mask
+      if (padding.top > 0) {
+        const top = document.createElement('div');
+        top.style.cssText = 'position:absolute;top:' + (box.y - padding.top) + 'px;left:' + (box.x - padding.left) + 'px;width:' + (box.width + padding.left + padding.right) + 'px;height:' + padding.top + 'px;background:' + bgColor + ';';
+        container.append(top);
+      }
+
+      // Bottom mask
+      if (padding.bottom > 0) {
+        const bottom = document.createElement('div');
+        bottom.style.cssText = 'position:absolute;top:' + (box.y + box.height) + 'px;left:' + (box.x - padding.left) + 'px;width:' + (box.width + padding.left + padding.right) + 'px;height:' + padding.bottom + 'px;background:' + bgColor + ';';
+        container.append(bottom);
+      }
+
+      // Left mask
+      if (padding.left > 0) {
+        const left = document.createElement('div');
+        left.style.cssText = 'position:absolute;top:' + box.y + 'px;left:' + (box.x - padding.left) + 'px;width:' + padding.left + 'px;height:' + box.height + 'px;background:' + bgColor + ';';
+        container.append(left);
+      }
+
+      // Right mask
+      if (padding.right > 0) {
+        const right = document.createElement('div');
+        right.style.cssText = 'position:absolute;top:' + box.y + 'px;left:' + (box.x + box.width) + 'px;width:' + padding.right + 'px;height:' + box.height + 'px;background:' + bgColor + ';';
+        container.append(right);
+      }
+
+      document.body.append(container);
+    })()
+  `);
+}
+async function removePaddingMask(page) {
+  await page.evaluate(`document.querySelector('#heroshot-padding-mask')?.remove()`);
+}
 async function findElement(page, selector, maxAttempts = 10, intervalMs = 500) {
   for (let attempt = 1; attempt <= maxAttempts; attempt++) {
     const handle = await page.evaluateHandle(`
@@ -562,7 +662,7 @@ async function takeScreenshot(target, outputPath, format, quality, clip) {
   }
 }
 async function captureScreenshot(page, screenshot, outputDirectory, captureOptions, filenameSuffix = "") {
-  const { name, url, selector, filename, padding, scroll } = screenshot;
+  const { name, url, selector, filename, padding, scroll, maskPadding } = screenshot;
   const { format, quality } = captureOptions;
   const finalFilename = filenameSuffix ? addFilenameSuffix(filename, filenameSuffix) : filename;
   log.verbose(`  ${name}${filenameSuffix}...`);
@@ -594,6 +694,11 @@ async function captureScreenshot(page, screenshot, outputDirectory, captureOptio
         if (!box) {
           return { success: false, error: "Could not get element bounding box" };
         }
+        if (maskPadding) {
+          const bgColorResult = await element.evaluate(GET_BACKGROUND_COLOR_SCRIPT);
+          const bgColor = typeof bgColorResult === "string" ? bgColorResult : "#ffffff";
+          await injectPaddingMask(page, element, padding, bgColor);
+        }
         const clip = {
           x: Math.max(0, box.x - padding.left),
           y: Math.max(0, box.y - padding.top),
@@ -601,6 +706,9 @@ async function captureScreenshot(page, screenshot, outputDirectory, captureOptio
           height: box.height + padding.top + padding.bottom
         };
         await takeScreenshot(page, outputPath, format, quality, clip);
+        if (maskPadding) {
+          await removePaddingMask(page);
+        }
       } else {
         await takeScreenshot(element, outputPath, format, quality);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "heroshot",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "Define your screenshots once, update them forever with one command",
   "type": "module",
   "author": "Ondrej Machala",
@@ -85,6 +85,8 @@
     "knip": "knip",
     "check": "pnpm typecheck && pnpm format:check && pnpm lint && pnpm knip && pnpm test:run",
     "check:toolbar": "pnpm typecheck:toolbar && pnpm lint:toolbar && pnpm test:toolbar",
+    "docs:dev": "pnpm --dir docs run dev",
+    "docs:build": "pnpm --dir docs run build",
     "fix": "pnpm format && pnpm lint:fix",
     "changeset": "changeset"
   }

package/toolbar/dist/toolbar.js

@@ -3605,10 +3605,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   if (typeof window !== "undefined") {
     ((_a = window.__svelte ?? (window.__svelte = {})).v ?? (_a.v = /* @__PURE__ */ new Set())).add(PUBLIC_VERSION);
   }
-  var root$8 = /* @__PURE__ */ from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line></svg>`);
+  var root$9 = /* @__PURE__ */ from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="3"></circle><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line></svg>`);
   function PickerIcon($$anchor, $$props) {
     let size = prop($$props, "size", 3, 20), strokeWidth = prop($$props, "strokeWidth", 3, 2);
-    var svg = root$8();
+    var svg = root$9();
     template_effect(() => {
       set_attribute(svg, "width", size());
       set_attribute(svg, "height", size());
@@ -3616,10 +3616,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
     append($$anchor, svg);
   }
-  var root$7 = /* @__PURE__ */ from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>`);
+  var root$8 = /* @__PURE__ */ from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>`);
   function SettingsIcon($$anchor, $$props) {
     let size = prop($$props, "size", 3, 18), strokeWidth = prop($$props, "strokeWidth", 3, 2);
-    var svg = root$7();
+    var svg = root$8();
     template_effect(() => {
       set_attribute(svg, "width", size());
       set_attribute(svg, "height", size());
@@ -3627,10 +3627,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     });
     append($$anchor, svg);
   }
-  var root$6 = /* @__PURE__ */ from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="21"></line></svg>`);
+  var root$7 = /* @__PURE__ */ from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="15" y1="3" x2="15" y2="21"></line></svg>`);
   function SidebarIcon($$anchor, $$props) {
     let size = prop($$props, "size", 3, 18), strokeWidth = prop($$props, "strokeWidth", 3, 2);
-    var svg = root$6();
+    var svg = root$7();
     template_effect(() => {
       set_attribute(svg, "width", size());
       set_attribute(svg, "height", size());
@@ -3676,6 +3676,26 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   function generateUid() {
     return Math.random().toString(36).slice(2, 10);
   }
+  function getBackgroundColor(element) {
+    let current = element.parentElement;
+    while (current) {
+      const style = globalThis.getComputedStyle(current);
+      const bgColor = style.backgroundColor;
+      if (bgColor && bgColor !== "transparent" && !bgColor.startsWith("rgba(0, 0, 0, 0)")) {
+        const rgbMatch = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(bgColor);
+        if ((rgbMatch == null ? void 0 : rgbMatch[1]) && rgbMatch[2] && rgbMatch[3]) {
+          const red = parseInt(rgbMatch[1], 10);
+          const green = parseInt(rgbMatch[2], 10);
+          const blue = parseInt(rgbMatch[3], 10);
+          return `#${red.toString(16).padStart(2, "0")}${green.toString(16).padStart(2, "0")}${blue.toString(16).padStart(2, "0")}`;
+        }
+        return bgColor;
+      }
+      const root2 = current.getRootNode();
+      current = root2 instanceof ShadowRoot ? root2.host : current.parentElement;
+    }
+    return "#ffffff";
+  }
   function deepElementFromPoint(x, y) {
     let element = document.elementFromPoint(x, y);
     if (!element) return null;
@@ -3759,10 +3779,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 bg-heroshot-primary/25 pointer-events-none flex items-center justify-center"><span class="text-xs font-mono font-bold" style="color:#22c55e;"> </span></div>`);
-  var root_5$1 = /* @__PURE__ */ from_html(`<div class="fixed bg-heroshot-primary/25 pointer-events-none flex items-center justify-center"><span class="text-xs font-mono font-bold" style="color:#22c55e;"> </span></div>`);
-  var root_6$1 = /* @__PURE__ */ from_html(`<div class="fixed bg-heroshot-primary/25 pointer-events-none flex items-center justify-center"><span class="text-xs font-mono font-bold" style="color:#22c55e;"> </span></div>`);
-  var root_7$1 = /* @__PURE__ */ from_html(`<div class="fixed bg-heroshot-primary/25 pointer-events-none flex items-center justify-center"><span class="text-xs font-mono font-bold" style="color:#22c55e;"> </span></div>`);
+  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_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>`);
@@ -3771,6 +3791,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
   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_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>`);
+  var root_13 = /* @__PURE__ */ from_html(`<div class="fixed z-[2147483647] pointer-events-none bg-black/85 text-xs font-mono px-2 py-1.5 rounded flex flex-col gap-0.5"><!> <!> <!></div>`);
+  var root$6 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
   function ElementPicker($$anchor, $$props) {
     push($$props, true);
     const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 };
@@ -3797,6 +3822,15 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       false
       // True if this is a new pick (not editing existing)
     );
+    let maskPadding = /* @__PURE__ */ state(
+      false
+      // Whether to fill padding with background color
+    );
+    let originalMaskPadding = /* @__PURE__ */ state(
+      false
+      // For revert on Esc
+    );
+    let detectedBgColor = /* @__PURE__ */ user_derived(() => get(selectedElement) ? getBackgroundColor(get(selectedElement)) : "#ffffff");
     let scrollY = /* @__PURE__ */ state(proxy(globalThis.scrollY ?? 0));
     let scrollX = /* @__PURE__ */ state(proxy(globalThis.scrollX ?? 0));
     let showOverlay = /* @__PURE__ */ user_derived(() => $$props.active && get(currentElement) !== null || get(selectedElement) !== null);
@@ -3804,11 +3838,27 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     user_effect(() => {
       document.body.style.cursor = $$props.active ? "crosshair" : "";
     });
+    user_effect(() => {
+      if (!$$props.active) {
+        set(tooltipData, null);
+      }
+    });
     function handleMouseMove(event2) {
       if (!$$props.active) return;
       const element = deepElementFromPoint(event2.clientX, event2.clientY);
       if (element && !element.closest("#heroshot-root") && !element.closest("#heroshot-overlay")) {
         set(currentElement, element, true);
+        const rect = element.getBoundingClientRect();
+        set(
+          tooltipData,
+          {
+            size: `${Math.round(rect.width)} x ${Math.round(rect.height)}`,
+            path: getSelector(element)
+          },
+          true
+        );
+        set(tooltipX, event2.clientX, true);
+        set(tooltipY, event2.clientY, true);
       }
     }
     function handleClick(event2) {
@@ -3827,7 +3877,14 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         set(selectedScroll, { x: globalThis.scrollX, y: globalThis.scrollY }, true);
         set(editingScreenshotId, null);
         set(isNewElement, true);
+        set(maskPadding, false);
+        set(originalMaskPadding, false);
         set(currentElement, null);
+        set(
+          tooltipData,
+          null
+          // Clear tooltip
+        );
         $$props.onToggle();
         $$props.onNewElement(selector);
       }
@@ -3839,6 +3896,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
             handleCancel();
           } else if (get(editingScreenshotId)) {
             $$props.onPaddingUpdate(get(editingScreenshotId), get(originalPadding));
+            $$props.onMaskPaddingUpdate(get(editingScreenshotId), get(originalMaskPadding));
             clearSelection();
           }
         } else if ($$props.active) {
@@ -3864,6 +3922,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       set(selectedScroll, { ...defaultScroll }, true);
       set(editingScreenshotId, null);
       set(isNewElement, false);
+      set(maskPadding, false);
+      set(originalMaskPadding, false);
       set(currentElement, null);
       $$props.onCancel();
     }
@@ -3881,6 +3941,23 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         $$props.onPaddingUpdate(get(editingScreenshotId), newPadding);
       }
     }
+    function handlePaddingClick(event2) {
+      event2.preventDefault();
+      event2.stopPropagation();
+      set(maskPadding, !get(maskPadding));
+      set(tooltipData, { padding: get(maskPadding) ? "masked" : "transparent" }, true);
+      if (get(editingScreenshotId) && !get(isNewElement)) {
+        $$props.onMaskPaddingUpdate(get(editingScreenshotId), get(maskPadding));
+      }
+    }
+    function handlePaddingMouseMove(event2) {
+      set(tooltipData, { padding: get(maskPadding) ? "masked" : "transparent" }, true);
+      set(tooltipX, event2.clientX, true);
+      set(tooltipY, event2.clientY, true);
+    }
+    function handlePaddingMouseLeave() {
+      set(tooltipData, null);
+    }
     function highlightElement(selector, screenshotId, attempt = 1) {
       const maxAttempts = 5;
       const element = findElementBySelector(selector);
@@ -3888,6 +3965,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         if (screenshotId) {
           const screenshot = $$props.screenshots.find((item) => item.id === screenshotId);
           const padding = (screenshot == null ? void 0 : screenshot.padding) ? { ...screenshot.padding } : { ...defaultPadding };
+          const mask = (screenshot == null ? void 0 : screenshot.maskPadding) ?? false;
           if (screenshot == null ? void 0 : screenshot.scroll) {
             globalThis.scrollTo({
               left: screenshot.scroll.x,
@@ -3912,6 +3990,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
           );
           set(editingScreenshotId, screenshotId, true);
           set(isNewElement, false);
+          set(maskPadding, mask, true);
+          set(originalMaskPadding, mask, true);
           set(currentElement, null);
         } else {
           element.scrollIntoView({ behavior: "smooth", block: "center" });
@@ -3931,6 +4011,8 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       set(selectedScroll, { ...defaultScroll }, true);
       set(editingScreenshotId, null);
       set(isNewElement, false);
+      set(maskPadding, false);
+      set(originalMaskPadding, false);
       set(currentElement, null);
     }
     function confirmDraft(screenshotId) {
@@ -3938,6 +4020,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         set(editingScreenshotId, screenshotId, true);
         set(isNewElement, false);
         set(originalPadding, { ...get(selectedPadding) }, true);
+        set(originalMaskPadding, get(maskPadding), true);
       }
     }
     function getCurrentPadding() {
@@ -3949,6 +4032,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     function isEditingNewElement() {
       return get(isNewElement);
     }
+    function getCurrentMaskPadding() {
+      return get(maskPadding);
+    }
     function getOverlayRects(element, _scrollX, _scrollY, padding) {
       if (!element) return null;
       const rect = element.getBoundingClientRect();
@@ -3993,6 +4079,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     let dragStartX = /* @__PURE__ */ state(0);
     let dragStartY = /* @__PURE__ */ state(0);
     let dragStartPadding = /* @__PURE__ */ state(proxy({ top: 0, right: 0, bottom: 0, left: 0 }));
+    let tooltipData = /* @__PURE__ */ state(null);
+    let tooltipX = /* @__PURE__ */ state(0);
+    let tooltipY = /* @__PURE__ */ state(0);
     const cornerInset = 2;
     let expandedRect = /* @__PURE__ */ user_derived(() => get(overlayRects) ? {
       top: get(overlayRects).highlight.top - get(selectedPadding).top,
@@ -4013,44 +4102,83 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       globalThis.addEventListener("mouseup", handleResizeMouseUp);
     }
     function handleResizeMouseMove(event2) {
-      if (!get(isDragging) || !get(dragHandle)) return;
+      if (!get(isDragging) || !get(dragHandle) || !get(selectedElement)) return;
       const deltaX = event2.clientX - get(dragStartX);
       const deltaY = event2.clientY - get(dragStartY);
       const newPadding = { ...get(dragStartPadding) };
+      let paddingString;
+      const shiftHeld = event2.shiftKey;
       if (get(dragHandle).includes("-")) {
         const [vertical, horizontal] = get(dragHandle).split("-");
-        let expansion = 0;
-        if (vertical === "top") {
-          expansion = -deltaY;
-        } else if (vertical === "bottom") {
-          expansion = deltaY;
-        }
-        if (horizontal === "left") {
-          expansion = Math.max(expansion, -deltaX);
-        } else if (horizontal === "right") {
-          expansion = Math.max(expansion, deltaX);
+        if (shiftHeld) {
+          if (vertical === "top") {
+            newPadding.top = Math.max(0, get(dragStartPadding).top - deltaY);
+          } else if (vertical === "bottom") {
+            newPadding.bottom = Math.max(0, get(dragStartPadding).bottom + deltaY);
+          }
+          if (horizontal === "left") {
+            newPadding.left = Math.max(0, get(dragStartPadding).left - deltaX);
+          } else if (horizontal === "right") {
+            newPadding.right = Math.max(0, get(dragStartPadding).right + deltaX);
+          }
+        } else {
+          let expansion = 0;
+          if (vertical === "top") {
+            expansion = -deltaY;
+          } else if (vertical === "bottom") {
+            expansion = deltaY;
+          }
+          if (horizontal === "left") {
+            expansion = Math.max(expansion, -deltaX);
+          } else if (horizontal === "right") {
+            expansion = Math.max(expansion, deltaX);
+          }
+          newPadding.top = Math.max(0, get(dragStartPadding).top + expansion);
+          newPadding.right = Math.max(0, get(dragStartPadding).right + expansion);
+          newPadding.bottom = Math.max(0, get(dragStartPadding).bottom + expansion);
+          newPadding.left = Math.max(0, get(dragStartPadding).left + expansion);
         }
-        newPadding.top = Math.max(0, get(dragStartPadding).top + expansion);
-        newPadding.right = Math.max(0, get(dragStartPadding).right + expansion);
-        newPadding.bottom = Math.max(0, get(dragStartPadding).bottom + expansion);
-        newPadding.left = Math.max(0, get(dragStartPadding).left + expansion);
+        const allSame = newPadding.top === newPadding.right && newPadding.right === newPadding.bottom && newPadding.bottom === newPadding.left;
+        paddingString = allSame ? `${newPadding.top}` : `${newPadding.top} ${newPadding.right} ${newPadding.bottom} ${newPadding.left}`;
       } else {
         const edgeDeltas = {
-          top: { key: "top", delta: -deltaY },
-          bottom: { key: "bottom", delta: deltaY },
-          left: { key: "left", delta: -deltaX },
-          right: { key: "right", delta: deltaX }
+          top: { key: "top", opposite: "bottom", delta: -deltaY },
+          bottom: { key: "bottom", opposite: "top", delta: deltaY },
+          left: { key: "left", opposite: "right", delta: -deltaX },
+          right: { key: "right", opposite: "left", delta: deltaX }
         };
         const edge = edgeDeltas[get(dragHandle)];
         if (edge) {
           newPadding[edge.key] = Math.max(0, get(dragStartPadding)[edge.key] + edge.delta);
+          if (!shiftHeld) {
+            newPadding[edge.opposite] = Math.max(0, get(dragStartPadding)[edge.opposite] + edge.delta);
+          }
         }
+        paddingString = `${newPadding[edge.key]}`;
       }
+      const rect = get(selectedElement).getBoundingClientRect();
+      const totalWidth = Math.round(rect.width + newPadding.left + newPadding.right);
+      const totalHeight = Math.round(rect.height + newPadding.top + newPadding.bottom);
+      set(
+        tooltipData,
+        {
+          size: `${totalWidth} x ${totalHeight}`,
+          padding: paddingString
+        },
+        true
+      );
+      set(tooltipX, event2.clientX, true);
+      set(tooltipY, event2.clientY, true);
       handlePaddingChange(newPadding);
     }
     function handleResizeMouseUp() {
       set(isDragging, false);
       set(dragHandle, null);
+      set(
+        tooltipData,
+        null
+        // Clear tooltip
+      );
       globalThis.removeEventListener("mousemove", handleResizeMouseMove);
       globalThis.removeEventListener("mouseup", handleResizeMouseUp);
     }
@@ -4074,9 +4202,10 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       confirmDraft,
       getCurrentPadding,
       getCurrentScroll,
-      isEditingNewElement
+      isEditingNewElement,
+      getCurrentMaskPadding
     };
-    var fragment = comment();
+    var fragment = root$6();
     event("scroll", $window, handleScroll);
     event("mousemove", $document, handleMouseMove);
     event("click", $document, handleClick);
@@ -4105,12 +4234,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                 {
                   var consequent = ($$anchor5) => {
                     var div_5 = root_4$1();
-                    var span = child(div_5);
-                    var text = child(span);
-                    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;`);
-                      set_text(text, get(selectedPadding).top);
-                    });
+                    div_5.__click = 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);
+                    event("mouseleave", div_5, handlePaddingMouseLeave);
                     append($$anchor5, div_5);
                   };
                   if_block(node_3, ($$render) => {
@@ -4121,12 +4249,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                 {
                   var consequent_1 = ($$anchor5) => {
                     var div_6 = root_5$1();
-                    var span_1 = child(div_6);
-                    var text_1 = child(span_1);
-                    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;`);
-                      set_text(text_1, get(selectedPadding).bottom);
-                    });
+                    div_6.__click = 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);
+                    event("mouseleave", div_6, handlePaddingMouseLeave);
                     append($$anchor5, div_6);
                   };
                   if_block(node_4, ($$render) => {
@@ -4137,12 +4264,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                 {
                   var consequent_2 = ($$anchor5) => {
                     var div_7 = root_6$1();
-                    var span_2 = child(div_7);
-                    var text_2 = child(span_2);
-                    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;`);
-                      set_text(text_2, get(selectedPadding).left);
-                    });
+                    div_7.__click = 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);
+                    event("mouseleave", div_7, handlePaddingMouseLeave);
                     append($$anchor5, div_7);
                   };
                   if_block(node_5, ($$render) => {
@@ -4153,12 +4279,11 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
                 {
                   var consequent_3 = ($$anchor5) => {
                     var div_8 = root_7$1();
-                    var span_3 = child(div_8);
-                    var text_3 = child(span_3);
-                    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;`);
-                      set_text(text_3, get(selectedPadding).right);
-                    });
+                    div_8.__click = 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);
+                    event("mouseleave", div_8, handlePaddingMouseLeave);
                     append($$anchor5, div_8);
                   };
                   if_block(node_6, ($$render) => {
@@ -4285,10 +4410,57 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         if (get(showOverlay) && get(overlayRects)) $$render(consequent_10);
       });
     }
+    var node_11 = sibling(node, 2);
+    {
+      var consequent_14 = ($$anchor2) => {
+        var div_23 = root_13();
+        var node_12 = child(div_23);
+        {
+          var consequent_11 = ($$anchor3) => {
+            var span = root_14();
+            var text = child(span);
+            template_effect(() => set_text(text, get(tooltipData).size));
+            append($$anchor3, span);
+          };
+          if_block(node_12, ($$render) => {
+            if (get(tooltipData).size) $$render(consequent_11);
+          });
+        }
+        var node_13 = sibling(node_12, 2);
+        {
+          var consequent_12 = ($$anchor3) => {
+            var span_1 = root_15();
+            var text_1 = child(span_1);
+            template_effect(() => set_text(text_1, get(tooltipData).path));
+            append($$anchor3, span_1);
+          };
+          if_block(node_13, ($$render) => {
+            if (get(tooltipData).path) $$render(consequent_12);
+          });
+        }
+        var node_14 = sibling(node_13, 2);
+        {
+          var consequent_13 = ($$anchor3) => {
+            var span_2 = root_16();
+            var text_2 = child(span_2);
+            template_effect(() => set_text(text_2, get(tooltipData).padding));
+            append($$anchor3, span_2);
+          };
+          if_block(node_14, ($$render) => {
+            if (get(tooltipData).padding) $$render(consequent_13);
+          });
+        }
+        template_effect(() => set_style(div_23, `left:${get(tooltipX) ?? ""}px;top:${get(tooltipY) - 10}px;transform:translateX(-50%) translateY(-100%);`));
+        append($$anchor2, div_23);
+      };
+      if_block(node_11, ($$render) => {
+        if (get(tooltipData)) $$render(consequent_14);
+      });
+    }
     append($$anchor, fragment);
     return pop($$exports);
   }
-  delegate(["click", "mousedown"]);
+  delegate(["click", "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">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) {
@@ -4808,6 +4980,17 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         emit({ type: "screenshot-updated", data: updated });
       }
     }
+    function handleMaskPaddingUpdate(id, mask) {
+      set(
+        screenshots,
+        get(screenshots).map((screenshot) => screenshot.id === id ? { ...screenshot, maskPadding: mask || void 0 } : screenshot),
+        true
+      );
+      const updated = get(screenshots).find((screenshot) => screenshot.id === id);
+      if (updated && id !== get(draftId)) {
+        emit({ type: "screenshot-updated", data: updated });
+      }
+    }
     function handleElementCancel() {
       if (get(draftId)) {
         set(screenshots, get(screenshots).filter((screenshot) => screenshot.id !== get(draftId)), true);
@@ -4823,13 +5006,15 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
       if (id === get(draftId)) {
         const padding = elementPicker.getCurrentPadding();
         const scroll = elementPicker.getCurrentScroll();
+        const mask = elementPicker.getCurrentMaskPadding();
         const hasPadding = padding.top > 0 || padding.right > 0 || padding.bottom > 0 || padding.left > 0;
         set(
           screenshots,
           get(screenshots).map((screenshot) => screenshot.id === id ? {
             ...screenshot,
             padding: hasPadding ? { ...padding } : void 0,
-            scroll: { ...scroll }
+            scroll: { ...scroll },
+            maskPadding: mask || void 0
           } : screenshot),
           true
         );
@@ -4922,6 +5107,7 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         onNewElement: handleNewElement,
         onPaddingUpdate: handlePaddingUpdate,
         onScrollUpdate: handleScrollUpdate,
+        onMaskPaddingUpdate: handleMaskPaddingUpdate,
         onCancel: handleElementCancel,
         onDeselect: handleDeselect
       }),
@@ -5004,10 +5190,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
     pop();
   }
   delegate(["click"]);
-  const styles = '/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n    *, :before, :after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n    }\n  }\n}\n\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n    --color-red-500: oklch(63.7% .237 25.331);\n    --color-green-400: oklch(79.2% .209 151.711);\n    --color-green-500: oklch(72.3% .219 149.579);\n    --color-green-600: oklch(62.7% .194 149.214);\n    --color-green-700: oklch(52.7% .154 150.069);\n    --color-blue-400: oklch(70.7% .165 254.624);\n    --color-blue-500: oklch(62.3% .214 259.815);\n    --color-blue-600: oklch(54.6% .245 262.881);\n    --color-slate-300: oklch(86.9% .022 252.894);\n    --color-slate-400: oklch(70.4% .04 256.788);\n    --color-slate-500: oklch(55.4% .046 257.417);\n    --color-slate-600: oklch(44.6% .043 257.281);\n    --color-slate-700: oklch(37.2% .044 257.287);\n    --color-slate-800: oklch(27.9% .041 260.031);\n    --color-slate-900: oklch(20.8% .042 265.755);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: .25rem;\n    --text-xs: .75rem;\n    --text-xs--line-height: calc(1 / .75);\n    --text-sm: .875rem;\n    --text-sm--line-height: calc(1.25 / .875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-wide: .025em;\n    --radius-sm: .25rem;\n    --radius-md: .375rem;\n    --radius-lg: .5rem;\n    --radius-xl: .75rem;\n    --default-transition-duration: .15s;\n    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-heroshot-primary: #22c55e;\n  }\n}\n\n@layer base {\n  *, :after, :before, ::backdrop {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  ::file-selector-button {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  html, :host {\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    line-height: 1.5;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n\n  b, strong {\n    font-weight: bolder;\n  }\n\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n\n  small {\n    font-size: 80%;\n  }\n\n  sub, sup {\n    vertical-align: baseline;\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n  }\n\n  sub {\n    bottom: -.25em;\n  }\n\n  sup {\n    top: -.5em;\n  }\n\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n\n  :-moz-focusring {\n    outline: auto;\n  }\n\n  progress {\n    vertical-align: baseline;\n  }\n\n  summary {\n    display: list-item;\n  }\n\n  ol, ul, menu {\n    list-style: none;\n  }\n\n  img, svg, video, canvas, audio, iframe, embed, object {\n    vertical-align: middle;\n    display: block;\n  }\n\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n\n  button, input, select, optgroup, textarea {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n\n  ::placeholder {\n    opacity: 1;\n  }\n\n  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentColor;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      ::placeholder {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n\n  textarea {\n    resize: vertical;\n  }\n\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n\n  ::-webkit-datetime-edit {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-year-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-month-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-day-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-hour-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-minute-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-second-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-millisecond-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n\n  button, input:where([type="button"], [type="reset"], [type="submit"]) {\n    appearance: button;\n  }\n\n  ::file-selector-button {\n    appearance: button;\n  }\n\n  ::-webkit-inner-spin-button {\n    height: auto;\n  }\n\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n\n@layer components;\n\n@layer utilities {\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n\n  .pointer-events-none {\n    pointer-events: none;\n  }\n\n  .visible {\n    visibility: visible;\n  }\n\n  .sr-only {\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    position: absolute;\n    overflow: hidden;\n  }\n\n  .absolute {\n    position: absolute;\n  }\n\n  .fixed {\n    position: fixed;\n  }\n\n  .relative {\n    position: relative;\n  }\n\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n\n  .-top-1 {\n    top: calc(var(--spacing) * -1);\n  }\n\n  .top-4 {\n    top: calc(var(--spacing) * 4);\n  }\n\n  .-right-1 {\n    right: calc(var(--spacing) * -1);\n  }\n\n  .bottom-5 {\n    bottom: calc(var(--spacing) * 5);\n  }\n\n  .left-1\\/2 {\n    left: 50%;\n  }\n\n  .z-\\[2147483646\\] {\n    z-index: 2147483646;\n  }\n\n  .z-\\[2147483647\\] {\n    z-index: 2147483647;\n  }\n\n  .container {\n    width: 100%;\n  }\n\n  @media (min-width: 40rem) {\n    .container {\n      max-width: 40rem;\n    }\n  }\n\n  @media (min-width: 48rem) {\n    .container {\n      max-width: 48rem;\n    }\n  }\n\n  @media (min-width: 64rem) {\n    .container {\n      max-width: 64rem;\n    }\n  }\n\n  @media (min-width: 80rem) {\n    .container {\n      max-width: 80rem;\n    }\n  }\n\n  @media (min-width: 96rem) {\n    .container {\n      max-width: 96rem;\n    }\n  }\n\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1);\n  }\n\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n\n  .box-border {\n    box-sizing: border-box;\n  }\n\n  .block {\n    display: block;\n  }\n\n  .flex {\n    display: flex;\n  }\n\n  .grid {\n    display: grid;\n  }\n\n  .hidden {\n    display: none;\n  }\n\n  .table {\n    display: table;\n  }\n\n  .h-0\\.5 {\n    height: calc(var(--spacing) * .5);\n  }\n\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n\n  .h-9 {\n    height: calc(var(--spacing) * 9);\n  }\n\n  .h-screen {\n    height: 100vh;\n  }\n\n  .max-h-\\[calc\\(100vh-32px\\)\\] {\n    max-height: calc(100vh - 32px);\n  }\n\n  .w-0\\.5 {\n    width: calc(var(--spacing) * .5);\n  }\n\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n\n  .w-9 {\n    width: calc(var(--spacing) * 9);\n  }\n\n  .w-20 {\n    width: calc(var(--spacing) * 20);\n  }\n\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n\n  .w-80 {\n    width: calc(var(--spacing) * 80);\n  }\n\n  .w-full {\n    width: 100%;\n  }\n\n  .w-screen {\n    width: 100vw;\n  }\n\n  .max-w-full {\n    max-width: 100%;\n  }\n\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n\n  .min-w-5 {\n    min-width: calc(var(--spacing) * 5);\n  }\n\n  .flex-1 {\n    flex: 1;\n  }\n\n  .flex-shrink-0 {\n    flex-shrink: 0;\n  }\n\n  .border-collapse {\n    border-collapse: collapse;\n  }\n\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n\n  .transform {\n    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n  }\n\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .cursor-text {\n    cursor: text;\n  }\n\n  .resize {\n    resize: both;\n  }\n\n  .flex-col {\n    flex-direction: column;\n  }\n\n  .items-center {\n    align-items: center;\n  }\n\n  .items-start {\n    align-items: flex-start;\n  }\n\n  .justify-between {\n    justify-content: space-between;\n  }\n\n  .justify-center {\n    justify-content: center;\n  }\n\n  .justify-end {\n    justify-content: flex-end;\n  }\n\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * .5);\n  }\n\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n\n  :where(.space-y-1 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  .truncate {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n\n  .overflow-hidden {\n    overflow: hidden;\n  }\n\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n\n  .rounded {\n    border-radius: .25rem;\n  }\n\n  .rounded-full {\n    border-radius: 3.40282e38px;\n  }\n\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n\n  .rounded-sm {\n    border-radius: var(--radius-sm);\n  }\n\n  .rounded-xl {\n    border-radius: var(--radius-xl);\n  }\n\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n\n  .border-\\[3px\\] {\n    border-style: var(--tw-border-style);\n    border-width: 3px;\n  }\n\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n\n  .border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n\n  .border-blue-500 {\n    border-color: var(--color-blue-500);\n  }\n\n  .border-heroshot-primary {\n    border-color: var(--color-heroshot-primary);\n  }\n\n  .border-slate-600 {\n    border-color: var(--color-slate-600);\n  }\n\n  .border-slate-700 {\n    border-color: var(--color-slate-700);\n  }\n\n  .bg-black\\/50 {\n    background-color: #00000080;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .bg-black\\/50 {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n\n  .bg-blue-600 {\n    background-color: var(--color-blue-600);\n  }\n\n  .bg-green-500 {\n    background-color: var(--color-green-500);\n  }\n\n  .bg-green-700 {\n    background-color: var(--color-green-700);\n  }\n\n  .bg-heroshot-primary\\/10 {\n    background-color: #22c55e1a;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .bg-heroshot-primary\\/10 {\n      background-color: color-mix(in oklab, var(--color-heroshot-primary) 10%, transparent);\n    }\n  }\n\n  .bg-heroshot-primary\\/25 {\n    background-color: #22c55e40;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .bg-heroshot-primary\\/25 {\n      background-color: color-mix(in oklab, var(--color-heroshot-primary) 25%, transparent);\n    }\n  }\n\n  .bg-heroshot-primary\\/50 {\n    background-color: #22c55e80;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .bg-heroshot-primary\\/50 {\n      background-color: color-mix(in oklab, var(--color-heroshot-primary) 50%, transparent);\n    }\n  }\n\n  .bg-red-500 {\n    background-color: var(--color-red-500);\n  }\n\n  .bg-slate-600 {\n    background-color: var(--color-slate-600);\n  }\n\n  .bg-slate-700 {\n    background-color: var(--color-slate-700);\n  }\n\n  .bg-slate-700\\/50 {\n    background-color: #31415880;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .bg-slate-700\\/50 {\n      background-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent);\n    }\n  }\n\n  .bg-slate-800 {\n    background-color: var(--color-slate-800);\n  }\n\n  .bg-slate-900 {\n    background-color: var(--color-slate-900);\n  }\n\n  .bg-white {\n    background-color: var(--color-white);\n  }\n\n  .p-1\\.5 {\n    padding: calc(var(--spacing) * 1.5);\n  }\n\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * .5);\n  }\n\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6);\n  }\n\n  .text-center {\n    text-align: center;\n  }\n\n  .text-left {\n    text-align: left;\n  }\n\n  .font-mono {\n    font-family: var(--font-mono);\n  }\n\n  .font-sans {\n    font-family: var(--font-sans);\n  }\n\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n\n  .tracking-wide {\n    --tw-tracking: var(--tracking-wide);\n    letter-spacing: var(--tracking-wide);\n  }\n\n  .text-slate-300 {\n    color: var(--color-slate-300);\n  }\n\n  .text-slate-400 {\n    color: var(--color-slate-400);\n  }\n\n  .text-slate-500 {\n    color: var(--color-slate-500);\n  }\n\n  .text-white {\n    color: var(--color-white);\n  }\n\n  .uppercase {\n    text-transform: uppercase;\n  }\n\n  .opacity-0 {\n    opacity: 0;\n  }\n\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .shadow-2xl {\n    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .shadow-xl {\n    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .ring-2 {\n    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .ring-blue-400 {\n    --tw-ring-color: var(--color-blue-400);\n  }\n\n  .ring-green-400 {\n    --tw-ring-color: var(--color-green-400);\n  }\n\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n  }\n\n  .filter {\n    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n  }\n\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .duration-300 {\n    --tw-duration: .3s;\n    transition-duration: .3s;\n  }\n\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  @media (hover: hover) {\n    .group-hover\\:opacity-100:is(:where(.group):hover *) {\n      opacity: 1;\n    }\n\n    .hover\\:bg-green-600:hover {\n      background-color: var(--color-green-600);\n    }\n\n    .hover\\:bg-red-500:hover {\n      background-color: var(--color-red-500);\n    }\n\n    .hover\\:bg-slate-600:hover {\n      background-color: var(--color-slate-600);\n    }\n\n    .hover\\:bg-slate-700:hover {\n      background-color: var(--color-slate-700);\n    }\n\n    .hover\\:bg-white\\/10:hover {\n      background-color: #ffffff1a;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .hover\\:bg-white\\/10:hover {\n        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n      }\n    }\n\n    .hover\\:text-white:hover {\n      color: var(--color-white);\n    }\n  }\n\n  .focus\\:border-blue-500:focus {\n    border-color: var(--color-blue-500);\n  }\n\n  .focus\\:outline-none:focus {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n}\n\nbutton {\n  cursor: pointer;\n}\n\n[data-theme="dark"] {\n  --color-slate-50: #f8fafc;\n  --color-slate-100: #f1f5f9;\n  --color-slate-200: #e2e8f0;\n  --color-slate-300: #cbd5e1;\n  --color-slate-400: #94a3b8;\n  --color-slate-500: #64748b;\n  --color-slate-600: #475569;\n  --color-slate-700: #334155;\n  --color-slate-800: #1e293b;\n  --color-slate-900: #0f172a;\n  --color-slate-950: #020617;\n  --theme-text: #fff;\n  --theme-text-muted: #94a3b8;\n}\n\n[data-theme="light"] {\n  --color-slate-50: #020617;\n  --color-slate-100: #0f172a;\n  --color-slate-200: #1e293b;\n  --color-slate-300: #334155;\n  --color-slate-400: #475569;\n  --color-slate-500: #64748b;\n  --color-slate-600: #94a3b8;\n  --color-slate-700: #e2e8f0;\n  --color-slate-800: #f1f5f9;\n  --color-slate-900: #f8fafc;\n  --color-slate-950: #fff;\n  --theme-text: #0f172a;\n  --theme-text-muted: #475569;\n}\n\n[data-theme="light"] .text-white {\n  color: var(--theme-text);\n}\n\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-rotate-x {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-rotate-y {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-rotate-z {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-skew-x {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-skew-y {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-space-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-font-weight {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-tracking {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-ring-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-ring-offset-width {\n  syntax: "<length>";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n  syntax: "*";\n  inherits: false;\n  initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-blur {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-brightness {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-contrast {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-grayscale {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-hue-rotate {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-invert {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-opacity {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-saturate {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-sepia {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-drop-shadow {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-drop-shadow-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-duration {\n  syntax: "*";\n  inherits: false\n}\n';
+  const styles = '/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n    *, :before, :after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n      --tw-duration: initial;\n    }\n  }\n}\n\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n    --color-red-500: oklch(63.7% .237 25.331);\n    --color-green-400: oklch(79.2% .209 151.711);\n    --color-green-500: oklch(72.3% .219 149.579);\n    --color-green-600: oklch(62.7% .194 149.214);\n    --color-green-700: oklch(52.7% .154 150.069);\n    --color-blue-400: oklch(70.7% .165 254.624);\n    --color-blue-500: oklch(62.3% .214 259.815);\n    --color-blue-600: oklch(54.6% .245 262.881);\n    --color-slate-300: oklch(86.9% .022 252.894);\n    --color-slate-400: oklch(70.4% .04 256.788);\n    --color-slate-500: oklch(55.4% .046 257.417);\n    --color-slate-600: oklch(44.6% .043 257.281);\n    --color-slate-700: oklch(37.2% .044 257.287);\n    --color-slate-800: oklch(27.9% .041 260.031);\n    --color-slate-900: oklch(20.8% .042 265.755);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: .25rem;\n    --text-xs: .75rem;\n    --text-xs--line-height: calc(1 / .75);\n    --text-sm: .875rem;\n    --text-sm--line-height: calc(1.25 / .875);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-wide: .025em;\n    --radius-sm: .25rem;\n    --radius-md: .375rem;\n    --radius-lg: .5rem;\n    --radius-xl: .75rem;\n    --default-transition-duration: .15s;\n    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n    --color-heroshot-primary: #22c55e;\n  }\n}\n\n@layer base {\n  *, :after, :before, ::backdrop {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  ::file-selector-button {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  html, :host {\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    line-height: 1.5;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n\n  b, strong {\n    font-weight: bolder;\n  }\n\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n\n  small {\n    font-size: 80%;\n  }\n\n  sub, sup {\n    vertical-align: baseline;\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n  }\n\n  sub {\n    bottom: -.25em;\n  }\n\n  sup {\n    top: -.5em;\n  }\n\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n\n  :-moz-focusring {\n    outline: auto;\n  }\n\n  progress {\n    vertical-align: baseline;\n  }\n\n  summary {\n    display: list-item;\n  }\n\n  ol, ul, menu {\n    list-style: none;\n  }\n\n  img, svg, video, canvas, audio, iframe, embed, object {\n    vertical-align: middle;\n    display: block;\n  }\n\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n\n  button, input, select, optgroup, textarea {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n\n  ::placeholder {\n    opacity: 1;\n  }\n\n  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentColor;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      ::placeholder {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n\n  textarea {\n    resize: vertical;\n  }\n\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n\n  ::-webkit-datetime-edit {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-year-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-month-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-day-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-hour-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-minute-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-second-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-millisecond-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n\n  button, input:where([type="button"], [type="reset"], [type="submit"]) {\n    appearance: button;\n  }\n\n  ::file-selector-button {\n    appearance: button;\n  }\n\n  ::-webkit-inner-spin-button {\n    height: auto;\n  }\n\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n\n  [hidden]:where(:not([hidden="until-found"])) {\n    display: none !important;\n  }\n}\n\n@layer components;\n\n@layer utilities {\n  .pointer-events-auto {\n    pointer-events: auto;\n  }\n\n  .pointer-events-none {\n    pointer-events: none;\n  }\n\n  .visible {\n    visibility: visible;\n  }\n\n  .sr-only {\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border-width: 0;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    padding: 0;\n    position: absolute;\n    overflow: hidden;\n  }\n\n  .absolute {\n    position: absolute;\n  }\n\n  .fixed {\n    position: fixed;\n  }\n\n  .relative {\n    position: relative;\n  }\n\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n\n  .-top-1 {\n    top: calc(var(--spacing) * -1);\n  }\n\n  .top-4 {\n    top: calc(var(--spacing) * 4);\n  }\n\n  .-right-1 {\n    right: calc(var(--spacing) * -1);\n  }\n\n  .bottom-5 {\n    bottom: calc(var(--spacing) * 5);\n  }\n\n  .left-1\\/2 {\n    left: 50%;\n  }\n\n  .z-\\[2147483646\\] {\n    z-index: 2147483646;\n  }\n\n  .z-\\[2147483647\\] {\n    z-index: 2147483647;\n  }\n\n  .container {\n    width: 100%;\n  }\n\n  @media (min-width: 40rem) {\n    .container {\n      max-width: 40rem;\n    }\n  }\n\n  @media (min-width: 48rem) {\n    .container {\n      max-width: 48rem;\n    }\n  }\n\n  @media (min-width: 64rem) {\n    .container {\n      max-width: 64rem;\n    }\n  }\n\n  @media (min-width: 80rem) {\n    .container {\n      max-width: 80rem;\n    }\n  }\n\n  @media (min-width: 96rem) {\n    .container {\n      max-width: 96rem;\n    }\n  }\n\n  .-mx-1 {\n    margin-inline: calc(var(--spacing) * -1);\n  }\n\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n\n  .mb-6 {\n    margin-bottom: calc(var(--spacing) * 6);\n  }\n\n  .box-border {\n    box-sizing: border-box;\n  }\n\n  .block {\n    display: block;\n  }\n\n  .flex {\n    display: flex;\n  }\n\n  .grid {\n    display: grid;\n  }\n\n  .hidden {\n    display: none;\n  }\n\n  .table {\n    display: table;\n  }\n\n  .h-0\\.5 {\n    height: calc(var(--spacing) * .5);\n  }\n\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n\n  .h-9 {\n    height: calc(var(--spacing) * 9);\n  }\n\n  .h-screen {\n    height: 100vh;\n  }\n\n  .max-h-\\[calc\\(100vh-32px\\)\\] {\n    max-height: calc(100vh - 32px);\n  }\n\n  .w-0\\.5 {\n    width: calc(var(--spacing) * .5);\n  }\n\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n\n  .w-9 {\n    width: calc(var(--spacing) * 9);\n  }\n\n  .w-20 {\n    width: calc(var(--spacing) * 20);\n  }\n\n  .w-64 {\n    width: calc(var(--spacing) * 64);\n  }\n\n  .w-80 {\n    width: calc(var(--spacing) * 80);\n  }\n\n  .w-full {\n    width: 100%;\n  }\n\n  .w-screen {\n    width: 100vw;\n  }\n\n  .max-w-full {\n    max-width: 100%;\n  }\n\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n\n  .min-w-5 {\n    min-width: calc(var(--spacing) * 5);\n  }\n\n  .flex-1 {\n    flex: 1;\n  }\n\n  .flex-shrink-0 {\n    flex-shrink: 0;\n  }\n\n  .border-collapse {\n    border-collapse: collapse;\n  }\n\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n\n  .transform {\n    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n  }\n\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .cursor-text {\n    cursor: text;\n  }\n\n  .resize {\n    resize: both;\n  }\n\n  .flex-col {\n    flex-direction: column;\n  }\n\n  .items-center {\n    align-items: center;\n  }\n\n  .items-start {\n    align-items: flex-start;\n  }\n\n  .justify-between {\n    justify-content: space-between;\n  }\n\n  .justify-center {\n    justify-content: center;\n  }\n\n  .justify-end {\n    justify-content: flex-end;\n  }\n\n  .gap-0\\.5 {\n    gap: calc(var(--spacing) * .5);\n  }\n\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n\n  :where(.space-y-1 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  .truncate {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n\n  .overflow-hidden {\n    overflow: hidden;\n  }\n\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n\n  .rounded {\n    border-radius: .25rem;\n  }\n\n  .rounded-full {\n    border-radius: 3.40282e38px;\n  }\n\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n\n  .rounded-sm {\n    border-radius: var(--radius-sm);\n  }\n\n  .rounded-xl {\n    border-radius: var(--radius-xl);\n  }\n\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n\n  .border-\\[3px\\] {\n    border-style: var(--tw-border-style);\n    border-width: 3px;\n  }\n\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n\n  .border-dashed {\n    --tw-border-style: dashed;\n    border-style: dashed;\n  }\n\n  .border-blue-500 {\n    border-color: var(--color-blue-500);\n  }\n\n  .border-heroshot-primary {\n    border-color: var(--color-heroshot-primary);\n  }\n\n  .border-slate-600 {\n    border-color: var(--color-slate-600);\n  }\n\n  .border-slate-700 {\n    border-color: var(--color-slate-700);\n  }\n\n  .bg-black\\/50 {\n    background-color: #00000080;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .bg-black\\/50 {\n      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);\n    }\n  }\n\n  .bg-black\\/85 {\n    background-color: #000000d9;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .bg-black\\/85 {\n      background-color: color-mix(in oklab, var(--color-black) 85%, transparent);\n    }\n  }\n\n  .bg-blue-600 {\n    background-color: var(--color-blue-600);\n  }\n\n  .bg-green-500 {\n    background-color: var(--color-green-500);\n  }\n\n  .bg-green-700 {\n    background-color: var(--color-green-700);\n  }\n\n  .bg-heroshot-primary\\/10 {\n    background-color: #22c55e1a;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .bg-heroshot-primary\\/10 {\n      background-color: color-mix(in oklab, var(--color-heroshot-primary) 10%, transparent);\n    }\n  }\n\n  .bg-heroshot-primary\\/50 {\n    background-color: #22c55e80;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .bg-heroshot-primary\\/50 {\n      background-color: color-mix(in oklab, var(--color-heroshot-primary) 50%, transparent);\n    }\n  }\n\n  .bg-red-500 {\n    background-color: var(--color-red-500);\n  }\n\n  .bg-slate-600 {\n    background-color: var(--color-slate-600);\n  }\n\n  .bg-slate-700 {\n    background-color: var(--color-slate-700);\n  }\n\n  .bg-slate-700\\/50 {\n    background-color: #31415880;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .bg-slate-700\\/50 {\n      background-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent);\n    }\n  }\n\n  .bg-slate-800 {\n    background-color: var(--color-slate-800);\n  }\n\n  .bg-slate-900 {\n    background-color: var(--color-slate-900);\n  }\n\n  .bg-white {\n    background-color: var(--color-white);\n  }\n\n  .p-1\\.5 {\n    padding: calc(var(--spacing) * 1.5);\n  }\n\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n\n  .p-6 {\n    padding: calc(var(--spacing) * 6);\n  }\n\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * .5);\n  }\n\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n\n  .py-6 {\n    padding-block: calc(var(--spacing) * 6);\n  }\n\n  .text-center {\n    text-align: center;\n  }\n\n  .text-left {\n    text-align: left;\n  }\n\n  .font-mono {\n    font-family: var(--font-mono);\n  }\n\n  .font-sans {\n    font-family: var(--font-sans);\n  }\n\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n\n  .tracking-wide {\n    --tw-tracking: var(--tracking-wide);\n    letter-spacing: var(--tracking-wide);\n  }\n\n  .text-slate-300 {\n    color: var(--color-slate-300);\n  }\n\n  .text-slate-400 {\n    color: var(--color-slate-400);\n  }\n\n  .text-slate-500 {\n    color: var(--color-slate-500);\n  }\n\n  .text-white {\n    color: var(--color-white);\n  }\n\n  .uppercase {\n    text-transform: uppercase;\n  }\n\n  .opacity-0 {\n    opacity: 0;\n  }\n\n  .shadow {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .shadow-2xl {\n    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .shadow-xl {\n    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .ring {\n    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .ring-2 {\n    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .ring-blue-400 {\n    --tw-ring-color: var(--color-blue-400);\n  }\n\n  .ring-green-400 {\n    --tw-ring-color: var(--color-green-400);\n  }\n\n  .blur {\n    --tw-blur: blur(8px);\n    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n  }\n\n  .filter {\n    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n  }\n\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .duration-300 {\n    --tw-duration: .3s;\n    transition-duration: .3s;\n  }\n\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  @media (hover: hover) {\n    .group-hover\\:opacity-100:is(:where(.group):hover *) {\n      opacity: 1;\n    }\n\n    .hover\\:bg-green-600:hover {\n      background-color: var(--color-green-600);\n    }\n\n    .hover\\:bg-red-500:hover {\n      background-color: var(--color-red-500);\n    }\n\n    .hover\\:bg-slate-600:hover {\n      background-color: var(--color-slate-600);\n    }\n\n    .hover\\:bg-slate-700:hover {\n      background-color: var(--color-slate-700);\n    }\n\n    .hover\\:bg-white\\/10:hover {\n      background-color: #ffffff1a;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      .hover\\:bg-white\\/10:hover {\n        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n      }\n    }\n\n    .hover\\:text-white:hover {\n      color: var(--color-white);\n    }\n  }\n\n  .focus\\:border-blue-500:focus {\n    border-color: var(--color-blue-500);\n  }\n\n  .focus\\:outline-none:focus {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n}\n\nbutton {\n  cursor: pointer;\n}\n\n[data-theme="dark"] {\n  --color-slate-50: #f8fafc;\n  --color-slate-100: #f1f5f9;\n  --color-slate-200: #e2e8f0;\n  --color-slate-300: #cbd5e1;\n  --color-slate-400: #94a3b8;\n  --color-slate-500: #64748b;\n  --color-slate-600: #475569;\n  --color-slate-700: #334155;\n  --color-slate-800: #1e293b;\n  --color-slate-900: #0f172a;\n  --color-slate-950: #020617;\n  --theme-text: #fff;\n  --theme-text-muted: #94a3b8;\n}\n\n[data-theme="light"] {\n  --color-slate-50: #020617;\n  --color-slate-100: #0f172a;\n  --color-slate-200: #1e293b;\n  --color-slate-300: #334155;\n  --color-slate-400: #475569;\n  --color-slate-500: #64748b;\n  --color-slate-600: #94a3b8;\n  --color-slate-700: #e2e8f0;\n  --color-slate-800: #f1f5f9;\n  --color-slate-900: #f8fafc;\n  --color-slate-950: #fff;\n  --theme-text: #0f172a;\n  --theme-text-muted: #475569;\n}\n\n[data-theme="light"] .text-white {\n  color: var(--theme-text);\n}\n\n@property --tw-translate-x {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-y {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-z {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-rotate-x {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-rotate-y {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-rotate-z {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-skew-x {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-skew-y {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-space-y-reverse {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-border-style {\n  syntax: "*";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-font-weight {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-tracking {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-ring-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-ring-offset-width {\n  syntax: "<length>";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n  syntax: "*";\n  inherits: false;\n  initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n  syntax: "*";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-blur {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-brightness {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-contrast {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-grayscale {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-hue-rotate {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-invert {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-opacity {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-saturate {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-sepia {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-drop-shadow {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-drop-shadow-color {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n  syntax: "<percentage>";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n  syntax: "*";\n  inherits: false\n}\n\n@property --tw-duration {\n  syntax: "*";\n  inherits: false\n}\n';
   function initToolbar() {
     var _a2;
-    if (!globalThis.__heroshot) {
+    if (globalThis.__heroshot) {
+      globalThis.__heroshot.utils = { getBackgroundColor };
+    } else {
       globalThis.__heroshot = {
         initialized: false,
         screenshots: [],
@@ -5016,6 +5204,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
         selectedId: null,
         sidebarVisible: false,
         emit: () => {
+        },
+        utils: {
+          getBackgroundColor
         }
       };
     }