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

package/README.md

@@ -1,4 +1,4 @@
-# react-ai-anotation
+# @np-dev/ui-ai-anotation
 
 AI-powered annotation toolkit for React and React Native apps. Enables component inspection, annotation, and screenshot capture for AI-assisted development workflows.
 
@@ -15,13 +15,13 @@ AI-powered annotation toolkit for React and React Native apps. Enables component
 
 ```bash
 # Using npm
-npm install react-ai-anotation
+npm install @np-dev/ui-ai-anotation
 
 # Using yarn
-yarn add react-ai-anotation
+yarn add @np-dev/ui-ai-anotation
 
 # Using bun
-bun add react-ai-anotation
+bun add @np-dev/ui-ai-anotation
 ```
 
 ### Additional dependencies
@@ -47,13 +47,13 @@ npm install expo-media-library
 ### Web (React)
 
 ```tsx
-import { AiAnnotationProvider } from 'react-ai-anotation';
+import { AgentAnnotationProvider } from '@np-dev/ui-ai-anotation';
 
 function App() {
   return (
-    <AiAnnotationProvider>
+    <AgentAnnotationProvider>
       <YourApp />
-    </AiAnnotationProvider>
+    </AgentAnnotationProvider>
   );
 }
 ```
@@ -61,15 +61,15 @@ function App() {
 ### React Native
 
 ```tsx
-import { AiAnnotationProvider } from 'react-ai-anotation/native';
+import { AgentAnnotationProvider } from '@np-dev/ui-ai-anotation/native';
 // or
-import { AiAnnotationProvider } from 'react-ai-anotation';
+import { AgentAnnotationProvider } from '@np-dev/ui-ai-anotation';
 
 function App() {
   return (
-    <AiAnnotationProvider>
+    <AgentAnnotationProvider>
       <YourApp />
-    </AiAnnotationProvider>
+    </AgentAnnotationProvider>
   );
 }
 ```
@@ -78,14 +78,14 @@ function App() {
 
 ### Components
 
-#### `AiAnnotationProvider`
+#### `AgentAnnotationProvider`
 
 Wraps your app to provide annotation functionality.
 
 ```tsx
-<AiAnnotationProvider>
+<AgentAnnotationProvider>
   {children}
-</AiAnnotationProvider>
+</AgentAnnotationProvider>
 ```
 
 #### `Toolbar`
@@ -106,14 +106,99 @@ interface HighlighterProps {
 }
 ```
 
+#### `ErrorBoundary`
+
+A customizable error boundary component with copy-to-clipboard functionality for error reports.
+
+```tsx
+import { ErrorBoundary } from '@np-dev/ui-ai-anotation';
+
+<ErrorBoundary>
+  <YourApp />
+</ErrorBoundary>
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | - | Child components to wrap |
+| `fallback` | `React.ComponentType<FallbackProps>` | - | Fully custom fallback component |
+| `fallbackElement` | `ReactNode` | - | Simple static fallback element |
+| `title` | `string` | `"Something went wrong"` | Error page title |
+| `subtitle` | `string` | `"An unexpected error..."` | Error description |
+| `showErrorDetails` | `boolean` | `true` | Show/hide error stack trace |
+| `showCopyButton` | `boolean` | `true` | Show/hide copy error button |
+| `showRetryButton` | `boolean` | `true` | Show/hide retry button |
+| `retryButtonLabel` | `string` | `"Try Again"` | Retry button text |
+| `copyButtonLabel` | `string` | `"Copy Error Details"` | Copy button text |
+| `customButtons` | `ErrorButtonConfig[]` | - | Additional custom buttons |
+| `containerStyle` | `CSSProperties` | - | Override container styles |
+| `errorDetailsStyle` | `CSSProperties` | - | Override error details styles |
+| `onError` | `(error, errorInfo) => void` | - | Callback when error occurs |
+| `onReset` | `() => void` | - | Callback when reset/retry |
+
+**Custom Fallback Example:**
+
+```tsx
+<ErrorBoundary
+  fallback={({ error, errorInfo, reset, copyToClipboard, copied }) => (
+    <div>
+      <h1>Oops! {error.message}</h1>
+      <button onClick={reset}>Retry</button>
+      <button onClick={copyToClipboard}>
+        {copied ? 'Copied!' : 'Copy Error'}
+      </button>
+    </div>
+  )}
+>
+  <App />
+</ErrorBoundary>
+```
+
+**Custom Buttons Example:**
+
+```tsx
+<ErrorBoundary
+  title="Application Error"
+  subtitle="Please try again or contact support"
+  customButtons={[
+    {
+      label: 'Go Home',
+      onClick: () => window.location.href = '/',
+      style: { backgroundColor: '#4CAF50' }
+    },
+    {
+      label: 'Contact Support',
+      onClick: () => window.open('mailto:support@example.com')
+    }
+  ]}
+>
+  <App />
+</ErrorBoundary>
+```
+
+**Minimal Error Page:**
+
+```tsx
+<ErrorBoundary
+  showErrorDetails={false}
+  showCopyButton={false}
+  title="Oops!"
+  subtitle="Something went wrong. Please refresh the page."
+>
+  <App />
+</ErrorBoundary>
+```
+
 ### Hooks
 
-#### `useAiAnnotation()`
+#### `useAgentAnnotation()`
 
 Access annotation state and dispatch actions.
 
 ```tsx
-const { state, dispatch } = useAiAnnotation();
+const { state, dispatch } = useAgentAnnotation();
 
 // State shape
 interface State {
@@ -142,7 +227,7 @@ Capture a screenshot of an element/view.
 
 **Web:**
 ```tsx
-import { captureScreenshot } from 'react-ai-anotation';
+import { captureScreenshot } from '@np-dev/ui-ai-anotation';
 
 const result = await captureScreenshot(htmlElement, {
   scale: 2,
@@ -153,7 +238,7 @@ const result = await captureScreenshot(htmlElement, {
 
 **Native:**
 ```tsx
-import { captureScreenshot } from 'react-ai-anotation/native';
+import { captureScreenshot } from '@np-dev/ui-ai-anotation/native';
 
 const viewRef = useRef<View>(null);
 
@@ -168,7 +253,7 @@ const result = await captureScreenshot(viewRef, {
 #### Platform Detection
 
 ```tsx
-import { isWeb, isNative, getPlatform, isTauriEnv } from 'react-ai-anotation';
+import { isWeb, isNative, getPlatform, isTauriEnv } from '@np-dev/ui-ai-anotation';
 
 if (isWeb) {
   // Web-specific code
@@ -204,7 +289,7 @@ const platform = getPlatform(); // 'web' | 'ios' | 'android' | 'native'
 The package includes special handling for Tauri apps (web apps running in Tauri):
 
 ```tsx
-import { isTauriEnv, captureScreenshot } from 'react-ai-anotation';
+import { isTauriEnv, captureScreenshot } from '@np-dev/ui-ai-anotation';
 
 if (isTauriEnv()) {
   // Uses @tauri-apps/plugin-clipboard-manager for clipboard
@@ -218,7 +303,7 @@ Use the annotation toolkit on any website as a Chrome extension!
 ### Build the Extension
 
 ```bash
-cd packages/react-ai-anotation
+cd packages/ui-ai-anotation
 bun install
 bun run build:extension
 ```

package/dist/cjs/index.cjs

@@ -5,6 +5,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -26,14 +27,16 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
-  AiAnnotationProvider: () => AiAnnotationProvider2,
+  AgentAnnotationProvider: () => AgentAnnotationProvider2,
   AnnotationInput: () => AnnotationInput,
   AnnotationList: () => AnnotationList,
   Draggable: () => Draggable,
+  ErrorBoundary: () => ErrorBoundary,
   Highlighter: () => Highlighter,
   Toolbar: () => Toolbar,
   captureScreenshot: () => captureScreenshot,
@@ -44,7 +47,7 @@ __export(index_exports, {
   isNative: () => isNative,
   isTauriEnv: () => isTauriEnv2,
   isWeb: () => isWeb,
-  useAiAnnotation: () => useAiAnnotation
+  useAgentAnnotation: () => useAgentAnnotation
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -93,14 +96,14 @@ function reducer(state, action) {
       return state;
   }
 }
-function AiAnnotationProvider({ children }) {
+function AgentAnnotationProvider({ children }) {
   const [state, dispatch] = (0, import_react.useReducer)(reducer, initialState);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnnotationContext.Provider, { value: { state, dispatch }, children });
 }
-function useAiAnnotation() {
+function useAgentAnnotation() {
   const context = (0, import_react.useContext)(AnnotationContext);
   if (!context) {
-    throw new Error("useAiAnnotation must be used within an AiAnnotationProvider");
+    throw new Error("useAgentAnnotation must be used within an AgentAnnotationProvider");
   }
   return context;
 }
@@ -220,7 +223,7 @@ function formatComponentDetails(details) {
   return lines.join("\n");
 }
 function AnnotationInput({ onClose, componentName, componentDetails }) {
-  const { dispatch } = useAiAnnotation();
+  const { dispatch } = useAgentAnnotation();
   const [note, setNote] = (0, import_react3.useState)("");
   const [includeDetails, setIncludeDetails] = (0, import_react3.useState)(true);
   const [isVisible, setIsVisible] = (0, import_react3.useState)(false);
@@ -687,7 +690,7 @@ function getComponentDetails(element, options) {
 // src/components/Highlighter.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function Highlighter() {
-  const { state, dispatch } = useAiAnnotation();
+  const { state, dispatch } = useAgentAnnotation();
   const { hoveredElement, mode, hoveredComponentInfo } = state;
   const [rect, setRect] = (0, import_react4.useState)(null);
   const [showInput, setShowInput] = (0, import_react4.useState)(false);
@@ -1106,7 +1109,7 @@ var import_react5 = require("react");
 var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function AnnotationList() {
-  const { state, dispatch } = useAiAnnotation();
+  const { state, dispatch } = useAgentAnnotation();
   const [expandedId, setExpandedId] = (0, import_react5.useState)(null);
   if (!state.showList) return null;
   const toggleExpand = (id) => {
@@ -1336,7 +1339,7 @@ function AnnotationList() {
 // src/components/Toolbar.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function Toolbar() {
-  const { state, dispatch } = useAiAnnotation();
+  const { state, dispatch } = useAgentAnnotation();
   const [showCopied, setShowCopied] = (0, import_react6.useState)(false);
   const [isAnimating, setIsAnimating] = (0, import_react6.useState)(false);
   const contentRef = (0, import_react6.useRef)(null);
@@ -1360,7 +1363,8 @@ function Toolbar() {
     const sections = state.annotations.map((a, index) => {
       const lines = [];
       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("");
       lines.push("## Instruction");
@@ -1521,6 +1525,235 @@ function Toolbar() {
   ] });
 }
 
+// src/components/ErrorBoundary.tsx
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var defaultStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    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"
+  },
+  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",
+    maxHeight: "200px",
+    overflow: "auto"
+  },
+  errorText: {
+    fontFamily: "monospace",
+    fontSize: "12px",
+    color: "#f87171",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    margin: 0
+  },
+  buttonContainer: {
+    display: "flex",
+    gap: "12px",
+    justifyContent: "center",
+    flexWrap: "wrap"
+  },
+  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"
+  }
+};
+var ErrorBoundary = class extends import_react7.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "handleReset", () => {
+      this.props.onReset?.();
+      this.setState({
+        hasError: false,
+        error: null,
+        errorInfo: null,
+        copied: false
+      });
+    });
+    __publicField(this, "handleCopyToClipboard", async () => {
+      const text = this.formatError();
+      try {
+        await navigator.clipboard.writeText(text);
+        this.setState({ copied: true });
+        setTimeout(() => this.setState({ copied: false }), 2e3);
+      } catch (err) {
+        console.error("Failed to copy error details:", err);
+      }
+    });
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      copied: false
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ errorInfo });
+    this.props.onError?.(error, errorInfo);
+  }
+  formatError() {
+    const { error, errorInfo } = this.state;
+    if (!error) return "";
+    const lines = [
+      "=".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: ${(/* @__PURE__ */ new Date()).toISOString()}`);
+    lines.push(`User Agent: ${typeof navigator !== "undefined" ? navigator.userAgent : "N/A"}`);
+    return lines.join("\n");
+  }
+  getErrorInfo() {
+    return {
+      error: this.state.error,
+      errorInfo: this.state.errorInfo,
+      formattedError: this.formatError(),
+      reset: this.handleReset
+    };
+  }
+  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 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { ...defaultStyles.container, ...containerStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: defaultStyles.content, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: defaultStyles.icon, children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { style: defaultStyles.title, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { style: defaultStyles.subtitle, children: subtitle }),
+      showErrorDetails && error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { ...defaultStyles.errorBox, ...errorDetailsStyle }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("pre", { style: defaultStyles.errorText, children: [
+        error.name,
+        ": ",
+        error.message,
+        error.stack && `
+
+${error.stack.split("\n").slice(1, 5).join("\n")}`
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: defaultStyles.buttonContainer, children: [
+        showRetryButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            onClick: this.handleReset,
+            style: { ...defaultStyles.button, ...defaultStyles.primaryButton },
+            children: retryButtonLabel
+          }
+        ),
+        showCopyButton && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            onClick: this.handleCopyToClipboard,
+            style: {
+              ...defaultStyles.button,
+              ...copied ? defaultStyles.successButton : defaultStyles.secondaryButton
+            },
+            children: copied ? "\u2713 Copied!" : copyButtonLabel
+          }
+        ),
+        customButtons.map((btn, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            onClick: () => btn.onClick(errorInfo),
+            style: { ...defaultStyles.button, ...defaultStyles.secondaryButton, ...btn.style },
+            className: btn.className,
+            children: btn.label
+          },
+          index
+        ))
+      ] })
+    ] }) });
+  }
+  render() {
+    const { hasError } = this.state;
+    const { children, fallback: FallbackComponent, fallbackElement } = this.props;
+    if (hasError) {
+      if (FallbackComponent) {
+        const errorInfo = this.getErrorInfo();
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          FallbackComponent,
+          {
+            ...errorInfo,
+            copyToClipboard: this.handleCopyToClipboard
+          }
+        );
+      }
+      if (fallbackElement) {
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: fallbackElement });
+      }
+      return this.renderDefaultFallback();
+    }
+    return children;
+  }
+};
+
 // src/utils/platform.ts
 var isWeb = typeof document !== "undefined" && typeof window !== "undefined";
 var isNative = !isWeb && typeof global !== "undefined";
@@ -1540,11 +1773,11 @@ function isTauriEnv2() {
 }
 
 // src/index.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function AiAnnotationProvider2({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(AiAnnotationProvider, { children: [
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function AgentAnnotationProvider2({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(AgentAnnotationProvider, { children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Toolbar, {})
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Toolbar, {})
   ] });
 }
 //# sourceMappingURL=index.cjs.map