@rafaelbarross/feedback-widget 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1072 @@
+import { __spreadValues, __spreadProps } from './chunk-FJBZBVPE.mjs';
+import { useState, useEffect, useCallback, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var MARGIN = 20;
+function snapStyles(pos) {
+  const m = MARGIN;
+  const map = {
+    "top-left": { top: m, left: m },
+    "top-center": { top: m, left: "50%", transform: "translateX(-50%)" },
+    "top-right": { top: m, right: m },
+    "middle-left": { top: "50%", left: m, transform: "translateY(-50%)" },
+    "middle-right": { top: "50%", right: m, transform: "translateY(-50%)" },
+    "bottom-left": { bottom: m, left: m },
+    "bottom-center": { bottom: m, left: "50%", transform: "translateX(-50%)" },
+    "bottom-right": { bottom: m, right: m }
+  };
+  return map[pos];
+}
+function resolveSnap(x, y) {
+  const rx = x / window.innerWidth;
+  const ry = y / window.innerHeight;
+  const h = rx < 0.33 ? "left" : rx > 0.67 ? "right" : "center";
+  const v = ry < 0.25 ? "top" : ry > 0.75 ? "bottom" : "middle";
+  if (v === "middle" && h === "center") return rx < 0.5 ? "middle-left" : "middle-right";
+  if (v === "middle") return `middle-${h}`;
+  return `${v}-${h}`;
+}
+function FeedbackButton({ position, label, onClick }) {
+  const [snap, setSnap] = useState(position);
+  const [hovered, setHovered] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const [dragXY, setDragXY] = useState(null);
+  const dragStart = useRef(null);
+  const didDrag = useRef(false);
+  const btnRef = useRef(null);
+  useEffect(() => {
+    if (!dragging) return;
+    const onMove = (e) => {
+      if (!dragStart.current) return;
+      const dx = e.clientX - dragStart.current.mouseX;
+      const dy = e.clientY - dragStart.current.mouseY;
+      if (Math.abs(dx) > 4 || Math.abs(dy) > 4) didDrag.current = true;
+      setDragXY({ x: dragStart.current.btnX + dx, y: dragStart.current.btnY + dy });
+    };
+    const onUp = (e) => {
+      setDragging(false);
+      if (didDrag.current) {
+        setSnap(resolveSnap(e.clientX, e.clientY));
+        setDragXY(null);
+      } else {
+        setDragXY(null);
+        onClick();
+      }
+      didDrag.current = false;
+      dragStart.current = null;
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  }, [dragging, onClick]);
+  const onMouseDown = (e) => {
+    e.preventDefault();
+    const rect = btnRef.current.getBoundingClientRect();
+    dragStart.current = { mouseX: e.clientX, mouseY: e.clientY, btnX: rect.left, btnY: rect.top };
+    didDrag.current = false;
+    setDragging(true);
+  };
+  const baseStyle = {
+    position: "fixed",
+    zIndex: 999998,
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "10px 16px",
+    background: hovered && !dragging ? "#4338CA" : "#4F46E5",
+    color: "#fff",
+    border: "none",
+    borderRadius: 9999,
+    cursor: dragging ? "grabbing" : "grab",
+    fontSize: 14,
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    fontWeight: 600,
+    boxShadow: dragging ? "0 8px 24px rgba(79,70,229,0.55)" : "0 4px 14px rgba(79,70,229,0.45)",
+    userSelect: "none",
+    transition: dragging ? "none" : "background 0.15s, box-shadow 0.15s"
+  };
+  const positionStyle = dragging && dragXY ? { left: dragXY.x, top: dragXY.y } : __spreadProps(__spreadValues({}, snapStyles(snap)), { transition: dragging ? "none" : "all 0.2s cubic-bezier(.34,1.56,.64,1)" });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: btnRef,
+      onMouseDown,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: __spreadValues(__spreadValues({}, baseStyle), positionStyle),
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx(BugIcon, {}),
+        label
+      ]
+    }
+  );
+}
+function BugIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M8 2l1.5 1.5M14.5 3.5L16 2M9 7.5C9 6.1 10.1 5 11.5 5h1C13.9 5 15 6.1 15 7.5M6.5 9H4a1 1 0 0 0-1 1v1a4 4 0 0 0 4 4M17.5 9H20a1 1 0 0 1 1 1v1a4 4 0 0 1-4 4M8 15a4 4 0 0 0 8 0V9a4 4 0 0 0-8 0v6zM9 19.5V22M15 19.5V22M3 15h2M19 15h2" }) });
+}
+var INIT_DRAG = { active: false, startX: 0, startY: 0, endX: 0, endY: 0 };
+function CaptureOverlay({ fullPageCanvas, onCapture, onCancel }) {
+  const canvasRef = useRef(null);
+  const drag = useRef(INIT_DRAG);
+  const imgRef = useRef(null);
+  const [selecting, setSelecting] = useState(false);
+  const draw = useCallback(() => {
+    const canvas = canvasRef.current;
+    const img = imgRef.current;
+    if (!canvas || !img) return;
+    const ctx = canvas.getContext("2d");
+    const { startX, startY, endX, endY, active } = drag.current;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "rgba(0,0,0,0.52)";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    if (active) {
+      const x = Math.min(startX, endX);
+      const y = Math.min(startY, endY);
+      const w = Math.abs(endX - startX);
+      const h = Math.abs(endY - startY);
+      ctx.clearRect(x, y, w, h);
+      ctx.drawImage(img, x, y, w, h, x, y, w, h);
+      ctx.strokeStyle = "#4F46E5";
+      ctx.lineWidth = 2;
+      ctx.strokeRect(x, y, w, h);
+      if (w > 60 && h > 20) {
+        ctx.fillStyle = "rgba(79,70,229,0.9)";
+        ctx.fillRect(x + 4, y + h - 20, 76, 18);
+        ctx.fillStyle = "#fff";
+        ctx.font = "bold 11px system-ui, -apple-system, sans-serif";
+        ctx.fillText(`${Math.round(w)} \xD7 ${Math.round(h)}`, x + 8, y + h - 6);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    const img = new Image();
+    img.onload = () => {
+      imgRef.current = img;
+      draw();
+    };
+    img.src = fullPageCanvas.toDataURL();
+  }, [fullPageCanvas, draw]);
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onCancel();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [onCancel]);
+  const onMouseDown = (e) => {
+    drag.current = { active: true, startX: e.clientX, startY: e.clientY, endX: e.clientX, endY: e.clientY };
+    setSelecting(true);
+  };
+  const onMouseMove = (e) => {
+    if (!drag.current.active) return;
+    drag.current.endX = e.clientX;
+    drag.current.endY = e.clientY;
+    draw();
+  };
+  const onMouseUp = () => {
+    if (!drag.current.active) return;
+    drag.current.active = false;
+    setSelecting(false);
+    const { startX, startY, endX, endY } = drag.current;
+    const w = Math.abs(endX - startX);
+    const h = Math.abs(endY - startY);
+    if (w < 20 || h < 20) {
+      drag.current = INIT_DRAG;
+      draw();
+      return;
+    }
+    onCapture({
+      startX: Math.min(startX, endX),
+      startY: Math.min(startY, endY),
+      endX: Math.max(startX, endX),
+      endY: Math.max(startY, endY)
+    });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        onMouseDown,
+        onMouseMove,
+        onMouseUp,
+        style: { position: "fixed", top: 0, left: 0, zIndex: 999999, cursor: "crosshair", display: "block" }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 16,
+          left: "50%",
+          transform: "translateX(-50%)",
+          zIndex: 1e6,
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          background: "rgba(15,15,15,0.88)",
+          borderRadius: 8,
+          padding: "6px 8px 6px 16px",
+          fontFamily: "system-ui, -apple-system, sans-serif"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("span", { style: { color: "#fff", fontSize: 13, fontWeight: 500, whiteSpace: "nowrap" }, children: [
+            "Click and drag to select \xA0\xB7\xA0 ",
+            /* @__PURE__ */ jsx("span", { style: { opacity: 0.6 }, children: "Esc to cancel" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onCapture({ startX: 0, startY: 0, endX: window.innerWidth, endY: window.innerHeight }),
+              style: {
+                background: "#4F46E5",
+                color: "#fff",
+                border: "none",
+                borderRadius: 6,
+                padding: "5px 12px",
+                cursor: "pointer",
+                fontSize: 12,
+                fontWeight: 600,
+                whiteSpace: "nowrap",
+                marginLeft: 4
+              },
+              children: "Full screen"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onCancel,
+              style: {
+                background: "rgba(255,255,255,0.1)",
+                color: "#fff",
+                border: "1px solid rgba(255,255,255,0.15)",
+                borderRadius: 6,
+                padding: "5px 12px",
+                cursor: "pointer",
+                fontSize: 12
+              },
+              children: "Cancel"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var COLORS = ["#EF4444", "#F97316", "#EAB308", "#22C55E", "#3B82F6", "#8B5CF6", "#000000", "#ffffff"];
+var SIZES = [2, 5, 10];
+var TOOL_ICONS = {
+  pen: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }) }),
+  rect: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }) }),
+  ellipse: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "12", rx: "10", ry: "6" }) }),
+  line: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "20", y2: "4" }) }),
+  arrow: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "19", x2: "19", y2: "5" }),
+    /* @__PURE__ */ jsx("polyline", { points: "9 5 19 5 19 15" })
+  ] })
+};
+function applyStrokeStyle(ctx, color, size) {
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.lineWidth = size;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+}
+function drawShape(ctx, tool, x1, y1, x2, y2) {
+  ctx.beginPath();
+  if (tool === "rect") {
+    ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+  } else if (tool === "ellipse") {
+    const cx = (x1 + x2) / 2;
+    const cy = (y1 + y2) / 2;
+    ctx.ellipse(cx, cy, Math.abs(x2 - x1) / 2, Math.abs(y2 - y1) / 2, 0, 0, Math.PI * 2);
+    ctx.stroke();
+  } else if (tool === "line") {
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+  } else if (tool === "arrow") {
+    const angle = Math.atan2(y2 - y1, x2 - x1);
+    const head = Math.max(12, ctx.lineWidth * 4);
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x2, y2);
+    ctx.lineTo(x2 - head * Math.cos(angle - Math.PI / 6), y2 - head * Math.sin(angle - Math.PI / 6));
+    ctx.lineTo(x2 - head * Math.cos(angle + Math.PI / 6), y2 - head * Math.sin(angle + Math.PI / 6));
+    ctx.closePath();
+    ctx.fill();
+  }
+}
+function AnnotationCanvas({ screenshotDataUrl, onDone, onBack }) {
+  const canvasRef = useRef(null);
+  const isDrawing = useRef(false);
+  const startPoint = useRef(null);
+  const lastPoint = useRef(null);
+  const baseSnapshot = useRef(null);
+  const [tool, setTool] = useState("pen");
+  const [color, setColor] = useState("#EF4444");
+  const [size, setSize] = useState(3);
+  const [naturalSize, setNaturalSize] = useState({ w: 0, h: 0 });
+  const toolRef = useRef(tool);
+  const colorRef = useRef(color);
+  const sizeRef = useRef(size);
+  useEffect(() => {
+    toolRef.current = tool;
+  }, [tool]);
+  useEffect(() => {
+    colorRef.current = color;
+  }, [color]);
+  useEffect(() => {
+    sizeRef.current = size;
+  }, [size]);
+  useEffect(() => {
+    const img = new Image();
+    img.onload = () => {
+      const maxW = window.innerWidth * 0.88;
+      const maxH = window.innerHeight * 0.72;
+      const ratio = img.width / img.height;
+      let dw = img.width, dh = img.height;
+      if (dw > maxW) {
+        dw = maxW;
+        dh = dw / ratio;
+      }
+      if (dh > maxH) {
+        dh = maxH;
+        dw = dh * ratio;
+      }
+      setNaturalSize({ w: img.width, h: img.height });
+      const canvas = canvasRef.current;
+      canvas.width = img.width;
+      canvas.height = img.height;
+      canvas.style.width = `${Math.round(dw)}px`;
+      canvas.style.height = `${Math.round(dh)}px`;
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(img, 0, 0);
+      baseSnapshot.current = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    };
+    img.src = screenshotDataUrl;
+  }, [screenshotDataUrl]);
+  function getPoint(e) {
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    return {
+      x: (e.clientX - rect.left) * (naturalSize.w / rect.width),
+      y: (e.clientY - rect.top) * (naturalSize.h / rect.height)
+    };
+  }
+  function onMouseDown(e) {
+    isDrawing.current = true;
+    const pt = getPoint(e);
+    startPoint.current = pt;
+    lastPoint.current = pt;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    baseSnapshot.current = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  }
+  function onMouseMove(e) {
+    if (!isDrawing.current || !startPoint.current) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const pt = getPoint(e);
+    applyStrokeStyle(ctx, colorRef.current, sizeRef.current);
+    if (toolRef.current === "pen") {
+      ctx.beginPath();
+      ctx.moveTo(lastPoint.current.x, lastPoint.current.y);
+      ctx.lineTo(pt.x, pt.y);
+      ctx.stroke();
+      lastPoint.current = pt;
+    } else {
+      ctx.putImageData(baseSnapshot.current, 0, 0);
+      applyStrokeStyle(ctx, colorRef.current, sizeRef.current);
+      drawShape(ctx, toolRef.current, startPoint.current.x, startPoint.current.y, pt.x, pt.y);
+    }
+  }
+  function onMouseUp(e) {
+    if (!isDrawing.current || !startPoint.current) return;
+    isDrawing.current = false;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const pt = getPoint(e);
+    if (toolRef.current !== "pen") {
+      ctx.putImageData(baseSnapshot.current, 0, 0);
+      applyStrokeStyle(ctx, colorRef.current, sizeRef.current);
+      drawShape(ctx, toolRef.current, startPoint.current.x, startPoint.current.y, pt.x, pt.y);
+    }
+    baseSnapshot.current = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    startPoint.current = null;
+    lastPoint.current = null;
+  }
+  function clearAnnotations() {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const img = new Image();
+    img.onload = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0);
+      baseSnapshot.current = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    };
+    img.src = screenshotDataUrl;
+  }
+  const toolBtn = (t) => ({
+    background: tool === t ? "#4F46E5" : "rgba(255,255,255,0.07)",
+    color: "#fff",
+    border: "none",
+    borderRadius: 6,
+    width: 30,
+    height: 30,
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  });
+  return /* @__PURE__ */ jsxs("div", { style: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 999999,
+    background: "rgba(0,0,0,0.82)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 16,
+    fontFamily: "system-ui, -apple-system, sans-serif"
+  }, children: [
+    /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: 10,
+      background: "#1a1a1a",
+      border: "1px solid rgba(255,255,255,0.1)",
+      padding: "8px 14px",
+      borderRadius: 10,
+      flexWrap: "wrap"
+    }, children: [
+      /* @__PURE__ */ jsx("span", { style: { color: "#999", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Tool" }),
+      Object.keys(TOOL_ICONS).map((t) => /* @__PURE__ */ jsx("button", { onClick: () => setTool(t), style: toolBtn(t), title: t, children: TOOL_ICONS[t] }, t)),
+      /* @__PURE__ */ jsx("div", { style: { width: 1, height: 20, background: "rgba(255,255,255,0.12)" } }),
+      /* @__PURE__ */ jsx("span", { style: { color: "#999", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Color" }),
+      COLORS.map((c) => /* @__PURE__ */ jsx("button", { onClick: () => setColor(c), style: {
+        width: 20,
+        height: 20,
+        borderRadius: "50%",
+        background: c,
+        border: "none",
+        cursor: "pointer",
+        padding: 0,
+        flexShrink: 0,
+        outline: color === c ? "2px solid #4F46E5" : "none",
+        outlineOffset: 2,
+        boxShadow: color === c ? "0 0 0 1px rgba(79,70,229,0.4)" : "none"
+      } }, c)),
+      /* @__PURE__ */ jsx("div", { style: { width: 1, height: 20, background: "rgba(255,255,255,0.12)" } }),
+      /* @__PURE__ */ jsx("span", { style: { color: "#999", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Size" }),
+      SIZES.map((s) => /* @__PURE__ */ jsx("button", { onClick: () => setSize(s), style: {
+        width: 28,
+        height: 28,
+        borderRadius: 6,
+        border: "none",
+        cursor: "pointer",
+        background: size === s ? "#4F46E5" : "rgba(255,255,255,0.07)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0
+      }, children: /* @__PURE__ */ jsx("div", { style: { width: s * 2.5, height: s * 2.5, borderRadius: "50%", background: "#fff" } }) }, s)),
+      /* @__PURE__ */ jsx("div", { style: { width: 1, height: 20, background: "rgba(255,255,255,0.12)" } }),
+      /* @__PURE__ */ jsx("button", { onClick: clearAnnotations, style: {
+        background: "rgba(255,255,255,0.07)",
+        color: "#ccc",
+        border: "none",
+        borderRadius: 6,
+        padding: "4px 10px",
+        cursor: "pointer",
+        fontSize: 12,
+        fontWeight: 500
+      }, children: "Clear" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        onMouseDown,
+        onMouseMove,
+        onMouseUp,
+        onMouseLeave: onMouseUp,
+        style: {
+          cursor: tool === "pen" ? "crosshair" : "crosshair",
+          borderRadius: 4,
+          boxShadow: "0 8px 32px rgba(0,0,0,0.6)",
+          display: "block",
+          maxWidth: "88vw",
+          maxHeight: "72vh"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10 }, children: [
+      /* @__PURE__ */ jsx("button", { onClick: onBack, style: {
+        background: "rgba(255,255,255,0.08)",
+        color: "#ccc",
+        border: "1px solid rgba(255,255,255,0.12)",
+        borderRadius: 8,
+        padding: "9px 20px",
+        cursor: "pointer",
+        fontSize: 14,
+        fontWeight: 500
+      }, children: "\u2190 Back" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => canvasRef.current && onDone(canvasRef.current), style: {
+        background: "#4F46E5",
+        color: "#fff",
+        border: "none",
+        borderRadius: 8,
+        padding: "9px 22px",
+        cursor: "pointer",
+        fontSize: 14,
+        fontWeight: 600
+      }, children: "Add comment \u2192" })
+    ] })
+  ] });
+}
+function FeedbackForm({
+  screenshotDataUrl,
+  isSubmitting,
+  error,
+  onSubmit,
+  onBack
+}) {
+  const [summary, setSummary] = useState("");
+  const [description, setDescription] = useState("");
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!summary.trim()) return;
+    onSubmit(summary.trim(), description.trim());
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 999999,
+        background: "rgba(0,0,0,0.7)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        padding: 16
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            background: "#fff",
+            borderRadius: 12,
+            width: "100%",
+            maxWidth: 480,
+            boxShadow: "0 24px 64px rgba(0,0,0,0.4)",
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  background: "#4F46E5",
+                  padding: "16px 20px",
+                  color: "#fff"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: 16, fontWeight: 700 }, children: "Send Feedback" }),
+                  /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", fontSize: 13, opacity: 0.8 }, children: "Describe what went wrong or what you'd like to report." })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: { padding: "12px 20px 0" }, children: [
+              /* @__PURE__ */ jsx("p", { style: { margin: "0 0 6px", fontSize: 12, fontWeight: 600, color: "#6B7280" }, children: "SCREENSHOT" }),
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: screenshotDataUrl,
+                  alt: "Captured screenshot",
+                  style: {
+                    width: "100%",
+                    borderRadius: 6,
+                    border: "1px solid #E5E7EB",
+                    display: "block",
+                    maxHeight: 140,
+                    objectFit: "cover",
+                    objectPosition: "top"
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: { padding: "16px 20px 20px" }, children: [
+              /* @__PURE__ */ jsxs("label", { style: { display: "block", marginBottom: 12 }, children: [
+                /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 600, color: "#374151", display: "block", marginBottom: 4 }, children: [
+                  "Summary ",
+                  /* @__PURE__ */ jsx("span", { style: { color: "#EF4444" }, children: "*" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: summary,
+                    onChange: (e) => setSummary(e.target.value),
+                    placeholder: "Short description of the issue",
+                    disabled: isSubmitting,
+                    maxLength: 120,
+                    required: true,
+                    style: {
+                      width: "100%",
+                      padding: "8px 12px",
+                      border: "1px solid #D1D5DB",
+                      borderRadius: 7,
+                      fontSize: 14,
+                      outline: "none",
+                      boxSizing: "border-box",
+                      transition: "border-color 0.15s",
+                      color: "#111827"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("label", { style: { display: "block", marginBottom: 16 }, children: [
+                /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "#374151", display: "block", marginBottom: 4 }, children: "Additional details" }),
+                /* @__PURE__ */ jsx(
+                  "textarea",
+                  {
+                    value: description,
+                    onChange: (e) => setDescription(e.target.value),
+                    placeholder: "Steps to reproduce, expected behavior, etc.",
+                    disabled: isSubmitting,
+                    rows: 4,
+                    style: {
+                      width: "100%",
+                      padding: "8px 12px",
+                      border: "1px solid #D1D5DB",
+                      borderRadius: 7,
+                      fontSize: 14,
+                      outline: "none",
+                      resize: "vertical",
+                      boxSizing: "border-box",
+                      fontFamily: "inherit",
+                      color: "#111827"
+                    }
+                  }
+                )
+              ] }),
+              error && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    background: "#FEF2F2",
+                    border: "1px solid #FECACA",
+                    color: "#DC2626",
+                    borderRadius: 7,
+                    padding: "8px 12px",
+                    fontSize: 13,
+                    marginBottom: 12
+                  },
+                  children: error
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onBack,
+                    disabled: isSubmitting,
+                    style: {
+                      background: "transparent",
+                      color: "#6B7280",
+                      border: "1px solid #D1D5DB",
+                      borderRadius: 7,
+                      padding: "8px 16px",
+                      cursor: "pointer",
+                      fontSize: 14,
+                      fontWeight: 500
+                    },
+                    children: "\u2190 Back"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "submit",
+                    disabled: isSubmitting || !summary.trim(),
+                    style: {
+                      background: isSubmitting || !summary.trim() ? "#A5B4FC" : "#4F46E5",
+                      color: "#fff",
+                      border: "none",
+                      borderRadius: 7,
+                      padding: "8px 20px",
+                      cursor: isSubmitting || !summary.trim() ? "not-allowed" : "pointer",
+                      fontSize: 14,
+                      fontWeight: 600,
+                      minWidth: 110,
+                      transition: "background 0.15s"
+                    },
+                    children: isSubmitting ? "Sending\u2026" : "Send to Jira"
+                  }
+                )
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function makeAuthHeader(email, token) {
+  return "Basic " + btoa(`${email}:${token}`);
+}
+function makeAdfDescription(description, pageUrl, pageTitle) {
+  return {
+    type: "doc",
+    version: 1,
+    content: [
+      {
+        type: "paragraph",
+        content: [{ type: "text", text: description }]
+      },
+      {
+        type: "paragraph",
+        content: [
+          { type: "text", text: "Page: ", marks: [{ type: "strong" }] },
+          {
+            type: "text",
+            text: pageTitle || pageUrl,
+            marks: [
+              {
+                type: "link",
+                attrs: { href: pageUrl }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+}
+async function createJiraIssue(params) {
+  const {
+    host,
+    projectKey,
+    token,
+    userEmail,
+    issueType,
+    labels,
+    summary,
+    description,
+    screenshotBlob,
+    pageUrl,
+    pageTitle
+  } = params;
+  const baseUrl = `https://${host}`;
+  const auth = makeAuthHeader(userEmail, token);
+  const issueBody = {
+    fields: __spreadValues({
+      project: { key: projectKey },
+      summary: `[Feedback] ${summary}`,
+      description: makeAdfDescription(description, pageUrl, pageTitle),
+      issuetype: { name: issueType }
+    }, labels.length > 0 && { labels })
+  };
+  const createRes = await fetch(`${baseUrl}/rest/api/3/issue`, {
+    method: "POST",
+    headers: {
+      Authorization: auth,
+      "Content-Type": "application/json",
+      Accept: "application/json"
+    },
+    body: JSON.stringify(issueBody)
+  });
+  if (!createRes.ok) {
+    const err = await createRes.text();
+    throw new Error(`Jira issue creation failed (${createRes.status}): ${err}`);
+  }
+  const { key: issueKey } = await createRes.json();
+  const formData = new FormData();
+  formData.append("file", screenshotBlob, "feedback-screenshot.png");
+  const attachRes = await fetch(`${baseUrl}/rest/api/3/issue/${issueKey}/attachments`, {
+    method: "POST",
+    headers: {
+      Authorization: auth,
+      "X-Atlassian-Token": "no-check"
+    },
+    body: formData
+  });
+  if (!attachRes.ok) {
+    console.warn(`[FeedbackWidget] Screenshot attachment failed (${attachRes.status})`);
+  }
+  return {
+    issueKey,
+    issueUrl: `${baseUrl}/browse/${issueKey}`
+  };
+}
+function useJira() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  async function submit(params) {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await createJiraIssue(params);
+      return result;
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
+      throw e;
+    } finally {
+      setIsLoading(false);
+    }
+  }
+  return { submit, isLoading, error };
+}
+function FeedbackWidget({
+  jiraHost,
+  jiraProjectKey,
+  jiraToken,
+  jiraUserEmail,
+  jiraIssueType = "Bug",
+  jiraLabels = [],
+  onSubmit: onSubmitProp,
+  apiRoute,
+  position = "bottom-right",
+  buttonLabel = "Feedback",
+  onSuccess,
+  onError
+}) {
+  const [step, setStep] = useState("idle");
+  const [fullPageCanvas, setFullPageCanvas] = useState(null);
+  const [screenshotDataUrl, setScreenshotDataUrl] = useState("");
+  const [annotatedCanvas, setAnnotatedCanvas] = useState(null);
+  const [submitError, setSubmitError] = useState(null);
+  const [portalRoot, setPortalRoot] = useState(null);
+  const { submit: submitToJira } = useJira();
+  useEffect(() => {
+    const hasJiraConfig = jiraHost && jiraProjectKey && jiraToken && jiraUserEmail;
+    if (!hasJiraConfig && !onSubmitProp && !apiRoute) {
+      console.error("[FeedbackWidget] Provide apiRoute, onSubmit, or (jiraHost + jiraProjectKey + jiraToken + jiraUserEmail).");
+    }
+  }, [jiraHost, jiraProjectKey, jiraToken, jiraUserEmail, onSubmitProp, apiRoute]);
+  useEffect(() => {
+    const el = document.createElement("div");
+    el.setAttribute("data-feedback-widget", "");
+    document.body.appendChild(el);
+    setPortalRoot(el);
+    return () => {
+      document.body.removeChild(el);
+    };
+  }, []);
+  const handleButtonClick = useCallback(async () => {
+    setStep("capturing");
+    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    try {
+      const stream = await navigator.mediaDevices.getDisplayMedia({
+        preferCurrentTab: true,
+        video: true,
+        audio: false
+      });
+      const video = document.createElement("video");
+      video.srcObject = stream;
+      video.muted = true;
+      await new Promise((resolve) => {
+        video.onloadedmetadata = () => resolve();
+      });
+      await video.play();
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      const canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      canvas.getContext("2d").drawImage(video, 0, 0);
+      stream.getTracks().forEach((t) => t.stop());
+      setFullPageCanvas(canvas);
+      setStep("selecting");
+    } catch (e) {
+      setStep("idle");
+    }
+  }, []);
+  const handleCapture = useCallback((rect) => {
+    if (!fullPageCanvas) return;
+    const scaleX = fullPageCanvas.width / window.innerWidth;
+    const scaleY = fullPageCanvas.height / window.innerHeight;
+    const cropX = Math.round(rect.startX * scaleX);
+    const cropY = Math.round(rect.startY * scaleY);
+    const cropW = Math.round((rect.endX - rect.startX) * scaleX);
+    const cropH = Math.round((rect.endY - rect.startY) * scaleY);
+    const cropped = document.createElement("canvas");
+    cropped.width = cropW;
+    cropped.height = cropH;
+    cropped.getContext("2d").drawImage(fullPageCanvas, cropX, cropY, cropW, cropH, 0, 0, cropW, cropH);
+    setScreenshotDataUrl(cropped.toDataURL("image/png"));
+    setStep("annotating");
+  }, [fullPageCanvas]);
+  const handleAnnotationDone = useCallback((canvas) => {
+    setAnnotatedCanvas(canvas);
+    setScreenshotDataUrl(canvas.toDataURL("image/png"));
+    setStep("form");
+  }, []);
+  const handleFormSubmit = useCallback(
+    async (summary, description) => {
+      var _a;
+      setSubmitError(null);
+      setStep("submitting");
+      const screenshotBlob = await new Promise((resolve, reject) => {
+        annotatedCanvas.toBlob((b) => b ? resolve(b) : reject(new Error("toBlob failed")), "image/png");
+      });
+      const payload = {
+        screenshot: screenshotBlob,
+        summary,
+        description,
+        pageUrl: window.location.href,
+        pageTitle: document.title
+      };
+      try {
+        let result = {};
+        if (onSubmitProp) {
+          result = (_a = await onSubmitProp(payload)) != null ? _a : {};
+        } else if (apiRoute) {
+          const fd = new FormData();
+          fd.append("screenshot", screenshotBlob);
+          fd.append("summary", summary);
+          fd.append("description", description);
+          fd.append("pageUrl", payload.pageUrl);
+          fd.append("pageTitle", payload.pageTitle);
+          const res = await fetch(apiRoute, { method: "POST", body: fd });
+          if (!res.ok) throw new Error(await res.text());
+          result = await res.json();
+        } else {
+          result = await submitToJira({
+            host: jiraHost,
+            projectKey: jiraProjectKey,
+            token: jiraToken,
+            userEmail: jiraUserEmail,
+            issueType: jiraIssueType,
+            labels: jiraLabels,
+            summary,
+            description,
+            screenshotBlob,
+            pageUrl: payload.pageUrl,
+            pageTitle: payload.pageTitle
+          });
+        }
+        setStep("success");
+        onSuccess == null ? void 0 : onSuccess(result);
+        setTimeout(() => {
+          setStep("idle");
+          setFullPageCanvas(null);
+          setScreenshotDataUrl("");
+          setAnnotatedCanvas(null);
+        }, 3e3);
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error(String(err));
+        setSubmitError(e.message);
+        setStep("form");
+        onError == null ? void 0 : onError(e);
+      }
+    },
+    [
+      annotatedCanvas,
+      onSubmitProp,
+      submitToJira,
+      jiraHost,
+      jiraProjectKey,
+      jiraToken,
+      jiraUserEmail,
+      jiraIssueType,
+      jiraLabels,
+      onSuccess,
+      onError
+    ]
+  );
+  const reset = useCallback(() => {
+    setStep("idle");
+    setFullPageCanvas(null);
+    setScreenshotDataUrl("");
+    setAnnotatedCanvas(null);
+    setSubmitError(null);
+  }, []);
+  if (!portalRoot) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      step === "idle" && /* @__PURE__ */ jsx(
+        FeedbackButton,
+        {
+          position,
+          label: buttonLabel,
+          onClick: handleButtonClick
+        }
+      ),
+      step === "selecting" && fullPageCanvas && /* @__PURE__ */ jsx(
+        CaptureOverlay,
+        {
+          fullPageCanvas,
+          onCapture: handleCapture,
+          onCancel: reset
+        }
+      ),
+      step === "annotating" && screenshotDataUrl && /* @__PURE__ */ jsx(
+        AnnotationCanvas,
+        {
+          screenshotDataUrl,
+          onDone: handleAnnotationDone,
+          onBack: () => setStep("selecting")
+        }
+      ),
+      (step === "form" || step === "submitting") && screenshotDataUrl && /* @__PURE__ */ jsx(
+        FeedbackForm,
+        {
+          screenshotDataUrl,
+          isSubmitting: step === "submitting",
+          error: submitError,
+          onSubmit: handleFormSubmit,
+          onBack: () => setStep("annotating")
+        }
+      ),
+      step === "success" && /* @__PURE__ */ jsx(SuccessToast, { position })
+    ] }),
+    portalRoot
+  );
+}
+function SuccessToast({ position }) {
+  const posStyle = position === "bottom-right" || position === "bottom-left" ? { bottom: 24 } : { top: 24 };
+  const sideStyle = position === "bottom-right" || position === "top-right" ? { right: 24 } : { left: 24 };
+  return /* @__PURE__ */ jsxs("div", { style: __spreadValues(__spreadValues({
+    position: "fixed",
+    zIndex: 999999,
+    background: "#059669",
+    color: "#fff",
+    padding: "12px 20px",
+    borderRadius: 10,
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    fontSize: 14,
+    fontWeight: 600,
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    boxShadow: "0 4px 16px rgba(5,150,105,0.4)"
+  }, posStyle), sideStyle), children: [
+    /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }),
+    "Feedback sent to Jira!"
+  ] });
+}
+
+export { FeedbackWidget };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map