afterbefore 0.2.23 → 0.2.25

package/dist/overlay/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/overlay/index.tsx
-import { useState as useState5, useCallback as useCallback4, useEffect as useEffect4 } from "react";
+import { useState as useState6, useCallback as useCallback5, useEffect as useEffect5 } from "react";
 
 // src/overlay/state.ts
 import { useState, useCallback } from "react";
@@ -25,15 +25,32 @@ function useOverlayState() {
 
 // src/overlay/capture.ts
 import { snapdom } from "@zumer/snapdom";
+var GRADIENT_PRESETS = [
+  "linear-gradient(135deg, #a78bfa 0%, #f472b6 100%)",
+  "linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%)",
+  "linear-gradient(135deg, #34d399 0%, #6ee7b7 100%)",
+  "linear-gradient(135deg, #f97316 0%, #ef4444 100%)",
+  "linear-gradient(180deg, #1e293b 0%, #0f172a 100%)"
+];
+var COLOR_PRESETS = [
+  "#FFFFFF",
+  "#F5F5F5",
+  "#F8F4ED",
+  "#1E1E1E",
+  "#000000"
+];
 var DEFAULT_FRAME_SETTINGS = {
   enabled: false,
   size: { w: 1920, h: 1080 },
   bgType: "color",
-  bgColor: "#000000",
+  bgColor: "#F5F5F5",
+  bgGradient: GRADIENT_PRESETS[0],
   bgImage: null,
   padding: 40,
   browserChrome: false,
-  browserTheme: "dark"
+  browserTheme: "dark",
+  browserPadding: 20,
+  browserUrl: "localhost"
 };
 var FRAME_SIZE_PRESETS = [
   { label: "1920 x 1080", hint: "Desktop / HD", w: 1920, h: 1080 },
@@ -101,9 +118,9 @@ async function captureViewport(frameSettings) {
     return viewportDataUrl;
   }
   const viewportImg = await loadImage(viewportDataUrl);
-  return drawBrowserChrome(viewportImg, frameSettings.browserTheme, dpr);
+  return drawBrowserChrome(viewportImg, frameSettings.browserTheme, dpr, frameSettings.browserUrl);
 }
-function drawBrowserChrome(img, theme, dpr) {
+function drawBrowserChrome(img, theme, dpr, url = "localhost") {
   const TITLE_BAR_H = 40;
   const URL_BAR_H = 28;
   const URL_BAR_MARGIN_TOP = 6;
@@ -150,7 +167,7 @@ function drawBrowserChrome(img, theme, dpr) {
   ctx.font = `${11 * dpr}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
-  ctx.fillText("localhost", canvas.width / 2, urlBarY + urlBarH / 2);
+  ctx.fillText(url, canvas.width / 2, urlBarY + urlBarH / 2);
   ctx.drawImage(img, 0, CHROME_H * dpr);
   return canvas.toDataURL("image/png");
 }
@@ -202,12 +219,12 @@ async function captureComponent(element, frameSettings) {
   const dpr = window.devicePixelRatio || 1;
   const FRAME_W = frameSettings.size.w;
   const FRAME_H = frameSettings.size.h;
-  const padding = frameSettings.padding;
+  const pad = frameSettings.browserChrome ? frameSettings.browserPadding ?? 20 : frameSettings.padding ?? 40;
   const compW = img.width / dpr;
   const compH = img.height / dpr;
-  const maxW = FRAME_W - padding * 2;
-  const maxH = FRAME_H - padding * 2;
-  const scale = Math.min(1, maxW / compW, maxH / compH);
+  const maxW = FRAME_W - pad * 2;
+  const maxH = FRAME_H - pad * 2;
+  const scale = Math.min(maxW / compW, maxH / compH, 1);
   const drawW = compW * scale * dpr;
   const drawH = compH * scale * dpr;
   const canvas = document.createElement("canvas");
@@ -222,7 +239,9 @@ async function captureComponent(element, frameSettings) {
       ctx.fillStyle = frameSettings.bgColor;
       ctx.fillRect(0, 0, canvas.width, canvas.height);
     }
-  } else {
+  } else if (frameSettings.bgType === "gradient") {
+    fillCssGradient(ctx, frameSettings.bgGradient, canvas.width, canvas.height);
+  } else if (frameSettings.bgColor !== "transparent") {
     ctx.fillStyle = frameSettings.bgColor;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
   }
@@ -247,6 +266,34 @@ function loadImage(src) {
     img.src = src;
   });
 }
+function fillCssGradient(ctx, css, w, h) {
+  const match = css.match(
+    /linear-gradient\(\s*([\d.]+)deg\s*,\s*(.+)\)/
+  );
+  if (!match) {
+    ctx.fillStyle = "#000";
+    ctx.fillRect(0, 0, w, h);
+    return;
+  }
+  const angle = parseFloat(match[1]) * Math.PI / 180;
+  const stopsRaw = match[2].split(/,\s*(?=#|\w)/).map((s) => s.trim());
+  const cx = w / 2;
+  const cy = h / 2;
+  const len = Math.abs(w * Math.sin(angle)) + Math.abs(h * Math.cos(angle));
+  const x0 = cx - Math.sin(angle) * len / 2;
+  const y0 = cy + Math.cos(angle) * len / 2;
+  const x1 = cx + Math.sin(angle) * len / 2;
+  const y1 = cy - Math.cos(angle) * len / 2;
+  const grad = ctx.createLinearGradient(x0, y0, x1, y1);
+  for (const stop of stopsRaw) {
+    const parts = stop.match(/^(.+?)\s+([\d.]+)%$/);
+    if (parts) {
+      grad.addColorStop(parseFloat(parts[2]) / 100, parts[1]);
+    }
+  }
+  ctx.fillStyle = grad;
+  ctx.fillRect(0, 0, w, h);
+}
 
 // src/overlay/font.ts
 var FONT_FAMILY = "'Inter var', 'Inter', system-ui, -apple-system, sans-serif";
@@ -307,37 +354,85 @@ function injectInterFont() {
 }
 
 // src/overlay/ui/toolbar.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
-import { createPortal } from "react-dom";
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
 import {
-  ArrowUp,
-  Camera,
-  Check,
   ChevronDown as ChevronDown2,
-  Image as Image2,
-  FolderOpen,
   LoaderCircle,
   FileText,
-  Monitor,
-  MousePointer2,
-  Trash2 as Trash22,
-  X as X2
+  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"
+    }
+  ) });
+}
+
 // src/overlay/color.ts
 var gray = {
-  950: "#171717",
-  900: "#1C1C1C",
-  800: "#262626",
-  700: "#333333",
-  600: "#5C5C5C",
-  500: "#7B7B7B",
-  400: "#A3A3A3",
-  300: "#D1D1D1",
-  200: "#EBEBEB",
-  100: "#F5F5F5",
-  50: "#F7F7F7",
-  0: "#FFFFFF"
+  950: "oklch(0.162 0 0)",
+  900: "oklch(0.195 0 0)",
+  800: "oklch(0.254 0 0)",
+  700: "oklch(0.302 0 0)",
+  600: "oklch(0.348 0 0)",
+  500: "oklch(0.396 0 0)",
+  400: "oklch(0.459 0 0)",
+  300: "oklch(0.549 0 0)",
+  200: "oklch(0.649 0 0)",
+  100: "oklch(0.72 0 0)",
+  50: "oklch(0.863 0 0)",
+  0: "oklch(0.933 0 0)"
 };
 var bg = {
   base: gray[900],
@@ -346,10 +441,15 @@ var bg = {
 };
 var fg = {
   strong: gray[200],
-  default: gray[300],
-  sub: gray[500],
-  muted: gray[600],
-  faint: gray[600]
+  // ~5.6:1 — headings, input values
+  default: "oklch(0.6 0 0)",
+  // ~4.6:1 — body text, interactive labels (AA)
+  sub: gray[300],
+  // ~3.8:1 — secondary labels, icons
+  muted: "oklch(0.5 0 0)",
+  // ~3:1   — inline labels, decorative
+  faint: gray[500]
+  // ~2:1   — non-essential hints only
 };
 var stroke = {
   soft: "rgba(255, 255, 255, 0.08)",
@@ -387,17 +487,26 @@ var shadow = {
   status: "0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08)"
 };
 
+// src/overlay/ui/screenshots-panel.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+import {
+  Trash2 as Trash22,
+  X
+} from "lucide-react";
+
 // src/overlay/ui/settings-panel.tsx
 import { useEffect, useRef, useState as useState2 } from "react";
 import {
+  AppWindow,
+  Check,
   ChevronDown,
-  ImageIcon,
-  Palette,
+  LayoutGrid,
+  Pipette,
   Trash2,
-  Upload,
-  X
+  Upload
 } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function SettingsContent({
   frameSettings,
   onFrameSettingsChange,
@@ -405,90 +514,41 @@ function SettingsContent({
   picking,
   onPickFolder
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      SettingsRow,
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      BackgroundSetting,
       {
-        title: "Frame",
-        control: /* @__PURE__ */ jsx(
-          ToggleSwitch,
-          {
-            enabled: frameSettings.enabled,
-            onChange: () => onFrameSettingsChange({ ...frameSettings, enabled: !frameSettings.enabled })
-          }
-        )
+        frameSettings,
+        onFrameSettingsChange
       }
     ),
-    frameSettings.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(SettingsDivider, {}),
-      /* @__PURE__ */ jsx(
-        FrameSizeControl,
-        {
-          size: frameSettings.size,
-          onChange: (size) => onFrameSettingsChange({ ...frameSettings, size })
-        }
-      ),
-      /* @__PURE__ */ jsx(SettingsDivider, {}),
-      /* @__PURE__ */ jsx(
-        FrameBackgroundControl,
-        {
-          bgType: frameSettings.bgType,
-          bgColor: frameSettings.bgColor,
-          bgImage: frameSettings.bgImage,
-          frameSize: frameSettings.size,
-          onChange: (updates) => onFrameSettingsChange({ ...frameSettings, ...updates })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(SettingsDivider, {}),
-    /* @__PURE__ */ jsx(
-      SettingsRow,
+    /* @__PURE__ */ jsx2(
+      FrameSizeControl,
       {
-        title: "Browser Chrome",
-        control: /* @__PURE__ */ jsx(
-          ToggleSwitch,
-          {
-            enabled: frameSettings.browserChrome,
-            onChange: () => onFrameSettingsChange({ ...frameSettings, browserChrome: !frameSettings.browserChrome })
-          }
-        )
+        size: frameSettings.size,
+        onChange: (size) => onFrameSettingsChange({ ...frameSettings, size })
       }
     ),
-    frameSettings.browserChrome && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(SettingsDivider, {}),
-      /* @__PURE__ */ jsx(
-        SettingsRow,
-        {
-          title: "Theme",
-          control: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 2, flexShrink: 0 }, children: [
-            /* @__PURE__ */ jsx(
-              SegmentButton,
-              {
-                active: frameSettings.browserTheme === "light",
-                onClick: () => onFrameSettingsChange({ ...frameSettings, browserTheme: "light" }),
-                style: { borderRadius: "6px 0 0 6px" },
-                children: "Light"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              SegmentButton,
-              {
-                active: frameSettings.browserTheme === "dark",
-                onClick: () => onFrameSettingsChange({ ...frameSettings, browserTheme: "dark" }),
-                style: { borderRadius: "0 6px 6px 0" },
-                children: "Dark"
-              }
-            )
-          ] })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(SettingsDivider, {}),
-    saveDir !== void 0 && onPickFolder && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(SettingsDivider, {}),
+    /* @__PURE__ */ jsx2(
+      BrowserFrameSetting,
+      {
+        enabled: frameSettings.browserChrome,
+        theme: frameSettings.browserTheme,
+        padding: frameSettings.browserPadding ?? 20,
+        url: frameSettings.browserUrl ?? "localhost",
+        onToggle: () => onFrameSettingsChange({ ...frameSettings, browserChrome: !frameSettings.browserChrome }),
+        onSelect: (theme) => onFrameSettingsChange({ ...frameSettings, browserChrome: true, browserTheme: theme }),
+        onPaddingChange: (v) => onFrameSettingsChange({ ...frameSettings, browserPadding: v }),
+        onUrlChange: (v) => onFrameSettingsChange({ ...frameSettings, browserUrl: v })
+      }
+    ),
+    /* @__PURE__ */ jsx2(SettingsDivider, {}),
+    saveDir !== void 0 && onPickFolder && /* @__PURE__ */ jsx2(
       SettingsRow,
       {
         title: "Save Location",
-        description: /* @__PURE__ */ jsx(
+        description: /* @__PURE__ */ jsx2(
           "span",
           {
             style: {
@@ -501,7 +561,7 @@ function SettingsContent({
             children: saveDir
           }
         ),
-        control: /* @__PURE__ */ jsx(SmallButton, { onClick: onPickFolder, children: picking ? "..." : "Change" })
+        control: /* @__PURE__ */ jsx2(SmallButton, { onClick: onPickFolder, children: picking ? "..." : "Change" })
       }
     )
   ] });
@@ -511,20 +571,21 @@ function SettingsRow({
   description,
   control
 }) {
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "10px 0" }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2, flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ jsx("span", { style: { ...text.label.sm, color: fg.strong }, children: title }),
-      description && /* @__PURE__ */ jsx("span", { style: { ...text.paragraph.xs, color: fg.muted }, children: description })
+  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 })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: control })
+    /* @__PURE__ */ jsx2("div", { style: { flexShrink: 0 }, children: control })
   ] });
 }
 function SettingsDivider() {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       style: {
-        borderBottom: `1px solid ${stroke.soft}`
+        borderBottom: `1px solid ${stroke.soft}`,
+        margin: "0 -16px"
       }
     }
   );
@@ -533,7 +594,7 @@ function ToggleSwitch({
   enabled,
   onChange
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       type: "button",
@@ -550,7 +611,7 @@ function ToggleSwitch({
         flexShrink: 0,
         transition: "background 0.12s ease"
       },
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx2(
         "span",
         {
           style: {
@@ -573,13 +634,71 @@ function FrameSizeControl({
   onChange
 }) {
   const [sizeOpen, setSizeOpen] = useState2(false);
+  const [editing, setEditing] = useState2(null);
+  const [text2, setText] = useState2("");
   const currentPreset = FRAME_SIZE_PRESETS.find((p) => p.w === size.w && p.h === size.h);
   const isCustom = !currentPreset;
-  return /* @__PURE__ */ jsxs("div", { style: { padding: "10px 0" }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", { style: { ...text.label.sm, color: fg.strong }, children: "Size" }) }),
-      /* @__PURE__ */ jsxs("div", { style: { position: "relative", flexShrink: 0 }, children: [
-        /* @__PURE__ */ jsxs(
+  const commitValue = (field, raw) => {
+    const n = parseInt(raw, 10);
+    if (!Number.isNaN(n) && n > 0) onChange({ ...size, [field]: n });
+  };
+  const inputStyle = {
+    flex: 1,
+    minWidth: 0,
+    border: "none",
+    background: "transparent",
+    color: fg.strong,
+    ...text.label.xs,
+    fontFamily: "inherit",
+    textAlign: "left",
+    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(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          display: "flex",
+          alignItems: "center",
+          height: 30,
+          padding: "0 8px",
+          background: state.input,
+          borderRadius: 7
+        },
+        children: [
+          /* @__PURE__ */ jsx2("span", { style: { ...text.label.xs, color: fg.sub, flexShrink: 0, userSelect: "none" }, children: field.toUpperCase() }),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "text",
+              value: editing === field ? text2 : String(size[field]),
+              onFocus: () => {
+                setEditing(field);
+                setText(String(size[field]));
+              },
+              onBlur: () => {
+                setEditing(null);
+                commitValue(field, text2);
+              },
+              onChange: (e) => setText(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") e.target.blur();
+              },
+              style: inputStyle
+            }
+          )
+        ]
+      },
+      field
+    )) }),
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, marginTop: 16 }, children: [
+      /* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "Presets" }),
+      /* @__PURE__ */ jsxs2("div", { style: { position: "relative", flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsxs2(
           "button",
           {
             onClick: () => setSizeOpen((prev) => !prev),
@@ -587,12 +706,12 @@ function FrameSizeControl({
               display: "flex",
               alignItems: "center",
               gap: 6,
-              height: 30,
-              padding: "0 10px",
+              height: 28,
+              padding: "0 8px",
               borderRadius: 7,
               border: `1px solid ${stroke.default}`,
               background: state.input,
-              color: fg.strong,
+              color: fg.sub,
               cursor: "pointer",
               ...text.label.xs,
               fontFamily: "inherit",
@@ -600,11 +719,11 @@ function FrameSizeControl({
             },
             children: [
               currentPreset ? currentPreset.label : "Custom",
-              /* @__PURE__ */ jsx(ChevronDown, { size: 12, strokeWidth: 2 })
+              /* @__PURE__ */ jsx2(ChevronDown, { size: 12, strokeWidth: 2 })
             ]
           }
         ),
-        sizeOpen && /* @__PURE__ */ jsx(
+        sizeOpen && /* @__PURE__ */ jsx2(
           "div",
           {
             style: {
@@ -619,7 +738,7 @@ function FrameSizeControl({
               boxShadow: shadow.dropdown,
               zIndex: 1
             },
-            children: FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsxs(
+            children: FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsxs2(
               DropItem,
               {
                 active: !isCustom && preset.w === size.w && preset.h === size.h,
@@ -628,8 +747,8 @@ function FrameSizeControl({
                   setSizeOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx("span", { children: preset.label }),
-                  /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: fg.faint }, children: preset.hint })
+                  /* @__PURE__ */ jsx2("span", { children: preset.label }),
+                  /* @__PURE__ */ jsx2("span", { style: { marginLeft: 6, fontSize: 10, color: fg.muted }, children: preset.hint })
                 ]
               },
               preset.label
@@ -637,39 +756,16 @@ function FrameSizeControl({
           }
         )
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, marginTop: 10 }, children: [
-      /* @__PURE__ */ jsx(
-        NumInput,
-        {
-          value: size.w,
-          onChange: (v) => {
-            const n = parseInt(v, 10);
-            if (!Number.isNaN(n) && n > 0) onChange({ ...size, w: n });
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(StaticText, { children: "x" }),
-      /* @__PURE__ */ jsx(
-        NumInput,
-        {
-          value: size.h,
-          onChange: (v) => {
-            const n = parseInt(v, 10);
-            if (!Number.isNaN(n) && n > 0) onChange({ ...size, h: n });
-          }
-        }
-      )
     ] })
   ] });
 }
-function FrameBackgroundControl({
-  bgType,
-  bgColor,
-  bgImage,
-  frameSize,
-  onChange
+function BackgroundSetting({
+  frameSettings,
+  onFrameSettingsChange
 }) {
+  const [tab, setTab] = useState2(
+    frameSettings.bgType === "image" ? "image" : frameSettings.bgType === "gradient" ? "gradient" : "solid"
+  );
   const fileInputRef = useRef(null);
   const handleFileSelect = (e) => {
     const file = e.target.files?.[0];
@@ -678,52 +774,123 @@ function FrameBackgroundControl({
     reader.onload = () => {
       const dataUrl = reader.result;
       if (dataUrl.length > 2 * 1024 * 1024) {
-        downscaleImage(dataUrl, frameSize.w, frameSize.h).then((scaled) => {
-          onChange({ bgType: "image", bgImage: scaled });
+        downscaleImage(dataUrl, frameSettings.size.w, frameSettings.size.h).then((scaled) => {
+          onFrameSettingsChange({ ...frameSettings, bgType: "image", bgImage: scaled });
         });
       } else {
-        onChange({ bgType: "image", bgImage: dataUrl });
+        onFrameSettingsChange({ ...frameSettings, bgType: "image", bgImage: dataUrl });
       }
     };
     reader.readAsDataURL(file);
     e.target.value = "";
   };
-  return /* @__PURE__ */ jsxs("div", { style: { padding: "10px 0" }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", { style: { ...text.label.sm, color: fg.strong }, children: "Background" }) }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 2, flexShrink: 0 }, children: [
-        /* @__PURE__ */ jsxs(
-          SegmentButton,
-          {
-            active: bgType === "color",
-            onClick: () => onChange({ bgType: "color" }),
-            style: { borderRadius: "6px 0 0 6px" },
-            children: [
-              /* @__PURE__ */ jsx(Palette, { size: 12, strokeWidth: 2 }),
-              "Color"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          SegmentButton,
-          {
-            active: bgType === "image",
-            onClick: () => onChange({ bgType: "image" }),
-            style: { borderRadius: "0 6px 6px 0" },
-            children: [
-              /* @__PURE__ */ jsx(ImageIcon, { size: 12, strokeWidth: 2 }),
-              "Image"
-            ]
-          }
-        )
-      ] })
+  const selectGradient = (g) => {
+    onFrameSettingsChange({ ...frameSettings, bgType: "gradient", bgGradient: g });
+  };
+  const selectColor = (c) => {
+    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(
+        ToggleSwitch,
+        {
+          enabled: frameSettings.enabled,
+          onChange: () => onFrameSettingsChange({ ...frameSettings, enabled: !frameSettings.enabled })
+        }
+      )
     ] }),
-    bgType === "color" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 10 }, children: [
-      /* @__PURE__ */ jsx(ColorSwatch, { color: bgColor, onChange: (c) => onChange({ bgColor: c }) }),
-      /* @__PURE__ */ jsx(HexInput, { value: bgColor, onChange: (c) => onChange({ bgColor: c }) })
+    /* @__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(
+      "button",
+      {
+        onClick: () => setTab(t),
+        style: {
+          flex: 1,
+          padding: "6px 0",
+          border: "none",
+          borderRadius: 6,
+          background: tab === t ? state.button : "transparent",
+          color: tab === t ? fg.strong : fg.default,
+          ...text.label.xs,
+          fontFamily: "inherit",
+          cursor: "pointer",
+          transition: "background 0.12s ease, color 0.12s ease",
+          textTransform: "capitalize"
+        },
+        children: t
+      },
+      t
+    )) }),
+    tab === "gradient" && /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 8, marginTop: 12, paddingBottom: 10, flexWrap: "wrap" }, children: GRADIENT_PRESETS.map((g) => {
+      const selected = frameSettings.bgType === "gradient" && frameSettings.bgGradient === g;
+      return /* @__PURE__ */ jsx2(
+        PresetSwatch,
+        {
+          background: g,
+          selected,
+          onClick: () => selectGradient(g)
+        },
+        g
+      );
+    }) }),
+    tab === "solid" && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, marginTop: 12, paddingBottom: 10, flexWrap: "wrap" }, children: [
+        COLOR_PRESETS.map((c) => {
+          const selected = frameSettings.bgType === "color" && frameSettings.bgColor === c;
+          return /* @__PURE__ */ jsx2(
+            PresetSwatch,
+            {
+              background: c,
+              selected,
+              onClick: () => selectColor(c)
+            },
+            c
+          );
+        }),
+        (() => {
+          const customColor = frameSettings.bgColor;
+          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(
+            "button",
+            {
+              onClick: async () => {
+                if (!("EyeDropper" in window)) return;
+                try {
+                  const result = await new window.EyeDropper().open();
+                  selectColor(result.sRGBHex);
+                } catch {
+                }
+              },
+              style: {
+                width: 32,
+                height: 32,
+                borderRadius: "50%",
+                border: isCustom ? `1px solid ${stroke.soft}` : `1px dashed ${stroke.default}`,
+                outline: isCustom ? `2px solid ${accent.toggle}` : "none",
+                outlineOffset: 1,
+                background: bg2,
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: iconColor
+              },
+              children: /* @__PURE__ */ jsx2(Pipette, { size: 14, strokeWidth: 2 })
+            }
+          );
+        })()
+      ] }),
+      /* @__PURE__ */ jsx2("div", { style: { paddingBottom: 4 }, children: /* @__PURE__ */ jsx2(ColorHexInput, { value: frameSettings.bgColor, onChange: selectColor }) })
     ] }),
-    bgType === "image" && /* @__PURE__ */ jsxs("div", { style: { marginTop: 10 }, children: [
-      /* @__PURE__ */ jsx(
+    tab === "image" && /* @__PURE__ */ jsxs2("div", { style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ jsx2(
         "input",
         {
           ref: fileInputRef,
@@ -733,11 +900,11 @@ function FrameBackgroundControl({
           style: { display: "none" }
         }
       ),
-      bgImage ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-        /* @__PURE__ */ jsx(
+      frameSettings.bgImage ? /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx2(
           "img",
           {
-            src: bgImage,
+            src: frameSettings.bgImage,
             alt: "",
             style: {
               width: 48,
@@ -748,224 +915,453 @@ function FrameBackgroundControl({
             }
           }
         ),
-        /* @__PURE__ */ jsxs(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
-          /* @__PURE__ */ jsx(Upload, { size: 11, strokeWidth: 2 }),
+        /* @__PURE__ */ jsxs2(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
+          /* @__PURE__ */ jsx2(Upload, { size: 11, strokeWidth: 2 }),
           "Replace"
         ] }),
-        /* @__PURE__ */ jsx(SmallButton, { onClick: () => onChange({ 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 }),
+        /* @__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 }),
         "Upload image"
       ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { style: { marginTop: 16 }, 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 }, children: [
+        /* @__PURE__ */ jsx2(
+          SlimSlider,
+          {
+            min: 0,
+            max: 200,
+            step: 5,
+            value: frameSettings.padding,
+            onChange: (v) => onFrameSettingsChange({ ...frameSettings, padding: v })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          PaddingInput,
+          {
+            value: frameSettings.padding,
+            onChange: (n) => onFrameSettingsChange({ ...frameSettings, padding: n })
+          }
+        )
+      ] })
     ] })
   ] });
 }
-function SegmentButton({
-  children,
-  active,
-  onClick,
-  style: style2
+function SlimSlider({
+  min,
+  max,
+  step,
+  value,
+  onChange
 }) {
-  return /* @__PURE__ */ jsx(
-    "button",
+  const trackRef = useRef(null);
+  const pct = (value - min) / (max - min) * 100;
+  const update = (clientX) => {
+    const rect = trackRef.current.getBoundingClientRect();
+    const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const raw = min + ratio * (max - min);
+    const snapped = Math.round(raw / step) * step;
+    onChange(Math.max(min, Math.min(max, snapped)));
+  };
+  const onPointerDown = (e) => {
+    e.preventDefault();
+    e.target.setPointerCapture(e.pointerId);
+    update(e.clientX);
+  };
+  const onPointerMove = (e) => {
+    if (e.buttons === 0) return;
+    update(e.clientX);
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
     {
-      onClick,
+      ref: trackRef,
+      onPointerDown,
+      onPointerMove,
       style: {
+        flex: 1,
+        minWidth: 0,
+        height: 20,
         display: "flex",
         alignItems: "center",
-        gap: 4,
-        height: 28,
-        padding: "0 10px",
-        border: `1px solid ${stroke.default}`,
-        background: active ? state.pressed : state.subtle,
-        color: active ? fg.strong : fg.sub,
         cursor: "pointer",
-        ...text.label.xs,
-        fontFamily: "inherit",
-        transition: "background 0.12s ease, color 0.12s ease",
-        ...style2
+        touchAction: "none"
       },
-      children
+      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(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "50%",
+              left: `${pct}%`,
+              width: 10,
+              height: 10,
+              borderRadius: "50%",
+              background: fg.strong,
+              transform: "translate(-50%, -50%)"
+            }
+          }
+        )
+      ] })
     }
   );
 }
-function ColorSwatch({
-  color,
-  onChange
-}) {
-  const inputRef = useRef(null);
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: () => inputRef.current?.click(),
-        style: {
-          width: 24,
-          height: 24,
-          borderRadius: 6,
-          border: `1px solid ${stroke.interactive}`,
-          background: color,
-          cursor: "pointer",
-          padding: 0
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        type: "color",
-        value: color,
-        onChange: (e) => onChange(e.target.value),
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: 0,
-          height: 0,
-          opacity: 0,
-          pointerEvents: "none"
-        }
-      }
-    )
-  ] });
-}
-function SmallButton({
-  children,
+function PresetSwatch({
+  background,
+  selected,
   onClick
 }) {
-  const [hovered, setHovered] = useState2(false);
-  return /* @__PURE__ */ jsx(
-    "button",
+  return /* @__PURE__ */ jsx2(
+    "div",
     {
       onClick,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
       style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 4,
-        padding: "4px 10px",
-        borderRadius: 6,
-        border: `1px solid ${stroke.strong}`,
-        background: hovered ? state.hoverStrong : state.button,
-        color: fg.default,
-        ...text.label.xs,
+        width: 32,
+        height: 32,
+        borderRadius: "50%",
+        background,
         cursor: "pointer",
-        fontFamily: "inherit",
-        transition: "background 0.12s ease"
+        border: `1px solid ${stroke.soft}`,
+        outline: selected ? `2px solid ${accent.toggle}` : "none",
+        outlineOffset: 1,
+        position: "relative",
+        transition: "outline-color 0.12s ease",
+        flexShrink: 0
       },
-      children
+      children: selected && /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "rgba(0,0,0,0.2)"
+          },
+          children: /* @__PURE__ */ jsx2(Check, { size: 16, strokeWidth: 3, color: "#fff" })
+        }
+      )
     }
   );
 }
-function NumInput({
-  value,
-  onChange
+function hexLuminance(hex) {
+  const n = parseInt(hex.replace("#", ""), 16);
+  const r = (n >> 16 & 255) / 255;
+  const g = (n >> 8 & 255) / 255;
+  const b = (n & 255) / 255;
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function BrowserFrameSetting({
+  enabled,
+  theme,
+  padding,
+  url,
+  onToggle,
+  onSelect,
+  onPaddingChange,
+  onUrlChange
 }) {
-  const [editing, setEditing] = useState2(false);
-  const [text2, setText] = useState2(String(value));
-  useEffect(() => {
-    if (!editing) {
-      setText(String(value));
-    }
-  }, [editing, value]);
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "text",
-      value: editing ? text2 : String(value),
-      onFocus: () => {
-        setEditing(true);
-        setText(String(value));
-      },
-      onBlur: () => {
-        setEditing(false);
-        onChange(text2);
-      },
-      onChange: (e) => setText(e.target.value),
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          e.target.blur();
+  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 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 })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 10, marginTop: 12 }, children: themes.map((t) => {
+      const selected = enabled && theme === t.value;
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          onClick: () => onSelect(t.value),
+          style: {
+            flex: 1,
+            cursor: "pointer",
+            borderRadius: 10,
+            border: selected ? `2px solid ${accent.toggle}` : `1px solid ${stroke.soft}`,
+            padding: selected ? 7 : 8,
+            position: "relative",
+            background: state.subtle,
+            transition: "border-color 0.12s ease"
+          },
+          children: [
+            /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                style: {
+                  background: t.titleBar,
+                  borderRadius: 6,
+                  overflow: "hidden",
+                  border: t.value === "light" ? `1px solid ${t.border}` : "none",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 6,
+                  padding: "6px 8px"
+                },
+                children: [
+                  trafficLights,
+                  /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      style: {
+                        flex: 1,
+                        height: 8,
+                        background: t.urlBar,
+                        borderRadius: 2,
+                        ...t.value === "light" ? { border: `1px solid ${t.border}` } : {}
+                      }
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx2("div", { style: { textAlign: "center", marginTop: 8, ...text.label.xs, color: fg.default }, children: t.label }),
+            selected && /* @__PURE__ */ jsx2(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  top: -5,
+                  right: -5,
+                  width: 18,
+                  height: 18,
+                  borderRadius: "50%",
+                  background: accent.toggle,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsx2(Check, { size: 10, strokeWidth: 3, color: "#fff" })
+              }
+            )
+          ]
+        },
+        t.value
+      );
+    }) }),
+    /* @__PURE__ */ jsxs2("div", { style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ jsx2("span", { style: { ...text.label.sm, color: fg.strong }, children: "URL" }),
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            height: 30,
+            padding: "0 8px",
+            background: state.input,
+            borderRadius: 7,
+            marginTop: 8
+          },
+          children: /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "text",
+              value: url,
+              onChange: (e) => onUrlChange(e.target.value),
+              placeholder: "localhost",
+              style: {
+                flex: 1,
+                minWidth: 0,
+                border: "none",
+                background: "transparent",
+                color: fg.strong,
+                ...text.label.xs,
+                fontFamily: "inherit",
+                outline: "none",
+                padding: 0
+              }
+            }
+          )
         }
-      },
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { style: { marginTop: 12 }, 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 }, children: [
+        /* @__PURE__ */ jsx2(
+          SlimSlider,
+          {
+            min: 0,
+            max: 200,
+            step: 5,
+            value: padding,
+            onChange: onPaddingChange
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          PaddingInput,
+          {
+            value: padding,
+            onChange: onPaddingChange
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function SmallButton({
+  children,
+  onClick
+}) {
+  const [hovered, setHovered] = useState2(false);
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
       style: {
-        width: 54,
-        padding: "4px 6px",
-        background: state.input,
-        border: `1px solid ${stroke.default}`,
-        borderRadius: 7,
-        color: fg.strong,
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        padding: "4px 10px",
+        borderRadius: 6,
+        border: `1px solid ${stroke.strong}`,
+        background: hovered ? state.hoverStrong : state.button,
+        color: fg.default,
         ...text.label.xs,
+        cursor: "pointer",
         fontFamily: "inherit",
-        textAlign: "center",
-        outline: "none"
-      }
+        transition: "background 0.12s ease"
+      },
+      children
     }
   );
 }
-function HexInput({
+function PaddingInput({
   value,
   onChange
 }) {
   const [editing, setEditing] = useState2(false);
-  const [text2, setText] = useState2(value);
+  const [text2, setText] = useState2(String(value));
   useEffect(() => {
-    if (!editing) {
-      setText(value);
-    }
+    if (!editing) setText(String(value));
   }, [editing, value]);
-  const commit = (raw) => {
-    const hex = raw.startsWith("#") ? raw : `#${raw}`;
-    if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
-      onChange(hex);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "input",
+  return /* @__PURE__ */ jsxs2(
+    "div",
     {
-      type: "text",
-      value: editing ? text2 : value,
-      onFocus: () => {
-        setEditing(true);
-        setText(value);
-      },
-      onBlur: () => {
-        setEditing(false);
-        commit(text2);
-      },
-      onChange: (e) => setText(e.target.value),
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          e.target.blur();
-        }
-      },
       style: {
-        width: 72,
-        padding: "4px 6px",
+        display: "flex",
+        alignItems: "center",
+        height: 30,
+        padding: "0 8px",
         background: state.input,
-        border: `1px solid ${stroke.default}`,
         borderRadius: 7,
-        color: fg.strong,
-        ...text.label.xs,
-        fontFamily: "inherit",
-        textAlign: "left",
-        outline: "none"
-      }
+        flexShrink: 0,
+        width: 68
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "text",
+            value: editing ? text2 : String(value),
+            onFocus: () => {
+              setEditing(true);
+              setText(String(value));
+            },
+            onBlur: () => {
+              setEditing(false);
+              const n = parseInt(text2, 10);
+              if (!Number.isNaN(n) && n >= 0 && n <= 200) onChange(n);
+            },
+            onChange: (e) => setText(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") e.target.blur();
+            },
+            style: {
+              flex: 1,
+              minWidth: 0,
+              border: "none",
+              background: "transparent",
+              color: fg.strong,
+              ...text.label.xs,
+              fontFamily: "inherit",
+              textAlign: "left",
+              outline: "none",
+              padding: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2("span", { style: { ...text.label.xs, color: fg.sub, flexShrink: 0, userSelect: "none", marginLeft: 4 }, children: "px" })
+      ]
     }
   );
 }
-function StaticText({ children }) {
-  return /* @__PURE__ */ jsx(
-    "span",
+function ColorHexInput({
+  value,
+  onChange
+}) {
+  const [editing, setEditing] = useState2(false);
+  const [text2, setText] = useState2(value.replace("#", ""));
+  useEffect(() => {
+    if (!editing) setText(value.replace("#", ""));
+  }, [editing, value]);
+  const commit = (raw) => {
+    const hex = raw.startsWith("#") ? raw : `#${raw}`;
+    if (/^#[0-9a-fA-F]{6}$/.test(hex)) onChange(hex);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
     {
       style: {
-        fontSize: 11,
-        color: fg.faint,
-        minWidth: 8,
-        textAlign: "center"
+        flex: 1,
+        minWidth: 0,
+        display: "flex",
+        alignItems: "center",
+        height: 30,
+        padding: "0 8px",
+        background: state.input,
+        borderRadius: 7,
+        gap: 6
       },
-      children
+      children: [
+        /* @__PURE__ */ jsx2("span", { style: { ...text.label.xs, color: fg.sub, flexShrink: 0, userSelect: "none" }, children: "#" }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: "text",
+            value: editing ? text2 : value.replace("#", ""),
+            onFocus: () => {
+              setEditing(true);
+              setText(value.replace("#", ""));
+            },
+            onBlur: () => {
+              setEditing(false);
+              commit(text2);
+            },
+            onChange: (e) => setText(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") e.target.blur();
+            },
+            style: {
+              flex: 1,
+              minWidth: 0,
+              border: "none",
+              background: "transparent",
+              color: fg.strong,
+              ...text.label.xs,
+              fontFamily: "inherit",
+              textAlign: "left",
+              outline: "none",
+              padding: 0
+            }
+          }
+        )
+      ]
     }
   );
 }
@@ -974,7 +1370,7 @@ function DropItem({
   onClick,
   active
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       onClick,
@@ -1011,641 +1407,126 @@ async function downscaleImage(dataUrl, maxW, maxH) {
   });
 }
 
-// src/overlay/ui/toolbar.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var EDGE_MARGIN = 24;
-var CONTAINER_SIZE = 38;
-function getCornerStyle(corner) {
-  switch (corner) {
-    case "bottom-right":
-      return { bottom: EDGE_MARGIN, right: EDGE_MARGIN };
-    case "bottom-left":
-      return { bottom: EDGE_MARGIN, left: EDGE_MARGIN };
-    case "top-right":
-      return { top: EDGE_MARGIN, right: EDGE_MARGIN };
-    case "top-left":
-      return { top: EDGE_MARGIN, left: EDGE_MARGIN };
-  }
-}
-function isBottomCorner(corner) {
-  return corner === "bottom-right" || corner === "bottom-left";
-}
-function isRightCorner(corner) {
-  return corner === "bottom-right" || corner === "top-right";
-}
-function snapToCorner(x, y) {
-  const cx = window.innerWidth / 2;
-  const cy = window.innerHeight / 2;
-  if (x < cx) {
-    return y < cy ? "top-left" : "bottom-left";
-  }
-  return y < cy ? "top-right" : "bottom-right";
-}
-function getCornerPosition(corner, w, h) {
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  switch (corner) {
-    case "bottom-right":
-      return { x: vw - EDGE_MARGIN - w, y: vh - EDGE_MARGIN - h };
-    case "bottom-left":
-      return { x: EDGE_MARGIN, y: vh - EDGE_MARGIN - h };
-    case "top-right":
-      return { x: vw - EDGE_MARGIN - w, y: EDGE_MARGIN };
-    case "top-left":
-      return { x: EDGE_MARGIN, y: EDGE_MARGIN };
-  }
+// 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" }) {
+  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(
+      "div",
+      {
+        style: {
+          flex: 1,
+          height: 14,
+          background: colors.urlBar,
+          borderRadius: 3,
+          display: "flex",
+          alignItems: "center",
+          paddingLeft: 6,
+          ...theme === "light" ? { border: `1px solid ${colors.border}` } : {},
+          boxSizing: "border-box"
+        },
+        children: /* @__PURE__ */ jsx3(
+          "span",
+          {
+            style: {
+              fontSize: 7,
+              lineHeight: 1,
+              color: colors.text,
+              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+            },
+            children: url
+          }
+        )
+      }
+    )
+  ] }) });
 }
-var MODES = [
-  { mode: "component", label: "Component", icon: MousePointer2 },
-  { mode: "viewport", label: "Viewport", icon: Monitor },
-  { mode: "fullpage", label: "Full Page", icon: FileText }
-];
-function Toolbar({
-  expanded,
-  onToggle,
-  phase,
-  loading,
-  selectedMode,
-  onModeChange,
-  onCapture,
-  onCancel,
+function FramePreview({
+  previewUrl,
   frameSettings,
-  onFrameSettingsChange
+  loading
 }) {
-  const [historyOpen, setHistoryOpen] = useState3(false);
-  const [modesExpanded, setModesExpanded] = useState3(true);
-  const [buttonsVisible, setButtonsVisible] = useState3(expanded);
-  const [animIn, setAnimIn] = useState3(expanded);
-  const [animDone, setAnimDone] = useState3(expanded);
-  useEffect2(() => {
-    if (expanded) {
-      setAnimDone(false);
-      setButtonsVisible(true);
-      setAnimIn(false);
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => setAnimIn(true));
-      });
-      const timer = setTimeout(() => setAnimDone(true), 250);
-      return () => clearTimeout(timer);
-    } else if (buttonsVisible) {
-      setHistoryOpen(false);
-      setAnimDone(false);
-      setAnimIn(false);
-      const timer = setTimeout(() => setButtonsVisible(false), 150);
-      return () => clearTimeout(timer);
-    }
-  }, [expanded]);
-  const [corner, setCorner] = useState3(() => {
-    try {
-      const stored = localStorage.getItem("ab-toolbar-corner");
-      if (stored && ["bottom-right", "bottom-left", "top-right", "top-left"].includes(stored)) {
-        return stored;
-      }
-    } catch {
-    }
-    return "bottom-right";
-  });
-  const [dragging, setDragging] = useState3(false);
-  const [dragPos, setDragPos] = useState3(null);
-  const [snapAnim, setSnapAnim] = useState3(null);
-  const dragState = useRef2(null);
-  const toolbarRef = useRef2(null);
-  const [cameraHovered, setCameraHovered] = useState3(false);
-  useEffect2(() => {
-    if (!expanded) return;
-    const onKey = (e) => {
-      if (e.target?.tagName === "INPUT") {
-        if (e.key === "Escape") {
-          e.target.blur();
-        }
-        return;
-      }
-      if (e.key === "Escape") {
-        if (historyOpen) {
-          setHistoryOpen(false);
-          return;
-        }
-        onCancel();
-      } else if (e.key === "Enter") {
-        onCapture(selectedMode);
-      }
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [expanded, onCancel, onCapture, selectedMode, historyOpen]);
-  const handleMouseDown = useCallback2(
-    (e) => {
-      e.preventDefault();
-      const el = toolbarRef.current;
-      if (!el) return;
-      const rect = el.getBoundingClientRect();
-      setDragging(true);
-      setDragPos({ x: rect.left, y: rect.top });
-      dragState.current = {
-        dragging: true,
-        startX: e.clientX,
-        startY: e.clientY,
-        origX: rect.left,
-        origY: rect.top,
-        distance: 0
-      };
-    },
-    []
-  );
-  useEffect2(() => {
-    const handleMouseMove = (e) => {
-      const ds = dragState.current;
-      if (!ds || !ds.dragging) return;
-      const dx = e.clientX - ds.startX;
-      const dy = e.clientY - ds.startY;
-      ds.distance = Math.sqrt(dx * dx + dy * dy);
-      setDragPos({
-        x: ds.origX + dx,
-        y: ds.origY + dy
-      });
-    };
-    const handleMouseUp = (e) => {
-      const ds = dragState.current;
-      if (!ds) return;
-      if (ds.distance < 5) {
-        onToggle();
-        setDragging(false);
-        setDragPos(null);
-        dragState.current = null;
-      } else {
-        const el = toolbarRef.current;
-        const w = el?.offsetWidth ?? CONTAINER_SIZE;
-        const h = el?.offsetHeight ?? CONTAINER_SIZE;
-        const currentX = ds.origX + (e.clientX - ds.startX);
-        const currentY = ds.origY + (e.clientY - ds.startY);
-        const centerX = currentX + w / 2;
-        const centerY = currentY + h / 2;
-        const newCorner = snapToCorner(centerX, centerY);
-        setCorner(newCorner);
-        try {
-          localStorage.setItem("ab-toolbar-corner", newCorner);
-        } catch {
-        }
-        const targetPos = getCornerPosition(newCorner, w, h);
-        setDragging(false);
-        setDragPos(null);
-        setSnapAnim({ x: currentX, y: currentY, animate: false });
-        dragState.current = null;
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            setSnapAnim({ ...targetPos, animate: true });
-            setTimeout(() => setSnapAnim(null), 300);
-          });
-        });
+  const { enabled: frameEnabled, browserChrome, browserTheme, browserUrl, size, bgType, bgColor, bgGradient, bgImage, padding, browserPadding = 20 } = frameSettings;
+  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(
+    "img",
+    {
+      src: previewUrl,
+      alt: "",
+      style: {
+        maxWidth: "100%",
+        maxHeight: "100%",
+        objectFit: "contain",
+        display: "block"
       }
-    };
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [onToggle]);
-  const panelSide = isRightCorner(corner) ? "left" : "right";
-  const tooltipSide = panelSide;
-  const bottom = isBottomCorner(corner);
-  const positionStyle = dragging && dragPos ? { left: dragPos.x, top: dragPos.y } : snapAnim ? {
-    left: snapAnim.x,
-    top: snapAnim.y,
-    ...snapAnim.animate && {
-      transition: "left 0.3s cubic-bezier(0.23, 1, 0.32, 1), top 0.3s cubic-bezier(0.23, 1, 0.32, 1)"
     }
-  } : 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__ */ jsxs2("div", { style: { position: "relative" }, children: [
-    cameraTooltipLabel && cameraHovered && !dragging && /* @__PURE__ */ jsx2(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          ...cameraTooltipStyle,
-          background: bg.base,
-          border: `1px solid ${stroke.default}`,
-          borderRadius: 6,
-          padding: "0 8px",
-          height: 24,
-          display: "flex",
-          alignItems: "center",
-          color: fg.strong,
-          ...text.label.xs,
-          whiteSpace: "nowrap",
-          boxShadow: shadow.tooltip,
-          pointerEvents: "none"
-        },
-        children: cameraTooltipLabel
-      }
-    ),
-    /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        onMouseDown: handleMouseDown,
-        onMouseEnter: () => setCameraHovered(true),
-        onMouseLeave: () => setCameraHovered(false),
-        style: {
-          width: 32,
-          height: 32,
-          padding: 0,
-          borderRadius: "50%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: dragging ? "grabbing" : "pointer",
-          background: expanded && cameraHovered ? state.hoverStrong : "transparent",
-          transition: "background 0.12s ease"
-        },
-        children: [
-          /* @__PURE__ */ jsx2(
-            "style",
-            {
-              dangerouslySetInnerHTML: {
-                __html: `
-@keyframes ab-spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-@keyframes ab-panel-in {
-  from { opacity: 0; transform: translateY(4px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-`
-              }
-            }
-          ),
-          loading ? /* @__PURE__ */ jsx2(
-            LoaderCircle,
-            {
-              size: 16,
-              strokeWidth: 2,
-              style: { animation: "ab-spin 0.8s linear infinite", color: "white" }
-            }
-          ) : phase === "ready" ? /* @__PURE__ */ jsx2(Check, { size: 16, strokeWidth: 2.6, color: accent.check }) : expanded ? /* @__PURE__ */ jsx2(
-            X2,
-            {
-              size: 16,
-              strokeWidth: 1.7,
-              color: cameraHovered ? fg.strong : fg.sub
-            }
-          ) : /* @__PURE__ */ jsx2(
-            Camera,
-            {
-              size: 16,
-              strokeWidth: 1.9,
-              color: fg.sub
-            }
-          )
-        ]
-      }
-    )
-  ] });
-  const toolbarButtons = buttonsVisible ? /* @__PURE__ */ jsx2(
+  ) : null;
+  const padPct = frameEnabled ? `${(browserChrome ? browserPadding : padding) / size.h * 100}%` : void 0;
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       style: {
-        overflow: animDone ? "visible" : "hidden",
-        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)"
+        width: "100%",
+        aspectRatio,
+        borderRadius: 10,
+        overflow: "hidden",
+        border: `1px solid ${stroke.soft}`,
+        marginBottom: 10,
+        display: "flex",
+        flexDirection: "column",
+        ...outerBg,
+        ...browserChrome && padPct ? { padding: padPct } : {}
       },
-      children: /* @__PURE__ */ jsxs2(
+      children: browserChrome ? /* @__PURE__ */ jsxs3("div", { style: { flex: 1, display: "flex", flexDirection: "column", borderRadius: 8, overflow: "hidden", minHeight: 0 }, 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(
         "div",
         {
           style: {
+            flex: 1,
             display: "flex",
-            flexDirection: "column",
             alignItems: "center",
-            opacity: animIn ? 1 : 0,
-            transform: animIn ? "translateY(0)" : `translateY(${bottom ? 6 : -6}px)`,
-            transition: animIn ? "opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1)" : "opacity 150ms cubic-bezier(0.23, 1, 0.32, 1), transform 150ms cubic-bezier(0.23, 1, 0.32, 1)",
-            willChange: "transform, opacity"
+            justifyContent: "center",
+            minHeight: 0,
+            ...padPct ? { padding: padPct } : {}
           },
-          children: [
-            /* @__PURE__ */ jsx2("div", { style: { paddingBottom: 2 }, children: /* @__PURE__ */ jsx2(
-              IconButton,
-              {
-                active: selectedMode === "component" && !historyOpen,
-                tooltipSide,
-                tooltip: "Component",
-                onClick: () => {
-                  setHistoryOpen(false);
-                  onModeChange("component");
-                },
-                children: /* @__PURE__ */ jsx2(MousePointer2, { size: 16, strokeWidth: 1.7 })
-              }
-            ) }),
-            MODES.filter((m) => m.mode !== "component").map(({ mode, label, icon: ModeIcon }) => /* @__PURE__ */ jsx2(
-              "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__ */ jsx2(
-                  IconButton,
-                  {
-                    active: selectedMode === mode && !historyOpen,
-                    tooltipSide,
-                    tooltip: label,
-                    onClick: () => {
-                      setHistoryOpen(false);
-                      onModeChange(mode);
-                      onCapture(mode);
-                    },
-                    children: /* @__PURE__ */ jsx2(ModeIcon, { size: 16, strokeWidth: 1.7 })
-                  }
-                )
-              },
-              mode
-            )),
-            /* @__PURE__ */ jsx2(
-              Separator,
-              {
-                vertical: false,
-                onClick: () => setModesExpanded((p) => !p)
-              }
-            ),
-            /* @__PURE__ */ jsx2(
-              HistoryButton,
-              {
-                open: historyOpen,
-                onClick: () => {
-                  setHistoryOpen((prev) => !prev);
-                },
-                selectedMode,
-                frameSettings,
-                onFrameSettingsChange,
-                tooltipSide
-              }
-            )
-          ]
+          children: imageEl || emptyState
         }
       )
     }
-  ) : null;
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      ref: toolbarRef,
-      "data-afterbefore": "true",
-      style: {
-        position: "fixed",
-        ...positionStyle,
-        zIndex: 2147483647,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        background: bg.base,
-        borderRadius: 999,
-        padding: 6,
-        boxShadow: shadow.toolbar,
-        ...fontBase,
-        userSelect: "none"
-      },
-      children: bottom ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        toolbarButtons,
-        cameraButton
-      ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        cameraButton,
-        toolbarButtons
-      ] })
-    }
-  );
-}
-function IconButton({
-  children,
-  active,
-  tooltip,
-  tooltipSide = "left",
-  onClick
-}) {
-  const [hovered, setHovered] = useState3(false);
-  const tooltipStyle = tooltipSide === "left" ? {
-    right: "calc(100% + 10px)",
-    top: "50%",
-    transform: "translateY(-50%)"
-  } : {
-    left: "calc(100% + 10px)",
-    top: "50%",
-    transform: "translateY(-50%)"
-  };
-  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
-    tooltip && hovered && /* @__PURE__ */ jsx2(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          ...tooltipStyle,
-          background: bg.base,
-          border: `1px solid ${stroke.default}`,
-          borderRadius: 6,
-          padding: "0 8px",
-          height: 24,
-          display: "flex",
-          alignItems: "center",
-          color: fg.strong,
-          ...text.label.xs,
-          whiteSpace: "nowrap",
-          boxShadow: shadow.tooltip,
-          pointerEvents: "none"
-        },
-        children: tooltip
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      "button",
-      {
-        onClick,
-        onMouseEnter: () => setHovered(true),
-        onMouseLeave: () => setHovered(false),
-        style: {
-          width: 32,
-          height: 32,
-          borderRadius: "50%",
-          border: "none",
-          background: active || hovered ? state.hoverStrong : "transparent",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer",
-          padding: 0,
-          color: active || hovered ? fg.strong : fg.sub,
-          transition: "background 0.12s ease, color 0.12s ease"
-        },
-        children
-      }
-    )
-  ] });
-}
-function DropItem2({
-  children,
-  onClick,
-  active,
-  accent: accent2
-}) {
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      onClick,
-      style: {
-        display: "block",
-        width: "100%",
-        padding: "7px 12px",
-        background: active ? state.active : "transparent",
-        border: "none",
-        color: accent2 ? accent.highlight : fg.strong,
-        textAlign: "left",
-        cursor: "pointer",
-        ...text.paragraph.sm,
-        fontFamily: "inherit"
-      },
-      children
-    }
-  );
-}
-function Separator({
-  vertical = true,
-  onClick
-}) {
-  return /* @__PURE__ */ jsx2(
-    "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__ */ jsx2("div", { style: { position: "absolute", inset: vertical ? "0 -8px" : "-8px 0" } })
-    }
   );
 }
-function BrowserChromeBar({ theme }) {
-  const colors = theme === "dark" ? { titleBar: "#1C1C1C", urlBar: "#262626", text: "#7B7B7B", border: "#333333" } : { titleBar: "#F5F5F5", urlBar: "#FFFFFF", text: "#999999", border: "#EBEBEB" };
-  return /* @__PURE__ */ jsxs2("div", { style: { background: colors.titleBar, flexShrink: 0 }, children: [
-    /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", height: 18, padding: "0 8px" }, children: /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 5 }, children: ["#FF5F57", "#FEBC2E", "#28C840"].map((c) => /* @__PURE__ */ jsx2("div", { style: { width: 6, height: 6, borderRadius: "50%", background: c } }, c)) }) }),
-    /* @__PURE__ */ jsx2("div", { style: { padding: "2px 40px 3px" }, children: /* @__PURE__ */ jsx2(
-      "div",
-      {
-        style: {
-          background: colors.urlBar,
-          borderRadius: 3,
-          padding: "2px 0",
-          textAlign: "center",
-          ...theme === "light" ? { border: `1px solid ${colors.border}` } : {}
-        },
-        children: /* @__PURE__ */ jsx2(
-          "span",
-          {
-            style: {
-              fontSize: 7,
-              color: colors.text,
-              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
-            },
-            children: "localhost"
-          }
-        )
-      }
-    ) }),
-    /* @__PURE__ */ jsx2("div", { style: { height: 1, background: colors.border } })
-  ] });
-}
-function FramePreview({
-  previewUrl,
-  frameSettings,
-  loading,
-  onClickLightbox
-}) {
-  const { enabled: frameEnabled, browserChrome, browserTheme, size, bgType, bgColor, bgImage, padding } = frameSettings;
-  const aspectRatio = frameEnabled ? `${size.w} / ${size.h}` : "16 / 10";
-  const outerBg = frameEnabled ? bgType === "image" && bgImage ? { backgroundImage: `url(${bgImage})`, backgroundSize: "cover", backgroundPosition: "center" } : { background: bgColor } : { background: bg.elevated };
-  const paddingPct = frameEnabled ? `${padding / size.w * 100}%` : void 0;
-  const emptyState = /* @__PURE__ */ jsx2("span", { style: { ...text.paragraph.xs, color: fg.faint }, children: loading ? "Loading..." : "No screenshots yet" });
-  const imageEl = previewUrl ? /* @__PURE__ */ jsx2(
-    "img",
-    {
-      src: previewUrl,
-      alt: "",
-      style: {
-        maxWidth: "100%",
-        maxHeight: "100%",
-        objectFit: "contain",
-        display: "block"
-      }
-    }
-  ) : null;
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      onClick: onClickLightbox,
-      style: {
-        width: "100%",
-        aspectRatio,
-        borderRadius: 10,
-        overflow: "hidden",
-        border: `1px solid ${stroke.soft}`,
-        cursor: previewUrl ? "zoom-in" : "default",
-        marginBottom: 10,
-        display: "flex",
-        flexDirection: "column",
-        ...outerBg
-      },
-      children: frameEnabled ? /* @__PURE__ */ jsxs2(
-        "div",
-        {
-          style: {
-            flex: 1,
-            display: "flex",
-            flexDirection: "column",
-            padding: paddingPct,
-            minHeight: 0
-          },
-          children: [
-            browserChrome && /* @__PURE__ */ jsx2(BrowserChromeBar, { theme: browserTheme }),
-            /* @__PURE__ */ jsx2(
-              "div",
-              {
-                style: {
-                  flex: 1,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  minHeight: 0,
-                  overflow: "hidden"
-                },
-                children: imageEl || emptyState
-              }
-            )
-          ]
-        }
-      ) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        browserChrome && /* @__PURE__ */ jsx2(BrowserChromeBar, { theme: browserTheme }),
-        /* @__PURE__ */ jsx2(
-          "div",
-          {
-            style: {
-              flex: 1,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              minHeight: 0
-            },
-            children: imageEl || emptyState
-          }
-        )
-      ] })
-    }
-  );
+function formatTimestamp(filename) {
+  const iso = filename.replace(/\.png$/, "").replace(/T(\d{2})-(\d{2})-(\d{2})-(\d+)Z$/, "T$1:$2:$3.$4Z");
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return filename.replace(/\.png$/, "");
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMin = Math.floor(diffMs / 6e4);
+  if (diffMin < 1) return "Just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  return date.toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
 }
-function HistoryButton({
+function ScreenshotsPanel({
   open,
   onClick,
   selectedMode,
@@ -1654,7 +1535,6 @@ function HistoryButton({
   tooltipSide
 }) {
   const [toast, setToast] = useState3(null);
-  const [pushing, setPushing] = useState3(false);
   const [saveDir, setSaveDir] = useState3(null);
   const [picking, setPicking] = useState3(false);
   const [repos, setRepos] = useState3([]);
@@ -1665,7 +1545,6 @@ function HistoryButton({
   const [loading, setLoading] = useState3(false);
   const [repoDropOpen, setRepoDropOpen] = useState3(false);
   const [branchDropOpen, setBranchDropOpen] = useState3(false);
-  const [lightboxSrc, setLightboxSrc] = useState3(null);
   const [editingFile, setEditingFile] = useState3(null);
   const [editValue, setEditValue] = useState3("");
   const [selectedFile, setSelectedFile] = useState3(null);
@@ -1724,27 +1603,13 @@ function HistoryButton({
     setToast({ message, type });
     setTimeout(() => setToast(null), 3e3);
   }, []);
-  const handleOpenFolder = async () => {
+  const handleRename = async (oldName, newName) => {
+    if (!newName.trim() || newName.trim() === oldName.replace(/\.png$/, "")) {
+      setEditingFile(null);
+      return;
+    }
     try {
-      const body = selectedRepo && selectedBranch ? JSON.stringify({ repo: selectedRepo, branch: selectedBranch }) : void 0;
-      const res = await fetch("/__afterbefore/open", {
-        method: "POST",
-        headers: body ? { "Content-Type": "application/json" } : void 0,
-        body
-      });
-      if (!res.ok) throw new Error();
-      showToast("Opened folder", "success");
-    } catch {
-      showToast("Could not open folder", "error");
-    }
-  };
-  const handleRename = async (oldName, newName) => {
-    if (!newName.trim() || newName.trim() === oldName.replace(/\.png$/, "")) {
-      setEditingFile(null);
-      return;
-    }
-    try {
-      const res = await fetch("/__afterbefore/history/rename", {
+      const res = await fetch("/__afterbefore/history/rename", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
@@ -1790,29 +1655,11 @@ function HistoryButton({
       showToast("Delete failed", "error");
     }
   };
-  const handlePush = async () => {
-    setPushing(true);
-    try {
-      const res = await fetch("/__afterbefore/push", { method: "POST" });
-      const data = await res.json();
-      if (!res.ok) {
-        showToast(data.error || "Push failed", "error");
-      } else if (data.pr) {
-        showToast(`Posted to PR #${data.pr}`, "success");
-      } else {
-        showToast("No PR found", "error");
-      }
-    } catch {
-      showToast("Push failed", "error");
-    } finally {
-      setPushing(false);
-    }
-  };
   const previewUrl = selectedFile ? `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(selectedFile)}` : null;
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2(IconButton, { active: open, tooltipSide, tooltip: !open ? "Screenshots" : void 0, onClick, children: /* @__PURE__ */ jsx2(Image2, { size: 16, strokeWidth: 1.7 }) }),
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(IconButton, { active: open, tooltipSide, tooltip: !open ? "Screenshots" : void 0, onClick, children: /* @__PURE__ */ jsx3(ImageIcon, { size: 20 }) }),
     open && createPortal(
-      /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs3(
         "div",
         {
           "data-afterbefore": "true",
@@ -1828,13 +1675,26 @@ function HistoryButton({
             ...fontBase
           },
           children: [
-            /* @__PURE__ */ jsxs2(
+            /* @__PURE__ */ jsx3(
+              "style",
+              {
+                dangerouslySetInnerHTML: {
+                  __html: `
+@keyframes ab-panel-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs3(
               "div",
               {
                 onClick: (e) => e.stopPropagation(),
                 style: {
-                  width: 580,
-                  maxHeight: "80vh",
+                  width: 900,
+                  height: "70vh",
                   borderRadius: 14,
                   background: bg.base,
                   border: `1px solid ${stroke.default}`,
@@ -1845,17 +1705,18 @@ function HistoryButton({
                   animation: "ab-panel-in 150ms cubic-bezier(0.23, 1, 0.32, 1)"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs2("div", { style: {
+                  /* @__PURE__ */ jsxs3("div", { style: {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between",
-                    padding: "16px 20px 0"
+                    padding: "16px 20px",
+                    borderBottom: `1px solid ${stroke.soft}`
                   }, children: [
-                    /* @__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.muted, marginTop: 2 }, children: "Capture history & settings" })
+                    /* @__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__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         onClick,
@@ -1869,222 +1730,249 @@ function HistoryButton({
                           alignItems: "center",
                           justifyContent: "center",
                           cursor: "pointer",
-                          color: fg.muted,
+                          color: fg.sub,
                           padding: 0,
                           transition: "background 0.12s ease, color 0.12s ease"
                         },
                         onMouseEnter: (e) => {
                           e.currentTarget.style.background = state.hover;
-                          e.currentTarget.style.color = fg.default;
+                          e.currentTarget.style.color = fg.strong;
                         },
                         onMouseLeave: (e) => {
                           e.currentTarget.style.background = "transparent";
-                          e.currentTarget.style.color = fg.muted;
+                          e.currentTarget.style.color = fg.sub;
                         },
-                        children: /* @__PURE__ */ jsx2(X2, { size: 14, strokeWidth: 2 })
+                        children: /* @__PURE__ */ jsx3(X, { size: 14, strokeWidth: 2 })
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs2("div", { style: { flex: 1, overflowY: "auto", padding: "16px 20px 20px" }, children: [
-                    /* @__PURE__ */ jsx2(
-                      FramePreview,
-                      {
-                        previewUrl,
-                        frameSettings,
-                        loading,
-                        onClickLightbox: () => {
-                          if (previewUrl) setLightboxSrc(previewUrl);
-                        }
-                      }
-                    ),
-                    selectedFile && !loading && /* @__PURE__ */ jsxs2("div", { style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 8,
-                      marginBottom: 12
-                    }, children: [
-                      /* @__PURE__ */ jsx2("div", { style: { flex: 1, minWidth: 0 }, children: editingFile === selectedFile ? /* @__PURE__ */ jsx2(
-                        "input",
+                  /* @__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(
+                        FramePreview,
                         {
-                          autoFocus: true,
-                          value: editValue,
-                          onChange: (e) => setEditValue(e.target.value),
-                          onKeyDown: (e) => {
-                            if (e.key === "Enter") handleRename(selectedFile, editValue);
-                            if (e.key === "Escape") setEditingFile(null);
-                          },
-                          onBlur: () => handleRename(selectedFile, editValue),
-                          style: {
-                            width: "100%",
-                            ...text.label.xs,
-                            color: fg.strong,
-                            background: state.hover,
-                            border: `1px solid ${stroke.interactive}`,
-                            borderRadius: 4,
-                            padding: "2px 6px",
-                            outline: "none",
-                            fontFamily: "inherit"
-                          }
+                          previewUrl,
+                          frameSettings,
+                          loading
                         }
-                      ) : /* @__PURE__ */ jsx2(
+                      ),
+                      selectedFile && !loading && /* @__PURE__ */ jsxs3("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 8,
+                        marginBottom: 12
+                      }, children: [
+                        /* @__PURE__ */ jsx3("div", { style: { flex: 1, minWidth: 0 }, children: editingFile === selectedFile ? /* @__PURE__ */ jsx3(
+                          "input",
+                          {
+                            autoFocus: true,
+                            value: editValue,
+                            onChange: (e) => setEditValue(e.target.value),
+                            onKeyDown: (e) => {
+                              if (e.key === "Enter") handleRename(selectedFile, editValue);
+                              if (e.key === "Escape") setEditingFile(null);
+                            },
+                            onBlur: () => handleRename(selectedFile, editValue),
+                            style: {
+                              width: "100%",
+                              ...text.label.xs,
+                              color: fg.strong,
+                              background: state.hover,
+                              border: `1px solid ${stroke.interactive}`,
+                              borderRadius: 4,
+                              padding: "2px 6px",
+                              outline: "none",
+                              fontFamily: "inherit"
+                            }
+                          }
+                        ) : /* @__PURE__ */ jsx3(
+                          "div",
+                          {
+                            onClick: () => {
+                              setEditingFile(selectedFile);
+                              setEditValue(selectedFile.replace(/\.png$/, ""));
+                            },
+                            style: {
+                              ...text.label.xs,
+                              color: fg.strong,
+                              cursor: "pointer",
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap"
+                            },
+                            title: "Click to rename",
+                            children: formatTimestamp(selectedFile)
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx3(
+                          "button",
+                          {
+                            onClick: () => handleDelete(selectedFile),
+                            title: "Delete screenshot",
+                            style: {
+                              flexShrink: 0,
+                              width: 28,
+                              height: 28,
+                              borderRadius: 6,
+                              border: "none",
+                              background: "transparent",
+                              color: fg.muted,
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              padding: 0
+                            },
+                            onMouseEnter: (e) => {
+                              e.currentTarget.style.color = feedback.error;
+                              e.currentTarget.style.background = feedback.errorBg;
+                            },
+                            onMouseLeave: (e) => {
+                              e.currentTarget.style.color = fg.muted;
+                              e.currentTarget.style.background = "transparent";
+                            },
+                            children: /* @__PURE__ */ jsx3(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(
+                          FilterDropdown,
+                          {
+                            label: "Project",
+                            value: selectedRepo,
+                            options: repos,
+                            isOpen: repoDropOpen,
+                            onToggle: () => {
+                              setRepoDropOpen((p) => !p);
+                              setBranchDropOpen(false);
+                            },
+                            onSelect: (repo) => {
+                              setSelectedRepo(repo);
+                              setSelectedBranch(null);
+                              setRepoDropOpen(false);
+                            }
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx3("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx3(
+                          FilterDropdown,
+                          {
+                            label: "Branch",
+                            value: selectedBranch,
+                            options: branches,
+                            isOpen: branchDropOpen,
+                            onToggle: () => {
+                              setBranchDropOpen((p) => !p);
+                              setRepoDropOpen(false);
+                            },
+                            onSelect: (branch) => {
+                              setSelectedBranch(branch);
+                              setBranchDropOpen(false);
+                            }
+                          }
+                        ) })
+                      ] }),
+                      screenshots.length > 0 && /* @__PURE__ */ jsx3(
                         "div",
                         {
-                          onClick: () => {
-                            setEditingFile(selectedFile);
-                            setEditValue(selectedFile.replace(/\.png$/, ""));
-                          },
-                          style: {
-                            ...text.label.xs,
-                            color: fg.strong,
-                            cursor: "pointer",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap"
-                          },
-                          title: "Click to rename",
-                          children: formatTimestamp(selectedFile)
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx2(
-                        "button",
-                        {
-                          onClick: () => handleDelete(selectedFile),
-                          title: "Delete screenshot",
                           style: {
-                            flexShrink: 0,
-                            width: 28,
-                            height: 28,
-                            borderRadius: 6,
-                            border: "none",
-                            background: "transparent",
-                            color: fg.faint,
-                            cursor: "pointer",
                             display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            padding: 0
-                          },
-                          onMouseEnter: (e) => {
-                            e.currentTarget.style.color = feedback.error;
-                            e.currentTarget.style.background = feedback.errorBg;
+                            gap: 6,
+                            overflowX: "auto",
+                            paddingBottom: 4,
+                            marginBottom: 10
                           },
-                          onMouseLeave: (e) => {
-                            e.currentTarget.style.color = fg.faint;
-                            e.currentTarget.style.background = "transparent";
-                          },
-                          children: /* @__PURE__ */ jsx2(Trash22, { size: 14, strokeWidth: 1.8 })
+                          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(
+                              "div",
+                              {
+                                onClick: () => setSelectedFile(shot.filename),
+                                style: {
+                                  width: 64,
+                                  height: 44,
+                                  flexShrink: 0,
+                                  borderRadius: 6,
+                                  overflow: "hidden",
+                                  cursor: "pointer",
+                                  border: isSelected ? `2px solid ${accent.highlight}` : `1px solid ${stroke.soft}`,
+                                  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"
+                                    }
+                                  }
+                                )
+                              },
+                              shot.filename
+                            );
+                          })
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx2("div", { style: { marginBottom: 12 }, children: /* @__PURE__ */ jsx2(
-                      SettingsContent,
-                      {
-                        frameSettings,
-                        onFrameSettingsChange,
-                        saveDir: shortDir,
-                        picking,
-                        onPickFolder: handlePickFolder
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 10, marginBottom: 10 }, children: [
-                      /* @__PURE__ */ jsx2("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx2(
-                        FilterDropdown,
+                    /* @__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,
                         {
-                          label: "Project",
-                          value: selectedRepo,
-                          options: repos,
-                          isOpen: repoDropOpen,
-                          onToggle: () => {
-                            setRepoDropOpen((p) => !p);
-                            setBranchDropOpen(false);
-                          },
-                          onSelect: (repo) => {
-                            setSelectedRepo(repo);
-                            setSelectedBranch(null);
-                            setRepoDropOpen(false);
-                          }
+                          frameSettings,
+                          onFrameSettingsChange,
+                          saveDir: shortDir,
+                          picking,
+                          onPickFolder: handlePickFolder
                         }
                       ) }),
-                      /* @__PURE__ */ jsx2("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx2(
-                        FilterDropdown,
-                        {
-                          label: "Branch",
-                          value: selectedBranch,
-                          options: branches,
-                          isOpen: branchDropOpen,
-                          onToggle: () => {
-                            setBranchDropOpen((p) => !p);
-                            setRepoDropOpen(false);
-                          },
-                          onSelect: (branch) => {
-                            setSelectedBranch(branch);
-                            setBranchDropOpen(false);
+                      /* @__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: "Paulius Kairevicius" }),
+                        /* @__PURE__ */ jsx3(
+                          "a",
+                          {
+                            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" }) })
                           }
-                        }
-                      ) })
-                    ] }),
-                    screenshots.length > 0 && /* @__PURE__ */ jsx2(
-                      "div",
-                      {
-                        style: {
-                          display: "flex",
-                          gap: 6,
-                          overflowX: "auto",
-                          paddingBottom: 4,
-                          marginBottom: 10
-                        },
-                        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__ */ jsx2(
-                            "div",
-                            {
-                              onClick: () => setSelectedFile(shot.filename),
-                              style: {
-                                width: 64,
-                                height: 44,
-                                flexShrink: 0,
-                                borderRadius: 6,
-                                overflow: "hidden",
-                                cursor: "pointer",
-                                border: isSelected ? `2px solid ${accent.highlight}` : `1px solid ${stroke.soft}`,
-                                opacity: isSelected ? 1 : 0.7,
-                                transition: "opacity 0.12s ease, border-color 0.12s ease"
-                              },
-                              children: /* @__PURE__ */ jsx2(
-                                "img",
-                                {
-                                  src: thumbUrl,
-                                  alt: "",
-                                  style: {
-                                    width: "100%",
-                                    height: "100%",
-                                    objectFit: "cover",
-                                    display: "block"
-                                  }
-                                }
-                              )
+                        ),
+                        /* @__PURE__ */ jsx3(
+                          "a",
+                          {
+                            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;
                             },
-                            shot.filename
-                          );
-                        })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 6 }, children: [
-                      /* @__PURE__ */ jsxs2(ActionButton, { onClick: handleOpenFolder, children: [
-                        /* @__PURE__ */ jsx2(FolderOpen, { size: 13, strokeWidth: 1.8 }),
-                        "Open Folder"
-                      ] }),
-                      /* @__PURE__ */ jsxs2(ActionButton, { onClick: handlePush, disabled: pushing, children: [
-                        /* @__PURE__ */ jsx2(ArrowUp, { size: 13, strokeWidth: 1.8 }),
-                        pushing ? "Pushing..." : "Push to PR"
+                            onMouseLeave: (e) => {
+                              e.currentTarget.style.color = fg.muted;
+                            },
+                            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" }) })
+                          }
+                        )
                       ] })
                     ] })
                   ] })
                 ]
               }
             ),
-            toast && /* @__PURE__ */ jsx2(
+            toast && /* @__PURE__ */ jsx3(
               "div",
               {
                 onClick: (e) => e.stopPropagation(),
@@ -2108,72 +1996,568 @@ function HistoryButton({
         }
       ),
       document.body
+    )
+  ] });
+}
+
+// src/overlay/ui/toolbar.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var TOOLTIP_DELAY = 500;
+var TOOLTIP_COOLDOWN = 300;
+var tooltipWarm = false;
+var tooltipCooldownTimer = null;
+function useTooltipDelay(hovered) {
+  const [visible, setVisible] = useState4(false);
+  const delayRef = useRef2(null);
+  useEffect3(() => {
+    if (!hovered) {
+      setVisible(false);
+      if (delayRef.current) {
+        clearTimeout(delayRef.current);
+        delayRef.current = null;
+      }
+      if (tooltipCooldownTimer) clearTimeout(tooltipCooldownTimer);
+      tooltipCooldownTimer = setTimeout(() => {
+        tooltipWarm = false;
+      }, TOOLTIP_COOLDOWN);
+      return;
+    }
+    if (tooltipCooldownTimer) {
+      clearTimeout(tooltipCooldownTimer);
+      tooltipCooldownTimer = null;
+    }
+    if (tooltipWarm) {
+      setVisible(true);
+    } else {
+      delayRef.current = setTimeout(() => {
+        tooltipWarm = true;
+        setVisible(true);
+      }, TOOLTIP_DELAY);
+    }
+    return () => {
+      if (delayRef.current) {
+        clearTimeout(delayRef.current);
+        delayRef.current = null;
+      }
+    };
+  }, [hovered]);
+  return visible;
+}
+var EDGE_MARGIN = 24;
+var CONTAINER_SIZE = 38;
+function getCornerStyle(corner) {
+  switch (corner) {
+    case "bottom-right":
+      return { bottom: EDGE_MARGIN, right: EDGE_MARGIN };
+    case "bottom-left":
+      return { bottom: EDGE_MARGIN, left: EDGE_MARGIN };
+    case "top-right":
+      return { top: EDGE_MARGIN, right: EDGE_MARGIN };
+    case "top-left":
+      return { top: EDGE_MARGIN, left: EDGE_MARGIN };
+  }
+}
+function isBottomCorner(corner) {
+  return corner === "bottom-right" || corner === "bottom-left";
+}
+function isRightCorner(corner) {
+  return corner === "bottom-right" || corner === "top-right";
+}
+function snapToCorner(x, y) {
+  const cx = window.innerWidth / 2;
+  const cy = window.innerHeight / 2;
+  if (x < cx) {
+    return y < cy ? "top-left" : "bottom-left";
+  }
+  return y < cy ? "top-right" : "bottom-right";
+}
+function getCornerPosition(corner, w, h) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  switch (corner) {
+    case "bottom-right":
+      return { x: vw - EDGE_MARGIN - w, y: vh - EDGE_MARGIN - h };
+    case "bottom-left":
+      return { x: EDGE_MARGIN, y: vh - EDGE_MARGIN - h };
+    case "top-right":
+      return { x: vw - EDGE_MARGIN - w, y: EDGE_MARGIN };
+    case "top-left":
+      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,
+  phase,
+  loading,
+  selectedMode,
+  onModeChange,
+  onCapture,
+  onCancel,
+  frameSettings,
+  onFrameSettingsChange
+}) {
+  const [historyOpen, setHistoryOpen] = useState4(false);
+  const [modesExpanded, setModesExpanded] = useState4(false);
+  const [buttonsVisible, setButtonsVisible] = useState4(expanded);
+  const [animIn, setAnimIn] = useState4(expanded);
+  const [animDone, setAnimDone] = useState4(expanded);
+  useEffect3(() => {
+    if (expanded) {
+      setAnimDone(false);
+      setButtonsVisible(true);
+      setAnimIn(false);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setAnimIn(true));
+      });
+      const timer = setTimeout(() => setAnimDone(true), 250);
+      return () => clearTimeout(timer);
+    } else if (buttonsVisible) {
+      setHistoryOpen(false);
+      setAnimDone(false);
+      setAnimIn(false);
+      const timer = setTimeout(() => setButtonsVisible(false), 150);
+      return () => clearTimeout(timer);
+    }
+  }, [expanded]);
+  const [corner, setCorner] = useState4(() => {
+    try {
+      const stored = localStorage.getItem("ab-toolbar-corner");
+      if (stored && ["bottom-right", "bottom-left", "top-right", "top-left"].includes(stored)) {
+        return stored;
+      }
+    } catch {
+    }
+    return "bottom-right";
+  });
+  const [dragging, setDragging] = useState4(false);
+  const [dragPos, setDragPos] = useState4(null);
+  const [snapAnim, setSnapAnim] = useState4(null);
+  const dragState = useRef2(null);
+  const toolbarRef = useRef2(null);
+  const [cameraHovered, setCameraHovered] = useState4(false);
+  const cameraTooltipVisible = useTooltipDelay(cameraHovered && !!expanded);
+  useEffect3(() => {
+    if (!expanded) return;
+    const onKey = (e) => {
+      if (e.target?.tagName === "INPUT") {
+        if (e.key === "Escape") {
+          e.target.blur();
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        if (historyOpen) {
+          setHistoryOpen(false);
+          return;
+        }
+        onCancel();
+      } else if (e.key === "Enter") {
+        onCapture(selectedMode);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [expanded, onCancel, onCapture, selectedMode, historyOpen]);
+  const handleMouseDown = useCallback3(
+    (e) => {
+      e.preventDefault();
+      const el = toolbarRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      setDragging(true);
+      setDragPos({ x: rect.left, y: rect.top });
+      dragState.current = {
+        dragging: true,
+        startX: e.clientX,
+        startY: e.clientY,
+        origX: rect.left,
+        origY: rect.top,
+        distance: 0
+      };
+    },
+    []
+  );
+  useEffect3(() => {
+    const handleMouseMove = (e) => {
+      const ds = dragState.current;
+      if (!ds || !ds.dragging) return;
+      const dx = e.clientX - ds.startX;
+      const dy = e.clientY - ds.startY;
+      ds.distance = Math.sqrt(dx * dx + dy * dy);
+      setDragPos({
+        x: ds.origX + dx,
+        y: ds.origY + dy
+      });
+    };
+    const handleMouseUp = (e) => {
+      const ds = dragState.current;
+      if (!ds) return;
+      if (ds.distance < 5) {
+        onToggle();
+        setDragging(false);
+        setDragPos(null);
+        dragState.current = null;
+      } else {
+        const el = toolbarRef.current;
+        const w = el?.offsetWidth ?? CONTAINER_SIZE;
+        const h = el?.offsetHeight ?? CONTAINER_SIZE;
+        const currentX = ds.origX + (e.clientX - ds.startX);
+        const currentY = ds.origY + (e.clientY - ds.startY);
+        const centerX = currentX + w / 2;
+        const centerY = currentY + h / 2;
+        const newCorner = snapToCorner(centerX, centerY);
+        setCorner(newCorner);
+        try {
+          localStorage.setItem("ab-toolbar-corner", newCorner);
+        } catch {
+        }
+        const targetPos = getCornerPosition(newCorner, w, h);
+        setDragging(false);
+        setDragPos(null);
+        setSnapAnim({ x: currentX, y: currentY, animate: false });
+        dragState.current = null;
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            setSnapAnim({ ...targetPos, animate: true });
+            setTimeout(() => setSnapAnim(null), 300);
+          });
+        });
+      }
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [onToggle]);
+  const panelSide = isRightCorner(corner) ? "left" : "right";
+  const tooltipSide = panelSide;
+  const bottom = isBottomCorner(corner);
+  const positionStyle = dragging && dragPos ? { left: dragPos.x, top: dragPos.y } : snapAnim ? {
+    left: snapAnim.x,
+    top: snapAnim.y,
+    ...snapAnim.animate && {
+      transition: "left 0.3s cubic-bezier(0.23, 1, 0.32, 1), top 0.3s cubic-bezier(0.23, 1, 0.32, 1)"
+    }
+  } : 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(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          ...cameraTooltipStyle,
+          background: bg.base,
+          border: `1px solid ${stroke.default}`,
+          borderRadius: 6,
+          padding: "0 8px",
+          height: 24,
+          display: "flex",
+          alignItems: "center",
+          color: fg.strong,
+          ...text.label.xs,
+          whiteSpace: "nowrap",
+          boxShadow: shadow.tooltip,
+          pointerEvents: "none"
+        },
+        children: cameraTooltipLabel
+      }
     ),
-    lightboxSrc && createPortal(
-      /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        onMouseDown: handleMouseDown,
+        onMouseEnter: () => setCameraHovered(true),
+        onMouseLeave: () => setCameraHovered(false),
+        style: {
+          width: 32,
+          height: 32,
+          padding: 0,
+          borderRadius: "50%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: dragging ? "grabbing" : "pointer",
+          background: expanded && cameraHovered ? state.hoverStrong : "transparent",
+          transition: "background 0.12s ease"
+        },
+        children: [
+          /* @__PURE__ */ jsx4(
+            "style",
+            {
+              dangerouslySetInnerHTML: {
+                __html: `
+@keyframes ab-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+@keyframes ab-panel-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+`
+              }
+            }
+          ),
+          loading ? /* @__PURE__ */ jsx4(
+            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,
+            {
+              size: 20,
+              color: cameraHovered ? fg.strong : fg.default
+            }
+          ) : /* @__PURE__ */ jsx4(
+            CameraIcon,
+            {
+              size: 20,
+              color: cameraHovered ? fg.strong : fg.default
+            }
+          )
+        ]
+      }
+    )
+  ] });
+  const toolbarButtons = buttonsVisible ? /* @__PURE__ */ jsx4(
+    "div",
+    {
+      style: {
+        overflow: animDone ? "visible" : "hidden",
+        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(
         "div",
         {
-          "data-afterbefore": "true",
-          onClick: () => setLightboxSrc(null),
-          onKeyDown: (e) => {
-            if (e.key === "Escape") setLightboxSrc(null);
-          },
           style: {
-            position: "fixed",
-            inset: 0,
-            zIndex: 2147483647,
-            background: "rgba(0, 0, 0, 0.85)",
             display: "flex",
+            flexDirection: "column",
             alignItems: "center",
-            justifyContent: "center",
-            cursor: "zoom-out"
+            opacity: animIn ? 1 : 0,
+            transform: animIn ? "translateY(0)" : `translateY(${bottom ? 6 : -6}px)`,
+            transition: animIn ? "opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1)" : "opacity 150ms cubic-bezier(0.23, 1, 0.32, 1), transform 150ms cubic-bezier(0.23, 1, 0.32, 1)",
+            willChange: "transform, opacity"
           },
           children: [
-            /* @__PURE__ */ jsx2(
-              "img",
+            /* @__PURE__ */ jsx4("div", { style: { paddingBottom: 2 }, children: /* @__PURE__ */ jsx4(
+              IconButton,
+              {
+                active: selectedMode === "component" && !historyOpen,
+                tooltipSide,
+                tooltip: "Component",
+                onClick: () => {
+                  setHistoryOpen(false);
+                  onModeChange("component");
+                },
+                children: /* @__PURE__ */ jsx4(CameraIcon, { size: 20 })
+              }
+            ) }),
+            MODES.filter((m) => m.mode !== "component").map(({ mode, label, icon: ModeIcon }) => /* @__PURE__ */ jsx4(
+              "div",
               {
-                src: lightboxSrc,
-                alt: "",
-                onClick: (e) => e.stopPropagation(),
                 style: {
-                  maxWidth: "90vw",
-                  maxHeight: "calc(100vh - 64px)",
-                  borderRadius: 8,
-                  boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
-                  cursor: "default"
-                }
+                  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__ */ jsx2(
-              "button",
+            /* @__PURE__ */ jsx4(
+              ScreenshotsPanel,
               {
-                onClick: () => setLightboxSrc(null),
-                style: {
-                  position: "absolute",
-                  top: 16,
-                  right: 16,
-                  width: 32,
-                  height: 32,
-                  borderRadius: "50%",
-                  border: "none",
-                  background: state.pressed,
-                  color: "white",
-                  cursor: "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  padding: 0
+                open: historyOpen,
+                onClick: () => {
+                  setHistoryOpen((prev) => !prev);
                 },
-                children: /* @__PURE__ */ jsx2(X2, { size: 18, strokeWidth: 2 })
+                selectedMode,
+                frameSettings,
+                onFrameSettingsChange,
+                tooltipSide
               }
             )
           ]
         }
-      ),
-      document.body
+      )
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref: toolbarRef,
+      "data-afterbefore": "true",
+      style: {
+        position: "fixed",
+        ...positionStyle,
+        zIndex: 2147483647,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        background: bg.base,
+        borderRadius: 999,
+        padding: 6,
+        boxShadow: shadow.toolbar,
+        ...fontBase,
+        userSelect: "none"
+      },
+      children: bottom ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        toolbarButtons,
+        cameraButton
+      ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        cameraButton,
+        toolbarButtons
+      ] })
+    }
+  );
+}
+function IconButton({
+  children,
+  active,
+  tooltip,
+  tooltipSide = "left",
+  onClick
+}) {
+  const [hovered, setHovered] = useState4(false);
+  const tooltipVisible = useTooltipDelay(hovered && !!tooltip);
+  const tooltipStyle = tooltipSide === "left" ? {
+    right: "calc(100% + 10px)",
+    top: "50%",
+    transform: "translateY(-50%)"
+  } : {
+    left: "calc(100% + 10px)",
+    top: "50%",
+    transform: "translateY(-50%)"
+  };
+  return /* @__PURE__ */ jsxs4("div", { style: { position: "relative" }, children: [
+    tooltip && tooltipVisible && /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          ...tooltipStyle,
+          background: bg.base,
+          border: `1px solid ${stroke.default}`,
+          borderRadius: 6,
+          padding: "0 8px",
+          height: 24,
+          display: "flex",
+          alignItems: "center",
+          color: fg.strong,
+          ...text.label.xs,
+          whiteSpace: "nowrap",
+          boxShadow: shadow.tooltip,
+          pointerEvents: "none"
+        },
+        children: tooltip
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        onClick,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: {
+          width: 32,
+          height: 32,
+          borderRadius: "50%",
+          border: "none",
+          background: active || hovered ? state.hoverStrong : "transparent",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+          padding: 0,
+          color: active || hovered ? fg.strong : fg.default,
+          transition: "background 0.12s ease, color 0.12s ease"
+        },
+        children
+      }
     )
   ] });
 }
+function DropItem2({
+  children,
+  onClick,
+  active,
+  accent: accent2
+}) {
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      onClick,
+      style: {
+        display: "block",
+        width: "100%",
+        padding: "7px 12px",
+        background: active ? state.active : "transparent",
+        border: "none",
+        color: accent2 ? accent.highlight : fg.strong,
+        textAlign: "left",
+        cursor: "pointer",
+        ...text.paragraph.sm,
+        fontFamily: "inherit"
+      },
+      children
+    }
+  );
+}
+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,
@@ -2182,20 +2566,20 @@ function FilterDropdown({
   onToggle,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs4("div", { children: [
+    /* @__PURE__ */ jsx4(
       "div",
       {
         style: {
           ...text.subheading.xxs,
-          color: fg.muted,
+          color: fg.sub,
           marginBottom: 3
         },
         children: label
       }
     ),
-    /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs4("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxs4(
         "button",
         {
           onClick: onToggle,
@@ -2216,7 +2600,7 @@ function FilterDropdown({
             fontFamily: "inherit"
           },
           children: [
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx4(
               "span",
               {
                 style: {
@@ -2227,11 +2611,11 @@ function FilterDropdown({
                 children: value || "\u2014"
               }
             ),
-            /* @__PURE__ */ jsx2(ChevronDown2, { size: 12, strokeWidth: 2 })
+            /* @__PURE__ */ jsx4(ChevronDown2, { size: 12, strokeWidth: 2 })
           ]
         }
       ),
-      isOpen && options.length > 0 && /* @__PURE__ */ jsx2(
+      isOpen && options.length > 0 && /* @__PURE__ */ jsx4(
         "div",
         {
           style: {
@@ -2248,7 +2632,7 @@ function FilterDropdown({
             boxShadow: shadow.dropdown,
             zIndex: 1
           },
-          children: options.map((opt) => /* @__PURE__ */ jsx2(
+          children: options.map((opt) => /* @__PURE__ */ jsx4(
             DropItem2,
             {
               active: opt === value,
@@ -2262,61 +2646,15 @@ function FilterDropdown({
     ] })
   ] });
 }
-function ActionButton({
-  children,
-  onClick,
-  disabled
-}) {
-  const [hovered, setHovered] = useState3(false);
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      onClick,
-      disabled,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 6,
-        width: "100%",
-        padding: "6px 8px",
-        border: "none",
-        background: hovered ? state.active : "transparent",
-        color: fg.default,
-        ...text.label.xs,
-        borderRadius: 6,
-        cursor: disabled ? "wait" : "pointer",
-        textAlign: "left",
-        fontFamily: "inherit",
-        transition: "background 0.1s ease"
-      },
-      children
-    }
-  );
-}
-function formatTimestamp(filename) {
-  const iso = filename.replace(/\.png$/, "").replace(/T(\d{2})-(\d{2})-(\d{2})-(\d+)Z$/, "T$1:$2:$3.$4Z");
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) return filename.replace(/\.png$/, "");
-  const now = /* @__PURE__ */ new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMin = Math.floor(diffMs / 6e4);
-  if (diffMin < 1) return "Just now";
-  if (diffMin < 60) return `${diffMin}m ago`;
-  const diffHr = Math.floor(diffMin / 60);
-  if (diffHr < 24) return `${diffHr}h ago`;
-  return date.toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
-}
 
 // src/overlay/ui/inspector.tsx
-import { useEffect as useEffect3, useRef as useRef3, useCallback as useCallback3, useState as useState4 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef3, useCallback as useCallback4, useState as useState5 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Inspector({ onSelect, onCancel }) {
-  const [highlight, setHighlight] = useState4(null);
+  const [highlight, setHighlight] = useState5(null);
   const hoveredEl = useRef3(null);
   const styleEl = useRef3(null);
-  useEffect3(() => {
+  useEffect4(() => {
     const style2 = document.createElement("style");
     style2.setAttribute("data-afterbefore", "true");
     style2.textContent = [
@@ -2331,7 +2669,7 @@ function Inspector({ onSelect, onCancel }) {
       style2.remove();
     };
   }, []);
-  const isOverlayElement = useCallback3((el) => {
+  const isOverlayElement = useCallback4((el) => {
     let node = el;
     while (node) {
       if (node instanceof HTMLElement && node.dataset.afterbefore) return true;
@@ -2339,7 +2677,7 @@ function Inspector({ onSelect, onCancel }) {
     }
     return false;
   }, []);
-  const handleMouseMove = useCallback3(
+  const handleMouseMove = useCallback4(
     (e) => {
       const el = document.elementFromPoint(e.clientX, e.clientY);
       if (!el || !(el instanceof HTMLElement) || isOverlayElement(el)) {
@@ -2358,7 +2696,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [isOverlayElement]
   );
-  const handleClick = useCallback3(
+  const handleClick = useCallback4(
     (e) => {
       if (isOverlayElement(e.target)) return;
       e.preventDefault();
@@ -2370,7 +2708,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [onSelect, isOverlayElement]
   );
-  const handleKeyDown = useCallback3(
+  const handleKeyDown = useCallback4(
     (e) => {
       if (e.key === "Escape") {
         onCancel();
@@ -2378,7 +2716,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [onCancel]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     document.addEventListener("mousemove", handleMouseMove, true);
     document.addEventListener("click", handleClick, true);
     document.addEventListener("keydown", handleKeyDown);
@@ -2388,7 +2726,7 @@ function Inspector({ onSelect, onCancel }) {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [handleMouseMove, handleClick, handleKeyDown]);
-  return /* @__PURE__ */ jsx3("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: highlight && /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: highlight && /* @__PURE__ */ jsx5(
     "div",
     {
       style: {
@@ -2408,7 +2746,7 @@ function Inspector({ onSelect, onCancel }) {
 }
 
 // src/overlay/index.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 async function saveCapture(mode, dataUrl) {
   try {
     const res = await fetch("/__afterbefore/save", {
@@ -2426,15 +2764,15 @@ async function saveCapture(mode, dataUrl) {
 }
 function AfterBefore() {
   const { state: state2, captureComplete, reset } = useOverlayState();
-  const [toolbarActive, setToolbarActive] = useState5(false);
-  const [inspectorActive, setInspectorActive] = useState5(false);
-  const [loading, setLoading] = useState5(false);
-  const [selectedMode, setSelectedMode] = useState5("component");
-  const [frameSettings, setFrameSettings] = useState5(DEFAULT_FRAME_SETTINGS);
-  useEffect4(() => {
+  const [toolbarActive, setToolbarActive] = useState6(false);
+  const [inspectorActive, setInspectorActive] = useState6(false);
+  const [loading, setLoading] = useState6(false);
+  const [selectedMode, setSelectedMode] = useState6("component");
+  const [frameSettings, setFrameSettings] = useState6(DEFAULT_FRAME_SETTINGS);
+  useEffect5(() => {
     injectInterFont();
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     try {
       const stored = localStorage.getItem("ab-frame-settings");
       if (stored) {
@@ -2449,7 +2787,7 @@ function AfterBefore() {
       setFrameSettings(DEFAULT_FRAME_SETTINGS);
     }
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (state2.phase === "ready") {
       const timer = setTimeout(() => {
         reset();
@@ -2457,7 +2795,7 @@ function AfterBefore() {
       return () => clearTimeout(timer);
     }
   }, [state2.phase, reset]);
-  const handleToggle = useCallback4(() => {
+  const handleToggle = useCallback5(() => {
     if (loading) return;
     if (state2.phase === "ready") {
       reset();
@@ -2475,7 +2813,7 @@ function AfterBefore() {
       }
     }
   }, [state2.phase, loading, toolbarActive, inspectorActive, selectedMode, reset]);
-  const performCapture = useCallback4(
+  const performCapture = useCallback5(
     async (mode, element) => {
       setLoading(true);
       try {
@@ -2494,7 +2832,7 @@ function AfterBefore() {
     },
     [captureComplete, frameSettings]
   );
-  const handleToolbarCapture = useCallback4(
+  const handleToolbarCapture = useCallback5(
     (mode) => {
       if (mode === "viewport") {
         setToolbarActive(false);
@@ -2508,11 +2846,11 @@ function AfterBefore() {
     },
     [performCapture]
   );
-  const handleToolbarCancel = useCallback4(() => {
+  const handleToolbarCancel = useCallback5(() => {
     setToolbarActive(false);
     setInspectorActive(false);
   }, []);
-  const handleComponentSelect = useCallback4(
+  const handleComponentSelect = useCallback5(
     (element) => {
       setInspectorActive(false);
       setToolbarActive(false);
@@ -2520,23 +2858,23 @@ function AfterBefore() {
     },
     [performCapture]
   );
-  const handleComponentCancel = useCallback4(() => {
+  const handleComponentCancel = useCallback5(() => {
     setInspectorActive(false);
     setToolbarActive(true);
   }, []);
-  const handleFrameSettingsChange = useCallback4((next) => {
+  const handleFrameSettingsChange = useCallback5((next) => {
     setFrameSettings(next);
     try {
       localStorage.setItem("ab-frame-settings", JSON.stringify(next));
     } catch {
     }
   }, []);
-  const handleModeChange = useCallback4((mode) => {
+  const handleModeChange = useCallback5((mode) => {
     setSelectedMode(mode);
     setInspectorActive(mode === "component");
   }, []);
-  return /* @__PURE__ */ jsxs3("div", { "data-afterbefore": "true", children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("div", { "data-afterbefore": "true", children: [
+    /* @__PURE__ */ jsx6(
       Toolbar,
       {
         expanded: toolbarActive,
@@ -2551,7 +2889,7 @@ function AfterBefore() {
         onFrameSettingsChange: handleFrameSettingsChange
       }
     ),
-    inspectorActive && /* @__PURE__ */ jsx4(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel })
+    inspectorActive && /* @__PURE__ */ jsx6(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel })
   ] });
 }
 export {