@unhingged/vizu-core 0.1.0

package/dist/index.js

@@ -0,0 +1,3600 @@
+import {
+  findByFingerprint,
+  findElementByFingerprint,
+  fingerprint,
+  fingerprintKey,
+  fingerprintLabel
+} from "./chunk-OMIFOSQ2.js";
+
+// src/types.ts
+var SCHEMA_VERSION = 2;
+
+// src/util.ts
+function uuid() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return Math.random().toString(36).slice(2) + Date.now().toString(36);
+}
+function isInside(target, selector) {
+  return !!target.closest(selector);
+}
+function escapeHtml(s) {
+  return s.replace(/[&<>"']/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[ch]);
+}
+function formatTime(ts) {
+  const d = new Date(ts);
+  const now = Date.now();
+  const diff = now - ts;
+  if (diff < 6e4) return "just now";
+  if (diff < 36e5) return Math.floor(diff / 6e4) + "m ago";
+  if (diff < 864e5) return Math.floor(diff / 36e5) + "h ago";
+  return d.toLocaleDateString() + " " + d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+function initials(name) {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0].toUpperCase()).join("");
+}
+function avatarHtml(user, className = "vz-comment-author-avatar") {
+  if (!user) return `<span class="${className}">\xB7</span>`;
+  if (user.avatarUrl) {
+    return `<span class="${className}"><img src="${escapeHtml(user.avatarUrl)}" alt="${escapeHtml(user.name)}" /></span>`;
+  }
+  return `<span class="${className}">${escapeHtml(initials(user.name) || "?")}</span>`;
+}
+function refId() {
+  return Math.random().toString(36).slice(2, 10);
+}
+var MENTION_TOKEN_RE = /\[@([^\]]+)\]\(vizu-mention:([a-zA-Z0-9_-]+)\)/g;
+var COMBINED_TOKEN_SPLIT_RE = /(\[#[^\]]+\]\(vizu-ref:[a-zA-Z0-9_-]+\)|\[@[^\]]+\]\(vizu-mention:[a-zA-Z0-9_-]+\))/g;
+function renderCommentText(text, commentId) {
+  const parts = text.split(COMBINED_TOKEN_SPLIT_RE);
+  return parts.map((part) => {
+    const refMatch = part.match(/^\[#([^\]]+)\]\(vizu-ref:([a-zA-Z0-9_-]+)\)$/);
+    if (refMatch) {
+      return `<a class="vz-ref" data-vz="ref" data-comment-id="${escapeHtml(commentId)}" data-ref-id="${escapeHtml(refMatch[2])}" role="button" tabindex="0">${escapeHtml(refMatch[1])}</a>`;
+    }
+    const mentionMatch = part.match(/^\[@([^\]]+)\]\(vizu-mention:([a-zA-Z0-9_-]+)\)$/);
+    if (mentionMatch) {
+      return `<span class="vz-mention" data-vz="mention" data-mention-id="${escapeHtml(mentionMatch[2])}">@${escapeHtml(mentionMatch[1])}</span>`;
+    }
+    return escapeHtml(part);
+  }).join("");
+}
+function extractMentions(text) {
+  const out = [];
+  for (const m of text.matchAll(MENTION_TOKEN_RE)) {
+    if (!out.includes(m[2])) out.push(m[2]);
+  }
+  return out;
+}
+function renderAttachmentsHtml(attachments) {
+  if (!Array.isArray(attachments) || attachments.length === 0) return "";
+  const items = attachments.map((a) => {
+    const isImage = a.mimeType?.startsWith("image/");
+    const filename = a.filename ?? a.url.split("/").pop() ?? "file";
+    if (isImage) {
+      return `
+          <a class="vz-attachment-display" href="${escapeHtml(a.url)}" target="_blank" rel="noreferrer" title="${escapeHtml(filename)}">
+            <img src="${escapeHtml(a.url)}" alt="${escapeHtml(filename)}" loading="lazy" />
+          </a>
+        `;
+    }
+    return `
+        <a class="vz-attachment-display vz-attachment-file" href="${escapeHtml(a.url)}" target="_blank" rel="noreferrer">
+          <span class="vz-attachment-icon" aria-hidden="true">\u{1F4C4}</span>
+          <span class="vz-attachment-filename">${escapeHtml(filename)}</span>
+        </a>
+      `;
+  }).join("");
+  return `<div class="vz-attachment-grid">${items}</div>`;
+}
+function migrateComment(raw) {
+  if (!raw || typeof raw !== "object") return raw;
+  const next = { ...raw };
+  if (!Array.isArray(next.fingerprints) || next.fingerprints.length === 0) {
+    if (next.fingerprint) {
+      next.fingerprints = [next.fingerprint];
+    }
+  }
+  delete next.fingerprint;
+  if (next.url && !next.pageUrl) {
+    next.pageUrl = next.url;
+  }
+  if (!("status" in next) || !isValidStatus(next.status)) next.status = "open";
+  if (!Array.isArray(next.replies)) next.replies = [];
+  if (!Array.isArray(next.attachments)) next.attachments = [];
+  if (!Array.isArray(next.mentions)) next.mentions = [];
+  if (!("fingerprintsRefreshedAt" in next)) next.fingerprintsRefreshedAt = null;
+  next.schemaVersion = SCHEMA_VERSION;
+  return next;
+}
+function isValidStatus(s) {
+  return s === "open" || s === "resolved" || s === "wontfix";
+}
+function migrateComments(raws) {
+  if (!Array.isArray(raws)) return [];
+  const out = [];
+  for (const raw of raws) {
+    if (!raw || typeof raw !== "object") continue;
+    out.push(migrateComment(raw));
+  }
+  return out;
+}
+function needsPersist(raws) {
+  if (!Array.isArray(raws)) return false;
+  for (const raw of raws) {
+    if (!raw || typeof raw !== "object") continue;
+    const c = raw;
+    if (c.schemaVersion !== SCHEMA_VERSION) return true;
+    if ("fingerprint" in c) return true;
+    if (!Array.isArray(c.replies)) return true;
+    if (!Array.isArray(c.attachments)) return true;
+    if (!Array.isArray(c.mentions)) return true;
+  }
+  return false;
+}
+
+// src/storage.ts
+var key = (ns) => `vizu:comments:${ns}`;
+var LocalStorageAdapter = class {
+  async load(namespace) {
+    return readArray(namespace);
+  }
+  async addComment(namespace, comment) {
+    const list = readArray(namespace);
+    list.push(comment);
+    writeArray(namespace, list);
+  }
+  async updateComment(namespace, id, patch) {
+    const list = readArray(namespace);
+    const idx = list.findIndex((c) => c.id === id);
+    if (idx === -1) return null;
+    const next = { ...list[idx], ...patch, id: list[idx].id };
+    list[idx] = next;
+    writeArray(namespace, list);
+    return next;
+  }
+  async removeComment(namespace, id) {
+    const list = readArray(namespace);
+    writeArray(namespace, list.filter((c) => c.id !== id));
+  }
+  async setAll(namespace, comments) {
+    writeArray(namespace, comments);
+  }
+  async clear(namespace) {
+    if (typeof localStorage === "undefined") return;
+    localStorage.removeItem(key(namespace));
+  }
+  async addReply(namespace, commentId, reply) {
+    const list = readArray(namespace);
+    const idx = list.findIndex((c) => c.id === commentId);
+    if (idx === -1) return null;
+    const next = { ...list[idx], replies: [...list[idx].replies ?? [], reply] };
+    list[idx] = next;
+    writeArray(namespace, list);
+    return next;
+  }
+  async removeReply(namespace, commentId, replyId) {
+    const list = readArray(namespace);
+    const idx = list.findIndex((c) => c.id === commentId);
+    if (idx === -1) return null;
+    const next = {
+      ...list[idx],
+      replies: (list[idx].replies ?? []).filter((r) => r.id !== replyId)
+    };
+    list[idx] = next;
+    writeArray(namespace, list);
+    return next;
+  }
+};
+function readArray(namespace) {
+  if (typeof localStorage === "undefined") return [];
+  const raw = localStorage.getItem(key(namespace));
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? migrateComments(parsed) : [];
+  } catch {
+    return [];
+  }
+}
+function writeArray(namespace, comments) {
+  if (typeof localStorage === "undefined") return;
+  localStorage.setItem(key(namespace), JSON.stringify(comments));
+}
+var InMemoryStorageAdapter = class {
+  constructor() {
+    this.store = /* @__PURE__ */ new Map();
+  }
+  async load(namespace) {
+    return [...this.store.get(namespace) || []];
+  }
+  async addComment(namespace, comment) {
+    const list = this.store.get(namespace) ?? [];
+    this.store.set(namespace, [...list, comment]);
+  }
+  async updateComment(namespace, id, patch) {
+    const list = this.store.get(namespace) ?? [];
+    const idx = list.findIndex((c) => c.id === id);
+    if (idx === -1) return null;
+    const next = { ...list[idx], ...patch, id: list[idx].id };
+    const copy = [...list];
+    copy[idx] = next;
+    this.store.set(namespace, copy);
+    return next;
+  }
+  async removeComment(namespace, id) {
+    const list = this.store.get(namespace) ?? [];
+    this.store.set(
+      namespace,
+      list.filter((c) => c.id !== id)
+    );
+  }
+  async setAll(namespace, comments) {
+    this.store.set(namespace, [...comments]);
+  }
+  async clear(namespace) {
+    this.store.delete(namespace);
+  }
+  async addReply(namespace, commentId, reply) {
+    const list = this.store.get(namespace) ?? [];
+    const idx = list.findIndex((c) => c.id === commentId);
+    if (idx === -1) return null;
+    const next = { ...list[idx], replies: [...list[idx].replies ?? [], reply] };
+    const copy = [...list];
+    copy[idx] = next;
+    this.store.set(namespace, copy);
+    return next;
+  }
+  async removeReply(namespace, commentId, replyId) {
+    const list = this.store.get(namespace) ?? [];
+    const idx = list.findIndex((c) => c.id === commentId);
+    if (idx === -1) return null;
+    const next = {
+      ...list[idx],
+      replies: (list[idx].replies ?? []).filter((r) => r.id !== replyId)
+    };
+    const copy = [...list];
+    copy[idx] = next;
+    this.store.set(namespace, copy);
+    return next;
+  }
+};
+var NullStorageAdapter = class {
+  async load() {
+    return [];
+  }
+  async addComment() {
+  }
+  async updateComment() {
+    return null;
+  }
+  async removeComment() {
+  }
+  async setAll() {
+  }
+  async clear() {
+  }
+};
+function isV1Adapter(x) {
+  if (!x || typeof x !== "object") return false;
+  const o = x;
+  return typeof o.load === "function" && typeof o.save === "function" && typeof o.clear === "function" && typeof o.addComment !== "function";
+}
+function wrapV1Adapter(v1) {
+  if (!isV1Adapter(v1)) return v1;
+  let warned = false;
+  const warnOnce = () => {
+    if (warned) return;
+    warned = true;
+    if (typeof console !== "undefined") {
+      console.warn(
+        "[vizu] StorageAdapter v1 detected. Per-comment ops are emulated via full-array rewrites \u2014 upgrade your adapter to the v2 interface (addComment / updateComment / removeComment / setAll / load / clear) when you can."
+      );
+    }
+  };
+  return {
+    async load(namespace) {
+      warnOnce();
+      return v1.load(namespace);
+    },
+    async addComment(namespace, comment) {
+      warnOnce();
+      const list = await v1.load(namespace);
+      list.push(comment);
+      await v1.save(namespace, list);
+    },
+    async updateComment(namespace, id, patch) {
+      warnOnce();
+      const list = await v1.load(namespace);
+      const idx = list.findIndex((c) => c.id === id);
+      if (idx === -1) return null;
+      const next = { ...list[idx], ...patch, id: list[idx].id };
+      list[idx] = next;
+      await v1.save(namespace, list);
+      return next;
+    },
+    async removeComment(namespace, id) {
+      warnOnce();
+      const list = await v1.load(namespace);
+      await v1.save(
+        namespace,
+        list.filter((c) => c.id !== id)
+      );
+    },
+    async setAll(namespace, comments) {
+      warnOnce();
+      await v1.save(namespace, comments);
+    },
+    async clear(namespace) {
+      await v1.clear(namespace);
+    }
+  };
+}
+
+// src/cloud.ts
+var DEFAULT_API_URL = "https://vizu.unhingged.com";
+var POPUP_WIDTH = 480;
+var POPUP_HEIGHT = 640;
+var CloudStorageAdapter = class {
+  constructor(opts) {
+    /** Cached current-tab token. Mirrored to sessionStorage. */
+    this.cachedToken = null;
+    /** Single-flight: at most one popup at a time. Subsequent requests await this. */
+    this.pendingAuth = null;
+    this.workspace = opts.workspace;
+    this.apiUrl = (opts.apiUrl ?? DEFAULT_API_URL).replace(/\/$/, "");
+    this.autoSignIn = opts.autoSignIn !== false;
+    this.cachedToken = this.readStoredToken();
+  }
+  /* ─── StorageAdapter v2 ───────────────────────────────────────────── */
+  async load(_namespace) {
+    const out = [];
+    let cursor = null;
+    do {
+      const url = new URL(this.apiUrl + "/api/comments");
+      url.searchParams.set("workspace", this.workspace);
+      url.searchParams.set("limit", "100");
+      if (cursor) url.searchParams.set("cursor", cursor);
+      const res = await this.fetchAuthed(url.toString(), { method: "GET" });
+      const json = await this.parseJson(res);
+      if (!res.ok) throw apiErr(res.status, json);
+      const page = Array.isArray(json.comments) ? json.comments : [];
+      out.push(...migrateComments(page));
+      cursor = typeof json.nextCursor === "string" ? json.nextCursor : null;
+    } while (cursor);
+    return out;
+  }
+  async addComment(_namespace, comment) {
+    const res = await this.fetchAuthed(this.apiUrl + "/api/comments", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ workspace: this.workspace, comment })
+    });
+    const json = await this.parseJson(res);
+    if (!res.ok) throw apiErr(res.status, json);
+  }
+  async updateComment(_namespace, id, patch) {
+    const url = new URL(this.apiUrl + "/api/comments/" + encodeURIComponent(id));
+    url.searchParams.set("workspace", this.workspace);
+    const res = await this.fetchAuthed(url.toString(), {
+      method: "PATCH",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(patch)
+    });
+    if (res.status === 404) return null;
+    const json = await this.parseJson(res);
+    if (!res.ok) throw apiErr(res.status, json);
+    return migrateComment(json.comment);
+  }
+  async removeComment(_namespace, id) {
+    const url = new URL(this.apiUrl + "/api/comments/" + encodeURIComponent(id));
+    url.searchParams.set("workspace", this.workspace);
+    const res = await this.fetchAuthed(url.toString(), { method: "DELETE" });
+    if (res.status === 404) return;
+    if (!res.ok) {
+      const json = await this.parseJson(res);
+      throw apiErr(res.status, json);
+    }
+  }
+  async setAll(namespace, comments) {
+    await this.clear(namespace);
+    for (const c of comments) {
+      await this.addComment(namespace, c);
+    }
+  }
+  async clear(_namespace) {
+    const url = new URL(this.apiUrl + "/api/comments");
+    url.searchParams.set("workspace", this.workspace);
+    url.searchParams.set("all", "true");
+    const res = await this.fetchAuthed(url.toString(), { method: "DELETE" });
+    if (res.status === 404) return;
+    if (!res.ok) {
+      const json = await this.parseJson(res);
+      throw apiErr(res.status, json);
+    }
+  }
+  async addReply(_namespace, commentId, reply) {
+    const url = new URL(this.apiUrl + "/api/comments/" + encodeURIComponent(commentId) + "/replies");
+    url.searchParams.set("workspace", this.workspace);
+    const res = await this.fetchAuthed(url.toString(), {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(reply)
+    });
+    if (res.status === 404) return null;
+    const json = await this.parseJson(res);
+    if (!res.ok) throw apiErr(res.status, json);
+    return json?.comment ? migrateComment(json.comment) : null;
+  }
+  async removeReply(_namespace, commentId, replyId) {
+    const url = new URL(
+      this.apiUrl + "/api/comments/" + encodeURIComponent(commentId) + "/replies/" + encodeURIComponent(replyId)
+    );
+    url.searchParams.set("workspace", this.workspace);
+    const res = await this.fetchAuthed(url.toString(), { method: "DELETE" });
+    if (res.status === 404) return null;
+    if (!res.ok) {
+      const json = await this.parseJson(res);
+      throw apiErr(res.status, json);
+    }
+    return null;
+  }
+  /**
+   * Upload a file as multipart/form-data to the host backend, which
+   * forwards to Vercel Blob server-side. Stays under the 4.5 MB Vercel
+   * function body cap (our own 5 MB attachment cap will be enforced
+   * server-side before that's hit).
+   *
+   * Deliberately doesn't use `@vercel/blob/client`'s direct-upload flow:
+   *   - keeps `@vizu/core` free of any `@vercel/blob` dependency
+   *     (script-tag and local-only consumers don't pull blob code)
+   *   - the multipart path is one round-trip; the direct-upload flow
+   *     is two (signed URL + upload). For attachments capped at 5 MB,
+   *     the savings don't justify the dep cost.
+   */
+  async uploadAttachment(_namespace, file) {
+    const form = new FormData();
+    form.append("file", file, file.name);
+    const url = new URL(this.apiUrl + "/api/uploads");
+    url.searchParams.set("workspace", this.workspace);
+    const res = await this.fetchAuthed(url.toString(), {
+      method: "POST",
+      body: form
+      // Don't set content-type; the browser fills in the multipart boundary.
+    });
+    const json = await this.parseJson(res);
+    if (!res.ok) throw apiErr(res.status, json);
+    if (!json?.url || typeof json.url !== "string") {
+      throw apiErr(500, { error: "upload_failed", message: "Backend did not return a URL." });
+    }
+    return {
+      id: uuid(),
+      url: json.url,
+      mimeType: file.type || "application/octet-stream",
+      sizeBytes: file.size,
+      uploadedAt: Date.now(),
+      filename: file.name
+    };
+  }
+  getAuthContext() {
+    if (!this.cachedToken) return null;
+    return {
+      userId: this.cachedToken.userId,
+      token: this.cachedToken.token,
+      expiresAt: this.cachedToken.expiresAt
+    };
+  }
+  /* ─── Auth ────────────────────────────────────────────────────────── */
+  isExpired(t) {
+    if (!t) return true;
+    const exp = new Date(t.expiresAt).getTime();
+    return !Number.isFinite(exp) || exp - Date.now() < 3e4;
+  }
+  readStoredToken() {
+    if (typeof sessionStorage === "undefined") return null;
+    const raw = sessionStorage.getItem(this.sessionKey());
+    if (!raw) return null;
+    try {
+      const parsed = JSON.parse(raw);
+      if (this.isExpired(parsed)) {
+        sessionStorage.removeItem(this.sessionKey());
+        return null;
+      }
+      return parsed;
+    } catch {
+      return null;
+    }
+  }
+  writeStoredToken(t) {
+    this.cachedToken = t;
+    if (typeof sessionStorage !== "undefined") {
+      sessionStorage.setItem(this.sessionKey(), JSON.stringify(t));
+    }
+  }
+  clearStoredToken() {
+    this.cachedToken = null;
+    if (typeof sessionStorage !== "undefined") {
+      sessionStorage.removeItem(this.sessionKey());
+    }
+  }
+  sessionKey() {
+    return `vizu:cloud-token:${this.workspace}`;
+  }
+  /**
+   * Resolve a valid token, opening the popup if needed.
+   *
+   * Single-flight: simultaneous requests await one popup, not N.
+   * Caller-friendly: throws a Error with `.code === 'auth_canceled'`
+   * if the user closes the popup; hosts can catch this and present
+   * a friendly message instead of a blank failure.
+   */
+  async resolveToken() {
+    if (this.cachedToken && !this.isExpired(this.cachedToken)) return this.cachedToken;
+    const fresh = this.readStoredToken();
+    if (fresh) {
+      this.cachedToken = fresh;
+      return fresh;
+    }
+    if (!this.autoSignIn) {
+      throw makeAuthError("auth_required", "Sign-in required; autoSignIn is disabled.");
+    }
+    if (!this.pendingAuth) {
+      this.pendingAuth = this.openSignInPopup().then((t) => {
+        this.writeStoredToken(t);
+        return t;
+      }).finally(() => {
+        this.pendingAuth = null;
+      });
+    }
+    return this.pendingAuth;
+  }
+  openSignInPopup() {
+    return new Promise((resolve, reject) => {
+      if (typeof window === "undefined") {
+        return reject(makeAuthError("auth_unavailable", "Sign-in requires a browser environment."));
+      }
+      const apiOrigin = new URL(this.apiUrl).origin;
+      const hostOrigin = window.location.origin;
+      const popupUrl = this.apiUrl + "/connect?workspace=" + encodeURIComponent(this.workspace) + "&origin=" + encodeURIComponent(hostOrigin);
+      const left = Math.max(0, Math.round((window.screen.width - POPUP_WIDTH) / 2));
+      const top = Math.max(0, Math.round((window.screen.height - POPUP_HEIGHT) / 2));
+      const popup = window.open(
+        popupUrl,
+        "vizu-connect",
+        `width=${POPUP_WIDTH},height=${POPUP_HEIGHT},left=${left},top=${top},noopener=no,popup=yes`
+      );
+      if (!popup) {
+        return reject(
+          makeAuthError(
+            "popup_blocked",
+            "Sign-in popup was blocked by the browser. Allow popups for this site and try again."
+          )
+        );
+      }
+      let resolved = false;
+      const onMessage = (e) => {
+        if (e.origin !== apiOrigin) return;
+        const data = e.data;
+        if (!data || data.type !== "vizu:auth") return;
+        if (data.workspace !== this.workspace) return;
+        if (typeof data.token !== "string" || typeof data.expiresAt !== "string" || typeof data.userId !== "string") return;
+        resolved = true;
+        cleanup();
+        resolve({ token: data.token, expiresAt: data.expiresAt, userId: data.userId });
+      };
+      const onPoll = window.setInterval(() => {
+        if (popup.closed) {
+          if (!resolved) {
+            cleanup();
+            reject(makeAuthError("auth_canceled", "Sign-in popup was closed before completing."));
+          }
+        }
+      }, 500);
+      function cleanup() {
+        window.clearInterval(onPoll);
+        window.removeEventListener("message", onMessage);
+      }
+      window.addEventListener("message", onMessage);
+    });
+  }
+  /* ─── Fetch wrapper ───────────────────────────────────────────────── */
+  /**
+   * Perform an authenticated fetch with one-shot retry on 401 (re-opens
+   * the popup if the token expired during the request). 4xx other than
+   * 401 / 404 throw; 5xx throws; 2xx returns.
+   */
+  async fetchAuthed(url, init, retried = false) {
+    const token = await this.resolveToken();
+    const headers = new Headers(init.headers);
+    headers.set("authorization", `Bearer ${token.token}`);
+    const res = await fetch(url, { ...init, headers, credentials: "omit" });
+    if (res.status === 401 && !retried) {
+      this.clearStoredToken();
+      return this.fetchAuthed(url, init, true);
+    }
+    return res;
+  }
+  async parseJson(res) {
+    try {
+      const text = await res.text();
+      return text ? JSON.parse(text) : null;
+    } catch {
+      return null;
+    }
+  }
+};
+function makeAuthError(code, message) {
+  const err = new Error(message);
+  err.code = code;
+  return err;
+}
+function apiErr(status, body) {
+  const code = body?.error === "origin_not_allowed" ? "origin_not_allowed" : body?.error === "not_found" ? "workspace_not_found" : "http_error";
+  const err = new Error(body?.message ?? `HTTP ${status}`);
+  err.code = code;
+  err.status = status;
+  err.body = body;
+  return err;
+}
+
+// src/highlighter.ts
+var IGNORE_SELECTOR = "[data-vizu-root], [data-vizu-ignore], script, style, link, meta, head";
+var Highlighter = class {
+  constructor(root, extraIgnore, onClick, onCurrentChange) {
+    this.current = null;
+    this.active = false;
+    this.paused = false;
+    this.handleMove = (e) => {
+      if (this.paused) {
+        this.setCurrent(null);
+        this.overlay.style.display = "none";
+        return;
+      }
+      const target = document.elementFromPoint(e.clientX, e.clientY);
+      if (!target || target === this.current) return;
+      if (this.shouldIgnore(target)) {
+        this.setCurrent(null);
+        this.overlay.style.display = "none";
+        return;
+      }
+      this.setCurrent(target);
+      this.updateOverlay();
+    };
+    this.handleClick = (e) => {
+      const target = document.elementFromPoint(e.clientX, e.clientY);
+      if (!target) return;
+      if (this.shouldIgnore(target)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.onClick(target, e);
+    };
+    this.handleScroll = () => {
+      if (!this.current) return;
+      this.updateOverlay();
+    };
+    this.root = root;
+    this.extraIgnore = extraIgnore;
+    this.onClick = onClick;
+    this.onCurrentChange = onCurrentChange ?? null;
+    this.overlay = document.createElement("div");
+    this.overlay.className = "vz-highlight";
+    this.overlay.style.display = "none";
+    this.root.appendChild(this.overlay);
+  }
+  setCurrent(el) {
+    if (this.current === el) return;
+    this.current = el;
+    this.onCurrentChange?.(el);
+  }
+  start() {
+    if (this.active) return;
+    this.active = true;
+    document.addEventListener("mousemove", this.handleMove, true);
+    document.addEventListener("click", this.handleClick, true);
+    document.addEventListener("scroll", this.handleScroll, true);
+    window.addEventListener("resize", this.handleScroll);
+  }
+  stop() {
+    if (!this.active) return;
+    this.active = false;
+    document.removeEventListener("mousemove", this.handleMove, true);
+    document.removeEventListener("click", this.handleClick, true);
+    document.removeEventListener("scroll", this.handleScroll, true);
+    window.removeEventListener("resize", this.handleScroll);
+    this.overlay.style.display = "none";
+    this.setCurrent(null);
+  }
+  shouldIgnore(el) {
+    if (el === document.documentElement || el === document.body) return true;
+    if (isInside(el, IGNORE_SELECTOR)) return true;
+    for (const sel of this.extraIgnore) {
+      try {
+        if (isInside(el, sel)) return true;
+      } catch {
+      }
+    }
+    return false;
+  }
+  setPaused(paused) {
+    this.paused = paused;
+    if (paused) {
+      this.setCurrent(null);
+      this.overlay.style.display = "none";
+    }
+  }
+  isPaused() {
+    return this.paused;
+  }
+  updateOverlay() {
+    if (!this.current) return;
+    const rect = this.current.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+      this.overlay.style.display = "none";
+      return;
+    }
+    this.overlay.style.display = "block";
+    this.overlay.style.left = rect.left + "px";
+    this.overlay.style.top = rect.top + "px";
+    this.overlay.style.width = rect.width + "px";
+    this.overlay.style.height = rect.height + "px";
+  }
+  destroy() {
+    this.stop();
+    this.overlay.remove();
+  }
+};
+
+// src/popover.ts
+function cssEscape(s) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(s);
+  return s.replace(/["\\]/g, "\\$&");
+}
+function renderRepliesHtml(c) {
+  const replies = c.replies ?? [];
+  const items = replies.map(
+    (r) => `
+      <div class="vz-reply" data-reply-id="${escapeHtml(r.id)}">
+        ${r.author ? `<div class="vz-comment-author">${avatarHtml(r.author)} <span class="vz-comment-author-name">${escapeHtml(r.author.name)}</span></div>` : ""}
+        <div class="vz-reply-text">${escapeHtml(r.text)}</div>
+        <div class="vz-comment-meta">
+          <span>${escapeHtml(formatTime(typeof r.createdAt === "number" ? r.createdAt : new Date(r.createdAt).getTime()))}</span>
+          <button class="vz-comment-delete" data-vz="delete-reply" data-comment-id="${escapeHtml(c.id)}" data-reply-id="${escapeHtml(r.id)}">delete</button>
+        </div>
+      </div>
+    `
+  ).join("");
+  return `
+    <div class="vz-replies" data-comment-id="${escapeHtml(c.id)}" hidden>
+      <div class="vz-reply-list">${items}</div>
+      <div class="vz-reply-form">
+        <textarea class="vz-reply-input" placeholder="Reply\u2026" rows="2" data-comment-id="${escapeHtml(c.id)}"></textarea>
+        <button class="vz-btn vz-btn-primary vz-btn-reply" data-vz="send-reply" data-id="${escapeHtml(c.id)}">Send</button>
+      </div>
+    </div>
+  `;
+}
+var Popover = class {
+  constructor(root, callbacks) {
+    this.currentUser = null;
+    /** All elements this in-progress comment is anchored to. First one positions the popover. */
+    this.anchorTargets = [];
+    this.anchorFingerprints = [];
+    /** Refs the user inserted via # picker during this session, keyed by refId. */
+    this.pendingRefs = {};
+    /** Attachments uploaded during this session, persisted into `comment.attachments` on save. */
+    this.pendingAttachments = [];
+    this.handleEditorKey = (e) => {
+      const editor = e.currentTarget;
+      if (e.key === "#") {
+        e.preventDefault();
+        const savedRange = this.saveRange();
+        this.callbacks.onStartReferencePick(
+          (fp) => this.insertChip(fp, savedRange),
+          () => {
+            editor.focus();
+            this.restoreRange(savedRange);
+          }
+        );
+        return;
+      }
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        this.save();
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this.callbacks.onClose();
+      }
+    };
+    this.handleEditorPaste = (e) => {
+      if (this.callbacks.canUploadAttachments()) {
+        const items = e.clipboardData?.items ?? null;
+        if (items) {
+          const imageFiles = [];
+          for (let i = 0; i < items.length; i++) {
+            const it = items[i];
+            if (it.kind === "file" && it.type.startsWith("image/")) {
+              const f = it.getAsFile();
+              if (f) imageFiles.push(f);
+            }
+          }
+          if (imageFiles.length > 0) {
+            e.preventDefault();
+            for (const f of imageFiles) void this.uploadAndAppend(f);
+            return;
+          }
+        }
+      }
+      e.preventDefault();
+      const text = e.clipboardData?.getData("text/plain") ?? "";
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        const r = sel.getRangeAt(0);
+        r.deleteContents();
+        r.insertNode(document.createTextNode(text));
+        r.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(r);
+      }
+    };
+    /* ─── Attachment handlers ────────────────────────────────────────── */
+    this.handleDragOver = (e) => {
+      if (!e.dataTransfer || !Array.from(e.dataTransfer.types).includes("Files")) return;
+      e.preventDefault();
+      const hint = this.el.querySelector('[data-vz="drop-hint"]');
+      hint?.removeAttribute("hidden");
+    };
+    this.handleDragLeave = (e) => {
+      const wrap = e.currentTarget;
+      if (e.relatedTarget instanceof Node && wrap.contains(e.relatedTarget)) return;
+      const hint = this.el.querySelector('[data-vz="drop-hint"]');
+      hint?.setAttribute("hidden", "");
+    };
+    this.handleDrop = (e) => {
+      e.preventDefault();
+      const hint = this.el.querySelector('[data-vz="drop-hint"]');
+      hint?.setAttribute("hidden", "");
+      if (!e.dataTransfer) return;
+      const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
+      for (const f of files) void this.uploadAndAppend(f);
+    };
+    this.handleFileChange = (e) => {
+      const input = e.currentTarget;
+      const files = input.files ? Array.from(input.files) : [];
+      for (const f of files) void this.uploadAndAppend(f);
+      input.value = "";
+    };
+    this.handleClick = (e) => {
+      const target = e.target;
+      const removeBtn = target.closest('[data-vz="remove-anchor"]');
+      if (removeBtn) {
+        e.stopPropagation();
+        const key2 = removeBtn.getAttribute("data-fp-key");
+        if (key2) this.removeAnchor(key2);
+        return;
+      }
+      const refEl = target.closest('[data-vz="ref"]');
+      if (refEl) {
+        const commentId = refEl.getAttribute("data-comment-id");
+        const refIdAttr = refEl.getAttribute("data-ref-id");
+        if (commentId && refIdAttr) {
+          e.stopPropagation();
+          this.callbacks.onJumpToReference(commentId, refIdAttr);
+        }
+        return;
+      }
+      const action = target.getAttribute("data-vz");
+      if (action === "close") this.callbacks.onClose();
+      else if (action === "save") this.save();
+      else if (action === "mention") {
+        e.preventDefault();
+        this.insertMentionChip(this.currentUser);
+      } else if (action === "upload") {
+        e.preventDefault();
+        const input = this.el.querySelector('[data-vz="file-input"]');
+        input?.click();
+      } else if (action === "remove-attachment") {
+        e.preventDefault();
+        const id = target.getAttribute("data-attachment-id");
+        if (id) {
+          this.pendingAttachments = this.pendingAttachments.filter((a) => a.id !== id);
+          this.renderAttachmentList();
+        }
+      } else if (action === "delete") {
+        const id = target.getAttribute("data-id");
+        if (id) this.callbacks.onDelete(id);
+      } else if (action === "toggle-reply") {
+        e.preventDefault();
+        const id = target.getAttribute("data-id");
+        if (!id) return;
+        const block = this.el.querySelector(`.vz-replies[data-comment-id="${cssEscape(id)}"]`);
+        if (!block) return;
+        const isHidden = block.hasAttribute("hidden");
+        if (isHidden) {
+          block.removeAttribute("hidden");
+          const input = block.querySelector(".vz-reply-input");
+          input?.focus();
+        } else {
+          block.setAttribute("hidden", "");
+        }
+      } else if (action === "send-reply") {
+        e.preventDefault();
+        const id = target.getAttribute("data-id");
+        if (!id) return;
+        const input = this.el.querySelector(
+          `.vz-reply-input[data-comment-id="${cssEscape(id)}"]`
+        );
+        const text = input?.value.trim() ?? "";
+        if (!text) return;
+        this.callbacks.onAddReply(id, text);
+        if (input) input.value = "";
+      } else if (action === "delete-reply") {
+        e.preventDefault();
+        const commentId = target.getAttribute("data-comment-id");
+        const replyId = target.getAttribute("data-reply-id");
+        if (commentId && replyId) this.callbacks.onDeleteReply(commentId, replyId);
+      }
+    };
+    this.root = root;
+    this.callbacks = callbacks;
+    this.el = document.createElement("div");
+    this.el.className = "vz-popover";
+    this.el.style.display = "none";
+    this.el.addEventListener("click", this.handleClick);
+    this.root.appendChild(this.el);
+  }
+  setUser(user) {
+    this.currentUser = user;
+  }
+  /**
+   * Open the popover anchored to one OR more elements. The popover positions
+   * itself relative to `targets[0]` but commits with every fingerprint in `fingerprints`.
+   */
+  open(targets, fingerprints, existingComments) {
+    this.anchorTargets = [...targets];
+    this.anchorFingerprints = [...fingerprints];
+    this.pendingRefs = {};
+    this.render(existingComments);
+    this.position();
+  }
+  /** Refresh the rendered comment list (called by host when comments change). */
+  update(existingComments) {
+    if (!this.anchorTargets.length) return;
+    this.render(existingComments);
+    this.position();
+  }
+  /** Add another anchor to the in-progress comment (Shift+Click flow). */
+  addAnchor(fp, target) {
+    const key2 = fingerprintKey(fp);
+    if (this.anchorFingerprints.some((x) => fingerprintKey(x) === key2)) return false;
+    this.anchorFingerprints.push(fp);
+    if (target) this.anchorTargets.push(target);
+    this.callbacks.onAnchorsChanged([...this.anchorFingerprints]);
+    this.renderAnchorList();
+    this.updateHeader();
+    return true;
+  }
+  /** Remove an anchor by fingerprint key. Never removes the last anchor. */
+  removeAnchor(key2) {
+    if (this.anchorFingerprints.length <= 1) return false;
+    const idx = this.anchorFingerprints.findIndex((x) => fingerprintKey(x) === key2);
+    if (idx < 0) return false;
+    this.anchorFingerprints.splice(idx, 1);
+    this.anchorTargets.splice(idx, 1);
+    this.callbacks.onAnchorsChanged([...this.anchorFingerprints]);
+    this.renderAnchorList();
+    this.updateHeader();
+    return true;
+  }
+  updateHeader() {
+    const header = this.el.querySelector(".vz-popover-header span:first-child");
+    if (!header) return;
+    header.textContent = this.anchorFingerprints.length > 1 ? `Comment on ${this.anchorFingerprints.length} elements` : "Comment";
+  }
+  /** Recompute viewport position; called by host on scroll/resize. */
+  reposition() {
+    if (!this.anchorTargets.length) return;
+    this.position();
+  }
+  close() {
+    this.el.style.display = "none";
+    this.anchorTargets = [];
+    this.anchorFingerprints = [];
+    this.pendingRefs = {};
+  }
+  isOpen() {
+    return this.anchorTargets.length > 0;
+  }
+  getAnchors() {
+    return [...this.anchorFingerprints];
+  }
+  getAnchorTargets() {
+    return [...this.anchorTargets];
+  }
+  render(comments) {
+    if (!this.anchorTargets.length) return;
+    const primary = this.anchorTargets[0];
+    const cls = Array.from(primary.classList).filter((c) => !c.startsWith("vz-") && !c.startsWith("vizu-")).slice(0, 2);
+    const label = primary.tagName.toLowerCase() + (primary.id ? "#" + primary.id : "") + (cls.length ? "." + cls.join(".") : "");
+    const text = (primary.innerText || "").trim();
+    const textPreview = text.slice(0, 60);
+    const authoringLine = this.currentUser ? `<div class="vz-comment-author">${avatarHtml(this.currentUser)} <span class="vz-comment-author-name">${escapeHtml(this.currentUser.name)}</span> <span>\xB7 you</span></div>` : "";
+    this.el.innerHTML = `
+      <div class="vz-popover-header">
+        <span>${this.anchorFingerprints.length > 1 ? `Comment on ${this.anchorFingerprints.length} elements` : "Comment"}</span>
+        <button class="vz-popover-close" data-vz="close" aria-label="Close">\xD7</button>
+      </div>
+      <div class="vz-target-label">${escapeHtml(label)}${textPreview ? " \xB7 &ldquo;" + escapeHtml(textPreview) + (text.length > 60 ? "\u2026" : "") + "&rdquo;" : ""}</div>
+      <div class="vz-anchor-list-wrap"></div>
+      <div class="vz-comment-list">
+        ${comments.length === 0 ? '<div class="vz-empty">No comments yet.</div>' : comments.map(
+      (c) => `
+            <div class="vz-comment" data-comment-id="${escapeHtml(c.id)}">
+              ${c.author ? `<div class="vz-comment-author">${avatarHtml(c.author)} <span class="vz-comment-author-name">${escapeHtml(c.author.name)}</span></div>` : ""}
+              <div>${renderCommentText(c.text, c.id)}</div>
+              ${renderAttachmentsHtml(c.attachments)}
+              <div class="vz-comment-meta">
+                <span>${escapeHtml(formatTime(c.createdAt))}</span>
+                <span class="vz-comment-actions">
+                  <button class="vz-comment-reply-toggle" data-vz="toggle-reply" data-id="${escapeHtml(c.id)}">${(c.replies?.length ?? 0) > 0 ? `${c.replies.length} ${c.replies.length === 1 ? "reply" : "replies"}` : "reply"}</button>
+                  <button class="vz-comment-delete" data-vz="delete" data-id="${escapeHtml(c.id)}">delete</button>
+                </span>
+              </div>
+              ${renderRepliesHtml(c)}
+            </div>
+          `
+    ).join("")}
+      </div>
+      ${authoringLine}
+      <div class="vz-editor-wrap">
+        <div class="vz-textarea" contenteditable="true" data-placeholder="Leave a comment\u2026 # to reference. \u2318/Ctrl+Enter to save. Shift+Click another element to anchor to it too."></div>
+        <div class="vz-attachment-drop-hint" data-vz="drop-hint" hidden>Drop image to attach</div>
+      </div>
+      <div class="vz-attachment-list" data-vz="attachment-list"></div>
+      <div class="vz-popover-actions">
+        <button class="vz-btn vz-btn-ghost" data-vz="close">Close</button>
+        ${this.callbacks.canUploadAttachments() ? `<button class="vz-btn vz-btn-ghost vz-btn-upload" data-vz="upload" title="Attach an image">+ image</button>` : ""}
+        ${this.currentUser ? `<button class="vz-btn vz-btn-ghost vz-btn-mention" data-vz="mention" title="Mention ${escapeHtml(this.currentUser.name)}">@ mention</button>` : ""}
+        <button class="vz-btn vz-btn-primary" data-vz="save">Save</button>
+      </div>
+      <input type="file" class="vz-file-input" data-vz="file-input" accept="image/png,image/jpeg,image/webp,image/gif,image/svg+xml" hidden />
+    `;
+    this.el.style.display = "flex";
+    this.renderAnchorList();
+    this.renderAttachmentList();
+    const editor = this.el.querySelector(".vz-textarea");
+    editor.focus();
+    editor.addEventListener("keydown", this.handleEditorKey);
+    editor.addEventListener("paste", this.handleEditorPaste);
+    const wrap = this.el.querySelector(".vz-editor-wrap");
+    if (wrap && this.callbacks.canUploadAttachments()) {
+      wrap.addEventListener("dragover", this.handleDragOver);
+      wrap.addEventListener("dragleave", this.handleDragLeave);
+      wrap.addEventListener("drop", this.handleDrop);
+    }
+    const fileInput = this.el.querySelector('[data-vz="file-input"]');
+    if (fileInput) {
+      fileInput.addEventListener("change", this.handleFileChange);
+    }
+  }
+  renderAnchorList() {
+    const wrap = this.el.querySelector(".vz-anchor-list-wrap");
+    if (!wrap) return;
+    if (this.anchorFingerprints.length <= 1) {
+      wrap.innerHTML = "";
+      return;
+    }
+    const chips = this.anchorFingerprints.map((fp) => {
+      const key2 = fingerprintKey(fp);
+      const label = fingerprintLabel(fp);
+      return `<span class="vz-anchor-chip" data-fp-key="${escapeHtml(key2)}">${escapeHtml(label)}<button class="vz-anchor-chip-remove" data-vz="remove-anchor" data-fp-key="${escapeHtml(key2)}" aria-label="Remove anchor">\xD7</button></span>`;
+    }).join("");
+    wrap.innerHTML = `
+      <div class="vz-anchor-hint">Anchored to ${this.anchorFingerprints.length} elements:</div>
+      <div class="vz-anchor-list">${chips}</div>
+    `;
+  }
+  async uploadAndAppend(file) {
+    if (!this.callbacks.canUploadAttachments()) return;
+    const placeholderId = "upload-" + Math.random().toString(36).slice(2, 9);
+    const placeholder = {
+      id: placeholderId,
+      url: "",
+      mimeType: file.type || "application/octet-stream",
+      sizeBytes: file.size,
+      uploadedAt: Date.now(),
+      filename: file.name
+    };
+    this.pendingAttachments.push(placeholder);
+    this.renderAttachmentList(placeholderId);
+    try {
+      const att = await this.callbacks.onUploadAttachment(file);
+      const idx = this.pendingAttachments.findIndex((a) => a.id === placeholderId);
+      if (idx >= 0) this.pendingAttachments[idx] = att;
+      else this.pendingAttachments.push(att);
+      this.renderAttachmentList();
+    } catch (err) {
+      this.pendingAttachments = this.pendingAttachments.filter((a) => a.id !== placeholderId);
+      this.renderAttachmentList();
+      if (typeof console !== "undefined") {
+        console.warn("[vizu] attachment upload failed", err);
+      }
+    }
+  }
+  renderAttachmentList(uploadingId) {
+    const list = this.el.querySelector('[data-vz="attachment-list"]');
+    if (!list) return;
+    if (this.pendingAttachments.length === 0) {
+      list.innerHTML = "";
+      return;
+    }
+    list.innerHTML = this.pendingAttachments.map((a) => {
+      const isUploading = a.id === uploadingId || a.url === "";
+      const preview = isUploading ? `<div class="vz-attachment-thumb vz-attachment-thumb-loading">\u2026</div>` : a.mimeType.startsWith("image/") ? `<img class="vz-attachment-thumb" src="${escapeHtml(a.url)}" alt="${escapeHtml(a.filename ?? "")}" />` : `<div class="vz-attachment-thumb">\u{1F4C4}</div>`;
+      return `
+          <div class="vz-attachment-item" data-attachment-id="${escapeHtml(a.id)}">
+            ${preview}
+            <button class="vz-attachment-remove" data-vz="remove-attachment" data-attachment-id="${escapeHtml(a.id)}" aria-label="Remove attachment">\xD7</button>
+          </div>
+        `;
+    }).join("");
+  }
+  saveRange() {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return null;
+    return sel.getRangeAt(0).cloneRange();
+  }
+  restoreRange(r) {
+    if (!r) return;
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(r);
+  }
+  insertChip(fp, range) {
+    const rid = refId();
+    this.pendingRefs[rid] = fp;
+    const label = fingerprintLabel(fp);
+    const chip = document.createElement("span");
+    chip.className = "vz-chip";
+    chip.contentEditable = "false";
+    chip.setAttribute("data-ref-id", rid);
+    chip.textContent = label;
+    const editor = this.el.querySelector(".vz-textarea");
+    editor.focus();
+    this.restoreRange(range);
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) {
+      editor.appendChild(chip);
+      editor.appendChild(document.createTextNode(" "));
+      this.moveCursorToEnd(editor);
+      return;
+    }
+    const r = sel.getRangeAt(0);
+    r.deleteContents();
+    r.insertNode(chip);
+    const space = document.createTextNode(" ");
+    chip.after(space);
+    const newRange = document.createRange();
+    newRange.setStartAfter(space);
+    newRange.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(newRange);
+  }
+  moveCursorToEnd(el) {
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+  }
+  /** Walk the editor and produce the markdown-ish string with ref tokens. */
+  serializeEditor(editor) {
+    const parts = [];
+    const walk = (node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        parts.push(node.textContent || "");
+        return;
+      }
+      if (node.nodeType !== Node.ELEMENT_NODE) return;
+      const el = node;
+      if (el.classList.contains("vz-chip")) {
+        const mid = el.getAttribute("data-mention-id");
+        if (mid) {
+          const raw = el.textContent || "";
+          const name = raw.startsWith("@") ? raw.slice(1) : raw;
+          parts.push(`[@${name}](vizu-mention:${mid})`);
+          return;
+        }
+        const rid = el.getAttribute("data-ref-id");
+        const label = el.textContent || "";
+        if (rid) parts.push(`[#${label}](vizu-ref:${rid})`);
+        return;
+      }
+      if (el.tagName === "BR") {
+        parts.push("\n");
+        return;
+      }
+      if (el.tagName === "DIV" && parts.length && !parts[parts.length - 1].endsWith("\n")) {
+        parts.push("\n");
+      }
+      for (const child of el.childNodes) walk(child);
+    };
+    for (const child of editor.childNodes) walk(child);
+    return parts.join("").trim();
+  }
+  /**
+   * Insert a mention chip for the given user into the editor at the
+   * current caret position. Owner-only ACL in v1: the only callable
+   * "mentionable" user is the current Vizu user (= workspace owner).
+   * Future versions can expand this with an autocomplete dropdown.
+   */
+  insertMentionChip(user) {
+    if (!user || !user.id) return;
+    const editor = this.el.querySelector(".vz-textarea");
+    if (!editor) return;
+    const chip = document.createElement("span");
+    chip.className = "vz-chip vz-chip-mention";
+    chip.contentEditable = "false";
+    chip.setAttribute("data-mention-id", user.id);
+    chip.textContent = "@" + user.name;
+    editor.focus();
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) {
+      editor.appendChild(chip);
+      editor.appendChild(document.createTextNode(" "));
+      this.moveCursorToEnd(editor);
+      return;
+    }
+    const r = sel.getRangeAt(0);
+    r.deleteContents();
+    r.insertNode(chip);
+    const space = document.createTextNode(" ");
+    chip.after(space);
+    const newRange = document.createRange();
+    newRange.setStartAfter(space);
+    newRange.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(newRange);
+  }
+  save() {
+    const editor = this.el.querySelector(".vz-textarea");
+    if (!editor) return;
+    const text = this.serializeEditor(editor);
+    const finishedCount = this.pendingAttachments.filter((a) => a.url).length;
+    if (!text && finishedCount === 0) return;
+    const usedRefs = {};
+    const re = /\[#[^\]]+\]\(vizu-ref:([a-zA-Z0-9_-]+)\)/g;
+    let m;
+    while ((m = re.exec(text)) !== null) {
+      const rid = m[1];
+      if (this.pendingRefs[rid]) usedRefs[rid] = this.pendingRefs[rid];
+    }
+    const mentions = extractMentions(text);
+    const finishedAttachments = this.pendingAttachments.filter((a) => a.url);
+    this.callbacks.onAdd(
+      text,
+      [...this.anchorFingerprints],
+      Object.keys(usedRefs).length ? usedRefs : void 0,
+      mentions.length ? mentions : void 0,
+      finishedAttachments.length ? finishedAttachments : void 0
+    );
+    editor.innerHTML = "";
+    this.pendingRefs = {};
+    this.pendingAttachments = [];
+    this.renderAttachmentList();
+  }
+  position() {
+    const primary = this.anchorTargets[0];
+    if (!primary) return;
+    const rect = primary.getBoundingClientRect();
+    const popRect = this.el.getBoundingClientRect();
+    const pad = 8;
+    let top = rect.bottom + pad;
+    let left = rect.left;
+    if (top + popRect.height > window.innerHeight - pad) {
+      top = rect.top - popRect.height - pad;
+      if (top < pad) top = pad;
+    }
+    if (left + popRect.width > window.innerWidth - pad) {
+      left = window.innerWidth - popRect.width - pad;
+    }
+    if (left < pad) left = pad;
+    this.el.style.top = top + "px";
+    this.el.style.left = left + "px";
+  }
+  destroy() {
+    this.el.removeEventListener("click", this.handleClick);
+    this.el.remove();
+  }
+};
+
+// src/pill.ts
+var Pill = class {
+  constructor(root, callbacks) {
+    this.sidebarOpen = false;
+    this.actions = [];
+    this.commentsCount = 0;
+    this.user = null;
+    this.multiSelectMode = false;
+    this.selectionCount = 0;
+    this.handleClick = (e) => {
+      const btn = e.target.closest("[data-vz]");
+      if (!btn) return;
+      const a = btn.getAttribute("data-vz");
+      if (a === "sidebar") this.callbacks.onToggleSidebar();
+      else if (a === "disable") this.callbacks.onDisable();
+      else if (a === "multi") this.callbacks.onToggleMultiSelect();
+      else if (a === "commit-selection") this.callbacks.onCommitSelection();
+      else if (a === "clear-selection") this.callbacks.onClearSelection();
+      else if (a === "action") {
+        const id = btn.getAttribute("data-id");
+        if (id) this.callbacks.onAction(id);
+      }
+    };
+    this.root = root;
+    this.callbacks = callbacks;
+    this.el = document.createElement("div");
+    this.el.className = "vz-pill";
+    this.el.style.display = "none";
+    this.el.addEventListener("click", this.handleClick);
+    this.root.appendChild(this.el);
+  }
+  setActions(actions) {
+    this.actions = actions;
+    this.render();
+  }
+  setComments(comments) {
+    this.commentsCount = comments.length;
+    this.render();
+  }
+  setUser(user) {
+    this.user = user;
+    this.render();
+  }
+  setSidebarOpen(open) {
+    this.sidebarOpen = open;
+    const btn = this.el.querySelector('[data-vz="sidebar"]');
+    if (btn) btn.classList.toggle("is-active", open);
+  }
+  setMultiSelectState(mode, selectionCount) {
+    this.multiSelectMode = mode;
+    this.selectionCount = selectionCount;
+    this.el.classList.toggle("is-selecting", mode && selectionCount > 0);
+    this.render();
+  }
+  show() {
+    this.el.style.display = "flex";
+    this.render();
+  }
+  hide() {
+    this.el.style.display = "none";
+  }
+  render() {
+    if (this.el.style.display === "none") return;
+    const visibleActions = this.actions.filter(
+      (a) => a.visibleWhen ? a.visibleWhen({ commentsCount: this.commentsCount }) : true
+    );
+    const userHtml = this.user ? `<div class="vz-pill-user" title="${escapeHtml(this.user.name)}">${avatarHtml(this.user, "vz-pill-user-avatar")} ${escapeHtml(this.user.name.split(" ")[0])}</div><span class="vz-pill-divider"></span>` : "";
+    const actionsHtml = visibleActions.length ? visibleActions.map(
+      (a) => `<button class="vz-pill-btn${a.variant === "primary" ? " primary" : ""}" data-vz="action" data-id="${escapeHtml(a.id)}"${a.title ? ` title="${escapeHtml(a.title)}"` : ""}>${escapeHtml(a.label)}</button>`
+    ).join("") + '<span class="vz-pill-divider"></span>' : "";
+    let middle = "";
+    if (this.multiSelectMode && this.selectionCount > 0) {
+      middle = `
+        <span class="vz-pill-count-btn is-active" title="Selected ${this.selectionCount} element${this.selectionCount === 1 ? "" : "s"}">${this.selectionCount} selected</span>
+        <button class="vz-pill-btn primary" data-vz="commit-selection">Comment on ${this.selectionCount} \u2192</button>
+        <button class="vz-pill-btn" data-vz="clear-selection">Cancel</button>
+        <span class="vz-pill-divider"></span>
+      `;
+    } else {
+      const count = this.commentsCount;
+      middle = `
+        <button class="vz-pill-count-btn ${this.sidebarOpen ? "is-active" : ""}" data-vz="sidebar" title="Show all comments">${count} comment${count === 1 ? "" : "s"}</button>
+        <span class="vz-pill-divider"></span>
+        ${userHtml}
+        ${actionsHtml}
+      `;
+    }
+    const toggleTitle = this.multiSelectMode ? "Exit multi-select mode" : "Multi-select: click multiple elements, then comment on the group (or hold Shift while clicking)";
+    this.el.innerHTML = `
+      <span class="vz-pill-dot" aria-hidden="true"></span>
+      <span class="vz-pill-label">Vizu</span>
+      ${middle}
+      <button class="vz-pill-toggle ${this.multiSelectMode ? "is-active" : ""}" data-vz="multi" title="${escapeHtml(toggleTitle)}" aria-label="${escapeHtml(toggleTitle)}">
+        <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="1" y="1" width="5" height="5"/><rect x="8" y="1" width="5" height="5"/><rect x="1" y="8" width="5" height="5"/><rect x="8" y="8" width="5" height="5"/></svg>
+      </button>
+      <button class="vz-pill-icon-btn" data-vz="disable" title="Disable Vizu (toggle with shortcut)" aria-label="Disable">\xD7</button>
+    `;
+  }
+  toast(message) {
+    const t = document.createElement("div");
+    t.className = "vz-toast";
+    t.textContent = message;
+    this.root.appendChild(t);
+    setTimeout(() => t.remove(), 1800);
+  }
+  destroy() {
+    this.el.removeEventListener("click", this.handleClick);
+    this.el.remove();
+  }
+};
+
+// src/sidebar.ts
+var Sidebar = class {
+  constructor(root, callbacks) {
+    this.open = false;
+    this.filter = "open";
+    this.lastComments = [];
+    this.lastConfidence = /* @__PURE__ */ new Map();
+    this.handleClick = (e) => {
+      const target = e.target;
+      const refEl = target.closest('[data-vz="ref"]');
+      if (refEl) {
+        e.stopPropagation();
+        const commentId = refEl.getAttribute("data-comment-id");
+        const refIdAttr = refEl.getAttribute("data-ref-id");
+        if (commentId && refIdAttr) this.callbacks.onJumpToReference(commentId, refIdAttr);
+        return;
+      }
+      const filterEl = target.closest('[data-vz="filter"]');
+      if (filterEl) {
+        e.stopPropagation();
+        const f = filterEl.getAttribute("data-filter");
+        if (f && f !== this.filter) {
+          this.filter = f;
+          this.render(this.lastComments);
+        }
+        return;
+      }
+      const statusEl = target.closest('[data-vz="status"]');
+      if (statusEl) {
+        e.stopPropagation();
+        const id = statusEl.getAttribute("data-id");
+        const status = statusEl.getAttribute("data-status");
+        if (id && status) this.callbacks.onUpdateStatus(id, status);
+        return;
+      }
+      const deleteEl = target.closest('[data-vz="delete"]');
+      if (deleteEl) {
+        e.stopPropagation();
+        const id = deleteEl.getAttribute("data-id");
+        if (id) this.callbacks.onDelete(id);
+        return;
+      }
+      if (target.closest('[data-vz="close"]')) {
+        this.callbacks.onClose();
+        return;
+      }
+      const fpChip = target.closest('[data-vz="jump-fp"]');
+      if (fpChip && fpChip.__fp) {
+        e.stopPropagation();
+        this.callbacks.onJumpTo(fpChip.__fp);
+        return;
+      }
+      const item = target.closest('[data-vz="jump"]');
+      if (item && item.__group) this.callbacks.onJumpTo(item.__group.fp);
+    };
+    this.root = root;
+    this.callbacks = callbacks;
+    this.el = document.createElement("div");
+    this.el.className = "vz-sidebar";
+    this.el.addEventListener("click", this.handleClick);
+    this.root.appendChild(this.el);
+  }
+  toggle(comments, confidence) {
+    if (this.open) this.close();
+    else this.show(comments, confidence);
+  }
+  show(comments, confidence) {
+    this.render(comments, confidence);
+    requestAnimationFrame(() => this.el.classList.add("is-open"));
+    this.open = true;
+  }
+  update(comments, confidence) {
+    if (this.open) this.render(comments, confidence);
+  }
+  close() {
+    this.el.classList.remove("is-open");
+    this.open = false;
+  }
+  isOpen() {
+    return this.open;
+  }
+  render(comments, confidence) {
+    this.lastComments = comments;
+    if (confidence) this.lastConfidence = new Map(confidence);
+    const conf = this.lastConfidence;
+    const orphans = comments.filter((c) => conf.get(c.id) === "orphaned");
+    const anchored = comments.filter((c) => conf.get(c.id) !== "orphaned");
+    const visible = this.filter === "open" ? anchored.filter((c) => (c.status ?? "open") === "open") : anchored;
+    const visibleOrphans = this.filter === "open" ? [] : orphans;
+    const counts = countByStatus(comments);
+    if (visible.length === 0 && visibleOrphans.length === 0) {
+      const emptyCopy = this.filter === "open" && comments.length > 0 ? `<strong>Nothing open.</strong>${counts.resolved + counts.wontfix} closed comment${counts.resolved + counts.wontfix === 1 ? "" : "s"} hidden. Switch to <em>All</em> to see them.` : "<strong>No comments yet</strong>Click any element on the page to leave one.";
+      this.el.innerHTML = `
+        ${this.headerHtml(comments.length, counts)}
+        <div class="vz-sidebar-body">
+          <div class="vz-sidebar-empty">${emptyCopy}</div>
+        </div>
+      `;
+      return;
+    }
+    const groups = /* @__PURE__ */ new Map();
+    for (const c of visible) {
+      const fps = c.fingerprints || [];
+      const primary = fps[0];
+      if (!primary) continue;
+      const key2 = fingerprintKey(primary);
+      const g = groups.get(key2);
+      if (g) g.comments.push(c);
+      else groups.set(key2, { fp: primary, comments: [c] });
+    }
+    const groupHtml = [];
+    let gi = 0;
+    for (const g of groups.values()) {
+      const elLabel = g.fp.tagName.toLowerCase() + (g.fp.attributes.id ? "#" + g.fp.attributes.id : "");
+      const textPreview = g.fp.textSnippet.slice(0, 60);
+      groupHtml.push(`
+        <div class="vz-sidebar-group" data-group="${gi}">
+          <div class="vz-sidebar-group-head">
+            ${escapeHtml(elLabel)}
+            ${textPreview ? `<div class="vz-sidebar-group-text">&ldquo;${escapeHtml(textPreview)}${g.fp.textSnippet.length > 60 ? "\u2026" : ""}&rdquo;</div>` : ""}
+          </div>
+          ${g.comments.map((c) => {
+        const status = c.status ?? "open";
+        const others = (c.fingerprints || []).slice(1);
+        const otherChips = others.length ? `<div class="vz-anchor-list" style="margin-top:6px">${others.map(
+          (fp, i) => `<span class="vz-anchor-chip" data-vz="jump-fp" data-fp-key="${escapeHtml(fingerprintKey(fp))}" title="Jump to this element">+${i + 2}/${(c.fingerprints || []).length} ${escapeHtml(fingerprintLabel(fp))}</span>`
+        ).join("")}</div>` : "";
+        const cConf = conf.get(c.id);
+        const driftedBadge = cConf === "drifted" ? `<span class="vz-status-pill vz-status-drifted" title="Anchored via a fallback match \u2014 the original element may have moved or changed.">drifted</span>` : "";
+        return `
+            <div class="vz-sidebar-item ${status !== "open" ? "vz-sidebar-item-dim" : ""}" data-comment-id="${escapeHtml(c.id)}" data-vz="jump" data-group="${gi}" role="button" tabindex="0">
+              <div class="vz-sidebar-item-row">
+                ${c.author ? `<div class="vz-sidebar-item-author">${avatarHtml(c.author)} <span class="vz-sidebar-item-author-name">${escapeHtml(c.author.name)}</span></div>` : ""}
+                ${driftedBadge}
+                ${status !== "open" ? `<span class="vz-status-pill vz-status-${status}">${status}</span>` : ""}
+              </div>
+              <span class="vz-sidebar-item-text">${renderCommentText(c.text, c.id)}</span>
+              ${renderAttachmentsHtml(c.attachments)}
+              ${otherChips}
+              <div class="vz-sidebar-item-meta">
+                <span>${escapeHtml(formatTime(c.createdAt))}${(c.fingerprints || []).length > 1 ? ` \xB7 grouped (${(c.fingerprints || []).length})` : ""}${(c.replies?.length ?? 0) > 0 ? ` \xB7 ${c.replies.length} ${c.replies.length === 1 ? "reply" : "replies"}` : ""}</span>
+                <span class="vz-sidebar-item-actions">
+                  ${statusActionsHtml(c.id, status)}
+                  <button class="vz-sidebar-item-delete" data-vz="delete" data-id="${escapeHtml(c.id)}" title="Delete comment">delete</button>
+                </span>
+              </div>
+            </div>
+              `;
+      }).join("")}
+        </div>
+      `);
+      gi++;
+    }
+    const orphanHtml = visibleOrphans.length > 0 ? renderOrphansHtml(visibleOrphans) : "";
+    this.el.innerHTML = `
+      ${this.headerHtml(comments.length, counts)}
+      <div class="vz-sidebar-body">
+        ${groupHtml.join("")}
+        ${orphanHtml}
+      </div>
+    `;
+    const items = this.el.querySelectorAll('[data-vz="jump"]');
+    const groupArr = [...groups.values()];
+    for (const item of items) {
+      const groupIndex = Number(item.dataset.group);
+      item.__group = groupArr[groupIndex];
+    }
+    const chips = this.el.querySelectorAll('[data-vz="jump-fp"]');
+    for (const chip of chips) {
+      const key2 = chip.getAttribute("data-fp-key");
+      const fp = findFingerprintByKey(visible, key2 || "");
+      chip.__fp = fp;
+    }
+  }
+  headerHtml(total, counts) {
+    return `
+      <div class="vz-sidebar-header">
+        <div class="vz-sidebar-title">
+          Comments
+          <span class="vz-sidebar-title-count">${total}</span>
+        </div>
+        <button class="vz-sidebar-close" data-vz="close" aria-label="Close sidebar">\xD7</button>
+      </div>
+      <div class="vz-sidebar-filters" role="tablist" aria-label="Status filter">
+        <button class="vz-sidebar-filter ${this.filter === "open" ? "is-active" : ""}" data-vz="filter" data-filter="open" role="tab" aria-selected="${this.filter === "open"}">
+          Open <span class="vz-sidebar-filter-count">${counts.open}</span>
+        </button>
+        <button class="vz-sidebar-filter ${this.filter === "all" ? "is-active" : ""}" data-vz="filter" data-filter="all" role="tab" aria-selected="${this.filter === "all"}">
+          All <span class="vz-sidebar-filter-count">${total}</span>
+        </button>
+      </div>
+    `;
+  }
+  destroy() {
+    this.el.removeEventListener("click", this.handleClick);
+    this.el.remove();
+  }
+};
+function countByStatus(comments) {
+  const c = { open: 0, resolved: 0, wontfix: 0 };
+  for (const x of comments) {
+    const s = x.status ?? "open";
+    c[s] = (c[s] ?? 0) + 1;
+  }
+  return c;
+}
+function statusActionsHtml(id, current) {
+  const safe = escapeHtml(id);
+  if (current === "open") {
+    return `
+      <button class="vz-sidebar-item-status" data-vz="status" data-id="${safe}" data-status="resolved" title="Mark resolved">resolve</button>
+      <button class="vz-sidebar-item-status" data-vz="status" data-id="${safe}" data-status="wontfix" title="Won't fix">won&apos;t fix</button>
+    `;
+  }
+  return `<button class="vz-sidebar-item-status" data-vz="status" data-id="${safe}" data-status="open" title="Reopen">reopen</button>`;
+}
+function renderOrphansHtml(orphans) {
+  const items = orphans.map((c) => {
+    const status = c.status ?? "open";
+    const primary = (c.fingerprints || [])[0];
+    const label = primary ? primary.tagName.toLowerCase() : "comment";
+    const snippet = primary?.textSnippet?.slice(0, 60) ?? "";
+    return `
+        <div class="vz-sidebar-item vz-sidebar-item-orphan" data-comment-id="${escapeHtml(c.id)}">
+          <div class="vz-sidebar-item-row">
+            ${c.author ? `<div class="vz-sidebar-item-author">${avatarHtml(c.author)} <span class="vz-sidebar-item-author-name">${escapeHtml(c.author.name)}</span></div>` : ""}
+            <span class="vz-status-pill vz-status-orphan">orphaned</span>
+          </div>
+          <div class="vz-sidebar-orphan-anchor">
+            was on <code>${escapeHtml(label)}</code>${snippet ? ` &ldquo;${escapeHtml(snippet)}${(primary?.textSnippet?.length ?? 0) > 60 ? "\u2026" : ""}&rdquo;` : ""}
+          </div>
+          <span class="vz-sidebar-item-text">${renderCommentText(c.text, c.id)}</span>
+          ${renderAttachmentsHtml(c.attachments)}
+          <div class="vz-sidebar-item-meta">
+            <span>${escapeHtml(formatTime(c.createdAt))}${status !== "open" ? ` \xB7 ${status}` : ""}</span>
+            <span class="vz-sidebar-item-actions">
+              <button class="vz-sidebar-item-delete" data-vz="delete" data-id="${escapeHtml(c.id)}" title="Delete comment">delete</button>
+            </span>
+          </div>
+        </div>
+      `;
+  }).join("");
+  return `
+    <div class="vz-sidebar-orphans">
+      <div class="vz-sidebar-orphans-head">
+        Orphaned \xB7 ${orphans.length}
+        <span class="vz-sidebar-orphans-sub">couldn't find the original element on this page</span>
+      </div>
+      ${items}
+    </div>
+  `;
+}
+function findFingerprintByKey(comments, key2) {
+  for (const c of comments) {
+    for (const fp of c.fingerprints || []) {
+      if (fingerprintKey(fp) === key2) return fp;
+    }
+  }
+  return null;
+}
+
+// src/styles.ts
+var STYLES = `
+[data-vizu-root] {
+  position: fixed; top: 0; left: 0; width: 0; height: 0;
+  z-index: 2147483647;
+  pointer-events: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 13px; line-height: 1.5; color: #fafafa;
+  --vz-accent: #FF6647;
+  --vz-bg: #0A0A0A;
+  --vz-border: #2A2A2A;
+  --vz-bg-hover: #1A1A1A;
+  --vz-text-muted: #888;
+  --vz-marker-fg: #FFFFFF;
+}
+[data-vizu-root] * { box-sizing: border-box; }
+/* Button reset uses :where() to drop its specificity to 0,0,1 so any single-class
+   selector like .vz-marker / .vz-pill-btn / .vz-btn that sets background or
+   color still wins, without needing to redeclare those everywhere. */
+:where([data-vizu-root]) button {
+  font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0;
+}
+
+/* Hover highlight (transient) */
+.vz-highlight {
+  position: fixed;
+  border: 2px dashed var(--vz-accent);
+  background: color-mix(in srgb, var(--vz-accent) 8%, transparent);
+  pointer-events: none;
+  transition: all 90ms ease-out;
+  border-radius: 2px;
+  z-index: 1;
+}
+
+/* Always-on outline for commented elements */
+.vz-comment-outline {
+  position: fixed;
+  border: 1px dashed color-mix(in srgb, var(--vz-accent) 55%, transparent);
+  background: color-mix(in srgb, var(--vz-accent) 4%, transparent);
+  pointer-events: none;
+  border-radius: 2px;
+  z-index: 1;
+}
+.vz-comment-outline.is-selected-pending {
+  border: 1.5px dashed var(--vz-accent);
+  background: color-mix(in srgb, var(--vz-accent) 10%, transparent);
+}
+/* Drifted: the anchor resolved only via a fuzzy fallback (sibling-index
+   or page-wide text snippet). Amber border warns visitors the match
+   might be wrong. */
+.vz-comment-outline-drifted {
+  border-color: rgb(252, 211, 77);
+  background: rgba(245, 158, 11, 0.06);
+}
+.vz-comment-outline.is-pulsing {
+  animation: vz-pulse 1500ms ease-out;
+}
+@keyframes vz-pulse {
+  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vz-accent) 60%, transparent); border-color: var(--vz-accent); }
+  60%  { box-shadow: 0 0 0 22px color-mix(in srgb, var(--vz-accent) 0%, transparent); border-color: var(--vz-accent); }
+  100% { box-shadow: 0 0 0 0 transparent; border-color: color-mix(in srgb, var(--vz-accent) 55%, transparent); }
+}
+
+/* Strong "spotlight" rendered when the user jumps to an element (sidebar item,
+   anchor chip, or # reference click). Visible even on elements that don't have
+   a saved comment yet. */
+.vz-jump-spotlight {
+  position: fixed;
+  border: 2.5px solid var(--vz-accent);
+  background: color-mix(in srgb, var(--vz-accent) 16%, transparent);
+  pointer-events: none;
+  border-radius: 4px;
+  z-index: 4;
+  animation: vz-spotlight 1700ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+}
+@keyframes vz-spotlight {
+  0%   { opacity: 0; box-shadow: 0 0 0 0 transparent; }
+  10%  { opacity: 1; box-shadow: 0 0 0 6px color-mix(in srgb, var(--vz-accent) 55%, transparent); }
+  45%  { opacity: 1; box-shadow: 0 0 0 28px color-mix(in srgb, var(--vz-accent) 10%, transparent); }
+  80%  { opacity: 0.9; box-shadow: 0 0 0 36px color-mix(in srgb, var(--vz-accent) 0%, transparent); }
+  100% { opacity: 0; box-shadow: 0 0 0 36px transparent; background: color-mix(in srgb, var(--vz-accent) 0%, transparent); }
+}
+
+/* Figma-style speech-bubble marker \u2014 pinned at top-right of element, tail pointing in */
+.vz-marker {
+  position: fixed;
+  min-width: 28px; height: 26px;
+  padding: 0 9px;
+  background: var(--vz-accent);
+  color: var(--vz-marker-fg);
+  font-size: 11px; font-weight: 700;
+  letter-spacing: 0.01em;
+  display: inline-flex; align-items: center; justify-content: center;
+  cursor: pointer;
+  pointer-events: auto;
+  /* Asymmetric radius = the "pin" tail: sharp at bottom-left, rounded elsewhere */
+  border-radius: 14px 14px 14px 3px;
+  /* Solid Vizu-colored halo via 2px ring + drop shadow \u2014 visible on any backdrop */
+  box-shadow:
+    0 4px 12px rgba(0,0,0,0.28),
+    0 0 0 2px var(--vz-bg);
+  /* Center the marker on the element's top-right corner, half outside the element */
+  transform: translate(-50%, -50%);
+  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  z-index: 2;
+}
+.vz-marker.is-group-member { font-size: 10px; padding: 0 7px; }
+.vz-marker.is-sibling-pulsing { animation: vz-marker-pulse 600ms ease-out; }
+
+/* Drifted marker: amber-tinted fill + dashed ring instead of solid halo
+   so visitors can see at a glance "this might not be the right element". */
+.vz-marker-drifted {
+  background: rgb(252, 211, 77);
+  color: rgba(0, 0, 0, 0.78);
+  box-shadow:
+    0 4px 12px rgba(0,0,0,0.28),
+    0 0 0 2px var(--vz-bg),
+    0 0 0 3px rgb(252, 211, 77);
+}
+@keyframes vz-marker-pulse {
+  0%   { box-shadow: 0 4px 12px rgba(0,0,0,0.28), 0 0 0 2px var(--vz-bg), 0 0 0 0 var(--vz-accent); }
+  60%  { box-shadow: 0 4px 12px rgba(0,0,0,0.28), 0 0 0 2px var(--vz-bg), 0 0 0 10px color-mix(in srgb, var(--vz-accent) 0%, transparent); }
+  100% { box-shadow: 0 4px 12px rgba(0,0,0,0.28), 0 0 0 2px var(--vz-bg), 0 0 0 0 transparent; }
+}
+.vz-marker:hover {
+  transform: translate(-50%, -50%) scale(1.1);
+}
+.vz-marker-avatar {
+  width: 100%; height: 100%;
+  border-radius: 50% 50% 50% 3px;
+  object-fit: cover;
+  display: block;
+}
+.vz-marker.has-avatar {
+  padding: 0;
+  width: 28px; min-width: 28px; height: 28px;
+  background: var(--vz-bg);
+  border-radius: 50% 50% 50% 3px;
+  overflow: hidden;
+}
+.vz-marker.has-avatar .vz-marker-count {
+  position: absolute;
+  bottom: -4px; right: -4px;
+  background: var(--vz-accent);
+  color: var(--vz-marker-fg);
+  min-width: 16px; height: 16px;
+  border-radius: 8px;
+  font-size: 9px; font-weight: 700;
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0 4px;
+  box-shadow: 0 0 0 2px var(--vz-bg);
+}
+.vz-marker-initials {
+  font-size: 11px; font-weight: 700;
+  color: #fafafa;
+  background: var(--vz-bg-hover);
+  width: 100%; height: 100%;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: 50% 50% 50% 3px;
+}
+
+/* Floating pill */
+.vz-pill {
+  position: fixed;
+  bottom: 24px; left: 50%; transform: translateX(-50%);
+  background: var(--vz-bg);
+  border: 1px solid var(--vz-border);
+  border-radius: 999px;
+  padding: 7px 8px 7px 18px;
+  display: flex; align-items: center; gap: 10px;
+  pointer-events: auto;
+  box-shadow: 0 8px 24px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.04);
+  user-select: none;
+  max-width: calc(100vw - 32px);
+  z-index: 5;
+}
+.vz-pill.is-selecting { border-color: var(--vz-accent); }
+.vz-pill-toggle {
+  width: 28px; height: 28px;
+  border-radius: 6px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--vz-text-muted);
+  transition: background 100ms, color 100ms;
+}
+.vz-pill-toggle:hover { background: var(--vz-bg-hover); color: #fafafa; }
+.vz-pill-toggle.is-active { background: color-mix(in srgb, var(--vz-accent) 22%, var(--vz-bg-hover)); color: var(--vz-accent); }
+.vz-pill-toggle svg { width: 14px; height: 14px; }
+.vz-pill-dot {
+  width: 8px; height: 8px; border-radius: 4px;
+  background: var(--vz-accent);
+  box-shadow: 0 0 8px var(--vz-accent);
+  flex-shrink: 0;
+}
+.vz-pill-label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
+.vz-pill-count-btn {
+  font-size: 11px; color: var(--vz-text-muted);
+  padding: 4px 10px;
+  border-radius: 999px;
+  transition: background 100ms, color 100ms;
+}
+.vz-pill-count-btn:hover { background: var(--vz-bg-hover); color: #fafafa; }
+.vz-pill-count-btn.is-active { background: var(--vz-bg-hover); color: #fafafa; }
+.vz-pill-btn {
+  padding: 7px 14px;
+  border-radius: 999px;
+  font-size: 12px; font-weight: 500;
+  color: #fafafa;
+  transition: background 100ms;
+  white-space: nowrap;
+}
+.vz-pill-btn:hover { background: var(--vz-bg-hover); }
+.vz-pill-btn.primary {
+  background: var(--vz-accent);
+  color: var(--vz-marker-fg);
+  font-weight: 600;
+  padding: 7px 16px;
+}
+.vz-pill-btn.primary:hover { background: color-mix(in srgb, var(--vz-accent) 88%, white); }
+.vz-pill-divider { width: 1px; height: 18px; background: var(--vz-border); flex-shrink: 0; }
+.vz-pill-icon-btn {
+  width: 28px; height: 28px;
+  border-radius: 50%;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: #fafafa;
+  transition: background 100ms;
+}
+.vz-pill-icon-btn:hover { background: var(--vz-bg-hover); }
+.vz-pill-user {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 3px 10px 3px 4px;
+  background: var(--vz-bg-hover);
+  border-radius: 999px;
+  font-size: 11px;
+  color: #fafafa;
+}
+.vz-pill-user-avatar {
+  width: 22px; height: 22px;
+  border-radius: 50%;
+  object-fit: cover;
+  background: var(--vz-border);
+  font-size: 10px; font-weight: 700;
+  color: #fafafa;
+  display: inline-flex; align-items: center; justify-content: center;
+}
+
+/* Popover */
+.vz-popover {
+  position: fixed;
+  background: var(--vz-bg);
+  border: 1px solid var(--vz-border);
+  border-radius: 8px;
+  padding: 12px;
+  min-width: 280px; max-width: 360px;
+  pointer-events: auto;
+  box-shadow: 0 12px 32px rgba(0,0,0,.5);
+  display: flex; flex-direction: column; gap: 8px;
+  z-index: 6;
+}
+.vz-popover-header {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--vz-text-muted);
+  display: flex; justify-content: space-between; align-items: center;
+}
+.vz-popover-close {
+  font-size: 18px; line-height: 1;
+  color: #666;
+  width: 22px; height: 22px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: 4px;
+}
+.vz-popover-close:hover { color: #fafafa; background: var(--vz-bg-hover); }
+.vz-target-label {
+  font-size: 11px; color: var(--vz-text-muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  word-break: break-all;
+  padding: 6px 8px;
+  background: var(--vz-bg-hover);
+  border-radius: 4px;
+}
+.vz-comment-list {
+  display: flex; flex-direction: column; gap: 6px;
+  max-height: 200px; overflow-y: auto;
+}
+.vz-comment {
+  background: var(--vz-bg-hover);
+  border: 1px solid var(--vz-border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 13px;
+  display: flex; flex-direction: column; gap: 6px;
+}
+.vz-comment-author {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px;
+  color: var(--vz-text-muted);
+}
+.vz-comment-author-avatar {
+  width: 18px; height: 18px;
+  border-radius: 50%;
+  background: var(--vz-border);
+  display: inline-flex; align-items: center; justify-content: center;
+  font-size: 9px; font-weight: 700;
+  color: #fafafa;
+  overflow: hidden;
+}
+.vz-comment-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.vz-comment-author-name { color: #fafafa; font-weight: 500; }
+.vz-comment-meta {
+  font-size: 10px; color: #666;
+  display: flex; justify-content: space-between;
+}
+.vz-comment-delete { color: #666; font-size: 10px; text-decoration: underline; }
+.vz-comment-delete:hover { color: #ff7676; }
+.vz-empty { font-size: 12px; color: var(--vz-text-muted); padding: 4px 0; }
+.vz-textarea {
+  background: var(--vz-bg-hover);
+  border: 1px solid var(--vz-border);
+  color: #fafafa;
+  border-radius: 6px;
+  padding: 8px 10px;
+  font: inherit;
+  font-size: 13px;
+  resize: vertical;
+  min-height: 60px;
+  max-height: 160px;
+  overflow-y: auto;
+  outline: none;
+  width: 100%;
+  line-height: 1.5;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.vz-textarea:focus { border-color: var(--vz-accent); }
+.vz-textarea:empty::before {
+  content: attr(data-placeholder);
+  color: var(--vz-text-muted);
+  pointer-events: none;
+}
+/* Inline chip rendered live inside the contenteditable comment editor */
+.vz-chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 1px 8px 1px 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--vz-accent) 16%, var(--vz-bg-hover));
+  color: var(--vz-accent);
+  font-size: 12px; font-weight: 500;
+  cursor: default;
+  user-select: none;
+  margin: 0 2px;
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+.vz-chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--vz-accent); flex-shrink: 0; }
+
+/* Popover anchor list (multi-anchor comment header) */
+.vz-anchor-list {
+  display: flex; flex-wrap: wrap; gap: 4px;
+  padding: 6px 0 0;
+}
+.vz-anchor-chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 3px 8px 3px 6px;
+  border-radius: 999px;
+  background: var(--vz-bg-hover);
+  border: 1px solid var(--vz-border);
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: #fafafa;
+  cursor: pointer;
+}
+.vz-anchor-chip::before {
+  content: '';
+  width: 5px; height: 5px;
+  border-radius: 50%;
+  background: var(--vz-accent);
+}
+.vz-anchor-chip:hover { border-color: var(--vz-accent); }
+.vz-anchor-chip-remove {
+  font-size: 12px; color: var(--vz-text-muted);
+  margin-left: 2px;
+  background: none; border: 0; cursor: pointer;
+  padding: 0 2px;
+}
+.vz-anchor-chip-remove:hover { color: #ff7676; }
+.vz-anchor-hint { font-size: 11px; color: var(--vz-text-muted); padding: 4px 0; }
+.vz-popover-actions { display: flex; justify-content: flex-end; gap: 6px; }
+.vz-btn {
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px; font-weight: 500;
+  transition: background 100ms;
+}
+.vz-btn-ghost { color: var(--vz-text-muted); }
+.vz-btn-ghost:hover { background: var(--vz-bg-hover); color: #fafafa; }
+.vz-btn-primary {
+  background: var(--vz-accent);
+  color: var(--vz-marker-fg);
+  font-weight: 600;
+}
+.vz-btn-primary:hover { background: color-mix(in srgb, var(--vz-accent) 88%, white); }
+
+/* Sidebar */
+.vz-sidebar {
+  position: fixed;
+  top: 0; right: 0;
+  width: 360px;
+  height: 100vh;
+  background: var(--vz-bg);
+  border-left: 1px solid var(--vz-border);
+  pointer-events: auto;
+  display: flex; flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
+  box-shadow: -16px 0 48px rgba(0,0,0,0.35);
+  z-index: 7;
+}
+.vz-sidebar.is-open { transform: translateX(0); }
+.vz-sidebar-header {
+  padding: 16px 18px;
+  border-bottom: 1px solid var(--vz-border);
+  display: flex; align-items: center; gap: 10px;
+  flex-shrink: 0;
+}
+.vz-sidebar-title {
+  font-size: 13px; font-weight: 600;
+  display: flex; align-items: center; gap: 8px;
+}
+.vz-sidebar-title-count {
+  font-size: 11px;
+  color: var(--vz-text-muted);
+  font-weight: 500;
+  padding: 2px 8px;
+  background: var(--vz-bg-hover);
+  border-radius: 999px;
+}
+.vz-sidebar-close {
+  margin-left: auto;
+  width: 28px; height: 28px;
+  border-radius: 6px;
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--vz-text-muted);
+  font-size: 18px; line-height: 1;
+}
+.vz-sidebar-close:hover { background: var(--vz-bg-hover); color: #fafafa; }
+.vz-sidebar-body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 12px;
+}
+.vz-sidebar-empty {
+  padding: 32px 18px;
+  text-align: center;
+  color: var(--vz-text-muted);
+  font-size: 13px;
+}
+.vz-sidebar-empty strong { color: #fafafa; display: block; margin-bottom: 4px; font-weight: 600; }
+.vz-sidebar-group {
+  margin-bottom: 16px;
+}
+.vz-sidebar-group-head {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 10px;
+  text-transform: lowercase;
+  color: var(--vz-text-muted);
+  padding: 4px 6px;
+  margin-bottom: 4px;
+  word-break: break-all;
+}
+.vz-sidebar-group-text {
+  font-family: inherit;
+  text-transform: none;
+  font-size: 11px;
+  color: #c4c4c4;
+  margin-top: 2px;
+}
+.vz-sidebar-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: var(--vz-bg-hover);
+  border: 1px solid var(--vz-border);
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin-bottom: 6px;
+  font-size: 13px;
+  color: #fafafa;
+  transition: border-color 100ms, transform 100ms;
+}
+.vz-sidebar-item:hover {
+  border-color: color-mix(in srgb, var(--vz-accent) 50%, var(--vz-border));
+  transform: translateX(-2px);
+}
+.vz-sidebar-item-author {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px;
+  color: var(--vz-text-muted);
+  margin-bottom: 4px;
+}
+.vz-sidebar-item-author .vz-comment-author-avatar { width: 16px; height: 16px; font-size: 8px; }
+.vz-sidebar-item-author-name { color: #fafafa; font-weight: 500; }
+.vz-sidebar-item-text {
+  display: block;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.vz-sidebar-item-meta {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-top: 6px;
+  font-size: 10px;
+  color: #666;
+}
+.vz-sidebar-item-delete {
+  color: #666;
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  font-size: 10px;
+  font-family: inherit;
+}
+.vz-sidebar-item-delete:hover { color: #ff7676; }
+
+/* Status filter tabs in the sidebar header */
+.vz-sidebar-filters {
+  display: flex;
+  gap: 4px;
+  padding: 6px 16px 12px;
+  border-bottom: 1px solid var(--vz-border);
+}
+.vz-sidebar-filter {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--vz-text-soft);
+  font: inherit;
+  font-size: 10.5px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 4px 10px;
+  border-radius: 999px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  transition: color 100ms, background 100ms, border-color 100ms;
+}
+.vz-sidebar-filter:hover { color: var(--vz-text); }
+.vz-sidebar-filter.is-active {
+  background: color-mix(in srgb, var(--vz-accent) 15%, transparent);
+  color: var(--vz-accent);
+  border-color: color-mix(in srgb, var(--vz-accent) 30%, transparent);
+}
+.vz-sidebar-filter-count {
+  color: var(--vz-text-faint);
+  font-size: 9.5px;
+}
+.vz-sidebar-filter.is-active .vz-sidebar-filter-count {
+  color: inherit;
+  opacity: 0.7;
+}
+
+/* Per-item status pill (resolved / wontfix) shown at top-right of dim items */
+.vz-sidebar-item-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.vz-status-pill {
+  display: inline-block;
+  padding: 1px 7px;
+  border-radius: 999px;
+  font-size: 9.5px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+.vz-status-resolved {
+  background: rgba(34, 197, 94, 0.18);
+  color: rgb(74, 222, 128);
+}
+.vz-status-wontfix {
+  background: rgba(113, 113, 122, 0.22);
+  color: rgb(161, 161, 170);
+}
+/* Drifted anchor \u2014 fell through to a fuzzy fallback. Render amber. */
+.vz-status-drifted {
+  background: rgba(245, 158, 11, 0.18);
+  color: rgb(252, 211, 77);
+}
+/* Orphaned \u2014 anchor element no longer on the page. Quiet zinc, dim text. */
+.vz-status-orphan {
+  background: rgba(113, 113, 122, 0.24);
+  color: rgb(212, 212, 216);
+}
+
+/* Dim non-open items in 'All' view */
+.vz-sidebar-item-dim { opacity: 0.55; }
+.vz-sidebar-item-dim:hover { opacity: 0.85; }
+
+/* Orphaned-comments section \u2014 separate from the active comment list. */
+.vz-sidebar-orphans {
+  margin-top: 18px;
+  padding-top: 14px;
+  border-top: 1px dashed var(--vz-border);
+}
+.vz-sidebar-orphans-head {
+  padding: 0 16px;
+  font-family: var(--vz-mono, ui-monospace, monospace);
+  font-size: 10.5px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: rgb(212, 212, 216);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 10px;
+}
+.vz-sidebar-orphans-sub {
+  font-size: 9.5px;
+  letter-spacing: 0.06em;
+  text-transform: none;
+  color: var(--vz-text-faint);
+}
+.vz-sidebar-item-orphan {
+  opacity: 0.78;
+}
+.vz-sidebar-item-orphan:hover { opacity: 1; }
+.vz-sidebar-orphan-anchor {
+  margin-top: 4px;
+  margin-bottom: 6px;
+  font-size: 11px;
+  color: var(--vz-text-faint);
+  line-height: 1.5;
+}
+.vz-sidebar-orphan-anchor code {
+  background: var(--vz-bg-hover);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 10.5px;
+}
+
+/* Per-item action buttons (resolve / reopen / wontfix) */
+.vz-sidebar-item-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+.vz-sidebar-item-status {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  color: var(--vz-text-soft);
+  text-decoration: underline;
+  font-size: 10px;
+  font-family: inherit;
+}
+.vz-sidebar-item-status:hover { color: var(--vz-accent); }
+
+/* # element-reference chip (rendered inside comments) */
+.vz-ref {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 1px 8px 1px 6px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--vz-accent) 16%, var(--vz-bg-hover));
+  color: var(--vz-accent);
+  font-size: 12px; font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 100ms, transform 100ms;
+  vertical-align: baseline;
+  margin: 0 1px;
+}
+.vz-ref:hover { background: color-mix(in srgb, var(--vz-accent) 30%, var(--vz-bg-hover)); transform: translateY(-1px); }
+.vz-ref::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--vz-accent); flex-shrink: 0; }
+
+/* Inline @mention chip (rendered inside displayed comments) */
+.vz-mention {
+  display: inline-flex; align-items: center;
+  padding: 1px 8px 1px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--vz-accent) 16%, var(--vz-bg-hover));
+  color: var(--vz-accent);
+  font-size: 12px; font-weight: 600;
+  vertical-align: baseline;
+  margin: 0 1px;
+}
+
+/* Mention chip inside the editor (contenteditable=false token) */
+.vz-chip-mention {
+  background: color-mix(in srgb, var(--vz-accent) 16%, var(--vz-bg-hover));
+  color: var(--vz-accent);
+  font-weight: 600;
+}
+.vz-chip-mention::before { display: none; }
+
+/* @-mention button in the popover action row */
+.vz-btn-mention { color: var(--vz-accent); }
+
+/* Reply count + reply toggle in a comment's action row */
+.vz-comment-actions { display: inline-flex; align-items: center; gap: 10px; }
+.vz-comment-reply-toggle {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  color: var(--vz-text-soft);
+  text-decoration: underline;
+  font-size: 10px;
+  font-family: inherit;
+}
+.vz-comment-reply-toggle:hover { color: var(--vz-accent); }
+
+/* Inline reply list + form (shown when toggle-reply opens it) */
+.vz-replies {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px dashed var(--vz-border);
+}
+.vz-reply-list { display: flex; flex-direction: column; gap: 8px; }
+.vz-reply {
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: var(--vz-bg-hover);
+}
+.vz-reply-text {
+  font-size: 13px;
+  color: var(--vz-text);
+  line-height: 1.45;
+  white-space: pre-wrap;
+}
+.vz-reply-form {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+}
+.vz-reply-input {
+  flex: 1;
+  resize: vertical;
+  min-height: 36px;
+  padding: 6px 8px;
+  font-family: inherit;
+  font-size: 12.5px;
+  background: var(--vz-bg);
+  color: var(--vz-text);
+  border: 1px solid var(--vz-border);
+  border-radius: 6px;
+  outline: none;
+}
+.vz-reply-input:focus { border-color: var(--vz-accent); }
+.vz-btn-reply { padding: 4px 12px; font-size: 12px; }
+
+/* \u2500\u2500\u2500 Attachment upload UI (popover) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.vz-editor-wrap {
+  position: relative;
+}
+.vz-attachment-drop-hint {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--vz-accent) 18%, var(--vz-bg));
+  border: 2px dashed var(--vz-accent);
+  border-radius: 8px;
+  color: var(--vz-accent);
+  font-size: 13px;
+  font-weight: 600;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Pending attachments (uploaded but not yet saved) */
+.vz-attachment-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.vz-attachment-list:empty { display: none; }
+.vz-attachment-item {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--vz-bg-hover);
+  border: 1px solid var(--vz-border);
+}
+.vz-attachment-thumb {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  color: var(--vz-text-soft);
+  font-size: 11px;
+  text-align: center;
+  line-height: 64px;
+}
+.vz-attachment-thumb-loading {
+  background: var(--vz-bg-hover);
+  animation: vz-attachment-pulse 1.4s ease-in-out infinite;
+}
+@keyframes vz-attachment-pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}
+.vz-attachment-remove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.72);
+  color: #fafafa;
+  border: 0;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 14px;
+  padding: 0;
+}
+.vz-attachment-remove:hover { background: rgba(0, 0, 0, 0.9); }
+
+/* Display-side attachment grid (rendered inside comments) */
+.vz-attachment-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 4px;
+  margin-top: 6px;
+}
+.vz-attachment-display {
+  display: block;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--vz-bg-hover);
+  border: 1px solid var(--vz-border);
+  text-decoration: none;
+  color: var(--vz-text-soft);
+}
+.vz-attachment-display img {
+  display: block;
+  width: 100%;
+  height: 60px;
+  object-fit: cover;
+}
+.vz-attachment-display:hover { border-color: var(--vz-accent); }
+.vz-attachment-file {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  font-size: 11px;
+}
+.vz-attachment-icon { font-size: 14px; }
+.vz-attachment-filename {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Banner shown while user is picking an element to reference */
+.vz-picking-banner {
+  position: fixed;
+  top: 24px; left: 50%; transform: translateX(-50%);
+  background: var(--vz-bg);
+  border: 1px solid var(--vz-accent);
+  border-radius: 999px;
+  padding: 8px 8px 8px 18px;
+  pointer-events: auto;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+  display: flex; align-items: center; gap: 12px;
+  font-size: 13px;
+  color: #fafafa;
+  z-index: 8;
+}
+.vz-picking-banner-hint {
+  color: var(--vz-text-muted); font-size: 11px;
+  display: inline-flex; align-items: center; gap: 6px;
+}
+.vz-picking-banner-kbd {
+  background: var(--vz-bg-hover);
+  border: 1px solid var(--vz-border);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+  color: #fafafa;
+}
+.vz-picking-banner-cancel {
+  padding: 4px 12px;
+  font-size: 12px;
+  background: var(--vz-bg-hover);
+  border-radius: 999px;
+  color: var(--vz-text-muted);
+}
+.vz-picking-banner-cancel:hover { color: #fafafa; }
+
+.vz-toast {
+  position: fixed;
+  bottom: 80px; left: 50%; transform: translateX(-50%);
+  background: var(--vz-bg);
+  border: 1px solid var(--vz-border);
+  border-radius: 6px;
+  padding: 10px 14px;
+  font-size: 12px;
+  color: #fafafa;
+  pointer-events: none;
+  animation: vz-toast-in 200ms ease-out;
+  z-index: 9;
+}
+@keyframes vz-toast-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+}
+`;
+function injectStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById("vizu-styles")) return;
+  const style = document.createElement("style");
+  style.id = "vizu-styles";
+  style.textContent = STYLES;
+  (document.head || document.documentElement).appendChild(style);
+}
+
+// src/shortcut.ts
+function parseShortcut(spec) {
+  const parts = spec.toLowerCase().split("+").map((s) => s.trim());
+  const last = parts.pop() || "";
+  return {
+    key: last,
+    mod: parts.includes("mod") || parts.includes("cmdorctrl"),
+    shift: parts.includes("shift"),
+    alt: parts.includes("alt") || parts.includes("option"),
+    ctrl: parts.includes("ctrl") || parts.includes("control")
+  };
+}
+function matches(e, p) {
+  const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+  if (e.key.toLowerCase() !== p.key) return false;
+  if (p.mod) {
+    const modPressed = isMac ? e.metaKey : e.ctrlKey;
+    if (!modPressed) return false;
+  } else if (p.ctrl && !e.ctrlKey) {
+    return false;
+  }
+  if (p.shift !== e.shiftKey) return false;
+  if (p.alt !== e.altKey) return false;
+  return true;
+}
+
+// src/events.ts
+var EventBus = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  on(event, handler) {
+    let set = this.listeners.get(event);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(event, set);
+    }
+    set.add(handler);
+    return () => this.off(event, handler);
+  }
+  off(event, handler) {
+    this.listeners.get(event)?.delete(handler);
+  }
+  emit(event, payload) {
+    const set = this.listeners.get(event);
+    if (!set) return;
+    for (const handler of [...set]) {
+      try {
+        handler(payload);
+      } catch (err) {
+        console.error("[vizu] event handler error for", event, err);
+      }
+    }
+  }
+  clear() {
+    this.listeners.clear();
+  }
+};
+
+// src/index.ts
+var DEFAULTS = {
+  shortcut: "mod+shift+e",
+  namespace: "default",
+  accent: "#FF6647"
+};
+function resolveStorage(storage, cloud, defaultMode) {
+  if (cloud) {
+    if (storage && typeof console !== "undefined") {
+      console.warn("[vizu] Both `cloud` and `storage` set; `cloud` wins. Drop `storage` to silence this.");
+    }
+    return new CloudStorageAdapter({
+      workspace: cloud.workspace,
+      apiUrl: cloud.apiUrl,
+      autoSignIn: cloud.autoSignIn
+    });
+  }
+  if (!storage) return defaultMode === "local" ? new LocalStorageAdapter() : new InMemoryStorageAdapter();
+  if (storage === "local") return new LocalStorageAdapter();
+  if (storage === "memory") return new InMemoryStorageAdapter();
+  if (storage === "none") return new NullStorageAdapter();
+  if (isV1Adapter(storage)) return wrapV1Adapter(storage);
+  return storage;
+}
+var Vizu = class {
+  constructor(options = {}, _defaultStorage = "memory") {
+    this.root = null;
+    this.highlighter = null;
+    this.popover = null;
+    this.pill = null;
+    this.sidebar = null;
+    /** Saved-comment markers: keyed by `${commentId}:${anchorIndex}` */
+    this.markers = /* @__PURE__ */ new Map();
+    /** Persistent outlines for commented elements: keyed by fingerprintKey */
+    this.outlines = /* @__PURE__ */ new Map();
+    /** Temporary "active anchor" outlines shown while popover is open OR
+     *  while a multi-select session is pending. Stores the fp so we can
+     *  reposition without needing to consult popover/pending state. */
+    this.activeAnchorOutlines = /* @__PURE__ */ new Map();
+    /** Transient spotlights rendered on jump (click sidebar item / anchor chip / # ref). */
+    this.spotlights = /* @__PURE__ */ new Set();
+    this.comments = [];
+    /**
+     * Best confidence each comment was resolved at on the most recent
+     * marker render. Used by the sidebar to surface orphaned + drifted
+     * comments separately, and exposed publicly via {@link getCommentConfidence}.
+     */
+    this.resolvedConfidence = /* @__PURE__ */ new Map();
+    /**
+     * Comment ids the matcher has already re-fingerprinted in this session.
+     * Phase 11.4.4.3 self-healing: when a comment lands as `drifted` and
+     * we have a live element to re-fingerprint, we rewrite the stored
+     * fingerprint so the next load resolves as exact/likely. Tracked
+     * here so the same render loop doesn't re-heal on every redraw.
+     * Cleared on `destroy()`; survives `disable()`/`enable()`.
+     */
+    this.selfHealedThisSession = /* @__PURE__ */ new Set();
+    this.actions = [];
+    this.user = null;
+    /** Live-collab module — non-null only when `opts.liveblocks` and `opts.cloud` are both set AND the plan carries `live_collab`. Stays null otherwise. */
+    this.liveCollab = null;
+    this.enabled = false;
+    this.rafScheduled = false;
+    this.bus = new EventBus();
+    /** Picker: next element click is consumed as a reference instead of opening a popover. */
+    this.picking = null;
+    this.pickingBanner = null;
+    /** Multi-select state — pending selection NOT yet attached to a popover. */
+    this.multiSelectMode = false;
+    this.pendingFingerprints = [];
+    this.pendingTargets = [];
+    /**
+     * Subscribe to remote-change notifications from the active storage
+     * adapter (cloud adapters only). Local adapters never emit. The
+     * subscription is torn down on `destroy()`.
+     */
+    this.unsubscribeStorage = null;
+    this.onKeyDown = (e) => {
+      if (this.picking && e.key === "Escape") {
+        e.preventDefault();
+        this.cancelPicking();
+        return;
+      }
+      if (this.pendingFingerprints.length > 0 && e.key === "Escape" && !this.popover?.isOpen()) {
+        e.preventDefault();
+        this.clearSelection();
+        return;
+      }
+      if (matches(e, this.parsedShortcut)) {
+        e.preventDefault();
+        this.toggle();
+      }
+    };
+    /* ===== Reposition on scroll/resize ===== */
+    this.scheduleReposition = () => {
+      if (this.rafScheduled) return;
+      this.rafScheduled = true;
+      requestAnimationFrame(() => {
+        this.rafScheduled = false;
+        for (const [, info] of this.outlines) {
+          if (info.target) this.positionOutline(info.outline, info.target);
+        }
+        for (const [, entry] of this.markers) {
+          if (entry.target) this.positionMarker(entry.marker, entry.target);
+        }
+        for (const [, info] of this.activeAnchorOutlines) {
+          const target = findElementByFingerprint(info.fp);
+          if (target) this.positionOutline(info.el, target);
+        }
+        for (const sp of this.spotlights) {
+          if (sp.target) this.positionOutline(sp.el, sp.target);
+        }
+        this.popover?.reposition();
+      });
+    };
+    this.opts = { ...options };
+    this.opts.shortcut = options.shortcut ?? DEFAULTS.shortcut;
+    this.opts.namespace = options.namespace ?? DEFAULTS.namespace;
+    this.opts.accent = options.accent ?? DEFAULTS.accent;
+    this.parsedShortcut = parseShortcut(this.opts.shortcut);
+    this.storage = resolveStorage(options.storage, options.cloud, _defaultStorage);
+    this.user = options.user ?? null;
+    if (options.actions) this.actions = [...options.actions];
+    if (options.onCommentAdded) this.bus.on("comment:added", (p) => options.onCommentAdded(p.comment));
+    if (options.onCommentRemoved) this.bus.on("comment:removed", (p) => options.onCommentRemoved(p.id));
+    if (options.liveblocks && options.cloud) {
+      const live = options.liveblocks;
+      const cloud = options.cloud;
+      void import("./live-collab-IRUNFAPE.js").then(({ LiveCollab }) => {
+        this.liveCollab = new LiveCollab({
+          publicKey: live.publicKey,
+          authEndpoint: live.authEndpoint,
+          workspaceSlug: cloud.workspace
+        });
+        void this.liveCollab.start();
+      });
+    }
+    if (typeof window !== "undefined") {
+      window.addEventListener("keydown", this.onKeyDown);
+      void this.loadComments().then(() => this.subscribeStorage());
+      if (options.startEnabled) this.deferred(() => this.enable());
+    }
+  }
+  /* ===== Event API ===== */
+  on(event, handler) {
+    return this.bus.on(event, handler);
+  }
+  off(event, handler) {
+    this.bus.off(event, handler);
+  }
+  /* ===== User API ===== */
+  setUser(user) {
+    this.user = user;
+    this.popover?.setUser(user);
+    this.pill?.setUser(user);
+    this.bus.emit("user:changed", { user });
+  }
+  getUser() {
+    return this.user;
+  }
+  /* ===== Lifecycle ===== */
+  enable() {
+    if (this.enabled) return;
+    this.enabled = true;
+    this.bus.emit("enabled", {});
+    this.deferred(() => this.mount());
+  }
+  disable() {
+    if (!this.enabled) return;
+    this.enabled = false;
+    this.unmount();
+    this.bus.emit("disabled", {});
+  }
+  toggle() {
+    if (this.enabled) this.disable();
+    else this.enable();
+  }
+  isEnabled() {
+    return this.enabled;
+  }
+  destroy() {
+    this.disable();
+    if (typeof window !== "undefined") window.removeEventListener("keydown", this.onKeyDown);
+    this.unsubscribeStorage?.();
+    this.unsubscribeStorage = null;
+    this.selfHealedThisSession.clear();
+    this.liveCollab?.destroy();
+    this.liveCollab = null;
+    this.bus.clear();
+  }
+  /* ===== Action API ===== */
+  addAction(action) {
+    const existing = this.actions.findIndex((a) => a.id === action.id);
+    if (existing >= 0) this.actions[existing] = action;
+    else this.actions.push(action);
+    this.pill?.setActions(this.actions);
+  }
+  removeAction(id) {
+    this.actions = this.actions.filter((a) => a.id !== id);
+    this.pill?.setActions(this.actions);
+  }
+  getActions() {
+    return [...this.actions];
+  }
+  invokeAction(id) {
+    const a = this.actions.find((x) => x.id === id);
+    if (!a) return;
+    const ctx = this.actionContext();
+    this.bus.emit("action:invoked", { id });
+    void a.onClick(ctx);
+  }
+  /* ===== Comment API ===== */
+  getComments() {
+    return [...this.comments];
+  }
+  async setComments(comments, opts) {
+    this.comments = migrateComments(comments);
+    if (opts?.persist !== false) await this.storage.setAll(this.opts.namespace, this.comments);
+    this.bus.emit("comments:set", { comments: this.getComments() });
+    this.refreshUi();
+  }
+  /**
+   * Patch a single comment. Used by status changes (resolve / reopen),
+   * future threading mutations, etc. Returns the updated comment or
+   * `null` if no comment with that id exists.
+   */
+  async updateComment(id, patch) {
+    const idx = this.comments.findIndex((c) => c.id === id);
+    if (idx === -1) return null;
+    const { id: _i, schemaVersion: _s, ...safe } = patch;
+    const next = { ...this.comments[idx], ...safe };
+    this.comments[idx] = next;
+    const persisted = await this.storage.updateComment(this.opts.namespace, id, safe);
+    this.bus.emit("comment:updated", { comment: persisted ?? next });
+    this.refreshUi();
+    return next;
+  }
+  /** Auth context surfaced by the active storage adapter, if any (cloud adapters set this). */
+  getAuthContext() {
+    return this.storage.getAuthContext?.() ?? null;
+  }
+  /**
+   * Re-fingerprint a comment's anchors against the live DOM and persist.
+   * Called from the render loop when a comment lands `drifted` with a
+   * matched element — rewriting the fingerprint here makes the next
+   * load resolve via a cleaner rung (data-vizu-key / id / class) instead
+   * of falling back to fuzzy text.
+   *
+   * Marks the comment as healed for this session so the same render
+   * doesn't kick the same write twice. Failures are logged; the next
+   * page load gets another chance.
+   */
+  async selfHealComment(c, byElement) {
+    this.selfHealedThisSession.add(c.id);
+    const next = [];
+    let changed = false;
+    for (const fp of c.fingerprints || []) {
+      const bucket = byElement.get(fingerprintKey(fp));
+      if (bucket?.target) {
+        const refreshed = fingerprint(bucket.target);
+        next.push(refreshed);
+        if (!changed && fingerprintKey(refreshed) !== fingerprintKey(fp)) changed = true;
+      } else {
+        next.push(fp);
+      }
+    }
+    if (!changed) return;
+    const patch = {
+      fingerprints: next,
+      fingerprintsRefreshedAt: Date.now()
+    };
+    const idx = this.comments.findIndex((x) => x.id === c.id);
+    if (idx !== -1) this.comments[idx] = { ...this.comments[idx], ...patch };
+    try {
+      await this.storage.updateComment(this.opts.namespace, c.id, patch);
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[vizu] self-heal write failed for", c.id, err);
+      }
+    }
+  }
+  /**
+   * Resolution confidence for a comment as of the last marker render.
+   * `'orphaned'` means the comment's fingerprints didn't resolve to any
+   * live DOM element — the sidebar surfaces it in the orphaned section.
+   * Returns `undefined` for unknown comment ids.
+   */
+  getCommentConfidence(commentId) {
+    return this.resolvedConfidence.get(commentId);
+  }
+  /** Returns the full Map of comment id → confidence. Useful for the dashboard. */
+  getResolvedConfidence() {
+    return new Map(this.resolvedConfidence);
+  }
+  /**
+   * True iff the active storage adapter implements `uploadAttachment`.
+   * The popover hides its upload UI when this returns false (local /
+   * memory modes don't support attachments today).
+   */
+  canUploadAttachments() {
+    return typeof this.storage.uploadAttachment === "function";
+  }
+  /**
+   * Upload an attachment via the active storage adapter. Throws if the
+   * adapter doesn't implement uploads. Caller is responsible for adding
+   * the returned Attachment to a comment (popover does this automatically).
+   */
+  async uploadAttachment(file) {
+    if (!this.storage.uploadAttachment) {
+      throw new Error(
+        "[vizu] active storage adapter does not support uploadAttachment; only the CloudStorageAdapter does in v1"
+      );
+    }
+    return this.storage.uploadAttachment(this.opts.namespace, file);
+  }
+  /**
+   * Append a reply to a comment. Returns the parent comment or null if
+   * the comment id doesn't exist. Routes through the storage adapter's
+   * native `addReply` when available, falling back to an updateComment
+   * patch for adapters that don't implement reply ops.
+   */
+  async addReply(commentId, text, mentions) {
+    const idx = this.comments.findIndex((c) => c.id === commentId);
+    if (idx === -1) return null;
+    const reply = {
+      id: uuid(),
+      text: text.trim(),
+      createdAt: Date.now(),
+      author: this.user ?? void 0,
+      authorId: this.user?.id,
+      mentions: mentions && mentions.length ? mentions : void 0
+    };
+    if (!reply.text) return null;
+    const updated = {
+      ...this.comments[idx],
+      replies: [...this.comments[idx].replies ?? [], reply]
+    };
+    this.comments[idx] = updated;
+    if (this.storage.addReply) {
+      await this.storage.addReply(this.opts.namespace, commentId, reply);
+    } else {
+      await this.storage.updateComment(this.opts.namespace, commentId, { replies: updated.replies });
+    }
+    this.bus.emit("comment:updated", { comment: updated });
+    this.refreshUi();
+    if (this.popover?.isOpen()) {
+      const anchors = this.popover.getAnchors();
+      if (anchors[0]) this.popover.update(this.commentsForElement(anchors[0]));
+    }
+    return updated;
+  }
+  /**
+   * Remove a reply from a comment. Returns the parent comment or null
+   * if either id is unknown.
+   */
+  async removeReply(commentId, replyId) {
+    const idx = this.comments.findIndex((c) => c.id === commentId);
+    if (idx === -1) return null;
+    const filtered = (this.comments[idx].replies ?? []).filter((r) => r.id !== replyId);
+    if (filtered.length === (this.comments[idx].replies ?? []).length) return null;
+    const updated = { ...this.comments[idx], replies: filtered };
+    this.comments[idx] = updated;
+    if (this.storage.removeReply) {
+      await this.storage.removeReply(this.opts.namespace, commentId, replyId);
+    } else {
+      await this.storage.updateComment(this.opts.namespace, commentId, { replies: filtered });
+    }
+    this.bus.emit("comment:updated", { comment: updated });
+    this.refreshUi();
+    if (this.popover?.isOpen()) {
+      const anchors = this.popover.getAnchors();
+      if (anchors[0]) this.popover.update(this.commentsForElement(anchors[0]));
+    }
+    return updated;
+  }
+  async clearAll() {
+    const previous = this.comments;
+    this.comments = [];
+    await this.storage.clear(this.opts.namespace);
+    this.bus.emit("comments:cleared", { previous });
+    this.refreshUi();
+    this.popover?.close();
+    this.clearActiveAnchorOutlines();
+    this.highlighter?.setPaused(false);
+  }
+  /* ===== Multi-select API ===== */
+  /** Toggle multi-select mode. When on, plain clicks accumulate into the selection. */
+  toggleMultiSelectMode() {
+    this.multiSelectMode = !this.multiSelectMode;
+    if (!this.multiSelectMode) this.clearSelection();
+    this.pill?.setMultiSelectState(this.multiSelectMode, this.pendingFingerprints.length);
+  }
+  /** Discard the in-progress selection AND exit multi-select mode. */
+  clearSelection() {
+    this.pendingFingerprints = [];
+    this.pendingTargets = [];
+    this.multiSelectMode = false;
+    this.clearActiveAnchorOutlines();
+    this.pill?.setMultiSelectState(false, 0);
+  }
+  /** Open the popover anchored to the current pending selection so the user can write the comment. */
+  commitSelection() {
+    if (this.pendingFingerprints.length === 0) return;
+    const targets = [...this.pendingTargets];
+    const fps = [...this.pendingFingerprints];
+    this.pendingFingerprints = [];
+    this.pendingTargets = [];
+    this.multiSelectMode = false;
+    this.pill?.setMultiSelectState(false, 0);
+    const target = targets.find((t) => !!t) ?? findElementByFingerprint(fps[0]);
+    if (!target) return;
+    this.openPopoverFor(targets.filter(Boolean), fps);
+  }
+  getSelection() {
+    return [...this.pendingFingerprints];
+  }
+  /* ===== Internal ===== */
+  async loadComments() {
+    const raw = await this.storage.load(this.opts.namespace);
+    this.comments = migrateComments(raw);
+    if (needsPersist(raw)) {
+      void this.storage.setAll(this.opts.namespace, this.comments).catch(() => {
+      });
+    }
+    this.bus.emit("comments:loaded", { comments: this.getComments() });
+    if (this.enabled) this.refreshUi();
+  }
+  subscribeStorage() {
+    if (this.unsubscribeStorage) return;
+    if (!this.storage.subscribe) return;
+    this.unsubscribeStorage = this.storage.subscribe(this.opts.namespace, (e) => {
+      if (e.type === "added") {
+        const fresh = migrateComment(e.comment);
+        if (!this.comments.some((c) => c.id === fresh.id)) {
+          this.comments.push(fresh);
+          this.bus.emit("comment:added", { comment: fresh });
+          this.refreshUi();
+        }
+      } else if (e.type === "updated") {
+        const idx = this.comments.findIndex((c) => c.id === e.comment.id);
+        const fresh = migrateComment(e.comment);
+        if (idx >= 0) {
+          this.comments[idx] = fresh;
+          this.bus.emit("comment:updated", { comment: fresh });
+          this.refreshUi();
+        }
+      } else if (e.type === "removed") {
+        const idx = this.comments.findIndex((c) => c.id === e.id);
+        if (idx >= 0) {
+          const [removed] = this.comments.splice(idx, 1);
+          this.bus.emit("comment:removed", { id: e.id, comment: removed });
+          this.refreshUi();
+        }
+      } else if (e.type === "cleared") {
+        const previous = this.comments;
+        this.comments = [];
+        this.bus.emit("comments:cleared", { previous });
+        this.refreshUi();
+      }
+    });
+  }
+  deferred(fn) {
+    if (typeof document === "undefined") return;
+    if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", fn, { once: true });
+    else fn();
+  }
+  mount() {
+    if (this.root) return;
+    injectStyles();
+    this.root = document.createElement("div");
+    this.root.setAttribute("data-vizu-root", "");
+    this.root.style.setProperty("--vz-accent", this.opts.accent);
+    document.body.appendChild(this.root);
+    this.popover = new Popover(this.root, {
+      onAdd: (text, fps, refs, mentions, atts) => void this.addCommentFromPopover(text, fps, refs, mentions, atts),
+      onUploadAttachment: (file) => this.uploadAttachment(file),
+      canUploadAttachments: () => this.canUploadAttachments(),
+      onDelete: (id) => void this.removeComment(id),
+      onAddReply: (commentId, text) => void this.addReply(commentId, text),
+      onDeleteReply: (commentId, replyId) => void this.removeReply(commentId, replyId),
+      onClose: () => this.closePopover(),
+      onStartReferencePick: (onPicked, onCancel) => this.startPicking(onPicked, onCancel),
+      onJumpToReference: (commentId, refId2) => this.jumpToReference(commentId, refId2),
+      onAnchorsChanged: (fps) => this.syncActiveAnchorOutlines(fps)
+    });
+    this.popover.setUser(this.user);
+    this.sidebar = new Sidebar(this.root, {
+      onJumpTo: (fp) => this.jumpToFingerprint(fp),
+      onJumpToReference: (commentId, refId2) => this.jumpToReference(commentId, refId2),
+      onDelete: (id) => void this.removeComment(id),
+      onUpdateStatus: (id, status) => void this.updateComment(id, { status }),
+      onClose: () => this.closeSidebar()
+    });
+    this.pill = new Pill(this.root, {
+      onToggleSidebar: () => this.toggleSidebar(),
+      onDisable: () => this.disable(),
+      onAction: (id) => this.invokeAction(id),
+      onToggleMultiSelect: () => this.toggleMultiSelectMode(),
+      onCommitSelection: () => this.commitSelection(),
+      onClearSelection: () => this.clearSelection()
+    });
+    this.pill.setActions(this.actions);
+    this.pill.setUser(this.user);
+    this.pill.setComments(this.comments);
+    this.pill.setMultiSelectState(this.multiSelectMode, this.pendingFingerprints.length);
+    this.pill.show();
+    this.highlighter = new Highlighter(
+      this.root,
+      this.opts.ignoreSelectors ?? [],
+      (el, e) => this.onElementClick(el, e),
+      (el) => {
+        if (!this.liveCollab) return;
+        this.liveCollab.setLocalSelection(el ? fingerprint(el) : null);
+      }
+    );
+    this.highlighter.start();
+    this.renderAllMarkers();
+    window.addEventListener("scroll", this.scheduleReposition, true);
+    window.addEventListener("resize", this.scheduleReposition);
+    this.bus.emit("mounted", {});
+  }
+  unmount() {
+    window.removeEventListener("scroll", this.scheduleReposition, true);
+    window.removeEventListener("resize", this.scheduleReposition);
+    this.highlighter?.destroy();
+    this.popover?.destroy();
+    this.pill?.destroy();
+    this.sidebar?.destroy();
+    this.root?.remove();
+    this.root = null;
+    this.highlighter = null;
+    this.popover = null;
+    this.pill = null;
+    this.sidebar = null;
+    this.markers.clear();
+    this.outlines.clear();
+    this.activeAnchorOutlines.clear();
+    for (const sp of this.spotlights) sp.el.remove();
+    this.spotlights.clear();
+    this.pendingFingerprints = [];
+    this.pendingTargets = [];
+    this.bus.emit("unmounted", {});
+  }
+  onElementClick(el, e) {
+    if (this.picking) {
+      const fp2 = fingerprint(el);
+      const p = this.picking;
+      this.picking = null;
+      this.hidePickingBanner();
+      this.highlighter?.setPaused(this.popover?.isOpen() ?? false);
+      p.onSelect(fp2);
+      return;
+    }
+    const fp = fingerprint(el);
+    if (this.popover?.isOpen() && e.shiftKey) {
+      this.popover.addAnchor(fp, el);
+      return;
+    }
+    if (!this.popover?.isOpen() && (this.multiSelectMode || e.shiftKey)) {
+      this.addToSelection(fp, el);
+      return;
+    }
+    this.bus.emit("element:selected", { target: el, fingerprint: fp });
+    const elComments = this.commentsForElement(fp);
+    this.openPopoverFor([el], [fp], elComments);
+  }
+  openPopoverFor(targets, fps, existingComments) {
+    if (!this.popover) return;
+    const comments = existingComments ?? this.commentsForElement(fps[0]);
+    this.popover.open(targets, fps, comments);
+    this.syncActiveAnchorOutlines(fps);
+    this.highlighter?.setPaused(true);
+  }
+  closePopover() {
+    this.popover?.close();
+    this.clearActiveAnchorOutlines();
+    this.highlighter?.setPaused(false);
+    this.bus.emit("element:deselected", {});
+  }
+  addToSelection(fp, el) {
+    const key2 = fingerprintKey(fp);
+    if (this.pendingFingerprints.some((x) => fingerprintKey(x) === key2)) {
+      this.pendingFingerprints = this.pendingFingerprints.filter((x) => fingerprintKey(x) !== key2);
+      this.pendingTargets = this.pendingTargets.filter((t) => t !== el);
+    } else {
+      this.pendingFingerprints.push(fp);
+      this.pendingTargets.push(el);
+    }
+    this.syncActiveAnchorOutlines(this.pendingFingerprints);
+    this.pill?.setMultiSelectState(true, this.pendingFingerprints.length);
+    if (this.pendingFingerprints.length > 0) this.multiSelectMode = true;
+    else this.multiSelectMode = false;
+  }
+  commentsForElement(fp) {
+    const key2 = fingerprintKey(fp);
+    return this.comments.filter(
+      (c) => (c.fingerprints || []).some((f) => fingerprintKey(f) === key2)
+    );
+  }
+  async addCommentFromPopover(text, fps, references, mentions, attachments) {
+    if (fps.length === 0) return;
+    const pageUrl = typeof location !== "undefined" ? location.href : void 0;
+    const c = {
+      id: uuid(),
+      schemaVersion: SCHEMA_VERSION,
+      fingerprints: fps,
+      text,
+      createdAt: Date.now(),
+      pageVersion: this.opts.pageVersion,
+      pageUrl,
+      author: this.user ?? void 0,
+      authorId: this.user?.id,
+      references: references && Object.keys(references).length ? references : void 0,
+      status: "open",
+      replies: [],
+      attachments: attachments ?? [],
+      mentions: mentions ?? []
+    };
+    this.comments.push(c);
+    await this.storage.addComment(this.opts.namespace, c);
+    this.bus.emit("comment:added", { comment: c });
+    this.popover?.update(this.commentsForElement(fps[0]));
+    this.refreshUi();
+  }
+  async removeComment(id) {
+    const comment = this.comments.find((c) => c.id === id);
+    if (!comment) return;
+    this.comments = this.comments.filter((c) => c.id !== id);
+    await this.storage.removeComment(this.opts.namespace, id);
+    this.bus.emit("comment:removed", { id, comment });
+    if (this.popover?.isOpen()) {
+      const anchors = this.popover.getAnchors();
+      if (anchors[0]) this.popover.update(this.commentsForElement(anchors[0]));
+    }
+    this.refreshUi();
+  }
+  refreshUi() {
+    this.pill?.setComments(this.comments);
+    this.renderAllMarkers();
+    this.sidebar?.update(this.comments, this.resolvedConfidence);
+  }
+  /* ===== Sidebar ===== */
+  toggleSidebar() {
+    if (!this.sidebar) return;
+    if (!this.sidebar.isOpen()) this.renderAllMarkers();
+    this.sidebar.toggle(this.comments, this.resolvedConfidence);
+    const open = this.sidebar.isOpen();
+    this.pill?.setSidebarOpen(open);
+    this.bus.emit(open ? "sidebar:opened" : "sidebar:closed", {});
+  }
+  closeSidebar() {
+    this.sidebar?.close();
+    this.pill?.setSidebarOpen(false);
+    this.bus.emit("sidebar:closed", {});
+  }
+  /* ===== Picking ===== */
+  startPicking(onSelect, onCancel) {
+    if (this.picking) this.picking.onCancel();
+    this.picking = { onSelect, onCancel };
+    this.highlighter?.setPaused(false);
+    this.showPickingBanner();
+  }
+  cancelPicking() {
+    if (!this.picking) return;
+    const p = this.picking;
+    this.picking = null;
+    this.hidePickingBanner();
+    this.highlighter?.setPaused(this.popover?.isOpen() ?? false);
+    p.onCancel();
+  }
+  showPickingBanner() {
+    if (!this.root) return;
+    this.pickingBanner = document.createElement("div");
+    this.pickingBanner.className = "vz-picking-banner";
+    this.pickingBanner.innerHTML = `
+      <span>Click any element to reference</span>
+      <span class="vz-picking-banner-hint">or press <span class="vz-picking-banner-kbd">Esc</span></span>
+      <button class="vz-picking-banner-cancel" data-vz="cancel-pick">Cancel</button>
+    `;
+    this.pickingBanner.addEventListener("click", (e) => {
+      if (e.target.closest('[data-vz="cancel-pick"]')) this.cancelPicking();
+    });
+    this.root.appendChild(this.pickingBanner);
+  }
+  hidePickingBanner() {
+    this.pickingBanner?.remove();
+    this.pickingBanner = null;
+  }
+  jumpToReference(commentId, refId2) {
+    const c = this.comments.find((x) => x.id === commentId);
+    const fp = c?.references?.[refId2];
+    if (fp) this.jumpToFingerprint(fp);
+  }
+  jumpToFingerprint(fp) {
+    const target = findElementByFingerprint(fp);
+    if (!target) {
+      this.pill?.toast("Element not found on this page");
+      return;
+    }
+    target.scrollIntoView({ behavior: "smooth", block: "center" });
+    if (this.root) {
+      const spotlight = document.createElement("div");
+      spotlight.className = "vz-jump-spotlight";
+      this.root.appendChild(spotlight);
+      this.positionOutline(spotlight, target);
+      const entry = { el: spotlight, target };
+      this.spotlights.add(entry);
+      setTimeout(() => {
+        spotlight.remove();
+        this.spotlights.delete(entry);
+      }, 1800);
+    }
+    const key2 = fingerprintKey(fp);
+    const outline = this.outlines.get(key2)?.outline;
+    if (outline) {
+      setTimeout(() => {
+        outline.classList.remove("is-pulsing");
+        void outline.offsetWidth;
+        outline.classList.add("is-pulsing");
+        setTimeout(() => outline.classList.remove("is-pulsing"), 1500);
+      }, 250);
+    }
+  }
+  /* ===== Marker / outline rendering ===== */
+  renderAllMarkers() {
+    if (!this.root) return;
+    for (const { marker } of this.markers.values()) marker.remove();
+    for (const { outline } of this.outlines.values()) outline.remove();
+    this.markers.clear();
+    this.outlines.clear();
+    const byElement = /* @__PURE__ */ new Map();
+    const perComment = /* @__PURE__ */ new Map();
+    const rankConf = (c) => c === "exact" ? 3 : c === "likely" ? 2 : c === "drifted" ? 1 : 0;
+    const bestConf = (a, b) => a === void 0 ? b : rankConf(b) > rankConf(a) ? b : a;
+    for (const c of this.comments) {
+      for (const fp of c.fingerprints || []) {
+        const key2 = fingerprintKey(fp);
+        let bucket = byElement.get(key2);
+        if (!bucket) {
+          const match = findByFingerprint(fp);
+          bucket = {
+            fp,
+            target: match.element,
+            confidence: match.confidence,
+            commentIds: []
+          };
+          byElement.set(key2, bucket);
+        }
+        bucket.commentIds.push(c.id);
+        perComment.set(c.id, bestConf(perComment.get(c.id), bucket.confidence));
+      }
+    }
+    this.resolvedConfidence.clear();
+    for (const c of this.comments) {
+      const conf = perComment.get(c.id) ?? "orphaned";
+      this.resolvedConfidence.set(c.id, conf);
+      const firstFp = (c.fingerprints || [])[0];
+      const elForEvent = firstFp ? byElement.get(fingerprintKey(firstFp))?.target ?? null : null;
+      this.bus.emit("anchor:resolved", { comment: c, confidence: conf, element: elForEvent });
+    }
+    for (const c of this.comments) {
+      if (this.selfHealedThisSession.has(c.id)) continue;
+      if (this.resolvedConfidence.get(c.id) !== "drifted") continue;
+      void this.selfHealComment(c, byElement);
+    }
+    for (const [key2, info] of byElement) {
+      if (info.confidence === "orphaned" || !info.target) continue;
+      const outlineEl = document.createElement("div");
+      outlineEl.className = "vz-comment-outline";
+      if (info.confidence === "drifted") outlineEl.classList.add("vz-comment-outline-drifted");
+      this.root.appendChild(outlineEl);
+      this.outlines.set(key2, { outline: outlineEl, target: info.target, fp: info.fp });
+      const marker = document.createElement("button");
+      marker.className = "vz-marker";
+      if (info.confidence === "drifted") marker.classList.add("vz-marker-drifted");
+      marker.setAttribute("data-element-key", key2);
+      marker.setAttribute("data-confidence", info.confidence);
+      const total = info.commentIds.length;
+      if (total > 1) {
+        marker.textContent = String(total);
+        marker.title = total + " comments";
+      } else {
+        marker.textContent = "";
+        const c = this.comments.find((c2) => c2.id === info.commentIds[0]);
+        marker.title = c?.author ? "Comment by " + c.author.name : "Comment";
+      }
+      marker.addEventListener("click", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (info.target) {
+          const elComments = this.commentsForElement(info.fp);
+          this.openPopoverFor([info.target], [info.fp], elComments);
+        }
+      });
+      marker.addEventListener("mouseenter", () => this.pulseRelatedElements(info.commentIds, key2));
+      this.root.appendChild(marker);
+      this.markers.set(key2, { marker, target: info.target, fp: info.fp, commentIds: info.commentIds });
+      if (info.target) {
+        this.positionMarker(marker, info.target);
+        this.positionOutline(outlineEl, info.target);
+      } else {
+        marker.style.display = "none";
+        outlineEl.style.display = "none";
+      }
+    }
+  }
+  /** Pulse outlines of OTHER elements that share a multi-anchor comment with this one. */
+  pulseRelatedElements(commentIds, selfKey) {
+    const relatedKeys = /* @__PURE__ */ new Set();
+    for (const cid of commentIds) {
+      const c = this.comments.find((c2) => c2.id === cid);
+      if (!c) continue;
+      const fps = c.fingerprints || [];
+      if (fps.length <= 1) continue;
+      for (const fp of fps) {
+        const k = fingerprintKey(fp);
+        if (k !== selfKey) relatedKeys.add(k);
+      }
+    }
+    for (const key2 of relatedKeys) {
+      const outline = this.outlines.get(key2)?.outline;
+      if (!outline) continue;
+      outline.classList.remove("is-pulsing");
+      void outline.offsetWidth;
+      outline.classList.add("is-pulsing");
+      setTimeout(() => outline.classList.remove("is-pulsing"), 900);
+    }
+  }
+  positionOutline(outline, target) {
+    const rect = target.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+      outline.style.display = "none";
+      return;
+    }
+    outline.style.display = "";
+    outline.style.left = rect.left + "px";
+    outline.style.top = rect.top + "px";
+    outline.style.width = rect.width + "px";
+    outline.style.height = rect.height + "px";
+  }
+  positionMarker(marker, target) {
+    const rect = target.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) {
+      marker.style.display = "none";
+      return;
+    }
+    marker.style.display = "";
+    marker.style.left = rect.right + "px";
+    marker.style.top = rect.top + "px";
+  }
+  /* ===== Active anchor outlines (transient, while popover open or multi-select pending) ===== */
+  syncActiveAnchorOutlines(fps) {
+    if (!this.root) return;
+    const wanted = new Set(fps.map((fp) => fingerprintKey(fp)));
+    for (const [key2, info] of this.activeAnchorOutlines) {
+      if (!wanted.has(key2)) {
+        info.el.remove();
+        this.activeAnchorOutlines.delete(key2);
+      }
+    }
+    for (const fp of fps) {
+      const key2 = fingerprintKey(fp);
+      if (this.activeAnchorOutlines.has(key2)) continue;
+      const outline = document.createElement("div");
+      outline.className = "vz-comment-outline is-selected-pending";
+      this.root.appendChild(outline);
+      const target = findElementByFingerprint(fp);
+      if (target) this.positionOutline(outline, target);
+      else outline.style.display = "none";
+      this.activeAnchorOutlines.set(key2, { el: outline, fp });
+    }
+  }
+  clearActiveAnchorOutlines() {
+    for (const info of this.activeAnchorOutlines.values()) info.el.remove();
+    this.activeAnchorOutlines.clear();
+  }
+  /* ===== Helpers ===== */
+  actionContext() {
+    return {
+      comments: this.getComments(),
+      pageHtml: this.snapshotHtml(),
+      pageUrl: typeof location !== "undefined" ? location.href : void 0,
+      pageVersion: this.opts.pageVersion,
+      user: this.user ?? void 0,
+      timestamp: Date.now(),
+      copyToClipboard: (text) => this.copyToClipboard(text),
+      toast: (msg) => this.pill?.toast(msg)
+    };
+  }
+  snapshotHtml() {
+    const clone = document.documentElement.cloneNode(true);
+    for (const node of clone.querySelectorAll("[data-vizu-root], #vizu-styles")) node.remove();
+    const attrs = document.documentElement.getAttributeNames().map((n) => ` ${n}="${(document.documentElement.getAttribute(n) || "").replace(/"/g, "&quot;")}"`).join("");
+    return "<!DOCTYPE html>\n<html" + attrs + ">\n" + clone.innerHTML + "\n</html>";
+  }
+  copyToClipboard(text) {
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard.writeText(text).catch(() => fallbackCopy(text));
+    } else fallbackCopy(text);
+  }
+};
+function fallbackCopy(text) {
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.position = "fixed";
+  ta.style.opacity = "0";
+  document.body.appendChild(ta);
+  ta.select();
+  try {
+    document.execCommand("copy");
+  } catch {
+  }
+  ta.remove();
+}
+export {
+  CloudStorageAdapter,
+  InMemoryStorageAdapter,
+  LocalStorageAdapter,
+  NullStorageAdapter,
+  SCHEMA_VERSION,
+  Vizu,
+  findByFingerprint,
+  findElementByFingerprint,
+  fingerprint,
+  fingerprintKey,
+  fingerprintLabel
+};
+//# sourceMappingURL=index.js.map