afterbefore 0.2.7 → 0.2.9

package/dist/overlay/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/overlay/index.tsx
-import { useState as useState7, useCallback as useCallback7, useRef as useRef5, useEffect as useEffect6 } from "react";
+import { useState as useState8, useCallback as useCallback6, useRef as useRef5, useEffect as useEffect7 } from "react";
 
 // src/overlay/state.ts
 import { useState, useCallback } from "react";
@@ -33,7 +33,7 @@ function useOverlayState() {
 }
 
 // src/overlay/capture.ts
-import { domToPng } from "modern-screenshot";
+import { snapdom } from "@zumer/snapdom";
 var DEV_UI_SELECTORS = [
   // Afterbefore overlay
   "[data-afterbefore]",
@@ -44,53 +44,37 @@ var DEV_UI_SELECTORS = [
   "[data-nextjs-dialog-backdrop]",
   "[data-next-badge]",
   "[data-next-mark]"
-].join(",");
-function filterDevUI(node) {
-  if (node instanceof HTMLElement) {
-    return !node.matches(DEV_UI_SELECTORS);
-  }
-  return true;
-}
-function hideDevUI() {
-  const elements = document.querySelectorAll(DEV_UI_SELECTORS);
-  const saved = /* @__PURE__ */ new Map();
-  elements.forEach((el) => {
-    saved.set(el, el.style.display);
-    el.style.display = "none";
-  });
-  return () => {
-    saved.forEach((v, el) => {
-      el.style.display = v;
-    });
-  };
+];
+var SNAPDOM_BASE = {
+  scale: window.devicePixelRatio || 1,
+  exclude: DEV_UI_SELECTORS,
+  excludeMode: "remove"
+};
+async function toPngDataUrl(el, opts) {
+  const result = await snapdom(el, { ...SNAPDOM_BASE, ...opts });
+  const img = await result.toPng();
+  return img.src;
 }
 async function capture(options) {
   const { mode, area, element } = options;
-  const restore = hideDevUI();
-  try {
-    if (mode === "viewport") {
-      return await captureViewport();
-    }
-    if (mode === "fullpage") {
-      return await captureFullPage();
-    }
-    if (mode === "area" && area) {
-      return await captureArea(area);
-    }
-    if (mode === "component" && element) {
-      return await captureComponent(element);
-    }
-    throw new Error(`Invalid capture mode: ${mode}`);
-  } finally {
-    restore();
+  if (mode === "viewport") {
+    return captureViewport();
+  }
+  if (mode === "fullpage") {
+    return captureFullPage();
+  }
+  if (mode === "area" && area) {
+    return captureArea(area);
   }
+  if (mode === "component" && element) {
+    return captureComponent(element);
+  }
+  throw new Error(`Invalid capture mode: ${mode}`);
 }
 async function captureViewport() {
-  return domToPng(document.documentElement, {
+  return toPngDataUrl(document.documentElement, {
     width: window.innerWidth,
-    height: window.innerHeight,
-    style: { overflow: "hidden" },
-    filter: filterDevUI
+    height: window.innerHeight
   });
 }
 async function captureFullPage() {
@@ -104,17 +88,20 @@ async function captureFullPage() {
     html.scrollHeight,
     html.offsetHeight
   );
-  const dataUrl = await domToPng(document.documentElement, {
-    width: window.innerWidth,
-    height: fullHeight,
-    style: {
-      overflow: "visible",
-      height: `${fullHeight}px`
-    },
-    filter: filterDevUI
-  });
-  window.scrollTo(0, scrollY);
-  return dataUrl;
+  const prevOverflow = html.style.overflow;
+  const prevHeight = html.style.height;
+  html.style.overflow = "visible";
+  html.style.height = `${fullHeight}px`;
+  try {
+    return await toPngDataUrl(document.documentElement, {
+      width: window.innerWidth,
+      height: fullHeight
+    });
+  } finally {
+    html.style.overflow = prevOverflow;
+    html.style.height = prevHeight;
+    window.scrollTo(0, scrollY);
+  }
 }
 async function captureArea(area) {
   const fullDataUrl = await captureViewport();
@@ -138,9 +125,7 @@ async function captureArea(area) {
   return canvas.toDataURL("image/png");
 }
 async function captureComponent(element) {
-  return domToPng(element, {
-    filter: filterDevUI
-  });
+  return toPngDataUrl(element);
 }
 function loadImage(src) {
   return new Promise((resolve, reject) => {
@@ -153,6 +138,7 @@ function loadImage(src) {
 
 // src/overlay/ui/icon.tsx
 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 EDGE_MARGIN = 24;
@@ -268,38 +254,13 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
           }
         ),
         loading ? /* @__PURE__ */ jsx(
-          "svg",
-          {
-            width: "20",
-            height: "20",
-            viewBox: "0 0 20 20",
-            style: { animation: "ab-spin 0.8s linear infinite" },
-            children: /* @__PURE__ */ jsx(
-              "circle",
-              {
-                cx: "10",
-                cy: "10",
-                r: "8",
-                fill: "none",
-                stroke: "white",
-                strokeWidth: "2",
-                strokeDasharray: "40",
-                strokeDashoffset: "10",
-                strokeLinecap: "round"
-              }
-            )
-          }
-        ) : phase === "ready" ? /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
-          "path",
+          LoaderCircle,
           {
-            d: "M4 10l4 4 8-8",
-            fill: "none",
-            stroke: "#4ade80",
-            strokeWidth: "2.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
+            size: 20,
+            strokeWidth: 2,
+            style: { animation: "ab-spin 0.8s linear infinite", color: "white" }
           }
-        ) }) : /* @__PURE__ */ jsxs(
+        ) : phase === "ready" ? /* @__PURE__ */ jsx(Check, { size: 20, strokeWidth: 2.6, color: "#4ade80" }) : /* @__PURE__ */ jsxs(
           "div",
           {
             style: {
@@ -310,33 +271,7 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
               animation: phase === "captured-before" ? "ab-pulse 2s ease-in-out infinite" : "none"
             },
             children: [
-              /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", children: [
-                /* @__PURE__ */ jsx(
-                  "rect",
-                  {
-                    x: "2",
-                    y: "5",
-                    width: "16",
-                    height: "12",
-                    rx: "2",
-                    fill: "none",
-                    stroke: "white",
-                    strokeWidth: "1.5"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: "10",
-                    cy: "11",
-                    r: "3",
-                    fill: "none",
-                    stroke: "white",
-                    strokeWidth: "1.5"
-                  }
-                ),
-                /* @__PURE__ */ jsx("path", { d: "M7 5l1-2h4l1 2", fill: "none", stroke: "white", strokeWidth: "1.5" })
-              ] }),
+              /* @__PURE__ */ jsx(Camera, { size: 20, strokeWidth: 1.9, color: "white" }),
               phase === "captured-before" && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -368,314 +303,155 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
   );
 }
 
-// src/overlay/ui/toolbar.tsx
-import { useState as useState3, useEffect as useEffect2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var MODES = [
-  { mode: "area", label: "Capture Selected Area" },
-  { mode: "viewport", label: "Capture Viewport" },
-  { mode: "fullpage", label: "Capture Full Page" },
-  { mode: "component", label: "Capture Component" }
-];
-function Toolbar({ onCapture, onCancel }) {
-  const [selectedMode, setSelectedMode] = useState3("area");
-  const [hoveredMode, setHoveredMode] = useState3(null);
+// 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
+  };
+}
+function CapturePreview({ mode }) {
+  const [areaRect, setAreaRect] = useState3(null);
   useEffect2(() => {
-    const onKey = (e) => {
-      if (e.key === "Escape") onCancel();
-      else if (e.key === "Enter") onCapture(selectedMode);
+    if (mode !== "area") {
+      return;
+    }
+    const syncRect = () => {
+      setAreaRect(getAreaPreviewRect());
     };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [onCancel, onCapture, selectedMode]);
-  const tooltipLabel = hoveredMode ? MODES.find((m) => m.mode === hoveredMode)?.label : null;
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      "data-afterbefore": "true",
-      style: {
-        position: "fixed",
-        bottom: 48,
-        left: "50%",
-        transform: "translateX(-50%)",
-        zIndex: 2147483647,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: 8
-      },
-      children: [
-        tooltipLabel && /* @__PURE__ */ jsx2(
+    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: {
-              background: "rgba(32, 32, 36, 0.92)",
-              backdropFilter: "blur(20px)",
-              WebkitBackdropFilter: "blur(20px)",
-              border: "1px solid rgba(255, 255, 255, 0.1)",
-              borderRadius: 6,
-              padding: "4px 10px",
-              color: "rgba(255, 255, 255, 0.85)",
-              fontSize: 12,
-              fontFamily: "system-ui, -apple-system, sans-serif",
-              whiteSpace: "nowrap",
-              boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)"
-            },
-            children: tooltipLabel
+              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
+            }
           }
-        ),
-        /* @__PURE__ */ jsxs2(
+        )
+      }
+    );
+  }
+  if (mode === "viewport" || mode === "fullpage") {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        "data-afterbefore": "true",
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 2147483645,
+          pointerEvents: "none",
+          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: {
-              display: "flex",
-              alignItems: "center",
-              gap: 0,
-              background: "rgba(32, 32, 36, 0.92)",
-              backdropFilter: "blur(20px)",
-              WebkitBackdropFilter: "blur(20px)",
-              border: "1px solid rgba(255, 255, 255, 0.1)",
-              borderRadius: 14,
-              padding: "6px 6px",
-              boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
-              fontFamily: "system-ui, -apple-system, sans-serif"
+              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: [
-              /* @__PURE__ */ jsx2(CloseButton, { onClick: onCancel }),
-              /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", gap: 2, padding: "0 4px" }, children: MODES.map(({ mode, label }) => /* @__PURE__ */ jsx2(
-                ModeButton,
-                {
-                  mode,
-                  label,
-                  selected: selectedMode === mode,
-                  onClick: () => setSelectedMode(mode),
-                  onHover: (hovered) => setHoveredMode(hovered ? mode : null)
-                },
-                mode
-              )) }),
-              /* @__PURE__ */ jsx2(
-                "div",
-                {
-                  style: {
-                    width: 1,
-                    height: 24,
-                    background: "rgba(255, 255, 255, 0.15)",
-                    margin: "0 6px",
-                    flexShrink: 0
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx2(CaptureButton, { onClick: () => onCapture(selectedMode) })
-            ]
+            children: mode === "fullpage" ? "Full-page capture begins from the current viewport" : "Current viewport capture"
           }
         )
-      ]
-    }
-  );
-}
-function CloseButton({ onClick }) {
-  const [hovered, setHovered] = useState3(false);
+      }
+    );
+  }
   return /* @__PURE__ */ jsx2(
-    "button",
+    "div",
     {
-      onClick,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
+      "data-afterbefore": "true",
       style: {
-        width: 28,
-        height: 28,
-        borderRadius: "50%",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
-        background: hovered ? "rgba(255, 255, 255, 0.12)" : "rgba(255, 255, 255, 0.06)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: "pointer",
-        flexShrink: 0,
-        padding: 0,
-        transition: "background 0.1s",
-        marginRight: 4
+        position: "fixed",
+        inset: 0,
+        zIndex: 2147483645,
+        pointerEvents: "none"
       },
-      children: /* @__PURE__ */ jsx2("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx2(
-        "path",
+      children: /* @__PURE__ */ jsx2(
+        "div",
         {
-          d: "M3 3l6 6M9 3l-6 6",
-          stroke: "rgba(255, 255, 255, 0.6)",
-          strokeWidth: "1.5",
-          strokeLinecap: "round"
+          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"
         }
-      ) })
-    }
-  );
-}
-function ModeButton({
-  mode,
-  label,
-  selected,
-  onClick,
-  onHover
-}) {
-  const [hovered, setHovered] = useState3(false);
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      onClick,
-      onMouseEnter: () => {
-        setHovered(true);
-        onHover(true);
-      },
-      onMouseLeave: () => {
-        setHovered(false);
-        onHover(false);
-      },
-      title: label,
-      style: {
-        width: 40,
-        height: 34,
-        borderRadius: 8,
-        border: "none",
-        background: selected ? "rgba(255, 255, 255, 0.15)" : hovered ? "rgba(255, 255, 255, 0.08)" : "transparent",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: "pointer",
-        padding: 0,
-        color: selected ? "rgba(255, 255, 255, 0.95)" : "rgba(255, 255, 255, 0.45)",
-        transition: "background 0.1s, color 0.1s"
-      },
-      children: /* @__PURE__ */ jsx2(ModeIcon, { mode })
-    }
-  );
-}
-function CaptureButton({ onClick }) {
-  const [hovered, setHovered] = useState3(false);
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      onClick,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      style: {
-        padding: "6px 16px",
-        borderRadius: 8,
-        border: "none",
-        background: hovered ? "#2563eb" : "#3b82f6",
-        color: "white",
-        fontSize: 13,
-        fontWeight: 600,
-        fontFamily: "inherit",
-        cursor: "pointer",
-        whiteSpace: "nowrap",
-        transition: "background 0.1s",
-        flexShrink: 0
-      },
-      children: "Capture"
+      )
     }
   );
 }
-function ModeIcon({ mode }) {
-  switch (mode) {
-    case "area":
-      return /* @__PURE__ */ jsxs2("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-        /* @__PURE__ */ jsx2(
-          "rect",
-          {
-            x: "3",
-            y: "4",
-            width: "14",
-            height: "12",
-            rx: "1.5",
-            stroke: "currentColor",
-            strokeWidth: "1.3",
-            strokeDasharray: "3 2"
-          }
-        ),
-        /* @__PURE__ */ jsx2("line", { x1: "10", y1: "7", x2: "10", y2: "13", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx2("line", { x1: "7", y1: "10", x2: "13", y2: "10", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })
-      ] });
-    case "viewport":
-      return /* @__PURE__ */ jsxs2("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-        /* @__PURE__ */ jsx2(
-          "rect",
-          {
-            x: "2",
-            y: "3",
-            width: "16",
-            height: "12",
-            rx: "1.5",
-            stroke: "currentColor",
-            strokeWidth: "1.3"
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "line",
-          {
-            x1: "2",
-            y1: "17",
-            x2: "18",
-            y2: "17",
-            stroke: "currentColor",
-            strokeWidth: "1.3",
-            strokeLinecap: "round"
-          }
-        )
-      ] });
-    case "fullpage":
-      return /* @__PURE__ */ jsxs2("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-        /* @__PURE__ */ jsx2(
-          "rect",
-          {
-            x: "4",
-            y: "1",
-            width: "12",
-            height: "18",
-            rx: "1.5",
-            stroke: "currentColor",
-            strokeWidth: "1.3"
-          }
-        ),
-        /* @__PURE__ */ jsx2("line", { x1: "7", y1: "5", x2: "13", y2: "5", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx2("line", { x1: "7", y1: "8", x2: "13", y2: "8", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" }),
-        /* @__PURE__ */ jsx2("line", { x1: "7", y1: "11", x2: "13", y2: "11", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })
-      ] });
-    case "component":
-      return /* @__PURE__ */ jsxs2("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-        /* @__PURE__ */ jsx2(
-          "path",
-          {
-            d: "M4 3l3 12 2.5-4.5L14 13 4 3z",
-            stroke: "currentColor",
-            strokeWidth: "1.2",
-            strokeLinejoin: "round",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "rect",
-          {
-            x: "10",
-            y: "7",
-            width: "7",
-            height: "7",
-            rx: "1",
-            stroke: "currentColor",
-            strokeWidth: "1.1",
-            strokeDasharray: "2 1.5"
-          }
-        )
-      ] });
-  }
-}
+
+// src/overlay/ui/toolbar.tsx
+import { useEffect as useEffect4, useState as useState5 } from "react";
+import {
+  Camera as Camera2,
+  ChevronDown,
+  Crop,
+  FileText,
+  Magnet,
+  Monitor,
+  MousePointer2,
+  Save,
+  Settings2,
+  X
+} from "lucide-react";
 
 // src/overlay/ui/selector.tsx
-import React3, { useState as useState4, useRef as useRef2, useCallback as useCallback4, useEffect as useEffect3 } from "react";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var HANDLE_R = 6;
-var HANDLE_HIT = 16;
-var MIN_SIZE = 20;
-var PANEL_HEIGHT_EST = 140;
-var SNAP_THRESHOLD = 8;
-var ASPECT_RATIOS = [
+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 },
@@ -683,112 +459,95 @@ var ASPECT_RATIOS = [
   { label: "3:2", value: 3 / 2 },
   { label: "21:9", value: 21 / 9 }
 ];
-function Selector({ onSelect, onCancel }) {
-  const [rect, setRect] = useState4(null);
-  const [placed, setPlaced] = useState4(false);
-  const [aspect, setAspect] = useState4("Free");
-  const [aspectOpen, setAspectOpen] = useState4(false);
-  const [savedOpen, setSavedOpen] = useState4(false);
-  const [presets, setPresets] = useState4(
-    () => {
-      try {
-        const s = localStorage.getItem("ab-area-presets");
-        return s ? JSON.parse(s) : [];
-      } catch {
-        return [];
-      }
-    }
-  );
-  const [cursor, setCursor] = useState4("crosshair");
-  const [magnet, setMagnet] = useState4(() => {
-    try {
-      return localStorage.getItem("ab-magnet") !== "false";
-    } catch {
-      return true;
-    }
-  });
+var HANDLE_R = 6;
+var HANDLE_HIT = 16;
+var MIN_SIZE = 20;
+var SNAP_THRESHOLD = 8;
+var CAMERA_CURSOR = `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 panelRef = useRef2(null);
-  const ratio = ASPECT_RATIOS.find((a) => a.label === aspect)?.value ?? 0;
-  const applySnap = useCallback4(
-    (r) => {
-      if (!magnet) {
+  const ratio = useMemo(() => getAspectRatio(aspect), [aspect]);
+  const applySnap = useCallback3(
+    (nextRect) => {
+      if (!magnetEnabled) {
         setSnappedX(false);
-        return r;
+        return nextRect;
       }
-      const vw = window.innerWidth;
-      const centerX = r.x + r.w / 2;
-      const viewCenterX = vw / 2;
-      if (Math.abs(centerX - viewCenterX) < SNAP_THRESHOLD) {
+      const centerX = nextRect.x + nextRect.w / 2;
+      const viewportCenterX = window.innerWidth / 2;
+      if (Math.abs(centerX - viewportCenterX) < SNAP_THRESHOLD) {
         setSnappedX(true);
-        return { ...r, x: viewCenterX - r.w / 2 };
+        return { ...nextRect, x: viewportCenterX - nextRect.w / 2 };
       }
       setSnappedX(false);
-      return r;
+      return nextRect;
     },
-    [magnet]
+    [magnetEnabled]
   );
   useEffect3(() => {
     const onKey = (e) => {
-      if (e.target?.tagName === "INPUT") {
-        if (e.key === "Escape") e.target.blur();
-        return;
-      }
       if (e.key === "Escape") {
-        if (placed) {
-          setPlaced(false);
-          setRect(null);
-        } else {
-          onCancel();
-        }
-      } else if (e.key === "Enter" && placed && rect) {
-        onSelect({
-          x: Math.round(rect.x),
-          y: Math.round(rect.y),
-          width: Math.round(rect.w),
-          height: Math.round(rect.h)
-        });
+        onCancel();
       }
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [placed, rect, onSelect, onCancel]);
-  const hitCorner = useCallback4(
-    (mx, my, r) => {
-      const cs = [
-        ["tl", r.x, r.y],
-        ["tr", r.x + r.w, r.y],
-        ["bl", r.x, r.y + r.h],
-        ["br", r.x + r.w, r.y + r.h]
-      ];
-      for (const [c, cx, cy] of cs) {
-        if (Math.abs(mx - cx) <= HANDLE_HIT && Math.abs(my - cy) <= HANDLE_HIT)
-          return c;
+  }, [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 = useCallback4(
-    (mx, my, r) => mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h,
+    }
+    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 = useCallback4(
+  const onDown = useCallback3(
     (e) => {
-      if (panelRef.current?.contains(e.target)) return;
       e.preventDefault();
-      setAspectOpen(false);
-      setSavedOpen(false);
-      const mx = e.clientX, my = e.clientY;
-      if (placed && rect) {
-        const c = hitCorner(mx, my, rect);
-        if (c) {
+      const mx = e.clientX;
+      const my = e.clientY;
+      if (rect) {
+        const activeCorner = hitCorner(mx, my, rect);
+        if (activeCorner) {
           mode.current = "resizing";
-          corner.current = c;
+          corner.current = activeCorner;
           start.current = { x: mx, y: my };
           snapRef.current = { ...rect };
           return;
@@ -799,78 +558,96 @@ function Selector({ onSelect, onCancel }) {
           snapRef.current = { ...rect };
           return;
         }
-        setPlaced(false);
       }
       mode.current = "drawing";
       start.current = { x: mx, y: my };
-      setRect({ x: mx, y: my, w: 0, h: 0 });
+      onRectChange({ x: mx, y: my, w: 0, h: 0 });
     },
-    [placed, rect, hitCorner, hitInside]
+    [hitCorner, hitInside, onRectChange, rect]
   );
-  const onMove = useCallback4(
+  const onMove = useCallback3(
     (e) => {
-      const mx = e.clientX, my = e.clientY;
+      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_CURSOR);
+          } else {
+            setCursor("crosshair");
+          }
+        } else {
+          setCursor("crosshair");
+        }
+        return;
+      }
       if (mode.current === "drawing") {
-        const sx = start.current.x, sy = start.current.y;
-        let x = Math.min(sx, mx), y = Math.min(sy, my);
-        let w = Math.abs(mx - sx), h = Math.abs(my - sy);
+        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;
+          if (my < sy) {
+            y = sy - h;
+          }
         }
-        setRect(applySnap({ x, y, w, h }));
-      } else if (mode.current === "moving") {
-        const dx = mx - start.current.x, dy = my - start.current.y;
-        setRect(
+        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
           })
         );
-      } else if (mode.current === "resizing") {
-        const o = snapRef.current;
-        const c = corner.current;
-        const nr = { ...o };
-        if (c === "br") {
-          nr.w = Math.max(MIN_SIZE, mx - o.x);
-          nr.h = ratio > 0 ? nr.w / ratio : Math.max(MIN_SIZE, my - o.y);
-        } else if (c === "bl") {
-          nr.w = Math.max(MIN_SIZE, o.x + o.w - mx);
-          nr.x = o.x + o.w - nr.w;
-          nr.h = ratio > 0 ? nr.w / ratio : Math.max(MIN_SIZE, my - o.y);
-        } else if (c === "tr") {
-          nr.w = Math.max(MIN_SIZE, mx - o.x);
-          nr.h = ratio > 0 ? nr.w / ratio : Math.max(MIN_SIZE, o.y + o.h - my);
-          nr.y = o.y + o.h - nr.h;
+        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 {
-          nr.w = Math.max(MIN_SIZE, o.x + o.w - mx);
-          nr.h = ratio > 0 ? nr.w / ratio : Math.max(MIN_SIZE, o.y + o.h - my);
-          nr.x = o.x + o.w - nr.w;
-          nr.y = o.y + o.h - nr.h;
+          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;
         }
-        setRect(applySnap(nr));
-      } else if (placed && rect) {
-        const c = hitCorner(mx, my, rect);
-        if (c === "tl" || c === "br") setCursor("nwse-resize");
-        else if (c === "tr" || c === "bl") setCursor("nesw-resize");
-        else if (hitInside(mx, my, rect)) setCursor("move");
-        else setCursor("crosshair");
+        onRectChange(applySnap(nextRect));
       }
     },
-    [ratio, placed, rect, hitCorner, hitInside, applySnap]
+    [applySnap, hitCorner, hitInside, onRectChange, ratio, rect]
   );
-  const onUp = useCallback4(
+  const onUp = useCallback3(
     (e) => {
-      const prevMode = mode.current;
-      if (prevMode === "drawing" && rect) {
-        if (rect.w >= MIN_SIZE && rect.h >= MIN_SIZE) {
-          setPlaced(true);
-        } else {
-          setRect(null);
+      const previousMode = mode.current;
+      if (previousMode === "drawing" && rect) {
+        if (rect.w < MIN_SIZE || rect.h < MIN_SIZE) {
+          onRectChange(null);
         }
       }
-      if (prevMode === "moving" && placed && rect) {
+      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) {
@@ -884,51 +661,10 @@ function Selector({ onSelect, onCancel }) {
       }
       mode.current = "none";
     },
-    [rect, placed, onSelect]
+    [onRectChange, onSelect, rect]
   );
-  const setSize = useCallback4(
-    (field, v) => {
-      const n = parseInt(v, 10);
-      if (isNaN(n) || n < MIN_SIZE || !rect) return;
-      if (field === "w") {
-        setRect({ ...rect, w: n, h: ratio > 0 ? n / ratio : rect.h });
-      } else {
-        setRect({ ...rect, h: n, w: ratio > 0 ? n * ratio : rect.w });
-      }
-    },
-    [rect, ratio]
-  );
-  const setPos = useCallback4(
-    (field, v) => {
-      const n = parseInt(v, 10);
-      if (isNaN(n) || !rect) return;
-      setRect({ ...rect, [field]: n });
-    },
-    [rect]
-  );
-  const savePreset = useCallback4(() => {
-    if (!rect) return;
-    const label = `${Math.round(rect.w)}\xD7${Math.round(rect.h)}`;
-    const next = [
-      ...presets.filter((p) => p.label !== label),
-      { label, rect: { ...rect } }
-    ];
-    setPresets(next);
-    try {
-      localStorage.setItem("ab-area-presets", JSON.stringify(next));
-    } catch {
-    }
-    setSavedOpen(false);
-  }, [rect, presets]);
-  const loadPreset = useCallback4((p) => {
-    setRect({ ...p.rect });
-    setPlaced(true);
-    setSavedOpen(false);
-  }, []);
-  const activeCursor = mode.current === "moving" ? "move" : mode.current === "resizing" ? "nwse-resize" : mode.current === "drawing" ? "crosshair" : cursor;
-  const panelAbove = rect && rect.y + rect.h + PANEL_HEIGHT_EST > window.innerHeight;
   const hasRect = rect && rect.w > 0 && rect.h > 0;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       "data-afterbefore": "true",
@@ -938,8 +674,8 @@ function Selector({ onSelect, onCancel }) {
       style: {
         position: "fixed",
         inset: 0,
-        zIndex: 2147483647,
-        cursor: activeCursor
+        zIndex: 2147483646,
+        cursor
       },
       children: [
         snappedX && /* @__PURE__ */ jsx3(
@@ -951,34 +687,84 @@ function Selector({ onSelect, onCancel }) {
               top: 0,
               bottom: 0,
               width: 0,
-              borderLeft: "1px solid rgba(147, 130, 220, 0.5)",
+              borderLeft: "1px solid rgba(56, 189, 248, 0.55)",
               pointerEvents: "none",
               zIndex: 2
             }
           }
         ),
-        /* @__PURE__ */ jsx3(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 0,
-              background: "rgba(0, 0, 0, 0.5)",
-              pointerEvents: "none",
-              ...hasRect ? {
-                clipPath: `polygon(
-                  0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
-                  ${rect.x}px ${rect.y}px,
-                  ${rect.x}px ${rect.y + rect.h}px,
-                  ${rect.x + rect.w}px ${rect.y + rect.h}px,
-                  ${rect.x + rect.w}px ${rect.y}px,
-                  ${rect.x}px ${rect.y}px
-                )`
-              } : {}
+        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"
+              }
             }
-          }
-        ),
-        hasRect && /* @__PURE__ */ jsxs3(Fragment, { children: [
+          ),
+          /* @__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",
             {
@@ -989,17 +775,19 @@ function Selector({ onSelect, onCancel }) {
                 width: rect.w,
                 height: rect.h,
                 border: "1.5px dashed rgba(255, 255, 255, 0.45)",
-                pointerEvents: "none"
+                borderRadius: 12,
+                pointerEvents: "none",
+                boxShadow: "0 0 0 1px rgba(125, 211, 252, 0.38)"
               }
             }
           ),
-          placed && [1, 2].map((i) => /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
+          [1, 2].map((line) => /* @__PURE__ */ jsxs2(React3.Fragment, { children: [
             /* @__PURE__ */ jsx3(
               "div",
               {
                 style: {
                   position: "absolute",
-                  left: rect.x + rect.w * i / 3,
+                  left: rect.x + rect.w * line / 3,
                   top: rect.y,
                   width: 0,
                   height: rect.h,
@@ -1014,7 +802,7 @@ function Selector({ onSelect, onCancel }) {
                 style: {
                   position: "absolute",
                   left: rect.x,
-                  top: rect.y + rect.h * i / 3,
+                  top: rect.y + rect.h * line / 3,
                   width: rect.w,
                   height: 0,
                   borderTop: "1px dashed rgba(255, 255, 255, 0.18)",
@@ -1022,327 +810,521 @@ function Selector({ onSelect, onCancel }) {
                 }
               }
             )
-          ] }, i)),
-          placed && [
+          ] }, 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], i) => /* @__PURE__ */ jsx3(
+          ].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: "area", label: "Capture Selected Area", icon: Crop },
+  { mode: "viewport", label: "Capture Viewport", icon: Monitor },
+  { mode: "fullpage", label: "Capture Full Page", icon: FileText },
+  { mode: "component", label: "Capture Component", icon: MousePointer2 }
+];
+function Toolbar({
+  selectedMode,
+  onModeChange,
+  onCapture,
+  onCancel,
+  magnetEnabled,
+  onMagnetChange,
+  areaSelectionActive,
+  areaRect,
+  areaAspect,
+  areaPresets,
+  onAreaSizeChange,
+  onAreaPositionChange,
+  onAreaAspectChange,
+  onAreaSavePreset,
+  onAreaLoadPreset
+}) {
+  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 onKey = (e) => {
+      if (e.target?.tagName === "INPUT") {
+        if (e.key === "Escape") {
+          e.target.blur();
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        if (settingsOpen) {
+          setSettingsOpen(false);
+          return;
+        }
+        if (aspectOpen) {
+          setAspectOpen(false);
+          return;
+        }
+        if (savedOpen) {
+          setSavedOpen(false);
+          return;
+        }
+        onCancel();
+      } else if (e.key === "Enter") {
+        onCapture(selectedMode);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [aspectOpen, onCancel, onCapture, savedOpen, selectedMode, settingsOpen]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-afterbefore": "true",
+      style: {
+        position: "fixed",
+        bottom: 48,
+        left: "50%",
+        transform: "translateX(-50%)",
+        zIndex: 2147483647,
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        flexWrap: "wrap",
+        justifyContent: "center",
+        maxWidth: "min(calc(100vw - 32px), 1120px)",
+        background: "rgba(32, 32, 36, 0.92)",
+        backdropFilter: "blur(20px)",
+        WebkitBackdropFilter: "blur(20px)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        borderRadius: 18,
+        padding: "6px 10px",
+        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 })
+            },
+            mode
+          )) }),
+          /* @__PURE__ */ jsx4(Separator, {}),
+          /* @__PURE__ */ jsx4(
+            SettingsButton,
+            {
+              open: settingsOpen,
+              onClick: () => {
+                setAspectOpen(false);
+                setSavedOpen(false);
+                setSettingsOpen((prev) => !prev);
+              },
+              magnetEnabled,
+              onMagnetChange
+            }
+          ),
+          !showAreaControls && /* @__PURE__ */ jsx4(
+            CaptureButton,
+            {
+              label: "Capture",
+              onClick: () => onCapture(selectedMode)
+            }
+          )
+        ] }),
+        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"
+                      }
+                    )
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function CloseButton({ onClick }) {
+  const [hovered, setHovered] = useState5(false);
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: circleButtonStyle(hovered, true),
+      children: /* @__PURE__ */ jsx4(X, { size: 18, strokeWidth: 1.9 })
+    }
+  );
+}
+function ModeButton({
+  children,
+  label,
+  selected,
+  onClick
+}) {
+  const [hovered, setHovered] = useState5(false);
+  return /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
+    hovered && /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: "50%",
+          bottom: "calc(100% + 10px)",
+          transform: "translateX(-50%)",
+          background: "rgba(32, 32, 36, 0.96)",
+          backdropFilter: "blur(20px)",
+          WebkitBackdropFilter: "blur(20px)",
+          border: "1px solid rgba(255, 255, 255, 0.1)",
+          borderRadius: 8,
+          padding: "5px 10px",
+          color: "rgba(255, 255, 255, 0.88)",
+          fontSize: 12,
+          whiteSpace: "nowrap",
+          boxShadow: "0 8px 28px rgba(0, 0, 0, 0.28)",
+          pointerEvents: "none"
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        onClick,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: {
+          width: 42,
+          height: 40,
+          borderRadius: 12,
+          border: "none",
+          background: selected ? "rgba(255, 255, 255, 0.15)" : hovered ? "rgba(255, 255, 255, 0.08)" : "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)",
+          transition: "background 0.12s ease, color 0.12s ease"
+        },
+        children
+      }
+    )
+  ] });
+}
+function SettingsButton({
+  open,
+  onClick,
+  magnetEnabled,
+  onMagnetChange
+}) {
+  const [hovered, setHovered] = useState5(false);
+  return /* @__PURE__ */ jsxs3("div", { style: { position: "relative", marginRight: 6 }, children: [
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        onClick,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: {
+          ...circleButtonStyle(open || hovered, false),
+          color: "rgba(255, 255, 255, 0.58)"
+        },
+        children: /* @__PURE__ */ jsx4(Settings2, { size: 18, strokeWidth: 1.7 })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: "50%",
+          bottom: "calc(100% + 12px)",
+          transform: "translateX(-50%)",
+          minWidth: 184,
+          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: {
-                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"
-              }
-            },
-            i
-          )),
-          placed && /* @__PURE__ */ jsxs3(
-            "div",
+                fontSize: 11,
+                color: "rgba(255, 255, 255, 0.46)",
+                letterSpacing: "0.03em",
+                textTransform: "uppercase",
+                marginBottom: 10
+              },
+              children: "Area Settings"
+            }
+          ),
+          /* @__PURE__ */ jsxs3(
+            "label",
             {
-              ref: panelRef,
-              onMouseDown: (e) => e.stopPropagation(),
               style: {
-                position: "absolute",
-                left: rect.x + rect.w / 2,
-                ...panelAbove ? { bottom: window.innerHeight - rect.y + 16 } : { top: rect.y + rect.h + 16 },
-                transform: "translateX(-50%)",
-                background: "rgba(32, 32, 36, 0.92)",
-                backdropFilter: "blur(20px)",
-                WebkitBackdropFilter: "blur(20px)",
-                border: "1px solid rgba(255, 255, 255, 0.1)",
-                borderRadius: 10,
-                padding: "10px 14px",
                 display: "flex",
-                flexDirection: "column",
-                gap: 6,
-                minWidth: 0,
-                fontFamily: "system-ui, -apple-system, sans-serif",
-                color: "rgba(255, 255, 255, 0.9)",
-                boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
-                zIndex: 1
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 12,
+                cursor: "pointer"
               },
               children: [
-                /* @__PURE__ */ jsxs3(Row, { label: "Size", children: [
-                  /* @__PURE__ */ jsx3(
-                    NumInput,
-                    {
-                      value: Math.round(rect.w),
-                      onChange: (v) => setSize("w", v)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx3(Sep, { children: "\xD7" }),
-                  /* @__PURE__ */ jsx3(
-                    NumInput,
-                    {
-                      value: Math.round(rect.h),
-                      onChange: (v) => setSize("h", v)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx3(Unit, { children: "px" })
-                ] }),
-                /* @__PURE__ */ jsxs3(Row, { label: "Position", children: [
-                  /* @__PURE__ */ jsx3(
-                    NumInput,
-                    {
-                      value: Math.round(rect.x),
-                      onChange: (v) => setPos("x", v)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx3(Sep, {}),
-                  /* @__PURE__ */ jsx3(
-                    NumInput,
-                    {
-                      value: Math.round(rect.y),
-                      onChange: (v) => setPos("y", v)
-                    }
-                  ),
-                  /* @__PURE__ */ jsx3(Unit, { children: "px" })
-                ] }),
-                /* @__PURE__ */ jsx3(
-                  "div",
-                  {
-                    style: {
-                      height: 1,
-                      background: "rgba(255, 255, 255, 0.08)",
-                      margin: "1px 0"
-                    }
-                  }
-                ),
                 /* @__PURE__ */ jsxs3(
-                  "div",
+                  "span",
                   {
-                    style: { display: "flex", alignItems: "center", gap: 12 },
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      color: "rgba(255, 255, 255, 0.88)",
+                      fontSize: 13
+                    },
                     children: [
-                      /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
-                        /* @__PURE__ */ jsxs3(
-                          DropBtn,
-                          {
-                            active: aspect !== "Free",
-                            onClick: () => {
-                              setAspectOpen(!aspectOpen);
-                              setSavedOpen(false);
-                            },
-                            children: [
-                              /* @__PURE__ */ jsx3(AspectIcon, {}),
-                              aspect === "Free" ? "Free" : aspect,
-                              /* @__PURE__ */ jsx3(Chevron, {})
-                            ]
-                          }
-                        ),
-                        aspectOpen && /* @__PURE__ */ jsx3(DropMenu, { children: ASPECT_RATIOS.map((ar) => /* @__PURE__ */ jsx3(
-                          DropItem,
-                          {
-                            active: ar.label === aspect,
-                            onClick: () => {
-                              setAspect(ar.label);
-                              setAspectOpen(false);
-                              if (ar.value > 0 && rect) {
-                                setRect({ ...rect, h: rect.w / ar.value });
-                              }
-                            },
-                            children: ar.label
-                          },
-                          ar.label
-                        )) })
-                      ] }),
-                      /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
-                        /* @__PURE__ */ jsxs3(
-                          DropBtn,
-                          {
-                            onClick: () => {
-                              setSavedOpen(!savedOpen);
-                              setAspectOpen(false);
-                            },
-                            children: [
-                              /* @__PURE__ */ jsx3(SavedIcon, {}),
-                              "Saved",
-                              /* @__PURE__ */ jsx3(Chevron, {})
-                            ]
-                          }
-                        ),
-                        savedOpen && /* @__PURE__ */ jsxs3(DropMenu, { children: [
-                          /* @__PURE__ */ jsx3(
-                            DropItem,
-                            {
-                              accent: true,
-                              onClick: savePreset,
-                              children: "Save current"
-                            }
-                          ),
-                          presets.length > 0 && /* @__PURE__ */ jsx3(
-                            "div",
-                            {
-                              style: {
-                                height: 1,
-                                background: "rgba(255,255,255,0.08)",
-                                margin: "4px 0"
-                              }
-                            }
-                          ),
-                          presets.map((p) => /* @__PURE__ */ jsx3(
-                            DropItem,
-                            {
-                              onClick: () => loadPreset(p),
-                              children: p.label
-                            },
-                            p.label
-                          )),
-                          presets.length === 0 && /* @__PURE__ */ jsx3(
-                            "div",
-                            {
-                              style: {
-                                padding: "6px 12px",
-                                color: "rgba(255,255,255,0.3)",
-                                fontSize: 12
-                              },
-                              children: "No saved areas"
-                            }
-                          )
-                        ] })
-                      ] })
+                      /* @__PURE__ */ jsx4(Magnet, { size: 15, strokeWidth: 1.8 }),
+                      "Magnet snap"
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx3(
-                  "div",
+                /* @__PURE__ */ jsx4(
+                  "button",
                   {
+                    type: "button",
+                    onClick: () => onMagnetChange(!magnetEnabled),
                     style: {
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 6
+                      width: 38,
+                      height: 22,
+                      borderRadius: 999,
+                      border: "none",
+                      background: magnetEnabled ? "#38bdf8" : "rgba(255, 255, 255, 0.18)",
+                      position: "relative",
+                      cursor: "pointer",
+                      padding: 0,
+                      transition: "background 0.12s ease"
                     },
-                    children: /* @__PURE__ */ jsx3(
-                      MagnetToggle,
+                    children: /* @__PURE__ */ jsx4(
+                      "span",
                       {
-                        enabled: magnet,
-                        onToggle: () => {
-                          const next = !magnet;
-                          setMagnet(next);
-                          try {
-                            localStorage.setItem("ab-magnet", String(next));
-                          } catch {
-                          }
+                        style: {
+                          position: "absolute",
+                          top: 2,
+                          left: magnetEnabled ? 18 : 2,
+                          width: 18,
+                          height: 18,
+                          borderRadius: "50%",
+                          background: "#fff",
+                          transition: "left 0.12s ease"
                         }
                       }
                     )
                   }
-                ),
-                /* @__PURE__ */ jsx3(
-                  "div",
-                  {
-                    style: {
-                      fontSize: 10,
-                      color: "rgba(255, 255, 255, 0.25)",
-                      textAlign: "center"
-                    },
-                    children: "Click area or Enter to capture \xB7 Esc to cancel"
-                  }
                 )
               ]
             }
-          ),
-          !placed && /* @__PURE__ */ jsxs3(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: rect.x + rect.w / 2,
-                top: rect.y + rect.h + 8,
-                transform: "translateX(-50%)",
-                background: "rgba(24, 24, 27, 0.9)",
-                color: "rgba(255, 255, 255, 0.9)",
-                fontSize: 11,
-                fontFamily: "system-ui, -apple-system, monospace",
-                padding: "2px 8px",
-                borderRadius: 4,
-                whiteSpace: "nowrap",
-                pointerEvents: "none"
-              },
-              children: [
-                Math.round(rect.w),
-                " \xD7 ",
-                Math.round(rect.h)
-              ]
-            }
           )
-        ] }),
-        !rect && /* @__PURE__ */ jsx3(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              color: "rgba(255, 255, 255, 0.7)",
-              fontSize: 14,
-              fontFamily: "system-ui, -apple-system, sans-serif",
-              pointerEvents: "none",
-              textShadow: "0 1px 4px rgba(0, 0, 0, 0.5)"
-            },
-            children: "Drag to select an area \xB7 Esc to cancel"
-          }
-        )
-      ]
-    }
-  );
-}
-function Row({
-  label,
-  children
-}) {
-  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-    /* @__PURE__ */ jsx3(
-      "span",
-      {
-        style: {
-          width: 36,
-          fontSize: 11,
-          color: "rgba(255, 255, 255, 0.4)",
-          fontWeight: 400,
-          flexShrink: 0
-        },
-        children: label
+        ]
       }
-    ),
-    children
+    )
   ] });
 }
-function Sep({ children }) {
-  return /* @__PURE__ */ jsx3(
-    "span",
+function CaptureButton({
+  label,
+  onClick
+}) {
+  const [hovered, setHovered] = useState5(false);
+  return /* @__PURE__ */ jsxs3(
+    "button",
     {
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
       style: {
-        fontSize: 11,
-        color: "rgba(255, 255, 255, 0.35)",
-        width: 12,
-        textAlign: "center",
+        padding: "0 18px",
+        height: 40,
+        borderRadius: 12,
+        border: "none",
+        background: hovered ? "#2f7bf8" : "#3b82f6",
+        color: "white",
+        fontSize: 13,
+        fontWeight: 600,
+        fontFamily: "inherit",
+        cursor: "pointer",
+        whiteSpace: "nowrap",
+        transition: "background 0.12s ease",
         flexShrink: 0,
-        visibility: children ? "visible" : "hidden"
+        display: "flex",
+        alignItems: "center",
+        gap: 8
       },
-      children: children || "\xD7"
+      children: [
+        /* @__PURE__ */ jsx4(Camera2, { size: 16, strokeWidth: 1.9 }),
+        label
+      ]
     }
   );
 }
-function Unit({ children }) {
-  return /* @__PURE__ */ jsx3(
-    "span",
+function ControlGroup({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "div",
     {
       style: {
-        fontSize: 10,
-        color: "rgba(255, 255, 255, 0.3)",
-        flexShrink: 0
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "0 4px"
       },
-      children
+      children: [
+        /* @__PURE__ */ jsx4(
+          "span",
+          {
+            style: {
+              fontSize: 11,
+              color: "rgba(255, 255, 255, 0.42)",
+              textTransform: "uppercase",
+              letterSpacing: "0.03em"
+            },
+            children: label
+          }
+        ),
+        children
+      ]
     }
   );
 }
@@ -1350,12 +1332,14 @@ function NumInput({
   value,
   onChange
 }) {
-  const [editing, setEditing] = useState4(false);
-  const [text, setText] = useState4(String(value));
-  useEffect3(() => {
-    if (!editing) setText(String(value));
-  }, [value, editing]);
-  return /* @__PURE__ */ jsx3(
+  const [editing, setEditing] = useState5(false);
+  const [text, setText] = useState5(String(value));
+  useEffect4(() => {
+    if (!editing) {
+      setText(String(value));
+    }
+  }, [editing, value]);
+  return /* @__PURE__ */ jsx4(
     "input",
     {
       type: "text",
@@ -1370,14 +1354,16 @@ function NumInput({
       },
       onChange: (e) => setText(e.target.value),
       onKeyDown: (e) => {
-        if (e.key === "Enter") e.target.blur();
+        if (e.key === "Enter") {
+          e.target.blur();
+        }
       },
       style: {
-        width: 52,
-        padding: "3px 6px",
+        width: 54,
+        padding: "4px 6px",
         background: "rgba(255, 255, 255, 0.07)",
         border: "1px solid rgba(255, 255, 255, 0.1)",
-        borderRadius: 4,
+        borderRadius: 7,
         color: "rgba(255, 255, 255, 0.9)",
         fontSize: 12,
         fontFamily: "system-ui, -apple-system, sans-serif",
@@ -1387,46 +1373,62 @@ function NumInput({
     }
   );
 }
-function DropBtn({
+function StaticText({ children }) {
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      style: {
+        fontSize: 11,
+        color: "rgba(255,255,255,0.35)",
+        minWidth: 8,
+        textAlign: "center"
+      },
+      children
+    }
+  );
+}
+function DropButton({
   children,
   onClick,
   active
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "button",
     {
       onClick,
       style: {
         display: "flex",
         alignItems: "center",
-        gap: 4,
-        background: "none",
-        border: "none",
-        color: active ? "rgba(147, 130, 220, 0.9)" : "rgba(255, 255, 255, 0.5)",
+        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: 11,
-        fontFamily: "inherit",
-        padding: "2px 0"
+        fontSize: 12,
+        fontFamily: "inherit"
       },
       children
     }
   );
 }
 function DropMenu({ children }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       style: {
         position: "absolute",
-        bottom: "100%",
-        left: 0,
-        marginBottom: 4,
-        background: "rgba(32, 32, 36, 0.95)",
+        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: 8,
+        borderRadius: 10,
         padding: "4px 0",
-        minWidth: 110,
-        boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)",
+        boxShadow: "0 10px 30px rgba(0, 0, 0, 0.3)",
         backdropFilter: "blur(20px)",
         WebkitBackdropFilter: "blur(20px)"
       },
@@ -1440,17 +1442,17 @@ function DropItem({
   active,
   accent
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "button",
     {
       onClick,
       style: {
         display: "block",
         width: "100%",
-        padding: "6px 12px",
-        background: active ? "rgba(255, 255, 255, 0.08)" : "none",
+        padding: "7px 12px",
+        background: active ? "rgba(255, 255, 255, 0.08)" : "transparent",
         border: "none",
-        color: accent ? "rgba(147, 130, 220, 0.9)" : "rgba(255, 255, 255, 0.8)",
+        color: accent ? "rgba(125, 211, 252, 0.96)" : "rgba(255, 255, 255, 0.86)",
         textAlign: "left",
         cursor: "pointer",
         fontSize: 13,
@@ -1460,123 +1462,56 @@ function DropItem({
     }
   );
 }
-function Chevron() {
-  return /* @__PURE__ */ jsx3("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx3(
-    "path",
+function MenuDivider() {
+  return /* @__PURE__ */ jsx4(
+    "div",
     {
-      d: "M3 4l2 2.5L7 4",
-      stroke: "currentColor",
-      strokeWidth: "1.2"
-    }
-  ) });
-}
-function AspectIcon() {
-  return /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
-    /* @__PURE__ */ jsx3(
-      "rect",
-      {
-        x: "2",
-        y: "4",
-        width: "12",
-        height: "8",
-        rx: "1.5",
-        stroke: "currentColor",
-        strokeWidth: "1.2",
-        strokeDasharray: "2 1.5"
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      "line",
-      {
-        x1: "6.33",
-        y1: "4",
-        x2: "6.33",
-        y2: "12",
-        stroke: "currentColor",
-        strokeWidth: "0.8",
-        strokeDasharray: "1.5 1"
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      "line",
-      {
-        x1: "9.67",
-        y1: "4",
-        x2: "9.67",
-        y2: "12",
-        stroke: "currentColor",
-        strokeWidth: "0.8",
-        strokeDasharray: "1.5 1"
+      style: {
+        height: 1,
+        background: "rgba(255,255,255,0.08)",
+        margin: "4px 0"
       }
-    )
-  ] });
-}
-function SavedIcon() {
-  return /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx3(
-    "rect",
-    {
-      x: "2",
-      y: "3",
-      width: "12",
-      height: "10",
-      rx: "1.5",
-      stroke: "currentColor",
-      strokeWidth: "1.2",
-      strokeDasharray: "2 1.5"
     }
-  ) });
+  );
 }
-function MagnetToggle({
-  enabled,
-  onToggle
-}) {
-  return /* @__PURE__ */ jsxs3(
-    "button",
+function Separator({ vertical = true }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
     {
-      onClick: onToggle,
       style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 5,
-        background: "none",
-        border: "none",
-        color: enabled ? "rgba(147, 130, 220, 0.9)" : "rgba(255, 255, 255, 0.35)",
-        cursor: "pointer",
-        fontSize: 11,
-        fontFamily: "inherit",
-        padding: "2px 0"
-      },
-      children: [
-        /* @__PURE__ */ jsx3(MagnetIcon, {}),
-        "Magnet"
-      ]
+        width: vertical ? 1 : 24,
+        height: vertical ? 24 : 1,
+        background: "rgba(255,255,255,0.12)",
+        flexShrink: 0
+      }
     }
   );
 }
-function MagnetIcon() {
-  return /* @__PURE__ */ jsxs3("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
-    /* @__PURE__ */ jsx3(
-      "path",
-      {
-        d: "M4 2v4a4 4 0 008 0V2",
-        stroke: "currentColor",
-        strokeWidth: "1.3",
-        strokeLinecap: "round"
-      }
-    ),
-    /* @__PURE__ */ jsx3("line", { x1: "4", y1: "2", x2: "4", y2: "5", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
-    /* @__PURE__ */ jsx3("line", { x1: "12", y1: "2", x2: "12", y2: "5", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
-  ] });
+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 useEffect4, useRef as useRef3, useCallback as useCallback5, useState as useState5 } from "react";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+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";
 function Inspector({ onSelect, onCancel }) {
-  const [highlight, setHighlight] = useState5(null);
+  const [highlight, setHighlight] = useState6(null);
   const hoveredEl = useRef3(null);
   const styleEl = useRef3(null);
-  useEffect4(() => {
+  useEffect5(() => {
     const style = document.createElement("style");
     style.setAttribute("data-afterbefore", "true");
     style.textContent = "*, *::before, *::after { cursor: crosshair !important; }";
@@ -1586,7 +1521,7 @@ function Inspector({ onSelect, onCancel }) {
       style.remove();
     };
   }, []);
-  const isOverlayElement = useCallback5((el) => {
+  const isOverlayElement = useCallback4((el) => {
     let node = el;
     while (node) {
       if (node instanceof HTMLElement && node.dataset.afterbefore) return true;
@@ -1594,7 +1529,7 @@ function Inspector({ onSelect, onCancel }) {
     }
     return false;
   }, []);
-  const handleMouseMove = useCallback5(
+  const handleMouseMove = useCallback4(
     (e) => {
       const el = document.elementFromPoint(e.clientX, e.clientY);
       if (!el || !(el instanceof HTMLElement) || isOverlayElement(el)) {
@@ -1614,7 +1549,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [isOverlayElement]
   );
-  const handleClick = useCallback5(
+  const handleClick = useCallback4(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1625,7 +1560,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [onSelect]
   );
-  const handleKeyDown = useCallback5(
+  const handleKeyDown = useCallback4(
     (e) => {
       if (e.key === "Escape") {
         onCancel();
@@ -1633,7 +1568,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [onCancel]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     document.addEventListener("mousemove", handleMouseMove, true);
     document.addEventListener("click", handleClick, true);
     document.addEventListener("keydown", handleKeyDown);
@@ -1644,8 +1579,8 @@ function Inspector({ onSelect, onCancel }) {
     };
   }, [handleMouseMove, handleClick, handleKeyDown]);
   return /* @__PURE__ */ jsxs4("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: [
-    highlight && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      /* @__PURE__ */ jsx4(
+    highlight && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsx5(
         "div",
         {
           style: {
@@ -1661,7 +1596,7 @@ function Inspector({ onSelect, onCancel }) {
           }
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         "div",
         {
           style: {
@@ -1682,7 +1617,7 @@ function Inspector({ onSelect, onCancel }) {
         }
       )
     ] }),
-    !highlight && /* @__PURE__ */ jsx4(
+    !highlight && /* @__PURE__ */ jsx5(
       "div",
       {
         style: {
@@ -1706,18 +1641,18 @@ function Inspector({ onSelect, onCancel }) {
 }
 
 // src/overlay/ui/status.tsx
-import { useState as useState6, useRef as useRef4, useEffect as useEffect5, useCallback as useCallback6 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+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";
 var PANEL_WIDTH = 220;
 function Status({ onReset, position, onClose }) {
   const panelRef = useRef4(null);
-  const [toast, setToast] = useState6(null);
-  const [pushing, setPushing] = useState6(false);
-  const showToast = useCallback6((message, type) => {
+  const [toast, setToast] = useState7(null);
+  const [pushing, setPushing] = useState7(false);
+  const showToast = useCallback5((message, type) => {
     setToast({ message, type });
     setTimeout(() => setToast(null), 3e3);
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     const handler = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         onClose();
@@ -1726,7 +1661,7 @@ function Status({ onReset, position, onClose }) {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [onClose]);
-  useEffect5(() => {
+  useEffect6(() => {
     const handler = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -1821,7 +1756,7 @@ function Status({ onReset, position, onClose }) {
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "div",
           {
             style: {
@@ -1843,7 +1778,7 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx5(FolderIcon, {}),
+                /* @__PURE__ */ jsx6(FolderIcon, {}),
                 "Open Folder"
               ]
             }
@@ -1856,7 +1791,7 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx5(CopyIcon, {}),
+                /* @__PURE__ */ jsx6(CopyIcon, {}),
                 "Copy Markdown"
               ]
             }
@@ -1870,12 +1805,12 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx5(PushIcon, {}),
+                /* @__PURE__ */ jsx6(PushIcon, {}),
                 pushing ? "Pushing..." : "Push to PR"
               ]
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "div",
             {
               style: {
@@ -1893,13 +1828,13 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx5(ResetIcon, {}),
+                /* @__PURE__ */ jsx6(ResetIcon, {}),
                 "Reset"
               ]
             }
           )
         ] }),
-        toast && /* @__PURE__ */ jsx5(
+        toast && /* @__PURE__ */ jsx6(
           "div",
           {
             style: {
@@ -1925,14 +1860,14 @@ function Status({ onReset, position, onClose }) {
   );
 }
 function FolderIcon() {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "svg",
     {
       width: "14",
       height: "14",
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.5)" },
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx6(
         "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",
@@ -1953,7 +1888,7 @@ function CopyIcon() {
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.5)" },
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "rect",
           {
             x: "4",
@@ -1966,7 +1901,7 @@ function CopyIcon() {
             strokeWidth: "1.3"
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "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",
@@ -1980,14 +1915,14 @@ function CopyIcon() {
   );
 }
 function PushIcon() {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "svg",
     {
       width: "14",
       height: "14",
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.5)" },
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx6(
         "path",
         {
           d: "M7 11V3m0 0L4 6m3-3l3 3",
@@ -2010,7 +1945,7 @@ function ResetIcon() {
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.4)" },
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "path",
           {
             d: "M2.5 7a4.5 4.5 0 118 2.5",
@@ -2020,7 +1955,7 @@ function ResetIcon() {
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(
           "path",
           {
             d: "M2.5 3v4h4",
@@ -2037,7 +1972,7 @@ function ResetIcon() {
 }
 
 // src/overlay/index.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 async function saveCapture(type, mode, dataUrl) {
   try {
     const res = await fetch("/__afterbefore/save", {
@@ -2055,13 +1990,31 @@ async function saveCapture(type, mode, dataUrl) {
 }
 function AfterBefore() {
   const { state, captureComplete, reset } = useOverlayState();
-  const [statusOpen, setStatusOpen] = useState7(false);
-  const [toolbarActive, setToolbarActive] = useState7(false);
-  const [selectorActive, setSelectorActive] = useState7(false);
-  const [inspectorActive, setInspectorActive] = useState7(false);
-  const [loading, setLoading] = useState7(false);
+  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("area");
+  const [magnetEnabled, setMagnetEnabled] = useState8(true);
+  const [areaRect, setAreaRect] = useState8(null);
+  const [areaAspect, setAreaAspect] = useState8(DEFAULT_AREA_ASPECT);
+  const [areaPresets, setAreaPresets] = useState8([]);
   const iconPos = useRef5({ x: 24, y: 0 });
-  useEffect6(() => {
+  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([]);
+    }
+  }, []);
+  useEffect7(() => {
     if (state.phase === "ready") {
       const timer = setTimeout(() => {
         reset();
@@ -2070,24 +2023,33 @@ function AfterBefore() {
       return () => clearTimeout(timer);
     }
   }, [state.phase, reset]);
-  const handlePositionChange = useCallback7(
+  const handlePositionChange = useCallback6(
     (pos) => {
       iconPos.current = pos;
     },
     []
   );
-  const handleIconClick = useCallback7(() => {
+  const handleIconClick = useCallback6(() => {
     if (loading) return;
     if (state.phase === "ready") {
       setStatusOpen((prev) => !prev);
-    } else {
-      setToolbarActive((prev) => !prev);
+    } else if (toolbarActive) {
+      setToolbarActive(false);
       setSelectorActive(false);
       setInspectorActive(false);
       setStatusOpen(false);
+    } else {
+      setToolbarActive(true);
+      setInspectorActive(false);
+      setStatusOpen(false);
+      if (selectedMode === "area") {
+        setSelectorActive(true);
+        setAreaRect(createInitialAreaRect());
+        setAreaAspect(DEFAULT_AREA_ASPECT);
+      }
     }
-  }, [state.phase, loading]);
-  const performCapture = useCallback7(
+  }, [state.phase, loading, toolbarActive, selectedMode]);
+  const performCapture = useCallback6(
     async (mode, area, element) => {
       setLoading(true);
       try {
@@ -2107,53 +2069,151 @@ function AfterBefore() {
     },
     [state.phase, captureComplete]
   );
-  const handleToolbarCapture = useCallback7(
+  const handleToolbarCapture = useCallback6(
     (mode) => {
-      setToolbarActive(false);
       if (mode === "area") {
-        setSelectorActive(true);
+        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") {
+        setToolbarActive(false);
         performCapture("viewport");
       } else if (mode === "fullpage") {
+        setToolbarActive(false);
         performCapture("fullpage");
       } else if (mode === "component") {
+        setToolbarActive(false);
         setInspectorActive(true);
       }
     },
-    [performCapture]
+    [areaRect, performCapture]
   );
-  const handleToolbarCancel = useCallback7(() => {
+  const handleToolbarCancel = useCallback6(() => {
     setToolbarActive(false);
+    setSelectorActive(false);
   }, []);
-  const handleComponentSelect = useCallback7(
+  const handleComponentSelect = useCallback6(
     (element) => {
       setInspectorActive(false);
       performCapture("component", void 0, element);
     },
     [performCapture]
   );
-  const handleComponentCancel = useCallback7(() => {
+  const handleComponentCancel = useCallback6(() => {
     setInspectorActive(false);
+    setToolbarActive(true);
   }, []);
-  const handleAreaSelect = useCallback7(
+  const handleAreaSelect = useCallback6(
     (area) => {
       setSelectorActive(false);
+      setToolbarActive(false);
       performCapture("area", area);
     },
     [performCapture]
   );
-  const handleAreaCancel = useCallback7(() => {
+  const handleAreaCancel = useCallback6(() => {
     setSelectorActive(false);
+    setToolbarActive(true);
+  }, []);
+  const handleMagnetChange = useCallback6((enabled) => {
+    setMagnetEnabled(enabled);
+    try {
+      localStorage.setItem("ab-magnet", String(enabled));
+    } catch {
+    }
+  }, []);
+  const handleModeChange = useCallback6((mode) => {
+    setSelectedMode(mode);
+    if (mode === "area") {
+      setSelectorActive(true);
+      setAreaRect(createInitialAreaRect());
+      setAreaAspect(DEFAULT_AREA_ASPECT);
+    } 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 = useCallback7(() => {
+  const handleReset = useCallback6(() => {
     reset();
     setStatusOpen(false);
   }, [reset]);
-  const handleStatusClose = useCallback7(() => {
+  const handleStatusClose = useCallback6(() => {
     setStatusOpen(false);
   }, []);
   return /* @__PURE__ */ jsxs6("div", { "data-afterbefore": "true", children: [
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       Icon,
       {
         phase: state.phase,
@@ -2162,16 +2222,40 @@ function AfterBefore() {
         onPositionChange: handlePositionChange
       }
     ),
-    toolbarActive && !selectorActive && !inspectorActive && /* @__PURE__ */ jsx6(Toolbar, { onCapture: handleToolbarCapture, onCancel: handleToolbarCancel }),
-    selectorActive && /* @__PURE__ */ jsx6(
+    toolbarActive && !selectorActive && !inspectorActive && !loading && /* @__PURE__ */ jsx7(CapturePreview, { mode: selectedMode }),
+    toolbarActive && !inspectorActive && /* @__PURE__ */ jsx7(
+      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
+      }
+    ),
+    selectorActive && /* @__PURE__ */ jsx7(
       Selector,
       {
+        rect: areaRect,
+        aspect: areaAspect,
+        onRectChange: handleAreaRectChange,
         onSelect: handleAreaSelect,
-        onCancel: handleAreaCancel
+        onCancel: handleAreaCancel,
+        magnetEnabled
       }
     ),
-    inspectorActive && /* @__PURE__ */ jsx6(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel }),
-    statusOpen && state.phase === "ready" && /* @__PURE__ */ jsx6(
+    inspectorActive && /* @__PURE__ */ jsx7(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel }),
+    statusOpen && state.phase === "ready" && /* @__PURE__ */ jsx7(
       Status,
       {
         onReset: handleReset,