agent-ui-annotation 0.4.1 → 0.6.0

package/README.md

@@ -18,7 +18,7 @@ When working with AI coding agents, communicating which visual element needs mod
 
 1. Click any element on a web page
 2. Add feedback or notes
-3. Export structured markdown with element identifiers, CSS selectors, and context
+3. Export structured markdown with element identifiers, CSS selectors, framework component paths, and context
 
 The exported markdown gives AI agents the precise information needed to locate elements in code.
 
@@ -46,6 +46,13 @@ import { createAnnotation } from 'agent-ui-annotation';
 
 const annotation = createAnnotation({
   theme: 'auto',
+  // Add custom context to every annotation
+  onBeforeAnnotationCreate: (data) => ({
+    context: {
+      route: window.location.pathname,
+      timestamp: new Date().toISOString(),
+    },
+  }),
   onAnnotationCreate: (annotation) => console.log('Created:', annotation),
   onCopy: (markdown) => console.log('Copied:', markdown),
 });
@@ -74,6 +81,9 @@ function App() {
     <AgentUIAnnotation
       theme="auto"
       outputLevel="standard"
+      onBeforeAnnotationCreate={(data) => ({
+        context: { route: window.location.pathname },
+      })}
       onAnnotationCreate={(annotation) => console.log('Created:', annotation)}
       onCopy={(markdown) => console.log('Copied:', markdown)}
     />
@@ -86,10 +96,14 @@ function App() {
 ```vue
 <script setup lang="ts">
 import { AgentUIAnnotation, useAgentUIAnnotation } from 'agent-ui-annotation/vue';
-import type { Annotation } from 'agent-ui-annotation/vue';
+import type { Annotation, BeforeAnnotationCreateResult } from 'agent-ui-annotation/vue';
 
 const { ref: annotationRef, activate, copyOutput } = useAgentUIAnnotation();
 
+function handleBeforeCreate(): BeforeAnnotationCreateResult {
+  return { context: { route: window.location.pathname } };
+}
+
 function handleCreate(annotation: Annotation) {
   console.log('Created:', annotation);
 }
@@ -104,6 +118,7 @@ function handleCopy(markdown: string) {
     ref="annotationRef"
     theme="auto"
     output-level="standard"
+    :on-before-annotation-create="handleBeforeCreate"
     @annotation-create="handleCreate"
     @copy="handleCopy"
   />
@@ -117,10 +132,13 @@ function handleCopy(markdown: string) {
 ```svelte
 <script lang="ts">
   import { AgentUIAnnotation } from 'agent-ui-annotation/svelte';
-  import type { Annotation } from 'agent-ui-annotation/svelte';
+  import type { Annotation, BeforeAnnotationCreateResult } from 'agent-ui-annotation/svelte';
 
   let annotation: AgentUIAnnotation;
 
+  const onBeforeAnnotationCreate = (): BeforeAnnotationCreateResult => ({
+    context: { route: window.location.pathname },
+  });
   const onAnnotationCreate = (a: Annotation) => console.log('Created:', a);
   const onCopy = (content: string) => console.log('Copied:', content);
 </script>
@@ -129,6 +147,7 @@ function handleCopy(markdown: string) {
   bind:this={annotation}
   theme="auto"
   outputLevel="standard"
+  {onBeforeAnnotationCreate}
   {onAnnotationCreate}
   {onCopy}
 />
@@ -156,9 +175,16 @@ export class App {
 
   constructor() {
     afterNextRender(() => {
-      this.annotationRef()?.nativeElement.addEventListener('annotation:create', (e: Event) => {
-        console.log('Created:', (e as CustomEvent).detail.annotation);
-      });
+      const element = this.annotationRef()?.nativeElement;
+      if (element) {
+        // Add custom context to annotations
+        element.setBeforeCreateHook((data) => ({
+          context: { route: window.location.pathname },
+        }));
+        element.addEventListener('annotation:create', (e: Event) => {
+          console.log('Created:', (e as CustomEvent).detail.annotation);
+        });
+      }
     });
   }
 
@@ -179,6 +205,19 @@ Generates human-readable names like `button "Save"` or `input [email]` that AI a
 ### CSS Selector Paths
 Creates CSS selectors (e.g., `form > .actions > button`) for precise element location.
 
+### Framework Component Paths
+Automatically detects and displays the framework component hierarchy for annotated elements. Works with React, Vue, Svelte, and Angular in development mode.
+
+| Framework | Example Output |
+|-----------|---------------|
+| React 18 | `App (App.tsx:7) > LandingPage (App.tsx:54) > CTAButton (App.tsx:38)` |
+| React 19 | `App > LandingPage > CTAButton` (names only, no file/line) |
+| Vue | `App (App.vue) > LandingPage (LandingPage.vue) > CTAButton (CTAButton.vue)` |
+| Svelte | `LandingPage.svelte:5 > HeroSection.svelte:5 > CTAButton.svelte:5` |
+| Angular | `_App > _LandingPageComponent > _CTAButtonComponent` |
+
+Component paths appear in the popup, hover tooltip, and markdown output (standard level and above).
+
 ### Multi-Select
 Hold and drag to select multiple elements at once.
 
@@ -193,13 +232,51 @@ When active, clicks are blocked from triggering buttons/links while annotating (
 | Level | Description |
 |-------|-------------|
 | Compact | `1. **button "Save"**: Change color to blue` |
-| Standard | Element + path + comment with headers |
-| Detailed | + classes, position, nearby context |
-| Forensic | + full DOM path, computed styles, accessibility info |
+| Standard | Element + path + component path + comment with headers |
+| Detailed | + framework prefix, classes, position, nearby context, custom context |
+| Forensic | + full DOM path, computed styles, accessibility info, custom context |
 
 ### Persistence
 Annotations are saved to localStorage and persist across page reloads (7-day retention).
 
+### Custom Context Hook
+
+The `onBeforeAnnotationCreate` hook lets you inject custom context (route info, user data, app state) into annotations before they're created. You can also modify the comment or cancel annotation creation.
+
+```typescript
+// Add route and user context to every annotation
+const annotation = createAnnotation({
+  onBeforeAnnotationCreate: (data) => ({
+    context: {
+      route: window.location.pathname,
+      params: Object.fromEntries(new URLSearchParams(window.location.search)),
+      userId: getCurrentUserId(),
+      timestamp: new Date().toISOString(),
+    },
+  }),
+});
+
+// Conditionally cancel annotation creation
+const annotation = createAnnotation({
+  onBeforeAnnotationCreate: (data) => {
+    // Don't annotate elements inside specific containers
+    if (data.element.closest('.no-annotate')) {
+      return { cancel: true };
+    }
+    return { context: { route: window.location.pathname } };
+  },
+});
+
+// Modify the comment
+const annotation = createAnnotation({
+  onBeforeAnnotationCreate: (data) => ({
+    comment: `[${window.location.pathname}] ${data.comment}`,
+  }),
+});
+```
+
+The custom context appears in the markdown output at detailed and forensic levels.
+
 ## Internationalization (i18n)
 
 agent-ui-annotation supports multiple languages with built-in English and Simplified Chinese translations.
@@ -336,6 +413,7 @@ interface AnnotationOptions {
   theme?: 'light' | 'dark' | 'auto';
   outputLevel?: 'compact' | 'standard' | 'detailed' | 'forensic';
   annotationColor?: string;
+  onBeforeAnnotationCreate?: BeforeAnnotationCreateHook; // Hook to add context/modify/cancel
   onAnnotationCreate?: (annotation: Annotation) => void;
   onAnnotationUpdate?: (annotation: Annotation) => void;
   onAnnotationDelete?: (id: string) => void;
@@ -343,6 +421,27 @@ interface AnnotationOptions {
   onCopy?: (content: string, level: OutputLevel) => void;
 }
 
+// Hook types for onBeforeAnnotationCreate
+interface BeforeAnnotationCreateData {
+  element: Element;           // The DOM element being annotated
+  elementInfo: ElementInfo;   // Collected element information
+  comment: string;            // User's comment
+  selectedText: string | null; // Selected text on page (if any)
+  isMultiSelect: boolean;     // Whether part of multi-select batch
+  clickX: number;             // Click X coordinate
+  clickY: number;             // Click Y coordinate
+}
+
+interface BeforeAnnotationCreateResult {
+  context?: Record<string, unknown>; // Custom data to attach
+  comment?: string;                   // Override the comment
+  cancel?: boolean;                   // Set true to cancel creation
+}
+
+type BeforeAnnotationCreateHook = (
+  data: BeforeAnnotationCreateData
+) => BeforeAnnotationCreateResult | Promise<BeforeAnnotationCreateResult> | void | Promise<void>;
+
 // i18n is configured separately via initI18n()
 interface I18nOptions {
   locale?: string;                    // e.g., 'en', 'zh-CN'
@@ -402,6 +501,7 @@ interface AnnotationInstance {
 
 ### 1. button "Save"
 **Location:** form > .actions > button
+**Component:** App (App.tsx:12) > SaveForm (SaveForm.tsx:8)
 **Feedback:** Change color to blue
 
 ---

package/dist/adapters/angular/annotation.module.d.ts

@@ -1,5 +1,5 @@
 import { I18nOptions } from '../../core/i18n';
-export type { Annotation, AnnotationId, OutputLevel, ThemeMode, Settings, PartialTranslationStrings, I18nOptions } from '../../core/types';
+export type { Annotation, AnnotationId, OutputLevel, ThemeMode, Settings, PartialTranslationStrings, I18nOptions, BeforeAnnotationCreateHook, BeforeAnnotationCreateData, BeforeAnnotationCreateResult } from '../../core/types';
 export { AnnotationElement } from '../../element/annotation-element';
 export { initI18n } from '../../core/i18n';
 /**

package/dist/adapters/angular/annotation.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"annotation.module.d.ts","sourceRoot":"","sources":["../../../src/adapters/angular/annotation.module.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAGH,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAM7D,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,yBAAyB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC3I,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,CAAC,EAAE,WAAW,QAK9D"}
+{"version":3,"file":"annotation.module.d.ts","sourceRoot":"","sources":["../../../src/adapters/angular/annotation.module.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAGH,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAM7D,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,yBAAyB,EAAE,WAAW,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,4BAA4B,EAAE,MAAM,kBAAkB,CAAC;AACjO,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,CAAC,EAAE,WAAW,QAK9D"}

package/dist/adapters/react/AgentUIAnnotation.d.ts

@@ -1,5 +1,5 @@
 import { default as React, FC } from 'react';
-import { Annotation, AnnotationId, OutputLevel, ThemeMode } from '../../core/types';
+import { Annotation, AnnotationId, OutputLevel, ThemeMode, BeforeAnnotationCreateHook, BeforeAnnotationCreateData, BeforeAnnotationCreateResult } from '../../core/types';
 import { AnnotationElement } from '../../element/annotation-element';
 declare global {
     namespace JSX {
@@ -23,6 +23,8 @@ export interface AgentUIAnnotationProps {
     annotationColor?: string;
     /** Whether the tool is disabled */
     disabled?: boolean;
+    /** Hook called before creating an annotation - can add context, modify comment, or cancel */
+    onBeforeAnnotationCreate?: BeforeAnnotationCreateHook;
     /** Callback when an annotation is created */
     onAnnotationCreate?: (annotation: Annotation) => void;
     /** Callback when an annotation is updated */
@@ -61,4 +63,5 @@ export declare function useAgentUIAnnotation(): {
     clearAll: () => void;
 };
 export default AgentUIAnnotation;
+export type { BeforeAnnotationCreateHook, BeforeAnnotationCreateData, BeforeAnnotationCreateResult };
 //# sourceMappingURL=AgentUIAnnotation.d.ts.map

package/dist/adapters/react/AgentUIAnnotation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgentUIAnnotation.d.ts","sourceRoot":"","sources":["../../../src/adapters/react/AgentUIAnnotation.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,EAAkC,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACzF,OAAO,EAA6B,KAAK,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAMrG,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,qBAAqB,EAAE,KAAK,CAAC,iBAAiB,CAC5C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;gBAClC,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,cAAc,CAAC,EAAE,MAAM,CAAC;gBACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;gBAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;gBAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;aACpC,EACD,WAAW,CACZ,CAAC;SACH;KACF;CACF;AAED,MAAM,WAAW,sBAAsB;IACrC,iBAAiB;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IACtD,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC;IACtD,6CAA6C;IAC7C,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACzD,qCAAqC;IACrC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvD,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACtD,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,WAAW,KAAK,MAAM,CAAC;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAmExD,CAAC;AAEF;;GAEG;AACH,wBAAgB,oBAAoB,IAAI;IACtC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,WAAW,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACtD,SAAS,EAAE,CAAC,KAAK,CAAC,EAAE,WAAW,KAAK,MAAM,CAAC;IAC3C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAoCA;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"AgentUIAnnotation.d.ts","sourceRoot":"","sources":["../../../src/adapters/react/AgentUIAnnotation.tsx"],"names":[],"mappings":"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"}

package/dist/adapters/react/AgentUIAnnotation.js

@@ -1,83 +1,87 @@
-import b, { useRef as h, useEffect as I, useCallback as d } from "react";
-import { r as R } from "../../annotation-element-z6TdBGsn.js";
+import I, { useRef as b, useEffect as O, useCallback as u } from "react";
+import { r as R } from "../../annotation-element-CZQRsI-4.js";
 R();
-const y = ({
+const H = ({
   theme: c = "auto",
-  outputLevel: i = "standard",
-  annotationColor: v,
-  disabled: E = !1,
+  outputLevel: v = "standard",
+  annotationColor: f,
+  disabled: m = !1,
+  onBeforeAnnotationCreate: d,
   onAnnotationCreate: s,
   onAnnotationUpdate: l,
-  onAnnotationDelete: u,
-  onAnnotationsClear: e,
-  onCopy: a,
-  className: O
+  onAnnotationDelete: e,
+  onAnnotationsClear: r,
+  onCopy: i,
+  className: k
 }) => {
-  const f = h(null);
-  return I(() => {
-    const t = f.current;
+  const E = b(null);
+  return O(() => {
+    const t = E.current;
+    t && t.setBeforeCreateHook(d ?? null);
+  }, [d]), O(() => {
+    const t = E.current;
     if (!t) return;
-    const m = (n) => {
-      const r = n.detail;
-      s == null || s(r.annotation);
-    }, g = (n) => {
-      const r = n.detail;
-      l == null || l(r.annotation);
+    const g = (n) => {
+      const a = n.detail;
+      s == null || s(a.annotation);
     }, o = (n) => {
-      const r = n.detail;
-      u == null || u(r.id);
+      const a = n.detail;
+      l == null || l(a.annotation);
     }, L = (n) => {
-      const r = n.detail;
-      e == null || e(r.annotations);
+      const a = n.detail;
+      e == null || e(a.id);
     }, p = (n) => {
-      const r = n.detail;
-      a == null || a(r.content, r.level);
+      const a = n.detail;
+      r == null || r(a.annotations);
+    }, h = (n) => {
+      const a = n.detail;
+      i == null || i(a.content, a.level);
     };
-    return t.addEventListener("annotation:create", m), t.addEventListener("annotation:update", g), t.addEventListener("annotation:delete", o), t.addEventListener("annotation:clear", L), t.addEventListener("annotation:copy", p), () => {
-      t.removeEventListener("annotation:create", m), t.removeEventListener("annotation:update", g), t.removeEventListener("annotation:delete", o), t.removeEventListener("annotation:clear", L), t.removeEventListener("annotation:copy", p);
+    return t.addEventListener("annotation:create", g), t.addEventListener("annotation:update", o), t.addEventListener("annotation:delete", L), t.addEventListener("annotation:clear", p), t.addEventListener("annotation:copy", h), () => {
+      t.removeEventListener("annotation:create", g), t.removeEventListener("annotation:update", o), t.removeEventListener("annotation:delete", L), t.removeEventListener("annotation:clear", p), t.removeEventListener("annotation:copy", h);
     };
-  }, [s, l, u, e, a]), b.createElement("agent-ui-annotation", {
-    ref: f,
+  }, [s, l, e, r, i]), I.createElement("agent-ui-annotation", {
+    ref: E,
     theme: c,
-    "output-level": i,
-    "annotation-color": v,
-    disabled: E ? "" : void 0,
-    class: O
+    "output-level": v,
+    "annotation-color": f,
+    disabled: m ? "" : void 0,
+    class: k
   });
 };
 function j() {
-  const c = h(null), i = d(() => {
+  const c = b(null), v = u(() => {
     var e;
     (e = c.current) == null || e.activate();
-  }, []), v = d(() => {
+  }, []), f = u(() => {
     var e;
     (e = c.current) == null || e.deactivate();
-  }, []), E = d(() => {
+  }, []), m = u(() => {
     var e;
     (e = c.current) == null || e.toggle();
-  }, []), s = d(async (e) => {
-    var a;
-    return ((a = c.current) == null ? void 0 : a.copyOutput(e)) ?? !1;
-  }, []), l = d((e) => {
-    var a;
-    return ((a = c.current) == null ? void 0 : a.getOutput(e)) ?? "";
-  }, []), u = d(() => {
+  }, []), d = u(async (e) => {
+    var r;
+    return ((r = c.current) == null ? void 0 : r.copyOutput(e)) ?? !1;
+  }, []), s = u((e) => {
+    var r;
+    return ((r = c.current) == null ? void 0 : r.getOutput(e)) ?? "";
+  }, []), l = u(() => {
     var e;
     (e = c.current) == null || e.clearAll();
   }, []);
   return {
     ref: c,
-    activate: i,
-    deactivate: v,
-    toggle: E,
-    copyOutput: s,
-    getOutput: l,
-    clearAll: u
+    activate: v,
+    deactivate: f,
+    toggle: m,
+    copyOutput: d,
+    getOutput: s,
+    clearAll: l
   };
 }
 export {
-  y as AgentUIAnnotation,
-  y as default,
+  H as AgentUIAnnotation,
+  H as default,
   j as useAgentUIAnnotation
 };
 //# sourceMappingURL=AgentUIAnnotation.js.map

package/dist/adapters/react/AgentUIAnnotation.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgentUIAnnotation.js","sources":["../../../src/adapters/react/AgentUIAnnotation.tsx"],"sourcesContent":["/**\n * React adapter for agent-ui-annotation\n */\n\nimport React, { useEffect, useRef, useCallback, type FC } from 'react';\nimport type { Annotation, AnnotationId, OutputLevel, ThemeMode } from '../../core/types';\nimport { registerAnnotationElement, type AnnotationElement } from '../../element/annotation-element';\n\n// Ensure custom element is registered\nregisterAnnotationElement();\n\n// Extend JSX types for the custom element\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'agent-ui-annotation': React.DetailedHTMLProps<\n        React.HTMLAttributes<HTMLElement> & {\n          theme?: string;\n          'output-level'?: string;\n          'annotation-color'?: string;\n          disabled?: string;\n          ref?: React.Ref<AnnotationElement>;\n        },\n        HTMLElement\n      >;\n    }\n  }\n}\n\nexport interface AgentUIAnnotationProps {\n  /** Theme mode */\n  theme?: ThemeMode;\n  /** Output detail level */\n  outputLevel?: OutputLevel;\n  /** Annotation marker color */\n  annotationColor?: string;\n  /** Whether the tool is disabled */\n  disabled?: boolean;\n  /** Callback when an annotation is created */\n  onAnnotationCreate?: (annotation: Annotation) => void;\n  /** Callback when an annotation is updated */\n  onAnnotationUpdate?: (annotation: Annotation) => void;\n  /** Callback when an annotation is deleted */\n  onAnnotationDelete?: (id: AnnotationId) => void;\n  /** Callback when all annotations are cleared */\n  onAnnotationsClear?: (annotations: Annotation[]) => void;\n  /** Callback when output is copied */\n  onCopy?: (content: string, level: OutputLevel) => void;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface AgentUIAnnotationRef {\n  activate: () => void;\n  deactivate: () => void;\n  toggle: () => void;\n  copyOutput: (level?: OutputLevel) => Promise<boolean>;\n  getOutput: (level?: OutputLevel) => string;\n  clearAll: () => void;\n}\n\n/**\n * React component wrapper for agent-ui-annotation\n */\nexport const AgentUIAnnotation: FC<AgentUIAnnotationProps> = ({\n  theme = 'auto',\n  outputLevel = 'standard',\n  annotationColor,\n  disabled = false,\n  onAnnotationCreate,\n  onAnnotationUpdate,\n  onAnnotationDelete,\n  onAnnotationsClear,\n  onCopy,\n  className,\n}) => {\n  const ref = useRef<AnnotationElement>(null);\n\n  // Handle events\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const handleCreate = (e: Event) => {\n      const detail = (e as CustomEvent).detail as { annotation: Annotation };\n      onAnnotationCreate?.(detail.annotation);\n    };\n\n    const handleUpdate = (e: Event) => {\n      const detail = (e as CustomEvent).detail as { annotation: Annotation };\n      onAnnotationUpdate?.(detail.annotation);\n    };\n\n    const handleDelete = (e: Event) => {\n      const detail = (e as CustomEvent).detail as { id: AnnotationId };\n      onAnnotationDelete?.(detail.id);\n    };\n\n    const handleClear = (e: Event) => {\n      const detail = (e as CustomEvent).detail as { annotations: Annotation[] };\n      onAnnotationsClear?.(detail.annotations);\n    };\n\n    const handleCopy = (e: Event) => {\n      const detail = (e as CustomEvent).detail as { content: string; level: OutputLevel };\n      onCopy?.(detail.content, detail.level);\n    };\n\n    element.addEventListener('annotation:create', handleCreate);\n    element.addEventListener('annotation:update', handleUpdate);\n    element.addEventListener('annotation:delete', handleDelete);\n    element.addEventListener('annotation:clear', handleClear);\n    element.addEventListener('annotation:copy', handleCopy);\n\n    return () => {\n      element.removeEventListener('annotation:create', handleCreate);\n      element.removeEventListener('annotation:update', handleUpdate);\n      element.removeEventListener('annotation:delete', handleDelete);\n      element.removeEventListener('annotation:clear', handleClear);\n      element.removeEventListener('annotation:copy', handleCopy);\n    };\n  }, [onAnnotationCreate, onAnnotationUpdate, onAnnotationDelete, onAnnotationsClear, onCopy]);\n\n  return React.createElement('agent-ui-annotation', {\n    ref,\n    theme,\n    'output-level': outputLevel,\n    'annotation-color': annotationColor,\n    disabled: disabled ? '' : undefined,\n    class: className,\n  });\n};\n\n/**\n * Hook for using agent-ui-annotation imperatively\n */\nexport function useAgentUIAnnotation(): {\n  ref: React.RefObject<AnnotationElement | null>;\n  activate: () => void;\n  deactivate: () => void;\n  toggle: () => void;\n  copyOutput: (level?: OutputLevel) => Promise<boolean>;\n  getOutput: (level?: OutputLevel) => string;\n  clearAll: () => void;\n} {\n  const ref = useRef<AnnotationElement | null>(null);\n\n  const activate = useCallback(() => {\n    ref.current?.activate();\n  }, []);\n\n  const deactivate = useCallback(() => {\n    ref.current?.deactivate();\n  }, []);\n\n  const toggle = useCallback(() => {\n    ref.current?.toggle();\n  }, []);\n\n  const copyOutput = useCallback(async (level?: OutputLevel) => {\n    return ref.current?.copyOutput(level) ?? false;\n  }, []);\n\n  const getOutput = useCallback((level?: OutputLevel) => {\n    return ref.current?.getOutput(level) ?? '';\n  }, []);\n\n  const clearAll = useCallback(() => {\n    ref.current?.clearAll();\n  }, []);\n\n  return {\n    ref,\n    activate,\n    deactivate,\n    toggle,\n    copyOutput,\n    getOutput,\n    clearAll,\n  };\n}\n\nexport default AgentUIAnnotation;\n"],"names":["registerAnnotationElement","AgentUIAnnotation","theme","outputLevel","annotationColor","disabled","onAnnotationCreate","onAnnotationUpdate","onAnnotationDelete","onAnnotationsClear","onCopy","className","ref","useRef","useEffect","element","handleCreate","e","detail","handleUpdate","handleDelete","handleClear","handleCopy","React","useAgentUIAnnotation","activate","useCallback","_a","deactivate","toggle","copyOutput","level","getOutput","clearAll"],"mappings":"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"}
+{"version":3,"file":"AgentUIAnnotation.js","sources":["../../../src/adapters/react/AgentUIAnnotation.tsx"],"sourcesContent":["/**\n * React adapter for agent-ui-annotation\n */\n\nimport React, { useEffect, useRef, useCallback, type FC } from 'react';\nimport type { Annotation, AnnotationId, OutputLevel, ThemeMode, BeforeAnnotationCreateHook, BeforeAnnotationCreateData, BeforeAnnotationCreateResult } from '../../core/types';\nimport { registerAnnotationElement, type AnnotationElement } from '../../element/annotation-element';\n\n// Ensure custom element is registered\nregisterAnnotationElement();\n\n// Extend JSX types for the custom element\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      'agent-ui-annotation': React.DetailedHTMLProps<\n        React.HTMLAttributes<HTMLElement> & {\n          theme?: string;\n          'output-level'?: string;\n          'annotation-color'?: string;\n          disabled?: string;\n          ref?: React.Ref<AnnotationElement>;\n        },\n        HTMLElement\n      >;\n    }\n  }\n}\n\nexport interface AgentUIAnnotationProps {\n  /** Theme mode */\n  theme?: ThemeMode;\n  /** Output detail level */\n  outputLevel?: OutputLevel;\n  /** Annotation marker color */\n  annotationColor?: string;\n  /** Whether the tool is disabled */\n  disabled?: boolean;\n  /** Hook called before creating an annotation - can add context, modify comment, or cancel */\n  onBeforeAnnotationCreate?: BeforeAnnotationCreateHook;\n  /** Callback when an annotation is created */\n  onAnnotationCreate?: (annotation: Annotation) => void;\n  /** Callback when an annotation is updated */\n  onAnnotationUpdate?: (annotation: Annotation) => void;\n  /** Callback when an annotation is deleted */\n  onAnnotationDelete?: (id: AnnotationId) => void;\n  /** Callback when all annotations are cleared */\n  onAnnotationsClear?: (annotations: Annotation[]) => void;\n  /** Callback when output is copied */\n  onCopy?: (content: string, level: OutputLevel) => void;\n  /** Additional class name */\n  className?: string;\n}\n\nexport interface AgentUIAnnotationRef {\n  activate: () => void;\n  deactivate: () => void;\n  toggle: () => void;\n  copyOutput: (level?: OutputLevel) => Promise<boolean>;\n  getOutput: (level?: OutputLevel) => string;\n  clearAll: () => void;\n}\n\n/**\n * React component wrapper for agent-ui-annotation\n */\nexport const AgentUIAnnotation: FC<AgentUIAnnotationProps> = ({\n  theme = 'auto',\n  outputLevel = 'standard',\n  annotationColor,\n  disabled = false,\n  onBeforeAnnotationCreate,\n  onAnnotationCreate,\n  onAnnotationUpdate,\n  onAnnotationDelete,\n  onAnnotationsClear,\n  onCopy,\n  className,\n}) => {\n  const ref = useRef<AnnotationElement>(null);\n\n  // Set up the before create hook\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    element.setBeforeCreateHook(onBeforeAnnotationCreate ?? null);\n  }, [onBeforeAnnotationCreate]);\n\n  // Handle events\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const handleCreate = (e: Event) => {\n      const detail = (e as CustomEvent).detail as { annotation: Annotation };\n      onAnnotationCreate?.(detail.annotation);\n    };\n\n    const handleUpdate = (e: Event) => {\n      const detail = (e as CustomEvent).detail as { annotation: Annotation };\n      onAnnotationUpdate?.(detail.annotation);\n    };\n\n    const handleDelete = (e: Event) => {\n      const detail = (e as CustomEvent).detail as { id: AnnotationId };\n      onAnnotationDelete?.(detail.id);\n    };\n\n    const handleClear = (e: Event) => {\n      const detail = (e as CustomEvent).detail as { annotations: Annotation[] };\n      onAnnotationsClear?.(detail.annotations);\n    };\n\n    const handleCopy = (e: Event) => {\n      const detail = (e as CustomEvent).detail as { content: string; level: OutputLevel };\n      onCopy?.(detail.content, detail.level);\n    };\n\n    element.addEventListener('annotation:create', handleCreate);\n    element.addEventListener('annotation:update', handleUpdate);\n    element.addEventListener('annotation:delete', handleDelete);\n    element.addEventListener('annotation:clear', handleClear);\n    element.addEventListener('annotation:copy', handleCopy);\n\n    return () => {\n      element.removeEventListener('annotation:create', handleCreate);\n      element.removeEventListener('annotation:update', handleUpdate);\n      element.removeEventListener('annotation:delete', handleDelete);\n      element.removeEventListener('annotation:clear', handleClear);\n      element.removeEventListener('annotation:copy', handleCopy);\n    };\n  }, [onAnnotationCreate, onAnnotationUpdate, onAnnotationDelete, onAnnotationsClear, onCopy]);\n\n  return React.createElement('agent-ui-annotation', {\n    ref,\n    theme,\n    'output-level': outputLevel,\n    'annotation-color': annotationColor,\n    disabled: disabled ? '' : undefined,\n    class: className,\n  });\n};\n\n/**\n * Hook for using agent-ui-annotation imperatively\n */\nexport function useAgentUIAnnotation(): {\n  ref: React.RefObject<AnnotationElement | null>;\n  activate: () => void;\n  deactivate: () => void;\n  toggle: () => void;\n  copyOutput: (level?: OutputLevel) => Promise<boolean>;\n  getOutput: (level?: OutputLevel) => string;\n  clearAll: () => void;\n} {\n  const ref = useRef<AnnotationElement | null>(null);\n\n  const activate = useCallback(() => {\n    ref.current?.activate();\n  }, []);\n\n  const deactivate = useCallback(() => {\n    ref.current?.deactivate();\n  }, []);\n\n  const toggle = useCallback(() => {\n    ref.current?.toggle();\n  }, []);\n\n  const copyOutput = useCallback(async (level?: OutputLevel) => {\n    return ref.current?.copyOutput(level) ?? false;\n  }, []);\n\n  const getOutput = useCallback((level?: OutputLevel) => {\n    return ref.current?.getOutput(level) ?? '';\n  }, []);\n\n  const clearAll = useCallback(() => {\n    ref.current?.clearAll();\n  }, []);\n\n  return {\n    ref,\n    activate,\n    deactivate,\n    toggle,\n    copyOutput,\n    getOutput,\n    clearAll,\n  };\n}\n\nexport default AgentUIAnnotation;\n\n// Re-export hook types for convenience\nexport type { BeforeAnnotationCreateHook, BeforeAnnotationCreateData, BeforeAnnotationCreateResult };\n"],"names":["registerAnnotationElement","AgentUIAnnotation","theme","outputLevel","annotationColor","disabled","onBeforeAnnotationCreate","onAnnotationCreate","onAnnotationUpdate","onAnnotationDelete","onAnnotationsClear","onCopy","className","ref","useRef","useEffect","element","handleCreate","e","detail","handleUpdate","handleDelete","handleClear","handleCopy","React","useAgentUIAnnotation","activate","useCallback","_a","deactivate","toggle","copyOutput","level","getOutput","clearAll"],"mappings":"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"}

package/dist/adapters/svelte/index.js

@@ -1,109 +1,111 @@
 import "svelte/internal/disclose-version";
 import * as e from "svelte/internal/client";
-import { onMount as C } from "svelte";
-import { r as b } from "../../annotation-element-z6TdBGsn.js";
-import { A as k } from "../../annotation-element-z6TdBGsn.js";
-var U = e.from_html("<agent-ui-annotation></agent-ui-annotation>", 2);
-function M(n, a) {
-  e.push(a, !0);
-  let f = e.prop(a, "theme", 3, "auto"), s = e.prop(a, "outputLevel", 3, "standard"), d = e.prop(a, "disabled", 3, !1), l = e.state(void 0);
-  const r = (t) => {
-    var i;
+import { onMount as O } from "svelte";
+import { r as B } from "../../annotation-element-CZQRsI-4.js";
+import { a as P } from "../../annotation-element-CZQRsI-4.js";
+var b = e.from_html("<agent-ui-annotation></agent-ui-annotation>", 2);
+function D(a, n) {
+  e.push(n, !0);
+  let f = e.prop(n, "theme", 3, "auto"), v = e.prop(n, "outputLevel", 3, "standard"), r = e.prop(n, "disabled", 3, !1), i = e.state(void 0);
+  const d = (t) => {
+    var l;
     const o = t.detail;
-    (i = a.onAnnotationCreate) == null || i.call(a, o.annotation);
+    (l = n.onAnnotationCreate) == null || l.call(n, o.annotation);
   }, u = (t) => {
-    var i;
+    var l;
     const o = t.detail;
-    (i = a.onAnnotationUpdate) == null || i.call(a, o.annotation);
-  }, v = (t) => {
-    var i;
-    const o = t.detail;
-    (i = a.onAnnotationDelete) == null || i.call(a, o.id);
+    (l = n.onAnnotationUpdate) == null || l.call(n, o.annotation);
   }, g = (t) => {
-    var i;
+    var l;
+    const o = t.detail;
+    (l = n.onAnnotationDelete) == null || l.call(n, o.id);
+  }, s = (t) => {
+    var l;
     const o = t.detail;
-    (i = a.onAnnotationsClear) == null || i.call(a, o.annotations);
+    (l = n.onAnnotationsClear) == null || l.call(n, o.annotations);
   }, m = (t) => {
-    var i;
+    var l;
     const o = t.detail;
-    (i = a.onCopy) == null || i.call(a, o.content, o.level);
+    (l = n.onCopy) == null || l.call(n, o.content, o.level);
   };
-  C(() => {
-    b();
-    const t = e.get(l);
+  O(() => {
+    B();
+    const t = e.get(i);
     if (!t) return;
-    t.addEventListener("annotation:scope", r), t.addEventListener("annotation:update", u), t.addEventListener("annotation:delete", v), t.addEventListener("annotation:clear", g), t.addEventListener("annotation:copy", m);
+    n.onBeforeAnnotationCreate && t.setBeforeCreateHook(n.onBeforeAnnotationCreate), t.addEventListener("annotation:create", d), t.addEventListener("annotation:update", u), t.addEventListener("annotation:delete", g), t.addEventListener("annotation:clear", s), t.addEventListener("annotation:copy", m);
     const o = e.effect_root(() => {
       e.user_effect(() => {
-        d() && e.get(l) && e.get(l).deactivate();
+        r() && e.get(i) && e.get(i).deactivate();
+      }), e.user_effect(() => {
+        e.get(i) && e.get(i).setBeforeCreateHook(n.onBeforeAnnotationCreate ?? null);
       });
     });
     return () => {
-      t.removeEventListener("annotation:scope", r), t.removeEventListener("annotation:update", u), t.removeEventListener("annotation:delete", v), t.removeEventListener("annotation:clear", g), t.removeEventListener("annotation:copy", m), o();
+      t.removeEventListener("annotation:create", d), t.removeEventListener("annotation:update", u), t.removeEventListener("annotation:delete", g), t.removeEventListener("annotation:clear", s), t.removeEventListener("annotation:copy", m), o();
     };
   });
   function _() {
     var t;
-    (t = e.get(l)) == null || t.activate();
+    (t = e.get(i)) == null || t.activate();
   }
   function A() {
     var t;
-    (t = e.get(l)) == null || t.deactivate();
+    (t = e.get(i)) == null || t.deactivate();
   }
   function E() {
     var t;
-    (t = e.get(l)) == null || t.toggle();
+    (t = e.get(i)) == null || t.toggle();
   }
-  async function L(t) {
+  async function C(t) {
     var o;
-    return ((o = e.get(l)) == null ? void 0 : o.copyOutput(t)) ?? !1;
+    return ((o = e.get(i)) == null ? void 0 : o.copyOutput(t)) ?? !1;
   }
-  function h(t) {
+  function L(t) {
     var o;
-    return ((o = e.get(l)) == null ? void 0 : o.getOutput(t)) ?? "";
+    return ((o = e.get(i)) == null ? void 0 : o.getOutput(t)) ?? "";
   }
-  function y() {
+  function h() {
     var t;
-    (t = e.get(l)) == null || t.clearAll();
+    (t = e.get(i)) == null || t.clearAll();
   }
-  var O = {
+  var y = {
     activate: _,
     deactivate: A,
     toggle: E,
-    copyOutput: L,
-    getOutput: h,
-    clearAll: y
-  }, c = U();
-  return e.template_effect(() => e.set_custom_element_data(c, "theme", f())), e.template_effect(() => e.set_custom_element_data(c, "output-level", s())), e.template_effect(() => e.set_custom_element_data(c, "annotation-color", a.annotationColor)), e.template_effect(() => e.set_custom_element_data(c, "disabled", d() ? "" : void 0)), e.bind_this(c, (t) => e.set(l, t), () => e.get(l)), e.append(n, c), e.pop(O);
+    copyOutput: C,
+    getOutput: L,
+    clearAll: h
+  }, c = b();
+  return e.template_effect(() => e.set_custom_element_data(c, "theme", f())), e.template_effect(() => e.set_custom_element_data(c, "output-level", v())), e.template_effect(() => e.set_custom_element_data(c, "annotation-color", n.annotationColor)), e.template_effect(() => e.set_custom_element_data(c, "disabled", r() ? "" : void 0)), e.bind_this(c, (t) => e.set(i, t), () => e.get(i)), e.append(a, c), e.pop(y);
 }
-function P() {
-  let n = null;
+function H() {
+  let a = null;
   return {
     get ref() {
-      return n;
+      return a;
     },
     set ref(u) {
-      n = u;
+      a = u;
     },
     activate: () => {
-      n == null || n.activate();
+      a == null || a.activate();
     },
     deactivate: () => {
-      n == null || n.deactivate();
+      a == null || a.deactivate();
     },
     toggle: () => {
-      n == null || n.toggle();
+      a == null || a.toggle();
     },
-    copyOutput: async (u) => (n == null ? void 0 : n.copyOutput(u)) ?? Promise.resolve(!1),
-    getOutput: (u) => (n == null ? void 0 : n.getOutput(u)) ?? "",
+    copyOutput: async (u) => (a == null ? void 0 : a.copyOutput(u)) ?? Promise.resolve(!1),
+    getOutput: (u) => (a == null ? void 0 : a.getOutput(u)) ?? "",
     clearAll: () => {
-      n == null || n.clearAll();
+      a == null || a.clearAll();
     }
   };
 }
 export {
-  M as AgentUIAnnotation,
-  k as AnnotationElement,
-  P as useAgentUIAnnotation
+  D as AgentUIAnnotation,
+  P as AnnotationElement,
+  H as useAgentUIAnnotation
 };
 //# sourceMappingURL=index.js.map