react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/esm/styles/AppColors.d.ts

@@ -23,6 +23,80 @@ declare const LightColors: {
     greenStatus: string;
     greenBaggageText: string;
     paleYellow: string;
+    white: string;
+    black: string;
+    brandPurple: string;
+    liveGreen: string;
+    firebaseOrange: string;
+    greenA400: string;
+    slate900: string;
+    slate700: string;
+    slate600: string;
+    slate500: string;
+    slate400: string;
+    slate200: string;
+    slate100: string;
+    slate50: string;
+    gray700: string;
+    gray300: string;
+    highlightYellow: string;
+    yellowHighlight: string;
+    teal600: string;
+    cyan600: string;
+    sky600: string;
+    blue500: string;
+    blue600: string;
+    blue700: string;
+    blue800: string;
+    indigo600: string;
+    violet600: string;
+    violet500: string;
+    purpleText: string;
+    pink600: string;
+    rose600: string;
+    orange600: string;
+    amber500: string;
+    amber600: string;
+    amber700: string;
+    amber800: string;
+    green500: string;
+    green600: string;
+    green700: string;
+    green800: string;
+    emerald500: string;
+    emerald600: string;
+    grey600: string;
+    redErrorText: string;
+    materialGreen: string;
+    googleBlue: string;
+    googleGreen: string;
+    googleOrange: string;
+    googleRed: string;
+    googlePurple: string;
+    googleTeal: string;
+    errorCardBg: string;
+    warnCardBg: string;
+    blueTintBg: string;
+    purpleTintBg: string;
+    purpleTint2: string;
+    roseBg: string;
+    roseBorder: string;
+    errorBorder: string;
+    amberBg: string;
+    amberBorder: string;
+    emeraldBg: string;
+    emeraldBorder: string;
+    blueBg: string;
+    blueBorder: string;
+    greenBg: string;
+    greenBorder: string;
+    purpleBg: string;
+    purpleBorder: string;
+    greyBg: string;
+    greyBorder: string;
+    paperBg: string;
+    contentBg: string;
+    domainColors: string[];
 };
 export declare const getThemeColors: (isDark: boolean) => {
     primaryLight: string;
@@ -49,6 +123,80 @@ export declare const getThemeColors: (isDark: boolean) => {
     greenStatus: string;
     greenBaggageText: string;
     paleYellow: string;
+    white: string;
+    black: string;
+    brandPurple: string;
+    liveGreen: string;
+    firebaseOrange: string;
+    greenA400: string;
+    slate900: string;
+    slate700: string;
+    slate600: string;
+    slate500: string;
+    slate400: string;
+    slate200: string;
+    slate100: string;
+    slate50: string;
+    gray700: string;
+    gray300: string;
+    highlightYellow: string;
+    yellowHighlight: string;
+    teal600: string;
+    cyan600: string;
+    sky600: string;
+    blue500: string;
+    blue600: string;
+    blue700: string;
+    blue800: string;
+    indigo600: string;
+    violet600: string;
+    violet500: string;
+    purpleText: string;
+    pink600: string;
+    rose600: string;
+    orange600: string;
+    amber500: string;
+    amber600: string;
+    amber700: string;
+    amber800: string;
+    green500: string;
+    green600: string;
+    green700: string;
+    green800: string;
+    emerald500: string;
+    emerald600: string;
+    grey600: string;
+    redErrorText: string;
+    materialGreen: string;
+    googleBlue: string;
+    googleGreen: string;
+    googleOrange: string;
+    googleRed: string;
+    googlePurple: string;
+    googleTeal: string;
+    errorCardBg: string;
+    warnCardBg: string;
+    blueTintBg: string;
+    purpleTintBg: string;
+    purpleTint2: string;
+    roseBg: string;
+    roseBorder: string;
+    errorBorder: string;
+    amberBg: string;
+    amberBorder: string;
+    emeraldBg: string;
+    emeraldBorder: string;
+    blueBg: string;
+    blueBorder: string;
+    greenBg: string;
+    greenBorder: string;
+    purpleBg: string;
+    purpleBorder: string;
+    greyBg: string;
+    greyBorder: string;
+    paperBg: string;
+    contentBg: string;
+    domainColors: string[];
 };
 export declare const AppColors: typeof LightColors;
 export declare const updateAppColorsTheme: (isDark: boolean) => void;

package/dist/esm/styles/AppColors.js

@@ -1,4 +1,5 @@
 const LightColors = {
+    // ─── Core (theme-switching) ───
     primaryLight: '#FFFFFF',
     purple: '#684B9B',
     purpleShade50: '#F9F5FF',
@@ -23,6 +24,96 @@ const LightColors = {
     greenStatus: '#D0F8DE',
     greenBaggageText: '#159E44',
     paleYellow: '#F9DB7C',
+    // ─── Brand / UI (fixed) ───
+    white: '#FFFFFF',
+    black: '#000000',
+    brandPurple: '#6B4EFF',
+    liveGreen: '#4ADE80',
+    firebaseOrange: '#E07B1A',
+    greenA400: '#00E676',
+    // ─── Code / slate (fixed) ───
+    slate900: '#0F172A',
+    slate700: '#334155',
+    slate600: '#475569',
+    slate500: '#64748B',
+    slate400: '#94A3B8',
+    slate200: '#E2E8F0',
+    slate100: '#F1F5F9',
+    slate50: '#F8FAFC',
+    gray700: '#374151',
+    gray300: '#D1D5DB',
+    highlightYellow: '#FDE047',
+    yellowHighlight: '#FFE44D',
+    // ─── Status / syntax (fixed) ───
+    teal600: '#0D9488',
+    cyan600: '#0891B2',
+    sky600: '#0284C7',
+    blue500: '#3B82F6',
+    blue600: '#2563EB',
+    blue700: '#1565C0',
+    blue800: '#1976D2',
+    indigo600: '#4F46E5',
+    violet600: '#7C3AED',
+    violet500: '#8B5CF6',
+    purpleText: '#7B1FA2',
+    pink600: '#DB2777',
+    rose600: '#E11D48',
+    orange600: '#EA580C',
+    amber500: '#F59E0B',
+    amber600: '#EAB308',
+    amber700: '#D97706',
+    amber800: '#854D0E',
+    green500: '#22C55E',
+    green600: '#16A34A',
+    green700: '#15803D',
+    green800: '#166534',
+    emerald500: '#10B981',
+    emerald600: '#059669',
+    grey600: '#616161',
+    redErrorText: '#991B1B',
+    materialGreen: '#2E7D32',
+    googleBlue: '#4285F4',
+    googleGreen: '#34A853',
+    googleOrange: '#F57C00',
+    googleRed: '#E53935',
+    googlePurple: '#9C27B0',
+    googleTeal: '#00897B',
+    // ─── Tint backgrounds / borders (theme-aware) ───
+    errorCardBg: '#FFF5F6',
+    warnCardBg: '#FFFDF6',
+    blueTintBg: '#E6F2FF',
+    purpleTintBg: '#F4EBFF',
+    purpleTint2: '#EAE5FF',
+    roseBg: '#FFE4E6',
+    roseBorder: '#FCC2D7',
+    errorBorder: '#FCA5A5',
+    amberBg: '#FEF3C7',
+    amberBorder: '#FDE68A',
+    emeraldBg: '#ECFDF5',
+    emeraldBorder: '#A7F3D0',
+    blueBg: '#E3F2FD',
+    blueBorder: '#BBDEFB',
+    greenBg: '#E8F5E9',
+    greenBorder: '#C8E6C9',
+    purpleBg: '#F3E5F5',
+    purpleBorder: '#E1BEE7',
+    greyBg: '#F5F5F5',
+    greyBorder: '#E0E0E0',
+    paperBg: '#FAF9F6',
+    contentBg: '#F8F9FB',
+    // ─── Domain colors (fixed) ───
+    domainColors: [
+        '#1a5276',
+        '#8e44ad',
+        '#1e8449',
+        '#c0392b',
+        '#d35400',
+        '#d68910',
+        '#16a085',
+        '#27ae60',
+        '#2c3e50',
+        '#c2185b',
+    ],
 };
 const DarkColors = {
     primaryLight: '#1E1E24',
@@ -49,6 +140,91 @@ const DarkColors = {
     greenStatus: '#064E3B',
     greenBaggageText: '#34D399',
     paleYellow: '#78350F',
+    white: '#FFFFFF',
+    black: '#000000',
+    brandPurple: '#6B4EFF',
+    liveGreen: '#4ADE80',
+    firebaseOrange: '#E07B1A',
+    greenA400: '#00E676',
+    slate900: '#0F172A',
+    slate700: '#334155',
+    slate600: '#475569',
+    slate500: '#64748B',
+    slate400: '#94A3B8',
+    slate200: '#E2E8F0',
+    slate100: '#F1F5F9',
+    slate50: '#F8FAFC',
+    gray700: '#374151',
+    gray300: '#D1D5DB',
+    highlightYellow: '#FDE047',
+    yellowHighlight: '#FFE44D',
+    teal600: '#0D9488',
+    cyan600: '#0891B2',
+    sky600: '#0284C7',
+    blue500: '#3B82F6',
+    blue600: '#2563EB',
+    blue700: '#1565C0',
+    blue800: '#1976D2',
+    indigo600: '#4F46E5',
+    violet600: '#7C3AED',
+    violet500: '#8B5CF6',
+    purpleText: '#7B1FA2',
+    pink600: '#DB2777',
+    rose600: '#E11D48',
+    orange600: '#EA580C',
+    amber500: '#F59E0B',
+    amber600: '#EAB308',
+    amber700: '#D97706',
+    amber800: '#854D0E',
+    green500: '#22C55E',
+    green600: '#16A34A',
+    green700: '#15803D',
+    green800: '#166534',
+    emerald500: '#10B981',
+    emerald600: '#059669',
+    grey600: '#616161',
+    redErrorText: '#991B1B',
+    materialGreen: '#2E7D32',
+    googleBlue: '#4285F4',
+    googleGreen: '#34A853',
+    googleOrange: '#F57C00',
+    googleRed: '#E53935',
+    googlePurple: '#9C27B0',
+    googleTeal: '#00897B',
+    errorCardBg: '#3B1D23',
+    warnCardBg: '#3B341C',
+    blueTintBg: '#1C2F4A',
+    purpleTintBg: '#2E2447',
+    purpleTint2: '#2B2540',
+    roseBg: '#3B1D21',
+    roseBorder: '#7F2D44',
+    errorBorder: '#7F2D36',
+    amberBg: '#3B3017',
+    amberBorder: '#7F6A2D',
+    emeraldBg: '#16302B',
+    emeraldBorder: '#2D6A52',
+    blueBg: '#16263D',
+    blueBorder: '#2D4A73',
+    greenBg: '#16271A',
+    greenBorder: '#2D5C33',
+    purpleBg: '#2B1E31',
+    purpleBorder: '#5A3872',
+    greyBg: '#1E1E24',
+    greyBorder: '#374151',
+    paperBg: '#201F1B',
+    contentBg: '#16181D',
+    domainColors: [
+        '#1a5276',
+        '#8e44ad',
+        '#1e8449',
+        '#c0392b',
+        '#d35400',
+        '#d68910',
+        '#16a085',
+        '#27ae60',
+        '#2c3e50',
+        '#c2185b',
+    ],
 };
 export const getThemeColors = (isDark) => {
     return isDark ? DarkColors : LightColors;

package/dist/esm/styles/common.d.ts

@@ -0,0 +1,3 @@
+declare const commonStyles: Record<string, any>;
+export declare const rebuildCommonStyles: (colors: any) => void;
+export default commonStyles;

package/dist/esm/styles/common.js

@@ -0,0 +1,197 @@
+import { StyleSheet } from 'react-native';
+import { AppFonts } from './AppFonts';
+import { AppColors } from './AppColors';
+// Shared styles for the Inspector UI (repeated patterns + page-level layout).
+// Built dynamically so dark-mode colors stay in sync with toggleGlobalTheme()
+// (see rebuildCommonStyles wired into styles/index.ts).
+const commonStyles = {};
+const buildCommonStyles = (colors) => {
+    const newStyles = StyleSheet.create({
+        // ─── Layout ──────────────────────────────────────────────────────────────
+        pageContainer: {
+            flex: 1,
+            backgroundColor: colors.grayBackground,
+        },
+        listHeader: {
+            paddingHorizontal: 16,
+            paddingTop: 12,
+            paddingBottom: 8,
+        },
+        rowCenter: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+        },
+        rowCenterWrap: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+            flexWrap: 'wrap',
+        },
+        rowSpaceBetween: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 8,
+        },
+        // ─── Cards / rows ────────────────────────────────────────────────────────
+        card: {
+            backgroundColor: colors.primaryLight,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: colors.grayBorderSecondary,
+        },
+        listCard: {
+            marginHorizontal: 16,
+            marginVertical: 6,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: colors.grayBorderSecondary,
+            backgroundColor: colors.primaryLight,
+            padding: 14,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 12,
+            shadowColor: colors.black,
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.04,
+            shadowRadius: 4,
+            elevation: 2,
+        },
+        consoleRow: {
+            marginHorizontal: 12,
+            marginVertical: 3,
+            borderRadius: 8,
+            borderWidth: 1,
+            borderColor: colors.grayBorderSecondary,
+            padding: 10,
+            flexDirection: 'row',
+            gap: 8,
+            alignItems: 'flex-start',
+        },
+        // ─── Search bar ──────────────────────────────────────────────────────────
+        searchBar: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: colors.grayBackground,
+            borderRadius: 8,
+            marginHorizontal: 16,
+            marginTop: 16,
+            marginBottom: 12,
+            paddingHorizontal: 10,
+            borderWidth: 1,
+            borderColor: colors.dividerColor,
+            height: 36,
+        },
+        // ─── Tabs / pills ────────────────────────────────────────────────────────
+        tabBarStrip: {
+            backgroundColor: colors.primaryLight,
+            borderBottomWidth: 1,
+            borderBottomColor: colors.dividerColor,
+            paddingVertical: 6,
+        },
+        subTabPill: {
+            paddingVertical: 6,
+            paddingHorizontal: 14,
+            borderRadius: 8,
+            alignItems: 'center',
+            flexDirection: 'row',
+            gap: 6,
+            backgroundColor: `${colors.black}08`,
+            borderWidth: 1,
+            borderColor: 'transparent',
+        },
+        subTabPillActive: {
+            backgroundColor: colors.purple,
+            borderColor: colors.purple,
+        },
+        subTabPillText: {
+            fontFamily: AppFonts.interMedium,
+            fontSize: 12,
+            color: colors.grayTextStrong,
+        },
+        subTabPillTextActive: {
+            fontFamily: AppFonts.interBold,
+            fontSize: 12,
+            color: colors.white,
+        },
+        innerTab: {
+            paddingVertical: 8,
+            paddingHorizontal: 4,
+            borderBottomWidth: 2,
+            borderBottomColor: 'transparent',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+        },
+        countBadge: {
+            minWidth: 20,
+            height: 18,
+            borderRadius: 9,
+            paddingHorizontal: 5,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: colors.grayBackground,
+        },
+        // ─── Header / address bar ────────────────────────────────────────────────
+        addressBar: {
+            paddingHorizontal: 12,
+            paddingTop: 6,
+            paddingBottom: 6,
+            backgroundColor: colors.primaryLight,
+            borderBottomWidth: 1,
+            borderBottomColor: colors.dividerColor,
+        },
+        addressBarInner: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: colors.grayBackground,
+            borderRadius: 8,
+            borderWidth: 1.5,
+            borderColor: colors.grayBorderSecondary,
+            paddingHorizontal: 10,
+            paddingVertical: 5,
+            gap: 8,
+        },
+        inspectBanner: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            backgroundColor: colors.purpleShade50,
+            paddingHorizontal: 12,
+            paddingVertical: 6,
+            borderBottomWidth: 1,
+            borderBottomColor: colors.dividerColor,
+        },
+        // ─── Badges / buttons ────────────────────────────────────────────────────
+        badgeActive: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+            backgroundColor: colors.greenStatus,
+            paddingHorizontal: 8,
+            paddingVertical: 3,
+            borderRadius: 12,
+        },
+        iconButton: {
+            width: 26,
+            height: 26,
+            borderRadius: 13,
+            backgroundColor: colors.grayBackground,
+            borderWidth: 1,
+            borderColor: colors.grayBorderSecondary,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    });
+    // Clear old keys and copy new ones (keeps the exported object identity).
+    Object.keys(commonStyles).forEach(key => delete commonStyles[key]);
+    Object.assign(commonStyles, newStyles);
+};
+// Initial build
+buildCommonStyles(AppColors);
+export const rebuildCommonStyles = (colors) => {
+    buildCommonStyles(colors);
+};
+export default commonStyles;