react-native-inapp-inspector 2.3.16 → 2.3.17

package/dist/esm/customHooks/useAccordion.d.ts

@@ -1,17 +1,12 @@
-import { Animated } from 'react-native';
-declare const useAccordion: (initialOpen?: boolean, maxBodyHeight?: number, duration?: number) => {
+declare const useAccordion: (initialOpen?: boolean, _maxBodyHeight?: number, _duration?: number) => {
     isOpen: boolean;
     toggleOpen: () => void;
     forceOpen: (open: boolean) => void;
     chevronStyle: {
         transform: {
-            rotate: Animated.AnimatedInterpolation<string | number>;
+            rotate: string;
         }[];
     };
-    bodyStyle: {
-        maxHeight: Animated.AnimatedInterpolation<string | number>;
-        overflow: "hidden";
-        opacity: Animated.AnimatedInterpolation<string | number>;
-    };
+    bodyStyle: {};
 };
 export default useAccordion;

package/dist/esm/customHooks/useAccordion.js

@@ -1,46 +1,16 @@
-import { useCallback, useRef, useState } from 'react';
-import { Animated } from 'react-native';
-const useAccordion = (initialOpen = false, maxBodyHeight = 1200, duration = 280) => {
+import { useCallback, useState } from 'react';
+const useAccordion = (initialOpen = false, _maxBodyHeight = 1200, _duration = 280) => {
     const [isOpen, setIsOpen] = useState(initialOpen);
-    const animVal = useRef(new Animated.Value(initialOpen ? 1 : 0)).current;
     const toggleOpen = useCallback(() => {
-        const next = !isOpen;
-        setIsOpen(next);
-        Animated.timing(animVal, {
-            toValue: next ? 1 : 0,
-            duration,
-            useNativeDriver: false,
-        }).start();
-    }, [isOpen, animVal, duration]);
+        setIsOpen(prev => !prev);
+    }, []);
     const forceOpen = useCallback((open) => {
         setIsOpen(open);
-        Animated.timing(animVal, {
-            toValue: open ? 1 : 0,
-            duration,
-            useNativeDriver: false,
-        }).start();
-    }, [animVal, duration]);
+    }, []);
     const chevronStyle = {
-        transform: [
-            {
-                rotate: animVal.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: ['0deg', '180deg'],
-                }),
-            },
-        ],
-    };
-    const bodyStyle = {
-        maxHeight: animVal.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, maxBodyHeight],
-        }),
-        overflow: 'hidden',
-        opacity: animVal.interpolate({
-            inputRange: [0, 0.4, 1],
-            outputRange: [0, 0.7, 1],
-        }),
+        transform: [{ rotate: isOpen ? '180deg' : '0deg' }],
     };
+    const bodyStyle = {};
     return { isOpen, toggleOpen, forceOpen, chevronStyle, bodyStyle };
 };
 export default useAccordion;

package/dist/esm/helpers/index.d.ts

@@ -9,7 +9,8 @@ export declare const formatTimestamp: (timestamp: number) => string;
 export declare const getStatusColor: (status: number | null) => string;
 export declare const getDurationColor: (duration: number | null) => string;
 export declare const getSize: (data: unknown) => string;
-export declare const copyToClipboard: (value: unknown, label: string) => void;
+export declare const formatBytes: (bytes: number) => string;
+export declare const copyToClipboard: (value: unknown, label?: string) => void;
 export declare const getPath: (url: string) => string;
 export declare const getBaseUrl: (url: string) => string;
 export declare const getCurlCommand: (log: NetworkLog) => string;

package/dist/esm/helpers/index.js

@@ -77,6 +77,14 @@ export const getSize = (data) => {
         return '—';
     }
 };
+export const formatBytes = (bytes) => {
+    if (bytes === 0 || !bytes || isNaN(bytes))
+        return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i] || 'B'}`;
+};
 export const copyToClipboard = (value, label) => {
     const resolved = typeof value === 'function' ? value() : value;
     let textToCopy = '';

package/dist/esm/i18n/locales/en.json

@@ -24,7 +24,19 @@
         "updateAvailableTitle": "Update Available",
         "updateAvailableMessage": "react-native-inapp-inspector v{{version}} is available on NPM (installed: v{{installed}}).",
         "clearEverythingTitle": "Clear Everything",
-        "clearEverythingMessage": "This clears all tabs — APIs, Logs, Analytics and Redux timeline. Continue?",
+        "clearEverythingMessage": "This clears all tabs — APIs, Logs, Analytics, Redux timeline and Crash history. Continue?",
+        "photo": "Photo",
+        "record": "Record",
+        "rec": "REC",
+        "clear": "Clear",
+        "about": "About",
+        "screenshotCaptured": "📸 Screenshot captured & saved",
+        "screenshotFailed": "Failed to capture screenshot",
+        "screenshotError": "Error taking screenshot",
+        "recordingStarted": "🔴 Video recording started",
+        "recordingSaved": "🎥 Recording saved ({{duration}}s)",
+        "recordingError": "Recording error",
+        "recordingStartFailed": "Failed to start recording",
         "paramCount": "{{count}} param",
         "paramCount_plural": "{{count}} params",
         "sourceFirebase": "FB",
@@ -41,7 +53,8 @@
         "performance": "Performance",
         "crash": "Crash",
         "device": "Device",
-        "storage": "Storage"
+        "storage": "Storage",
+        "media": "Media"
     },
     "settings": {
         "mainTitle": "Settings & Modules",
@@ -58,6 +71,7 @@
         "modulesAndTools": "Modules & Tools",
         "uiPreferences": "UI & Display",
         "ramLimits": "RAM & Limits",
+        "screenVideoCapture": "Screen & Video Capture",
         "zeroOverheadTitle": "Zero Background Overhead",
         "zeroOverheadDesc": "Check the modules you wish to activate. Disabled modules consume 0% CPU & memory until saved.",
         "unsavedPending": "● Unsaved selections pending",
@@ -161,6 +175,32 @@
             "clearHistoryDesc": "{{count}} crash logs stored",
             "historyCleared": "Crash logs cleared."
         },
+        "media": {
+            "title": "Screen & Video Capture",
+            "badge": "Native H.264 / GIF",
+            "desc": "Configure screenshot formats, quality, video FPS, audio narration, GIF recording & storage",
+            "screenshotCardTitle": "Screenshot Formats & Quality",
+            "screenshotCardDesc": "High-resolution full-window snapshot configuration",
+            "imageFormat": "Image Format",
+            "imageFormatDesc": "PNG (lossless), JPEG (compact), or WEBP",
+            "autoHide": "Auto-Hide Inspector Overlay",
+            "autoHideDesc": "Excludes inspector UI from screenshots",
+            "enabled": "ENABLED",
+            "videoCardTitle": "Video & GIF Recording",
+            "videoCardDesc": "H.264 MP4 recording & animated GIF export",
+            "audioMode": "Audio Narration Mode",
+            "audioModeDesc": "Muted, App Audio, or Voice Narration",
+            "frameRate": "Frame Rate",
+            "frameRateDesc": "Higher FPS yields smoother recordings",
+            "gifAutoOpt": "GIF Auto-Optimization",
+            "gifAutoOptDesc": "Converts video recordings for GitHub PRs & Slack",
+            "purgeAll": "Purge All Captured Media",
+            "purgeAllDesc": "Deletes all stored screenshots, videos, and GIFs",
+            "purgeCacheBtn": "Purge Cache",
+            "purgeConfirmTitle": "Purge Media Storage",
+            "purgeConfirmMessage": "This deletes all captured media files from local cache. Continue?",
+            "purgedSuccess": "Media storage purged"
+        },
         "general": {
             "darkMode": "Dark Mode Theme",
             "darkModeDescription": "Toggle sleek dark aesthetic or light contrast",
@@ -1054,5 +1094,29 @@
         "frameCopy": "Copy",
         "frameCopied": "Copied",
         "componentHierarchy": "Component Hierarchy"
+    },
+    "mediaGallery": {
+        "all": "All ({{count}})",
+        "photos": "Photos",
+        "videos": "Videos",
+        "gifs": "GIFs",
+        "purge": "Purge ({{size}})",
+        "purgeTitle": "Purge All Media",
+        "purgeMessage": "This will permanently delete all {{count}} captured screenshots, videos, and GIFs ({{size}}). Continue?",
+        "noMediaTitle": "No Captured Media",
+        "noMediaDesc": "Use the Photo or Video Record button in the toolbar to capture whole-app screenshots, screen recordings, or GIFs.",
+        "deleted": "Deleted media item",
+        "allPurged": "All captured media purged",
+        "converting": "Converting...",
+        "convertToGif": "Convert to GIF",
+        "convertedSuccess": "Converted to Animated GIF successfully!",
+        "convertFailed": "Failed to convert to GIF",
+        "share": "Share",
+        "copyUri": "Copy URI",
+        "uriCopied": "File URI copied to clipboard",
+        "delete": "Delete",
+        "deleteTitle": "Delete Media",
+        "deleteMessage": "Are you sure you want to delete {{filename}}?",
+        "shareUnavailable": "Sharing not available on this device"
     }
 }

package/dist/esm/index.d.ts

@@ -27,4 +27,5 @@ export { AppFonts, setAppFonts, type AppFontConfig, } from './styles/AppFonts';
 export { AppColors, setAppColors, getThemeColors, updateAppColorsTheme, } from './styles/AppColors';
 export { t, i18n, useTranslation, setLanguage, addTranslations, setTranslations, I18nextProvider, } from './i18n';
 export { fetchRemoteConfigModuleStatus, isFirebaseRemoteConfigAvailable, } from './helpers/remoteConfig';
+export { ScreenCapture, ScreenRecorder, type ScreenshotOptions, type ScreenshotResult, type RecordingOptions, type RecordingResult, type GifConversionOptions, type CapturedMediaItem, type ImageFormat, type AudioSource, type RecordingFormat, } from './capture';
 export { LIB_VERSION } from './constants/version';

package/dist/esm/index.js

@@ -648,12 +648,12 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             Animated.timing(clearAnim, {
                 toValue: 1,
                 duration: 320,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             Animated.timing(clearAnim, {
                 toValue: 0,
                 duration: 0,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]).start();
         handleClearAll();
@@ -664,49 +664,53 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         }
     }, []);
     useEffect(() => {
+        if (visible)
+            return;
         const loop = Animated.loop(Animated.sequence([
             Animated.timing(pulseAnim, {
                 toValue: 1.2,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             Animated.timing(pulseAnim, {
                 toValue: 1,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]));
         loop.start();
         return () => loop.stop();
-    }, [pulseAnim]);
+    }, [pulseAnim, visible]);
     useEffect(() => {
+        if (visible)
+            return;
         const loop = Animated.loop(Animated.sequence([
             Animated.timing(fabShineAnim, {
                 toValue: 1,
                 duration: 1100,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             Animated.delay(1600),
             Animated.timing(fabShineAnim, {
                 toValue: 0,
                 duration: 0,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]));
         loop.start();
         return () => loop.stop();
-    }, [fabShineAnim]);
+    }, [fabShineAnim, visible]);
     useEffect(() => {
         const loop = Animated.loop(Animated.sequence([
             Animated.timing(activePulseAnim, {
                 toValue: 1,
                 duration: 1200,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             Animated.timing(activePulseAnim, {
                 toValue: 0.4,
                 duration: 1200,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]));
         loop.start();
@@ -717,12 +721,12 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             Animated.timing(unreadPulseAnim, {
                 toValue: 1.3,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
             Animated.timing(unreadPulseAnim, {
                 toValue: 0.8,
                 duration: 800,
-                useNativeDriver: true,
+                useNativeDriver: false,
             }),
         ]));
         loop.start();
@@ -760,6 +764,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         if (!useNativeFab)
             return;
         const unsubscribe = subscribeNativeFloatingButtonPress(() => {
+            hideNativeFloatingButton().catch(() => { });
             setVisible(true);
         });
         return () => {
@@ -770,7 +775,13 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         if (!useNativeFab)
             return;
         const unsubscribe = subscribeNativeDeviceShake(() => {
-            setVisible(prev => !prev);
+            setVisible(prev => {
+                const next = !prev;
+                if (next) {
+                    hideNativeFloatingButton().catch(() => { });
+                }
+                return next;
+            });
         });
         return () => {
             unsubscribe();
@@ -1152,18 +1163,20 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
     }, []);
     const groupedData = useMemo(() => {
         const result = [];
-        const groups = [];
+        const groupMap = new Map();
         for (let i = 0; i < filteredLogs.length; i++) {
             const log = filteredLogs[i];
             const routeInfo = logRouteMapRef.current.get(log.id) || log?.routeInfo;
             const pageName = getLogPageName(log, routeInfo);
-            if (groups.length === 0 ||
-                groups[groups.length - 1].pageName !== pageName) {
-                groups.push({ pageName, color: getDomainColor(pageName), logs: [] });
+            let group = groupMap.get(pageName);
+            if (!group) {
+                group = { pageName, color: getDomainColor(pageName), logs: [] };
+                groupMap.set(pageName, group);
             }
-            groups[groups.length - 1].logs.push(log);
+            group.logs.push(log);
         }
-        groups.forEach((g, idx) => {
+        let idx = 0;
+        groupMap.forEach(g => {
             let success = 0;
             let failed = 0;
             let loading = 0;
@@ -1180,7 +1193,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             const timestamp = g.logs[0]?.startTime || 0;
             result.push({
                 type: 'header',
-                id: `hdr-${g.logs[0]?.id || 'empty'}-${g.pageName}`,
+                id: `hdr-${g.pageName}`,
                 pageName: g.pageName,
                 color: g.color,
                 stats: { success, failed, loading },
@@ -1189,6 +1202,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
                 isCollapsed,
                 isFirst: idx === 0,
             });
+            idx++;
             if (!isCollapsed) {
                 const displayLogs = g.logs.filter(l => {
                     if (l.status == null)
@@ -1200,7 +1214,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
                 displayLogs.forEach((log, index) => {
                     result.push({
                         type: 'log',
-                        id: log.id,
+                        id: `log-${log.id}`,
                         log,
                         isLast: index === displayLogs.length - 1,
                         color: g.color,
@@ -1949,4 +1963,5 @@ export { AppFonts, setAppFonts, } from './styles/AppFonts';
 export { AppColors, setAppColors, getThemeColors, updateAppColorsTheme, } from './styles/AppColors';
 export { t, i18n, useTranslation, setLanguage, addTranslations, setTranslations, I18nextProvider, } from './i18n';
 export { fetchRemoteConfigModuleStatus, isFirebaseRemoteConfigAvailable, } from './helpers/remoteConfig';
+export { ScreenCapture, ScreenRecorder, } from './capture';
 export { LIB_VERSION } from './constants/version';

package/dist/esm/native/NativeInspector.d.ts

@@ -74,3 +74,63 @@ export interface NativeCachedPageResult<T = any> {
     items: T[];
 }
 export declare const fetchNativeCachedPage: <T = any>(pageKey: "apis" | "logs" | "analytics" | "crash", offset?: number, limit?: number, query?: string) => Promise<NativeCachedPageResult<T> | null>;
+export interface ScreenshotOptions {
+    format?: 'png' | 'jpeg' | 'webp';
+    quality?: number;
+    scale?: number;
+    hideInspector?: boolean;
+    includeBase64?: boolean;
+}
+export interface ScreenshotResult {
+    uri: string;
+    format: 'png' | 'jpeg' | 'webp';
+    width: number;
+    height: number;
+    sizeBytes: number;
+    timestamp: number;
+    base64?: string;
+}
+export interface RecordingOptions {
+    format?: 'mp4' | 'gif';
+    audioSource?: 'none' | 'app' | 'mic' | 'mixed';
+    fps?: number;
+    bitrate?: number;
+    maxDurationSeconds?: number;
+    hideInspector?: boolean;
+}
+export interface RecordingResult {
+    uri: string;
+    format: 'mp4' | 'gif';
+    durationMs: number;
+    hasAudio: boolean;
+    width: number;
+    height: number;
+    sizeBytes: number;
+    timestamp: number;
+}
+export interface GifConversionOptions {
+    fps?: number;
+    width?: number;
+    maxDurationSeconds?: number;
+}
+export interface CapturedMediaItem {
+    id: string;
+    type: 'image' | 'video' | 'gif';
+    format: string;
+    uri: string;
+    filename: string;
+    sizeBytes: number;
+    timestamp: number;
+    durationMs?: number;
+    hasAudio?: boolean;
+    width?: number;
+    height?: number;
+}
+export declare const takeNativeScreenshot: (options?: ScreenshotOptions) => Promise<ScreenshotResult | null>;
+export declare const startNativeVideoRecording: (options?: RecordingOptions) => Promise<boolean>;
+export declare const stopNativeVideoRecording: () => Promise<RecordingResult | null>;
+export declare const isNativeRecordingActive: () => Promise<boolean>;
+export declare const convertNativeVideoToGif: (videoUri: string, options?: GifConversionOptions) => Promise<RecordingResult | null>;
+export declare const fetchCapturedMediaList: () => Promise<CapturedMediaItem[]>;
+export declare const deleteCapturedMediaFile: (uri: string) => Promise<boolean>;
+export declare const clearAllCapturedMediaFiles: () => Promise<boolean>;

package/dist/esm/native/NativeInspector.js

@@ -32,7 +32,7 @@ export const enableNativeCrashProtection = async (options) => {
     }
     try {
         const result = await NativeModule.enableNativeCrashProtection();
-        if (options?.showFloatingButton !== false) {
+        if (options?.showFloatingButton === true) {
             await showNativeFloatingButton();
         }
         return !!result;
@@ -269,3 +269,102 @@ export const fetchNativeCachedPage = async (pageKey, offset = 0, limit = 50, que
         return null;
     }
 };
+export const takeNativeScreenshot = async (options) => {
+    if (!NativeModule || !NativeModule.takeScreenshot) {
+        return null;
+    }
+    try {
+        const result = await NativeModule.takeScreenshot(options || {});
+        return result;
+    }
+    catch {
+        return null;
+    }
+};
+export const startNativeVideoRecording = async (options) => {
+    if (!NativeModule || !NativeModule.startVideoRecording) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.startVideoRecording(options || {});
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};
+export const stopNativeVideoRecording = async () => {
+    if (!NativeModule || !NativeModule.stopVideoRecording) {
+        return null;
+    }
+    try {
+        const result = await NativeModule.stopVideoRecording();
+        return result;
+    }
+    catch {
+        return null;
+    }
+};
+export const isNativeRecordingActive = async () => {
+    if (!NativeModule || !NativeModule.isRecording) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.isRecording();
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};
+export const convertNativeVideoToGif = async (videoUri, options) => {
+    if (!NativeModule || !NativeModule.convertToGif) {
+        return null;
+    }
+    try {
+        const result = await NativeModule.convertToGif(videoUri, options || {});
+        return result;
+    }
+    catch {
+        return null;
+    }
+};
+export const fetchCapturedMediaList = async () => {
+    if (!NativeModule || !NativeModule.getCapturedMedia) {
+        return [];
+    }
+    try {
+        const jsonStr = await NativeModule.getCapturedMedia();
+        if (!jsonStr)
+            return [];
+        const parsed = JSON.parse(jsonStr);
+        return Array.isArray(parsed) ? parsed : [];
+    }
+    catch {
+        return [];
+    }
+};
+export const deleteCapturedMediaFile = async (uri) => {
+    if (!NativeModule || !NativeModule.deleteCapturedMedia) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.deleteCapturedMedia(uri);
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};
+export const clearAllCapturedMediaFiles = async () => {
+    if (!NativeModule || !NativeModule.clearAllCapturedMedia) {
+        return false;
+    }
+    try {
+        const result = await NativeModule.clearAllCapturedMedia();
+        return !!result;
+    }
+    catch {
+        return false;
+    }
+};

package/dist/esm/native/NativeNetworkInspector.d.ts

@@ -15,6 +15,14 @@ export interface Spec extends TurboModule {
     getNativeSystemMetrics(): Promise<Object>;
     pushNativeLogRecord(pageKey: string, jsonPayload: string): Promise<boolean>;
     checkFloatingButtonPress(): Promise<boolean>;
+    takeScreenshot(options: Object): Promise<Object>;
+    startVideoRecording(options: Object): Promise<boolean>;
+    stopVideoRecording(): Promise<Object>;
+    isRecording(): Promise<boolean>;
+    convertToGif(videoUri: string, options: Object): Promise<Object>;
+    getCapturedMedia(): Promise<string>;
+    deleteCapturedMedia(uri: string): Promise<boolean>;
+    clearAllCapturedMedia(): Promise<boolean>;
     addListener(eventName: string): void;
     removeListeners(count: number): void;
 }

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

@@ -168,6 +168,24 @@ declare const LightColors: {
     skySoftBg: string;
     skySoftBorder: string;
     skySoftText: string;
+    warningAmber: string;
+    npmRedLight: string;
+    red300: string;
+    overlayDark: string;
+    headerGlassDark: string;
+    badgeGlassDark: string;
+    borderGlassLight: string;
+    borderGlassMedium: string;
+    whiteAlpha06: string;
+    whiteAlpha08: string;
+    whiteAlpha10: string;
+    whiteAlpha12: string;
+    whiteAlpha15: string;
+    whiteAlpha20: string;
+    whiteAlpha24: string;
+    whiteAlpha30: string;
+    whiteAlpha33: string;
+    whiteAlpha60: string;
     domainColors: string[];
 };
 export declare const getThemeColors: (isDark: boolean) => {
@@ -340,6 +358,24 @@ export declare const getThemeColors: (isDark: boolean) => {
     skySoftBg: string;
     skySoftBorder: string;
     skySoftText: string;
+    warningAmber: string;
+    npmRedLight: string;
+    red300: string;
+    overlayDark: string;
+    headerGlassDark: string;
+    badgeGlassDark: string;
+    borderGlassLight: string;
+    borderGlassMedium: string;
+    whiteAlpha06: string;
+    whiteAlpha08: string;
+    whiteAlpha10: string;
+    whiteAlpha12: string;
+    whiteAlpha15: string;
+    whiteAlpha20: string;
+    whiteAlpha24: string;
+    whiteAlpha30: string;
+    whiteAlpha33: string;
+    whiteAlpha60: string;
     domainColors: string[];
 };
 export declare const AppColors: typeof LightColors;

package/dist/esm/styles/AppColors.js

@@ -168,6 +168,24 @@ const LightColors = {
     skySoftBg: '#E0F2FE',
     skySoftBorder: '#BAE6FD',
     skySoftText: '#0284C7',
+    warningAmber: '#F59E0B',
+    npmRedLight: '#FF6B6B',
+    red300: '#FCA5A5',
+    overlayDark: 'rgba(8, 12, 22, 0.95)',
+    headerGlassDark: 'rgba(15, 23, 42, 0.9)',
+    badgeGlassDark: 'rgba(15, 23, 42, 0.85)',
+    borderGlassLight: 'rgba(255, 255, 255, 0.08)',
+    borderGlassMedium: 'rgba(255, 255, 255, 0.15)',
+    whiteAlpha06: 'rgba(255, 255, 255, 0.06)',
+    whiteAlpha08: 'rgba(255, 255, 255, 0.08)',
+    whiteAlpha10: 'rgba(255, 255, 255, 0.1)',
+    whiteAlpha12: 'rgba(255, 255, 255, 0.12)',
+    whiteAlpha15: 'rgba(255, 255, 255, 0.15)',
+    whiteAlpha20: 'rgba(255, 255, 255, 0.2)',
+    whiteAlpha24: 'rgba(255, 255, 255, 0.24)',
+    whiteAlpha30: 'rgba(255, 255, 255, 0.3)',
+    whiteAlpha33: 'rgba(255, 255, 255, 0.33)',
+    whiteAlpha60: 'rgba(255, 255, 255, 0.6)',
     domainColors: [
         '#5C2D91',
         '#9B2677',
@@ -257,6 +275,24 @@ const DarkColors = {
     skySoftBg: '#082F4966',
     skySoftBorder: '#0284C788',
     skySoftText: '#38BDF8',
+    warningAmber: '#F59E0B',
+    npmRedLight: '#FF6B6B',
+    red300: '#FCA5A5',
+    overlayDark: 'rgba(8, 12, 22, 0.95)',
+    headerGlassDark: 'rgba(15, 23, 42, 0.9)',
+    badgeGlassDark: 'rgba(15, 23, 42, 0.85)',
+    borderGlassLight: 'rgba(255, 255, 255, 0.08)',
+    borderGlassMedium: 'rgba(255, 255, 255, 0.15)',
+    whiteAlpha06: 'rgba(255, 255, 255, 0.06)',
+    whiteAlpha08: 'rgba(255, 255, 255, 0.08)',
+    whiteAlpha10: 'rgba(255, 255, 255, 0.1)',
+    whiteAlpha12: 'rgba(255, 255, 255, 0.12)',
+    whiteAlpha15: 'rgba(255, 255, 255, 0.15)',
+    whiteAlpha20: 'rgba(255, 255, 255, 0.2)',
+    whiteAlpha24: 'rgba(255, 255, 255, 0.24)',
+    whiteAlpha30: 'rgba(255, 255, 255, 0.3)',
+    whiteAlpha33: 'rgba(255, 255, 255, 0.33)',
+    whiteAlpha60: 'rgba(255, 255, 255, 0.6)',
     green600: '#16A34A',
     green700: '#15803D',
     green800: '#166534',