@jarve/bug-reporter 0.3.0 → 0.3.2

package/dist/index.d.mts

@@ -24,4 +24,4 @@ interface JarveBugReporterProps {
 }
 declare function JarveBugReporter({ apiUrl, apiKey, user, buttonPosition, children, }: JarveBugReporterProps): react_jsx_runtime.JSX.Element;
 
-export { type BugReporterApiConfig, type BugReporterUser, JarveBugReporter };
+export { type BugReporterApiConfig, type BugReporterUser, type FloatingButtonPosition, JarveBugReporter };

package/dist/index.d.ts

@@ -24,4 +24,4 @@ interface JarveBugReporterProps {
 }
 declare function JarveBugReporter({ apiUrl, apiKey, user, buttonPosition, children, }: JarveBugReporterProps): react_jsx_runtime.JSX.Element;
 
-export { type BugReporterApiConfig, type BugReporterUser, JarveBugReporter };
+export { type BugReporterApiConfig, type BugReporterUser, type FloatingButtonPosition, JarveBugReporter };

package/dist/index.js

@@ -43,9 +43,10 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/bug-reporter.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/floating-button.tsx
+var import_react = require("react");
 var import_lucide_react = require("lucide-react");
 
 // src/cn.ts
@@ -57,31 +58,97 @@ function cn(...inputs) {
 
 // src/floating-button.tsx
 var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)(
-    "button",
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const [stackOffset, setStackOffset] = (0, import_react.useState)(0);
+  const ref = (0, import_react.useRef)(null);
+  const isLeft = position === "left";
+  const sideClasses = isLeft ? "left-4 md:left-6" : "right-4 md:right-6";
+  (0, import_react.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold", children: "Report a bug" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
+              "Click to screenshot an issue and chat with AI to submit a bug report.",
+              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Bug, { className: "h-4 w-4 md:h-5 md:w-5" })
+          }
+        )
+      ]
     }
   );
 }
 
 // src/capture-overlay.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_html_to_image = require("html-to-image");
 
 // src/utils.ts
@@ -410,23 +477,23 @@ function CaptureOverlay({
   onCapture,
   onCancel
 }) {
-  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 touchCoordsRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
+  const [hoveredElement, setHoveredElement] = (0, import_react2.useState)(null);
+  const [hoveredRect, setHoveredRect] = (0, import_react2.useState)(null);
+  const [isCapturing3, setIsCapturing] = (0, import_react2.useState)(false);
+  const [isTouchMode, setIsTouchMode] = (0, import_react2.useState)(false);
+  const [selectedSection, setSelectedSection] = (0, import_react2.useState)(null);
+  const [selectedRect, setSelectedRect] = (0, import_react2.useState)(null);
+  const [selectedTarget, setSelectedTarget] = (0, import_react2.useState)(null);
+  const overlayRef = (0, import_react2.useRef)(null);
+  const hoveredElementRef = (0, import_react2.useRef)(null);
+  const rafRef = (0, import_react2.useRef)(null);
+  const touchCoordsRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
     if (isActive) {
       setIsTouchMode(isTouchCapable());
     }
   }, [isActive]);
-  const captureScreenshot = (0, import_react.useCallback)(
+  const captureScreenshot = (0, import_react2.useCallback)(
     async (section, target, coords) => {
       const elementInfo = collectElementInfo(target, section, coords);
       setIsCapturing(true);
@@ -504,7 +571,7 @@ function CaptureOverlay({
     },
     [siteId, reporterName, reporterEmail, onCapture]
   );
-  const handleMouseMove = (0, import_react.useCallback)(
+  const handleMouseMove = (0, import_react2.useCallback)(
     (e) => {
       if (!isActive || isCapturing3 || isTouchMode) return;
       if (rafRef.current) return;
@@ -526,7 +593,7 @@ function CaptureOverlay({
     },
     [isActive, isCapturing3, isTouchMode]
   );
-  const handleClick = (0, import_react.useCallback)(
+  const handleClick = (0, import_react2.useCallback)(
     async (e) => {
       if (!isActive || isCapturing3 || isTouchMode) return;
       const target = e.target;
@@ -540,7 +607,7 @@ function CaptureOverlay({
     },
     [isActive, isCapturing3, isTouchMode, captureScreenshot]
   );
-  const handleTouchEnd = (0, import_react.useCallback)(
+  const handleTouchEnd = (0, import_react2.useCallback)(
     (e) => {
       if (!isActive || isCapturing3) return;
       const touch = e.changedTouches[0];
@@ -557,11 +624,11 @@ function CaptureOverlay({
     },
     [isActive, isCapturing3]
   );
-  const handleConfirmCapture = (0, import_react.useCallback)(async () => {
+  const handleConfirmCapture = (0, import_react2.useCallback)(async () => {
     if (!selectedSection || !selectedTarget || !touchCoordsRef.current) return;
     await captureScreenshot(selectedSection, selectedTarget, touchCoordsRef.current);
   }, [selectedSection, selectedTarget, captureScreenshot]);
-  const handlePointerDown = (0, import_react.useCallback)(
+  const handlePointerDown = (0, import_react2.useCallback)(
     (e) => {
       if (!isActive) return;
       if (e.pointerType === "touch") {
@@ -572,7 +639,7 @@ function CaptureOverlay({
     },
     [isActive]
   );
-  const handleKeyDown = (0, import_react.useCallback)(
+  const handleKeyDown = (0, import_react2.useCallback)(
     (e) => {
       if (e.key === "Escape" && isActive) {
         e.preventDefault();
@@ -582,7 +649,7 @@ function CaptureOverlay({
     },
     [isActive, onCancel]
   );
-  const handleScroll = (0, import_react.useCallback)(() => {
+  const handleScroll = (0, import_react2.useCallback)(() => {
     if (hoveredElementRef.current) {
       setHoveredRect(hoveredElementRef.current.getBoundingClientRect());
     }
@@ -590,7 +657,7 @@ function CaptureOverlay({
       setSelectedRect(selectedSection.getBoundingClientRect());
     }
   }, [selectedSection]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!isActive) {
       setHoveredElement(null);
       setHoveredRect(null);
@@ -712,7 +779,7 @@ function CaptureOverlay({
 }
 
 // src/report-modal.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function ReportModal({
@@ -723,24 +790,24 @@ function ReportModal({
   user,
   onClose
 }) {
-  const [messages, setMessages] = (0, import_react2.useState)([]);
-  const [input, setInput] = (0, import_react2.useState)("");
-  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
-  const [modalState, setModalState] = (0, import_react2.useState)("chatting");
-  const [reportId, setReportId] = (0, import_react2.useState)(null);
-  const [screenshotUrl, setScreenshotUrl] = (0, import_react2.useState)(null);
-  const [errorMessage, setErrorMessage] = (0, import_react2.useState)(null);
-  const chatEndRef = (0, import_react2.useRef)(null);
-  const inputRef = (0, import_react2.useRef)(null);
-  const hasInitRef = (0, import_react2.useRef)(false);
-  const apiHeaders = (0, import_react2.useMemo)(
+  const [messages, setMessages] = (0, import_react3.useState)([]);
+  const [input, setInput] = (0, import_react3.useState)("");
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
+  const [modalState, setModalState] = (0, import_react3.useState)("chatting");
+  const [reportId, setReportId] = (0, import_react3.useState)(null);
+  const [screenshotUrl, setScreenshotUrl] = (0, import_react3.useState)(null);
+  const [errorMessage, setErrorMessage] = (0, import_react3.useState)(null);
+  const chatEndRef = (0, import_react3.useRef)(null);
+  const inputRef = (0, import_react3.useRef)(null);
+  const hasInitRef = (0, import_react3.useRef)(false);
+  const apiHeaders = (0, import_react3.useMemo)(
     () => ({
       "Content-Type": "application/json",
       "X-Bug-Reporter-Key": apiConfig.apiKey
     }),
     [apiConfig.apiKey]
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if ((captureResult == null ? void 0 : captureResult.screenshot) && captureResult.screenshot.size > 0) {
       const url = URL.createObjectURL(captureResult.screenshot);
       setScreenshotUrl((prev) => {
@@ -757,7 +824,7 @@ function ReportModal({
       return null;
     });
   }, [captureResult]);
-  const sendInitialMessage = (0, import_react2.useCallback)(async () => {
+  const sendInitialMessage = (0, import_react3.useCallback)(async () => {
     if (!captureResult) return;
     setIsLoading(true);
     try {
@@ -798,23 +865,23 @@ function ReportModal({
       setIsLoading(false);
     }
   }, [captureResult, apiConfig.apiUrl, apiHeaders]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (isOpen && captureResult && !hasInitRef.current) {
       hasInitRef.current = true;
       sendInitialMessage();
     }
   }, [isOpen, captureResult, sendInitialMessage]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     var _a;
     (_a = chatEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     var _a;
     if (isOpen && !isLoading) {
       (_a = inputRef.current) == null ? void 0 : _a.focus();
     }
   }, [isOpen, isLoading, messages]);
-  const submitReport = (0, import_react2.useCallback)(
+  const submitReport = (0, import_react3.useCallback)(
     async (conversation, structuredReport) => {
       if (!captureResult || modalState !== "chatting") return;
       setModalState("submitting");
@@ -878,7 +945,7 @@ function ReportModal({
     },
     [captureResult, apiConfig.apiUrl, apiHeaders, modalState]
   );
-  const handleManualSubmit = (0, import_react2.useCallback)(() => {
+  const handleManualSubmit = (0, import_react3.useCallback)(() => {
     submitReport(messages);
   }, [submitReport, messages]);
   async function sendMessage() {
@@ -1113,10 +1180,10 @@ function JarveBugReporter({
   children
 }) {
   const safeApiKey = apiKey || "";
-  const [captureMode, setCaptureMode] = (0, import_react3.useState)(false);
-  const [captureResult, setCaptureResult] = (0, import_react3.useState)(null);
-  const [showModal, setShowModal] = (0, import_react3.useState)(false);
-  (0, import_react3.useEffect)(() => {
+  const [captureMode, setCaptureMode] = (0, import_react4.useState)(false);
+  const [captureResult, setCaptureResult] = (0, import_react4.useState)(null);
+  const [showModal, setShowModal] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
     startCapturing();
     startNetworkCapture();
     return () => {
@@ -1124,18 +1191,18 @@ function JarveBugReporter({
       stopNetworkCapture();
     };
   }, []);
-  const toggleCaptureMode = (0, import_react3.useCallback)(() => {
+  const toggleCaptureMode = (0, import_react4.useCallback)(() => {
     setCaptureMode((prev) => !prev);
   }, []);
-  const handleCapture = (0, import_react3.useCallback)((result) => {
+  const handleCapture = (0, import_react4.useCallback)((result) => {
     setCaptureResult(result);
     setCaptureMode(false);
     setShowModal(true);
   }, []);
-  const handleCancelCapture = (0, import_react3.useCallback)(() => {
+  const handleCancelCapture = (0, import_react4.useCallback)(() => {
     setCaptureMode(false);
   }, []);
-  const handleCloseModal = (0, import_react3.useCallback)(() => {
+  const handleCloseModal = (0, import_react4.useCallback)(() => {
     setShowModal(false);
     setCaptureResult(null);
     clearCapturedErrors();