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

package/dist/esm/index.js

@@ -1,9 +1,12 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {
   if (typeof require !== "undefined") return require.apply(this, arguments);
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/store.tsx
 import { createContext, useContext, useReducer } from "react";
@@ -50,14 +53,14 @@ function reducer(state, action) {
       return state;
   }
 }
-function AiAnnotationProvider({ children }) {
+function AgentAnnotationProvider({ children }) {
   const [state, dispatch] = useReducer(reducer, initialState);
   return /* @__PURE__ */ jsx(AnnotationContext.Provider, { value: { state, dispatch }, children });
 }
-function useAiAnnotation() {
+function useAgentAnnotation() {
   const context = 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;
 }
@@ -177,7 +180,7 @@ function formatComponentDetails(details) {
   return lines.join("\n");
 }
 function AnnotationInput({ onClose, componentName, componentDetails }) {
-  const { dispatch } = useAiAnnotation();
+  const { dispatch } = useAgentAnnotation();
   const [note, setNote] = useState2("");
   const [includeDetails, setIncludeDetails] = useState2(true);
   const [isVisible, setIsVisible] = useState2(false);
@@ -644,7 +647,7 @@ function getComponentDetails(element, options) {
 // src/components/Highlighter.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function Highlighter() {
-  const { state, dispatch } = useAiAnnotation();
+  const { state, dispatch } = useAgentAnnotation();
   const { hoveredElement, mode, hoveredComponentInfo } = state;
   const [rect, setRect] = useState3(null);
   const [showInput, setShowInput] = useState3(false);
@@ -1063,7 +1066,7 @@ import { useState as useState4 } from "react";
 import { X as X2, Trash2, Trash, ChevronDown, ChevronRight } from "lucide-react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function AnnotationList() {
-  const { state, dispatch } = useAiAnnotation();
+  const { state, dispatch } = useAgentAnnotation();
   const [expandedId, setExpandedId] = useState4(null);
   if (!state.showList) return null;
   const toggleExpand = (id) => {
@@ -1293,7 +1296,7 @@ function AnnotationList() {
 // src/components/Toolbar.tsx
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Toolbar() {
-  const { state, dispatch } = useAiAnnotation();
+  const { state, dispatch } = useAgentAnnotation();
   const [showCopied, setShowCopied] = useState5(false);
   const [isAnimating, setIsAnimating] = useState5(false);
   const contentRef = useRef2(null);
@@ -1317,7 +1320,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");
@@ -1478,6 +1482,235 @@ function Toolbar() {
   ] });
 }
 
+// src/components/ErrorBoundary.tsx
+import { Component } from "react";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "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 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__ */ jsx7("div", { style: { ...defaultStyles.container, ...containerStyle }, children: /* @__PURE__ */ jsxs5("div", { style: defaultStyles.content, children: [
+      /* @__PURE__ */ jsx7("div", { style: defaultStyles.icon, children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ jsx7("h1", { style: defaultStyles.title, children: title }),
+      /* @__PURE__ */ jsx7("p", { style: defaultStyles.subtitle, children: subtitle }),
+      showErrorDetails && error && /* @__PURE__ */ jsx7("div", { style: { ...defaultStyles.errorBox, ...errorDetailsStyle }, children: /* @__PURE__ */ jsxs5("pre", { style: defaultStyles.errorText, children: [
+        error.name,
+        ": ",
+        error.message,
+        error.stack && `
+
+${error.stack.split("\n").slice(1, 5).join("\n")}`
+      ] }) }),
+      /* @__PURE__ */ jsxs5("div", { style: defaultStyles.buttonContainer, children: [
+        showRetryButton && /* @__PURE__ */ jsx7(
+          "button",
+          {
+            onClick: this.handleReset,
+            style: { ...defaultStyles.button, ...defaultStyles.primaryButton },
+            children: retryButtonLabel
+          }
+        ),
+        showCopyButton && /* @__PURE__ */ jsx7(
+          "button",
+          {
+            onClick: this.handleCopyToClipboard,
+            style: {
+              ...defaultStyles.button,
+              ...copied ? defaultStyles.successButton : defaultStyles.secondaryButton
+            },
+            children: copied ? "\u2713 Copied!" : copyButtonLabel
+          }
+        ),
+        customButtons.map((btn, index) => /* @__PURE__ */ jsx7(
+          "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__ */ jsx7(
+          FallbackComponent,
+          {
+            ...errorInfo,
+            copyToClipboard: this.handleCopyToClipboard
+          }
+        );
+      }
+      if (fallbackElement) {
+        return /* @__PURE__ */ jsx7(Fragment3, { 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";
@@ -1497,18 +1730,19 @@ function isTauriEnv2() {
 }
 
 // src/index.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-function AiAnnotationProvider2({ children }) {
-  return /* @__PURE__ */ jsxs5(AiAnnotationProvider, { children: [
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function AgentAnnotationProvider2({ children }) {
+  return /* @__PURE__ */ jsxs6(AgentAnnotationProvider, { children: [
     children,
-    /* @__PURE__ */ jsx7(Toolbar, {})
+    /* @__PURE__ */ jsx8(Toolbar, {})
   ] });
 }
 export {
-  AiAnnotationProvider2 as AiAnnotationProvider,
+  AgentAnnotationProvider2 as AgentAnnotationProvider,
   AnnotationInput,
   AnnotationList,
   Draggable,
+  ErrorBoundary,
   Highlighter,
   Toolbar,
   captureScreenshot,
@@ -1519,6 +1753,6 @@ export {
   isNative,
   isTauriEnv2 as isTauriEnv,
   isWeb,
-  useAiAnnotation
+  useAgentAnnotation
 };
 //# sourceMappingURL=index.js.map