react-native-inapp-inspector 2.3.20 → 2.3.22

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

@@ -1,351 +1,243 @@
-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}>
+import"react";import{Platform as z,Linking as B,ScrollView as H,StyleSheet as A,Text as C,View as T}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as V}from"../../styles/AppFonts";import I from"../TouchableScale";import{useInspector as W}from"./InspectorContext";import{LIB_VERSION as F}from"../../constants/version";import{getAppName as L,getBundleIdentifier as $,getAppVersionAndBuild as _,copyToClipboard as v,showToast as P}from"../../helpers";import{PackageIcon as N,GitHubIcon as O,NpmIcon as E,BoltIcon as D,StarIcon as M,BookOpenIcon as U,BugIcon as G,TagIcon as Q,WifiIcon as Z,TerminalIcon as J,AnalyticsIcon as K,DatabaseIcon as X,CameraIcon as Y,CrashIcon as Te,ExternalLinkIcon as S,CopyIcon as Ce}from"../NetworkIcons";export const AboutModal=({onClose:Ve})=>{const{updateAvailable:k,latestNpmVersion:R}=W();return<T style={e.container}>
+      <H 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 style={e.heroCard}>
+          <T style={e.heroHeaderRow}>
+            <T style={e.heroBrandRow}>
+              <T style={e.heroIconBox}>
+                <N color={t.brandPurple}size={24}/>
+              </T>
+              <T style={{flex:1}}>
+                <T style={e.heroTitleRow}>
+                  <C style={e.heroTitle}>In-App Inspector</C>
+                  <T style={e.versionBadge}>
+                    <C style={e.versionBadgeText}>v{F}</C>
+                  </T>
+                  {k?<T style={e.updateBadge}>
+                      <C style={e.updateBadgeText}>
+                        v{R} Available
+                      </C>
+                      <D size={9}color={t.amber600}/>
+                    </T>:<T style={e.upToDateBadge}>
+                      <C style={e.upToDateBadgeText}>Up to date</C>
+                    </T>}
                 </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"}
+                <C style={e.heroPackageName}>
+                  react-native-inapp-inspector
+                </C>
               </T>
-              <T style={e.gridCardSub}>Diagnostics payload</T>
-            </V>
-          </B>
-        </V>
-
-        
-        <V style={e.sectionCard}>
-          <T style={e.sectionHeader}>PACKAGE VERSION & UPGRADES</T>
+            </T>
+          </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>
+          <C style={e.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.
+          </C>
 
-            <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>
+          {k&&<I onPress={()=>{v("npm install react-native-inapp-inspector@latest","Install Command"),P("Copied npm upgrade command!")}}style={e.upgradeBtn}>
+              <D size={12}color={t.white}/>
+              <C style={e.upgradeBtnText}>
+                Copy Upgrade Command (v{R})
+              </C>
+            </I>}
+        </T>
 
         
-        <V style={e.sectionCard}>
-          <T style={e.sectionHeader}>HOST APPLICATION & BUILD</T>
+        <T style={e.sectionCard}>
+          <C style={e.sectionHeader}>APP INFORMATION</C>
 
-          <V style={{gap:8}}>
-            <V style={e.row}>
-              <T style={e.rowLabel}>Application Name</T>
-              <T style={e.rowValueBold}>{$()}</T>
-            </V>
+          <T style={{gap:8}}>
+            <T style={e.row}>
+              <C style={e.rowLabel}>App Name</C>
+              <C style={e.rowValueBold}>{L()}</C>
+            </T>
 
-            <V style={e.row}>
-              <T style={e.rowLabel}>Bundle ID / Package</T>
-              <T style={e.rowValueRegular}>{O()}</T>
-            </V>
+            <T style={e.row}>
+              <C style={e.rowLabel}>Package Identifier</C>
+              <C style={e.rowValueRegular}>{$()}</C>
+            </T>
 
-            <V style={e.row}>
-              <T style={e.rowLabel}>Version & Build Number</T>
-              <T style={e.rowValueBold}>{U().formatted}</T>
-            </V>
+            <T style={e.row}>
+              <C style={e.rowLabel}>App Version</C>
+              <C style={e.rowValueBold}>
+                {_().formatted}
+              </C>
+            </T>
 
-            <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}]}>
+            <T style={e.row}>
+              <C style={e.rowLabel}>Environment</C>
+              <T style={[e.statusTag,{backgroundColor:__DEV__?`${t.amber500}20`:`${t.emerald500}20`,borderColor:__DEV__?`${t.amber500}50`:`${t.emerald500}50`}]}>
+                <C style={[e.statusTagText,{color:__DEV__?t.amber600:t.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)"}
+                </C>
               </T>
-            </V>
+            </T>
 
-            <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>
+            <T style={e.row}>
+              <C style={e.rowLabel}>Platform</C>
+              <C style={e.rowValueRegular}>
+                {z.OS==="ios"?"Apple iOS":"Google Android"}{" "}
+                (v{z.Version})
+              </C>
+            </T>
+          </T>
+        </T>
 
         
-        <V style={e.sectionCard}>
-          <T style={e.sectionHeader}>DEVICE & DISPLAY METRICS</T>
+        <T style={e.sectionCard}>
+          <C style={e.sectionHeader}>WHAT IN-APP INSPECTOR DOES</C>
 
-          <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 style={e.featuresList}>
+            <T style={e.featureItem}>
+              <T style={[e.featureIconBox,{backgroundColor:`${t.brandPurple}15`}]}>
+                <Z color={t.brandPurple}size={18}/>
               </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 style={e.featureTextBox}>
+                <C style={e.featureTitle}>Network Traffic Monitor</C>
+                <C style={e.featureDesc}>
+                  Inspect HTTP and HTTPS API requests, responses, headers, and
+                  server latency with waterfall timing charts.
+                </C>
               </T>
-            </V>
+            </T>
 
-            <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 style={e.featureItem}>
+              <T style={[e.featureIconBox,{backgroundColor:`${t.blue500}15`}]}>
+                <J color={t.blue500}size={18}/>
               </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 style={e.featureTextBox}>
+                <C style={e.featureTitle}>Console Logger</C>
+                <C style={e.featureDesc}>
+                  View real-time console logs, warnings, and errors with source
+                  file origins and formatted stack traces.
+                </C>
               </T>
-            </V>
+            </T>
 
-            <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 style={e.featureItem}>
+              <T style={[e.featureIconBox,{backgroundColor:`${t.firebaseOrange}15`}]}>
+                <K color={t.firebaseOrange}size={18}/>
               </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 style={e.featureTextBox}>
+                <C style={e.featureTitle}>Analytics Telemetry</C>
+                <C style={e.featureDesc}>
+                  Track Firebase and custom analytics events, screen views, and
+                  user properties live on the device.
+                </C>
               </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>
+            </T>
 
-            <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 style={e.featureItem}>
+              <T style={[e.featureIconBox,{backgroundColor:`${t.violet600}15`}]}>
+                <X color={t.violet600}size={18}/>
               </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 style={e.featureTextBox}>
+                <C style={e.featureTitle}>Redux State & Actions</C>
+                <C style={e.featureDesc}>
+                  Inspect dispatched actions, payloads, and state tree diffs
+                  without connecting desktop companion tools.
+                </C>
               </T>
-            </V>
+            </T>
 
-            <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 style={e.featureItem}>
+              <T style={[e.featureIconBox,{backgroundColor:`${t.teal600}15`}]}>
+                <Y color={t.teal600}size={18}/>
               </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 style={e.featureTextBox}>
+                <C style={e.featureTitle}>Screen & Video Capture</C>
+                <C style={e.featureDesc}>
+                  Take screenshots and record test sessions to share with QA and
+                  engineering teams instantly.
+                </C>
               </T>
-            </V>
+            </T>
 
-            <V style={e.row}>
-              <T style={e.rowLabel}>Memory Management</T>
-              <T style={[e.rowValueBold,{color:x.emerald600}]}>
-                Dynamic Auto RAM Tiering Active
+            <T style={e.featureItem}>
+              <T style={[e.featureIconBox,{backgroundColor:`${t.emerald600}15`}]}>
+                <Te color={t.emerald600}size={18}/>
               </T>
-            </V>
-          </V>
-        </V>
+              <T style={e.featureTextBox}>
+                <C style={e.featureTitle}>
+                  Crash Catcher & Diagnostics
+                </C>
+                <C style={e.featureDesc}>
+                  Protects against native crashes and provides device health
+                  metrics including RAM, battery, and storage.
+                </C>
+              </T>
+            </T>
+          </T>
+        </T>
 
         
-        <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 style={e.gridContainer}>
+          <I onPress={()=>{B.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector").catch(()=>{})}}style={[e.gridCard,{backgroundColor:`${t.brandPurple}0F`,borderColor:`${t.brandPurple}30`}]}>
+            <O color={t.brandPurple}size={18}/>
+            <T style={{flex:1}}>
+              <T style={{flexDirection:"row",alignItems:"center",gap:5}}>
+                <M color={t.amber500}size={13}/>
+                <C style={e.gridCardTitle}>GitHub</C>
+              </T>
+              <C style={e.gridCardSub}>Star & source code</C>
             </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
+            <S size={12}color={t.grayTextWeak}/>
+          </I>
+
+          <I onPress={()=>{B.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{})}}style={e.gridCard}>
+            <E color={t.npmRed}size={18}/>
+            <T style={{flex:1}}>
+              <C style={e.gridCardTitle}>NPM Registry</C>
+              <C style={e.gridCardSub}>Package updates</C>
+            </T>
+            <S size={12}color={t.grayTextWeak}/>
+          </I>
+
+          <I onPress={()=>{B.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector#readme").catch(()=>{})}}style={e.gridCard}>
+            <U color={t.brandPurple}size={18}/>
+            <T style={{flex:1}}>
+              <C style={e.gridCardTitle}>Documentation</C>
+              <C style={e.gridCardSub}>Integration guide</C>
+            </T>
+            <S size={12}color={t.grayTextWeak}/>
+          </I>
+
+          <I onPress={()=>{B.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector/issues").catch(()=>{})}}style={e.gridCard}>
+            <G color={t.errorColor}size={18}/>
+            <T style={{flex:1}}>
+              <C style={e.gridCardTitle}>Report Issue</C>
+              <C style={e.gridCardSub}>Help & support</C>
             </T>
-          </V>
-        </V>
+            <S size={12}color={t.grayTextWeak}/>
+          </I>
+
+          <I onPress={()=>{B.openURL("https://github.com/vengatmacuser/react-native-inapp-inspector/releases").catch(()=>{})}}style={e.gridCard}>
+            <Q color={t.successGreen}size={18}/>
+            <T style={{flex:1}}>
+              <C style={e.gridCardTitle}>Release Notes</C>
+              <C style={e.gridCardSub}>What's new</C>
+            </T>
+            <S size={12}color={t.grayTextWeak}/>
+          </I>
+
+          <I onPress={()=>{v("npm install react-native-inapp-inspector","NPM Command"),P("Copied package install command!")}}style={e.gridCard}>
+            <Ce color={t.brandPurple}size={16}/>
+            <T style={{flex:1}}>
+              <C style={e.gridCardTitle}>Copy Install</C>
+              <C style={e.gridCardSub}>npm / yarn command</C>
+            </T>
+          </I>
+        </T>
 
-        <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}});
+        
+        <T style={e.footer}>
+          <C style={e.footerText}>
+            React Native In-App Inspector · MIT License
+          </C>
+          <C style={e.footerSubText}>
+            Zero-config on-device debugging tool
+          </C>
+        </T>
+      </H>
+    </T>};const e=A.create({container:{flex:1,backgroundColor:t.grayBackground},scrollView:{flex:1},scrollContent:{padding:14,paddingBottom:32,gap:12},heroCard:{backgroundColor:t.primaryLight,borderRadius:14,padding:16,borderWidth:1,borderColor:t.dividerColor,shadowColor:t.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:`${t.brandPurple}15`,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:`${t.brandPurple}30`},heroTitleRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},heroTitle:{fontFamily:V.interBold,fontSize:17,lineHeight:22,color:t.primaryBlack,letterSpacing:-.3},versionBadge:{backgroundColor:`${t.brandPurple}18`,paddingHorizontal:7,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:`${t.brandPurple}30`},versionBadgeText:{fontFamily:V.interBold,fontSize:10,lineHeight:13,color:t.brandPurple},updateBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${t.amber500}20`,paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:`${t.amber500}50`},updateBadgeText:{fontFamily:V.interBold,fontSize:9.5,lineHeight:12,color:t.amber600},upToDateBadge:{backgroundColor:`${t.emerald500}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:`${t.emerald500}35`},upToDateBadgeText:{fontFamily:V.interMedium,fontSize:9.5,lineHeight:12,color:t.emerald600},heroPackageName:{fontFamily:V.interRegular,fontSize:12,lineHeight:16,color:t.grayTextWeak,marginTop:2},heroDescription:{fontFamily:V.interRegular,fontSize:13,lineHeight:18,color:t.grayText},upgradeBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,backgroundColor:t.brandPurple,paddingVertical:9,paddingHorizontal:12,borderRadius:8},upgradeBtnText:{fontFamily:V.interBold,fontSize:12,color:t.white},sectionCard:{backgroundColor:t.primaryLight,borderRadius:14,padding:14,borderWidth:1,borderColor:t.dividerColor,gap:10},sectionHeader:{fontFamily:V.interBold,fontSize:11,lineHeight:15,color:t.grayTextWeak,letterSpacing:.6},row:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:3},rowLabel:{fontFamily:V.interRegular,fontSize:12.5,lineHeight:17,color:t.grayTextWeak},rowValueBold:{fontFamily:V.interBold,fontSize:12.5,lineHeight:17,color:t.primaryBlack},rowValueRegular:{fontFamily:V.interRegular,fontSize:12.5,lineHeight:17,color:t.grayTextStrong},statusTag:{paddingHorizontal:7,paddingVertical:2,borderRadius:6,borderWidth:1},statusTagText:{fontFamily:V.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:V.interBold,fontSize:13,lineHeight:17,color:t.primaryBlack},featureDesc:{fontFamily:V.interRegular,fontSize:11.5,lineHeight:16,color:t.grayTextWeak},gridContainer:{flexDirection:"row",flexWrap:"wrap",gap:8},gridCard:{width:"48.5%",flexGrow:1,backgroundColor:t.primaryLight,borderRadius:10,padding:12,flexDirection:"row",alignItems:"center",gap:9,borderWidth:1,borderColor:t.dividerColor},gridCardTitle:{fontFamily:V.interBold,fontSize:12,lineHeight:16,color:t.primaryBlack},gridCardSub:{fontFamily:V.interRegular,fontSize:10,lineHeight:13,color:t.grayTextWeak},footer:{alignItems:"center",justifyContent:"center",paddingVertical:14,gap:3},footerText:{fontFamily:V.interMedium,fontSize:11,lineHeight:15,color:t.grayTextWeak},footerSubText:{fontFamily:V.interRegular,fontSize:10,lineHeight:14,color:t.slate400}});export default AboutModal;