@rn-ave/core 0.1.0

package/dist/fiber/traversal.js

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findFiberByNativeTag = findFiberByNativeTag;
+exports.getDisplayName = getDisplayName;
+exports.getComponentHierarchy = getComponentHierarchy;
+exports.getCleanProps = getCleanProps;
+exports.findNearestComposite = findNearestComposite;
+exports.collectAllHostFibers = collectAllHostFibers;
+const source_1 = require("./source");
+// Fiber tag constants (from React)
+const FunctionComponent = 0;
+const ClassComponent = 1;
+const HostRoot = 3;
+const HostComponent = 5;
+const HostText = 6;
+const ForwardRef = 11;
+const MemoComponent = 14;
+const SimpleMemoComponent = 15;
+/**
+ * Finds a fiber node by its native tag
+ */
+function findFiberByNativeTag(nativeTag, fiberRoot) {
+    let result = null;
+    function traverse(fiber) {
+        if (!fiber || result)
+            return;
+        // Check if this fiber's stateNode matches the native tag
+        if (fiber.stateNode &&
+            typeof fiber.stateNode === 'object' &&
+            fiber.stateNode._nativeTag === nativeTag) {
+            result = fiber;
+            return;
+        }
+        // Traverse children
+        traverse(fiber.child);
+        // Traverse siblings
+        traverse(fiber.sibling);
+    }
+    traverse(fiberRoot.current);
+    return result;
+}
+/**
+ * Checks if a fiber represents a composite component (function/class)
+ */
+function isCompositeFiber(fiber) {
+    return (fiber.tag === FunctionComponent ||
+        fiber.tag === ClassComponent ||
+        fiber.tag === ForwardRef ||
+        fiber.tag === MemoComponent ||
+        fiber.tag === SimpleMemoComponent);
+}
+/**
+ * Gets the display name of a component from its fiber
+ */
+function getDisplayName(fiber) {
+    const { type, tag } = fiber;
+    // For host components (View, Text, etc.)
+    if (tag === HostComponent) {
+        return typeof type === 'string' ? type : 'HostComponent';
+    }
+    // For text nodes
+    if (tag === HostText) {
+        return 'Text';
+    }
+    // For composite components
+    if (typeof type === 'function') {
+        return type.displayName || type.name || 'Anonymous';
+    }
+    // For ForwardRef
+    if (tag === ForwardRef && type && typeof type === 'object') {
+        const wrappedType = type.render;
+        if (typeof wrappedType === 'function') {
+            return wrappedType.displayName || wrappedType.name || 'ForwardRef';
+        }
+    }
+    // For Memo
+    if ((tag === MemoComponent || tag === SimpleMemoComponent) && type && typeof type === 'object') {
+        const wrappedType = type.type;
+        if (typeof wrappedType === 'function') {
+            return wrappedType.displayName || wrappedType.name || 'Memo';
+        }
+    }
+    return 'Unknown';
+}
+/**
+ * Gets the component hierarchy from a fiber node up to the root
+ */
+function getComponentHierarchy(fiber) {
+    const hierarchy = [];
+    let current = fiber;
+    while (current) {
+        // Only include composite components in hierarchy
+        if (isCompositeFiber(current)) {
+            hierarchy.push({
+                name: getDisplayName(current),
+                props: current.memoizedProps || {},
+                source: (0, source_1.getSourceLocation)(current),
+            });
+        }
+        current = current.return;
+    }
+    return hierarchy;
+}
+/**
+ * Gets all props from a fiber, excluding internal ones
+ */
+function getCleanProps(fiber) {
+    const props = fiber.memoizedProps || {};
+    const cleanProps = {};
+    for (const [key, value] of Object.entries(props)) {
+        // Skip internal props
+        if (key.startsWith('__'))
+            continue;
+        if (key === 'children')
+            continue;
+        cleanProps[key] = value;
+    }
+    return cleanProps;
+}
+/**
+ * Finds the nearest composite component ancestor
+ * @param fiber - The starting fiber node
+ * @param skipNodeModules - If true, skips components from node_modules and returns the nearest user-code component
+ */
+function findNearestComposite(fiber, skipNodeModules = false) {
+    let current = fiber;
+    let fallback = null; // First composite found (even if from node_modules)
+    while (current) {
+        if (isCompositeFiber(current)) {
+            // Always save the first composite as fallback
+            if (!fallback) {
+                fallback = current;
+            }
+            // If not filtering, or if this is user code, return it
+            if (!skipNodeModules || !(0, source_1.isFromNodeModules)(current)) {
+                return current;
+            }
+        }
+        current = current.return;
+    }
+    // Fallback to node_modules component if no user code found
+    return fallback;
+}
+/**
+ * Collects all host component fibers (View, Text, etc.) from the tree
+ */
+function collectAllHostFibers(fiberRoot) {
+    const hostFibers = [];
+    function traverse(fiber) {
+        if (!fiber)
+            return;
+        // Collect host components (View, Text, Image, etc.)
+        if (fiber.tag === HostComponent && fiber.stateNode) {
+            hostFibers.push(fiber);
+        }
+        // Traverse children first (for depth-first order)
+        traverse(fiber.child);
+        // Then siblings
+        traverse(fiber.sibling);
+    }
+    traverse(fiberRoot.current);
+    return hostFibers;
+}

package/dist/gesture/detector.d.ts

@@ -0,0 +1,17 @@
+import { type PanResponderInstance } from 'react-native';
+import type { GestureConfig } from '../types';
+/**
+ * Creates a PanResponder for long press detection
+ * Simpler approach that doesn't require react-native-gesture-handler
+ */
+export declare function createGestureDetector(config: GestureConfig): PanResponderInstance;
+/**
+ * Simplified gesture detector that uses callback refs
+ * This approach allows us to track which element was pressed
+ */
+export interface SimplePressDetector {
+    onPressIn: (nativeTag: number) => void;
+    onPressOut: () => void;
+    isActive: boolean;
+}
+export declare function createSimplePressDetector(onLongPress: (nativeTag: number) => void, duration?: number): SimplePressDetector;

package/dist/gesture/detector.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createGestureDetector = createGestureDetector;
+exports.createSimplePressDetector = createSimplePressDetector;
+const react_native_1 = require("react-native");
+/**
+ * Creates a PanResponder for long press detection
+ * Simpler approach that doesn't require react-native-gesture-handler
+ */
+function createGestureDetector(config) {
+    const { longPressDuration = 500, onElementSelected } = config;
+    let pressTimer = null;
+    let startPosition = { x: 0, y: 0 };
+    let hasTriggered = false;
+    return react_native_1.PanResponder.create({
+        // Intercept all touches
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => false,
+        onPanResponderGrant: (evt) => {
+            const { pageX, pageY } = evt.nativeEvent;
+            startPosition = { x: pageX, y: pageY };
+            hasTriggered = false;
+            // Start timer for long press
+            pressTimer = setTimeout(() => {
+                if (!hasTriggered) {
+                    hasTriggered = true;
+                    // For now, we'll need to get the native tag from the event
+                    // This is a limitation - we might need a native module for proper hit testing
+                    // For MVP, we can use a workaround by adding touch handlers to components
+                    onElementSelected(0, { x: pageX, y: pageY });
+                }
+            }, longPressDuration);
+        },
+        onPanResponderMove: (evt) => {
+            const { pageX, pageY } = evt.nativeEvent;
+            const distance = Math.sqrt(Math.pow(pageX - startPosition.x, 2) +
+                Math.pow(pageY - startPosition.y, 2));
+            // Cancel if finger moved too far (more than 10px)
+            if (distance > 10 && pressTimer) {
+                clearTimeout(pressTimer);
+                pressTimer = null;
+                hasTriggered = false;
+            }
+        },
+        onPanResponderRelease: () => {
+            if (pressTimer) {
+                clearTimeout(pressTimer);
+                pressTimer = null;
+            }
+            hasTriggered = false;
+        },
+        onPanResponderTerminate: () => {
+            if (pressTimer) {
+                clearTimeout(pressTimer);
+                pressTimer = null;
+            }
+            hasTriggered = false;
+        },
+    });
+}
+function createSimplePressDetector(onLongPress, duration = 500) {
+    let timer = null;
+    let currentTag = null;
+    return {
+        onPressIn: (nativeTag) => {
+            currentTag = nativeTag;
+            timer = setTimeout(() => {
+                if (currentTag !== null) {
+                    onLongPress(currentTag);
+                }
+            }, duration);
+        },
+        onPressOut: () => {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+            currentTag = null;
+        },
+        get isActive() {
+            return timer !== null;
+        },
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { RNAVEProvider } from './provider';
+export type { ExtractedContext, SourceLocation, AgentType, } from './types';

package/dist/index.js

@@ -0,0 +1,8 @@
+"use strict";
+// rn-ave - React Native Agent Visual Edit
+// Only auto-initialization is supported - import '@rn-ave/core/auto' in your app
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RNAVEProvider = void 0;
+// Internal provider (used by auto.ts)
+var provider_1 = require("./provider");
+Object.defineProperty(exports, "RNAVEProvider", { enumerable: true, get: function () { return provider_1.RNAVEProvider; } });

package/dist/overlay/highlight.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { SelectedElement } from '../types';
+type AgentType = 'claude-code' | 'cursor' | 'opencode';
+interface HighlightOverlayProps {
+    selectedElement: SelectedElement | null;
+    onDismiss: () => void;
+    onSendToAgent?: (agentType: AgentType, prompt?: string) => Promise<{
+        success: boolean;
+        error?: string;
+    }>;
+    onOpenInEditor?: () => void;
+}
+export declare function HighlightOverlay({ selectedElement, onDismiss, onSendToAgent, onOpenInEditor, }: HighlightOverlayProps): React.JSX.Element | null;
+export {};

package/dist/overlay/highlight.js

@@ -0,0 +1,177 @@
+"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.HighlightOverlay = HighlightOverlay;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const tooltip_1 = require("./tooltip");
+// Box model colors matching RN inspector
+const COLORS = {
+    margin: 'rgba(246, 178, 107, 0.65)', // Coral/orange
+    padding: 'rgba(147, 196, 125, 0.65)', // Green
+    content: 'rgba(111, 168, 220, 0.65)', // Blue
+};
+// Default edges (all zeros)
+const defaultEdges = () => ({ top: 0, right: 0, bottom: 0, left: 0 });
+/**
+ * Box Model Overlay - renders the margin/padding/content visualization
+ * directly on the selected element (colors only, no labels)
+ */
+function BoxModelOverlay({ bounds, boxModel }) {
+    const margin = boxModel?.margin ?? defaultEdges();
+    const padding = boxModel?.padding ?? defaultEdges();
+    // Calculate layer dimensions
+    // Margin layer extends OUTSIDE the element bounds
+    const marginLayer = {
+        left: bounds.x - margin.left,
+        top: bounds.y - margin.top,
+        width: bounds.width + margin.left + margin.right,
+        height: bounds.height + margin.top + margin.bottom,
+    };
+    // Content layer is INSIDE the element, after padding
+    const contentLayer = {
+        left: bounds.x + padding.left,
+        top: bounds.y + padding.top,
+        width: Math.max(0, bounds.width - padding.left - padding.right),
+        height: Math.max(0, bounds.height - padding.top - padding.bottom),
+    };
+    // Check if we have any margin or padding to show
+    const hasMargin = margin.top > 0 || margin.right > 0 || margin.bottom > 0 || margin.left > 0;
+    const hasPadding = padding.top > 0 || padding.right > 0 || padding.bottom > 0 || padding.left > 0;
+    return (<>
+      {/* MARGIN LAYER - Coral/Orange strips (no labels) */}
+      {hasMargin && (<>
+          {margin.top > 0 && (<react_native_1.View style={[styles.layer, {
+                        backgroundColor: COLORS.margin,
+                        left: marginLayer.left,
+                        top: marginLayer.top,
+                        width: marginLayer.width,
+                        height: margin.top,
+                    }]} pointerEvents="none"/>)}
+          {margin.bottom > 0 && (<react_native_1.View style={[styles.layer, {
+                        backgroundColor: COLORS.margin,
+                        left: marginLayer.left,
+                        top: bounds.y + bounds.height,
+                        width: marginLayer.width,
+                        height: margin.bottom,
+                    }]} pointerEvents="none"/>)}
+          {margin.left > 0 && (<react_native_1.View style={[styles.layer, {
+                        backgroundColor: COLORS.margin,
+                        left: marginLayer.left,
+                        top: bounds.y,
+                        width: margin.left,
+                        height: bounds.height,
+                    }]} pointerEvents="none"/>)}
+          {margin.right > 0 && (<react_native_1.View style={[styles.layer, {
+                        backgroundColor: COLORS.margin,
+                        left: bounds.x + bounds.width,
+                        top: bounds.y,
+                        width: margin.right,
+                        height: bounds.height,
+                    }]} pointerEvents="none"/>)}
+        </>)}
+
+      {/* PADDING LAYER - Green strips (no labels) */}
+      {hasPadding && (<>
+          {padding.top > 0 && (<react_native_1.View style={[styles.layer, {
+                        backgroundColor: COLORS.padding,
+                        left: bounds.x,
+                        top: bounds.y,
+                        width: bounds.width,
+                        height: padding.top,
+                    }]} pointerEvents="none"/>)}
+          {padding.bottom > 0 && (<react_native_1.View style={[styles.layer, {
+                        backgroundColor: COLORS.padding,
+                        left: bounds.x,
+                        top: bounds.y + bounds.height - padding.bottom,
+                        width: bounds.width,
+                        height: padding.bottom,
+                    }]} pointerEvents="none"/>)}
+          {padding.left > 0 && (<react_native_1.View style={[styles.layer, {
+                        backgroundColor: COLORS.padding,
+                        left: bounds.x,
+                        top: bounds.y + padding.top,
+                        width: padding.left,
+                        height: Math.max(0, bounds.height - padding.top - padding.bottom),
+                    }]} pointerEvents="none"/>)}
+          {padding.right > 0 && (<react_native_1.View style={[styles.layer, {
+                        backgroundColor: COLORS.padding,
+                        left: bounds.x + bounds.width - padding.right,
+                        top: bounds.y + padding.top,
+                        width: padding.right,
+                        height: Math.max(0, bounds.height - padding.top - padding.bottom),
+                    }]} pointerEvents="none"/>)}
+        </>)}
+
+      {/* CONTENT LAYER - Blue */}
+      <react_native_1.View style={[styles.layer, {
+                backgroundColor: COLORS.content,
+                left: contentLayer.left,
+                top: contentLayer.top,
+                width: contentLayer.width,
+                height: contentLayer.height,
+            }]} pointerEvents="none"/>
+    </>);
+}
+function HighlightOverlay({ selectedElement, onDismiss, onSendToAgent, onOpenInEditor, }) {
+    const [bounds, setBounds] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!selectedElement) {
+            setBounds(null);
+            return;
+        }
+        // Try to measure the element
+        const { nativeTag } = selectedElement;
+        if (react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') {
+            react_native_1.UIManager.measureInWindow(nativeTag, (x, y, width, height) => {
+                setBounds({ x, y, width, height });
+            });
+        }
+    }, [selectedElement]);
+    if (!selectedElement)
+        return null;
+    return (<react_native_1.View style={react_native_1.StyleSheet.absoluteFill} pointerEvents="box-none">
+      {/* Box Model Visualization - rendered on the element */}
+      {bounds && (<BoxModelOverlay bounds={bounds} boxModel={selectedElement.componentInfo.boxModel}/>)}
+
+      {/* Info tooltip */}
+      <tooltip_1.InfoTooltip componentInfo={selectedElement.componentInfo} bounds={bounds} onDismiss={onDismiss} onSendToAgent={onSendToAgent} onOpenInEditor={onOpenInEditor}/>
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    layer: {
+        position: 'absolute',
+    },
+});

package/dist/overlay/tooltip.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ExtractedContext, Bounds } from '../types';
+type AgentType = 'claude-code' | 'cursor' | 'opencode';
+interface InfoTooltipProps {
+    componentInfo: ExtractedContext;
+    bounds: Bounds | null;
+    onDismiss: () => void;
+    onSendToAgent?: (agentType: AgentType, prompt?: string, contextOverride?: any) => Promise<{
+        success: boolean;
+        error?: string;
+    }>;
+    onOpenInEditor?: (sourceOverride?: any) => void;
+}
+export declare function InfoTooltip({ componentInfo, bounds, onDismiss, onSendToAgent, onOpenInEditor, }: InfoTooltipProps): React.JSX.Element;
+export {};