react-native-inapp-inspector 2.5.13 → 2.5.14

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

@@ -1,67 +1,67 @@
-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">
+import pe,{useCallback as be,useRef as fe,useState as J}from"react";import{Dimensions as Be,PanResponder as we,Platform as xe,ScrollView as Se,StyleSheet as N,Text as B,TouchableOpacity as G,View as S}from"react-native";import{useInspector as Ce}from"./InspectorContext";import{createInspectedElement as Me,extractBoxModel as Fe,getDynamicInspectorDataForPoint as Ie,auditAccessibility as ve}from"../../helpers/uiInspectorEngine";import{ActiveTab as Pe}from"../../types";import{AppColors as P}from"../../styles/AppColors";import{AppFonts as F}from"../../styles/AppFonts";import{CloseIcon as Te,LayersIcon as Ae,RulerIcon as Re}from"../NetworkIcons";import K from"../TouchableScale";import{takeNativeScreenshot as ne,triggerNativeHaptic as z}from"../../native/NativeInspector";export const UiInspectorOverlay=()=>{const{isInspectModeActive:ie,setIsInspectModeActive:q,selectedUiElement:t,setSelectedUiElement:W,showAlignmentGrid:O,setShowAlignmentGrid:ae,showDistanceGuides:re,setShowDistanceGuides:De,setVisible:le,switchActiveTab:de}=Ce(),[Q,se]=J("top"),[L,Z]=J(!1),[he,X]=J(null),D=Be.get("window"),_=be(async w=>{const{pageX:I,pageY:v,locationX:T,locationY:Y}=w.nativeEvent,R=I??T??0,ee=v??Y??0;try{const C=await Ie(R,ee);if(C&&C.layout&&(C.layout.width>0||C.layout.height>0)){try{const oe=await ne({rect:{x:Math.max(0,C.layout.pageX),y:Math.max(0,C.layout.pageY),width:Math.max(1,C.layout.width),height:Math.max(1,C.layout.height)},quality:.95,format:"png"});oe?.uri&&(C.snapshotUri=oe.uri)}catch{}X({x:C.layout.x,y:C.layout.y,width:C.layout.width,height:C.layout.height,componentName:C.displayName||C.componentName}),W(C),z();return}}catch{}const k=Math.round(Math.min(D.width-32,Math.max(48,R>D.width/2?(D.width-R)*1.5:R*1.5))),E=44,H=Math.max(0,Math.min(R-k/2,D.width-k)),V=Math.max(0,Math.min(ee-E/2,D.height-E));let te;try{const C=await ne({rect:{x:Math.max(0,H),y:Math.max(0,V),width:Math.max(1,k),height:Math.max(1,E)},quality:.95,format:"png"});C?.uri&&(te=C.uri)}catch{}const ye=Me("View",{accessible:!0,style:{position:"absolute",left:Math.round(H),top:Math.round(V),width:k,height:E}},{x:Math.round(H),y:Math.round(V),width:k,height:E,pageX:Math.round(H),pageY:Math.round(V)},void 0,void 0,te);X({x:Math.round(H),y:Math.round(V),width:k,height:E,componentName:"View"}),W(ye),z()},[D,W]),ue=fe(we.create({onStartShouldSetPanResponder:()=>!0,onMoveShouldSetPanResponder:()=>!0,onPanResponderGrant:w=>_(w),onPanResponderMove:w=>_(w)})).current;if(!ie)return null;const M=he||(t?{x:t.layout.pageX,y:t.layout.pageY,width:t.layout.width,height:t.layout.height,componentName:t.componentName}:null),U=t?.hierarchy||[],ge=t?.flattenedStyles||{},A=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(ge).filter(([w,I])=>I==null||typeof I=="object"?!1:["overflow","fontSize","fontWeight","color","letterSpacing","lineHeight","backgroundColor","borderRadius","flexDirection","justifyContent","alignItems","flex","opacity","zIndex"].includes(w)),me=w=>{if(!t||w.componentName===t.componentName)return;z();const I=w.props||{},v=w.styles||(I.style?N.flatten(I.style):{})||{},T=w.layout||{...t.layout,width:v.width||t.layout.width,height:v.height||t.layout.height},Y=Fe(v,T),R=ve(I,T,v);W({...t,componentName:w.componentName,displayName:w.displayName,props:I,originalStyles:v,flattenedStyles:v,tweakedStyles:{},layout:T,boxModel:Y,a11y:R}),X({x:T.x??t.layout.x,y:T.y??t.layout.y,width:T.width,height:T.height,componentName:w.displayName||w.componentName})},ce=()=>{z(),q(!1),de(Pe.Ui),le(!0)};return<S style={[N.absoluteFill,e.overlayContainer]}pointerEvents="box-none">
       
-      <M style={E.absoluteFill}{...he.panHandlers}/>
+      <S style={N.absoluteFill}{...ue.panHandlers}/>
 
       
-      {W&&<M style={[E.absoluteFill,e.gridPattern]}pointerEvents="none"/>}
+      {O&&<S style={[N.absoluteFill,e.gridPattern]}pointerEvents="none"/>}
 
       
-      {t&&<M style={[e.devToolsHudContainer,q==="top"?e.hudTop:e.hudBottom]}pointerEvents="box-none">
+      {t&&<S 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)}>
+          <S style={e.hudBreadcrumbBar}>
+            <Se horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.hudBreadcrumbContent}>
+              {U.length>0?U.map((w,I)=>{const v=I===U.length-1||w.componentName===t.componentName;return<pe.Fragment key={w.id||I}>
+                      {I>0&&<B style={e.hudDotSeparator}>•</B>}
+                      <G style={[e.hudBreadcrumbChip,v&&e.hudBreadcrumbChipActive]}onPress={()=>me(w)}>
                         <B style={[e.hudBreadcrumbText,v&&e.hudBreadcrumbTextActive]}>
-                          {x.displayName||x.componentName}
+                          {w.displayName||w.componentName}
                         </B>
-                      </O>
-                    </ye.Fragment>}):<M style={e.hudBreadcrumbChipActive}>
+                      </G>
+                    </pe.Fragment>}):<S style={e.hudBreadcrumbChipActive}>
                   <B style={e.hudBreadcrumbTextActive}>
                     {t.componentName}
                   </B>
-                </M>}
-            </Me>
+                </S>}
+            </Se>
 
             
-            <O style={e.hudFlipBtn}onPress={()=>{T(),de(q==="top"?"bottom":"top")}}>
+            <G style={e.hudFlipBtn}onPress={()=>{z(),se(Q==="top"?"bottom":"top")}}>
               <B style={e.hudFlipBtnText}>🔄</B>
-            </O>
-          </M>
+            </G>
+          </S>
 
           
-          <M style={e.hudBodyRow}pointerEvents="none">
+          <S 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>
+            <S style={e.hudStylesColumn}>
+              {$.length>0?$.slice(0,7).map(([w,I])=><S key={w}style={e.hudStyleRow}>
+                    <B style={e.hudStyleKey}>{w}:</B>
                     <B style={e.hudStyleVal}numberOfLines={1}>
-                      {String(F)}
+                      {String(I)}
                     </B>
-                  </M>):<M style={e.hudStyleRow}>
+                  </S>):<S style={e.hudStyleRow}>
                   <B style={e.hudStyleKey}>layout:</B>
                   <B style={e.hudStyleVal}>default</B>
-                </M>}
-            </M>
+                </S>}
+            </S>
 
             
-            <M style={e.hudBoxModelWrapper}>
-              <M style={e.boxModelMarginLayer}>
+            <S style={e.hudBoxModelWrapper}>
+              <S 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>
+                <B style={e.boxModelInsetTop}>{A.margin.top}</B>
+                <B style={e.boxModelInsetRight}>{A.margin.right}</B>
+                <B style={e.boxModelInsetBottom}>{A.margin.bottom}</B>
+                <B style={e.boxModelInsetLeft}>{A.margin.left}</B>
 
-                <M style={e.boxModelPaddingLayer}>
+                <S 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>
+                  <B style={e.boxModelInsetTop}>{A.padding.top}</B>
+                  <B style={e.boxModelInsetRight}>{A.padding.right}</B>
+                  <B style={e.boxModelInsetBottom}>{A.padding.bottom}</B>
+                  <B style={e.boxModelInsetLeft}>{A.padding.left}</B>
 
-                  <M style={e.boxModelContentLayer}>
+                  <S style={e.boxModelContentLayer}>
                     <B style={e.boxModelCoords}>
                       ({Math.round(t.layout.pageX)},{" "}
                       {Math.round(t.layout.pageY)})
@@ -70,69 +70,69 @@ import ye,{useCallback as pe,useRef as be,useState as U}from"react";import{Dimen
                       {Math.round(t.layout.width)} ×{" "}
                       {Math.round(t.layout.height)}
                     </B>
-                  </M>
-                </M>
-              </M>
-            </M>
-          </M>
-        </M>}
+                  </S>
+                </S>
+              </S>
+            </S>
+          </S>
+        </S>}
 
       
-      {C&&<M pointerEvents="none"style={[e.highlightBox,{top:C.y,left:C.x,width:C.width,height:C.height}]}>
+      {M&&<S pointerEvents="none"style={[e.highlightBox,{top:M.y,left:M.x,width:M.width,height:M.height}]}>
           
-          <M style={e.contentTint}/>
+          <S style={e.contentTint}/>
 
           
-          <M style={[e.elementBadge,C.y<50?e.elementBadgeBottom:e.elementBadgeTop]}>
-            <B style={e.elementBadgeTag}>&lt;{C.componentName}&gt;</B>
+          <S style={[e.elementBadge,M.y<50?e.elementBadgeBottom:e.elementBadgeTop]}>
+            <B style={e.elementBadgeTag}>&lt;{M.componentName}&gt;</B>
             <B style={e.elementBadgeDim}>
-              {Math.round(C.width)} × {Math.round(C.height)} pt
+              {Math.round(M.width)} × {Math.round(M.height)} pt
             </B>
-          </M>
-        </M>}
+          </S>
+        </S>}
 
       
-      {ae&&C&&<M style={E.absoluteFill}pointerEvents="none">
+      {re&&M&&<S style={N.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>
+          <S style={[e.guideLineV,{top:0,left:M.x+M.width/2,height:M.y}]}>
+            <B style={e.guideBadge}>{Math.round(M.y)} pt</B>
+          </S>
 
           
-          <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>}
+          <S style={[e.guideLineH,{top:M.y+M.height/2,left:0,width:M.x}]}>
+            <B style={e.guideBadge}>{Math.round(M.x)} pt</B>
+          </S>
+        </S>}
 
       
-      <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]}>
+      <S style={e.hudToolbar}>
+        <S style={e.hudLeftGroup}>
+          <G style={[e.modePillBtn,!L&&e.modePillBtnActive]}onPress={()=>{z(),Z(!1)}}>
+            <B style={[e.modePillText,!L&&e.modePillTextActive]}>
               Inspect
             </B>
-          </O>
+          </G>
 
-          <O style={[e.modePillBtn,N&&e.modePillBtnActive]}onPress={()=>{T(),Q(!N)}}>
-            <B style={[e.modePillText,N&&e.modePillTextActive]}>
+          <G style={[e.modePillBtn,L&&e.modePillBtnActive]}onPress={()=>{z(),Z(!L)}}>
+            <B style={[e.modePillText,L&&e.modePillTextActive]}>
               Touchables
             </B>
-          </O>
-        </M>
+          </G>
+        </S>
 
-        <M style={e.hudActions}>
-          <J style={[e.hudBtn,W&&e.hudBtnActive]}onPress={()=>{T(),ie(!W)}}>
-            <Ae color={W?P.white:"#CBD5E1"}size={14}/>
-          </J>
+        <S style={e.hudActions}>
+          <K style={[e.hudBtn,O&&e.hudBtnActive]}onPress={()=>{z(),ae(!O)}}>
+            <Re color={O?P.white:"#CBD5E1"}size={14}/>
+          </K>
 
-          {t&&<J style={[e.hudBtn,e.hudBtnPrimary]}onPress={me}>
-              <Te color={P.white}size={13}/>
+          {t&&<K style={[e.hudBtn,e.hudBtnPrimary]}onPress={ce}>
+              <Ae 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"}});
+            </K>}
+
+          <K style={[e.hudBtn,e.hudBtnClose]}onPress={()=>{z(),q(!1)}}>
+            <Te color={P.white}size={13}/>
+          </K>
+        </S>
+      </S>
+    </S>};const e=N.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:F.medium},hudBreadcrumbTextActive:{color:"#FFFFFF",fontFamily:F.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:F.regular},hudStyleVal:{color:"#F8FAFC",fontSize:10,fontFamily:F.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:F.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:F.bold,color:"#FBBF24"},boxModelContentLayer:{alignItems:"center",justifyContent:"center"},boxModelCoords:{color:"#FACC15",fontSize:8,fontFamily:F.bold},boxModelDimensions:{color:"#FACC15",fontSize:9,fontFamily:F.bold},boxModelInsetTop:{position:"absolute",top:1,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:F.medium},boxModelInsetBottom:{position:"absolute",bottom:1,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:F.medium},boxModelInsetLeft:{position:"absolute",left:2,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:F.medium},boxModelInsetRight:{position:"absolute",right:2,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:F.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:F.bold,color:"#818CF8"},elementBadgeDim:{fontSize:9.5,fontFamily:F.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:F.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:F.medium,color:"#94A3B8"},modePillTextActive:{color:P.white,fontFamily:F.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:F.bold,color:P.white},hudBtnClose:{backgroundColor:"#E11D48",borderColor:"#E11D48"}});

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

@@ -1,4 +1,4 @@
-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}>
+import"react";import{ScrollView as G,StyleSheet as R,Text as C,TouchableOpacity as F,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:B,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}>
@@ -74,7 +74,7 @@ import"react";import{ScrollView as G,StyleSheet as A,Text as C,TouchableOpacity
       <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)}}>
+          <F 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
@@ -82,20 +82,20 @@ import"react";import{ScrollView as G,StyleSheet as A,Text as C,TouchableOpacity
             <C style={e.toolCardSub}>
               {I?"Enabled":"Disabled"}
             </C>
-          </B>
+          </F>
 
-          <B style={e.toolCard}onPress={z}>
+          <F 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>
+          </F>
         </T>
       </T>
 
       
-      {F.length>0&&<T style={e.historySection}>
+      {B.length>0&&<T style={e.historySection}>
           <T style={e.historyHeader}>
-            <C style={e.sectionHeader}>RECENTLY INSPECTED ({F.length})</C>
+            <C style={e.sectionHeader}>RECENTLY INSPECTED ({B.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>
@@ -103,7 +103,7 @@ import"react";import{ScrollView as G,StyleSheet as A,Text as C,TouchableOpacity
           </T>
 
           <T style={e.historyList}>
-            {F.map((x,R)=><B key={x.id||R}style={e.historyItem}onPress={()=>{w(),D(x)}}>
+            {B.map((x,A)=><F key={x.id||A}style={e.historyItem}onPress={()=>{w(),D(x)}}>
                 <T style={e.historyItemLeft}>
                   <C style={e.historyItemTag}>&lt;{x.componentName}&gt;</C>
                   <C style={e.historyItemDim}>
@@ -111,7 +111,7 @@ import"react";import{ScrollView as G,StyleSheet as A,Text as C,TouchableOpacity
                   </C>
                 </T>
                 <M color={t.grayTextWeak}size={12}direction="right"/>
-              </B>)}
+              </F>)}
           </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}});
+    </G>};const e=R.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.js

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