react-native-inapp-inspector 2.5.12 → 2.5.13

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

@@ -29,13 +29,13 @@ https://github.com/vengatmacuser/react-native-inapp-inspector`,url:"https://gith
           
           <T style={e.pillRow}>
             <T style={e.pillBadge}>
-              <C style={e.pillBadgeText}>MIT LICENSE</C>
+              <C style={e.pillBadgeText}>{S("support.mitLicense","MIT LICENSE")}</C>
             </T>
             <T style={e.pillBadge}>
-              <C style={e.pillBadgeText}>ZERO CONFIG</C>
+              <C style={e.pillBadgeText}>{S("support.zeroConfig","ZERO CONFIG")}</C>
             </T>
             <T style={e.pillBadge}>
-              <C style={e.pillBadgeText}>FABRIC & TURBO</C>
+              <C style={e.pillBadgeText}>{S("support.fabricTurbo","FABRIC & TURBO")}</C>
             </T>
           </T>
         </T>
@@ -99,7 +99,7 @@ https://github.com/vengatmacuser/react-native-inapp-inspector`,url:"https://gith
                     {S("support.star","Star on GitHub")}
                   </C>
                   <T style={e.badgeAmber}>
-                    <C style={e.badgeAmberText}>RECOMMENDED</C>
+                    <C style={e.badgeAmberText}>{S("support.recommended","RECOMMENDED")}</C>
                   </T>
                 </T>
                 <C style={e.itemDesc}>
@@ -196,7 +196,7 @@ https://github.com/vengatmacuser/react-native-inapp-inspector`,url:"https://gith
             <T style={e.authorTextCol}>
               <C style={e.authorName}>Vengateswaran Balakrishnan</C>
               <C style={e.authorRole}>
-                Creator & Core Maintainer • @vengatmacuser
+                {S("support.creatorMaintainer","Creator & Core Maintainer \u2022 @vengatmacuser")}
               </C>
               <C style={e.authorEmail}>vengatmacuser@gmail.com</C>
             </T>

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { A11yAuditResult } from '../../types';
+interface UiA11yAuditPanelProps {
+    a11y: A11yAuditResult;
+}
+export declare const UiA11yAuditPanel: React.FC<UiA11yAuditPanelProps>;
+export {};

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

@@ -0,0 +1,97 @@
+import"react";import{StyleSheet as L,Text as T,View as S}from"react-native";import{AppColors as f}from"../../styles/AppColors";import{AppFonts as x}from"../../styles/AppFonts";import{AccessibilityIcon as H,AlertTriangleIcon as P}from"../NetworkIcons";export const UiA11yAuditPanel=({a11y:W})=>{const{hasValidTouchTarget:C,touchTargetWidth:R,touchTargetHeight:k,recommendedMinSize:h,contrastRatio:p,contrastScore:A,textColor:D,backgroundColor:V,hasAccessibilityLabel:w,accessibilityRole:B,accessibilityHint:z,issues:F}=W;return<S style={e.container}>
+      
+      <S style={e.card}>
+        <S style={e.cardHeader}>
+          <S style={e.cardTitleRow}>
+            <H color={f.brandPurple}size={18}/>
+            <T style={e.cardTitle}>Touch Target Size</T>
+          </S>
+          <S style={[e.badge,C?e.badgeSuccess:e.badgeWarning]}>
+            <T style={[e.badgeText,C?e.badgeTextSuccess:e.badgeTextWarning]}>
+              {C?"COMPLIANT":"SUB-OPTIMAL"}
+            </T>
+          </S>
+        </S>
+
+        <S style={e.metricRow}>
+          <S style={e.metricItem}>
+            <T style={e.metricLabel}>Actual Size</T>
+            <T style={e.metricValue}>
+              {Math.round(R)} × {Math.round(k)} pt
+            </T>
+          </S>
+          <S style={e.metricItem}>
+            <T style={e.metricLabel}>Target Guideline</T>
+            <T style={e.metricValue}>
+              ≥ {h} × {h} pt
+            </T>
+          </S>
+        </S>
+      </S>
+
+      
+      <S style={e.card}>
+        <S style={e.cardHeader}>
+          <S style={e.cardTitleRow}>
+            <T style={e.cardTitle}>WCAG Color Contrast</T>
+          </S>
+          <S style={[e.badge,A==="AAA"||A==="AA"?e.badgeSuccess:A==="Fail"?e.badgeError:e.badgeNeutral]}>
+            <T style={[e.badgeText,A==="AAA"||A==="AA"?e.badgeTextSuccess:A==="Fail"?e.badgeTextError:e.badgeTextNeutral]}>
+              {A==="N/A"?"NOT APPLICABLE":`WCAG ${A}`}
+            </T>
+          </S>
+        </S>
+
+        {p!==void 0?<S style={e.contrastPreview}>
+            <S style={[e.contrastSwatch,{backgroundColor:V||"#FFFFFF"}]}>
+              <T style={[e.contrastSampleText,{color:D||"#000000"}]}>
+                Sample Text
+              </T>
+            </S>
+            <S style={e.contrastDetails}>
+              <T style={e.contrastRatioValue}>{p}:1</T>
+              <T style={e.contrastSubtext}>
+                {p>=7?"Passes AAA (Enhanced Contrast)":p>=4.5?"Passes AA (Minimum Standard)":"Fails AA (Low Contrast Warning)"}
+              </T>
+            </S>
+          </S>:<T style={e.naSubtext}>
+            Text or background color is transparent or dynamically inherited.
+          </T>}
+      </S>
+
+      
+      <S style={e.card}>
+        <T style={[e.cardTitle,{marginBottom:10}]}>Accessibility Attributes</T>
+
+        <S style={e.attributeRow}>
+          <T style={e.attributeLabel}>accessibilityLabel:</T>
+          <T style={[e.attributeValue,!w&&{color:f.grayTextWeak,fontStyle:"italic"}]}>
+            {w?"Provided":"None specified"}
+          </T>
+        </S>
+
+        <S style={e.attributeRow}>
+          <T style={e.attributeLabel}>accessibilityRole:</T>
+          <T style={[e.attributeValue,!B&&{color:f.grayTextWeak,fontStyle:"italic"}]}>
+            {B||"None"}
+          </T>
+        </S>
+
+        {z&&<S style={e.attributeRow}>
+            <T style={e.attributeLabel}>accessibilityHint:</T>
+            <T style={e.attributeValue}>{z}</T>
+          </S>}
+      </S>
+
+      
+      {F.length>0&&<S style={[e.card,e.issuesCard]}>
+          <S style={e.issuesHeader}>
+            <P color="#D97706"size={16}/>
+            <T style={e.issuesTitle}>Recommendations ({F.length})</T>
+          </S>
+          {F.map((I,E)=><S key={E}style={e.issueItem}>
+              <T style={e.issueBullet}>•</T>
+              <T style={e.issueText}>{I}</T>
+            </S>)}
+        </S>}
+    </S>};const e=L.create({container:{gap:10,paddingVertical:4},card:{backgroundColor:f.white,borderRadius:12,padding:14,borderWidth:1,borderColor:f.grayBorderSecondary},cardHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:10},cardTitleRow:{flexDirection:"row",alignItems:"center",gap:8},cardTitle:{fontSize:14,fontFamily:x.semiBold,color:f.slate900},badge:{paddingHorizontal:8,paddingVertical:3,borderRadius:6},badgeSuccess:{backgroundColor:"#10B9811A",borderColor:"#10B98144",borderWidth:1},badgeWarning:{backgroundColor:"#F59E0B1A",borderColor:"#F59E0B44",borderWidth:1},badgeError:{backgroundColor:"#E11D481A",borderColor:"#E11D4844",borderWidth:1},badgeNeutral:{backgroundColor:f.slate100},badgeText:{fontSize:10,fontFamily:x.bold},badgeTextSuccess:{color:"#059669"},badgeTextWarning:{color:"#D97706"},badgeTextError:{color:"#E11D48"},badgeTextNeutral:{color:f.slate600},metricRow:{flexDirection:"row",gap:16},metricItem:{flex:1,backgroundColor:f.slate50,padding:10,borderRadius:8},metricLabel:{fontSize:11,fontFamily:x.medium,color:f.grayTextWeak,marginBottom:4},metricValue:{fontSize:13,fontFamily:x.semiBold,color:f.slate900},contrastPreview:{flexDirection:"row",alignItems:"center",gap:12},contrastSwatch:{paddingVertical:12,paddingHorizontal:16,borderRadius:8,borderWidth:1,borderColor:f.grayBorderSecondary},contrastSampleText:{fontSize:13,fontFamily:x.semiBold},contrastDetails:{flex:1},contrastRatioValue:{fontSize:16,fontFamily:x.bold,color:f.slate900},contrastSubtext:{fontSize:11,fontFamily:x.medium,color:f.grayTextWeak,marginTop:2},naSubtext:{fontSize:12,fontFamily:x.medium,color:f.grayTextWeak},attributeRow:{flexDirection:"row",justifyContent:"space-between",paddingVertical:6,borderBottomWidth:1,borderBottomColor:f.slate100},attributeLabel:{fontSize:12,fontFamily:x.medium,color:f.slate600},attributeValue:{fontSize:12,fontFamily:x.semiBold,color:f.slate900},issuesCard:{backgroundColor:"#FEF3C722",borderColor:"#F59E0B44"},issuesHeader:{flexDirection:"row",alignItems:"center",gap:6,marginBottom:8},issuesTitle:{fontSize:13,fontFamily:x.semiBold,color:"#D97706"},issueItem:{flexDirection:"row",alignItems:"flex-start",gap:6,marginVertical:3},issueBullet:{fontSize:12,color:"#D97706"},issueText:{fontSize:12,fontFamily:x.medium,color:f.slate700,flex:1,lineHeight:16}});

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

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

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;