react-native-inapp-inspector 2.5.11 → 2.5.13

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

@@ -0,0 +1,422 @@
+import qe,{useRef as Qe,useState as Y}from"react";import{Dimensions as Ze,Image as Ie,Modal as _e,ScrollView as Q,StyleSheet as ze,Text as C,TextInput as Ct,TouchableOpacity as A,View as T}from"react-native";import{useInspector as gt}from"./InspectorContext";import{auditAccessibility as ut,categorizeStyles as ht,extractBoxModel as Tt,generateCssSnippet as Ee,generateFullJsxSegmentSnippet as Ft,generateStyleSheetSnippet as Z}from"../../helpers/uiInspectorEngine";import{BoxModelVisualizer as St}from"./BoxModelVisualizer";import{UiA11yAuditPanel as Bt}from"./UiA11yAuditPanel";import It from"../JsonViewer";import _ from"../TouchableScale";import{AccessibilityIcon as zt,BoxModelIcon as Et,ChevronIcon as Re,CloseIcon as Ae,CodeBracketsIcon as Ce,CopyIcon as O,LayersIcon as Rt,SearchIcon as Pe}from"../NetworkIcons";import{AppColors as f}from"../../styles/AppColors";import{AppFonts as F}from"../../styles/AppFonts";import{triggerNativeHaptic as D}from"../../native/NativeInspector";import{showToast as G}from"../../helpers/toast";import U from"@react-native-clipboard/clipboard";export const UiInspectorDetail=()=>{const{selectedUiElement:M,setSelectedUiElement:ge,uiActiveSubTab:V,setUiActiveSubTab:He}=gt(),[$,Le]=Y(""),[De,q]=Y(!1),[Ve,ue]=Y(null),[v,he]=Y("rn"),ve=Qe(null);if(!M)return null;const{componentName:z,hierarchy:W,props:X,flattenedStyles:je,boxModel:E,a11y:Ne,layout:B,snapshotUri:J}=M,K=Ze.get("window"),Te=K.width*K.height,Fe=B.width*B.height,Me=Te>0?(Fe/Te*100).toFixed(1):"0.0",We=B.height>0?(B.width/B.height).toFixed(2):"1.00",P={...je},R=ht(P),Oe=typeof z=="string"&&(z.startsWith("RCT")||["View","Text","Image","ScrollView","TextInput","Modal"].includes(z)),k=Ft(z,X,P),fe=()=>{U.setString(k.code),D(),G("Copied full JSX to clipboard")},Ge=()=>{k.sourceFile&&(U.setString(`${k.sourceFile}:${k.lineNumber||1}`),D(),G("Copied source location"))},we=()=>{const w=v==="rn"?Z(z,P):Ee(z,P);U.setString(w),D(),G(v==="rn"?"Copied StyleSheet":"Copied CSS")},Ue=()=>{U.setString(JSON.stringify(X,null,2)),D(),G("Copied props as JSON")},$e=(w,x)=>{U.setString(String(x)),D(),ue(w),G(`Copied "${w}: ${x}"`),setTimeout(()=>ue(null),1500)},xe=w=>{if(w.componentName===z)return;D();const x=w.props||{},S=w.styles||(x.style?ze.flatten(x.style):{})||{},I=w.layout||{...B,width:S.width||B.width,height:S.height||B.height},H=Tt(S,I),L=ut(x,I,S);ge({...M,componentName:w.componentName,displayName:w.displayName,props:x,originalStyles:S,flattenedStyles:S,tweakedStyles:{},layout:I,boxModel:H,a11y:L})},Xe=(w,x)=>{if(typeof x!="string")return!1;const S=w.toLowerCase();return S.includes("color")||S.includes("background")||x.startsWith("#")||x.startsWith("rgb")||x.startsWith("hsl")},j=(w,x,S,I)=>{const H=Object.entries(x);return H.length===0?null:<T key={w}style={[e.styleGroupCard,{borderLeftColor:I}]}>
+        <T style={e.styleGroupHeader}>
+          <T style={e.styleGroupTitleRow}>
+            <C style={e.styleGroupIcon}>{S}</C>
+            <C style={[e.styleGroupTitle,{color:I}]}>{w.toUpperCase()}</C>
+          </T>
+          <T style={[e.styleGroupBadge,{backgroundColor:`${I}18`}]}>
+            <C style={[e.styleGroupBadgeText,{color:I}]}>{H.length}</C>
+          </T>
+        </T>
+
+        <T style={e.styleRowsContainer}>
+          {H.map(([L,N])=>{const Be=Xe(L,N),Ye=Ve===L;return<A key={L}activeOpacity={.7}style={[e.styleRow,Ye&&e.styleRowCopied]}onPress={()=>$e(L,N)}>
+                <C style={e.stylePropKey}>{L}</C>
+                <T style={e.styleValueContainer}>
+                  {Be&&<T style={[e.colorSwatchPreview,{backgroundColor:String(N)}]}/>}
+                  <C style={[e.stylePropValue,Be&&e.stylePropColorValue]}>
+                    {typeof N=="object"?JSON.stringify(N):String(N)}
+                  </C>
+                  {typeof N=="number"&&<C style={e.styleUnitText}>pt</C>}
+                </T>
+              </A>})}
+        </T>
+      </T>},Se=Object.entries(X).filter(([w,x])=>{if(!$)return!0;const S=$.toLowerCase();return w.toLowerCase().includes(S)||String(x).toLowerCase().includes(S)}),Je=[{key:"styles",label:"Styles",icon:Rt},{key:"jsx",label:"JSX Code",icon:Ce},{key:"boxmodel",label:"Box Model",icon:Et},{key:"tree",label:`Hierarchy (${W.length})`,icon:Re},{key:"props",label:`Props (${Object.keys(X).length})`,icon:Pe},{key:"a11y",label:"A11y",icon:zt}],Ke=Object.keys(R.layout).length>0||Object.keys(R.spacing).length>0||Object.keys(R.appearance).length>0||Object.keys(R.typography).length>0||Object.keys(R.borders).length>0||Object.keys(R.transforms).length>0||Object.keys(R.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}>{z}</C>
+            <C style={e.componentTagBracket}> /&gt;</C>
+            <T style={e.typeBadge}>
+              <C style={e.typeBadgeText}>
+                {Oe?"Native":"React"}
+              </C>
+            </T>
+          </T>
+
+          
+          <Q horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.breadcrumbScroll}>
+            {W.map((w,x)=>{const S=x===W.length-1||w.componentName===z;return<qe.Fragment key={w.id||x}>
+                  <Re color="#94A3B8"size={8}direction="right"/>
+                  <A style={[e.crumbChip,S&&e.crumbChipActive]}onPress={()=>xe(w)}>
+                    <C style={[e.crumbChipText,S&&e.crumbChipTextActive]}numberOfLines={1}>
+                      {w.displayName}
+                    </C>
+                  </A>
+                </qe.Fragment>})}
+          </Q>
+        </T>
+
+        <T style={e.topActions}>
+          <_ style={e.quickActionBtn}onPress={fe}>
+            <Ce color={f.brandPurple}size={11}/>
+            <C style={e.quickActionBtnText}>JSX</C>
+          </_>
+          <_ style={e.closeBtn}onPress={()=>{D(),ge(null)}}>
+            <Ae color={f.slate600}size={12}/>
+          </_>
+        </T>
+      </T>
+
+      
+      <_e visible={De}transparent animationType="fade"onRequestClose={()=>q(!1)}>
+        <T style={e.modalBackdrop}>
+          <T style={e.modalCard}>
+            <T style={e.modalHeader}>
+              <C style={e.modalTitle}>
+                &lt;{z}&gt; Preview ({Math.round(B.width)} × {Math.round(B.height)} pt)
+              </C>
+              <A style={e.modalCloseBtn}onPress={()=>q(!1)}>
+                <Ae color={f.white}size={15}/>
+              </A>
+            </T>
+            {J&&<T style={e.modalImageContainer}>
+                <Ie source={{uri:J}}style={e.modalImage}resizeMode="contain"/>
+              </T>}
+          </T>
+        </T>
+      </_e>
+
+      
+      <T style={e.subTabBarWrapper}>
+        <Q ref={ve}horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.subTabBarContent}>
+          {Je.map(w=>{const x=V===w.key,S=w.icon;return<A key={w.key}style={[e.subTabItem,x&&e.subTabItemActive]}onPress={()=>{D(),He(w.key)}}>
+                <S color={x?f.white:"#64748B"}size={12}/>
+                <C style={[e.subTabText,x&&e.subTabTextActive]}>
+                  {w.label}
+                </C>
+              </A>})}
+        </Q>
+      </T>
+
+      
+      <Q style={e.tabScrollContent}contentContainerStyle={e.tabScrollInner}showsVerticalScrollIndicator={!1}>
+        
+        {V==="styles"&&<T style={e.stylesTabContainer}>
+            
+            <T style={e.heroSnapshotCard}>
+              <T style={e.heroImageFrame}>
+                {J?<A activeOpacity={.9}style={e.heroImageTouchable}onPress={()=>q(!0)}>
+                    <Ie source={{uri:J}}style={e.heroImage}resizeMode="contain"/>
+                    <T style={e.zoomGlassBadge}>
+                      <C style={e.zoomGlassBadgeText}>🔍 Zoom Lightbox</C>
+                    </T>
+                  </A>:<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(B.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(B.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(B.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(B.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}>{Me}% ({We}:1)</C>
+                </T>
+                <T style={e.specsTag}>
+                  <C style={e.specsTagLabel}>Tag ID</C>
+                  <C style={e.specsTagVal}>{M.nativeTag?`#${M.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}>{P.display||"flex"}</C>
+                </T>
+                <T style={e.computedItem}>
+                  <C style={e.computedItemKey}>Position</C>
+                  <C style={e.computedItemVal}>{P.position||"relative"}</C>
+                </T>
+                <T style={e.computedItem}>
+                  <C style={e.computedItemKey}>Flex Direction</C>
+                  <C style={e.computedItemVal}>{P.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>
+
+            
+            {Ke&&<>
+                {j("Flex Layout",R.layout,"\u26A1","#8B5CF6")}
+                {j("Spacing & Margins",R.spacing,"\u{1F4E6}","#10B981")}
+                {j("Appearance & Color",R.appearance,"\u{1F3A8}","#F43F5E")}
+                {j("Typography",R.typography,"\u{1F524}","#F59E0B")}
+                {j("Borders & Corners",R.borders,"\u{1F532}","#0D9488")}
+                {j("Transforms",R.transforms,"\u{1F504}","#EC4899")}
+                {j("Other Properties",R.other,"\u2699\uFE0F","#64748B")}
+              </>}
+
+            
+            <T style={e.codeSnippetCard}>
+              <T style={e.codeSnippetHeader}>
+                <T style={e.codeSnippetTabs}>
+                  <A style={[e.codeFormatBtn,v==="rn"&&e.codeFormatBtnActive]}onPress={()=>he("rn")}>
+                    <C style={[e.codeFormatBtnText,v==="rn"&&e.codeFormatBtnTextActive]}>
+                      React Native StyleSheet
+                    </C>
+                  </A>
+                  <A style={[e.codeFormatBtn,v==="css"&&e.codeFormatBtnActive]}onPress={()=>he("css")}>
+                    <C style={[e.codeFormatBtnText,v==="css"&&e.codeFormatBtnTextActive]}>
+                      Web CSS
+                    </C>
+                  </A>
+                </T>
+
+                <A style={e.codeCopyBtn}onPress={we}>
+                  <O color={f.brandPurple}size={11}/>
+                  <C style={e.codeCopyBtnText}>Copy</C>
+                </A>
+              </T>
+              <T style={e.codeSnippetBody}>
+                <C style={e.codeSnippetText}numberOfLines={14}>
+                  {v==="rn"?Z(z,P):Ee(z,P)}
+                </C>
+              </T>
+            </T>
+          </T>}
+
+        
+        {V==="jsx"&&<T style={e.jsxTabContainer}>
+            
+            <T style={e.sourceLocationCard}>
+              <T style={e.sourceLocationHeader}>
+                <C style={e.sourceLocationTitle}>📍 CODEBASE LOCATION</C>
+                {k.sourceFile&&<A style={e.copyPathBtn}onPress={Ge}>
+                    <O color={f.brandPurple}size={11}/>
+                    <C style={e.copyPathBtnText}>Copy Path</C>
+                  </A>}
+              </T>
+              <T style={e.sourceLocationBody}>
+                <C style={e.sourceLocationText}>
+                  {k.sourceLocation||(k.sourceFile?`${k.sourceFile}:${k.lineNumber||1}`:`${z}.tsx (Rendered React Node)`)}
+                </C>
+                {k.lineNumber!=null&&<T style={e.lineNumberBadge}>
+                    <C style={e.lineNumberBadgeText}>Line {k.lineNumber}</C>
+                  </T>}
+              </T>
+            </T>
+
+            
+            <T style={e.jsxCodeCard}>
+              <T style={e.jsxCodeHeader}>
+                <T style={e.jsxCodeTitleRow}>
+                  <Ce color={f.brandPurple}size={14}/>
+                  <C style={e.jsxCodeTitle}>FULL JSX CODE</C>
+                </T>
+                <A style={e.jsxCopyActionBtn}onPress={fe}>
+                  <O color={f.white}size={11}/>
+                  <C style={e.jsxCopyActionBtnText}>Copy JSX</C>
+                </A>
+              </T>
+
+              <T style={e.jsxCodeBody}>
+                <C style={e.jsxCodeContent}selectable>
+                  {k.code}
+                </C>
+              </T>
+            </T>
+
+            
+            <T style={e.codeSnippetCard}>
+              <T style={e.codeSnippetHeader}>
+                <C style={e.connectedStyleTitle}>🎨 CONNECTED STYLESHEET</C>
+                <A style={e.codeCopyBtn}onPress={we}>
+                  <O color={f.brandPurple}size={11}/>
+                  <C style={e.codeCopyBtnText}>Copy Styles</C>
+                </A>
+              </T>
+              <T style={e.codeSnippetBody}>
+                <C style={e.codeSnippetText}numberOfLines={14}>
+                  {Z(z,P)}
+                </C>
+              </T>
+            </T>
+          </T>}
+
+        
+        {V==="boxmodel"&&<T style={e.boxModelTabContainer}>
+            <T style={e.boxModelCard}>
+              <C style={e.boxModelSectionTitle}>📦 VISUAL BOX MODEL (CSS METRICS)</C>
+              <St boxModel={E}/>
+            </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}>{E.margin.top} pt</C>
+                <C style={e.tableCell}>{E.margin.right} pt</C>
+                <C style={e.tableCell}>{E.margin.bottom} pt</C>
+                <C style={e.tableCell}>{E.margin.left} pt</C>
+              </T>
+              <T style={e.tableRow}>
+                <C style={[e.tableCell,{color:"#CA8A04",fontFamily:F.bold}]}>Border</C>
+                <C style={e.tableCell}>{E.border.top} pt</C>
+                <C style={e.tableCell}>{E.border.right} pt</C>
+                <C style={e.tableCell}>{E.border.bottom} pt</C>
+                <C style={e.tableCell}>{E.border.left} pt</C>
+              </T>
+              <T style={e.tableRow}>
+                <C style={[e.tableCell,{color:"#059669",fontFamily:F.bold}]}>Padding</C>
+                <C style={e.tableCell}>{E.padding.top} pt</C>
+                <C style={e.tableCell}>{E.padding.right} pt</C>
+                <C style={e.tableCell}>{E.padding.bottom} pt</C>
+                <C style={e.tableCell}>{E.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}]}>
+                  {E.content.width} × {E.content.height} pt (Area: {Math.round(Fe)} 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(B.pageY)} pt</C>
+                </T>
+                <T style={e.insetRow}>
+                  <C style={e.insetLabel}>Distance from Screen Left:</C>
+                  <C style={e.insetValue}>{Math.round(B.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(K.height-(B.pageY+B.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(K.width-(B.pageX+B.width)))} pt
+                  </C>
+                </T>
+              </T>
+            </T>
+          </T>}
+
+        
+        {V==="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}>
+              {W.map((w,x)=>{const S=x===W.length-1||w.componentName===z,I=x;return<A key={w.id||x}activeOpacity={.7}style={[e.treeItemCard,{marginLeft:I*14},S&&e.treeItemCardActive]}onPress={()=>xe(w)}>
+                    <T style={e.treeItemTopRow}>
+                      <T style={e.treeTagRow}>
+                        <T style={[e.depthBadge,S&&e.depthBadgeActive]}>
+                          <C style={[e.depthBadgeText,S&&e.depthBadgeTextActive]}>
+                            L{I}
+                          </C>
+                        </T>
+                        <C style={[e.treeTagName,S&&e.treeTagNameActive]}>
+                          &lt;{w.displayName}&gt;
+                        </C>
+                      </T>
+
+                      {S?<T style={e.activePillBadge}>
+                          <C style={e.activePillBadgeText}>CURRENT</C>
+                        </T>:<T style={e.inspectArrowBtn}>
+                          <C style={e.inspectArrowBtnText}>Inspect →</C>
+                        </T>}
+                    </T>
+
+                    {w.layout&&<T style={e.treeItemBottomRow}>
+                        <C style={e.treeItemMetric}>
+                          Frame: {Math.round(w.layout.width)} × {Math.round(w.layout.height)} pt
+                        </C>
+                        {w.isHostComponent&&<C style={e.treeItemHostBadge}>Native</C>}
+                      </T>}
+                  </A>})}
+            </T>
+          </T>}
+
+        
+        {V==="props"&&<T style={e.propsTabContainer}>
+            <T style={e.propsSearchRow}>
+              <T style={e.searchBar}>
+                <Pe color={f.slate400}size={14}/>
+                <Ct style={e.searchInput}placeholder="Filter props by name or value..."placeholderTextColor={f.slate400}value={$}onChangeText={Le}/>
+              </T>
+
+              <_ style={e.copyPropsBtn}onPress={Ue}>
+                <O color={f.white}size={11}/>
+                <C style={e.copyPropsBtnText}>Copy All</C>
+              </_>
+            </T>
+
+            {Se.length===0?<T style={e.emptyPropsBox}>
+                <C style={e.emptyPropsText}>No props match "{$}"</C>
+              </T>:<T style={e.propsList}>
+                {Se.map(([w,x])=>{const S=typeof x,I=S==="function",H=S==="object"&&x!==null,L=!I&&!H;return<T key={w}style={e.propItemCard}>
+                      <T style={e.propHeader}>
+                        <C style={e.propKeyName}>{w}</C>
+                        <T style={[e.typeBadgePrimary,I&&e.typeBadgeFn,H&&e.typeBadgeObj,L&&e.typeBadgePrim]}>
+                          <C style={e.typeBadgePrimaryText}>
+                            {I?"function":H?"object":S}
+                          </C>
+                        </T>
+                      </T>
+
+                      {H?<T style={e.jsonViewerWrapper}>
+                          <It data={x}defaultExpandDepth={1}/>
+                        </T>:<C style={e.propValueText}numberOfLines={3}>
+                          {I?"\u0192 () { [native / custom handler] }":String(x)}
+                        </C>}
+                    </T>})}
+              </T>}
+          </T>}
+
+        
+        {V==="a11y"&&<Bt a11y={Ne}/>}
+      </Q>
+    </T>};const e=ze.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 ye,{useCallback as pe,useRef as be,useState as U}from"react";import{Dimensions as fe,PanResponder as Be,Platform as xe,ScrollView as Me,StyleSheet as E,Text as B,TouchableOpacity as O,View as M}from"react-native";import{useInspector as we}from"./InspectorContext";import{createInspectedElement as Ce,extractBoxModel as Se,getDynamicInspectorDataForPoint as Fe,auditAccessibility as ve}from"../../helpers/uiInspectorEngine";import{ActiveTab as Pe}from"../../types";import{AppColors as P}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{CloseIcon as Ie,LayersIcon as Te,RulerIcon as Ae}from"../NetworkIcons";import J from"../TouchableScale";import{takeNativeScreenshot as oe,triggerNativeHaptic as T}from"../../native/NativeInspector";export const UiInspectorOverlay=()=>{const{isInspectModeActive:ne,setIsInspectModeActive:K,selectedUiElement:t,setSelectedUiElement:V,showAlignmentGrid:W,setShowAlignmentGrid:ie,showDistanceGuides:ae,setShowDistanceGuides:Re,setVisible:re,switchActiveTab:le}=we(),[q,de]=U("top"),[N,Q]=U(!1),[se,G]=U(null),R=fe.get("window"),Z=pe(async x=>{const{pageX:F,pageY:v,locationX:I,locationY:Y}=x.nativeEvent,A=F??I??0,$=v??Y??0;try{const w=await Fe(A,$);if(w&&w.layout&&(w.layout.width>0||w.layout.height>0)){try{const te=await oe({rect:{x:Math.max(0,w.layout.pageX),y:Math.max(0,w.layout.pageY),width:Math.max(1,w.layout.width),height:Math.max(1,w.layout.height)},quality:.95,format:"png"});te?.uri&&(w.snapshotUri=te.uri)}catch{}G({x:w.layout.x,y:w.layout.y,width:w.layout.width,height:w.layout.height,componentName:w.displayName||w.componentName}),V(w),T();return}}catch{}const D=Math.round(Math.min(R.width-32,Math.max(48,A>R.width/2?(R.width-A)*1.5:A*1.5))),k=44,L=Math.max(0,Math.min(A-D/2,R.width-D)),H=Math.max(0,Math.min($-k/2,R.height-k));let ee;try{const w=await oe({rect:{x:Math.max(0,L),y:Math.max(0,H),width:Math.max(1,D),height:Math.max(1,k)},quality:.95,format:"png"});w?.uri&&(ee=w.uri)}catch{}const ce=Ce("View",{accessible:!0,style:{position:"absolute",left:Math.round(L),top:Math.round(H),width:D,height:k}},{x:Math.round(L),y:Math.round(H),width:D,height:k,pageX:Math.round(L),pageY:Math.round(H)},void 0,void 0,ee);G({x:Math.round(L),y:Math.round(H),width:D,height:k,componentName:"View"}),V(ce),T()},[R,V]),he=be(Be.create({onStartShouldSetPanResponder:()=>!0,onMoveShouldSetPanResponder:()=>!0,onPanResponderGrant:x=>Z(x),onPanResponderMove:x=>Z(x)})).current;if(!ne)return null;const C=se||(t?{x:t.layout.pageX,y:t.layout.pageY,width:t.layout.width,height:t.layout.height,componentName:t.componentName}:null),X=t?.hierarchy||[],ue=t?.flattenedStyles||{},z=t?.boxModel||{margin:{top:0,right:0,bottom:0,left:0},border:{top:0,right:0,bottom:0,left:0},padding:{top:0,right:0,bottom:0,left:0},content:{width:t?.layout.width||0,height:t?.layout.height||0}},_=Object.entries(ue).filter(([x,F])=>F==null||typeof F=="object"?!1:["overflow","fontSize","fontWeight","color","letterSpacing","lineHeight","backgroundColor","borderRadius","flexDirection","justifyContent","alignItems","flex","opacity","zIndex"].includes(x)),ge=x=>{if(!t||x.componentName===t.componentName)return;T();const F=x.props||{},v=x.styles||(F.style?E.flatten(F.style):{})||{},I=x.layout||{...t.layout,width:v.width||t.layout.width,height:v.height||t.layout.height},Y=Se(v,I),A=ve(F,I,v);V({...t,componentName:x.componentName,displayName:x.displayName,props:F,originalStyles:v,flattenedStyles:v,tweakedStyles:{},layout:I,boxModel:Y,a11y:A}),G({x:I.x??t.layout.x,y:I.y??t.layout.y,width:I.width,height:I.height,componentName:x.displayName||x.componentName})},me=()=>{T(),K(!1),le(Pe.Ui),re(!0)};return<M style={[E.absoluteFill,e.overlayContainer]}pointerEvents="box-none">
+      
+      <M style={E.absoluteFill}{...he.panHandlers}/>
+
+      
+      {W&&<M style={[E.absoluteFill,e.gridPattern]}pointerEvents="none"/>}
+
+      
+      {t&&<M style={[e.devToolsHudContainer,q==="top"?e.hudTop:e.hudBottom]}pointerEvents="box-none">
+          
+          <M style={e.hudBreadcrumbBar}>
+            <Me horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.hudBreadcrumbContent}>
+              {X.length>0?X.map((x,F)=>{const v=F===X.length-1||x.componentName===t.componentName;return<ye.Fragment key={x.id||F}>
+                      {F>0&&<B style={e.hudDotSeparator}>•</B>}
+                      <O style={[e.hudBreadcrumbChip,v&&e.hudBreadcrumbChipActive]}onPress={()=>ge(x)}>
+                        <B style={[e.hudBreadcrumbText,v&&e.hudBreadcrumbTextActive]}>
+                          {x.displayName||x.componentName}
+                        </B>
+                      </O>
+                    </ye.Fragment>}):<M style={e.hudBreadcrumbChipActive}>
+                  <B style={e.hudBreadcrumbTextActive}>
+                    {t.componentName}
+                  </B>
+                </M>}
+            </Me>
+
+            
+            <O style={e.hudFlipBtn}onPress={()=>{T(),de(q==="top"?"bottom":"top")}}>
+              <B style={e.hudFlipBtnText}>🔄</B>
+            </O>
+          </M>
+
+          
+          <M style={e.hudBodyRow}pointerEvents="none">
+            
+            <M style={e.hudStylesColumn}>
+              {_.length>0?_.slice(0,7).map(([x,F])=><M key={x}style={e.hudStyleRow}>
+                    <B style={e.hudStyleKey}>{x}:</B>
+                    <B style={e.hudStyleVal}numberOfLines={1}>
+                      {String(F)}
+                    </B>
+                  </M>):<M style={e.hudStyleRow}>
+                  <B style={e.hudStyleKey}>layout:</B>
+                  <B style={e.hudStyleVal}>default</B>
+                </M>}
+            </M>
+
+            
+            <M style={e.hudBoxModelWrapper}>
+              <M style={e.boxModelMarginLayer}>
+                <B style={e.boxModelMarginLabel}>margin</B>
+                <B style={e.boxModelInsetTop}>{z.margin.top}</B>
+                <B style={e.boxModelInsetRight}>{z.margin.right}</B>
+                <B style={e.boxModelInsetBottom}>{z.margin.bottom}</B>
+                <B style={e.boxModelInsetLeft}>{z.margin.left}</B>
+
+                <M style={e.boxModelPaddingLayer}>
+                  <B style={e.boxModelPaddingLabel}>padding</B>
+                  <B style={e.boxModelInsetTop}>{z.padding.top}</B>
+                  <B style={e.boxModelInsetRight}>{z.padding.right}</B>
+                  <B style={e.boxModelInsetBottom}>{z.padding.bottom}</B>
+                  <B style={e.boxModelInsetLeft}>{z.padding.left}</B>
+
+                  <M style={e.boxModelContentLayer}>
+                    <B style={e.boxModelCoords}>
+                      ({Math.round(t.layout.pageX)},{" "}
+                      {Math.round(t.layout.pageY)})
+                    </B>
+                    <B style={e.boxModelDimensions}>
+                      {Math.round(t.layout.width)} ×{" "}
+                      {Math.round(t.layout.height)}
+                    </B>
+                  </M>
+                </M>
+              </M>
+            </M>
+          </M>
+        </M>}
+
+      
+      {C&&<M pointerEvents="none"style={[e.highlightBox,{top:C.y,left:C.x,width:C.width,height:C.height}]}>
+          
+          <M style={e.contentTint}/>
+
+          
+          <M style={[e.elementBadge,C.y<50?e.elementBadgeBottom:e.elementBadgeTop]}>
+            <B style={e.elementBadgeTag}>&lt;{C.componentName}&gt;</B>
+            <B style={e.elementBadgeDim}>
+              {Math.round(C.width)} × {Math.round(C.height)} pt
+            </B>
+          </M>
+        </M>}
+
+      
+      {ae&&C&&<M style={E.absoluteFill}pointerEvents="none">
+          
+          <M style={[e.guideLineV,{top:0,left:C.x+C.width/2,height:C.y}]}>
+            <B style={e.guideBadge}>{Math.round(C.y)} pt</B>
+          </M>
+
+          
+          <M style={[e.guideLineH,{top:C.y+C.height/2,left:0,width:C.x}]}>
+            <B style={e.guideBadge}>{Math.round(C.x)} pt</B>
+          </M>
+        </M>}
+
+      
+      <M style={e.hudToolbar}>
+        <M style={e.hudLeftGroup}>
+          <O style={[e.modePillBtn,!N&&e.modePillBtnActive]}onPress={()=>{T(),Q(!1)}}>
+            <B style={[e.modePillText,!N&&e.modePillTextActive]}>
+              Inspect
+            </B>
+          </O>
+
+          <O style={[e.modePillBtn,N&&e.modePillBtnActive]}onPress={()=>{T(),Q(!N)}}>
+            <B style={[e.modePillText,N&&e.modePillTextActive]}>
+              Touchables
+            </B>
+          </O>
+        </M>
+
+        <M style={e.hudActions}>
+          <J style={[e.hudBtn,W&&e.hudBtnActive]}onPress={()=>{T(),ie(!W)}}>
+            <Ae color={W?P.white:"#CBD5E1"}size={14}/>
+          </J>
+
+          {t&&<J style={[e.hudBtn,e.hudBtnPrimary]}onPress={me}>
+              <Te color={P.white}size={13}/>
+              <B style={e.hudBtnPrimaryText}>Full JSX & Specs</B>
+            </J>}
+
+          <J style={[e.hudBtn,e.hudBtnClose]}onPress={()=>{T(),K(!1)}}>
+            <Ie color={P.white}size={13}/>
+          </J>
+        </M>
+      </M>
+    </M>};const e=E.create({overlayContainer:{zIndex:99999999,elevation:99999999},gridPattern:{backgroundColor:"transparent",borderWidth:0,opacity:.15},devToolsHudContainer:{position:"absolute",left:0,right:0,backgroundColor:"rgba(15, 23, 42, 0.88)",paddingTop:xe.OS==="ios"?44:20,paddingBottom:10,paddingHorizontal:12,borderBottomWidth:1,borderBottomColor:"rgba(255, 255, 255, 0.12)",zIndex:999999999,shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.4,shadowRadius:8,elevation:12},hudTop:{top:0},hudBottom:{bottom:60,borderTopWidth:1,borderTopColor:"rgba(255, 255, 255, 0.12)",paddingTop:10},hudBreadcrumbBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8},hudBreadcrumbContent:{alignItems:"center",gap:4,paddingRight:10},hudDotSeparator:{color:"#94A3B8",fontSize:12,paddingHorizontal:2},hudBreadcrumbChip:{paddingHorizontal:6,paddingVertical:2.5,borderRadius:4},hudBreadcrumbChipActive:{backgroundColor:"rgba(255, 255, 255, 0.18)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.35)"},hudBreadcrumbText:{color:"#CBD5E1",fontSize:11,fontFamily:S.medium},hudBreadcrumbTextActive:{color:"#FFFFFF",fontFamily:S.bold},hudFlipBtn:{padding:4,borderRadius:4,backgroundColor:"rgba(255, 255, 255, 0.12)"},hudFlipBtnText:{fontSize:12},hudBodyRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"flex-start",marginTop:4},hudStylesColumn:{flex:1,paddingRight:8,gap:2},hudStyleRow:{flexDirection:"row",alignItems:"center",gap:4},hudStyleKey:{color:"#94A3B8",fontSize:10,fontFamily:S.regular},hudStyleVal:{color:"#F8FAFC",fontSize:10,fontFamily:S.bold},hudBoxModelWrapper:{width:140,height:90,alignItems:"center",justifyContent:"center"},boxModelMarginLayer:{width:"100%",height:"100%",borderWidth:1,borderColor:"rgba(245, 158, 11, 0.6)",backgroundColor:"rgba(245, 158, 11, 0.08)",borderRadius:4,alignItems:"center",justifyContent:"center",position:"relative",padding:12},boxModelMarginLabel:{position:"absolute",top:2,left:4,fontSize:8,fontFamily:S.bold,color:"#F59E0B"},boxModelPaddingLayer:{width:"100%",height:"100%",borderWidth:1,borderColor:"rgba(251, 191, 36, 0.6)",backgroundColor:"rgba(251, 191, 36, 0.08)",borderRadius:3,alignItems:"center",justifyContent:"center",position:"relative",padding:6},boxModelPaddingLabel:{position:"absolute",top:1,left:3,fontSize:7.5,fontFamily:S.bold,color:"#FBBF24"},boxModelContentLayer:{alignItems:"center",justifyContent:"center"},boxModelCoords:{color:"#FACC15",fontSize:8,fontFamily:S.bold},boxModelDimensions:{color:"#FACC15",fontSize:9,fontFamily:S.bold},boxModelInsetTop:{position:"absolute",top:1,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:S.medium},boxModelInsetBottom:{position:"absolute",bottom:1,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:S.medium},boxModelInsetLeft:{position:"absolute",left:2,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:S.medium},boxModelInsetRight:{position:"absolute",right:2,alignSelf:"center",fontSize:7.5,color:"#CBD5E1",fontFamily:S.medium},highlightBox:{position:"absolute",borderWidth:1.5,borderColor:"#4F46E5",backgroundColor:"rgba(79, 70, 229, 0.15)",borderRadius:4,zIndex:100},contentTint:{flex:1,backgroundColor:"rgba(16, 185, 129, 0.1)",margin:3,borderRadius:2,borderWidth:1,borderColor:"rgba(16, 185, 129, 0.35)",borderStyle:"dashed"},elementBadge:{position:"absolute",flexDirection:"row",alignItems:"center",gap:6,backgroundColor:"rgba(15, 23, 42, 0.85)",paddingHorizontal:7,paddingVertical:3.5,borderRadius:5,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.2)"},elementBadgeTop:{top:-26,left:0},elementBadgeBottom:{bottom:-26,left:0},elementBadgeTag:{fontSize:10.5,fontFamily:S.bold,color:"#818CF8"},elementBadgeDim:{fontSize:9.5,fontFamily:S.medium,color:"#E2E8F0"},guideLineV:{position:"absolute",width:1,backgroundColor:"#EF4444",alignItems:"center",justifyContent:"center"},guideLineH:{position:"absolute",height:1,backgroundColor:"#EF4444",alignItems:"center",justifyContent:"center"},guideBadge:{backgroundColor:"#EF4444",color:P.white,fontSize:9,fontFamily:S.bold,paddingHorizontal:4,paddingVertical:1,borderRadius:3},hudToolbar:{position:"absolute",bottom:24,left:14,right:14,backgroundColor:"rgba(15, 23, 42, 0.92)",borderRadius:12,paddingHorizontal:12,paddingVertical:8,flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.15)",shadowColor:"#000",shadowOffset:{width:0,height:4},shadowOpacity:.4,shadowRadius:8,elevation:10},hudLeftGroup:{flexDirection:"row",alignItems:"center",gap:4},modePillBtn:{paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:"rgba(255, 255, 255, 0.08)"},modePillBtnActive:{backgroundColor:P.brandPurple},modePillText:{fontSize:10.5,fontFamily:S.medium,color:"#94A3B8"},modePillTextActive:{color:P.white,fontFamily:S.bold},hudActions:{flexDirection:"row",alignItems:"center",gap:6},hudBtn:{paddingHorizontal:8,paddingVertical:5,borderRadius:6,backgroundColor:"rgba(255, 255, 255, 0.1)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.15)",alignItems:"center",justifyContent:"center"},hudBtnActive:{backgroundColor:P.brandPurple,borderColor:P.brandPurple},hudBtnPrimary:{flexDirection:"row",gap:4,backgroundColor:P.brandPurple,borderColor:P.brandPurple},hudBtnPrimaryText:{fontSize:10.5,fontFamily:S.bold,color:P.white},hudBtnClose:{backgroundColor:"#E11D48",borderColor:"#E11D48"}});

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

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