react-native-inapp-inspector 2.3.24 → 2.4.0

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

@@ -1,27 +0,0 @@
-import React from 'react';
-export interface PerformanceEvent {
-    id: string;
-    timestamp: number;
-    type: 'fps_drop' | 'slow_render' | 'transition' | 'memory' | 'network' | 'bridge' | 'touch';
-    category: 'render' | 'navigation' | 'memory' | 'io' | 'bridge';
-    fps: number;
-    durationMs: number;
-    droppedFrames?: number;
-    frameTimeMs?: number;
-    frameBudgetPct?: number;
-    bottleneckThread?: 'JS Thread' | 'UI Thread' | 'Bridge' | 'Balanced';
-    screenName?: string;
-    label: string;
-    detail: string;
-    source?: string;
-    breakdown?: {
-        jsTimeMs: number;
-        uiTimeMs: number;
-        bridgeLatencyMs?: number;
-    };
-    heapDeltaKb?: number;
-    advice?: string;
-    severity: 'optimal' | 'warning' | 'critical';
-}
-declare const PerformanceTab: React.MemoExoticComponent<() => React.JSX.Element>;
-export default PerformanceTab;

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

@@ -1,454 +0,0 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(r,i,g,s){s===void 0&&(s=g);var d=Object.getOwnPropertyDescriptor(i,g);(!d||("get"in d?!i.__esModule:d.writable||d.configurable))&&(d={enumerable:!0,get:function(){return i[g]}}),Object.defineProperty(r,s,d)}):(function(r,i,g,s){s===void 0&&(s=g),r[s]=i[g]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(r,i){Object.defineProperty(r,"default",{enumerable:!0,value:i})}):function(r,i){r.default=i}),__importStar=this&&this.__importStar||(function(){var r=function(i){return r=Object.getOwnPropertyNames||function(g){var s=[];for(var d in g)Object.prototype.hasOwnProperty.call(g,d)&&(s[s.length]=d);return s},r(i)};return function(i){if(i&&i.__esModule)return i;var g={};if(i!=null)for(var s=r(i),d=0;d<s.length;d++)s[d]!=="default"&&__createBinding(g,i,s[d]);return __setModuleDefault(g,i),g}})(),__importDefault=this&&this.__importDefault||function(r){return r&&r.__esModule?r:{default:r}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_svg_1=__importStar(require("react-native-svg")),TouchableScale_1=__importDefault(require("../TouchableScale")),CopyButton_1=__importDefault(require("../CopyButton")),HighlightText_1=__importDefault(require("../HighlightText")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),FeatureUnderDevNotice_1=__importDefault(require("./FeatureUnderDevNotice")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),i18n_1=require("../../i18n"),helpers_1=require("../../helpers"),NetworkIcons_1=require("../NetworkIcons"),performanceTracker_1=require("../../customHooks/performanceTracker"),NativeInspector_1=require("../../native/NativeInspector"),telemetry_1=require("../../helpers/telemetry"),PerformanceTab=react_1.default.memo(()=>{const{t:r}=(0,i18n_1.useTranslation)(),[i,g]=(0,react_1.useState)(!0),[s,d]=(0,react_1.useState)(60),[W,N]=(0,react_1.useState)(57),[ae,P]=(0,react_1.useState)(60),[m,H]=(0,react_1.useState)(59),[L,j]=(0,react_1.useState)(4820),[E,O]=(0,react_1.useState)(4),[S,$]=(0,react_1.useState)(1.2),[G,q]=(0,react_1.useState)({"perf-1":!0}),J=e=>{q(t=>({...t,[e]:!t[e]}))},[h,K]=(0,react_1.useState)([60,59,60,60,58,60,59,60,60,60,57,60,59,60,60,58,60,60,59,60]),[M,U]=(0,react_1.useState)(()=>(0,performanceTracker_1.getPerformanceEvents)()),[x,Y]=(0,react_1.useState)("ALL"),[f,I]=(0,react_1.useState)("");(0,react_1.useEffect)(()=>(0,performanceTracker_1.subscribePerformanceEvents)(t=>{U(t)}),[]);const R=(0,react_1.useRef)(Date.now()),k=(0,react_1.useRef)(null),[y,X]=(0,react_1.useState)(null);(0,react_1.useEffect)(()=>{let e=!0;const t=async()=>{const a=await(0,NativeInspector_1.getNativeSystemMetrics)();e&&a&&X(a)};t();const o=setInterval(t,2e3);return()=>{e=!1,clearInterval(o)}},[]),(0,react_1.useEffect)(()=>{if((0,NativeInspector_1.isNativeModuleAvailable)())return(0,NativeInspector_1.startNativeFpsMonitoring)(),()=>{(0,NativeInspector_1.stopNativeFpsMonitoring)()}},[]),(0,react_1.useEffect)(()=>{if(!i)return;let e=!0,t=0,o=0,a=Date.now();const c=async()=>{if(!e)return;const p=Date.now(),T=p-R.current;R.current=p;const u=Math.max(0,T-16.67);if(u>o&&(o=u),t++,p-a>=1e3){const A=p-a;let l=Math.min(120,Math.max(0,Math.round(t*1e3/A)));if((0,NativeInspector_1.isNativeModuleAvailable)())try{const n=await(0,NativeInspector_1.getNativeFpsMetrics)();n&&n.fps>0&&(l=Math.round(n.fps))}catch{}if(d(l),N(n=>Math.min(n,l)),P(n=>Math.max(n,l)),j(n=>n+t),$(Number(o.toFixed(1))),l<55&&O(n=>n+1),K(n=>{const V=[...n.slice(-19),l],re=V.reduce((te,oe)=>te+oe,0);return H(Math.round(re/V.length)),V}),l<50){const n=(1e3/l).toFixed(1);(0,performanceTracker_1.logPerformanceEvent)({type:"fps_drop",category:"render",fps:l,durationMs:Number(n),label:r("performance.liveFpsDip",{fps:l}),detail:r("performance.liveFpsDipDetail",{duration:n}),source:r("performance.uiRenderThread"),breakdown:{jsTimeMs:Number((1e3/l*.65).toFixed(1)),uiTimeMs:Number((1e3/l*.35).toFixed(1))},advice:r("performance.liveFpsDipAdvice"),severity:l<30?"critical":"warning"})}t=0,o=0,a=p}k.current=requestAnimationFrame(c)};return R.current=Date.now(),k.current=requestAnimationFrame(c),()=>{e=!1,k.current&&cancelAnimationFrame(k.current)}},[i]);const F=(0,react_1.useMemo)(()=>M.filter(e=>{let t=!0;if(f&&f.trim().length>0){const a=f.trim().toLowerCase().split(/\s+/).filter(Boolean),c=[e.label||"",e.detail||"",e.source||"",e.category||"",e.severity||"",e.bottleneckThread||""].join(" ").toLowerCase();t=a.every(p=>c.includes(p))}const o=x==="ALL"?!0:x==="JANKY"?e.severity==="warning"||e.severity==="critical":x==="NAVIGATION"?e.category==="navigation":x==="RENDER"?e.category==="render":x==="MEMORY"?e.category==="memory":e.category==="io"||e.category==="bridge";return t&&o}),[M,f,x]),z=(0,react_1.useMemo)(()=>m>=58?{score:"98/100",grade:r("performance.excellent"),color:AppColors_1.AppColors.emerald600,bg:AppColors_1.AppColors.greenBg}:m>=50?{score:"84/100",grade:r("performance.good"),color:AppColors_1.AppColors.firebaseOrange,bg:AppColors_1.AppColors.amberBg}:{score:"58/100",grade:r("performance.needsOptimization"),color:AppColors_1.AppColors.errorColor,bg:AppColors_1.AppColors.errorCardBg},[m,r]),w=(0,react_1.useMemo)(()=>{const e=(0,helpers_1.getRuntimeDiagnostics)(),t={hermes:r("performance.hermesAot"),v8:r("performance.v8Jit"),jsc:r("performance.jscEngine")},o={hermes:r("performance.bytecodeCompiled"),v8:r("performance.jitEngine"),jsc:r("performance.webkitEngine")},a={fabric:r("performance.fabricJsi"),paper:r("performance.paperBridge")},c={fabric:r("performance.directCppBindings"),paper:r("performance.asyncJsonBridge")};return{jsEngineName:t[e.engineType],jsEngineSub:o[e.engineType],uiArchName:a[e.archType],uiArchSub:c[e.archType],usedHeapMb:e.usedHeapMb,totalAllocMb:e.totalAllocMb}},[r]),C=(0,react_1.useMemo)(()=>{const e=m>0?1e3/m:16.67,t=Number(Math.max(1,Math.min(e*.45,2+S)).toFixed(1)),o=Number(Math.max(1,e*.2).toFixed(1)),a=Number(Math.max(1,e*.25).toFixed(1)),c=t+o+a,p=Math.max(0,Number((16.67-c).toFixed(1))),T=Math.max(0,Math.min(100,Math.round(p/16.67*100)));return{jsTime:t,layoutTime:o,renderTime:a,freeTime:p,headroomPercent:T}},[m,S]),[v,Z]=(0,react_1.useState)(null),B=320,_=64,b=(0,react_1.useMemo)(()=>{const e=h.length>0?h:[60,60],t=B/Math.max(1,e.length-1),o=e.map((u,A)=>{const l=Math.max(0,Math.min(60,u)),n=Number((A*t).toFixed(1)),V=Number((_-l/60*(_-14)-6).toFixed(1));return{x:n,y:V,val:u}});let a=`M ${o[0].x} ${o[0].y}`;for(let u=0;u<o.length-1;u++){const A=o[u],l=o[u+1],n=Number(((A.x+l.x)/2).toFixed(1));a+=` C ${n} ${A.y}, ${n} ${l.y}, ${l.x} ${l.y}`}const c=o[o.length-1],p=o[0],T=`${a} L ${c.x} ${_} L ${p.x} ${_} Z`;return{linePath:a,areaPath:T,coords:o}},[h]),Q=(0,react_1.useMemo)(()=>{let e=0,t=0,o=0,a=0;h.forEach(p=>{p>=55?e++:p>=30?t++:p>=20?o++:a++});const c=Math.max(1,h.length);return[{key:"optimal",label:r("performance.optimalBucket"),count:e,percent:Number((e/c*100).toFixed(0)),color:AppColors_1.AppColors.emerald500,bgColor:AppColors_1.AppColors.emerald100},{key:"minorJank",label:r("performance.minorJankBucket"),count:t,percent:Number((t/c*100).toFixed(0)),color:AppColors_1.AppColors.amber500,bgColor:AppColors_1.AppColors.amber100},{key:"noticeableJank",label:r("performance.noticeableJankBucket"),count:o,percent:Number((o/c*100).toFixed(0)),color:AppColors_1.AppColors.firebaseOrange,bgColor:AppColors_1.AppColors.lightOrange},{key:"severeFreeze",label:r("performance.severeFreezeBucket"),count:a,percent:Number((a/c*100).toFixed(0)),color:AppColors_1.AppColors.errorColor,bgColor:AppColors_1.AppColors.errorCardBg}]},[h,r]),ee=()=>{(0,performanceTracker_1.clearPerformanceEvents)()},D=v!==null&&b.coords[v]?b.coords[v]:null;return<react_native_1.View style={perfStyles.container}>
-      
-      <react_native_1.View style={perfStyles.headerBar}>
-        <react_native_1.View style={perfStyles.searchBox}>
-          <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak}size={15}/>
-          <react_native_1.TextInput placeholder={r("performance.searchPlaceholder")}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={f}onChangeText={I}style={perfStyles.searchInput}autoCapitalize="none"autoCorrect={!1}/>
-          {f?<TouchableScale_1.default onPress={()=>I("")}>
-              <NetworkIcons_1.CircleXIcon color={AppColors_1.AppColors.grayTextWeak}size={16}/>
-            </TouchableScale_1.default>:null}
-        </react_native_1.View>
-
-        
-        <TouchableScale_1.default onPress={()=>{g(e=>{const t=!e;return(0,telemetry_1.trackInspectorScreenRecord)(t?"start":"stop","performance_fps"),t})}}style={[perfStyles.recordToggleBtn,i?perfStyles.recordToggleActive:perfStyles.recordToggleInactive]}>
-          <react_native_1.View style={[perfStyles.recordingDot,{backgroundColor:i?AppColors_1.AppColors.errorColor:AppColors_1.AppColors.grayTextWeak}]}/>
-          <react_native_1.Text style={[perfStyles.recordToggleText,{color:i?AppColors_1.AppColors.errorColor:AppColors_1.AppColors.grayTextWeak}]}>
-            {r(i?"performance.recording":"performance.paused")}
-          </react_native_1.Text>
-        </TouchableScale_1.default>
-      </react_native_1.View>
-
-      <FeatureUnderDevNotice_1.default featureName="Performance & FPS Profiler"/>
-
-      
-      <react_native_1.View style={perfStyles.categoryScrollWrapper}>
-        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}style={perfStyles.categoryScrollView}contentContainerStyle={perfStyles.categoryScroll}>
-          {[{key:"ALL",label:r("performance.catAll"),icon:e=><NetworkIcons_1.PerformanceIcon size={12}color={e}/>},{key:"JANKY",label:r("performance.catJanky"),icon:e=><NetworkIcons_1.CircleAlertIcon size={12}color={e}/>},{key:"NAVIGATION",label:r("performance.catNavigation"),icon:e=><NetworkIcons_1.MapIcon size={12}color={e}/>},{key:"RENDER",label:r("performance.catRender"),icon:e=><NetworkIcons_1.AtomIcon size={12}color={e}/>},{key:"MEMORY",label:r("performance.catMemory"),icon:e=><NetworkIcons_1.BrainIcon size={12}color={e}/>},{key:"IO",label:r("performance.catIo"),icon:e=><NetworkIcons_1.GlobeIcon size={12}color={e}/>}].map(e=>{const t=x===e.key,o=t?AppColors_1.AppColors.white:AppColors_1.AppColors.grayTextWeak;return<TouchableScale_1.default key={e.key}onPress={()=>Y(e.key)}style={[perfStyles.categoryChip,t&&perfStyles.categoryChipActive,{flexDirection:"row",alignItems:"center",gap:5}]}>
-                {e.icon(o)}
-                <react_native_1.Text style={[perfStyles.categoryChipText,t&&perfStyles.categoryChipTextActive]}>
-                  {e.label}
-                </react_native_1.Text>
-              </TouchableScale_1.default>})}
-        </react_native_1.ScrollView>
-      </react_native_1.View>
-
-      
-      <react_native_1.ScrollView style={perfStyles.scrollBody}contentContainerStyle={perfStyles.scrollContent}showsVerticalScrollIndicator={!1}>
-        
-        <react_native_1.View style={perfStyles.heroCard}>
-          <react_native_1.View style={perfStyles.heroHeaderRow}>
-            <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
-              <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.purple}size={17}/>
-              <react_native_1.View>
-                <react_native_1.Text style={perfStyles.heroTitle}>
-                  {r("performance.fpsAreaChartTitle")}
-                </react_native_1.Text>
-                <react_native_1.Text style={perfStyles.heroSubTitle}>
-                  {r("performance.fpsAreaChartSub")}
-                </react_native_1.Text>
-              </react_native_1.View>
-            </react_native_1.View>
-
-            
-            <react_native_1.View style={[perfStyles.scorePill,{backgroundColor:z.bg}]}>
-              <react_native_1.Text style={[perfStyles.scorePillText,{color:z.color}]}>
-                {z.grade}
-              </react_native_1.Text>
-            </react_native_1.View>
-          </react_native_1.View>
-
-          
-          <react_native_1.View style={perfStyles.primaryFpsRow}>
-            <react_native_1.View style={perfStyles.fpsBigNumberBox}>
-              <react_native_1.Text style={[perfStyles.fpsBigNumber,{color:s>=55?AppColors_1.AppColors.emerald600:s>=40?AppColors_1.AppColors.firebaseOrange:AppColors_1.AppColors.errorColor}]}>
-                {s}
-              </react_native_1.Text>
-              <react_native_1.Text style={perfStyles.fpsUnit}>{r("performance.fpsUnit")}</react_native_1.Text>
-            </react_native_1.View>
-
-            <react_native_1.View style={perfStyles.fpsStatsGrid}>
-              <react_native_1.View style={perfStyles.statItem}>
-                <react_native_1.Text style={perfStyles.statLabel}>
-                  {r("performance.avgFrameTime")}
-                </react_native_1.Text>
-                <react_native_1.Text style={perfStyles.statValue}>{m}</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={perfStyles.statItem}>
-                <react_native_1.Text style={perfStyles.statLabel}>
-                  {r("performance.peakTime")}
-                </react_native_1.Text>
-                <react_native_1.Text style={[perfStyles.statValue,W<50&&{color:AppColors_1.AppColors.firebaseOrange}]}>
-                  {W}
-                </react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={perfStyles.statItem}>
-                <react_native_1.Text style={perfStyles.statLabel}>
-                  {r("performance.jsLag")}
-                </react_native_1.Text>
-                <react_native_1.Text style={[perfStyles.statValue,S>5&&{color:AppColors_1.AppColors.firebaseOrange}]}>
-                  {S}ms
-                </react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={perfStyles.statItem}>
-                <react_native_1.Text style={perfStyles.statLabel}>
-                  {r("performance.jankRate")}
-                </react_native_1.Text>
-                <react_native_1.Text style={perfStyles.statValue}>
-                  {L>0?`${(E/Math.max(1,L/60)*100).toFixed(0)}%`:"0%"}
-                </react_native_1.Text>
-              </react_native_1.View>
-            </react_native_1.View>
-          </react_native_1.View>
-
-          
-          {D&&<react_native_1.View style={perfStyles.graphScrubTooltip}>
-              <react_native_1.Text style={perfStyles.graphScrubTooltipText}>
-                {D.val} FPS •{" "}
-                {Number((1e3/Math.max(1,D.val)).toFixed(1))}
-                ms
-              </react_native_1.Text>
-            </react_native_1.View>}
-
-          
-          <react_native_1.View style={perfStyles.svgGraphContainer}>
-            <react_native_svg_1.default width="100%"height={_}viewBox={`0 0 ${B} ${_}`}preserveAspectRatio="none">
-              <react_native_svg_1.Defs>
-                <react_native_svg_1.LinearGradient id="fpsAreaGradient"x1="0"y1="0"x2="0"y2="1">
-                  <react_native_svg_1.Stop offset="0%"stopColor={m>=55?AppColors_1.AppColors.emerald500:m>=40?AppColors_1.AppColors.amber500:AppColors_1.AppColors.errorColor}stopOpacity="0.32"/>
-                  <react_native_svg_1.Stop offset="100%"stopColor={m>=55?AppColors_1.AppColors.emerald500:m>=40?AppColors_1.AppColors.amber500:AppColors_1.AppColors.errorColor}stopOpacity="0.02"/>
-                </react_native_svg_1.LinearGradient>
-              </react_native_svg_1.Defs>
-
-              
-              <react_native_svg_1.Line x1="0"y1="7"x2={B}y2="7"stroke={AppColors_1.AppColors.emerald500}strokeWidth="1"strokeDasharray="4,4"opacity="0.4"/>
-
-              
-              <react_native_svg_1.Line x1="0"y1={_/2}x2={B}y2={_/2}stroke={AppColors_1.AppColors.amber500}strokeWidth="0.8"strokeDasharray="3,3"opacity="0.3"/>
-
-              
-              {b.areaPath?<react_native_svg_1.Path d={b.areaPath}fill="url(#fpsAreaGradient)"/>:null}
-
-              
-              {b.linePath?<react_native_svg_1.Path d={b.linePath}fill="none"stroke={m>=55?AppColors_1.AppColors.emerald600:m>=40?AppColors_1.AppColors.amber600:AppColors_1.AppColors.errorColor}strokeWidth="2.2"/>:null}
-
-              
-              {b.coords.map((e,t)=>{const o=v===t,a=e.val<50;return<react_native_svg_1.G key={t}>
-                    {a&&<react_native_svg_1.Circle cx={e.x}cy={e.y}r="4"fill={AppColors_1.AppColors.errorColor}opacity="0.25"/>}
-                    <react_native_svg_1.Circle cx={e.x}cy={e.y}r={o?4:a?2.5:1.8}fill={o?AppColors_1.AppColors.brandPurple:a?AppColors_1.AppColors.errorColor:AppColors_1.AppColors.emerald600}stroke={AppColors_1.AppColors.white}strokeWidth={o?1.5:.8}/>
-                  </react_native_svg_1.G>})}
-            </react_native_svg_1.default>
-
-            
-            <react_native_1.View style={perfStyles.svgTouchOverlay}>
-              {b.coords.map((e,t)=><react_native_1.TouchableOpacity key={t}style={perfStyles.svgTouchCol}activeOpacity={.7}onPress={()=>Z(v===t?null:t)}/>)}
-            </react_native_1.View>
-          </react_native_1.View>
-
-          <react_native_1.View style={perfStyles.sparklineFooter}>
-            <react_native_1.Text style={perfStyles.sparklineFooterText}>
-              {r("performance.realtimeWindow")}
-            </react_native_1.Text>
-            <react_native_1.Text style={perfStyles.sparklineFooterTarget}>
-              {r("performance.target60Fps",{fps:m})}
-            </react_native_1.Text>
-          </react_native_1.View>
-        </react_native_1.View>
-
-        
-        <react_native_1.View style={perfStyles.budgetCard}>
-          <react_native_1.View style={perfStyles.budgetHeader}>
-            <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
-              <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.brandPurple}size={15}/>
-              <react_native_1.View>
-                <react_native_1.Text style={perfStyles.budgetTitle}>Native Hardware & System Health</react_native_1.Text>
-                <react_native_1.Text style={perfStyles.heroSubTitle}>Live kernel metrics, resident RAM, and thermal state</react_native_1.Text>
-              </react_native_1.View>
-            </react_native_1.View>
-            {y&&<react_native_1.View style={{paddingHorizontal:7,paddingVertical:2.5,borderRadius:5,backgroundColor:y.thermalState==="nominal"?`${AppColors_1.AppColors.emerald600}18`:y.thermalState==="fair"?`${AppColors_1.AppColors.amber800Warm}18`:`${AppColors_1.AppColors.errorColor}18`}}>
-                <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:y.thermalState==="nominal"?AppColors_1.AppColors.emerald600:y.thermalState==="fair"?AppColors_1.AppColors.amber800Warm:AppColors_1.AppColors.errorColor,textTransform:"uppercase"}}>
-                  {y.thermalState} THERMAL
-                </react_native_1.Text>
-              </react_native_1.View>}
-          </react_native_1.View>
-
-          <react_native_1.View style={{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:10}}>
-            <react_native_1.View style={{flex:1,minWidth:100,backgroundColor:AppColors_1.AppColors.grayBackground,padding:8,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor}}>
-              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak}}>Resident RAM</react_native_1.Text>
-              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.brandPurple,marginTop:2}}>
-                {y?`${y.residentRamMb.toFixed(1)} MB`:"18.4 MB"}
-              </react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={{flex:1,minWidth:100,backgroundColor:AppColors_1.AppColors.grayBackground,padding:8,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor}}>
-              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak}}>Total Physical RAM</react_native_1.Text>
-              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.primaryBlack,marginTop:2}}>
-                {y?`${Math.round(y.totalPhysicalRamMb)} MB`:"3840 MB"}
-              </react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={{flex:1,minWidth:100,backgroundColor:AppColors_1.AppColors.grayBackground,padding:8,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor}}>
-              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak}}>Active CPU Cores</react_native_1.Text>
-              <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.skyBlue,marginTop:2}}>
-                {y?`${y.activeCpuCores} Cores`:"6 Cores"}
-              </react_native_1.Text>
-            </react_native_1.View>
-          </react_native_1.View>
-        </react_native_1.View>
-
-        
-        <react_native_1.View style={perfStyles.budgetCard}>
-          <react_native_1.View style={perfStyles.budgetHeader}>
-            <react_native_1.View>
-              <react_native_1.Text style={perfStyles.budgetTitle}>
-                {r("performance.frameLatencyDistTitle")}
-              </react_native_1.Text>
-              <react_native_1.Text style={perfStyles.heroSubTitle}>
-                {r("performance.frameLatencyDistSub")}
-              </react_native_1.Text>
-            </react_native_1.View>
-          </react_native_1.View>
-
-          <react_native_1.View style={perfStyles.histogramContainer}>
-            {Q.map(e=><react_native_1.View key={e.key}style={perfStyles.histogramRow}>
-                <react_native_1.View style={perfStyles.histogramLabelCol}>
-                  <react_native_1.View style={[perfStyles.legendDot,{backgroundColor:e.color}]}/>
-                  <react_native_1.Text style={perfStyles.histogramLabelText}>{e.label}</react_native_1.Text>
-                </react_native_1.View>
-
-                <react_native_1.View style={perfStyles.histogramBarCol}>
-                  <react_native_1.View style={perfStyles.histogramTrack}>
-                    <react_native_1.View style={[perfStyles.histogramBarFill,{width:`${Math.max(e.percent>0?4:0,e.percent)}%`,backgroundColor:e.color}]}/>
-                  </react_native_1.View>
-                </react_native_1.View>
-
-                <react_native_1.View style={perfStyles.histogramStatsCol}>
-                  <react_native_1.Text style={[perfStyles.histogramPercentText,{color:e.color}]}>
-                    {e.percent}%
-                  </react_native_1.Text>
-                  <react_native_1.Text style={perfStyles.histogramCountText}>
-                    ({e.count})
-                  </react_native_1.Text>
-                </react_native_1.View>
-              </react_native_1.View>)}
-          </react_native_1.View>
-        </react_native_1.View>
-
-        
-        <react_native_1.View style={perfStyles.budgetCard}>
-          <react_native_1.View style={perfStyles.budgetHeader}>
-            <react_native_1.Text style={perfStyles.budgetTitle}>{r("performance.budgetUsage")}</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.budgetHeadroom}>
-              {r("performance.budgetHeadroom",{time:C.freeTime,percent:C.headroomPercent})}
-            </react_native_1.Text>
-          </react_native_1.View>
-
-          
-          <react_native_1.View style={perfStyles.budgetBarContainer}>
-            <react_native_1.View style={[perfStyles.budgetBarSegment,{flex:Math.max(.5,C.jsTime),backgroundColor:AppColors_1.AppColors.sky400}]}/>
-            <react_native_1.View style={[perfStyles.budgetBarSegment,{flex:Math.max(.5,C.layoutTime),backgroundColor:AppColors_1.AppColors.indigo500}]}/>
-            <react_native_1.View style={[perfStyles.budgetBarSegment,{flex:Math.max(.5,C.renderTime),backgroundColor:AppColors_1.AppColors.pink400}]}/>
-            <react_native_1.View style={[perfStyles.budgetBarSegment,{flex:Math.max(.5,C.freeTime),backgroundColor:AppColors_1.AppColors.emerald400}]}/>
-          </react_native_1.View>
-
-          <react_native_1.View style={perfStyles.budgetLegendGrid}>
-            <react_native_1.View style={perfStyles.legendItem}>
-              <react_native_1.View style={[perfStyles.legendDot,{backgroundColor:AppColors_1.AppColors.sky400}]}/>
-              <react_native_1.Text style={perfStyles.legendText}>
-                {r("performance.jsExec",{time:C.jsTime})}
-              </react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={perfStyles.legendItem}>
-              <react_native_1.View style={[perfStyles.legendDot,{backgroundColor:AppColors_1.AppColors.indigo500}]}/>
-              <react_native_1.Text style={perfStyles.legendText}>
-                {r("performance.yogaLayoutTime",{time:C.layoutTime})}
-              </react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={perfStyles.legendItem}>
-              <react_native_1.View style={[perfStyles.legendDot,{backgroundColor:AppColors_1.AppColors.pink400}]}/>
-              <react_native_1.Text style={perfStyles.legendText}>
-                {r("performance.uiRenderTime",{time:C.renderTime})}
-              </react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={perfStyles.legendItem}>
-              <react_native_1.View style={[perfStyles.legendDot,{backgroundColor:AppColors_1.AppColors.emerald400}]}/>
-              <react_native_1.Text style={[perfStyles.legendText,{color:AppColors_1.AppColors.emerald600,fontFamily:AppFonts_1.AppFonts.interBold}]}>
-                {r("performance.freeTime",{time:C.freeTime})}
-              </react_native_1.Text>
-            </react_native_1.View>
-          </react_native_1.View>
-        </react_native_1.View>
-
-        
-        <react_native_1.View style={perfStyles.engineSummaryGrid}>
-          <react_native_1.View style={perfStyles.engineSummaryCard}>
-            <react_native_1.Text style={perfStyles.engineSummaryLabel}>{r("performance.jsEngine")}</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummaryValue}>{w.jsEngineName}</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummarySub}>{w.jsEngineSub}</react_native_1.Text>
-          </react_native_1.View>
-          <react_native_1.View style={perfStyles.engineSummaryCard}>
-            <react_native_1.Text style={perfStyles.engineSummaryLabel}>{r("performance.uiRenderThread")}</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummaryValue}>{w.uiArchName}</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummarySub}>{w.uiArchSub}</react_native_1.Text>
-          </react_native_1.View>
-          <react_native_1.View style={perfStyles.engineSummaryCard}>
-            <react_native_1.Text style={perfStyles.engineSummaryLabel}>{r("performance.tabMemory")}</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummaryValue}>{w.usedHeapMb} MB</react_native_1.Text>
-            <react_native_1.Text style={perfStyles.engineSummarySub}>
-              {r("performance.heapAllocatedSub",{allocated:w.totalAllocMb})}
-            </react_native_1.Text>
-          </react_native_1.View>
-        </react_native_1.View>
-
-        
-        <react_native_1.View style={perfStyles.logsHeaderRow}>
-          <react_native_1.Text style={perfStyles.logsSectionHeading}>
-            {r("performance.recordedEvents")} ({F.length})
-          </react_native_1.Text>
-          {M.length>0&&<TouchableScale_1.default onPress={ee}>
-              <react_native_1.Text style={perfStyles.clearLink}>{r("common.clear")}</react_native_1.Text>
-            </TouchableScale_1.default>}
-        </react_native_1.View>
-
-        {F.length===0?<react_native_1.View style={perfStyles.emptyCard}>
-            <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.amber500}size={30}/>
-            <react_native_1.Text style={perfStyles.emptyTitle}>
-              {f.trim().length>0?"No Matching Events":r("performance.emptyTitle")}
-            </react_native_1.Text>
-            <react_native_1.Text style={perfStyles.emptySub}>
-              {f.trim().length>0?`No performance events match "${f}"`:r("performance.emptySubtitle")}
-            </react_native_1.Text>
-            {f.trim().length>0&&<TouchableScale_1.default onPress={()=>I("")}style={{marginTop:10,paddingHorizontal:14,paddingVertical:6,borderRadius:8,backgroundColor:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary}}>
-                <react_native_1.Text style={{color:AppColors_1.AppColors.brandPurple,fontSize:12,fontFamily:AppFonts_1.AppFonts.interBold}}>
-                  Clear Search
-                </react_native_1.Text>
-              </TouchableScale_1.default>}
-          </react_native_1.View>:F.map(e=>{const t=e.severity==="optimal",o=e.severity==="warning",a=e.severity==="critical",c=!!G[e.id],p=t?AppColors_1.AppColors.greenBg:o?AppColors_1.AppColors.amberBg:AppColors_1.AppColors.errorCardBg,T=t?AppColors_1.AppColors.greenBorder:o?AppColors_1.AppColors.lightOrange:AppColors_1.AppColors.errorBorder,u=t?AppColors_1.AppColors.emerald600:o?AppColors_1.AppColors.amber700:AppColors_1.AppColors.errorColor;return<TouchableScale_1.default key={e.id}onPress={()=>J(e.id)}style={[perfStyles.eventCard,a&&{borderColor:AppColors_1.AppColors.errorBorder,backgroundColor:AppColors_1.AppColors.errorCardBg}]}>
-                <react_native_1.View style={perfStyles.eventTopRow}>
-                  <react_native_1.View style={perfStyles.fpsBadgeGroup}>
-                    <react_native_1.View style={[perfStyles.fpsBadge,{backgroundColor:p,borderColor:T}]}>
-                      <react_native_1.Text style={[perfStyles.fpsBadgeText,{color:u}]}>
-                        {e.fps} FPS
-                      </react_native_1.Text>
-                    </react_native_1.View>
-
-                    
-                    <react_native_1.View style={[perfStyles.droppedBadge,(e.droppedFrames??Math.max(0,60-e.fps))>0?perfStyles.droppedBadgeWarning:perfStyles.droppedBadgeOptimal]}>
-                      <react_native_1.Text style={[perfStyles.droppedBadgeText,(e.droppedFrames??Math.max(0,60-e.fps))>0?{color:AppColors_1.AppColors.red600}:{color:AppColors_1.AppColors.emerald600}]}>
-                        {(e.droppedFrames??Math.max(0,60-e.fps))>0?r("performance.droppedFrames",{count:e.droppedFrames??Math.max(0,60-e.fps)}):r("performance.zeroDropped")}
-                      </react_native_1.Text>
-                    </react_native_1.View>
-
-                    
-                    {e.bottleneckThread&&<react_native_1.View style={[perfStyles.bottleneckTag,{flexDirection:"row",alignItems:"center",gap:3}]}>
-                        {e.bottleneckThread==="JS Thread"&&<NetworkIcons_1.BoltIcon size={10}color={AppColors_1.AppColors.warningIconGold}/>}
-                        <react_native_1.Text style={perfStyles.bottleneckTagText}>
-                          {e.bottleneckThread==="JS Thread"?r("performance.jsBound"):e.bottleneckThread==="UI Thread"?r("performance.uiBound"):r("performance.balanced")}
-                        </react_native_1.Text>
-                      </react_native_1.View>}
-                  </react_native_1.View>
-
-                  <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                    <CopyButton_1.default value={()=>e}label={r("common.copyJson")}/>
-                    <NetworkIcons_1.ChevronIcon isExpanded={c}size={14}color={AppColors_1.AppColors.grayTextWeak}/>
-                  </react_native_1.View>
-                </react_native_1.View>
-
-                
-                <react_native_1.View style={{marginTop:4}}>
-                  <HighlightText_1.default text={e.label}search={f}style={perfStyles.eventLabel}highlightStyle={perfStyles.searchHighlight}/>
-                  <react_native_1.View style={perfStyles.eventMetaRow}>
-                    <react_native_1.Text style={perfStyles.eventMeta}>
-                      {r("performance.msTotal",{duration:e.durationMs,time:new Date(e.timestamp).toLocaleTimeString()})}
-                    </react_native_1.Text>
-                    <react_native_1.Text style={perfStyles.eventMetaDot}>•</react_native_1.Text>
-                    <react_native_1.Text style={[perfStyles.frameBudgetHint,e.durationMs>16.67?{color:AppColors_1.AppColors.amber800Warm}:{color:AppColors_1.AppColors.emerald600}]}>
-                      {r("performance.frameBudgetMs",{time:e.durationMs,budget:Number((e.durationMs/16.67*100).toFixed(0))})}
-                    </react_native_1.Text>
-                  </react_native_1.View>
-                </react_native_1.View>
-
-                
-                <react_native_1.View style={perfStyles.frameBarTrack}>
-                  <react_native_1.View style={[perfStyles.frameBarFill,{width:`${Math.min(100,Math.max(10,e.durationMs/33.33*100))}%`,backgroundColor:u}]}/>
-                </react_native_1.View>
-
-                <HighlightText_1.default text={e.detail}search={f}style={perfStyles.eventDetail}highlightStyle={perfStyles.searchHighlight}/>
-
-                
-                {c&&<react_native_1.View style={perfStyles.expandedDetailBox}>
-                    
-                    {(e.screenName||e.source)&&<react_native_1.View style={perfStyles.sourceRow}>
-                        <react_native_1.Text style={perfStyles.sourceTag}>{r("performance.screenContext")}</react_native_1.Text>
-                        <react_native_1.Text style={perfStyles.sourceText}numberOfLines={1}>
-                          {e.screenName||e.source}
-                        </react_native_1.Text>
-                      </react_native_1.View>}
-
-                    
-                    <react_native_1.View style={perfStyles.fpsMetricsGrid}>
-                      <react_native_1.View style={perfStyles.fpsMetricItem}>
-                        <react_native_1.Text style={perfStyles.fpsMetricLabel}>{r("performance.target60Fps",{fps:e.fps})}</react_native_1.Text>
-                        <react_native_1.Text style={[perfStyles.fpsMetricVal,{color:u}]}>
-                          {e.fps} FPS
-                        </react_native_1.Text>
-                      </react_native_1.View>
-                      <react_native_1.View style={perfStyles.fpsMetricItem}>
-                        <react_native_1.Text style={perfStyles.fpsMetricLabel}>{r("performance.frameDuration")}</react_native_1.Text>
-                        <react_native_1.Text style={perfStyles.fpsMetricVal}>
-                          {e.durationMs} ms
-                        </react_native_1.Text>
-                      </react_native_1.View>
-                      <react_native_1.View style={perfStyles.fpsMetricItem}>
-                        <react_native_1.Text style={perfStyles.fpsMetricLabel}>{r("performance.jankRate")}</react_native_1.Text>
-                        <react_native_1.Text style={[perfStyles.fpsMetricVal,(e.droppedFrames??0)>0?{color:AppColors_1.AppColors.red600}:{color:AppColors_1.AppColors.emerald600}]}>
-                          {e.droppedFrames??Math.max(0,60-e.fps)} frames
-                        </react_native_1.Text>
-                      </react_native_1.View>
-                      <react_native_1.View style={perfStyles.fpsMetricItem}>
-                        <react_native_1.Text style={perfStyles.fpsMetricLabel}>{r("performance.bottleneck")}</react_native_1.Text>
-                        <react_native_1.Text style={perfStyles.fpsMetricVal}>
-                          {e.bottleneckThread||r("performance.balanced")}
-                        </react_native_1.Text>
-                      </react_native_1.View>
-                    </react_native_1.View>
-
-                    
-                    {e.breakdown&&<react_native_1.View style={perfStyles.breakdownGrid}>
-                        <react_native_1.View style={perfStyles.breakdownCol}>
-                          <react_native_1.Text style={perfStyles.breakdownLabel}>{r("performance.jsThread")}</react_native_1.Text>
-                          <react_native_1.Text style={perfStyles.breakdownVal}>
-                            {e.breakdown.jsTimeMs} ms
-                          </react_native_1.Text>
-                        </react_native_1.View>
-                        <react_native_1.View style={perfStyles.breakdownCol}>
-                          <react_native_1.Text style={perfStyles.breakdownLabel}>{r("performance.uiThread")}</react_native_1.Text>
-                          <react_native_1.Text style={perfStyles.breakdownVal}>
-                            {e.breakdown.uiTimeMs} ms
-                          </react_native_1.Text>
-                        </react_native_1.View>
-                        {e.breakdown.bridgeLatencyMs!=null&&<react_native_1.View style={perfStyles.breakdownCol}>
-                            <react_native_1.Text style={perfStyles.breakdownLabel}>{r("performance.jsiLatency")}</react_native_1.Text>
-                            <react_native_1.Text style={perfStyles.breakdownVal}>
-                              {e.breakdown.bridgeLatencyMs} ms
-                            </react_native_1.Text>
-                          </react_native_1.View>}
-                        {e.heapDeltaKb!=null&&<react_native_1.View style={perfStyles.breakdownCol}>
-                            <react_native_1.Text style={perfStyles.breakdownLabel}>{r("performance.heapImpact")}</react_native_1.Text>
-                            <react_native_1.Text style={[perfStyles.breakdownVal,{color:e.heapDeltaKb>0?AppColors_1.AppColors.amber700:AppColors_1.AppColors.emerald600}]}>
-                              {e.heapDeltaKb>0?`+${e.heapDeltaKb}`:e.heapDeltaKb} KB
-                            </react_native_1.Text>
-                          </react_native_1.View>}
-                      </react_native_1.View>}
-
-                    
-                    {e.advice&&<react_native_1.View style={perfStyles.adviceCard}>
-                        <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:5}}>
-                          <NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.purpleShade700}size={12}/>
-                          <react_native_1.Text style={perfStyles.adviceHeading}>{r("performance.optimizationTip")}</react_native_1.Text>
-                        </react_native_1.View>
-                        <react_native_1.Text style={perfStyles.adviceBodyText}>{e.advice}</react_native_1.Text>
-                      </react_native_1.View>}
-                  </react_native_1.View>}
-              </TouchableScale_1.default>})}
-
-        <EndOfListFooter_1.default count={F.length}label={r("performance.recordedEvents")}/>
-      </react_native_1.ScrollView>
-    </react_native_1.View>}),perfStyles=react_native_1.StyleSheet.create({container:{flex:1,backgroundColor:AppColors_1.AppColors.grayBackground},headerBar:{flexDirection:"row",alignItems:"center",paddingHorizontal:12,paddingVertical:8,backgroundColor:AppColors_1.AppColors.white,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.dividerColor,gap:8},searchBox:{flex:1,flexDirection:"row",alignItems:"center",backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:8,paddingHorizontal:8,height:36,gap:6,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},searchInput:{flex:1,fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:12,color:AppColors_1.AppColors.primaryBlack,paddingVertical:0},recordToggleBtn:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:8,paddingVertical:6,borderRadius:7,borderWidth:1},recordToggleActive:{backgroundColor:`${AppColors_1.AppColors.errorColor}14`,borderColor:`${AppColors_1.AppColors.errorColor}30`},recordToggleInactive:{backgroundColor:AppColors_1.AppColors.graySurface,borderColor:AppColors_1.AppColors.dividerColor},recordingDot:{width:6,height:6,borderRadius:3},recordToggleText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11},categoryScrollWrapper:{backgroundColor:AppColors_1.AppColors.white,borderBottomWidth:1,borderBottomColor:AppColors_1.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_1.AppColors.grayBackground,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},categoryChipActive:{backgroundColor:AppColors_1.AppColors.brandPurple,borderColor:AppColors_1.AppColors.brandPurple},categoryChipText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.grayTextStrong},categoryChipTextActive:{fontFamily:AppFonts_1.AppFonts.interBold,color:AppColors_1.AppColors.white},scrollBody:{flex:1},scrollContent:{padding:12,gap:10},heroCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:12,padding:14,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,shadowColor:AppColors_1.AppColors.black,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:3,elevation:1},heroHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:10},heroTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.primaryBlack},heroSubTitle:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,marginTop:1},scorePill:{paddingHorizontal:8,paddingVertical:3,borderRadius:6},scorePillText:{fontFamily:AppFonts_1.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_1.AppFonts.interBold,fontSize:42,lineHeight:48,letterSpacing:-1,minWidth:54},fpsUnit:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:14,color:AppColors_1.AppColors.grayTextWeak},fpsStatsGrid:{flexDirection:"row",alignItems:"center",gap:8},statItem:{alignItems:"center",minWidth:50},statLabel:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak},statValue:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.primaryBlack,marginTop:2,textAlign:"center"},graphScrubTooltip:{alignSelf:"center",backgroundColor:AppColors_1.AppColors.primaryBlack,paddingHorizontal:8,paddingVertical:3,borderRadius:6,marginBottom:4},graphScrubTooltipText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.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_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.grayTextStrong},histogramBarCol:{flex:1},histogramTrack:{height:8,backgroundColor:AppColors_1.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_1.AppFonts.interBold,fontSize:10.5},histogramCountText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak},sparklineFooter:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:6},sparklineFooterText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak},sparklineFooterTarget:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.emerald600},budgetCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:12,padding:12,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,gap:8},budgetHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},budgetTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12.5,color:AppColors_1.AppColors.primaryBlack},budgetHeadroom:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11,color:AppColors_1.AppColors.emerald600},budgetBarContainer:{flexDirection:"row",height:8,borderRadius:4,overflow:"hidden",backgroundColor:AppColors_1.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_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextStrong},engineSummaryGrid:{flexDirection:"row",alignItems:"center",gap:8},engineSummaryCard:{flex:1,backgroundColor:AppColors_1.AppColors.white,borderRadius:10,padding:10,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},engineSummaryLabel:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.grayTextWeak},engineSummaryValue:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11.5,color:AppColors_1.AppColors.primaryBlack,marginTop:2},engineSummarySub:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,marginTop:1},logsHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:4},logsSectionHeading:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,color:AppColors_1.AppColors.primaryBlack},clearLink:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11.5,color:AppColors_1.AppColors.purple},eventCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:10,padding:10,borderWidth:1,borderColor:AppColors_1.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_1.AppFonts.interBold,fontSize:10},droppedBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:5,borderWidth:1},droppedBadgeWarning:{backgroundColor:AppColors_1.AppColors.red100,borderColor:AppColors_1.AppColors.errorBorder},droppedBadgeOptimal:{backgroundColor:AppColors_1.AppColors.green100,borderColor:AppColors_1.AppColors.greenBorder},droppedBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5},bottleneckTag:{backgroundColor:AppColors_1.AppColors.purpleShade50,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:AppColors_1.AppColors.purpleTint2},bottleneckTagText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:9.5,color:AppColors_1.AppColors.purple},eventMetaRow:{flexDirection:"row",alignItems:"center",gap:6,marginTop:2,flexWrap:"wrap"},eventMetaDot:{fontSize:9,color:AppColors_1.AppColors.grayTextWeak},frameBudgetHint:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10},frameBarTrack:{height:4,borderRadius:2,backgroundColor:AppColors_1.AppColors.graySurface,overflow:"hidden",marginVertical:4},frameBarFill:{height:"100%",borderRadius:2},fpsMetricsGrid:{flexDirection:"row",alignItems:"center",backgroundColor:AppColors_1.AppColors.white,borderRadius:6,padding:6,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,justifyContent:"space-between",gap:4},fpsMetricItem:{alignItems:"center",flex:1},fpsMetricLabel:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:8.5,color:AppColors_1.AppColors.grayTextWeak,textAlign:"center"},fpsMetricVal:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.primaryBlack,marginTop:1,textAlign:"center"},eventLabel:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:AppColors_1.AppColors.primaryBlack},eventMeta:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak,marginTop:1},eventDetail:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11,color:AppColors_1.AppColors.grayTextStrong,lineHeight:15},expandChevron:{fontSize:10,color:AppColors_1.AppColors.grayTextWeak,marginLeft:2},expandedDetailBox:{backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:8,padding:8,marginTop:4,gap:6,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},sourceRow:{flexDirection:"row",alignItems:"center",gap:6},sourceTag:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,color:AppColors_1.AppColors.purple,backgroundColor:`${AppColors_1.AppColors.purple}14`,paddingHorizontal:4,paddingVertical:1,borderRadius:3},sourceText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,color:AppColors_1.AppColors.grayTextStrong,flex:1},breakdownGrid:{flexDirection:"row",alignItems:"center",backgroundColor:AppColors_1.AppColors.white,borderRadius:6,padding:6,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,justifyContent:"space-between"},breakdownCol:{alignItems:"center",flex:1},breakdownLabel:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9,color:AppColors_1.AppColors.grayTextWeak},breakdownVal:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11,color:AppColors_1.AppColors.primaryBlack,marginTop:1},adviceCard:{backgroundColor:AppColors_1.AppColors.purpleTintBg,borderRadius:6,padding:6,borderWidth:1,borderColor:AppColors_1.AppColors.purpleBorder},adviceHeading:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,color:AppColors_1.AppColors.purpleShade700},adviceBodyText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10.5,color:AppColors_1.AppColors.purple,lineHeight:14,marginTop:1},searchHighlight:{backgroundColor:AppColors_1.AppColors.yellowHighlight,color:AppColors_1.AppColors.amber800,fontFamily:AppFonts_1.AppFonts.interBold},emptyCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:12,padding:24,alignItems:"center",justifyContent:"center",gap:8,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},emptyTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:14,color:AppColors_1.AppColors.primaryBlack},emptySub:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11.5,color:AppColors_1.AppColors.grayTextWeak,textAlign:"center",lineHeight:16}});exports.default=PerformanceTab;

package/dist/commonjs/customHooks/bundleAnalyzer.d.ts

@@ -1,115 +0,0 @@
-export type FileTypeCategory = 'image' | 'typescript' | 'javascript' | 'font' | 'json';
-export interface HostBundleFileItem {
-    id: string;
-    name: string;
-    path: string;
-    ext: string;
-    category: FileTypeCategory;
-    sizeKb: number;
-    meta: string;
-    color: string;
-    status?: 'optimal' | 'warning' | 'info';
-    advice?: string;
-    isConsumed?: boolean;
-    previewUri?: string;
-}
-export interface HostBundlePackageItem {
-    id: string;
-    name: string;
-    version: string;
-    latestVersion?: string;
-    sizeKb: number;
-    percentage: number;
-    type: 'direct' | 'peer' | 'transitive';
-    isDirectDefined?: boolean;
-    parentPackageName?: string;
-    subpackages?: HostBundlePackageItem[];
-    category: 'core' | 'navigation' | 'network' | 'ui' | 'utils';
-    color: string;
-    description: string;
-    npmUrl?: string;
-    isDeprecated?: boolean;
-    deprecationReason?: string;
-    lastActive?: string;
-}
-export interface HostBinaryComponentItem {
-    id: string;
-    name: string;
-    category: 'js' | 'native' | 'frameworks' | 'assets' | 'meta';
-    sizeMb: number;
-    pct: number;
-    color: string;
-    description: string;
-    advice: string;
-}
-export interface HostBundleAnalysisResult {
-    isLive: boolean;
-    scriptURL: string;
-    totalDevBytes: number;
-    totalDevMb: number;
-    totalDevKb: number;
-    isHermes: boolean;
-    moduleCount: number;
-    packageCount: number;
-    filesCount: number;
-    splitUp: {
-        appSource: {
-            kb: number;
-            mb: number;
-            pct: number;
-        };
-        nodeModules: {
-            kb: number;
-            mb: number;
-            pct: number;
-        };
-        assetsMedia: {
-            kb: number;
-            mb: number;
-            pct: number;
-        };
-        metroDevOverhead: {
-            kb: number;
-            mb: number;
-            pct: number;
-        };
-    };
-    files: HostBundleFileItem[];
-    packages: HostBundlePackageItem[];
-    production: {
-        ios: {
-            totalInstallMb: number;
-            totalDownloadMb: number;
-            compressionRatioPct: number;
-            components: HostBinaryComponentItem[];
-        };
-        androidAab: {
-            totalInstallMb: number;
-            totalDownloadMb: number;
-            compressionRatioPct: number;
-            components: HostBinaryComponentItem[];
-        };
-        androidApk: {
-            totalInstallMb: number;
-            totalDownloadMb: number;
-            compressionRatioPct: number;
-            components: HostBinaryComponentItem[];
-        };
-        android: {
-            totalInstallMb: number;
-            totalDownloadMb: number;
-            compressionRatioPct: number;
-            components: HostBinaryComponentItem[];
-        };
-    };
-}
-export declare const setBundleModuleEnabled: (enabled: boolean) => void;
-export declare const getBundleModuleEnabled: () => boolean;
-export declare const getHostScriptURL: () => string;
-export declare const trackRuntimeModuleExecution: () => void;
-export declare const trackRuntimeDefine: () => void;
-export declare const parseBundleSource: (bundleText: string, totalBytes: number, scriptURL: string, isLive?: boolean) => HostBundleAnalysisResult;
-export declare const getInitialBundleAnalysis: () => HostBundleAnalysisResult;
-export declare const analyzeHostAppBundle: (forceRefresh?: boolean) => Promise<HostBundleAnalysisResult>;
-export declare const clearCachedBundleAnalysis: () => void;
-export declare const getCachedBundleAnalysis: () => HostBundleAnalysisResult | null;