@jarve/bug-reporter 0.4.2 → 1.0.0

package/dist/index.mjs

@@ -20,26 +20,26 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/bug-reporter.tsx
-import { useState as useState4, useEffect as useEffect4, useCallback as useCallback3 } from "react";
+import { useState as useState4, useEffect as useEffect4, useCallback as useCallback3, useMemo as useMemo2 } from "react";
 
 // src/floating-button.tsx
 import { useState, useEffect, useRef } from "react";
 import { Bug } from "lucide-react";
-
-// src/cn.ts
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/floating-button.tsx
+import { cn, on } from "@jarve/widget-shared";
 import { jsx, jsxs } from "react/jsx-runtime";
 var STACK_OFFSET = 56;
-function FloatingButton({ isActive, onClick, position = "right" }) {
+function hasLauncherElement() {
+  return typeof document !== "undefined" && !!document.querySelector("[data-jarve-launcher]");
+}
+function FloatingButton({
+  isActive,
+  onClick,
+  position = "right",
+  zIndexBase = 1e4
+}) {
   const [hovered, setHovered] = useState(false);
   const [stackOffset, setStackOffset] = useState(0);
-  const [launcherPresent, setLauncherPresent] = useState(false);
+  const [launcherPresent, setLauncherPresent] = useState(hasLauncherElement);
   const ref = useRef(null);
   const isLeft = position === "left";
   const sideClasses = isLeft ? "left-4 md:left-6" : "right-4 md:right-6";
@@ -48,6 +48,7 @@ function FloatingButton({ isActive, onClick, position = "right" }) {
     if (!el) return;
     let rafId;
     const recalculate = () => {
+      if (!ref.current) return;
       const widgets = Array.from(
         document.querySelectorAll(`[data-jarve-widget][data-jarve-position="${position}"]`)
       );
@@ -59,25 +60,26 @@ function FloatingButton({ isActive, onClick, position = "right" }) {
       const index = widgets.indexOf(el);
       setStackOffset(index > 0 ? index * STACK_OFFSET : 0);
     };
-    recalculate();
-    const observer = new MutationObserver(() => {
+    const scheduleRecalculate = () => {
       cancelAnimationFrame(rafId);
       rafId = requestAnimationFrame(recalculate);
-    });
-    observer.observe(document.body, { childList: true, subtree: true });
+    };
+    recalculate();
+    const offReg = on("jarve:widget-registered", () => scheduleRecalculate());
+    const offDereg = on("jarve:widget-deregistered", () => scheduleRecalculate());
     return () => {
-      observer.disconnect();
+      offReg();
+      offDereg();
       cancelAnimationFrame(rafId);
     };
   }, [position]);
   useEffect(() => {
-    const checkLauncher = () => {
-      setLauncherPresent(!!document.querySelector("[data-jarve-launcher]"));
+    const offMounted = on("jarve:launcher-mounted", () => setLauncherPresent(true));
+    const offUnmounted = on("jarve:launcher-unmounted", () => setLauncherPresent(false));
+    return () => {
+      offMounted();
+      offUnmounted();
     };
-    checkLauncher();
-    const observer = new MutationObserver(checkLauncher);
-    observer.observe(document.body, { childList: true, subtree: true });
-    return () => observer.disconnect();
   }, []);
   if (launcherPresent) return null;
   return /* @__PURE__ */ jsxs(
@@ -86,8 +88,10 @@ function FloatingButton({ isActive, onClick, position = "right" }) {
       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,
+      className: cn("fixed z-[calc(var(--jarve-z-base)-1)]", "bottom-4 md:bottom-6", sideClasses),
+      style: __spreadValues({
+        ["--jarve-z-base"]: String(zIndexBase)
+      }, stackOffset > 0 ? { transform: `translateY(-${stackOffset}px)` } : {}),
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       children: [
@@ -121,7 +125,7 @@ function FloatingButton({ isActive, onClick, position = "right" }) {
             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",
+              "focus:ring-2 focus:ring-offset-2 focus:outline-none motion-safe:hover:scale-110",
               "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"
             ),
@@ -137,10 +141,9 @@ function FloatingButton({ isActive, onClick, position = "right" }) {
 
 // src/capture-overlay.tsx
 import { useEffect as useEffect2, useState as useState2, useCallback, useRef as useRef2 } from "react";
-import { toPng } from "html-to-image";
 
 // src/utils.ts
-import { UAParser } from "ua-parser-js";
+import { parseUserAgent as parseSharedUserAgent } from "@jarve/widget-shared";
 function getNearestSection(element) {
   let current = element;
   while (current && current !== document.body) {
@@ -170,13 +173,7 @@ function getDeviceType() {
   return "desktop";
 }
 function parseUserAgent() {
-  const parser = new UAParser(navigator.userAgent);
-  const browser = parser.getBrowser();
-  const osInfo = parser.getOS();
-  return {
-    browser: `${browser.name || "Unknown"} ${browser.version || ""}`.trim(),
-    os: `${osInfo.name || "Unknown"} ${osInfo.version || ""}`.trim()
-  };
+  return parseSharedUserAgent();
 }
 function buildSelectorPath(element, stopAt) {
   const parts = [];
@@ -247,84 +244,114 @@ function collectMetadata(sectionElement, siteId, reporterName, reporterEmail, cl
   };
 }
 
+// src/console-capture.ts
+import { createPatchManager } from "@jarve/widget-shared";
+
+// src/redact.ts
+var SENSITIVE_JSON_KEY = /("(?:token|password|secret|api_?key|authorization)"\s*:\s*")[^"]*"/gi;
+var BEARER_TOKEN = /(bearer)\s+[^\s"',;}]+/gi;
+var COOKIE_HEADER = /(set-cookie|cookie)\s*:\s*[^\r\n]+/gi;
+function redactSensitive(input) {
+  if (input === null || input === void 0) return input;
+  return input.replace(COOKIE_HEADER, (_, header) => `${header}: [REDACTED]`).replace(SENSITIVE_JSON_KEY, (_, keyPrefix) => `${keyPrefix}[REDACTED]"`).replace(BEARER_TOKEN, (_, word) => `${word} [REDACTED]`);
+}
+
 // src/console-capture.ts
 var MAX_ERRORS = 50;
+var MAX_MSG_LEN = 500;
+function serializeArg(arg) {
+  var _a;
+  if (typeof arg === "string") return arg;
+  if (arg instanceof Error) return `${arg.name}: ${arg.message}
+${(_a = arg.stack) != null ? _a : ""}`;
+  try {
+    return JSON.stringify(arg);
+  } catch (e) {
+    return String(arg);
+  }
+}
 var capturedErrors = [];
-var isCapturing = false;
 var originalConsoleError = null;
+var patchedConsoleErrorRef = null;
 var errorListener = null;
 var rejectionListener = null;
-function startCapturing() {
-  if (isCapturing) return;
-  if (console.error.__bugReporterPatched) return;
-  isCapturing = true;
-  capturedErrors = [];
-  originalConsoleError = console.error;
-  const patchedConsoleError = (...args) => {
-    const MAX_MSG_LEN = 500;
-    const message = args.map((a) => {
-      if (typeof a === "string") return a.slice(0, MAX_MSG_LEN);
-      try {
-        const s = JSON.stringify(a);
-        return s.slice(0, MAX_MSG_LEN);
-      } catch (e) {
-        return String(a).slice(0, MAX_MSG_LEN);
+var releasePatch = null;
+var patchManager = createPatchManager({
+  markerKey: "__jarveBugReporterConsolePatch",
+  install: () => {
+    capturedErrors = [];
+    originalConsoleError = console.error;
+    const patchedConsoleError = (...args) => {
+      const message = args.map((arg) => redactSensitive(serializeArg(arg)).slice(0, MAX_MSG_LEN)).join(" ").slice(0, MAX_MSG_LEN);
+      capturedErrors.push({
+        message,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      if (capturedErrors.length > MAX_ERRORS) {
+        capturedErrors = capturedErrors.slice(-MAX_ERRORS);
       }
-    }).join(" ").slice(0, MAX_MSG_LEN);
-    capturedErrors.push({
-      message,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    });
-    if (capturedErrors.length > MAX_ERRORS) {
-      capturedErrors = capturedErrors.slice(-MAX_ERRORS);
+      originalConsoleError.apply(console, args);
+    };
+    patchedConsoleError.__bugReporterPatched = true;
+    patchedConsoleErrorRef = patchedConsoleError;
+    console.error = patchedConsoleError;
+    errorListener = (event) => {
+      capturedErrors.push({
+        message: event.message,
+        source: event.filename,
+        lineno: event.lineno,
+        colno: event.colno,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      if (capturedErrors.length > MAX_ERRORS) {
+        capturedErrors = capturedErrors.slice(-MAX_ERRORS);
+      }
+    };
+    window.addEventListener("error", errorListener);
+    rejectionListener = (event) => {
+      capturedErrors.push({
+        message: `Unhandled Promise Rejection: ${event.reason instanceof Error ? event.reason.message : String(event.reason)}`,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      });
+      if (capturedErrors.length > MAX_ERRORS) {
+        capturedErrors = capturedErrors.slice(-MAX_ERRORS);
+      }
+    };
+    window.addEventListener("unhandledrejection", rejectionListener);
+  },
+  uninstall: () => {
+    if (console.error === patchedConsoleErrorRef && originalConsoleError) {
+      console.error = originalConsoleError;
+    } else {
+      console.warn(
+        "Bug reporter: console.error was replaced by another library after we patched it. Leaving the foreign patch in place \u2014 original console.error is no longer reachable via our handle."
+      );
     }
-    originalConsoleError.apply(console, args);
-  };
-  patchedConsoleError.__bugReporterPatched = true;
-  console.error = patchedConsoleError;
-  errorListener = (event) => {
-    capturedErrors.push({
-      message: event.message,
-      source: event.filename,
-      lineno: event.lineno,
-      colno: event.colno,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    });
-    if (capturedErrors.length > MAX_ERRORS) {
-      capturedErrors = capturedErrors.slice(-MAX_ERRORS);
+    if (patchedConsoleErrorRef) {
+      delete patchedConsoleErrorRef.__bugReporterPatched;
     }
-  };
-  window.addEventListener("error", errorListener);
-  rejectionListener = (event) => {
-    capturedErrors.push({
-      message: `Unhandled Promise Rejection: ${event.reason instanceof Error ? event.reason.message : String(event.reason)}`,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    });
-    if (capturedErrors.length > MAX_ERRORS) {
-      capturedErrors = capturedErrors.slice(-MAX_ERRORS);
+    originalConsoleError = null;
+    patchedConsoleErrorRef = null;
+    if (errorListener) {
+      window.removeEventListener("error", errorListener);
+      errorListener = null;
     }
-  };
-  window.addEventListener("unhandledrejection", rejectionListener);
-}
-function stopCapturing() {
-  if (!isCapturing) return;
-  isCapturing = false;
-  if (originalConsoleError) {
-    const restoreTarget = originalConsoleError;
-    console.error = restoreTarget;
-    if (console.error !== restoreTarget) {
-      console.warn("Bug reporter: failed to restore original console.error");
+    if (rejectionListener) {
+      window.removeEventListener("unhandledrejection", rejectionListener);
+      rejectionListener = null;
     }
-    originalConsoleError = null;
-  }
-  if (errorListener) {
-    window.removeEventListener("error", errorListener);
-    errorListener = null;
-  }
-  if (rejectionListener) {
-    window.removeEventListener("unhandledrejection", rejectionListener);
-    rejectionListener = null;
   }
+});
+function startCapturing() {
+  if (typeof window === "undefined") return;
+  if (releasePatch) return;
+  releasePatch = patchManager.acquire();
+}
+function stopCapturing() {
+  if (!releasePatch) return;
+  const release = releasePatch;
+  releasePatch = null;
+  release();
 }
 function getCapturedErrors() {
   return [...capturedErrors];
@@ -334,17 +361,38 @@ function clearCapturedErrors() {
 }
 
 // src/network-capture.ts
+import { createPatchManager as createPatchManager2 } from "@jarve/widget-shared";
 var MAX_REQUESTS = 30;
 var MAX_BODY_READ_BYTES = 64 * 1024;
 var TRUNCATE_LEN = 500;
 var capturedRequests = [];
-var isCapturing2 = false;
 var originalFetch = null;
+var patchedFetchRef = null;
+var releasePatch2 = null;
+var bodyCaptureMode = "off";
 function truncateBody(body, maxLen = TRUNCATE_LEN) {
   if (!body) return null;
   if (body.length <= maxLen) return body;
   return body.slice(0, maxLen) + "...(truncated)";
 }
+function sanitizeRequestUrl(raw) {
+  try {
+    const parsed = new URL(raw);
+    return {
+      url: parsed.origin + parsed.pathname,
+      hasQueryString: parsed.search.length > 0 || parsed.hash.length > 0
+    };
+  } catch (e) {
+    const queryIdx = raw.indexOf("?");
+    const hashIdx = raw.indexOf("#");
+    const cutoffs = [queryIdx, hashIdx].filter((i) => i >= 0);
+    if (cutoffs.length === 0) {
+      return { url: raw, hasQueryString: false };
+    }
+    const cut = Math.min(...cutoffs);
+    return { url: raw.slice(0, cut), hasQueryString: true };
+  }
+}
 async function readBoundedBody(response) {
   try {
     const contentLength = response.headers.get("Content-Length");
@@ -372,72 +420,98 @@ async function readBoundedBody(response) {
       }
       const decoder = new TextDecoder();
       const text2 = chunks.map((c) => decoder.decode(c, { stream: true })).join("");
-      return truncateBody(text2);
+      return truncateBody(redactSensitive(text2));
     }
     const text = await cloned.text();
-    return truncateBody(text);
+    return truncateBody(redactSensitive(text));
   } catch (e) {
     return null;
   }
 }
-function startNetworkCapture() {
-  if (isCapturing2 || typeof window === "undefined") return;
-  if (window.fetch.__bugReporterPatched) return;
-  isCapturing2 = true;
-  capturedRequests = [];
-  originalFetch = window.fetch;
-  const patchedFetch = async function patchedFetch2(input, init) {
-    const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
-    const method = (init == null ? void 0 : init.method) || (typeof input !== "string" && !(input instanceof URL) ? input.method : "GET") || "GET";
-    if (url.includes("/api/bug-reporter/") || url.includes("/bug-reporter/external/") || url.startsWith("data:") || url.startsWith("blob:")) {
-      return originalFetch.call(window, input, init);
-    }
-    try {
-      const response = await originalFetch.call(window, input, init);
-      if (response.status >= 400) {
-        const responseBody = await readBoundedBody(response);
+var patchManager2 = createPatchManager2({
+  markerKey: "__jarveBugReporterFetchPatch",
+  install: () => {
+    if (typeof window === "undefined") return;
+    capturedRequests = [];
+    originalFetch = window.fetch;
+    const patchedFetch = async function patchedFetch2(input, init) {
+      const rawUrl = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      const method = (init == null ? void 0 : init.method) || (typeof input !== "string" && !(input instanceof URL) ? input.method : "GET") || "GET";
+      if (rawUrl.includes("/api/bug-reporter/") || rawUrl.includes("/bug-reporter/external/") || rawUrl.startsWith("data:") || rawUrl.startsWith("blob:")) {
+        return originalFetch.call(window, input, init);
+      }
+      const { url, hasQueryString } = sanitizeRequestUrl(rawUrl);
+      try {
+        const response = await originalFetch.call(window, input, init);
+        if (response.status >= 400) {
+          const responseBody = bodyCaptureMode === "on" ? await readBoundedBody(response) : null;
+          capturedRequests.push({
+            url,
+            hasQueryString,
+            method: method.toUpperCase(),
+            status: response.status,
+            statusText: response.statusText,
+            responseBody,
+            contentType: response.headers.get("content-type"),
+            timestamp: (/* @__PURE__ */ new Date()).toISOString()
+          });
+          if (capturedRequests.length > MAX_REQUESTS) {
+            capturedRequests = capturedRequests.slice(-MAX_REQUESTS);
+          }
+        }
+        return response;
+      } catch (error) {
         capturedRequests.push({
           url,
+          hasQueryString,
           method: method.toUpperCase(),
-          status: response.status,
-          statusText: response.statusText,
-          responseBody,
+          status: 0,
+          statusText: error instanceof Error ? error.message : "Network error",
+          responseBody: null,
+          contentType: null,
           timestamp: (/* @__PURE__ */ new Date()).toISOString()
         });
         if (capturedRequests.length > MAX_REQUESTS) {
           capturedRequests = capturedRequests.slice(-MAX_REQUESTS);
         }
+        throw error;
       }
-      return response;
-    } catch (error) {
-      capturedRequests.push({
-        url,
-        method: method.toUpperCase(),
-        status: 0,
-        statusText: error instanceof Error ? error.message : "Network error",
-        responseBody: null,
-        timestamp: (/* @__PURE__ */ new Date()).toISOString()
-      });
-      if (capturedRequests.length > MAX_REQUESTS) {
-        capturedRequests = capturedRequests.slice(-MAX_REQUESTS);
-      }
-      throw error;
+    };
+    patchedFetch.__bugReporterPatched = true;
+    patchedFetchRef = patchedFetch;
+    window.fetch = patchedFetch;
+  },
+  uninstall: () => {
+    if (typeof window === "undefined") {
+      originalFetch = null;
+      patchedFetchRef = null;
+      return;
     }
-  };
-  patchedFetch.__bugReporterPatched = true;
-  window.fetch = patchedFetch;
-}
-function stopNetworkCapture() {
-  if (!isCapturing2) return;
-  isCapturing2 = false;
-  if (originalFetch) {
-    const restoreTarget = originalFetch;
-    window.fetch = restoreTarget;
-    if (window.fetch !== restoreTarget) {
-      console.warn("Bug reporter: failed to restore original fetch");
+    if (window.fetch === patchedFetchRef && originalFetch) {
+      window.fetch = originalFetch;
+    } else {
+      console.warn(
+        "Bug reporter: window.fetch was replaced by another library after we patched it. Leaving the foreign patch in place \u2014 original fetch is no longer reachable via our handle."
+      );
+    }
+    if (patchedFetchRef) {
+      delete patchedFetchRef.__bugReporterPatched;
     }
     originalFetch = null;
+    patchedFetchRef = null;
   }
+});
+function startNetworkCapture(options = {}) {
+  if (typeof window === "undefined") return;
+  bodyCaptureMode = options.captureResponseBodies ? "on" : "off";
+  if (releasePatch2) return;
+  releasePatch2 = patchManager2.acquire();
+}
+function stopNetworkCapture() {
+  if (!releasePatch2) return;
+  const release = releasePatch2;
+  releasePatch2 = null;
+  release();
 }
 function getCapturedNetworkErrors() {
   return [...capturedRequests];
@@ -451,11 +525,16 @@ import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function dataUrlToBlob(dataUrl) {
   var _a;
   const [header, base64] = dataUrl.split(",");
+  if (!header || !base64) return new Blob();
   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 });
+  try {
+    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 });
+  } catch (e) {
+    return new Blob();
+  }
 }
 function CaptureOverlay({
   isActive,
@@ -463,11 +542,12 @@ function CaptureOverlay({
   reporterName,
   reporterEmail,
   onCapture,
-  onCancel
+  onCancel,
+  zIndexBase = 1e4
 }) {
   const [hoveredElement, setHoveredElement] = useState2(null);
   const [hoveredRect, setHoveredRect] = useState2(null);
-  const [isCapturing3, setIsCapturing] = useState2(false);
+  const [isCapturing, setIsCapturing] = useState2(false);
   const [isTouchMode, setIsTouchMode] = useState2(false);
   const [selectedSection, setSelectedSection] = useState2(null);
   const [selectedRect, setSelectedRect] = useState2(null);
@@ -481,10 +561,20 @@ function CaptureOverlay({
       setIsTouchMode(isTouchCapable());
     }
   }, [isActive]);
+  useEffect2(() => {
+    if (typeof document === "undefined") return;
+    if (!isActive || isTouchMode) return;
+    const root = document.documentElement;
+    root.classList.add("jarve-capturing");
+    return () => {
+      root.classList.remove("jarve-capturing");
+    };
+  }, [isActive, isTouchMode]);
   const captureScreenshot = useCallback(
     async (section, target, coords) => {
       const elementInfo = collectElementInfo(target, section, coords);
       setIsCapturing(true);
+      const { toPng } = await import("html-to-image");
       try {
         setHoveredElement(null);
         setHoveredRect(null);
@@ -561,7 +651,7 @@ function CaptureOverlay({
   );
   const handleMouseMove = useCallback(
     (e) => {
-      if (!isActive || isCapturing3 || isTouchMode) return;
+      if (!isActive || isCapturing || isTouchMode) return;
       if (rafRef.current) return;
       rafRef.current = requestAnimationFrame(() => {
         rafRef.current = null;
@@ -579,11 +669,11 @@ function CaptureOverlay({
         setHoveredRect(section ? section.getBoundingClientRect() : null);
       });
     },
-    [isActive, isCapturing3, isTouchMode]
+    [isActive, isCapturing, isTouchMode]
   );
   const handleClick = useCallback(
     async (e) => {
-      if (!isActive || isCapturing3 || isTouchMode) return;
+      if (!isActive || isCapturing || isTouchMode) return;
       const target = e.target;
       if (!(target instanceof HTMLElement)) return;
       if (target.closest("[data-bug-reporter]")) return;
@@ -593,16 +683,18 @@ function CaptureOverlay({
       if (!section) return;
       await captureScreenshot(section, target, extractCoordinates(e));
     },
-    [isActive, isCapturing3, isTouchMode, captureScreenshot]
+    [isActive, isCapturing, isTouchMode, captureScreenshot]
   );
   const handleTouchEnd = useCallback(
     (e) => {
-      if (!isActive || isCapturing3) return;
+      if (!isActive || isCapturing) 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;
+      if (e.cancelable) e.preventDefault();
+      e.stopPropagation();
       const section = getNearestSection(target);
       if (!section) return;
       setSelectedSection(section);
@@ -610,7 +702,7 @@ function CaptureOverlay({
       setSelectedTarget(target);
       touchCoordsRef.current = extractCoordinates(touch);
     },
-    [isActive, isCapturing3]
+    [isActive, isCapturing]
   );
   const handleConfirmCapture = useCallback(async () => {
     if (!selectedSection || !selectedTarget || !touchCoordsRef.current) return;
@@ -660,7 +752,7 @@ function CaptureOverlay({
     document.addEventListener("keydown", handleKeyDown);
     window.addEventListener("scroll", handleScroll, { passive: true });
     if (isTouchMode) {
-      document.addEventListener("touchend", handleTouchEnd, { passive: true });
+      document.addEventListener("touchend", handleTouchEnd, { passive: false });
     } else {
       document.addEventListener("mousemove", handleMouseMove, true);
       document.addEventListener("click", handleClick, true);
@@ -692,9 +784,10 @@ function CaptureOverlay({
       "div",
       {
         "data-bug-reporter": true,
-        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",
+        role: "status",
+        "aria-live": "polite",
+        className: "fixed top-0 right-0 left-0 z-[calc(var(--jarve-z-base))] flex items-center justify-center gap-3 bg-indigo-600 px-4 py-2 text-center text-sm font-medium text-white",
+        style: { ["--jarve-z-base"]: String(zIndexBase) },
         children: isTouchMode ? /* @__PURE__ */ jsxs2(Fragment, { children: [
           /* @__PURE__ */ jsx2("span", { children: "Tap the section with the bug" }),
           /* @__PURE__ */ jsx2(
@@ -718,8 +811,9 @@ function CaptureOverlay({
       {
         ref: overlayRef,
         "data-bug-reporter": true,
-        className: "pointer-events-none fixed z-[9998] rounded-sm border-2 border-indigo-500 transition-all duration-150 ease-out",
+        className: "pointer-events-none fixed z-[calc(var(--jarve-z-base)-2)] rounded-sm border-2 border-indigo-500 transition-all duration-150 ease-out",
         style: {
+          ["--jarve-z-base"]: String(zIndexBase),
           top: highlightRect.top - 2,
           left: highlightRect.left - 2,
           width: highlightRect.width + 4,
@@ -728,12 +822,15 @@ function CaptureOverlay({
         }
       }
     ),
-    isTouchMode && selectedSection && !isCapturing3 && /* @__PURE__ */ jsx2(
+    isTouchMode && selectedSection && !isCapturing && /* @__PURE__ */ jsx2(
       "div",
       {
         "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)" },
+        className: "fixed right-0 bottom-0 left-0 z-[calc(var(--jarve-z-base))] border-t border-gray-200 bg-white shadow-lg",
+        style: {
+          ["--jarve-z-base"]: String(zIndexBase),
+          paddingBottom: "env(safe-area-inset-bottom, 0px)"
+        },
         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: [
@@ -761,132 +858,186 @@ function CaptureOverlay({
           ] })
         ] })
       }
-    ),
-    !isTouchMode && /* @__PURE__ */ jsx2("style", { children: `* { cursor: crosshair !important; }` })
+    )
   ] });
 }
 
 // src/report-modal.tsx
 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 {
+  cn as cn2,
+  createTimeoutAbortSignal,
+  useEscapeKey,
+  useFocusTrap,
+  useResolvedTheme,
+  useReturnFocus
+} from "@jarve/widget-shared";
 import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var STARTER_ASSISTANT_MESSAGE = {
+  role: "assistant",
+  content: "I can see you've captured a section of the page. What's going wrong here? Please describe the issue you're experiencing."
+};
+var DRAFT_STORAGE_PREFIX = "jarve:draft:bug-reporter:";
+function draftStorageKey(siteId) {
+  return `${DRAFT_STORAGE_PREFIX}${siteId}`;
+}
+function readDraft(siteId) {
+  if (typeof sessionStorage === "undefined") return null;
+  try {
+    const raw = sessionStorage.getItem(draftStorageKey(siteId));
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof (parsed == null ? void 0 : parsed.input) !== "string" || !Array.isArray(parsed == null ? void 0 : parsed.messages)) return null;
+    return parsed;
+  } catch (e) {
+    return null;
+  }
+}
+function writeDraft(siteId, draft) {
+  if (typeof sessionStorage === "undefined") return;
+  try {
+    sessionStorage.setItem(draftStorageKey(siteId), JSON.stringify(draft));
+  } catch (e) {
+  }
+}
+function clearDraft(siteId) {
+  if (typeof sessionStorage === "undefined") return;
+  try {
+    sessionStorage.removeItem(draftStorageKey(siteId));
+  } catch (e) {
+  }
+}
 function ReportModal({
   isOpen,
   captureResult,
   apiConfig,
   siteId,
-  user,
-  onClose
+  onClose,
+  zIndexBase = 1e4,
+  theme = "auto",
+  onBeforeSubmit
 }) {
-  const [messages, setMessages] = useState3([]);
+  const resolvedTheme = useResolvedTheme(theme);
+  const [messages, setMessages] = useState3([STARTER_ASSISTANT_MESSAGE]);
   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 [submitAlert, setSubmitAlert] = useState3(null);
+  const chatScrollRef = useRef3(null);
   const inputRef = useRef3(null);
-  const hasInitRef = useRef3(false);
+  const dialogRef = useRef3(null);
+  const [sessionToken, setSessionToken] = useState3(() => "");
+  const activeSessionRef = useRef3("");
+  const abortControllerRef = useRef3(null);
+  if (abortControllerRef.current === null) {
+    abortControllerRef.current = new AbortController();
+  }
+  useEffect3(() => {
+    var _a, _b, _c;
+    if (isOpen) {
+      const next = crypto.randomUUID();
+      activeSessionRef.current = next;
+      setSessionToken(next);
+      const draft = readDraft(siteId);
+      setMessages(draft && draft.messages.length > 0 ? draft.messages : [STARTER_ASSISTANT_MESSAGE]);
+      setInput((_a = draft == null ? void 0 : draft.input) != null ? _a : "");
+      setIsLoading(false);
+      setModalState("chatting");
+      setReportId(null);
+      setErrorMessage(null);
+      setSubmitAlert(null);
+      if ((_b = abortControllerRef.current) == null ? void 0 : _b.signal.aborted) {
+        abortControllerRef.current = new AbortController();
+      }
+    } else {
+      (_c = abortControllerRef.current) == null ? void 0 : _c.abort();
+    }
+  }, [isOpen, siteId]);
+  useEffect3(() => {
+    return () => {
+      var _a;
+      (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+    };
+  }, []);
+  useEffect3(() => {
+    if (!isOpen) return;
+    if (modalState === "submitted" || modalState === "submitting") return;
+    const hasNonStarterMessages = messages.length > 1 || messages.length === 1 && messages[0] !== STARTER_ASSISTANT_MESSAGE;
+    if (!input && !hasNonStarterMessages) return;
+    writeDraft(siteId, { input, messages });
+  }, [isOpen, modalState, input, messages, siteId]);
   const apiHeaders = useMemo(
     () => ({
       "Content-Type": "application/json",
-      "X-Bug-Reporter-Key": (apiConfig.apiKey || "").trim()
+      "X-Bug-Reporter-Key": (apiConfig.apiKey || "").trim(),
+      "X-Jarve-Session": sessionToken
+    }),
+    [apiConfig.apiKey, sessionToken]
+  );
+  const submitHeaders = useMemo(
+    () => ({
+      "X-Bug-Reporter-Key": (apiConfig.apiKey || "").trim(),
+      "X-Jarve-Session": sessionToken
     }),
-    [apiConfig.apiKey]
+    [apiConfig.apiKey, sessionToken]
   );
   useEffect3(() => {
-    if ((captureResult == null ? void 0 : captureResult.screenshot) && captureResult.screenshot.size > 0) {
-      const url = URL.createObjectURL(captureResult.screenshot);
-      setScreenshotUrl((prev) => {
-        if (prev) URL.revokeObjectURL(prev);
-        return url;
-      });
-      return () => {
-        URL.revokeObjectURL(url);
-        setScreenshotUrl(null);
-      };
+    const blob = captureResult == null ? void 0 : captureResult.screenshot;
+    if (!blob || blob.size === 0) {
+      setScreenshotUrl(null);
+      return;
     }
-    setScreenshotUrl((prev) => {
-      if (prev) URL.revokeObjectURL(prev);
-      return null;
-    });
+    const url = URL.createObjectURL(blob);
+    setScreenshotUrl(url);
+    return () => {
+      URL.revokeObjectURL(url);
+    };
   }, [captureResult]);
-  const sendInitialMessage = useCallback2(async () => {
-    if (!captureResult) return;
-    setIsLoading(true);
-    try {
-      const response = await fetch(`${apiConfig.apiUrl}/chat`, {
-        method: "POST",
-        headers: apiHeaders,
-        body: JSON.stringify({
-          messages: [],
-          metadata: captureResult.metadata,
-          consoleErrors: captureResult.consoleErrors,
-          networkErrors: captureResult.networkErrors,
-          clickedElement: captureResult.metadata.clickedElement || null
-        })
-      });
-      if (response.status === 401) {
-        console.error(
-          "Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop."
-        );
-        setMessages([
-          {
-            role: "assistant",
-            content: "The bug reporter service isn't configured correctly. Please let the site administrator know."
-          }
-        ]);
-        return;
-      }
-      if (!response.ok) throw new Error("Failed to get AI response");
-      const data = await response.json();
-      setMessages([{ role: "assistant", content: data.message }]);
-    } catch (e) {
-      setMessages([
-        {
-          role: "assistant",
-          content: "I can see you've captured a section of the page. What's going wrong here? Please describe the issue you're experiencing."
-        }
-      ]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [captureResult, apiConfig.apiUrl, apiHeaders]);
   useEffect3(() => {
-    if (isOpen && captureResult && !hasInitRef.current) {
-      hasInitRef.current = true;
-      sendInitialMessage();
+    const container = chatScrollRef.current;
+    if (!container || typeof container.scrollTo !== "function") return;
+    const gap = container.scrollHeight - container.scrollTop - container.clientHeight;
+    if (gap < 100) {
+      container.scrollTo({ top: container.scrollHeight, behavior: "smooth" });
     }
-  }, [isOpen, captureResult, sendInitialMessage]);
-  useEffect3(() => {
-    var _a;
-    (_a = chatEndRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
+  useReturnFocus(isOpen);
+  useFocusTrap(isOpen, dialogRef);
   useEffect3(() => {
     var _a;
     if (isOpen && !isLoading) {
       (_a = inputRef.current) == null ? void 0 : _a.focus();
     }
   }, [isOpen, isLoading, messages]);
+  const buildFetchSignal = useCallback2(() => {
+    const controller = abortControllerRef.current;
+    return createTimeoutAbortSignal(controller.signal, 3e4);
+  }, []);
+  const runWithFetchSignal = useCallback2(
+    async (input2, init) => {
+      const { signal, cleanup } = buildFetchSignal();
+      try {
+        return await fetch(input2, __spreadProps(__spreadValues({}, init), { signal }));
+      } finally {
+        cleanup();
+      }
+    },
+    [buildFetchSignal]
+  );
   const submitReport = useCallback2(
     async (conversation, structuredReport) => {
       if (!captureResult || modalState !== "chatting") return;
       setModalState("submitting");
+      const sessionAtDispatch = activeSessionRef.current;
       try {
-        let screenshotBase64;
-        if (captureResult.screenshot.size > 0) {
-          const reader = new FileReader();
-          screenshotBase64 = await new Promise((resolve, reject) => {
-            reader.onload = () => resolve(reader.result);
-            reader.onerror = reject;
-            reader.readAsDataURL(captureResult.screenshot);
-          });
-        }
         let report = structuredReport;
         if (!report) {
           try {
-            const summaryResponse = await fetch(`${apiConfig.apiUrl}/chat`, {
+            const summaryResponse = await runWithFetchSignal(`${apiConfig.apiUrl}/chat`, {
               method: "POST",
               headers: apiHeaders,
               body: JSON.stringify({
@@ -898,6 +1049,7 @@ function ReportModal({
                 requestSummary: true
               })
             });
+            if (sessionAtDispatch !== activeSessionRef.current) return;
             if (summaryResponse.ok) {
               const data2 = await summaryResponse.json();
               report = data2.structuredReport;
@@ -905,46 +1057,87 @@ function ReportModal({
           } catch (e) {
           }
         }
-        const response = await fetch(`${apiConfig.apiUrl}/submit`, {
+        if (sessionAtDispatch !== activeSessionRef.current) return;
+        const basePayload = {
+          metadata: captureResult.metadata,
+          conversation,
+          structuredReport: report,
+          consoleErrors: captureResult.consoleErrors,
+          networkErrors: captureResult.networkErrors,
+          clickedElement: captureResult.metadata.clickedElement || null
+        };
+        let finalPayload = basePayload;
+        if (onBeforeSubmit) {
+          try {
+            const maybe = await onBeforeSubmit(basePayload);
+            if (sessionAtDispatch !== activeSessionRef.current) return;
+            if (maybe === null || maybe === false) {
+              setSubmitAlert("Submission cancelled. Update your report and try again.");
+              setModalState("chatting");
+              return;
+            }
+            finalPayload = maybe;
+          } catch (hookErr) {
+            if (sessionAtDispatch !== activeSessionRef.current) return;
+            console.error("Bug reporter: onBeforeSubmit hook rejected the payload", hookErr);
+            setSubmitAlert("Submission failed \u2014 please try again.");
+            setModalState("chatting");
+            return;
+          }
+        }
+        const formData = new FormData();
+        if (captureResult.screenshot.size > 0) {
+          formData.append("screenshot", captureResult.screenshot);
+        }
+        formData.append("payload", JSON.stringify(finalPayload));
+        const response = await runWithFetchSignal(`${apiConfig.apiUrl}/submit`, {
           method: "POST",
-          headers: apiHeaders,
-          body: JSON.stringify({
-            screenshot: screenshotBase64,
-            metadata: captureResult.metadata,
-            conversation,
-            structuredReport: report,
-            consoleErrors: captureResult.consoleErrors,
-            networkErrors: captureResult.networkErrors,
-            clickedElement: captureResult.metadata.clickedElement || null
-          })
+          headers: submitHeaders,
+          body: formData
         });
+        if (sessionAtDispatch !== activeSessionRef.current) return;
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
           throw new Error(errorData.error || "Failed to submit report");
         }
         const data = await response.json();
+        if (sessionAtDispatch !== activeSessionRef.current) return;
         setReportId(data.id);
         setModalState("submitted");
+        clearDraft(siteId);
       } catch (err) {
+        if (sessionAtDispatch !== activeSessionRef.current) return;
         console.error("Bug reporter: failed to submit report", err);
         setErrorMessage(err instanceof Error ? err.message : "Failed to submit report");
         setModalState("error");
       }
     },
-    [captureResult, apiConfig.apiUrl, apiHeaders, modalState]
+    [
+      captureResult,
+      apiConfig.apiUrl,
+      apiHeaders,
+      submitHeaders,
+      modalState,
+      siteId,
+      onBeforeSubmit,
+      runWithFetchSignal
+    ]
   );
   const handleManualSubmit = useCallback2(() => {
+    setSubmitAlert(null);
     submitReport(messages);
   }, [submitReport, messages]);
   async function sendMessage() {
     if (!input.trim() || isLoading || !captureResult) return;
     const userMessage = input.trim();
     setInput("");
+    setSubmitAlert(null);
     const newMessages = [...messages, { role: "user", content: userMessage }];
     setMessages(newMessages);
     setIsLoading(true);
+    const sessionAtDispatch = activeSessionRef.current;
     try {
-      const response = await fetch(`${apiConfig.apiUrl}/chat`, {
+      const response = await runWithFetchSignal(`${apiConfig.apiUrl}/chat`, {
         method: "POST",
         headers: apiHeaders,
         body: JSON.stringify({
@@ -955,6 +1148,7 @@ function ReportModal({
           clickedElement: captureResult.metadata.clickedElement || null
         })
       });
+      if (sessionAtDispatch !== activeSessionRef.current) return;
       if (response.status === 401) {
         console.error(
           "Bug reporter: invalid or missing API key. Check your BugReporter apiKey prop."
@@ -970,6 +1164,7 @@ function ReportModal({
       }
       if (!response.ok) throw new Error("Failed to get AI response");
       const data = await response.json();
+      if (sessionAtDispatch !== activeSessionRef.current) return;
       setMessages([...newMessages, { role: "assistant", content: data.message }]);
       if (data.readyToSubmit && data.structuredReport) {
         await submitReport(
@@ -978,6 +1173,7 @@ function ReportModal({
         );
       }
     } catch (e) {
+      if (sessionAtDispatch !== activeSessionRef.current) return;
       setMessages([
         ...newMessages,
         {
@@ -986,22 +1182,23 @@ function ReportModal({
         }
       ]);
     } finally {
-      setIsLoading(false);
+      if (sessionAtDispatch === activeSessionRef.current) {
+        setIsLoading(false);
+      }
     }
   }
   function handleClose() {
-    setMessages([]);
+    var _a;
+    (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
+    setMessages([STARTER_ASSISTANT_MESSAGE]);
     setInput("");
     setModalState("chatting");
     setReportId(null);
     setErrorMessage(null);
-    if (screenshotUrl) {
-      URL.revokeObjectURL(screenshotUrl);
-    }
-    setScreenshotUrl(null);
-    hasInitRef.current = false;
+    setSubmitAlert(null);
     onClose();
   }
+  useEscapeKey(handleClose, isOpen);
   function handleKeyDown(e) {
     if (e.key === "Enter" && !e.shiftKey && !isTouchCapable()) {
       e.preventDefault();
@@ -1013,14 +1210,24 @@ function ReportModal({
     "div",
     {
       "data-bug-reporter": true,
-      className: "fixed inset-0 z-[10001] flex items-center justify-center bg-black/50 backdrop-blur-sm",
+      className: "fixed inset-0 z-[calc(var(--jarve-z-base)+1)] flex items-center justify-center bg-black/50 backdrop-blur-sm",
+      style: { ["--jarve-z-base"]: String(zIndexBase) },
       onClick: (e) => {
         if (e.target === e.currentTarget) handleClose();
       },
       children: /* @__PURE__ */ jsxs3(
         "div",
         {
-          className: cn(
+          ref: dialogRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": "jarve-bug-reporter-title",
+          className: cn2(
+            // Self-owned theme wrapper — `dark` toggles the existing Tailwind
+            // `dark:` utilities via the shared `@custom-variant dark (&:is(.dark *))`
+            // rule in styles.css. This makes the widget independent of the
+            // host app's Tailwind darkMode config. See Issue E11.
+            resolvedTheme === "dark" ? "jarve-theme-dark dark" : "jarve-theme-light",
             "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",
@@ -1029,7 +1236,14 @@ function ReportModal({
           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(
+                  "h2",
+                  {
+                    id: "jarve-bug-reporter-title",
+                    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(
@@ -1050,58 +1264,76 @@ 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__ */ 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: "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 rounded-md bg-indigo-600 px-4 py-2 text-sm text-white transition-colors hover:bg-indigo-700",
-                  children: "Done"
-                }
-              )
-            ] }) : 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(
+              "div",
+              {
+                ref: chatScrollRef,
+                "data-testid": "chat-scroll",
+                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: "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 rounded-md bg-indigo-600 px-4 py-2 text-sm text-white transition-colors hover:bg-indigo-700",
+                      children: "Done"
+                    }
+                  )
+                ] }) : 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 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__ */ 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__ */ 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: cn2(
+                        "text-sm leading-relaxed",
+                        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__ */ 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..." })
+                  ] })
+                ] })
+              }
+            ),
+            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: [
+              submitAlert && // onBeforeSubmit rejected the payload — keep the draft and
+              // let the user retry. role="alert" announces to AT users.
+              // See Issue B8.
               /* @__PURE__ */ jsx3(
-                "button",
+                "p",
                 {
-                  onClick: () => setModalState("chatting"),
-                  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"
+                  role: "alert",
+                  className: "rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-900 dark:bg-red-950/40 dark:text-red-300",
+                  children: submitAlert
                 }
-              )
-            ] }) : 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__ */ 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" ? "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__ */ 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__ */ jsxs3("div", { className: "flex flex-col gap-2", children: [
+              ),
               /* @__PURE__ */ jsx3(
                 "textarea",
                 {
@@ -1159,34 +1391,66 @@ function ReportModal({
 }
 
 // src/bug-reporter.tsx
+import { emit, useHasMounted } from "@jarve/widget-shared";
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function isValidApiUrl(raw) {
+  if (typeof raw !== "string" || raw.length === 0) return false;
+  try {
+    const parsed = new URL(raw);
+    if (parsed.protocol === "https:") return true;
+    if (parsed.protocol === "http:" && parsed.hostname === "localhost") return true;
+    return false;
+  } catch (e) {
+    return false;
+  }
+}
 function JarveBugReporter({
   apiUrl,
   apiKey,
+  siteId,
   user,
   buttonPosition,
+  zIndexBase,
+  captureResponseBodies = false,
+  theme,
+  onBeforeSubmit,
   children
 }) {
-  const safeApiKey = apiKey || "";
+  const mounted = useHasMounted();
+  const apiUrlValid = useMemo2(() => isValidApiUrl(apiUrl), [apiUrl]);
+  useEffect4(() => {
+    if (!apiUrlValid) {
+      console.error(
+        `Jarve bug reporter: invalid apiUrl \u2014 widget disabled (received: ${JSON.stringify(apiUrl)})`
+      );
+    }
+  }, [apiUrl, apiUrlValid]);
   const [captureMode, setCaptureMode] = useState4(false);
   const [captureResult, setCaptureResult] = useState4(null);
   const [showModal, setShowModal] = useState4(false);
+  const [isPrimary, setIsPrimary] = useState4(false);
   useEffect4(() => {
+    if (!apiUrlValid || !isPrimary) return;
     startCapturing();
-    startNetworkCapture();
+    startNetworkCapture({ captureResponseBodies });
     return () => {
       stopCapturing();
       stopNetworkCapture();
     };
-  }, []);
+  }, [apiUrlValid, isPrimary, captureResponseBodies]);
   const toggleCaptureMode = useCallback3(() => {
     setCaptureMode((prev) => !prev);
   }, []);
   useEffect4(() => {
     if (typeof window === "undefined") return;
+    if (!apiUrlValid) return;
     if (!window.__jarve_widgets) {
       window.__jarve_widgets = /* @__PURE__ */ new Map();
     }
+    if (window.__jarve_widgets.has("bug-reporter")) {
+      console.warn("JarveBugReporter: instance already mounted; additional instance ignored");
+      return;
+    }
     window.__jarve_widgets.set("bug-reporter", {
       type: "bug-reporter",
       label: "Report a Bug",
@@ -1196,28 +1460,25 @@ function JarveBugReporter({
       isActive: false,
       trigger: toggleCaptureMode
     });
-    window.dispatchEvent(
-      new CustomEvent("jarve:widget-registered", { detail: { type: "bug-reporter" } })
-    );
+    setIsPrimary(true);
+    emit("jarve:widget-registered", { type: "bug-reporter" });
     return () => {
       var _a;
       (_a = window.__jarve_widgets) == null ? void 0 : _a.delete("bug-reporter");
-      window.dispatchEvent(
-        new CustomEvent("jarve:widget-deregistered", { detail: { type: "bug-reporter" } })
-      );
+      setIsPrimary(false);
+      emit("jarve:widget-deregistered", { type: "bug-reporter" });
     };
-  }, [toggleCaptureMode]);
+  }, [toggleCaptureMode, apiUrlValid]);
   useEffect4(() => {
     var _a;
     if (typeof window === "undefined") return;
+    if (!isPrimary) return;
     const entry = (_a = window.__jarve_widgets) == null ? void 0 : _a.get("bug-reporter");
     if (entry) {
       entry.isActive = captureMode || showModal;
-      window.dispatchEvent(
-        new CustomEvent("jarve:state-change", { detail: { type: "bug-reporter" } })
-      );
+      emit("jarve:state-change", { type: "bug-reporter", isActive: entry.isActive });
     }
-  }, [captureMode, showModal]);
+  }, [captureMode, showModal, isPrimary]);
   const handleCapture = useCallback3((result) => {
     setCaptureResult(result);
     setCaptureMode(false);
@@ -1227,49 +1488,66 @@ function JarveBugReporter({
     setCaptureMode(false);
   }, []);
   const handleCloseModal = useCallback3(() => {
+    setCaptureMode(false);
     setShowModal(false);
     setCaptureResult(null);
     clearCapturedErrors();
     clearCapturedNetworkErrors();
   }, []);
-  const siteId = safeApiKey.startsWith("brk_") ? safeApiKey.slice(4, 12) : "external";
+  useEffect4(() => {
+    if (typeof window === "undefined") return;
+    if (!isPrimary) return;
+    window.addEventListener("jarve:close-bug-modal", handleCloseModal);
+    return () => {
+      window.removeEventListener("jarve:close-bug-modal", handleCloseModal);
+    };
+  }, [isPrimary, handleCloseModal]);
   const reporterName = (user == null ? void 0 : user.name) || "Anonymous";
   const reporterEmail = (user == null ? void 0 : user.email) || "unknown@external";
+  if (!apiUrlValid) {
+    return /* @__PURE__ */ jsx4(Fragment3, { children });
+  }
   return /* @__PURE__ */ jsxs4(Fragment3, { children: [
     children,
-    /* @__PURE__ */ jsx4(
-      FloatingButton,
-      {
-        isActive: captureMode,
-        onClick: toggleCaptureMode,
-        position: buttonPosition
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      CaptureOverlay,
-      {
-        isActive: captureMode,
-        siteId,
-        reporterName,
-        reporterEmail,
-        onCapture: handleCapture,
-        onCancel: handleCancelCapture
-      }
-    ),
-    /* @__PURE__ */ jsx4(
-      ReportModal,
-      {
-        isOpen: showModal,
-        captureResult,
-        apiConfig: { apiUrl, apiKey },
-        siteId,
-        user: { name: reporterName, email: reporterEmail },
-        onClose: handleCloseModal
-      }
-    )
+    mounted && isPrimary && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsx4(
+        FloatingButton,
+        {
+          isActive: captureMode,
+          onClick: toggleCaptureMode,
+          position: buttonPosition,
+          zIndexBase
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        CaptureOverlay,
+        {
+          isActive: captureMode,
+          siteId,
+          reporterName,
+          reporterEmail,
+          onCapture: handleCapture,
+          onCancel: handleCancelCapture,
+          zIndexBase
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        ReportModal,
+        {
+          isOpen: showModal,
+          captureResult,
+          apiConfig: { apiUrl, apiKey },
+          siteId,
+          user: { name: reporterName, email: reporterEmail },
+          onClose: handleCloseModal,
+          zIndexBase,
+          theme,
+          onBeforeSubmit
+        }
+      )
+    ] })
   ] });
 }
 export {
   JarveBugReporter
 };
-//# sourceMappingURL=index.mjs.map