react-native-inapp-inspector 2.3.24 → 2.3.25

package/dist/esm/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/esm/components/Inspector/PerformanceTab.js

@@ -1,454 +0,0 @@
-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}>
-      
-      <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>
-
-        
-        <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>
-
-      <Ir featureName="Performance & FPS Profiler"/>
-
-      
-      <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>
-
-      
-      <Se style={r.scrollBody}contentContainerStyle={r.scrollContent}showsVerticalScrollIndicator={!1}>
-        
-        <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>
-
-            
-            <T style={[r.scorePill,{backgroundColor:ae.bg}]}>
-              <C style={[r.scorePillText,{color:ae.color}]}>
-                {ae.grade}
-              </C>
-            </T>
-          </T>
-
-          
-          <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>
-
-          
-          {ie&&<T style={r.graphScrubTooltip}>
-              <C style={r.graphScrubTooltipText}>
-                {ie.val} FPS •{" "}
-                {Number((1e3/Math.max(1,ie.val)).toFixed(1))}
-                ms
-              </C>
-            </T>}
-
-          
-          <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>
-
-              
-              <Me x1="0"y1="7"x2={Z}y2="7"stroke={e.emerald500}strokeWidth="1"strokeDasharray="4,4"opacity="0.4"/>
-
-              
-              <Me x1="0"y1={H/2}x2={Z}y2={H/2}stroke={e.amber500}strokeWidth="0.8"strokeDasharray="3,3"opacity="0.3"/>
-
-              
-              {N.areaPath?<Be d={N.areaPath}fill="url(#fpsAreaGradient)"/>:null}
-
-              
-              {N.linePath?<Be d={N.linePath}fill="none"stroke={v>=55?e.emerald600:v>=40?e.amber600:e.errorColor}strokeWidth="2.2"/>:null}
-
-              
-              {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>
-
-            
-            <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>
-
-        
-        <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>
-
-        
-        <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>
-
-        
-        <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>
-
-          
-          <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>
-
-        
-        <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>
-
-        
-        <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
-                </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>
-
-                    
-                    <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>
-
-                    
-                    {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>
-
-                
-                <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>
-
-                
-                <T style={r.frameBarTrack}>
-                  <T style={[r.frameBarFill,{width:`${Math.min(100,Math.max(10,t.durationMs/33.33*100))}%`,backgroundColor:D}]}/>
-                </T>
-
-                <Re text={t.detail}search={W}style={r.eventDetail}highlightStyle={r.searchHighlight}/>
-
-                
-                {R&&<T style={r.expandedDetailBox}>
-                    
-                    {(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>}
-
-                    
-                    <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>
-
-                    
-                    {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>}
-
-                    
-                    {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;

package/dist/esm/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;