react-native-debug-toolkit 3.2.1 → 3.2.3

package/lib/typescript/src/features/devConnect/nativeDevConnect.d.ts

@@ -0,0 +1,17 @@
+type MetroBundleFailureReason = 'invalid_target' | 'native_unavailable' | 'fetch_unavailable' | 'metro_unreachable' | 'native_error';
+export type MetroBundleResult = {
+    ok: true;
+    hostPort: string;
+} | {
+    ok: false;
+    reason: MetroBundleFailureReason;
+    error?: string;
+    statusUrl?: string;
+};
+export declare function isNativeDevConnectAvailable(): boolean;
+export declare function applyMetroBundle(host: string, port: string): Promise<MetroBundleResult>;
+export declare function resetMetroBundle(): Promise<MetroBundleResult | {
+    ok: true;
+}>;
+export {};
+//# sourceMappingURL=nativeDevConnect.d.ts.map

package/lib/typescript/src/features/devConnect/nativeDevConnect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nativeDevConnect.d.ts","sourceRoot":"","sources":["../../../../../src/features/devConnect/nativeDevConnect.ts"],"names":[],"mappings":"AAUA,KAAK,wBAAwB,GACzB,gBAAgB,GAChB,oBAAoB,GACpB,mBAAmB,GACnB,mBAAmB,GACnB,cAAc,CAAC;AAEnB,MAAM,MAAM,iBAAiB,GACzB;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAC9B;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,wBAAwB,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAsBxF,wBAAgB,2BAA2B,IAAI,OAAO,CAErD;AAmCD,wBAAsB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,iBAAiB,CAAC,CA6B7F;AAED,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,iBAAiB,GAAG;IAAE,EAAE,EAAE,IAAI,CAAA;CAAE,CAAC,CAgBlF"}

package/lib/typescript/src/features/devConnect/platformDetect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"platformDetect.d.ts","sourceRoot":"","sources":["../../../../../src/features/devConnect/platformDetect.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,IAAI,OAAO,CAuBrC"}
+{"version":3,"file":"platformDetect.d.ts","sourceRoot":"","sources":["../../../../../src/features/devConnect/platformDetect.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,IAAI,OAAO,CAkBrC"}

package/lib/typescript/src/features/devConnect/types.d.ts

@@ -1,7 +1,10 @@
 export interface DevConnectState {
     isSimulator: boolean;
     computerHost: string;
+    metroPort: string;
+    daemonPort: string;
     qrAvailable: boolean;
+    nativeMetroAvailable: boolean;
     streaming: boolean;
 }
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/features/devConnect/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/features/devConnect/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/features/devConnect/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;CACpB"}

package/lib/typescript/src/utils/debugPreferences.d.ts

@@ -7,5 +7,7 @@ export declare const KEYS: {
     readonly networkLogs: "@react_native_debug_toolkit/network_logs";
     readonly trackLogs: "@react_native_debug_toolkit/track_logs";
     readonly computerHost: "@react_native_debug_toolkit/computer_host";
+    readonly metroPort: "@react_native_debug_toolkit/metro_port";
+    readonly daemonPort: "@react_native_debug_toolkit/daemon_port";
 };
 //# sourceMappingURL=debugPreferences.d.ts.map

package/lib/typescript/src/utils/debugPreferences.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"debugPreferences.d.ts","sourceRoot":"","sources":["../../../../src/utils/debugPreferences.ts"],"names":[],"mappings":"AAgBA,wBAAsB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAU7E;AAED,wBAAsB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAWvE;AAED,eAAO,MAAM,IAAI;;;;;;;CAOP,CAAC"}
+{"version":3,"file":"debugPreferences.d.ts","sourceRoot":"","sources":["../../../../src/utils/debugPreferences.ts"],"names":[],"mappings":"AAkCA,wBAAsB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAoB7E;AAED,wBAAsB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA0BvE;AAED,eAAO,MAAM,IAAI;;;;;;;;;CASP,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "3.2.1",
+  "version": "3.2.3",
   "description": "A local-first React Native debug toolkit with Web Console, HTTP API, and MCP support for AI-readable app logs",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -10,6 +10,9 @@
     "lib",
     "bin",
     "node",
+    "ios",
+    "android",
+    "react-native-debug-toolkit.podspec",
     "README.md",
     "LICENSE",
     "!**/__tests__",

package/react-native-debug-toolkit.podspec

@@ -0,0 +1,18 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = 'react-native-debug-toolkit'
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.description  = package['description']
+  s.homepage     = package['homepage']
+  s.license      = package['license']
+  s.author       = package['author']
+  s.source       = { :git => package['repository']['url'], :tag => s.version.to_s }
+
+  s.platforms    = { :ios => '12.0' }
+  s.source_files = 'ios/**/*.{h,m,mm}'
+  s.dependency 'React-Core'
+end

package/src/features/devConnect/DevConnectQrScanner.tsx

@@ -1,7 +1,6 @@
 import React, { Component, useCallback, useEffect, useRef, useState } from 'react';
 import {
   Modal,
-  Pressable,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -14,7 +13,7 @@ import {
   type CameraKitReadCodeEvent,
   type ExpoCameraScanResult,
 } from './cameraKit';
-import { parseMetroQrPayload } from './devConnectUtils';
+import { parseMetroQrPayload, type ParsedComputerTarget } from './devConnectUtils';
 
 // ─── Camera Error Boundary ─────────────────────────────────
 
@@ -40,7 +39,9 @@ class CameraErrorBoundary extends Component<CameraBoundaryProps, CameraBoundaryS
   }
 
   render() {
-    if (this.state.hasError) return null;
+    if (this.state.hasError) {
+      return null;
+    }
     return this.props.children;
   }
 }
@@ -50,10 +51,10 @@ class CameraErrorBoundary extends Component<CameraBoundaryProps, CameraBoundaryS
 interface DevConnectQrScannerProps {
   visible: boolean;
   onClose: () => void;
-  onScanHost: (host: string) => void;
+  onScanTarget: (target: ParsedComputerTarget) => void;
 }
 
-export function DevConnectQrScanner({ visible, onClose, onScanHost }: DevConnectQrScannerProps) {
+export function DevConnectQrScanner({ visible, onClose, onScanTarget }: DevConnectQrScannerProps) {
   const scannedRef = useRef(false);
   const [error, setError] = useState<string | null>(null);
   const [cameraFailed, setCameraFailed] = useState(false);
@@ -68,8 +69,12 @@ export function DevConnectQrScanner({ visible, onClose, onScanHost }: DevConnect
   }, [visible]);
 
   const handleScanned = useCallback((rawValue: string) => {
-    if (scannedRef.current) return;
-    if (typeof rawValue !== 'string') return;
+    if (scannedRef.current) {
+      return;
+    }
+    if (typeof rawValue !== 'string') {
+      return;
+    }
 
     const parsed = parseMetroQrPayload(rawValue);
     if (!parsed) {
@@ -79,9 +84,12 @@ export function DevConnectQrScanner({ visible, onClose, onScanHost }: DevConnect
 
     scannedRef.current = true;
     setError(null);
-    onScanHost(parsed.computerHost);
+    onScanTarget({
+      computerHost: parsed.computerHost,
+      metroPort: parsed.metroPort,
+    });
     onClose();
-  }, [onClose, onScanHost]);
+  }, [onClose, onScanTarget]);
 
   const handleCameraKitRead = useCallback((event: CameraKitReadCodeEvent) => {
     handleScanned(event.nativeEvent?.codeStringValue ?? '');
@@ -95,49 +103,59 @@ export function DevConnectQrScanner({ visible, onClose, onScanHost }: DevConnect
     setCameraFailed(true);
   }, []);
 
-  if (!visible || !scanner) return null;
+  if (!visible || !scanner) {
+    return null;
+  }
 
   return (
-    <Modal visible={visible} animationType="slide" onRequestClose={onClose}>
+    <Modal visible={visible} animationType="slide" presentationStyle="fullScreen" onRequestClose={onClose}>
       <View style={styles.container}>
-        {!cameraFailed && (
-          <CameraErrorBoundary onCameraError={handleCameraError}>
-            {scanner.kind === 'camera-kit' && scanner.CameraKit ? (
-              <scanner.CameraKit.Camera
-                style={styles.camera}
-                cameraType={scanner.CameraKit.CameraType?.Back}
-                scanBarcode
-                onReadCode={handleCameraKitRead}
-                showFrame
-                laserColor={Colors.primary}
-                frameColor={Colors.primary}
-                allowedBarcodeTypes={['qr']}
-              />
-            ) : scanner.kind === 'expo-camera' && scanner.ExpoCamera ? (
-              <scanner.ExpoCamera.Camera
-                style={styles.camera}
-                onBarCodeScanned={handleExpoScanned}
-                barCodeScannerSettings={{ barCodeTypes: ['qr'] }}
-              />
-            ) : null}
-          </CameraErrorBoundary>
-        )}
-        {cameraFailed && (
-          <View style={styles.cameraFallback}>
-            <Text style={styles.cameraFallbackText}>Camera unavailable.</Text>
-            <Text style={styles.cameraFallbackHint}>Please enter computer IP manually.</Text>
+        <View style={styles.previewLayer}>
+          {!cameraFailed && (
+            <CameraErrorBoundary onCameraError={handleCameraError}>
+              {scanner.kind === 'camera-kit' && scanner.CameraKit ? (
+                <scanner.CameraKit.Camera
+                  style={styles.camera}
+                  cameraType={scanner.CameraKit.CameraType?.Back}
+                  scanBarcode
+                  onReadCode={handleCameraKitRead}
+                  showFrame
+                  laserColor={Colors.primary}
+                  frameColor={Colors.primary}
+                  allowedBarcodeTypes={['qr']}
+                />
+              ) : scanner.kind === 'expo-camera' && scanner.ExpoCamera ? (
+                <scanner.ExpoCamera.Camera
+                  style={styles.camera}
+                  onBarCodeScanned={handleExpoScanned}
+                  barCodeScannerSettings={{ barCodeTypes: ['qr'] }}
+                />
+              ) : null}
+            </CameraErrorBoundary>
+          )}
+          {cameraFailed && (
+            <View style={styles.cameraFallback}>
+              <Text style={styles.cameraFallbackText}>Camera unavailable.</Text>
+              <Text style={styles.cameraFallbackHint}>Please enter computer IP manually.</Text>
+            </View>
+          )}
+        </View>
+
+        <View style={styles.topBar}>
+          <View style={styles.titleGroup}>
+            <Text style={styles.title}>Scan Metro QR</Text>
+            <Text style={styles.subtitle}>Expo or Metro URL</Text>
           </View>
-        )}
-        <View style={styles.footer}>
-          {!cameraFailed && !error && <Text style={styles.hint}>Scan a Metro QR code.</Text>}
-          {error && <Text style={styles.error}>{error}</Text>}
-          <TouchableOpacity style={styles.closeButton} onPress={onClose} activeOpacity={0.7}>
+          <TouchableOpacity style={styles.closeButton} onPress={onClose} activeOpacity={0.75}>
             <Text style={styles.closeButtonText}>Close</Text>
           </TouchableOpacity>
         </View>
-        <Pressable style={styles.topClose} onPress={onClose}>
-          <Text style={styles.topCloseText}>Close</Text>
-        </Pressable>
+
+        <View style={[styles.statusPill, error && styles.statusPillError]}>
+          <Text style={[styles.statusText, error && styles.statusTextError]}>
+            {error ?? 'Point the camera at exp:// or http:// Metro URL.'}
+          </Text>
+        </View>
       </View>
     </Modal>
   );
@@ -145,29 +163,52 @@ export function DevConnectQrScanner({ visible, onClose, onScanHost }: DevConnect
 
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: '#000' },
-  camera: { flex: 1 },
-  cameraFallback: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 },
+  previewLayer: { ...StyleSheet.absoluteFillObject },
+  camera: { ...StyleSheet.absoluteFillObject },
+  cameraFallback: { ...StyleSheet.absoluteFillObject, justifyContent: 'center', alignItems: 'center', padding: 24 },
   cameraFallbackText: { fontSize: 16, color: '#fff', fontWeight: '600', marginBottom: 8 },
   cameraFallbackHint: { fontSize: 13, color: 'rgba(255,255,255,0.6)', textAlign: 'center' },
-  footer: { padding: 16, backgroundColor: Colors.surface },
-  hint: { fontSize: 13, color: Colors.textSecondary, marginBottom: 12 },
-  error: { fontSize: 13, color: Colors.error, marginBottom: 12 },
+  topBar: {
+    position: 'absolute',
+    top: 44,
+    left: 16,
+    right: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingLeft: 14,
+    paddingRight: 8,
+    paddingVertical: 8,
+    borderRadius: 12,
+    backgroundColor: 'rgba(0,0,0,0.62)',
+  },
+  titleGroup: { flex: 1, paddingRight: 10 },
+  title: { color: '#fff', fontSize: 15, fontWeight: '700' },
+  subtitle: { color: 'rgba(255,255,255,0.68)', fontSize: 11, marginTop: 2 },
   closeButton: {
     alignItems: 'center',
     justifyContent: 'center',
-    paddingVertical: 11,
-    borderRadius: 10,
-    backgroundColor: Colors.primary,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255,255,255,0.14)',
   },
   closeButtonText: { color: '#fff', fontSize: 14, fontWeight: '600' },
-  topClose: {
+  statusPill: {
     position: 'absolute',
-    top: 48,
+    left: 16,
     right: 16,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 8,
-    backgroundColor: 'rgba(0,0,0,0.55)',
+    bottom: 30,
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+    borderRadius: 12,
+    backgroundColor: 'rgba(0,0,0,0.62)',
+  },
+  statusPillError: {
+    backgroundColor: `${Colors.error}22`,
+    borderWidth: 1,
+    borderColor: `${Colors.error}66`,
   },
-  topCloseText: { color: '#fff', fontSize: 13, fontWeight: '600' },
+  statusText: { color: '#fff', fontSize: 13, textAlign: 'center', lineHeight: 18 },
+  statusTextError: { color: '#fff' },
 });