@jarve/bug-reporter 0.1.1 → 0.2.0

package/dist/index.js

@@ -66,7 +66,7 @@ function FloatingButton({ isActive, onClick }) {
         "fixed bottom-6 right-6 z-[9999] flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-all duration-200",
         "hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2",
         isActive ? "bg-red-500 text-white animate-pulse focus:ring-red-400" : "bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-400",
-        "bottom-4 right-4 h-10 w-10 md:bottom-6 md:right-6 md:h-12 md:w-12"
+        "bottom-4 right-4 h-11 w-11 md:bottom-6 md:right-6 md:h-12 md:w-12"
       ),
       title: isActive ? "Cancel bug capture" : "Report a bug",
       "aria-label": isActive ? "Cancel bug capture" : "Report a bug",
@@ -134,7 +134,18 @@ function buildSelectorPath(element, stopAt) {
   }
   return parts.join(" > ");
 }
-function collectElementInfo(target, section, event) {
+function isTouchCapable() {
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+}
+function extractCoordinates(e) {
+  return {
+    pageX: e.pageX,
+    pageY: e.pageY,
+    clientX: e.clientX,
+    clientY: e.clientY
+  };
+}
+function collectElementInfo(target, section, coords) {
   const sectionRect = section.getBoundingClientRect();
   const dataAttributes = {};
   for (const attr of Array.from(target.attributes)) {
@@ -150,10 +161,10 @@ function collectElementInfo(target, section, event) {
     ariaLabel: target.getAttribute("aria-label") || null,
     dataAttributes,
     selectorPath: buildSelectorPath(target, section),
-    clickX: event.pageX,
-    clickY: event.pageY,
-    relativeClickX: event.clientX - sectionRect.left,
-    relativeClickY: event.clientY - sectionRect.top
+    clickX: coords.pageX,
+    clickY: coords.pageY,
+    relativeClickX: coords.clientX - sectionRect.left,
+    relativeClickY: coords.clientY - sectionRect.top
   };
 }
 function collectMetadata(sectionElement, siteId, reporterName, reporterEmail, clickedElement) {
@@ -378,6 +389,15 @@ function clearCapturedNetworkErrors() {
 
 // src/capture-overlay.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function dataUrlToBlob(dataUrl) {
+  var _a;
+  const [header, base64] = dataUrl.split(",");
+  const mime = ((_a = header.match(/:(.*?);/)) == null ? void 0 : _a[1]) || "image/png";
+  const bytes = atob(base64);
+  const arr = new Uint8Array(bytes.length);
+  for (let i = 0; i < bytes.length; i++) arr[i] = bytes.charCodeAt(i);
+  return new Blob([arr], { type: mime });
+}
 function CaptureOverlay({
   isActive,
   siteId,
@@ -389,48 +409,30 @@ function CaptureOverlay({
   const [hoveredElement, setHoveredElement] = (0, import_react.useState)(null);
   const [hoveredRect, setHoveredRect] = (0, import_react.useState)(null);
   const [isCapturing3, setIsCapturing] = (0, import_react.useState)(false);
+  const [isTouchMode, setIsTouchMode] = (0, import_react.useState)(false);
+  const [selectedSection, setSelectedSection] = (0, import_react.useState)(null);
+  const [selectedRect, setSelectedRect] = (0, import_react.useState)(null);
+  const [selectedTarget, setSelectedTarget] = (0, import_react.useState)(null);
   const overlayRef = (0, import_react.useRef)(null);
   const hoveredElementRef = (0, import_react.useRef)(null);
   const rafRef = (0, import_react.useRef)(null);
-  const handleMouseMove = (0, import_react.useCallback)(
-    (e) => {
-      if (!isActive || isCapturing3) return;
-      if (rafRef.current) return;
-      rafRef.current = requestAnimationFrame(() => {
-        rafRef.current = null;
-        const target = e.target;
-        if (!(target instanceof HTMLElement)) return;
-        if (target.closest("[data-bug-reporter]")) {
-          setHoveredElement(null);
-          setHoveredRect(null);
-          hoveredElementRef.current = null;
-          return;
-        }
-        const section = getNearestSection(target);
-        setHoveredElement(section);
-        hoveredElementRef.current = section;
-        setHoveredRect(section ? section.getBoundingClientRect() : null);
-      });
-    },
-    [isActive, isCapturing3]
-  );
-  const handleClick = (0, import_react.useCallback)(
-    async (e) => {
-      var _a, _b;
-      if (!isActive || isCapturing3) return;
-      const target = e.target;
-      if (!(target instanceof HTMLElement)) return;
-      if (target.closest("[data-bug-reporter]")) return;
-      e.preventDefault();
-      e.stopPropagation();
-      const section = getNearestSection(target);
-      if (!section) return;
-      const elementInfo = collectElementInfo(target, section, e);
+  const touchCoordsRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (isActive) {
+      setIsTouchMode(isTouchCapable());
+    }
+  }, [isActive]);
+  const captureScreenshot = (0, import_react.useCallback)(
+    async (section, target, coords) => {
+      const elementInfo = collectElementInfo(target, section, coords);
       setIsCapturing(true);
       try {
         setHoveredElement(null);
         setHoveredRect(null);
         hoveredElementRef.current = null;
+        setSelectedSection(null);
+        setSelectedRect(null);
+        setSelectedTarget(null);
         await new Promise((r) => setTimeout(r, 50));
         const MAX_DIMENSION = 2e3;
         const sectionRect = section.getBoundingClientRect();
@@ -440,19 +442,8 @@ function CaptureOverlay({
           pixelRatio,
           skipFonts: true
         });
-        const [header, base64] = dataUrl.split(",");
-        const mime = ((_a = header.match(/:(.*?);/)) == null ? void 0 : _a[1]) || "image/png";
-        const bytes = atob(base64);
-        const arr = new Uint8Array(bytes.length);
-        for (let i = 0; i < bytes.length; i++) arr[i] = bytes.charCodeAt(i);
-        const blob = new Blob([arr], { type: mime });
-        const metadata = collectMetadata(
-          section,
-          siteId,
-          reporterName,
-          reporterEmail,
-          elementInfo
-        );
+        const blob = dataUrlToBlob(dataUrl);
+        const metadata = collectMetadata(section, siteId, reporterName, reporterEmail, elementInfo);
         const consoleErrors = getCapturedErrors();
         const networkErrors = getCapturedNetworkErrors();
         onCapture({ screenshot: blob, metadata, consoleErrors, networkErrors });
@@ -465,31 +456,14 @@ function CaptureOverlay({
             skipFonts: true,
             cacheBust: true
           });
-          const [header, base64] = dataUrl.split(",");
-          const mime = ((_b = header.match(/:(.*?);/)) == null ? void 0 : _b[1]) || "image/png";
-          const bytes = atob(base64);
-          const arr = new Uint8Array(bytes.length);
-          for (let i = 0; i < bytes.length; i++) arr[i] = bytes.charCodeAt(i);
-          const retryBlob = new Blob([arr], { type: mime });
-          const metadata = collectMetadata(
-            section,
-            siteId,
-            reporterName,
-            reporterEmail,
-            elementInfo
-          );
+          const retryBlob = dataUrlToBlob(dataUrl);
+          const metadata = collectMetadata(section, siteId, reporterName, reporterEmail, elementInfo);
           const consoleErrors = getCapturedErrors();
           const networkErrors = getCapturedNetworkErrors();
           onCapture({ screenshot: retryBlob, metadata, consoleErrors, networkErrors });
-        } catch (e2) {
+        } catch (e) {
           console.error("Bug reporter: screenshot capture failed after retry");
-          const metadata = collectMetadata(
-            section,
-            siteId,
-            reporterName,
-            reporterEmail,
-            elementInfo
-          );
+          const metadata = collectMetadata(section, siteId, reporterName, reporterEmail, elementInfo);
           const consoleErrors = getCapturedErrors();
           const networkErrors = getCapturedNetworkErrors();
           onCapture({
@@ -503,7 +477,75 @@ function CaptureOverlay({
         setIsCapturing(false);
       }
     },
-    [isActive, isCapturing3, siteId, reporterName, reporterEmail, onCapture]
+    [siteId, reporterName, reporterEmail, onCapture]
+  );
+  const handleMouseMove = (0, import_react.useCallback)(
+    (e) => {
+      if (!isActive || isCapturing3 || isTouchMode) return;
+      if (rafRef.current) return;
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        const target = e.target;
+        if (!(target instanceof HTMLElement)) return;
+        if (target.closest("[data-bug-reporter]")) {
+          setHoveredElement(null);
+          setHoveredRect(null);
+          hoveredElementRef.current = null;
+          return;
+        }
+        const section = getNearestSection(target);
+        setHoveredElement(section);
+        hoveredElementRef.current = section;
+        setHoveredRect(section ? section.getBoundingClientRect() : null);
+      });
+    },
+    [isActive, isCapturing3, isTouchMode]
+  );
+  const handleClick = (0, import_react.useCallback)(
+    async (e) => {
+      if (!isActive || isCapturing3 || isTouchMode) return;
+      const target = e.target;
+      if (!(target instanceof HTMLElement)) return;
+      if (target.closest("[data-bug-reporter]")) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const section = getNearestSection(target);
+      if (!section) return;
+      await captureScreenshot(section, target, extractCoordinates(e));
+    },
+    [isActive, isCapturing3, isTouchMode, captureScreenshot]
+  );
+  const handleTouchEnd = (0, import_react.useCallback)(
+    (e) => {
+      if (!isActive || isCapturing3) return;
+      const touch = e.changedTouches[0];
+      if (!touch) return;
+      const target = document.elementFromPoint(touch.clientX, touch.clientY);
+      if (!(target instanceof HTMLElement)) return;
+      if (target.closest("[data-bug-reporter]")) return;
+      const section = getNearestSection(target);
+      if (!section) return;
+      setSelectedSection(section);
+      setSelectedRect(section.getBoundingClientRect());
+      setSelectedTarget(target);
+      touchCoordsRef.current = extractCoordinates(touch);
+    },
+    [isActive, isCapturing3]
+  );
+  const handleConfirmCapture = (0, import_react.useCallback)(async () => {
+    if (!selectedSection || !selectedTarget || !touchCoordsRef.current) return;
+    await captureScreenshot(selectedSection, selectedTarget, touchCoordsRef.current);
+  }, [selectedSection, selectedTarget, captureScreenshot]);
+  const handlePointerDown = (0, import_react.useCallback)(
+    (e) => {
+      if (!isActive) return;
+      if (e.pointerType === "touch") {
+        setIsTouchMode(true);
+      } else if (e.pointerType === "mouse") {
+        setIsTouchMode(false);
+      }
+    },
+    [isActive]
   );
   const handleKeyDown = (0, import_react.useCallback)(
     (e) => {
@@ -516,60 +558,121 @@ function CaptureOverlay({
     [isActive, onCancel]
   );
   const handleScroll = (0, import_react.useCallback)(() => {
-    if (!hoveredElementRef.current) return;
-    setHoveredRect(hoveredElementRef.current.getBoundingClientRect());
-  }, []);
+    if (hoveredElementRef.current) {
+      setHoveredRect(hoveredElementRef.current.getBoundingClientRect());
+    }
+    if (selectedSection) {
+      setSelectedRect(selectedSection.getBoundingClientRect());
+    }
+  }, [selectedSection]);
   (0, import_react.useEffect)(() => {
     if (!isActive) {
       setHoveredElement(null);
       setHoveredRect(null);
       hoveredElementRef.current = null;
+      setSelectedSection(null);
+      setSelectedRect(null);
+      setSelectedTarget(null);
+      touchCoordsRef.current = null;
       return;
     }
-    document.addEventListener("mousemove", handleMouseMove, true);
-    document.addEventListener("click", handleClick, true);
+    document.addEventListener("pointerdown", handlePointerDown);
     document.addEventListener("keydown", handleKeyDown);
     window.addEventListener("scroll", handleScroll, { passive: true });
+    if (isTouchMode) {
+      document.addEventListener("touchend", handleTouchEnd, { passive: true });
+    } else {
+      document.addEventListener("mousemove", handleMouseMove, true);
+      document.addEventListener("click", handleClick, true);
+    }
     return () => {
-      document.removeEventListener("mousemove", handleMouseMove, true);
-      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("pointerdown", handlePointerDown);
       document.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("scroll", handleScroll);
+      document.removeEventListener("touchend", handleTouchEnd);
+      document.removeEventListener("mousemove", handleMouseMove, true);
+      document.removeEventListener("click", handleClick, true);
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
     };
-  }, [isActive, handleMouseMove, handleClick, handleKeyDown, handleScroll]);
-  if (!isActive || !hoveredElement || !hoveredRect) return null;
+  }, [isActive, isTouchMode, handleMouseMove, handleClick, handleTouchEnd, handlePointerDown, handleKeyDown, handleScroll]);
+  const highlightRect = isTouchMode ? selectedRect : hoveredRect;
+  const showHighlight = isTouchMode ? !!selectedSection : !!hoveredElement && !!hoveredRect;
+  if (!isActive) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
         "data-bug-reporter": true,
         role: "alert",
         "aria-live": "assertive",
-        className: "fixed top-0 left-0 right-0 z-[10000] bg-indigo-600 text-white text-center py-2 px-4 text-sm font-medium",
-        children: [
+        className: "fixed top-0 left-0 right-0 z-[10000] bg-indigo-600 text-white text-center py-2 px-4 text-sm font-medium flex items-center justify-center gap-3",
+        children: isTouchMode ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Tap the section with the bug" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              onClick: onCancel,
+              className: "px-3 py-1 min-h-[44px] bg-white/20 rounded-md text-sm font-medium",
+              children: "Cancel"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
           "Click on the section with the bug. Press ",
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("kbd", { className: "px-1.5 py-0.5 bg-indigo-800 rounded text-xs mx-1", children: "Esc" }),
           " to cancel."
-        ]
+        ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    showHighlight && highlightRect && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
         ref: overlayRef,
         "data-bug-reporter": true,
         className: "fixed pointer-events-none z-[9998] border-2 border-indigo-500 rounded-sm transition-all duration-150 ease-out",
         style: {
-          top: hoveredRect.top - 2,
-          left: hoveredRect.left - 2,
-          width: hoveredRect.width + 4,
-          height: hoveredRect.height + 4,
+          top: highlightRect.top - 2,
+          left: highlightRect.left - 2,
+          width: highlightRect.width + 4,
+          height: highlightRect.height + 4,
           backgroundColor: "rgba(99, 102, 241, 0.08)"
         }
       }
     ),
-    isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `* { cursor: crosshair !important; }` })
+    isTouchMode && selectedSection && !isCapturing3 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        "data-bug-reporter": true,
+        className: "fixed bottom-0 left-0 right-0 z-[10000] bg-white border-t border-gray-200 shadow-lg",
+        style: { paddingBottom: "env(safe-area-inset-bottom, 0px)" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between px-4 py-3 gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm font-medium text-gray-900 truncate", children: "Capture this section?" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2 shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                onClick: () => {
+                  setSelectedSection(null);
+                  setSelectedRect(null);
+                  setSelectedTarget(null);
+                  touchCoordsRef.current = null;
+                },
+                className: "px-4 min-h-[44px] rounded-md border border-gray-300 text-sm font-medium text-gray-700",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                onClick: handleConfirmCapture,
+                className: "px-4 min-h-[44px] rounded-md bg-indigo-600 text-white text-sm font-medium",
+                children: "Capture"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    !isTouchMode && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `* { cursor: crosshair !important; }` })
   ] });
 }
 
@@ -814,7 +917,7 @@ function ReportModal({
     onClose();
   }
   function handleKeyDown(e) {
-    if (e.key === "Enter" && !e.shiftKey) {
+    if (e.key === "Enter" && !e.shiftKey && !isTouchCapable()) {
       e.preventDefault();
       sendMessage();
     }