@np-dev/ui-ai-anotation 0.1.0

package/src/components/native/Highlighter.tsx

@@ -0,0 +1,239 @@
+import React, { useState, useCallback, useRef } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Dimensions,
+  GestureResponderEvent,
+} from 'react-native';
+import { useAiAnnotation } from '../../store';
+import { AnnotationInput } from './AnnotationInput';
+
+interface HighlightRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface HighlighterProps {
+  /**
+   * Called when a touch occurs in inspection mode.
+   * Return component info { name, rect } to highlight, or null to ignore.
+   */
+  onInspect?: (event: GestureResponderEvent) => {
+    name: string;
+    rect: HighlightRect;
+  } | null;
+}
+
+export function Highlighter({ onInspect }: HighlighterProps) {
+  const { state, dispatch } = useAiAnnotation();
+  const { mode } = state;
+
+  const [highlightRect, setHighlightRect] = useState<HighlightRect | null>(null);
+  const [componentName, setComponentName] = useState<string>('');
+  const [showInput, setShowInput] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
+
+  const screenDimensions = Dimensions.get('window');
+
+  const handleTouch = useCallback(
+    (event: GestureResponderEvent) => {
+      if (mode !== 'inspecting') return;
+
+      const { pageX, pageY } = event.nativeEvent;
+
+      if (onInspect) {
+        const result = onInspect(event);
+        if (result) {
+          setHighlightRect(result.rect);
+          setComponentName(result.name);
+          setTooltipPos({ x: pageX, y: pageY });
+          setShowTooltip(true);
+          return;
+        }
+      }
+
+      // Default behavior: show tooltip at touch location
+      setTooltipPos({ x: pageX, y: pageY });
+      setShowTooltip(true);
+      setComponentName('TouchedComponent');
+      setHighlightRect({
+        x: pageX - 50,
+        y: pageY - 50,
+        width: 100,
+        height: 100,
+      });
+    },
+    [mode, onInspect]
+  );
+
+  const handleAddAnnotation = () => {
+    setShowInput(true);
+    setShowTooltip(false);
+  };
+
+  const handleCloseInput = () => {
+    setShowInput(false);
+    setHighlightRect(null);
+    setComponentName('');
+  };
+
+  const handleDismiss = () => {
+    setShowTooltip(false);
+    setHighlightRect(null);
+    setComponentName('');
+  };
+
+  if (mode !== 'inspecting') return null;
+
+  // Calculate tooltip position to keep it on screen
+  const tooltipWidth = 120;
+  const tooltipHeight = 50;
+  let adjustedX = tooltipPos.x + 16;
+  let adjustedY = tooltipPos.y + 16;
+
+  if (adjustedX + tooltipWidth > screenDimensions.width) {
+    adjustedX = tooltipPos.x - tooltipWidth - 16;
+  }
+  if (adjustedY + tooltipHeight > screenDimensions.height) {
+    adjustedY = tooltipPos.y - tooltipHeight - 16;
+  }
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      {/* Touch capture overlay */}
+      <TouchableOpacity
+        style={styles.touchOverlay}
+        activeOpacity={1}
+        onPress={handleTouch}
+      />
+
+      {/* Highlight rectangle */}
+      {highlightRect && (
+        <>
+          <View
+            style={[
+              styles.highlight,
+              {
+                left: highlightRect.x - 2,
+                top: highlightRect.y - 2,
+                width: highlightRect.width + 4,
+                height: highlightRect.height + 4,
+              },
+            ]}
+            pointerEvents="none"
+          />
+
+          {/* Component name label */}
+          {componentName && (
+            <View
+              style={[
+                styles.nameLabel,
+                {
+                  left: highlightRect.x,
+                  top: highlightRect.y - 24,
+                },
+              ]}
+              pointerEvents="none"
+            >
+              <Text style={styles.nameLabelText}>{componentName}</Text>
+            </View>
+          )}
+        </>
+      )}
+
+      {/* Floating tooltip */}
+      {showTooltip && (
+        <View
+          style={[
+            styles.tooltip,
+            {
+              left: adjustedX,
+              top: adjustedY,
+            },
+          ]}
+        >
+          <TouchableOpacity style={styles.tooltipButton} onPress={handleAddAnnotation}>
+            <Text style={styles.tooltipButtonText}>+</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.dismissButton} onPress={handleDismiss}>
+            <Text style={styles.dismissButtonText}>✕</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
+      {/* Annotation input modal */}
+      {showInput && (
+        <AnnotationInput onClose={handleCloseInput} componentName={componentName || 'Unknown'} />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  touchOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'transparent',
+  },
+  highlight: {
+    position: 'absolute',
+    borderWidth: 2,
+    borderColor: '#3b82f6',
+    borderRadius: 4,
+    backgroundColor: 'rgba(59, 130, 246, 0.1)',
+  },
+  nameLabel: {
+    position: 'absolute',
+    backgroundColor: '#3b82f6',
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  nameLabelText: {
+    color: 'white',
+    fontSize: 12,
+    fontFamily: 'monospace',
+  },
+  tooltip: {
+    position: 'absolute',
+    flexDirection: 'row',
+    gap: 6,
+    padding: 6,
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    borderRadius: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  tooltipButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 6,
+    backgroundColor: '#3b82f6',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  tooltipButtonText: {
+    color: 'white',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  dismissButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 6,
+    backgroundColor: '#6b7280',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  dismissButtonText: {
+    color: 'white',
+    fontSize: 14,
+  },
+});

package/src/components/native/Toolbar.tsx

@@ -0,0 +1,192 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import { useAiAnnotation } from '../../store';
+import { Draggable } from './Draggable';
+import { Highlighter } from './Highlighter';
+import { AnnotationList } from './AnnotationList';
+
+// Dynamic clipboard import to handle different React Native versions
+const copyToClipboard = async (text: string) => {
+  try {
+    // Try expo-clipboard first
+    const ExpoClipboard = await import('expo-clipboard');
+    await ExpoClipboard.setStringAsync(text);
+  } catch {
+    try {
+      // Fallback to @react-native-clipboard/clipboard
+      const RNClipboard = await import('@react-native-clipboard/clipboard');
+      RNClipboard.default.setString(text);
+    } catch {
+      console.warn('No clipboard module available');
+    }
+  }
+};
+
+export function Toolbar() {
+  const { state, dispatch } = useAiAnnotation();
+  const [showCopied, setShowCopied] = useState(false);
+
+  const handleCopy = async () => {
+    const data = state.annotations.map((a) => ({
+      component: a.componentName,
+      instruction: a.note,
+    }));
+    const text = JSON.stringify(data, null, 2);
+
+    await copyToClipboard(text);
+
+    setShowCopied(true);
+    setTimeout(() => setShowCopied(false), 2000);
+  };
+
+  const toggleMode = () => {
+    dispatch({
+      type: 'SET_MODE',
+      payload: state.mode === 'disabled' ? 'inspecting' : 'disabled',
+    });
+  };
+
+  const handleToggleMinimized = () => {
+    dispatch({ type: 'TOGGLE_MINIMIZED' });
+  };
+
+  return (
+    <>
+      <Highlighter />
+      <AnnotationList />
+      <Draggable>
+        <View style={styles.toolbar}>
+          {/* Drag Handle */}
+          <View style={styles.dragHandle}>
+            <Text style={styles.dragHandleText}>⋮⋮</Text>
+          </View>
+
+          {!state.isMinimized && (
+            <>
+              <View style={styles.separator} />
+
+              {/* Toggle inspection mode */}
+              <TouchableOpacity
+                style={[
+                  styles.button,
+                  state.mode === 'inspecting' && styles.buttonActive,
+                ]}
+                onPress={toggleMode}
+              >
+                <Text style={styles.buttonText}>
+                  {state.mode === 'inspecting' ? '👆' : '🚫'}
+                </Text>
+              </TouchableOpacity>
+
+              {/* List annotations */}
+              <TouchableOpacity
+                style={styles.button}
+                onPress={() => dispatch({ type: 'TOGGLE_LIST' })}
+              >
+                <Text style={styles.buttonText}>📋</Text>
+                {state.annotations.length > 0 && (
+                  <View style={styles.badge}>
+                    <Text style={styles.badgeText}>{state.annotations.length}</Text>
+                  </View>
+                )}
+              </TouchableOpacity>
+
+              {/* Copy annotations */}
+              <TouchableOpacity
+                style={[styles.button, showCopied && styles.buttonSuccess]}
+                onPress={handleCopy}
+              >
+                <Text style={styles.buttonText}>{showCopied ? '✓' : '📋'}</Text>
+                {showCopied && <Text style={styles.copiedText}>Copied!</Text>}
+              </TouchableOpacity>
+            </>
+          )}
+
+          <View style={styles.separator} />
+
+          {/* Minimize/Expand */}
+          <TouchableOpacity style={styles.button} onPress={handleToggleMinimized}>
+            <Text style={styles.buttonText}>{state.isMinimized ? '⬜' : '➖'}</Text>
+          </TouchableOpacity>
+        </View>
+      </Draggable>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  toolbar: {
+    backgroundColor: '#1e1e1e',
+    borderWidth: 1,
+    borderColor: '#333',
+    borderRadius: 8,
+    padding: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  dragHandle: {
+    paddingHorizontal: 4,
+  },
+  dragHandleText: {
+    color: '#666',
+    fontSize: 16,
+  },
+  separator: {
+    width: 1,
+    height: 24,
+    backgroundColor: '#333',
+  },
+  button: {
+    width: 32,
+    height: 32,
+    borderRadius: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  buttonActive: {
+    backgroundColor: '#3b82f6',
+  },
+  buttonSuccess: {
+    backgroundColor: '#22c55e',
+    flexDirection: 'row',
+    width: 'auto',
+    paddingHorizontal: 8,
+    gap: 4,
+  },
+  buttonText: {
+    fontSize: 16,
+  },
+  copiedText: {
+    color: 'white',
+    fontSize: 12,
+  },
+  badge: {
+    position: 'absolute',
+    top: -4,
+    right: -4,
+    backgroundColor: '#ef4444',
+    borderRadius: 7,
+    width: 14,
+    height: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  badgeText: {
+    color: 'white',
+    fontSize: 9,
+    fontWeight: 'bold',
+  },
+});

package/src/components/native/index.ts

@@ -0,0 +1,6 @@
+// Native components export
+export { Toolbar } from './Toolbar';
+export { Highlighter } from './Highlighter';
+export { AnnotationInput } from './AnnotationInput';
+export { AnnotationList } from './AnnotationList';
+export { Draggable } from './Draggable';

package/src/components/web/AnnotationInput.tsx

@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import { useAiAnnotation } from '../../store';
+import { X } from 'lucide-react';
+
+export function AnnotationInput({ onClose, componentName }: { onClose: () => void; componentName: string }) {
+  const { dispatch } = useAiAnnotation();
+  const [note, setNote] = useState('');
+  const [isVisible, setIsVisible] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+
+  // Trigger entrance animation on mount
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      setIsVisible(true);
+    });
+  }, []);
+
+  // ESC key to close
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        handleClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  // Handle close with exit animation
+  const handleClose = () => {
+    setIsClosing(true);
+    setTimeout(() => {
+      onClose();
+    }, 200);
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!note.trim()) return;
+
+    dispatch({
+      type: 'ADD_ANNOTATION',
+      payload: {
+        id: Date.now().toString(),
+        componentName,
+        note,
+        timestamp: Date.now(),
+      },
+    });
+    handleClose();
+  };
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: isVisible && !isClosing ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 10000,
+        transition: 'background-color 0.2s ease',
+      }}
+      data-ai-annotation-ui
+      onClick={handleClose}
+    >
+      <div
+        style={{
+          backgroundColor: '#1e1e1e',
+          color: '#e5e7eb',
+          padding: '20px',
+          borderRadius: '8px',
+          width: '400px',
+          maxWidth: '90%',
+          boxShadow: '0 4px 6px rgba(0,0,0,0.3)',
+          transform: isVisible && !isClosing ? 'scale(1) translateY(0)' : 'scale(0.95) translateY(-10px)',
+          opacity: isVisible && !isClosing ? 1 : 0,
+          transition: 'transform 0.2s ease, opacity 0.2s ease',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '16px' }}>
+          <h3 style={{ margin: 0, fontSize: '1.1rem' }}>Add Annotation</h3>
+          <button onClick={handleClose} style={{ background: 'none', border: 'none', color: 'inherit', cursor: 'pointer' }}>
+            <X size={20} />
+          </button>
+        </div>
+
+        <div style={{ marginBottom: '12px', fontSize: '0.9rem', opacity: 0.8 }}>
+          Component: <strong>{componentName}</strong>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <textarea
+            value={note}
+            onChange={(e) => setNote(e.target.value)}
+            placeholder="Describe what this component does..."
+            style={{
+              width: '100%',
+              height: '100px',
+              padding: '8px',
+              borderRadius: '4px',
+              backgroundColor: '#2d2d2d',
+              border: '1px solid #404040',
+              color: 'white',
+              marginBottom: '16px',
+              resize: 'vertical',
+            }}
+            autoFocus
+          />
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
+            <button
+              type="button"
+              onClick={handleClose}
+              style={{
+                padding: '6px 12px',
+                borderRadius: '4px',
+                backgroundColor: 'transparent',
+                border: '1px solid #404040',
+                color: 'white',
+                cursor: 'pointer',
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              style={{
+                padding: '6px 12px',
+                borderRadius: '4px',
+                backgroundColor: '#3b82f6',
+                border: 'none',
+                color: 'white',
+                cursor: 'pointer',
+              }}
+            >
+              Save Annotation
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/components/web/AnnotationList.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { useAiAnnotation } from '../../store';
+import { X, Trash2, Trash } from 'lucide-react';
+
+export function AnnotationList() {
+  const { state, dispatch } = useAiAnnotation();
+
+  if (!state.showList) return null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 10000,
+        pointerEvents: 'auto',
+      }}
+      data-ai-annotation-ui
+      onClick={() => dispatch({ type: 'TOGGLE_LIST' })}
+    >
+      <div
+        style={{
+          backgroundColor: '#1e1e1e',
+          color: '#e5e7eb',
+          padding: '20px',
+          borderRadius: '8px',
+          width: '500px',
+          maxWidth: '90%',
+          maxHeight: '80vh',
+          display: 'flex',
+          flexDirection: 'column',
+          boxShadow: '0 4px 6px rgba(0,0,0,0.3)',
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '16px', alignItems: 'center' }}>
+          <h3 style={{ margin: 0 }}>Annotations ({state.annotations.length})</h3>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            {state.annotations.length > 0 && (
+              <button
+                onClick={() => dispatch({ type: 'CLEAR_ALL_ANNOTATIONS' })}
+                style={{
+                  background: '#ef4444',
+                  border: 'none',
+                  color: 'white',
+                  cursor: 'pointer',
+                  padding: '6px 12px',
+                  borderRadius: '4px',
+                  fontSize: '12px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                }}
+                title="Clear all annotations"
+              >
+                <Trash size={14} />
+                Clear All
+              </button>
+            )}
+            <button
+              onClick={() => dispatch({ type: 'TOGGLE_LIST' })}
+              style={{ background: 'none', border: 'none', color: 'inherit', cursor: 'pointer' }}
+            >
+              <X size={20} />
+            </button>
+          </div>
+        </div>
+
+        <div style={{ overflowY: 'auto', flex: 1, display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          {state.annotations.length === 0 ? (
+            <p style={{ textAlign: 'center', opacity: 0.6, padding: '20px' }}>No annotations yet.</p>
+          ) : (
+            state.annotations.map((ann) => (
+              <div
+                key={ann.id}
+                style={{
+                  backgroundColor: '#2d2d2d',
+                  padding: '12px',
+                  borderRadius: '4px',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'flex-start',
+                  gap: '12px'
+                }}
+              >
+                <div>
+                  <div style={{ fontWeight: 'bold', fontSize: '0.9rem', color: '#60a5fa' }}>{ann.componentName}</div>
+                  <div style={{ fontSize: '0.9rem', whiteSpace: 'pre-wrap' }}>{ann.note}</div>
+                </div>
+                <button
+                  onClick={() => dispatch({ type: 'REMOVE_ANNOTATION', payload: ann.id })}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    color: '#ef4444',
+                    cursor: 'pointer',
+                    padding: '4px',
+                  }}
+                  title="Remove annotation"
+                >
+                  <Trash2 size={16} />
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}