react-native-inapp-inspector 2.3.19 → 2.3.21

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 j}from"react";import{Alert as ae,Animated as W,Linking as D,View as C,Pressable as A,Text as T,StyleSheet as U}from"react-native";import Ce,{Path as Te}from"react-native-svg";import{AppColors as e}from"../styles/AppColors";import{METHOD_COLORS as E}from"../constants";import{getStatusColor as Be,getDurationColor as Se,formatDateTime as Re,getSize as ze,getPath as Ve,getBaseUrl as He}from"../helpers";import{CalendarIcon as Le,ClockIcon as N,SizeIcon as $e,CircleCheckIcon as Ie,CircleAlertIcon as We,CircleXIcon as De,RepeatIcon as Fe,PinIcon as Oe}from"./NetworkIcons";import{AppFonts as B}from"../styles/AppFonts";import Pe from"./HighlightText";import Me from"./TouchableScale";import{useTranslation as je}from"../i18n";const Ae=oe.memo(function({item:r,onPress:_,timelineMinStart:Ee,timelineTotalRange:qe,isNew:$,isSelected:F,onToggleSelect:G,searchStr:J}){const{t:H}=je(),O=E[r.method]??E.ALL,S=j(()=>{try{const t=new URL(r.url),V=t.host,M=t.pathname+(t.search?t.search:""),re=t.protocol==="https:";return{host:V,path:M||"/",isHttps:re}}catch{const t=r.url.toLowerCase().startsWith("https:"),V=Ve(r.url);return{host:He(r.url).replace(/^https?:\/\//,""),path:V||r.url,isHttps:t}}},[r.url]),P=j(()=>{if(!r.caller||r.caller==="Unknown")return null;const t=r.caller.split(/[\/\\]/);return(t[t.length-1]||r.caller).replace(/\?.*$/,"").replace(/^[a-zA-Z0-9_$]+@/,"")},[r.caller]),K=t=>{t?.stopPropagation?.(),ae.alert(H("common.openInBrowser")||"Open in Browser",`${H("common.openInBrowserPrompt")||"Are you sure you want to open this URL in your external browser?"}
+
+${r.url}`,[{text:H("common.cancel")||"Cancel",style:"cancel"},{text:H("common.open")||"Open",onPress:()=>{D.canOpenURL(r.url).then(V=>{V?D.openURL(r.url):D.openURL(r.url).catch(()=>{})}).catch(()=>{})}}])},R=r.status===0||r.status!=null&&r.status>=400,z=r.status==null,I=Be(r.status),L=Se(r.duration),Q=z?e.darkOrange:R?e.errorColor:e.greenColor,v=le(new W.Value($?.35:0)).current;te(()=>{$&&W.timing(v,{toValue:0,duration:1200,useNativeDriver:!1}).start()},[$]);const X=()=>{if(z)return"...";if(r.status===0||r.status==null)return H("network.statusFailed")||"FAILED";const t=typeof r.status=="number"?r.status:parseInt(String(r.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(r.status)},Z=()=>{if(z)return<N color={e.darkOrange}size={10}/>;const t=typeof r.status=="number"?r.status:parseInt(String(r.status||0),10);return t>=200&&t<300?<Ie color={e.greenColor}size={10}/>:t>=300&&t<400?<Fe color={e.amber700}size={10}/>:t>=400&&t<500?<We color={e.darkOrange}size={10}/>:<De color={e.errorColor}size={10}/>},Y=Re(r.startTime),ee=r.url.split("?")[0].toLowerCase().endsWith(".json");return<C style={o.container}>
+      <Me onPress={_}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:Q,backgroundColor:R?e.errorCardBg:e.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}>
+              <A onPress={()=>G(r.id)}hitSlop={12}style={[o.smallCheckbox,F&&o.smallCheckboxChecked]}>
+                {F&&<Ce width={9}height={9}viewBox="0 0 24 24"fill="none">
+                    <Te d="M20 6L9 17l-5-5"stroke={e.white}strokeWidth="4"strokeLinecap="round"strokeLinejoin="round"/>
+                  </Ce>}
+              </A>
 
-              <Text style={styles.serialNumber}>#{item.id + 1}</Text>
+              <T style={o.serialNumber}>#{r.id+1}</T>
 
-              <View style={[styles.methodBadge, { backgroundColor: methodColor }]}>
-                <Text style={styles.methodBadgeText}>
-                  {item.method}
-                </Text>
-              </View>
+              <C style={[o.methodBadge,{backgroundColor:O}]}>
+                <T style={o.methodBadgeText}>
+                  {r.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>)}
+              {r.client&&<C style={[o.chip,{backgroundColor:r.client==="axios"?`${e.purple}14`:r.client==="apollo"||r.client==="graphql"?`${e.pink500}14`:r.client==="xhr"?`${e.amber500}14`:`${e.sky500}14`,borderColor:r.client==="axios"?`${e.purple}30`:r.client==="apollo"||r.client==="graphql"?`${e.pink500}30`:r.client==="xhr"?`${e.amber500}30`:`${e.sky500}30`}]}>
+                  <T style={[o.chipText,{color:r.client==="axios"?e.purple:r.client==="apollo"||r.client==="graphql"?e.pink500:r.client==="xhr"?e.amber700:e.sky600}]}>
+                    {r.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 },
-            ]}>
+              {(r.url.toLowerCase().includes("graphql")||r.client==="apollo"||r.client==="graphql")&&<C style={[o.chip,{backgroundColor:e.roseBg,borderColor:e.roseBorder}]}>
+                  <T style={[o.chipText,{color:e.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:R?`${e.errorColor}14`:z?`${e.darkOrange}14`:`${I}14`,borderColor:R?`${e.errorColor}33`:z?`${e.darkOrange}33`:`${I}33`}]}>
+              {Z()}
+              <T style={[o.statusPillText,{color:R?e.errorColor:z?e.darkOrange:I}]}>
+                {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>
+          <A onPress={K}hitSlop={6}style={o.urlBox}>
+            <C style={o.urlMainRow}>
+              <Pe text={S.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>}
+                {r.duplicateCount!=null&&r.duplicateCount>1&&<C style={o.dupBadge}>
+                    <T style={o.dupBadgeText}>×{r.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>
+            {S.host?<C style={o.hostRow}>
+                <C style={[o.protoBadge,{backgroundColor:S.isHttps?`${e.emerald600}12`:`${e.amber600}12`,borderColor:S.isHttps?`${e.emerald600}2B`:`${e.amber600}2B`}]}>
+                  <T style={[o.protoBadgeText,{color:S.isHttps?e.emerald600:e.amber700}]}>
+                    {S.isHttps?"HTTPS":"HTTP"}
+                  </T>
+                </C>
+                <T style={o.hostText}numberOfLines={1}ellipsizeMode="tail">
+                  {S.host}
+                </T>
+              </C>:null}
+          </A>
 
           
-          <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}>
+                <Le color={e.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>
+              {P&&<C style={o.callerChip}>
+                  <Oe color={e.sky600}size={8.5}/>
+                  <T style={o.callerChipText}numberOfLines={1}ellipsizeMode="middle">
+                    {P}
+                  </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}>
+              {r.response!=null&&<C style={o.metaStatChip}>
+                  <$e color={e.purple}size={9}/>
+                  <T style={o.metaStatText}>
+                    {ze(r.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>
+              {r.duration!=null&&!R&&<C style={[o.metaStatChip,{backgroundColor:`${L}12`,borderColor:`${L}2E`}]}>
+                  <N color={L}size={9}/>
+                  <T style={[o.metaStatText,{color:L}]}>
+                    {r.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 r.duration=="number"&&r.duration>0&&!R&&<C style={o.waterfallContainer}>
+              <C style={[o.waterfallBar,{width:`${Math.min(100,Math.max(6,r.duration/1200*100))}%`,backgroundColor:L}]}/>
+            </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;
+        {$&&<W.View pointerEvents="none"style={[U.absoluteFill,{backgroundColor:O,opacity:v}]}/>}
+      </Me>
+    </C>}),o=U.create({container:{paddingHorizontal:8,paddingVertical:3},card:{alignSelf:"stretch",borderRadius:10,overflow:"hidden",borderWidth:1,borderColor:e.dividerColor,shadowColor:e.shadowColorString},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:e.grayTextWeak,alignItems:"center",justifyContent:"center",backgroundColor:e.white},smallCheckboxChecked:{backgroundColor:e.purple,borderColor:e.purple},serialNumber:{fontFamily:B.interBold,color:e.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:e.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:e.grayBackground,borderRadius:7,borderWidth:1,borderColor:e.dividerColor,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:e.primaryBlack,flex:1},urlBadgeRow:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:0},jsonBadge:{backgroundColor:`${e.darkOrange}14`,borderColor:`${e.darkOrange}2E`,borderWidth:1,paddingHorizontal:4,paddingVertical:1,borderRadius:3},jsonBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.darkOrange},dupBadge:{backgroundColor:`${e.purple}14`,borderColor:`${e.purple}2E`,borderWidth:1,paddingHorizontal:4,paddingVertical:1,borderRadius:3},dupBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.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:e.grayTextWeak,flex:1},highlight:{backgroundColor:e.yellowHighlight,color:e.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:e.slate400},callerChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:e.skySoftBg,borderColor:e.skySoftBorder,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:4,flexShrink:1,minWidth:0},callerChipText:{color:e.skySoftText,fontSize:8.5,lineHeight:11,fontFamily:B.interBold},metaStatChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:e.violetSoftBg,borderColor:e.violetSoftBorder,borderWidth:1,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},metaStatText:{fontFamily:B.interBold,color:e.violetSoftText,fontSize:9,lineHeight:11},waterfallContainer:{height:2,width:"100%",backgroundColor:e.graySurface,borderRadius:1,overflow:"hidden",marginTop:5},waterfallBar:{height:"100%",borderRadius:1}});export default Ae;