glitchgrab 1.26.0 → 1.27.0

package/dist/index.mjs

@@ -4,8 +4,8 @@
 import {
   createContext,
   useContext,
-  useRef as useRef2,
-  useEffect as useEffect2,
+  useRef as useRef3,
+  useEffect as useEffect3,
   useCallback
 } from "react";
 
@@ -453,12 +453,293 @@ var GlitchgrabErrorBoundary = class extends React.Component {
 
 // src/report-dialog.tsx
 import {
-  useState,
-  useRef,
-  useEffect
+  useState as useState2,
+  useRef as useRef2,
+  useEffect as useEffect2
 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+// src/annotation-canvas.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "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 = useRef(null);
+  const imgRef = useRef(null);
+  const [ready, setReady] = useState(false);
+  const [tool, setTool] = useState("pen");
+  const [color, setColor] = useState(PALETTE[0]);
+  const [strokeWidth, setStrokeWidth] = useState(4);
+  const [strokes, setStrokes] = useState([]);
+  const [currentStroke, setCurrentStroke] = useState(null);
+  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]);
+  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__ */ 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__ */ 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__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "14px",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              flexWrap: "wrap",
+              justifyContent: "center",
+              maxWidth: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setTool("pen"), style: iconBtn(tool === "pen"), title: "Freehand", "aria-label": "Freehand tool", children: /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ 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__ */ jsx("button", { type: "button", onClick: () => setTool("circle"), style: iconBtn(tool === "circle"), title: "Circle", "aria-label": "Circle tool", children: /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8", stroke: "currentColor", strokeWidth: "1.8" }) }) }),
+              /* @__PURE__ */ jsx("div", { style: { width: "1px", height: "20px", background: "rgba(255,255,255,0.15)" } }),
+              PALETTE.map((c) => /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { style: { width: "1px", height: "20px", background: "rgba(255,255,255,0.15)" } }),
+              /* @__PURE__ */ 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__ */ jsx("div", { style: { width: "1px", height: "20px", background: "rgba(255,255,255,0.15)" } }),
+              /* @__PURE__ */ 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__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M9 14L4 9l5-5M4 9h10a6 6 0 010 12h-2", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              /* @__PURE__ */ 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__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ 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__ */ jsxs("div", { style: { marginTop: "12px", display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ 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__ */ 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
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function useIsDark() {
   if (typeof window === "undefined") return true;
   try {
@@ -647,39 +928,40 @@ function ReportDialog({
   types,
   showSeverity = true
 }) {
-  const [isEnhancing, setIsEnhancing] = useState(false);
-  const [isEnhanced, setIsEnhanced] = useState(false);
-  const [originalDescription, setOriginalDescription] = useState(
+  const [isEnhancing, setIsEnhancing] = useState2(false);
+  const [isEnhanced, setIsEnhanced] = useState2(false);
+  const [originalDescription, setOriginalDescription] = useState2(
     null
   );
-  const [isListening, setIsListening] = useState(false);
-  const [isTranscribing, setIsTranscribing] = useState(false);
-  const [voiceError, setVoiceError] = useState(null);
-  const [screenshotDragOver, setScreenshotDragOver] = useState(false);
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => {
+  const [isListening, setIsListening] = useState2(false);
+  const [isTranscribing, setIsTranscribing] = useState2(false);
+  const [voiceError, setVoiceError] = useState2(null);
+  const [screenshotDragOver, setScreenshotDragOver] = useState2(false);
+  const [mounted, setMounted] = useState2(false);
+  useEffect2(() => {
     setMounted(true);
   }, []);
-  const [isOpen, setIsOpen] = useState(false);
-  const [description, setDescription] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-  const [screenshots, setScreenshots] = useState([]);
-  const [previewIndex, setPreviewIndex] = useState(null);
-  const fileInputRef = useRef(null);
-  const modalRef = useRef(null);
-  const previewImgRef = useRef(null);
-  const textareaRef = useRef(null);
-  const recognitionRef = useRef(null);
-  const voiceBaseRef = useRef("");
-  const usingWebSpeechRef = useRef(false);
-  const textBeforeVoiceRef = useRef("");
-  const mediaRecorderRef = useRef(null);
-  const streamRef = useRef(null);
-  const sarvamChunksRef = useRef([]);
-  const spaceTimerRef = useRef(null);
-  const isPushToTalkRef = useRef(false);
-  useEffect(() => {
+  const [isOpen, setIsOpen] = useState2(false);
+  const [description, setDescription] = useState2("");
+  const [isSubmitting, setIsSubmitting] = useState2(false);
+  const [submitted, setSubmitted] = useState2(false);
+  const [screenshots, setScreenshots] = useState2([]);
+  const [previewIndex, setPreviewIndex] = useState2(null);
+  const [annotatingIndex, setAnnotatingIndex] = useState2(null);
+  const fileInputRef = useRef2(null);
+  const modalRef = useRef2(null);
+  const previewImgRef = useRef2(null);
+  const textareaRef = useRef2(null);
+  const recognitionRef = useRef2(null);
+  const voiceBaseRef = useRef2("");
+  const usingWebSpeechRef = useRef2(false);
+  const textBeforeVoiceRef = useRef2("");
+  const mediaRecorderRef = useRef2(null);
+  const streamRef = useRef2(null);
+  const sarvamChunksRef = useRef2([]);
+  const spaceTimerRef = useRef2(null);
+  const isPushToTalkRef = useRef2(false);
+  useEffect2(() => {
     if (!isOpen) return;
     const dialogs = Array.from(
       document.querySelectorAll(
@@ -689,14 +971,17 @@ function ReportDialog({
     dialogs.forEach((d) => d.setAttribute("inert", ""));
     return () => dialogs.forEach((d) => d.removeAttribute("inert"));
   }, [isOpen]);
-  const [step, setStep] = useState(1);
-  const [reportType, setReportType] = useState("BUG");
-  const [severity, setSeverity] = useState("medium");
-  const [validationError, setValidationError] = useState(null);
-  const [placeholderIdx, setPlaceholderIdx] = useState(0);
+  const [step, setStep] = useState2(1);
+  const [reportType, setReportType] = useState2("BUG");
+  const [severity, setSeverity] = useState2("medium");
+  const [validationError, setValidationError] = useState2(null);
+  const [placeholderIdx, setPlaceholderIdx] = useState2(0);
   const availableTypes = types != null ? types : [
     "BUG",
     "FEATURE_REQUEST",
+    "UI_IMPROVEMENT",
+    "PERFORMANCE",
+    "SECURITY",
     "QUESTION",
     "OTHER"
   ];
@@ -725,7 +1010,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) {
@@ -744,14 +1035,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);
   };
-  useEffect(() => {
+  useEffect2(() => {
     const handler = (e) => {
       if (isOpen) return;
       const detail = e.detail;
@@ -765,7 +1062,7 @@ function ReportDialog({
     window.addEventListener("glitchgrab:open-report", handler);
     return () => window.removeEventListener("glitchgrab:open-report", handler);
   }, [isOpen, handleOpen]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isOpen) return;
     const handleEsc = (e) => {
       if (e.key === "Escape") {
@@ -776,8 +1073,8 @@ function ReportDialog({
     document.addEventListener("keydown", handleEsc);
     return () => document.removeEventListener("keydown", handleEsc);
   }, [isOpen, previewIndex]);
-  useEffect(() => {
-    if (previewIndex === null) return;
+  useEffect2(() => {
+    if (previewIndex === null || annotatingIndex !== null) return;
     const handlePointerDown = (e) => {
       var _a;
       if (!((_a = previewImgRef.current) == null ? void 0 : _a.contains(e.target))) {
@@ -786,8 +1083,8 @@ function ReportDialog({
     };
     document.addEventListener("pointerdown", handlePointerDown, true);
     return () => document.removeEventListener("pointerdown", handlePointerDown, true);
-  }, [previewIndex]);
-  useEffect(() => {
+  }, [previewIndex, annotatingIndex]);
+  useEffect2(() => {
     if (!isOpen) return;
     const handlePaste = (e) => {
       var _a;
@@ -812,7 +1109,7 @@ function ReportDialog({
     window.addEventListener("paste", handlePaste);
     return () => window.removeEventListener("paste", handlePaste);
   }, [isOpen]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isOpen || !transcribeAudio2) return;
     const id = setInterval(() => {
       setPlaceholderIdx((i) => (i + 1) % 2);
@@ -1029,9 +1326,9 @@ function ReportDialog({
     }
   };
   if (!mounted) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
     isOpen && createPortal(
-      /* @__PURE__ */ jsx("style", { children: `
+      /* @__PURE__ */ jsx2("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}}
@@ -1041,7 +1338,7 @@ function ReportDialog({
       document.body
     ),
     isOpen && createPortal(
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(
         "div",
         {
           style: {
@@ -1060,7 +1357,7 @@ function ReportDialog({
           },
           onPointerDown: (e) => e.stopPropagation(),
           onFocus: (e) => e.stopPropagation(),
-          children: /* @__PURE__ */ jsxs(
+          children: /* @__PURE__ */ jsxs2(
             "div",
             {
               ref: modalRef,
@@ -1079,7 +1376,7 @@ function ReportDialog({
                 isolation: "isolate"
               },
               children: [
-                /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsxs2(
                   "div",
                   {
                     style: {
@@ -1087,7 +1384,7 @@ function ReportDialog({
                       borderBottom: `1px solid ${t.border}`
                     },
                     children: [
-                      /* @__PURE__ */ jsxs(
+                      /* @__PURE__ */ jsxs2(
                         "div",
                         {
                           style: {
@@ -1096,7 +1393,7 @@ function ReportDialog({
                             alignItems: "center"
                           },
                           children: [
-                            /* @__PURE__ */ jsxs(
+                            /* @__PURE__ */ jsxs2(
                               "div",
                               {
                                 style: {
@@ -1105,7 +1402,7 @@ function ReportDialog({
                                   gap: "8px"
                                 },
                                 children: [
-                                  step > 1 && /* @__PURE__ */ jsx(
+                                  step > 1 && /* @__PURE__ */ jsx2(
                                     "button",
                                     {
                                       type: "button",
@@ -1119,14 +1416,14 @@ function ReportDialog({
                                         alignItems: "center"
                                       },
                                       "aria-label": "Back",
-                                      children: /* @__PURE__ */ jsx(
+                                      children: /* @__PURE__ */ jsx2(
                                         "svg",
                                         {
                                           width: "16",
                                           height: "16",
                                           viewBox: "0 0 16 16",
                                           fill: "none",
-                                          children: /* @__PURE__ */ jsx(
+                                          children: /* @__PURE__ */ jsx2(
                                             "path",
                                             {
                                               d: "M10 3L5 8L10 13",
@@ -1140,7 +1437,7 @@ function ReportDialog({
                                       )
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx2(
                                     "span",
                                     {
                                       style: {
@@ -1154,7 +1451,7 @@ function ReportDialog({
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2(
                               "button",
                               {
                                 type: "button",
@@ -1169,7 +1466,7 @@ function ReportDialog({
                                   justifyContent: "center"
                                 },
                                 "aria-label": "Close",
-                                children: /* @__PURE__ */ jsx(
+                                children: /* @__PURE__ */ jsx2(
                                   "svg",
                                   {
                                     width: "16",
@@ -1177,7 +1474,7 @@ function ReportDialog({
                                     viewBox: "0 0 16 16",
                                     fill: "none",
                                     style: { display: "block" },
-                                    children: /* @__PURE__ */ jsx(
+                                    children: /* @__PURE__ */ jsx2(
                                       "path",
                                       {
                                         d: "M4 4L12 12M12 4L4 12",
@@ -1193,7 +1490,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2(
                         "div",
                         {
                           style: {
@@ -1203,12 +1500,12 @@ function ReportDialog({
                             gap: "0",
                             marginTop: "12px"
                           },
-                          children: [1, 2].map((s, i) => /* @__PURE__ */ jsxs(
+                          children: [1, 2].map((s, i) => /* @__PURE__ */ jsxs2(
                             "div",
                             {
                               style: { display: "flex", alignItems: "center" },
                               children: [
-                                /* @__PURE__ */ jsx(
+                                /* @__PURE__ */ jsx2(
                                   "div",
                                   {
                                     style: {
@@ -1220,7 +1517,7 @@ function ReportDialog({
                                     }
                                   }
                                 ),
-                                i < 1 && /* @__PURE__ */ jsx(
+                                i < 1 && /* @__PURE__ */ jsx2(
                                   "div",
                                   {
                                     style: {
@@ -1240,7 +1537,7 @@ function ReportDialog({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx2("div", { style: { padding: "16px" }, children: submitted ? /* @__PURE__ */ jsxs2(
                   "div",
                   {
                     style: {
@@ -1255,8 +1552,8 @@ function ReportDialog({
                       " sent. Thank you!"
                     ]
                   }
-                ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  step === 1 && /* @__PURE__ */ jsx(
+                ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+                  step === 1 && /* @__PURE__ */ jsx2(
                     "div",
                     {
                       style: {
@@ -1264,7 +1561,7 @@ function ReportDialog({
                         gridTemplateColumns: "1fr 1fr",
                         gap: "8px"
                       },
-                      children: availableTypes.map((type) => /* @__PURE__ */ jsxs(
+                      children: availableTypes.map((type) => /* @__PURE__ */ jsxs2(
                         "button",
                         {
                           type: "button",
@@ -1294,8 +1591,8 @@ function ReportDialog({
                           },
                           children: [
                             getTypeIcon(type, t.accent),
-                            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 600 }, children: getTypeLabel(type) }),
-                            /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2("span", { style: { fontSize: "13px", fontWeight: 600 }, children: getTypeLabel(type) }),
+                            /* @__PURE__ */ jsx2(
                               "span",
                               {
                                 style: {
@@ -1312,9 +1609,9 @@ function ReportDialog({
                       ))
                     }
                   ),
-                  step === 2 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-                      /* @__PURE__ */ jsx(
+                  step === 2 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+                    /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+                      /* @__PURE__ */ jsx2(
                         "textarea",
                         {
                           ref: textareaRef,
@@ -1355,7 +1652,7 @@ function ReportDialog({
                           autoFocus: true
                         }
                       ),
-                      (isListening || isTranscribing) && /* @__PURE__ */ jsxs(
+                      (isListening || isTranscribing) && /* @__PURE__ */ jsxs2(
                         "span",
                         {
                           style: {
@@ -1373,7 +1670,7 @@ function ReportDialog({
                             zIndex: 1
                           },
                           children: [
-                            /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2(
                               "span",
                               {
                                 style: {
@@ -1388,7 +1685,7 @@ function ReportDialog({
                               }
                             ),
                             isTranscribing ? "Transcribing\u2026" : "REC",
-                            isListening && !isTranscribing && /* @__PURE__ */ jsx(
+                            isListening && !isTranscribing && /* @__PURE__ */ jsx2(
                               "span",
                               {
                                 style: {
@@ -1415,7 +1712,7 @@ function ReportDialog({
                                     dur: "0.55s",
                                     delay: "0.15s"
                                   }
-                                ].map((b, i) => /* @__PURE__ */ jsx(
+                                ].map((b, i) => /* @__PURE__ */ jsx2(
                                   "span",
                                   {
                                     style: {
@@ -1435,7 +1732,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      enhanceText2 && /* @__PURE__ */ jsxs(
+                      enhanceText2 && /* @__PURE__ */ jsxs2(
                         "button",
                         {
                           type: "button",
@@ -1480,7 +1777,7 @@ function ReportDialog({
                           },
                           title: "Polish grammar \u2014 preserves your meaning",
                           children: [
-                            /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2(
                               "svg",
                               {
                                 width: "11",
@@ -1488,7 +1785,7 @@ function ReportDialog({
                                 viewBox: "0 0 24 24",
                                 fill: "none",
                                 "aria-hidden": "true",
-                                children: /* @__PURE__ */ jsx(
+                                children: /* @__PURE__ */ jsx2(
                                   "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",
@@ -1503,7 +1800,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      transcribeAudio2 && /* @__PURE__ */ jsx(
+                      transcribeAudio2 && /* @__PURE__ */ jsx2(
                         "button",
                         {
                           type: "button",
@@ -1529,7 +1826,7 @@ function ReportDialog({
                             padding: 0,
                             transition: "border-color 0.2s ease, color 0.2s ease"
                           },
-                          children: isListening ? /* @__PURE__ */ jsx(
+                          children: isListening ? /* @__PURE__ */ jsx2(
                             "svg",
                             {
                               width: "12",
@@ -1537,7 +1834,7 @@ function ReportDialog({
                               viewBox: "0 0 24 24",
                               fill: "currentColor",
                               "aria-hidden": "true",
-                              children: /* @__PURE__ */ jsx(
+                              children: /* @__PURE__ */ jsx2(
                                 "rect",
                                 {
                                   x: "6",
@@ -1548,7 +1845,7 @@ function ReportDialog({
                                 }
                               )
                             }
-                          ) : /* @__PURE__ */ jsxs(
+                          ) : /* @__PURE__ */ jsxs2(
                             "svg",
                             {
                               width: "13",
@@ -1557,7 +1854,7 @@ function ReportDialog({
                               fill: "none",
                               "aria-hidden": "true",
                               children: [
-                                /* @__PURE__ */ jsx(
+                                /* @__PURE__ */ jsx2(
                                   "rect",
                                   {
                                     x: "9",
@@ -1569,7 +1866,7 @@ function ReportDialog({
                                     strokeWidth: "1.8"
                                   }
                                 ),
-                                /* @__PURE__ */ jsx(
+                                /* @__PURE__ */ jsx2(
                                   "path",
                                   {
                                     d: "M5 10a7 7 0 0014 0M12 19v3M9 22h6",
@@ -1584,7 +1881,7 @@ function ReportDialog({
                         }
                       )
                     ] }),
-                    transcribeAudio2 && !isListening && !isTranscribing && /* @__PURE__ */ jsxs(
+                    transcribeAudio2 && !isListening && !isTranscribing && /* @__PURE__ */ jsxs2(
                       "div",
                       {
                         style: {
@@ -1598,16 +1895,16 @@ function ReportDialog({
                           userSelect: "none"
                         },
                         children: [
-                          /* @__PURE__ */ jsxs("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                            /* @__PURE__ */ jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
-                            /* @__PURE__ */ jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
-                            /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
+                          /* @__PURE__ */ jsxs2("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                            /* @__PURE__ */ jsx2("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }),
+                            /* @__PURE__ */ jsx2("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+                            /* @__PURE__ */ jsx2("line", { x1: "12", x2: "12", y1: "19", y2: "22" })
                           ] }),
                           "Hold Space to speak \u2014 we'll transcribe it"
                         ]
                       }
                     ),
-                    isEnhanced && originalDescription !== null && /* @__PURE__ */ jsxs(
+                    isEnhanced && originalDescription !== null && /* @__PURE__ */ jsxs2(
                       "div",
                       {
                         style: {
@@ -1621,7 +1918,7 @@ function ReportDialog({
                           border: `1px solid ${t.accent}40`
                         },
                         children: [
-                          /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsx2(
                             "svg",
                             {
                               width: "12",
@@ -1629,7 +1926,7 @@ function ReportDialog({
                               viewBox: "0 0 24 24",
                               fill: "none",
                               style: { flexShrink: 0 },
-                              children: /* @__PURE__ */ jsx(
+                              children: /* @__PURE__ */ jsx2(
                                 "path",
                                 {
                                   d: "M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z",
@@ -1640,7 +1937,7 @@ function ReportDialog({
                               )
                             }
                           ),
-                          /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsx2(
                             "span",
                             {
                               style: {
@@ -1651,7 +1948,7 @@ function ReportDialog({
                               children: "AI enhanced"
                             }
                           ),
-                          /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsx2(
                             "button",
                             {
                               type: "button",
@@ -1673,7 +1970,7 @@ function ReportDialog({
                               children: "Keep"
                             }
                           ),
-                          /* @__PURE__ */ jsx(
+                          /* @__PURE__ */ jsx2(
                             "button",
                             {
                               type: "button",
@@ -1699,7 +1996,7 @@ function ReportDialog({
                         ]
                       }
                     ),
-                    voiceError && /* @__PURE__ */ jsx(
+                    voiceError && /* @__PURE__ */ jsx2(
                       "p",
                       {
                         style: {
@@ -1711,8 +2008,8 @@ function ReportDialog({
                         children: voiceError
                       }
                     ),
-                    /* @__PURE__ */ jsxs("div", { style: { marginTop: "10px" }, children: [
-                      /* @__PURE__ */ jsxs(
+                    /* @__PURE__ */ jsxs2("div", { style: { marginTop: "10px" }, children: [
+                      /* @__PURE__ */ jsxs2(
                         "span",
                         {
                           style: {
@@ -1728,7 +2025,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      screenshots.length > 0 && /* @__PURE__ */ jsx(
+                      screenshots.length > 0 && /* @__PURE__ */ jsx2(
                         "div",
                         {
                           style: {
@@ -1737,7 +2034,7 @@ function ReportDialog({
                             gap: "8px",
                             marginBottom: "8px"
                           },
-                          children: screenshots.map((src, i) => /* @__PURE__ */ jsxs(
+                          children: screenshots.map((src, i) => /* @__PURE__ */ jsxs2(
                             "div",
                             {
                               style: {
@@ -1746,7 +2043,7 @@ function ReportDialog({
                                 height: "56px"
                               },
                               children: [
-                                /* @__PURE__ */ jsx(
+                                /* @__PURE__ */ jsx2(
                                   "img",
                                   {
                                     src,
@@ -1764,7 +2061,7 @@ function ReportDialog({
                                     }
                                   }
                                 ),
-                                /* @__PURE__ */ jsx(
+                                /* @__PURE__ */ jsx2(
                                   "button",
                                   {
                                     type: "button",
@@ -1790,14 +2087,14 @@ function ReportDialog({
                                       alignItems: "center",
                                       justifyContent: "center"
                                     },
-                                    children: /* @__PURE__ */ jsx(
+                                    children: /* @__PURE__ */ jsx2(
                                       "svg",
                                       {
                                         width: "8",
                                         height: "8",
                                         viewBox: "0 0 10 10",
                                         fill: "none",
-                                        children: /* @__PURE__ */ jsx(
+                                        children: /* @__PURE__ */ jsx2(
                                           "path",
                                           {
                                             d: "M1 1L9 9M9 1L1 9",
@@ -1809,6 +2106,52 @@ function ReportDialog({
                                       }
                                     )
                                   }
+                                ),
+                                /* @__PURE__ */ jsx2(
+                                  "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__ */ jsx2(
+                                      "svg",
+                                      {
+                                        width: "12",
+                                        height: "12",
+                                        viewBox: "0 0 24 24",
+                                        fill: "none",
+                                        children: /* @__PURE__ */ jsx2(
+                                          "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"
+                                          }
+                                        )
+                                      }
+                                    )
+                                  }
                                 )
                               ]
                             },
@@ -1816,7 +2159,7 @@ function ReportDialog({
                           ))
                         }
                       ),
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2(
                         "div",
                         {
                           onClick: () => {
@@ -1852,7 +2195,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__ */ jsx(
+                          children: screenshots.length > 0 ? /* @__PURE__ */ jsx2(
                             "p",
                             {
                               style: {
@@ -1863,8 +2206,8 @@ function ReportDialog({
                               },
                               children: screenshotDragOver ? "Drop to attach" : "+ Add more \xB7 Drag & drop \xB7 Paste"
                             }
-                          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                            /* @__PURE__ */ jsxs(
+                          ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+                            /* @__PURE__ */ jsxs2(
                               "svg",
                               {
                                 width: "22",
@@ -1877,7 +2220,7 @@ function ReportDialog({
                                   opacity: 0.45
                                 },
                                 children: [
-                                  /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx2(
                                     "rect",
                                     {
                                       x: "3",
@@ -1889,7 +2232,7 @@ function ReportDialog({
                                       strokeWidth: "1.5"
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx2(
                                     "circle",
                                     {
                                       cx: "8.5",
@@ -1899,7 +2242,7 @@ function ReportDialog({
                                       strokeWidth: "1.5"
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx2(
                                     "path",
                                     {
                                       d: "M21 15l-5-5L5 21",
@@ -1912,7 +2255,7 @@ function ReportDialog({
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2(
                               "p",
                               {
                                 style: {
@@ -1924,7 +2267,7 @@ function ReportDialog({
                                 children: screenshotDragOver ? "Drop to attach" : "Add screenshots"
                               }
                             ),
-                            /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx2(
                               "p",
                               {
                                 style: {
@@ -1939,8 +2282,8 @@ function ReportDialog({
                         }
                       )
                     ] }),
-                    showSeverity && reportType === "BUG" && /* @__PURE__ */ jsxs("div", { style: { marginTop: "10px" }, children: [
-                      /* @__PURE__ */ jsx(
+                    showSeverity && reportType === "BUG" && /* @__PURE__ */ jsxs2("div", { style: { marginTop: "10px" }, children: [
+                      /* @__PURE__ */ jsx2(
                         "span",
                         {
                           style: {
@@ -1952,7 +2295,7 @@ function ReportDialog({
                           children: "Severity"
                         }
                       ),
-                      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px" }, children: ["low", "medium", "high"].map((s) => /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: "6px" }, children: ["low", "medium", "high"].map((s) => /* @__PURE__ */ jsx2(
                         "button",
                         {
                           type: "button",
@@ -1976,7 +2319,7 @@ function ReportDialog({
                         s
                       )) })
                     ] }),
-                    validationError && /* @__PURE__ */ jsx(
+                    validationError && /* @__PURE__ */ jsx2(
                       "p",
                       {
                         style: {
@@ -1987,7 +2330,7 @@ function ReportDialog({
                         children: validationError
                       }
                     ),
-                    /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx2(
                       "button",
                       {
                         type: "button",
@@ -2012,7 +2355,7 @@ function ReportDialog({
                     )
                   ] })
                 ] }) }),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx2(
                   "div",
                   {
                     style: {
@@ -2020,7 +2363,7 @@ function ReportDialog({
                       borderTop: `1px solid ${t.border}`,
                       textAlign: "center"
                     },
-                    children: /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", color: t.textMuted }, children: "Powered by Glitchgrab" })
+                    children: /* @__PURE__ */ jsx2("span", { style: { fontSize: "11px", color: t.textMuted }, children: "Powered by Glitchgrab" })
                   }
                 )
               ]
@@ -2030,7 +2373,7 @@ function ReportDialog({
       ),
       document.body
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       "input",
       {
         ref: fileInputRef,
@@ -2042,7 +2385,7 @@ function ReportDialog({
       }
     ),
     previewIndex !== null && screenshots[previewIndex] && createPortal(
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsxs2(
         "div",
         {
           style: {
@@ -2063,37 +2406,114 @@ function ReportDialog({
           },
           onMouseDown: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx(
-              "img",
+            /* @__PURE__ */ jsxs2(
+              "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__ */ jsx2(
+                    "img",
+                    {
+                      src: screenshots[previewIndex],
+                      alt: "Screenshot preview",
+                      style: {
+                        maxWidth: "100%",
+                        maxHeight: "calc(100vh - 80px)",
+                        borderRadius: "8px",
+                        objectFit: "contain",
+                        cursor: "default",
+                        display: "block"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2(
+                    "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__ */ jsx2("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx2(
+                          "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__ */ jsx(
-              "span",
+            /* @__PURE__ */ jsx2(
+              "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__ */ jsx2(
+                  "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] && createPortal(
+      /* @__PURE__ */ jsx2(
+        AnnotationCanvas,
+        {
+          imageSrc: screenshots[annotatingIndex],
+          onCancel: () => setAnnotatingIndex(null),
+          onSave: (dataUrl) => {
+            setScreenshots(
+              (prev) => prev.map((s, i) => i === annotatingIndex ? dataUrl : s)
+            );
+            setAnnotatingIndex(null);
+          }
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -2103,6 +2523,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":
@@ -2115,6 +2541,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":
@@ -2128,6 +2560,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":
@@ -2144,7 +2582,7 @@ function getTypeIcon(type, color, size = 24) {
   };
   switch (type) {
     case "BUG":
-      return /* @__PURE__ */ jsx("svg", { ...props, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2("svg", { ...props, children: /* @__PURE__ */ jsx2(
         "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",
@@ -2154,7 +2592,7 @@ function getTypeIcon(type, color, size = 24) {
         }
       ) });
     case "FEATURE_REQUEST":
-      return /* @__PURE__ */ jsx("svg", { ...props, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2("svg", { ...props, children: /* @__PURE__ */ jsx2(
         "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",
@@ -2163,10 +2601,55 @@ function getTypeIcon(type, color, size = 24) {
           strokeLinejoin: "round"
         }
       ) });
+    case "UI_IMPROVEMENT":
+      return /* @__PURE__ */ jsxs2("svg", { ...props, children: [
+        /* @__PURE__ */ jsx2(
+          "rect",
+          {
+            x: "3",
+            y: "3",
+            width: "18",
+            height: "18",
+            rx: "2",
+            stroke: color,
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "M3 9h18M9 21V9",
+            stroke: color,
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        )
+      ] });
+    case "PERFORMANCE":
+      return /* @__PURE__ */ jsx2("svg", { ...props, children: /* @__PURE__ */ jsx2(
+        "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__ */ jsx2("svg", { ...props, children: /* @__PURE__ */ jsx2(
+        "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__ */ jsxs("svg", { ...props, children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs2("svg", { ...props, children: [
+        /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx2(
           "path",
           {
             d: "M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01",
@@ -2178,7 +2661,7 @@ function getTypeIcon(type, color, size = 24) {
         )
       ] });
     case "OTHER":
-      return /* @__PURE__ */ jsx("svg", { ...props, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2("svg", { ...props, children: /* @__PURE__ */ jsx2(
         "path",
         {
           d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z",
@@ -2191,7 +2674,7 @@ function getTypeIcon(type, color, size = 24) {
 }
 
 // src/provider.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_BASE_URL2 = "https://glitchgrab.dev";
 var GlitchgrabContext = createContext(null);
 function useGlitchgrab() {
@@ -2215,13 +2698,13 @@ function GlitchgrabProviderInner({
   showSeverity,
   ignoreErrors
 }) {
-  const visitedPagesRef = useRef2([]);
-  useEffect2(() => {
+  const visitedPagesRef = useRef3([]);
+  useEffect3(() => {
     if (enableBreadcrumbs) {
       initBreadcrumbs(maxBreadcrumbs2);
     }
   }, [enableBreadcrumbs, maxBreadcrumbs2]);
-  useEffect2(() => {
+  useEffect3(() => {
     try {
       if (typeof window === "undefined") return;
       const trackPage = () => {
@@ -2258,7 +2741,7 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     try {
       if (typeof window === "undefined") return;
       if (process.env.NODE_ENV === "development") return;
@@ -2455,7 +2938,7 @@ function GlitchgrabProviderInner({
       window.dispatchEvent(new CustomEvent("glitchgrab:open-report", { detail: options }));
     }
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     try {
       if (typeof window === "undefined") return;
       const handleKeyDown = (e) => {
@@ -2469,7 +2952,7 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, [openReportDialog]);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     GlitchgrabContext.Provider,
     {
       value: {
@@ -2482,7 +2965,7 @@ function GlitchgrabProviderInner({
         enhanceText: enhance
       },
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           GlitchgrabErrorBoundary,
           {
             token,
@@ -2494,27 +2977,27 @@ function GlitchgrabProviderInner({
             children
           }
         ),
-        /* @__PURE__ */ jsx2(ReportDialog, { report, enhanceText: enhance, transcribeAudio: transcribe, types, showSeverity })
+        /* @__PURE__ */ jsx3(ReportDialog, { report, enhanceText: enhance, transcribeAudio: transcribe, types, showSeverity })
       ]
     }
   );
 }
 function GlitchgrabProvider(props) {
-  if (!props.token) return /* @__PURE__ */ jsx2(Fragment2, { children: props.children });
+  if (!props.token) return /* @__PURE__ */ jsx3(Fragment2, { children: props.children });
   const resolvedProps = {
     ...props,
     baseUrl: props.baseUrl || DEFAULT_BASE_URL2
   };
   try {
-    return /* @__PURE__ */ jsx2(GlitchgrabProviderInner, { ...resolvedProps });
+    return /* @__PURE__ */ jsx3(GlitchgrabProviderInner, { ...resolvedProps });
   } catch (e) {
-    return /* @__PURE__ */ jsx2(Fragment2, { children: props.children });
+    return /* @__PURE__ */ jsx3(Fragment2, { children: props.children });
   }
 }
 
 // src/report-button.tsx
-import { useState as useState3 } from "react";
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function useGlitchgrabSafe() {
   try {
     return useGlitchgrab();
@@ -2529,7 +3012,7 @@ function ReportButton({
   children
 }) {
   var _a, _b;
-  const [capturing, setCapturing] = useState3(false);
+  const [capturing, setCapturing] = useState4(false);
   const glitchgrab = useGlitchgrabSafe();
   if (!glitchgrab) return null;
   const handleClick = async () => {
@@ -2538,7 +3021,7 @@ function ReportButton({
     setCapturing(false);
   };
   if (children) {
-    return /* @__PURE__ */ jsx3(Fragment3, { children: children({ onClick: handleClick, capturing }) });
+    return /* @__PURE__ */ jsx4(Fragment3, { 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;
@@ -2546,7 +3029,7 @@ function ReportButton({
     ...isLeft ? { left: "16px" } : { right: "16px" },
     ...isTop ? { top: "16px" } : { bottom: "16px" }
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "button",
     {
       type: "button",
@@ -2581,7 +3064,7 @@ function ReportButton({
       },
       "aria-label": label,
       children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "svg",
           {
             width: "16",
@@ -2589,7 +3072,7 @@ function ReportButton({
             viewBox: "0 0 16 16",
             fill: "none",
             style: { flexShrink: 0 },
-            children: /* @__PURE__ */ jsx3(
+            children: /* @__PURE__ */ jsx4(
               "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",
@@ -2605,17 +3088,17 @@ function ReportButton({
 }
 
 // src/use-reports.ts
-import { useState as useState4, useEffect as useEffect3, useCallback as useCallback2 } from "react";
+import { useState as useState5, useEffect as useEffect4, useCallback as useCallback2 } from "react";
 var BASE_URL = "https://glitchgrab.dev";
 function useGlitchgrabReports({
   token,
   userId,
   limit = 100
 }) {
-  const [reports, setReports] = useState4([]);
-  const [isLoading, setIsLoading] = useState4(true);
-  const [isFetching, setIsFetching] = useState4(false);
-  const [error, setError] = useState4(null);
+  const [reports, setReports] = useState5([]);
+  const [isLoading, setIsLoading] = useState5(true);
+  const [isFetching, setIsFetching] = useState5(false);
+  const [error, setError] = useState5(null);
   const fetchReports = useCallback2(async () => {
     var _a, _b;
     if (!token || !userId) {
@@ -2642,7 +3125,7 @@ function useGlitchgrabReports({
       setIsFetching(false);
     }
   }, [token, userId, limit]);
-  useEffect3(() => {
+  useEffect4(() => {
     fetchReports();
   }, [fetchReports]);
   return { reports, isLoading, isFetching, error, refetch: fetchReports };
@@ -2679,8 +3162,8 @@ function useGlitchgrabActions({
   onSuccess,
   onError
 }) {
-  const [isPending, setIsPending] = useState4(false);
-  const [error, setError] = useState4(null);
+  const [isPending, setIsPending] = useState5(false);
+  const [error, setError] = useState5(null);
   const run = useCallback2(
     async (reportId, body) => {
       setIsPending(true);