@unhingged/vizu-core 0.1.11 → 0.1.13

package/dist/index.cjs

@@ -1271,6 +1271,10 @@ var Popover = class {
     this.pendingRefs = {};
     /** Attachments uploaded during this session, persisted into `comment.attachments` on save. */
     this.pendingAttachments = [];
+    /** Open mention picker element, if any. Held so the next openMentionPicker / close calls can tear it down. */
+    this.mentionPicker = null;
+    /** Dismiss handlers wired to document for the open picker; cleared in closeMentionPicker. */
+    this.mentionPickerDismiss = null;
     this.handleEditorKey = (e) => {
       const editor = e.currentTarget;
       if (e.key === "#") {
@@ -1377,7 +1381,7 @@ var Popover = class {
       else if (action === "save") this.save();
       else if (action === "mention") {
         e.preventDefault();
-        this.insertMentionChip(this.currentUser);
+        this.openMentionPicker(target);
       } else if (action === "upload") {
         e.preventDefault();
         const input = this.el.querySelector('[data-vz="file-input"]');
@@ -1486,6 +1490,7 @@ var Popover = class {
     this.position();
   }
   close() {
+    this.closeMentionPicker();
     this.el.style.display = "none";
     this.anchorTargets = [];
     this.anchorFingerprints = [];
@@ -1543,7 +1548,7 @@ var Popover = class {
       <div class="vz-popover-actions">
         <button class="vz-btn vz-btn-ghost" data-vz="close">Close</button>
         ${this.callbacks.canUploadAttachments() ? `<button class="vz-btn vz-btn-ghost vz-btn-upload" data-vz="upload" title="Attach an image">+ image</button>` : ""}
-        ${this.currentUser ? `<button class="vz-btn vz-btn-ghost vz-btn-mention" data-vz="mention" title="Mention ${escapeHtml(this.currentUser.name)}">@ mention</button>` : ""}
+        ${this.currentUser ? `<button class="vz-btn vz-btn-ghost vz-btn-mention" data-vz="mention" title="Mention a teammate">@ mention</button>` : ""}
         <button class="vz-btn vz-btn-primary" data-vz="save">Save</button>
       </div>
       <input type="file" class="vz-file-input" data-vz="file-input" accept="image/png,image/jpeg,image/webp,image/gif,image/svg+xml" hidden />
@@ -1712,11 +1717,104 @@ var Popover = class {
     for (const child of editor.childNodes) walk(child);
     return parts.join("").trim();
   }
+  /**
+   * Open a dropdown listing the workspace's mentionable users. The user
+   * clicks one to insert a mention chip for them; Esc or an outside
+   * click closes the dropdown.
+   *
+   * The dropdown is fetched fresh on every open so member adds/removes
+   * in another tab are picked up without a popover reopen. Falls back
+   * to silent no-op if `onMentionSearch` isn't wired (non-cloud
+   * adapters) or returns an empty list.
+   */
+  async openMentionPicker(anchor) {
+    this.closeMentionPicker();
+    if (!this.callbacks.onMentionSearch) return;
+    const picker = document.createElement("div");
+    picker.className = "vz-mention-picker";
+    picker.setAttribute("data-vz-ignore", "");
+    picker.innerHTML = `<div class="vz-mention-loading">Loading\u2026</div>`;
+    this.el.appendChild(picker);
+    this.mentionPicker = picker;
+    this.positionMentionPicker(picker, anchor);
+    let users = [];
+    try {
+      users = await this.callbacks.onMentionSearch();
+    } catch {
+    }
+    if (this.mentionPicker !== picker) return;
+    if (users.length === 0) {
+      picker.innerHTML = `<div class="vz-mention-empty">No teammates to mention yet.</div>`;
+      this.positionMentionPicker(picker, anchor);
+      this.wireMentionPickerDismiss();
+      return;
+    }
+    const itemsHtml = users.map((u) => {
+      const avatar = u.avatarUrl ? `<img class="vz-mention-avatar" src="${escapeHtml(u.avatarUrl)}" alt="" />` : `<span class="vz-mention-avatar vz-mention-avatar-initials">${escapeHtml(initials(u.name) || "?")}</span>`;
+      return `<button class="vz-mention-item" type="button" data-mention-id="${escapeHtml(u.id)}" data-mention-name="${escapeHtml(u.name)}">${avatar}<span class="vz-mention-item-name">${escapeHtml(u.name)}</span></button>`;
+    }).join("");
+    picker.innerHTML = itemsHtml;
+    this.positionMentionPicker(picker, anchor);
+    picker.addEventListener("click", (e) => {
+      const btn = e.target?.closest(".vz-mention-item");
+      if (!btn) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const id = btn.getAttribute("data-mention-id") || "";
+      const name = btn.getAttribute("data-mention-name") || "";
+      if (id && name) this.insertMentionChip({ id, name });
+      this.closeMentionPicker();
+    });
+    this.wireMentionPickerDismiss();
+  }
+  /** Wires Esc + outside-click handlers to close the open picker. */
+  wireMentionPickerDismiss() {
+    if (this.mentionPickerDismiss) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        this.closeMentionPicker();
+      }
+    };
+    const onOutside = (e) => {
+      if (!this.mentionPicker) return;
+      if (this.mentionPicker.contains(e.target)) return;
+      this.closeMentionPicker();
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("mousedown", onOutside, true);
+    this.mentionPickerDismiss = () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("mousedown", onOutside, true);
+    };
+  }
+  closeMentionPicker() {
+    if (this.mentionPickerDismiss) {
+      this.mentionPickerDismiss();
+      this.mentionPickerDismiss = null;
+    }
+    if (this.mentionPicker) {
+      this.mentionPicker.remove();
+      this.mentionPicker = null;
+    }
+  }
+  /**
+   * Place the picker below the anchor button. Stays within the
+   * popover's right edge so we don't overflow the popover frame.
+   */
+  positionMentionPicker(picker, anchor) {
+    const popRect = this.el.getBoundingClientRect();
+    const btnRect = anchor.getBoundingClientRect();
+    const left = btnRect.left - popRect.left;
+    const top = btnRect.bottom - popRect.top + 4;
+    picker.style.left = `${left}px`;
+    picker.style.top = `${top}px`;
+  }
   /**
    * Insert a mention chip for the given user into the editor at the
-   * current caret position. Owner-only ACL in v1: the only callable
-   * "mentionable" user is the current Vizu user (= workspace owner).
-   * Future versions can expand this with an autocomplete dropdown.
+   * current caret position. Accepts any user-like shape with a required
+   * `id` + `name` — covers both the current VizuUser (for self-mention)
+   * and MentionableUser (from the workspace member picker).
    */
   insertMentionChip(user) {
     if (!user || !user.id) return;
@@ -1793,6 +1891,7 @@ var Popover = class {
     this.el.style.left = left + "px";
   }
   destroy() {
+    this.closeMentionPicker();
     this.el.removeEventListener("click", this.handleClick);
     this.el.remove();
   }
@@ -2571,6 +2670,71 @@ var STYLES = `
 }
 .vz-btn-primary:hover { background: color-mix(in srgb, var(--vz-accent) 88%, white); }
 
+/* Mention picker \u2014 floating dropdown anchored under the @ mention button */
+.vz-mention-picker {
+  position: absolute;
+  z-index: 10;
+  min-width: 200px;
+  max-width: 280px;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 4px;
+  background: var(--vz-bg-popover, #1c1c1c);
+  border: 1px solid var(--vz-border, rgba(255,255,255,0.08));
+  border-radius: 8px;
+  box-shadow: 0 12px 28px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.vz-mention-loading,
+.vz-mention-empty {
+  padding: 10px 12px;
+  font-size: 12px;
+  color: var(--vz-text-muted);
+  text-align: center;
+}
+.vz-mention-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  border-radius: 6px;
+  background: transparent;
+  border: none;
+  color: #fafafa;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 80ms;
+}
+.vz-mention-item:hover,
+.vz-mention-item:focus-visible {
+  background: var(--vz-bg-hover, rgba(255,255,255,0.06));
+  outline: none;
+}
+.vz-mention-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px; height: 22px;
+  border-radius: 50%;
+  font-size: 10px; font-weight: 600;
+  color: var(--vz-marker-fg, #0a0a0a);
+  background: var(--vz-accent, #ff8b6e);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.vz-mention-avatar img {
+  width: 100%; height: 100%; object-fit: cover;
+}
+.vz-mention-item-name {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* Sidebar */
 .vz-sidebar {
   position: fixed;
@@ -3330,22 +3494,35 @@ 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.
+   * Fetch the list of users who can be @-mentioned on the current
+   * workspace. Used by the popover's mention dropdown; hosts can also
+   * call this directly to build their own picker. Returns [] for
+   * non-cloud adapters (no workspace, no member list to fetch from).
    */
-  shouldShowPill() {
+  async searchMentionable() {
+    if (this.storage instanceof CloudStorageAdapter) {
+      return this.storage.searchMentionable();
+    }
+    return [];
+  }
+  /**
+   * 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.
+   */
+  shouldMount() {
     if (!(this.storage instanceof CloudStorageAdapter)) return true;
     return this.user !== null;
   }
@@ -3372,7 +3549,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;
@@ -3690,7 +3869,8 @@ var Vizu = class {
       onClose: () => this.closePopover(),
       onStartReferencePick: (onPicked, onCancel) => this.startPicking(onPicked, onCancel),
       onJumpToReference: (commentId, refId2) => this.jumpToReference(commentId, refId2),
-      onAnchorsChanged: (fps) => this.syncActiveAnchorOutlines(fps)
+      onAnchorsChanged: (fps) => this.syncActiveAnchorOutlines(fps),
+      onMentionSearch: () => this.searchMentionable()
     });
     this.popover.setUser(this.user);
     this.sidebar = new Sidebar(this.root, {
@@ -3712,7 +3892,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 ?? [],