@ourroadmaps/web-sdk 0.3.1 → 1.1.0

package/dist/chunk-2Q3BAT55.js

@@ -0,0 +1,904 @@
+import { __publicField } from './chunk-V6TY7KAL.js';
+
+// src/review/api.ts
+var API_URL = (() => {
+  if (typeof import.meta !== "undefined" && import.meta.env?.VITE_API_URL) {
+    return import.meta.env.VITE_API_URL;
+  }
+  return "https://api.ourroadmaps.com";
+})();
+async function validateToken(token) {
+  const res = await fetch(`${API_URL}/v1/prototype-review/${token}`);
+  if (res.status === 410) throw new ReviewError("expired", "This feedback session has expired");
+  if (res.status === 404) throw new ReviewError("invalid", "This review link is not valid");
+  if (!res.ok) throw new ReviewError("error", "Something went wrong");
+  const body = await res.json();
+  return body.data;
+}
+async function submitComment(token, comment) {
+  const res = await fetch(`${API_URL}/v1/prototype-review/${token}/comments`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(comment)
+  });
+  if (!res.ok) throw new ReviewError("error", "Failed to submit comment");
+  const body = await res.json();
+  return body.data;
+}
+async function fetchComments(token) {
+  const res = await fetch(`${API_URL}/v1/prototype-review/${token}/comments`);
+  if (!res.ok) throw new ReviewError("error", "Failed to load comments");
+  const body = await res.json();
+  return body.data;
+}
+var ReviewError = class extends Error {
+  constructor(code, message) {
+    super(message);
+    this.code = code;
+    this.name = "ReviewError";
+  }
+};
+
+// src/review/ElementCapture.ts
+function captureElementContext(clientX, clientY) {
+  const el = document.elementFromPoint(clientX, clientY);
+  const docEl = document.documentElement;
+  const pinX = (clientX + window.scrollX) / docEl.scrollWidth * 100;
+  const pinY = (clientY + window.scrollY) / docEl.scrollHeight * 100;
+  if (!el || el === document.body || el === docEl) {
+    return {
+      pinX,
+      pinY,
+      element: {
+        selector: "body",
+        tag: "body",
+        text: "",
+        ariaLabel: null,
+        className: "",
+        boundingBox: { x: 0, y: 0, w: docEl.scrollWidth, h: docEl.scrollHeight }
+      },
+      context: {
+        parentTag: "",
+        parentText: "",
+        grandparentTag: "",
+        siblings: [],
+        nearbyText: ""
+      },
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight
+    };
+  }
+  const rect = el.getBoundingClientRect();
+  return {
+    pinX,
+    pinY,
+    element: {
+      selector: buildSelector(el),
+      tag: el.tagName.toLowerCase(),
+      text: getDirectText(el).slice(0, 200),
+      ariaLabel: el.getAttribute("aria-label"),
+      className: el.className && typeof el.className === "string" ? el.className : "",
+      boundingBox: {
+        x: Math.round(rect.x),
+        y: Math.round(rect.y),
+        w: Math.round(rect.width),
+        h: Math.round(rect.height)
+      }
+    },
+    context: {
+      parentTag: el.parentElement ? `${el.parentElement.tagName.toLowerCase()}${classStr(el.parentElement)}` : "",
+      parentText: el.parentElement ? getDirectText(el.parentElement).slice(0, 100) : "",
+      grandparentTag: el.parentElement?.parentElement ? `${el.parentElement.parentElement.tagName.toLowerCase()}${classStr(el.parentElement.parentElement)}` : "",
+      siblings: getSiblingsSummary(el),
+      nearbyText: getNearbyText(el).slice(0, 200)
+    },
+    viewportWidth: window.innerWidth,
+    viewportHeight: window.innerHeight
+  };
+}
+function buildSelector(el) {
+  const parts = [];
+  let current = el;
+  while (current && current !== document.body) {
+    if (current.id) {
+      parts.unshift(`#${current.id}`);
+      break;
+    }
+    let part = current.tagName.toLowerCase();
+    if (current.className && typeof current.className === "string") {
+      const classes = current.className.trim().split(/\s+/).slice(0, 2).join(".");
+      if (classes) part += `.${classes}`;
+    }
+    parts.unshift(part);
+    current = current.parentElement;
+  }
+  return parts.join(" > ");
+}
+function getDirectText(el) {
+  let text = "";
+  for (const node of el.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += node.textContent?.trim() || "";
+    }
+  }
+  return text.trim() || el.textContent?.trim().slice(0, 200) || "";
+}
+function classStr(el) {
+  if (!el.className || typeof el.className !== "string") return "";
+  const cls = el.className.trim().split(/\s+/).slice(0, 2).join(".");
+  return cls ? `.${cls}` : "";
+}
+function getSiblingsSummary(el) {
+  if (!el.parentElement) return [];
+  const siblings = [];
+  for (const child of el.parentElement.children) {
+    if (child === el) continue;
+    const tag = child.tagName.toLowerCase();
+    const text = (child.textContent?.trim() || "").slice(0, 50);
+    siblings.push(text ? `${tag}:${text}` : tag);
+    if (siblings.length >= 4) break;
+  }
+  return siblings;
+}
+function getNearbyText(el) {
+  let current = el.parentElement;
+  let depth = 0;
+  while (current && depth < 3) {
+    const text = getDirectText(current);
+    if (text && text !== getDirectText(el)) return text;
+    current = current.parentElement;
+    depth++;
+  }
+  return "";
+}
+
+// src/review/styles.ts
+var REVIEW_STYLES = `
+:host {
+  all: initial;
+}
+
+/* \u2500\u2500\u2500 Pin Container (rendered outside shadow DOM) \u2500\u2500\u2500 */
+.pin-container {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10000;
+}
+
+/* \u2500\u2500\u2500 Pin Marker \u2500\u2500\u2500 */
+.review-pin {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #7c3aed;
+  color: #fff;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(-50%, -50%);
+  pointer-events: auto;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  user-select: none;
+  z-index: 1;
+}
+
+.review-pin:hover {
+  transform: translate(-50%, -50%) scale(1.15);
+  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.4);
+}
+
+.review-pin--other {
+  opacity: 0.5;
+}
+
+.review-pin--highlighted {
+  transform: translate(-50%, -50%) scale(1.2);
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3), 0 3px 10px rgba(124, 58, 237, 0.4);
+  z-index: 2;
+}
+
+/* \u2500\u2500\u2500 Toolbar \u2500\u2500\u2500 */
+.review-toolbar {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  border-radius: 12px 12px 0 0;
+  padding: 10px 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  z-index: 10001;
+  backdrop-filter: blur(8px);
+  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.2);
+}
+
+/* \u2500\u2500\u2500 Comment Card \u2500\u2500\u2500 */
+.review-comment-card {
+  position: fixed;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.08);
+  width: 300px;
+  padding: 16px;
+  z-index: 10002;
+  font-family: system-ui, -apple-system, sans-serif;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+/* \u2500\u2500\u2500 Comment Textarea \u2500\u2500\u2500 */
+.review-comment-input {
+  width: 100%;
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  padding: 10px 12px;
+  resize: vertical;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #1f2937;
+  background: #fafafa;
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.review-comment-input:focus {
+  border-color: #7c3aed;
+  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
+  background: #fff;
+}
+
+.review-comment-input::placeholder {
+  color: #9ca3af;
+}
+
+.review-comment-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* \u2500\u2500\u2500 Comment Actions \u2500\u2500\u2500 */
+.review-comment-actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+/* \u2500\u2500\u2500 Buttons \u2500\u2500\u2500 */
+.review-btn {
+  padding: 6px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  border: none;
+  transition: background 0.15s ease, opacity 0.15s ease;
+}
+
+.review-btn--cancel {
+  color: #6b7280;
+  background: transparent;
+}
+
+.review-btn--cancel:hover {
+  background: #f3f4f6;
+}
+
+.review-btn--submit {
+  background: #7c3aed;
+  color: #fff;
+}
+
+.review-btn--submit:hover {
+  background: #6d28d9;
+}
+
+.review-btn--submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* \u2500\u2500\u2500 Comment Error \u2500\u2500\u2500 */
+.review-comment-error {
+  color: #dc2626;
+  font-size: 12px;
+  margin-top: 8px;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+/* \u2500\u2500\u2500 Name Prompt \u2500\u2500\u2500 */
+.review-prompt {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  padding: 28px 32px;
+  z-index: 10002;
+  text-align: center;
+  font-family: system-ui, -apple-system, sans-serif;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  max-width: 360px;
+  width: 90%;
+}
+
+/* \u2500\u2500\u2500 Expired Overlay \u2500\u2500\u2500 */
+.review-expired-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10003;
+  backdrop-filter: blur(2px);
+}
+
+.review-expired-card {
+  background: #fff;
+  border-radius: 12px;
+  padding: 28px 32px;
+  text-align: center;
+  font-family: system-ui, -apple-system, sans-serif;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+  max-width: 400px;
+  width: 90%;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+/* \u2500\u2500\u2500 Toast \u2500\u2500\u2500 */
+.review-toast {
+  position: fixed;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 14px;
+  padding: 10px 20px;
+  border-radius: 8px;
+  z-index: 10003;
+  pointer-events: none;
+  animation: review-toast-fade 2.5s ease forwards;
+  backdrop-filter: blur(8px);
+}
+
+@keyframes review-toast-fade {
+  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
+  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
+  80% { opacity: 1; transform: translateX(-50%) translateY(0); }
+  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
+}
+
+/* \u2500\u2500\u2500 Tooltip \u2500\u2500\u2500 */
+.review-tooltip {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+  line-height: 1.4;
+  border-radius: 6px;
+  padding: 8px 12px;
+  max-width: 280px;
+  z-index: 10002;
+  pointer-events: none;
+  backdrop-filter: blur(8px);
+}
+
+/* \u2500\u2500\u2500 Reduced Motion \u2500\u2500\u2500 */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+`;
+var PIN_DOCUMENT_STYLES = `
+body {
+  position: relative !important;
+}
+
+.pin-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 100%;
+  pointer-events: none;
+  z-index: 10000;
+}
+
+.review-pin {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #7c3aed;
+  color: #fff;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 12px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translate(-50%, -50%);
+  pointer-events: auto;
+  cursor: pointer;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  user-select: none;
+  z-index: 1;
+}
+
+.review-pin:hover {
+  transform: translate(-50%, -50%) scale(1.15);
+  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.4);
+}
+
+.review-pin--other {
+  opacity: 0.5;
+}
+
+.review-pin--highlighted {
+  transform: translate(-50%, -50%) scale(1.2);
+  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3), 0 3px 10px rgba(124, 58, 237, 0.4);
+  z-index: 2;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .review-pin, .review-pin:hover, .review-pin--highlighted {
+    transition-duration: 0.01ms !important;
+  }
+}
+`;
+
+// src/review/PinManager.ts
+var STYLE_ID = "roadmaps-review-pin-styles";
+var PinManager = class {
+  constructor() {
+    __publicField(this, "container");
+    __publicField(this, "pins", /* @__PURE__ */ new Map());
+    __publicField(this, "styleEl", null);
+    this.container = document.createElement("div");
+    this.container.className = "pin-container";
+  }
+  mount() {
+    if (!document.getElementById(STYLE_ID)) {
+      this.styleEl = document.createElement("style");
+      this.styleEl.id = STYLE_ID;
+      this.styleEl.textContent = PIN_DOCUMENT_STYLES;
+      document.head.appendChild(this.styleEl);
+    }
+    document.body.appendChild(this.container);
+  }
+  addPin(pinNumber, x, y, isMine) {
+    const pin = document.createElement("div");
+    pin.className = isMine ? "review-pin" : "review-pin review-pin--other";
+    pin.textContent = String(pinNumber);
+    pin.style.left = `${x}%`;
+    pin.style.top = `${y}%`;
+    pin.dataset.pinNumber = String(pinNumber);
+    this.container.appendChild(pin);
+    this.pins.set(pinNumber, pin);
+  }
+  removePin(pinNumber) {
+    const pin = this.pins.get(pinNumber);
+    if (pin) {
+      pin.remove();
+      this.pins.delete(pinNumber);
+    }
+  }
+  highlightPin(pinNumber) {
+    for (const [num, el] of this.pins) {
+      el.classList.toggle("review-pin--highlighted", num === pinNumber);
+    }
+  }
+  clearHighlight() {
+    for (const el of this.pins.values()) {
+      el.classList.remove("review-pin--highlighted");
+    }
+  }
+  destroy() {
+    this.container.remove();
+    this.pins.clear();
+    if (this.styleEl) {
+      this.styleEl.remove();
+      this.styleEl = null;
+    } else {
+      document.getElementById(STYLE_ID)?.remove();
+    }
+  }
+};
+
+// src/review/CommentCard.ts
+var CommentCard = class {
+  constructor(shadowRoot) {
+    this.shadowRoot = shadowRoot;
+    __publicField(this, "card", null);
+    __publicField(this, "onSubmit", null);
+    __publicField(this, "onCancel", null);
+  }
+  show(options) {
+    this.hide();
+    this.onSubmit = options.onSubmit;
+    this.onCancel = options.onCancel;
+    this.card = document.createElement("div");
+    this.card.className = "review-comment-card";
+    this.card.style.left = `${Math.min(options.x, window.innerWidth - 320)}px`;
+    this.card.style.top = `${Math.min(options.y + 20, window.innerHeight - 200)}px`;
+    this.card.innerHTML = `
+      <textarea class="review-comment-input" placeholder="Leave your feedback..." rows="3"></textarea>
+      <div class="review-comment-actions">
+        <button class="review-btn review-btn--cancel">Cancel</button>
+        <button class="review-btn review-btn--submit">Submit</button>
+      </div>
+      <div class="review-comment-error" style="display:none"></div>
+    `;
+    this.attachListeners();
+    this.shadowRoot.appendChild(this.card);
+    const textarea = this.card.querySelector("textarea");
+    textarea?.focus();
+  }
+  hide() {
+    this.card?.remove();
+    this.card = null;
+  }
+  showForGeneral(options) {
+    this.show({
+      x: window.innerWidth / 2 - 150,
+      y: window.innerHeight / 2 - 100,
+      onSubmit: options.onSubmit,
+      onCancel: options.onCancel
+    });
+  }
+  attachListeners() {
+    if (!this.card) return;
+    this.card.querySelector(".review-btn--cancel")?.addEventListener("click", () => {
+      this.onCancel?.();
+      this.hide();
+    });
+    this.card.querySelector(".review-btn--submit")?.addEventListener("click", () => this.handleSubmit());
+    this.card.querySelector("textarea")?.addEventListener("keydown", (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+        e.preventDefault();
+        this.handleSubmit();
+      }
+    });
+  }
+  async handleSubmit() {
+    if (!this.card) return;
+    const textarea = this.card.querySelector("textarea");
+    const text = textarea.value.trim();
+    if (!text) return;
+    const submitBtn = this.card.querySelector(".review-btn--submit");
+    const errorEl = this.card.querySelector(".review-comment-error");
+    submitBtn.disabled = true;
+    submitBtn.textContent = "Submitting...";
+    textarea.disabled = true;
+    errorEl.style.display = "none";
+    try {
+      await this.onSubmit?.(text);
+      this.hide();
+    } catch (err) {
+      submitBtn.disabled = false;
+      submitBtn.textContent = "Submit";
+      textarea.disabled = false;
+      errorEl.textContent = err instanceof Error ? err.message : "Failed to submit";
+      errorEl.style.display = "block";
+    }
+  }
+};
+
+// src/review/ReviewMode.ts
+var ReviewMode = class {
+  constructor(token, shadowRoot, initData) {
+    this.token = token;
+    this.shadowRoot = shadowRoot;
+    this.initData = initData;
+    __publicField(this, "pinManager");
+    __publicField(this, "commentCard");
+    __publicField(this, "nextPinNumber");
+    __publicField(this, "pendingPinNumber", null);
+    __publicField(this, "promptEl", null);
+    __publicField(this, "toolbarEl", null);
+    __publicField(this, "clickHandler", null);
+    this.pinManager = new PinManager();
+    this.commentCard = new CommentCard(shadowRoot);
+    this.nextPinNumber = initData.nextPinNumber;
+  }
+  async init() {
+    document.body.style.cursor = "crosshair";
+    this.pinManager.mount();
+    this.showPrompt();
+    this.renderToolbar();
+    await this.loadExistingPins();
+    this.clickHandler = (e) => this.handleClick(e);
+    document.addEventListener("click", this.clickHandler, true);
+  }
+  showPrompt() {
+    this.promptEl = document.createElement("div");
+    this.promptEl.className = "review-prompt";
+    this.promptEl.innerHTML = `
+      <h3 style="margin:0 0 8px;font-size:16px;">Click anywhere to leave feedback</h3>
+      <p style="margin:0;color:#666;font-size:14px;">Drop numbered pins on elements you want to comment on</p>
+    `;
+    this.shadowRoot.appendChild(this.promptEl);
+    setTimeout(() => this.dismissPrompt(), 5e3);
+  }
+  dismissPrompt() {
+    if (this.promptEl) {
+      this.promptEl.remove();
+      this.promptEl = null;
+    }
+  }
+  renderToolbar() {
+    this.toolbarEl = document.createElement("div");
+    this.toolbarEl.className = "review-toolbar";
+    this.updateToolbar();
+    this.shadowRoot.appendChild(this.toolbarEl);
+  }
+  updateToolbar() {
+    if (!this.toolbarEl) return;
+    const pinCount = this.nextPinNumber - 1;
+    this.toolbarEl.innerHTML = `
+      <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>
+    `;
+    this.toolbarEl.querySelector("button")?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.handleGeneralComment();
+    });
+  }
+  async loadExistingPins() {
+    try {
+      const comments = await fetchComments(this.token);
+      for (const c of comments) {
+        if (c.pinNumber != null && c.pinData) {
+          const isMine = c.commentText != null;
+          this.pinManager.addPin(c.pinNumber, c.pinData.pinX, c.pinData.pinY, isMine);
+        }
+      }
+    } catch {
+    }
+  }
+  handleClick(e) {
+    const path = e.composedPath();
+    if (path.some((el) => el instanceof HTMLElement && el.closest?.("#ourroadmaps-review"))) return;
+    if (this.pendingPinNumber != null) return;
+    this.dismissPrompt();
+    const pinData = captureElementContext(e.clientX, e.clientY);
+    const pinNumber = this.nextPinNumber;
+    this.pinManager.addPin(pinNumber, pinData.pinX, pinData.pinY, true);
+    this.pendingPinNumber = pinNumber;
+    this.commentCard.show({
+      x: e.clientX,
+      y: e.clientY,
+      onSubmit: async (text) => {
+        await submitComment(this.token, {
+          commentText: text,
+          pinNumber,
+          pinData,
+          pageUrl: window.location.pathname
+        });
+        this.pendingPinNumber = null;
+        this.nextPinNumber++;
+        this.updateToolbar();
+        this.showToast("Comment saved");
+      },
+      onCancel: () => {
+        this.pinManager.removePin(pinNumber);
+        this.pendingPinNumber = null;
+      }
+    });
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  handleGeneralComment() {
+    if (this.pendingPinNumber != null) return;
+    this.commentCard.showForGeneral({
+      onSubmit: async (text) => {
+        await submitComment(this.token, {
+          commentText: text,
+          pinNumber: null,
+          pinData: null,
+          pageUrl: window.location.pathname
+        });
+        this.showToast("Comment saved");
+      },
+      onCancel: () => {
+      }
+    });
+  }
+  showToast(message) {
+    const toast = document.createElement("div");
+    toast.className = "review-toast";
+    toast.textContent = message;
+    this.shadowRoot.appendChild(toast);
+    setTimeout(() => toast.remove(), 2500);
+  }
+  destroy() {
+    document.body.style.cursor = "";
+    if (this.clickHandler) {
+      document.removeEventListener("click", this.clickHandler, true);
+    }
+    this.dismissPrompt();
+    this.toolbarEl?.remove();
+    this.commentCard.hide();
+    this.pinManager.destroy();
+  }
+};
+
+// src/review/TriageMode.ts
+var TriageMode = class {
+  constructor(token, shadowRoot) {
+    this.token = token;
+    this.shadowRoot = shadowRoot;
+    __publicField(this, "pinManager");
+    __publicField(this, "toolbarEl", null);
+    __publicField(this, "tooltipEl", null);
+    __publicField(this, "comments", []);
+    __publicField(this, "pinClickHandler", null);
+    this.pinManager = new PinManager();
+  }
+  async init() {
+    this.pinManager.mount();
+    try {
+      this.comments = await fetchComments(this.token);
+      for (const c of this.comments) {
+        if (c.pinNumber != null && c.pinData) {
+          this.pinManager.addPin(c.pinNumber, c.pinData.pinX, c.pinData.pinY, true);
+        }
+      }
+    } catch {
+    }
+    this.renderToolbar();
+    this.pinClickHandler = (e) => {
+      const target = e.target;
+      if (target.classList?.contains("review-pin")) {
+        const num = Number(target.dataset.pinNumber);
+        if (num) this.handlePinClick(num, e);
+      }
+    };
+    document.addEventListener("click", this.pinClickHandler, true);
+  }
+  renderToolbar() {
+    this.toolbarEl = document.createElement("div");
+    this.toolbarEl.className = "review-toolbar";
+    const count = this.comments.filter((c) => c.pinNumber != null).length;
+    this.toolbarEl.innerHTML = `
+      <span style="font-weight:500;">Triage Mode</span>
+      <span style="opacity:0.7;">${count} pin${count !== 1 ? "s" : ""}</span>
+    `;
+    this.shadowRoot.appendChild(this.toolbarEl);
+  }
+  handlePinClick(pinNumber, e) {
+    this.hideTooltip();
+    this.pinManager.highlightPin(pinNumber);
+    const comment = this.comments.find((c) => c.pinNumber === pinNumber);
+    if (!comment) return;
+    this.tooltipEl = document.createElement("div");
+    this.tooltipEl.className = "review-tooltip";
+    const time = new Date(comment.createdAt).toLocaleString();
+    this.tooltipEl.innerHTML = `
+      <div style="font-weight:500;margin-bottom:4px;">Pin #${pinNumber}</div>
+      <div style="margin-bottom:4px;">${comment.commentText || "(no text)"}</div>
+      <div style="font-size:11px;opacity:0.7;">${time}</div>
+    `;
+    this.tooltipEl.style.position = "fixed";
+    this.tooltipEl.style.left = `${Math.min(e.clientX + 16, window.innerWidth - 300)}px`;
+    this.tooltipEl.style.top = `${Math.min(e.clientY - 10, window.innerHeight - 150)}px`;
+    this.shadowRoot.appendChild(this.tooltipEl);
+    const dismiss = (ev) => {
+      if (ev.target !== this.tooltipEl && !this.tooltipEl?.contains(ev.target)) {
+        this.hideTooltip();
+        this.pinManager.clearHighlight();
+        document.removeEventListener("click", dismiss, true);
+      }
+    };
+    setTimeout(() => document.addEventListener("click", dismiss, true), 0);
+  }
+  hideTooltip() {
+    this.tooltipEl?.remove();
+    this.tooltipEl = null;
+  }
+  destroy() {
+    if (this.pinClickHandler) {
+      document.removeEventListener("click", this.pinClickHandler, true);
+    }
+    this.hideTooltip();
+    this.toolbarEl?.remove();
+    this.pinManager.destroy();
+  }
+};
+
+// src/review/Review.ts
+var Review = class {
+  constructor(_options = {}) {
+    __publicField(this, "root");
+    __publicField(this, "shadow");
+    __publicField(this, "mode", null);
+    __publicField(this, "_isDestroyed", false);
+    this.root = document.createElement("div");
+    this.root.id = "ourroadmaps-review";
+    this.shadow = this.root.attachShadow({ mode: "open" });
+    const styleEl = document.createElement("style");
+    styleEl.textContent = REVIEW_STYLES;
+    this.shadow.appendChild(styleEl);
+    document.body.appendChild(this.root);
+  }
+  async init() {
+    const params = new URLSearchParams(window.location.search);
+    const reviewToken = params.get("review");
+    const triageToken = params.get("triage");
+    if (reviewToken) {
+      try {
+        const data = await validateToken(reviewToken);
+        this.mode = new ReviewMode(reviewToken, this.shadow, data);
+        await this.mode.init();
+      } catch (err) {
+        if (err instanceof ReviewError) {
+          this.showErrorOverlay(
+            err.code === "expired" ? "This feedback session has expired" : "This review link is no longer valid"
+          );
+        }
+      }
+    } else if (triageToken) {
+      try {
+        await validateToken(triageToken);
+        this.mode = new TriageMode(triageToken, this.shadow);
+        await this.mode.init();
+      } catch (err) {
+        if (err instanceof ReviewError) {
+          this.showErrorOverlay(
+            err.code === "expired" ? "This feedback session has expired" : "This review link is no longer valid"
+          );
+        }
+      }
+    }
+  }
+  showErrorOverlay(message) {
+    const overlay = document.createElement("div");
+    overlay.className = "review-expired-overlay";
+    overlay.innerHTML = `
+      <div class="review-expired-card">
+        <h2 style="margin:0 0 8px;font-size:18px;">Session Unavailable</h2>
+        <p style="margin:0;color:#666;font-size:14px;">${message}</p>
+        <p style="margin:12px 0 0;color:#999;font-size:13px;">Contact the prototype owner for a new link.</p>
+      </div>
+    `;
+    this.shadow.appendChild(overlay);
+    document.body.style.filter = "grayscale(0.8)";
+  }
+  destroy() {
+    if (this._isDestroyed) return;
+    this._isDestroyed = true;
+    this.mode?.destroy();
+    this.root.remove();
+    document.body.style.filter = "";
+  }
+};
+
+export { Review };
+//# sourceMappingURL=chunk-2Q3BAT55.js.map
+//# sourceMappingURL=chunk-2Q3BAT55.js.map