@np-dev/ui-ai-anotation 0.1.0

package/src/components/Toolbar.tsx

@@ -0,0 +1,213 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useAiAnnotation } from '../store';
+import { Draggable } from './Draggable';
+import { GripVertical, MousePointer2, List, Copy, Minus, Maximize2, Ban, Check } from 'lucide-react';
+import { Highlighter } from './Highlighter';
+import { AnnotationList } from './AnnotationList';
+
+export function Toolbar() {
+  const { state, dispatch } = useAiAnnotation();
+  const [showCopied, setShowCopied] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [contentWidth, setContentWidth] = useState<number | null>(null);
+
+  // Measure content width for smooth animation
+  useEffect(() => {
+    if (contentRef.current && !state.isMinimized) {
+      // Use requestAnimationFrame to ensure DOM is updated before measuring
+      requestAnimationFrame(() => {
+        if (contentRef.current) {
+          setContentWidth(contentRef.current.scrollWidth);
+        }
+      });
+    }
+  }, [state.isMinimized, showCopied, state.annotations.length]);
+
+  // Handle minimize toggle with animation
+  const handleToggleMinimized = () => {
+    setIsAnimating(true);
+    dispatch({ type: 'TOGGLE_MINIMIZED' });
+    setTimeout(() => setIsAnimating(false), 300);
+  };
+
+  const handleCopy = () => {
+    if (state.annotations.length === 0) return;
+
+    // Format annotations as readable text with sections
+    const sections = state.annotations.map((a, index) => {
+      const lines: string[] = [];
+
+      // Section header
+      lines.push(`${'='.repeat(50)}`);
+      lines.push(`Annotation ${index + 1}: ${a.componentName}`);
+      lines.push(`${'='.repeat(50)}`);
+      lines.push('');
+
+      // Instruction/Note
+      lines.push('## Instruction');
+      lines.push(a.note);
+
+      return lines.join('\n');
+    });
+
+    const text = sections.join('\n\n');
+    navigator.clipboard.writeText(text).then(() => {
+        setShowCopied(true);
+        setTimeout(() => setShowCopied(false), 2000);
+    });
+  };
+
+  const toggleMode = () => {
+    dispatch({
+      type: 'SET_MODE',
+      payload: state.mode === 'disabled' ? 'inspecting' : 'disabled',
+    });
+  };
+
+  return (
+    <>
+      <Highlighter />
+      <AnnotationList />
+      <Draggable>
+        <div
+          style={{
+            backgroundColor: '#1e1e1e',
+            border: '1px solid #333',
+            borderRadius: '8px',
+            padding: '8px',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            color: '#e5e7eb',
+            transition: 'width 0.2s',
+          }}
+          data-ai-annotation-ui
+        >
+          {/* Drag Handle */}
+          <div style={{ cursor: 'grab', color: '#666', display: 'flex' }} title="Drag">
+            <GripVertical size={20} />
+          </div>
+
+          <div
+            ref={contentRef}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              overflow: 'hidden',
+              transition: 'max-width 0.3s ease, opacity 0.2s ease',
+              maxWidth: state.isMinimized ? 0 : (contentWidth || 300),
+              opacity: state.isMinimized ? 0 : 1,
+              paddingTop: '4px',
+              paddingBottom: '4px',
+              marginTop: '-4px',
+              marginBottom: '-4px',
+            }}
+          >
+            <>
+              <div style={{ width: '1px', height: '24px', backgroundColor: '#333' }} />
+
+              <button
+                onClick={toggleMode}
+                title={state.mode === 'inspecting' ? "Disable Inspection" : "Enable Inspection"}
+                style={{
+                  background: state.mode === 'inspecting' ? '#3b82f6' : 'transparent',
+                  border: 'none',
+                  borderRadius: '4px',
+                  padding: '6px',
+                  color: state.mode === 'inspecting' ? 'white' : 'inherit',
+                  cursor: 'pointer',
+                  display: 'flex'
+                }}
+              >
+                {state.mode === 'inspecting' ? <MousePointer2 size={18} /> : <Ban size={18} />}
+              </button>
+
+              <button
+                onClick={() => dispatch({ type: 'TOGGLE_LIST' })}
+                title="List Annotations"
+                style={{
+                  background: 'transparent',
+                  border: 'none',
+                  borderRadius: '4px',
+                  padding: '6px',
+                  color: 'inherit',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  position: 'relative'
+                }}
+              >
+                <List size={18} />
+                {state.annotations.length > 0 && (
+                  <span style={{
+                    position: 'absolute',
+                    top: -2,
+                    right: -2,
+                    background: '#ef4444',
+                    color: 'white',
+                    fontSize: '9px',
+                    width: '14px',
+                    height: '14px',
+                    borderRadius: '50%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                  }}>
+                    {state.annotations.length}
+                  </span>
+                )}
+              </button>
+
+              <button
+                onClick={handleCopy}
+                title="Copy Annotations"
+                style={{
+                  background: showCopied ? '#22c55e' : 'transparent',
+                  border: 'none',
+                  borderRadius: '4px',
+                  padding: '6px',
+                  color: showCopied ? 'white' : 'inherit',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '4px',
+                  transition: 'background-color 0.2s, color 0.2s',
+                  minWidth: showCopied ? '75px' : 'auto',
+                }}
+              >
+                {showCopied ? (
+                  <>
+                    <Check size={18} />
+                    <span style={{ fontSize: '12px', whiteSpace: 'nowrap' }}>Copied!</span>
+                  </>
+                ) : (
+                  <Copy size={18} />
+                )}
+              </button>
+            </>
+          </div>
+
+          <div style={{ width: '1px', height: '24px', backgroundColor: '#333', marginLeft: state.isMinimized ? 0 : 'auto' }} />
+
+          <button
+            onClick={handleToggleMinimized}
+            title={state.isMinimized ? "Expand" : "Minimize"}
+            style={{
+              background: 'transparent',
+              border: 'none',
+              borderRadius: '4px',
+              padding: '6px',
+              color: 'inherit',
+              cursor: 'pointer',
+              display: 'flex'
+            }}
+          >
+            {state.isMinimized ? <Maximize2 size={18} /> : <Minus size={18} />}
+          </button>
+        </div>
+      </Draggable>
+    </>
+  );
+}

package/src/components/native/AnnotationInput.tsx

@@ -0,0 +1,227 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  Modal,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import { useAiAnnotation } from '../../store';
+
+interface AnnotationInputProps {
+  onClose: () => void;
+  componentName: string;
+}
+
+export function AnnotationInput({ onClose, componentName }: AnnotationInputProps) {
+  const { dispatch } = useAiAnnotation();
+  const [note, setNote] = useState('');
+  const [fadeAnim] = useState(new Animated.Value(0));
+  const [scaleAnim] = useState(new Animated.Value(0.95));
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.spring(scaleAnim, {
+        toValue: 1,
+        friction: 8,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  }, []);
+
+  const handleClose = () => {
+    Animated.parallel([
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true,
+      }),
+      Animated.timing(scaleAnim, {
+        toValue: 0.95,
+        duration: 150,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      onClose();
+    });
+  };
+
+  const handleSubmit = () => {
+    if (!note.trim()) return;
+
+    dispatch({
+      type: 'ADD_ANNOTATION',
+      payload: {
+        id: Date.now().toString(),
+        componentName,
+        note: note.trim(),
+        timestamp: Date.now(),
+      },
+    });
+    handleClose();
+  };
+
+  return (
+    <Modal
+      visible
+      transparent
+      animationType="none"
+      onRequestClose={handleClose}
+    >
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.keyboardView}
+      >
+        <Animated.View style={[styles.overlay, { opacity: fadeAnim }]}>
+          <TouchableOpacity
+            style={styles.backdropTouchable}
+            activeOpacity={1}
+            onPress={handleClose}
+          >
+            <Animated.View
+              style={[
+                styles.container,
+                {
+                  opacity: fadeAnim,
+                  transform: [{ scale: scaleAnim }],
+                },
+              ]}
+            >
+              <TouchableOpacity activeOpacity={1}>
+                <View style={styles.header}>
+                  <Text style={styles.title}>Add Annotation</Text>
+                  <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
+                    <Text style={styles.closeButtonText}>✕</Text>
+                  </TouchableOpacity>
+                </View>
+
+                <Text style={styles.componentLabel}>
+                  Component: <Text style={styles.componentName}>{componentName}</Text>
+                </Text>
+
+                <TextInput
+                  style={styles.textInput}
+                  value={note}
+                  onChangeText={setNote}
+                  placeholder="Describe what this component does..."
+                  placeholderTextColor="#6b7280"
+                  multiline
+                  numberOfLines={4}
+                  textAlignVertical="top"
+                  autoFocus
+                />
+
+                <View style={styles.buttonContainer}>
+                  <TouchableOpacity style={styles.cancelButton} onPress={handleClose}>
+                    <Text style={styles.cancelButtonText}>Cancel</Text>
+                  </TouchableOpacity>
+                  <TouchableOpacity style={styles.submitButton} onPress={handleSubmit}>
+                    <Text style={styles.submitButtonText}>Save Annotation</Text>
+                  </TouchableOpacity>
+                </View>
+              </TouchableOpacity>
+            </Animated.View>
+          </TouchableOpacity>
+        </Animated.View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  keyboardView: {
+    flex: 1,
+  },
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backdropTouchable: {
+    flex: 1,
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    backgroundColor: '#1e1e1e',
+    borderRadius: 8,
+    padding: 20,
+    width: '90%',
+    maxWidth: 400,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  title: {
+    color: '#e5e7eb',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  closeButton: {
+    padding: 4,
+  },
+  closeButtonText: {
+    color: '#e5e7eb',
+    fontSize: 20,
+  },
+  componentLabel: {
+    color: '#9ca3af',
+    fontSize: 14,
+    marginBottom: 12,
+  },
+  componentName: {
+    color: '#e5e7eb',
+    fontWeight: 'bold',
+  },
+  textInput: {
+    backgroundColor: '#2d2d2d',
+    borderWidth: 1,
+    borderColor: '#404040',
+    borderRadius: 4,
+    padding: 8,
+    color: 'white',
+    height: 100,
+    marginBottom: 16,
+    fontSize: 14,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 8,
+  },
+  cancelButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#404040',
+  },
+  cancelButtonText: {
+    color: 'white',
+    fontSize: 14,
+  },
+  submitButton: {
+    backgroundColor: '#3b82f6',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 4,
+  },
+  submitButtonText: {
+    color: 'white',
+    fontSize: 14,
+  },
+});

package/src/components/native/AnnotationList.tsx

@@ -0,0 +1,157 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Modal,
+  TouchableOpacity,
+  ScrollView,
+  StyleSheet,
+} from 'react-native';
+import { useAiAnnotation } from '../../store';
+
+export function AnnotationList() {
+  const { state, dispatch } = useAiAnnotation();
+
+  if (!state.showList) return null;
+
+  return (
+    <Modal
+      visible={state.showList}
+      transparent
+      animationType="fade"
+      onRequestClose={() => dispatch({ type: 'TOGGLE_LIST' })}
+    >
+      <View style={styles.overlay}>
+        <View style={styles.container}>
+          <View style={styles.header}>
+            <Text style={styles.title}>Annotations ({state.annotations.length})</Text>
+            <View style={styles.headerActions}>
+              {state.annotations.length > 0 && (
+                <TouchableOpacity
+                  style={styles.clearButton}
+                  onPress={() => dispatch({ type: 'CLEAR_ALL_ANNOTATIONS' })}
+                >
+                  <Text style={styles.clearButtonText}>Clear All</Text>
+                </TouchableOpacity>
+              )}
+              <TouchableOpacity
+                style={styles.closeButton}
+                onPress={() => dispatch({ type: 'TOGGLE_LIST' })}
+              >
+                <Text style={styles.closeButtonText}>✕</Text>
+              </TouchableOpacity>
+            </View>
+          </View>
+
+          <ScrollView style={styles.listContainer}>
+            {state.annotations.length === 0 ? (
+              <Text style={styles.emptyText}>No annotations yet.</Text>
+            ) : (
+              state.annotations.map((ann) => (
+                <View key={ann.id} style={styles.annotationItem}>
+                  <View style={styles.annotationContent}>
+                    <Text style={styles.componentName}>{ann.componentName}</Text>
+                    <Text style={styles.annotationNote}>{ann.note}</Text>
+                  </View>
+                  <TouchableOpacity
+                    style={styles.deleteButton}
+                    onPress={() => dispatch({ type: 'REMOVE_ANNOTATION', payload: ann.id })}
+                  >
+                    <Text style={styles.deleteButtonText}>🗑</Text>
+                  </TouchableOpacity>
+                </View>
+              ))
+            )}
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  container: {
+    backgroundColor: '#1e1e1e',
+    borderRadius: 8,
+    width: '90%',
+    maxWidth: 500,
+    maxHeight: '80%',
+    padding: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  title: {
+    color: '#e5e7eb',
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  headerActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  clearButton: {
+    backgroundColor: '#ef4444',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 4,
+  },
+  clearButtonText: {
+    color: 'white',
+    fontSize: 12,
+  },
+  closeButton: {
+    padding: 4,
+  },
+  closeButtonText: {
+    color: '#e5e7eb',
+    fontSize: 20,
+  },
+  listContainer: {
+    flex: 1,
+  },
+  emptyText: {
+    color: '#9ca3af',
+    textAlign: 'center',
+    padding: 20,
+  },
+  annotationItem: {
+    backgroundColor: '#2d2d2d',
+    padding: 12,
+    borderRadius: 4,
+    marginBottom: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  annotationContent: {
+    flex: 1,
+    marginRight: 12,
+  },
+  componentName: {
+    color: '#60a5fa',
+    fontWeight: 'bold',
+    fontSize: 14,
+    marginBottom: 4,
+  },
+  annotationNote: {
+    color: '#e5e7eb',
+    fontSize: 14,
+  },
+  deleteButton: {
+    padding: 4,
+  },
+  deleteButtonText: {
+    fontSize: 16,
+  },
+});

package/src/components/native/Draggable.tsx

@@ -0,0 +1,65 @@
+import React, { useRef, ReactNode } from 'react';
+import {
+  View,
+  PanResponder,
+  Animated,
+  StyleSheet,
+  ViewStyle,
+  GestureResponderEvent,
+  PanResponderGestureState,
+} from 'react-native';
+
+interface DraggableProps {
+  children: ReactNode;
+  initialPos?: { x: number; y: number };
+  style?: ViewStyle;
+}
+
+export function Draggable({ children, initialPos = { x: 20, y: 20 }, style }: DraggableProps) {
+  const pan = useRef(new Animated.ValueXY(initialPos)).current;
+  const lastOffset = useRef(initialPos);
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        pan.setOffset(lastOffset.current);
+        pan.setValue({ x: 0, y: 0 });
+      },
+      onPanResponderMove: Animated.event(
+        [null, { dx: pan.x, dy: pan.y }],
+        { useNativeDriver: false }
+      ),
+      onPanResponderRelease: (_e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
+        lastOffset.current = {
+          x: lastOffset.current.x + gestureState.dx,
+          y: lastOffset.current.y + gestureState.dy,
+        };
+        pan.flattenOffset();
+      },
+    })
+  ).current;
+
+  return (
+    <Animated.View
+      {...panResponder.panHandlers}
+      style={[
+        styles.container,
+        style,
+        {
+          transform: [{ translateX: pan.x }, { translateY: pan.y }],
+        },
+      ]}
+    >
+      {children}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    zIndex: 9999,
+  },
+});