@np-dev/ui-ai-anotation 0.1.0 → 0.1.1

package/dist/types/store.d.ts

@@ -57,10 +57,10 @@ type Action = {
 } | {
     type: 'RESET_HOVER';
 };
-export declare function AiAnnotationProvider({ children }: {
+export declare function AgentAnnotationProvider({ children }: {
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function useAiAnnotation(): {
+export declare function useAgentAnnotation(): {
     state: State;
     dispatch: React.Dispatch<Action>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@np-dev/ui-ai-anotation",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "AI-powered annotation toolkit for UI inspection and annotation",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.js",

package/src/components/AnnotationInput.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useAiAnnotation } from '../store';
+import { useAgentAnnotation } from '../store';
 import type { ComponentDetails } from '../store';
 import { X } from 'lucide-react';
 
@@ -64,7 +64,7 @@ function formatComponentDetails(details: ComponentDetails): string {
 }
 
 export function AnnotationInput({ onClose, componentName, componentDetails }: AnnotationInputProps) {
-  const { dispatch } = useAiAnnotation();
+  const { dispatch } = useAgentAnnotation();
   const [note, setNote] = useState('');
   const [includeDetails, setIncludeDetails] = useState(true);
   const [isVisible, setIsVisible] = useState(false);

package/src/components/AnnotationList.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { useAiAnnotation } from '../store';
+import { useAgentAnnotation } from '../store';
 import { X, Trash2, Trash, ChevronDown, ChevronRight } from 'lucide-react';
 
 export function AnnotationList() {
-  const { state, dispatch } = useAiAnnotation();
+  const { state, dispatch } = useAgentAnnotation();
   const [expandedId, setExpandedId] = useState<string | null>(null);
 
   if (!state.showList) return null;

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,426 @@
+import React, { Component, ReactNode } from 'react';
+
+/**
+ * Error information passed to fallback components
+ */
+export interface ErrorInfo {
+  error: Error;
+  errorInfo: React.ErrorInfo;
+  /** Formatted error message for copying/display */
+  formattedError: string;
+  /** Reset the error state and retry rendering */
+  reset: () => void;
+}
+
+/**
+ * Props for custom fallback component
+ */
+export interface FallbackProps extends ErrorInfo {
+  /** Copy error details to clipboard */
+  copyToClipboard: () => Promise<void>;
+}
+
+/**
+ * Button configuration for default error UI
+ */
+export interface ErrorButtonConfig {
+  /** Button label text */
+  label: string;
+  /** Click handler */
+  onClick: (errorInfo: ErrorInfo) => void;
+  /** Optional button style override */
+  style?: React.CSSProperties;
+  /** Optional className */
+  className?: string;
+}
+
+/**
+ * Props for ErrorBoundary component
+ */
+export interface ErrorBoundaryProps {
+  children: ReactNode;
+  
+  /**
+   * Custom fallback component to render when error occurs.
+   * Takes full control of error UI.
+   */
+  fallback?: React.ComponentType<FallbackProps>;
+  
+  /**
+   * Fallback element (simpler alternative to fallback component)
+   */
+  fallbackElement?: ReactNode;
+  
+  /**
+   * Custom title for default error page
+   * @default "Something went wrong"
+   */
+  title?: string;
+  
+  /**
+   * Custom subtitle/description for default error page
+   * @default "An unexpected error occurred"
+   */
+  subtitle?: string;
+  
+  /**
+   * Whether to show error details in default UI
+   * @default true
+   */
+  showErrorDetails?: boolean;
+  
+  /**
+   * Whether to show the "Copy Error" button in default UI
+   * @default true
+   */
+  showCopyButton?: boolean;
+  
+  /**
+   * Whether to show the "Try Again" button in default UI
+   * @default true
+   */
+  showRetryButton?: boolean;
+  
+  /**
+   * Custom retry button label
+   * @default "Try Again"
+   */
+  retryButtonLabel?: string;
+  
+  /**
+   * Custom copy button label
+   * @default "Copy Error Details"
+   */
+  copyButtonLabel?: string;
+  
+  /**
+   * Additional custom buttons to show in default UI
+   */
+  customButtons?: ErrorButtonConfig[];
+  
+  /**
+   * Custom styles for the default error container
+   */
+  containerStyle?: React.CSSProperties;
+  
+  /**
+   * Custom styles for the error details section
+   */
+  errorDetailsStyle?: React.CSSProperties;
+  
+  /**
+   * Callback when an error is caught
+   */
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+  
+  /**
+   * Callback when reset/retry is triggered
+   */
+  onReset?: () => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: React.ErrorInfo | null;
+  copied: boolean;
+}
+
+/**
+ * Default styles for the error boundary UI
+ */
+const defaultStyles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '100vh',
+    padding: '24px',
+    backgroundColor: '#1e1e1e',
+    color: '#e5e7eb',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  },
+  content: {
+    maxWidth: '600px',
+    width: '100%',
+    textAlign: 'center' as const,
+  },
+  icon: {
+    fontSize: '48px',
+    marginBottom: '16px',
+  },
+  title: {
+    fontSize: '24px',
+    fontWeight: 600,
+    marginBottom: '8px',
+    color: '#f87171',
+  },
+  subtitle: {
+    fontSize: '16px',
+    color: '#9ca3af',
+    marginBottom: '24px',
+  },
+  errorBox: {
+    backgroundColor: '#2d2d2d',
+    border: '1px solid #404040',
+    borderRadius: '8px',
+    padding: '16px',
+    marginBottom: '24px',
+    textAlign: 'left' as const,
+    maxHeight: '200px',
+    overflow: 'auto',
+  },
+  errorText: {
+    fontFamily: 'monospace',
+    fontSize: '12px',
+    color: '#f87171',
+    whiteSpace: 'pre-wrap' as const,
+    wordBreak: 'break-word' as const,
+    margin: 0,
+  },
+  buttonContainer: {
+    display: 'flex',
+    gap: '12px',
+    justifyContent: 'center',
+    flexWrap: 'wrap' as const,
+  },
+  button: {
+    padding: '10px 20px',
+    borderRadius: '6px',
+    border: 'none',
+    fontSize: '14px',
+    fontWeight: 500,
+    cursor: 'pointer',
+    transition: 'all 0.2s',
+  },
+  primaryButton: {
+    backgroundColor: '#3b82f6',
+    color: 'white',
+  },
+  secondaryButton: {
+    backgroundColor: '#404040',
+    color: '#e5e7eb',
+  },
+  successButton: {
+    backgroundColor: '#22c55e',
+    color: 'white',
+  },
+};
+
+/**
+ * ErrorBoundary component with customizable error UI
+ * 
+ * @example Basic usage
+ * ```tsx
+ * <ErrorBoundary>
+ *   <App />
+ * </ErrorBoundary>
+ * ```
+ * 
+ * @example Custom title and buttons
+ * ```tsx
+ * <ErrorBoundary
+ *   title="Oops! Something broke"
+ *   subtitle="Please try again or contact support"
+ *   showCopyButton={true}
+ *   customButtons={[
+ *     { label: "Go Home", onClick: () => window.location.href = "/" }
+ *   ]}
+ * >
+ *   <App />
+ * </ErrorBoundary>
+ * ```
+ * 
+ * @example Fully custom fallback
+ * ```tsx
+ * <ErrorBoundary
+ *   fallback={({ error, reset, copyToClipboard }) => (
+ *     <div>
+ *       <h1>Error: {error.message}</h1>
+ *       <button onClick={reset}>Retry</button>
+ *       <button onClick={copyToClipboard}>Copy</button>
+ *     </div>
+ *   )}
+ * >
+ *   <App />
+ * </ErrorBoundary>
+ * ```
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      copied: false,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    this.setState({ errorInfo });
+    this.props.onError?.(error, errorInfo);
+  }
+
+  private formatError(): string {
+    const { error, errorInfo } = this.state;
+    if (!error) return '';
+
+    const lines: string[] = [
+      '='.repeat(50),
+      'ERROR REPORT',
+      '='.repeat(50),
+      '',
+      `Error: ${error.name}`,
+      `Message: ${error.message}`,
+      '',
+      'Stack Trace:',
+      error.stack || 'No stack trace available',
+    ];
+
+    if (errorInfo?.componentStack) {
+      lines.push('', 'Component Stack:', errorInfo.componentStack);
+    }
+
+    lines.push('', `Timestamp: ${new Date().toISOString()}`);
+    lines.push(`User Agent: ${typeof navigator !== 'undefined' ? navigator.userAgent : 'N/A'}`);
+
+    return lines.join('\n');
+  }
+
+  private handleReset = () => {
+    this.props.onReset?.();
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      copied: false,
+    });
+  };
+
+  private handleCopyToClipboard = async () => {
+    const text = this.formatError();
+    try {
+      await navigator.clipboard.writeText(text);
+      this.setState({ copied: true });
+      setTimeout(() => this.setState({ copied: false }), 2000);
+    } catch (err) {
+      console.error('Failed to copy error details:', err);
+    }
+  };
+
+  private getErrorInfo(): ErrorInfo {
+    return {
+      error: this.state.error!,
+      errorInfo: this.state.errorInfo!,
+      formattedError: this.formatError(),
+      reset: this.handleReset,
+    };
+  }
+
+  private renderDefaultFallback() {
+    const {
+      title = 'Something went wrong',
+      subtitle = 'An unexpected error occurred',
+      showErrorDetails = true,
+      showCopyButton = true,
+      showRetryButton = true,
+      retryButtonLabel = 'Try Again',
+      copyButtonLabel = 'Copy Error Details',
+      customButtons = [],
+      containerStyle,
+      errorDetailsStyle,
+    } = this.props;
+
+    const { error, copied } = this.state;
+    const errorInfo = this.getErrorInfo();
+
+    return (
+      <div style={{ ...defaultStyles.container, ...containerStyle }}>
+        <div style={defaultStyles.content}>
+          <div style={defaultStyles.icon}>⚠️</div>
+          <h1 style={defaultStyles.title}>{title}</h1>
+          <p style={defaultStyles.subtitle}>{subtitle}</p>
+
+          {showErrorDetails && error && (
+            <div style={{ ...defaultStyles.errorBox, ...errorDetailsStyle }}>
+              <pre style={defaultStyles.errorText}>
+                {error.name}: {error.message}
+                {error.stack && `\n\n${error.stack.split('\n').slice(1, 5).join('\n')}`}
+              </pre>
+            </div>
+          )}
+
+          <div style={defaultStyles.buttonContainer}>
+            {showRetryButton && (
+              <button
+                onClick={this.handleReset}
+                style={{ ...defaultStyles.button, ...defaultStyles.primaryButton }}
+              >
+                {retryButtonLabel}
+              </button>
+            )}
+
+            {showCopyButton && (
+              <button
+                onClick={this.handleCopyToClipboard}
+                style={{
+                  ...defaultStyles.button,
+                  ...(copied ? defaultStyles.successButton : defaultStyles.secondaryButton),
+                }}
+              >
+                {copied ? '✓ Copied!' : copyButtonLabel}
+              </button>
+            )}
+
+            {customButtons.map((btn, index) => (
+              <button
+                key={index}
+                onClick={() => btn.onClick(errorInfo)}
+                style={{ ...defaultStyles.button, ...defaultStyles.secondaryButton, ...btn.style }}
+                className={btn.className}
+              >
+                {btn.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { hasError } = this.state;
+    const { children, fallback: FallbackComponent, fallbackElement } = this.props;
+
+    if (hasError) {
+      // Custom fallback component takes priority
+      if (FallbackComponent) {
+        const errorInfo = this.getErrorInfo();
+        return (
+          <FallbackComponent
+            {...errorInfo}
+            copyToClipboard={this.handleCopyToClipboard}
+          />
+        );
+      }
+
+      // Simple fallback element
+      if (fallbackElement) {
+        return <>{fallbackElement}</>;
+      }
+
+      // Default error UI
+      return this.renderDefaultFallback();
+    }
+
+    return children;
+  }
+}
+
+export default ErrorBoundary;

package/src/components/Highlighter.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
-import { useAiAnnotation } from "../store";
+import { useAgentAnnotation } from "../store";
 import { AnnotationInput } from "./AnnotationInput";
 import { captureScreenshot } from "../utils/screenshot";
 import { getComponentDetails } from "../utils/fiber";
 
 export function Highlighter() {
-  const { state, dispatch } = useAiAnnotation();
+  const { state, dispatch } = useAgentAnnotation();
   const { hoveredElement, mode, hoveredComponentInfo } = state;
 
   const [rect, setRect] = useState<DOMRect | null>(null);

package/src/components/Toolbar.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { useAiAnnotation } from '../store';
+import { useAgentAnnotation } 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 { state, dispatch } = useAgentAnnotation();
   const [showCopied, setShowCopied] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -40,7 +40,8 @@ export function Toolbar() {
 
       // Section header
       lines.push(`${'='.repeat(50)}`);
-      lines.push(`Annotation ${index + 1}: ${a.componentName}`);
+      lines.push(`Annotation ${index + 1}`);
+			lines.push(`Component: ${a.componentName}`);
       lines.push(`${'='.repeat(50)}`);
       lines.push('');
 

package/src/components/native/AnnotationInput.tsx

@@ -10,7 +10,7 @@ import {
   KeyboardAvoidingView,
   Platform,
 } from 'react-native';
-import { useAiAnnotation } from '../../store';
+import { useAgentAnnotation } from '../../store';
 
 interface AnnotationInputProps {
   onClose: () => void;
@@ -18,7 +18,7 @@ interface AnnotationInputProps {
 }
 
 export function AnnotationInput({ onClose, componentName }: AnnotationInputProps) {
-  const { dispatch } = useAiAnnotation();
+  const { dispatch } = useAgentAnnotation();
   const [note, setNote] = useState('');
   const [fadeAnim] = useState(new Animated.Value(0));
   const [scaleAnim] = useState(new Animated.Value(0.95));

package/src/components/native/AnnotationList.tsx

@@ -7,10 +7,10 @@ import {
   ScrollView,
   StyleSheet,
 } from 'react-native';
-import { useAiAnnotation } from '../../store';
+import { useAgentAnnotation } from '../../store';
 
 export function AnnotationList() {
-  const { state, dispatch } = useAiAnnotation();
+  const { state, dispatch } = useAgentAnnotation();
 
   if (!state.showList) return null;
 

package/src/components/native/Highlighter.tsx

@@ -7,7 +7,7 @@ import {
   Dimensions,
   GestureResponderEvent,
 } from 'react-native';
-import { useAiAnnotation } from '../../store';
+import { useAgentAnnotation } from '../../store';
 import { AnnotationInput } from './AnnotationInput';
 
 interface HighlightRect {
@@ -29,7 +29,7 @@ interface HighlighterProps {
 }
 
 export function Highlighter({ onInspect }: HighlighterProps) {
-  const { state, dispatch } = useAiAnnotation();
+  const { state, dispatch } = useAgentAnnotation();
   const { mode } = state;
 
   const [highlightRect, setHighlightRect] = useState<HighlightRect | null>(null);

package/src/components/native/Toolbar.tsx

@@ -6,7 +6,7 @@ import {
   StyleSheet,
   Platform,
 } from 'react-native';
-import { useAiAnnotation } from '../../store';
+import { useAgentAnnotation } from '../../store';
 import { Draggable } from './Draggable';
 import { Highlighter } from './Highlighter';
 import { AnnotationList } from './AnnotationList';
@@ -29,7 +29,7 @@ const copyToClipboard = async (text: string) => {
 };
 
 export function Toolbar() {
-  const { state, dispatch } = useAiAnnotation();
+  const { state, dispatch } = useAgentAnnotation();
   const [showCopied, setShowCopied] = useState(false);
 
   const handleCopy = async () => {

package/src/components/web/AnnotationInput.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { useAiAnnotation } from '../../store';
+import { useAgentAnnotation } from '../../store';
 import { X } from 'lucide-react';
 
 export function AnnotationInput({ onClose, componentName }: { onClose: () => void; componentName: string }) {
-  const { dispatch } = useAiAnnotation();
+  const { dispatch } = useAgentAnnotation();
   const [note, setNote] = useState('');
   const [isVisible, setIsVisible] = useState(false);
   const [isClosing, setIsClosing] = useState(false);

package/src/components/web/AnnotationList.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { useAiAnnotation } from '../../store';
+import { useAgentAnnotation } from '../../store';
 import { X, Trash2, Trash } from 'lucide-react';
 
 export function AnnotationList() {
-  const { state, dispatch } = useAiAnnotation();
+  const { state, dispatch } = useAgentAnnotation();
 
   if (!state.showList) return null;
 

package/src/components/web/Highlighter.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
-import { useAiAnnotation } from "../../store";
+import { useAgentAnnotation } 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 { state, dispatch } = useAgentAnnotation();
   const { hoveredElement, mode, hoveredComponentInfo } = state;
   
   const [rect, setRect] = useState<DOMRect | null>(null);

package/src/components/web/Toolbar.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { useAiAnnotation } from '../../store';
+import { useAgentAnnotation } 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 { state, dispatch } = useAgentAnnotation();
   const [showCopied, setShowCopied] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);

package/src/extension.tsx

@@ -4,7 +4,7 @@
  */
 
 // Re-export web components directly
-export { AiAnnotationProvider, useAiAnnotation } from './index.web';
+export { AgentAnnotationProvider, useAgentAnnotation } from './index.web';
 export type { Annotation, Mode, HoveredElement, HoveredComponentInfo } from './index.web';
 
 // Export web components

package/src/index.native.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import { View } from 'react-native';
-import { AiAnnotationProvider as Provider } from './store';
+import { AgentAnnotationProvider as Provider } from './store';
 import { Toolbar } from './components/native/Toolbar';
 
-export interface AiAnnotationProviderProps {
+export interface AgentAnnotationProviderProps {
   children: React.ReactNode;
 }
 
 /**
- * React Native AI Annotation Provider
+ * React Native Agent Annotation Provider
  * Wraps your app to provide annotation functionality
  */
-export function AiAnnotationProvider({ children }: AiAnnotationProviderProps) {
+export function AgentAnnotationProvider({ children }: AgentAnnotationProviderProps) {
   return (
     <Provider>
       <View style={{ flex: 1 }}>