@jarve/bug-reporter 0.3.0 → 0.3.2

package/dist/index.mjs

@@ -20,9 +20,10 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/bug-reporter.tsx
-import { useState as useState3, useEffect as useEffect3, useCallback as useCallback3 } from "react";
+import { useState as useState4, useEffect as useEffect4, useCallback as useCallback3 } from "react";
 
 // src/floating-button.tsx
+import { useState, useEffect, useRef } from "react";
 import { Bug } from "lucide-react";
 
 // src/cn.ts
@@ -33,32 +34,98 @@ function cn(...inputs) {
 }
 
 // src/floating-button.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+var STACK_OFFSET = 56;
 function FloatingButton({ isActive, onClick, position = "right" }) {
-  const sideClasses = position === "left" ? "left-4 md:left-6" : "right-4 md:right-6";
-  return /* @__PURE__ */ jsx(
-    "button",
+  const [hovered, setHovered] = useState(false);
+  const [stackOffset, setStackOffset] = useState(0);
+  const ref = useRef(null);
+  const isLeft = position === "left";
+  const sideClasses = isLeft ? "left-4 md:left-6" : "right-4 md:right-6";
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    let rafId;
+    const recalculate = () => {
+      const widgets = Array.from(
+        document.querySelectorAll(`[data-jarve-widget][data-jarve-position="${position}"]`)
+      );
+      widgets.sort(
+        (a, b) => (a.getAttribute("data-jarve-widget") || "").localeCompare(
+          b.getAttribute("data-jarve-widget") || ""
+        )
+      );
+      const index = widgets.indexOf(el);
+      setStackOffset(index > 0 ? index * STACK_OFFSET : 0);
+    };
+    recalculate();
+    const observer = new MutationObserver(() => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(recalculate);
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(rafId);
+    };
+  }, [position]);
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      onClick,
-      className: cn(
-        "fixed z-[9999] flex items-center justify-center rounded-full shadow-lg transition-all duration-200",
-        "hover:scale-110 focus:ring-2 focus:ring-offset-2 focus:outline-none",
-        // size + vertical position
-        "bottom-4 h-11 w-11 md:bottom-6 md:h-12 md:w-12",
-        // horizontal side
-        sideClasses,
-        // active vs idle colors
-        isActive ? "animate-pulse bg-red-500 text-white focus:ring-red-400" : "bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-400"
-      ),
-      title: isActive ? "Cancel bug capture" : "Report a bug",
-      "aria-label": isActive ? "Cancel bug capture" : "Report a bug",
-      children: /* @__PURE__ */ jsx(Bug, { className: "h-4 w-4 md:h-5 md:w-5" })
+      ref,
+      "data-jarve-widget": "bug-reporter",
+      "data-jarve-position": position,
+      className: cn("fixed z-[9999]", "bottom-4 md:bottom-6", sideClasses),
+      style: stackOffset > 0 ? { transform: `translateY(-${stackOffset}px)` } : void 0,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "pointer-events-none absolute bottom-full mb-2 w-max max-w-[200px] rounded-lg bg-gray-900 px-3 py-2 text-xs leading-relaxed text-white shadow-lg transition-all duration-200",
+              isLeft ? "left-0" : "right-0",
+              hovered && !isActive ? "translate-y-0 opacity-100" : "translate-y-1 opacity-0"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Report a bug" }),
+              /* @__PURE__ */ jsx("br", {}),
+              "Click to screenshot an issue and chat with AI to submit a bug report.",
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute top-full h-0 w-0 border-x-[6px] border-t-[6px] border-x-transparent border-t-gray-900",
+                    isLeft ? "left-4" : "right-4"
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick,
+            className: cn(
+              "flex items-center justify-center rounded-full shadow-lg transition-all duration-200",
+              "hover:scale-110 focus:ring-2 focus:ring-offset-2 focus:outline-none",
+              "h-11 w-11 md:h-12 md:w-12",
+              isActive ? "animate-pulse bg-red-500 text-white focus:ring-red-400" : "bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-400"
+            ),
+            title: isActive ? "Cancel bug capture" : "Report a bug",
+            "aria-label": isActive ? "Cancel bug capture" : "Report a bug",
+            children: /* @__PURE__ */ jsx(Bug, { className: "h-4 w-4 md:h-5 md:w-5" })
+          }
+        )
+      ]
     }
   );
 }
 
 // src/capture-overlay.tsx
-import { useEffect, useState, useCallback, useRef } from "react";
+import { useEffect as useEffect2, useState as useState2, useCallback, useRef as useRef2 } from "react";
 import { toPng } from "html-to-image";
 
 // src/utils.ts
@@ -369,7 +436,7 @@ function clearCapturedNetworkErrors() {
 }
 
 // src/capture-overlay.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function dataUrlToBlob(dataUrl) {
   var _a;
   const [header, base64] = dataUrl.split(",");
@@ -387,18 +454,18 @@ function CaptureOverlay({
   onCapture,
   onCancel
 }) {
-  const [hoveredElement, setHoveredElement] = useState(null);
-  const [hoveredRect, setHoveredRect] = useState(null);
-  const [isCapturing3, setIsCapturing] = useState(false);
-  const [isTouchMode, setIsTouchMode] = useState(false);
-  const [selectedSection, setSelectedSection] = useState(null);
-  const [selectedRect, setSelectedRect] = useState(null);
-  const [selectedTarget, setSelectedTarget] = useState(null);
-  const overlayRef = useRef(null);
-  const hoveredElementRef = useRef(null);
-  const rafRef = useRef(null);
-  const touchCoordsRef = useRef(null);
-  useEffect(() => {
+  const [hoveredElement, setHoveredElement] = useState2(null);
+  const [hoveredRect, setHoveredRect] = useState2(null);
+  const [isCapturing3, setIsCapturing] = useState2(false);
+  const [isTouchMode, setIsTouchMode] = useState2(false);
+  const [selectedSection, setSelectedSection] = useState2(null);
+  const [selectedRect, setSelectedRect] = useState2(null);
+  const [selectedTarget, setSelectedTarget] = useState2(null);
+  const overlayRef = useRef2(null);
+  const hoveredElementRef = useRef2(null);
+  const rafRef = useRef2(null);
+  const touchCoordsRef = useRef2(null);
+  useEffect2(() => {
     if (isActive) {
       setIsTouchMode(isTouchCapable());
     }
@@ -567,7 +634,7 @@ function CaptureOverlay({
       setSelectedRect(selectedSection.getBoundingClientRect());
     }
   }, [selectedSection]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isActive) {
       setHoveredElement(null);
       setHoveredRect(null);
@@ -609,7 +676,7 @@ function CaptureOverlay({
   const highlightRect = isTouchMode ? selectedRect : hoveredRect;
   const showHighlight = isTouchMode ? !!selectedSection : !!hoveredElement && !!hoveredRect;
   if (!isActive) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2(
       "div",
       {
@@ -617,7 +684,7 @@ function CaptureOverlay({
         role: "alert",
         "aria-live": "assertive",
         className: "fixed top-0 right-0 left-0 z-[10000] flex items-center justify-center gap-3 bg-indigo-600 px-4 py-2 text-center text-sm font-medium text-white",
-        children: isTouchMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        children: isTouchMode ? /* @__PURE__ */ jsxs2(Fragment, { children: [
           /* @__PURE__ */ jsx2("span", { children: "Tap the section with the bug" }),
           /* @__PURE__ */ jsx2(
             "button",
@@ -627,7 +694,7 @@ function CaptureOverlay({
               children: "Cancel"
             }
           )
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
           "Click on the section with the bug. Press",
           " ",
           /* @__PURE__ */ jsx2("kbd", { className: "mx-1 rounded bg-indigo-800 px-1.5 py-0.5 text-xs", children: "Esc" }),
@@ -656,9 +723,9 @@ function CaptureOverlay({
         "data-bug-reporter": true,
         className: "fixed right-0 bottom-0 left-0 z-[10000] border-t border-gray-200 bg-white shadow-lg",
         style: { paddingBottom: "env(safe-area-inset-bottom, 0px)" },
-        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-4 py-3", children: [
+        children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3 px-4 py-3", children: [
           /* @__PURE__ */ jsx2("span", { className: "truncate text-sm font-medium text-gray-900", children: "Capture this section?" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 gap-2", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 gap-2", children: [
             /* @__PURE__ */ jsx2(
               "button",
               {
@@ -689,9 +756,9 @@ function CaptureOverlay({
 }
 
 // src/report-modal.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2, useCallback as useCallback2, useMemo } from "react";
+import { useState as useState3, useRef as useRef3, useEffect as useEffect3, useCallback as useCallback2, useMemo } from "react";
 import { X, Send, Loader2, CheckCircle2 } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function ReportModal({
   isOpen,
   captureResult,
@@ -700,16 +767,16 @@ function ReportModal({
   user,
   onClose
 }) {
-  const [messages, setMessages] = useState2([]);
-  const [input, setInput] = useState2("");
-  const [isLoading, setIsLoading] = useState2(false);
-  const [modalState, setModalState] = useState2("chatting");
-  const [reportId, setReportId] = useState2(null);
-  const [screenshotUrl, setScreenshotUrl] = useState2(null);
-  const [errorMessage, setErrorMessage] = useState2(null);
-  const chatEndRef = useRef2(null);
-  const inputRef = useRef2(null);
-  const hasInitRef = useRef2(false);
+  const [messages, setMessages] = useState3([]);
+  const [input, setInput] = useState3("");
+  const [isLoading, setIsLoading] = useState3(false);
+  const [modalState, setModalState] = useState3("chatting");
+  const [reportId, setReportId] = useState3(null);
+  const [screenshotUrl, setScreenshotUrl] = useState3(null);
+  const [errorMessage, setErrorMessage] = useState3(null);
+  const chatEndRef = useRef3(null);
+  const inputRef = useRef3(null);
+  const hasInitRef = useRef3(false);
   const apiHeaders = useMemo(
     () => ({
       "Content-Type": "application/json",
@@ -717,7 +784,7 @@ function ReportModal({
     }),
     [apiConfig.apiKey]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     if ((captureResult == null ? void 0 : captureResult.screenshot) && captureResult.screenshot.size > 0) {
       const url = URL.createObjectURL(captureResult.screenshot);
       setScreenshotUrl((prev) => {
@@ -775,17 +842,17 @@ function ReportModal({
       setIsLoading(false);
     }
   }, [captureResult, apiConfig.apiUrl, apiHeaders]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (isOpen && captureResult && !hasInitRef.current) {
       hasInitRef.current = true;
       sendInitialMessage();
     }
   }, [isOpen, captureResult, sendInitialMessage]);
-  useEffect2(() => {
+  useEffect3(() => {
     var _a;
     (_a = chatEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  useEffect2(() => {
+  useEffect3(() => {
     var _a;
     if (isOpen && !isLoading) {
       (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -939,7 +1006,7 @@ function ReportModal({
       onClick: (e) => {
         if (e.target === e.currentTarget) handleClose();
       },
-      children: /* @__PURE__ */ jsxs2(
+      children: /* @__PURE__ */ jsxs3(
         "div",
         {
           className: cn(
@@ -949,8 +1016,8 @@ function ReportModal({
             "min-[769px]:max-h-[85vh]"
           ),
           children: [
-            /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between border-b border-gray-200 bg-gray-50/30 px-4 py-3 dark:border-gray-800 dark:bg-gray-900/30", children: [
-              /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between border-b border-gray-200 bg-gray-50/30 px-4 py-3 dark:border-gray-800 dark:bg-gray-900/30", children: [
+              /* @__PURE__ */ jsxs3("div", { children: [
                 /* @__PURE__ */ jsx3("h2", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: "Bug Report" }),
                 /* @__PURE__ */ jsx3("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: siteId })
               ] }),
@@ -972,10 +1039,10 @@ function ReportModal({
                 className: "max-h-40 w-full rounded-md border border-gray-200 object-contain dark:border-gray-700"
               }
             ) }),
-            /* @__PURE__ */ jsx3("div", { className: "min-h-0 flex-1 space-y-3 overflow-y-auto px-4 py-3", children: modalState === "submitted" ? /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+            /* @__PURE__ */ jsx3("div", { className: "min-h-0 flex-1 space-y-3 overflow-y-auto px-4 py-3", children: modalState === "submitted" ? /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
               /* @__PURE__ */ jsx3(CheckCircle2, { className: "mb-3 h-12 w-12 text-green-500" }),
               /* @__PURE__ */ jsx3("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: "Report Submitted" }),
-              /* @__PURE__ */ jsxs2("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: [
+              /* @__PURE__ */ jsxs3("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: [
                 "Reference:",
                 " ",
                 /* @__PURE__ */ jsx3("code", { className: "rounded bg-gray-100 px-1.5 py-0.5 text-xs dark:bg-gray-800", children: reportId == null ? void 0 : reportId.slice(0, 8) })
@@ -989,7 +1056,7 @@ function ReportModal({
                   children: "Done"
                 }
               )
-            ] }) : modalState === "error" ? /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+            ] }) : modalState === "error" ? /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
               /* @__PURE__ */ jsx3(X, { className: "mb-3 h-12 w-12 text-red-500" }),
               /* @__PURE__ */ jsx3("h3", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: "Submission Failed" }),
               /* @__PURE__ */ jsx3("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: errorMessage || "Something went wrong. Please try again." }),
@@ -1001,10 +1068,10 @@ function ReportModal({
                   children: "Try Again"
                 }
               )
-            ] }) : modalState === "submitting" ? /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-8", children: [
+            ] }) : modalState === "submitting" ? /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center justify-center py-8", children: [
               /* @__PURE__ */ jsx3(Loader2, { className: "mb-3 h-8 w-8 animate-spin text-indigo-500" }),
               /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Submitting your report..." })
-            ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
               (captureResult == null ? void 0 : captureResult.screenshot.size) === 0 && /* @__PURE__ */ jsx3("p", { className: "text-xs text-amber-600", children: "Screenshot could not be captured. Please describe the visual issue in detail." }),
               messages.map((msg, i) => /* @__PURE__ */ jsx3(
                 "div",
@@ -1017,13 +1084,13 @@ function ReportModal({
                 },
                 i
               )),
-              isLoading && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 rounded-lg bg-gray-100/50 p-3 dark:bg-gray-800/50", children: [
+              isLoading && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 rounded-lg bg-gray-100/50 p-3 dark:bg-gray-800/50", children: [
                 /* @__PURE__ */ jsx3(Loader2, { className: "h-3.5 w-3.5 animate-spin text-gray-500" }),
                 /* @__PURE__ */ jsx3("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Thinking..." })
               ] }),
               /* @__PURE__ */ jsx3("div", { ref: chatEndRef })
             ] }) }),
-            modalState === "chatting" && /* @__PURE__ */ jsx3("div", { className: "border-t border-gray-200 px-4 py-3 dark:border-gray-800", children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2", children: [
+            modalState === "chatting" && /* @__PURE__ */ jsx3("div", { className: "border-t border-gray-200 px-4 py-3 dark:border-gray-800", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
               /* @__PURE__ */ jsx3(
                 "textarea",
                 {
@@ -1037,8 +1104,8 @@ function ReportModal({
                   disabled: isLoading
                 }
               ),
-              /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2", children: [
-                captureResult && (captureResult.consoleErrors.length > 0 || captureResult.networkErrors.length > 0) && /* @__PURE__ */ jsxs2("p", { className: "flex-1 text-xs text-amber-600", children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+                captureResult && (captureResult.consoleErrors.length > 0 || captureResult.networkErrors.length > 0) && /* @__PURE__ */ jsxs3("p", { className: "flex-1 text-xs text-amber-600", children: [
                   [
                     captureResult.consoleErrors.length > 0 ? `${captureResult.consoleErrors.length} console error${captureResult.consoleErrors.length !== 1 ? "s" : ""}` : null,
                     captureResult.networkErrors.length > 0 ? `${captureResult.networkErrors.length} failed request${captureResult.networkErrors.length !== 1 ? "s" : ""}` : null
@@ -1046,8 +1113,8 @@ function ReportModal({
                   " ",
                   "captured \u2014 these will be included in the report."
                 ] }),
-                /* @__PURE__ */ jsxs2("div", { className: "flex justify-end gap-2", children: [
-                  /* @__PURE__ */ jsxs2(
+                /* @__PURE__ */ jsxs3("div", { className: "flex justify-end gap-2", children: [
+                  /* @__PURE__ */ jsxs3(
                     "button",
                     {
                       onClick: sendMessage,
@@ -1081,7 +1148,7 @@ function ReportModal({
 }
 
 // src/bug-reporter.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function JarveBugReporter({
   apiUrl,
   apiKey,
@@ -1090,10 +1157,10 @@ function JarveBugReporter({
   children
 }) {
   const safeApiKey = apiKey || "";
-  const [captureMode, setCaptureMode] = useState3(false);
-  const [captureResult, setCaptureResult] = useState3(null);
-  const [showModal, setShowModal] = useState3(false);
-  useEffect3(() => {
+  const [captureMode, setCaptureMode] = useState4(false);
+  const [captureResult, setCaptureResult] = useState4(null);
+  const [showModal, setShowModal] = useState4(false);
+  useEffect4(() => {
     startCapturing();
     startNetworkCapture();
     return () => {
@@ -1121,7 +1188,7 @@ function JarveBugReporter({
   const siteId = safeApiKey.startsWith("brk_") ? safeApiKey.slice(4, 12) : "external";
   const reporterName = (user == null ? void 0 : user.name) || "Anonymous";
   const reporterEmail = (user == null ? void 0 : user.email) || "unknown@external";
-  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     children,
     /* @__PURE__ */ jsx4(
       FloatingButton,