afterbefore 0.2.6 → 0.2.7

package/dist/overlay/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/overlay/index.tsx
-import { useState as useState6, useCallback as useCallback6, useRef as useRef5, useEffect as useEffect5 } from "react";
+import { useState as useState7, useCallback as useCallback7, useRef as useRef5, useEffect as useEffect6 } from "react";
 
 // src/overlay/state.ts
 import { useState, useCallback } from "react";
@@ -368,9 +368,308 @@ 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);
+  useEffect2(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onCancel();
+      else if (e.key === "Enter") onCapture(selectedMode);
+    };
+    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(
+          "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
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          "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"
+            },
+            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) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function CloseButton({ onClick }) {
+  const [hovered, setHovered] = useState3(false);
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      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
+      },
+      children: /* @__PURE__ */ jsx2("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M3 3l6 6M9 3l-6 6",
+          stroke: "rgba(255, 255, 255, 0.6)",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ) })
+    }
+  );
+}
+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/selector.tsx
-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";
+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;
@@ -384,13 +683,13 @@ var ASPECT_RATIOS = [
   { label: "3:2", value: 3 / 2 },
   { label: "21:9", value: 21 / 9 }
 ];
-function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
-  const [rect, setRect] = useState3(null);
-  const [placed, setPlaced] = useState3(false);
-  const [aspect, setAspect] = useState3("Free");
-  const [aspectOpen, setAspectOpen] = useState3(false);
-  const [savedOpen, setSavedOpen] = useState3(false);
-  const [presets, setPresets] = useState3(
+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");
@@ -400,22 +699,22 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
       }
     }
   );
-  const [cursor, setCursor] = useState3("crosshair");
-  const [magnet, setMagnet] = useState3(() => {
+  const [cursor, setCursor] = useState4("crosshair");
+  const [magnet, setMagnet] = useState4(() => {
     try {
       return localStorage.getItem("ab-magnet") !== "false";
     } catch {
       return true;
     }
   });
-  const [snappedX, setSnappedX] = useState3(false);
+  const [snappedX, setSnappedX] = useState4(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;
-  const applySnap = useCallback3(
+  const applySnap = useCallback4(
     (r) => {
       if (!magnet) {
         setSnappedX(false);
@@ -433,7 +732,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
     },
     [magnet]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     const onKey = (e) => {
       if (e.target?.tagName === "INPUT") {
         if (e.key === "Escape") e.target.blur();
@@ -458,7 +757,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [placed, rect, onSelect, onCancel]);
-  const hitCorner = useCallback3(
+  const hitCorner = useCallback4(
     (mx, my, r) => {
       const cs = [
         ["tl", r.x, r.y],
@@ -474,11 +773,11 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
     },
     []
   );
-  const hitInside = useCallback3(
+  const hitInside = useCallback4(
     (mx, my, r) => mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h,
     []
   );
-  const onDown = useCallback3(
+  const onDown = useCallback4(
     (e) => {
       if (panelRef.current?.contains(e.target)) return;
       e.preventDefault();
@@ -508,7 +807,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
     },
     [placed, rect, hitCorner, hitInside]
   );
-  const onMove = useCallback3(
+  const onMove = useCallback4(
     (e) => {
       const mx = e.clientX, my = e.clientY;
       if (mode.current === "drawing") {
@@ -561,7 +860,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
     },
     [ratio, placed, rect, hitCorner, hitInside, applySnap]
   );
-  const onUp = useCallback3(
+  const onUp = useCallback4(
     (e) => {
       const prevMode = mode.current;
       if (prevMode === "drawing" && rect) {
@@ -587,7 +886,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
     },
     [rect, placed, onSelect]
   );
-  const setSize = useCallback3(
+  const setSize = useCallback4(
     (field, v) => {
       const n = parseInt(v, 10);
       if (isNaN(n) || n < MIN_SIZE || !rect) return;
@@ -599,7 +898,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
     },
     [rect, ratio]
   );
-  const setPos = useCallback3(
+  const setPos = useCallback4(
     (field, v) => {
       const n = parseInt(v, 10);
       if (isNaN(n) || !rect) return;
@@ -607,7 +906,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
     },
     [rect]
   );
-  const savePreset = useCallback3(() => {
+  const savePreset = useCallback4(() => {
     if (!rect) return;
     const label = `${Math.round(rect.w)}\xD7${Math.round(rect.h)}`;
     const next = [
@@ -621,7 +920,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
     }
     setSavedOpen(false);
   }, [rect, presets]);
-  const loadPreset = useCallback3((p) => {
+  const loadPreset = useCallback4((p) => {
     setRect({ ...p.rect });
     setPlaced(true);
     setSavedOpen(false);
@@ -629,7 +928,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
   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__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       "data-afterbefore": "true",
@@ -643,7 +942,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
         cursor: activeCursor
       },
       children: [
-        snappedX && /* @__PURE__ */ jsx2(
+        snappedX && /* @__PURE__ */ jsx3(
           "div",
           {
             style: {
@@ -658,7 +957,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
             }
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           "div",
           {
             style: {
@@ -679,8 +978,8 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
             }
           }
         ),
-        hasRect && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2(
+        hasRect && /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx3(
             "div",
             {
               style: {
@@ -694,8 +993,8 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
               }
             }
           ),
-          placed && [1, 2].map((i) => /* @__PURE__ */ jsxs2(React2.Fragment, { children: [
-            /* @__PURE__ */ jsx2(
+          placed && [1, 2].map((i) => /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
+            /* @__PURE__ */ jsx3(
               "div",
               {
                 style: {
@@ -709,7 +1008,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
                 }
               }
             ),
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx3(
               "div",
               {
                 style: {
@@ -729,7 +1028,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
             [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__ */ jsx2(
+          ].map(([cx, cy], i) => /* @__PURE__ */ jsx3(
             "div",
             {
               style: {
@@ -746,7 +1045,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
             },
             i
           )),
-          placed && /* @__PURE__ */ jsxs2(
+          placed && /* @__PURE__ */ jsxs3(
             "div",
             {
               ref: panelRef,
@@ -772,43 +1071,43 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
                 zIndex: 1
               },
               children: [
-                /* @__PURE__ */ jsxs2(Row, { label: "Size", children: [
-                  /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsxs3(Row, { label: "Size", children: [
+                  /* @__PURE__ */ jsx3(
                     NumInput,
                     {
                       value: Math.round(rect.w),
                       onChange: (v) => setSize("w", v)
                     }
                   ),
-                  /* @__PURE__ */ jsx2(Sep, { children: "\xD7" }),
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3(Sep, { children: "\xD7" }),
+                  /* @__PURE__ */ jsx3(
                     NumInput,
                     {
                       value: Math.round(rect.h),
                       onChange: (v) => setSize("h", v)
                     }
                   ),
-                  /* @__PURE__ */ jsx2(Unit, { children: "px" })
+                  /* @__PURE__ */ jsx3(Unit, { children: "px" })
                 ] }),
-                /* @__PURE__ */ jsxs2(Row, { label: "Position", children: [
-                  /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsxs3(Row, { label: "Position", children: [
+                  /* @__PURE__ */ jsx3(
                     NumInput,
                     {
                       value: Math.round(rect.x),
                       onChange: (v) => setPos("x", v)
                     }
                   ),
-                  /* @__PURE__ */ jsx2(Sep, {}),
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3(Sep, {}),
+                  /* @__PURE__ */ jsx3(
                     NumInput,
                     {
                       value: Math.round(rect.y),
                       onChange: (v) => setPos("y", v)
                     }
                   ),
-                  /* @__PURE__ */ jsx2(Unit, { children: "px" })
+                  /* @__PURE__ */ jsx3(Unit, { children: "px" })
                 ] }),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "div",
                   {
                     style: {
@@ -818,13 +1117,13 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs2(
+                /* @__PURE__ */ jsxs3(
                   "div",
                   {
                     style: { display: "flex", alignItems: "center", gap: 12 },
                     children: [
-                      /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
-                        /* @__PURE__ */ jsxs2(
+                      /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
+                        /* @__PURE__ */ jsxs3(
                           DropBtn,
                           {
                             active: aspect !== "Free",
@@ -833,13 +1132,13 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
                               setSavedOpen(false);
                             },
                             children: [
-                              /* @__PURE__ */ jsx2(AspectIcon, {}),
+                              /* @__PURE__ */ jsx3(AspectIcon, {}),
                               aspect === "Free" ? "Free" : aspect,
-                              /* @__PURE__ */ jsx2(Chevron, {})
+                              /* @__PURE__ */ jsx3(Chevron, {})
                             ]
                           }
                         ),
-                        aspectOpen && /* @__PURE__ */ jsx2(DropMenu, { children: ASPECT_RATIOS.map((ar) => /* @__PURE__ */ jsx2(
+                        aspectOpen && /* @__PURE__ */ jsx3(DropMenu, { children: ASPECT_RATIOS.map((ar) => /* @__PURE__ */ jsx3(
                           DropItem,
                           {
                             active: ar.label === aspect,
@@ -855,8 +1154,8 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
                           ar.label
                         )) })
                       ] }),
-                      /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
-                        /* @__PURE__ */ jsxs2(
+                      /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
+                        /* @__PURE__ */ jsxs3(
                           DropBtn,
                           {
                             onClick: () => {
@@ -864,14 +1163,14 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
                               setAspectOpen(false);
                             },
                             children: [
-                              /* @__PURE__ */ jsx2(SavedIcon, {}),
+                              /* @__PURE__ */ jsx3(SavedIcon, {}),
                               "Saved",
-                              /* @__PURE__ */ jsx2(Chevron, {})
+                              /* @__PURE__ */ jsx3(Chevron, {})
                             ]
                           }
                         ),
-                        savedOpen && /* @__PURE__ */ jsxs2(DropMenu, { children: [
-                          /* @__PURE__ */ jsx2(
+                        savedOpen && /* @__PURE__ */ jsxs3(DropMenu, { children: [
+                          /* @__PURE__ */ jsx3(
                             DropItem,
                             {
                               accent: true,
@@ -879,7 +1178,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
                               children: "Save current"
                             }
                           ),
-                          presets.length > 0 && /* @__PURE__ */ jsx2(
+                          presets.length > 0 && /* @__PURE__ */ jsx3(
                             "div",
                             {
                               style: {
@@ -889,7 +1188,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
                               }
                             }
                           ),
-                          presets.map((p) => /* @__PURE__ */ jsx2(
+                          presets.map((p) => /* @__PURE__ */ jsx3(
                             DropItem,
                             {
                               onClick: () => loadPreset(p),
@@ -897,7 +1196,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
                             },
                             p.label
                           )),
-                          presets.length === 0 && /* @__PURE__ */ jsx2(
+                          presets.length === 0 && /* @__PURE__ */ jsx3(
                             "div",
                             {
                               style: {
@@ -913,39 +1212,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
                     ]
                   }
                 ),
-                (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(
+                /* @__PURE__ */ jsx3(
                   "div",
                   {
                     style: {
@@ -953,7 +1220,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
                       alignItems: "center",
                       gap: 6
                     },
-                    children: /* @__PURE__ */ jsx2(
+                    children: /* @__PURE__ */ jsx3(
                       MagnetToggle,
                       {
                         enabled: magnet,
@@ -969,7 +1236,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "div",
                   {
                     style: {
@@ -983,7 +1250,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
               ]
             }
           ),
-          !placed && /* @__PURE__ */ jsxs2(
+          !placed && /* @__PURE__ */ jsxs3(
             "div",
             {
               style: {
@@ -1008,7 +1275,7 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
             }
           )
         ] }),
-        !rect && /* @__PURE__ */ jsxs2(
+        !rect && /* @__PURE__ */ jsx3(
           "div",
           {
             style: {
@@ -1016,57 +1283,13 @@ function Selector({ onSelect, onCancel, onViewport, onFullPage, onComponent }) {
               top: "50%",
               left: "50%",
               transform: "translate(-50%, -50%)",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              gap: 16,
-              fontFamily: "system-ui, -apple-system, sans-serif"
+              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: [
-              /* @__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"
-                    ] })
-                  ]
-                }
-              )
-            ]
+            children: "Drag to select an area \xB7 Esc to cancel"
           }
         )
       ]
@@ -1077,8 +1300,8 @@ function Row({
   label,
   children
 }) {
-  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+    /* @__PURE__ */ jsx3(
       "span",
       {
         style: {
@@ -1095,7 +1318,7 @@ function Row({
   ] });
 }
 function Sep({ children }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "span",
     {
       style: {
@@ -1111,7 +1334,7 @@ function Sep({ children }) {
   );
 }
 function Unit({ children }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "span",
     {
       style: {
@@ -1127,12 +1350,12 @@ function NumInput({
   value,
   onChange
 }) {
-  const [editing, setEditing] = useState3(false);
-  const [text, setText] = useState3(String(value));
-  useEffect2(() => {
+  const [editing, setEditing] = useState4(false);
+  const [text, setText] = useState4(String(value));
+  useEffect3(() => {
     if (!editing) setText(String(value));
   }, [value, editing]);
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "input",
     {
       type: "text",
@@ -1169,7 +1392,7 @@ function DropBtn({
   onClick,
   active
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "button",
     {
       onClick,
@@ -1190,7 +1413,7 @@ function DropBtn({
   );
 }
 function DropMenu({ children }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       style: {
@@ -1217,7 +1440,7 @@ function DropItem({
   active,
   accent
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "button",
     {
       onClick,
@@ -1238,7 +1461,7 @@ function DropItem({
   );
 }
 function Chevron() {
-  return /* @__PURE__ */ jsx2("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsx3(
     "path",
     {
       d: "M3 4l2 2.5L7 4",
@@ -1248,8 +1471,8 @@ function Chevron() {
   ) });
 }
 function AspectIcon() {
-  return /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+    /* @__PURE__ */ jsx3(
       "rect",
       {
         x: "2",
@@ -1262,7 +1485,7 @@ function AspectIcon() {
         strokeDasharray: "2 1.5"
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3(
       "line",
       {
         x1: "6.33",
@@ -1274,7 +1497,7 @@ function AspectIcon() {
         strokeDasharray: "1.5 1"
       }
     ),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3(
       "line",
       {
         x1: "9.67",
@@ -1289,7 +1512,7 @@ function AspectIcon() {
   ] });
 }
 function SavedIcon() {
-  return /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx3(
     "rect",
     {
       x: "2",
@@ -1303,47 +1526,11 @@ 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(
+  return /* @__PURE__ */ jsxs3(
     "button",
     {
       onClick: onToggle,
@@ -1360,15 +1547,15 @@ function MagnetToggle({
         padding: "2px 0"
       },
       children: [
-        /* @__PURE__ */ jsx2(MagnetIcon, {}),
+        /* @__PURE__ */ jsx3(MagnetIcon, {}),
         "Magnet"
       ]
     }
   );
 }
 function MagnetIcon() {
-  return /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", children: [
-    /* @__PURE__ */ jsx2(
+  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",
@@ -1377,126 +1564,19 @@ function MagnetIcon() {
         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"
-      }
-    )
+    /* @__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" })
   ] });
 }
 
 // src/overlay/ui/inspector.tsx
-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";
+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";
 function Inspector({ onSelect, onCancel }) {
-  const [highlight, setHighlight] = useState4(null);
+  const [highlight, setHighlight] = useState5(null);
   const hoveredEl = useRef3(null);
   const styleEl = useRef3(null);
-  useEffect3(() => {
+  useEffect4(() => {
     const style = document.createElement("style");
     style.setAttribute("data-afterbefore", "true");
     style.textContent = "*, *::before, *::after { cursor: crosshair !important; }";
@@ -1506,7 +1586,7 @@ function Inspector({ onSelect, onCancel }) {
       style.remove();
     };
   }, []);
-  const isOverlayElement = useCallback4((el) => {
+  const isOverlayElement = useCallback5((el) => {
     let node = el;
     while (node) {
       if (node instanceof HTMLElement && node.dataset.afterbefore) return true;
@@ -1514,7 +1594,7 @@ function Inspector({ onSelect, onCancel }) {
     }
     return false;
   }, []);
-  const handleMouseMove = useCallback4(
+  const handleMouseMove = useCallback5(
     (e) => {
       const el = document.elementFromPoint(e.clientX, e.clientY);
       if (!el || !(el instanceof HTMLElement) || isOverlayElement(el)) {
@@ -1534,7 +1614,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [isOverlayElement]
   );
-  const handleClick = useCallback4(
+  const handleClick = useCallback5(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1545,7 +1625,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [onSelect]
   );
-  const handleKeyDown = useCallback4(
+  const handleKeyDown = useCallback5(
     (e) => {
       if (e.key === "Escape") {
         onCancel();
@@ -1553,7 +1633,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [onCancel]
   );
-  useEffect3(() => {
+  useEffect4(() => {
     document.addEventListener("mousemove", handleMouseMove, true);
     document.addEventListener("click", handleClick, true);
     document.addEventListener("keydown", handleKeyDown);
@@ -1563,9 +1643,9 @@ function Inspector({ onSelect, onCancel }) {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [handleMouseMove, handleClick, handleKeyDown]);
-  return /* @__PURE__ */ jsxs3("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: [
-    highlight && /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs4("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: [
+    highlight && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+      /* @__PURE__ */ jsx4(
         "div",
         {
           style: {
@@ -1581,7 +1661,7 @@ function Inspector({ onSelect, onCancel }) {
           }
         }
       ),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "div",
         {
           style: {
@@ -1602,7 +1682,7 @@ function Inspector({ onSelect, onCancel }) {
         }
       )
     ] }),
-    !highlight && /* @__PURE__ */ jsx3(
+    !highlight && /* @__PURE__ */ jsx4(
       "div",
       {
         style: {
@@ -1626,18 +1706,18 @@ function Inspector({ onSelect, onCancel }) {
 }
 
 // src/overlay/ui/status.tsx
-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";
+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";
 var PANEL_WIDTH = 220;
 function Status({ onReset, position, onClose }) {
   const panelRef = useRef4(null);
-  const [toast, setToast] = useState5(null);
-  const [pushing, setPushing] = useState5(false);
-  const showToast = useCallback5((message, type) => {
+  const [toast, setToast] = useState6(null);
+  const [pushing, setPushing] = useState6(false);
+  const showToast = useCallback6((message, type) => {
     setToast({ message, type });
     setTimeout(() => setToast(null), 3e3);
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     const handler = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         onClose();
@@ -1646,7 +1726,7 @@ function Status({ onReset, position, onClose }) {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [onClose]);
-  useEffect4(() => {
+  useEffect5(() => {
     const handler = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -1722,7 +1802,7 @@ function Status({ onReset, position, onClose }) {
   const onLeave = (e) => {
     e.currentTarget.style.background = "transparent";
   };
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: panelRef,
@@ -1741,7 +1821,7 @@ function Status({ onReset, position, onClose }) {
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             style: {
@@ -1754,8 +1834,8 @@ function Status({ onReset, position, onClose }) {
             children: "Before & After captured"
           }
         ),
-        /* @__PURE__ */ jsxs4("div", { style: { padding: "0 4px 4px" }, children: [
-          /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs5("div", { style: { padding: "0 4px 4px" }, children: [
+          /* @__PURE__ */ jsxs5(
             "button",
             {
               style: buttonStyle,
@@ -1763,12 +1843,12 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx4(FolderIcon, {}),
+                /* @__PURE__ */ jsx5(FolderIcon, {}),
                 "Open Folder"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsxs5(
             "button",
             {
               style: buttonStyle,
@@ -1776,12 +1856,12 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx4(CopyIcon, {}),
+                /* @__PURE__ */ jsx5(CopyIcon, {}),
                 "Copy Markdown"
               ]
             }
           ),
-          /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsxs5(
             "button",
             {
               style: buttonStyle,
@@ -1790,12 +1870,12 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx4(PushIcon, {}),
+                /* @__PURE__ */ jsx5(PushIcon, {}),
                 pushing ? "Pushing..." : "Push to PR"
               ]
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "div",
             {
               style: {
@@ -1805,7 +1885,7 @@ function Status({ onReset, position, onClose }) {
               }
             }
           ),
-          /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsxs5(
             "button",
             {
               style: { ...buttonStyle, color: "rgba(255,255,255,0.5)" },
@@ -1813,13 +1893,13 @@ function Status({ onReset, position, onClose }) {
               onMouseEnter: onEnter,
               onMouseLeave: onLeave,
               children: [
-                /* @__PURE__ */ jsx4(ResetIcon, {}),
+                /* @__PURE__ */ jsx5(ResetIcon, {}),
                 "Reset"
               ]
             }
           )
         ] }),
-        toast && /* @__PURE__ */ jsx4(
+        toast && /* @__PURE__ */ jsx5(
           "div",
           {
             style: {
@@ -1845,14 +1925,14 @@ function Status({ onReset, position, onClose }) {
   );
 }
 function FolderIcon() {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "svg",
     {
       width: "14",
       height: "14",
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.5)" },
-      children: /* @__PURE__ */ jsx4(
+      children: /* @__PURE__ */ jsx5(
         "path",
         {
           d: "M1.5 3A1.5 1.5 0 013 1.5h2.38a1 1 0 01.72.3L7 2.72a1 1 0 00.72.3H11A1.5 1.5 0 0112.5 4.5v6A1.5 1.5 0 0111 12H3A1.5 1.5 0 011.5 10.5V3z",
@@ -1865,7 +1945,7 @@ function FolderIcon() {
   );
 }
 function CopyIcon() {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       width: "14",
@@ -1873,7 +1953,7 @@ function CopyIcon() {
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.5)" },
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "rect",
           {
             x: "4",
@@ -1886,7 +1966,7 @@ function CopyIcon() {
             strokeWidth: "1.3"
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "path",
           {
             d: "M10 4V2.5A1.5 1.5 0 008.5 1h-6A1.5 1.5 0 001 2.5v6A1.5 1.5 0 002.5 10H4",
@@ -1900,14 +1980,14 @@ function CopyIcon() {
   );
 }
 function PushIcon() {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "svg",
     {
       width: "14",
       height: "14",
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.5)" },
-      children: /* @__PURE__ */ jsx4(
+      children: /* @__PURE__ */ jsx5(
         "path",
         {
           d: "M7 11V3m0 0L4 6m3-3l3 3",
@@ -1922,7 +2002,7 @@ function PushIcon() {
   );
 }
 function ResetIcon() {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       width: "14",
@@ -1930,7 +2010,7 @@ function ResetIcon() {
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.4)" },
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "path",
           {
             d: "M2.5 7a4.5 4.5 0 118 2.5",
@@ -1940,7 +2020,7 @@ function ResetIcon() {
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "path",
           {
             d: "M2.5 3v4h4",
@@ -1957,7 +2037,7 @@ function ResetIcon() {
 }
 
 // src/overlay/index.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 async function saveCapture(type, mode, dataUrl) {
   try {
     const res = await fetch("/__afterbefore/save", {
@@ -1975,12 +2055,13 @@ async function saveCapture(type, mode, dataUrl) {
 }
 function AfterBefore() {
   const { state, captureComplete, reset } = useOverlayState();
-  const [statusOpen, setStatusOpen] = useState6(false);
-  const [selectorActive, setSelectorActive] = useState6(false);
-  const [inspectorActive, setInspectorActive] = useState6(false);
-  const [loading, setLoading] = useState6(false);
+  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 iconPos = useRef5({ x: 24, y: 0 });
-  useEffect5(() => {
+  useEffect6(() => {
     if (state.phase === "ready") {
       const timer = setTimeout(() => {
         reset();
@@ -1989,22 +2070,24 @@ function AfterBefore() {
       return () => clearTimeout(timer);
     }
   }, [state.phase, reset]);
-  const handlePositionChange = useCallback6(
+  const handlePositionChange = useCallback7(
     (pos) => {
       iconPos.current = pos;
     },
     []
   );
-  const handleIconClick = useCallback6(() => {
+  const handleIconClick = useCallback7(() => {
     if (loading) return;
     if (state.phase === "ready") {
       setStatusOpen((prev) => !prev);
     } else {
-      setSelectorActive((prev) => !prev);
+      setToolbarActive((prev) => !prev);
+      setSelectorActive(false);
+      setInspectorActive(false);
       setStatusOpen(false);
     }
   }, [state.phase, loading]);
-  const performCapture = useCallback6(
+  const performCapture = useCallback7(
     async (mode, area, element) => {
       setLoading(true);
       try {
@@ -2024,47 +2107,53 @@ function AfterBefore() {
     },
     [state.phase, captureComplete]
   );
-  const handleViewportCapture = useCallback6(() => {
-    setSelectorActive(false);
-    performCapture("viewport");
-  }, [performCapture]);
-  const handleFullPageCapture = useCallback6(() => {
-    setSelectorActive(false);
-    performCapture("fullpage");
-  }, [performCapture]);
-  const handleComponentMode = useCallback6(() => {
-    setSelectorActive(false);
-    setInspectorActive(true);
+  const handleToolbarCapture = useCallback7(
+    (mode) => {
+      setToolbarActive(false);
+      if (mode === "area") {
+        setSelectorActive(true);
+      } else if (mode === "viewport") {
+        performCapture("viewport");
+      } else if (mode === "fullpage") {
+        performCapture("fullpage");
+      } else if (mode === "component") {
+        setInspectorActive(true);
+      }
+    },
+    [performCapture]
+  );
+  const handleToolbarCancel = useCallback7(() => {
+    setToolbarActive(false);
   }, []);
-  const handleComponentSelect = useCallback6(
+  const handleComponentSelect = useCallback7(
     (element) => {
       setInspectorActive(false);
       performCapture("component", void 0, element);
     },
     [performCapture]
   );
-  const handleComponentCancel = useCallback6(() => {
+  const handleComponentCancel = useCallback7(() => {
     setInspectorActive(false);
   }, []);
-  const handleAreaSelect = useCallback6(
+  const handleAreaSelect = useCallback7(
     (area) => {
       setSelectorActive(false);
       performCapture("area", area);
     },
     [performCapture]
   );
-  const handleAreaCancel = useCallback6(() => {
+  const handleAreaCancel = useCallback7(() => {
     setSelectorActive(false);
   }, []);
-  const handleReset = useCallback6(() => {
+  const handleReset = useCallback7(() => {
     reset();
     setStatusOpen(false);
   }, [reset]);
-  const handleStatusClose = useCallback6(() => {
+  const handleStatusClose = useCallback7(() => {
     setStatusOpen(false);
   }, []);
-  return /* @__PURE__ */ jsxs5("div", { "data-afterbefore": "true", children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs6("div", { "data-afterbefore": "true", children: [
+    /* @__PURE__ */ jsx6(
       Icon,
       {
         phase: state.phase,
@@ -2073,18 +2162,16 @@ function AfterBefore() {
         onPositionChange: handlePositionChange
       }
     ),
-    selectorActive && /* @__PURE__ */ jsx5(
+    toolbarActive && !selectorActive && !inspectorActive && /* @__PURE__ */ jsx6(Toolbar, { onCapture: handleToolbarCapture, onCancel: handleToolbarCancel }),
+    selectorActive && /* @__PURE__ */ jsx6(
       Selector,
       {
         onSelect: handleAreaSelect,
-        onCancel: handleAreaCancel,
-        onViewport: handleViewportCapture,
-        onFullPage: handleFullPageCapture,
-        onComponent: handleComponentMode
+        onCancel: handleAreaCancel
       }
     ),
-    inspectorActive && /* @__PURE__ */ jsx5(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel }),
-    statusOpen && state.phase === "ready" && /* @__PURE__ */ jsx5(
+    inspectorActive && /* @__PURE__ */ jsx6(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel }),
+    statusOpen && state.phase === "ready" && /* @__PURE__ */ jsx6(
       Status,
       {
         onReset: handleReset,