@unhingged/vizu-core 0.1.9 → 0.1.11

package/dist/index.d.cts

@@ -48,6 +48,18 @@ interface VizuUser {
     /** Free-form host-defined extras (team, role, etc.) preserved on each comment. */
     meta?: Record<string, unknown>;
 }
+/**
+ * Slim shape for the mention picker. The host can @-mention any of
+ * these in a comment body. Returned by `Vizu.searchMentionable()` and
+ * cached by the popover dropdown. Name + avatar is all the UI needs;
+ * email/role intentionally omitted to keep the cross-origin surface
+ * minimal.
+ */
+interface MentionableUser {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+}
 /** Current schema version. Bump + add a migration when the shape changes. */
 declare const SCHEMA_VERSION: 2;
 type SchemaVersion = typeof SCHEMA_VERSION;
@@ -501,6 +513,13 @@ declare class CloudStorageAdapter implements StorageAdapter {
     isAccessDenied(): boolean;
     /** Last denial reason; null when not denied. */
     accessDenialReason(): string | null;
+    /**
+     * 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.
+     */
+    searchMentionable(): Promise<MentionableUser[]>;
     load(_namespace: string): Promise<VizuComment[]>;
     addComment(_namespace: string, comment: VizuComment): Promise<void>;
     updateComment(_namespace: string, id: string, patch: Partial<VizuComment>): Promise<VizuComment | null>;
@@ -658,6 +677,13 @@ declare class Vizu {
     off<E extends VizuEventName>(event: E, handler: VizuEventHandler<E>): void;
     setUser(user: VizuUser | null): void;
     getUser(): VizuUser | null;
+    /**
+     * 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.
+     */
+    private shouldShowPill;
     /**
      * Cloud-mode write gate. Every entry point that creates or modifies a
      * comment first checks that we have a known user. Without one, the

package/dist/index.d.ts

@@ -48,6 +48,18 @@ interface VizuUser {
     /** Free-form host-defined extras (team, role, etc.) preserved on each comment. */
     meta?: Record<string, unknown>;
 }
+/**
+ * Slim shape for the mention picker. The host can @-mention any of
+ * these in a comment body. Returned by `Vizu.searchMentionable()` and
+ * cached by the popover dropdown. Name + avatar is all the UI needs;
+ * email/role intentionally omitted to keep the cross-origin surface
+ * minimal.
+ */
+interface MentionableUser {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+}
 /** Current schema version. Bump + add a migration when the shape changes. */
 declare const SCHEMA_VERSION: 2;
 type SchemaVersion = typeof SCHEMA_VERSION;
@@ -501,6 +513,13 @@ declare class CloudStorageAdapter implements StorageAdapter {
     isAccessDenied(): boolean;
     /** Last denial reason; null when not denied. */
     accessDenialReason(): string | null;
+    /**
+     * 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.
+     */
+    searchMentionable(): Promise<MentionableUser[]>;
     load(_namespace: string): Promise<VizuComment[]>;
     addComment(_namespace: string, comment: VizuComment): Promise<void>;
     updateComment(_namespace: string, id: string, patch: Partial<VizuComment>): Promise<VizuComment | null>;
@@ -658,6 +677,13 @@ declare class Vizu {
     off<E extends VizuEventName>(event: E, handler: VizuEventHandler<E>): void;
     setUser(user: VizuUser | null): void;
     getUser(): VizuUser | null;
+    /**
+     * 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.
+     */
+    private shouldShowPill;
     /**
      * Cloud-mode write gate. Every entry point that creates or modifies a
      * comment first checks that we have a known user. Without one, the

package/dist/index.js

@@ -12,7 +12,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);
@@ -24,14 +25,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);
@@ -434,6 +437,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)) {
@@ -1183,7 +1206,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>
@@ -1460,7 +1483,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">
@@ -3271,11 +3294,25 @@ 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 });
   }
   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.
+   */
+  shouldShowPill() {
+    if (!(this.storage instanceof CloudStorageAdapter)) return true;
+    return this.user !== null;
+  }
   /**
    * Cloud-mode write gate. Every entry point that creates or modifies a
    * comment first checks that we have a known user. Without one, the
@@ -3639,7 +3676,7 @@ var Vizu = class {
     this.pill.setUser(this.user);
     this.pill.setComments(this.comments);
     this.pill.setMultiSelectState(this.multiSelectMode, this.pendingFingerprints.length);
-    this.pill.show();
+    if (this.shouldShowPill()) this.pill.show();
     this.highlighter = new Highlighter(
       this.root,
       this.opts.ignoreSelectors ?? [],