react-native-inapp-inspector 2.5.14 → 2.5.15

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

@@ -1,117 +0,0 @@
-import"react";import{ScrollView as G,StyleSheet as R,Text as C,TouchableOpacity as F,View as T}from"react-native";import{useInspector as v}from"./InspectorContext";import{ChevronIcon as M,EmptyRadarIcon as N,InspectPointerIcon as O,LayersIcon as U,RulerIcon as J,SlidersIcon as X,TrashIcon as Y}from"../NetworkIcons";import P from"../TouchableScale";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as f}from"../../styles/AppFonts";import{triggerNativeHaptic as w}from"../../native/NativeInspector";import{showToast as W}from"../../helpers/toast";import{BoxModelVisualizer as K}from"./BoxModelVisualizer";export const UiInspectorTab=()=>{const{selectedUiElement:S,setSelectedUiElement:D,setIsInspectModeActive:E,setVisible:H,showAlignmentGrid:I,setShowAlignmentGrid:L,uiInspectorHistory:B,clearUiInspectorHistory:V}=v(),z=()=>{w(),H(!1),E(!0),W("Touch anywhere to inspect JSX components")};return<G showsVerticalScrollIndicator={!1}contentContainerStyle={e.container}>
-      
-      <T style={e.heroCard}>
-        <T style={e.heroLeft}>
-          <T style={e.heroIconBadge}>
-            <O color={t.white}size={22}/>
-          </T>
-          <T style={e.heroTextGroup}>
-            <C style={e.heroTitle}>Inspect Elements On Screen</C>
-            <C style={e.heroSubtitle}>
-              Tap, drag, and highlight rendered JSX components to inspect styles, props & box model in real-time.
-            </C>
-          </T>
-        </T>
-
-        <P style={e.heroButton}onPress={z}>
-          <U color={t.brandPurple}size={16}/>
-          <C style={e.heroButtonText}>Start Inspect Mode</C>
-        </P>
-      </T>
-
-      
-      {S?<T style={e.selectedCard}>
-          <T style={e.selectedHeader}>
-            <T style={e.selectedTitleGroup}>
-              <T style={e.tagBadge}>
-                <C style={e.tagBadgeText}>&lt;{S.componentName}&gt;</C>
-              </T>
-              <C style={e.dimensionsBadge}>
-                {Math.round(S.layout.width)} × {Math.round(S.layout.height)} pt
-              </C>
-            </T>
-
-            <T style={e.a11yScoreBadge}>
-              <C style={[e.a11yScoreText,S.a11y.hasValidTouchTarget?e.a11yScoreTextPass:e.a11yScoreTextWarn]}>
-                {S.a11y.hasValidTouchTarget?"A11y Pass":"A11y Warning"}
-              </C>
-            </T>
-          </T>
-
-          
-          <K boxModel={S.boxModel}compact/>
-
-          
-          <T style={e.metricsBar}>
-            <T style={e.metricChip}>
-              <C style={e.metricChipLabel}>Props:</C>
-              <C style={e.metricChipValue}>
-                {Object.keys(S.props).length}
-              </C>
-            </T>
-            <T style={e.metricChip}>
-              <C style={e.metricChipLabel}>Styles:</C>
-              <C style={e.metricChipValue}>
-                {Object.keys(S.flattenedStyles).length}
-              </C>
-            </T>
-            <T style={e.metricChip}>
-              <C style={e.metricChipLabel}>Depth:</C>
-              <C style={e.metricChipValue}>
-                {S.hierarchy.length} levels
-              </C>
-            </T>
-          </T>
-        </T>:<T style={e.emptyCard}>
-          <N color={t.grayTextWeak}size={32}/>
-          <C style={e.emptyCardTitle}>No Element Selected</C>
-          <C style={e.emptyCardSubtitle}>
-            Launch Inspect Mode to select an on-screen JSX component.
-          </C>
-        </T>}
-
-      
-      <T style={e.toolsSection}>
-        <C style={e.sectionHeader}>DESIGN & ALIGNMENT TOOLS</C>
-        <T style={e.toolsGrid}>
-          <F style={[e.toolCard,I&&e.toolCardActive]}onPress={()=>{w(),L(!I)}}>
-            <J color={I?t.brandPurple:t.slate600}size={18}/>
-            <C style={[e.toolCardTitle,I&&e.toolCardTitleActive]}>
-              8pt Grid Guide
-            </C>
-            <C style={e.toolCardSub}>
-              {I?"Enabled":"Disabled"}
-            </C>
-          </F>
-
-          <F style={e.toolCard}onPress={z}>
-            <X color={t.brandPurple}size={18}/>
-            <C style={e.toolCardTitle}>Live Tweaker</C>
-            <C style={e.toolCardSub}>Sandbox Styles</C>
-          </F>
-        </T>
-      </T>
-
-      
-      {B.length>0&&<T style={e.historySection}>
-          <T style={e.historyHeader}>
-            <C style={e.sectionHeader}>RECENTLY INSPECTED ({B.length})</C>
-            <P style={e.clearHistoryBtn}onPress={()=>{w(),V(),W("Cleared inspection history")}}>
-              <Y color={t.grayTextWeak}size={12}/>
-              <C style={e.clearHistoryBtnText}>Clear</C>
-            </P>
-          </T>
-
-          <T style={e.historyList}>
-            {B.map((x,A)=><F key={x.id||A}style={e.historyItem}onPress={()=>{w(),D(x)}}>
-                <T style={e.historyItemLeft}>
-                  <C style={e.historyItemTag}>&lt;{x.componentName}&gt;</C>
-                  <C style={e.historyItemDim}>
-                    {Math.round(x.layout.width)} × {Math.round(x.layout.height)} pt
-                  </C>
-                </T>
-                <M color={t.grayTextWeak}size={12}direction="right"/>
-              </F>)}
-          </T>
-        </T>}
-    </G>};const e=R.create({container:{padding:12,gap:12},heroCard:{backgroundColor:t.brandPurple,borderRadius:14,padding:16,gap:14,shadowColor:t.brandPurple,shadowOffset:{width:0,height:4},shadowOpacity:.25,shadowRadius:8,elevation:4},heroLeft:{flexDirection:"row",gap:12,alignItems:"flex-start"},heroIconBadge:{width:40,height:40,borderRadius:10,backgroundColor:"#FFFFFF22",alignItems:"center",justifyContent:"center"},heroTextGroup:{flex:1},heroTitle:{fontSize:16,fontFamily:f.bold,color:t.white,marginBottom:4},heroSubtitle:{fontSize:12,fontFamily:f.medium,color:"#EEF2FF",lineHeight:17},heroButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",backgroundColor:t.white,paddingVertical:10,borderRadius:10,gap:8},heroButtonText:{fontSize:13,fontFamily:f.bold,color:t.brandPurple},selectedCard:{backgroundColor:t.white,borderRadius:12,padding:14,borderWidth:1,borderColor:t.grayBorderSecondary,gap:10},selectedHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},selectedTitleGroup:{flexDirection:"row",alignItems:"center",gap:8},tagBadge:{backgroundColor:"#4F46E518",paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1,borderColor:"#4F46E533"},tagBadgeText:{fontSize:13,fontFamily:f.bold,color:t.brandPurple},dimensionsBadge:{fontSize:12,fontFamily:f.medium,color:t.grayTextWeak},a11yScoreBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:5,backgroundColor:t.slate100},a11yScoreText:{fontSize:10,fontFamily:f.bold},a11yScoreTextPass:{color:"#059669"},a11yScoreTextWarn:{color:"#D97706"},metricsBar:{flexDirection:"row",backgroundColor:t.slate50,borderRadius:8,padding:8,justifyContent:"space-around"},metricChip:{flexDirection:"row",gap:4,alignItems:"center"},metricChipLabel:{fontSize:11,fontFamily:f.medium,color:t.grayTextWeak},metricChipValue:{fontSize:11,fontFamily:f.bold,color:t.slate900},emptyCard:{backgroundColor:t.white,borderRadius:12,padding:24,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:t.grayBorderSecondary,borderStyle:"dashed",gap:6},emptyCardTitle:{fontSize:14,fontFamily:f.semiBold,color:t.slate700,marginTop:4},emptyCardSubtitle:{fontSize:12,fontFamily:f.medium,color:t.grayTextWeak,textAlign:"center"},sectionHeader:{fontSize:10,fontFamily:f.bold,color:t.grayTextWeak,letterSpacing:.8},toolsSection:{gap:8},toolsGrid:{flexDirection:"row",gap:10},toolCard:{flex:1,backgroundColor:t.white,borderRadius:10,padding:12,borderWidth:1,borderColor:t.grayBorderSecondary,gap:4},toolCardActive:{borderColor:t.brandPurple,backgroundColor:"#EEF2FF"},toolCardTitle:{fontSize:12,fontFamily:f.semiBold,color:t.slate900,marginTop:4},toolCardTitleActive:{color:t.brandPurple},toolCardSub:{fontSize:10,fontFamily:f.medium,color:t.grayTextWeak},historySection:{gap:8,marginTop:4},historyHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},clearHistoryBtn:{flexDirection:"row",alignItems:"center",gap:4},clearHistoryBtnText:{fontSize:10,fontFamily:f.medium,color:t.grayTextWeak},historyList:{backgroundColor:t.white,borderRadius:10,borderWidth:1,borderColor:t.grayBorderSecondary,overflow:"hidden"},historyItem:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:t.slate100},historyItemLeft:{flexDirection:"row",alignItems:"center",gap:8},historyItemTag:{fontSize:12,fontFamily:f.bold,color:t.brandPurple},historyItemDim:{fontSize:11,fontFamily:f.medium,color:t.grayTextWeak}});

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

@@ -1,10 +0,0 @@
-import React from 'react';
-interface UiLiveStyleTweakerProps {
-    componentName: string;
-    originalStyles: Record<string, any>;
-    tweakedStyles: Record<string, any>;
-    onApplyStyle: (key: string, value: any) => void;
-    onResetStyles: () => void;
-}
-export declare const UiLiveStyleTweaker: React.FC<UiLiveStyleTweakerProps>;
-export {};

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

@@ -1,148 +0,0 @@
-import"react";import{ScrollView as O,StyleSheet as N,Text as B,TouchableOpacity as R,View as T}from"react-native";import{AppColors as w}from"../../styles/AppColors";import{AppFonts as x}from"../../styles/AppFonts";import{RotateCcwIcon as U,SlidersIcon as J,CopyIcon as K}from"../NetworkIcons";import D from"../TouchableScale";import{generateStyleSheetSnippet as Q}from"../../helpers/uiInspectorEngine";import{triggerNativeHaptic as F}from"../../native/NativeInspector";import{showToast as A}from"../../helpers/toast";import X from"@react-native-clipboard/clipboard";const Y=["#4F46E5","#7C3AED","#2563EB","#0D9488","#10B981","#F59E0B","#E11D48","#0F172A","#F8FAFC","#FFFFFF","transparent"];export const UiLiveStyleTweaker=({componentName:V,originalStyles:E,tweakedStyles:I,onApplyStyle:P,onResetStyles:v})=>{const S={...E,...I},W=Object.keys(I).length>0,H=()=>{const f=Q(V,S);X.setString(f),F(),A("Copied tweaked StyleSheet to clipboard")},C=(f,L,G=0)=>{const M=typeof S[f]=="number"?S[f]:0,j=Math.max(G,M+L);P(f,j),F()};return<O showsVerticalScrollIndicator={!1}contentContainerStyle={e.container}>
-      
-      <T style={e.topActionsRow}>
-        <T style={e.titleWithBadge}>
-          <J color={w.brandPurple}size={18}/>
-          <B style={e.sectionTitle}>Live Style Sandbox</B>
-          {W&&<T style={e.modifiedBadge}>
-              <B style={e.modifiedBadgeText}>MODIFIED</B>
-            </T>}
-        </T>
-
-        <T style={e.actionButtonsGroup}>
-          {W&&<D style={e.resetButton}onPress={()=>{v(),F(),A("Reset styles to original")}}>
-              <U color="#E11D48"size={14}/>
-              <B style={e.resetButtonText}>Reset</B>
-            </D>}
-
-          <D style={e.exportButton}onPress={H}>
-            <K color={w.white}size={14}/>
-            <B style={e.exportButtonText}>Copy CSS</B>
-          </D>
-        </T>
-      </T>
-
-      
-      <T style={e.card}>
-        <B style={e.cardHeader}>Padding & Margin</B>
-
-        <T style={e.controlRow}>
-          <B style={e.controlLabel}>Padding</B>
-          <T style={e.stepperContainer}>
-            <R style={e.stepperBtn}onPress={()=>C("padding",-2)}>
-              <B style={e.stepperBtnText}>-</B>
-            </R>
-            <B style={e.stepperValue}>{S.padding??0} pt</B>
-            <R style={e.stepperBtn}onPress={()=>C("padding",2)}>
-              <B style={e.stepperBtnText}>+</B>
-            </R>
-          </T>
-        </T>
-
-        <T style={e.controlRow}>
-          <B style={e.controlLabel}>Margin</B>
-          <T style={e.stepperContainer}>
-            <R style={e.stepperBtn}onPress={()=>C("margin",-2)}>
-              <B style={e.stepperBtnText}>-</B>
-            </R>
-            <B style={e.stepperValue}>{S.margin??0} pt</B>
-            <R style={e.stepperBtn}onPress={()=>C("margin",2)}>
-              <B style={e.stepperBtnText}>+</B>
-            </R>
-          </T>
-        </T>
-
-        <T style={e.controlRow}>
-          <B style={e.controlLabel}>Gap</B>
-          <T style={e.stepperContainer}>
-            <R style={e.stepperBtn}onPress={()=>C("gap",-2)}>
-              <B style={e.stepperBtnText}>-</B>
-            </R>
-            <B style={e.stepperValue}>{S.gap??0} pt</B>
-            <R style={e.stepperBtn}onPress={()=>C("gap",2)}>
-              <B style={e.stepperBtnText}>+</B>
-            </R>
-          </T>
-        </T>
-      </T>
-
-      
-      <T style={e.card}>
-        <B style={e.cardHeader}>Borders & Corners</B>
-
-        <T style={e.controlRow}>
-          <B style={e.controlLabel}>Border Radius</B>
-          <T style={e.stepperContainer}>
-            <R style={e.stepperBtn}onPress={()=>C("borderRadius",-2)}>
-              <B style={e.stepperBtnText}>-</B>
-            </R>
-            <B style={e.stepperValue}>{S.borderRadius??0} pt</B>
-            <R style={e.stepperBtn}onPress={()=>C("borderRadius",2)}>
-              <B style={e.stepperBtnText}>+</B>
-            </R>
-          </T>
-        </T>
-
-        <T style={e.controlRow}>
-          <B style={e.controlLabel}>Border Width</B>
-          <T style={e.stepperContainer}>
-            <R style={e.stepperBtn}onPress={()=>C("borderWidth",-1)}>
-              <B style={e.stepperBtnText}>-</B>
-            </R>
-            <B style={e.stepperValue}>{S.borderWidth??0} pt</B>
-            <R style={e.stepperBtn}onPress={()=>C("borderWidth",1)}>
-              <B style={e.stepperBtnText}>+</B>
-            </R>
-          </T>
-        </T>
-      </T>
-
-      
-      <T style={e.card}>
-        <B style={e.cardHeader}>Typography</B>
-
-        <T style={e.controlRow}>
-          <B style={e.controlLabel}>Font Size</B>
-          <T style={e.stepperContainer}>
-            <R style={e.stepperBtn}onPress={()=>C("fontSize",-1,8)}>
-              <B style={e.stepperBtnText}>-</B>
-            </R>
-            <B style={e.stepperValue}>{S.fontSize??14} pt</B>
-            <R style={e.stepperBtn}onPress={()=>C("fontSize",1)}>
-              <B style={e.stepperBtnText}>+</B>
-            </R>
-          </T>
-        </T>
-
-        <T style={e.segmentedRow}>
-          <B style={e.controlLabel}>Weight</B>
-          <T style={e.segmentedGroup}>
-            {["normal","500","600","bold"].map(f=><R key={f}style={[e.segmentItem,S.fontWeight===f&&e.segmentItemActive]}onPress={()=>{P("fontWeight",f),F()}}>
-                <B style={[e.segmentText,S.fontWeight===f&&e.segmentTextActive]}>
-                  {f}
-                </B>
-              </R>)}
-          </T>
-        </T>
-      </T>
-
-      
-      <T style={e.card}>
-        <B style={e.cardHeader}>Background Color</B>
-        <T style={e.paletteGrid}>
-          {Y.map(f=><R key={f}style={[e.colorSwatch,{backgroundColor:f},S.backgroundColor===f&&e.colorSwatchActive]}onPress={()=>{P("backgroundColor",f),F()}}/>)}
-        </T>
-      </T>
-
-      
-      <T style={e.card}>
-        <B style={e.cardHeader}>Opacity & Elevation</B>
-        <T style={e.segmentedGroup}>
-          {[1,.8,.6,.4,.2].map(f=><R key={f}style={[e.segmentItem,S.opacity===f&&e.segmentItemActive]}onPress={()=>{P("opacity",f),F()}}>
-              <B style={[e.segmentText,S.opacity===f&&e.segmentTextActive]}>
-                {Math.round(f*100)}%
-              </B>
-            </R>)}
-        </T>
-      </T>
-    </O>};const e=N.create({container:{paddingVertical:6,gap:10},topActionsRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:4},titleWithBadge:{flexDirection:"row",alignItems:"center",gap:6},sectionTitle:{fontSize:14,fontFamily:x.semiBold,color:w.slate900},modifiedBadge:{backgroundColor:"#F59E0B22",paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:"#F59E0B55"},modifiedBadgeText:{fontSize:9,fontFamily:x.bold,color:"#D97706"},actionButtonsGroup:{flexDirection:"row",gap:8},resetButton:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:"#E11D4811",borderWidth:1,borderColor:"#E11D4833",paddingHorizontal:8,paddingVertical:5,borderRadius:6},resetButtonText:{fontSize:11,fontFamily:x.semiBold,color:"#E11D48"},exportButton:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:w.brandPurple,paddingHorizontal:10,paddingVertical:5,borderRadius:6},exportButtonText:{fontSize:11,fontFamily:x.semiBold,color:w.white},card:{backgroundColor:w.white,borderRadius:12,padding:12,borderWidth:1,borderColor:w.grayBorderSecondary,gap:8},cardHeader:{fontSize:12,fontFamily:x.semiBold,color:w.slate700,marginBottom:2},controlRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},controlLabel:{fontSize:12,fontFamily:x.medium,color:w.slate600},stepperContainer:{flexDirection:"row",alignItems:"center",gap:8,backgroundColor:w.slate50,borderRadius:6,padding:2},stepperBtn:{width:28,height:28,backgroundColor:w.white,borderRadius:5,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:w.grayBorderSecondary},stepperBtnText:{fontSize:15,fontFamily:x.bold,color:w.slate900},stepperValue:{fontSize:12,fontFamily:x.semiBold,color:w.slate900,minWidth:44,textAlign:"center"},segmentedRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},segmentedGroup:{flexDirection:"row",backgroundColor:w.slate100,borderRadius:8,padding:2,gap:2},segmentItem:{paddingHorizontal:10,paddingVertical:5,borderRadius:6},segmentItemActive:{backgroundColor:w.brandPurple},segmentText:{fontSize:11,fontFamily:x.medium,color:w.slate600},segmentTextActive:{color:w.white,fontFamily:x.semiBold},paletteGrid:{flexDirection:"row",flexWrap:"wrap",gap:8},colorSwatch:{width:28,height:28,borderRadius:6,borderWidth:1,borderColor:w.grayBorderSecondary},colorSwatchActive:{borderColor:w.brandPurple,borderWidth:3}});

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

@@ -1,28 +0,0 @@
-export { default as MainScreen } from './MainScreen';
-export { default as TabBar } from './TabBar';
-export { default as InspectorHeader } from './InspectorHeader';
-export { default as FabLauncher } from './FabLauncher';
-export { default as NetworkTab } from './NetworkTab';
-export { default as NetworkDetail } from './NetworkDetail';
-export { default as ConsoleTab } from './ConsoleTab';
-export { default as LogDetail } from './LogDetail';
-export { PerformanceTab } from './PerformanceTab';
-export { default as AnalyticsTab } from './AnalyticsTab';
-export { default as ReduxTab } from './ReduxTab';
-export { default as ReduxDetail } from './ReduxDetail';
-export { default as CrashTab } from './CrashTab';
-export { default as CrashDetail } from './CrashDetail';
-export { default as PushTab } from './PushTab';
-export { default as PushDetail } from './PushDetail';
-export { default as SocketTab } from './SocketTab';
-export { default as SocketDetail } from './SocketDetail';
-export { default as DeviceInfoTab } from './DeviceInfoTab';
-export { default as StorageTab } from './StorageTab';
-export { default as DebuggingTab } from './DebuggingTab';
-export { MediaGalleryTab } from './MediaGalleryTab';
-export { default as SettingsPanel } from './SettingsPanel';
-export { UiInspectorTab } from './UiInspectorTab';
-export { UiInspectorDetail } from './UiInspectorDetail';
-export { UiInspectorOverlay } from './UiInspectorOverlay';
-export { BoxModelVisualizer } from './BoxModelVisualizer';
-export { UiA11yAuditPanel } from './UiA11yAuditPanel';

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

@@ -1 +0,0 @@
-export{default as MainScreen}from"./MainScreen";export{default as TabBar}from"./TabBar";export{default as InspectorHeader}from"./InspectorHeader";export{default as FabLauncher}from"./FabLauncher";export{default as NetworkTab}from"./NetworkTab";export{default as NetworkDetail}from"./NetworkDetail";export{default as ConsoleTab}from"./ConsoleTab";export{default as LogDetail}from"./LogDetail";export{PerformanceTab}from"./PerformanceTab";export{default as AnalyticsTab}from"./AnalyticsTab";export{default as ReduxTab}from"./ReduxTab";export{default as ReduxDetail}from"./ReduxDetail";export{default as CrashTab}from"./CrashTab";export{default as CrashDetail}from"./CrashDetail";export{default as PushTab}from"./PushTab";export{default as PushDetail}from"./PushDetail";export{default as SocketTab}from"./SocketTab";export{default as SocketDetail}from"./SocketDetail";export{default as DeviceInfoTab}from"./DeviceInfoTab";export{default as StorageTab}from"./StorageTab";export{default as DebuggingTab}from"./DebuggingTab";export{MediaGalleryTab}from"./MediaGalleryTab";export{default as SettingsPanel}from"./SettingsPanel";export{UiInspectorTab}from"./UiInspectorTab";export{UiInspectorDetail}from"./UiInspectorDetail";export{UiInspectorOverlay}from"./UiInspectorOverlay";export{BoxModelVisualizer}from"./BoxModelVisualizer";export{UiA11yAuditPanel}from"./UiA11yAuditPanel";

package/dist/esm/customHooks/uiInspectorManager.d.ts

@@ -1,22 +0,0 @@
-import { InspectedElementInfo, UiInspectorSubTab } from '../types';
-type UiInspectorListener = (state: UiInspectorState) => void;
-export interface UiInspectorState {
-    isInspectModeActive: boolean;
-    selectedElement: InspectedElementInfo | null;
-    activeSubTab: UiInspectorSubTab;
-    showAlignmentGrid: boolean;
-    showDistanceGuides: boolean;
-    history: InspectedElementInfo[];
-    tweakedStyles: Record<string, any>;
-}
-export declare function subscribeUiInspectorState(listener: UiInspectorListener): () => void;
-export declare function getUiInspectorState(): UiInspectorState;
-export declare function setInspectModeActive(active: boolean): void;
-export declare function setSelectedUiElement(element: InspectedElementInfo | null): void;
-export declare function setUiInspectorSubTab(subTab: UiInspectorSubTab): void;
-export declare function toggleAlignmentGrid(show?: boolean): void;
-export declare function toggleDistanceGuides(show?: boolean): void;
-export declare function applyLiveStyleOverride(key: string, value: any): void;
-export declare function resetLiveStyleOverrides(): void;
-export declare function clearUiInspectorHistory(): void;
-export {};

package/dist/esm/customHooks/uiInspectorManager.js

@@ -1 +0,0 @@
-let e={isInspectModeActive:!1,selectedElement:null,activeSubTab:"styles",showAlignmentGrid:!1,showDistanceGuides:!0,history:[],tweakedStyles:{}};const i=new Set;function s(){const t={...e,history:[...e.history],tweakedStyles:{...e.tweakedStyles}};i.forEach(n=>{try{n(t)}catch(o){console.warn("[UIInspector] Listener notification error:",o)}})}export function subscribeUiInspectorState(t){return i.add(t),t(e),()=>{i.delete(t)}}export function getUiInspectorState(){return e}export function setInspectModeActive(t){e.isInspectModeActive=t,s()}export function setSelectedUiElement(t){e.selectedElement=t,t?(e.tweakedStyles={...t.tweakedStyles},e.history.some(n=>n.id===t.id)||(e.history=[t,...e.history.slice(0,19)])):e.tweakedStyles={},s()}export function setUiInspectorSubTab(t){e.activeSubTab=t,s()}export function toggleAlignmentGrid(t){e.showAlignmentGrid=typeof t=="boolean"?t:!e.showAlignmentGrid,s()}export function toggleDistanceGuides(t){e.showDistanceGuides=typeof t=="boolean"?t:!e.showDistanceGuides,s()}export function applyLiveStyleOverride(t,n){e.tweakedStyles={...e.tweakedStyles,[t]:n},e.selectedElement&&(e.selectedElement={...e.selectedElement,tweakedStyles:{...e.tweakedStyles},flattenedStyles:{...e.selectedElement.originalStyles,...e.tweakedStyles}}),s()}export function resetLiveStyleOverrides(){e.tweakedStyles={},e.selectedElement&&(e.selectedElement={...e.selectedElement,tweakedStyles:{},flattenedStyles:{...e.selectedElement.originalStyles}}),s()}export function clearUiInspectorHistory(){e.history=[],s()}

package/dist/esm/helpers/uiInspectorEngine.d.ts

@@ -1,48 +0,0 @@
-import { A11yAuditResult, BoxModelMetrics, HierarchyBreadcrumbItem, InspectedElementInfo } from '../types';
-export declare function getCleanComponentName(type: any): string;
-export declare function buildHierarchyFromFiber(fiber: any): HierarchyBreadcrumbItem[];
-export declare function getDynamicInspectorDataForPoint(locationX: number, locationY: number, inspectedViewRef?: any): Promise<InspectedElementInfo | null>;
-export declare function extractBoxModel(flattenedStyle?: Record<string, any>, layout?: {
-    width: number;
-    height: number;
-}): BoxModelMetrics;
-export declare function categorizeStyles(flattened?: Record<string, any>): {
-    layout: Record<string, any>;
-    dimensions: Record<string, any>;
-    position: Record<string, any>;
-    spacing: Record<string, any>;
-    typography: Record<string, any>;
-    appearance: Record<string, any>;
-    borders: Record<string, any>;
-    transforms: Record<string, any>;
-    other: Record<string, any>;
-};
-export declare function calculateContrastRatio(textColor?: string, bgColor?: string): {
-    ratio: any;
-    score: "N/A";
-} | {
-    ratio: number;
-    score: "AAA" | "AA" | "Fail";
-};
-export declare function auditAccessibility(props?: Record<string, any>, layout?: {
-    width: number;
-    height: number;
-}, styles?: Record<string, any>): A11yAuditResult;
-export declare function generateJsxSnippet(componentName: string, props?: Record<string, any>, styles?: Record<string, any>): string;
-export declare function generateFullJsxSegmentSnippet(componentName: string, props?: Record<string, any>, styles?: Record<string, any>): {
-    code: string;
-    sourceFile?: string;
-    sourceLocation?: string;
-    lineNumber?: number;
-    columnNumber?: number;
-};
-export declare function generateStyleSheetSnippet(componentName: string, styles?: Record<string, any>): string;
-export declare function generateCssSnippet(componentName: string, styles?: Record<string, any>): string;
-export declare function createInspectedElement(componentName: string, props: Record<string, any>, layout: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    pageX: number;
-    pageY: number;
-}, hierarchy?: HierarchyBreadcrumbItem[], nativeTag?: number, snapshotUri?: string, snapshotBase64?: string): InspectedElementInfo;

package/dist/esm/helpers/uiInspectorEngine.js

@@ -1,19 +0,0 @@
-import{StyleSheet as S,Platform as j}from"react-native";export function getCleanComponentName(e){if(!e)return"Unknown";if(typeof e=="string")return e==="RCTView"||e==="AndroidHorizontalScrollView"?"View":e==="RCTText"||e==="RCTRawText"||e==="RCTVirtualText"?"Text":e==="RCTImageView"||e==="RCTCxxImageView"?"Image":e==="RCTScrollView"?"ScrollView":e==="RCTModalHostView"?"Modal":e==="RCTSafeAreaView"?"SafeAreaView":e.replace(/^RCT/,"").replace(/^Android/,"");if(typeof e=="function")return e.displayName||e.name||"Component";if(typeof e=="object"){if(e.$$typeof?.toString().includes("memo")&&e.type)return`Memo(${getCleanComponentName(e.type)})`;if(e.$$typeof?.toString().includes("forward_ref")&&(e.render||e.type))return e.displayName||`ForwardRef(${getCleanComponentName(e.render||e.type)})`;if(e.displayName)return e.displayName;if(e.name)return e.name}return"Component"}function I(e){if(!e)return!0;const t=e.toLowerCase();return t.includes("provider")||t.includes("consumer")||t.includes("context")||t==="errorboundary"||t==="moduleerrorboundary"||t.includes("inspector")||t==="anonymous"}export function buildHierarchyFromFiber(e){const t=[];let o=e,a=0;for(;o&&a<25;){if(o.type){const r=getCleanComponentName(o.type),s=typeof o.type=="string",c=o.memoizedProps||{},n=c.style?S.flatten(c.style):void 0;(!I(r)||t.length===0)&&t.unshift({id:`breadcrumb_${a}_${r}`,displayName:r,componentName:r,depth:a,isHostComponent:s,props:c,styles:n})}o=o.return,a++}return t}export function getDynamicInspectorDataForPoint(e,t,o){return new Promise(a=>{let r=!1;const s=setTimeout(()=>{if(!r){r=!0;const n=O(e,t);a(n)}},120),c=n=>{if(!r&&n&&(n.frame||n.hierarchy&&n.hierarchy.length>0)){r=!0,clearTimeout(s);const{frame:l,props:i,hierarchy:p,selectedIndex:d,touchedViewTag:f,closestInstance:u}=n,g=[];Array.isArray(p)&&p.forEach((h,_)=>{const N=h?.type||h,m=h?.name||getCleanComponentName(N)||`View_${_}`;let y={};try{if(typeof h.getInspectorData=="function"){const H=h.getInspectorData();H?.props&&(y=H.props)}else h.props?y=h.props:h.memoizedProps&&(y=h.memoizedProps)}catch{}const R=y?.style||typeof h.getInspectorData=="function"&&h.getInspectorData()?.props?.style,A=R?S.flatten(R):void 0;g.push({id:`crumb_${_}_${m}`,displayName:getCleanComponentName(m),componentName:m,depth:_,isHostComponent:typeof m=="string"&&(m.startsWith("RCT")||m==="View"||m==="Text"||m==="Image"),props:y,styles:A})});const b=d!=null&&g[d]?g[d]:g[g.length-1],x=b?.componentName||(u?getCleanComponentName(u.type):"View"),$=getCleanComponentName(x),w=i&&Object.keys(i).length>0?i:b?.props||{},L=w.style?S.flatten(w.style):b?.styles||{},C={x:l?.left??e,y:l?.top??t,width:l?.width??0,height:l?.height??0,pageX:l?.left??e,pageY:l?.top??t},T=createInspectedElement($,w,C,g.length>0?g:void 0,f);a(T)}};try{const n=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__||typeof window<"u"&&window.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(n&&n.renderers){const l=Array.from(n.renderers.values());let i=!1,p=o||null;if(!p&&n._fiberRoots)try{for(const d of n._fiberRoots.values())if(d&&d.size>0){const f=Array.from(d.values())[0];if(f?.containerInfo){p=f.containerInfo;break}}}catch{}for(const d of l){const f=d?.rendererConfig?.getInspectorDataForViewAtPoint;if(typeof f=="function")try{f(p,e,t,u=>(c(u),!0)),i=!0}catch{}}if(!i){clearTimeout(s),r=!0;const d=O(e,t);a(d)}}else{clearTimeout(s),r=!0;const l=O(e,t);a(l)}}catch{clearTimeout(s),r=!0;const n=O(e,t);a(n)}})}function O(e,t){try{const o=globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__||typeof window<"u"&&window.__REACT_DEVTOOLS_GLOBAL_HOOK__;if(!o||!o._fiberRoots)return null;let a=null;for(const d of o._fiberRoots.values())if(d&&d.size>0){const f=Array.from(d.values())[0];if(f?.current){a=f.current;break}}if(!a)return null;const r=[];let s=a,c=0;for(;s&&c<30;){if(s.type){const d=getCleanComponentName(s.type),f=typeof s.type=="string",u=s.memoizedProps||s.pendingProps||{},g=u.style?S.flatten(u.style):void 0;I(d)||r.push({id:`fiber_crumb_${c}_${d}`,displayName:d,componentName:d,depth:c,isHostComponent:f,props:u,styles:g})}s=s.child,c++}if(r.length===0)return null;const n=r[r.length-1],l=n.props||{},i=n.styles||{},p={x:i.left??e,y:i.top??t,width:i.width??120,height:i.height??44,pageX:i.left??e,pageY:i.top??t};return createInspectedElement(n.componentName,l,p,r)}catch{return null}}export function extractBoxModel(e={},t={width:0,height:0}){const o=(y,R=0)=>{const A=typeof y=="number"?y:parseFloat(y);return isNaN(A)?R:A},a=o(e.margin,0),r=o(e.marginVertical,a),s=o(e.marginHorizontal,a),c=o(e.marginTop,r),n=o(e.marginBottom,r),l=o(e.marginLeft,s),i=o(e.marginRight,s),p=o(e.padding,0),d=o(e.paddingVertical,p),f=o(e.paddingHorizontal,p),u=o(e.paddingTop,d),g=o(e.paddingBottom,d),b=o(e.paddingLeft,f),x=o(e.paddingRight,f),$=o(e.borderWidth,0),w=o(e.borderTopWidth,$),L=o(e.borderBottomWidth,$),C=o(e.borderLeftWidth,$),T=o(e.borderRightWidth,$),h=t.width||o(e.width,0),_=t.height||o(e.height,0),N=Math.max(0,h-(b+x+C+T)),m=Math.max(0,_-(u+g+w+L));return{margin:{top:c,right:i,bottom:n,left:l},border:{top:w,right:T,bottom:L,left:C},padding:{top:u,right:x,bottom:g,left:b},content:{width:Math.round(N*10)/10,height:Math.round(m*10)/10}}}export function categorizeStyles(e={}){const t={layout:{},dimensions:{},position:{},spacing:{},typography:{},appearance:{},borders:{},transforms:{},other:{}},o=new Set(["flex","flexDirection","justifyContent","alignItems","alignSelf","alignContent","flexWrap","flexGrow","flexShrink","flexBasis","gap","rowGap","columnGap"]),a=new Set(["width","height","minWidth","maxWidth","minHeight","maxHeight","aspectRatio"]),r=new Set(["position","top","bottom","left","right","start","end","zIndex"]),s=new Set(["padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingHorizontal","paddingVertical","paddingStart","paddingEnd","margin","marginTop","marginRight","marginBottom","marginLeft","marginHorizontal","marginVertical","marginStart","marginEnd"]),c=new Set(["color","fontSize","fontWeight","fontFamily","fontStyle","lineHeight","letterSpacing","textAlign","textAlignVertical","textDecorationLine","textDecorationStyle","textDecorationColor","textTransform","includeFontPadding"]),n=new Set(["backgroundColor","opacity","overflow","elevation","shadowColor","shadowOffset","shadowOpacity","shadowRadius","backfaceVisibility"]),l=new Set(["borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","borderStyle"]);for(const[i,p]of Object.entries(e))p!==void 0&&(o.has(i)?t.layout[i]=p:a.has(i)?t.dimensions[i]=p:r.has(i)?t.position[i]=p:s.has(i)?t.spacing[i]=p:c.has(i)?t.typography[i]=p:n.has(i)?t.appearance[i]=p:l.has(i)?t.borders[i]=p:i==="transform"?t.transforms[i]=p:t.other[i]=p);return t}function v(e){const t=e.replace("#","");if(t.length<6)return .5;const o=parseInt(t.substring(0,2),16)/255,a=parseInt(t.substring(2,4),16)/255,r=parseInt(t.substring(4,6),16)/255,s=[o,a,r].map(c=>c<=.03928?c/12.92:Math.pow((c+.055)/1.055,2.4));return .2126*s[0]+.7152*s[1]+.0722*s[2]}export function calculateContrastRatio(e,t){if(!e||!t||!e.startsWith("#")||!t.startsWith("#"))return{ratio:void 0,score:"N/A"};const o=v(e),a=v(t),r=Math.max(o,a),s=Math.min(o,a),c=(r+.05)/(s+.05),n=Math.round(c*100)/100;let l="Fail";return n>=7?l="AAA":n>=4.5&&(l="AA"),{ratio:n,score:l}}export function auditAccessibility(e={},t={width:0,height:0},o={}){const a=j.OS==="android",r=a?48:44,s=typeof e.onPress=="function"||typeof e.onLongPress=="function"||e.accessible===!0,c=t.width||o.width||0,n=t.height||o.height||0,l=[];let i=!0;s&&(c>0||n>0)&&(c<r||n<r)&&(i=!1,l.push(`Touch target is ${Math.round(c)}\xD7${Math.round(n)}pt. Recommended min is ${r}\xD7${r}pt for ${a?"Android Material Design":"Apple iOS HIG"}.`));const p=!!(e.accessibilityLabel||e["aria-label"]||e.accessibilityTitle);s&&!p&&!e.children&&typeof e.children!="string"&&l.push("Interactive element is missing an accessibilityLabel / aria-label.");const d=o.color,f=o.backgroundColor,u=calculateContrastRatio(d,f);return u.score==="Fail"&&u.ratio!==void 0&&l.push(`Contrast ratio is ${u.ratio}:1 (below WCAG AA minimum 4.5:1).`),{hasValidTouchTarget:i,touchTargetWidth:c,touchTargetHeight:n,recommendedMinSize:r,contrastRatio:u.ratio,contrastScore:u.score,textColor:d,backgroundColor:f,hasAccessibilityLabel:p,accessibilityRole:e.accessibilityRole||e.role,accessibilityHint:e.accessibilityHint,issues:l}}export function generateJsxSnippet(e,t={},o={}){return generateFullJsxSegmentSnippet(e,t,o).code}function D(e,t){return typeof t=="string"?`${e}="${t}"`:typeof t=="boolean"?t?e:`${e}={false}`:typeof t=="number"?`${e}={${t}}`:typeof t=="function"?`${e}={() => {}}`:typeof t=="object"&&t!==null?`${e}={${JSON.stringify(t)}}`:`${e}={${String(t)}}`}function V(e,t=1){if(e==null)return"";const o="  ".repeat(t);if(typeof e=="string"||typeof e=="number")return`${o}${e}`;if(Array.isArray(e))return e.map(a=>V(a,t)).filter(Boolean).join(`
-`);if(typeof e=="object"&&e.type){const a=typeof e.type=="string"?e.type:e.type.displayName||e.type.name||"Component",r=e.props||{},s=[];for(const[n,l]of Object.entries(r))n==="children"||n==="__source"||n==="__self"||n==="_source"||s.push(D(n,l));const c=s.length?" "+s.join(" "):"";if(r.children){const n=V(r.children,t+1);return`${o}<${a}${c}>
-${n}
-${o}</${a}>`}return`${o}<${a}${c} />`}return""}export function generateFullJsxSegmentSnippet(e,t={},o={}){const a=t.__source||t._source,r=a?.fileName,s=a?.lineNumber,c=a?.columnNumber,n=r?r.replace(/^.*[\\/]/,""):void 0,l=n&&s?`${n}:${s}${c?`:${c}`:""}`:void 0,i=[];for(const[f,u]of Object.entries(t))f==="children"||f==="style"||f==="key"||f==="__source"||f==="__self"||f==="_source"||i.push(D(f,u));Object.keys(o).length>0&&i.push(`style={styles.${e.toLowerCase()||"container"}}`);const p=V(t.children,1);let d="";return i.length<=1&&!p?d=`<${e}${i.length?" "+i.join(" "):""} />`:p?d=`<${e}${i.length?`
-  `+i.join(`
-  `):""}>
-${p}
-</${e}>`:d=`<${e}
-  ${i.join(`
-  `)}
-/>`,{code:d,sourceFile:r,sourceLocation:l,lineNumber:s,columnNumber:c}}export function generateStyleSheetSnippet(e,t={}){const o="    ",a=[];for(const[s,c]of Object.entries(t)){if(c===void 0)continue;const n=typeof c=="string"?`'${c}'`:typeof c=="object"?JSON.stringify(c):String(c);a.push(`${o}${s}: ${n},`)}const r=a.length>0?`{
-${a.join(`
-`)}
-  }`:"{}";return`const styles = StyleSheet.create({
-  ${e.toLowerCase()}Container: ${r},
-});`}export function generateCssSnippet(e,t={}){const o=[];for(const[r,s]of Object.entries(t)){if(s===void 0)continue;const c=r.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),n=typeof s=="number"?`${s}px`:String(s);o.push(`  ${c}: ${n};`)}const a=o.length>0?`{
-${o.join(`
-`)}
-}`:"{}";return`.${e.toLowerCase()}-element ${a}`}export function createInspectedElement(e,t={},o,a=[],r,s,c){const n=t.style?S.flatten(t.style)||{}:{},l={...n},i=extractBoxModel(l,o),p=auditAccessibility(t,o,l);return{id:`elem_${Date.now()}_${Math.random().toString(36).substring(2,6)}`,componentName:e,displayName:e,hierarchy:a.length>0?a:[{id:"root_app",displayName:"App",componentName:"App",depth:0,isHostComponent:!1},{id:"inspected_node",displayName:e,componentName:e,depth:1,isHostComponent:!0,props:t,styles:l}],props:t,originalStyles:n,flattenedStyles:l,tweakedStyles:{},layout:o,boxModel:i,a11y:p,nativeTag:r,snapshotUri:s,snapshotBase64:c,timestamp:Date.now()}}