react-native-inapp-inspector 2.3.19 → 2.3.21

package/dist/commonjs/components/HeadersSection.js

@@ -1,133 +1,54 @@
-"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 });
-const react_1 = __importStar(require("react"));
-const i18n_1 = require("../i18n");
-const react_native_1 = require("react-native");
-const CopyButton_1 = __importDefault(require("./CopyButton"));
-const TouchableScale_1 = __importDefault(require("./TouchableScale"));
-const helpers_1 = require("../helpers");
-const useAccordion_1 = __importDefault(require("../customHooks/useAccordion"));
-const NetworkIcons_1 = require("./NetworkIcons");
-const AppColors_1 = require("../styles/AppColors");
-const styles_1 = __importDefault(require("../styles"));
-const HeaderRow = react_1.default.memo(function HeaderRow({ headerKey, value, isLast, index, }) {
-    const [expanded, setExpanded] = (0, react_1.useState)(false);
-    const isLong = value.length > 35;
-    return (<react_native_1.View style={[styles_1.default.htRow, !isLast && styles_1.default.htRowBorder]}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,e,r,n){n===void 0&&(n=r);var o=Object.getOwnPropertyDescriptor(e,r);(!o||("get"in o?!e.__esModule:o.writable||o.configurable))&&(o={enumerable:!0,get:function(){return e[r]}}),Object.defineProperty(t,n,o)}):(function(t,e,r,n){n===void 0&&(n=r),t[n]=e[r]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}):function(t,e){t.default=e}),__importStar=this&&this.__importStar||(function(){var t=function(e){return t=Object.getOwnPropertyNames||function(r){var n=[];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(n[n.length]=o);return n},t(e)};return function(e){if(e&&e.__esModule)return e;var r={};if(e!=null)for(var n=t(e),o=0;o<n.length;o++)n[o]!=="default"&&__createBinding(r,e,n[o]);return __setModuleDefault(r,e),r}})(),__importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),i18n_1=require("../i18n"),react_native_1=require("react-native"),CopyButton_1=__importDefault(require("./CopyButton")),TouchableScale_1=__importDefault(require("./TouchableScale")),helpers_1=require("../helpers"),useAccordion_1=__importDefault(require("../customHooks/useAccordion")),NetworkIcons_1=require("./NetworkIcons"),AppColors_1=require("../styles/AppColors"),styles_1=__importDefault(require("../styles")),HeaderRow=react_1.default.memo(function({headerKey:e,value:r,isLast:n,index:o}){const[a,f]=(0,react_1.useState)(!1),s=r.length>35;return<react_native_1.View style={[styles_1.default.htRow,!n&&styles_1.default.htRowBorder]}>
       <react_native_1.View style={styles_1.default.htKeyCell}>
-        <react_native_1.Text style={styles_1.default.htKey} numberOfLines={2}>
-          {headerKey}
+        <react_native_1.Text style={styles_1.default.htKey}numberOfLines={2}>
+          {e}
         </react_native_1.Text>
       </react_native_1.View>
       <react_native_1.View style={styles_1.default.htCellDivider}/>
-      <react_native_1.Pressable style={styles_1.default.htValueCell} onPress={() => isLong && setExpanded(v => !v)} hitSlop={8}>
-        <react_native_1.Text style={styles_1.default.htValue} selectable numberOfLines={expanded ? undefined : 3}>
-          {value}
+      <react_native_1.Pressable style={styles_1.default.htValueCell}onPress={()=>s&&f(_=>!_)}hitSlop={8}>
+        <react_native_1.Text style={styles_1.default.htValue}selectable numberOfLines={a?void 0:3}>
+          {r}
         </react_native_1.Text>
-        {isLong && (<react_native_1.View style={[styles_1.default.htExpandRow, { flexDirection: 'row', alignItems: 'center', gap: 4 }]}>
+        {s&&<react_native_1.View style={[styles_1.default.htExpandRow,{flexDirection:"row",alignItems:"center",gap:4}]}>
             <react_native_1.Text style={styles_1.default.htExpandText}>
-              {expanded ? 'less' : 'more'}
+              {a?"less":"more"}
             </react_native_1.Text>
-            <NetworkIcons_1.ChevronIcon direction={expanded ? 'up' : 'down'} color={AppColors_1.AppColors.purple} size={10}/>
-          </react_native_1.View>)}
+            <NetworkIcons_1.ChevronIcon direction={a?"up":"down"}color={AppColors_1.AppColors.purple}size={10}/>
+          </react_native_1.View>}
       </react_native_1.Pressable>
-      <TouchableScale_1.default onPress={() => (0, helpers_1.copyToClipboard)(value, headerKey)} hitSlop={8} style={styles_1.default.htCopyBtn}>
-        <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+      <TouchableScale_1.default onPress={()=>(0,helpers_1.copyToClipboard)(r,e)}hitSlop={8}style={styles_1.default.htCopyBtn}>
+        <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.grayTextWeak}size={14}/>
       </TouchableScale_1.default>
-    </react_native_1.View>);
-});
-const HeadersSection = ({ title, headers, search, resetKey, }) => {
-    const { t } = (0, i18n_1.useTranslation)();
-    const { isOpen, toggleOpen, forceOpen, chevronStyle } = (0, useAccordion_1.default)(false);
-    (0, react_1.useEffect)(() => {
-        forceOpen(false);
-    }, [resetKey]);
-    const entries = (0, react_1.useMemo)(() => (headers ? Object.entries(headers) : []), [headers]);
-    const filtered = (0, react_1.useMemo)(() => {
-        if (!search)
-            return entries;
-        const q = search.toLowerCase();
-        return entries.filter(([k, v]) => k.toLowerCase().includes(q) || v.toLowerCase().includes(q));
-    }, [entries, search]);
-    if (entries.length === 0)
-        return null;
-    const isRequest = title.toLowerCase().includes('request') ||
-        title.toLowerCase().includes('api');
-    const accentColor = isRequest ? AppColors_1.AppColors.offerPurple : AppColors_1.AppColors.greenColor;
-    const accentBg = isRequest
-        ? `${AppColors_1.AppColors.offerPurple}10`
-        : `${AppColors_1.AppColors.greenColor}10`;
-    return (<react_native_1.View style={[styles_1.default.htCard, { borderLeftColor: accentColor }]}>
-      <react_native_1.Pressable onPress={toggleOpen} hitSlop={10}>
+    </react_native_1.View>}),HeadersSection=({title:t,headers:e,search:r,resetKey:n})=>{const{t:o}=(0,i18n_1.useTranslation)(),{isOpen:a,toggleOpen:f,forceOpen:s,chevronStyle:_}=(0,useAccordion_1.default)(!1);(0,react_1.useEffect)(()=>{s(!1)},[n]);const l=(0,react_1.useMemo)(()=>e?Object.entries(e):[],[e]),d=(0,react_1.useMemo)(()=>{if(!r)return l;const i=r.toLowerCase();return l.filter(([p,c])=>p.toLowerCase().includes(i)||c.toLowerCase().includes(i))},[l,r]);if(l.length===0)return null;const w=t.toLowerCase().includes("request")||t.toLowerCase().includes("api"),u=w?AppColors_1.AppColors.offerPurple:AppColors_1.AppColors.greenColor,h=w?`${AppColors_1.AppColors.offerPurple}10`:`${AppColors_1.AppColors.greenColor}10`;return<react_native_1.View style={[styles_1.default.htCard,{borderLeftColor:u}]}>
+      <react_native_1.Pressable onPress={f}hitSlop={10}>
         <react_native_1.View style={styles_1.default.htCardHeader}>
-          <react_native_1.View style={[styles_1.default.htIconWrap, { backgroundColor: accentBg }]}>
-            <NetworkIcons_1.HeadersIcon color={accentColor}/>
+          <react_native_1.View style={[styles_1.default.htIconWrap,{backgroundColor:h}]}>
+            <NetworkIcons_1.HeadersIcon color={u}/>
           </react_native_1.View>
-          <react_native_1.Text style={styles_1.default.htTitle}>{title}</react_native_1.Text>
-          <react_native_1.View style={[
-            styles_1.default.htBadge,
-            { backgroundColor: accentBg, borderColor: accentColor },
-        ]}>
-            <react_native_1.Text style={[styles_1.default.htBadgeText, { color: accentColor }]}>
-              {entries.length}
+          <react_native_1.Text style={styles_1.default.htTitle}>{t}</react_native_1.Text>
+          <react_native_1.View style={[styles_1.default.htBadge,{backgroundColor:h,borderColor:u}]}>
+            <react_native_1.Text style={[styles_1.default.htBadgeText,{color:u}]}>
+              {l.length}
             </react_native_1.Text>
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.htHeaderSpacer}/>
-          <CopyButton_1.default value={headers} label={title}/>
+          <CopyButton_1.default value={e}label={t}/>
           <react_native_1.View style={styles_1.default.htChevronBtn}>
-            <react_native_1.View style={chevronStyle}>
-              <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextStrong} size={14}/>
+            <react_native_1.View style={_}>
+              <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextStrong}size={14}/>
             </react_native_1.View>
           </react_native_1.View>
         </react_native_1.View>
       </react_native_1.Pressable>
 
-      {isOpen && (<react_native_1.View>
+      {a&&<react_native_1.View>
           <react_native_1.View style={styles_1.default.htColHeadRow}>
-            <react_native_1.Text style={[styles_1.default.htColHead, { width: '30%' }]}>{t('network.jsonViewer.key')}</react_native_1.Text>
-            <react_native_1.Text style={[styles_1.default.htColHead, { flex: 1 }]}>{t('network.jsonViewer.value')}</react_native_1.Text>
+            <react_native_1.Text style={[styles_1.default.htColHead,{width:"30%"}]}>{o("network.jsonViewer.key")}</react_native_1.Text>
+            <react_native_1.Text style={[styles_1.default.htColHead,{flex:1}]}>{o("network.jsonViewer.value")}</react_native_1.Text>
           </react_native_1.View>
 
-          {filtered.length > 0 ? (filtered.map(([k, v], i) => (<HeaderRow key={k} headerKey={k} value={v} isLast={i === filtered.length - 1} index={i}/>))) : (<react_native_1.View style={styles_1.default.htEmpty}>
-              <react_native_1.Text style={styles_1.default.htEmptyText}>{t('network.noMatchingHeaders')}</react_native_1.Text>
-            </react_native_1.View>)}
-        </react_native_1.View>)}
-    </react_native_1.View>);
-};
-exports.default = HeadersSection;
+          {d.length>0?d.map(([i,p],c)=><HeaderRow key={i}headerKey={i}value={p}isLast={c===d.length-1}index={c}/>):<react_native_1.View style={styles_1.default.htEmpty}>
+              <react_native_1.Text style={styles_1.default.htEmptyText}>{o("network.noMatchingHeaders")}</react_native_1.Text>
+            </react_native_1.View>}
+        </react_native_1.View>}
+    </react_native_1.View>};exports.default=HeadersSection;

package/dist/commonjs/components/HighlightText.js

@@ -1,58 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const helpers_1 = require("../helpers");
-const HighlightText = react_1.default.memo(function HighlightText({ text, search, style, highlightStyle, detectLinks, numberOfLines, ...rest }) {
-    if (!text || (text.length > 20000 && !search && !detectLinks)) {
-        return (<react_native_1.Text style={style} numberOfLines={numberOfLines} {...rest}>
-        {text}
-      </react_native_1.Text>);
-    }
-    const URL_REGEX = /(https?:\/\/[^\s]+)/g;
-    const renderNormalOrHighlighted = (subText, keyPrefix) => {
-        if (!search) {
-            return <react_native_1.Text key={keyPrefix}>{subText}</react_native_1.Text>;
-        }
-        const regex = new RegExp(`(${(0, helpers_1.escapeRegex)(search)})`, 'gi');
-        const parts = subText.split(regex);
-        return (<react_native_1.Text key={keyPrefix}>
-        {parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<react_native_1.Text key={i} style={highlightStyle}>
-              {part}
-            </react_native_1.Text>) : (<react_native_1.Text key={i}>{part}</react_native_1.Text>))}
-      </react_native_1.Text>);
-    };
-    if (detectLinks && text && text.length < 20000) {
-        const parts = text.split(URL_REGEX);
-        return (<react_native_1.Text style={style} numberOfLines={numberOfLines} {...rest}>
-        {parts.map((part, i) => {
-                if (part.match(URL_REGEX)) {
-                    return (<react_native_1.Text key={`link-${i}`} style={{
-                            color: '#007AFF',
-                            textDecorationLine: 'underline',
-                        }} onPress={() => {
-                            (0, helpers_1.handleOpenExternalLink)(part);
-                        }}>
-                {part}
-              </react_native_1.Text>);
-                }
-                return renderNormalOrHighlighted(part, `text-${i}`);
-            })}
-      </react_native_1.Text>);
-    }
-    if (!search)
-        return (<react_native_1.Text style={style} numberOfLines={numberOfLines} {...rest}>
-        {text}
-      </react_native_1.Text>);
-    const regex = new RegExp(`(${(0, helpers_1.escapeRegex)(search)})`, 'gi');
-    const parts = text.split(regex);
-    return (<react_native_1.Text style={style} numberOfLines={numberOfLines} {...rest}>
-      {parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<react_native_1.Text key={i} style={highlightStyle}>
-            {part}
-          </react_native_1.Text>) : (<react_native_1.Text key={i}>{part}</react_native_1.Text>))}
-    </react_native_1.Text>);
-});
-exports.default = HighlightText;
+"use strict";var __importDefault=this&&this.__importDefault||function(i){return i&&i.__esModule?i:{default:i}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importDefault(require("react")),react_native_1=require("react-native"),helpers_1=require("../helpers"),AppColors_1=require("../styles/AppColors"),HighlightText=react_1.default.memo(function({text:t,search:n,style:a,highlightStyle:c,detectLinks:u,numberOfLines:o,...s}){if(!t||t.length>2e4&&!n&&!u)return<react_native_1.Text style={a}numberOfLines={o}{...s}>
+        {t}
+      </react_native_1.Text>;const x=/(https?:\/\/[^\s]+)/g,p=(r,e)=>{if(!n)return<react_native_1.Text key={e}>{r}</react_native_1.Text>;const _=new RegExp(`(${(0,helpers_1.escapeRegex)(n)})`,"gi"),f=r.split(_);return<react_native_1.Text key={e}>
+        {f.map((l,T)=>l.toLowerCase()===n.toLowerCase()?<react_native_1.Text key={T}style={c}>
+              {l}
+            </react_native_1.Text>:<react_native_1.Text key={T}>{l}</react_native_1.Text>)}
+      </react_native_1.Text>};if(u&&t&&t.length<2e4){const r=t.split(x);return<react_native_1.Text style={a}numberOfLines={o}{...s}>
+        {r.map((e,_)=>e.match(x)?<react_native_1.Text key={`link-${_}`}style={{color:AppColors_1.AppColors.skyBlue,textDecorationLine:"underline"}}onPress={()=>{(0,helpers_1.handleOpenExternalLink)(e)}}>
+                {e}
+              </react_native_1.Text>:p(e,`text-${_}`))}
+      </react_native_1.Text>}if(!n)return<react_native_1.Text style={a}numberOfLines={o}{...s}>
+        {t}
+      </react_native_1.Text>;const g=new RegExp(`(${(0,helpers_1.escapeRegex)(n)})`,"gi"),v=t.split(g);return<react_native_1.Text style={a}numberOfLines={o}{...s}>
+      {v.map((r,e)=>r.toLowerCase()===n.toLowerCase()?<react_native_1.Text key={e}style={c}>
+            {r}
+          </react_native_1.Text>:<react_native_1.Text key={e}>{r}</react_native_1.Text>)}
+    </react_native_1.Text>});exports.default=HighlightText;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface AboutModalProps {
+    onClose?: () => void;
+}
+export declare const AboutModal: React.FC<AboutModalProps>;
+export default AboutModal;

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

@@ -0,0 +1,243 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AboutModal=void 0;const react_1=__importDefault(require("react")),react_native_1=require("react-native"),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),TouchableScale_1=__importDefault(require("../TouchableScale")),InspectorContext_1=require("./InspectorContext"),version_1=require("../../constants/version"),helpers_1=require("../../helpers"),NetworkIcons_1=require("../NetworkIcons"),AboutModal=({onClose:e})=>{const{updateAvailable:t,latestNpmVersion:r}=(0,InspectorContext_1.useInspector)();return<react_native_1.View style={styles.container}>
+      <react_native_1.ScrollView style={styles.scrollView}contentContainerStyle={styles.scrollContent}showsVerticalScrollIndicator={!1}>
+        
+        <react_native_1.View style={styles.heroCard}>
+          <react_native_1.View style={styles.heroHeaderRow}>
+            <react_native_1.View style={styles.heroBrandRow}>
+              <react_native_1.View style={styles.heroIconBox}>
+                <NetworkIcons_1.PackageIcon color={AppColors_1.AppColors.brandPurple}size={24}/>
+              </react_native_1.View>
+              <react_native_1.View style={{flex:1}}>
+                <react_native_1.View style={styles.heroTitleRow}>
+                  <react_native_1.Text style={styles.heroTitle}>In-App Inspector</react_native_1.Text>
+                  <react_native_1.View style={styles.versionBadge}>
+                    <react_native_1.Text style={styles.versionBadgeText}>v{version_1.LIB_VERSION}</react_native_1.Text>
+                  </react_native_1.View>
+                  {t?<react_native_1.View style={styles.updateBadge}>
+                      <react_native_1.Text style={styles.updateBadgeText}>
+                        v{r} Available
+                      </react_native_1.Text>
+                      <NetworkIcons_1.BoltIcon size={9}color={AppColors_1.AppColors.amber600}/>
+                    </react_native_1.View>:<react_native_1.View style={styles.upToDateBadge}>
+                      <react_native_1.Text style={styles.upToDateBadgeText}>Up to date</react_native_1.Text>
+                    </react_native_1.View>}
+                </react_native_1.View>
+                <react_native_1.Text style={styles.heroPackageName}>
+                  react-native-inapp-inspector
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          <react_native_1.Text style={styles.heroDescription}>
+            The all-in-one on-device debugging, logging, and QA companion for
+            React Native & Expo applications. Designed for developers, QA
+            testers, and product teams.
+          </react_native_1.Text>
+
+          {t&&<TouchableScale_1.default onPress={()=>{(0,helpers_1.copyToClipboard)("npm install react-native-inapp-inspector@latest","Install Command"),(0,helpers_1.showToast)("Copied npm upgrade command!")}}style={styles.upgradeBtn}>
+              <NetworkIcons_1.BoltIcon size={12}color={AppColors_1.AppColors.white}/>
+              <react_native_1.Text style={styles.upgradeBtnText}>
+                Copy Upgrade Command (v{r})
+              </react_native_1.Text>
+            </TouchableScale_1.default>}
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={styles.sectionCard}>
+          <react_native_1.Text style={styles.sectionHeader}>APP INFORMATION</react_native_1.Text>
+
+          <react_native_1.View style={{gap:8}}>
+            <react_native_1.View style={styles.row}>
+              <react_native_1.Text style={styles.rowLabel}>App Name</react_native_1.Text>
+              <react_native_1.Text style={styles.rowValueBold}>{(0,helpers_1.getAppName)()}</react_native_1.Text>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.row}>
+              <react_native_1.Text style={styles.rowLabel}>Package Identifier</react_native_1.Text>
+              <react_native_1.Text style={styles.rowValueRegular}>{(0,helpers_1.getBundleIdentifier)()}</react_native_1.Text>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.row}>
+              <react_native_1.Text style={styles.rowLabel}>App Version</react_native_1.Text>
+              <react_native_1.Text style={styles.rowValueBold}>
+                {(0,helpers_1.getAppVersionAndBuild)().formatted}
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.row}>
+              <react_native_1.Text style={styles.rowLabel}>Environment</react_native_1.Text>
+              <react_native_1.View style={[styles.statusTag,{backgroundColor:__DEV__?`${AppColors_1.AppColors.amber500}20`:`${AppColors_1.AppColors.emerald500}20`,borderColor:__DEV__?`${AppColors_1.AppColors.amber500}50`:`${AppColors_1.AppColors.emerald500}50`}]}>
+                <react_native_1.Text style={[styles.statusTagText,{color:__DEV__?AppColors_1.AppColors.amber600:AppColors_1.AppColors.emerald600}]}>
+                  {__DEV__?"Development (Debug)":"Production (Release)"}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.row}>
+              <react_native_1.Text style={styles.rowLabel}>Platform</react_native_1.Text>
+              <react_native_1.Text style={styles.rowValueRegular}>
+                {react_native_1.Platform.OS==="ios"?"Apple iOS":"Google Android"}{" "}
+                (v{react_native_1.Platform.Version})
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={styles.sectionCard}>
+          <react_native_1.Text style={styles.sectionHeader}>WHAT IN-APP INSPECTOR DOES</react_native_1.Text>
+
+          <react_native_1.View style={styles.featuresList}>
+            <react_native_1.View style={styles.featureItem}>
+              <react_native_1.View style={[styles.featureIconBox,{backgroundColor:`${AppColors_1.AppColors.brandPurple}15`}]}>
+                <NetworkIcons_1.WifiIcon color={AppColors_1.AppColors.brandPurple}size={18}/>
+              </react_native_1.View>
+              <react_native_1.View style={styles.featureTextBox}>
+                <react_native_1.Text style={styles.featureTitle}>Network Traffic Monitor</react_native_1.Text>
+                <react_native_1.Text style={styles.featureDesc}>
+                  Inspect HTTP and HTTPS API requests, responses, headers, and
+                  server latency with waterfall timing charts.
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.featureItem}>
+              <react_native_1.View style={[styles.featureIconBox,{backgroundColor:`${AppColors_1.AppColors.blue500}15`}]}>
+                <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.blue500}size={18}/>
+              </react_native_1.View>
+              <react_native_1.View style={styles.featureTextBox}>
+                <react_native_1.Text style={styles.featureTitle}>Console Logger</react_native_1.Text>
+                <react_native_1.Text style={styles.featureDesc}>
+                  View real-time console logs, warnings, and errors with source
+                  file origins and formatted stack traces.
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.featureItem}>
+              <react_native_1.View style={[styles.featureIconBox,{backgroundColor:`${AppColors_1.AppColors.firebaseOrange}15`}]}>
+                <NetworkIcons_1.AnalyticsIcon color={AppColors_1.AppColors.firebaseOrange}size={18}/>
+              </react_native_1.View>
+              <react_native_1.View style={styles.featureTextBox}>
+                <react_native_1.Text style={styles.featureTitle}>Analytics Telemetry</react_native_1.Text>
+                <react_native_1.Text style={styles.featureDesc}>
+                  Track Firebase and custom analytics events, screen views, and
+                  user properties live on the device.
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.featureItem}>
+              <react_native_1.View style={[styles.featureIconBox,{backgroundColor:`${AppColors_1.AppColors.violet600}15`}]}>
+                <NetworkIcons_1.DatabaseIcon color={AppColors_1.AppColors.violet600}size={18}/>
+              </react_native_1.View>
+              <react_native_1.View style={styles.featureTextBox}>
+                <react_native_1.Text style={styles.featureTitle}>Redux State & Actions</react_native_1.Text>
+                <react_native_1.Text style={styles.featureDesc}>
+                  Inspect dispatched actions, payloads, and state tree diffs
+                  without connecting desktop companion tools.
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.featureItem}>
+              <react_native_1.View style={[styles.featureIconBox,{backgroundColor:`${AppColors_1.AppColors.teal600}15`}]}>
+                <NetworkIcons_1.CameraIcon color={AppColors_1.AppColors.teal600}size={18}/>
+              </react_native_1.View>
+              <react_native_1.View style={styles.featureTextBox}>
+                <react_native_1.Text style={styles.featureTitle}>Screen & Video Capture</react_native_1.Text>
+                <react_native_1.Text style={styles.featureDesc}>
+                  Take screenshots and record test sessions to share with QA and
+                  engineering teams instantly.
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.featureItem}>
+              <react_native_1.View style={[styles.featureIconBox,{backgroundColor:`${AppColors_1.AppColors.emerald600}15`}]}>
+                <NetworkIcons_1.CrashIcon color={AppColors_1.AppColors.emerald600}size={18}/>
+              </react_native_1.View>
+              <react_native_1.View style={styles.featureTextBox}>
+                <react_native_1.Text style={styles.featureTitle}>
+                  Crash Catcher & Diagnostics
+                </react_native_1.Text>
+                <react_native_1.Text style={styles.featureDesc}>
+                  Protects against native crashes and provides device health
+                  metrics including RAM, battery, and storage.
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={styles.gridContainer}>
+          <TouchableScale_1.default onPress={()=>{react_native_1.Linking.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector").catch(()=>{})}}style={[styles.gridCard,{backgroundColor:`${AppColors_1.AppColors.brandPurple}0F`,borderColor:`${AppColors_1.AppColors.brandPurple}30`}]}>
+            <NetworkIcons_1.GitHubIcon color={AppColors_1.AppColors.brandPurple}size={18}/>
+            <react_native_1.View style={{flex:1}}>
+              <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:5}}>
+                <NetworkIcons_1.StarIcon color={AppColors_1.AppColors.amber500}size={13}/>
+                <react_native_1.Text style={styles.gridCardTitle}>GitHub</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.Text style={styles.gridCardSub}>Star & source code</react_native_1.Text>
+            </react_native_1.View>
+            <NetworkIcons_1.ExternalLinkIcon size={12}color={AppColors_1.AppColors.grayTextWeak}/>
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default onPress={()=>{react_native_1.Linking.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{})}}style={styles.gridCard}>
+            <NetworkIcons_1.NpmIcon color={AppColors_1.AppColors.npmRed}size={18}/>
+            <react_native_1.View style={{flex:1}}>
+              <react_native_1.Text style={styles.gridCardTitle}>NPM Registry</react_native_1.Text>
+              <react_native_1.Text style={styles.gridCardSub}>Package updates</react_native_1.Text>
+            </react_native_1.View>
+            <NetworkIcons_1.ExternalLinkIcon size={12}color={AppColors_1.AppColors.grayTextWeak}/>
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default onPress={()=>{react_native_1.Linking.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector#readme").catch(()=>{})}}style={styles.gridCard}>
+            <NetworkIcons_1.BookOpenIcon color={AppColors_1.AppColors.brandPurple}size={18}/>
+            <react_native_1.View style={{flex:1}}>
+              <react_native_1.Text style={styles.gridCardTitle}>Documentation</react_native_1.Text>
+              <react_native_1.Text style={styles.gridCardSub}>Integration guide</react_native_1.Text>
+            </react_native_1.View>
+            <NetworkIcons_1.ExternalLinkIcon size={12}color={AppColors_1.AppColors.grayTextWeak}/>
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default onPress={()=>{react_native_1.Linking.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector/issues").catch(()=>{})}}style={styles.gridCard}>
+            <NetworkIcons_1.BugIcon color={AppColors_1.AppColors.errorColor}size={18}/>
+            <react_native_1.View style={{flex:1}}>
+              <react_native_1.Text style={styles.gridCardTitle}>Report Issue</react_native_1.Text>
+              <react_native_1.Text style={styles.gridCardSub}>Help & support</react_native_1.Text>
+            </react_native_1.View>
+            <NetworkIcons_1.ExternalLinkIcon size={12}color={AppColors_1.AppColors.grayTextWeak}/>
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default onPress={()=>{react_native_1.Linking.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector/releases").catch(()=>{})}}style={styles.gridCard}>
+            <NetworkIcons_1.TagIcon color={AppColors_1.AppColors.successGreen}size={18}/>
+            <react_native_1.View style={{flex:1}}>
+              <react_native_1.Text style={styles.gridCardTitle}>Release Notes</react_native_1.Text>
+              <react_native_1.Text style={styles.gridCardSub}>What's new</react_native_1.Text>
+            </react_native_1.View>
+            <NetworkIcons_1.ExternalLinkIcon size={12}color={AppColors_1.AppColors.grayTextWeak}/>
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default onPress={()=>{(0,helpers_1.copyToClipboard)("npm install react-native-inapp-inspector","NPM Command"),(0,helpers_1.showToast)("Copied package install command!")}}style={styles.gridCard}>
+            <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.brandPurple}size={16}/>
+            <react_native_1.View style={{flex:1}}>
+              <react_native_1.Text style={styles.gridCardTitle}>Copy Install</react_native_1.Text>
+              <react_native_1.Text style={styles.gridCardSub}>npm / yarn command</react_native_1.Text>
+            </react_native_1.View>
+          </TouchableScale_1.default>
+        </react_native_1.View>
+
+        
+        <react_native_1.View style={styles.footer}>
+          <react_native_1.Text style={styles.footerText}>
+            React Native In-App Inspector · MIT License
+          </react_native_1.Text>
+          <react_native_1.Text style={styles.footerSubText}>
+            Zero-config on-device debugging tool
+          </react_native_1.Text>
+        </react_native_1.View>
+      </react_native_1.ScrollView>
+    </react_native_1.View>};exports.AboutModal=AboutModal;const styles=react_native_1.StyleSheet.create({container:{flex:1,backgroundColor:AppColors_1.AppColors.grayBackground},scrollView:{flex:1},scrollContent:{padding:14,paddingBottom:32,gap:12},heroCard:{backgroundColor:AppColors_1.AppColors.primaryLight,borderRadius:14,padding:16,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,shadowColor:AppColors_1.AppColors.shadowColorString,shadowOffset:{width:0,height:2},shadowOpacity:.05,shadowRadius:8,elevation:2,gap:12},heroHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},heroBrandRow:{flexDirection:"row",alignItems:"center",gap:12,flex:1},heroIconBox:{width:44,height:44,borderRadius:12,backgroundColor:`${AppColors_1.AppColors.brandPurple}15`,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:`${AppColors_1.AppColors.brandPurple}30`},heroTitleRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},heroTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:17,lineHeight:22,color:AppColors_1.AppColors.primaryBlack,letterSpacing:-.3},versionBadge:{backgroundColor:`${AppColors_1.AppColors.brandPurple}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:`${AppColors_1.AppColors.brandPurple}30`},versionBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,lineHeight:13,color:AppColors_1.AppColors.brandPurple},updateBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${AppColors_1.AppColors.amber500}20`,paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:`${AppColors_1.AppColors.amber500}50`},updateBadgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9.5,lineHeight:12,color:AppColors_1.AppColors.amber600},upToDateBadge:{backgroundColor:`${AppColors_1.AppColors.emerald500}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:`${AppColors_1.AppColors.emerald500}35`},upToDateBadgeText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:9.5,lineHeight:12,color:AppColors_1.AppColors.emerald600},heroPackageName:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:12,lineHeight:16,color:AppColors_1.AppColors.grayTextWeak,marginTop:2},heroDescription:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:13,lineHeight:18,color:AppColors_1.AppColors.grayText},upgradeBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,backgroundColor:AppColors_1.AppColors.brandPurple,paddingVertical:9,paddingHorizontal:12,borderRadius:8},upgradeBtnText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:AppColors_1.AppColors.white},sectionCard:{backgroundColor:AppColors_1.AppColors.primaryLight,borderRadius:14,padding:14,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor,gap:10},sectionHeader:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11,lineHeight:15,color:AppColors_1.AppColors.grayTextWeak,letterSpacing:.6},row:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:3},rowLabel:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:12.5,lineHeight:17,color:AppColors_1.AppColors.grayTextWeak},rowValueBold:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12.5,lineHeight:17,color:AppColors_1.AppColors.primaryBlack},rowValueRegular:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:12.5,lineHeight:17,color:AppColors_1.AppColors.grayTextStrong},statusTag:{paddingHorizontal:7,paddingVertical:2,borderRadius:6,borderWidth:1},statusTagText:{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:10.5,lineHeight:14},featuresList:{gap:10},featureItem:{flexDirection:"row",alignItems:"flex-start",gap:12,paddingVertical:4},featureIconBox:{width:36,height:36,borderRadius:10,alignItems:"center",justifyContent:"center"},featureTextBox:{flex:1,gap:2},featureTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13,lineHeight:17,color:AppColors_1.AppColors.primaryBlack},featureDesc:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11.5,lineHeight:16,color:AppColors_1.AppColors.grayTextWeak},gridContainer:{flexDirection:"row",flexWrap:"wrap",gap:8},gridCard:{width:"48.5%",flexGrow:1,backgroundColor:AppColors_1.AppColors.primaryLight,borderRadius:10,padding:12,flexDirection:"row",alignItems:"center",gap:9,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor},gridCardTitle:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,lineHeight:16,color:AppColors_1.AppColors.primaryBlack},gridCardSub:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,lineHeight:13,color:AppColors_1.AppColors.grayTextWeak},footer:{alignItems:"center",justifyContent:"center",paddingVertical:14,gap:3},footerText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,lineHeight:15,color:AppColors_1.AppColors.grayTextWeak},footerSubText:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,lineHeight:14,color:AppColors_1.AppColors.slate400}});exports.default=exports.AboutModal;