afterbefore 0.2.11 → 0.2.13

package/dist/overlay/index.js

@@ -1,28 +1,19 @@
 "use client";
 
 // src/overlay/index.tsx
-import { useState as useState8, useCallback as useCallback6, useRef as useRef5, useEffect as useEffect7 } from "react";
+import { useState as useState6, useCallback as useCallback5, useRef as useRef5, useEffect as useEffect5 } from "react";
 
 // src/overlay/state.ts
 import { useState, useCallback } from "react";
 var initialState = {
   phase: "idle",
-  before: null,
-  after: null
+  lastCapture: null
 };
 function useOverlayState() {
   const [state, setState] = useState(initialState);
   const captureComplete = useCallback(
     (result) => {
-      setState((prev) => {
-        if (prev.phase === "idle") {
-          return { ...prev, phase: "captured-before", before: result };
-        }
-        if (prev.phase === "captured-before") {
-          return { ...prev, phase: "ready", after: result };
-        }
-        return prev;
-      });
+      setState({ phase: "ready", lastCapture: result });
     },
     []
   );
@@ -34,6 +25,20 @@ function useOverlayState() {
 
 // src/overlay/capture.ts
 import { snapdom } from "@zumer/snapdom";
+var DEFAULT_FRAME_SETTINGS = {
+  enabled: false,
+  size: { w: 1920, h: 1080 },
+  bgType: "color",
+  bgColor: "#000000",
+  bgImage: null,
+  padding: 40
+};
+var FRAME_SIZE_PRESETS = [
+  { label: "1920 x 1080", w: 1920, h: 1080 },
+  { label: "1080 x 1080", w: 1080, h: 1080 },
+  { label: "1200 x 630", w: 1200, h: 630 },
+  { label: "1080 x 1920", w: 1080, h: 1920 }
+];
 var DEV_UI_SELECTORS = [
   // Afterbefore overlay
   "[data-afterbefore]",
@@ -55,18 +60,15 @@ async function toPngDataUrl(el, opts) {
   return img.src;
 }
 async function capture(options) {
-  const { mode, area, element } = options;
+  const { mode, element } = options;
   if (mode === "viewport") {
     return captureViewport();
   }
   if (mode === "fullpage") {
     return captureFullPage();
   }
-  if (mode === "area" && area) {
-    return captureArea(area);
-  }
   if (mode === "component" && element) {
-    return captureComponent(element, options.frameOnBlack);
+    return captureComponent(element, options.frameSettings);
   }
   throw new Error(`Invalid capture mode: ${mode}`);
 }
@@ -120,39 +122,18 @@ async function captureFullPage() {
     window.scrollTo(0, scrollY);
   }
 }
-async function captureArea(area) {
-  const fullDataUrl = await captureViewport();
-  const img = await loadImage(fullDataUrl);
-  const dpr = window.devicePixelRatio || 1;
-  const canvas = document.createElement("canvas");
-  canvas.width = area.width * dpr;
-  canvas.height = area.height * dpr;
-  const ctx = canvas.getContext("2d");
-  ctx.drawImage(
-    img,
-    area.x * dpr,
-    area.y * dpr,
-    area.width * dpr,
-    area.height * dpr,
-    0,
-    0,
-    area.width * dpr,
-    area.height * dpr
-  );
-  return canvas.toDataURL("image/png");
-}
-async function captureComponent(element, frameOnBlack) {
+async function captureComponent(element, frameSettings) {
   const dataUrl = await toPngDataUrl(element);
-  if (!frameOnBlack) {
+  if (!frameSettings?.enabled) {
     return dataUrl;
   }
   const img = await loadImage(dataUrl);
   const dpr = window.devicePixelRatio || 1;
-  const FRAME_W = 1920;
-  const FRAME_H = 1080;
+  const FRAME_W = frameSettings.size.w;
+  const FRAME_H = frameSettings.size.h;
+  const padding = frameSettings.padding;
   const compW = img.width / dpr;
   const compH = img.height / dpr;
-  const padding = 40;
   const maxW = FRAME_W - padding * 2;
   const maxH = FRAME_H - padding * 2;
   const scale = Math.min(1, maxW / compW, maxH / compH);
@@ -162,13 +143,31 @@ async function captureComponent(element, frameOnBlack) {
   canvas.width = FRAME_W * dpr;
   canvas.height = FRAME_H * dpr;
   const ctx = canvas.getContext("2d");
-  ctx.fillStyle = "#000000";
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  if (frameSettings.bgType === "image" && frameSettings.bgImage) {
+    try {
+      const bgImg = await loadImage(frameSettings.bgImage);
+      drawCover(ctx, bgImg, canvas.width, canvas.height);
+    } catch {
+      ctx.fillStyle = frameSettings.bgColor;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+  } else {
+    ctx.fillStyle = frameSettings.bgColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
   const dx = (canvas.width - drawW) / 2;
   const dy = (canvas.height - drawH) / 2;
   ctx.drawImage(img, dx, dy, drawW, drawH);
   return canvas.toDataURL("image/png");
 }
+function drawCover(ctx, img, cw, ch) {
+  const scale = Math.max(cw / img.width, ch / img.height);
+  const sw = cw / scale;
+  const sh = ch / scale;
+  const sx = (img.width - sw) / 2;
+  const sy = (img.height - sh) / 2;
+  ctx.drawImage(img, sx, sy, sw, sh, 0, 0, cw, ch);
+}
 function loadImage(src) {
   return new Promise((resolve, reject) => {
     const img = new Image();
@@ -182,23 +181,25 @@ function loadImage(src) {
 import { useRef, useCallback as useCallback2, useEffect, useState as useState2 } from "react";
 import { Camera, Check, LoaderCircle } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var ICON_SIZE = 40;
+var ICON_SIZE = 32;
 var EDGE_MARGIN = 24;
 function Icon({ phase, onClick, loading, onPositionChange }) {
   const ref = useRef(null);
-  const [pos, setPos] = useState2({ x: EDGE_MARGIN, y: -1 });
+  const [pos, setPos] = useState2({ x: -1, y: -1 });
   const dragState = useRef(null);
   useEffect(() => {
     setPos((prev) => {
-      if (prev.y === -1) {
-        const y = window.innerHeight - ICON_SIZE - EDGE_MARGIN;
-        return { x: prev.x, y };
+      if (prev.x === -1 || prev.y === -1) {
+        return {
+          x: window.innerWidth - ICON_SIZE - EDGE_MARGIN,
+          y: window.innerHeight - ICON_SIZE - EDGE_MARGIN
+        };
       }
       return prev;
     });
   }, []);
   useEffect(() => {
-    if (pos.y !== -1) {
+    if (pos.x !== -1 && pos.y !== -1) {
       onPositionChange?.({ x: pos.x, y: pos.y });
     }
   }, [pos, onPositionChange]);
@@ -248,7 +249,7 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
       window.removeEventListener("mouseup", handleMouseUp);
     };
   }, [onClick]);
-  if (pos.y === -1) return null;
+  if (pos.x === -1 || pos.y === -1) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -262,21 +263,24 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
         width: ICON_SIZE,
         height: ICON_SIZE,
         borderRadius: "50%",
-        background: "rgba(30, 30, 30, 0.85)",
+        background: "rgba(32, 32, 36, 0.92)",
+        backdropFilter: "blur(20px)",
+        WebkitBackdropFilter: "blur(20px)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         cursor: "grab",
         zIndex: 2147483647,
-        boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
         transition: "background 0.15s",
         userSelect: "none"
       },
       onMouseEnter: (e) => {
-        e.currentTarget.style.background = "rgba(30, 30, 30, 0.95)";
+        e.currentTarget.style.background = "rgba(32, 32, 36, 0.98)";
       },
       onMouseLeave: (e) => {
-        e.currentTarget.style.background = "rgba(30, 30, 30, 0.85)";
+        e.currentTarget.style.background = "rgba(32, 32, 36, 0.92)";
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -284,10 +288,6 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
           {
             dangerouslySetInnerHTML: {
               __html: `
-@keyframes ab-pulse {
-  0%, 100% { transform: scale(1); opacity: 1; }
-  50% { transform: scale(1.08); opacity: 0.85; }
-}
 @keyframes ab-spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
@@ -298,113 +298,20 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
         loading ? /* @__PURE__ */ jsx(
           LoaderCircle,
           {
-            size: 20,
+            size: 16,
             strokeWidth: 2,
             style: { animation: "ab-spin 0.8s linear infinite", color: "white" }
           }
-        ) : phase === "ready" ? /* @__PURE__ */ jsx(Check, { size: 20, strokeWidth: 2.6, color: "#4ade80" }) : /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              position: "relative",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              animation: phase === "captured-before" ? "ab-pulse 2s ease-in-out infinite" : "none"
-            },
-            children: [
-              /* @__PURE__ */ jsx(Camera, { size: 20, strokeWidth: 1.9, color: "white" }),
-              phase === "captured-before" && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: -6,
-                    right: -8,
-                    width: 14,
-                    height: 14,
-                    borderRadius: "50%",
-                    background: "#3b82f6",
-                    color: "white",
-                    fontSize: "9px",
-                    fontWeight: 700,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    lineHeight: 1,
-                    fontFamily: "system-ui, sans-serif"
-                  },
-                  children: "1"
-                }
-              )
-            ]
-          }
-        )
+        ) : phase === "ready" ? /* @__PURE__ */ jsx(Check, { size: 16, strokeWidth: 2.6, color: "#4ade80" }) : /* @__PURE__ */ jsx(Camera, { size: 16, strokeWidth: 1.9, color: "white" })
       ]
     }
   );
 }
 
 // src/overlay/ui/preview.tsx
-import { useEffect as useEffect2, useState as useState3 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var DEFAULT_ASPECT_RATIO = 16 / 9;
-function getAreaPreviewRect() {
-  const safeWidth = Math.max(320, window.innerWidth - 120);
-  const safeHeight = Math.max(180, window.innerHeight - 220);
-  const width = Math.min(window.innerWidth * 0.72, safeHeight * DEFAULT_ASPECT_RATIO, safeWidth);
-  const height = width / DEFAULT_ASPECT_RATIO;
-  return {
-    x: (window.innerWidth - width) / 2,
-    y: Math.max(40, (window.innerHeight - height) / 2 - 20),
-    width,
-    height
-  };
-}
 var CAMERA_CURSOR = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") 16 16, pointer`;
 function CapturePreview({ mode, onClick }) {
-  const [areaRect, setAreaRect] = useState3(null);
-  useEffect2(() => {
-    if (mode !== "area") {
-      return;
-    }
-    const syncRect = () => {
-      setAreaRect(getAreaPreviewRect());
-    };
-    syncRect();
-    window.addEventListener("resize", syncRect);
-    return () => window.removeEventListener("resize", syncRect);
-  }, [mode]);
-  if (mode === "area" && areaRect) {
-    return /* @__PURE__ */ jsx2(
-      "div",
-      {
-        "data-afterbefore": "true",
-        style: {
-          position: "fixed",
-          inset: 0,
-          zIndex: 2147483645,
-          pointerEvents: "none"
-        },
-        children: /* @__PURE__ */ jsx2(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: areaRect.x,
-              top: areaRect.y,
-              width: areaRect.width,
-              height: areaRect.height,
-              background: "rgba(125, 211, 252, 0.16)",
-              border: "1.5px solid rgba(125, 211, 252, 0.95)",
-              boxShadow: "0 0 0 1px rgba(191, 219, 254, 0.4), 0 0 32px rgba(56, 189, 248, 0.18)",
-              borderRadius: 14
-            }
-          }
-        )
-      }
-    );
-  }
   if (mode === "viewport" || mode === "fullpage") {
     return /* @__PURE__ */ jsx2(
       "div",
@@ -416,518 +323,47 @@ function CapturePreview({ mode, onClick }) {
           inset: 0,
           zIndex: 2147483645,
           cursor: CAMERA_CURSOR,
-          background: "rgba(125, 211, 252, 0.15)",
-          boxShadow: "inset 0 0 0 1.5px rgba(125, 211, 252, 0.9)"
-        },
-        children: /* @__PURE__ */ jsx2(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: 36,
-              left: "50%",
-              transform: "translateX(-50%)",
-              padding: "8px 14px",
-              borderRadius: 999,
-              background: "rgba(125, 211, 252, 0.16)",
-              border: "1px solid rgba(125, 211, 252, 0.42)",
-              color: "rgba(224, 242, 254, 0.96)",
-              fontSize: 12,
-              fontFamily: "system-ui, -apple-system, sans-serif",
-              boxShadow: "0 10px 30px rgba(14, 116, 144, 0.18)",
-              pointerEvents: "none"
-            },
-            children: mode === "fullpage" ? "Click to capture full page" : "Click to capture viewport"
-          }
-        )
+          background: "rgba(59, 130, 246, 0.15)",
+          boxShadow: "inset 0 0 0 2px rgba(59, 130, 246, 0.7)"
+        }
       }
     );
   }
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      "data-afterbefore": "true",
-      style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 2147483645,
-        pointerEvents: "none"
-      },
-      children: /* @__PURE__ */ jsx2(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            top: 36,
-            left: "50%",
-            transform: "translateX(-50%)",
-            padding: "8px 14px",
-            borderRadius: 999,
-            background: "rgba(125, 211, 252, 0.16)",
-            border: "1px solid rgba(125, 211, 252, 0.42)",
-            color: "rgba(224, 242, 254, 0.96)",
-            fontSize: 12,
-            fontFamily: "system-ui, -apple-system, sans-serif",
-            boxShadow: "0 10px 30px rgba(14, 116, 144, 0.18)"
-          },
-          children: "Click Capture, then hover an element to preview it"
-        }
-      )
-    }
-  );
+  return null;
 }
 
 // src/overlay/ui/toolbar.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
 import {
   ChevronDown,
-  Crop,
-  FileText,
+  Maximize,
   FolderOpen,
   Frame,
-  Magnet,
+  ImageIcon,
   Monitor,
   MousePointer2,
-  Save,
-  Settings2,
+  Palette,
+  Settings,
+  Trash2,
+  Upload,
   X
 } from "lucide-react";
-
-// src/overlay/ui/selector.tsx
-import React3, { useRef as useRef2, useCallback as useCallback3, useEffect as useEffect3, useMemo, useState as useState4 } from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var DEFAULT_AREA_ASPECT = "16:9";
-var AREA_ASPECT_RATIOS = [
-  { label: "Free", value: 0 },
-  { label: "16:9", value: 16 / 9 },
-  { label: "4:3", value: 4 / 3 },
-  { label: "1:1", value: 1 },
-  { label: "3:2", value: 3 / 2 },
-  { label: "21:9", value: 21 / 9 }
-];
-var HANDLE_R = 6;
-var HANDLE_HIT = 16;
-var MIN_SIZE = 20;
-var SNAP_THRESHOLD = 8;
-var CAMERA_CURSOR2 = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23e0f2fe' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3l1.5-2h7L17 7h3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") 12 12, crosshair`;
-function createInitialAreaRect() {
-  const safeWidth = Math.max(320, window.innerWidth - 96);
-  const safeHeight = Math.max(180, window.innerHeight - 220);
-  const w = Math.min(window.innerWidth * 0.72, safeHeight * (16 / 9), safeWidth);
-  const h = w / (16 / 9);
-  return {
-    x: (window.innerWidth - w) / 2,
-    y: Math.max(40, (window.innerHeight - h) / 2 - 20),
-    w,
-    h
-  };
-}
-function getAspectRatio(label) {
-  return AREA_ASPECT_RATIOS.find((item) => item.label === label)?.value ?? 0;
-}
-function Selector({
-  rect,
-  aspect,
-  magnetEnabled,
-  onRectChange,
-  onSelect,
-  onCancel
-}) {
-  const [snappedX, setSnappedX] = useState4(false);
-  const [cursor, setCursor] = useState4("crosshair");
-  const mode = useRef2("none");
-  const start = useRef2({ x: 0, y: 0 });
-  const snapRef = useRef2({ x: 0, y: 0, w: 0, h: 0 });
-  const corner = useRef2("br");
-  const ratio = useMemo(() => getAspectRatio(aspect), [aspect]);
-  const applySnap = useCallback3(
-    (nextRect) => {
-      if (!magnetEnabled) {
-        setSnappedX(false);
-        return nextRect;
-      }
-      const centerX = nextRect.x + nextRect.w / 2;
-      const viewportCenterX = window.innerWidth / 2;
-      if (Math.abs(centerX - viewportCenterX) < SNAP_THRESHOLD) {
-        setSnappedX(true);
-        return { ...nextRect, x: viewportCenterX - nextRect.w / 2 };
-      }
-      setSnappedX(false);
-      return nextRect;
-    },
-    [magnetEnabled]
-  );
-  useEffect3(() => {
-    const onKey = (e) => {
-      if (e.key === "Escape") {
-        onCancel();
-      }
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [onCancel]);
-  const hitCorner = useCallback3((mx, my, currentRect) => {
-    const corners = [
-      ["tl", currentRect.x, currentRect.y],
-      ["tr", currentRect.x + currentRect.w, currentRect.y],
-      ["bl", currentRect.x, currentRect.y + currentRect.h],
-      ["br", currentRect.x + currentRect.w, currentRect.y + currentRect.h]
-    ];
-    for (const [hitCorner2, cx, cy] of corners) {
-      if (Math.abs(mx - cx) <= HANDLE_HIT && Math.abs(my - cy) <= HANDLE_HIT) {
-        return hitCorner2;
-      }
-    }
-    return null;
-  }, []);
-  const hitInside = useCallback3(
-    (mx, my, currentRect) => mx >= currentRect.x && mx <= currentRect.x + currentRect.w && my >= currentRect.y && my <= currentRect.y + currentRect.h,
-    []
-  );
-  const onDown = useCallback3(
-    (e) => {
-      e.preventDefault();
-      const mx = e.clientX;
-      const my = e.clientY;
-      if (rect) {
-        const activeCorner = hitCorner(mx, my, rect);
-        if (activeCorner) {
-          mode.current = "resizing";
-          corner.current = activeCorner;
-          start.current = { x: mx, y: my };
-          snapRef.current = { ...rect };
-          return;
-        }
-        if (hitInside(mx, my, rect)) {
-          mode.current = "moving";
-          start.current = { x: mx, y: my };
-          snapRef.current = { ...rect };
-          return;
-        }
-      }
-      mode.current = "drawing";
-      start.current = { x: mx, y: my };
-      onRectChange({ x: mx, y: my, w: 0, h: 0 });
-    },
-    [hitCorner, hitInside, onRectChange, rect]
-  );
-  const onMove = useCallback3(
-    (e) => {
-      const mx = e.clientX;
-      const my = e.clientY;
-      if (mode.current === "none") {
-        if (rect) {
-          const activeCorner = hitCorner(mx, my, rect);
-          if (activeCorner) {
-            setCursor(
-              activeCorner === "tl" || activeCorner === "br" ? "nwse-resize" : "nesw-resize"
-            );
-          } else if (hitInside(mx, my, rect)) {
-            setCursor(CAMERA_CURSOR2);
-          } else {
-            setCursor("crosshair");
-          }
-        } else {
-          setCursor("crosshair");
-        }
-        return;
-      }
-      if (mode.current === "drawing") {
-        const sx = start.current.x;
-        const sy = start.current.y;
-        let x = Math.min(sx, mx);
-        let y = Math.min(sy, my);
-        let w = Math.abs(mx - sx);
-        let h = Math.abs(my - sy);
-        if (ratio > 0) {
-          h = w / ratio;
-          if (my < sy) {
-            y = sy - h;
-          }
-        }
-        onRectChange(applySnap({ x, y, w, h }));
-        return;
-      }
-      if (mode.current === "moving") {
-        const dx = mx - start.current.x;
-        const dy = my - start.current.y;
-        onRectChange(
-          applySnap({
-            ...snapRef.current,
-            x: snapRef.current.x + dx,
-            y: snapRef.current.y + dy
-          })
-        );
-        return;
-      }
-      if (mode.current === "resizing") {
-        const original = snapRef.current;
-        const nextRect = { ...original };
-        if (corner.current === "br") {
-          nextRect.w = Math.max(MIN_SIZE, mx - original.x);
-          nextRect.h = ratio > 0 ? nextRect.w / ratio : Math.max(MIN_SIZE, my - original.y);
-        } else if (corner.current === "bl") {
-          nextRect.w = Math.max(MIN_SIZE, original.x + original.w - mx);
-          nextRect.x = original.x + original.w - nextRect.w;
-          nextRect.h = ratio > 0 ? nextRect.w / ratio : Math.max(MIN_SIZE, my - original.y);
-        } else if (corner.current === "tr") {
-          nextRect.w = Math.max(MIN_SIZE, mx - original.x);
-          nextRect.h = ratio > 0 ? nextRect.w / ratio : Math.max(MIN_SIZE, original.y + original.h - my);
-          nextRect.y = original.y + original.h - nextRect.h;
-        } else {
-          nextRect.w = Math.max(MIN_SIZE, original.x + original.w - mx);
-          nextRect.h = ratio > 0 ? nextRect.w / ratio : Math.max(MIN_SIZE, original.y + original.h - my);
-          nextRect.x = original.x + original.w - nextRect.w;
-          nextRect.y = original.y + original.h - nextRect.h;
-        }
-        onRectChange(applySnap(nextRect));
-      }
-    },
-    [applySnap, hitCorner, hitInside, onRectChange, ratio, rect]
-  );
-  const onUp = useCallback3(
-    (e) => {
-      const previousMode = mode.current;
-      if (previousMode === "drawing" && rect) {
-        if (rect.w < MIN_SIZE || rect.h < MIN_SIZE) {
-          onRectChange(null);
-        }
-      }
-      if (previousMode === "moving" && rect) {
-        const dx = Math.abs(e.clientX - start.current.x);
-        const dy = Math.abs(e.clientY - start.current.y);
-        if (dx < 3 && dy < 3) {
-          onSelect({
-            x: Math.round(rect.x),
-            y: Math.round(rect.y),
-            width: Math.round(rect.w),
-            height: Math.round(rect.h)
-          });
-        }
-      }
-      mode.current = "none";
-    },
-    [onRectChange, onSelect, rect]
-  );
-  const hasRect = rect && rect.w > 0 && rect.h > 0;
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      "data-afterbefore": "true",
-      onMouseDown: onDown,
-      onMouseMove: onMove,
-      onMouseUp: onUp,
-      style: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 2147483646,
-        cursor
-      },
-      children: [
-        snappedX && /* @__PURE__ */ jsx3(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "50%",
-              top: 0,
-              bottom: 0,
-              width: 0,
-              borderLeft: "1px solid rgba(56, 189, 248, 0.55)",
-              pointerEvents: "none",
-              zIndex: 2
-            }
-          }
-        ),
-        hasRect ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx3(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: 0,
-                top: 0,
-                width: "100%",
-                height: rect.y,
-                background: "rgba(0, 0, 0, 0.5)",
-                pointerEvents: "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx3(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: 0,
-                top: rect.y,
-                width: rect.x,
-                height: rect.h,
-                background: "rgba(0, 0, 0, 0.5)",
-                pointerEvents: "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx3(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: rect.x + rect.w,
-                top: rect.y,
-                width: `calc(100% - ${rect.x + rect.w}px)`,
-                height: rect.h,
-                background: "rgba(0, 0, 0, 0.5)",
-                pointerEvents: "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx3(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: 0,
-                top: rect.y + rect.h,
-                width: "100%",
-                height: `calc(100% - ${rect.y + rect.h}px)`,
-                background: "rgba(0, 0, 0, 0.5)",
-                pointerEvents: "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx3(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: rect.x,
-                top: rect.y,
-                width: rect.w,
-                height: rect.h,
-                background: "rgba(125, 211, 252, 0.08)",
-                pointerEvents: "none",
-                borderRadius: 12
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx3(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: rect.x,
-                top: rect.y,
-                width: rect.w,
-                height: rect.h,
-                border: "1.5px dashed rgba(255, 255, 255, 0.45)",
-                borderRadius: 12,
-                pointerEvents: "none",
-                boxShadow: "0 0 0 1px rgba(125, 211, 252, 0.38)"
-              }
-            }
-          ),
-          [1, 2].map((line) => /* @__PURE__ */ jsxs2(React3.Fragment, { children: [
-            /* @__PURE__ */ jsx3(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  left: rect.x + rect.w * line / 3,
-                  top: rect.y,
-                  width: 0,
-                  height: rect.h,
-                  borderLeft: "1px dashed rgba(255, 255, 255, 0.18)",
-                  pointerEvents: "none"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx3(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  left: rect.x,
-                  top: rect.y + rect.h * line / 3,
-                  width: rect.w,
-                  height: 0,
-                  borderTop: "1px dashed rgba(255, 255, 255, 0.18)",
-                  pointerEvents: "none"
-                }
-              }
-            )
-          ] }, line)),
-          [
-            [rect.x, rect.y],
-            [rect.x + rect.w, rect.y],
-            [rect.x, rect.y + rect.h],
-            [rect.x + rect.w, rect.y + rect.h]
-          ].map(([cx, cy], index) => /* @__PURE__ */ jsx3(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: cx - HANDLE_R,
-                top: cy - HANDLE_R,
-                width: HANDLE_R * 2,
-                height: HANDLE_R * 2,
-                borderRadius: "50%",
-                border: "2px solid rgba(255, 255, 255, 0.8)",
-                background: "rgba(0, 0, 0, 0.25)",
-                pointerEvents: "none"
-              }
-            },
-            index
-          ))
-        ] }) : /* @__PURE__ */ jsx3(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              background: "rgba(0, 0, 0, 0.5)",
-              pointerEvents: "none"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/overlay/ui/toolbar.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MODES = [
   { mode: "component", label: "Capture Component", icon: MousePointer2 },
-  { mode: "area", label: "Capture Selected Area", icon: Crop },
   { mode: "viewport", label: "Capture Viewport", icon: Monitor },
-  { mode: "fullpage", label: "Capture Full Page", icon: FileText }
+  { mode: "fullpage", label: "Capture Full Page", icon: Maximize }
 ];
 function Toolbar({
   selectedMode,
   onModeChange,
   onCapture,
   onCancel,
-  magnetEnabled,
-  onMagnetChange,
-  areaSelectionActive,
-  areaRect,
-  areaAspect,
-  areaPresets,
-  onAreaSizeChange,
-  onAreaPositionChange,
-  onAreaAspectChange,
-  onAreaSavePreset,
-  onAreaLoadPreset,
-  frameOnBlackEnabled,
-  onFrameOnBlackChange
+  frameSettings,
+  onFrameSettingsChange
 }) {
-  const [settingsOpen, setSettingsOpen] = useState5(false);
-  const [aspectOpen, setAspectOpen] = useState5(false);
-  const [savedOpen, setSavedOpen] = useState5(false);
-  const showAreaControls = selectedMode === "area" && areaSelectionActive && areaRect !== null;
-  const activeAreaRect = showAreaControls ? areaRect : null;
-  useEffect4(() => {
+  const [settingsOpen, setSettingsOpen] = useState3(false);
+  useEffect2(() => {
     const onKey = (e) => {
       if (e.target?.tagName === "INPUT") {
         if (e.key === "Escape") {
@@ -940,14 +376,6 @@ function Toolbar({
           setSettingsOpen(false);
           return;
         }
-        if (aspectOpen) {
-          setAspectOpen(false);
-          return;
-        }
-        if (savedOpen) {
-          setSavedOpen(false);
-          return;
-        }
         onCancel();
       } else if (e.key === "Enter") {
         onCapture(selectedMode);
@@ -955,8 +383,8 @@ function Toolbar({
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [aspectOpen, onCancel, onCapture, savedOpen, selectedMode, settingsOpen]);
-  return /* @__PURE__ */ jsxs3(
+  }, [onCancel, onCapture, selectedMode, settingsOpen]);
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       "data-afterbefore": "true",
@@ -976,156 +404,64 @@ function Toolbar({
         backdropFilter: "blur(20px)",
         WebkitBackdropFilter: "blur(20px)",
         border: "1px solid rgba(255, 255, 255, 0.1)",
-        borderRadius: 18,
-        padding: "6px 10px",
+        borderRadius: 999,
+        padding: 6,
         boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
         fontFamily: "system-ui, -apple-system, sans-serif"
       },
-      children: [
-        /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 0 }, children: [
-          /* @__PURE__ */ jsx4(CloseButton, { onClick: onCancel }),
-          /* @__PURE__ */ jsx4("div", { style: { display: "flex", alignItems: "center", gap: 2, padding: "0 4px" }, children: MODES.map(({ mode, label, icon: Icon2 }) => /* @__PURE__ */ jsx4(
-            ModeButton,
-            {
-              label,
-              selected: selectedMode === mode,
-              onClick: () => {
-                setSettingsOpen(false);
-                onModeChange(mode);
-              },
-              children: /* @__PURE__ */ jsx4(Icon2, { size: 18, strokeWidth: 1.7 })
+      children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 0 }, children: [
+        /* @__PURE__ */ jsx3(CloseButton, { onClick: onCancel }),
+        /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "center", gap: 2, padding: "0 4px" }, children: MODES.map(({ mode, label, icon: Icon2 }) => /* @__PURE__ */ jsx3(
+          ModeButton,
+          {
+            label,
+            selected: selectedMode === mode,
+            onClick: () => {
+              setSettingsOpen(false);
+              onModeChange(mode);
             },
-            mode
-          )) }),
-          /* @__PURE__ */ jsx4(Separator, {}),
-          /* @__PURE__ */ jsx4(
-            SettingsButton,
-            {
-              open: settingsOpen,
-              onClick: () => {
-                setAspectOpen(false);
-                setSavedOpen(false);
-                setSettingsOpen((prev) => !prev);
-              },
-              selectedMode,
-              magnetEnabled,
-              onMagnetChange,
-              frameOnBlackEnabled,
-              onFrameOnBlackChange
-            }
-          )
-        ] }),
-        activeAreaRect && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-          /* @__PURE__ */ jsx4(Separator, { vertical: false }),
-          /* @__PURE__ */ jsxs3(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                flexWrap: "wrap",
-                justifyContent: "center"
-              },
-              children: [
-                /* @__PURE__ */ jsxs3(ControlGroup, { label: "Size", children: [
-                  /* @__PURE__ */ jsx4(NumInput, { value: Math.round(activeAreaRect.w), onChange: (value) => onAreaSizeChange("w", value) }),
-                  /* @__PURE__ */ jsx4(StaticText, { children: "x" }),
-                  /* @__PURE__ */ jsx4(NumInput, { value: Math.round(activeAreaRect.h), onChange: (value) => onAreaSizeChange("h", value) })
-                ] }),
-                /* @__PURE__ */ jsxs3(ControlGroup, { label: "Position", children: [
-                  /* @__PURE__ */ jsx4(NumInput, { value: Math.round(activeAreaRect.x), onChange: (value) => onAreaPositionChange("x", value) }),
-                  /* @__PURE__ */ jsx4(StaticText, { children: "x" }),
-                  /* @__PURE__ */ jsx4(NumInput, { value: Math.round(activeAreaRect.y), onChange: (value) => onAreaPositionChange("y", value) })
-                ] }),
-                /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
-                  /* @__PURE__ */ jsxs3(
-                    DropButton,
-                    {
-                      active: areaAspect !== "Free",
-                      onClick: () => {
-                        setSavedOpen(false);
-                        setAspectOpen((prev) => !prev);
-                      },
-                      children: [
-                        areaAspect,
-                        /* @__PURE__ */ jsx4(ChevronDown, { size: 14, strokeWidth: 1.8 })
-                      ]
-                    }
-                  ),
-                  aspectOpen && /* @__PURE__ */ jsx4(DropMenu, { children: AREA_ASPECT_RATIOS.map((item) => /* @__PURE__ */ jsx4(
-                    DropItem,
-                    {
-                      active: item.label === areaAspect,
-                      onClick: () => {
-                        onAreaAspectChange(item.label);
-                        setAspectOpen(false);
-                      },
-                      children: item.label
-                    },
-                    item.label
-                  )) })
-                ] }),
-                /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
-                  /* @__PURE__ */ jsxs3(
-                    DropButton,
-                    {
-                      onClick: () => {
-                        setAspectOpen(false);
-                        setSavedOpen((prev) => !prev);
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx4(Save, { size: 14, strokeWidth: 1.8 }),
-                        "Saved",
-                        /* @__PURE__ */ jsx4(ChevronDown, { size: 14, strokeWidth: 1.8 })
-                      ]
-                    }
-                  ),
-                  savedOpen && /* @__PURE__ */ jsxs3(DropMenu, { children: [
-                    /* @__PURE__ */ jsx4(DropItem, { accent: true, onClick: onAreaSavePreset, children: "Save current" }),
-                    areaPresets.length > 0 && /* @__PURE__ */ jsx4(MenuDivider, {}),
-                    areaPresets.map((preset) => /* @__PURE__ */ jsx4(
-                      DropItem,
-                      {
-                        onClick: () => {
-                          onAreaLoadPreset(preset);
-                          setSavedOpen(false);
-                        },
-                        children: preset.label
-                      },
-                      preset.label
-                    )),
-                    areaPresets.length === 0 && /* @__PURE__ */ jsx4(
-                      "div",
-                      {
-                        style: {
-                          padding: "6px 12px",
-                          color: "rgba(255,255,255,0.3)",
-                          fontSize: 12
-                        },
-                        children: "No saved areas"
-                      }
-                    )
-                  ] })
-                ] })
-              ]
-            }
-          )
-        ] })
-      ]
+            children: /* @__PURE__ */ jsx3(Icon2, { size: 16, strokeWidth: 1.7 })
+          },
+          mode
+        )) }),
+        /* @__PURE__ */ jsx3(Separator, {}),
+        /* @__PURE__ */ jsx3(
+          SettingsButton,
+          {
+            open: settingsOpen,
+            onClick: () => setSettingsOpen((prev) => !prev),
+            selectedMode,
+            frameSettings,
+            onFrameSettingsChange
+          }
+        )
+      ] })
     }
   );
 }
 function CloseButton({ onClick }) {
-  const [hovered, setHovered] = useState5(false);
-  return /* @__PURE__ */ jsx4(
+  const [hovered, setHovered] = useState3(false);
+  return /* @__PURE__ */ jsx3(
     "button",
     {
       onClick,
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
-      style: circleButtonStyle(hovered, true),
-      children: /* @__PURE__ */ jsx4(X, { size: 18, strokeWidth: 1.9 })
+      style: {
+        width: 32,
+        height: 32,
+        borderRadius: 10,
+        border: "none",
+        background: hovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        padding: 0,
+        color: hovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)",
+        transition: "background 0.12s ease, color 0.12s ease"
+      },
+      children: /* @__PURE__ */ jsx3(X, { size: 16, strokeWidth: 1.7 })
     }
   );
 }
@@ -1135,9 +471,9 @@ function ModeButton({
   selected,
   onClick
 }) {
-  const [hovered, setHovered] = useState5(false);
-  return /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
-    hovered && /* @__PURE__ */ jsx4(
+  const [hovered, setHovered] = useState3(false);
+  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+    hovered && /* @__PURE__ */ jsx3(
       "div",
       {
         style: {
@@ -1160,24 +496,24 @@ function ModeButton({
         children: label
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx3(
       "button",
       {
         onClick,
         onMouseEnter: () => setHovered(true),
         onMouseLeave: () => setHovered(false),
         style: {
-          width: 42,
-          height: 40,
-          borderRadius: 12,
+          width: 32,
+          height: 32,
+          borderRadius: 10,
           border: "none",
-          background: selected ? "rgba(255, 255, 255, 0.15)" : hovered ? "rgba(255, 255, 255, 0.08)" : "transparent",
+          background: selected || hovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
           cursor: "pointer",
           padding: 0,
-          color: selected ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)",
+          color: selected || hovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)",
           transition: "background 0.12s ease, color 0.12s ease"
         },
         children
@@ -1185,126 +521,465 @@ function ModeButton({
     )
   ] });
 }
-function SettingsButton({
-  open,
-  onClick,
-  selectedMode,
-  magnetEnabled,
-  onMagnetChange,
-  frameOnBlackEnabled,
-  onFrameOnBlackChange
+function SettingsButton({
+  open,
+  onClick,
+  selectedMode,
+  frameSettings,
+  onFrameSettingsChange
+}) {
+  const [hovered, setHovered] = useState3(false);
+  const [saveDir, setSaveDir] = useState3(null);
+  const [picking, setPicking] = useState3(false);
+  useEffect2(() => {
+    if (!open) return;
+    fetch("/__afterbefore/config").then((r) => r.json()).then((data) => setSaveDir(data.saveDir)).catch(() => {
+    });
+  }, [open]);
+  const handlePickFolder = async () => {
+    setPicking(true);
+    try {
+      const res = await fetch("/__afterbefore/pick-folder", { method: "POST" });
+      const data = await res.json();
+      if (data.folder) {
+        await fetch("/__afterbefore/config", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ saveDir: data.folder })
+        });
+        setSaveDir(data.folder);
+      }
+    } catch {
+    } finally {
+      setPicking(false);
+    }
+  };
+  const shortDir = saveDir ? saveDir.replace(/^\/Users\/[^/]+/, "~") : "~/Desktop";
+  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        onClick,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: {
+          width: 32,
+          height: 32,
+          borderRadius: "50%",
+          border: "none",
+          background: open || hovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+          padding: 0,
+          color: open || hovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)",
+          transition: "background 0.12s ease, color 0.12s ease"
+        },
+        children: /* @__PURE__ */ jsx3(Settings, { size: 16, strokeWidth: 1.7 })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: "50%",
+          bottom: "calc(100% + 12px)",
+          transform: "translateX(-50%)",
+          minWidth: 260,
+          padding: "10px 12px",
+          borderRadius: 12,
+          background: "rgba(32, 32, 36, 0.96)",
+          border: "1px solid rgba(255, 255, 255, 0.1)",
+          boxShadow: "0 14px 36px rgba(0, 0, 0, 0.32)",
+          backdropFilter: "blur(20px)",
+          WebkitBackdropFilter: "blur(20px)"
+        },
+        children: [
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                fontSize: 11,
+                color: "rgba(255, 255, 255, 0.46)",
+                letterSpacing: "0.03em",
+                textTransform: "uppercase",
+                marginBottom: 10
+              },
+              children: "Settings"
+            }
+          ),
+          selectedMode === "component" && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx3(
+              ToggleRow,
+              {
+                icon: /* @__PURE__ */ jsx3(Frame, { size: 15, strokeWidth: 1.8 }),
+                label: "Frame",
+                enabled: frameSettings.enabled,
+                onChange: () => onFrameSettingsChange({ ...frameSettings, enabled: !frameSettings.enabled })
+              }
+            ),
+            frameSettings.enabled && /* @__PURE__ */ jsxs2("div", { style: { marginTop: 8, display: "flex", flexDirection: "column", gap: 10 }, children: [
+              /* @__PURE__ */ jsx3(
+                FrameSizeControl,
+                {
+                  size: frameSettings.size,
+                  onChange: (size) => onFrameSettingsChange({ ...frameSettings, size })
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                FrameBackgroundControl,
+                {
+                  bgType: frameSettings.bgType,
+                  bgColor: frameSettings.bgColor,
+                  bgImage: frameSettings.bgImage,
+                  frameSize: frameSettings.size,
+                  onChange: (updates) => onFrameSettingsChange({ ...frameSettings, ...updates })
+                }
+              )
+            ] })
+          ] }),
+          selectedMode === "component" && /* @__PURE__ */ jsx3("div", { style: { height: 1, background: "rgba(255,255,255,0.08)", margin: "8px 0" } }),
+          /* @__PURE__ */ jsx3(
+            SaveLocationRow,
+            {
+              dir: shortDir,
+              picking,
+              onPick: handlePickFolder
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function FrameSizeControl({
+  size,
+  onChange
+}) {
+  const [sizeOpen, setSizeOpen] = useState3(false);
+  const currentPreset = FRAME_SIZE_PRESETS.find((p) => p.w === size.w && p.h === size.h);
+  const isCustom = !currentPreset;
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsx3(SettingsLabel, { children: "Size" }),
+    /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "center", gap: 6, marginTop: 4 }, children: /* @__PURE__ */ jsxs2("div", { style: { position: "relative", flex: 1 }, children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          onClick: () => setSizeOpen((prev) => !prev),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 6,
+            width: "100%",
+            height: 30,
+            padding: "0 8px",
+            borderRadius: 7,
+            border: "1px solid rgba(255,255,255,0.1)",
+            background: "rgba(255,255,255,0.07)",
+            color: "rgba(255,255,255,0.88)",
+            cursor: "pointer",
+            fontSize: 12,
+            fontFamily: "inherit"
+          },
+          children: [
+            currentPreset ? currentPreset.label : "Custom",
+            /* @__PURE__ */ jsx3(ChevronDown, { size: 12, strokeWidth: 2 })
+          ]
+        }
+      ),
+      sizeOpen && /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            bottom: "calc(100% + 4px)",
+            left: 0,
+            right: 0,
+            background: "rgba(32, 32, 36, 0.96)",
+            border: "1px solid rgba(255, 255, 255, 0.1)",
+            borderRadius: 8,
+            padding: "4px 0",
+            boxShadow: "0 10px 30px rgba(0, 0, 0, 0.3)",
+            backdropFilter: "blur(20px)",
+            WebkitBackdropFilter: "blur(20px)",
+            zIndex: 1
+          },
+          children: [
+            FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsx3(
+              DropItem,
+              {
+                active: !isCustom && preset.w === size.w && preset.h === size.h,
+                onClick: () => {
+                  onChange({ w: preset.w, h: preset.h });
+                  setSizeOpen(false);
+                },
+                children: preset.label
+              },
+              preset.label
+            )),
+            /* @__PURE__ */ jsx3(DropItem, { active: isCustom, onClick: () => setSizeOpen(false), children: "Custom" })
+          ]
+        }
+      )
+    ] }) }),
+    isCustom && /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 4, marginTop: 6 }, children: [
+      /* @__PURE__ */ jsx3(
+        NumInput,
+        {
+          value: size.w,
+          onChange: (v) => {
+            const n = parseInt(v, 10);
+            if (!Number.isNaN(n) && n > 0) onChange({ ...size, w: n });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx3(StaticText, { children: "x" }),
+      /* @__PURE__ */ jsx3(
+        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
+}) {
+  const fileInputRef = useRef2(null);
+  const handleFileSelect = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    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 });
+        });
+      } else {
+        onChange({ bgType: "image", bgImage: dataUrl });
+      }
+    };
+    reader.readAsDataURL(file);
+    e.target.value = "";
+  };
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsx3(SettingsLabel, { children: "Background" }),
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 2, marginTop: 4 }, children: [
+      /* @__PURE__ */ jsxs2(
+        SegmentButton,
+        {
+          active: bgType === "color",
+          onClick: () => onChange({ bgType: "color" }),
+          style: { borderRadius: "6px 0 0 6px" },
+          children: [
+            /* @__PURE__ */ jsx3(Palette, { size: 12, strokeWidth: 2 }),
+            "Color"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs2(
+        SegmentButton,
+        {
+          active: bgType === "image",
+          onClick: () => onChange({ bgType: "image" }),
+          style: { borderRadius: "0 6px 6px 0" },
+          children: [
+            /* @__PURE__ */ jsx3(ImageIcon, { size: 12, strokeWidth: 2 }),
+            "Image"
+          ]
+        }
+      )
+    ] }),
+    bgType === "color" && /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 6 }, children: [
+      /* @__PURE__ */ jsx3(ColorSwatch, { color: bgColor, onChange: (c) => onChange({ bgColor: c }) }),
+      /* @__PURE__ */ jsx3("span", { style: { fontSize: 12, color: "rgba(255,255,255,0.6)" }, children: bgColor })
+    ] }),
+    bgType === "image" && /* @__PURE__ */ jsxs2("div", { style: { marginTop: 6 }, children: [
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: "image/*",
+          onChange: handleFileSelect,
+          style: { display: "none" }
+        }
+      ),
+      bgImage ? /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx3(
+          "img",
+          {
+            src: bgImage,
+            alt: "",
+            style: {
+              width: 48,
+              height: 28,
+              borderRadius: 4,
+              objectFit: "cover",
+              border: "1px solid rgba(255,255,255,0.12)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs2(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
+          /* @__PURE__ */ jsx3(Upload, { size: 11, strokeWidth: 2 }),
+          "Replace"
+        ] }),
+        /* @__PURE__ */ jsx3(SmallButton, { onClick: () => onChange({ bgImage: null }), children: /* @__PURE__ */ jsx3(Trash2, { size: 11, strokeWidth: 2 }) })
+      ] }) : /* @__PURE__ */ jsxs2(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
+        /* @__PURE__ */ jsx3(Upload, { size: 11, strokeWidth: 2 }),
+        "Upload image"
+      ] })
+    ] })
+  ] });
+}
+function SettingsLabel({ children }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      style: {
+        fontSize: 11,
+        color: "rgba(255, 255, 255, 0.42)",
+        letterSpacing: "0.02em"
+      },
+      children
+    }
+  );
+}
+function SegmentButton({
+  children,
+  active,
+  onClick,
+  style
+}) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        height: 26,
+        padding: "0 10px",
+        border: "1px solid rgba(255,255,255,0.1)",
+        background: active ? "rgba(255,255,255,0.14)" : "rgba(255,255,255,0.04)",
+        color: active ? "rgba(255,255,255,0.92)" : "rgba(255,255,255,0.5)",
+        cursor: "pointer",
+        fontSize: 11,
+        fontFamily: "inherit",
+        transition: "background 0.12s ease, color 0.12s ease",
+        ...style
+      },
+      children
+    }
+  );
+}
+function ColorSwatch({
+  color,
+  onChange
 }) {
-  const [hovered, setHovered] = useState5(false);
-  const [saveDir, setSaveDir] = useState5(null);
-  const [picking, setPicking] = useState5(false);
-  useEffect4(() => {
-    if (!open) return;
-    fetch("/__afterbefore/config").then((r) => r.json()).then((data) => setSaveDir(data.saveDir)).catch(() => {
-    });
-  }, [open]);
-  const handlePickFolder = async () => {
-    setPicking(true);
-    try {
-      const res = await fetch("/__afterbefore/pick-folder", { method: "POST" });
-      const data = await res.json();
-      if (data.folder) {
-        await fetch("/__afterbefore/config", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ saveDir: data.folder })
-        });
-        setSaveDir(data.folder);
-      }
-    } catch {
-    } finally {
-      setPicking(false);
-    }
-  };
-  const shortDir = saveDir ? saveDir.replace(/^\/Users\/[^/]+/, "~") : "~/Desktop";
-  return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", marginRight: 6 }, children: [
-    /* @__PURE__ */ jsx4(
+  const inputRef = useRef2(null);
+  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx3(
       "button",
       {
-        onClick,
-        onMouseEnter: () => setHovered(true),
-        onMouseLeave: () => setHovered(false),
+        onClick: () => inputRef.current?.click(),
         style: {
-          ...circleButtonStyle(open || hovered, false),
-          color: "rgba(255, 255, 255, 0.58)"
-        },
-        children: /* @__PURE__ */ jsx4(Settings2, { size: 18, strokeWidth: 1.7 })
+          width: 24,
+          height: 24,
+          borderRadius: 6,
+          border: "1px solid rgba(255,255,255,0.18)",
+          background: color,
+          cursor: "pointer",
+          padding: 0
+        }
       }
     ),
-    open && /* @__PURE__ */ jsxs3(
-      "div",
+    /* @__PURE__ */ jsx3(
+      "input",
       {
+        ref: inputRef,
+        type: "color",
+        value: color,
+        onChange: (e) => onChange(e.target.value),
         style: {
           position: "absolute",
-          left: "50%",
-          bottom: "calc(100% + 12px)",
-          transform: "translateX(-50%)",
-          minWidth: 210,
-          padding: "10px 12px",
-          borderRadius: 12,
-          background: "rgba(32, 32, 36, 0.96)",
-          border: "1px solid rgba(255, 255, 255, 0.1)",
-          boxShadow: "0 14px 36px rgba(0, 0, 0, 0.32)",
-          backdropFilter: "blur(20px)",
-          WebkitBackdropFilter: "blur(20px)"
-        },
-        children: [
-          /* @__PURE__ */ jsx4(
-            "div",
-            {
-              style: {
-                fontSize: 11,
-                color: "rgba(255, 255, 255, 0.46)",
-                letterSpacing: "0.03em",
-                textTransform: "uppercase",
-                marginBottom: 10
-              },
-              children: "Settings"
-            }
-          ),
-          selectedMode === "area" && /* @__PURE__ */ jsx4(
-            ToggleRow,
-            {
-              icon: /* @__PURE__ */ jsx4(Magnet, { size: 15, strokeWidth: 1.8 }),
-              label: "Magnet snap",
-              enabled: magnetEnabled,
-              onChange: () => onMagnetChange(!magnetEnabled)
-            }
-          ),
-          selectedMode === "component" && /* @__PURE__ */ jsx4(
-            ToggleRow,
-            {
-              icon: /* @__PURE__ */ jsx4(Frame, { size: 15, strokeWidth: 1.8 }),
-              label: "1920 x 1080 frame",
-              enabled: frameOnBlackEnabled,
-              onChange: () => onFrameOnBlackChange(!frameOnBlackEnabled)
-            }
-          ),
-          (selectedMode === "area" || selectedMode === "component") && /* @__PURE__ */ jsx4("div", { style: { height: 1, background: "rgba(255,255,255,0.08)", margin: "8px 0" } }),
-          /* @__PURE__ */ jsx4(
-            SaveLocationRow,
-            {
-              dir: shortDir,
-              picking,
-              onPick: handlePickFolder
-            }
-          )
-        ]
+          top: 0,
+          left: 0,
+          width: 0,
+          height: 0,
+          opacity: 0,
+          pointerEvents: "none"
+        }
       }
     )
   ] });
 }
+function SmallButton({
+  children,
+  onClick
+}) {
+  const [hovered, setHovered] = useState3(false);
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        padding: "3px 8px",
+        borderRadius: 6,
+        border: "1px solid rgba(255,255,255,0.12)",
+        background: hovered ? "rgba(255,255,255,0.12)" : "rgba(255,255,255,0.06)",
+        color: "rgba(255,255,255,0.78)",
+        fontSize: 11,
+        cursor: "pointer",
+        fontFamily: "inherit",
+        transition: "background 0.12s ease"
+      },
+      children
+    }
+  );
+}
+async function downscaleImage(dataUrl, maxW, maxH) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      const scale = Math.min(maxW / img.width, maxH / img.height, 1);
+      canvas.width = img.width * scale;
+      canvas.height = img.height * scale;
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+      resolve(canvas.toDataURL("image/jpeg", 0.85));
+    };
+    img.onerror = () => resolve(dataUrl);
+    img.src = dataUrl;
+  });
+}
 function SaveLocationRow({
   dir,
   picking,
   onPick
 }) {
-  const [btnHovered, setBtnHovered] = useState5(false);
-  return /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: /* @__PURE__ */ jsxs3(
+  const [btnHovered, setBtnHovered] = useState3(false);
+  return /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: /* @__PURE__ */ jsxs2(
     "div",
     {
       style: {
@@ -1315,8 +990,8 @@ function SaveLocationRow({
         fontSize: 13
       },
       children: [
-        /* @__PURE__ */ jsx4(FolderOpen, { size: 15, strokeWidth: 1.8, style: { flexShrink: 0 } }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx3(FolderOpen, { size: 15, strokeWidth: 1.8, style: { flexShrink: 0 } }),
+        /* @__PURE__ */ jsx3(
           "span",
           {
             style: {
@@ -1330,7 +1005,7 @@ function SaveLocationRow({
             children: dir
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx3(
           "button",
           {
             onClick: onPick,
@@ -1362,7 +1037,7 @@ function ToggleRow({
   enabled,
   onChange
 }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs2(
     "label",
     {
       style: {
@@ -1373,7 +1048,7 @@ function ToggleRow({
         cursor: "pointer"
       },
       children: [
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs2(
           "span",
           {
             style: {
@@ -1390,7 +1065,7 @@ function ToggleRow({
             ]
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx3(
           "button",
           {
             type: "button",
@@ -1407,7 +1082,7 @@ function ToggleRow({
               flexShrink: 0,
               transition: "background 0.12s ease"
             },
-            children: /* @__PURE__ */ jsx4(
+            children: /* @__PURE__ */ jsx3(
               "span",
               {
                 style: {
@@ -1428,49 +1103,18 @@ function ToggleRow({
     }
   );
 }
-function ControlGroup({
-  label,
-  children
-}) {
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 6,
-        padding: "0 4px"
-      },
-      children: [
-        /* @__PURE__ */ jsx4(
-          "span",
-          {
-            style: {
-              fontSize: 11,
-              color: "rgba(255, 255, 255, 0.42)",
-              textTransform: "uppercase",
-              letterSpacing: "0.03em"
-            },
-            children: label
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
 function NumInput({
   value,
   onChange
 }) {
-  const [editing, setEditing] = useState5(false);
-  const [text, setText] = useState5(String(value));
-  useEffect4(() => {
+  const [editing, setEditing] = useState3(false);
+  const [text, setText] = useState3(String(value));
+  useEffect2(() => {
     if (!editing) {
       setText(String(value));
     }
   }, [editing, value]);
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "input",
     {
       type: "text",
@@ -1505,7 +1149,7 @@ function NumInput({
   );
 }
 function StaticText({ children }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "span",
     {
       style: {
@@ -1518,62 +1162,13 @@ function StaticText({ children }) {
     }
   );
 }
-function DropButton({
-  children,
-  onClick,
-  active
-}) {
-  return /* @__PURE__ */ jsx4(
-    "button",
-    {
-      onClick,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 6,
-        height: 34,
-        padding: "0 10px",
-        borderRadius: 10,
-        border: "1px solid rgba(255,255,255,0.08)",
-        background: "rgba(255,255,255,0.04)",
-        color: active ? "rgba(125, 211, 252, 0.96)" : "rgba(255,255,255,0.78)",
-        cursor: "pointer",
-        fontSize: 12,
-        fontFamily: "inherit"
-      },
-      children
-    }
-  );
-}
-function DropMenu({ children }) {
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        bottom: "calc(100% + 8px)",
-        left: "50%",
-        transform: "translateX(-50%)",
-        minWidth: 120,
-        background: "rgba(32, 32, 36, 0.96)",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
-        borderRadius: 10,
-        padding: "4px 0",
-        boxShadow: "0 10px 30px rgba(0, 0, 0, 0.3)",
-        backdropFilter: "blur(20px)",
-        WebkitBackdropFilter: "blur(20px)"
-      },
-      children
-    }
-  );
-}
 function DropItem({
   children,
   onClick,
   active,
   accent
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "button",
     {
       onClick,
@@ -1593,56 +1188,29 @@ function DropItem({
     }
   );
 }
-function MenuDivider() {
-  return /* @__PURE__ */ jsx4(
-    "div",
-    {
-      style: {
-        height: 1,
-        background: "rgba(255,255,255,0.08)",
-        margin: "4px 0"
-      }
-    }
-  );
-}
 function Separator({ vertical = true }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       style: {
         width: vertical ? 1 : 24,
-        height: vertical ? 24 : 1,
+        height: vertical ? 18 : 1,
         background: "rgba(255,255,255,0.12)",
-        flexShrink: 0
+        flexShrink: 0,
+        margin: vertical ? "0 6px" : "6px 0"
       }
     }
   );
 }
-function circleButtonStyle(active, round) {
-  return {
-    width: 40,
-    height: 40,
-    borderRadius: round ? "50%" : 12,
-    border: "none",
-    background: active ? "rgba(255, 255, 255, 0.12)" : "transparent",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "pointer",
-    padding: 0,
-    transition: "background 0.12s ease, color 0.12s ease",
-    marginRight: round ? 6 : 0
-  };
-}
 
 // src/overlay/ui/inspector.tsx
-import { useEffect as useEffect5, useRef as useRef3, useCallback as useCallback4, useState as useState6 } from "react";
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef3, useCallback as useCallback3, useState as useState4 } from "react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function Inspector({ onSelect, onCancel }) {
-  const [highlight, setHighlight] = useState6(null);
+  const [highlight, setHighlight] = useState4(null);
   const hoveredEl = useRef3(null);
   const styleEl = useRef3(null);
-  useEffect5(() => {
+  useEffect3(() => {
     const style = document.createElement("style");
     style.setAttribute("data-afterbefore", "true");
     style.textContent = "*, *::before, *::after { cursor: crosshair !important; }";
@@ -1652,7 +1220,7 @@ function Inspector({ onSelect, onCancel }) {
       style.remove();
     };
   }, []);
-  const isOverlayElement = useCallback4((el) => {
+  const isOverlayElement = useCallback3((el) => {
     let node = el;
     while (node) {
       if (node instanceof HTMLElement && node.dataset.afterbefore) return true;
@@ -1660,7 +1228,7 @@ function Inspector({ onSelect, onCancel }) {
     }
     return false;
   }, []);
-  const handleMouseMove = useCallback4(
+  const handleMouseMove = useCallback3(
     (e) => {
       const el = document.elementFromPoint(e.clientX, e.clientY);
       if (!el || !(el instanceof HTMLElement) || isOverlayElement(el)) {
@@ -1680,8 +1248,9 @@ function Inspector({ onSelect, onCancel }) {
     },
     [isOverlayElement]
   );
-  const handleClick = useCallback4(
+  const handleClick = useCallback3(
     (e) => {
+      if (isOverlayElement(e.target)) return;
       e.preventDefault();
       e.stopPropagation();
       e.stopImmediatePropagation();
@@ -1689,9 +1258,9 @@ function Inspector({ onSelect, onCancel }) {
         onSelect(hoveredEl.current);
       }
     },
-    [onSelect]
+    [onSelect, isOverlayElement]
   );
-  const handleKeyDown = useCallback4(
+  const handleKeyDown = useCallback3(
     (e) => {
       if (e.key === "Escape") {
         onCancel();
@@ -1699,7 +1268,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [onCancel]
   );
-  useEffect5(() => {
+  useEffect3(() => {
     document.addEventListener("mousemove", handleMouseMove, true);
     document.addEventListener("click", handleClick, true);
     document.addEventListener("keydown", handleKeyDown);
@@ -1709,81 +1278,59 @@ function Inspector({ onSelect, onCancel }) {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [handleMouseMove, handleClick, handleKeyDown]);
-  return /* @__PURE__ */ jsxs4("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: [
-    highlight && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      /* @__PURE__ */ jsx5(
-        "div",
-        {
-          style: {
-            position: "fixed",
-            left: highlight.x,
-            top: highlight.y,
-            width: highlight.width,
-            height: highlight.height,
-            background: "rgba(59, 130, 246, 0.15)",
-            border: "2px solid rgba(59, 130, 246, 0.7)",
-            borderRadius: 2,
-            pointerEvents: "none"
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx5(
-        "div",
-        {
-          style: {
-            position: "fixed",
-            left: highlight.x,
-            top: Math.max(0, highlight.y - 24),
-            background: "rgba(59, 130, 246, 0.9)",
-            color: "#fff",
-            fontSize: 11,
-            fontFamily: "system-ui, -apple-system, monospace",
-            padding: "2px 6px",
-            borderRadius: 3,
-            pointerEvents: "none",
-            whiteSpace: "nowrap",
-            lineHeight: "18px"
-          },
-          children: highlight.tag
+  return /* @__PURE__ */ jsx4("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: highlight && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          left: highlight.x,
+          top: highlight.y,
+          width: highlight.width,
+          height: highlight.height,
+          background: "rgba(59, 130, 246, 0.15)",
+          border: "2px solid rgba(59, 130, 246, 0.7)",
+          borderRadius: 2,
+          pointerEvents: "none"
         }
-      )
-    ] }),
-    !highlight && /* @__PURE__ */ jsx5(
+      }
+    ),
+    /* @__PURE__ */ jsx4(
       "div",
       {
         style: {
           position: "fixed",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)",
-          color: "rgba(255, 255, 255, 0.7)",
-          fontSize: 14,
-          fontFamily: "system-ui, -apple-system, sans-serif",
+          left: highlight.x,
+          top: Math.max(0, highlight.y - 24),
+          background: "rgba(59, 130, 246, 0.9)",
+          color: "#fff",
+          fontSize: 11,
+          fontFamily: "system-ui, -apple-system, monospace",
+          padding: "2px 6px",
+          borderRadius: 3,
           pointerEvents: "none",
-          textShadow: "0 1px 4px rgba(0, 0, 0, 0.5)",
-          background: "rgba(0, 0, 0, 0.5)",
-          padding: "8px 16px",
-          borderRadius: 8
+          whiteSpace: "nowrap",
+          lineHeight: "18px"
         },
-        children: "Hover to inspect \xB7 Click to capture \xB7 Esc to cancel"
+        children: highlight.tag
       }
     )
-  ] });
+  ] }) });
 }
 
 // src/overlay/ui/status.tsx
-import { useState as useState7, useRef as useRef4, useEffect as useEffect6, useCallback as useCallback5 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState5, useRef as useRef4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var PANEL_WIDTH = 220;
 function Status({ onReset, position, onClose }) {
   const panelRef = useRef4(null);
-  const [toast, setToast] = useState7(null);
-  const [pushing, setPushing] = useState7(false);
-  const showToast = useCallback5((message, type) => {
+  const [toast, setToast] = useState5(null);
+  const [pushing, setPushing] = useState5(false);
+  const showToast = useCallback4((message, type) => {
     setToast({ message, type });
     setTimeout(() => setToast(null), 3e3);
   }, []);
-  useEffect6(() => {
+  useEffect4(() => {
     const handler = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         onClose();
@@ -1792,7 +1339,7 @@ function Status({ onReset, position, onClose }) {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [onClose]);
-  useEffect6(() => {
+  useEffect4(() => {
     const handler = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -1868,7 +1415,7 @@ function Status({ onReset, position, onClose }) {
   const onLeave = (e) => {
     e.currentTarget.style.background = "transparent";
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: panelRef,
@@ -1887,7 +1434,7 @@ function Status({ onReset, position, onClose }) {
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             style: {
@@ -1897,11 +1444,11 @@ function Status({ onReset, position, onClose }) {
               color: "rgba(255,255,255,0.5)",
               letterSpacing: "0.02em"
             },
-            children: "Before & After captured"
+            children: "Screenshot captured"
           }
         ),
-        /* @__PURE__ */ jsxs5("div", { style: { padding: "0 4px 4px" }, children: [
-          /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs4("div", { style: { padding: "0 4px 4px" }, children: [
+          /* @__PURE__ */ jsxs4(
             "button",
             {
               style: buttonStyle,
@@ -1909,12 +1456,12 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx6(FolderIcon, {}),
+                /* @__PURE__ */ jsx5(FolderIcon, {}),
                 "Open Folder"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsxs4(
             "button",
             {
               style: buttonStyle,
@@ -1922,12 +1469,12 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx6(CopyIcon, {}),
+                /* @__PURE__ */ jsx5(CopyIcon, {}),
                 "Copy Markdown"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsxs4(
             "button",
             {
               style: buttonStyle,
@@ -1936,12 +1483,12 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx6(PushIcon, {}),
+                /* @__PURE__ */ jsx5(PushIcon, {}),
                 pushing ? "Pushing..." : "Push to PR"
               ]
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx5(
             "div",
             {
               style: {
@@ -1951,7 +1498,7 @@ function Status({ onReset, position, onClose }) {
               }
             }
           ),
-          /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsxs4(
             "button",
             {
               style: { ...buttonStyle, color: "rgba(255,255,255,0.5)" },
@@ -1959,13 +1506,13 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx6(ResetIcon, {}),
+                /* @__PURE__ */ jsx5(ResetIcon, {}),
                 "Reset"
               ]
             }
           )
         ] }),
-        toast && /* @__PURE__ */ jsx6(
+        toast && /* @__PURE__ */ jsx5(
           "div",
           {
             style: {
@@ -1991,14 +1538,14 @@ function Status({ onReset, position, onClose }) {
   );
 }
 function FolderIcon() {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     "svg",
     {
       width: "14",
       height: "14",
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.5)" },
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx5(
         "path",
         {
           d: "M1.5 3A1.5 1.5 0 013 1.5h2.38a1 1 0 01.72.3L7 2.72a1 1 0 00.72.3H11A1.5 1.5 0 0112.5 4.5v6A1.5 1.5 0 0111 12H3A1.5 1.5 0 011.5 10.5V3z",
@@ -2011,7 +1558,7 @@ function FolderIcon() {
   );
 }
 function CopyIcon() {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "svg",
     {
       width: "14",
@@ -2019,7 +1566,7 @@ function CopyIcon() {
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.5)" },
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           "rect",
           {
             x: "4",
@@ -2032,7 +1579,7 @@ function CopyIcon() {
             strokeWidth: "1.3"
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           "path",
           {
             d: "M10 4V2.5A1.5 1.5 0 008.5 1h-6A1.5 1.5 0 001 2.5v6A1.5 1.5 0 002.5 10H4",
@@ -2046,14 +1593,14 @@ function CopyIcon() {
   );
 }
 function PushIcon() {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx5(
     "svg",
     {
       width: "14",
       height: "14",
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.5)" },
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx5(
         "path",
         {
           d: "M7 11V3m0 0L4 6m3-3l3 3",
@@ -2068,7 +1615,7 @@ function PushIcon() {
   );
 }
 function ResetIcon() {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "svg",
     {
       width: "14",
@@ -2076,7 +1623,7 @@ function ResetIcon() {
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.4)" },
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           "path",
           {
             d: "M2.5 7a4.5 4.5 0 118 2.5",
@@ -2086,7 +1633,7 @@ function ResetIcon() {
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           "path",
           {
             d: "M2.5 3v4h4",
@@ -2103,55 +1650,47 @@ function ResetIcon() {
 }
 
 // src/overlay/index.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-async function saveCapture(type, mode, dataUrl) {
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+async function saveCapture(mode, dataUrl) {
   try {
     const res = await fetch("/__afterbefore/save", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ type, mode, image: dataUrl })
+      body: JSON.stringify({ mode, image: dataUrl })
     });
     if (!res.ok) throw new Error("Save failed");
   } catch {
     const link = document.createElement("a");
-    link.download = `${type}.png`;
+    link.download = "screenshot.png";
     link.href = dataUrl;
     link.click();
   }
 }
 function AfterBefore() {
   const { state, captureComplete, reset } = useOverlayState();
-  const [statusOpen, setStatusOpen] = useState8(false);
-  const [toolbarActive, setToolbarActive] = useState8(false);
-  const [selectorActive, setSelectorActive] = useState8(false);
-  const [inspectorActive, setInspectorActive] = useState8(false);
-  const [loading, setLoading] = useState8(false);
-  const [selectedMode, setSelectedMode] = useState8("component");
-  const [magnetEnabled, setMagnetEnabled] = useState8(true);
-  const [areaRect, setAreaRect] = useState8(null);
-  const [areaAspect, setAreaAspect] = useState8(DEFAULT_AREA_ASPECT);
-  const [areaPresets, setAreaPresets] = useState8([]);
-  const [frameOnBlackEnabled, setFrameOnBlackEnabled] = useState8(false);
+  const [statusOpen, setStatusOpen] = useState6(false);
+  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);
   const iconPos = useRef5({ x: 24, y: 0 });
-  useEffect7(() => {
-    try {
-      setMagnetEnabled(localStorage.getItem("ab-magnet") !== "false");
-    } catch {
-      setMagnetEnabled(true);
-    }
-    try {
-      const savedPresets = localStorage.getItem("ab-area-presets");
-      setAreaPresets(savedPresets ? JSON.parse(savedPresets) : []);
-    } catch {
-      setAreaPresets([]);
-    }
+  useEffect5(() => {
     try {
-      setFrameOnBlackEnabled(localStorage.getItem("ab-frame-black") === "true");
+      const stored = localStorage.getItem("ab-frame-settings");
+      if (stored) {
+        setFrameSettings({ ...DEFAULT_FRAME_SETTINGS, ...JSON.parse(stored) });
+      } else if (localStorage.getItem("ab-frame-black") === "true") {
+        const migrated = { ...DEFAULT_FRAME_SETTINGS, enabled: true };
+        setFrameSettings(migrated);
+        localStorage.setItem("ab-frame-settings", JSON.stringify(migrated));
+        localStorage.removeItem("ab-frame-black");
+      }
     } catch {
-      setFrameOnBlackEnabled(false);
+      setFrameSettings(DEFAULT_FRAME_SETTINGS);
     }
   }, []);
-  useEffect7(() => {
+  useEffect5(() => {
     if (state.phase === "ready") {
       const timer = setTimeout(() => {
         reset();
@@ -2160,43 +1699,37 @@ function AfterBefore() {
       return () => clearTimeout(timer);
     }
   }, [state.phase, reset]);
-  const handlePositionChange = useCallback6(
+  const handlePositionChange = useCallback5(
     (pos) => {
       iconPos.current = pos;
     },
     []
   );
-  const handleIconClick = useCallback6(() => {
+  const handleIconClick = useCallback5(() => {
     if (loading) return;
     if (state.phase === "ready") {
       setStatusOpen((prev) => !prev);
     } else if (toolbarActive || inspectorActive) {
       setToolbarActive(false);
-      setSelectorActive(false);
       setInspectorActive(false);
       setStatusOpen(false);
     } else {
       setStatusOpen(false);
       if (selectedMode === "component") {
+        setToolbarActive(true);
         setInspectorActive(true);
       } else {
         setToolbarActive(true);
         setInspectorActive(false);
-        if (selectedMode === "area") {
-          setSelectorActive(true);
-          setAreaRect(createInitialAreaRect());
-          setAreaAspect(DEFAULT_AREA_ASPECT);
-        }
       }
     }
   }, [state.phase, loading, toolbarActive, inspectorActive, selectedMode]);
-  const performCapture = useCallback6(
-    async (mode, area, element) => {
+  const performCapture = useCallback5(
+    async (mode, element) => {
       setLoading(true);
       try {
-        const dataUrl = await capture({ mode, area, element, frameOnBlack: frameOnBlackEnabled });
-        const type = state.phase === "idle" ? "before" : "after";
-        await saveCapture(type, mode, dataUrl);
+        const dataUrl = await capture({ mode, element, frameSettings });
+        await saveCapture(mode, dataUrl);
         captureComplete({
           dataUrl,
           mode,
@@ -2208,164 +1741,59 @@ function AfterBefore() {
         setLoading(false);
       }
     },
-    [state.phase, captureComplete, frameOnBlackEnabled]
+    [captureComplete, frameSettings]
   );
-  const handleToolbarCapture = useCallback6(
+  const handleToolbarCapture = useCallback5(
     (mode) => {
-      if (mode === "area") {
-        if (areaRect) {
-          setSelectorActive(false);
-          setToolbarActive(false);
-          performCapture("area", {
-            x: Math.round(areaRect.x),
-            y: Math.round(areaRect.y),
-            width: Math.round(areaRect.w),
-            height: Math.round(areaRect.h)
-          });
-        }
-        return;
-      } else if (mode === "viewport") {
+      if (mode === "viewport") {
         setToolbarActive(false);
         performCapture("viewport");
       } else if (mode === "fullpage") {
         setToolbarActive(false);
         performCapture("fullpage");
       } else if (mode === "component") {
-        setToolbarActive(false);
         setInspectorActive(true);
       }
     },
-    [areaRect, performCapture]
+    [performCapture]
   );
-  const handleToolbarCancel = useCallback6(() => {
+  const handleToolbarCancel = useCallback5(() => {
     setToolbarActive(false);
-    setSelectorActive(false);
   }, []);
-  const handleComponentSelect = useCallback6(
+  const handleComponentSelect = useCallback5(
     (element) => {
       setInspectorActive(false);
-      performCapture("component", void 0, element);
-    },
-    [performCapture]
-  );
-  const handleComponentCancel = useCallback6(() => {
-    setInspectorActive(false);
-    setToolbarActive(true);
-  }, []);
-  const handleAreaSelect = useCallback6(
-    (area) => {
-      setSelectorActive(false);
       setToolbarActive(false);
-      performCapture("area", area);
+      performCapture("component", element);
     },
     [performCapture]
   );
-  const handleAreaCancel = useCallback6(() => {
-    setSelectorActive(false);
+  const handleComponentCancel = useCallback5(() => {
+    setInspectorActive(false);
     setToolbarActive(true);
   }, []);
-  const handleMagnetChange = useCallback6((enabled) => {
-    setMagnetEnabled(enabled);
-    try {
-      localStorage.setItem("ab-magnet", String(enabled));
-    } catch {
-    }
-  }, []);
-  const handleFrameOnBlackChange = useCallback6((enabled) => {
-    setFrameOnBlackEnabled(enabled);
+  const handleFrameSettingsChange = useCallback5((next) => {
+    setFrameSettings(next);
     try {
-      localStorage.setItem("ab-frame-black", String(enabled));
+      localStorage.setItem("ab-frame-settings", JSON.stringify(next));
     } catch {
     }
   }, []);
-  const handleModeChange = useCallback6((mode) => {
+  const handleModeChange = useCallback5((mode) => {
     setSelectedMode(mode);
-    if (mode === "area") {
-      setSelectorActive(true);
-      setAreaRect(createInitialAreaRect());
-      setAreaAspect(DEFAULT_AREA_ASPECT);
-    } else if (mode === "component") {
-      setSelectorActive(false);
-      setToolbarActive(false);
+    if (mode === "component") {
       setInspectorActive(true);
-    } else {
-      setSelectorActive(false);
-    }
-  }, []);
-  const handleAreaRectChange = useCallback6((nextRect) => {
-    setAreaRect(nextRect);
-  }, []);
-  const handleAreaSizeChange = useCallback6(
-    (field, value) => {
-      const nextValue = parseInt(value, 10);
-      if (Number.isNaN(nextValue) || nextValue < 20 || !areaRect) {
-        return;
-      }
-      const aspectRatio = areaAspect === "Free" ? 0 : { "16:9": 16 / 9, "4:3": 4 / 3, "1:1": 1, "3:2": 3 / 2, "21:9": 21 / 9 }[areaAspect];
-      if (field === "w") {
-        setAreaRect({
-          ...areaRect,
-          w: nextValue,
-          h: aspectRatio > 0 ? nextValue / aspectRatio : areaRect.h
-        });
-      } else {
-        setAreaRect({
-          ...areaRect,
-          h: nextValue,
-          w: aspectRatio > 0 ? nextValue * aspectRatio : areaRect.w
-        });
-      }
-    },
-    [areaAspect, areaRect]
-  );
-  const handleAreaPositionChange = useCallback6(
-    (field, value) => {
-      const nextValue = parseInt(value, 10);
-      if (Number.isNaN(nextValue) || !areaRect) {
-        return;
-      }
-      setAreaRect({ ...areaRect, [field]: nextValue });
-    },
-    [areaRect]
-  );
-  const handleAreaAspectChange = useCallback6(
-    (nextAspect) => {
-      setAreaAspect(nextAspect);
-      if (!areaRect || nextAspect === "Free") {
-        return;
-      }
-      const aspectRatio = { "16:9": 16 / 9, "4:3": 4 / 3, "1:1": 1, "3:2": 3 / 2, "21:9": 21 / 9 }[nextAspect];
-      setAreaRect({ ...areaRect, h: areaRect.w / aspectRatio });
-    },
-    [areaRect]
-  );
-  const handleAreaSavePreset = useCallback6(() => {
-    if (!areaRect) {
-      return;
-    }
-    const label = `${Math.round(areaRect.w)}x${Math.round(areaRect.h)}`;
-    const nextPresets = [
-      ...areaPresets.filter((preset) => preset.label !== label),
-      { label, rect: { ...areaRect } }
-    ];
-    setAreaPresets(nextPresets);
-    try {
-      localStorage.setItem("ab-area-presets", JSON.stringify(nextPresets));
-    } catch {
     }
-  }, [areaPresets, areaRect]);
-  const handleAreaLoadPreset = useCallback6((preset) => {
-    setAreaRect({ ...preset.rect });
   }, []);
-  const handleReset = useCallback6(() => {
+  const handleReset = useCallback5(() => {
     reset();
     setStatusOpen(false);
   }, [reset]);
-  const handleStatusClose = useCallback6(() => {
+  const handleStatusClose = useCallback5(() => {
     setStatusOpen(false);
   }, []);
-  return /* @__PURE__ */ jsxs6("div", { "data-afterbefore": "true", children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs5("div", { "data-afterbefore": "true", children: [
+    /* @__PURE__ */ jsx6(
       Icon,
       {
         phase: state.phase,
@@ -2374,48 +1802,26 @@ function AfterBefore() {
         onPositionChange: handlePositionChange
       }
     ),
-    toolbarActive && !selectorActive && !inspectorActive && !loading && /* @__PURE__ */ jsx7(
+    toolbarActive && !inspectorActive && !loading && /* @__PURE__ */ jsx6(
       CapturePreview,
       {
         mode: selectedMode,
         onClick: () => handleToolbarCapture(selectedMode)
       }
     ),
-    toolbarActive && !inspectorActive && /* @__PURE__ */ jsx7(
+    toolbarActive && /* @__PURE__ */ jsx6(
       Toolbar,
       {
         selectedMode,
         onModeChange: handleModeChange,
         onCapture: handleToolbarCapture,
         onCancel: handleToolbarCancel,
-        magnetEnabled,
-        onMagnetChange: handleMagnetChange,
-        areaSelectionActive: selectorActive,
-        areaRect,
-        areaAspect,
-        areaPresets,
-        onAreaSizeChange: handleAreaSizeChange,
-        onAreaPositionChange: handleAreaPositionChange,
-        onAreaAspectChange: handleAreaAspectChange,
-        onAreaSavePreset: handleAreaSavePreset,
-        onAreaLoadPreset: handleAreaLoadPreset,
-        frameOnBlackEnabled,
-        onFrameOnBlackChange: handleFrameOnBlackChange
-      }
-    ),
-    selectorActive && /* @__PURE__ */ jsx7(
-      Selector,
-      {
-        rect: areaRect,
-        aspect: areaAspect,
-        onRectChange: handleAreaRectChange,
-        onSelect: handleAreaSelect,
-        onCancel: handleAreaCancel,
-        magnetEnabled
+        frameSettings,
+        onFrameSettingsChange: handleFrameSettingsChange
       }
     ),
-    inspectorActive && /* @__PURE__ */ jsx7(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel }),
-    statusOpen && state.phase === "ready" && /* @__PURE__ */ jsx7(
+    inspectorActive && /* @__PURE__ */ jsx6(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel }),
+    statusOpen && state.phase === "ready" && /* @__PURE__ */ jsx6(
       Status,
       {
         onReset: handleReset,