agent-ui-annotation 0.1.0

package/dist/agent-ui-annotation.js

@@ -0,0 +1,3263 @@
+var St = Object.defineProperty;
+var wt = (t, n, e) => n in t ? St(t, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[n] = e;
+var w = (t, n, e) => wt(t, typeof n != "symbol" ? n + "" : n, e);
+function $t(t) {
+  let n = { ...t };
+  const e = /* @__PURE__ */ new Set();
+  let o = !1, a = !1, r = !1;
+  const s = () => {
+    r || e.forEach((d) => {
+      try {
+        if (d.selector) {
+          const h = d.selector(n);
+          Object.is(h, d.prevSelected) || (d.prevSelected = h, d.listener(n));
+        } else
+          d.listener(n);
+      } catch (h) {
+        console.error("[Annotation Store] Listener error:", h);
+      }
+    });
+  };
+  return {
+    getState: () => n,
+    setState: (d) => {
+      if (r) return;
+      const h = typeof d == "function" ? d(n) : d, v = { ...n, ...h };
+      Object.keys(h).some(
+        (b) => !Object.is(n[b], v[b])
+      ) && (n = v, o ? a = !0 : s());
+    },
+    subscribe: (d, h) => {
+      if (r) return () => {
+      };
+      const v = {
+        listener: d,
+        selector: h,
+        prevSelected: h ? h(n) : void 0
+      };
+      return e.add(v), () => {
+        e.delete(v);
+      };
+    },
+    batch: (d) => {
+      if (!r) {
+        o = !0, a = !1;
+        try {
+          d();
+        } finally {
+          o = !1, a && s();
+        }
+      }
+    },
+    reset: (d) => {
+      r || (n = { ...d }, s());
+    },
+    destroy: () => {
+      r = !0, e.clear();
+    }
+  };
+}
+function At() {
+  const t = /* @__PURE__ */ new Map();
+  let n = !1;
+  const e = (i, p) => {
+    if (n) return;
+    const f = t.get(i);
+    if (!f) return;
+    Array.from(f).forEach((c) => {
+      try {
+        c(p);
+      } catch (l) {
+        console.error(`[Annotation EventBus] Error in handler for "${String(i)}":`, l);
+      }
+    });
+  }, o = (i, p) => {
+    if (n) return () => {
+    };
+    t.has(i) || t.set(i, /* @__PURE__ */ new Set());
+    const f = t.get(i);
+    return f.add(p), () => {
+      f.delete(p), f.size === 0 && t.delete(i);
+    };
+  };
+  return {
+    emit: e,
+    on: o,
+    once: (i, p) => {
+      const f = o(i, (u) => {
+        f(), p(u);
+      });
+      return f;
+    },
+    off: (i) => {
+      n || (i !== void 0 ? t.delete(i) : t.clear());
+    },
+    destroy: () => {
+      n = !0, t.clear();
+    }
+  };
+}
+const st = {
+  theme: "auto",
+  outputLevel: "standard",
+  toolbarPosition: "bottom-right",
+  showTooltips: !0,
+  showMarkerNumbers: !0,
+  freezeOnScope: !1,
+  persistScopes: !0,
+  scopeColor: "#AF52DE",
+  // purple
+  blockInteractions: !0,
+  autoClearAfterCopy: !1
+}, Et = {
+  x: 20,
+  y: 20
+};
+function Ct(t) {
+  return {
+    scopes: /* @__PURE__ */ new Map(),
+    selectedAnnotationId: null,
+    hoveredElement: null,
+    hoveredElementInfo: null,
+    mode: "disabled",
+    toolbarExpanded: !1,
+    toolbarPosition: { ...Et },
+    settings: { ...st },
+    isSelecting: !1,
+    selectionRect: null,
+    selectionPreviewElements: [],
+    isFrozen: !1,
+    popupVisible: !1,
+    popupAnnotationId: null,
+    popupElementInfo: null,
+    popupClickX: 0,
+    popupClickY: 0,
+    pendingMarkerX: 0,
+    pendingMarkerY: 0,
+    pendingMarkerIsFixed: !1,
+    multiSelectElements: [],
+    multiSelectInfos: [],
+    markersVisible: !0,
+    animatingMarkers: /* @__PURE__ */ new Set(),
+    exitingMarkers: /* @__PURE__ */ new Set(),
+    deletingMarkerId: null,
+    renumberFrom: null,
+    showCopiedFeedback: !1,
+    showClearedFeedback: !1,
+    scrollY: 0,
+    showEntranceAnimation: !0,
+    isDraggingToolbar: !1,
+    settingsPanelVisible: !1,
+    ...t
+  };
+}
+const Mt = 40;
+function x(t, n = Mt) {
+  const e = t.trim().replace(/\s+/g, " ");
+  return e.length <= n ? e : e.slice(0, n - 3) + "...";
+}
+function E(t) {
+  var e;
+  if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement)
+    return t.value || t.placeholder || "";
+  if (t instanceof HTMLSelectElement)
+    return ((e = t.options[t.selectedIndex]) == null ? void 0 : e.text) || "";
+  const n = t.cloneNode(!0);
+  return n.querySelectorAll('script, style, [aria-hidden="true"]').forEach((o) => o.remove()), n.textContent || "";
+}
+function F(t) {
+  const n = t.getAttribute("aria-label");
+  if (n) return n;
+  const e = t.getAttribute("aria-labelledby");
+  if (e) {
+    const o = document.getElementById(e);
+    if (o)
+      return E(o);
+  }
+  return null;
+}
+function K(t) {
+  var o;
+  const n = t.id;
+  if (n) {
+    const a = document.querySelector(`label[for="${n}"]`);
+    if (a)
+      return E(a);
+  }
+  const e = t.closest("label");
+  if (e) {
+    const a = e.cloneNode(!0);
+    a.querySelectorAll("input, select, textarea").forEach((s) => s.remove());
+    const r = (o = a.textContent) == null ? void 0 : o.trim();
+    if (r) return r;
+  }
+  return null;
+}
+function it(t) {
+  const n = Array.from(t.children);
+  if (n.length === 0) return !1;
+  const e = n.every(
+    (a) => a.tagName === "SVG" || a.tagName === "svg" || a.classList.contains("icon") || a.tagName === "I"
+  ), o = E(t).trim();
+  return e && !o;
+}
+function It(t) {
+  const n = x(E(t));
+  if (n)
+    return `button "${n}"`;
+  const e = F(t);
+  if (e)
+    return `button [${x(e)}]`;
+  const o = t.getAttribute("title");
+  if (o)
+    return `button [${x(o)}]`;
+  if (it(t))
+    return "icon button";
+  const a = t.getAttribute("type");
+  return a && a !== "button" ? `${a} button` : "button";
+}
+function Tt(t) {
+  const n = x(E(t));
+  if (n)
+    return `link "${n}"`;
+  const e = F(t);
+  if (e)
+    return `link [${x(e)}]`;
+  const o = t.getAttribute("href");
+  if (o && o !== "#")
+    try {
+      const a = new URL(o, window.location.origin);
+      return a.origin === window.location.origin ? `link to ${a.pathname}` : `link to ${a.hostname}`;
+    } catch {
+      return `link to ${x(o, 30)}`;
+    }
+  return it(t) ? "icon link" : "link";
+}
+function Lt(t) {
+  const n = t.type || "text", e = K(t), o = t.placeholder, a = t.name, r = F(t);
+  let s = "";
+  switch (e ? s = `"${x(e)}"` : r ? s = `[${x(r)}]` : o ? s = `"${x(o)}"` : a && (s = `[${a}]`), n) {
+    case "submit":
+      return `submit button${s ? " " + s : ""}`;
+    case "checkbox":
+      return `checkbox${s ? " " + s : ""}`;
+    case "radio":
+      return `radio${s ? " " + s : ""}`;
+    case "file":
+      return `file input${s ? " " + s : ""}`;
+    case "search":
+      return `search input${s ? " " + s : ""}`;
+    case "email":
+      return `email input${s ? " " + s : ""}`;
+    case "password":
+      return `password input${s ? " " + s : ""}`;
+    case "number":
+      return `number input${s ? " " + s : ""}`;
+    case "tel":
+      return `phone input${s ? " " + s : ""}`;
+    case "url":
+      return `URL input${s ? " " + s : ""}`;
+    case "date":
+    case "datetime-local":
+    case "time":
+      return `${n} input${s ? " " + s : ""}`;
+    case "range":
+      return `slider${s ? " " + s : ""}`;
+    case "color":
+      return `color picker${s ? " " + s : ""}`;
+    default:
+      return `text input${s ? " " + s : ""}`;
+  }
+}
+function Ft(t) {
+  const n = K(t), e = F(t), o = t.name;
+  let a = "";
+  return n ? a = ` "${x(n)}"` : e ? a = ` [${x(e)}]` : o && (a = ` [${o}]`), `dropdown${a}`;
+}
+function zt(t) {
+  const n = K(t), e = F(t), o = t.placeholder, a = t.name;
+  let r = "";
+  return n ? r = ` "${x(n)}"` : e ? r = ` [${x(e)}]` : o ? r = ` "${x(o)}"` : a && (r = ` [${a}]`), `text area${r}`;
+}
+function Pt(t) {
+  const n = t.tagName.toLowerCase(), e = x(E(t));
+  return e ? `${n} "${e}"` : n;
+}
+function Yt(t, n) {
+  const e = x(E(t), 50);
+  return e ? `${n}: "${e}"` : n;
+}
+function Rt(t) {
+  const n = t.alt;
+  if (n)
+    return `image "${x(n)}"`;
+  const e = F(t);
+  if (e)
+    return `image [${x(e)}]`;
+  const o = t.src;
+  if (o)
+    try {
+      const r = new URL(o).pathname.split("/").pop();
+      if (r && !r.includes("?"))
+        return `image "${x(r, 30)}"`;
+    } catch {
+    }
+  return "image";
+}
+function Ht(t) {
+  if (t.closest('button, a, [role="button"]'))
+    return "icon";
+  const e = F(t);
+  if (e)
+    return `graphic [${x(e)}]`;
+  const o = t.querySelector("title");
+  return o != null && o.textContent ? `graphic "${x(o.textContent)}"` : "icon";
+}
+function Xt(t) {
+  const n = F(t);
+  return n ? `video [${x(n)}]` : "video";
+}
+function Dt(t) {
+  const n = t.tagName === "TH", e = x(E(t), 30), o = n ? "table header" : "table cell";
+  return e ? `${o}: "${e}"` : o;
+}
+function Ot(t) {
+  const n = x(E(t), 50);
+  return n ? `list item: "${n}"` : "list item";
+}
+function Nt(t) {
+  const n = x(E(t));
+  return n ? `label "${n}"` : "label";
+}
+function jt(t) {
+  const n = t.getAttribute("role");
+  if (n)
+    return n;
+  const e = Array.from(t.classList), o = ["header", "footer", "nav", "sidebar", "main", "content", "article", "section", "card", "modal", "dialog", "menu", "dropdown", "panel", "container", "wrapper"];
+  for (const r of e) {
+    const s = r.toLowerCase();
+    for (const i of o)
+      if (s.includes(i))
+        return i;
+  }
+  const a = t.getAttribute("data-testid") || t.getAttribute("data-test-id");
+  return a ? a.replace(/[-_]/g, " ") : t.tagName.toLowerCase();
+}
+function X(t) {
+  const n = t.tagName.toLowerCase();
+  if (n === "button" || t.getAttribute("role") === "button" || t instanceof HTMLInputElement && (t.type === "button" || t.type === "submit" || t.type === "reset"))
+    return It(t);
+  if (n === "a")
+    return Tt(t);
+  if (n === "input")
+    return Lt(t);
+  if (n === "select")
+    return Ft(t);
+  if (n === "textarea")
+    return zt(t);
+  if (/^h[1-6]$/.test(n))
+    return Pt(t);
+  if (n === "p")
+    return Yt(t, "paragraph");
+  if (n === "span") {
+    const e = x(E(t));
+    return e ? `text: "${e}"` : "text";
+  }
+  if (n === "code") {
+    const e = x(E(t), 30);
+    return e ? `code: \`${e}\`` : "code";
+  }
+  return n === "pre" ? "code block" : n === "blockquote" ? "blockquote" : n === "img" ? Rt(t) : n === "svg" ? Ht(t) : n === "video" ? Xt(t) : n === "audio" ? "audio" : n === "canvas" ? "canvas" : n === "iframe" ? "iframe" : n === "th" || n === "td" ? Dt(t) : n === "tr" ? "table row" : n === "table" ? "table" : n === "li" ? Ot(t) : n === "ul" ? "unordered list" : n === "ol" ? "ordered list" : n === "label" ? Nt(t) : n === "nav" ? "navigation" : n === "header" ? "header" : n === "footer" ? "footer" : n === "main" ? "main content" : n === "aside" ? "sidebar" : n === "article" ? "article" : n === "section" ? "section" : n === "form" ? "form" : n === "figure" ? "figure" : n === "figcaption" ? "caption" : jt(t);
+}
+const G = /[-_][a-zA-Z0-9]{5,}$/, Z = [
+  // Webpack/CSS Modules: component_abc123 or component-abc123
+  /^(.+?)[-_][a-zA-Z0-9]{5,}$/,
+  // Styled-components: sc-abc123
+  /^sc-[a-zA-Z0-9]+$/,
+  // Emotion: css-abc123
+  /^css-[a-zA-Z0-9]+$/,
+  // Tailwind JIT: arbitrary values like [color:red]
+  /^\[.+\]$/
+], lt = [
+  "text-",
+  "bg-",
+  "flex",
+  "grid",
+  "p-",
+  "px-",
+  "py-",
+  "m-",
+  "mx-",
+  "my-",
+  "w-",
+  "h-",
+  "min-",
+  "max-",
+  "border",
+  "rounded",
+  "shadow",
+  "opacity",
+  "font-",
+  "leading-",
+  "tracking-",
+  "space-",
+  "gap-",
+  "items-",
+  "justify-",
+  "self-",
+  "overflow-",
+  "z-",
+  "cursor-",
+  "transition",
+  "transform",
+  "scale-",
+  "rotate-",
+  "translate-",
+  "animate-",
+  "duration-",
+  "ease-",
+  "delay-",
+  "hidden",
+  "block",
+  "inline",
+  "relative",
+  "absolute",
+  "fixed",
+  "sticky",
+  "static",
+  "top-",
+  "right-",
+  "bottom-",
+  "left-",
+  "inset-"
+];
+function ct(t) {
+  const n = t.trim();
+  if (!n) return null;
+  if (lt.some((o) => n.startsWith(o)))
+    return n;
+  for (const o of Z.slice(1))
+    if (o.test(n))
+      return null;
+  const e = n.match(Z[0]);
+  return e ? e[1] : G.test(n) ? n.replace(G, "") : n;
+}
+function Vt(t) {
+  const n = Array.isArray(t) ? t : Array.from(t), e = /* @__PURE__ */ new Set();
+  for (const o of n) {
+    const a = ct(o);
+    a && e.add(a);
+  }
+  return Array.from(e);
+}
+function dt(t) {
+  return Vt(t.classList).filter((e) => e.length > 2);
+}
+function _t(t) {
+  const n = dt(t);
+  return n.find(
+    (o) => !lt.some((a) => o.startsWith(a))
+  ) || n[0] || null;
+}
+const Bt = 4, ut = /* @__PURE__ */ new Set(["html", "body", "main", "div", "span"]), pt = /* @__PURE__ */ new Set([
+  "header",
+  "footer",
+  "nav",
+  "aside",
+  "article",
+  "section",
+  "form",
+  "table",
+  "ul",
+  "ol",
+  "dialog"
+]);
+function ft(t) {
+  const n = t.tagName.toLowerCase();
+  if (t.id) {
+    const r = ct(t.id);
+    if (r && r === t.id)
+      return `#${t.id}`;
+  }
+  const e = _t(t);
+  if (pt.has(n))
+    return e ? `${n}.${e}` : n;
+  if (e)
+    return ut.has(n) ? `.${e}` : `${n}.${e}`;
+  const o = t.getAttribute("role");
+  if (o)
+    return `[role="${o}"]`;
+  const a = t.getAttribute("data-testid") || t.getAttribute("data-test-id");
+  if (a)
+    return `[data-testid="${a}"]`;
+  if ((t instanceof HTMLInputElement || t instanceof HTMLSelectElement || t instanceof HTMLTextAreaElement) && t.name)
+    return `${n}[name="${t.name}"]`;
+  if (t instanceof HTMLInputElement || t instanceof HTMLButtonElement) {
+    const r = t.type;
+    if (r && r !== "text" && r !== "submit")
+      return `${n}[type="${r}"]`;
+  }
+  if (t instanceof HTMLAnchorElement && t.href)
+    try {
+      const r = new URL(t.href);
+      if (r.origin === window.location.origin && r.pathname !== "/")
+        return `a[href="${r.pathname}"]`;
+    } catch {
+    }
+  return n;
+}
+function O(t, n) {
+  try {
+    const e = document.querySelectorAll(t);
+    return e.length === 1 && e[0] === n;
+  } catch {
+    return !1;
+  }
+}
+function Wt(t) {
+  const n = t.parentElement;
+  if (!n) return "";
+  const e = Array.from(n.children).filter(
+    (a) => a.tagName === t.tagName
+  );
+  return e.length <= 1 ? "" : `:nth-of-type(${e.indexOf(t) + 1})`;
+}
+function Ut(t) {
+  const n = [];
+  let e = t, o = 0;
+  for (; e && o < Bt; ) {
+    const a = e.tagName.toLowerCase();
+    if (a === "body" || a === "html")
+      break;
+    const r = ft(e);
+    if (r.startsWith("#")) {
+      n.unshift(r);
+      break;
+    }
+    if (ut.has(a) && r === a) {
+      e = e.parentElement;
+      continue;
+    }
+    if (n.unshift(r), o++, pt.has(a) && o >= 2)
+      break;
+    e = e.parentElement;
+  }
+  return n;
+}
+function qt(t) {
+  const n = ft(t);
+  if (n.startsWith("#") || O(n, t))
+    return n;
+  const e = Ut(t);
+  if (e.length === 0)
+    return t.tagName.toLowerCase();
+  let o = e.join(" > ");
+  if (O(o, t))
+    return o;
+  const a = e[e.length - 1], r = Wt(t);
+  return r && (e[e.length - 1] = a + r, o = e.join(" > "), O(o, t)), o;
+}
+function Kt(t) {
+  const n = [];
+  let e = t;
+  for (; e; ) {
+    const o = e.tagName.toLowerCase();
+    if (o === "html") {
+      n.unshift("html");
+      break;
+    }
+    let a = o;
+    e.id && (a += `#${e.id}`);
+    const r = Array.from(e.classList).slice(0, 3);
+    r.length > 0 && (a += "." + r.join("."));
+    const s = e.parentElement;
+    if (s) {
+      const i = Array.from(s.children);
+      if (i.length > 1) {
+        const p = i.indexOf(e) + 1;
+        a += `:nth-child(${p})`;
+      }
+    }
+    n.unshift(a), e = e.parentElement;
+  }
+  return n.join(" > ");
+}
+const Gt = [
+  "a[href]",
+  "button",
+  'input:not([type="hidden"])',
+  "select",
+  "textarea",
+  '[tabindex]:not([tabindex="-1"])',
+  '[role="button"]',
+  '[role="link"]',
+  '[role="checkbox"]',
+  '[role="radio"]',
+  '[role="menuitem"]',
+  '[role="tab"]',
+  '[role="option"]',
+  '[role="switch"]',
+  '[role="slider"]',
+  '[role="textbox"]',
+  '[role="combobox"]',
+  '[contenteditable="true"]'
+];
+function Zt(t) {
+  for (const e of Gt)
+    try {
+      if (t.matches(e))
+        return !0;
+    } catch {
+    }
+  return !!(t.hasAttribute("onclick") || t.hasAttribute("data-onclick") || window.getComputedStyle(t).cursor === "pointer");
+}
+function Jt(t) {
+  const n = t.getAttribute("role");
+  if (n)
+    return n;
+  const e = t.tagName.toLowerCase();
+  return {
+    a: t.hasAttribute("href") ? "link" : null,
+    article: "article",
+    aside: "complementary",
+    button: "button",
+    dialog: "dialog",
+    footer: "contentinfo",
+    form: "form",
+    h1: "heading",
+    h2: "heading",
+    h3: "heading",
+    h4: "heading",
+    h5: "heading",
+    h6: "heading",
+    header: "banner",
+    img: "img",
+    input: Qt(t),
+    li: "listitem",
+    main: "main",
+    nav: "navigation",
+    ol: "list",
+    option: "option",
+    progress: "progressbar",
+    section: t.hasAttribute("aria-label") || t.hasAttribute("aria-labelledby") ? "region" : null,
+    select: "combobox",
+    table: "table",
+    tbody: "rowgroup",
+    td: "cell",
+    textarea: "textbox",
+    th: "columnheader",
+    thead: "rowgroup",
+    tr: "row",
+    ul: "list"
+  }[e] || null;
+}
+function Qt(t) {
+  const n = t.type;
+  return {
+    button: "button",
+    checkbox: "checkbox",
+    email: "textbox",
+    image: "button",
+    number: "spinbutton",
+    radio: "radio",
+    range: "slider",
+    reset: "button",
+    search: "searchbox",
+    submit: "button",
+    tel: "textbox",
+    text: "textbox",
+    url: "textbox"
+  }[n] || "textbox";
+}
+function te(t) {
+  return t.hasAttribute("tabindex") ? t.tabIndex : t.matches('a[href], button, input, select, textarea, [contenteditable="true"]') ? 0 : null;
+}
+function _(t) {
+  var o;
+  if (!t) return null;
+  const n = t.split(/\s+/), e = [];
+  for (const a of n) {
+    const r = document.getElementById(a);
+    if (r) {
+      const s = (o = r.textContent) == null ? void 0 : o.trim();
+      s && e.push(s);
+    }
+  }
+  return e.length > 0 ? e.join(" ") : null;
+}
+function ee(t) {
+  return {
+    role: Jt(t),
+    ariaLabel: t.getAttribute("aria-label"),
+    ariaDescribedBy: _(t.getAttribute("aria-describedby")),
+    ariaLabelledBy: _(t.getAttribute("aria-labelledby")),
+    tabIndex: te(t),
+    isInteractive: Zt(t)
+  };
+}
+function ne(t) {
+  const n = ["banner", "complementary", "contentinfo", "form", "main", "navigation", "region", "search"], e = ["header", "footer", "nav", "main", "aside", "form", "section"];
+  let o = t.parentElement;
+  for (; o && o !== document.body; ) {
+    const a = o.getAttribute("role");
+    if (a && n.includes(a))
+      return o;
+    const r = o.tagName.toLowerCase();
+    if (e.includes(r))
+      if (r === "section") {
+        if (o.hasAttribute("aria-label") || o.hasAttribute("aria-labelledby"))
+          return o;
+      } else
+        return o;
+    o = o.parentElement;
+  }
+  return null;
+}
+function oe(t) {
+  if (!t) return null;
+  const n = t.getAttribute("role") || t.tagName.toLowerCase(), e = t.getAttribute("aria-label");
+  if (e)
+    return `${n} "${e}"`;
+  const o = t.getAttribute("aria-labelledby");
+  if (o) {
+    const a = _(o);
+    if (a)
+      return `${n} "${a}"`;
+  }
+  return n;
+}
+function ae(t) {
+  return t.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function re(t) {
+  const n = window.getComputedStyle(t);
+  return {
+    display: n.display,
+    position: n.position,
+    visibility: n.visibility,
+    opacity: n.opacity,
+    zIndex: n.zIndex,
+    overflow: n.overflow,
+    pointerEvents: n.pointerEvents,
+    cursor: n.cursor,
+    backgroundColor: n.backgroundColor,
+    color: n.color,
+    fontSize: n.fontSize,
+    fontFamily: n.fontFamily,
+    fontWeight: n.fontWeight,
+    lineHeight: n.lineHeight,
+    padding: n.padding,
+    margin: n.margin,
+    border: n.border,
+    borderRadius: n.borderRadius,
+    boxShadow: n.boxShadow,
+    transform: n.transform,
+    transition: n.transition
+  };
+}
+function se(t) {
+  return Object.entries(t).map(([n, e]) => `${ae(n)}: ${e}`).join(`
+`);
+}
+function ie(t) {
+  let n = t;
+  for (; n && n !== document.body && n !== document.documentElement; ) {
+    const o = window.getComputedStyle(n).position;
+    if (o === "fixed" || o === "sticky")
+      return !0;
+    n = n.parentElement;
+  }
+  return !1;
+}
+const J = 200;
+function le(t) {
+  const n = t.getBoundingClientRect();
+  return {
+    top: n.top,
+    left: n.left,
+    width: n.width,
+    height: n.height,
+    bottom: n.bottom,
+    right: n.right
+  };
+}
+function ce(t) {
+  const n = t.parentElement, e = t.previousElementSibling, o = t.nextElementSibling, a = ne(t);
+  return {
+    parent: n ? X(n) : null,
+    previousSibling: e ? X(e) : null,
+    nextSibling: o ? X(o) : null,
+    containingLandmark: oe(a)
+  };
+}
+function de(t) {
+  const n = {}, e = /* @__PURE__ */ new Set(["class", "style", "id"]);
+  for (const o of Array.from(t.attributes))
+    e.has(o.name) || (n[o.name] = o.value);
+  return n;
+}
+function ue(t) {
+  const e = (t.textContent || "").trim().replace(/\s+/g, " ");
+  return e.length <= J ? e : e.slice(0, J - 3) + "...";
+}
+function D(t, n = !1) {
+  return {
+    humanReadable: X(t),
+    selectorPath: qt(t),
+    fullDomPath: Kt(t),
+    tagName: t.tagName.toLowerCase(),
+    id: t.id || null,
+    classes: dt(t),
+    rect: le(t),
+    accessibility: ee(t),
+    computedStyles: n ? re(t) : null,
+    nearbyContext: ce(t),
+    innerText: ue(t),
+    attributes: de(t),
+    isFixed: ie(t)
+  };
+}
+function pe() {
+  return `scope-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function fe(t) {
+  return t.size === 0 ? 1 : Math.max(...Array.from(t.values()).map((e) => e.number)) + 1;
+}
+function he(t, n, e, o = {}) {
+  const {
+    selectedText: a = null,
+    isMultiSelect: r = !1,
+    includeForensic: s = !1,
+    clickX: i = 0,
+    clickY: p = 0
+  } = o, f = Date.now(), u = D(t, s);
+  return {
+    id: pe(),
+    number: fe(e),
+    comment: n,
+    elementInfo: u,
+    element: t,
+    createdAt: f,
+    updatedAt: f,
+    selectedText: a,
+    isMultiSelect: r,
+    clickX: i,
+    clickY: p
+  };
+}
+function me(t, n) {
+  return {
+    ...t,
+    comment: n,
+    updatedAt: Date.now()
+  };
+}
+function ge(t, n) {
+  const e = /* @__PURE__ */ new Map();
+  for (const [o, a] of t)
+    a.number > n ? e.set(o, {
+      ...a,
+      number: a.number - 1
+    }) : e.set(o, a);
+  return e;
+}
+function be(t, n) {
+  return {
+    addScope: (u, c, l) => {
+      const d = t.getState(), h = d.settings.outputLevel === "forensic", v = he(u, c, d.scopes, {
+        ...l,
+        includeForensic: h
+      }), g = new Map(d.scopes);
+      return g.set(v.id, v), t.setState({ scopes: g }), n.emit("scope:create", { scope: v }), v;
+    },
+    updateScope: (u, c) => {
+      const l = t.getState(), d = l.scopes.get(u);
+      if (!d) return null;
+      const h = c.comment !== void 0 ? me(d, c.comment) : d, v = new Map(l.scopes);
+      return v.set(u, h), t.setState({ scopes: v }), n.emit("scope:update", { scope: h }), h;
+    },
+    deleteScope: (u) => {
+      const c = t.getState(), l = c.scopes.get(u);
+      if (!l) return !1;
+      const d = l.number, h = new Map(c.scopes);
+      h.delete(u);
+      const v = ge(h, d);
+      return t.batch(() => {
+        t.setState({
+          scopes: v,
+          deletingMarkerId: u,
+          renumberFrom: d
+        }), setTimeout(() => {
+          t.setState({
+            deletingMarkerId: null,
+            renumberFrom: null
+          });
+        }, 300);
+      }), n.emit("scope:delete", { id: u }), !0;
+    },
+    clearAllScopes: () => {
+      const u = t.getState(), c = Array.from(u.scopes.values());
+      return t.batch(() => {
+        t.setState({
+          scopes: /* @__PURE__ */ new Map(),
+          selectedAnnotationId: null,
+          showClearedFeedback: !0
+        }), setTimeout(() => {
+          t.setState({ showClearedFeedback: !1 });
+        }, 2e3);
+      }), n.emit("scopes:clear", { scopes: c }), c;
+    },
+    selectScope: (u) => {
+      t.setState({ selectedAnnotationId: u }), n.emit("scope:select", { id: u });
+    },
+    getScope: (u) => t.getState().scopes.get(u),
+    getAllScopes: () => Array.from(t.getState().scopes.values()).sort((u, c) => u.number - c.number),
+    getScopeCount: () => t.getState().scopes.size
+  };
+}
+const ve = "annotation-scopes-", ht = "annotation-settings", xe = 7 * 24 * 60 * 60 * 1e3;
+function mt() {
+  return ve + window.location.pathname;
+}
+function ye(t) {
+  return {
+    id: t.id,
+    number: t.number,
+    comment: t.comment,
+    elementInfo: t.elementInfo,
+    createdAt: t.createdAt,
+    updatedAt: t.updatedAt,
+    selectedText: t.selectedText,
+    isMultiSelect: t.isMultiSelect,
+    clickX: t.clickX,
+    clickY: t.clickY
+  };
+}
+function ke(t) {
+  return {
+    ...t,
+    element: null
+    // DOM reference can't be restored
+  };
+}
+function Se(t) {
+  const n = Date.now() - xe;
+  return t.filter((e) => e.createdAt > n);
+}
+function we(t) {
+  try {
+    const n = mt(), e = Array.from(t.values()).map(ye);
+    return localStorage.setItem(n, JSON.stringify(e)), !0;
+  } catch (n) {
+    return console.error("[Annotation] Failed to save scopes:", n), !1;
+  }
+}
+function $e() {
+  try {
+    const t = mt(), n = localStorage.getItem(t);
+    if (!n)
+      return /* @__PURE__ */ new Map();
+    const e = JSON.parse(n), o = Se(e);
+    o.length !== e.length && localStorage.setItem(t, JSON.stringify(o));
+    const a = /* @__PURE__ */ new Map();
+    for (const r of o)
+      a.set(r.id, ke(r));
+    return a;
+  } catch (t) {
+    return console.error("[Annotation] Failed to load scopes:", t), /* @__PURE__ */ new Map();
+  }
+}
+function Ae(t) {
+  try {
+    return localStorage.setItem(ht, JSON.stringify(t)), !0;
+  } catch (n) {
+    return console.error("[Annotation] Failed to save settings:", n), !1;
+  }
+}
+function Ee() {
+  try {
+    const t = localStorage.getItem(ht);
+    return t ? JSON.parse(t) : null;
+  } catch (t) {
+    return console.error("[Annotation] Failed to load settings:", t), null;
+  }
+}
+function Ce(t, n = 1e3) {
+  let e = null;
+  const o = () => {
+    e !== null && (clearTimeout(e), e = null), we(t());
+  };
+  return { save: () => {
+    e !== null && clearTimeout(e), e = setTimeout(o, n);
+  }, flush: o, destroy: () => {
+    e !== null && (clearTimeout(e), e = null);
+  } };
+}
+function Me() {
+  return {
+    userAgent: navigator.userAgent,
+    viewport: {
+      width: window.innerWidth,
+      height: window.innerHeight
+    },
+    devicePixelRatio: window.devicePixelRatio,
+    url: window.location.href,
+    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+    scrollPosition: {
+      x: window.scrollX,
+      y: window.scrollY
+    }
+  };
+}
+function Ie(t) {
+  const n = t.elementInfo.humanReadable, e = t.comment || "(no comment)";
+  return `${t.number}. **${n}**: ${e}`;
+}
+function Te(t) {
+  const n = [];
+  return n.push(`### ${t.number}. ${t.elementInfo.humanReadable}`), n.push(`**Location:** ${t.elementInfo.selectorPath}`), t.selectedText && n.push(`**Selected text:** "${t.selectedText}"`), n.push(`**Feedback:** ${t.comment || "(no comment)"}`), n.join(`
+`);
+}
+function Le(t) {
+  const n = [], e = t.elementInfo;
+  n.push(`### ${t.number}. ${e.humanReadable}`), n.push(""), n.push(`**Location:** \`${e.selectorPath}\``), e.id && n.push(`**ID:** ${e.id}`), e.classes.length > 0 && n.push(`**Classes:** ${e.classes.join(", ")}`);
+  const o = e.rect;
+  n.push(`**Position:** ${Math.round(o.left)}x${Math.round(o.top)}, ${Math.round(o.width)}×${Math.round(o.height)}px`), e.isFixed && n.push("**Positioning:** Fixed/Sticky"), t.selectedText && n.push(`**Selected text:** "${t.selectedText}"`);
+  const a = e.nearbyContext;
+  return (a.parent || a.containingLandmark) && (n.push(""), n.push("**Context:**"), a.containingLandmark && n.push(`- Landmark: ${a.containingLandmark}`), a.parent && n.push(`- Parent: ${a.parent}`), a.previousSibling && n.push(`- Previous: ${a.previousSibling}`), a.nextSibling && n.push(`- Next: ${a.nextSibling}`)), n.push(""), n.push(`**Feedback:** ${t.comment || "(no comment)"}`), n.join(`
+`);
+}
+function Fe(t, n) {
+  const e = [], o = t.elementInfo;
+  e.push(`### ${t.number}. ${o.humanReadable}`), e.push(""), e.push("#### DOM Path"), e.push("```"), e.push(o.fullDomPath), e.push("```"), e.push(""), e.push(`**Selector:** \`${o.selectorPath}\``), e.push(""), e.push("#### Element Details"), e.push(`- **Tag:** ${o.tagName}`), o.id && e.push(`- **ID:** ${o.id}`), o.classes.length > 0 && e.push(`- **Classes:** ${o.classes.join(", ")}`);
+  const a = Object.entries(o.attributes);
+  if (a.length > 0) {
+    e.push("- **Attributes:**");
+    for (const [p, f] of a.slice(0, 10))
+      e.push(`  - ${p}: "${f}"`);
+  }
+  o.innerText && e.push(`- **Text content:** "${o.innerText}"`), e.push(""), e.push("#### Position & Dimensions");
+  const r = o.rect;
+  e.push(`- **Bounding box:** (${Math.round(r.left)}, ${Math.round(r.top)}) to (${Math.round(r.right)}, ${Math.round(r.bottom)})`), e.push(`- **Size:** ${Math.round(r.width)}×${Math.round(r.height)}px`), e.push(`- **Fixed positioning:** ${o.isFixed ? "Yes" : "No"}`), e.push(""), e.push("#### Accessibility");
+  const s = o.accessibility;
+  e.push(`- **Role:** ${s.role || "none"}`), e.push(`- **Interactive:** ${s.isInteractive ? "Yes" : "No"}`), s.ariaLabel && e.push(`- **ARIA Label:** "${s.ariaLabel}"`), s.ariaDescribedBy && e.push(`- **Described by:** "${s.ariaDescribedBy}"`), s.tabIndex !== null && e.push(`- **Tab index:** ${s.tabIndex}`), e.push(""), o.computedStyles && (e.push("#### Computed Styles"), e.push("```css"), e.push(se(o.computedStyles)), e.push("```"), e.push(""));
+  const i = o.nearbyContext;
+  return e.push("#### Context"), i.containingLandmark && e.push(`- **Landmark:** ${i.containingLandmark}`), i.parent && e.push(`- **Parent:** ${i.parent}`), i.previousSibling && e.push(`- **Previous sibling:** ${i.previousSibling}`), i.nextSibling && e.push(`- **Next sibling:** ${i.nextSibling}`), e.push(""), t.selectedText && (e.push(`**Selected text:** "${t.selectedText}"`), e.push("")), t.isMultiSelect && (e.push("*Created via multi-select*"), e.push("")), e.push("#### Metadata"), e.push(`- **Created:** ${new Date(t.createdAt).toISOString()}`), e.push(`- **Updated:** ${new Date(t.updatedAt).toISOString()}`), e.push(""), e.push("#### Feedback"), e.push(t.comment || "(no comment)"), e.join(`
+`);
+}
+function ze(t, n) {
+  const e = [], o = window.location.pathname;
+  return e.push(`## Page Feedback: ${o}`), t === "compact" ? (e.push(""), e.join(`
+`)) : (e.push(`**Viewport:** ${window.innerWidth}×${window.innerHeight}`), e.push(`**Scopes:** ${n}`), e.push(""), e.join(`
+`));
+}
+function Pe(t, n) {
+  const e = [];
+  return e.push(`## Page Feedback: ${t.url}`), e.push(""), e.push("### Environment"), e.push(`- **URL:** ${t.url}`), e.push(`- **Viewport:** ${t.viewport.width}×${t.viewport.height}`), e.push(`- **Device pixel ratio:** ${t.devicePixelRatio}`), e.push(`- **Scroll position:** (${t.scrollPosition.x}, ${t.scrollPosition.y})`), e.push(`- **Timestamp:** ${t.timestamp}`), e.push(`- **User agent:** ${t.userAgent}`), e.push(`- **Total scopes:** ${n}`), e.push(""), e.push("---"), e.push(""), e.join(`
+`);
+}
+function Q(t, n) {
+  if (t.length === 0)
+    return `## Page Feedback
+
+No scopes created.`;
+  const e = [...t].sort((r, s) => r.number - s.number), o = n === "forensic" ? Me() : null, a = [];
+  n === "forensic" && o ? a.push(Pe(o, t.length)) : a.push(ze(n, t.length));
+  for (const r of e) {
+    switch (n) {
+      case "compact":
+        a.push(Ie(r));
+        break;
+      case "standard":
+        a.push(Te(r));
+        break;
+      case "detailed":
+        a.push(Le(r));
+        break;
+      case "forensic":
+        a.push(Fe(r));
+        break;
+    }
+    n !== "compact" && (a.push(""), a.push("---"), a.push(""));
+  }
+  return n === "compact" ? a.join(`
+`) : a.join(`
+`).trim();
+}
+async function Ye(t) {
+  try {
+    return await navigator.clipboard.writeText(t), !0;
+  } catch (n) {
+    try {
+      const e = document.createElement("textarea");
+      e.value = t, e.style.position = "fixed", e.style.left = "-9999px", document.body.appendChild(e), e.select();
+      const o = document.execCommand("copy");
+      return document.body.removeChild(e), o;
+    } catch {
+      return console.error("[Annotation] Failed to copy to clipboard:", n), !1;
+    }
+  }
+}
+const B = "data-annotation-toolbar", W = "data-annotation-marker", U = "data-annotation-popup", q = "data-annotation-settings";
+function P(t) {
+  return t ? t.tagName.toLowerCase() === "agent-ui-annotation" || t.closest("agent-ui-annotation") ? !0 : t.hasAttribute(B) || t.hasAttribute(W) || t.hasAttribute(U) || t.hasAttribute(q) || t.closest(`[${B}], [${W}], [${U}], [${q}]`) !== null : !1;
+}
+function Re(t) {
+  const n = t.composedPath();
+  for (const e of n)
+    if (e instanceof Element && (e.tagName.toLowerCase() === "agent-ui-annotation" || e.hasAttribute && (e.hasAttribute(B) || e.hasAttribute(W) || e.hasAttribute(U) || e.hasAttribute(q))))
+      return !0;
+  return !1;
+}
+function He(t) {
+  const n = t.target;
+  return P(n) ? null : n;
+}
+function Xe(t, n) {
+  let e = !1;
+  const o = (c) => {
+    const l = t.getState();
+    if (l.mode === "disabled" || Re(c) || l.settingsPanelVisible) return;
+    const d = He(c);
+    if (!d) return;
+    l.settings.blockInteractions && d.matches('a, button, input, select, textarea, [role="button"], [onclick]') && (c.preventDefault(), c.stopPropagation());
+    const h = l.settings.outputLevel === "forensic", v = D(d, h), g = c.clientX, b = v.isFixed ? c.clientY : c.clientY + window.scrollY;
+    n.emit("element:click", {
+      element: d,
+      elementInfo: v,
+      clickX: g,
+      clickY: b
+    });
+  }, a = (c) => {
+    if (t.getState().mode !== "multi-select") return;
+    const d = c.target;
+    if (P(d)) return;
+    const h = {
+      x: c.clientX,
+      y: c.clientY
+    };
+    n.emit("multiselect:start", { position: h });
+  }, r = (c) => {
+    const l = t.getState();
+    if (!(!l.isSelecting && l.selectionRect === null) && l.isSelecting && l.selectionRect) {
+      const d = {
+        startX: l.selectionRect.startX,
+        startY: l.selectionRect.startY,
+        endX: c.clientX,
+        endY: c.clientY
+      };
+      n.emit("multiselect:update", { rect: d });
+    }
+  }, s = (c) => {
+    const l = t.getState();
+    if (!l.isSelecting) return;
+    const d = l.selectionRect;
+    if (!d) return;
+    const h = De(d);
+    n.emit("multiselect:end", { elements: h });
+  }, i = () => {
+    t.setState({ scrollY: window.scrollY });
+  }, p = (c) => {
+    const l = t.getState();
+    c.key === "Escape" && (l.popupVisible ? (t.setState({ popupVisible: !1, popupAnnotationId: null }), c.preventDefault()) : l.isSelecting ? (t.setState({ isSelecting: !1, selectionRect: null }), c.preventDefault()) : l.mode !== "disabled" && (n.emit("deactivate", void 0), c.preventDefault()));
+  };
+  return {
+    attach: () => {
+      e || (document.addEventListener("click", o, !0), document.addEventListener("mousedown", a, !0), document.addEventListener("mousemove", r, !0), document.addEventListener("mouseup", s, !0), document.addEventListener("scroll", i, { passive: !0 }), document.addEventListener("keydown", p, !0), e = !0);
+    },
+    detach: () => {
+      e && (document.removeEventListener("click", o, !0), document.removeEventListener("mousedown", a, !0), document.removeEventListener("mousemove", r, !0), document.removeEventListener("mouseup", s, !0), document.removeEventListener("scroll", i), document.removeEventListener("keydown", p, !0), e = !1);
+    },
+    isActive: () => e
+  };
+}
+function De(t) {
+  const n = Math.min(t.startX, t.endX), e = Math.max(t.startX, t.endX), o = Math.min(t.startY, t.endY), a = Math.max(t.startY, t.endY), s = document.querySelectorAll("button, a, input, img, p, h1, h2, h3, h4, h5, h6, li, label, td, th"), i = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }, p = [];
+  for (const f of s) {
+    if (P(f)) continue;
+    const u = f.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 || p.push(f);
+  }
+  return p.filter((f) => !p.some(
+    (u) => u !== f && f.contains(u)
+  ));
+}
+function Oe(t, n, e = {}) {
+  const { leading: o = !0, trailing: a = !0 } = e;
+  let r = null, s = null, i = null, p = 0;
+  const f = (b) => {
+    p = b;
+    const y = s;
+    s = null, t(...y);
+  }, u = (b) => {
+    const y = i !== null ? b - i : 0, S = b - p;
+    return i === null || y >= n || y < 0 || S >= n;
+  }, c = (b) => {
+    const y = i !== null ? b - i : 0, S = n - y;
+    return Math.max(0, S);
+  }, l = () => {
+    const b = Date.now();
+    if (u(b))
+      return d(b);
+    r = setTimeout(l, c(b));
+  }, d = (b) => {
+    r = null, a && s && f(b), s = null;
+  }, h = () => {
+    r !== null && clearTimeout(r), p = 0, s = null, i = null, r = null;
+  }, v = () => {
+    r !== null && d(Date.now());
+  }, g = (...b) => {
+    const y = Date.now(), S = u(y);
+    s = b, i = y, S && r === null && (o && f(y), r = setTimeout(l, n));
+  };
+  return g.cancel = h, g.flush = v, g;
+}
+const Ne = 50;
+function je(t, n) {
+  let e = !1, o = null;
+  const r = Oe((u) => {
+    const c = t.getState();
+    if (c.mode === "disabled" || c.isSelecting) {
+      c.hoveredElement !== null && (t.setState({
+        hoveredElement: null,
+        hoveredElementInfo: null
+      }), n.emit("element:hover", { element: null, elementInfo: null }));
+      return;
+    }
+    if (c.popupVisible || c.settingsPanelVisible)
+      return;
+    const l = u.target;
+    if (P(l)) {
+      o !== null && (o = null, t.setState({
+        hoveredElement: null,
+        hoveredElementInfo: null
+      }), n.emit("element:hover", { element: null, elementInfo: null }));
+      return;
+    }
+    if (l === o)
+      return;
+    o = l;
+    const d = c.settings.outputLevel === "forensic", h = D(l, d);
+    t.setState({
+      hoveredElement: l,
+      hoveredElementInfo: h
+    }), n.emit("element:hover", { element: l, elementInfo: h });
+  }, Ne, {
+    leading: !0,
+    trailing: !0
+  }), s = (u) => {
+    const c = u.relatedTarget;
+    c && document.documentElement.contains(c) || (o = null, t.setState({
+      hoveredElement: null,
+      hoveredElementInfo: null
+    }), n.emit("element:hover", { element: null, elementInfo: null }));
+  };
+  return {
+    attach: () => {
+      e || (document.addEventListener("mousemove", r, { passive: !0 }), document.addEventListener("mouseleave", s), e = !0);
+    },
+    detach: () => {
+      e && (document.removeEventListener("mousemove", r), document.removeEventListener("mouseleave", s), r.cancel(), o = null, t.setState({
+        hoveredElement: null,
+        hoveredElementInfo: null
+      }), e = !1);
+    },
+    clearHover: () => {
+      o = null, t.setState({
+        hoveredElement: null,
+        hoveredElementInfo: null
+      }), n.emit("element:hover", { element: null, elementInfo: null });
+    },
+    isActive: () => e
+  };
+}
+const Ve = 8, tt = 20;
+function _e(t, n) {
+  let e = null, o = !1, a = !1;
+  const r = () => {
+    document.body.style.userSelect = "none", document.body.style.webkitUserSelect = "none";
+  }, s = () => {
+    document.body.style.userSelect = "", document.body.style.webkitUserSelect = "";
+  }, i = (g) => {
+    e = g, o = !1;
+  }, p = (g) => {
+    if (!e) return;
+    const b = g.clientX - e.x, y = g.clientY - e.y, S = Math.sqrt(b * b + y * y);
+    if (!o && S > Ve) {
+      o = !0, r();
+      const C = {
+        startX: e.x,
+        startY: e.y,
+        endX: g.clientX,
+        endY: g.clientY
+      };
+      t.setState({
+        isSelecting: !0,
+        selectionRect: C,
+        selectionPreviewElements: N(C)
+      });
+    }
+    if (o) {
+      const C = {
+        startX: e.x,
+        startY: e.y,
+        endX: g.clientX,
+        endY: g.clientY
+      };
+      t.setState({
+        selectionRect: C,
+        selectionPreviewElements: N(C)
+      });
+    }
+  }, f = () => {
+    const g = t.getState(), b = g.selectionRect, y = g.selectionPreviewElements;
+    if (e = null, o = !1, s(), t.setState({
+      isSelecting: !1,
+      selectionRect: null,
+      selectionPreviewElements: []
+    }), !b) return [];
+    const S = Math.abs(b.endX - b.startX), C = Math.abs(b.endY - b.startY);
+    return S < tt && C < tt ? [] : y.length > 0 ? y : N(b);
+  }, u = () => {
+    e = null, o = !1, s(), t.setState({
+      isSelecting: !1,
+      selectionRect: null,
+      selectionPreviewElements: []
+    });
+  }, c = (g) => {
+    const b = t.getState();
+    if (b.mode !== "select" && b.mode !== "multi-select" || b.popupVisible) return;
+    const y = g.target;
+    P(y) || g.button === 0 && i({ x: g.clientX, y: g.clientY });
+  }, l = (g) => {
+    e && p(g);
+  }, d = () => {
+    if (!e) return;
+    const g = f();
+    g.length > 0 && n.emit("multiselect:end", { elements: g });
+  };
+  return {
+    attach: () => {
+      a || (document.addEventListener("mousedown", c, !0), document.addEventListener("mousemove", l, !0), document.addEventListener("mouseup", d, !0), a = !0);
+    },
+    detach: () => {
+      a && (document.removeEventListener("mousedown", c, !0), document.removeEventListener("mousemove", l, !0), document.removeEventListener("mouseup", d, !0), u(), a = !1);
+    },
+    cancel: u,
+    isActive: () => a,
+    isDragging: () => o
+  };
+}
+function N(t) {
+  const n = Math.min(t.startX, t.endX), e = Math.max(t.startX, t.endX), o = Math.min(t.startY, t.endY), a = Math.max(t.startY, t.endY), s = document.querySelectorAll("button, a, input, img, p, h1, h2, h3, h4, h5, h6, li, label, td, th"), i = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  }, p = [];
+  for (const f of s) {
+    if (P(f)) continue;
+    const u = f.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 || p.push(f);
+  }
+  return p.filter((f) => !p.some(
+    (u) => u !== f && f.contains(u)
+  ));
+}
+function Be(t) {
+  const n = Math.min(t.startX, t.endX), e = Math.min(t.startY, t.endY), o = Math.abs(t.endX - t.startX), a = Math.abs(t.endY - t.startY);
+  return { x: n, y: e, width: o, height: a };
+}
+const We = "annotation-freeze-styles", Ue = `
+  *:not([data-annotation-toolbar] *):not([data-annotation-marker] *):not([data-annotation-popup] *) {
+    animation-play-state: paused !important;
+    transition: none !important;
+  }
+`;
+function qe(t, n) {
+  let e = !1, o = null, a = /* @__PURE__ */ new WeakSet();
+  const r = () => {
+    o || (o = document.createElement("style"), o.id = We, o.textContent = Ue, document.head.appendChild(o));
+  }, s = () => {
+    o && (o.remove(), o = null);
+  }, i = () => {
+    const d = document.querySelectorAll("video");
+    for (const h of d)
+      h.paused || (a.add(h), h.pause());
+  }, p = () => {
+    const d = document.querySelectorAll("video");
+    for (const h of d)
+      a.has(h) && h.play().catch(() => {
+      });
+    a = /* @__PURE__ */ new WeakSet();
+  }, f = () => {
+    e || (r(), i(), e = !0, t.setState({ isFrozen: !0 }), n.emit("freeze:toggle", { frozen: !0 }));
+  }, u = () => {
+    e && (s(), p(), e = !1, t.setState({ isFrozen: !1 }), n.emit("freeze:toggle", { frozen: !1 }));
+  };
+  return {
+    freeze: f,
+    unfreeze: u,
+    toggle: () => {
+      e ? u() : f();
+    },
+    destroy: () => {
+      e && u();
+    },
+    isFrozen: () => e
+  };
+}
+const Ke = "annotation-cursor-styles", Ge = `
+  /* Crosshair for most elements */
+  body:not([data-annotation-disabled]) *:not([data-annotation-toolbar] *):not([data-annotation-marker] *):not([data-annotation-popup] *) {
+    cursor: crosshair !important;
+  }
+
+  /* Text cursor for text selection */
+  body:not([data-annotation-disabled]) p:not([data-annotation-toolbar] *),
+  body:not([data-annotation-disabled]) span:not([data-annotation-toolbar] *),
+  body:not([data-annotation-disabled]) h1:not([data-annotation-toolbar] *),
+  body:not([data-annotation-disabled]) h2:not([data-annotation-toolbar] *),
+  body:not([data-annotation-disabled]) h3:not([data-annotation-toolbar] *),
+  body:not([data-annotation-disabled]) h4:not([data-annotation-toolbar] *),
+  body:not([data-annotation-disabled]) h5:not([data-annotation-toolbar] *),
+  body:not([data-annotation-disabled]) h6:not([data-annotation-toolbar] *),
+  body:not([data-annotation-disabled]) li:not([data-annotation-toolbar] *),
+  body:not([data-annotation-disabled]) td:not([data-annotation-toolbar] *),
+  body:not([data-annotation-disabled]) th:not([data-annotation-toolbar] *),
+  body:not([data-annotation-disabled]) code:not([data-annotation-toolbar] *),
+  body:not([data-annotation-disabled]) pre:not([data-annotation-toolbar] *) {
+    cursor: text !important;
+  }
+
+  /* Pointer for Annotation UI elements */
+  [data-annotation-marker],
+  [data-annotation-marker] *,
+  [data-annotation-toolbar] button,
+  [data-annotation-popup] button {
+    cursor: pointer !important;
+  }
+
+  /* Default for toolbar */
+  [data-annotation-toolbar],
+  [data-annotation-toolbar] *,
+  [data-annotation-popup],
+  [data-annotation-popup] * {
+    cursor: default !important;
+  }
+
+  /* Crosshair for multi-select mode */
+  body[data-annotation-multiselect] *:not([data-annotation-toolbar] *):not([data-annotation-marker] *):not([data-annotation-popup] *) {
+    cursor: crosshair !important;
+  }
+
+  /* Move cursor when dragging toolbar */
+  body[data-annotation-dragging] * {
+    cursor: move !important;
+  }
+`;
+let L = null;
+function Ze() {
+  L || (L = document.createElement("style"), L.id = Ke, L.textContent = Ge, document.head.appendChild(L));
+}
+function Je() {
+  L && (L.remove(), L = null);
+}
+function j(t) {
+  t ? document.body.setAttribute("data-annotation-multiselect", "") : document.body.removeAttribute("data-annotation-multiselect");
+}
+function Qe(t) {
+  document.body.removeAttribute("data-annotation-disabled");
+}
+function tn() {
+  Je(), document.body.removeAttribute("data-annotation-multiselect"), document.body.removeAttribute("data-annotation-dragging"), document.body.removeAttribute("data-annotation-disabled");
+}
+function en(t = {}) {
+  const {
+    settings: n,
+    loadPersisted: e = !0,
+    onScopeCreate: o,
+    onScopeUpdate: a,
+    onScopeDelete: r,
+    onScopesClear: s,
+    onCopy: i,
+    copyToClipboard: p = !0
+  } = t, f = e ? Ee() : null, u = e ? $e() : /* @__PURE__ */ new Map(), c = {
+    ...st,
+    ...f,
+    ...n
+  }, l = $t(
+    Ct({
+      settings: c,
+      scopes: u
+    })
+  ), d = At(), h = be(l, d), v = qe(l, d), g = Xe(l, d), b = je(l, d), y = _e(l, d), S = Ce(() => l.getState().scopes, 1e3);
+  o && d.on("scope:create", ({ scope: m }) => o(m)), a && d.on("scope:update", ({ scope: m }) => a(m)), r && d.on("scope:delete", ({ id: m }) => r(m)), s && d.on("scopes:clear", ({ scopes: m }) => s(m)), d.on("scope:create", () => S.save()), d.on("scope:update", () => S.save()), d.on("scope:delete", () => S.save()), d.on("scopes:clear", () => S.save()), d.on("settings:change", ({ settings: m }) => {
+    const k = l.getState().settings;
+    Ae({ ...k, ...m });
+  }), d.on("element:click", ({ element: m, elementInfo: k, clickX: A, clickY: M }) => {
+    if (l.getState().mode === "disabled") return;
+    const z = k.isFixed ? M : M - window.scrollY;
+    l.setState({
+      popupVisible: !0,
+      popupAnnotationId: null,
+      popupElementInfo: k,
+      popupClickX: A,
+      // X is always viewport-relative
+      popupClickY: z,
+      // Convert to viewport for popup positioning
+      pendingMarkerX: A,
+      // Document coords for marker
+      pendingMarkerY: M,
+      pendingMarkerIsFixed: k.isFixed,
+      hoveredElement: m,
+      hoveredElementInfo: k
+    });
+  }), d.on("multiselect:end", ({ elements: m }) => {
+    if (m.length === 0) return;
+    const A = l.getState().settings.outputLevel === "forensic", M = m.map((I) => D(I, A)), T = m.map((I) => I.getBoundingClientRect()), z = Math.min(...T.map((I) => I.left)), bt = Math.max(...T.map((I) => I.right)), vt = Math.min(...T.map((I) => I.top)), xt = Math.max(...T.map((I) => I.bottom)), yt = (z + bt) / 2, kt = (vt + xt) / 2;
+    l.setState({
+      popupVisible: !0,
+      popupAnnotationId: null,
+      popupElementInfo: M[0],
+      // Primary element for display
+      popupClickX: yt,
+      popupClickY: kt,
+      pendingMarkerX: 0,
+      // No single pending marker for multi-select
+      pendingMarkerY: 0,
+      pendingMarkerIsFixed: !1,
+      multiSelectElements: m,
+      multiSelectInfos: M,
+      hoveredElement: m[0],
+      hoveredElementInfo: M[0]
+    });
+  });
+  const C = (m = "select") => {
+    l.getState().mode === "disabled" && (l.batch(() => {
+      l.setState({
+        mode: m,
+        toolbarExpanded: !0,
+        markersVisible: !0,
+        scrollY: window.scrollY
+        // Initialize scroll position
+      });
+    }), g.attach(), b.attach(), y.attach(), Ze(), Qe(), m === "multi-select" && j(!0), d.emit("activate", void 0), d.emit("mode:change", { mode: m }));
+  }, Y = () => {
+    const m = l.getState();
+    m.mode !== "disabled" && (l.batch(() => {
+      l.setState({
+        mode: "disabled",
+        toolbarExpanded: !1,
+        popupVisible: !1,
+        popupAnnotationId: null,
+        isSelecting: !1,
+        selectionRect: null
+      });
+    }), g.detach(), b.detach(), y.detach(), tn(), m.isFrozen && v.unfreeze(), d.emit("deactivate", void 0), d.emit("mode:change", { mode: "disabled" }));
+  };
+  return {
+    store: l,
+    eventBus: d,
+    scopes: h,
+    freeze: v,
+    activate: C,
+    deactivate: Y,
+    toggle: () => {
+      l.getState().mode === "disabled" ? C() : Y();
+    },
+    isActive: () => l.getState().mode !== "disabled",
+    setMode: (m) => {
+      const k = l.getState();
+      if (m === "disabled") {
+        Y();
+        return;
+      }
+      if (k.mode === "disabled") {
+        C(m);
+        return;
+      }
+      m === "multi-select" && k.mode !== "multi-select" ? (y.attach(), j(!0)) : m === "select" && k.mode === "multi-select" && (y.detach(), j(!1)), l.setState({ mode: m }), d.emit("mode:change", { mode: m });
+    },
+    getMode: () => l.getState().mode,
+    updateSettings: (m) => {
+      const A = { ...l.getState().settings, ...m };
+      l.setState({ settings: A }), d.emit("settings:change", { settings: m });
+    },
+    getSettings: () => l.getState().settings,
+    copyOutput: async (m) => {
+      const k = l.getState(), A = m || k.settings.outputLevel, M = h.getAllScopes(), T = Q(M, A);
+      let z = !0;
+      return p && (z = await Ye(T)), z && (l.setState({ showCopiedFeedback: !0 }), setTimeout(() => {
+        l.setState({ showCopiedFeedback: !1 });
+      }, 2e3), i && i(T, A), d.emit("output:copy", { content: T, level: A }), k.settings.autoClearAfterCopy && h.clearAllScopes()), z;
+    },
+    getOutput: (m) => {
+      const k = l.getState(), A = m || k.settings.outputLevel, M = h.getAllScopes();
+      return Q(M, A);
+    },
+    showPopup: (m) => {
+      if (m) {
+        const k = l.getState().scopes.get(m);
+        if (k) {
+          l.setState({
+            popupVisible: !0,
+            popupAnnotationId: m,
+            popupElementInfo: k.elementInfo,
+            popupClickX: k.clickX,
+            popupClickY: k.clickY
+          });
+          return;
+        }
+      }
+      l.setState({
+        popupVisible: !0,
+        popupAnnotationId: m || null
+      });
+    },
+    hidePopup: () => {
+      l.setState({
+        popupVisible: !1,
+        popupAnnotationId: null,
+        popupElementInfo: null,
+        popupClickX: 0,
+        popupClickY: 0,
+        pendingMarkerX: 0,
+        pendingMarkerY: 0,
+        pendingMarkerIsFixed: !1,
+        multiSelectElements: [],
+        multiSelectInfos: []
+      });
+    },
+    subscribe: (m) => l.subscribe(m),
+    destroy: () => {
+      Y(), S.flush(), S.destroy(), v.destroy(), d.destroy(), l.destroy();
+    }
+  };
+}
+const nn = {
+  // Background
+  "--as-bg-primary": "rgba(255, 255, 255, 0.95)",
+  "--as-bg-secondary": "rgba(245, 245, 245, 0.95)",
+  "--as-bg-hover": "rgba(0, 0, 0, 0.05)",
+  "--as-bg-active": "rgba(0, 0, 0, 0.1)",
+  "--as-bg-overlay": "rgba(255, 255, 255, 0.8)",
+  // Text
+  "--as-text-primary": "#1a1a1a",
+  "--as-text-secondary": "#666666",
+  "--as-text-muted": "#999999",
+  "--as-text-inverse": "#ffffff",
+  // Border
+  "--as-border-primary": "rgba(0, 0, 0, 0.1)",
+  "--as-border-secondary": "rgba(0, 0, 0, 0.05)",
+  // Accent (scope color)
+  "--as-accent": "#AF52DE",
+  "--as-accent-hover": "#9B47C7",
+  "--as-accent-light": "rgba(175, 82, 222, 0.1)",
+  // Status
+  "--as-success": "#34C759",
+  "--as-warning": "#FF9500",
+  "--as-error": "#FF3B30",
+  // Shadow
+  "--as-shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.05)",
+  "--as-shadow-md": "0 4px 12px rgba(0, 0, 0, 0.1)",
+  "--as-shadow-lg": "0 8px 24px rgba(0, 0, 0, 0.15)",
+  // Blur
+  "--as-backdrop-blur": "blur(12px)"
+}, et = {
+  // Background
+  "--as-bg-primary": "rgba(24, 24, 27, 0.95)",
+  "--as-bg-secondary": "rgba(39, 39, 42, 0.95)",
+  "--as-bg-hover": "rgba(255, 255, 255, 0.1)",
+  "--as-bg-active": "rgba(255, 255, 255, 0.15)",
+  "--as-bg-overlay": "rgba(24, 24, 27, 0.8)",
+  // Text
+  "--as-text-primary": "#ffffff",
+  "--as-text-secondary": "#a1a1aa",
+  "--as-text-muted": "#71717a",
+  "--as-text-inverse": "#1a1a1a",
+  // Border
+  "--as-border-primary": "rgba(255, 255, 255, 0.1)",
+  "--as-border-secondary": "rgba(255, 255, 255, 0.05)",
+  // Accent (scope color)
+  "--as-accent": "#AF52DE",
+  "--as-accent-hover": "#C77DFF",
+  "--as-accent-light": "rgba(175, 82, 222, 0.2)",
+  // Status
+  "--as-success": "#34C759",
+  "--as-warning": "#FF9500",
+  "--as-error": "#FF3B30",
+  // Shadow
+  "--as-shadow-sm": "0 1px 2px rgba(0, 0, 0, 0.2)",
+  "--as-shadow-md": "0 4px 12px rgba(0, 0, 0, 0.3)",
+  "--as-shadow-lg": "0 8px 24px rgba(0, 0, 0, 0.4)",
+  // Blur
+  "--as-backdrop-blur": "blur(12px)"
+}, on = {
+  // Spacing
+  "--as-space-xs": "4px",
+  "--as-space-sm": "8px",
+  "--as-space-md": "12px",
+  "--as-space-lg": "16px",
+  "--as-space-xl": "24px",
+  // Border radius
+  "--as-radius-sm": "4px",
+  "--as-radius-md": "8px",
+  "--as-radius-lg": "12px",
+  "--as-radius-full": "9999px",
+  // Typography
+  "--as-font-family": '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  "--as-font-mono": 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+  "--as-font-size-xs": "10px",
+  "--as-font-size-sm": "12px",
+  "--as-font-size-md": "14px",
+  "--as-font-size-lg": "16px",
+  // Transitions
+  "--as-transition-fast": "100ms ease",
+  "--as-transition-normal": "200ms ease",
+  "--as-transition-slow": "300ms ease",
+  // Z-index
+  "--as-z-toolbar": "999999",
+  "--as-z-markers": "999998",
+  "--as-z-popup": "1000000",
+  "--as-z-tooltip": "1000001",
+  "--as-z-overlay": "999997"
+};
+function V(t) {
+  return t === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : t;
+}
+function Pn(t) {
+  const n = {
+    purple: "#AF52DE",
+    blue: "#3c82f7",
+    cyan: "#5AC8FA",
+    green: "#34C759",
+    yellow: "#FFD60A",
+    orange: "#FF9500",
+    red: "#FF3B30"
+  };
+  return n[t] || n.purple;
+}
+function R(t) {
+  return Object.entries(t).map(([n, e]) => `${n}: ${e};`).join(`
+  `);
+}
+const an = `
+  /* CSS Variables */
+  :host {
+    ${R(on)}
+    ${R(nn)}
+  }
+
+  :host([data-theme="dark"]) {
+    ${R(et)}
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host([data-theme="auto"]) {
+      ${R(et)}
+    }
+  }
+
+  /* Reset */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Base styles */
+  :host {
+    all: initial;
+    font-family: var(--as-font-family);
+    font-size: var(--as-font-size-md);
+    color: var(--as-text-primary);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Toolbar container */
+  .toolbar {
+    position: fixed;
+    z-index: var(--as-z-toolbar);
+    display: flex;
+    align-items: center;
+    gap: var(--as-space-sm);
+    padding: var(--as-space-sm) var(--as-space-md);
+    background: var(--as-bg-primary);
+    border: 1px solid var(--as-border-primary);
+    border-radius: var(--as-radius-full);
+    box-shadow: var(--as-shadow-lg);
+    backdrop-filter: var(--as-backdrop-blur);
+    user-select: none;
+    transition: transform var(--as-transition-normal), opacity var(--as-transition-normal);
+  }
+
+  .toolbar.collapsed {
+    padding: var(--as-space-sm);
+  }
+
+  .toolbar.dragging {
+    cursor: move;
+    opacity: 0.9;
+  }
+
+  /* Toolbar entrance animation */
+  .toolbar.entering {
+    animation: toolbar-enter 0.3s ease-out;
+  }
+
+  @keyframes toolbar-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.9) translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  /* Toolbar buttons */
+  .toolbar-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--as-radius-md);
+    color: var(--as-text-primary);
+    cursor: pointer;
+    transition: background var(--as-transition-fast), color var(--as-transition-fast);
+  }
+
+  .toolbar-btn:hover {
+    background: var(--as-bg-hover);
+  }
+
+  .toolbar-btn:active {
+    background: var(--as-bg-active);
+  }
+
+  .toolbar-btn.active {
+    background: var(--as-accent-light);
+    color: var(--as-accent);
+  }
+
+  .toolbar-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  /* Toggle button (collapsed state) */
+  .toggle-btn {
+    position: relative;
+    width: 36px;
+    height: 36px;
+  }
+
+  .toggle-btn .badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    background: var(--as-accent);
+    border-radius: var(--as-radius-full);
+    color: var(--as-text-inverse);
+    font-size: var(--as-font-size-xs);
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Separator */
+  .separator {
+    width: 1px;
+    height: 20px;
+    background: var(--as-border-primary);
+    margin: 0 var(--as-space-xs);
+  }
+
+  /* Scope count */
+  .scope-count {
+    display: flex;
+    align-items: center;
+    gap: var(--as-space-xs);
+    padding: 0 var(--as-space-sm);
+    font-size: var(--as-font-size-sm);
+    font-weight: 500;
+    color: var(--as-text-secondary);
+  }
+
+  .scope-count .count {
+    color: var(--as-text-primary);
+    font-weight: 600;
+  }
+
+  /* Feedback toast */
+  .feedback {
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: var(--as-space-sm) var(--as-space-md);
+    background: var(--as-bg-primary);
+    border: 1px solid var(--as-border-primary);
+    border-radius: var(--as-radius-md);
+    box-shadow: var(--as-shadow-md);
+    font-size: var(--as-font-size-sm);
+    white-space: nowrap;
+    animation: feedback-enter 0.2s ease-out;
+  }
+
+  @keyframes feedback-enter {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+
+  .feedback.success {
+    border-color: var(--as-success);
+    color: var(--as-success);
+  }
+
+  /* Markers container */
+  .markers {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    z-index: var(--as-z-markers);
+    pointer-events: none;
+  }
+
+  /* Individual marker */
+  .marker {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: var(--as-accent);
+    border: 2px solid white;
+    border-radius: 50%;
+    color: white;
+    font-size: var(--as-font-size-xs);
+    font-weight: 700;
+    box-shadow: var(--as-shadow-md);
+    pointer-events: auto;
+    cursor: pointer;
+    transform: translate(-50%, -50%);
+    transition: transform var(--as-transition-fast), box-shadow var(--as-transition-fast);
+  }
+
+  .marker:hover {
+    transform: translate(-50%, -50%) scale(1.15);
+    box-shadow: var(--as-shadow-lg);
+  }
+
+  .marker.fixed {
+    position: fixed;
+  }
+
+  .marker.pending {
+    opacity: 0.7;
+    animation: marker-pulse 1s ease-in-out infinite;
+  }
+
+  @keyframes marker-pulse {
+    0%, 100% { transform: translate(-50%, -50%) scale(1); }
+    50% { transform: translate(-50%, -50%) scale(1.1); }
+  }
+
+  /* Marker animations */
+  .marker.entering {
+    animation: marker-enter 0.25s ease-out;
+  }
+
+  .marker.exiting {
+    animation: marker-exit 0.2s ease-in forwards;
+  }
+
+  @keyframes marker-enter {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  @keyframes marker-exit {
+    from {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0);
+    }
+  }
+
+  /* Marker tooltip */
+  .marker-tooltip {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: var(--as-space-sm) var(--as-space-md);
+    background: var(--as-bg-primary);
+    border: 1px solid var(--as-border-primary);
+    border-radius: var(--as-radius-md);
+    box-shadow: var(--as-shadow-md);
+    font-size: var(--as-font-size-sm);
+    white-space: nowrap;
+    max-width: 300px;
+    pointer-events: none;
+    z-index: var(--as-z-tooltip);
+    animation: tooltip-enter 0.15s ease-out;
+  }
+
+  .marker-tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-top-color: var(--as-bg-primary);
+  }
+
+  @keyframes tooltip-enter {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+
+  .tooltip-element {
+    font-weight: 500;
+    color: var(--as-text-primary);
+    margin-bottom: 2px;
+  }
+
+  .tooltip-comment {
+    color: var(--as-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Popup - Popover style (positioned near click point) */
+  .popup-popover {
+    position: fixed;
+    z-index: var(--as-z-popup);
+    width: 340px;
+    padding: var(--as-space-lg);
+    background: var(--as-bg-primary);
+    border: 1px solid var(--as-border-primary);
+    border-radius: var(--as-radius-lg);
+    box-shadow: var(--as-shadow-lg);
+    animation: popover-enter 0.15s ease-out;
+  }
+
+  @keyframes popover-enter {
+    from {
+      opacity: 0;
+      transform: scale(0.95) translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  .popup-popover.shake {
+    animation: popup-shake 0.3s ease-out;
+  }
+
+  @keyframes popup-shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-8px); }
+    75% { transform: translateX(8px); }
+  }
+
+  .popup-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--as-space-md);
+  }
+
+  .popup-element {
+    font-weight: 500;
+    color: var(--as-text-primary);
+    font-size: var(--as-font-size-md);
+  }
+
+  .popup-path {
+    font-family: var(--as-font-mono);
+    font-size: var(--as-font-size-xs);
+    color: var(--as-text-muted);
+    margin-top: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .popup-multiselect-header {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .popup-element-list {
+    list-style: none;
+    margin: var(--as-space-xs) 0 0 0;
+    padding: 0;
+    font-size: var(--as-font-size-xs);
+    color: var(--as-text-secondary);
+    max-height: 80px;
+    overflow-y: auto;
+  }
+
+  .popup-element-list li {
+    padding: 2px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .popup-close {
+    padding: var(--as-space-xs);
+    background: transparent;
+    border: none;
+    border-radius: var(--as-radius-sm);
+    color: var(--as-text-muted);
+    cursor: pointer;
+    transition: background var(--as-transition-fast), color var(--as-transition-fast);
+  }
+
+  .popup-close:hover {
+    background: var(--as-bg-hover);
+    color: var(--as-text-primary);
+  }
+
+  .popup-body {
+    margin-bottom: var(--as-space-lg);
+  }
+
+  .popup-textarea {
+    width: 100%;
+    min-height: 100px;
+    padding: var(--as-space-md);
+    background: var(--as-bg-secondary);
+    border: 1px solid var(--as-border-primary);
+    border-radius: var(--as-radius-md);
+    color: var(--as-text-primary);
+    font-family: inherit;
+    font-size: var(--as-font-size-md);
+    line-height: 1.5;
+    resize: vertical;
+    transition: border-color var(--as-transition-fast);
+  }
+
+  .popup-textarea:focus {
+    outline: none;
+    border-color: var(--as-accent);
+  }
+
+  .popup-textarea::placeholder {
+    color: var(--as-text-muted);
+  }
+
+  .popup-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--as-space-sm);
+  }
+
+  .popup-btn {
+    padding: var(--as-space-sm) var(--as-space-lg);
+    background: transparent;
+    border: 1px solid var(--as-border-primary);
+    border-radius: var(--as-radius-md);
+    color: var(--as-text-primary);
+    font-size: var(--as-font-size-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: background var(--as-transition-fast), border-color var(--as-transition-fast);
+  }
+
+  .popup-btn:hover {
+    background: var(--as-bg-hover);
+  }
+
+  .popup-btn.primary {
+    background: var(--as-accent);
+    border-color: var(--as-accent);
+    color: white;
+  }
+
+  .popup-btn.primary:hover {
+    background: var(--as-accent-hover);
+    border-color: var(--as-accent-hover);
+  }
+
+  .popup-btn.danger {
+    color: var(--as-error);
+  }
+
+  .popup-btn.danger:hover {
+    background: rgba(255, 59, 48, 0.1);
+  }
+
+  /* Hover tooltip (follows cursor) */
+  .hover-tooltip {
+    position: fixed;
+    z-index: var(--as-z-tooltip);
+    padding: var(--as-space-sm) var(--as-space-md);
+    background: var(--as-bg-primary);
+    border: 1px solid var(--as-border-primary);
+    border-radius: var(--as-radius-md);
+    box-shadow: var(--as-shadow-md);
+    font-size: var(--as-font-size-sm);
+    max-width: 350px;
+    pointer-events: none;
+  }
+
+  .hover-element {
+    font-weight: 500;
+    color: var(--as-text-primary);
+    margin-bottom: 2px;
+  }
+
+  .hover-path {
+    font-family: var(--as-font-mono);
+    font-size: var(--as-font-size-xs);
+    color: var(--as-text-muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Selection rectangle */
+  .selection-rect {
+    position: fixed;
+    z-index: var(--as-z-overlay);
+    border: 2px dashed var(--as-accent);
+    background: var(--as-accent-light);
+    pointer-events: none;
+  }
+
+  /* Highlight overlay */
+  .highlight {
+    position: fixed;
+    z-index: var(--as-z-overlay);
+    border: 2px solid var(--as-accent);
+    background: var(--as-accent-light);
+    pointer-events: none;
+    transition: all 0.1s ease-out;
+  }
+
+  /* Settings panel */
+  .settings-panel {
+    position: absolute;
+    bottom: calc(100% + var(--as-space-md));
+    right: 0;
+    width: 280px;
+    padding: var(--as-space-md);
+    background: var(--as-bg-primary);
+    border: 1px solid var(--as-border-primary);
+    border-radius: var(--as-radius-lg);
+    box-shadow: var(--as-shadow-lg);
+    animation: settings-enter 0.2s ease-out;
+  }
+
+  @keyframes settings-enter {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .settings-title {
+    font-weight: 600;
+    margin-bottom: var(--as-space-md);
+    padding-bottom: var(--as-space-sm);
+    border-bottom: 1px solid var(--as-border-primary);
+  }
+
+  .settings-group {
+    margin-bottom: var(--as-space-md);
+  }
+
+  .settings-label {
+    display: block;
+    font-size: var(--as-font-size-sm);
+    color: var(--as-text-secondary);
+    margin-bottom: var(--as-space-xs);
+  }
+
+  .settings-select {
+    width: 100%;
+    padding: var(--as-space-sm);
+    background: var(--as-bg-secondary);
+    border: 1px solid var(--as-border-primary);
+    border-radius: var(--as-radius-md);
+    color: var(--as-text-primary);
+    font-size: var(--as-font-size-sm);
+    cursor: pointer;
+  }
+
+  .settings-select:focus {
+    outline: none;
+    border-color: var(--as-accent);
+  }
+
+  .settings-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--as-space-sm) 0;
+  }
+
+  .settings-toggle-label {
+    font-size: var(--as-font-size-sm);
+  }
+
+  .settings-switch {
+    position: relative;
+    width: 40px;
+    height: 22px;
+    background: var(--as-bg-secondary);
+    border: 1px solid var(--as-border-primary);
+    border-radius: var(--as-radius-full);
+    cursor: pointer;
+    transition: background var(--as-transition-fast);
+  }
+
+  .settings-switch.active {
+    background: var(--as-accent);
+    border-color: var(--as-accent);
+  }
+
+  .settings-switch::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 16px;
+    height: 16px;
+    background: white;
+    border-radius: 50%;
+    transition: transform var(--as-transition-fast);
+  }
+
+  .settings-switch.active::after {
+    transform: translateX(18px);
+  }
+
+  /* Color picker */
+  .color-picker {
+    display: flex;
+    gap: var(--as-space-xs);
+    flex-wrap: wrap;
+  }
+
+  .color-option {
+    width: 24px;
+    height: 24px;
+    border: 2px solid transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform var(--as-transition-fast), border-color var(--as-transition-fast);
+  }
+
+  .color-option:hover {
+    transform: scale(1.15);
+  }
+
+  .color-option.active {
+    border-color: var(--as-text-primary);
+  }
+
+  /* Utility classes */
+  .hidden {
+    display: none !important;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* Skip animation for elements that have already animated */
+  .no-animate {
+    animation: none !important;
+  }
+`, $ = {
+  scope: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="10"/>
+    <circle cx="12" cy="12" r="6"/>
+    <circle cx="12" cy="12" r="2"/>
+  </svg>`,
+  freeze: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 2v20M2 12h20M4.93 4.93l14.14 14.14M19.07 4.93L4.93 19.07"/>
+  </svg>`,
+  unfreeze: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <polygon points="5 3 19 12 5 21 5 3"/>
+  </svg>`,
+  eye: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+    <circle cx="12" cy="12" r="3"/>
+  </svg>`,
+  eyeOff: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
+    <line x1="1" y1="1" x2="23" y2="23"/>
+  </svg>`,
+  copy: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+  </svg>`,
+  trash: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <polyline points="3 6 5 6 21 6"/>
+    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+    <line x1="10" y1="11" x2="10" y2="17"/>
+    <line x1="14" y1="11" x2="14" y2="17"/>
+  </svg>`,
+  sun: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="5"/>
+    <line x1="12" y1="1" x2="12" y2="3"/>
+    <line x1="12" y1="21" x2="12" y2="23"/>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+    <line x1="1" y1="12" x2="3" y2="12"/>
+    <line x1="21" y1="12" x2="23" y2="12"/>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+  </svg>`,
+  moon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+  </svg>`,
+  x: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <line x1="18" y1="6" x2="6" y2="18"/>
+    <line x1="6" y1="6" x2="18" y2="18"/>
+  </svg>`,
+  settings: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="3"/>
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+  </svg>`
+};
+function rn(t) {
+  return `
+    <div class="toolbar collapsed" data-annotation-toolbar>
+      <button class="toolbar-btn toggle-btn" title="Activate agent-ui-annotation" data-action="toggle">
+        ${$.scope}
+        ${t > 0 ? `<span class="badge">${t}</span>` : ""}
+      </button>
+    </div>
+  `;
+}
+function sn(t) {
+  const {
+    scopeCount: n,
+    isFrozen: e,
+    markersVisible: o,
+    isDarkMode: a,
+    showCopiedFeedback: r,
+    showClearedFeedback: s,
+    showEntranceAnimation: i = !1,
+    settingsPanelHtml: p = ""
+  } = t;
+  return `
+    <div class="toolbar${i ? " entering" : ""}" data-annotation-toolbar>
+      ${r ? '<div class="feedback success">Copied to clipboard!</div>' : ""}
+      ${s ? '<div class="feedback">Cleared all scopes</div>' : ""}
+      ${p}
+
+      <button class="toolbar-btn ${e ? "active" : ""}" title="${e ? "Unfreeze" : "Freeze"} animations" data-action="freeze">
+        ${e ? $.unfreeze : $.freeze}
+      </button>
+
+      <button class="toolbar-btn ${o ? "active" : ""}" title="${o ? "Hide" : "Show"} markers" data-action="toggle-markers">
+        ${o ? $.eye : $.eyeOff}
+      </button>
+
+      <div class="separator"></div>
+
+      <div class="scope-count">
+        ${$.scope}
+        <span class="count">${n}</span>
+      </div>
+
+      <div class="separator"></div>
+
+      <button class="toolbar-btn" title="Copy to clipboard" data-action="copy" ${n === 0 ? "disabled" : ""}>
+        ${$.copy}
+      </button>
+
+      <button class="toolbar-btn" title="Clear all" data-action="clear" ${n === 0 ? "disabled" : ""}>
+        ${$.trash}
+      </button>
+
+      <div class="separator"></div>
+
+      <button class="toolbar-btn" title="Toggle theme" data-action="theme">
+        ${a ? $.sun : $.moon}
+      </button>
+
+      <button class="toolbar-btn" title="Settings" data-action="settings">
+        ${$.settings}
+      </button>
+
+      <button class="toolbar-btn" title="Close" data-action="close">
+        ${$.x}
+      </button>
+    </div>
+  `;
+}
+function ln(t, n) {
+  const e = t.elementInfo.isFixed, o = t.clickX, a = t.clickY;
+  return e ? { x: o, y: a, isFixed: !0 } : { x: o, y: a - n, isFixed: !1 };
+}
+function cn(t) {
+  const { scope: n, isHovered: e, isExiting: o, isAnimating: a, scrollY: r, accentColor: s, skipTooltipAnimation: i = !1 } = t, p = ln(n, r), f = [
+    "marker",
+    p.isFixed ? "fixed" : "",
+    o ? "exiting" : "",
+    a ? "entering" : ""
+  ].filter(Boolean).join(" "), u = `
+    left: ${p.x}px;
+    top: ${p.y}px;
+    background-color: ${s};
+  `;
+  return `
+    <div
+      class="${f}"
+      style="${u}"
+      data-annotation-marker
+      data-scope-id="${n.id}"
+      title="${n.elementInfo.humanReadable}"
+    >
+      ${n.number}
+      ${e ? dn(n, i) : ""}
+    </div>
+  `;
+}
+function dn(t, n) {
+  const e = t.elementInfo.humanReadable, o = t.comment ? t.comment.length > 100 ? t.comment.slice(0, 100) + "..." : t.comment : "(no comment)";
+  return `
+    <div class="marker-tooltip${n ? " no-animate" : ""}">
+      <div class="tooltip-element">${ot(e)}</div>
+      <div class="tooltip-comment">${ot(o)}</div>
+    </div>
+  `;
+}
+function nt(t, n, e, o) {
+  const a = t.x, r = t.isFixed ? t.y : t.y - n, s = `
+    left: ${a}px;
+    top: ${r}px;
+    background-color: ${e};
+    opacity: 0.7;
+  `;
+  return `
+    <div
+      class="marker pending${t.isFixed ? " fixed" : ""}"
+      style="${s}"
+      data-annotation-marker
+      data-pending="true"
+    >
+      ${o}
+    </div>
+  `;
+}
+function un(t) {
+  const { scopes: n, hoveredMarkerId: e, exitingMarkers: o, animatingMarkers: a, scrollY: r, accentColor: s, pendingMarker: i, pendingMarkers: p = [], skipTooltipAnimation: f = !1 } = t, u = n.map(
+    (l) => cn({
+      scope: l,
+      isHovered: l.id === e,
+      isExiting: o.has(l.id),
+      isAnimating: a.has(l.id),
+      scrollY: r,
+      accentColor: s,
+      skipTooltipAnimation: f
+    })
+  ).join("");
+  let c = "";
+  return p.length > 0 ? c = p.map((l, d) => nt(l, r, s, n.length + 1 + d)).join("") : i && (c = nt(i, r, s, n.length + 1)), `<div class="markers">${u}${c}</div>`;
+}
+function ot(t) {
+  const n = document.createElement("div");
+  return n.textContent = t, n.innerHTML;
+}
+function pn(t, n) {
+  const r = window.innerWidth, s = window.innerHeight;
+  let i = t + 12, p = n - 220 / 2;
+  return i + 340 > r - 12 && (i = t - 340 - 12), i < 12 && (i = Math.max(12, t - 340 / 2)), i = Math.max(12, Math.min(i, r - 340 - 12)), p < 12 && (p = 12), p + 220 > s - 12 && (p = s - 220 - 12), {
+    left: `${i}px`,
+    top: `${p}px`
+  };
+}
+function fn(t) {
+  const { elementInfo: n, existingScope: e, isShaking: o, clickX: a, clickY: r, multiSelectInfos: s = [] } = t;
+  if (!n && !e)
+    return "";
+  const i = s.length > 1, p = (e == null ? void 0 : e.elementInfo) || n, f = (e == null ? void 0 : e.comment) || "", u = !!e, c = pn(a, r);
+  let l;
+  if (i) {
+    const d = s.slice(0, 5).map((v) => `<li>${H(v.humanReadable)}</li>`).join(""), h = s.length > 5 ? `<li>...and ${s.length - 5} more</li>` : "";
+    l = `
+      <div class="popup-multiselect-header">
+        <div class="popup-element">${s.length} elements selected</div>
+        <ul class="popup-element-list">${d}${h}</ul>
+      </div>
+    `;
+  } else
+    l = `
+      <div>
+        <div class="popup-element">${H(p.humanReadable)}</div>
+        <div class="popup-path">${H(p.selectorPath)}</div>
+      </div>
+    `;
+  return `
+    <div class="popup-popover ${o ? "shake" : ""}" style="left: ${c.left}; top: ${c.top};" data-annotation-popup>
+      <div class="popup-header">
+        ${l}
+        <button class="popup-close" data-action="popup-close" title="Close">
+          ${$.x}
+        </button>
+      </div>
+
+      <div class="popup-body">
+        <textarea
+          class="popup-textarea"
+          placeholder="${i ? "Add feedback for all selected elements..." : "Add your feedback..."}"
+          data-popup-input
+          autofocus
+        >${H(f)}</textarea>
+      </div>
+
+      <div class="popup-footer">
+        ${u ? `
+          <button class="popup-btn danger" data-action="popup-delete">
+            Delete
+          </button>
+        ` : ""}
+        <button class="popup-btn" data-action="popup-cancel">
+          Cancel
+        </button>
+        <button class="popup-btn primary" data-action="popup-submit">
+          ${u ? "Save" : i ? `Add ${s.length} Scopes` : "Add Scope"}
+        </button>
+      </div>
+    </div>
+  `;
+}
+function H(t) {
+  const n = document.createElement("div");
+  return n.textContent = t, n.innerHTML;
+}
+function hn(t, n) {
+  let r = t + 16, s = n + 16;
+  return r + 350 > window.innerWidth && (r = t - 350 - 16), s + 60 > window.innerHeight && (s = n - 60 - 16), r = Math.max(16, r), s = Math.max(16, s), {
+    left: `${r}px`,
+    top: `${s}px`
+  };
+}
+function mn(t) {
+  const { elementInfo: n, x: e, y: o } = t, a = hn(e, o);
+  return `
+    <div class="hover-tooltip" style="left: ${a.left}; top: ${a.top};">
+      <div class="hover-element">${rt(n.humanReadable)}</div>
+      <div class="hover-path">${rt(n.selectorPath)}</div>
+    </div>
+  `;
+}
+function at(t, n) {
+  return t ? `
+    <div
+      class="highlight"
+      style="
+        left: ${t.left}px;
+        top: ${t.top}px;
+        width: ${t.width}px;
+        height: ${t.height}px;
+        border-color: ${n};
+        background-color: ${n}20;
+      "
+    ></div>
+  ` : "";
+}
+function gn(t, n) {
+  return t ? `
+    <div
+      class="selection-rect"
+      style="
+        left: ${t.x}px;
+        top: ${t.y}px;
+        width: ${t.width}px;
+        height: ${t.height}px;
+        border-color: ${n};
+        background-color: ${n}20;
+      "
+    ></div>
+  ` : "";
+}
+function rt(t) {
+  const n = document.createElement("div");
+  return n.textContent = t, n.innerHTML;
+}
+const bn = {
+  purple: "#AF52DE",
+  blue: "#3c82f7",
+  cyan: "#5AC8FA",
+  green: "#34C759",
+  yellow: "#FFD60A",
+  orange: "#FF9500",
+  red: "#FF3B30"
+};
+function vn(t) {
+  const { settings: n, skipAnimation: e = !1 } = t, o = [
+    { value: "compact", label: "Compact" },
+    { value: "standard", label: "Standard" },
+    { value: "detailed", label: "Detailed" },
+    { value: "forensic", label: "Forensic" }
+  ], a = Object.entries(bn).map(([r, s]) => ({
+    name: r,
+    hex: s,
+    active: n.scopeColor === s
+  }));
+  return `
+    <div class="settings-panel${e ? " no-animate" : ""}" data-annotation-settings>
+      <div class="settings-title">Settings</div>
+
+      <div class="settings-group">
+        <label class="settings-label">Output Level</label>
+        <select class="settings-select" data-setting="outputLevel">
+          ${o.map(
+    (r) => `<option value="${r.value}" ${n.outputLevel === r.value ? "selected" : ""}>${r.label}</option>`
+  ).join("")}
+        </select>
+      </div>
+
+      <div class="settings-group">
+        <label class="settings-label">Marker Color</label>
+        <div class="color-picker">
+          ${a.map(
+    (r) => `<button
+                  class="color-option ${r.active ? "active" : ""}"
+                  style="background: ${r.hex};"
+                  data-setting="scopeColor"
+                  data-value="${r.hex}"
+                  title="${r.name}"
+                ></button>`
+  ).join("")}
+        </div>
+      </div>
+
+      <div class="settings-group">
+        <div class="settings-toggle">
+          <span class="settings-toggle-label">Block page interactions</span>
+          <button
+            class="settings-switch ${n.blockInteractions ? "active" : ""}"
+            data-setting="blockInteractions"
+            data-value="${!n.blockInteractions}"
+            title="Prevent clicks from activating buttons/links while annotating"
+          ></button>
+        </div>
+      </div>
+
+      <div class="settings-group">
+        <div class="settings-toggle">
+          <span class="settings-toggle-label">Show tooltips</span>
+          <button
+            class="settings-switch ${n.showTooltips ? "active" : ""}"
+            data-setting="showTooltips"
+            data-value="${!n.showTooltips}"
+          ></button>
+        </div>
+      </div>
+
+      <div class="settings-group">
+        <div class="settings-toggle">
+          <span class="settings-toggle-label">Auto-clear after copy</span>
+          <button
+            class="settings-switch ${n.autoClearAfterCopy ? "active" : ""}"
+            data-setting="autoClearAfterCopy"
+            data-value="${!n.autoClearAfterCopy}"
+          ></button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+class xn extends HTMLElement {
+  constructor() {
+    super();
+    w(this, "core", null);
+    w(this, "shadow");
+    w(this, "unsubscribe", null);
+    w(this, "styleElement");
+    w(this, "contentElement");
+    // Popup state
+    w(this, "isComposing", !1);
+    w(this, "popupShaking", !1);
+    // Hover tracking
+    w(this, "mouseX", 0);
+    w(this, "mouseY", 0);
+    w(this, "hoveredMarkerId", null);
+    // Track if toolbar has been shown before (to prevent re-animation)
+    w(this, "toolbarShownOnce", !1);
+    // Track if settings panel has animated (to prevent re-animation on state changes)
+    w(this, "settingsPanelAnimated", !1);
+    // Track which marker tooltip has animated (to prevent re-animation)
+    w(this, "animatedMarkerTooltipId", null);
+    // Track last rendered settings to avoid unnecessary re-renders when settings panel is open
+    w(this, "lastRenderedSettings", null);
+    this.shadow = this.attachShadow({ mode: "open" }), this.styleElement = document.createElement("style"), this.styleElement.textContent = an, this.contentElement = document.createElement("div"), this.contentElement.className = "annotation-root", this.shadow.appendChild(this.styleElement), this.shadow.appendChild(this.contentElement);
+  }
+  static get observedAttributes() {
+    return ["theme", "output-level", "scope-color", "disabled"];
+  }
+  connectedCallback() {
+    this.core = en({
+      settings: this.getSettingsFromAttributes(),
+      loadPersisted: !0,
+      onScopeCreate: (e) => this.dispatchScopeEvent("annotation:scope", { scope: e }),
+      onScopeUpdate: (e) => this.dispatchScopeEvent("annotation:update", { scope: e }),
+      onScopeDelete: (e) => this.dispatchScopeEvent("annotation:delete", { id: e }),
+      onScopesClear: (e) => this.dispatchScopeEvent("annotation:clear", { scopes: e }),
+      onCopy: (e, o) => this.dispatchScopeEvent("annotation:copy", { content: e, level: o })
+    }), 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);
+  }
+  attributeChangedCallback(e, o, a) {
+    if (!(o === a || !this.core))
+      switch (e) {
+        case "theme":
+          this.core.updateSettings({ theme: a || "auto" }), this.updateThemeAttribute();
+          break;
+        case "output-level":
+          this.core.updateSettings({ outputLevel: a || "standard" });
+          break;
+        case "scope-color":
+          this.core.updateSettings({ scopeColor: a || "#AF52DE" });
+          break;
+        case "disabled":
+          a !== null && this.core.deactivate();
+          break;
+      }
+  }
+  /**
+   * Public API
+   */
+  activate() {
+    var e;
+    (e = this.core) == null || e.activate();
+  }
+  deactivate() {
+    var e;
+    (e = this.core) == null || e.deactivate();
+  }
+  toggle() {
+    var e;
+    (e = this.core) == null || e.toggle();
+  }
+  async copyOutput(e) {
+    var o;
+    return ((o = this.core) == null ? void 0 : o.copyOutput(e)) ?? !1;
+  }
+  getOutput(e) {
+    var o;
+    return ((o = this.core) == null ? void 0 : o.getOutput(e)) ?? "";
+  }
+  clearAll() {
+    var e;
+    (e = this.core) == null || e.scopes.clearAllScopes();
+  }
+  /**
+   * Private methods
+   */
+  getSettingsFromAttributes() {
+    const e = {}, o = this.getAttribute("theme");
+    (o === "light" || o === "dark" || o === "auto") && (e.theme = o);
+    const a = this.getAttribute("output-level");
+    (a === "compact" || a === "standard" || a === "detailed" || a === "forensic") && (e.outputLevel = a);
+    const r = this.getAttribute("scope-color");
+    return r && (e.scopeColor = r), e;
+  }
+  updateThemeAttribute() {
+    if (!this.core) return;
+    const e = this.core.getSettings().theme, o = V(e);
+    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.isComposing = !0;
+    }), this.shadow.addEventListener("compositionend", () => {
+      this.isComposing = !1;
+    }), this.shadow.addEventListener("change", this.handleChange.bind(this)), document.addEventListener("click", this.handleDocumentClick.bind(this));
+  }
+  handleDocumentClick(e) {
+    if (!this.core || !this.core.store.getState().settingsPanelVisible) return;
+    e.composedPath().some((s) => s === this) || this.core.store.setState({ settingsPanelVisible: !1 });
+  }
+  handleChange(e) {
+    const o = e.target;
+    this.handleSettingChange(o);
+  }
+  handleClick(e) {
+    var i, p, f;
+    const o = e.target, a = (i = o.closest("[data-action]")) == null ? void 0 : i.getAttribute("data-action"), r = (p = o.closest("[data-scope-id]")) == null ? void 0 : p.getAttribute("data-scope-id");
+    if (!this.core) return;
+    switch (a) {
+      case "toggle":
+        this.core.toggle();
+        break;
+      case "close":
+        this.core.deactivate();
+        break;
+      case "freeze":
+        this.core.freeze.toggle();
+        break;
+      case "toggle-markers": {
+        const u = this.core.store.getState();
+        this.core.store.setState({ markersVisible: !u.markersVisible });
+        break;
+      }
+      case "copy":
+        this.core.copyOutput();
+        break;
+      case "clear":
+        this.core.scopes.clearAllScopes();
+        break;
+      case "theme": {
+        const u = this.core.getSettings().theme, l = V(u) === "dark" ? "light" : "dark";
+        this.core.updateSettings({ theme: l }), this.updateThemeAttribute();
+        break;
+      }
+      case "settings": {
+        const u = this.core.store.getState();
+        this.core.store.setState({ settingsPanelVisible: !u.settingsPanelVisible });
+        break;
+      }
+      case "popup-close":
+      case "popup-cancel":
+        this.core.hidePopup();
+        break;
+      case "popup-submit":
+        this.handlePopupSubmit();
+        break;
+      case "popup-delete":
+        this.handlePopupDelete();
+        break;
+    }
+    r && !a && this.core.showPopup(r), ((f = o.closest("[data-setting]")) == null ? void 0 : f.getAttribute("data-setting")) && this.handleSettingChange(o);
+  }
+  handleSettingChange(e) {
+    if (!this.core) return;
+    const o = e.closest("[data-setting]");
+    if (!o) return;
+    const a = o.getAttribute("data-setting"), r = o.getAttribute("data-value");
+    switch (a) {
+      case "outputLevel": {
+        const s = o;
+        this.core.updateSettings({ outputLevel: s.value });
+        break;
+      }
+      case "scopeColor":
+        r && this.core.updateSettings({ scopeColor: r });
+        break;
+      case "blockInteractions":
+        this.core.updateSettings({ blockInteractions: r === "true" });
+        break;
+      case "showTooltips":
+        this.core.updateSettings({ showTooltips: r === "true" });
+        break;
+      case "autoClearAfterCopy":
+        this.core.updateSettings({ autoClearAfterCopy: r === "true" });
+        break;
+    }
+  }
+  handleMouseOver(e) {
+    const a = e.target.closest("[data-scope-id]");
+    a && (this.hoveredMarkerId = a.getAttribute("data-scope-id"), this.render(this.core.store.getState()));
+  }
+  handleMouseOut(e) {
+    e.target.closest("[data-scope-id]") && (this.hoveredMarkerId = null, this.render(this.core.store.getState()));
+  }
+  handleMouseMove(e) {
+    this.mouseX = e.clientX, this.mouseY = e.clientY;
+  }
+  handleKeyDown(e) {
+    var a;
+    e.target.matches("[data-popup-input]") && (e.key === "Enter" && !e.shiftKey && !this.isComposing && (e.preventDefault(), this.handlePopupSubmit()), e.key === "Escape" && (e.preventDefault(), (a = this.core) == null || a.hidePopup()));
+  }
+  handlePopupSubmit() {
+    var r;
+    if (!this.core) return;
+    const e = this.core.store.getState(), o = this.shadow.querySelector("[data-popup-input]"), a = ((r = o == null ? void 0 : o.value) == null ? void 0 : r.trim()) || "";
+    if (e.popupAnnotationId)
+      this.core.scopes.updateScope(e.popupAnnotationId, { comment: a });
+    else if (e.multiSelectElements.length > 1)
+      for (let s = 0; s < e.multiSelectElements.length; s++) {
+        const i = e.multiSelectElements[s], p = e.multiSelectInfos[s], f = i.getBoundingClientRect(), u = f.left + f.width / 2, c = f.top + f.height / 2, l = p.isFixed, d = u, h = l ? c : c + window.scrollY;
+        this.core.scopes.addScope(i, a, {
+          clickX: d,
+          clickY: h,
+          isMultiSelect: !0
+        });
+      }
+    else if (e.hoveredElement && e.popupElementInfo) {
+      const s = e.popupElementInfo.isFixed, i = e.popupClickX, p = s ? e.popupClickY : e.popupClickY + window.scrollY;
+      this.core.scopes.addScope(e.hoveredElement, a, {
+        clickX: i,
+        clickY: p
+      });
+    }
+    this.core.hidePopup();
+  }
+  handlePopupDelete() {
+    if (!this.core) return;
+    const e = this.core.store.getState();
+    e.popupAnnotationId && (this.core.scopes.deleteScope(e.popupAnnotationId), this.core.hidePopup());
+  }
+  dispatchScopeEvent(e, o) {
+    this.dispatchEvent(
+      new CustomEvent(e, {
+        detail: o,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render(e) {
+    const o = e.settings, a = Array.from(e.scopes.values()).sort((i, p) => i.number - p.number), r = V(o.theme);
+    if (e.settingsPanelVisible) {
+      const i = JSON.stringify({
+        settings: o,
+        settingsPanelVisible: e.settingsPanelVisible,
+        scopeCount: a.length,
+        isFrozen: e.isFrozen,
+        markersVisible: e.markersVisible,
+        theme: r
+      });
+      if (this.lastRenderedSettings === i)
+        return;
+      this.lastRenderedSettings = i;
+    } else
+      this.lastRenderedSettings = null;
+    let s = "";
+    if (e.toolbarExpanded) {
+      const i = !this.toolbarShownOnce;
+      i && (this.toolbarShownOnce = !0);
+      let p = "";
+      if (e.settingsPanelVisible) {
+        const f = this.settingsPanelAnimated;
+        p = vn({ settings: o, skipAnimation: f }), this.settingsPanelAnimated = !0;
+      } else
+        this.settingsPanelAnimated = !1;
+      s += sn({
+        scopeCount: a.length,
+        isFrozen: e.isFrozen,
+        markersVisible: e.markersVisible,
+        isDarkMode: r === "dark",
+        showCopiedFeedback: e.showCopiedFeedback,
+        showClearedFeedback: e.showClearedFeedback,
+        showEntranceAnimation: i,
+        settingsPanelHtml: p
+      });
+    } else
+      this.toolbarShownOnce = !1, this.settingsPanelAnimated = !1, s += rn(a.length);
+    if (e.toolbarExpanded && e.markersVisible) {
+      let i = null, p = [];
+      e.popupVisible && !e.popupAnnotationId && (e.multiSelectElements.length > 1 ? p = e.multiSelectElements.map((u, c) => {
+        var g;
+        const l = u.getBoundingClientRect(), d = l.left + l.width / 2, h = l.top + l.height / 2, v = ((g = e.multiSelectInfos[c]) == null ? void 0 : g.isFixed) || !1;
+        return {
+          x: d,
+          y: v ? h : h + window.scrollY,
+          isFixed: v
+        };
+      }) : e.pendingMarkerX !== 0 && (i = {
+        x: e.pendingMarkerX,
+        y: e.pendingMarkerY,
+        isFixed: e.pendingMarkerIsFixed
+      }));
+      const f = this.hoveredMarkerId !== null && this.hoveredMarkerId === this.animatedMarkerTooltipId;
+      this.hoveredMarkerId !== null ? this.animatedMarkerTooltipId = this.hoveredMarkerId : this.animatedMarkerTooltipId = null, s += un({
+        scopes: a,
+        hoveredMarkerId: this.hoveredMarkerId,
+        exitingMarkers: e.exitingMarkers,
+        animatingMarkers: e.animatingMarkers,
+        scrollY: e.scrollY,
+        accentColor: o.scopeColor,
+        pendingMarker: i,
+        pendingMarkers: p,
+        skipTooltipAnimation: f
+      });
+    }
+    if (e.popupVisible) {
+      const i = e.popupAnnotationId ? e.scopes.get(e.popupAnnotationId) : null;
+      s += fn({
+        elementInfo: (i == null ? void 0 : i.elementInfo) || e.popupElementInfo,
+        existingScope: i || null,
+        isShaking: this.popupShaking,
+        clickX: i ? i.clickX : e.popupClickX,
+        clickY: i ? i.clickY : e.popupClickY,
+        multiSelectInfos: e.multiSelectInfos
+      });
+    }
+    if (e.toolbarExpanded && !e.popupVisible && e.hoveredElementInfo && o.showTooltips && (s += mn({
+      elementInfo: e.hoveredElementInfo,
+      x: this.mouseX,
+      y: this.mouseY
+    }), e.hoveredElement)) {
+      const i = e.hoveredElement.getBoundingClientRect();
+      s += at(i, o.scopeColor);
+    }
+    if (e.isSelecting && e.selectionRect) {
+      const i = Be(e.selectionRect);
+      s += gn(i, o.scopeColor);
+      for (const p of e.selectionPreviewElements) {
+        const f = p.getBoundingClientRect();
+        s += at(f, o.scopeColor);
+      }
+    }
+    if (this.contentElement.innerHTML = s, this.positionToolbar(e), e.popupVisible) {
+      const i = this.shadow.querySelector("[data-popup-input]");
+      i == null || i.focus();
+    }
+  }
+  positionToolbar(e) {
+    const o = this.shadow.querySelector(".toolbar");
+    if (!o) return;
+    const a = 20, { toolbarPosition: r } = e.settings;
+    let s, i;
+    switch (r) {
+      case "top-left":
+        s = a, i = a;
+        break;
+      case "top-right":
+        s = window.innerWidth - o.offsetWidth - a, i = a;
+        break;
+      case "bottom-left":
+        s = a, i = window.innerHeight - o.offsetHeight - a;
+        break;
+      case "bottom-right":
+      default:
+        s = window.innerWidth - o.offsetWidth - a, i = window.innerHeight - o.offsetHeight - a;
+        break;
+    }
+    (e.toolbarPosition.x !== 20 || e.toolbarPosition.y !== 20) && (s = e.toolbarPosition.x, i = e.toolbarPosition.y), o.style.left = `${s}px`, o.style.top = `${i}px`;
+  }
+}
+function gt(t = "agent-ui-annotation") {
+  customElements.get(t) || customElements.define(t, xn);
+}
+gt();
+function yn(t = {}) {
+  const {
+    container: n = document.body,
+    theme: e = "auto",
+    outputLevel: o = "standard",
+    scopeColor: a,
+    autoActivate: r = !1,
+    onScopeCreate: s,
+    onScopeUpdate: i,
+    onScopeDelete: p,
+    onScopesClear: f,
+    onCopy: u
+  } = t, c = document.createElement("agent-ui-annotation");
+  return c.setAttribute("theme", e), c.setAttribute("output-level", o), a && c.setAttribute("scope-color", a), s && c.addEventListener("annotation:scope", (l) => {
+    s(l.detail.scope);
+  }), i && c.addEventListener("annotation:update", (l) => {
+    i(l.detail.scope);
+  }), p && c.addEventListener("annotation:delete", (l) => {
+    p(l.detail.id);
+  }), f && c.addEventListener("annotation:clear", (l) => {
+    f(l.detail.scopes);
+  }), u && c.addEventListener("annotation:copy", (l) => {
+    u(l.detail.content, l.detail.level);
+  }), n.appendChild(c), r && requestAnimationFrame(() => {
+    c.activate();
+  }), {
+    element: c,
+    activate() {
+      c.activate();
+    },
+    deactivate() {
+      c.deactivate();
+    },
+    toggle() {
+      c.toggle();
+    },
+    async copyOutput(l) {
+      return c.copyOutput(l);
+    },
+    getOutput(l) {
+      return c.getOutput(l);
+    },
+    clearAll() {
+      c.clearAll();
+    },
+    destroy() {
+      c.remove();
+    }
+  };
+}
+function Yn(t = {}) {
+  return yn({ ...t, autoActivate: !0 });
+}
+gt();
+export {
+  xn as AnnotationElement,
+  bn as SCOPE_COLORS,
+  D as collectElementInfo,
+  yn as createAnnotation,
+  en as createAnnotationCore,
+  At as createEventBus,
+  $t as createStore,
+  qt as generateSelectorPath,
+  Pn as getAccentColor,
+  X as identifyElement,
+  Yn as init,
+  gt as registerAnnotationElement,
+  V as resolveTheme
+};
+//# sourceMappingURL=agent-ui-annotation.js.map