react-native-inapp-inspector 2.5.12 → 2.5.13

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

@@ -0,0 +1,138 @@
+import ye,{useCallback as pe,useRef as be,useState as U}from"react";import{Dimensions as fe,PanResponder as Be,Platform as xe,ScrollView as Me,StyleSheet as E,Text as B,TouchableOpacity as O,View as M}from"react-native";import{useInspector as we}from"./InspectorContext";import{createInspectedElement as Ce,extractBoxModel as Se,getDynamicInspectorDataForPoint as Fe,auditAccessibility as ve}from"../../helpers/uiInspectorEngine";import{ActiveTab as Pe}from"../../types";import{AppColors as P}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{CloseIcon as Ie,LayersIcon as Te,RulerIcon as Ae}from"../NetworkIcons";import J from"../TouchableScale";import{takeNativeScreenshot as oe,triggerNativeHaptic as T}from"../../native/NativeInspector";export const UiInspectorOverlay=()=>{const{isInspectModeActive:ne,setIsInspectModeActive:K,selectedUiElement:t,setSelectedUiElement:V,showAlignmentGrid:W,setShowAlignmentGrid:ie,showDistanceGuides:ae,setShowDistanceGuides:Re,setVisible:re,switchActiveTab:le}=we(),[q,de]=U("top"),[N,Q]=U(!1),[se,G]=U(null),R=fe.get("window"),Z=pe(async x=>{const{pageX:F,pageY:v,locationX:I,locationY:Y}=x.nativeEvent,A=F??I??0,$=v??Y??0;try{const w=await Fe(A,$);if(w&&w.layout&&(w.layout.width>0||w.layout.height>0)){try{const te=await oe({rect:{x:Math.max(0,w.layout.pageX),y:Math.max(0,w.layout.pageY),width:Math.max(1,w.layout.width),height:Math.max(1,w.layout.height)},quality:.95,format:"png"});te?.uri&&(w.snapshotUri=te.uri)}catch{}G({x:w.layout.x,y:w.layout.y,width:w.layout.width,height:w.layout.height,componentName:w.displayName||w.componentName}),V(w),T();return}}catch{}const D=Math.round(Math.min(R.width-32,Math.max(48,A>R.width/2?(R.width-A)*1.5:A*1.5))),k=44,L=Math.max(0,Math.min(A-D/2,R.width-D)),H=Math.max(0,Math.min($-k/2,R.height-k));let ee;try{const w=await oe({rect:{x:Math.max(0,L),y:Math.max(0,H),width:Math.max(1,D),height:Math.max(1,k)},quality:.95,format:"png"});w?.uri&&(ee=w.uri)}catch{}const ce=Ce("View",{accessible:!0,style:{position:"absolute",left:Math.round(L),top:Math.round(H),width:D,height:k}},{x:Math.round(L),y:Math.round(H),width:D,height:k,pageX:Math.round(L),pageY:Math.round(H)},void 0,void 0,ee);G({x:Math.round(L),y:Math.round(H),width:D,height:k,componentName:"View"}),V(ce),T()},[R,V]),he=be(Be.create({onStartShouldSetPanResponder:()=>!0,onMoveShouldSetPanResponder:()=>!0,onPanResponderGrant:x=>Z(x),onPanResponderMove:x=>Z(x)})).current;if(!ne)return null;const C=se||(t?{x:t.layout.pageX,y:t.layout.pageY,width:t.layout.width,height:t.layout.height,componentName:t.componentName}:null),X=t?.hierarchy||[],ue=t?.flattenedStyles||{},z=t?.boxModel||{margin:{top:0,right:0,bottom:0,left:0},border:{top:0,right:0,bottom:0,left:0},padding:{top:0,right:0,bottom:0,left:0},content:{width:t?.layout.width||0,height:t?.layout.height||0}},_=Object.entries(ue).filter(([x,F])=>F==null||typeof F=="object"?!1:["overflow","fontSize","fontWeight","color","letterSpacing","lineHeight","backgroundColor","borderRadius","flexDirection","justifyContent","alignItems","flex","opacity","zIndex"].includes(x)),ge=x=>{if(!t||x.componentName===t.componentName)return;T();const F=x.props||{},v=x.styles||(F.style?E.flatten(F.style):{})||{},I=x.layout||{...t.layout,width:v.width||t.layout.width,height:v.height||t.layout.height},Y=Se(v,I),A=ve(F,I,v);V({...t,componentName:x.componentName,displayName:x.displayName,props:F,originalStyles:v,flattenedStyles:v,tweakedStyles:{},layout:I,boxModel:Y,a11y:A}),G({x:I.x??t.layout.x,y:I.y??t.layout.y,width:I.width,height:I.height,componentName:x.displayName||x.componentName})},me=()=>{T(),K(!1),le(Pe.Ui),re(!0)};return<M style={[E.absoluteFill,e.overlayContainer]}pointerEvents="box-none">
+      
+      <M style={E.absoluteFill}{...he.panHandlers}/>
+
+      
+      {W&&<M style={[E.absoluteFill,e.gridPattern]}pointerEvents="none"/>}
+
+      
+      {t&&<M style={[e.devToolsHudContainer,q==="top"?e.hudTop:e.hudBottom]}pointerEvents="box-none">
+          
+          <M style={e.hudBreadcrumbBar}>
+            <Me horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.hudBreadcrumbContent}>
+              {X.length>0?X.map((x,F)=>{const v=F===X.length-1||x.componentName===t.componentName;return<ye.Fragment key={x.id||F}>
+                      {F>0&&<B style={e.hudDotSeparator}>•</B>}
+                      <O style={[e.hudBreadcrumbChip,v&&e.hudBreadcrumbChipActive]}onPress={()=>ge(x)}>
+                        <B style={[e.hudBreadcrumbText,v&&e.hudBreadcrumbTextActive]}>
+                          {x.displayName||x.componentName}
+                        </B>
+                      </O>
+                    </ye.Fragment>}):<M style={e.hudBreadcrumbChipActive}>
+                  <B style={e.hudBreadcrumbTextActive}>
+                    {t.componentName}
+                  </B>
+                </M>}
+            </Me>
+
+            
+            <O style={e.hudFlipBtn}onPress={()=>{T(),de(q==="top"?"bottom":"top")}}>
+              <B style={e.hudFlipBtnText}>🔄</B>
+            </O>
+          </M>
+
+          
+          <M style={e.hudBodyRow}pointerEvents="none">
+            
+            <M style={e.hudStylesColumn}>
+              {_.length>0?_.slice(0,7).map(([x,F])=><M key={x}style={e.hudStyleRow}>
+                    <B style={e.hudStyleKey}>{x}:</B>
+                    <B style={e.hudStyleVal}numberOfLines={1}>
+                      {String(F)}
+                    </B>
+                  </M>):<M style={e.hudStyleRow}>
+                  <B style={e.hudStyleKey}>layout:</B>
+                  <B style={e.hudStyleVal}>default</B>
+                </M>}
+            </M>
+
+            
+            <M style={e.hudBoxModelWrapper}>
+              <M style={e.boxModelMarginLayer}>
+                <B style={e.boxModelMarginLabel}>margin</B>
+                <B style={e.boxModelInsetTop}>{z.margin.top}</B>
+                <B style={e.boxModelInsetRight}>{z.margin.right}</B>
+                <B style={e.boxModelInsetBottom}>{z.margin.bottom}</B>
+                <B style={e.boxModelInsetLeft}>{z.margin.left}</B>
+
+                <M style={e.boxModelPaddingLayer}>
+                  <B style={e.boxModelPaddingLabel}>padding</B>
+                  <B style={e.boxModelInsetTop}>{z.padding.top}</B>
+                  <B style={e.boxModelInsetRight}>{z.padding.right}</B>
+                  <B style={e.boxModelInsetBottom}>{z.padding.bottom}</B>
+                  <B style={e.boxModelInsetLeft}>{z.padding.left}</B>
+
+                  <M style={e.boxModelContentLayer}>
+                    <B style={e.boxModelCoords}>
+                      ({Math.round(t.layout.pageX)},{" "}
+                      {Math.round(t.layout.pageY)})
+                    </B>
+                    <B style={e.boxModelDimensions}>
+                      {Math.round(t.layout.width)} ×{" "}
+                      {Math.round(t.layout.height)}
+                    </B>
+                  </M>
+                </M>
+              </M>
+            </M>
+          </M>
+        </M>}
+
+      
+      {C&&<M pointerEvents="none"style={[e.highlightBox,{top:C.y,left:C.x,width:C.width,height:C.height}]}>
+          
+          <M style={e.contentTint}/>
+
+          
+          <M style={[e.elementBadge,C.y<50?e.elementBadgeBottom:e.elementBadgeTop]}>
+            <B style={e.elementBadgeTag}>&lt;{C.componentName}&gt;</B>
+            <B style={e.elementBadgeDim}>
+              {Math.round(C.width)} × {Math.round(C.height)} pt
+            </B>
+          </M>
+        </M>}
+
+      
+      {ae&&C&&<M style={E.absoluteFill}pointerEvents="none">
+          
+          <M style={[e.guideLineV,{top:0,left:C.x+C.width/2,height:C.y}]}>
+            <B style={e.guideBadge}>{Math.round(C.y)} pt</B>
+          </M>
+
+          
+          <M style={[e.guideLineH,{top:C.y+C.height/2,left:0,width:C.x}]}>
+            <B style={e.guideBadge}>{Math.round(C.x)} pt</B>
+          </M>
+        </M>}
+
+      
+      <M style={e.hudToolbar}>
+        <M style={e.hudLeftGroup}>
+          <O style={[e.modePillBtn,!N&&e.modePillBtnActive]}onPress={()=>{T(),Q(!1)}}>
+            <B style={[e.modePillText,!N&&e.modePillTextActive]}>
+              Inspect
+            </B>
+          </O>
+
+          <O style={[e.modePillBtn,N&&e.modePillBtnActive]}onPress={()=>{T(),Q(!N)}}>
+            <B style={[e.modePillText,N&&e.modePillTextActive]}>
+              Touchables
+            </B>
+          </O>
+        </M>
+
+        <M style={e.hudActions}>
+          <J style={[e.hudBtn,W&&e.hudBtnActive]}onPress={()=>{T(),ie(!W)}}>
+            <Ae color={W?P.white:"#CBD5E1"}size={14}/>
+          </J>
+
+          {t&&<J style={[e.hudBtn,e.hudBtnPrimary]}onPress={me}>
+              <Te color={P.white}size={13}/>
+              <B style={e.hudBtnPrimaryText}>Full JSX & Specs</B>
+            </J>}
+
+          <J style={[e.hudBtn,e.hudBtnClose]}onPress={()=>{T(),K(!1)}}>
+            <Ie color={P.white}size={13}/>
+          </J>
+        </M>
+      </M>
+    </M>};const e=E.create({overlayContainer:{zIndex:99999999,elevation:99999999},gridPattern:{backgroundColor:"transparent",borderWidth:0,opacity:.15},devToolsHudContainer:{position:"absolute",left:0,right:0,backgroundColor:"rgba(15, 23, 42, 0.88)",paddingTop:xe.OS==="ios"?44:20,paddingBottom:10,paddingHorizontal:12,borderBottomWidth:1,borderBottomColor:"rgba(255, 255, 255, 0.12)",zIndex:999999999,shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.4,shadowRadius:8,elevation:12},hudTop:{top:0},hudBottom:{bottom:60,borderTopWidth:1,borderTopColor:"rgba(255, 255, 255, 0.12)",paddingTop:10},hudBreadcrumbBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8},hudBreadcrumbContent:{alignItems:"center",gap:4,paddingRight:10},hudDotSeparator:{color:"#94A3B8",fontSize:12,paddingHorizontal:2},hudBreadcrumbChip:{paddingHorizontal:6,paddingVertical:2.5,borderRadius:4},hudBreadcrumbChipActive:{backgroundColor:"rgba(255, 255, 255, 0.18)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.35)"},hudBreadcrumbText:{color:"#CBD5E1",fontSize:11,fontFamily:S.medium},hudBreadcrumbTextActive:{color:"#FFFFFF",fontFamily:S.bold},hudFlipBtn:{padding:4,borderRadius:4,backgroundColor:"rgba(255, 255, 255, 0.12)"},hudFlipBtnText:{fontSize:12},hudBodyRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"flex-start",marginTop:4},hudStylesColumn:{flex:1,paddingRight:8,gap:2},hudStyleRow:{flexDirection:"row",alignItems:"center",gap:4},hudStyleKey:{color:"#94A3B8",fontSize:10,fontFamily:S.regular},hudStyleVal:{color:"#F8FAFC",fontSize:10,fontFamily:S.bold},hudBoxModelWrapper:{width:140,height:90,alignItems:"center",justifyContent:"center"},boxModelMarginLayer:{width:"100%",height:"100%",borderWidth:1,borderColor:"rgba(245, 158, 11, 0.6)",backgroundColor:"rgba(245, 158, 11, 0.08)",borderRadius:4,alignItems:"center",justifyContent:"center",position:"relative",padding:12},boxModelMarginLabel:{position:"absolute",top:2,left:4,fontSize:8,fontFamily:S.bold,color:"#F59E0B"},boxModelPaddingLayer:{width:"100%",height:"100%",borderWidth:1,borderColor:"rgba(251, 191, 36, 0.6)",backgroundColor:"rgba(251, 191, 36, 0.08)",borderRadius:3,alignItems:"center",justifyContent:"center",position:"relative",padding:6},boxModelPaddingLabel:{position:"absolute",top:1,left:3,fontSize:7.5,fontFamily:S.bold,color:"#FBBF24"},boxModelContentLayer:{alignItems:"center",justifyContent:"center"},boxModelCoords:{color:"#FACC15",fontSize:8,fontFamily:S.bold},boxModelDimensions:{color:"#FACC15",fontSize:9,fontFamily:S.bold},boxModelInsetTop:{position:"absolute",top:1,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:S.medium},boxModelInsetBottom:{position:"absolute",bottom:1,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:S.medium},boxModelInsetLeft:{position:"absolute",left:2,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:S.medium},boxModelInsetRight:{position:"absolute",right:2,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:S.medium},highlightBox:{position:"absolute",borderWidth:1.5,borderColor:"#4F46E5",backgroundColor:"rgba(79, 70, 229, 0.15)",borderRadius:4,zIndex:100},contentTint:{flex:1,backgroundColor:"rgba(16, 185, 129, 0.1)",margin:3,borderRadius:2,borderWidth:1,borderColor:"rgba(16, 185, 129, 0.35)",borderStyle:"dashed"},elementBadge:{position:"absolute",flexDirection:"row",alignItems:"center",gap:6,backgroundColor:"rgba(15, 23, 42, 0.85)",paddingHorizontal:7,paddingVertical:3.5,borderRadius:5,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.2)"},elementBadgeTop:{top:-26,left:0},elementBadgeBottom:{bottom:-26,left:0},elementBadgeTag:{fontSize:10.5,fontFamily:S.bold,color:"#818CF8"},elementBadgeDim:{fontSize:9.5,fontFamily:S.medium,color:"#E2E8F0"},guideLineV:{position:"absolute",width:1,backgroundColor:"#EF4444",alignItems:"center",justifyContent:"center"},guideLineH:{position:"absolute",height:1,backgroundColor:"#EF4444",alignItems:"center",justifyContent:"center"},guideBadge:{backgroundColor:"#EF4444",color:P.white,fontSize:9,fontFamily:S.bold,paddingHorizontal:4,paddingVertical:1,borderRadius:3},hudToolbar:{position:"absolute",bottom:24,left:14,right:14,backgroundColor:"rgba(15, 23, 42, 0.92)",borderRadius:12,paddingHorizontal:12,paddingVertical:8,flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.15)",shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.4,shadowRadius:8,elevation:10},hudLeftGroup:{flexDirection:"row",alignItems:"center",gap:4},modePillBtn:{paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:"rgba(255, 255, 255, 0.08)"},modePillBtnActive:{backgroundColor:P.brandPurple},modePillText:{fontSize:10.5,fontFamily:S.medium,color:"#94A3B8"},modePillTextActive:{color:P.white,fontFamily:S.bold},hudActions:{flexDirection:"row",alignItems:"center",gap:6},hudBtn:{paddingHorizontal:8,paddingVertical:5,borderRadius:6,backgroundColor:"rgba(255, 255, 255, 0.1)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.15)",alignItems:"center",justifyContent:"center"},hudBtnActive:{backgroundColor:P.brandPurple,borderColor:P.brandPurple},hudBtnPrimary:{flexDirection:"row",gap:4,backgroundColor:P.brandPurple,borderColor:P.brandPurple},hudBtnPrimaryText:{fontSize:10.5,fontFamily:S.bold,color:P.white},hudBtnClose:{backgroundColor:"#E11D48",borderColor:"#E11D48"}});

package/dist/esm/components/Inspector/UiInspectorTab.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const UiInspectorTab: React.FC;

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

@@ -0,0 +1,117 @@
+import"react";import{ScrollView as G,StyleSheet as A,Text as C,TouchableOpacity as B,View as T}from"react-native";import{useInspector as v}from"./InspectorContext";import{ChevronIcon as M,EmptyRadarIcon as N,InspectPointerIcon as O,LayersIcon as U,RulerIcon as J,SlidersIcon as X,TrashIcon as Y}from"../NetworkIcons";import P from"../TouchableScale";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as f}from"../../styles/AppFonts";import{triggerNativeHaptic as w}from"../../native/NativeInspector";import{showToast as W}from"../../helpers/toast";import{BoxModelVisualizer as K}from"./BoxModelVisualizer";export const UiInspectorTab=()=>{const{selectedUiElement:S,setSelectedUiElement:D,setIsInspectModeActive:E,setVisible:H,showAlignmentGrid:I,setShowAlignmentGrid:L,uiInspectorHistory:F,clearUiInspectorHistory:V}=v(),z=()=>{w(),H(!1),E(!0),W("Touch anywhere to inspect JSX components")};return<G showsVerticalScrollIndicator={!1}contentContainerStyle={e.container}>
+      
+      <T style={e.heroCard}>
+        <T style={e.heroLeft}>
+          <T style={e.heroIconBadge}>
+            <O color={t.white}size={22}/>
+          </T>
+          <T style={e.heroTextGroup}>
+            <C style={e.heroTitle}>Inspect Elements On Screen</C>
+            <C style={e.heroSubtitle}>
+              Tap, drag, and highlight rendered JSX components to inspect styles, props & box model in real-time.
+            </C>
+          </T>
+        </T>
+
+        <P style={e.heroButton}onPress={z}>
+          <U color={t.brandPurple}size={16}/>
+          <C style={e.heroButtonText}>Start Inspect Mode</C>
+        </P>
+      </T>
+
+      
+      {S?<T style={e.selectedCard}>
+          <T style={e.selectedHeader}>
+            <T style={e.selectedTitleGroup}>
+              <T style={e.tagBadge}>
+                <C style={e.tagBadgeText}>&lt;{S.componentName}&gt;</C>
+              </T>
+              <C style={e.dimensionsBadge}>
+                {Math.round(S.layout.width)} × {Math.round(S.layout.height)} pt
+              </C>
+            </T>
+
+            <T style={e.a11yScoreBadge}>
+              <C style={[e.a11yScoreText,S.a11y.hasValidTouchTarget?e.a11yScoreTextPass:e.a11yScoreTextWarn]}>
+                {S.a11y.hasValidTouchTarget?"A11y Pass":"A11y Warning"}
+              </C>
+            </T>
+          </T>
+
+          
+          <K boxModel={S.boxModel}compact/>
+
+          
+          <T style={e.metricsBar}>
+            <T style={e.metricChip}>
+              <C style={e.metricChipLabel}>Props:</C>
+              <C style={e.metricChipValue}>
+                {Object.keys(S.props).length}
+              </C>
+            </T>
+            <T style={e.metricChip}>
+              <C style={e.metricChipLabel}>Styles:</C>
+              <C style={e.metricChipValue}>
+                {Object.keys(S.flattenedStyles).length}
+              </C>
+            </T>
+            <T style={e.metricChip}>
+              <C style={e.metricChipLabel}>Depth:</C>
+              <C style={e.metricChipValue}>
+                {S.hierarchy.length} levels
+              </C>
+            </T>
+          </T>
+        </T>:<T style={e.emptyCard}>
+          <N color={t.grayTextWeak}size={32}/>
+          <C style={e.emptyCardTitle}>No Element Selected</C>
+          <C style={e.emptyCardSubtitle}>
+            Launch Inspect Mode to select an on-screen JSX component.
+          </C>
+        </T>}
+
+      
+      <T style={e.toolsSection}>
+        <C style={e.sectionHeader}>DESIGN & ALIGNMENT TOOLS</C>
+        <T style={e.toolsGrid}>
+          <B style={[e.toolCard,I&&e.toolCardActive]}onPress={()=>{w(),L(!I)}}>
+            <J color={I?t.brandPurple:t.slate600}size={18}/>
+            <C style={[e.toolCardTitle,I&&e.toolCardTitleActive]}>
+              8pt Grid Guide
+            </C>
+            <C style={e.toolCardSub}>
+              {I?"Enabled":"Disabled"}
+            </C>
+          </B>
+
+          <B style={e.toolCard}onPress={z}>
+            <X color={t.brandPurple}size={18}/>
+            <C style={e.toolCardTitle}>Live Tweaker</C>
+            <C style={e.toolCardSub}>Sandbox Styles</C>
+          </B>
+        </T>
+      </T>
+
+      
+      {F.length>0&&<T style={e.historySection}>
+          <T style={e.historyHeader}>
+            <C style={e.sectionHeader}>RECENTLY INSPECTED ({F.length})</C>
+            <P style={e.clearHistoryBtn}onPress={()=>{w(),V(),W("Cleared inspection history")}}>
+              <Y color={t.grayTextWeak}size={12}/>
+              <C style={e.clearHistoryBtnText}>Clear</C>
+            </P>
+          </T>
+
+          <T style={e.historyList}>
+            {F.map((x,R)=><B key={x.id||R}style={e.historyItem}onPress={()=>{w(),D(x)}}>
+                <T style={e.historyItemLeft}>
+                  <C style={e.historyItemTag}>&lt;{x.componentName}&gt;</C>
+                  <C style={e.historyItemDim}>
+                    {Math.round(x.layout.width)} × {Math.round(x.layout.height)} pt
+                  </C>
+                </T>
+                <M color={t.grayTextWeak}size={12}direction="right"/>
+              </B>)}
+          </T>
+        </T>}
+    </G>};const e=A.create({container:{padding:12,gap:12},heroCard:{backgroundColor:t.brandPurple,borderRadius:14,padding:16,gap:14,shadowColor:t.brandPurple,shadowOffset:{width:0,height:4},shadowOpacity:.25,shadowRadius:8,elevation:4},heroLeft:{flexDirection:"row",gap:12,alignItems:"flex-start"},heroIconBadge:{width:40,height:40,borderRadius:10,backgroundColor:"#FFFFFF22",alignItems:"center",justifyContent:"center"},heroTextGroup:{flex:1},heroTitle:{fontSize:16,fontFamily:f.bold,color:t.white,marginBottom:4},heroSubtitle:{fontSize:12,fontFamily:f.medium,color:"#EEF2FF",lineHeight:17},heroButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:t.white,paddingVertical:10,borderRadius:10,gap:8},heroButtonText:{fontSize:13,fontFamily:f.bold,color:t.brandPurple},selectedCard:{backgroundColor:t.white,borderRadius:12,padding:14,borderWidth:1,borderColor:t.grayBorderSecondary,gap:10},selectedHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},selectedTitleGroup:{flexDirection:"row",alignItems:"center",gap:8},tagBadge:{backgroundColor:"#4F46E518",paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1,borderColor:"#4F46E533"},tagBadgeText:{fontSize:13,fontFamily:f.bold,color:t.brandPurple},dimensionsBadge:{fontSize:12,fontFamily:f.medium,color:t.grayTextWeak},a11yScoreBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:5,backgroundColor:t.slate100},a11yScoreText:{fontSize:10,fontFamily:f.bold},a11yScoreTextPass:{color:"#059669"},a11yScoreTextWarn:{color:"#D97706"},metricsBar:{flexDirection:"row",backgroundColor:t.slate50,borderRadius:8,padding:8,justifyContent:"space-around"},metricChip:{flexDirection:"row",gap:4,alignItems:"center"},metricChipLabel:{fontSize:11,fontFamily:f.medium,color:t.grayTextWeak},metricChipValue:{fontSize:11,fontFamily:f.bold,color:t.slate900},emptyCard:{backgroundColor:t.white,borderRadius:12,padding:24,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:t.grayBorderSecondary,borderStyle:"dashed",gap:6},emptyCardTitle:{fontSize:14,fontFamily:f.semiBold,color:t.slate700,marginTop:4},emptyCardSubtitle:{fontSize:12,fontFamily:f.medium,color:t.grayTextWeak,textAlign:"center"},sectionHeader:{fontSize:10,fontFamily:f.bold,color:t.grayTextWeak,letterSpacing:.8},toolsSection:{gap:8},toolsGrid:{flexDirection:"row",gap:10},toolCard:{flex:1,backgroundColor:t.white,borderRadius:10,padding:12,borderWidth:1,borderColor:t.grayBorderSecondary,gap:4},toolCardActive:{borderColor:t.brandPurple,backgroundColor:"#EEF2FF"},toolCardTitle:{fontSize:12,fontFamily:f.semiBold,color:t.slate900,marginTop:4},toolCardTitleActive:{color:t.brandPurple},toolCardSub:{fontSize:10,fontFamily:f.medium,color:t.grayTextWeak},historySection:{gap:8,marginTop:4},historyHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},clearHistoryBtn:{flexDirection:"row",alignItems:"center",gap:4},clearHistoryBtnText:{fontSize:10,fontFamily:f.medium,color:t.grayTextWeak},historyList:{backgroundColor:t.white,borderRadius:10,borderWidth:1,borderColor:t.grayBorderSecondary,overflow:"hidden"},historyItem:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:t.slate100},historyItemLeft:{flexDirection:"row",alignItems:"center",gap:8},historyItemTag:{fontSize:12,fontFamily:f.bold,color:t.brandPurple},historyItemDim:{fontSize:11,fontFamily:f.medium,color:t.grayTextWeak}});

package/dist/esm/components/Inspector/UiLiveStyleTweaker.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface UiLiveStyleTweakerProps {
+    componentName: string;
+    originalStyles: Record<string, any>;
+    tweakedStyles: Record<string, any>;
+    onApplyStyle: (key: string, value: any) => void;
+    onResetStyles: () => void;
+}
+export declare const UiLiveStyleTweaker: React.FC<UiLiveStyleTweakerProps>;
+export {};

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

@@ -0,0 +1,148 @@
+import"react";import{ScrollView as G,StyleSheet as M,Text as B,TouchableOpacity as R,View as T}from"react-native";import{AppColors as w}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{RotateCcwIcon as O,SlidersIcon as N,CopyIcon as U}from"../NetworkIcons";import W from"../TouchableScale";import{generateStyleSheetSnippet as q}from"../../helpers/uiInspectorEngine";import{triggerNativeHaptic as C}from"../../native/NativeInspector";import{showToast as P}from"../../helpers/toast";import J from"@react-native-clipboard/clipboard";const K=["#4F46E5","#7C3AED","#2563EB","#0D9488","#10B981","#F59E0B","#E11D48","#0F172A","#F8FAFC","#FFFFFF","transparent"];export const UiLiveStyleTweaker=({componentName:k,originalStyles:z,tweakedStyles:D,onApplyStyle:F,onResetStyles:A})=>{const f={...z,...D},I=Object.keys(D).length>0,V=()=>{const x=q(k,f);J.setString(x),C(),P("Copied tweaked StyleSheet to clipboard")},h=(x,E,v=0)=>{const H=typeof f[x]=="number"?f[x]:0,L=Math.max(v,H+E);F(x,L),C()};return<G showsVerticalScrollIndicator={!1}contentContainerStyle={e.container}>
+      
+      <T style={e.topActionsRow}>
+        <T style={e.titleWithBadge}>
+          <N color={w.brandPurple}size={18}/>
+          <B style={e.sectionTitle}>Live Style Sandbox</B>
+          {I&&<T style={e.modifiedBadge}>
+              <B style={e.modifiedBadgeText}>MODIFIED</B>
+            </T>}
+        </T>
+
+        <T style={e.actionButtonsGroup}>
+          {I&&<W style={e.resetButton}onPress={()=>{A(),C(),P("Reset styles to original")}}>
+              <O color="#E11D48"size={14}/>
+              <B style={e.resetButtonText}>Reset</B>
+            </W>}
+
+          <W style={e.exportButton}onPress={V}>
+            <U color={w.white}size={14}/>
+            <B style={e.exportButtonText}>Copy CSS</B>
+          </W>
+        </T>
+      </T>
+
+      
+      <T style={e.card}>
+        <B style={e.cardHeader}>Padding & Margin</B>
+
+        <T style={e.controlRow}>
+          <B style={e.controlLabel}>Padding</B>
+          <T style={e.stepperContainer}>
+            <R style={e.stepperBtn}onPress={()=>h("padding",-2)}>
+              <B style={e.stepperBtnText}>-</B>
+            </R>
+            <B style={e.stepperValue}>{f.padding??0} pt</B>
+            <R style={e.stepperBtn}onPress={()=>h("padding",2)}>
+              <B style={e.stepperBtnText}>+</B>
+            </R>
+          </T>
+        </T>
+
+        <T style={e.controlRow}>
+          <B style={e.controlLabel}>Margin</B>
+          <T style={e.stepperContainer}>
+            <R style={e.stepperBtn}onPress={()=>h("margin",-2)}>
+              <B style={e.stepperBtnText}>-</B>
+            </R>
+            <B style={e.stepperValue}>{f.margin??0} pt</B>
+            <R style={e.stepperBtn}onPress={()=>h("margin",2)}>
+              <B style={e.stepperBtnText}>+</B>
+            </R>
+          </T>
+        </T>
+
+        <T style={e.controlRow}>
+          <B style={e.controlLabel}>Gap</B>
+          <T style={e.stepperContainer}>
+            <R style={e.stepperBtn}onPress={()=>h("gap",-2)}>
+              <B style={e.stepperBtnText}>-</B>
+            </R>
+            <B style={e.stepperValue}>{f.gap??0} pt</B>
+            <R style={e.stepperBtn}onPress={()=>h("gap",2)}>
+              <B style={e.stepperBtnText}>+</B>
+            </R>
+          </T>
+        </T>
+      </T>
+
+      
+      <T style={e.card}>
+        <B style={e.cardHeader}>Borders & Corners</B>
+
+        <T style={e.controlRow}>
+          <B style={e.controlLabel}>Border Radius</B>
+          <T style={e.stepperContainer}>
+            <R style={e.stepperBtn}onPress={()=>h("borderRadius",-2)}>
+              <B style={e.stepperBtnText}>-</B>
+            </R>
+            <B style={e.stepperValue}>{f.borderRadius??0} pt</B>
+            <R style={e.stepperBtn}onPress={()=>h("borderRadius",2)}>
+              <B style={e.stepperBtnText}>+</B>
+            </R>
+          </T>
+        </T>
+
+        <T style={e.controlRow}>
+          <B style={e.controlLabel}>Border Width</B>
+          <T style={e.stepperContainer}>
+            <R style={e.stepperBtn}onPress={()=>h("borderWidth",-1)}>
+              <B style={e.stepperBtnText}>-</B>
+            </R>
+            <B style={e.stepperValue}>{f.borderWidth??0} pt</B>
+            <R style={e.stepperBtn}onPress={()=>h("borderWidth",1)}>
+              <B style={e.stepperBtnText}>+</B>
+            </R>
+          </T>
+        </T>
+      </T>
+
+      
+      <T style={e.card}>
+        <B style={e.cardHeader}>Typography</B>
+
+        <T style={e.controlRow}>
+          <B style={e.controlLabel}>Font Size</B>
+          <T style={e.stepperContainer}>
+            <R style={e.stepperBtn}onPress={()=>h("fontSize",-1,8)}>
+              <B style={e.stepperBtnText}>-</B>
+            </R>
+            <B style={e.stepperValue}>{f.fontSize??14} pt</B>
+            <R style={e.stepperBtn}onPress={()=>h("fontSize",1)}>
+              <B style={e.stepperBtnText}>+</B>
+            </R>
+          </T>
+        </T>
+
+        <T style={e.segmentedRow}>
+          <B style={e.controlLabel}>Weight</B>
+          <T style={e.segmentedGroup}>
+            {["normal","500","600","bold"].map(x=><R key={x}style={[e.segmentItem,f.fontWeight===x&&e.segmentItemActive]}onPress={()=>{F("fontWeight",x),C()}}>
+                <B style={[e.segmentText,f.fontWeight===x&&e.segmentTextActive]}>
+                  {x}
+                </B>
+              </R>)}
+          </T>
+        </T>
+      </T>
+
+      
+      <T style={e.card}>
+        <B style={e.cardHeader}>Background Color</B>
+        <T style={e.paletteGrid}>
+          {K.map(x=><R key={x}style={[e.colorSwatch,{backgroundColor:x},f.backgroundColor===x&&e.colorSwatchActive]}onPress={()=>{F("backgroundColor",x),C()}}/>)}
+        </T>
+      </T>
+
+      
+      <T style={e.card}>
+        <B style={e.cardHeader}>Opacity & Elevation</B>
+        <T style={e.segmentedGroup}>
+          {[1,.8,.6,.4,.2].map(x=><R key={x}style={[e.segmentItem,f.opacity===x&&e.segmentItemActive]}onPress={()=>{F("opacity",x),C()}}>
+              <B style={[e.segmentText,f.opacity===x&&e.segmentTextActive]}>
+                {Math.round(x*100)}%
+              </B>
+            </R>)}
+        </T>
+      </T>
+    </G>};const e=M.create({container:{paddingVertical:6,gap:10},topActionsRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:4},titleWithBadge:{flexDirection:"row",alignItems:"center",gap:6},sectionTitle:{fontSize:14,fontFamily:S.semiBold,color:w.slate900},modifiedBadge:{backgroundColor:"#F59E0B22",paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:"#F59E0B55"},modifiedBadgeText:{fontSize:9,fontFamily:S.bold,color:"#D97706"},actionButtonsGroup:{flexDirection:"row",gap:8},resetButton:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:"#E11D4811",borderWidth:1,borderColor:"#E11D4833",paddingHorizontal:8,paddingVertical:5,borderRadius:6},resetButtonText:{fontSize:11,fontFamily:S.semiBold,color:"#E11D48"},exportButton:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:w.brandPurple,paddingHorizontal:10,paddingVertical:5,borderRadius:6},exportButtonText:{fontSize:11,fontFamily:S.semiBold,color:w.white},card:{backgroundColor:w.white,borderRadius:12,padding:12,borderWidth:1,borderColor:w.grayBorderSecondary,gap:8},cardHeader:{fontSize:12,fontFamily:S.semiBold,color:w.slate700,marginBottom:2},controlRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},controlLabel:{fontSize:12,fontFamily:S.medium,color:w.slate600},stepperContainer:{flexDirection:"row",alignItems:"center",gap:8,backgroundColor:w.slate50,borderRadius:6,padding:2},stepperBtn:{width:28,height:28,backgroundColor:w.white,borderRadius:5,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:w.grayBorderSecondary},stepperBtnText:{fontSize:15,fontFamily:S.bold,color:w.slate900},stepperValue:{fontSize:12,fontFamily:S.semiBold,color:w.slate900,minWidth:44,textAlign:"center"},segmentedRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},segmentedGroup:{flexDirection:"row",backgroundColor:w.slate100,borderRadius:8,padding:2,gap:2},segmentItem:{paddingHorizontal:10,paddingVertical:5,borderRadius:6},segmentItemActive:{backgroundColor:w.brandPurple},segmentText:{fontSize:11,fontFamily:S.medium,color:w.slate600},segmentTextActive:{color:w.white,fontFamily:S.semiBold},paletteGrid:{flexDirection:"row",flexWrap:"wrap",gap:8},colorSwatch:{width:28,height:28,borderRadius:6,borderWidth:1,borderColor:w.grayBorderSecondary},colorSwatchActive:{borderColor:w.brandPurple,borderWidth:3}});

package/dist/esm/components/Inspector/index.d.ts

@@ -0,0 +1,28 @@
+export { default as MainScreen } from './MainScreen';
+export { default as TabBar } from './TabBar';
+export { default as InspectorHeader } from './InspectorHeader';
+export { default as FabLauncher } from './FabLauncher';
+export { default as NetworkTab } from './NetworkTab';
+export { default as NetworkDetail } from './NetworkDetail';
+export { default as ConsoleTab } from './ConsoleTab';
+export { default as LogDetail } from './LogDetail';
+export { PerformanceTab } from './PerformanceTab';
+export { default as AnalyticsTab } from './AnalyticsTab';
+export { default as ReduxTab } from './ReduxTab';
+export { default as ReduxDetail } from './ReduxDetail';
+export { default as CrashTab } from './CrashTab';
+export { default as CrashDetail } from './CrashDetail';
+export { default as PushTab } from './PushTab';
+export { default as PushDetail } from './PushDetail';
+export { default as SocketTab } from './SocketTab';
+export { default as SocketDetail } from './SocketDetail';
+export { default as DeviceInfoTab } from './DeviceInfoTab';
+export { default as StorageTab } from './StorageTab';
+export { default as DebuggingTab } from './DebuggingTab';
+export { MediaGalleryTab } from './MediaGalleryTab';
+export { default as SettingsPanel } from './SettingsPanel';
+export { UiInspectorTab } from './UiInspectorTab';
+export { UiInspectorDetail } from './UiInspectorDetail';
+export { UiInspectorOverlay } from './UiInspectorOverlay';
+export { BoxModelVisualizer } from './BoxModelVisualizer';
+export { UiA11yAuditPanel } from './UiA11yAuditPanel';

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

@@ -0,0 +1 @@
+export{default as MainScreen}from"./MainScreen";export{default as TabBar}from"./TabBar";export{default as InspectorHeader}from"./InspectorHeader";export{default as FabLauncher}from"./FabLauncher";export{default as NetworkTab}from"./NetworkTab";export{default as NetworkDetail}from"./NetworkDetail";export{default as ConsoleTab}from"./ConsoleTab";export{default as LogDetail}from"./LogDetail";export{PerformanceTab}from"./PerformanceTab";export{default as AnalyticsTab}from"./AnalyticsTab";export{default as ReduxTab}from"./ReduxTab";export{default as ReduxDetail}from"./ReduxDetail";export{default as CrashTab}from"./CrashTab";export{default as CrashDetail}from"./CrashDetail";export{default as PushTab}from"./PushTab";export{default as PushDetail}from"./PushDetail";export{default as SocketTab}from"./SocketTab";export{default as SocketDetail}from"./SocketDetail";export{default as DeviceInfoTab}from"./DeviceInfoTab";export{default as StorageTab}from"./StorageTab";export{default as DebuggingTab}from"./DebuggingTab";export{MediaGalleryTab}from"./MediaGalleryTab";export{default as SettingsPanel}from"./SettingsPanel";export{UiInspectorTab}from"./UiInspectorTab";export{UiInspectorDetail}from"./UiInspectorDetail";export{UiInspectorOverlay}from"./UiInspectorOverlay";export{BoxModelVisualizer}from"./BoxModelVisualizer";export{UiA11yAuditPanel}from"./UiA11yAuditPanel";