react-native-inapp-inspector 2.0.6 → 2.0.7

package/dist/commonjs/components/Inspector/FirstTimeWalkthroughModal.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface FirstTimeWalkthroughModalProps {
+    visible: boolean;
+    onClose: () => void;
+}
+export declare const FirstTimeWalkthroughModal: React.FC<FirstTimeWalkthroughModalProps>;
+export default FirstTimeWalkthroughModal;

package/dist/commonjs/components/Inspector/FirstTimeWalkthroughModal.js

@@ -0,0 +1,600 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FirstTimeWalkthroughModal = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const AppFonts_1 = require("../../styles/AppFonts");
+const settingsStore_1 = require("../../helpers/settingsStore");
+const NetworkIcons_1 = require("../NetworkIcons");
+// ─── SVG Icons for Walkthrough Steps ──────────────────────────────────────────
+const ModulesIconSvg = ({ size = 18, color = '#818CF8', }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Rect x="3" y="3" width="7.5" height="7.5" rx="2" fill="rgba(129, 140, 248, 0.2)" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Rect x="13.5" y="3" width="7.5" height="7.5" rx="2" fill="rgba(129, 140, 248, 0.2)" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Rect x="3" y="13.5" width="7.5" height="7.5" rx="2" fill="rgba(129, 140, 248, 0.2)" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Rect x="13.5" y="13.5" width="7.5" height="7.5" rx="2" fill="rgba(129, 140, 248, 0.2)" stroke={color} strokeWidth="2"/>
+  </react_native_svg_1.default>);
+const SettingsGearIconSvg = ({ size = 18, color = '#818CF8', }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Circle cx="12" cy="12" r="3" stroke={color} strokeWidth="2" fill="rgba(129, 140, 248, 0.2)"/>
+    <react_native_svg_1.Path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const DetailWorkbenchIconSvg = ({ size = 18, color = '#818CF8', }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M16 18l6-6-6-6M8 6l-6 6 6 6" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const NetworkGlobeIconSvg = ({ size = 18, color = '#818CF8', }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Circle cx="12" cy="12" r="9.5" stroke={color} strokeWidth="2" fill="rgba(129, 140, 248, 0.15)"/>
+    <react_native_svg_1.Path d="M2.5 12h19M12 2.5a14.5 14.5 0 013.8 9.5 14.5 14.5 0 01-3.8 9.5 14.5 14.5 0 01-3.8-9.5 14.5 14.5 0 013.8-9.5z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const SearchFiltersIconSvg = ({ size = 18, color = '#818CF8', }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Circle cx="11" cy="11" r="7.5" stroke={color} strokeWidth="2" fill="rgba(129, 140, 248, 0.15)"/>
+    <react_native_svg_1.Path d="M20.5 20.5l-4.2-4.2" stroke={color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const SkipIconSvg = ({ size = 12, color = '#CBD5E1', }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M5 4l10 8-10 8V4zM19 5v14" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const NextArrowSvg = ({ size = 12, color = '#FFFFFF', }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M5 12h14M12 5l7 7-7 7" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const BackArrowSvg = ({ size = 12, color = '#E0E7FF', }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M19 12H5M12 19l-7-7 7-7" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+const PointerTopSvg = ({ align, offset = 24 }) => {
+    const containerStyle = [
+        styles.pointerSvgTop,
+        align === 'left' && { left: offset },
+        align === 'center' && { alignSelf: 'center' },
+        align === 'right' && { right: offset },
+    ];
+    return (<react_native_1.View style={containerStyle} pointerEvents="none">
+      <react_native_svg_1.default width={20} height={10} viewBox="0 0 20 10">
+        <react_native_svg_1.Path d="M0 10 L10 1 L20 10" fill="#13182C" stroke="rgba(129, 140, 248, 0.5)" strokeWidth="1.2"/>
+        <react_native_svg_1.Path d="M1 10 L19 10" stroke="#13182C" strokeWidth="2.5"/>
+      </react_native_svg_1.default>
+    </react_native_1.View>);
+};
+const PointerBottomSvg = ({ align, offset = 24 }) => {
+    const containerStyle = [
+        styles.pointerSvgBottom,
+        align === 'left' && { left: offset },
+        align === 'center' && { alignSelf: 'center' },
+        align === 'right' && { right: offset },
+    ];
+    return (<react_native_1.View style={containerStyle} pointerEvents="none">
+      <react_native_svg_1.default width={20} height={10} viewBox="0 0 20 10">
+        <react_native_svg_1.Path d="M0 0 L10 9 L20 0" fill="#13182C" stroke="rgba(129, 140, 248, 0.5)" strokeWidth="1.2"/>
+        <react_native_svg_1.Path d="M1 0 L19 0" stroke="#13182C" strokeWidth="2.5"/>
+      </react_native_svg_1.default>
+    </react_native_1.View>);
+};
+const TOOLTIP_STEPS = [
+    {
+        id: 'developer-modules',
+        stepNumber: 1,
+        totalSteps: 5,
+        badge: '1/5 • DEVELOPER MODULES',
+        iconComponent: <ModulesIconSvg size={18} color="#A5B4FC"/>,
+        title: '10+ Developer Tool Modules',
+        description: 'Switch seamlessly across Network APIs, Console Logs, Analytics event streams, Redux state trees, AsyncStorage/MMKV viewer, Device hardware/OS specs, and Performance audits.',
+        pointerPosition: 'top',
+        pointerAlign: 'left',
+        pointerOffset: 36,
+        cardTop: 108,
+        highlightBox: {
+            top: 54,
+            left: 8,
+            right: 8,
+            height: 46,
+            borderRadius: 10,
+        },
+    },
+    {
+        id: 'settings-hud',
+        stepNumber: 2,
+        totalSteps: 5,
+        badge: '2/5 • SETTINGS & CONTROLS',
+        iconComponent: <SettingsGearIconSvg size={18} color="#A5B4FC"/>,
+        title: 'Settings, RAM Limits & Live HUD',
+        description: 'Configure RAM-based auto limits to prevent memory bloat, customize tab ordering, toggle Dark/Light theme, and enable the live 60 FPS floating HUD overlay for on-screen performance monitoring.',
+        pointerPosition: 'top',
+        pointerAlign: 'right',
+        pointerOffset: 58,
+        cardTop: 56,
+        highlightBox: {
+            top: 8,
+            right: 52,
+            width: 38,
+            height: 38,
+            borderRadius: 10,
+        },
+    },
+    {
+        id: 'request-replay',
+        stepNumber: 3,
+        totalSteps: 5,
+        badge: '3/5 • DETAIL INSPECTOR & WORKBENCH',
+        iconComponent: <DetailWorkbenchIconSvg size={18} color="#A5B4FC"/>,
+        title: 'Deep Detail Pages & Replay Sandbox',
+        description: 'Tap any item to inspect syntax-highlighted JSON trees, payload diffs, full headers, and stack traces. Tap the Replay icon to launch the isolated Edit & Resend workbench.',
+        pointerPosition: 'top',
+        pointerAlign: 'center',
+        cardTop: 272,
+        highlightBox: {
+            top: 176,
+            left: 10,
+            right: 10,
+            height: 88,
+            borderRadius: 12,
+        },
+    },
+    {
+        id: 'network-apis',
+        stepNumber: 4,
+        totalSteps: 5,
+        badge: '4/5 • NETWORK TELEMETRY',
+        iconComponent: <NetworkGlobeIconSvg size={18} color="#A5B4FC"/>,
+        title: 'Real-Time Network Telemetry',
+        description: 'Zero-config auto-interception for Fetch, Axios, and XHR. Inspect round-trip latency, status codes, query params, headers, and colorized JSON response trees with instant cURL export.',
+        pointerPosition: 'top',
+        pointerAlign: 'left',
+        pointerOffset: 46,
+        cardTop: 106,
+        highlightBox: {
+            top: 57,
+            left: 12,
+            width: 92,
+            height: 38,
+            borderRadius: 10,
+        },
+    },
+    {
+        id: 'search-filters',
+        stepNumber: 5,
+        totalSteps: 5,
+        badge: '5/5 • SEARCH & SMART FILTERS',
+        iconComponent: <SearchFiltersIconSvg size={18} color="#A5B4FC"/>,
+        title: 'Instant Search & Status Filters',
+        description: 'Filter network traffic and logs instantly by status (2xx OK, Errors, Slow >500ms), regex expressions, or deep content matching across URLs, headers, and JSON keys.',
+        pointerPosition: 'top',
+        pointerAlign: 'center',
+        cardTop: 182,
+        highlightBox: {
+            top: 102,
+            left: 10,
+            right: 10,
+            height: 72,
+            borderRadius: 12,
+        },
+    },
+];
+const FirstTimeWalkthroughModal = ({ visible, onClose }) => {
+    const [currentStepIndex, setCurrentStepIndex] = (0, react_1.useState)(0);
+    const [dontShowAgain, setDontShowAgain] = (0, react_1.useState)(true);
+    react_1.default.useEffect(() => {
+        if (visible) {
+            setCurrentStepIndex(0);
+        }
+    }, [visible]);
+    if (!visible)
+        return null;
+    const currentStep = TOOLTIP_STEPS[currentStepIndex];
+    const isLastStep = currentStepIndex === TOOLTIP_STEPS.length - 1;
+    const handleFinish = async () => {
+        if (dontShowAgain) {
+            try {
+                await (0, settingsStore_1.saveSettings)({ hasCompletedWalkthrough: true });
+            }
+            catch {
+                // Safe fallback
+            }
+        }
+        onClose();
+    };
+    const handleNext = () => {
+        if (isLastStep) {
+            handleFinish();
+        }
+        else {
+            setCurrentStepIndex(prev => prev + 1);
+        }
+    };
+    const handlePrevious = () => {
+        if (currentStepIndex > 0) {
+            setCurrentStepIndex(prev => prev - 1);
+        }
+    };
+    return (<react_native_1.View style={styles.backdrop} pointerEvents="box-none">
+      {/* Semi-transparent Dimming Layer */}
+      <react_native_1.Pressable style={styles.scrim} onPress={handleFinish}/>
+
+      {/* Spotlight Halo Box around targeted UI element */}
+      {currentStep.highlightBox && (<react_native_1.View style={[
+                styles.spotlightRing,
+                {
+                    top: currentStep.highlightBox.top,
+                    bottom: currentStep.highlightBox.bottom,
+                    left: currentStep.highlightBox.left,
+                    right: currentStep.highlightBox.right,
+                    width: currentStep.highlightBox.width,
+                    height: currentStep.highlightBox.height,
+                    borderRadius: currentStep.highlightBox.borderRadius || 12,
+                },
+            ]} pointerEvents="none"/>)}
+
+      {/* Contextual Tooltip Balloon Card */}
+      <react_native_1.View style={[
+            styles.tooltipCard,
+            currentStep.cardTop != null && { top: currentStep.cardTop },
+            currentStep.cardBottom != null && { bottom: currentStep.cardBottom },
+        ]}>
+        {/* Seamless SVG Pointer Beak (Pointing Up towards target) */}
+        {currentStep.pointerPosition === 'top' && (<PointerTopSvg align={currentStep.pointerAlign} offset={currentStep.pointerOffset}/>)}
+
+        {/* ─── 1. TOP HEADER & CONTROLS ─── */}
+        <react_native_1.View style={styles.cardHeader}>
+          <react_native_1.View style={styles.badgePill}>
+            <react_native_1.View style={styles.badgeDot}/>
+            <react_native_1.Text style={styles.badgeText}>{currentStep.badge}</react_native_1.Text>
+          </react_native_1.View>
+
+          <react_native_1.View style={styles.topActions}>
+            <TouchableScale_1.default style={styles.skipHeaderBtn} onPress={handleFinish} hitSlop={8}>
+              <SkipIconSvg size={11} color="#CBD5E1"/>
+              <react_native_1.Text style={styles.skipHeaderText}>Skip Tour</react_native_1.Text>
+            </TouchableScale_1.default>
+
+            <TouchableScale_1.default style={styles.closeBtn} onPress={handleFinish} hitSlop={10}>
+              <NetworkIcons_1.CloseWhite size={11} color="#CBD5E1"/>
+            </TouchableScale_1.default>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        {/* ─── 2. TITLE & DESCRIPTION ─── */}
+        <react_native_1.View style={styles.contentSection}>
+          <react_native_1.View style={styles.titleRow}>
+            <react_native_1.View style={styles.iconContainer}>
+              {currentStep.iconComponent}
+            </react_native_1.View>
+            <react_native_1.Text style={styles.titleText} numberOfLines={1}>
+              {currentStep.title}
+            </react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.Text style={styles.descriptionText}>{currentStep.description}</react_native_1.Text>
+        </react_native_1.View>
+
+        {/* ─── 3. FOOTER (DOTS & NAVIGATION ACTIONS) ─── */}
+        <react_native_1.View style={styles.footerRow}>
+          {/* Progress Dots Indicator */}
+          <react_native_1.View style={styles.dotsContainer}>
+            {TOOLTIP_STEPS.map((s, idx) => (<react_native_1.Pressable key={s.id} onPress={() => setCurrentStepIndex(idx)} hitSlop={6}>
+                <react_native_1.View style={[
+                styles.dot,
+                currentStepIndex === idx && styles.dotActive,
+            ]}/>
+              </react_native_1.Pressable>))}
+          </react_native_1.View>
+
+          {/* Action Buttons */}
+          <react_native_1.View style={styles.btnGroup}>
+            {currentStepIndex > 0 && (<TouchableScale_1.default style={styles.backBtn} onPress={handlePrevious} hitSlop={6}>
+                <BackArrowSvg size={11} color="#E0E7FF"/>
+                <react_native_1.Text style={styles.backBtnText}>Back</react_native_1.Text>
+              </TouchableScale_1.default>)}
+
+            <TouchableScale_1.default style={[
+            styles.nextBtn,
+            isLastStep && styles.nextBtnFinal,
+        ]} onPress={handleNext} hitSlop={6}>
+              <react_native_1.Text style={styles.nextBtnText}>
+                {isLastStep ? 'Got It 🚀' : 'Next'}
+              </react_native_1.Text>
+              {!isLastStep && <NextArrowSvg size={11} color="#FFFFFF"/>}
+            </TouchableScale_1.default>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        {/* Don't show again toggle */}
+        <TouchableScale_1.default style={styles.dontShowRow} onPress={() => setDontShowAgain(prev => !prev)} hitSlop={6}>
+          <react_native_1.View style={[
+            styles.checkbox,
+            dontShowAgain && styles.checkboxActive,
+        ]}>
+            {dontShowAgain && <NetworkIcons_1.CheckIcon size={9} color="#FFFFFF"/>}
+          </react_native_1.View>
+          <react_native_1.Text style={styles.dontShowText}>
+            Don't show tour on startup
+          </react_native_1.Text>
+        </TouchableScale_1.default>
+
+        {/* Seamless SVG Pointer Beak (Pointing Down towards target) */}
+        {currentStep.pointerPosition === 'bottom' && (<PointerBottomSvg align={currentStep.pointerAlign} offset={currentStep.pointerOffset}/>)}
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.FirstTimeWalkthroughModal = FirstTimeWalkthroughModal;
+const styles = react_native_1.StyleSheet.create({
+    backdrop: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: 999999,
+        elevation: 999999,
+    },
+    scrim: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.72)',
+    },
+    spotlightRing: {
+        position: 'absolute',
+        borderWidth: 2,
+        borderColor: '#818CF8', // Electric neon violet/indigo
+        backgroundColor: 'rgba(99, 102, 241, 0.18)',
+        shadowColor: '#818CF8',
+        shadowOpacity: 0.9,
+        shadowRadius: 12,
+        shadowOffset: { width: 0, height: 0 },
+        zIndex: 1000000,
+        elevation: 1000000,
+    },
+    tooltipCard: {
+        position: 'absolute',
+        left: 12,
+        right: 12,
+        backgroundColor: '#13182C', // Luxurious Deep Space Navy Indigo
+        borderRadius: 16,
+        paddingHorizontal: 16,
+        paddingTop: 14,
+        paddingBottom: 13,
+        shadowColor: '#000000',
+        shadowOpacity: 0.6,
+        shadowRadius: 20,
+        shadowOffset: { width: 0, height: 10 },
+        elevation: 24,
+        zIndex: 1000001,
+        borderWidth: 1.2,
+        borderColor: 'rgba(129, 140, 248, 0.45)', // Neon Indigo glowing border
+    },
+    pointerSvgTop: {
+        position: 'absolute',
+        top: -9,
+        zIndex: 1000002,
+    },
+    pointerSvgBottom: {
+        position: 'absolute',
+        bottom: -9,
+        zIndex: 1000002,
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 10,
+    },
+    badgePill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        backgroundColor: 'rgba(99, 102, 241, 0.22)',
+        paddingHorizontal: 9,
+        paddingVertical: 3.5,
+        borderRadius: 7,
+        borderWidth: 0.8,
+        borderColor: 'rgba(165, 180, 252, 0.35)',
+    },
+    badgeDot: {
+        width: 5,
+        height: 5,
+        borderRadius: 2.5,
+        backgroundColor: '#818CF8',
+    },
+    badgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: '#E0E7FF',
+        letterSpacing: 0.6,
+    },
+    topActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+    },
+    skipHeaderBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+        paddingHorizontal: 8,
+        paddingVertical: 3.5,
+        borderRadius: 6,
+        borderWidth: 0.8,
+        borderColor: 'rgba(255, 255, 255, 0.14)',
+    },
+    skipHeaderIcon: {
+        fontSize: 9.5,
+    },
+    skipHeaderText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: '#CBD5E1',
+    },
+    closeBtn: {
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 0.8,
+        borderColor: 'rgba(255, 255, 255, 0.14)',
+    },
+    contentSection: {
+        marginBottom: 12,
+    },
+    titleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        marginBottom: 6,
+    },
+    iconContainer: {
+        width: 28,
+        height: 28,
+        borderRadius: 7,
+        backgroundColor: 'rgba(99, 102, 241, 0.28)',
+        borderWidth: 0.8,
+        borderColor: 'rgba(165, 180, 252, 0.25)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    titleEmoji: {
+        fontSize: 15,
+    },
+    titleText: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 15,
+        color: '#FFFFFF',
+        letterSpacing: -0.2,
+    },
+    descriptionText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 12.5,
+        color: '#CBD5E1', // Clean slate-300
+        lineHeight: 18.5,
+    },
+    footerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingTop: 10,
+        borderTopWidth: 1,
+        borderTopColor: 'rgba(255, 255, 255, 0.12)',
+        marginBottom: 10,
+    },
+    dotsContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+    },
+    dot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    },
+    dotActive: {
+        width: 18,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: '#818CF8', // Neon active pill
+    },
+    btnGroup: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    backBtn: {
+        paddingHorizontal: 11,
+        paddingVertical: 7,
+        borderRadius: 8,
+        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+        borderWidth: 0.8,
+        borderColor: 'rgba(255, 255, 255, 0.14)',
+    },
+    backBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: '#E0E7FF',
+    },
+    nextBtn: {
+        backgroundColor: '#6366F1', // Royal Indigo
+        paddingHorizontal: 16,
+        paddingVertical: 7.5,
+        borderRadius: 8,
+        shadowColor: '#6366F1',
+        shadowOpacity: 0.45,
+        shadowRadius: 6,
+        shadowOffset: { width: 0, height: 2 },
+    },
+    nextBtnFinal: {
+        backgroundColor: '#10B981', // Emerald green
+        shadowColor: '#10B981',
+    },
+    nextBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: '#FFFFFF',
+    },
+    dontShowRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        alignSelf: 'flex-start',
+    },
+    checkbox: {
+        width: 14,
+        height: 14,
+        borderRadius: 3.5,
+        borderWidth: 1.2,
+        borderColor: 'rgba(165, 180, 252, 0.5)',
+        backgroundColor: 'transparent',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    checkboxActive: {
+        backgroundColor: '#6366F1',
+        borderColor: '#6366F1',
+    },
+    dontShowText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10.5,
+        color: '#94A3B8',
+    },
+});
+exports.default = exports.FirstTimeWalkthroughModal;

package/dist/commonjs/components/Inspector/MainScreen.js

@@ -60,6 +60,7 @@ const DeviceTab_1 = __importDefault(require("./DeviceTab"));
 const AuditTab_1 = __importDefault(require("./AuditTab"));
 const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
 const TelemetryConsentModal_1 = __importDefault(require("./TelemetryConsentModal"));
+const FirstTimeWalkthroughModal_1 = __importDefault(require("./FirstTimeWalkthroughModal"));
 const NpmUpdateToast_1 = __importDefault(require("./NpmUpdateToast"));
 const Toast_1 = __importDefault(require("../Toast"));
 const styles_1 = __importDefault(require("../../styles"));
@@ -67,7 +68,7 @@ const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
 const PerformanceHud_1 = __importDefault(require("./PerformanceHud"));
 const MainScreen = () => {
-    const { visible, setVisible, switchActiveTab, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, isPerformanceHudEnabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
+    const { visible, setVisible, switchActiveTab, modalAnimationType, closeModal, modalHeightPercent, isWalkthroughVisible, setIsWalkthroughVisible, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, isPerformanceHudEnabled, useNativeFab, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
@@ -223,6 +224,9 @@ const MainScreen = () => {
 
               {/* NPM Version Update Toast with timeout progress bar */}
               <NpmUpdateToast_1.default />
+
+              {/* First-Time Walkthrough & Quick Guide Modal */}
+              <FirstTimeWalkthroughModal_1.default visible={isWalkthroughVisible} onClose={() => setIsWalkthroughVisible(false)}/>
             </react_native_1.View>
           </react_native_1.View>
         </ErrorBoundary_1.default>)}