@unhingged/vizu-core 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -3,9 +3,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -20,1512 +17,161 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/fingerprint.ts
-function buildSelector(el) {
-  const parts = [];
-  let current = el;
-  let depth = 0;
-  while (current && current !== document.documentElement && depth < 8) {
-    let part = current.tagName.toLowerCase();
-    if (current.id) {
-      parts.unshift("#" + CSS.escape(current.id));
-      break;
-    }
-    const cls = Array.from(current.classList).filter((c) => !c.startsWith("vz-") && !c.startsWith("vizu-")).slice(0, 2);
-    if (cls.length) part += "." + cls.map((c) => CSS.escape(c)).join(".");
-    const parent = current.parentElement;
-    if (parent) {
-      const sameTag = Array.from(parent.children).filter((c) => c.tagName === current.tagName);
-      if (sameTag.length > 1) {
-        const idx = sameTag.indexOf(current);
-        part += ":nth-of-type(" + (idx + 1) + ")";
-      }
-    }
-    parts.unshift(part);
-    current = parent;
-    depth++;
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  CloudStorageAdapter: () => CloudStorageAdapter,
+  InMemoryStorageAdapter: () => InMemoryStorageAdapter,
+  LocalStorageAdapter: () => LocalStorageAdapter,
+  NullStorageAdapter: () => NullStorageAdapter,
+  SCHEMA_VERSION: () => SCHEMA_VERSION,
+  Vizu: () => Vizu,
+  findByFingerprint: () => findByFingerprint,
+  findElementByFingerprint: () => findElementByFingerprint,
+  fingerprint: () => fingerprint,
+  fingerprintKey: () => fingerprintKey,
+  fingerprintLabel: () => fingerprintLabel
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/types.ts
+var SCHEMA_VERSION = 2;
+
+// src/util.ts
+function uuid() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
   }
-  return parts.join(" > ");
+  return Math.random().toString(36).slice(2) + Date.now().toString(36);
 }
-function fingerprint(el) {
-  const text = el.innerText || el.textContent || "";
-  const parent = el.parentElement;
-  let siblingIndex = 0;
-  if (parent) {
-    siblingIndex = Array.from(parent.children).indexOf(el);
+function isInside(target, selector) {
+  return !!target.closest(selector);
+}
+function escapeHtml(s) {
+  return s.replace(/[&<>"']/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[ch]);
+}
+function formatTime(ts) {
+  const d = new Date(ts);
+  const now = Date.now();
+  const diff = now - ts;
+  if (diff < 6e4) return "just now";
+  if (diff < 36e5) return Math.floor(diff / 6e4) + "m ago";
+  if (diff < 864e5) return Math.floor(diff / 36e5) + "h ago";
+  return d.toLocaleDateString() + " " + d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
+function initials(name) {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0].toUpperCase()).join("");
+}
+function avatarHtml(user, className = "vz-comment-author-avatar") {
+  if (!user) return `<span class="${className}">\xB7</span>`;
+  if (user.avatarUrl) {
+    return `<span class="${className}"><img src="${escapeHtml(user.avatarUrl)}" alt="${escapeHtml(user.name)}" /></span>`;
   }
-  return {
-    selector: buildSelector(el),
-    parentSelector: parent ? buildSelector(parent) : "",
-    tagName: el.tagName,
-    textSnippet: text.trim().slice(0, TEXT_SNIPPET_MAX),
-    siblingIndex,
-    attributes: {
-      id: el.id || void 0,
-      classList: Array.from(el.classList).filter((c) => !c.startsWith("vz-") && !c.startsWith("vizu-")),
-      role: el.getAttribute("role") || void 0,
-      ariaLabel: el.getAttribute("aria-label") || void 0,
-      dataKey: el.getAttribute("data-vizu-key") || void 0
-    },
-    ancestorChain: captureAncestorChain(el, ANCESTOR_DEPTH),
-    algorithmVersion: 2
-  };
+  return `<span class="${className}">${escapeHtml(initials(user.name) || "?")}</span>`;
 }
-function captureAncestorChain(el, depth) {
-  const steps = [];
-  let current = el.parentElement;
-  while (current && steps.length < depth) {
-    const parent = current.parentElement;
-    let nthOfType = 1;
-    if (parent) {
-      const sameTag = Array.from(parent.children).filter((c) => c.tagName === current.tagName);
-      nthOfType = sameTag.indexOf(current) + 1;
+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>`;
     }
-    steps.push({ tag: current.tagName, nthOfType });
-    current = parent;
+    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 steps.length > 0 ? { steps } : void 0;
+  return out;
 }
-function findByFingerprint(fp, root = document) {
-  if (fp.attributes.dataKey) {
-    try {
-      const byKey = root.querySelector(`[data-vizu-key="${CSS.escape(fp.attributes.dataKey)}"]`);
-      if (byKey) return { element: byKey, confidence: "exact" };
-    } catch {
+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 { element: null, confidence: "orphaned" };
-  }
-  if (fp.attributes.id) {
-    try {
-      const byId = root.querySelector("#" + CSS.escape(fp.attributes.id));
-      if (byId) return { element: byId, confidence: "exact" };
-    } catch {
+    return `
+        <a class="vz-attachment-display vz-attachment-file" href="${escapeHtml(a.url)}" target="_blank" rel="noreferrer">
+          <span class="vz-attachment-icon" aria-hidden="true">\u{1F4C4}</span>
+          <span class="vz-attachment-filename">${escapeHtml(filename)}</span>
+        </a>
+      `;
+  }).join("");
+  return `<div class="vz-attachment-grid">${items}</div>`;
+}
+function migrateComment(raw) {
+  if (!raw || typeof raw !== "object") return raw;
+  const next = { ...raw };
+  if (!Array.isArray(next.fingerprints) || next.fingerprints.length === 0) {
+    if (next.fingerprint) {
+      next.fingerprints = [next.fingerprint];
     }
   }
-  const candidates = [];
-  const classes = fp.attributes.classList;
-  if (classes && classes.length > 0) {
-    const m = findByClassSignature(root, fp.tagName, classes);
-    if (m?.element) candidates.push({ el: m.element, rung: "class" });
-  }
-  try {
-    const bySelector = root.querySelector(fp.selector);
-    if (bySelector) candidates.push({ el: bySelector, rung: "selector" });
-  } catch {
-  }
-  if (fp.ancestorChain && fp.ancestorChain.steps.length > 0) {
-    const m = findByAncestorChain(root, fp.tagName, fp.ancestorChain.steps);
-    if (m?.element) candidates.push({ el: m.element, rung: "chain" });
-  } else {
-    try {
-      const parent = fp.parentSelector ? root.querySelector(fp.parentSelector) : root;
-      if (parent) {
-        const candidate = parent.children[fp.siblingIndex];
-        if (candidate && candidate.tagName === fp.tagName) {
-          candidates.push({ el: candidate, rung: "chain" });
-        }
-      }
-    } catch {
-    }
+  delete next.fingerprint;
+  if (next.url && !next.pageUrl) {
+    next.pageUrl = next.url;
   }
-  if (fp.textSnippet) {
-    const m = findByTextSnippet(root, fp.tagName, fp.textSnippet);
-    if (m?.element) candidates.push({ el: m.element, rung: "text" });
+  if (!("status" in next) || !isValidStatus(next.status)) next.status = "open";
+  if (!Array.isArray(next.replies)) next.replies = [];
+  if (!Array.isArray(next.attachments)) next.attachments = [];
+  if (!Array.isArray(next.mentions)) next.mentions = [];
+  if (!("fingerprintsRefreshedAt" in next)) next.fingerprintsRefreshedAt = null;
+  next.schemaVersion = SCHEMA_VERSION;
+  return next;
+}
+function isValidStatus(s) {
+  return s === "open" || s === "resolved" || s === "wontfix";
+}
+function migrateComments(raws) {
+  if (!Array.isArray(raws)) return [];
+  const out = [];
+  for (const raw of raws) {
+    if (!raw || typeof raw !== "object") continue;
+    out.push(migrateComment(raw));
   }
-  if (candidates.length === 0) {
-    return { element: null, confidence: "orphaned" };
+  return out;
+}
+function needsPersist(raws) {
+  if (!Array.isArray(raws)) return false;
+  for (const raw of raws) {
+    if (!raw || typeof raw !== "object") continue;
+    const c = raw;
+    if (c.schemaVersion !== SCHEMA_VERSION) return true;
+    if ("fingerprint" in c) return true;
+    if (!Array.isArray(c.replies)) return true;
+    if (!Array.isArray(c.attachments)) return true;
+    if (!Array.isArray(c.mentions)) return true;
   }
-  const votes = /* @__PURE__ */ new Map();
-  for (const c of candidates) {
-    let s = votes.get(c.el);
-    if (!s) {
-      s = /* @__PURE__ */ new Set();
-      votes.set(c.el, s);
-    }
-    s.add(c.rung);
+  return false;
+}
+
+// src/storage.ts
+var key = (ns) => `vizu:comments:${ns}`;
+var LocalStorageAdapter = class {
+  async load(namespace) {
+    return readArray(namespace);
   }
-  let best = null;
-  for (const [el, rungs] of votes) {
-    if (!best || rungs.size > best.rungs.size) best = { el, rungs };
-  }
-  if (!best) return { element: null, confidence: "orphaned" };
-  if (best.rungs.size >= 3) return { element: best.el, confidence: "likely" };
-  if (best.rungs.size >= 2) return { element: best.el, confidence: "drifted" };
-  if (best.rungs.has("class") || best.rungs.has("chain")) {
-    return { element: best.el, confidence: "drifted" };
-  }
-  return { element: null, confidence: "orphaned" };
-}
-function findByClassSignature(root, tagName, needle) {
-  const needleSet = new Set(needle.filter((c) => !c.startsWith("vz-") && !c.startsWith("vizu-")));
-  if (needleSet.size === 0) return null;
-  const all = root.querySelectorAll(tagName.toLowerCase());
-  let best = null;
-  let secondScore = 0;
-  for (const el of all) {
-    const haystack = new Set(
-      Array.from(el.classList).filter((c) => !c.startsWith("vz-") && !c.startsWith("vizu-"))
-    );
-    if (haystack.size === 0) continue;
-    const score = jaccardSimilarity(needleSet, haystack);
-    if (score < CLASS_JACCARD_THRESHOLD) continue;
-    if (!best || score > best.score) {
-      secondScore = best?.score ?? 0;
-      best = { el, score };
-    } else if (score > secondScore) {
-      secondScore = score;
-    }
-  }
-  if (!best) return null;
-  if (best.score - secondScore < 0.1) return null;
-  return { element: best.el, confidence: "likely" };
-}
-function findByAncestorChain(root, tagName, steps) {
-  const all = root.querySelectorAll(tagName.toLowerCase());
-  let best = null;
-  for (const el of all) {
-    const ancestors = collectAncestorSteps(el, steps.length + ANCESTOR_MAX_SHIFT);
-    const score = scoreChainAgainstAncestors(ancestors, steps, ANCESTOR_MAX_SHIFT);
-    if (score < 2) continue;
-    if (!best || score > best.score) best = { el, score };
-  }
-  if (!best) return null;
-  return {
-    element: best.el,
-    confidence: best.score === steps.length ? "likely" : "drifted"
-  };
-}
-function collectAncestorSteps(el, limit) {
-  const steps = [];
-  let current = el.parentElement;
-  while (current && steps.length < limit) {
-    const parent = current.parentElement;
-    let nth = 1;
-    if (parent) {
-      const sameTag = Array.from(parent.children).filter((c) => c.tagName === current.tagName);
-      nth = sameTag.indexOf(current) + 1;
-    }
-    steps.push({ tag: current.tagName, nthOfType: nth });
-    current = parent;
-  }
-  return steps;
-}
-function findByTextSnippet(root, tagName, snippet) {
-  const needle = normalizeText(snippet);
-  if (!needle) return null;
-  const all = root.querySelectorAll(tagName.toLowerCase());
-  let best = null;
-  for (const el of all) {
-    const raw = el.innerText || el.textContent || "";
-    const candidate = normalizeText(raw.slice(0, TEXT_SNIPPET_MAX * 2));
-    if (!candidate) continue;
-    const score = levenshteinRatio(needle, candidate);
-    if (score < TEXT_RATIO_THRESHOLD) continue;
-    if (!best || score > best.score) {
-      best = { el, score };
-    }
-  }
-  return best ? { element: best.el, confidence: "drifted" } : null;
-}
-function normalizeText(input) {
-  return input.toLowerCase().replace(/\s+/g, " ").trim();
-}
-function levenshteinRatio(a, b) {
-  if (a === b) return 1;
-  if (a.length === 0 || b.length === 0) return a.length === b.length ? 1 : 0;
-  const maxLen = Math.max(a.length, b.length);
-  const distance = levenshteinDistance(a, b);
-  return 1 - distance / maxLen;
-}
-function levenshteinDistance(a, b) {
-  if (a.length > b.length) {
-    const tmp = a;
-    a = b;
-    b = tmp;
-  }
-  const prev = new Array(a.length + 1);
-  const curr = new Array(a.length + 1);
-  for (let i = 0; i <= a.length; i++) prev[i] = i;
-  for (let j = 1; j <= b.length; j++) {
-    curr[0] = j;
-    for (let i = 1; i <= a.length; i++) {
-      const cost = a.charCodeAt(i - 1) === b.charCodeAt(j - 1) ? 0 : 1;
-      curr[i] = Math.min(
-        curr[i - 1] + 1,
-        // insert
-        prev[i] + 1,
-        // delete
-        prev[i - 1] + cost
-        // substitute
-      );
-    }
-    for (let i = 0; i <= a.length; i++) prev[i] = curr[i];
-  }
-  return prev[a.length];
-}
-function scoreChainAgainstAncestors(actual, captured, maxShift) {
-  let best = 0;
-  for (let offset = 0; offset <= maxShift; offset++) {
-    let score = 0;
-    for (let i = 0; i < captured.length; i++) {
-      const a = actual[i + offset];
-      if (!a) break;
-      if (a.tag === captured[i].tag && a.nthOfType === captured[i].nthOfType) {
-        score++;
-      }
-    }
-    if (score > best) best = score;
-  }
-  return best;
-}
-function jaccardSimilarity(a, b) {
-  if (a.size === 0 && b.size === 0) return 1;
-  let intersection = 0;
-  for (const item of a) if (b.has(item)) intersection++;
-  const union = a.size + b.size - intersection;
-  return union === 0 ? 0 : intersection / union;
-}
-function findElementByFingerprint(fp, root) {
-  return findByFingerprint(fp, root).element;
-}
-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;
-}
-var TEXT_SNIPPET_MAX, ANCESTOR_DEPTH, ANCESTOR_MAX_SHIFT, TEXT_RATIO_THRESHOLD, CLASS_JACCARD_THRESHOLD;
-var init_fingerprint = __esm({
-  "src/fingerprint.ts"() {
-    "use strict";
-    TEXT_SNIPPET_MAX = 80;
-    ANCESTOR_DEPTH = 4;
-    ANCESTOR_MAX_SHIFT = 3;
-    TEXT_RATIO_THRESHOLD = 0.75;
-    CLASS_JACCARD_THRESHOLD = 0.6;
-  }
-});
-
-// src/cursor-colors.ts
-function colorForUser(userId) {
-  let h = 0;
-  for (let i = 0; i < userId.length; i++) {
-    h = h * 31 + userId.charCodeAt(i) | 0;
-  }
-  return CURSOR_COLORS[Math.abs(h) % CURSOR_COLORS.length];
-}
-function prefersReducedMotion() {
-  if (typeof window === "undefined" || !window.matchMedia) return false;
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-var CURSOR_COLORS;
-var init_cursor_colors = __esm({
-  "src/cursor-colors.ts"() {
-    "use strict";
-    CURSOR_COLORS = [
-      "#4F46E5",
-      // indigo
-      "#15803D",
-      // forest
-      "#C2410C",
-      // orange
-      "#BE185D",
-      // rose
-      "#0E7490",
-      // cyan
-      "#7E22CE",
-      // plum
-      "#DC2626",
-      // red
-      "#0F766E"
-      // teal
-    ];
-  }
-});
-
-// src/presence-stack.ts
-function createAvatar(user, onClick) {
-  const wrap = document.createElement("div");
-  wrap.setAttribute("data-vizu-presence-avatar", user.id);
-  wrap.setAttribute("data-vizu-presence-name", user.name);
-  wrap.setAttribute("data-vizu-presence-color", user.color);
-  if (user.avatar) wrap.setAttribute("data-vizu-presence-img", user.avatar);
-  const reduced = prefersReducedMotion();
-  const hoverTransition = reduced ? "none" : "transform 130ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 130ms ease-out";
-  wrap.style.cssText = `
-    position: relative;
-    width: ${AVATAR_SIZE}px;
-    height: ${AVATAR_SIZE}px;
-    margin-left: -${OVERLAP_PX}px;
-    border-radius: 50%;
-    background: ${user.color};
-    padding: 1.5px;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(0, 0, 0, 0.15);
-    cursor: pointer;
-    flex-shrink: 0;
-    transition: ${hoverTransition};
-  `;
-  wrap.addEventListener("click", (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onClick();
-  });
-  if (!reduced) {
-    wrap.addEventListener(
-      "mouseenter",
-      () => wrap.style.transform = "translateY(-1px) scale(1.06)"
-    );
-    wrap.addEventListener("mouseleave", () => wrap.style.transform = "");
-  }
-  const inner = document.createElement("div");
-  inner.setAttribute("data-vizu-presence-inner", "");
-  inner.style.cssText = `
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    overflow: hidden;
-    background: ${user.color};
-    color: #ffffff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 10.5px;
-    font-weight: 600;
-    letter-spacing: -0.01em;
-    line-height: 1;
-    user-select: none;
-  `;
-  paintAvatarContent(inner, user);
-  wrap.appendChild(inner);
-  const tip = createTooltip(user.name);
-  wrap.appendChild(tip);
-  wrap.addEventListener("mouseenter", () => {
-    tip.style.opacity = "1";
-    tip.style.transform = "translateY(0)";
-  });
-  wrap.addEventListener("mouseleave", () => {
-    tip.style.opacity = "0";
-    tip.style.transform = "translateY(-2px)";
-  });
-  return wrap;
-}
-function updateAvatar(wrap, user) {
-  const inner = wrap.querySelector("[data-vizu-presence-inner]");
-  if (inner) paintAvatarContent(inner, user);
-  const tip = wrap.querySelector("[data-vizu-presence-tip]");
-  if (tip) tip.textContent = user.name;
-  wrap.setAttribute("data-vizu-presence-name", user.name);
-  if (user.avatar) wrap.setAttribute("data-vizu-presence-img", user.avatar);
-  else wrap.removeAttribute("data-vizu-presence-img");
-}
-function avatarMeta(wrap) {
-  const id = wrap.getAttribute("data-vizu-presence-avatar");
-  const name = wrap.getAttribute("data-vizu-presence-name");
-  const color = wrap.getAttribute("data-vizu-presence-color");
-  if (!id || !name || !color) return null;
-  const avatar = wrap.getAttribute("data-vizu-presence-img") ?? void 0;
-  return { id, name, color, avatar };
-}
-function paintAvatarFollowState(wrap, user, isFollowing) {
-  if (isFollowing) {
-    wrap.style.boxShadow = `0 0 0 2px rgba(255, 255, 255, 0.95), 0 0 0 4px var(--vizu-coral, #FF6647), 0 4px 12px rgba(255, 102, 71, 0.4)`;
-  } else {
-    wrap.style.boxShadow = `0 0 0 2px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(0, 0, 0, 0.15)`;
-  }
-  void user;
-}
-function paintAvatarContent(inner, user) {
-  inner.textContent = "";
-  if (user.avatar) {
-    const img = document.createElement("img");
-    img.src = user.avatar;
-    img.alt = user.name;
-    img.referrerPolicy = "no-referrer";
-    img.style.cssText = "width: 100%; height: 100%; object-fit: cover; display: block;";
-    img.addEventListener(
-      "error",
-      () => {
-        img.remove();
-        inner.textContent = initialsOf(user.name);
-      },
-      { once: true }
-    );
-    inner.appendChild(img);
-  } else {
-    inner.textContent = initialsOf(user.name);
-  }
-}
-function createTooltip(text) {
-  const tip = document.createElement("div");
-  tip.setAttribute("data-vizu-presence-tip", "");
-  tip.textContent = text;
-  tip.style.cssText = `
-    position: absolute;
-    top: calc(100% + 6px);
-    right: 0;
-    background: rgba(10, 10, 10, 0.92);
-    color: #ffffff;
-    font-size: 11px;
-    font-weight: 500;
-    padding: 4px 8px;
-    border-radius: 4px;
-    white-space: nowrap;
-    pointer-events: none;
-    opacity: 0;
-    transform: translateY(-2px);
-    transition: opacity 130ms ease-out, transform 130ms ease-out;
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
-    max-width: 220px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `;
-  return tip;
-}
-function createOverflowChip() {
-  const chip = document.createElement("div");
-  chip.setAttribute("data-vizu-presence-overflow", "");
-  chip.style.cssText = `
-    width: ${AVATAR_SIZE}px;
-    height: ${AVATAR_SIZE}px;
-    margin-left: -${OVERLAP_PX}px;
-    border-radius: 50%;
-    background: rgba(82, 82, 82, 0.95);
-    color: #ffffff;
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(0, 0, 0, 0.15);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 10.5px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    line-height: 1;
-    user-select: none;
-    flex-shrink: 0;
-  `;
-  return chip;
-}
-function initialsOf(name) {
-  const trimmed = name.trim();
-  if (!trimmed) return "?";
-  const parts = trimmed.split(/\s+/);
-  if (parts.length >= 2 && parts[0] && parts[parts.length - 1]) {
-    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
-  }
-  return trimmed.slice(0, 2).toUpperCase();
-}
-var Z_INDEX, MAX_VISIBLE, AVATAR_SIZE, OVERLAP_PX, PresenceStack;
-var init_presence_stack = __esm({
-  "src/presence-stack.ts"() {
-    "use strict";
-    init_cursor_colors();
-    Z_INDEX = 2147483640;
-    MAX_VISIBLE = 5;
-    AVATAR_SIZE = 28;
-    OVERLAP_PX = 6;
-    PresenceStack = class {
-      constructor(opts) {
-        this.container = null;
-        this.avatars = /* @__PURE__ */ new Map();
-        this.overflowEl = null;
-        this.followingUserId = null;
-        this.onAvatarClick = null;
-        this.onAvatarClick = opts?.onAvatarClick ?? null;
-      }
-      mount() {
-        if (typeof document === "undefined") return;
-        if (this.container) return;
-        this.container = document.createElement("div");
-        this.container.setAttribute("data-vizu-presence-stack", "");
-        this.container.style.cssText = `
-      position: fixed;
-      top: 16px;
-      right: 16px;
-      z-index: ${Z_INDEX};
-      display: flex;
-      align-items: center;
-      pointer-events: auto;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    `;
-        document.body.appendChild(this.container);
-      }
-      destroy() {
-        for (const el of this.avatars.values()) el.remove();
-        this.avatars.clear();
-        this.overflowEl?.remove();
-        this.overflowEl = null;
-        this.container?.remove();
-        this.container = null;
-      }
-      setOthers(others) {
-        if (!this.container) return;
-        const visible = others.slice(0, MAX_VISIBLE);
-        const overflow = Math.max(0, others.length - visible.length);
-        const nextIds = new Set(visible.map((u) => u.id));
-        for (const [id, el] of Array.from(this.avatars)) {
-          if (!nextIds.has(id)) {
-            el.remove();
-            this.avatars.delete(id);
-          }
-        }
-        for (const user of visible) {
-          let el = this.avatars.get(user.id);
-          if (!el) {
-            el = createAvatar(user, () => this.onAvatarClick?.(user.id));
-            this.avatars.set(user.id, el);
-          } else {
-            updateAvatar(el, user);
-          }
-          paintAvatarFollowState(el, user, this.followingUserId === user.id);
-          this.container.appendChild(el);
-        }
-        this.renderOverflow(overflow);
-      }
-      /**
-       * Mark a user as the active followee so its avatar can render the
-       * coral ring highlight. Pass null to clear.
-       */
-      setFollowing(userId) {
-        this.followingUserId = userId;
-        for (const [id, el] of this.avatars) {
-          const user = avatarMeta(el);
-          if (user) paintAvatarFollowState(el, user, id === userId);
-        }
-      }
-      /* ────────────────── private ────────────────── */
-      renderOverflow(count) {
-        if (!this.container) return;
-        if (count <= 0) {
-          this.overflowEl?.remove();
-          this.overflowEl = null;
-          return;
-        }
-        if (!this.overflowEl) {
-          this.overflowEl = createOverflowChip();
-        }
-        this.overflowEl.textContent = `+${count}`;
-        this.container.appendChild(this.overflowEl);
-      }
-    };
-  }
-});
-
-// src/selection-overlay.ts
-function createOverlay(color, name) {
-  const el = document.createElement("div");
-  el.setAttribute("data-vizu-selection-overlay", "");
-  const positionTransition = prefersReducedMotion() ? "none" : "left 90ms ease-out, top 90ms ease-out, width 90ms ease-out, height 90ms ease-out";
-  el.style.cssText = `
-    position: fixed;
-    pointer-events: none;
-    display: none;
-    border: 2px dashed ${color};
-    border-radius: 4px;
-    background: ${color}10;
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85);
-    transition: ${positionTransition};
-    will-change: left, top, width, height;
-  `;
-  const label = document.createElement("div");
-  label.setAttribute("data-selection-label", "");
-  label.textContent = name;
-  label.style.cssText = `
-    position: absolute;
-    top: -22px;
-    left: -2px;
-    padding: 2px 7px;
-    background: ${color};
-    color: #ffffff;
-    font: 500 10.5px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    border-radius: 3px 3px 3px 0;
-    white-space: nowrap;
-    max-width: 180px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
-  `;
-  el.appendChild(label);
-  return el;
-}
-var Z_INDEX2, SelectionOverlay;
-var init_selection_overlay = __esm({
-  "src/selection-overlay.ts"() {
-    "use strict";
-    init_fingerprint();
-    init_cursor_colors();
-    Z_INDEX2 = 2147483639;
-    SelectionOverlay = class {
-      constructor() {
-        this.container = null;
-        this.overlays = /* @__PURE__ */ new Map();
-        this.scrollListener = null;
-        this.resizeListener = null;
-        this.rafScheduled = false;
-      }
-      mount() {
-        if (typeof document === "undefined") return;
-        if (this.container) return;
-        this.container = document.createElement("div");
-        this.container.setAttribute("data-vizu-selections", "");
-        this.container.style.cssText = `
-      position: fixed; inset: 0;
-      pointer-events: none;
-      z-index: ${Z_INDEX2};
-      contain: strict;
-    `;
-        document.body.appendChild(this.container);
-        this.scrollListener = () => this.scheduleReposition();
-        this.resizeListener = () => this.scheduleReposition();
-        window.addEventListener("scroll", this.scrollListener, { passive: true, capture: true });
-        window.addEventListener("resize", this.resizeListener);
-      }
-      destroy() {
-        if (this.scrollListener) {
-          window.removeEventListener("scroll", this.scrollListener, true);
-          this.scrollListener = null;
-        }
-        if (this.resizeListener) {
-          window.removeEventListener("resize", this.resizeListener);
-          this.resizeListener = null;
-        }
-        for (const e of this.overlays.values()) e.el.remove();
-        this.overlays.clear();
-        this.container?.remove();
-        this.container = null;
-      }
-      setSelections(selections) {
-        if (!this.container) return;
-        const nextIds = new Set(selections.map((s) => s.id));
-        for (const [id, entry] of Array.from(this.overlays)) {
-          if (!nextIds.has(id)) {
-            entry.el.remove();
-            this.overlays.delete(id);
-          }
-        }
-        for (const sel of selections) {
-          let entry = this.overlays.get(sel.id);
-          if (!entry) {
-            const el = createOverlay(sel.color, sel.name);
-            this.container.appendChild(el);
-            entry = { el, fingerprint: sel.fingerprint, color: sel.color, name: sel.name };
-            this.overlays.set(sel.id, entry);
-          } else {
-            entry.fingerprint = sel.fingerprint;
-            if (entry.color !== sel.color) {
-              entry.color = sel.color;
-              entry.el.style.borderColor = sel.color;
-            }
-            if (entry.name !== sel.name) {
-              entry.name = sel.name;
-              const label = entry.el.querySelector("[data-selection-label]");
-              if (label) {
-                label.textContent = sel.name;
-                label.style.background = sel.color;
-              }
-            }
-          }
-          this.positionOverlay(entry);
-        }
-      }
-      /* ────────────────── private ────────────────── */
-      positionOverlay(entry) {
-        const match = findByFingerprint(entry.fingerprint);
-        const target = match?.element ?? null;
-        if (!target) {
-          entry.el.style.display = "none";
-          return;
-        }
-        const rect = target.getBoundingClientRect();
-        if (rect.width === 0 || rect.height === 0) {
-          entry.el.style.display = "none";
-          return;
-        }
-        entry.el.style.display = "block";
-        entry.el.style.left = `${rect.left}px`;
-        entry.el.style.top = `${rect.top}px`;
-        entry.el.style.width = `${rect.width}px`;
-        entry.el.style.height = `${rect.height}px`;
-      }
-      scheduleReposition() {
-        if (this.rafScheduled) return;
-        this.rafScheduled = true;
-        requestAnimationFrame(() => {
-          this.rafScheduled = false;
-          for (const entry of this.overlays.values()) this.positionOverlay(entry);
-        });
-      }
-    };
-  }
-});
-
-// src/live-collab.ts
-var live_collab_exports = {};
-__export(live_collab_exports, {
-  LiveCollab: () => LiveCollab,
-  roomIdFor: () => roomIdFor
-});
-function fnv1a32Hex(input) {
-  let h = 2166136261;
-  for (let i = 0; i < input.length; i++) {
-    h ^= input.charCodeAt(i);
-    h = Math.imul(h, 16777619);
-  }
-  return (h >>> 0).toString(16).padStart(8, "0");
-}
-function roomIdFor(workspaceSlug, pageUrl) {
-  return `ws_${workspaceSlug}__pg_${fnv1a32Hex(pageUrl)}`;
-}
-function createCursorElement(name, color) {
-  const wrap = document.createElement("div");
-  wrap.setAttribute("data-vizu-cursor", "");
-  const transformTransition = prefersReducedMotion() ? "none" : `transform ${CURSOR_TRANSITION_MS}ms cubic-bezier(0.16, 1, 0.3, 1)`;
-  wrap.style.cssText = `
-    position: absolute; top: 0; left: 0;
-    pointer-events: none;
-    opacity: 0;
-    transform: translate(0px, 0px);
-    transition: ${transformTransition}, opacity 220ms ease-out;
-    will-change: transform;
-  `;
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("width", "18");
-  svg.setAttribute("height", "20");
-  svg.setAttribute("viewBox", "0 0 16 18");
-  svg.style.cssText = "display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.3));";
-  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  path.setAttribute("d", "M0 0 L0 13 L4 9 L7 16 L9 15 L6 8 L11 8 Z");
-  path.setAttribute("fill", color);
-  path.setAttribute("stroke", "#ffffff");
-  path.setAttribute("stroke-width", "1.2");
-  path.setAttribute("stroke-linejoin", "round");
-  svg.appendChild(path);
-  wrap.appendChild(svg);
-  const label = document.createElement("div");
-  label.textContent = name;
-  label.style.cssText = `
-    margin-top: 2px;
-    margin-left: 10px;
-    padding: 2px 7px;
-    background: ${color};
-    color: #ffffff;
-    font: 500 11px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    border-radius: 4px;
-    white-space: nowrap;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
-    max-width: 160px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `;
-  wrap.appendChild(label);
-  return wrap;
-}
-function labelForStatus(status) {
-  switch (status) {
-    case "connecting":
-      return "Connecting\u2026";
-    case "reconnecting":
-      return "Reconnecting\u2026";
-    case "disconnected":
-      return "Offline";
-    case "initial":
-      return "Connecting\u2026";
-    case "connected":
-      return "";
-  }
-}
-var import_client, MOUSEMOVE_THROTTLE_MS, SCROLL_THROTTLE_MS, INACTIVITY_FADE_MS, CURSOR_TRANSITION_MS, Z_INDEX3, FOLLOW_SCROLL_THRESHOLD_PX, LiveCollab, ConnectionIndicator, FollowPill;
-var init_live_collab = __esm({
-  "src/live-collab.ts"() {
-    "use strict";
-    import_client = require("@liveblocks/client");
-    init_presence_stack();
-    init_selection_overlay();
-    init_cursor_colors();
-    MOUSEMOVE_THROTTLE_MS = 50;
-    SCROLL_THROTTLE_MS = 100;
-    INACTIVITY_FADE_MS = 5e3;
-    CURSOR_TRANSITION_MS = 110;
-    Z_INDEX3 = 2147483641;
-    FOLLOW_SCROLL_THRESHOLD_PX = 8;
-    LiveCollab = class {
-      constructor(opts) {
-        this.opts = opts;
-        this.client = null;
-        this.room = null;
-        this.leave = null;
-        this.container = null;
-        this.cursors = /* @__PURE__ */ new Map();
-        // keyed by connectionId
-        this.presenceStack = null;
-        this.followPill = null;
-        this.selectionOverlay = null;
-        this.mouseListener = null;
-        this.scrollListener = null;
-        this.visibilityListener = null;
-        this.keydownListener = null;
-        this.statusIndicator = null;
-        this.throttleTimer = null;
-        this.scrollThrottleTimer = null;
-        this.pendingCursor = null;
-        this.lastBroadcast = 0;
-        this.lastScrollBroadcast = 0;
-        this.unsubscribers = [];
-        this.destroyed = false;
-        // Follow mode state
-        /** Clerk user id we're currently following, or null. */
-        this.followingUserId = null;
-        /** Last scrollY we received from the followee — for delta gating. */
-        this.lastFolloweeScrollY = null;
-      }
-      async start() {
-        if (typeof window === "undefined" || typeof document === "undefined") return;
-        if (this.destroyed) return;
-        try {
-          void this.opts.publicKey;
-          this.client = (0, import_client.createClient)({
-            authEndpoint: async (room2) => {
-              const res = await fetch(this.opts.authEndpoint, {
-                method: "POST",
-                headers: { "content-type": "application/json" },
-                credentials: "include",
-                body: JSON.stringify({ room: room2 })
-              });
-              if (!res.ok) {
-                throw new Error(`vizu-liveblocks-auth: HTTP ${res.status}`);
-              }
-              return res.json();
-            }
-          });
-          const pageUrl = this.opts.pageUrl ?? window.location.origin + window.location.pathname;
-          const room = this.opts.workspaceSlug ? roomIdFor(this.opts.workspaceSlug, pageUrl) : null;
-          if (!room) return;
-          const result = this.client.enterRoom(room, {
-            initialPresence: {
-              cursor: null,
-              scrollY: typeof window !== "undefined" ? window.scrollY : 0,
-              selecting: null
-            }
-          });
-          this.room = result.room;
-          this.leave = result.leave;
-          this.mountContainer();
-          this.presenceStack = new PresenceStack({
-            onAvatarClick: (userId) => this.setFollowing(userId)
-          });
-          this.presenceStack.mount();
-          this.followPill = new FollowPill({
-            onStop: () => this.setFollowing(null)
-          });
-          this.selectionOverlay = new SelectionOverlay();
-          this.selectionOverlay.mount();
-          this.statusIndicator = new ConnectionIndicator();
-          this.statusIndicator.mount();
-          this.subscribeOthers();
-          this.subscribeStatus();
-          this.attachMouseListener();
-          this.attachScrollListener();
-          this.attachVisibilityListener();
-          this.attachKeyboardListener();
-        } catch (err) {
-          if (typeof console !== "undefined") {
-            console.warn("[vizu/live-collab] start failed; live cursors disabled:", err);
-          }
-          this.cleanup();
-        }
-      }
-      destroy() {
-        this.destroyed = true;
-        this.cleanup();
-      }
-      /* ────────────────── private ────────────────── */
-      cleanup() {
-        if (this.mouseListener) {
-          window.removeEventListener("mousemove", this.mouseListener);
-          this.mouseListener = null;
-        }
-        if (this.scrollListener) {
-          window.removeEventListener("scroll", this.scrollListener);
-          this.scrollListener = null;
-        }
-        if (this.visibilityListener) {
-          document.removeEventListener("visibilitychange", this.visibilityListener);
-          this.visibilityListener = null;
-        }
-        if (this.keydownListener) {
-          document.removeEventListener("keydown", this.keydownListener);
-          this.keydownListener = null;
-        }
-        if (this.throttleTimer != null) {
-          window.clearTimeout(this.throttleTimer);
-          this.throttleTimer = null;
-        }
-        if (this.scrollThrottleTimer != null) {
-          window.clearTimeout(this.scrollThrottleTimer);
-          this.scrollThrottleTimer = null;
-        }
-        for (const unsub of this.unsubscribers) unsub();
-        this.unsubscribers = [];
-        for (const c of this.cursors.values()) {
-          if (c.fadeTimer != null) window.clearTimeout(c.fadeTimer);
-          c.el.remove();
-        }
-        this.cursors.clear();
-        this.presenceStack?.destroy();
-        this.presenceStack = null;
-        this.followPill?.destroy();
-        this.followPill = null;
-        this.selectionOverlay?.destroy();
-        this.selectionOverlay = null;
-        this.statusIndicator?.destroy();
-        this.statusIndicator = null;
-        this.followingUserId = null;
-        this.lastFolloweeScrollY = null;
-        this.container?.remove();
-        this.container = null;
-        this.leave?.();
-        this.leave = null;
-        this.room = null;
-        this.client = null;
-      }
-      /**
-       * Public API: broadcast the local user's currently-hovered element
-       * (highlighter mode) so other clients can render a ghost outline on
-       * it. Pass null to clear (highlighter stopped, popover opened, etc.).
-       * Idempotent on no-op transitions. Slice 5 of live-collab.md.
-       */
-      setLocalSelection(fingerprint2) {
-        if (!this.room) return;
-        this.room.updatePresence({
-          selecting: fingerprint2 ? { fingerprintJson: JSON.stringify(fingerprint2) } : null
-        });
-      }
-      /**
-       * Public API: start/stop following a user by Clerk id. Null clears.
-       * Called by the avatar click handler and by the FollowPill stop button.
-       * Idempotent — same id again is a no-op.
-       */
-      setFollowing(userId) {
-        if (this.followingUserId === userId) return;
-        this.followingUserId = userId;
-        this.lastFolloweeScrollY = null;
-        this.presenceStack?.setFollowing(userId);
-        this.followPill?.setFollowing(userId ? this.lookupUserForPill(userId) : null);
-        if (userId) this.scrollToFolloweeIfKnown();
-      }
-      lookupUserForPill(userId) {
-        if (!this.room) return null;
-        const others = this.room.getOthers();
-        for (const o of others) {
-          const meta = o;
-          if ((meta.id ?? `c${o.connectionId}`) === userId) {
-            return {
-              id: userId,
-              name: meta.info?.name ?? "Anonymous",
-              color: colorForUser(userId),
-              avatar: meta.info?.avatar
-            };
-          }
-        }
-        return null;
-      }
-      scrollToFolloweeIfKnown() {
-        if (!this.followingUserId || !this.room) return;
-        const others = this.room.getOthers();
-        for (const o of others) {
-          const meta = o;
-          if ((meta.id ?? `c${o.connectionId}`) === this.followingUserId) {
-            const presence = o.presence;
-            if (typeof presence.scrollY === "number") {
-              this.followScrollTo(presence.scrollY);
-            }
-            return;
-          }
-        }
-      }
-      followScrollTo(scrollY) {
-        if (this.lastFolloweeScrollY !== null && Math.abs(this.lastFolloweeScrollY - scrollY) < FOLLOW_SCROLL_THRESHOLD_PX) {
-          return;
-        }
-        this.lastFolloweeScrollY = scrollY;
-        window.scrollTo({ top: scrollY, behavior: "smooth" });
-      }
-      mountContainer() {
-        this.container = document.createElement("div");
-        this.container.setAttribute("data-vizu-live-cursors", "");
-        this.container.style.cssText = `
-      position: fixed; inset: 0;
-      pointer-events: none;
-      z-index: ${Z_INDEX3};
-      contain: strict;
-    `;
-        document.body.appendChild(this.container);
-      }
-      attachMouseListener() {
-        this.mouseListener = (e) => {
-          const xPct = e.clientX / window.innerWidth * 100;
-          const yPct = e.clientY / window.innerHeight * 100;
-          this.pendingCursor = { xPct, yPct };
-          this.flushThrottled();
-        };
-        window.addEventListener("mousemove", this.mouseListener, { passive: true });
-      }
-      attachScrollListener() {
-        this.scrollListener = () => {
-          const now = performance.now();
-          const elapsed = now - this.lastScrollBroadcast;
-          if (elapsed >= SCROLL_THROTTLE_MS) {
-            this.flushScroll();
-            return;
-          }
-          if (this.scrollThrottleTimer == null) {
-            this.scrollThrottleTimer = window.setTimeout(() => {
-              this.scrollThrottleTimer = null;
-              this.flushScroll();
-            }, SCROLL_THROTTLE_MS - elapsed);
-          }
-        };
-        window.addEventListener("scroll", this.scrollListener, { passive: true });
-      }
-      flushScroll() {
-        if (!this.room) return;
-        this.room.updatePresence({ scrollY: window.scrollY });
-        this.lastScrollBroadcast = performance.now();
-      }
-      attachVisibilityListener() {
-        this.visibilityListener = () => {
-          if (document.hidden && this.room) {
-            this.room.updatePresence({ cursor: null });
-          }
-        };
-        document.addEventListener("visibilitychange", this.visibilityListener);
-      }
-      attachKeyboardListener() {
-        this.keydownListener = (e) => {
-          if (e.key !== "Escape") return;
-          if (!this.followingUserId) return;
-          this.setFollowing(null);
-        };
-        document.addEventListener("keydown", this.keydownListener);
-      }
-      subscribeStatus() {
-        if (!this.room) return;
-        this.statusIndicator?.setStatus(this.room.getStatus());
-        const unsub = this.room.subscribe("status", (status) => {
-          this.statusIndicator?.setStatus(status);
-        });
-        this.unsubscribers.push(unsub);
-      }
-      flushThrottled() {
-        const now = performance.now();
-        const elapsed = now - this.lastBroadcast;
-        if (elapsed >= MOUSEMOVE_THROTTLE_MS) {
-          this.flush();
-          return;
-        }
-        if (this.throttleTimer == null) {
-          this.throttleTimer = window.setTimeout(() => {
-            this.throttleTimer = null;
-            this.flush();
-          }, MOUSEMOVE_THROTTLE_MS - elapsed);
-        }
-      }
-      flush() {
-        if (!this.pendingCursor || !this.room) return;
-        this.room.updatePresence({ cursor: this.pendingCursor });
-        this.pendingCursor = null;
-        this.lastBroadcast = performance.now();
-      }
-      subscribeOthers() {
-        if (!this.room) return;
-        const unsub = this.room.subscribe("others", (others) => {
-          const seen = /* @__PURE__ */ new Set();
-          const stackUsers = /* @__PURE__ */ new Map();
-          const selections = [];
-          let followeeScrollY = null;
-          let followeeStillPresent = false;
-          for (const other of others) {
-            seen.add(other.connectionId);
-            const meta = other;
-            const userId = meta.id ?? `c${other.connectionId}`;
-            const name = meta.info?.name ?? "Anonymous";
-            const color = colorForUser(userId);
-            if (!stackUsers.has(userId)) {
-              stackUsers.set(userId, {
-                id: userId,
-                name,
-                color,
-                avatar: meta.info?.avatar
-              });
-            }
-            const presence = other.presence;
-            if (this.followingUserId === userId && followeeScrollY === null) {
-              followeeStillPresent = true;
-              if (typeof presence.scrollY === "number") {
-                followeeScrollY = presence.scrollY;
-              }
-            }
-            if (presence.selecting && !selections.find((s) => s.id === userId)) {
-              try {
-                const fp = JSON.parse(presence.selecting.fingerprintJson);
-                selections.push({ id: userId, name, color, fingerprint: fp });
-              } catch {
-              }
-            }
-            if (!presence.cursor) {
-              this.removeCursor(other.connectionId);
-              continue;
-            }
-            this.upsertCursor(other.connectionId, userId, name, presence.cursor);
-          }
-          for (const id of Array.from(this.cursors.keys())) {
-            if (!seen.has(id)) this.removeCursor(id);
-          }
-          this.presenceStack?.setOthers(Array.from(stackUsers.values()));
-          this.selectionOverlay?.setSelections(selections);
-          if (this.followingUserId) {
-            if (!followeeStillPresent) {
-              this.setFollowing(null);
-            } else if (followeeScrollY !== null) {
-              this.followScrollTo(followeeScrollY);
-            }
-          }
-        });
-        this.unsubscribers.push(unsub);
-      }
-      upsertCursor(connectionId, userId, name, cursor) {
-        if (!this.container) return;
-        let entry = this.cursors.get(connectionId);
-        if (!entry) {
-          const color = colorForUser(userId);
-          const el = createCursorElement(name, color);
-          this.container.appendChild(el);
-          entry = { el, fadeTimer: null };
-          this.cursors.set(connectionId, entry);
-        }
-        const inViewport = cursor.xPct >= 0 && cursor.xPct <= 100 && cursor.yPct >= 0 && cursor.yPct <= 100;
-        if (!inViewport) {
-          entry.el.style.opacity = "0";
-          return;
-        }
-        const x = window.innerWidth * cursor.xPct / 100;
-        const y = window.innerHeight * cursor.yPct / 100;
-        entry.el.style.transform = `translate(${x}px, ${y}px)`;
-        entry.el.style.opacity = "1";
-        if (entry.fadeTimer != null) window.clearTimeout(entry.fadeTimer);
-        entry.fadeTimer = window.setTimeout(() => {
-          if (entry) entry.el.style.opacity = "0";
-        }, INACTIVITY_FADE_MS);
-      }
-      removeCursor(connectionId) {
-        const entry = this.cursors.get(connectionId);
-        if (!entry) return;
-        if (entry.fadeTimer != null) window.clearTimeout(entry.fadeTimer);
-        entry.el.style.opacity = "0";
-        window.setTimeout(() => entry.el.remove(), 220);
-        this.cursors.delete(connectionId);
-      }
-    };
-    ConnectionIndicator = class {
-      constructor() {
-        this.el = null;
-        this.label = null;
-      }
-      mount() {
-        if (typeof document === "undefined") return;
-        if (this.el) return;
-        this.el = document.createElement("div");
-        this.el.setAttribute("data-vizu-connection-status", "");
-        this.el.style.cssText = `
-      position: fixed;
-      top: 18px;
-      right: 200px;
-      z-index: ${Z_INDEX3};
-      display: none;
-      align-items: center;
-      gap: 7px;
-      padding: 4px 10px 4px 8px;
-      background: rgba(10, 10, 10, 0.88);
-      color: #fafafa;
-      font: 500 11px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      border-radius: 999px;
-      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
-      pointer-events: none;
-    `;
-        const dot = document.createElement("span");
-        dot.style.cssText = `
-      display: inline-block;
-      width: 6px; height: 6px;
-      border-radius: 50%;
-      background: #F59E0B;
-      box-shadow: 0 0 6px #F59E0B;
-    `;
-        const label = document.createElement("span");
-        this.label = label;
-        this.el.appendChild(dot);
-        this.el.appendChild(label);
-        document.body.appendChild(this.el);
-      }
-      setStatus(status) {
-        if (!this.el || !this.label) return;
-        if (status === "connected") {
-          this.el.style.display = "none";
-          return;
-        }
-        this.label.textContent = labelForStatus(status);
-        this.el.style.display = "inline-flex";
-      }
-      destroy() {
-        this.el?.remove();
-        this.el = null;
-        this.label = null;
-      }
-    };
-    FollowPill = class {
-      constructor(opts) {
-        this.el = null;
-        this.onStop = opts.onStop;
-      }
-      setFollowing(user) {
-        if (typeof document === "undefined") return;
-        if (!user) {
-          this.el?.remove();
-          this.el = null;
-          return;
-        }
-        if (!this.el) this.el = this.mount();
-        this.paint(user);
-      }
-      destroy() {
-        this.el?.remove();
-        this.el = null;
-      }
-      mount() {
-        const pill = document.createElement("div");
-        pill.setAttribute("data-vizu-follow-pill", "");
-        pill.style.cssText = `
-      position: fixed;
-      top: 56px;
-      right: 16px;
-      z-index: ${Z_INDEX3};
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      padding: 6px 6px 6px 12px;
-      background: rgba(10, 10, 10, 0.92);
-      color: #ffffff;
-      border-radius: 999px;
-      font: 500 12px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
-      pointer-events: auto;
-    `;
-        document.body.appendChild(pill);
-        return pill;
-      }
-      paint(user) {
-        if (!this.el) return;
-        this.el.textContent = "";
-        const dot = document.createElement("span");
-        dot.style.cssText = `
-      display: inline-block;
-      width: 8px; height: 8px;
-      border-radius: 50%;
-      background: ${user.color};
-      box-shadow: 0 0 8px ${user.color};
-    `;
-        this.el.appendChild(dot);
-        const label = document.createElement("span");
-        label.textContent = `Following ${user.name}`;
-        label.style.cssText = "max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;";
-        this.el.appendChild(label);
-        const stop = document.createElement("button");
-        stop.type = "button";
-        stop.setAttribute("aria-label", `Stop following ${user.name}`);
-        stop.innerHTML = '<svg width="11" height="11" viewBox="0 0 12 12" aria-hidden="true"><path d="M1 1 L11 11 M11 1 L1 11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" /></svg>';
-        stop.style.cssText = `
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 22px; height: 22px;
-      border: none;
-      background: rgba(255, 255, 255, 0.12);
-      color: #ffffff;
-      border-radius: 50%;
-      cursor: pointer;
-      transition: background 120ms ease-out;
-    `;
-        stop.addEventListener("mouseenter", () => stop.style.background = "rgba(255, 255, 255, 0.22)");
-        stop.addEventListener("mouseleave", () => stop.style.background = "rgba(255, 255, 255, 0.12)");
-        stop.addEventListener("click", (e) => {
-          e.preventDefault();
-          this.onStop();
-        });
-        this.el.appendChild(stop);
-      }
-    };
-  }
-});
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  CloudStorageAdapter: () => CloudStorageAdapter,
-  InMemoryStorageAdapter: () => InMemoryStorageAdapter,
-  LocalStorageAdapter: () => LocalStorageAdapter,
-  NullStorageAdapter: () => NullStorageAdapter,
-  SCHEMA_VERSION: () => SCHEMA_VERSION,
-  Vizu: () => Vizu,
-  findByFingerprint: () => findByFingerprint,
-  findElementByFingerprint: () => findElementByFingerprint,
-  fingerprint: () => fingerprint,
-  fingerprintKey: () => fingerprintKey,
-  fingerprintLabel: () => fingerprintLabel
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/types.ts
-var SCHEMA_VERSION = 2;
-
-// src/util.ts
-function uuid() {
-  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
-    return crypto.randomUUID();
-  }
-  return Math.random().toString(36).slice(2) + Date.now().toString(36);
-}
-function isInside(target, selector) {
-  return !!target.closest(selector);
-}
-function escapeHtml(s) {
-  return s.replace(/[&<>"']/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[ch]);
-}
-function formatTime(ts) {
-  const d = new Date(ts);
-  const now = Date.now();
-  const diff = now - ts;
-  if (diff < 6e4) return "just now";
-  if (diff < 36e5) return Math.floor(diff / 6e4) + "m ago";
-  if (diff < 864e5) return Math.floor(diff / 36e5) + "h ago";
-  return d.toLocaleDateString() + " " + d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-}
-function initials(name) {
-  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0].toUpperCase()).join("");
-}
-function avatarHtml(user, className = "vz-comment-author-avatar") {
-  if (!user) return `<span class="${className}">\xB7</span>`;
-  if (user.avatarUrl) {
-    return `<span class="${className}"><img src="${escapeHtml(user.avatarUrl)}" alt="${escapeHtml(user.name)}" /></span>`;
-  }
-  return `<span class="${className}">${escapeHtml(initials(user.name) || "?")}</span>`;
-}
-function refId() {
-  return Math.random().toString(36).slice(2, 10);
-}
-var MENTION_TOKEN_RE = /\[@([^\]]+)\]\(vizu-mention:([a-zA-Z0-9_-]+)\)/g;
-var COMBINED_TOKEN_SPLIT_RE = /(\[#[^\]]+\]\(vizu-ref:[a-zA-Z0-9_-]+\)|\[@[^\]]+\]\(vizu-mention:[a-zA-Z0-9_-]+\))/g;
-function renderCommentText(text, commentId) {
-  const parts = text.split(COMBINED_TOKEN_SPLIT_RE);
-  return parts.map((part) => {
-    const refMatch = part.match(/^\[#([^\]]+)\]\(vizu-ref:([a-zA-Z0-9_-]+)\)$/);
-    if (refMatch) {
-      return `<a class="vz-ref" data-vz="ref" data-comment-id="${escapeHtml(commentId)}" data-ref-id="${escapeHtml(refMatch[2])}" role="button" tabindex="0">${escapeHtml(refMatch[1])}</a>`;
-    }
-    const mentionMatch = part.match(/^\[@([^\]]+)\]\(vizu-mention:([a-zA-Z0-9_-]+)\)$/);
-    if (mentionMatch) {
-      return `<span class="vz-mention" data-vz="mention" data-mention-id="${escapeHtml(mentionMatch[2])}">@${escapeHtml(mentionMatch[1])}</span>`;
-    }
-    return escapeHtml(part);
-  }).join("");
-}
-function extractMentions(text) {
-  const out = [];
-  for (const m of text.matchAll(MENTION_TOKEN_RE)) {
-    if (!out.includes(m[2])) out.push(m[2]);
-  }
-  return out;
-}
-function renderAttachmentsHtml(attachments) {
-  if (!Array.isArray(attachments) || attachments.length === 0) return "";
-  const items = attachments.map((a) => {
-    const isImage = a.mimeType?.startsWith("image/");
-    const filename = a.filename ?? a.url.split("/").pop() ?? "file";
-    if (isImage) {
-      return `
-          <a class="vz-attachment-display" href="${escapeHtml(a.url)}" target="_blank" rel="noreferrer" title="${escapeHtml(filename)}">
-            <img src="${escapeHtml(a.url)}" alt="${escapeHtml(filename)}" loading="lazy" />
-          </a>
-        `;
-    }
-    return `
-        <a class="vz-attachment-display vz-attachment-file" href="${escapeHtml(a.url)}" target="_blank" rel="noreferrer">
-          <span class="vz-attachment-icon" aria-hidden="true">\u{1F4C4}</span>
-          <span class="vz-attachment-filename">${escapeHtml(filename)}</span>
-        </a>
-      `;
-  }).join("");
-  return `<div class="vz-attachment-grid">${items}</div>`;
-}
-function migrateComment(raw) {
-  if (!raw || typeof raw !== "object") return raw;
-  const next = { ...raw };
-  if (!Array.isArray(next.fingerprints) || next.fingerprints.length === 0) {
-    if (next.fingerprint) {
-      next.fingerprints = [next.fingerprint];
-    }
-  }
-  delete next.fingerprint;
-  if (next.url && !next.pageUrl) {
-    next.pageUrl = next.url;
-  }
-  if (!("status" in next) || !isValidStatus(next.status)) next.status = "open";
-  if (!Array.isArray(next.replies)) next.replies = [];
-  if (!Array.isArray(next.attachments)) next.attachments = [];
-  if (!Array.isArray(next.mentions)) next.mentions = [];
-  if (!("fingerprintsRefreshedAt" in next)) next.fingerprintsRefreshedAt = null;
-  next.schemaVersion = SCHEMA_VERSION;
-  return next;
-}
-function isValidStatus(s) {
-  return s === "open" || s === "resolved" || s === "wontfix";
-}
-function migrateComments(raws) {
-  if (!Array.isArray(raws)) return [];
-  const out = [];
-  for (const raw of raws) {
-    if (!raw || typeof raw !== "object") continue;
-    out.push(migrateComment(raw));
-  }
-  return out;
-}
-function needsPersist(raws) {
-  if (!Array.isArray(raws)) return false;
-  for (const raw of raws) {
-    if (!raw || typeof raw !== "object") continue;
-    const c = raw;
-    if (c.schemaVersion !== SCHEMA_VERSION) return true;
-    if ("fingerprint" in c) return true;
-    if (!Array.isArray(c.replies)) return true;
-    if (!Array.isArray(c.attachments)) return true;
-    if (!Array.isArray(c.mentions)) return true;
-  }
-  return false;
-}
-
-// src/storage.ts
-var key = (ns) => `vizu:comments:${ns}`;
-var LocalStorageAdapter = class {
-  async load(namespace) {
-    return readArray(namespace);
-  }
-  async addComment(namespace, comment) {
-    const list = readArray(namespace);
-    list.push(comment);
-    writeArray(namespace, list);
+  async addComment(namespace, comment) {
+    const list = readArray(namespace);
+    list.push(comment);
+    writeArray(namespace, list);
   }
   async updateComment(namespace, id, patch) {
     const list = readArray(namespace);
@@ -1797,278 +443,562 @@ var CloudStorageAdapter = class {
       throw apiErr(res.status, json);
     }
   }
-  async setAll(namespace, comments) {
-    await this.clear(namespace);
-    for (const c of comments) {
-      await this.addComment(namespace, c);
+  async setAll(namespace, comments) {
+    await this.clear(namespace);
+    for (const c of comments) {
+      await this.addComment(namespace, c);
+    }
+  }
+  async clear(_namespace) {
+    const url = new URL(this.apiUrl + "/api/comments");
+    url.searchParams.set("workspace", this.workspace);
+    url.searchParams.set("all", "true");
+    const res = await this.fetchAuthed(url.toString(), { method: "DELETE" });
+    if (res.status === 404) return;
+    if (!res.ok) {
+      const json = await this.parseJson(res);
+      throw apiErr(res.status, json);
+    }
+  }
+  async addReply(_namespace, commentId, reply) {
+    const url = new URL(this.apiUrl + "/api/comments/" + encodeURIComponent(commentId) + "/replies");
+    url.searchParams.set("workspace", this.workspace);
+    const res = await this.fetchAuthed(url.toString(), {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(reply)
+    });
+    if (res.status === 404) return null;
+    const json = await this.parseJson(res);
+    if (!res.ok) throw apiErr(res.status, json);
+    return json?.comment ? migrateComment(json.comment) : null;
+  }
+  async removeReply(_namespace, commentId, replyId) {
+    const url = new URL(
+      this.apiUrl + "/api/comments/" + encodeURIComponent(commentId) + "/replies/" + encodeURIComponent(replyId)
+    );
+    url.searchParams.set("workspace", this.workspace);
+    const res = await this.fetchAuthed(url.toString(), { method: "DELETE" });
+    if (res.status === 404) return null;
+    if (!res.ok) {
+      const json = await this.parseJson(res);
+      throw apiErr(res.status, json);
+    }
+    return null;
+  }
+  /**
+   * Upload a file as multipart/form-data to the host backend, which
+   * forwards to Vercel Blob server-side. Stays under the 4.5 MB Vercel
+   * function body cap (our own 5 MB attachment cap will be enforced
+   * server-side before that's hit).
+   *
+   * Deliberately doesn't use `@vercel/blob/client`'s direct-upload flow:
+   *   - keeps `@vizu/core` free of any `@vercel/blob` dependency
+   *     (script-tag and local-only consumers don't pull blob code)
+   *   - the multipart path is one round-trip; the direct-upload flow
+   *     is two (signed URL + upload). For attachments capped at 5 MB,
+   *     the savings don't justify the dep cost.
+   */
+  async uploadAttachment(_namespace, file) {
+    const form = new FormData();
+    form.append("file", file, file.name);
+    const url = new URL(this.apiUrl + "/api/uploads");
+    url.searchParams.set("workspace", this.workspace);
+    const res = await this.fetchAuthed(url.toString(), {
+      method: "POST",
+      body: form
+      // Don't set content-type; the browser fills in the multipart boundary.
+    });
+    const json = await this.parseJson(res);
+    if (!res.ok) throw apiErr(res.status, json);
+    if (!json?.url || typeof json.url !== "string") {
+      throw apiErr(500, { error: "upload_failed", message: "Backend did not return a URL." });
+    }
+    return {
+      id: uuid(),
+      url: json.url,
+      mimeType: file.type || "application/octet-stream",
+      sizeBytes: file.size,
+      uploadedAt: Date.now(),
+      filename: file.name
+    };
+  }
+  getAuthContext() {
+    if (!this.cachedToken) return null;
+    return {
+      userId: this.cachedToken.userId,
+      token: this.cachedToken.token,
+      expiresAt: this.cachedToken.expiresAt
+    };
+  }
+  /* ─── Auth ────────────────────────────────────────────────────────── */
+  isExpired(t) {
+    if (!t) return true;
+    const exp = new Date(t.expiresAt).getTime();
+    return !Number.isFinite(exp) || exp - Date.now() < 3e4;
+  }
+  readStoredToken() {
+    if (typeof sessionStorage === "undefined") return null;
+    const raw = sessionStorage.getItem(this.sessionKey());
+    if (!raw) return null;
+    try {
+      const parsed = JSON.parse(raw);
+      if (this.isExpired(parsed)) {
+        sessionStorage.removeItem(this.sessionKey());
+        return null;
+      }
+      return parsed;
+    } catch {
+      return null;
+    }
+  }
+  writeStoredToken(t) {
+    this.cachedToken = t;
+    if (typeof sessionStorage !== "undefined") {
+      sessionStorage.setItem(this.sessionKey(), JSON.stringify(t));
+    }
+  }
+  clearStoredToken() {
+    this.cachedToken = null;
+    if (typeof sessionStorage !== "undefined") {
+      sessionStorage.removeItem(this.sessionKey());
+    }
+  }
+  sessionKey() {
+    return `vizu:cloud-token:v2:${this.workspace}`;
+  }
+  /**
+   * Resolve a valid token, opening the popup if needed.
+   *
+   * Single-flight: simultaneous requests await one popup, not N.
+   * Caller-friendly: throws a Error with `.code === 'auth_canceled'`
+   * if the user closes the popup; hosts can catch this and present
+   * a friendly message instead of a blank failure.
+   */
+  async resolveToken() {
+    if (this.cachedToken && !this.isExpired(this.cachedToken)) return this.cachedToken;
+    const fresh = this.readStoredToken();
+    if (fresh) {
+      this.cachedToken = fresh;
+      this.fireAuthChanged(fresh);
+      return fresh;
+    }
+    if (!this.autoSignIn) {
+      throw makeAuthError("auth_required", "Sign-in required; autoSignIn is disabled.");
+    }
+    if (!this.pendingAuth) {
+      this.pendingAuth = this.openSignInPopup().then((t) => {
+        this.writeStoredToken(t);
+        this.fireAuthChanged(t);
+        return t;
+      }).finally(() => {
+        this.pendingAuth = null;
+      });
+    }
+    return this.pendingAuth;
+  }
+  /**
+   * Notify the host that the authenticated identity changed. De-duped
+   * via the token string so multiple resolveToken() hits with the same
+   * cached token don't re-call setUser on every fetch.
+   */
+  fireAuthChanged(token) {
+    if (this.lastNotifiedTokenId === token.token) return;
+    this.lastNotifiedTokenId = token.token;
+    try {
+      this.onAuthChanged?.({ userId: token.userId, user: token.user });
+    } catch (err) {
+      if (typeof console !== "undefined") {
+        console.warn("[vizu/cloud] onAuthChanged callback threw", err);
+      }
+    }
+  }
+  openSignInPopup() {
+    return new Promise((resolve, reject) => {
+      if (typeof window === "undefined") {
+        return reject(makeAuthError("auth_unavailable", "Sign-in requires a browser environment."));
+      }
+      const apiOrigin = new URL(this.apiUrl).origin;
+      const hostOrigin = window.location.origin;
+      const popupUrl = this.apiUrl + "/connect?workspace=" + encodeURIComponent(this.workspace) + "&origin=" + encodeURIComponent(hostOrigin);
+      const left = Math.max(0, Math.round((window.screen.width - POPUP_WIDTH) / 2));
+      const top = Math.max(0, Math.round((window.screen.height - POPUP_HEIGHT) / 2));
+      const popup = window.open(
+        popupUrl,
+        "vizu-connect",
+        `width=${POPUP_WIDTH},height=${POPUP_HEIGHT},left=${left},top=${top},noopener=no,popup=yes`
+      );
+      if (!popup) {
+        return reject(
+          makeAuthError(
+            "popup_blocked",
+            "Sign-in popup was blocked by the browser. Allow popups for this site and try again."
+          )
+        );
+      }
+      let resolved = false;
+      const onMessage = (e) => {
+        if (e.origin !== apiOrigin) return;
+        const data = e.data;
+        if (!data || data.type !== "vizu:auth") return;
+        if (data.workspace !== this.workspace) return;
+        if (typeof data.token !== "string" || typeof data.expiresAt !== "string" || typeof data.userId !== "string") return;
+        resolved = true;
+        cleanup();
+        const userPayload = data.user;
+        const user = userPayload && typeof userPayload.name === "string" ? {
+          id: typeof userPayload.id === "string" ? userPayload.id : data.userId,
+          name: userPayload.name,
+          avatarUrl: typeof userPayload.avatarUrl === "string" ? userPayload.avatarUrl : void 0
+        } : null;
+        resolve({ token: data.token, expiresAt: data.expiresAt, userId: data.userId, user });
+      };
+      const onPoll = window.setInterval(() => {
+        if (popup.closed) {
+          if (!resolved) {
+            cleanup();
+            reject(makeAuthError("auth_canceled", "Sign-in popup was closed before completing."));
+          }
+        }
+      }, 500);
+      function cleanup() {
+        window.clearInterval(onPoll);
+        window.removeEventListener("message", onMessage);
+      }
+      window.addEventListener("message", onMessage);
+    });
+  }
+  /* ─── Fetch wrapper ───────────────────────────────────────────────── */
+  /**
+   * Perform an authenticated fetch with one-shot retry on 401 (re-opens
+   * the popup if the token expired during the request). 4xx other than
+   * 401 / 404 throw; 5xx throws; 2xx returns.
+   */
+  async fetchAuthed(url, init, retried = false) {
+    const token = await this.resolveToken();
+    const headers = new Headers(init.headers);
+    headers.set("authorization", `Bearer ${token.token}`);
+    const res = await fetch(url, { ...init, headers, credentials: "omit" });
+    if (res.status === 401 && !retried) {
+      this.clearStoredToken();
+      return this.fetchAuthed(url, init, true);
+    }
+    return res;
+  }
+  async parseJson(res) {
+    try {
+      const text = await res.text();
+      return text ? JSON.parse(text) : null;
+    } catch {
+      return null;
     }
   }
-  async clear(_namespace) {
-    const url = new URL(this.apiUrl + "/api/comments");
-    url.searchParams.set("workspace", this.workspace);
-    url.searchParams.set("all", "true");
-    const res = await this.fetchAuthed(url.toString(), { method: "DELETE" });
-    if (res.status === 404) return;
-    if (!res.ok) {
-      const json = await this.parseJson(res);
-      throw apiErr(res.status, json);
+};
+function makeAuthError(code, message) {
+  const err = new Error(message);
+  err.code = code;
+  return err;
+}
+function apiErr(status, body) {
+  const code = body?.error === "origin_not_allowed" ? "origin_not_allowed" : body?.error === "not_found" ? "workspace_not_found" : "http_error";
+  const err = new Error(body?.message ?? `HTTP ${status}`);
+  err.code = code;
+  err.status = status;
+  err.body = body;
+  return err;
+}
+
+// src/fingerprint.ts
+var TEXT_SNIPPET_MAX = 80;
+var ANCESTOR_DEPTH = 4;
+var ANCESTOR_MAX_SHIFT = 3;
+var TEXT_RATIO_THRESHOLD = 0.75;
+var CLASS_JACCARD_THRESHOLD = 0.6;
+function buildSelector(el) {
+  const parts = [];
+  let current = el;
+  let depth = 0;
+  while (current && current !== document.documentElement && depth < 8) {
+    let part = current.tagName.toLowerCase();
+    if (current.id) {
+      parts.unshift("#" + CSS.escape(current.id));
+      break;
     }
+    const cls = Array.from(current.classList).filter((c) => !c.startsWith("vz-") && !c.startsWith("vizu-")).slice(0, 2);
+    if (cls.length) part += "." + cls.map((c) => CSS.escape(c)).join(".");
+    const parent = current.parentElement;
+    if (parent) {
+      const sameTag = Array.from(parent.children).filter((c) => c.tagName === current.tagName);
+      if (sameTag.length > 1) {
+        const idx = sameTag.indexOf(current);
+        part += ":nth-of-type(" + (idx + 1) + ")";
+      }
+    }
+    parts.unshift(part);
+    current = parent;
+    depth++;
   }
-  async addReply(_namespace, commentId, reply) {
-    const url = new URL(this.apiUrl + "/api/comments/" + encodeURIComponent(commentId) + "/replies");
-    url.searchParams.set("workspace", this.workspace);
-    const res = await this.fetchAuthed(url.toString(), {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify(reply)
-    });
-    if (res.status === 404) return null;
-    const json = await this.parseJson(res);
-    if (!res.ok) throw apiErr(res.status, json);
-    return json?.comment ? migrateComment(json.comment) : null;
+  return parts.join(" > ");
+}
+function fingerprint(el) {
+  const text = el.innerText || el.textContent || "";
+  const parent = el.parentElement;
+  let siblingIndex = 0;
+  if (parent) {
+    siblingIndex = Array.from(parent.children).indexOf(el);
   }
-  async removeReply(_namespace, commentId, replyId) {
-    const url = new URL(
-      this.apiUrl + "/api/comments/" + encodeURIComponent(commentId) + "/replies/" + encodeURIComponent(replyId)
-    );
-    url.searchParams.set("workspace", this.workspace);
-    const res = await this.fetchAuthed(url.toString(), { method: "DELETE" });
-    if (res.status === 404) return null;
-    if (!res.ok) {
-      const json = await this.parseJson(res);
-      throw apiErr(res.status, json);
+  return {
+    selector: buildSelector(el),
+    parentSelector: parent ? buildSelector(parent) : "",
+    tagName: el.tagName,
+    textSnippet: text.trim().slice(0, TEXT_SNIPPET_MAX),
+    siblingIndex,
+    attributes: {
+      id: el.id || void 0,
+      classList: Array.from(el.classList).filter((c) => !c.startsWith("vz-") && !c.startsWith("vizu-")),
+      role: el.getAttribute("role") || void 0,
+      ariaLabel: el.getAttribute("aria-label") || void 0,
+      dataKey: el.getAttribute("data-vizu-key") || void 0
+    },
+    ancestorChain: captureAncestorChain(el, ANCESTOR_DEPTH),
+    algorithmVersion: 2
+  };
+}
+function captureAncestorChain(el, depth) {
+  const steps = [];
+  let current = el.parentElement;
+  while (current && steps.length < depth) {
+    const parent = current.parentElement;
+    let nthOfType = 1;
+    if (parent) {
+      const sameTag = Array.from(parent.children).filter((c) => c.tagName === current.tagName);
+      nthOfType = sameTag.indexOf(current) + 1;
     }
-    return null;
+    steps.push({ tag: current.tagName, nthOfType });
+    current = parent;
   }
-  /**
-   * Upload a file as multipart/form-data to the host backend, which
-   * forwards to Vercel Blob server-side. Stays under the 4.5 MB Vercel
-   * function body cap (our own 5 MB attachment cap will be enforced
-   * server-side before that's hit).
-   *
-   * Deliberately doesn't use `@vercel/blob/client`'s direct-upload flow:
-   *   - keeps `@vizu/core` free of any `@vercel/blob` dependency
-   *     (script-tag and local-only consumers don't pull blob code)
-   *   - the multipart path is one round-trip; the direct-upload flow
-   *     is two (signed URL + upload). For attachments capped at 5 MB,
-   *     the savings don't justify the dep cost.
-   */
-  async uploadAttachment(_namespace, file) {
-    const form = new FormData();
-    form.append("file", file, file.name);
-    const url = new URL(this.apiUrl + "/api/uploads");
-    url.searchParams.set("workspace", this.workspace);
-    const res = await this.fetchAuthed(url.toString(), {
-      method: "POST",
-      body: form
-      // Don't set content-type; the browser fills in the multipart boundary.
-    });
-    const json = await this.parseJson(res);
-    if (!res.ok) throw apiErr(res.status, json);
-    if (!json?.url || typeof json.url !== "string") {
-      throw apiErr(500, { error: "upload_failed", message: "Backend did not return a URL." });
+  return steps.length > 0 ? { steps } : void 0;
+}
+function findByFingerprint(fp, root = document) {
+  if (fp.attributes.dataKey) {
+    try {
+      const byKey = root.querySelector(`[data-vizu-key="${CSS.escape(fp.attributes.dataKey)}"]`);
+      if (byKey) return { element: byKey, confidence: "exact" };
+    } catch {
     }
-    return {
-      id: uuid(),
-      url: json.url,
-      mimeType: file.type || "application/octet-stream",
-      sizeBytes: file.size,
-      uploadedAt: Date.now(),
-      filename: file.name
-    };
+    return { element: null, confidence: "orphaned" };
   }
-  getAuthContext() {
-    if (!this.cachedToken) return null;
-    return {
-      userId: this.cachedToken.userId,
-      token: this.cachedToken.token,
-      expiresAt: this.cachedToken.expiresAt
-    };
+  if (fp.attributes.id) {
+    try {
+      const byId = root.querySelector("#" + CSS.escape(fp.attributes.id));
+      if (byId) return { element: byId, confidence: "exact" };
+    } catch {
+    }
   }
-  /* ─── Auth ────────────────────────────────────────────────────────── */
-  isExpired(t) {
-    if (!t) return true;
-    const exp = new Date(t.expiresAt).getTime();
-    return !Number.isFinite(exp) || exp - Date.now() < 3e4;
+  const candidates = [];
+  const classes = fp.attributes.classList;
+  if (classes && classes.length > 0) {
+    const m = findByClassSignature(root, fp.tagName, classes);
+    if (m?.element) candidates.push({ el: m.element, rung: "class" });
   }
-  readStoredToken() {
-    if (typeof sessionStorage === "undefined") return null;
-    const raw = sessionStorage.getItem(this.sessionKey());
-    if (!raw) return null;
+  try {
+    const bySelector = root.querySelector(fp.selector);
+    if (bySelector) candidates.push({ el: bySelector, rung: "selector" });
+  } catch {
+  }
+  if (fp.ancestorChain && fp.ancestorChain.steps.length > 0) {
+    const m = findByAncestorChain(root, fp.tagName, fp.ancestorChain.steps);
+    if (m?.element) candidates.push({ el: m.element, rung: "chain" });
+  } else {
     try {
-      const parsed = JSON.parse(raw);
-      if (this.isExpired(parsed)) {
-        sessionStorage.removeItem(this.sessionKey());
-        return null;
+      const parent = fp.parentSelector ? root.querySelector(fp.parentSelector) : root;
+      if (parent) {
+        const candidate = parent.children[fp.siblingIndex];
+        if (candidate && candidate.tagName === fp.tagName) {
+          candidates.push({ el: candidate, rung: "chain" });
+        }
       }
-      return parsed;
     } catch {
-      return null;
     }
   }
-  writeStoredToken(t) {
-    this.cachedToken = t;
-    if (typeof sessionStorage !== "undefined") {
-      sessionStorage.setItem(this.sessionKey(), JSON.stringify(t));
+  if (fp.textSnippet) {
+    const m = findByTextSnippet(root, fp.tagName, fp.textSnippet);
+    if (m?.element) candidates.push({ el: m.element, rung: "text" });
+  }
+  if (candidates.length === 0) {
+    return { element: null, confidence: "orphaned" };
+  }
+  const votes = /* @__PURE__ */ new Map();
+  for (const c of candidates) {
+    let s = votes.get(c.el);
+    if (!s) {
+      s = /* @__PURE__ */ new Set();
+      votes.set(c.el, s);
     }
+    s.add(c.rung);
   }
-  clearStoredToken() {
-    this.cachedToken = null;
-    if (typeof sessionStorage !== "undefined") {
-      sessionStorage.removeItem(this.sessionKey());
+  let best = null;
+  for (const [el, rungs] of votes) {
+    if (!best || rungs.size > best.rungs.size) best = { el, rungs };
+  }
+  if (!best) return { element: null, confidence: "orphaned" };
+  if (best.rungs.size >= 3) return { element: best.el, confidence: "likely" };
+  if (best.rungs.size >= 2) return { element: best.el, confidence: "drifted" };
+  if (best.rungs.has("class") || best.rungs.has("chain")) {
+    return { element: best.el, confidence: "drifted" };
+  }
+  return { element: null, confidence: "orphaned" };
+}
+function findByClassSignature(root, tagName, needle) {
+  const needleSet = new Set(needle.filter((c) => !c.startsWith("vz-") && !c.startsWith("vizu-")));
+  if (needleSet.size === 0) return null;
+  const all = root.querySelectorAll(tagName.toLowerCase());
+  let best = null;
+  let secondScore = 0;
+  for (const el of all) {
+    const haystack = new Set(
+      Array.from(el.classList).filter((c) => !c.startsWith("vz-") && !c.startsWith("vizu-"))
+    );
+    if (haystack.size === 0) continue;
+    const score = jaccardSimilarity(needleSet, haystack);
+    if (score < CLASS_JACCARD_THRESHOLD) continue;
+    if (!best || score > best.score) {
+      secondScore = best?.score ?? 0;
+      best = { el, score };
+    } else if (score > secondScore) {
+      secondScore = score;
     }
   }
-  sessionKey() {
-    return `vizu:cloud-token:${this.workspace}`;
+  if (!best) return null;
+  if (best.score - secondScore < 0.1) return null;
+  return { element: best.el, confidence: "likely" };
+}
+function findByAncestorChain(root, tagName, steps) {
+  const all = root.querySelectorAll(tagName.toLowerCase());
+  let best = null;
+  for (const el of all) {
+    const ancestors = collectAncestorSteps(el, steps.length + ANCESTOR_MAX_SHIFT);
+    const score = scoreChainAgainstAncestors(ancestors, steps, ANCESTOR_MAX_SHIFT);
+    if (score < 2) continue;
+    if (!best || score > best.score) best = { el, score };
   }
-  /**
-   * Resolve a valid token, opening the popup if needed.
-   *
-   * Single-flight: simultaneous requests await one popup, not N.
-   * Caller-friendly: throws a Error with `.code === 'auth_canceled'`
-   * if the user closes the popup; hosts can catch this and present
-   * a friendly message instead of a blank failure.
-   */
-  async resolveToken() {
-    if (this.cachedToken && !this.isExpired(this.cachedToken)) return this.cachedToken;
-    const fresh = this.readStoredToken();
-    if (fresh) {
-      this.cachedToken = fresh;
-      this.fireAuthChanged(fresh);
-      return fresh;
-    }
-    if (!this.autoSignIn) {
-      throw makeAuthError("auth_required", "Sign-in required; autoSignIn is disabled.");
-    }
-    if (!this.pendingAuth) {
-      this.pendingAuth = this.openSignInPopup().then((t) => {
-        this.writeStoredToken(t);
-        this.fireAuthChanged(t);
-        return t;
-      }).finally(() => {
-        this.pendingAuth = null;
-      });
+  if (!best) return null;
+  return {
+    element: best.el,
+    confidence: best.score === steps.length ? "likely" : "drifted"
+  };
+}
+function collectAncestorSteps(el, limit) {
+  const steps = [];
+  let current = el.parentElement;
+  while (current && steps.length < limit) {
+    const parent = current.parentElement;
+    let nth = 1;
+    if (parent) {
+      const sameTag = Array.from(parent.children).filter((c) => c.tagName === current.tagName);
+      nth = sameTag.indexOf(current) + 1;
     }
-    return this.pendingAuth;
+    steps.push({ tag: current.tagName, nthOfType: nth });
+    current = parent;
   }
-  /**
-   * Notify the host that the authenticated identity changed. De-duped
-   * via the token string so multiple resolveToken() hits with the same
-   * cached token don't re-call setUser on every fetch.
-   */
-  fireAuthChanged(token) {
-    if (this.lastNotifiedTokenId === token.token) return;
-    this.lastNotifiedTokenId = token.token;
-    try {
-      this.onAuthChanged?.({ userId: token.userId, user: token.user });
-    } catch (err) {
-      if (typeof console !== "undefined") {
-        console.warn("[vizu/cloud] onAuthChanged callback threw", err);
-      }
+  return steps;
+}
+function findByTextSnippet(root, tagName, snippet) {
+  const needle = normalizeText(snippet);
+  if (!needle) return null;
+  const all = root.querySelectorAll(tagName.toLowerCase());
+  let best = null;
+  for (const el of all) {
+    const raw = el.innerText || el.textContent || "";
+    const candidate = normalizeText(raw.slice(0, TEXT_SNIPPET_MAX * 2));
+    if (!candidate) continue;
+    const score = levenshteinRatio(needle, candidate);
+    if (score < TEXT_RATIO_THRESHOLD) continue;
+    if (!best || score > best.score) {
+      best = { el, score };
     }
   }
-  openSignInPopup() {
-    return new Promise((resolve, reject) => {
-      if (typeof window === "undefined") {
-        return reject(makeAuthError("auth_unavailable", "Sign-in requires a browser environment."));
-      }
-      const apiOrigin = new URL(this.apiUrl).origin;
-      const hostOrigin = window.location.origin;
-      const popupUrl = this.apiUrl + "/connect?workspace=" + encodeURIComponent(this.workspace) + "&origin=" + encodeURIComponent(hostOrigin);
-      const left = Math.max(0, Math.round((window.screen.width - POPUP_WIDTH) / 2));
-      const top = Math.max(0, Math.round((window.screen.height - POPUP_HEIGHT) / 2));
-      const popup = window.open(
-        popupUrl,
-        "vizu-connect",
-        `width=${POPUP_WIDTH},height=${POPUP_HEIGHT},left=${left},top=${top},noopener=no,popup=yes`
-      );
-      if (!popup) {
-        return reject(
-          makeAuthError(
-            "popup_blocked",
-            "Sign-in popup was blocked by the browser. Allow popups for this site and try again."
-          )
-        );
-      }
-      let resolved = false;
-      const onMessage = (e) => {
-        if (e.origin !== apiOrigin) return;
-        const data = e.data;
-        if (!data || data.type !== "vizu:auth") return;
-        if (data.workspace !== this.workspace) return;
-        if (typeof data.token !== "string" || typeof data.expiresAt !== "string" || typeof data.userId !== "string") return;
-        resolved = true;
-        cleanup();
-        const userPayload = data.user;
-        const user = userPayload && typeof userPayload.name === "string" ? {
-          id: typeof userPayload.id === "string" ? userPayload.id : data.userId,
-          name: userPayload.name,
-          avatarUrl: typeof userPayload.avatarUrl === "string" ? userPayload.avatarUrl : void 0
-        } : null;
-        resolve({ token: data.token, expiresAt: data.expiresAt, userId: data.userId, user });
-      };
-      const onPoll = window.setInterval(() => {
-        if (popup.closed) {
-          if (!resolved) {
-            cleanup();
-            reject(makeAuthError("auth_canceled", "Sign-in popup was closed before completing."));
-          }
-        }
-      }, 500);
-      function cleanup() {
-        window.clearInterval(onPoll);
-        window.removeEventListener("message", onMessage);
-      }
-      window.addEventListener("message", onMessage);
-    });
+  return best ? { element: best.el, confidence: "drifted" } : null;
+}
+function normalizeText(input) {
+  return input.toLowerCase().replace(/\s+/g, " ").trim();
+}
+function levenshteinRatio(a, b) {
+  if (a === b) return 1;
+  if (a.length === 0 || b.length === 0) return a.length === b.length ? 1 : 0;
+  const maxLen = Math.max(a.length, b.length);
+  const distance = levenshteinDistance(a, b);
+  return 1 - distance / maxLen;
+}
+function levenshteinDistance(a, b) {
+  if (a.length > b.length) {
+    const tmp = a;
+    a = b;
+    b = tmp;
   }
-  /* ─── Fetch wrapper ───────────────────────────────────────────────── */
-  /**
-   * Perform an authenticated fetch with one-shot retry on 401 (re-opens
-   * the popup if the token expired during the request). 4xx other than
-   * 401 / 404 throw; 5xx throws; 2xx returns.
-   */
-  async fetchAuthed(url, init, retried = false) {
-    const token = await this.resolveToken();
-    const headers = new Headers(init.headers);
-    headers.set("authorization", `Bearer ${token.token}`);
-    const res = await fetch(url, { ...init, headers, credentials: "omit" });
-    if (res.status === 401 && !retried) {
-      this.clearStoredToken();
-      return this.fetchAuthed(url, init, true);
+  const prev = new Array(a.length + 1);
+  const curr = new Array(a.length + 1);
+  for (let i = 0; i <= a.length; i++) prev[i] = i;
+  for (let j = 1; j <= b.length; j++) {
+    curr[0] = j;
+    for (let i = 1; i <= a.length; i++) {
+      const cost = a.charCodeAt(i - 1) === b.charCodeAt(j - 1) ? 0 : 1;
+      curr[i] = Math.min(
+        curr[i - 1] + 1,
+        // insert
+        prev[i] + 1,
+        // delete
+        prev[i - 1] + cost
+        // substitute
+      );
     }
-    return res;
+    for (let i = 0; i <= a.length; i++) prev[i] = curr[i];
   }
-  async parseJson(res) {
-    try {
-      const text = await res.text();
-      return text ? JSON.parse(text) : null;
-    } catch {
-      return null;
+  return prev[a.length];
+}
+function scoreChainAgainstAncestors(actual, captured, maxShift) {
+  let best = 0;
+  for (let offset = 0; offset <= maxShift; offset++) {
+    let score = 0;
+    for (let i = 0; i < captured.length; i++) {
+      const a = actual[i + offset];
+      if (!a) break;
+      if (a.tag === captured[i].tag && a.nthOfType === captured[i].nthOfType) {
+        score++;
+      }
     }
+    if (score > best) best = score;
   }
-};
-function makeAuthError(code, message) {
-  const err = new Error(message);
-  err.code = code;
-  return err;
+  return best;
 }
-function apiErr(status, body) {
-  const code = body?.error === "origin_not_allowed" ? "origin_not_allowed" : body?.error === "not_found" ? "workspace_not_found" : "http_error";
-  const err = new Error(body?.message ?? `HTTP ${status}`);
-  err.code = code;
-  err.status = status;
-  err.body = body;
-  return err;
+function jaccardSimilarity(a, b) {
+  if (a.size === 0 && b.size === 0) return 1;
+  let intersection = 0;
+  for (const item of a) if (b.has(item)) intersection++;
+  const union = a.size + b.size - intersection;
+  return union === 0 ? 0 : intersection / union;
+}
+function findElementByFingerprint(fp, root) {
+  return findByFingerprint(fp, root).element;
+}
+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/index.ts
-init_fingerprint();
 
 // src/highlighter.ts
 var IGNORE_SELECTOR = "[data-vizu-root], [data-vizu-ignore], script, style, link, meta, head";
 var Highlighter = class {
-  constructor(root, extraIgnore, onClick, onCurrentChange) {
+  constructor(root, extraIgnore, onClick) {
     this.current = null;
     this.active = false;
     this.paused = false;
@@ -2103,7 +1033,6 @@ var Highlighter = class {
     this.root = root;
     this.extraIgnore = extraIgnore;
     this.onClick = onClick;
-    this.onCurrentChange = onCurrentChange ?? null;
     this.overlay = document.createElement("div");
     this.overlay.className = "vz-highlight";
     this.overlay.style.display = "none";
@@ -2112,7 +1041,6 @@ var Highlighter = class {
   setCurrent(el) {
     if (this.current === el) return;
     this.current = el;
-    this.onCurrentChange?.(el);
   }
   start() {
     if (this.active) return;
@@ -2173,7 +1101,6 @@ var Highlighter = class {
 };
 
 // src/popover.ts
-init_fingerprint();
 function cssEscape(s) {
   if (typeof CSS !== "undefined" && typeof CSS.escape === "function") return CSS.escape(s);
   return s.replace(/["\\]/g, "\\$&");
@@ -2851,7 +1778,6 @@ var Pill = class {
 };
 
 // src/sidebar.ts
-init_fingerprint();
 var Sidebar = class {
   constructor(root, callbacks) {
     this.open = false;
@@ -4100,7 +3026,6 @@ var EventBus = class {
 };
 
 // src/index.ts
-init_fingerprint();
 var DEFAULTS = {
   shortcut: "mod+shift+e",
   namespace: "default",
@@ -4160,8 +3085,6 @@ var Vizu = class {
     this.selfHealedThisSession = /* @__PURE__ */ new Set();
     this.actions = [];
     this.user = null;
-    /** Live-collab module — non-null only when `opts.liveblocks` and `opts.cloud` are both set AND the plan carries `live_collab`. Stays null otherwise. */
-    this.liveCollab = null;
     this.enabled = false;
     this.rafScheduled = false;
     this.bus = new EventBus();
@@ -4233,18 +3156,6 @@ var Vizu = class {
     if (options.actions) this.actions = [...options.actions];
     if (options.onCommentAdded) this.bus.on("comment:added", (p) => options.onCommentAdded(p.comment));
     if (options.onCommentRemoved) this.bus.on("comment:removed", (p) => options.onCommentRemoved(p.id));
-    if (options.liveblocks && options.cloud) {
-      const live = options.liveblocks;
-      const cloud = options.cloud;
-      void Promise.resolve().then(() => (init_live_collab(), live_collab_exports)).then(({ LiveCollab: LiveCollab2 }) => {
-        this.liveCollab = new LiveCollab2({
-          publicKey: live.publicKey,
-          authEndpoint: live.authEndpoint,
-          workspaceSlug: cloud.workspace
-        });
-        void this.liveCollab.start();
-      });
-    }
     if (typeof window !== "undefined") {
       window.addEventListener("keydown", this.onKeyDown);
       void this.loadComments().then(() => this.subscribeStorage());
@@ -4302,8 +3213,6 @@ var Vizu = class {
     this.unsubscribeStorage?.();
     this.unsubscribeStorage = null;
     this.selfHealedThisSession.clear();
-    this.liveCollab?.destroy();
-    this.liveCollab = null;
     this.bus.clear();
   }
   /* ===== Action API ===== */
@@ -4625,11 +3534,7 @@ var Vizu = class {
     this.highlighter = new Highlighter(
       this.root,
       this.opts.ignoreSelectors ?? [],
-      (el, e) => this.onElementClick(el, e),
-      (el) => {
-        if (!this.liveCollab) return;
-        this.liveCollab.setLocalSelection(el ? fingerprint(el) : null);
-      }
+      (el, e) => this.onElementClick(el, e)
     );
     this.highlighter.start();
     this.renderAllMarkers();