@unhingged/vizu-core 0.1.10 → 0.1.12

package/dist/index.cjs

@@ -48,7 +48,8 @@ function isInside(target, selector) {
   return !!target.closest(selector);
 }
 function escapeHtml(s) {
-  return s.replace(/[&<>"']/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[ch]);
+  if (s == null) return "";
+  return String(s).replace(/[&<>"']/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[ch]);
 }
 function formatTime(ts) {
   const d = new Date(ts);
@@ -60,14 +61,16 @@ function formatTime(ts) {
   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("");
+  if (!name) return "";
+  return String(name).split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0].toUpperCase()).join("");
 }
 function avatarHtml(user, className = "vz-comment-author-avatar") {
   if (!user) return `<span class="${className}">\xB7</span>`;
+  const displayName = user.name || user.id || "User";
   if (user.avatarUrl) {
-    return `<span class="${className}"><img src="${escapeHtml(user.avatarUrl)}" alt="${escapeHtml(user.name)}" /></span>`;
+    return `<span class="${className}"><img src="${escapeHtml(user.avatarUrl)}" alt="${escapeHtml(displayName)}" /></span>`;
   }
-  return `<span class="${className}">${escapeHtml(initials(user.name) || "?")}</span>`;
+  return `<span class="${className}">${escapeHtml(initials(displayName) || "?")}</span>`;
 }
 function refId() {
   return Math.random().toString(36).slice(2, 10);
@@ -470,6 +473,26 @@ var CloudStorageAdapter = class {
   accessDenialReason() {
     return this.accessDeniedReason;
   }
+  /**
+   * Fetch the list of users who can be @-mentioned on this workspace.
+   * Used by the popover's mention dropdown — returns owner + joined
+   * editors/viewers, sorted owner-first. Silent on no auth (returns [])
+   * so popover doesn't open a popup just to render an empty dropdown.
+   */
+  async searchMentionable() {
+    if (!this.cachedToken || this.isExpired(this.cachedToken)) return [];
+    try {
+      const res = await this.fetchAuthed(
+        this.apiUrl + "/api/workspaces/" + encodeURIComponent(this.workspace) + "/mentionable",
+        { method: "GET" }
+      );
+      if (!res.ok) return [];
+      const json = await this.parseJson(res);
+      return Array.isArray(json?.users) ? json.users : [];
+    } catch {
+      return [];
+    }
+  }
   /* ─── StorageAdapter v2 ───────────────────────────────────────────── */
   async load(_namespace) {
     if (!this.cachedToken || this.isExpired(this.cachedToken)) {
@@ -1219,7 +1242,7 @@ function renderRepliesHtml(c) {
   const items = replies.map(
     (r) => `
       <div class="vz-reply" data-reply-id="${escapeHtml(r.id)}">
-        ${r.author ? `<div class="vz-comment-author">${avatarHtml(r.author)} <span class="vz-comment-author-name">${escapeHtml(r.author.name)}</span></div>` : ""}
+        ${r.author ? `<div class="vz-comment-author">${avatarHtml(r.author)} <span class="vz-comment-author-name">${escapeHtml(r.author.name || r.author.id || "User")}</span></div>` : ""}
         <div class="vz-reply-text">${escapeHtml(r.text)}</div>
         <div class="vz-comment-meta">
           <span>${escapeHtml(formatTime(typeof r.createdAt === "number" ? r.createdAt : new Date(r.createdAt).getTime()))}</span>
@@ -1496,7 +1519,7 @@ var Popover = class {
         ${comments.length === 0 ? '<div class="vz-empty">No comments yet.</div>' : comments.map(
       (c) => `
             <div class="vz-comment" data-comment-id="${escapeHtml(c.id)}">
-              ${c.author ? `<div class="vz-comment-author">${avatarHtml(c.author)} <span class="vz-comment-author-name">${escapeHtml(c.author.name)}</span></div>` : ""}
+              ${c.author ? `<div class="vz-comment-author">${avatarHtml(c.author)} <span class="vz-comment-author-name">${escapeHtml(c.author.name || c.author.id || "User")}</span></div>` : ""}
               <div>${renderCommentText(c.text, c.id)}</div>
               ${renderAttachmentsHtml(c.attachments)}
               <div class="vz-comment-meta">
@@ -3307,22 +3330,23 @@ var Vizu = class {
     this.user = user;
     this.popover?.setUser(user);
     this.pill?.setUser(user);
-    if (this.pill) {
-      if (this.shouldShowPill()) this.pill.show();
-      else this.pill.hide();
-    }
     this.bus.emit("user:changed", { user });
+    if (this.enabled && !this.root && this.shouldMount()) {
+      this.deferred(() => this.mount());
+    }
   }
   getUser() {
     return this.user;
   }
   /**
-   * Whether the pill belongs on-screen right now. Cloud-mode workspaces
-   * keep it hidden until the user is signed in; non-cloud usage (local /
-   * memory storage) has no auth and always shows it. Recomputed on every
-   * setUser and on mount.
+   * Whether the full Vizu UI (pill, highlighter, markers, popover) can
+   * be mounted right now. Cloud-mode workspaces hold off until the
+   * user is signed in; non-cloud usage (local / memory storage) has no
+   * auth concept and mounts immediately. Re-checked from `enable()`
+   * and from `setUser()` so that the moment auth resolves, the UI
+   * appears without the user needing to press the shortcut again.
    */
-  shouldShowPill() {
+  shouldMount() {
     if (!(this.storage instanceof CloudStorageAdapter)) return true;
     return this.user !== null;
   }
@@ -3349,7 +3373,9 @@ var Vizu = class {
     if (this.enabled) return;
     this.enabled = true;
     this.bus.emit("enabled", {});
-    this.deferred(() => this.mount());
+    if (this.shouldMount()) {
+      this.deferred(() => this.mount());
+    }
   }
   disable() {
     if (!this.enabled) return;
@@ -3689,7 +3715,7 @@ var Vizu = class {
     this.pill.setUser(this.user);
     this.pill.setComments(this.comments);
     this.pill.setMultiSelectState(this.multiSelectMode, this.pendingFingerprints.length);
-    if (this.shouldShowPill()) this.pill.show();
+    this.pill.show();
     this.highlighter = new Highlighter(
       this.root,
       this.opts.ignoreSelectors ?? [],