@mindbowser_inc/ui-feedback-plugin 0.1.0

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

@@ -0,0 +1,1382 @@
+var K = Object.defineProperty;
+var J = (e, t, r) => t in e ? K(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
+var H = (e, t, r) => J(e, typeof t != "symbol" ? t + "" : t, r);
+const O = /* @__PURE__ */ new Set();
+let T = {
+  active: !1,
+  userName: null,
+  comments: [],
+  replies: /* @__PURE__ */ new Map(),
+  selectedCommentId: null,
+  panelOpen: !1,
+  filter: "open",
+  config: {}
+};
+function L() {
+  return T;
+}
+function b(e) {
+  T = { ...T, ...e }, O.forEach((t) => t(T));
+}
+function P(e) {
+  return O.add(e), () => O.delete(e);
+}
+function X() {
+  if (T.userName) return T.userName;
+  const e = localStorage.getItem("ufp_user_name");
+  return e ? (b({ userName: e }), e) : null;
+}
+function Y(e) {
+  localStorage.setItem("ufp_user_name", e), b({ userName: e });
+}
+function U(e) {
+  try {
+    const t = new URL(e);
+    return t.origin + t.pathname;
+  } catch {
+    return e;
+  }
+}
+function Q(e) {
+  return `
+    :host {
+      --ufp-primary: ${e};
+      --ufp-primary-dark: color-mix(in srgb, ${e} 80%, black);
+      --ufp-white: #ffffff;
+      --ufp-gray-50: #f9fafb;
+      --ufp-gray-100: #f3f4f6;
+      --ufp-gray-200: #e5e7eb;
+      --ufp-gray-300: #d1d5db;
+      --ufp-gray-400: #9ca3af;
+      --ufp-gray-500: #6b7280;
+      --ufp-gray-600: #4b5563;
+      --ufp-gray-700: #374151;
+      --ufp-gray-800: #1f2937;
+      --ufp-gray-900: #111827;
+      --ufp-green: #10b981;
+      --ufp-red: #ef4444;
+      --ufp-shadow: 0 4px 24px rgba(0,0,0,0.18);
+      --ufp-radius: 12px;
+      --ufp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: var(--ufp-font);
+      all: initial;
+    }
+
+    * { box-sizing: border-box; }
+
+    /* Trigger */
+    .ufp-trigger {
+      position: fixed;
+      z-index: 2147483646;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      background: var(--ufp-primary);
+      color: var(--ufp-white);
+      border: none;
+      border-radius: 28px;
+      padding: 10px 18px 10px 14px;
+      cursor: pointer;
+      box-shadow: var(--ufp-shadow);
+      font-family: var(--ufp-font);
+      font-size: 14px;
+      font-weight: 600;
+      user-select: none;
+      transition: background 0.15s, transform 0.1s;
+      touch-action: none;
+    }
+    .ufp-trigger:hover { background: var(--ufp-primary-dark); }
+    .ufp-trigger:active { transform: scale(0.97); }
+    .ufp-trigger.active { background: var(--ufp-gray-800); }
+    .ufp-trigger-icon { width: 20px; height: 20px; flex-shrink: 0; }
+
+    /* Modal overlay */
+    .ufp-modal-backdrop {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.45);
+      z-index: 2147483646;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .ufp-modal {
+      background: var(--ufp-white);
+      border-radius: var(--ufp-radius);
+      padding: 28px;
+      width: 360px;
+      box-shadow: var(--ufp-shadow);
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .ufp-modal h2 {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 700;
+      color: var(--ufp-gray-900);
+      font-family: var(--ufp-font);
+    }
+    .ufp-modal p {
+      margin: 0;
+      font-size: 14px;
+      color: var(--ufp-gray-500);
+      font-family: var(--ufp-font);
+    }
+
+    /* Form elements */
+    .ufp-input {
+      width: 100%;
+      padding: 10px 14px;
+      border: 1.5px solid var(--ufp-gray-200);
+      border-radius: 8px;
+      font-size: 14px;
+      font-family: var(--ufp-font);
+      color: var(--ufp-gray-900);
+      outline: none;
+      transition: border-color 0.15s;
+    }
+    .ufp-input:focus { border-color: var(--ufp-primary); }
+    .ufp-textarea {
+      width: 100%;
+      padding: 10px 14px;
+      border: 1.5px solid var(--ufp-gray-200);
+      border-radius: 8px;
+      font-size: 14px;
+      font-family: var(--ufp-font);
+      color: var(--ufp-gray-900);
+      outline: none;
+      resize: vertical;
+      min-height: 80px;
+      transition: border-color 0.15s;
+    }
+    .ufp-textarea:focus { border-color: var(--ufp-primary); }
+
+    /* Buttons */
+    .ufp-btn {
+      padding: 9px 18px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      font-family: var(--ufp-font);
+      cursor: pointer;
+      border: none;
+      transition: background 0.15s, opacity 0.15s;
+    }
+    .ufp-btn-primary {
+      background: var(--ufp-primary);
+      color: var(--ufp-white);
+    }
+    .ufp-btn-primary:hover { background: var(--ufp-primary-dark); }
+    .ufp-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+    .ufp-btn-ghost {
+      background: transparent;
+      color: var(--ufp-gray-600);
+      border: 1.5px solid var(--ufp-gray-200);
+    }
+    .ufp-btn-ghost:hover { background: var(--ufp-gray-50); }
+    .ufp-btn-danger {
+      background: var(--ufp-red);
+      color: var(--ufp-white);
+    }
+    .ufp-btn-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      border-radius: 6px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      color: var(--ufp-gray-600);
+      font-size: 16px;
+      transition: background 0.12s, color 0.12s;
+    }
+    .ufp-btn-icon:hover { background: var(--ufp-gray-100); color: var(--ufp-gray-900); }
+    .ufp-btn-icon.active { background: var(--ufp-primary); color: var(--ufp-white); }
+
+    .ufp-btn-row {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+
+    /* Annotation overlay */
+    .ufp-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 2147483645;
+      cursor: crosshair;
+      background: rgba(99,102,241,0.04);
+    }
+    .ufp-overlay-svg {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+
+    /* Toolbar */
+    .ufp-toolbar {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 2147483647;
+      background: var(--ufp-white);
+      border-radius: 12px;
+      box-shadow: var(--ufp-shadow);
+      padding: 8px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      top: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .ufp-toolbar-sep {
+      width: 1px;
+      height: 24px;
+      background: var(--ufp-gray-200);
+      margin: 0 4px;
+    }
+    .ufp-toolbar-label {
+      font-size: 12px;
+      font-family: var(--ufp-font);
+      color: var(--ufp-gray-500);
+      padding: 0 6px;
+    }
+
+    /* Comment input popup */
+    .ufp-comment-popup {
+      position: fixed;
+      z-index: 2147483647;
+      background: var(--ufp-white);
+      border-radius: var(--ufp-radius);
+      box-shadow: var(--ufp-shadow);
+      padding: 16px;
+      width: 320px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .ufp-comment-popup h3 {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--ufp-gray-800);
+      font-family: var(--ufp-font);
+    }
+
+    /* Comments panel */
+    .ufp-panel {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 360px;
+      z-index: 2147483646;
+      background: var(--ufp-white);
+      box-shadow: -4px 0 24px rgba(0,0,0,0.12);
+      display: flex;
+      flex-direction: column;
+      transform: translateX(100%);
+      transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
+    }
+    .ufp-panel.open { transform: translateX(0); }
+    .ufp-panel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--ufp-gray-100);
+      flex-shrink: 0;
+    }
+    .ufp-panel-title {
+      font-size: 16px;
+      font-weight: 700;
+      color: var(--ufp-gray-900);
+      font-family: var(--ufp-font);
+    }
+    .ufp-filter-tabs {
+      display: flex;
+      gap: 4px;
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--ufp-gray-100);
+      flex-shrink: 0;
+    }
+    .ufp-filter-tab {
+      padding: 6px 14px;
+      border-radius: 20px;
+      font-size: 13px;
+      font-family: var(--ufp-font);
+      font-weight: 500;
+      cursor: pointer;
+      border: none;
+      background: transparent;
+      color: var(--ufp-gray-500);
+      transition: background 0.12s, color 0.12s;
+    }
+    .ufp-filter-tab.active {
+      background: var(--ufp-primary);
+      color: var(--ufp-white);
+    }
+    .ufp-panel-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px 0;
+    }
+    .ufp-panel-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 200px;
+      color: var(--ufp-gray-400);
+      font-size: 14px;
+      font-family: var(--ufp-font);
+      gap: 8px;
+    }
+
+    /* Comment card */
+    .ufp-comment-card {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--ufp-gray-100);
+      cursor: pointer;
+      transition: background 0.12s;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .ufp-comment-card:hover { background: var(--ufp-gray-50); }
+    .ufp-comment-card.selected { background: #eef2ff; }
+    .ufp-comment-card-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .ufp-comment-meta {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .ufp-avatar {
+      width: 26px;
+      height: 26px;
+      border-radius: 50%;
+      background: var(--ufp-primary);
+      color: var(--ufp-white);
+      font-size: 11px;
+      font-weight: 700;
+      font-family: var(--ufp-font);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .ufp-comment-author {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--ufp-gray-800);
+      font-family: var(--ufp-font);
+    }
+    .ufp-comment-time {
+      font-size: 11px;
+      color: var(--ufp-gray-400);
+      font-family: var(--ufp-font);
+    }
+    .ufp-comment-text {
+      font-size: 13px;
+      color: var(--ufp-gray-700);
+      font-family: var(--ufp-font);
+      line-height: 1.5;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+    .ufp-comment-thumbnail {
+      width: 100%;
+      height: 80px;
+      object-fit: cover;
+      object-position: top left;
+      border-radius: 6px;
+      border: 1px solid var(--ufp-gray-200);
+    }
+    .ufp-comment-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .ufp-reply-count {
+      font-size: 12px;
+      color: var(--ufp-gray-400);
+      font-family: var(--ufp-font);
+    }
+    .ufp-resolved-badge {
+      font-size: 11px;
+      font-weight: 600;
+      font-family: var(--ufp-font);
+      padding: 2px 8px;
+      border-radius: 12px;
+      background: #d1fae5;
+      color: #065f46;
+    }
+    .ufp-card-actions {
+      display: flex;
+      gap: 4px;
+    }
+
+    /* Detail view */
+    .ufp-detail {
+      position: fixed;
+      inset: 0;
+      z-index: 2147483647;
+      background: rgba(0,0,0,0.75);
+      display: flex;
+      align-items: stretch;
+    }
+    .ufp-detail-image-area {
+      flex: 1;
+      overflow: auto;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding: 24px;
+      position: relative;
+    }
+    .ufp-detail-image-wrap {
+      position: relative;
+      display: inline-block;
+    }
+    .ufp-detail-screenshot {
+      max-width: 100%;
+      display: block;
+      border-radius: 8px;
+    }
+    .ufp-detail-annotation-svg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+    }
+    .ufp-detail-sidebar {
+      width: 340px;
+      background: var(--ufp-white);
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+    }
+    .ufp-detail-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--ufp-gray-100);
+      flex-shrink: 0;
+    }
+    .ufp-detail-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .ufp-detail-comment {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .ufp-detail-comment-text {
+      font-size: 14px;
+      color: var(--ufp-gray-800);
+      font-family: var(--ufp-font);
+      line-height: 1.6;
+    }
+    .ufp-detail-actions {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    /* Reply thread */
+    .ufp-replies {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      border-top: 1px solid var(--ufp-gray-100);
+      padding-top: 12px;
+    }
+    .ufp-replies-title {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--ufp-gray-500);
+      font-family: var(--ufp-font);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .ufp-reply {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .ufp-reply-meta {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .ufp-reply-author {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--ufp-gray-700);
+      font-family: var(--ufp-font);
+    }
+    .ufp-reply-time {
+      font-size: 11px;
+      color: var(--ufp-gray-400);
+      font-family: var(--ufp-font);
+    }
+    .ufp-reply-text {
+      font-size: 13px;
+      color: var(--ufp-gray-700);
+      font-family: var(--ufp-font);
+      line-height: 1.5;
+      padding-left: 32px;
+    }
+    .ufp-reply-input-area {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      border-top: 1px solid var(--ufp-gray-100);
+      padding-top: 12px;
+    }
+    .ufp-reply-name-row {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+    .ufp-reply-name-label {
+      font-size: 12px;
+      color: var(--ufp-gray-500);
+      font-family: var(--ufp-font);
+      white-space: nowrap;
+    }
+
+    /* Loading spinner */
+    .ufp-spinner {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--ufp-gray-200);
+      border-top-color: var(--ufp-primary);
+      border-radius: 50%;
+      animation: ufp-spin 0.7s linear infinite;
+    }
+    @keyframes ufp-spin { to { transform: rotate(360deg); } }
+
+    /* Scrollbar */
+    .ufp-panel-list::-webkit-scrollbar,
+    .ufp-detail-body::-webkit-scrollbar,
+    .ufp-detail-image-area::-webkit-scrollbar { width: 4px; }
+    .ufp-panel-list::-webkit-scrollbar-thumb,
+    .ufp-detail-body::-webkit-scrollbar-thumb,
+    .ufp-detail-image-area::-webkit-scrollbar-thumb {
+      background: var(--ufp-gray-300);
+      border-radius: 2px;
+    }
+  `;
+}
+const Z = {
+  "bottom-right": { bottom: "24px", right: "24px" },
+  "bottom-left": { bottom: "24px", left: "24px" },
+  "top-right": { top: "24px", right: "24px" },
+  "top-left": { top: "24px", left: "24px" }
+}, $ = "#6366f1", I = "#4f46e5", j = "#4338ca";
+function ee(e, t, r, n) {
+  const o = document.createElement("div");
+  Object.assign(o.style, {
+    position: "fixed",
+    zIndex: "2147483647",
+    display: "flex",
+    alignItems: "stretch",
+    borderRadius: "28px",
+    boxShadow: "0 4px 20px rgba(0,0,0,0.28), 0 1px 4px rgba(0,0,0,0.16)",
+    overflow: "hidden",
+    userSelect: "none",
+    ...Z[t]
+  });
+  const a = document.createElement("button");
+  a.id = "ufp-btn-annotate", a.title = "Add feedback annotation", D(a), a.style.padding = "10px 16px 10px 14px", a.innerHTML = `
+    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" style="flex-shrink:0">
+      <path d="M12 20h9"/>
+      <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
+    </svg>
+    <span id="ufp-annotate-label" style="font-size:14px;font-weight:600;">Feedback</span>
+  `;
+  const d = document.createElement("div");
+  d.style.cssText = "width:1px;background:rgba(255,255,255,0.3);flex-shrink:0;";
+  const l = document.createElement("button");
+  l.id = "ufp-btn-panel", l.title = "View all comments", D(l), l.style.padding = "10px 14px", l.innerHTML = `
+    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" style="flex-shrink:0">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+    </svg>
+    <span id="ufp-panel-count" style="font-size:13px;font-weight:600;min-width:8px;text-align:center;"></span>
+  `, o.appendChild(a), o.appendChild(d), o.appendChild(l), e.appendChild(o);
+  const p = o.querySelector("#ufp-annotate-label"), s = o.querySelector("#ufp-panel-count");
+  return a.addEventListener("click", (i) => {
+    if (i.stopPropagation(), o._dragged) return;
+    const u = L();
+    u.active || (u.panelOpen ? (n(), setTimeout(r, 220)) : r());
+  }), l.addEventListener("click", (i) => {
+    i.stopPropagation(), !o._dragged && (L().active || n());
+  }), _(a, () => (L().panelOpen, $), I), _(l, () => L().panelOpen ? j : $, I), 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;
+}
+function D(e) {
+  Object.assign(e.style, {
+    display: "flex",
+    alignItems: "center",
+    gap: "7px",
+    background: $,
+    color: "#ffffff",
+    border: "none",
+    cursor: "pointer",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    lineHeight: "1",
+    transition: "background 0.12s"
+  });
+}
+function _(e, t, r) {
+  e.addEventListener("mouseenter", () => {
+    e.style.background = r;
+  }), e.addEventListener("mouseleave", () => {
+    e.style.background = t();
+  });
+}
+function te(e) {
+  let t = 0, r = 0, n = 0, o = 0;
+  e.addEventListener("pointerdown", (a) => {
+    if (a.button !== 0) return;
+    t = a.clientX, r = a.clientY;
+    const d = e.getBoundingClientRect();
+    n = d.left, o = d.top, e._dragged = !1;
+    const l = (s) => {
+      const i = s.clientX - t, u = s.clientY - r;
+      !e._dragged && Math.sqrt(i * i + u * u) < 5 || (e._dragged = !0, e.style.left = `${Math.max(0, Math.min(window.innerWidth - e.offsetWidth, n + i))}px`, e.style.top = `${Math.max(0, Math.min(window.innerHeight - e.offsetHeight, o + u))}px`, e.style.right = "auto", e.style.bottom = "auto");
+    }, p = () => {
+      document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", p), requestAnimationFrame(() => {
+        e._dragged = !1;
+      });
+    };
+    document.addEventListener("pointermove", l), document.addEventListener("pointerup", p);
+  });
+}
+function ne(e) {
+  return new Promise((t) => {
+    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>
+        <input
+          class="ufp-input"
+          id="ufp-name-input"
+          type="text"
+          placeholder="Your name"
+          maxlength="60"
+          autocomplete="off"
+        />
+        <div class="ufp-btn-row">
+          <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");
+    n.addEventListener("input", () => {
+      o.disabled = n.value.trim().length === 0;
+    });
+    const a = () => {
+      const d = n.value.trim();
+      d && (Y(d), r.remove(), t(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, r = 1) {
+  switch (e.type) {
+    case "pen": {
+      const n = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      return n.setAttribute("d", oe(e.points, t, r)), n.setAttribute("stroke", e.color), n.setAttribute("stroke-width", String(e.width * Math.min(t, r))), n.setAttribute("fill", "none"), n.setAttribute("stroke-linecap", "round"), n.setAttribute("stroke-linejoin", "round"), n;
+    }
+    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;
+    }
+    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;
+    }
+    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;
+    }
+  }
+}
+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 = `
+    <marker id="ufp-arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="${C}" />
+    </marker>
+  `, e.appendChild(d), t.shapes.forEach((l) => {
+    e.appendChild(z(l, o, a));
+  });
+}
+function oe(e, t, r) {
+  if (e.length === 0) return "";
+  if (e.length === 1) {
+    const o = e[0];
+    return `M ${o.x * t} ${o.y * r}`;
+  }
+  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 r = "pen";
+    const n = [];
+    let o = !1, a = 0, d = 0, l = [], p = null, s = null;
+    const i = document.createElement("div");
+    i.style.cssText = "position:fixed;inset:0;z-index:2147483645;cursor:crosshair;background:rgba(99,102,241,0.04);";
+    const u = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    u.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;", u.innerHTML = `
+      <defs>
+        <marker id="ufp-arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+          <polygon points="0 0, 10 3.5, 0 7" fill="${C}" />
+        </marker>
+      </defs>
+    `, i.appendChild(u);
+    function w() {
+      i.remove(), v.remove(), s == null || s.remove();
+    }
+    function h() {
+      const m = u.querySelector("defs");
+      u.innerHTML = "", u.appendChild(m), n.forEach((x) => u.appendChild(z(x)));
+    }
+    function k() {
+      let m = 0, x = 0, g = 0;
+      return n.forEach((c) => {
+        if (c.type === "pen" && c.points.length) {
+          const y = c.points[c.points.length - 1];
+          m += y.x, x += y.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,
+        anchorY: g > 0 ? x / g - window.scrollY : window.innerHeight / 2
+      };
+    }
+    function E() {
+      i.style.pointerEvents = "none", v.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;
+        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;
+        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+      `, s.innerHTML = `
+        <div style="font-size:13px;font-weight:600;color:#374151;">Add your comment</div>
+        <textarea id="ufp-inline-text" placeholder="Describe your feedback…" rows="3"
+          style="width:100%;padding:9px 12px;border:1.5px solid #e5e7eb;border-radius:8px;
+                 font-size:13px;font-family:inherit;color:#111827;resize:none;
+                 min-height:72px;outline:none;box-sizing:border-box;"></textarea>
+        <div style="display:flex;gap:6px;justify-content:flex-end;align-items:center;">
+          <button id="ufp-popup-cancel"
+            style="padding:7px 12px;border-radius:8px;font-size:13px;font-weight:500;
+                   font-family:inherit;cursor:pointer;background:transparent;
+                   border:1.5px solid #e5e7eb;color:#6b7280;">Cancel</button>
+          <button id="ufp-popup-submit" disabled
+            style="padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;
+                   font-family:inherit;cursor:pointer;background:#6366f1;border:none;
+                   color:#fff;opacity:0.45;transition:opacity 0.15s;">Submit</button>
+        </div>
+      `, e.appendChild(s);
+      const B = s.querySelector("#ufp-inline-text"), R = s.querySelector("#ufp-popup-submit"), G = s.querySelector("#ufp-popup-cancel");
+      B.addEventListener("input", () => {
+        const N = B.value.trim().length > 0;
+        R.disabled = !N, R.style.opacity = N ? "1" : "0.45";
+      }), R.addEventListener("click", () => {
+        const N = B.value.trim();
+        if (!N) return;
+        const V = k();
+        w(), t({ shapes: [...n], text: N, ...V });
+      }), G.addEventListener("click", () => {
+        w(), t(null);
+      }), requestAnimationFrame(() => B.focus());
+    }
+    const v = ae(
+      e,
+      (m) => {
+        r = m;
+      },
+      () => {
+        w(), t(null);
+      },
+      () => {
+        n.length !== 0 && (s && (s.remove(), s = null, i.style.pointerEvents = "auto", v.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 }]));
+    }), i.addEventListener("pointermove", (m) => {
+      if (!o) return;
+      const x = m.clientX + window.scrollX, g = m.clientY + window.scrollY;
+      if (p && p.remove(), r === "pen")
+        l.push({ x, y: g }), p = z({ type: "pen", points: [...l], color: C, width: M });
+      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 (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 };
+        p = z(S);
+      } else r === "arrow" && (p = z({ type: "arrow", x1: a, y1: d, x2: x, y2: g, color: C, width: M }));
+      p && u.appendChild(p);
+    }), i.addEventListener("pointerup", (m) => {
+      if (!o) return;
+      o = !1, p && (p.remove(), p = null);
+      const x = m.clientX + window.scrollX, g = m.clientY + window.scrollY;
+      let c = !1;
+      if (r === "pen" && l.length > 1)
+        n.push({ type: "pen", points: [...l], color: C, width: M }), l = [], c = !0;
+      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);
+      c && (h(), E());
+    });
+  });
+}
+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">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
+      </svg>
+    </button>
+    <button class="ufp-btn-icon" data-tool="rect" title="Rectangle">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
+    </button>
+    <button class="ufp-btn-icon" data-tool="circle" title="Circle">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
+    </button>
+    <button class="ufp-btn-icon" data-tool="arrow" title="Arrow">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
+      </svg>
+    </button>
+    <div class="ufp-toolbar-sep"></div>
+    <button class="ufp-btn-icon" id="ufp-undo-btn" title="Undo last stroke">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/>
+      </svg>
+    </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) => {
+    a.addEventListener("click", () => {
+      o.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;
+}
+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);
+  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 F(e) {
+  return e.split(" ").filter(Boolean).slice(0, 2).map((t) => t[0].toUpperCase()).join("");
+}
+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];
+  const a = document.createElement("div");
+  a.className = "ufp-replies";
+  const d = (h) => {
+    const k = a.querySelector(".ufp-replies-list");
+    k && k.remove();
+    const E = document.createElement("div");
+    if (E.className = "ufp-replies-list", E.style.cssText = "display:flex;flex-direction:column;gap:12px;", h.length > 0) {
+      const f = document.createElement("div");
+      f.className = "ufp-replies-title", f.textContent = `${h.length} ${h.length === 1 ? "Reply" : "Replies"}`, E.appendChild(f), h.forEach((v) => {
+        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>
+          <div class="ufp-reply-text">${A(v.text)}</div>
+        `, E.appendChild(m);
+      });
+    }
+    a.insertBefore(E, a.querySelector(".ufp-reply-input-area"));
+  }, l = document.createElement("div");
+  l.className = "ufp-reply-input-area";
+  const p = X();
+  l.innerHTML = `
+    <div class="ufp-reply-name-row">
+      <span class="ufp-reply-name-label">Replying as:</span>
+      <input
+        class="ufp-input"
+        id="ufp-reply-name"
+        type="text"
+        placeholder="Your name"
+        value="${A(p ?? "")}"
+        style="flex:1;"
+      />
+    </div>
+    <textarea
+      class="ufp-textarea"
+      id="ufp-reply-text"
+      placeholder="Write a reply…"
+      rows="2"
+      style="min-height:60px;"
+    ></textarea>
+    <div class="ufp-btn-row">
+      <button class="ufp-btn ufp-btn-primary" id="ufp-reply-submit" disabled style="font-size:13px;padding:7px 14px;">Reply</button>
+    </div>
+  `;
+  const s = l.querySelector("#ufp-reply-name"), i = l.querySelector("#ufp-reply-text"), u = l.querySelector("#ufp-reply-submit"), w = () => {
+    u.disabled = s.value.trim().length === 0 || i.value.trim().length === 0;
+  };
+  return s.addEventListener("input", w), i.addEventListener("input", w), u.addEventListener("click", async () => {
+    const h = s.value.trim(), k = i.value.trim();
+    if (!h || !k) return;
+    u.disabled = !0, u.textContent = "Sending…", Y(h);
+    const E = {
+      commentId: e,
+      authorName: h,
+      text: k,
+      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);
+    } 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;
+}
+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">
+      <div class="ufp-detail-image-wrap">
+        <img class="ufp-detail-screenshot" src="${t.screenshotUrl}" alt="Page screenshot" />
+        <svg class="ufp-detail-annotation-svg" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <marker id="ufp-detail-arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+              <polygon points="0 0, 10 3.5, 0 7" fill="#6366f1" />
+            </marker>
+          </defs>
+        </svg>
+      </div>
+    </div>
+    <div class="ufp-detail-sidebar">
+      <div class="ufp-detail-header">
+        <button id="ufp-detail-back" style="
+          display:flex;align-items:center;gap:6px;
+          background:none;border:none;cursor:pointer;
+          font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+          font-size:13px;font-weight:600;color:#6b7280;padding:4px 0;
+        ">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <polyline points="15 18 9 12 15 6"/>
+          </svg>
+          Back to comments
+        </button>
+        ${t.resolved ? '<span class="ufp-resolved-badge">Resolved</span>' : ""}
+      </div>
+      <div class="ufp-detail-body">
+        <div class="ufp-detail-comment">
+          <div class="ufp-comment-meta">
+            <div class="ufp-avatar">${F(t.authorName)}</div>
+            <div>
+              <div class="ufp-comment-author">${A(t.authorName)}</div>
+              <div class="ufp-comment-time">${W(t.createdAt)}</div>
+            </div>
+          </div>
+          <div class="ufp-detail-comment-text">${A(t.text)}</div>
+          <div class="ufp-detail-actions" id="ufp-detail-actions"></div>
+        </div>
+        <div id="ufp-detail-replies"></div>
+      </div>
+    </div>
+  `, e.appendChild(p), p.querySelector("#ufp-detail-back").addEventListener("click", () => {
+    p.remove(), b({ panelOpen: !0 });
+  });
+  const s = p.querySelector("#ufp-detail-actions");
+  if (t.resolved) {
+    const f = document.createElement("button");
+    f.className = "ufp-btn ufp-btn-ghost", f.style.fontSize = "13px", f.innerHTML = `
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+        style="vertical-align:middle;margin-right:4px"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg>
+      Reopen
+    `, f.addEventListener("click", async () => {
+      f.disabled = !0, f.textContent = "Reopening…", await n.updateComment(t.id, { resolved: !1 }), a(t.id), p.remove(), b({ panelOpen: !0 });
+    }), s.appendChild(f);
+  } else {
+    const f = document.createElement("button");
+    f.className = "ufp-btn ufp-btn-primary", f.style.fontSize = "13px", f.innerHTML = `
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+        style="vertical-align:middle;margin-right:4px"><polyline points="20 6 9 17 4 12"/></svg>
+      Mark Resolved
+    `, f.addEventListener("click", async () => {
+      f.disabled = !0, f.textContent = "Resolving…", await n.updateComment(t.id, { resolved: !0 }), o(t.id), p.remove(), b({ 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 }));
+  }), 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);
+  });
+  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) => {
+      m.setAttribute("marker-end", "url(#ufp-detail-arrowhead)");
+    });
+  };
+  h.complete && h.naturalWidth > 0 ? E() : h.addEventListener("load", E);
+}
+function pe(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;">
+        <button id="ufp-new-feedback" class="ufp-btn ufp-btn-primary" style="font-size:13px;padding:7px 14px;display:flex;align-items:center;gap:5px;">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          New
+        </button>
+        <button class="ufp-btn-icon" id="ufp-panel-close" title="Close panel">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div class="ufp-filter-tabs">
+      <button class="ufp-filter-tab active" data-filter="open">Open</button>
+      <button class="ufp-filter-tab" data-filter="resolved">Resolved</button>
+    </div>
+    <div class="ufp-panel-list" id="ufp-comment-list"></div>
+  `, e.appendChild(n), n.querySelector("#ufp-panel-close").addEventListener("click", () => {
+    b({ panelOpen: !1 });
+  }), n.querySelector("#ufp-new-feedback").addEventListener("click", () => {
+    b({ 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"), b({ filter: l.dataset.filter });
+    });
+  });
+  const o = n.querySelector("#ufp-comment-list"), a = /* @__PURE__ */ new Map(), d = async (l, p) => {
+    const s = l.filter((i) => p === "open" ? !i.resolved : i.resolved);
+    if (o.innerHTML = "", s.length === 0) {
+      o.innerHTML = `
+        <div class="ufp-panel-empty">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.4">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+          </svg>
+          <span>No ${p} comments yet</span>
+          ${p === "open" ? '<span style="font-size:12px;color:#9ca3af;">Click <strong>New</strong> to add feedback</span>' : ""}
+        </div>
+      `;
+      return;
+    }
+    for (const i of s) {
+      if (!a.has(i.id))
+        try {
+          a.set(i.id, await t.getReplies(i.id));
+        } catch {
+          a.set(i.id, []);
+        }
+      o.appendChild(
+        de(i, a, e, t)
+      );
+    }
+  };
+  return P(async (l) => {
+    n.classList.toggle("open", l.panelOpen), l.panelOpen && await d(l.comments, l.filter);
+  }), n;
+}
+function de(e, t, r, n, o) {
+  const a = t.get(e.id) ?? [], d = document.createElement("div");
+  return d.className = "ufp-comment-card", d.dataset.id = e.id, d.innerHTML = `
+    <div class="ufp-comment-card-header">
+      <div class="ufp-comment-meta">
+        <div class="ufp-avatar">${F(e.authorName)}</div>
+        <div>
+          <div class="ufp-comment-author">${A(e.authorName)}</div>
+          <div class="ufp-comment-time">${W(e.createdAt)}</div>
+        </div>
+      </div>
+      ${e.resolved ? '<span class="ufp-resolved-badge">Resolved</span>' : ""}
+    </div>
+    <img class="ufp-comment-thumbnail" src="${e.screenshotUrl}" alt="Screenshot" loading="lazy" />
+    <div class="ufp-comment-text">${A(e.text)}</div>
+    <div class="ufp-comment-footer">
+      <span class="ufp-reply-count">
+        ${a.length > 0 ? `${a.length} ${a.length === 1 ? "reply" : "replies"}` : "No replies yet — click to reply"}
+      </span>
+    </div>
+  `, d.addEventListener("click", async () => {
+    let l = t.get(e.id) ?? [];
+    try {
+      l = await n.getReplies(e.id), t.set(e.id, l);
+    } catch (p) {
+      console.error("[ui-feedback-plugin] Failed to fetch replies:", p);
+    }
+    le(
+      r,
+      e,
+      l,
+      n,
+      (p) => {
+        const s = L();
+        b({ 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) });
+      },
+      (p) => {
+        const s = L();
+        b({ 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] });
+      }
+    );
+  }), d;
+}
+async function ce() {
+  try {
+    const e = await ue();
+    return await fe(e);
+  } catch {
+    return me();
+  }
+}
+async function ue() {
+  return (await import("./html2canvas.esm-d2sM-0Wm.mjs")).default;
+}
+async function fe(e) {
+  const t = window.scrollX, r = window.scrollY;
+  window.scrollTo(0, 0);
+  try {
+    return (await e(document.body, {
+      allowTaint: !0,
+      useCORS: !0,
+      logging: !1,
+      scale: Math.min(window.devicePixelRatio, 2),
+      width: document.documentElement.scrollWidth,
+      height: document.documentElement.scrollHeight,
+      windowWidth: document.documentElement.scrollWidth,
+      windowHeight: document.documentElement.scrollHeight,
+      x: 0,
+      y: 0,
+      ignoreElements: (o) => o.tagName === "UI-FEEDBACK-PLUGIN"
+    })).toDataURL("image/png");
+  } finally {
+    window.scrollTo(t, r);
+  }
+}
+function me() {
+  const e = document.createElement("canvas");
+  e.width = window.innerWidth, e.height = window.innerHeight;
+  const t = e.getContext("2d");
+  return t.fillStyle = "#f3f4f6", t.fillRect(0, 0, e.width, e.height), t.fillStyle = "#9ca3af", t.font = "16px -apple-system, sans-serif", t.textAlign = "center", t.fillText("Screenshot unavailable", e.width / 2, e.height / 2), e.toDataURL("image/png");
+}
+const q = "ui-feedback-plugin";
+async function he(e) {
+  const t = e.database;
+  if (t.provider === "firebase") {
+    const { FirebaseAdapter: r } = await import("./firebase-BGU5KpRU.mjs");
+    return new r(t);
+  }
+  if (t.provider === "supabase") {
+    const { SupabaseAdapter: r } = await import("./supabase-BUHP2OkK.mjs");
+    return new r(t.url, t.anonKey);
+  }
+  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;
+  }
+  throw new Error("[ui-feedback-plugin] Unknown screenshot storage provider");
+}
+function be(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 {
+    constructor() {
+      super();
+      H(this, "shadow");
+      H(this, "dbAdapter");
+      H(this, "screenshotAdapter");
+      H(this, "unsubscribe", null);
+      this.shadow = this.attachShadow({ mode: "open" });
+    }
+    async connectedCallback() {
+      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);
+      } catch (i) {
+        console.error("[ui-feedback-plugin] Failed to initialize adapters:", i);
+        return;
+      }
+      this.mount();
+    }
+    disconnectedCallback() {
+      var s;
+      (s = this.unsubscribe) == null || s.call(this);
+    }
+    mount() {
+      const s = U(window.location.href);
+      pe(this.shadow, this.dbAdapter, () => this.startAnnotation()), ee(
+        this.shadow,
+        n,
+        () => this.startAnnotation(),
+        () => b({ panelOpen: !L().panelOpen })
+      ), this.unsubscribe = this.dbAdapter.subscribeToComments(s, r, (i) => {
+        b({ comments: i });
+      });
+    }
+    async startAnnotation() {
+      let s = X();
+      if (!s && (s = await ne(this.shadow), !s))
+        return;
+      b({ active: !0, panelOpen: !1 });
+      const i = await ie(this.shadow);
+      if (!i) {
+        b({ active: !1 });
+        return;
+      }
+      b({ 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 });
+    }
+    async saveComment(s, i, u) {
+      const w = U(window.location.href), h = {
+        shapes: u,
+        pageWidth: document.documentElement.scrollWidth,
+        pageHeight: document.documentElement.scrollHeight
+      };
+      this.style.visibility = "hidden";
+      let k;
+      try {
+        k = await ce();
+      } finally {
+        this.style.visibility = "";
+      }
+      const E = {
+        pageUrl: w,
+        projectKey: r,
+        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 });
+    }
+    showToast(s, i) {
+      const u = this.shadow.querySelector(".ufp-toast");
+      u == null || u.remove();
+      const w = { info: "#6366f1", success: "#10b981", error: "#ef4444" }, h = document.createElement("div");
+      h.className = "ufp-toast", h.style.cssText = `
+        position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
+        background:${w[i]};color:white;padding:10px 20px;border-radius:8px;
+        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+        font-size:13px;font-weight:500;z-index:2147483647;
+        box-shadow:0 4px 12px rgba(0,0,0,0.2);pointer-events:none;
+        max-width:360px;text-align:center;
+      `, h.textContent = s, this.shadow.appendChild(h), setTimeout(() => h.remove(), i === "error" ? 6e3 : 2500);
+    }
+  }
+  customElements.define(q, o);
+  const a = document.createElement(q);
+  return document.body.appendChild(a), () => a.remove();
+}
+export {
+  be as initFeedbackPlugin
+};
+//# sourceMappingURL=ui-feedback-plugin.es.js.map