@mindbowser_inc/ui-feedback-plugin 0.3.0 → 0.3.2

package/dist/index.d.ts

@@ -23,7 +23,7 @@ declare interface AWSProviderConfig {
     pollInterval?: number;
 }
 
-declare type BackendConfig = FirebaseProviderConfig | SupabaseProviderConfig | AWSProviderConfig;
+declare type BackendConfig = FirebaseProviderConfig | SupabaseProviderConfig | AWSProviderConfig | LocalProviderConfig;
 
 /**
  * Firebase backend — Firestore for comments/replies, Firebase Storage for screenshots.
@@ -42,12 +42,17 @@ declare interface FirebaseProviderConfig {
 
 export declare function initFeedbackPlugin(config: PluginConfig): () => void;
 
+declare interface LocalProviderConfig {
+    provider: 'local';
+}
+
 export declare interface PluginConfig {
     /**
      * Storage backend. Pick one:
      * - `firebase`  — Firestore + Firebase Storage
      * - `supabase`  — Postgres + Supabase Storage
      * - `aws`       — Everything in AWS S3 via Cognito Identity Pool (no backend needed)
+     * - `local`     — In-memory / sessionStorage local storage
      */
     backend: BackendConfig;
     /** Namespace comments by project (default: 'default'). */

package/dist/local-CqZPr-Eb.mjs

@@ -0,0 +1,66 @@
+var a = Object.defineProperty;
+var g = (n, e, t) => e in n ? a(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var i = (n, e, t) => g(n, typeof e != "symbol" ? e + "" : e, t);
+class l {
+  constructor() {
+    i(this, "listeners", /* @__PURE__ */ new Set());
+  }
+  getCommentsFromStorage() {
+    const e = sessionStorage.getItem("ufp_comments");
+    return e ? JSON.parse(e) : [];
+  }
+  saveCommentsToStorage(e) {
+    sessionStorage.setItem("ufp_comments", JSON.stringify(e)), this.notifyListeners();
+  }
+  getRepliesFromStorage() {
+    const e = sessionStorage.getItem("ufp_replies");
+    return e ? JSON.parse(e) : [];
+  }
+  saveRepliesToStorage(e) {
+    sessionStorage.setItem("ufp_replies", JSON.stringify(e));
+  }
+  notifyListeners() {
+    const e = this.getCommentsFromStorage();
+    for (const t of this.listeners)
+      t(e);
+  }
+  async addComment(e) {
+    const t = this.getCommentsFromStorage(), s = Math.random().toString(36).substring(2, 9), o = { ...e, id: s };
+    return t.push(o), this.saveCommentsToStorage(t), s;
+  }
+  async getComments(e, t) {
+    return this.getCommentsFromStorage().filter((o) => o.pageUrl === e && o.projectKey === t);
+  }
+  async updateComment(e, t) {
+    const s = this.getCommentsFromStorage(), o = s.findIndex((m) => m.id === e);
+    o !== -1 && (s[o] = { ...s[o], ...t }, this.saveCommentsToStorage(s));
+  }
+  async deleteComment(e) {
+    const s = this.getCommentsFromStorage().filter((r) => r.id !== e);
+    this.saveCommentsToStorage(s);
+    const m = this.getRepliesFromStorage().filter((r) => r.commentId !== e);
+    this.saveRepliesToStorage(m);
+  }
+  async addReply(e) {
+    const t = this.getRepliesFromStorage(), s = Math.random().toString(36).substring(2, 9), o = { ...e, id: s };
+    return t.push(o), this.saveRepliesToStorage(t), s;
+  }
+  async getReplies(e) {
+    return this.getRepliesFromStorage().filter((s) => s.commentId === e);
+  }
+  subscribeToComments(e, t, s) {
+    const o = (m) => {
+      s(m.filter((r) => r.pageUrl === e && r.projectKey === t));
+    };
+    return this.listeners.add(o), o(this.getCommentsFromStorage()), () => {
+      this.listeners.delete(o);
+    };
+  }
+  async uploadScreenshot(e, t) {
+    return t;
+  }
+}
+export {
+  l as LocalAdapter
+};
+//# sourceMappingURL=local-CqZPr-Eb.mjs.map

package/dist/local-CqZPr-Eb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"local-CqZPr-Eb.mjs","sources":["../src/adapters/local.ts"],"sourcesContent":["import type {\n  FeedbackComment,\n  Reply,\n  DatabaseAdapter,\n  ScreenshotAdapter,\n} from '../core/types'\n\nexport class LocalAdapter implements DatabaseAdapter, ScreenshotAdapter {\n  private listeners: Set<(comments: FeedbackComment[]) => void> = new Set()\n\n  private getCommentsFromStorage(): FeedbackComment[] {\n    const data = sessionStorage.getItem('ufp_comments')\n    return data ? JSON.parse(data) : []\n  }\n\n  private saveCommentsToStorage(comments: FeedbackComment[]) {\n    sessionStorage.setItem('ufp_comments', JSON.stringify(comments))\n    this.notifyListeners()\n  }\n\n  private getRepliesFromStorage(): Reply[] {\n    const data = sessionStorage.getItem('ufp_replies')\n    return data ? JSON.parse(data) : []\n  }\n\n  private saveRepliesToStorage(replies: Reply[]) {\n    sessionStorage.setItem('ufp_replies', JSON.stringify(replies))\n  }\n\n  private notifyListeners() {\n    const comments = this.getCommentsFromStorage()\n    for (const listener of this.listeners) {\n      listener(comments)\n    }\n  }\n\n  async addComment(comment: Omit<FeedbackComment, 'id'>): Promise<string> {\n    const comments = this.getCommentsFromStorage()\n    const id = Math.random().toString(36).substring(2, 9)\n    const newComment: FeedbackComment = { ...comment, id }\n    comments.push(newComment)\n    this.saveCommentsToStorage(comments)\n    return id\n  }\n\n  async getComments(pageUrl: string, projectKey: string): Promise<FeedbackComment[]> {\n    const comments = this.getCommentsFromStorage()\n    return comments.filter(c => c.pageUrl === pageUrl && c.projectKey === projectKey)\n  }\n\n  async updateComment(id: string, data: Partial<FeedbackComment>): Promise<void> {\n    const comments = this.getCommentsFromStorage()\n    const index = comments.findIndex(c => c.id === id)\n    if (index !== -1) {\n      comments[index] = { ...comments[index], ...data }\n      this.saveCommentsToStorage(comments)\n    }\n  }\n\n  async deleteComment(id: string): Promise<void> {\n    const comments = this.getCommentsFromStorage()\n    const filtered = comments.filter(c => c.id !== id)\n    this.saveCommentsToStorage(filtered)\n\n    const replies = this.getRepliesFromStorage()\n    const filteredReplies = replies.filter(r => r.commentId !== id)\n    this.saveRepliesToStorage(filteredReplies)\n  }\n\n  async addReply(reply: Omit<Reply, 'id'>): Promise<string> {\n    const replies = this.getRepliesFromStorage()\n    const id = Math.random().toString(36).substring(2, 9)\n    const newReply: Reply = { ...reply, id }\n    replies.push(newReply)\n    this.saveRepliesToStorage(replies)\n    return id\n  }\n\n  async getReplies(commentId: string): Promise<Reply[]> {\n    const replies = this.getRepliesFromStorage()\n    return replies.filter(r => r.commentId === commentId)\n  }\n\n  subscribeToComments(\n    pageUrl: string,\n    projectKey: string,\n    callback: (comments: FeedbackComment[]) => void\n  ): () => void {\n    const wrapper = (comments: FeedbackComment[]) => {\n      callback(comments.filter(c => c.pageUrl === pageUrl && c.projectKey === projectKey))\n    }\n    this.listeners.add(wrapper)\n    wrapper(this.getCommentsFromStorage())\n\n    return () => {\n      this.listeners.delete(wrapper)\n    }\n  }\n\n  async uploadScreenshot(commentId: string, dataUrl: string): Promise<string> {\n    // Return base64 URL directly, which gets stored in the comment's screenshotUrl.\n    return dataUrl\n  }\n}\n"],"names":["LocalAdapter","__publicField","data","comments","replies","listener","comment","id","newComment","pageUrl","projectKey","c","index","filtered","filteredReplies","reply","newReply","commentId","r","callback","wrapper","dataUrl"],"mappings":";;;AAOO,MAAMA,EAA2D;AAAA,EAAjE;AACG,IAAAC,EAAA,uCAA4D,IAAA;AAAA;AAAA,EAE5D,yBAA4C;AAClD,UAAMC,IAAO,eAAe,QAAQ,cAAc;AAClD,WAAOA,IAAO,KAAK,MAAMA,CAAI,IAAI,CAAA;AAAA,EACnC;AAAA,EAEQ,sBAAsBC,GAA6B;AACzD,mBAAe,QAAQ,gBAAgB,KAAK,UAAUA,CAAQ,CAAC,GAC/D,KAAK,gBAAA;AAAA,EACP;AAAA,EAEQ,wBAAiC;AACvC,UAAMD,IAAO,eAAe,QAAQ,aAAa;AACjD,WAAOA,IAAO,KAAK,MAAMA,CAAI,IAAI,CAAA;AAAA,EACnC;AAAA,EAEQ,qBAAqBE,GAAkB;AAC7C,mBAAe,QAAQ,eAAe,KAAK,UAAUA,CAAO,CAAC;AAAA,EAC/D;AAAA,EAEQ,kBAAkB;AACxB,UAAMD,IAAW,KAAK,uBAAA;AACtB,eAAWE,KAAY,KAAK;AAC1B,MAAAA,EAASF,CAAQ;AAAA,EAErB;AAAA,EAEA,MAAM,WAAWG,GAAuD;AACtE,UAAMH,IAAW,KAAK,uBAAA,GAChBI,IAAK,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,CAAC,GAC9CC,IAA8B,EAAE,GAAGF,GAAS,IAAAC,EAAA;AAClD,WAAAJ,EAAS,KAAKK,CAAU,GACxB,KAAK,sBAAsBL,CAAQ,GAC5BI;AAAA,EACT;AAAA,EAEA,MAAM,YAAYE,GAAiBC,GAAgD;AAEjF,WADiB,KAAK,uBAAA,EACN,OAAO,CAAAC,MAAKA,EAAE,YAAYF,KAAWE,EAAE,eAAeD,CAAU;AAAA,EAClF;AAAA,EAEA,MAAM,cAAcH,GAAYL,GAA+C;AAC7E,UAAMC,IAAW,KAAK,uBAAA,GAChBS,IAAQT,EAAS,UAAU,CAAAQ,MAAKA,EAAE,OAAOJ,CAAE;AACjD,IAAIK,MAAU,OACZT,EAASS,CAAK,IAAI,EAAE,GAAGT,EAASS,CAAK,GAAG,GAAGV,EAAA,GAC3C,KAAK,sBAAsBC,CAAQ;AAAA,EAEvC;AAAA,EAEA,MAAM,cAAcI,GAA2B;AAE7C,UAAMM,IADW,KAAK,uBAAA,EACI,OAAO,CAAAF,MAAKA,EAAE,OAAOJ,CAAE;AACjD,SAAK,sBAAsBM,CAAQ;AAGnC,UAAMC,IADU,KAAK,sBAAA,EACW,OAAO,CAAA,MAAK,EAAE,cAAcP,CAAE;AAC9D,SAAK,qBAAqBO,CAAe;AAAA,EAC3C;AAAA,EAEA,MAAM,SAASC,GAA2C;AACxD,UAAMX,IAAU,KAAK,sBAAA,GACfG,IAAK,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,GAAG,CAAC,GAC9CS,IAAkB,EAAE,GAAGD,GAAO,IAAAR,EAAA;AACpC,WAAAH,EAAQ,KAAKY,CAAQ,GACrB,KAAK,qBAAqBZ,CAAO,GAC1BG;AAAA,EACT;AAAA,EAEA,MAAM,WAAWU,GAAqC;AAEpD,WADgB,KAAK,sBAAA,EACN,OAAO,CAAAC,MAAKA,EAAE,cAAcD,CAAS;AAAA,EACtD;AAAA,EAEA,oBACER,GACAC,GACAS,GACY;AACZ,UAAMC,IAAU,CAACjB,MAAgC;AAC/C,MAAAgB,EAAShB,EAAS,OAAO,CAAAQ,MAAKA,EAAE,YAAYF,KAAWE,EAAE,eAAeD,CAAU,CAAC;AAAA,IACrF;AACA,gBAAK,UAAU,IAAIU,CAAO,GAC1BA,EAAQ,KAAK,wBAAwB,GAE9B,MAAM;AACX,WAAK,UAAU,OAAOA,CAAO;AAAA,IAC/B;AAAA,EACF;AAAA,EAEA,MAAM,iBAAiBH,GAAmBI,GAAkC;AAE1E,WAAOA;AAAA,EACT;AACF;"}

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

@@ -1,6 +1,6 @@
 var K = Object.defineProperty;
-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);
+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 = {
   active: !1,
@@ -18,7 +18,7 @@ function L() {
 function y(e) {
   T = { ...T, ...e }, O.forEach((t) => t(T));
 }
-function P(e) {
+function _(e) {
   return O.add(e), () => O.delete(e);
 }
 function X() {
@@ -598,9 +598,9 @@ const Z = {
   "top-right": { top: "24px", right: "24px" },
   "top-left": { top: "24px", left: "24px" }
 }, $ = "#6366f1", U = "#4f46e5", j = "#4338ca";
-function ee(e, t, o, n) {
-  const r = document.createElement("div");
-  Object.assign(r.style, {
+function ee(e, t, r, n) {
+  const o = document.createElement("div");
+  Object.assign(o.style, {
     position: "fixed",
     zIndex: "2147483647",
     display: "flex",
@@ -627,18 +627,18 @@ function ee(e, t, o, 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>
-  `, 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");
+  `, 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(), r._dragged) return;
+    if (i.stopPropagation(), o._dragged) return;
     const u = L();
-    u.active || (u.panelOpen ? (n(), setTimeout(o, 220)) : o());
+    u.active || (u.panelOpen ? (n(), setTimeout(r, 220)) : r());
   }), l.addEventListener("click", (i) => {
-    i.stopPropagation(), !r._dragged && (L().active || n());
-  }), _(a, () => (L().panelOpen, $), U), _(l, () => L().panelOpen ? j : $, U), P((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(r), r;
+  }), te(o), o;
 }
 function D(e) {
   Object.assign(e.style, {
@@ -654,23 +654,23 @@ function D(e) {
     transition: "background 0.12s"
   });
 }
-function _(e, t, o) {
+function P(e, t, r) {
   e.addEventListener("mouseenter", () => {
-    e.style.background = o;
+    e.style.background = r;
   }), e.addEventListener("mouseleave", () => {
     e.style.background = t();
   });
 }
 function te(e) {
-  let t = 0, o = 0, n = 0, r = 0;
+  let t = 0, r = 0, n = 0, o = 0;
   e.addEventListener("pointerdown", (a) => {
     if (a.button !== 0) return;
-    t = a.clientX, o = a.clientY;
+    t = a.clientX, r = a.clientY;
     const d = e.getBoundingClientRect();
-    n = d.left, r = d.top, e._dragged = !1;
+    n = d.left, o = d.top, e._dragged = !1;
     const l = (s) => {
-      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");
+      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(() => {
         e._dragged = !1;
@@ -681,8 +681,8 @@ function te(e) {
 }
 function ne(e) {
   return new Promise((t) => {
-    const o = document.createElement("div");
-    o.className = "ufp-modal-backdrop", o.innerHTML = `
+    const r = document.createElement("div");
+    r.className = "ufp-modal-backdrop", r.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(o);
-    const n = o.querySelector("#ufp-name-input"), r = o.querySelector("#ufp-name-submit");
+    `, e.appendChild(r);
+    const n = r.querySelector("#ufp-name-input"), o = r.querySelector("#ufp-name-submit");
     n.addEventListener("input", () => {
-      r.disabled = n.value.trim().length === 0;
+      o.disabled = n.value.trim().length === 0;
     });
     const a = () => {
       const d = n.value.trim();
-      d && (Y(d), o.remove(), t(d));
+      d && (Y(d), r.remove(), t(d));
     };
-    r.addEventListener("click", a), n.addEventListener("keydown", (d) => {
+    o.addEventListener("click", a), n.addEventListener("keydown", (d) => {
       d.key === "Enter" && a();
     }), requestAnimationFrame(() => n.focus());
   });
 }
 const C = "#6366f1", M = 3;
-function z(e, t = 1, o = 1) {
+function z(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, 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;
+      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;
     }
     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 * 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;
+      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 n = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
-      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;
+      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 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;
+      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 re(e, t, o, n) {
-  const r = o / t.pageWidth, a = n / t.pageHeight;
+function re(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 = `
@@ -742,25 +742,25 @@ function re(e, t, o, n) {
       <polygon points="0 0, 10 3.5, 0 7" fill="${C}" />
     </marker>
   `, e.appendChild(d), t.shapes.forEach((l) => {
-    e.appendChild(z(l, r, a));
+    e.appendChild(z(l, o, a));
   });
 }
-function oe(e, t, o) {
+function oe(e, t, r) {
   if (e.length === 0) return "";
   if (e.length === 1) {
-    const r = e[0];
-    return `M ${r.x * t} ${r.y * o}`;
+    const o = e[0];
+    return `M ${o.x * t} ${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}`;
+  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 ie(e) {
   return new Promise((t) => {
-    let o = "pen";
+    let r = "pen";
     const n = [];
-    let r = !1, a = 0, d = 0, l = [], p = null, s = null;
+    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);";
     const u = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -836,7 +836,7 @@ function ie(e) {
     const b = ae(
       e,
       (m) => {
-        o = m;
+        r = m;
       },
       () => {
         w(), t(null);
@@ -846,41 +846,41 @@ function ie(e) {
       }
     );
     e.appendChild(i), i.addEventListener("pointerdown", (m) => {
-      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 }]));
+      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) => {
-      if (!r) return;
+      if (!o) return;
       const x = m.clientX + window.scrollX, g = m.clientY + window.scrollY;
-      if (p && p.remove(), o === "pen")
+      if (p && p.remove(), r === "pen")
         l.push({ x, y: g }), p = z({ type: "pen", points: [...l], color: C, width: M });
-      else if (o === "rect") {
+      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);
-      } else if (o === "circle") {
+      } 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 o === "arrow" && (p = z({ type: "arrow", x1: a, y1: d, x2: x, y2: g, color: C, width: M }));
+      } 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) => {
-      if (!r) return;
-      r = !1, p && (p.remove(), p = null);
+      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 (o === "pen" && l.length > 1)
+      if (r === "pen" && l.length > 1)
         n.push({ type: "pen", points: [...l], color: C, width: M }), l = [], c = !0;
-      else if (o === "rect") {
+      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);
-      } else if (o === "circle") {
+      } 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 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);
+      } 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());
     });
   });
 }
-function ae(e, t, o, n) {
-  const r = document.createElement("div");
-  return r.className = "ufp-toolbar", r.innerHTML = `
+function ae(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">
@@ -907,20 +907,20 @@ function ae(e, t, o, n) {
     </button>
     <div class="ufp-toolbar-sep"></div>
     <button class="ufp-btn ufp-btn-ghost" id="ufp-cancel-btn">Cancel</button>
-  `, r.querySelectorAll("[data-tool]").forEach((a) => {
+  `, o.querySelectorAll("[data-tool]").forEach((a) => {
     a.addEventListener("click", () => {
-      r.querySelectorAll("[data-tool]").forEach((d) => d.classList.remove("active")), a.classList.add("active"), t(a.dataset.tool);
+      o.querySelectorAll("[data-tool]").forEach((d) => d.classList.remove("active")), a.classList.add("active"), t(a.dataset.tool);
     });
-  }), r.querySelector("#ufp-undo-btn").addEventListener("click", n), r.querySelector("#ufp-cancel-btn").addEventListener("click", o), e.appendChild(r), r;
+  }), o.querySelector("#ufp-undo-btn").addEventListener("click", n), o.querySelector("#ufp-cancel-btn").addEventListener("click", r), e.appendChild(o), o;
 }
 function W(e) {
-  const t = Date.now() - e, o = Math.floor(t / 1e3);
-  if (o < 60) return "just now";
-  const n = Math.floor(o / 60);
+  const t = Date.now() - e, r = Math.floor(t / 1e3);
+  if (r < 60) return "just now";
+  const n = Math.floor(r / 60);
   if (n < 60) return `${n}m ago`;
-  const r = Math.floor(n / 60);
-  if (r < 24) return `${r}h ago`;
-  const a = Math.floor(r / 24);
+  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 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, o, n) {
-  let r = [...t];
+function se(e, t, r, n) {
+  let o = [...t];
   const a = document.createElement("div");
   a.className = "ufp-replies";
   const d = (h) => {
@@ -992,16 +992,16 @@ function se(e, t, o, n) {
       createdAt: Date.now()
     };
     try {
-      const b = { id: await o.addReply(E), ...E };
-      i.value = "", u.textContent = "Reply", u.disabled = !0, r = [...r, b], d(r), n(b);
+      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";
     }
-  }), a.appendChild(l), d(r), a.addReply = (h) => {
-    r = [...r, h], d(r);
+  }), a.appendChild(l), d(o), a.addReply = (h) => {
+    o = [...o, h], d(o);
   }, a;
 }
-function le(e, t, o, n, r, a, d, l) {
+function le(e, t, r, n, o, a, d, l) {
   const p = document.createElement("div");
   p.className = "ufp-detail", p.innerHTML = `
     <div class="ufp-detail-image-area">
@@ -1066,14 +1066,14 @@ function le(e, t, o, n, r, 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 }), r(t.id), p.remove(), y({ panelOpen: !0 });
+      f.disabled = !0, f.textContent = "Resolving…", await n.updateComment(t.id, { resolved: !0 }), o(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(), y({ panelOpen: !0 }));
   }), s.appendChild(i);
-  const u = p.querySelector("#ufp-detail-replies"), w = se(t.id, o, n, (f) => {
+  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);
   });
@@ -1086,7 +1086,7 @@ function le(e, t, o, n, r, a, d, l) {
   };
   h.complete && h.naturalWidth > 0 ? E() : h.addEventListener("load", E);
 }
-function pe(e, t, o) {
+function pe(e, t, r) {
   const n = document.createElement("div");
   n.className = "ufp-panel", n.innerHTML = `
     <div class="ufp-panel-header">
@@ -1111,16 +1111,16 @@ function pe(e, t, o) {
   `, e.appendChild(n), n.querySelector("#ufp-panel-close").addEventListener("click", () => {
     y({ panelOpen: !1 });
   }), n.querySelector("#ufp-new-feedback").addEventListener("click", () => {
-    y({ panelOpen: !1 }), o();
+    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 });
     });
   });
-  const r = n.querySelector("#ufp-comment-list"), a = /* @__PURE__ */ new Map(), d = async (l, p) => {
+  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 (r.innerHTML = "", s.length === 0) {
-      r.innerHTML = `
+    if (o.innerHTML = "", s.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"/>
@@ -1138,16 +1138,16 @@ function pe(e, t, o) {
         } catch {
           a.set(i.id, []);
         }
-      r.appendChild(
+      o.appendChild(
         de(i, a, e, t)
       );
     }
   };
-  return P(async (l) => {
+  return _(async (l) => {
     n.classList.toggle("open", l.panelOpen), l.panelOpen && await d(l.comments, l.filter);
   }), n;
 }
-function de(e, t, o, n, r) {
+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 = `
     <div class="ufp-comment-card-header">
@@ -1175,7 +1175,7 @@ function de(e, t, o, n, r) {
       console.error("[ui-feedback-plugin] Failed to fetch replies:", p);
     }
     le(
-      o,
+      r,
       e,
       l,
       n,
@@ -1205,19 +1205,19 @@ async function ce() {
   try {
     const e = await ue();
     return await fe(e);
-  } catch {
-    return me();
+  } catch (e) {
+    return console.error("[ui-feedback-plugin] capturePageScreenshot failed:", e), me();
   }
 }
 async function ue() {
-  return (await import("./html2canvas.esm-d2sM-0Wm.mjs")).default;
+  return (await import("./html2canvas-pro.esm-QETbiPYt.mjs")).default;
 }
 async function fe(e) {
-  const t = window.scrollX, o = window.scrollY;
+  const t = window.scrollX, r = window.scrollY;
   window.scrollTo(0, 0);
   try {
     return (await e(document.body, {
-      allowTaint: !0,
+      allowTaint: !1,
       useCORS: !0,
       logging: !1,
       scale: Math.min(window.devicePixelRatio, 2),
@@ -1227,10 +1227,10 @@ async function fe(e) {
       windowHeight: document.documentElement.scrollHeight,
       x: 0,
       y: 0,
-      ignoreElements: (r) => r.tagName === "UI-FEEDBACK-PLUGIN"
+      ignoreElements: (o) => o.tagName === "UI-FEEDBACK-PLUGIN"
     })).toDataURL("image/png");
   } finally {
-    window.scrollTo(t, o);
+    window.scrollTo(t, r);
   }
 }
 function me() {
@@ -1243,15 +1243,19 @@ const q = "ui-feedback-plugin";
 async function he(e) {
   const { backend: t } = e;
   if (t.provider === "firebase") {
-    const { FirebaseAdapter: o } = await import("./firebase-BGU5KpRU.mjs"), n = new o(t);
+    const { FirebaseAdapter: r } = await import("./firebase-BGU5KpRU.mjs"), n = new r(t);
     return { db: n, screenshot: n };
   }
   if (t.provider === "supabase") {
-    const { SupabaseAdapter: o } = await import("./supabase-CbB80UVb.mjs"), n = new o(t.url, t.anonKey);
+    const { SupabaseAdapter: r } = await import("./supabase-CbB80UVb.mjs"), n = new r(t.url, t.anonKey);
     return { db: n, screenshot: n };
   }
   if (t.provider === "aws") {
-    const { AWSAdapter: o } = await import("./aws-CkWYvUhs.mjs"), n = new o(t);
+    const { AWSAdapter: r } = await import("./aws-CkWYvUhs.mjs"), n = new r(t);
+    return { db: n, screenshot: n };
+  }
+  if (t.provider === "local") {
+    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");
@@ -1261,9 +1265,9 @@ function xe(e) {
   if (customElements.get(q))
     return console.warn("[ui-feedback-plugin] Already initialized."), () => {
     };
-  const t = ((d = e.theme) == null ? void 0 : d.primaryColor) ?? "#6366f1", o = e.projectKey ?? "default", n = e.position ?? "bottom-right";
+  const t = ((d = e.theme) == null ? void 0 : d.primaryColor) ?? "#6366f1", r = e.projectKey ?? "default", n = e.position ?? "bottom-right";
   y({ config: e });
-  class r extends HTMLElement {
+  class o extends HTMLElement {
     constructor() {
       super();
       H(this, "shadow");
@@ -1295,7 +1299,7 @@ function xe(e) {
         n,
         () => this.startAnnotation(),
         () => y({ panelOpen: !L().panelOpen })
-      ), this.unsubscribe = this.db.subscribeToComments(s, o, (i) => {
+      ), this.unsubscribe = this.db.subscribeToComments(s, r, (i) => {
         y({ comments: i });
       });
     }
@@ -1333,7 +1337,7 @@ function xe(e) {
       }
       const E = {
         pageUrl: w,
-        projectKey: o,
+        projectKey: r,
         authorName: s,
         text: i,
         screenshotUrl: "",
@@ -1357,7 +1361,7 @@ function xe(e) {
       `, h.textContent = s, this.shadow.appendChild(h), setTimeout(() => h.remove(), i === "error" ? 6e3 : 2500);
     }
   }
-  customElements.define(q, r);
+  customElements.define(q, o);
   const a = document.createElement(q);
   return document.body.appendChild(a), () => a.remove();
 }