@np-dev/ui-ai-anotation 0.1.0

package/src/index.tsx

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

package/src/index.web.tsx

@@ -0,0 +1,124 @@
+/**
+ * Web-only entry point for Chrome Extension
+ * This avoids any React Native imports
+ */
+
+import React, { createContext, useContext, useReducer, ReactNode } from 'react';
+import type { ComponentDetails, ChildComponentInfo, ElementInfo } from './utils/fiber';
+
+// Re-export types for external use
+export type { ComponentDetails, ChildComponentInfo, ElementInfo };
+
+export type Annotation = {
+  id: string;
+  componentName: string;
+  note: string;
+  timestamp: number;
+  /** Enhanced component details (optional for backward compatibility) */
+  details?: ComponentDetails;
+};
+
+export type Mode = 'disabled' | 'inspecting';
+
+/**
+ * Platform-agnostic element type
+ * - On web: HTMLElement
+ */
+export type HoveredElement = HTMLElement | null;
+
+/**
+ * Enhanced component info with full details
+ */
+export interface HoveredComponentInfo {
+  name: string;
+  /** Full component details including hierarchy, children, and element info */
+  details?: ComponentDetails;
+}
+
+interface State {
+  mode: Mode;
+  annotations: Annotation[];
+  hoveredElement: HoveredElement;
+  hoveredComponentInfo: HoveredComponentInfo | null;
+  isMinimized: boolean;
+  showList: boolean;
+}
+
+type Action =
+  | { type: 'SET_MODE'; payload: Mode }
+  | { type: 'ADD_ANNOTATION'; payload: Annotation }
+  | { type: 'REMOVE_ANNOTATION'; payload: string }
+  | { type: 'CLEAR_ALL_ANNOTATIONS' }
+  | { type: 'SET_HOVERED'; payload: { element: HoveredElement; name: string | null; details?: ComponentDetails } }
+  | { type: 'TOGGLE_MINIMIZED' }
+  | { type: 'TOGGLE_LIST' }
+  | { type: 'RESET_HOVER' };
+
+const initialState: State = {
+  mode: 'inspecting', // Start enabled for extension
+  annotations: [],
+  hoveredElement: null,
+  hoveredComponentInfo: null,
+  isMinimized: false,
+  showList: false,
+};
+
+const AnnotationContext = createContext<{
+  state: State;
+  dispatch: React.Dispatch<Action>;
+} | undefined>(undefined);
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'SET_MODE':
+      return { ...state, mode: action.payload };
+    case 'ADD_ANNOTATION':
+      return { ...state, annotations: [...state.annotations, action.payload] };
+    case 'REMOVE_ANNOTATION':
+      return {
+        ...state,
+        annotations: state.annotations.filter((a) => a.id !== action.payload),
+      };
+    case 'CLEAR_ALL_ANNOTATIONS':
+      return {
+        ...state,
+        annotations: [],
+      };
+    case 'SET_HOVERED':
+        // Avoid updates if same
+        if (state.hoveredElement === action.payload.element) return state;
+        return {
+            ...state,
+            hoveredElement: action.payload.element,
+            hoveredComponentInfo: action.payload.name
+              ? { name: action.payload.name, details: action.payload.details }
+              : null
+        };
+    case 'RESET_HOVER':
+        return { ...state, hoveredElement: null, hoveredComponentInfo: null };
+    case 'TOGGLE_MINIMIZED':
+      return { ...state, isMinimized: !state.isMinimized };
+    case 'TOGGLE_LIST':
+      return { ...state, showList: !state.showList };
+    default:
+      return state;
+  }
+}
+
+export function AiAnnotationProvider({ children }: { children: ReactNode }) {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  return (
+    <AnnotationContext.Provider value={{ state, dispatch }}>
+      {children}
+    </AnnotationContext.Provider>
+  );
+}
+
+export function useAiAnnotation() {
+  const context = useContext(AnnotationContext);
+  if (!context) {
+    throw new Error('useAiAnnotation must be used within an AiAnnotationProvider');
+  }
+  return context;
+}

package/src/store.tsx

@@ -0,0 +1,120 @@
+import React, { createContext, useContext, useReducer, ReactNode } from 'react';
+import type { ComponentDetails, ChildComponentInfo, ElementInfo } from './utils/fiber';
+
+// Re-export types for external use
+export type { ComponentDetails, ChildComponentInfo, ElementInfo };
+
+export type Annotation = {
+  id: string;
+  componentName: string;
+  note: string;
+  timestamp: number;
+  /** Enhanced component details (optional for backward compatibility) */
+  details?: ComponentDetails;
+};
+
+export type Mode = 'disabled' | 'inspecting';
+
+/**
+ * Platform-agnostic element type
+ * - On web: HTMLElement
+ * - On native: View ref or null
+ */
+export type HoveredElement = any;
+
+/**
+ * Enhanced component info with full details
+ */
+export interface HoveredComponentInfo {
+  name: string;
+  /** Full component details including hierarchy, children, and element info */
+  details?: ComponentDetails;
+}
+
+interface State {
+  mode: Mode;
+  annotations: Annotation[];
+  hoveredElement: HoveredElement;
+  hoveredComponentInfo: HoveredComponentInfo | null;
+  isMinimized: boolean;
+  showList: boolean;
+}
+
+type Action =
+  | { type: 'SET_MODE'; payload: Mode }
+  | { type: 'ADD_ANNOTATION'; payload: Annotation }
+  | { type: 'REMOVE_ANNOTATION'; payload: string }
+  | { type: 'CLEAR_ALL_ANNOTATIONS' }
+  | { type: 'SET_HOVERED'; payload: { element: HoveredElement; name: string | null; details?: ComponentDetails } }
+  | { type: 'TOGGLE_MINIMIZED' }
+  | { type: 'TOGGLE_LIST' }
+  | { type: 'RESET_HOVER' };
+
+const initialState: State = {
+  mode: 'disabled',
+  annotations: [],
+  hoveredElement: null,
+  hoveredComponentInfo: null,
+  isMinimized: false,
+  showList: false,
+};
+
+const AnnotationContext = createContext<{
+  state: State;
+  dispatch: React.Dispatch<Action>;
+} | undefined>(undefined);
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'SET_MODE':
+      return { ...state, mode: action.payload };
+    case 'ADD_ANNOTATION':
+      return { ...state, annotations: [...state.annotations, action.payload] };
+    case 'REMOVE_ANNOTATION':
+      return {
+        ...state,
+        annotations: state.annotations.filter((a) => a.id !== action.payload),
+      };
+    case 'CLEAR_ALL_ANNOTATIONS':
+      return {
+        ...state,
+        annotations: [],
+      };
+    case 'SET_HOVERED':
+        // Avoid updates if same
+        if (state.hoveredElement === action.payload.element) return state;
+        return {
+            ...state,
+            hoveredElement: action.payload.element,
+            hoveredComponentInfo: action.payload.name
+              ? { name: action.payload.name, details: action.payload.details }
+              : null
+        };
+    case 'RESET_HOVER':
+        return { ...state, hoveredElement: null, hoveredComponentInfo: null };
+    case 'TOGGLE_MINIMIZED':
+      return { ...state, isMinimized: !state.isMinimized };
+    case 'TOGGLE_LIST':
+      return { ...state, showList: !state.showList };
+    default:
+      return state;
+  }
+}
+
+export function AiAnnotationProvider({ children }: { children: ReactNode }) {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  return (
+    <AnnotationContext.Provider value={{ state, dispatch }}>
+      {children}
+    </AnnotationContext.Provider>
+  );
+}
+
+export function useAiAnnotation() {
+  const context = useContext(AnnotationContext);
+  if (!context) {
+    throw new Error('useAiAnnotation must be used within an AiAnnotationProvider');
+  }
+  return context;
+}

package/src/utils/fiber.native.ts

@@ -0,0 +1,90 @@
+/**
+ * React Fiber utilities for React Native
+ * 
+ * Note: React Native has different fiber access compared to web.
+ * These utilities provide a similar interface but with native-specific logic.
+ */
+
+/**
+ * Attempts to get the React Fiber from a native view instance
+ * This is less reliable in React Native than on web
+ */
+export function getReactFiber(instance: any): any {
+  if (!instance) return null;
+  
+  // React Native stores fiber differently
+  // Try to find the fiber via internal props
+  const key = Object.keys(instance).find((k) =>
+    k.startsWith('__reactFiber$') || 
+    k.startsWith('__reactInternalInstance$') ||
+    k.startsWith('_reactInternals')
+  );
+  
+  return key ? instance[key] : null;
+}
+
+/**
+ * Gets the display name of a React component from its fiber
+ */
+export function getComponentDisplayName(fiber: any): string {
+  if (!fiber) return 'Unknown';
+  
+  let curr = fiber;
+  while (curr) {
+    const type = curr.type;
+    if (type) {
+      // Check for displayName or name
+      const name = type.displayName || type.name;
+      if (name && typeof name === 'string') {
+        // Skip internal React Native components
+        if (!name.startsWith('RCT') && !name.startsWith('_')) {
+          return name;
+        }
+      }
+    }
+    curr = curr.return;
+  }
+  return 'Unknown';
+}
+
+/**
+ * For React Native, we can't easily get DOM elements from fibers
+ * This is a no-op that returns null
+ */
+export function getElementFromFiber(_fiber: any): null {
+  return null;
+}
+
+/**
+ * Interface for component inspection result
+ */
+export interface ComponentInfo {
+  name: string;
+  props?: Record<string, any>;
+}
+
+/**
+ * Inspects a React Native component instance to get info
+ * This works with refs passed to components
+ */
+export function inspectComponent(ref: any): ComponentInfo | null {
+  if (!ref) return null;
+  
+  // Try to get fiber from the ref
+  const fiber = getReactFiber(ref);
+  if (fiber) {
+    return {
+      name: getComponentDisplayName(fiber),
+      props: fiber.memoizedProps,
+    };
+  }
+  
+  // Fallback: try to infer from the ref itself
+  if (ref.constructor && ref.constructor.name) {
+    return {
+      name: ref.constructor.name,
+    };
+  }
+  
+  return null;
+}

package/src/utils/fiber.ts

@@ -0,0 +1,255 @@
+
+export function getReactFiber(dom: HTMLElement): any {
+  const key = Object.keys(dom).find((key) =>
+    key.startsWith("__reactFiber$")
+  );
+  // @ts-ignore
+  return key ? dom[key] : null;
+}
+
+export function getComponentDisplayName(fiber: any): string {
+  let curr = fiber;
+  while (curr) {
+    const name = curr.type?.displayName || curr.type?.name;
+    // Filter out internal components if needed, but for now take the first named one
+    // Also skip styled-components or basic html tags if we want "Component" names
+    if (name && typeof curr.type === 'function') return name;
+    curr = curr.return;
+  }
+  return "Unknown";
+}
+
+export function getElementFromFiber(fiber: any): HTMLElement | null {
+    let curr = fiber;
+    while (curr) {
+        if (curr.stateNode instanceof HTMLElement) {
+            return curr.stateNode;
+        }
+        curr = curr.child;
+    }
+    return null;
+}
+
+/**
+ * Component info with hierarchy details
+ */
+export interface ComponentDetails {
+  name: string;
+  parentHierarchy: string[];
+  childComponents: ChildComponentInfo[];
+  elementInfo: ElementInfo;
+  props?: Record<string, any>;
+}
+
+export interface ChildComponentInfo {
+  name: string;
+  depth: number;
+  count: number;
+  hasChildren: boolean;
+}
+
+export interface ElementInfo {
+  tagName: string;
+  id?: string;
+  className?: string;
+  attributes: Record<string, string>;
+  childElementCount: number;
+  textContent?: string;
+}
+
+/**
+ * Get parent component hierarchy (from current component up to root)
+ */
+export function getParentHierarchy(fiber: any, maxDepth: number = 10): string[] {
+  const hierarchy: string[] = [];
+  let curr = fiber?.return;
+  let depth = 0;
+
+  while (curr && depth < maxDepth) {
+    const name = curr.type?.displayName || curr.type?.name;
+    if (name && typeof curr.type === 'function') {
+      // Skip internal React components (starting with uppercase but containing $)
+      if (!name.includes('$') && !name.startsWith('_')) {
+        hierarchy.push(name);
+      }
+    }
+    curr = curr.return;
+    depth++;
+  }
+
+  return hierarchy;
+}
+
+/**
+ * Get child components from a fiber node
+ */
+export function getChildComponents(fiber: any, maxDepth: number = 5): ChildComponentInfo[] {
+  const children: Map<string, { count: number; depth: number; hasChildren: boolean }> = new Map();
+
+  function traverse(node: any, depth: number) {
+    if (!node || depth > maxDepth) return;
+
+    const name = node.type?.displayName || node.type?.name;
+    if (name && typeof node.type === 'function' && !name.includes('$') && !name.startsWith('_')) {
+      const existing = children.get(name);
+      const hasChildComponents = checkHasChildComponents(node.child);
+
+      if (existing) {
+        existing.count++;
+        // Keep the shallowest depth
+        if (depth < existing.depth) {
+          existing.depth = depth;
+        }
+        existing.hasChildren = existing.hasChildren || hasChildComponents;
+      } else {
+        children.set(name, { count: 1, depth, hasChildren: hasChildComponents });
+      }
+    }
+
+    // Traverse siblings and children
+    if (node.child) traverse(node.child, depth + 1);
+    if (node.sibling) traverse(node.sibling, depth);
+  }
+
+  // Start from the fiber's child
+  if (fiber?.child) {
+    traverse(fiber.child, 1);
+  }
+
+  return Array.from(children.entries()).map(([name, info]) => ({
+    name,
+    depth: info.depth,
+    count: info.count,
+    hasChildren: info.hasChildren,
+  })).sort((a, b) => a.depth - b.depth);
+}
+
+/**
+ * Check if a fiber node has child components
+ */
+function checkHasChildComponents(fiber: any, maxDepth: number = 3): boolean {
+  if (!fiber || maxDepth <= 0) return false;
+
+  const name = fiber.type?.displayName || fiber.type?.name;
+  if (name && typeof fiber.type === 'function' && !name.includes('$')) {
+    return true;
+  }
+
+  if (fiber.child && checkHasChildComponents(fiber.child, maxDepth - 1)) return true;
+  if (fiber.sibling && checkHasChildComponents(fiber.sibling, maxDepth - 1)) return true;
+
+  return false;
+}
+
+/**
+ * Get DOM element information
+ */
+export function getElementInfo(element: HTMLElement): ElementInfo {
+  const importantAttributes = ['data-testid', 'role', 'aria-label', 'type', 'name', 'href', 'src'];
+  const attributes: Record<string, string> = {};
+
+  importantAttributes.forEach(attr => {
+    const value = element.getAttribute(attr);
+    if (value) {
+      attributes[attr] = value;
+    }
+  });
+
+  // Get text content (truncated)
+  let textContent: string | undefined;
+  const directText = Array.from(element.childNodes)
+    .filter(node => node.nodeType === Node.TEXT_NODE)
+    .map(node => node.textContent?.trim())
+    .filter(Boolean)
+    .join(' ');
+
+  if (directText) {
+    textContent = directText.length > 100 ? directText.substring(0, 100) + '...' : directText;
+  }
+
+  return {
+    tagName: element.tagName.toLowerCase(),
+    id: element.id || undefined,
+    className: element.className && typeof element.className === 'string'
+      ? element.className.split(' ').slice(0, 5).join(' ') + (element.className.split(' ').length > 5 ? '...' : '')
+      : undefined,
+    attributes,
+    childElementCount: element.childElementCount,
+    textContent,
+  };
+}
+
+/**
+ * Get component props (filtered for safety - removes functions and large objects)
+ */
+export function getComponentProps(fiber: any, maxProps: number = 10): Record<string, any> | undefined {
+  if (!fiber?.memoizedProps) return undefined;
+
+  const props = fiber.memoizedProps;
+  const safeProps: Record<string, any> = {};
+  let count = 0;
+
+  for (const key of Object.keys(props)) {
+    if (count >= maxProps) {
+      safeProps['...'] = `${Object.keys(props).length - maxProps} more props`;
+      break;
+    }
+
+    // Skip children and function props
+    if (key === 'children') continue;
+
+    const value = props[key];
+    const type = typeof value;
+
+    if (type === 'function') {
+      safeProps[key] = '[Function]';
+    } else if (type === 'object' && value !== null) {
+      if (Array.isArray(value)) {
+        safeProps[key] = `[Array(${value.length})]`;
+      } else if (value.$$typeof) {
+        // React element
+        safeProps[key] = '[ReactElement]';
+      } else {
+        try {
+          const json = JSON.stringify(value);
+          safeProps[key] = json.length > 100 ? '[Object]' : value;
+        } catch {
+          safeProps[key] = '[Object]';
+        }
+      }
+    } else {
+      safeProps[key] = value;
+    }
+    count++;
+  }
+
+  return Object.keys(safeProps).length > 0 ? safeProps : undefined;
+}
+
+/**
+ * Get comprehensive component details for the selected element
+ */
+export function getComponentDetails(element: HTMLElement, options?: {
+  includeProps?: boolean;
+  maxParentDepth?: number;
+  maxChildDepth?: number;
+}): ComponentDetails {
+  const { includeProps = false, maxParentDepth = 10, maxChildDepth = 5 } = options || {};
+
+  const fiber = getReactFiber(element);
+  const name = fiber ? getComponentDisplayName(fiber) : 'Unknown';
+
+  // Find the actual component fiber (not DOM node fiber)
+  let componentFiber = fiber;
+  while (componentFiber && typeof componentFiber.type !== 'function') {
+    componentFiber = componentFiber.return;
+  }
+
+  return {
+    name,
+    parentHierarchy: getParentHierarchy(componentFiber, maxParentDepth),
+    childComponents: getChildComponents(componentFiber, maxChildDepth),
+    elementInfo: getElementInfo(element),
+    props: includeProps ? getComponentProps(componentFiber) : undefined,
+  };
+}

package/src/utils/platform.ts

@@ -0,0 +1,33 @@
+/**
+ * Platform detection utilities for cross-platform support
+ */
+
+// Check if we're running in a web environment
+export const isWeb = typeof document !== 'undefined' && typeof window !== 'undefined';
+
+// Check if we're running in React Native
+// We check for the absence of DOM and presence of native-specific globals
+export const isNative = !isWeb && typeof global !== 'undefined';
+
+// Get the current platform
+export type PlatformType = 'web' | 'ios' | 'android' | 'native';
+
+export function getPlatform(): PlatformType {
+  if (isWeb) return 'web';
+  
+  // In React Native, we need to dynamically check Platform
+  try {
+    // This will only work in React Native environment
+    const { Platform } = require('react-native');
+    if (Platform.OS === 'ios') return 'ios';
+    if (Platform.OS === 'android') return 'android';
+    return 'native';
+  } catch {
+    return 'native';
+  }
+}
+
+// Check if running in Tauri environment (web only)
+export function isTauriEnv(): boolean {
+  return isWeb && typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window;
+}