@jarve/bug-reporter 0.2.0 → 0.3.1

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 useEffect3, useCallback as useCallback3 } from "react";
 
 // src/floating-button.tsx
+import { useState } from "react";
 import { Bug } from "lucide-react";
 
 // src/cn.ts
@@ -33,27 +34,64 @@ function cn(...inputs) {
 }
 
 // src/floating-button.tsx
-import { jsx } from "react/jsx-runtime";
-function FloatingButton({ isActive, onClick }) {
-  return /* @__PURE__ */ jsx(
-    "button",
+import { jsx, jsxs } from "react/jsx-runtime";
+function FloatingButton({ isActive, onClick, position = "right" }) {
+  const [hovered, setHovered] = useState(false);
+  const isLeft = position === "left";
+  const sideClasses = isLeft ? "left-4 md:left-6" : "right-4 md:right-6";
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      onClick,
-      className: cn(
-        "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-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",
-      children: /* @__PURE__ */ jsx(Bug, { className: "h-4 w-4 md:h-5 md:w-5" })
+      className: cn("fixed z-[9999]", "bottom-4 md:bottom-6", sideClasses),
+      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, useState as useState2, useCallback, useRef } from "react";
 import { toPng } from "html-to-image";
 
 // src/utils.ts
@@ -173,8 +211,7 @@ var errorListener = null;
 var rejectionListener = null;
 function startCapturing() {
   if (isCapturing) return;
-  if (console.error.__bugReporterPatched)
-    return;
+  if (console.error.__bugReporterPatched) return;
   isCapturing = true;
   capturedErrors = [];
   originalConsoleError = console.error;
@@ -365,7 +402,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(",");
@@ -383,13 +420,13 @@ 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 [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 = useRef(null);
   const hoveredElementRef = useRef(null);
   const rafRef = useRef(null);
@@ -420,12 +457,21 @@ function CaptureOverlay({
           skipFonts: true
         });
         const blob = dataUrlToBlob(dataUrl);
-        const metadata = collectMetadata(section, siteId, reporterName, reporterEmail, elementInfo);
+        const metadata = collectMetadata(
+          section,
+          siteId,
+          reporterName,
+          reporterEmail,
+          elementInfo
+        );
         const consoleErrors = getCapturedErrors();
         const networkErrors = getCapturedNetworkErrors();
         onCapture({ screenshot: blob, metadata, consoleErrors, networkErrors });
       } catch (err) {
-        console.warn("Bug reporter: first capture attempt failed, retrying with simpler settings", err);
+        console.warn(
+          "Bug reporter: first capture attempt failed, retrying with simpler settings",
+          err
+        );
         try {
           const dataUrl = await toPng(section, {
             quality: 0.6,
@@ -434,13 +480,25 @@ function CaptureOverlay({
             cacheBust: true
           });
           const retryBlob = dataUrlToBlob(dataUrl);
-          const metadata = collectMetadata(section, siteId, reporterName, reporterEmail, elementInfo);
+          const metadata = collectMetadata(
+            section,
+            siteId,
+            reporterName,
+            reporterEmail,
+            elementInfo
+          );
           const consoleErrors = getCapturedErrors();
           const networkErrors = getCapturedNetworkErrors();
           onCapture({ screenshot: retryBlob, metadata, consoleErrors, networkErrors });
         } 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({
@@ -571,31 +629,41 @@ function CaptureOverlay({
       document.removeEventListener("click", handleClick, true);
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
     };
-  }, [isActive, isTouchMode, handleMouseMove, handleClick, handleTouchEnd, handlePointerDown, handleKeyDown, handleScroll]);
+  }, [
+    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__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2(
       "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 flex items-center justify-center gap-3",
-        children: isTouchMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        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__ */ jsxs2(Fragment, { children: [
           /* @__PURE__ */ jsx2("span", { children: "Tap the section with the bug" }),
           /* @__PURE__ */ jsx2(
             "button",
             {
               onClick: onCancel,
-              className: "px-3 py-1 min-h-[44px] bg-white/20 rounded-md text-sm font-medium",
+              className: "min-h-[44px] rounded-md bg-white/20 px-3 py-1 text-sm font-medium",
               children: "Cancel"
             }
           )
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          "Click on the section with the bug. Press ",
-          /* @__PURE__ */ jsx2("kbd", { className: "px-1.5 py-0.5 bg-indigo-800 rounded text-xs mx-1", children: "Esc" }),
+        ] }) : /* @__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" }),
           " to cancel."
         ] })
       }
@@ -605,7 +673,7 @@ function CaptureOverlay({
       {
         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",
+        className: "pointer-events-none fixed z-[9998] rounded-sm border-2 border-indigo-500 transition-all duration-150 ease-out",
         style: {
           top: highlightRect.top - 2,
           left: highlightRect.left - 2,
@@ -619,11 +687,11 @@ function CaptureOverlay({
       "div",
       {
         "data-bug-reporter": true,
-        className: "fixed bottom-0 left-0 right-0 z-[10000] bg-white border-t border-gray-200 shadow-lg",
+        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 px-4 py-3 gap-3", children: [
-          /* @__PURE__ */ jsx2("span", { className: "text-sm font-medium text-gray-900 truncate", children: "Capture this section?" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-2 shrink-0", 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__ */ jsxs2("div", { className: "flex shrink-0 gap-2", children: [
             /* @__PURE__ */ jsx2(
               "button",
               {
@@ -633,7 +701,7 @@ function CaptureOverlay({
                   setSelectedTarget(null);
                   touchCoordsRef.current = null;
                 },
-                className: "px-4 min-h-[44px] rounded-md border border-gray-300 text-sm font-medium text-gray-700",
+                className: "min-h-[44px] rounded-md border border-gray-300 px-4 text-sm font-medium text-gray-700",
                 children: "Cancel"
               }
             ),
@@ -641,7 +709,7 @@ function CaptureOverlay({
               "button",
               {
                 onClick: handleConfirmCapture,
-                className: "px-4 min-h-[44px] rounded-md bg-indigo-600 text-white text-sm font-medium",
+                className: "min-h-[44px] rounded-md bg-indigo-600 px-4 text-sm font-medium text-white",
                 children: "Capture"
               }
             )
@@ -654,9 +722,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 useRef2, useEffect as useEffect2, 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,
@@ -665,13 +733,13 @@ 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 [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 = useRef2(null);
   const inputRef = useRef2(null);
   const hasInitRef = useRef2(false);
@@ -715,7 +783,9 @@ function ReportModal({
         })
       });
       if (response.status === 401) {
-        console.error("Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop.");
+        console.error(
+          "Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop."
+        );
         setMessages([
           {
             role: "assistant",
@@ -812,9 +882,7 @@ function ReportModal({
         setModalState("submitted");
       } catch (err) {
         console.error("Bug reporter: failed to submit report", err);
-        setErrorMessage(
-          err instanceof Error ? err.message : "Failed to submit report"
-        );
+        setErrorMessage(err instanceof Error ? err.message : "Failed to submit report");
         setModalState("error");
       }
     },
@@ -827,10 +895,7 @@ function ReportModal({
     if (!input.trim() || isLoading || !captureResult) return;
     const userMessage = input.trim();
     setInput("");
-    const newMessages = [
-      ...messages,
-      { role: "user", content: userMessage }
-    ];
+    const newMessages = [...messages, { role: "user", content: userMessage }];
     setMessages(newMessages);
     setIsLoading(true);
     try {
@@ -846,7 +911,9 @@ function ReportModal({
         })
       });
       if (response.status === 401) {
-        console.error("Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop.");
+        console.error(
+          "Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop."
+        );
         setMessages([
           ...newMessages,
           {
@@ -858,10 +925,7 @@ function ReportModal({
       }
       if (!response.ok) throw new Error("Failed to get AI response");
       const data = await response.json();
-      setMessages([
-        ...newMessages,
-        { role: "assistant", content: data.message }
-      ]);
+      setMessages([...newMessages, { role: "assistant", content: data.message }]);
       if (data.readyToSubmit && data.structuredReport) {
         await submitReport(
           [...newMessages, { role: "assistant", content: data.message }],
@@ -908,113 +972,125 @@ function ReportModal({
       onClick: (e) => {
         if (e.target === e.currentTarget) handleClose();
       },
-      children: /* @__PURE__ */ jsxs2(
+      children: /* @__PURE__ */ jsxs3(
         "div",
         {
           className: cn(
-            "bg-white dark:bg-gray-950 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-800 flex flex-col overflow-hidden",
-            "w-full max-w-lg mx-4",
-            "max-[768px]:mx-0 max-[768px]:rounded-none max-[768px]:max-w-none max-[768px]:h-full",
+            "flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-gray-950",
+            "mx-4 w-full max-w-lg",
+            "max-[768px]:mx-0 max-[768px]:h-full max-[768px]:max-w-none max-[768px]:rounded-none",
             "min-[769px]:max-h-[85vh]"
           ),
           children: [
-            /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/30 dark:bg-gray-900/30", children: [
-              /* @__PURE__ */ jsxs2("div", { children: [
-                /* @__PURE__ */ jsx3("h2", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100", children: "Bug Report" }),
+            /* @__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 })
               ] }),
               /* @__PURE__ */ jsx3(
                 "button",
                 {
                   onClick: handleClose,
-                  className: "p-1.5 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+                  className: "rounded-md p-1.5 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800",
                   "aria-label": "Close",
                   children: /* @__PURE__ */ jsx3(X, { className: "h-4 w-4 text-gray-600 dark:text-gray-400" })
                 }
               )
             ] }),
-            screenshotUrl && /* @__PURE__ */ jsx3("div", { className: "px-4 py-3 border-b border-gray-200 dark:border-gray-800 bg-gray-50/10 dark:bg-gray-900/10", children: /* @__PURE__ */ jsx3(
+            screenshotUrl && /* @__PURE__ */ jsx3("div", { className: "border-b border-gray-200 bg-gray-50/10 px-4 py-3 dark:border-gray-800 dark:bg-gray-900/10", children: /* @__PURE__ */ jsx3(
               "img",
               {
                 src: screenshotUrl,
                 alt: "Captured section",
-                className: "w-full max-h-40 object-contain rounded-md border border-gray-200 dark:border-gray-700"
+                className: "max-h-40 w-full rounded-md border border-gray-200 object-contain dark:border-gray-700"
               }
             ) }),
-            /* @__PURE__ */ jsx3("div", { className: "flex-1 overflow-y-auto px-4 py-3 space-y-3 min-h-0", children: modalState === "submitted" ? /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
-              /* @__PURE__ */ jsx3(CheckCircle2, { className: "h-12 w-12 text-green-500 mb-3" }),
-              /* @__PURE__ */ jsx3("h3", { className: "font-semibold text-lg text-gray-900 dark:text-gray-100", children: "Report Submitted" }),
-              /* @__PURE__ */ jsxs2("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: [
-                "Reference: ",
-                /* @__PURE__ */ jsx3("code", { className: "text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded", children: reportId == null ? void 0 : reportId.slice(0, 8) })
+            /* @__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__ */ 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) })
               ] }),
-              /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-2", children: "Thanks for the report \u2014 we'll look into it." }),
+              /* @__PURE__ */ jsx3("p", { className: "mt-2 text-sm text-gray-500 dark:text-gray-400", children: "Thanks for the report \u2014 we'll look into it." }),
               /* @__PURE__ */ jsx3(
                 "button",
                 {
                   onClick: handleClose,
-                  className: "mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md text-sm hover:bg-indigo-700 transition-colors",
+                  className: "mt-4 rounded-md bg-indigo-600 px-4 py-2 text-sm text-white transition-colors hover:bg-indigo-700",
                   children: "Done"
                 }
               )
-            ] }) : modalState === "error" ? /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
-              /* @__PURE__ */ jsx3(X, { className: "h-12 w-12 text-red-500 mb-3" }),
-              /* @__PURE__ */ jsx3("h3", { className: "font-semibold text-lg text-gray-900 dark:text-gray-100", children: "Submission Failed" }),
-              /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: errorMessage || "Something went wrong. Please try again." }),
+            ] }) : 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." }),
               /* @__PURE__ */ jsx3(
                 "button",
                 {
                   onClick: () => setModalState("chatting"),
-                  className: "mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md text-sm hover:bg-indigo-700 transition-colors",
+                  className: "mt-4 rounded-md bg-indigo-600 px-4 py-2 text-sm text-white transition-colors hover:bg-indigo-700",
                   children: "Try Again"
                 }
               )
-            ] }) : modalState === "submitting" ? /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-8", children: [
-              /* @__PURE__ */ jsx3(Loader2, { className: "h-8 w-8 animate-spin text-indigo-500 mb-3" }),
+            ] }) : 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",
                 {
                   className: cn(
                     "text-sm leading-relaxed",
-                    msg.role === "assistant" ? "bg-gray-100/50 dark:bg-gray-800/50 rounded-lg p-3 text-gray-900 dark:text-gray-100" : "bg-indigo-600 text-white rounded-lg p-3 ml-8"
+                    msg.role === "assistant" ? "rounded-lg bg-gray-100/50 p-3 text-gray-900 dark:bg-gray-800/50 dark:text-gray-100" : "ml-8 rounded-lg bg-indigo-600 p-3 text-white"
                   ),
                   children: msg.content
                 },
                 i
               )),
-              isLoading && /* @__PURE__ */ jsxs2("div", { className: "bg-gray-100/50 dark:bg-gray-800/50 rounded-lg p-3 flex items-center gap-2", 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__ */ jsxs2("div", { className: "border-t border-gray-200 dark:border-gray-800 px-4 py-3", children: [
-              /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ jsx3(
-                  "textarea",
-                  {
-                    ref: inputRef,
-                    value: input,
-                    onChange: (e) => setInput(e.target.value),
-                    onKeyDown: handleKeyDown,
-                    placeholder: "Describe what's wrong...",
-                    rows: 2,
-                    className: "flex-1 resize-none rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-950 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent",
-                    disabled: isLoading
-                  }
-                ),
-                /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
-                  /* @__PURE__ */ jsx3(
+            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",
+                {
+                  ref: inputRef,
+                  value: input,
+                  onChange: (e) => setInput(e.target.value),
+                  onKeyDown: handleKeyDown,
+                  placeholder: "Describe what's wrong...",
+                  rows: 2,
+                  className: "w-full resize-none rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 focus:border-transparent focus:ring-2 focus:ring-indigo-400 focus:outline-none dark:border-gray-700 dark:bg-gray-950 dark:text-gray-100",
+                  disabled: isLoading
+                }
+              ),
+              /* @__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
+                  ].filter(Boolean).join(" + "),
+                  " ",
+                  "captured \u2014 these will be included in the report."
+                ] }),
+                /* @__PURE__ */ jsxs3("div", { className: "flex justify-end gap-2", children: [
+                  /* @__PURE__ */ jsxs3(
                     "button",
                     {
                       onClick: sendMessage,
                       disabled: !input.trim() || isLoading,
-                      className: "p-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+                      className: "flex items-center gap-1 rounded-md bg-indigo-600 px-3 py-2 text-nowrap text-white transition-colors hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50",
                       title: "Send message",
-                      children: /* @__PURE__ */ jsx3(Send, { className: "h-4 w-4" })
+                      children: [
+                        /* @__PURE__ */ jsx3(Send, { className: "h-4 w-4" }),
+                        /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium", children: "Send message" })
+                      ]
                     }
                   ),
                   messages.length >= 2 && /* @__PURE__ */ jsx3(
@@ -1022,22 +1098,14 @@ function ReportModal({
                     {
                       onClick: handleManualSubmit,
                       disabled: isLoading,
-                      className: "px-2 py-1 rounded-md bg-green-600 text-white hover:bg-green-700 disabled:opacity-50 text-xs font-medium transition-colors",
+                      className: "rounded-md bg-green-600 px-3 py-2 text-xs font-medium text-nowrap text-white transition-colors hover:bg-green-700 disabled:opacity-50",
                       title: "Submit report now",
-                      children: "Submit"
+                      children: /* @__PURE__ */ jsx3("span", { className: "text-sm font-medium", children: "Submit report" })
                     }
                   )
                 ] })
-              ] }),
-              captureResult && (captureResult.consoleErrors.length > 0 || captureResult.networkErrors.length > 0) && /* @__PURE__ */ jsxs2("p", { className: "text-xs text-amber-600 mt-1.5", 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
-                ].filter(Boolean).join(" + "),
-                " ",
-                "captured \u2014 these will be included in the report."
               ] })
-            ] })
+            ] }) })
           ]
         }
       )
@@ -1046,16 +1114,18 @@ 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,
   user,
+  buttonPosition,
   children
 }) {
-  const [captureMode, setCaptureMode] = useState3(false);
-  const [captureResult, setCaptureResult] = useState3(null);
-  const [showModal, setShowModal] = useState3(false);
+  const safeApiKey = apiKey || "";
+  const [captureMode, setCaptureMode] = useState4(false);
+  const [captureResult, setCaptureResult] = useState4(null);
+  const [showModal, setShowModal] = useState4(false);
   useEffect3(() => {
     startCapturing();
     startNetworkCapture();
@@ -1081,12 +1151,19 @@ function JarveBugReporter({
     clearCapturedErrors();
     clearCapturedNetworkErrors();
   }, []);
-  const siteId = apiKey.startsWith("brk_") ? apiKey.slice(4, 12) : "external";
+  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, { isActive: captureMode, onClick: toggleCaptureMode }),
+    /* @__PURE__ */ jsx4(
+      FloatingButton,
+      {
+        isActive: captureMode,
+        onClick: toggleCaptureMode,
+        position: buttonPosition
+      }
+    ),
     /* @__PURE__ */ jsx4(
       CaptureOverlay,
       {