@np-dev/ui-ai-anotation 0.1.0

package/src/components/AnnotationInput.tsx

@@ -0,0 +1,269 @@
+import React, { useState, useEffect } from 'react';
+import { useAiAnnotation } from '../store';
+import type { ComponentDetails } from '../store';
+import { X } from 'lucide-react';
+
+interface AnnotationInputProps {
+  onClose: () => void;
+  componentName: string;
+  componentDetails?: ComponentDetails;
+}
+
+/**
+ * Format component details into a readable text block for the annotation
+ */
+function formatComponentDetails(details: ComponentDetails): string {
+  const lines: string[] = [];
+
+  // Element info
+  lines.push('## Element');
+  let elementStr = `<${details.elementInfo.tagName}`;
+  if (details.elementInfo.id) elementStr += ` id="${details.elementInfo.id}"`;
+  if (details.elementInfo.className) elementStr += ` class="${details.elementInfo.className}"`;
+  elementStr += '>';
+  lines.push(elementStr);
+
+  if (details.elementInfo.textContent) {
+    lines.push(`Text: "${details.elementInfo.textContent}"`);
+  }
+  lines.push(`Child elements: ${details.elementInfo.childElementCount}`);
+
+  // Attributes
+  if (Object.keys(details.elementInfo.attributes).length > 0) {
+    lines.push('');
+    lines.push('## Attributes');
+    for (const [key, value] of Object.entries(details.elementInfo.attributes)) {
+      lines.push(`${key}="${value}"`);
+    }
+  }
+
+  // Parent hierarchy
+  if (details.parentHierarchy.length > 0) {
+    lines.push('');
+    lines.push('## Parent Components');
+    lines.push(details.parentHierarchy.join(' → '));
+  }
+
+  // Child components
+  if (details.childComponents.length > 0) {
+    lines.push('');
+    lines.push(`## Child Components (${details.childComponents.length})`);
+    const childLines = details.childComponents.slice(0, 15).map(child => {
+      let str = child.name;
+      if (child.count > 1) str += ` ×${child.count}`;
+      if (child.hasChildren) str += ' (has children)';
+      return str;
+    });
+    lines.push(childLines.join(', '));
+    if (details.childComponents.length > 15) {
+      lines.push(`... and ${details.childComponents.length - 15} more`);
+    }
+  }
+
+  return lines.join('\n');
+}
+
+export function AnnotationInput({ onClose, componentName, componentDetails }: AnnotationInputProps) {
+  const { dispatch } = useAiAnnotation();
+  const [note, setNote] = useState('');
+  const [includeDetails, setIncludeDetails] = useState(true);
+  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;
+
+    // Build the final annotation text with component details if enabled
+    let finalNote = note.trim();
+    if (includeDetails && componentDetails) {
+      const detailsText = formatComponentDetails(componentDetails);
+      finalNote = `${note.trim()}\n\n---\n${detailsText}`;
+    }
+
+    dispatch({
+      type: 'ADD_ANNOTATION',
+      payload: {
+        id: Date.now().toString(),
+        componentName,
+        note: finalNote,
+        timestamp: Date.now(),
+        details: componentDetails,
+      },
+    });
+    handleClose();
+  };
+
+  // Preview of what will be included
+  const detailsPreview = componentDetails ? (
+    <div style={{
+      fontSize: '0.75rem',
+      color: 'rgba(255, 255, 255, 0.6)',
+      marginTop: '4px',
+    }}>
+      {componentDetails.parentHierarchy.length > 0 && (
+        <div>Parents: {componentDetails.parentHierarchy.slice(0, 3).join(' → ')}{componentDetails.parentHierarchy.length > 3 ? '...' : ''}</div>
+      )}
+      {componentDetails.childComponents.length > 0 && (
+        <div>Children: {componentDetails.childComponents.slice(0, 3).map(c => c.name).join(', ')}{componentDetails.childComponents.length > 3 ? '...' : ''}</div>
+      )}
+      <div>Element: &lt;{componentDetails.elementInfo.tagName}&gt; ({componentDetails.elementInfo.childElementCount} children)</div>
+    </div>
+  ) : null;
+
+  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: '500px',
+          maxWidth: '90%',
+          maxHeight: '80vh',
+          overflow: 'auto',
+          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 or what changes you need..."
+            style={{
+              width: '100%',
+              height: '120px',
+              padding: '8px',
+              borderRadius: '4px',
+              backgroundColor: '#2d2d2d',
+              border: '1px solid #404040',
+              color: 'white',
+              marginBottom: '12px',
+              resize: 'vertical',
+              fontFamily: 'inherit',
+            }}
+            autoFocus
+          />
+
+          {/* Include details checkbox */}
+          {componentDetails && (
+            <div style={{ marginBottom: '16px' }}>
+              <label
+                style={{
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  gap: '8px',
+                  cursor: 'pointer',
+                  fontSize: '0.85rem',
+                }}
+              >
+                <input
+                  type="checkbox"
+                  checked={includeDetails}
+                  onChange={(e) => setIncludeDetails(e.target.checked)}
+                  style={{ marginTop: '2px' }}
+                />
+                <div>
+                  <div style={{ color: '#10b981', fontWeight: 500 }}>
+                    Include component details in annotation
+                  </div>
+                  {includeDetails && detailsPreview}
+                </div>
+              </label>
+            </div>
+          )}
+
+          <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/AnnotationList.tsx

@@ -0,0 +1,248 @@
+import React, { useState } from 'react';
+import { useAiAnnotation } from '../store';
+import { X, Trash2, Trash, ChevronDown, ChevronRight } from 'lucide-react';
+
+export function AnnotationList() {
+  const { state, dispatch } = useAiAnnotation();
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+
+  if (!state.showList) return null;
+
+  const toggleExpand = (id: string) => {
+    setExpandedId(expandedId === id ? null : id);
+  };
+
+  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,
+      }}
+      data-ai-annotation-ui
+      onClick={() => dispatch({ type: 'TOGGLE_LIST' })}
+    >
+      <div
+        style={{
+          backgroundColor: '#1e1e1e',
+          color: '#e5e7eb',
+          padding: '20px',
+          borderRadius: '8px',
+          width: '600px',
+          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) => {
+              const isExpanded = expandedId === ann.id;
+              const hasDetails = !!ann.details;
+
+              return (
+                <div
+                  key={ann.id}
+                  style={{
+                    backgroundColor: '#2d2d2d',
+                    borderRadius: '4px',
+                    overflow: 'hidden',
+                  }}
+                >
+                  {/* Main annotation row */}
+                  <div
+                    style={{
+                      padding: '12px',
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      alignItems: 'flex-start',
+                      gap: '12px',
+                    }}
+                  >
+                    <div style={{ flex: 1 }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
+                        {hasDetails && (
+                          <button
+                            onClick={() => toggleExpand(ann.id)}
+                            style={{
+                              background: 'none',
+                              border: 'none',
+                              color: '#60a5fa',
+                              cursor: 'pointer',
+                              padding: 0,
+                              display: 'flex',
+                              alignItems: 'center',
+                            }}
+                          >
+                            {isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+                          </button>
+                        )}
+                        <div style={{ fontWeight: 'bold', fontSize: '0.9rem', color: '#60a5fa' }}>
+                          {ann.componentName}
+                        </div>
+                      </div>
+                      <div style={{ fontSize: '0.9rem', whiteSpace: 'pre-wrap', marginLeft: hasDetails ? 24 : 0 }}>
+                        {ann.note}
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => dispatch({ type: 'REMOVE_ANNOTATION', payload: ann.id })}
+                      style={{
+                        background: 'none',
+                        border: 'none',
+                        color: '#ef4444',
+                        cursor: 'pointer',
+                        padding: '4px',
+                        flexShrink: 0,
+                      }}
+                      title="Remove annotation"
+                    >
+                      <Trash2 size={16} />
+                    </button>
+                  </div>
+
+                  {/* Expanded details */}
+                  {isExpanded && ann.details && (
+                    <div
+                      style={{
+                        padding: '12px',
+                        paddingTop: 0,
+                        borderTop: '1px solid #404040',
+                        marginTop: '8px',
+                        fontSize: '0.8rem',
+                      }}
+                    >
+                      {/* Element info */}
+                      <div style={{ marginBottom: '12px' }}>
+                        <div style={{ color: '#10b981', fontWeight: 'bold', marginBottom: '4px' }}>
+                          Element
+                        </div>
+                        <div style={{ fontFamily: 'monospace', color: '#f59e0b', fontSize: '0.75rem' }}>
+                          &lt;{ann.details.elementInfo.tagName}
+                          {ann.details.elementInfo.id && ` id="${ann.details.elementInfo.id}"`}
+                          {ann.details.elementInfo.className && ` class="${ann.details.elementInfo.className}"`}
+                          &gt;
+                        </div>
+                        {ann.details.elementInfo.textContent && (
+                          <div style={{ color: 'rgba(255, 255, 255, 0.6)', marginTop: '4px', fontStyle: 'italic' }}>
+                            Text: "{ann.details.elementInfo.textContent}"
+                          </div>
+                        )}
+                      </div>
+
+                      {/* Parent hierarchy */}
+                      {ann.details.parentHierarchy.length > 0 && (
+                        <div style={{ marginBottom: '12px' }}>
+                          <div style={{ color: '#10b981', fontWeight: 'bold', marginBottom: '4px' }}>
+                            Parent Components
+                          </div>
+                          <div style={{ fontFamily: 'monospace', fontSize: '0.75rem' }}>
+                            {ann.details.parentHierarchy.map((parent, i) => (
+                              <span key={i} style={{ color: '#a78bfa' }}>
+                                {i > 0 && ' → '}
+                                {parent}
+                              </span>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Child components */}
+                      {ann.details.childComponents.length > 0 && (
+                        <div style={{ marginBottom: '12px' }}>
+                          <div style={{ color: '#10b981', fontWeight: 'bold', marginBottom: '4px' }}>
+                            Child Components ({ann.details.childComponents.length})
+                          </div>
+                          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
+                            {ann.details.childComponents.map((child, i) => (
+                              <span
+                                key={i}
+                                style={{
+                                  backgroundColor: '#374151',
+                                  padding: '2px 8px',
+                                  borderRadius: '4px',
+                                  fontFamily: 'monospace',
+                                  fontSize: '0.75rem',
+                                  color: '#34d399',
+                                }}
+                              >
+                                {child.name}
+                                {child.count > 1 && ` ×${child.count}`}
+                                {child.hasChildren && ' ▾'}
+                              </span>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Attributes */}
+                      {Object.keys(ann.details.elementInfo.attributes).length > 0 && (
+                        <div>
+                          <div style={{ color: '#10b981', fontWeight: 'bold', marginBottom: '4px' }}>
+                            Attributes
+                          </div>
+                          <div style={{ fontFamily: 'monospace', fontSize: '0.75rem' }}>
+                            {Object.entries(ann.details.elementInfo.attributes).map(([key, value]) => (
+                              <div key={key} style={{ color: '#fbbf24' }}>
+                                {key}="{value}"
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/Draggable.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+interface DraggableProps {
+  children: React.ReactNode;
+  initialPos?: { x: number; y: number };
+}
+
+export function Draggable({ children, initialPos = { x: 20, y: 20 } }: DraggableProps) {
+  const [pos, setPos] = useState(initialPos);
+  const [dragging, setDragging] = useState(false);
+  const [rel, setRel] = useState({ x: 0, y: 0 });
+  const nodeRef = useRef<HTMLDivElement>(null);
+
+  const onMouseDown = (e: React.MouseEvent) => {
+    if (e.button !== 0) return;
+    const node = nodeRef.current;
+    if (!node) return;
+
+    // Only drag if clicking the handle or the container itself, but usually we want a specific handle.
+    // For now, let's assume the whole container is draggable unless propagation stopped.
+
+    const rect = node.getBoundingClientRect();
+    setDragging(true);
+    setRel({
+      x: e.pageX - rect.left - window.scrollX,
+      y: e.pageY - rect.top - window.scrollY,
+    });
+    e.preventDefault();
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (!dragging) return;
+    setPos({
+      x: e.pageX - rel.x,
+      y: e.pageY - rel.y,
+    });
+    e.preventDefault();
+  };
+
+  const onMouseUp = () => {
+    setDragging(false);
+  };
+
+  useEffect(() => {
+    if (dragging) {
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    } else {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    }
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  }, [dragging]);
+
+  return (
+    <div
+      ref={nodeRef}
+      style={{
+        position: 'fixed',
+        left: pos.x,
+        top: pos.y,
+        zIndex: 9999,
+        cursor: dragging ? 'grabbing' : 'grab',
+      }}
+      onMouseDown={onMouseDown}
+    >
+      {children}
+    </div>
+  );
+}