react-native-inapp-inspector 2.3.18 → 2.3.20

package/dist/esm/components/LogCard.js

@@ -1,584 +1,112 @@
-import React, { useEffect, useRef, useMemo } from 'react';
-import { Alert, Animated, Linking, View, Pressable, Text, StyleSheet, } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-import { AppColors } from '../styles/AppColors';
-import { METHOD_COLORS } from '../constants';
-import { getStatusColor, getDurationColor, formatDateTime, getSize, getPath, getBaseUrl, } from '../helpers';
-import { CalendarIcon, ClockIcon, SizeIcon, CircleCheckIcon, CircleAlertIcon, CircleXIcon, RepeatIcon, PinIcon, } from './NetworkIcons';
-import { AppFonts } from '../styles/AppFonts';
-import HighlightText from './HighlightText';
-import TouchableScale from './TouchableScale';
-import { useTranslation } from '../i18n';
-const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, timelineTotalRange, isNew, isSelected, onToggleSelect, searchStr, }) {
-    const { t } = useTranslation();
-    const methodColor = METHOD_COLORS[item.method] ?? METHOD_COLORS.ALL;
-    const urlParsed = useMemo(() => {
-        try {
-            const u = new URL(item.url);
-            const host = u.host;
-            const path = u.pathname + (u.search ? u.search : '');
-            const isHttps = u.protocol === 'https:';
-            return { host, path: path || '/', isHttps };
-        }
-        catch {
-            const isHttps = item.url.toLowerCase().startsWith('https:');
-            const path = getPath(item.url);
-            const host = getBaseUrl(item.url).replace(/^https?:\/\//, '');
-            return { host, path: path || item.url, isHttps };
-        }
-    }, [item.url]);
-    const handleOpenUrl = (e) => {
-        e?.stopPropagation?.();
-        Alert.alert(t('common.openInBrowser') || 'Open in Browser', `${t('common.openInBrowserPrompt') || 'Are you sure you want to open this URL in your external browser?'}\n\n${item.url}`, [
-            { text: t('common.cancel') || 'Cancel', style: 'cancel' },
-            {
-                text: t('common.open') || 'Open',
-                onPress: () => {
-                    Linking.canOpenURL(item.url)
-                        .then(supported => {
-                        if (supported) {
-                            Linking.openURL(item.url);
-                        }
-                        else {
-                            Linking.openURL(item.url).catch(() => { });
-                        }
-                    })
-                        .catch(() => { });
-                },
-            },
-        ]);
-    };
-    const isFailed = item.status === 0 || (item.status != null && item.status >= 400);
-    const isLoading = item.status == null;
-    const statusColor = getStatusColor(item.status);
-    const durationColor = getDurationColor(item.duration);
-    const cardStatusColor = isLoading
-        ? AppColors.darkOrange
-        : isFailed
-            ? AppColors.errorColor
-            : AppColors.greenColor;
-    const shimmerOpacity = useRef(new Animated.Value(isNew ? 0.35 : 0)).current;
-    useEffect(() => {
-        if (isNew) {
-            Animated.timing(shimmerOpacity, {
-                toValue: 0,
-                duration: 1200,
-                useNativeDriver: false,
-            }).start();
-        }
-    }, [isNew]);
-    const getStatusText = () => {
-        if (isLoading)
-            return '...';
-        if (item.status === 0 || item.status == null) {
-            return t('network.statusFailed') || 'FAILED';
-        }
-        const num = typeof item.status === 'number' ? item.status : parseInt(String(item.status || 0), 10);
-        if (num === 200)
-            return '200 OK';
-        if (num === 201)
-            return '201 Created';
-        if (num === 204)
-            return '204 No Content';
-        if (num === 304)
-            return '304 Not Modified';
-        if (num === 400)
-            return '400 Bad Req';
-        if (num === 401)
-            return '401 Unauth';
-        if (num === 403)
-            return '403 Forbidden';
-        if (num === 404)
-            return '404 Not Found';
-        if (num === 500)
-            return '500 Error';
-        return String(item.status);
-    };
-    const renderStatusIcon = () => {
-        if (isLoading) {
-            return <ClockIcon color={AppColors.darkOrange} size={10}/>;
-        }
-        const num = typeof item.status === 'number' ? item.status : parseInt(String(item.status || 0), 10);
-        if (num >= 200 && num < 300) {
-            return <CircleCheckIcon color={AppColors.greenColor} size={10}/>;
-        }
-        if (num >= 300 && num < 400) {
-            return <RepeatIcon color={AppColors.amber700} size={10}/>;
-        }
-        if (num >= 400 && num < 500) {
-            return <CircleAlertIcon color={AppColors.darkOrange} size={10}/>;
-        }
-        return <CircleXIcon color={AppColors.errorColor} size={10}/>;
-    };
-    const triggeredAt = formatDateTime(item.startTime);
-    const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
-    return (<View style={styles.container}>
-      <TouchableScale onPress={onPress} style={[
-            styles.card,
-            {
-                borderLeftWidth: 3.5,
-                borderLeftColor: cardStatusColor,
-                backgroundColor: isFailed ? '#FFF8F8' : AppColors.white,
-            },
-        ]}>
-        <View style={styles.cardBody}>
+import oe,{useEffect as te,useRef as le,useMemo as M}from"react";import{Alert as ae,Animated as I,Linking as D,View as C,Pressable as U,Text as T,StyleSheet as v}from"react-native";import Ce,{Path as Te}from"react-native-svg";import{AppColors as r}from"../styles/AppColors";import{METHOD_COLORS as q}from"../constants";import{getStatusColor as Be,getDurationColor as Fe,formatDateTime as Se,getSize as Re,getPath as ze,getBaseUrl as Ve}from"../helpers";import{CalendarIcon as He,ClockIcon as N,SizeIcon as Le,CircleCheckIcon as $e,CircleAlertIcon as Ie,CircleXIcon as De,RepeatIcon as Oe,PinIcon as Pe}from"./NetworkIcons";import{AppFonts as B}from"../styles/AppFonts";import We from"./HighlightText";import Ae from"./TouchableScale";import{useTranslation as Ee}from"../i18n";const Me=oe.memo(function({item:e,onPress:_,timelineMinStart:Ue,timelineTotalRange:ve,isNew:L,isSelected:O,onToggleSelect:G,searchStr:J}){const{t:V}=Ee(),P=q[e.method]??q.ALL,F=M(()=>{try{const t=new URL(e.url),z=t.host,E=t.pathname+(t.search?t.search:""),re=t.protocol==="https:";return{host:z,path:E||"/",isHttps:re}}catch{const t=e.url.toLowerCase().startsWith("https:"),z=ze(e.url);return{host:Ve(e.url).replace(/^https?:\/\//,""),path:z||e.url,isHttps:t}}},[e.url]),W=M(()=>{if(!e.caller||e.caller==="Unknown")return null;const t=e.caller.split(/[\/\\]/);return(t[t.length-1]||e.caller).replace(/\?.*$/,"").replace(/^[a-zA-Z0-9_$]+@/,"")},[e.caller]),K=t=>{t?.stopPropagation?.(),ae.alert(V("common.openInBrowser")||"Open in Browser",`${V("common.openInBrowserPrompt")||"Are you sure you want to open this URL in your external browser?"}
+
+${e.url}`,[{text:V("common.cancel")||"Cancel",style:"cancel"},{text:V("common.open")||"Open",onPress:()=>{D.canOpenURL(e.url).then(z=>{z?D.openURL(e.url):D.openURL(e.url).catch(()=>{})}).catch(()=>{})}}])},S=e.status===0||e.status!=null&&e.status>=400,R=e.status==null,$=Be(e.status),H=Fe(e.duration),Q=R?r.darkOrange:S?r.errorColor:r.greenColor,A=le(new I.Value(L?.35:0)).current;te(()=>{L&&I.timing(A,{toValue:0,duration:1200,useNativeDriver:!1}).start()},[L]);const X=()=>{if(R)return"...";if(e.status===0||e.status==null)return V("network.statusFailed")||"FAILED";const t=typeof e.status=="number"?e.status:parseInt(String(e.status||0),10);return t===200?"200 OK":t===201?"201 Created":t===204?"204 No Content":t===304?"304 Not Modified":t===400?"400 Bad Req":t===401?"401 Unauth":t===403?"403 Forbidden":t===404?"404 Not Found":t===500?"500 Error":String(e.status)},Z=()=>{if(R)return<N color={r.darkOrange}size={10}/>;const t=typeof e.status=="number"?e.status:parseInt(String(e.status||0),10);return t>=200&&t<300?<$e color={r.greenColor}size={10}/>:t>=300&&t<400?<Oe color={r.amber700}size={10}/>:t>=400&&t<500?<Ie color={r.darkOrange}size={10}/>:<De color={r.errorColor}size={10}/>},Y=Se(e.startTime),ee=e.url.split("?")[0].toLowerCase().endsWith(".json");return<C style={o.container}>
+      <Ae onPress={_}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:Q,backgroundColor:S?"#FFF8F8":r.white}]}>
+        <C style={o.cardBody}>
           
-          <View style={styles.cardHeaderRow}>
-            <View style={styles.cardHeaderLeft}>
-              <Pressable onPress={() => onToggleSelect(item.id)} hitSlop={12} style={[
-            styles.smallCheckbox,
-            isSelected && styles.smallCheckboxChecked,
-        ]}>
-                {isSelected && (<Svg width={9} height={9} viewBox="0 0 24 24" fill="none">
-                    <Path d="M20 6L9 17l-5-5" stroke={AppColors.white} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
-                  </Svg>)}
-              </Pressable>
+          <C style={o.cardHeaderRow}>
+            <C style={o.cardHeaderLeft}>
+              <U onPress={()=>G(e.id)}hitSlop={12}style={[o.smallCheckbox,O&&o.smallCheckboxChecked]}>
+                {O&&<Ce width={9}height={9}viewBox="0 0 24 24"fill="none">
+                    <Te d="M20 6L9 17l-5-5"stroke={r.white}strokeWidth="4"strokeLinecap="round"strokeLinejoin="round"/>
+                  </Ce>}
+              </U>
 
-              <Text style={styles.serialNumber}>#{item.id + 1}</Text>
+              <T style={o.serialNumber}>#{e.id+1}</T>
 
-              <View style={[styles.methodBadge, { backgroundColor: methodColor }]}>
-                <Text style={styles.methodBadgeText}>
-                  {item.method}
-                </Text>
-              </View>
+              <C style={[o.methodBadge,{backgroundColor:P}]}>
+                <T style={o.methodBadgeText}>
+                  {e.method}
+                </T>
+              </C>
 
-              {item.client && (<View style={[
-                styles.chip,
-                {
-                    backgroundColor: item.client === 'axios'
-                        ? `${AppColors.purple}14`
-                        : item.client === 'apollo' || item.client === 'graphql'
-                            ? `${AppColors.pink500}14`
-                            : item.client === 'xhr'
-                                ? `${AppColors.amber500}14`
-                                : `${AppColors.sky500}14`,
-                    borderColor: item.client === 'axios'
-                        ? `${AppColors.purple}30`
-                        : item.client === 'apollo' || item.client === 'graphql'
-                            ? `${AppColors.pink500}30`
-                            : item.client === 'xhr'
-                                ? `${AppColors.amber500}30`
-                                : `${AppColors.sky500}30`,
-                },
-            ]}>
-                  <Text style={[
-                styles.chipText,
-                {
-                    color: item.client === 'axios'
-                        ? AppColors.purple
-                        : item.client === 'apollo' || item.client === 'graphql'
-                            ? AppColors.pink500
-                            : item.client === 'xhr'
-                                ? AppColors.amber700
-                                : AppColors.sky600,
-                },
-            ]}>
-                    {item.client.toUpperCase()}
-                  </Text>
-                </View>)}
+              {e.client&&<C style={[o.chip,{backgroundColor:e.client==="axios"?`${r.purple}14`:e.client==="apollo"||e.client==="graphql"?`${r.pink500}14`:e.client==="xhr"?`${r.amber500}14`:`${r.sky500}14`,borderColor:e.client==="axios"?`${r.purple}30`:e.client==="apollo"||e.client==="graphql"?`${r.pink500}30`:e.client==="xhr"?`${r.amber500}30`:`${r.sky500}30`}]}>
+                  <T style={[o.chipText,{color:e.client==="axios"?r.purple:e.client==="apollo"||e.client==="graphql"?r.pink500:e.client==="xhr"?r.amber700:r.sky600}]}>
+                    {e.client.toUpperCase()}
+                  </T>
+                </C>}
 
               
-              {(item.url.toLowerCase().includes('graphql') ||
-            item.client === 'apollo' ||
-            item.client === 'graphql') && (<View style={[
-                styles.chip,
-                {
-                    backgroundColor: AppColors.roseBg,
-                    borderColor: AppColors.roseBorder,
-                },
-            ]}>
-                  <Text style={[
-                styles.chipText,
-                { color: AppColors.pink600 },
-            ]}>
+              {(e.url.toLowerCase().includes("graphql")||e.client==="apollo"||e.client==="graphql")&&<C style={[o.chip,{backgroundColor:r.roseBg,borderColor:r.roseBorder}]}>
+                  <T style={[o.chipText,{color:r.pink600}]}>
                     GQL
-                  </Text>
-                </View>)}
-            </View>
+                  </T>
+                </C>}
+            </C>
 
-            <View style={[
-            styles.statusPill,
-            {
-                backgroundColor: isFailed
-                    ? `${AppColors.errorColor}14`
-                    : isLoading
-                        ? `${AppColors.darkOrange}14`
-                        : `${statusColor}14`,
-                borderColor: isFailed
-                    ? `${AppColors.errorColor}33`
-                    : isLoading
-                        ? `${AppColors.darkOrange}33`
-                        : `${statusColor}33`,
-            },
-        ]}>
-              {renderStatusIcon()}
-              <Text style={[
-            styles.statusPillText,
-            {
-                color: isFailed
-                    ? AppColors.errorColor
-                    : isLoading
-                        ? AppColors.darkOrange
-                        : statusColor,
-            },
-        ]}>
-                {getStatusText()}
-              </Text>
-            </View>
-          </View>
+            <C style={[o.statusPill,{backgroundColor:S?`${r.errorColor}14`:R?`${r.darkOrange}14`:`${$}14`,borderColor:S?`${r.errorColor}33`:R?`${r.darkOrange}33`:`${$}33`}]}>
+              {Z()}
+              <T style={[o.statusPillText,{color:S?r.errorColor:R?r.darkOrange:$}]}>
+                {X()}
+              </T>
+            </C>
+          </C>
 
           
-          <Pressable onPress={handleOpenUrl} hitSlop={6} style={styles.urlBox}>
-            <View style={styles.urlMainRow}>
-              <HighlightText text={urlParsed.path} search={searchStr} style={styles.pathText} highlightStyle={styles.highlight} numberOfLines={2} ellipsizeMode="middle"/>
-              <View style={styles.urlBadgeRow}>
-                {isJson && (<View style={styles.jsonBadge}>
-                    <Text style={styles.jsonBadgeText}>.json</Text>
-                  </View>)}
-                {item.duplicateCount != null && item.duplicateCount > 1 && (<View style={styles.dupBadge}>
-                    <Text style={styles.dupBadgeText}>×{item.duplicateCount}</Text>
-                  </View>)}
-              </View>
-            </View>
+          <U onPress={K}hitSlop={6}style={o.urlBox}>
+            <C style={o.urlMainRow}>
+              <We text={F.path}search={J}style={o.pathText}highlightStyle={o.highlight}numberOfLines={2}ellipsizeMode="middle"/>
+              <C style={o.urlBadgeRow}>
+                {ee&&<C style={o.jsonBadge}>
+                    <T style={o.jsonBadgeText}>.json</T>
+                  </C>}
+                {e.duplicateCount!=null&&e.duplicateCount>1&&<C style={o.dupBadge}>
+                    <T style={o.dupBadgeText}>×{e.duplicateCount}</T>
+                  </C>}
+              </C>
+            </C>
 
-            {urlParsed.host ? (<View style={styles.hostRow}>
-                <View style={[
-                styles.protoBadge,
-                {
-                    backgroundColor: urlParsed.isHttps
-                        ? `${AppColors.emerald600}12`
-                        : `${AppColors.amber600}12`,
-                    borderColor: urlParsed.isHttps
-                        ? `${AppColors.emerald600}2B`
-                        : `${AppColors.amber600}2B`,
-                },
-            ]}>
-                  <Text style={[
-                styles.protoBadgeText,
-                {
-                    color: urlParsed.isHttps
-                        ? AppColors.emerald600
-                        : AppColors.amber700,
-                },
-            ]}>
-                    {urlParsed.isHttps ? 'HTTPS' : 'HTTP'}
-                  </Text>
-                </View>
-                <Text style={styles.hostText} numberOfLines={1} ellipsizeMode="tail">
-                  {urlParsed.host}
-                </Text>
-              </View>) : null}
-          </Pressable>
+            {F.host?<C style={o.hostRow}>
+                <C style={[o.protoBadge,{backgroundColor:F.isHttps?`${r.emerald600}12`:`${r.amber600}12`,borderColor:F.isHttps?`${r.emerald600}2B`:`${r.amber600}2B`}]}>
+                  <T style={[o.protoBadgeText,{color:F.isHttps?r.emerald600:r.amber700}]}>
+                    {F.isHttps?"HTTPS":"HTTP"}
+                  </T>
+                </C>
+                <T style={o.hostText}numberOfLines={1}ellipsizeMode="tail">
+                  {F.host}
+                </T>
+              </C>:null}
+          </U>
 
           
-          <View style={styles.cardFooterRow}>
-            <View style={styles.footerLeft}>
-              <View style={styles.cardDateRow}>
-                <CalendarIcon color={AppColors.grayTextWeak} size={10}/>
-                <Text style={styles.cardDateText}>{triggeredAt}</Text>
-              </View>
+          <C style={o.cardFooterRow}>
+            <C style={o.footerLeft}>
+              <C style={o.cardDateRow}>
+                <He color={r.grayTextWeak}size={10}/>
+                <T style={o.cardDateText}>{Y}</T>
+              </C>
 
-              {item.caller && item.caller !== 'Unknown' && (<View style={styles.callerChip}>
-                  <PinIcon color={AppColors.sky600} size={8.5}/>
-                  <Text style={styles.callerChipText} numberOfLines={1} ellipsizeMode="middle">
-                    {item.caller}
-                  </Text>
-                </View>)}
-            </View>
+              {W&&<C style={o.callerChip}>
+                  <Pe color={r.sky600}size={8.5}/>
+                  <T style={o.callerChipText}numberOfLines={1}ellipsizeMode="middle">
+                    {W}
+                  </T>
+                </C>}
+            </C>
 
-            <View style={styles.footerRight}>
-              {item.response != null && (<View style={styles.metaStatChip}>
-                  <SizeIcon color={AppColors.purple} size={9}/>
-                  <Text style={styles.metaStatText}>
-                    {getSize(item.response)}
-                  </Text>
-                </View>)}
+            <C style={o.footerRight}>
+              {e.response!=null&&<C style={o.metaStatChip}>
+                  <Le color={r.purple}size={9}/>
+                  <T style={o.metaStatText}>
+                    {Re(e.response)}
+                  </T>
+                </C>}
 
-              {item.duration != null && !isFailed && (<View style={[
-                styles.metaStatChip,
-                {
-                    backgroundColor: `${durationColor}12`,
-                    borderColor: `${durationColor}2E`,
-                },
-            ]}>
-                  <ClockIcon color={durationColor} size={9}/>
-                  <Text style={[styles.metaStatText, { color: durationColor }]}>
-                    {item.duration}ms
-                  </Text>
-                </View>)}
-            </View>
-          </View>
+              {e.duration!=null&&!S&&<C style={[o.metaStatChip,{backgroundColor:`${H}12`,borderColor:`${H}2E`}]}>
+                  <N color={H}size={9}/>
+                  <T style={[o.metaStatText,{color:H}]}>
+                    {e.duration}ms
+                  </T>
+                </C>}
+            </C>
+          </C>
 
           
-          {typeof item.duration === 'number' && item.duration > 0 && !isFailed && (<View style={styles.waterfallContainer}>
-              <View style={[
-                styles.waterfallBar,
-                {
-                    width: `${Math.min(100, Math.max(6, (item.duration / 1200) * 100))}%`,
-                    backgroundColor: durationColor,
-                },
-            ]}/>
-            </View>)}
-        </View>
+          {typeof e.duration=="number"&&e.duration>0&&!S&&<C style={o.waterfallContainer}>
+              <C style={[o.waterfallBar,{width:`${Math.min(100,Math.max(6,e.duration/1200*100))}%`,backgroundColor:H}]}/>
+            </C>}
+        </C>
 
-        {isNew && (<Animated.View pointerEvents="none" style={[
-                StyleSheet.absoluteFill,
-                { backgroundColor: methodColor, opacity: shimmerOpacity },
-            ]}/>)}
-      </TouchableScale>
-    </View>);
-});
-const styles = StyleSheet.create({
-    container: {
-        paddingHorizontal: 10,
-        paddingVertical: 3.5,
-    },
-    card: {
-        alignSelf: 'stretch',
-        borderRadius: 11,
-        overflow: 'hidden',
-        shadowColor: AppColors.black,
-        shadowOffset: { width: 0, height: 1.5 },
-        shadowOpacity: 0.04,
-        shadowRadius: 3,
-        elevation: 1.5,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.white,
-    },
-    cardBody: {
-        paddingHorizontal: 12,
-        paddingTop: 9,
-        paddingBottom: 8,
-    },
-    cardHeaderRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 6,
-        minHeight: 22,
-    },
-    cardHeaderLeft: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        flex: 1,
-        marginRight: 6,
-        gap: 5.5,
-        minWidth: 0,
-        flexWrap: 'wrap',
-    },
-    smallCheckbox: {
-        width: 15,
-        height: 15,
-        borderRadius: 4,
-        borderWidth: 1.6,
-        borderColor: AppColors.grayTextWeak,
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: AppColors.white,
-    },
-    smallCheckboxChecked: {
-        backgroundColor: AppColors.purple,
-        borderColor: AppColors.purple,
-    },
-    serialNumber: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.grayTextWeak,
-        fontSize: 10,
-    },
-    methodBadge: {
-        paddingHorizontal: 6.5,
-        paddingVertical: 2,
-        borderRadius: 5,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    methodBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        letterSpacing: 0.5,
-        color: AppColors.white,
-    },
-    chip: {
-        paddingHorizontal: 5,
-        paddingVertical: 1.5,
-        borderRadius: 4,
-        borderWidth: 1,
-    },
-    chipText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 8.5,
-    },
-    statusPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        paddingHorizontal: 7,
-        paddingVertical: 2.5,
-        borderRadius: 6,
-        borderWidth: 1,
-        flexShrink: 0,
-    },
-    statusPillText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-    },
-    urlBox: {
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        paddingHorizontal: 9,
-        paddingVertical: 6,
-        marginVertical: 4,
-        gap: 4,
-    },
-    urlMainRow: {
-        flexDirection: 'row',
-        alignItems: 'flex-start',
-        justifyContent: 'space-between',
-        gap: 6,
-    },
-    pathText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        lineHeight: 16.5,
-        color: AppColors.primaryBlack,
-        flex: 1,
-    },
-    urlBadgeRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        flexShrink: 0,
-    },
-    jsonBadge: {
-        backgroundColor: `${AppColors.darkOrange}14`,
-        borderColor: `${AppColors.darkOrange}2E`,
-        borderWidth: 1,
-        paddingHorizontal: 4,
-        paddingVertical: 1,
-        borderRadius: 3,
-    },
-    jsonBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 8.5,
-        color: AppColors.darkOrange,
-    },
-    dupBadge: {
-        backgroundColor: `${AppColors.purple}14`,
-        borderColor: `${AppColors.purple}2E`,
-        borderWidth: 1,
-        paddingHorizontal: 4,
-        paddingVertical: 1,
-        borderRadius: 3,
-    },
-    dupBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 8.5,
-        color: AppColors.purple,
-    },
-    hostRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-    },
-    protoBadge: {
-        paddingHorizontal: 4,
-        paddingVertical: 1,
-        borderRadius: 3,
-        borderWidth: 1,
-    },
-    protoBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 7.5,
-    },
-    hostText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.grayText,
-        flex: 1,
-    },
-    highlight: {
-        backgroundColor: AppColors.yellowHighlight,
-        color: AppColors.primaryBlack,
-        borderRadius: 2,
-    },
-    cardFooterRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginTop: 4,
-        gap: 6,
-    },
-    footerLeft: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flex: 1,
-        minWidth: 0,
-    },
-    footerRight: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        flexShrink: 0,
-    },
-    cardDateRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3.5,
-    },
-    cardDateText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 9.5,
-        color: AppColors.grayTextWeak,
-    },
-    callerChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3,
-        backgroundColor: `${AppColors.sky600}10`,
-        borderColor: `${AppColors.sky600}2B`,
-        borderWidth: 1,
-        paddingHorizontal: 5,
-        paddingVertical: 1,
-        borderRadius: 4,
-        flexShrink: 1,
-        minWidth: 0,
-    },
-    callerChipText: {
-        color: AppColors.sky600,
-        fontSize: 8.5,
-        fontFamily: AppFonts.interBold,
-    },
-    metaStatChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3,
-        backgroundColor: `${AppColors.purple}10`,
-        borderColor: `${AppColors.purple}28`,
-        borderWidth: 1,
-        paddingHorizontal: 5,
-        paddingVertical: 1.5,
-        borderRadius: 4,
-    },
-    metaStatText: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.purple,
-        fontSize: 9,
-    },
-    waterfallContainer: {
-        height: 2.5,
-        width: '100%',
-        backgroundColor: AppColors.grayBorderSecondary,
-        borderRadius: 1.5,
-        overflow: 'hidden',
-        marginTop: 6,
-    },
-    waterfallBar: {
-        height: '100%',
-        borderRadius: 1.5,
-    },
-});
-export default LogCard;
+        {L&&<I.View pointerEvents="none"style={[v.absoluteFill,{backgroundColor:P,opacity:A}]}/>}
+      </Ae>
+    </C>}),o=v.create({container:{paddingHorizontal:8,paddingVertical:3},card:{alignSelf:"stretch",borderRadius:10,overflow:"hidden",shadowColor:r.black,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:3,elevation:1,borderWidth:1,borderColor:"#E2E8F0",backgroundColor:r.white},cardBody:{paddingHorizontal:11,paddingTop:8,paddingBottom:7},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:5,minHeight:20},cardHeaderLeft:{flexDirection:"row",alignItems:"center",flex:1,marginRight:6,gap:5,minWidth:0,flexWrap:"wrap"},smallCheckbox:{width:14,height:14,borderRadius:3.5,borderWidth:1.5,borderColor:r.grayTextWeak,alignItems:"center",justifyContent:"center",backgroundColor:r.white},smallCheckboxChecked:{backgroundColor:r.purple,borderColor:r.purple},serialNumber:{fontFamily:B.interBold,color:r.grayTextWeak,fontSize:9.5},methodBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:5,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:B.interBold,fontSize:9,lineHeight:11,letterSpacing:.5,color:r.white},chip:{paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:B.interBold,fontSize:8.5,lineHeight:11},statusPill:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6.5,paddingVertical:2,borderRadius:6,borderWidth:1,flexShrink:0},statusPillText:{fontFamily:B.interBold,fontSize:9.5,lineHeight:12},urlBox:{backgroundColor:"#F8FAFC",borderRadius:7,borderWidth:1,borderColor:"#E2E8F0",paddingHorizontal:8,paddingVertical:5,marginVertical:3,gap:3},urlMainRow:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",gap:6},pathText:{fontFamily:B.interBold,fontSize:12,lineHeight:16,color:"#0F172A",flex:1},urlBadgeRow:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},jsonBadge:{backgroundColor:`${r.darkOrange}14`,borderColor:`${r.darkOrange}2E`,borderWidth:1,paddingHorizontal:4,paddingVertical:1,borderRadius:3},jsonBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:r.darkOrange},dupBadge:{backgroundColor:`${r.purple}14`,borderColor:`${r.purple}2E`,borderWidth:1,paddingHorizontal:4,paddingVertical:1,borderRadius:3},dupBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:r.purple},hostRow:{flexDirection:"row",alignItems:"center",gap:4.5},protoBadge:{paddingHorizontal:4,paddingVertical:1,borderRadius:3,borderWidth:1},protoBadgeText:{fontFamily:B.interBold,fontSize:7.5,lineHeight:9},hostText:{fontFamily:B.interMedium,fontSize:10,lineHeight:13,color:"#64748B",flex:1},highlight:{backgroundColor:r.yellowHighlight,color:r.primaryBlack,borderRadius:2},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:3,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0},footerRight:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},cardDateRow:{flexDirection:"row",alignItems:"center",gap:3},cardDateText:{fontFamily:B.interRegular,fontSize:9.5,lineHeight:12,color:"#94A3B8"},callerChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:"#F0F9FF",borderColor:"#BAE6FD",borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:4,flexShrink:1,minWidth:0},callerChipText:{color:"#0284C7",fontSize:8.5,lineHeight:11,fontFamily:B.interBold},metaStatChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:"#F5F3FF",borderColor:"#DDD6FE",borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},metaStatText:{fontFamily:B.interBold,color:"#7C3AED",fontSize:9,lineHeight:11},waterfallContainer:{height:2,width:"100%",backgroundColor:"#F1F5F9",borderRadius:1,overflow:"hidden",marginTop:5},waterfallBar:{height:"100%",borderRadius:1}});export default Me;