afterbefore 0.2.15 → 0.2.17

package/dist/overlay/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/overlay/index.tsx
-import { useState as useState5, useCallback as useCallback5, useRef as useRef4, useEffect as useEffect4 } from "react";
+import { useState as useState4, useCallback as useCallback4, useEffect as useEffect3 } from "react";
 
 // src/overlay/state.ts
 import { useState, useCallback } from "react";
@@ -34,10 +34,10 @@ var DEFAULT_FRAME_SETTINGS = {
   padding: 40
 };
 var FRAME_SIZE_PRESETS = [
-  { label: "1920 x 1080", w: 1920, h: 1080 },
-  { label: "1080 x 1080", w: 1080, h: 1080 },
-  { label: "1200 x 630", w: 1200, h: 630 },
-  { label: "1080 x 1920", w: 1080, h: 1920 }
+  { label: "1920 x 1080", hint: "Desktop / HD", w: 1920, h: 1080 },
+  { label: "1080 x 1080", hint: "Social square", w: 1080, h: 1080 },
+  { label: "1200 x 630", hint: "Open Graph / link preview", w: 1200, h: 630 },
+  { label: "1080 x 1920", hint: "Story / portrait", w: 1080, h: 1920 }
 ];
 var DEV_UI_SELECTORS = [
   // Afterbefore overlay
@@ -177,48 +177,131 @@ function loadImage(src) {
   });
 }
 
-// src/overlay/ui/icon.tsx
-import { useRef, useCallback as useCallback2, useEffect, useState as useState2 } from "react";
-import { Camera, Check, LoaderCircle } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var CONTAINER_SIZE = 38;
-var ICON_SIZE = CONTAINER_SIZE;
+// src/overlay/ui/toolbar.tsx
+import { useCallback as useCallback2, useEffect, useRef, useState as useState2 } from "react";
+import {
+  ArrowUp,
+  Camera,
+  Check,
+  ChevronDown,
+  Clock,
+  Eye,
+  FolderOpen,
+  Frame,
+  ImageIcon,
+  LoaderCircle,
+  Maximize,
+  Monitor,
+  MousePointer2,
+  Palette,
+  Settings,
+  Trash2,
+  Upload,
+  X
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var EDGE_MARGIN = 24;
-function Icon({ phase, onClick, loading, onPositionChange }) {
-  const ref = useRef(null);
-  const [pos, setPos] = useState2({ x: -1, y: -1 });
+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,
+  selectedMode,
+  onModeChange,
+  onCapture,
+  onCancel,
+  frameSettings,
+  onFrameSettingsChange
+}) {
+  const [settingsOpen, setSettingsOpen] = useState2(false);
+  const [historyOpen, setHistoryOpen] = useState2(false);
+  const [corner, setCorner] = useState2(() => {
+    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] = useState2(false);
+  const [dragPos, setDragPos] = useState2(null);
   const dragState = useRef(null);
+  const toolbarRef = useRef(null);
+  const [cameraHovered, setCameraHovered] = useState2(false);
   useEffect(() => {
-    setPos((prev) => {
-      if (prev.x === -1 || prev.y === -1) {
-        return {
-          x: window.innerWidth - ICON_SIZE - EDGE_MARGIN,
-          y: window.innerHeight - ICON_SIZE - EDGE_MARGIN
-        };
+    if (!expanded) return;
+    const onKey = (e) => {
+      if (e.target?.tagName === "INPUT") {
+        if (e.key === "Escape") {
+          e.target.blur();
+        }
+        return;
       }
-      return prev;
-    });
-  }, []);
-  useEffect(() => {
-    if (pos.x !== -1 && pos.y !== -1) {
-      onPositionChange?.({ x: pos.x, y: pos.y });
-    }
-  }, [pos, onPositionChange]);
+      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: pos.x,
-        origY: pos.y,
+        origX: rect.left,
+        origY: rect.top,
         distance: 0
       };
     },
-    [pos]
+    []
   );
   useEffect(() => {
     const handleMouseMove = (e) => {
@@ -227,23 +310,31 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
       const dx = e.clientX - ds.startX;
       const dy = e.clientY - ds.startY;
       ds.distance = Math.sqrt(dx * dx + dy * dy);
-      const newX = Math.max(
-        0,
-        Math.min(window.innerWidth - ICON_SIZE, ds.origX + dx)
-      );
-      const newY = Math.max(
-        0,
-        Math.min(window.innerHeight - ICON_SIZE, ds.origY + dy)
-      );
-      setPos({ x: newX, y: newY });
+      setDragPos({
+        x: ds.origX + dx,
+        y: ds.origY + dy
+      });
     };
-    const handleMouseUp = () => {
+    const handleMouseUp = (e) => {
       const ds = dragState.current;
       if (!ds) return;
       if (ds.distance < 5) {
-        onClick();
+        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);
@@ -252,39 +343,27 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [onClick]);
-  if (pos.x === -1 || pos.y === -1) return null;
-  return /* @__PURE__ */ jsxs(
+  }, [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(
     "div",
     {
-      ref,
-      "data-afterbefore": "true",
       onMouseDown: handleMouseDown,
+      onMouseEnter: () => setCameraHovered(true),
+      onMouseLeave: () => setCameraHovered(false),
       style: {
-        position: "fixed",
-        left: pos.x,
-        top: pos.y,
-        width: CONTAINER_SIZE,
-        height: CONTAINER_SIZE,
+        width: 32,
+        height: 32,
         borderRadius: "50%",
-        background: "rgba(32, 32, 36, 0.92)",
-        backdropFilter: "blur(20px)",
-        WebkitBackdropFilter: "blur(20px)",
-        border: "none",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
         cursor: dragging ? "grabbing" : "pointer",
-        zIndex: 2147483647,
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
-        transition: "background 0.15s",
-        userSelect: "none"
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.background = "rgba(32, 32, 36, 0.98)";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.background = "rgba(32, 32, 36, 0.92)";
+        background: cameraHovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
+        transition: "background 0.12s ease"
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -306,218 +385,136 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
             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, { size: 16, strokeWidth: 1.9, color: "white" })
+        ) : phase === "ready" ? /* @__PURE__ */ jsx(Check, { size: 16, strokeWidth: 2.6, color: "#4ade80" }) : /* @__PURE__ */ jsx(
+          Camera,
+          {
+            size: 16,
+            strokeWidth: 1.9,
+            color: cameraHovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)"
+          }
+        )
       ]
     }
   );
-}
-
-// src/overlay/ui/preview.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var CAMERA_CURSOR = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 12h4l2-3h8l2 3h4a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3z' fill='black' fill-opacity='0.25' transform='translate(0,1)'/%3E%3Cpath d='M6 12h4l2-3h8l2 3h4a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3z' fill='white'/%3E%3Ccircle cx='16' cy='19' r='4.5' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3Ccircle cx='16' cy='19' r='1.5' fill='%23999'/%3E%3C/svg%3E") 16 16, pointer`;
-function CapturePreview({ mode, onClick }) {
-  if (mode === "viewport" || mode === "fullpage") {
-    return /* @__PURE__ */ jsx2(
-      "div",
+  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,
       {
-        "data-afterbefore": "true",
-        onClick,
-        style: {
-          position: "fixed",
-          inset: 0,
-          zIndex: 2147483645,
-          cursor: CAMERA_CURSOR,
-          background: "rgba(59, 130, 246, 0.15)"
-        }
-      }
-    );
-  }
-  return null;
-}
-
-// src/overlay/ui/toolbar.tsx
-import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
-import {
-  ArrowUp,
-  ChevronDown,
-  Clock,
-  Copy,
-  Maximize,
-  FolderOpen,
-  Frame,
-  ImageIcon,
-  Monitor,
-  MousePointer2,
-  Palette,
-  Settings,
-  Trash2,
-  Upload,
-  X
-} from "lucide-react";
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var MODES = [
-  { mode: "component", label: "Capture Component", icon: MousePointer2 },
-  { mode: "viewport", label: "Capture Viewport", icon: Monitor },
-  { mode: "fullpage", label: "Capture Full Page", icon: Maximize }
-];
-function Toolbar({
-  selectedMode,
-  onModeChange,
-  onCapture,
-  onCancel,
-  frameSettings,
-  onFrameSettingsChange
-}) {
-  const [settingsOpen, setSettingsOpen] = useState3(false);
-  const [historyOpen, setHistoryOpen] = useState3(false);
-  useEffect2(() => {
-    const onKey = (e) => {
-      if (e.target?.tagName === "INPUT") {
-        if (e.key === "Escape") {
-          e.target.blur();
-        }
-        return;
+        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 }),
+    /* @__PURE__ */ jsx(
+      SettingsButton,
+      {
+        open: settingsOpen,
+        onClick: () => {
+          setSettingsOpen((prev) => !prev);
+          setHistoryOpen(false);
+        },
+        selectedMode,
+        frameSettings,
+        onFrameSettingsChange,
+        panelSide,
+        tooltipSide
       }
-      if (e.key === "Escape") {
-        if (settingsOpen) {
+    ),
+    /* @__PURE__ */ jsx(
+      HistoryButton,
+      {
+        open: historyOpen,
+        onClick: () => {
+          setHistoryOpen((prev) => !prev);
           setSettingsOpen(false);
-          return;
-        }
-        onCancel();
-      } else if (e.key === "Enter") {
-        onCapture(selectedMode);
+        },
+        panelSide,
+        tooltipSide
       }
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [onCancel, onCapture, selectedMode, settingsOpen]);
-  return /* @__PURE__ */ jsx3(
+    ),
+    /* @__PURE__ */ jsx(Separator, { vertical: false })
+  ] }) : null;
+  return /* @__PURE__ */ jsx(
     "div",
     {
+      ref: toolbarRef,
       "data-afterbefore": "true",
       style: {
         position: "fixed",
-        bottom: 48,
-        left: "50%",
-        transform: "translateX(-50%)",
+        ...positionStyle,
         zIndex: 2147483647,
         display: "flex",
+        flexDirection: "column",
         alignItems: "center",
-        gap: 10,
-        flexWrap: "wrap",
-        justifyContent: "center",
-        maxWidth: "min(calc(100vw - 32px), 1120px)",
-        background: "rgba(32, 32, 36, 0.92)",
-        backdropFilter: "blur(20px)",
-        WebkitBackdropFilter: "blur(20px)",
-        border: "none",
+        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"
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        userSelect: "none"
       },
-      children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 0 }, children: [
-        /* @__PURE__ */ jsx3(CloseButton, { onClick: onCancel }),
-        /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "center", gap: 2, padding: "0 4px" }, children: MODES.map(({ mode, label, icon: Icon2 }) => /* @__PURE__ */ jsx3(
-          ModeButton,
-          {
-            label,
-            selected: selectedMode === mode,
-            onClick: () => {
-              setSettingsOpen(false);
-              setHistoryOpen(false);
-              onModeChange(mode);
-            },
-            children: /* @__PURE__ */ jsx3(Icon2, { size: 16, strokeWidth: 1.7 })
-          },
-          mode
-        )) }),
-        /* @__PURE__ */ jsx3(Separator, {}),
-        /* @__PURE__ */ jsx3(
-          SettingsButton,
-          {
-            open: settingsOpen,
-            onClick: () => {
-              setSettingsOpen((prev) => !prev);
-              setHistoryOpen(false);
-            },
-            selectedMode,
-            frameSettings,
-            onFrameSettingsChange
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          HistoryButton,
-          {
-            open: historyOpen,
-            onClick: () => {
-              setHistoryOpen((prev) => !prev);
-              setSettingsOpen(false);
-            }
-          }
-        )
+      children: bottom ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        toolbarButtons,
+        cameraButton
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        cameraButton,
+        toolbarButtons
       ] })
     }
   );
 }
-function CloseButton({ onClick }) {
-  const [hovered, setHovered] = useState3(false);
-  return /* @__PURE__ */ jsx3(
-    "button",
-    {
-      onClick,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      style: {
-        width: 32,
-        height: 32,
-        borderRadius: "50%",
-        border: "none",
-        background: hovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        cursor: "pointer",
-        padding: 0,
-        color: hovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)",
-        transition: "background 0.12s ease, color 0.12s ease"
-      },
-      children: /* @__PURE__ */ jsx3(X, { size: 16, strokeWidth: 1.7 })
-    }
-  );
-}
-function ModeButton({
+function IconButton({
   children,
-  label,
-  selected,
+  active,
+  tooltip,
+  tooltipSide = "left",
   onClick
 }) {
-  const [hovered, setHovered] = useState3(false);
-  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
-    hovered && /* @__PURE__ */ jsx3(
+  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",
-          left: "50%",
-          bottom: "calc(100% + 10px)",
-          transform: "translateX(-50%)",
-          background: "rgba(32, 32, 36, 0.96)",
-          backdropFilter: "blur(20px)",
-          WebkitBackdropFilter: "blur(20px)",
+          ...tooltipStyle,
+          background: "rgb(32, 32, 36)",
           border: "1px solid rgba(255, 255, 255, 0.1)",
-          borderRadius: 8,
-          padding: "5px 10px",
+          borderRadius: 6,
+          padding: "3px 8px",
           color: "rgba(255, 255, 255, 0.88)",
-          fontSize: 12,
+          fontSize: 11,
           whiteSpace: "nowrap",
           boxShadow: "0 8px 28px rgba(0, 0, 0, 0.28)",
           pointerEvents: "none"
         },
-        children: label
+        children: tooltip
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx(
       "button",
       {
         onClick,
@@ -528,13 +525,13 @@ function ModeButton({
           height: 32,
           borderRadius: "50%",
           border: "none",
-          background: selected || hovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
+          background: active || hovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
           cursor: "pointer",
           padding: 0,
-          color: selected || hovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)",
+          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
@@ -547,12 +544,13 @@ function SettingsButton({
   onClick,
   selectedMode,
   frameSettings,
-  onFrameSettingsChange
+  onFrameSettingsChange,
+  panelSide,
+  tooltipSide
 }) {
-  const [hovered, setHovered] = useState3(false);
-  const [saveDir, setSaveDir] = useState3(null);
-  const [picking, setPicking] = useState3(false);
-  useEffect2(() => {
+  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(() => {
     });
@@ -576,49 +574,24 @@ function SettingsButton({
     }
   };
   const shortDir = saveDir ? saveDir.replace(/^\/Users\/[^/]+/, "~") : "~/Desktop";
-  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx3(
-      "button",
-      {
-        onClick,
-        onMouseEnter: () => setHovered(true),
-        onMouseLeave: () => setHovered(false),
-        style: {
-          width: 32,
-          height: 32,
-          borderRadius: "50%",
-          border: "none",
-          background: open || hovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer",
-          padding: 0,
-          color: open || hovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)",
-          transition: "background 0.12s ease, color 0.12s ease"
-        },
-        children: /* @__PURE__ */ jsx3(Settings, { size: 16, strokeWidth: 1.7 })
-      }
-    ),
-    open && /* @__PURE__ */ jsxs2(
+  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",
-          left: "50%",
-          bottom: "calc(100% + 12px)",
-          transform: "translateX(-50%)",
+          ...panelStyle,
           minWidth: 260,
           padding: "10px 12px",
           borderRadius: 12,
-          background: "rgba(32, 32, 36, 0.96)",
+          background: "rgb(32, 32, 36)",
           border: "1px solid rgba(255, 255, 255, 0.1)",
-          boxShadow: "0 14px 36px rgba(0, 0, 0, 0.32)",
-          backdropFilter: "blur(20px)",
-          WebkitBackdropFilter: "blur(20px)"
+          boxShadow: "0 14px 36px rgba(0, 0, 0, 0.32)"
         },
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx(
             "div",
             {
               style: {
@@ -631,25 +604,26 @@ function SettingsButton({
               children: "Settings"
             }
           ),
-          selectedMode === "component" && /* @__PURE__ */ jsxs2(Fragment, { children: [
-            /* @__PURE__ */ jsx3(
+          selectedMode === "component" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
               ToggleRow,
               {
-                icon: /* @__PURE__ */ jsx3(Frame, { size: 15, strokeWidth: 1.8 }),
+                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__ */ jsxs2("div", { style: { marginTop: 8, display: "flex", flexDirection: "column", gap: 10 }, children: [
-              /* @__PURE__ */ jsx3(
+            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__ */ jsx3(
+              /* @__PURE__ */ jsx(
                 FrameBackgroundControl,
                 {
                   bgType: frameSettings.bgType,
@@ -661,8 +635,8 @@ function SettingsButton({
               )
             ] })
           ] }),
-          selectedMode === "component" && /* @__PURE__ */ jsx3("div", { style: { height: 1, background: "rgba(255,255,255,0.08)", margin: "8px 0" } }),
-          /* @__PURE__ */ jsx3(
+          selectedMode === "component" && /* @__PURE__ */ jsx("div", { style: { height: 1, background: "rgba(255,255,255,0.08)", margin: "8px 0" } }),
+          /* @__PURE__ */ jsx(
             SaveLocationRow,
             {
               dir: shortDir,
@@ -679,13 +653,13 @@ function FrameSizeControl({
   size,
   onChange
 }) {
-  const [sizeOpen, setSizeOpen] = useState3(false);
+  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__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsx3(SettingsLabel, { children: "Size" }),
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 4, marginTop: 4 }, children: [
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(SettingsLabel, { children: "Size" }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4, marginTop: 4 }, children: [
+      /* @__PURE__ */ jsx(
         NumInput,
         {
           value: size.w,
@@ -695,8 +669,8 @@ function FrameSizeControl({
           }
         }
       ),
-      /* @__PURE__ */ jsx3(StaticText, { children: "x" }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx(StaticText, { children: "x" }),
+      /* @__PURE__ */ jsx(
         NumInput,
         {
           value: size.h,
@@ -707,8 +681,8 @@ function FrameSizeControl({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs2("div", { style: { position: "relative", marginTop: 6 }, children: [
-      /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", marginTop: 6 }, children: [
+      /* @__PURE__ */ jsxs(
         "button",
         {
           onClick: () => setSizeOpen((prev) => !prev),
@@ -730,11 +704,11 @@ function FrameSizeControl({
           },
           children: [
             currentPreset ? currentPreset.label : "Custom",
-            /* @__PURE__ */ jsx3(ChevronDown, { size: 12, strokeWidth: 2 })
+            /* @__PURE__ */ jsx(ChevronDown, { size: 12, strokeWidth: 2 })
           ]
         }
       ),
-      sizeOpen && /* @__PURE__ */ jsx3(
+      sizeOpen && /* @__PURE__ */ jsx(
         "div",
         {
           style: {
@@ -742,16 +716,14 @@ function FrameSizeControl({
             bottom: "calc(100% + 4px)",
             left: 0,
             right: 0,
-            background: "rgba(32, 32, 36, 0.96)",
+            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)",
-            backdropFilter: "blur(20px)",
-            WebkitBackdropFilter: "blur(20px)",
             zIndex: 1
           },
-          children: FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsx3(
+          children: FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsxs(
             DropItem,
             {
               active: !isCustom && preset.w === size.w && preset.h === size.h,
@@ -759,7 +731,10 @@ function FrameSizeControl({
                 onChange({ w: preset.w, h: preset.h });
                 setSizeOpen(false);
               },
-              children: preset.label
+              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
           ))
@@ -775,7 +750,7 @@ function FrameBackgroundControl({
   frameSize,
   onChange
 }) {
-  const fileInputRef = useRef2(null);
+  const fileInputRef = useRef(null);
   const handleFileSelect = (e) => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -793,40 +768,40 @@ function FrameBackgroundControl({
     reader.readAsDataURL(file);
     e.target.value = "";
   };
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsx3(SettingsLabel, { children: "Background" }),
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 2, marginTop: 4 }, children: [
-      /* @__PURE__ */ jsxs2(
+  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__ */ jsx3(Palette, { size: 12, strokeWidth: 2 }),
+            /* @__PURE__ */ jsx(Palette, { size: 12, strokeWidth: 2 }),
             "Color"
           ]
         }
       ),
-      /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs(
         SegmentButton,
         {
           active: bgType === "image",
           onClick: () => onChange({ bgType: "image" }),
           style: { borderRadius: "0 6px 6px 0" },
           children: [
-            /* @__PURE__ */ jsx3(ImageIcon, { size: 12, strokeWidth: 2 }),
+            /* @__PURE__ */ jsx(ImageIcon, { size: 12, strokeWidth: 2 }),
             "Image"
           ]
         }
       )
     ] }),
-    bgType === "color" && /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: 6 }, children: [
-      /* @__PURE__ */ jsx3(ColorSwatch, { color: bgColor, onChange: (c) => onChange({ bgColor: c }) }),
-      /* @__PURE__ */ jsx3(HexInput, { value: bgColor, onChange: (c) => onChange({ bgColor: c }) })
+    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 }) }),
+      /* @__PURE__ */ jsx(HexInput, { value: bgColor, onChange: (c) => onChange({ bgColor: c }) })
     ] }),
-    bgType === "image" && /* @__PURE__ */ jsxs2("div", { style: { marginTop: 6 }, children: [
-      /* @__PURE__ */ jsx3(
+    bgType === "image" && /* @__PURE__ */ jsxs("div", { style: { marginTop: 6 }, children: [
+      /* @__PURE__ */ jsx(
         "input",
         {
           ref: fileInputRef,
@@ -836,8 +811,8 @@ function FrameBackgroundControl({
           style: { display: "none" }
         }
       ),
-      bgImage ? /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-        /* @__PURE__ */ jsx3(
+      bgImage ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+        /* @__PURE__ */ jsx(
           "img",
           {
             src: bgImage,
@@ -851,20 +826,20 @@ function FrameBackgroundControl({
             }
           }
         ),
-        /* @__PURE__ */ jsxs2(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
-          /* @__PURE__ */ jsx3(Upload, { size: 11, strokeWidth: 2 }),
+        /* @__PURE__ */ jsxs(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
+          /* @__PURE__ */ jsx(Upload, { size: 11, strokeWidth: 2 }),
           "Replace"
         ] }),
-        /* @__PURE__ */ jsx3(SmallButton, { onClick: () => onChange({ bgImage: null }), children: /* @__PURE__ */ jsx3(Trash2, { size: 11, strokeWidth: 2 }) })
-      ] }) : /* @__PURE__ */ jsxs2(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
-        /* @__PURE__ */ jsx3(Upload, { size: 11, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx(SmallButton, { onClick: () => onChange({ bgImage: null }), children: /* @__PURE__ */ jsx(Trash2, { size: 11, strokeWidth: 2 }) })
+      ] }) : /* @__PURE__ */ jsxs(SmallButton, { onClick: () => fileInputRef.current?.click(), children: [
+        /* @__PURE__ */ jsx(Upload, { size: 11, strokeWidth: 2 }),
         "Upload image"
       ] })
     ] })
   ] });
 }
 function SettingsLabel({ children }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
@@ -882,7 +857,7 @@ function SegmentButton({
   onClick,
   style
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       onClick,
@@ -909,9 +884,9 @@ function ColorSwatch({
   color,
   onChange
 }) {
-  const inputRef = useRef2(null);
-  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx3(
+  const inputRef = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(
       "button",
       {
         onClick: () => inputRef.current?.click(),
@@ -926,7 +901,7 @@ function ColorSwatch({
         }
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx(
       "input",
       {
         ref: inputRef,
@@ -950,8 +925,8 @@ function SmallButton({
   children,
   onClick
 }) {
-  const [hovered, setHovered] = useState3(false);
-  return /* @__PURE__ */ jsx3(
+  const [hovered, setHovered] = useState2(false);
+  return /* @__PURE__ */ jsx(
     "button",
     {
       onClick,
@@ -996,8 +971,8 @@ function SaveLocationRow({
   picking,
   onPick
 }) {
-  const [btnHovered, setBtnHovered] = useState3(false);
-  return /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: /* @__PURE__ */ jsxs2(
+  const [btnHovered, setBtnHovered] = useState2(false);
+  return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
@@ -1008,8 +983,8 @@ function SaveLocationRow({
         fontSize: 13
       },
       children: [
-        /* @__PURE__ */ jsx3(FolderOpen, { size: 15, strokeWidth: 1.8, style: { flexShrink: 0 } }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx(FolderOpen, { size: 15, strokeWidth: 1.8, style: { flexShrink: 0 } }),
+        /* @__PURE__ */ jsx(
           "span",
           {
             style: {
@@ -1023,7 +998,7 @@ function SaveLocationRow({
             children: dir
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx(
           "button",
           {
             onClick: onPick,
@@ -1052,10 +1027,11 @@ function SaveLocationRow({
 function ToggleRow({
   icon,
   label,
+  hint,
   enabled,
   onChange
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     "label",
     {
       style: {
@@ -1066,24 +1042,37 @@ function ToggleRow({
         cursor: "pointer"
       },
       children: [
-        /* @__PURE__ */ jsxs2(
-          "span",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              color: "rgba(255, 255, 255, 0.88)",
-              fontSize: 13,
-              whiteSpace: "nowrap"
-            },
-            children: [
-              icon,
-              label
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx3(
+        /* @__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",
@@ -1100,7 +1089,7 @@ function ToggleRow({
               flexShrink: 0,
               transition: "background 0.12s ease"
             },
-            children: /* @__PURE__ */ jsx3(
+            children: /* @__PURE__ */ jsx(
               "span",
               {
                 style: {
@@ -1125,14 +1114,14 @@ function NumInput({
   value,
   onChange
 }) {
-  const [editing, setEditing] = useState3(false);
-  const [text, setText] = useState3(String(value));
-  useEffect2(() => {
+  const [editing, setEditing] = useState2(false);
+  const [text, setText] = useState2(String(value));
+  useEffect(() => {
     if (!editing) {
       setText(String(value));
     }
   }, [editing, value]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     "input",
     {
       type: "text",
@@ -1170,9 +1159,9 @@ function HexInput({
   value,
   onChange
 }) {
-  const [editing, setEditing] = useState3(false);
-  const [text, setText] = useState3(value);
-  useEffect2(() => {
+  const [editing, setEditing] = useState2(false);
+  const [text, setText] = useState2(value);
+  useEffect(() => {
     if (!editing) {
       setText(value);
     }
@@ -1183,7 +1172,7 @@ function HexInput({
       onChange(hex);
     }
   };
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     "input",
     {
       type: "text",
@@ -1218,7 +1207,7 @@ function HexInput({
   );
 }
 function StaticText({ children }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       style: {
@@ -1237,7 +1226,7 @@ function DropItem({
   active,
   accent
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       onClick,
@@ -1258,7 +1247,7 @@ function DropItem({
   );
 }
 function Separator({ vertical = true }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
@@ -1273,20 +1262,25 @@ function Separator({ vertical = true }) {
 }
 function HistoryButton({
   open,
-  onClick
+  onClick,
+  panelSide,
+  tooltipSide
 }) {
-  const [hovered, setHovered] = useState3(false);
-  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);
-  useEffect2(() => {
+  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(() => {
     if (!open) {
       setRepoDropOpen(false);
       setBranchDropOpen(false);
@@ -1305,28 +1299,69 @@ function HistoryButton({
     }).catch(() => {
     }).finally(() => setLoading(false));
   }, [open, selectedRepo, selectedBranch]);
-  const showToast = useCallback3((message, type) => {
+  const showToast = useCallback2((message, type) => {
     setToast({ message, type });
     setTimeout(() => setToast(null), 3e3);
   }, []);
   const handleOpenFolder = async () => {
     try {
-      const res = await fetch("/__afterbefore/open", { method: "POST" });
+      const body = selectedRepo && selectedBranch ? JSON.stringify({ repo: selectedRepo, branch: selectedBranch }) : void 0;
+      const res = await fetch("/__afterbefore/open", {
+        method: "POST",
+        headers: body ? { "Content-Type": "application/json" } : void 0,
+        body
+      });
       if (!res.ok) throw new Error();
       showToast("Opened folder", "success");
     } catch {
       showToast("Could not open folder", "error");
     }
   };
-  const handleCopyMarkdown = async () => {
+  const handleRename = async (oldName, newName) => {
+    if (!newName.trim() || newName.trim() === oldName.replace(/\.png$/, "")) {
+      setEditingFile(null);
+      return;
+    }
+    try {
+      const res = await fetch("/__afterbefore/history/rename", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          repo: selectedRepo,
+          branch: selectedBranch,
+          oldName,
+          newName: newName.trim()
+        })
+      });
+      if (!res.ok) throw new Error();
+      const data = await res.json();
+      setScreenshots(
+        (prev) => prev.map(
+          (s) => s.filename === oldName ? { ...s, filename: data.filename, timestamp: data.filename.replace(/\.png$/, "") } : s
+        )
+      );
+      showToast("Renamed", "success");
+    } catch {
+      showToast("Rename failed", "error");
+    }
+    setEditingFile(null);
+  };
+  const handleDelete = async (filename) => {
     try {
-      const res = await fetch("/__afterbefore/markdown");
+      const res = await fetch("/__afterbefore/history/delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          repo: selectedRepo,
+          branch: selectedBranch,
+          file: filename
+        })
+      });
       if (!res.ok) throw new Error();
-      const { markdown } = await res.json();
-      await navigator.clipboard.writeText(markdown);
-      showToast("Copied!", "success");
+      setScreenshots((prev) => prev.filter((s) => s.filename !== filename));
+      showToast("Deleted", "success");
     } catch {
-      showToast("Copy failed", "error");
+      showToast("Delete failed", "error");
     }
   };
   const handlePush = async () => {
@@ -1347,73 +1382,25 @@ function HistoryButton({
       setPushing(false);
     }
   };
-  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
-    hovered && !open && /* @__PURE__ */ jsx3(
+  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(
       "div",
       {
         style: {
           position: "absolute",
-          left: "50%",
-          bottom: "calc(100% + 10px)",
-          transform: "translateX(-50%)",
-          background: "rgba(32, 32, 36, 0.96)",
-          backdropFilter: "blur(20px)",
-          WebkitBackdropFilter: "blur(20px)",
-          border: "1px solid rgba(255, 255, 255, 0.1)",
-          borderRadius: 8,
-          padding: "5px 10px",
-          color: "rgba(255, 255, 255, 0.88)",
-          fontSize: 12,
-          whiteSpace: "nowrap",
-          boxShadow: "0 8px 28px rgba(0, 0, 0, 0.28)",
-          pointerEvents: "none"
-        },
-        children: "Screenshots"
-      }
-    ),
-    /* @__PURE__ */ jsx3(
-      "button",
-      {
-        onClick,
-        onMouseEnter: () => setHovered(true),
-        onMouseLeave: () => setHovered(false),
-        style: {
-          width: 32,
-          height: 32,
-          borderRadius: "50%",
-          border: "none",
-          background: open || hovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer",
-          padding: 0,
-          color: open || hovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)",
-          transition: "background 0.12s ease, color 0.12s ease"
-        },
-        children: /* @__PURE__ */ jsx3(Clock, { size: 16, strokeWidth: 1.7 })
-      }
-    ),
-    open && /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          left: "50%",
-          bottom: "calc(100% + 12px)",
-          transform: "translateX(-50%)",
+          ...panelStyle,
           minWidth: 300,
           maxWidth: 360,
           padding: "10px 12px",
           borderRadius: 12,
-          background: "rgba(32, 32, 36, 0.96)",
+          background: "rgb(32, 32, 36)",
           border: "1px solid rgba(255, 255, 255, 0.1)",
-          boxShadow: "0 14px 36px rgba(0, 0, 0, 0.32)",
-          backdropFilter: "blur(20px)",
-          WebkitBackdropFilter: "blur(20px)"
+          boxShadow: "0 14px 36px rgba(0, 0, 0, 0.32)"
         },
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx(
             "div",
             {
               style: {
@@ -1426,8 +1413,8 @@ function HistoryButton({
               children: "Screenshots"
             }
           ),
-          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 6, marginBottom: 10 }, children: [
-            /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6, marginBottom: 10 }, children: [
+            /* @__PURE__ */ jsx(
               FilterDropdown,
               {
                 label: "Project",
@@ -1445,7 +1432,7 @@ function HistoryButton({
                 }
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx(
               FilterDropdown,
               {
                 label: "Branch",
@@ -1463,7 +1450,7 @@ function HistoryButton({
               }
             )
           ] }),
-          loading ? /* @__PURE__ */ jsx3(
+          loading ? /* @__PURE__ */ jsx(
             "div",
             {
               style: {
@@ -1474,7 +1461,7 @@ function HistoryButton({
               },
               children: "Loading..."
             }
-          ) : screenshots.length === 0 ? /* @__PURE__ */ jsx3(
+          ) : screenshots.length === 0 ? /* @__PURE__ */ jsx(
             "div",
             {
               style: {
@@ -1485,8 +1472,8 @@ function HistoryButton({
               },
               children: "No screenshots yet"
             }
-          ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-            /* @__PURE__ */ jsx3(
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
               "div",
               {
                 style: {
@@ -1496,48 +1483,150 @@ function HistoryButton({
                   flexDirection: "column",
                   gap: 8
                 },
-                children: screenshots.map((shot) => /* @__PURE__ */ jsxs2(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      gap: 10,
-                      alignItems: "center"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx3(
-                        "img",
-                        {
-                          src: `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(shot.filename)}`,
-                          alt: "",
-                          style: {
-                            width: 56,
-                            height: 36,
-                            borderRadius: 4,
-                            objectFit: "cover",
-                            border: "1px solid rgba(255, 255, 255, 0.1)",
-                            flexShrink: 0,
-                            background: "rgba(255, 255, 255, 0.05)"
+                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(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        gap: 10,
+                        alignItems: "center"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              position: "relative",
+                              width: 56,
+                              height: 36,
+                              flexShrink: 0,
+                              borderRadius: 4,
+                              overflow: "hidden",
+                              cursor: "pointer"
+                            },
+                            onMouseEnter: () => setHoveredThumb(shot.filename),
+                            onMouseLeave: () => setHoveredThumb(null),
+                            onClick: () => setLightboxSrc(imgUrl),
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                "img",
+                                {
+                                  src: imgUrl,
+                                  alt: "",
+                                  style: {
+                                    width: 56,
+                                    height: 36,
+                                    objectFit: "cover",
+                                    border: "1px solid rgba(255, 255, 255, 0.1)",
+                                    borderRadius: 4,
+                                    background: "rgba(255, 255, 255, 0.05)",
+                                    display: "block"
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  style: {
+                                    position: "absolute",
+                                    inset: 0,
+                                    background: "rgba(0, 0, 0, 0.55)",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    borderRadius: 4,
+                                    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)" })
+                                }
+                              )
+                            ]
                           }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx3("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx3(
-                        "div",
-                        {
-                          style: {
-                            fontSize: 12,
-                            color: "rgba(255, 255, 255, 0.88)"
-                          },
-                          children: formatTimestamp(shot.filename)
-                        }
-                      ) })
-                    ]
-                  },
-                  shot.filename
-                ))
+                        ),
+                        /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children: isEditing ? /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            autoFocus: true,
+                            value: editValue,
+                            onChange: (e) => setEditValue(e.target.value),
+                            onKeyDown: (e) => {
+                              if (e.key === "Enter") handleRename(shot.filename, editValue);
+                              if (e.key === "Escape") setEditingFile(null);
+                            },
+                            onBlur: () => handleRename(shot.filename, editValue),
+                            style: {
+                              width: "100%",
+                              fontSize: 12,
+                              color: "rgba(255, 255, 255, 0.88)",
+                              background: "rgba(255, 255, 255, 0.1)",
+                              border: "1px solid rgba(255, 255, 255, 0.2)",
+                              borderRadius: 4,
+                              padding: "2px 6px",
+                              outline: "none",
+                              fontFamily: "inherit"
+                            }
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            onClick: () => {
+                              setEditingFile(shot.filename);
+                              setEditValue(shot.filename.replace(/\.png$/, ""));
+                            },
+                            style: {
+                              fontSize: 12,
+                              color: "rgba(255, 255, 255, 0.88)",
+                              cursor: "pointer",
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap"
+                            },
+                            title: "Click to rename",
+                            children: formatTimestamp(shot.filename)
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: () => handleDelete(shot.filename),
+                            title: "Delete screenshot",
+                            style: {
+                              flexShrink: 0,
+                              width: 24,
+                              height: 24,
+                              borderRadius: 4,
+                              border: "none",
+                              background: "transparent",
+                              color: "rgba(255, 255, 255, 0.35)",
+                              cursor: "pointer",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              padding: 0
+                            },
+                            onMouseEnter: (e) => {
+                              e.currentTarget.style.color = "rgba(239, 68, 68, 0.9)";
+                              e.currentTarget.style.background = "rgba(239, 68, 68, 0.1)";
+                            },
+                            onMouseLeave: (e) => {
+                              e.currentTarget.style.color = "rgba(255, 255, 255, 0.35)";
+                              e.currentTarget.style.background = "transparent";
+                            },
+                            children: /* @__PURE__ */ jsx(Trash2, { size: 13, strokeWidth: 1.8 })
+                          }
+                        )
+                      ]
+                    },
+                    shot.filename
+                  );
+                })
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx(
               "div",
               {
                 style: {
@@ -1547,22 +1636,18 @@ function HistoryButton({
                 }
               }
             ),
-            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-              /* @__PURE__ */ jsxs2(ActionButton, { onClick: handleOpenFolder, children: [
-                /* @__PURE__ */ jsx3(FolderOpen, { size: 13, strokeWidth: 1.8 }),
+            /* @__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 }),
                 "Open Folder"
               ] }),
-              /* @__PURE__ */ jsxs2(ActionButton, { onClick: handleCopyMarkdown, children: [
-                /* @__PURE__ */ jsx3(Copy, { size: 13, strokeWidth: 1.8 }),
-                "Copy Markdown"
-              ] }),
-              /* @__PURE__ */ jsxs2(ActionButton, { onClick: handlePush, disabled: pushing, children: [
-                /* @__PURE__ */ jsx3(ArrowUp, { size: 13, strokeWidth: 1.8 }),
+              /* @__PURE__ */ jsxs(ActionButton, { onClick: handlePush, disabled: pushing, children: [
+                /* @__PURE__ */ jsx(ArrowUp, { size: 13, strokeWidth: 1.8 }),
                 pushing ? "Pushing..." : "Push to PR"
               ] })
             ] })
           ] }),
-          toast && /* @__PURE__ */ jsx3(
+          toast && /* @__PURE__ */ jsx(
             "div",
             {
               style: {
@@ -1585,6 +1670,66 @@ function HistoryButton({
           )
         ]
       }
+    ),
+    lightboxSrc && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: () => setLightboxSrc(null),
+        onKeyDown: (e) => {
+          if (e.key === "Escape") setLightboxSrc(null);
+        },
+        style: {
+          position: "fixed",
+          inset: 0,
+          bottom: 100,
+          zIndex: 2147483646,
+          background: "rgba(0, 0, 0, 0.85)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "zoom-out"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: lightboxSrc,
+              alt: "",
+              onClick: (e) => e.stopPropagation(),
+              style: {
+                maxWidth: "90vw",
+                maxHeight: "calc(100% - 32px)",
+                borderRadius: 8,
+                boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
+                cursor: "default"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setLightboxSrc(null),
+              style: {
+                position: "absolute",
+                top: 16,
+                right: 16,
+                width: 32,
+                height: 32,
+                borderRadius: "50%",
+                border: "none",
+                background: "rgba(255, 255, 255, 0.15)",
+                color: "white",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: 0
+              },
+              children: /* @__PURE__ */ jsx(X, { size: 18, strokeWidth: 2 })
+            }
+          )
+        ]
+      }
     )
   ] });
 }
@@ -1596,8 +1741,8 @@ function FilterDropdown({
   onToggle,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
       "div",
       {
         style: {
@@ -1609,8 +1754,8 @@ function FilterDropdown({
         children: label
       }
     ),
-    /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxs(
         "button",
         {
           onClick: onToggle,
@@ -1631,7 +1776,7 @@ function FilterDropdown({
             fontFamily: "inherit"
           },
           children: [
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx(
               "span",
               {
                 style: {
@@ -1642,11 +1787,11 @@ function FilterDropdown({
                 children: value || "\u2014"
               }
             ),
-            /* @__PURE__ */ jsx3(ChevronDown, { size: 12, strokeWidth: 2 })
+            /* @__PURE__ */ jsx(ChevronDown, { size: 12, strokeWidth: 2 })
           ]
         }
       ),
-      isOpen && options.length > 0 && /* @__PURE__ */ jsx3(
+      isOpen && options.length > 0 && /* @__PURE__ */ jsx(
         "div",
         {
           style: {
@@ -1656,16 +1801,14 @@ function FilterDropdown({
             right: 0,
             maxHeight: 160,
             overflowY: "auto",
-            background: "rgba(32, 32, 36, 0.96)",
+            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)",
-            backdropFilter: "blur(20px)",
-            WebkitBackdropFilter: "blur(20px)",
             zIndex: 1
           },
-          children: options.map((opt) => /* @__PURE__ */ jsx3(
+          children: options.map((opt) => /* @__PURE__ */ jsx(
             DropItem,
             {
               active: opt === value,
@@ -1684,8 +1827,8 @@ function ActionButton({
   onClick,
   disabled
 }) {
-  const [hovered, setHovered] = useState3(false);
-  return /* @__PURE__ */ jsx3(
+  const [hovered, setHovered] = useState2(false);
+  return /* @__PURE__ */ jsx(
     "button",
     {
       onClick,
@@ -1727,23 +1870,28 @@ function formatTimestamp(filename) {
 }
 
 // src/overlay/ui/inspector.tsx
-import { useEffect as useEffect3, useRef as useRef3, useCallback as useCallback4, useState as useState4 } from "react";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useRef as useRef2, useCallback as useCallback3, useState as useState3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function Inspector({ onSelect, onCancel }) {
-  const [highlight, setHighlight] = useState4(null);
-  const hoveredEl = useRef3(null);
-  const styleEl = useRef3(null);
-  useEffect3(() => {
+  const [highlight, setHighlight] = useState3(null);
+  const hoveredEl = useRef2(null);
+  const styleEl = useRef2(null);
+  useEffect2(() => {
     const style = document.createElement("style");
     style.setAttribute("data-afterbefore", "true");
-    style.textContent = ":not([data-afterbefore]):not([data-afterbefore] *) { cursor: crosshair !important; }";
+    style.textContent = [
+      "* { cursor: crosshair !important; }",
+      "[data-afterbefore], [data-afterbefore] * { cursor: auto !important; }",
+      "[data-afterbefore] button, [data-afterbefore] label, [data-afterbefore] a { cursor: pointer !important; }",
+      "[data-afterbefore] input, [data-afterbefore] textarea { cursor: text !important; }"
+    ].join("\n");
     document.head.appendChild(style);
     styleEl.current = style;
     return () => {
       style.remove();
     };
   }, []);
-  const isOverlayElement = useCallback4((el) => {
+  const isOverlayElement = useCallback3((el) => {
     let node = el;
     while (node) {
       if (node instanceof HTMLElement && node.dataset.afterbefore) return true;
@@ -1751,7 +1899,7 @@ function Inspector({ onSelect, onCancel }) {
     }
     return false;
   }, []);
-  const handleMouseMove = useCallback4(
+  const handleMouseMove = useCallback3(
     (e) => {
       const el = document.elementFromPoint(e.clientX, e.clientY);
       if (!el || !(el instanceof HTMLElement) || isOverlayElement(el)) {
@@ -1765,13 +1913,12 @@ function Inspector({ onSelect, onCancel }) {
         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]}` : "")
+        height: rect.height
       });
     },
     [isOverlayElement]
   );
-  const handleClick = useCallback4(
+  const handleClick = useCallback3(
     (e) => {
       if (isOverlayElement(e.target)) return;
       e.preventDefault();
@@ -1783,7 +1930,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [onSelect, isOverlayElement]
   );
-  const handleKeyDown = useCallback4(
+  const handleKeyDown = useCallback3(
     (e) => {
       if (e.key === "Escape") {
         onCancel();
@@ -1791,7 +1938,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [onCancel]
   );
-  useEffect3(() => {
+  useEffect2(() => {
     document.addEventListener("mousemove", handleMouseMove, true);
     document.addEventListener("click", handleClick, true);
     document.addEventListener("keydown", handleKeyDown);
@@ -1801,48 +1948,27 @@ function Inspector({ onSelect, onCancel }) {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [handleMouseMove, handleClick, handleKeyDown]);
-  return /* @__PURE__ */ jsx4("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: highlight && /* @__PURE__ */ jsxs3(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
+  return /* @__PURE__ */ jsx2("div", { "data-afterbefore": "true", style: { position: "fixed", inset: 0, zIndex: 2147483646, pointerEvents: "none" }, children: highlight && /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        left: highlight.x,
+        top: highlight.y,
+        width: highlight.width,
+        height: highlight.height,
+        background: "transparent",
+        border: "1px solid #fff",
+        borderRadius: 2,
+        boxShadow: "0 0 0 9999px rgba(0, 0, 0, 0.5)",
+        pointerEvents: "none"
       }
-    )
-  ] }) });
+    }
+  ) });
 }
 
 // src/overlay/index.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 async function saveCapture(mode, dataUrl) {
   try {
     const res = await fetch("/__afterbefore/save", {
@@ -1860,13 +1986,12 @@ async function saveCapture(mode, dataUrl) {
 }
 function AfterBefore() {
   const { state, captureComplete, reset } = useOverlayState();
-  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);
-  const iconPos = useRef4({ x: 24, y: 0 });
-  useEffect4(() => {
+  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(() => {
     try {
       const stored = localStorage.getItem("ab-frame-settings");
       if (stored) {
@@ -1881,7 +2006,7 @@ function AfterBefore() {
       setFrameSettings(DEFAULT_FRAME_SETTINGS);
     }
   }, []);
-  useEffect4(() => {
+  useEffect3(() => {
     if (state.phase === "ready") {
       const timer = setTimeout(() => {
         reset();
@@ -1889,13 +2014,7 @@ function AfterBefore() {
       return () => clearTimeout(timer);
     }
   }, [state.phase, reset]);
-  const handlePositionChange = useCallback5(
-    (pos) => {
-      iconPos.current = pos;
-    },
-    []
-  );
-  const handleIconClick = useCallback5(() => {
+  const handleToggle = useCallback4(() => {
     if (loading) return;
     if (state.phase === "ready") {
       reset();
@@ -1913,7 +2032,7 @@ function AfterBefore() {
       }
     }
   }, [state.phase, loading, toolbarActive, inspectorActive, selectedMode, reset]);
-  const performCapture = useCallback5(
+  const performCapture = useCallback4(
     async (mode, element) => {
       setLoading(true);
       try {
@@ -1932,7 +2051,7 @@ function AfterBefore() {
     },
     [captureComplete, frameSettings]
   );
-  const handleToolbarCapture = useCallback5(
+  const handleToolbarCapture = useCallback4(
     (mode) => {
       if (mode === "viewport") {
         setToolbarActive(false);
@@ -1946,10 +2065,11 @@ function AfterBefore() {
     },
     [performCapture]
   );
-  const handleToolbarCancel = useCallback5(() => {
+  const handleToolbarCancel = useCallback4(() => {
     setToolbarActive(false);
+    setInspectorActive(false);
   }, []);
-  const handleComponentSelect = useCallback5(
+  const handleComponentSelect = useCallback4(
     (element) => {
       setInspectorActive(false);
       setToolbarActive(false);
@@ -1957,41 +2077,29 @@ function AfterBefore() {
     },
     [performCapture]
   );
-  const handleComponentCancel = useCallback5(() => {
+  const handleComponentCancel = useCallback4(() => {
     setInspectorActive(false);
     setToolbarActive(true);
   }, []);
-  const handleFrameSettingsChange = useCallback5((next) => {
+  const handleFrameSettingsChange = useCallback4((next) => {
     setFrameSettings(next);
     try {
       localStorage.setItem("ab-frame-settings", JSON.stringify(next));
     } catch {
     }
   }, []);
-  const handleModeChange = useCallback5((mode) => {
+  const handleModeChange = useCallback4((mode) => {
     setSelectedMode(mode);
     setInspectorActive(mode === "component");
   }, []);
-  return /* @__PURE__ */ jsxs4("div", { "data-afterbefore": "true", children: [
-    /* @__PURE__ */ jsx5(
-      Icon,
+  return /* @__PURE__ */ jsxs2("div", { "data-afterbefore": "true", children: [
+    /* @__PURE__ */ jsx3(
+      Toolbar,
       {
+        expanded: toolbarActive,
+        onToggle: handleToggle,
         phase: state.phase,
-        onClick: handleIconClick,
         loading,
-        onPositionChange: handlePositionChange
-      }
-    ),
-    toolbarActive && !inspectorActive && !loading && /* @__PURE__ */ jsx5(
-      CapturePreview,
-      {
-        mode: selectedMode,
-        onClick: () => handleToolbarCapture(selectedMode)
-      }
-    ),
-    toolbarActive && /* @__PURE__ */ jsx5(
-      Toolbar,
-      {
         selectedMode,
         onModeChange: handleModeChange,
         onCapture: handleToolbarCapture,
@@ -2000,7 +2108,7 @@ function AfterBefore() {
         onFrameSettingsChange: handleFrameSettingsChange
       }
     ),
-    inspectorActive && /* @__PURE__ */ jsx5(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel })
+    inspectorActive && /* @__PURE__ */ jsx3(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel })
   ] });
 }
 export {