react-native-inapp-inspector 1.0.0

package/dist/esm/styles/index.js

@@ -0,0 +1,1355 @@
+import { StyleSheet, Platform, StatusBar } from 'react-native';
+import { AppColors } from './AppColors';
+// Utils
+import { AppFonts } from './AppFonts';
+const styles = StyleSheet.create({
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        zIndex: 10,
+        minHeight: 56,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.08,
+        shadowRadius: 4,
+        elevation: 4,
+    },
+    headerLeft: { flex: 1, alignItems: 'flex-start' },
+    headerCenter: { flex: 3, alignItems: 'center' },
+    headerRight: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+    },
+    headerTitle: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.primaryLight,
+        fontSize: 18,
+        letterSpacing: 0.3,
+    },
+    headerButtonGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        borderRadius: 8,
+        padding: 3,
+    },
+    headerGroupButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 6,
+        gap: 4,
+    },
+    headerGroupButtonActive: {
+        backgroundColor: 'rgba(255, 255, 255, 0.25)',
+    },
+    headerGroupButtonText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 14,
+        color: 'rgba(255, 255, 255, 0.6)',
+        letterSpacing: 0.2,
+    },
+    headerDetailCenter: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+    },
+    headerDetailRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        maxWidth: '100%',
+    },
+    headerMethodBadge: {
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 6,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.1,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    headerMethodText: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.primaryLight,
+        fontSize: 10,
+        letterSpacing: 0.5,
+    },
+    headerDetailTitle: {
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.primaryLight,
+        fontSize: 15,
+        flexShrink: 1,
+        letterSpacing: 0.2,
+    },
+    headerDetailSubRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        marginTop: 4,
+    },
+    headerStatusDot: {
+        width: 7,
+        height: 7,
+        borderRadius: 3.5,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.2,
+        shadowRadius: 1,
+        elevation: 1,
+    },
+    headerSubTitle: {
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.primaryLight,
+        fontSize: 11,
+        opacity: 0.95,
+        letterSpacing: 0.2,
+    },
+    headerCountBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0,0,0,0.2)',
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+        borderRadius: 16,
+        gap: 6,
+        borderWidth: 0.5,
+        borderColor: 'rgba(255,255,255,0.2)',
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.1,
+        shadowRadius: 2,
+        elevation: 2,
+    },
+    headerCountText: {
+        fontFamily: AppFonts.interMedium,
+        color: 'rgba(255,255,255,0.95)',
+        fontSize: 12,
+        letterSpacing: 0.2,
+    },
+    iconBtnMinimal: { padding: 6 },
+    listContent: { paddingBottom: 20 },
+    detailScroll: { flex: 1 },
+    detailContent: { paddingHorizontal: 8, paddingTop: 10, paddingBottom: 40 },
+    fabWrapper: {
+        position: 'absolute',
+        bottom: 180,
+        right: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 99999,
+        elevation: 15,
+        shadowColor: AppColors.purple,
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: 0.4,
+        shadowRadius: 12,
+    },
+    fabPulseRing: {
+        position: 'absolute',
+        width: 60,
+        height: 60,
+        borderRadius: 30,
+        backgroundColor: `${AppColors.purple}25`,
+    },
+    fab: {
+        width: 56,
+        height: 56,
+        borderRadius: 28,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: AppColors.shadowColorString,
+        shadowOffset: { width: 0, height: 6 },
+        shadowOpacity: 0.35,
+        shadowRadius: 10,
+        elevation: 12,
+    },
+    fabText: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.primaryLight,
+        fontSize: 14,
+    },
+    fabBadge: {
+        position: 'absolute',
+        top: -6,
+        right: -6,
+        minWidth: 24,
+        height: 24,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 6,
+        borderWidth: 2.5,
+        borderColor: AppColors.primaryLight,
+        shadowColor: AppColors.shadowColorString,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.2,
+        shadowRadius: 3,
+        elevation: 3,
+    },
+    fabBadgeNormal: { backgroundColor: AppColors.purple },
+    fabBadgeError: { backgroundColor: AppColors.errorColor },
+    fabBadgeText: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.primaryLight,
+        fontSize: 11,
+    },
+    dashboardCard: {
+        marginHorizontal: 16,
+        marginBottom: 16,
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 16,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.09,
+        shadowRadius: 12,
+        elevation: 6,
+        overflow: 'hidden',
+    },
+    dashboardStatsRow: {
+        flexDirection: 'row',
+        paddingVertical: 14,
+        paddingHorizontal: 8,
+    },
+    statBox: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    dashboardStatDivider: {
+        width: 1,
+        backgroundColor: AppColors.dividerColor,
+        height: '80%',
+        alignSelf: 'center',
+    },
+    statValue: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.primaryBlack,
+        fontSize: 14,
+    },
+    statLabel: {
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.grayTextWeak,
+        fontSize: 10,
+        marginTop: 4,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    miniGraphWrap: {
+        marginTop: 8,
+        height: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    toolbarRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        marginBottom: 14,
+        gap: 10,
+        marginTop: 4,
+    },
+    toolbarRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+    },
+    toolbarDivider: {
+        width: 1,
+        height: 20,
+        backgroundColor: AppColors.dividerColor,
+        marginHorizontal: 2,
+    },
+    toolbarBtn: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: AppColors.primaryLight,
+        borderWidth: 1.5,
+        borderColor: AppColors.grayBorderSecondary,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.04,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    toolbarBtnActive: {
+        borderColor: AppColors.purple,
+        backgroundColor: AppColors.purpleShade50,
+        shadowOpacity: 0.08,
+        shadowRadius: 3,
+        elevation: 2,
+    },
+    trashBadge: {
+        position: 'absolute',
+        top: -4,
+        right: -4,
+        backgroundColor: AppColors.errorColor,
+        borderRadius: 10,
+        minWidth: 18,
+        height: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1.5,
+        borderColor: AppColors.primaryLight,
+    },
+    trashBadgeText: {
+        color: AppColors.primaryLight,
+        fontFamily: AppFonts.interBold,
+        fontSize: 9,
+    },
+    filtersContainer: {
+        paddingHorizontal: 16,
+        paddingBottom: 16,
+    },
+    filtersHeading: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.grayTextStrong,
+        fontSize: 12,
+        textTransform: 'uppercase',
+        letterSpacing: 0.6,
+        marginBottom: 8,
+    },
+    statusRowContent: {
+        alignItems: 'center',
+        paddingVertical: 4,
+    },
+    statusFilterWrap: { marginRight: 8 },
+    statusFilterChip: {
+        paddingHorizontal: 16,
+        height: 38,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 24,
+        borderWidth: 1.5,
+        borderColor: AppColors.grayBorderSecondary,
+        backgroundColor: AppColors.primaryLight,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.03,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    statusFilterActive: {
+        borderColor: AppColors.purple,
+        backgroundColor: AppColors.purpleShade50,
+    },
+    statusFilterText: {
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.grayText,
+        fontSize: 13,
+    },
+    resultCount: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayTextWeak,
+        fontSize: 12,
+        marginHorizontal: 16,
+        marginBottom: 8,
+        marginTop: 4,
+        letterSpacing: 0.2,
+    },
+    searchContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 24,
+        paddingHorizontal: 14,
+        paddingVertical: 6,
+        borderWidth: 1.5,
+        borderColor: AppColors.grayBorderSecondary,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.04,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.primaryBlack,
+        paddingVertical: Platform.OS === 'ios' ? 8 : 4,
+        marginLeft: 8,
+        fontSize: 14,
+    },
+    clearBtn: { padding: 4 },
+    clearBtnText: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayTextWeak,
+        fontSize: 14,
+    },
+    menuDropdown: {
+        position: 'absolute',
+        top: Platform.OS === 'android' ? (StatusBar.currentHeight || 24) + 60 : 90,
+        width: 170,
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        zIndex: 999,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+        elevation: 8,
+        overflow: 'hidden',
+    },
+    dropdownItem: {
+        padding: 13,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+    },
+    domainHeaderSeparator: {
+        marginTop: 12,
+        paddingTop: 16,
+        borderTopWidth: 1,
+        borderTopColor: AppColors.dividerColor,
+    },
+    domainHeaderRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingLeft: 20,
+        paddingRight: 16,
+        marginTop: 12,
+        marginBottom: 6,
+    },
+    domainHeaderLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+        paddingRight: 10,
+        gap: 6,
+    },
+    domainHeaderText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 14,
+        fontWeight: '700',
+        textTransform: 'capitalize',
+        flexShrink: 1,
+        marginLeft: 2,
+    },
+    domainSubRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        marginTop: 2,
+    },
+    domainTimestamp: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors.grayTextWeak,
+    },
+    domainMethodCount: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9,
+        marginLeft: 4,
+    },
+    domainStatsGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        overflow: 'hidden',
+        backgroundColor: AppColors.grayBackground,
+    },
+    groupBtnItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 8,
+        paddingVertical: 5,
+    },
+    groupBtnBorderRight: {
+        borderRightWidth: 1,
+        borderRightColor: AppColors.grayBorderSecondary,
+    },
+    domainStatText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10,
+    },
+    treeNodeRow: {
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        paddingRight: 16,
+    },
+    treeLines: {
+        width: 40,
+        position: 'relative',
+    },
+    modernTreeLine: {
+        position: 'absolute',
+        left: 23,
+        top: 0,
+        width: 16,
+        height: '100%',
+        borderLeftWidth: 1.5,
+        opacity: 0.5,
+    },
+    modernTreeLineLast: {
+        height: '50%',
+        borderBottomWidth: 1.5,
+        borderBottomLeftRadius: 12,
+    },
+    modernTreeBranch: {
+        position: 'absolute',
+        left: 23,
+        top: '50%',
+        width: 16,
+        borderTopWidth: 1.5,
+        opacity: 0.5,
+    },
+    treeCardWrapper: {
+        flex: 1,
+        paddingVertical: 4,
+    },
+    card: {
+        marginHorizontal: 0,
+        marginVertical: 0,
+        borderRadius: 14,
+        overflow: 'hidden',
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 3 },
+        shadowOpacity: 0.08,
+        shadowRadius: 6,
+        elevation: 3,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        backgroundColor: AppColors.primaryLight,
+    },
+    cardBody: { paddingHorizontal: 12, paddingTop: 12, paddingBottom: 10 },
+    cardTopRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 6,
+    },
+    smallCheckbox: {
+        width: 13,
+        height: 13,
+        borderRadius: 4,
+        borderWidth: 1.5,
+        borderColor: AppColors.grayTextWeak,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#fff',
+        marginRight: 8,
+    },
+    smallCheckboxChecked: {
+        backgroundColor: AppColors.purple,
+        borderColor: AppColors.purple,
+    },
+    serialNumber: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.grayTextWeak,
+        fontSize: 10,
+        marginRight: 6,
+        minWidth: 20,
+    },
+    chip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 8,
+        borderWidth: 1,
+    },
+    chipText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10,
+    },
+    cardMiddleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 6,
+    },
+    cardBottomRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 6,
+    },
+    cardDateRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    cardDateText: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayTextWeak,
+        fontSize: 10,
+        letterSpacing: 0.2,
+    },
+    cardMetaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        flexShrink: 0,
+    },
+    urlPathText: {
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.primaryBlack,
+        fontSize: 13,
+        flexShrink: 1,
+    },
+    urlDomainText: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayText,
+        fontSize: 11,
+        flex: 1,
+    },
+    requestTypeText: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayText,
+        fontSize: 10,
+    },
+    methodBadge: {
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 8,
+        marginRight: 8,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.08,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    methodBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        letterSpacing: 0.6,
+    },
+    timelineTrack: {
+        height: 3,
+        backgroundColor: AppColors.graySurface,
+        marginTop: 4,
+        borderRadius: 1.5,
+        overflow: 'hidden',
+        position: 'relative',
+    },
+    timelineBar: { position: 'absolute', height: '100%', borderRadius: 1.5 },
+    empty: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    emptyIcon: { fontSize: 32, color: AppColors.grayTextWeak },
+    emptyContainer: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 80,
+        paddingHorizontal: 20,
+    },
+    emptyIconWrap: {
+        width: 72,
+        height: 72,
+        borderRadius: 36,
+        backgroundColor: AppColors.purpleShade50,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 20,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.06,
+        shadowRadius: 4,
+        elevation: 1,
+    },
+    emptyTitle: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.grayTextStrong,
+        fontSize: 18,
+        marginBottom: 8,
+        letterSpacing: 0.3,
+    },
+    emptySub: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayTextWeak,
+        fontSize: 14,
+        textAlign: 'center',
+        lineHeight: 20,
+        letterSpacing: 0.2,
+    },
+    reloadBtn: {
+        marginTop: 28,
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        backgroundColor: AppColors.purple,
+        borderRadius: 24,
+        shadowColor: AppColors.purple,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.35,
+        shadowRadius: 8,
+        elevation: 5,
+    },
+    reloadBtnText: {
+        color: '#FFF',
+        fontFamily: AppFonts.interBold,
+        fontSize: 14,
+        letterSpacing: 0.3,
+    },
+    detailInfoBar: {
+        borderRadius: 14,
+        paddingVertical: 14,
+        paddingHorizontal: 10,
+        marginBottom: 12,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        backgroundColor: AppColors.primaryLight,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    detailInfoTop: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingBottom: 10,
+    },
+    detailInfoRight: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+    detailMethodLabel: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 14,
+        letterSpacing: 0.5,
+    },
+    detailUrlContainer: {
+        backgroundColor: AppColors.grayBackground,
+        borderRadius: 10,
+        padding: 13,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.04,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    detailUrl: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.purple,
+        fontSize: 13,
+        lineHeight: 20,
+        textDecorationLine: 'underline',
+        letterSpacing: 0.2,
+    },
+    metaContainer: {
+        backgroundColor: AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        borderRadius: 14,
+        marginBottom: 12,
+        overflow: 'hidden',
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.05,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    metaHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+        backgroundColor: AppColors.primaryLight,
+    },
+    metaTitle: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.grayTextStrong,
+        fontSize: 12,
+        letterSpacing: 0.6,
+        textTransform: 'uppercase',
+    },
+    metaChevron: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayTextWeak,
+        fontSize: 11,
+    },
+    metaBody: { paddingHorizontal: 12, paddingBottom: 8, paddingTop: 4 },
+    metaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 8,
+    },
+    metaDivider: { height: 1, backgroundColor: AppColors.dividerColor },
+    metaLabelRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    metaLabel: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayText,
+        fontSize: 13,
+    },
+    metaValue: {
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.primaryBlack,
+        fontSize: 13,
+    },
+    metaValueRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    perfBadge: {
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+        borderRadius: 6,
+        borderWidth: 1,
+    },
+    perfBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+    },
+    seperator: {
+        height: 1,
+        backgroundColor: AppColors.dividerColor,
+        marginVertical: 10,
+    },
+    detailSearchRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    detailSearchBox: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 12,
+        paddingLeft: 16,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    detailSearchInput: {
+        flex: 1,
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.primaryBlack,
+        height: 40,
+    },
+    sectionContainer: {
+        backgroundColor: AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        borderRadius: 12,
+        marginBottom: 10,
+        overflow: 'hidden',
+    },
+    sectionHeaderGradient: {
+        backgroundColor: '#f9f9fa',
+        paddingVertical: 12,
+        paddingHorizontal: 8,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+    },
+    sectionHeaderRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    sectionTitleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        flex: 1,
+        marginRight: 8,
+    },
+    sectionTitle: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.grayTextStrong,
+        fontSize: 14,
+        flexShrink: 1,
+    },
+    sectionHeaderActions: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+    htCard: {
+        backgroundColor: AppColors.primaryLight,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        borderLeftWidth: 3,
+        marginBottom: 10,
+        overflow: 'hidden',
+    },
+    htCardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 8,
+        paddingVertical: 10,
+        gap: 8,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+        backgroundColor: AppColors.primaryLight,
+    },
+    htIconWrap: {
+        width: 28,
+        height: 28,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    htTitle: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.grayTextStrong,
+        fontSize: 13,
+        flexShrink: 1,
+    },
+    htBadge: {
+        borderRadius: 10,
+        paddingHorizontal: 7,
+        paddingVertical: 2,
+        borderWidth: 1,
+    },
+    htBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10,
+    },
+    htHeaderSpacer: { flex: 1 },
+    htChevronBtn: {
+        width: 30,
+        height: 30,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        backgroundColor: AppColors.primaryLight,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    htColHeadRow: {
+        flexDirection: 'row',
+        paddingHorizontal: 8,
+        paddingVertical: 6,
+        backgroundColor: AppColors.graySurface,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+    },
+    htColHead: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.grayTextWeak,
+        fontSize: 10,
+        letterSpacing: 0.8,
+        textTransform: 'uppercase',
+    },
+    htRow: {
+        flexDirection: 'row',
+        paddingHorizontal: 8,
+        paddingVertical: 0,
+        alignItems: 'flex-start',
+    },
+    htRowBorder: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: AppColors.dividerColor,
+    },
+    htKeyCell: {
+        width: '30%',
+        paddingVertical: 10,
+        paddingRight: 4,
+    },
+    htKey: {
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.purple,
+        fontSize: 11,
+        lineHeight: 16,
+    },
+    htCellDivider: {
+        width: StyleSheet.hairlineWidth,
+        backgroundColor: AppColors.dividerColor,
+        alignSelf: 'stretch',
+        marginVertical: 4,
+    },
+    htValueCell: {
+        flex: 1,
+        paddingVertical: 10,
+        paddingLeft: 6,
+    },
+    htValue: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.primaryBlack,
+        fontSize: 11,
+        lineHeight: 17,
+    },
+    htExpandRow: {
+        marginTop: 4,
+    },
+    htExpandText: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.purple,
+        fontSize: 10,
+        letterSpacing: 0.3,
+    },
+    htCopyBtn: {
+        paddingHorizontal: 6,
+        paddingVertical: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    htEmpty: {
+        paddingHorizontal: 12,
+        paddingVertical: 16,
+        alignItems: 'center',
+    },
+    htEmptyText: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayTextWeak,
+        fontSize: 12,
+    },
+    iconSquareBtn: {
+        width: 30,
+        height: 30,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        backgroundColor: AppColors.grayBackground,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    iconSquareBtnSuccess: {
+        borderColor: AppColors.greenColor,
+        backgroundColor: AppColors.greenStatus,
+    },
+    iconSquareBtnActive: {
+        borderColor: AppColors.skyBlue,
+        backgroundColor: AppColors.purpleShade50,
+    },
+    codeBlockScroll: { width: '100%', backgroundColor: 'transparent' },
+    codeBlock: {
+        paddingTop: 12,
+        paddingHorizontal: 8,
+        paddingBottom: 16,
+        minWidth: '100%',
+    },
+    codeSyntax: {
+        color: AppColors.grayTextWeak,
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    },
+    codeKey: {
+        color: AppColors.purple,
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    },
+    codeText: {
+        color: AppColors.greenBaggageText,
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    },
+    codeTextNil: {
+        color: AppColors.errorColor,
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    },
+    treeRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 6 },
+    treeChevron: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayTextWeak,
+        marginRight: 8,
+    },
+    treeKeyMargin: { marginRight: 6 },
+    highlight: {
+        backgroundColor: AppColors.paleYellow,
+        color: AppColors.primaryBlack,
+    },
+    arrayBadge: {
+        backgroundColor: AppColors.purpleShade50,
+        borderColor: AppColors.purple,
+        borderWidth: 1,
+        borderRadius: 6,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+    },
+    arrayBadgeText: {
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.purple,
+        fontSize: 11,
+    },
+    objectBadge: {
+        backgroundColor: AppColors.grayBackground,
+        borderColor: AppColors.grayTextWeak,
+        borderWidth: 1,
+        borderRadius: 6,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+    },
+    objectBadgeText: {
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.grayTextWeak,
+        fontSize: 11,
+    },
+    diffBlock: { paddingTop: 12, paddingHorizontal: 12, paddingBottom: 16, gap: 4 },
+    diffAdded: {
+        color: AppColors.greenColor,
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontSize: 12,
+    },
+    diffRemoved: {
+        color: AppColors.errorColor,
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontSize: 12,
+    },
+    diffChanged: {
+        color: AppColors.lightOrange,
+        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+        fontSize: 12,
+    },
+    filePreviewNode: { paddingVertical: 8, marginVertical: 4 },
+    filePreviewCard: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors.grayBackground,
+        borderRadius: 10,
+        padding: 10,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        gap: 12,
+        maxWidth: 300,
+    },
+    filePreviewThumb: {
+        width: 44,
+        height: 44,
+        borderRadius: 6,
+        backgroundColor: AppColors.grayBorderSecondary,
+    },
+    filePreviewDoc: {
+        width: 44,
+        height: 44,
+        borderRadius: 6,
+        backgroundColor: AppColors.graySurface,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    filePreviewName: {
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.primaryBlack,
+        fontSize: 13,
+        marginBottom: 2,
+    },
+    filePreviewType: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayText,
+        fontSize: 11,
+    },
+    imagePreviewWrapper: {
+        width: '100%',
+        height: 200,
+        borderRadius: 12,
+        overflow: 'hidden',
+        marginBottom: 16,
+        backgroundColor: AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    imagePreview: {
+        width: '100%',
+        height: '100%',
+    },
+    imageDownloadBtn: {
+        position: 'absolute',
+        bottom: 12,
+        right: 12,
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.2,
+        shadowRadius: 4,
+        elevation: 3,
+    },
+    sourcePageCard: {
+        backgroundColor: AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        borderRadius: 12,
+        marginBottom: 10,
+        overflow: 'hidden',
+    },
+    sourcePageAccordionHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+        backgroundColor: AppColors.primaryLight,
+    },
+    sourcePageTop: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        flex: 1,
+    },
+    sourcePageHeaderRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    sourcePageIcon: {
+        width: 36,
+        height: 36,
+        borderRadius: 10,
+        backgroundColor: AppColors.purpleShade50,
+        borderWidth: 1,
+        borderColor: `${AppColors.purple}30`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    sourcePageLabel: {
+        fontFamily: AppFonts.interRegular,
+        color: AppColors.grayText,
+        fontSize: 11,
+        marginBottom: 2,
+    },
+    sourcePageValue: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.purple,
+        fontSize: 14,
+    },
+    sourceParamsBox: {
+        borderTopWidth: 1,
+        borderTopColor: AppColors.dividerColor,
+    },
+    paramsAccordionHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+        backgroundColor: '#fafafa',
+    },
+    paramsAccordionLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    paramsAccordionRight: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    sourceParamsLabel: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.grayTextStrong,
+        fontSize: 12,
+        letterSpacing: 0.4,
+        textTransform: 'uppercase',
+    },
+    paramsBody: {
+        paddingHorizontal: 12,
+        paddingBottom: 8,
+        paddingTop: 4,
+    },
+    paramRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 10,
+        gap: 8,
+    },
+    paramRowBorder: {
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+    },
+    paramKey: {
+        fontFamily: AppFonts.Sfprotext,
+        color: AppColors.purple,
+        fontSize: 12,
+        flex: 1,
+    },
+    paramValueRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        flex: 2,
+        justifyContent: 'flex-end',
+    },
+    paramValue: {
+        fontFamily: AppFonts.Sfprotext,
+        color: AppColors.greenBaggageText,
+        fontSize: 12,
+        textAlign: 'right',
+        flexShrink: 1,
+    },
+    headerGradient: {
+        width: '100%',
+    },
+    // Status chip used in MetaAccordion
+    statusChip: {
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        borderRadius: 8,
+        borderWidth: 1,
+    },
+    statusText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12,
+    },
+    // ─── Tab Bar ───────────────────────────────────────────────────────────────
+    tabBar: {
+        flexDirection: 'row',
+        backgroundColor: AppColors.grayBackground,
+        paddingHorizontal: 12,
+        paddingTop: 10,
+        paddingBottom: 4,
+        gap: 8,
+    },
+    tabItem: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: '#EDEDF4',
+    },
+    tabItemActive: {
+        backgroundColor: AppColors.purple,
+        shadowColor: AppColors.purple,
+        shadowOpacity: 0.3,
+        shadowRadius: 6,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 3,
+    },
+    tabText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors.grayText,
+    },
+    tabTextActive: {
+        color: '#FFFFFF',
+    },
+    // ─── Screen Grouping Headers ───────────────────────────────────────────────
+    screenSectionHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        backgroundColor: '#F7F7FA',
+        borderTopWidth: 1,
+        borderBottomWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        marginTop: 8,
+    },
+    screenSectionTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13,
+        color: AppColors.primaryBlack,
+    },
+    screenSectionCount: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors.grayText,
+    },
+});
+export default styles;