afterbefore 0.2.14 → 0.2.15

package/dist/overlay/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/overlay/index.tsx
-import { useState as useState6, useCallback as useCallback5, useRef as useRef5, useEffect as useEffect5 } from "react";
+import { useState as useState5, useCallback as useCallback5, useRef as useRef4, useEffect as useEffect4 } from "react";
 
 // src/overlay/state.ts
 import { useState, useCallback } from "react";
@@ -336,9 +336,12 @@ function CapturePreview({ mode, onClick }) {
 }
 
 // src/overlay/ui/toolbar.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
 import {
+  ArrowUp,
   ChevronDown,
+  Clock,
+  Copy,
   Maximize,
   FolderOpen,
   Frame,
@@ -366,6 +369,7 @@ function Toolbar({
   onFrameSettingsChange
 }) {
   const [settingsOpen, setSettingsOpen] = useState3(false);
+  const [historyOpen, setHistoryOpen] = useState3(false);
   useEffect2(() => {
     const onKey = (e) => {
       if (e.target?.tagName === "INPUT") {
@@ -421,6 +425,7 @@ function Toolbar({
             selected: selectedMode === mode,
             onClick: () => {
               setSettingsOpen(false);
+              setHistoryOpen(false);
               onModeChange(mode);
             },
             children: /* @__PURE__ */ jsx3(Icon2, { size: 16, strokeWidth: 1.7 })
@@ -432,11 +437,24 @@ function Toolbar({
           SettingsButton,
           {
             open: settingsOpen,
-            onClick: () => setSettingsOpen((prev) => !prev),
+            onClick: () => {
+              setSettingsOpen((prev) => !prev);
+              setHistoryOpen(false);
+            },
             selectedMode,
             frameSettings,
             onFrameSettingsChange
           }
+        ),
+        /* @__PURE__ */ jsx3(
+          HistoryButton,
+          {
+            open: historyOpen,
+            onClick: () => {
+              setHistoryOpen((prev) => !prev);
+              setSettingsOpen(false);
+            }
+          }
         )
       ] })
     }
@@ -1253,9 +1271,463 @@ function Separator({ vertical = true }) {
     }
   );
 }
+function HistoryButton({
+  open,
+  onClick
+}) {
+  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(() => {
+    if (!open) {
+      setRepoDropOpen(false);
+      setBranchDropOpen(false);
+      return;
+    }
+    setLoading(true);
+    const params = new URLSearchParams();
+    if (selectedRepo) params.set("repo", selectedRepo);
+    if (selectedBranch) params.set("branch", selectedBranch);
+    fetch(`/__afterbefore/history?${params}`).then((r) => r.json()).then((data) => {
+      setRepos(data.repos || []);
+      setBranches(data.branches || []);
+      setScreenshots(data.screenshots || []);
+      if (!selectedRepo && data.currentRepo) setSelectedRepo(data.currentRepo);
+      if (!selectedBranch && data.currentBranch) setSelectedBranch(data.currentBranch);
+    }).catch(() => {
+    }).finally(() => setLoading(false));
+  }, [open, selectedRepo, selectedBranch]);
+  const showToast = useCallback3((message, type) => {
+    setToast({ message, type });
+    setTimeout(() => setToast(null), 3e3);
+  }, []);
+  const handleOpenFolder = async () => {
+    try {
+      const res = await fetch("/__afterbefore/open", { method: "POST" });
+      if (!res.ok) throw new Error();
+      showToast("Opened folder", "success");
+    } catch {
+      showToast("Could not open folder", "error");
+    }
+  };
+  const handleCopyMarkdown = async () => {
+    try {
+      const res = await fetch("/__afterbefore/markdown");
+      if (!res.ok) throw new Error();
+      const { markdown } = await res.json();
+      await navigator.clipboard.writeText(markdown);
+      showToast("Copied!", "success");
+    } catch {
+      showToast("Copy failed", "error");
+    }
+  };
+  const handlePush = async () => {
+    setPushing(true);
+    try {
+      const res = await fetch("/__afterbefore/push", { method: "POST" });
+      const data = await res.json();
+      if (!res.ok) {
+        showToast(data.error || "Push failed", "error");
+      } else if (data.pr) {
+        showToast(`Posted to PR #${data.pr}`, "success");
+      } else {
+        showToast("No PR found", "error");
+      }
+    } catch {
+      showToast("Push failed", "error");
+    } finally {
+      setPushing(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+    hovered && !open && /* @__PURE__ */ jsx3(
+      "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%)",
+          minWidth: 300,
+          maxWidth: 360,
+          padding: "10px 12px",
+          borderRadius: 12,
+          background: "rgba(32, 32, 36, 0.96)",
+          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)"
+        },
+        children: [
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                fontSize: 11,
+                color: "rgba(255, 255, 255, 0.46)",
+                letterSpacing: "0.03em",
+                textTransform: "uppercase",
+                marginBottom: 10
+              },
+              children: "Screenshots"
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 6, marginBottom: 10 }, children: [
+            /* @__PURE__ */ jsx3(
+              FilterDropdown,
+              {
+                label: "Project",
+                value: selectedRepo,
+                options: repos,
+                isOpen: repoDropOpen,
+                onToggle: () => {
+                  setRepoDropOpen((p) => !p);
+                  setBranchDropOpen(false);
+                },
+                onSelect: (repo) => {
+                  setSelectedRepo(repo);
+                  setSelectedBranch(null);
+                  setRepoDropOpen(false);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              FilterDropdown,
+              {
+                label: "Branch",
+                value: selectedBranch,
+                options: branches,
+                isOpen: branchDropOpen,
+                onToggle: () => {
+                  setBranchDropOpen((p) => !p);
+                  setRepoDropOpen(false);
+                },
+                onSelect: (branch) => {
+                  setSelectedBranch(branch);
+                  setBranchDropOpen(false);
+                }
+              }
+            )
+          ] }),
+          loading ? /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                padding: "12px 0",
+                textAlign: "center",
+                fontSize: 12,
+                color: "rgba(255, 255, 255, 0.35)"
+              },
+              children: "Loading..."
+            }
+          ) : screenshots.length === 0 ? /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                padding: "12px 0",
+                textAlign: "center",
+                fontSize: 12,
+                color: "rgba(255, 255, 255, 0.35)"
+              },
+              children: "No screenshots yet"
+            }
+          ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  maxHeight: 240,
+                  overflowY: "auto",
+                  display: "flex",
+                  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)"
+                          }
+                        }
+                      ),
+                      /* @__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__ */ jsx3(
+              "div",
+              {
+                style: {
+                  height: 1,
+                  background: "rgba(255, 255, 255, 0.08)",
+                  margin: "8px 0"
+                }
+              }
+            ),
+            /* @__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 }),
+                "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 }),
+                pushing ? "Pushing..." : "Push to PR"
+              ] })
+            ] })
+          ] }),
+          toast && /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                bottom: "100%",
+                left: "50%",
+                transform: "translateX(-50%)",
+                marginBottom: 8,
+                padding: "6px 12px",
+                borderRadius: 6,
+                fontSize: 12,
+                fontWeight: 500,
+                whiteSpace: "nowrap",
+                color: "white",
+                background: toast.type === "success" ? "rgba(34, 197, 94, 0.9)" : "rgba(239, 68, 68, 0.9)",
+                boxShadow: "0 2px 8px rgba(0,0,0,0.3)"
+              },
+              children: toast.message
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function FilterDropdown({
+  label,
+  value,
+  options,
+  isOpen,
+  onToggle,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          fontSize: 11,
+          color: "rgba(255, 255, 255, 0.42)",
+          letterSpacing: "0.02em",
+          marginBottom: 3
+        },
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          onClick: onToggle,
+          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: [
+            /* @__PURE__ */ jsx3(
+              "span",
+              {
+                style: {
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: value || "\u2014"
+              }
+            ),
+            /* @__PURE__ */ jsx3(ChevronDown, { size: 12, strokeWidth: 2 })
+          ]
+        }
+      ),
+      isOpen && options.length > 0 && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            bottom: "calc(100% + 4px)",
+            left: 0,
+            right: 0,
+            maxHeight: 160,
+            overflowY: "auto",
+            background: "rgba(32, 32, 36, 0.96)",
+            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(
+            DropItem,
+            {
+              active: opt === value,
+              onClick: () => onSelect(opt),
+              children: opt
+            },
+            opt
+          ))
+        }
+      )
+    ] })
+  ] });
+}
+function ActionButton({
+  children,
+  onClick,
+  disabled
+}) {
+  const [hovered, setHovered] = useState3(false);
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      onClick,
+      disabled,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        width: "100%",
+        padding: "6px 8px",
+        border: "none",
+        background: hovered ? "rgba(255, 255, 255, 0.08)" : "transparent",
+        color: "rgba(255, 255, 255, 0.78)",
+        fontSize: 12,
+        borderRadius: 6,
+        cursor: disabled ? "wait" : "pointer",
+        textAlign: "left",
+        fontFamily: "inherit",
+        transition: "background 0.1s ease"
+      },
+      children
+    }
+  );
+}
+function formatTimestamp(filename) {
+  const iso = filename.replace(/\.png$/, "").replace(/T(\d{2})-(\d{2})-(\d{2})-(\d+)Z$/, "T$1:$2:$3.$4Z");
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return filename.replace(/\.png$/, "");
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMin = Math.floor(diffMs / 6e4);
+  if (diffMin < 1) return "Just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  return date.toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+}
 
 // src/overlay/ui/inspector.tsx
-import { useEffect as useEffect3, useRef as useRef3, useCallback as useCallback3, useState as useState4 } from "react";
+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";
 function Inspector({ onSelect, onCancel }) {
   const [highlight, setHighlight] = useState4(null);
@@ -1264,14 +1736,14 @@ function Inspector({ onSelect, onCancel }) {
   useEffect3(() => {
     const style = document.createElement("style");
     style.setAttribute("data-afterbefore", "true");
-    style.textContent = "*, *::before, *::after { cursor: crosshair !important; }";
+    style.textContent = ":not([data-afterbefore]):not([data-afterbefore] *) { cursor: crosshair !important; }";
     document.head.appendChild(style);
     styleEl.current = style;
     return () => {
       style.remove();
     };
   }, []);
-  const isOverlayElement = useCallback3((el) => {
+  const isOverlayElement = useCallback4((el) => {
     let node = el;
     while (node) {
       if (node instanceof HTMLElement && node.dataset.afterbefore) return true;
@@ -1279,7 +1751,7 @@ function Inspector({ onSelect, onCancel }) {
     }
     return false;
   }, []);
-  const handleMouseMove = useCallback3(
+  const handleMouseMove = useCallback4(
     (e) => {
       const el = document.elementFromPoint(e.clientX, e.clientY);
       if (!el || !(el instanceof HTMLElement) || isOverlayElement(el)) {
@@ -1299,7 +1771,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [isOverlayElement]
   );
-  const handleClick = useCallback3(
+  const handleClick = useCallback4(
     (e) => {
       if (isOverlayElement(e.target)) return;
       e.preventDefault();
@@ -1311,7 +1783,7 @@ function Inspector({ onSelect, onCancel }) {
     },
     [onSelect, isOverlayElement]
   );
-  const handleKeyDown = useCallback3(
+  const handleKeyDown = useCallback4(
     (e) => {
       if (e.key === "Escape") {
         onCancel();
@@ -1369,339 +1841,8 @@ function Inspector({ onSelect, onCancel }) {
   ] }) });
 }
 
-// src/overlay/ui/status.tsx
-import { useState as useState5, useRef as useRef4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var PANEL_WIDTH = 220;
-function Status({ onReset, position, onClose }) {
-  const panelRef = useRef4(null);
-  const [toast, setToast] = useState5(null);
-  const [pushing, setPushing] = useState5(false);
-  const showToast = useCallback4((message, type) => {
-    setToast({ message, type });
-    setTimeout(() => setToast(null), 3e3);
-  }, []);
-  useEffect4(() => {
-    const handler = (e) => {
-      if (panelRef.current && !panelRef.current.contains(e.target)) {
-        onClose();
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [onClose]);
-  useEffect4(() => {
-    const handler = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [onClose]);
-  const handleOpenFolder = async () => {
-    try {
-      const res = await fetch("/__afterbefore/open", { method: "POST" });
-      if (!res.ok) throw new Error();
-      showToast("Opened folder", "success");
-    } catch {
-      showToast("Could not open folder", "error");
-    }
-  };
-  const handleCopyMarkdown = async () => {
-    try {
-      const res = await fetch("/__afterbefore/markdown");
-      if (!res.ok) throw new Error();
-      const { markdown } = await res.json();
-      await navigator.clipboard.writeText(markdown);
-      showToast("Copied!", "success");
-    } catch {
-      showToast("Copy failed", "error");
-    }
-  };
-  const handlePush = async () => {
-    setPushing(true);
-    try {
-      const res = await fetch("/__afterbefore/push", { method: "POST" });
-      const data = await res.json();
-      if (!res.ok) {
-        showToast(data.error || "Push failed", "error");
-      } else if (data.pr) {
-        showToast(`Posted to PR #${data.pr}`, "success");
-      } else {
-        showToast("No PR found", "error");
-      }
-    } catch {
-      showToast("Push failed", "error");
-    } finally {
-      setPushing(false);
-    }
-  };
-  const handleReset = () => {
-    onReset();
-    onClose();
-  };
-  const panelLeft = Math.max(
-    8,
-    Math.min(position.x - PANEL_WIDTH / 2 + 20, window.innerWidth - PANEL_WIDTH - 8)
-  );
-  const panelBottom = window.innerHeight - position.y + 8;
-  const buttonStyle = {
-    display: "flex",
-    alignItems: "center",
-    gap: 6,
-    width: "100%",
-    padding: "7px 10px",
-    border: "none",
-    background: "transparent",
-    color: "rgba(255,255,255,0.9)",
-    fontSize: 13,
-    borderRadius: 6,
-    cursor: "pointer",
-    textAlign: "left",
-    fontFamily: "system-ui, -apple-system, sans-serif",
-    transition: "background 0.1s"
-  };
-  const onEnter = (e) => {
-    e.currentTarget.style.background = "rgba(255,255,255,0.1)";
-  };
-  const onLeave = (e) => {
-    e.currentTarget.style.background = "transparent";
-  };
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      ref: panelRef,
-      "data-afterbefore": "true",
-      style: {
-        position: "fixed",
-        left: panelLeft,
-        bottom: panelBottom,
-        width: PANEL_WIDTH,
-        background: "rgba(24, 24, 27, 0.95)",
-        borderRadius: 10,
-        boxShadow: "0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08)",
-        zIndex: 2147483647,
-        fontFamily: "system-ui, -apple-system, sans-serif",
-        backdropFilter: "blur(12px)",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx5(
-          "div",
-          {
-            style: {
-              padding: "10px 12px 6px",
-              fontSize: 12,
-              fontWeight: 600,
-              color: "rgba(255,255,255,0.5)",
-              letterSpacing: "0.02em"
-            },
-            children: "Screenshot captured"
-          }
-        ),
-        /* @__PURE__ */ jsxs4("div", { style: { padding: "0 4px 4px" }, children: [
-          /* @__PURE__ */ jsxs4(
-            "button",
-            {
-              style: buttonStyle,
-              onClick: handleOpenFolder,
-              onMouseEnter: onEnter,
-              onMouseLeave: onLeave,
-              children: [
-                /* @__PURE__ */ jsx5(FolderIcon, {}),
-                "Open Folder"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs4(
-            "button",
-            {
-              style: buttonStyle,
-              onClick: handleCopyMarkdown,
-              onMouseEnter: onEnter,
-              onMouseLeave: onLeave,
-              children: [
-                /* @__PURE__ */ jsx5(CopyIcon, {}),
-                "Copy Markdown"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs4(
-            "button",
-            {
-              style: buttonStyle,
-              onClick: handlePush,
-              disabled: pushing,
-              onMouseEnter: onEnter,
-              onMouseLeave: onLeave,
-              children: [
-                /* @__PURE__ */ jsx5(PushIcon, {}),
-                pushing ? "Pushing..." : "Push to PR"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx5(
-            "div",
-            {
-              style: {
-                height: 1,
-                background: "rgba(255,255,255,0.08)",
-                margin: "4px 6px"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs4(
-            "button",
-            {
-              style: { ...buttonStyle, color: "rgba(255,255,255,0.5)" },
-              onClick: handleReset,
-              onMouseEnter: onEnter,
-              onMouseLeave: onLeave,
-              children: [
-                /* @__PURE__ */ jsx5(ResetIcon, {}),
-                "Reset"
-              ]
-            }
-          )
-        ] }),
-        toast && /* @__PURE__ */ jsx5(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: "100%",
-              left: "50%",
-              transform: "translateX(-50%)",
-              marginBottom: 8,
-              padding: "6px 12px",
-              borderRadius: 6,
-              fontSize: 12,
-              fontWeight: 500,
-              whiteSpace: "nowrap",
-              color: "white",
-              background: toast.type === "success" ? "rgba(34, 197, 94, 0.9)" : "rgba(239, 68, 68, 0.9)",
-              boxShadow: "0 2px 8px rgba(0,0,0,0.3)"
-            },
-            children: toast.message
-          }
-        )
-      ]
-    }
-  );
-}
-function FolderIcon() {
-  return /* @__PURE__ */ jsx5(
-    "svg",
-    {
-      width: "14",
-      height: "14",
-      viewBox: "0 0 14 14",
-      style: { color: "rgba(255,255,255,0.5)" },
-      children: /* @__PURE__ */ jsx5(
-        "path",
-        {
-          d: "M1.5 3A1.5 1.5 0 013 1.5h2.38a1 1 0 01.72.3L7 2.72a1 1 0 00.72.3H11A1.5 1.5 0 0112.5 4.5v6A1.5 1.5 0 0111 12H3A1.5 1.5 0 011.5 10.5V3z",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.3"
-        }
-      )
-    }
-  );
-}
-function CopyIcon() {
-  return /* @__PURE__ */ jsxs4(
-    "svg",
-    {
-      width: "14",
-      height: "14",
-      viewBox: "0 0 14 14",
-      style: { color: "rgba(255,255,255,0.5)" },
-      children: [
-        /* @__PURE__ */ jsx5(
-          "rect",
-          {
-            x: "4",
-            y: "4",
-            width: "8.5",
-            height: "8.5",
-            rx: "1.5",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "1.3"
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          "path",
-          {
-            d: "M10 4V2.5A1.5 1.5 0 008.5 1h-6A1.5 1.5 0 001 2.5v6A1.5 1.5 0 002.5 10H4",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "1.3"
-          }
-        )
-      ]
-    }
-  );
-}
-function PushIcon() {
-  return /* @__PURE__ */ jsx5(
-    "svg",
-    {
-      width: "14",
-      height: "14",
-      viewBox: "0 0 14 14",
-      style: { color: "rgba(255,255,255,0.5)" },
-      children: /* @__PURE__ */ jsx5(
-        "path",
-        {
-          d: "M7 11V3m0 0L4 6m3-3l3 3",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.3",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    }
-  );
-}
-function ResetIcon() {
-  return /* @__PURE__ */ jsxs4(
-    "svg",
-    {
-      width: "14",
-      height: "14",
-      viewBox: "0 0 14 14",
-      style: { color: "rgba(255,255,255,0.4)" },
-      children: [
-        /* @__PURE__ */ jsx5(
-          "path",
-          {
-            d: "M2.5 7a4.5 4.5 0 118 2.5",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "1.3",
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          "path",
-          {
-            d: "M2.5 3v4h4",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "1.3",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
-    }
-  );
-}
-
 // src/overlay/index.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 async function saveCapture(mode, dataUrl) {
   try {
     const res = await fetch("/__afterbefore/save", {
@@ -1719,14 +1860,13 @@ async function saveCapture(mode, dataUrl) {
 }
 function AfterBefore() {
   const { state, captureComplete, reset } = useOverlayState();
-  const [statusOpen, setStatusOpen] = useState6(false);
-  const [toolbarActive, setToolbarActive] = useState6(false);
-  const [inspectorActive, setInspectorActive] = useState6(false);
-  const [loading, setLoading] = useState6(false);
-  const [selectedMode, setSelectedMode] = useState6("component");
-  const [frameSettings, setFrameSettings] = useState6(DEFAULT_FRAME_SETTINGS);
-  const iconPos = useRef5({ x: 24, y: 0 });
-  useEffect5(() => {
+  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(() => {
     try {
       const stored = localStorage.getItem("ab-frame-settings");
       if (stored) {
@@ -1741,11 +1881,10 @@ function AfterBefore() {
       setFrameSettings(DEFAULT_FRAME_SETTINGS);
     }
   }, []);
-  useEffect5(() => {
+  useEffect4(() => {
     if (state.phase === "ready") {
       const timer = setTimeout(() => {
         reset();
-        setStatusOpen(false);
       }, 1500);
       return () => clearTimeout(timer);
     }
@@ -1759,13 +1898,12 @@ function AfterBefore() {
   const handleIconClick = useCallback5(() => {
     if (loading) return;
     if (state.phase === "ready") {
-      setStatusOpen((prev) => !prev);
-    } else if (toolbarActive || inspectorActive) {
+      reset();
+    }
+    if (toolbarActive || inspectorActive) {
       setToolbarActive(false);
       setInspectorActive(false);
-      setStatusOpen(false);
     } else {
-      setStatusOpen(false);
       if (selectedMode === "component") {
         setToolbarActive(true);
         setInspectorActive(true);
@@ -1774,7 +1912,7 @@ function AfterBefore() {
         setInspectorActive(false);
       }
     }
-  }, [state.phase, loading, toolbarActive, inspectorActive, selectedMode]);
+  }, [state.phase, loading, toolbarActive, inspectorActive, selectedMode, reset]);
   const performCapture = useCallback5(
     async (mode, element) => {
       setLoading(true);
@@ -1832,19 +1970,10 @@ function AfterBefore() {
   }, []);
   const handleModeChange = useCallback5((mode) => {
     setSelectedMode(mode);
-    if (mode === "component") {
-      setInspectorActive(true);
-    }
-  }, []);
-  const handleReset = useCallback5(() => {
-    reset();
-    setStatusOpen(false);
-  }, [reset]);
-  const handleStatusClose = useCallback5(() => {
-    setStatusOpen(false);
+    setInspectorActive(mode === "component");
   }, []);
-  return /* @__PURE__ */ jsxs5("div", { "data-afterbefore": "true", children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs4("div", { "data-afterbefore": "true", children: [
+    /* @__PURE__ */ jsx5(
       Icon,
       {
         phase: state.phase,
@@ -1853,14 +1982,14 @@ function AfterBefore() {
         onPositionChange: handlePositionChange
       }
     ),
-    toolbarActive && !inspectorActive && !loading && /* @__PURE__ */ jsx6(
+    toolbarActive && !inspectorActive && !loading && /* @__PURE__ */ jsx5(
       CapturePreview,
       {
         mode: selectedMode,
         onClick: () => handleToolbarCapture(selectedMode)
       }
     ),
-    toolbarActive && /* @__PURE__ */ jsx6(
+    toolbarActive && /* @__PURE__ */ jsx5(
       Toolbar,
       {
         selectedMode,
@@ -1871,15 +2000,7 @@ function AfterBefore() {
         onFrameSettingsChange: handleFrameSettingsChange
       }
     ),
-    inspectorActive && /* @__PURE__ */ jsx6(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel }),
-    statusOpen && state.phase === "ready" && /* @__PURE__ */ jsx6(
-      Status,
-      {
-        onReset: handleReset,
-        position: iconPos.current,
-        onClose: handleStatusClose
-      }
-    )
+    inspectorActive && /* @__PURE__ */ jsx5(Inspector, { onSelect: handleComponentSelect, onCancel: handleComponentCancel })
   ] });
 }
 export {