react-native-inapp-inspector 2.5.11 → 2.5.13

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

@@ -0,0 +1,199 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(l,a,e,r){r===void 0&&(r=e);var i=Object.getOwnPropertyDescriptor(a,e);(!i||("get"in i?!a.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return a[e]}}),Object.defineProperty(l,r,i)}):(function(l,a,e,r){r===void 0&&(r=e),l[r]=a[e]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(l,a){Object.defineProperty(l,"default",{enumerable:!0,value:a})}):function(l,a){l.default=a}),__importStar=this&&this.__importStar||(function(){var l=function(a){return l=Object.getOwnPropertyNames||function(e){var r=[];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(r[r.length]=i);return r},l(a)};return function(a){if(a&&a.__esModule)return a;var e={};if(a!=null)for(var r=l(a),i=0;i<r.length;i++)r[i]!=="default"&&__createBinding(e,a,r[i]);return __setModuleDefault(e,a),e}})(),__importDefault=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.UiInspectorOverlay=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),uiInspectorEngine_1=require("../../helpers/uiInspectorEngine"),types_1=require("../../types"),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),NetworkIcons_1=require("../NetworkIcons"),TouchableScale_1=__importDefault(require("../TouchableScale")),NativeInspector_1=require("../../native/NativeInspector"),UiInspectorOverlay=()=>{const{isInspectModeActive:l,setIsInspectModeActive:a,selectedUiElement:e,setSelectedUiElement:r,showAlignmentGrid:i,setShowAlignmentGrid:N,showDistanceGuides:P,setShowDistanceGuides:q,setVisible:z,switchActiveTab:R}=(0,InspectorContext_1.useInspector)(),[B,k]=(0,react_1.useState)("top"),[_,A]=(0,react_1.useState)(!1),[C,w]=(0,react_1.useState)(!1),[v,O]=(0,react_1.useState)(""),[D,T]=(0,react_1.useState)(null),m=react_native_1.Dimensions.get("window"),F=(0,react_1.useCallback)(async o=>{const{pageX:t,pageY:s,locationX:c,locationY:f}=o.nativeEvent,u=t??c??0,x=s??f??0;try{const n=await(0,uiInspectorEngine_1.getDynamicInspectorDataForPoint)(u,x);if(n&&n.layout&&(n.layout.width>0||n.layout.height>0)){try{const I=await(0,NativeInspector_1.takeNativeScreenshot)({rect:{x:Math.max(0,n.layout.pageX),y:Math.max(0,n.layout.pageY),width:Math.max(1,n.layout.width),height:Math.max(1,n.layout.height)},quality:.95,format:"png"});I?.uri&&(n.snapshotUri=I.uri)}catch{}T({x:n.layout.x,y:n.layout.y,width:n.layout.width,height:n.layout.height,componentName:n.displayName||n.componentName}),r(n),(0,NativeInspector_1.triggerNativeHaptic)();return}}catch{}const p=Math.round(Math.min(m.width-32,Math.max(48,u>m.width/2?(m.width-u)*1.5:u*1.5))),h=44,y=Math.max(0,Math.min(u-p/2,m.width-p)),b=Math.max(0,Math.min(x-h/2,m.height-h));let V;try{const n=await(0,NativeInspector_1.takeNativeScreenshot)({rect:{x:Math.max(0,y),y:Math.max(0,b),width:Math.max(1,p),height:Math.max(1,h)},quality:.95,format:"png"});n?.uri&&(V=n.uri)}catch{}const W=(0,uiInspectorEngine_1.createInspectedElement)("View",{accessible:!0,style:{position:"absolute",left:Math.round(y),top:Math.round(b),width:p,height:h}},{x:Math.round(y),y:Math.round(b),width:p,height:h,pageX:Math.round(y),pageY:Math.round(b)},void 0,void 0,V);T({x:Math.round(y),y:Math.round(b),width:p,height:h,componentName:"View"}),r(W),(0,NativeInspector_1.triggerNativeHaptic)()},[m,r]),H=(0,react_1.useRef)(react_native_1.PanResponder.create({onStartShouldSetPanResponder:()=>!0,onMoveShouldSetPanResponder:()=>!0,onPanResponderGrant:o=>F(o),onPanResponderMove:o=>F(o)})).current;if(!l)return null;const d=D||(e?{x:e.layout.pageX,y:e.layout.pageY,width:e.layout.width,height:e.layout.height,componentName:e.componentName}:null),S=e?.hierarchy||[],E=e?.flattenedStyles||{},g=e?.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:e?.layout.width||0,height:e?.layout.height||0}},M=Object.entries(E).filter(([o,t])=>t==null||typeof t=="object"?!1:["overflow","fontSize","fontWeight","color","letterSpacing","lineHeight","backgroundColor","borderRadius","flexDirection","justifyContent","alignItems","flex","opacity","zIndex"].includes(o)),L=o=>{if(!e||o.componentName===e.componentName)return;(0,NativeInspector_1.triggerNativeHaptic)();const t=o.props||{},s=o.styles||(t.style?react_native_1.StyleSheet.flatten(t.style):{})||{},c=o.layout||{...e.layout,width:s.width||e.layout.width,height:s.height||e.layout.height},f=(0,uiInspectorEngine_1.extractBoxModel)(s,c),u=(0,uiInspectorEngine_1.auditAccessibility)(t,c,s);r({...e,componentName:o.componentName,displayName:o.displayName,props:t,originalStyles:s,flattenedStyles:s,tweakedStyles:{},layout:c,boxModel:f,a11y:u}),T({x:c.x??e.layout.x,y:c.y??e.layout.y,width:c.width,height:c.height,componentName:o.displayName||o.componentName})},j=()=>{(0,NativeInspector_1.triggerNativeHaptic)(),a(!1),R(types_1.ActiveTab.Ui),z(!0)};return<react_native_1.View style={[react_native_1.StyleSheet.absoluteFill,styles.overlayContainer]}pointerEvents="box-none">
+      
+      <react_native_1.View style={react_native_1.StyleSheet.absoluteFill}{...H.panHandlers}/>
+
+      
+      {i&&<react_native_1.View style={[react_native_1.StyleSheet.absoluteFill,styles.gridPattern]}pointerEvents="none"/>}
+
+      
+      {e&&<react_native_1.View style={[styles.devToolsHudContainer,B==="top"?styles.hudTop:styles.hudBottom]}pointerEvents="box-none">
+          
+          <react_native_1.View style={styles.hudBreadcrumbBar}>
+            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={styles.hudBreadcrumbContent}>
+              {S.length>0?S.map((o,t)=>{const s=t===S.length-1||o.componentName===e.componentName;return<react_1.default.Fragment key={o.id||t}>
+                      {t>0&&<react_native_1.Text style={styles.hudDotSeparator}>•</react_native_1.Text>}
+                      <react_native_1.TouchableOpacity style={[styles.hudBreadcrumbChip,s&&styles.hudBreadcrumbChipActive]}onPress={()=>L(o)}>
+                        <react_native_1.Text style={[styles.hudBreadcrumbText,s&&styles.hudBreadcrumbTextActive]}>
+                          {o.displayName||o.componentName}
+                        </react_native_1.Text>
+                      </react_native_1.TouchableOpacity>
+                    </react_1.default.Fragment>}):<react_native_1.View style={styles.hudBreadcrumbChipActive}>
+                  <react_native_1.Text style={styles.hudBreadcrumbTextActive}>
+                    {e.componentName}
+                  </react_native_1.Text>
+                </react_native_1.View>}
+            </react_native_1.ScrollView>
+
+            
+            <react_native_1.TouchableOpacity style={styles.hudFlipBtn}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),k(B==="top"?"bottom":"top")}}>
+              <react_native_1.Text style={styles.hudFlipBtnText}>🔄</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+
+          
+          <react_native_1.View style={styles.hudBodyRow}pointerEvents="none">
+            
+            <react_native_1.View style={styles.hudStylesColumn}>
+              {M.length>0?M.slice(0,7).map(([o,t])=><react_native_1.View key={o}style={styles.hudStyleRow}>
+                    <react_native_1.Text style={styles.hudStyleKey}>{o}:</react_native_1.Text>
+                    <react_native_1.Text style={styles.hudStyleVal}numberOfLines={1}>
+                      {String(t)}
+                    </react_native_1.Text>
+                  </react_native_1.View>):<react_native_1.View style={styles.hudStyleRow}>
+                  <react_native_1.Text style={styles.hudStyleKey}>layout:</react_native_1.Text>
+                  <react_native_1.Text style={styles.hudStyleVal}>default</react_native_1.Text>
+                </react_native_1.View>}
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={styles.hudBoxModelWrapper}>
+              <react_native_1.View style={styles.boxModelMarginLayer}>
+                <react_native_1.Text style={styles.boxModelMarginLabel}>margin</react_native_1.Text>
+                <react_native_1.Text style={styles.boxModelInsetTop}>{g.margin.top}</react_native_1.Text>
+                <react_native_1.Text style={styles.boxModelInsetRight}>{g.margin.right}</react_native_1.Text>
+                <react_native_1.Text style={styles.boxModelInsetBottom}>{g.margin.bottom}</react_native_1.Text>
+                <react_native_1.Text style={styles.boxModelInsetLeft}>{g.margin.left}</react_native_1.Text>
+
+                <react_native_1.View style={styles.boxModelPaddingLayer}>
+                  <react_native_1.Text style={styles.boxModelPaddingLabel}>padding</react_native_1.Text>
+                  <react_native_1.Text style={styles.boxModelInsetTop}>{g.padding.top}</react_native_1.Text>
+                  <react_native_1.Text style={styles.boxModelInsetRight}>{g.padding.right}</react_native_1.Text>
+                  <react_native_1.Text style={styles.boxModelInsetBottom}>{g.padding.bottom}</react_native_1.Text>
+                  <react_native_1.Text style={styles.boxModelInsetLeft}>{g.padding.left}</react_native_1.Text>
+
+                  <react_native_1.View style={styles.boxModelContentLayer}>
+                    <react_native_1.Text style={styles.boxModelCoords}>
+                      ({Math.round(e.layout.pageX)},{" "}
+                      {Math.round(e.layout.pageY)})
+                    </react_native_1.Text>
+                    <react_native_1.Text style={styles.boxModelDimensions}>
+                      {Math.round(e.layout.width)} ×{" "}
+                      {Math.round(e.layout.height)}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>}
+
+      
+      {d&&<react_native_1.View pointerEvents="none"style={[styles.highlightBox,{top:d.y,left:d.x,width:d.width,height:d.height}]}>
+          
+          <react_native_1.View style={styles.contentTint}/>
+
+          
+          <react_native_1.View style={[styles.elementBadge,d.y<50?styles.elementBadgeBottom:styles.elementBadgeTop]}>
+            <react_native_1.Text style={styles.elementBadgeTag}>&lt;{d.componentName}&gt;</react_native_1.Text>
+            <react_native_1.Text style={styles.elementBadgeDim}>
+              {Math.round(d.width)} × {Math.round(d.height)} pt
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>}
+
+      
+      {P&&d&&<react_native_1.View style={react_native_1.StyleSheet.absoluteFill}pointerEvents="none">
+          
+          <react_native_1.View style={[styles.guideLineV,{top:0,left:d.x+d.width/2,height:d.y}]}>
+            <react_native_1.Text style={styles.guideBadge}>{Math.round(d.y)} pt</react_native_1.Text>
+          </react_native_1.View>
+
+          
+          <react_native_1.View style={[styles.guideLineH,{top:d.y+d.height/2,left:0,width:d.x}]}>
+            <react_native_1.Text style={styles.guideBadge}>{Math.round(d.x)} pt</react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>}
+
+      
+      <react_native_1.View style={styles.hudToolbar}>
+        <react_native_1.View style={styles.hudLeftGroup}>
+          <react_native_1.TouchableOpacity style={[styles.modePillBtn,!_&&styles.modePillBtnActive]}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),A(!1)}}>
+            <react_native_1.Text style={[styles.modePillText,!_&&styles.modePillTextActive]}>
+              Inspect
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+
+          <react_native_1.TouchableOpacity style={[styles.modePillBtn,_&&styles.modePillBtnActive]}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),A(!_)}}>
+            <react_native_1.Text style={[styles.modePillText,_&&styles.modePillTextActive]}>
+              Touchables
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.hudActions}>
+          <TouchableScale_1.default style={[styles.hudBtn,C&&styles.hudBtnActive]}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),w(!0)}}>
+            <NetworkIcons_1.CodeBracketsIcon color={C?AppColors_1.AppColors.white:"#CBD5E1"}size={13}/>
+            <react_native_1.Text style={styles.treeBtnText}>Tree</react_native_1.Text>
+          </TouchableScale_1.default>
+
+          <TouchableScale_1.default style={[styles.hudBtn,i&&styles.hudBtnActive]}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),N(!i)}}>
+            <NetworkIcons_1.RulerIcon color={i?AppColors_1.AppColors.white:"#CBD5E1"}size={14}/>
+          </TouchableScale_1.default>
+
+          {e&&<TouchableScale_1.default style={[styles.hudBtn,styles.hudBtnPrimary]}onPress={j}>
+              <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.white}size={13}/>
+              <react_native_1.Text style={styles.hudBtnPrimaryText}>Full JSX</react_native_1.Text>
+            </TouchableScale_1.default>}
+
+          <TouchableScale_1.default style={[styles.hudBtn,styles.hudBtnClose]}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),a(!1)}}>
+            <NetworkIcons_1.CloseIcon color={AppColors_1.AppColors.white}size={13}/>
+          </TouchableScale_1.default>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      
+      <react_native_1.Modal visible={C}animationType="slide"transparent onRequestClose={()=>w(!1)}>
+        <react_native_1.View style={styles.treeModalOverlay}>
+          <react_native_1.View style={styles.treeModalContent}>
+            
+            <react_native_1.View style={styles.treeModalHeader}>
+              <react_native_1.View style={styles.treeModalTitleGroup}>
+                <react_native_1.View style={styles.treeModalIconBadge}>
+                  <NetworkIcons_1.CodeBracketsIcon color={AppColors_1.AppColors.brandPurple}size={16}/>
+                </react_native_1.View>
+                <react_native_1.View>
+                  <react_native_1.Text style={styles.treeModalTitle}>Component Hierarchy Tree</react_native_1.Text>
+                  <react_native_1.Text style={styles.treeModalSubtitle}>
+                    Browse and select any mounted React component
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+
+              <react_native_1.TouchableOpacity style={styles.treeModalCloseBtn}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),w(!1)}}>
+                <NetworkIcons_1.CloseIcon color={AppColors_1.AppColors.slate600}size={14}/>
+              </react_native_1.TouchableOpacity>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={styles.treeSearchBar}>
+              <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.slate400}size={14}/>
+              <react_native_1.TextInput style={styles.treeSearchInput}placeholder="Search components (e.g. HomeScreen, Button)..."placeholderTextColor={AppColors_1.AppColors.slate400}value={v}onChangeText={O}/>
+            </react_native_1.View>
+
+            
+            <react_native_1.ScrollView style={styles.treeScrollArea}contentContainerStyle={styles.treeScrollContent}showsVerticalScrollIndicator={!1}>
+              {(()=>{const o=(0,uiInspectorEngine_1.getAllAppFibers)().filter(t=>v?t.name.toLowerCase().includes(v.toLowerCase()):!0);return o.length===0?<react_native_1.View style={styles.treeEmptyState}>
+                      <react_native_1.Text style={styles.treeEmptyText}>
+                        No components match "{v}"
+                      </react_native_1.Text>
+                    </react_native_1.View>:o.map((t,s)=>{const c=e&&t.name===e.componentName,f=Math.min(t.depth,12);return<react_native_1.TouchableOpacity key={`tree_item_${s}_${t.name}`}activeOpacity={.7}style={[styles.treeNodeRow,{paddingLeft:12+f*12},c&&styles.treeNodeRowSelected]}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),w(!1);const u=buildHierarchyFromFiber(t.fiber),x=t.styles.left??16,p=t.styles.top??80,h=t.styles.width??m.width-32,y=t.styles.height??48,b=(0,uiInspectorEngine_1.createInspectedElement)(t.name,t.props,{x,y:p,width:h,height:y,pageX:x,pageY:p},u,t.nativeTag);r(b),T({x,y:p,width:h,height:y,componentName:t.name})}}>
+                      <react_native_1.View style={styles.treeNodeTagBadge}>
+                        <react_native_1.Text style={styles.treeNodeTagIcon}>
+                          {t.isHost?"Native":"JSX"}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      <react_native_1.Text style={[styles.treeNodeName,c&&styles.treeNodeNameSelected]}>
+                        &lt;{t.name}&gt;
+                      </react_native_1.Text>
+                      {t.text&&<react_native_1.Text style={styles.treeNodePreview}numberOfLines={1}>
+                          "{t.text}"
+                        </react_native_1.Text>}
+                      {t.sourceLocation&&<react_native_1.Text style={styles.treeNodeLocation}>
+                          {t.sourceLocation}
+                        </react_native_1.Text>}
+                    </react_native_1.TouchableOpacity>})()})()}
+            </react_native_1.ScrollView>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.Modal>
+    </react_native_1.View>};exports.UiInspectorOverlay=UiInspectorOverlay;const styles=react_native_1.StyleSheet.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:react_native_1.Platform.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:AppFonts_1.AppFonts.medium},hudBreadcrumbTextActive:{color:"#FFFFFF",fontFamily:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.regular},hudStyleVal:{color:"#F8FAFC",fontSize:10,fontFamily:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.bold,color:"#FBBF24"},boxModelContentLayer:{alignItems:"center",justifyContent:"center"},boxModelCoords:{color:"#FACC15",fontSize:8,fontFamily:AppFonts_1.AppFonts.bold},boxModelDimensions:{color:"#FACC15",fontSize:9,fontFamily:AppFonts_1.AppFonts.bold},boxModelInsetTop:{position:"absolute",top:1,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:AppFonts_1.AppFonts.medium},boxModelInsetBottom:{position:"absolute",bottom:1,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:AppFonts_1.AppFonts.medium},boxModelInsetLeft:{position:"absolute",left:2,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:AppFonts_1.AppFonts.medium},boxModelInsetRight:{position:"absolute",right:2,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.bold,color:"#818CF8"},elementBadgeDim:{fontSize:9.5,fontFamily:AppFonts_1.AppFonts.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:AppColors_1.AppColors.white,fontSize:9,fontFamily:AppFonts_1.AppFonts.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:AppColors_1.AppColors.brandPurple},modePillText:{fontSize:10.5,fontFamily:AppFonts_1.AppFonts.medium,color:"#94A3B8"},modePillTextActive:{color:AppColors_1.AppColors.white,fontFamily:AppFonts_1.AppFonts.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:AppColors_1.AppColors.brandPurple,borderColor:AppColors_1.AppColors.brandPurple},hudBtnPrimary:{flexDirection:"row",gap:4,backgroundColor:AppColors_1.AppColors.brandPurple,borderColor:AppColors_1.AppColors.brandPurple},hudBtnPrimaryText:{fontSize:10.5,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.white},hudBtnClose:{backgroundColor:"#E11D48",borderColor:"#E11D48"},treeBtnText:{color:"#CBD5E1",fontSize:9.5,fontFamily:AppFonts_1.AppFonts.bold,marginTop:1},treeModalOverlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.65)",justifyContent:"flex-end"},treeModalContent:{backgroundColor:AppColors_1.AppColors.white,borderTopLeftRadius:18,borderTopRightRadius:18,maxHeight:"75%",minHeight:"45%",paddingBottom:react_native_1.Platform.OS==="ios"?34:20,shadowColor:"#000",shadowOffset:{width:0,height:-4},shadowOpacity:.3,shadowRadius:10,elevation:20},treeModalHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:16,paddingBottom:12,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.slate100},treeModalTitleGroup:{flexDirection:"row",alignItems:"center",gap:10,flex:1},treeModalIconBadge:{width:32,height:32,borderRadius:8,backgroundColor:"#4F46E518",alignItems:"center",justifyContent:"center"},treeModalTitle:{fontSize:14,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.slate900},treeModalSubtitle:{fontSize:11,fontFamily:AppFonts_1.AppFonts.medium,color:AppColors_1.AppColors.grayTextWeak},treeModalCloseBtn:{width:28,height:28,borderRadius:14,backgroundColor:AppColors_1.AppColors.slate100,alignItems:"center",justifyContent:"center"},treeSearchBar:{flexDirection:"row",alignItems:"center",gap:8,marginHorizontal:16,marginTop:10,marginBottom:6,paddingHorizontal:12,paddingVertical:8,backgroundColor:AppColors_1.AppColors.slate50,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.slate200},treeSearchInput:{flex:1,fontSize:12,fontFamily:AppFonts_1.AppFonts.medium,color:AppColors_1.AppColors.slate900,padding:0},treeScrollArea:{flex:1},treeScrollContent:{paddingVertical:6},treeEmptyState:{padding:24,alignItems:"center",justifyContent:"center"},treeEmptyText:{fontSize:12,fontFamily:AppFonts_1.AppFonts.medium,color:AppColors_1.AppColors.grayTextWeak},treeNodeRow:{flexDirection:"row",alignItems:"center",paddingVertical:7,paddingRight:14,gap:6,borderBottomWidth:react_native_1.StyleSheet.hairlineWidth,borderBottomColor:AppColors_1.AppColors.slate100},treeNodeRowSelected:{backgroundColor:"#EEF2FF"},treeNodeTagBadge:{paddingHorizontal:4,paddingVertical:2,borderRadius:3,backgroundColor:AppColors_1.AppColors.slate100},treeNodeTagIcon:{fontSize:8.5,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.slate600},treeNodeName:{fontSize:12,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.brandPurple},treeNodeNameSelected:{color:"#4338CA"},treeNodePreview:{fontSize:10.5,fontFamily:AppFonts_1.AppFonts.medium,color:AppColors_1.AppColors.slate600,flex:1},treeNodeLocation:{fontSize:9.5,fontFamily:AppFonts_1.AppFonts.regular,color:AppColors_1.AppColors.grayTextWeak}});

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

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

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

@@ -0,0 +1,117 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.UiInspectorTab=void 0;const react_1=__importDefault(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),NetworkIcons_1=require("../NetworkIcons"),TouchableScale_1=__importDefault(require("../TouchableScale")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),NativeInspector_1=require("../../native/NativeInspector"),toast_1=require("../../helpers/toast"),BoxModelVisualizer_1=require("./BoxModelVisualizer"),UiInspectorTab=()=>{const{selectedUiElement:e,setSelectedUiElement:i,setIsInspectModeActive:l,setVisible:n,showAlignmentGrid:t,setShowAlignmentGrid:s,uiInspectorHistory:r,clearUiInspectorHistory:c}=(0,InspectorContext_1.useInspector)(),a=()=>{(0,NativeInspector_1.triggerNativeHaptic)(),n(!1),l(!0),(0,toast_1.showToast)("Touch anywhere to inspect JSX components")};return<react_native_1.ScrollView showsVerticalScrollIndicator={!1}contentContainerStyle={styles.container}>
+      
+      <react_native_1.View style={styles.heroCard}>
+        <react_native_1.View style={styles.heroLeft}>
+          <react_native_1.View style={styles.heroIconBadge}>
+            <NetworkIcons_1.InspectPointerIcon color={AppColors_1.AppColors.white}size={22}/>
+          </react_native_1.View>
+          <react_native_1.View style={styles.heroTextGroup}>
+            <react_native_1.Text style={styles.heroTitle}>Inspect Elements On Screen</react_native_1.Text>
+            <react_native_1.Text style={styles.heroSubtitle}>
+              Tap, drag, and highlight rendered JSX components to inspect styles, props & box model in real-time.
+            </react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <TouchableScale_1.default style={styles.heroButton}onPress={a}>
+          <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.brandPurple}size={16}/>
+          <react_native_1.Text style={styles.heroButtonText}>Start Inspect Mode</react_native_1.Text>
+        </TouchableScale_1.default>
+      </react_native_1.View>
+
+      
+      {e?<react_native_1.View style={styles.selectedCard}>
+          <react_native_1.View style={styles.selectedHeader}>
+            <react_native_1.View style={styles.selectedTitleGroup}>
+              <react_native_1.View style={styles.tagBadge}>
+                <react_native_1.Text style={styles.tagBadgeText}>&lt;{e.componentName}&gt;</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.Text style={styles.dimensionsBadge}>
+                {Math.round(e.layout.width)} × {Math.round(e.layout.height)} pt
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles.a11yScoreBadge}>
+              <react_native_1.Text style={[styles.a11yScoreText,e.a11y.hasValidTouchTarget?styles.a11yScoreTextPass:styles.a11yScoreTextWarn]}>
+                {e.a11y.hasValidTouchTarget?"A11y Pass":"A11y Warning"}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          
+          <BoxModelVisualizer_1.BoxModelVisualizer boxModel={e.boxModel}compact/>
+
+          
+          <react_native_1.View style={styles.metricsBar}>
+            <react_native_1.View style={styles.metricChip}>
+              <react_native_1.Text style={styles.metricChipLabel}>Props:</react_native_1.Text>
+              <react_native_1.Text style={styles.metricChipValue}>
+                {Object.keys(e.props).length}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles.metricChip}>
+              <react_native_1.Text style={styles.metricChipLabel}>Styles:</react_native_1.Text>
+              <react_native_1.Text style={styles.metricChipValue}>
+                {Object.keys(e.flattenedStyles).length}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={styles.metricChip}>
+              <react_native_1.Text style={styles.metricChipLabel}>Depth:</react_native_1.Text>
+              <react_native_1.Text style={styles.metricChipValue}>
+                {e.hierarchy.length} levels
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>:<react_native_1.View style={styles.emptyCard}>
+          <NetworkIcons_1.EmptyRadarIcon color={AppColors_1.AppColors.grayTextWeak}size={32}/>
+          <react_native_1.Text style={styles.emptyCardTitle}>No Element Selected</react_native_1.Text>
+          <react_native_1.Text style={styles.emptyCardSubtitle}>
+            Launch Inspect Mode to select an on-screen JSX component.
+          </react_native_1.Text>
+        </react_native_1.View>}
+
+      
+      <react_native_1.View style={styles.toolsSection}>
+        <react_native_1.Text style={styles.sectionHeader}>DESIGN & ALIGNMENT TOOLS</react_native_1.Text>
+        <react_native_1.View style={styles.toolsGrid}>
+          <react_native_1.TouchableOpacity style={[styles.toolCard,t&&styles.toolCardActive]}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),s(!t)}}>
+            <NetworkIcons_1.RulerIcon color={t?AppColors_1.AppColors.brandPurple:AppColors_1.AppColors.slate600}size={18}/>
+            <react_native_1.Text style={[styles.toolCardTitle,t&&styles.toolCardTitleActive]}>
+              8pt Grid Guide
+            </react_native_1.Text>
+            <react_native_1.Text style={styles.toolCardSub}>
+              {t?"Enabled":"Disabled"}
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+
+          <react_native_1.TouchableOpacity style={styles.toolCard}onPress={a}>
+            <NetworkIcons_1.SlidersIcon color={AppColors_1.AppColors.brandPurple}size={18}/>
+            <react_native_1.Text style={styles.toolCardTitle}>Live Tweaker</react_native_1.Text>
+            <react_native_1.Text style={styles.toolCardSub}>Sandbox Styles</react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      
+      {r.length>0&&<react_native_1.View style={styles.historySection}>
+          <react_native_1.View style={styles.historyHeader}>
+            <react_native_1.Text style={styles.sectionHeader}>RECENTLY INSPECTED ({r.length})</react_native_1.Text>
+            <TouchableScale_1.default style={styles.clearHistoryBtn}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),c(),(0,toast_1.showToast)("Cleared inspection history")}}>
+              <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.grayTextWeak}size={12}/>
+              <react_native_1.Text style={styles.clearHistoryBtnText}>Clear</react_native_1.Text>
+            </TouchableScale_1.default>
+          </react_native_1.View>
+
+          <react_native_1.View style={styles.historyList}>
+            {r.map((o,p)=><react_native_1.TouchableOpacity key={o.id||p}style={styles.historyItem}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),i(o)}}>
+                <react_native_1.View style={styles.historyItemLeft}>
+                  <react_native_1.Text style={styles.historyItemTag}>&lt;{o.componentName}&gt;</react_native_1.Text>
+                  <react_native_1.Text style={styles.historyItemDim}>
+                    {Math.round(o.layout.width)} × {Math.round(o.layout.height)} pt
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak}size={12}direction="right"/>
+              </react_native_1.TouchableOpacity>)}
+          </react_native_1.View>
+        </react_native_1.View>}
+    </react_native_1.ScrollView>};exports.UiInspectorTab=UiInspectorTab;const styles=react_native_1.StyleSheet.create({container:{padding:12,gap:12},heroCard:{backgroundColor:AppColors_1.AppColors.brandPurple,borderRadius:14,padding:16,gap:14,shadowColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.white,marginBottom:4},heroSubtitle:{fontSize:12,fontFamily:AppFonts_1.AppFonts.medium,color:"#EEF2FF",lineHeight:17},heroButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:AppColors_1.AppColors.white,paddingVertical:10,borderRadius:10,gap:8},heroButtonText:{fontSize:13,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.brandPurple},selectedCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:12,padding:14,borderWidth:1,borderColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.brandPurple},dimensionsBadge:{fontSize:12,fontFamily:AppFonts_1.AppFonts.medium,color:AppColors_1.AppColors.grayTextWeak},a11yScoreBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:5,backgroundColor:AppColors_1.AppColors.slate100},a11yScoreText:{fontSize:10,fontFamily:AppFonts_1.AppFonts.bold},a11yScoreTextPass:{color:"#059669"},a11yScoreTextWarn:{color:"#D97706"},metricsBar:{flexDirection:"row",backgroundColor:AppColors_1.AppColors.slate50,borderRadius:8,padding:8,justifyContent:"space-around"},metricChip:{flexDirection:"row",gap:4,alignItems:"center"},metricChipLabel:{fontSize:11,fontFamily:AppFonts_1.AppFonts.medium,color:AppColors_1.AppColors.grayTextWeak},metricChipValue:{fontSize:11,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.slate900},emptyCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:12,padding:24,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary,borderStyle:"dashed",gap:6},emptyCardTitle:{fontSize:14,fontFamily:AppFonts_1.AppFonts.semiBold,color:AppColors_1.AppColors.slate700,marginTop:4},emptyCardSubtitle:{fontSize:12,fontFamily:AppFonts_1.AppFonts.medium,color:AppColors_1.AppColors.grayTextWeak,textAlign:"center"},sectionHeader:{fontSize:10,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.grayTextWeak,letterSpacing:.8},toolsSection:{gap:8},toolsGrid:{flexDirection:"row",gap:10},toolCard:{flex:1,backgroundColor:AppColors_1.AppColors.white,borderRadius:10,padding:12,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary,gap:4},toolCardActive:{borderColor:AppColors_1.AppColors.brandPurple,backgroundColor:"#EEF2FF"},toolCardTitle:{fontSize:12,fontFamily:AppFonts_1.AppFonts.semiBold,color:AppColors_1.AppColors.slate900,marginTop:4},toolCardTitleActive:{color:AppColors_1.AppColors.brandPurple},toolCardSub:{fontSize:10,fontFamily:AppFonts_1.AppFonts.medium,color:AppColors_1.AppColors.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:AppFonts_1.AppFonts.medium,color:AppColors_1.AppColors.grayTextWeak},historyList:{backgroundColor:AppColors_1.AppColors.white,borderRadius:10,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary,overflow:"hidden"},historyItem:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:AppColors_1.AppColors.slate100},historyItemLeft:{flexDirection:"row",alignItems:"center",gap:8},historyItemTag:{fontSize:12,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.brandPurple},historyItemDim:{fontSize:11,fontFamily:AppFonts_1.AppFonts.medium,color:AppColors_1.AppColors.grayTextWeak}});

package/dist/commonjs/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/commonjs/components/Inspector/UiLiveStyleTweaker.js

@@ -0,0 +1,148 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(a){return a&&a.__esModule?a:{default:a}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.UiLiveStyleTweaker=void 0;const react_1=__importDefault(require("react")),react_native_1=require("react-native"),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),NetworkIcons_1=require("../NetworkIcons"),TouchableScale_1=__importDefault(require("../TouchableScale")),uiInspectorEngine_1=require("../../helpers/uiInspectorEngine"),NativeInspector_1=require("../../native/NativeInspector"),toast_1=require("../../helpers/toast"),clipboard_1=__importDefault(require("@react-native-clipboard/clipboard")),COLOR_PRESETS=["#4F46E5","#7C3AED","#2563EB","#0D9488","#10B981","#F59E0B","#E11D48","#0F172A","#F8FAFC","#FFFFFF","transparent"],UiLiveStyleTweaker=({componentName:a,originalStyles:l,tweakedStyles:i,onApplyStyle:o,onResetStyles:s})=>{const t={...l,...i},n=Object.keys(i).length>0,c=()=>{const e=(0,uiInspectorEngine_1.generateStyleSheetSnippet)(a,t);clipboard_1.default.setString(e),(0,NativeInspector_1.triggerNativeHaptic)(),(0,toast_1.showToast)("Copied tweaked StyleSheet to clipboard")},r=(e,p,d=0)=>{const _=typeof t[e]=="number"?t[e]:0,y=Math.max(d,_+p);o(e,y),(0,NativeInspector_1.triggerNativeHaptic)()};return<react_native_1.ScrollView showsVerticalScrollIndicator={!1}contentContainerStyle={styles.container}>
+      
+      <react_native_1.View style={styles.topActionsRow}>
+        <react_native_1.View style={styles.titleWithBadge}>
+          <NetworkIcons_1.SlidersIcon color={AppColors_1.AppColors.brandPurple}size={18}/>
+          <react_native_1.Text style={styles.sectionTitle}>Live Style Sandbox</react_native_1.Text>
+          {n&&<react_native_1.View style={styles.modifiedBadge}>
+              <react_native_1.Text style={styles.modifiedBadgeText}>MODIFIED</react_native_1.Text>
+            </react_native_1.View>}
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.actionButtonsGroup}>
+          {n&&<TouchableScale_1.default style={styles.resetButton}onPress={()=>{s(),(0,NativeInspector_1.triggerNativeHaptic)(),(0,toast_1.showToast)("Reset styles to original")}}>
+              <NetworkIcons_1.RotateCcwIcon color="#E11D48"size={14}/>
+              <react_native_1.Text style={styles.resetButtonText}>Reset</react_native_1.Text>
+            </TouchableScale_1.default>}
+
+          <TouchableScale_1.default style={styles.exportButton}onPress={c}>
+            <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.white}size={14}/>
+            <react_native_1.Text style={styles.exportButtonText}>Copy CSS</react_native_1.Text>
+          </TouchableScale_1.default>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      
+      <react_native_1.View style={styles.card}>
+        <react_native_1.Text style={styles.cardHeader}>Padding & Margin</react_native_1.Text>
+
+        <react_native_1.View style={styles.controlRow}>
+          <react_native_1.Text style={styles.controlLabel}>Padding</react_native_1.Text>
+          <react_native_1.View style={styles.stepperContainer}>
+            <react_native_1.TouchableOpacity style={styles.stepperBtn}onPress={()=>r("padding",-2)}>
+              <react_native_1.Text style={styles.stepperBtnText}>-</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.Text style={styles.stepperValue}>{t.padding??0} pt</react_native_1.Text>
+            <react_native_1.TouchableOpacity style={styles.stepperBtn}onPress={()=>r("padding",2)}>
+              <react_native_1.Text style={styles.stepperBtnText}>+</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.controlRow}>
+          <react_native_1.Text style={styles.controlLabel}>Margin</react_native_1.Text>
+          <react_native_1.View style={styles.stepperContainer}>
+            <react_native_1.TouchableOpacity style={styles.stepperBtn}onPress={()=>r("margin",-2)}>
+              <react_native_1.Text style={styles.stepperBtnText}>-</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.Text style={styles.stepperValue}>{t.margin??0} pt</react_native_1.Text>
+            <react_native_1.TouchableOpacity style={styles.stepperBtn}onPress={()=>r("margin",2)}>
+              <react_native_1.Text style={styles.stepperBtnText}>+</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.controlRow}>
+          <react_native_1.Text style={styles.controlLabel}>Gap</react_native_1.Text>
+          <react_native_1.View style={styles.stepperContainer}>
+            <react_native_1.TouchableOpacity style={styles.stepperBtn}onPress={()=>r("gap",-2)}>
+              <react_native_1.Text style={styles.stepperBtnText}>-</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.Text style={styles.stepperValue}>{t.gap??0} pt</react_native_1.Text>
+            <react_native_1.TouchableOpacity style={styles.stepperBtn}onPress={()=>r("gap",2)}>
+              <react_native_1.Text style={styles.stepperBtnText}>+</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      
+      <react_native_1.View style={styles.card}>
+        <react_native_1.Text style={styles.cardHeader}>Borders & Corners</react_native_1.Text>
+
+        <react_native_1.View style={styles.controlRow}>
+          <react_native_1.Text style={styles.controlLabel}>Border Radius</react_native_1.Text>
+          <react_native_1.View style={styles.stepperContainer}>
+            <react_native_1.TouchableOpacity style={styles.stepperBtn}onPress={()=>r("borderRadius",-2)}>
+              <react_native_1.Text style={styles.stepperBtnText}>-</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.Text style={styles.stepperValue}>{t.borderRadius??0} pt</react_native_1.Text>
+            <react_native_1.TouchableOpacity style={styles.stepperBtn}onPress={()=>r("borderRadius",2)}>
+              <react_native_1.Text style={styles.stepperBtnText}>+</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.controlRow}>
+          <react_native_1.Text style={styles.controlLabel}>Border Width</react_native_1.Text>
+          <react_native_1.View style={styles.stepperContainer}>
+            <react_native_1.TouchableOpacity style={styles.stepperBtn}onPress={()=>r("borderWidth",-1)}>
+              <react_native_1.Text style={styles.stepperBtnText}>-</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.Text style={styles.stepperValue}>{t.borderWidth??0} pt</react_native_1.Text>
+            <react_native_1.TouchableOpacity style={styles.stepperBtn}onPress={()=>r("borderWidth",1)}>
+              <react_native_1.Text style={styles.stepperBtnText}>+</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      
+      <react_native_1.View style={styles.card}>
+        <react_native_1.Text style={styles.cardHeader}>Typography</react_native_1.Text>
+
+        <react_native_1.View style={styles.controlRow}>
+          <react_native_1.Text style={styles.controlLabel}>Font Size</react_native_1.Text>
+          <react_native_1.View style={styles.stepperContainer}>
+            <react_native_1.TouchableOpacity style={styles.stepperBtn}onPress={()=>r("fontSize",-1,8)}>
+              <react_native_1.Text style={styles.stepperBtnText}>-</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.Text style={styles.stepperValue}>{t.fontSize??14} pt</react_native_1.Text>
+            <react_native_1.TouchableOpacity style={styles.stepperBtn}onPress={()=>r("fontSize",1)}>
+              <react_native_1.Text style={styles.stepperBtnText}>+</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.segmentedRow}>
+          <react_native_1.Text style={styles.controlLabel}>Weight</react_native_1.Text>
+          <react_native_1.View style={styles.segmentedGroup}>
+            {["normal","500","600","bold"].map(e=><react_native_1.TouchableOpacity key={e}style={[styles.segmentItem,t.fontWeight===e&&styles.segmentItemActive]}onPress={()=>{o("fontWeight",e),(0,NativeInspector_1.triggerNativeHaptic)()}}>
+                <react_native_1.Text style={[styles.segmentText,t.fontWeight===e&&styles.segmentTextActive]}>
+                  {e}
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>)}
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      
+      <react_native_1.View style={styles.card}>
+        <react_native_1.Text style={styles.cardHeader}>Background Color</react_native_1.Text>
+        <react_native_1.View style={styles.paletteGrid}>
+          {COLOR_PRESETS.map(e=><react_native_1.TouchableOpacity key={e}style={[styles.colorSwatch,{backgroundColor:e},t.backgroundColor===e&&styles.colorSwatchActive]}onPress={()=>{o("backgroundColor",e),(0,NativeInspector_1.triggerNativeHaptic)()}}/>)}
+        </react_native_1.View>
+      </react_native_1.View>
+
+      
+      <react_native_1.View style={styles.card}>
+        <react_native_1.Text style={styles.cardHeader}>Opacity & Elevation</react_native_1.Text>
+        <react_native_1.View style={styles.segmentedGroup}>
+          {[1,.8,.6,.4,.2].map(e=><react_native_1.TouchableOpacity key={e}style={[styles.segmentItem,t.opacity===e&&styles.segmentItemActive]}onPress={()=>{o("opacity",e),(0,NativeInspector_1.triggerNativeHaptic)()}}>
+              <react_native_1.Text style={[styles.segmentText,t.opacity===e&&styles.segmentTextActive]}>
+                {Math.round(e*100)}%
+              </react_native_1.Text>
+            </react_native_1.TouchableOpacity>)}
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.ScrollView>};exports.UiLiveStyleTweaker=UiLiveStyleTweaker;const styles=react_native_1.StyleSheet.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:AppFonts_1.AppFonts.semiBold,color:AppColors_1.AppColors.slate900},modifiedBadge:{backgroundColor:"#F59E0B22",paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:"#F59E0B55"},modifiedBadgeText:{fontSize:9,fontFamily:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.semiBold,color:"#E11D48"},exportButton:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:AppColors_1.AppColors.brandPurple,paddingHorizontal:10,paddingVertical:5,borderRadius:6},exportButtonText:{fontSize:11,fontFamily:AppFonts_1.AppFonts.semiBold,color:AppColors_1.AppColors.white},card:{backgroundColor:AppColors_1.AppColors.white,borderRadius:12,padding:12,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary,gap:8},cardHeader:{fontSize:12,fontFamily:AppFonts_1.AppFonts.semiBold,color:AppColors_1.AppColors.slate700,marginBottom:2},controlRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},controlLabel:{fontSize:12,fontFamily:AppFonts_1.AppFonts.medium,color:AppColors_1.AppColors.slate600},stepperContainer:{flexDirection:"row",alignItems:"center",gap:8,backgroundColor:AppColors_1.AppColors.slate50,borderRadius:6,padding:2},stepperBtn:{width:28,height:28,backgroundColor:AppColors_1.AppColors.white,borderRadius:5,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary},stepperBtnText:{fontSize:15,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.slate900},stepperValue:{fontSize:12,fontFamily:AppFonts_1.AppFonts.semiBold,color:AppColors_1.AppColors.slate900,minWidth:44,textAlign:"center"},segmentedRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},segmentedGroup:{flexDirection:"row",backgroundColor:AppColors_1.AppColors.slate100,borderRadius:8,padding:2,gap:2},segmentItem:{paddingHorizontal:10,paddingVertical:5,borderRadius:6},segmentItemActive:{backgroundColor:AppColors_1.AppColors.brandPurple},segmentText:{fontSize:11,fontFamily:AppFonts_1.AppFonts.medium,color:AppColors_1.AppColors.slate600},segmentTextActive:{color:AppColors_1.AppColors.white,fontFamily:AppFonts_1.AppFonts.semiBold},paletteGrid:{flexDirection:"row",flexWrap:"wrap",gap:8},colorSwatch:{width:28,height:28,borderRadius:6,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary},colorSwatchActive:{borderColor:AppColors_1.AppColors.brandPurple,borderWidth:3}});

package/dist/commonjs/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/commonjs/components/Inspector/index.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.UiA11yAuditPanel=exports.BoxModelVisualizer=exports.UiInspectorOverlay=exports.UiInspectorDetail=exports.UiInspectorTab=exports.SettingsPanel=exports.MediaGalleryTab=exports.DebuggingTab=exports.StorageTab=exports.DeviceInfoTab=exports.SocketDetail=exports.SocketTab=exports.PushDetail=exports.PushTab=exports.CrashDetail=exports.CrashTab=exports.ReduxDetail=exports.ReduxTab=exports.AnalyticsTab=exports.PerformanceTab=exports.LogDetail=exports.ConsoleTab=exports.NetworkDetail=exports.NetworkTab=exports.FabLauncher=exports.InspectorHeader=exports.TabBar=exports.MainScreen=void 0;var MainScreen_1=require("./MainScreen");Object.defineProperty(exports,"MainScreen",{enumerable:!0,get:function(){return __importDefault(MainScreen_1).default}});var TabBar_1=require("./TabBar");Object.defineProperty(exports,"TabBar",{enumerable:!0,get:function(){return __importDefault(TabBar_1).default}});var InspectorHeader_1=require("./InspectorHeader");Object.defineProperty(exports,"InspectorHeader",{enumerable:!0,get:function(){return __importDefault(InspectorHeader_1).default}});var FabLauncher_1=require("./FabLauncher");Object.defineProperty(exports,"FabLauncher",{enumerable:!0,get:function(){return __importDefault(FabLauncher_1).default}});var NetworkTab_1=require("./NetworkTab");Object.defineProperty(exports,"NetworkTab",{enumerable:!0,get:function(){return __importDefault(NetworkTab_1).default}});var NetworkDetail_1=require("./NetworkDetail");Object.defineProperty(exports,"NetworkDetail",{enumerable:!0,get:function(){return __importDefault(NetworkDetail_1).default}});var ConsoleTab_1=require("./ConsoleTab");Object.defineProperty(exports,"ConsoleTab",{enumerable:!0,get:function(){return __importDefault(ConsoleTab_1).default}});var LogDetail_1=require("./LogDetail");Object.defineProperty(exports,"LogDetail",{enumerable:!0,get:function(){return __importDefault(LogDetail_1).default}});var PerformanceTab_1=require("./PerformanceTab");Object.defineProperty(exports,"PerformanceTab",{enumerable:!0,get:function(){return PerformanceTab_1.PerformanceTab}});var AnalyticsTab_1=require("./AnalyticsTab");Object.defineProperty(exports,"AnalyticsTab",{enumerable:!0,get:function(){return __importDefault(AnalyticsTab_1).default}});var ReduxTab_1=require("./ReduxTab");Object.defineProperty(exports,"ReduxTab",{enumerable:!0,get:function(){return __importDefault(ReduxTab_1).default}});var ReduxDetail_1=require("./ReduxDetail");Object.defineProperty(exports,"ReduxDetail",{enumerable:!0,get:function(){return __importDefault(ReduxDetail_1).default}});var CrashTab_1=require("./CrashTab");Object.defineProperty(exports,"CrashTab",{enumerable:!0,get:function(){return __importDefault(CrashTab_1).default}});var CrashDetail_1=require("./CrashDetail");Object.defineProperty(exports,"CrashDetail",{enumerable:!0,get:function(){return __importDefault(CrashDetail_1).default}});var PushTab_1=require("./PushTab");Object.defineProperty(exports,"PushTab",{enumerable:!0,get:function(){return __importDefault(PushTab_1).default}});var PushDetail_1=require("./PushDetail");Object.defineProperty(exports,"PushDetail",{enumerable:!0,get:function(){return __importDefault(PushDetail_1).default}});var SocketTab_1=require("./SocketTab");Object.defineProperty(exports,"SocketTab",{enumerable:!0,get:function(){return __importDefault(SocketTab_1).default}});var SocketDetail_1=require("./SocketDetail");Object.defineProperty(exports,"SocketDetail",{enumerable:!0,get:function(){return __importDefault(SocketDetail_1).default}});var DeviceInfoTab_1=require("./DeviceInfoTab");Object.defineProperty(exports,"DeviceInfoTab",{enumerable:!0,get:function(){return __importDefault(DeviceInfoTab_1).default}});var StorageTab_1=require("./StorageTab");Object.defineProperty(exports,"StorageTab",{enumerable:!0,get:function(){return __importDefault(StorageTab_1).default}});var DebuggingTab_1=require("./DebuggingTab");Object.defineProperty(exports,"DebuggingTab",{enumerable:!0,get:function(){return __importDefault(DebuggingTab_1).default}});var MediaGalleryTab_1=require("./MediaGalleryTab");Object.defineProperty(exports,"MediaGalleryTab",{enumerable:!0,get:function(){return MediaGalleryTab_1.MediaGalleryTab}});var SettingsPanel_1=require("./SettingsPanel");Object.defineProperty(exports,"SettingsPanel",{enumerable:!0,get:function(){return __importDefault(SettingsPanel_1).default}});var UiInspectorTab_1=require("./UiInspectorTab");Object.defineProperty(exports,"UiInspectorTab",{enumerable:!0,get:function(){return UiInspectorTab_1.UiInspectorTab}});var UiInspectorDetail_1=require("./UiInspectorDetail");Object.defineProperty(exports,"UiInspectorDetail",{enumerable:!0,get:function(){return UiInspectorDetail_1.UiInspectorDetail}});var UiInspectorOverlay_1=require("./UiInspectorOverlay");Object.defineProperty(exports,"UiInspectorOverlay",{enumerable:!0,get:function(){return UiInspectorOverlay_1.UiInspectorOverlay}});var BoxModelVisualizer_1=require("./BoxModelVisualizer");Object.defineProperty(exports,"BoxModelVisualizer",{enumerable:!0,get:function(){return BoxModelVisualizer_1.BoxModelVisualizer}});var UiA11yAuditPanel_1=require("./UiA11yAuditPanel");Object.defineProperty(exports,"UiA11yAuditPanel",{enumerable:!0,get:function(){return UiA11yAuditPanel_1.UiA11yAuditPanel}});