@rn-ave/core 0.1.0

package/README.md

@@ -0,0 +1,31 @@
+# @rn-ave/core
+
+Core library for `rn-ave` - Agent Visual Edit for React Native.
+
+## Installation
+
+```bash
+npm install @rn-ave/core
+```
+
+## Usage
+
+The easiest way to use `rn-ave` is with auto-initialization:
+
+```tsx
+import '@rn-ave/core/auto';
+```
+
+Add this line to the top of your `App.tsx` or `index.js`.
+
+## Features
+
+- **Visual Selection**: Tap components to select them.
+- **Context Extraction**: Extracts component name, props, hierarchy, and source location.
+- **AI Agent Integration**: Sends context to Claude Code, OpenCode, or Cursor.
+- **Open in Cursor**: Opens the exact file and line in Cursor.
+
+## Requirements
+
+- React Native 0.60+
+- Works best with Cursor editor.

package/dist/appRegistry.d.ts

@@ -0,0 +1,11 @@
+/**
+ * AppRegistry wrapper to automatically inject Inspector provider
+ * around registered React Native components
+ */
+/**
+ * Wrap AppRegistry.registerComponent to automatically inject RNAVEProvider
+ *
+ * This allows users to enable the inspector with a single import statement,
+ * without manually wrapping their app component.
+ */
+export declare function wrapAppRegistry(): void;

package/dist/appRegistry.js

@@ -0,0 +1,52 @@
+"use strict";
+/**
+ * AppRegistry wrapper to automatically inject Inspector provider
+ * around registered React Native components
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrapAppRegistry = wrapAppRegistry;
+const react_native_1 = require("react-native");
+const react_1 = __importDefault(require("react"));
+const provider_1 = require("./provider");
+// Track if we've already wrapped AppRegistry (hot reload protection)
+let isWrapped = false;
+/**
+ * Wrap AppRegistry.registerComponent to automatically inject RNAVEProvider
+ *
+ * This allows users to enable the inspector with a single import statement,
+ * without manually wrapping their app component.
+ */
+function wrapAppRegistry() {
+    // Prevent double-wrapping on hot reload
+    if (isWrapped) {
+        return;
+    }
+    isWrapped = true;
+    // Store original registerComponent method
+    const originalRegister = react_native_1.AppRegistry.registerComponent;
+    // Replace with our wrapper
+    react_native_1.AppRegistry.registerComponent = function (appKey, componentProvider) {
+        // Create a wrapped component provider
+        const wrappedProvider = () => {
+            const OriginalComponent = componentProvider();
+            // Create the wrapped component with Inspector
+            const WrappedComponent = (props) => {
+                return react_1.default.createElement(provider_1.RNAVEProvider, null, react_1.default.createElement(OriginalComponent, props));
+            };
+            // Preserve display name for React DevTools debugging
+            const originalName = OriginalComponent.displayName || OriginalComponent.name || 'Component';
+            WrappedComponent.displayName = `RNAVE(${originalName})`;
+            return WrappedComponent;
+        };
+        // Preserve the original component provider's name
+        Object.defineProperty(wrappedProvider, 'name', {
+            value: componentProvider.name || 'ComponentProvider',
+            writable: false,
+        });
+        // Call the original registerComponent with our wrapped version
+        return originalRegister.call(this, appKey, wrappedProvider);
+    };
+}

package/dist/auto.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Auto-initialization module for rn-ave
+ *
+ * Simply import this module to automatically enable the Inspector:
+ * ```
+ * import '@rn-ave/core/auto';
+ * ```
+ *
+ * This module:
+ * 1. Installs React DevTools hook early
+ * 2. Wraps AppRegistry to inject Inspector provider automatically
+ *
+ * Only Cursor editor is supported.
+ */
+export {};

package/dist/auto.js

@@ -0,0 +1,35 @@
+"use strict";
+/**
+ * Auto-initialization module for rn-ave
+ *
+ * Simply import this module to automatically enable the Inspector:
+ * ```
+ * import '@rn-ave/core/auto';
+ * ```
+ *
+ * This module:
+ * 1. Installs React DevTools hook early
+ * 2. Wraps AppRegistry to inject Inspector provider automatically
+ *
+ * Only Cursor editor is supported.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const hook_1 = require("./fiber/hook");
+const appRegistry_1 = require("./appRegistry");
+// Only run in development mode
+if (typeof __DEV__ !== 'undefined' && __DEV__) {
+    // 1. Install React DevTools hook FIRST (critical timing)
+    //    This must happen before React Native initializes
+    try {
+        (0, hook_1.installHook)();
+    }
+    catch (error) {
+        // Silent fail
+    }
+    // 2. Wrap AppRegistry to auto-inject Inspector
+    //    This must happen before any AppRegistry.registerComponent calls
+    (0, appRegistry_1.wrapAppRegistry)();
+}
+else {
+    // Production mode - do nothing
+}

package/dist/components/InspectorButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface InspectorButtonProps {
+    isInspecting: boolean;
+    onToggle: () => void;
+}
+export declare function InspectorButton({ isInspecting, onToggle }: InspectorButtonProps): React.JSX.Element;
+export {};

package/dist/components/InspectorButton.js

@@ -0,0 +1,125 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorButton = InspectorButton;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const SearchIcon = ({ active }) => (<react_native_1.View style={styles.iconContainer}>
+    <react_native_1.View style={[styles.lens, active && styles.lensActive]}/>
+    <react_native_1.View style={[styles.handle, active && styles.handleActive]}/>
+  </react_native_1.View>);
+function InspectorButton({ isInspecting, onToggle }) {
+    const [position] = (0, react_1.useState)(new react_native_1.Animated.ValueXY({ x: react_native_1.Dimensions.get('window').width - 70, y: 100 }));
+    const panResponder = react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: () => {
+            position.setOffset({
+                x: position.x._value,
+                y: position.y._value,
+            });
+            position.setValue({ x: 0, y: 0 });
+        },
+        onPanResponderMove: react_native_1.Animated.event([null, { dx: position.x, dy: position.y }], {
+            useNativeDriver: false,
+        }),
+        onPanResponderRelease: () => {
+            position.flattenOffset();
+        },
+    });
+    return (<react_native_1.Animated.View style={[styles.container, { transform: position.getTranslateTransform() }]} {...panResponder.panHandlers}>
+      <react_native_1.TouchableOpacity style={[styles.button, isInspecting && styles.buttonActive]} onPress={onToggle} activeOpacity={0.8}>
+        <SearchIcon active={isInspecting}/>
+      </react_native_1.TouchableOpacity>
+    </react_native_1.Animated.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        position: 'absolute',
+        zIndex: 9999,
+    },
+    button: {
+        width: 48,
+        height: 48,
+        borderRadius: 24,
+        backgroundColor: '#1C1C1E',
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 8,
+        borderWidth: 1,
+        borderColor: '#3A3A3C',
+    },
+    buttonActive: {
+        backgroundColor: '#007AFF',
+        borderColor: '#007AFF',
+        shadowColor: '#007AFF',
+        shadowOpacity: 0.5,
+    },
+    iconContainer: {
+        width: 20,
+        height: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    lens: {
+        width: 14,
+        height: 14,
+        borderRadius: 7,
+        borderWidth: 2,
+        borderColor: '#FFFFFF',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+    },
+    lensActive: {
+        borderColor: '#FFFFFF',
+    },
+    handle: {
+        width: 2,
+        height: 6,
+        backgroundColor: '#FFFFFF',
+        position: 'absolute',
+        bottom: 1,
+        right: 1,
+        transform: [{ rotate: '-45deg' }],
+    },
+    handleActive: {
+        backgroundColor: '#FFFFFF',
+    },
+});

package/dist/components/InspectorOverlay.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface InspectorOverlayProps {
+    isActive: boolean;
+    onTapAtPosition: (x: number, y: number) => void;
+}
+/**
+ * InspectorOverlay displays a semi-transparent overlay when inspect mode is active.
+ * Tapping anywhere triggers coordinate-based element detection.
+ */
+export declare function InspectorOverlay({ isActive, onTapAtPosition }: InspectorOverlayProps): React.JSX.Element | null;
+export {};

package/dist/components/InspectorOverlay.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorOverlay = InspectorOverlay;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+/**
+ * InspectorOverlay displays a semi-transparent overlay when inspect mode is active.
+ * Tapping anywhere triggers coordinate-based element detection.
+ */
+function InspectorOverlay({ isActive, onTapAtPosition }) {
+    console.log('[rn-ave] InspectorOverlay render, isActive:', isActive);
+    if (!isActive)
+        return null;
+    const handlePress = (event) => {
+        const { pageX, pageY } = event.nativeEvent;
+        console.log('\n🎯 [rn-ave] InspectorOverlay handlePress');
+        console.log('  pageX:', pageX, 'pageY:', pageY);
+        onTapAtPosition(pageX, pageY);
+    };
+    return (<react_native_1.View style={react_native_1.StyleSheet.absoluteFill} pointerEvents="box-only">
+      <react_native_1.Pressable style={styles.overlay} onPress={handlePress}>
+        <react_native_1.View style={styles.hint}>
+          <react_native_1.Text style={styles.hintText}>Tap any element to inspect</react_native_1.Text>
+        </react_native_1.View>
+      </react_native_1.Pressable>
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    overlay: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 122, 255, 0.08)',
+    },
+    hint: {
+        position: 'absolute',
+        top: 60,
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+    },
+    hintText: {
+        backgroundColor: '#1C1C1E',
+        color: '#FFFFFF',
+        paddingHorizontal: 20,
+        paddingVertical: 10,
+        borderRadius: 24,
+        fontSize: 14,
+        fontWeight: '600',
+        overflow: 'hidden',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 6,
+        borderWidth: 1,
+        borderColor: '#3A3A3C',
+    },
+});

package/dist/context/extractor.d.ts

@@ -0,0 +1,7 @@
+import type { Fiber, ExtractedContext } from '../types';
+/**
+ * Extracts full context from a fiber node
+ * @param fiber - The composite fiber (user's component)
+ * @param hostFiber - Optional host fiber (the actual tapped element) to extract source from __rnAve prop
+ */
+export declare function extractContext(fiber: Fiber, hostFiber?: Fiber): ExtractedContext;

package/dist/context/extractor.js

@@ -0,0 +1,235 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractContext = extractContext;
+const traversal_1 = require("../fiber/traversal");
+const source_1 = require("../fiber/source");
+/**
+ * Default box model edges (all zeros)
+ */
+function defaultEdges() {
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+}
+/**
+ * Extracts box model values from a style object
+ * Handles both shorthand (margin: 8) and individual values (marginTop: 8)
+ */
+function extractBoxModel(style) {
+    const boxModel = {
+        margin: defaultEdges(),
+        padding: defaultEdges(),
+        border: defaultEdges(),
+        width: 0,
+        height: 0,
+    };
+    if (!style)
+        return boxModel;
+    // Flatten style arrays (RN allows style={[style1, style2]})
+    const flatStyle = Array.isArray(style)
+        ? style.reduce((acc, s) => ({ ...acc, ...(s || {}) }), {})
+        : style;
+    // Extract dimensions
+    boxModel.width = flatStyle.width || 0;
+    boxModel.height = flatStyle.height || 0;
+    // Extract margin
+    if (flatStyle.margin !== undefined) {
+        const m = flatStyle.margin;
+        boxModel.margin = { top: m, right: m, bottom: m, left: m };
+    }
+    if (flatStyle.marginVertical !== undefined) {
+        boxModel.margin.top = flatStyle.marginVertical;
+        boxModel.margin.bottom = flatStyle.marginVertical;
+    }
+    if (flatStyle.marginHorizontal !== undefined) {
+        boxModel.margin.left = flatStyle.marginHorizontal;
+        boxModel.margin.right = flatStyle.marginHorizontal;
+    }
+    if (flatStyle.marginTop !== undefined)
+        boxModel.margin.top = flatStyle.marginTop;
+    if (flatStyle.marginRight !== undefined)
+        boxModel.margin.right = flatStyle.marginRight;
+    if (flatStyle.marginBottom !== undefined)
+        boxModel.margin.bottom = flatStyle.marginBottom;
+    if (flatStyle.marginLeft !== undefined)
+        boxModel.margin.left = flatStyle.marginLeft;
+    // Extract padding
+    if (flatStyle.padding !== undefined) {
+        const p = flatStyle.padding;
+        boxModel.padding = { top: p, right: p, bottom: p, left: p };
+    }
+    if (flatStyle.paddingVertical !== undefined) {
+        boxModel.padding.top = flatStyle.paddingVertical;
+        boxModel.padding.bottom = flatStyle.paddingVertical;
+    }
+    if (flatStyle.paddingHorizontal !== undefined) {
+        boxModel.padding.left = flatStyle.paddingHorizontal;
+        boxModel.padding.right = flatStyle.paddingHorizontal;
+    }
+    if (flatStyle.paddingTop !== undefined)
+        boxModel.padding.top = flatStyle.paddingTop;
+    if (flatStyle.paddingRight !== undefined)
+        boxModel.padding.right = flatStyle.paddingRight;
+    if (flatStyle.paddingBottom !== undefined)
+        boxModel.padding.bottom = flatStyle.paddingBottom;
+    if (flatStyle.paddingLeft !== undefined)
+        boxModel.padding.left = flatStyle.paddingLeft;
+    // Extract border
+    if (flatStyle.borderWidth !== undefined) {
+        const b = flatStyle.borderWidth;
+        boxModel.border = { top: b, right: b, bottom: b, left: b };
+    }
+    if (flatStyle.borderTopWidth !== undefined)
+        boxModel.border.top = flatStyle.borderTopWidth;
+    if (flatStyle.borderRightWidth !== undefined)
+        boxModel.border.right = flatStyle.borderRightWidth;
+    if (flatStyle.borderBottomWidth !== undefined)
+        boxModel.border.bottom = flatStyle.borderBottomWidth;
+    if (flatStyle.borderLeftWidth !== undefined)
+        boxModel.border.left = flatStyle.borderLeftWidth;
+    return boxModel;
+}
+/**
+ * Sanitizes props to make them serializable
+ */
+function sanitizeProps(props) {
+    const result = {};
+    for (const [key, value] of Object.entries(props)) {
+        // Skip internal props
+        if (key.startsWith('__'))
+            continue;
+        if (key === 'children')
+            continue;
+        // Handle different value types
+        if (typeof value === 'function') {
+            result[key] = '[Function]';
+        }
+        else if (typeof value === 'object' && value !== null) {
+            try {
+                // Test if serializable
+                JSON.stringify(value);
+                result[key] = value;
+            }
+            catch {
+                result[key] = '[Object]';
+            }
+        }
+        else {
+            result[key] = value;
+        }
+    }
+    return result;
+}
+/**
+ * Generates a JSX-like preview of the element
+ */
+function generateJSXPreview(fiber) {
+    const name = (0, traversal_1.getDisplayName)(fiber);
+    const props = (0, traversal_1.getCleanProps)(fiber);
+    const sanitized = sanitizeProps(props);
+    // Build prop string
+    const propStrings = [];
+    for (const [key, value] of Object.entries(sanitized)) {
+        if (typeof value === 'string') {
+            propStrings.push(`${key}="${value}"`);
+        }
+        else if (typeof value === 'number' || typeof value === 'boolean') {
+            propStrings.push(`${key}={${value}}`);
+        }
+        else if (value === '[Function]') {
+            propStrings.push(`${key}={[Function]}`);
+        }
+        else {
+            propStrings.push(`${key}={...}`);
+        }
+    }
+    if (propStrings.length === 0) {
+        return `<${name} />`;
+    }
+    if (propStrings.length <= 2) {
+        return `<${name} ${propStrings.join(' ')} />`;
+    }
+    // Multi-line for many props
+    return `<${name}\n  ${propStrings.join('\n  ')}\n/>`;
+}
+/**
+ * Extracts source location by traversing UP from a fiber to find any source info.
+ * The Babel plugin injects __rnAve on JSX elements, but those become composite fibers
+ * which then render host fibers. So we traverse up to find the best source.
+ */
+function getSourceFromFiberTree(startFiber) {
+    let current = startFiber;
+    let firstSource = null;
+    console.log('  [source-walk] Starting walk from:', (0, traversal_1.getDisplayName)(startFiber));
+    // Traverse up the fiber tree to find a fiber with source info
+    while (current) {
+        const name = (0, traversal_1.getDisplayName)(current);
+        const source = (0, source_1.getSourceLocation)(current);
+        // Debug: Log props of every fiber we visit
+        const props = current.memoizedProps || {};
+        const propKeys = Object.keys(props);
+        if (propKeys.some(k => k.startsWith('__rn'))) {
+            const metaKey = propKeys.find(k => k.startsWith('__rn'));
+            console.log(`  [source-walk] Fiber ${name} has metadata prop ${metaKey}:`, JSON.stringify(props[metaKey]));
+        }
+        if (source && source.file) {
+            console.log(`  [source-walk] Fiber ${name} has source:`, source.file);
+            // Save the first source we find as a fallback
+            if (!firstSource) {
+                firstSource = source;
+            }
+            // If it's NOT node_modules, this is definitely what we want
+            if (!source.file.includes('node_modules')) {
+                console.log('  [source-walk] FOUND USER SOURCE:', source.file);
+                return source;
+            }
+        }
+        current = current.return;
+    }
+    if (firstSource) {
+        console.log('  [source-walk] Falling back to node_modules source:', firstSource.file);
+    }
+    else {
+        console.log('  [source-walk] No source info found in fiber tree');
+    }
+    return firstSource;
+}
+/**
+ * Extracts full context from a fiber node
+ * @param fiber - The composite fiber (user's component)
+ * @param hostFiber - Optional host fiber (the actual tapped element) to extract source from __rnAve prop
+ */
+function extractContext(fiber, hostFiber) {
+    console.log('\n🔍 [rn-ave] extractContext called');
+    console.log('  fiber type:', fiber.type);
+    console.log('  fiber tag:', fiber.tag);
+    console.log('  hostFiber provided:', !!hostFiber);
+    const hierarchy = (0, traversal_1.getComponentHierarchy)(fiber);
+    // Sanitize props for all components in the hierarchy
+    const sanitizedHierarchy = hierarchy.map(item => ({
+        ...item,
+        props: sanitizeProps(item.props)
+    }));
+    // Try to get source from fiber tree's __rnAve prop first (Babel plugin)
+    // Then fall back to composite fiber's source (recursive)
+    let source = hostFiber ? getSourceFromFiberTree(hostFiber) : null;
+    if (!source) {
+        source = (0, source_1.getSourceLocationRecursive)(fiber);
+    }
+    const props = (0, traversal_1.getCleanProps)(fiber);
+    const safeProps = sanitizeProps(props);
+    const jsxPreview = generateJSXPreview(fiber);
+    // Get box model from host fiber's style (the actual rendered element)
+    const styleSource = hostFiber || fiber;
+    const boxModel = extractBoxModel(styleSource.memoizedProps?.style);
+    console.log('  extracted source:', source);
+    console.log('  componentName:', (0, traversal_1.getDisplayName)(fiber));
+    console.log('  boxModel:', boxModel);
+    return {
+        componentName: (0, traversal_1.getDisplayName)(fiber),
+        componentHierarchy: sanitizedHierarchy,
+        props: safeProps,
+        source,
+        jsxPreview,
+        timestamp: Date.now(),
+        boxModel,
+    };
+}

package/dist/context/formatter.d.ts

@@ -0,0 +1,13 @@
+import type { ExtractedContext } from '../types';
+/**
+ * Formats extracted context as markdown for AI agents
+ */
+export declare function formatForAgent(context: ExtractedContext): string;
+/**
+ * Formats context as compact single-line (for clipboard)
+ */
+export declare function formatCompact(context: ExtractedContext): string;
+/**
+ * Formats context for terminal/console output
+ */
+export declare function formatForTerminal(context: ExtractedContext): string;