react-native-inapp-inspector 2.3.10 → 2.3.11

package/dist/commonjs/components/Inspector/DebuggingTab.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const DebuggingTab: React.FC;
+export default DebuggingTab;

package/dist/commonjs/components/Inspector/DebuggingTab.js

@@ -0,0 +1,682 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DebuggingTab = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const QRCodeView_1 = __importDefault(require("../QRCodeView"));
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const helpers_1 = require("../../helpers");
+const toast_1 = require("../../helpers/toast");
+const i18n_1 = require("../../i18n");
+const NetworkIcons_1 = require("../NetworkIcons");
+const COMMON_PORTS = [8081, 8082, 8083, 19000];
+const DebuggingTab = () => {
+    const { t } = (0, i18n_1.useTranslation)();
+    const detectedConfig = (0, react_1.useMemo)(() => {
+        const scriptURL = react_native_1.NativeModules.SourceCode?.scriptURL || '';
+        let host = 'localhost';
+        let port = 8081;
+        try {
+            if (scriptURL.includes('://')) {
+                const urlWithoutScheme = scriptURL.split('://')[1];
+                const hostAndPort = urlWithoutScheme.split('/')[0];
+                if (hostAndPort.includes(':')) {
+                    const parts = hostAndPort.split(':');
+                    host = parts[0];
+                    const parsedPort = parseInt(parts[1], 10);
+                    if (!isNaN(parsedPort))
+                        port = parsedPort;
+                }
+                else {
+                    host = hostAndPort;
+                }
+            }
+        }
+        catch { }
+        return { host, port, scriptURL };
+    }, []);
+    const [hostIp, setHostIp] = (0, react_1.useState)(() => {
+        if (detectedConfig.host === 'localhost' ||
+            detectedConfig.host === '127.0.0.1' ||
+            detectedConfig.host === '10.0.2.2') {
+            return '192.168.1.15';
+        }
+        return detectedConfig.host;
+    });
+    const [selectedPort, setSelectedPort] = (0, react_1.useState)(detectedConfig.port);
+    const [apkPath, setApkPath] = (0, react_1.useState)('app-debug.apk');
+    const [activeQrTab, setActiveQrTab] = (0, react_1.useState)('metro');
+    const [isAutoDetecting, setIsAutoDetecting] = (0, react_1.useState)(false);
+    const [portsStatus, setPortsStatus] = (0, react_1.useState)({});
+    const probePorts = (0, react_1.useCallback)(async () => {
+        setIsAutoDetecting(true);
+        const results = {};
+        for (const p of COMMON_PORTS) {
+            results[p] = { port: p, status: 'checking' };
+        }
+        setPortsStatus({ ...results });
+        let foundActivePort = null;
+        for (const p of COMMON_PORTS) {
+            const startTime = Date.now();
+            try {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 1500);
+                const res = await fetch(`http://localhost:${p}/status`, {
+                    signal: controller.signal,
+                });
+                clearTimeout(timeoutId);
+                const text = await res.text();
+                const latency = Date.now() - startTime;
+                if (res.ok && text.includes('packager-status:running')) {
+                    results[p] = { port: p, status: 'active', latencyMs: latency };
+                    if (!foundActivePort)
+                        foundActivePort = p;
+                }
+                else {
+                    results[p] = { port: p, status: 'inactive' };
+                }
+            }
+            catch {
+                results[p] = { port: p, status: 'inactive' };
+            }
+            setPortsStatus({ ...results });
+        }
+        if (foundActivePort) {
+            setSelectedPort(foundActivePort);
+            (0, toast_1.showToast)(`Detected Metro running on Port ${foundActivePort}!`);
+        }
+        setIsAutoDetecting(false);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        probePorts();
+    }, [probePorts]);
+    const metroBundleUrl = `http://${hostIp}:${selectedPort}/index.bundle?platform=android&dev=true`;
+    const apkDownloadUrl = `http://${hostIp}:${selectedPort}/${apkPath}`;
+    const devSettingsHost = `${hostIp}:${selectedPort}`;
+    const currentQrValue = (0, react_1.useMemo)(() => {
+        if (activeQrTab === 'apk')
+            return apkDownloadUrl;
+        if (activeQrTab === 'host')
+            return devSettingsHost;
+        return metroBundleUrl;
+    }, [activeQrTab, apkDownloadUrl, devSettingsHost, metroBundleUrl]);
+    const activePortInfo = portsStatus[selectedPort];
+    return (<react_native_1.ScrollView style={styles.container} contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
+      
+      <react_native_1.View style={styles.serverCard}>
+        <react_native_1.View style={styles.serverCardTop}>
+          <react_native_1.View style={styles.serverStatusLeft}>
+            <react_native_1.View style={[
+            styles.statusDot,
+            {
+                backgroundColor: activePortInfo?.status === 'active'
+                    ? AppColors_1.AppColors.greenColor
+                    : activePortInfo?.status === 'checking'
+                        ? AppColors_1.AppColors.warningIconGold
+                        : AppColors_1.AppColors.errorColor,
+            },
+        ]}/>
+            <react_native_1.View>
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                <react_native_1.Text style={styles.serverTitle}>Metro Dev Server</react_native_1.Text>
+                <react_native_1.View style={styles.portPill}>
+                  <react_native_1.Text style={styles.portPillText}>Port {selectedPort}</react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+              <react_native_1.Text style={styles.serverSubtitle}>
+                {activePortInfo?.status === 'active'
+            ? `🟢 Active & Bundling (${activePortInfo.latencyMs}ms)`
+            : activePortInfo?.status === 'checking'
+                ? '🟡 Probing Metro Ports...'
+                : '🔴 Standby / Select active port'}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          <TouchableScale_1.default onPress={probePorts} style={styles.scanBtn} hitSlop={8}>
+            <NetworkIcons_1.RepeatIcon size={12} color={AppColors_1.AppColors.purple}/>
+            <react_native_1.Text style={styles.scanBtnText}>Re-scan</react_native_1.Text>
+          </TouchableScale_1.default>
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={styles.portsRow}>
+          {COMMON_PORTS.map(p => {
+            const isSelected = selectedPort === p;
+            const pInfo = portsStatus[p];
+            const isActive = pInfo?.status === 'active';
+            return (<react_native_1.TouchableOpacity key={p} activeOpacity={0.7} onPress={() => setSelectedPort(p)} style={[
+                    styles.portChip,
+                    isSelected && styles.portChipSelected,
+                    isActive && { borderColor: AppColors_1.AppColors.greenColor },
+                ]}>
+                <react_native_1.View style={[
+                    styles.portMiniDot,
+                    {
+                        backgroundColor: isActive
+                            ? AppColors_1.AppColors.greenColor
+                            : AppColors_1.AppColors.grayTextWeak,
+                    },
+                ]}/>
+                <react_native_1.Text style={[
+                    styles.portChipText,
+                    isSelected && styles.portChipTextSelected,
+                ]}>
+                  {p}
+                </react_native_1.Text>
+                {isActive && (<react_native_1.View style={styles.liveBadge}>
+                    <react_native_1.Text style={styles.liveBadgeText}>LIVE</react_native_1.Text>
+                  </react_native_1.View>)}
+              </react_native_1.TouchableOpacity>);
+        })}
+        </react_native_1.View>
+      </react_native_1.View>
+
+      
+      <react_native_1.View style={styles.card}>
+        <react_native_1.View style={styles.cardHeader}>
+          <react_native_1.Text style={styles.cardTitle}>HOST IP & BUNDLE LOCATION</react_native_1.Text>
+          <react_native_1.TouchableOpacity onPress={() => {
+            if (detectedConfig.host !== 'localhost' &&
+                detectedConfig.host !== '127.0.0.1' &&
+                detectedConfig.host !== '10.0.2.2') {
+                setHostIp(detectedConfig.host);
+                (0, toast_1.showToast)(`Reset to detected IP: ${detectedConfig.host}`);
+            }
+        }}>
+            <react_native_1.Text style={styles.headerActionText}>Reset to Detected</react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.inputContainer}>
+          <react_native_1.Text style={styles.inputPrefix}>http://</react_native_1.Text>
+          <react_native_1.TextInput style={styles.input} value={hostIp} onChangeText={setHostIp} placeholder="192.168.1.15" placeholderTextColor={AppColors_1.AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
+          <react_native_1.Text style={styles.inputSuffix}>:{selectedPort}</react_native_1.Text>
+        </react_native_1.View>
+        <react_native_1.Text style={styles.inputHint}>
+          💡 Ensure your physical Android device and Mac are connected to the same Wi-Fi network.
+        </react_native_1.Text>
+      </react_native_1.View>
+
+      
+      <react_native_1.View style={styles.qrCard}>
+        
+        <react_native_1.View style={styles.qrTabsRow}>
+          <react_native_1.TouchableOpacity activeOpacity={0.7} onPress={() => setActiveQrTab('metro')} style={[
+            styles.qrTab,
+            activeQrTab === 'metro' && styles.qrTabActive,
+        ]}>
+            <NetworkIcons_1.BoltIcon size={13} color={activeQrTab === 'metro' ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>
+            <react_native_1.Text style={[
+            styles.qrTabText,
+            activeQrTab === 'metro' && styles.qrTabTextActive,
+        ]}>
+              Metro Live Reload
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+
+          <react_native_1.TouchableOpacity activeOpacity={0.7} onPress={() => setActiveQrTab('apk')} style={[
+            styles.qrTab,
+            activeQrTab === 'apk' && styles.qrTabActive,
+        ]}>
+            <NetworkIcons_1.PackageIcon size={13} color={activeQrTab === 'apk' ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>
+            <react_native_1.Text style={[
+            styles.qrTabText,
+            activeQrTab === 'apk' && styles.qrTabTextActive,
+        ]}>
+              Install Debug APK
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+
+          <react_native_1.TouchableOpacity activeOpacity={0.7} onPress={() => setActiveQrTab('host')} style={[
+            styles.qrTab,
+            activeQrTab === 'host' && styles.qrTabActive,
+        ]}>
+            <NetworkIcons_1.SmartphoneIcon size={13} color={activeQrTab === 'host' ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>
+            <react_native_1.Text style={[
+            styles.qrTabText,
+            activeQrTab === 'host' && styles.qrTabTextActive,
+        ]}>
+              Dev Host Info
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={styles.qrWrapper}>
+          <QRCodeView_1.default value={currentQrValue} size={190} color={AppColors_1.AppColors.primaryBlack} backgroundColor={AppColors_1.AppColors.white}/>
+
+          <react_native_1.View style={styles.qrInfoBox}>
+            <react_native_1.Text style={styles.qrTargetTitle}>
+              {activeQrTab === 'apk'
+            ? '📦 Direct APK Download URL'
+            : activeQrTab === 'host'
+                ? '📱 Dev Settings Bundle Host'
+                : '⚡ Live Metro Fast-Refresh Endpoint'}
+            </react_native_1.Text>
+            <react_native_1.Text style={styles.qrTargetUrl} numberOfLines={2} ellipsizeMode="middle">
+              {currentQrValue}
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={styles.qrActionsRow}>
+          <TouchableScale_1.default onPress={() => (0, helpers_1.copyToClipboard)(currentQrValue, 'QR Link')} style={styles.actionBtn}>
+            <react_native_1.Text style={styles.actionBtnText}>Copy Link</react_native_1.Text>
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default onPress={() => {
+            react_native_1.Share.share({
+                message: currentQrValue,
+                title: 'Metro Debug Link',
+            });
+        }} style={[styles.actionBtn, styles.actionBtnPrimary]}>
+            <react_native_1.Text style={styles.actionBtnPrimaryText}>Share to Device</react_native_1.Text>
+          </TouchableScale_1.default>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      
+      <react_native_1.View style={styles.guideCard}>
+        <react_native_1.Text style={styles.guideHeading}>📱 HOW TO CONNECT ANDROID DEVICE:</react_native_1.Text>
+
+        <react_native_1.View style={styles.stepRow}>
+          <react_native_1.View style={styles.stepNumberBadge}>
+            <react_native_1.Text style={styles.stepNumberText}>1</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={{ flex: 1 }}>
+            <react_native_1.Text style={styles.stepTitle}>Connect to Same Wi-Fi</react_native_1.Text>
+            <react_native_1.Text style={styles.stepDesc}>
+              Make sure your Android phone is connected to the same Wi-Fi router or Mac Mobile Hotspot.
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.stepRow}>
+          <react_native_1.View style={styles.stepNumberBadge}>
+            <react_native_1.Text style={styles.stepNumberText}>2</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={{ flex: 1 }}>
+            <react_native_1.Text style={styles.stepTitle}>Scan to Install / Connect</react_native_1.Text>
+            <react_native_1.Text style={styles.stepDesc}>
+              Open Android Camera or browser, scan the QR code above to download the APK or connect Metro.
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.stepRow}>
+          <react_native_1.View style={styles.stepNumberBadge}>
+            <react_native_1.Text style={styles.stepNumberText}>3</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={{ flex: 1 }}>
+            <react_native_1.Text style={styles.stepTitle}>Simultaneous Live Fast-Refresh ⚡</react_native_1.Text>
+            <react_native_1.Text style={styles.stepDesc}>
+              Any changes saved in VS Code will immediately update <react_native_1.Text style={{ fontWeight: '700' }}>both the iOS Simulator and physical Android phone</react_native_1.Text> in real-time!
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.ScrollView>);
+};
+exports.DebuggingTab = DebuggingTab;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: AppColors_1.AppColors.contentBg,
+    },
+    content: {
+        padding: 12,
+        gap: 12,
+        paddingBottom: 40,
+    },
+    serverCard: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 14,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+        gap: 12,
+    },
+    serverCardTop: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    serverStatusLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        flex: 1,
+    },
+    statusDot: {
+        width: 12,
+        height: 12,
+        borderRadius: 6,
+    },
+    serverTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 15,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    serverSubtitle: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayText,
+        marginTop: 2,
+    },
+    portPill: {
+        backgroundColor: `${AppColors_1.AppColors.purple}18`,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 6,
+    },
+    portPillText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: AppColors_1.AppColors.purple,
+    },
+    scanBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        borderWidth: 1,
+        borderColor: `${AppColors_1.AppColors.purple}30`,
+    },
+    scanBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.purple,
+    },
+    portsRow: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    portChip: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        paddingVertical: 7,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    portChipSelected: {
+        backgroundColor: `${AppColors_1.AppColors.purple}18`,
+        borderColor: AppColors_1.AppColors.purple,
+    },
+    portMiniDot: {
+        width: 5,
+        height: 5,
+        borderRadius: 2.5,
+    },
+    portChipText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextStrong,
+    },
+    portChipTextSelected: {
+        color: AppColors_1.AppColors.purple,
+    },
+    liveBadge: {
+        backgroundColor: AppColors_1.AppColors.greenColor,
+        paddingHorizontal: 3,
+        paddingVertical: 0.5,
+        borderRadius: 3,
+    },
+    liveBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 7.5,
+        color: AppColors_1.AppColors.white,
+    },
+    card: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 14,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+        gap: 8,
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    cardTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.6,
+    },
+    headerActionText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.purple,
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        paddingHorizontal: 10,
+        height: 40,
+    },
+    inputPrefix: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    input: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors_1.AppColors.primaryBlack,
+        paddingVertical: 0,
+    },
+    inputSuffix: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.purple,
+    },
+    inputHint: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextWeak,
+        lineHeight: 15,
+    },
+    qrCard: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 14,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+        alignItems: 'center',
+        gap: 14,
+    },
+    qrTabsRow: {
+        flexDirection: 'row',
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderRadius: 10,
+        padding: 3,
+        width: '100%',
+        gap: 4,
+    },
+    qrTab: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        paddingVertical: 7,
+        borderRadius: 8,
+    },
+    qrTabActive: {
+        backgroundColor: AppColors_1.AppColors.purple,
+    },
+    qrTabText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayText,
+    },
+    qrTabTextActive: {
+        color: AppColors_1.AppColors.white,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+    },
+    qrWrapper: {
+        alignItems: 'center',
+        gap: 12,
+    },
+    qrInfoBox: {
+        alignItems: 'center',
+        maxWidth: 280,
+        gap: 2,
+    },
+    qrTargetTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    qrTargetUrl: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.skyBlue,
+        textAlign: 'center',
+    },
+    qrActionsRow: {
+        flexDirection: 'row',
+        gap: 10,
+        width: '100%',
+    },
+    actionBtn: {
+        flex: 1,
+        paddingVertical: 10,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    actionBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.grayTextStrong,
+    },
+    actionBtnPrimary: {
+        backgroundColor: AppColors_1.AppColors.purple,
+        borderColor: AppColors_1.AppColors.purple,
+    },
+    actionBtnPrimaryText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.white,
+    },
+    guideCard: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 14,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        gap: 10,
+    },
+    guideHeading: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.6,
+    },
+    stepRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: 10,
+    },
+    stepNumberBadge: {
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        backgroundColor: `${AppColors_1.AppColors.purple}18`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: 1,
+    },
+    stepNumberText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.purple,
+    },
+    stepTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    stepDesc: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayText,
+        lineHeight: 16,
+        marginTop: 1,
+    },
+});
+exports.default = exports.DebuggingTab;