afterbefore 0.2.17 → 0.2.18

package/dist/overlay/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/overlay/index.tsx
-import { useState as useState4, useCallback as useCallback4, useEffect as useEffect3 } from "react";
+import { useState as useState5, useCallback as useCallback4, useEffect as useEffect4 } from "react";
 
 // src/overlay/state.ts
 import { useState, useCallback } from "react";
@@ -178,477 +178,228 @@ function loadImage(src) {
 }
 
 // src/overlay/ui/toolbar.tsx
-import { useCallback as useCallback2, useEffect, useRef, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
 import {
   ArrowUp,
   Camera,
   Check,
-  ChevronDown,
+  ChevronDown as ChevronDown2,
   Clock,
   Eye,
   FolderOpen,
-  Frame,
-  ImageIcon,
   LoaderCircle,
   Maximize,
   Monitor,
   MousePointer2,
-  Palette,
   Settings,
+  Trash2 as Trash22,
+  X as X2
+} from "lucide-react";
+
+// src/overlay/ui/settings-panel.tsx
+import { useEffect, useRef, useState as useState2 } from "react";
+import {
+  ChevronDown,
+  ImageIcon,
+  Palette,
   Trash2,
   Upload,
   X
 } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var EDGE_MARGIN = 24;
-var CONTAINER_SIZE = 38;
-function getCornerStyle(corner) {
-  switch (corner) {
-    case "bottom-right":
-      return { bottom: EDGE_MARGIN, right: EDGE_MARGIN };
-    case "bottom-left":
-      return { bottom: EDGE_MARGIN, left: EDGE_MARGIN };
-    case "top-right":
-      return { top: EDGE_MARGIN, right: EDGE_MARGIN };
-    case "top-left":
-      return { top: EDGE_MARGIN, left: EDGE_MARGIN };
-  }
-}
-function isBottomCorner(corner) {
-  return corner === "bottom-right" || corner === "bottom-left";
-}
-function isRightCorner(corner) {
-  return corner === "bottom-right" || corner === "top-right";
-}
-function snapToCorner(x, y) {
-  const cx = window.innerWidth / 2;
-  const cy = window.innerHeight / 2;
-  if (x < cx) {
-    return y < cy ? "top-left" : "bottom-left";
-  }
-  return y < cy ? "top-right" : "bottom-right";
-}
-var MODES = [
-  { mode: "component", label: "Component", icon: MousePointer2 },
-  { mode: "viewport", label: "Viewport", icon: Monitor },
-  { mode: "fullpage", label: "Full Page", icon: Maximize }
-];
-function Toolbar({
-  expanded,
-  onToggle,
-  phase,
-  loading,
+function SettingsPanel({
+  style,
+  onClose,
   selectedMode,
-  onModeChange,
-  onCapture,
-  onCancel,
   frameSettings,
   onFrameSettingsChange
 }) {
-  const [settingsOpen, setSettingsOpen] = useState2(false);
-  const [historyOpen, setHistoryOpen] = useState2(false);
-  const [corner, setCorner] = useState2(() => {
+  const [saveDir, setSaveDir] = useState2(null);
+  const [picking, setPicking] = useState2(false);
+  useEffect(() => {
+    fetch("/__afterbefore/config").then((r) => r.json()).then((data) => setSaveDir(data.saveDir)).catch(() => {
+    });
+  }, []);
+  const handlePickFolder = async () => {
+    setPicking(true);
     try {
-      const stored = localStorage.getItem("ab-toolbar-corner");
-      if (stored && ["bottom-right", "bottom-left", "top-right", "top-left"].includes(stored)) {
-        return stored;
+      const res = await fetch("/__afterbefore/pick-folder", { method: "POST" });
+      const data = await res.json();
+      if (data.folder) {
+        await fetch("/__afterbefore/config", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ saveDir: data.folder })
+        });
+        setSaveDir(data.folder);
       }
     } catch {
+    } finally {
+      setPicking(false);
     }
-    return "bottom-right";
-  });
-  const [dragging, setDragging] = useState2(false);
-  const [dragPos, setDragPos] = useState2(null);
-  const dragState = useRef(null);
-  const toolbarRef = useRef(null);
-  const [cameraHovered, setCameraHovered] = useState2(false);
-  useEffect(() => {
-    if (!expanded) return;
-    const onKey = (e) => {
-      if (e.target?.tagName === "INPUT") {
-        if (e.key === "Escape") {
-          e.target.blur();
-        }
-        return;
-      }
-      if (e.key === "Escape") {
-        if (settingsOpen) {
-          setSettingsOpen(false);
-          return;
-        }
-        onCancel();
-      } else if (e.key === "Enter") {
-        onCapture(selectedMode);
-      }
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [expanded, onCancel, onCapture, selectedMode, settingsOpen]);
-  const handleMouseDown = useCallback2(
-    (e) => {
-      e.preventDefault();
-      const el = toolbarRef.current;
-      if (!el) return;
-      const rect = el.getBoundingClientRect();
-      setDragging(true);
-      setDragPos({ x: rect.left, y: rect.top });
-      dragState.current = {
-        dragging: true,
-        startX: e.clientX,
-        startY: e.clientY,
-        origX: rect.left,
-        origY: rect.top,
-        distance: 0
-      };
-    },
-    []
-  );
-  useEffect(() => {
-    const handleMouseMove = (e) => {
-      const ds = dragState.current;
-      if (!ds || !ds.dragging) return;
-      const dx = e.clientX - ds.startX;
-      const dy = e.clientY - ds.startY;
-      ds.distance = Math.sqrt(dx * dx + dy * dy);
-      setDragPos({
-        x: ds.origX + dx,
-        y: ds.origY + dy
-      });
-    };
-    const handleMouseUp = (e) => {
-      const ds = dragState.current;
-      if (!ds) return;
-      if (ds.distance < 5) {
-        onToggle();
-      } else {
-        const el = toolbarRef.current;
-        const w = el?.offsetWidth ?? CONTAINER_SIZE;
-        const h = el?.offsetHeight ?? CONTAINER_SIZE;
-        const centerX = ds.origX + (e.clientX - ds.startX) + w / 2;
-        const centerY = ds.origY + (e.clientY - ds.startY) + h / 2;
-        const newCorner = snapToCorner(centerX, centerY);
-        setCorner(newCorner);
-        try {
-          localStorage.setItem("ab-toolbar-corner", newCorner);
-        } catch {
-        }
-      }
-      setDragging(false);
-      setDragPos(null);
-      dragState.current = null;
-    };
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [onToggle]);
-  const panelSide = isRightCorner(corner) ? "left" : "right";
-  const tooltipSide = panelSide;
-  const bottom = isBottomCorner(corner);
-  const positionStyle = dragging && dragPos ? { left: dragPos.x, top: dragPos.y } : getCornerStyle(corner);
-  const cameraButton = /* @__PURE__ */ jsxs(
+  };
+  const shortDir = saveDir ? saveDir.replace(/^\/Users\/[^/]+/, "~") : "~/Desktop";
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      onMouseDown: handleMouseDown,
-      onMouseEnter: () => setCameraHovered(true),
-      onMouseLeave: () => setCameraHovered(false),
       style: {
-        width: 32,
-        height: 32,
-        borderRadius: "50%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: dragging ? "grabbing" : "pointer",
-        background: cameraHovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
-        transition: "background 0.12s ease"
+        minWidth: 300,
+        padding: "12px 16px",
+        borderRadius: 12,
+        background: "rgb(32, 32, 36)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        boxShadow: "0 14px 36px rgba(0, 0, 0, 0.32)",
+        ...style
       },
       children: [
-        /* @__PURE__ */ jsx(
-          "style",
-          {
-            dangerouslySetInnerHTML: {
-              __html: `
-@keyframes ab-spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}`
+        /* @__PURE__ */ jsx(SettingsHeader, { onClose }),
+        /* @__PURE__ */ jsx(SettingsDivider, {}),
+        selectedMode === "component" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            SettingsRow,
+            {
+              title: "Frame",
+              description: "Wrap in a sized canvas with background",
+              control: /* @__PURE__ */ jsx(
+                ToggleSwitch,
+                {
+                  enabled: frameSettings.enabled,
+                  onChange: () => onFrameSettingsChange({ ...frameSettings, enabled: !frameSettings.enabled })
+                }
+              )
             }
-          }
-        ),
-        loading ? /* @__PURE__ */ jsx(
-          LoaderCircle,
-          {
-            size: 16,
-            strokeWidth: 2,
-            style: { animation: "ab-spin 0.8s linear infinite", color: "white" }
-          }
-        ) : phase === "ready" ? /* @__PURE__ */ jsx(Check, { size: 16, strokeWidth: 2.6, color: "#4ade80" }) : /* @__PURE__ */ jsx(
-          Camera,
+          ),
+          frameSettings.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(SettingsDivider, {}),
+            /* @__PURE__ */ jsx(
+              FrameSizeControl,
+              {
+                size: frameSettings.size,
+                onChange: (size) => onFrameSettingsChange({ ...frameSettings, size })
+              }
+            ),
+            /* @__PURE__ */ jsx(SettingsDivider, {}),
+            /* @__PURE__ */ jsx(
+              FrameBackgroundControl,
+              {
+                bgType: frameSettings.bgType,
+                bgColor: frameSettings.bgColor,
+                bgImage: frameSettings.bgImage,
+                frameSize: frameSettings.size,
+                onChange: (updates) => onFrameSettingsChange({ ...frameSettings, ...updates })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(SettingsDivider, {})
+        ] }),
+        /* @__PURE__ */ jsx(
+          SettingsRow,
           {
-            size: 16,
-            strokeWidth: 1.9,
-            color: cameraHovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)"
+            title: "Save Location",
+            description: /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  display: "block"
+                },
+                title: shortDir,
+                children: shortDir
+              }
+            ),
+            control: /* @__PURE__ */ jsx(SmallButton, { onClick: handlePickFolder, children: picking ? "..." : "Change" })
           }
         )
       ]
     }
   );
-  const toolbarButtons = expanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(IconButton, { tooltipSide, tooltip: "Close", onClick: onCancel, children: /* @__PURE__ */ jsx(X, { size: 16, strokeWidth: 1.7 }) }),
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, padding: "4px 0" }, children: MODES.map(({ mode, label, icon: ModeIcon }) => /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        active: selectedMode === mode,
-        tooltipSide,
-        tooltip: label,
-        onClick: () => {
-          setSettingsOpen(false);
-          setHistoryOpen(false);
-          if (mode === "viewport" || mode === "fullpage") {
-            onModeChange(mode);
-            onCapture(mode);
-          } else {
-            onModeChange(mode);
-          }
-        },
-        children: /* @__PURE__ */ jsx(ModeIcon, { size: 16, strokeWidth: 1.7 })
-      },
-      mode
-    )) }),
-    /* @__PURE__ */ jsx(Separator, { vertical: false }),
+}
+function SettingsHeader({ onClose }) {
+  const [hovered, setHovered] = useState2(false);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingBottom: 8 }, children: [
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 600, color: "rgba(255, 255, 255, 0.92)" }, children: "Settings" }),
     /* @__PURE__ */ jsx(
-      SettingsButton,
+      "button",
       {
-        open: settingsOpen,
-        onClick: () => {
-          setSettingsOpen((prev) => !prev);
-          setHistoryOpen(false);
+        onClick: onClose,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: {
+          width: 24,
+          height: 24,
+          borderRadius: 6,
+          border: "none",
+          background: hovered ? "rgba(255, 255, 255, 0.1)" : "transparent",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+          color: hovered ? "rgba(255, 255, 255, 0.8)" : "rgba(255, 255, 255, 0.46)",
+          padding: 0,
+          transition: "background 0.12s ease, color 0.12s ease"
         },
-        selectedMode,
-        frameSettings,
-        onFrameSettingsChange,
-        panelSide,
-        tooltipSide
+        children: /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 2 })
       }
-    ),
-    /* @__PURE__ */ jsx(
-      HistoryButton,
-      {
-        open: historyOpen,
-        onClick: () => {
-          setHistoryOpen((prev) => !prev);
-          setSettingsOpen(false);
-        },
-        panelSide,
-        tooltipSide
-      }
-    ),
-    /* @__PURE__ */ jsx(Separator, { vertical: false })
-  ] }) : null;
+    )
+  ] });
+}
+function SettingsRow({
+  title,
+  description,
+  control
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "14px 0" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 3, flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "rgba(255, 255, 255, 0.92)" }, children: title }),
+      description && /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "rgba(255, 255, 255, 0.42)", lineHeight: 1.3 }, children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: control })
+  ] });
+}
+function SettingsDivider() {
+  return /* @__PURE__ */ jsx("div", { style: { height: 1, background: "rgba(255, 255, 255, 0.08)" } });
+}
+function ToggleSwitch({
+  enabled,
+  onChange
+}) {
   return /* @__PURE__ */ jsx(
-    "div",
+    "button",
     {
-      ref: toolbarRef,
-      "data-afterbefore": "true",
+      type: "button",
+      onClick: onChange,
       style: {
-        position: "fixed",
-        ...positionStyle,
-        zIndex: 2147483647,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        background: "rgb(32, 32, 36)",
+        width: 38,
+        height: 22,
         borderRadius: 999,
-        padding: 6,
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
-        fontFamily: "system-ui, -apple-system, sans-serif",
-        userSelect: "none"
+        border: "none",
+        background: enabled ? "#38bdf8" : "rgba(255, 255, 255, 0.18)",
+        position: "relative",
+        cursor: "pointer",
+        padding: 0,
+        flexShrink: 0,
+        transition: "background 0.12s ease"
       },
-      children: bottom ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        toolbarButtons,
-        cameraButton
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        cameraButton,
-        toolbarButtons
-      ] })
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "absolute",
+            top: 2,
+            left: enabled ? 18 : 2,
+            width: 18,
+            height: 18,
+            borderRadius: "50%",
+            background: "#fff",
+            transition: "left 0.12s ease"
+          }
+        }
+      )
     }
   );
 }
-function IconButton({
-  children,
-  active,
-  tooltip,
-  tooltipSide = "left",
-  onClick
-}) {
-  const [hovered, setHovered] = useState2(false);
-  const tooltipStyle = tooltipSide === "left" ? {
-    right: "calc(100% + 10px)",
-    top: "50%",
-    transform: "translateY(-50%)"
-  } : {
-    left: "calc(100% + 10px)",
-    top: "50%",
-    transform: "translateY(-50%)"
-  };
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    tooltip && hovered && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          ...tooltipStyle,
-          background: "rgb(32, 32, 36)",
-          border: "1px solid rgba(255, 255, 255, 0.1)",
-          borderRadius: 6,
-          padding: "3px 8px",
-          color: "rgba(255, 255, 255, 0.88)",
-          fontSize: 11,
-          whiteSpace: "nowrap",
-          boxShadow: "0 8px 28px rgba(0, 0, 0, 0.28)",
-          pointerEvents: "none"
-        },
-        children: tooltip
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick,
-        onMouseEnter: () => setHovered(true),
-        onMouseLeave: () => setHovered(false),
-        style: {
-          width: 32,
-          height: 32,
-          borderRadius: "50%",
-          border: "none",
-          background: active || hovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer",
-          padding: 0,
-          color: active || hovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)",
-          transition: "background 0.12s ease, color 0.12s ease"
-        },
-        children
-      }
-    )
-  ] });
-}
-function SettingsButton({
-  open,
-  onClick,
-  selectedMode,
-  frameSettings,
-  onFrameSettingsChange,
-  panelSide,
-  tooltipSide
-}) {
-  const [saveDir, setSaveDir] = useState2(null);
-  const [picking, setPicking] = useState2(false);
-  useEffect(() => {
-    if (!open) return;
-    fetch("/__afterbefore/config").then((r) => r.json()).then((data) => setSaveDir(data.saveDir)).catch(() => {
-    });
-  }, [open]);
-  const handlePickFolder = async () => {
-    setPicking(true);
-    try {
-      const res = await fetch("/__afterbefore/pick-folder", { method: "POST" });
-      const data = await res.json();
-      if (data.folder) {
-        await fetch("/__afterbefore/config", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ saveDir: data.folder })
-        });
-        setSaveDir(data.folder);
-      }
-    } catch {
-    } finally {
-      setPicking(false);
-    }
-  };
-  const shortDir = saveDir ? saveDir.replace(/^\/Users\/[^/]+/, "~") : "~/Desktop";
-  const panelStyle = panelSide === "left" ? { right: "calc(100% + 10px)", top: 0 } : { left: "calc(100% + 10px)", top: 0 };
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx(IconButton, { active: open, tooltipSide, tooltip: !open ? "Settings" : void 0, onClick, children: /* @__PURE__ */ jsx(Settings, { size: 16, strokeWidth: 1.7 }) }),
-    open && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          ...panelStyle,
-          minWidth: 260,
-          padding: "10px 12px",
-          borderRadius: 12,
-          background: "rgb(32, 32, 36)",
-          border: "1px solid rgba(255, 255, 255, 0.1)",
-          boxShadow: "0 14px 36px rgba(0, 0, 0, 0.32)"
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: {
-                fontSize: 11,
-                color: "rgba(255, 255, 255, 0.46)",
-                letterSpacing: "0.03em",
-                textTransform: "uppercase",
-                marginBottom: 10
-              },
-              children: "Settings"
-            }
-          ),
-          selectedMode === "component" && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              ToggleRow,
-              {
-                icon: /* @__PURE__ */ jsx(Frame, { size: 15, strokeWidth: 1.8 }),
-                label: "Frame",
-                hint: "Wrap component in a sized canvas with background",
-                enabled: frameSettings.enabled,
-                onChange: () => onFrameSettingsChange({ ...frameSettings, enabled: !frameSettings.enabled })
-              }
-            ),
-            frameSettings.enabled && /* @__PURE__ */ jsxs("div", { style: { marginTop: 8, display: "flex", flexDirection: "column", gap: 10 }, children: [
-              /* @__PURE__ */ jsx(
-                FrameSizeControl,
-                {
-                  size: frameSettings.size,
-                  onChange: (size) => onFrameSettingsChange({ ...frameSettings, size })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                FrameBackgroundControl,
-                {
-                  bgType: frameSettings.bgType,
-                  bgColor: frameSettings.bgColor,
-                  bgImage: frameSettings.bgImage,
-                  frameSize: frameSettings.size,
-                  onChange: (updates) => onFrameSettingsChange({ ...frameSettings, ...updates })
-                }
-              )
-            ] })
-          ] }),
-          selectedMode === "component" && /* @__PURE__ */ jsx("div", { style: { height: 1, background: "rgba(255,255,255,0.08)", margin: "8px 0" } }),
-          /* @__PURE__ */ jsx(
-            SaveLocationRow,
-            {
-              dir: shortDir,
-              picking,
-              onPick: handlePickFolder
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
 function FrameSizeControl({
   size,
   onChange
@@ -656,9 +407,73 @@ function FrameSizeControl({
   const [sizeOpen, setSizeOpen] = useState2(false);
   const currentPreset = FRAME_SIZE_PRESETS.find((p) => p.w === size.w && p.h === size.h);
   const isCustom = !currentPreset;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(SettingsLabel, { children: "Size" }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, marginTop: 4 }, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "14px 0" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "rgba(255, 255, 255, 0.92)" }, children: "Size" }),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "rgba(255, 255, 255, 0.42)", lineHeight: 1.3 }, children: "Set the frame dimensions" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { position: "relative", flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setSizeOpen((prev) => !prev),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              height: 30,
+              padding: "0 10px",
+              borderRadius: 7,
+              border: "1px solid rgba(255,255,255,0.1)",
+              background: "rgba(255,255,255,0.07)",
+              color: "rgba(255,255,255,0.88)",
+              cursor: "pointer",
+              fontSize: 12,
+              fontFamily: "inherit",
+              whiteSpace: "nowrap"
+            },
+            children: [
+              currentPreset ? currentPreset.label : "Custom",
+              /* @__PURE__ */ jsx(ChevronDown, { size: 12, strokeWidth: 2 })
+            ]
+          }
+        ),
+        sizeOpen && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: "calc(100% + 4px)",
+              right: 0,
+              minWidth: 180,
+              background: "rgb(32, 32, 36)",
+              border: "1px solid rgba(255, 255, 255, 0.1)",
+              borderRadius: 8,
+              padding: "4px 0",
+              boxShadow: "0 10px 30px rgba(0, 0, 0, 0.3)",
+              zIndex: 1
+            },
+            children: FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsxs(
+              DropItem,
+              {
+                active: !isCustom && preset.w === size.w && preset.h === size.h,
+                onClick: () => {
+                  onChange({ w: preset.w, h: preset.h });
+                  setSizeOpen(false);
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: preset.label }),
+                  /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: "rgba(255,255,255,0.34)" }, children: preset.hint })
+                ]
+              },
+              preset.label
+            ))
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, marginTop: 10 }, children: [
       /* @__PURE__ */ jsx(
         NumInput,
         {
@@ -680,66 +495,6 @@ function FrameSizeControl({
           }
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { style: { position: "relative", marginTop: 6 }, children: [
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: () => setSizeOpen((prev) => !prev),
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            gap: 6,
-            width: "100%",
-            height: 30,
-            padding: "0 8px",
-            borderRadius: 7,
-            border: "1px solid rgba(255,255,255,0.1)",
-            background: "rgba(255,255,255,0.07)",
-            color: "rgba(255,255,255,0.88)",
-            cursor: "pointer",
-            fontSize: 12,
-            fontFamily: "inherit"
-          },
-          children: [
-            currentPreset ? currentPreset.label : "Custom",
-            /* @__PURE__ */ jsx(ChevronDown, { size: 12, strokeWidth: 2 })
-          ]
-        }
-      ),
-      sizeOpen && /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            bottom: "calc(100% + 4px)",
-            left: 0,
-            right: 0,
-            background: "rgb(32, 32, 36)",
-            border: "1px solid rgba(255, 255, 255, 0.1)",
-            borderRadius: 8,
-            padding: "4px 0",
-            boxShadow: "0 10px 30px rgba(0, 0, 0, 0.3)",
-            zIndex: 1
-          },
-          children: FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsxs(
-            DropItem,
-            {
-              active: !isCustom && preset.w === size.w && preset.h === size.h,
-              onClick: () => {
-                onChange({ w: preset.w, h: preset.h });
-                setSizeOpen(false);
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { children: preset.label }),
-                /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: "rgba(255,255,255,0.34)" }, children: preset.hint })
-              ]
-            },
-            preset.label
-          ))
-        }
-      )
     ] })
   ] });
 }
@@ -768,39 +523,44 @@ function FrameBackgroundControl({
     reader.readAsDataURL(file);
     e.target.value = "";
   };
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(SettingsLabel, { children: "Background" }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 2, marginTop: 4 }, children: [
-      /* @__PURE__ */ jsxs(
-        SegmentButton,
-        {
-          active: bgType === "color",
-          onClick: () => onChange({ bgType: "color" }),
-          style: { borderRadius: "6px 0 0 6px" },
-          children: [
-            /* @__PURE__ */ jsx(Palette, { size: 12, strokeWidth: 2 }),
-            "Color"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        SegmentButton,
-        {
-          active: bgType === "image",
-          onClick: () => onChange({ bgType: "image" }),
-          style: { borderRadius: "0 6px 6px 0" },
-          children: [
-            /* @__PURE__ */ jsx(ImageIcon, { size: 12, strokeWidth: 2 }),
-            "Image"
-          ]
-        }
-      )
-    ] }),
-    bgType === "color" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 6 }, children: [
-      /* @__PURE__ */ jsx(ColorSwatch, { color: bgColor, onChange: (c) => onChange({ bgColor: c }) }),
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "14px 0" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 3 }, children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "rgba(255, 255, 255, 0.92)" }, children: "Background" }),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "rgba(255, 255, 255, 0.42)", lineHeight: 1.3 }, children: "Frame background color or image" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 2, flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsxs(
+          SegmentButton,
+          {
+            active: bgType === "color",
+            onClick: () => onChange({ bgType: "color" }),
+            style: { borderRadius: "6px 0 0 6px" },
+            children: [
+              /* @__PURE__ */ jsx(Palette, { size: 12, strokeWidth: 2 }),
+              "Color"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          SegmentButton,
+          {
+            active: bgType === "image",
+            onClick: () => onChange({ bgType: "image" }),
+            style: { borderRadius: "0 6px 6px 0" },
+            children: [
+              /* @__PURE__ */ jsx(ImageIcon, { size: 12, strokeWidth: 2 }),
+              "Image"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    bgType === "color" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 10 }, children: [
+      /* @__PURE__ */ jsx(ColorSwatch, { color: bgColor, onChange: (c) => onChange({ bgColor: c }) }),
       /* @__PURE__ */ jsx(HexInput, { value: bgColor, onChange: (c) => onChange({ bgColor: c }) })
     ] }),
-    bgType === "image" && /* @__PURE__ */ jsxs("div", { style: { marginTop: 6 }, children: [
+    bgType === "image" && /* @__PURE__ */ jsxs("div", { style: { marginTop: 10 }, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -838,19 +598,6 @@ function FrameBackgroundControl({
     ] })
   ] });
 }
-function SettingsLabel({ children }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        fontSize: 11,
-        color: "rgba(255, 255, 255, 0.42)",
-        letterSpacing: "0.02em"
-      },
-      children
-    }
-  );
-}
 function SegmentButton({
   children,
   active,
@@ -950,6 +697,141 @@ function SmallButton({
     }
   );
 }
+function NumInput({
+  value,
+  onChange
+}) {
+  const [editing, setEditing] = useState2(false);
+  const [text, setText] = useState2(String(value));
+  useEffect(() => {
+    if (!editing) {
+      setText(String(value));
+    }
+  }, [editing, value]);
+  return /* @__PURE__ */ jsx(
+    "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: 54,
+        padding: "4px 6px",
+        background: "rgba(255, 255, 255, 0.07)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        borderRadius: 7,
+        color: "rgba(255, 255, 255, 0.9)",
+        fontSize: 12,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        textAlign: "center",
+        outline: "none"
+      }
+    }
+  );
+}
+function HexInput({
+  value,
+  onChange
+}) {
+  const [editing, setEditing] = useState2(false);
+  const [text, setText] = useState2(value);
+  useEffect(() => {
+    if (!editing) {
+      setText(value);
+    }
+  }, [editing, value]);
+  const commit = (raw) => {
+    const hex = raw.startsWith("#") ? raw : `#${raw}`;
+    if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
+      onChange(hex);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      value: editing ? text : value,
+      onFocus: () => {
+        setEditing(true);
+        setText(value);
+      },
+      onBlur: () => {
+        setEditing(false);
+        commit(text);
+      },
+      onChange: (e) => setText(e.target.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.target.blur();
+        }
+      },
+      style: {
+        width: 72,
+        padding: "4px 6px",
+        background: "rgba(255, 255, 255, 0.07)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        borderRadius: 7,
+        color: "rgba(255, 255, 255, 0.9)",
+        fontSize: 12,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        textAlign: "left",
+        outline: "none"
+      }
+    }
+  );
+}
+function StaticText({ children }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        fontSize: 11,
+        color: "rgba(255,255,255,0.35)",
+        minWidth: 8,
+        textAlign: "center"
+      },
+      children
+    }
+  );
+}
+function DropItem({
+  children,
+  onClick,
+  active
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      style: {
+        display: "block",
+        width: "100%",
+        padding: "7px 12px",
+        background: active ? "rgba(255, 255, 255, 0.08)" : "transparent",
+        border: "none",
+        color: "rgba(255, 255, 255, 0.86)",
+        textAlign: "left",
+        cursor: "pointer",
+        fontSize: 13,
+        fontFamily: "inherit"
+      },
+      children
+    }
+  );
+}
 async function downscaleImage(dataUrl, maxW, maxH) {
   return new Promise((resolve) => {
     const img = new Image();
@@ -966,267 +848,413 @@ async function downscaleImage(dataUrl, maxW, maxH) {
     img.src = dataUrl;
   });
 }
-function SaveLocationRow({
-  dir,
-  picking,
-  onPick
-}) {
-  const [btnHovered, setBtnHovered] = useState2(false);
-  return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        color: "rgba(255, 255, 255, 0.88)",
-        fontSize: 13
-      },
-      children: [
-        /* @__PURE__ */ jsx(FolderOpen, { size: 15, strokeWidth: 1.8, style: { flexShrink: 0 } }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              flex: 1,
-              minWidth: 0
-            },
-            title: dir,
-            children: dir
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onPick,
-            disabled: picking,
-            onMouseEnter: () => setBtnHovered(true),
-            onMouseLeave: () => setBtnHovered(false),
-            style: {
-              padding: "3px 8px",
-              borderRadius: 6,
-              border: "1px solid rgba(255,255,255,0.12)",
-              background: btnHovered ? "rgba(255,255,255,0.12)" : "rgba(255,255,255,0.06)",
-              color: "rgba(255,255,255,0.78)",
-              fontSize: 11,
-              cursor: picking ? "wait" : "pointer",
-              flexShrink: 0,
-              fontFamily: "inherit",
-              transition: "background 0.12s ease"
-            },
-            children: picking ? "..." : "Change"
-          }
-        )
-      ]
-    }
-  ) });
+
+// src/overlay/ui/toolbar.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var EDGE_MARGIN = 24;
+var CONTAINER_SIZE = 38;
+function getCornerStyle(corner) {
+  switch (corner) {
+    case "bottom-right":
+      return { bottom: EDGE_MARGIN, right: EDGE_MARGIN };
+    case "bottom-left":
+      return { bottom: EDGE_MARGIN, left: EDGE_MARGIN };
+    case "top-right":
+      return { top: EDGE_MARGIN, right: EDGE_MARGIN };
+    case "top-left":
+      return { top: EDGE_MARGIN, left: EDGE_MARGIN };
+  }
 }
-function ToggleRow({
-  icon,
-  label,
-  hint,
-  enabled,
-  onChange
+function isBottomCorner(corner) {
+  return corner === "bottom-right" || corner === "bottom-left";
+}
+function isRightCorner(corner) {
+  return corner === "bottom-right" || corner === "top-right";
+}
+function snapToCorner(x, y) {
+  const cx = window.innerWidth / 2;
+  const cy = window.innerHeight / 2;
+  if (x < cx) {
+    return y < cy ? "top-left" : "bottom-left";
+  }
+  return y < cy ? "top-right" : "bottom-right";
+}
+var MODES = [
+  { mode: "component", label: "Component", icon: MousePointer2 },
+  { mode: "viewport", label: "Viewport", icon: Monitor },
+  { mode: "fullpage", label: "Full Page", icon: Maximize }
+];
+function Toolbar({
+  expanded,
+  onToggle,
+  phase,
+  loading,
+  selectedMode,
+  onModeChange,
+  onCapture,
+  onCancel,
+  frameSettings,
+  onFrameSettingsChange
 }) {
-  return /* @__PURE__ */ jsxs(
-    "label",
+  const [settingsOpen, setSettingsOpen] = useState3(false);
+  const [historyOpen, setHistoryOpen] = useState3(false);
+  const [corner, setCorner] = useState3(() => {
+    try {
+      const stored = localStorage.getItem("ab-toolbar-corner");
+      if (stored && ["bottom-right", "bottom-left", "top-right", "top-left"].includes(stored)) {
+        return stored;
+      }
+    } catch {
+    }
+    return "bottom-right";
+  });
+  const [dragging, setDragging] = useState3(false);
+  const [dragPos, setDragPos] = useState3(null);
+  const dragState = useRef2(null);
+  const toolbarRef = useRef2(null);
+  const [cameraHovered, setCameraHovered] = useState3(false);
+  useEffect2(() => {
+    if (!expanded) return;
+    const onKey = (e) => {
+      if (e.target?.tagName === "INPUT") {
+        if (e.key === "Escape") {
+          e.target.blur();
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        if (settingsOpen) {
+          setSettingsOpen(false);
+          return;
+        }
+        onCancel();
+      } else if (e.key === "Enter") {
+        onCapture(selectedMode);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [expanded, onCancel, onCapture, selectedMode, settingsOpen]);
+  const handleMouseDown = useCallback2(
+    (e) => {
+      e.preventDefault();
+      const el = toolbarRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      setDragging(true);
+      setDragPos({ x: rect.left, y: rect.top });
+      dragState.current = {
+        dragging: true,
+        startX: e.clientX,
+        startY: e.clientY,
+        origX: rect.left,
+        origY: rect.top,
+        distance: 0
+      };
+    },
+    []
+  );
+  useEffect2(() => {
+    const handleMouseMove = (e) => {
+      const ds = dragState.current;
+      if (!ds || !ds.dragging) return;
+      const dx = e.clientX - ds.startX;
+      const dy = e.clientY - ds.startY;
+      ds.distance = Math.sqrt(dx * dx + dy * dy);
+      setDragPos({
+        x: ds.origX + dx,
+        y: ds.origY + dy
+      });
+    };
+    const handleMouseUp = (e) => {
+      const ds = dragState.current;
+      if (!ds) return;
+      if (ds.distance < 5) {
+        onToggle();
+      } else {
+        const el = toolbarRef.current;
+        const w = el?.offsetWidth ?? CONTAINER_SIZE;
+        const h = el?.offsetHeight ?? CONTAINER_SIZE;
+        const centerX = ds.origX + (e.clientX - ds.startX) + w / 2;
+        const centerY = ds.origY + (e.clientY - ds.startY) + h / 2;
+        const newCorner = snapToCorner(centerX, centerY);
+        setCorner(newCorner);
+        try {
+          localStorage.setItem("ab-toolbar-corner", newCorner);
+        } catch {
+        }
+      }
+      setDragging(false);
+      setDragPos(null);
+      dragState.current = null;
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [onToggle]);
+  const panelSide = isRightCorner(corner) ? "left" : "right";
+  const tooltipSide = panelSide;
+  const bottom = isBottomCorner(corner);
+  const positionStyle = dragging && dragPos ? { left: dragPos.x, top: dragPos.y } : getCornerStyle(corner);
+  const cameraTooltipLabel = expanded ? "Close" : void 0;
+  const cameraTooltipStyle = cameraTooltipLabel ? tooltipSide === "left" ? { right: "calc(100% + 10px)", top: "50%", transform: "translateY(-50%)" } : { left: "calc(100% + 10px)", top: "50%", transform: "translateY(-50%)" } : void 0;
+  const cameraButton = /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+    cameraTooltipLabel && cameraHovered && !dragging && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          ...cameraTooltipStyle,
+          background: "rgb(32, 32, 36)",
+          border: "1px solid rgba(255, 255, 255, 0.1)",
+          borderRadius: 6,
+          padding: "3px 8px",
+          color: "rgba(255, 255, 255, 0.88)",
+          fontSize: 11,
+          whiteSpace: "nowrap",
+          boxShadow: "0 8px 28px rgba(0, 0, 0, 0.28)",
+          pointerEvents: "none"
+        },
+        children: cameraTooltipLabel
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        onMouseDown: handleMouseDown,
+        onMouseEnter: () => setCameraHovered(true),
+        onMouseLeave: () => setCameraHovered(false),
+        style: {
+          width: 36,
+          height: 36,
+          padding: 2,
+          borderRadius: "50%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: dragging ? "grabbing" : "pointer",
+          background: expanded && cameraHovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
+          transition: "background 0.12s ease"
+        },
+        children: [
+          /* @__PURE__ */ jsx2(
+            "style",
+            {
+              dangerouslySetInnerHTML: {
+                __html: `
+@keyframes ab-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}`
+              }
+            }
+          ),
+          loading ? /* @__PURE__ */ jsx2(
+            LoaderCircle,
+            {
+              size: 16,
+              strokeWidth: 2,
+              style: { animation: "ab-spin 0.8s linear infinite", color: "white" }
+            }
+          ) : phase === "ready" ? /* @__PURE__ */ jsx2(Check, { size: 16, strokeWidth: 2.6, color: "#4ade80" }) : expanded ? /* @__PURE__ */ jsx2(
+            X2,
+            {
+              size: 16,
+              strokeWidth: 1.7,
+              color: cameraHovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)"
+            }
+          ) : /* @__PURE__ */ jsx2(
+            Camera,
+            {
+              size: 16,
+              strokeWidth: 1.9,
+              color: "rgba(255, 255, 255, 0.52)"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+  const toolbarButtons = expanded ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, padding: "4px 0" }, children: MODES.map(({ mode, label, icon: ModeIcon }) => /* @__PURE__ */ jsx2(
+      IconButton,
+      {
+        active: selectedMode === mode,
+        tooltipSide,
+        tooltip: label,
+        onClick: () => {
+          setSettingsOpen(false);
+          setHistoryOpen(false);
+          if (mode === "viewport" || mode === "fullpage") {
+            onModeChange(mode);
+            onCapture(mode);
+          } else {
+            onModeChange(mode);
+          }
+        },
+        children: /* @__PURE__ */ jsx2(ModeIcon, { size: 16, strokeWidth: 1.7 })
+      },
+      mode
+    )) }),
+    /* @__PURE__ */ jsx2(Separator, { vertical: false }),
+    /* @__PURE__ */ jsx2(
+      SettingsButton,
+      {
+        open: settingsOpen,
+        onClick: () => {
+          setSettingsOpen((prev) => !prev);
+          setHistoryOpen(false);
+        },
+        selectedMode,
+        frameSettings,
+        onFrameSettingsChange,
+        panelSide,
+        tooltipSide,
+        bottom
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      HistoryButton,
+      {
+        open: historyOpen,
+        onClick: () => {
+          setHistoryOpen((prev) => !prev);
+          setSettingsOpen(false);
+        },
+        panelSide,
+        tooltipSide,
+        bottom
+      }
+    ),
+    /* @__PURE__ */ jsx2(Separator, { vertical: false })
+  ] }) : null;
+  return /* @__PURE__ */ jsx2(
+    "div",
     {
+      ref: toolbarRef,
+      "data-afterbefore": "true",
       style: {
+        position: "fixed",
+        ...positionStyle,
+        zIndex: 2147483647,
         display: "flex",
+        flexDirection: "column",
         alignItems: "center",
-        justifyContent: "space-between",
-        gap: 12,
-        cursor: "pointer"
+        background: "rgb(32, 32, 36)",
+        borderRadius: 999,
+        padding: 6,
+        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        userSelect: "none"
       },
-      children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                color: "rgba(255, 255, 255, 0.88)",
-                fontSize: 13,
-                whiteSpace: "nowrap"
-              },
-              children: [
-                icon,
-                label
-              ]
-            }
-          ),
-          hint && /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                fontSize: 10,
-                color: "rgba(255, 255, 255, 0.36)",
-                paddingLeft: 23
-              },
-              children: hint
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onChange,
-            style: {
-              width: 38,
-              height: 22,
-              borderRadius: 999,
-              border: "none",
-              background: enabled ? "#38bdf8" : "rgba(255, 255, 255, 0.18)",
-              position: "relative",
-              cursor: "pointer",
-              padding: 0,
-              flexShrink: 0,
-              transition: "background 0.12s ease"
-            },
-            children: /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  position: "absolute",
-                  top: 2,
-                  left: enabled ? 18 : 2,
-                  width: 18,
-                  height: 18,
-                  borderRadius: "50%",
-                  background: "#fff",
-                  transition: "left 0.12s ease"
-                }
-              }
-            )
-          }
-        )
-      ]
+      children: bottom ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        toolbarButtons,
+        cameraButton
+      ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        cameraButton,
+        toolbarButtons
+      ] })
     }
   );
 }
-function NumInput({
-  value,
-  onChange
+function IconButton({
+  children,
+  active,
+  tooltip,
+  tooltipSide = "left",
+  onClick
 }) {
-  const [editing, setEditing] = useState2(false);
-  const [text, setText] = useState2(String(value));
-  useEffect(() => {
-    if (!editing) {
-      setText(String(value));
-    }
-  }, [editing, value]);
-  return /* @__PURE__ */ jsx(
-    "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: 54,
-        padding: "4px 6px",
-        background: "rgba(255, 255, 255, 0.07)",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
-        borderRadius: 7,
-        color: "rgba(255, 255, 255, 0.9)",
-        fontSize: 12,
-        fontFamily: "system-ui, -apple-system, sans-serif",
-        textAlign: "center",
-        outline: "none"
+  const [hovered, setHovered] = useState3(false);
+  const tooltipStyle = tooltipSide === "left" ? {
+    right: "calc(100% + 10px)",
+    top: "50%",
+    transform: "translateY(-50%)"
+  } : {
+    left: "calc(100% + 10px)",
+    top: "50%",
+    transform: "translateY(-50%)"
+  };
+  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+    tooltip && hovered && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          ...tooltipStyle,
+          background: "rgb(32, 32, 36)",
+          border: "1px solid rgba(255, 255, 255, 0.1)",
+          borderRadius: 6,
+          padding: "3px 8px",
+          color: "rgba(255, 255, 255, 0.88)",
+          fontSize: 11,
+          whiteSpace: "nowrap",
+          boxShadow: "0 8px 28px rgba(0, 0, 0, 0.28)",
+          pointerEvents: "none"
+        },
+        children: tooltip
       }
-    }
-  );
+    ),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        style: {
+          width: 32,
+          height: 32,
+          borderRadius: "50%",
+          border: "none",
+          background: active || hovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+          padding: 0,
+          color: active || hovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)",
+          transition: "background 0.12s ease, color 0.12s ease"
+        },
+        children
+      }
+    )
+  ] });
 }
-function HexInput({
-  value,
-  onChange
+function SettingsButton({
+  open,
+  onClick,
+  selectedMode,
+  frameSettings,
+  onFrameSettingsChange,
+  panelSide,
+  tooltipSide,
+  bottom
 }) {
-  const [editing, setEditing] = useState2(false);
-  const [text, setText] = useState2(value);
-  useEffect(() => {
-    if (!editing) {
-      setText(value);
-    }
-  }, [editing, value]);
-  const commit = (raw) => {
-    const hex = raw.startsWith("#") ? raw : `#${raw}`;
-    if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
-      onChange(hex);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "text",
-      value: editing ? text : value,
-      onFocus: () => {
-        setEditing(true);
-        setText(value);
-      },
-      onBlur: () => {
-        setEditing(false);
-        commit(text);
-      },
-      onChange: (e) => setText(e.target.value),
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          e.target.blur();
-        }
-      },
-      style: {
-        width: 72,
-        padding: "4px 6px",
-        background: "rgba(255, 255, 255, 0.07)",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
-        borderRadius: 7,
-        color: "rgba(255, 255, 255, 0.9)",
-        fontSize: 12,
-        fontFamily: "system-ui, -apple-system, sans-serif",
-        textAlign: "left",
-        outline: "none"
+  const verticalAlign = bottom ? { bottom: 0 } : { top: 0 };
+  const panelStyle = panelSide === "left" ? { right: "calc(100% + 10px)", ...verticalAlign } : { left: "calc(100% + 10px)", ...verticalAlign };
+  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx2(IconButton, { active: open, tooltipSide, tooltip: !open ? "Settings" : void 0, onClick, children: /* @__PURE__ */ jsx2(Settings, { size: 16, strokeWidth: 1.7 }) }),
+    open && /* @__PURE__ */ jsx2(
+      SettingsPanel,
+      {
+        style: { position: "absolute", ...panelStyle },
+        onClose: onClick,
+        selectedMode,
+        frameSettings,
+        onFrameSettingsChange
       }
-    }
-  );
-}
-function StaticText({ children }) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      style: {
-        fontSize: 11,
-        color: "rgba(255,255,255,0.35)",
-        minWidth: 8,
-        textAlign: "center"
-      },
-      children
-    }
-  );
+    )
+  ] });
 }
-function DropItem({
+function DropItem2({
   children,
   onClick,
   active,
   accent
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       onClick,
@@ -1247,7 +1275,7 @@ function DropItem({
   );
 }
 function Separator({ vertical = true }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       style: {
@@ -1264,23 +1292,24 @@ function HistoryButton({
   open,
   onClick,
   panelSide,
-  tooltipSide
+  tooltipSide,
+  bottom
 }) {
-  const [toast, setToast] = useState2(null);
-  const [pushing, setPushing] = useState2(false);
-  const [repos, setRepos] = useState2([]);
-  const [branches, setBranches] = useState2([]);
-  const [screenshots, setScreenshots] = useState2([]);
-  const [selectedRepo, setSelectedRepo] = useState2(null);
-  const [selectedBranch, setSelectedBranch] = useState2(null);
-  const [loading, setLoading] = useState2(false);
-  const [repoDropOpen, setRepoDropOpen] = useState2(false);
-  const [branchDropOpen, setBranchDropOpen] = useState2(false);
-  const [lightboxSrc, setLightboxSrc] = useState2(null);
-  const [editingFile, setEditingFile] = useState2(null);
-  const [editValue, setEditValue] = useState2("");
-  const [hoveredThumb, setHoveredThumb] = useState2(null);
-  useEffect(() => {
+  const [toast, setToast] = useState3(null);
+  const [pushing, setPushing] = useState3(false);
+  const [repos, setRepos] = useState3([]);
+  const [branches, setBranches] = useState3([]);
+  const [screenshots, setScreenshots] = useState3([]);
+  const [selectedRepo, setSelectedRepo] = useState3(null);
+  const [selectedBranch, setSelectedBranch] = useState3(null);
+  const [loading, setLoading] = useState3(false);
+  const [repoDropOpen, setRepoDropOpen] = useState3(false);
+  const [branchDropOpen, setBranchDropOpen] = useState3(false);
+  const [lightboxSrc, setLightboxSrc] = useState3(null);
+  const [editingFile, setEditingFile] = useState3(null);
+  const [editValue, setEditValue] = useState3("");
+  const [hoveredThumb, setHoveredThumb] = useState3(null);
+  useEffect2(() => {
     if (!open) {
       setRepoDropOpen(false);
       setBranchDropOpen(false);
@@ -1382,10 +1411,11 @@ function HistoryButton({
       setPushing(false);
     }
   };
-  const panelStyle = panelSide === "left" ? { right: "calc(100% + 10px)", top: 0 } : { left: "calc(100% + 10px)", top: 0 };
-  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx(IconButton, { active: open, tooltipSide, tooltip: !open ? "Screenshots" : void 0, onClick, children: /* @__PURE__ */ jsx(Clock, { size: 16, strokeWidth: 1.7 }) }),
-    open && /* @__PURE__ */ jsxs(
+  const verticalAlign = bottom ? { bottom: 0 } : { top: 0 };
+  const panelStyle = panelSide === "left" ? { right: "calc(100% + 10px)", ...verticalAlign } : { left: "calc(100% + 10px)", ...verticalAlign };
+  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx2(IconButton, { active: open, tooltipSide, tooltip: !open ? "Screenshots" : void 0, onClick, children: /* @__PURE__ */ jsx2(Clock, { size: 16, strokeWidth: 1.7 }) }),
+    open && /* @__PURE__ */ jsxs2(
       "div",
       {
         style: {
@@ -1400,7 +1430,7 @@ function HistoryButton({
           boxShadow: "0 14px 36px rgba(0, 0, 0, 0.32)"
         },
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "div",
             {
               style: {
@@ -1413,8 +1443,8 @@ function HistoryButton({
               children: "Screenshots"
             }
           ),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6, marginBottom: 10 }, children: [
-            /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 6, marginBottom: 10 }, children: [
+            /* @__PURE__ */ jsx2(
               FilterDropdown,
               {
                 label: "Project",
@@ -1432,7 +1462,7 @@ function HistoryButton({
                 }
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               FilterDropdown,
               {
                 label: "Branch",
@@ -1450,7 +1480,7 @@ function HistoryButton({
               }
             )
           ] }),
-          loading ? /* @__PURE__ */ jsx(
+          loading ? /* @__PURE__ */ jsx2(
             "div",
             {
               style: {
@@ -1461,7 +1491,7 @@ function HistoryButton({
               },
               children: "Loading..."
             }
-          ) : screenshots.length === 0 ? /* @__PURE__ */ jsx(
+          ) : screenshots.length === 0 ? /* @__PURE__ */ jsx2(
             "div",
             {
               style: {
@@ -1472,8 +1502,8 @@ function HistoryButton({
               },
               children: "No screenshots yet"
             }
-          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
+          ) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            /* @__PURE__ */ jsx2(
               "div",
               {
                 style: {
@@ -1486,7 +1516,7 @@ function HistoryButton({
                 children: screenshots.map((shot) => {
                   const imgUrl = `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(shot.filename)}`;
                   const isEditing = editingFile === shot.filename;
-                  return /* @__PURE__ */ jsxs(
+                  return /* @__PURE__ */ jsxs2(
                     "div",
                     {
                       style: {
@@ -1495,7 +1525,7 @@ function HistoryButton({
                         alignItems: "center"
                       },
                       children: [
-                        /* @__PURE__ */ jsxs(
+                        /* @__PURE__ */ jsxs2(
                           "div",
                           {
                             style: {
@@ -1511,7 +1541,7 @@ function HistoryButton({
                             onMouseLeave: () => setHoveredThumb(null),
                             onClick: () => setLightboxSrc(imgUrl),
                             children: [
-                              /* @__PURE__ */ jsx(
+                              /* @__PURE__ */ jsx2(
                                 "img",
                                 {
                                   src: imgUrl,
@@ -1527,7 +1557,7 @@ function HistoryButton({
                                   }
                                 }
                               ),
-                              /* @__PURE__ */ jsx(
+                              /* @__PURE__ */ jsx2(
                                 "div",
                                 {
                                   style: {
@@ -1541,13 +1571,13 @@ function HistoryButton({
                                     opacity: hoveredThumb === shot.filename ? 1 : 0,
                                     transition: "opacity 0.15s ease"
                                   },
-                                  children: /* @__PURE__ */ jsx(Eye, { size: 16, strokeWidth: 1.8, color: "rgba(255, 255, 255, 0.9)" })
+                                  children: /* @__PURE__ */ jsx2(Eye, { size: 16, strokeWidth: 1.8, color: "rgba(255, 255, 255, 0.9)" })
                                 }
                               )
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: isEditing ? /* @__PURE__ */ jsx(
+                        /* @__PURE__ */ jsx2("div", { style: { flex: 1, minWidth: 0 }, children: isEditing ? /* @__PURE__ */ jsx2(
                           "input",
                           {
                             autoFocus: true,
@@ -1570,7 +1600,7 @@ function HistoryButton({
                               fontFamily: "inherit"
                             }
                           }
-                        ) : /* @__PURE__ */ jsx(
+                        ) : /* @__PURE__ */ jsx2(
                           "div",
                           {
                             onClick: () => {
@@ -1589,7 +1619,7 @@ function HistoryButton({
                             children: formatTimestamp(shot.filename)
                           }
                         ) }),
-                        /* @__PURE__ */ jsx(
+                        /* @__PURE__ */ jsx2(
                           "button",
                           {
                             onClick: () => handleDelete(shot.filename),
@@ -1616,7 +1646,7 @@ function HistoryButton({
                               e.currentTarget.style.color = "rgba(255, 255, 255, 0.35)";
                               e.currentTarget.style.background = "transparent";
                             },
-                            children: /* @__PURE__ */ jsx(Trash2, { size: 13, strokeWidth: 1.8 })
+                            children: /* @__PURE__ */ jsx2(Trash22, { size: 13, strokeWidth: 1.8 })
                           }
                         )
                       ]
@@ -1626,7 +1656,7 @@ function HistoryButton({
                 })
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "div",
               {
                 style: {
@@ -1636,18 +1666,18 @@ function HistoryButton({
                 }
               }
             ),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-              /* @__PURE__ */ jsxs(ActionButton, { onClick: handleOpenFolder, children: [
-                /* @__PURE__ */ jsx(FolderOpen, { size: 13, strokeWidth: 1.8 }),
+            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+              /* @__PURE__ */ jsxs2(ActionButton, { onClick: handleOpenFolder, children: [
+                /* @__PURE__ */ jsx2(FolderOpen, { size: 13, strokeWidth: 1.8 }),
                 "Open Folder"
               ] }),
-              /* @__PURE__ */ jsxs(ActionButton, { onClick: handlePush, disabled: pushing, children: [
-                /* @__PURE__ */ jsx(ArrowUp, { size: 13, strokeWidth: 1.8 }),
+              /* @__PURE__ */ jsxs2(ActionButton, { onClick: handlePush, disabled: pushing, children: [
+                /* @__PURE__ */ jsx2(ArrowUp, { size: 13, strokeWidth: 1.8 }),
                 pushing ? "Pushing..." : "Push to PR"
               ] })
             ] })
           ] }),
-          toast && /* @__PURE__ */ jsx(
+          toast && /* @__PURE__ */ jsx2(
             "div",
             {
               style: {
@@ -1671,7 +1701,7 @@ function HistoryButton({
         ]
       }
     ),
-    lightboxSrc && /* @__PURE__ */ jsxs(
+    lightboxSrc && /* @__PURE__ */ jsxs2(
       "div",
       {
         onClick: () => setLightboxSrc(null),
@@ -1690,7 +1720,7 @@ function HistoryButton({
           cursor: "zoom-out"
         },
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "img",
             {
               src: lightboxSrc,
@@ -1705,7 +1735,7 @@ function HistoryButton({
               }
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "button",
             {
               onClick: () => setLightboxSrc(null),
@@ -1725,7 +1755,7 @@ function HistoryButton({
                 justifyContent: "center",
                 padding: 0
               },
-              children: /* @__PURE__ */ jsx(X, { size: 18, strokeWidth: 2 })
+              children: /* @__PURE__ */ jsx2(X2, { size: 18, strokeWidth: 2 })
             }
           )
         ]
@@ -1741,8 +1771,8 @@ function FilterDropdown({
   onToggle,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsx2(
       "div",
       {
         style: {
@@ -1754,8 +1784,8 @@ function FilterDropdown({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxs2(
         "button",
         {
           onClick: onToggle,
@@ -1776,7 +1806,7 @@ function FilterDropdown({
             fontFamily: "inherit"
           },
           children: [
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "span",
               {
                 style: {
@@ -1787,11 +1817,11 @@ function FilterDropdown({
                 children: value || "\u2014"
               }
             ),
-            /* @__PURE__ */ jsx(ChevronDown, { size: 12, strokeWidth: 2 })
+            /* @__PURE__ */ jsx2(ChevronDown2, { size: 12, strokeWidth: 2 })
           ]
         }
       ),
-      isOpen && options.length > 0 && /* @__PURE__ */ jsx(
+      isOpen && options.length > 0 && /* @__PURE__ */ jsx2(
         "div",
         {
           style: {
@@ -1808,8 +1838,8 @@ function FilterDropdown({
             boxShadow: "0 10px 30px rgba(0, 0, 0, 0.3)",
             zIndex: 1
           },
-          children: options.map((opt) => /* @__PURE__ */ jsx(
-            DropItem,
+          children: options.map((opt) => /* @__PURE__ */ jsx2(
+            DropItem2,
             {
               active: opt === value,
               onClick: () => onSelect(opt),
@@ -1827,8 +1857,8 @@ function ActionButton({
   onClick,
   disabled
 }) {
-  const [hovered, setHovered] = useState2(false);
-  return /* @__PURE__ */ jsx(
+  const [hovered, setHovered] = useState3(false);
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       onClick,
@@ -1870,13 +1900,13 @@ function formatTimestamp(filename) {
 }
 
 // src/overlay/ui/inspector.tsx
-import { useEffect as useEffect2, useRef as useRef2, useCallback as useCallback3, useState as useState3 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef3, useCallback as useCallback3, useState as useState4 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function Inspector({ onSelect, onCancel }) {
-  const [highlight, setHighlight] = useState3(null);
-  const hoveredEl = useRef2(null);
-  const styleEl = useRef2(null);
-  useEffect2(() => {
+  const [highlight, setHighlight] = useState4(null);
+  const hoveredEl = useRef3(null);
+  const styleEl = useRef3(null);
+  useEffect3(() => {
     const style = document.createElement("style");
     style.setAttribute("data-afterbefore", "true");
     style.textContent = [
@@ -1938,7 +1968,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [onCancel]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     document.addEventListener("mousemove", handleMouseMove, true);
     document.addEventListener("click", handleClick, true);
     document.addEventListener("keydown", handleKeyDown);
@@ -1948,7 +1978,7 @@ function Inspector({ onSelect, onCancel }) {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [handleMouseMove, handleClick, handleKeyDown]);
-  return /* @__PURE__ */ jsx2("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: highlight && /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: highlight && /* @__PURE__ */ jsx3(
     "div",
     {
       style: {
@@ -1968,7 +1998,7 @@ function Inspector({ onSelect, onCancel }) {
 }
 
 // src/overlay/index.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 async function saveCapture(mode, dataUrl) {
   try {
     const res = await fetch("/__afterbefore/save", {
@@ -1986,12 +2016,12 @@ async function saveCapture(mode, dataUrl) {
 }
 function AfterBefore() {
   const { state, captureComplete, reset } = useOverlayState();
-  const [toolbarActive, setToolbarActive] = useState4(false);
-  const [inspectorActive, setInspectorActive] = useState4(false);
-  const [loading, setLoading] = useState4(false);
-  const [selectedMode, setSelectedMode] = useState4("component");
-  const [frameSettings, setFrameSettings] = useState4(DEFAULT_FRAME_SETTINGS);
-  useEffect3(() => {
+  const [toolbarActive, setToolbarActive] = useState5(false);
+  const [inspectorActive, setInspectorActive] = useState5(false);
+  const [loading, setLoading] = useState5(false);
+  const [selectedMode, setSelectedMode] = useState5("component");
+  const [frameSettings, setFrameSettings] = useState5(DEFAULT_FRAME_SETTINGS);
+  useEffect4(() => {
     try {
       const stored = localStorage.getItem("ab-frame-settings");
       if (stored) {
@@ -2006,7 +2036,7 @@ function AfterBefore() {
       setFrameSettings(DEFAULT_FRAME_SETTINGS);
     }
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (state.phase === "ready") {
       const timer = setTimeout(() => {
         reset();
@@ -2092,8 +2122,8 @@ function AfterBefore() {
     setSelectedMode(mode);
     setInspectorActive(mode === "component");
   }, []);
-  return /* @__PURE__ */ jsxs2("div", { "data-afterbefore": "true", children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3("div", { "data-afterbefore": "true", children: [
+    /* @__PURE__ */ jsx4(
       Toolbar,
       {
         expanded: toolbarActive,
@@ -2108,7 +2138,7 @@ function AfterBefore() {
         onFrameSettingsChange: handleFrameSettingsChange
       }
     ),
-    inspectorActive && /* @__PURE__ */ jsx3(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel })
+    inspectorActive && /* @__PURE__ */ jsx4(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel })
   ] });
 }
 export {