@unhingged/vizu-core 0.1.15 → 0.1.17

package/dist/internal.cjs

@@ -0,0 +1,2538 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/internal.ts
+var internal_exports = {};
+__export(internal_exports, {
+  Highlighter: () => Highlighter,
+  Pill: () => Pill,
+  Popover: () => Popover,
+  Sidebar: () => Sidebar,
+  injectStyles: () => injectStyles
+});
+module.exports = __toCommonJS(internal_exports);
+
+// src/util.ts
+function isInside(target, selector) {
+  return !!target.closest(selector);
+}
+function escapeHtml(s) {
+  if (s == null) return "";
+  return String(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) {
+  if (!name) return "";
+  return String(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>`;
+  const displayName = user.name || user.id || "User";
+  if (user.avatarUrl) {
+    return `<span class="${className}"><img src="${escapeHtml(user.avatarUrl)}" alt="${escapeHtml(displayName)}" /></span>`;
+  }
+  return `<span class="${className}">${escapeHtml(initials(displayName) || "?")}</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>`;
+}
+
+// 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/fingerprint.ts
+function fingerprintKey(fp) {
+  return fp.selector + "|" + fp.textSnippet;
+}
+function fingerprintLabel(fp) {
+  const tag = fp.tagName.toLowerCase();
+  if (fp.textSnippet) {
+    const snippet = fp.textSnippet.length > 24 ? fp.textSnippet.slice(0, 24) + "\u2026" : fp.textSnippet;
+    return tag + ": " + snippet;
+  }
+  if (fp.attributes.id) return tag + "#" + fp.attributes.id;
+  if (fp.attributes.classList && fp.attributes.classList.length) return tag + "." + fp.attributes.classList[0];
+  return tag;
+}
+
+// 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 || r.author.id || "User")}</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 = [];
+    /** Open mention picker element, if any. Held so the next openMentionPicker / close calls can tear it down. */
+    this.mentionPicker = null;
+    /** Dismiss handlers wired to document for the open picker; cleared in closeMentionPicker. */
+    this.mentionPickerDismiss = null;
+    /** All mentionable users fetched for the open picker — pre-filter list. */
+    this.mentionPickerUsers = [];
+    /** Currently visible subset of `mentionPickerUsers` after the user's filter. */
+    this.mentionPickerFiltered = [];
+    /** Highlighted index in `mentionPickerFiltered`. Up/Down arrows mutate this. */
+    this.mentionPickerSelected = 0;
+    /**
+     * 'manual' = opened from the @ mention button (separate search input).
+     * 'editor' = opened by typing `@` in the editor; filter is derived
+     * from the text after `@` in the editor itself, no search input.
+     */
+    this.mentionPickerMode = "manual";
+    /**
+     * In editor mode: a Range covering `@<query>` in the editor's text.
+     * Used to replace that span with the mention chip on commit, and to
+     * recompute the bounding rect when re-positioning after typing.
+     */
+    this.mentionPickerEditorRange = null;
+    this.handleEditorKey = (e) => {
+      const editor = e.currentTarget;
+      if (this.mentionPicker && this.mentionPickerMode === "editor") {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          this.moveMentionPickerSelection(1);
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          this.moveMentionPickerSelection(-1);
+          return;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          if (this.mentionPickerFiltered.length > 0) {
+            e.preventDefault();
+            this.commitMentionPickerSelection();
+            return;
+          }
+        }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          this.closeMentionPicker();
+          return;
+        }
+      }
+      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();
+      }
+    };
+    /**
+     * Fires after every keystroke in the editor (post-insertion). Looks
+     * for an `@<query>` pattern adjacent to the caret. If found, opens
+     * (or refreshes) the mention picker in editor mode. If the trigger
+     * disappears (user typed a space, backspaced over @, etc.), closes
+     * the picker.
+     */
+    this.handleEditorInput = () => {
+      const trigger = this.detectMentionTrigger();
+      if (trigger) {
+        void this.openOrUpdateEditorMentionPicker(trigger.range, trigger.query);
+      } else if (this.mentionPicker && this.mentionPickerMode === "editor") {
+        this.closeMentionPicker();
+      }
+    };
+    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 key = removeBtn.getAttribute("data-fp-key");
+        if (key) this.removeAnchor(key);
+        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.openMentionPicker(target);
+      } 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 key = fingerprintKey(fp);
+    if (this.anchorFingerprints.some((x) => fingerprintKey(x) === key)) 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(key) {
+    if (this.anchorFingerprints.length <= 1) return false;
+    const idx = this.anchorFingerprints.findIndex((x) => fingerprintKey(x) === key);
+    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.closeMentionPicker();
+    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 || c.author.id || "User")}</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 a teammate">@ 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("input", this.handleEditorInput);
+    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 key = fingerprintKey(fp);
+      const label = fingerprintLabel(fp);
+      return `<span class="vz-anchor-chip" data-fp-key="${escapeHtml(key)}">${escapeHtml(label)}<button class="vz-anchor-chip-remove" data-vz="remove-anchor" data-fp-key="${escapeHtml(key)}" 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>
+    `;
+  }
+  /**
+   * Walk back from the caret looking for the most recent `@` that
+   * starts a mention trigger — must be at start-of-text-node or
+   * preceded by whitespace, and there must be no whitespace between
+   * `@` and the caret. Returns the Range covering `@<query>` plus
+   * the bare query string.
+   */
+  detectMentionTrigger() {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return null;
+    const caret = sel.getRangeAt(0);
+    const node = caret.startContainer;
+    if (node.nodeType !== Node.TEXT_NODE) return null;
+    const text = node.textContent ?? "";
+    const offset = caret.startOffset;
+    for (let i = offset - 1; i >= 0; i--) {
+      const ch = text[i];
+      if (ch === "@") {
+        const prev = i > 0 ? text[i - 1] : "";
+        if (prev !== "" && !/\s/.test(prev)) return null;
+        const query = text.slice(i + 1, offset);
+        if (/\s/.test(query)) return null;
+        const range = document.createRange();
+        range.setStart(node, i);
+        range.setEnd(node, offset);
+        return { range, query };
+      }
+      if (/\s/.test(ch)) return null;
+    }
+    return null;
+  }
+  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();
+  }
+  /**
+   * Manual-mode picker: opens from the @ mention button. Renders a
+   * search input above the list; the user types into the input to
+   * filter, arrows + Enter to pick. The selection inserts a mention
+   * chip at the editor's current caret (no `@<query>` replacement —
+   * the user didn't type one).
+   */
+  async openMentionPicker(anchor) {
+    this.closeMentionPicker();
+    if (!this.callbacks.onMentionSearch) return;
+    this.mentionPickerMode = "manual";
+    this.mentionPickerEditorRange = null;
+    const picker = this.createMentionPickerShell();
+    this.positionMentionPickerByElement(picker, anchor);
+    const users = await this.fetchMentionables();
+    if (this.mentionPicker !== picker) return;
+    this.mentionPickerUsers = users;
+    this.renderMentionPickerBody("");
+    this.positionMentionPickerByElement(picker, anchor);
+    const input = picker.querySelector(".vz-mention-search");
+    input?.focus();
+    this.wireMentionPickerDismiss();
+  }
+  /**
+   * Editor-mode picker: opens because the user typed `@` in the
+   * editor. No search input — the editor IS the search; the query is
+   * the text after `@`. On commit, replaces the `@<query>` range with
+   * the chip.
+   */
+  async openOrUpdateEditorMentionPicker(range, query) {
+    this.mentionPickerEditorRange = range;
+    if (!this.mentionPicker || this.mentionPickerMode !== "editor") {
+      this.closeMentionPicker();
+      this.mentionPickerMode = "editor";
+      const picker = this.createMentionPickerShell({ showSearch: false });
+      this.positionMentionPickerByRange(picker, range);
+      const users = await this.fetchMentionables();
+      if (this.mentionPicker !== picker) return;
+      this.mentionPickerUsers = users;
+      this.renderMentionPickerBody(query);
+      this.positionMentionPickerByRange(picker, range);
+      this.wireMentionPickerDismiss();
+      return;
+    }
+    this.renderMentionPickerBody(query);
+    this.positionMentionPickerByRange(this.mentionPicker, range);
+  }
+  /**
+   * Build the picker DOM scaffold and attach it to the popover. Does
+   * NOT fetch users or render the body — caller's responsibility.
+   * Search input is hidden in editor mode where the user already has
+   * a perfectly good text-entry surface (the editor itself).
+   */
+  createMentionPickerShell({ showSearch = true } = {}) {
+    const picker = document.createElement("div");
+    picker.className = "vz-mention-picker";
+    picker.setAttribute("data-vz-ignore", "");
+    picker.innerHTML = `
+      ${showSearch ? `<input class="vz-mention-search" type="text" placeholder="Search teammates\u2026" autocomplete="off" spellcheck="false" />` : ""}
+      <div class="vz-mention-list" data-vz="mention-list">
+        <div class="vz-mention-loading">Loading\u2026</div>
+      </div>
+    `;
+    this.el.appendChild(picker);
+    this.mentionPicker = picker;
+    this.mentionPickerFiltered = [];
+    this.mentionPickerSelected = 0;
+    picker.addEventListener("mousemove", (e) => {
+      const btn = e.target?.closest(".vz-mention-item");
+      if (!btn) return;
+      const idx = Number(btn.getAttribute("data-mention-index") ?? -1);
+      if (idx >= 0 && idx !== this.mentionPickerSelected) {
+        this.mentionPickerSelected = idx;
+        this.refreshMentionPickerHighlight();
+      }
+    });
+    picker.addEventListener("click", (e) => {
+      const btn = e.target?.closest(".vz-mention-item");
+      if (!btn) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const idx = Number(btn.getAttribute("data-mention-index") ?? -1);
+      if (idx >= 0) {
+        this.mentionPickerSelected = idx;
+        this.commitMentionPickerSelection();
+      }
+    });
+    if (showSearch) {
+      const input = picker.querySelector(".vz-mention-search");
+      input?.addEventListener("input", () => this.renderMentionPickerBody(input.value));
+      input?.addEventListener("keydown", (e) => {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          this.moveMentionPickerSelection(1);
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          this.moveMentionPickerSelection(-1);
+        } else if (e.key === "Enter" || e.key === "Tab") {
+          if (this.mentionPickerFiltered.length > 0) {
+            e.preventDefault();
+            this.commitMentionPickerSelection();
+          }
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          this.closeMentionPicker();
+        }
+      });
+    }
+    return picker;
+  }
+  /** Fetch the mentionable list. Swallows errors → []. */
+  async fetchMentionables() {
+    if (!this.callbacks.onMentionSearch) return [];
+    try {
+      return await this.callbacks.onMentionSearch();
+    } catch {
+      return [];
+    }
+  }
+  /**
+   * Re-filter the cached users by `query`, render the list, reset
+   * selected to 0. Called on every search input change and on every
+   * editor input event while in editor mode.
+   */
+  renderMentionPickerBody(query) {
+    const picker = this.mentionPicker;
+    if (!picker) return;
+    const list = picker.querySelector('[data-vz="mention-list"]');
+    if (!list) return;
+    const q = query.toLowerCase().trim();
+    this.mentionPickerFiltered = q ? this.mentionPickerUsers.filter((u) => u.name.toLowerCase().includes(q)) : this.mentionPickerUsers.slice();
+    this.mentionPickerSelected = 0;
+    if (this.mentionPickerFiltered.length === 0) {
+      list.innerHTML = `<div class="vz-mention-empty">${this.mentionPickerUsers.length === 0 ? "No teammates to mention yet." : "No teammates match."}</div>`;
+      return;
+    }
+    list.innerHTML = this.mentionPickerFiltered.map((u, i) => {
+      const avatar = u.avatarUrl ? `<img class="vz-mention-avatar" src="${escapeHtml(u.avatarUrl)}" alt="" />` : `<span class="vz-mention-avatar vz-mention-avatar-initials">${escapeHtml(initials(u.name) || "?")}</span>`;
+      return `<button class="vz-mention-item${i === 0 ? " is-selected" : ""}" type="button" data-mention-index="${i}">${avatar}<span class="vz-mention-item-name">${escapeHtml(u.name)}</span></button>`;
+    }).join("");
+  }
+  moveMentionPickerSelection(delta) {
+    if (this.mentionPickerFiltered.length === 0) return;
+    const n = this.mentionPickerFiltered.length;
+    this.mentionPickerSelected = (this.mentionPickerSelected + delta + n) % n;
+    this.refreshMentionPickerHighlight();
+  }
+  refreshMentionPickerHighlight() {
+    const picker = this.mentionPicker;
+    if (!picker) return;
+    const items = picker.querySelectorAll(".vz-mention-item");
+    items.forEach((el, i) => el.classList.toggle("is-selected", i === this.mentionPickerSelected));
+    items[this.mentionPickerSelected]?.scrollIntoView({ block: "nearest" });
+  }
+  commitMentionPickerSelection() {
+    const user = this.mentionPickerFiltered[this.mentionPickerSelected];
+    if (!user) return;
+    if (this.mentionPickerMode === "editor" && this.mentionPickerEditorRange) {
+      this.replaceRangeWithMentionChip(this.mentionPickerEditorRange, user);
+    } else {
+      this.insertMentionChip(user);
+    }
+    this.closeMentionPicker();
+  }
+  /**
+   * Swap a Range covering `@<query>` for a mention chip + trailing
+   * space, then place the caret after the space so the user can keep
+   * typing. Used only in editor-trigger mode.
+   */
+  replaceRangeWithMentionChip(range, user) {
+    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;
+    range.deleteContents();
+    range.insertNode(chip);
+    const space = document.createTextNode(" ");
+    chip.after(space);
+    const sel = window.getSelection();
+    if (sel) {
+      const after = document.createRange();
+      after.setStartAfter(space);
+      after.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(after);
+    }
+    editor.focus();
+  }
+  /** Wires Esc + outside-click handlers to close the open picker. */
+  wireMentionPickerDismiss() {
+    if (this.mentionPickerDismiss) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this.closeMentionPicker();
+      }
+    };
+    const onOutside = (e) => {
+      if (!this.mentionPicker) return;
+      if (this.mentionPicker.contains(e.target)) return;
+      if (this.mentionPickerMode === "editor") {
+        const editor = this.el.querySelector(".vz-textarea");
+        if (editor && editor.contains(e.target)) return;
+      }
+      this.closeMentionPicker();
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("mousedown", onOutside, true);
+    this.mentionPickerDismiss = () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("mousedown", onOutside, true);
+    };
+  }
+  closeMentionPicker() {
+    if (this.mentionPickerDismiss) {
+      this.mentionPickerDismiss();
+      this.mentionPickerDismiss = null;
+    }
+    if (this.mentionPicker) {
+      this.mentionPicker.remove();
+      this.mentionPicker = null;
+    }
+    this.mentionPickerFiltered = [];
+    this.mentionPickerSelected = 0;
+    this.mentionPickerEditorRange = null;
+  }
+  /** Position the picker below the given anchor (the @ mention button). */
+  positionMentionPickerByElement(picker, anchor) {
+    const popRect = this.el.getBoundingClientRect();
+    const btnRect = anchor.getBoundingClientRect();
+    picker.style.left = `${btnRect.left - popRect.left}px`;
+    picker.style.top = `${btnRect.bottom - popRect.top + 4}px`;
+  }
+  /** Position the picker below the `@<query>` text range in the editor. */
+  positionMentionPickerByRange(picker, range) {
+    const popRect = this.el.getBoundingClientRect();
+    const rect = range.getBoundingClientRect();
+    picker.style.left = `${rect.left - popRect.left}px`;
+    picker.style.top = `${rect.bottom - popRect.top + 4}px`;
+  }
+  /**
+   * Insert a mention chip for the given user into the editor at the
+   * current caret position. Accepts any user-like shape with a required
+   * `id` + `name` — covers both the current VizuUser (for self-mention)
+   * and MentionableUser (from the workspace member picker).
+   */
+  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.closeMentionPicker();
+    this.el.removeEventListener("click", this.handleClick);
+    this.el.remove();
+  }
+};
+
+// src/highlighter.ts
+var IGNORE_SELECTOR = "[data-vizu-root], [data-vizu-ignore], script, style, link, meta, head";
+var Highlighter = class {
+  constructor(root, extraIgnore, onClick) {
+    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.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;
+  }
+  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/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 key = fingerprintKey(primary);
+      const g = groups.get(key);
+      if (g) g.comments.push(c);
+      else groups.set(key, { 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 key = chip.getAttribute("data-fp-key");
+      const fp = findFingerprintByKey(visible, key || "");
+      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, key) {
+  for (const c of comments) {
+    for (const fp of c.fingerprints || []) {
+      if (fingerprintKey(fp) === key) 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); }
+
+/* Mention picker \u2014 floating dropdown anchored under the @ mention button */
+.vz-mention-picker {
+  position: absolute;
+  z-index: 10;
+  min-width: 200px;
+  max-width: 280px;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 4px;
+  background: var(--vz-bg-popover, #1c1c1c);
+  border: 1px solid var(--vz-border, rgba(255,255,255,0.08));
+  border-radius: 8px;
+  box-shadow: 0 12px 28px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.vz-mention-search {
+  width: 100%;
+  padding: 7px 9px;
+  margin-bottom: 4px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--vz-border, rgba(255,255,255,0.08));
+  border-radius: 6px;
+  color: #fafafa;
+  font-size: 13px;
+  outline: none;
+  box-sizing: border-box;
+}
+.vz-mention-search:focus { border-color: var(--vz-accent, #ff8b6e); }
+.vz-mention-search::placeholder { color: var(--vz-text-muted); }
+.vz-mention-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-height: 0;
+}
+.vz-mention-loading,
+.vz-mention-empty {
+  padding: 10px 12px;
+  font-size: 12px;
+  color: var(--vz-text-muted);
+  text-align: center;
+}
+.vz-mention-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  border-radius: 6px;
+  background: transparent;
+  border: none;
+  color: #fafafa;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 80ms;
+}
+.vz-mention-item.is-selected,
+.vz-mention-item:focus-visible {
+  background: var(--vz-bg-hover, rgba(255,255,255,0.08));
+  outline: none;
+}
+.vz-mention-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px; height: 22px;
+  border-radius: 50%;
+  font-size: 10px; font-weight: 600;
+  color: var(--vz-marker-fg, #0a0a0a);
+  background: var(--vz-accent, #ff8b6e);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.vz-mention-avatar img {
+  width: 100%; height: 100%; object-fit: cover;
+}
+.vz-mention-item-name {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 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). user-select
+ * prevents the user from selecting the chip's text and editing it; the
+ * displayed comment is intentionally read-only after save. */
+.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;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: default;
+}
+
+/* Mention chip inside the editor (contenteditable=false token). Same
+ * non-selection rules as .vz-mention so the chip stays atomic even
+ * inside the editable surface \u2014 caret can land before/after but not
+ * inside, no partial-text edit. */
+.vz-chip-mention {
+  background: color-mix(in srgb, var(--vz-accent) 16%, var(--vz-bg-hover));
+  color: var(--vz-accent);
+  font-weight: 600;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.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;
+}
+/* Opt-in only during an active dragover. The explicit display:flex
+ * above out-specifics the browser default for [hidden], so we restate
+ * the hide rule here to make the attribute toggle effective. */
+.vz-attachment-drop-hint[hidden] { display: none; }
+
+/* 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);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Highlighter,
+  Pill,
+  Popover,
+  Sidebar,
+  injectStyles
+});
+//# sourceMappingURL=internal.cjs.map