afterbefore 0.2.26 → 0.2.28

package/dist/overlay/index.js

@@ -46,12 +46,13 @@ var DEFAULT_FRAME_SETTINGS = {
   bgColor: "#F5F5F5",
   bgGradient: GRADIENT_PRESETS[0],
   bgImage: null,
-  padding: 40,
+  padding: 192,
   browserChrome: false,
   browserTheme: "dark",
   browserUrl: "localhost",
   browserShadow: 50,
-  browserRadius: 8
+  browserRadius: 8,
+  afterbefore: false
 };
 var FRAME_SIZE_PRESETS = [
   { label: "1920 x 1080", hint: "Desktop / HD", w: 1920, h: 1080 },
@@ -70,6 +71,10 @@ var DEV_UI_SELECTORS = [
   "[data-next-badge]",
   "[data-next-mark]"
 ];
+var MIN_DPR = 2;
+function getDpr() {
+  return Math.max(window.devicePixelRatio || 1, MIN_DPR);
+}
 var SNAPDOM_BASE = {
   exclude: DEV_UI_SELECTORS,
   excludeMode: "remove"
@@ -94,17 +99,32 @@ async function capture(options) {
   }
   throw new Error(`Invalid capture mode: ${mode}`);
 }
+function getContentBottom() {
+  let maxBottom = 0;
+  for (const child of document.body.children) {
+    if (child.dataset?.afterbefore != null) continue;
+    if (child.id === "afterbefore-root") continue;
+    const rect = child.getBoundingClientRect();
+    if (rect.height > 0) {
+      maxBottom = Math.max(maxBottom, rect.bottom);
+    }
+  }
+  return maxBottom + window.scrollY;
+}
 async function captureRawViewport() {
   const dpr = window.devicePixelRatio || 1;
   const vw = window.innerWidth;
-  const vh = window.innerHeight;
   const scrollY = window.scrollY;
+  const contentBottom = getContentBottom();
+  const vh = Math.min(window.innerHeight, Math.ceil(contentBottom - scrollY));
   const fullDataUrl = await captureFullPage();
   const fullImg = await loadImage(fullDataUrl);
   const canvas = document.createElement("canvas");
   canvas.width = vw * dpr;
   canvas.height = vh * dpr;
   const ctx = canvas.getContext("2d");
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
   ctx.drawImage(
     fullImg,
     0,
@@ -119,11 +139,14 @@ async function captureRawViewport() {
   return canvas.toDataURL("image/png");
 }
 function drawBrowserChrome(img, theme, dpr, url = "localhost") {
-  const TITLE_BAR_H = 40;
-  const URL_BAR_H = 28;
-  const URL_BAR_MARGIN_TOP = 6;
-  const URL_BAR_MARGIN_BOTTOM = 6;
-  const CHROME_H = TITLE_BAR_H + URL_BAR_H + URL_BAR_MARGIN_TOP + URL_BAR_MARGIN_BOTTOM;
+  const CHROME_H = 28;
+  const BAR_PAD_X = 10;
+  const DOT_R = 3.5;
+  const DOT_START_X = 12;
+  const DOT_GAP = 12;
+  const DOTS_END = DOT_START_X + DOT_GAP * 2 + DOT_R + 6;
+  const URL_BAR_H = 16;
+  const URL_BAR_R = 4;
   const imgW = img.width;
   const imgH = img.height;
   const canvas = document.createElement("canvas");
@@ -135,37 +158,32 @@ function drawBrowserChrome(img, theme, dpr, url = "localhost") {
   ctx.fillRect(0, 0, canvas.width, CHROME_H * dpr);
   ctx.fillStyle = colors.border;
   ctx.fillRect(0, (CHROME_H - 1) * dpr, canvas.width, dpr);
-  const dotY = TITLE_BAR_H / 2 * dpr;
-  const dotR = 6 * dpr;
-  const dotStartX = 18 * dpr;
-  const dotGap = 20 * dpr;
+  const dotY = CHROME_H / 2 * dpr;
   const dotColors = ["#FF5F57", "#FEBC2E", "#28C840"];
   for (let i = 0; i < 3; i++) {
     ctx.beginPath();
-    ctx.arc(dotStartX + i * dotGap, dotY, dotR, 0, Math.PI * 2);
+    ctx.arc((DOT_START_X + i * DOT_GAP) * dpr, dotY, DOT_R * dpr, 0, Math.PI * 2);
     ctx.fillStyle = dotColors[i];
     ctx.fill();
   }
-  const urlBarY = (TITLE_BAR_H + URL_BAR_MARGIN_TOP) * dpr;
-  const urlBarPadX = 80 * dpr;
-  const urlBarX = urlBarPadX;
-  const urlBarW = canvas.width - urlBarPadX * 2;
+  const urlBarX = DOTS_END * dpr;
+  const urlBarY = (CHROME_H - URL_BAR_H) / 2 * dpr;
+  const urlBarW = canvas.width - urlBarX - BAR_PAD_X * dpr;
   const urlBarH = URL_BAR_H * dpr;
-  const urlBarR = 6 * dpr;
   ctx.fillStyle = colors.urlBar;
-  roundRect(ctx, urlBarX, urlBarY, urlBarW, urlBarH, urlBarR);
+  roundRect(ctx, urlBarX, urlBarY, urlBarW, urlBarH, URL_BAR_R * dpr);
   ctx.fill();
   if (theme === "light") {
     ctx.strokeStyle = colors.border;
     ctx.lineWidth = dpr;
-    roundRect(ctx, urlBarX, urlBarY, urlBarW, urlBarH, urlBarR);
+    roundRect(ctx, urlBarX, urlBarY, urlBarW, urlBarH, URL_BAR_R * dpr);
     ctx.stroke();
   }
   ctx.fillStyle = colors.text;
-  ctx.font = `${11 * dpr}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
-  ctx.textAlign = "center";
+  ctx.font = `${9 * dpr}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+  ctx.textAlign = "left";
   ctx.textBaseline = "middle";
-  ctx.fillText(url, canvas.width / 2, urlBarY + urlBarH / 2);
+  ctx.fillText(url, urlBarX + 8 * dpr, urlBarY + urlBarH / 2);
   ctx.drawImage(img, 0, CHROME_H * dpr);
   return canvas.toDataURL("image/png");
 }
@@ -213,7 +231,7 @@ async function renderFrame(imageDataUrl, frameSettings) {
     return imageDataUrl;
   }
   const img = await loadImage(imageDataUrl);
-  const dpr = window.devicePixelRatio || 1;
+  const dpr = getDpr();
   const FRAME_W = frameSettings.size.w;
   const FRAME_H = frameSettings.size.h;
   const pad = frameSettings.padding ?? 40;
@@ -233,34 +251,93 @@ async function renderFrame(imageDataUrl, frameSettings) {
   canvas.width = FRAME_W * dpr;
   canvas.height = FRAME_H * dpr;
   const ctx = canvas.getContext("2d");
+  await drawBackground(ctx, frameSettings, canvas.width, canvas.height);
+  const dx = (canvas.width - drawW) / 2;
+  const shadowShift = frameSettings.browserChrome ? (frameSettings.browserShadow ?? 50) / 100 * 12 * dpr : 0;
+  const dy = (canvas.height - drawH) / 2 - shadowShift;
+  if (frameSettings.browserChrome) {
+    const radius = (frameSettings.browserRadius ?? 8) * scale * dpr;
+    const shadowVal = frameSettings.browserShadow ?? 50;
+    if (shadowVal > 0) {
+      ctx.save();
+      ctx.shadowColor = `rgba(0, 0, 0, ${shadowVal / 100 * 0.6})`;
+      ctx.shadowBlur = shadowVal / 100 * 40 * dpr;
+      ctx.shadowOffsetY = shadowVal / 100 * 8 * dpr;
+      ctx.shadowOffsetX = 0;
+      ctx.fillStyle = "rgba(0,0,0,1)";
+      roundRect(ctx, dx, dy, drawW, drawH, radius);
+      ctx.fill();
+      ctx.restore();
+    }
+    ctx.save();
+    roundRect(ctx, dx, dy, drawW, drawH, radius);
+    ctx.clip();
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(dx, dy, drawW, drawH);
+    ctx.drawImage(contentImg, dx, dy, drawW, drawH);
+    ctx.restore();
+  } else {
+    ctx.drawImage(contentImg, dx, dy, drawW, drawH);
+  }
+  return canvas.toDataURL("image/png");
+}
+async function drawBackground(ctx, frameSettings, w, h) {
   if (frameSettings.bgType === "image" && frameSettings.bgImage) {
     try {
       const bgImg = await loadImage(frameSettings.bgImage);
-      drawCover(ctx, bgImg, canvas.width, canvas.height);
+      drawCover(ctx, bgImg, w, h);
     } catch {
       ctx.fillStyle = frameSettings.bgColor;
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.fillRect(0, 0, w, h);
     }
   } else if (frameSettings.bgType === "gradient") {
-    fillCssGradient(ctx, frameSettings.bgGradient, canvas.width, canvas.height);
+    fillCssGradient(ctx, frameSettings.bgGradient, w, h);
   } else if (frameSettings.bgColor !== "transparent") {
     ctx.fillStyle = frameSettings.bgColor;
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillRect(0, 0, w, h);
   }
-  const dx = (canvas.width - drawW) / 2;
-  const dy = (canvas.height - drawH) / 2;
-  const shadowVal = frameSettings.browserShadow ?? 50;
-  if (frameSettings.browserChrome && shadowVal > 0) {
-    const alpha = shadowVal / 100 * 0.6;
-    ctx.shadowColor = `rgba(0, 0, 0, ${alpha})`;
-    ctx.shadowBlur = shadowVal / 100 * 40 * dpr;
-    ctx.shadowOffsetY = shadowVal / 100 * 8 * dpr;
-    ctx.shadowOffsetX = 0;
+}
+async function renderAfterbeforeFrame(beforeDataUrl, afterDataUrl, frameSettings) {
+  const dpr = getDpr();
+  const FRAME_W = 1920;
+  const FRAME_H = 1080;
+  const pad = frameSettings.padding ?? 192;
+  const gap = 40;
+  const labelSpace = 48;
+  const canvas = document.createElement("canvas");
+  canvas.width = FRAME_W * dpr;
+  canvas.height = FRAME_H * dpr;
+  const ctx = canvas.getContext("2d");
+  await drawBackground(ctx, frameSettings, canvas.width, canvas.height);
+  const beforeImg = await loadImage(beforeDataUrl);
+  const afterImg = await loadImage(afterDataUrl);
+  const availW = FRAME_W - pad * 2;
+  const availH = FRAME_H - pad * 2 - labelSpace;
+  const slotW = (availW - gap) / 2;
+  for (const [i, img] of [beforeImg, afterImg].entries()) {
+    const imgW = img.width / dpr;
+    const imgH = img.height / dpr;
+    const s = Math.min(slotW / imgW, availH / imgH, 1);
+    const drawW = imgW * s * dpr;
+    const drawH = imgH * s * dpr;
+    const slotX = (pad + i * (slotW + gap)) * dpr;
+    const dx = slotX + (slotW * dpr - drawW) / 2;
+    const dy = pad * dpr + (availH * dpr - drawH) / 2;
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(dx, dy, drawW, drawH);
+    ctx.drawImage(img, dx, dy, drawW, drawH);
+  }
+  ctx.fillStyle = frameSettings.bgColor === "#FFFFFF" || frameSettings.bgColor === "#F5F5F5" || frameSettings.bgColor === "#F8F4ED" ? "#666666" : "#ffffff";
+  ctx.font = `400 ${11 * dpr}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "top";
+  const labelY = (FRAME_H - pad - labelSpace + 16) * dpr;
+  const labels = ["Before", "After"];
+  for (let i = 0; i < 2; i++) {
+    const slotX = (pad + i * (slotW + gap)) * dpr;
+    const centerX = slotX + slotW * dpr / 2;
+    ctx.fillText(labels[i], centerX, labelY);
   }
-  ctx.drawImage(contentImg, dx, dy, drawW, drawH);
-  ctx.shadowColor = "transparent";
-  ctx.shadowBlur = 0;
-  ctx.shadowOffsetY = 0;
   return canvas.toDataURL("image/png");
 }
 function drawCover(ctx, img, cw, ch) {
@@ -374,63 +451,7 @@ import {
   FileText,
   Monitor
 } from "lucide-react";
-
-// src/overlay/ui/icons.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function CameraIcon({ size = 32, color }) {
-  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", style: { color }, children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M23.2119 13.8662C23.8759 13.8662 24.4228 13.3193 24.4228 12.6553C24.4228 11.9814 23.8759 11.4443 23.2119 11.4443C22.538 11.4443 22.0009 11.9814 22.0009 12.6553C22.0009 13.3193 22.538 13.8662 23.2119 13.8662ZM6.89356 24.999H24.7451C26.7763 24.999 27.8115 23.9834 27.8115 21.9717V11.7471C27.8115 9.73536 26.7763 8.7295 24.7451 8.7295H21.9521C21.1806 8.7295 20.9462 8.57325 20.5068 8.08496L19.7255 7.20605C19.2373 6.66895 18.7392 6.37598 17.7333 6.37598H13.8369C12.8311 6.37598 12.333 6.66895 11.8447 7.20605L11.0635 8.08496C10.624 8.56348 10.3799 8.7295 9.61817 8.7295H6.89356C4.85254 8.7295 3.82715 9.73536 3.82715 11.7471V21.9717C3.82715 23.9834 4.85254 24.999 6.89356 24.999ZM6.91309 23.4268C5.95606 23.4268 5.39942 22.9092 5.39942 21.8936V11.835C5.39942 10.8193 5.95606 10.3018 6.91309 10.3018H10.0088C10.8877 10.3018 11.3662 10.1357 11.8545 9.58887L12.6162 8.7295C13.1728 8.1045 13.4658 7.94825 14.3251 7.94825H17.2451C18.1044 7.94825 18.3974 8.1045 18.9541 8.7295L19.7158 9.58887C20.2041 10.1357 20.6826 10.3018 21.5615 10.3018H24.7158C25.6826 10.3018 26.2392 10.8193 26.2392 11.835V21.8936C26.2392 22.9092 25.6826 23.4268 24.7158 23.4268H6.91309ZM15.8193 22.0205C18.7685 22.0205 21.1416 19.6572 21.1416 16.6787C21.1416 13.71 18.7783 11.3467 15.8193 11.3467C12.8603 11.3467 10.4873 13.71 10.4873 16.6787C10.4873 19.6572 12.8603 22.0205 15.8193 22.0205ZM15.8193 20.5362C13.7002 20.5362 11.9619 18.8272 11.9619 16.6787C11.9619 14.54 13.6904 12.8213 15.8193 12.8213C17.9482 12.8213 19.6669 14.54 19.6669 16.6787C19.6669 18.8272 17.9482 20.5362 15.8193 20.5362Z",
-      fill: "currentColor"
-    }
-  ) });
-}
-function ImageIcon({ size = 32, color }) {
-  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", style: { color }, children: [
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M7.30371 24.3056H23.6709C25.4385 24.3056 26.3272 23.3193 26.3272 21.4443L20.5264 15.9951C20.0967 15.5947 19.5791 15.3897 19.0518 15.3897C18.5147 15.3897 18.0362 15.5752 17.5869 15.9756L13.1729 19.9209L11.3662 18.29C10.9561 17.9189 10.5068 17.7334 10.0479 17.7334C9.60839 17.7334 9.18847 17.9091 8.78808 18.2802L5.06738 21.6396C5.12598 23.4072 5.84863 24.3056 7.30371 24.3056ZM7.37207 24.9892H24.2666C26.3174 24.9892 27.333 23.9834 27.333 21.9716V10.0381C27.333 8.02636 26.3174 7.01074 24.2666 7.01074H7.37207C5.33105 7.01074 4.30566 8.02636 4.30566 10.0381V21.9716C4.30566 23.9834 5.33105 24.9892 7.37207 24.9892ZM7.3916 23.4169C6.41504 23.4169 5.87793 22.8994 5.87793 21.8837V10.126C5.87793 9.11035 6.41504 8.58301 7.3916 8.58301H24.2471C25.2139 8.58301 25.7608 9.11035 25.7608 10.126V21.8837C25.7608 22.8994 25.2139 23.4169 24.2471 23.4169H7.3916Z",
-        fill: "currentColor"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M11.5811 16.0928C12.8408 16.0928 13.876 15.0576 13.876 13.7881C13.876 12.5283 12.8408 11.4834 11.5811 11.4834C10.3115 11.4834 9.27637 12.5283 9.27637 13.7881C9.27637 15.0576 10.3115 16.0928 11.5811 16.0928Z",
-        fill: "currentColor"
-      }
-    )
-  ] });
-}
-function CheckmarkIcon({ size = 32, color }) {
-  return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", style: { color }, children: [
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M15.8193 25.9561C21.3174 25.9561 25.7803 21.4932 25.7803 15.9951C25.7803 10.4971 21.3174 6.03418 15.8193 6.03418C10.3213 6.03418 5.8584 10.4971 5.8584 15.9951C5.8584 21.4932 10.3213 25.9561 15.8193 25.9561ZM15.8193 24.2959C11.2295 24.2959 7.51856 20.585 7.51856 15.9951C7.51856 11.4053 11.2295 7.69434 15.8193 7.69434C20.4092 7.69434 24.1201 11.4053 24.1201 15.9951C24.1201 20.585 20.4092 24.2959 15.8193 24.2959Z",
-        fill: "currentColor"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M14.7451 20.6338C15.0674 20.6338 15.3408 20.4776 15.5361 20.1748L19.999 13.1533C20.1064 12.958 20.2334 12.7432 20.2334 12.5283C20.2334 12.0889 19.8428 11.8057 19.4326 11.8057C19.1885 11.8057 18.9443 11.9619 18.7588 12.2451L14.7061 18.749L12.7822 16.2588C12.5478 15.9463 12.333 15.8682 12.0596 15.8682C11.6396 15.8682 11.3076 16.21 11.3076 16.6397C11.3076 16.8545 11.3955 17.0596 11.5322 17.2451L13.915 20.1748C14.1592 20.4971 14.4228 20.6338 14.7451 20.6338Z",
-        fill: "currentColor"
-      }
-    )
-  ] });
-}
-function CloseIcon({ size = 32, color }) {
-  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", style: { color }, children: /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M22.0693 8.52467L8.32911 22.2649C7.99708 22.5969 7.98732 23.1633 8.32911 23.4953C8.67091 23.8274 9.23732 23.8274 9.56935 23.4953L23.3096 9.75514C23.6416 9.42311 23.6514 8.8567 23.3096 8.52467C22.9678 8.18287 22.4111 8.17311 22.0693 8.52467ZM23.3096 22.2649L9.56935 8.52467C9.23732 8.18287 8.66115 8.17311 8.32911 8.52467C7.99708 8.86647 7.99708 9.42311 8.32911 9.75514L22.0693 23.4953C22.4014 23.8274 22.9775 23.8371 23.3096 23.4953C23.6416 23.1535 23.6416 22.5969 23.3096 22.2649Z",
-      fill: "currentColor"
-    }
-  ) });
-}
+import { Camera, Check as Check2, X as X2 } from "lucide-react";
 
 // src/overlay/color.ts
 var gray = {
@@ -507,19 +528,18 @@ import {
   Trash2 as Trash22,
   X
 } from "lucide-react";
+import { Image as ImageIcon } from "lucide-react";
 
 // src/overlay/ui/settings-panel.tsx
 import { useEffect, useRef, useState as useState2 } from "react";
 import {
-  AppWindow,
   Check,
   ChevronDown,
-  LayoutGrid,
   Pipette,
   Trash2,
   Upload
 } from "lucide-react";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function SettingsContent({
   frameSettings,
   onFrameSettingsChange,
@@ -527,36 +547,71 @@ function SettingsContent({
   picking,
   onPickFolder
 }) {
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx2(
+  const [autoOpenPanel, setAutoOpenPanel] = useState2(() => {
+    try {
+      return localStorage.getItem("ab-auto-open-panel") !== "false";
+    } catch {
+      return true;
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
       BackgroundSetting,
       {
         frameSettings,
         onFrameSettingsChange
       }
     ),
-    /* @__PURE__ */ jsx2(SettingsDivider, {}),
-    /* @__PURE__ */ jsx2(
-      BrowserFrameSetting,
+    /* @__PURE__ */ jsx(SettingsDivider, {}),
+    /* @__PURE__ */ jsx(
+      SettingsRow,
       {
-        enabled: frameSettings.browserChrome,
-        theme: frameSettings.browserTheme,
-        shadow: frameSettings.browserShadow ?? 50,
-        radius: frameSettings.browserRadius ?? 8,
-        url: frameSettings.browserUrl ?? "localhost",
-        onToggle: () => onFrameSettingsChange({ ...frameSettings, browserChrome: !frameSettings.browserChrome }),
-        onSelect: (theme) => onFrameSettingsChange({ ...frameSettings, browserChrome: true, browserTheme: theme }),
-        onShadowChange: (v) => onFrameSettingsChange({ ...frameSettings, browserShadow: v }),
-        onRadiusChange: (v) => onFrameSettingsChange({ ...frameSettings, browserRadius: v }),
-        onUrlChange: (v) => onFrameSettingsChange({ ...frameSettings, browserUrl: v })
+        title: "Comparison",
+        description: /* @__PURE__ */ jsxs(Fragment, { children: [
+          "Side-by-side before & after",
+          frameSettings.afterbefore && /* @__PURE__ */ jsx("span", { style: { display: "block", color: fg.muted, marginTop: 1 }, children: "Fixed at 1920 \xD7 1080" })
+        ] }),
+        control: /* @__PURE__ */ jsx(
+          ToggleSwitch,
+          {
+            enabled: frameSettings.afterbefore,
+            onChange: () => onFrameSettingsChange({
+              ...frameSettings,
+              afterbefore: !frameSettings.afterbefore,
+              ...!frameSettings.afterbefore ? { size: { w: 1920, h: 1080 } } : {}
+            })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(SettingsDivider, {}),
+    /* @__PURE__ */ jsx(
+      SettingsRow,
+      {
+        title: "Open after capture",
+        description: "Show screenshots panel after taking a screenshot",
+        control: /* @__PURE__ */ jsx(
+          ToggleSwitch,
+          {
+            enabled: autoOpenPanel,
+            onChange: () => {
+              const next = !autoOpenPanel;
+              setAutoOpenPanel(next);
+              try {
+                localStorage.setItem("ab-auto-open-panel", String(next));
+              } catch {
+              }
+            }
+          }
+        )
       }
     ),
-    /* @__PURE__ */ jsx2(SettingsDivider, {}),
-    saveDir !== void 0 && onPickFolder && /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx(SettingsDivider, {}),
+    saveDir !== void 0 && onPickFolder && /* @__PURE__ */ jsx(
       SettingsRow,
       {
-        title: "Save Location",
-        description: /* @__PURE__ */ jsx2(
+        title: "Save location",
+        description: /* @__PURE__ */ jsx(
           "span",
           {
             style: {
@@ -569,7 +624,7 @@ function SettingsContent({
             children: saveDir
           }
         ),
-        control: /* @__PURE__ */ jsx2(SmallButton, { onClick: onPickFolder, children: picking ? "..." : "Change" })
+        control: /* @__PURE__ */ jsx(SmallButton, { onClick: onPickFolder, children: picking ? "..." : "Change" })
       }
     )
   ] });
@@ -579,16 +634,16 @@ function SettingsRow({
   description,
   control
 }) {
-  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "14px 0" }, children: [
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 2, flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: title }),
-      description && /* @__PURE__ */ jsx2("span", { style: { ...text.paragraph.xs, color: fg.sub }, children: description })
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "14px 0" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2, flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { ...text.label.xs, color: fg.strong }, children: title }),
+      description && /* @__PURE__ */ jsx("span", { style: { ...text.paragraph.xs, color: fg.sub }, children: description })
     ] }),
-    /* @__PURE__ */ jsx2("div", { style: { flexShrink: 0 }, children: control })
+    /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: control })
   ] });
 }
 function SettingsDivider() {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
@@ -602,7 +657,7 @@ function ToggleSwitch({
   enabled,
   onChange
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
@@ -619,7 +674,7 @@ function ToggleSwitch({
         flexShrink: 0,
         transition: "background 0.12s ease"
       },
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx(
         "span",
         {
           style: {
@@ -662,9 +717,9 @@ function FrameSizeControl({
     outline: "none",
     padding: "0 2px 0 6px"
   };
-  return /* @__PURE__ */ jsxs2("div", { style: { marginTop: 16, paddingBottom: 14 }, children: [
-    /* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "Size" }),
-    /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 6, marginTop: 8 }, children: ["w", "h"].map((field) => /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs("div", { style: { marginTop: 16, paddingBottom: 14 }, children: [
+    /* @__PURE__ */ jsx("span", { style: { ...text.label.xs, color: fg.strong }, children: "Size" }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, marginTop: 8 }, children: ["w", "h"].map((field) => /* @__PURE__ */ jsxs(
       "div",
       {
         style: {
@@ -678,8 +733,8 @@ function FrameSizeControl({
           borderRadius: 7
         },
         children: [
-          /* @__PURE__ */ jsx2("span", { style: { ...text.label.xs, color: fg.sub, flexShrink: 0, userSelect: "none" }, children: field.toUpperCase() }),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx("span", { style: { ...text.label.xs, color: fg.sub, flexShrink: 0, userSelect: "none" }, children: field.toUpperCase() }),
+          /* @__PURE__ */ jsx(
             "input",
             {
               type: "text",
@@ -703,10 +758,10 @@ function FrameSizeControl({
       },
       field
     )) }),
-    /* @__PURE__ */ jsxs2("div", { style: { marginTop: 16 }, children: [
-      /* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong, display: "block", marginBottom: 8 }, children: "Presets" }),
-      /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
-        /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs("div", { style: { marginTop: 16 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { ...text.label.xs, color: fg.strong, display: "block", marginBottom: 8 }, children: "Presets" }),
+      /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+        /* @__PURE__ */ jsxs(
           "button",
           {
             onClick: () => setSizeOpen((prev) => !prev),
@@ -729,11 +784,11 @@ function FrameSizeControl({
             },
             children: [
               currentPreset ? currentPreset.label : "Custom",
-              /* @__PURE__ */ jsx2(ChevronDown, { size: 12, strokeWidth: 2 })
+              /* @__PURE__ */ jsx(ChevronDown, { size: 12, strokeWidth: 2 })
             ]
           }
         ),
-        sizeOpen && /* @__PURE__ */ jsx2(
+        sizeOpen && /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -748,7 +803,7 @@ function FrameSizeControl({
               boxShadow: shadow.dropdown,
               zIndex: 1
             },
-            children: FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsxs2(
+            children: FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsxs(
               DropItem,
               {
                 active: !isCustom && preset.w === size.w && preset.h === size.h,
@@ -757,8 +812,8 @@ function FrameSizeControl({
                   setSizeOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx2("span", { children: preset.label }),
-                  /* @__PURE__ */ jsx2("span", { style: { marginLeft: 6, fontSize: 10, color: fg.muted }, children: preset.hint })
+                  /* @__PURE__ */ jsx("span", { children: preset.label }),
+                  /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: fg.muted }, children: preset.hint })
                 ]
               },
               preset.label
@@ -802,13 +857,10 @@ function BackgroundSetting({
     onFrameSettingsChange({ ...frameSettings, bgType: "color", bgColor: c });
   };
   const currentBg = frameSettings.bgType === "gradient" ? frameSettings.bgGradient : frameSettings.bgColor;
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
-      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-        /* @__PURE__ */ jsx2(LayoutGrid, { size: 16, strokeWidth: 1.6, color: fg.sub }),
-        /* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "Background" })
-      ] }),
-      /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { ...text.label.xs, color: fg.strong }, children: "Background" }),
+      /* @__PURE__ */ jsx(
         ToggleSwitch,
         {
           enabled: frameSettings.enabled,
@@ -816,7 +868,7 @@ function BackgroundSetting({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 2, marginTop: 12, background: state.subtle, borderRadius: 8, padding: 2 }, children: ["solid", "gradient", "image"].map((t) => /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 2, marginTop: 12, background: state.subtle, borderRadius: 8, padding: 2 }, children: ["solid", "gradient", "image"].map((t) => /* @__PURE__ */ jsx(
       "button",
       {
         onClick: () => setTab(t),
@@ -837,9 +889,9 @@ function BackgroundSetting({
       },
       t
     )) }),
-    tab === "gradient" && /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 8, marginTop: 12, padding: "4px 4px 14px", flexWrap: "wrap" }, children: GRADIENT_PRESETS.map((g) => {
+    tab === "gradient" && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8, marginTop: 12, padding: "4px 4px 14px", flexWrap: "wrap" }, children: GRADIENT_PRESETS.map((g) => {
       const selected = frameSettings.bgType === "gradient" && frameSettings.bgGradient === g;
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx(
         PresetSwatch,
         {
           background: g,
@@ -849,11 +901,11 @@ function BackgroundSetting({
         g
       );
     }) }),
-    tab === "solid" && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, marginTop: 12, padding: "4px 4px 14px", flexWrap: "wrap" }, children: [
+    tab === "solid" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 12, padding: "4px 4px 14px", flexWrap: "wrap" }, children: [
         COLOR_PRESETS.map((c) => {
           const selected = frameSettings.bgType === "color" && frameSettings.bgColor === c;
-          return /* @__PURE__ */ jsx2(
+          return /* @__PURE__ */ jsx(
             PresetSwatch,
             {
               background: c,
@@ -868,7 +920,7 @@ function BackgroundSetting({
           const isCustom = !COLOR_PRESETS.includes(customColor.toUpperCase());
           const bg2 = isCustom ? customColor : "transparent";
           const iconColor = isCustom ? hexLuminance(customColor) > 0.4 ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.7)" : fg.sub;
-          return /* @__PURE__ */ jsx2(
+          return /* @__PURE__ */ jsx(
             "button",
             {
               onClick: async () => {
@@ -893,15 +945,15 @@ function BackgroundSetting({
                 justifyContent: "center",
                 color: iconColor
               },
-              children: /* @__PURE__ */ jsx2(Pipette, { size: 14, strokeWidth: 2 })
+              children: /* @__PURE__ */ jsx(Pipette, { size: 14, strokeWidth: 2 })
             }
           );
         })()
       ] }),
-      /* @__PURE__ */ jsx2("div", { style: { paddingBottom: 4 }, children: /* @__PURE__ */ jsx2(ColorHexInput, { value: frameSettings.bgColor, onChange: selectColor }) })
+      /* @__PURE__ */ jsx("div", { style: { paddingBottom: 4 }, children: /* @__PURE__ */ jsx(ColorHexInput, { value: frameSettings.bgColor, onChange: selectColor }) })
     ] }),
-    tab === "image" && /* @__PURE__ */ jsxs2("div", { style: { marginTop: 12 }, children: [
-      /* @__PURE__ */ jsx2(
+    tab === "image" && /* @__PURE__ */ jsxs("div", { style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ jsx(
         "input",
         {
           ref: fileInputRef,
@@ -911,8 +963,8 @@ function BackgroundSetting({
           style: { display: "none" }
         }
       ),
-      frameSettings.bgImage ? /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-        /* @__PURE__ */ jsx2(
+      frameSettings.bgImage ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx(
           "img",
           {
             src: frameSettings.bgImage,
@@ -926,17 +978,17 @@ function BackgroundSetting({
             }
           }
         ),
-        /* @__PURE__ */ jsxs2(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
-          /* @__PURE__ */ jsx2(Upload, { size: 11, strokeWidth: 2 }),
+        /* @__PURE__ */ jsxs(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
+          /* @__PURE__ */ jsx(Upload, { size: 11, strokeWidth: 2 }),
           "Replace"
         ] }),
-        /* @__PURE__ */ jsx2(SmallButton, { onClick: () => onFrameSettingsChange({ ...frameSettings, bgImage: null }), children: /* @__PURE__ */ jsx2(Trash2, { size: 11, strokeWidth: 2 }) })
-      ] }) : /* @__PURE__ */ jsxs2(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
-        /* @__PURE__ */ jsx2(Upload, { size: 11, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx(SmallButton, { onClick: () => onFrameSettingsChange({ ...frameSettings, bgImage: null }), children: /* @__PURE__ */ jsx(Trash2, { size: 11, strokeWidth: 2 }) })
+      ] }) : /* @__PURE__ */ jsxs(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
+        /* @__PURE__ */ jsx(Upload, { size: 11, strokeWidth: 2 }),
         "Upload image"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs(
       "button",
       {
         onClick: () => setMoreOpen(!moreOpen),
@@ -955,7 +1007,7 @@ function BackgroundSetting({
           padding: 0
         },
         children: [
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx(
             ChevronDown,
             {
               size: 12,
@@ -970,37 +1022,65 @@ function BackgroundSetting({
         ]
       }
     ),
-    moreOpen && /* @__PURE__ */ jsxs2("div", { style: { marginTop: 8 }, children: [
-      /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "Padding" }),
-        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 8, paddingLeft: 4 }, children: [
-          /* @__PURE__ */ jsx2(
+    moreOpen && /* @__PURE__ */ jsxs("div", { style: { marginTop: 8 }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: { ...text.label.xs, color: fg.strong }, children: "Size" }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 8, paddingLeft: 4 }, children: [
+          /* @__PURE__ */ jsx(
             SlimSlider,
             {
-              min: 0,
-              max: 200,
-              step: 5,
-              value: frameSettings.padding,
-              onChange: (v) => onFrameSettingsChange({ ...frameSettings, padding: v })
+              min: 30,
+              max: 100,
+              step: 1,
+              value: Math.round((frameSettings.size.w - frameSettings.padding * 2) / frameSettings.size.w * 100),
+              onChange: (v) => {
+                const pad = Math.round(frameSettings.size.w * (1 - v / 100) / 2);
+                onFrameSettingsChange({ ...frameSettings, padding: pad });
+              }
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx(
             SliderInput,
             {
-              value: frameSettings.padding,
-              onChange: (n) => onFrameSettingsChange({ ...frameSettings, padding: n })
+              min: 30,
+              max: 100,
+              suffix: "%",
+              value: Math.round((frameSettings.size.w - frameSettings.padding * 2) / frameSettings.size.w * 100),
+              onChange: (n) => {
+                const pad = Math.round(frameSettings.size.w * (1 - n / 100) / 2);
+                onFrameSettingsChange({ ...frameSettings, padding: pad });
+              }
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx(
         FrameSizeControl,
         {
           size: frameSettings.size,
           onChange: (size) => onFrameSettingsChange({ ...frameSettings, size })
         }
       )
-    ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { borderTop: `1px solid ${stroke.soft}`, marginTop: 14 }, children: /* @__PURE__ */ jsx(
+      BrowserFrameSetting,
+      {
+        enabled: frameSettings.browserChrome,
+        theme: frameSettings.browserTheme,
+        shadow: frameSettings.browserShadow ?? 50,
+        radius: frameSettings.browserRadius ?? 8,
+        url: frameSettings.browserUrl ?? "localhost",
+        onToggle: () => onFrameSettingsChange({
+          ...frameSettings,
+          browserChrome: !frameSettings.browserChrome,
+          ...!frameSettings.browserChrome ? { enabled: true } : {}
+        }),
+        onSelect: (theme) => onFrameSettingsChange({ ...frameSettings, browserChrome: true, browserTheme: theme, enabled: true }),
+        onShadowChange: (v) => onFrameSettingsChange({ ...frameSettings, browserShadow: v }),
+        onRadiusChange: (v) => onFrameSettingsChange({ ...frameSettings, browserRadius: v }),
+        onUrlChange: (v) => onFrameSettingsChange({ ...frameSettings, browserUrl: v })
+      }
+    ) })
   ] });
 }
 function SlimSlider({
@@ -1028,7 +1108,7 @@ function SlimSlider({
     if (e.buttons === 0) return;
     update(e.clientX);
   };
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref: trackRef,
@@ -1043,9 +1123,9 @@ function SlimSlider({
         cursor: "pointer",
         touchAction: "none"
       },
-      children: /* @__PURE__ */ jsxs2("div", { style: { position: "relative", width: "100%", height: 3, borderRadius: 2, background: stroke.default }, children: [
-        /* @__PURE__ */ jsx2("div", { style: { position: "absolute", left: 0, top: 0, height: "100%", width: `${pct}%`, borderRadius: 2, background: fg.sub } }),
-        /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%", height: 3, borderRadius: 2, background: stroke.default }, children: [
+        /* @__PURE__ */ jsx("div", { style: { position: "absolute", left: 0, top: 0, height: "100%", width: `${pct}%`, borderRadius: 2, background: fg.sub } }),
+        /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -1069,7 +1149,7 @@ function PresetSwatch({
   selected,
   onClick
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       onClick,
@@ -1086,7 +1166,7 @@ function PresetSwatch({
         transition: "outline-color 0.12s ease",
         flexShrink: 0
       },
-      children: selected && /* @__PURE__ */ jsx2(
+      children: selected && /* @__PURE__ */ jsx(
         "div",
         {
           style: {
@@ -1098,7 +1178,7 @@ function PresetSwatch({
             justifyContent: "center",
             background: "rgba(0,0,0,0.2)"
           },
-          children: /* @__PURE__ */ jsx2(Check, { size: 16, strokeWidth: 3, color: "#fff" })
+          children: /* @__PURE__ */ jsx(Check, { size: 16, strokeWidth: 3, color: "#fff" })
         }
       )
     }
@@ -1124,22 +1204,19 @@ function BrowserFrameSetting({
   onUrlChange
 }) {
   const [moreOpen, setMoreOpen] = useState2(false);
-  const trafficLights = /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 4 }, children: ["#FF5F57", "#FEBC2E", "#28C840"].map((c) => /* @__PURE__ */ jsx2("div", { style: { width: 5, height: 5, borderRadius: "50%", background: c } }, c)) });
+  const trafficLights = /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: ["#FF5F57", "#FEBC2E", "#28C840"].map((c) => /* @__PURE__ */ jsx("div", { style: { width: 5, height: 5, borderRadius: "50%", background: c } }, c)) });
   const themes = [
     { value: "dark", label: "macOS Dark", titleBar: "#1C1C1C", urlBar: "#262626", border: "#333333" },
     { value: "light", label: "macOS Light", titleBar: "#F5F5F5", urlBar: "#FFFFFF", border: "#EBEBEB" }
   ];
-  return /* @__PURE__ */ jsxs2("div", { style: { padding: "14px 0" }, children: [
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
-      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-        /* @__PURE__ */ jsx2(AppWindow, { size: 16, strokeWidth: 1.6, color: fg.sub }),
-        /* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "Browser Frame" })
-      ] }),
-      /* @__PURE__ */ jsx2(ToggleSwitch, { enabled, onChange: onToggle })
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "14px 0" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { ...text.label.xs, color: fg.strong }, children: "Browser frame" }),
+      /* @__PURE__ */ jsx(ToggleSwitch, { enabled, onChange: onToggle })
     ] }),
-    /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 10, marginTop: 12 }, children: themes.map((t) => {
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 10, marginTop: 12 }, children: themes.map((t) => {
       const selected = enabled && theme === t.value;
-      return /* @__PURE__ */ jsxs2(
+      return /* @__PURE__ */ jsxs(
         "div",
         {
           onClick: () => onSelect(t.value),
@@ -1154,7 +1231,7 @@ function BrowserFrameSetting({
             transition: "border-color 0.12s ease"
           },
           children: [
-            /* @__PURE__ */ jsxs2(
+            /* @__PURE__ */ jsxs(
               "div",
               {
                 style: {
@@ -1169,7 +1246,7 @@ function BrowserFrameSetting({
                 },
                 children: [
                   trafficLights,
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx(
                     "div",
                     {
                       style: {
@@ -1184,8 +1261,8 @@ function BrowserFrameSetting({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx2("div", { style: { textAlign: "center", marginTop: 8, ...text.label.xs, color: fg.default }, children: t.label }),
-            selected && /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginTop: 8, ...text.label.xs, color: fg.default }, children: t.label }),
+            selected && /* @__PURE__ */ jsx(
               "div",
               {
                 style: {
@@ -1200,7 +1277,7 @@ function BrowserFrameSetting({
                   alignItems: "center",
                   justifyContent: "center"
                 },
-                children: /* @__PURE__ */ jsx2(Check, { size: 10, strokeWidth: 3, color: "#fff" })
+                children: /* @__PURE__ */ jsx(Check, { size: 10, strokeWidth: 3, color: "#fff" })
               }
             )
           ]
@@ -1208,7 +1285,7 @@ function BrowserFrameSetting({
         t.value
       );
     }) }),
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs(
       "button",
       {
         onClick: () => setMoreOpen(!moreOpen),
@@ -1226,7 +1303,7 @@ function BrowserFrameSetting({
           padding: 0
         },
         children: [
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx(
             ChevronDown,
             {
               size: 12,
@@ -1241,10 +1318,10 @@ function BrowserFrameSetting({
         ]
       }
     ),
-    moreOpen && /* @__PURE__ */ jsxs2("div", { style: { marginTop: 8 }, children: [
-      /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "URL" }),
-        /* @__PURE__ */ jsx2(
+    moreOpen && /* @__PURE__ */ jsxs("div", { style: { marginTop: 8 }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { style: { ...text.label.xs, color: fg.strong }, children: "URL" }),
+        /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -1256,7 +1333,7 @@ function BrowserFrameSetting({
               borderRadius: 7,
               marginTop: 8
             },
-            children: /* @__PURE__ */ jsx2(
+            children: /* @__PURE__ */ jsx(
               "input",
               {
                 type: "text",
@@ -1279,10 +1356,10 @@ function BrowserFrameSetting({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs2("div", { style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "Shadow" }),
-        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 8, paddingLeft: 4 }, children: [
-          /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsxs("div", { style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ jsx("span", { style: { ...text.label.xs, color: fg.strong }, children: "Shadow" }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 8, paddingLeft: 4 }, children: [
+          /* @__PURE__ */ jsx(
             SlimSlider,
             {
               min: 0,
@@ -1292,7 +1369,7 @@ function BrowserFrameSetting({
               onChange: onShadowChange
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx(
             SliderInput,
             {
               value: shadow2,
@@ -1304,10 +1381,10 @@ function BrowserFrameSetting({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs2("div", { style: { marginTop: 12 }, children: [
-        /* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "Rounding" }),
-        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 8, paddingLeft: 4 }, children: [
-          /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsxs("div", { style: { marginTop: 12 }, children: [
+        /* @__PURE__ */ jsx("span", { style: { ...text.label.xs, color: fg.strong }, children: "Rounding" }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 8, paddingLeft: 4 }, children: [
+          /* @__PURE__ */ jsx(
             SlimSlider,
             {
               min: 0,
@@ -1317,7 +1394,7 @@ function BrowserFrameSetting({
               onChange: onRadiusChange
             }
           ),
-          /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx(
             SliderInput,
             {
               value: radius,
@@ -1337,7 +1414,7 @@ function SmallButton({
   onClick
 }) {
   const [hovered, setHovered] = useState2(false);
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       onClick,
@@ -1373,7 +1450,7 @@ function SliderInput({
   useEffect(() => {
     if (!editing) setText(String(value));
   }, [editing, value]);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
@@ -1387,7 +1464,7 @@ function SliderInput({
         width: 68
       },
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           "input",
           {
             type: "text",
@@ -1419,7 +1496,7 @@ function SliderInput({
             }
           }
         ),
-        suffix && /* @__PURE__ */ jsx2("span", { style: { ...text.label.xs, color: fg.sub, flexShrink: 0, userSelect: "none", marginLeft: 4 }, children: suffix })
+        suffix && /* @__PURE__ */ jsx("span", { style: { ...text.label.xs, color: fg.sub, flexShrink: 0, userSelect: "none", marginLeft: 4 }, children: suffix })
       ]
     }
   );
@@ -1437,7 +1514,7 @@ function ColorHexInput({
     const hex = raw.startsWith("#") ? raw : `#${raw}`;
     if (/^#[0-9a-fA-F]{6}$/.test(hex)) onChange(hex);
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
@@ -1452,8 +1529,8 @@ function ColorHexInput({
         gap: 6
       },
       children: [
-        /* @__PURE__ */ jsx2("span", { style: { ...text.label.xs, color: fg.sub, flexShrink: 0, userSelect: "none" }, children: "#" }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx("span", { style: { ...text.label.xs, color: fg.sub, flexShrink: 0, userSelect: "none" }, children: "#" }),
+        /* @__PURE__ */ jsx(
           "input",
           {
             type: "text",
@@ -1493,7 +1570,7 @@ function DropItem({
   onClick,
   active
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       onClick,
@@ -1531,30 +1608,31 @@ async function downscaleImage(dataUrl, maxW, maxH) {
 }
 
 // src/overlay/ui/screenshots-panel.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function BrowserChromeBar({ theme, url = "localhost" }) {
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function BrowserChromeBar({ theme, url = "localhost", scale = 1 }) {
+  const s = scale;
   const colors = theme === "dark" ? { titleBar: "#1C1C1C", urlBar: "#262626", text: "#7B7B7B", border: "#333333" } : { titleBar: "#F5F5F5", urlBar: "#FFFFFF", text: "#999999", border: "#EBEBEB" };
-  return /* @__PURE__ */ jsx3("div", { style: { background: colors.titleBar, flexShrink: 0, padding: "4px 6px" }, children: /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 6, height: 14 }, children: [
-    /* @__PURE__ */ jsx3("div", { style: { display: "flex", gap: 5, flexShrink: 0 }, children: ["#FF5F57", "#FEBC2E", "#28C840"].map((c) => /* @__PURE__ */ jsx3("div", { style: { width: 6, height: 6, borderRadius: "50%", background: c } }, c)) }),
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2("div", { style: { background: colors.titleBar, flexShrink: 0, padding: `${4 * s}px ${6 * s}px` }, children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 6 * s, height: 14 * s }, children: [
+    /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 5 * s, flexShrink: 0 }, children: ["#FF5F57", "#FEBC2E", "#28C840"].map((c) => /* @__PURE__ */ jsx2("div", { style: { width: 6 * s, height: 6 * s, borderRadius: "50%", background: c } }, c)) }),
+    /* @__PURE__ */ jsx2(
       "div",
       {
         style: {
           flex: 1,
-          height: 14,
+          height: 14 * s,
           background: colors.urlBar,
-          borderRadius: 3,
+          borderRadius: 3 * s,
           display: "flex",
           alignItems: "center",
-          paddingLeft: 6,
+          paddingLeft: 6 * s,
           ...theme === "light" ? { border: `1px solid ${colors.border}` } : {},
           boxSizing: "border-box"
         },
-        children: /* @__PURE__ */ jsx3(
+        children: /* @__PURE__ */ jsx2(
           "span",
           {
             style: {
-              fontSize: 7,
+              fontSize: 7 * s,
               lineHeight: 1,
               color: colors.text,
               fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
@@ -1570,7 +1648,12 @@ function FramePreview({
   componentUrl,
   viewportUrl,
   frameSettings,
-  loading
+  loading,
+  afterbeforeMode,
+  beforeUrl,
+  afterUrl,
+  activeSlot: activeSlotProp,
+  onSlotClick
 }) {
   const { enabled: frameEnabled, browserChrome, browserTheme, browserUrl, browserShadow = 50, browserRadius = 8, size, bgType, bgColor, bgGradient, bgImage, padding } = frameSettings;
   const [viewportAvailable, setViewportAvailable] = useState3(true);
@@ -1580,8 +1663,9 @@ function FramePreview({
   const previewUrl = browserChrome && viewportUrl && viewportAvailable ? viewportUrl : componentUrl;
   const aspectRatio = frameEnabled ? `${size.w} / ${size.h}` : "16 / 10";
   const outerBg = frameEnabled ? bgType === "image" && bgImage ? { backgroundImage: `url(${bgImage})`, backgroundSize: "cover", backgroundPosition: "center" } : bgType === "gradient" ? { background: bgGradient } : { background: bgColor } : { background: bg.elevated };
-  const emptyState = /* @__PURE__ */ jsx3("span", { style: { ...text.paragraph.xs, color: fg.sub }, children: loading ? "Loading..." : "No screenshots yet" });
-  const imageEl = previewUrl ? /* @__PURE__ */ jsx3(
+  const emptyState = /* @__PURE__ */ jsx2("span", { style: { ...text.paragraph.xs, color: fg.sub }, children: loading ? "Loading..." : "No screenshots yet" });
+  const imageStyle = { maxWidth: "100%", maxHeight: "100%", objectFit: "contain", display: "block" };
+  const imageEl = previewUrl ? /* @__PURE__ */ jsx2(
     "img",
     {
       src: previewUrl,
@@ -1591,20 +1675,79 @@ function FramePreview({
           setViewportAvailable(false);
         }
       },
-      style: {
-        maxWidth: "100%",
-        maxHeight: "100%",
-        objectFit: "contain",
-        display: "block"
-      }
+      style: imageStyle
     }
   ) : null;
-  const padPct = frameEnabled ? `${padding / size.h * 100}%` : void 0;
+  const padStyle = frameEnabled && !browserChrome ? `${padding / size.h * 100}%` : void 0;
+  const chromeScale = frameEnabled ? Math.max(0.3, (size.w - padding * 2) / size.w) : 1;
+  const chromeWidthPct = frameEnabled ? `${chromeScale * 100}%` : "100%";
+  const chromePadY = frameEnabled ? `${padding / size.w * 100}%` : void 0;
   const shadowAlpha = browserShadow / 100 * 0.6;
   const shadowBlur = browserShadow / 100 * 40;
   const shadowY = browserShadow / 100 * 8;
   const browserBoxShadow = browserChrome && browserShadow > 0 ? `0 ${shadowY}px ${shadowBlur}px rgba(0, 0, 0, ${shadowAlpha})` : "none";
-  return /* @__PURE__ */ jsx3(
+  if (afterbeforeMode) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          width: "100%",
+          aspectRatio: "1920 / 1080",
+          borderRadius: 10,
+          overflow: "hidden",
+          border: `1px solid ${stroke.soft}`,
+          marginBottom: 10,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "2%",
+          padding: "5%",
+          ...outerBg
+        },
+        children: ["before", "after"].map((slot) => {
+          const url = slot === "before" ? beforeUrl : afterUrl;
+          const isActive = activeSlotProp === slot;
+          return /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              onClick: () => onSlotClick?.(slot),
+              style: {
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: 8,
+                cursor: "pointer"
+              },
+              children: [
+                /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      width: "100%",
+                      aspectRatio: "16 / 10",
+                      borderRadius: 6,
+                      border: isActive ? `2px solid ${accent.highlight}` : url ? `1px solid ${stroke.soft}` : `2px dashed ${stroke.interactive}`,
+                      overflow: "hidden",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      background: "rgba(0, 0, 0, 0.1)",
+                      transition: "border-color 0.12s ease"
+                    },
+                    children: url ? /* @__PURE__ */ jsx2("img", { src: url, alt: "", style: { width: "100%", height: "100%", objectFit: "contain", display: "block" } }) : /* @__PURE__ */ jsx2("span", { style: { ...text.paragraph.xs, color: fg.muted }, children: "Click to assign" })
+                  }
+                ),
+                /* @__PURE__ */ jsx2("span", { style: { ...text.paragraph.xs, color: fg.muted }, children: slot === "before" ? "Before" : "After" })
+              ]
+            },
+            slot
+          );
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       style: {
@@ -1617,24 +1760,25 @@ function FramePreview({
         display: "flex",
         flexDirection: "column",
         ...outerBg,
-        ...padPct ? { padding: padPct } : {}
+        ...padStyle ? { padding: padStyle } : {}
       },
-      children: browserChrome ? /* @__PURE__ */ jsxs3("div", { style: { flex: 1, display: "flex", flexDirection: "column", borderRadius: browserRadius, overflow: "hidden", minHeight: 0, boxShadow: browserBoxShadow }, children: [
-        /* @__PURE__ */ jsx3(BrowserChromeBar, { theme: browserTheme, url: browserUrl }),
-        /* @__PURE__ */ jsx3(
-          "div",
-          {
-            style: {
-              flex: 1,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              minHeight: 0
-            },
-            children: imageEl || emptyState
-          }
-        )
-      ] }) : /* @__PURE__ */ jsx3(
+      children: browserChrome ? /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            minHeight: 0
+          },
+          children: /* @__PURE__ */ jsxs2("div", { style: { width: chromeWidthPct, display: "flex", flexDirection: "column", borderRadius: browserRadius * chromeScale, overflow: "hidden", boxShadow: browserBoxShadow }, children: [
+            /* @__PURE__ */ jsx2(BrowserChromeBar, { theme: browserTheme, url: browserUrl, scale: chromeScale }),
+            /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: imageEl || emptyState })
+          ] })
+        }
+      ) : /* @__PURE__ */ jsx2(
         "div",
         {
           style: {
@@ -1685,11 +1829,29 @@ function ScreenshotsPanel({
   const [editingFile, setEditingFile] = useState3(null);
   const [editValue, setEditValue] = useState3("");
   const [selectedFile, setSelectedFile] = useState3(null);
+  const [beforeFile, setBeforeFile] = useState3(null);
+  const [afterFile, setAfterFile] = useState3(null);
+  const [activeSlot, setActiveSlot] = useState3("before");
+  useEffect2(() => {
+    if (!frameSettings.afterbefore) {
+      setBeforeFile(null);
+      setAfterFile(null);
+      setActiveSlot("before");
+    }
+  }, [frameSettings.afterbefore]);
   useEffect2(() => {
     if (!open) return;
     fetch("/__afterbefore/config").then((r) => r.json()).then((data) => setSaveDir(data.saveDir)).catch(() => {
     });
   }, [open]);
+  useEffect2(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
   const handlePickFolder = async () => {
     setPicking(true);
     try {
@@ -1792,12 +1954,74 @@ function ScreenshotsPanel({
       showToast("Delete failed", "error");
     }
   };
+  const [saving, setSaving] = useState3(false);
+  const toDataUrl = async (url) => {
+    const r = await fetch(url);
+    if (!r.ok) throw new Error("Failed to load image");
+    const b = await r.blob();
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.readAsDataURL(b);
+    });
+  };
+  const makeImageUrl = (file) => `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(file)}`;
+  const handleSave = async () => {
+    if (saving) return;
+    if (frameSettings.afterbefore) {
+      if (!beforeFile || !afterFile) return;
+      setSaving(true);
+      try {
+        const beforeDataUrl = await toDataUrl(makeImageUrl(beforeFile));
+        const afterDataUrl = await toDataUrl(makeImageUrl(afterFile));
+        const renderedDataUrl = await renderAfterbeforeFrame(beforeDataUrl, afterDataUrl, frameSettings);
+        const saveRes = await fetch("/__afterbefore/save", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ mode: "resave", image: renderedDataUrl })
+        });
+        if (!saveRes.ok) throw new Error("Save failed");
+        showToast("Saved to desktop", "success");
+      } catch (err) {
+        console.error("[afterbefore] Comparison save failed:", err);
+        showToast("Save failed", "error");
+      } finally {
+        setSaving(false);
+      }
+      return;
+    }
+    if (!selectedFile) return;
+    setSaving(true);
+    try {
+      const baseUrl = makeImageUrl(selectedFile);
+      const rawDataUrl = await toDataUrl(baseUrl);
+      let primaryDataUrl = rawDataUrl;
+      if (frameSettings.browserChrome) {
+        try {
+          primaryDataUrl = await toDataUrl(`${baseUrl}&variant=viewport`);
+        } catch {
+        }
+      }
+      const renderedDataUrl = await renderFrame(primaryDataUrl, frameSettings);
+      const saveRes = await fetch("/__afterbefore/save", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ mode: "resave", image: renderedDataUrl, rawImage: rawDataUrl })
+      });
+      if (!saveRes.ok) throw new Error("Save failed");
+      showToast("Saved to desktop", "success");
+    } catch {
+      showToast("Save failed", "error");
+    } finally {
+      setSaving(false);
+    }
+  };
   const baseImageUrl = selectedFile ? `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(selectedFile)}` : null;
   const viewportUrl = baseImageUrl ? `${baseImageUrl}&variant=viewport` : null;
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx3(IconButton, { active: open, tooltipSide, tooltip: !open ? "Screenshots" : void 0, onClick, children: /* @__PURE__ */ jsx3(ImageIcon, { size: 20 }) }),
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(IconButton, { active: open, tooltipSide, tooltip: !open ? "Screenshots" : void 0, onClick, children: /* @__PURE__ */ jsx2(ImageIcon, { size: 18, strokeWidth: 1.7 }) }),
     open && createPortal(
-      /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsxs2(
         "div",
         {
           "data-afterbefore": "true",
@@ -1813,7 +2037,7 @@ function ScreenshotsPanel({
             ...fontBase
           },
           children: [
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx2(
               "style",
               {
                 dangerouslySetInnerHTML: {
@@ -1826,13 +2050,13 @@ function ScreenshotsPanel({
                 }
               }
             ),
-            /* @__PURE__ */ jsxs3(
+            /* @__PURE__ */ jsxs2(
               "div",
               {
                 onClick: (e) => e.stopPropagation(),
                 style: {
                   width: 900,
-                  height: "70vh",
+                  height: "60vh",
                   borderRadius: 14,
                   background: bg.base,
                   border: `1px solid ${stroke.default}`,
@@ -1843,18 +2067,18 @@ function ScreenshotsPanel({
                   animation: "ab-panel-in 150ms cubic-bezier(0.23, 1, 0.32, 1)"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs3("div", { style: {
+                  /* @__PURE__ */ jsxs2("div", { style: {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",
                     padding: "16px 20px",
                     borderBottom: `1px solid ${stroke.soft}`
                   }, children: [
-                    /* @__PURE__ */ jsxs3("div", { children: [
-                      /* @__PURE__ */ jsx3("div", { style: { ...text.label.sm, color: fg.strong }, children: "Screenshots" }),
-                      /* @__PURE__ */ jsx3("div", { style: { ...text.paragraph.xs, color: fg.sub, marginTop: 2 }, children: "Capture history & settings" })
+                    /* @__PURE__ */ jsxs2("div", { children: [
+                      /* @__PURE__ */ jsx2("div", { style: { ...text.label.sm, color: fg.strong }, children: "Screenshots" }),
+                      /* @__PURE__ */ jsx2("div", { style: { ...text.paragraph.xs, color: fg.sub, marginTop: 2 }, children: "Capture history & settings" })
                     ] }),
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx2(
                       "button",
                       {
                         onClick,
@@ -1880,28 +2104,33 @@ function ScreenshotsPanel({
                           e.currentTarget.style.background = "transparent";
                           e.currentTarget.style.color = fg.sub;
                         },
-                        children: /* @__PURE__ */ jsx3(X, { size: 14, strokeWidth: 2 })
+                        children: /* @__PURE__ */ jsx2(X, { size: 14, strokeWidth: 2 })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flex: 1, overflow: "hidden", minHeight: 0 }, children: [
-                    /* @__PURE__ */ jsxs3("div", { style: { flex: 1, overflowY: "auto", padding: "16px 20px 20px", minHeight: 0 }, children: [
-                      /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flex: 1, overflow: "hidden", minHeight: 0, position: "relative" }, children: [
+                    /* @__PURE__ */ jsxs2("div", { style: { flex: 1, overflowY: "auto", padding: "16px 20px 20px", minHeight: 0, marginRight: 301 }, children: [
+                      /* @__PURE__ */ jsx2(
                         FramePreview,
                         {
                           componentUrl: baseImageUrl,
                           viewportUrl,
                           frameSettings,
-                          loading
+                          loading,
+                          afterbeforeMode: frameSettings.afterbefore,
+                          beforeUrl: beforeFile ? `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(beforeFile)}` : null,
+                          afterUrl: afterFile ? `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(afterFile)}` : null,
+                          activeSlot,
+                          onSlotClick: setActiveSlot
                         }
                       ),
-                      selectedFile && !loading && /* @__PURE__ */ jsxs3("div", { style: {
+                      !frameSettings.afterbefore && selectedFile && !loading && /* @__PURE__ */ jsxs2("div", { style: {
                         display: "flex",
                         alignItems: "center",
                         gap: 8,
                         marginBottom: 12
                       }, children: [
-                        /* @__PURE__ */ jsx3("div", { style: { flex: 1, minWidth: 0 }, children: editingFile === selectedFile ? /* @__PURE__ */ jsx3(
+                        /* @__PURE__ */ jsx2("div", { style: { flex: 1, minWidth: 0 }, children: editingFile === selectedFile ? /* @__PURE__ */ jsx2(
                           "input",
                           {
                             autoFocus: true,
@@ -1924,7 +2153,7 @@ function ScreenshotsPanel({
                               fontFamily: "inherit"
                             }
                           }
-                        ) : /* @__PURE__ */ jsx3(
+                        ) : /* @__PURE__ */ jsx2(
                           "div",
                           {
                             onClick: () => {
@@ -1943,7 +2172,7 @@ function ScreenshotsPanel({
                             children: formatTimestamp(selectedFile)
                           }
                         ) }),
-                        /* @__PURE__ */ jsx3(
+                        /* @__PURE__ */ jsx2(
                           "button",
                           {
                             onClick: () => handleDelete(selectedFile),
@@ -1970,12 +2199,12 @@ function ScreenshotsPanel({
                               e.currentTarget.style.color = fg.muted;
                               e.currentTarget.style.background = "transparent";
                             },
-                            children: /* @__PURE__ */ jsx3(Trash22, { size: 14, strokeWidth: 1.8 })
+                            children: /* @__PURE__ */ jsx2(Trash22, { size: 14, strokeWidth: 1.8 })
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 10, marginBottom: 10 }, children: [
-                        /* @__PURE__ */ jsx3("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 10, marginBottom: 10 }, children: [
+                        /* @__PURE__ */ jsx2("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx2(
                           FilterDropdown,
                           {
                             label: "Project",
@@ -1993,7 +2222,7 @@ function ScreenshotsPanel({
                             }
                           }
                         ) }),
-                        /* @__PURE__ */ jsx3("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx3(
+                        /* @__PURE__ */ jsx2("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx2(
                           FilterDropdown,
                           {
                             label: "Branch",
@@ -2011,7 +2240,7 @@ function ScreenshotsPanel({
                           }
                         ) })
                       ] }),
-                      screenshots.length > 0 && /* @__PURE__ */ jsx3(
+                      screenshots.length > 0 && /* @__PURE__ */ jsx2(
                         "div",
                         {
                           style: {
@@ -2023,12 +2252,25 @@ function ScreenshotsPanel({
                           },
                           children: screenshots.map((shot) => {
                             const thumbUrl = `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(shot.filename)}`;
-                            const isSelected = selectedFile === shot.filename;
-                            return /* @__PURE__ */ jsx3(
+                            const isSelected = frameSettings.afterbefore ? shot.filename === beforeFile || shot.filename === afterFile : selectedFile === shot.filename;
+                            const slotBadge = frameSettings.afterbefore ? shot.filename === beforeFile ? "B" : shot.filename === afterFile ? "A" : null : null;
+                            return /* @__PURE__ */ jsxs2(
                               "div",
                               {
-                                onClick: () => setSelectedFile(shot.filename),
+                                onClick: () => {
+                                  if (frameSettings.afterbefore) {
+                                    if (activeSlot === "before") {
+                                      setBeforeFile(shot.filename);
+                                      setActiveSlot("after");
+                                    } else {
+                                      setAfterFile(shot.filename);
+                                    }
+                                  } else {
+                                    setSelectedFile(shot.filename);
+                                  }
+                                },
                                 style: {
+                                  position: "relative",
                                   width: 64,
                                   height: 44,
                                   flexShrink: 0,
@@ -2039,19 +2281,36 @@ function ScreenshotsPanel({
                                   opacity: isSelected ? 1 : 0.7,
                                   transition: "opacity 0.12s ease, border-color 0.12s ease"
                                 },
-                                children: /* @__PURE__ */ jsx3(
-                                  "img",
-                                  {
-                                    src: thumbUrl,
-                                    alt: "",
-                                    style: {
-                                      width: "100%",
-                                      height: "100%",
-                                      objectFit: "cover",
-                                      display: "block"
+                                children: [
+                                  /* @__PURE__ */ jsx2(
+                                    "img",
+                                    {
+                                      src: thumbUrl,
+                                      alt: "",
+                                      style: {
+                                        width: "100%",
+                                        height: "100%",
+                                        objectFit: "cover",
+                                        display: "block"
+                                      }
                                     }
-                                  }
-                                )
+                                  ),
+                                  slotBadge && /* @__PURE__ */ jsx2("div", { style: {
+                                    position: "absolute",
+                                    top: 2,
+                                    left: 2,
+                                    width: 16,
+                                    height: 16,
+                                    borderRadius: 4,
+                                    background: accent.highlight,
+                                    color: "#fff",
+                                    fontSize: 9,
+                                    fontWeight: 600,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center"
+                                  }, children: slotBadge })
+                                ]
                               },
                               shot.filename
                             );
@@ -2059,59 +2318,46 @@ function ScreenshotsPanel({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx3("div", { style: { width: 1, flexShrink: 0, background: stroke.soft } }),
-                    /* @__PURE__ */ jsxs3("div", { style: { width: 300, flexShrink: 0, overflowY: "auto", padding: "16px 16px 12px", minHeight: 0, display: "flex", flexDirection: "column" }, children: [
-                      /* @__PURE__ */ jsx3("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx3(
-                        SettingsContent,
-                        {
-                          frameSettings,
-                          onFrameSettingsChange,
-                          saveDir: shortDir,
-                          picking,
-                          onPickFolder: handlePickFolder
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 8, paddingTop: 12, paddingBottom: 2, marginTop: 12, borderTop: `1px solid ${stroke.soft}`, marginLeft: -16, marginRight: -16, paddingLeft: 16 }, children: [
-                        /* @__PURE__ */ jsx3("span", { style: { ...text.paragraph.xs, color: fg.muted }, children: "made by Paulius Kairevicius" }),
-                        /* @__PURE__ */ jsx3(
-                          "a",
+                    /* @__PURE__ */ jsxs2("div", { style: { position: "absolute", top: 0, right: 0, bottom: 0, width: 301, display: "flex", overflow: "hidden" }, children: [
+                      /* @__PURE__ */ jsx2("div", { style: { width: 1, flexShrink: 0, background: stroke.soft } }),
+                      /* @__PURE__ */ jsxs2("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+                        /* @__PURE__ */ jsx2("div", { style: { flex: 1, overflowY: "auto", padding: "16px 16px 12px", minHeight: 0 }, children: /* @__PURE__ */ jsx2(
+                          SettingsContent,
                           {
-                            href: "https://github.com/kairevicius",
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                            style: { color: fg.muted, display: "flex", transition: "color 0.12s" },
-                            onMouseEnter: (e) => {
-                              e.currentTarget.style.color = fg.strong;
-                            },
-                            onMouseLeave: (e) => {
-                              e.currentTarget.style.color = fg.muted;
-                            },
-                            children: /* @__PURE__ */ jsx3("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" }) })
+                            frameSettings,
+                            onFrameSettingsChange,
+                            saveDir: shortDir,
+                            picking,
+                            onPickFolder: handlePickFolder
                           }
-                        ),
-                        /* @__PURE__ */ jsx3(
-                          "a",
+                        ) }),
+                        (frameSettings.afterbefore ? beforeFile && afterFile : selectedFile) && /* @__PURE__ */ jsx2("div", { style: { flexShrink: 0, padding: "12px 16px", borderTop: `1px solid ${stroke.soft}` }, children: /* @__PURE__ */ jsx2(
+                          "button",
                           {
-                            href: "https://x.com/kairevicius",
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                            style: { color: fg.muted, display: "flex", transition: "color 0.12s" },
-                            onMouseEnter: (e) => {
-                              e.currentTarget.style.color = fg.strong;
-                            },
-                            onMouseLeave: (e) => {
-                              e.currentTarget.style.color = fg.muted;
+                            onClick: handleSave,
+                            disabled: saving,
+                            style: {
+                              width: "100%",
+                              padding: "8px 0",
+                              borderRadius: 8,
+                              border: "none",
+                              background: accent.toggle,
+                              color: "#fff",
+                              ...text.label.xs,
+                              cursor: saving ? "default" : "pointer",
+                              opacity: saving ? 0.6 : 1,
+                              transition: "opacity 0.12s ease"
                             },
-                            children: /* @__PURE__ */ jsx3("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) })
+                            children: saving ? "Saving..." : "Save"
                           }
-                        )
+                        ) })
                       ] })
                     ] })
                   ] })
                 ]
               }
             ),
-            toast && /* @__PURE__ */ jsx3(
+            toast && /* @__PURE__ */ jsx2(
               "div",
               {
                 onClick: (e) => e.stopPropagation(),
@@ -2140,7 +2386,7 @@ function ScreenshotsPanel({
 }
 
 // src/overlay/ui/toolbar.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var TOOLTIP_DELAY = 500;
 var TOOLTIP_COOLDOWN = 300;
 var tooltipWarm = false;
@@ -2224,11 +2470,6 @@ function getCornerPosition(corner, w, h) {
       return { x: EDGE_MARGIN, y: EDGE_MARGIN };
   }
 }
-var MODES = [
-  { mode: "component", label: "Component", icon: CameraIcon },
-  { mode: "viewport", label: "Viewport", icon: Monitor },
-  { mode: "fullpage", label: "Full Page", icon: FileText }
-];
 function Toolbar({
   expanded,
   onToggle,
@@ -2243,6 +2484,16 @@ function Toolbar({
 }) {
   const [historyOpen, setHistoryOpen] = useState4(false);
   const [modesExpanded, setModesExpanded] = useState4(false);
+  useEffect3(() => {
+    if (phase === "ready") {
+      try {
+        if (localStorage.getItem("ab-auto-open-panel") !== "false") {
+          setHistoryOpen(true);
+        }
+      } catch {
+      }
+    }
+  }, [phase]);
   const [buttonsVisible, setButtonsVisible] = useState4(expanded);
   const [animIn, setAnimIn] = useState4(expanded);
   const [animDone, setAnimDone] = useState4(expanded);
@@ -2388,8 +2639,8 @@ function Toolbar({
   } : getCornerStyle(corner);
   const cameraTooltipLabel = expanded ? "Close" : void 0;
   const cameraTooltipStyle = cameraTooltipLabel ? tooltipSide === "left" ? { right: "calc(100% + 10px)", top: "50%", transform: "translateY(-50%)" } : { left: "calc(100% + 10px)", top: "50%", transform: "translateY(-50%)" } : void 0;
-  const cameraButton = /* @__PURE__ */ jsxs4("div", { style: { position: "relative" }, children: [
-    cameraTooltipLabel && cameraTooltipVisible && !dragging && /* @__PURE__ */ jsx4(
+  const cameraButton = /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
+    cameraTooltipLabel && cameraTooltipVisible && !dragging && /* @__PURE__ */ jsx3(
       "div",
       {
         style: {
@@ -2411,7 +2662,7 @@ function Toolbar({
         children: cameraTooltipLabel
       }
     ),
-    /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsxs3(
       "div",
       {
         onMouseDown: handleMouseDown,
@@ -2430,7 +2681,7 @@ function Toolbar({
           transition: "background 0.12s ease"
         },
         children: [
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx3(
             "style",
             {
               dangerouslySetInnerHTML: {
@@ -2447,23 +2698,25 @@ function Toolbar({
               }
             }
           ),
-          loading ? /* @__PURE__ */ jsx4(
+          loading ? /* @__PURE__ */ jsx3(
             LoaderCircle,
             {
               size: 16,
               strokeWidth: 2,
               style: { animation: "ab-spin 0.8s linear infinite", color: "white" }
             }
-          ) : phase === "ready" ? /* @__PURE__ */ jsx4(CheckmarkIcon, { size: 20, color: fg.default }) : expanded ? /* @__PURE__ */ jsx4(
-            CloseIcon,
+          ) : phase === "ready" ? /* @__PURE__ */ jsx3(Check2, { size: 18, strokeWidth: 1.7, color: fg.default }) : expanded ? /* @__PURE__ */ jsx3(
+            X2,
             {
-              size: 20,
+              size: 18,
+              strokeWidth: 1.7,
               color: cameraHovered ? fg.strong : fg.default
             }
-          ) : /* @__PURE__ */ jsx4(
-            CameraIcon,
+          ) : /* @__PURE__ */ jsx3(
+            Camera,
             {
-              size: 20,
+              size: 18,
+              strokeWidth: 1.7,
               color: cameraHovered ? fg.strong : fg.default
             }
           )
@@ -2471,7 +2724,7 @@ function Toolbar({
       }
     )
   ] });
-  const toolbarButtons = buttonsVisible ? /* @__PURE__ */ jsx4(
+  const toolbarButtons = buttonsVisible ? /* @__PURE__ */ jsx3(
     "div",
     {
       style: {
@@ -2479,7 +2732,7 @@ function Toolbar({
         maxHeight: animIn ? 195 : 0,
         transition: animIn ? "max-height 250ms cubic-bezier(0.23, 1, 0.32, 1)" : "max-height 150ms cubic-bezier(0.23, 1, 0.32, 1)"
       },
-      children: /* @__PURE__ */ jsxs4(
+      children: /* @__PURE__ */ jsxs3(
         "div",
         {
           style: {
@@ -2492,7 +2745,7 @@ function Toolbar({
             willChange: "transform, opacity"
           },
           children: [
-            /* @__PURE__ */ jsx4("div", { style: { paddingBottom: 2 }, children: /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx3("div", { style: { paddingBottom: 2 }, children: /* @__PURE__ */ jsx3(
               IconButton,
               {
                 active: selectedMode === "component" && !historyOpen,
@@ -2502,42 +2755,10 @@ function Toolbar({
                   setHistoryOpen(false);
                   onModeChange("component");
                 },
-                children: /* @__PURE__ */ jsx4(CameraIcon, { size: 20 })
+                children: /* @__PURE__ */ jsx3(Camera, { size: 18, strokeWidth: 1.7 })
               }
             ) }),
-            MODES.filter((m) => m.mode !== "component").map(({ mode, label, icon: ModeIcon }) => /* @__PURE__ */ jsx4(
-              "div",
-              {
-                style: {
-                  maxHeight: modesExpanded ? 34 : 0,
-                  opacity: modesExpanded ? 1 : 0,
-                  transition: "max-height 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms cubic-bezier(0.23, 1, 0.32, 1)"
-                },
-                children: /* @__PURE__ */ jsx4(
-                  IconButton,
-                  {
-                    active: selectedMode === mode && !historyOpen,
-                    tooltipSide,
-                    tooltip: label,
-                    onClick: () => {
-                      setHistoryOpen(false);
-                      onModeChange(mode);
-                      onCapture(mode);
-                    },
-                    children: /* @__PURE__ */ jsx4(ModeIcon, { size: 16, strokeWidth: 1.7 })
-                  }
-                )
-              },
-              mode
-            )),
-            /* @__PURE__ */ jsx4(
-              Separator,
-              {
-                vertical: false,
-                onClick: () => setModesExpanded((p) => !p)
-              }
-            ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx3(
               ScreenshotsPanel,
               {
                 open: historyOpen,
@@ -2555,7 +2776,7 @@ function Toolbar({
       )
     }
   ) : null;
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       ref: toolbarRef,
@@ -2574,10 +2795,10 @@ function Toolbar({
         ...fontBase,
         userSelect: "none"
       },
-      children: bottom ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      children: bottom ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
         toolbarButtons,
         cameraButton
-      ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      ] }) : /* @__PURE__ */ jsxs3(Fragment3, { children: [
         cameraButton,
         toolbarButtons
       ] })
@@ -2602,8 +2823,8 @@ function IconButton({
     top: "50%",
     transform: "translateY(-50%)"
   };
-  return /* @__PURE__ */ jsxs4("div", { style: { position: "relative" }, children: [
-    tooltip && tooltipVisible && /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
+    tooltip && tooltipVisible && /* @__PURE__ */ jsx3(
       "div",
       {
         style: {
@@ -2625,7 +2846,7 @@ function IconButton({
         children: tooltip
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx3(
       "button",
       {
         onClick,
@@ -2656,7 +2877,7 @@ function DropItem2({
   active,
   accent: accent2
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "button",
     {
       onClick,
@@ -2676,27 +2897,6 @@ function DropItem2({
     }
   );
 }
-function Separator({
-  vertical = true,
-  onClick
-}) {
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      onClick,
-      style: {
-        position: "relative",
-        width: vertical ? 1 : 24,
-        height: vertical ? 18 : 1,
-        background: stroke.strong,
-        flexShrink: 0,
-        margin: vertical ? "0 6px" : "6px 0",
-        cursor: onClick ? "pointer" : void 0
-      },
-      children: onClick && /* @__PURE__ */ jsx4("div", { style: { position: "absolute", inset: vertical ? "0 -8px" : "-8px 0" } })
-    }
-  );
-}
 function FilterDropdown({
   label,
   value,
@@ -2705,20 +2905,20 @@ function FilterDropdown({
   onToggle,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxs4("div", { children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("div", { children: [
+    /* @__PURE__ */ jsx3(
       "div",
       {
         style: {
-          ...text.subheading.xxs,
+          ...text.label.xs,
           color: fg.sub,
           marginBottom: 3
         },
         children: label
       }
     ),
-    /* @__PURE__ */ jsxs4("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxs3(
         "button",
         {
           onClick: onToggle,
@@ -2739,7 +2939,7 @@ function FilterDropdown({
             fontFamily: "inherit"
           },
           children: [
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx3(
               "span",
               {
                 style: {
@@ -2750,11 +2950,11 @@ function FilterDropdown({
                 children: value || "\u2014"
               }
             ),
-            /* @__PURE__ */ jsx4(ChevronDown2, { size: 12, strokeWidth: 2 })
+            /* @__PURE__ */ jsx3(ChevronDown2, { size: 12, strokeWidth: 2 })
           ]
         }
       ),
-      isOpen && options.length > 0 && /* @__PURE__ */ jsx4(
+      isOpen && options.length > 0 && /* @__PURE__ */ jsx3(
         "div",
         {
           style: {
@@ -2771,7 +2971,7 @@ function FilterDropdown({
             boxShadow: shadow.dropdown,
             zIndex: 1
           },
-          children: options.map((opt) => /* @__PURE__ */ jsx4(
+          children: options.map((opt) => /* @__PURE__ */ jsx3(
             DropItem2,
             {
               active: opt === value,
@@ -2788,7 +2988,7 @@ function FilterDropdown({
 
 // src/overlay/ui/inspector.tsx
 import { useEffect as useEffect4, useRef as useRef3, useCallback as useCallback4, useState as useState5 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Inspector({ onSelect, onCancel }) {
   const [highlight, setHighlight] = useState5(null);
   const hoveredEl = useRef3(null);
@@ -2865,7 +3065,7 @@ function Inspector({ onSelect, onCancel }) {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [handleMouseMove, handleClick, handleKeyDown]);
-  return /* @__PURE__ */ jsx5("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: highlight && /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: highlight && /* @__PURE__ */ jsx4(
     "div",
     {
       style: {
@@ -2885,7 +3085,7 @@ function Inspector({ onSelect, onCancel }) {
 }
 
 // src/overlay/index.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 async function saveCapture(mode, renderedDataUrl, rawDataUrl, viewportDataUrl) {
   try {
     const res = await fetch("/__afterbefore/save", {
@@ -2970,6 +3170,12 @@ function AfterBefore() {
           mode,
           timestamp: Date.now()
         });
+        try {
+          if (localStorage.getItem("ab-auto-open-panel") !== "false") {
+            setToolbarActive(true);
+          }
+        } catch {
+        }
       } catch (err) {
         console.error("[afterbefore] Capture failed:", err);
       } finally {
@@ -3019,8 +3225,8 @@ function AfterBefore() {
     setSelectedMode(mode);
     setInspectorActive(mode === "component");
   }, []);
-  return /* @__PURE__ */ jsxs5("div", { "data-afterbefore": "true", children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs4("div", { "data-afterbefore": "true", children: [
+    /* @__PURE__ */ jsx5(
       Toolbar,
       {
         expanded: toolbarActive,
@@ -3035,7 +3241,7 @@ function AfterBefore() {
         onFrameSettingsChange: handleFrameSettingsChange
       }
     ),
-    inspectorActive && /* @__PURE__ */ jsx6(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel })
+    inspectorActive && /* @__PURE__ */ jsx5(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel })
   ] });
 }
 export {