afterbefore 0.2.2 → 0.2.3

package/dist/overlay/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/overlay/index.tsx
-import { useState as useState5, useCallback as useCallback6, useRef as useRef5 } from "react";
+import { useState as useState6, useCallback as useCallback7, useRef as useRef6 } from "react";
 
 // src/overlay/state.ts
 import { useState, useCallback } from "react";
@@ -35,7 +35,7 @@ function useOverlayState() {
 // src/overlay/capture.ts
 import { toPng } from "html-to-image";
 async function capture(options) {
-  const { mode, area } = options;
+  const { mode, area, element } = options;
   if (mode === "viewport") {
     return captureViewport();
   }
@@ -45,6 +45,9 @@ async function capture(options) {
   if (mode === "area" && area) {
     return captureArea(area);
   }
+  if (mode === "component" && element) {
+    return captureComponent(element);
+  }
   throw new Error(`Invalid capture mode: ${mode}`);
 }
 async function captureViewport() {
@@ -102,6 +105,12 @@ async function captureArea(area) {
   );
   return canvas.toDataURL("image/png");
 }
+async function captureComponent(element) {
+  const dataUrl = await toPng(element, {
+    filter: filterOverlay
+  });
+  return dataUrl;
+}
 function loadImage(src) {
   return new Promise((resolve, reject) => {
     const img = new Image();
@@ -466,9 +475,41 @@ var modes = [
         }
       )
     ] })
+  },
+  {
+    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 MENU_WIDTH = 160;
+var PILL_WIDTH = 220;
+var BTN_SIZE = 36;
 function Menu({ onSelect, onClose, position }) {
   const menuRef = useRef2(null);
   const handleClickOutside = useCallback3(
@@ -497,10 +538,10 @@ function Menu({ onSelect, onClose, position }) {
   }, [handleClickOutside, handleKeyDown]);
   const menuLeft = Math.max(
     8,
-    Math.min(position.x - MENU_WIDTH / 2 + 20, window.innerWidth - MENU_WIDTH - 8)
+    Math.min(position.x - PILL_WIDTH / 2 + 20, window.innerWidth - PILL_WIDTH - 8)
   );
   const menuBottom = window.innerHeight - position.y + 8;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       ref: menuRef,
@@ -509,128 +550,338 @@ function Menu({ onSelect, onClose, position }) {
         position: "fixed",
         left: menuLeft,
         bottom: menuBottom,
-        width: MENU_WIDTH,
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
         background: "rgba(24, 24, 27, 0.95)",
-        borderRadius: 10,
-        padding: 4,
+        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__ */ jsxs2(
-        "button",
-        {
-          onClick: () => onSelect(mode),
-          style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            width: "100%",
-            padding: "8px 10px",
-            border: "none",
-            background: "transparent",
-            color: "rgba(255,255,255,0.9)",
-            fontSize: 13,
-            borderRadius: 6,
-            cursor: "pointer",
-            textAlign: "left",
-            transition: "background 0.1s"
-          },
-          onMouseEnter: (e) => {
-            e.currentTarget.style.background = "rgba(255,255,255,0.1)";
-          },
-          onMouseLeave: (e) => {
-            e.currentTarget.style.background = "transparent";
+      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
           },
-          children: [
-            /* @__PURE__ */ jsx2(
-              "span",
+          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",
               {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  color: "rgba(255,255,255,0.6)"
-                },
-                children: icon
+                d: "M3 3l8 8M11 3l-8 8",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
               }
-            ),
-            label
-          ]
-        },
-        mode
-      ))
+            ) })
+          }
+        )
+      ]
     }
   );
 }
 
 // src/overlay/ui/selector.tsx
-import { useState as useState3, useRef as useRef3, useCallback as useCallback4, useEffect as useEffect3 } from "react";
+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";
-var MIN_SIZE = 10;
+var HANDLE_R = 6;
+var HANDLE_HIT = 16;
+var MIN_SIZE = 20;
+var PANEL_HEIGHT_EST = 200;
+var ASPECT_RATIOS = [
+  { label: "Free", value: 0 },
+  { label: "16:9", value: 16 / 9 },
+  { label: "4:3", value: 4 / 3 },
+  { label: "1:1", value: 1 },
+  { label: "3:2", value: 3 / 2 },
+  { label: "21:9", value: 21 / 9 }
+];
 function Selector({ onSelect, onCancel }) {
-  const [selection, setSelection] = useState3(null);
-  const dragging = useRef3(false);
-  const handleKeyDown = useCallback4(
-    (e) => {
+  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(
+    () => {
+      try {
+        const s = localStorage.getItem("ab-area-presets");
+        return s ? JSON.parse(s) : [];
+      } catch {
+        return [];
+      }
+    }
+  );
+  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 ratio = ASPECT_RATIOS.find((a) => a.label === aspect)?.value ?? 0;
+  useEffect3(() => {
+    const onKey = (e) => {
+      if (e.target?.tagName === "INPUT") {
+        if (e.key === "Escape") e.target.blur();
+        return;
+      }
       if (e.key === "Escape") {
-        onCancel();
+        if (placed) {
+          setPlaced(false);
+          setRect(null);
+        } else {
+          onCancel();
+        }
+      } else if (e.key === "Enter" && placed && rect) {
+        onSelect({
+          x: Math.round(rect.x),
+          y: Math.round(rect.y),
+          width: Math.round(rect.w),
+          height: Math.round(rect.h)
+        });
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [placed, rect, onSelect, onCancel]);
+  const hitCorner = useCallback4(
+    (mx, my, r) => {
+      const cs = [
+        ["tl", r.x, r.y],
+        ["tr", r.x + r.w, r.y],
+        ["bl", r.x, r.y + r.h],
+        ["br", r.x + r.w, r.y + r.h]
+      ];
+      for (const [c, cx, cy] of cs) {
+        if (Math.abs(mx - cx) <= HANDLE_HIT && Math.abs(my - cy) <= HANDLE_HIT)
+          return c;
       }
+      return null;
     },
-    [onCancel]
+    []
   );
-  useEffect3(() => {
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [handleKeyDown]);
-  const handleMouseDown = useCallback4((e) => {
-    e.preventDefault();
-    dragging.current = true;
-    setSelection({
-      startX: e.clientX,
-      startY: e.clientY,
-      endX: e.clientX,
-      endY: e.clientY
-    });
-  }, []);
-  const handleMouseMove = useCallback4((e) => {
-    if (!dragging.current) return;
-    setSelection((prev) => {
-      if (!prev) return prev;
-      return { ...prev, endX: e.clientX, endY: e.clientY };
-    });
-  }, []);
-  const handleMouseUp = useCallback4(() => {
-    if (!dragging.current || !selection) return;
-    dragging.current = false;
-    const x = Math.min(selection.startX, selection.endX);
-    const y = Math.min(selection.startY, selection.endY);
-    const width = Math.abs(selection.endX - selection.startX);
-    const height = Math.abs(selection.endY - selection.startY);
-    if (width >= MIN_SIZE && height >= MIN_SIZE) {
-      onSelect({ x, y, width, height });
-    } else {
-      setSelection(null);
+  const hitInside = useCallback4(
+    (mx, my, r) => mx >= r.x && mx <= r.x + r.w && my >= r.y && my <= r.y + r.h,
+    []
+  );
+  const onDown = useCallback4(
+    (e) => {
+      if (panelRef.current?.contains(e.target)) return;
+      e.preventDefault();
+      setAspectOpen(false);
+      setSavedOpen(false);
+      const mx = e.clientX, my = e.clientY;
+      if (placed && rect) {
+        const c = hitCorner(mx, my, rect);
+        if (c) {
+          mode.current = "resizing";
+          corner.current = c;
+          start.current = { x: mx, y: my };
+          snap.current = { ...rect };
+          return;
+        }
+        if (hitInside(mx, my, rect)) {
+          mode.current = "moving";
+          start.current = { x: mx, y: my };
+          snap.current = { ...rect };
+          return;
+        }
+        setPlaced(false);
+      }
+      mode.current = "drawing";
+      start.current = { x: mx, y: my };
+      setRect({ x: mx, y: my, w: 0, h: 0 });
+    },
+    [placed, rect, hitCorner, hitInside]
+  );
+  const onMove = useCallback4(
+    (e) => {
+      const mx = e.clientX, my = e.clientY;
+      if (mode.current === "drawing") {
+        const sx = start.current.x, sy = start.current.y;
+        let x = Math.min(sx, mx), y = Math.min(sy, my);
+        let w = Math.abs(mx - sx), h = Math.abs(my - sy);
+        if (ratio > 0) {
+          h = w / ratio;
+          if (my < sy) y = sy - h;
+        }
+        setRect({ 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
+        });
+      } else if (mode.current === "resizing") {
+        const o = snap.current;
+        const c = corner.current;
+        const nr = { ...o };
+        if (c === "br") {
+          nr.w = Math.max(MIN_SIZE, mx - o.x);
+          nr.h = ratio > 0 ? nr.w / ratio : Math.max(MIN_SIZE, my - o.y);
+        } else if (c === "bl") {
+          nr.w = Math.max(MIN_SIZE, o.x + o.w - mx);
+          nr.x = o.x + o.w - nr.w;
+          nr.h = ratio > 0 ? nr.w / ratio : Math.max(MIN_SIZE, my - o.y);
+        } else if (c === "tr") {
+          nr.w = Math.max(MIN_SIZE, mx - o.x);
+          nr.h = ratio > 0 ? nr.w / ratio : Math.max(MIN_SIZE, o.y + o.h - my);
+          nr.y = o.y + o.h - nr.h;
+        } else {
+          nr.w = Math.max(MIN_SIZE, o.x + o.w - mx);
+          nr.h = ratio > 0 ? nr.w / ratio : Math.max(MIN_SIZE, o.y + o.h - my);
+          nr.x = o.x + o.w - nr.w;
+          nr.y = o.y + o.h - nr.h;
+        }
+        setRect(nr);
+      } else if (placed && rect) {
+        const c = hitCorner(mx, my, rect);
+        if (c === "tl" || c === "br") setCursor("nwse-resize");
+        else if (c === "tr" || c === "bl") setCursor("nesw-resize");
+        else if (hitInside(mx, my, rect)) setCursor("move");
+        else setCursor("crosshair");
+      }
+    },
+    [ratio, placed, rect, hitCorner, hitInside]
+  );
+  const onUp = useCallback4(() => {
+    if (mode.current === "drawing" && rect) {
+      if (rect.w >= MIN_SIZE && rect.h >= MIN_SIZE) {
+        setPlaced(true);
+      } else {
+        setRect(null);
+      }
     }
-  }, [selection, onSelect]);
-  const rect = selection ? {
-    x: Math.min(selection.startX, selection.endX),
-    y: Math.min(selection.startY, selection.endY),
-    w: Math.abs(selection.endX - selection.startX),
-    h: Math.abs(selection.endY - selection.startY)
-  } : null;
+    mode.current = "none";
+  }, [rect]);
+  const setSize = useCallback4(
+    (field, v) => {
+      const n = parseInt(v, 10);
+      if (isNaN(n) || n < MIN_SIZE || !rect) return;
+      if (field === "w") {
+        setRect({ ...rect, w: n, h: ratio > 0 ? n / ratio : rect.h });
+      } else {
+        setRect({ ...rect, h: n, w: ratio > 0 ? n * ratio : rect.w });
+      }
+    },
+    [rect, ratio]
+  );
+  const setPos = useCallback4(
+    (field, v) => {
+      const n = parseInt(v, 10);
+      if (isNaN(n) || !rect) return;
+      setRect({ ...rect, [field]: n });
+    },
+    [rect]
+  );
+  const savePreset = useCallback4(() => {
+    if (!rect) return;
+    const label = `${Math.round(rect.w)}\xD7${Math.round(rect.h)}`;
+    const next = [
+      ...presets.filter((p) => p.label !== label),
+      { label, rect: { ...rect } }
+    ];
+    setPresets(next);
+    try {
+      localStorage.setItem("ab-area-presets", JSON.stringify(next));
+    } catch {
+    }
+    setSavedOpen(false);
+  }, [rect, presets]);
+  const loadPreset = useCallback4((p) => {
+    setRect({ ...p.rect });
+    setPlaced(true);
+    setSavedOpen(false);
+  }, []);
+  const activeCursor = mode.current === "moving" ? "move" : mode.current === "resizing" ? "nwse-resize" : mode.current === "drawing" ? "crosshair" : cursor;
+  const panelAbove = rect && rect.y + rect.h + PANEL_HEIGHT_EST > window.innerHeight;
+  const hasRect = rect && rect.w > 0 && rect.h > 0;
   return /* @__PURE__ */ jsxs3(
     "div",
     {
       "data-afterbefore": "true",
-      onMouseDown: handleMouseDown,
-      onMouseMove: handleMouseMove,
-      onMouseUp: handleMouseUp,
+      onMouseDown: onDown,
+      onMouseMove: onMove,
+      onMouseUp: onUp,
       style: {
         position: "fixed",
         inset: 0,
         zIndex: 2147483647,
-        cursor: "crosshair"
+        cursor: activeCursor
       },
       children: [
         /* @__PURE__ */ jsx3(
@@ -639,9 +890,9 @@ function Selector({ onSelect, onCancel }) {
             style: {
               position: "absolute",
               inset: 0,
-              background: "rgba(0, 0, 0, 0.4)",
+              background: "rgba(0, 0, 0, 0.5)",
               pointerEvents: "none",
-              ...rect && rect.w > 0 && rect.h > 0 ? {
+              ...hasRect ? {
                 clipPath: `polygon(
                   0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
                   ${rect.x}px ${rect.y}px,
@@ -654,7 +905,7 @@ function Selector({ onSelect, onCancel }) {
             }
           }
         ),
-        rect && rect.w > 0 && rect.h > 0 && /* @__PURE__ */ jsxs3(Fragment, { children: [
+        hasRect && /* @__PURE__ */ jsxs3(Fragment, { children: [
           /* @__PURE__ */ jsx3(
             "div",
             {
@@ -664,14 +915,245 @@ function Selector({ onSelect, onCancel }) {
                 top: rect.y,
                 width: rect.w,
                 height: rect.h,
-                border: "2px solid rgba(59, 130, 246, 0.8)",
-                borderRadius: 2,
-                pointerEvents: "none",
-                boxShadow: "0 0 0 1px rgba(0,0,0,0.3)"
+                border: "1.5px dashed rgba(255, 255, 255, 0.45)",
+                pointerEvents: "none"
+              }
+            }
+          ),
+          placed && [1, 2].map((i) => /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: rect.x + rect.w * i / 3,
+                  top: rect.y,
+                  width: 0,
+                  height: rect.h,
+                  borderLeft: "1px dashed rgba(255, 255, 255, 0.18)",
+                  pointerEvents: "none"
+                }
               }
+            ),
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: rect.x,
+                  top: rect.y + rect.h * i / 3,
+                  width: rect.w,
+                  height: 0,
+                  borderTop: "1px dashed rgba(255, 255, 255, 0.18)",
+                  pointerEvents: "none"
+                }
+              }
+            )
+          ] }, i)),
+          placed && [
+            [rect.x, rect.y],
+            [rect.x + rect.w, rect.y],
+            [rect.x, rect.y + rect.h],
+            [rect.x + rect.w, rect.y + rect.h]
+          ].map(([cx, cy], i) => /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: cx - HANDLE_R,
+                top: cy - HANDLE_R,
+                width: HANDLE_R * 2,
+                height: HANDLE_R * 2,
+                borderRadius: "50%",
+                border: "2px solid rgba(255, 255, 255, 0.8)",
+                background: "rgba(0, 0, 0, 0.25)",
+                pointerEvents: "none"
+              }
+            },
+            i
+          )),
+          placed && /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              ref: panelRef,
+              onMouseDown: (e) => e.stopPropagation(),
+              style: {
+                position: "absolute",
+                left: rect.x + rect.w / 2,
+                ...panelAbove ? { bottom: window.innerHeight - rect.y + 16 } : { top: rect.y + rect.h + 16 },
+                transform: "translateX(-50%)",
+                background: "rgba(32, 32, 36, 0.92)",
+                backdropFilter: "blur(20px)",
+                WebkitBackdropFilter: "blur(20px)",
+                border: "1px solid rgba(255, 255, 255, 0.1)",
+                borderRadius: 14,
+                padding: "16px 24px",
+                display: "flex",
+                flexDirection: "column",
+                gap: 12,
+                minWidth: 340,
+                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(
+                    NumInput,
+                    {
+                      value: Math.round(rect.w),
+                      onChange: (v) => setSize("w", v)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(Sep, { children: "\\u00d7" }),
+                  /* @__PURE__ */ jsx3(
+                    NumInput,
+                    {
+                      value: Math.round(rect.h),
+                      onChange: (v) => setSize("h", v)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(Unit, { children: "px" })
+                ] }),
+                /* @__PURE__ */ jsxs3(Row, { label: "Position", children: [
+                  /* @__PURE__ */ jsx3(
+                    NumInput,
+                    {
+                      value: Math.round(rect.x),
+                      onChange: (v) => setPos("x", v)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(Sep, {}),
+                  /* @__PURE__ */ jsx3(
+                    NumInput,
+                    {
+                      value: Math.round(rect.y),
+                      onChange: (v) => setPos("y", v)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(Unit, { children: "px" })
+                ] }),
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    style: {
+                      height: 1,
+                      background: "rgba(255, 255, 255, 0.08)",
+                      margin: "2px 0"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs3(
+                  "div",
+                  {
+                    style: { display: "flex", alignItems: "center", gap: 20 },
+                    children: [
+                      /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
+                        /* @__PURE__ */ jsxs3(
+                          DropBtn,
+                          {
+                            active: aspect !== "Free",
+                            onClick: () => {
+                              setAspectOpen(!aspectOpen);
+                              setSavedOpen(false);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx3(AspectIcon, {}),
+                              aspect === "Free" ? "Free" : aspect,
+                              /* @__PURE__ */ jsx3(Chevron, {})
+                            ]
+                          }
+                        ),
+                        aspectOpen && /* @__PURE__ */ jsx3(DropMenu, { children: ASPECT_RATIOS.map((ar) => /* @__PURE__ */ jsx3(
+                          DropItem,
+                          {
+                            active: ar.label === aspect,
+                            onClick: () => {
+                              setAspect(ar.label);
+                              setAspectOpen(false);
+                              if (ar.value > 0 && rect) {
+                                setRect({ ...rect, h: rect.w / ar.value });
+                              }
+                            },
+                            children: ar.label
+                          },
+                          ar.label
+                        )) })
+                      ] }),
+                      /* @__PURE__ */ jsxs3("div", { style: { position: "relative" }, children: [
+                        /* @__PURE__ */ jsxs3(
+                          DropBtn,
+                          {
+                            onClick: () => {
+                              setSavedOpen(!savedOpen);
+                              setAspectOpen(false);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx3(SavedIcon, {}),
+                              "Saved",
+                              /* @__PURE__ */ jsx3(Chevron, {})
+                            ]
+                          }
+                        ),
+                        savedOpen && /* @__PURE__ */ jsxs3(DropMenu, { children: [
+                          /* @__PURE__ */ jsx3(
+                            DropItem,
+                            {
+                              accent: true,
+                              onClick: savePreset,
+                              children: "Save current"
+                            }
+                          ),
+                          presets.length > 0 && /* @__PURE__ */ jsx3(
+                            "div",
+                            {
+                              style: {
+                                height: 1,
+                                background: "rgba(255,255,255,0.08)",
+                                margin: "4px 0"
+                              }
+                            }
+                          ),
+                          presets.map((p) => /* @__PURE__ */ jsx3(
+                            DropItem,
+                            {
+                              onClick: () => loadPreset(p),
+                              children: p.label
+                            },
+                            p.label
+                          )),
+                          presets.length === 0 && /* @__PURE__ */ jsx3(
+                            "div",
+                            {
+                              style: {
+                                padding: "6px 12px",
+                                color: "rgba(255,255,255,0.3)",
+                                fontSize: 12
+                              },
+                              children: "No saved areas"
+                            }
+                          )
+                        ] })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    style: {
+                      fontSize: 11,
+                      color: "rgba(255, 255, 255, 0.25)",
+                      textAlign: "center"
+                    },
+                    children: "Enter to capture \xB7 Esc to cancel"
+                  }
+                )
+              ]
             }
           ),
-          /* @__PURE__ */ jsxs3(
+          !placed && /* @__PURE__ */ jsxs3(
             "div",
             {
               style: {
@@ -680,7 +1162,7 @@ function Selector({ onSelect, onCancel }) {
                 top: rect.y + rect.h + 8,
                 transform: "translateX(-50%)",
                 background: "rgba(24, 24, 27, 0.9)",
-                color: "rgba(255,255,255,0.9)",
+                color: "rgba(255, 255, 255, 0.9)",
                 fontSize: 11,
                 fontFamily: "system-ui, -apple-system, monospace",
                 padding: "2px 8px",
@@ -696,7 +1178,7 @@ function Selector({ onSelect, onCancel }) {
             }
           )
         ] }),
-        !selection && /* @__PURE__ */ jsx3(
+        !rect && /* @__PURE__ */ jsx3(
           "div",
           {
             style: {
@@ -704,11 +1186,11 @@ function Selector({ onSelect, onCancel }) {
               top: "50%",
               left: "50%",
               transform: "translate(-50%, -50%)",
-              color: "rgba(255,255,255,0.7)",
+              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)"
+              textShadow: "0 1px 4px rgba(0, 0, 0, 0.5)"
             },
             children: "Drag to select an area \xB7 Esc to cancel"
           }
@@ -717,20 +1199,386 @@ function Selector({ onSelect, onCancel }) {
     }
   );
 }
+function Row({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+    /* @__PURE__ */ jsx3(
+      "span",
+      {
+        style: {
+          width: 64,
+          fontSize: 13,
+          color: "rgba(255, 255, 255, 0.45)",
+          fontWeight: 400,
+          flexShrink: 0
+        },
+        children: label
+      }
+    ),
+    children
+  ] });
+}
+function Sep({ children }) {
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      style: {
+        fontSize: 13,
+        color: "rgba(255, 255, 255, 0.35)",
+        width: 14,
+        textAlign: "center",
+        flexShrink: 0,
+        visibility: children ? "visible" : "hidden"
+      },
+      children: children || "\xD7"
+    }
+  );
+}
+function Unit({ children }) {
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      style: {
+        fontSize: 12,
+        color: "rgba(255, 255, 255, 0.3)",
+        flexShrink: 0
+      },
+      children
+    }
+  );
+}
+function NumInput({
+  value,
+  onChange
+}) {
+  const [editing, setEditing] = useState3(false);
+  const [text, setText] = useState3(String(value));
+  useEffect3(() => {
+    if (!editing) setText(String(value));
+  }, [value, editing]);
+  return /* @__PURE__ */ jsx3(
+    "input",
+    {
+      type: "text",
+      value: editing ? text : String(value),
+      onFocus: () => {
+        setEditing(true);
+        setText(String(value));
+      },
+      onBlur: () => {
+        setEditing(false);
+        onChange(text);
+      },
+      onChange: (e) => setText(e.target.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") e.target.blur();
+      },
+      style: {
+        width: 72,
+        padding: "6px 10px",
+        background: "rgba(255, 255, 255, 0.07)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        borderRadius: 6,
+        color: "rgba(255, 255, 255, 0.9)",
+        fontSize: 14,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        textAlign: "center",
+        outline: "none"
+      }
+    }
+  );
+}
+function DropBtn({
+  children,
+  onClick,
+  active
+}) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        background: "none",
+        border: "none",
+        color: active ? "rgba(147, 130, 220, 0.9)" : "rgba(255, 255, 255, 0.5)",
+        cursor: "pointer",
+        fontSize: 13,
+        fontFamily: "inherit",
+        padding: "4px 2px"
+      },
+      children
+    }
+  );
+}
+function DropMenu({ children }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        bottom: "100%",
+        left: 0,
+        marginBottom: 4,
+        background: "rgba(32, 32, 36, 0.95)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        borderRadius: 8,
+        padding: "4px 0",
+        minWidth: 110,
+        boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)",
+        backdropFilter: "blur(20px)",
+        WebkitBackdropFilter: "blur(20px)"
+      },
+      children
+    }
+  );
+}
+function DropItem({
+  children,
+  onClick,
+  active,
+  accent
+}) {
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      onClick,
+      style: {
+        display: "block",
+        width: "100%",
+        padding: "6px 12px",
+        background: active ? "rgba(255, 255, 255, 0.08)" : "none",
+        border: "none",
+        color: accent ? "rgba(147, 130, 220, 0.9)" : "rgba(255, 255, 255, 0.8)",
+        textAlign: "left",
+        cursor: "pointer",
+        fontSize: 13,
+        fontFamily: "inherit"
+      },
+      children
+    }
+  );
+}
+function Chevron() {
+  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",
+      stroke: "currentColor",
+      strokeWidth: "1.2"
+    }
+  ) });
+}
+function AspectIcon() {
+  return /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: [
+    /* @__PURE__ */ jsx3(
+      "rect",
+      {
+        x: "2",
+        y: "4",
+        width: "12",
+        height: "8",
+        rx: "1.5",
+        stroke: "currentColor",
+        strokeWidth: "1.2",
+        strokeDasharray: "2 1.5"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "line",
+      {
+        x1: "6.33",
+        y1: "4",
+        x2: "6.33",
+        y2: "12",
+        stroke: "currentColor",
+        strokeWidth: "0.8",
+        strokeDasharray: "1.5 1"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "line",
+      {
+        x1: "9.67",
+        y1: "4",
+        x2: "9.67",
+        y2: "12",
+        stroke: "currentColor",
+        strokeWidth: "0.8",
+        strokeDasharray: "1.5 1"
+      }
+    )
+  ] });
+}
+function SavedIcon() {
+  return /* @__PURE__ */ jsx3("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx3(
+    "rect",
+    {
+      x: "2",
+      y: "3",
+      width: "12",
+      height: "10",
+      rx: "1.5",
+      stroke: "currentColor",
+      strokeWidth: "1.2",
+      strokeDasharray: "2 1.5"
+    }
+  ) });
+}
+
+// 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";
+function Inspector({ onSelect, onCancel }) {
+  const [highlight, setHighlight] = useState4(null);
+  const hoveredEl = useRef4(null);
+  const styleEl = useRef4(null);
+  useEffect4(() => {
+    const style = document.createElement("style");
+    style.setAttribute("data-afterbefore", "true");
+    style.textContent = "*, *::before, *::after { cursor: crosshair !important; }";
+    document.head.appendChild(style);
+    styleEl.current = style;
+    return () => {
+      style.remove();
+    };
+  }, []);
+  const isOverlayElement = useCallback5((el) => {
+    let node = el;
+    while (node) {
+      if (node instanceof HTMLElement && node.dataset.afterbefore) return true;
+      node = node.parentElement;
+    }
+    return false;
+  }, []);
+  const handleMouseMove = useCallback5(
+    (e) => {
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      if (!el || !(el instanceof HTMLElement) || isOverlayElement(el)) {
+        setHighlight(null);
+        hoveredEl.current = null;
+        return;
+      }
+      hoveredEl.current = el;
+      const rect = el.getBoundingClientRect();
+      setHighlight({
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+        tag: el.tagName.toLowerCase() + (el.className && typeof el.className === "string" ? `.${el.className.split(" ")[0]}` : "")
+      });
+    },
+    [isOverlayElement]
+  );
+  const handleClick = useCallback5(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      if (hoveredEl.current) {
+        onSelect(hoveredEl.current);
+      }
+    },
+    [onSelect]
+  );
+  const handleKeyDown = useCallback5(
+    (e) => {
+      if (e.key === "Escape") {
+        onCancel();
+      }
+    },
+    [onCancel]
+  );
+  useEffect4(() => {
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
+      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(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            left: highlight.x,
+            top: highlight.y,
+            width: highlight.width,
+            height: highlight.height,
+            background: "rgba(59, 130, 246, 0.15)",
+            border: "2px solid rgba(59, 130, 246, 0.7)",
+            borderRadius: 2,
+            pointerEvents: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            left: highlight.x,
+            top: Math.max(0, highlight.y - 24),
+            background: "rgba(59, 130, 246, 0.9)",
+            color: "#fff",
+            fontSize: 11,
+            fontFamily: "system-ui, -apple-system, monospace",
+            padding: "2px 6px",
+            borderRadius: 3,
+            pointerEvents: "none",
+            whiteSpace: "nowrap",
+            lineHeight: "18px"
+          },
+          children: highlight.tag
+        }
+      )
+    ] }),
+    !highlight && /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          color: "rgba(255, 255, 255, 0.7)",
+          fontSize: 14,
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          pointerEvents: "none",
+          textShadow: "0 1px 4px rgba(0, 0, 0, 0.5)",
+          background: "rgba(0, 0, 0, 0.5)",
+          padding: "8px 16px",
+          borderRadius: 8
+        },
+        children: "Hover to inspect \xB7 Click to capture \xB7 Esc to cancel"
+      }
+    )
+  ] });
+}
 
 // src/overlay/ui/status.tsx
-import { useState as useState4, 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 useState5, useRef as useRef5, 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] = useState4(null);
-  const [pushing, setPushing] = useState4(false);
-  const showToast = useCallback5((message, type) => {
+  const panelRef = useRef5(null);
+  const [toast, setToast] = useState5(null);
+  const [pushing, setPushing] = useState5(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();
@@ -739,7 +1587,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();
     };
@@ -815,7 +1663,7 @@ function Status({ onReset, position, onClose }) {
   const onLeave = (e) => {
     e.currentTarget.style.background = "transparent";
   };
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: panelRef,
@@ -834,7 +1682,7 @@ function Status({ onReset, position, onClose }) {
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             style: {
@@ -847,8 +1695,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,
@@ -856,12 +1704,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,
@@ -869,12 +1717,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,
@@ -883,12 +1731,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: {
@@ -898,7 +1746,7 @@ function Status({ onReset, position, onClose }) {
               }
             }
           ),
-          /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsxs5(
             "button",
             {
               style: { ...buttonStyle, color: "rgba(255,255,255,0.5)" },
@@ -906,13 +1754,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: {
@@ -938,14 +1786,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",
@@ -958,7 +1806,7 @@ function FolderIcon() {
   );
 }
 function CopyIcon() {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       width: "14",
@@ -966,7 +1814,7 @@ function CopyIcon() {
       viewBox: "0 0 14 14",
       style: { color: "rgba(255,255,255,0.5)" },
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "rect",
           {
             x: "4",
@@ -979,7 +1827,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",
@@ -993,14 +1841,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",
@@ -1015,7 +1863,7 @@ function PushIcon() {
   );
 }
 function ResetIcon() {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       width: "14",
@@ -1023,7 +1871,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",
@@ -1033,7 +1881,7 @@ function ResetIcon() {
             strokeLinecap: "round"
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "path",
           {
             d: "M2.5 3v4h4",
@@ -1050,7 +1898,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", {
@@ -1068,18 +1916,19 @@ async function saveCapture(type, mode, dataUrl) {
 }
 function AfterBefore() {
   const { state, captureComplete, reset } = useOverlayState();
-  const [menuOpen, setMenuOpen] = useState5(false);
-  const [statusOpen, setStatusOpen] = useState5(false);
-  const [selectorActive, setSelectorActive] = useState5(false);
-  const [loading, setLoading] = useState5(false);
-  const iconPos = useRef5({ x: 24, y: 0 });
-  const handlePositionChange = useCallback6(
+  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(
     (pos) => {
       iconPos.current = pos;
     },
     []
   );
-  const handleIconClick = useCallback6(() => {
+  const handleIconClick = useCallback7(() => {
     if (loading) return;
     if (state.phase === "ready") {
       setStatusOpen((prev) => !prev);
@@ -1089,11 +1938,11 @@ function AfterBefore() {
       setStatusOpen(false);
     }
   }, [state.phase, loading]);
-  const performCapture = useCallback6(
-    async (mode, area) => {
+  const performCapture = useCallback7(
+    async (mode, area, element) => {
       setLoading(true);
       try {
-        const dataUrl = await capture({ mode, area });
+        const dataUrl = await capture({ mode, area, element });
         const type = state.phase === "idle" ? "before" : "after";
         await saveCapture(type, mode, dataUrl);
         captureComplete({
@@ -1109,40 +1958,52 @@ function AfterBefore() {
     },
     [state.phase, captureComplete]
   );
-  const handleModeSelect = useCallback6(
+  const handleModeSelect = useCallback7(
     (mode) => {
       setMenuOpen(false);
       if (mode === "area") {
         setSelectorActive(true);
+      } else if (mode === "component") {
+        setInspectorActive(true);
       } else {
         performCapture(mode);
       }
     },
     [performCapture]
   );
-  const handleAreaSelect = useCallback6(
+  const handleComponentSelect = useCallback7(
+    (element) => {
+      setInspectorActive(false);
+      performCapture("component", void 0, element);
+    },
+    [performCapture]
+  );
+  const handleComponentCancel = useCallback7(() => {
+    setInspectorActive(false);
+  }, []);
+  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);
     setMenuOpen(false);
   }, [reset]);
-  const handleMenuClose = useCallback6(() => {
+  const handleMenuClose = useCallback7(() => {
     setMenuOpen(false);
   }, []);
-  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,
@@ -1151,7 +2012,7 @@ function AfterBefore() {
         onPositionChange: handlePositionChange
       }
     ),
-    menuOpen && (state.phase === "idle" || state.phase === "captured-before") && /* @__PURE__ */ jsx5(
+    menuOpen && (state.phase === "idle" || state.phase === "captured-before") && /* @__PURE__ */ jsx6(
       Menu,
       {
         onSelect: handleModeSelect,
@@ -1159,8 +2020,9 @@ function AfterBefore() {
         position: iconPos.current
       }
     ),
-    selectorActive && /* @__PURE__ */ jsx5(Selector, { onSelect: handleAreaSelect, onCancel: handleAreaCancel }),
-    statusOpen && state.phase === "ready" && /* @__PURE__ */ jsx5(
+    selectorActive && /* @__PURE__ */ jsx6(Selector, { onSelect: handleAreaSelect, onCancel: handleAreaCancel }),
+    inspectorActive && /* @__PURE__ */ jsx6(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel }),
+    statusOpen && state.phase === "ready" && /* @__PURE__ */ jsx6(
       Status,
       {
         onReset: handleReset,