@unhingged/vizu-core 0.1.13 → 0.1.15

package/dist/index.js

@@ -1239,8 +1239,50 @@ var Popover = class {
     this.mentionPicker = null;
     /** Dismiss handlers wired to document for the open picker; cleared in closeMentionPicker. */
     this.mentionPickerDismiss = null;
+    /** All mentionable users fetched for the open picker — pre-filter list. */
+    this.mentionPickerUsers = [];
+    /** Currently visible subset of `mentionPickerUsers` after the user's filter. */
+    this.mentionPickerFiltered = [];
+    /** Highlighted index in `mentionPickerFiltered`. Up/Down arrows mutate this. */
+    this.mentionPickerSelected = 0;
+    /**
+     * 'manual' = opened from the @ mention button (separate search input).
+     * 'editor' = opened by typing `@` in the editor; filter is derived
+     * from the text after `@` in the editor itself, no search input.
+     */
+    this.mentionPickerMode = "manual";
+    /**
+     * In editor mode: a Range covering `@<query>` in the editor's text.
+     * Used to replace that span with the mention chip on commit, and to
+     * recompute the bounding rect when re-positioning after typing.
+     */
+    this.mentionPickerEditorRange = null;
     this.handleEditorKey = (e) => {
       const editor = e.currentTarget;
+      if (this.mentionPicker && this.mentionPickerMode === "editor") {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          this.moveMentionPickerSelection(1);
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          this.moveMentionPickerSelection(-1);
+          return;
+        }
+        if (e.key === "Enter" || e.key === "Tab") {
+          if (this.mentionPickerFiltered.length > 0) {
+            e.preventDefault();
+            this.commitMentionPickerSelection();
+            return;
+          }
+        }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          this.closeMentionPicker();
+          return;
+        }
+      }
       if (e.key === "#") {
         e.preventDefault();
         const savedRange = this.saveRange();
@@ -1263,6 +1305,21 @@ var Popover = class {
         this.callbacks.onClose();
       }
     };
+    /**
+     * Fires after every keystroke in the editor (post-insertion). Looks
+     * for an `@<query>` pattern adjacent to the caret. If found, opens
+     * (or refreshes) the mention picker in editor mode. If the trigger
+     * disappears (user typed a space, backspaced over @, etc.), closes
+     * the picker.
+     */
+    this.handleEditorInput = () => {
+      const trigger = this.detectMentionTrigger();
+      if (trigger) {
+        void this.openOrUpdateEditorMentionPicker(trigger.range, trigger.query);
+      } else if (this.mentionPicker && this.mentionPickerMode === "editor") {
+        this.closeMentionPicker();
+      }
+    };
     this.handleEditorPaste = (e) => {
       if (this.callbacks.canUploadAttachments()) {
         const items = e.clipboardData?.items ?? null;
@@ -1523,6 +1580,7 @@ var Popover = class {
     const editor = this.el.querySelector(".vz-textarea");
     editor.focus();
     editor.addEventListener("keydown", this.handleEditorKey);
+    editor.addEventListener("input", this.handleEditorInput);
     editor.addEventListener("paste", this.handleEditorPaste);
     const wrap = this.el.querySelector(".vz-editor-wrap");
     if (wrap && this.callbacks.canUploadAttachments()) {
@@ -1552,6 +1610,37 @@ var Popover = class {
       <div class="vz-anchor-list">${chips}</div>
     `;
   }
+  /**
+   * Walk back from the caret looking for the most recent `@` that
+   * starts a mention trigger — must be at start-of-text-node or
+   * preceded by whitespace, and there must be no whitespace between
+   * `@` and the caret. Returns the Range covering `@<query>` plus
+   * the bare query string.
+   */
+  detectMentionTrigger() {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return null;
+    const caret = sel.getRangeAt(0);
+    const node = caret.startContainer;
+    if (node.nodeType !== Node.TEXT_NODE) return null;
+    const text = node.textContent ?? "";
+    const offset = caret.startOffset;
+    for (let i = offset - 1; i >= 0; i--) {
+      const ch = text[i];
+      if (ch === "@") {
+        const prev = i > 0 ? text[i - 1] : "";
+        if (prev !== "" && !/\s/.test(prev)) return null;
+        const query = text.slice(i + 1, offset);
+        if (/\s/.test(query)) return null;
+        const range = document.createRange();
+        range.setStart(node, i);
+        range.setEnd(node, offset);
+        return { range, query };
+      }
+      if (/\s/.test(ch)) return null;
+    }
+    return null;
+  }
   async uploadAndAppend(file) {
     if (!this.callbacks.canUploadAttachments()) return;
     const placeholderId = "upload-" + Math.random().toString(36).slice(2, 9);
@@ -1682,54 +1771,195 @@ var Popover = class {
     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.
+   * Manual-mode picker: opens from the @ mention button. Renders a
+   * search input above the list; the user types into the input to
+   * filter, arrows + Enter to pick. The selection inserts a mention
+   * chip at the editor's current caret (no `@<query>` replacement —
+   * the user didn't type one).
    */
   async openMentionPicker(anchor) {
     this.closeMentionPicker();
     if (!this.callbacks.onMentionSearch) return;
+    this.mentionPickerMode = "manual";
+    this.mentionPickerEditorRange = null;
+    const picker = this.createMentionPickerShell();
+    this.positionMentionPickerByElement(picker, anchor);
+    const users = await this.fetchMentionables();
+    if (this.mentionPicker !== picker) return;
+    this.mentionPickerUsers = users;
+    this.renderMentionPickerBody("");
+    this.positionMentionPickerByElement(picker, anchor);
+    const input = picker.querySelector(".vz-mention-search");
+    input?.focus();
+    this.wireMentionPickerDismiss();
+  }
+  /**
+   * Editor-mode picker: opens because the user typed `@` in the
+   * editor. No search input — the editor IS the search; the query is
+   * the text after `@`. On commit, replaces the `@<query>` range with
+   * the chip.
+   */
+  async openOrUpdateEditorMentionPicker(range, query) {
+    this.mentionPickerEditorRange = range;
+    if (!this.mentionPicker || this.mentionPickerMode !== "editor") {
+      this.closeMentionPicker();
+      this.mentionPickerMode = "editor";
+      const picker = this.createMentionPickerShell({ showSearch: false });
+      this.positionMentionPickerByRange(picker, range);
+      const users = await this.fetchMentionables();
+      if (this.mentionPicker !== picker) return;
+      this.mentionPickerUsers = users;
+      this.renderMentionPickerBody(query);
+      this.positionMentionPickerByRange(picker, range);
+      this.wireMentionPickerDismiss();
+      return;
+    }
+    this.renderMentionPickerBody(query);
+    this.positionMentionPickerByRange(this.mentionPicker, range);
+  }
+  /**
+   * Build the picker DOM scaffold and attach it to the popover. Does
+   * NOT fetch users or render the body — caller's responsibility.
+   * Search input is hidden in editor mode where the user already has
+   * a perfectly good text-entry surface (the editor itself).
+   */
+  createMentionPickerShell({ showSearch = true } = {}) {
     const picker = document.createElement("div");
     picker.className = "vz-mention-picker";
     picker.setAttribute("data-vz-ignore", "");
-    picker.innerHTML = `<div class="vz-mention-loading">Loading\u2026</div>`;
+    picker.innerHTML = `
+      ${showSearch ? `<input class="vz-mention-search" type="text" placeholder="Search teammates\u2026" autocomplete="off" spellcheck="false" />` : ""}
+      <div class="vz-mention-list" data-vz="mention-list">
+        <div class="vz-mention-loading">Loading\u2026</div>
+      </div>
+    `;
     this.el.appendChild(picker);
     this.mentionPicker = picker;
-    this.positionMentionPicker(picker, anchor);
-    let users = [];
+    this.mentionPickerFiltered = [];
+    this.mentionPickerSelected = 0;
+    picker.addEventListener("mousemove", (e) => {
+      const btn = e.target?.closest(".vz-mention-item");
+      if (!btn) return;
+      const idx = Number(btn.getAttribute("data-mention-index") ?? -1);
+      if (idx >= 0 && idx !== this.mentionPickerSelected) {
+        this.mentionPickerSelected = idx;
+        this.refreshMentionPickerHighlight();
+      }
+    });
+    picker.addEventListener("click", (e) => {
+      const btn = e.target?.closest(".vz-mention-item");
+      if (!btn) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const idx = Number(btn.getAttribute("data-mention-index") ?? -1);
+      if (idx >= 0) {
+        this.mentionPickerSelected = idx;
+        this.commitMentionPickerSelection();
+      }
+    });
+    if (showSearch) {
+      const input = picker.querySelector(".vz-mention-search");
+      input?.addEventListener("input", () => this.renderMentionPickerBody(input.value));
+      input?.addEventListener("keydown", (e) => {
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          this.moveMentionPickerSelection(1);
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          this.moveMentionPickerSelection(-1);
+        } else if (e.key === "Enter" || e.key === "Tab") {
+          if (this.mentionPickerFiltered.length > 0) {
+            e.preventDefault();
+            this.commitMentionPickerSelection();
+          }
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          this.closeMentionPicker();
+        }
+      });
+    }
+    return picker;
+  }
+  /** Fetch the mentionable list. Swallows errors → []. */
+  async fetchMentionables() {
+    if (!this.callbacks.onMentionSearch) return [];
     try {
-      users = await this.callbacks.onMentionSearch();
+      return await this.callbacks.onMentionSearch();
     } catch {
+      return [];
     }
-    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();
+  }
+  /**
+   * Re-filter the cached users by `query`, render the list, reset
+   * selected to 0. Called on every search input change and on every
+   * editor input event while in editor mode.
+   */
+  renderMentionPickerBody(query) {
+    const picker = this.mentionPicker;
+    if (!picker) return;
+    const list = picker.querySelector('[data-vz="mention-list"]');
+    if (!list) return;
+    const q = query.toLowerCase().trim();
+    this.mentionPickerFiltered = q ? this.mentionPickerUsers.filter((u) => u.name.toLowerCase().includes(q)) : this.mentionPickerUsers.slice();
+    this.mentionPickerSelected = 0;
+    if (this.mentionPickerFiltered.length === 0) {
+      list.innerHTML = `<div class="vz-mention-empty">${this.mentionPickerUsers.length === 0 ? "No teammates to mention yet." : "No teammates match."}</div>`;
       return;
     }
-    const itemsHtml = users.map((u) => {
+    list.innerHTML = this.mentionPickerFiltered.map((u, i) => {
       const avatar = u.avatarUrl ? `<img class="vz-mention-avatar" src="${escapeHtml(u.avatarUrl)}" alt="" />` : `<span class="vz-mention-avatar vz-mention-avatar-initials">${escapeHtml(initials(u.name) || "?")}</span>`;
-      return `<button class="vz-mention-item" 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>`;
+      return `<button class="vz-mention-item${i === 0 ? " is-selected" : ""}" type="button" data-mention-index="${i}">${avatar}<span class="vz-mention-item-name">${escapeHtml(u.name)}</span></button>`;
     }).join("");
-    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();
+  }
+  moveMentionPickerSelection(delta) {
+    if (this.mentionPickerFiltered.length === 0) return;
+    const n = this.mentionPickerFiltered.length;
+    this.mentionPickerSelected = (this.mentionPickerSelected + delta + n) % n;
+    this.refreshMentionPickerHighlight();
+  }
+  refreshMentionPickerHighlight() {
+    const picker = this.mentionPicker;
+    if (!picker) return;
+    const items = picker.querySelectorAll(".vz-mention-item");
+    items.forEach((el, i) => el.classList.toggle("is-selected", i === this.mentionPickerSelected));
+    items[this.mentionPickerSelected]?.scrollIntoView({ block: "nearest" });
+  }
+  commitMentionPickerSelection() {
+    const user = this.mentionPickerFiltered[this.mentionPickerSelected];
+    if (!user) return;
+    if (this.mentionPickerMode === "editor" && this.mentionPickerEditorRange) {
+      this.replaceRangeWithMentionChip(this.mentionPickerEditorRange, user);
+    } else {
+      this.insertMentionChip(user);
+    }
+    this.closeMentionPicker();
+  }
+  /**
+   * Swap a Range covering `@<query>` for a mention chip + trailing
+   * space, then place the caret after the space so the user can keep
+   * typing. Used only in editor-trigger mode.
+   */
+  replaceRangeWithMentionChip(range, user) {
+    const editor = this.el.querySelector(".vz-textarea");
+    if (!editor) return;
+    const chip = document.createElement("span");
+    chip.className = "vz-chip vz-chip-mention";
+    chip.contentEditable = "false";
+    chip.setAttribute("data-mention-id", user.id);
+    chip.textContent = "@" + user.name;
+    range.deleteContents();
+    range.insertNode(chip);
+    const space = document.createTextNode(" ");
+    chip.after(space);
+    const sel = window.getSelection();
+    if (sel) {
+      const after = document.createRange();
+      after.setStartAfter(space);
+      after.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(after);
+    }
+    editor.focus();
   }
   /** Wires Esc + outside-click handlers to close the open picker. */
   wireMentionPickerDismiss() {
@@ -1743,6 +1973,10 @@ var Popover = class {
     const onOutside = (e) => {
       if (!this.mentionPicker) return;
       if (this.mentionPicker.contains(e.target)) return;
+      if (this.mentionPickerMode === "editor") {
+        const editor = this.el.querySelector(".vz-textarea");
+        if (editor && editor.contains(e.target)) return;
+      }
       this.closeMentionPicker();
     };
     document.addEventListener("keydown", onKey, true);
@@ -1761,18 +1995,23 @@ var Popover = class {
       this.mentionPicker.remove();
       this.mentionPicker = null;
     }
+    this.mentionPickerFiltered = [];
+    this.mentionPickerSelected = 0;
+    this.mentionPickerEditorRange = 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) {
+  /** Position the picker below the given anchor (the @ mention button). */
+  positionMentionPickerByElement(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`;
+    picker.style.left = `${btnRect.left - popRect.left}px`;
+    picker.style.top = `${btnRect.bottom - popRect.top + 4}px`;
+  }
+  /** Position the picker below the `@<query>` text range in the editor. */
+  positionMentionPickerByRange(picker, range) {
+    const popRect = this.el.getBoundingClientRect();
+    const rect = range.getBoundingClientRect();
+    picker.style.left = `${rect.left - popRect.left}px`;
+    picker.style.top = `${rect.bottom - popRect.top + 4}px`;
   }
   /**
    * Insert a mention chip for the given user into the editor at the
@@ -2651,6 +2890,26 @@ var STYLES = `
   flex-direction: column;
   gap: 1px;
 }
+.vz-mention-search {
+  width: 100%;
+  padding: 7px 9px;
+  margin-bottom: 4px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--vz-border, rgba(255,255,255,0.08));
+  border-radius: 6px;
+  color: #fafafa;
+  font-size: 13px;
+  outline: none;
+  box-sizing: border-box;
+}
+.vz-mention-search:focus { border-color: var(--vz-accent, #ff8b6e); }
+.vz-mention-search::placeholder { color: var(--vz-text-muted); }
+.vz-mention-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-height: 0;
+}
 .vz-mention-loading,
 .vz-mention-empty {
   padding: 10px 12px;
@@ -2672,9 +2931,9 @@ var STYLES = `
   cursor: pointer;
   transition: background 80ms;
 }
-.vz-mention-item:hover,
+.vz-mention-item.is-selected,
 .vz-mention-item:focus-visible {
-  background: var(--vz-bg-hover, rgba(255,255,255,0.06));
+  background: var(--vz-bg-hover, rgba(255,255,255,0.08));
   outline: none;
 }
 .vz-mention-avatar {
@@ -2977,7 +3236,9 @@ var STYLES = `
 .vz-ref:hover { background: color-mix(in srgb, var(--vz-accent) 30%, var(--vz-bg-hover)); transform: translateY(-1px); }
 .vz-ref::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--vz-accent); flex-shrink: 0; }
 
-/* Inline @mention chip (rendered inside displayed comments) */
+/* Inline @mention chip (rendered inside displayed comments). user-select
+ * prevents the user from selecting the chip's text and editing it; the
+ * displayed comment is intentionally read-only after save. */
 .vz-mention {
   display: inline-flex; align-items: center;
   padding: 1px 8px 1px 8px;
@@ -2987,13 +3248,21 @@ var STYLES = `
   font-size: 12px; font-weight: 600;
   vertical-align: baseline;
   margin: 0 1px;
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: default;
 }
 
-/* Mention chip inside the editor (contenteditable=false token) */
+/* Mention chip inside the editor (contenteditable=false token). Same
+ * non-selection rules as .vz-mention so the chip stays atomic even
+ * inside the editable surface \u2014 caret can land before/after but not
+ * inside, no partial-text edit. */
 .vz-chip-mention {
   background: color-mix(in srgb, var(--vz-accent) 16%, var(--vz-bg-hover));
   color: var(--vz-accent);
   font-weight: 600;
+  user-select: none;
+  -webkit-user-select: none;
 }
 .vz-chip-mention::before { display: none; }
 
@@ -3687,10 +3956,29 @@ var Vizu = class {
       replies: [...this.comments[idx].replies ?? [], reply]
     };
     this.comments[idx] = updated;
-    if (this.storage.addReply) {
-      await this.storage.addReply(this.opts.namespace, commentId, reply);
-    } else {
-      await this.storage.updateComment(this.opts.namespace, commentId, { replies: updated.replies });
+    try {
+      if (this.storage.addReply) {
+        await this.storage.addReply(this.opts.namespace, commentId, reply);
+      } else {
+        await this.storage.updateComment(this.opts.namespace, commentId, { replies: updated.replies });
+      }
+    } catch (err) {
+      const cur = this.comments[idx];
+      this.comments[idx] = {
+        ...cur,
+        replies: (cur.replies ?? []).filter((r) => r.id !== reply.id)
+      };
+      const code = err?.code ?? "";
+      const status = err?.status;
+      const msg = status === 403 || code === "forbidden" ? "Reply failed \u2014 you don't have permission." : status === 401 || code === "auth_required" ? "Reply failed \u2014 please sign in again." : "Reply failed. Please try again.";
+      this.pill?.toast(msg);
+      this.refreshUi();
+      if (this.popover?.isOpen()) {
+        const anchors = this.popover.getAnchors();
+        if (anchors[0]) this.popover.update(this.commentsForElement(anchors[0]));
+      }
+      if (typeof console !== "undefined") console.warn("[vizu] addReply failed", err);
+      return null;
     }
     this.bus.emit("comment:updated", { comment: updated });
     this.refreshUi();