glitchgrab 1.26.0 → 1.27.0

package/dist/index.js

@@ -54,7 +54,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/provider.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/error-boundary.tsx
 var React = __toESM(require("react"));
@@ -499,9 +499,290 @@ var GlitchgrabErrorBoundary = class extends React.Component {
 };
 
 // src/report-dialog.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_react_dom = require("react-dom");
+
+// src/annotation-canvas.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var PALETTE = ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#a855f7", "#ffffff"];
+function drawStroke(ctx, s) {
+  ctx.strokeStyle = s.color;
+  ctx.lineWidth = s.width;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  if (s.type === "freehand") {
+    if (s.points.length < 2) return;
+    ctx.beginPath();
+    ctx.moveTo(s.points[0].x, s.points[0].y);
+    for (let i = 1; i < s.points.length; i++) ctx.lineTo(s.points[i].x, s.points[i].y);
+    ctx.stroke();
+  } else {
+    ctx.beginPath();
+    ctx.arc(s.cx, s.cy, s.r, 0, Math.PI * 2);
+    ctx.stroke();
+  }
+}
+function AnnotationCanvas({ imageSrc, onSave, onCancel }) {
+  const canvasRef = (0, import_react.useRef)(null);
+  const imgRef = (0, import_react.useRef)(null);
+  const [ready, setReady] = (0, import_react.useState)(false);
+  const [tool, setTool] = (0, import_react.useState)("pen");
+  const [color, setColor] = (0, import_react.useState)(PALETTE[0]);
+  const [strokeWidth, setStrokeWidth] = (0, import_react.useState)(4);
+  const [strokes, setStrokes] = (0, import_react.useState)([]);
+  const [currentStroke, setCurrentStroke] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    const img = new Image();
+    img.onload = () => {
+      imgRef.current = img;
+      const canvas = canvasRef.current;
+      if (canvas) {
+        canvas.width = img.naturalWidth;
+        canvas.height = img.naturalHeight;
+      }
+      setReady(true);
+    };
+    img.src = imageSrc;
+  }, [imageSrc]);
+  (0, import_react.useEffect)(() => {
+    if (!ready) return;
+    const canvas = canvasRef.current;
+    const img = imgRef.current;
+    if (!canvas || !img) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    for (const s of strokes) drawStroke(ctx, s);
+    if (currentStroke) drawStroke(ctx, currentStroke);
+  }, [ready, strokes, currentStroke]);
+  const getPos = (e) => {
+    const canvas = e.currentTarget;
+    const rect = canvas.getBoundingClientRect();
+    return {
+      x: (e.clientX - rect.left) * canvas.width / rect.width,
+      y: (e.clientY - rect.top) * canvas.height / rect.height
+    };
+  };
+  const handlePointerDown = (e) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    const { x, y } = getPos(e);
+    setCurrentStroke(
+      tool === "pen" ? { type: "freehand", color, width: strokeWidth, points: [{ x, y }] } : { type: "circle", color, width: strokeWidth, cx: x, cy: y, r: 0 }
+    );
+  };
+  const handlePointerMove = (e) => {
+    if (!currentStroke) return;
+    const { x, y } = getPos(e);
+    setCurrentStroke((prev) => {
+      if (!prev) return prev;
+      if (prev.type === "freehand") return { ...prev, points: [...prev.points, { x, y }] };
+      return { ...prev, r: Math.hypot(x - prev.cx, y - prev.cy) };
+    });
+  };
+  const handlePointerUp = () => {
+    setCurrentStroke((prev) => {
+      if (prev) setStrokes((s) => [...s, prev]);
+      return null;
+    });
+  };
+  const handleSave = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    onSave(canvas.toDataURL("image/jpeg", 0.85));
+  };
+  const iconBtn = (active = false) => ({
+    width: "30px",
+    height: "30px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "6px",
+    border: `1.5px solid ${active ? "#22d3ee" : "rgba(255,255,255,0.15)"}`,
+    background: active ? "rgba(34,211,238,0.15)" : "transparent",
+    color: "#fff",
+    cursor: "pointer",
+    padding: 0
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 2147483647,
+        backgroundColor: "rgba(0,0,0,0.9)",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "16px"
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        if (e.target === e.currentTarget) onCancel();
+      },
+      onPointerDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "canvas",
+          {
+            ref: canvasRef,
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            style: {
+              maxWidth: "100%",
+              maxHeight: "calc(100vh - 140px)",
+              borderRadius: "8px",
+              touchAction: "none",
+              cursor: "crosshair",
+              display: "block"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            style: {
+              marginTop: "14px",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              flexWrap: "wrap",
+              justifyContent: "center",
+              maxWidth: "100%"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => setTool("pen"), style: iconBtn(tool === "pen"), title: "Freehand", "aria-label": "Freehand tool", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => setTool("circle"), style: iconBtn(tool === "circle"), title: "Circle", "aria-label": "Circle tool", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "8", stroke: "currentColor", strokeWidth: "1.8" }) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "1px", height: "20px", background: "rgba(255,255,255,0.15)" } }),
+              PALETTE.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setColor(c),
+                  "aria-label": `Color ${c}`,
+                  style: {
+                    width: "22px",
+                    height: "22px",
+                    borderRadius: "50%",
+                    background: c,
+                    border: color === c ? "2px solid #22d3ee" : "2px solid rgba(255,255,255,0.3)",
+                    cursor: "pointer",
+                    padding: 0
+                  }
+                },
+                c
+              )),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  type: "color",
+                  value: color,
+                  onChange: (e) => setColor(e.target.value),
+                  title: "Custom color",
+                  "aria-label": "Custom color",
+                  style: {
+                    width: "22px",
+                    height: "22px",
+                    padding: 0,
+                    border: "none",
+                    background: "none",
+                    cursor: "pointer"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "1px", height: "20px", background: "rgba(255,255,255,0.15)" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "input",
+                {
+                  type: "range",
+                  min: 2,
+                  max: 12,
+                  value: strokeWidth,
+                  onChange: (e) => setStrokeWidth(Number(e.target.value)),
+                  title: "Stroke width",
+                  "aria-label": "Stroke width",
+                  style: { width: "70px" }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "1px", height: "20px", background: "rgba(255,255,255,0.15)" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setStrokes((s) => s.slice(0, -1)),
+                  disabled: strokes.length === 0,
+                  style: { ...iconBtn(), opacity: strokes.length === 0 ? 0.35 : 1 },
+                  title: "Undo",
+                  "aria-label": "Undo",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 14L4 9l5-5M4 9h10a6 6 0 010 12h-2", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setStrokes([]),
+                  disabled: strokes.length === 0,
+                  style: { ...iconBtn(), opacity: strokes.length === 0 ? 0.35 : 1 },
+                  title: "Clear all",
+                  "aria-label": "Clear all",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 6h18M8 6V4a1 1 0 011-1h6a1 1 0 011 1v2m2 0v14a1 1 0 01-1 1H7a1 1 0 01-1-1V6h12z", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: "12px", display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onCancel,
+              style: {
+                padding: "8px 16px",
+                borderRadius: "8px",
+                border: "1.5px solid rgba(255,255,255,0.2)",
+                background: "transparent",
+                color: "#fff",
+                fontSize: "13px",
+                fontWeight: 600,
+                cursor: "pointer",
+                fontFamily: "inherit"
+              },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleSave,
+              style: {
+                padding: "8px 16px",
+                borderRadius: "8px",
+                border: "none",
+                background: "#22d3ee",
+                color: "#09090b",
+                fontSize: "13px",
+                fontWeight: 600,
+                cursor: "pointer",
+                fontFamily: "inherit"
+              },
+              children: "Save annotation"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/report-dialog.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function useIsDark() {
   if (typeof window === "undefined") return true;
   try {
@@ -690,39 +971,40 @@ function ReportDialog({
   types,
   showSeverity = true
 }) {
-  const [isEnhancing, setIsEnhancing] = (0, import_react.useState)(false);
-  const [isEnhanced, setIsEnhanced] = (0, import_react.useState)(false);
-  const [originalDescription, setOriginalDescription] = (0, import_react.useState)(
+  const [isEnhancing, setIsEnhancing] = (0, import_react2.useState)(false);
+  const [isEnhanced, setIsEnhanced] = (0, import_react2.useState)(false);
+  const [originalDescription, setOriginalDescription] = (0, import_react2.useState)(
     null
   );
-  const [isListening, setIsListening] = (0, import_react.useState)(false);
-  const [isTranscribing, setIsTranscribing] = (0, import_react.useState)(false);
-  const [voiceError, setVoiceError] = (0, import_react.useState)(null);
-  const [screenshotDragOver, setScreenshotDragOver] = (0, import_react.useState)(false);
-  const [mounted, setMounted] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
+  const [isListening, setIsListening] = (0, import_react2.useState)(false);
+  const [isTranscribing, setIsTranscribing] = (0, import_react2.useState)(false);
+  const [voiceError, setVoiceError] = (0, import_react2.useState)(null);
+  const [screenshotDragOver, setScreenshotDragOver] = (0, import_react2.useState)(false);
+  const [mounted, setMounted] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
     setMounted(true);
   }, []);
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-  const [description, setDescription] = (0, import_react.useState)("");
-  const [isSubmitting, setIsSubmitting] = (0, import_react.useState)(false);
-  const [submitted, setSubmitted] = (0, import_react.useState)(false);
-  const [screenshots, setScreenshots] = (0, import_react.useState)([]);
-  const [previewIndex, setPreviewIndex] = (0, import_react.useState)(null);
-  const fileInputRef = (0, import_react.useRef)(null);
-  const modalRef = (0, import_react.useRef)(null);
-  const previewImgRef = (0, import_react.useRef)(null);
-  const textareaRef = (0, import_react.useRef)(null);
-  const recognitionRef = (0, import_react.useRef)(null);
-  const voiceBaseRef = (0, import_react.useRef)("");
-  const usingWebSpeechRef = (0, import_react.useRef)(false);
-  const textBeforeVoiceRef = (0, import_react.useRef)("");
-  const mediaRecorderRef = (0, import_react.useRef)(null);
-  const streamRef = (0, import_react.useRef)(null);
-  const sarvamChunksRef = (0, import_react.useRef)([]);
-  const spaceTimerRef = (0, import_react.useRef)(null);
-  const isPushToTalkRef = (0, import_react.useRef)(false);
-  (0, import_react.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const [description, setDescription] = (0, import_react2.useState)("");
+  const [isSubmitting, setIsSubmitting] = (0, import_react2.useState)(false);
+  const [submitted, setSubmitted] = (0, import_react2.useState)(false);
+  const [screenshots, setScreenshots] = (0, import_react2.useState)([]);
+  const [previewIndex, setPreviewIndex] = (0, import_react2.useState)(null);
+  const [annotatingIndex, setAnnotatingIndex] = (0, import_react2.useState)(null);
+  const fileInputRef = (0, import_react2.useRef)(null);
+  const modalRef = (0, import_react2.useRef)(null);
+  const previewImgRef = (0, import_react2.useRef)(null);
+  const textareaRef = (0, import_react2.useRef)(null);
+  const recognitionRef = (0, import_react2.useRef)(null);
+  const voiceBaseRef = (0, import_react2.useRef)("");
+  const usingWebSpeechRef = (0, import_react2.useRef)(false);
+  const textBeforeVoiceRef = (0, import_react2.useRef)("");
+  const mediaRecorderRef = (0, import_react2.useRef)(null);
+  const streamRef = (0, import_react2.useRef)(null);
+  const sarvamChunksRef = (0, import_react2.useRef)([]);
+  const spaceTimerRef = (0, import_react2.useRef)(null);
+  const isPushToTalkRef = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
     if (!isOpen) return;
     const dialogs = Array.from(
       document.querySelectorAll(
@@ -732,14 +1014,17 @@ function ReportDialog({
     dialogs.forEach((d) => d.setAttribute("inert", ""));
     return () => dialogs.forEach((d) => d.removeAttribute("inert"));
   }, [isOpen]);
-  const [step, setStep] = (0, import_react.useState)(1);
-  const [reportType, setReportType] = (0, import_react.useState)("BUG");
-  const [severity, setSeverity] = (0, import_react.useState)("medium");
-  const [validationError, setValidationError] = (0, import_react.useState)(null);
-  const [placeholderIdx, setPlaceholderIdx] = (0, import_react.useState)(0);
+  const [step, setStep] = (0, import_react2.useState)(1);
+  const [reportType, setReportType] = (0, import_react2.useState)("BUG");
+  const [severity, setSeverity] = (0, import_react2.useState)("medium");
+  const [validationError, setValidationError] = (0, import_react2.useState)(null);
+  const [placeholderIdx, setPlaceholderIdx] = (0, import_react2.useState)(0);
   const availableTypes = types != null ? types : [
     "BUG",
     "FEATURE_REQUEST",
+    "UI_IMPROVEMENT",
+    "PERFORMANCE",
+    "SECURITY",
     "QUESTION",
     "OTHER"
   ];
@@ -768,7 +1053,13 @@ function ReportDialog({
         scale: 0.5,
         logging: false,
         useCORS: true,
-        allowTaint: true
+        allowTaint: true,
+        x: window.scrollX,
+        y: window.scrollY,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight
       });
       setScreenshots([canvas.toDataURL("image/jpeg", 0.6)]);
     } catch (e) {
@@ -787,14 +1078,20 @@ function ReportDialog({
         scale: 0.5,
         logging: false,
         useCORS: true,
-        allowTaint: true
+        allowTaint: true,
+        x: window.scrollX,
+        y: window.scrollY,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight
       });
       setScreenshots([canvas.toDataURL("image/jpeg", 0.6)]);
     } catch (e) {
     }
     setIsOpen(true);
   };
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const handler = (e) => {
       if (isOpen) return;
       const detail = e.detail;
@@ -808,7 +1105,7 @@ function ReportDialog({
     window.addEventListener("glitchgrab:open-report", handler);
     return () => window.removeEventListener("glitchgrab:open-report", handler);
   }, [isOpen, handleOpen]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!isOpen) return;
     const handleEsc = (e) => {
       if (e.key === "Escape") {
@@ -819,8 +1116,8 @@ function ReportDialog({
     document.addEventListener("keydown", handleEsc);
     return () => document.removeEventListener("keydown", handleEsc);
   }, [isOpen, previewIndex]);
-  (0, import_react.useEffect)(() => {
-    if (previewIndex === null) return;
+  (0, import_react2.useEffect)(() => {
+    if (previewIndex === null || annotatingIndex !== null) return;
     const handlePointerDown = (e) => {
       var _a;
       if (!((_a = previewImgRef.current) == null ? void 0 : _a.contains(e.target))) {
@@ -829,8 +1126,8 @@ function ReportDialog({
     };
     document.addEventListener("pointerdown", handlePointerDown, true);
     return () => document.removeEventListener("pointerdown", handlePointerDown, true);
-  }, [previewIndex]);
-  (0, import_react.useEffect)(() => {
+  }, [previewIndex, annotatingIndex]);
+  (0, import_react2.useEffect)(() => {
     if (!isOpen) return;
     const handlePaste = (e) => {
       var _a;
@@ -855,7 +1152,7 @@ function ReportDialog({
     window.addEventListener("paste", handlePaste);
     return () => window.removeEventListener("paste", handlePaste);
   }, [isOpen]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!isOpen || !transcribeAudio2) return;
     const id = setInterval(() => {
       setPlaceholderIdx((i) => (i + 1) % 2);
@@ -1072,9 +1369,9 @@ function ReportDialog({
     }
   };
   if (!mounted) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     isOpen && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
           @keyframes gg-pulse{0%,100%{opacity:1}50%{opacity:0.35}}
           @keyframes gg-b1{0%,100%{height:3px}40%{height:13px}}
           @keyframes gg-b2{0%,100%{height:8px}50%{height:3px}}
@@ -1084,7 +1381,7 @@ function ReportDialog({
       document.body
     ),
     isOpen && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "div",
         {
           style: {
@@ -1103,7 +1400,7 @@ function ReportDialog({
           },
           onPointerDown: (e) => e.stopPropagation(),
           onFocus: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
             "div",
             {
               ref: modalRef,
@@ -1122,7 +1419,7 @@ function ReportDialog({
                 isolation: "isolate"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                   "div",
                   {
                     style: {
@@ -1130,7 +1427,7 @@ function ReportDialog({
                       borderBottom: `1px solid ${t.border}`
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                         "div",
                         {
                           style: {
@@ -1139,7 +1436,7 @@ function ReportDialog({
                             alignItems: "center"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                               "div",
                               {
                                 style: {
@@ -1148,7 +1445,7 @@ function ReportDialog({
                                   gap: "8px"
                                 },
                                 children: [
-                                  step > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  step > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                     "button",
                                     {
                                       type: "button",
@@ -1162,14 +1459,14 @@ function ReportDialog({
                                         alignItems: "center"
                                       },
                                       "aria-label": "Back",
-                                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                         "svg",
                                         {
                                           width: "16",
                                           height: "16",
                                           viewBox: "0 0 16 16",
                                           fill: "none",
-                                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                             "path",
                                             {
                                               d: "M10 3L5 8L10 13",
@@ -1183,7 +1480,7 @@ function ReportDialog({
                                       )
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                     "span",
                                     {
                                       style: {
@@ -1197,7 +1494,7 @@ function ReportDialog({
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -1212,7 +1509,7 @@ function ReportDialog({
                                   justifyContent: "center"
                                 },
                                 "aria-label": "Close",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "svg",
                                   {
                                     width: "16",
@@ -1220,7 +1517,7 @@ function ReportDialog({
                                     viewBox: "0 0 16 16",
                                     fill: "none",
                                     style: { display: "block" },
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                       "path",
                                       {
                                         d: "M4 4L12 12M12 4L4 12",
@@ -1236,7 +1533,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "div",
                         {
                           style: {
@@ -1246,12 +1543,12 @@ function ReportDialog({
                             gap: "0",
                             marginTop: "12px"
                           },
-                          children: [1, 2].map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          children: [1, 2].map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                             "div",
                             {
                               style: { display: "flex", alignItems: "center" },
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "div",
                                   {
                                     style: {
@@ -1263,7 +1560,7 @@ function ReportDialog({
                                     }
                                   }
                                 ),
-                                i < 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                i < 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "div",
                                   {
                                     style: {
@@ -1283,7 +1580,7 @@ function ReportDialog({
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                   "div",
                   {
                     style: {
@@ -1298,8 +1595,8 @@ function ReportDialog({
                       " sent. Thank you!"
                     ]
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                  step === 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                  step === 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "div",
                     {
                       style: {
@@ -1307,7 +1604,7 @@ function ReportDialog({
                         gridTemplateColumns: "1fr 1fr",
                         gap: "8px"
                       },
-                      children: availableTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      children: availableTypes.map((type) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                         "button",
                         {
                           type: "button",
@@ -1337,8 +1634,8 @@ function ReportDialog({
                           },
                           children: [
                             getTypeIcon(type, t.accent),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "13px", fontWeight: 600 }, children: getTypeLabel(type) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "13px", fontWeight: 600 }, children: getTypeLabel(type) }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               "span",
                               {
                                 style: {
@@ -1355,9 +1652,9 @@ function ReportDialog({
                       ))
                     }
                   ),
-                  step === 2 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  step === 2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { position: "relative" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "textarea",
                         {
                           ref: textareaRef,
@@ -1398,7 +1695,7 @@ function ReportDialog({
                           autoFocus: true
                         }
                       ),
-                      (isListening || isTranscribing) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      (isListening || isTranscribing) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                         "span",
                         {
                           style: {
@@ -1416,7 +1713,7 @@ function ReportDialog({
                             zIndex: 1
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               "span",
                               {
                                 style: {
@@ -1431,7 +1728,7 @@ function ReportDialog({
                               }
                             ),
                             isTranscribing ? "Transcribing\u2026" : "REC",
-                            isListening && !isTranscribing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            isListening && !isTranscribing && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               "span",
                               {
                                 style: {
@@ -1458,7 +1755,7 @@ function ReportDialog({
                                     dur: "0.55s",
                                     delay: "0.15s"
                                   }
-                                ].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                ].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "span",
                                   {
                                     style: {
@@ -1478,7 +1775,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      enhanceText2 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      enhanceText2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                         "button",
                         {
                           type: "button",
@@ -1523,7 +1820,7 @@ function ReportDialog({
                           },
                           title: "Polish grammar \u2014 preserves your meaning",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               "svg",
                               {
                                 width: "11",
@@ -1531,7 +1828,7 @@ function ReportDialog({
                                 viewBox: "0 0 24 24",
                                 fill: "none",
                                 "aria-hidden": "true",
-                                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "path",
                                   {
                                     d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zM19 15l.75 2.25L22 18l-2.25.75L19 21l-.75-2.25L16 18l2.25-.75L19 15z",
@@ -1546,7 +1843,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      transcribeAudio2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      transcribeAudio2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "button",
                         {
                           type: "button",
@@ -1572,7 +1869,7 @@ function ReportDialog({
                             padding: 0,
                             transition: "border-color 0.2s ease, color 0.2s ease"
                           },
-                          children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "svg",
                             {
                               width: "12",
@@ -1580,7 +1877,7 @@ function ReportDialog({
                               viewBox: "0 0 24 24",
                               fill: "currentColor",
                               "aria-hidden": "true",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                 "rect",
                                 {
                                   x: "6",
@@ -1591,7 +1888,7 @@ function ReportDialog({
                                 }
                               )
                             }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                             "svg",
                             {
                               width: "13",
@@ -1600,7 +1897,7 @@ function ReportDialog({
                               fill: "none",
                               "aria-hidden": "true",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "rect",
                                   {
                                     x: "9",
@@ -1612,7 +1909,7 @@ function ReportDialog({
                                     strokeWidth: "1.8"
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "path",
                                   {
                                     d: "M5 10a7 7 0 0014 0M12 19v3M9 22h6",
@@ -1627,7 +1924,7 @@ function ReportDialog({
                         }
                       )
                     ] }),
-                    transcribeAudio2 && !isListening && !isTranscribing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    transcribeAudio2 && !isListening && !isTranscribing && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                       "div",
                       {
                         style: {
@@ -1641,16 +1938,16 @@ function ReportDialog({
                           userSelect: "none"
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
                           ] }),
                           "Hold Space to speak \u2014 we'll transcribe it"
                         ]
                       }
                     ),
-                    isEnhanced && originalDescription !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    isEnhanced && originalDescription !== null && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                       "div",
                       {
                         style: {
@@ -1664,7 +1961,7 @@ function ReportDialog({
                           border: `1px solid ${t.accent}40`
                         },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "svg",
                             {
                               width: "12",
@@ -1672,7 +1969,7 @@ function ReportDialog({
                               viewBox: "0 0 24 24",
                               fill: "none",
                               style: { flexShrink: 0 },
-                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                 "path",
                                 {
                                   d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z",
@@ -1683,7 +1980,7 @@ function ReportDialog({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "span",
                             {
                               style: {
@@ -1694,7 +1991,7 @@ function ReportDialog({
                               children: "AI enhanced"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "button",
                             {
                               type: "button",
@@ -1716,7 +2013,7 @@ function ReportDialog({
                               children: "Keep"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "button",
                             {
                               type: "button",
@@ -1742,7 +2039,7 @@ function ReportDialog({
                         ]
                       }
                     ),
-                    voiceError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    voiceError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       "p",
                       {
                         style: {
@@ -1754,8 +2051,8 @@ function ReportDialog({
                         children: voiceError
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: "10px" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "10px" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                         "span",
                         {
                           style: {
@@ -1771,7 +2068,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      screenshots.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      screenshots.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "div",
                         {
                           style: {
@@ -1780,7 +2077,7 @@ function ReportDialog({
                             gap: "8px",
                             marginBottom: "8px"
                           },
-                          children: screenshots.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          children: screenshots.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                             "div",
                             {
                               style: {
@@ -1789,7 +2086,7 @@ function ReportDialog({
                                 height: "56px"
                               },
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "img",
                                   {
                                     src,
@@ -1807,7 +2104,7 @@ function ReportDialog({
                                     }
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "button",
                                   {
                                     type: "button",
@@ -1833,14 +2130,14 @@ function ReportDialog({
                                       alignItems: "center",
                                       justifyContent: "center"
                                     },
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                       "svg",
                                       {
                                         width: "8",
                                         height: "8",
                                         viewBox: "0 0 10 10",
                                         fill: "none",
-                                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                           "path",
                                           {
                                             d: "M1 1L9 9M9 1L1 9",
@@ -1852,6 +2149,52 @@ function ReportDialog({
                                       }
                                     )
                                   }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    onClick: () => setAnnotatingIndex(i),
+                                    "aria-label": `Annotate screenshot ${i + 1}`,
+                                    title: "Annotate",
+                                    style: {
+                                      position: "absolute",
+                                      top: "50%",
+                                      left: "50%",
+                                      transform: "translate(-50%, -50%)",
+                                      width: "24px",
+                                      height: "24px",
+                                      borderRadius: "50%",
+                                      border: "none",
+                                      background: t.accent,
+                                      color: t.accentText,
+                                      padding: 0,
+                                      cursor: "pointer",
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      boxShadow: "0 2px 8px rgba(0,0,0,0.45)"
+                                    },
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                      "svg",
+                                      {
+                                        width: "12",
+                                        height: "12",
+                                        viewBox: "0 0 24 24",
+                                        fill: "none",
+                                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                          "path",
+                                          {
+                                            d: "M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z",
+                                            stroke: "currentColor",
+                                            strokeWidth: "2.2",
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round"
+                                          }
+                                        )
+                                      }
+                                    )
+                                  }
                                 )
                               ]
                             },
@@ -1859,7 +2202,7 @@ function ReportDialog({
                           ))
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "div",
                         {
                           onClick: () => {
@@ -1895,7 +2238,7 @@ function ReportDialog({
                             background: screenshotDragOver ? isDark ? "rgba(34,211,238,0.06)" : "rgba(8,145,178,0.04)" : "transparent",
                             transition: "border-color 0.15s ease, background 0.15s ease"
                           },
-                          children: screenshots.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          children: screenshots.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "p",
                             {
                               style: {
@@ -1906,8 +2249,8 @@ function ReportDialog({
                               },
                               children: screenshotDragOver ? "Drop to attach" : "+ Add more \xB7 Drag & drop \xB7 Paste"
                             }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                               "svg",
                               {
                                 width: "22",
@@ -1920,7 +2263,7 @@ function ReportDialog({
                                   opacity: 0.45
                                 },
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                     "rect",
                                     {
                                       x: "3",
@@ -1932,7 +2275,7 @@ function ReportDialog({
                                       strokeWidth: "1.5"
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                     "circle",
                                     {
                                       cx: "8.5",
@@ -1942,7 +2285,7 @@ function ReportDialog({
                                       strokeWidth: "1.5"
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                     "path",
                                     {
                                       d: "M21 15l-5-5L5 21",
@@ -1955,7 +2298,7 @@ function ReportDialog({
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               "p",
                               {
                                 style: {
@@ -1967,7 +2310,7 @@ function ReportDialog({
                                 children: screenshotDragOver ? "Drop to attach" : "Add screenshots"
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               "p",
                               {
                                 style: {
@@ -1982,8 +2325,8 @@ function ReportDialog({
                         }
                       )
                     ] }),
-                    showSeverity && reportType === "BUG" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: "10px" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    showSeverity && reportType === "BUG" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { marginTop: "10px" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "span",
                         {
                           style: {
@@ -1995,7 +2338,7 @@ function ReportDialog({
                           children: "Severity"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: "6px" }, children: ["low", "medium", "high"].map((s) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", gap: "6px" }, children: ["low", "medium", "high"].map((s) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "button",
                         {
                           type: "button",
@@ -2019,7 +2362,7 @@ function ReportDialog({
                         s
                       )) })
                     ] }),
-                    validationError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    validationError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       "p",
                       {
                         style: {
@@ -2030,7 +2373,7 @@ function ReportDialog({
                         children: validationError
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       "button",
                       {
                         type: "button",
@@ -2055,7 +2398,7 @@ function ReportDialog({
                     )
                   ] })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "div",
                   {
                     style: {
@@ -2063,7 +2406,7 @@ function ReportDialog({
                       borderTop: `1px solid ${t.border}`,
                       textAlign: "center"
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "11px", color: t.textMuted }, children: "Powered by Glitchgrab" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "11px", color: t.textMuted }, children: "Powered by Glitchgrab" })
                   }
                 )
               ]
@@ -2073,7 +2416,7 @@ function ReportDialog({
       ),
       document.body
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "input",
       {
         ref: fileInputRef,
@@ -2085,7 +2428,7 @@ function ReportDialog({
       }
     ),
     previewIndex !== null && screenshots[previewIndex] && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
           style: {
@@ -2106,37 +2449,114 @@ function ReportDialog({
           },
           onMouseDown: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "img",
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              "div",
               {
                 ref: previewImgRef,
-                src: screenshots[previewIndex],
-                alt: "Screenshot preview",
+                style: { position: "relative", maxWidth: "100%" },
                 onClick: (e) => e.stopPropagation(),
-                style: {
-                  maxWidth: "100%",
-                  maxHeight: "calc(100vh - 80px)",
-                  borderRadius: "8px",
-                  objectFit: "contain",
-                  cursor: "default"
-                }
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "img",
+                    {
+                      src: screenshots[previewIndex],
+                      alt: "Screenshot preview",
+                      style: {
+                        maxWidth: "100%",
+                        maxHeight: "calc(100vh - 80px)",
+                        borderRadius: "8px",
+                        objectFit: "contain",
+                        cursor: "default",
+                        display: "block"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setAnnotatingIndex(previewIndex);
+                      },
+                      style: {
+                        position: "absolute",
+                        top: "12px",
+                        right: "12px",
+                        display: "inline-flex",
+                        alignItems: "center",
+                        gap: "6px",
+                        padding: "8px 14px",
+                        borderRadius: "999px",
+                        border: "none",
+                        background: t.accent,
+                        color: t.accentText,
+                        fontSize: "13px",
+                        fontWeight: 700,
+                        cursor: "pointer",
+                        fontFamily: "inherit",
+                        boxShadow: "0 4px 14px rgba(0,0,0,0.35)",
+                        animation: "gg-pulse 2s ease-in-out infinite"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "path",
+                          {
+                            d: "M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z",
+                            stroke: "currentColor",
+                            strokeWidth: "2",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round"
+                          }
+                        ) }),
+                        "Annotate"
+                      ]
+                    }
+                  )
+                ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "span",
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
               {
                 style: {
                   marginTop: "12px",
-                  color: t.textMuted,
-                  fontSize: "12px"
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "12px"
                 },
-                children: screenshots.length > 1 ? `${previewIndex + 1} / ${screenshots.length} \xB7 Click outside to close` : "Click outside to close"
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "span",
+                  {
+                    style: {
+                      color: t.textMuted,
+                      fontSize: "12px"
+                    },
+                    children: screenshots.length > 1 ? `${previewIndex + 1} / ${screenshots.length} \xB7 Click outside to close` : "Click outside to close"
+                  }
+                )
               }
             )
           ]
         }
       ),
       document.body
+    ),
+    annotatingIndex !== null && screenshots[annotatingIndex] && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        AnnotationCanvas,
+        {
+          imageSrc: screenshots[annotatingIndex],
+          onCancel: () => setAnnotatingIndex(null),
+          onSave: (dataUrl) => {
+            setScreenshots(
+              (prev) => prev.map((s, i) => i === annotatingIndex ? dataUrl : s)
+            );
+            setAnnotatingIndex(null);
+          }
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -2146,6 +2566,12 @@ function getTypeLabel(type) {
       return "Bug Report";
     case "FEATURE_REQUEST":
       return "Feature Request";
+    case "UI_IMPROVEMENT":
+      return "UI Improvement";
+    case "PERFORMANCE":
+      return "Performance";
+    case "SECURITY":
+      return "Security";
     case "QUESTION":
       return "Question";
     case "OTHER":
@@ -2158,6 +2584,12 @@ function getTypeSubtitle(type) {
       return "Something isn't working";
     case "FEATURE_REQUEST":
       return "Suggest an improvement";
+    case "UI_IMPROVEMENT":
+      return "Something looks off";
+    case "PERFORMANCE":
+      return "Something is slow";
+    case "SECURITY":
+      return "Report a security concern";
     case "QUESTION":
       return "Ask a question";
     case "OTHER":
@@ -2171,6 +2603,12 @@ function getPlaceholder(type, idx = 0, hasVoice = false) {
       return "What went wrong? Describe it or paste an error...";
     case "FEATURE_REQUEST":
       return "Describe the feature you'd like...";
+    case "UI_IMPROVEMENT":
+      return "What looks off? Describe the visual issue...";
+    case "PERFORMANCE":
+      return "What's slow? Describe when it happens...";
+    case "SECURITY":
+      return "Describe the security concern...";
     case "QUESTION":
       return "What would you like to know?";
     case "OTHER":
@@ -2187,7 +2625,7 @@ function getTypeIcon(type, color, size = 24) {
   };
   switch (type) {
     case "BUG":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "path",
         {
           d: "M8 2L6.5 3.5M16 2L17.5 3.5M3 9H7M17 9H21M12 2a5 5 0 015 5v4a5 5 0 01-10 0V7a5 5 0 015-5zM7 16l-2 3M17 16l2 3",
@@ -2197,7 +2635,7 @@ function getTypeIcon(type, color, size = 24) {
         }
       ) });
     case "FEATURE_REQUEST":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "path",
         {
           d: "M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2z",
@@ -2206,10 +2644,55 @@ function getTypeIcon(type, color, size = 24) {
           strokeLinejoin: "round"
         }
       ) });
+    case "UI_IMPROVEMENT":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "rect",
+          {
+            x: "3",
+            y: "3",
+            width: "18",
+            height: "18",
+            rx: "2",
+            stroke: color,
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M3 9h18M9 21V9",
+            stroke: color,
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        )
+      ] });
+    case "PERFORMANCE":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          d: "M12 21a9 9 0 100-18 9 9 0 000 18zM12 12l4-4M12 7v.01",
+          stroke: color,
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) });
+    case "SECURITY":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          d: "M12 3l7 3v5c0 4.5-3 8.5-7 10-4-1.5-7-5.5-7-10V6l7-3z",
+          stroke: color,
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      ) });
     case "QUESTION":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...props, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "1.5" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
             d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01",
@@ -2221,7 +2704,7 @@ function getTypeIcon(type, color, size = 24) {
         )
       ] });
     case "OTHER":
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "path",
         {
           d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z",
@@ -2234,11 +2717,11 @@ function getTypeIcon(type, color, size = 24) {
 }
 
 // src/provider.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var DEFAULT_BASE_URL2 = "https://glitchgrab.dev";
-var GlitchgrabContext = (0, import_react2.createContext)(null);
+var GlitchgrabContext = (0, import_react3.createContext)(null);
 function useGlitchgrab() {
-  const ctx = (0, import_react2.useContext)(GlitchgrabContext);
+  const ctx = (0, import_react3.useContext)(GlitchgrabContext);
   if (!ctx) {
     throw new Error("useGlitchgrab must be used within a GlitchgrabProvider");
   }
@@ -2258,13 +2741,13 @@ function GlitchgrabProviderInner({
   showSeverity,
   ignoreErrors
 }) {
-  const visitedPagesRef = (0, import_react2.useRef)([]);
-  (0, import_react2.useEffect)(() => {
+  const visitedPagesRef = (0, import_react3.useRef)([]);
+  (0, import_react3.useEffect)(() => {
     if (enableBreadcrumbs) {
       initBreadcrumbs(maxBreadcrumbs2);
     }
   }, [enableBreadcrumbs, maxBreadcrumbs2]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     try {
       if (typeof window === "undefined") return;
       const trackPage = () => {
@@ -2301,7 +2784,7 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     try {
       if (typeof window === "undefined") return;
       if (process.env.NODE_ENV === "development") return;
@@ -2424,7 +2907,7 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, [token, baseUrl, onError, onReportSent, session, ignoreErrors]);
-  const report = (0, import_react2.useCallback)(
+  const report = (0, import_react3.useCallback)(
     async (type, description, metadata) => {
       var _a;
       try {
@@ -2457,17 +2940,17 @@ function GlitchgrabProviderInner({
     },
     [token, baseUrl, onReportSent, session]
   );
-  const reportBug = (0, import_react2.useCallback)(
+  const reportBug = (0, import_react3.useCallback)(
     (description, metadata) => report("BUG", description, metadata),
     [report]
   );
-  const addBreadcrumb2 = (0, import_react2.useCallback)(
+  const addBreadcrumb2 = (0, import_react3.useCallback)(
     (message, data) => {
       addBreadcrumb("custom", message, data);
     },
     []
   );
-  const enhance = (0, import_react2.useCallback)(
+  const enhance = (0, import_react3.useCallback)(
     async (text, screenshot) => {
       try {
         const ctx = captureContext(visitedPagesRef.current);
@@ -2483,7 +2966,7 @@ function GlitchgrabProviderInner({
     },
     [token, baseUrl]
   );
-  const transcribe = (0, import_react2.useCallback)(
+  const transcribe = (0, import_react3.useCallback)(
     async (blob) => {
       try {
         return await transcribeAudio(blob, token, baseUrl);
@@ -2493,12 +2976,12 @@ function GlitchgrabProviderInner({
     },
     [token, baseUrl]
   );
-  const openReportDialog = (0, import_react2.useCallback)((options) => {
+  const openReportDialog = (0, import_react3.useCallback)((options) => {
     if (typeof window !== "undefined") {
       window.dispatchEvent(new CustomEvent("glitchgrab:open-report", { detail: options }));
     }
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     try {
       if (typeof window === "undefined") return;
       const handleKeyDown = (e) => {
@@ -2512,7 +2995,7 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, [openReportDialog]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     GlitchgrabContext.Provider,
     {
       value: {
@@ -2525,7 +3008,7 @@ function GlitchgrabProviderInner({
         enhanceText: enhance
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           GlitchgrabErrorBoundary,
           {
             token,
@@ -2537,27 +3020,27 @@ function GlitchgrabProviderInner({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ReportDialog, { report, enhanceText: enhance, transcribeAudio: transcribe, types, showSeverity })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReportDialog, { report, enhanceText: enhance, transcribeAudio: transcribe, types, showSeverity })
       ]
     }
   );
 }
 function GlitchgrabProvider(props) {
-  if (!props.token) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children });
+  if (!props.token) return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: props.children });
   const resolvedProps = {
     ...props,
     baseUrl: props.baseUrl || DEFAULT_BASE_URL2
   };
   try {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GlitchgrabProviderInner, { ...resolvedProps });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlitchgrabProviderInner, { ...resolvedProps });
   } catch (e) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: props.children });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: props.children });
   }
 }
 
 // src/report-button.tsx
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function useGlitchgrabSafe() {
   try {
     return useGlitchgrab();
@@ -2572,7 +3055,7 @@ function ReportButton({
   children
 }) {
   var _a, _b;
-  const [capturing, setCapturing] = (0, import_react3.useState)(false);
+  const [capturing, setCapturing] = (0, import_react4.useState)(false);
   const glitchgrab = useGlitchgrabSafe();
   if (!glitchgrab) return null;
   const handleClick = async () => {
@@ -2581,7 +3064,7 @@ function ReportButton({
     setCapturing(false);
   };
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: children({ onClick: handleClick, capturing }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: children({ onClick: handleClick, capturing }) });
   }
   const isTop = (_a = position == null ? void 0 : position.startsWith("top")) != null ? _a : false;
   const isLeft = (_b = position == null ? void 0 : position.endsWith("left")) != null ? _b : false;
@@ -2589,7 +3072,7 @@ function ReportButton({
     ...isLeft ? { left: "16px" } : { right: "16px" },
     ...isTop ? { top: "16px" } : { bottom: "16px" }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "button",
     {
       type: "button",
@@ -2624,7 +3107,7 @@ function ReportButton({
       },
       "aria-label": label,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "svg",
           {
             width: "16",
@@ -2632,7 +3115,7 @@ function ReportButton({
             viewBox: "0 0 16 16",
             fill: "none",
             style: { flexShrink: 0 },
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "path",
               {
                 d: "M8 1C4.134 1 1 4.134 1 8s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7zm0 12.5a.75.75 0 110-1.5.75.75 0 010 1.5zm.75-3.5a.75.75 0 01-1.5 0V5a.75.75 0 011.5 0v5z",
@@ -2648,18 +3131,18 @@ function ReportButton({
 }
 
 // src/use-reports.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 var BASE_URL = "https://glitchgrab.dev";
 function useGlitchgrabReports({
   token,
   userId,
   limit = 100
 }) {
-  const [reports, setReports] = (0, import_react4.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react4.useState)(true);
-  const [isFetching, setIsFetching] = (0, import_react4.useState)(false);
-  const [error, setError] = (0, import_react4.useState)(null);
-  const fetchReports = (0, import_react4.useCallback)(async () => {
+  const [reports, setReports] = (0, import_react5.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react5.useState)(true);
+  const [isFetching, setIsFetching] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const fetchReports = (0, import_react5.useCallback)(async () => {
     var _a, _b;
     if (!token || !userId) {
       setIsLoading(false);
@@ -2685,7 +3168,7 @@ function useGlitchgrabReports({
       setIsFetching(false);
     }
   }, [token, userId, limit]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     fetchReports();
   }, [fetchReports]);
   return { reports, isLoading, isFetching, error, refetch: fetchReports };
@@ -2722,9 +3205,9 @@ function useGlitchgrabActions({
   onSuccess,
   onError
 }) {
-  const [isPending, setIsPending] = (0, import_react4.useState)(false);
-  const [error, setError] = (0, import_react4.useState)(null);
-  const run = (0, import_react4.useCallback)(
+  const [isPending, setIsPending] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const run = (0, import_react5.useCallback)(
     async (reportId, body) => {
       setIsPending(true);
       setError(null);