@rn-ave/core 0.1.0

package/dist/provider.js

@@ -0,0 +1,264 @@
+"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.RNAVEProvider = RNAVEProvider;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const hook_1 = require("./fiber/hook");
+const traversal_1 = require("./fiber/traversal");
+const extractor_1 = require("./context/extractor");
+const highlight_1 = require("./overlay/highlight");
+const InspectorButton_1 = require("./components/InspectorButton");
+const InspectorOverlay_1 = require("./components/InspectorOverlay");
+const editor_1 = require("./editor");
+const devMenu_1 = require("./devMenu");
+/**
+ * Internal provider component for rn-ave
+ * This is used by auto-initialization only - not meant to be used directly
+ */
+function RNAVEProvider({ children }) {
+    const [isInspecting, setIsInspecting] = (0, react_1.useState)(false);
+    const [selectedElement, setSelectedElement] = (0, react_1.useState)(null);
+    const [lastContext, setLastContext] = (0, react_1.useState)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    // Install DevTools hook on mount
+    (0, react_1.useEffect)(() => {
+        (0, hook_1.installHook)();
+        // Debug: log hook state after a short delay
+        setTimeout(() => {
+            (0, hook_1.debugHookState)();
+        }, 1000);
+    }, []);
+    const enableInspector = (0, react_1.useCallback)(() => {
+        setIsInspecting(true);
+        (0, hook_1.debugHookState)();
+    }, []);
+    const disableInspector = (0, react_1.useCallback)(() => {
+        setIsInspecting(false);
+        setSelectedElement(null);
+    }, []);
+    const toggleInspecting = (0, react_1.useCallback)(() => {
+        if (isInspecting) {
+            disableInspector();
+        }
+        else {
+            enableInspector();
+        }
+    }, [isInspecting, enableInspector, disableInspector]);
+    // Register dev menu toggle
+    (0, react_1.useEffect)(() => {
+        if (typeof __DEV__ !== 'undefined' && !__DEV__)
+            return;
+        (0, devMenu_1.registerDevMenuToggle)(toggleInspecting);
+    }, [toggleInspecting]);
+    // Open in editor function - always uses Cursor
+    const openInEditor = (0, react_1.useCallback)(async (sourceOverride) => {
+        console.log('\n📂 [rn-ave] openInEditor called');
+        const source = sourceOverride || lastContext?.source;
+        console.log('  source to open:', source);
+        if (!source) {
+            console.log('  ERROR: No source location available');
+            return false;
+        }
+        return (0, editor_1.launchEditor)({
+            source,
+            editor: 'cursor',
+        });
+    }, [lastContext]);
+    /**
+     * Find the element at tap coordinates using UIManager.measure
+     */
+    const findElementAtPosition = (0, react_1.useCallback)(async (tapX, tapY) => {
+        const fiberRoot = (0, hook_1.getFiberRoot)();
+        if (!fiberRoot) {
+            (0, hook_1.debugHookState)();
+            return null;
+        }
+        // Collect all host fibers
+        const hostFibers = (0, traversal_1.collectAllHostFibers)(fiberRoot);
+        if (hostFibers.length === 0) {
+            return null;
+        }
+        // Measure each fiber and find the best match
+        const measurePromises = hostFibers.map((fiber) => new Promise((resolve) => {
+            if (!fiber.stateNode) {
+                resolve(null);
+                return;
+            }
+            // Try to get native tag from different locations
+            const nativeTag = fiber.stateNode._nativeTag ||
+                fiber.stateNode.canonical?._nativeTag ||
+                (0, react_native_1.findNodeHandle)(fiber.stateNode);
+            if (!nativeTag) {
+                resolve(null);
+                return;
+            }
+            try {
+                react_native_1.UIManager.measure(nativeTag, (x, y, width, height, pageX, pageY) => {
+                    if (width > 0 && height > 0) {
+                        resolve({
+                            fiber,
+                            bounds: { x: pageX, y: pageY, width, height },
+                        });
+                    }
+                    else {
+                        resolve(null);
+                    }
+                });
+            }
+            catch (e) {
+                resolve(null);
+            }
+        }));
+        const measured = (await Promise.all(measurePromises)).filter((m) => m !== null);
+        // Find all fibers that contain the tap point
+        const hits = measured.filter(({ bounds }) => {
+            return (tapX >= bounds.x &&
+                tapX <= bounds.x + bounds.width &&
+                tapY >= bounds.y &&
+                tapY <= bounds.y + bounds.height);
+        });
+        if (hits.length === 0) {
+            return null;
+        }
+        // Return the smallest (most specific) element
+        hits.sort((a, b) => {
+            const areaA = a.bounds.width * a.bounds.height;
+            const areaB = b.bounds.width * b.bounds.height;
+            return areaA - areaB;
+        });
+        return hits[0].fiber;
+    }, []);
+    const handleTapAtPosition = (0, react_1.useCallback)(async (x, y) => {
+        console.log('\n👆 [rn-ave] handleTapAtPosition called');
+        console.log('  position:', { x, y });
+        console.log('  isInspecting:', isInspecting);
+        if (!isInspecting) {
+            console.log('  Not in inspecting mode, returning');
+            return;
+        }
+        const fiber = await findElementAtPosition(x, y);
+        console.log('  fiber found:', !!fiber);
+        if (!fiber) {
+            console.log('  No fiber found at position');
+            return;
+        }
+        // Find nearest composite component for context (skip node_modules)
+        const compositeFiber = (0, traversal_1.findNearestComposite)(fiber, true) || fiber;
+        console.log('  compositeFiber:', compositeFiber?.type?.name || compositeFiber?.type);
+        // Pass both fibers: composite for name/hierarchy, host for source (__rnAve prop)
+        const context = (0, extractor_1.extractContext)(compositeFiber, fiber);
+        console.log('  extracted context:', {
+            componentName: context.componentName,
+            source: context.source,
+        });
+        setLastContext(context);
+        // Get native tag from the host fiber (not composite)
+        const nativeTag = fiber.stateNode?._nativeTag ||
+            fiber.stateNode?.canonical?._nativeTag ||
+            (0, react_native_1.findNodeHandle)(fiber.stateNode) ||
+            0;
+        const element = {
+            nativeTag,
+            componentInfo: context,
+        };
+        console.log('  setting selectedElement with source:', element.componentInfo.source);
+        setSelectedElement(element);
+        // Auto-disable inspecting after selection
+        setIsInspecting(false);
+    }, [isInspecting, findElementAtPosition]);
+    const handleDismiss = (0, react_1.useCallback)(() => {
+        setSelectedElement(null);
+    }, []);
+    const handleSendToAgent = (0, react_1.useCallback)(async (agentType, prompt, contextOverride) => {
+        if (!selectedElement) {
+            return { success: false, error: 'No element selected' };
+        }
+        if (!prompt?.trim()) {
+            return { success: false, error: 'Prompt is required' };
+        }
+        const baseContext = contextOverride || selectedElement.componentInfo;
+        const payload = {
+            ...baseContext,
+            userPrompt: prompt.trim(),
+        };
+        // Determine port based on agent type
+        const portMap = {
+            'claude-code': 4568,
+            'opencode': 4569,
+            'cursor': 5568,
+        };
+        const port = portMap[agentType] || 4568;
+        console.log(`\n📤 [rn-ave] Sending to ${agentType}...`);
+        console.log(`💬 Prompt: "${prompt.trim()}"`);
+        console.log(`📦 Component: ${selectedElement.componentInfo.componentName}`);
+        if (selectedElement.componentInfo.source) {
+            console.log(`📁 File: ${selectedElement.componentInfo.source.file}:${selectedElement.componentInfo.source.line}`);
+        }
+        try {
+            const response = await fetch(`http://localhost:${port}/context`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload),
+            });
+            if (response.ok) {
+                const data = await response.json();
+                console.log(`✅ [rn-ave] Sent successfully to ${agentType}!`);
+                handleDismiss();
+                return { success: true };
+            }
+            else {
+                console.log(`⚠️ [rn-ave] Server responded with ${response.status}`);
+                return { success: false, error: `Server responded with ${response.status}` };
+            }
+        }
+        catch (e) {
+            console.log(`⚠️ [rn-ave] Could not connect to ${agentType} server. Is it running?`);
+            return { success: false, error: `Could not connect to ${agentType} server. Is it running?` };
+        }
+    }, [selectedElement, handleDismiss]);
+    return (<react_native_1.View ref={containerRef} style={react_native_1.StyleSheet.absoluteFill} collapsable={false}>
+      {children}
+
+      {/* Inspector overlay - captures taps when active */}
+      <InspectorOverlay_1.InspectorOverlay isActive={isInspecting} onTapAtPosition={handleTapAtPosition}/>
+
+      {/* Highlight overlay - shows selected element */}
+      <highlight_1.HighlightOverlay selectedElement={selectedElement} onDismiss={handleDismiss} onSendToAgent={handleSendToAgent} onOpenInEditor={openInEditor}/>
+
+      {/* Floating inspector button */}
+      <InspectorButton_1.InspectorButton isInspecting={isInspecting} onToggle={toggleInspecting}/>
+    </react_native_1.View>);
+}

package/dist/types.d.ts

@@ -0,0 +1,94 @@
+export interface Fiber {
+    tag: number;
+    type: string | Function | null;
+    stateNode: any;
+    child: Fiber | null;
+    sibling: Fiber | null;
+    return: Fiber | null;
+    memoizedProps: Record<string, any>;
+    memoizedState: any;
+    _debugSource?: DebugSource;
+    _debugOwner?: Fiber;
+}
+export interface DebugSource {
+    fileName: string;
+    lineNumber: number;
+    columnNumber?: number;
+}
+export interface FiberRoot {
+    current: Fiber;
+    containerInfo: any;
+}
+export interface ReactRenderer {
+    findFiberByHostInstance?: (instance: any) => Fiber | null;
+    bundleType?: number;
+    version?: string;
+    rendererPackageName?: string;
+}
+export interface RNDevToolsHook {
+    renderers: Map<number, ReactRenderer>;
+    inject: (renderer: ReactRenderer) => number;
+    onCommitFiberRoot: (rendererID: number, root: FiberRoot) => void;
+    onCommitFiberUnmount: (rendererID: number, fiber: Fiber) => void;
+    getFiberRoots?: (rendererID: number) => Set<FiberRoot>;
+}
+export interface SourceLocation {
+    file: string;
+    line: number;
+    column?: number;
+}
+export interface RNAveMeta {
+    file: string;
+    line: number;
+    column: number;
+}
+export interface ComponentInfo {
+    name: string;
+    props: Record<string, any>;
+    source: SourceLocation | null;
+}
+export interface ExtractedContext {
+    componentName: string;
+    componentHierarchy: ComponentInfo[];
+    props: Record<string, any>;
+    source: SourceLocation | null;
+    jsxPreview: string;
+    timestamp: number;
+    boxModel?: BoxModelValues;
+}
+export interface Position {
+    x: number;
+    y: number;
+}
+export interface Bounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface BoxModelEdges {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface BoxModelValues {
+    margin: BoxModelEdges;
+    padding: BoxModelEdges;
+    border: BoxModelEdges;
+    width: number;
+    height: number;
+}
+export interface SelectedElement {
+    nativeTag: number;
+    componentInfo: ExtractedContext;
+    bounds?: Bounds;
+}
+export type AgentType = 'claude-code' | 'cursor' | 'opencode';
+export interface GestureConfig {
+    longPressDuration: number;
+    onElementSelected: (nativeTag: number, position: Position) => void;
+}
+declare global {
+    var __REACT_DEVTOOLS_GLOBAL_HOOK__: RNDevToolsHook | undefined;
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@rn-ave/core",
+  "version": "0.1.0",
+  "description": "React Native Agent Visual Edit - core library for visual component selection and AI agent integration",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./auto": {
+      "import": "./dist/auto.js",
+      "require": "./dist/auto.js",
+      "types": "./dist/auto.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "auto": ["./dist/auto.d.ts"]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
+  "keywords": [
+    "react-native",
+    "ai-agent",
+    "visual-edit",
+    "claude-code",
+    "opencode",
+    "cursor"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.60.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-gesture-handler": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.72.0",
+    "typescript": "^5.0.0"
+  }
+}