react-native-inapp-inspector 2.5.13 → 2.5.15

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

@@ -1,117 +0,0 @@
-import"react";import{ScrollView as G,StyleSheet as A,Text as C,TouchableOpacity as B,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:F,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}>
-          <B 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>
-          </B>
-
-          <B 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>
-          </B>
-        </T>
-      </T>
-
-      
-      {F.length>0&&<T style={e.historySection}>
-          <T style={e.historyHeader}>
-            <C style={e.sectionHeader}>RECENTLY INSPECTED ({F.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}>
-            {F.map((x,R)=><B key={x.id||R}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"/>
-              </B>)}
-          </T>
-        </T>}
-    </G>};const e=A.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 G,StyleSheet as M,Text as B,TouchableOpacity as R,View as T}from"react-native";import{AppColors as w}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{RotateCcwIcon as O,SlidersIcon as N,CopyIcon as U}from"../NetworkIcons";import W from"../TouchableScale";import{generateStyleSheetSnippet as q}from"../../helpers/uiInspectorEngine";import{triggerNativeHaptic as C}from"../../native/NativeInspector";import{showToast as P}from"../../helpers/toast";import J from"@react-native-clipboard/clipboard";const K=["#4F46E5","#7C3AED","#2563EB","#0D9488","#10B981","#F59E0B","#E11D48","#0F172A","#F8FAFC","#FFFFFF","transparent"];export const UiLiveStyleTweaker=({componentName:k,originalStyles:z,tweakedStyles:D,onApplyStyle:F,onResetStyles:A})=>{const f={...z,...D},I=Object.keys(D).length>0,V=()=>{const x=q(k,f);J.setString(x),C(),P("Copied tweaked StyleSheet to clipboard")},h=(x,E,v=0)=>{const H=typeof f[x]=="number"?f[x]:0,L=Math.max(v,H+E);F(x,L),C()};return<G showsVerticalScrollIndicator={!1}contentContainerStyle={e.container}>
-      
-      <T style={e.topActionsRow}>
-        <T style={e.titleWithBadge}>
-          <N color={w.brandPurple}size={18}/>
-          <B style={e.sectionTitle}>Live Style Sandbox</B>
-          {I&&<T style={e.modifiedBadge}>
-              <B style={e.modifiedBadgeText}>MODIFIED</B>
-            </T>}
-        </T>
-
-        <T style={e.actionButtonsGroup}>
-          {I&&<W style={e.resetButton}onPress={()=>{A(),C(),P("Reset styles to original")}}>
-              <O color="#E11D48"size={14}/>
-              <B style={e.resetButtonText}>Reset</B>
-            </W>}
-
-          <W style={e.exportButton}onPress={V}>
-            <U color={w.white}size={14}/>
-            <B style={e.exportButtonText}>Copy CSS</B>
-          </W>
-        </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={()=>h("padding",-2)}>
-              <B style={e.stepperBtnText}>-</B>
-            </R>
-            <B style={e.stepperValue}>{f.padding??0} pt</B>
-            <R style={e.stepperBtn}onPress={()=>h("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={()=>h("margin",-2)}>
-              <B style={e.stepperBtnText}>-</B>
-            </R>
-            <B style={e.stepperValue}>{f.margin??0} pt</B>
-            <R style={e.stepperBtn}onPress={()=>h("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={()=>h("gap",-2)}>
-              <B style={e.stepperBtnText}>-</B>
-            </R>
-            <B style={e.stepperValue}>{f.gap??0} pt</B>
-            <R style={e.stepperBtn}onPress={()=>h("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={()=>h("borderRadius",-2)}>
-              <B style={e.stepperBtnText}>-</B>
-            </R>
-            <B style={e.stepperValue}>{f.borderRadius??0} pt</B>
-            <R style={e.stepperBtn}onPress={()=>h("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={()=>h("borderWidth",-1)}>
-              <B style={e.stepperBtnText}>-</B>
-            </R>
-            <B style={e.stepperValue}>{f.borderWidth??0} pt</B>
-            <R style={e.stepperBtn}onPress={()=>h("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={()=>h("fontSize",-1,8)}>
-              <B style={e.stepperBtnText}>-</B>
-            </R>
-            <B style={e.stepperValue}>{f.fontSize??14} pt</B>
-            <R style={e.stepperBtn}onPress={()=>h("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(x=><R key={x}style={[e.segmentItem,f.fontWeight===x&&e.segmentItemActive]}onPress={()=>{F("fontWeight",x),C()}}>
-                <B style={[e.segmentText,f.fontWeight===x&&e.segmentTextActive]}>
-                  {x}
-                </B>
-              </R>)}
-          </T>
-        </T>
-      </T>
-
-      
-      <T style={e.card}>
-        <B style={e.cardHeader}>Background Color</B>
-        <T style={e.paletteGrid}>
-          {K.map(x=><R key={x}style={[e.colorSwatch,{backgroundColor:x},f.backgroundColor===x&&e.colorSwatchActive]}onPress={()=>{F("backgroundColor",x),C()}}/>)}
-        </T>
-      </T>
-
-      
-      <T style={e.card}>
-        <B style={e.cardHeader}>Opacity & Elevation</B>
-        <T style={e.segmentedGroup}>
-          {[1,.8,.6,.4,.2].map(x=><R key={x}style={[e.segmentItem,f.opacity===x&&e.segmentItemActive]}onPress={()=>{F("opacity",x),C()}}>
-              <B style={[e.segmentText,f.opacity===x&&e.segmentTextActive]}>
-                {Math.round(x*100)}%
-              </B>
-            </R>)}
-        </T>
-      </T>
-    </G>};const e=M.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:S.semiBold,color:w.slate900},modifiedBadge:{backgroundColor:"#F59E0B22",paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:"#F59E0B55"},modifiedBadgeText:{fontSize:9,fontFamily:S.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:S.semiBold,color:"#E11D48"},exportButton:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:w.brandPurple,paddingHorizontal:10,paddingVertical:5,borderRadius:6},exportButtonText:{fontSize:11,fontFamily:S.semiBold,color:w.white},card:{backgroundColor:w.white,borderRadius:12,padding:12,borderWidth:1,borderColor:w.grayBorderSecondary,gap:8},cardHeader:{fontSize:12,fontFamily:S.semiBold,color:w.slate700,marginBottom:2},controlRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center"},controlLabel:{fontSize:12,fontFamily:S.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:S.bold,color:w.slate900},stepperValue:{fontSize:12,fontFamily:S.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:S.medium,color:w.slate600},segmentTextActive:{color:w.white,fontFamily:S.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(t){if(!t)return"Unknown";if(typeof t=="string")return t==="RCTView"||t==="AndroidHorizontalScrollView"?"View":t==="RCTText"||t==="RCTRawText"||t==="RCTVirtualText"?"Text":t==="RCTImageView"||t==="RCTCxxImageView"?"Image":t==="RCTScrollView"?"ScrollView":t==="RCTModalHostView"?"Modal":t==="RCTSafeAreaView"?"SafeAreaView":t.replace(/^RCT/,"").replace(/^Android/,"");if(typeof t=="function")return t.displayName||t.name||"Component";if(typeof t=="object"){if(t.$$typeof?.toString().includes("memo")&&t.type)return`Memo(${getCleanComponentName(t.type)})`;if(t.$$typeof?.toString().includes("forward_ref")&&(t.render||t.type))return t.displayName||`ForwardRef(${getCleanComponentName(t.render||t.type)})`;if(t.displayName)return t.displayName;if(t.name)return t.name}return"Component"}function I(t){if(!t)return!0;const e=t.toLowerCase();return e.includes("provider")||e.includes("consumer")||e.includes("context")||e==="errorboundary"||e==="moduleerrorboundary"||e.includes("inspector")||e==="anonymous"}export function buildHierarchyFromFiber(t){const e=[];let o=t,a=0;for(;o&&a<25;){if(o.type){const r=getCleanComponentName(o.type),s=typeof o.type=="string",l=o.memoizedProps||{},n=l.style?S.flatten(l.style):void 0;(!I(r)||e.length===0)&&e.unshift({id:`breadcrumb_${a}_${r}`,displayName:r,componentName:r,depth:a,isHostComponent:s,props:l,styles:n})}o=o.return,a++}return e}export function getDynamicInspectorDataForPoint(t,e,o){return new Promise(a=>{let r=!1;const s=setTimeout(()=>{if(!r){r=!0;const n=L(t,e);a(n)}},120),l=n=>{if(!r&&n&&(n.frame||n.hierarchy&&n.hierarchy.length>0)){r=!0,clearTimeout(s);const{frame:c,props:i,hierarchy:p,selectedIndex:d,touchedViewTag:f,closestInstance:u}=n,h=[];Array.isArray(p)&&p.forEach((m,_)=>{const N=m?.type||m,g=m?.name||getCleanComponentName(N)||`View_${_}`;let y={};try{if(typeof m.getInspectorData=="function"){const H=m.getInspectorData();H?.props&&(y=H.props)}else m.props?y=m.props:m.memoizedProps&&(y=m.memoizedProps)}catch{}const R=y?.style||typeof m.getInspectorData=="function"&&m.getInspectorData()?.props?.style,A=R?S.flatten(R):void 0;h.push({id:`crumb_${_}_${g}`,displayName:getCleanComponentName(g),componentName:g,depth:_,isHostComponent:typeof g=="string"&&(g.startsWith("RCT")||g==="View"||g==="Text"||g==="Image"),props:y,styles:A})});const b=d!=null&&h[d]?h[d]:h[h.length-1],x=b?.componentName||(u?getCleanComponentName(u.type):"View"),$=getCleanComponentName(x),w=i&&Object.keys(i).length>0?i:b?.props||{},O=w.style?S.flatten(w.style):b?.styles||{},C={x:c?.left??t,y:c?.top??e,width:c?.width??0,height:c?.height??0,pageX:c?.left??t,pageY:c?.top??e},T=createInspectedElement($,w,C,h.length>0?h: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 c=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 c){const f=d?.rendererConfig?.getInspectorDataForViewAtPoint;if(typeof f=="function")try{f(p,t,e,u=>(l(u),!0)),i=!0}catch{}}if(!i){clearTimeout(s),r=!0;const d=L(t,e);a(d)}}else{clearTimeout(s),r=!0;const c=L(t,e);a(c)}}catch{clearTimeout(s),r=!0;const n=L(t,e);a(n)}})}function L(t,e){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,l=0;for(;s&&l<30;){if(s.type){const d=getCleanComponentName(s.type),f=typeof s.type=="string",u=s.memoizedProps||s.pendingProps||{},h=u.style?S.flatten(u.style):void 0;I(d)||r.push({id:`fiber_crumb_${l}_${d}`,displayName:d,componentName:d,depth:l,isHostComponent:f,props:u,styles:h})}s=s.child,l++}if(r.length===0)return null;const n=r[r.length-1],c=n.props||{},i=n.styles||{},p={x:i.left??t,y:i.top??e,width:i.width??120,height:i.height??44,pageX:i.left??t,pageY:i.top??e};return createInspectedElement(n.componentName,c,p,r)}catch{return null}}export function extractBoxModel(t={},e={width:0,height:0}){const o=(y,R=0)=>{const A=typeof y=="number"?y:parseFloat(y);return isNaN(A)?R:A},a=o(t.margin,0),r=o(t.marginVertical,a),s=o(t.marginHorizontal,a),l=o(t.marginTop,r),n=o(t.marginBottom,r),c=o(t.marginLeft,s),i=o(t.marginRight,s),p=o(t.padding,0),d=o(t.paddingVertical,p),f=o(t.paddingHorizontal,p),u=o(t.paddingTop,d),h=o(t.paddingBottom,d),b=o(t.paddingLeft,f),x=o(t.paddingRight,f),$=o(t.borderWidth,0),w=o(t.borderTopWidth,$),O=o(t.borderBottomWidth,$),C=o(t.borderLeftWidth,$),T=o(t.borderRightWidth,$),m=e.width||o(t.width,0),_=e.height||o(t.height,0),N=Math.max(0,m-(b+x+C+T)),g=Math.max(0,_-(u+h+w+O));return{margin:{top:l,right:i,bottom:n,left:c},border:{top:w,right:T,bottom:O,left:C},padding:{top:u,right:x,bottom:h,left:b},content:{width:Math.round(N*10)/10,height:Math.round(g*10)/10}}}export function categorizeStyles(t={}){const e={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"]),l=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"]),c=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(t))p!==void 0&&(o.has(i)?e.layout[i]=p:a.has(i)?e.dimensions[i]=p:r.has(i)?e.position[i]=p:s.has(i)?e.spacing[i]=p:l.has(i)?e.typography[i]=p:n.has(i)?e.appearance[i]=p:c.has(i)?e.borders[i]=p:i==="transform"?e.transforms[i]=p:e.other[i]=p);return e}function v(t){const e=t.replace("#","");if(e.length<6)return .5;const o=parseInt(e.substring(0,2),16)/255,a=parseInt(e.substring(2,4),16)/255,r=parseInt(e.substring(4,6),16)/255,s=[o,a,r].map(l=>l<=.03928?l/12.92:Math.pow((l+.055)/1.055,2.4));return .2126*s[0]+.7152*s[1]+.0722*s[2]}export function calculateContrastRatio(t,e){if(!t||!e||!t.startsWith("#")||!e.startsWith("#"))return{ratio:void 0,score:"N/A"};const o=v(t),a=v(e),r=Math.max(o,a),s=Math.min(o,a),l=(r+.05)/(s+.05),n=Math.round(l*100)/100;let c="Fail";return n>=7?c="AAA":n>=4.5&&(c="AA"),{ratio:n,score:c}}export function auditAccessibility(t={},e={width:0,height:0},o={}){const a=j.OS==="android",r=a?48:44,s=typeof t.onPress=="function"||typeof t.onLongPress=="function"||t.accessible===!0,l=e.width||o.width||0,n=e.height||o.height||0,c=[];let i=!0;s&&(l>0||n>0)&&(l<r||n<r)&&(i=!1,c.push(`Touch target is ${Math.round(l)}\xD7${Math.round(n)}pt. Recommended min is ${r}\xD7${r}pt for ${a?"Android Material Design":"Apple iOS HIG"}.`));const p=!!(t.accessibilityLabel||t["aria-label"]||t.accessibilityTitle);s&&!p&&!t.children&&typeof t.children!="string"&&c.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&&c.push(`Contrast ratio is ${u.ratio}:1 (below WCAG AA minimum 4.5:1).`),{hasValidTouchTarget:i,touchTargetWidth:l,touchTargetHeight:n,recommendedMinSize:r,contrastRatio:u.ratio,contrastScore:u.score,textColor:d,backgroundColor:f,hasAccessibilityLabel:p,accessibilityRole:t.accessibilityRole||t.role,accessibilityHint:t.accessibilityHint,issues:c}}export function generateJsxSnippet(t,e={},o={}){return generateFullJsxSegmentSnippet(t,e,o).code}function D(t,e){return typeof e=="string"?`${t}="${e}"`:typeof e=="boolean"?e?t:`${t}={false}`:typeof e=="number"?`${t}={${e}}`:typeof e=="function"?`${t}={() => {}}`:typeof e=="object"&&e!==null?`${t}={${JSON.stringify(e)}}`:`${t}={${String(e)}}`}function V(t,e=1){if(t==null)return"";const o="  ".repeat(e);if(typeof t=="string"||typeof t=="number")return`${o}${t}`;if(Array.isArray(t))return t.map(a=>V(a,e)).filter(Boolean).join(`
-`);if(typeof t=="object"&&t.type){const a=typeof t.type=="string"?t.type:t.type.displayName||t.type.name||"Component",r=t.props||{},s=[];for(const[n,c]of Object.entries(r))n==="children"||n==="__source"||n==="__self"||n==="_source"||s.push(D(n,c));const l=s.length?" "+s.join(" "):"";if(r.children){const n=V(r.children,e+1);return`${o}<${a}${l}>
-${n}
-${o}</${a}>`}return`${o}<${a}${l} />`}return""}export function generateFullJsxSegmentSnippet(t,e={},o={}){const a=e.__source||e._source,r=a?.fileName,s=a?.lineNumber,l=a?.columnNumber,n=r?r.replace(/^.*[\\/]/,""):void 0,c=n&&s?`${n}:${s}${l?`:${l}`:""}`:void 0,i=[];for(const[f,u]of Object.entries(e))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.${t.toLowerCase()||"container"}}`);const p=V(e.children,1);let d="";return i.length<=1&&!p?d=`<${t}${i.length?" "+i.join(" "):""} />`:p?d=`<${t}${i.length?`
-  `+i.join(`
-  `):""}>
-${p}
-</${t}>`:d=`<${t}
-  ${i.join(`
-  `)}
-/>`,{code:d,sourceFile:r,sourceLocation:c,lineNumber:s,columnNumber:l}}export function generateStyleSheetSnippet(t,e={}){const o="    ",a=[];for(const[s,l]of Object.entries(e)){if(l===void 0)continue;const n=typeof l=="string"?`'${l}'`:typeof l=="object"?JSON.stringify(l):String(l);a.push(`${o}${s}: ${n},`)}const r=a.length>0?`{
-${a.join(`
-`)}
-  }`:"{}";return`const styles = StyleSheet.create({
-  ${t.toLowerCase()}Container: ${r},
-});`}export function generateCssSnippet(t,e={}){const o=[];for(const[r,s]of Object.entries(e)){if(s===void 0)continue;const l=r.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase(),n=typeof s=="number"?`${s}px`:String(s);o.push(`  ${l}: ${n};`)}const a=o.length>0?`{
-${o.join(`
-`)}
-}`:"{}";return`.${t.toLowerCase()}-element ${a}`}export function createInspectedElement(t,e={},o,a=[],r,s,l){const n=e.style?S.flatten(e.style)||{}:{},c={...n},i=extractBoxModel(c,o),p=auditAccessibility(e,o,c);return{id:`elem_${Date.now()}_${Math.random().toString(36).substring(2,6)}`,componentName:t,displayName:t,hierarchy:a.length>0?a:[{id:"root_app",displayName:"App",componentName:"App",depth:0,isHostComponent:!1},{id:"inspected_node",displayName:t,componentName:t,depth:1,isHostComponent:!0,props:e,styles:c}],props:e,originalStyles:n,flattenedStyles:c,tweakedStyles:{},layout:o,boxModel:i,a11y:p,nativeTag:r,snapshotUri:s,snapshotBase64:l,timestamp:Date.now()}}