react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,1631 +1,454 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
-import Svg, { Path, Defs, LinearGradient, Stop, Line, Circle, G, } from 'react-native-svg';
-import TouchableScale from '../TouchableScale';
-import CopyButton from '../CopyButton';
-import HighlightText from '../HighlightText';
-import EndOfListFooter from '../EndOfListFooter';
-import FeatureUnderDevNotice from './FeatureUnderDevNotice';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { useTranslation } from '../../i18n';
-import { getRuntimeDiagnostics } from '../../helpers';
-import { SearchIcon, CircleXIcon, CircleAlertIcon, PerformanceIcon, BoltIcon, LightbulbIcon, MapIcon, AtomIcon, BrainIcon, GlobeIcon, ChevronIcon, } from '../NetworkIcons';
-import { getPerformanceEvents, subscribePerformanceEvents, logPerformanceEvent, clearPerformanceEvents, } from '../../customHooks/performanceTracker';
-import { startNativeFpsMonitoring, stopNativeFpsMonitoring, getNativeFpsMetrics, getNativeSystemMetrics, isNativeModuleAvailable, } from '../../native/NativeInspector';
-import { trackInspectorScreenRecord } from '../../helpers/telemetry';
-const PerformanceTab = React.memo(() => {
-    const { t } = useTranslation();
-    const [isRecording, setIsRecording] = useState(true);
-    const [currentFps, setCurrentFps] = useState(60);
-    const [minFps, setMinFps] = useState(57);
-    const [maxFps, setMaxFps] = useState(60);
-    const [avgFps, setAvgFps] = useState(59);
-    const [totalFrames, setTotalFrames] = useState(4820);
-    const [jankyFrameCount, setJankyFrameCount] = useState(4);
-    const [jsLagMs, setJsLagMs] = useState(1.2);
-    const [expandedEventIds, setExpandedEventIds] = useState({
-        'perf-1': true,
-    });
-    const toggleEventExpand = (id) => {
-        setExpandedEventIds(prev => ({
-            ...prev,
-            [id]: !prev[id],
-        }));
-    };
-    const [fpsHistory, setFpsHistory] = useState([
-        60, 59, 60, 60, 58, 60, 59, 60, 60, 60, 57, 60, 59, 60, 60, 58, 60, 60, 59, 60,
-    ]);
-    const [events, setEvents] = useState(() => getPerformanceEvents());
-    const [filterCategory, setFilterCategory] = useState('ALL');
-    const [search, setSearch] = useState('');
-    useEffect(() => {
-        const unsub = subscribePerformanceEvents(liveEvents => {
-            setEvents(liveEvents);
-        });
-        return unsub;
-    }, []);
-    const lastFrameTimeRef = useRef(Date.now());
-    const rafIdRef = useRef(null);
-    const [systemMetrics, setSystemMetrics] = useState(null);
-    useEffect(() => {
-        let isMounted = true;
-        const fetchMetrics = async () => {
-            const metrics = await getNativeSystemMetrics();
-            if (isMounted && metrics) {
-                setSystemMetrics(metrics);
-            }
-        };
-        fetchMetrics();
-        const interval = setInterval(fetchMetrics, 2000);
-        return () => {
-            isMounted = false;
-            clearInterval(interval);
-        };
-    }, []);
-    useEffect(() => {
-        if (isNativeModuleAvailable()) {
-            startNativeFpsMonitoring();
-            return () => {
-                stopNativeFpsMonitoring();
-            };
-        }
-    }, []);
-    useEffect(() => {
-        if (!isRecording)
-            return;
-        let isMounted = true;
-        let frameCount = 0;
-        let maxLagInSecond = 0;
-        let lastSecond = Date.now();
-        const measureFrame = async () => {
-            if (!isMounted)
-                return;
-            const now = Date.now();
-            const delta = now - lastFrameTimeRef.current;
-            lastFrameTimeRef.current = now;
-            const lag = Math.max(0, delta - 16.67);
-            if (lag > maxLagInSecond) {
-                maxLagInSecond = lag;
-            }
-            frameCount++;
-            if (now - lastSecond >= 1000) {
-                const elapsed = now - lastSecond;
-                let measuredFps = Math.min(120, Math.max(0, Math.round((frameCount * 1000) / elapsed)));
-                if (isNativeModuleAvailable()) {
-                    try {
-                        const nativeMetrics = await getNativeFpsMetrics();
-                        if (nativeMetrics && nativeMetrics.fps > 0) {
-                            measuredFps = Math.round(nativeMetrics.fps);
-                        }
-                    }
-                    catch { }
-                }
-                setCurrentFps(measuredFps);
-                setMinFps(prev => Math.min(prev, measuredFps));
-                setMaxFps(prev => Math.max(prev, measuredFps));
-                setTotalFrames(prev => prev + frameCount);
-                setJsLagMs(Number(maxLagInSecond.toFixed(1)));
-                if (measuredFps < 55) {
-                    setJankyFrameCount(prev => prev + 1);
-                }
-                setFpsHistory(prev => {
-                    const next = [...prev.slice(-19), measuredFps];
-                    const sum = next.reduce((a, b) => a + b, 0);
-                    setAvgFps(Math.round(sum / next.length));
-                    return next;
-                });
-                if (measuredFps < 50) {
-                    const durationStr = (1000 / measuredFps).toFixed(1);
-                    logPerformanceEvent({
-                        type: 'fps_drop',
-                        category: 'render',
-                        fps: measuredFps,
-                        durationMs: Number(durationStr),
-                        label: t('performance.liveFpsDip', { fps: measuredFps }),
-                        detail: t('performance.liveFpsDipDetail', { duration: durationStr }),
-                        source: t('performance.uiRenderThread'),
-                        breakdown: {
-                            jsTimeMs: Number(((1000 / measuredFps) * 0.65).toFixed(1)),
-                            uiTimeMs: Number(((1000 / measuredFps) * 0.35).toFixed(1)),
-                        },
-                        advice: t('performance.liveFpsDipAdvice'),
-                        severity: measuredFps < 30 ? 'critical' : 'warning',
-                    });
-                }
-                frameCount = 0;
-                maxLagInSecond = 0;
-                lastSecond = now;
-            }
-            rafIdRef.current = requestAnimationFrame(measureFrame);
-        };
-        lastFrameTimeRef.current = Date.now();
-        rafIdRef.current = requestAnimationFrame(measureFrame);
-        return () => {
-            isMounted = false;
-            if (rafIdRef.current)
-                cancelAnimationFrame(rafIdRef.current);
-        };
-    }, [isRecording]);
-    const filteredEvents = useMemo(() => {
-        return events.filter(e => {
-            let matchSearch = true;
-            if (search && search.trim().length > 0) {
-                const queryTokens = search.trim().toLowerCase().split(/\s+/).filter(Boolean);
-                const corpus = [
-                    e.label || '',
-                    e.detail || '',
-                    e.source || '',
-                    e.category || '',
-                    e.severity || '',
-                    e.bottleneckThread || '',
-                ].join(' ').toLowerCase();
-                matchSearch = queryTokens.every(tok => corpus.includes(tok));
-            }
-            const matchFilter = filterCategory === 'ALL'
-                ? true
-                : filterCategory === 'JANKY'
-                    ? e.severity === 'warning' || e.severity === 'critical'
-                    : filterCategory === 'NAVIGATION'
-                        ? e.category === 'navigation'
-                        : filterCategory === 'RENDER'
-                            ? e.category === 'render'
-                            : filterCategory === 'MEMORY'
-                                ? e.category === 'memory'
-                                : e.category === 'io' || e.category === 'bridge';
-            return matchSearch && matchFilter;
-        });
-    }, [events, search, filterCategory]);
-    const performanceScore = useMemo(() => {
-        if (avgFps >= 58) {
-            return {
-                score: '98/100',
-                grade: t('performance.excellent'),
-                color: AppColors.emerald600,
-                bg: AppColors.greenBg,
-            };
-        }
-        if (avgFps >= 50) {
-            return {
-                score: '84/100',
-                grade: t('performance.good'),
-                color: AppColors.firebaseOrange,
-                bg: AppColors.amberBg,
-            };
-        }
-        return {
-            score: '58/100',
-            grade: t('performance.needsOptimization'),
-            color: AppColors.errorColor,
-            bg: AppColors.errorCardBg,
-        };
-    }, [avgFps, t]);
-    const runtimeDiagnostics = useMemo(() => {
-        const raw = getRuntimeDiagnostics();
-        const engineNameMap = {
-            hermes: t('performance.hermesAot'),
-            v8: t('performance.v8Jit'),
-            jsc: t('performance.jscEngine'),
-        };
-        const engineSubMap = {
-            hermes: t('performance.bytecodeCompiled'),
-            v8: t('performance.jitEngine'),
-            jsc: t('performance.webkitEngine'),
-        };
-        const archNameMap = {
-            fabric: t('performance.fabricJsi'),
-            paper: t('performance.paperBridge'),
-        };
-        const archSubMap = {
-            fabric: t('performance.directCppBindings'),
-            paper: t('performance.asyncJsonBridge'),
-        };
-        return {
-            jsEngineName: engineNameMap[raw.engineType],
-            jsEngineSub: engineSubMap[raw.engineType],
-            uiArchName: archNameMap[raw.archType],
-            uiArchSub: archSubMap[raw.archType],
-            usedHeapMb: raw.usedHeapMb,
-            totalAllocMb: raw.totalAllocMb,
-        };
-    }, [t]);
-    const frameBudgetStats = useMemo(() => {
-        const frameDuration = avgFps > 0 ? 1000 / avgFps : 16.67;
-        const jsTime = Number(Math.max(1.0, Math.min(frameDuration * 0.45, 2.0 + jsLagMs)).toFixed(1));
-        const layoutTime = Number(Math.max(1.0, frameDuration * 0.2).toFixed(1));
-        const renderTime = Number(Math.max(1.0, frameDuration * 0.25).toFixed(1));
-        const totalUsed = jsTime + layoutTime + renderTime;
-        const freeTime = Math.max(0, Number((16.67 - totalUsed).toFixed(1)));
-        const headroomPercent = Math.max(0, Math.min(100, Math.round((freeTime / 16.67) * 100)));
-        return {
-            jsTime,
-            layoutTime,
-            renderTime,
-            freeTime,
-            headroomPercent,
-        };
-    }, [avgFps, jsLagMs]);
-    const [selectedFpsPointIdx, setSelectedFpsPointIdx] = useState(null);
-    const svgGraphWidth = 320;
-    const svgGraphHeight = 64;
-    const fpsGraphData = useMemo(() => {
-        const points = fpsHistory.length > 0 ? fpsHistory : [60, 60];
-        const stepX = svgGraphWidth / Math.max(1, points.length - 1);
-        const coords = points.map((val, idx) => {
-            const clamped = Math.max(0, Math.min(60, val));
-            const x = Number((idx * stepX).toFixed(1));
-            const y = Number((svgGraphHeight - (clamped / 60) * (svgGraphHeight - 14) - 6).toFixed(1));
-            return { x, y, val };
-        });
-        let linePath = `M ${coords[0].x} ${coords[0].y}`;
-        for (let i = 0; i < coords.length - 1; i++) {
-            const p0 = coords[i];
-            const p1 = coords[i + 1];
-            const midX = Number(((p0.x + p1.x) / 2).toFixed(1));
-            linePath += ` C ${midX} ${p0.y}, ${midX} ${p1.y}, ${p1.x} ${p1.y}`;
-        }
-        const last = coords[coords.length - 1];
-        const first = coords[0];
-        const areaPath = `${linePath} L ${last.x} ${svgGraphHeight} L ${first.x} ${svgGraphHeight} Z`;
-        return { linePath, areaPath, coords };
-    }, [fpsHistory]);
-    const latencyBuckets = useMemo(() => {
-        let optimal = 0;
-        let minorJank = 0;
-        let noticeableJank = 0;
-        let severeFreeze = 0;
-        fpsHistory.forEach(fps => {
-            if (fps >= 55)
-                optimal++;
-            else if (fps >= 30)
-                minorJank++;
-            else if (fps >= 20)
-                noticeableJank++;
-            else
-                severeFreeze++;
-        });
-        const total = Math.max(1, fpsHistory.length);
-        return [
-            {
-                key: 'optimal',
-                label: t('performance.optimalBucket'),
-                count: optimal,
-                percent: Number(((optimal / total) * 100).toFixed(0)),
-                color: AppColors.emerald500,
-                bgColor: AppColors.emerald100,
-            },
-            {
-                key: 'minorJank',
-                label: t('performance.minorJankBucket'),
-                count: minorJank,
-                percent: Number(((minorJank / total) * 100).toFixed(0)),
-                color: AppColors.amber500,
-                bgColor: AppColors.amber100,
-            },
-            {
-                key: 'noticeableJank',
-                label: t('performance.noticeableJankBucket'),
-                count: noticeableJank,
-                percent: Number(((noticeableJank / total) * 100).toFixed(0)),
-                color: AppColors.firebaseOrange,
-                bgColor: AppColors.lightOrange,
-            },
-            {
-                key: 'severeFreeze',
-                label: t('performance.severeFreezeBucket'),
-                count: severeFreeze,
-                percent: Number(((severeFreeze / total) * 100).toFixed(0)),
-                color: AppColors.errorColor,
-                bgColor: AppColors.errorCardBg,
-            },
-        ];
-    }, [fpsHistory, t]);
-    const clearEvents = () => {
-        clearPerformanceEvents();
-    };
-    const activeScrubPoint = selectedFpsPointIdx !== null && fpsGraphData.coords[selectedFpsPointIdx]
-        ? fpsGraphData.coords[selectedFpsPointIdx]
-        : null;
-    return (<View style={perfStyles.container}>
+import rr,{useState as I,useEffect as Q,useMemo as J,useRef as ke}from"react";import{ScrollView as Se,StyleSheet as tr,Text as C,TextInput as Tr,TouchableOpacity as Cr,View as T}from"react-native";import Sr,{Path as Be,Defs as Br,LinearGradient as Fr,Stop as Fe,Line as Me,Circle as Ve,G as Mr}from"react-native-svg";import K from"../TouchableScale";import Vr from"../CopyButton";import Re from"../HighlightText";import Rr from"../EndOfListFooter";import Ir from"./FeatureUnderDevNotice";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{useTranslation as vr}from"../../i18n";import{getRuntimeDiagnostics as Dr}from"../../helpers";import{SearchIcon as Wr,CircleXIcon as Lr,CircleAlertIcon as Ar,PerformanceIcon as Ie,BoltIcon as Te,LightbulbIcon as Hr,MapIcon as Nr,AtomIcon as Pr,BrainIcon as Er,GlobeIcon as $r,ChevronIcon as Gr}from"../NetworkIcons";import{getPerformanceEvents as Or,subscribePerformanceEvents as Jr,logPerformanceEvent as Kr,clearPerformanceEvents as Ur}from"../../customHooks/performanceTracker";import{startNativeFpsMonitoring as Yr,stopNativeFpsMonitoring as qr,getNativeFpsMetrics as Xr,getNativeSystemMetrics as _r,isNativeModuleAvailable as ve}from"../../native/NativeInspector";import{trackInspectorScreenRecord as Zr}from"../../helpers/telemetry";const Qr=rr.memo(()=>{const{t:w}=vr(),[j,De]=I(!0),[ee,We]=I(60),[we,Le]=I(57),[et,Ae]=I(60),[v,He]=I(59),[Ce,Ne]=I(4820),[Pe,Ee]=I(4),[q,je]=I(1.2),[$e,Ge]=I({"perf-1":!0}),Oe=t=>{Ge(S=>({...S,[t]:!S[t]}))},[$,Je]=I([60,59,60,60,58,60,59,60,60,60,57,60,59,60,60,58,60,60,59,60]),[re,Ke]=I(()=>Or()),[P,Ue]=I("ALL"),[W,te]=I("");Q(()=>Jr(S=>{Ke(S)}),[]);const oe=ke(Date.now()),X=ke(null),[L,Ye]=I(null);Q(()=>{let t=!0;const S=async()=>{const F=await _r();t&&F&&Ye(F)};S();const B=setInterval(S,2e3);return()=>{t=!1,clearInterval(B)}},[]),Q(()=>{if(ve())return Yr(),()=>{qr()}},[]),Q(()=>{if(!j)return;let t=!0,S=0,B=0,F=Date.now();const R=async()=>{if(!t)return;const z=Date.now(),E=z-oe.current;oe.current=z;const D=Math.max(0,E-16.67);if(D>B&&(B=D),S++,z-F>=1e3){const O=z-F;let V=Math.min(120,Math.max(0,Math.round(S*1e3/O)));if(ve())try{const M=await Xr();M&&M.fps>0&&(V=Math.round(M.fps))}catch{}if(We(V),Le(M=>Math.min(M,V)),Ae(M=>Math.max(M,V)),Ne(M=>M+S),je(Number(B.toFixed(1))),V<55&&Ee(M=>M+1),Je(M=>{const Y=[...M.slice(-19),V],Ze=Y.reduce((Qe,er)=>Qe+er,0);return He(Math.round(Ze/Y.length)),Y}),V<50){const M=(1e3/V).toFixed(1);Kr({type:"fps_drop",category:"render",fps:V,durationMs:Number(M),label:w("performance.liveFpsDip",{fps:V}),detail:w("performance.liveFpsDipDetail",{duration:M}),source:w("performance.uiRenderThread"),breakdown:{jsTimeMs:Number((1e3/V*.65).toFixed(1)),uiTimeMs:Number((1e3/V*.35).toFixed(1))},advice:w("performance.liveFpsDipAdvice"),severity:V<30?"critical":"warning"})}S=0,B=0,F=z}X.current=requestAnimationFrame(R)};return oe.current=Date.now(),X.current=requestAnimationFrame(R),()=>{t=!1,X.current&&cancelAnimationFrame(X.current)}},[j]);const _=J(()=>re.filter(t=>{let S=!0;if(W&&W.trim().length>0){const F=W.trim().toLowerCase().split(/\s+/).filter(Boolean),R=[t.label||"",t.detail||"",t.source||"",t.category||"",t.severity||"",t.bottleneckThread||""].join(" ").toLowerCase();S=F.every(z=>R.includes(z))}const B=P==="ALL"?!0:P==="JANKY"?t.severity==="warning"||t.severity==="critical":P==="NAVIGATION"?t.category==="navigation":P==="RENDER"?t.category==="render":P==="MEMORY"?t.category==="memory":t.category==="io"||t.category==="bridge";return S&&B}),[re,W,P]),ae=J(()=>v>=58?{score:"98/100",grade:w("performance.excellent"),color:e.emerald600,bg:e.greenBg}:v>=50?{score:"84/100",grade:w("performance.good"),color:e.firebaseOrange,bg:e.amberBg}:{score:"58/100",grade:w("performance.needsOptimization"),color:e.errorColor,bg:e.errorCardBg},[v,w]),G=J(()=>{const t=Dr(),S={hermes:w("performance.hermesAot"),v8:w("performance.v8Jit"),jsc:w("performance.jscEngine")},B={hermes:w("performance.bytecodeCompiled"),v8:w("performance.jitEngine"),jsc:w("performance.webkitEngine")},F={fabric:w("performance.fabricJsi"),paper:w("performance.paperBridge")},R={fabric:w("performance.directCppBindings"),paper:w("performance.asyncJsonBridge")};return{jsEngineName:S[t.engineType],jsEngineSub:B[t.engineType],uiArchName:F[t.archType],uiArchSub:R[t.archType],usedHeapMb:t.usedHeapMb,totalAllocMb:t.totalAllocMb}},[w]),A=J(()=>{const t=v>0?1e3/v:16.67,S=Number(Math.max(1,Math.min(t*.45,2+q)).toFixed(1)),B=Number(Math.max(1,t*.2).toFixed(1)),F=Number(Math.max(1,t*.25).toFixed(1)),R=S+B+F,z=Math.max(0,Number((16.67-R).toFixed(1))),E=Math.max(0,Math.min(100,Math.round(z/16.67*100)));return{jsTime:S,layoutTime:B,renderTime:F,freeTime:z,headroomPercent:E}},[v,q]),[U,qe]=I(null),Z=320,H=64,N=J(()=>{const t=$.length>0?$:[60,60],S=Z/Math.max(1,t.length-1),B=t.map((D,O)=>{const V=Math.max(0,Math.min(60,D)),M=Number((O*S).toFixed(1)),Y=Number((H-V/60*(H-14)-6).toFixed(1));return{x:M,y:Y,val:D}});let F=`M ${B[0].x} ${B[0].y}`;for(let D=0;D<B.length-1;D++){const O=B[D],V=B[D+1],M=Number(((O.x+V.x)/2).toFixed(1));F+=` C ${M} ${O.y}, ${M} ${V.y}, ${V.x} ${V.y}`}const R=B[B.length-1],z=B[0],E=`${F} L ${R.x} ${H} L ${z.x} ${H} Z`;return{linePath:F,areaPath:E,coords:B}},[$]),Xe=J(()=>{let t=0,S=0,B=0,F=0;$.forEach(z=>{z>=55?t++:z>=30?S++:z>=20?B++:F++});const R=Math.max(1,$.length);return[{key:"optimal",label:w("performance.optimalBucket"),count:t,percent:Number((t/R*100).toFixed(0)),color:e.emerald500,bgColor:e.emerald100},{key:"minorJank",label:w("performance.minorJankBucket"),count:S,percent:Number((S/R*100).toFixed(0)),color:e.amber500,bgColor:e.amber100},{key:"noticeableJank",label:w("performance.noticeableJankBucket"),count:B,percent:Number((B/R*100).toFixed(0)),color:e.firebaseOrange,bgColor:e.lightOrange},{key:"severeFreeze",label:w("performance.severeFreezeBucket"),count:F,percent:Number((F/R*100).toFixed(0)),color:e.errorColor,bgColor:e.errorCardBg}]},[$,w]),_e=()=>{Ur()},ie=U!==null&&N.coords[U]?N.coords[U]:null;return<T style={r.container}>
       
-      <View style={perfStyles.headerBar}>
-        <View style={perfStyles.searchBox}>
-          <SearchIcon color={AppColors.grayTextWeak} size={15}/>
-          <TextInput placeholder={t('performance.searchPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={perfStyles.searchInput} autoCapitalize="none" autoCorrect={false}/>
-          {search ? (<TouchableScale onPress={() => setSearch('')}>
-              <CircleXIcon color={AppColors.grayTextWeak} size={16}/>
-            </TouchableScale>) : null}
-        </View>
+      <T style={r.headerBar}>
+        <T style={r.searchBox}>
+          <Wr color={e.grayTextWeak}size={15}/>
+          <Tr placeholder={w("performance.searchPlaceholder")}placeholderTextColor={e.grayTextWeak}value={W}onChangeText={te}style={r.searchInput}autoCapitalize="none"autoCorrect={!1}/>
+          {W?<K onPress={()=>te("")}>
+              <Lr color={e.grayTextWeak}size={16}/>
+            </K>:null}
+        </T>
 
         
-        <TouchableScale onPress={() => {
-            setIsRecording(prev => {
-                const next = !prev;
-                trackInspectorScreenRecord(next ? 'start' : 'stop', 'performance_fps');
-                return next;
-            });
-        }} style={[
-            perfStyles.recordToggleBtn,
-            isRecording
-                ? perfStyles.recordToggleActive
-                : perfStyles.recordToggleInactive,
-        ]}>
-          <View style={[
-            perfStyles.recordingDot,
-            {
-                backgroundColor: isRecording
-                    ? AppColors.errorColor
-                    : AppColors.grayTextWeak,
-            },
-        ]}/>
-          <Text style={[
-            perfStyles.recordToggleText,
-            {
-                color: isRecording
-                    ? AppColors.errorColor
-                    : AppColors.grayTextWeak,
-            },
-        ]}>
-            {isRecording
-            ? t('performance.recording')
-            : t('performance.paused')}
-          </Text>
-        </TouchableScale>
-      </View>
+        <K onPress={()=>{De(t=>{const S=!t;return Zr(S?"start":"stop","performance_fps"),S})}}style={[r.recordToggleBtn,j?r.recordToggleActive:r.recordToggleInactive]}>
+          <T style={[r.recordingDot,{backgroundColor:j?e.errorColor:e.grayTextWeak}]}/>
+          <C style={[r.recordToggleText,{color:j?e.errorColor:e.grayTextWeak}]}>
+            {w(j?"performance.recording":"performance.paused")}
+          </C>
+        </K>
+      </T>
 
-      <FeatureUnderDevNotice featureName="Performance & FPS Profiler"/>
+      <Ir featureName="Performance & FPS Profiler"/>
 
       
-      <View style={perfStyles.categoryScrollWrapper}>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={perfStyles.categoryScrollView} contentContainerStyle={perfStyles.categoryScroll}>
-          {[
-            {
-                key: 'ALL',
-                label: t('performance.catAll'),
-                icon: (color) => <PerformanceIcon size={12} color={color}/>,
-            },
-            {
-                key: 'JANKY',
-                label: t('performance.catJanky'),
-                icon: (color) => <CircleAlertIcon size={12} color={color}/>,
-            },
-            {
-                key: 'NAVIGATION',
-                label: t('performance.catNavigation'),
-                icon: (color) => <MapIcon size={12} color={color}/>,
-            },
-            {
-                key: 'RENDER',
-                label: t('performance.catRender'),
-                icon: (color) => <AtomIcon size={12} color={color}/>,
-            },
-            {
-                key: 'MEMORY',
-                label: t('performance.catMemory'),
-                icon: (color) => <BrainIcon size={12} color={color}/>,
-            },
-            {
-                key: 'IO',
-                label: t('performance.catIo'),
-                icon: (color) => <GlobeIcon size={12} color={color}/>,
-            },
-        ].map(cat => {
-            const isSelected = filterCategory === cat.key;
-            const iconColor = isSelected ? AppColors.white : AppColors.grayTextWeak;
-            return (<TouchableScale key={cat.key} onPress={() => setFilterCategory(cat.key)} style={[
-                    perfStyles.categoryChip,
-                    isSelected && perfStyles.categoryChipActive,
-                    { flexDirection: 'row', alignItems: 'center', gap: 5 },
-                ]}>
-                {cat.icon(iconColor)}
-                <Text style={[
-                    perfStyles.categoryChipText,
-                    isSelected && perfStyles.categoryChipTextActive,
-                ]}>
-                  {cat.label}
-                </Text>
-              </TouchableScale>);
-        })}
-        </ScrollView>
-      </View>
+      <T style={r.categoryScrollWrapper}>
+        <Se horizontal showsHorizontalScrollIndicator={!1}style={r.categoryScrollView}contentContainerStyle={r.categoryScroll}>
+          {[{key:"ALL",label:w("performance.catAll"),icon:t=><Ie size={12}color={t}/>},{key:"JANKY",label:w("performance.catJanky"),icon:t=><Ar size={12}color={t}/>},{key:"NAVIGATION",label:w("performance.catNavigation"),icon:t=><Nr size={12}color={t}/>},{key:"RENDER",label:w("performance.catRender"),icon:t=><Pr size={12}color={t}/>},{key:"MEMORY",label:w("performance.catMemory"),icon:t=><Er size={12}color={t}/>},{key:"IO",label:w("performance.catIo"),icon:t=><$r size={12}color={t}/>}].map(t=>{const S=P===t.key,B=S?e.white:e.grayTextWeak;return<K key={t.key}onPress={()=>Ue(t.key)}style={[r.categoryChip,S&&r.categoryChipActive,{flexDirection:"row",alignItems:"center",gap:5}]}>
+                {t.icon(B)}
+                <C style={[r.categoryChipText,S&&r.categoryChipTextActive]}>
+                  {t.label}
+                </C>
+              </K>})}
+        </Se>
+      </T>
 
       
-      <ScrollView style={perfStyles.scrollBody} contentContainerStyle={perfStyles.scrollContent} showsVerticalScrollIndicator={false}>
+      <Se style={r.scrollBody}contentContainerStyle={r.scrollContent}showsVerticalScrollIndicator={!1}>
         
-        <View style={perfStyles.heroCard}>
-          <View style={perfStyles.heroHeaderRow}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              <PerformanceIcon color={AppColors.purple} size={17}/>
-              <View>
-                <Text style={perfStyles.heroTitle}>
-                  {t('performance.fpsAreaChartTitle')}
-                </Text>
-                <Text style={perfStyles.heroSubTitle}>
-                  {t('performance.fpsAreaChartSub')}
-                </Text>
-              </View>
-            </View>
+        <T style={r.heroCard}>
+          <T style={r.heroHeaderRow}>
+            <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+              <Ie color={e.purple}size={17}/>
+              <T>
+                <C style={r.heroTitle}>
+                  {w("performance.fpsAreaChartTitle")}
+                </C>
+                <C style={r.heroSubTitle}>
+                  {w("performance.fpsAreaChartSub")}
+                </C>
+              </T>
+            </T>
 
             
-            <View style={[
-            perfStyles.scorePill,
-            { backgroundColor: performanceScore.bg },
-        ]}>
-              <Text style={[
-            perfStyles.scorePillText,
-            { color: performanceScore.color },
-        ]}>
-                {performanceScore.grade}
-              </Text>
-            </View>
-          </View>
+            <T style={[r.scorePill,{backgroundColor:ae.bg}]}>
+              <C style={[r.scorePillText,{color:ae.color}]}>
+                {ae.grade}
+              </C>
+            </T>
+          </T>
 
           
-          <View style={perfStyles.primaryFpsRow}>
-            <View style={perfStyles.fpsBigNumberBox}>
-              <Text style={[
-            perfStyles.fpsBigNumber,
-            {
-                color: currentFps >= 55
-                    ? AppColors.emerald600
-                    : currentFps >= 40
-                        ? AppColors.firebaseOrange
-                        : AppColors.errorColor,
-            },
-        ]}>
-                {currentFps}
-              </Text>
-              <Text style={perfStyles.fpsUnit}>{t('performance.fpsUnit')}</Text>
-            </View>
-
-            <View style={perfStyles.fpsStatsGrid}>
-              <View style={perfStyles.statItem}>
-                <Text style={perfStyles.statLabel}>
-                  {t('performance.avgFrameTime')}
-                </Text>
-                <Text style={perfStyles.statValue}>{avgFps}</Text>
-              </View>
-              <View style={perfStyles.statItem}>
-                <Text style={perfStyles.statLabel}>
-                  {t('performance.peakTime')}
-                </Text>
-                <Text style={[
-            perfStyles.statValue,
-            minFps < 50 && { color: AppColors.firebaseOrange },
-        ]}>
-                  {minFps}
-                </Text>
-              </View>
-              <View style={perfStyles.statItem}>
-                <Text style={perfStyles.statLabel}>
-                  {t('performance.jsLag')}
-                </Text>
-                <Text style={[
-            perfStyles.statValue,
-            jsLagMs > 5 && { color: AppColors.firebaseOrange },
-        ]}>
-                  {jsLagMs}ms
-                </Text>
-              </View>
-              <View style={perfStyles.statItem}>
-                <Text style={perfStyles.statLabel}>
-                  {t('performance.jankRate')}
-                </Text>
-                <Text style={perfStyles.statValue}>
-                  {totalFrames > 0
-            ? `${((jankyFrameCount / Math.max(1, totalFrames / 60)) *
-                100).toFixed(0)}%`
-            : '0%'}
-                </Text>
-              </View>
-            </View>
-          </View>
+          <T style={r.primaryFpsRow}>
+            <T style={r.fpsBigNumberBox}>
+              <C style={[r.fpsBigNumber,{color:ee>=55?e.emerald600:ee>=40?e.firebaseOrange:e.errorColor}]}>
+                {ee}
+              </C>
+              <C style={r.fpsUnit}>{w("performance.fpsUnit")}</C>
+            </T>
+
+            <T style={r.fpsStatsGrid}>
+              <T style={r.statItem}>
+                <C style={r.statLabel}>
+                  {w("performance.avgFrameTime")}
+                </C>
+                <C style={r.statValue}>{v}</C>
+              </T>
+              <T style={r.statItem}>
+                <C style={r.statLabel}>
+                  {w("performance.peakTime")}
+                </C>
+                <C style={[r.statValue,we<50&&{color:e.firebaseOrange}]}>
+                  {we}
+                </C>
+              </T>
+              <T style={r.statItem}>
+                <C style={r.statLabel}>
+                  {w("performance.jsLag")}
+                </C>
+                <C style={[r.statValue,q>5&&{color:e.firebaseOrange}]}>
+                  {q}ms
+                </C>
+              </T>
+              <T style={r.statItem}>
+                <C style={r.statLabel}>
+                  {w("performance.jankRate")}
+                </C>
+                <C style={r.statValue}>
+                  {Ce>0?`${(Pe/Math.max(1,Ce/60)*100).toFixed(0)}%`:"0%"}
+                </C>
+              </T>
+            </T>
+          </T>
 
           
-          {activeScrubPoint && (<View style={perfStyles.graphScrubTooltip}>
-              <Text style={perfStyles.graphScrubTooltipText}>
-                {activeScrubPoint.val} FPS •{' '}
-                {Number((1000 / Math.max(1, activeScrubPoint.val)).toFixed(1))}
+          {ie&&<T style={r.graphScrubTooltip}>
+              <C style={r.graphScrubTooltipText}>
+                {ie.val} FPS •{" "}
+                {Number((1e3/Math.max(1,ie.val)).toFixed(1))}
                 ms
-              </Text>
-            </View>)}
+              </C>
+            </T>}
 
           
-          <View style={perfStyles.svgGraphContainer}>
-            <Svg width="100%" height={svgGraphHeight} viewBox={`0 0 ${svgGraphWidth} ${svgGraphHeight}`} preserveAspectRatio="none">
-              <Defs>
-                <LinearGradient id="fpsAreaGradient" x1="0" y1="0" x2="0" y2="1">
-                  <Stop offset="0%" stopColor={avgFps >= 55
-            ? AppColors.emerald500
-            : avgFps >= 40
-                ? AppColors.amber500
-                : AppColors.errorColor} stopOpacity="0.32"/>
-                  <Stop offset="100%" stopColor={avgFps >= 55
-            ? AppColors.emerald500
-            : avgFps >= 40
-                ? AppColors.amber500
-                : AppColors.errorColor} stopOpacity="0.02"/>
-                </LinearGradient>
-              </Defs>
+          <T style={r.svgGraphContainer}>
+            <Sr width="100%"height={H}viewBox={`0 0 ${Z} ${H}`}preserveAspectRatio="none">
+              <Br>
+                <Fr id="fpsAreaGradient"x1="0"y1="0"x2="0"y2="1">
+                  <Fe offset="0%"stopColor={v>=55?e.emerald500:v>=40?e.amber500:e.errorColor}stopOpacity="0.32"/>
+                  <Fe offset="100%"stopColor={v>=55?e.emerald500:v>=40?e.amber500:e.errorColor}stopOpacity="0.02"/>
+                </Fr>
+              </Br>
 
               
-              <Line x1="0" y1="7" x2={svgGraphWidth} y2="7" stroke={AppColors.emerald500} strokeWidth="1" strokeDasharray="4,4" opacity="0.4"/>
+              <Me x1="0"y1="7"x2={Z}y2="7"stroke={e.emerald500}strokeWidth="1"strokeDasharray="4,4"opacity="0.4"/>
 
               
-              <Line x1="0" y1={svgGraphHeight / 2} x2={svgGraphWidth} y2={svgGraphHeight / 2} stroke={AppColors.amber500} strokeWidth="0.8" strokeDasharray="3,3" opacity="0.3"/>
+              <Me x1="0"y1={H/2}x2={Z}y2={H/2}stroke={e.amber500}strokeWidth="0.8"strokeDasharray="3,3"opacity="0.3"/>
 
               
-              {fpsGraphData.areaPath ? (<Path d={fpsGraphData.areaPath} fill="url(#fpsAreaGradient)"/>) : null}
+              {N.areaPath?<Be d={N.areaPath}fill="url(#fpsAreaGradient)"/>:null}
 
               
-              {fpsGraphData.linePath ? (<Path d={fpsGraphData.linePath} fill="none" stroke={avgFps >= 55
-                ? AppColors.emerald600
-                : avgFps >= 40
-                    ? AppColors.amber600
-                    : AppColors.errorColor} strokeWidth="2.2"/>) : null}
+              {N.linePath?<Be d={N.linePath}fill="none"stroke={v>=55?e.emerald600:v>=40?e.amber600:e.errorColor}strokeWidth="2.2"/>:null}
 
               
-              {fpsGraphData.coords.map((c, idx) => {
-            const isSelected = selectedFpsPointIdx === idx;
-            const isDip = c.val < 50;
-            return (<G key={idx}>
-                    {isDip && (<Circle cx={c.x} cy={c.y} r="4" fill={AppColors.errorColor} opacity="0.25"/>)}
-                    <Circle cx={c.x} cy={c.y} r={isSelected ? 4 : isDip ? 2.5 : 1.8} fill={isSelected
-                    ? AppColors.brandPurple
-                    : isDip
-                        ? AppColors.errorColor
-                        : AppColors.emerald600} stroke={AppColors.white} strokeWidth={isSelected ? 1.5 : 0.8}/>
-                  </G>);
-        })}
-            </Svg>
+              {N.coords.map((t,S)=>{const B=U===S,F=t.val<50;return<Mr key={S}>
+                    {F&&<Ve cx={t.x}cy={t.y}r="4"fill={e.errorColor}opacity="0.25"/>}
+                    <Ve cx={t.x}cy={t.y}r={B?4:F?2.5:1.8}fill={B?e.brandPurple:F?e.errorColor:e.emerald600}stroke={e.white}strokeWidth={B?1.5:.8}/>
+                  </Mr>})}
+            </Sr>
 
             
-            <View style={perfStyles.svgTouchOverlay}>
-              {fpsGraphData.coords.map((_, idx) => (<TouchableOpacity key={idx} style={perfStyles.svgTouchCol} activeOpacity={0.7} onPress={() => setSelectedFpsPointIdx(selectedFpsPointIdx === idx ? null : idx)}/>))}
-            </View>
-          </View>
-
-          <View style={perfStyles.sparklineFooter}>
-            <Text style={perfStyles.sparklineFooterText}>
-              {t('performance.realtimeWindow')}
-            </Text>
-            <Text style={perfStyles.sparklineFooterTarget}>
-              {t('performance.target60Fps', { fps: avgFps })}
-            </Text>
-          </View>
-        </View>
+            <T style={r.svgTouchOverlay}>
+              {N.coords.map((t,S)=><Cr key={S}style={r.svgTouchCol}activeOpacity={.7}onPress={()=>qe(U===S?null:S)}/>)}
+            </T>
+          </T>
+
+          <T style={r.sparklineFooter}>
+            <C style={r.sparklineFooterText}>
+              {w("performance.realtimeWindow")}
+            </C>
+            <C style={r.sparklineFooterTarget}>
+              {w("performance.target60Fps",{fps:v})}
+            </C>
+          </T>
+        </T>
 
         
-        <View style={perfStyles.budgetCard}>
-          <View style={perfStyles.budgetHeader}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-              <BoltIcon color={AppColors.brandPurple} size={15}/>
-              <View>
-                <Text style={perfStyles.budgetTitle}>Native Hardware & System Health</Text>
-                <Text style={perfStyles.heroSubTitle}>Live kernel metrics, resident RAM, and thermal state</Text>
-              </View>
-            </View>
-            {systemMetrics && (<View style={{
-                paddingHorizontal: 7,
-                paddingVertical: 2.5,
-                borderRadius: 5,
-                backgroundColor: systemMetrics.thermalState === 'nominal'
-                    ? `${AppColors.emerald600}18`
-                    : systemMetrics.thermalState === 'fair'
-                        ? `${AppColors.amber800Warm}18`
-                        : `${AppColors.errorColor}18`,
-            }}>
-                <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 9.5,
-                color: systemMetrics.thermalState === 'nominal'
-                    ? AppColors.emerald600
-                    : systemMetrics.thermalState === 'fair'
-                        ? AppColors.amber800Warm
-                        : AppColors.errorColor,
-                textTransform: 'uppercase',
-            }}>
-                  {systemMetrics.thermalState} THERMAL
-                </Text>
-              </View>)}
-          </View>
-
-          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 10 }}>
-            <View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors.dividerColor }}>
-              <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 9.5, color: AppColors.grayTextWeak }}>Resident RAM</Text>
-              <Text style={{ fontFamily: AppFonts.interBold, fontSize: 13, color: AppColors.brandPurple, marginTop: 2 }}>
-                {systemMetrics ? `${systemMetrics.residentRamMb.toFixed(1)} MB` : '18.4 MB'}
-              </Text>
-            </View>
-            <View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors.dividerColor }}>
-              <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 9.5, color: AppColors.grayTextWeak }}>Total Physical RAM</Text>
-              <Text style={{ fontFamily: AppFonts.interBold, fontSize: 13, color: AppColors.primaryBlack, marginTop: 2 }}>
-                {systemMetrics ? `${Math.round(systemMetrics.totalPhysicalRamMb)} MB` : '3840 MB'}
-              </Text>
-            </View>
-            <View style={{ flex: 1, minWidth: 100, backgroundColor: AppColors.grayBackground, padding: 8, borderRadius: 8, borderWidth: 1, borderColor: AppColors.dividerColor }}>
-              <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 9.5, color: AppColors.grayTextWeak }}>Active CPU Cores</Text>
-              <Text style={{ fontFamily: AppFonts.interBold, fontSize: 13, color: AppColors.skyBlue, marginTop: 2 }}>
-                {systemMetrics ? `${systemMetrics.activeCpuCores} Cores` : '6 Cores'}
-              </Text>
-            </View>
-          </View>
-        </View>
+        <T style={r.budgetCard}>
+          <T style={r.budgetHeader}>
+            <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+              <Te color={e.brandPurple}size={15}/>
+              <T>
+                <C style={r.budgetTitle}>Native Hardware & System Health</C>
+                <C style={r.heroSubTitle}>Live kernel metrics, resident RAM, and thermal state</C>
+              </T>
+            </T>
+            {L&&<T style={{paddingHorizontal:7,paddingVertical:2.5,borderRadius:5,backgroundColor:L.thermalState==="nominal"?`${e.emerald600}18`:L.thermalState==="fair"?`${e.amber800Warm}18`:`${e.errorColor}18`}}>
+                <C style={{fontFamily:k.interBold,fontSize:9.5,color:L.thermalState==="nominal"?e.emerald600:L.thermalState==="fair"?e.amber800Warm:e.errorColor,textTransform:"uppercase"}}>
+                  {L.thermalState} THERMAL
+                </C>
+              </T>}
+          </T>
+
+          <T style={{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:10}}>
+            <T style={{flex:1,minWidth:100,backgroundColor:e.grayBackground,padding:8,borderRadius:8,borderWidth:1,borderColor:e.dividerColor}}>
+              <C style={{fontFamily:k.interRegular,fontSize:9.5,color:e.grayTextWeak}}>Resident RAM</C>
+              <C style={{fontFamily:k.interBold,fontSize:13,color:e.brandPurple,marginTop:2}}>
+                {L?`${L.residentRamMb.toFixed(1)} MB`:"18.4 MB"}
+              </C>
+            </T>
+            <T style={{flex:1,minWidth:100,backgroundColor:e.grayBackground,padding:8,borderRadius:8,borderWidth:1,borderColor:e.dividerColor}}>
+              <C style={{fontFamily:k.interRegular,fontSize:9.5,color:e.grayTextWeak}}>Total Physical RAM</C>
+              <C style={{fontFamily:k.interBold,fontSize:13,color:e.primaryBlack,marginTop:2}}>
+                {L?`${Math.round(L.totalPhysicalRamMb)} MB`:"3840 MB"}
+              </C>
+            </T>
+            <T style={{flex:1,minWidth:100,backgroundColor:e.grayBackground,padding:8,borderRadius:8,borderWidth:1,borderColor:e.dividerColor}}>
+              <C style={{fontFamily:k.interRegular,fontSize:9.5,color:e.grayTextWeak}}>Active CPU Cores</C>
+              <C style={{fontFamily:k.interBold,fontSize:13,color:e.skyBlue,marginTop:2}}>
+                {L?`${L.activeCpuCores} Cores`:"6 Cores"}
+              </C>
+            </T>
+          </T>
+        </T>
 
         
-        <View style={perfStyles.budgetCard}>
-          <View style={perfStyles.budgetHeader}>
-            <View>
-              <Text style={perfStyles.budgetTitle}>
-                {t('performance.frameLatencyDistTitle')}
-              </Text>
-              <Text style={perfStyles.heroSubTitle}>
-                {t('performance.frameLatencyDistSub')}
-              </Text>
-            </View>
-          </View>
-
-          <View style={perfStyles.histogramContainer}>
-            {latencyBuckets.map(b => (<View key={b.key} style={perfStyles.histogramRow}>
-                <View style={perfStyles.histogramLabelCol}>
-                  <View style={[perfStyles.legendDot, { backgroundColor: b.color }]}/>
-                  <Text style={perfStyles.histogramLabelText}>{b.label}</Text>
-                </View>
-
-                <View style={perfStyles.histogramBarCol}>
-                  <View style={perfStyles.histogramTrack}>
-                    <View style={[
-                perfStyles.histogramBarFill,
-                {
-                    width: `${Math.max(b.percent > 0 ? 4 : 0, b.percent)}%`,
-                    backgroundColor: b.color,
-                },
-            ]}/>
-                  </View>
-                </View>
-
-                <View style={perfStyles.histogramStatsCol}>
-                  <Text style={[
-                perfStyles.histogramPercentText,
-                { color: b.color },
-            ]}>
-                    {b.percent}%
-                  </Text>
-                  <Text style={perfStyles.histogramCountText}>
-                    ({b.count})
-                  </Text>
-                </View>
-              </View>))}
-          </View>
-        </View>
+        <T style={r.budgetCard}>
+          <T style={r.budgetHeader}>
+            <T>
+              <C style={r.budgetTitle}>
+                {w("performance.frameLatencyDistTitle")}
+              </C>
+              <C style={r.heroSubTitle}>
+                {w("performance.frameLatencyDistSub")}
+              </C>
+            </T>
+          </T>
+
+          <T style={r.histogramContainer}>
+            {Xe.map(t=><T key={t.key}style={r.histogramRow}>
+                <T style={r.histogramLabelCol}>
+                  <T style={[r.legendDot,{backgroundColor:t.color}]}/>
+                  <C style={r.histogramLabelText}>{t.label}</C>
+                </T>
+
+                <T style={r.histogramBarCol}>
+                  <T style={r.histogramTrack}>
+                    <T style={[r.histogramBarFill,{width:`${Math.max(t.percent>0?4:0,t.percent)}%`,backgroundColor:t.color}]}/>
+                  </T>
+                </T>
+
+                <T style={r.histogramStatsCol}>
+                  <C style={[r.histogramPercentText,{color:t.color}]}>
+                    {t.percent}%
+                  </C>
+                  <C style={r.histogramCountText}>
+                    ({t.count})
+                  </C>
+                </T>
+              </T>)}
+          </T>
+        </T>
 
         
-        <View style={perfStyles.budgetCard}>
-          <View style={perfStyles.budgetHeader}>
-            <Text style={perfStyles.budgetTitle}>{t('performance.budgetUsage')}</Text>
-            <Text style={perfStyles.budgetHeadroom}>
-              {t('performance.budgetHeadroom', {
-            time: frameBudgetStats.freeTime,
-            percent: frameBudgetStats.headroomPercent,
-        })}
-            </Text>
-          </View>
+        <T style={r.budgetCard}>
+          <T style={r.budgetHeader}>
+            <C style={r.budgetTitle}>{w("performance.budgetUsage")}</C>
+            <C style={r.budgetHeadroom}>
+              {w("performance.budgetHeadroom",{time:A.freeTime,percent:A.headroomPercent})}
+            </C>
+          </T>
 
           
-          <View style={perfStyles.budgetBarContainer}>
-            <View style={[
-            perfStyles.budgetBarSegment,
-            { flex: Math.max(0.5, frameBudgetStats.jsTime), backgroundColor: AppColors.sky400 },
-        ]}/>
-            <View style={[
-            perfStyles.budgetBarSegment,
-            { flex: Math.max(0.5, frameBudgetStats.layoutTime), backgroundColor: AppColors.indigo500 },
-        ]}/>
-            <View style={[
-            perfStyles.budgetBarSegment,
-            { flex: Math.max(0.5, frameBudgetStats.renderTime), backgroundColor: AppColors.pink400 },
-        ]}/>
-            <View style={[
-            perfStyles.budgetBarSegment,
-            { flex: Math.max(0.5, frameBudgetStats.freeTime), backgroundColor: AppColors.emerald400 },
-        ]}/>
-          </View>
-
-          <View style={perfStyles.budgetLegendGrid}>
-            <View style={perfStyles.legendItem}>
-              <View style={[perfStyles.legendDot, { backgroundColor: AppColors.sky400 }]}/>
-              <Text style={perfStyles.legendText}>
-                {t('performance.jsExec', { time: frameBudgetStats.jsTime })}
-              </Text>
-            </View>
-            <View style={perfStyles.legendItem}>
-              <View style={[perfStyles.legendDot, { backgroundColor: AppColors.indigo500 }]}/>
-              <Text style={perfStyles.legendText}>
-                {t('performance.yogaLayoutTime', { time: frameBudgetStats.layoutTime })}
-              </Text>
-            </View>
-            <View style={perfStyles.legendItem}>
-              <View style={[perfStyles.legendDot, { backgroundColor: AppColors.pink400 }]}/>
-              <Text style={perfStyles.legendText}>
-                {t('performance.uiRenderTime', { time: frameBudgetStats.renderTime })}
-              </Text>
-            </View>
-            <View style={perfStyles.legendItem}>
-              <View style={[perfStyles.legendDot, { backgroundColor: AppColors.emerald400 }]}/>
-              <Text style={[perfStyles.legendText, { color: AppColors.emerald600, fontFamily: AppFonts.interBold }]}>
-                {t('performance.freeTime', { time: frameBudgetStats.freeTime })}
-              </Text>
-            </View>
-          </View>
-        </View>
+          <T style={r.budgetBarContainer}>
+            <T style={[r.budgetBarSegment,{flex:Math.max(.5,A.jsTime),backgroundColor:e.sky400}]}/>
+            <T style={[r.budgetBarSegment,{flex:Math.max(.5,A.layoutTime),backgroundColor:e.indigo500}]}/>
+            <T style={[r.budgetBarSegment,{flex:Math.max(.5,A.renderTime),backgroundColor:e.pink400}]}/>
+            <T style={[r.budgetBarSegment,{flex:Math.max(.5,A.freeTime),backgroundColor:e.emerald400}]}/>
+          </T>
+
+          <T style={r.budgetLegendGrid}>
+            <T style={r.legendItem}>
+              <T style={[r.legendDot,{backgroundColor:e.sky400}]}/>
+              <C style={r.legendText}>
+                {w("performance.jsExec",{time:A.jsTime})}
+              </C>
+            </T>
+            <T style={r.legendItem}>
+              <T style={[r.legendDot,{backgroundColor:e.indigo500}]}/>
+              <C style={r.legendText}>
+                {w("performance.yogaLayoutTime",{time:A.layoutTime})}
+              </C>
+            </T>
+            <T style={r.legendItem}>
+              <T style={[r.legendDot,{backgroundColor:e.pink400}]}/>
+              <C style={r.legendText}>
+                {w("performance.uiRenderTime",{time:A.renderTime})}
+              </C>
+            </T>
+            <T style={r.legendItem}>
+              <T style={[r.legendDot,{backgroundColor:e.emerald400}]}/>
+              <C style={[r.legendText,{color:e.emerald600,fontFamily:k.interBold}]}>
+                {w("performance.freeTime",{time:A.freeTime})}
+              </C>
+            </T>
+          </T>
+        </T>
 
         
-        <View style={perfStyles.engineSummaryGrid}>
-          <View style={perfStyles.engineSummaryCard}>
-            <Text style={perfStyles.engineSummaryLabel}>{t('performance.jsEngine')}</Text>
-            <Text style={perfStyles.engineSummaryValue}>{runtimeDiagnostics.jsEngineName}</Text>
-            <Text style={perfStyles.engineSummarySub}>{runtimeDiagnostics.jsEngineSub}</Text>
-          </View>
-          <View style={perfStyles.engineSummaryCard}>
-            <Text style={perfStyles.engineSummaryLabel}>{t('performance.uiRenderThread')}</Text>
-            <Text style={perfStyles.engineSummaryValue}>{runtimeDiagnostics.uiArchName}</Text>
-            <Text style={perfStyles.engineSummarySub}>{runtimeDiagnostics.uiArchSub}</Text>
-          </View>
-          <View style={perfStyles.engineSummaryCard}>
-            <Text style={perfStyles.engineSummaryLabel}>{t('performance.tabMemory')}</Text>
-            <Text style={perfStyles.engineSummaryValue}>{runtimeDiagnostics.usedHeapMb} MB</Text>
-            <Text style={perfStyles.engineSummarySub}>
-              {t('performance.heapAllocatedSub', { allocated: runtimeDiagnostics.totalAllocMb })}
-            </Text>
-          </View>
-        </View>
+        <T style={r.engineSummaryGrid}>
+          <T style={r.engineSummaryCard}>
+            <C style={r.engineSummaryLabel}>{w("performance.jsEngine")}</C>
+            <C style={r.engineSummaryValue}>{G.jsEngineName}</C>
+            <C style={r.engineSummarySub}>{G.jsEngineSub}</C>
+          </T>
+          <T style={r.engineSummaryCard}>
+            <C style={r.engineSummaryLabel}>{w("performance.uiRenderThread")}</C>
+            <C style={r.engineSummaryValue}>{G.uiArchName}</C>
+            <C style={r.engineSummarySub}>{G.uiArchSub}</C>
+          </T>
+          <T style={r.engineSummaryCard}>
+            <C style={r.engineSummaryLabel}>{w("performance.tabMemory")}</C>
+            <C style={r.engineSummaryValue}>{G.usedHeapMb} MB</C>
+            <C style={r.engineSummarySub}>
+              {w("performance.heapAllocatedSub",{allocated:G.totalAllocMb})}
+            </C>
+          </T>
+        </T>
 
         
-        <View style={perfStyles.logsHeaderRow}>
-          <Text style={perfStyles.logsSectionHeading}>
-            {t('performance.recordedEvents')} ({filteredEvents.length})
-          </Text>
-          {events.length > 0 && (<TouchableScale onPress={clearEvents}>
-              <Text style={perfStyles.clearLink}>{t('common.clear')}</Text>
-            </TouchableScale>)}
-        </View>
-
-        {filteredEvents.length === 0 ? (<View style={perfStyles.emptyCard}>
-            <BoltIcon color={AppColors.amber500} size={30}/>
-            <Text style={perfStyles.emptyTitle}>
-              {search.trim().length > 0 ? 'No Matching Events' : t('performance.emptyTitle')}
-            </Text>
-            <Text style={perfStyles.emptySub}>
-              {search.trim().length > 0
-                ? `No performance events match "${search}"`
-                : t('performance.emptySubtitle')}
-            </Text>
-            {search.trim().length > 0 && (<TouchableScale onPress={() => setSearch('')} style={{
-                    marginTop: 10,
-                    paddingHorizontal: 14,
-                    paddingVertical: 6,
-                    borderRadius: 8,
-                    backgroundColor: AppColors.grayBackground,
-                    borderWidth: 1,
-                    borderColor: AppColors.grayBorderSecondary,
-                }}>
-                <Text style={{ color: AppColors.brandPurple, fontSize: 12, fontFamily: AppFonts.interBold }}>
+        <T style={r.logsHeaderRow}>
+          <C style={r.logsSectionHeading}>
+            {w("performance.recordedEvents")} ({_.length})
+          </C>
+          {re.length>0&&<K onPress={_e}>
+              <C style={r.clearLink}>{w("common.clear")}</C>
+            </K>}
+        </T>
+
+        {_.length===0?<T style={r.emptyCard}>
+            <Te color={e.amber500}size={30}/>
+            <C style={r.emptyTitle}>
+              {W.trim().length>0?"No Matching Events":w("performance.emptyTitle")}
+            </C>
+            <C style={r.emptySub}>
+              {W.trim().length>0?`No performance events match "${W}"`:w("performance.emptySubtitle")}
+            </C>
+            {W.trim().length>0&&<K onPress={()=>te("")}style={{marginTop:10,paddingHorizontal:14,paddingVertical:6,borderRadius:8,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary}}>
+                <C style={{color:e.brandPurple,fontSize:12,fontFamily:k.interBold}}>
                   Clear Search
-                </Text>
-              </TouchableScale>)}
-          </View>) : (filteredEvents.map(event => {
-            const isOptimal = event.severity === 'optimal';
-            const isWarning = event.severity === 'warning';
-            const isCritical = event.severity === 'critical';
-            const isExpanded = !!expandedEventIds[event.id];
-            const badgeBg = isOptimal ? AppColors.greenBg : isWarning ? AppColors.amberBg : AppColors.errorCardBg;
-            const badgeBorder = isOptimal ? AppColors.greenBorder : isWarning ? AppColors.lightOrange : AppColors.errorBorder;
-            const badgeColor = isOptimal ? AppColors.emerald600 : isWarning ? AppColors.amber700 : AppColors.errorColor;
-            return (<TouchableScale key={event.id} onPress={() => toggleEventExpand(event.id)} style={[
-                    perfStyles.eventCard,
-                    isCritical && { borderColor: AppColors.errorBorder, backgroundColor: AppColors.errorCardBg },
-                ]}>
-                <View style={perfStyles.eventTopRow}>
-                  <View style={perfStyles.fpsBadgeGroup}>
-                    <View style={[
-                    perfStyles.fpsBadge,
-                    { backgroundColor: badgeBg, borderColor: badgeBorder },
-                ]}>
-                      <Text style={[perfStyles.fpsBadgeText, { color: badgeColor }]}>
-                        {event.fps} FPS
-                      </Text>
-                    </View>
+                </C>
+              </K>}
+          </T>:_.map(t=>{const S=t.severity==="optimal",B=t.severity==="warning",F=t.severity==="critical",R=!!$e[t.id],z=S?e.greenBg:B?e.amberBg:e.errorCardBg,E=S?e.greenBorder:B?e.lightOrange:e.errorBorder,D=S?e.emerald600:B?e.amber700:e.errorColor;return<K key={t.id}onPress={()=>Oe(t.id)}style={[r.eventCard,F&&{borderColor:e.errorBorder,backgroundColor:e.errorCardBg}]}>
+                <T style={r.eventTopRow}>
+                  <T style={r.fpsBadgeGroup}>
+                    <T style={[r.fpsBadge,{backgroundColor:z,borderColor:E}]}>
+                      <C style={[r.fpsBadgeText,{color:D}]}>
+                        {t.fps} FPS
+                      </C>
+                    </T>
 
                     
-                    <View style={[
-                    perfStyles.droppedBadge,
-                    (event.droppedFrames ?? Math.max(0, 60 - event.fps)) > 0
-                        ? perfStyles.droppedBadgeWarning
-                        : perfStyles.droppedBadgeOptimal,
-                ]}>
-                      <Text style={[
-                    perfStyles.droppedBadgeText,
-                    (event.droppedFrames ?? Math.max(0, 60 - event.fps)) > 0
-                        ? { color: AppColors.red600 }
-                        : { color: AppColors.emerald600 },
-                ]}>
-                        {(event.droppedFrames ?? Math.max(0, 60 - event.fps)) > 0
-                    ? t('performance.droppedFrames', { count: event.droppedFrames ?? Math.max(0, 60 - event.fps) })
-                    : t('performance.zeroDropped')}
-                      </Text>
-                    </View>
+                    <T style={[r.droppedBadge,(t.droppedFrames??Math.max(0,60-t.fps))>0?r.droppedBadgeWarning:r.droppedBadgeOptimal]}>
+                      <C style={[r.droppedBadgeText,(t.droppedFrames??Math.max(0,60-t.fps))>0?{color:e.red600}:{color:e.emerald600}]}>
+                        {(t.droppedFrames??Math.max(0,60-t.fps))>0?w("performance.droppedFrames",{count:t.droppedFrames??Math.max(0,60-t.fps)}):w("performance.zeroDropped")}
+                      </C>
+                    </T>
 
                     
-                    {event.bottleneckThread && (<View style={[perfStyles.bottleneckTag, { flexDirection: 'row', alignItems: 'center', gap: 3 }]}>
-                        {event.bottleneckThread === 'JS Thread' && (<BoltIcon size={10} color={AppColors.warningIconGold}/>)}
-                        <Text style={perfStyles.bottleneckTagText}>
-                          {event.bottleneckThread === 'JS Thread'
-                        ? t('performance.jsBound')
-                        : event.bottleneckThread === 'UI Thread'
-                            ? t('performance.uiBound')
-                            : t('performance.balanced')}
-                        </Text>
-                      </View>)}
-                  </View>
-
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                    <CopyButton value={() => event} label={t('common.copyJson')}/>
-                    <ChevronIcon isExpanded={isExpanded} size={14} color={AppColors.grayTextWeak}/>
-                  </View>
-                </View>
+                    {t.bottleneckThread&&<T style={[r.bottleneckTag,{flexDirection:"row",alignItems:"center",gap:3}]}>
+                        {t.bottleneckThread==="JS Thread"&&<Te size={10}color={e.warningIconGold}/>}
+                        <C style={r.bottleneckTagText}>
+                          {t.bottleneckThread==="JS Thread"?w("performance.jsBound"):t.bottleneckThread==="UI Thread"?w("performance.uiBound"):w("performance.balanced")}
+                        </C>
+                      </T>}
+                  </T>
+
+                  <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                    <Vr value={()=>t}label={w("common.copyJson")}/>
+                    <Gr isExpanded={R}size={14}color={e.grayTextWeak}/>
+                  </T>
+                </T>
 
                 
-                <View style={{ marginTop: 4 }}>
-                  <HighlightText text={event.label} search={search} style={perfStyles.eventLabel} highlightStyle={perfStyles.searchHighlight}/>
-                  <View style={perfStyles.eventMetaRow}>
-                    <Text style={perfStyles.eventMeta}>
-                      {t('performance.msTotal', {
-                    duration: event.durationMs,
-                    time: new Date(event.timestamp).toLocaleTimeString(),
-                })}
-                    </Text>
-                    <Text style={perfStyles.eventMetaDot}>•</Text>
-                    <Text style={[
-                    perfStyles.frameBudgetHint,
-                    event.durationMs > 16.67
-                        ? { color: AppColors.amber800Warm }
-                        : { color: AppColors.emerald600 },
-                ]}>
-                      {t('performance.frameBudgetMs', {
-                    time: event.durationMs,
-                    budget: Number(((event.durationMs / 16.67) * 100).toFixed(0)),
-                })}
-                    </Text>
-                  </View>
-                </View>
+                <T style={{marginTop:4}}>
+                  <Re text={t.label}search={W}style={r.eventLabel}highlightStyle={r.searchHighlight}/>
+                  <T style={r.eventMetaRow}>
+                    <C style={r.eventMeta}>
+                      {w("performance.msTotal",{duration:t.durationMs,time:new Date(t.timestamp).toLocaleTimeString()})}
+                    </C>
+                    <C style={r.eventMetaDot}>•</C>
+                    <C style={[r.frameBudgetHint,t.durationMs>16.67?{color:e.amber800Warm}:{color:e.emerald600}]}>
+                      {w("performance.frameBudgetMs",{time:t.durationMs,budget:Number((t.durationMs/16.67*100).toFixed(0))})}
+                    </C>
+                  </T>
+                </T>
 
                 
-                <View style={perfStyles.frameBarTrack}>
-                  <View style={[
-                    perfStyles.frameBarFill,
-                    {
-                        width: `${Math.min(100, Math.max(10, (event.durationMs / 33.33) * 100))}%`,
-                        backgroundColor: badgeColor,
-                    },
-                ]}/>
-                </View>
+                <T style={r.frameBarTrack}>
+                  <T style={[r.frameBarFill,{width:`${Math.min(100,Math.max(10,t.durationMs/33.33*100))}%`,backgroundColor:D}]}/>
+                </T>
 
-                <HighlightText text={event.detail} search={search} style={perfStyles.eventDetail} highlightStyle={perfStyles.searchHighlight}/>
+                <Re text={t.detail}search={W}style={r.eventDetail}highlightStyle={r.searchHighlight}/>
 
                 
-                {isExpanded && (<View style={perfStyles.expandedDetailBox}>
+                {R&&<T style={r.expandedDetailBox}>
                     
-                    {(event.screenName || event.source) && (<View style={perfStyles.sourceRow}>
-                        <Text style={perfStyles.sourceTag}>{t('performance.screenContext')}</Text>
-                        <Text style={perfStyles.sourceText} numberOfLines={1}>
-                          {event.screenName || event.source}
-                        </Text>
-                      </View>)}
+                    {(t.screenName||t.source)&&<T style={r.sourceRow}>
+                        <C style={r.sourceTag}>{w("performance.screenContext")}</C>
+                        <C style={r.sourceText}numberOfLines={1}>
+                          {t.screenName||t.source}
+                        </C>
+                      </T>}
 
                     
-                    <View style={perfStyles.fpsMetricsGrid}>
-                      <View style={perfStyles.fpsMetricItem}>
-                        <Text style={perfStyles.fpsMetricLabel}>{t('performance.target60Fps', { fps: event.fps })}</Text>
-                        <Text style={[perfStyles.fpsMetricVal, { color: badgeColor }]}>
-                          {event.fps} FPS
-                        </Text>
-                      </View>
-                      <View style={perfStyles.fpsMetricItem}>
-                        <Text style={perfStyles.fpsMetricLabel}>{t('performance.frameDuration')}</Text>
-                        <Text style={perfStyles.fpsMetricVal}>
-                          {event.durationMs} ms
-                        </Text>
-                      </View>
-                      <View style={perfStyles.fpsMetricItem}>
-                        <Text style={perfStyles.fpsMetricLabel}>{t('performance.jankRate')}</Text>
-                        <Text style={[
-                        perfStyles.fpsMetricVal,
-                        (event.droppedFrames ?? 0) > 0 ? { color: AppColors.red600 } : { color: AppColors.emerald600 },
-                    ]}>
-                          {event.droppedFrames ?? Math.max(0, 60 - event.fps)} frames
-                        </Text>
-                      </View>
-                      <View style={perfStyles.fpsMetricItem}>
-                        <Text style={perfStyles.fpsMetricLabel}>{t('performance.bottleneck')}</Text>
-                        <Text style={perfStyles.fpsMetricVal}>
-                          {event.bottleneckThread || t('performance.balanced')}
-                        </Text>
-                      </View>
-                    </View>
+                    <T style={r.fpsMetricsGrid}>
+                      <T style={r.fpsMetricItem}>
+                        <C style={r.fpsMetricLabel}>{w("performance.target60Fps",{fps:t.fps})}</C>
+                        <C style={[r.fpsMetricVal,{color:D}]}>
+                          {t.fps} FPS
+                        </C>
+                      </T>
+                      <T style={r.fpsMetricItem}>
+                        <C style={r.fpsMetricLabel}>{w("performance.frameDuration")}</C>
+                        <C style={r.fpsMetricVal}>
+                          {t.durationMs} ms
+                        </C>
+                      </T>
+                      <T style={r.fpsMetricItem}>
+                        <C style={r.fpsMetricLabel}>{w("performance.jankRate")}</C>
+                        <C style={[r.fpsMetricVal,(t.droppedFrames??0)>0?{color:e.red600}:{color:e.emerald600}]}>
+                          {t.droppedFrames??Math.max(0,60-t.fps)} frames
+                        </C>
+                      </T>
+                      <T style={r.fpsMetricItem}>
+                        <C style={r.fpsMetricLabel}>{w("performance.bottleneck")}</C>
+                        <C style={r.fpsMetricVal}>
+                          {t.bottleneckThread||w("performance.balanced")}
+                        </C>
+                      </T>
+                    </T>
 
                     
-                    {event.breakdown && (<View style={perfStyles.breakdownGrid}>
-                        <View style={perfStyles.breakdownCol}>
-                          <Text style={perfStyles.breakdownLabel}>{t('performance.jsThread')}</Text>
-                          <Text style={perfStyles.breakdownVal}>
-                            {event.breakdown.jsTimeMs} ms
-                          </Text>
-                        </View>
-                        <View style={perfStyles.breakdownCol}>
-                          <Text style={perfStyles.breakdownLabel}>{t('performance.uiThread')}</Text>
-                          <Text style={perfStyles.breakdownVal}>
-                            {event.breakdown.uiTimeMs} ms
-                          </Text>
-                        </View>
-                        {event.breakdown.bridgeLatencyMs != null && (<View style={perfStyles.breakdownCol}>
-                            <Text style={perfStyles.breakdownLabel}>{t('performance.jsiLatency')}</Text>
-                            <Text style={perfStyles.breakdownVal}>
-                              {event.breakdown.bridgeLatencyMs} ms
-                            </Text>
-                          </View>)}
-                        {event.heapDeltaKb != null && (<View style={perfStyles.breakdownCol}>
-                            <Text style={perfStyles.breakdownLabel}>{t('performance.heapImpact')}</Text>
-                            <Text style={[
-                                perfStyles.breakdownVal,
-                                { color: event.heapDeltaKb > 0 ? AppColors.amber700 : AppColors.emerald600 },
-                            ]}>
-                              {event.heapDeltaKb > 0 ? `+${event.heapDeltaKb}` : event.heapDeltaKb} KB
-                            </Text>
-                          </View>)}
-                      </View>)}
+                    {t.breakdown&&<T style={r.breakdownGrid}>
+                        <T style={r.breakdownCol}>
+                          <C style={r.breakdownLabel}>{w("performance.jsThread")}</C>
+                          <C style={r.breakdownVal}>
+                            {t.breakdown.jsTimeMs} ms
+                          </C>
+                        </T>
+                        <T style={r.breakdownCol}>
+                          <C style={r.breakdownLabel}>{w("performance.uiThread")}</C>
+                          <C style={r.breakdownVal}>
+                            {t.breakdown.uiTimeMs} ms
+                          </C>
+                        </T>
+                        {t.breakdown.bridgeLatencyMs!=null&&<T style={r.breakdownCol}>
+                            <C style={r.breakdownLabel}>{w("performance.jsiLatency")}</C>
+                            <C style={r.breakdownVal}>
+                              {t.breakdown.bridgeLatencyMs} ms
+                            </C>
+                          </T>}
+                        {t.heapDeltaKb!=null&&<T style={r.breakdownCol}>
+                            <C style={r.breakdownLabel}>{w("performance.heapImpact")}</C>
+                            <C style={[r.breakdownVal,{color:t.heapDeltaKb>0?e.amber700:e.emerald600}]}>
+                              {t.heapDeltaKb>0?`+${t.heapDeltaKb}`:t.heapDeltaKb} KB
+                            </C>
+                          </T>}
+                      </T>}
 
                     
-                    {event.advice && (<View style={perfStyles.adviceCard}>
-                        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-                          <LightbulbIcon color={AppColors.purpleShade700} size={12}/>
-                          <Text style={perfStyles.adviceHeading}>{t('performance.optimizationTip')}</Text>
-                        </View>
-                        <Text style={perfStyles.adviceBodyText}>{event.advice}</Text>
-                      </View>)}
-                  </View>)}
-              </TouchableScale>);
-        }))}
-
-        <EndOfListFooter count={filteredEvents.length} label={t('performance.recordedEvents')}/>
-      </ScrollView>
-    </View>);
-});
-const perfStyles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: AppColors.grayBackground,
-    },
-    headerBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-        backgroundColor: AppColors.white,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-        gap: 8,
-    },
-    searchBox: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 8,
-        paddingHorizontal: 8,
-        height: 36,
-        gap: 6,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    searchInput: {
-        flex: 1,
-        fontFamily: AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-        paddingVertical: 0,
-    },
-    recordToggleBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        paddingHorizontal: 8,
-        paddingVertical: 6,
-        borderRadius: 7,
-        borderWidth: 1,
-    },
-    recordToggleActive: {
-        backgroundColor: `${AppColors.errorColor}14`,
-        borderColor: `${AppColors.errorColor}30`,
-    },
-    recordToggleInactive: {
-        backgroundColor: AppColors.graySurface,
-        borderColor: AppColors.dividerColor,
-    },
-    recordingDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-    },
-    recordToggleText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-    },
-    categoryScrollWrapper: {
-        backgroundColor: AppColors.white,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-        height: 42,
-    },
-    categoryScrollView: {
-        flexGrow: 0,
-        height: 42,
-    },
-    categoryScroll: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingHorizontal: 12,
-        height: 42,
-    },
-    categoryChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingHorizontal: 12,
-        height: 28,
-        borderRadius: 14,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    categoryChipActive: {
-        backgroundColor: AppColors.brandPurple,
-        borderColor: AppColors.brandPurple,
-    },
-    categoryChipText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayTextStrong,
-    },
-    categoryChipTextActive: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.white,
-    },
-    scrollBody: {
-        flex: 1,
-    },
-    scrollContent: {
-        padding: 12,
-        gap: 10,
-    },
-    heroCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 12,
-        padding: 14,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        shadowColor: AppColors.black,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.05,
-        shadowRadius: 3,
-        elevation: 1,
-    },
-    heroHeaderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 10,
-    },
-    heroTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-    },
-    heroSubTitle: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 9.5,
-        color: AppColors.grayTextWeak,
-        marginTop: 1,
-    },
-    scorePill: {
-        paddingHorizontal: 8,
-        paddingVertical: 3,
-        borderRadius: 6,
-    },
-    scorePillText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-    },
-    primaryFpsRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingVertical: 6,
-    },
-    fpsBigNumberBox: {
-        flexDirection: 'row',
-        alignItems: 'baseline',
-        gap: 4,
-        minWidth: 80,
-    },
-    fpsBigNumber: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 42,
-        lineHeight: 48,
-        letterSpacing: -1,
-        minWidth: 54,
-    },
-    fpsUnit: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors.grayTextWeak,
-    },
-    fpsStatsGrid: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    statItem: {
-        alignItems: 'center',
-        minWidth: 50,
-    },
-    statLabel: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    statValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-        marginTop: 2,
-        textAlign: 'center',
-    },
-    graphScrubTooltip: {
-        alignSelf: 'center',
-        backgroundColor: AppColors.primaryBlack,
-        paddingHorizontal: 8,
-        paddingVertical: 3,
-        borderRadius: 6,
-        marginBottom: 4,
-    },
-    graphScrubTooltipText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors.white,
-    },
-    svgGraphContainer: {
-        width: '100%',
-        height: 64,
-        marginTop: 6,
-        position: 'relative',
-        overflow: 'hidden',
-        borderRadius: 8,
-    },
-    svgTouchOverlay: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        flexDirection: 'row',
-    },
-    svgTouchCol: {
-        flex: 1,
-        height: '100%',
-    },
-    histogramContainer: {
-        gap: 8,
-        marginTop: 4,
-    },
-    histogramRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    histogramLabelCol: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        width: 140,
-    },
-    histogramLabelText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayTextStrong,
-    },
-    histogramBarCol: {
-        flex: 1,
-    },
-    histogramTrack: {
-        height: 8,
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 4,
-        overflow: 'hidden',
-    },
-    histogramBarFill: {
-        height: '100%',
-        borderRadius: 4,
-    },
-    histogramStatsCol: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        minWidth: 52,
-        justifyContent: 'flex-end',
-    },
-    histogramPercentText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-    },
-    histogramCountText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 9.5,
-        color: AppColors.grayTextWeak,
-    },
-    sparklineFooter: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginTop: 6,
-    },
-    sparklineFooterText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    sparklineFooterTarget: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.emerald600,
-    },
-    budgetCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 12,
-        padding: 12,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        gap: 8,
-    },
-    budgetHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    budgetTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-    },
-    budgetHeadroom: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.emerald600,
-    },
-    budgetBarContainer: {
-        flexDirection: 'row',
-        height: 8,
-        borderRadius: 4,
-        overflow: 'hidden',
-        backgroundColor: AppColors.grayBackground,
-        gap: 2,
-    },
-    budgetBarSegment: {
-        height: '100%',
-        borderRadius: 2,
-    },
-    budgetLegendGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 10,
-        marginTop: 2,
-    },
-    legendItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-    },
-    legendDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-    },
-    legendText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors.grayTextStrong,
-    },
-    engineSummaryGrid: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    engineSummaryCard: {
-        flex: 1,
-        backgroundColor: AppColors.white,
-        borderRadius: 10,
-        padding: 10,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    engineSummaryLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    engineSummaryValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11.5,
-        color: AppColors.primaryBlack,
-        marginTop: 2,
-    },
-    engineSummarySub: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 9.5,
-        color: AppColors.grayTextWeak,
-        marginTop: 1,
-    },
-    logsHeaderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginTop: 4,
-    },
-    logsSectionHeading: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-    },
-    clearLink: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11.5,
-        color: AppColors.purple,
-    },
-    eventCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 10,
-        padding: 10,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        gap: 6,
-    },
-    eventTopRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    fpsBadgeGroup: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flexWrap: 'wrap',
-    },
-    fpsBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 5,
-        borderWidth: 1,
-    },
-    fpsBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-    },
-    droppedBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 5,
-        borderWidth: 1,
-    },
-    droppedBadgeWarning: {
-        backgroundColor: AppColors.red100,
-        borderColor: AppColors.errorBorder,
-    },
-    droppedBadgeOptimal: {
-        backgroundColor: AppColors.green100,
-        borderColor: AppColors.greenBorder,
-    },
-    droppedBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-    },
-    bottleneckTag: {
-        backgroundColor: AppColors.purpleShade50,
-        paddingHorizontal: 5,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: AppColors.purpleTint2,
-    },
-    bottleneckTagText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 9.5,
-        color: AppColors.purple,
-    },
-    eventMetaRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        marginTop: 2,
-        flexWrap: 'wrap',
-    },
-    eventMetaDot: {
-        fontSize: 9,
-        color: AppColors.grayTextWeak,
-    },
-    frameBudgetHint: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-    },
-    frameBarTrack: {
-        height: 4,
-        borderRadius: 2,
-        backgroundColor: AppColors.graySurface,
-        overflow: 'hidden',
-        marginVertical: 4,
-    },
-    frameBarFill: {
-        height: '100%',
-        borderRadius: 2,
-    },
-    fpsMetricsGrid: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.white,
-        borderRadius: 6,
-        padding: 6,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        justifyContent: 'space-between',
-        gap: 4,
-    },
-    fpsMetricItem: {
-        alignItems: 'center',
-        flex: 1,
-    },
-    fpsMetricLabel: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 8.5,
-        color: AppColors.grayTextWeak,
-        textAlign: 'center',
-    },
-    fpsMetricVal: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: AppColors.primaryBlack,
-        marginTop: 1,
-        textAlign: 'center',
-    },
-    eventLabel: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-    },
-    eventMeta: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-        marginTop: 1,
-    },
-    eventDetail: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayTextStrong,
-        lineHeight: 15,
-    },
-    expandChevron: {
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-        marginLeft: 2,
-    },
-    expandedDetailBox: {
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 8,
-        padding: 8,
-        marginTop: 4,
-        gap: 6,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    sourceRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    sourceTag: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 8.5,
-        color: AppColors.purple,
-        backgroundColor: `${AppColors.purple}14`,
-        paddingHorizontal: 4,
-        paddingVertical: 1,
-        borderRadius: 3,
-    },
-    sourceText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.grayTextStrong,
-        flex: 1,
-    },
-    breakdownGrid: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.white,
-        borderRadius: 6,
-        padding: 6,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        justifyContent: 'space-between',
-    },
-    breakdownCol: {
-        alignItems: 'center',
-        flex: 1,
-    },
-    breakdownLabel: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 9,
-        color: AppColors.grayTextWeak,
-    },
-    breakdownVal: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.primaryBlack,
-        marginTop: 1,
-    },
-    adviceCard: {
-        backgroundColor: AppColors.purpleTintBg,
-        borderRadius: 6,
-        padding: 6,
-        borderWidth: 1,
-        borderColor: AppColors.purpleBorder,
-    },
-    adviceHeading: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors.purpleShade700,
-    },
-    adviceBodyText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10.5,
-        color: AppColors.purple,
-        lineHeight: 14,
-        marginTop: 1,
-    },
-    searchHighlight: {
-        backgroundColor: AppColors.yellowHighlight,
-        color: AppColors.amber800,
-        fontFamily: AppFonts.interBold,
-    },
-    emptyCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 12,
-        padding: 24,
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 8,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    emptyTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors.primaryBlack,
-    },
-    emptySub: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11.5,
-        color: AppColors.grayTextWeak,
-        textAlign: 'center',
-        lineHeight: 16,
-    },
-});
-export default PerformanceTab;
+                    {t.advice&&<T style={r.adviceCard}>
+                        <T style={{flexDirection:"row",alignItems:"center",gap:5}}>
+                          <Hr color={e.purpleShade700}size={12}/>
+                          <C style={r.adviceHeading}>{w("performance.optimizationTip")}</C>
+                        </T>
+                        <C style={r.adviceBodyText}>{t.advice}</C>
+                      </T>}
+                  </T>}
+              </K>})}
+
+        <Rr count={_.length}label={w("performance.recordedEvents")}/>
+      </Se>
+    </T>}),r=tr.create({container:{flex:1,backgroundColor:e.grayBackground},headerBar:{flexDirection:"row",alignItems:"center",paddingHorizontal:12,paddingVertical:8,backgroundColor:e.white,borderBottomWidth:1,borderBottomColor:e.dividerColor,gap:8},searchBox:{flex:1,flexDirection:"row",alignItems:"center",backgroundColor:e.grayBackground,borderRadius:8,paddingHorizontal:8,height:36,gap:6,borderWidth:1,borderColor:e.dividerColor},searchInput:{flex:1,fontFamily:k.interRegular,fontSize:12,color:e.primaryBlack,paddingVertical:0},recordToggleBtn:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:8,paddingVertical:6,borderRadius:7,borderWidth:1},recordToggleActive:{backgroundColor:`${e.errorColor}14`,borderColor:`${e.errorColor}30`},recordToggleInactive:{backgroundColor:e.graySurface,borderColor:e.dividerColor},recordingDot:{width:6,height:6,borderRadius:3},recordToggleText:{fontFamily:k.interBold,fontSize:11},categoryScrollWrapper:{backgroundColor:e.white,borderBottomWidth:1,borderBottomColor:e.dividerColor,height:42},categoryScrollView:{flexGrow:0,height:42},categoryScroll:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:12,height:42},categoryChip:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingHorizontal:12,height:28,borderRadius:14,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.dividerColor},categoryChipActive:{backgroundColor:e.brandPurple,borderColor:e.brandPurple},categoryChipText:{fontFamily:k.interMedium,fontSize:11,color:e.grayTextStrong},categoryChipTextActive:{fontFamily:k.interBold,color:e.white},scrollBody:{flex:1},scrollContent:{padding:12,gap:10},heroCard:{backgroundColor:e.white,borderRadius:12,padding:14,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.black,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:3,elevation:1},heroHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:10},heroTitle:{fontFamily:k.interBold,fontSize:13,color:e.primaryBlack},heroSubTitle:{fontFamily:k.interRegular,fontSize:9.5,color:e.grayTextWeak,marginTop:1},scorePill:{paddingHorizontal:8,paddingVertical:3,borderRadius:6},scorePillText:{fontFamily:k.interBold,fontSize:10.5},primaryFpsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:6},fpsBigNumberBox:{flexDirection:"row",alignItems:"baseline",gap:4,minWidth:80},fpsBigNumber:{fontFamily:k.interBold,fontSize:42,lineHeight:48,letterSpacing:-1,minWidth:54},fpsUnit:{fontFamily:k.interBold,fontSize:14,color:e.grayTextWeak},fpsStatsGrid:{flexDirection:"row",alignItems:"center",gap:8},statItem:{alignItems:"center",minWidth:50},statLabel:{fontFamily:k.interRegular,fontSize:10,color:e.grayTextWeak},statValue:{fontFamily:k.interBold,fontSize:13,color:e.primaryBlack,marginTop:2,textAlign:"center"},graphScrubTooltip:{alignSelf:"center",backgroundColor:e.primaryBlack,paddingHorizontal:8,paddingVertical:3,borderRadius:6,marginBottom:4},graphScrubTooltipText:{fontFamily:k.interBold,fontSize:10,color:e.white},svgGraphContainer:{width:"100%",height:64,marginTop:6,position:"relative",overflow:"hidden",borderRadius:8},svgTouchOverlay:{position:"absolute",top:0,left:0,right:0,bottom:0,flexDirection:"row"},svgTouchCol:{flex:1,height:"100%"},histogramContainer:{gap:8,marginTop:4},histogramRow:{flexDirection:"row",alignItems:"center",gap:8},histogramLabelCol:{flexDirection:"row",alignItems:"center",gap:6,width:140},histogramLabelText:{fontFamily:k.interMedium,fontSize:10,color:e.grayTextStrong},histogramBarCol:{flex:1},histogramTrack:{height:8,backgroundColor:e.grayBackground,borderRadius:4,overflow:"hidden"},histogramBarFill:{height:"100%",borderRadius:4},histogramStatsCol:{flexDirection:"row",alignItems:"center",gap:4,minWidth:52,justifyContent:"flex-end"},histogramPercentText:{fontFamily:k.interBold,fontSize:10.5},histogramCountText:{fontFamily:k.interRegular,fontSize:9.5,color:e.grayTextWeak},sparklineFooter:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:6},sparklineFooterText:{fontFamily:k.interRegular,fontSize:10,color:e.grayTextWeak},sparklineFooterTarget:{fontFamily:k.interMedium,fontSize:10,color:e.emerald600},budgetCard:{backgroundColor:e.white,borderRadius:12,padding:12,borderWidth:1,borderColor:e.dividerColor,gap:8},budgetHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},budgetTitle:{fontFamily:k.interBold,fontSize:12.5,color:e.primaryBlack},budgetHeadroom:{fontFamily:k.interBold,fontSize:11,color:e.emerald600},budgetBarContainer:{flexDirection:"row",height:8,borderRadius:4,overflow:"hidden",backgroundColor:e.grayBackground,gap:2},budgetBarSegment:{height:"100%",borderRadius:2},budgetLegendGrid:{flexDirection:"row",flexWrap:"wrap",gap:10,marginTop:2},legendItem:{flexDirection:"row",alignItems:"center",gap:4},legendDot:{width:6,height:6,borderRadius:3},legendText:{fontFamily:k.interRegular,fontSize:10,color:e.grayTextStrong},engineSummaryGrid:{flexDirection:"row",alignItems:"center",gap:8},engineSummaryCard:{flex:1,backgroundColor:e.white,borderRadius:10,padding:10,borderWidth:1,borderColor:e.dividerColor},engineSummaryLabel:{fontFamily:k.interMedium,fontSize:10,color:e.grayTextWeak},engineSummaryValue:{fontFamily:k.interBold,fontSize:11.5,color:e.primaryBlack,marginTop:2},engineSummarySub:{fontFamily:k.interRegular,fontSize:9.5,color:e.grayTextWeak,marginTop:1},logsHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:4},logsSectionHeading:{fontFamily:k.interBold,fontSize:13,color:e.primaryBlack},clearLink:{fontFamily:k.interBold,fontSize:11.5,color:e.purple},eventCard:{backgroundColor:e.white,borderRadius:10,padding:10,borderWidth:1,borderColor:e.dividerColor,gap:6},eventTopRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},fpsBadgeGroup:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},fpsBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:5,borderWidth:1},fpsBadgeText:{fontFamily:k.interBold,fontSize:10},droppedBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:5,borderWidth:1},droppedBadgeWarning:{backgroundColor:e.red100,borderColor:e.errorBorder},droppedBadgeOptimal:{backgroundColor:e.green100,borderColor:e.greenBorder},droppedBadgeText:{fontFamily:k.interBold,fontSize:9.5},bottleneckTag:{backgroundColor:e.purpleShade50,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.purpleTint2},bottleneckTagText:{fontFamily:k.interMedium,fontSize:9.5,color:e.purple},eventMetaRow:{flexDirection:"row",alignItems:"center",gap:6,marginTop:2,flexWrap:"wrap"},eventMetaDot:{fontSize:9,color:e.grayTextWeak},frameBudgetHint:{fontFamily:k.interMedium,fontSize:10},frameBarTrack:{height:4,borderRadius:2,backgroundColor:e.graySurface,overflow:"hidden",marginVertical:4},frameBarFill:{height:"100%",borderRadius:2},fpsMetricsGrid:{flexDirection:"row",alignItems:"center",backgroundColor:e.white,borderRadius:6,padding:6,borderWidth:1,borderColor:e.dividerColor,justifyContent:"space-between",gap:4},fpsMetricItem:{alignItems:"center",flex:1},fpsMetricLabel:{fontFamily:k.interRegular,fontSize:8.5,color:e.grayTextWeak,textAlign:"center"},fpsMetricVal:{fontFamily:k.interBold,fontSize:10.5,color:e.primaryBlack,marginTop:1,textAlign:"center"},eventLabel:{fontFamily:k.interBold,fontSize:12,color:e.primaryBlack},eventMeta:{fontFamily:k.interRegular,fontSize:10,color:e.grayTextWeak,marginTop:1},eventDetail:{fontFamily:k.interRegular,fontSize:11,color:e.grayTextStrong,lineHeight:15},expandChevron:{fontSize:10,color:e.grayTextWeak,marginLeft:2},expandedDetailBox:{backgroundColor:e.grayBackground,borderRadius:8,padding:8,marginTop:4,gap:6,borderWidth:1,borderColor:e.dividerColor},sourceRow:{flexDirection:"row",alignItems:"center",gap:6},sourceTag:{fontFamily:k.interBold,fontSize:8.5,color:e.purple,backgroundColor:`${e.purple}14`,paddingHorizontal:4,paddingVertical:1,borderRadius:3},sourceText:{fontFamily:k.interMedium,fontSize:10.5,color:e.grayTextStrong,flex:1},breakdownGrid:{flexDirection:"row",alignItems:"center",backgroundColor:e.white,borderRadius:6,padding:6,borderWidth:1,borderColor:e.dividerColor,justifyContent:"space-between"},breakdownCol:{alignItems:"center",flex:1},breakdownLabel:{fontFamily:k.interRegular,fontSize:9,color:e.grayTextWeak},breakdownVal:{fontFamily:k.interBold,fontSize:11,color:e.primaryBlack,marginTop:1},adviceCard:{backgroundColor:e.purpleTintBg,borderRadius:6,padding:6,borderWidth:1,borderColor:e.purpleBorder},adviceHeading:{fontFamily:k.interBold,fontSize:10,color:e.purpleShade700},adviceBodyText:{fontFamily:k.interRegular,fontSize:10.5,color:e.purple,lineHeight:14,marginTop:1},searchHighlight:{backgroundColor:e.yellowHighlight,color:e.amber800,fontFamily:k.interBold},emptyCard:{backgroundColor:e.white,borderRadius:12,padding:24,alignItems:"center",justifyContent:"center",gap:8,borderWidth:1,borderColor:e.dividerColor},emptyTitle:{fontFamily:k.interBold,fontSize:14,color:e.primaryBlack},emptySub:{fontFamily:k.interRegular,fontSize:11.5,color:e.grayTextWeak,textAlign:"center",lineHeight:16}});export default Qr;