@np-dev/ui-ai-anotation 0.1.0

package/src/components/web/Draggable.tsx

@@ -0,0 +1,74 @@
+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',
+        pointerEvents: 'auto',
+      }}
+      onMouseDown={onMouseDown}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/web/Highlighter.tsx

@@ -0,0 +1,329 @@
+import { useEffect, useState } from "react";
+import { useAiAnnotation } from "../../store";
+import { AnnotationInput } from "./AnnotationInput";
+import { captureScreenshot } from "../../utils/screenshot";
+import { getReactFiber, getComponentDisplayName } from "../../utils/fiber";
+
+export function Highlighter() {
+  const { state, dispatch } = useAiAnnotation();
+  const { hoveredElement, mode, hoveredComponentInfo } = state;
+  
+  const [rect, setRect] = useState<DOMRect | null>(null);
+  const [showInput, setShowInput] = useState(false);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const [isLocked, setIsLocked] = useState(false);
+  const [lockedPos, setLockedPos] = useState({ x: 0, y: 0 });
+  const [isCapturing, setIsCapturing] = useState(false);
+  const [captureSuccess, setCaptureSuccess] = useState(false);
+
+  const componentName = hoveredComponentInfo?.name || "";
+
+  // Detect hovered element when in inspecting mode
+  useEffect(() => {
+    if (mode !== 'inspecting') return;
+
+    const handleMouseOver = (e: MouseEvent) => {
+      // Don't detect if locked (user is interacting with tooltip)
+      if (isLocked) return;
+
+      const target = e.target as HTMLElement;
+      
+      // Ignore annotation UI elements
+      if (target.closest('[data-ai-annotation-ui]') || target.closest('[data-annotation-tooltip]')) {
+        return;
+      }
+
+      // Get React component info from fiber
+      const fiber = getReactFiber(target);
+      const name = fiber ? getComponentDisplayName(fiber) : null;
+
+      dispatch({
+        type: 'SET_HOVERED',
+        payload: { element: target, name }
+      });
+    };
+
+    document.addEventListener('mouseover', handleMouseOver);
+    
+    return () => {
+      document.removeEventListener('mouseover', handleMouseOver);
+    };
+  }, [mode, isLocked, dispatch]);
+
+  // Reset all state when mode changes to disabled
+  useEffect(() => {
+    if (mode === 'disabled') {
+      setRect(null);
+      setShowInput(false);
+      setIsLocked(false);
+      setMousePos({ x: 0, y: 0 });
+      setLockedPos({ x: 0, y: 0 });
+      setIsCapturing(false);
+      setCaptureSuccess(false);
+      
+      // Clear hovered element in store
+      dispatch({ type: 'RESET_HOVER' });
+    }
+  }, [mode, dispatch]);
+
+  useEffect(() => {
+    if (!hoveredElement) {
+      setRect(null);
+      setShowInput(false);
+      setIsLocked(false);
+      return;
+    }
+
+    const updateRect = () => {
+      const newRect = hoveredElement.getBoundingClientRect();
+      setRect(newRect);
+    };
+
+    updateRect();
+
+    const handleMouseMove = (e: MouseEvent) => {
+      // Only update mouse position if not locked
+      if (!isLocked) {
+        setMousePos({ x: e.clientX, y: e.clientY });
+      }
+    };
+
+    // Click handler to lock/unlock tooltip
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      
+      // Ignore clicks on the tooltip buttons themselves
+      if (target.closest('[data-annotation-tooltip]')) {
+        return;
+      }
+      
+      // Ignore clicks on annotation input
+      if (target.closest('[data-ai-annotation-ui]')) {
+        return;
+      }
+
+      if (!isLocked) {
+        // Lock the tooltip at current position
+        e.preventDefault();
+        e.stopPropagation();
+        setIsLocked(true);
+        setLockedPos({ x: e.clientX, y: e.clientY });
+      } else {
+        // Unlock and go back to following mode
+        setIsLocked(false);
+      }
+    };
+
+    // ESC key handler to unlock tooltip
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isLocked) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsLocked(false);
+        setShowInput(false);
+      }
+    };
+
+    window.addEventListener("scroll", updateRect, true);
+    window.addEventListener("resize", updateRect);
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("scroll", updateRect, true);
+      window.removeEventListener("resize", updateRect);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [hoveredElement, isLocked]);
+
+  const handleScreenshot = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!hoveredElement || isCapturing) return;
+
+    setIsCapturing(true);
+    try {
+      const result = await captureScreenshot(hoveredElement, {
+        copyToClipboard: true,
+        scale: 2,
+      });
+
+      if (result.success) {
+        setCaptureSuccess(true);
+        setTimeout(() => {
+          setCaptureSuccess(false);
+          setIsLocked(false); // Unlock after successful capture
+        }, 1500);
+      }
+    } catch (error) {
+      console.error("Screenshot failed:", error);
+    } finally {
+      setIsCapturing(false);
+    }
+  };
+
+  const handleAddClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowInput(true);
+    setIsLocked(false); // Unlock when showing input
+  };
+
+  const handleCloseInput = () => {
+    setShowInput(false);
+  };
+
+  if (mode !== "inspecting" || !rect) return null;
+
+  // Use locked position or current mouse position
+  const tooltipX = isLocked ? lockedPos.x : mousePos.x;
+  const tooltipY = isLocked ? lockedPos.y : mousePos.y;
+
+  return (
+    <>
+      {/* Highlight overlay */}
+      <div
+        data-annotation-ui="true"
+        style={{
+          position: "fixed",
+          left: rect.left - 2,
+          top: rect.top - 2,
+          width: rect.width + 4,
+          height: rect.height + 4,
+          border: "2px solid #3b82f6",
+          borderRadius: 4,
+          pointerEvents: "none",
+          zIndex: 99998,
+          backgroundColor: "rgba(59, 130, 246, 0.1)",
+        }}
+      />
+
+      {/* Component name label */}
+      {componentName && (
+        <div
+          data-annotation-ui="true"
+          style={{
+            position: "fixed",
+            left: rect.left,
+            top: rect.top - 24,
+            backgroundColor: "#3b82f6",
+            color: "white",
+            padding: "2px 8px",
+            borderRadius: 4,
+            fontSize: 12,
+            fontFamily: "monospace",
+            pointerEvents: "none",
+            zIndex: 99999,
+          }}
+        >
+          {componentName}
+        </div>
+      )}
+
+      {/* Floating tooltip following mouse */}
+      {!showInput && (
+        <div
+          data-annotation-ui="true"
+          data-annotation-tooltip="true"
+          style={{
+            position: "fixed",
+            left: tooltipX + 16,
+            top: tooltipY + 16,
+            display: "flex",
+            gap: 6,
+            padding: 6,
+            backgroundColor: isLocked ? "rgba(0, 0, 0, 0.95)" : "rgba(0, 0, 0, 0.85)",
+            borderRadius: 8,
+            boxShadow: isLocked 
+              ? "0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(59, 130, 246, 0.5)" 
+              : "0 4px 12px rgba(0, 0, 0, 0.3)",
+            zIndex: 100000,
+            pointerEvents: isLocked ? "auto" : "none",
+            backdropFilter: "blur(8px)",
+            transition: isLocked ? "none" : "left 0.05s ease-out, top 0.05s ease-out",
+          }}
+        >
+          {/* Screenshot button */}
+          <button
+            onClick={handleScreenshot}
+            disabled={isCapturing || !isLocked}
+            style={{
+              width: 32,
+              height: 32,
+              borderRadius: 6,
+              border: "none",
+              backgroundColor: captureSuccess
+                ? "#22c55e"
+                : isCapturing
+                ? "#6b7280"
+                : "#8b5cf6",
+              color: "white",
+              cursor: isLocked ? "pointer" : "default",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 16,
+              transition: "all 0.15s ease",
+              opacity: isLocked ? 1 : 0.7,
+            }}
+            title="Capture screenshot"
+          >
+            {captureSuccess ? "✓" : isCapturing ? "..." : "📷"}
+          </button>
+
+          {/* Add annotation button */}
+          <button
+            onClick={handleAddClick}
+            disabled={!isLocked}
+            style={{
+              width: 32,
+              height: 32,
+              borderRadius: 6,
+              border: "none",
+              backgroundColor: "#3b82f6",
+              color: "white",
+              cursor: isLocked ? "pointer" : "default",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 18,
+              fontWeight: "bold",
+              transition: "all 0.15s ease",
+              opacity: isLocked ? 1 : 0.7,
+            }}
+            title="Add annotation"
+          >
+            +
+          </button>
+          
+          {/* Lock hint */}
+          {!isLocked && (
+            <div
+              style={{
+                position: "absolute",
+                bottom: -20,
+                left: "50%",
+                transform: "translateX(-50%)",
+                fontSize: 10,
+                color: "rgba(255, 255, 255, 0.7)",
+                whiteSpace: "nowrap",
+                pointerEvents: "none",
+              }}
+            >
+              Click to lock
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Annotation input */}
+      {showInput && (
+        <AnnotationInput
+          onClose={handleCloseInput}
+          componentName={componentName || "Unknown"}
+        />
+      )}
+    </>
+  );
+}

package/src/components/web/Toolbar.tsx

@@ -0,0 +1,198 @@
+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 = () => {
+    const data = state.annotations.map((a) => ({
+      component: a.componentName,
+      instruction: a.note,
+    }));
+    const text = JSON.stringify(data, null, 2);
+    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/web/index.ts

@@ -0,0 +1,6 @@
+// Web components export (re-export from parent for backwards compatibility)
+export { Toolbar } from '../Toolbar';
+export { Highlighter } from '../Highlighter';
+export { AnnotationInput } from '../AnnotationInput';
+export { AnnotationList } from '../AnnotationList';
+export { Draggable } from '../Draggable';

package/src/extension.tsx

@@ -0,0 +1,15 @@
+/**
+ * Extension entry point
+ * Self-contained - no cross-imports with react-native code
+ */
+
+// Re-export web components directly
+export { AiAnnotationProvider, useAiAnnotation } from './index.web';
+export type { Annotation, Mode, HoveredElement, HoveredComponentInfo } from './index.web';
+
+// Export web components
+export { Toolbar } from './components/web/Toolbar';
+export { Highlighter } from './components/web/Highlighter';
+export { AnnotationInput } from './components/web/AnnotationInput';
+export { AnnotationList } from './components/web/AnnotationList';
+export { Draggable } from './components/web/Draggable';

package/src/index.native.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { View } from 'react-native';
+import { AiAnnotationProvider as Provider } from './store';
+import { Toolbar } from './components/native/Toolbar';
+
+export interface AiAnnotationProviderProps {
+  children: React.ReactNode;
+}
+
+/**
+ * React Native AI Annotation Provider
+ * Wraps your app to provide annotation functionality
+ */
+export function AiAnnotationProvider({ children }: AiAnnotationProviderProps) {
+  return (
+    <Provider>
+      <View style={{ flex: 1 }}>
+        {children}
+        <Toolbar />
+      </View>
+    </Provider>
+  );
+}
+
+// Re-export store
+export * from './store';
+
+// Export native components
+export { Toolbar } from './components/native/Toolbar';
+export { Highlighter } from './components/native/Highlighter';
+export { AnnotationInput } from './components/native/AnnotationInput';
+export { AnnotationList } from './components/native/AnnotationList';
+export { Draggable } from './components/native/Draggable';
+
+// Export native screenshot utility
+export { captureScreenshot } from './utils/screenshot.native';
+export type { ScreenshotOptions, ScreenshotResult } from './utils/screenshot.native';
+
+// Export native fiber utilities
+export {
+  getReactFiber,
+  getComponentDisplayName,
+  getElementFromFiber,
+  inspectComponent,
+} from './utils/fiber.native';
+export type { ComponentInfo } from './utils/fiber.native';
+
+// Export platform utilities
+export { isWeb, isNative, getPlatform, isTauriEnv } from './utils/platform';
+export type { PlatformType } from './utils/platform';