react-native-inapp-inspector 2.3.18 → 2.3.20

package/dist/esm/components/HeadersSection.js

@@ -1,95 +1,54 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from '../i18n';
-import { View, Pressable, Text } from 'react-native';
-import CopyButton from './CopyButton';
-import TouchableScale from './TouchableScale';
-import { copyToClipboard } from '../helpers';
-import useAccordion from '../customHooks/useAccordion';
-import { HeadersIcon, ChevronIcon, CopyIcon } from './NetworkIcons';
-import { AppColors } from '../styles/AppColors';
-import styles from '../styles';
-const HeaderRow = React.memo(function HeaderRow({ headerKey, value, isLast, index, }) {
-    const [expanded, setExpanded] = useState(false);
-    const isLong = value.length > 35;
-    return (<View style={[styles.htRow, !isLast && styles.htRowBorder]}>
-      <View style={styles.htKeyCell}>
-        <Text style={styles.htKey} numberOfLines={2}>
-          {headerKey}
-        </Text>
-      </View>
-      <View style={styles.htCellDivider}/>
-      <Pressable style={styles.htValueCell} onPress={() => isLong && setExpanded(v => !v)} hitSlop={8}>
-        <Text style={styles.htValue} selectable numberOfLines={expanded ? undefined : 3}>
-          {value}
-        </Text>
-        {isLong && (<View style={[styles.htExpandRow, { flexDirection: 'row', alignItems: 'center', gap: 4 }]}>
-            <Text style={styles.htExpandText}>
-              {expanded ? 'less' : 'more'}
-            </Text>
-            <ChevronIcon direction={expanded ? 'up' : 'down'} color={AppColors.purple} size={10}/>
-          </View>)}
-      </Pressable>
-      <TouchableScale onPress={() => copyToClipboard(value, headerKey)} hitSlop={8} style={styles.htCopyBtn}>
-        <CopyIcon color={AppColors.grayTextWeak} size={14}/>
-      </TouchableScale>
-    </View>);
-});
-const HeadersSection = ({ title, headers, search, resetKey, }) => {
-    const { t } = useTranslation();
-    const { isOpen, toggleOpen, forceOpen, chevronStyle } = useAccordion(false);
-    useEffect(() => {
-        forceOpen(false);
-    }, [resetKey]);
-    const entries = useMemo(() => (headers ? Object.entries(headers) : []), [headers]);
-    const filtered = 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.offerPurple : AppColors.greenColor;
-    const accentBg = isRequest
-        ? `${AppColors.offerPurple}10`
-        : `${AppColors.greenColor}10`;
-    return (<View style={[styles.htCard, { borderLeftColor: accentColor }]}>
-      <Pressable onPress={toggleOpen} hitSlop={10}>
-        <View style={styles.htCardHeader}>
-          <View style={[styles.htIconWrap, { backgroundColor: accentBg }]}>
-            <HeadersIcon color={accentColor}/>
-          </View>
-          <Text style={styles.htTitle}>{title}</Text>
-          <View style={[
-            styles.htBadge,
-            { backgroundColor: accentBg, borderColor: accentColor },
-        ]}>
-            <Text style={[styles.htBadgeText, { color: accentColor }]}>
-              {entries.length}
-            </Text>
-          </View>
-          <View style={styles.htHeaderSpacer}/>
-          <CopyButton value={headers} label={title}/>
-          <View style={styles.htChevronBtn}>
-            <View style={chevronStyle}>
-              <ChevronIcon color={AppColors.grayTextStrong} size={14}/>
-            </View>
-          </View>
-        </View>
-      </Pressable>
+import $,{useEffect as F,useMemo as K,useState as G}from"react";import{useTranslation as J}from"../i18n";import{View as C,Pressable as M,Text as T}from"react-native";import N from"./CopyButton";import Q from"./TouchableScale";import{copyToClipboard as U}from"../helpers";import X from"../customHooks/useAccordion";import{HeadersIcon as Y,ChevronIcon as W,CopyIcon as Z}from"./NetworkIcons";import{AppColors as H}from"../styles/AppColors";import e from"../styles";const _=$.memo(function({headerKey:V,value:b,isLast:v,index:k}){const[S,I]=G(!1),B=b.length>35;return<C style={[e.htRow,!v&&e.htRowBorder]}>
+      <C style={e.htKeyCell}>
+        <T style={e.htKey}numberOfLines={2}>
+          {V}
+        </T>
+      </C>
+      <C style={e.htCellDivider}/>
+      <M style={e.htValueCell}onPress={()=>B&&I(j=>!j)}hitSlop={8}>
+        <T style={e.htValue}selectable numberOfLines={S?void 0:3}>
+          {b}
+        </T>
+        {B&&<C style={[e.htExpandRow,{flexDirection:"row",alignItems:"center",gap:4}]}>
+            <T style={e.htExpandText}>
+              {S?"less":"more"}
+            </T>
+            <W direction={S?"up":"down"}color={H.purple}size={10}/>
+          </C>}
+      </M>
+      <Q onPress={()=>U(b,V)}hitSlop={8}style={e.htCopyBtn}>
+        <Z color={H.grayTextWeak}size={14}/>
+      </Q>
+    </C>}),ee=({title:L,headers:V,search:b,resetKey:v})=>{const{t:k}=J(),{isOpen:S,toggleOpen:I,forceOpen:B,chevronStyle:j}=X(!1);F(()=>{B(!1)},[v]);const P=K(()=>V?Object.entries(V):[],[V]),q=K(()=>{if(!b)return P;const R=b.toLowerCase();return P.filter(([z,O])=>z.toLowerCase().includes(R)||O.toLowerCase().includes(R))},[P,b]);if(P.length===0)return null;const A=L.toLowerCase().includes("request")||L.toLowerCase().includes("api"),E=A?H.offerPurple:H.greenColor,D=A?`${H.offerPurple}10`:`${H.greenColor}10`;return<C style={[e.htCard,{borderLeftColor:E}]}>
+      <M onPress={I}hitSlop={10}>
+        <C style={e.htCardHeader}>
+          <C style={[e.htIconWrap,{backgroundColor:D}]}>
+            <Y color={E}/>
+          </C>
+          <T style={e.htTitle}>{L}</T>
+          <C style={[e.htBadge,{backgroundColor:D,borderColor:E}]}>
+            <T style={[e.htBadgeText,{color:E}]}>
+              {P.length}
+            </T>
+          </C>
+          <C style={e.htHeaderSpacer}/>
+          <N value={V}label={L}/>
+          <C style={e.htChevronBtn}>
+            <C style={j}>
+              <W color={H.grayTextStrong}size={14}/>
+            </C>
+          </C>
+        </C>
+      </M>
 
-      {isOpen && (<View>
-          <View style={styles.htColHeadRow}>
-            <Text style={[styles.htColHead, { width: '30%' }]}>{t('network.jsonViewer.key')}</Text>
-            <Text style={[styles.htColHead, { flex: 1 }]}>{t('network.jsonViewer.value')}</Text>
-          </View>
+      {S&&<C>
+          <C style={e.htColHeadRow}>
+            <T style={[e.htColHead,{width:"30%"}]}>{k("network.jsonViewer.key")}</T>
+            <T style={[e.htColHead,{flex:1}]}>{k("network.jsonViewer.value")}</T>
+          </C>
 
-          {filtered.length > 0 ? (filtered.map(([k, v], i) => (<HeaderRow key={k} headerKey={k} value={v} isLast={i === filtered.length - 1} index={i}/>))) : (<View style={styles.htEmpty}>
-              <Text style={styles.htEmptyText}>{t('network.noMatchingHeaders')}</Text>
-            </View>)}
-        </View>)}
-    </View>);
-};
-export default HeadersSection;
+          {q.length>0?q.map(([R,z],O)=><_ key={R}headerKey={R}value={z}isLast={O===q.length-1}index={O}/>):<C style={e.htEmpty}>
+              <T style={e.htEmptyText}>{k("network.noMatchingHeaders")}</T>
+            </C>}
+        </C>}
+    </C>};export default ee;

package/dist/esm/components/HighlightText.js

@@ -1,53 +1,17 @@
-import React from 'react';
-import { Text } from 'react-native';
-import { escapeRegex, handleOpenExternalLink } from '../helpers';
-const HighlightText = React.memo(function HighlightText({ text, search, style, highlightStyle, detectLinks, numberOfLines, ...rest }) {
-    if (!text || (text.length > 20000 && !search && !detectLinks)) {
-        return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
-        {text}
-      </Text>);
-    }
-    const URL_REGEX = /(https?:\/\/[^\s]+)/g;
-    const renderNormalOrHighlighted = (subText, keyPrefix) => {
-        if (!search) {
-            return <Text key={keyPrefix}>{subText}</Text>;
-        }
-        const regex = new RegExp(`(${escapeRegex(search)})`, 'gi');
-        const parts = subText.split(regex);
-        return (<Text key={keyPrefix}>
-        {parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<Text key={i} style={highlightStyle}>
-              {part}
-            </Text>) : (<Text key={i}>{part}</Text>))}
-      </Text>);
-    };
-    if (detectLinks && text && text.length < 20000) {
-        const parts = text.split(URL_REGEX);
-        return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
-        {parts.map((part, i) => {
-                if (part.match(URL_REGEX)) {
-                    return (<Text key={`link-${i}`} style={{
-                            color: '#007AFF',
-                            textDecorationLine: 'underline',
-                        }} onPress={() => {
-                            handleOpenExternalLink(part);
-                        }}>
-                {part}
-              </Text>);
-                }
-                return renderNormalOrHighlighted(part, `text-${i}`);
-            })}
-      </Text>);
-    }
-    if (!search)
-        return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
-        {text}
-      </Text>);
-    const regex = new RegExp(`(${escapeRegex(search)})`, 'gi');
-    const parts = text.split(regex);
-    return (<Text style={style} numberOfLines={numberOfLines} {...rest}>
-      {parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<Text key={i} style={highlightStyle}>
-            {part}
-          </Text>) : (<Text key={i}>{part}</Text>))}
-    </Text>);
-});
-export default HighlightText;
+import A from"react";import{Text as T}from"react-native";import{escapeRegex as $,handleOpenExternalLink as D}from"../helpers";const G=A.memo(function({text:u,search:y,style:c,highlightStyle:a,detectLinks:E,numberOfLines:k,...L}){if(!u||u.length>2e4&&!y&&!E)return<T style={c}numberOfLines={k}{...L}>
+        {u}
+      </T>;const d=/(https?:\/\/[^\s]+)/g,H=(f,p)=>{if(!y)return<T key={p}>{f}</T>;const w=new RegExp(`(${$(y)})`,"gi"),F=f.split(w);return<T key={p}>
+        {F.map((R,C)=>R.toLowerCase()===y.toLowerCase()?<T key={C}style={a}>
+              {R}
+            </T>:<T key={C}>{R}</T>)}
+      </T>};if(E&&u&&u.length<2e4){const f=u.split(d);return<T style={c}numberOfLines={k}{...L}>
+        {f.map((p,w)=>p.match(d)?<T key={`link-${w}`}style={{color:"#007AFF",textDecorationLine:"underline"}}onPress={()=>{D(p)}}>
+                {p}
+              </T>:H(p,`text-${w}`))}
+      </T>}if(!y)return<T style={c}numberOfLines={k}{...L}>
+        {u}
+      </T>;const O=new RegExp(`(${$(y)})`,"gi"),h=u.split(O);return<T style={c}numberOfLines={k}{...L}>
+      {h.map((f,p)=>f.toLowerCase()===y.toLowerCase()?<T key={p}style={a}>
+            {f}
+          </T>:<T key={p}>{f}</T>)}
+    </T>});export default G;

package/dist/esm/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/esm/components/Inspector/AboutModal.js

@@ -0,0 +1,351 @@
+import _,{useState as Y}from"react";import{Dimensions as I,PixelRatio as S,Platform as h,Linking as R,ScrollView as Z,StyleSheet as X,Text as T,View as V}from"react-native";import{AppColors as x}from"../../styles/AppColors";import{AppFonts as C}from"../../styles/AppFonts";import B from"../TouchableScale";import{useInspector as Q}from"./InspectorContext";import{LIB_VERSION as A}from"../../constants/version";import{getAppName as $,getBundleIdentifier as O,getAppVersionAndBuild as U,copyToClipboard as M,showToast as N,isLocalDebugEnvironment as z}from"../../helpers";import{isPersistentStorageAvailable as D}from"../../helpers/settingsStore";import{isReduxConnected as W}from"../../customHooks/reduxLogger";import{isAnalyticsConnected as j}from"../../customHooks/analyticsLogger";import{PackageIcon as Te,GitHubIcon as Ve,NpmIcon as J,BoltIcon as P,CopyIcon as G,CheckIcon as Ce}from"../NetworkIcons";export const AboutModal=({onClose:he})=>{const{updateAvailable:f,latestNpmVersion:v}=Q(),[F,k]=Y(!1),K=()=>{const E=I.get("window"),H=I.get("screen"),L=h.constants?.reactNativeVersion,q={package:{name:"react-native-inapp-inspector",version:`v${A}`,latestNpmVersion:v?`v${v}`:"Checking...",license:"MIT",repository:"https://github.com/vengatmacuser/react-native-inapp-inspector"},hostApp:{name:$(),bundleId:O(),versionAndBuild:U().formatted,buildVariant:__DEV__?"Development (Debug)":"Production (Release)",metroConnected:z()},runtime:{reactNativeVersion:L?`${L.major}.${L.minor}.${L.patch}`:"0.74+",reactVersion:_.version,jsEngine:global?.HermesInternal?"Hermes":"JavaScriptCore (JSC)",architecture:global?.nativeFabricUIManager?"Fabric (New Architecture)":"Paper (Legacy Bridge)",turboModules:!!(global?.__turboModuleProxy||global?.TurboModuleRegistry)},device:{platform:h.OS,osVersion:h.Version,deviceModel:h.constants?.Model||"Unknown Device",windowDimensions:`${Math.round(E.width)}x${Math.round(E.height)} pt`,screenDimensions:`${Math.round(H.width)}x${Math.round(H.height)} pt`,pixelRatio:S.get(),fontScale:S.getFontScale(),timezone:Intl.DateTimeFormat().resolvedOptions().timeZone||"Unknown",locale:Intl.DateTimeFormat().resolvedOptions().locale||"en"},storageAndCapabilities:{storageEngine:D()?"MMKV (Fast Native Storage)":"In-Memory State",hasNativeModule:!!(global?.NativeInspectorModule||global?.__IN_APP_INSPECTOR_NATIVE__),reduxConnected:W(),analyticsConnected:j()}};M(JSON.stringify(q,null,2),"Diagnostic Specifications"),k(!0),N("Copied full diagnostic specs to clipboard!"),setTimeout(()=>k(!1),2e3)};return<V style={e.container}>
+      <Z style={e.scrollView}contentContainerStyle={e.scrollContent}showsVerticalScrollIndicator={!1}>
+        
+        <V style={e.heroCard}>
+          <V style={e.heroHeaderRow}>
+            <V style={e.heroBrandRow}>
+              <V style={e.heroIconBox}>
+                <Te color={x.purple}size={22}/>
+              </V>
+              <V style={{flex:1}}>
+                <V style={e.heroTitleRow}>
+                  <T style={e.heroTitle}>In-App Inspector</T>
+                  <V style={e.versionBadge}>
+                    <T style={e.versionBadgeText}>v{A}</T>
+                  </V>
+                  {f?<V style={e.updateBadge}>
+                      <T style={e.updateBadgeText}>
+                        v{v} Available
+                      </T>
+                      <P size={9}color="#D97706"/>
+                    </V>:<V style={e.upToDateBadge}>
+                      <T style={e.upToDateBadgeText}>Up to date</T>
+                    </V>}
+                </V>
+                <T style={e.heroPackageName}>
+                  react-native-inapp-inspector
+                </T>
+              </V>
+            </V>
+          </V>
+
+          <T style={e.heroDescription}>
+            High-performance in-app debugging, network logging, console
+            inspection, performance profiling, storage viewer & telemetry
+            diagnostics for React Native.
+          </T>
+
+          {f&&<B onPress={()=>{M("npm install react-native-inapp-inspector@latest","Install Command"),N("Copied npm upgrade command!")}}style={e.upgradeBtn}>
+              <P size={12}color={x.white}/>
+              <T style={e.upgradeBtnText}>
+                Copy Upgrade Command (v{v})
+              </T>
+            </B>}
+        </V>
+
+        
+        <V style={e.gridContainer}>
+          <B onPress={()=>{R.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector").catch(()=>{})}}style={[e.gridCard,{backgroundColor:`${x.purple}0F`,borderColor:`${x.purple}30`}]}>
+            <Ve color={x.purple}size={18}/>
+            <V style={{flex:1}}>
+              <T style={e.gridCardTitle}>⭐ Star on GitHub</T>
+              <T style={e.gridCardSub}>Support open source</T>
+            </V>
+          </B>
+
+          <B onPress={()=>{R.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{})}}style={e.gridCard}>
+            <J color="#CB3837"size={18}/>
+            <V style={{flex:1}}>
+              <T style={e.gridCardTitle}>NPM Registry</T>
+              <T style={e.gridCardSub}>Package repository</T>
+            </V>
+          </B>
+
+          <B onPress={()=>{R.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector#readme").catch(()=>{})}}style={e.gridCard}>
+            <T style={{fontSize:16}}>📖</T>
+            <V style={{flex:1}}>
+              <T style={e.gridCardTitle}>Documentation</T>
+              <T style={e.gridCardSub}>Setup & API guide</T>
+            </V>
+          </B>
+
+          <B onPress={()=>{R.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector/issues").catch(()=>{})}}style={e.gridCard}>
+            <T style={{fontSize:16}}>🐞</T>
+            <V style={{flex:1}}>
+              <T style={e.gridCardTitle}>Report Issue</T>
+              <T style={e.gridCardSub}>Bugs & feature requests</T>
+            </V>
+          </B>
+
+          <B onPress={()=>{R.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector/releases").catch(()=>{})}}style={e.gridCard}>
+            <T style={{fontSize:16}}>🏷️</T>
+            <V style={{flex:1}}>
+              <T style={e.gridCardTitle}>Release Notes</T>
+              <T style={e.gridCardSub}>Version changelog</T>
+            </V>
+          </B>
+
+          <B onPress={K}style={e.gridCard}>
+            {F?<Ce color={x.emerald600}size={16}/>:<G color={x.purple}size={16}/>}
+            <V style={{flex:1}}>
+              <T style={e.gridCardTitle}>
+                {F?"Specs Copied!":"Copy Specs JSON"}
+              </T>
+              <T style={e.gridCardSub}>Diagnostics payload</T>
+            </V>
+          </B>
+        </V>
+
+        
+        <V style={e.sectionCard}>
+          <T style={e.sectionHeader}>PACKAGE VERSION & UPGRADES</T>
+
+          <V style={e.versionRow}>
+            <V style={e.versionLeft}>
+              <V style={e.npmIconBox}>
+                <J color="#CB3837"size={17}/>
+              </V>
+              <V style={{flex:1}}>
+                <V style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                  <T style={e.versionTitle}>v{A}</T>
+                  {f?<V style={e.updateBadge}>
+                      <T style={e.updateBadgeText}>
+                        v{v} Available
+                      </T>
+                      <P size={9}color="#D97706"/>
+                    </V>:<V style={e.upToDateBadge}>
+                      <T style={e.upToDateBadgeText}>Up to date</T>
+                    </V>}
+                </V>
+                <T style={e.versionSubtitle}>
+                  {f?`A newer release (v${v}) is available on npm registry.`:"You are running the latest version from npm registry."}
+                </T>
+              </V>
+            </V>
+
+            <B onPress={()=>{M("npm install react-native-inapp-inspector@latest","Install Command"),N("Copied npm install command!")}}style={[e.copyActionBtn,{backgroundColor:f?x.purple:`${x.purple}18`}]}>
+              <G color={f?x.white:x.purple}size={12}/>
+              <T style={[e.copyActionText,{color:f?x.white:x.purple}]}>
+                {f?"Copy Upgrade":"Copy Install"}
+              </T>
+            </B>
+          </V>
+        </V>
+
+        
+        <V style={e.sectionCard}>
+          <T style={e.sectionHeader}>HOST APPLICATION & BUILD</T>
+
+          <V style={{gap:8}}>
+            <V style={e.row}>
+              <T style={e.rowLabel}>Application Name</T>
+              <T style={e.rowValueBold}>{$()}</T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Bundle ID / Package</T>
+              <T style={e.rowValueRegular}>{O()}</T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Version & Build Number</T>
+              <T style={e.rowValueBold}>{U().formatted}</T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Build Variant</T>
+              <V style={[e.statusTag,{backgroundColor:__DEV__?`${x.amber500}20`:`${x.emerald500}20`,borderColor:__DEV__?`${x.amber500}50`:`${x.emerald500}50`}]}>
+                <T style={[e.statusTagText,{color:__DEV__?x.amber500:x.emerald600}]}>
+                  {__DEV__?"Development (Debug)":"Production (Release)"}
+                </T>
+              </V>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Metro Bundler Connection</T>
+              <T style={[e.rowValueBold,{color:z()?x.emerald600:x.grayText}]}>
+                {z()?"Connected (Hot Reload Active)":"Offline / Standalone"}
+              </T>
+            </V>
+          </V>
+        </V>
+
+        
+        <V style={e.sectionCard}>
+          <T style={e.sectionHeader}>FRAMEWORK & RUNTIME ENGINE</T>
+
+          <V style={{gap:8}}>
+            <V style={e.row}>
+              <T style={e.rowLabel}>React Native Version</T>
+              <T style={e.rowValueBold}>
+                v
+                {h.constants?.reactNativeVersion?.major!=null?`${h.constants.reactNativeVersion.major}.${h.constants.reactNativeVersion.minor}.${h.constants.reactNativeVersion.patch}`:"0.74+"}
+              </T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>React Core Version</T>
+              <T style={e.rowValueBold}>v{_.version}</T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>JavaScript Engine</T>
+              <V style={[e.statusTag,{backgroundColor:`${x.purple}15`,borderColor:`${x.purple}40`}]}>
+                <T style={[e.statusTagText,{color:x.purple,fontSize:10.5}]}>
+                  {global?.HermesInternal?"Hermes Engine (Active)":"JavaScriptCore (JSC)"}
+                </T>
+              </V>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Rendering Architecture</T>
+              <T style={e.rowValueBold}>
+                {global?.nativeFabricUIManager?"Fabric (New Architecture)":"Paper (Legacy Bridge)"}
+              </T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>TurboModules Support</T>
+              <T style={e.rowValueBold}>
+                {global?.__turboModuleProxy||global?.TurboModuleRegistry?"Enabled (C++ JSI)":"Standard Bridge"}
+              </T>
+            </V>
+          </V>
+        </V>
+
+        
+        <V style={e.sectionCard}>
+          <T style={e.sectionHeader}>DEVICE & DISPLAY METRICS</T>
+
+          <V style={{gap:8}}>
+            <V style={e.row}>
+              <T style={e.rowLabel}>Operating System</T>
+              <T style={e.rowValueBold}>
+                {h.OS==="ios"?"Apple iOS":h.OS==="android"?"Google Android":h.OS}{" "}
+                {h.Version}
+              </T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Device Hardware Model</T>
+              <T style={e.rowValueBold}>
+                {h.constants?.Model||(h.OS==="ios"?"Apple Device":"Android Device")}
+              </T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Window Viewport (Points)</T>
+              <T style={e.rowValueBold}>
+                {Math.round(I.get("window").width)} ×{" "}
+                {Math.round(I.get("window").height)} pt
+              </T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Native Physical Resolution</T>
+              <T style={e.rowValueBold}>
+                {Math.round(I.get("screen").width*S.get())}{" "}
+                ×{" "}
+                {Math.round(I.get("screen").height*S.get())}{" "}
+                px
+              </T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Pixel Density & Font Scale</T>
+              <T style={e.rowValueBold}>
+                {S.get().toFixed(1)}x (
+                {S.get()>=3?"@3x":S.get()>=2?"@2x":"@1x"}
+                ) • Font: {S.getFontScale().toFixed(2)}x
+              </T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Timezone & Locale</T>
+              <T style={e.rowValueBold}>
+                {Intl.DateTimeFormat().resolvedOptions().timeZone||"System"}{" "}
+                ({Intl.DateTimeFormat().resolvedOptions().locale||"en"})
+              </T>
+            </V>
+          </V>
+        </V>
+
+        
+        <V style={e.sectionCard}>
+          <T style={e.sectionHeader}>INSPECTOR STORAGE & CAPABILITIES</T>
+
+          <V style={{gap:8}}>
+            <V style={e.row}>
+              <T style={e.rowLabel}>Storage Persistence Engine</T>
+              <V style={[e.statusTag,{backgroundColor:D()?`${x.emerald500}18`:`${x.amber500}18`,borderColor:D()?`${x.emerald500}50`:`${x.amber500}50`}]}>
+                <T style={[e.statusTagText,{color:D()?x.emerald600:x.amber500}]}>
+                  {D()?"MMKV Fast Native Storage":"In-Memory State"}
+                </T>
+              </V>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Native Module Status</T>
+              <T style={[e.rowValueBold,{color:global?.NativeInspectorModule?x.emerald600:x.grayText}]}>
+                {global?.NativeInspectorModule?"Linked & Active":"JavaScript Only"}
+              </T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Network Logger Interceptor</T>
+              <T style={[e.rowValueBold,{color:x.emerald600}]}>
+                Active (XMLHttpRequest & Fetch Hooked)
+              </T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Redux & Analytics Watchers</T>
+              <T style={e.rowValueBold}>
+                Redux: {W()?"Connected":"Listening"} •
+                Analytics: {j()?"Connected":"Listening"}
+              </T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Crash & Exception Boundary</T>
+              <T style={[e.rowValueBold,{color:x.emerald600}]}>
+                Global JS Exception Handler Active
+              </T>
+            </V>
+
+            <V style={e.row}>
+              <T style={e.rowLabel}>Memory Management</T>
+              <T style={[e.rowValueBold,{color:x.emerald600}]}>
+                Dynamic Auto RAM Tiering Active
+              </T>
+            </V>
+          </V>
+        </V>
+
+        
+        <V style={e.sectionCard}>
+          <T style={e.sectionHeader}>LICENSE & CREDITS</T>
+
+          <V style={e.row}>
+            <T style={e.rowLabel}>License</T>
+            <T style={[e.rowValueBold,{color:x.emerald600}]}>
+              MIT Permissive Open Source
+            </T>
+          </V>
+
+          <V style={e.row}>
+            <T style={e.rowLabel}>Created & Maintained By</T>
+            <T style={e.rowValueBold}>Vengateswaran</T>
+          </V>
+
+          <V style={e.row}>
+            <T style={e.rowLabel}>Repository</T>
+            <T style={[e.rowValueRegular,{color:x.purple}]}>
+              github.com/vengatmacuser/react-native-inapp-inspector
+            </T>
+          </V>
+        </V>
+
+        <V style={{height:48}}/>
+      </Z>
+    </V>};export default AboutModal;const e=X.create({container:{flex:1,backgroundColor:x.grayBackground},scrollView:{flex:1},scrollContent:{padding:16,gap:14},heroCard:{backgroundColor:x.primaryLight,borderRadius:14,borderWidth:1,borderColor:x.grayBorderSecondary,padding:16,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:`${x.purple}1A`,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:`${x.purple}33`},heroTitleRow:{flexDirection:"row",alignItems:"center",gap:8,flexWrap:"wrap"},heroTitle:{fontFamily:C.interBold,fontSize:15,lineHeight:20,color:x.primaryBlack},versionBadge:{backgroundColor:`${x.purple}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:`${x.purple}33`},versionBadgeText:{fontFamily:C.interBold,fontSize:10,color:x.purple},updateBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:"#F59E0B20",paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:"#F59E0B60"},updateBadgeText:{fontFamily:C.interBold,fontSize:9.5,color:"#D97706"},upToDateBadge:{backgroundColor:`${x.emerald500}20`,paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:`${x.emerald500}50`},upToDateBadgeText:{fontFamily:C.interBold,fontSize:9.5,color:x.emerald600},heroPackageName:{fontFamily:C.interRegular,fontSize:11,lineHeight:15,color:x.grayText,marginTop:2},heroDescription:{fontFamily:C.interRegular,fontSize:11.5,lineHeight:16,color:x.grayText},upgradeBtn:{backgroundColor:x.purple,paddingVertical:8,paddingHorizontal:12,borderRadius:8,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6},upgradeBtnText:{fontFamily:C.interBold,fontSize:12,color:x.white},gridContainer:{flexDirection:"row",flexWrap:"wrap",gap:8},gridCard:{flex:1,minWidth:"47%",backgroundColor:x.primaryLight,borderRadius:12,borderWidth:1,borderColor:x.grayBorderSecondary,paddingVertical:10,paddingHorizontal:12,flexDirection:"row",alignItems:"center",gap:8},gridCardTitle:{fontFamily:C.interBold,fontSize:11.5,color:x.primaryBlack},gridCardSub:{fontFamily:C.interRegular,fontSize:9.5,color:x.grayText},sectionCard:{backgroundColor:x.primaryLight,borderRadius:14,borderWidth:1,borderColor:x.grayBorderSecondary,padding:14,gap:10},sectionHeader:{fontFamily:C.interBold,fontSize:11,lineHeight:14,color:x.grayTextWeak,letterSpacing:.8},versionRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},versionLeft:{flexDirection:"row",alignItems:"center",gap:10,flex:1,marginRight:8},npmIconBox:{width:34,height:34,borderRadius:9,backgroundColor:"#CB383715",alignItems:"center",justifyContent:"center"},versionTitle:{fontFamily:C.interBold,fontSize:14,lineHeight:18,color:x.primaryBlack},versionSubtitle:{fontFamily:C.interRegular,fontSize:11,lineHeight:15,color:x.grayText,marginTop:1},copyActionBtn:{paddingVertical:7,paddingHorizontal:11,borderRadius:8,flexDirection:"row",alignItems:"center",gap:5},copyActionText:{fontFamily:C.interBold,fontSize:11},row:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},rowLabel:{fontFamily:C.interRegular,fontSize:11.5,color:x.grayText},rowValueBold:{fontFamily:C.interBold,fontSize:11.5,color:x.primaryBlack},rowValueRegular:{fontFamily:C.interRegular,fontSize:11,color:x.primaryBlack},statusTag:{paddingHorizontal:6,paddingVertical:1.5,borderRadius:5,borderWidth:1},statusTagText:{fontFamily:C.interBold,fontSize:10}});