@mahmulp/feedback-sdk 0.0.1

package/dist/index.js

@@ -0,0 +1,1701 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/coordinates.ts
+function computeCoordinates(target, clientX, clientY) {
+  const rect = target.getBoundingClientRect();
+  const width = rect.width || 1;
+  const height = rect.height || 1;
+  const xPercent = clamp01((clientX - rect.left) / width);
+  const yPercent = clamp01((clientY - rect.top) / height);
+  const xPx = Math.round(clientX + window.scrollX);
+  const yPx = Math.round(clientY + window.scrollY);
+  return { xPercent, yPercent, xPx, yPx };
+}
+function getViewportInfo() {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+    devicePixelRatio: window.devicePixelRatio || 1
+  };
+}
+function projectCoordinates(target, coords) {
+  if (target) {
+    const rect = target.getBoundingClientRect();
+    return {
+      x: rect.left + window.scrollX + rect.width * coords.xPercent,
+      y: rect.top + window.scrollY + rect.height * coords.yPercent,
+      orphaned: false
+    };
+  }
+  return { x: coords.xPx, y: coords.yPx, orphaned: true };
+}
+function clamp01(n) {
+  if (Number.isNaN(n)) return 0;
+  if (n < 0) return 0;
+  if (n > 1) return 1;
+  return n;
+}
+
+// src/identity.ts
+var STORAGE_KEY_PREFIX = "mahmulp-fb-author:";
+function storageKey(projectId) {
+  return `${STORAGE_KEY_PREFIX}${projectId}`;
+}
+function getStorage() {
+  try {
+    if (typeof localStorage === "undefined") return null;
+    return localStorage;
+  } catch {
+    return null;
+  }
+}
+function loadAuthor(projectId) {
+  const storage = getStorage();
+  if (!storage) return null;
+  try {
+    const raw = storage.getItem(storageKey(projectId));
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed === "object" && parsed !== null && "name" in parsed && typeof parsed.name === "string") {
+      const name = parsed.name.trim();
+      if (name.length === 0) return null;
+      const emailValue = parsed.email;
+      const email = typeof emailValue === "string" ? emailValue.trim() : "";
+      return email.length > 0 ? { name, email } : { name };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+function saveAuthor(projectId, author) {
+  const storage = getStorage();
+  if (!storage) return;
+  try {
+    storage.setItem(storageKey(projectId), JSON.stringify(author));
+  } catch {
+  }
+}
+
+// src/selector.ts
+var MAX_DEPTH = 5;
+function isStableId(id) {
+  if (id.length === 0 || id.length > 64) return false;
+  if (/[0-9a-f]{8,}/i.test(id)) return false;
+  if (/[\s"'<>`]/.test(id)) return false;
+  return true;
+}
+function isStableClass(cls) {
+  if (cls.length === 0 || cls.length > 48) return false;
+  if (/[0-9a-f]{6,}/i.test(cls)) return false;
+  if (/[:[\]]/.test(cls)) return false;
+  if (/^(sm|md|lg|xl|2xl|hover|focus|active|dark)-/.test(cls)) return false;
+  return true;
+}
+function nearestFeedbackId(el) {
+  let cur = el;
+  while (cur && cur !== document.documentElement) {
+    const id = cur.getAttribute("data-feedback-id");
+    if (id && id.length > 0) return { id, node: cur };
+    cur = cur.parentElement;
+  }
+  return null;
+}
+function isSlugSafe(value) {
+  if (value.length === 0 || value.length > 96) return false;
+  return /^[A-Za-z0-9_.:\-]+$/.test(value);
+}
+function pickStableClass(el) {
+  const list = Array.from(el.classList);
+  for (const cls of list) {
+    if (isStableClass(cls)) return cls;
+  }
+  return null;
+}
+function nthOfType(el) {
+  const parent = el.parentElement;
+  if (!parent) return 1;
+  let n = 0;
+  for (const sibling of Array.from(parent.children)) {
+    if (sibling.tagName === el.tagName) {
+      n++;
+      if (sibling === el) return n;
+    }
+  }
+  return n;
+}
+function structuralStep(el) {
+  const tag = el.tagName.toLowerCase();
+  const parent = el.parentElement;
+  if (!parent) return tag;
+  const siblings = Array.from(parent.children).filter((c) => c.tagName === el.tagName);
+  if (siblings.length === 1) return tag;
+  return `${tag}:nth-of-type(${nthOfType(el)})`;
+}
+function buildStructuralSelector(el) {
+  const parts = [];
+  let cur = el;
+  let depth = 0;
+  while (cur && cur !== document.body && cur !== document.documentElement && depth < MAX_DEPTH) {
+    parts.unshift(structuralStep(cur));
+    cur = cur.parentElement;
+    depth++;
+  }
+  return parts.join(" > ");
+}
+function resolveSelector(target) {
+  if (!(target instanceof Element)) {
+    throw new TypeError("resolveSelector: target must be an Element");
+  }
+  const fid = nearestFeedbackId(target);
+  if (fid && isSlugSafe(fid.id)) {
+    return `[data-feedback-id="${fid.id}"]`;
+  }
+  const id = target.id;
+  if (id && isStableId(id)) {
+    return `#${CSS.escape(id)}`;
+  }
+  const structural = buildStructuralSelector(target);
+  if (structural.length > 0) return structural;
+  const tag = target.tagName.toLowerCase();
+  const cls = pickStableClass(target);
+  return cls ? `${tag}.${CSS.escape(cls)}` : tag;
+}
+function findElement(selector, root = document) {
+  if (typeof selector !== "string" || selector.length === 0) return null;
+  try {
+    return root.querySelector(selector);
+  } catch {
+    return null;
+  }
+}
+
+// src/launcher.ts
+var LauncherManager = class {
+  constructor(parent, callbacks) {
+    __publicField(this, "launcherEl");
+    __publicField(this, "revealEl");
+    __publicField(this, "toggleBtn");
+    __publicField(this, "pinBtn");
+    __publicField(this, "state", {
+      enabled: false,
+      pinsVisible: true,
+      launcherVisible: true
+    });
+    this.launcherEl = document.createElement("div");
+    this.launcherEl.className = "launcher";
+    this.launcherEl.setAttribute("role", "toolbar");
+    this.launcherEl.setAttribute("aria-label", "Feedback controls");
+    this.toggleBtn = document.createElement("button");
+    this.toggleBtn.type = "button";
+    this.toggleBtn.className = "launcher-btn primary";
+    this.toggleBtn.setAttribute("aria-pressed", "false");
+    this.toggleBtn.addEventListener("click", () => callbacks.onToggleFeedback());
+    const divider = document.createElement("span");
+    divider.className = "launcher-divider";
+    divider.setAttribute("aria-hidden", "true");
+    this.pinBtn = document.createElement("button");
+    this.pinBtn.type = "button";
+    this.pinBtn.className = "launcher-btn";
+    this.pinBtn.setAttribute("aria-pressed", "true");
+    this.pinBtn.addEventListener("click", () => callbacks.onTogglePins());
+    const closeBtn = document.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.className = "launcher-btn muted";
+    closeBtn.setAttribute("aria-label", "Hide feedback launcher");
+    closeBtn.title = "Hide launcher (Ctrl/\u2318+Shift+F to reopen)";
+    closeBtn.innerHTML = ICON_X;
+    closeBtn.addEventListener("click", () => callbacks.onHideLauncher());
+    this.launcherEl.append(this.toggleBtn, divider, this.pinBtn, closeBtn);
+    this.revealEl = document.createElement("button");
+    this.revealEl.type = "button";
+    this.revealEl.className = "launcher-reveal";
+    this.revealEl.setAttribute("aria-label", "Show feedback launcher");
+    this.revealEl.title = "Show feedback launcher";
+    this.revealEl.innerHTML = ICON_BUBBLE;
+    this.revealEl.addEventListener("click", () => callbacks.onHideLauncher());
+    parent.append(this.launcherEl, this.revealEl);
+    this.render();
+  }
+  setEnabled(enabled) {
+    this.state.enabled = enabled;
+    this.render();
+  }
+  setPinsVisible(pinsVisible) {
+    this.state.pinsVisible = pinsVisible;
+    this.render();
+  }
+  setLauncherVisible(launcherVisible) {
+    this.state.launcherVisible = launcherVisible;
+    this.render();
+  }
+  /** True when an event originated from the launcher's own UI. */
+  ownsNode(node) {
+    if (!node) return false;
+    return this.launcherEl.contains(node) || this.revealEl.contains(node);
+  }
+  destroy() {
+    this.launcherEl.remove();
+    this.revealEl.remove();
+  }
+  render() {
+    const { enabled, pinsVisible, launcherVisible } = this.state;
+    this.launcherEl.classList.toggle("hidden", !launcherVisible);
+    this.revealEl.classList.toggle("visible", !launcherVisible);
+    this.toggleBtn.classList.toggle("active", enabled);
+    this.toggleBtn.setAttribute("aria-pressed", enabled ? "true" : "false");
+    this.toggleBtn.title = enabled ? "Stop feedback mode (Esc)" : "Start feedback mode (Ctrl/\u2318+Shift+F)";
+    this.toggleBtn.innerHTML = enabled ? `${ICON_DOT} <span>Stop</span>` : `${ICON_PIN} <span>Feedback</span>`;
+    this.pinBtn.classList.toggle("muted", !pinsVisible);
+    this.pinBtn.setAttribute("aria-pressed", pinsVisible ? "true" : "false");
+    this.pinBtn.setAttribute("aria-label", pinsVisible ? "Hide pins" : "Show pins");
+    this.pinBtn.title = pinsVisible ? "Hide pins" : "Show pins";
+    this.pinBtn.innerHTML = pinsVisible ? ICON_EYE : ICON_EYE_OFF;
+  }
+};
+var ICON_PIN = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M12 21s7-7.5 7-12a7 7 0 1 0-14 0c0 4.5 7 12 7 12Z" />
+  <circle cx="12" cy="9" r="2.5" />
+</svg>`;
+var ICON_DOT = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <circle cx="12" cy="12" r="6" />
+</svg>`;
+var ICON_EYE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
+  <circle cx="12" cy="12" r="3" />
+</svg>`;
+var ICON_EYE_OFF = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M3 3l18 18" />
+  <path d="M10.6 10.6a3 3 0 0 0 4.2 4.2" />
+  <path d="M9.9 5.1A10.4 10.4 0 0 1 12 5c6.5 0 10 7 10 7a17.3 17.3 0 0 1-3.6 4.5" />
+  <path d="M6.6 6.6A17.4 17.4 0 0 0 2 12s3.5 7 10 7c1.6 0 3-.3 4.2-.8" />
+</svg>`;
+var ICON_X = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M6 6l12 12M18 6L6 18" />
+</svg>`;
+var ICON_BUBBLE = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+  <path d="M21 12a8 8 0 1 1-3.4-6.5" />
+  <path d="M21 4v5h-5" />
+</svg>`;
+
+// src/popover.ts
+var POPOVER_OFFSET = 18;
+var VIEWPORT_PADDING = 8;
+var PopoverManager = class {
+  constructor(layer) {
+    __publicField(this, "layer");
+    __publicField(this, "current", null);
+    this.layer = layer;
+  }
+  isOpen() {
+    return this.current !== null;
+  }
+  /** True when the event originated inside the currently-open popover element. */
+  ownsEvent(event) {
+    if (!this.current) return false;
+    const path = event.composedPath();
+    return path.includes(this.current.el);
+  }
+  hide() {
+    if (!this.current) return;
+    this.current.el.remove();
+    this.current = null;
+  }
+  showComposer(anchor, cb) {
+    this.hide();
+    const el = this.buildComposer(cb);
+    this.layer.appendChild(el);
+    this.current = { type: "composer", el, pageX: anchor.pageX, pageY: anchor.pageY };
+    this.repositionInternal();
+    queueMicrotask(() => {
+      const focusTarget = el.querySelector("textarea, input");
+      focusTarget?.focus();
+    });
+    return el;
+  }
+  showThread(feedback, anchor, cb) {
+    this.hide();
+    const el = this.buildThread(feedback, cb);
+    this.layer.appendChild(el);
+    this.current = { type: "thread", el, pageX: anchor.pageX, pageY: anchor.pageY };
+    this.repositionInternal();
+    return el;
+  }
+  /** Re-project to viewport coordinates after a scroll/resize. */
+  reposition(anchor) {
+    if (!this.current) return;
+    if (anchor) {
+      this.current.pageX = anchor.pageX;
+      this.current.pageY = anchor.pageY;
+    }
+    this.repositionInternal();
+  }
+  repositionInternal() {
+    if (!this.current) return;
+    const viewportX = this.current.pageX - window.scrollX;
+    const viewportY = this.current.pageY - window.scrollY;
+    this.applyPosition(this.current.el, viewportX, viewportY);
+  }
+  applyPosition(el, anchorX, anchorY) {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const rect = el.getBoundingClientRect();
+    const w = rect.width || 320;
+    const h = rect.height || 200;
+    let x = anchorX + POPOVER_OFFSET;
+    if (x + w > vw - VIEWPORT_PADDING) x = anchorX - POPOVER_OFFSET - w;
+    if (x < VIEWPORT_PADDING) x = VIEWPORT_PADDING;
+    let y = anchorY;
+    if (y + h > vh - VIEWPORT_PADDING) y = vh - h - VIEWPORT_PADDING;
+    if (y < VIEWPORT_PADDING) y = VIEWPORT_PADDING;
+    el.style.left = `${x}px`;
+    el.style.top = `${y}px`;
+  }
+  // ---------- Composer ----------
+  buildComposer(cb) {
+    const root = this.makeShell("New comment", () => cb.onCancel());
+    const body = root.querySelector(".popover-body");
+    const identity = this.buildIdentityFields(cb.initialAuthor);
+    body.appendChild(identity.el);
+    const textarea = document.createElement("textarea");
+    textarea.className = "popover-textarea";
+    textarea.placeholder = "Describe what you see...";
+    textarea.rows = 4;
+    body.appendChild(textarea);
+    const actions = document.createElement("div");
+    actions.className = "popover-actions";
+    const cancel = document.createElement("button");
+    cancel.type = "button";
+    cancel.className = "btn btn-ghost";
+    cancel.textContent = "Cancel";
+    cancel.addEventListener("click", () => cb.onCancel());
+    const submit = document.createElement("button");
+    submit.type = "button";
+    submit.className = "btn btn-primary popover-submit";
+    submit.textContent = "Send";
+    submit.addEventListener("click", async () => {
+      const text = textarea.value.trim();
+      if (text.length === 0) {
+        textarea.focus();
+        return;
+      }
+      const author = identity.read();
+      if (!author) return;
+      submit.disabled = true;
+      try {
+        await cb.onSubmit(text, author);
+      } finally {
+        submit.disabled = false;
+      }
+    });
+    actions.appendChild(cancel);
+    actions.appendChild(submit);
+    body.appendChild(actions);
+    return root;
+  }
+  // ---------- Thread ----------
+  buildThread(feedback, cb) {
+    const titleText = `Status: ${feedback.status}`;
+    const root = this.makeShell(titleText, () => cb.onClose());
+    root.classList.add("popover-thread");
+    root.dataset.status = feedback.status;
+    const body = root.querySelector(".popover-body");
+    const toolbar = document.createElement("div");
+    toolbar.className = "popover-toolbar";
+    const transitions = nextStatuses(feedback.status);
+    for (const status of transitions) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "btn btn-toolbar";
+      btn.dataset.status = status;
+      btn.textContent = labelForStatusTransition(status);
+      btn.addEventListener("click", () => {
+        void cb.onStatus(status);
+      });
+      toolbar.appendChild(btn);
+    }
+    body.appendChild(toolbar);
+    const list = document.createElement("ul");
+    list.className = "popover-thread-list";
+    if (feedback.thread.length === 0) {
+      const empty = document.createElement("li");
+      empty.className = "popover-empty";
+      empty.textContent = "No comments yet.";
+      list.appendChild(empty);
+    } else {
+      for (const c of feedback.thread) {
+        const item = document.createElement("li");
+        item.className = "popover-comment";
+        const meta = document.createElement("div");
+        meta.className = "popover-comment-meta";
+        meta.textContent = c.author.name;
+        const text = document.createElement("div");
+        text.className = "popover-comment-body";
+        text.textContent = c.body;
+        item.appendChild(meta);
+        item.appendChild(text);
+        list.appendChild(item);
+      }
+    }
+    body.appendChild(list);
+    const identity = this.buildIdentityFields(cb.initialAuthor);
+    body.appendChild(identity.el);
+    const reply = document.createElement("textarea");
+    reply.className = "popover-textarea";
+    reply.placeholder = "Reply...";
+    reply.rows = 3;
+    body.appendChild(reply);
+    const actions = document.createElement("div");
+    actions.className = "popover-actions";
+    const submit = document.createElement("button");
+    submit.type = "button";
+    submit.className = "btn btn-primary popover-submit";
+    submit.textContent = "Reply";
+    submit.addEventListener("click", async () => {
+      const text = reply.value.trim();
+      if (text.length === 0) {
+        reply.focus();
+        return;
+      }
+      const author = identity.read();
+      if (!author) return;
+      submit.disabled = true;
+      try {
+        await cb.onReply(text, author);
+      } finally {
+        submit.disabled = false;
+      }
+    });
+    actions.appendChild(submit);
+    body.appendChild(actions);
+    return root;
+  }
+  // ---------- Shared bits ----------
+  makeShell(title, onClose) {
+    const root = document.createElement("div");
+    root.className = "popover";
+    root.setAttribute("role", "dialog");
+    root.setAttribute("aria-label", title);
+    const header = document.createElement("div");
+    header.className = "popover-header";
+    const titleEl = document.createElement("span");
+    titleEl.className = "popover-title";
+    titleEl.textContent = title;
+    header.appendChild(titleEl);
+    const closeBtn = document.createElement("button");
+    closeBtn.type = "button";
+    closeBtn.className = "popover-close";
+    closeBtn.setAttribute("aria-label", "Close");
+    closeBtn.textContent = "\xD7";
+    closeBtn.addEventListener("click", () => onClose());
+    header.appendChild(closeBtn);
+    root.appendChild(header);
+    const body = document.createElement("div");
+    body.className = "popover-body";
+    root.appendChild(body);
+    return root;
+  }
+  buildIdentityFields(initial) {
+    const wrap = document.createElement("div");
+    wrap.className = "popover-identity";
+    const nameInput = document.createElement("input");
+    nameInput.type = "text";
+    nameInput.placeholder = "Your name";
+    nameInput.className = "popover-input popover-name";
+    nameInput.required = true;
+    nameInput.autocomplete = "name";
+    const emailInput = document.createElement("input");
+    emailInput.type = "email";
+    emailInput.placeholder = "Email (optional)";
+    emailInput.className = "popover-input popover-email";
+    emailInput.autocomplete = "email";
+    if (initial) {
+      nameInput.value = initial.name;
+      if (initial.email) emailInput.value = initial.email;
+    }
+    wrap.appendChild(nameInput);
+    wrap.appendChild(emailInput);
+    return {
+      el: wrap,
+      read() {
+        const name = nameInput.value.trim();
+        if (name.length === 0) {
+          nameInput.focus();
+          return null;
+        }
+        const email = emailInput.value.trim();
+        return email.length > 0 ? { name, email } : { name };
+      }
+    };
+  }
+};
+function nextStatuses(current) {
+  switch (current) {
+    case "open":
+      return ["resolved", "archived"];
+    case "resolved":
+      return ["open", "archived"];
+    case "archived":
+      return ["open"];
+  }
+}
+function labelForStatusTransition(target) {
+  switch (target) {
+    case "open":
+      return "Reopen";
+    case "resolved":
+      return "Resolve";
+    case "archived":
+      return "Archive";
+  }
+}
+
+// src/overlay.ts
+var HOST_ATTR = "data-mahmulp-feedback-host";
+var OVERLAY_STYLES = `
+:host { all: initial; }
+
+.layer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+
+.highlight {
+  position: fixed;
+  border: 2px solid #1F5132;
+  background: rgba(31, 81, 50, 0.08);
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset;
+  transition: top 60ms linear, left 60ms linear, width 60ms linear, height 60ms linear;
+  display: none;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.hud {
+  position: fixed;
+  padding: 6px 10px;
+  background: #1F5132;
+  color: #F5FFF8;
+  font: 500 12px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  border-radius: 4px;
+  pointer-events: none;
+  display: none;
+  z-index: 2;
+  max-width: 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pin {
+  position: fixed;
+  width: 28px;
+  height: 28px;
+  margin-left: -14px;
+  margin-top: -28px;
+  background: #1F5132;
+  color: #F5FFF8;
+  border: 2px solid #F5FFF8;
+  border-radius: 50% 50% 50% 0;
+  transform: rotate(-45deg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: 600 11px/1 ui-sans-serif, system-ui, sans-serif;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
+  transition: transform 80ms ease;
+  z-index: 3;
+}
+.pin:hover { transform: rotate(-45deg) scale(1.08); }
+.pin > span { transform: rotate(45deg); }
+.pin.orphaned { opacity: 0.55; filter: grayscale(0.4); }
+.pin.resolved { background: #2F7A4D; }
+.pin.archived { background: #6B7280; }
+.pin.dragging { cursor: grabbing; transform: rotate(-45deg) scale(1.18); }
+
+.pinLayer.hidden { display: none; }
+
+/* ---------- Floating launcher ---------- */
+.launcher {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px;
+  background: rgba(255, 255, 255, 0.96);
+  color: #1F5132;
+  border: 1px solid rgba(31, 81, 50, 0.18);
+  border-radius: 999px;
+  box-shadow: 0 12px 24px -10px rgba(15, 35, 24, 0.32),
+              0 4px 8px -2px rgba(15, 35, 24, 0.16);
+  pointer-events: auto;
+  z-index: 5;
+  font: 600 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  user-select: none;
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+.launcher.hidden {
+  opacity: 0;
+  transform: translateY(8px);
+  pointer-events: none;
+}
+.launcher-btn {
+  appearance: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 120ms ease;
+}
+.launcher-btn:hover { background: rgba(31, 81, 50, 0.08); }
+.launcher-btn:focus-visible {
+  outline: 2px solid #1F5132;
+  outline-offset: 2px;
+}
+.launcher-btn svg { width: 18px; height: 18px; pointer-events: none; }
+.launcher-btn.primary {
+  background: #1F5132;
+  color: #F5FFF8;
+  width: auto;
+  padding: 0 14px 0 12px;
+  border-radius: 999px;
+  gap: 6px;
+}
+.launcher-btn.primary:hover { background: #265E3B; }
+.launcher-btn.primary.active {
+  background: #B91C1C;
+  color: #FFE8E8;
+}
+.launcher-btn.primary.active:hover { background: #A11616; }
+.launcher-divider {
+  width: 1px;
+  height: 22px;
+  background: rgba(31, 81, 50, 0.14);
+}
+.launcher-btn.muted { color: #6B7280; }
+
+/* ---------- Re-show launcher pill ---------- */
+.launcher-reveal {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  width: 36px;
+  height: 36px;
+  border-radius: 999px;
+  background: #1F5132;
+  color: #F5FFF8;
+  border: 0;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 8px 16px -8px rgba(15, 35, 24, 0.4);
+  z-index: 5;
+}
+.launcher-reveal.visible { display: inline-flex; }
+.launcher-reveal:hover { background: #265E3B; }
+.launcher-reveal svg { width: 18px; height: 18px; }
+
+@media (prefers-color-scheme: dark) {
+  .launcher {
+    background: #0F1F17;
+    color: #B6D8C5;
+    border-color: rgba(120, 200, 160, 0.22);
+  }
+  .launcher-btn.primary { color: #0F1F17; background: #B6D8C5; }
+  .launcher-btn.primary:hover { background: #C7E2D2; }
+  .launcher-divider { background: rgba(120, 200, 160, 0.22); }
+}
+
+.popover-layer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 4;
+}
+
+.popover {
+  position: fixed;
+  width: 320px;
+  max-height: min(70vh, 520px);
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+  color: #111827;
+  border: 1px solid rgba(31, 81, 50, 0.18);
+  border-radius: 10px;
+  box-shadow: 0 18px 36px -12px rgba(15, 35, 24, 0.32),
+              0 4px 8px -2px rgba(15, 35, 24, 0.16);
+  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+.popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: #1F5132;
+  color: #F5FFF8;
+}
+.popover-title {
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.01em;
+  text-transform: capitalize;
+}
+.popover-close {
+  background: transparent;
+  color: inherit;
+  border: 0;
+  font-size: 18px;
+  line-height: 1;
+  padding: 2px 6px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.popover-close:hover { background: rgba(255,255,255,0.15); }
+
+.popover-body {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow-y: auto;
+}
+
+.popover-toolbar {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.popover-thread-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+.popover-comment {
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  padding: 8px 10px;
+  background: #F9FAFB;
+}
+.popover-comment-meta {
+  font-size: 11px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 2px;
+}
+.popover-comment-body { white-space: pre-wrap; word-break: break-word; }
+.popover-empty {
+  font-size: 12px;
+  color: #6B7280;
+  font-style: italic;
+}
+
+.popover-identity {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+
+.popover-input,
+.popover-textarea {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  border: 1px solid #D1D5DB;
+  border-radius: 6px;
+  font: inherit;
+  color: inherit;
+  background: #FFFFFF;
+  resize: vertical;
+}
+.popover-input:focus,
+.popover-textarea:focus {
+  outline: none;
+  border-color: #1F5132;
+  box-shadow: 0 0 0 3px rgba(31, 81, 50, 0.15);
+}
+
+.popover-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 7px 14px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  font: 600 13px/1 inherit;
+  cursor: pointer;
+}
+.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
+.btn-primary {
+  background: #1F5132;
+  color: #F5FFF8;
+}
+.btn-primary:hover { background: #295F3D; }
+.btn-ghost {
+  background: transparent;
+  color: #1F5132;
+  border-color: rgba(31, 81, 50, 0.3);
+}
+.btn-ghost:hover { background: rgba(31, 81, 50, 0.05); }
+.btn-toolbar {
+  background: rgba(31, 81, 50, 0.08);
+  color: #1F5132;
+  border-color: rgba(31, 81, 50, 0.18);
+  font-weight: 500;
+  font-size: 12px;
+  padding: 5px 10px;
+}
+.btn-toolbar:hover { background: rgba(31, 81, 50, 0.16); }
+
+@media (prefers-color-scheme: dark) {
+  .popover {
+    background: #0F1F17;
+    color: #E5F2EB;
+    border-color: rgba(120, 200, 160, 0.22);
+  }
+  .popover-comment {
+    background: #102A20;
+    border-color: rgba(120, 200, 160, 0.18);
+  }
+  .popover-comment-meta { color: #B6D8C5; }
+  .popover-empty { color: #94B3A4; }
+  .popover-input,
+  .popover-textarea {
+    background: #102A20;
+    color: inherit;
+    border-color: rgba(120, 200, 160, 0.22);
+  }
+  .btn-ghost { color: #B6D8C5; border-color: rgba(120, 200, 160, 0.3); }
+  .btn-ghost:hover { background: rgba(120, 200, 160, 0.08); }
+  .btn-toolbar {
+    background: rgba(120, 200, 160, 0.12);
+    color: #B6D8C5;
+    border-color: rgba(120, 200, 160, 0.22);
+  }
+  .btn-toolbar:hover { background: rgba(120, 200, 160, 0.2); }
+}
+`;
+var Overlay = class {
+  constructor() {
+    __publicField(this, "host");
+    __publicField(this, "root");
+    __publicField(this, "highlight");
+    __publicField(this, "hud");
+    __publicField(this, "pinLayer");
+    __publicField(this, "popoverLayer");
+    __publicField(this, "popover");
+    __publicField(this, "launcher", null);
+    __publicField(this, "rafHandle", null);
+    __publicField(this, "pendingFeedback", []);
+    __publicField(this, "onPinClick", null);
+    __publicField(this, "onPinDragEnd", null);
+    __publicField(this, "draggingPin", null);
+    this.host = document.createElement("div");
+    this.host.setAttribute(HOST_ATTR, "");
+    this.host.style.cssText = [
+      "position: fixed",
+      "inset: 0",
+      "width: 0",
+      "height: 0",
+      "pointer-events: none",
+      "z-index: 2147483647"
+    ].join(";");
+    document.body.appendChild(this.host);
+    this.root = this.host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = OVERLAY_STYLES;
+    this.root.appendChild(style);
+    this.pinLayer = makeLayer("pinLayer");
+    this.highlight = makeLayer("highlight", "div");
+    this.hud = makeLayer("hud", "div");
+    this.popoverLayer = makeLayer("popover-layer");
+    this.root.append(this.pinLayer, this.highlight, this.hud, this.popoverLayer);
+    this.popover = new PopoverManager(this.popoverLayer);
+  }
+  /** Called by the controller when the user enters/leaves feedback mode. */
+  setEnabledStyles(enabled) {
+    if (!enabled) {
+      this.hideHighlight();
+      this.hideHud();
+    }
+  }
+  showHighlight(target) {
+    const rect = target.getBoundingClientRect();
+    this.highlight.style.display = "block";
+    this.highlight.style.left = `${rect.left}px`;
+    this.highlight.style.top = `${rect.top}px`;
+    this.highlight.style.width = `${rect.width}px`;
+    this.highlight.style.height = `${rect.height}px`;
+  }
+  hideHighlight() {
+    this.highlight.style.display = "none";
+  }
+  showHud(target) {
+    const tag = target.tagName.toLowerCase();
+    const cls = (target.getAttribute("class") || "").trim();
+    const fid = target.getAttribute("data-feedback-id");
+    const label = fid ? `${tag} [data-feedback-id="${fid}"]` : cls ? `${tag}.${cls.split(/\s+/).slice(0, 2).join(".")}` : tag;
+    const rect = target.getBoundingClientRect();
+    this.hud.textContent = label;
+    this.hud.style.display = "block";
+    const hudHeight = 28;
+    const top = rect.top - hudHeight - 6 > 0 ? rect.top - hudHeight - 6 : Math.min(rect.bottom + 6, window.innerHeight - hudHeight);
+    const left = Math.max(8, Math.min(rect.left, window.innerWidth - 320));
+    this.hud.style.top = `${top}px`;
+    this.hud.style.left = `${left}px`;
+  }
+  hideHud() {
+    this.hud.style.display = "none";
+  }
+  /** True if the event originated from the SDK's own UI (so we ignore it). */
+  ownsEvent(event) {
+    const path = event.composedPath();
+    if (path.includes(this.host)) return true;
+    if (path.some((n) => n === this.root)) return true;
+    if (this.launcher) {
+      for (const node of path) {
+        if (this.launcher.ownsNode(node)) return true;
+      }
+    }
+    return false;
+  }
+  /** True if the event originated from the popover specifically. */
+  popoverOwnsEvent(event) {
+    return this.popover.ownsEvent(event);
+  }
+  /** Render the given feedback list as pins. */
+  renderPins(feedbacks, onClick, onDragEnd = null) {
+    this.onPinClick = onClick;
+    this.onPinDragEnd = onDragEnd;
+    this.pendingFeedback = feedbacks;
+    this.scheduleRepositionPins();
+  }
+  /** Re-position pins after layout changes. Called on resize/scroll. */
+  reposition() {
+    this.scheduleRepositionPins();
+    this.popover.reposition();
+  }
+  popoverManager() {
+    return this.popover;
+  }
+  /** Wire the floating launcher to controller callbacks. Idempotent. */
+  installLauncher(callbacks) {
+    if (this.launcher) return this.launcher;
+    this.launcher = new LauncherManager(this.root, callbacks);
+    return this.launcher;
+  }
+  /** Show or hide the pin layer entirely (e.g. via the eye toggle). */
+  setPinsVisible(visible) {
+    this.pinLayer.classList.toggle("hidden", !visible);
+  }
+  scheduleRepositionPins() {
+    if (this.rafHandle !== null) return;
+    this.rafHandle = requestAnimationFrame(() => {
+      this.rafHandle = null;
+      this.layoutPins();
+    });
+  }
+  layoutPins() {
+    const next = document.createDocumentFragment();
+    for (const fb of this.pendingFeedback) {
+      const target = findElement(fb.selector);
+      const projected = projectCoordinates(target, fb.coordinates);
+      const pin = document.createElement("button");
+      pin.type = "button";
+      const classes = ["pin"];
+      if (projected.orphaned) classes.push("orphaned");
+      if (fb.status === "resolved") classes.push("resolved");
+      if (fb.status === "archived") classes.push("archived");
+      pin.className = classes.join(" ");
+      pin.setAttribute("data-feedback-id", fb.id);
+      pin.setAttribute("aria-label", `Feedback ${fb.id}`);
+      pin.style.left = `${projected.x - window.scrollX}px`;
+      pin.style.top = `${projected.y - window.scrollY}px`;
+      const label = document.createElement("span");
+      label.textContent = String(fb.thread.length || 1);
+      pin.appendChild(label);
+      pin.addEventListener("click", (e) => {
+        e.stopPropagation();
+        if (this.draggingPin === fb.id) return;
+        this.onPinClick?.(fb);
+      });
+      this.attachDragHandlers(pin, fb);
+      next.appendChild(pin);
+    }
+    this.pinLayer.replaceChildren(next);
+  }
+  destroy() {
+    if (this.rafHandle !== null) {
+      cancelAnimationFrame(this.rafHandle);
+      this.rafHandle = null;
+    }
+    this.popover.hide();
+    this.launcher?.destroy();
+    this.launcher = null;
+    this.host.remove();
+  }
+  attachDragHandlers(pin, fb) {
+    let startClientX = 0;
+    let startClientY = 0;
+    let isDragging = false;
+    let pointerId = null;
+    let originLeft = 0;
+    let originTop = 0;
+    const DRAG_THRESHOLD = 4;
+    const onPointerMove = (e) => {
+      if (pointerId === null || e.pointerId !== pointerId) return;
+      const dx = e.clientX - startClientX;
+      const dy = e.clientY - startClientY;
+      if (!isDragging && Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+      if (!isDragging) {
+        isDragging = true;
+        this.draggingPin = fb.id;
+        pin.classList.add("dragging");
+      }
+      const nextLeft = Math.max(0, Math.min(window.innerWidth, originLeft + dx));
+      const nextTop = Math.max(0, Math.min(window.innerHeight, originTop + dy));
+      pin.style.left = `${nextLeft}px`;
+      pin.style.top = `${nextTop}px`;
+    };
+    const finish = (e) => {
+      if (pointerId === null || e.pointerId !== pointerId) return;
+      pin.removeEventListener("pointermove", onPointerMove);
+      pin.removeEventListener("pointerup", finish);
+      pin.removeEventListener("pointercancel", finish);
+      try {
+        pin.releasePointerCapture(pointerId);
+      } catch {
+      }
+      pointerId = null;
+      pin.classList.remove("dragging");
+      if (!isDragging) return;
+      const target = findElement(fb.selector);
+      const rect = pin.getBoundingClientRect();
+      const tipX = rect.left + rect.width / 2;
+      const tipY = rect.top + rect.height;
+      const next = {
+        xPx: Math.round(tipX + window.scrollX),
+        yPx: Math.round(tipY + window.scrollY),
+        xPercent: 0,
+        yPercent: 0
+      };
+      if (target) {
+        const t = target.getBoundingClientRect();
+        next.xPercent = clamp012((tipX - t.left) / (t.width || 1));
+        next.yPercent = clamp012((tipY - t.top) / (t.height || 1));
+      } else {
+        next.xPercent = clamp012(tipX / (window.innerWidth || 1));
+        next.yPercent = clamp012(tipY / (window.innerHeight || 1));
+      }
+      this.onPinDragEnd?.(fb.id, next);
+      const releasedId = fb.id;
+      requestAnimationFrame(() => {
+        if (this.draggingPin === releasedId) this.draggingPin = null;
+      });
+      isDragging = false;
+    };
+    pin.addEventListener("pointerdown", (e) => {
+      if (e.button !== 0) return;
+      pointerId = e.pointerId;
+      startClientX = e.clientX;
+      startClientY = e.clientY;
+      const rect = pin.getBoundingClientRect();
+      originLeft = rect.left;
+      originTop = rect.top;
+      try {
+        pin.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      pin.addEventListener("pointermove", onPointerMove);
+      pin.addEventListener("pointerup", finish);
+      pin.addEventListener("pointercancel", finish);
+      e.preventDefault();
+    });
+  }
+};
+function clamp012(n) {
+  if (Number.isNaN(n)) return 0;
+  if (n < 0) return 0;
+  if (n > 1) return 1;
+  return n;
+}
+function makeLayer(className, tag = "div") {
+  const el = document.createElement(tag);
+  el.className = className;
+  if (className === "pinLayer" || className === "popover-layer") {
+    el.classList.add("layer");
+  }
+  return el;
+}
+
+// src/screenshot.ts
+var HOST_ATTR2 = "data-mahmulp-feedback-host";
+var DEFAULT_OPTIONS = {
+  mimeType: "image/png",
+  quality: 0.92,
+  scale: 1
+};
+async function captureViewport(options = {}) {
+  if (typeof window === "undefined" || typeof document === "undefined") return null;
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+  const html2canvas = await loadHtml2Canvas();
+  if (!html2canvas) return null;
+  const host = document.querySelector(`[${HOST_ATTR2}]`);
+  const previousVisibility = host?.style.visibility ?? "";
+  if (host) host.style.visibility = "hidden";
+  try {
+    const canvas = await html2canvas(document.documentElement, {
+      backgroundColor: null,
+      scale: opts.scale,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      x: window.scrollX,
+      y: window.scrollY,
+      windowWidth: window.innerWidth,
+      windowHeight: window.innerHeight,
+      logging: false,
+      useCORS: true,
+      allowTaint: false
+    });
+    return await canvasToBlob(canvas, opts.mimeType, opts.quality);
+  } catch {
+    return null;
+  } finally {
+    if (host) host.style.visibility = previousVisibility;
+  }
+}
+var html2canvasPromise = null;
+async function loadHtml2Canvas() {
+  if (html2canvasPromise) return html2canvasPromise;
+  html2canvasPromise = (async () => {
+    try {
+      const mod = await import('html2canvas');
+      return mod.default ?? mod ?? null;
+    } catch {
+      return null;
+    }
+  })();
+  return html2canvasPromise;
+}
+function canvasToBlob(canvas, mimeType, quality) {
+  return new Promise((resolve) => {
+    if (typeof canvas.toBlob === "function") {
+      canvas.toBlob(resolve, mimeType, quality);
+    } else {
+      try {
+        const dataUrl = canvas.toDataURL(mimeType, quality);
+        const [meta, b64] = dataUrl.split(",");
+        const bin = atob(b64 ?? "");
+        const arr = new Uint8Array(bin.length);
+        for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
+        const detectedMime = meta?.match(/data:([^;]+);/)?.[1] ?? mimeType;
+        resolve(new Blob([arr], { type: detectedMime }));
+      } catch {
+        resolve(null);
+      }
+    }
+  });
+}
+
+// src/transport.ts
+function createHttpTransport(options) {
+  if (!options.apiKey) {
+    throw new Error("createHttpTransport: `apiKey` is required");
+  }
+  const fetchImpl = options.fetch ?? globalThis.fetch.bind(globalThis);
+  const base = options.apiUrl.replace(/\/$/, "");
+  function jsonHeaders() {
+    return {
+      "content-type": "application/json",
+      accept: "application/json",
+      "x-feedback-key": options.apiKey,
+      ...options.headers ?? {}
+    };
+  }
+  function authHeaders() {
+    return { "x-feedback-key": options.apiKey, ...options.headers ?? {} };
+  }
+  async function asJson(res) {
+    if (!res.ok) {
+      const text = await res.text().catch(() => "");
+      throw new Error(`feedback-sdk: ${res.status} ${res.statusText} ${text}`);
+    }
+    return await res.json();
+  }
+  return {
+    async list(query) {
+      const params = new URLSearchParams();
+      if (query.pageUrl) params.set("pageUrl", query.pageUrl);
+      if (query.status) params.set("status", query.status);
+      const qs = params.toString();
+      const res = await fetchImpl(`${base}/v1/feedback${qs ? `?${qs}` : ""}`, {
+        method: "GET",
+        headers: jsonHeaders()
+      });
+      return asJson(res);
+    },
+    async create(input) {
+      const { projectId: _ignored, ...payload } = input;
+      const res = await fetchImpl(`${base}/v1/feedback`, {
+        method: "POST",
+        headers: jsonHeaders(),
+        body: JSON.stringify(payload)
+      });
+      return asJson(res);
+    },
+    async reply(feedbackId, comment) {
+      const res = await fetchImpl(`${base}/v1/feedback/${encodeURIComponent(feedbackId)}/comments`, {
+        method: "POST",
+        headers: jsonHeaders(),
+        body: JSON.stringify(comment)
+      });
+      return asJson(res);
+    },
+    async setStatus(feedbackId, status) {
+      const res = await fetchImpl(`${base}/v1/feedback/${encodeURIComponent(feedbackId)}`, {
+        method: "PATCH",
+        headers: jsonHeaders(),
+        body: JSON.stringify({ status })
+      });
+      return asJson(res);
+    },
+    async move(feedbackId, coordinates) {
+      const res = await fetchImpl(
+        `${base}/v1/feedback/${encodeURIComponent(feedbackId)}/coordinates`,
+        {
+          method: "PATCH",
+          headers: jsonHeaders(),
+          body: JSON.stringify({ coordinates })
+        }
+      );
+      return asJson(res);
+    },
+    async uploadScreenshot(feedbackId, blob) {
+      const form = new FormData();
+      form.append("file", blob, `${feedbackId}.png`);
+      const res = await fetchImpl(
+        `${base}/v1/feedback/${encodeURIComponent(feedbackId)}/screenshot`,
+        {
+          method: "POST",
+          headers: authHeaders(),
+          body: form
+        }
+      );
+      return asJson(res);
+    }
+  };
+}
+
+// src/controller.ts
+function initFeedback(options) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return ssrNoopController();
+  }
+  const transport = options.transport ?? (() => {
+    if (!options.apiUrl) {
+      throw new Error("initFeedback: provide either `transport` or `apiUrl`");
+    }
+    if (!options.apiKey) {
+      throw new Error("initFeedback: `apiKey` is required when using the default HTTP transport");
+    }
+    return createHttpTransport({ apiUrl: options.apiUrl, apiKey: options.apiKey });
+  })();
+  const namespace = options.cacheNamespace ?? (options.apiKey ? options.apiKey.slice(0, 12) : "default");
+  const overlay = new Overlay();
+  const state = {
+    enabled: !!options.enabled,
+    hoverTarget: null,
+    candidate: null,
+    feedbacks: [],
+    destroyed: false
+  };
+  let pendingPin = null;
+  let activeThreadId = null;
+  const getPageUrl = options.getPageUrl ?? (() => window.location.pathname + window.location.search);
+  const modKey = options.selectParentModifier ?? "Alt";
+  const getAuthor = options.getAuthor ?? (() => loadAuthor(namespace));
+  const setAuthor = options.setAuthor ?? ((author) => {
+    saveAuthor(namespace, author);
+  });
+  const wantsScreenshots = options.captureScreenshots !== false;
+  const captureFn = options.captureScreenshot ?? (() => captureViewport());
+  function isModifierActive(e) {
+    switch (modKey) {
+      case "Alt":
+        return e.altKey;
+      case "Shift":
+        return e.shiftKey;
+      case "Meta":
+        return e.metaKey;
+      case "Control":
+        return e.ctrlKey;
+    }
+  }
+  function reportError(err) {
+    if (options.onError) {
+      try {
+        options.onError(err);
+      } catch {
+      }
+    } else if (typeof console !== "undefined") {
+      console.error("[feedback-sdk]", err);
+    }
+  }
+  function onMouseMove(e) {
+    if (!state.enabled) return;
+    if (overlay.ownsEvent(e)) return;
+    if (pendingPin || activeThreadId) return;
+    const target = elementAtFiltered(e.clientX, e.clientY, overlay);
+    if (!target) {
+      state.hoverTarget = null;
+      overlay.hideHighlight();
+      overlay.hideHud();
+      return;
+    }
+    state.hoverTarget = target;
+    state.candidate = target;
+    overlay.showHighlight(target);
+    overlay.showHud(target);
+  }
+  function onClick(e) {
+    if (overlay.popoverOwnsEvent(e)) return;
+    if (!state.enabled) return;
+    if (overlay.ownsEvent(e)) return;
+    if (isModifierActive(e)) {
+      const next = state.candidate?.parentElement ?? null;
+      if (next && next !== document.body && next !== document.documentElement) {
+        state.candidate = next;
+        overlay.showHighlight(next);
+        overlay.showHud(next);
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    const target = state.candidate ?? state.hoverTarget;
+    if (!target) return;
+    e.preventDefault();
+    e.stopPropagation();
+    openComposerAt(target, e.clientX, e.clientY);
+  }
+  function onKeyDown(e) {
+    if ((e.metaKey || e.ctrlKey) && e.shiftKey && (e.key === "F" || e.key === "f")) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!launcherState.launcherVisible) {
+        launcherState.launcherVisible = true;
+        syncLauncher();
+      }
+      publicSetEnabled(!state.enabled);
+      return;
+    }
+    if (e.key === "Escape") {
+      if (pendingPin || activeThreadId) {
+        cancelComposer();
+        closeThread();
+        return;
+      }
+      if (state.enabled) {
+        state.candidate = null;
+        state.hoverTarget = null;
+        overlay.hideHighlight();
+        overlay.hideHud();
+      }
+    }
+  }
+  function onWindowReposition() {
+    overlay.reposition();
+  }
+  function openComposerAt(target, clientX, clientY) {
+    const selector = resolveSelector(target);
+    const coordinates = computeCoordinates(target, clientX, clientY);
+    pendingPin = {
+      selector,
+      coordinates,
+      pageX: clientX + window.scrollX,
+      pageY: clientY + window.scrollY
+    };
+    overlay.hideHighlight();
+    overlay.hideHud();
+    let screenshotPromise = null;
+    if (wantsScreenshots) {
+      screenshotPromise = captureFn().catch(() => null);
+    }
+    overlay.popoverManager().showComposer(
+      { pageX: pendingPin.pageX, pageY: pendingPin.pageY },
+      {
+        initialAuthor: getAuthor(),
+        onSubmit: async (body, author) => {
+          const pin = pendingPin;
+          if (!pin) return;
+          try {
+            const fb = await createPin(pin, { author, body });
+            setAuthor(author);
+            options.onPinCreate?.(fb);
+            pendingPin = null;
+            overlay.popoverManager().hide();
+            if (screenshotPromise && transport.uploadScreenshot) {
+              void screenshotPromise.then(async (blob) => {
+                if (!blob) return;
+                const updated = await transport.uploadScreenshot(fb.id, blob);
+                replaceFeedback(updated);
+              }).catch((err) => reportError(err));
+            }
+          } catch (err) {
+            reportError(err);
+          }
+        },
+        onCancel: () => cancelComposer()
+      }
+    );
+  }
+  function cancelComposer() {
+    if (!pendingPin) return;
+    pendingPin = null;
+    overlay.popoverManager().hide();
+  }
+  function openThread(fb) {
+    activeThreadId = fb.id;
+    const anchor = computeThreadAnchor(fb);
+    overlay.popoverManager().showThread(fb, anchor, {
+      initialAuthor: getAuthor(),
+      onReply: async (body, author) => {
+        try {
+          const updated = await transport.reply(fb.id, { author, body });
+          setAuthor(author);
+          replaceFeedback(updated);
+          overlay.popoverManager().hide();
+          activeThreadId = null;
+          openThread(updated);
+        } catch (err) {
+          reportError(err);
+        }
+      },
+      onStatus: async (status) => {
+        try {
+          const updated = await transport.setStatus(fb.id, status);
+          replaceFeedback(updated);
+          overlay.popoverManager().hide();
+          activeThreadId = null;
+          openThread(updated);
+        } catch (err) {
+          reportError(err);
+        }
+      },
+      onClose: () => closeThread()
+    });
+  }
+  function closeThread() {
+    if (!activeThreadId) return;
+    activeThreadId = null;
+    overlay.popoverManager().hide();
+  }
+  function computeThreadAnchor(fb) {
+    const target = findElement(fb.selector);
+    if (target) {
+      const rect = target.getBoundingClientRect();
+      return {
+        pageX: rect.left + window.scrollX + rect.width * fb.coordinates.xPercent,
+        pageY: rect.top + window.scrollY + rect.height * fb.coordinates.yPercent
+      };
+    }
+    return { pageX: fb.coordinates.xPx, pageY: fb.coordinates.yPx };
+  }
+  async function createPin(pin, comment) {
+    const viewport = getViewportInfo();
+    const pageUrl = getPageUrl();
+    const input = {
+      projectId: "",
+      // server resolves from API key — kept here only to satisfy the type
+      pageUrl,
+      selector: pin.selector,
+      coordinates: pin.coordinates,
+      viewport,
+      comment
+    };
+    const fb = await transport.create(input);
+    state.feedbacks = [...state.feedbacks, fb];
+    overlay.renderPins(state.feedbacks, openThread, onPinDragEnd);
+    return fb;
+  }
+  function replaceFeedback(updated) {
+    state.feedbacks = state.feedbacks.map((f) => f.id === updated.id ? updated : f);
+    overlay.renderPins(state.feedbacks, openThread, onPinDragEnd);
+  }
+  async function refresh() {
+    try {
+      const result = await transport.list({ projectId: "" });
+      state.feedbacks = result.items;
+      overlay.renderPins(state.feedbacks, openThread, onPinDragEnd);
+    } catch (err) {
+      reportError(err);
+    }
+  }
+  async function onPinDragEnd(id, next) {
+    const previous = state.feedbacks.find((f) => f.id === id);
+    if (!previous) return;
+    const optimistic = {
+      ...previous,
+      coordinates: { ...previous.coordinates, ...next },
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    replaceFeedback(optimistic);
+    if (!transport.move) return;
+    try {
+      const persisted = await transport.move(id, optimistic.coordinates);
+      replaceFeedback(persisted);
+    } catch (err) {
+      replaceFeedback(previous);
+      reportError(err);
+    }
+  }
+  document.addEventListener("mousemove", onMouseMove, true);
+  document.addEventListener("click", onClick, true);
+  document.addEventListener("keydown", onKeyDown, true);
+  window.addEventListener("scroll", onWindowReposition, true);
+  window.addEventListener("resize", onWindowReposition);
+  void refresh();
+  overlay.setEnabledStyles(state.enabled);
+  const wantsLauncher = options.showLauncher !== false;
+  const launcherState = {
+    pinsVisible: options.pinsVisible !== false,
+    launcherVisible: true
+  };
+  overlay.setPinsVisible(launcherState.pinsVisible);
+  function syncLauncher() {
+    launcher?.setEnabled(state.enabled);
+    launcher?.setPinsVisible(launcherState.pinsVisible);
+    launcher?.setLauncherVisible(launcherState.launcherVisible);
+  }
+  const launcher = wantsLauncher ? overlay.installLauncher({
+    onToggleFeedback: () => {
+      publicSetEnabled(!state.enabled);
+    },
+    onTogglePins: () => {
+      publicSetPinsVisible(!launcherState.pinsVisible);
+    },
+    onHideLauncher: () => {
+      publicSetLauncherVisible(!launcherState.launcherVisible);
+    }
+  }) : null;
+  syncLauncher();
+  function publicSetEnabled(enabled) {
+    if (state.destroyed) return;
+    state.enabled = enabled;
+    overlay.setEnabledStyles(enabled);
+    if (!enabled) cancelComposer();
+    syncLauncher();
+  }
+  function publicSetPinsVisible(visible) {
+    if (state.destroyed) return;
+    launcherState.pinsVisible = visible;
+    overlay.setPinsVisible(visible);
+    syncLauncher();
+  }
+  function publicSetLauncherVisible(visible) {
+    if (state.destroyed) return;
+    launcherState.launcherVisible = visible;
+    syncLauncher();
+  }
+  return {
+    setEnabled: publicSetEnabled,
+    isEnabled() {
+      return state.enabled;
+    },
+    setPinsVisible: publicSetPinsVisible,
+    setLauncherVisible: publicSetLauncherVisible,
+    async refresh() {
+      if (state.destroyed) return;
+      await refresh();
+    },
+    destroy() {
+      if (state.destroyed) return;
+      state.destroyed = true;
+      document.removeEventListener("mousemove", onMouseMove, true);
+      document.removeEventListener("click", onClick, true);
+      document.removeEventListener("keydown", onKeyDown, true);
+      window.removeEventListener("scroll", onWindowReposition, true);
+      window.removeEventListener("resize", onWindowReposition);
+      overlay.destroy();
+    }
+  };
+}
+function elementAtFiltered(x, y, overlay) {
+  const stack = document.elementsFromPoint(x, y);
+  for (const node of stack) {
+    if (overlay.ownsEvent({ composedPath: () => [node] })) continue;
+    if (node === document.documentElement || node === document.body) continue;
+    return node;
+  }
+  return null;
+}
+function ssrNoopController() {
+  return {
+    setEnabled() {
+    },
+    isEnabled() {
+      return false;
+    },
+    setPinsVisible() {
+    },
+    setLauncherVisible() {
+    },
+    async refresh() {
+    },
+    destroy() {
+    }
+  };
+}
+
+// src/index.ts
+var _globalController = null;
+function _setGlobalController(c) {
+  _globalController = c;
+}
+function setFeedbackEnabled(enabled) {
+  _globalController?.setEnabled(enabled);
+}
+function destroyFeedback() {
+  _globalController?.destroy();
+  _globalController = null;
+}
+function initFeedbackGlobal(options) {
+  const ctrl = initFeedback(options);
+  _globalController = ctrl;
+  return ctrl;
+}
+
+export { _setGlobalController, captureViewport, computeCoordinates, createHttpTransport, destroyFeedback, findElement, getViewportInfo, initFeedback, initFeedbackGlobal, projectCoordinates, resolveSelector, setFeedbackEnabled };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map