afterbefore 0.1.18 → 0.2.0

package/dist/overlay/index.js

@@ -0,0 +1,1176 @@
+"use client";
+
+// src/overlay/index.tsx
+import { useState as useState5, useCallback as useCallback6, useRef as useRef5 } from "react";
+
+// src/overlay/state.ts
+import { useState, useCallback } from "react";
+var initialState = {
+  phase: "idle",
+  before: null,
+  after: null
+};
+function useOverlayState() {
+  const [state, setState] = useState(initialState);
+  const captureComplete = useCallback(
+    (result) => {
+      setState((prev) => {
+        if (prev.phase === "idle") {
+          return { ...prev, phase: "captured-before", before: result };
+        }
+        if (prev.phase === "captured-before") {
+          return { ...prev, phase: "ready", after: result };
+        }
+        return prev;
+      });
+    },
+    []
+  );
+  const reset = useCallback(() => {
+    setState(initialState);
+  }, []);
+  return { state, captureComplete, reset };
+}
+
+// src/overlay/capture.ts
+import { toPng } from "html-to-image";
+async function capture(options) {
+  const { mode, area } = options;
+  if (mode === "viewport") {
+    return captureViewport();
+  }
+  if (mode === "fullpage") {
+    return captureFullPage();
+  }
+  if (mode === "area" && area) {
+    return captureArea(area);
+  }
+  throw new Error(`Invalid capture mode: ${mode}`);
+}
+async function captureViewport() {
+  const dataUrl = await toPng(document.documentElement, {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    style: {
+      overflow: "hidden"
+    },
+    filter: filterOverlay
+  });
+  return dataUrl;
+}
+async function captureFullPage() {
+  const scrollY = window.scrollY;
+  const body = document.body;
+  const html = document.documentElement;
+  const fullHeight = Math.max(
+    body.scrollHeight,
+    body.offsetHeight,
+    html.clientHeight,
+    html.scrollHeight,
+    html.offsetHeight
+  );
+  const dataUrl = await toPng(document.documentElement, {
+    width: window.innerWidth,
+    height: fullHeight,
+    style: {
+      overflow: "visible",
+      height: `${fullHeight}px`
+    },
+    filter: filterOverlay
+  });
+  window.scrollTo(0, scrollY);
+  return dataUrl;
+}
+async function captureArea(area) {
+  const fullDataUrl = await captureViewport();
+  const img = await loadImage(fullDataUrl);
+  const dpr = window.devicePixelRatio || 1;
+  const canvas = document.createElement("canvas");
+  canvas.width = area.width * dpr;
+  canvas.height = area.height * dpr;
+  const ctx = canvas.getContext("2d");
+  ctx.drawImage(
+    img,
+    area.x * dpr,
+    area.y * dpr,
+    area.width * dpr,
+    area.height * dpr,
+    0,
+    0,
+    area.width * dpr,
+    area.height * dpr
+  );
+  return canvas.toDataURL("image/png");
+}
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+}
+function filterOverlay(node) {
+  return !node.dataset?.afterbefore;
+}
+
+// src/overlay/ui/icon.tsx
+import { useRef, useCallback as useCallback2, useEffect, useState as useState2 } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ICON_SIZE = 40;
+var EDGE_MARGIN = 24;
+function Icon({ phase, onClick, loading, onPositionChange }) {
+  const ref = useRef(null);
+  const [pos, setPos] = useState2({ x: EDGE_MARGIN, y: -1 });
+  const dragState = useRef(null);
+  useEffect(() => {
+    setPos((prev) => {
+      if (prev.y === -1) {
+        const y = window.innerHeight - ICON_SIZE - EDGE_MARGIN;
+        return { x: prev.x, y };
+      }
+      return prev;
+    });
+  }, []);
+  useEffect(() => {
+    if (pos.y !== -1) {
+      onPositionChange?.({ x: pos.x, y: pos.y });
+    }
+  }, [pos, onPositionChange]);
+  const handleMouseDown = useCallback2(
+    (e) => {
+      e.preventDefault();
+      dragState.current = {
+        dragging: true,
+        startX: e.clientX,
+        startY: e.clientY,
+        origX: pos.x,
+        origY: pos.y,
+        distance: 0
+      };
+    },
+    [pos]
+  );
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      const ds = dragState.current;
+      if (!ds || !ds.dragging) return;
+      const dx = e.clientX - ds.startX;
+      const dy = e.clientY - ds.startY;
+      ds.distance = Math.sqrt(dx * dx + dy * dy);
+      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 });
+    };
+    const handleMouseUp = () => {
+      const ds = dragState.current;
+      if (!ds) return;
+      if (ds.distance < 5) {
+        onClick();
+      }
+      dragState.current = null;
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [onClick]);
+  if (pos.y === -1) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-afterbefore": "true",
+      onMouseDown: handleMouseDown,
+      style: {
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        borderRadius: "50%",
+        background: "rgba(30, 30, 30, 0.85)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "grab",
+        zIndex: 2147483647,
+        boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
+        transition: "background 0.15s",
+        userSelect: "none"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "rgba(30, 30, 30, 0.95)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "rgba(30, 30, 30, 0.85)";
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "style",
+          {
+            dangerouslySetInnerHTML: {
+              __html: `
+@keyframes ab-pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.08); opacity: 0.85; }
+}
+@keyframes ab-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}`
+            }
+          }
+        ),
+        loading ? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 20 20",
+            style: { animation: "ab-spin 0.8s linear infinite" },
+            children: /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: "10",
+                cy: "10",
+                r: "8",
+                fill: "none",
+                stroke: "white",
+                strokeWidth: "2",
+                strokeDasharray: "40",
+                strokeDashoffset: "10",
+                strokeLinecap: "round"
+              }
+            )
+          }
+        ) : phase === "ready" ? /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4 10l4 4 8-8",
+            fill: "none",
+            stroke: "#4ade80",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              animation: phase === "captured-before" ? "ab-pulse 2s ease-in-out infinite" : "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", children: [
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: "2",
+                    y: "5",
+                    width: "16",
+                    height: "12",
+                    rx: "2",
+                    fill: "none",
+                    stroke: "white",
+                    strokeWidth: "1.5"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: "10",
+                    cy: "11",
+                    r: "3",
+                    fill: "none",
+                    stroke: "white",
+                    strokeWidth: "1.5"
+                  }
+                ),
+                /* @__PURE__ */ jsx("path", { d: "M7 5l1-2h4l1 2", fill: "none", stroke: "white", strokeWidth: "1.5" })
+              ] }),
+              phase === "captured-before" && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: -6,
+                    right: -8,
+                    width: 14,
+                    height: 14,
+                    borderRadius: "50%",
+                    background: "#3b82f6",
+                    color: "white",
+                    fontSize: "9px",
+                    fontWeight: 700,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    lineHeight: 1,
+                    fontFamily: "system-ui, sans-serif"
+                  },
+                  children: "1"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/overlay/ui/menu.tsx
+import { useEffect as useEffect2, useRef as useRef2, useCallback as useCallback3 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var modes = [
+  {
+    mode: "viewport",
+    label: "Viewport",
+    icon: /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", children: [
+      /* @__PURE__ */ jsx2(
+        "rect",
+        {
+          x: "1",
+          y: "2",
+          width: "14",
+          height: "11",
+          rx: "1.5",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "line",
+        {
+          x1: "1",
+          y1: "14",
+          x2: "15",
+          y2: "14",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    ] })
+  },
+  {
+    mode: "fullpage",
+    label: "Full Page",
+    icon: /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", children: [
+      /* @__PURE__ */ jsx2(
+        "rect",
+        {
+          x: "3",
+          y: "1",
+          width: "10",
+          height: "14",
+          rx: "1.5",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "line",
+        {
+          x1: "5.5",
+          y1: "4",
+          x2: "10.5",
+          y2: "4",
+          stroke: "currentColor",
+          strokeWidth: "1",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "line",
+        {
+          x1: "5.5",
+          y1: "6.5",
+          x2: "10.5",
+          y2: "6.5",
+          stroke: "currentColor",
+          strokeWidth: "1",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "line",
+        {
+          x1: "5.5",
+          y1: "9",
+          x2: "10.5",
+          y2: "9",
+          stroke: "currentColor",
+          strokeWidth: "1",
+          strokeLinecap: "round"
+        }
+      )
+    ] })
+  },
+  {
+    mode: "area",
+    label: "Select Area",
+    icon: /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 16 16", children: [
+      /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M1 5V2.5A1.5 1.5 0 012.5 1H5",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M11 1h2.5A1.5 1.5 0 0115 2.5V5",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M15 11v2.5a1.5 1.5 0 01-1.5 1.5H11",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M5 15H2.5A1.5 1.5 0 011 13.5V11",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    ] })
+  }
+];
+var MENU_WIDTH = 160;
+function Menu({ onSelect, onClose, position }) {
+  const menuRef = useRef2(null);
+  const handleClickOutside = useCallback3(
+    (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  const handleKeyDown = useCallback3(
+    (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  useEffect2(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleClickOutside, handleKeyDown]);
+  const menuLeft = Math.max(
+    8,
+    Math.min(position.x - MENU_WIDTH / 2 + 20, window.innerWidth - MENU_WIDTH - 8)
+  );
+  const menuBottom = window.innerHeight - position.y + 8;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: menuRef,
+      "data-afterbefore": "true",
+      style: {
+        position: "fixed",
+        left: menuLeft,
+        bottom: menuBottom,
+        width: MENU_WIDTH,
+        background: "rgba(24, 24, 27, 0.95)",
+        borderRadius: 10,
+        padding: 4,
+        boxShadow: "0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08)",
+        zIndex: 2147483647,
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        backdropFilter: "blur(12px)"
+      },
+      children: modes.map(({ mode, label, icon }) => /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          onClick: () => onSelect(mode),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            width: "100%",
+            padding: "8px 10px",
+            border: "none",
+            background: "transparent",
+            color: "rgba(255,255,255,0.9)",
+            fontSize: 13,
+            borderRadius: 6,
+            cursor: "pointer",
+            textAlign: "left",
+            transition: "background 0.1s"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.background = "rgba(255,255,255,0.1)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.background = "transparent";
+          },
+          children: [
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  color: "rgba(255,255,255,0.6)"
+                },
+                children: icon
+              }
+            ),
+            label
+          ]
+        },
+        mode
+      ))
+    }
+  );
+}
+
+// src/overlay/ui/selector.tsx
+import { useState as useState3, useRef as useRef3, useCallback as useCallback4, useEffect as useEffect3 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var MIN_SIZE = 10;
+function Selector({ onSelect, onCancel }) {
+  const [selection, setSelection] = useState3(null);
+  const dragging = useRef3(false);
+  const handleKeyDown = useCallback4(
+    (e) => {
+      if (e.key === "Escape") {
+        onCancel();
+      }
+    },
+    [onCancel]
+  );
+  useEffect3(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  const handleMouseDown = useCallback4((e) => {
+    e.preventDefault();
+    dragging.current = true;
+    setSelection({
+      startX: e.clientX,
+      startY: e.clientY,
+      endX: e.clientX,
+      endY: e.clientY
+    });
+  }, []);
+  const handleMouseMove = useCallback4((e) => {
+    if (!dragging.current) return;
+    setSelection((prev) => {
+      if (!prev) return prev;
+      return { ...prev, endX: e.clientX, endY: e.clientY };
+    });
+  }, []);
+  const handleMouseUp = useCallback4(() => {
+    if (!dragging.current || !selection) return;
+    dragging.current = false;
+    const x = Math.min(selection.startX, selection.endX);
+    const y = Math.min(selection.startY, selection.endY);
+    const width = Math.abs(selection.endX - selection.startX);
+    const height = Math.abs(selection.endY - selection.startY);
+    if (width >= MIN_SIZE && height >= MIN_SIZE) {
+      onSelect({ x, y, width, height });
+    } else {
+      setSelection(null);
+    }
+  }, [selection, onSelect]);
+  const rect = selection ? {
+    x: Math.min(selection.startX, selection.endX),
+    y: Math.min(selection.startY, selection.endY),
+    w: Math.abs(selection.endX - selection.startX),
+    h: Math.abs(selection.endY - selection.startY)
+  } : null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-afterbefore": "true",
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 2147483647,
+        cursor: "crosshair"
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: "rgba(0, 0, 0, 0.4)",
+              pointerEvents: "none",
+              ...rect && rect.w > 0 && rect.h > 0 ? {
+                clipPath: `polygon(
+                  0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%,
+                  ${rect.x}px ${rect.y}px,
+                  ${rect.x}px ${rect.y + rect.h}px,
+                  ${rect.x + rect.w}px ${rect.y + rect.h}px,
+                  ${rect.x + rect.w}px ${rect.y}px,
+                  ${rect.x}px ${rect.y}px
+                )`
+              } : {}
+            }
+          }
+        ),
+        rect && rect.w > 0 && rect.h > 0 && /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: rect.x,
+                top: rect.y,
+                width: rect.w,
+                height: rect.h,
+                border: "2px solid rgba(59, 130, 246, 0.8)",
+                borderRadius: 2,
+                pointerEvents: "none",
+                boxShadow: "0 0 0 1px rgba(0,0,0,0.3)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left: rect.x + rect.w / 2,
+                top: rect.y + rect.h + 8,
+                transform: "translateX(-50%)",
+                background: "rgba(24, 24, 27, 0.9)",
+                color: "rgba(255,255,255,0.9)",
+                fontSize: 11,
+                fontFamily: "system-ui, -apple-system, monospace",
+                padding: "2px 8px",
+                borderRadius: 4,
+                whiteSpace: "nowrap",
+                pointerEvents: "none"
+              },
+              children: [
+                Math.round(rect.w),
+                " \xD7 ",
+                Math.round(rect.h)
+              ]
+            }
+          )
+        ] }),
+        !selection && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              color: "rgba(255,255,255,0.7)",
+              fontSize: 14,
+              fontFamily: "system-ui, -apple-system, sans-serif",
+              pointerEvents: "none",
+              textShadow: "0 1px 4px rgba(0,0,0,0.5)"
+            },
+            children: "Drag to select an area \xB7 Esc to cancel"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/overlay/ui/status.tsx
+import { useState as useState4, useRef as useRef4, useEffect as useEffect4, useCallback as useCallback5 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var PANEL_WIDTH = 220;
+function Status({ onReset, position, onClose }) {
+  const panelRef = useRef4(null);
+  const [toast, setToast] = useState4(null);
+  const [pushing, setPushing] = useState4(false);
+  const showToast = useCallback5((message, type) => {
+    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__ */ jsx4(
+          "div",
+          {
+            style: {
+              padding: "10px 12px 6px",
+              fontSize: 12,
+              fontWeight: 600,
+              color: "rgba(255,255,255,0.5)",
+              letterSpacing: "0.02em"
+            },
+            children: "Before & After captured"
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { style: { padding: "0 4px 4px" }, children: [
+          /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              style: buttonStyle,
+              onClick: handleOpenFolder,
+              onMouseEnter: onEnter,
+              onMouseLeave: onLeave,
+              children: [
+                /* @__PURE__ */ jsx4(FolderIcon, {}),
+                "Open Folder"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              style: buttonStyle,
+              onClick: handleCopyMarkdown,
+              onMouseEnter: onEnter,
+              onMouseLeave: onLeave,
+              children: [
+                /* @__PURE__ */ jsx4(CopyIcon, {}),
+                "Copy Markdown"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              style: buttonStyle,
+              onClick: handlePush,
+              disabled: pushing,
+              onMouseEnter: onEnter,
+              onMouseLeave: onLeave,
+              children: [
+                /* @__PURE__ */ jsx4(PushIcon, {}),
+                pushing ? "Pushing..." : "Push to PR"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "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__ */ jsx4(ResetIcon, {}),
+                "Reset"
+              ]
+            }
+          )
+        ] }),
+        toast && /* @__PURE__ */ jsx4(
+          "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__ */ jsx4(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      style: { color: "rgba(255,255,255,0.5)" },
+      children: /* @__PURE__ */ jsx4(
+        "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__ */ jsx4(
+          "rect",
+          {
+            x: "4",
+            y: "4",
+            width: "8.5",
+            height: "8.5",
+            rx: "1.5",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.3"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "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__ */ jsx4(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      style: { color: "rgba(255,255,255,0.5)" },
+      children: /* @__PURE__ */ jsx4(
+        "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__ */ jsx4(
+          "path",
+          {
+            d: "M2.5 7a4.5 4.5 0 118 2.5",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.3",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "path",
+          {
+            d: "M2.5 3v4h4",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/overlay/index.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+async function saveCapture(type, mode, dataUrl) {
+  try {
+    const res = await fetch("/__afterbefore/save", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ type, mode, image: dataUrl })
+    });
+    if (!res.ok) throw new Error("Save failed");
+  } catch {
+    const link = document.createElement("a");
+    link.download = `${type}.png`;
+    link.href = dataUrl;
+    link.click();
+  }
+}
+function AfterBefore() {
+  const { state, captureComplete, reset } = useOverlayState();
+  const [menuOpen, setMenuOpen] = useState5(false);
+  const [statusOpen, setStatusOpen] = useState5(false);
+  const [selectorActive, setSelectorActive] = useState5(false);
+  const [loading, setLoading] = useState5(false);
+  const iconPos = useRef5({ x: 24, y: 0 });
+  const handlePositionChange = useCallback6(
+    (pos) => {
+      iconPos.current = pos;
+    },
+    []
+  );
+  const handleIconClick = useCallback6(() => {
+    if (loading) return;
+    if (state.phase === "ready") {
+      setStatusOpen((prev) => !prev);
+      setMenuOpen(false);
+    } else {
+      setMenuOpen((prev) => !prev);
+      setStatusOpen(false);
+    }
+  }, [state.phase, loading]);
+  const performCapture = useCallback6(
+    async (mode, area) => {
+      setLoading(true);
+      try {
+        const dataUrl = await capture({ mode, area });
+        const type = state.phase === "idle" ? "before" : "after";
+        await saveCapture(type, mode, dataUrl);
+        captureComplete({
+          dataUrl,
+          mode,
+          timestamp: Date.now()
+        });
+      } catch (err) {
+        console.error("[afterbefore] Capture failed:", err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [state.phase, captureComplete]
+  );
+  const handleModeSelect = useCallback6(
+    (mode) => {
+      setMenuOpen(false);
+      if (mode === "area") {
+        setSelectorActive(true);
+      } else {
+        performCapture(mode);
+      }
+    },
+    [performCapture]
+  );
+  const handleAreaSelect = useCallback6(
+    (area) => {
+      setSelectorActive(false);
+      performCapture("area", area);
+    },
+    [performCapture]
+  );
+  const handleAreaCancel = useCallback6(() => {
+    setSelectorActive(false);
+  }, []);
+  const handleReset = useCallback6(() => {
+    reset();
+    setStatusOpen(false);
+    setMenuOpen(false);
+  }, [reset]);
+  const handleMenuClose = useCallback6(() => {
+    setMenuOpen(false);
+  }, []);
+  const handleStatusClose = useCallback6(() => {
+    setStatusOpen(false);
+  }, []);
+  return /* @__PURE__ */ jsxs5("div", { "data-afterbefore": "true", children: [
+    /* @__PURE__ */ jsx5(
+      Icon,
+      {
+        phase: state.phase,
+        onClick: handleIconClick,
+        loading,
+        onPositionChange: handlePositionChange
+      }
+    ),
+    menuOpen && (state.phase === "idle" || state.phase === "captured-before") && /* @__PURE__ */ jsx5(
+      Menu,
+      {
+        onSelect: handleModeSelect,
+        onClose: handleMenuClose,
+        position: iconPos.current
+      }
+    ),
+    selectorActive && /* @__PURE__ */ jsx5(Selector, { onSelect: handleAreaSelect, onCancel: handleAreaCancel }),
+    statusOpen && state.phase === "ready" && /* @__PURE__ */ jsx5(
+      Status,
+      {
+        onReset: handleReset,
+        position: iconPos.current,
+        onClose: handleStatusClose
+      }
+    )
+  ] });
+}
+export {
+  AfterBefore
+};
+//# sourceMappingURL=index.js.map