yaver-feedback-react-native 0.8.0 → 0.8.1

package/README.md

@@ -1,6 +1,6 @@
 # yaver-feedback-react-native
 
-Visual feedback SDK for Yaver. Lets testers and developers shake their phone (or tap a floating button) to capture screenshots, record voice notes, and send bug reports directly to a Yaver agent running on a dev machine. Built for vibe coding workflows where feedback needs to flow fast.
+Visual feedback SDK for Yaver. Lets testers and developers shake their phone and then keep a small quick-access icon on screen for hot reload, vibing, screenshot or file upload, and screen recording uploads straight to a Yaver agent running on a dev machine.
 
 ## Installation
 
@@ -32,8 +32,8 @@ npm install @react-native-async-storage/async-storage
 # Screenshots
 npm install react-native-view-shot
 
-# Voice notes
-npm install react-native-audio-recorder-player
+# Optional file upload
+npx expo install expo-document-picker
 ```
 
 `expo-apple-authentication` is optional — if it's missing, "Continue with Apple" falls through to in-app browser OAuth on Android. iOS hosts that want true native Apple Sign-In must also enable the **Sign in with Apple** capability in Xcode.
@@ -85,7 +85,41 @@ function App() {
 }
 ```
 
-Shake your phone to open the feedback modal. Take screenshots, record voice notes, and send everything to your Yaver agent in one tap — LAN-direct when available, Convex/relay-routed when you're on cell data.
+Shake your phone to open the feedback modal. On mobile the quick-access icon stays hidden until that first shake, then remains tappable for the rest of the session unless the user hides it. From there the sheet exposes four core actions: hot reload, vibing, screenshot or file upload, and screen recording upload.
+
+### Quick Icon Styling
+
+The quick icon is configurable at compile time through `YaverFeedback.init(...)`, with render-time overrides still available through `<QuickActionIcon />` props when needed. If you do nothing, the SDK uses a high-visibility orange bubble by default so it stays distinct from the blue/indigo FAB styling many mobile apps already have.
+
+```tsx
+YaverFeedback.init({
+  trigger: 'shake',
+  quickIcon: 'after-shake',
+  quickIconBackgroundColor: '#0f766e',
+  quickIconForegroundColor: '#f8fafc',
+  quickIconBorderColor: 'rgba(255,255,255,0.85)',
+  quickIconShadowColor: '#000000',
+});
+```
+
+Available options:
+
+- `quickIconBackgroundColor`: bubble fill color.
+- `quickIconForegroundColor`: the `y` label color.
+- `quickIconBorderColor`: outer ring color.
+- `quickIconShadowColor`: shadow tint.
+- `quickIconColor`: deprecated alias for `quickIconBackgroundColor`.
+- `quickIconInitialPosition`: initial top-left position in pixels.
+
+If you need a one-off local override instead of global SDK config:
+
+```tsx
+<QuickActionIcon
+  backgroundColor="#111827"
+  foregroundColor="#f9fafb"
+  borderColor="#f59e0b"
+/>
+```
 
 ### Opt-out: bring-your-own auth (pre-0.5 behavior)
 
@@ -728,7 +762,7 @@ YaverFeedback.setEnabled(false);
 - Yaver CLI running on your dev machine (`yaver serve`)
 - Optional: `@react-native-async-storage/async-storage` for device discovery persistence
 - Optional: `react-native-view-shot` for screenshots
-- Optional: `react-native-audio-recorder-player` for voice notes
+- Optional: `expo-document-picker` for file uploads
 
 ## API Reference
 
@@ -805,7 +839,7 @@ YaverFeedback.setEnabled(false);
 
 | Component | Description |
 |-----------|-------------|
-| `FeedbackModal` | Modal with mode selector, commentary, screenshots, voice |
+| `FeedbackModal` | Modal with hot reload, vibing, screenshot or upload, and recording |
 | `FloatingButton` | Draggable overlay button to trigger feedback |
 | `YaverConnectionScreen` | Full-screen device discovery and connection UI |
 

package/dist/FeedbackModal.js

@@ -48,10 +48,6 @@ const FeedbackModal = () => {
     const [toast, setToast] = (0, react_1.useState)(null);
     const [progress, setProgress] = (0, react_1.useState)(null);
     const [isRecordingVideo, setIsRecordingVideo] = (0, react_1.useState)(false);
-    const [isRecordingVoice, setIsRecordingVoice] = (0, react_1.useState)(false);
-    // Cached once on mount — bare-RN apps without expo-av get a clean
-    // hidden button instead of a runtime error.
-    const voiceSupported = (0, react_1.useRef)((0, capture_1.isVoiceCaptureSupported)()).current;
     const [lastVideo, setLastVideo] = (0, react_1.useState)(null);
     // Tracks whether the user has hidden the QuickActionIcon via its
     // long-press menu. Shake is always available, so the feedback modal
@@ -65,6 +61,7 @@ const FeedbackModal = () => {
     // the wrong project because the matcher grepped the prompt itself).
     const [showVibeInput, setShowVibeInput] = (0, react_1.useState)(false);
     const [vibePrompt, setVibePrompt] = (0, react_1.useState)('');
+    const [showCaptureChoices, setShowCaptureChoices] = (0, react_1.useState)(false);
     const [lastVibeTaskId, setLastVibeTaskId] = (0, react_1.useState)(null);
     const mountedRef = (0, react_1.useRef)(true);
     (0, react_1.useEffect)(() => {
@@ -75,6 +72,7 @@ const FeedbackModal = () => {
                 setError(null);
                 setToast(null);
                 setAction('idle');
+                setShowCaptureChoices(false);
                 // Re-read the "user hid the quick icon" flag on every open so
                 // the re-enable row reflects the latest preference (the user
                 // might have hidden or shown it between opens).
@@ -123,6 +121,7 @@ const FeedbackModal = () => {
         setError(null);
         setToast(null);
         setAction('idle');
+        setShowCaptureChoices(false);
     }, []);
     // Helper: run a P2P call; on network failure, ask YaverFeedback to
     // re-query Convex for the fresh IP and retry once. Solves the common
@@ -203,26 +202,50 @@ const FeedbackModal = () => {
                 setAction('idle');
         }
     }, [closeSoon, runWithReconnect]);
-    // ─── 2. Screenshot + Fix ───────────────────────────────────────────
-    //
-    // Hide the modal first so the screenshot captures the actual screen
-    // (the bug) — not the modal card. Await a short animation delay,
-    // snapshot, upload the feedback bundle with any buffered errors, then
-    // kick `/feedback/{id}/fix` to create the repair task.
-    const handleScreenshotAndFix = (0, react_1.useCallback)(async () => {
+    const uploadBundleWithOptionalFix = (0, react_1.useCallback)(async (bundle, fixOnUpload, successToast, failureToast) => {
         const client = YaverFeedback_1.YaverFeedback.getP2PClient();
         const config = YaverFeedback_1.YaverFeedback.getConfig();
         if (!client || !config?.agentUrl) {
             setError('Not connected to the agent yet.');
             return;
         }
+        try {
+            const uploaded = await (0, upload_1.uploadFeedback)(config.agentUrl, config.authToken ?? '', bundle);
+            // The agent returns the new report id as `id` (see
+            // feedback_http.go::ReceiveFeedback). Trigger the fix loop if we got
+            // one back; otherwise just ack the upload.
+            const reportId = uploaded?.id ??
+                uploaded?.reportId;
+            if (reportId && fixOnUpload) {
+                try {
+                    await client.triggerFix(reportId);
+                    setToast(successToast);
+                }
+                catch (err) {
+                    setToast(failureToast ?? 'Report uploaded — fix trigger failed');
+                    setError(err instanceof Error ? err.message : String(err));
+                }
+            }
+            else {
+                setToast(successToast);
+            }
+            closeSoon(1400);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    }, [closeSoon]);
+    // ─── 3. Screenshot / Upload ───────────────────────────────────────
+    const handleCaptureChoiceToggle = (0, react_1.useCallback)(() => {
+        setShowCaptureChoices((v) => !v);
+    }, []);
+    const handleScreenshotAndFix = (0, react_1.useCallback)(async () => {
         setAction('capturing');
         setError(null);
-        // Step 1: Hide the modal so the screenshot contains the real screen.
+        setShowCaptureChoices(false);
         setVisible(false);
-        // Wait out the slide-down animation on both platforms.
         await new Promise((resolve) => setTimeout(resolve, 350));
-        let path = null;
+        let path;
         try {
             path = await (0, capture_1.captureScreenshot)();
         }
@@ -232,7 +255,6 @@ const FeedbackModal = () => {
             setAction('idle');
             return;
         }
-        // Step 2: Re-show the modal for progress + ack.
         setVisible(true);
         await new Promise((resolve) => setTimeout(resolve, 150));
         try {
@@ -256,35 +278,57 @@ const FeedbackModal = () => {
                 screenshots: [path],
                 errors: capturedErrors.length > 0 ? capturedErrors : undefined,
             };
-            const uploaded = await (0, upload_1.uploadFeedback)(config.agentUrl, config.authToken ?? '', bundle);
-            // The agent returns the new report id as `id` (see
-            // feedback_http.go::ReceiveFeedback). Trigger the fix loop if we got
-            // one back; otherwise just ack the upload.
-            const reportId = uploaded?.id ??
-                uploaded?.reportId;
-            if (reportId) {
-                try {
-                    await client.triggerFix(reportId);
-                    setToast('Fix task started');
-                }
-                catch (err) {
-                    setToast('Report uploaded — fix trigger failed');
-                    setError(err instanceof Error ? err.message : String(err));
-                }
-            }
-            else {
-                setToast('Report uploaded');
+            await uploadBundleWithOptionalFix(bundle, true, 'Fix task started');
+        }
+        finally {
+            if (mountedRef.current)
+                setAction('idle');
+        }
+    }, [uploadBundleWithOptionalFix]);
+    const handleFileUpload = (0, react_1.useCallback)(async () => {
+        setAction('capturing');
+        setError(null);
+        setShowCaptureChoices(false);
+        try {
+            const picked = await (0, capture_1.pickFeedbackFile)();
+            const { Dimensions } = require('react-native');
+            const { width, height } = Dimensions.get('window');
+            const deviceInfo = {
+                platform: react_native_1.Platform.OS,
+                osVersion: String(react_native_1.Platform.Version),
+                model: react_native_1.Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
+                screenWidth: width,
+                screenHeight: height,
+            };
+            const capturedErrors = YaverFeedback_1.YaverFeedback.getCapturedErrors();
+            const bundle = {
+                metadata: {
+                    timestamp: new Date().toISOString(),
+                    device: deviceInfo,
+                    app: {},
+                    userNote: `[Uploaded file] ${picked.name}`,
+                },
+                screenshots: picked.kind === 'image' ? [picked.path] : [],
+                video: picked.kind === 'video' ? picked.path : undefined,
+                audio: picked.kind === 'audio' ? picked.path : undefined,
+                errors: capturedErrors.length > 0 ? capturedErrors : undefined,
+            };
+            if (picked.kind === 'unknown') {
+                throw new Error('Pick an image, video, or audio file.');
             }
-            closeSoon(1400);
+            await uploadBundleWithOptionalFix(bundle, picked.kind === 'image', picked.kind === 'image' ? 'Fix task started' : 'File uploaded');
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : String(err));
+            const message = err instanceof Error ? err.message : String(err);
+            if (message !== 'File selection canceled.') {
+                setError(message);
+            }
         }
         finally {
             if (mountedRef.current)
                 setAction('idle');
         }
-    }, [closeSoon]);
+    }, [uploadBundleWithOptionalFix]);
     // ─── 3. Vibing ─────────────────────────────────────────────────────
     // First tap expands the input; second submit fires the actual
     // /vibing/execute. Mirrors the Yaver mobile app's Vibing tab —
@@ -337,177 +381,120 @@ const FeedbackModal = () => {
                 setAction('idle');
         }
     }, [vibePrompt]);
-    // ─── 4. Toggle screen recording ────────────────────────────────────
-    const handleToggleRecording = (0, react_1.useCallback)(async () => {
+    // ─── 4. Screen recording ───────────────────────────────────────────
+    const handleScreenRecording = (0, react_1.useCallback)(async () => {
         setError(null);
-        if (isRecordingVideo) {
+        if (!isRecordingVideo && lastVideo) {
+            const config = YaverFeedback_1.YaverFeedback.getConfig();
+            if (!config?.agentUrl) {
+                setError('Not connected to the agent yet.');
+                return;
+            }
+            setAction('uploading-video');
             try {
-                const result = await (0, capture_1.stopVideoRecording)();
+                const { Dimensions } = require('react-native');
+                const { width, height } = Dimensions.get('window');
+                const deviceInfo = {
+                    platform: react_native_1.Platform.OS,
+                    osVersion: String(react_native_1.Platform.Version),
+                    model: react_native_1.Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
+                    screenWidth: width,
+                    screenHeight: height,
+                };
+                const bundle = {
+                    metadata: {
+                        timestamp: new Date().toISOString(),
+                        device: deviceInfo,
+                        app: {},
+                        userNote: '[Screen recording]',
+                    },
+                    screenshots: [],
+                    video: lastVideo.path,
+                    errors: YaverFeedback_1.YaverFeedback.getCapturedErrors().length
+                        ? YaverFeedback_1.YaverFeedback.getCapturedErrors()
+                        : undefined,
+                };
+                await (0, upload_1.uploadFeedback)(config.agentUrl, config.authToken ?? '', bundle);
                 if (mountedRef.current) {
-                    setIsRecordingVideo(false);
-                    setLastVideo(result);
-                    setToast(`Recording stopped — ${Math.round(result.duration)}s`);
+                    setToast(`Recording uploaded — ${Math.round(lastVideo.duration)}s`);
+                    setLastVideo(null);
                 }
+                closeSoon(1200);
             }
             catch (err) {
-                setIsRecordingVideo(false);
                 setError(err instanceof Error ? err.message : String(err));
             }
+            finally {
+                if (mountedRef.current)
+                    setAction('idle');
+            }
+            return;
         }
-        else {
+        if (isRecordingVideo) {
             try {
-                await (0, capture_1.startVideoRecording)();
+                const result = await (0, capture_1.stopVideoRecording)();
                 if (mountedRef.current) {
-                    setIsRecordingVideo(true);
-                    setToast('Recording…');
+                    setIsRecordingVideo(false);
+                    setLastVideo(result);
+                    setAction('uploading-video');
+                    setToast('Uploading recording…');
+                }
+                const config = YaverFeedback_1.YaverFeedback.getConfig();
+                if (!config?.agentUrl) {
+                    throw new Error('Not connected to the agent yet.');
+                }
+                const { Dimensions } = require('react-native');
+                const { width, height } = Dimensions.get('window');
+                const deviceInfo = {
+                    platform: react_native_1.Platform.OS,
+                    osVersion: String(react_native_1.Platform.Version),
+                    model: react_native_1.Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
+                    screenWidth: width,
+                    screenHeight: height,
+                };
+                const bundle = {
+                    metadata: {
+                        timestamp: new Date().toISOString(),
+                        device: deviceInfo,
+                        app: {},
+                        userNote: '[Screen recording]',
+                    },
+                    screenshots: [],
+                    video: result.path,
+                    errors: YaverFeedback_1.YaverFeedback.getCapturedErrors().length
+                        ? YaverFeedback_1.YaverFeedback.getCapturedErrors()
+                        : undefined,
+                };
+                await (0, upload_1.uploadFeedback)(config.agentUrl, config.authToken ?? '', bundle);
+                if (mountedRef.current) {
+                    setToast(`Recording uploaded — ${Math.round(result.duration)}s`);
                     setLastVideo(null);
                 }
+                closeSoon(1200);
             }
             catch (err) {
+                setIsRecordingVideo(false);
                 setError(err instanceof Error ? err.message : String(err));
             }
+            finally {
+                if (mountedRef.current)
+                    setAction('idle');
+            }
         }
-    }, [isRecordingVideo]);
-    // ─── Voice note: record → transcribe → send as feedback ───────────
-    // Tap once to start; tap again to stop. On stop: upload the audio
-    // to the agent's /voice/transcribe (which routes through whichever
-    // STT provider is configured — Whisper / Deepgram / OpenAI / etc.),
-    // then file the transcript as a bug report. The audio file itself
-    // is also attached to the feedback bundle so the agent can re-play
-    // it if the transcript is wrong.
-    const handleToggleVoice = (0, react_1.useCallback)(async () => {
-        setError(null);
-        if (!isRecordingVoice) {
+        else {
             try {
-                await (0, capture_1.startAudioRecording)();
+                await (0, capture_1.startVideoRecording)();
                 if (mountedRef.current) {
-                    setIsRecordingVoice(true);
-                    setAction('recording-voice');
-                    setToast('Recording voice note…');
+                    setIsRecordingVideo(true);
+                    setToast('Recording… tap again to stop and upload');
+                    setLastVideo(null);
                 }
             }
             catch (err) {
-                setIsRecordingVoice(false);
-                setAction('idle');
                 setError(err instanceof Error ? err.message : String(err));
             }
-            return;
-        }
-        // Stopping → transcribe → send.
-        try {
-            const audio = await (0, capture_1.stopAudioRecording)();
-            setIsRecordingVoice(false);
-            if (!audio) {
-                setAction('idle');
-                return;
-            }
-            setAction('transcribing-voice');
-            setToast('Transcribing…');
-            const config = YaverFeedback_1.YaverFeedback.getConfig();
-            if (!config?.agentUrl) {
-                setError('Not connected to the agent yet.');
-                setAction('idle');
-                return;
-            }
-            let transcript = '';
-            try {
-                const client = YaverFeedback_1.YaverFeedback.getP2PClient();
-                if (client) {
-                    const res = await client.transcribeVoice(audio.path);
-                    transcript = res.text ?? '';
-                }
-            }
-            catch {
-                // Transcription can fail (no STT provider configured on the
-                // agent, network blip, etc.). Don't block the flow — ship
-                // the raw audio file with a "[no transcript]" note so the
-                // agent + human reviewer can still play it back.
-            }
-            const { Dimensions } = require('react-native');
-            const { width, height } = Dimensions.get('window');
-            const deviceInfo = {
-                platform: react_native_1.Platform.OS,
-                osVersion: String(react_native_1.Platform.Version),
-                model: react_native_1.Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
-                screenWidth: width,
-                screenHeight: height,
-            };
-            const bundle = {
-                metadata: {
-                    timestamp: new Date().toISOString(),
-                    device: deviceInfo,
-                    app: {},
-                    userNote: transcript.length > 0
-                        ? `[Voice note] ${transcript}`
-                        : `[Voice note · ${Math.round(audio.duration)}s — transcription unavailable]`,
-                },
-                screenshots: [],
-                audio: audio.path,
-                errors: YaverFeedback_1.YaverFeedback.getCapturedErrors().length
-                    ? YaverFeedback_1.YaverFeedback.getCapturedErrors()
-                    : undefined,
-            };
-            await (0, upload_1.uploadFeedback)(config.agentUrl, config.authToken ?? '', bundle);
-            setToast(transcript ? `Sent: "${transcript.slice(0, 60)}${transcript.length > 60 ? '…' : ''}"` : 'Voice note sent');
-            closeSoon(1800);
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : String(err));
-        }
-        finally {
-            if (mountedRef.current)
-                setAction('idle');
-        }
-    }, [isRecordingVoice, closeSoon]);
-    // ─── 5. Send the last recorded video ───────────────────────────────
-    const handleSendVideo = (0, react_1.useCallback)(async () => {
-        const config = YaverFeedback_1.YaverFeedback.getConfig();
-        if (!config?.agentUrl) {
-            setError('Not connected to the agent yet.');
-            return;
-        }
-        if (!lastVideo) {
-            setError('No video recorded yet.');
-            return;
-        }
-        setAction('sending-video');
-        setError(null);
-        try {
-            const { Dimensions } = require('react-native');
-            const { width, height } = Dimensions.get('window');
-            const deviceInfo = {
-                platform: react_native_1.Platform.OS,
-                osVersion: String(react_native_1.Platform.Version),
-                model: react_native_1.Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
-                screenWidth: width,
-                screenHeight: height,
-            };
-            const bundle = {
-                metadata: {
-                    timestamp: new Date().toISOString(),
-                    device: deviceInfo,
-                    app: {},
-                    userNote: '[Screen recording]',
-                },
-                screenshots: [],
-                video: lastVideo.path,
-                errors: YaverFeedback_1.YaverFeedback.getCapturedErrors().length
-                    ? YaverFeedback_1.YaverFeedback.getCapturedErrors()
-                    : undefined,
-            };
-            await (0, upload_1.uploadFeedback)(config.agentUrl, config.authToken ?? '', bundle);
-            setToast('Video sent');
-            setLastVideo(null);
-            closeSoon(1200);
         }
-        catch (err) {
-            setError(err instanceof Error ? err.message : String(err));
-        }
-        finally {
-            if (mountedRef.current)
-                setAction('idle');
-        }
-    }, [lastVideo, closeSoon]);
+    }, [closeSoon, isRecordingVideo, lastVideo]);
     const busy = action !== 'idle';
     return (<>
       <AuthOverlay_1.AuthOverlay />
@@ -525,11 +512,6 @@ const FeedbackModal = () => {
               {/* 1. Hot Reload — the common path */}
               <ActionRow label={action === 'hot-reloading' ? 'Reloading…' : 'Hot Reload'} tint="#fbbf24" onPress={handleHotReload} disabled={busy} busy={action === 'hot-reloading'}/>
 
-              {/* 2. Screenshot + Fix — for bug fixes */}
-              <ActionRow label={action === 'capturing'
-                ? 'Capturing…'
-                : 'Screenshot & Fix'} tint="#22c55e" onPress={handleScreenshotAndFix} disabled={busy} busy={action === 'capturing'}/>
-
               {/* 3. Vibing — expands to an input box on first tap
                  so the user says WHAT they want to vibe on, just
                  like the Yaver mobile app's Vibing tab. Second
@@ -555,24 +537,22 @@ const FeedbackModal = () => {
                   Last vibing task: {lastVibeTaskId.slice(0, 12)}…
                 </react_native_1.Text>)}
 
-              {/* Voice note — only rendered when expo-av is installed.
-                Tap to start, tap again to stop → transcribes via
-                the agent and files as a feedback report. */}
-              {voiceSupported && (<ActionRow label={action === 'transcribing-voice'
-                    ? 'Transcribing…'
-                    : isRecordingVoice
-                        ? 'Stop & Send Voice'
-                        : 'Voice Note'} tint={isRecordingVoice ? '#ef4444' : '#f472b6'} onPress={handleToggleVoice} disabled={busy && action !== 'recording-voice' && action !== 'idle'} busy={action === 'transcribing-voice'}/>)}
-
-              {/* 4. Start/Stop Recording */}
-              <ActionRow label={isRecordingVideo ? 'Stop Recording' : 'Start Recording'} tint={isRecordingVideo ? '#ef4444' : '#60a5fa'} onPress={handleToggleRecording} disabled={busy && action !== 'idle' && !isRecordingVideo}/>
+              {/* Screenshot / Upload */}
+              {!showCaptureChoices ? (<ActionRow label={action === 'capturing'
+                    ? 'Working…'
+                    : 'Screenshot / Upload'} tint="#22c55e" onPress={handleCaptureChoiceToggle} disabled={busy} busy={action === 'capturing'}/>) : (<react_native_1.View style={styles.captureChoices}>
+                  <ActionRow label="Take Screenshot" tint="#22c55e" onPress={handleScreenshotAndFix} disabled={busy}/>
+                  <ActionRow label="Upload File" tint="#34d399" onPress={handleFileUpload} disabled={busy}/>
+                </react_native_1.View>)}
 
-              {/* 5. Send Video (only tappable when a clip is ready) */}
-              <ActionRow label={action === 'sending-video'
-                ? 'Sending…'
-                : lastVideo
-                    ? `Send Video · ${Math.round(lastVideo.duration)}s`
-                    : 'Send Video'} tint="#a78bfa" onPress={handleSendVideo} disabled={busy || !lastVideo} busy={action === 'sending-video'}/>
+              {/* 4. Screen recording */}
+              <ActionRow label={action === 'uploading-video'
+                ? 'Uploading…'
+                : isRecordingVideo
+                    ? 'Stop & Upload Recording'
+                    : lastVideo
+                        ? `Retry Upload Recording · ${Math.round(lastVideo.duration)}s`
+                        : 'Screen Recording'} tint={isRecordingVideo ? '#ef4444' : '#60a5fa'} onPress={handleScreenRecording} disabled={busy && action !== 'uploading-video' && !isRecordingVideo} busy={action === 'uploading-video'}/>
 
               {progress !== null && (<react_native_1.View style={styles.progressTrack}>
                   <react_native_1.View style={[
@@ -603,6 +583,13 @@ const FeedbackModal = () => {
                 : '●  Hide quick-access icon'}
                 </react_native_1.Text>
               </react_native_1.Pressable>
+
+              <react_native_1.Pressable onPress={handleClose} style={({ pressed }) => [
+                styles.cancelBtn,
+                pressed && styles.buttonPressed,
+            ]} accessibilityRole="button" accessibilityLabel="Cancel">
+                <react_native_1.Text style={styles.cancelBtnText}>Cancel</react_native_1.Text>
+              </react_native_1.Pressable>
             </react_native_1.Pressable>
           </react_native_1.Pressable>
         </react_native_1.Modal>)}
@@ -723,6 +710,9 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 15,
         fontWeight: '700',
     },
+    captureChoices: {
+        gap: 10,
+    },
     progressTrack: {
         height: 6,
         borderRadius: 3,
@@ -758,4 +748,22 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 12,
         fontWeight: '500',
     },
+    cancelBtn: {
+        marginTop: 4,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+        paddingVertical: 15,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(255,255,255,0.04)',
+    },
+    cancelBtnText: {
+        color: '#e5e7eb',
+        fontSize: 15,
+        fontWeight: '700',
+    },
+    buttonPressed: {
+        opacity: 0.7,
+    },
 });

package/dist/P2PClient.js

@@ -152,6 +152,13 @@ class P2PClient {
                 name: 'screen_recording.mp4',
             });
         }
+        if (bundle.audio) {
+            formData.append('audio', {
+                uri: react_native_1.Platform.OS === 'android' ? `file://${bundle.audio}` : bundle.audio,
+                type: 'audio/m4a',
+                name: 'voice_note.m4a',
+            });
+        }
         const response = await fetch(`${this.baseUrl}/feedback`, {
             method: 'POST',
             headers: {

package/dist/QuickActionIcon.d.ts

@@ -1,7 +1,15 @@
 import React from 'react';
 export interface QuickActionIconProps {
-    /** Override the color from FeedbackConfig.quickIconColor. */
+    /** Deprecated alias for `backgroundColor`. */
     color?: string;
+    /** Override the background from FeedbackConfig.quickIconBackgroundColor. */
+    backgroundColor?: string;
+    /** Override the label color from FeedbackConfig.quickIconForegroundColor. */
+    foregroundColor?: string;
+    /** Override the border color from FeedbackConfig.quickIconBorderColor. */
+    borderColor?: string;
+    /** Override the shadow color from FeedbackConfig.quickIconShadowColor. */
+    shadowColor?: string;
     /** Override the initial position from FeedbackConfig.quickIconInitialPosition. */
     initialPosition?: {
         x: number;
@@ -24,7 +32,7 @@ export interface QuickActionIconProps {
  * hidden the user can still shake to open feedback.
  *
  * Visibility is controlled by `FeedbackConfig.quickIcon`:
- *  - `'auto'` (default) → `'always'` on iOS/Android, `'off'` on web.
+ *  - `'auto'` (default) → `'after-shake'` on iOS/Android, `'off'` on web.
  *  - `'always'` → visible from first render.
  *  - `'after-shake'` → hidden until `yaverFeedback:firstShake` fires.
  *  - `'off'` → never rendered.