react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,794 +1,283 @@
-import React, { useMemo, useState } from 'react';
-import { Platform, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
-import { useTranslation } from '../../i18n';
-import { useInspector } from './InspectorContext';
-import TouchableScale from '../TouchableScale';
-import SegmentedTabs from '../SegmentedTabs';
-import HighlightText from '../HighlightText';
-import JsonViewer from '../JsonViewer';
-import CopyButton from '../CopyButton';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { exportCrashReport, parseCrashStackTrace, } from '../../customHooks/crashHandler';
-import { copyToClipboard } from '../../helpers';
-import { SearchIcon, ClearIcon, CopyIcon, TerminalIcon, LayersIcon, ClockIcon, CircleCheckIcon, GlobeIcon, AppleIcon, AndroidIcon, StackTraceIcon, DiagnosticsIcon, TrailIcon, RawJsonIcon, AppFramesIcon, AllFramesIcon, } from '../NetworkIcons';
-const CrashDetail = React.memo(() => {
-    const { t } = useTranslation();
-    const { selectedCrash } = useInspector();
-    const [activeSubTab, setActiveSubTab] = useState('stack');
-    const [searchQuery, setSearchQuery] = useState('');
-    const [stackFilter, setStackFilter] = useState('app');
-    const [copiedSuccess, setCopiedSuccess] = useState(false);
-    const [copiedFrameIndex, setCopiedFrameIndex] = useState(null);
-    if (!selectedCrash)
-        return null;
-    const stackFrames = useMemo(() => {
-        if (selectedCrash.parsedStack && selectedCrash.parsedStack.length > 0) {
-            return selectedCrash.parsedStack;
-        }
-        if (selectedCrash.stack) {
-            return parseCrashStackTrace(selectedCrash.stack);
-        }
-        return [];
-    }, [selectedCrash]);
-    const rawCrashData = useMemo(() => {
-        try {
-            return JSON.parse(JSON.stringify(selectedCrash));
-        }
-        catch {
-            return selectedCrash;
-        }
-    }, [selectedCrash]);
-    const appStackFrames = useMemo(() => {
-        return stackFrames.filter(f => f.isAppCode);
-    }, [stackFrames]);
-    const displayedFrames = useMemo(() => {
-        if (stackFilter === 'app' && appStackFrames.length > 0) {
-            return appStackFrames;
-        }
-        return stackFrames;
-    }, [stackFilter, appStackFrames, stackFrames]);
-    const originFrame = useMemo(() => {
-        return appStackFrames[0] || stackFrames[0] || null;
-    }, [appStackFrames, stackFrames]);
-    const handleCopyReport = () => {
-        const report = exportCrashReport(selectedCrash);
-        copyToClipboard(report, 'Crash Report');
-        setCopiedSuccess(true);
-        setTimeout(() => setCopiedSuccess(false), 2000);
-    };
-    const handleCopyFrame = (frame, index) => {
-        const text = frame.raw || `${frame.method}@${frame.file}:${frame.lineNumber}:${frame.column}`;
-        copyToClipboard(text, 'Stack Frame');
-        setCopiedFrameIndex(index);
-        setTimeout(() => setCopiedFrameIndex(null), 1500);
-    };
-    const tabsConfig = [
-        {
-            key: 'stack',
-            label: t('crash.tabStack', { count: stackFrames.length }),
-            icon: (isActive) => (<StackTraceIcon size={12} color={isActive ? AppColors.white : AppColors.grayText}/>),
-        },
-        {
-            key: 'diagnostics',
-            label: t('crash.tabDiagnostics'),
-            icon: (isActive) => (<DiagnosticsIcon size={12} color={isActive ? AppColors.white : AppColors.grayText}/>),
-        },
-        {
-            key: 'breadcrumbs',
-            label: t('crash.tabTrail', { count: selectedCrash.breadcrumbs?.length || 0 }),
-            icon: (isActive) => (<TrailIcon size={12} color={isActive ? AppColors.white : AppColors.grayText}/>),
-        },
-        {
-            key: 'raw',
-            label: t('crash.tabRawJson'),
-            icon: (isActive) => (<RawJsonIcon size={12} color={isActive ? AppColors.white : AppColors.grayText}/>),
-        },
-    ];
-    return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
+import ae,{useMemo as L,useState as D}from"react";import{Platform as W,ScrollView as U,StyleSheet as ie,Text as S,TextInput as Ce,View as C}from"react-native";import{useTranslation as Te}from"../../i18n";import{useInspector as xe}from"./InspectorContext";import H from"../TouchableScale";import Se from"../SegmentedTabs";import Q from"../HighlightText";import _ from"../JsonViewer";import $ from"../CopyButton";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{exportCrashReport as Ve,parseCrashStackTrace as Be}from"../../customHooks/crashHandler";import{copyToClipboard as q}from"../../helpers";import{SearchIcon as Ie,ClearIcon as Fe,CopyIcon as K,TerminalIcon as Re,LayersIcon as X,ClockIcon as Le,CircleCheckIcon as Y,GlobeIcon as De,AppleIcon as He,AndroidIcon as Ae,StackTraceIcon as We,DiagnosticsIcon as $e,TrailIcon as Oe,RawJsonIcon as Me,AppFramesIcon as Ee,AllFramesIcon as Ge}from"../NetworkIcons";const je=ae.memo(()=>{const{t:V}=Te(),{selectedCrash:T}=xe(),[F,Z]=D("stack"),[R,E]=D(""),[I,G]=D("app"),[A,j]=D(!1),[J,N]=D(null);if(!T)return null;const z=L(()=>T.parsedStack&&T.parsedStack.length>0?T.parsedStack:T.stack?Be(T.stack):[],[T]),ee=L(()=>{try{return JSON.parse(JSON.stringify(T))}catch{return T}},[T]),v=L(()=>z.filter(x=>x.isAppCode),[z]),P=L(()=>I==="app"&&v.length>0?v:z,[I,v,z]),O=L(()=>v[0]||z[0]||null,[v,z]),re=()=>{const x=Ve(T);q(x,"Crash Report"),j(!0),setTimeout(()=>j(!1),2e3)},te=(x,k)=>{const M=x.raw||`${x.method}@${x.file}:${x.lineNumber}:${x.column}`;q(M,"Stack Frame"),N(k),setTimeout(()=>N(null),1500)},oe=[{key:"stack",label:V("crash.tabStack",{count:z.length}),icon:x=><We size={12}color={x?e.white:e.grayText}/>},{key:"diagnostics",label:V("crash.tabDiagnostics"),icon:x=><$e size={12}color={x?e.white:e.grayText}/>},{key:"breadcrumbs",label:V("crash.tabTrail",{count:T.breadcrumbs?.length||0}),icon:x=><Oe size={12}color={x?e.white:e.grayText}/>},{key:"raw",label:V("crash.tabRawJson"),icon:x=><Me size={12}color={x?e.white:e.grayText}/>}];return<C style={{flex:1,backgroundColor:e.grayBackground}}>
       
-      <View style={{ paddingHorizontal: 8, paddingTop: 6 }}>
-        <View style={localStyles.infoBar}>
+      <C style={{paddingHorizontal:8,paddingTop:6}}>
+        <C style={r.infoBar}>
           
-          <View style={localStyles.badgeRow}>
+          <C style={r.badgeRow}>
             
-            <View style={[
-            localStyles.pillBadge,
-            {
-                backgroundColor: selectedCrash.isFatal
-                    ? AppColors.errorCardBg
-                    : AppColors.amberBg,
-                borderColor: selectedCrash.isFatal
-                    ? AppColors.errorBorder
-                    : AppColors.amberWarmBorder,
-            },
-        ]}>
-              <View style={[
-            localStyles.statusDot,
-            {
-                backgroundColor: selectedCrash.isFatal
-                    ? AppColors.red600
-                    : AppColors.amber600,
-            },
-        ]}/>
-              <Text style={[
-            localStyles.pillBadgeText,
-            {
-                color: selectedCrash.isFatal
-                    ? AppColors.redErrorText
-                    : AppColors.amberWarmText,
-            },
-        ]}>
-                {selectedCrash.isFatal ? t('crash.fatalCrash') : t('crash.handledException')}
-              </Text>
-            </View>
+            <C style={[r.pillBadge,{backgroundColor:T.isFatal?e.errorCardBg:e.amberBg,borderColor:T.isFatal?e.errorBorder:e.amberWarmBorder}]}>
+              <C style={[r.statusDot,{backgroundColor:T.isFatal?e.red600:e.amber600}]}/>
+              <S style={[r.pillBadgeText,{color:T.isFatal?e.redErrorText:e.amberWarmText}]}>
+                {T.isFatal?V("crash.fatalCrash"):V("crash.handledException")}
+              </S>
+            </C>
 
             
-            <View style={[
-            localStyles.pillBadge,
-            {
-                backgroundColor: AppColors.violetSoftBg,
-                borderColor: AppColors.violetSoftBorder,
-            },
-        ]}>
-              <Text style={[localStyles.pillBadgeText, { color: AppColors.purple700 }]}>
-                {selectedCrash.type.toUpperCase()}
-              </Text>
-            </View>
+            <C style={[r.pillBadge,{backgroundColor:e.violetSoftBg,borderColor:e.violetSoftBorder}]}>
+              <S style={[r.pillBadgeText,{color:e.purple700}]}>
+                {T.type.toUpperCase()}
+              </S>
+            </C>
 
-            <View style={{ flex: 1 }}/>
+            <C style={{flex:1}}/>
 
             
-            <TouchableScale onPress={handleCopyReport} hitSlop={10} style={[
-            localStyles.actionButton,
-            copiedSuccess && { backgroundColor: AppColors.mintGreenBg, borderColor: AppColors.mintGreenBorder },
-        ]}>
-              {copiedSuccess ? (<CircleCheckIcon color={AppColors.mintGreenText} size={12}/>) : (<CopyIcon color={AppColors.purple} size={12}/>)}
-              <Text style={[
-            localStyles.actionButtonText,
-            copiedSuccess && { color: AppColors.mintGreenText },
-        ]}>
-                {copiedSuccess ? t('crash.copied') : t('crash.copyReport')}
-              </Text>
-            </TouchableScale>
-          </View>
+            <H onPress={re}hitSlop={10}style={[r.actionButton,A&&{backgroundColor:e.mintGreenBg,borderColor:e.mintGreenBorder}]}>
+              {A?<Y color={e.mintGreenText}size={12}/>:<K color={e.purple}size={12}/>}
+              <S style={[r.actionButtonText,A&&{color:e.mintGreenText}]}>
+                {V(A?"crash.copied":"crash.copyReport")}
+              </S>
+            </H>
+          </C>
 
           
-          <Text style={localStyles.titleText}>
-            {selectedCrash.message}
-          </Text>
+          <S style={r.titleText}>
+            {T.message}
+          </S>
 
           
-          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.metaRow}>
-            {originFrame && (<View style={localStyles.metaChip}>
-                <TerminalIcon color={AppColors.grayText} size={11}/>
-                <Text style={localStyles.metaChipText} numberOfLines={2}>
-                  {originFrame.file}:{originFrame.lineNumber}
-                </Text>
-              </View>)}
+          <U horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={r.metaRow}>
+            {O&&<C style={r.metaChip}>
+                <Re color={e.grayText}size={11}/>
+                <S style={r.metaChipText}numberOfLines={2}>
+                  {O.file}:{O.lineNumber}
+                </S>
+              </C>}
 
-            <View style={localStyles.metaChip}>
-              <ClockIcon color={AppColors.grayText} size={11}/>
-              <Text style={localStyles.metaChipText}>
-                {selectedCrash.timeStr || new Date(selectedCrash.timestamp).toLocaleTimeString()}
-              </Text>
-            </View>
+            <C style={r.metaChip}>
+              <Le color={e.grayText}size={11}/>
+              <S style={r.metaChipText}>
+                {T.timeStr||new Date(T.timestamp).toLocaleTimeString()}
+              </S>
+            </C>
 
-            {selectedCrash.deviceInfo?.platform && (<View style={localStyles.metaChip}>
-                {selectedCrash.deviceInfo.platform === 'ios' ? (<AppleIcon color={AppColors.grayText} size={11}/>) : (<AndroidIcon color={AppColors.grayText} size={11}/>)}
-                <Text style={localStyles.metaChipText}>
-                  {selectedCrash.deviceInfo.platform.toUpperCase()} {selectedCrash.deviceInfo.osVersion}
-                </Text>
-              </View>)}
-          </ScrollView>
-        </View>
-      </View>
+            {T.deviceInfo?.platform&&<C style={r.metaChip}>
+                {T.deviceInfo.platform==="ios"?<He color={e.grayText}size={11}/>:<Ae color={e.grayText}size={11}/>}
+                <S style={r.metaChipText}>
+                  {T.deviceInfo.platform.toUpperCase()} {T.deviceInfo.osVersion}
+                </S>
+              </C>}
+          </U>
+        </C>
+      </C>
 
       
-      <View style={{ paddingHorizontal: 8, paddingTop: 6, paddingBottom: 4 }}>
-        <SegmentedTabs tabs={tabsConfig} activeKey={activeSubTab} onChange={tab => setActiveSubTab(tab)}/>
-      </View>
+      <C style={{paddingHorizontal:8,paddingTop:6,paddingBottom:4}}>
+        <Se tabs={oe}activeKey={F}onChange={x=>Z(x)}/>
+      </C>
 
       
-      {(activeSubTab === 'stack' || activeSubTab === 'raw') && (<View style={{ paddingHorizontal: 12, paddingBottom: 6 }}>
-          <View style={localStyles.searchContainer}>
-            <SearchIcon color={AppColors.grayText} size={14}/>
-            <TextInput style={localStyles.searchInput} placeholder={t('crash.searchDetailPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} value={searchQuery} onChangeText={setSearchQuery} autoCapitalize="none" autoCorrect={false}/>
-            {searchQuery.length > 0 && (<TouchableScale onPress={() => setSearchQuery('')} hitSlop={10}>
-                <ClearIcon color={AppColors.grayText} size={13}/>
-              </TouchableScale>)}
-          </View>
-        </View>)}
+      {(F==="stack"||F==="raw")&&<C style={{paddingHorizontal:12,paddingBottom:6}}>
+          <C style={r.searchContainer}>
+            <Ie color={e.grayText}size={14}/>
+            <Ce style={r.searchInput}placeholder={V("crash.searchDetailPlaceholder")}placeholderTextColor={e.grayTextWeak}value={R}onChangeText={E}autoCapitalize="none"autoCorrect={!1}/>
+            {R.length>0&&<H onPress={()=>E("")}hitSlop={10}>
+                <Fe color={e.grayText}size={13}/>
+              </H>}
+          </C>
+        </C>}
 
       
-      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40, gap: 12 }}>
+      <U style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40,gap:12}}>
         
-        {activeSubTab === 'stack' && (<View style={{ gap: 10 }}>
+        {F==="stack"&&<C style={{gap:10}}>
             
-            <View style={localStyles.filterChipsRow}>
-              <TouchableScale onPress={() => setStackFilter('app')} style={[
-                localStyles.filterChip,
-                stackFilter === 'app' && localStyles.filterChipActive,
-            ]}>
-                <AppFramesIcon size={12} color={stackFilter === 'app'
-                ? AppColors.white
-                : AppColors.purple}/>
-                <Text style={[
-                localStyles.filterChipText,
-                stackFilter === 'app' && localStyles.filterChipTextActive,
-            ]}>
-                  {t('crash.appFrames', { count: appStackFrames.length })}
-                </Text>
-              </TouchableScale>
+            <C style={r.filterChipsRow}>
+              <H onPress={()=>G("app")}style={[r.filterChip,I==="app"&&r.filterChipActive]}>
+                <Ee size={12}color={I==="app"?e.white:e.purple}/>
+                <S style={[r.filterChipText,I==="app"&&r.filterChipTextActive]}>
+                  {V("crash.appFrames",{count:v.length})}
+                </S>
+              </H>
 
-              <TouchableScale onPress={() => setStackFilter('all')} style={[
-                localStyles.filterChip,
-                stackFilter === 'all' && localStyles.filterChipActive,
-            ]}>
-                <AllFramesIcon size={12} color={stackFilter === 'all'
-                ? AppColors.white
-                : AppColors.purple}/>
-                <Text style={[
-                localStyles.filterChipText,
-                stackFilter === 'all' && localStyles.filterChipTextActive,
-            ]}>
-                  {t('crash.allFrames', { count: stackFrames.length })}
-                </Text>
-              </TouchableScale>
-            </View>
+              <H onPress={()=>G("all")}style={[r.filterChip,I==="all"&&r.filterChipActive]}>
+                <Ge size={12}color={I==="all"?e.white:e.purple}/>
+                <S style={[r.filterChipText,I==="all"&&r.filterChipTextActive]}>
+                  {V("crash.allFrames",{count:z.length})}
+                </S>
+              </H>
+            </C>
 
             
-            {displayedFrames.length > 0 ? (displayedFrames
-                .filter(frame => {
-                if (!searchQuery.trim())
-                    return true;
-                const q = searchQuery.toLowerCase();
-                return (frame.method.toLowerCase().includes(q) ||
-                    frame.file.toLowerCase().includes(q));
-            })
-                .map((frame, index) => {
-                const isOrigin = index === 0 && frame.isAppCode;
-                return (<View key={`frame_${index}`} style={[
-                        localStyles.frameCard,
-                        isOrigin && localStyles.originFrameCard,
-                    ]}>
-                      <View style={localStyles.frameCardHeader}>
-                        <View style={localStyles.frameIndexBadge}>
-                          <Text style={localStyles.frameIndexBadgeText}>
-                            #{index + 1}
-                          </Text>
-                        </View>
-                        <View style={[
-                        localStyles.frameTypeBadge,
-                        frame.isAppCode
-                            ? { backgroundColor: '#ECFDF5', borderColor: '#A7F3D0' }
-                            : { backgroundColor: '#F1F5F9', borderColor: '#E2E8F0' },
-                    ]}>
-                          <Text style={[
-                        localStyles.frameTypeBadgeText,
-                        frame.isAppCode
-                            ? { color: '#059669' }
-                            : { color: '#64748B' },
-                    ]}>
-                            {frame.isAppCode ? t('crash.frameApp') : t('crash.frameLib')}
-                          </Text>
-                        </View>
+            {P.length>0?P.filter(x=>{if(!R.trim())return!0;const k=R.toLowerCase();return x.method.toLowerCase().includes(k)||x.file.toLowerCase().includes(k)}).map((x,k)=>{const M=k===0&&x.isAppCode;return<C key={`frame_${k}`}style={[r.frameCard,M&&r.originFrameCard]}>
+                      <C style={r.frameCardHeader}>
+                        <C style={r.frameIndexBadge}>
+                          <S style={r.frameIndexBadgeText}>
+                            #{k+1}
+                          </S>
+                        </C>
+                        <C style={[r.frameTypeBadge,x.isAppCode?{backgroundColor:"#ECFDF5",borderColor:"#A7F3D0"}:{backgroundColor:"#F1F5F9",borderColor:"#E2E8F0"}]}>
+                          <S style={[r.frameTypeBadgeText,x.isAppCode?{color:"#059669"}:{color:"#64748B"}]}>
+                            {x.isAppCode?V("crash.frameApp"):V("crash.frameLib")}
+                          </S>
+                        </C>
 
-                        <Text style={localStyles.frameMethodText} numberOfLines={1}>
-                          <HighlightText text={frame.method || t('crash.anonymous')} highlight={searchQuery}/>
-                        </Text>
+                        <S style={r.frameMethodText}numberOfLines={1}>
+                          <Q text={x.method||V("crash.anonymous")}highlight={R}/>
+                        </S>
 
-                        <TouchableScale onPress={() => handleCopyFrame(frame, index)} hitSlop={8} style={localStyles.frameCopyBtn}>
-                          {copiedFrameIndex === index ? (<CircleCheckIcon color={AppColors.greenColor} size={12}/>) : (<CopyIcon color={AppColors.grayText} size={12}/>)}
-                          <Text style={localStyles.frameCopyBtnText}>
-                            {copiedFrameIndex === index
-                        ? t('crash.frameCopied')
-                        : t('crash.frameCopy')}
-                          </Text>
-                        </TouchableScale>
-                      </View>
+                        <H onPress={()=>te(x,k)}hitSlop={8}style={r.frameCopyBtn}>
+                          {J===k?<Y color={e.greenColor}size={12}/>:<K color={e.grayText}size={12}/>}
+                          <S style={r.frameCopyBtnText}>
+                            {V(J===k?"crash.frameCopied":"crash.frameCopy")}
+                          </S>
+                        </H>
+                      </C>
 
-                      <View style={localStyles.frameLocationRow}>
-                        <Text style={localStyles.frameFileText} numberOfLines={1}>
-                          <HighlightText text={frame.file} highlight={searchQuery}/>
-                        </Text>
-                        <Text style={localStyles.frameLineText}>
-                          :{frame.lineNumber}
-                          {frame.column ? `:${frame.column}` : ''}
-                        </Text>
-                      </View>
+                      <C style={r.frameLocationRow}>
+                        <S style={r.frameFileText}numberOfLines={1}>
+                          <Q text={x.file}highlight={R}/>
+                        </S>
+                        <S style={r.frameLineText}>
+                          :{x.lineNumber}
+                          {x.column?`:${x.column}`:""}
+                        </S>
+                      </C>
 
-                      {frame.raw && (<Text style={localStyles.frameRawText} numberOfLines={2}>
-                          {frame.raw}
-                        </Text>)}
-                    </View>);
-            })) : (<View style={localStyles.emptyContainer}>
-                <Text style={localStyles.emptyText}>
-                  {selectedCrash.stack
-                    ? selectedCrash.stack
-                    : t('crash.noStackTrace')}
-                </Text>
-              </View>)}
+                      {x.raw&&<S style={r.frameRawText}numberOfLines={2}>
+                          {x.raw}
+                        </S>}
+                    </C>}):<C style={r.emptyContainer}>
+                <S style={r.emptyText}>
+                  {T.stack?T.stack:V("crash.noStackTrace")}
+                </S>
+              </C>}
 
-            {selectedCrash.componentStack && (<View style={localStyles.sectionCard}>
-                <View style={localStyles.sectionCardHeader}>
-                  <LayersIcon color={AppColors.purple} size={14}/>
-                  <Text style={localStyles.sectionCardTitle}>
-                    {t('crash.componentHierarchy')}
-                  </Text>
-                </View>
-                <Text style={localStyles.componentStackText}>
-                  {selectedCrash.componentStack}
-                </Text>
-              </View>)}
-          </View>)}
+            {T.componentStack&&<C style={r.sectionCard}>
+                <C style={r.sectionCardHeader}>
+                  <X color={e.purple}size={14}/>
+                  <S style={r.sectionCardTitle}>
+                    {V("crash.componentHierarchy")}
+                  </S>
+                </C>
+                <S style={r.componentStackText}>
+                  {T.componentStack}
+                </S>
+              </C>}
+          </C>}
 
         
-        {activeSubTab === 'diagnostics' && (<View style={{ gap: 12 }}>
+        {F==="diagnostics"&&<C style={{gap:12}}>
             
-            <View style={localStyles.sectionCard}>
-              <View style={[
-                localStyles.sectionCardHeader,
-                { justifyContent: 'space-between' },
-            ]}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                  <GlobeIcon color={AppColors.purple} size={14}/>
-                  <Text style={localStyles.sectionCardTitle}>
-                    {t('crash.deviceEnvironment')}
-                  </Text>
-                </View>
-                <CopyButton value={selectedCrash.deviceInfo || {
-                platform: Platform.OS,
-                osVersion: String(Platform.Version),
-            }} label="Diagnostics"/>
-              </View>
+            <C style={r.sectionCard}>
+              <C style={[r.sectionCardHeader,{justifyContent:"space-between"}]}>
+                <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                  <De color={e.purple}size={14}/>
+                  <S style={r.sectionCardTitle}>
+                    {V("crash.deviceEnvironment")}
+                  </S>
+                </C>
+                <$ value={T.deviceInfo||{platform:W.OS,osVersion:String(W.Version)}}label="Diagnostics"/>
+              </C>
 
-              <View style={localStyles.diagGrid}>
-                <View style={localStyles.diagItem}>
-                  <Text style={localStyles.diagLabel}>{t('crash.platform')}</Text>
-                  <Text style={localStyles.diagValue}>
-                    {selectedCrash.deviceInfo?.platform?.toUpperCase() || Platform.OS.toUpperCase()}
-                  </Text>
-                </View>
+              <C style={r.diagGrid}>
+                <C style={r.diagItem}>
+                  <S style={r.diagLabel}>{V("crash.platform")}</S>
+                  <S style={r.diagValue}>
+                    {T.deviceInfo?.platform?.toUpperCase()||W.OS.toUpperCase()}
+                  </S>
+                </C>
 
-                <View style={localStyles.diagItem}>
-                  <Text style={localStyles.diagLabel}>{t('crash.osVersion')}</Text>
-                  <Text style={localStyles.diagValue}>
-                    {selectedCrash.deviceInfo?.osVersion || String(Platform.Version)}
-                  </Text>
-                </View>
+                <C style={r.diagItem}>
+                  <S style={r.diagLabel}>{V("crash.osVersion")}</S>
+                  <S style={r.diagValue}>
+                    {T.deviceInfo?.osVersion||String(W.Version)}
+                  </S>
+                </C>
 
-                <View style={localStyles.diagItem}>
-                  <Text style={localStyles.diagLabel}>{t('crash.reactNative')}</Text>
-                  <Text style={localStyles.diagValue}>
-                    {selectedCrash.deviceInfo?.rnVersion || '0.74+'}
-                  </Text>
-                </View>
+                <C style={r.diagItem}>
+                  <S style={r.diagLabel}>{V("crash.reactNative")}</S>
+                  <S style={r.diagValue}>
+                    {T.deviceInfo?.rnVersion||"0.74+"}
+                  </S>
+                </C>
 
-                <View style={localStyles.diagItem}>
-                  <Text style={localStyles.diagLabel}>{t('crash.jsEngine')}</Text>
-                  <Text style={localStyles.diagValue}>
-                    {selectedCrash.deviceInfo?.isHermes ? t('crash.hermesEngine') : t('crash.jsc')}
-                  </Text>
-                </View>
+                <C style={r.diagItem}>
+                  <S style={r.diagLabel}>{V("crash.jsEngine")}</S>
+                  <S style={r.diagValue}>
+                    {T.deviceInfo?.isHermes?V("crash.hermesEngine"):V("crash.jsc")}
+                  </S>
+                </C>
 
-                <View style={localStyles.diagItem}>
-                  <Text style={localStyles.diagLabel}>{t('crash.architecture')}</Text>
-                  <Text style={localStyles.diagValue}>
-                    {selectedCrash.deviceInfo?.isFabric ? t('crash.fabricNewArch') : t('crash.paperLegacy')}
-                  </Text>
-                </View>
+                <C style={r.diagItem}>
+                  <S style={r.diagLabel}>{V("crash.architecture")}</S>
+                  <S style={r.diagValue}>
+                    {T.deviceInfo?.isFabric?V("crash.fabricNewArch"):V("crash.paperLegacy")}
+                  </S>
+                </C>
 
-                <View style={localStyles.diagItem}>
-                  <Text style={localStyles.diagLabel}>{t('crash.appState')}</Text>
-                  <Text style={localStyles.diagValue}>
-                    {selectedCrash.deviceInfo?.appState || 'active'}
-                  </Text>
-                </View>
-              </View>
-            </View>
+                <C style={r.diagItem}>
+                  <S style={r.diagLabel}>{V("crash.appState")}</S>
+                  <S style={r.diagValue}>
+                    {T.deviceInfo?.appState||"active"}
+                  </S>
+                </C>
+              </C>
+            </C>
 
             
-            {selectedCrash.memoryInfo && (<View style={localStyles.sectionCard}>
-                <View style={[
-                    localStyles.sectionCardHeader,
-                    { justifyContent: 'space-between' },
-                ]}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                    <LayersIcon color={AppColors.purple} size={14}/>
-                    <Text style={localStyles.sectionCardTitle}>
-                      {t('crash.jsHeapMemory')}
-                    </Text>
-                  </View>
-                  <CopyButton value={selectedCrash.memoryInfo} label="Memory Info"/>
-                </View>
+            {T.memoryInfo&&<C style={r.sectionCard}>
+                <C style={[r.sectionCardHeader,{justifyContent:"space-between"}]}>
+                  <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                    <X color={e.purple}size={14}/>
+                    <S style={r.sectionCardTitle}>
+                      {V("crash.jsHeapMemory")}
+                    </S>
+                  </C>
+                  <$ value={T.memoryInfo}label="Memory Info"/>
+                </C>
 
-                <View style={localStyles.diagGrid}>
-                  <View style={localStyles.diagItem}>
-                    <Text style={localStyles.diagLabel}>{t('crash.usedHeap')}</Text>
-                    <Text style={localStyles.diagValue}>
-                      {selectedCrash.memoryInfo.usedJSHeapSize} MB
-                    </Text>
-                  </View>
+                <C style={r.diagGrid}>
+                  <C style={r.diagItem}>
+                    <S style={r.diagLabel}>{V("crash.usedHeap")}</S>
+                    <S style={r.diagValue}>
+                      {T.memoryInfo.usedJSHeapSize} MB
+                    </S>
+                  </C>
 
-                  <View style={localStyles.diagItem}>
-                    <Text style={localStyles.diagLabel}>{t('crash.totalHeap')}</Text>
-                    <Text style={localStyles.diagValue}>
-                      {selectedCrash.memoryInfo.totalJSHeapSize} MB
-                    </Text>
-                  </View>
-                </View>
-              </View>)}
-          </View>)}
+                  <C style={r.diagItem}>
+                    <S style={r.diagLabel}>{V("crash.totalHeap")}</S>
+                    <S style={r.diagValue}>
+                      {T.memoryInfo.totalJSHeapSize} MB
+                    </S>
+                  </C>
+                </C>
+              </C>}
+          </C>}
 
         
-        {activeSubTab === 'breadcrumbs' && (<View style={{ gap: 10 }}>
-            {selectedCrash.breadcrumbs && selectedCrash.breadcrumbs.length > 0 && (<View style={{
-                    flexDirection: 'row',
-                    justifyContent: 'flex-end',
-                    marginBottom: 2,
-                }}>
-                <CopyButton value={selectedCrash.breadcrumbs} label="All Breadcrumbs"/>
-              </View>)}
-            {selectedCrash.breadcrumbs && selectedCrash.breadcrumbs.length > 0 ? (selectedCrash.breadcrumbs.map((b, idx) => (<View key={`crumb_${idx}`} style={localStyles.breadcrumbCard}>
-                  <View style={localStyles.breadcrumbHeader}>
-                    <View style={localStyles.breadcrumbTag}>
-                      <Text style={localStyles.breadcrumbTagText}>
-                        {b.type.toUpperCase()}
-                      </Text>
-                    </View>
-                    <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 8,
-                }}>
-                      <Text style={localStyles.breadcrumbTime}>
-                        {new Date(b.timestamp).toLocaleTimeString()}
-                      </Text>
-                      <CopyButton value={`${new Date(b.timestamp).toLocaleTimeString()} [${b.type.toUpperCase()}] ${b.message}${b.data ? ' ' + JSON.stringify(b.data) : ''}`} label="Breadcrumb"/>
-                    </View>
-                  </View>
-                  <Text style={localStyles.breadcrumbMessage}>{b.message}</Text>
-                  {b.data && (<View style={{ marginTop: 6 }}>
-                      <JsonViewer data={b.data} search="" wrap/>
-                    </View>)}
-                </View>))) : (<View style={localStyles.emptyContainer}>
-                <Text style={localStyles.emptyText}>
-                  {t('crash.noBreadcrumbs')}
-                </Text>
-              </View>)}
-          </View>)}
+        {F==="breadcrumbs"&&<C style={{gap:10}}>
+            {T.breadcrumbs&&T.breadcrumbs.length>0&&<C style={{flexDirection:"row",justifyContent:"flex-end",marginBottom:2}}>
+                <$ value={T.breadcrumbs}label="All Breadcrumbs"/>
+              </C>}
+            {T.breadcrumbs&&T.breadcrumbs.length>0?T.breadcrumbs.map((x,k)=><C key={`crumb_${k}`}style={r.breadcrumbCard}>
+                  <C style={r.breadcrumbHeader}>
+                    <C style={r.breadcrumbTag}>
+                      <S style={r.breadcrumbTagText}>
+                        {x.type.toUpperCase()}
+                      </S>
+                    </C>
+                    <C style={{flexDirection:"row",alignItems:"center",gap:8}}>
+                      <S style={r.breadcrumbTime}>
+                        {new Date(x.timestamp).toLocaleTimeString()}
+                      </S>
+                      <$ value={`${new Date(x.timestamp).toLocaleTimeString()} [${x.type.toUpperCase()}] ${x.message}${x.data?" "+JSON.stringify(x.data):""}`}label="Breadcrumb"/>
+                    </C>
+                  </C>
+                  <S style={r.breadcrumbMessage}>{x.message}</S>
+                  {x.data&&<C style={{marginTop:6}}>
+                      <_ data={x.data}search=""wrap/>
+                    </C>}
+                </C>):<C style={r.emptyContainer}>
+                <S style={r.emptyText}>
+                  {V("crash.noBreadcrumbs")}
+                </S>
+              </C>}
+          </C>}
 
         
-        {activeSubTab === 'raw' && (<View style={localStyles.rawContainer}>
-            <JsonViewer data={rawCrashData} search={searchQuery} wrap/>
-          </View>)}
-      </ScrollView>
-    </View>);
-});
-export default CrashDetail;
-const localStyles = StyleSheet.create({
-    infoBar: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 12,
-        padding: 12,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        shadowColor: AppColors.black,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.05,
-        shadowRadius: 3,
-        elevation: 2,
-        gap: 8,
-    },
-    badgeRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    pillBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 8,
-        paddingVertical: 3,
-        borderRadius: 12,
-        borderWidth: 1,
-        gap: 5,
-    },
-    statusDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-    },
-    pillBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        letterSpacing: 0.4,
-    },
-    actionButton: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: `${AppColors.purple}14`,
-        borderColor: `${AppColors.purple}33`,
-        borderWidth: 1,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 8,
-    },
-    actionButtonText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: AppColors.purple,
-    },
-    titleText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors.primaryBlack,
-        lineHeight: 19,
-    },
-    metaRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingVertical: 2,
-    },
-    metaChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: AppColors.grayBackground,
-        paddingHorizontal: 7,
-        paddingVertical: 3,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    metaChipText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayText,
-    },
-    searchContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.primaryLight,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        borderRadius: 8,
-        paddingHorizontal: 10,
-        height: 36,
-        gap: 8,
-    },
-    searchInput: {
-        flex: 1,
-        fontFamily: AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-        paddingVertical: 0,
-    },
-    filterChipsRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    filterChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: 8,
-        backgroundColor: AppColors.primaryLight,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    filterChipActive: {
-        backgroundColor: AppColors.purple,
-        borderColor: AppColors.purple,
-    },
-    filterChipText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayText,
-    },
-    filterChipTextActive: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.white,
-    },
-    frameCard: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 8,
-        padding: 10,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        gap: 4,
-    },
-    originFrameCard: {
-        borderColor: '#6EE7B7',
-        backgroundColor: '#F0FDF4',
-    },
-    frameCardHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    frameIndexBadge: {
-        minWidth: 24,
-        height: 18,
-        paddingHorizontal: 4,
-        borderRadius: 4,
-        backgroundColor: `${AppColors.purple}14`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    frameIndexBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.purple,
-    },
-    frameTypeBadge: {
-        paddingHorizontal: 5,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-    },
-    frameTypeBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 8.5,
-    },
-    frameMethodText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-        flex: 1,
-    },
-    frameLocationRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    frameFileText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayText,
-        flex: 1,
-    },
-    frameLineText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.purple,
-    },
-    frameCopyBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 5,
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    frameCopyBtnText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.grayText,
-    },
-    frameRawText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 9.5,
-        color: AppColors.grayTextWeak,
-        backgroundColor: `${AppColors.primaryBlack}06`,
-        borderRadius: 5,
-        paddingHorizontal: 7,
-        paddingVertical: 4,
-        overflow: 'hidden',
-    },
-    componentStackText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        lineHeight: 16,
-        color: AppColors.grayText,
-        backgroundColor: `${AppColors.primaryBlack}06`,
-        borderRadius: 6,
-        padding: 10,
-    },
-    sectionCard: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 10,
-        padding: 12,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        gap: 10,
-    },
-    sectionCardHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingBottom: 6,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-    },
-    sectionCardTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-    },
-    diagGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        rowGap: 8,
-        columnGap: 12,
-    },
-    diagItem: {
-        width: '47%',
-        gap: 2,
-    },
-    diagLabel: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    diagValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11.5,
-        color: AppColors.primaryBlack,
-    },
-    breadcrumbCard: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 8,
-        padding: 10,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        gap: 4,
-    },
-    breadcrumbHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    breadcrumbTag: {
-        backgroundColor: `${AppColors.purple}14`,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-    },
-    breadcrumbTagText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.purple,
-    },
-    breadcrumbTime: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    breadcrumbMessage: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11.5,
-        color: AppColors.primaryBlack,
-        marginTop: 2,
-    },
-    rawContainer: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 10,
-        padding: 10,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    emptyContainer: {
-        padding: 16,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    emptyText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayText,
-        textAlign: 'center',
-    },
-});
+        {F==="raw"&&<C style={r.rawContainer}>
+            <_ data={ee}search={R}wrap/>
+          </C>}
+      </U>
+    </C>});export default je;const r=ie.create({infoBar:{backgroundColor:e.primaryLight,borderRadius:12,padding:12,borderWidth:1,borderColor:e.grayBorderSecondary,shadowColor:e.black,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:3,elevation:2,gap:8},badgeRow:{flexDirection:"row",alignItems:"center",gap:8},pillBadge:{flexDirection:"row",alignItems:"center",paddingHorizontal:8,paddingVertical:3,borderRadius:12,borderWidth:1,gap:5},statusDot:{width:6,height:6,borderRadius:3},pillBadgeText:{fontFamily:B.interBold,fontSize:9.5,letterSpacing:.4},actionButton:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:`${e.purple}14`,borderColor:`${e.purple}33`,borderWidth:1,paddingHorizontal:8,paddingVertical:4,borderRadius:8},actionButtonText:{fontFamily:B.interBold,fontSize:10.5,color:e.purple},titleText:{fontFamily:B.interBold,fontSize:14,color:e.primaryBlack,lineHeight:19},metaRow:{flexDirection:"row",alignItems:"center",gap:6,paddingVertical:2},metaChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.grayBackground,paddingHorizontal:7,paddingVertical:3,borderRadius:6,borderWidth:1,borderColor:e.dividerColor},metaChipText:{fontFamily:B.interMedium,fontSize:10,color:e.grayText},searchContainer:{flexDirection:"row",alignItems:"center",backgroundColor:e.primaryLight,borderWidth:1,borderColor:e.grayBorderSecondary,borderRadius:8,paddingHorizontal:10,height:36,gap:8},searchInput:{flex:1,fontFamily:B.interRegular,fontSize:12,color:e.primaryBlack,paddingVertical:0},filterChipsRow:{flexDirection:"row",alignItems:"center",gap:8},filterChip:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:10,paddingVertical:5,borderRadius:8,backgroundColor:e.primaryLight,borderWidth:1,borderColor:e.grayBorderSecondary},filterChipActive:{backgroundColor:e.purple,borderColor:e.purple},filterChipText:{fontFamily:B.interMedium,fontSize:11,color:e.grayText},filterChipTextActive:{fontFamily:B.interBold,color:e.white},frameCard:{backgroundColor:e.primaryLight,borderRadius:8,padding:10,borderWidth:1,borderColor:e.grayBorderSecondary,gap:4},originFrameCard:{borderColor:"#6EE7B7",backgroundColor:"#F0FDF4"},frameCardHeader:{flexDirection:"row",alignItems:"center",gap:8},frameIndexBadge:{minWidth:24,height:18,paddingHorizontal:4,borderRadius:4,backgroundColor:`${e.purple}14`,alignItems:"center",justifyContent:"center"},frameIndexBadgeText:{fontFamily:B.interBold,fontSize:9,color:e.purple},frameTypeBadge:{paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1},frameTypeBadgeText:{fontFamily:B.interBold,fontSize:8.5},frameMethodText:{fontFamily:B.interBold,fontSize:12,color:e.primaryBlack,flex:1},frameLocationRow:{flexDirection:"row",alignItems:"center"},frameFileText:{fontFamily:B.interRegular,fontSize:11,color:e.grayText,flex:1},frameLineText:{fontFamily:B.interBold,fontSize:11,color:e.purple},frameCopyBtn:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:6,paddingVertical:3,borderRadius:5,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.dividerColor},frameCopyBtnText:{fontFamily:B.interBold,fontSize:9,color:e.grayText},frameRawText:{fontFamily:B.interRegular,fontSize:9.5,color:e.grayTextWeak,backgroundColor:`${e.primaryBlack}06`,borderRadius:5,paddingHorizontal:7,paddingVertical:4,overflow:"hidden"},componentStackText:{fontFamily:B.interRegular,fontSize:11,lineHeight:16,color:e.grayText,backgroundColor:`${e.primaryBlack}06`,borderRadius:6,padding:10},sectionCard:{backgroundColor:e.primaryLight,borderRadius:10,padding:12,borderWidth:1,borderColor:e.grayBorderSecondary,gap:10},sectionCardHeader:{flexDirection:"row",alignItems:"center",gap:6,paddingBottom:6,borderBottomWidth:1,borderBottomColor:e.dividerColor},sectionCardTitle:{fontFamily:B.interBold,fontSize:12.5,color:e.primaryBlack},diagGrid:{flexDirection:"row",flexWrap:"wrap",rowGap:8,columnGap:12},diagItem:{width:"47%",gap:2},diagLabel:{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak},diagValue:{fontFamily:B.interBold,fontSize:11.5,color:e.primaryBlack},breadcrumbCard:{backgroundColor:e.primaryLight,borderRadius:8,padding:10,borderWidth:1,borderColor:e.grayBorderSecondary,gap:4},breadcrumbHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},breadcrumbTag:{backgroundColor:`${e.purple}14`,paddingHorizontal:6,paddingVertical:2,borderRadius:4},breadcrumbTagText:{fontFamily:B.interBold,fontSize:9,color:e.purple},breadcrumbTime:{fontFamily:B.interRegular,fontSize:10,color:e.grayTextWeak},breadcrumbMessage:{fontFamily:B.interRegular,fontSize:11.5,color:e.primaryBlack,marginTop:2},rawContainer:{backgroundColor:e.primaryLight,borderRadius:10,padding:10,borderWidth:1,borderColor:e.grayBorderSecondary},emptyContainer:{padding:16,alignItems:"center",justifyContent:"center",backgroundColor:e.primaryLight,borderRadius:8,borderWidth:1,borderColor:e.grayBorderSecondary},emptyText:{fontFamily:B.interRegular,fontSize:11,color:e.grayText,textAlign:"center"}});