yaver-feedback-react-native 0.5.4 → 0.6.0

package/README.md

@@ -16,11 +16,16 @@ Manual fallback:
 npm install yaver-feedback-react-native
 ```
 
+> **Mobile only.** This SDK targets React Native (iOS + Android). A `yaver-feedback-web` package exists for browser apps but currently expects a bring-your-own auth token — the equivalent in-app sign-in UX (Apple / Google / GitHub / GitLab / Microsoft / email) for the web SDK will land in a future release. Open an issue if you need it sooner.
+
 ### Peer dependencies
 
-For full functionality, install these optional peer dependencies:
+For full functionality, install these peer dependencies:
 
 ```bash
+# Auth (in-app browser OAuth + native Apple Sign-In)
+npm install expo-web-browser expo-apple-authentication
+
 # Device discovery (stored connections)
 npm install @react-native-async-storage/async-storage
 
@@ -31,11 +36,28 @@ npm install react-native-view-shot
 npm install react-native-audio-recorder-player
 ```
 
-## Quick Start (0.5+: zero-config auth)
+`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.
+
+Android hosts must register the OAuth callback in `AndroidManifest.xml`:
+
+```xml
+<intent-filter>
+  <action android:name="android.intent.action.VIEW" />
+  <category android:name="android.intent.category.DEFAULT" />
+  <category android:name="android.intent.category.BROWSABLE" />
+  <data android:scheme="yaver" android:host="oauth-callback" />
+</intent-filter>
+```
+
+iOS does not require any URL scheme registration — `ASWebAuthenticationSession` intercepts the redirect inside the auth session.
+
+## Quick Start (0.6+: native auth)
 
-Starting with **0.5.0**, the SDK ships its own login screen + remote machine picker. Drop in `<FeedbackModal />` and the first time a user triggers feedback without a cached session, they get:
+Starting with **0.6.0**, the SDK login screen mirrors the Yaver mobile app: native Apple Sign-In on iOS, in-app browser OAuth for Google / GitHub / GitLab / Microsoft (no codes, no leaving the app), and inline email + password. The user never sees a verification code or has to switch to a web browser.
 
-1. A full-screen login modal — Apple / Google / GitHub / GitLab / Microsoft via [device-code flow](https://yaver.io/auth/device), or inline email + password.
+Drop in `<FeedbackModal />` and the first time a user triggers feedback without a cached session, they get:
+
+1. A full-screen login modal — Apple (native) / Google / GitHub / GitLab / Microsoft (in-app browser) / email + password (inline).
 2. A picker of the machines they can reach — **their own dev boxes** plus **guest-shared machines** (where another user invited them).
 
 Both screens persist their selection to `AsyncStorage`, so subsequent launches reconnect silently.
@@ -574,12 +596,34 @@ YaverFeedback.init({
 });
 ```
 
+## Running Inside the Yaver Mobile App (super-host)
+
+When a third-party app is loaded through Yaver's Hermes-push flow (so the
+Yaver mobile app is the runtime container for your app), the SDK detects
+that situation via the `YaverInfo` native module and **automatically
+no-ops `YaverFeedback.init()`** — no ShakeDetector, no FeedbackModal, no
+BlackBox stream from inside the guest. The user only ever sees Yaver's
+native shake overlay ("Reload" + "Back to Yaver") and uses Yaver's
+built-in feedback flow instead.
+
+Standalone installs (TestFlight / App Store / Play from your own dev
+account) are unaffected — the SDK behaves exactly as it did before.
+
+If you need to opt out of the auto-suppression in a specific build (for
+example, to compare behaviour in a super-host smoke test), set
+`enabled: true` explicitly — the Yaver-host gate runs before the
+`enabled` flag is evaluated on purpose.
+
 ## Trigger Modes
 
 ### Shake (default)
 
 Shake the device to open the feedback modal. Uses the built-in shake event on iOS and `ShakeEvent` on Android.
 
+When the app is loaded inside the Yaver mobile app (super-host), the
+SDK yields shake handling to Yaver's native overlay — see the
+"Running Inside the Yaver Mobile App" section above.
+
 ```typescript
 YaverFeedback.init({ authToken, trigger: 'shake' });
 ```

package/dist/LoginScreen.d.ts

@@ -6,9 +6,8 @@ export interface YaverLoginScreenProps {
     onCancel?: () => void;
 }
 /**
- * Full-screen in-SDK login. Device-code is the default flow — users sign in
- * with any OAuth provider (Apple/Google/GitHub/GitLab/Microsoft) or email on
- * yaver.io and the SDK polls for the issued session token. Email/password is
- * available as an inline fallback for headless environments.
+ * Full-screen in-SDK login. Mirrors the Yaver mobile app login UX: native
+ * Apple Sign-In on iOS, in-app browser OAuth for Google/GitHub/GitLab/
+ * Microsoft (no codes, no leaving the app), and inline email/password.
  */
 export declare const YaverLoginScreen: React.FC<YaverLoginScreenProps>;

package/dist/LoginScreen.js

@@ -37,281 +37,212 @@ exports.YaverLoginScreen = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const auth_1 = require("./auth");
-const PROVIDERS = [
-    { id: 'apple', label: 'Apple', emoji: '' },
-    { id: 'google', label: 'Google', emoji: 'G' },
-    { id: 'github', label: 'GitHub', emoji: '' },
-    { id: 'gitlab', label: 'GitLab', emoji: '' },
-    { id: 'microsoft', label: 'Microsoft', emoji: 'M' },
-];
 /**
- * Full-screen in-SDK login. Device-code is the default flow — users sign in
- * with any OAuth provider (Apple/Google/GitHub/GitLab/Microsoft) or email on
- * yaver.io and the SDK polls for the issued session token. Email/password is
- * available as an inline fallback for headless environments.
+ * Full-screen in-SDK login. Mirrors the Yaver mobile app login UX: native
+ * Apple Sign-In on iOS, in-app browser OAuth for Google/GitHub/GitLab/
+ * Microsoft (no codes, no leaving the app), and inline email/password.
  */
 const YaverLoginScreen = ({ onLoggedIn, onCancel, }) => {
-    const [mode, setMode] = (0, react_1.useState)('device');
-    const [code, setCode] = (0, react_1.useState)(null);
-    const [codeError, setCodeError] = (0, react_1.useState)(null);
-    const [starting, setStarting] = (0, react_1.useState)(false);
-    const pollRef = (0, react_1.useRef)(null);
-    const expiredTimerRef = (0, react_1.useRef)(null);
-    const [emailMode, setEmailMode] = (0, react_1.useState)('login');
+    const [busyProvider, setBusyProvider] = (0, react_1.useState)(null);
+    const [showEmailForm, setShowEmailForm] = (0, react_1.useState)(false);
+    const [isSignUp, setIsSignUp] = (0, react_1.useState)(false);
     const [fullName, setFullName] = (0, react_1.useState)('');
     const [email, setEmail] = (0, react_1.useState)('');
     const [password, setPassword] = (0, react_1.useState)('');
+    const [confirmPassword, setConfirmPassword] = (0, react_1.useState)('');
     const [emailBusy, setEmailBusy] = (0, react_1.useState)(false);
-    const [emailError, setEmailError] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (mode === 'device' && !code && !starting) {
-            void beginDeviceCode(undefined);
+    const [emailError, setEmailError] = (0, react_1.useState)('');
+    const finish = async (token) => {
+        const user = await (0, auth_1.validateToken)(token);
+        await (0, auth_1.saveToken)(token);
+        if (user)
+            await (0, auth_1.saveUser)(user);
+        onLoggedIn(token);
+    };
+    const handleApple = async () => {
+        setBusyProvider('apple');
+        try {
+            const { token } = await (0, auth_1.signInWithApple)();
+            await finish(token);
         }
-        return () => {
-            stopPolling();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [mode]);
-    const stopPolling = () => {
-        if (pollRef.current) {
-            clearInterval(pollRef.current);
-            pollRef.current = null;
+        catch (e) {
+            const msg = e instanceof Error ? e.message : 'Apple Sign-In failed';
+            if (msg !== 'cancelled')
+                react_native_1.Alert.alert('Sign In Failed', msg);
         }
-        if (expiredTimerRef.current) {
-            clearTimeout(expiredTimerRef.current);
-            expiredTimerRef.current = null;
+        finally {
+            setBusyProvider(null);
         }
     };
-    const beginDeviceCode = async (preferredProvider) => {
-        setStarting(true);
-        setCodeError(null);
-        stopPolling();
+    const handleOAuth = async (provider) => {
+        setBusyProvider(provider);
         try {
-            const result = await (0, auth_1.startDeviceCode)({
-                platform: react_native_1.Platform.OS,
-                machineName: `feedback-sdk-${react_native_1.Platform.OS}`,
-                preferredProvider,
-            });
-            setCode(result);
-            pollRef.current = setInterval(async () => {
-                const poll = await (0, auth_1.pollDeviceCode)(result.deviceCode);
-                if (poll.status === 'authorized') {
-                    stopPolling();
-                    const user = await (0, auth_1.validateToken)(poll.token);
-                    await (0, auth_1.saveToken)(poll.token);
-                    if (user)
-                        await (0, auth_1.saveUser)(user);
-                    onLoggedIn(poll.token);
-                }
-                else if (poll.status === 'expired') {
-                    stopPolling();
-                    setCodeError('Kod doldu — tekrar başlat.');
-                    setCode(null);
-                }
-            }, 3000);
-            expiredTimerRef.current = setTimeout(() => {
-                stopPolling();
-                setCode(null);
-                setCodeError('Kod süresi doldu.');
-            }, Math.max(0, result.expiresAt - Date.now()));
+            const { token } = await (0, auth_1.signInWithOAuth)(provider);
+            await finish(token);
         }
-        catch (err) {
-            setCodeError(err instanceof Error ? err.message : String(err));
+        catch (e) {
+            const msg = e instanceof Error ? e.message : 'Sign-in failed';
+            if (msg !== 'cancelled')
+                react_native_1.Alert.alert('Sign In Failed', msg);
         }
         finally {
-            setStarting(false);
+            setBusyProvider(null);
         }
     };
-    const openVerification = () => {
-        if (!code)
-            return;
-        react_native_1.Linking.openURL(code.verificationUrl).catch(() => {
-            setCodeError('Tarayıcı açılamadı — URL’yi elle aç.');
-        });
-    };
     const handleEmailSubmit = async () => {
-        setEmailError(null);
-        if (!email.trim() || !password) {
-            setEmailError('E-posta ve parola zorunlu.');
-            return;
+        setEmailError('');
+        if (isSignUp) {
+            if (!fullName.trim())
+                return setEmailError('Full name is required');
+            if (password !== confirmPassword)
+                return setEmailError('Passwords do not match');
+            if (password.length < 8)
+                return setEmailError('Password must be at least 8 characters');
         }
+        if (!email.trim() || !password)
+            return setEmailError('Email and password are required');
         setEmailBusy(true);
         try {
-            const result = emailMode === 'signup'
-                ? await (0, auth_1.signupWithEmail)(fullName.trim() || email.trim(), email.trim(), password)
+            const result = isSignUp
+                ? await (0, auth_1.signupWithEmail)(fullName.trim(), email.trim(), password)
                 : await (0, auth_1.loginWithEmail)(email.trim(), password);
-            const user = await (0, auth_1.validateToken)(result.token);
-            await (0, auth_1.saveToken)(result.token);
-            if (user)
-                await (0, auth_1.saveUser)(user);
-            onLoggedIn(result.token);
+            await finish(result.token);
         }
-        catch (err) {
-            setEmailError(err instanceof Error ? err.message : String(err));
+        catch (e) {
+            setEmailError(e instanceof Error ? e.message : 'Something went wrong');
         }
         finally {
             setEmailBusy(false);
         }
     };
-    return (<react_native_1.SafeAreaView style={styles.container}>
-      <react_native_1.ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
-        <react_native_1.View style={styles.header}>
-          <react_native_1.Text style={styles.title}>Yaver Girişi</react_native_1.Text>
-          {onCancel && (<react_native_1.TouchableOpacity onPress={onCancel} style={styles.cancel}>
-              <react_native_1.Text style={styles.cancelText}>İptal</react_native_1.Text>
-            </react_native_1.TouchableOpacity>)}
-        </react_native_1.View>
+    const renderProvider = (id, label, onPress) => (<react_native_1.Pressable key={id} style={({ pressed }) => [
+            styles.button,
+            pressed && styles.buttonPressed,
+            busyProvider === id && { opacity: 0.6 },
+        ]} onPress={onPress} disabled={busyProvider !== null}>
+      {busyProvider === id ? (<react_native_1.ActivityIndicator color="#e0e0e0"/>) : (<react_native_1.Text style={styles.buttonText}>{label}</react_native_1.Text>)}
+    </react_native_1.Pressable>);
+    return (<react_native_1.SafeAreaView style={styles.safeArea}>
+      <react_native_1.KeyboardAvoidingView style={{ flex: 1 }} behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : undefined}>
+        <react_native_1.ScrollView contentContainerStyle={styles.scrollContainer} keyboardShouldPersistTaps="handled">
+          <react_native_1.View style={styles.header}>
+            <react_native_1.Text style={styles.logo}>Yaver</react_native_1.Text>
+            <react_native_1.Text style={styles.subtitle}>Sign in to send feedback</react_native_1.Text>
+            {onCancel && (<react_native_1.Pressable onPress={onCancel} style={styles.cancel}>
+                <react_native_1.Text style={styles.cancelText}>Cancel</react_native_1.Text>
+              </react_native_1.Pressable>)}
+          </react_native_1.View>
 
-        <react_native_1.View style={styles.tabRow}>
-          <react_native_1.TouchableOpacity style={[styles.tab, mode === 'device' && styles.tabActive]} onPress={() => setMode('device')}>
-            <react_native_1.Text style={[styles.tabText, mode === 'device' && styles.tabTextActive]}>
-              Hızlı Giriş (OAuth)
-            </react_native_1.Text>
-          </react_native_1.TouchableOpacity>
-          <react_native_1.TouchableOpacity style={[styles.tab, mode === 'email' && styles.tabActive]} onPress={() => setMode('email')}>
-            <react_native_1.Text style={[styles.tabText, mode === 'email' && styles.tabTextActive]}>
-              E-posta
-            </react_native_1.Text>
-          </react_native_1.TouchableOpacity>
-        </react_native_1.View>
+          <react_native_1.View style={styles.buttons}>
+            {react_native_1.Platform.OS === 'ios'
+            ? renderProvider('apple', 'Continue with Apple', handleApple)
+            : renderProvider('apple', 'Continue with Apple', () => handleOAuth('apple'))}
+            {renderProvider('google', 'Continue with Google', () => handleOAuth('google'))}
+            {renderProvider('github', 'Continue with GitHub', () => handleOAuth('github'))}
+            {renderProvider('gitlab', 'Continue with GitLab', () => handleOAuth('gitlab'))}
+            {renderProvider('microsoft', 'Continue with Microsoft', () => handleOAuth('microsoft'))}
 
-        {mode === 'device' && (<react_native_1.View style={styles.section}>
-            {starting ? (<react_native_1.ActivityIndicator color="#6366f1" style={{ marginVertical: 40 }}/>) : code ? (<>
-                <react_native_1.Text style={styles.hint}>
-                  Tarayıcıda yaver.io/auth/device aç ve aşağıdaki kodu gir.
-                  Sağlayıcıyla giriş yaptığında buraya otomatik dönecek.
-                </react_native_1.Text>
-                <react_native_1.View style={styles.codeBox}>
-                  <react_native_1.Text style={styles.codeText}>{code.userCode}</react_native_1.Text>
+            {!showEmailForm ? (<react_native_1.Pressable style={({ pressed }) => [
+                styles.button,
+                pressed && styles.buttonPressed,
+            ]} onPress={() => setShowEmailForm(true)} disabled={busyProvider !== null}>
+                <react_native_1.Text style={styles.buttonText}>Continue with Email</react_native_1.Text>
+              </react_native_1.Pressable>) : (<>
+                <react_native_1.View style={styles.divider}>
+                  <react_native_1.View style={styles.dividerLine}/>
+                  <react_native_1.Text style={styles.dividerText}>email</react_native_1.Text>
+                  <react_native_1.View style={styles.dividerLine}/>
                 </react_native_1.View>
-                <react_native_1.TouchableOpacity style={styles.primaryButton} onPress={openVerification}>
-                  <react_native_1.Text style={styles.primaryButtonText}>Tarayıcıda Aç</react_native_1.Text>
-                </react_native_1.TouchableOpacity>
+                {isSignUp && (<react_native_1.TextInput style={styles.input} placeholder="Full Name" placeholderTextColor="#666" value={fullName} onChangeText={setFullName} autoCapitalize="words" autoCorrect={false}/>)}
+                <react_native_1.TextInput style={styles.input} placeholder="Email" placeholderTextColor="#666" value={email} onChangeText={setEmail} keyboardType="email-address" autoCapitalize="none" autoCorrect={false}/>
+                <react_native_1.TextInput style={styles.input} placeholder="Password" placeholderTextColor="#666" value={password} onChangeText={setPassword} secureTextEntry autoCapitalize="none"/>
+                {isSignUp && (<react_native_1.TextInput style={styles.input} placeholder="Confirm Password" placeholderTextColor="#666" value={confirmPassword} onChangeText={setConfirmPassword} secureTextEntry/>)}
 
-                <react_native_1.Text style={[styles.hint, { marginTop: 20 }]}>
-                  Sağlayıcıyı önceden seçmek istersen:
-                </react_native_1.Text>
-                <react_native_1.View style={styles.providerRow}>
-                  {PROVIDERS.map((p) => (<react_native_1.TouchableOpacity key={p.id} style={styles.providerButton} onPress={() => beginDeviceCode(p.id)}>
-                      <react_native_1.Text style={styles.providerButtonText}>{p.label}</react_native_1.Text>
-                    </react_native_1.TouchableOpacity>))}
-                </react_native_1.View>
-              </>) : (<react_native_1.TouchableOpacity style={styles.primaryButton} onPress={() => beginDeviceCode(undefined)}>
-                <react_native_1.Text style={styles.primaryButtonText}>Tekrar Başlat</react_native_1.Text>
-              </react_native_1.TouchableOpacity>)}
-            {codeError && <react_native_1.Text style={styles.error}>{codeError}</react_native_1.Text>}
-          </react_native_1.View>)}
+                {emailError ? (<react_native_1.Text style={styles.errorText}>{emailError}</react_native_1.Text>) : null}
 
-        {mode === 'email' && (<react_native_1.View style={styles.section}>
-            <react_native_1.View style={styles.tabRow}>
-              <react_native_1.TouchableOpacity style={[styles.subTab, emailMode === 'login' && styles.subTabActive]} onPress={() => setEmailMode('login')}>
-                <react_native_1.Text style={styles.subTabText}>Giriş</react_native_1.Text>
-              </react_native_1.TouchableOpacity>
-              <react_native_1.TouchableOpacity style={[styles.subTab, emailMode === 'signup' && styles.subTabActive]} onPress={() => setEmailMode('signup')}>
-                <react_native_1.Text style={styles.subTabText}>Kayıt</react_native_1.Text>
-              </react_native_1.TouchableOpacity>
-            </react_native_1.View>
+                <react_native_1.Pressable style={({ pressed }) => [
+                styles.submitButton,
+                pressed && styles.buttonPressed,
+                emailBusy && { opacity: 0.6 },
+            ]} onPress={handleEmailSubmit} disabled={emailBusy}>
+                  {emailBusy ? (<react_native_1.ActivityIndicator color="#fff"/>) : (<react_native_1.Text style={styles.submitButtonText}>
+                      {isSignUp ? 'Create Account' : 'Sign In'}
+                    </react_native_1.Text>)}
+                </react_native_1.Pressable>
 
-            {emailMode === 'signup' && (<>
-                <react_native_1.Text style={styles.label}>Ad Soyad</react_native_1.Text>
-                <react_native_1.TextInput style={styles.input} value={fullName} onChangeText={setFullName} placeholder="Adın Soyadın" placeholderTextColor="#666" autoCapitalize="words"/>
+                <react_native_1.Pressable onPress={() => {
+                setIsSignUp(!isSignUp);
+                setEmailError('');
+            }}>
+                  <react_native_1.Text style={styles.toggleText}>
+                    {isSignUp
+                ? 'Already have an account? Sign In'
+                : "Don't have an account? Sign Up"}
+                  </react_native_1.Text>
+                </react_native_1.Pressable>
               </>)}
-
-            <react_native_1.Text style={styles.label}>E-posta</react_native_1.Text>
-            <react_native_1.TextInput style={styles.input} value={email} onChangeText={setEmail} placeholder="you@example.com" placeholderTextColor="#666" keyboardType="email-address" autoCapitalize="none" autoCorrect={false}/>
-
-            <react_native_1.Text style={styles.label}>Parola</react_native_1.Text>
-            <react_native_1.TextInput style={styles.input} value={password} onChangeText={setPassword} placeholder="••••••••" placeholderTextColor="#666" secureTextEntry autoCapitalize="none"/>
-
-            <react_native_1.TouchableOpacity style={styles.primaryButton} onPress={handleEmailSubmit} disabled={emailBusy}>
-              {emailBusy ? (<react_native_1.ActivityIndicator color="#fff"/>) : (<react_native_1.Text style={styles.primaryButtonText}>
-                  {emailMode === 'signup' ? 'Kayıt Ol' : 'Giriş Yap'}
-                </react_native_1.Text>)}
-            </react_native_1.TouchableOpacity>
-
-            {emailError && <react_native_1.Text style={styles.error}>{emailError}</react_native_1.Text>}
-          </react_native_1.View>)}
-      </react_native_1.ScrollView>
+          </react_native_1.View>
+        </react_native_1.ScrollView>
+      </react_native_1.KeyboardAvoidingView>
     </react_native_1.SafeAreaView>);
 };
 exports.YaverLoginScreen = YaverLoginScreen;
 const styles = react_native_1.StyleSheet.create({
-    container: { flex: 1, backgroundColor: '#1a1a2e' },
-    content: { padding: 24, paddingTop: 16 },
-    header: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 20,
+    safeArea: { flex: 1, backgroundColor: '#1a1a2e' },
+    scrollContainer: {
+        flexGrow: 1,
+        paddingHorizontal: 24,
+        justifyContent: 'center',
     },
-    title: { fontSize: 22, fontWeight: '700', color: '#e0e0e0' },
-    cancel: { padding: 8 },
+    header: { alignItems: 'center', marginBottom: 40 },
+    logo: { fontSize: 44, fontWeight: '800', color: '#e0e0e0', letterSpacing: -1 },
+    subtitle: { fontSize: 15, color: '#9ca3af', marginTop: 6 },
+    cancel: { position: 'absolute', right: 0, top: 0, padding: 8 },
     cancelText: { color: '#9ca3af', fontSize: 14 },
-    tabRow: { flexDirection: 'row', gap: 8, marginBottom: 16 },
-    tab: {
-        flex: 1,
-        paddingVertical: 12,
-        borderRadius: 10,
-        backgroundColor: 'rgba(255,255,255,0.05)',
-        alignItems: 'center',
-    },
-    tabActive: { backgroundColor: 'rgba(99,102,241,0.25)' },
-    tabText: { color: '#9ca3af', fontSize: 14, fontWeight: '600' },
-    tabTextActive: { color: '#e0e0e0' },
-    subTab: {
-        flex: 1,
-        paddingVertical: 8,
-        borderRadius: 8,
-        alignItems: 'center',
-        backgroundColor: 'rgba(255,255,255,0.05)',
-    },
-    subTabActive: { backgroundColor: 'rgba(99,102,241,0.2)' },
-    subTabText: { color: '#e0e0e0', fontSize: 13 },
-    section: { marginTop: 4 },
-    hint: { color: '#9ca3af', fontSize: 13, lineHeight: 18 },
-    codeBox: {
-        backgroundColor: 'rgba(99,102,241,0.15)',
+    buttons: { gap: 12 },
+    button: {
+        backgroundColor: 'rgba(255,255,255,0.06)',
         borderWidth: 1,
-        borderColor: 'rgba(99,102,241,0.35)',
-        borderRadius: 14,
-        paddingVertical: 24,
-        alignItems: 'center',
-        marginTop: 16,
-        marginBottom: 16,
-    },
-    codeText: {
-        color: '#e0e7ff',
-        fontSize: 36,
-        fontWeight: '800',
-        letterSpacing: 6,
-        fontVariant: ['tabular-nums'],
-    },
-    primaryButton: {
-        backgroundColor: '#6366f1',
+        borderColor: 'rgba(255,255,255,0.12)',
         borderRadius: 12,
         paddingVertical: 14,
         alignItems: 'center',
-        marginTop: 8,
+        justifyContent: 'center',
     },
-    primaryButtonText: { color: '#fff', fontWeight: '700', fontSize: 15 },
-    providerRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 10 },
-    providerButton: {
-        backgroundColor: 'rgba(255,255,255,0.08)',
-        borderRadius: 10,
-        paddingVertical: 10,
-        paddingHorizontal: 14,
+    buttonPressed: { opacity: 0.7 },
+    buttonText: { color: '#e0e0e0', fontSize: 15, fontWeight: '600' },
+    divider: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginTop: 16,
+        marginBottom: 8,
     },
-    providerButtonText: { color: '#e0e0e0', fontSize: 13, fontWeight: '600' },
-    label: { color: '#9ca3af', fontSize: 12, marginTop: 14, marginBottom: 6 },
+    dividerLine: { flex: 1, height: 1, backgroundColor: 'rgba(255,255,255,0.12)' },
+    dividerText: { marginHorizontal: 14, fontSize: 12, color: '#6b7280' },
     input: {
-        backgroundColor: 'rgba(255,255,255,0.08)',
+        backgroundColor: 'rgba(255,255,255,0.06)',
         borderWidth: 1,
-        borderColor: 'rgba(255,255,255,0.15)',
-        borderRadius: 10,
+        borderColor: 'rgba(255,255,255,0.12)',
+        borderRadius: 12,
         paddingHorizontal: 14,
-        paddingVertical: 12,
+        paddingVertical: 13,
         color: '#e0e0e0',
         fontSize: 15,
     },
-    error: { color: '#ef4444', fontSize: 13, marginTop: 12 },
+    errorText: { color: '#ef4444', fontSize: 13, textAlign: 'center' },
+    submitButton: {
+        backgroundColor: '#6366f1',
+        borderRadius: 12,
+        paddingVertical: 14,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 4,
+    },
+    submitButtonText: { color: '#fff', fontSize: 15, fontWeight: '700' },
+    toggleText: {
+        color: '#818cf8',
+        fontSize: 14,
+        textAlign: 'center',
+        marginTop: 4,
+    },
 });

package/dist/ShakeDetector.js

@@ -2,6 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShakeDetector = void 0;
 const react_native_1 = require("react-native");
+// Detects that the surrounding runtime is Yaver's super-host bridge. The
+// YaverInfo native module is only registered inside Yaver's container
+// (see mobile/ios/Yaver/YaverInfo.{swift,m} and the Android equivalent),
+// so it is undefined in a standalone third-party app. When the SDK runs
+// inside Yaver we yield shake handling to Yaver's native
+// ShakeDetectingWindow — the user should only ever see the 2-button
+// "Reload / Back to Yaver" overlay, never a FeedbackModal popped from
+// inside the guest bundle.
+function isRunningInsideYaverHost() {
+    try {
+        return !!react_native_1.NativeModules?.YaverInfo;
+    }
+    catch {
+        return false;
+    }
+}
 const SHAKE_TIMEOUT_MS = 1000; // minimum time between shakes
 const ACCEL_THRESHOLD_G = 1.8; // peak g-force that qualifies as a shake event
 const ACCEL_MIN_HITS = 3; // peaks within the window before we fire
@@ -34,6 +50,12 @@ class ShakeDetector {
     }
     start(onShake) {
         this.stop();
+        // When the app is loaded inside Yaver's super-host (Hermes push),
+        // Yaver owns the shake gesture and shows its own "Reload / Back to
+        // Yaver" overlay. We must not also fire the guest-side callback,
+        // otherwise the user gets both UIs at once.
+        if (isRunningInsideYaverHost())
+            return;
         this.subscribeDevMenu(onShake);
         this.subscribeAccelerometer(onShake);
     }

package/dist/YaverFeedback.js

@@ -1,11 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.YaverFeedback = void 0;
+const react_native_1 = require("react-native");
 const Discovery_1 = require("./Discovery");
 const BlackBox_1 = require("./BlackBox");
 const P2PClient_1 = require("./P2PClient");
 const ShakeDetector_1 = require("./ShakeDetector");
 const auth_1 = require("./auth");
+// Is this JS runtime the Yaver mobile app's super-host bridge? The
+// YaverInfo native module is only registered inside Yaver's container
+// (mobile/ios/Yaver/YaverInfo.{swift,m} + Android counterpart); a
+// standalone app bundled by its own developer has no such module.
+// When the SDK is loaded through Yaver's Hermes-push guest runtime we
+// deliberately no-op every public entry point — Yaver owns the shake
+// gesture ("Reload / Back to Yaver" overlay), the feedback capture
+// flow, and the BlackBox streaming; running a second copy from inside
+// the guest just produces duplicate UIs and double P2P sessions.
+function isRunningInsideYaverHost() {
+    try {
+        return !!react_native_1.NativeModules?.YaverInfo;
+    }
+    catch {
+        return false;
+    }
+}
+// Suppresses SDK activation when inside Yaver super-host. Callers of
+// YaverFeedback.init / startReport / startBatchRecording / … early-out
+// by checking this first so the SDK's side effects (accelerometer,
+// BlackBox HTTP, SSE command channel, FeedbackModal mount) never start.
+const YAVER_HOST_SUPPRESS = isRunningInsideYaverHost();
 let config = null;
 let enabled = false;
 let p2pClient = null;
@@ -34,6 +57,11 @@ class YaverFeedback {
      * via `YaverDiscovery` on the first `startReport()` call.
      */
     static init(cfg) {
+        if (YAVER_HOST_SUPPRESS) {
+            // Running inside Yaver's super-host — yield to Yaver's native UX.
+            enabled = false;
+            return;
+        }
         config = {
             trigger: 'shake',
             maxRecordingDuration: 120,