afterbefore 0.2.3 → 0.2.5

package/dist/overlay/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/overlay/index.tsx
-import { useState as useState6, useCallback as useCallback7, useRef as useRef6 } from "react";
+import { useState as useState6, useCallback as useCallback6, useRef as useRef5, useEffect as useEffect5 } from "react";
 
 // src/overlay/state.ts
 import { useState, useCallback } from "react";
@@ -33,33 +33,65 @@ function useOverlayState() {
 }
 
 // src/overlay/capture.ts
-import { toPng } from "html-to-image";
+import { domToPng } from "modern-screenshot";
+var DEV_UI_SELECTORS = [
+  // Afterbefore overlay
+  "[data-afterbefore]",
+  // Next.js dev indicators
+  "[data-nextjs-toast]",
+  "[data-nextjs-dev-overlay]",
+  "[data-nextjs-dialog]",
+  "[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;
+    });
+  };
+}
 async function capture(options) {
   const { mode, area, element } = options;
-  if (mode === "viewport") {
-    return captureViewport();
-  }
-  if (mode === "fullpage") {
-    return captureFullPage();
-  }
-  if (mode === "area" && area) {
-    return captureArea(area);
-  }
-  if (mode === "component" && element) {
-    return captureComponent(element);
+  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();
   }
-  throw new Error(`Invalid capture mode: ${mode}`);
 }
 async function captureViewport() {
-  const dataUrl = await toPng(document.documentElement, {
+  return domToPng(document.documentElement, {
     width: window.innerWidth,
     height: window.innerHeight,
-    style: {
-      overflow: "hidden"
-    },
-    filter: filterOverlay
+    style: { overflow: "hidden" },
+    filter: filterDevUI
   });
-  return dataUrl;
 }
 async function captureFullPage() {
   const scrollY = window.scrollY;
@@ -72,14 +104,14 @@ async function captureFullPage() {
     html.scrollHeight,
     html.offsetHeight
   );
-  const dataUrl = await toPng(document.documentElement, {
+  const dataUrl = await domToPng(document.documentElement, {
     width: window.innerWidth,
     height: fullHeight,
     style: {
       overflow: "visible",
       height: `${fullHeight}px`
     },
-    filter: filterOverlay
+    filter: filterDevUI
   });
   window.scrollTo(0, scrollY);
   return dataUrl;
@@ -106,10 +138,9 @@ async function captureArea(area) {
   return canvas.toDataURL("image/png");
 }
 async function captureComponent(element) {
-  const dataUrl = await toPng(element, {
-    filter: filterOverlay
+  return domToPng(element, {
+    filter: filterDevUI
   });
-  return dataUrl;
 }
 function loadImage(src) {
   return new Promise((resolve, reject) => {
@@ -119,9 +150,6 @@ function loadImage(src) {
     img.src = src;
   });
 }
-function filterOverlay(node) {
-  return !node.dataset?.afterbefore;
-}
 
 // src/overlay/ui/icon.tsx
 import { useRef, useCallback as useCallback2, useEffect, useState as useState2 } from "react";
@@ -340,327 +368,14 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
   );
 }
 
-// src/overlay/ui/menu.tsx
-import { useEffect as useEffect2, useRef as useRef2, useCallback as useCallback3 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var modes = [
-  {
-    mode: "viewport",
-    label: "Viewport",
-    icon: /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", children: [
-      /* @__PURE__ */ jsx2(
-        "rect",
-        {
-          x: "1",
-          y: "2",
-          width: "14",
-          height: "11",
-          rx: "1.5",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.5"
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "line",
-        {
-          x1: "1",
-          y1: "14",
-          x2: "15",
-          y2: "14",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round"
-        }
-      )
-    ] })
-  },
-  {
-    mode: "fullpage",
-    label: "Full Page",
-    icon: /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", children: [
-      /* @__PURE__ */ jsx2(
-        "rect",
-        {
-          x: "3",
-          y: "1",
-          width: "10",
-          height: "14",
-          rx: "1.5",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.5"
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "line",
-        {
-          x1: "5.5",
-          y1: "4",
-          x2: "10.5",
-          y2: "4",
-          stroke: "currentColor",
-          strokeWidth: "1",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "line",
-        {
-          x1: "5.5",
-          y1: "6.5",
-          x2: "10.5",
-          y2: "6.5",
-          stroke: "currentColor",
-          strokeWidth: "1",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "line",
-        {
-          x1: "5.5",
-          y1: "9",
-          x2: "10.5",
-          y2: "9",
-          stroke: "currentColor",
-          strokeWidth: "1",
-          strokeLinecap: "round"
-        }
-      )
-    ] })
-  },
-  {
-    mode: "area",
-    label: "Select Area",
-    icon: /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", children: [
-      /* @__PURE__ */ jsx2(
-        "path",
-        {
-          d: "M1 5V2.5A1.5 1.5 0 012.5 1H5",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "path",
-        {
-          d: "M11 1h2.5A1.5 1.5 0 0115 2.5V5",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "path",
-        {
-          d: "M15 11v2.5a1.5 1.5 0 01-1.5 1.5H11",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "path",
-        {
-          d: "M5 15H2.5A1.5 1.5 0 011 13.5V11",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round"
-        }
-      )
-    ] })
-  },
-  {
-    mode: "component",
-    label: "Component",
-    icon: /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", children: [
-      /* @__PURE__ */ jsx2(
-        "path",
-        {
-          d: "M3 2l2.5 10 2-3.5L11 11 3 2z",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.3",
-          strokeLinejoin: "round",
-          strokeLinecap: "round"
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "rect",
-        {
-          x: "8",
-          y: "5",
-          width: "6.5",
-          height: "6.5",
-          rx: "1",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.2",
-          strokeDasharray: "2 1.5"
-        }
-      )
-    ] })
-  }
-];
-var PILL_WIDTH = 220;
-var BTN_SIZE = 36;
-function Menu({ onSelect, onClose, position }) {
-  const menuRef = useRef2(null);
-  const handleClickOutside = useCallback3(
-    (e) => {
-      if (menuRef.current && !menuRef.current.contains(e.target)) {
-        onClose();
-      }
-    },
-    [onClose]
-  );
-  const handleKeyDown = useCallback3(
-    (e) => {
-      if (e.key === "Escape") {
-        onClose();
-      }
-    },
-    [onClose]
-  );
-  useEffect2(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [handleClickOutside, handleKeyDown]);
-  const menuLeft = Math.max(
-    8,
-    Math.min(position.x - PILL_WIDTH / 2 + 20, window.innerWidth - PILL_WIDTH - 8)
-  );
-  const menuBottom = window.innerHeight - position.y + 8;
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      ref: menuRef,
-      "data-afterbefore": "true",
-      style: {
-        position: "fixed",
-        left: menuLeft,
-        bottom: menuBottom,
-        display: "flex",
-        alignItems: "center",
-        gap: 2,
-        background: "rgba(24, 24, 27, 0.95)",
-        borderRadius: 22,
-        padding: "4px 4px",
-        boxShadow: "0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08)",
-        zIndex: 2147483647,
-        fontFamily: "system-ui, -apple-system, sans-serif",
-        backdropFilter: "blur(12px)"
-      },
-      children: [
-        modes.map(({ mode, label, icon }) => /* @__PURE__ */ jsx2(
-          "button",
-          {
-            title: label,
-            onClick: () => onSelect(mode),
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: BTN_SIZE,
-              height: BTN_SIZE,
-              border: "none",
-              background: "transparent",
-              color: "rgba(255,255,255,0.7)",
-              borderRadius: "50%",
-              cursor: "pointer",
-              padding: 0,
-              transition: "background 0.1s, color 0.1s",
-              flexShrink: 0
-            },
-            onMouseEnter: (e) => {
-              const btn = e.currentTarget;
-              btn.style.background = "rgba(255,255,255,0.12)";
-              btn.style.color = "rgba(255,255,255,1)";
-            },
-            onMouseLeave: (e) => {
-              const btn = e.currentTarget;
-              btn.style.background = "transparent";
-              btn.style.color = "rgba(255,255,255,0.7)";
-            },
-            children: icon
-          },
-          mode
-        )),
-        /* @__PURE__ */ jsx2(
-          "div",
-          {
-            style: {
-              width: 1,
-              height: 20,
-              background: "rgba(255,255,255,0.12)",
-              flexShrink: 0,
-              margin: "0 2px"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "button",
-          {
-            title: "Close",
-            onClick: onClose,
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: BTN_SIZE,
-              height: BTN_SIZE,
-              border: "none",
-              background: "transparent",
-              color: "rgba(255,255,255,0.45)",
-              borderRadius: "50%",
-              cursor: "pointer",
-              padding: 0,
-              transition: "background 0.1s, color 0.1s",
-              flexShrink: 0
-            },
-            onMouseEnter: (e) => {
-              const btn = e.currentTarget;
-              btn.style.background = "rgba(255,255,255,0.12)";
-              btn.style.color = "rgba(255,255,255,0.9)";
-            },
-            onMouseLeave: (e) => {
-              const btn = e.currentTarget;
-              btn.style.background = "transparent";
-              btn.style.color = "rgba(255,255,255,0.45)";
-            },
-            children: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", children: /* @__PURE__ */ jsx2(
-              "path",
-              {
-                d: "M3 3l8 8M11 3l-8 8",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round"
-              }
-            ) })
-          }
-        )
-      ]
-    }
-  );
-}
-
 // src/overlay/ui/selector.tsx
-import React3, { useState as useState3, useRef as useRef3, useCallback as useCallback4, useEffect as useEffect3 } from "react";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import React2, { useState as useState3, useRef as useRef2, useCallback as useCallback3, useEffect as useEffect2 } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var HANDLE_R = 6;
 var HANDLE_HIT = 16;
 var MIN_SIZE = 20;
-var PANEL_HEIGHT_EST = 200;
+var PANEL_HEIGHT_EST = 140;
+var SNAP_THRESHOLD = 8;
 var ASPECT_RATIOS = [
   { label: "Free", value: 0 },
   { label: "16:9", value: 16 / 9 },
@@ -669,7 +384,7 @@ var ASPECT_RATIOS = [
   { label: "3:2", value: 3 / 2 },
   { label: "21:9", value: 21 / 9 }
 ];
-function Selector({ onSelect, onCancel }) {
+function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
   const [rect, setRect] = useState3(null);
   const [placed, setPlaced] = useState3(false);
   const [aspect, setAspect] = useState3("Free");
@@ -686,13 +401,39 @@ function Selector({ onSelect, onCancel }) {
     }
   );
   const [cursor, setCursor] = useState3("crosshair");
-  const mode = useRef3("none");
-  const start = useRef3({ x: 0, y: 0 });
-  const snap = useRef3({ x: 0, y: 0, w: 0, h: 0 });
-  const corner = useRef3("br");
-  const panelRef = useRef3(null);
+  const [magnet, setMagnet] = useState3(() => {
+    try {
+      return localStorage.getItem("ab-magnet") !== "false";
+    } catch {
+      return true;
+    }
+  });
+  const [snappedX, setSnappedX] = useState3(false);
+  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;
-  useEffect3(() => {
+  const applySnap = useCallback3(
+    (r) => {
+      if (!magnet) {
+        setSnappedX(false);
+        return r;
+      }
+      const vw = window.innerWidth;
+      const centerX = r.x + r.w / 2;
+      const viewCenterX = vw / 2;
+      if (Math.abs(centerX - viewCenterX) < SNAP_THRESHOLD) {
+        setSnappedX(true);
+        return { ...r, x: viewCenterX - r.w / 2 };
+      }
+      setSnappedX(false);
+      return r;
+    },
+    [magnet]
+  );
+  useEffect2(() => {
     const onKey = (e) => {
       if (e.target?.tagName === "INPUT") {
         if (e.key === "Escape") e.target.blur();
@@ -717,7 +458,7 @@ function Selector({ onSelect, onCancel }) {
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [placed, rect, onSelect, onCancel]);
-  const hitCorner = useCallback4(
+  const hitCorner = useCallback3(
     (mx, my, r) => {
       const cs = [
         ["tl", r.x, r.y],
@@ -733,11 +474,11 @@ function Selector({ onSelect, onCancel }) {
     },
     []
   );
-  const hitInside = useCallback4(
+  const hitInside = useCallback3(
     (mx, my, r) => mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h,
     []
   );
-  const onDown = useCallback4(
+  const onDown = useCallback3(
     (e) => {
       if (panelRef.current?.contains(e.target)) return;
       e.preventDefault();
@@ -750,13 +491,13 @@ function Selector({ onSelect, onCancel }) {
           mode.current = "resizing";
           corner.current = c;
           start.current = { x: mx, y: my };
-          snap.current = { ...rect };
+          snapRef.current = { ...rect };
           return;
         }
         if (hitInside(mx, my, rect)) {
           mode.current = "moving";
           start.current = { x: mx, y: my };
-          snap.current = { ...rect };
+          snapRef.current = { ...rect };
           return;
         }
         setPlaced(false);
@@ -767,7 +508,7 @@ function Selector({ onSelect, onCancel }) {
     },
     [placed, rect, hitCorner, hitInside]
   );
-  const onMove = useCallback4(
+  const onMove = useCallback3(
     (e) => {
       const mx = e.clientX, my = e.clientY;
       if (mode.current === "drawing") {
@@ -778,16 +519,18 @@ function Selector({ onSelect, onCancel }) {
           h = w / ratio;
           if (my < sy) y = sy - h;
         }
-        setRect({ x, y, w, h });
+        setRect(applySnap({ x, y, w, h }));
       } else if (mode.current === "moving") {
         const dx = mx - start.current.x, dy = my - start.current.y;
-        setRect({
-          ...snap.current,
-          x: snap.current.x + dx,
-          y: snap.current.y + dy
-        });
+        setRect(
+          applySnap({
+            ...snapRef.current,
+            x: snapRef.current.x + dx,
+            y: snapRef.current.y + dy
+          })
+        );
       } else if (mode.current === "resizing") {
-        const o = snap.current;
+        const o = snapRef.current;
         const c = corner.current;
         const nr = { ...o };
         if (c === "br") {
@@ -807,7 +550,7 @@ function Selector({ onSelect, onCancel }) {
           nr.x = o.x + o.w - nr.w;
           nr.y = o.y + o.h - nr.h;
         }
-        setRect(nr);
+        setRect(applySnap(nr));
       } else if (placed && rect) {
         const c = hitCorner(mx, my, rect);
         if (c === "tl" || c === "br") setCursor("nwse-resize");
@@ -816,19 +559,35 @@ function Selector({ onSelect, onCancel }) {
         else setCursor("crosshair");
       }
     },
-    [ratio, placed, rect, hitCorner, hitInside]
+    [ratio, placed, rect, hitCorner, hitInside, applySnap]
   );
-  const onUp = useCallback4(() => {
-    if (mode.current === "drawing" && rect) {
-      if (rect.w >= MIN_SIZE && rect.h >= MIN_SIZE) {
-        setPlaced(true);
-      } else {
-        setRect(null);
+  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);
+        }
       }
-    }
-    mode.current = "none";
-  }, [rect]);
-  const setSize = useCallback4(
+      if (prevMode === "moving" && placed && rect) {
+        const dx = Math.abs(e.clientX - start.current.x);
+        const dy = Math.abs(e.clientY - start.current.y);
+        if (dx < 3 && dy < 3) {
+          onSelect({
+            x: Math.round(rect.x),
+            y: Math.round(rect.y),
+            width: Math.round(rect.w),
+            height: Math.round(rect.h)
+          });
+        }
+      }
+      mode.current = "none";
+    },
+    [rect, placed, onSelect]
+  );
+  const setSize = useCallback3(
     (field, v) => {
       const n = parseInt(v, 10);
       if (isNaN(n) || n < MIN_SIZE || !rect) return;
@@ -840,7 +599,7 @@ function Selector({ onSelect, onCancel }) {
     },
     [rect, ratio]
   );
-  const setPos = useCallback4(
+  const setPos = useCallback3(
     (field, v) => {
       const n = parseInt(v, 10);
       if (isNaN(n) || !rect) return;
@@ -848,7 +607,7 @@ function Selector({ onSelect, onCancel }) {
     },
     [rect]
   );
-  const savePreset = useCallback4(() => {
+  const savePreset = useCallback3(() => {
     if (!rect) return;
     const label = `${Math.round(rect.w)}\xD7${Math.round(rect.h)}`;
     const next = [
@@ -862,7 +621,7 @@ function Selector({ onSelect, onCancel }) {
     }
     setSavedOpen(false);
   }, [rect, presets]);
-  const loadPreset = useCallback4((p) => {
+  const loadPreset = useCallback3((p) => {
     setRect({ ...p.rect });
     setPlaced(true);
     setSavedOpen(false);
@@ -870,7 +629,7 @@ function Selector({ onSelect, onCancel }) {
   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",
@@ -884,7 +643,22 @@ function Selector({ onSelect, onCancel }) {
         cursor: activeCursor
       },
       children: [
-        /* @__PURE__ */ jsx3(
+        snappedX && /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              top: 0,
+              bottom: 0,
+              width: 0,
+              borderLeft: "1px solid rgba(147, 130, 220, 0.5)",
+              pointerEvents: "none",
+              zIndex: 2
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
           "div",
           {
             style: {
@@ -905,8 +679,8 @@ function Selector({ onSelect, onCancel }) {
             }
           }
         ),
-        hasRect && /* @__PURE__ */ jsxs3(Fragment, { children: [
-          /* @__PURE__ */ jsx3(
+        hasRect && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx2(
             "div",
             {
               style: {
@@ -920,8 +694,8 @@ function Selector({ onSelect, onCancel }) {
               }
             }
           ),
-          placed && [1, 2].map((i) => /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
-            /* @__PURE__ */ jsx3(
+          placed && [1, 2].map((i) => /* @__PURE__ */ jsxs2(React2.Fragment, { children: [
+            /* @__PURE__ */ jsx2(
               "div",
               {
                 style: {
@@ -935,7 +709,7 @@ function Selector({ onSelect, onCancel }) {
                 }
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx2(
               "div",
               {
                 style: {
@@ -955,7 +729,7 @@ function Selector({ onSelect, onCancel }) {
             [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], i) => /* @__PURE__ */ jsx2(
             "div",
             {
               style: {
@@ -972,7 +746,7 @@ function Selector({ onSelect, onCancel }) {
             },
             i
           )),
-          placed && /* @__PURE__ */ jsxs3(
+          placed && /* @__PURE__ */ jsxs2(
             "div",
             {
               ref: panelRef,
@@ -986,71 +760,71 @@ function Selector({ onSelect, onCancel }) {
                 backdropFilter: "blur(20px)",
                 WebkitBackdropFilter: "blur(20px)",
                 border: "1px solid rgba(255, 255, 255, 0.1)",
-                borderRadius: 14,
-                padding: "16px 24px",
+                borderRadius: 10,
+                padding: "10px 14px",
                 display: "flex",
                 flexDirection: "column",
-                gap: 12,
-                minWidth: 340,
+                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
               },
               children: [
-                /* @__PURE__ */ jsxs3(Row, { label: "Size", children: [
-                  /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsxs2(Row, { label: "Size", children: [
+                  /* @__PURE__ */ jsx2(
                     NumInput,
                     {
                       value: Math.round(rect.w),
                       onChange: (v) => setSize("w", v)
                     }
                   ),
-                  /* @__PURE__ */ jsx3(Sep, { children: "\\u00d7" }),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx2(Sep, { children: "\xD7" }),
+                  /* @__PURE__ */ jsx2(
                     NumInput,
                     {
                       value: Math.round(rect.h),
                       onChange: (v) => setSize("h", v)
                     }
                   ),
-                  /* @__PURE__ */ jsx3(Unit, { children: "px" })
+                  /* @__PURE__ */ jsx2(Unit, { children: "px" })
                 ] }),
-                /* @__PURE__ */ jsxs3(Row, { label: "Position", children: [
-                  /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsxs2(Row, { label: "Position", children: [
+                  /* @__PURE__ */ jsx2(
                     NumInput,
                     {
                       value: Math.round(rect.x),
                       onChange: (v) => setPos("x", v)
                     }
                   ),
-                  /* @__PURE__ */ jsx3(Sep, {}),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx2(Sep, {}),
+                  /* @__PURE__ */ jsx2(
                     NumInput,
                     {
                       value: Math.round(rect.y),
                       onChange: (v) => setPos("y", v)
                     }
                   ),
-                  /* @__PURE__ */ jsx3(Unit, { children: "px" })
+                  /* @__PURE__ */ jsx2(Unit, { children: "px" })
                 ] }),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx2(
                   "div",
                   {
                     style: {
                       height: 1,
                       background: "rgba(255, 255, 255, 0.08)",
-                      margin: "2px 0"
+                      margin: "1px 0"
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs3(
+                /* @__PURE__ */ jsxs2(
                   "div",
                   {
-                    style: { display: "flex", alignItems: "center", gap: 20 },
+                    style: { display: "flex", alignItems: "center", gap: 12 },
                     children: [
-                      /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
-                        /* @__PURE__ */ jsxs3(
+                      /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+                        /* @__PURE__ */ jsxs2(
                           DropBtn,
                           {
                             active: aspect !== "Free",
@@ -1059,13 +833,13 @@ function Selector({ onSelect, onCancel }) {
                               setSavedOpen(false);
                             },
                             children: [
-                              /* @__PURE__ */ jsx3(AspectIcon, {}),
+                              /* @__PURE__ */ jsx2(AspectIcon, {}),
                               aspect === "Free" ? "Free" : aspect,
-                              /* @__PURE__ */ jsx3(Chevron, {})
+                              /* @__PURE__ */ jsx2(Chevron, {})
                             ]
                           }
                         ),
-                        aspectOpen && /* @__PURE__ */ jsx3(DropMenu, { children: ASPECT_RATIOS.map((ar) => /* @__PURE__ */ jsx3(
+                        aspectOpen && /* @__PURE__ */ jsx2(DropMenu, { children: ASPECT_RATIOS.map((ar) => /* @__PURE__ */ jsx2(
                           DropItem,
                           {
                             active: ar.label === aspect,
@@ -1081,8 +855,8 @@ function Selector({ onSelect, onCancel }) {
                           ar.label
                         )) })
                       ] }),
-                      /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
-                        /* @__PURE__ */ jsxs3(
+                      /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+                        /* @__PURE__ */ jsxs2(
                           DropBtn,
                           {
                             onClick: () => {
@@ -1090,14 +864,14 @@ function Selector({ onSelect, onCancel }) {
                               setAspectOpen(false);
                             },
                             children: [
-                              /* @__PURE__ */ jsx3(SavedIcon, {}),
+                              /* @__PURE__ */ jsx2(SavedIcon, {}),
                               "Saved",
-                              /* @__PURE__ */ jsx3(Chevron, {})
+                              /* @__PURE__ */ jsx2(Chevron, {})
                             ]
                           }
                         ),
-                        savedOpen && /* @__PURE__ */ jsxs3(DropMenu, { children: [
-                          /* @__PURE__ */ jsx3(
+                        savedOpen && /* @__PURE__ */ jsxs2(DropMenu, { children: [
+                          /* @__PURE__ */ jsx2(
                             DropItem,
                             {
                               accent: true,
@@ -1105,7 +879,7 @@ function Selector({ onSelect, onCancel }) {
                               children: "Save current"
                             }
                           ),
-                          presets.length > 0 && /* @__PURE__ */ jsx3(
+                          presets.length > 0 && /* @__PURE__ */ jsx2(
                             "div",
                             {
                               style: {
@@ -1115,7 +889,7 @@ function Selector({ onSelect, onCancel }) {
                               }
                             }
                           ),
-                          presets.map((p) => /* @__PURE__ */ jsx3(
+                          presets.map((p) => /* @__PURE__ */ jsx2(
                             DropItem,
                             {
                               onClick: () => loadPreset(p),
@@ -1123,7 +897,7 @@ function Selector({ onSelect, onCancel }) {
                             },
                             p.label
                           )),
-                          presets.length === 0 && /* @__PURE__ */ jsx3(
+                          presets.length === 0 && /* @__PURE__ */ jsx2(
                             "div",
                             {
                               style: {
@@ -1139,21 +913,77 @@ function Selector({ onSelect, onCancel }) {
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx3(
+                (onViewport || onFullPage || onComponent) && /* @__PURE__ */ jsxs2(Fragment, { children: [
+                  /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      style: {
+                        height: 1,
+                        background: "rgba(255, 255, 255, 0.08)",
+                        margin: "1px 0"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2(
+                    "div",
+                    {
+                      style: { display: "flex", alignItems: "center", gap: 4 },
+                      children: [
+                        onViewport && /* @__PURE__ */ jsxs2(ModeBtn, { onClick: onViewport, children: [
+                          /* @__PURE__ */ jsx2(ViewportIcon, {}),
+                          "Viewport"
+                        ] }),
+                        onFullPage && /* @__PURE__ */ jsxs2(ModeBtn, { onClick: onFullPage, children: [
+                          /* @__PURE__ */ jsx2(FullPageIcon, {}),
+                          "Full Page"
+                        ] }),
+                        onComponent && /* @__PURE__ */ jsxs2(ModeBtn, { onClick: onComponent, children: [
+                          /* @__PURE__ */ jsx2(ComponentIcon, {}),
+                          "Component"
+                        ] })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 6
+                    },
+                    children: /* @__PURE__ */ jsx2(
+                      MagnetToggle,
+                      {
+                        enabled: magnet,
+                        onToggle: () => {
+                          const next = !magnet;
+                          setMagnet(next);
+                          try {
+                            localStorage.setItem("ab-magnet", String(next));
+                          } catch {
+                          }
+                        }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
                   "div",
                   {
                     style: {
-                      fontSize: 11,
+                      fontSize: 10,
                       color: "rgba(255, 255, 255, 0.25)",
                       textAlign: "center"
                     },
-                    children: "Enter to capture \xB7 Esc to cancel"
+                    children: "Click area or Enter to capture \xB7 Esc to cancel"
                   }
                 )
               ]
             }
           ),
-          !placed && /* @__PURE__ */ jsxs3(
+          !placed && /* @__PURE__ */ jsxs2(
             "div",
             {
               style: {
@@ -1178,7 +1008,7 @@ function Selector({ onSelect, onCancel }) {
             }
           )
         ] }),
-        !rect && /* @__PURE__ */ jsx3(
+        !rect && /* @__PURE__ */ jsxs2(
           "div",
           {
             style: {
@@ -1186,13 +1016,57 @@ function Selector({ onSelect, onCancel }) {
               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)"
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 16,
+              fontFamily: "system-ui, -apple-system, sans-serif"
             },
-            children: "Drag to select an area \xB7 Esc to cancel"
+            children: [
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    color: "rgba(255, 255, 255, 0.7)",
+                    fontSize: 14,
+                    pointerEvents: "none",
+                    textShadow: "0 1px 4px rgba(0, 0, 0, 0.5)"
+                  },
+                  children: "Drag to select an area \xB7 Esc to cancel"
+                }
+              ),
+              (onViewport || onFullPage || onComponent) && /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  onMouseDown: (e) => e.stopPropagation(),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                    background: "rgba(32, 32, 36, 0.92)",
+                    backdropFilter: "blur(20px)",
+                    WebkitBackdropFilter: "blur(20px)",
+                    border: "1px solid rgba(255, 255, 255, 0.1)",
+                    borderRadius: 8,
+                    padding: "6px 8px"
+                  },
+                  children: [
+                    onViewport && /* @__PURE__ */ jsxs2(ModeBtn, { onClick: onViewport, children: [
+                      /* @__PURE__ */ jsx2(ViewportIcon, {}),
+                      "Viewport"
+                    ] }),
+                    onFullPage && /* @__PURE__ */ jsxs2(ModeBtn, { onClick: onFullPage, children: [
+                      /* @__PURE__ */ jsx2(FullPageIcon, {}),
+                      "Full Page"
+                    ] }),
+                    onComponent && /* @__PURE__ */ jsxs2(ModeBtn, { onClick: onComponent, children: [
+                      /* @__PURE__ */ jsx2(ComponentIcon, {}),
+                      "Component"
+                    ] })
+                  ]
+                }
+              )
+            ]
           }
         )
       ]
@@ -1203,14 +1077,14 @@ function Row({
   label,
   children
 }) {
-  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+    /* @__PURE__ */ jsx2(
       "span",
       {
         style: {
-          width: 64,
-          fontSize: 13,
-          color: "rgba(255, 255, 255, 0.45)",
+          width: 36,
+          fontSize: 11,
+          color: "rgba(255, 255, 255, 0.4)",
           fontWeight: 400,
           flexShrink: 0
         },
@@ -1221,13 +1095,13 @@ function Row({
   ] });
 }
 function Sep({ children }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       style: {
-        fontSize: 13,
+        fontSize: 11,
         color: "rgba(255, 255, 255, 0.35)",
-        width: 14,
+        width: 12,
         textAlign: "center",
         flexShrink: 0,
         visibility: children ? "visible" : "hidden"
@@ -1237,11 +1111,11 @@ function Sep({ children }) {
   );
 }
 function Unit({ children }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       style: {
-        fontSize: 12,
+        fontSize: 10,
         color: "rgba(255, 255, 255, 0.3)",
         flexShrink: 0
       },
@@ -1255,10 +1129,10 @@ function NumInput({
 }) {
   const [editing, setEditing] = useState3(false);
   const [text, setText] = useState3(String(value));
-  useEffect3(() => {
+  useEffect2(() => {
     if (!editing) setText(String(value));
   }, [value, editing]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "input",
     {
       type: "text",
@@ -1276,13 +1150,13 @@ function NumInput({
         if (e.key === "Enter") e.target.blur();
       },
       style: {
-        width: 72,
-        padding: "6px 10px",
+        width: 52,
+        padding: "3px 6px",
         background: "rgba(255, 255, 255, 0.07)",
         border: "1px solid rgba(255, 255, 255, 0.1)",
-        borderRadius: 6,
+        borderRadius: 4,
         color: "rgba(255, 255, 255, 0.9)",
-        fontSize: 14,
+        fontSize: 12,
         fontFamily: "system-ui, -apple-system, sans-serif",
         textAlign: "center",
         outline: "none"
@@ -1295,28 +1169,28 @@ function DropBtn({
   onClick,
   active
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       onClick,
       style: {
         display: "flex",
         alignItems: "center",
-        gap: 6,
+        gap: 4,
         background: "none",
         border: "none",
         color: active ? "rgba(147, 130, 220, 0.9)" : "rgba(255, 255, 255, 0.5)",
         cursor: "pointer",
-        fontSize: 13,
+        fontSize: 11,
         fontFamily: "inherit",
-        padding: "4px 2px"
+        padding: "2px 0"
       },
       children
     }
   );
 }
 function DropMenu({ children }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       style: {
@@ -1343,7 +1217,7 @@ function DropItem({
   active,
   accent
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       onClick,
@@ -1364,7 +1238,7 @@ function DropItem({
   );
 }
 function Chevron() {
-  return /* @__PURE__ */ jsx3("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx2(
     "path",
     {
       d: "M3 4l2 2.5L7 4",
@@ -1374,8 +1248,8 @@ function Chevron() {
   ) });
 }
 function AspectIcon() {
-  return /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+    /* @__PURE__ */ jsx2(
       "rect",
       {
         x: "2",
@@ -1388,7 +1262,7 @@ function AspectIcon() {
         strokeDasharray: "2 1.5"
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx2(
       "line",
       {
         x1: "6.33",
@@ -1400,7 +1274,7 @@ function AspectIcon() {
         strokeDasharray: "1.5 1"
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx2(
       "line",
       {
         x1: "9.67",
@@ -1415,7 +1289,7 @@ function AspectIcon() {
   ] });
 }
 function SavedIcon() {
-  return /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx2(
     "rect",
     {
       x: "2",
@@ -1429,15 +1303,200 @@ function SavedIcon() {
     }
   ) });
 }
+function ModeBtn({
+  children,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 5,
+        background: "rgba(255, 255, 255, 0.06)",
+        border: "1px solid rgba(255, 255, 255, 0.08)",
+        borderRadius: 6,
+        color: "rgba(255, 255, 255, 0.55)",
+        cursor: "pointer",
+        fontSize: 11,
+        fontFamily: "inherit",
+        padding: "4px 8px",
+        transition: "background 0.1s, color 0.1s"
+      },
+      onMouseEnter: (e) => {
+        const btn = e.currentTarget;
+        btn.style.background = "rgba(255, 255, 255, 0.12)";
+        btn.style.color = "rgba(255, 255, 255, 0.85)";
+      },
+      onMouseLeave: (e) => {
+        const btn = e.currentTarget;
+        btn.style.background = "rgba(255, 255, 255, 0.06)";
+        btn.style.color = "rgba(255, 255, 255, 0.55)";
+      },
+      children
+    }
+  );
+}
+function MagnetToggle({
+  enabled,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      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__ */ jsx2(MagnetIcon, {}),
+        "Magnet"
+      ]
+    }
+  );
+}
+function MagnetIcon() {
+  return /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: "M4 2v4a4 4 0 008 0V2",
+        stroke: "currentColor",
+        strokeWidth: "1.3",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx2("line", { x1: "4", y1: "2", x2: "4", y2: "5", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx2("line", { x1: "12", y1: "2", x2: "12", y2: "5", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" })
+  ] });
+}
+function ViewportIcon() {
+  return /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
+    /* @__PURE__ */ jsx2(
+      "rect",
+      {
+        x: "1",
+        y: "2",
+        width: "14",
+        height: "11",
+        rx: "1.5",
+        stroke: "currentColor",
+        strokeWidth: "1.3"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "line",
+      {
+        x1: "1",
+        y1: "14",
+        x2: "15",
+        y2: "14",
+        stroke: "currentColor",
+        strokeWidth: "1.3",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function FullPageIcon() {
+  return /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
+    /* @__PURE__ */ jsx2(
+      "rect",
+      {
+        x: "3",
+        y: "1",
+        width: "10",
+        height: "14",
+        rx: "1.5",
+        stroke: "currentColor",
+        strokeWidth: "1.3"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "line",
+      {
+        x1: "5.5",
+        y1: "4",
+        x2: "10.5",
+        y2: "4",
+        stroke: "currentColor",
+        strokeWidth: "1",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "line",
+      {
+        x1: "5.5",
+        y1: "6.5",
+        x2: "10.5",
+        y2: "6.5",
+        stroke: "currentColor",
+        strokeWidth: "1",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "line",
+      {
+        x1: "5.5",
+        y1: "9",
+        x2: "10.5",
+        y2: "9",
+        stroke: "currentColor",
+        strokeWidth: "1",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function ComponentIcon() {
+  return /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: "M3 2l2.5 10 2-3.5L11 11 3 2z",
+        stroke: "currentColor",
+        strokeWidth: "1.2",
+        strokeLinejoin: "round",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "rect",
+      {
+        x: "8",
+        y: "5",
+        width: "6.5",
+        height: "6.5",
+        rx: "1",
+        stroke: "currentColor",
+        strokeWidth: "1.1",
+        strokeDasharray: "2 1.5"
+      }
+    )
+  ] });
+}
 
 // src/overlay/ui/inspector.tsx
-import { useEffect as useEffect4, useRef as useRef4, useCallback as useCallback5, useState as useState4 } from "react";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef3, useCallback as useCallback4, useState as useState4 } from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function Inspector({ onSelect, onCancel }) {
   const [highlight, setHighlight] = useState4(null);
-  const hoveredEl = useRef4(null);
-  const styleEl = useRef4(null);
-  useEffect4(() => {
+  const hoveredEl = useRef3(null);
+  const styleEl = useRef3(null);
+  useEffect3(() => {
     const style = document.createElement("style");
     style.setAttribute("data-afterbefore", "true");
     style.textContent = "*, *::before, *::after { cursor: crosshair !important; }";
@@ -1447,7 +1506,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;
@@ -1455,7 +1514,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)) {
@@ -1475,7 +1534,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [isOverlayElement]
   );
-  const handleClick = useCallback5(
+  const handleClick = useCallback4(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1486,7 +1545,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [onSelect]
   );
-  const handleKeyDown = useCallback5(
+  const handleKeyDown = useCallback4(
     (e) => {
       if (e.key === "Escape") {
         onCancel();
@@ -1494,7 +1553,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [onCancel]
   );
-  useEffect4(() => {
+  useEffect3(() => {
     document.addEventListener("mousemove", handleMouseMove, true);
     document.addEventListener("click", handleClick, true);
     document.addEventListener("keydown", handleKeyDown);
@@ -1504,9 +1563,9 @@ function Inspector({ onSelect, onCancel }) {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [handleMouseMove, handleClick, handleKeyDown]);
-  return /* @__PURE__ */ jsxs4("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: [
-    highlight && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-      /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: [
+    highlight && /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx3(
         "div",
         {
           style: {
@@ -1522,7 +1581,7 @@ function Inspector({ onSelect, onCancel }) {
           }
         }
       ),
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx3(
         "div",
         {
           style: {
@@ -1543,7 +1602,7 @@ function Inspector({ onSelect, onCancel }) {
         }
       )
     ] }),
-    !highlight && /* @__PURE__ */ jsx4(
+    !highlight && /* @__PURE__ */ jsx3(
       "div",
       {
         style: {
@@ -1567,18 +1626,18 @@ function Inspector({ onSelect, onCancel }) {
 }
 
 // src/overlay/ui/status.tsx
-import { useState as useState5, useRef as useRef5, useEffect as useEffect5, useCallback as useCallback6 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState5, useRef as useRef4, useEffect as useEffect4, useCallback as useCallback5 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var PANEL_WIDTH = 220;
 function Status({ onReset, position, onClose }) {
-  const panelRef = useRef5(null);
+  const panelRef = useRef4(null);
   const [toast, setToast] = useState5(null);
   const [pushing, setPushing] = useState5(false);
-  const showToast = useCallback6((message, type) => {
+  const showToast = useCallback5((message, type) => {
     setToast({ message, type });
     setTimeout(() => setToast(null), 3e3);
   }, []);
-  useEffect5(() => {
+  useEffect4(() => {
     const handler = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         onClose();
@@ -1587,7 +1646,7 @@ function Status({ onReset, position, onClose }) {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [onClose]);
-  useEffect5(() => {
+  useEffect4(() => {
     const handler = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -1663,7 +1722,7 @@ function Status({ onReset, position, onClose }) {
   const onLeave = (e) => {
     e.currentTarget.style.background = "transparent";
   };
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: panelRef,
@@ -1682,7 +1741,7 @@ function Status({ onReset, position, onClose }) {
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4(
           "div",
           {
             style: {
@@ -1695,8 +1754,8 @@ function Status({ onReset, position, onClose }) {
             children: "Before & After captured"
           }
         ),
-        /* @__PURE__ */ jsxs5("div", { style: { padding: "0 4px 4px" }, children: [
-          /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs4("div", { style: { padding: "0 4px 4px" }, children: [
+          /* @__PURE__ */ jsxs4(
             "button",
             {
               style: buttonStyle,
@@ -1704,12 +1763,12 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx5(FolderIcon, {}),
+                /* @__PURE__ */ jsx4(FolderIcon, {}),
                 "Open Folder"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsxs4(
             "button",
             {
               style: buttonStyle,
@@ -1717,12 +1776,12 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx5(CopyIcon, {}),
+                /* @__PURE__ */ jsx4(CopyIcon, {}),
                 "Copy Markdown"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsxs4(
             "button",
             {
               style: buttonStyle,
@@ -1731,12 +1790,12 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx5(PushIcon, {}),
+                /* @__PURE__ */ jsx4(PushIcon, {}),
                 pushing ? "Pushing..." : "Push to PR"
               ]
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx4(
             "div",
             {
               style: {
@@ -1746,7 +1805,7 @@ function Status({ onReset, position, onClose }) {
               }
             }
           ),
-          /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsxs4(
             "button",
             {
               style: { ...buttonStyle, color: "rgba(255,255,255,0.5)" },
@@ -1754,13 +1813,13 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx5(ResetIcon, {}),
+                /* @__PURE__ */ jsx4(ResetIcon, {}),
                 "Reset"
               ]
             }
           )
         ] }),
-        toast && /* @__PURE__ */ jsx5(
+        toast && /* @__PURE__ */ jsx4(
           "div",
           {
             style: {
@@ -1786,14 +1845,14 @@ function Status({ onReset, position, onClose }) {
   );
 }
 function FolderIcon() {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     "svg",
     {
       width: "14",
       height: "14",
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.5)" },
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx4(
         "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",
@@ -1806,7 +1865,7 @@ function FolderIcon() {
   );
 }
 function CopyIcon() {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "svg",
     {
       width: "14",
@@ -1814,7 +1873,7 @@ function CopyIcon() {
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.5)" },
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4(
           "rect",
           {
             x: "4",
@@ -1827,7 +1886,7 @@ function CopyIcon() {
             strokeWidth: "1.3"
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4(
           "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",
@@ -1841,14 +1900,14 @@ function CopyIcon() {
   );
 }
 function PushIcon() {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     "svg",
     {
       width: "14",
       height: "14",
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.5)" },
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx4(
         "path",
         {
           d: "M7 11V3m0 0L4 6m3-3l3 3",
@@ -1863,7 +1922,7 @@ function PushIcon() {
   );
 }
 function ResetIcon() {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "svg",
     {
       width: "14",
@@ -1871,7 +1930,7 @@ function ResetIcon() {
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.4)" },
       children: [
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4(
           "path",
           {
             d: "M2.5 7a4.5 4.5 0 118 2.5",
@@ -1881,7 +1940,7 @@ function ResetIcon() {
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx4(
           "path",
           {
             d: "M2.5 3v4h4",
@@ -1898,7 +1957,7 @@ function ResetIcon() {
 }
 
 // src/overlay/index.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 async function saveCapture(type, mode, dataUrl) {
   try {
     const res = await fetch("/__afterbefore/save", {
@@ -1916,29 +1975,36 @@ async function saveCapture(type, mode, dataUrl) {
 }
 function AfterBefore() {
   const { state, captureComplete, reset } = useOverlayState();
-  const [menuOpen, setMenuOpen] = useState6(false);
   const [statusOpen, setStatusOpen] = useState6(false);
   const [selectorActive, setSelectorActive] = useState6(false);
   const [inspectorActive, setInspectorActive] = useState6(false);
   const [loading, setLoading] = useState6(false);
-  const iconPos = useRef6({ x: 24, y: 0 });
-  const handlePositionChange = useCallback7(
+  const iconPos = useRef5({ x: 24, y: 0 });
+  useEffect5(() => {
+    if (state.phase === "ready") {
+      const timer = setTimeout(() => {
+        reset();
+        setStatusOpen(false);
+      }, 1500);
+      return () => clearTimeout(timer);
+    }
+  }, [state.phase, reset]);
+  const handlePositionChange = useCallback6(
     (pos) => {
       iconPos.current = pos;
     },
     []
   );
-  const handleIconClick = useCallback7(() => {
+  const handleIconClick = useCallback6(() => {
     if (loading) return;
     if (state.phase === "ready") {
       setStatusOpen((prev) => !prev);
-      setMenuOpen(false);
     } else {
-      setMenuOpen((prev) => !prev);
+      setSelectorActive((prev) => !prev);
       setStatusOpen(false);
     }
   }, [state.phase, loading]);
-  const performCapture = useCallback7(
+  const performCapture = useCallback6(
     async (mode, area, element) => {
       setLoading(true);
       try {
@@ -1958,52 +2024,47 @@ function AfterBefore() {
     },
     [state.phase, captureComplete]
   );
-  const handleModeSelect = useCallback7(
-    (mode) => {
-      setMenuOpen(false);
-      if (mode === "area") {
-        setSelectorActive(true);
-      } else if (mode === "component") {
-        setInspectorActive(true);
-      } else {
-        performCapture(mode);
-      }
-    },
-    [performCapture]
-  );
-  const handleComponentSelect = useCallback7(
+  const handleViewportCapture = useCallback6(() => {
+    setSelectorActive(false);
+    performCapture("viewport");
+  }, [performCapture]);
+  const handleFullPageCapture = useCallback6(() => {
+    setSelectorActive(false);
+    performCapture("fullpage");
+  }, [performCapture]);
+  const handleComponentMode = useCallback6(() => {
+    setSelectorActive(false);
+    setInspectorActive(true);
+  }, []);
+  const handleComponentSelect = useCallback6(
     (element) => {
       setInspectorActive(false);
       performCapture("component", void 0, element);
     },
     [performCapture]
   );
-  const handleComponentCancel = useCallback7(() => {
+  const handleComponentCancel = useCallback6(() => {
     setInspectorActive(false);
   }, []);
-  const handleAreaSelect = useCallback7(
+  const handleAreaSelect = useCallback6(
     (area) => {
       setSelectorActive(false);
       performCapture("area", area);
     },
     [performCapture]
   );
-  const handleAreaCancel = useCallback7(() => {
+  const handleAreaCancel = useCallback6(() => {
     setSelectorActive(false);
   }, []);
-  const handleReset = useCallback7(() => {
+  const handleReset = useCallback6(() => {
     reset();
     setStatusOpen(false);
-    setMenuOpen(false);
   }, [reset]);
-  const handleMenuClose = useCallback7(() => {
-    setMenuOpen(false);
-  }, []);
-  const handleStatusClose = useCallback7(() => {
+  const handleStatusClose = useCallback6(() => {
     setStatusOpen(false);
   }, []);
-  return /* @__PURE__ */ jsxs6("div", { "data-afterbefore": "true", children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs5("div", { "data-afterbefore": "true", children: [
+    /* @__PURE__ */ jsx5(
       Icon,
       {
         phase: state.phase,
@@ -2012,17 +2073,18 @@ function AfterBefore() {
         onPositionChange: handlePositionChange
       }
     ),
-    menuOpen && (state.phase === "idle" || state.phase === "captured-before") && /* @__PURE__ */ jsx6(
-      Menu,
+    selectorActive && /* @__PURE__ */ jsx5(
+      Selector,
       {
-        onSelect: handleModeSelect,
-        onClose: handleMenuClose,
-        position: iconPos.current
+        onSelect: handleAreaSelect,
+        onCancel: handleAreaCancel,
+        onViewport: handleViewportCapture,
+        onFullPage: handleFullPageCapture,
+        onComponent: handleComponentMode
       }
     ),
-    selectorActive && /* @__PURE__ */ jsx6(Selector, { onSelect: handleAreaSelect, onCancel: handleAreaCancel }),
-    inspectorActive && /* @__PURE__ */ jsx6(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel }),
-    statusOpen && state.phase === "ready" && /* @__PURE__ */ jsx6(
+    inspectorActive && /* @__PURE__ */ jsx5(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel }),
+    statusOpen && state.phase === "ready" && /* @__PURE__ */ jsx5(
       Status,
       {
         onReset: handleReset,