@ourroadmaps/web-sdk 1.4.2 → 1.5.0

package/dist/{chunk-Z4GLX2BM.cjs → chunk-VXDCDIG3.cjs}

@@ -5,7 +5,7 @@ var chunk4DE2IREA_cjs = require('./chunk-4DE2IREA.cjs');
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 // src/review/api.ts
 var API_URL = (() => {
-  if (typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('chunk-Z4GLX2BM.cjs', document.baseURI).href)) }) !== "undefined" && undefined?.VITE_API_URL) {
+  if (typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('chunk-VXDCDIG3.cjs', document.baseURI).href)) }) !== "undefined" && undefined?.VITE_API_URL) {
     return undefined.VITE_API_URL;
   }
   return "https://api.ourroadmaps.com";
@@ -18,6 +18,17 @@ async function validateToken(token) {
   const body = await res.json();
   return body.data;
 }
+async function identify(token, name, email) {
+  const body = {};
+  if (name) body.name = name;
+  if (email) body.email = email;
+  const res = await fetch(`${API_URL}/v1/prototype-review/${token}/identify`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(body)
+  });
+  if (!res.ok) throw new ReviewError("error", "Failed to identify");
+}
 async function submitComment(token, comment) {
   const res = await fetch(`${API_URL}/v1/prototype-review/${token}/comments`, {
     method: "POST",
@@ -228,6 +239,242 @@ var REVIEW_STYLES = `
   box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.2);
 }
 
+/* \u2500\u2500\u2500 Mode Toggle \u2500\u2500\u2500 */
+.review-mode-toggle {
+  display: flex;
+  border-radius: 6px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.review-mode-btn {
+  padding: 5px 10px;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  transition: background 0.15s ease, color 0.15s ease;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+
+.review-mode-btn:hover {
+  color: rgba(255, 255, 255, 0.85);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.review-mode-btn--active {
+  background: #7c3aed;
+  color: #fff;
+}
+
+.review-mode-btn--active:hover {
+  background: #6d28d9;
+  color: #fff;
+}
+
+/* \u2500\u2500\u2500 Comments Panel \u2500\u2500\u2500 */
+.review-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 320px;
+  background: #111;
+  color: #fff;
+  font-family: system-ui, -apple-system, sans-serif;
+  z-index: 10001;
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  transform: translateX(100%);
+  transition: transform 0.2s ease;
+}
+
+.review-panel--open {
+  transform: translateX(0);
+}
+
+.review-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+.review-panel-header h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.review-panel-close {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.review-panel-close:hover {
+  color: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.review-panel-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+
+.review-panel-section {
+  margin-bottom: 16px;
+}
+
+.review-panel-section-header {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgba(255, 255, 255, 0.4);
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.review-panel-section-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgba(255, 255, 255, 0.4);
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  background: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  transition: color 0.15s ease;
+}
+
+.review-panel-section-toggle:hover {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.review-panel-section-toggle svg {
+  transition: transform 0.15s ease;
+}
+
+.review-panel-section-toggle--expanded svg {
+  transform: rotate(90deg);
+}
+
+.review-panel-page-label {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.3);
+  margin: 10px 0 6px;
+  font-family: monospace;
+}
+
+.review-panel-page-label:first-child {
+  margin-top: 0;
+}
+
+/* \u2500\u2500\u2500 Comment Item \u2500\u2500\u2500 */
+.review-panel-comment {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-bottom: 6px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.review-panel-comment:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.review-panel-comment-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.review-panel-pin-badge {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #7c3aed;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.review-panel-general-badge {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.review-panel-comment-author {
+  font-size: 12px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.review-panel-comment-text {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.6);
+  line-height: 1.4;
+  margin-bottom: 4px;
+}
+
+.review-panel-comment-time {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.review-panel-empty {
+  text-align: center;
+  padding: 24px 16px;
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 13px;
+}
+
+.review-panel-loading {
+  text-align: center;
+  padding: 24px 16px;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 13px;
+}
+
 /* \u2500\u2500\u2500 Comment Card \u2500\u2500\u2500 */
 .review-comment-card {
   position: fixed;
@@ -408,6 +655,81 @@ var REVIEW_STYLES = `
   backdrop-filter: blur(8px);
 }
 
+/* \u2500\u2500\u2500 Name Entry Overlay \u2500\u2500\u2500 */
+.review-name-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10003;
+  backdrop-filter: blur(2px);
+}
+
+.review-name-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 28px 32px;
+  font-family: system-ui, -apple-system, sans-serif;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+  max-width: 360px;
+  width: 90%;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.review-name-card h3 {
+  margin: 0 0 4px;
+  font-size: 17px;
+  font-weight: 600;
+  color: #111;
+}
+
+.review-name-card p {
+  margin: 0 0 20px;
+  font-size: 14px;
+  color: #666;
+}
+
+.review-name-card label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: #374151;
+  margin-bottom: 6px;
+}
+
+.review-name-card input {
+  width: 100%;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-family: inherit;
+  font-size: 14px;
+  color: #1f2937;
+  background: #fafafa;
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.review-name-card input:focus {
+  border-color: #7c3aed;
+  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
+  background: #fff;
+}
+
+.review-name-card input::placeholder {
+  color: #9ca3af;
+}
+
+.review-name-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 20px;
+}
+
 /* \u2500\u2500\u2500 Reduced Motion \u2500\u2500\u2500 */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
@@ -689,6 +1011,173 @@ var PageNavigationListener = class {
   }
 };
 
+// src/review/CommentListPanel.ts
+var CommentListPanel = class {
+  constructor(token, shadowRoot, pinManager) {
+    this.token = token;
+    this.shadowRoot = shadowRoot;
+    this.pinManager = pinManager;
+    chunk4DE2IREA_cjs.__publicField(this, "panelEl");
+    chunk4DE2IREA_cjs.__publicField(this, "bodyEl", null);
+    chunk4DE2IREA_cjs.__publicField(this, "isOpen", false);
+    chunk4DE2IREA_cjs.__publicField(this, "allPagesExpanded", false);
+    chunk4DE2IREA_cjs.__publicField(this, "comments", []);
+    this.panelEl = document.createElement("div");
+    this.panelEl.className = "review-panel";
+    this.panelEl.innerHTML = `
+      <div class="review-panel-header">
+        <h3>Comments</h3>
+        <button class="review-panel-close" title="Close">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+        </button>
+      </div>
+      <div class="review-panel-body"></div>
+    `;
+    this.bodyEl = this.panelEl.querySelector(".review-panel-body");
+    this.panelEl.querySelector(".review-panel-close")?.addEventListener("click", () => this.close());
+    this.shadowRoot.appendChild(this.panelEl);
+  }
+  async toggle() {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      await this.open();
+    }
+  }
+  async open() {
+    this.isOpen = true;
+    this.panelEl.classList.add("review-panel--open");
+    await this.refresh();
+  }
+  close() {
+    this.isOpen = false;
+    this.panelEl.classList.remove("review-panel--open");
+    this.pinManager.clearHighlight();
+  }
+  async refresh() {
+    if (!this.isOpen || !this.bodyEl) return;
+    this.bodyEl.innerHTML = '<div class="review-panel-loading">Loading comments...</div>';
+    try {
+      this.comments = await fetchComments(this.token);
+      this.render();
+    } catch {
+      this.bodyEl.innerHTML = '<div class="review-panel-empty">Failed to load comments</div>';
+    }
+  }
+  render() {
+    if (!this.bodyEl) return;
+    const withText = this.comments.filter((c) => c.commentText);
+    if (withText.length === 0) {
+      this.bodyEl.innerHTML = '<div class="review-panel-empty">No comments yet</div>';
+      return;
+    }
+    const currentPage = getCurrentPageId();
+    const currentPageComments = withText.filter((c) => c.pageUrl === currentPage);
+    const otherComments = withText.filter((c) => c.pageUrl !== currentPage);
+    let html = "";
+    html += '<div class="review-panel-section">';
+    html += `<div class="review-panel-section-header">This Page</div>`;
+    if (currentPageComments.length === 0) {
+      html += '<div class="review-panel-empty" style="padding:8px 0;">No comments on this page</div>';
+    } else {
+      html += this.renderComments(currentPageComments);
+    }
+    html += "</div>";
+    if (otherComments.length > 0) {
+      const groups = this.groupByPage(otherComments);
+      html += '<div class="review-panel-section">';
+      html += `<button class="review-panel-section-toggle ${this.allPagesExpanded ? "review-panel-section-toggle--expanded" : ""}" data-action="toggle-all">
+        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+        All Pages (${otherComments.length} comment${otherComments.length !== 1 ? "s" : ""})
+      </button>`;
+      if (this.allPagesExpanded) {
+        html += '<div class="review-panel-all-pages">';
+        for (const group of groups) {
+          html += `<div class="review-panel-page-label">${this.escapeHtml(this.formatPageUrl(group.pageUrl))}</div>`;
+          html += this.renderComments(group.comments);
+        }
+        html += "</div>";
+      }
+      html += "</div>";
+    }
+    this.bodyEl.innerHTML = html;
+    this.attachEventListeners();
+  }
+  renderComments(comments) {
+    return comments.map((c) => {
+      const badge = c.pinNumber != null ? `<span class="review-panel-pin-badge">${c.pinNumber}</span>` : `<span class="review-panel-general-badge"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>`;
+      const author = c.reviewerName || "Anonymous";
+      const text = c.commentText || "";
+      const time = this.formatTime(c.createdAt);
+      const pinAttr = c.pinNumber != null ? `data-pin="${c.pinNumber}"` : "";
+      const pageAttr = c.pageUrl ? `data-page="${this.escapeAttr(c.pageUrl)}"` : "";
+      return `<div class="review-panel-comment" ${pinAttr} ${pageAttr}>
+          <div class="review-panel-comment-header">
+            ${badge}
+            <span class="review-panel-comment-author">${this.escapeHtml(author)}</span>
+          </div>
+          <div class="review-panel-comment-text">${this.escapeHtml(text)}</div>
+          <div class="review-panel-comment-time">${time}</div>
+        </div>`;
+    }).join("");
+  }
+  attachEventListeners() {
+    if (!this.bodyEl) return;
+    this.bodyEl.querySelector('[data-action="toggle-all"]')?.addEventListener("click", () => {
+      this.allPagesExpanded = !this.allPagesExpanded;
+      this.render();
+    });
+    this.bodyEl.querySelectorAll(".review-panel-comment[data-pin]").forEach((el) => {
+      el.addEventListener("click", () => {
+        const pinNumber = Number(el.dataset.pin);
+        if (pinNumber) {
+          this.pinManager.highlightPin(pinNumber);
+        }
+      });
+    });
+  }
+  groupByPage(comments) {
+    const groups = /* @__PURE__ */ new Map();
+    for (const c of comments) {
+      const key = c.pageUrl || "(unknown)";
+      const arr = groups.get(key) || [];
+      arr.push(c);
+      groups.set(key, arr);
+    }
+    return Array.from(groups.entries()).map(([pageUrl, comments2]) => ({ pageUrl, comments: comments2 }));
+  }
+  formatPageUrl(url) {
+    try {
+      const u = new URL(url, "https://placeholder");
+      return u.pathname + u.search + u.hash;
+    } catch {
+      return url || "/";
+    }
+  }
+  formatTime(iso) {
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime())) return "";
+    const now = Date.now();
+    const diffMs = Math.max(0, now - date.getTime());
+    const diffMin = Math.floor(diffMs / 6e4);
+    if (diffMin < 1) return "just now";
+    if (diffMin < 60) return `${diffMin}m ago`;
+    const diffHr = Math.floor(diffMin / 60);
+    if (diffHr < 24) return `${diffHr}h ago`;
+    const diffDays = Math.floor(diffHr / 24);
+    return `${diffDays}d ago`;
+  }
+  escapeHtml(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  escapeAttr(str) {
+    return str.replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+  }
+  destroy() {
+    this.panelEl.remove();
+  }
+};
+
 // src/review/ReviewMode.ts
 var ReviewMode = class {
   constructor(token, shadowRoot, initData) {
@@ -703,15 +1192,22 @@ var ReviewMode = class {
     chunk4DE2IREA_cjs.__publicField(this, "toolbarEl", null);
     chunk4DE2IREA_cjs.__publicField(this, "clickHandler", null);
     chunk4DE2IREA_cjs.__publicField(this, "pageListener", null);
+    chunk4DE2IREA_cjs.__publicField(this, "mode", "comment");
+    chunk4DE2IREA_cjs.__publicField(this, "keydownHandler", null);
+    chunk4DE2IREA_cjs.__publicField(this, "commentPanel", null);
     this.pinManager = new PinManager();
     this.commentCard = new CommentCard(shadowRoot);
     this.nextPinNumber = initData.nextPinNumber;
   }
   async init() {
+    if (!this.initData.reviewer.name) {
+      await this.showNameEntry();
+    }
     document.body.style.cursor = "crosshair";
     this.pinManager.mount();
     this.showPrompt();
     this.renderToolbar();
+    this.commentPanel = new CommentListPanel(this.token, this.shadowRoot, this.pinManager);
     await this.loadExistingPins();
     this.pinManager.filterByPage(getCurrentPageId());
     this.pageListener = new PageNavigationListener((pageId) => {
@@ -720,6 +1216,15 @@ var ReviewMode = class {
     this.pageListener.start();
     this.clickHandler = (e) => this.handleClick(e);
     document.addEventListener("click", this.clickHandler, true);
+    this.keydownHandler = (e) => {
+      const tag = e.target?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+      if (e.target?.isContentEditable) return;
+      if (e.key === "c" && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        this.setMode(this.mode === "comment" ? "navigate" : "comment");
+      }
+    };
+    document.addEventListener("keydown", this.keydownHandler);
   }
   showPrompt() {
     this.promptEl = document.createElement("div");
@@ -737,6 +1242,59 @@ var ReviewMode = class {
       this.promptEl = null;
     }
   }
+  showNameEntry() {
+    return new Promise((resolve) => {
+      const overlay = document.createElement("div");
+      overlay.className = "review-name-overlay";
+      overlay.innerHTML = `
+        <div class="review-name-card">
+          <h3>Welcome to the review</h3>
+          <p>Optionally enter your name so the team knows who left the feedback.</p>
+          <div style="margin-bottom:12px;">
+            <label>Name</label>
+            <input type="text" class="review-name-input" placeholder="Your name (optional)" />
+          </div>
+          <div>
+            <label>Email</label>
+            <input type="email" class="review-email-input" placeholder="Your email (optional)" />
+          </div>
+          <div class="review-name-actions">
+            <button class="review-btn review-btn--cancel review-name-skip">Skip</button>
+            <button class="review-btn review-btn--submit review-name-continue">Continue</button>
+          </div>
+        </div>
+      `;
+      this.shadowRoot.appendChild(overlay);
+      const nameInput = overlay.querySelector(".review-name-input");
+      const emailInput = overlay.querySelector(".review-email-input");
+      const skipBtn = overlay.querySelector(".review-name-skip");
+      const continueBtn = overlay.querySelector(".review-name-continue");
+      const finish = async () => {
+        const name = nameInput.value.trim() || void 0;
+        const email = emailInput.value.trim() || void 0;
+        try {
+          await identify(this.token, name, email);
+        } catch {
+        }
+        overlay.remove();
+        resolve();
+      };
+      skipBtn.addEventListener("click", () => {
+        identify(this.token).catch(() => {
+        });
+        overlay.remove();
+        resolve();
+      });
+      continueBtn.addEventListener("click", finish);
+      nameInput.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") finish();
+      });
+      emailInput.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") finish();
+      });
+      nameInput.focus();
+    });
+  }
   renderToolbar() {
     this.toolbarEl = document.createElement("div");
     this.toolbarEl.className = "review-toolbar";
@@ -746,15 +1304,41 @@ var ReviewMode = class {
   updateToolbar() {
     if (!this.toolbarEl) return;
     const pinCount = this.nextPinNumber - 1;
+    const isNav = this.mode === "navigate";
+    const isComment = this.mode === "comment";
     this.toolbarEl.innerHTML = `
+      <div class="review-mode-toggle">
+        <button class="review-mode-btn ${isNav ? "review-mode-btn--active" : ""}" data-mode="navigate">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+          Navigate
+        </button>
+        <button class="review-mode-btn ${isComment ? "review-mode-btn--active" : ""}" data-mode="comment">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0Z"/><circle cx="12" cy="10" r="3"/></svg>
+          Comment
+        </button>
+      </div>
       <span style="font-weight:500;">${this.initData.session.name}</span>
       <span style="opacity:0.7;">${pinCount} pin${pinCount !== 1 ? "s" : ""}</span>
-      <button class="review-btn review-btn--submit" style="margin-left:auto;padding:6px 12px;font-size:13px;">General Comment</button>
+      <button class="review-btn review-btn--submit" data-action="general" style="margin-left:auto;padding:6px 12px;font-size:13px;">General Comment</button>
+      <button class="review-mode-btn" data-action="panel" title="View all comments" style="padding:5px 8px;">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
+      </button>
     `;
-    this.toolbarEl.querySelector("button")?.addEventListener("click", (e) => {
+    this.toolbarEl.querySelectorAll("[data-mode]").forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const mode = btn.dataset.mode;
+        this.setMode(mode);
+      });
+    });
+    this.toolbarEl.querySelector('[data-action="general"]')?.addEventListener("click", (e) => {
       e.stopPropagation();
       this.handleGeneralComment();
     });
+    this.toolbarEl.querySelector('[data-action="panel"]')?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggleCommentPanel();
+    });
   }
   async loadExistingPins() {
     try {
@@ -769,6 +1353,7 @@ var ReviewMode = class {
     }
   }
   handleClick(e) {
+    if (this.mode === "navigate") return;
     const path = e.composedPath();
     if (path.some((el) => el instanceof HTMLElement && el.closest?.("#ourroadmaps-review"))) return;
     if (this.pendingPinNumber != null) return;
@@ -791,6 +1376,7 @@ var ReviewMode = class {
         this.nextPinNumber++;
         this.updateToolbar();
         this.showToast("Comment saved");
+        this.commentPanel?.refresh();
       },
       onCancel: () => {
         this.pinManager.removePin(pinNumber);
@@ -800,6 +1386,14 @@ var ReviewMode = class {
     e.preventDefault();
     e.stopPropagation();
   }
+  setMode(newMode) {
+    this.mode = newMode;
+    document.body.style.cursor = newMode === "comment" ? "crosshair" : "";
+    this.updateToolbar();
+  }
+  toggleCommentPanel() {
+    this.commentPanel?.toggle();
+  }
   handleGeneralComment() {
     if (this.pendingPinNumber != null) return;
     this.commentCard.showForGeneral({
@@ -811,6 +1405,7 @@ var ReviewMode = class {
           pageUrl: getCurrentPageId()
         });
         this.showToast("Comment saved");
+        this.commentPanel?.refresh();
       },
       onCancel: () => {
       }
@@ -829,9 +1424,13 @@ var ReviewMode = class {
       document.removeEventListener("click", this.clickHandler, true);
     }
     this.pageListener?.destroy();
+    if (this.keydownHandler) {
+      document.removeEventListener("keydown", this.keydownHandler);
+    }
     this.dismissPrompt();
     this.toolbarEl?.remove();
     this.commentCard.hide();
+    this.commentPanel?.destroy();
     this.pinManager.destroy();
   }
 };
@@ -1170,5 +1769,5 @@ var Review = class {
 exports.Review = Review;
 exports.getStoredToken = getStoredToken;
 exports.storeToken = storeToken;
-//# sourceMappingURL=chunk-Z4GLX2BM.cjs.map
-//# sourceMappingURL=chunk-Z4GLX2BM.cjs.map
+//# sourceMappingURL=chunk-VXDCDIG3.cjs.map
+//# sourceMappingURL=chunk-VXDCDIG3.cjs.map