agent-ui-annotation 0.4.0 → 0.4.1

package/dist/adapters/react/AgentUIAnnotation.js

@@ -1,5 +1,5 @@
 import b, { useRef as h, useEffect as I, useCallback as d } from "react";
-import { r as R } from "../../annotation-element-CJm7-qrT.js";
+import { r as R } from "../../annotation-element-z6TdBGsn.js";
 R();
 const y = ({
   theme: c = "auto",

package/dist/adapters/svelte/index.js

@@ -1,8 +1,8 @@
 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-CJm7-qrT.js";
-import { A as k } from "../../annotation-element-CJm7-qrT.js";
+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);

package/dist/adapters/vanilla/index.js

@@ -1,5 +1,5 @@
-import { r as A, h as g } from "../../annotation-element-CJm7-qrT.js";
-import { A as b } from "../../annotation-element-CJm7-qrT.js";
+import { r as A, h as g } from "../../annotation-element-z6TdBGsn.js";
+import { A as b } from "../../annotation-element-z6TdBGsn.js";
 A();
 function E(n = {}) {
   const {

package/dist/adapters/vue/index.js

@@ -1,5 +1,5 @@
-import { r as p } from "../../annotation-element-CJm7-qrT.js";
-import { A as P } from "../../annotation-element-CJm7-qrT.js";
+import { r as p } from "../../annotation-element-z6TdBGsn.js";
+import { A as P } from "../../annotation-element-z6TdBGsn.js";
 import { defineComponent as f, ref as m, onMounted as y, onUnmounted as A, watch as E, resolveComponent as L, openBlock as O, createBlock as h } from "vue";
 const R = /* @__PURE__ */ f({
   __name: "AgentUIAnnotation",

package/dist/agent-ui-annotation.js

@@ -1,5 +1,5 @@
-import { r as e } from "./annotation-element-CJm7-qrT.js";
-import { A as o, S as r, c as s, a as i, b as c, d as l, e as m, g as f, f as A, i as E, h as g, j as p, k as C, t as S, l as h, z as O } from "./annotation-element-CJm7-qrT.js";
+import { r as e } from "./annotation-element-z6TdBGsn.js";
+import { A as o, S as r, c as s, a as i, b as c, d as l, e as m, g as f, f as A, i as E, h as g, j as p, k as C, t as S, l as h, z as O } from "./annotation-element-z6TdBGsn.js";
 import { createAnnotation as x, init as d } from "./adapters/vanilla/index.js";
 e();
 export {

package/dist/{annotation-element-CJm7-qrT.js → annotation-element-z6TdBGsn.js}

@@ -1,6 +1,6 @@
 var Tt = Object.defineProperty;
 var Lt = (t, n, e) => n in t ? Tt(t, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[n] = e;
-var A = (t, n, e) => Lt(t, typeof n != "symbol" ? n + "" : n, e);
+var $ = (t, n, e) => Lt(t, typeof n != "symbol" ? n + "" : n, e);
 function Ft(t) {
   let n = { ...t };
   const e = /* @__PURE__ */ new Set();
@@ -113,7 +113,7 @@ const ft = {
   x: 20,
   y: 20
 };
-function Yt(t) {
+function Rt(t) {
   return {
     scopes: /* @__PURE__ */ new Map(),
     selectedAnnotationId: null,
@@ -151,8 +151,8 @@ function Yt(t) {
     ...t
   };
 }
-const Rt = 40;
-function k(t, n = Rt) {
+const Yt = 40;
+function k(t, n = Yt) {
   const e = t.trim().replace(/\s+/g, " ");
   return e.length <= n ? e : e.slice(0, n - 3) + "...";
 }
@@ -982,7 +982,7 @@ function Pe() {
     return console.error("[Annotation] Failed to load settings:", t), null;
   }
 }
-function Ye(t, n = 1e3) {
+function Re(t, n = 1e3) {
   let e = null;
   const o = () => {
     e !== null && (clearTimeout(e), e = null), Le(t());
@@ -1096,7 +1096,7 @@ const B = {
     no: "No",
     none: "none"
   }
-}, Re = {
+}, Ye = {
   toolbar: {
     activate: "激活 agent-ui-annotation",
     freeze: "冻结动画",
@@ -1201,7 +1201,7 @@ const B = {
   }
 }, wt = /* @__PURE__ */ new Map([
   ["en", B],
-  ["zh-CN", Re]
+  ["zh-CN", Ye]
 ]);
 let O = B, $t = !1;
 const Z = B;
@@ -1362,7 +1362,7 @@ async function Be(t) {
   }
 }
 const J = "data-annotation-toolbar", Q = "data-annotation-marker", tt = "data-annotation-popup", et = "data-annotation-settings";
-function R(t) {
+function Y(t) {
   return t ? t.tagName.toLowerCase() === "agent-ui-annotation" || t.closest("agent-ui-annotation") ? !0 : t.hasAttribute(J) || t.hasAttribute(Q) || t.hasAttribute(tt) || t.hasAttribute(et) || t.closest(`[${J}], [${Q}], [${tt}], [${et}]`) !== null : !1;
 }
 function We(t) {
@@ -1374,7 +1374,7 @@ function We(t) {
 }
 function Ue(t) {
   const n = t.target;
-  return R(n) ? null : n;
+  return Y(n) ? null : n;
 }
 function qe(t, n) {
   let e = !1;
@@ -1394,7 +1394,7 @@ function qe(t, n) {
   }, a = (p) => {
     if (t.getState().mode !== "multi-select") return;
     const c = p.target;
-    if (R(c)) return;
+    if (Y(c)) return;
     const m = {
       x: p.clientX,
       y: p.clientY
@@ -1440,7 +1440,7 @@ function Ge(t) {
     height: window.innerHeight
   }, d = [];
   for (const h of r) {
-    if (R(h)) continue;
+    if (Y(h)) continue;
     const u = h.getBoundingClientRect();
     u.right < n || u.left > e || u.bottom < o || u.top > a || u.width > i.width * 0.8 && u.height > i.height * 0.5 || u.width < 10 || u.height < 10 || d.push(h);
   }
@@ -1456,11 +1456,11 @@ function Ke(t, n, e = {}) {
     const S = r;
     r = null, t(...S);
   }, u = (v) => {
-    const S = i !== null ? v - i : 0, $ = v - d;
-    return i === null || S >= n || S < 0 || $ >= n;
+    const S = i !== null ? v - i : 0, A = v - d;
+    return i === null || S >= n || S < 0 || A >= n;
   }, p = (v) => {
-    const S = i !== null ? v - i : 0, $ = n - S;
-    return Math.max(0, $);
+    const S = i !== null ? v - i : 0, A = n - S;
+    return Math.max(0, A);
   }, l = () => {
     const v = Date.now();
     if (u(v))
@@ -1473,8 +1473,8 @@ function Ke(t, n, e = {}) {
   }, y = () => {
     s !== null && c(Date.now());
   }, b = (...v) => {
-    const S = Date.now(), $ = u(S);
-    r = v, i = S, $ && s === null && (o && h(S), s = setTimeout(l, n));
+    const S = Date.now(), A = u(S);
+    r = v, i = S, A && s === null && (o && h(S), s = setTimeout(l, n));
   };
   return b.cancel = m, b.flush = y, b;
 }
@@ -1493,7 +1493,7 @@ function Je(t, n) {
     if (p.popupVisible || p.settingsPanelVisible)
       return;
     const l = u.target;
-    if (R(l)) {
+    if (Y(l)) {
       o !== null && (o = null, t.setState({
         hoveredElement: null,
         hoveredElementInfo: null
@@ -1548,8 +1548,8 @@ function tn(t, n) {
     e = b, o = !1;
   }, d = (b) => {
     if (!e) return;
-    const v = b.clientX - e.x, S = b.clientY - e.y, $ = Math.sqrt(v * v + S * S);
-    if (!o && $ > Qe) {
+    const v = b.clientX - e.x, S = b.clientY - e.y, A = Math.sqrt(v * v + S * S);
+    if (!o && A > Qe) {
       o = !0, s();
       const I = {
         startX: e.x,
@@ -1582,8 +1582,8 @@ function tn(t, n) {
       selectionRect: null,
       selectionPreviewElements: []
     }), !v) return [];
-    const $ = Math.abs(v.endX - v.startX), I = Math.abs(v.endY - v.startY);
-    return $ < it && I < it ? [] : S.length > 0 ? S : U(v);
+    const A = Math.abs(v.endX - v.startX), I = Math.abs(v.endY - v.startY);
+    return A < it && I < it ? [] : S.length > 0 ? S : U(v);
   }, u = () => {
     e = null, o = !1, r(), t.setState({
       isSelecting: !1,
@@ -1594,7 +1594,7 @@ function tn(t, n) {
     const v = t.getState();
     if (v.mode !== "select" && v.mode !== "multi-select" || v.popupVisible) return;
     const S = b.target;
-    R(S) || b.button === 0 && i({ x: b.clientX, y: b.clientY });
+    Y(S) || b.button === 0 && i({ x: b.clientX, y: b.clientY });
   }, l = (b) => {
     e && d(b);
   }, c = () => {
@@ -1620,7 +1620,7 @@ function U(t) {
     height: window.innerHeight
   }, d = [];
   for (const h of r) {
-    if (R(h)) continue;
+    if (Y(h)) continue;
     const u = h.getBoundingClientRect();
     !(u.right >= n && u.left <= e && u.bottom >= o && u.top <= a) || u.width > i.width * 0.8 && u.height > i.height * 0.5 || u.width < 10 || u.height < 10 || d.push(h);
   }
@@ -1751,24 +1751,24 @@ function pn(t = {}) {
     ...h,
     ...n
   }, l = Ft(
-    Yt({
+    Rt({
       settings: p,
       scopes: u
     })
-  ), c = zt(), m = Ae(l, c), y = an(l, c), b = qe(l, c), v = Je(l, c), S = tn(l, c), $ = Ye(() => l.getState().scopes, 1e3);
-  o && c.on("scope:create", ({ scope: g }) => o(g)), a && c.on("scope:update", ({ scope: g }) => a(g)), s && c.on("scope:delete", ({ id: g }) => s(g)), r && c.on("scopes:clear", ({ scopes: g }) => r(g)), c.on("scope:create", () => $.save()), c.on("scope:update", () => $.save()), c.on("scope:delete", () => $.save()), c.on("scopes:clear", () => $.save()), c.on("settings:change", ({ settings: g }) => {
+  ), c = zt(), m = Ae(l, c), y = an(l, c), b = qe(l, c), v = Je(l, c), S = tn(l, c), A = Re(() => l.getState().scopes, 1e3);
+  o && c.on("scope:create", ({ scope: g }) => o(g)), a && c.on("scope:update", ({ scope: g }) => a(g)), s && c.on("scope:delete", ({ id: g }) => s(g)), r && c.on("scopes:clear", ({ scopes: g }) => r(g)), c.on("scope:create", () => A.save()), c.on("scope:update", () => A.save()), c.on("scope:delete", () => A.save()), c.on("scopes:clear", () => A.save()), c.on("settings:change", ({ settings: g }) => {
     const w = l.getState().settings;
     ze({ ...w, ...g });
   }), c.on("element:click", ({ element: g, elementInfo: w, clickX: E, clickY: T }) => {
     if (l.getState().mode === "disabled") return;
-    const Y = w.isFixed ? T : T - window.scrollY;
+    const R = w.isFixed ? T : T - window.scrollY;
     l.setState({
       popupVisible: !0,
       popupAnnotationId: null,
       popupElementInfo: w,
       popupClickX: E,
       // X is always viewport-relative
-      popupClickY: Y,
+      popupClickY: R,
       // Convert to viewport for popup positioning
       pendingMarkerX: E,
       // Document coords for marker
@@ -1779,7 +1779,7 @@ function pn(t = {}) {
     });
   }), c.on("multiselect:end", ({ elements: g }) => {
     if (g.length === 0) return;
-    const E = l.getState().settings.outputLevel === "forensic", T = g.map((L) => _(L, E)), F = g.map((L) => L.getBoundingClientRect()), Y = Math.min(...F.map((L) => L.left)), At = Math.max(...F.map((L) => L.right)), Ct = Math.min(...F.map((L) => L.top)), Et = Math.max(...F.map((L) => L.bottom)), Mt = (Y + At) / 2, It = (Ct + Et) / 2;
+    const E = l.getState().settings.outputLevel === "forensic", T = g.map((L) => _(L, E)), F = g.map((L) => L.getBoundingClientRect()), R = Math.min(...F.map((L) => L.left)), At = Math.max(...F.map((L) => L.right)), Ct = Math.min(...F.map((L) => L.top)), Et = Math.max(...F.map((L) => L.bottom)), Mt = (R + At) / 2, It = (Ct + Et) / 2;
     l.setState({
       popupVisible: !0,
       popupAnnotationId: null,
@@ -1851,10 +1851,10 @@ function pn(t = {}) {
     getSettings: () => l.getState().settings,
     copyOutput: async (g) => {
       const w = l.getState(), E = g || w.settings.outputLevel, T = m.getAllScopes(), F = rt(T, E);
-      let Y = !0;
-      return d && (Y = await Be(F)), Y && (l.setState({ showCopiedFeedback: !0 }), setTimeout(() => {
+      let R = !0;
+      return d && (R = await Be(F)), R && (l.setState({ showCopiedFeedback: !0 }), setTimeout(() => {
         l.setState({ showCopiedFeedback: !1 });
-      }, 2e3), i && i(F, E), c.emit("output:copy", { content: F, level: E }), w.settings.autoClearAfterCopy && m.clearAllScopes()), Y;
+      }, 2e3), i && i(F, E), c.emit("output:copy", { content: F, level: E }), w.settings.autoClearAfterCopy && m.clearAllScopes()), R;
     },
     getOutput: (g) => {
       const w = l.getState(), E = g || w.settings.outputLevel, T = m.getAllScopes();
@@ -1895,7 +1895,7 @@ function pn(t = {}) {
     },
     subscribe: (g) => l.subscribe(g),
     destroy: () => {
-      H(), $.flush(), $.destroy(), y.destroy(), c.destroy(), l.destroy();
+      H(), A.flush(), A.destroy(), y.destroy(), c.destroy(), l.destroy();
     }
   };
 }
@@ -3091,26 +3091,30 @@ function Mn(t) {
 class In extends HTMLElement {
   constructor() {
     super();
-    A(this, "core", null);
-    A(this, "shadow");
-    A(this, "unsubscribe", null);
-    A(this, "styleElement");
-    A(this, "contentElement");
+    $(this, "core", null);
+    $(this, "shadow");
+    $(this, "unsubscribe", null);
+    $(this, "styleElement");
+    $(this, "contentElement");
     // Popup state
-    A(this, "isComposing", !1);
-    A(this, "popupShaking", !1);
+    $(this, "isComposing", !1);
+    $(this, "popupShaking", !1);
     // Hover tracking
-    A(this, "mouseX", 0);
-    A(this, "mouseY", 0);
-    A(this, "hoveredMarkerId", null);
+    $(this, "mouseX", 0);
+    $(this, "mouseY", 0);
+    $(this, "hoveredMarkerId", null);
     // Track if toolbar has been shown before (to prevent re-animation)
-    A(this, "toolbarShownOnce", !1);
+    $(this, "toolbarShownOnce", !1);
     // Track if settings panel has animated (to prevent re-animation on state changes)
-    A(this, "settingsPanelAnimated", !1);
+    $(this, "settingsPanelAnimated", !1);
     // Track which marker tooltip has animated (to prevent re-animation)
-    A(this, "animatedMarkerTooltipId", null);
+    $(this, "animatedMarkerTooltipId", null);
+    // Bound handlers for cleanup in disconnectedCallback
+    $(this, "boundHandleResize", () => this.handleWindowResize());
+    $(this, "boundHandleMouseMove", (e) => this.handleMouseMove(e));
+    $(this, "boundHandleDocumentClick", (e) => this.handleDocumentClick(e));
     // Track last rendered settings to avoid unnecessary re-renders when settings panel is open
-    A(this, "lastRenderedSettings", null);
+    $(this, "lastRenderedSettings", null);
     this.shadow = this.attachShadow({ mode: "open" }), this.styleElement = document.createElement("style"), this.styleElement.textContent = mn, this.contentElement = document.createElement("div"), this.contentElement.className = "annotation-root", this.shadow.appendChild(this.styleElement), this.shadow.appendChild(this.contentElement);
   }
   static get observedAttributes() {
@@ -3128,7 +3132,7 @@ class In extends HTMLElement {
     }), this.unsubscribe = this.core.subscribe((e) => this.render(e)), this.setupEventListeners(), this.render(this.core.store.getState()), this.updateThemeAttribute();
   }
   disconnectedCallback() {
-    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = null), this.core && (this.core.destroy(), this.core = null);
+    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = null), window.removeEventListener("resize", this.boundHandleResize), document.removeEventListener("mousemove", this.boundHandleMouseMove), document.removeEventListener("click", this.boundHandleDocumentClick), this.core && (this.core.destroy(), this.core = null);
   }
   attributeChangedCallback(e, o, a) {
     if (!(o === a || !this.core))
@@ -3191,11 +3195,23 @@ class In extends HTMLElement {
     this.setAttribute("data-theme", e), e === "auto" && this.setAttribute("data-resolved-theme", o);
   }
   setupEventListeners() {
-    this.shadow.addEventListener("click", this.handleClick.bind(this)), this.shadow.addEventListener("mouseover", this.handleMouseOver.bind(this)), this.shadow.addEventListener("mouseout", this.handleMouseOut.bind(this)), document.addEventListener("mousemove", this.handleMouseMove.bind(this)), this.shadow.addEventListener("keydown", this.handleKeyDown.bind(this)), this.shadow.addEventListener("compositionstart", () => {
+    this.shadow.addEventListener("click", this.handleClick.bind(this)), this.shadow.addEventListener("mouseover", this.handleMouseOver.bind(this)), this.shadow.addEventListener("mouseout", this.handleMouseOut.bind(this)), document.addEventListener("mousemove", this.boundHandleMouseMove), this.shadow.addEventListener("keydown", this.handleKeyDown.bind(this)), this.shadow.addEventListener("compositionstart", () => {
       this.isComposing = !0;
     }), this.shadow.addEventListener("compositionend", () => {
-      this.isComposing = !1;
-    }), this.shadow.addEventListener("change", this.handleChange.bind(this)), document.addEventListener("click", this.handleDocumentClick.bind(this));
+      this.isComposing = !1, this.core && this.render(this.core.store.getState());
+    }), this.shadow.addEventListener("change", this.handleChange.bind(this)), document.addEventListener("click", this.boundHandleDocumentClick), window.addEventListener("resize", this.boundHandleResize);
+  }
+  handleWindowResize() {
+    if (!this.core) return;
+    const e = this.core.store.getState();
+    let o = !1;
+    const a = new Map(e.scopes);
+    for (const [s, r] of a) {
+      if (!r.element || !r.element.isConnected) continue;
+      const i = r.element.getBoundingClientRect(), d = i.left + i.width / 2, h = i.top + i.height / 2, u = d, p = r.elementInfo.isFixed ? h : h + window.scrollY;
+      (u !== r.clickX || p !== r.clickY) && (a.set(s, { ...r, clickX: u, clickY: p }), o = !0);
+    }
+    o && this.core.store.setState({ scopes: a }), this.render(this.core.store.getState());
   }
   handleDocumentClick(e) {
     if (!this.core || !this.core.store.getState().settingsPanelVisible) return;
@@ -3332,6 +3348,8 @@ class In extends HTMLElement {
   }
   render(e) {
     const o = e.settings, a = Array.from(e.scopes.values()).sort((i, d) => i.number - d.number), s = G(o.theme);
+    if (this.isComposing && e.popupVisible)
+      return;
     if (e.settingsPanelVisible) {
       const i = JSON.stringify({
         settings: o,
@@ -3471,6 +3489,6 @@ export {
   f as l,
   Wn as r,
   x as t,
-  Re as z
+  Ye as z
 };
-//# sourceMappingURL=annotation-element-CJm7-qrT.js.map
+//# sourceMappingURL=annotation-element-z6TdBGsn.js.map