react-native-inapp-inspector 2.5.13 → 2.5.14

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

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