spaps-issue-reporting-react 0.6.1 → 0.6.3

package/CHANGELOG.md

@@ -4,13 +4,25 @@
 
 - No changes yet.
 
+## [0.6.2] - 2026-06-20
+
+- Maintenance: align release metadata with the package currently published on
+  npm. The registry now serves `spaps-issue-reporting-react@0.6.2`, so
+  downstream consumers should install from the registry instead of the earlier
+  local proof tarballs.
+
+## [0.6.1] - 2026-06-18
+
+- Maintenance: align package README metadata and changelog top version with the
+  package version.
+
 ## [0.6.0] - 2026-06-07
 
 - Lazy-load voice input (`@elevenlabs/react`) behind a dynamic `import()` so consumers no longer eager-load `livekit-client` (~492KB raw / ~140KB gzip) on first paint. The Scribe voice-capture UI/logic now lives in a code-split `VoiceCapture` chunk that is only fetched when the reporter switches to voice input (`inputMode === "voice"` and voice is permitted); text-only reporting never touches `@elevenlabs`/livekit. Public API (`IssueReportingProvider`, `FloatingIssueReportButton`, `IssueReportingPageConfig`, `ReportableSection`, `useIssueReporting`) and behavior are unchanged.
 - Added opt-in automatic same-origin DOM screenshot capture through `IssueReportingProvider.screenshotCapture`. Capture lazy-loads `html2canvas` only during create submit when enabled, uploads through the host client's `issueReporting.uploadAttachment(file, { filename })`, records coarse `target.metadata.screenshot_capture` status, and continues issue submission without a screenshot if capture/render/upload fails.
 - Added the public `spaps-issue-reporting-react/screenshot-capture` subpath so app-local adapters such as custom ref-area tools can reuse the shared capture, masking, compression, and filename logic without copying generic `html2canvas` code.
 - Added optional `html2canvas >=1.4.0` peer metadata and documented the privacy controls: `data-spaps-screenshot-exclude`, `data-spaps-private`, host `excludeSelectors`, host `maskSelectors`, visible-viewport capture, private SPAPS attachment storage, 10 MiB file limit, and five-attachment cap.
-- Release handoff: `spaps-issue-reporting-react@0.6.0` is still operator-gated because npm currently serves `0.5.0`. Local consumer proofs used `/tmp/spaps-issue-reporting-react-0.6.0-normalized.tgz`, with `spaps-types@1.5.0` and `spaps-sdk@1.11.0` already available on npm. After operator approval, publish `spaps-issue-reporting-react@0.6.0`, reinstall downstream consumers from the registry, and re-run their focused screenshot checks before deployment.
+- Initial release handoff used `/tmp/spaps-issue-reporting-react-0.6.0-normalized.tgz`, with `spaps-types@1.5.0` and `spaps-sdk@1.11.0` already available on npm. The registry publication step has since been superseded by the `0.6.2` release.
 
 ## [0.4.2] - 2026-06-04
 

package/README.md

@@ -400,7 +400,7 @@ and revisit trigger.
 ## Metadata
 
 - `package_name`: `spaps-issue-reporting-react`
-- `latest_version`: `0.6.0`
+- `latest_version`: `0.6.2`
 - `minimum_runtime`: `Node.js >=18.0.0`
 - `api_base_url`: `https://api.sweetpotato.dev`
 

package/dist/{VoiceCapture-WX7J6BWQ.mjs → VoiceCapture-HLUVONFL.mjs}

@@ -141,6 +141,7 @@ function VoiceCapture({
   const [voiceSubmitMetadata, setVoiceSubmitMetadata] = useState(null);
   const [voiceError, setVoiceError] = useState(null);
   const startInFlightRef = useRef(false);
+  const mountedRef = useRef(true);
   const lastStartRequestId = useRef(0);
   const lastAppendRequestId = useRef(0);
   const {
@@ -168,6 +169,12 @@ function VoiceCapture({
   useEffect(() => {
     onSubmitMetadataChange(voiceSubmitMetadata);
   }, [onSubmitMetadataChange, voiceSubmitMetadata]);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
   useEffect(() => {
     return () => {
       disconnectScribe();
@@ -185,6 +192,9 @@ function VoiceCapture({
     setVoiceError(null);
     try {
       const tokenResult = await createVoiceToken();
+      if (!mountedRef.current) {
+        return;
+      }
       setVoiceTokenResult(tokenResult);
       setVoiceSubmitMetadata(tokenResult);
       await connectScribe({
@@ -192,13 +202,21 @@ function VoiceCapture({
         modelId: tokenResult.model_id,
         microphone: voice.microphone
       });
+      if (!mountedRef.current) {
+        disconnectScribe();
+        return;
+      }
       onSelectVoice();
     } catch (startError) {
+      if (!mountedRef.current) {
+        return;
+      }
       setVoiceError(resolveErrorMessage(startError, "Failed to start voice input."));
     } finally {
       startInFlightRef.current = false;
     }
   }, [
+    disconnectScribe,
     connectScribe,
     createVoiceToken,
     isSubmitting,

package/dist/index.js

@@ -174,6 +174,7 @@ function VoiceCapture({
   const [voiceSubmitMetadata, setVoiceSubmitMetadata] = (0, import_react5.useState)(null);
   const [voiceError, setVoiceError] = (0, import_react5.useState)(null);
   const startInFlightRef = (0, import_react5.useRef)(false);
+  const mountedRef = (0, import_react5.useRef)(true);
   const lastStartRequestId = (0, import_react5.useRef)(0);
   const lastAppendRequestId = (0, import_react5.useRef)(0);
   const {
@@ -201,6 +202,12 @@ function VoiceCapture({
   (0, import_react5.useEffect)(() => {
     onSubmitMetadataChange(voiceSubmitMetadata);
   }, [onSubmitMetadataChange, voiceSubmitMetadata]);
+  (0, import_react5.useEffect)(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
   (0, import_react5.useEffect)(() => {
     return () => {
       disconnectScribe();
@@ -218,6 +225,9 @@ function VoiceCapture({
     setVoiceError(null);
     try {
       const tokenResult = await createVoiceToken();
+      if (!mountedRef.current) {
+        return;
+      }
       setVoiceTokenResult(tokenResult);
       setVoiceSubmitMetadata(tokenResult);
       await connectScribe({
@@ -225,13 +235,21 @@ function VoiceCapture({
         modelId: tokenResult.model_id,
         microphone: voice.microphone
       });
+      if (!mountedRef.current) {
+        disconnectScribe();
+        return;
+      }
       onSelectVoice();
     } catch (startError) {
+      if (!mountedRef.current) {
+        return;
+      }
       setVoiceError(resolveErrorMessage(startError, "Failed to start voice input."));
     } finally {
       startInFlightRef.current = false;
     }
   }, [
+    disconnectScribe,
     connectScribe,
     createVoiceToken,
     isSubmitting,
@@ -360,7 +378,7 @@ async function canvasToSizedBlob(canvas, imageType, quality, maxBytes) {
   let currentCanvas = canvas;
   let scaled = false;
   for (const scale of [0.85, 0.7, 0.55, 0.4]) {
-    currentCanvas = scaleCanvas(currentCanvas, scale);
+    currentCanvas = scaleCanvas(canvas, scale);
     scaled = true;
     for (const format of fallbackTypes) {
       for (const candidateQuality of [0.86, 0.72, 0.58, 0.44, 0.32]) {
@@ -447,9 +465,14 @@ async function captureScreenshot(config, context) {
 function resetHtml2CanvasCache() {
   html2canvasPromise = null;
 }
-function maskScreenshotCaptureDocument(clonedDocument, excludeSelectors = DEFAULT_EXCLUDE_SELECTORS, maskSelectors = DEFAULT_MASK_SELECTORS) {
+function maskScreenshotCaptureDocument(clonedDocument, excludeSelectors = DEFAULT_EXCLUDE_SELECTORS, maskSelectors = []) {
   clonedDocument.querySelectorAll([...excludeSelectors, "script"].join(",")).forEach((element) => element.remove());
-  clonedDocument.querySelectorAll(maskSelectors.join(",")).forEach(maskCaptureElement);
+  for (const selector of [...DEFAULT_MASK_SELECTORS, ...maskSelectors]) {
+    try {
+      clonedDocument.querySelectorAll(selector).forEach(maskCaptureElement);
+    } catch {
+    }
+  }
   redactSensitiveTextNodes(clonedDocument.body ?? clonedDocument.documentElement);
 }
 function canUseBrowserCapture() {
@@ -564,7 +587,11 @@ var init_screenshot_capture = __esm({
       "option",
       "select",
       "textarea",
-      '[contenteditable="true"]'
+      // Match every editable region, not just the explicit `contenteditable="true"`
+      // form. Bare (`contenteditable`), empty-string (`contenteditable=""`), and
+      // `contenteditable="plaintext-only"` editors are all editable and must be
+      // masked; only the explicitly disabled `contenteditable="false"` is excluded.
+      '[contenteditable]:not([contenteditable="false"])'
     ];
     SCREENSHOT_CAPTURE_REDACTION_TEXT = "[redacted]";
     ATTACHMENT_MAX_BYTES2 = 10 * 1024 * 1024;
@@ -2026,6 +2053,15 @@ function useAttachmentState(existingAttachments) {
   );
   const [validationErrors, setValidationErrors] = (0, import_react7.useState)([]);
   const [uploadProgress, setUploadProgress] = (0, import_react7.useState)(INITIAL_UPLOAD_PROGRESS);
+  const pendingFilesRef = (0, import_react7.useRef)(pendingFiles);
+  pendingFilesRef.current = pendingFiles;
+  (0, import_react7.useEffect)(() => {
+    return () => {
+      for (const pf of pendingFilesRef.current) {
+        URL.revokeObjectURL(pf.previewUrl);
+      }
+    };
+  }, []);
   const retainedExistingCount = existingAttachments.filter(
     (a) => !removedExistingIds.has(a.id)
   ).length;
@@ -2342,19 +2378,26 @@ function IssueReportModeBanner() {
   if (!reportMode?.isReportMode) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn2("fixed inset-x-4 top-4 flex justify-center", Z_BANNER), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "max-w-xl rounded-full border border-amber-300 bg-amber-50/95 px-4 py-3 text-sm text-amber-950 shadow-lg backdrop-blur", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-medium", children: copy.reportModeTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-amber-900/80", children: copy.reportModeDescription }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "rounded-full border border-amber-400 px-3 py-1 font-medium text-amber-900 transition hover:bg-amber-100",
-        onClick: reportMode.cancelReportMode,
-        children: copy.reportModeCancelAction
-      }
-    )
-  ] }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-spaps-screenshot-exclude": "",
+      className: cn2("fixed inset-x-4 top-4 flex justify-center", Z_BANNER),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "max-w-xl rounded-full border border-amber-300 bg-amber-50/95 px-4 py-3 text-sm text-amber-950 shadow-lg backdrop-blur", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-medium", children: copy.reportModeTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-amber-900/80", children: copy.reportModeDescription }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "rounded-full border border-amber-400 px-3 py-1 font-medium text-amber-900 transition hover:bg-amber-100",
+            onClick: reportMode.cancelReportMode,
+            children: copy.reportModeCancelAction
+          }
+        )
+      ] }) })
+    }
+  );
 }
 function IssueList({
   filter,
@@ -2476,6 +2519,7 @@ function IssueReportPopover({ children }) {
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           Popover.Content,
           {
+            "data-spaps-screenshot-exclude": "",
             align: "end",
             side: "top",
             sideOffset: 12,
@@ -2635,6 +2679,9 @@ function IssueReportModal() {
   const { createMutation, updateMutation, replyMutation } = useIssueReportingMutations();
   const [note, setNote] = (0, import_react7.useState)("");
   const [submitError, setSubmitError] = (0, import_react7.useState)(null);
+  const submitInFlightRef = (0, import_react7.useRef)(false);
+  const screenshotCacheRef = (0, import_react7.useRef)(null);
+  const [isSubmitInFlight, setIsSubmitInFlight] = (0, import_react7.useState)(false);
   const [inputMode, setInputMode] = (0, import_react7.useState)(defaultInputMode);
   const [committedTranscript, setCommittedTranscript] = (0, import_react7.useState)("");
   const [voiceSubmitMetadata, setVoiceSubmitMetadata] = (0, import_react7.useState)(null);
@@ -2649,7 +2696,7 @@ function IssueReportModal() {
     [issue, mode]
   );
   const attachmentState = useAttachmentState(existingAttachments);
-  const isSubmitting = createMutation.isPending || updateMutation.isPending || replyMutation.isPending || attachmentState.uploadProgress.phase === "uploading";
+  const isSubmitting = isSubmitInFlight || createMutation.isPending || updateMutation.isPending || replyMutation.isPending || attachmentState.uploadProgress.phase === "uploading";
   const resetVoiceCapture = (0, import_react7.useCallback)(() => {
     setInputMode(defaultInputMode);
     setCommittedTranscript("");
@@ -2658,6 +2705,7 @@ function IssueReportModal() {
     setVoiceAppendRequestId(0);
   }, [defaultInputMode]);
   useIsomorphicLayoutEffect(() => {
+    screenshotCacheRef.current = null;
     if (!isOpen) {
       resetVoiceCapture();
       attachmentState.reset();
@@ -2691,9 +2739,16 @@ function IssueReportModal() {
     setInputMode("voice");
     setVoiceStartRequestId((current) => current + 1);
   };
+  const handleSelectText = () => {
+    setInputMode("text");
+    setVoiceStartRequestId(0);
+    setVoiceAppendRequestId(0);
+  };
   const handleAppendTranscript = (transcript) => {
     setNote((current) => appendTranscriptToNote(current, transcript));
     setInputMode("text");
+    setVoiceStartRequestId(0);
+    setVoiceAppendRequestId(0);
   };
   const uploadPendingFiles = async () => {
     const upload = client.issueReporting.uploadAttachment;
@@ -2731,40 +2786,54 @@ function IssueReportModal() {
     if (!target || !isValid || isSubmitting) {
       return;
     }
+    if (submitInFlightRef.current) {
+      return;
+    }
+    submitInFlightRef.current = true;
+    setIsSubmitInFlight(true);
     setSubmitError(null);
     try {
       const noteForSubmit = normalizedNote;
       let newAttachmentIds = [];
       let screenshotCaptureMetadata = null;
       if (screenshotCapture?.enabled && mode === "create" && canUseAttachments && client.issueReporting.uploadAttachment) {
-        try {
-          const { captureScreenshot: captureScreenshot2 } = await Promise.resolve().then(() => (init_screenshot_capture(), screenshot_capture_exports));
-          const captureResult = await captureScreenshot2(screenshotCapture, {
-            pageUrl: target.page_url,
-            createMode,
-            inputMode: effectiveInputMode,
-            target: {
-              componentKey: target.component_key,
-              componentLabel: target.component_label,
-              surfaceRef: target.surface_ref,
-              metadata: target.metadata
-            }
-          });
-          const uploaded = await client.issueReporting.uploadAttachment(
-            captureResult.blob,
-            { filename: captureResult.filename }
-          );
-          newAttachmentIds.push(uploaded.id);
-          screenshotCaptureMetadata = buildScreenshotCaptureMetadata(
-            screenshotCapture,
-            "attached"
-          );
-        } catch (captureError) {
-          screenshotCaptureMetadata = buildScreenshotCaptureMetadata(
-            screenshotCapture,
-            "failed"
-          );
-          screenshotCapture.onCaptureError?.(captureError);
+        if (screenshotCacheRef.current) {
+          newAttachmentIds.push(screenshotCacheRef.current.attachmentId);
+          screenshotCaptureMetadata = screenshotCacheRef.current.metadata;
+        } else {
+          try {
+            const { captureScreenshot: captureScreenshot2 } = await Promise.resolve().then(() => (init_screenshot_capture(), screenshot_capture_exports));
+            const captureResult = await captureScreenshot2(screenshotCapture, {
+              pageUrl: target.page_url,
+              createMode,
+              inputMode: effectiveInputMode,
+              target: {
+                componentKey: target.component_key,
+                componentLabel: target.component_label,
+                surfaceRef: target.surface_ref,
+                metadata: target.metadata
+              }
+            });
+            const uploaded = await client.issueReporting.uploadAttachment(
+              captureResult.blob,
+              { filename: captureResult.filename }
+            );
+            newAttachmentIds.push(uploaded.id);
+            screenshotCaptureMetadata = buildScreenshotCaptureMetadata(
+              screenshotCapture,
+              "attached"
+            );
+            screenshotCacheRef.current = {
+              attachmentId: uploaded.id,
+              metadata: screenshotCaptureMetadata
+            };
+          } catch (captureError) {
+            screenshotCaptureMetadata = buildScreenshotCaptureMetadata(
+              screenshotCapture,
+              "failed"
+            );
+            screenshotCapture.onCaptureError?.(captureError);
+          }
         }
       }
       if (canUseAttachments && attachmentState.pendingFiles.length > 0) {
@@ -2832,13 +2901,23 @@ function IssueReportModal() {
         (current) => current.phase === "uploading" ? { ...current, phase: "error", error: message } : current
       );
       setSubmitError(message);
+    } finally {
+      submitInFlightRef.current = false;
+      setIsSubmitInFlight(false);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Root, { open: isOpen, onOpenChange: (open) => !open && handleCloseModal(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Dialog.Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Overlay, { className: cn2("fixed inset-0 bg-slate-950/45 backdrop-blur-sm", Z_MODAL_OVERLAY) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Dialog.Overlay,
+      {
+        "data-spaps-screenshot-exclude": "",
+        className: cn2("fixed inset-0 bg-slate-950/45 backdrop-blur-sm", Z_MODAL_OVERLAY)
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       Dialog.Content,
       {
+        "data-spaps-screenshot-exclude": "",
         className: cn2(
           "fixed left-1/2 top-1/2 max-h-[90vh] max-w-xl -translate-x-1/2 -translate-y-1/2 overflow-y-auto border border-slate-200 bg-white p-6 focus:outline-none",
           Z_MODAL_CONTENT,
@@ -2884,7 +2963,7 @@ function IssueReportModal() {
               attachmentValidationErrors: attachmentState.validationErrors,
               onRetryHydration: () => void retryModalHydration(),
               onClose: handleCloseModal,
-              onSelectText: () => setInputMode("text"),
+              onSelectText: handleSelectText,
               onSelectVoice: () => setInputMode("voice"),
               onRequestStartVoiceInput: handleRequestStartVoiceInput,
               onRequestAppendTranscript: handleRequestAppendTranscript,
@@ -2933,35 +3012,42 @@ function FloatingIssueReportButton({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IssueReportModeBanner, {}),
-    !isReportMode ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn2("fixed bottom-12 right-4", Z_FLOATING_BUTTON, positionClassName), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IssueReportPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      "button",
+    !isReportMode ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
       {
-        type: "button",
-        "aria-label": needsResponse ? `${copy.entryAriaLabel} (${copy.threadNeedsResponseBadge})` : copy.entryAriaLabel,
-        onClick: () => isPopoverOpen ? closePopover() : openPopover(),
-        className: cn2(
-          "relative flex h-12 w-12 items-center justify-center rounded-full border border-slate-200 bg-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-slate-300",
-          status.isPending && "animate-pulse",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_react6.BugBeetle,
-            {
-              className: cn2("h-6 w-6", getEntryPointClassName(entryPointState)),
-              weight: "fill"
-            }
-          ),
-          needsResponse ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "span",
-            {
-              "data-testid": "issue-report-needs-response-badge",
-              className: "absolute -right-0.5 -top-0.5 h-3 w-3 rounded-full border-2 border-white bg-amber-500"
-            }
-          ) : null
-        ]
+        "data-spaps-screenshot-exclude": "",
+        className: cn2("fixed bottom-12 right-4", Z_FLOATING_BUTTON, positionClassName),
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IssueReportPopover, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "button",
+          {
+            type: "button",
+            "aria-label": needsResponse ? `${copy.entryAriaLabel} (${copy.threadNeedsResponseBadge})` : copy.entryAriaLabel,
+            onClick: () => isPopoverOpen ? closePopover() : openPopover(),
+            className: cn2(
+              "relative flex h-12 w-12 items-center justify-center rounded-full border border-slate-200 bg-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-slate-300",
+              status.isPending && "animate-pulse",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_react6.BugBeetle,
+                {
+                  className: cn2("h-6 w-6", getEntryPointClassName(entryPointState)),
+                  weight: "fill"
+                }
+              ),
+              needsResponse ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "span",
+                {
+                  "data-testid": "issue-report-needs-response-badge",
+                  className: "absolute -right-0.5 -top-0.5 h-3 w-3 rounded-full border-2 border-white bg-amber-500"
+                }
+              ) : null
+            ]
+          }
+        ) })
       }
-    ) }) }) : null,
+    ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IssueReportModal, {})
   ] });
 }

package/dist/index.mjs

@@ -839,7 +839,7 @@ var POPOVER_SHADOW = "shadow-[0_18px_48px_rgba(15,23,42,0.18)]";
 var MODAL_SHADOW = "shadow-[0_28px_80px_rgba(15,23,42,0.24)]";
 var BADGE_TEXT = "text-[11px]";
 var LABEL_TEXT = "text-[11px]";
-var VoiceCapture = React2.lazy(() => import("./VoiceCapture-WX7J6BWQ.mjs"));
+var VoiceCapture = React2.lazy(() => import("./VoiceCapture-HLUVONFL.mjs"));
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect2 : React2.useLayoutEffect;
 var SCREENSHOT_CAPTURE_METADATA_KEY = "screenshot_capture";
 function truncate(value, max = 80) {
@@ -1438,6 +1438,15 @@ function useAttachmentState(existingAttachments) {
   );
   const [validationErrors, setValidationErrors] = useState2([]);
   const [uploadProgress, setUploadProgress] = useState2(INITIAL_UPLOAD_PROGRESS);
+  const pendingFilesRef = useRef2(pendingFiles);
+  pendingFilesRef.current = pendingFiles;
+  useEffect2(() => {
+    return () => {
+      for (const pf of pendingFilesRef.current) {
+        URL.revokeObjectURL(pf.previewUrl);
+      }
+    };
+  }, []);
   const retainedExistingCount = existingAttachments.filter(
     (a) => !removedExistingIds.has(a.id)
   ).length;
@@ -1754,19 +1763,26 @@ function IssueReportModeBanner() {
   if (!reportMode?.isReportMode) {
     return null;
   }
-  return /* @__PURE__ */ jsx2("div", { className: cn("fixed inset-x-4 top-4 flex justify-center", Z_BANNER), children: /* @__PURE__ */ jsx2("div", { className: "max-w-xl rounded-full border border-amber-300 bg-amber-50/95 px-4 py-3 text-sm text-amber-950 shadow-lg backdrop-blur", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [
-    /* @__PURE__ */ jsx2("div", { className: "font-medium", children: copy.reportModeTitle }),
-    /* @__PURE__ */ jsx2("div", { className: "text-amber-900/80", children: copy.reportModeDescription }),
-    /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        className: "rounded-full border border-amber-400 px-3 py-1 font-medium text-amber-900 transition hover:bg-amber-100",
-        onClick: reportMode.cancelReportMode,
-        children: copy.reportModeCancelAction
-      }
-    )
-  ] }) }) });
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-spaps-screenshot-exclude": "",
+      className: cn("fixed inset-x-4 top-4 flex justify-center", Z_BANNER),
+      children: /* @__PURE__ */ jsx2("div", { className: "max-w-xl rounded-full border border-amber-300 bg-amber-50/95 px-4 py-3 text-sm text-amber-950 shadow-lg backdrop-blur", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [
+        /* @__PURE__ */ jsx2("div", { className: "font-medium", children: copy.reportModeTitle }),
+        /* @__PURE__ */ jsx2("div", { className: "text-amber-900/80", children: copy.reportModeDescription }),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "rounded-full border border-amber-400 px-3 py-1 font-medium text-amber-900 transition hover:bg-amber-100",
+            onClick: reportMode.cancelReportMode,
+            children: copy.reportModeCancelAction
+          }
+        )
+      ] }) })
+    }
+  );
 }
 function IssueList({
   filter,
@@ -1888,6 +1904,7 @@ function IssueReportPopover({ children }) {
         /* @__PURE__ */ jsx2(Popover.Portal, { children: /* @__PURE__ */ jsx2(
           Popover.Content,
           {
+            "data-spaps-screenshot-exclude": "",
             align: "end",
             side: "top",
             sideOffset: 12,
@@ -2047,6 +2064,9 @@ function IssueReportModal() {
   const { createMutation, updateMutation, replyMutation } = useIssueReportingMutations();
   const [note, setNote] = useState2("");
   const [submitError, setSubmitError] = useState2(null);
+  const submitInFlightRef = useRef2(false);
+  const screenshotCacheRef = useRef2(null);
+  const [isSubmitInFlight, setIsSubmitInFlight] = useState2(false);
   const [inputMode, setInputMode] = useState2(defaultInputMode);
   const [committedTranscript, setCommittedTranscript] = useState2("");
   const [voiceSubmitMetadata, setVoiceSubmitMetadata] = useState2(null);
@@ -2061,7 +2081,7 @@ function IssueReportModal() {
     [issue, mode]
   );
   const attachmentState = useAttachmentState(existingAttachments);
-  const isSubmitting = createMutation.isPending || updateMutation.isPending || replyMutation.isPending || attachmentState.uploadProgress.phase === "uploading";
+  const isSubmitting = isSubmitInFlight || createMutation.isPending || updateMutation.isPending || replyMutation.isPending || attachmentState.uploadProgress.phase === "uploading";
   const resetVoiceCapture = useCallback2(() => {
     setInputMode(defaultInputMode);
     setCommittedTranscript("");
@@ -2070,6 +2090,7 @@ function IssueReportModal() {
     setVoiceAppendRequestId(0);
   }, [defaultInputMode]);
   useIsomorphicLayoutEffect(() => {
+    screenshotCacheRef.current = null;
     if (!isOpen) {
       resetVoiceCapture();
       attachmentState.reset();
@@ -2103,9 +2124,16 @@ function IssueReportModal() {
     setInputMode("voice");
     setVoiceStartRequestId((current) => current + 1);
   };
+  const handleSelectText = () => {
+    setInputMode("text");
+    setVoiceStartRequestId(0);
+    setVoiceAppendRequestId(0);
+  };
   const handleAppendTranscript = (transcript) => {
     setNote((current) => appendTranscriptToNote(current, transcript));
     setInputMode("text");
+    setVoiceStartRequestId(0);
+    setVoiceAppendRequestId(0);
   };
   const uploadPendingFiles = async () => {
     const upload = client.issueReporting.uploadAttachment;
@@ -2143,40 +2171,54 @@ function IssueReportModal() {
     if (!target || !isValid || isSubmitting) {
       return;
     }
+    if (submitInFlightRef.current) {
+      return;
+    }
+    submitInFlightRef.current = true;
+    setIsSubmitInFlight(true);
     setSubmitError(null);
     try {
       const noteForSubmit = normalizedNote;
       let newAttachmentIds = [];
       let screenshotCaptureMetadata = null;
       if (screenshotCapture?.enabled && mode === "create" && canUseAttachments && client.issueReporting.uploadAttachment) {
-        try {
-          const { captureScreenshot } = await import("./screenshot-capture.mjs");
-          const captureResult = await captureScreenshot(screenshotCapture, {
-            pageUrl: target.page_url,
-            createMode,
-            inputMode: effectiveInputMode,
-            target: {
-              componentKey: target.component_key,
-              componentLabel: target.component_label,
-              surfaceRef: target.surface_ref,
-              metadata: target.metadata
-            }
-          });
-          const uploaded = await client.issueReporting.uploadAttachment(
-            captureResult.blob,
-            { filename: captureResult.filename }
-          );
-          newAttachmentIds.push(uploaded.id);
-          screenshotCaptureMetadata = buildScreenshotCaptureMetadata(
-            screenshotCapture,
-            "attached"
-          );
-        } catch (captureError) {
-          screenshotCaptureMetadata = buildScreenshotCaptureMetadata(
-            screenshotCapture,
-            "failed"
-          );
-          screenshotCapture.onCaptureError?.(captureError);
+        if (screenshotCacheRef.current) {
+          newAttachmentIds.push(screenshotCacheRef.current.attachmentId);
+          screenshotCaptureMetadata = screenshotCacheRef.current.metadata;
+        } else {
+          try {
+            const { captureScreenshot } = await import("./screenshot-capture.mjs");
+            const captureResult = await captureScreenshot(screenshotCapture, {
+              pageUrl: target.page_url,
+              createMode,
+              inputMode: effectiveInputMode,
+              target: {
+                componentKey: target.component_key,
+                componentLabel: target.component_label,
+                surfaceRef: target.surface_ref,
+                metadata: target.metadata
+              }
+            });
+            const uploaded = await client.issueReporting.uploadAttachment(
+              captureResult.blob,
+              { filename: captureResult.filename }
+            );
+            newAttachmentIds.push(uploaded.id);
+            screenshotCaptureMetadata = buildScreenshotCaptureMetadata(
+              screenshotCapture,
+              "attached"
+            );
+            screenshotCacheRef.current = {
+              attachmentId: uploaded.id,
+              metadata: screenshotCaptureMetadata
+            };
+          } catch (captureError) {
+            screenshotCaptureMetadata = buildScreenshotCaptureMetadata(
+              screenshotCapture,
+              "failed"
+            );
+            screenshotCapture.onCaptureError?.(captureError);
+          }
         }
       }
       if (canUseAttachments && attachmentState.pendingFiles.length > 0) {
@@ -2244,13 +2286,23 @@ function IssueReportModal() {
         (current) => current.phase === "uploading" ? { ...current, phase: "error", error: message } : current
       );
       setSubmitError(message);
+    } finally {
+      submitInFlightRef.current = false;
+      setIsSubmitInFlight(false);
     }
   };
   return /* @__PURE__ */ jsx2(Dialog.Root, { open: isOpen, onOpenChange: (open) => !open && handleCloseModal(), children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx2(Dialog.Overlay, { className: cn("fixed inset-0 bg-slate-950/45 backdrop-blur-sm", Z_MODAL_OVERLAY) }),
+    /* @__PURE__ */ jsx2(
+      Dialog.Overlay,
+      {
+        "data-spaps-screenshot-exclude": "",
+        className: cn("fixed inset-0 bg-slate-950/45 backdrop-blur-sm", Z_MODAL_OVERLAY)
+      }
+    ),
     /* @__PURE__ */ jsxs(
       Dialog.Content,
       {
+        "data-spaps-screenshot-exclude": "",
         className: cn(
           "fixed left-1/2 top-1/2 max-h-[90vh] max-w-xl -translate-x-1/2 -translate-y-1/2 overflow-y-auto border border-slate-200 bg-white p-6 focus:outline-none",
           Z_MODAL_CONTENT,
@@ -2296,7 +2348,7 @@ function IssueReportModal() {
               attachmentValidationErrors: attachmentState.validationErrors,
               onRetryHydration: () => void retryModalHydration(),
               onClose: handleCloseModal,
-              onSelectText: () => setInputMode("text"),
+              onSelectText: handleSelectText,
               onSelectVoice: () => setInputMode("voice"),
               onRequestStartVoiceInput: handleRequestStartVoiceInput,
               onRequestAppendTranscript: handleRequestAppendTranscript,
@@ -2345,35 +2397,42 @@ function FloatingIssueReportButton({
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx2(IssueReportModeBanner, {}),
-    !isReportMode ? /* @__PURE__ */ jsx2("div", { className: cn("fixed bottom-12 right-4", Z_FLOATING_BUTTON, positionClassName), children: /* @__PURE__ */ jsx2(IssueReportPopover, { children: /* @__PURE__ */ jsxs(
-      "button",
+    !isReportMode ? /* @__PURE__ */ jsx2(
+      "div",
       {
-        type: "button",
-        "aria-label": needsResponse ? `${copy.entryAriaLabel} (${copy.threadNeedsResponseBadge})` : copy.entryAriaLabel,
-        onClick: () => isPopoverOpen ? closePopover() : openPopover(),
-        className: cn(
-          "relative flex h-12 w-12 items-center justify-center rounded-full border border-slate-200 bg-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-slate-300",
-          status.isPending && "animate-pulse",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx2(
-            BugBeetle,
-            {
-              className: cn("h-6 w-6", getEntryPointClassName(entryPointState)),
-              weight: "fill"
-            }
-          ),
-          needsResponse ? /* @__PURE__ */ jsx2(
-            "span",
-            {
-              "data-testid": "issue-report-needs-response-badge",
-              className: "absolute -right-0.5 -top-0.5 h-3 w-3 rounded-full border-2 border-white bg-amber-500"
-            }
-          ) : null
-        ]
+        "data-spaps-screenshot-exclude": "",
+        className: cn("fixed bottom-12 right-4", Z_FLOATING_BUTTON, positionClassName),
+        children: /* @__PURE__ */ jsx2(IssueReportPopover, { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-label": needsResponse ? `${copy.entryAriaLabel} (${copy.threadNeedsResponseBadge})` : copy.entryAriaLabel,
+            onClick: () => isPopoverOpen ? closePopover() : openPopover(),
+            className: cn(
+              "relative flex h-12 w-12 items-center justify-center rounded-full border border-slate-200 bg-white shadow-lg transition hover:-translate-y-0.5 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-slate-300",
+              status.isPending && "animate-pulse",
+              className
+            ),
+            children: [
+              /* @__PURE__ */ jsx2(
+                BugBeetle,
+                {
+                  className: cn("h-6 w-6", getEntryPointClassName(entryPointState)),
+                  weight: "fill"
+                }
+              ),
+              needsResponse ? /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  "data-testid": "issue-report-needs-response-badge",
+                  className: "absolute -right-0.5 -top-0.5 h-3 w-3 rounded-full border-2 border-white bg-amber-500"
+                }
+              ) : null
+            ]
+          }
+        ) })
       }
-    ) }) }) : null,
+    ) : null,
     /* @__PURE__ */ jsx2(IssueReportModal, {})
   ] });
 }

package/dist/screenshot-capture.js

@@ -46,7 +46,11 @@ var DEFAULT_MASK_SELECTORS = [
   "option",
   "select",
   "textarea",
-  '[contenteditable="true"]'
+  // Match every editable region, not just the explicit `contenteditable="true"`
+  // form. Bare (`contenteditable`), empty-string (`contenteditable=""`), and
+  // `contenteditable="plaintext-only"` editors are all editable and must be
+  // masked; only the explicitly disabled `contenteditable="false"` is excluded.
+  '[contenteditable]:not([contenteditable="false"])'
 ];
 var SCREENSHOT_CAPTURE_REDACTION_TEXT = "[redacted]";
 var ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
@@ -114,7 +118,7 @@ async function canvasToSizedBlob(canvas, imageType, quality, maxBytes) {
   let currentCanvas = canvas;
   let scaled = false;
   for (const scale of [0.85, 0.7, 0.55, 0.4]) {
-    currentCanvas = scaleCanvas(currentCanvas, scale);
+    currentCanvas = scaleCanvas(canvas, scale);
     scaled = true;
     for (const format of fallbackTypes) {
       for (const candidateQuality of [0.86, 0.72, 0.58, 0.44, 0.32]) {
@@ -201,9 +205,14 @@ async function captureScreenshot(config, context) {
 function resetHtml2CanvasCache() {
   html2canvasPromise = null;
 }
-function maskScreenshotCaptureDocument(clonedDocument, excludeSelectors = DEFAULT_EXCLUDE_SELECTORS, maskSelectors = DEFAULT_MASK_SELECTORS) {
+function maskScreenshotCaptureDocument(clonedDocument, excludeSelectors = DEFAULT_EXCLUDE_SELECTORS, maskSelectors = []) {
   clonedDocument.querySelectorAll([...excludeSelectors, "script"].join(",")).forEach((element) => element.remove());
-  clonedDocument.querySelectorAll(maskSelectors.join(",")).forEach(maskCaptureElement);
+  for (const selector of [...DEFAULT_MASK_SELECTORS, ...maskSelectors]) {
+    try {
+      clonedDocument.querySelectorAll(selector).forEach(maskCaptureElement);
+    } catch {
+    }
+  }
   redactSensitiveTextNodes(clonedDocument.body ?? clonedDocument.documentElement);
 }
 function canUseBrowserCapture() {

package/dist/screenshot-capture.mjs

@@ -8,7 +8,11 @@ var DEFAULT_MASK_SELECTORS = [
   "option",
   "select",
   "textarea",
-  '[contenteditable="true"]'
+  // Match every editable region, not just the explicit `contenteditable="true"`
+  // form. Bare (`contenteditable`), empty-string (`contenteditable=""`), and
+  // `contenteditable="plaintext-only"` editors are all editable and must be
+  // masked; only the explicitly disabled `contenteditable="false"` is excluded.
+  '[contenteditable]:not([contenteditable="false"])'
 ];
 var SCREENSHOT_CAPTURE_REDACTION_TEXT = "[redacted]";
 var ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
@@ -76,7 +80,7 @@ async function canvasToSizedBlob(canvas, imageType, quality, maxBytes) {
   let currentCanvas = canvas;
   let scaled = false;
   for (const scale of [0.85, 0.7, 0.55, 0.4]) {
-    currentCanvas = scaleCanvas(currentCanvas, scale);
+    currentCanvas = scaleCanvas(canvas, scale);
     scaled = true;
     for (const format of fallbackTypes) {
       for (const candidateQuality of [0.86, 0.72, 0.58, 0.44, 0.32]) {
@@ -163,9 +167,14 @@ async function captureScreenshot(config, context) {
 function resetHtml2CanvasCache() {
   html2canvasPromise = null;
 }
-function maskScreenshotCaptureDocument(clonedDocument, excludeSelectors = DEFAULT_EXCLUDE_SELECTORS, maskSelectors = DEFAULT_MASK_SELECTORS) {
+function maskScreenshotCaptureDocument(clonedDocument, excludeSelectors = DEFAULT_EXCLUDE_SELECTORS, maskSelectors = []) {
   clonedDocument.querySelectorAll([...excludeSelectors, "script"].join(",")).forEach((element) => element.remove());
-  clonedDocument.querySelectorAll(maskSelectors.join(",")).forEach(maskCaptureElement);
+  for (const selector of [...DEFAULT_MASK_SELECTORS, ...maskSelectors]) {
+    try {
+      clonedDocument.querySelectorAll(selector).forEach(maskCaptureElement);
+    } catch {
+    }
+  }
   redactSensitiveTextNodes(clonedDocument.body ?? clonedDocument.documentElement);
 }
 function canUseBrowserCapture() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spaps-issue-reporting-react",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Shared React issue-reporting UI for Sweet Potato platform consumers",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,7 +52,7 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
     "date-fns": "^4.1.0",
-    "spaps-types": "^1.5.0"
+    "spaps-types": "^1.5.2"
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",