@rn-ave/core 0.1.0

package/dist/overlay/tooltip.js

@@ -0,0 +1,467 @@
+"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.InfoTooltip = InfoTooltip;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const source_1 = require("../fiber/source");
+function InfoTooltip({ componentInfo, bounds, onDismiss, onSendToAgent, onOpenInEditor, }) {
+    const [prompt, setPrompt] = (0, react_1.useState)('');
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [loadingAgent, setLoadingAgent] = (0, react_1.useState)(null);
+    // Local selection of which component in the hierarchy to inspect
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    const { height: screenHeight } = react_native_1.Dimensions.get('window');
+    const selectedComponent = componentInfo.componentHierarchy[selectedIndex] || {
+        name: componentInfo.componentName,
+        props: componentInfo.props,
+        source: componentInfo.source
+    };
+    // Smart positioning: top if element is in bottom half, bottom if in top half
+    const elementCenterY = bounds ? bounds.y + bounds.height / 2 : screenHeight / 2;
+    const isElementInBottomHalf = elementCenterY > screenHeight / 2;
+    const positionStyle = isElementInBottomHalf
+        ? { top: 50 } // Show at top (below status bar)
+        : { bottom: 34 }; // Show at bottom (above home indicator)
+    const filePath = selectedComponent.source
+        ? (0, source_1.formatSourceLocation)(selectedComponent.source)
+        : null;
+    const handleCopyPath = () => {
+        if (filePath) {
+            try {
+                react_native_1.Clipboard.setString(filePath);
+                setCopied(true);
+                setTimeout(() => setCopied(false), 2000);
+            }
+            catch (e) {
+                // Silent fail
+            }
+        }
+    };
+    const handleOpenInEditor = () => {
+        console.log(`\n🔧 [rn-ave] Open in Editor pressed for ${selectedComponent.name}`);
+        // If we have a source override from selection, we'd pass it here
+        // For now the provider uses lastContext.source, so we might need to update the provider
+        // or pass the specific source to the callback.
+        if (onOpenInEditor) {
+            // We pass the selected component's source to the callback if it supports it
+            onOpenInEditor(selectedComponent.source);
+        }
+    };
+    const handleSend = async (agentType) => {
+        if (!prompt.trim()) {
+            react_native_1.Alert.alert('Prompt Required', 'Please enter a prompt describing what you want the AI to do.');
+            return;
+        }
+        if (!onSendToAgent)
+            return;
+        setLoadingAgent(agentType);
+        try {
+            // Use the selected component's info for the agent
+            const contextOverride = {
+                ...componentInfo,
+                componentName: selectedComponent.name,
+                props: selectedComponent.props,
+                source: selectedComponent.source,
+            };
+            const result = await onSendToAgent(agentType, prompt.trim(), contextOverride);
+            if (!result.success && result.error) {
+                react_native_1.Alert.alert('Error', result.error);
+            }
+        }
+        catch (e) {
+            react_native_1.Alert.alert('Error', 'An unexpected error occurred');
+        }
+        finally {
+            setLoadingAgent(null);
+        }
+    };
+    const isLoading = loadingAgent !== null;
+    return (<>
+      {/* Subtle backdrop */}
+      <react_native_1.Pressable style={styles.backdrop} onPress={onDismiss}/>
+      
+      {/* Smart positioned panel */}
+      <react_native_1.View style={[styles.tooltip, positionStyle]}>
+        <react_native_1.View style={styles.container}>
+          {/* Fixed Header */}
+          <react_native_1.View style={styles.header}>
+            <react_native_1.View style={styles.titleContainer}>
+              <react_native_1.Text style={styles.componentName} numberOfLines={1}>
+                {selectedComponent.name}
+              </react_native_1.Text>
+            </react_native_1.View>
+            
+            {/* Open in Editor button */}
+            {!!onOpenInEditor && !!selectedComponent.source && (<react_native_1.TouchableOpacity accessibilityLabel="Open in Editor" onPress={handleOpenInEditor} style={styles.headerButton}>
+                <react_native_1.View style={styles.codeIcon}>
+                  <react_native_1.Text style={styles.codeIconText}>{'</>'}</react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.TouchableOpacity>)}
+            
+            {/* Close button */}
+            <react_native_1.TouchableOpacity onPress={onDismiss} style={styles.headerButton}>
+              <react_native_1.View style={styles.closeIcon}>
+                <react_native_1.View style={[styles.closeIconLine, { transform: [{ rotate: '45deg' }] }]}/>
+                <react_native_1.View style={[styles.closeIconLine, { transform: [{ rotate: '-45deg' }] }]}/>
+              </react_native_1.View>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+
+          {/* Breadcrumbs / Hierarchy Navigation */}
+          <react_native_1.View style={styles.breadcrumbContainer}>
+            <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.breadcrumbScroll}>
+              {componentInfo.componentHierarchy.slice(0, 6).map((item, index) => (<react_1.default.Fragment key={`${item.name}-${index}`}>
+                  {index > 0 && <react_native_1.Text style={styles.breadcrumbSeparator}>›</react_native_1.Text>}
+                  <react_native_1.TouchableOpacity onPress={() => setSelectedIndex(index)} style={[
+                styles.breadcrumbItem,
+                selectedIndex === index && styles.breadcrumbItemActive
+            ]}>
+                    <react_native_1.Text style={[
+                styles.breadcrumbText,
+                selectedIndex === index && styles.breadcrumbTextActive,
+                !item.source && styles.breadcrumbTextNoSource
+            ]}>
+                      {item.name}
+                    </react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+                </react_1.default.Fragment>))}
+            </react_native_1.ScrollView>
+          </react_native_1.View>
+
+          {/* Scrollable Content */}
+          <react_native_1.ScrollView style={styles.scrollContent} showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollContentContainer}>
+            {/* Dimensions Row (only for the actual host element) */}
+            {bounds && selectedIndex === 0 && (<react_native_1.View style={styles.dimensionsRow}>
+                <react_native_1.Text style={styles.label}>Size</react_native_1.Text>
+                <react_native_1.Text style={styles.dimensionsValue}>
+                  {Math.round(bounds.width)} × {Math.round(bounds.height)}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+
+            {/* Box Model Info - compact display of margin/padding (only for selection 0) */}
+            {selectedIndex === 0 && componentInfo.boxModel && (<react_native_1.View style={styles.boxModelRow}>
+                {/* Margin */}
+                {(componentInfo.boxModel.margin.top > 0 ||
+                componentInfo.boxModel.margin.right > 0 ||
+                componentInfo.boxModel.margin.bottom > 0 ||
+                componentInfo.boxModel.margin.left > 0) && (<react_native_1.View style={styles.boxModelItem}>
+                    <react_native_1.View style={[styles.boxModelColor, { backgroundColor: 'rgba(246, 178, 107, 0.8)' }]}/>
+                    <react_native_1.Text style={styles.boxModelLabel}>M</react_native_1.Text>
+                    <react_native_1.Text style={styles.boxModelValue}>
+                      {componentInfo.boxModel.margin.top} {componentInfo.boxModel.margin.right} {componentInfo.boxModel.margin.bottom} {componentInfo.boxModel.margin.left}
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
+                {/* Padding */}
+                {(componentInfo.boxModel.padding.top > 0 ||
+                componentInfo.boxModel.padding.right > 0 ||
+                componentInfo.boxModel.padding.bottom > 0 ||
+                componentInfo.boxModel.padding.left > 0) && (<react_native_1.View style={styles.boxModelItem}>
+                    <react_native_1.View style={[styles.boxModelColor, { backgroundColor: 'rgba(147, 196, 125, 0.8)' }]}/>
+                    <react_native_1.Text style={styles.boxModelLabel}>P</react_native_1.Text>
+                    <react_native_1.Text style={styles.boxModelValue}>
+                      {componentInfo.boxModel.padding.top} {componentInfo.boxModel.padding.right} {componentInfo.boxModel.padding.bottom} {componentInfo.boxModel.padding.left}
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
+              </react_native_1.View>)}
+
+            {/* Source Row */}
+            {filePath && (<react_native_1.View style={styles.sourceRow}>
+                <react_native_1.Text style={styles.label}>Source</react_native_1.Text>
+                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.filePathScroll}>
+                  <react_native_1.Text style={styles.filePath} numberOfLines={1}>
+                    {filePath}
+                  </react_native_1.Text>
+                </react_native_1.ScrollView>
+                <react_native_1.TouchableOpacity style={styles.copyButton} onPress={handleCopyPath}>
+                  <react_native_1.Text style={styles.copyText}>{copied ? 'Copied' : 'Copy'}</react_native_1.Text>
+                </react_native_1.TouchableOpacity>
+              </react_native_1.View>)}
+
+            {/* AI Prompt Section */}
+            <react_native_1.View style={styles.divider}/>
+            <react_native_1.View style={styles.aiSection}>
+              <react_native_1.Text style={styles.sectionTitle}>AI Prompt</react_native_1.Text>
+              <react_native_1.TextInput style={styles.input} placeholder={`Tell ${selectedComponent.name} what to do...`} placeholderTextColor="#636366" value={prompt} onChangeText={setPrompt} multiline numberOfLines={2}/>
+              
+              <react_native_1.View style={styles.agentGrid}>
+                <react_native_1.TouchableOpacity style={[styles.agentButton, isLoading && styles.agentButtonDisabled]} onPress={() => handleSend('cursor')} disabled={isLoading}>
+                  {loadingAgent === 'cursor' ? (<react_native_1.ActivityIndicator size="small" color="#8B5CF6"/>) : (<react_native_1.Text style={styles.agentButtonText}>Cursor</react_native_1.Text>)}
+                </react_native_1.TouchableOpacity>
+
+                <react_native_1.TouchableOpacity style={[styles.agentButton, isLoading && styles.agentButtonDisabled]} onPress={() => handleSend('claude-code')} disabled={isLoading}>
+                  {loadingAgent === 'claude-code' ? (<react_native_1.ActivityIndicator size="small" color="#FF6B35"/>) : (<react_native_1.Text style={styles.agentButtonText}>Claude</react_native_1.Text>)}
+                </react_native_1.TouchableOpacity>
+                
+                <react_native_1.TouchableOpacity style={[styles.agentButton, isLoading && styles.agentButtonDisabled]} onPress={() => handleSend('opencode')} disabled={isLoading}>
+                  {loadingAgent === 'opencode' ? (<react_native_1.ActivityIndicator size="small" color="#10B981"/>) : (<react_native_1.Text style={styles.agentButtonText}>OpenCode</react_native_1.Text>)}
+                </react_native_1.TouchableOpacity>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.ScrollView>
+        </react_native_1.View>
+      </react_native_1.View>
+    </>);
+}
+const styles = react_native_1.StyleSheet.create({
+    backdrop: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0, 0, 0, 0.08)', // Very subtle backdrop
+    },
+    tooltip: {
+        position: 'absolute',
+        left: 8,
+        right: 8,
+        zIndex: 1000,
+    },
+    container: {
+        backgroundColor: 'rgba(28, 28, 30, 0.95)', // Semi-transparent dark
+        borderRadius: 16,
+        maxHeight: 320,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: 0.4,
+        shadowRadius: 16,
+        elevation: 20,
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.15)',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingTop: 14,
+        paddingBottom: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(255, 255, 255, 0.1)',
+    },
+    titleContainer: {
+        flex: 1,
+        minWidth: 0,
+    },
+    componentName: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: '#FFFFFF',
+        letterSpacing: -0.3,
+    },
+    headerButton: {
+        padding: 6,
+        marginLeft: 8,
+    },
+    codeIcon: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        backgroundColor: '#0A84FF',
+        borderRadius: 6,
+    },
+    codeIconText: {
+        color: '#FFFFFF',
+        fontSize: 12,
+        fontWeight: '700',
+        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    },
+    closeIcon: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    closeIconLine: {
+        position: 'absolute',
+        width: 12,
+        height: 2,
+        backgroundColor: '#FFFFFF',
+        borderRadius: 1,
+    },
+    breadcrumbContainer: {
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(255, 255, 255, 0.05)',
+    },
+    breadcrumbScroll: {
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        alignItems: 'center',
+    },
+    breadcrumbItem: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+    },
+    breadcrumbItemActive: {
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    },
+    breadcrumbText: {
+        color: '#8E8E93',
+        fontSize: 12,
+        fontWeight: '500',
+    },
+    breadcrumbTextActive: {
+        color: '#FFFFFF',
+        fontWeight: '700',
+    },
+    breadcrumbTextNoSource: {
+        opacity: 0.5,
+        fontStyle: 'italic',
+    },
+    breadcrumbSeparator: {
+        color: 'rgba(255, 255, 255, 0.3)',
+        fontSize: 14,
+        marginHorizontal: 2,
+    },
+    scrollContent: {
+        maxHeight: 240,
+    },
+    scrollContentContainer: {
+        paddingHorizontal: 16,
+        paddingTop: 12,
+        paddingBottom: 16,
+    },
+    divider: {
+        height: 1,
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+        marginVertical: 12,
+    },
+    sourceRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    dimensionsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        marginBottom: 8,
+    },
+    dimensionsValue: {
+        fontSize: 13,
+        color: '#FFFFFF',
+        fontWeight: '600',
+        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    },
+    boxModelRow: {
+        flexDirection: 'row',
+        gap: 12,
+        marginBottom: 8,
+    },
+    boxModelItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    boxModelColor: {
+        width: 10,
+        height: 10,
+        borderRadius: 2,
+    },
+    boxModelLabel: {
+        fontSize: 11,
+        fontWeight: '600',
+        color: '#8E8E93',
+    },
+    boxModelValue: {
+        fontSize: 11,
+        color: '#FFFFFF',
+        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    },
+    label: {
+        fontSize: 11,
+        fontWeight: '600',
+        color: '#8E8E93',
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    filePathScroll: {
+        flex: 1,
+        maxWidth: 240,
+    },
+    filePath: {
+        fontSize: 11,
+        color: '#FFFFFF',
+        fontFamily: react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    },
+    copyButton: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+    },
+    copyText: {
+        fontSize: 11,
+        color: '#0A84FF',
+        fontWeight: '600',
+    },
+    aiSection: {
+        marginTop: 4,
+    },
+    sectionTitle: {
+        fontSize: 13,
+        fontWeight: '600',
+        color: '#FFFFFF',
+        marginBottom: 10,
+    },
+    input: {
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+        borderRadius: 10,
+        padding: 10,
+        fontSize: 13,
+        color: '#FFFFFF',
+        minHeight: 50,
+        textAlignVertical: 'top',
+        marginBottom: 12,
+    },
+    agentGrid: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    agentButton: {
+        flex: 1,
+        paddingVertical: 10,
+        borderRadius: 8,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+        minHeight: 40,
+    },
+    agentButtonDisabled: {
+        opacity: 0.5,
+    },
+    agentButtonText: {
+        color: '#FFFFFF',
+        fontSize: 12,
+        fontWeight: '600',
+    },
+});

package/dist/provider.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface RNAVEProviderProps {
+    children: React.ReactNode;
+}
+/**
+ * Internal provider component for rn-ave
+ * This is used by auto-initialization only - not meant to be used directly
+ */
+export declare function RNAVEProvider({ children }: RNAVEProviderProps): React.JSX.Element;
+export {};