react-native-inapp-inspector 2.0.7 → 2.2.0

package/dist/esm/components/Inspector/DeviceTab.js

@@ -1,678 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { Platform, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
-import { useInspector } from './InspectorContext';
-import TouchableScale from '../TouchableScale';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { copyToClipboard, formatBytes } from '../../helpers';
-import { showToast } from '../../helpers/toast';
-import { DevicePhoneIcon, AppleIcon, AndroidIcon, CopyIcon, CodeIcon, SearchIcon, ClearIcon, CpuIcon, FingerprintIcon, MonitorIcon, } from '../NetworkIcons';
-import { getNativeDeviceMetrics } from '../../native/NativeInspector';
-export const DeviceTab = React.memo(() => {
-    const { deviceInfo } = useInspector();
-    const [activeSubTab, setActiveSubTab] = useState('overview');
-    const [nativeMetrics, setNativeMetrics] = useState(null);
-    const [search, setSearch] = useState('');
-    useEffect(() => {
-        let cancelled = false;
-        getNativeDeviceMetrics().then(metrics => {
-            if (!cancelled && metrics) {
-                setNativeMetrics(metrics);
-            }
-        }).catch(() => { });
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-    const deviceId = nativeMetrics?.deviceId || deviceInfo.deviceId || 'UNKNOWN-DEVICE-ID';
-    const handleCopyDeviceId = () => {
-        copyToClipboard(deviceId, 'Device ID');
-        showToast('Copied Device ID to clipboard!');
-    };
-    const handleCopyDiagnostics = () => {
-        const fullReport = {
-            ...deviceInfo,
-            deviceId,
-            nativeMetrics: nativeMetrics || undefined,
-        };
-        copyToClipboard(JSON.stringify(fullReport, null, 2), 'Device Diagnostics Report');
-        showToast('Copied full system diagnostics!');
-    };
-    // Sub-tabs list
-    const subTabs = [
-        { key: 'overview', label: 'Overview', icon: 'device' },
-        { key: 'hardware', label: 'Hardware', icon: 'cpu' },
-        { key: 'display', label: 'Display', icon: 'monitor' },
-        { key: 'runtime', label: 'Runtime', icon: 'code' },
-        { key: 'raw', label: 'Raw JSON', icon: 'raw' },
-    ];
-    const InfoRow = ({ label, value, badge, badgeColor, copyable, }) => {
-        const strVal = value !== undefined && value !== null ? String(value) : '—';
-        return (<View style={styles.infoRow}>
-        <Text style={styles.infoLabel}>{label}</Text>
-        <View style={styles.infoValueRow}>
-          {badge && (<View style={[
-                    styles.inlineBadge,
-                    {
-                        backgroundColor: badgeColor
-                            ? `${badgeColor}18`
-                            : `${AppColors.purple}18`,
-                        borderColor: badgeColor
-                            ? `${badgeColor}40`
-                            : `${AppColors.purple}40`,
-                    },
-                ]}>
-              <Text style={[
-                    styles.inlineBadgeText,
-                    { color: badgeColor || AppColors.purple },
-                ]}>
-                {badge}
-              </Text>
-            </View>)}
-          <Text style={styles.infoValue} numberOfLines={2}>
-            {strVal}
-          </Text>
-          {copyable && strVal !== '—' && (<TouchableScale onPress={() => {
-                    copyToClipboard(strVal, label);
-                    showToast(`Copied ${label}!`);
-                }} style={styles.inlineCopyBtn}>
-              <CopyIcon size={12} color={AppColors.purple}/>
-            </TouchableScale>)}
-        </View>
-      </View>);
-    };
-    // Filtered raw json representation
-    const rawReportJson = useMemo(() => {
-        const data = {
-            deviceId,
-            platform: deviceInfo.platform,
-            deviceModel: deviceInfo.deviceModel,
-            osVersion: deviceInfo.osVersion,
-            appName: deviceInfo.appName,
-            bundleId: deviceInfo.bundleId,
-            appVersion: deviceInfo.appVersion,
-            buildNumber: deviceInfo.buildNumber,
-            reactNativeVersion: deviceInfo.reactNativeVersion,
-            jsEngine: deviceInfo.jsEngine,
-            isHermes: deviceInfo.isHermes,
-            isFabric: deviceInfo.isFabric,
-            isTurboModule: deviceInfo.isTurboModule,
-            arch: deviceInfo.arch,
-            screenWidth: deviceInfo.screenWidth,
-            screenHeight: deviceInfo.screenHeight,
-            screenScale: deviceInfo.screenScale,
-            screenFontScale: deviceInfo.screenFontScale,
-            statusBarHeight: deviceInfo.statusBarHeight,
-            locale: deviceInfo.locale,
-            timeZone: deviceInfo.timeZone,
-            isDevice: deviceInfo.isDevice,
-            nativeMetrics: nativeMetrics || undefined,
-        };
-        if (!search || search.trim().length === 0) {
-            return JSON.stringify(data, null, 2);
-        }
-        const q = search.toLowerCase();
-        const filtered = {};
-        for (const [k, v] of Object.entries(data)) {
-            if (k.toLowerCase().includes(q) ||
-                String(JSON.stringify(v)).toLowerCase().includes(q)) {
-                filtered[k] = v;
-            }
-        }
-        return JSON.stringify(filtered, null, 2);
-    }, [deviceInfo, deviceId, nativeMetrics, search]);
-    return (<View style={styles.container}>
-      {/* ─── Top Segmented Tab Layout ────────────────────────────────────────── */}
-      <View style={styles.tabBarWrapper}>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.subTabBarContainer}>
-          {subTabs.map(tab => {
-            const isTabActive = activeSubTab === tab.key;
-            const iconColor = isTabActive ? AppColors.white : AppColors.grayText;
-            return (<TouchableScale key={tab.key} onPress={() => setActiveSubTab(tab.key)} style={[
-                    styles.subTabButton,
-                    isTabActive && styles.subTabButtonActive,
-                ]}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-                  {tab.key === 'overview' && <DevicePhoneIcon size={12} color={iconColor}/>}
-                  {tab.key === 'hardware' && <CpuIcon size={12} color={iconColor}/>}
-                  {tab.key === 'display' && <MonitorIcon size={12} color={iconColor}/>}
-                  {tab.key === 'runtime' && <CodeIcon size={12} color={iconColor}/>}
-                  {tab.key === 'raw' && <CopyIcon size={12} color={iconColor}/>}
-                  <Text style={[
-                    styles.subTabText,
-                    isTabActive && styles.subTabTextActive,
-                ]}>
-                    {tab.label}
-                  </Text>
-                </View>
-              </TouchableScale>);
-        })}
-        </ScrollView>
-      </View>
-
-      <ScrollView style={styles.scrollArea} contentContainerStyle={styles.contentContainer} showsVerticalScrollIndicator={false}>
-        {/* ─── Hero Device ID Banner (Universal across tabs) ───────────────────── */}
-        <View style={styles.deviceIdHeroCard}>
-          <View style={styles.deviceIdHeader}>
-            <View style={styles.deviceIdBadgeRow}>
-              <View style={styles.platformBadge}>
-                {deviceInfo.platform === 'ios' ? (<AppleIcon size={14} color={AppColors.purple}/>) : (<AndroidIcon size={14} color={AppColors.purple}/>)}
-                <Text style={styles.platformBadgeText}>
-                  {deviceInfo.platform === 'ios' ? 'Apple iOS' : 'Google Android'}
-                </Text>
-              </View>
-              <View style={styles.idTypeBadge}>
-                <FingerprintIcon size={12} color={AppColors.purple}/>
-                <Text style={styles.idTypeBadgeText}>
-                  {deviceInfo.platform === 'ios' ? 'IDFV / Vendor ID' : 'Android ID'}
-                </Text>
-              </View>
-            </View>
-
-            <TouchableScale onPress={handleCopyDeviceId} style={styles.copyIdPill}>
-              <CopyIcon size={11} color={AppColors.white}/>
-              <Text style={styles.copyIdPillText}>Copy ID</Text>
-            </TouchableScale>
-          </View>
-
-          <Text style={styles.deviceIdValue} selectable numberOfLines={1}>
-            {deviceId}
-          </Text>
-        </View>
-
-        {/* ─── 1. OVERVIEW SUB-TAB ─────────────────────────────────────────────── */}
-        {activeSubTab === 'overview' && (<>
-            <View style={styles.headerBanner}>
-              <View style={styles.headerLeft}>
-                <View style={styles.deviceIconBox}>
-                  {deviceInfo.platform === 'ios' ? (<AppleIcon size={22} color={AppColors.purple}/>) : (<AndroidIcon size={22} color={AppColors.purple}/>)}
-                </View>
-                <View style={{ flex: 1 }}>
-                  <Text style={styles.deviceTitle}>{deviceInfo.deviceModel}</Text>
-                  <Text style={styles.deviceSubtitle}>{deviceInfo.osVersion}</Text>
-                </View>
-              </View>
-
-              <TouchableScale onPress={handleCopyDiagnostics} style={styles.copyDiagnosticsBtn}>
-                <CopyIcon size={12} color={AppColors.white}/>
-                <Text style={styles.copyDiagnosticsText}>Copy Report</Text>
-              </TouchableScale>
-            </View>
-
-            {/* Quick Spec Matrix */}
-            <View style={styles.matrixGrid}>
-              <View style={styles.matrixCard}>
-                <Text style={styles.matrixLabel}>ENGINE</Text>
-                <Text style={styles.matrixValue}>{deviceInfo.jsEngine}</Text>
-                <Text style={styles.matrixSub}>
-                  {deviceInfo.isHermes ? '⚡ Bytecode' : 'JIT Runtime'}
-                </Text>
-              </View>
-              <View style={styles.matrixCard}>
-                <Text style={styles.matrixLabel}>ARCHITECTURE</Text>
-                <Text style={styles.matrixValue}>
-                  {deviceInfo.isFabric ? 'Fabric' : 'Paper'}
-                </Text>
-                <Text style={styles.matrixSub}>
-                  {deviceInfo.arch || 'arm64'}
-                </Text>
-              </View>
-              <View style={styles.matrixCard}>
-                <Text style={styles.matrixLabel}>REACT NATIVE</Text>
-                <Text style={styles.matrixValue}>v{deviceInfo.reactNativeVersion}</Text>
-                <Text style={styles.matrixSub}>Framework</Text>
-              </View>
-              <View style={styles.matrixCard}>
-                <Text style={styles.matrixLabel}>DISPLAY</Text>
-                <Text style={styles.matrixValue}>
-                  {deviceInfo.screenWidth}×{deviceInfo.screenHeight}
-                </Text>
-                <Text style={styles.matrixSub}>@{deviceInfo.screenScale}x Density</Text>
-              </View>
-            </View>
-
-            {/* App Overview Summary */}
-            <View style={styles.card}>
-              <View style={styles.cardTitleRow}>
-                <CodeIcon size={14} color={AppColors.purple}/>
-                <Text style={styles.cardTitle}>APPLICATION IDENTITY</Text>
-              </View>
-              <View style={styles.cardBody}>
-                <InfoRow label="Application Name" value={deviceInfo.appName} copyable/>
-                <InfoRow label="Bundle / Package ID" value={deviceInfo.bundleId} copyable/>
-                <InfoRow label="Version" value={`${deviceInfo.appVersion} (${deviceInfo.buildNumber})`}/>
-                <InfoRow label="Environment" value={deviceInfo.isDevice ? 'Physical Hardware Device' : 'Simulator / Emulator'} badge={deviceInfo.isDevice ? 'Physical' : 'Simulator'} badgeColor={deviceInfo.isDevice ? AppColors.emerald600 : AppColors.purple}/>
-              </View>
-            </View>
-          </>)}
-
-        {/* ─── 2. HARDWARE SUB-TAB ─────────────────────────────────────────────── */}
-        {activeSubTab === 'hardware' && (<>
-            <View style={styles.card}>
-              <View style={styles.cardTitleRow}>
-                <CpuIcon size={15} color={AppColors.purple}/>
-                <Text style={styles.cardTitle}>HARDWARE & IDENTIFIERS</Text>
-              </View>
-              <View style={styles.cardBody}>
-                <InfoRow label="Device Model" value={deviceInfo.deviceModel} copyable/>
-                <InfoRow label="Platform OS" value={deviceInfo.osVersion}/>
-                <InfoRow label="Device ID" value={deviceId} copyable/>
-                <InfoRow label="CPU Architecture" value={deviceInfo.arch || nativeMetrics?.cpuAbi || 'arm64'}/>
-                {nativeMetrics?.apiLevel !== undefined && (<InfoRow label="Android API Level" value={`API ${nativeMetrics.apiLevel}`}/>)}
-              </View>
-            </View>
-
-            {/* Memory / RAM */}
-            <View style={styles.card}>
-              <View style={styles.cardTitleRow}>
-                <CpuIcon size={15} color={AppColors.purple}/>
-                <Text style={styles.cardTitle}>SYSTEM MEMORY & RAM</Text>
-              </View>
-              <View style={styles.cardBody}>
-                {nativeMetrics?.totalRAM ? (<>
-                    <InfoRow label="Total RAM" value={formatBytes(nativeMetrics.totalRAM)}/>
-                    <InfoRow label="Available Free RAM" value={nativeMetrics.freeRAM ? formatBytes(nativeMetrics.freeRAM) : '—'} badge={nativeMetrics.isLowMemory ? 'Low Memory' : 'Healthy'} badgeColor={nativeMetrics.isLowMemory ? AppColors.errorColor : AppColors.emerald600}/>
-                  </>) : (<InfoRow label="JS Heap Limit" value={deviceInfo.memoryMb ? `${deviceInfo.memoryMb} MB` : 'Dynamic Runtime'}/>)}
-                {nativeMetrics?.residentMemory ? (<InfoRow label="App Resident Memory" value={formatBytes(nativeMetrics.residentMemory)}/>) : null}
-                {nativeMetrics?.nativeHeapAllocated ? (<InfoRow label="Native Heap Allocated" value={formatBytes(nativeMetrics.nativeHeapAllocated)}/>) : null}
-              </View>
-            </View>
-
-            {/* Storage & Power */}
-            <View style={styles.card}>
-              <View style={styles.cardTitleRow}>
-                <DevicePhoneIcon size={15} color={AppColors.purple}/>
-                <Text style={styles.cardTitle}>STORAGE & BATTERY</Text>
-              </View>
-              <View style={styles.cardBody}>
-                {nativeMetrics?.totalStorage ? (<InfoRow label="Total Storage" value={formatBytes(nativeMetrics.totalStorage)}/>) : null}
-                {nativeMetrics?.freeStorage ? (<InfoRow label="Free Disk Space" value={formatBytes(nativeMetrics.freeStorage)}/>) : null}
-                {nativeMetrics?.batteryPercent !== undefined && (<InfoRow label="Battery Level" value={`${Math.round(nativeMetrics.batteryPercent)}%`} badge={nativeMetrics.isCharging ? 'Charging' : 'Discharging'} badgeColor={nativeMetrics.isCharging ? AppColors.emerald600 : AppColors.purple}/>)}
-                <InfoRow label="Hardware Type" value={deviceInfo.isDevice ? 'Physical Device' : 'Virtual Simulator'}/>
-              </View>
-            </View>
-          </>)}
-
-        {/* ─── 3. DISPLAY SUB-TAB ──────────────────────────────────────────────── */}
-        {activeSubTab === 'display' && (<View style={styles.card}>
-            <View style={styles.cardTitleRow}>
-              <MonitorIcon size={15} color={AppColors.purple}/>
-              <Text style={styles.cardTitle}>DISPLAY & VIEWPORT METRICS</Text>
-            </View>
-            <View style={styles.cardBody}>
-              <InfoRow label="Logical Resolution" value={`${deviceInfo.screenWidth} × ${deviceInfo.screenHeight} dp`} copyable/>
-              <InfoRow label="Physical Pixels" value={`${Math.round(deviceInfo.screenWidth * deviceInfo.screenScale)} × ${Math.round(deviceInfo.screenHeight * deviceInfo.screenScale)} px`}/>
-              <InfoRow label="Pixel Density Scale" value={`@${deviceInfo.screenScale}x (${Math.round(deviceInfo.screenScale * 160)} dpi)`} badge={`@${deviceInfo.screenScale}x`} badgeColor={AppColors.purple}/>
-              <InfoRow label="Font Scaling Factor" value={`${deviceInfo.screenFontScale}x`}/>
-              <InfoRow label="Status Bar Inset" value={`${deviceInfo.statusBarHeight} px`}/>
-              <InfoRow label="Aspect Ratio" value={`${(deviceInfo.screenHeight / deviceInfo.screenWidth).toFixed(2)} : 1`}/>
-            </View>
-          </View>)}
-
-        {/* ─── 4. RUNTIME SUB-TAB ──────────────────────────────────────────────── */}
-        {activeSubTab === 'runtime' && (<>
-            <View style={styles.card}>
-              <View style={styles.cardTitleRow}>
-                <CodeIcon size={15} color={AppColors.purple}/>
-                <Text style={styles.cardTitle}>JAVASCRIPT & CORE RUNTIME</Text>
-              </View>
-              <View style={styles.cardBody}>
-                <InfoRow label="JS Engine" value={deviceInfo.isHermes ? 'Hermes Bytecode Engine' : 'JavaScriptCore (JSC)'} badge={deviceInfo.isHermes ? 'Hermes' : 'JSC'} badgeColor={deviceInfo.isHermes ? AppColors.emerald600 : AppColors.purple}/>
-                <InfoRow label="React Native" value={`v${deviceInfo.reactNativeVersion}`} copyable/>
-                <InfoRow label="New Architecture" value={deviceInfo.isFabric ? 'Enabled (Fabric C++)' : 'Disabled (Paper)'} badge={deviceInfo.isFabric ? 'Fabric' : 'Paper'} badgeColor={deviceInfo.isFabric ? AppColors.emerald600 : AppColors.grayTextWeak}/>
-                <InfoRow label="TurboModules" value={deviceInfo.isTurboModule ? 'Active' : 'Disabled'}/>
-                <InfoRow label="CPU Architecture" value={deviceInfo.arch || 'arm64'}/>
-              </View>
-            </View>
-
-            <View style={styles.card}>
-              <View style={styles.cardTitleRow}>
-                <Text style={styles.cardTitle}>INTERNATIONALIZATION & LOCALE</Text>
-              </View>
-              <View style={styles.cardBody}>
-                <InfoRow label="Timezone" value={deviceInfo.timeZone || 'UTC'} copyable/>
-                <InfoRow label="Locale Identifier" value={deviceInfo.locale || 'en_US'} copyable/>
-              </View>
-            </View>
-          </>)}
-
-        {/* ─── 5. RAW JSON SUB-TAB ─────────────────────────────────────────────── */}
-        {activeSubTab === 'raw' && (<View style={styles.card}>
-            <View style={styles.rawHeaderRow}>
-              <View style={styles.rawSearchBox}>
-                <SearchIcon size={13} color={AppColors.grayTextWeak}/>
-                <TextInput style={styles.rawSearchInput} value={search} onChangeText={setSearch} placeholder="Filter JSON fields..." placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
-                {search.length > 0 && (<TouchableScale onPress={() => setSearch('')}>
-                    <ClearIcon size={14} color={AppColors.grayTextWeak}/>
-                  </TouchableScale>)}
-              </View>
-
-              <TouchableScale onPress={handleCopyDiagnostics} style={styles.copyDiagnosticsBtn}>
-                <CopyIcon size={12} color={AppColors.white}/>
-                <Text style={styles.copyDiagnosticsText}>Copy All</Text>
-              </TouchableScale>
-            </View>
-
-            <ScrollView horizontal style={styles.rawScroll}>
-              <Text style={styles.rawText} selectable>
-                {rawReportJson}
-              </Text>
-            </ScrollView>
-          </View>)}
-
-        <View style={{ height: 40 }}/>
-      </ScrollView>
-    </View>);
-});
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: AppColors.grayBackground,
-    },
-    tabBarWrapper: {
-        backgroundColor: AppColors.contentBg,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.grayBorderSecondary,
-        paddingVertical: 8,
-    },
-    subTabBarContainer: {
-        paddingHorizontal: 12,
-        flexDirection: 'row',
-        gap: 8,
-        alignItems: 'center',
-    },
-    subTabButton: {
-        paddingHorizontal: 14,
-        paddingVertical: 7,
-        borderRadius: 20,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    subTabButtonActive: {
-        backgroundColor: AppColors.purple,
-        borderColor: AppColors.purple,
-    },
-    subTabText: {
-        fontSize: 12,
-        fontFamily: AppFonts.interMedium,
-        color: AppColors.grayText,
-    },
-    subTabTextActive: {
-        color: AppColors.white,
-        fontFamily: AppFonts.interBold,
-    },
-    scrollArea: {
-        flex: 1,
-    },
-    contentContainer: {
-        padding: 12,
-    },
-    deviceIdHeroCard: {
-        backgroundColor: AppColors.contentBg,
-        borderRadius: 14,
-        padding: 14,
-        marginBottom: 12,
-        borderWidth: 1,
-        borderColor: `${AppColors.purple}30`,
-        shadowColor: AppColors.purple,
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.06,
-        shadowRadius: 6,
-        elevation: 2,
-    },
-    deviceIdHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 8,
-    },
-    deviceIdBadgeRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    platformBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: `${AppColors.purple}14`,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: `${AppColors.purple}30`,
-    },
-    platformBadgeText: {
-        fontSize: 11,
-        fontFamily: AppFonts.interBold,
-        color: AppColors.purple,
-    },
-    idTypeBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: `${AppColors.purple}10`,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
-    },
-    idTypeBadgeText: {
-        fontSize: 11,
-        fontFamily: AppFonts.interMedium,
-        color: AppColors.purple,
-    },
-    copyIdPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: AppColors.purple,
-        paddingHorizontal: 10,
-        paddingVertical: 4,
-        borderRadius: 14,
-    },
-    copyIdPillText: {
-        fontSize: 11,
-        fontFamily: AppFonts.interBold,
-        color: AppColors.white,
-    },
-    deviceIdValue: {
-        fontSize: 12,
-        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-        color: AppColors.black,
-        letterSpacing: 0.5,
-        backgroundColor: AppColors.grayBackground,
-        paddingHorizontal: 10,
-        paddingVertical: 6,
-        borderRadius: 8,
-    },
-    headerBanner: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        backgroundColor: AppColors.contentBg,
-        borderRadius: 14,
-        padding: 14,
-        marginBottom: 12,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    headerLeft: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 12,
-        flex: 1,
-    },
-    deviceIconBox: {
-        width: 44,
-        height: 44,
-        borderRadius: 12,
-        backgroundColor: `${AppColors.purple}15`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    deviceTitle: {
-        fontSize: 15,
-        fontFamily: AppFonts.interBold,
-        color: AppColors.black,
-    },
-    deviceSubtitle: {
-        fontSize: 12,
-        fontFamily: AppFonts.interMedium,
-        color: AppColors.grayText,
-        marginTop: 2,
-    },
-    copyDiagnosticsBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        backgroundColor: AppColors.purple,
-        paddingHorizontal: 12,
-        paddingVertical: 6,
-        borderRadius: 8,
-    },
-    copyDiagnosticsText: {
-        fontSize: 12,
-        fontFamily: AppFonts.interBold,
-        color: AppColors.white,
-    },
-    matrixGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 8,
-        marginBottom: 12,
-    },
-    matrixCard: {
-        flex: 1,
-        minWidth: '47%',
-        backgroundColor: AppColors.contentBg,
-        borderRadius: 12,
-        padding: 12,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    matrixLabel: {
-        fontSize: 10,
-        fontFamily: AppFonts.interBold,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.5,
-        marginBottom: 4,
-    },
-    matrixValue: {
-        fontSize: 14,
-        fontFamily: AppFonts.interBold,
-        color: AppColors.black,
-        marginBottom: 2,
-    },
-    matrixSub: {
-        fontSize: 11,
-        fontFamily: AppFonts.interMedium,
-        color: AppColors.purple,
-    },
-    card: {
-        backgroundColor: AppColors.contentBg,
-        borderRadius: 14,
-        padding: 14,
-        marginBottom: 12,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    cardTitleRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        marginBottom: 12,
-        paddingBottom: 8,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.grayBorderSecondary,
-    },
-    cardTitle: {
-        fontSize: 12,
-        fontFamily: AppFonts.interBold,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.5,
-    },
-    cardBody: {
-        gap: 10,
-    },
-    infoRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingVertical: 3,
-        gap: 8,
-    },
-    infoLabel: {
-        fontSize: 12,
-        fontFamily: AppFonts.interMedium,
-        color: AppColors.grayText,
-        flexShrink: 0,
-    },
-    infoValueRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flex: 1,
-        justifyContent: 'flex-end',
-    },
-    infoValue: {
-        fontSize: 12,
-        fontFamily: AppFonts.interMedium,
-        color: AppColors.black,
-        textAlign: 'right',
-        flexShrink: 1,
-    },
-    inlineBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-    },
-    inlineBadgeText: {
-        fontSize: 10,
-        fontFamily: AppFonts.interBold,
-    },
-    inlineCopyBtn: {
-        padding: 3,
-        borderRadius: 4,
-        backgroundColor: `${AppColors.purple}14`,
-    },
-    rawHeaderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: 8,
-        marginBottom: 12,
-    },
-    rawSearchBox: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 8,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    rawSearchInput: {
-        flex: 1,
-        fontSize: 12,
-        fontFamily: AppFonts.interRegular,
-        color: AppColors.black,
-        paddingVertical: 0,
-    },
-    rawScroll: {
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 10,
-        padding: 10,
-    },
-    rawText: {
-        fontSize: 11,
-        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-        color: AppColors.black,
-        lineHeight: 16,
-    },
-});
-export default DeviceTab;

package/dist/esm/components/Inspector/FirstTimeWalkthroughModal.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-interface FirstTimeWalkthroughModalProps {
-    visible: boolean;
-    onClose: () => void;
-}
-export declare const FirstTimeWalkthroughModal: React.FC<FirstTimeWalkthroughModalProps>;
-export default FirstTimeWalkthroughModal;