react-native-inapp-inspector 2.3.18 → 2.3.20

package/src/styles/index.ts

@@ -1,1606 +0,0 @@
-import {StyleSheet, Platform} from 'react-native';
-import AppColors, {updateAppColorsTheme, getThemeColors} from './AppColors';
-import {AppFonts} from './AppFonts';
-import commonStyles, {rebuildCommonStyles} from './common';
-
-export {commonStyles};
-
-export const getRawStyles = (colors: typeof AppColors) => ({
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    zIndex: 10,
-    minHeight: 52,
-    shadowColor: colors.black,
-    shadowOffset: {width: 0, height: 2},
-    shadowOpacity: 0.08,
-    shadowRadius: 4,
-    elevation: 3,
-  },
-  headerLeft: {
-    flex: 1,
-    minWidth: 0,
-    alignItems: 'flex-start',
-  },
-  headerCenter: {
-    flex: 1,
-    minWidth: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 4,
-  },
-  headerRight: {
-    flexShrink: 0,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    gap: 5,
-  },
-  headerTitle: {
-    fontFamily: AppFonts.interBold,
-    color: colors.primaryLight,
-    fontSize: 15,
-    letterSpacing: 0.3,
-    paddingBottom: 4,
-  },
-  envBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 6,
-    borderWidth: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 4,
-  },
-  envBadgeText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 9.5,
-    letterSpacing: 0.5,
-  },
-  headerDetailCenter: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    flex: 1,
-    minWidth: 0,
-  },
-  headerDetailRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    maxWidth: '100%',
-  },
-  headerMethodBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 3,
-    borderRadius: 6,
-    shadowColor: colors.black,
-    shadowOffset: {width: 0, height: 1},
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    elevation: 1,
-  },
-  headerMethodText: {
-    fontFamily: AppFonts.interBold,
-    color: colors.primaryLight,
-    fontSize: 10,
-    letterSpacing: 0.5,
-  },
-  headerDetailTitle: {
-    fontFamily: AppFonts.interMedium,
-    color: colors.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: colors.black,
-    shadowOffset: {width: 0, height: 1},
-    shadowOpacity: 0.2,
-    shadowRadius: 1,
-    elevation: 1,
-  },
-  headerSubTitle: {
-    fontFamily: AppFonts.interMedium,
-    color: colors.primaryLight,
-    fontSize: 11,
-    opacity: 0.95,
-    letterSpacing: 0.2,
-  },
-  headerCountBadge: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: `${colors.black}33`,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16,
-    gap: 6,
-    borderWidth: 0.5,
-    borderColor: `${colors.white}33`,
-    shadowColor: colors.black,
-    shadowOffset: {width: 0, height: 1},
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    elevation: 2,
-  },
-  headerCountText: {
-    fontFamily: AppFonts.interMedium,
-    color: `${colors.white}F2`,
-    fontSize: 12,
-    letterSpacing: 0.2,
-  },
-
-  listContent: {paddingBottom: Platform.OS === 'ios' ? 44 : 32},
-  // Floating Support & Feedback FAB, in place of scroll-to-top button
-  supportFab: {
-    position: 'absolute',
-    bottom: 22,
-    right: 16,
-    width: 42,
-    height: 42,
-    borderRadius: 21,
-    backgroundColor: colors.purple,
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: colors.purple,
-    shadowOffset: {width: 0, height: 4},
-    shadowOpacity: 0.45,
-    shadowRadius: 8,
-    elevation: 14,
-    zIndex: 999,
-    borderWidth: 1.5,
-    borderColor: 'rgba(255, 255, 255, 0.25)',
-  },
-  scrollTopBtn: {
-    position: 'absolute',
-    bottom: 22,
-    right: 16,
-    width: 38,
-    height: 38,
-    borderRadius: 19,
-    backgroundColor: colors.purple,
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: colors.black,
-    shadowOffset: {width: 0, height: 3},
-    shadowOpacity: 0.3,
-    shadowRadius: 6,
-    elevation: 12,
-    zIndex: 999,
-  },
-  detailScroll: {flex: 1},
-
-  closeButtonSquare: {
-    width: 30,
-    height: 30,
-    borderRadius: 7,
-    backgroundColor: `${colors.white}2B`,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderColor: `${colors.white}33`,
-    overflow: 'hidden',
-  },
-
-  fabWrapper: {
-    position: 'absolute',
-    bottom: 180,
-    right: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 99999,
-    elevation: 15,
-    shadowColor: colors.purple,
-    shadowOffset: {width: 0, height: 8},
-    shadowOpacity: 0.4,
-    shadowRadius: 12,
-  },
-  fabPulseRing: {
-    position: 'absolute',
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    backgroundColor: `${colors.purple}25`,
-  },
-  // #4 — circular clipping mask for the FAB shine sweep.
-  fabShineClip: {
-    position: 'absolute',
-    width: 62,
-    height: 62,
-    borderRadius: 31,
-    overflow: 'hidden',
-  },
-  // #4 — diagonal light streak that sweeps across the launcher.
-  fabShineStreak: {
-    position: 'absolute',
-    top: -20,
-    width: 26,
-    height: 102,
-    transform: [{rotate: '25deg'}],
-  },
-  fabGreenDot: {
-    position: 'absolute',
-    top: 2,
-    right: 2,
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-    backgroundColor: colors.greenA400,
-    borderWidth: 2,
-    borderColor: colors.primaryLight,
-    shadowColor: colors.black,
-    shadowOffset: {width: 0, height: 1},
-    shadowOpacity: 0.2,
-    shadowRadius: 1.5,
-    elevation: 2,
-  },
-
-
-  toolbarRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 12,
-    marginBottom: 10,
-    gap: 10,
-    marginTop: 4,
-  },
-  toolbarRight: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 10,
-  },
-  toolbarBtn: {
-    width: 34,
-    height: 34,
-    borderRadius: 17,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: colors.primaryLight,
-    borderWidth: 1.5,
-    borderColor: colors.grayBorderSecondary,
-    ...(Platform.OS === 'ios'
-      ? {
-          shadowColor: colors.black,
-          shadowOffset: {width: 0, height: 1},
-          shadowOpacity: 0.04,
-          shadowRadius: 2,
-        }
-      : {
-          elevation: 0,
-        }),
-  },
-  toolbarBtnActive: {
-    borderColor: colors.purple,
-    backgroundColor: colors.purpleShade50,
-    shadowOpacity: 0.08,
-    shadowRadius: 3,
-    elevation: 2,
-  },
-  trashBadge: {
-    position: 'absolute',
-    top: -4,
-    right: -4,
-    backgroundColor: colors.errorColor,
-    borderRadius: 10,
-    minWidth: 18,
-    height: 18,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1.5,
-    borderColor: colors.primaryLight,
-  },
-  trashBadgeText: {
-    color: colors.primaryLight,
-    fontFamily: AppFonts.interBold,
-    fontSize: 9,
-  },
-
-  filtersContainer: {
-    paddingHorizontal: 12,
-    paddingBottom: 10,
-  },
-  filtersHeading: {
-    fontFamily: AppFonts.interBold,
-    color: colors.grayTextStrong,
-    fontSize: 11,
-    textTransform: 'uppercase',
-    letterSpacing: 0.6,
-    marginBottom: 6,
-  },
-  statusRowContent: {
-    alignItems: 'center',
-    paddingVertical: 2,
-  },
-  statusFilterWrap: {marginRight: 6},
-  statusFilterChip: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 9,
-    height: 32,
-    justifyContent: 'center',
-    borderRadius: 24,
-    borderWidth: 1.5,
-    borderColor: colors.grayBorderSecondary,
-    backgroundColor: colors.primaryLight,
-    shadowColor: colors.black,
-    shadowOffset: {width: 0, height: 1},
-    shadowOpacity: 0.04,
-    shadowRadius: 2,
-    elevation: 1,
-  },
-  statusFilterActive: {
-    borderColor: colors.purple,
-    backgroundColor: colors.purpleShade50,
-  },
-  filterCheckbox: {
-    width: 13,
-    height: 13,
-    borderRadius: 3,
-    borderWidth: 1.5,
-    borderColor: colors.grayBorderSecondary,
-    backgroundColor: colors.primaryLight,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 6,
-  },
-  filterCheckboxActive: {
-    borderColor: 'transparent',
-  },
-  filterChipIcon: {
-    marginRight: 5,
-  },
-  methodBadgeMini: {
-    width: 4.5,
-    height: 13,
-    borderRadius: 2,
-    marginRight: 6,
-  },
-  statusFilterText: {
-    fontFamily: AppFonts.interMedium,
-    color: colors.grayText,
-    fontSize: 11.5,
-  },
-
-  resultCount: {
-    fontFamily: AppFonts.interRegular,
-    color: colors.grayTextWeak,
-    fontSize: 12,
-    marginHorizontal: 16,
-    marginBottom: 8,
-    marginTop: 4,
-    letterSpacing: 0.2,
-  },
-
-  searchContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.primaryLight,
-    borderRadius: 24,
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderWidth: 1.5,
-    borderColor: colors.grayBorderSecondary,
-    shadowColor: colors.black,
-    shadowOffset: {width: 0, height: 1},
-    shadowOpacity: 0.04,
-    shadowRadius: 2,
-    elevation: 1,
-  },
-  searchInput: {
-    flex: 1,
-    fontFamily: AppFonts.interRegular,
-    color: colors.primaryBlack,
-    paddingVertical: Platform.OS === 'ios' ? 5 : 2,
-    marginLeft: 6,
-    fontSize: 14,
-  },
-  clearBtn: {padding: 4},
-
-  domainHeaderCard: {
-    marginHorizontal: 8,
-    marginTop: 10,
-    marginBottom: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 7,
-    borderRadius: 9,
-    backgroundColor: colors.grayBackground,
-    borderWidth: 1,
-    borderColor: colors.grayBorderSecondary,
-  },
-  domainHeaderCardExpanded: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    borderBottomWidth: 0,
-    marginBottom: 0,
-  },
-  domainHeaderTopRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  domainHeaderLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-    minWidth: 0,
-    marginRight: 6,
-    gap: 6,
-  },
-  domainIconWrap: {
-    width: 22,
-    height: 22,
-    borderRadius: 5,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  domainTitleText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 13,
-    fontWeight: '700',
-    color: colors.primaryBlack,
-    textTransform: 'capitalize',
-  },
-  domainSummaryRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    marginTop: 1,
-  },
-  domainSummaryText: {
-    fontFamily: AppFonts.interRegular,
-    fontSize: 10,
-    color: colors.grayTextWeak,
-  },
-  domainPctText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 9.5,
-  },
-  domainProgressSection: {
-    marginTop: 8,
-    gap: 4,
-    width: '100%',
-  },
-  domainProgressTrack: {
-    flexDirection: 'row',
-    height: 4,
-    borderRadius: 2,
-    overflow: 'hidden',
-    backgroundColor: '#E2E8F0',
-    width: '100%',
-  },
-  domainProgressSegment: {
-    height: '100%',
-  },
-  domainProgressLabelsRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 2,
-  },
-  domainProgressRateText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 9.5,
-    color: colors.grayTextStrong,
-  },
-  domainProgressSummaryText: {
-    fontFamily: AppFonts.interMedium,
-    fontSize: 9,
-    color: colors.grayTextWeak,
-  },
-  domainStatsGroup: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexShrink: 0,
-    gap: 4,
-  },
-  domainStatPill: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 3,
-    paddingHorizontal: 5,
-    paddingVertical: 2.5,
-    borderRadius: 5,
-    borderWidth: 1,
-    borderColor: colors.grayBorderSecondary,
-    backgroundColor: colors.primaryLight,
-  },
-  domainStatText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 9.5,
-  },
-
-  treeNodeRow: {
-    flexDirection: 'row',
-    alignItems: 'stretch',
-    marginHorizontal: 8,
-    paddingRight: 4,
-    paddingLeft: 0,
-    backgroundColor: colors.grayBackground,
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-    borderColor: colors.grayBorderSecondary,
-  },
-  treeNodeRowLast: {
-    borderBottomWidth: 1,
-    borderBottomLeftRadius: 10,
-    borderBottomRightRadius: 10,
-    marginBottom: 8,
-    paddingBottom: 6,
-  },
-  treeLines: {
-    width: 14,
-    position: 'relative',
-  },
-  modernTreeLine: {
-    position: 'absolute',
-    left: 7,
-    top: 0,
-    width: 7,
-    height: '100%',
-    borderLeftWidth: 1.5,
-    opacity: 0.5,
-  },
-  modernTreeLineLast: {
-    height: '50%',
-    borderBottomWidth: 1.5,
-    borderBottomLeftRadius: 8,
-  },
-  modernTreeBranch: {
-    position: 'absolute',
-    left: 7,
-    top: '50%',
-    width: 7,
-    borderTopWidth: 1.5,
-    opacity: 0.5,
-  },
-  treeCardWrapper: {
-    flex: 1,
-    paddingVertical: 3,
-  },
-
-  card: {
-    marginHorizontal: 0,
-    marginVertical: 0,
-    borderRadius: 12,
-    overflow: 'hidden',
-    shadowColor: colors.black,
-    shadowOffset: {width: 0, height: 2},
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    elevation: 2,
-    borderWidth: 1,
-    borderColor: colors.grayBorderSecondary,
-    backgroundColor: colors.primaryLight,
-  },
-  cardBody: {
-    paddingHorizontal: 12,
-    paddingTop: 10,
-    paddingBottom: 9,
-  },
-
-  cardHeaderRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 4,
-    minHeight: 22,
-  },
-  cardHeaderLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-    marginRight: 6,
-    gap: 5,
-    minWidth: 0,
-  },
-  cardHeaderRight: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 5,
-    flexShrink: 0,
-  },
-
-  smallCheckbox: {
-    width: 15,
-    height: 15,
-    borderRadius: 4,
-    borderWidth: 1.8,
-    borderColor: colors.grayTextWeak,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: colors.white,
-  },
-  smallCheckboxChecked: {
-    backgroundColor: colors.purple,
-    borderColor: colors.purple,
-  },
-
-  serialNumber: {
-    fontFamily: AppFonts.interBold,
-    color: colors.grayTextWeak,
-    fontSize: 10,
-  },
-
-  methodBadge: {
-    paddingHorizontal: 6.5,
-    paddingVertical: 2.5,
-    borderRadius: 5,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.3)',
-    ...(Platform.OS === 'ios'
-      ? {
-          shadowColor: colors.black,
-          shadowOffset: {width: 0, height: 1},
-          shadowOpacity: 0.12,
-          shadowRadius: 2,
-        }
-      : {
-          elevation: 1,
-        }),
-  },
-  methodBadgeText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 9.5,
-    letterSpacing: 0.6,
-    color: colors.white,
-  },
-
-  cardHostText: {
-    fontFamily: AppFonts.interMedium,
-    fontSize: 12,
-    color: colors.primaryBlack,
-    flexShrink: 1,
-  },
-
-  statusPill: {
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 6,
-    borderWidth: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  statusPillText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 10,
-  },
-
-  cardSlugBox: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    backgroundColor: `${colors.brandPurple}08`,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: `${colors.brandPurple}18`,
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    marginVertical: 5,
-    gap: 6,
-  },
-  slugLeft: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    flex: 1,
-    minWidth: 0,
-    gap: 6,
-  },
-  slugTag: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 8.5,
-    color: colors.brandPurple,
-    letterSpacing: 0.5,
-    backgroundColor: `${colors.brandPurple}15`,
-    paddingHorizontal: 4,
-    paddingVertical: 1.5,
-    borderRadius: 4,
-    marginTop: 1,
-    flexShrink: 0,
-  },
-  slugText: {
-    fontFamily: AppFonts.interMedium,
-    fontSize: 11.5,
-    lineHeight: 15.5,
-    color: colors.primaryBlack,
-    flex: 1,
-  },
-  slugRight: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    flexShrink: 0,
-  },
-
-  cardFooterRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginTop: 4,
-    minHeight: 18,
-  },
-  cardDateRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 3.5,
-    flexShrink: 0,
-  },
-  cardDateText: {
-    fontFamily: AppFonts.interRegular,
-    color: colors.grayTextWeak,
-    fontSize: 10,
-    letterSpacing: 0.1,
-  },
-  cardFooterRight: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 5,
-    flexShrink: 0,
-  },
-
-  chip: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 3.5,
-    paddingHorizontal: 5,
-    paddingVertical: 2,
-    borderRadius: 5,
-    borderWidth: 1,
-  },
-  chipText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 9.5,
-  },
-
-  empty: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  emptyContainer: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 80,
-    paddingHorizontal: 20,
-  },
-  emptyIconWrap: {
-    width: 72,
-    height: 72,
-    borderRadius: 36,
-    backgroundColor: colors.purpleShade50,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 20,
-    shadowColor: colors.black,
-    shadowOffset: {width: 0, height: 2},
-    shadowOpacity: 0.06,
-    shadowRadius: 4,
-    elevation: 1,
-  },
-  emptyTitle: {
-    fontFamily: AppFonts.interBold,
-    color: colors.grayTextStrong,
-    fontSize: 18,
-    marginBottom: 8,
-    letterSpacing: 0.3,
-  },
-  emptySub: {
-    fontFamily: AppFonts.interRegular,
-    color: colors.grayTextWeak,
-    fontSize: 14,
-    textAlign: 'center',
-    lineHeight: 20,
-    letterSpacing: 0.2,
-  },
-  reloadBtn: {
-    marginTop: 28,
-    paddingHorizontal: 24,
-    paddingVertical: 12,
-    backgroundColor: colors.purple,
-    borderRadius: 24,
-    shadowColor: colors.purple,
-    shadowOffset: {width: 0, height: 4},
-    shadowOpacity: 0.35,
-    shadowRadius: 8,
-    elevation: 5,
-  },
-  reloadBtnText: {
-    color: colors.white,
-    fontFamily: AppFonts.interBold,
-    fontSize: 14,
-    letterSpacing: 0.3,
-  },
-
-  detailInfoBar: {
-    borderRadius: 14,
-    paddingVertical: 14,
-    paddingHorizontal: 10,
-    marginBottom: 12,
-    borderWidth: 1,
-    borderColor: colors.grayBorderSecondary,
-    backgroundColor: colors.primaryLight,
-    shadowColor: colors.black,
-    shadowOffset: {width: 0, height: 2},
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    elevation: 2,
-  },
-  detailInfoTop: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingBottom: 8,
-    gap: 8,
-  },
-  detailInfoRight: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 5,
-    flexShrink: 0,
-  },
-
-  metaContainer: {
-    backgroundColor: colors.primaryLight,
-    borderWidth: 1,
-    borderColor: colors.grayBorderSecondary,
-    borderRadius: 14,
-    marginBottom: 12,
-    overflow: 'hidden',
-    shadowColor: colors.black,
-    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: colors.dividerColor,
-    backgroundColor: colors.primaryLight,
-  },
-  metaTitle: {
-    fontFamily: AppFonts.interBold,
-    color: colors.grayTextStrong,
-    fontSize: 12,
-    letterSpacing: 0.6,
-    textTransform: 'uppercase',
-  },
-  metaBody: {paddingHorizontal: 12, paddingBottom: 8, paddingTop: 4},
-  metaRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-  },
-  metaDivider: {height: 1, backgroundColor: colors.dividerColor},
-  metaLabelRow: {flexDirection: 'row', alignItems: 'center', gap: 8},
-  metaLabel: {
-    fontFamily: AppFonts.interBold,
-    color: colors.grayText,
-    fontSize: 13,
-  },
-  metaValue: {
-    fontFamily: AppFonts.interMedium,
-    color: colors.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,
-  },
-
-
-  detailSearchRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  detailSearchBox: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    backgroundColor: colors.primaryLight,
-    borderRadius: 12,
-    paddingLeft: 16,
-    borderWidth: 1,
-    borderColor: colors.grayBorderSecondary,
-  },
-  detailSearchInput: {
-    flex: 1,
-    fontFamily: AppFonts.interRegular,
-    color: colors.primaryBlack,
-    height: 40,
-  },
-
-  sectionContainer: {
-    backgroundColor: colors.primaryLight,
-    borderWidth: 1,
-    borderColor: colors.grayBorderSecondary,
-    borderRadius: 12,
-    marginBottom: 10,
-    overflow: 'hidden',
-  },
-  sectionHeaderGradient: {
-    backgroundColor: colors.grayBackground,
-    paddingVertical: 12,
-    paddingHorizontal: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.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: colors.grayTextStrong,
-    fontSize: 14,
-    flexShrink: 1,
-  },
-  sectionHeaderActions: {flexDirection: 'row', alignItems: 'center', gap: 6},
-
-  htCard: {
-    backgroundColor: colors.primaryLight,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: colors.grayBorderSecondary,
-    borderLeftWidth: 3,
-    marginBottom: 10,
-    overflow: 'hidden',
-  },
-  htCardHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 8,
-    paddingVertical: 10,
-    gap: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.dividerColor,
-    backgroundColor: colors.primaryLight,
-  },
-  htIconWrap: {
-    width: 28,
-    height: 28,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  htTitle: {
-    fontFamily: AppFonts.interBold,
-    color: colors.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: colors.grayBorderSecondary,
-    backgroundColor: colors.primaryLight,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  htColHeadRow: {
-    flexDirection: 'row',
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-    backgroundColor: colors.graySurface,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.dividerColor,
-  },
-  htColHead: {
-    fontFamily: AppFonts.interBold,
-    color: colors.grayTextWeak,
-    fontSize: 10,
-    letterSpacing: 0.8,
-    textTransform: 'uppercase',
-  },
-  htRow: {
-    flexDirection: 'row',
-    paddingHorizontal: 8,
-    paddingVertical: 0,
-    alignItems: 'flex-start',
-  },
-  htRowBorder: {
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: colors.dividerColor,
-  },
-  htKeyCell: {
-    width: '30%',
-    paddingVertical: 10,
-    paddingRight: 4,
-  },
-  htKey: {
-    fontFamily: AppFonts.interMedium,
-    color: colors.purple,
-    fontSize: 11,
-    lineHeight: 16,
-  },
-  htCellDivider: {
-    width: StyleSheet.hairlineWidth,
-    backgroundColor: colors.dividerColor,
-    alignSelf: 'stretch',
-    marginVertical: 4,
-  },
-  htValueCell: {
-    flex: 1,
-    paddingVertical: 10,
-    paddingLeft: 6,
-  },
-  htValue: {
-    fontFamily: AppFonts.interRegular,
-    color: colors.primaryBlack,
-    fontSize: 11,
-    lineHeight: 17,
-  },
-  htExpandRow: {
-    marginTop: 4,
-  },
-  htExpandText: {
-    fontFamily: AppFonts.interBold,
-    color: colors.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: colors.grayTextWeak,
-    fontSize: 12,
-  },
-
-  iconSquareBtn: {
-    width: 30,
-    height: 30,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: colors.grayBorderSecondary,
-    backgroundColor: colors.grayBackground,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  iconSquareBtnSuccess: {
-    borderColor: colors.greenColor,
-    backgroundColor: colors.greenStatus,
-  },
-  iconSquareBtnActive: {
-    borderColor: colors.skyBlue,
-    backgroundColor: colors.purpleShade50,
-  },
-
-  codeBlockScroll: {width: '100%', backgroundColor: 'transparent'},
-  codeBlock: {
-    paddingTop: 12,
-    paddingHorizontal: 8,
-    paddingBottom: 16,
-    minWidth: '100%',
-  },
-  codeSyntax: {
-    color: colors.grayTextWeak,
-    fontFamily: AppFonts.interRegular,
-    fontSize: 12.5,
-    lineHeight: 18,
-  },
-  codeKey: {
-    color: colors.purple,
-    fontFamily: AppFonts.interBold,
-    fontSize: 12.5,
-    lineHeight: 18,
-  },
-  codeText: {
-    color: colors.greenBaggageText,
-    fontFamily: AppFonts.interRegular,
-    fontSize: 12.5,
-    lineHeight: 18,
-  },
-  codeTextNil: {
-    color: colors.errorColor,
-    fontFamily: AppFonts.interMedium,
-    fontSize: 12.5,
-    lineHeight: 18,
-  },
-
-  treeRow: {flexDirection: 'row', alignItems: 'center', paddingVertical: 6},
-  treeKeyMargin: {marginRight: 6},
-
-  highlight: {
-    backgroundColor: colors.paleYellow,
-    color: colors.primaryBlack,
-  },
-  arrayBadge: {
-    backgroundColor: colors.purpleShade50,
-    borderColor: colors.purple,
-    borderWidth: 1,
-    borderRadius: 6,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-  },
-  arrayBadgeText: {
-    fontFamily: AppFonts.interMedium,
-    color: colors.purple,
-    fontSize: 11,
-  },
-  objectBadge: {
-    backgroundColor: colors.grayBackground,
-    borderColor: colors.grayTextWeak,
-    borderWidth: 1,
-    borderRadius: 6,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-  },
-  objectBadgeText: {
-    fontFamily: AppFonts.interMedium,
-    color: colors.grayTextWeak,
-    fontSize: 11,
-  },
-
-  diffBlock: {
-    paddingTop: 12,
-    paddingHorizontal: 12,
-    paddingBottom: 16,
-    gap: 4,
-  },
-  diffAdded: {
-    color: colors.greenColor,
-    fontFamily: AppFonts.interRegular,
-    fontSize: 12,
-  },
-  diffRemoved: {
-    color: colors.errorColor,
-    fontFamily: AppFonts.interRegular,
-    fontSize: 12,
-  },
-  diffChanged: {
-    color: colors.lightOrange,
-    fontFamily: AppFonts.interRegular,
-    fontSize: 12,
-  },
-
-  filePreviewNode: {paddingVertical: 8, marginVertical: 4},
-  filePreviewCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.grayBackground,
-    borderRadius: 10,
-    padding: 10,
-    borderWidth: 1,
-    borderColor: colors.grayBorderSecondary,
-    gap: 12,
-    maxWidth: 300,
-  },
-  filePreviewThumb: {
-    width: 44,
-    height: 44,
-    borderRadius: 6,
-    backgroundColor: colors.grayBorderSecondary,
-  },
-  filePreviewDoc: {
-    width: 44,
-    height: 44,
-    borderRadius: 6,
-    backgroundColor: colors.graySurface,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  filePreviewName: {
-    fontFamily: AppFonts.interMedium,
-    color: colors.primaryBlack,
-    fontSize: 13,
-    marginBottom: 2,
-  },
-  filePreviewType: {
-    fontFamily: AppFonts.interRegular,
-    color: colors.grayText,
-    fontSize: 11,
-  },
-
-  imagePreviewWrapper: {
-    width: '100%',
-    height: 200,
-    borderRadius: 12,
-    overflow: 'hidden',
-    marginBottom: 16,
-    backgroundColor: colors.grayBackground,
-    borderWidth: 1,
-    borderColor: colors.grayBorderSecondary,
-  },
-  imagePreview: {
-    width: '100%',
-    height: '100%',
-  },
-  imageDownloadBtn: {
-    position: 'absolute',
-    bottom: 12,
-    right: 12,
-    width: 36,
-    height: 36,
-    borderRadius: 18,
-    backgroundColor: `${colors.white}E6`,
-    alignItems: 'center',
-    justifyContent: 'center',
-    shadowColor: colors.black,
-    shadowOffset: {width: 0, height: 2},
-    shadowOpacity: 0.2,
-    shadowRadius: 4,
-    elevation: 3,
-  },
-
-  sourcePageCard: {
-    backgroundColor: colors.primaryLight,
-    borderWidth: 1,
-    borderColor: colors.grayBorderSecondary,
-    borderRadius: 12,
-    marginBottom: 10,
-    overflow: 'hidden',
-  },
-  sourcePageAccordionHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.dividerColor,
-    backgroundColor: colors.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: colors.purpleShade50,
-    borderWidth: 1,
-    borderColor: `${colors.purple}30`,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  sourcePageLabel: {
-    fontFamily: AppFonts.interRegular,
-    color: colors.grayText,
-    fontSize: 11,
-    marginBottom: 2,
-  },
-  sourcePageValue: {
-    fontFamily: AppFonts.interBold,
-    color: colors.purple,
-    fontSize: 14,
-  },
-  sourceParamsBox: {
-    borderTopWidth: 1,
-    borderTopColor: colors.dividerColor,
-  },
-  paramsAccordionHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.dividerColor,
-    backgroundColor: colors.grayBackground,
-  },
-  paramsAccordionLeft: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  paramsAccordionRight: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-  },
-  sourceParamsLabel: {
-    fontFamily: AppFonts.interBold,
-    color: colors.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: colors.dividerColor,
-  },
-  paramKey: {
-    fontFamily: AppFonts.Sfprotext,
-    color: colors.purple,
-    fontSize: 12,
-    flex: 1,
-  },
-  paramValueRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    flex: 2,
-    justifyContent: 'flex-end',
-  },
-  paramValue: {
-    fontFamily: AppFonts.Sfprotext,
-    color: colors.greenBaggageText,
-    fontSize: 12,
-    textAlign: 'right',
-    flexShrink: 1,
-  },
-  headerGradient: {
-    width: '100%',
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    overflow: 'hidden',
-    flexShrink: 0,
-  },
-
-  // Status chip used in MetaAccordion
-  statusChip: {
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 8,
-    borderWidth: 1,
-  },
-  statusText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 12,
-  },
-
-  // ─── Tab Bar ───────────────────────────────────────────────────────────────
-
-  // ─── Screen Grouping Headers ───────────────────────────────────────────────
-  modalBackdrop: {
-    flex: 1,
-    backgroundColor: `${colors.black}73`,
-    justifyContent: 'flex-end',
-  },
-  modalBackdropPressable: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  modalContentCard: {
-    height: '90%',
-    backgroundColor: colors.grayBackground,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    overflow: 'hidden',
-    shadowColor: colors.black,
-    shadowOffset: {width: 0, height: -4},
-    shadowOpacity: 0.15,
-    shadowRadius: 10,
-    elevation: 24,
-  },
-  tabBarContainer: {
-    backgroundColor: colors.primaryLight,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.dividerColor,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-  },
-  contentTabButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 8,
-    marginRight: 10,
-    backgroundColor: colors.grayBackground,
-    borderWidth: 1,
-    borderColor: colors.dividerColor,
-  },
-  contentTabButtonActive: {
-    backgroundColor: colors.purple,
-    borderColor: colors.purple,
-    shadowColor: colors.purple,
-    shadowOffset: {width: 0, height: 2},
-    shadowOpacity: 0.12,
-    shadowRadius: 3,
-    elevation: 3,
-  },
-  contentTabButtonText: {
-    fontFamily: AppFonts.interMedium,
-    fontSize: 11.5,
-    color: colors.grayText,
-  },
-  contentTabButtonTextActive: {
-    color: colors.white,
-    fontFamily: AppFonts.interBold,
-  },
-  analyticsHeaderCard: {
-    backgroundColor: colors.primaryLight,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: `${colors.brandPurple}20`,
-    padding: 12,
-    marginHorizontal: 10,
-    marginTop: 8,
-    marginBottom: 6,
-    shadowColor: colors.black,
-    shadowOpacity: 0.03,
-    shadowRadius: 4,
-    shadowOffset: {width: 0, height: 1},
-    elevation: 1,
-  },
-  analyticsHeaderTop: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  analyticsHeaderTitle: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 13.5,
-    color: colors.primaryBlack,
-  },
-  statusDot: {
-    width: 6,
-    height: 6,
-    borderRadius: 3,
-  },
-  analyticsHeaderSubtitle: {
-    fontFamily: AppFonts.interMedium,
-    fontSize: 11,
-    color: colors.grayTextWeak,
-    marginTop: 2,
-  },
-  analyticsHeaderToggle: {
-    paddingVertical: 4.5,
-    paddingHorizontal: 9,
-    borderRadius: 7,
-    backgroundColor: `${colors.brandPurple}12`,
-    borderWidth: 1,
-    borderColor: `${colors.brandPurple}25`,
-  },
-  analyticsHeaderToggleText: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 10.5,
-    color: colors.brandPurple,
-  },
-  analyticsStatsRow: {
-    flexDirection: 'row',
-    gap: 8,
-    borderTopWidth: 1,
-    borderTopColor: colors.dividerColor,
-    paddingTop: 10,
-  },
-  analyticsStatBox: {
-    flex: 1,
-    backgroundColor: colors.grayBackground,
-    borderRadius: 6,
-    paddingVertical: 6,
-    alignItems: 'center',
-  },
-  analyticsStatValue: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 14,
-    color: colors.primaryBlack,
-  },
-  analyticsStatLabel: {
-    fontFamily: AppFonts.interRegular,
-    fontSize: 9,
-    color: colors.grayText,
-    marginTop: 1,
-  },
-  analyticsHeaderDetails: {
-    borderTopWidth: 1,
-    borderTopColor: colors.dividerColor,
-    paddingTop: 10,
-    marginTop: 10,
-  },
-  detailsGroupTitle: {
-    fontFamily: AppFonts.interBold,
-    fontSize: 11,
-    color: colors.purple,
-    marginBottom: 6,
-  },
-  detailsRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingVertical: 4,
-    borderBottomWidth: 0.5,
-    borderBottomColor: colors.dividerColor,
-  },
-  detailsKey: {
-    fontFamily: AppFonts.interMedium,
-    fontSize: 11,
-    color: colors.primaryBlack,
-  },
-  detailsValue: {
-    fontFamily: AppFonts.interRegular,
-    fontSize: 11,
-    color: colors.grayText,
-  },
-});
-
-const styles = {} as any;
-
-const rebuildStyles = (isDark: boolean) => {
-  const colors = isDark ? getThemeColors(true) : AppColors;
-  const newStyles = getRawStyles(colors);
-
-  // Clear old keys and copy new ones
-  Object.keys(styles).forEach(key => delete styles[key]);
-  Object.assign(styles, newStyles);
-};
-
-// Initial build
-rebuildStyles(false);
-
-export const toggleGlobalTheme = (isDark: boolean) => {
-  updateAppColorsTheme(isDark);
-  rebuildStyles(isDark);
-  rebuildCommonStyles(isDark ? getThemeColors(true) : AppColors);
-};
-
-export default styles;