react-native-inapp-inspector 2.5.11 → 2.5.13

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

@@ -0,0 +1,485 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(g,b,m,C){C===void 0&&(C=m);var x=Object.getOwnPropertyDescriptor(b,m);(!x||("get"in x?!b.__esModule:x.writable||x.configurable))&&(x={enumerable:!0,get:function(){return b[m]}}),Object.defineProperty(g,C,x)}):(function(g,b,m,C){C===void 0&&(C=m),g[C]=b[m]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(g,b){Object.defineProperty(g,"default",{enumerable:!0,value:b})}):function(g,b){g.default=b}),__importStar=this&&this.__importStar||(function(){var g=function(b){return g=Object.getOwnPropertyNames||function(m){var C=[];for(var x in m)Object.prototype.hasOwnProperty.call(m,x)&&(C[C.length]=x);return C},g(b)};return function(b){if(b&&b.__esModule)return b;var m={};if(b!=null)for(var C=g(b),x=0;x<C.length;x++)C[x]!=="default"&&__createBinding(m,b,C[x]);return __setModuleDefault(m,b),m}})(),__importDefault=this&&this.__importDefault||function(g){return g&&g.__esModule?g:{default:g}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.UiInspectorDetail=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),uiInspectorEngine_1=require("../../helpers/uiInspectorEngine"),BoxModelVisualizer_1=require("./BoxModelVisualizer"),UiA11yAuditPanel_1=require("./UiA11yAuditPanel"),JsonViewer_1=__importDefault(require("../JsonViewer")),TouchableScale_1=__importDefault(require("../TouchableScale")),NetworkIcons_1=require("../NetworkIcons"),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),NativeInspector_1=require("../../native/NativeInspector"),toast_1=require("../../helpers/toast"),clipboard_1=__importDefault(require("@react-native-clipboard/clipboard")),UiInspectorDetail=()=>{const{selectedUiElement:g,setSelectedUiElement:b,uiActiveSubTab:m,setUiActiveSubTab:C}=(0,InspectorContext_1.useInspector)(),[x,X]=(0,react_1.useState)(""),[E,j]=(0,react_1.useState)("ancestors"),[H,K]=(0,react_1.useState)(""),[Y,L]=(0,react_1.useState)(!1),[Z,N]=(0,react_1.useState)(null),[B,M]=(0,react_1.useState)("rn"),Q=(0,react_1.useRef)(null);if(!g)return null;const{componentName:w,hierarchy:z,props:R,flattenedStyles:ee,boxModel:h,a11y:te,layout:u,snapshotUri:k}=g,O=react_native_1.Dimensions.get("window"),W=O.width*O.height,G=u.width*u.height,oe=W>0?(G/W*100).toFixed(1):"0.0",re=u.height>0?(u.width/u.height).toFixed(2):"1.00",A={...ee},F=(0,uiInspectorEngine_1.categorizeStyles)(A),ae=typeof w=="string"&&(w.startsWith("RCT")||["View","Text","Image","ScrollView","TextInput","Modal"].includes(w)),v=(0,uiInspectorEngine_1.generateFullJsxSegmentSnippet)(w,R,A),U=()=>{clipboard_1.default.setString(v.code),(0,NativeInspector_1.triggerNativeHaptic)(),(0,toast_1.showToast)("Copied full JSX to clipboard")},ie=()=>{v.sourceFile&&(clipboard_1.default.setString(`${v.sourceFile}:${v.lineNumber||1}`),(0,NativeInspector_1.triggerNativeHaptic)(),(0,toast_1.showToast)("Copied source location"))},q=()=>{const t=B==="rn"?(0,uiInspectorEngine_1.generateStyleSheetSnippet)(w,A):(0,uiInspectorEngine_1.generateCssSnippet)(w,A);clipboard_1.default.setString(t),(0,NativeInspector_1.triggerNativeHaptic)(),(0,toast_1.showToast)(B==="rn"?"Copied StyleSheet":"Copied CSS")},ne=()=>{clipboard_1.default.setString(JSON.stringify(R,null,2)),(0,NativeInspector_1.triggerNativeHaptic)(),(0,toast_1.showToast)("Copied props as JSON")},le=(t,e)=>{clipboard_1.default.setString(String(e)),(0,NativeInspector_1.triggerNativeHaptic)(),N(t),(0,toast_1.showToast)(`Copied "${t}: ${e}"`),setTimeout(()=>N(null),1500)},$=t=>{if(t.componentName===w)return;(0,NativeInspector_1.triggerNativeHaptic)();const e=t.props||{},_=t.styles||(e.style?react_native_1.StyleSheet.flatten(e.style):{})||{},T=t.layout||{...u,width:_.width||u.width,height:_.height||u.height},f=(0,uiInspectorEngine_1.extractBoxModel)(_,T),V=(0,uiInspectorEngine_1.auditAccessibility)(e,T,_);b({...g,componentName:t.componentName,displayName:t.displayName,props:e,originalStyles:_,flattenedStyles:_,tweakedStyles:{},layout:T,boxModel:f,a11y:V})},ce=(t,e)=>{if(typeof e!="string")return!1;const _=t.toLowerCase();return _.includes("color")||_.includes("background")||e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")},I=(t,e,_,T)=>{const f=Object.entries(e);return f.length===0?null:<react_native_1.View key={t}style={[styles.styleGroupCard,{borderLeftColor:T}]}>
+        <react_native_1.View style={styles.styleGroupHeader}>
+          <react_native_1.View style={styles.styleGroupTitleRow}>
+            <react_native_1.Text style={styles.styleGroupIcon}>{_}</react_native_1.Text>
+            <react_native_1.Text style={[styles.styleGroupTitle,{color:T}]}>{t.toUpperCase()}</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={[styles.styleGroupBadge,{backgroundColor:`${T}18`}]}>
+            <react_native_1.Text style={[styles.styleGroupBadgeText,{color:T}]}>{f.length}</react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.styleRowsContainer}>
+          {f.map(([V,S])=>{const P=ce(V,S),D=Z===V;return<react_native_1.TouchableOpacity key={V}activeOpacity={.7}style={[styles.styleRow,D&&styles.styleRowCopied]}onPress={()=>le(V,S)}>
+                <react_native_1.Text style={styles.stylePropKey}>{V}</react_native_1.Text>
+                <react_native_1.View style={styles.styleValueContainer}>
+                  {P&&<react_native_1.View style={[styles.colorSwatchPreview,{backgroundColor:String(S)}]}/>}
+                  <react_native_1.Text style={[styles.stylePropValue,P&&styles.stylePropColorValue]}>
+                    {typeof S=="object"?JSON.stringify(S):String(S)}
+                  </react_native_1.Text>
+                  {typeof S=="number"&&<react_native_1.Text style={styles.styleUnitText}>pt</react_native_1.Text>}
+                </react_native_1.View>
+              </react_native_1.TouchableOpacity>})}
+        </react_native_1.View>
+      </react_native_1.View>},J=Object.entries(R).filter(([t,e])=>{if(!x)return!0;const _=x.toLowerCase();return t.toLowerCase().includes(_)||String(e).toLowerCase().includes(_)}),se=[{key:"styles",label:"Styles",icon:NetworkIcons_1.LayersIcon},{key:"jsx",label:"JSX Code",icon:NetworkIcons_1.CodeBracketsIcon},{key:"boxmodel",label:"Box Model",icon:NetworkIcons_1.BoxModelIcon},{key:"tree",label:`Hierarchy (${z.length})`,icon:NetworkIcons_1.ChevronIcon},{key:"props",label:`Props (${Object.keys(R).length})`,icon:NetworkIcons_1.SearchIcon},{key:"a11y",label:"A11y",icon:NetworkIcons_1.AccessibilityIcon}],de=Object.keys(F.layout).length>0||Object.keys(F.spacing).length>0||Object.keys(F.appearance).length>0||Object.keys(F.typography).length>0||Object.keys(F.borders).length>0||Object.keys(F.transforms).length>0||Object.keys(F.other).length>0;return<react_native_1.View style={styles.container}>
+      
+      <react_native_1.View style={styles.topControlBar}>
+        <react_native_1.View style={styles.elementTagRow}>
+          <react_native_1.View style={styles.componentPill}>
+            <react_native_1.Text style={styles.componentTagBracket}>&lt;</react_native_1.Text>
+            <react_native_1.Text style={styles.componentTagName}>{w}</react_native_1.Text>
+            <react_native_1.Text style={styles.componentTagBracket}> /&gt;</react_native_1.Text>
+            <react_native_1.View style={styles.typeBadge}>
+              <react_native_1.Text style={styles.typeBadgeText}>
+                {ae?"Native":"React"}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          
+          <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={styles.breadcrumbScroll}>
+            {z.map((t,e)=>{const _=e===z.length-1||t.componentName===w;return<react_1.default.Fragment key={t.id||e}>
+                  <NetworkIcons_1.ChevronIcon color="#94A3B8"size={8}direction="right"/>
+                  <react_native_1.TouchableOpacity style={[styles.crumbChip,_&&styles.crumbChipActive]}onPress={()=>$(t)}>
+                    <react_native_1.Text style={[styles.crumbChipText,_&&styles.crumbChipTextActive]}numberOfLines={1}>
+                      {t.displayName}
+                    </react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+                </react_1.default.Fragment>})}
+          </react_native_1.ScrollView>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.topActions}>
+          <TouchableScale_1.default style={styles.quickActionBtn}onPress={U}>
+            <NetworkIcons_1.CodeBracketsIcon color={AppColors_1.AppColors.brandPurple}size={11}/>
+            <react_native_1.Text style={styles.quickActionBtnText}>JSX</react_native_1.Text>
+          </TouchableScale_1.default>
+          <TouchableScale_1.default style={styles.closeBtn}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),b(null)}}>
+            <NetworkIcons_1.CloseIcon color={AppColors_1.AppColors.slate600}size={12}/>
+          </TouchableScale_1.default>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      
+      <react_native_1.Modal visible={Y}transparent animationType="fade"onRequestClose={()=>L(!1)}>
+        <react_native_1.View style={styles.modalBackdrop}>
+          <react_native_1.View style={styles.modalCard}>
+            <react_native_1.View style={styles.modalHeader}>
+              <react_native_1.Text style={styles.modalTitle}>
+                &lt;{w}&gt; Preview ({Math.round(u.width)} × {Math.round(u.height)} pt)
+              </react_native_1.Text>
+              <react_native_1.TouchableOpacity style={styles.modalCloseBtn}onPress={()=>L(!1)}>
+                <NetworkIcons_1.CloseIcon color={AppColors_1.AppColors.white}size={15}/>
+              </react_native_1.TouchableOpacity>
+            </react_native_1.View>
+            {k&&<react_native_1.View style={styles.modalImageContainer}>
+                <react_native_1.Image source={{uri:k}}style={styles.modalImage}resizeMode="contain"/>
+              </react_native_1.View>}
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.Modal>
+
+      
+      <react_native_1.View style={styles.subTabBarWrapper}>
+        <react_native_1.ScrollView ref={Q}horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={styles.subTabBarContent}>
+          {se.map(t=>{const e=m===t.key,_=t.icon;return<react_native_1.TouchableOpacity key={t.key}style={[styles.subTabItem,e&&styles.subTabItemActive]}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),C(t.key)}}>
+                <_ color={e?AppColors_1.AppColors.white:"#64748B"}size={12}/>
+                <react_native_1.Text style={[styles.subTabText,e&&styles.subTabTextActive]}>
+                  {t.label}
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>})}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      
+      <react_native_1.ScrollView style={styles.tabScrollContent}contentContainerStyle={styles.tabScrollInner}showsVerticalScrollIndicator={!1}>
+        
+        {m==="styles"&&<react_native_1.View style={styles.stylesTabContainer}>
+            
+            <react_native_1.View style={styles.heroSnapshotCard}>
+              <react_native_1.View style={styles.heroImageFrame}>
+                {k?<react_native_1.TouchableOpacity activeOpacity={.9}style={styles.heroImageTouchable}onPress={()=>L(!0)}>
+                    <react_native_1.Image source={{uri:k}}style={styles.heroImage}resizeMode="contain"/>
+                    <react_native_1.View style={styles.zoomGlassBadge}>
+                      <react_native_1.Text style={styles.zoomGlassBadgeText}>🔍 Zoom Lightbox</react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.TouchableOpacity>:<react_native_1.View style={styles.heroPlaceholder}>
+                    <react_native_1.Text style={styles.heroPlaceholderIcon}>🎨</react_native_1.Text>
+                    <react_native_1.Text style={styles.heroPlaceholderText}>Rendered Component Frame</react_native_1.Text>
+                  </react_native_1.View>}
+              </react_native_1.View>
+
+              
+              <react_native_1.View style={styles.metricsGrid}>
+                <react_native_1.View style={styles.metricCell}>
+                  <react_native_1.Text style={styles.metricCellLabel}>WIDTH</react_native_1.Text>
+                  <react_native_1.Text style={styles.metricCellValue}>{Math.round(u.width)}<react_native_1.Text style={styles.metricUnit}> pt</react_native_1.Text></react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.metricCell}>
+                  <react_native_1.Text style={styles.metricCellLabel}>HEIGHT</react_native_1.Text>
+                  <react_native_1.Text style={styles.metricCellValue}>{Math.round(u.height)}<react_native_1.Text style={styles.metricUnit}> pt</react_native_1.Text></react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.metricCell}>
+                  <react_native_1.Text style={styles.metricCellLabel}>PAGE X</react_native_1.Text>
+                  <react_native_1.Text style={styles.metricCellValue}>{Math.round(u.pageX)}<react_native_1.Text style={styles.metricUnit}> pt</react_native_1.Text></react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.metricCell}>
+                  <react_native_1.Text style={styles.metricCellLabel}>PAGE Y</react_native_1.Text>
+                  <react_native_1.Text style={styles.metricCellValue}>{Math.round(u.pageY)}<react_native_1.Text style={styles.metricUnit}> pt</react_native_1.Text></react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+
+              
+              <react_native_1.View style={styles.specsBar}>
+                <react_native_1.View style={styles.specsTag}>
+                  <react_native_1.Text style={styles.specsTagLabel}>Coverage</react_native_1.Text>
+                  <react_native_1.Text style={styles.specsTagVal}>{oe}% ({re}:1)</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.specsTag}>
+                  <react_native_1.Text style={styles.specsTagLabel}>Tag ID</react_native_1.Text>
+                  <react_native_1.Text style={styles.specsTagVal}>{g.nativeTag?`#${g.nativeTag}`:"Virtual Fiber"}</react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={styles.computedLayoutCard}>
+              <react_native_1.View style={styles.computedLayoutHeader}>
+                <react_native_1.Text style={styles.computedLayoutTitle}>⚡ COMPUTED CONSTRAINTS</react_native_1.Text>
+                <react_native_1.Text style={styles.computedLayoutSub}>Resolved Frame & Insets</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.computedGrid}>
+                <react_native_1.View style={styles.computedItem}>
+                  <react_native_1.Text style={styles.computedItemKey}>Display</react_native_1.Text>
+                  <react_native_1.Text style={styles.computedItemVal}>{A.display||"flex"}</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.computedItem}>
+                  <react_native_1.Text style={styles.computedItemKey}>Position</react_native_1.Text>
+                  <react_native_1.Text style={styles.computedItemVal}>{A.position||"relative"}</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.computedItem}>
+                  <react_native_1.Text style={styles.computedItemKey}>Flex Direction</react_native_1.Text>
+                  <react_native_1.Text style={styles.computedItemVal}>{A.flexDirection||"column"}</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.computedItem}>
+                  <react_native_1.Text style={styles.computedItemKey}>Box Sizing</react_native_1.Text>
+                  <react_native_1.Text style={styles.computedItemVal}>border-box</react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            {de&&<>
+                {I("Flex Layout",F.layout,"\u26A1","#8B5CF6")}
+                {I("Spacing & Margins",F.spacing,"\u{1F4E6}","#10B981")}
+                {I("Appearance & Color",F.appearance,"\u{1F3A8}","#F43F5E")}
+                {I("Typography",F.typography,"\u{1F524}","#F59E0B")}
+                {I("Borders & Corners",F.borders,"\u{1F532}","#0D9488")}
+                {I("Transforms",F.transforms,"\u{1F504}","#EC4899")}
+                {I("Other Properties",F.other,"\u2699\uFE0F","#64748B")}
+              </>}
+
+            
+            <react_native_1.View style={styles.codeSnippetCard}>
+              <react_native_1.View style={styles.codeSnippetHeader}>
+                <react_native_1.View style={styles.codeSnippetTabs}>
+                  <react_native_1.TouchableOpacity style={[styles.codeFormatBtn,B==="rn"&&styles.codeFormatBtnActive]}onPress={()=>M("rn")}>
+                    <react_native_1.Text style={[styles.codeFormatBtnText,B==="rn"&&styles.codeFormatBtnTextActive]}>
+                      React Native StyleSheet
+                    </react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+                  <react_native_1.TouchableOpacity style={[styles.codeFormatBtn,B==="css"&&styles.codeFormatBtnActive]}onPress={()=>M("css")}>
+                    <react_native_1.Text style={[styles.codeFormatBtnText,B==="css"&&styles.codeFormatBtnTextActive]}>
+                      Web CSS
+                    </react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+                </react_native_1.View>
+
+                <react_native_1.TouchableOpacity style={styles.codeCopyBtn}onPress={q}>
+                  <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.brandPurple}size={11}/>
+                  <react_native_1.Text style={styles.codeCopyBtnText}>Copy</react_native_1.Text>
+                </react_native_1.TouchableOpacity>
+              </react_native_1.View>
+              <react_native_1.View style={styles.codeSnippetBody}>
+                <react_native_1.Text style={styles.codeSnippetText}numberOfLines={14}>
+                  {B==="rn"?(0,uiInspectorEngine_1.generateStyleSheetSnippet)(w,A):(0,uiInspectorEngine_1.generateCssSnippet)(w,A)}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>}
+
+        
+        {m==="jsx"&&<react_native_1.View style={styles.jsxTabContainer}>
+            
+            <react_native_1.View style={styles.sourceLocationCard}>
+              <react_native_1.View style={styles.sourceLocationHeader}>
+                <react_native_1.Text style={styles.sourceLocationTitle}>📍 CODEBASE LOCATION</react_native_1.Text>
+                {v.sourceFile&&<react_native_1.TouchableOpacity style={styles.copyPathBtn}onPress={ie}>
+                    <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.brandPurple}size={11}/>
+                    <react_native_1.Text style={styles.copyPathBtnText}>Copy Path</react_native_1.Text>
+                  </react_native_1.TouchableOpacity>}
+              </react_native_1.View>
+              <react_native_1.View style={styles.sourceLocationBody}>
+                <react_native_1.Text style={styles.sourceLocationText}>
+                  {v.sourceLocation||(v.sourceFile?`${v.sourceFile}:${v.lineNumber||1}`:`${w}.tsx (Rendered React Node)`)}
+                </react_native_1.Text>
+                {v.lineNumber!=null&&<react_native_1.View style={styles.lineNumberBadge}>
+                    <react_native_1.Text style={styles.lineNumberBadgeText}>Line {v.lineNumber}</react_native_1.Text>
+                  </react_native_1.View>}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={styles.jsxCodeCard}>
+              <react_native_1.View style={styles.jsxCodeHeader}>
+                <react_native_1.View style={styles.jsxCodeTitleRow}>
+                  <NetworkIcons_1.CodeBracketsIcon color={AppColors_1.AppColors.brandPurple}size={14}/>
+                  <react_native_1.Text style={styles.jsxCodeTitle}>FULL JSX CODE</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.TouchableOpacity style={styles.jsxCopyActionBtn}onPress={U}>
+                  <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.white}size={11}/>
+                  <react_native_1.Text style={styles.jsxCopyActionBtnText}>Copy JSX</react_native_1.Text>
+                </react_native_1.TouchableOpacity>
+              </react_native_1.View>
+
+              <react_native_1.View style={styles.jsxCodeBody}>
+                <react_native_1.Text style={styles.jsxCodeContent}selectable>
+                  {v.code}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={styles.codeSnippetCard}>
+              <react_native_1.View style={styles.codeSnippetHeader}>
+                <react_native_1.Text style={styles.connectedStyleTitle}>🎨 CONNECTED STYLESHEET</react_native_1.Text>
+                <react_native_1.TouchableOpacity style={styles.codeCopyBtn}onPress={q}>
+                  <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.brandPurple}size={11}/>
+                  <react_native_1.Text style={styles.codeCopyBtnText}>Copy Styles</react_native_1.Text>
+                </react_native_1.TouchableOpacity>
+              </react_native_1.View>
+              <react_native_1.View style={styles.codeSnippetBody}>
+                <react_native_1.Text style={styles.codeSnippetText}numberOfLines={14}>
+                  {(0,uiInspectorEngine_1.generateStyleSheetSnippet)(w,A)}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>}
+
+        
+        {m==="boxmodel"&&<react_native_1.View style={styles.boxModelTabContainer}>
+            <react_native_1.View style={styles.boxModelCard}>
+              <react_native_1.Text style={styles.boxModelSectionTitle}>📦 VISUAL BOX MODEL (CSS METRICS)</react_native_1.Text>
+              <BoxModelVisualizer_1.BoxModelVisualizer boxModel={h}/>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={styles.boxModelMetricsTable}>
+              <react_native_1.Text style={styles.tableTitle}>SPACING SUMMARY</react_native_1.Text>
+              <react_native_1.View style={styles.tableRow}>
+                <react_native_1.Text style={styles.tableHeaderCell}>Layer</react_native_1.Text>
+                <react_native_1.Text style={styles.tableHeaderCell}>Top</react_native_1.Text>
+                <react_native_1.Text style={styles.tableHeaderCell}>Right</react_native_1.Text>
+                <react_native_1.Text style={styles.tableHeaderCell}>Bottom</react_native_1.Text>
+                <react_native_1.Text style={styles.tableHeaderCell}>Left</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.tableRow}>
+                <react_native_1.Text style={[styles.tableCell,{color:"#D97706",fontFamily:AppFonts_1.AppFonts.bold}]}>Margin</react_native_1.Text>
+                <react_native_1.Text style={styles.tableCell}>{h.margin.top} pt</react_native_1.Text>
+                <react_native_1.Text style={styles.tableCell}>{h.margin.right} pt</react_native_1.Text>
+                <react_native_1.Text style={styles.tableCell}>{h.margin.bottom} pt</react_native_1.Text>
+                <react_native_1.Text style={styles.tableCell}>{h.margin.left} pt</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.tableRow}>
+                <react_native_1.Text style={[styles.tableCell,{color:"#CA8A04",fontFamily:AppFonts_1.AppFonts.bold}]}>Border</react_native_1.Text>
+                <react_native_1.Text style={styles.tableCell}>{h.border.top} pt</react_native_1.Text>
+                <react_native_1.Text style={styles.tableCell}>{h.border.right} pt</react_native_1.Text>
+                <react_native_1.Text style={styles.tableCell}>{h.border.bottom} pt</react_native_1.Text>
+                <react_native_1.Text style={styles.tableCell}>{h.border.left} pt</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.tableRow}>
+                <react_native_1.Text style={[styles.tableCell,{color:"#059669",fontFamily:AppFonts_1.AppFonts.bold}]}>Padding</react_native_1.Text>
+                <react_native_1.Text style={styles.tableCell}>{h.padding.top} pt</react_native_1.Text>
+                <react_native_1.Text style={styles.tableCell}>{h.padding.right} pt</react_native_1.Text>
+                <react_native_1.Text style={styles.tableCell}>{h.padding.bottom} pt</react_native_1.Text>
+                <react_native_1.Text style={styles.tableCell}>{h.padding.left} pt</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles.tableRow}>
+                <react_native_1.Text style={[styles.tableCell,{color:"#4F46E5",fontFamily:AppFonts_1.AppFonts.bold}]}>Content</react_native_1.Text>
+                <react_native_1.Text style={[styles.tableCell,{flex:4}]}>
+                  {h.content.width} × {h.content.height} pt (Area: {Math.round(G)} pt²)
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            
+            <react_native_1.View style={styles.insetsCard}>
+              <react_native_1.Text style={styles.tableTitle}>SCREEN INSETS & EDGES</react_native_1.Text>
+              <react_native_1.View style={styles.insetsGrid}>
+                <react_native_1.View style={styles.insetRow}>
+                  <react_native_1.Text style={styles.insetLabel}>Distance from Screen Top:</react_native_1.Text>
+                  <react_native_1.Text style={styles.insetValue}>{Math.round(u.pageY)} pt</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.insetRow}>
+                  <react_native_1.Text style={styles.insetLabel}>Distance from Screen Left:</react_native_1.Text>
+                  <react_native_1.Text style={styles.insetValue}>{Math.round(u.pageX)} pt</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.insetRow}>
+                  <react_native_1.Text style={styles.insetLabel}>Distance from Screen Bottom:</react_native_1.Text>
+                  <react_native_1.Text style={styles.insetValue}>
+                    {Math.max(0,Math.round(O.height-(u.pageY+u.height)))} pt
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.insetRow}>
+                  <react_native_1.Text style={styles.insetLabel}>Distance from Screen Right:</react_native_1.Text>
+                  <react_native_1.Text style={styles.insetValue}>
+                    {Math.max(0,Math.round(O.width-(u.pageX+u.width)))} pt
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>}
+
+        
+        {m==="tree"&&<react_native_1.View style={styles.treeTabContainer}>
+            
+            <react_native_1.View style={styles.treeSegmentBar}>
+              <react_native_1.TouchableOpacity style={[styles.treeSegmentBtn,E==="ancestors"&&styles.treeSegmentBtnActive]}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),j("ancestors")}}>
+                <react_native_1.Text style={[styles.treeSegmentText,E==="ancestors"&&styles.treeSegmentTextActive]}>
+                  Ancestor Path ({z.length})
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+
+              <react_native_1.TouchableOpacity style={[styles.treeSegmentBtn,E==="all"&&styles.treeSegmentBtnActive]}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)(),j("all")}}>
+                <react_native_1.Text style={[styles.treeSegmentText,E==="all"&&styles.treeSegmentTextActive]}>
+                  App Component Tree
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+            </react_native_1.View>
+
+            {E==="ancestors"?<>
+                <react_native_1.View style={styles.treeHeaderCard}>
+                  <react_native_1.Text style={styles.treeHeaderTitle}>COMPONENT ANCESTOR PATH</react_native_1.Text>
+                  <react_native_1.Text style={styles.treeHeaderSubtitle}>
+                    Direct hierarchy chain from Root to the current component. Tap any node to inspect.
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={styles.treeList}>
+                  {z.map((t,e)=>{const _=e===z.length-1||t.componentName===w,T=e;return<react_native_1.TouchableOpacity key={t.id||e}activeOpacity={.7}style={[styles.treeItemCard,{marginLeft:Math.min(T*10,80)},_&&styles.treeItemCardActive]}onPress={()=>$(t)}>
+                        <react_native_1.View style={styles.treeItemTopRow}>
+                          <react_native_1.View style={styles.treeTagRow}>
+                            <react_native_1.View style={[styles.depthBadge,_&&styles.depthBadgeActive]}>
+                              <react_native_1.Text style={[styles.depthBadgeText,_&&styles.depthBadgeTextActive]}>
+                                L{T}
+                              </react_native_1.Text>
+                            </react_native_1.View>
+                            <react_native_1.Text style={[styles.treeTagName,_&&styles.treeTagNameActive]}>
+                              &lt;{t.displayName}&gt;
+                            </react_native_1.Text>
+                          </react_native_1.View>
+
+                          {_?<react_native_1.View style={styles.activePillBadge}>
+                              <react_native_1.Text style={styles.activePillBadgeText}>CURRENT</react_native_1.Text>
+                            </react_native_1.View>:<react_native_1.View style={styles.inspectArrowBtn}>
+                              <react_native_1.Text style={styles.inspectArrowBtnText}>Inspect →</react_native_1.Text>
+                            </react_native_1.View>}
+                        </react_native_1.View>
+
+                        {t.layout&&<react_native_1.View style={styles.treeItemBottomRow}>
+                            <react_native_1.Text style={styles.treeItemMetric}>
+                              Frame: {Math.round(t.layout.width)} × {Math.round(t.layout.height)} pt
+                            </react_native_1.Text>
+                            {t.isHostComponent&&<react_native_1.Text style={styles.treeItemHostBadge}>Native</react_native_1.Text>}
+                          </react_native_1.View>}
+                      </react_native_1.TouchableOpacity>})}
+                </react_native_1.View>
+              </>:<>
+                
+                <react_native_1.View style={styles.propsSearchRow}>
+                  <react_native_1.View style={styles.searchBar}>
+                    <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.slate400}size={14}/>
+                    <react_native_1.TextInput style={styles.searchInput}placeholder="Search app components..."placeholderTextColor={AppColors_1.AppColors.slate400}value={H}onChangeText={K}/>
+                  </react_native_1.View>
+                </react_native_1.View>
+
+                
+                <react_native_1.View style={styles.treeList}>
+                  {(()=>{const t=(0,uiInspectorEngine_1.getAllAppFibers)().filter(e=>H?e.name.toLowerCase().includes(H.toLowerCase()):!0);return t.length===0?<react_native_1.View style={styles.emptyCard}>
+                          <react_native_1.Text style={styles.emptyCardTitle}>No components match search</react_native_1.Text>
+                        </react_native_1.View>:t.map((e,_)=>{const T=e.name===w,f=Math.min(e.depth,8);return<react_native_1.TouchableOpacity key={`app_tree_node_${_}_${e.name}`}activeOpacity={.7}style={[styles.treeItemCard,{marginLeft:f*10},T&&styles.treeItemCardActive]}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)();const V=(0,uiInspectorEngine_1.buildHierarchyFromFiber)(e.fiber),S=e.styles.left??u.x,P=e.styles.top??u.y,D=e.styles.width??u.width,pe=e.styles.height??u.height,ye=(0,uiInspectorEngine_1.createInspectedElement)(e.name,e.props,{x:S,y:P,width:D,height:pe,pageX:S,pageY:P},V,e.nativeTag);b(ye)}}>
+                          <react_native_1.View style={styles.treeItemTopRow}>
+                            <react_native_1.View style={styles.treeTagRow}>
+                              <react_native_1.View style={[styles.depthBadge,T&&styles.depthBadgeActive]}>
+                                <react_native_1.Text style={[styles.depthBadgeText,T&&styles.depthBadgeTextActive]}>
+                                  {e.isHost?"Native":"JSX"}
+                                </react_native_1.Text>
+                              </react_native_1.View>
+                              <react_native_1.Text style={[styles.treeTagName,T&&styles.treeTagNameActive]}>
+                                &lt;{e.name}&gt;
+                              </react_native_1.Text>
+                            </react_native_1.View>
+
+                            {T?<react_native_1.View style={styles.activePillBadge}>
+                                <react_native_1.Text style={styles.activePillBadgeText}>SELECTED</react_native_1.Text>
+                              </react_native_1.View>:<react_native_1.View style={styles.inspectArrowBtn}>
+                                <react_native_1.Text style={styles.inspectArrowBtnText}>Select →</react_native_1.Text>
+                              </react_native_1.View>}
+                          </react_native_1.View>
+
+                          <react_native_1.View style={styles.treeItemBottomRow}>
+                            {e.text?<react_native_1.Text style={styles.treeItemMetric}numberOfLines={1}>
+                                "{e.text}"
+                              </react_native_1.Text>:<react_native_1.Text style={styles.treeItemMetric}>
+                                Props: {Object.keys(e.props).length} • Styles: {Object.keys(e.styles).length}
+                              </react_native_1.Text>}
+                            {e.sourceLocation&&<react_native_1.Text style={styles.treeItemLocationText}>
+                                {e.sourceLocation}
+                              </react_native_1.Text>}
+                          </react_native_1.View>
+                        </react_native_1.TouchableOpacity>})})()}
+                </react_native_1.View>
+              </>}
+          </react_native_1.View>}
+
+
+        
+        {m==="props"&&<react_native_1.View style={styles.propsTabContainer}>
+            <react_native_1.View style={styles.propsSearchRow}>
+              <react_native_1.View style={styles.searchBar}>
+                <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.slate400}size={14}/>
+                <react_native_1.TextInput style={styles.searchInput}placeholder="Filter props by name or value..."placeholderTextColor={AppColors_1.AppColors.slate400}value={x}onChangeText={X}/>
+              </react_native_1.View>
+
+              <TouchableScale_1.default style={styles.copyPropsBtn}onPress={ne}>
+                <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.white}size={11}/>
+                <react_native_1.Text style={styles.copyPropsBtnText}>Copy All</react_native_1.Text>
+              </TouchableScale_1.default>
+            </react_native_1.View>
+
+            {J.length===0?<react_native_1.View style={styles.emptyPropsBox}>
+                <react_native_1.Text style={styles.emptyPropsText}>No props match "{x}"</react_native_1.Text>
+              </react_native_1.View>:<react_native_1.View style={styles.propsList}>
+                {J.map(([t,e])=>{const _=typeof e,T=_==="function",f=_==="object"&&e!==null,V=!T&&!f;return<react_native_1.View key={t}style={styles.propItemCard}>
+                      <react_native_1.View style={styles.propHeader}>
+                        <react_native_1.Text style={styles.propKeyName}>{t}</react_native_1.Text>
+                        <react_native_1.View style={[styles.typeBadgePrimary,T&&styles.typeBadgeFn,f&&styles.typeBadgeObj,V&&styles.typeBadgePrim]}>
+                          <react_native_1.Text style={styles.typeBadgePrimaryText}>
+                            {T?"function":f?"object":_}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                      </react_native_1.View>
+
+                      {f?<react_native_1.View style={styles.jsonViewerWrapper}>
+                          <JsonViewer_1.default data={e}defaultExpandDepth={1}/>
+                        </react_native_1.View>:<react_native_1.Text style={styles.propValueText}numberOfLines={3}>
+                          {T?"\u0192 () { [native / custom handler] }":String(e)}
+                        </react_native_1.Text>}
+                    </react_native_1.View>})}
+              </react_native_1.View>}
+          </react_native_1.View>}
+
+        
+        {m==="a11y"&&<UiA11yAuditPanel_1.UiA11yAuditPanel a11y={te}/>}
+      </react_native_1.ScrollView>
+    </react_native_1.View>};exports.UiInspectorDetail=UiInspectorDetail;const styles=react_native_1.StyleSheet.create({container:{flex:1,backgroundColor:"#F8FAFC"},topControlBar:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",backgroundColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.bold,color:"#D97706"},componentTagName:{fontSize:12,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.brandPurple,paddingHorizontal:2},typeBadge:{backgroundColor:"#FFFFFF",paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,marginLeft:5,borderWidth:1,borderColor:"#E2E8F0"},typeBadgeText:{fontSize:9,fontFamily:AppFonts_1.AppFonts.semiBold,color:"#64748B"},breadcrumbScroll:{alignItems:"center",gap:4},crumbChip:{paddingHorizontal:6,paddingVertical:2.5,borderRadius:4,backgroundColor:"#F1F5F9"},crumbChipActive:{backgroundColor:AppColors_1.AppColors.brandPurple},crumbChipText:{fontSize:10,fontFamily:AppFonts_1.AppFonts.medium,color:"#64748B"},crumbChipTextActive:{color:AppColors_1.AppColors.white,fontFamily:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.brandPurple},closeBtn:{padding:5,borderRadius:6,backgroundColor:"#F1F5F9",borderWidth:1,borderColor:"#E2E8F0"},subTabBarWrapper:{backgroundColor:AppColors_1.AppColors.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:AppColors_1.AppColors.brandPurple,borderColor:"#4338CA",shadowColor:AppColors_1.AppColors.brandPurple,shadowOffset:{width:0,height:1.5},shadowOpacity:.2,shadowRadius:2,elevation:2},subTabText:{fontSize:11,fontFamily:AppFonts_1.AppFonts.medium,color:"#475569"},subTabTextActive:{color:AppColors_1.AppColors.white,fontFamily:AppFonts_1.AppFonts.bold},tabScrollContent:{flex:1},tabScrollInner:{padding:12,paddingBottom:32},stylesTabContainer:{gap:10},heroSnapshotCard:{backgroundColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.bold,color:"#FFFFFF"},heroPlaceholder:{alignItems:"center",justifyContent:"center"},heroPlaceholderIcon:{fontSize:24,marginBottom:4},heroPlaceholderText:{fontSize:10,fontFamily:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.bold,color:"#94A3B8",letterSpacing:.5},metricCellValue:{fontSize:12.5,fontFamily:AppFonts_1.AppFonts.bold,color:"#0F172A",marginTop:2},metricUnit:{fontSize:9,fontFamily:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.medium,color:"#64748B"},specsTagVal:{fontSize:9.5,fontFamily:AppFonts_1.AppFonts.bold,color:"#0F172A"},computedLayoutCard:{backgroundColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.bold,color:"#6366F1",letterSpacing:.6},computedLayoutSub:{fontSize:9.5,fontFamily:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.medium,color:"#64748B"},computedItemVal:{fontSize:10.5,fontFamily:AppFonts_1.AppFonts.bold,color:"#0F172A"},styleGroupCard:{backgroundColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.bold,letterSpacing:.6},styleGroupBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:10},styleGroupBadgeText:{fontSize:9.5,fontFamily:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.semiBold,color:"#0F172A"},stylePropColorValue:{fontFamily:AppFonts_1.AppFonts.bold,color:"#6366F1"},styleUnitText:{fontSize:9.5,fontFamily:AppFonts_1.AppFonts.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:AppColors_1.AppColors.white,shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.1,shadowRadius:1,elevation:1},codeFormatBtnText:{fontSize:9.5,fontFamily:AppFonts_1.AppFonts.medium,color:"#64748B"},codeFormatBtnTextActive:{color:AppColors_1.AppColors.brandPurple,fontFamily:AppFonts_1.AppFonts.bold},codeCopyBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:AppColors_1.AppColors.white,paddingHorizontal:8,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:"#C7D2FE"},codeCopyBtnText:{fontSize:10,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.brandPurple},codeSnippetBody:{padding:10,backgroundColor:"#FFFFFF"},codeSnippetText:{fontSize:11,fontFamily:"Courier",color:"#334155",lineHeight:16},jsxTabContainer:{gap:12},sourceLocationCard:{backgroundColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.brandPurple,letterSpacing:.6},copyPathBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:AppColors_1.AppColors.white,paddingHorizontal:7,paddingVertical:2.5,borderRadius:4,borderWidth:1,borderColor:"#C7D2FE"},copyPathBtnText:{fontSize:9.5,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.brandPurple},sourceLocationBody:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",padding:10},sourceLocationText:{flex:1,fontSize:11.5,fontFamily:AppFonts_1.AppFonts.bold,color:"#1E293B"},lineNumberBadge:{backgroundColor:"#F1F5F9",paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:"#E2E8F0"},lineNumberBadgeText:{fontSize:9.5,fontFamily:AppFonts_1.AppFonts.semiBold,color:"#64748B"},jsxCodeCard:{backgroundColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.brandPurple,letterSpacing:.6},jsxCopyActionBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:AppColors_1.AppColors.brandPurple,paddingHorizontal:9,paddingVertical:4,borderRadius:6},jsxCopyActionBtnText:{fontSize:10.5,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.white},jsxCodeBody:{padding:12,backgroundColor:"#FAF5FF"},jsxCodeContent:{fontSize:12,fontFamily:"Courier",color:"#4C1D95",lineHeight:18},connectedStyleTitle:{fontSize:10,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.brandPurple,letterSpacing:.6},boxModelTabContainer:{gap:12},boxModelCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:10,padding:12,borderWidth:1,borderColor:"#E2E8F0"},boxModelSectionTitle:{fontSize:10.5,fontFamily:AppFonts_1.AppFonts.bold,color:"#64748B",letterSpacing:.5,marginBottom:8},boxModelMetricsTable:{backgroundColor:AppColors_1.AppColors.white,borderRadius:10,padding:12,borderWidth:1,borderColor:"#E2E8F0"},tableTitle:{fontSize:10,fontFamily:AppFonts_1.AppFonts.bold,color:"#64748B",letterSpacing:.5,marginBottom:8},tableRow:{flexDirection:"row",borderBottomWidth:1,borderBottomColor:"#F1F5F9",paddingVertical:6},tableHeaderCell:{flex:1,fontSize:10,fontFamily:AppFonts_1.AppFonts.bold,color:"#94A3B8",textAlign:"center"},tableCell:{flex:1,fontSize:11,fontFamily:AppFonts_1.AppFonts.medium,color:"#334155",textAlign:"center"},insetsCard:{backgroundColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.medium,color:"#64748B"},insetValue:{fontSize:11.5,fontFamily:AppFonts_1.AppFonts.bold,color:"#0F172A"},treeTabContainer:{gap:10},treeSegmentBar:{flexDirection:"row",backgroundColor:"#F1F5F9",borderRadius:8,padding:3,gap:4},treeSegmentBtn:{flex:1,paddingVertical:7,alignItems:"center",justifyContent:"center",borderRadius:6},treeSegmentBtnActive:{backgroundColor:AppColors_1.AppColors.white,shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.1,shadowRadius:2,elevation:1},treeSegmentText:{fontSize:11,fontFamily:AppFonts_1.AppFonts.medium,color:"#64748B"},treeSegmentTextActive:{color:AppColors_1.AppColors.brandPurple,fontFamily:AppFonts_1.AppFonts.bold},treeHeaderCard:{backgroundColor:"#F8FAFC",borderRadius:8,padding:10,borderWidth:1,borderColor:"#E2E8F0"},treeHeaderTitle:{fontSize:10.5,fontFamily:AppFonts_1.AppFonts.bold,color:"#64748B",letterSpacing:.5,marginBottom:4},treeHeaderSubtitle:{fontSize:11,fontFamily:AppFonts_1.AppFonts.regular,color:"#94A3B8",lineHeight:16},treeList:{gap:6},treeItemCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:8,padding:10,borderWidth:1,borderColor:"#E2E8F0"},treeItemCardActive:{backgroundColor:"#EEF2FF",borderColor:"#6366F1",borderLeftWidth:3.5,borderLeftColor:AppColors_1.AppColors.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:AppColors_1.AppColors.brandPurple},depthBadgeText:{fontSize:9,fontFamily:AppFonts_1.AppFonts.bold,color:"#64748B"},depthBadgeTextActive:{color:AppColors_1.AppColors.white},treeTagName:{fontSize:12,fontFamily:AppFonts_1.AppFonts.bold,color:"#334155"},treeTagNameActive:{color:AppColors_1.AppColors.brandPurple},activePillBadge:{backgroundColor:"#10B98118",paddingHorizontal:6,paddingVertical:2,borderRadius:4},activePillBadgeText:{fontSize:9,fontFamily:AppFonts_1.AppFonts.bold,color:"#059669"},inspectArrowBtn:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,backgroundColor:"#F8FAFC"},inspectArrowBtnText:{fontSize:10,fontFamily:AppFonts_1.AppFonts.medium,color:"#64748B"},treeItemBottomRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginTop:6,paddingTop:4,borderTopWidth:1,borderTopColor:"#F1F5F9"},treeItemMetric:{fontSize:9.5,fontFamily:AppFonts_1.AppFonts.regular,color:"#94A3B8"},treeItemLocationText:{fontSize:9.5,fontFamily:AppFonts_1.AppFonts.regular,color:AppColors_1.AppColors.brandPurple},treeItemHostBadge:{fontSize:9,fontFamily:AppFonts_1.AppFonts.semiBold,color:"#6366F1"},propsTabContainer:{gap:10},propsSearchRow:{flexDirection:"row",gap:8,alignItems:"center"},searchBar:{flex:1,flexDirection:"row",alignItems:"center",gap:8,backgroundColor:AppColors_1.AppColors.white,paddingHorizontal:10,borderRadius:8,borderWidth:1,borderColor:"#E2E8F0",height:36},searchInput:{flex:1,fontSize:11.5,fontFamily:AppFonts_1.AppFonts.regular,color:"#0F172A",padding:0},copyPropsBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:AppColors_1.AppColors.brandPurple,paddingHorizontal:10,height:36,borderRadius:8},copyPropsBtnText:{fontSize:10.5,fontFamily:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.white},emptyPropsBox:{padding:24,alignItems:"center",backgroundColor:AppColors_1.AppColors.white,borderRadius:8,borderWidth:1,borderColor:"#E2E8F0"},emptyPropsText:{fontSize:12,fontFamily:AppFonts_1.AppFonts.medium,color:"#94A3B8"},propsList:{gap:6},propItemCard:{backgroundColor:AppColors_1.AppColors.white,borderRadius:8,padding:10,borderWidth:1,borderColor:"#E2E8F0"},propHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:4},propKeyName:{fontSize:12,fontFamily:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.bold,color:AppColors_1.AppColors.white},modalCloseBtn:{padding:4},modalImageContainer:{padding:12,alignItems:"center",justifyContent:"center"},modalImage:{width:"100%",height:260}});

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

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