react-native-inapp-inspector 2.2.2 → 2.2.3

package/src/styles/index.ts

@@ -0,0 +1,1570 @@
+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',
+    width: '100%',
+  },
+  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},
+  // #2 — scroll-to-top button, always shown at the bottom right.
+  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,
+  },
+  cardHeaderLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    marginRight: 8,
+    gap: 6,
+  },
+  cardHeaderRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+  },
+
+  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,
+    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,
+  },
+  slugText: {
+    fontFamily: AppFonts.interMedium,
+    fontSize: 11.5,
+    lineHeight: 15.5,
+    color: colors.primaryBlack,
+    flex: 1,
+  },
+  slugRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+
+  cardFooterRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 2,
+  },
+  cardDateRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 3.5,
+  },
+  cardDateText: {
+    fontFamily: AppFonts.interRegular,
+    color: colors.grayTextWeak,
+    fontSize: 10,
+    letterSpacing: 0.1,
+  },
+  cardFooterRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+  },
+
+  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: 10,
+  },
+  detailInfoRight: {flexDirection: 'row', alignItems: 'center', gap: 6},
+
+  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',
+  },
+
+  // 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;