@mindbowser_inc/ui-feedback-plugin 0.4.1 → 0.6.0

package/dist/ui-feedback-plugin.es.js

@@ -1,8 +1,8 @@
-var K = Object.defineProperty;
-var J = (e, t, r) => t in e ? K(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var H = (e, t, r) => J(e, typeof t != "symbol" ? t + "" : t, r);
-const O = /* @__PURE__ */ new Set();
-let T = {
+var me = Object.defineProperty;
+var ge = (e, t, r) => t in e ? me(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var O = (e, t, r) => ge(e, typeof t != "symbol" ? t + "" : t, r);
+const I = /* @__PURE__ */ new Set();
+let R = {
   active: !1,
   userName: null,
   comments: [],
@@ -12,24 +12,24 @@ let T = {
   filter: "open",
   config: {}
 };
-function L() {
-  return T;
+function A() {
+  return R;
 }
-function y(e) {
-  T = { ...T, ...e }, O.forEach((t) => t(T));
+function k(e) {
+  R = { ...R, ...e }, I.forEach((t) => t(R));
 }
-function _(e) {
-  return O.add(e), () => O.delete(e);
+function oe(e) {
+  return I.add(e), () => I.delete(e);
 }
-function X() {
-  if (T.userName) return T.userName;
+function re() {
+  if (R.userName) return R.userName;
   const e = localStorage.getItem("ufp_user_name");
-  return e ? (y({ userName: e }), e) : null;
+  return e ? (k({ userName: e }), e) : null;
 }
-function Y(e) {
-  localStorage.setItem("ufp_user_name", e), y({ userName: e });
+function ie(e) {
+  localStorage.setItem("ufp_user_name", e), k({ userName: e });
 }
-function I(e) {
+function Q(e) {
   try {
     const t = new URL(e);
     return t.origin + t.pathname;
@@ -37,7 +37,7 @@ function I(e) {
     return e;
   }
 }
-function Q(e) {
+function xe(e) {
   return `
     :host {
       --ufp-primary: ${e};
@@ -592,13 +592,13 @@ function Q(e) {
     }
   `;
 }
-const Z = {
+const ye = {
   "bottom-right": { bottom: "24px", right: "24px" },
   "bottom-left": { bottom: "24px", left: "24px" },
   "top-right": { top: "24px", right: "24px" },
   "top-left": { top: "24px", left: "24px" }
-}, $ = "#6366f1", U = "#4f46e5", j = "#4338ca";
-function ee(e, t, r, n) {
+}, q = "#6366f1", Z = "#4f46e5", ee = "#4338ca";
+function ve(e, t, r, n) {
   const o = document.createElement("div");
   Object.assign(o.style, {
     position: "fixed",
@@ -609,43 +609,43 @@ function ee(e, t, r, n) {
     boxShadow: "0 4px 20px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.16)",
     overflow: "hidden",
     userSelect: "none",
-    ...Z[t]
+    ...ye[t]
   });
   const a = document.createElement("button");
-  a.id = "ufp-btn-annotate", a.title = "Add feedback annotation", D(a), a.style.padding = "10px 16px 10px 14px", a.innerHTML = `
+  a.id = "ufp-btn-annotate", a.title = "Add feedback annotation", te(a), a.style.padding = "10px 16px 10px 14px", a.innerHTML = `
     <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" style="flex-shrink:0">
       <path d="M12 20h9"/>
       <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
     </svg>
     <span id="ufp-annotate-label" style="font-size:14px;font-weight:600;">Feedback</span>
   `;
-  const d = document.createElement("div");
-  d.style.cssText = "width:1px;background:rgba(255,255,255,0.3);flex-shrink:0;";
-  const l = document.createElement("button");
-  l.id = "ufp-btn-panel", l.title = "View all comments", D(l), l.style.padding = "10px 14px", l.innerHTML = `
+  const p = document.createElement("div");
+  p.style.cssText = "width:1px;background:rgba(255,255,255,0.3);flex-shrink:0;";
+  const c = document.createElement("button");
+  c.id = "ufp-btn-panel", c.title = "View all comments", te(c), c.style.padding = "10px 14px", c.innerHTML = `
     <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" style="flex-shrink:0">
       <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
     </svg>
     <span id="ufp-panel-count" style="font-size:13px;font-weight:600;min-width:8px;text-align:center;"></span>
-  `, o.appendChild(a), o.appendChild(d), o.appendChild(l), e.appendChild(o);
-  const p = o.querySelector("#ufp-annotate-label"), s = o.querySelector("#ufp-panel-count");
-  return a.addEventListener("click", (i) => {
-    if (i.stopPropagation(), o._dragged) return;
-    const u = L();
-    u.active || (u.panelOpen ? (n(), setTimeout(r, 220)) : r());
-  }), l.addEventListener("click", (i) => {
-    i.stopPropagation(), !o._dragged && (L().active || n());
-  }), P(a, () => (L().panelOpen, $), U), P(l, () => L().panelOpen ? j : $, U), _((i) => {
-    const u = i.comments.filter((w) => !w.resolved).length;
-    s.textContent = u > 0 ? String(u) : "", i.active ? (p.textContent = "Drawing…", a.style.opacity = "0.65", l.style.opacity = "0.65", a.style.pointerEvents = "none", l.style.pointerEvents = "none") : (p.textContent = "Feedback", a.style.opacity = "1", l.style.opacity = "1", a.style.pointerEvents = "auto", l.style.pointerEvents = "auto"), l.style.background = i.panelOpen ? j : $;
-  }), te(o), o;
+  `, o.appendChild(a), o.appendChild(p), o.appendChild(c), e.appendChild(o);
+  const i = o.querySelector("#ufp-annotate-label"), l = o.querySelector("#ufp-panel-count");
+  return a.addEventListener("click", (s) => {
+    if (s.stopPropagation(), o._dragged) return;
+    const h = A();
+    h.active || (h.panelOpen ? (n(), setTimeout(r, 220)) : r());
+  }), c.addEventListener("click", (s) => {
+    s.stopPropagation(), !o._dragged && (A().active || n());
+  }), ne(a, () => (A().panelOpen, q), Z), ne(c, () => A().panelOpen ? ee : q, Z), oe((s) => {
+    const h = s.comments.filter((v) => !v.resolved).length;
+    l.textContent = h > 0 ? String(h) : "", s.active ? (i.textContent = "Drawing…", a.style.opacity = "0.65", c.style.opacity = "0.65", a.style.pointerEvents = "none", c.style.pointerEvents = "none") : (i.textContent = "Feedback", a.style.opacity = "1", c.style.opacity = "1", a.style.pointerEvents = "auto", c.style.pointerEvents = "auto"), c.style.background = s.panelOpen ? ee : q;
+  }), be(o), o;
 }
-function D(e) {
+function te(e) {
   Object.assign(e.style, {
     display: "flex",
     alignItems: "center",
     gap: "7px",
-    background: $,
+    background: q,
     color: "#ffffff",
     border: "none",
     cursor: "pointer",
@@ -654,32 +654,32 @@ function D(e) {
     transition: "background 0.12s"
   });
 }
-function P(e, t, r) {
+function ne(e, t, r) {
   e.addEventListener("mouseenter", () => {
     e.style.background = r;
   }), e.addEventListener("mouseleave", () => {
     e.style.background = t();
   });
 }
-function te(e) {
+function be(e) {
   let t = 0, r = 0, n = 0, o = 0;
   e.addEventListener("pointerdown", (a) => {
     if (a.button !== 0) return;
     t = a.clientX, r = a.clientY;
-    const d = e.getBoundingClientRect();
-    n = d.left, o = d.top, e._dragged = !1;
-    const l = (s) => {
-      const i = s.clientX - t, u = s.clientY - r;
-      !e._dragged && Math.sqrt(i * i + u * u) < 5 || (e._dragged = !0, e.style.left = `${Math.max(0, Math.min(window.innerWidth - e.offsetWidth, n + i))}px`, e.style.top = `${Math.max(0, Math.min(window.innerHeight - e.offsetHeight, o + u))}px`, e.style.right = "auto", e.style.bottom = "auto");
-    }, p = () => {
-      document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", p), requestAnimationFrame(() => {
+    const p = e.getBoundingClientRect();
+    n = p.left, o = p.top, e._dragged = !1;
+    const c = (l) => {
+      const s = l.clientX - t, h = l.clientY - r;
+      !e._dragged && Math.sqrt(s * s + h * h) < 5 || (e._dragged = !0, e.style.left = `${Math.max(0, Math.min(window.innerWidth - e.offsetWidth, n + s))}px`, e.style.top = `${Math.max(0, Math.min(window.innerHeight - e.offsetHeight, o + h))}px`, e.style.right = "auto", e.style.bottom = "auto");
+    }, i = () => {
+      document.removeEventListener("pointermove", c), document.removeEventListener("pointerup", i), requestAnimationFrame(() => {
         e._dragged = !1;
       });
     };
-    document.addEventListener("pointermove", l), document.addEventListener("pointerup", p);
+    document.addEventListener("pointermove", c), document.addEventListener("pointerup", i);
   });
 }
-function ne(e) {
+function we(e) {
   return new Promise((t) => {
     const r = document.createElement("div");
     r.className = "ufp-modal-backdrop", r.innerHTML = `
@@ -704,20 +704,20 @@ function ne(e) {
       o.disabled = n.value.trim().length === 0;
     });
     const a = () => {
-      const d = n.value.trim();
-      d && (Y(d), r.remove(), t(d));
+      const p = n.value.trim();
+      p && (ie(p), r.remove(), t(p));
     };
-    o.addEventListener("click", a), n.addEventListener("keydown", (d) => {
-      d.key === "Enter" && a();
+    o.addEventListener("click", a), n.addEventListener("keydown", (p) => {
+      p.key === "Enter" && a();
     }), requestAnimationFrame(() => n.focus());
   });
 }
-const C = "#6366f1", M = 3;
-function z(e, t = 1, r = 1) {
+const L = "#6366f1", z = 3;
+function B(e, t = 1, r = 1) {
   switch (e.type) {
     case "pen": {
       const n = document.createElementNS("http://www.w3.org/2000/svg", "path");
-      return n.setAttribute("d", oe(e.points, t, r)), n.setAttribute("stroke", e.color), n.setAttribute("stroke-width", String(e.width * Math.min(t, r))), n.setAttribute("fill", "none"), n.setAttribute("stroke-linecap", "round"), n.setAttribute("stroke-linejoin", "round"), n;
+      return n.setAttribute("d", Ee(e.points, t, r)), n.setAttribute("stroke", e.color), n.setAttribute("stroke-width", String(e.width * Math.min(t, r))), n.setAttribute("fill", "none"), n.setAttribute("stroke-linecap", "round"), n.setAttribute("stroke-linejoin", "round"), n;
     }
     case "rect": {
       const n = document.createElementNS("http://www.w3.org/2000/svg", "rect");
@@ -733,19 +733,19 @@ function z(e, t = 1, r = 1) {
     }
   }
 }
-function re(e, t, r, n) {
+function ke(e, t, r, n) {
   const o = r / t.pageWidth, a = n / t.pageHeight;
   e.innerHTML = "";
-  const d = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-  d.innerHTML = `
+  const p = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+  p.innerHTML = `
     <marker id="ufp-arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-      <polygon points="0 0, 10 3.5, 0 7" fill="${C}" />
+      <polygon points="0 0, 10 3.5, 0 7" fill="${L}" />
     </marker>
-  `, e.appendChild(d), t.shapes.forEach((l) => {
-    e.appendChild(z(l, o, a));
+  `, e.appendChild(p), t.shapes.forEach((c) => {
+    e.appendChild(B(c, o, a));
   });
 }
-function oe(e, t, r) {
+function Ee(e, t, r) {
   if (e.length === 0) return "";
   if (e.length === 1) {
     const o = e[0];
@@ -756,54 +756,95 @@ function oe(e, t, r) {
     n += ` L ${e[o].x * t} ${e[o].y * r}`;
   return n;
 }
-function ie(e) {
+function Se(e, t, r) {
+  if (window.scrollX === 0 && window.scrollY === 0) return null;
+  const n = window.innerWidth, o = window.innerHeight, a = document.elementsFromPoint(e, t).find((p) => p !== r);
+  for (let p = a ?? null; p && p !== document.documentElement; p = p.parentElement) {
+    const c = getComputedStyle(p);
+    if (c.position !== "fixed" && c.position !== "sticky") continue;
+    const i = p.getBoundingClientRect();
+    if (!(i.width >= n * 0.9 && i.height >= o * 0.9)) {
+      if (c.position === "sticky") {
+        if (i.top < o * 0.25) return "top";
+        continue;
+      }
+      return o - i.bottom < i.top ? "bottom" : "top";
+    }
+  }
+  return null;
+}
+function Ce(e, t, r) {
+  if (!t && !r) return e;
+  switch (e.type) {
+    case "pen":
+      return { ...e, points: e.points.map((n) => ({ x: n.x + t, y: n.y + r })) };
+    case "rect":
+      return { ...e, x: e.x + t, y: e.y + r };
+    case "circle":
+      return { ...e, cx: e.cx + t, cy: e.cy + r };
+    case "arrow":
+      return { ...e, x1: e.x1 + t, y1: e.y1 + r, x2: e.x2 + t, y2: e.y2 + r };
+  }
+}
+function Le(e) {
   return new Promise((t) => {
     let r = "pen";
     const n = [];
-    let o = !1, a = 0, d = 0, l = [], p = null, s = null;
-    const i = document.createElement("div");
-    i.style.cssText = "position:fixed;inset:0;z-index:2147483645;cursor:crosshair;background:rgba(99,102,241,0.04);";
+    let o = !1, a = 0, p = 0, c = [], i = null, l = null, s = !1, h = 0;
+    const v = [];
+    let m = null;
+    const b = () => m ? { x: 0, y: 0 } : { x: window.scrollX, y: window.scrollY }, x = document.createElement("div");
+    x.style.cssText = "position:fixed;inset:0;z-index:2147483645;cursor:crosshair;background:rgba(99,102,241,0.04);touch-action:none;user-select:none;-webkit-user-select:none;";
     const u = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     u.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;", u.innerHTML = `
       <defs>
         <marker id="ufp-arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
-          <polygon points="0 0, 10 3.5, 0 7" fill="${C}" />
+          <polygon points="0 0, 10 3.5, 0 7" fill="${L}" />
         </marker>
       </defs>
-    `, i.appendChild(u);
-    function w() {
-      i.remove(), b.remove(), s == null || s.remove();
-    }
-    function h() {
-      const m = u.querySelector("defs");
-      u.innerHTML = "", u.appendChild(m), n.forEach((x) => u.appendChild(z(x)));
-    }
-    function k() {
-      let m = 0, x = 0, g = 0;
-      return n.forEach((c) => {
-        if (c.type === "pen" && c.points.length) {
-          const v = c.points[c.points.length - 1];
-          m += v.x, x += v.y, g++;
-        } else c.type === "rect" ? (m += c.x + c.width, x += c.y + c.height, g++) : c.type === "circle" ? (m += c.cx, x += c.cy, g++) : c.type === "arrow" && (m += c.x2, x += c.y2, g++);
+    `, x.appendChild(u);
+    const w = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    u.appendChild(w);
+    const C = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    u.appendChild(C);
+    const N = () => w.setAttribute("transform", `translate(${-window.scrollX} ${-window.scrollY})`);
+    N(), window.addEventListener("scroll", N, { passive: !0 });
+    function H() {
+      window.removeEventListener("scroll", N);
+      for (const d of X) window.removeEventListener(d, K, !0);
+      for (const d of Y) window.removeEventListener(d, G, !0);
+      x.remove(), P.remove(), l == null || l.remove();
+    }
+    function j() {
+      w.innerHTML = "", C.innerHTML = "", n.forEach((d, g) => (v[g] ? C : w).appendChild(B(d)));
+    }
+    function _() {
+      let d = 0, g = 0, y = 0;
+      return n.forEach((f, E) => {
+        const S = v[E] ? 0 : window.scrollX, M = v[E] ? 0 : window.scrollY;
+        if (f.type === "pen" && f.points.length) {
+          const $ = f.points[f.points.length - 1];
+          d += $.x - S, g += $.y - M, y++;
+        } else f.type === "rect" ? (d += f.x + f.width - S, g += f.y + f.height - M, y++) : f.type === "circle" ? (d += f.cx - S, g += f.cy - M, y++) : f.type === "arrow" && (d += f.x2 - S, g += f.y2 - M, y++);
       }), {
-        anchorX: g > 0 ? m / g - window.scrollX : window.innerWidth / 2,
-        anchorY: g > 0 ? x / g - window.scrollY : window.innerHeight / 2
+        anchorX: y > 0 ? d / y : window.innerWidth / 2,
+        anchorY: y > 0 ? g / y : window.innerHeight / 2
       };
     }
-    function E() {
-      i.style.pointerEvents = "none", b.style.pointerEvents = "none", f();
+    function ae() {
+      s = !0, o = !1, x.style.pointerEvents = "none", P.style.pointerEvents = "none", se();
     }
-    function f() {
-      s && s.remove();
-      const { anchorX: m, anchorY: x } = k(), g = 300, c = 12;
-      let v = m + c, S = x + c;
-      v + g > window.innerWidth - c && (v = m - g - c), v < c && (v = c), S + 210 > window.innerHeight - c && (S = window.innerHeight - 210 - c), S < c && (S = c), s = document.createElement("div"), s.style.cssText = `
-        position:fixed;left:${v}px;top:${S}px;z-index:2147483647;
-        background:#fff;border-radius:12px;padding:16px;width:${g}px;
+    function se() {
+      l && l.remove();
+      const { anchorX: d, anchorY: g } = _(), y = 300, f = 12;
+      let E = d + f, S = g + f;
+      E + y > window.innerWidth - f && (E = d - y - f), E < f && (E = f), S + 210 > window.innerHeight - f && (S = window.innerHeight - 210 - f), S < f && (S = f), l = document.createElement("div"), l.style.cssText = `
+        position:fixed;left:${E}px;top:${S}px;z-index:2147483647;
+        background:#fff;border-radius:12px;padding:16px;width:${y}px;
         box-shadow:0 4px 24px rgba(0,0,0,0.18);
         display:flex;flex-direction:column;gap:10px;
         font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
-      `, s.innerHTML = `
+      `, l.innerHTML = `
         <div style="font-size:13px;font-weight:600;color:#374151;">Add your comment</div>
         <textarea id="ufp-inline-text" placeholder="Describe your feedback…" rows="3"
           style="width:100%;padding:9px 12px;border:1.5px solid #e5e7eb;border-radius:8px;
@@ -819,66 +860,94 @@ function ie(e) {
                    font-family:inherit;cursor:pointer;background:#6366f1;border:none;
                    color:#fff;opacity:0.45;transition:opacity 0.15s;">Submit</button>
         </div>
-      `, e.appendChild(s);
-      const B = s.querySelector("#ufp-inline-text"), R = s.querySelector("#ufp-popup-submit"), G = s.querySelector("#ufp-popup-cancel");
-      B.addEventListener("input", () => {
-        const N = B.value.trim().length > 0;
-        R.disabled = !N, R.style.opacity = N ? "1" : "0.45";
-      }), R.addEventListener("click", () => {
-        const N = B.value.trim();
-        if (!N) return;
-        const V = k();
-        w(), t({ shapes: [...n], text: N, ...V });
-      }), G.addEventListener("click", () => {
-        w(), t(null);
-      }), requestAnimationFrame(() => B.focus());
-    }
-    const b = ae(
+      `, e.appendChild(l);
+      const M = l.querySelector("#ufp-inline-text"), $ = l.querySelector("#ufp-popup-submit"), de = l.querySelector("#ufp-popup-cancel");
+      M.addEventListener("input", () => {
+        const W = M.value.trim().length > 0;
+        $.disabled = !W, $.style.opacity = W ? "1" : "0.45";
+      }), $.addEventListener("click", () => {
+        const W = M.value.trim();
+        if (!W) return;
+        const ue = _();
+        H();
+        const fe = n.map((J, he) => v[he] ? J : Ce(J, -window.scrollX, -window.scrollY));
+        t({ shapes: fe, text: W, ...ue });
+      }), de.addEventListener("click", () => {
+        H(), t(null);
+      }), requestAnimationFrame(() => M.focus());
+    }
+    const P = Me(
       e,
-      (m) => {
-        r = m;
+      (d) => {
+        r = d;
       },
       () => {
-        w(), t(null);
+        H(), t(null);
       },
       () => {
-        n.length !== 0 && (s && (s.remove(), s = null, i.style.pointerEvents = "auto", b.style.pointerEvents = "auto"), n.pop(), h());
+        n.length !== 0 && (l && (l.remove(), l = null, x.style.pointerEvents = "auto", P.style.pointerEvents = "auto", s = !1), n.pop(), v.pop(), j());
       }
     );
-    e.appendChild(i), i.addEventListener("pointerdown", (m) => {
-      m.button === 0 && (i.setPointerCapture(m.pointerId), o = !0, a = m.clientX + window.scrollX, d = m.clientY + window.scrollY, r === "pen" && (l = [{ x: a, y: d }]));
-    }), i.addEventListener("pointermove", (m) => {
+    e.appendChild(x);
+    const X = ["pointerdown", "pointermove", "pointerup", "pointercancel"], Y = ["mousedown", "mouseup", "click", "dblclick", "auxclick", "touchstart", "touchmove", "contextmenu", "dragstart", "selectstart"];
+    function V(d) {
+      const g = d.composedPath();
+      return g.includes(e.host) && !g.includes(x);
+    }
+    function G(d) {
+      V(d) || s && performance.now() > h || (d.preventDefault(), d.stopPropagation());
+    }
+    function K(d) {
+      if (s || V(d)) return;
+      d.stopPropagation();
+      const g = d;
+      d.type === "pointerdown" ? le(g) : d.type === "pointermove" ? pe(g) : d.type === "pointerup" ? ce(g) : d.type === "pointercancel" && (o = !1, i && (i.remove(), i = null));
+    }
+    function le(d) {
+      if (d.button === 0) {
+        d.preventDefault();
+        try {
+          x.setPointerCapture(d.pointerId);
+        } catch {
+        }
+        o = !0, m = Se(d.clientX, d.clientY, e.host), a = d.clientX + b().x, p = d.clientY + b().y, r === "pen" && (c = [{ x: a, y: p }]);
+      }
+    }
+    function pe(d) {
       if (!o) return;
-      const x = m.clientX + window.scrollX, g = m.clientY + window.scrollY;
-      if (p && p.remove(), r === "pen")
-        l.push({ x, y: g }), p = z({ type: "pen", points: [...l], color: C, width: M });
+      const g = d.clientX + b().x, y = d.clientY + b().y;
+      if (i && i.remove(), r === "pen")
+        c.push({ x: g, y }), i = B({ type: "pen", points: [...c], color: L, width: z });
       else if (r === "rect") {
-        const c = { type: "rect", x: Math.min(a, x), y: Math.min(d, g), width: Math.abs(x - a), height: Math.abs(g - d), color: C, strokeWidth: M };
-        p = z(c);
+        const f = { type: "rect", x: Math.min(a, g), y: Math.min(p, y), width: Math.abs(g - a), height: Math.abs(y - p), color: L, strokeWidth: z };
+        i = B(f);
       } else if (r === "circle") {
-        const c = Math.abs(x - a) / 2, v = Math.abs(g - d) / 2, S = { type: "circle", cx: Math.min(a, x) + c, cy: Math.min(d, g) + v, rx: c, ry: v, color: C, strokeWidth: M };
-        p = z(S);
-      } else r === "arrow" && (p = z({ type: "arrow", x1: a, y1: d, x2: x, y2: g, color: C, width: M }));
-      p && u.appendChild(p);
-    }), i.addEventListener("pointerup", (m) => {
+        const f = Math.abs(g - a) / 2, E = Math.abs(y - p) / 2, S = { type: "circle", cx: Math.min(a, g) + f, cy: Math.min(p, y) + E, rx: f, ry: E, color: L, strokeWidth: z };
+        i = B(S);
+      } else r === "arrow" && (i = B({ type: "arrow", x1: a, y1: p, x2: g, y2: y, color: L, width: z }));
+      i && (m ? C : w).appendChild(i);
+    }
+    function ce(d) {
       if (!o) return;
-      o = !1, p && (p.remove(), p = null);
-      const x = m.clientX + window.scrollX, g = m.clientY + window.scrollY;
-      let c = !1;
-      if (r === "pen" && l.length > 1)
-        n.push({ type: "pen", points: [...l], color: C, width: M }), l = [], c = !0;
+      h = performance.now() + 400, o = !1, i && (i.remove(), i = null);
+      const g = d.clientX + b().x, y = d.clientY + b().y;
+      let f = !1;
+      if (r === "pen" && c.length > 1)
+        n.push({ type: "pen", points: [...c], color: L, width: z }), c = [], f = !0;
       else if (r === "rect") {
-        const v = Math.abs(x - a), S = Math.abs(g - d);
-        v > 4 && S > 4 && (n.push({ type: "rect", x: Math.min(a, x), y: Math.min(d, g), width: v, height: S, color: C, strokeWidth: M }), c = !0);
+        const E = Math.abs(g - a), S = Math.abs(y - p);
+        E > 4 && S > 4 && (n.push({ type: "rect", x: Math.min(a, g), y: Math.min(p, y), width: E, height: S, color: L, strokeWidth: z }), f = !0);
       } else if (r === "circle") {
-        const v = Math.abs(x - a) / 2, S = Math.abs(g - d) / 2;
-        v > 4 && S > 4 && (n.push({ type: "circle", cx: Math.min(a, x) + v, cy: Math.min(d, g) + S, rx: v, ry: S, color: C, strokeWidth: M }), c = !0);
-      } else r === "arrow" && Math.sqrt((x - a) ** 2 + (g - d) ** 2) > 10 && (n.push({ type: "arrow", x1: a, y1: d, x2: x, y2: g, color: C, width: M }), c = !0);
-      c && (h(), E());
-    });
+        const E = Math.abs(g - a) / 2, S = Math.abs(y - p) / 2;
+        E > 4 && S > 4 && (n.push({ type: "circle", cx: Math.min(a, g) + E, cy: Math.min(p, y) + S, rx: E, ry: S, color: L, strokeWidth: z }), f = !0);
+      } else r === "arrow" && Math.sqrt((g - a) ** 2 + (y - p) ** 2) > 10 && (n.push({ type: "arrow", x1: a, y1: p, x2: g, y2: y, color: L, width: z }), f = !0);
+      f && (v.push(m), j(), ae());
+    }
+    for (const d of X) window.addEventListener(d, K, { capture: !0, passive: !1 });
+    for (const d of Y) window.addEventListener(d, G, { capture: !0, passive: !1 });
   });
 }
-function ae(e, t, r, n) {
+function Me(e, t, r, n) {
   const o = document.createElement("div");
   return o.className = "ufp-toolbar", o.innerHTML = `
     <span class="ufp-toolbar-label">Draw to annotate</span>
@@ -909,11 +978,11 @@ function ae(e, t, r, n) {
     <button class="ufp-btn ufp-btn-ghost" id="ufp-cancel-btn">Cancel</button>
   `, o.querySelectorAll("[data-tool]").forEach((a) => {
     a.addEventListener("click", () => {
-      o.querySelectorAll("[data-tool]").forEach((d) => d.classList.remove("active")), a.classList.add("active"), t(a.dataset.tool);
+      o.querySelectorAll("[data-tool]").forEach((p) => p.classList.remove("active")), a.classList.add("active"), t(a.dataset.tool);
     });
   }), o.querySelector("#ufp-undo-btn").addEventListener("click", n), o.querySelector("#ufp-cancel-btn").addEventListener("click", r), e.appendChild(o), o;
 }
-function W(e) {
+function U(e) {
   const t = Date.now() - e, r = Math.floor(t / 1e3);
   if (r < 60) return "just now";
   const n = Math.floor(r / 60);
@@ -923,39 +992,39 @@ function W(e) {
   const a = Math.floor(o / 24);
   return a < 7 ? `${a}d ago` : new Date(e).toLocaleDateString();
 }
-function F(e) {
+function D(e) {
   return e.split(" ").filter(Boolean).slice(0, 2).map((t) => t[0].toUpperCase()).join("");
 }
-function A(e) {
+function T(e) {
   return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-function se(e, t, r, n) {
+function Ae(e, t, r, n) {
   let o = [...t];
   const a = document.createElement("div");
   a.className = "ufp-replies";
-  const d = (h) => {
-    const k = a.querySelector(".ufp-replies-list");
-    k && k.remove();
-    const E = document.createElement("div");
-    if (E.className = "ufp-replies-list", E.style.cssText = "display:flex;flex-direction:column;gap:12px;", h.length > 0) {
-      const f = document.createElement("div");
-      f.className = "ufp-replies-title", f.textContent = `${h.length} ${h.length === 1 ? "Reply" : "Replies"}`, E.appendChild(f), h.forEach((b) => {
-        const m = document.createElement("div");
-        m.className = "ufp-reply", m.innerHTML = `
+  const p = (m) => {
+    const b = a.querySelector(".ufp-replies-list");
+    b && b.remove();
+    const x = document.createElement("div");
+    if (x.className = "ufp-replies-list", x.style.cssText = "display:flex;flex-direction:column;gap:12px;", m.length > 0) {
+      const u = document.createElement("div");
+      u.className = "ufp-replies-title", u.textContent = `${m.length} ${m.length === 1 ? "Reply" : "Replies"}`, x.appendChild(u), m.forEach((w) => {
+        const C = document.createElement("div");
+        C.className = "ufp-reply", C.innerHTML = `
           <div class="ufp-reply-meta">
-            <div class="ufp-avatar" style="width:22px;height:22px;font-size:10px;">${F(b.authorName)}</div>
-            <span class="ufp-reply-author">${A(b.authorName)}</span>
-            <span class="ufp-reply-time">${W(b.createdAt)}</span>
+            <div class="ufp-avatar" style="width:22px;height:22px;font-size:10px;">${D(w.authorName)}</div>
+            <span class="ufp-reply-author">${T(w.authorName)}</span>
+            <span class="ufp-reply-time">${U(w.createdAt)}</span>
           </div>
-          <div class="ufp-reply-text">${A(b.text)}</div>
-        `, E.appendChild(m);
+          <div class="ufp-reply-text">${T(w.text)}</div>
+        `, x.appendChild(C);
       });
     }
-    a.insertBefore(E, a.querySelector(".ufp-reply-input-area"));
-  }, l = document.createElement("div");
-  l.className = "ufp-reply-input-area";
-  const p = X();
-  l.innerHTML = `
+    a.insertBefore(x, a.querySelector(".ufp-reply-input-area"));
+  }, c = document.createElement("div");
+  c.className = "ufp-reply-input-area";
+  const i = re();
+  c.innerHTML = `
     <div class="ufp-reply-name-row">
       <span class="ufp-reply-name-label">Replying as:</span>
       <input
@@ -963,7 +1032,7 @@ function se(e, t, r, n) {
         id="ufp-reply-name"
         type="text"
         placeholder="Your name"
-        value="${A(p ?? "")}"
+        value="${T(i ?? "")}"
         style="flex:1;"
       />
     </div>
@@ -978,32 +1047,32 @@ function se(e, t, r, n) {
       <button class="ufp-btn ufp-btn-primary" id="ufp-reply-submit" disabled style="font-size:13px;padding:7px 14px;">Reply</button>
     </div>
   `;
-  const s = l.querySelector("#ufp-reply-name"), i = l.querySelector("#ufp-reply-text"), u = l.querySelector("#ufp-reply-submit"), w = () => {
-    u.disabled = s.value.trim().length === 0 || i.value.trim().length === 0;
+  const l = c.querySelector("#ufp-reply-name"), s = c.querySelector("#ufp-reply-text"), h = c.querySelector("#ufp-reply-submit"), v = () => {
+    h.disabled = l.value.trim().length === 0 || s.value.trim().length === 0;
   };
-  return s.addEventListener("input", w), i.addEventListener("input", w), u.addEventListener("click", async () => {
-    const h = s.value.trim(), k = i.value.trim();
-    if (!h || !k) return;
-    u.disabled = !0, u.textContent = "Sending…", Y(h);
-    const E = {
+  return l.addEventListener("input", v), s.addEventListener("input", v), h.addEventListener("click", async () => {
+    const m = l.value.trim(), b = s.value.trim();
+    if (!m || !b) return;
+    h.disabled = !0, h.textContent = "Sending…", ie(m);
+    const x = {
       commentId: e,
-      authorName: h,
-      text: k,
+      authorName: m,
+      text: b,
       createdAt: Date.now()
     };
     try {
-      const b = { id: await r.addReply(E), ...E };
-      i.value = "", u.textContent = "Reply", u.disabled = !0, o = [...o, b], d(o), n(b);
-    } catch (f) {
-      console.error("[ui-feedback-plugin] Failed to save reply:", f), u.disabled = !1, u.textContent = "Reply";
+      const w = { id: await r.addReply(x), ...x };
+      s.value = "", h.textContent = "Reply", h.disabled = !0, o = [...o, w], p(o), n(w);
+    } catch (u) {
+      console.error("[ui-feedback-plugin] Failed to save reply:", u), h.disabled = !1, h.textContent = "Reply";
     }
-  }), a.appendChild(l), d(o), a.addReply = (h) => {
-    o = [...o, h], d(o);
+  }), a.appendChild(c), p(o), a.addReply = (m) => {
+    o = [...o, m], p(o);
   }, a;
 }
-function le(e, t, r, n, o, a, d, l) {
-  const p = document.createElement("div");
-  p.className = "ufp-detail", p.innerHTML = `
+function ze(e, t, r, n, o, a, p, c) {
+  const i = document.createElement("div");
+  i.className = "ufp-detail", i.innerHTML = `
     <div class="ufp-detail-image-area">
       <div class="ufp-detail-image-wrap">
         <img class="ufp-detail-screenshot" src="${t.screenshotUrl}" alt="Page screenshot" />
@@ -1034,59 +1103,59 @@ function le(e, t, r, n, o, a, d, l) {
       <div class="ufp-detail-body">
         <div class="ufp-detail-comment">
           <div class="ufp-comment-meta">
-            <div class="ufp-avatar">${F(t.authorName)}</div>
+            <div class="ufp-avatar">${D(t.authorName)}</div>
             <div>
-              <div class="ufp-comment-author">${A(t.authorName)}</div>
-              <div class="ufp-comment-time">${W(t.createdAt)}</div>
+              <div class="ufp-comment-author">${T(t.authorName)}</div>
+              <div class="ufp-comment-time">${U(t.createdAt)}</div>
             </div>
           </div>
-          <div class="ufp-detail-comment-text">${A(t.text)}</div>
+          <div class="ufp-detail-comment-text">${T(t.text)}</div>
           <div class="ufp-detail-actions" id="ufp-detail-actions"></div>
         </div>
         <div id="ufp-detail-replies"></div>
       </div>
     </div>
-  `, e.appendChild(p), p.querySelector("#ufp-detail-back").addEventListener("click", () => {
-    p.remove(), y({ panelOpen: !0 });
+  `, e.appendChild(i), i.querySelector("#ufp-detail-back").addEventListener("click", () => {
+    i.remove(), k({ panelOpen: !0 });
   });
-  const s = p.querySelector("#ufp-detail-actions");
+  const l = i.querySelector("#ufp-detail-actions");
   if (t.resolved) {
-    const f = document.createElement("button");
-    f.className = "ufp-btn ufp-btn-ghost", f.style.fontSize = "13px", f.innerHTML = `
+    const u = document.createElement("button");
+    u.className = "ufp-btn ufp-btn-ghost", u.style.fontSize = "13px", u.innerHTML = `
       <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
         style="vertical-align:middle;margin-right:4px"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg>
       Reopen
-    `, f.addEventListener("click", async () => {
-      f.disabled = !0, f.textContent = "Reopening…", await n.updateComment(t.id, { resolved: !1 }), a(t.id), p.remove(), y({ panelOpen: !0 });
-    }), s.appendChild(f);
+    `, u.addEventListener("click", async () => {
+      u.disabled = !0, u.textContent = "Reopening…", await n.updateComment(t.id, { resolved: !1 }), a(t.id), i.remove(), k({ panelOpen: !0 });
+    }), l.appendChild(u);
   } else {
-    const f = document.createElement("button");
-    f.className = "ufp-btn ufp-btn-primary", f.style.fontSize = "13px", f.innerHTML = `
+    const u = document.createElement("button");
+    u.className = "ufp-btn ufp-btn-primary", u.style.fontSize = "13px", u.innerHTML = `
       <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
         style="vertical-align:middle;margin-right:4px"><polyline points="20 6 9 17 4 12"/></svg>
       Mark Resolved
-    `, f.addEventListener("click", async () => {
-      f.disabled = !0, f.textContent = "Resolving…", await n.updateComment(t.id, { resolved: !0 }), o(t.id), p.remove(), y({ panelOpen: !0 });
-    }), s.appendChild(f);
+    `, u.addEventListener("click", async () => {
+      u.disabled = !0, u.textContent = "Resolving…", await n.updateComment(t.id, { resolved: !0 }), o(t.id), i.remove(), k({ panelOpen: !0 });
+    }), l.appendChild(u);
   }
-  const i = document.createElement("button");
-  i.className = "ufp-btn ufp-btn-ghost", i.style.fontSize = "13px", i.textContent = "Delete", i.addEventListener("click", async () => {
-    confirm("Delete this comment and all its replies?") && (i.disabled = !0, await n.deleteComment(t.id), d(t.id), p.remove(), y({ panelOpen: !0 }));
-  }), s.appendChild(i);
-  const u = p.querySelector("#ufp-detail-replies"), w = se(t.id, r, n, (f) => {
-    var b;
-    (b = w.addReply) == null || b.call(w, f), l == null || l(f);
+  const s = document.createElement("button");
+  s.className = "ufp-btn ufp-btn-ghost", s.style.fontSize = "13px", s.textContent = "Delete", s.addEventListener("click", async () => {
+    confirm("Delete this comment and all its replies?") && (s.disabled = !0, await n.deleteComment(t.id), p(t.id), i.remove(), k({ panelOpen: !0 }));
+  }), l.appendChild(s);
+  const h = i.querySelector("#ufp-detail-replies"), v = Ae(t.id, r, n, (u) => {
+    var w;
+    (w = v.addReply) == null || w.call(v, u), c == null || c(u);
   });
-  u.appendChild(w);
-  const h = p.querySelector(".ufp-detail-screenshot"), k = p.querySelector(".ufp-detail-annotation-svg"), E = () => {
-    const f = h.clientWidth, b = h.clientHeight;
-    k.setAttribute("viewBox", `0 0 ${f} ${b}`), re(k, t.annotation, f, b), k.querySelectorAll("[marker-end]").forEach((m) => {
-      m.setAttribute("marker-end", "url(#ufp-detail-arrowhead)");
+  h.appendChild(v);
+  const m = i.querySelector(".ufp-detail-screenshot"), b = i.querySelector(".ufp-detail-annotation-svg"), x = () => {
+    const u = m.clientWidth, w = m.clientHeight;
+    b.setAttribute("viewBox", `0 0 ${u} ${w}`), ke(b, t.annotation, u, w), b.querySelectorAll("[marker-end]").forEach((C) => {
+      C.setAttribute("marker-end", "url(#ufp-detail-arrowhead)");
     });
   };
-  h.complete && h.naturalWidth > 0 ? E() : h.addEventListener("load", E);
+  m.complete && m.naturalWidth > 0 ? x() : m.addEventListener("load", x);
 }
-function pe(e, t, r) {
+function Te(e, t, r) {
   const n = document.createElement("div");
   n.className = "ufp-panel", n.innerHTML = `
     <div class="ufp-panel-header">
@@ -1109,138 +1178,171 @@ function pe(e, t, r) {
     </div>
     <div class="ufp-panel-list" id="ufp-comment-list"></div>
   `, e.appendChild(n), n.querySelector("#ufp-panel-close").addEventListener("click", () => {
-    y({ panelOpen: !1 });
+    k({ panelOpen: !1 });
   }), n.querySelector("#ufp-new-feedback").addEventListener("click", () => {
-    y({ panelOpen: !1 }), r();
-  }), n.querySelectorAll(".ufp-filter-tab").forEach((l) => {
-    l.addEventListener("click", () => {
-      n.querySelectorAll(".ufp-filter-tab").forEach((p) => p.classList.remove("active")), l.classList.add("active"), y({ filter: l.dataset.filter });
+    k({ panelOpen: !1 }), r();
+  }), n.querySelectorAll(".ufp-filter-tab").forEach((c) => {
+    c.addEventListener("click", () => {
+      n.querySelectorAll(".ufp-filter-tab").forEach((i) => i.classList.remove("active")), c.classList.add("active"), k({ filter: c.dataset.filter });
     });
   });
-  const o = n.querySelector("#ufp-comment-list"), a = /* @__PURE__ */ new Map(), d = async (l, p) => {
-    const s = l.filter((i) => p === "open" ? !i.resolved : i.resolved);
-    if (o.innerHTML = "", s.length === 0) {
+  const o = n.querySelector("#ufp-comment-list"), a = /* @__PURE__ */ new Map(), p = async (c, i) => {
+    const l = c.filter((s) => i === "open" ? !s.resolved : s.resolved);
+    if (o.innerHTML = "", l.length === 0) {
       o.innerHTML = `
         <div class="ufp-panel-empty">
           <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.4">
             <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
           </svg>
-          <span>No ${p} comments yet</span>
-          ${p === "open" ? '<span style="font-size:12px;color:#9ca3af;">Click <strong>New</strong> to add feedback</span>' : ""}
+          <span>No ${i} comments yet</span>
+          ${i === "open" ? '<span style="font-size:12px;color:#9ca3af;">Click <strong>New</strong> to add feedback</span>' : ""}
         </div>
       `;
       return;
     }
-    for (const i of s) {
-      if (!a.has(i.id))
+    for (const s of l) {
+      if (!a.has(s.id))
         try {
-          a.set(i.id, await t.getReplies(i.id));
+          a.set(s.id, await t.getReplies(s.id));
         } catch {
-          a.set(i.id, []);
+          a.set(s.id, []);
         }
       o.appendChild(
-        de(i, a, e, t)
+        Ne(s, a, e, t)
       );
     }
   };
-  return _(async (l) => {
-    n.classList.toggle("open", l.panelOpen), l.panelOpen && await d(l.comments, l.filter);
+  return oe(async (c) => {
+    n.classList.toggle("open", c.panelOpen), c.panelOpen && await p(c.comments, c.filter);
   }), n;
 }
-function de(e, t, r, n, o) {
-  const a = t.get(e.id) ?? [], d = document.createElement("div");
-  return d.className = "ufp-comment-card", d.dataset.id = e.id, d.innerHTML = `
+function Ne(e, t, r, n, o) {
+  const a = t.get(e.id) ?? [], p = document.createElement("div");
+  return p.className = "ufp-comment-card", p.dataset.id = e.id, p.innerHTML = `
     <div class="ufp-comment-card-header">
       <div class="ufp-comment-meta">
-        <div class="ufp-avatar">${F(e.authorName)}</div>
+        <div class="ufp-avatar">${D(e.authorName)}</div>
         <div>
-          <div class="ufp-comment-author">${A(e.authorName)}</div>
-          <div class="ufp-comment-time">${W(e.createdAt)}</div>
+          <div class="ufp-comment-author">${T(e.authorName)}</div>
+          <div class="ufp-comment-time">${U(e.createdAt)}</div>
         </div>
       </div>
       ${e.resolved ? '<span class="ufp-resolved-badge">Resolved</span>' : ""}
     </div>
     <img class="ufp-comment-thumbnail" src="${e.screenshotUrl}" alt="Screenshot" loading="lazy" />
-    <div class="ufp-comment-text">${A(e.text)}</div>
+    <div class="ufp-comment-text">${T(e.text)}</div>
     <div class="ufp-comment-footer">
       <span class="ufp-reply-count">
         ${a.length > 0 ? `${a.length} ${a.length === 1 ? "reply" : "replies"}` : "No replies yet — click to reply"}
       </span>
     </div>
-  `, d.addEventListener("click", async () => {
-    let l = t.get(e.id) ?? [];
+  `, p.addEventListener("click", async () => {
+    let c = t.get(e.id) ?? [];
     try {
-      l = await n.getReplies(e.id), t.set(e.id, l);
-    } catch (p) {
-      console.error("[ui-feedback-plugin] Failed to fetch replies:", p);
+      c = await n.getReplies(e.id), t.set(e.id, c);
+    } catch (i) {
+      console.error("[ui-feedback-plugin] Failed to fetch replies:", i);
     }
-    le(
+    ze(
       r,
       e,
-      l,
+      c,
       n,
-      (p) => {
-        const s = L();
-        y({ comments: s.comments.map((i) => i.id === p ? { ...i, resolved: !0 } : i) });
+      (i) => {
+        const l = A();
+        k({ comments: l.comments.map((s) => s.id === i ? { ...s, resolved: !0 } : s) });
       },
-      (p) => {
-        const s = L();
-        y({ comments: s.comments.map((i) => i.id === p ? { ...i, resolved: !1 } : i) });
+      (i) => {
+        const l = A();
+        k({ comments: l.comments.map((s) => s.id === i ? { ...s, resolved: !1 } : s) });
       },
-      (p) => {
-        const s = L();
-        y({ comments: s.comments.filter((i) => i.id !== p) }), t.delete(p);
+      (i) => {
+        const l = A();
+        k({ comments: l.comments.filter((s) => s.id !== i) }), t.delete(i);
       },
       // When a reply is added in the detail view, update badge count immediately
-      (p) => {
-        const s = t.get(e.id) ?? [];
-        t.set(e.id, [...s, p]);
-        const i = L();
-        y({ comments: [...i.comments] });
+      (i) => {
+        const l = t.get(e.id) ?? [];
+        t.set(e.id, [...l, i]);
+        const s = A();
+        k({ comments: [...s.comments] });
       }
     );
-  }), d;
+  }), p;
 }
-async function ce() {
+async function He() {
   try {
-    const e = await ue();
-    return await fe(e);
+    const e = await $e();
+    return await Be(e);
   } catch (e) {
-    return console.error("[ui-feedback-plugin] capturePageScreenshot failed:", e), me();
+    return console.error("[ui-feedback-plugin] capturePageScreenshot failed:", e), Re();
   }
 }
-async function ue() {
+async function $e() {
   return (await import("./html2canvas-pro.esm-QETbiPYt.mjs")).default;
 }
-async function fe(e) {
-  const t = window.scrollX, r = window.scrollY;
-  window.scrollTo(0, 0);
-  try {
-    return (await e(document.body, {
-      allowTaint: !1,
-      useCORS: !0,
-      logging: !1,
-      scale: Math.min(window.devicePixelRatio, 2),
-      width: document.documentElement.scrollWidth,
-      height: document.documentElement.scrollHeight,
-      windowWidth: document.documentElement.scrollWidth,
-      windowHeight: document.documentElement.scrollHeight,
-      x: 0,
-      y: 0,
-      ignoreElements: (o) => o.tagName === "UI-FEEDBACK-PLUGIN"
-    })).toDataURL("image/png");
-  } finally {
-    window.scrollTo(t, r);
-  }
+async function Be(e) {
+  const t = document.documentElement.clientWidth, r = window.innerHeight;
+  return (await e(document.body, {
+    allowTaint: !1,
+    useCORS: !0,
+    logging: !1,
+    scale: Math.min(window.devicePixelRatio, 2),
+    x: window.scrollX,
+    y: window.scrollY,
+    width: t,
+    height: r,
+    windowWidth: t,
+    windowHeight: r,
+    ignoreElements: (o) => o.tagName === "UI-FEEDBACK-PLUGIN"
+  })).toDataURL("image/png");
 }
-function me() {
+function Re() {
   const e = document.createElement("canvas");
   e.width = window.innerWidth, e.height = window.innerHeight;
   const t = e.getContext("2d");
   return t.fillStyle = "#f3f4f6", t.fillRect(0, 0, e.width, e.height), t.fillStyle = "#9ca3af", t.font = "16px -apple-system, sans-serif", t.textAlign = "center", t.fillText("Screenshot unavailable", e.width / 2, e.height / 2), e.toDataURL("image/png");
 }
-const q = "ui-feedback-plugin";
-async function he(e) {
+async function We(e, t) {
+  try {
+    const r = await new Promise((i, l) => {
+      const s = new Image();
+      s.onload = () => i(s), s.onerror = () => l(new Error("screenshot failed to load")), s.src = e;
+    }), n = document.createElement("canvas");
+    n.width = r.naturalWidth, n.height = r.naturalHeight;
+    const o = n.getContext("2d");
+    o.drawImage(r, 0, 0);
+    const a = n.width / t.pageWidth, p = n.height / t.pageHeight, c = Math.min(a, p);
+    o.lineCap = "round", o.lineJoin = "round";
+    for (const i of t.shapes)
+      switch (o.strokeStyle = i.color, o.fillStyle = i.color, o.beginPath(), i.type) {
+        case "pen": {
+          o.lineWidth = i.width * c, i.points.forEach((l, s) => s === 0 ? o.moveTo(l.x * a, l.y * p) : o.lineTo(l.x * a, l.y * p)), o.stroke();
+          break;
+        }
+        case "rect": {
+          o.lineWidth = i.strokeWidth * c, o.roundRect(i.x * a, i.y * p, i.width * a, i.height * p, 3 * c), o.stroke();
+          break;
+        }
+        case "circle": {
+          o.lineWidth = i.strokeWidth * c, o.ellipse(i.cx * a, i.cy * p, i.rx * a, i.ry * p, 0, 0, Math.PI * 2), o.stroke();
+          break;
+        }
+        case "arrow": {
+          const l = i.width * c, s = i.x1 * a, h = i.y1 * p, v = i.x2 * a, m = i.y2 * p;
+          o.lineWidth = l, o.lineCap = "butt", o.moveTo(s, h), o.lineTo(v, m), o.stroke(), o.lineCap = "round";
+          const b = Math.hypot(v - s, m - h) || 1, x = (v - s) / b, u = (m - h) / b, w = v + x * l, C = m + u * l, N = w - x * 10 * l, H = C - u * 10 * l;
+          o.beginPath(), o.moveTo(w, C), o.lineTo(N - u * 3.5 * l, H + x * 3.5 * l), o.lineTo(N + u * 3.5 * l, H - x * 3.5 * l), o.closePath(), o.fill();
+          break;
+        }
+      }
+    return n.toDataURL("image/png");
+  } catch (r) {
+    return console.error("[ui-feedback-plugin] drawAnnotationsOnScreenshot failed:", r), e;
+  }
+}
+const F = "ui-feedback-plugin";
+async function Oe(e) {
   const { backend: t } = e;
   if (t.provider === "firebase") {
     const { FirebaseAdapter: r } = await import("./firebase-BGU5KpRU.mjs"), n = new r(t);
@@ -1260,112 +1362,114 @@ async function he(e) {
   }
   throw new Error("[ui-feedback-plugin] Unknown backend provider");
 }
-function xe(e) {
-  var d;
-  if (customElements.get(q))
+function Pe(e) {
+  var p;
+  if (customElements.get(F))
     return console.warn("[ui-feedback-plugin] Already initialized."), () => {
     };
-  const t = ((d = e.theme) == null ? void 0 : d.primaryColor) ?? "#6366f1", r = e.projectKey ?? "default", n = e.position ?? "bottom-right";
-  y({ config: e });
+  const t = ((p = e.theme) == null ? void 0 : p.primaryColor) ?? "#6366f1", r = e.projectKey ?? "default", n = e.position ?? "bottom-right";
+  k({ config: e });
   class o extends HTMLElement {
     constructor() {
       super();
-      H(this, "shadow");
-      H(this, "db");
-      H(this, "screenshot");
-      H(this, "unsubscribe", null);
+      O(this, "shadow");
+      O(this, "db");
+      O(this, "screenshot");
+      O(this, "unsubscribe", null);
       this.shadow = this.attachShadow({ mode: "open" });
     }
     async connectedCallback() {
-      const s = document.createElement("style");
-      s.textContent = Q(t), this.shadow.appendChild(s);
+      const l = document.createElement("style");
+      l.textContent = xe(t), this.shadow.appendChild(l);
       try {
-        const i = await he(e);
-        this.db = i.db, this.screenshot = i.screenshot;
-      } catch (i) {
-        console.error("[ui-feedback-plugin] Failed to initialise backend:", i);
+        const s = await Oe(e);
+        this.db = s.db, this.screenshot = s.screenshot;
+      } catch (s) {
+        console.error("[ui-feedback-plugin] Failed to initialise backend:", s);
         return;
       }
       this.mount();
     }
     disconnectedCallback() {
-      var s;
-      (s = this.unsubscribe) == null || s.call(this);
+      var l;
+      (l = this.unsubscribe) == null || l.call(this);
     }
     mount() {
-      const s = I(window.location.href);
-      pe(this.shadow, this.db, () => this.startAnnotation()), ee(
+      const l = Q(window.location.href);
+      Te(this.shadow, this.db, () => this.startAnnotation()), ve(
         this.shadow,
         n,
         () => this.startAnnotation(),
-        () => y({ panelOpen: !L().panelOpen })
-      ), this.unsubscribe = this.db.subscribeToComments(s, r, (i) => {
-        y({ comments: i });
+        () => k({ panelOpen: !A().panelOpen })
+      ), this.unsubscribe = this.db.subscribeToComments(l, r, (s) => {
+        k({ comments: s });
       });
     }
     async startAnnotation() {
-      let s = X();
-      if (!s && (s = await ne(this.shadow), !s))
+      let l = re();
+      if (!l && (l = await we(this.shadow), !l))
         return;
-      y({ active: !0, panelOpen: !1 });
-      const i = await ie(this.shadow);
-      if (!i) {
-        y({ active: !1 });
+      k({ active: !0, panelOpen: !1 });
+      const s = await Le(this.shadow);
+      if (!s) {
+        k({ active: !1 });
         return;
       }
-      y({ active: !1 }), this.showToast("Saving comment…", "info");
+      k({ active: !1 }), this.showToast("Saving comment…", "info");
       try {
-        await this.saveComment(s, i.text, i.shapes), this.showToast("Comment saved!", "success");
-      } catch (u) {
-        console.error("[ui-feedback-plugin] Failed to save comment:", u), this.showToast("Failed to save — check the browser console for details.", "error");
+        await this.saveComment(l, s.text, s.shapes), this.showToast("Comment saved!", "success");
+      } catch (h) {
+        console.error("[ui-feedback-plugin] Failed to save comment:", h), this.showToast("Failed to save — check the browser console for details.", "error");
         return;
       }
-      y({ panelOpen: !0 });
-    }
-    async saveComment(s, i, u) {
-      const w = I(window.location.href), h = {
-        shapes: u,
-        pageWidth: document.documentElement.scrollWidth,
-        pageHeight: document.documentElement.scrollHeight
+      k({ panelOpen: !0 });
+    }
+    async saveComment(l, s, h) {
+      const v = Q(window.location.href), m = {
+        shapes: h,
+        // Shapes are in viewport coordinates; the screenshot covers just the visible viewport.
+        pageWidth: document.documentElement.clientWidth,
+        pageHeight: window.innerHeight
       };
       this.style.visibility = "hidden";
-      let k;
+      let b;
       try {
-        k = await ce();
+        b = await He();
       } finally {
         this.style.visibility = "";
       }
-      const E = {
-        pageUrl: w,
+      b = await We(b, m);
+      const x = {
+        pageUrl: v,
         projectKey: r,
-        authorName: s,
-        text: i,
+        authorName: l,
+        text: s,
         screenshotUrl: "",
-        annotation: h,
+        annotation: m,
         resolved: !1,
         createdAt: Date.now()
-      }, f = await this.db.addComment(E), b = await this.screenshot.uploadScreenshot(f, k);
-      await this.db.updateComment(f, { screenshotUrl: b });
-    }
-    showToast(s, i) {
-      const u = this.shadow.querySelector(".ufp-toast");
-      u == null || u.remove();
-      const w = { info: "#6366f1", success: "#10b981", error: "#ef4444" }, h = document.createElement("div");
-      h.className = "ufp-toast", h.style.cssText = `
+      }, u = await this.db.addComment(x), w = await this.screenshot.uploadScreenshot(u, b);
+      await this.db.updateComment(u, { screenshotUrl: w });
+    }
+    showToast(l, s) {
+      const h = this.shadow.querySelector(".ufp-toast");
+      h == null || h.remove();
+      const v = { info: "#6366f1", success: "#10b981", error: "#ef4444" }, m = document.createElement("div");
+      m.className = "ufp-toast", m.style.cssText = `
         position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
-        background:${w[i]};color:white;padding:10px 20px;border-radius:8px;
+        background:${v[s]};color:white;padding:10px 20px;border-radius:8px;
         font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
         font-size:13px;font-weight:500;z-index:2147483647;
         box-shadow:0 4px 12px rgba(0,0,0,0.2);pointer-events:none;
         max-width:360px;text-align:center;
-      `, h.textContent = s, this.shadow.appendChild(h), setTimeout(() => h.remove(), i === "error" ? 6e3 : 2500);
+      `, m.textContent = l, this.shadow.appendChild(m), setTimeout(() => m.remove(), s === "error" ? 6e3 : 2500);
     }
   }
-  customElements.define(q, o);
-  const a = document.createElement(q);
+  customElements.define(F, o);
+  const a = document.createElement(F);
   return document.body.appendChild(a), () => a.remove();
 }
 export {
-  xe as initFeedbackPlugin
+  Pe as initFeedbackPlugin
 };
 //# sourceMappingURL=ui-feedback-plugin.es.js.map