yaver-feedback-react-native 0.8.0 → 0.8.1

package/dist/QuickActionIcon.js

@@ -50,7 +50,10 @@ function isRunningInsideYaverHost() {
     }
 }
 const DEFAULT_SIZE = 44;
-const DEFAULT_COLOR = '#6366f1';
+const DEFAULT_BACKGROUND_COLOR = '#ff6b2c';
+const DEFAULT_LABEL_COLOR = '#111111';
+const DEFAULT_BORDER_COLOR = 'rgba(255,255,255,0.92)';
+const DEFAULT_SHADOW_COLOR = '#000000';
 const LONG_PRESS_MS = 550;
 /**
  * Small tap-to-open icon for the Yaver Feedback SDK.
@@ -66,7 +69,7 @@ const LONG_PRESS_MS = 550;
  * 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.
@@ -74,16 +77,29 @@ const LONG_PRESS_MS = 550;
  * Suppressed entirely when the SDK is loaded inside Yaver's super-host
  * (the Yaver mobile app owns the shake gesture + overlay in that case).
  */
-const QuickActionIcon = ({ color: colorProp, initialPosition: initialPositionProp, size = DEFAULT_SIZE, }) => {
+const QuickActionIcon = ({ color: colorProp, backgroundColor: backgroundColorProp, foregroundColor: foregroundColorProp, borderColor: borderColorProp, shadowColor: shadowColorProp, initialPosition: initialPositionProp, size = DEFAULT_SIZE, }) => {
     const config = YaverFeedback_1.YaverFeedback.getConfig();
     const mode = (() => {
         const raw = config?.quickIcon ?? 'auto';
         if (raw === 'auto') {
-            return react_native_1.Platform.OS === 'web' ? 'off' : 'always';
+            return react_native_1.Platform.OS === 'web' ? 'off' : 'after-shake';
         }
         return raw;
     })();
-    const color = colorProp ?? config?.quickIconColor ?? DEFAULT_COLOR;
+    const backgroundColor = backgroundColorProp ??
+        colorProp ??
+        config?.quickIconBackgroundColor ??
+        config?.quickIconColor ??
+        DEFAULT_BACKGROUND_COLOR;
+    const foregroundColor = foregroundColorProp ??
+        config?.quickIconForegroundColor ??
+        DEFAULT_LABEL_COLOR;
+    const borderColor = borderColorProp ??
+        config?.quickIconBorderColor ??
+        DEFAULT_BORDER_COLOR;
+    const shadowColor = shadowColorProp ??
+        config?.quickIconShadowColor ??
+        DEFAULT_SHADOW_COLOR;
     const { width, height } = react_native_1.Dimensions.get('window');
     const defaultStart = initialPositionProp ??
         config?.quickIconInitialPosition ?? {
@@ -216,11 +232,21 @@ const QuickActionIcon = ({ color: colorProp, initialPosition: initialPositionPro
                 width: visualSize,
                 height: visualSize,
                 borderRadius: radius,
-                backgroundColor: color,
+                backgroundColor,
+                borderColor,
+                shadowColor,
                 opacity: pressed ? 0.85 : 1,
             },
         ]}>
-          <react_native_1.Text style={[styles.iconLabel, { fontSize: Math.round(visualSize * 0.5) }]}>y</react_native_1.Text>
+          <react_native_1.Text style={[
+            styles.iconLabel,
+            {
+                color: foregroundColor,
+                fontSize: Math.round(visualSize * 0.5),
+            },
+        ]}>
+            y
+          </react_native_1.Text>
         </react_native_1.Pressable>
         {menuOpen ? (<react_native_1.View style={styles.menu}>
             <react_native_1.Pressable onPress={openFeedback} style={({ pressed }) => [
@@ -253,14 +279,13 @@ const styles = react_native_1.StyleSheet.create({
     icon: {
         alignItems: 'center',
         justifyContent: 'center',
-        shadowColor: '#000',
         shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.25,
-        shadowRadius: 4,
-        elevation: 4,
+        shadowOpacity: 0.34,
+        shadowRadius: 6,
+        elevation: 7,
+        borderWidth: 2,
     },
     iconLabel: {
-        color: '#ffffff',
         fontWeight: '700',
         includeFontPadding: false,
     },

package/dist/YaverFeedback.js

@@ -76,6 +76,7 @@ class YaverFeedback {
             autoLogin: true,
             ...cfg,
         };
+        firstShakeFired = false;
         // Route the in-SDK login screen to prod yaver.io by default; callers may
         // override for staging via authConvexSiteUrl / authWebBaseUrl.
         (0, auth_1.configureAuthEndpoints)({
@@ -818,6 +819,7 @@ class YaverFeedback {
             shakeDetector.stop();
             shakeDetector = null;
         }
+        firstShakeFired = false;
         enabled = false;
         config = null;
         p2pClient = null;

package/dist/capture.d.ts

@@ -22,6 +22,17 @@
  * modal. See `FeedbackModal.handleScreenshotForFix`.
  */
 export declare function captureScreenshot(): Promise<string>;
+export interface PickedFeedbackFile {
+    path: string;
+    name: string;
+    mimeType?: string;
+    kind: 'image' | 'video' | 'audio' | 'unknown';
+}
+/**
+ * Pick an existing media file from the device. Requires
+ * `expo-document-picker` to be installed.
+ */
+export declare function pickFeedbackFile(): Promise<PickedFeedbackFile>;
 /**
  * Start a screen-recording session. Requires
  * `react-native-record-screen` as a peer dep.

package/dist/capture.js

@@ -16,6 +16,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.captureScreenshot = captureScreenshot;
+exports.pickFeedbackFile = pickFeedbackFile;
 exports.startVideoRecording = startVideoRecording;
 exports.stopVideoRecording = stopVideoRecording;
 exports.isVideoRecording = isVideoRecording;
@@ -45,6 +46,64 @@ async function captureScreenshot() {
             String(err));
     }
 }
+function classifyPickedFile(name, mimeType) {
+    const lowerName = name.toLowerCase();
+    const lowerMime = (mimeType ?? '').toLowerCase();
+    if (lowerMime.startsWith('image/') ||
+        lowerName.endsWith('.png') ||
+        lowerName.endsWith('.jpg') ||
+        lowerName.endsWith('.jpeg') ||
+        lowerName.endsWith('.webp')) {
+        return 'image';
+    }
+    if (lowerMime.startsWith('video/') ||
+        lowerName.endsWith('.mp4') ||
+        lowerName.endsWith('.mov') ||
+        lowerName.endsWith('.m4v')) {
+        return 'video';
+    }
+    if (lowerMime.startsWith('audio/') ||
+        lowerName.endsWith('.m4a') ||
+        lowerName.endsWith('.aac') ||
+        lowerName.endsWith('.wav') ||
+        lowerName.endsWith('.mp3')) {
+        return 'audio';
+    }
+    return 'unknown';
+}
+/**
+ * Pick an existing media file from the device. Requires
+ * `expo-document-picker` to be installed.
+ */
+async function pickFeedbackFile() {
+    try {
+        const picker = require('expo-document-picker');
+        const result = await picker.getDocumentAsync({
+            copyToCacheDirectory: true,
+            multiple: false,
+            type: ['image/*', 'video/*', 'audio/*'],
+        });
+        if (result?.canceled) {
+            throw new Error('File selection canceled.');
+        }
+        const asset = result?.assets?.[0];
+        if (!asset?.uri) {
+            throw new Error('No file selected.');
+        }
+        const name = asset.name || asset.uri.split('/').pop() || 'attachment';
+        const mimeType = asset.mimeType;
+        return {
+            path: asset.uri,
+            name,
+            mimeType,
+            kind: classifyPickedFile(name, mimeType),
+        };
+    }
+    catch (err) {
+        throw new Error('[YaverFeedback] File upload needs `expo-document-picker` as an optional peer dependency. ' +
+            String(err));
+    }
+}
 let videoRecorderModule = null;
 let videoRecordingActive = false;
 /**

package/dist/index.d.ts

@@ -1,13 +1,15 @@
 /**
  * yaver-feedback-react-native — Visual feedback SDK for Yaver.
  *
- * Shake-to-report surface with five one-tap actions:
+ * Shake-to-report surface with four core actions:
  *  1. Hot Reload              — instant JS reload
- *  2. Screenshot & Fix        — capture the screen under the modal and
- *                               kick a fix task on the agent
- *  3. Vibing                  — open a vibing session on the agent
- *  4. Start / Stop Recording  — screen recording toggle
- *  5. Send Video              — submit the last recording
+ *  2. Vibing                  — open a vibing session on the agent
+ *  3. Screenshot / Upload     — capture the screen under the modal or
+ *                               upload existing media
+ *  4. Screen Recording        — start, then stop + upload
+ *
+ * The small quick-access icon stays hidden until the first shake by
+ * default on mobile, then remains available unless the user hides it.
  *
  * @example
  * ```tsx
@@ -50,7 +52,7 @@ export { FixReport } from './FixReport';
 export { getQuickIconDisabled, setQuickIconDisabled, clearQuickIconDisabled, } from './preferences';
 export { configureAuthEndpoints, getConvexSiteUrl, getWebBaseUrl, getToken, saveToken, clearToken, getUser, saveUser, getSelectedDeviceId, saveSelectedDeviceId, clearSelectedDeviceId, validateToken, signInWithApple, signInWithOAuth, signupWithEmail, loginWithEmail, listReachableDevices, DEFAULT_CONVEX_SITE_URL, DEFAULT_WEB_BASE_URL, DEFAULT_OAUTH_REDIRECT, } from './auth';
 export type { OAuthProvider, User, RemoteDevice, DeviceList, } from './auth';
-export { captureScreenshot, startVideoRecording, stopVideoRecording, isVideoRecording, } from './capture';
+export { captureScreenshot, pickFeedbackFile, startVideoRecording, stopVideoRecording, isVideoRecording, } from './capture';
 export { uploadFeedback } from './upload';
 export type { FeedbackConfig, FeedbackBundle, FeedbackMetadata, DeviceInfo, AppInfo, TimelineEvent, FeedbackReport, FeedbackStreamEvent, VoiceCapability, CapturedError, TestFix, TestSession, } from './types';
 export type { BlackBoxEvent, BlackBoxConfig, BlackBoxCommand, CommandHandler } from './BlackBox';

package/dist/index.js

@@ -2,13 +2,15 @@
 /**
  * yaver-feedback-react-native — Visual feedback SDK for Yaver.
  *
- * Shake-to-report surface with five one-tap actions:
+ * Shake-to-report surface with four core actions:
  *  1. Hot Reload              — instant JS reload
- *  2. Screenshot & Fix        — capture the screen under the modal and
- *                               kick a fix task on the agent
- *  3. Vibing                  — open a vibing session on the agent
- *  4. Start / Stop Recording  — screen recording toggle
- *  5. Send Video              — submit the last recording
+ *  2. Vibing                  — open a vibing session on the agent
+ *  3. Screenshot / Upload     — capture the screen under the modal or
+ *                               upload existing media
+ *  4. Screen Recording        — start, then stop + upload
+ *
+ * The small quick-access icon stays hidden until the first shake by
+ * default on mobile, then remains available unless the user hides it.
  *
  * @example
  * ```tsx
@@ -28,7 +30,7 @@
  * ```
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.uploadFeedback = exports.isVideoRecording = exports.stopVideoRecording = exports.startVideoRecording = exports.captureScreenshot = exports.DEFAULT_OAUTH_REDIRECT = exports.DEFAULT_WEB_BASE_URL = exports.DEFAULT_CONVEX_SITE_URL = exports.listReachableDevices = exports.loginWithEmail = exports.signupWithEmail = exports.signInWithOAuth = exports.signInWithApple = exports.validateToken = exports.clearSelectedDeviceId = exports.saveSelectedDeviceId = exports.getSelectedDeviceId = exports.saveUser = exports.getUser = exports.clearToken = exports.saveToken = exports.getToken = exports.getWebBaseUrl = exports.getConvexSiteUrl = exports.configureAuthEndpoints = exports.clearQuickIconDisabled = exports.setQuickIconDisabled = exports.getQuickIconDisabled = exports.FixReport = exports.QuickActionIcon = exports.FeedbackModal = exports.FloatingButton = exports.ShakeDetector = exports.AuthOverlay = exports.PairDeviceModal = exports.YaverMachinePickerScreen = exports.YaverLoginScreen = exports.YaverConnectionScreen = exports.P2PClient = exports.YaverDiscovery = exports.initExpo = exports.YaverUpdates = exports.BlackBox = exports.YaverFeedback = void 0;
+exports.uploadFeedback = exports.isVideoRecording = exports.stopVideoRecording = exports.startVideoRecording = exports.pickFeedbackFile = exports.captureScreenshot = exports.DEFAULT_OAUTH_REDIRECT = exports.DEFAULT_WEB_BASE_URL = exports.DEFAULT_CONVEX_SITE_URL = exports.listReachableDevices = exports.loginWithEmail = exports.signupWithEmail = exports.signInWithOAuth = exports.signInWithApple = exports.validateToken = exports.clearSelectedDeviceId = exports.saveSelectedDeviceId = exports.getSelectedDeviceId = exports.saveUser = exports.getUser = exports.clearToken = exports.saveToken = exports.getToken = exports.getWebBaseUrl = exports.getConvexSiteUrl = exports.configureAuthEndpoints = exports.clearQuickIconDisabled = exports.setQuickIconDisabled = exports.getQuickIconDisabled = exports.FixReport = exports.QuickActionIcon = exports.FeedbackModal = exports.FloatingButton = exports.ShakeDetector = exports.AuthOverlay = exports.PairDeviceModal = exports.YaverMachinePickerScreen = exports.YaverLoginScreen = exports.YaverConnectionScreen = exports.P2PClient = exports.YaverDiscovery = exports.initExpo = exports.YaverUpdates = exports.BlackBox = exports.YaverFeedback = void 0;
 var YaverFeedback_1 = require("./YaverFeedback");
 Object.defineProperty(exports, "YaverFeedback", { enumerable: true, get: function () { return YaverFeedback_1.YaverFeedback; } });
 var BlackBox_1 = require("./BlackBox");
@@ -88,6 +90,7 @@ Object.defineProperty(exports, "DEFAULT_WEB_BASE_URL", { enumerable: true, get:
 Object.defineProperty(exports, "DEFAULT_OAUTH_REDIRECT", { enumerable: true, get: function () { return auth_1.DEFAULT_OAUTH_REDIRECT; } });
 var capture_1 = require("./capture");
 Object.defineProperty(exports, "captureScreenshot", { enumerable: true, get: function () { return capture_1.captureScreenshot; } });
+Object.defineProperty(exports, "pickFeedbackFile", { enumerable: true, get: function () { return capture_1.pickFeedbackFile; } });
 Object.defineProperty(exports, "startVideoRecording", { enumerable: true, get: function () { return capture_1.startVideoRecording; } });
 Object.defineProperty(exports, "stopVideoRecording", { enumerable: true, get: function () { return capture_1.stopVideoRecording; } });
 Object.defineProperty(exports, "isVideoRecording", { enumerable: true, get: function () { return capture_1.isVideoRecording; } });

package/dist/types.d.ts

@@ -48,7 +48,7 @@ export interface FeedbackConfig {
      * Single tap → open the feedback modal; long-press → menu with
      * "Hide icon" (persisted across launches via AsyncStorage).
      *
-     * - `'auto'` (default) → `'always'` on iOS/Android, `'off'` on web.
+     * - `'auto'` (default) → `'after-shake'` on iOS/Android, `'off'` on web.
      * - `'always'` → visible from app launch.
      * - `'after-shake'` → hidden until the first shake this session.
      * - `'off'` → never rendered. Shake still works.
@@ -59,11 +59,34 @@ export interface FeedbackConfig {
      */
     quickIcon?: 'auto' | 'always' | 'after-shake' | 'off';
     /**
-     * Background color for the quick-action icon. Default: '#6366f1'
-     * (indigo). Pick something distinctive so the icon never visually
-     * collides with your own FAB.
+     * Deprecated alias for `quickIconBackgroundColor`.
+     *
+     * Background color for the quick-action icon. The SDK now defaults
+     * to a high-visibility safety orange so the icon reads as a utility
+     * affordance instead of blending into the common blue/indigo FAB
+     * palette many mobile apps already use.
      */
     quickIconColor?: string;
+    /**
+     * Background color for the quick-action icon.
+     * Default: '#ff6b2c' (safety orange).
+     */
+    quickIconBackgroundColor?: string;
+    /**
+     * Foreground/text color for the quick-action icon label.
+     * Default: '#111111'.
+     */
+    quickIconForegroundColor?: string;
+    /**
+     * Border color for the quick-action icon.
+     * Default: 'rgba(255,255,255,0.92)'.
+     */
+    quickIconBorderColor?: string;
+    /**
+     * Shadow color for the quick-action icon.
+     * Default: '#000000'.
+     */
+    quickIconShadowColor?: string;
     /**
      * Initial position of the quick-action icon, in pixels from the
      * top-left. Default: near the top-right corner of the screen. The
@@ -191,6 +214,8 @@ export interface FeedbackBundle {
     metadata: FeedbackMetadata;
     /** Screen-recording file path, when produced by the "Start Recording" action. */
     video?: string;
+    /** Optional audio attachment path. */
+    audio?: string;
     screenshots: string[];
     /** Captured errors with stack traces, attached via attachError / wrapErrorHandler. */
     errors?: CapturedError[];

package/dist/upload.d.ts

@@ -6,6 +6,7 @@ import { FeedbackBundle } from './types';
  * - `metadata` (JSON string)
  * - `screenshot_0`, `screenshot_1`, ... (image files)
  * - `video` (video file, if present)
+ * - `audio` (audio file, if present)
  *
  * Returns the parsed agent response — typically `{ ok, id, reportId }`.
  * Callers can inspect `.id` / `.reportId` to drive a follow-up

package/dist/upload.js

@@ -9,6 +9,7 @@ const react_native_1 = require("react-native");
  * - `metadata` (JSON string)
  * - `screenshot_0`, `screenshot_1`, ... (image files)
  * - `video` (video file, if present)
+ * - `audio` (audio file, if present)
  *
  * Returns the parsed agent response — typically `{ ok, id, reportId }`.
  * Callers can inspect `.id` / `.reportId` to drive a follow-up
@@ -35,6 +36,13 @@ async function uploadFeedback(agentUrl, authToken, bundle) {
             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 url = agentUrl.replace(/\/$/, '') + '/feedback';
     const response = await fetch(url, {
         method: 'POST',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yaver-feedback-react-native",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Visual feedback SDK for Yaver — bug reports, screen recording, voice annotations, and local-first developer workflows",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,7 +22,8 @@
     "react-native": ">=0.70.0",
     "@react-native-async-storage/async-storage": ">=1.17.0",
     "expo-web-browser": ">=12.0.0",
-    "expo-apple-authentication": ">=6.0.0"
+    "expo-apple-authentication": ">=6.0.0",
+    "expo-document-picker": ">=13.0.0"
   },
   "peerDependenciesMeta": {
     "@expo/config-plugins": {
@@ -33,6 +34,9 @@
     },
     "expo-apple-authentication": {
       "optional": true
+    },
+    "expo-document-picker": {
+      "optional": true
     }
   },
   "devDependencies": {