@mindbowser_inc/ui-feedback-plugin 0.5.0 → 0.6.0

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

@@ -1,6 +1,6 @@
-var ge = Object.defineProperty;
-var xe = (e, t, r) => t in e ? ge(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
-var O = (e, t, r) => xe(e, typeof t != "symbol" ? t + "" : t, r);
+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,
@@ -18,18 +18,18 @@ function A() {
 function k(e) {
   R = { ...R, ...e }, I.forEach((t) => t(R));
 }
-function ne(e) {
+function oe(e) {
   return I.add(e), () => I.delete(e);
 }
-function oe() {
+function re() {
   if (R.userName) return R.userName;
   const e = localStorage.getItem("ufp_user_name");
   return e ? (k({ userName: e }), e) : null;
 }
-function re(e) {
+function ie(e) {
   localStorage.setItem("ufp_user_name", e), k({ userName: e });
 }
-function J(e) {
+function Q(e) {
   try {
     const t = new URL(e);
     return t.origin + t.pathname;
@@ -37,7 +37,7 @@ function J(e) {
     return e;
   }
 }
-function ye(e) {
+function xe(e) {
   return `
     :host {
       --ufp-primary: ${e};
@@ -592,15 +592,15 @@ function ye(e) {
     }
   `;
 }
-const ve = {
+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" }
-}, q = "#6366f1", Q = "#4f46e5", Z = "#4338ca";
-function be(e, t, r, o) {
-  const n = document.createElement("div");
-  Object.assign(n.style, {
+}, q = "#6366f1", Z = "#4f46e5", ee = "#4338ca";
+function ve(e, t, r, n) {
+  const o = document.createElement("div");
+  Object.assign(o.style, {
     position: "fixed",
     zIndex: "2147483647",
     display: "flex",
@@ -609,10 +609,10 @@ function be(e, t, r, o) {
     boxShadow: "0 4px 20px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.16)",
     overflow: "hidden",
     userSelect: "none",
-    ...ve[t]
+    ...ye[t]
   });
   const a = document.createElement("button");
-  a.id = "ufp-btn-annotate", a.title = "Add feedback annotation", ee(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"/>
@@ -622,25 +622,25 @@ function be(e, t, r, o) {
   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", ee(c), c.style.padding = "10px 14px", c.innerHTML = `
+  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>
-  `, n.appendChild(a), n.appendChild(p), n.appendChild(c), e.appendChild(n);
-  const i = n.querySelector("#ufp-annotate-label"), l = n.querySelector("#ufp-panel-count");
+  `, 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(), n._dragged) return;
-    const m = A();
-    m.active || (m.panelOpen ? (o(), setTimeout(r, 220)) : r());
+    if (s.stopPropagation(), o._dragged) return;
+    const h = A();
+    h.active || (h.panelOpen ? (n(), setTimeout(r, 220)) : r());
   }), c.addEventListener("click", (s) => {
-    s.stopPropagation(), !n._dragged && (A().active || o());
-  }), te(a, () => (A().panelOpen, q), Q), te(c, () => A().panelOpen ? Z : q, Q), ne((s) => {
-    const m = s.comments.filter((v) => !v.resolved).length;
-    l.textContent = m > 0 ? String(m) : "", 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 ? Z : q;
-  }), we(n), n;
+    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 ee(e) {
+function te(e) {
   Object.assign(e.style, {
     display: "flex",
     alignItems: "center",
@@ -654,23 +654,23 @@ function ee(e) {
     transition: "background 0.12s"
   });
 }
-function te(e, t, r) {
+function ne(e, t, r) {
   e.addEventListener("mouseenter", () => {
     e.style.background = r;
   }), e.addEventListener("mouseleave", () => {
     e.style.background = t();
   });
 }
-function we(e) {
-  let t = 0, r = 0, o = 0, n = 0;
+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 p = e.getBoundingClientRect();
-    o = p.left, n = p.top, e._dragged = !1;
+    n = p.left, o = p.top, e._dragged = !1;
     const c = (l) => {
-      const s = l.clientX - t, m = l.clientY - r;
-      !e._dragged && Math.sqrt(s * s + m * m) < 5 || (e._dragged = !0, e.style.left = `${Math.max(0, Math.min(window.innerWidth - e.offsetWidth, o + s))}px`, e.style.top = `${Math.max(0, Math.min(window.innerHeight - e.offsetHeight, n + m))}px`, e.style.right = "auto", e.style.bottom = "auto");
+      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;
@@ -679,7 +679,7 @@ function we(e) {
     document.addEventListener("pointermove", c), document.addEventListener("pointerup", i);
   });
 }
-function ke(e) {
+function we(e) {
   return new Promise((t) => {
     const r = document.createElement("div");
     r.className = "ufp-modal-backdrop", r.innerHTML = `
@@ -699,42 +699,42 @@ function ke(e) {
         </div>
       </div>
     `, e.appendChild(r);
-    const o = r.querySelector("#ufp-name-input"), n = r.querySelector("#ufp-name-submit");
-    o.addEventListener("input", () => {
-      n.disabled = o.value.trim().length === 0;
+    const n = r.querySelector("#ufp-name-input"), o = r.querySelector("#ufp-name-submit");
+    n.addEventListener("input", () => {
+      o.disabled = n.value.trim().length === 0;
     });
     const a = () => {
-      const p = o.value.trim();
-      p && (re(p), r.remove(), t(p));
+      const p = n.value.trim();
+      p && (ie(p), r.remove(), t(p));
     };
-    n.addEventListener("click", a), o.addEventListener("keydown", (p) => {
+    o.addEventListener("click", a), n.addEventListener("keydown", (p) => {
       p.key === "Enter" && a();
-    }), requestAnimationFrame(() => o.focus());
+    }), requestAnimationFrame(() => n.focus());
   });
 }
-const L = "#6366f1", T = 3;
+const L = "#6366f1", z = 3;
 function B(e, t = 1, r = 1) {
   switch (e.type) {
     case "pen": {
-      const o = document.createElementNS("http://www.w3.org/2000/svg", "path");
-      return o.setAttribute("d", Se(e.points, t, r)), o.setAttribute("stroke", e.color), o.setAttribute("stroke-width", String(e.width * Math.min(t, r))), o.setAttribute("fill", "none"), o.setAttribute("stroke-linecap", "round"), o.setAttribute("stroke-linejoin", "round"), o;
+      const n = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      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 o = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-      return o.setAttribute("x", String(e.x * t)), o.setAttribute("y", String(e.y * r)), o.setAttribute("width", String(e.width * t)), o.setAttribute("height", String(e.height * r)), o.setAttribute("stroke", e.color), o.setAttribute("stroke-width", String(e.strokeWidth * Math.min(t, r))), o.setAttribute("fill", "none"), o.setAttribute("rx", "3"), o;
+      const n = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+      return n.setAttribute("x", String(e.x * t)), n.setAttribute("y", String(e.y * r)), n.setAttribute("width", String(e.width * t)), n.setAttribute("height", String(e.height * r)), n.setAttribute("stroke", e.color), n.setAttribute("stroke-width", String(e.strokeWidth * Math.min(t, r))), n.setAttribute("fill", "none"), n.setAttribute("rx", "3"), n;
     }
     case "circle": {
-      const o = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
-      return o.setAttribute("cx", String(e.cx * t)), o.setAttribute("cy", String(e.cy * r)), o.setAttribute("rx", String(e.rx * t)), o.setAttribute("ry", String(e.ry * r)), o.setAttribute("stroke", e.color), o.setAttribute("stroke-width", String(e.strokeWidth * Math.min(t, r))), o.setAttribute("fill", "none"), o;
+      const n = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+      return n.setAttribute("cx", String(e.cx * t)), n.setAttribute("cy", String(e.cy * r)), n.setAttribute("rx", String(e.rx * t)), n.setAttribute("ry", String(e.ry * r)), n.setAttribute("stroke", e.color), n.setAttribute("stroke-width", String(e.strokeWidth * Math.min(t, r))), n.setAttribute("fill", "none"), n;
     }
     case "arrow": {
-      const o = document.createElementNS("http://www.w3.org/2000/svg", "g"), n = document.createElementNS("http://www.w3.org/2000/svg", "line");
-      return n.setAttribute("x1", String(e.x1 * t)), n.setAttribute("y1", String(e.y1 * r)), n.setAttribute("x2", String(e.x2 * t)), n.setAttribute("y2", String(e.y2 * r)), n.setAttribute("stroke", e.color), n.setAttribute("stroke-width", String(e.width * Math.min(t, r))), n.setAttribute("marker-end", "url(#ufp-arrowhead)"), o.appendChild(n), o;
+      const n = document.createElementNS("http://www.w3.org/2000/svg", "g"), o = document.createElementNS("http://www.w3.org/2000/svg", "line");
+      return o.setAttribute("x1", String(e.x1 * t)), o.setAttribute("y1", String(e.y1 * r)), o.setAttribute("x2", String(e.x2 * t)), o.setAttribute("y2", String(e.y2 * r)), o.setAttribute("stroke", e.color), o.setAttribute("stroke-width", String(e.width * Math.min(t, r))), o.setAttribute("marker-end", "url(#ufp-arrowhead)"), n.appendChild(o), n;
     }
   }
 }
-function Ee(e, t, r, o) {
-  const n = r / t.pageWidth, a = o / t.pageHeight;
+function ke(e, t, r, n) {
+  const o = r / t.pageWidth, a = n / t.pageHeight;
   e.innerHTML = "";
   const p = document.createElementNS("http://www.w3.org/2000/svg", "defs");
   p.innerHTML = `
@@ -742,58 +742,58 @@ function Ee(e, t, r, o) {
       <polygon points="0 0, 10 3.5, 0 7" fill="${L}" />
     </marker>
   `, e.appendChild(p), t.shapes.forEach((c) => {
-    e.appendChild(B(c, n, a));
+    e.appendChild(B(c, o, a));
   });
 }
-function Se(e, t, r) {
+function Ee(e, t, r) {
   if (e.length === 0) return "";
   if (e.length === 1) {
-    const n = e[0];
-    return `M ${n.x * t} ${n.y * r}`;
+    const o = e[0];
+    return `M ${o.x * t} ${o.y * r}`;
   }
-  let o = `M ${e[0].x * t} ${e[0].y * r}`;
-  for (let n = 1; n < e.length; n++)
-    o += ` L ${e[n].x * t} ${e[n].y * r}`;
-  return o;
+  let n = `M ${e[0].x * t} ${e[0].y * r}`;
+  for (let o = 1; o < e.length; o++)
+    n += ` L ${e[o].x * t} ${e[o].y * r}`;
+  return n;
 }
-function Ce(e, t, r) {
-  if (window.scrollY === 0) return null;
-  const o = window.innerWidth, n = window.innerHeight, a = document.elementsFromPoint(e, t).find((p) => p !== r);
+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 >= o * 0.9 && i.height >= n * 0.9)) {
+    if (!(i.width >= n * 0.9 && i.height >= o * 0.9)) {
       if (c.position === "sticky") {
-        if (i.top < n * 0.25) return "top";
+        if (i.top < o * 0.25) return "top";
         continue;
       }
-      return n - i.bottom < i.top ? "bottom" : "top";
+      return o - i.bottom < i.top ? "bottom" : "top";
     }
   }
   return null;
 }
-function Le(e, t) {
-  if (!t) return e;
+function Ce(e, t, r) {
+  if (!t && !r) return e;
   switch (e.type) {
     case "pen":
-      return { ...e, points: e.points.map((r) => ({ x: r.x, y: r.y + t })) };
+      return { ...e, points: e.points.map((n) => ({ x: n.x + t, y: n.y + r })) };
     case "rect":
-      return { ...e, y: e.y + t };
+      return { ...e, x: e.x + t, y: e.y + r };
     case "circle":
-      return { ...e, cy: e.cy + t };
+      return { ...e, cx: e.cx + t, cy: e.cy + r };
     case "arrow":
-      return { ...e, y1: e.y1 + t, y2: e.y2 + t };
+      return { ...e, x1: e.x1 + t, y1: e.y1 + r, x2: e.x2 + t, y2: e.y2 + r };
   }
 }
-function Me(e) {
+function Le(e) {
   return new Promise((t) => {
     let r = "pen";
-    const o = [];
-    let n = !1, a = 0, p = 0, c = [], i = null, l = null, s = !1, m = 0;
+    const n = [];
+    let o = !1, a = 0, p = 0, c = [], i = null, l = null, s = !1, h = 0;
     const v = [];
-    let h = null;
-    const b = () => h ? { x: 0, y: 0 } : { x: window.scrollX, y: window.scrollY }, x = document.createElement("div");
+    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 = `
@@ -811,16 +811,16 @@ function Me(e) {
     N(), window.addEventListener("scroll", N, { passive: !0 });
     function H() {
       window.removeEventListener("scroll", N);
-      for (const d of Y) window.removeEventListener(d, K, !0);
-      for (const d of X) window.removeEventListener(d, G, !0);
+      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 = "", o.forEach((d, g) => (v[g] ? C : w).appendChild(B(d)));
+      w.innerHTML = "", C.innerHTML = "", n.forEach((d, g) => (v[g] ? C : w).appendChild(B(d)));
     }
     function _() {
       let d = 0, g = 0, y = 0;
-      return o.forEach((f, E) => {
+      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];
@@ -831,10 +831,10 @@ function Me(e) {
         anchorY: y > 0 ? g / y : window.innerHeight / 2
       };
     }
-    function ie() {
-      s = !0, n = !1, x.style.pointerEvents = "none", P.style.pointerEvents = "none", ae();
-    }
     function ae() {
+      s = !0, o = !1, x.style.pointerEvents = "none", P.style.pointerEvents = "none", se();
+    }
+    function se() {
       l && l.remove();
       const { anchorX: d, anchorY: g } = _(), y = 300, f = 12;
       let E = d + f, S = g + f;
@@ -861,22 +861,22 @@ function Me(e) {
                    color:#fff;opacity:0.45;transition:opacity 0.15s;">Submit</button>
         </div>
       `, e.appendChild(l);
-      const M = l.querySelector("#ufp-inline-text"), $ = l.querySelector("#ufp-popup-submit"), ce = l.querySelector("#ufp-popup-cancel");
+      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 de = _();
+        const ue = _();
         H();
-        const ue = Math.max(0, document.documentElement.scrollHeight - window.innerHeight), fe = o.map((me, he) => Le(me, v[he] === "bottom" ? ue : 0));
-        t({ shapes: fe, text: W, ...de });
-      }), ce.addEventListener("click", () => {
+        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 = Ae(
+    const P = Me(
       e,
       (d) => {
         r = d;
@@ -885,71 +885,71 @@ function Me(e) {
         H(), t(null);
       },
       () => {
-        o.length !== 0 && (l && (l.remove(), l = null, x.style.pointerEvents = "auto", P.style.pointerEvents = "auto", s = !1), o.pop(), v.pop(), j());
+        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(x);
-    const Y = ["pointerdown", "pointermove", "pointerup", "pointercancel"], X = ["mousedown", "mouseup", "click", "dblclick", "auxclick", "touchstart", "touchmove", "contextmenu", "dragstart", "selectstart"];
+    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() > m || (d.preventDefault(), d.stopPropagation());
+      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" ? se(g) : d.type === "pointermove" ? le(g) : d.type === "pointerup" ? pe(g) : d.type === "pointercancel" && (n = !1, i && (i.remove(), i = null));
+      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 se(d) {
+    function le(d) {
       if (d.button === 0) {
         d.preventDefault();
         try {
           x.setPointerCapture(d.pointerId);
         } catch {
         }
-        n = !0, h = Ce(d.clientX, d.clientY, e.host), a = d.clientX + b().x, p = d.clientY + b().y, r === "pen" && (c = [{ x: a, y: p }]);
+        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 le(d) {
-      if (!n) return;
+    function pe(d) {
+      if (!o) return;
       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: T });
+        c.push({ x: g, y }), i = B({ type: "pen", points: [...c], color: L, width: z });
       else if (r === "rect") {
-        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: T };
+        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 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: T };
+        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: T }));
-      i && (h ? C : w).appendChild(i);
+      } 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 pe(d) {
-      if (!n) return;
-      m = performance.now() + 400, n = !1, i && (i.remove(), i = null);
+    function ce(d) {
+      if (!o) return;
+      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)
-        o.push({ type: "pen", points: [...c], color: L, width: T }), c = [], f = !0;
+        n.push({ type: "pen", points: [...c], color: L, width: z }), c = [], f = !0;
       else if (r === "rect") {
         const E = Math.abs(g - a), S = Math.abs(y - p);
-        E > 4 && S > 4 && (o.push({ type: "rect", x: Math.min(a, g), y: Math.min(p, y), width: E, height: S, color: L, strokeWidth: T }), f = !0);
+        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 E = Math.abs(g - a) / 2, S = Math.abs(y - p) / 2;
-        E > 4 && S > 4 && (o.push({ type: "circle", cx: Math.min(a, g) + E, cy: Math.min(p, y) + S, rx: E, ry: S, color: L, strokeWidth: T }), f = !0);
-      } else r === "arrow" && Math.sqrt((g - a) ** 2 + (y - p) ** 2) > 10 && (o.push({ type: "arrow", x1: a, y1: p, x2: g, y2: y, color: L, width: T }), f = !0);
-      f && (v.push(h), j(), ie());
+        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 Y) window.addEventListener(d, K, { capture: !0, passive: !1 });
-    for (const d of X) window.addEventListener(d, G, { capture: !0, passive: !1 });
+    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, o) {
-  const n = document.createElement("div");
-  return n.className = "ufp-toolbar", n.innerHTML = `
+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>
     <div class="ufp-toolbar-sep"></div>
     <button class="ufp-btn-icon active" data-tool="pen" title="Pen">
@@ -976,54 +976,54 @@ function Ae(e, t, r, o) {
     </button>
     <div class="ufp-toolbar-sep"></div>
     <button class="ufp-btn ufp-btn-ghost" id="ufp-cancel-btn">Cancel</button>
-  `, n.querySelectorAll("[data-tool]").forEach((a) => {
+  `, o.querySelectorAll("[data-tool]").forEach((a) => {
     a.addEventListener("click", () => {
-      n.querySelectorAll("[data-tool]").forEach((p) => p.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);
     });
-  }), n.querySelector("#ufp-undo-btn").addEventListener("click", o), n.querySelector("#ufp-cancel-btn").addEventListener("click", r), e.appendChild(n), n;
+  }), o.querySelector("#ufp-undo-btn").addEventListener("click", n), o.querySelector("#ufp-cancel-btn").addEventListener("click", r), e.appendChild(o), o;
 }
 function U(e) {
   const t = Date.now() - e, r = Math.floor(t / 1e3);
   if (r < 60) return "just now";
-  const o = Math.floor(r / 60);
-  if (o < 60) return `${o}m ago`;
-  const n = Math.floor(o / 60);
-  if (n < 24) return `${n}h ago`;
-  const a = Math.floor(n / 24);
+  const n = Math.floor(r / 60);
+  if (n < 60) return `${n}m ago`;
+  const o = Math.floor(n / 60);
+  if (o < 24) return `${o}h ago`;
+  const a = Math.floor(o / 24);
   return a < 7 ? `${a}d ago` : new Date(e).toLocaleDateString();
 }
 function D(e) {
   return e.split(" ").filter(Boolean).slice(0, 2).map((t) => t[0].toUpperCase()).join("");
 }
-function z(e) {
+function T(e) {
   return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-function Te(e, t, r, o) {
-  let n = [...t];
+function Ae(e, t, r, n) {
+  let o = [...t];
   const a = document.createElement("div");
   a.className = "ufp-replies";
-  const p = (h) => {
+  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;", h.length > 0) {
+    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 = `${h.length} ${h.length === 1 ? "Reply" : "Replies"}`, x.appendChild(u), h.forEach((w) => {
+      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;">${D(w.authorName)}</div>
-            <span class="ufp-reply-author">${z(w.authorName)}</span>
+            <span class="ufp-reply-author">${T(w.authorName)}</span>
             <span class="ufp-reply-time">${U(w.createdAt)}</span>
           </div>
-          <div class="ufp-reply-text">${z(w.text)}</div>
+          <div class="ufp-reply-text">${T(w.text)}</div>
         `, x.appendChild(C);
       });
     }
     a.insertBefore(x, a.querySelector(".ufp-reply-input-area"));
   }, c = document.createElement("div");
   c.className = "ufp-reply-input-area";
-  const i = oe();
+  const i = re();
   c.innerHTML = `
     <div class="ufp-reply-name-row">
       <span class="ufp-reply-name-label">Replying as:</span>
@@ -1032,7 +1032,7 @@ function Te(e, t, r, o) {
         id="ufp-reply-name"
         type="text"
         placeholder="Your name"
-        value="${z(i ?? "")}"
+        value="${T(i ?? "")}"
         style="flex:1;"
       />
     </div>
@@ -1047,30 +1047,30 @@ function Te(e, t, r, o) {
       <button class="ufp-btn ufp-btn-primary" id="ufp-reply-submit" disabled style="font-size:13px;padding:7px 14px;">Reply</button>
     </div>
   `;
-  const l = c.querySelector("#ufp-reply-name"), s = c.querySelector("#ufp-reply-text"), m = c.querySelector("#ufp-reply-submit"), v = () => {
-    m.disabled = l.value.trim().length === 0 || s.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 l.addEventListener("input", v), s.addEventListener("input", v), m.addEventListener("click", async () => {
-    const h = l.value.trim(), b = s.value.trim();
-    if (!h || !b) return;
-    m.disabled = !0, m.textContent = "Sending…", re(h);
+  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,
+      authorName: m,
       text: b,
       createdAt: Date.now()
     };
     try {
       const w = { id: await r.addReply(x), ...x };
-      s.value = "", m.textContent = "Reply", m.disabled = !0, n = [...n, w], p(n), o(w);
+      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), m.disabled = !1, m.textContent = "Reply";
+      console.error("[ui-feedback-plugin] Failed to save reply:", u), h.disabled = !1, h.textContent = "Reply";
     }
-  }), a.appendChild(c), p(n), a.addReply = (h) => {
-    n = [...n, h], p(n);
+  }), a.appendChild(c), p(o), a.addReply = (m) => {
+    o = [...o, m], p(o);
   }, a;
 }
-function ze(e, t, r, o, n, a, p, c) {
+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">
@@ -1105,11 +1105,11 @@ function ze(e, t, r, o, n, a, p, c) {
           <div class="ufp-comment-meta">
             <div class="ufp-avatar">${D(t.authorName)}</div>
             <div>
-              <div class="ufp-comment-author">${z(t.authorName)}</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">${z(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>
@@ -1126,7 +1126,7 @@ function ze(e, t, r, o, n, a, p, c) {
         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
     `, u.addEventListener("click", async () => {
-      u.disabled = !0, u.textContent = "Reopening…", await o.updateComment(t.id, { resolved: !1 }), a(t.id), i.remove(), k({ panelOpen: !0 });
+      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 u = document.createElement("button");
@@ -1135,29 +1135,29 @@ function ze(e, t, r, o, n, a, p, c) {
         style="vertical-align:middle;margin-right:4px"><polyline points="20 6 9 17 4 12"/></svg>
       Mark Resolved
     `, u.addEventListener("click", async () => {
-      u.disabled = !0, u.textContent = "Resolving…", await o.updateComment(t.id, { resolved: !0 }), n(t.id), i.remove(), k({ panelOpen: !0 });
+      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 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 o.deleteComment(t.id), p(t.id), i.remove(), k({ panelOpen: !0 }));
+    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 m = i.querySelector("#ufp-detail-replies"), v = Te(t.id, r, o, (u) => {
+  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);
   });
-  m.appendChild(v);
-  const h = i.querySelector(".ufp-detail-screenshot"), b = i.querySelector(".ufp-detail-annotation-svg"), x = () => {
-    const u = h.clientWidth, w = h.clientHeight;
-    b.setAttribute("viewBox", `0 0 ${u} ${w}`), Ee(b, t.annotation, u, w), b.querySelectorAll("[marker-end]").forEach((C) => {
+  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 ? x() : h.addEventListener("load", x);
+  m.complete && m.naturalWidth > 0 ? x() : m.addEventListener("load", x);
 }
-function Ne(e, t, r) {
-  const o = document.createElement("div");
-  o.className = "ufp-panel", o.innerHTML = `
+function Te(e, t, r) {
+  const n = document.createElement("div");
+  n.className = "ufp-panel", n.innerHTML = `
     <div class="ufp-panel-header">
       <span class="ufp-panel-title">Feedback</span>
       <div style="display:flex;gap:8px;align-items:center;">
@@ -1177,19 +1177,19 @@ function Ne(e, t, r) {
       <button class="ufp-filter-tab" data-filter="resolved">Resolved</button>
     </div>
     <div class="ufp-panel-list" id="ufp-comment-list"></div>
-  `, e.appendChild(o), o.querySelector("#ufp-panel-close").addEventListener("click", () => {
+  `, e.appendChild(n), n.querySelector("#ufp-panel-close").addEventListener("click", () => {
     k({ panelOpen: !1 });
-  }), o.querySelector("#ufp-new-feedback").addEventListener("click", () => {
+  }), n.querySelector("#ufp-new-feedback").addEventListener("click", () => {
     k({ panelOpen: !1 }), r();
-  }), o.querySelectorAll(".ufp-filter-tab").forEach((c) => {
+  }), n.querySelectorAll(".ufp-filter-tab").forEach((c) => {
     c.addEventListener("click", () => {
-      o.querySelectorAll(".ufp-filter-tab").forEach((i) => i.classList.remove("active")), c.classList.add("active"), k({ filter: c.dataset.filter });
+      n.querySelectorAll(".ufp-filter-tab").forEach((i) => i.classList.remove("active")), c.classList.add("active"), k({ filter: c.dataset.filter });
     });
   });
-  const n = o.querySelector("#ufp-comment-list"), a = /* @__PURE__ */ new Map(), p = async (c, i) => {
+  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 (n.innerHTML = "", l.length === 0) {
-      n.innerHTML = `
+    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"/>
@@ -1207,30 +1207,30 @@ function Ne(e, t, r) {
         } catch {
           a.set(s.id, []);
         }
-      n.appendChild(
-        He(s, a, e, t)
+      o.appendChild(
+        Ne(s, a, e, t)
       );
     }
   };
-  return ne(async (c) => {
-    o.classList.toggle("open", c.panelOpen), c.panelOpen && await p(c.comments, c.filter);
-  }), o;
+  return oe(async (c) => {
+    n.classList.toggle("open", c.panelOpen), c.panelOpen && await p(c.comments, c.filter);
+  }), n;
 }
-function He(e, t, r, o, n) {
+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">${D(e.authorName)}</div>
         <div>
-          <div class="ufp-comment-author">${z(e.authorName)}</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">${z(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"}
@@ -1239,7 +1239,7 @@ function He(e, t, r, o, n) {
   `, p.addEventListener("click", async () => {
     let c = t.get(e.id) ?? [];
     try {
-      c = await o.getReplies(e.id), t.set(e.id, c);
+      c = await n.getReplies(e.id), t.set(e.id, c);
     } catch (i) {
       console.error("[ui-feedback-plugin] Failed to fetch replies:", i);
     }
@@ -1247,7 +1247,7 @@ function He(e, t, r, o, n) {
       r,
       e,
       c,
-      o,
+      n,
       (i) => {
         const l = A();
         k({ comments: l.comments.map((s) => s.id === i ? { ...s, resolved: !0 } : s) });
@@ -1270,111 +1270,106 @@ function He(e, t, r, o, n) {
     );
   }), p;
 }
-async function $e() {
+async function He() {
   try {
-    const e = await Be();
-    return await Re(e);
+    const e = await $e();
+    return await Be(e);
   } catch (e) {
-    return console.error("[ui-feedback-plugin] capturePageScreenshot failed:", e), We();
+    return console.error("[ui-feedback-plugin] capturePageScreenshot failed:", e), Re();
   }
 }
-async function Be() {
+async function $e() {
   return (await import("./html2canvas-pro.esm-QETbiPYt.mjs")).default;
 }
-async function Re(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: (n) => n.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 We() {
+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");
 }
-async function Oe(e, t) {
+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;
-    }), o = document.createElement("canvas");
-    o.width = r.naturalWidth, o.height = r.naturalHeight;
-    const n = o.getContext("2d");
-    n.drawImage(r, 0, 0);
-    const a = o.width / t.pageWidth, p = o.height / t.pageHeight, c = Math.min(a, p);
-    n.lineCap = "round", n.lineJoin = "round";
+    }), 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 (n.strokeStyle = i.color, n.fillStyle = i.color, n.beginPath(), i.type) {
+      switch (o.strokeStyle = i.color, o.fillStyle = i.color, o.beginPath(), i.type) {
         case "pen": {
-          n.lineWidth = i.width * c, i.points.forEach((l, s) => s === 0 ? n.moveTo(l.x * a, l.y * p) : n.lineTo(l.x * a, l.y * p)), n.stroke();
+          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": {
-          n.lineWidth = i.strokeWidth * c, n.roundRect(i.x * a, i.y * p, i.width * a, i.height * p, 3 * c), n.stroke();
+          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": {
-          n.lineWidth = i.strokeWidth * c, n.ellipse(i.cx * a, i.cy * p, i.rx * a, i.ry * p, 0, 0, Math.PI * 2), n.stroke();
+          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, m = i.y1 * p, v = i.x2 * a, h = i.y2 * p;
-          n.lineWidth = l, n.lineCap = "butt", n.moveTo(s, m), n.lineTo(v, h), n.stroke(), n.lineCap = "round";
-          const b = Math.hypot(v - s, h - m) || 1, x = (v - s) / b, u = (h - m) / b, w = v + x * l, C = h + u * l, N = w - x * 10 * l, H = C - u * 10 * l;
-          n.beginPath(), n.moveTo(w, C), n.lineTo(N - u * 3.5 * l, H + x * 3.5 * l), n.lineTo(N + u * 3.5 * l, H - x * 3.5 * l), n.closePath(), n.fill();
+          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 o.toDataURL("image/png");
+    return n.toDataURL("image/png");
   } catch (r) {
     return console.error("[ui-feedback-plugin] drawAnnotationsOnScreenshot failed:", r), e;
   }
 }
 const F = "ui-feedback-plugin";
-async function qe(e) {
+async function Oe(e) {
   const { backend: t } = e;
   if (t.provider === "firebase") {
-    const { FirebaseAdapter: r } = await import("./firebase-BGU5KpRU.mjs"), o = new r(t);
-    return { db: o, screenshot: o };
+    const { FirebaseAdapter: r } = await import("./firebase-BGU5KpRU.mjs"), n = new r(t);
+    return { db: n, screenshot: n };
   }
   if (t.provider === "supabase") {
-    const { SupabaseAdapter: r } = await import("./supabase-BUHP2OkK.mjs"), o = new r(t.url, t.anonKey);
-    return { db: o, screenshot: o };
+    const { SupabaseAdapter: r } = await import("./supabase-BUHP2OkK.mjs"), n = new r(t.url, t.anonKey);
+    return { db: n, screenshot: n };
   }
   if (t.provider === "aws") {
-    const { AWSAdapter: r } = await import("./aws-DyQmIBI9.mjs"), o = new r(t);
-    return { db: o, screenshot: o };
+    const { AWSAdapter: r } = await import("./aws-DyQmIBI9.mjs"), n = new r(t);
+    return { db: n, screenshot: n };
   }
   if (t.provider === "local") {
-    const { LocalAdapter: r } = await import("./local-CqZPr-Eb.mjs"), o = new r();
-    return { db: o, screenshot: o };
+    const { LocalAdapter: r } = await import("./local-CqZPr-Eb.mjs"), n = new r();
+    return { db: n, screenshot: n };
   }
   throw new Error("[ui-feedback-plugin] Unknown backend provider");
 }
-function Fe(e) {
+function Pe(e) {
   var p;
   if (customElements.get(F))
     return console.warn("[ui-feedback-plugin] Already initialized."), () => {
     };
-  const t = ((p = e.theme) == null ? void 0 : p.primaryColor) ?? "#6366f1", r = e.projectKey ?? "default", o = e.position ?? "bottom-right";
+  const t = ((p = e.theme) == null ? void 0 : p.primaryColor) ?? "#6366f1", r = e.projectKey ?? "default", n = e.position ?? "bottom-right";
   k({ config: e });
-  class n extends HTMLElement {
+  class o extends HTMLElement {
     constructor() {
       super();
       O(this, "shadow");
@@ -1385,9 +1380,9 @@ function Fe(e) {
     }
     async connectedCallback() {
       const l = document.createElement("style");
-      l.textContent = ye(t), this.shadow.appendChild(l);
+      l.textContent = xe(t), this.shadow.appendChild(l);
       try {
-        const s = await qe(e);
+        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);
@@ -1400,10 +1395,10 @@ function Fe(e) {
       (l = this.unsubscribe) == null || l.call(this);
     }
     mount() {
-      const l = J(window.location.href);
-      Ne(this.shadow, this.db, () => this.startAnnotation()), be(
+      const l = Q(window.location.href);
+      Te(this.shadow, this.db, () => this.startAnnotation()), ve(
         this.shadow,
-        o,
+        n,
         () => this.startAnnotation(),
         () => k({ panelOpen: !A().panelOpen })
       ), this.unsubscribe = this.db.subscribeToComments(l, r, (s) => {
@@ -1411,11 +1406,11 @@ function Fe(e) {
       });
     }
     async startAnnotation() {
-      let l = oe();
-      if (!l && (l = await ke(this.shadow), !l))
+      let l = re();
+      if (!l && (l = await we(this.shadow), !l))
         return;
       k({ active: !0, panelOpen: !1 });
-      const s = await Me(this.shadow);
+      const s = await Le(this.shadow);
       if (!s) {
         k({ active: !1 });
         return;
@@ -1423,57 +1418,58 @@ function Fe(e) {
       k({ active: !1 }), this.showToast("Saving comment…", "info");
       try {
         await this.saveComment(l, s.text, s.shapes), this.showToast("Comment saved!", "success");
-      } catch (m) {
-        console.error("[ui-feedback-plugin] Failed to save comment:", m), this.showToast("Failed to save — check the browser console for details.", "error");
+      } 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;
       }
       k({ panelOpen: !0 });
     }
-    async saveComment(l, s, m) {
-      const v = J(window.location.href), h = {
-        shapes: m,
-        pageWidth: document.documentElement.scrollWidth,
-        pageHeight: document.documentElement.scrollHeight
+    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 b;
       try {
-        b = await $e();
+        b = await He();
       } finally {
         this.style.visibility = "";
       }
-      b = await Oe(b, h);
+      b = await We(b, m);
       const x = {
         pageUrl: v,
         projectKey: r,
         authorName: l,
         text: s,
         screenshotUrl: "",
-        annotation: h,
+        annotation: m,
         resolved: !1,
         createdAt: Date.now()
       }, u = await this.db.addComment(x), w = await this.screenshot.uploadScreenshot(u, b);
       await this.db.updateComment(u, { screenshotUrl: w });
     }
     showToast(l, s) {
-      const m = this.shadow.querySelector(".ufp-toast");
-      m == null || m.remove();
-      const v = { info: "#6366f1", success: "#10b981", error: "#ef4444" }, h = document.createElement("div");
-      h.className = "ufp-toast", h.style.cssText = `
+      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:${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 = l, this.shadow.appendChild(h), setTimeout(() => h.remove(), s === "error" ? 6e3 : 2500);
+      `, m.textContent = l, this.shadow.appendChild(m), setTimeout(() => m.remove(), s === "error" ? 6e3 : 2500);
     }
   }
-  customElements.define(F, n);
+  customElements.define(F, o);
   const a = document.createElement(F);
   return document.body.appendChild(a), () => a.remove();
 }
 export {
-  Fe as initFeedbackPlugin
+  Pe as initFeedbackPlugin
 };
 //# sourceMappingURL=ui-feedback-plugin.es.js.map