react-native-inapp-inspector 2.0.7 → 2.2.0

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

@@ -1,717 +0,0 @@
-"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.DeviceTab = void 0;
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const InspectorContext_1 = require("./InspectorContext");
-const TouchableScale_1 = __importDefault(require("../TouchableScale"));
-const AppColors_1 = require("../../styles/AppColors");
-const AppFonts_1 = require("../../styles/AppFonts");
-const helpers_1 = require("../../helpers");
-const toast_1 = require("../../helpers/toast");
-const NetworkIcons_1 = require("../NetworkIcons");
-const NativeInspector_1 = require("../../native/NativeInspector");
-exports.DeviceTab = react_1.default.memo(() => {
-    const { deviceInfo } = (0, InspectorContext_1.useInspector)();
-    const [activeSubTab, setActiveSubTab] = (0, react_1.useState)('overview');
-    const [nativeMetrics, setNativeMetrics] = (0, react_1.useState)(null);
-    const [search, setSearch] = (0, react_1.useState)('');
-    (0, react_1.useEffect)(() => {
-        let cancelled = false;
-        (0, NativeInspector_1.getNativeDeviceMetrics)().then(metrics => {
-            if (!cancelled && metrics) {
-                setNativeMetrics(metrics);
-            }
-        }).catch(() => { });
-        return () => {
-            cancelled = true;
-        };
-    }, []);
-    const deviceId = nativeMetrics?.deviceId || deviceInfo.deviceId || 'UNKNOWN-DEVICE-ID';
-    const handleCopyDeviceId = () => {
-        (0, helpers_1.copyToClipboard)(deviceId, 'Device ID');
-        (0, toast_1.showToast)('Copied Device ID to clipboard!');
-    };
-    const handleCopyDiagnostics = () => {
-        const fullReport = {
-            ...deviceInfo,
-            deviceId,
-            nativeMetrics: nativeMetrics || undefined,
-        };
-        (0, helpers_1.copyToClipboard)(JSON.stringify(fullReport, null, 2), 'Device Diagnostics Report');
-        (0, toast_1.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 (<react_native_1.View style={styles.infoRow}>
-        <react_native_1.Text style={styles.infoLabel}>{label}</react_native_1.Text>
-        <react_native_1.View style={styles.infoValueRow}>
-          {badge && (<react_native_1.View style={[
-                    styles.inlineBadge,
-                    {
-                        backgroundColor: badgeColor
-                            ? `${badgeColor}18`
-                            : `${AppColors_1.AppColors.purple}18`,
-                        borderColor: badgeColor
-                            ? `${badgeColor}40`
-                            : `${AppColors_1.AppColors.purple}40`,
-                    },
-                ]}>
-              <react_native_1.Text style={[
-                    styles.inlineBadgeText,
-                    { color: badgeColor || AppColors_1.AppColors.purple },
-                ]}>
-                {badge}
-              </react_native_1.Text>
-            </react_native_1.View>)}
-          <react_native_1.Text style={styles.infoValue} numberOfLines={2}>
-            {strVal}
-          </react_native_1.Text>
-          {copyable && strVal !== '—' && (<TouchableScale_1.default onPress={() => {
-                    (0, helpers_1.copyToClipboard)(strVal, label);
-                    (0, toast_1.showToast)(`Copied ${label}!`);
-                }} style={styles.inlineCopyBtn}>
-              <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.purple}/>
-            </TouchableScale_1.default>)}
-        </react_native_1.View>
-      </react_native_1.View>);
-    };
-    // Filtered raw json representation
-    const rawReportJson = (0, react_1.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 (<react_native_1.View style={styles.container}>
-      {/* ─── Top Segmented Tab Layout ────────────────────────────────────────── */}
-      <react_native_1.View style={styles.tabBarWrapper}>
-        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.subTabBarContainer}>
-          {subTabs.map(tab => {
-            const isTabActive = activeSubTab === tab.key;
-            const iconColor = isTabActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText;
-            return (<TouchableScale_1.default key={tab.key} onPress={() => setActiveSubTab(tab.key)} style={[
-                    styles.subTabButton,
-                    isTabActive && styles.subTabButtonActive,
-                ]}>
-                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-                  {tab.key === 'overview' && <NetworkIcons_1.DevicePhoneIcon size={12} color={iconColor}/>}
-                  {tab.key === 'hardware' && <NetworkIcons_1.CpuIcon size={12} color={iconColor}/>}
-                  {tab.key === 'display' && <NetworkIcons_1.MonitorIcon size={12} color={iconColor}/>}
-                  {tab.key === 'runtime' && <NetworkIcons_1.CodeIcon size={12} color={iconColor}/>}
-                  {tab.key === 'raw' && <NetworkIcons_1.CopyIcon size={12} color={iconColor}/>}
-                  <react_native_1.Text style={[
-                    styles.subTabText,
-                    isTabActive && styles.subTabTextActive,
-                ]}>
-                    {tab.label}
-                  </react_native_1.Text>
-                </react_native_1.View>
-              </TouchableScale_1.default>);
-        })}
-        </react_native_1.ScrollView>
-      </react_native_1.View>
-
-      <react_native_1.ScrollView style={styles.scrollArea} contentContainerStyle={styles.contentContainer} showsVerticalScrollIndicator={false}>
-        {/* ─── Hero Device ID Banner (Universal across tabs) ───────────────────── */}
-        <react_native_1.View style={styles.deviceIdHeroCard}>
-          <react_native_1.View style={styles.deviceIdHeader}>
-            <react_native_1.View style={styles.deviceIdBadgeRow}>
-              <react_native_1.View style={styles.platformBadge}>
-                {deviceInfo.platform === 'ios' ? (<NetworkIcons_1.AppleIcon size={14} color={AppColors_1.AppColors.purple}/>) : (<NetworkIcons_1.AndroidIcon size={14} color={AppColors_1.AppColors.purple}/>)}
-                <react_native_1.Text style={styles.platformBadgeText}>
-                  {deviceInfo.platform === 'ios' ? 'Apple iOS' : 'Google Android'}
-                </react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={styles.idTypeBadge}>
-                <NetworkIcons_1.FingerprintIcon size={12} color={AppColors_1.AppColors.purple}/>
-                <react_native_1.Text style={styles.idTypeBadgeText}>
-                  {deviceInfo.platform === 'ios' ? 'IDFV / Vendor ID' : 'Android ID'}
-                </react_native_1.Text>
-              </react_native_1.View>
-            </react_native_1.View>
-
-            <TouchableScale_1.default onPress={handleCopyDeviceId} style={styles.copyIdPill}>
-              <NetworkIcons_1.CopyIcon size={11} color={AppColors_1.AppColors.white}/>
-              <react_native_1.Text style={styles.copyIdPillText}>Copy ID</react_native_1.Text>
-            </TouchableScale_1.default>
-          </react_native_1.View>
-
-          <react_native_1.Text style={styles.deviceIdValue} selectable numberOfLines={1}>
-            {deviceId}
-          </react_native_1.Text>
-        </react_native_1.View>
-
-        {/* ─── 1. OVERVIEW SUB-TAB ─────────────────────────────────────────────── */}
-        {activeSubTab === 'overview' && (<>
-            <react_native_1.View style={styles.headerBanner}>
-              <react_native_1.View style={styles.headerLeft}>
-                <react_native_1.View style={styles.deviceIconBox}>
-                  {deviceInfo.platform === 'ios' ? (<NetworkIcons_1.AppleIcon size={22} color={AppColors_1.AppColors.purple}/>) : (<NetworkIcons_1.AndroidIcon size={22} color={AppColors_1.AppColors.purple}/>)}
-                </react_native_1.View>
-                <react_native_1.View style={{ flex: 1 }}>
-                  <react_native_1.Text style={styles.deviceTitle}>{deviceInfo.deviceModel}</react_native_1.Text>
-                  <react_native_1.Text style={styles.deviceSubtitle}>{deviceInfo.osVersion}</react_native_1.Text>
-                </react_native_1.View>
-              </react_native_1.View>
-
-              <TouchableScale_1.default onPress={handleCopyDiagnostics} style={styles.copyDiagnosticsBtn}>
-                <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.white}/>
-                <react_native_1.Text style={styles.copyDiagnosticsText}>Copy Report</react_native_1.Text>
-              </TouchableScale_1.default>
-            </react_native_1.View>
-
-            {/* Quick Spec Matrix */}
-            <react_native_1.View style={styles.matrixGrid}>
-              <react_native_1.View style={styles.matrixCard}>
-                <react_native_1.Text style={styles.matrixLabel}>ENGINE</react_native_1.Text>
-                <react_native_1.Text style={styles.matrixValue}>{deviceInfo.jsEngine}</react_native_1.Text>
-                <react_native_1.Text style={styles.matrixSub}>
-                  {deviceInfo.isHermes ? '⚡ Bytecode' : 'JIT Runtime'}
-                </react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={styles.matrixCard}>
-                <react_native_1.Text style={styles.matrixLabel}>ARCHITECTURE</react_native_1.Text>
-                <react_native_1.Text style={styles.matrixValue}>
-                  {deviceInfo.isFabric ? 'Fabric' : 'Paper'}
-                </react_native_1.Text>
-                <react_native_1.Text style={styles.matrixSub}>
-                  {deviceInfo.arch || 'arm64'}
-                </react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={styles.matrixCard}>
-                <react_native_1.Text style={styles.matrixLabel}>REACT NATIVE</react_native_1.Text>
-                <react_native_1.Text style={styles.matrixValue}>v{deviceInfo.reactNativeVersion}</react_native_1.Text>
-                <react_native_1.Text style={styles.matrixSub}>Framework</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={styles.matrixCard}>
-                <react_native_1.Text style={styles.matrixLabel}>DISPLAY</react_native_1.Text>
-                <react_native_1.Text style={styles.matrixValue}>
-                  {deviceInfo.screenWidth}×{deviceInfo.screenHeight}
-                </react_native_1.Text>
-                <react_native_1.Text style={styles.matrixSub}>@{deviceInfo.screenScale}x Density</react_native_1.Text>
-              </react_native_1.View>
-            </react_native_1.View>
-
-            {/* App Overview Summary */}
-            <react_native_1.View style={styles.card}>
-              <react_native_1.View style={styles.cardTitleRow}>
-                <NetworkIcons_1.CodeIcon size={14} color={AppColors_1.AppColors.purple}/>
-                <react_native_1.Text style={styles.cardTitle}>APPLICATION IDENTITY</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.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_1.AppColors.emerald600 : AppColors_1.AppColors.purple}/>
-              </react_native_1.View>
-            </react_native_1.View>
-          </>)}
-
-        {/* ─── 2. HARDWARE SUB-TAB ─────────────────────────────────────────────── */}
-        {activeSubTab === 'hardware' && (<>
-            <react_native_1.View style={styles.card}>
-              <react_native_1.View style={styles.cardTitleRow}>
-                <NetworkIcons_1.CpuIcon size={15} color={AppColors_1.AppColors.purple}/>
-                <react_native_1.Text style={styles.cardTitle}>HARDWARE & IDENTIFIERS</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.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}`}/>)}
-              </react_native_1.View>
-            </react_native_1.View>
-
-            {/* Memory / RAM */}
-            <react_native_1.View style={styles.card}>
-              <react_native_1.View style={styles.cardTitleRow}>
-                <NetworkIcons_1.CpuIcon size={15} color={AppColors_1.AppColors.purple}/>
-                <react_native_1.Text style={styles.cardTitle}>SYSTEM MEMORY & RAM</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={styles.cardBody}>
-                {nativeMetrics?.totalRAM ? (<>
-                    <InfoRow label="Total RAM" value={(0, helpers_1.formatBytes)(nativeMetrics.totalRAM)}/>
-                    <InfoRow label="Available Free RAM" value={nativeMetrics.freeRAM ? (0, helpers_1.formatBytes)(nativeMetrics.freeRAM) : '—'} badge={nativeMetrics.isLowMemory ? 'Low Memory' : 'Healthy'} badgeColor={nativeMetrics.isLowMemory ? AppColors_1.AppColors.errorColor : AppColors_1.AppColors.emerald600}/>
-                  </>) : (<InfoRow label="JS Heap Limit" value={deviceInfo.memoryMb ? `${deviceInfo.memoryMb} MB` : 'Dynamic Runtime'}/>)}
-                {nativeMetrics?.residentMemory ? (<InfoRow label="App Resident Memory" value={(0, helpers_1.formatBytes)(nativeMetrics.residentMemory)}/>) : null}
-                {nativeMetrics?.nativeHeapAllocated ? (<InfoRow label="Native Heap Allocated" value={(0, helpers_1.formatBytes)(nativeMetrics.nativeHeapAllocated)}/>) : null}
-              </react_native_1.View>
-            </react_native_1.View>
-
-            {/* Storage & Power */}
-            <react_native_1.View style={styles.card}>
-              <react_native_1.View style={styles.cardTitleRow}>
-                <NetworkIcons_1.DevicePhoneIcon size={15} color={AppColors_1.AppColors.purple}/>
-                <react_native_1.Text style={styles.cardTitle}>STORAGE & BATTERY</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={styles.cardBody}>
-                {nativeMetrics?.totalStorage ? (<InfoRow label="Total Storage" value={(0, helpers_1.formatBytes)(nativeMetrics.totalStorage)}/>) : null}
-                {nativeMetrics?.freeStorage ? (<InfoRow label="Free Disk Space" value={(0, helpers_1.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_1.AppColors.emerald600 : AppColors_1.AppColors.purple}/>)}
-                <InfoRow label="Hardware Type" value={deviceInfo.isDevice ? 'Physical Device' : 'Virtual Simulator'}/>
-              </react_native_1.View>
-            </react_native_1.View>
-          </>)}
-
-        {/* ─── 3. DISPLAY SUB-TAB ──────────────────────────────────────────────── */}
-        {activeSubTab === 'display' && (<react_native_1.View style={styles.card}>
-            <react_native_1.View style={styles.cardTitleRow}>
-              <NetworkIcons_1.MonitorIcon size={15} color={AppColors_1.AppColors.purple}/>
-              <react_native_1.Text style={styles.cardTitle}>DISPLAY & VIEWPORT METRICS</react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.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_1.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`}/>
-            </react_native_1.View>
-          </react_native_1.View>)}
-
-        {/* ─── 4. RUNTIME SUB-TAB ──────────────────────────────────────────────── */}
-        {activeSubTab === 'runtime' && (<>
-            <react_native_1.View style={styles.card}>
-              <react_native_1.View style={styles.cardTitleRow}>
-                <NetworkIcons_1.CodeIcon size={15} color={AppColors_1.AppColors.purple}/>
-                <react_native_1.Text style={styles.cardTitle}>JAVASCRIPT & CORE RUNTIME</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.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_1.AppColors.emerald600 : AppColors_1.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_1.AppColors.emerald600 : AppColors_1.AppColors.grayTextWeak}/>
-                <InfoRow label="TurboModules" value={deviceInfo.isTurboModule ? 'Active' : 'Disabled'}/>
-                <InfoRow label="CPU Architecture" value={deviceInfo.arch || 'arm64'}/>
-              </react_native_1.View>
-            </react_native_1.View>
-
-            <react_native_1.View style={styles.card}>
-              <react_native_1.View style={styles.cardTitleRow}>
-                <react_native_1.Text style={styles.cardTitle}>INTERNATIONALIZATION & LOCALE</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={styles.cardBody}>
-                <InfoRow label="Timezone" value={deviceInfo.timeZone || 'UTC'} copyable/>
-                <InfoRow label="Locale Identifier" value={deviceInfo.locale || 'en_US'} copyable/>
-              </react_native_1.View>
-            </react_native_1.View>
-          </>)}
-
-        {/* ─── 5. RAW JSON SUB-TAB ─────────────────────────────────────────────── */}
-        {activeSubTab === 'raw' && (<react_native_1.View style={styles.card}>
-            <react_native_1.View style={styles.rawHeaderRow}>
-              <react_native_1.View style={styles.rawSearchBox}>
-                <NetworkIcons_1.SearchIcon size={13} color={AppColors_1.AppColors.grayTextWeak}/>
-                <react_native_1.TextInput style={styles.rawSearchInput} value={search} onChangeText={setSearch} placeholder="Filter JSON fields..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
-                {search.length > 0 && (<TouchableScale_1.default onPress={() => setSearch('')}>
-                    <NetworkIcons_1.ClearIcon size={14} color={AppColors_1.AppColors.grayTextWeak}/>
-                  </TouchableScale_1.default>)}
-              </react_native_1.View>
-
-              <TouchableScale_1.default onPress={handleCopyDiagnostics} style={styles.copyDiagnosticsBtn}>
-                <NetworkIcons_1.CopyIcon size={12} color={AppColors_1.AppColors.white}/>
-                <react_native_1.Text style={styles.copyDiagnosticsText}>Copy All</react_native_1.Text>
-              </TouchableScale_1.default>
-            </react_native_1.View>
-
-            <react_native_1.ScrollView horizontal style={styles.rawScroll}>
-              <react_native_1.Text style={styles.rawText} selectable>
-                {rawReportJson}
-              </react_native_1.Text>
-            </react_native_1.ScrollView>
-          </react_native_1.View>)}
-
-        <react_native_1.View style={{ height: 40 }}/>
-      </react_native_1.ScrollView>
-    </react_native_1.View>);
-});
-const styles = react_native_1.StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-    },
-    tabBarWrapper: {
-        backgroundColor: AppColors_1.AppColors.contentBg,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
-        paddingVertical: 8,
-    },
-    subTabBarContainer: {
-        paddingHorizontal: 12,
-        flexDirection: 'row',
-        gap: 8,
-        alignItems: 'center',
-    },
-    subTabButton: {
-        paddingHorizontal: 14,
-        paddingVertical: 7,
-        borderRadius: 20,
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    subTabButtonActive: {
-        backgroundColor: AppColors_1.AppColors.purple,
-        borderColor: AppColors_1.AppColors.purple,
-    },
-    subTabText: {
-        fontSize: 12,
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        color: AppColors_1.AppColors.grayText,
-    },
-    subTabTextActive: {
-        color: AppColors_1.AppColors.white,
-        fontFamily: AppFonts_1.AppFonts.interBold,
-    },
-    scrollArea: {
-        flex: 1,
-    },
-    contentContainer: {
-        padding: 12,
-    },
-    deviceIdHeroCard: {
-        backgroundColor: AppColors_1.AppColors.contentBg,
-        borderRadius: 14,
-        padding: 14,
-        marginBottom: 12,
-        borderWidth: 1,
-        borderColor: `${AppColors_1.AppColors.purple}30`,
-        shadowColor: AppColors_1.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_1.AppColors.purple}14`,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: `${AppColors_1.AppColors.purple}30`,
-    },
-    platformBadgeText: {
-        fontSize: 11,
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        color: AppColors_1.AppColors.purple,
-    },
-    idTypeBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: `${AppColors_1.AppColors.purple}10`,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
-    },
-    idTypeBadgeText: {
-        fontSize: 11,
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        color: AppColors_1.AppColors.purple,
-    },
-    copyIdPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: AppColors_1.AppColors.purple,
-        paddingHorizontal: 10,
-        paddingVertical: 4,
-        borderRadius: 14,
-    },
-    copyIdPillText: {
-        fontSize: 11,
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        color: AppColors_1.AppColors.white,
-    },
-    deviceIdValue: {
-        fontSize: 12,
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-        color: AppColors_1.AppColors.black,
-        letterSpacing: 0.5,
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        paddingHorizontal: 10,
-        paddingVertical: 6,
-        borderRadius: 8,
-    },
-    headerBanner: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        backgroundColor: AppColors_1.AppColors.contentBg,
-        borderRadius: 14,
-        padding: 14,
-        marginBottom: 12,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    headerLeft: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 12,
-        flex: 1,
-    },
-    deviceIconBox: {
-        width: 44,
-        height: 44,
-        borderRadius: 12,
-        backgroundColor: `${AppColors_1.AppColors.purple}15`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    deviceTitle: {
-        fontSize: 15,
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        color: AppColors_1.AppColors.black,
-    },
-    deviceSubtitle: {
-        fontSize: 12,
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        color: AppColors_1.AppColors.grayText,
-        marginTop: 2,
-    },
-    copyDiagnosticsBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        backgroundColor: AppColors_1.AppColors.purple,
-        paddingHorizontal: 12,
-        paddingVertical: 6,
-        borderRadius: 8,
-    },
-    copyDiagnosticsText: {
-        fontSize: 12,
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        color: AppColors_1.AppColors.white,
-    },
-    matrixGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 8,
-        marginBottom: 12,
-    },
-    matrixCard: {
-        flex: 1,
-        minWidth: '47%',
-        backgroundColor: AppColors_1.AppColors.contentBg,
-        borderRadius: 12,
-        padding: 12,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    matrixLabel: {
-        fontSize: 10,
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        color: AppColors_1.AppColors.grayTextWeak,
-        letterSpacing: 0.5,
-        marginBottom: 4,
-    },
-    matrixValue: {
-        fontSize: 14,
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        color: AppColors_1.AppColors.black,
-        marginBottom: 2,
-    },
-    matrixSub: {
-        fontSize: 11,
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        color: AppColors_1.AppColors.purple,
-    },
-    card: {
-        backgroundColor: AppColors_1.AppColors.contentBg,
-        borderRadius: 14,
-        padding: 14,
-        marginBottom: 12,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    cardTitleRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        marginBottom: 12,
-        paddingBottom: 8,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    cardTitle: {
-        fontSize: 12,
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        color: AppColors_1.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_1.AppFonts.interMedium,
-        color: AppColors_1.AppColors.grayText,
-        flexShrink: 0,
-    },
-    infoValueRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flex: 1,
-        justifyContent: 'flex-end',
-    },
-    infoValue: {
-        fontSize: 12,
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        color: AppColors_1.AppColors.black,
-        textAlign: 'right',
-        flexShrink: 1,
-    },
-    inlineBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-    },
-    inlineBadgeText: {
-        fontSize: 10,
-        fontFamily: AppFonts_1.AppFonts.interBold,
-    },
-    inlineCopyBtn: {
-        padding: 3,
-        borderRadius: 4,
-        backgroundColor: `${AppColors_1.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_1.AppColors.grayBackground,
-        borderRadius: 8,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    rawSearchInput: {
-        flex: 1,
-        fontSize: 12,
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        color: AppColors_1.AppColors.black,
-        paddingVertical: 0,
-    },
-    rawScroll: {
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        borderRadius: 10,
-        padding: 10,
-    },
-    rawText: {
-        fontSize: 11,
-        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-        color: AppColors_1.AppColors.black,
-        lineHeight: 16,
-    },
-});
-exports.default = exports.DeviceTab;