afterbefore 0.2.13 → 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";
@@ -181,11 +181,13 @@ function loadImage(src) {
 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 ICON_SIZE = 32;
+var CONTAINER_SIZE = 38;
+var ICON_SIZE = CONTAINER_SIZE;
 var EDGE_MARGIN = 24;
 function Icon({ phase, onClick, loading, onPositionChange }) {
   const ref = useRef(null);
   const [pos, setPos] = useState2({ x: -1, y: -1 });
+  const [dragging, setDragging] = useState2(false);
   const dragState = useRef(null);
   useEffect(() => {
     setPos((prev) => {
@@ -206,6 +208,7 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
   const handleMouseDown = useCallback2(
     (e) => {
       e.preventDefault();
+      setDragging(true);
       dragState.current = {
         dragging: true,
         startX: e.clientX,
@@ -240,6 +243,7 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
       if (ds.distance < 5) {
         onClick();
       }
+      setDragging(false);
       dragState.current = null;
     };
     window.addEventListener("mousemove", handleMouseMove);
@@ -260,17 +264,17 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
         position: "fixed",
         left: pos.x,
         top: pos.y,
-        width: ICON_SIZE,
-        height: ICON_SIZE,
+        width: CONTAINER_SIZE,
+        height: CONTAINER_SIZE,
         borderRadius: "50%",
         background: "rgba(32, 32, 36, 0.92)",
         backdropFilter: "blur(20px)",
         WebkitBackdropFilter: "blur(20px)",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
+        border: "none",
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        cursor: "grab",
+        cursor: dragging ? "grabbing" : "pointer",
         zIndex: 2147483647,
         boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
         transition: "background 0.15s",
@@ -310,7 +314,7 @@ function Icon({ phase, onClick, loading, onPositionChange }) {
 
 // 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 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") 16 16, pointer`;
+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(
@@ -323,8 +327,7 @@ function CapturePreview({ mode, onClick }) {
           inset: 0,
           zIndex: 2147483645,
           cursor: CAMERA_CURSOR,
-          background: "rgba(59, 130, 246, 0.15)",
-          boxShadow: "inset 0 0 0 2px rgba(59, 130, 246, 0.7)"
+          background: "rgba(59, 130, 246, 0.15)"
         }
       }
     );
@@ -333,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,
@@ -363,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") {
@@ -403,7 +410,7 @@ function Toolbar({
         background: "rgba(32, 32, 36, 0.92)",
         backdropFilter: "blur(20px)",
         WebkitBackdropFilter: "blur(20px)",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
+        border: "none",
         borderRadius: 999,
         padding: 6,
         boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
@@ -418,6 +425,7 @@ function Toolbar({
             selected: selectedMode === mode,
             onClick: () => {
               setSettingsOpen(false);
+              setHistoryOpen(false);
               onModeChange(mode);
             },
             children: /* @__PURE__ */ jsx3(Icon2, { size: 16, strokeWidth: 1.7 })
@@ -429,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);
+            }
+          }
         )
       ] })
     }
@@ -450,7 +471,7 @@ function CloseButton({ onClick }) {
       style: {
         width: 32,
         height: 32,
-        borderRadius: 10,
+        borderRadius: "50%",
         border: "none",
         background: hovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
         display: "flex",
@@ -505,7 +526,7 @@ function ModeButton({
         style: {
           width: 32,
           height: 32,
-          borderRadius: 10,
+          borderRadius: "50%",
           border: "none",
           background: selected || hovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
           display: "flex",
@@ -663,7 +684,30 @@ function FrameSizeControl({
   const isCustom = !currentPreset;
   return /* @__PURE__ */ jsxs2("div", { children: [
     /* @__PURE__ */ jsx3(SettingsLabel, { children: "Size" }),
-    /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "center", gap: 6, marginTop: 4 }, children: /* @__PURE__ */ jsxs2("div", { style: { position: "relative", flex: 1 }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 4, marginTop: 4 }, children: [
+      /* @__PURE__ */ jsx3(
+        NumInput,
+        {
+          value: size.w,
+          onChange: (v) => {
+            const n = parseInt(v, 10);
+            if (!Number.isNaN(n) && n > 0) onChange({ ...size, w: n });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx3(StaticText, { children: "x" }),
+      /* @__PURE__ */ jsx3(
+        NumInput,
+        {
+          value: size.h,
+          onChange: (v) => {
+            const n = parseInt(v, 10);
+            if (!Number.isNaN(n) && n > 0) onChange({ ...size, h: n });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { style: { position: "relative", marginTop: 6 }, children: [
       /* @__PURE__ */ jsxs2(
         "button",
         {
@@ -690,7 +734,7 @@ function FrameSizeControl({
           ]
         }
       ),
-      sizeOpen && /* @__PURE__ */ jsxs2(
+      sizeOpen && /* @__PURE__ */ jsx3(
         "div",
         {
           style: {
@@ -707,44 +751,18 @@ function FrameSizeControl({
             WebkitBackdropFilter: "blur(20px)",
             zIndex: 1
           },
-          children: [
-            FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsx3(
-              DropItem,
-              {
-                active: !isCustom && preset.w === size.w && preset.h === size.h,
-                onClick: () => {
-                  onChange({ w: preset.w, h: preset.h });
-                  setSizeOpen(false);
-                },
-                children: preset.label
+          children: FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsx3(
+            DropItem,
+            {
+              active: !isCustom && preset.w === size.w && preset.h === size.h,
+              onClick: () => {
+                onChange({ w: preset.w, h: preset.h });
+                setSizeOpen(false);
               },
-              preset.label
-            )),
-            /* @__PURE__ */ jsx3(DropItem, { active: isCustom, onClick: () => setSizeOpen(false), children: "Custom" })
-          ]
-        }
-      )
-    ] }) }),
-    isCustom && /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 4, marginTop: 6 }, children: [
-      /* @__PURE__ */ jsx3(
-        NumInput,
-        {
-          value: size.w,
-          onChange: (v) => {
-            const n = parseInt(v, 10);
-            if (!Number.isNaN(n) && n > 0) onChange({ ...size, w: n });
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx3(StaticText, { children: "x" }),
-      /* @__PURE__ */ jsx3(
-        NumInput,
-        {
-          value: size.h,
-          onChange: (v) => {
-            const n = parseInt(v, 10);
-            if (!Number.isNaN(n) && n > 0) onChange({ ...size, h: n });
-          }
+              children: preset.label
+            },
+            preset.label
+          ))
         }
       )
     ] })
@@ -805,7 +823,7 @@ function FrameBackgroundControl({
     ] }),
     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("span", { style: { fontSize: 12, color: "rgba(255,255,255,0.6)" }, children: bgColor })
+      /* @__PURE__ */ jsx3(HexInput, { value: bgColor, onChange: (c) => onChange({ bgColor: c }) })
     ] }),
     bgType === "image" && /* @__PURE__ */ jsxs2("div", { style: { marginTop: 6 }, children: [
       /* @__PURE__ */ jsx3(
@@ -1148,6 +1166,57 @@ function NumInput({
     }
   );
 }
+function HexInput({
+  value,
+  onChange
+}) {
+  const [editing, setEditing] = useState3(false);
+  const [text, setText] = useState3(value);
+  useEffect2(() => {
+    if (!editing) {
+      setText(value);
+    }
+  }, [editing, value]);
+  const commit = (raw) => {
+    const hex = raw.startsWith("#") ? raw : `#${raw}`;
+    if (/^#[0-9a-fA-F]{6}$/.test(hex)) {
+      onChange(hex);
+    }
+  };
+  return /* @__PURE__ */ jsx3(
+    "input",
+    {
+      type: "text",
+      value: editing ? text : value,
+      onFocus: () => {
+        setEditing(true);
+        setText(value);
+      },
+      onBlur: () => {
+        setEditing(false);
+        commit(text);
+      },
+      onChange: (e) => setText(e.target.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.target.blur();
+        }
+      },
+      style: {
+        width: 72,
+        padding: "4px 6px",
+        background: "rgba(255, 255, 255, 0.07)",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        borderRadius: 7,
+        color: "rgba(255, 255, 255, 0.9)",
+        fontSize: 12,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        textAlign: "left",
+        outline: "none"
+      }
+    }
+  );
+}
 function StaticText({ children }) {
   return /* @__PURE__ */ jsx3(
     "span",
@@ -1202,150 +1271,44 @@ function Separator({ vertical = true }) {
     }
   );
 }
-
-// src/overlay/ui/inspector.tsx
-import { useEffect as useEffect3, useRef as useRef3, useCallback as useCallback3, 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);
-  const hoveredEl = useRef3(null);
-  const styleEl = useRef3(null);
-  useEffect3(() => {
-    const style = document.createElement("style");
-    style.setAttribute("data-afterbefore", "true");
-    style.textContent = "*, *::before, *::after { cursor: crosshair !important; }";
-    document.head.appendChild(style);
-    styleEl.current = style;
-    return () => {
-      style.remove();
-    };
-  }, []);
-  const isOverlayElement = useCallback3((el) => {
-    let node = el;
-    while (node) {
-      if (node instanceof HTMLElement && node.dataset.afterbefore) return true;
-      node = node.parentElement;
+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;
     }
-    return false;
-  }, []);
-  const handleMouseMove = useCallback3(
-    (e) => {
-      const el = document.elementFromPoint(e.clientX, e.clientY);
-      if (!el || !(el instanceof HTMLElement) || isOverlayElement(el)) {
-        setHighlight(null);
-        hoveredEl.current = null;
-        return;
-      }
-      hoveredEl.current = el;
-      const rect = el.getBoundingClientRect();
-      setHighlight({
-        x: rect.x,
-        y: rect.y,
-        width: rect.width,
-        height: rect.height,
-        tag: el.tagName.toLowerCase() + (el.className && typeof el.className === "string" ? `.${el.className.split(" ")[0]}` : "")
-      });
-    },
-    [isOverlayElement]
-  );
-  const handleClick = useCallback3(
-    (e) => {
-      if (isOverlayElement(e.target)) return;
-      e.preventDefault();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-      if (hoveredEl.current) {
-        onSelect(hoveredEl.current);
-      }
-    },
-    [onSelect, isOverlayElement]
-  );
-  const handleKeyDown = useCallback3(
-    (e) => {
-      if (e.key === "Escape") {
-        onCancel();
-      }
-    },
-    [onCancel]
-  );
-  useEffect3(() => {
-    document.addEventListener("mousemove", handleMouseMove, true);
-    document.addEventListener("click", handleClick, true);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove, true);
-      document.removeEventListener("click", handleClick, true);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [handleMouseMove, handleClick, handleKeyDown]);
-  return /* @__PURE__ */ 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
-      }
-    )
-  ] }) });
-}
-
-// 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) => {
+    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);
   }, []);
-  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" });
@@ -1384,273 +1347,502 @@ function Status({ onReset, position, onClose }) {
       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(
+  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: {
-                height: 1,
-                background: "rgba(255,255,255,0.08)",
-                margin: "4px 6px"
-              }
+                fontSize: 11,
+                color: "rgba(255, 255, 255, 0.46)",
+                letterSpacing: "0.03em",
+                textTransform: "uppercase",
+                marginBottom: 10
+              },
+              children: "Screenshots"
             }
           ),
-          /* @__PURE__ */ jsxs4(
-            "button",
+          /* @__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: { ...buttonStyle, color: "rgba(255,255,255,0.5)" },
-              onClick: handleReset,
-              onMouseEnter: onEnter,
-              onMouseLeave: onLeave,
-              children: [
-                /* @__PURE__ */ jsx5(ResetIcon, {}),
-                "Reset"
-              ]
+              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
             }
           )
-        ] }),
-        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",
+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",
         {
-          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"
+          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 CopyIcon() {
-  return /* @__PURE__ */ jsxs4(
-    "svg",
+function ActionButton({
+  children,
+  onClick,
+  disabled
+}) {
+  const [hovered, setHovered] = useState3(false);
+  return /* @__PURE__ */ jsx3(
+    "button",
     {
-      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"
-          }
-        )
-      ]
+      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 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 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" });
 }
-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/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";
+function Inspector({ onSelect, onCancel }) {
+  const [highlight, setHighlight] = useState4(null);
+  const hoveredEl = useRef3(null);
+  const styleEl = useRef3(null);
+  useEffect3(() => {
+    const style = document.createElement("style");
+    style.setAttribute("data-afterbefore", "true");
+    style.textContent = ":not([data-afterbefore]):not([data-afterbefore] *) { cursor: crosshair !important; }";
+    document.head.appendChild(style);
+    styleEl.current = style;
+    return () => {
+      style.remove();
+    };
+  }, []);
+  const isOverlayElement = useCallback4((el) => {
+    let node = el;
+    while (node) {
+      if (node instanceof HTMLElement && node.dataset.afterbefore) return true;
+      node = node.parentElement;
     }
+    return false;
+  }, []);
+  const handleMouseMove = useCallback4(
+    (e) => {
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      if (!el || !(el instanceof HTMLElement) || isOverlayElement(el)) {
+        setHighlight(null);
+        hoveredEl.current = null;
+        return;
+      }
+      hoveredEl.current = el;
+      const rect = el.getBoundingClientRect();
+      setHighlight({
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+        tag: el.tagName.toLowerCase() + (el.className && typeof el.className === "string" ? `.${el.className.split(" ")[0]}` : "")
+      });
+    },
+    [isOverlayElement]
+  );
+  const handleClick = useCallback4(
+    (e) => {
+      if (isOverlayElement(e.target)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      if (hoveredEl.current) {
+        onSelect(hoveredEl.current);
+      }
+    },
+    [onSelect, isOverlayElement]
   );
+  const handleKeyDown = useCallback4(
+    (e) => {
+      if (e.key === "Escape") {
+        onCancel();
+      }
+    },
+    [onCancel]
+  );
+  useEffect3(() => {
+    document.addEventListener("mousemove", handleMouseMove, true);
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleMouseMove, handleClick, handleKeyDown]);
+  return /* @__PURE__ */ 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
+      }
+    )
+  ] }) });
 }
 
 // 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", {
@@ -1668,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) {
@@ -1690,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);
     }
@@ -1708,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);
@@ -1723,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);
@@ -1781,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,
@@ -1802,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,
@@ -1820,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 {