@mindbowser_inc/ui-feedback-plugin 0.1.0 → 0.2.0

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

@@ -1,6 +1,6 @@
 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);
+var J = (e, t, o) => t in e ? K(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
+var H = (e, t, o) => J(e, typeof t != "symbol" ? t + "" : t, o);
 const O = /* @__PURE__ */ new Set();
 let T = {
   active: !1,
@@ -15,7 +15,7 @@ let T = {
 function L() {
   return T;
 }
-function b(e) {
+function y(e) {
   T = { ...T, ...e }, O.forEach((t) => t(T));
 }
 function P(e) {
@@ -24,12 +24,12 @@ function P(e) {
 function X() {
   if (T.userName) return T.userName;
   const e = localStorage.getItem("ufp_user_name");
-  return e ? (b({ userName: e }), e) : null;
+  return e ? (y({ userName: e }), e) : null;
 }
 function Y(e) {
-  localStorage.setItem("ufp_user_name", e), b({ userName: e });
+  localStorage.setItem("ufp_user_name", e), y({ userName: e });
 }
-function U(e) {
+function I(e) {
   try {
     const t = new URL(e);
     return t.origin + t.pathname;
@@ -597,10 +597,10 @@ const Z = {
   "bottom-left": { bottom: "24px", left: "24px" },
   "top-right": { top: "24px", right: "24px" },
   "top-left": { top: "24px", left: "24px" }
-}, $ = "#6366f1", I = "#4f46e5", j = "#4338ca";
-function ee(e, t, r, n) {
-  const o = document.createElement("div");
-  Object.assign(o.style, {
+}, $ = "#6366f1", U = "#4f46e5", j = "#4338ca";
+function ee(e, t, o, n) {
+  const r = document.createElement("div");
+  Object.assign(r.style, {
     position: "fixed",
     zIndex: "2147483647",
     display: "flex",
@@ -627,18 +627,18 @@ function ee(e, t, r, n) {
       <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");
+  `, r.appendChild(a), r.appendChild(d), r.appendChild(l), e.appendChild(r);
+  const p = r.querySelector("#ufp-annotate-label"), s = r.querySelector("#ufp-panel-count");
   return a.addEventListener("click", (i) => {
-    if (i.stopPropagation(), o._dragged) return;
+    if (i.stopPropagation(), r._dragged) return;
     const u = L();
-    u.active || (u.panelOpen ? (n(), setTimeout(r, 220)) : r());
+    u.active || (u.panelOpen ? (n(), setTimeout(o, 220)) : o());
   }), l.addEventListener("click", (i) => {
-    i.stopPropagation(), !o._dragged && (L().active || n());
-  }), _(a, () => (L().panelOpen, $), I), _(l, () => L().panelOpen ? j : $, I), P((i) => {
+    i.stopPropagation(), !r._dragged && (L().active || n());
+  }), _(a, () => (L().panelOpen, $), U), _(l, () => L().panelOpen ? j : $, U), P((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;
+  }), te(r), r;
 }
 function D(e) {
   Object.assign(e.style, {
@@ -654,23 +654,23 @@ function D(e) {
     transition: "background 0.12s"
   });
 }
-function _(e, t, r) {
+function _(e, t, o) {
   e.addEventListener("mouseenter", () => {
-    e.style.background = r;
+    e.style.background = o;
   }), e.addEventListener("mouseleave", () => {
     e.style.background = t();
   });
 }
 function te(e) {
-  let t = 0, r = 0, n = 0, o = 0;
+  let t = 0, o = 0, n = 0, r = 0;
   e.addEventListener("pointerdown", (a) => {
     if (a.button !== 0) return;
-    t = a.clientX, r = a.clientY;
+    t = a.clientX, o = a.clientY;
     const d = e.getBoundingClientRect();
-    n = d.left, o = d.top, e._dragged = !1;
+    n = d.left, r = 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");
+      const i = s.clientX - t, u = s.clientY - o;
+      !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, r + u))}px`, e.style.right = "auto", e.style.bottom = "auto");
     }, p = () => {
       document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", p), requestAnimationFrame(() => {
         e._dragged = !1;
@@ -681,8 +681,8 @@ function te(e) {
 }
 function ne(e) {
   return new Promise((t) => {
-    const r = document.createElement("div");
-    r.className = "ufp-modal-backdrop", r.innerHTML = `
+    const o = document.createElement("div");
+    o.className = "ufp-modal-backdrop", o.innerHTML = `
       <div class="ufp-modal" role="dialog" aria-modal="true" aria-labelledby="ufp-modal-title">
         <h2 id="ufp-modal-title">Welcome to Feedback Mode</h2>
         <p>Enter your name so others can see who left the comment.</p>
@@ -698,43 +698,43 @@ function ne(e) {
           <button class="ufp-btn ufp-btn-primary" id="ufp-name-submit" disabled>Continue</button>
         </div>
       </div>
-    `, e.appendChild(r);
-    const n = r.querySelector("#ufp-name-input"), o = r.querySelector("#ufp-name-submit");
+    `, e.appendChild(o);
+    const n = o.querySelector("#ufp-name-input"), r = o.querySelector("#ufp-name-submit");
     n.addEventListener("input", () => {
-      o.disabled = n.value.trim().length === 0;
+      r.disabled = n.value.trim().length === 0;
     });
     const a = () => {
       const d = n.value.trim();
-      d && (Y(d), r.remove(), t(d));
+      d && (Y(d), o.remove(), t(d));
     };
-    o.addEventListener("click", a), n.addEventListener("keydown", (d) => {
+    r.addEventListener("click", a), n.addEventListener("keydown", (d) => {
       d.key === "Enter" && a();
     }), requestAnimationFrame(() => n.focus());
   });
 }
 const C = "#6366f1", M = 3;
-function z(e, t = 1, r = 1) {
+function z(e, t = 1, o = 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", oe(e.points, t, o)), n.setAttribute("stroke", e.color), n.setAttribute("stroke-width", String(e.width * Math.min(t, o))), 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");
-      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;
+      return n.setAttribute("x", String(e.x * t)), n.setAttribute("y", String(e.y * o)), n.setAttribute("width", String(e.width * t)), n.setAttribute("height", String(e.height * o)), n.setAttribute("stroke", e.color), n.setAttribute("stroke-width", String(e.strokeWidth * Math.min(t, o))), n.setAttribute("fill", "none"), n.setAttribute("rx", "3"), n;
     }
     case "circle": {
       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;
+      return n.setAttribute("cx", String(e.cx * t)), n.setAttribute("cy", String(e.cy * o)), n.setAttribute("rx", String(e.rx * t)), n.setAttribute("ry", String(e.ry * o)), n.setAttribute("stroke", e.color), n.setAttribute("stroke-width", String(e.strokeWidth * Math.min(t, o))), n.setAttribute("fill", "none"), n;
     }
     case "arrow": {
-      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;
+      const n = document.createElementNS("http://www.w3.org/2000/svg", "g"), r = document.createElementNS("http://www.w3.org/2000/svg", "line");
+      return r.setAttribute("x1", String(e.x1 * t)), r.setAttribute("y1", String(e.y1 * o)), r.setAttribute("x2", String(e.x2 * t)), r.setAttribute("y2", String(e.y2 * o)), r.setAttribute("stroke", e.color), r.setAttribute("stroke-width", String(e.width * Math.min(t, o))), r.setAttribute("marker-end", "url(#ufp-arrowhead)"), n.appendChild(r), n;
     }
   }
 }
-function re(e, t, r, n) {
-  const o = r / t.pageWidth, a = n / t.pageHeight;
+function re(e, t, o, n) {
+  const r = o / t.pageWidth, a = n / t.pageHeight;
   e.innerHTML = "";
   const d = document.createElementNS("http://www.w3.org/2000/svg", "defs");
   d.innerHTML = `
@@ -742,25 +742,25 @@ function re(e, t, r, n) {
       <polygon points="0 0, 10 3.5, 0 7" fill="${C}" />
     </marker>
   `, e.appendChild(d), t.shapes.forEach((l) => {
-    e.appendChild(z(l, o, a));
+    e.appendChild(z(l, r, a));
   });
 }
-function oe(e, t, r) {
+function oe(e, t, o) {
   if (e.length === 0) return "";
   if (e.length === 1) {
-    const o = e[0];
-    return `M ${o.x * t} ${o.y * r}`;
+    const r = e[0];
+    return `M ${r.x * t} ${r.y * 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}`;
+  let n = `M ${e[0].x * t} ${e[0].y * o}`;
+  for (let r = 1; r < e.length; r++)
+    n += ` L ${e[r].x * t} ${e[r].y * o}`;
   return n;
 }
 function ie(e) {
   return new Promise((t) => {
-    let r = "pen";
+    let o = "pen";
     const n = [];
-    let o = !1, a = 0, d = 0, l = [], p = null, s = null;
+    let r = !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);";
     const u = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -772,7 +772,7 @@ function ie(e) {
       </defs>
     `, i.appendChild(u);
     function w() {
-      i.remove(), v.remove(), s == null || s.remove();
+      i.remove(), b.remove(), s == null || s.remove();
     }
     function h() {
       const m = u.querySelector("defs");
@@ -782,8 +782,8 @@ function ie(e) {
       let m = 0, x = 0, g = 0;
       return n.forEach((c) => {
         if (c.type === "pen" && c.points.length) {
-          const y = c.points[c.points.length - 1];
-          m += y.x, x += y.y, g++;
+          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++);
       }), {
         anchorX: g > 0 ? m / g - window.scrollX : window.innerWidth / 2,
@@ -791,14 +791,14 @@ function ie(e) {
       };
     }
     function E() {
-      i.style.pointerEvents = "none", v.style.pointerEvents = "none", f();
+      i.style.pointerEvents = "none", b.style.pointerEvents = "none", f();
     }
     function f() {
       s && s.remove();
       const { anchorX: m, anchorY: x } = k(), g = 300, c = 12;
-      let y = m + c, S = x + c;
-      y + g > window.innerWidth - c && (y = m - g - c), y < c && (y = 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:${y}px;top:${S}px;z-index:2147483647;
+      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;
         box-shadow:0 4px 24px rgba(0,0,0,0.18);
         display:flex;flex-direction:column;gap:10px;
@@ -833,54 +833,54 @@ function ie(e) {
         w(), t(null);
       }), requestAnimationFrame(() => B.focus());
     }
-    const v = ae(
+    const b = ae(
       e,
       (m) => {
-        r = m;
+        o = m;
       },
       () => {
         w(), t(null);
       },
       () => {
-        n.length !== 0 && (s && (s.remove(), s = null, i.style.pointerEvents = "auto", v.style.pointerEvents = "auto"), n.pop(), h());
+        n.length !== 0 && (s && (s.remove(), s = null, i.style.pointerEvents = "auto", b.style.pointerEvents = "auto"), n.pop(), h());
       }
     );
     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 }]));
+      m.button === 0 && (i.setPointerCapture(m.pointerId), r = !0, a = m.clientX + window.scrollX, d = m.clientY + window.scrollY, o === "pen" && (l = [{ x: a, y: d }]));
     }), i.addEventListener("pointermove", (m) => {
-      if (!o) return;
+      if (!r) return;
       const x = m.clientX + window.scrollX, g = m.clientY + window.scrollY;
-      if (p && p.remove(), r === "pen")
+      if (p && p.remove(), o === "pen")
         l.push({ x, y: g }), p = z({ type: "pen", points: [...l], color: C, width: M });
-      else if (r === "rect") {
+      else if (o === "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);
-      } else if (r === "circle") {
-        const c = Math.abs(x - a) / 2, y = Math.abs(g - d) / 2, S = { type: "circle", cx: Math.min(a, x) + c, cy: Math.min(d, g) + y, rx: c, ry: y, color: C, strokeWidth: M };
+      } else if (o === "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 }));
+      } else o === "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) => {
-      if (!o) return;
-      o = !1, p && (p.remove(), p = null);
+      if (!r) return;
+      r = !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)
+      if (o === "pen" && l.length > 1)
         n.push({ type: "pen", points: [...l], color: C, width: M }), l = [], c = !0;
-      else if (r === "rect") {
-        const y = Math.abs(x - a), S = Math.abs(g - d);
-        y > 4 && S > 4 && (n.push({ type: "rect", x: Math.min(a, x), y: Math.min(d, g), width: y, height: S, color: C, strokeWidth: M }), c = !0);
-      } else if (r === "circle") {
-        const y = Math.abs(x - a) / 2, S = Math.abs(g - d) / 2;
-        y > 4 && S > 4 && (n.push({ type: "circle", cx: Math.min(a, x) + y, cy: Math.min(d, g) + S, rx: y, 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);
+      else if (o === "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);
+      } else if (o === "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 o === "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());
     });
   });
 }
-function ae(e, t, r, n) {
-  const o = document.createElement("div");
-  return o.className = "ufp-toolbar", o.innerHTML = `
+function ae(e, t, o, n) {
+  const r = document.createElement("div");
+  return r.className = "ufp-toolbar", r.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">
@@ -907,20 +907,20 @@ function ae(e, t, r, n) {
     </button>
     <div class="ufp-toolbar-sep"></div>
     <button class="ufp-btn ufp-btn-ghost" id="ufp-cancel-btn">Cancel</button>
-  `, o.querySelectorAll("[data-tool]").forEach((a) => {
+  `, r.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);
+      r.querySelectorAll("[data-tool]").forEach((d) => d.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;
+  }), r.querySelector("#ufp-undo-btn").addEventListener("click", n), r.querySelector("#ufp-cancel-btn").addEventListener("click", o), e.appendChild(r), r;
 }
 function W(e) {
-  const t = Date.now() - e, r = Math.floor(t / 1e3);
-  if (r < 60) return "just now";
-  const n = Math.floor(r / 60);
+  const t = Date.now() - e, o = Math.floor(t / 1e3);
+  if (o < 60) return "just now";
+  const n = Math.floor(o / 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);
+  const r = Math.floor(n / 60);
+  if (r < 24) return `${r}h ago`;
+  const a = Math.floor(r / 24);
   return a < 7 ? `${a}d ago` : new Date(e).toLocaleDateString();
 }
 function F(e) {
@@ -929,8 +929,8 @@ function F(e) {
 function A(e) {
   return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-function se(e, t, r, n) {
-  let o = [...t];
+function se(e, t, o, n) {
+  let r = [...t];
   const a = document.createElement("div");
   a.className = "ufp-replies";
   const d = (h) => {
@@ -939,15 +939,15 @@ function se(e, t, r, n) {
     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((v) => {
+      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 = `
           <div class="ufp-reply-meta">
-            <div class="ufp-avatar" style="width:22px;height:22px;font-size:10px;">${F(v.authorName)}</div>
-            <span class="ufp-reply-author">${A(v.authorName)}</span>
-            <span class="ufp-reply-time">${W(v.createdAt)}</span>
+            <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>
-          <div class="ufp-reply-text">${A(v.text)}</div>
+          <div class="ufp-reply-text">${A(b.text)}</div>
         `, E.appendChild(m);
       });
     }
@@ -992,16 +992,16 @@ function se(e, t, r, n) {
       createdAt: Date.now()
     };
     try {
-      const v = { id: await r.addReply(E), ...E };
-      i.value = "", u.textContent = "Reply", u.disabled = !0, o = [...o, v], d(o), n(v);
+      const b = { id: await o.addReply(E), ...E };
+      i.value = "", u.textContent = "Reply", u.disabled = !0, r = [...r, b], d(r), n(b);
     } catch (f) {
       console.error("[ui-feedback-plugin] Failed to save reply:", f), u.disabled = !1, u.textContent = "Reply";
     }
-  }), a.appendChild(l), d(o), a.addReply = (h) => {
-    o = [...o, h], d(o);
+  }), a.appendChild(l), d(r), a.addReply = (h) => {
+    r = [...r, h], d(r);
   }, a;
 }
-function le(e, t, r, n, o, a, d, l) {
+function le(e, t, o, n, r, a, d, l) {
   const p = document.createElement("div");
   p.className = "ufp-detail", p.innerHTML = `
     <div class="ufp-detail-image-area">
@@ -1047,7 +1047,7 @@ function le(e, t, r, n, o, a, d, l) {
       </div>
     </div>
   `, e.appendChild(p), p.querySelector("#ufp-detail-back").addEventListener("click", () => {
-    p.remove(), b({ panelOpen: !0 });
+    p.remove(), y({ panelOpen: !0 });
   });
   const s = p.querySelector("#ufp-detail-actions");
   if (t.resolved) {
@@ -1057,7 +1057,7 @@ function le(e, t, r, n, o, a, d, l) {
         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(), b({ panelOpen: !0 });
+      f.disabled = !0, f.textContent = "Reopening…", await n.updateComment(t.id, { resolved: !1 }), a(t.id), p.remove(), y({ panelOpen: !0 });
     }), s.appendChild(f);
   } else {
     const f = document.createElement("button");
@@ -1066,27 +1066,27 @@ function le(e, t, r, n, o, a, d, l) {
         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(), b({ panelOpen: !0 });
+      f.disabled = !0, f.textContent = "Resolving…", await n.updateComment(t.id, { resolved: !0 }), r(t.id), p.remove(), y({ panelOpen: !0 });
     }), s.appendChild(f);
   }
   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(), b({ panelOpen: !0 }));
+    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 v;
-    (v = w.addReply) == null || v.call(w, f), l == null || l(f);
+  const u = p.querySelector("#ufp-detail-replies"), w = se(t.id, o, n, (f) => {
+    var b;
+    (b = w.addReply) == null || b.call(w, f), l == null || l(f);
   });
   u.appendChild(w);
   const h = p.querySelector(".ufp-detail-screenshot"), k = p.querySelector(".ufp-detail-annotation-svg"), E = () => {
-    const f = h.clientWidth, v = h.clientHeight;
-    k.setAttribute("viewBox", `0 0 ${f} ${v}`), re(k, t.annotation, f, v), k.querySelectorAll("[marker-end]").forEach((m) => {
+    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.complete && h.naturalWidth > 0 ? E() : h.addEventListener("load", E);
 }
-function pe(e, t, r) {
+function pe(e, t, o) {
   const n = document.createElement("div");
   n.className = "ufp-panel", n.innerHTML = `
     <div class="ufp-panel-header">
@@ -1109,18 +1109,18 @@ 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", () => {
-    b({ panelOpen: !1 });
+    y({ panelOpen: !1 });
   }), n.querySelector("#ufp-new-feedback").addEventListener("click", () => {
-    b({ panelOpen: !1 }), r();
+    y({ panelOpen: !1 }), o();
   }), 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"), b({ filter: l.dataset.filter });
+      n.querySelectorAll(".ufp-filter-tab").forEach((p) => p.classList.remove("active")), l.classList.add("active"), y({ filter: l.dataset.filter });
     });
   });
-  const o = n.querySelector("#ufp-comment-list"), a = /* @__PURE__ */ new Map(), d = async (l, p) => {
+  const r = 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) {
-      o.innerHTML = `
+    if (r.innerHTML = "", s.length === 0) {
+      r.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"/>
@@ -1138,7 +1138,7 @@ function pe(e, t, r) {
         } catch {
           a.set(i.id, []);
         }
-      o.appendChild(
+      r.appendChild(
         de(i, a, e, t)
       );
     }
@@ -1147,7 +1147,7 @@ function pe(e, t, r) {
     n.classList.toggle("open", l.panelOpen), l.panelOpen && await d(l.comments, l.filter);
   }), n;
 }
-function de(e, t, r, n, o) {
+function de(e, t, o, n, r) {
   const a = t.get(e.id) ?? [], d = document.createElement("div");
   return d.className = "ufp-comment-card", d.dataset.id = e.id, d.innerHTML = `
     <div class="ufp-comment-card-header">
@@ -1175,28 +1175,28 @@ function de(e, t, r, n, o) {
       console.error("[ui-feedback-plugin] Failed to fetch replies:", p);
     }
     le(
-      r,
+      o,
       e,
       l,
       n,
       (p) => {
         const s = L();
-        b({ comments: s.comments.map((i) => i.id === p ? { ...i, resolved: !0 } : i) });
+        y({ comments: s.comments.map((i) => i.id === p ? { ...i, resolved: !0 } : i) });
       },
       (p) => {
         const s = L();
-        b({ comments: s.comments.map((i) => i.id === p ? { ...i, resolved: !1 } : i) });
+        y({ comments: s.comments.map((i) => i.id === p ? { ...i, resolved: !1 } : i) });
       },
       (p) => {
         const s = L();
-        b({ comments: s.comments.filter((i) => i.id !== p) }), t.delete(p);
+        y({ comments: s.comments.filter((i) => i.id !== p) }), t.delete(p);
       },
       // 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();
-        b({ comments: [...i.comments] });
+        y({ comments: [...i.comments] });
       }
     );
   }), d;
@@ -1213,7 +1213,7 @@ async function ue() {
   return (await import("./html2canvas.esm-d2sM-0Wm.mjs")).default;
 }
 async function fe(e) {
-  const t = window.scrollX, r = window.scrollY;
+  const t = window.scrollX, o = window.scrollY;
   window.scrollTo(0, 0);
   try {
     return (await e(document.body, {
@@ -1227,10 +1227,10 @@ async function fe(e) {
       windowHeight: document.documentElement.scrollHeight,
       x: 0,
       y: 0,
-      ignoreElements: (o) => o.tagName === "UI-FEEDBACK-PLUGIN"
+      ignoreElements: (r) => r.tagName === "UI-FEEDBACK-PLUGIN"
     })).toDataURL("image/png");
   } finally {
-    window.scrollTo(t, r);
+    window.scrollTo(t, o);
   }
 }
 function me() {
@@ -1241,50 +1241,34 @@ function me() {
 }
 const q = "ui-feedback-plugin";
 async function he(e) {
-  const t = e.database;
+  const { backend: t } = e;
   if (t.provider === "firebase") {
-    const { FirebaseAdapter: r } = await import("./firebase-BGU5KpRU.mjs");
-    return new r(t);
+    const { FirebaseAdapter: o } = await import("./firebase-BGU5KpRU.mjs"), n = new o(t);
+    return { db: n, screenshot: n };
   }
   if (t.provider === "supabase") {
-    const { SupabaseAdapter: r } = await import("./supabase-BUHP2OkK.mjs");
-    return new r(t.url, t.anonKey);
+    const { SupabaseAdapter: o } = await import("./supabase-BUHP2OkK.mjs"), n = new o(t.url, t.anonKey);
+    return { db: n, screenshot: n };
   }
-  throw new Error("[ui-feedback-plugin] Unknown database provider");
-}
-async function ge(e, t) {
-  const r = e.screenshots;
-  if (!r)
-    return t;
-  if (r.provider === "s3") {
-    const { S3ScreenshotAdapter: n } = await import("./s3-DkzKoz0A.mjs");
-    return new n(r.uploadEndpoint, r.headers);
-  }
-  if (r.provider === "firebase") {
-    if (e.database.provider !== "firebase")
-      throw new Error('[ui-feedback-plugin] screenshots.provider "firebase" requires database.provider "firebase"');
-    return t;
-  }
-  if (r.provider === "supabase") {
-    if (e.database.provider !== "supabase")
-      throw new Error('[ui-feedback-plugin] screenshots.provider "supabase" requires database.provider "supabase"');
-    return t;
+  if (t.provider === "s3") {
+    const { S3Adapter: o } = await import("./s3-4V57aJiZ.mjs"), n = new o(t.apiUrl, t.headers, t.pollInterval);
+    return { db: n, screenshot: n };
   }
-  throw new Error("[ui-feedback-plugin] Unknown screenshot storage provider");
+  throw new Error("[ui-feedback-plugin] Unknown backend provider");
 }
-function be(e) {
+function xe(e) {
   var d;
   if (customElements.get(q))
     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";
-  b({ config: e });
-  class o extends HTMLElement {
+  const t = ((d = e.theme) == null ? void 0 : d.primaryColor) ?? "#6366f1", o = e.projectKey ?? "default", n = e.position ?? "bottom-right";
+  y({ config: e });
+  class r extends HTMLElement {
     constructor() {
       super();
       H(this, "shadow");
-      H(this, "dbAdapter");
-      H(this, "screenshotAdapter");
+      H(this, "db");
+      H(this, "screenshot");
       H(this, "unsubscribe", null);
       this.shadow = this.attachShadow({ mode: "open" });
     }
@@ -1292,9 +1276,10 @@ function be(e) {
       const s = document.createElement("style");
       s.textContent = Q(t), this.shadow.appendChild(s);
       try {
-        this.dbAdapter = await he(e), this.screenshotAdapter = await ge(e, this.dbAdapter);
+        const i = await he(e);
+        this.db = i.db, this.screenshot = i.screenshot;
       } catch (i) {
-        console.error("[ui-feedback-plugin] Failed to initialize adapters:", i);
+        console.error("[ui-feedback-plugin] Failed to initialise backend:", i);
         return;
       }
       this.mount();
@@ -1304,37 +1289,37 @@ function be(e) {
       (s = this.unsubscribe) == null || s.call(this);
     }
     mount() {
-      const s = U(window.location.href);
-      pe(this.shadow, this.dbAdapter, () => this.startAnnotation()), ee(
+      const s = I(window.location.href);
+      pe(this.shadow, this.db, () => this.startAnnotation()), ee(
         this.shadow,
         n,
         () => this.startAnnotation(),
-        () => b({ panelOpen: !L().panelOpen })
-      ), this.unsubscribe = this.dbAdapter.subscribeToComments(s, r, (i) => {
-        b({ comments: i });
+        () => y({ panelOpen: !L().panelOpen })
+      ), this.unsubscribe = this.db.subscribeToComments(s, o, (i) => {
+        y({ comments: i });
       });
     }
     async startAnnotation() {
       let s = X();
       if (!s && (s = await ne(this.shadow), !s))
         return;
-      b({ active: !0, panelOpen: !1 });
+      y({ active: !0, panelOpen: !1 });
       const i = await ie(this.shadow);
       if (!i) {
-        b({ active: !1 });
+        y({ active: !1 });
         return;
       }
-      b({ active: !1 }), this.showToast("Saving comment…", "info");
+      y({ 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");
         return;
       }
-      b({ panelOpen: !0 });
+      y({ panelOpen: !0 });
     }
     async saveComment(s, i, u) {
-      const w = U(window.location.href), h = {
+      const w = I(window.location.href), h = {
         shapes: u,
         pageWidth: document.documentElement.scrollWidth,
         pageHeight: document.documentElement.scrollHeight
@@ -1348,15 +1333,15 @@ function be(e) {
       }
       const E = {
         pageUrl: w,
-        projectKey: r,
+        projectKey: o,
         authorName: s,
         text: i,
         screenshotUrl: "",
         annotation: h,
         resolved: !1,
         createdAt: Date.now()
-      }, f = await this.dbAdapter.addComment(E), v = await this.screenshotAdapter.uploadScreenshot(f, k);
-      await this.dbAdapter.updateComment(f, { screenshotUrl: v });
+      }, 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");
@@ -1372,11 +1357,11 @@ function be(e) {
       `, h.textContent = s, this.shadow.appendChild(h), setTimeout(() => h.remove(), i === "error" ? 6e3 : 2500);
     }
   }
-  customElements.define(q, o);
+  customElements.define(q, r);
   const a = document.createElement(q);
   return document.body.appendChild(a), () => a.remove();
 }
 export {
-  be as initFeedbackPlugin
+  xe as initFeedbackPlugin
 };
 //# sourceMappingURL=ui-feedback-plugin.es.js.map