spaps-issue-reporting-react 0.4.2 → 0.6.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## [Unreleased]
 
+- No changes yet.
+
+## [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.
+
+## [0.4.2] - 2026-06-04
+
 - Added the reporter-visible operator-to-reporter conversation thread (`IssueReportMessageThread`), rendered inside the issue detail modal when the client implements `issueReporting.listMessages`/`submitMessage`. It shows only `active`, reporter-visible projection rows (retracted/superseded/non-visible excluded), distinguishes operator vs reporter authorship and message kind, exposes a `needs_response` affordance plus a floating-entrypoint badge, and includes a clarification-response composer that submits with a client-generated `idempotency_key` and handles `409 ISSUE_REPORT_MESSAGE_CONFLICT`.
 
 ## [0.4.1] - 2026-05-16

package/README.md

@@ -18,7 +18,7 @@ This package targets `Node.js >=18` and React 18+. Voice input uses the package'
 | --- | --- |
 | A visible issue-report entry point | Floating button with open/recent state |
 | A guided reporting flow | Page-first create flow, optional section picking, create/edit/reply modal |
-| Screenshot evidence | Optional picker that uploads private PNG/JPEG/WebP attachments through the host client |
+| Screenshot evidence | Optional picker and opt-in lazy DOM capture that upload private PNG/JPEG/WebP attachments through the host client |
 | A lightweight integration contract | Any client that exposes `issueReporting.*` methods |
 | App-level control | Eligibility, reporter identity, scope, page policy, and copy stay in your app |
 
@@ -73,6 +73,7 @@ export function AppShell() {
 - A client with `issueReporting.getStatus`, `list`, `get`, `create`, `update`, and `reply`.
 - A client with `issueReporting.createVoiceToken` when `inputModes` includes `voice`.
 - A client with `issueReporting.uploadAttachment(file, { filename })` when you want screenshot uploads.
+- For automatic screenshot capture, `spaps-sdk >=1.10.1` or an equivalent client that implements `issueReporting.uploadAttachment(file, { filename })`.
 - Optionally, a client with `issueReporting.listMessages(issueReportId)` and
   `issueReporting.submitMessage(issueReportId, { body, idempotency_key })` to wire the
   operator-to-reporter message thread (and its `needs_response` badge). When these are present,
@@ -151,7 +152,93 @@ const client = {
 
 The picker accepts PNG, JPEG, and WebP files, enforces the 10 MiB per-file limit and 5-screenshot report limit, previews pending files, and preserves existing attachments while editing. On submit, it uploads pending files first and sends only attachment IDs through `attachment_ids`, `add_attachment_ids`, or `remove_attachment_ids`.
 
-This package does not store screenshots, generate public URLs, or redact image content. SPAPS stores screenshots through its shared hosted-asset boundary as private objects, and access URLs are minted by the backend after authorization. Host apps should warn users before upload when a screenshot might include PHI, credentials, payment data, or other sensitive content.
+This package does not store screenshots, generate public URLs, or perform pixel/OCR redaction after capture. SPAPS stores screenshots through its shared hosted-asset boundary as private objects, and access URLs are minted by the backend after authorization. The automatic capture path masks common sensitive controls and token-like text in the cloned DOM before rendering, but host apps should still warn users before upload when a screenshot might include PHI, credentials, payment data, or other sensitive content.
+
+### Automatic Screenshot Capture
+
+Automatic DOM capture is opt-in and lazy. Apps that omit `screenshotCapture` or set `enabled: false` get no behavioral change and do not download `html2canvas`.
+
+**Peer dependency:** install `html2canvas` (>=1.4.0) as an optional peer in the consuming app. The capture module only loads via dynamic `import()` when a report is submitted with capture enabled.
+
+```bash
+npm install html2canvas
+```
+
+```tsx
+<IssueReportingProvider
+  client={spaps}
+  isEligible={true}
+  screenshotCapture={{
+    enabled: true,
+    captureOn: "before_submit",
+    scope: "visible_viewport",
+    imageType: "image/png",
+    excludeSelectors: [
+      "[data-spaps-screenshot-exclude]",
+      "[data-spaps-private]",
+    ],
+    failureBehavior: "continue_without_screenshot",
+    onCaptureError: (err) => console.warn("Screenshot capture failed:", err),
+  }}
+>
+  <FloatingIssueReportButton />
+</IssueReportingProvider>
+```
+
+`screenshotCapture` maps to `IssueReportingScreenshotCaptureConfig` in `src/types.ts`:
+
+| Field | Behavior |
+| --- | --- |
+| `enabled` | Required opt-in. `false` or an absent prop means no DOM capture, no lazy import, and no behavior change. |
+| `captureOn` | Only `"before_submit"` is supported: capture after the reporter submits and before pending attachments upload. |
+| `scope` | `"visible_viewport"` by default. `"selected_reportable_target"` records the selected target in capture context; to narrow pixels to that section, pass `rootElement` or a getter that returns the selected same-origin element. |
+| `imageType` | Defaults to `"image/png"`; must stay within SPAPS-supported PNG/JPEG/WebP uploads. |
+| `filename` | Optional static name or callback `(context) => string`. The upload flows through `issueReporting.uploadAttachment(file, { filename })`. |
+| `rootElement` | Optional same-origin element or getter for host shells that need to exclude app chrome or capture a selected section. If omitted, capture starts from `document.documentElement` and is cropped to the visible viewport. |
+| `rect` | Optional visible-viewport crop rectangle or getter. Custom consumers can use this for click-and-drag/refarea tools while still sharing the package capture implementation. |
+| `excludeSelectors` | Optional extra selectors to omit. The implementation always honors `[data-spaps-screenshot-exclude]` and `[data-spaps-private]` as privacy markers. Invalid custom selectors are ignored so they cannot block submission. |
+| `maskSelectors` | Optional selectors to mask in the cloned DOM before rendering. Defaults mask form controls and editable regions. |
+| `pixelRatio` | Optional render scale, clamped to `1..2`. Defaults to `window.devicePixelRatio` within that range. |
+| `quality` | Optional image quality passed to canvas encoding for lossy formats. |
+| `maxBytes` | Cannot exceed the SPAPS 10 MiB attachment limit. An automatic screenshot counts toward the existing five attachment cap. |
+| `failureBehavior` | Only `"continue_without_screenshot"` is supported. Capture/render/upload failure does not block issue submission. |
+| `onCaptureError` | Optional host callback for telemetry or a local warning when capture fails. Receives the raw browser error; raw error text is not stored in issue metadata by this package. |
+
+Minimum SDK capability: `spaps-sdk >=1.10.1` or an equivalent client implementing `issueReporting.uploadAttachment(file, options)` returning `IssueReportAttachmentOut`.
+
+What is captured:
+
+- Automatic capture is opt-in and lazy. It never runs on provider mount, page load, history view, edit, reply, or when the upload helper is absent.
+- The capture module dynamically imports `html2canvas` only during create submit after `screenshotCapture.enabled === true`.
+- Capture is cropped to the current visible viewport dimensions. It does not capture hidden browser chrome, full-page scrollback, background tabs, or data outside the visible page.
+- `html2canvas` renders same-origin DOM it can access. Cross-origin iframes and tainted canvases are not a supported capture target.
+
+Custom consumers that do not use the shared modal can import the same primitive without reaching into private build output:
+
+```ts
+import { captureScreenshot } from "spaps-issue-reporting-react/screenshot-capture";
+```
+
+The subpath also exports `maskScreenshotCaptureDocument`, `SCREENSHOT_CAPTURE_REDACTION_TEXT`, and the related screenshot capture types for app-local adapters.
+
+Sensitive-region exclusion:
+
+- Mark sensitive DOM with `data-spaps-screenshot-exclude` or `data-spaps-private`.
+- Add host-specific `excludeSelectors` for reusable sensitive regions such as account numbers, tokens, patient identifiers, or payment fields.
+- Exclusion is omission during rendering, not image-content redaction after capture. The capture path masks common cloned DOM controls and token-like text, but it does not inspect, blur, OCR, or redact rendered pixels. Host apps own warnings and exclusion markers for sensitive surfaces.
+
+Capture metadata and fallback:
+
+- On successful automatic capture, create payload metadata includes `target.metadata.screenshot_capture = { status: "attached", scope, image_type }`.
+- On capture/render/upload failure, create payload metadata includes `target.metadata.screenshot_capture = { status: "failed", scope, image_type, failure_reason: "capture_failed" }`.
+- Failure metadata intentionally stores a coarse reason only. Use `onCaptureError` for app-local telemetry if you need the raw error.
+- Capture failures continue issue submission with text/voice metadata and any manual attachments.
+- Preserves the SPAPS hosted-asset constraints: private objects, PNG/JPEG/WebP only, 10 MiB per file, and five attachments per report.
+- If the blob exceeds `maxBytes`, the module compresses automatically (falling back to JPEG at decreasing quality). If compression still exceeds the limit, the error fires through `onCaptureError` and submission continues without the screenshot.
+
+Operator-gated release:
+
+Publishing this version requires operator approval. Consumers may opt in by passing `screenshotCapture={{ enabled: true }}` only after the approved package version is published to npm.
 
 ## Conversation Thread
 
@@ -313,7 +400,7 @@ and revisit trigger.
 ## Metadata
 
 - `package_name`: `spaps-issue-reporting-react`
-- `latest_version`: `0.4.1`
+- `latest_version`: `0.6.0`
 - `minimum_runtime`: `Node.js >=18.0.0`
 - `api_base_url`: `https://api.sweetpotato.dev`
 

package/dist/VoiceCapture-WX7J6BWQ.mjs

@@ -0,0 +1,255 @@
+// src/voice/VoiceCapture.tsx
+import { useScribe } from "@elevenlabs/react";
+import { Microphone, Spinner, TextT } from "@phosphor-icons/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function cn(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function resolveErrorMessage(error, fallback) {
+  if (error instanceof Error && error.message.trim()) {
+    return error.message;
+  }
+  if (error && typeof error === "object" && "message" in error && typeof error.message === "string" && error.message.trim()) {
+    return error.message;
+  }
+  return fallback;
+}
+function getCommittedTranscriptText(committedTranscripts) {
+  return committedTranscripts.map((segment) => segment.text.trim()).filter(Boolean).join(" ").trim();
+}
+function IssueReportVoicePanel({
+  canUseText,
+  effectiveInputMode,
+  isSubmitting,
+  isVoiceActive,
+  isVoiceConnecting,
+  voice,
+  voiceTokenResult,
+  committedTranscript,
+  voiceError,
+  scribeError,
+  onSelectText,
+  onSelectVoice,
+  onStartVoiceInput,
+  onStopVoiceInput,
+  onAppendTranscript
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    canUseText ? /* @__PURE__ */ jsxs("div", { className: "mt-5 flex gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-xs font-semibold transition",
+            effectiveInputMode === "text" ? "border-slate-900 bg-slate-900 text-white" : "border-slate-200 text-slate-700 hover:bg-slate-50"
+          ),
+          onClick: onSelectText,
+          disabled: isSubmitting,
+          children: [
+            /* @__PURE__ */ jsx(TextT, { className: "h-3.5 w-3.5" }),
+            "Text Input"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "inline-flex items-center gap-1 rounded-full border px-3 py-1.5 text-xs font-semibold transition",
+            effectiveInputMode === "voice" ? "border-slate-900 bg-slate-900 text-white" : "border-slate-200 text-slate-700 hover:bg-slate-50"
+          ),
+          onClick: onSelectVoice,
+          disabled: isSubmitting,
+          children: [
+            /* @__PURE__ */ jsx(Microphone, { className: "h-3.5 w-3.5" }),
+            "Voice Input"
+          ]
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-slate-500", children: "Voice Input" }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-slate-600", children: [
+            "Provider: ",
+            voiceTokenResult?.provider ?? voice.provider,
+            " \xB7 Model:",
+            " ",
+            voiceTokenResult?.model_id ?? voice.modelId
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500", children: voice.requireMicrophonePermission ? "Microphone access is required to transcribe." : "Microphone access policy is optional." })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          isVoiceActive || isVoiceConnecting ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "rounded-full border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-100",
+              onClick: onStopVoiceInput,
+              disabled: isSubmitting,
+              children: "Stop Voice Input"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "rounded-full bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-slate-800",
+              onClick: onStartVoiceInput,
+              disabled: isSubmitting,
+              children: "Start Voice Input"
+            }
+          ),
+          canUseText ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "rounded-full border border-slate-300 px-3 py-1.5 text-xs font-medium text-slate-700 transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-60",
+              onClick: onAppendTranscript,
+              disabled: isSubmitting || !committedTranscript.trim(),
+              children: "Append Transcript"
+            }
+          ) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-3 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700", children: committedTranscript ? committedTranscript : /* @__PURE__ */ jsx("span", { className: "text-slate-500", children: "No committed transcript yet." }) }),
+      voiceError || scribeError ? /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700", children: voiceError ?? scribeError }) : isVoiceConnecting ? /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-1.5 text-xs text-slate-500", children: [
+        /* @__PURE__ */ jsx(Spinner, { className: "h-3.5 w-3.5 animate-spin" }),
+        "Connecting voice transcription..."
+      ] }) : null
+    ] })
+  ] });
+}
+function VoiceCapture({
+  canUseText,
+  effectiveInputMode,
+  isSubmitting,
+  voice,
+  createVoiceToken,
+  startRequestId,
+  appendRequestId,
+  onSelectText,
+  onSelectVoice,
+  onTranscriptCommitted,
+  onSubmitMetadataChange,
+  onAppendTranscript
+}) {
+  const [voiceTokenResult, setVoiceTokenResult] = useState(null);
+  const [voiceSubmitMetadata, setVoiceSubmitMetadata] = useState(null);
+  const [voiceError, setVoiceError] = useState(null);
+  const startInFlightRef = useRef(false);
+  const lastStartRequestId = useRef(0);
+  const lastAppendRequestId = useRef(0);
+  const {
+    status: scribeStatus,
+    isConnected,
+    isTranscribing,
+    committedTranscripts,
+    error: scribeError,
+    connect: connectScribe,
+    disconnect: disconnectScribe
+  } = useScribe({
+    autoConnect: false,
+    modelId: voice.modelId,
+    microphone: voice.microphone
+  });
+  const committedTranscript = useMemo(
+    () => getCommittedTranscriptText(committedTranscripts),
+    [committedTranscripts]
+  );
+  const isVoiceConnecting = scribeStatus === "connecting";
+  const isVoiceActive = isConnected || isTranscribing;
+  useEffect(() => {
+    onTranscriptCommitted(committedTranscript);
+  }, [committedTranscript, onTranscriptCommitted]);
+  useEffect(() => {
+    onSubmitMetadataChange(voiceSubmitMetadata);
+  }, [onSubmitMetadataChange, voiceSubmitMetadata]);
+  useEffect(() => {
+    return () => {
+      disconnectScribe();
+    };
+  }, [disconnectScribe]);
+  const startVoiceInput = useCallback(async () => {
+    if (startInFlightRef.current || isSubmitting || isVoiceActive || isVoiceConnecting) {
+      return;
+    }
+    if (!createVoiceToken) {
+      setVoiceError("Voice input is unavailable for this client.");
+      return;
+    }
+    startInFlightRef.current = true;
+    setVoiceError(null);
+    try {
+      const tokenResult = await createVoiceToken();
+      setVoiceTokenResult(tokenResult);
+      setVoiceSubmitMetadata(tokenResult);
+      await connectScribe({
+        token: tokenResult.token,
+        modelId: tokenResult.model_id,
+        microphone: voice.microphone
+      });
+      onSelectVoice();
+    } catch (startError) {
+      setVoiceError(resolveErrorMessage(startError, "Failed to start voice input."));
+    } finally {
+      startInFlightRef.current = false;
+    }
+  }, [
+    connectScribe,
+    createVoiceToken,
+    isSubmitting,
+    isVoiceActive,
+    isVoiceConnecting,
+    onSelectVoice,
+    voice.microphone
+  ]);
+  const appendTranscript = useCallback(() => {
+    if (!committedTranscript.trim()) {
+      return;
+    }
+    onAppendTranscript(committedTranscript);
+  }, [committedTranscript, onAppendTranscript]);
+  useEffect(() => {
+    if (startRequestId === 0 || startRequestId === lastStartRequestId.current) {
+      return;
+    }
+    lastStartRequestId.current = startRequestId;
+    void startVoiceInput();
+  }, [startRequestId, startVoiceInput]);
+  useEffect(() => {
+    if (appendRequestId === 0 || appendRequestId === lastAppendRequestId.current) {
+      return;
+    }
+    lastAppendRequestId.current = appendRequestId;
+    appendTranscript();
+  }, [appendRequestId, appendTranscript]);
+  return /* @__PURE__ */ jsx(
+    IssueReportVoicePanel,
+    {
+      canUseText,
+      effectiveInputMode,
+      isSubmitting,
+      isVoiceActive,
+      isVoiceConnecting,
+      voice,
+      voiceTokenResult,
+      committedTranscript,
+      voiceError,
+      scribeError,
+      onSelectText,
+      onSelectVoice,
+      onStartVoiceInput: () => void startVoiceInput(),
+      onStopVoiceInput: disconnectScribe,
+      onAppendTranscript: appendTranscript
+    }
+  );
+}
+var VoiceCapture_default = VoiceCapture;
+export {
+  VoiceCapture,
+  VoiceCapture_default as default
+};

package/dist/index.d.mts

@@ -1,143 +1,13 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { ReactNode } from 'react';
-import * as spaps_types from 'spaps-types';
-import { IssueReportScope, IssueReportStatusResult, IssueReportStatus, IssueReportListResult, IssueReport, CreateIssueReportRequest, UpdateIssueReportRequest, ReplyIssueReportRequest, IssueReportingVoiceTokenResult, IssueReportAttachmentOut, ListIssueReportMessagesResponse, CreateReporterMessageRequest, IssueReportMessage, IssueReportingInputMode, IssueReportingVoiceProvider } from 'spaps-types';
-export { CreateIssueReportRequest, CreateReporterMessageRequest, IssueReport, IssueReportAttachmentOut, IssueReportListResult, IssueReportMessage, IssueReportScope, IssueReportStatus, IssueReportStatusResult, ListIssueReportMessagesResponse, ReplyIssueReportRequest, UpdateIssueReportRequest } from 'spaps-types';
+import React__default from 'react';
+import { F as FloatingIssueReportButtonProps, R as ReportableInput, I as IssueReportingPageConfigProps, a as IssueReportingProviderProps, b as IssueReportingCopy, c as IssueHistoryFilter, d as IssueReportingCreateMode, e as IssueReportingVoiceConfig, f as IssueReportingScreenshotCaptureConfig } from './types-D9U13O2X.mjs';
+export { g as IssueReportingClient, h as IssueReportingScreenshotCaptureContext, i as IssueReportingScreenshotCaptureFailureBehavior, j as IssueReportingScreenshotCaptureRect, k as IssueReportingScreenshotCaptureScope, l as IssueReportingScreenshotCaptureTiming, m as IssueReportingScreenshotImageType, n as ReportableTargetDescriptor } from './types-D9U13O2X.mjs';
 import * as _tanstack_query_core from '@tanstack/query-core';
 import * as _tanstack_react_query from '@tanstack/react-query';
-
-interface IssueReportingVoiceMicrophoneConfig {
-    deviceId?: string;
-    echoCancellation?: boolean;
-    noiseSuppression?: boolean;
-    autoGainControl?: boolean;
-    channelCount?: number;
-}
-interface IssueReportingVoiceConfig {
-    provider?: IssueReportingVoiceProvider;
-    modelId?: string;
-    requireMicrophonePermission?: boolean;
-    microphone?: IssueReportingVoiceMicrophoneConfig;
-}
-interface IssueReportingClient {
-    issueReporting: {
-        getStatus: (params?: {
-            scope?: IssueReportScope;
-        }) => Promise<IssueReportStatusResult>;
-        list: (params?: {
-            status?: IssueReportStatus;
-            limit?: number;
-            offset?: number;
-            scope?: IssueReportScope;
-        }) => Promise<IssueReportListResult>;
-        get: (issueReportId: string) => Promise<IssueReport>;
-        create: (payload: CreateIssueReportRequest) => Promise<IssueReport>;
-        update: (issueReportId: string, payload: UpdateIssueReportRequest) => Promise<IssueReport>;
-        reply: (issueReportId: string, payload: ReplyIssueReportRequest) => Promise<IssueReport>;
-        createVoiceToken?: () => Promise<IssueReportingVoiceTokenResult>;
-        uploadAttachment?: (file: Blob, options?: {
-            filename?: string;
-        }) => Promise<IssueReportAttachmentOut>;
-        listMessages?: (issueReportId: string) => Promise<ListIssueReportMessagesResponse>;
-        submitMessage?: (issueReportId: string, payload: CreateReporterMessageRequest) => Promise<IssueReportMessage>;
-    };
-}
-interface ReportableTargetDescriptor {
-    componentKey: string;
-    componentLabel?: string;
-    surfaceRef?: string | null;
-    metadata?: Record<string, unknown>;
-}
-type ReportableInput = string | ReportableTargetDescriptor;
-type IssueReportingCreateMode = "general_page" | "surface_required" | "surface_preferred";
-type IssueHistoryFilter = "all" | "unresolved" | "resolved";
-interface IssueReportingCopy {
-    entryAriaLabel: string;
-    popoverTitle: string;
-    reportNewAction: string;
-    reportPageAction: string;
-    reportSpecificAction: string;
-    filtersAll: string;
-    filtersUnresolved: string;
-    filtersResolved: string;
-    historyHelpText: string;
-    historyLoading: string;
-    historyLoadFailed: string;
-    statusLoadFailed: string;
-    emptyAll: string;
-    emptyUnresolved: string;
-    emptyResolved: string;
-    scopeLabel: string;
-    scopeMine: string;
-    scopeTenant: string;
-    reportModeTitle: string;
-    reportModeDescription: string;
-    reportModeCancelAction: string;
-    generalPageTargetLabel: string;
-    surfaceRequiredDescription: string;
-    specificSectionUnavailableDescription: string;
-    createTitlePrefix: string;
-    editTitlePrefix: string;
-    replyTitlePrefix: string;
-    createDescriptionPrefix: string;
-    editDescription: string;
-    replyDescription: string;
-    notePlaceholder: string;
-    noteMinimumSuffix: string;
-    keyboardShortcutHint: string;
-    originalIssueLabel: string;
-    cancelAction: string;
-    submitAction: string;
-    submittingAction: string;
-    editAction: string;
-    replyAction: string;
-    hydrateLoading: string;
-    hydrateFailed: string;
-    retryAction: string;
-    originHumanLabel: string;
-    originMachineLabel: string;
-    machineOriginFallback: string;
-    threadTitle: string;
-    threadDescription: string;
-    threadLoading: string;
-    threadLoadFailed: string;
-    threadEmpty: string;
-    threadNeedsResponseBadge: string;
-    threadAuthorOperator: string;
-    threadAuthorReporter: string;
-    threadKindClarificationRequest: string;
-    threadKindReporterResponse: string;
-    threadKindFinalResponse: string;
-    threadResponsePlaceholder: string;
-    threadResponseLabel: string;
-    threadResponseSubmitAction: string;
-    threadResponseSubmittingAction: string;
-    threadResponseConflict: string;
-    threadResponseFailed: string;
-}
-interface IssueReportingProviderProps {
-    client: IssueReportingClient;
-    isEligible: boolean;
-    reporterRoleHint?: string;
-    principalId?: string | null;
-    getPageUrl?: () => string;
-    defaultScope?: IssueReportScope;
-    allowTenantScope?: boolean;
-    defaultCreateMode?: IssueReportingCreateMode;
-    inputModes?: IssueReportingInputMode[];
-    defaultInputMode?: IssueReportingInputMode;
-    voice?: IssueReportingVoiceConfig;
-    copy?: Partial<IssueReportingCopy>;
-    children: ReactNode;
-}
-interface FloatingIssueReportButtonProps {
-    className?: string;
-    positionClassName?: string;
-}
-interface IssueReportingPageConfigProps {
-    createMode: IssueReportingCreateMode;
-}
+import * as spaps_types from 'spaps-types';
+import { IssueReport, IssueReportStatus, IssueReportScope, IssueReportMessage, IssueReportingInputMode, ListIssueReportMessagesResponse } from 'spaps-types';
+export { CreateIssueReportRequest, CreateReporterMessageRequest, IssueReport, IssueReportAttachmentOut, IssueReportListResult, IssueReportMessage, IssueReportScope, IssueReportStatus, IssueReportStatusResult, ListIssueReportMessagesResponse, ReplyIssueReportRequest, UpdateIssueReportRequest } from 'spaps-types';
 
 declare function IssueReportMessageThread({ issueReportId, }: {
     issueReportId: string;
@@ -196,6 +66,7 @@ type IssueReportingContextValue = {
     voice: Required<Pick<IssueReportingVoiceConfig, "provider" | "modelId" | "requireMicrophonePermission">> & {
         microphone?: IssueReportingVoiceConfig["microphone"];
     };
+    screenshotCapture: IssueReportingScreenshotCaptureConfig | undefined;
     needsResponseIssueIds: string[];
     setNeedsResponse: (issueReportId: string, needsResponse: boolean) => void;
 };
@@ -459,7 +330,7 @@ declare function useIssueReportingMessageMutation(issueReportId: string | null):
     body: string;
     idempotency_key?: string;
 }, unknown>;
-declare function IssueReportingProvider({ client, isEligible, reporterRoleHint, principalId, getPageUrl, defaultScope, allowTenantScope, defaultCreateMode, inputModes, defaultInputMode, voice, copy, children, }: IssueReportingProviderProps): react_jsx_runtime.JSX.Element;
+declare function IssueReportingProvider({ client, isEligible, reporterRoleHint, principalId, getPageUrl, defaultScope, allowTenantScope, defaultCreateMode, inputModes, defaultInputMode, voice, screenshotCapture, copy, children, }: IssueReportingProviderProps): react_jsx_runtime.JSX.Element;
 
 interface ReportModeContextValue {
     isReportMode: boolean;
@@ -472,4 +343,4 @@ interface ReportModeContextValue {
 declare const ReportModeContext: React.Context<ReportModeContextValue | null>;
 declare function useReportMode(): ReportModeContextValue | null;
 
-export { FloatingIssueReportButton, type FloatingIssueReportButtonProps, type IssueHistoryFilter, IssueReportMessageThread, type IssueReportingClient, type IssueReportingCopy, type IssueReportingCreateMode, IssueReportingPageConfig, type IssueReportingPageConfigProps, IssueReportingProvider, type IssueReportingProviderProps, ReportModeContext, type ReportModeContextValue, type ReportableInput, ReportableSection, type ReportableTargetDescriptor, defaultIssueReportingCopy, filterIssueReports, getEntryPointClassName, getEntryPointState, getIssueNoteLengthMessage, getIssueStatusBadgeLabel, getIssueStatusClassName, isClosedIssueStatus, isOpenIssueStatus, isReporterMessageConflict, issueReportingKeys, selectReporterVisibleMessages, useIssueReporting, useIssueReportingHistory, useIssueReportingMessageMutation, useIssueReportingMessages, useIssueReportingMutations, useIssueReportingStatus, useReportMode };
+export { FloatingIssueReportButton, FloatingIssueReportButtonProps, IssueHistoryFilter, IssueReportMessageThread, IssueReportingCopy, IssueReportingCreateMode, IssueReportingPageConfig, IssueReportingPageConfigProps, IssueReportingProvider, IssueReportingProviderProps, IssueReportingScreenshotCaptureConfig, ReportModeContext, type ReportModeContextValue, ReportableInput, ReportableSection, defaultIssueReportingCopy, filterIssueReports, getEntryPointClassName, getEntryPointState, getIssueNoteLengthMessage, getIssueStatusBadgeLabel, getIssueStatusClassName, isClosedIssueStatus, isOpenIssueStatus, isReporterMessageConflict, issueReportingKeys, selectReporterVisibleMessages, useIssueReporting, useIssueReportingHistory, useIssueReportingMessageMutation, useIssueReportingMessages, useIssueReportingMutations, useIssueReportingStatus, useReportMode };