glitchgrab 1.26.0 → 1.28.0

package/dist/index.js

@@ -31,6 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  GLITCHGRAB_SHORTCUT: () => GLITCHGRAB_SHORTCUT,
+  GLITCHGRAB_SHORTCUT_MAC: () => GLITCHGRAB_SHORTCUT_MAC,
   GlitchgrabErrorBoundary: () => GlitchgrabErrorBoundary,
   GlitchgrabProvider: () => GlitchgrabProvider,
   ReportButton: () => ReportButton,
@@ -43,7 +45,9 @@ __export(index_exports, {
   enhanceText: () => enhanceText,
   fetchGlitchgrabReports: () => fetchGlitchgrabReports,
   getBreadcrumbs: () => getBreadcrumbs,
+  getShortcutLabel: () => getShortcutLabel,
   initBreadcrumbs: () => initBreadcrumbs,
+  matchesShortcut: () => matchesShortcut,
   sanitizeUrl: () => sanitizeUrl,
   sendReport: () => sendReport,
   shouldSkipDuplicate: () => shouldSkipDuplicate,
@@ -54,7 +58,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 +503,308 @@ 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/shortcut.ts
+var GLITCHGRAB_SHORTCUT = "Ctrl+Shift+G";
+var GLITCHGRAB_SHORTCUT_MAC = "\u2318\u21E7G";
+function isMac() {
+  try {
+    if (typeof navigator === "undefined") return false;
+    return /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
+  } catch (e) {
+    return false;
+  }
+}
+function getShortcutLabel() {
+  return isMac() ? GLITCHGRAB_SHORTCUT_MAC : GLITCHGRAB_SHORTCUT;
+}
+function matchesShortcut(e) {
+  return (e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "g";
+}
+
+// src/report-dialog.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function useIsDark() {
   if (typeof window === "undefined") return true;
   try {
@@ -690,39 +993,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 +1036,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 +1075,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 +1100,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 +1127,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 +1138,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 +1148,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 +1174,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 +1391,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 +1403,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 +1422,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 +1441,7 @@ function ReportDialog({
                 isolation: "isolate"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                   "div",
                   {
                     style: {
@@ -1130,7 +1449,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 +1458,7 @@ function ReportDialog({
                             alignItems: "center"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                               "div",
                               {
                                 style: {
@@ -1148,7 +1467,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 +1481,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 +1502,7 @@ function ReportDialog({
                                       )
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                     "span",
                                     {
                                       style: {
@@ -1193,11 +1512,29 @@ function ReportDialog({
                                       },
                                       children: step === 1 ? "What's on your mind?" : "Tell us more"
                                     }
+                                  ),
+                                  step === 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                    "span",
+                                    {
+                                      title: "Press this anywhere to open Glitchgrab",
+                                      style: {
+                                        fontSize: "10px",
+                                        fontWeight: 600,
+                                        lineHeight: 1,
+                                        padding: "3px 6px",
+                                        borderRadius: "4px",
+                                        border: `1px solid ${t.inputBorder}`,
+                                        background: t.inputBg,
+                                        color: t.textMuted,
+                                        whiteSpace: "nowrap"
+                                      },
+                                      children: getShortcutLabel()
+                                    }
                                   )
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -1212,7 +1549,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 +1557,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 +1573,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "div",
                         {
                           style: {
@@ -1246,12 +1583,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 +1600,7 @@ function ReportDialog({
                                     }
                                   }
                                 ),
-                                i < 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                i < 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "div",
                                   {
                                     style: {
@@ -1283,7 +1620,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 +1635,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 +1644,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 +1674,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 +1692,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 +1735,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 +1753,7 @@ function ReportDialog({
                             zIndex: 1
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               "span",
                               {
                                 style: {
@@ -1431,7 +1768,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 +1795,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 +1815,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      enhanceText2 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      enhanceText2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                         "button",
                         {
                           type: "button",
@@ -1523,7 +1860,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 +1868,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 +1883,7 @@ function ReportDialog({
                           ]
                         }
                       ),
-                      transcribeAudio2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      transcribeAudio2 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "button",
                         {
                           type: "button",
@@ -1572,7 +1909,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 +1917,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 +1928,7 @@ function ReportDialog({
                                 }
                               )
                             }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                             "svg",
                             {
                               width: "13",
@@ -1600,7 +1937,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 +1949,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 +1964,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 +1978,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 +2001,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 +2009,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 +2020,7 @@ function ReportDialog({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "span",
                             {
                               style: {
@@ -1694,7 +2031,7 @@ function ReportDialog({
                               children: "AI enhanced"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "button",
                             {
                               type: "button",
@@ -1716,7 +2053,7 @@ function ReportDialog({
                               children: "Keep"
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                             "button",
                             {
                               type: "button",
@@ -1742,7 +2079,7 @@ function ReportDialog({
                         ]
                       }
                     ),
-                    voiceError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    voiceError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       "p",
                       {
                         style: {
@@ -1754,8 +2091,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 +2108,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 +2117,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 +2126,7 @@ function ReportDialog({
                                 height: "56px"
                               },
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "img",
                                   {
                                     src,
@@ -1807,7 +2144,7 @@ function ReportDialog({
                                     }
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                   "button",
                                   {
                                     type: "button",
@@ -1833,14 +2170,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 +2189,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 +2242,7 @@ function ReportDialog({
                           ))
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                         "div",
                         {
                           onClick: () => {
@@ -1895,7 +2278,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 +2289,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 +2303,7 @@ function ReportDialog({
                                   opacity: 0.45
                                 },
                                 children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                     "rect",
                                     {
                                       x: "3",
@@ -1932,7 +2315,7 @@ function ReportDialog({
                                       strokeWidth: "1.5"
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                                     "circle",
                                     {
                                       cx: "8.5",
@@ -1942,7 +2325,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 +2338,7 @@ function ReportDialog({
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                               "p",
                               {
                                 style: {
@@ -1967,7 +2350,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 +2365,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 +2378,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 +2402,7 @@ function ReportDialog({
                         s
                       )) })
                     ] }),
-                    validationError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    validationError && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       "p",
                       {
                         style: {
@@ -2030,7 +2413,7 @@ function ReportDialog({
                         children: validationError
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                       "button",
                       {
                         type: "button",
@@ -2055,7 +2438,7 @@ function ReportDialog({
                     )
                   ] })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "div",
                   {
                     style: {
@@ -2063,7 +2446,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 +2456,7 @@ function ReportDialog({
       ),
       document.body
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "input",
       {
         ref: fileInputRef,
@@ -2085,7 +2468,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 +2489,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 +2606,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 +2624,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 +2643,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 +2665,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 +2675,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 +2684,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 +2744,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 +2757,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 +2781,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 +2824,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 +2947,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 +2980,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 +3006,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,16 +3016,16 @@ 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) => {
-        if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "g") {
+        if (matchesShortcut(e)) {
           e.preventDefault();
           openReportDialog();
         }
@@ -2512,7 +3035,11 @@ function GlitchgrabProviderInner({
     } catch (e) {
     }
   }, [openReportDialog]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  const [shortcutLabel, setShortcutLabel] = (0, import_react3.useState)(GLITCHGRAB_SHORTCUT);
+  (0, import_react3.useEffect)(() => {
+    setShortcutLabel(getShortcutLabel());
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     GlitchgrabContext.Provider,
     {
       value: {
@@ -2522,10 +3049,11 @@ function GlitchgrabProviderInner({
         report,
         addBreadcrumb: addBreadcrumb2,
         openReportDialog,
-        enhanceText: enhance
+        enhanceText: enhance,
+        shortcutLabel
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           GlitchgrabErrorBoundary,
           {
             token,
@@ -2537,27 +3065,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 +3100,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 +3109,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 +3117,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 +3152,7 @@ function ReportButton({
       },
       "aria-label": label,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "svg",
           {
             width: "16",
@@ -2632,7 +3160,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 +3176,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 +3213,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 +3250,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);
@@ -2754,6 +3282,8 @@ function useGlitchgrabActions({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  GLITCHGRAB_SHORTCUT,
+  GLITCHGRAB_SHORTCUT_MAC,
   GlitchgrabErrorBoundary,
   GlitchgrabProvider,
   ReportButton,
@@ -2766,7 +3296,9 @@ function useGlitchgrabActions({
   enhanceText,
   fetchGlitchgrabReports,
   getBreadcrumbs,
+  getShortcutLabel,
   initBreadcrumbs,
+  matchesShortcut,
   sanitizeUrl,
   sendReport,
   shouldSkipDuplicate,