react-native-inapp-inspector 2.5.12 → 2.5.14

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

@@ -0,0 +1,422 @@
+import Ze,{useRef as et,useState as _}from"react";import{Dimensions as tt,Image as Re,Modal as Ct,ScrollView as Z,StyleSheet as ke,Text as C,TextInput as Tt,TouchableOpacity as H,View as T}from"react-native";import{useInspector as Ft}from"./InspectorContext";import{auditAccessibility as ft,categorizeStyles as Bt,extractBoxModel as St,generateCssSnippet as Pe,generateFullJsxSegmentSnippet as xt,generateStyleSheetSnippet as ee}from"../../helpers/uiInspectorEngine";import{BoxModelVisualizer as It}from"./BoxModelVisualizer";import{UiA11yAuditPanel as Et}from"./UiA11yAuditPanel";import At from"../JsonViewer";import Ce from"../TouchableScale";import{AccessibilityIcon as Rt,BoxModelIcon as kt,ChevronIcon as He,CloseIcon as De,CodeBracketsIcon as Te,CopyIcon as U,LayersIcon as Pt,SearchIcon as Ve}from"../NetworkIcons";import{AppColors as f}from"../../styles/AppColors";import{AppFonts as F}from"../../styles/AppFonts";import{triggerNativeHaptic as v}from"../../native/NativeInspector";import{showToast as $}from"../../helpers/toast";import X from"@react-native-clipboard/clipboard";export const UiInspectorDetail=()=>{const{selectedUiElement:N,setSelectedUiElement:Fe,uiActiveSubTab:j,setUiActiveSubTab:Le}=Ft(),[J,ve]=_(""),[je,Q]=_(!1),[We,fe]=_(null),[W,Be]=_("rn"),Me=et(null);if(!N)return null;const{componentName:A,hierarchy:G,props:K,flattenedStyles:Oe,boxModel:R,a11y:Ne,layout:z,snapshotUri:q}=N,Y=tt.get("window"),Se=Y.width*Y.height,xe=z.width*z.height,Ge=Se>0?(xe/Se*100).toFixed(1):"0.0",Ue=z.height>0?(z.width/z.height).toFixed(2):"1.00",D={...Oe},k=Bt(D),$e=typeof A=="string"&&(A.startsWith("RCT")||["View","Text","Image","ScrollView","TextInput","Modal"].includes(A)),P=xt(A,K,D),we=()=>{X.setString(P.code),v(),$("Copied full JSX to clipboard")},Xe=()=>{P.sourceFile&&(X.setString(`${P.sourceFile}:${P.lineNumber||1}`),v(),$("Copied source location"))},Ie=()=>{const B=W==="rn"?ee(A,D):Pe(A,D);X.setString(B),v(),$(W==="rn"?"Copied StyleSheet":"Copied CSS")},Je=()=>{X.setString(JSON.stringify(K,null,2)),v(),$("Copied props as JSON")},Ke=(B,S)=>{X.setString(String(S)),v(),fe(B),$(`Copied "${B}: ${S}"`),setTimeout(()=>fe(null),1500)},ze=B=>{if(B.componentName===A)return;v();const S=B.props||{},I=B.styles||(S.style?ke.flatten(S.style):{})||{},E=B.layout||{...z,width:I.width||z.width,height:I.height||z.height},V=St(I,E),L=ft(S,E,I);Fe({...N,componentName:B.componentName,displayName:B.displayName,props:S,originalStyles:I,flattenedStyles:I,tweakedStyles:{},layout:E,boxModel:V,a11y:L})},qe=(B,S)=>{if(typeof S!="string")return!1;const I=B.toLowerCase();return I.includes("color")||I.includes("background")||S.startsWith("#")||S.startsWith("rgb")||S.startsWith("hsl")},M=(B,S,I,E)=>{const V=Object.entries(S);return V.length===0?null:<T key={B}style={[e.styleGroupCard,{borderLeftColor:E}]}>
+        <T style={e.styleGroupHeader}>
+          <T style={e.styleGroupTitleRow}>
+            <C style={e.styleGroupIcon}>{I}</C>
+            <C style={[e.styleGroupTitle,{color:E}]}>{B.toUpperCase()}</C>
+          </T>
+          <T style={[e.styleGroupBadge,{backgroundColor:`${E}18`}]}>
+            <C style={[e.styleGroupBadgeText,{color:E}]}>{V.length}</C>
+          </T>
+        </T>
+
+        <T style={e.styleRowsContainer}>
+          {V.map(([L,O])=>{const Ae=qe(L,O),Qe=We===L;return<H key={L}activeOpacity={.7}style={[e.styleRow,Qe&&e.styleRowCopied]}onPress={()=>Ke(L,O)}>
+                <C style={e.stylePropKey}>{L}</C>
+                <T style={e.styleValueContainer}>
+                  {Ae&&<T style={[e.colorSwatchPreview,{backgroundColor:String(O)}]}/>}
+                  <C style={[e.stylePropValue,Ae&&e.stylePropColorValue]}>
+                    {typeof O=="object"?JSON.stringify(O):String(O)}
+                  </C>
+                  {typeof O=="number"&&<C style={e.styleUnitText}>pt</C>}
+                </T>
+              </H>})}
+        </T>
+      </T>},Ee=Object.entries(K).filter(([B,S])=>{if(!J)return!0;const I=J.toLowerCase();return B.toLowerCase().includes(I)||String(S).toLowerCase().includes(I)}),Ye=[{key:"styles",label:"Styles",icon:Pt},{key:"jsx",label:"JSX Code",icon:Te},{key:"boxmodel",label:"Box Model",icon:kt},{key:"tree",label:`Hierarchy (${G.length})`,icon:He},{key:"props",label:`Props (${Object.keys(K).length})`,icon:Ve},{key:"a11y",label:"A11y",icon:Rt}],_e=Object.keys(k.layout).length>0||Object.keys(k.spacing).length>0||Object.keys(k.appearance).length>0||Object.keys(k.typography).length>0||Object.keys(k.borders).length>0||Object.keys(k.transforms).length>0||Object.keys(k.other).length>0;return<T style={e.container}>
+      
+      <T style={e.topControlBar}>
+        <T style={e.elementTagRow}>
+          <T style={e.componentPill}>
+            <C style={e.componentTagBracket}>&lt;</C>
+            <C style={e.componentTagName}>{A}</C>
+            <C style={e.componentTagBracket}> /&gt;</C>
+            <T style={e.typeBadge}>
+              <C style={e.typeBadgeText}>
+                {$e?"Native":"React"}
+              </C>
+            </T>
+          </T>
+
+          
+          <Z horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.breadcrumbScroll}>
+            {G.map((B,S)=>{const I=S===G.length-1||B.componentName===A;return<Ze.Fragment key={B.id||S}>
+                  <He color="#94A3B8"size={8}direction="right"/>
+                  <H style={[e.crumbChip,I&&e.crumbChipActive]}onPress={()=>ze(B)}>
+                    <C style={[e.crumbChipText,I&&e.crumbChipTextActive]}numberOfLines={1}>
+                      {B.displayName}
+                    </C>
+                  </H>
+                </Ze.Fragment>})}
+          </Z>
+        </T>
+
+        <T style={e.topActions}>
+          <Ce style={e.quickActionBtn}onPress={we}>
+            <Te color={f.brandPurple}size={11}/>
+            <C style={e.quickActionBtnText}>JSX</C>
+          </Ce>
+          <Ce style={e.closeBtn}onPress={()=>{v(),Fe(null)}}>
+            <De color={f.slate600}size={12}/>
+          </Ce>
+        </T>
+      </T>
+
+      
+      <Ct visible={je}transparent animationType="fade"onRequestClose={()=>Q(!1)}>
+        <T style={e.modalBackdrop}>
+          <T style={e.modalCard}>
+            <T style={e.modalHeader}>
+              <C style={e.modalTitle}>
+                &lt;{A}&gt; Preview ({Math.round(z.width)} × {Math.round(z.height)} pt)
+              </C>
+              <H style={e.modalCloseBtn}onPress={()=>Q(!1)}>
+                <De color={f.white}size={15}/>
+              </H>
+            </T>
+            {q&&<T style={e.modalImageContainer}>
+                <Re source={{uri:q}}style={e.modalImage}resizeMode="contain"/>
+              </T>}
+          </T>
+        </T>
+      </Ct>
+
+      
+      <T style={e.subTabBarWrapper}>
+        <Z ref={Me}horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.subTabBarContent}>
+          {Ye.map(B=>{const S=j===B.key,I=B.icon;return<H key={B.key}style={[e.subTabItem,S&&e.subTabItemActive]}onPress={()=>{v(),Le(B.key)}}>
+                <I color={S?f.white:"#64748B"}size={12}/>
+                <C style={[e.subTabText,S&&e.subTabTextActive]}>
+                  {B.label}
+                </C>
+              </H>})}
+        </Z>
+      </T>
+
+      
+      <Z style={e.tabScrollContent}contentContainerStyle={e.tabScrollInner}showsVerticalScrollIndicator={!1}>
+        
+        {j==="styles"&&<T style={e.stylesTabContainer}>
+            
+            <T style={e.heroSnapshotCard}>
+              <T style={e.heroImageFrame}>
+                {q?<H activeOpacity={.9}style={e.heroImageTouchable}onPress={()=>Q(!0)}>
+                    <Re source={{uri:q}}style={e.heroImage}resizeMode="contain"/>
+                    <T style={e.zoomGlassBadge}>
+                      <C style={e.zoomGlassBadgeText}>🔍 Zoom Lightbox</C>
+                    </T>
+                  </H>:<T style={e.heroPlaceholder}>
+                    <C style={e.heroPlaceholderIcon}>🎨</C>
+                    <C style={e.heroPlaceholderText}>Rendered Component Frame</C>
+                  </T>}
+              </T>
+
+              
+              <T style={e.metricsGrid}>
+                <T style={e.metricCell}>
+                  <C style={e.metricCellLabel}>WIDTH</C>
+                  <C style={e.metricCellValue}>{Math.round(z.width)}<C style={e.metricUnit}> pt</C></C>
+                </T>
+                <T style={e.metricCell}>
+                  <C style={e.metricCellLabel}>HEIGHT</C>
+                  <C style={e.metricCellValue}>{Math.round(z.height)}<C style={e.metricUnit}> pt</C></C>
+                </T>
+                <T style={e.metricCell}>
+                  <C style={e.metricCellLabel}>PAGE X</C>
+                  <C style={e.metricCellValue}>{Math.round(z.pageX)}<C style={e.metricUnit}> pt</C></C>
+                </T>
+                <T style={e.metricCell}>
+                  <C style={e.metricCellLabel}>PAGE Y</C>
+                  <C style={e.metricCellValue}>{Math.round(z.pageY)}<C style={e.metricUnit}> pt</C></C>
+                </T>
+              </T>
+
+              
+              <T style={e.specsBar}>
+                <T style={e.specsTag}>
+                  <C style={e.specsTagLabel}>Coverage</C>
+                  <C style={e.specsTagVal}>{Ge}% ({Ue}:1)</C>
+                </T>
+                <T style={e.specsTag}>
+                  <C style={e.specsTagLabel}>Tag ID</C>
+                  <C style={e.specsTagVal}>{N.nativeTag?`#${N.nativeTag}`:"Virtual Fiber"}</C>
+                </T>
+              </T>
+            </T>
+
+            
+            <T style={e.computedLayoutCard}>
+              <T style={e.computedLayoutHeader}>
+                <C style={e.computedLayoutTitle}>⚡ COMPUTED CONSTRAINTS</C>
+                <C style={e.computedLayoutSub}>Resolved Frame & Insets</C>
+              </T>
+              <T style={e.computedGrid}>
+                <T style={e.computedItem}>
+                  <C style={e.computedItemKey}>Display</C>
+                  <C style={e.computedItemVal}>{D.display||"flex"}</C>
+                </T>
+                <T style={e.computedItem}>
+                  <C style={e.computedItemKey}>Position</C>
+                  <C style={e.computedItemVal}>{D.position||"relative"}</C>
+                </T>
+                <T style={e.computedItem}>
+                  <C style={e.computedItemKey}>Flex Direction</C>
+                  <C style={e.computedItemVal}>{D.flexDirection||"column"}</C>
+                </T>
+                <T style={e.computedItem}>
+                  <C style={e.computedItemKey}>Box Sizing</C>
+                  <C style={e.computedItemVal}>border-box</C>
+                </T>
+              </T>
+            </T>
+
+            
+            {_e&&<>
+                {M("Flex Layout",k.layout,"\u26A1","#8B5CF6")}
+                {M("Spacing & Margins",k.spacing,"\u{1F4E6}","#10B981")}
+                {M("Appearance & Color",k.appearance,"\u{1F3A8}","#F43F5E")}
+                {M("Typography",k.typography,"\u{1F524}","#F59E0B")}
+                {M("Borders & Corners",k.borders,"\u{1F532}","#0D9488")}
+                {M("Transforms",k.transforms,"\u{1F504}","#EC4899")}
+                {M("Other Properties",k.other,"\u2699\uFE0F","#64748B")}
+              </>}
+
+            
+            <T style={e.codeSnippetCard}>
+              <T style={e.codeSnippetHeader}>
+                <T style={e.codeSnippetTabs}>
+                  <H style={[e.codeFormatBtn,W==="rn"&&e.codeFormatBtnActive]}onPress={()=>Be("rn")}>
+                    <C style={[e.codeFormatBtnText,W==="rn"&&e.codeFormatBtnTextActive]}>
+                      React Native StyleSheet
+                    </C>
+                  </H>
+                  <H style={[e.codeFormatBtn,W==="css"&&e.codeFormatBtnActive]}onPress={()=>Be("css")}>
+                    <C style={[e.codeFormatBtnText,W==="css"&&e.codeFormatBtnTextActive]}>
+                      Web CSS
+                    </C>
+                  </H>
+                </T>
+
+                <H style={e.codeCopyBtn}onPress={Ie}>
+                  <U color={f.brandPurple}size={11}/>
+                  <C style={e.codeCopyBtnText}>Copy</C>
+                </H>
+              </T>
+              <T style={e.codeSnippetBody}>
+                <C style={e.codeSnippetText}numberOfLines={14}>
+                  {W==="rn"?ee(A,D):Pe(A,D)}
+                </C>
+              </T>
+            </T>
+          </T>}
+
+        
+        {j==="jsx"&&<T style={e.jsxTabContainer}>
+            
+            <T style={e.sourceLocationCard}>
+              <T style={e.sourceLocationHeader}>
+                <C style={e.sourceLocationTitle}>📍 CODEBASE LOCATION</C>
+                {P.sourceFile&&<H style={e.copyPathBtn}onPress={Xe}>
+                    <U color={f.brandPurple}size={11}/>
+                    <C style={e.copyPathBtnText}>Copy Path</C>
+                  </H>}
+              </T>
+              <T style={e.sourceLocationBody}>
+                <C style={e.sourceLocationText}>
+                  {P.sourceLocation||(P.sourceFile?`${P.sourceFile}:${P.lineNumber||1}`:`${A}.tsx (Rendered React Node)`)}
+                </C>
+                {P.lineNumber!=null&&<T style={e.lineNumberBadge}>
+                    <C style={e.lineNumberBadgeText}>Line {P.lineNumber}</C>
+                  </T>}
+              </T>
+            </T>
+
+            
+            <T style={e.jsxCodeCard}>
+              <T style={e.jsxCodeHeader}>
+                <T style={e.jsxCodeTitleRow}>
+                  <Te color={f.brandPurple}size={14}/>
+                  <C style={e.jsxCodeTitle}>FULL JSX CODE</C>
+                </T>
+                <H style={e.jsxCopyActionBtn}onPress={we}>
+                  <U color={f.white}size={11}/>
+                  <C style={e.jsxCopyActionBtnText}>Copy JSX</C>
+                </H>
+              </T>
+
+              <T style={e.jsxCodeBody}>
+                <C style={e.jsxCodeContent}selectable>
+                  {P.code}
+                </C>
+              </T>
+            </T>
+
+            
+            <T style={e.codeSnippetCard}>
+              <T style={e.codeSnippetHeader}>
+                <C style={e.connectedStyleTitle}>🎨 CONNECTED STYLESHEET</C>
+                <H style={e.codeCopyBtn}onPress={Ie}>
+                  <U color={f.brandPurple}size={11}/>
+                  <C style={e.codeCopyBtnText}>Copy Styles</C>
+                </H>
+              </T>
+              <T style={e.codeSnippetBody}>
+                <C style={e.codeSnippetText}numberOfLines={14}>
+                  {ee(A,D)}
+                </C>
+              </T>
+            </T>
+          </T>}
+
+        
+        {j==="boxmodel"&&<T style={e.boxModelTabContainer}>
+            <T style={e.boxModelCard}>
+              <C style={e.boxModelSectionTitle}>📦 VISUAL BOX MODEL (CSS METRICS)</C>
+              <It boxModel={R}/>
+            </T>
+
+            
+            <T style={e.boxModelMetricsTable}>
+              <C style={e.tableTitle}>SPACING SUMMARY</C>
+              <T style={e.tableRow}>
+                <C style={e.tableHeaderCell}>Layer</C>
+                <C style={e.tableHeaderCell}>Top</C>
+                <C style={e.tableHeaderCell}>Right</C>
+                <C style={e.tableHeaderCell}>Bottom</C>
+                <C style={e.tableHeaderCell}>Left</C>
+              </T>
+              <T style={e.tableRow}>
+                <C style={[e.tableCell,{color:"#D97706",fontFamily:F.bold}]}>Margin</C>
+                <C style={e.tableCell}>{R.margin.top} pt</C>
+                <C style={e.tableCell}>{R.margin.right} pt</C>
+                <C style={e.tableCell}>{R.margin.bottom} pt</C>
+                <C style={e.tableCell}>{R.margin.left} pt</C>
+              </T>
+              <T style={e.tableRow}>
+                <C style={[e.tableCell,{color:"#CA8A04",fontFamily:F.bold}]}>Border</C>
+                <C style={e.tableCell}>{R.border.top} pt</C>
+                <C style={e.tableCell}>{R.border.right} pt</C>
+                <C style={e.tableCell}>{R.border.bottom} pt</C>
+                <C style={e.tableCell}>{R.border.left} pt</C>
+              </T>
+              <T style={e.tableRow}>
+                <C style={[e.tableCell,{color:"#059669",fontFamily:F.bold}]}>Padding</C>
+                <C style={e.tableCell}>{R.padding.top} pt</C>
+                <C style={e.tableCell}>{R.padding.right} pt</C>
+                <C style={e.tableCell}>{R.padding.bottom} pt</C>
+                <C style={e.tableCell}>{R.padding.left} pt</C>
+              </T>
+              <T style={e.tableRow}>
+                <C style={[e.tableCell,{color:"#4F46E5",fontFamily:F.bold}]}>Content</C>
+                <C style={[e.tableCell,{flex:4}]}>
+                  {R.content.width} × {R.content.height} pt (Area: {Math.round(xe)} pt²)
+                </C>
+              </T>
+            </T>
+
+            
+            <T style={e.insetsCard}>
+              <C style={e.tableTitle}>SCREEN INSETS & EDGES</C>
+              <T style={e.insetsGrid}>
+                <T style={e.insetRow}>
+                  <C style={e.insetLabel}>Distance from Screen Top:</C>
+                  <C style={e.insetValue}>{Math.round(z.pageY)} pt</C>
+                </T>
+                <T style={e.insetRow}>
+                  <C style={e.insetLabel}>Distance from Screen Left:</C>
+                  <C style={e.insetValue}>{Math.round(z.pageX)} pt</C>
+                </T>
+                <T style={e.insetRow}>
+                  <C style={e.insetLabel}>Distance from Screen Bottom:</C>
+                  <C style={e.insetValue}>
+                    {Math.max(0,Math.round(Y.height-(z.pageY+z.height)))} pt
+                  </C>
+                </T>
+                <T style={e.insetRow}>
+                  <C style={e.insetLabel}>Distance from Screen Right:</C>
+                  <C style={e.insetValue}>
+                    {Math.max(0,Math.round(Y.width-(z.pageX+z.width)))} pt
+                  </C>
+                </T>
+              </T>
+            </T>
+          </T>}
+
+        
+        {j==="tree"&&<T style={e.treeTabContainer}>
+            <T style={e.treeHeaderCard}>
+              <C style={e.treeHeaderTitle}>COMPONENT ANCESTOR TREE</C>
+              <C style={e.treeHeaderSubtitle}>
+                Tap any parent or child node in the hierarchy to inspect its styles, props, and box model.
+              </C>
+            </T>
+
+            <T style={e.treeList}>
+              {G.map((B,S)=>{const I=S===G.length-1||B.componentName===A,E=S;return<H key={B.id||S}activeOpacity={.7}style={[e.treeItemCard,{marginLeft:E*14},I&&e.treeItemCardActive]}onPress={()=>ze(B)}>
+                    <T style={e.treeItemTopRow}>
+                      <T style={e.treeTagRow}>
+                        <T style={[e.depthBadge,I&&e.depthBadgeActive]}>
+                          <C style={[e.depthBadgeText,I&&e.depthBadgeTextActive]}>
+                            L{E}
+                          </C>
+                        </T>
+                        <C style={[e.treeTagName,I&&e.treeTagNameActive]}>
+                          &lt;{B.displayName}&gt;
+                        </C>
+                      </T>
+
+                      {I?<T style={e.activePillBadge}>
+                          <C style={e.activePillBadgeText}>CURRENT</C>
+                        </T>:<T style={e.inspectArrowBtn}>
+                          <C style={e.inspectArrowBtnText}>Inspect →</C>
+                        </T>}
+                    </T>
+
+                    {B.layout&&<T style={e.treeItemBottomRow}>
+                        <C style={e.treeItemMetric}>
+                          Frame: {Math.round(B.layout.width)} × {Math.round(B.layout.height)} pt
+                        </C>
+                        {B.isHostComponent&&<C style={e.treeItemHostBadge}>Native</C>}
+                      </T>}
+                  </H>})}
+            </T>
+          </T>}
+
+        
+        {j==="props"&&<T style={e.propsTabContainer}>
+            <T style={e.propsSearchRow}>
+              <T style={e.searchBar}>
+                <Ve color={f.slate400}size={14}/>
+                <Tt style={e.searchInput}placeholder="Filter props by name or value..."placeholderTextColor={f.slate400}value={J}onChangeText={ve}/>
+              </T>
+
+              <Ce style={e.copyPropsBtn}onPress={Je}>
+                <U color={f.white}size={11}/>
+                <C style={e.copyPropsBtnText}>Copy All</C>
+              </Ce>
+            </T>
+
+            {Ee.length===0?<T style={e.emptyPropsBox}>
+                <C style={e.emptyPropsText}>No props match "{J}"</C>
+              </T>:<T style={e.propsList}>
+                {Ee.map(([B,S])=>{const I=typeof S,E=I==="function",V=I==="object"&&S!==null,L=!E&&!V;return<T key={B}style={e.propItemCard}>
+                      <T style={e.propHeader}>
+                        <C style={e.propKeyName}>{B}</C>
+                        <T style={[e.typeBadgePrimary,E&&e.typeBadgeFn,V&&e.typeBadgeObj,L&&e.typeBadgePrim]}>
+                          <C style={e.typeBadgePrimaryText}>
+                            {E?"function":V?"object":I}
+                          </C>
+                        </T>
+                      </T>
+
+                      {V?<T style={e.jsonViewerWrapper}>
+                          <At data={S}defaultExpandDepth={1}/>
+                        </T>:<C style={e.propValueText}numberOfLines={3}>
+                          {E?"\u0192 () { [native / custom handler] }":String(S)}
+                        </C>}
+                    </T>})}
+              </T>}
+          </T>}
+
+        
+        {j==="a11y"&&<Et a11y={Ne}/>}
+      </Z>
+    </T>};const e=ke.create({container:{flex:1,backgroundColor:"#F8FAFC"},topControlBar:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",backgroundColor:f.white,paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:"#E2E8F0"},elementTagRow:{flex:1,flexDirection:"row",alignItems:"center",gap:6,marginRight:8},componentPill:{flexDirection:"row",alignItems:"center",backgroundColor:"#EEF2FF",paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1,borderColor:"#C7D2FE"},componentTagBracket:{fontSize:12,fontFamily:F.bold,color:"#D97706"},componentTagName:{fontSize:12,fontFamily:F.bold,color:f.brandPurple,paddingHorizontal:2},typeBadge:{backgroundColor:"#FFFFFF",paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,marginLeft:5,borderWidth:1,borderColor:"#E2E8F0"},typeBadgeText:{fontSize:9,fontFamily:F.semiBold,color:"#64748B"},breadcrumbScroll:{alignItems:"center",gap:4},crumbChip:{paddingHorizontal:6,paddingVertical:2.5,borderRadius:4,backgroundColor:"#F1F5F9"},crumbChipActive:{backgroundColor:f.brandPurple},crumbChipText:{fontSize:10,fontFamily:F.medium,color:"#64748B"},crumbChipTextActive:{color:f.white,fontFamily:F.bold},topActions:{flexDirection:"row",alignItems:"center",gap:6},quickActionBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:"#EEF2FF",paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1,borderColor:"#C7D2FE"},quickActionBtnText:{fontSize:10,fontFamily:F.bold,color:f.brandPurple},closeBtn:{padding:5,borderRadius:6,backgroundColor:"#F1F5F9",borderWidth:1,borderColor:"#E2E8F0"},subTabBarWrapper:{backgroundColor:f.white,borderBottomWidth:1,borderBottomColor:"#E2E8F0",paddingVertical:6},subTabBarContent:{paddingHorizontal:10,gap:6,alignItems:"center"},subTabItem:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:5,borderRadius:7,backgroundColor:"#F1F5F9",gap:4.5,borderWidth:1,borderColor:"#E2E8F0"},subTabItemActive:{backgroundColor:f.brandPurple,borderColor:"#4338CA",shadowColor:f.brandPurple,shadowOffset:{width:0,height:1.5},shadowOpacity:.2,shadowRadius:2,elevation:2},subTabText:{fontSize:11,fontFamily:F.medium,color:"#475569"},subTabTextActive:{color:f.white,fontFamily:F.bold},tabScrollContent:{flex:1},tabScrollInner:{padding:12,paddingBottom:32},stylesTabContainer:{gap:10},heroSnapshotCard:{backgroundColor:f.white,borderRadius:12,borderWidth:1,borderColor:"#E2E8F0",overflow:"hidden",shadowColor:"#0F172A",shadowOffset:{width:0,height:2},shadowOpacity:.06,shadowRadius:4,elevation:2},heroImageFrame:{width:"100%",height:125,backgroundColor:"#0F172A",justifyContent:"center",alignItems:"center",position:"relative"},heroImageTouchable:{width:"100%",height:"100%",justifyContent:"center",alignItems:"center",padding:10},heroImage:{width:"100%",height:"100%"},zoomGlassBadge:{position:"absolute",top:8,right:8,backgroundColor:"rgba(15, 23, 42, 0.75)",paddingHorizontal:8,paddingVertical:3.5,borderRadius:6,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.2)"},zoomGlassBadgeText:{fontSize:9.5,fontFamily:F.bold,color:"#FFFFFF"},heroPlaceholder:{alignItems:"center",justifyContent:"center"},heroPlaceholderIcon:{fontSize:24,marginBottom:4},heroPlaceholderText:{fontSize:10,fontFamily:F.bold,color:"#94A3B8"},metricsGrid:{flexDirection:"row",borderTopWidth:1,borderTopColor:"#E2E8F0",backgroundColor:"#FFFFFF"},metricCell:{flex:1,paddingVertical:8,paddingHorizontal:6,alignItems:"center",borderRightWidth:1,borderRightColor:"#F1F5F9"},metricCellLabel:{fontSize:8.5,fontFamily:F.bold,color:"#94A3B8",letterSpacing:.5},metricCellValue:{fontSize:12.5,fontFamily:F.bold,color:"#0F172A",marginTop:2},metricUnit:{fontSize:9,fontFamily:F.regular,color:"#64748B"},specsBar:{flexDirection:"row",justifyContent:"space-between",backgroundColor:"#F8FAFC",paddingHorizontal:12,paddingVertical:6.5,borderTopWidth:1,borderTopColor:"#E2E8F0"},specsTag:{flexDirection:"row",alignItems:"center",gap:4},specsTagLabel:{fontSize:9.5,fontFamily:F.medium,color:"#64748B"},specsTagVal:{fontSize:9.5,fontFamily:F.bold,color:"#0F172A"},computedLayoutCard:{backgroundColor:f.white,borderRadius:10,padding:12,borderWidth:1,borderColor:"#E2E8F0"},computedLayoutHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8,paddingBottom:6,borderBottomWidth:1,borderBottomColor:"#F1F5F9"},computedLayoutTitle:{fontSize:10.5,fontFamily:F.bold,color:"#6366F1",letterSpacing:.6},computedLayoutSub:{fontSize:9.5,fontFamily:F.medium,color:"#94A3B8"},computedGrid:{flexDirection:"row",flexWrap:"wrap",gap:8},computedItem:{width:"48%",backgroundColor:"#F8FAFC",paddingHorizontal:8,paddingVertical:6,borderRadius:6,borderWidth:1,borderColor:"#E2E8F0",flexDirection:"row",justifyContent:"space-between",alignItems:"center"},computedItemKey:{fontSize:10,fontFamily:F.medium,color:"#64748B"},computedItemVal:{fontSize:10.5,fontFamily:F.bold,color:"#0F172A"},styleGroupCard:{backgroundColor:f.white,borderRadius:10,padding:12,borderWidth:1,borderColor:"#E2E8F0",borderLeftWidth:3.5,shadowColor:"#0F172A",shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:2,elevation:1},styleGroupHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8,paddingBottom:6,borderBottomWidth:1,borderBottomColor:"#F1F5F9"},styleGroupTitleRow:{flexDirection:"row",alignItems:"center",gap:6},styleGroupIcon:{fontSize:13},styleGroupTitle:{fontSize:11,fontFamily:F.bold,letterSpacing:.6},styleGroupBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:10},styleGroupBadgeText:{fontSize:9.5,fontFamily:F.bold},styleRowsContainer:{gap:2},styleRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:4.5,paddingHorizontal:6,borderRadius:6},styleRowCopied:{backgroundColor:"#ECFDF5"},stylePropKey:{fontSize:11.5,fontFamily:F.medium,color:"#475569"},styleValueContainer:{flexDirection:"row",alignItems:"center",gap:6},colorSwatchPreview:{width:13,height:13,borderRadius:3,borderWidth:1,borderColor:"rgba(0,0,0,0.15)"},stylePropValue:{fontSize:11.5,fontFamily:F.semiBold,color:"#0F172A"},stylePropColorValue:{fontFamily:F.bold,color:"#6366F1"},styleUnitText:{fontSize:9.5,fontFamily:F.regular,color:"#94A3B8"},codeSnippetCard:{backgroundColor:"#F8FAFC",borderRadius:10,borderWidth:1,borderColor:"#E2E8F0",overflow:"hidden"},codeSnippetHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingHorizontal:10,paddingVertical:6,borderBottomWidth:1,borderBottomColor:"#E2E8F0",backgroundColor:"#EEF2FF"},codeSnippetTabs:{flexDirection:"row",gap:4},codeFormatBtn:{paddingHorizontal:8,paddingVertical:3,borderRadius:5},codeFormatBtnActive:{backgroundColor:f.white,shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.1,shadowRadius:1,elevation:1},codeFormatBtnText:{fontSize:9.5,fontFamily:F.medium,color:"#64748B"},codeFormatBtnTextActive:{color:f.brandPurple,fontFamily:F.bold},codeCopyBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:f.white,paddingHorizontal:8,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:"#C7D2FE"},codeCopyBtnText:{fontSize:10,fontFamily:F.bold,color:f.brandPurple},codeSnippetBody:{padding:10,backgroundColor:"#FFFFFF"},codeSnippetText:{fontSize:11,fontFamily:"Courier",color:"#334155",lineHeight:16},jsxTabContainer:{gap:12},sourceLocationCard:{backgroundColor:f.white,borderRadius:10,borderWidth:1,borderColor:"#E2E8F0",overflow:"hidden"},sourceLocationHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",backgroundColor:"#EEF2FF",paddingHorizontal:12,paddingVertical:7,borderBottomWidth:1,borderBottomColor:"#E0E7FF"},sourceLocationTitle:{fontSize:10,fontFamily:F.bold,color:f.brandPurple,letterSpacing:.6},copyPathBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:f.white,paddingHorizontal:7,paddingVertical:2.5,borderRadius:4,borderWidth:1,borderColor:"#C7D2FE"},copyPathBtnText:{fontSize:9.5,fontFamily:F.bold,color:f.brandPurple},sourceLocationBody:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",padding:10},sourceLocationText:{flex:1,fontSize:11.5,fontFamily:F.bold,color:"#1E293B"},lineNumberBadge:{backgroundColor:"#F1F5F9",paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:"#E2E8F0"},lineNumberBadgeText:{fontSize:9.5,fontFamily:F.semiBold,color:"#64748B"},jsxCodeCard:{backgroundColor:f.white,borderRadius:10,borderWidth:1,borderColor:"#C7D2FE",overflow:"hidden"},jsxCodeHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",backgroundColor:"#EEF2FF",paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:"#E0E7FF"},jsxCodeTitleRow:{flexDirection:"row",alignItems:"center",gap:6},jsxCodeTitle:{fontSize:10.5,fontFamily:F.bold,color:f.brandPurple,letterSpacing:.6},jsxCopyActionBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:f.brandPurple,paddingHorizontal:9,paddingVertical:4,borderRadius:6},jsxCopyActionBtnText:{fontSize:10.5,fontFamily:F.bold,color:f.white},jsxCodeBody:{padding:12,backgroundColor:"#FAF5FF"},jsxCodeContent:{fontSize:12,fontFamily:"Courier",color:"#4C1D95",lineHeight:18},connectedStyleTitle:{fontSize:10,fontFamily:F.bold,color:f.brandPurple,letterSpacing:.6},boxModelTabContainer:{gap:12},boxModelCard:{backgroundColor:f.white,borderRadius:10,padding:12,borderWidth:1,borderColor:"#E2E8F0"},boxModelSectionTitle:{fontSize:10.5,fontFamily:F.bold,color:"#64748B",letterSpacing:.5,marginBottom:8},boxModelMetricsTable:{backgroundColor:f.white,borderRadius:10,padding:12,borderWidth:1,borderColor:"#E2E8F0"},tableTitle:{fontSize:10,fontFamily:F.bold,color:"#64748B",letterSpacing:.5,marginBottom:8},tableRow:{flexDirection:"row",borderBottomWidth:1,borderBottomColor:"#F1F5F9",paddingVertical:6},tableHeaderCell:{flex:1,fontSize:10,fontFamily:F.bold,color:"#94A3B8",textAlign:"center"},tableCell:{flex:1,fontSize:11,fontFamily:F.medium,color:"#334155",textAlign:"center"},insetsCard:{backgroundColor:f.white,borderRadius:10,padding:12,borderWidth:1,borderColor:"#E2E8F0"},insetsGrid:{gap:6},insetRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:4,borderBottomWidth:1,borderBottomColor:"#F8FAFC"},insetLabel:{fontSize:11,fontFamily:F.medium,color:"#64748B"},insetValue:{fontSize:11.5,fontFamily:F.bold,color:"#0F172A"},treeTabContainer:{gap:10},treeHeaderCard:{backgroundColor:f.white,borderRadius:10,padding:12,borderWidth:1,borderColor:"#E2E8F0"},treeHeaderTitle:{fontSize:10.5,fontFamily:F.bold,color:"#64748B",letterSpacing:.5,marginBottom:4},treeHeaderSubtitle:{fontSize:11,fontFamily:F.regular,color:"#94A3B8",lineHeight:16},treeList:{gap:6},treeItemCard:{backgroundColor:f.white,borderRadius:8,padding:10,borderWidth:1,borderColor:"#E2E8F0"},treeItemCardActive:{backgroundColor:"#EEF2FF",borderColor:"#6366F1",borderLeftWidth:3.5,borderLeftColor:f.brandPurple},treeItemTopRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},treeTagRow:{flexDirection:"row",alignItems:"center",gap:6},depthBadge:{backgroundColor:"#F1F5F9",paddingHorizontal:5,paddingVertical:2,borderRadius:4},depthBadgeActive:{backgroundColor:f.brandPurple},depthBadgeText:{fontSize:9,fontFamily:F.bold,color:"#64748B"},depthBadgeTextActive:{color:f.white},treeTagName:{fontSize:12,fontFamily:F.bold,color:"#334155"},treeTagNameActive:{color:f.brandPurple},activePillBadge:{backgroundColor:"#10B98118",paddingHorizontal:6,paddingVertical:2,borderRadius:4},activePillBadgeText:{fontSize:9,fontFamily:F.bold,color:"#059669"},inspectArrowBtn:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,backgroundColor:"#F8FAFC"},inspectArrowBtnText:{fontSize:10,fontFamily:F.medium,color:"#64748B"},treeItemBottomRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginTop:6,paddingTop:4,borderTopWidth:1,borderTopColor:"#F1F5F9"},treeItemMetric:{fontSize:9.5,fontFamily:F.regular,color:"#94A3B8"},treeItemHostBadge:{fontSize:9,fontFamily:F.semiBold,color:"#6366F1"},propsTabContainer:{gap:10},propsSearchRow:{flexDirection:"row",gap:8,alignItems:"center"},searchBar:{flex:1,flexDirection:"row",alignItems:"center",gap:8,backgroundColor:f.white,paddingHorizontal:10,borderRadius:8,borderWidth:1,borderColor:"#E2E8F0",height:36},searchInput:{flex:1,fontSize:11.5,fontFamily:F.regular,color:"#0F172A",padding:0},copyPropsBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:f.brandPurple,paddingHorizontal:10,height:36,borderRadius:8},copyPropsBtnText:{fontSize:10.5,fontFamily:F.bold,color:f.white},emptyPropsBox:{padding:24,alignItems:"center",backgroundColor:f.white,borderRadius:8,borderWidth:1,borderColor:"#E2E8F0"},emptyPropsText:{fontSize:12,fontFamily:F.medium,color:"#94A3B8"},propsList:{gap:6},propItemCard:{backgroundColor:f.white,borderRadius:8,padding:10,borderWidth:1,borderColor:"#E2E8F0"},propHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:4},propKeyName:{fontSize:12,fontFamily:F.bold,color:"#1E293B"},typeBadgePrimary:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,backgroundColor:"#F1F5F9"},typeBadgeFn:{backgroundColor:"#EEF2FF"},typeBadgeObj:{backgroundColor:"#FEF3C7"},typeBadgePrim:{backgroundColor:"#ECFDF5"},typeBadgePrimaryText:{fontSize:9,fontFamily:F.bold,color:"#475569"},propValueText:{fontSize:11,fontFamily:"Courier",color:"#334155",marginTop:2},jsonViewerWrapper:{marginTop:4},modalBackdrop:{flex:1,backgroundColor:"rgba(15, 23, 42, 0.85)",justifyContent:"center",alignItems:"center",padding:20},modalCard:{width:"100%",maxHeight:"80%",backgroundColor:"#1E293B",borderRadius:14,overflow:"hidden",borderWidth:1,borderColor:"#334155"},modalHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingHorizontal:14,paddingVertical:10,borderBottomWidth:1,borderBottomColor:"#334155"},modalTitle:{fontSize:12,fontFamily:F.bold,color:f.white},modalCloseBtn:{padding:4},modalImageContainer:{padding:12,alignItems:"center",justifyContent:"center"},modalImage:{width:"100%",height:260}});

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

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

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

@@ -0,0 +1,138 @@
+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">
+      
+      <S style={N.absoluteFill}{...ue.panHandlers}/>
+
+      
+      {O&&<S style={[N.absoluteFill,e.gridPattern]}pointerEvents="none"/>}
+
+      
+      {t&&<S style={[e.devToolsHudContainer,Q==="top"?e.hudTop:e.hudBottom]}pointerEvents="box-none">
+          
+          <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]}>
+                          {w.displayName||w.componentName}
+                        </B>
+                      </G>
+                    </pe.Fragment>}):<S style={e.hudBreadcrumbChipActive}>
+                  <B style={e.hudBreadcrumbTextActive}>
+                    {t.componentName}
+                  </B>
+                </S>}
+            </Se>
+
+            
+            <G style={e.hudFlipBtn}onPress={()=>{z(),se(Q==="top"?"bottom":"top")}}>
+              <B style={e.hudFlipBtnText}>🔄</B>
+            </G>
+          </S>
+
+          
+          <S style={e.hudBodyRow}pointerEvents="none">
+            
+            <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(I)}
+                    </B>
+                  </S>):<S style={e.hudStyleRow}>
+                  <B style={e.hudStyleKey}>layout:</B>
+                  <B style={e.hudStyleVal}>default</B>
+                </S>}
+            </S>
+
+            
+            <S style={e.hudBoxModelWrapper}>
+              <S style={e.boxModelMarginLayer}>
+                <B style={e.boxModelMarginLabel}>margin</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>
+
+                <S style={e.boxModelPaddingLayer}>
+                  <B style={e.boxModelPaddingLabel}>padding</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>
+
+                  <S style={e.boxModelContentLayer}>
+                    <B style={e.boxModelCoords}>
+                      ({Math.round(t.layout.pageX)},{" "}
+                      {Math.round(t.layout.pageY)})
+                    </B>
+                    <B style={e.boxModelDimensions}>
+                      {Math.round(t.layout.width)} ×{" "}
+                      {Math.round(t.layout.height)}
+                    </B>
+                  </S>
+                </S>
+              </S>
+            </S>
+          </S>
+        </S>}
+
+      
+      {M&&<S pointerEvents="none"style={[e.highlightBox,{top:M.y,left:M.x,width:M.width,height:M.height}]}>
+          
+          <S style={e.contentTint}/>
+
+          
+          <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(M.width)} × {Math.round(M.height)} pt
+            </B>
+          </S>
+        </S>}
+
+      
+      {re&&M&&<S style={N.absoluteFill}pointerEvents="none">
+          
+          <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>
+
+          
+          <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>}
+
+      
+      <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>
+          </G>
+
+          <G style={[e.modePillBtn,L&&e.modePillBtnActive]}onPress={()=>{z(),Z(!L)}}>
+            <B style={[e.modePillText,L&&e.modePillTextActive]}>
+              Touchables
+            </B>
+          </G>
+        </S>
+
+        <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&&<K style={[e.hudBtn,e.hudBtnPrimary]}onPress={ce}>
+              <Ae color={P.white}size={13}/>
+              <B style={e.hudBtnPrimaryText}>Full JSX & Specs</B>
+            </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.d.ts

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