superdoc 2.5.1 → 2.6.0-next.10

package/dist/superdoc.es.js

@@ -5693,7 +5693,7 @@ function useComment(params) {
 	const fileType = params.fileType;
 	const createdAtVersionNumber = params.createdAtVersionNumber;
 	const isInternal = ref(params.isInternal !== void 0 ? params.isInternal : true);
-	const mentions = ref([]);
+	const mentions = ref(Array.isArray(params.mentions) ? params.mentions : []);
 	const commentElement = ref(null);
 	const isFocused = ref(params.isFocused || false);
 	const creatorId = ref(params.creatorId ?? null);
@@ -7253,6 +7253,7 @@ var useCommentsStore = defineStore("comments", () => {
 	const overlappedIds = /* @__PURE__ */ new Set([]);
 	const suppressInternalExternal = ref(true);
 	const currentCommentText = ref("");
+	const currentCommentMentions = ref([]);
 	const commentsList = ref([]);
 	const reviewDirectoryList = shallowRef([]);
 	let priorTrackedChangeThreadIndex = /* @__PURE__ */ new Map();
@@ -7442,9 +7443,10 @@ var useCommentsStore = defineStore("comments", () => {
 	*/
 	const getComment = (id) => {
 		if (id === void 0 || id === null) return null;
-		const directMatch = commentsList.value.find((c) => c.commentId == id || c.importedId == id || c.trackedChangeAnchorKey == id || c?.trackedChange && buildTrackedChangeImportedPositionId(c.importedId) == id);
-		if (directMatch) return directMatch;
-		return reviewDirectoryList.value.find((c) => c.commentId == id || c.importedId == id || c.trackedChangeAnchorKey == id || c?.trackedChange && buildTrackedChangeImportedPositionId(c.importedId) == id) || getTrackedChangeCommentByPositionAlias(id);
+		const byPrimaryId = (c) => c.commentId == id;
+		const byAliasId = (c) => c.importedId == id || c.trackedChangeAnchorKey == id || c?.trackedChange && buildTrackedChangeImportedPositionId(c.importedId) == id;
+		const findIn = (list) => list.find(byPrimaryId) ?? list.find(byAliasId);
+		return findIn(commentsList.value) ?? findIn(reviewDirectoryList.value) ?? getTrackedChangeCommentByPositionAlias(id);
 	};
 	const getThreadParent = (comment) => {
 		if (!comment?.parentCommentId) return comment;
@@ -8334,6 +8336,7 @@ var useCommentsStore = defineStore("comments", () => {
 	const removePendingComment = (superdoc) => {
 		const hadPending = !!pendingComment.value;
 		currentCommentText.value = "";
+		currentCommentMentions.value = [];
 		pendingComment.value = null;
 		pendingV2CommentTarget.value = null;
 		superdocStore.selectionPosition = null;
@@ -8353,16 +8356,19 @@ var useCommentsStore = defineStore("comments", () => {
 		const v2Adapter = !skipEditorUpdate && !isHydration ? getV2CommentsAdapter(superdoc) : null;
 		if (v2Adapter && !comment.trackedChange) {
 			const text = normalizeV2CommentDraftText(pendingComment.value ? currentCommentText.value : comment.commentText);
+			const mentions = pendingComment.value ? currentCommentMentions.value : comment.mentions ?? [];
 			const target = pendingComment.value ? pendingV2CommentTarget.value : null;
 			const parentCommentId = comment.parentCommentId ? String(comment.parentCommentId) : pendingComment.value ? null : null;
 			return (async () => {
 				try {
 					return await (parentCommentId ? v2Adapter.reply({
 						parentCommentId,
-						text
+						text,
+						...mentions.length ? { mentions } : {}
 					}) : v2Adapter.commitPendingComment({
 						text,
-						target
+						target,
+						...mentions.length ? { mentions } : {}
 					}));
 				} catch (err) {
 					return {
@@ -8823,7 +8829,7 @@ var useCommentsStore = defineStore("comments", () => {
 	*   - rejection preserves rows and emits a rejected `comments-update` event
 	*   - committed-but-refresh-failed surfaces honestly (no reconcile with `[]`)
 	*/
-	const replyCommentV2 = async ({ superdoc, parentCommentId, text } = {}) => {
+	const replyCommentV2 = async ({ superdoc, parentCommentId, text, mentions = [] } = {}) => {
 		if (commentsAreReadOnly()) return readOnlyMutationOutcome();
 		const v2Adapter = getV2CommentsAdapter(superdoc);
 		if (!v2Adapter) return {
@@ -8848,7 +8854,8 @@ var useCommentsStore = defineStore("comments", () => {
 			fileId,
 			operation: () => v2Adapter.reply({
 				parentCommentId: normalizedParent,
-				text: plainText
+				text: plainText,
+				...mentions.length ? { mentions } : {}
 			}),
 			eventType: COMMENT_EVENTS.ADD,
 			rejectionFallbackReason: "v2-reply-failed",
@@ -9304,6 +9311,7 @@ var useCommentsStore = defineStore("comments", () => {
 		};
 		const applyUpdate = (existing, input) => {
 			existing.commentText = input.commentText ?? existing.commentText;
+			existing.mentions = Array.isArray(input.mentions) ? input.mentions : [];
 			existing.isInternal = typeof input.isInternal === "boolean" ? input.isInternal : existing.isInternal;
 			if (typeof input.resolvedTime === "number") {
 				existing.resolvedTime = input.resolvedTimeWasSynthesized === true && typeof existing.resolvedTime === "number" ? existing.resolvedTime : input.resolvedTime;
@@ -9353,6 +9361,58 @@ var useCommentsStore = defineStore("comments", () => {
 		return { added: addedComments[addedComments.length - 1] ?? null };
 	});
 	/**
+	* Reconcile and publish a root comment created by the private V2 context menu.
+	* That path owns selection capture, while this store remains the sole owner
+	* of shared comment rows and public comments-update events.
+	*/
+	const announceV2CommentCreated = async ({ superdoc, commentId } = {}) => {
+		const id = normalizeCommentId(commentId);
+		const adapter = getV2CommentsAdapter(superdoc);
+		const commentsApi = superdoc?.activeEditor?.doc?.comments;
+		if (!id) return {
+			ok: false,
+			reason: "comment-id-missing"
+		};
+		if (!adapter || !isCurrentV2CommentsAdapter(adapter)) return {
+			ok: false,
+			reason: "comments-adapter-stale"
+		};
+		if (typeof commentsApi?.get !== "function") return {
+			ok: false,
+			reason: "document-api-unavailable"
+		};
+		let item;
+		try {
+			item = await commentsApi.get({ commentId: id });
+		} catch (err) {
+			return {
+				ok: false,
+				reason: "comment-read-failed",
+				detail: err?.message ?? String(err)
+			};
+		}
+		if (!isCurrentV2CommentsAdapter(adapter)) return {
+			ok: false,
+			reason: "comments-adapter-stale"
+		};
+		const comment = reconcileCommentsFromV2({
+			superdoc,
+			adapter,
+			documentId: adapter.documentId,
+			items: [item],
+			pruneStale: false
+		})?.added ?? commentsList.value.find((candidate) => String(candidate?.commentId ?? "") === id || String(candidate?.importedId ?? "") === id) ?? null;
+		const event = {
+			type: COMMENT_EVENTS.ADD,
+			comment: comment?.getValues?.() ?? null
+		};
+		superdoc?.emit?.("comments-update", event);
+		return {
+			ok: true,
+			comment
+		};
+	};
+	/**
 	* Cancel the pending comment
 	*
 	* @returns {void}
@@ -9553,7 +9613,7 @@ var useCommentsStore = defineStore("comments", () => {
 		});
 		commentsList.value = commentsList.value.filter((comment) => !removedComments.includes(comment));
 		if (removedAliasIds.size) {
-			const nextPositions = { ...editorCommentPositions.value || {} };
+			const nextPositions = { ...editorCommentPositions.value };
 			removedAliasIds.forEach((id) => {
 				delete nextPositions[id];
 			});
@@ -11074,6 +11134,7 @@ var useCommentsStore = defineStore("comments", () => {
 		suppressInternalExternal,
 		pendingComment,
 		currentCommentText,
+		currentCommentMentions,
 		commentsList,
 		reviewDirectoryList,
 		isCommentsListVisible,
@@ -11149,6 +11210,7 @@ var useCommentsStore = defineStore("comments", () => {
 		getV2CommentsAdapter,
 		applyReviewWindowFromV2,
 		reconcileCommentsFromV2,
+		announceV2CommentCreated,
 		isV2EditorActive,
 		replyCommentV2,
 		editCommentV2,
@@ -11297,13 +11359,13 @@ function useUiFontFamily() {
 //#endregion
 //#region src/components/CommentsLayer/CommentsDropdown.vue
 var _hoisted_1$31 = { class: "comments-dropdown" };
-var _hoisted_2$24 = ["onClick"];
-var _hoisted_3$20 = {
+var _hoisted_2$25 = ["onClick"];
+var _hoisted_3$21 = {
 	key: 0,
 	class: "comments-dropdown__option-icon"
 };
-var _hoisted_4$12 = ["innerHTML"];
-var _hoisted_5$8 = { class: "comments-dropdown__option-label" };
+var _hoisted_4$13 = ["innerHTML"];
+var _hoisted_5$9 = { class: "comments-dropdown__option-label" };
 var CommentsDropdown_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 	__name: "CommentsDropdown",
 	props: {
@@ -11443,13 +11505,13 @@ var CommentsDropdown_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 					key: option.key,
 					class: normalizeClass(["comments-dropdown__option", { "sd-disabled": option.disabled }]),
 					onClick: ($event) => onOptionClick(option)
-				}, [hasIcon(option) ? (openBlock(), createElementBlock("span", _hoisted_3$20, [option.iconString ? (openBlock(), createElementBlock("span", {
+				}, [hasIcon(option) ? (openBlock(), createElementBlock("span", _hoisted_3$21, [option.iconString ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					innerHTML: option.iconString
-				}, null, 8, _hoisted_4$12)) : (openBlock(), createBlock(unref(OptionIcon), {
+				}, null, 8, _hoisted_4$13)) : (openBlock(), createBlock(unref(OptionIcon), {
 					key: 1,
 					option
-				}, null, 8, ["option"]))])) : createCommentVNode("", true), createElementVNode("span", _hoisted_5$8, toDisplayString(option.label), 1)], 10, _hoisted_2$24);
+				}, null, 8, ["option"]))])) : createCommentVNode("", true), createElementVNode("span", _hoisted_5$9, toDisplayString(option.label), 1)], 10, _hoisted_2$25);
 			}), 128))], 4)) : createCommentVNode("", true)]))]);
 		};
 	}
@@ -11457,9 +11519,9 @@ var CommentsDropdown_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 //#endregion
 //#region src/components/CommentsLayer/InternalDropdown.vue
 var _hoisted_1$30 = { class: "sd-comment-option" };
-var _hoisted_2$23 = ["innerHTML"];
-var _hoisted_3$19 = { class: "sd-option-state" };
-var _hoisted_4$11 = ["innerHTML"];
+var _hoisted_2$24 = ["innerHTML"];
+var _hoisted_3$20 = { class: "sd-option-state" };
+var _hoisted_4$12 = ["innerHTML"];
 var InternalDropdown_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 	__name: "InternalDropdown",
 	props: {
@@ -11531,12 +11593,12 @@ var InternalDropdown_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 					createElementVNode("div", {
 						class: "sd-active-icon",
 						innerHTML: activeIcon.value
-					}, null, 8, _hoisted_2$23),
-					createElementVNode("div", _hoisted_3$19, toDisplayString(getState.value), 1),
+					}, null, 8, _hoisted_2$24),
+					createElementVNode("div", _hoisted_3$20, toDisplayString(getState.value), 1),
 					createElementVNode("div", {
 						class: "sd-dropdown-caret",
 						innerHTML: unref(superdocIcons).caretDown
-					}, null, 8, _hoisted_4$11)
+					}, null, 8, _hoisted_4$12)
 				])]),
 				_: 1
 			}, 8, ["disabled", "content-style"])], 4);
@@ -11686,8 +11748,8 @@ var isAllowed = (permission, role, isInternal, context = {}) => {
 //#endregion
 //#region src/components/general/Avatar.vue
 var _hoisted_1$29 = { class: "user-container" };
-var _hoisted_2$22 = ["src"];
-var _hoisted_3$18 = {
+var _hoisted_2$23 = ["src"];
+var _hoisted_3$19 = {
 	key: 1,
 	class: "user-bg"
 };
@@ -11712,21 +11774,21 @@ var Avatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 				key: 0,
 				class: "user-bg",
 				src: __props.user.image.startsWith("http") ? __props.user.image : `data:image/png;base64,${__props.user.image}`
-			}, null, 8, _hoisted_2$22)) : (openBlock(), createElementBlock("span", _hoisted_3$18, toDisplayString(getInitials(__props.user.name, __props.user.email)), 1))]);
+			}, null, 8, _hoisted_2$23)) : (openBlock(), createElementBlock("span", _hoisted_3$19, toDisplayString(getInitials(__props.user.name, __props.user.email)), 1))]);
 		};
 	}
 }, [["__scopeId", "data-v-c95b2073"]]);
 //#endregion
 //#region src/components/CommentsLayer/CommentHeader.vue
 var _hoisted_1$28 = { class: "card-section comment-header" };
-var _hoisted_2$21 = { class: "comment-header-left" };
-var _hoisted_3$17 = { class: "user-info" };
-var _hoisted_4$10 = { class: "user-name" };
-var _hoisted_5$7 = {
+var _hoisted_2$22 = { class: "comment-header-left" };
+var _hoisted_3$18 = { class: "user-info" };
+var _hoisted_4$11 = { class: "user-name" };
+var _hoisted_5$8 = {
 	key: 0,
 	class: "imported-tag"
 };
-var _hoisted_6$6 = {
+var _hoisted_6$7 = {
 	key: 0,
 	class: "user-timestamp"
 };
@@ -11951,10 +12013,10 @@ var CommentHeader_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 			return user;
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$28, [createElementVNode("div", _hoisted_2$21, [createVNode(Avatar_default, {
+			return openBlock(), createElementBlock("div", _hoisted_1$28, [createElementVNode("div", _hoisted_2$22, [createVNode(Avatar_default, {
 				user: getCurrentUser.value,
 				class: "avatar"
-			}, null, 8, ["user"]), createElementVNode("div", _hoisted_3$17, [createElementVNode("div", _hoisted_4$10, [createTextVNode(toDisplayString(getCurrentUser.value.name), 1), isImported.value ? (openBlock(), createElementBlock("span", _hoisted_5$7, "IMPORTED")) : createCommentVNode("", true)]), props.comment.createdTime ? (openBlock(), createElementBlock("div", _hoisted_6$6, toDisplayString(unref(formatDate)(props.comment.createdTime)), 1)) : createCommentVNode("", true)])]), createElementVNode("div", { class: normalizeClass(["overflow-menu", { "is-visible": props.isActive }]) }, [
+			}, null, 8, ["user"]), createElementVNode("div", _hoisted_3$18, [createElementVNode("div", _hoisted_4$11, [createTextVNode(toDisplayString(getCurrentUser.value.name), 1), isImported.value ? (openBlock(), createElementBlock("span", _hoisted_5$8, "IMPORTED")) : createCommentVNode("", true)]), props.comment.createdTime ? (openBlock(), createElementBlock("div", _hoisted_6$7, toDisplayString(unref(formatDate)(props.comment.createdTime)), 1)) : createCommentVNode("", true)])]), createElementVNode("div", { class: normalizeClass(["overflow-menu", { "is-visible": props.isActive }]) }, [
 				allowResolve.value ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: normalizeClass(["overflow-menu__icon", { "sd-is-disabled": Boolean(__props.resolveDisabledReason) }]),
@@ -12003,8 +12065,24 @@ var CommentHeader_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 //#endregion
 //#region src/components/CommentsLayer/CommentInput.vue
 var _hoisted_1$27 = { class: "input-section" };
-var TEXTAREA_MIN_HEIGHT = 28;
-var TEXTAREA_MAX_HEIGHT = 132;
+var _hoisted_2$21 = { class: "comment-composer" };
+var _hoisted_3$17 = [
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant"
+];
+var _hoisted_4$10 = [
+	"id",
+	"aria-selected",
+	"data-sd-comment-mention-option",
+	"onMousedown"
+];
+var _hoisted_5$7 = { class: "comment-mention-option__name" };
+var _hoisted_6$6 = {
+	key: 0,
+	class: "comment-mention-option__email"
+};
+var commentInputSequence = 0;
 var CommentInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 	__name: "CommentInput",
 	props: {
@@ -12032,15 +12110,23 @@ var CommentInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 	},
 	emits: ["focus"],
 	setup(__props, { expose: __expose, emit: __emit }) {
+		const TEXTAREA_MIN_HEIGHT = 28;
+		const TEXTAREA_MAX_HEIGHT = 132;
 		const emit = __emit;
-		const { currentCommentText } = storeToRefs(useCommentsStore());
+		const props = __props;
+		const { currentCommentText, currentCommentMentions } = storeToRefs(useCommentsStore());
 		const inputRef = ref(null);
+		const mentionStart = ref(null);
+		const mentionQuery = ref("");
+		const highlightedMentionIndex = ref(0);
+		const mentionListId = `sd-comment-mention-list-${++commentInputSequence}`;
 		const handleFocusChange = (focused) => emit("focus", focused);
-		const focus = () => {
-			inputRef.value?.focus?.();
+		const getInputElement = () => inputRef.value;
+		const focus = (options) => {
+			getInputElement()?.focus?.(options);
 		};
 		const syncInputHeight = () => {
-			const input = inputRef.value;
+			const input = getInputElement();
 			if (!input) return;
 			input.style.height = `${TEXTAREA_MIN_HEIGHT}px`;
 			const scrollHeight = input.scrollHeight || TEXTAREA_MIN_HEIGHT;
@@ -12071,6 +12157,79 @@ var CommentInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 				currentCommentText.value = textToHtml(value);
 			}
 		});
+		const displayName = (user) => user?.name?.trim() || user?.email?.trim() || "";
+		const userKey = (user) => String(user?.id ?? user?.email ?? user?.name ?? "");
+		const isViewer = (user) => user?.role === "viewer" || user?.access === "viewer" || typeof user?.access === "object" && user.access?.role === "viewer";
+		const mentionIdentity = (user) => ({
+			...user?.id != null ? { id: user.id } : {},
+			...user?.name != null ? { name: user.name } : {},
+			...user?.email != null ? { email: user.email } : {}
+		});
+		const mentionSuggestions = computed(() => {
+			if (mentionStart.value == null) return [];
+			const needle = mentionQuery.value.toLocaleLowerCase();
+			return props.users.filter((user) => !isViewer(user) && displayName(user)).filter((user) => {
+				const name = displayName(user).toLocaleLowerCase();
+				const email = user?.email?.toLocaleLowerCase() ?? "";
+				return !needle || name.startsWith(needle) || email.startsWith(needle);
+			}).slice(0, 8);
+		});
+		const mentionListOpen = computed(() => mentionSuggestions.value.length > 0);
+		const activeMentionOptionId = computed(() => {
+			const user = mentionSuggestions.value[highlightedMentionIndex.value];
+			return user ? `${mentionListId}-${userKey(user)}` : void 0;
+		});
+		const updateMentionQuery = (caret) => {
+			const beforeCaret = commentDraft.value.slice(0, caret);
+			const match = /(?:^|\s)@([^\s@]{0,40})$/.exec(beforeCaret);
+			mentionStart.value = match ? caret - match[1].length - 1 : null;
+			mentionQuery.value = match?.[1] ?? "";
+			highlightedMentionIndex.value = 0;
+		};
+		const onInput = (event) => {
+			currentCommentMentions.value = currentCommentMentions.value.filter((user) => commentDraft.value.includes(`@${displayName(user)}`));
+			updateMentionQuery(event.target.selectionStart ?? commentDraft.value.length);
+			syncInputHeight();
+		};
+		const selectMention = (user) => {
+			if (mentionStart.value == null) return;
+			const start = mentionStart.value;
+			const caret = inputRef.value?.selectionStart ?? commentDraft.value.length;
+			const token = `@${displayName(user)}`;
+			const identity = mentionIdentity(user);
+			commentDraft.value = `${commentDraft.value.slice(0, start)}${token}${commentDraft.value.slice(caret)}`;
+			if (!currentCommentMentions.value.some((selected) => userKey(selected) === userKey(identity))) currentCommentMentions.value = [...currentCommentMentions.value, identity];
+			mentionStart.value = null;
+			mentionQuery.value = "";
+			nextTick(() => {
+				const nextCaret = start + token.length;
+				inputRef.value?.focus();
+				inputRef.value?.setSelectionRange(nextCaret, nextCaret);
+				syncInputHeight();
+			});
+		};
+		const onKeydown = (event) => {
+			if (!mentionListOpen.value) return;
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				event.stopPropagation();
+				const direction = event.key === "ArrowDown" ? 1 : -1;
+				highlightedMentionIndex.value = (highlightedMentionIndex.value + direction + mentionSuggestions.value.length) % mentionSuggestions.value.length;
+				return;
+			}
+			if (event.key === "Enter") {
+				event.preventDefault();
+				event.stopPropagation();
+				const user = mentionSuggestions.value[highlightedMentionIndex.value];
+				if (user) selectMention(user);
+				return;
+			}
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				mentionStart.value = null;
+			}
+		};
 		onMounted(scheduleInputHeightSync);
 		watch(currentCommentText, scheduleInputHeightSync);
 		__expose({ focus });
@@ -12080,20 +12239,45 @@ var CommentInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 				config: __props.config,
 				comment: __props.comment,
 				"is-pending-input": true
-			}, null, 8, ["config", "comment"])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(["comment-entry", { "sd-input-active": __props.isFocused }]) }, [withDirectives(createElementVNode("textarea", {
+			}, null, 8, ["config", "comment"])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(["comment-entry", { "sd-input-active": __props.isFocused }]) }, [createElementVNode("div", _hoisted_2$21, [withDirectives(createElementVNode("textarea", {
 				ref_key: "inputRef",
 				ref: inputRef,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => commentDraft.value = $event),
 				class: "superdoc-field",
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-expanded": mentionListOpen.value,
+				"aria-controls": mentionListOpen.value ? mentionListId : void 0,
+				"aria-activedescendant": activeMentionOptionId.value,
+				"data-sd-comment-mention-input": "",
+				"data-sd-comment-text": "",
 				placeholder: "Add a comment",
-				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => commentDraft.value = $event),
 				rows: "1",
-				onInput: syncInputHeight,
+				onInput,
+				onKeydown,
 				onFocus: _cache[1] || (_cache[1] = ($event) => handleFocusChange(true)),
 				onBlur: _cache[2] || (_cache[2] = ($event) => handleFocusChange(false))
-			}, null, 544), [[vModelText, commentDraft.value]])], 2)]);
+			}, null, 40, _hoisted_3$17), [[vModelText, commentDraft.value]]), mentionListOpen.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: mentionListId,
+				class: "comment-mention-list",
+				role: "listbox",
+				"data-sd-comment-mention-list": ""
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(mentionSuggestions.value, (user, index) => {
+				return openBlock(), createElementBlock("button", {
+					id: `${mentionListId}-${userKey(user)}`,
+					key: userKey(user),
+					type: "button",
+					class: normalizeClass(["comment-mention-option", { "comment-mention-option--active": index === highlightedMentionIndex.value }]),
+					role: "option",
+					"aria-selected": index === highlightedMentionIndex.value,
+					"data-sd-comment-mention-option": userKey(user),
+					onMousedown: withModifiers(($event) => selectMention(user), ["prevent"])
+				}, [createElementVNode("span", _hoisted_5$7, toDisplayString(displayName(user)), 1), user.email ? (openBlock(), createElementBlock("span", _hoisted_6$6, toDisplayString(user.email), 1)) : createCommentVNode("", true)], 42, _hoisted_4$10);
+			}), 128))])) : createCommentVNode("", true)])], 2)]);
 		};
 	}
-}, [["__scopeId", "data-v-cc54b489"]]);
+}, [["__scopeId", "data-v-87953125"]]);
 //#endregion
 //#region src/components/CommentsLayer/CommentDialog.vue
 var _hoisted_1$26 = [
@@ -12248,7 +12432,7 @@ var CommentDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 		const superdocStore = useSuperdocStore();
 		const commentsStore = useCommentsStore();
 		const { addComment, cancelComment, deleteComment, getCommentAliasIds, removePendingComment, getCommentDocumentId, requestInstantSidebarAlignment, resolveCommentPositionEntry, clearInstantSidebarAlignment, setActiveFloatingCommentInstance } = commentsStore;
-		const { suppressInternalExternal, getConfig, activeComment, activeFloatingCommentInstanceId, floatingCommentsOffset, pendingComment, currentCommentText, isDebugging, editingCommentId, editorCommentPositions, isCommentHighlighted } = storeToRefs(commentsStore);
+		const { suppressInternalExternal, getConfig, activeComment, activeFloatingCommentInstanceId, floatingCommentsOffset, pendingComment, currentCommentText, currentCommentMentions, isDebugging, editingCommentId, editorCommentPositions, isCommentHighlighted } = storeToRefs(commentsStore);
 		const isInternal = ref(true);
 		const commentInput = ref(null);
 		const editCommentInputs = ref(/* @__PURE__ */ new Map());
@@ -12492,6 +12676,7 @@ var CommentDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 			if (!active) {
 				if (isReplying.value || isEditingCommentInThisThread()) {
 					currentCommentText.value = "";
+					currentCommentMentions.value = [];
 					editingCommentId.value = null;
 				}
 				textExpanded.value = false;
@@ -12672,7 +12857,8 @@ var CommentDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 					const outcome = await commentsStore.replyCommentV2({
 						superdoc: proxy.$superdoc,
 						parentCommentId,
-						text: currentCommentText.value
+						text: currentCommentText.value,
+						...currentCommentMentions.value.length ? { mentions: currentCommentMentions.value } : {}
 					});
 					if (!outcome?.ok) {
 						nextTick(() => emit("resize"));
@@ -12680,6 +12866,7 @@ var CommentDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 					}
 					isReplying.value = false;
 					currentCommentText.value = "";
+					currentCommentMentions.value = [];
 					nextTick(() => emit("resize"));
 					return outcome;
 				} finally {
@@ -12951,6 +13138,7 @@ var CommentDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 			switch (value) {
 				case "edit":
 					currentCommentText.value = comment?.commentText?.value ?? comment?.commentText ?? "";
+					currentCommentMentions.value = Array.isArray(comment?.mentions) ? [...comment.mentions] : [];
 					activeComment.value = props.comment.commentId;
 					if (props.floatingInstanceId) setActiveFloatingCommentInstance(props.floatingInstanceId);
 					editingCommentId.value = comment.commentId;
@@ -13010,13 +13198,13 @@ var CommentDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 		};
 		const usersFiltered = computed(() => {
 			const users = proxy.$superdoc.users;
-			if (props.comment.isInternal === true) return users.filter((user) => user.access?.role === "internal");
+			if (props.comment.isInternal === true) return users.filter((user) => user.access === "internal" || user.access?.role === "internal");
 			return users;
 		});
 		onMounted(() => {
 			if (props.autoFocus) nextTick(() => setFocus());
 			if (isPendingNewComment.value) nextTick(() => {
-				commentInput.value?.focus?.();
+				commentInput.value?.focus?.({ preventScroll: true });
 			});
 			nextTick(() => {
 				const commentId = props.floatingInstanceId ?? (props.comment.importedId !== void 0 ? props.comment.importedId : props.comment.commentId);
@@ -13030,7 +13218,7 @@ var CommentDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 		watch(showInputSection, (isVisible) => {
 			if (!isVisible) return;
 			nextTick(() => {
-				commentInput.value?.focus?.();
+				commentInput.value?.focus?.(isPendingNewComment.value ? { preventScroll: true } : void 0);
 			});
 		}, { immediate: true });
 		watch(editingCommentId, (commentId) => {
@@ -13201,15 +13389,11 @@ var CommentDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 							}, null, 10, _hoisted_36)) : unref(isDebugging) && !isEditingThisComment.value(comment) ? (openBlock(), createElementBlock("div", _hoisted_37, toDisplayString(unref(editorCommentPositions)[comment.importedId !== void 0 ? comment.importedId : comment.commentId]?.bounds), 1)) : (openBlock(), createElementBlock("div", _hoisted_38, [createElementVNode("div", _hoisted_39, [createVNode(CommentInput_default, {
 								ref_for: true,
 								ref: setEditCommentInputRef(comment.commentId),
-								users: usersFiltered.value,
+								users: [],
 								config: unref(getConfig),
 								"include-header": false,
 								comment
-							}, null, 8, [
-								"users",
-								"config",
-								"comment"
-							])]), createElementVNode("div", _hoisted_40, [createElementVNode("button", {
+							}, null, 8, ["config", "comment"])]), createElementVNode("div", _hoisted_40, [createElementVNode("button", {
 								class: "sd-button reply-btn-cancel",
 								onClick: withModifiers(($event) => handleCancel(comment), ["stop", "prevent"])
 							}, "Cancel", 8, _hoisted_41), createElementVNode("button", {
@@ -13277,7 +13461,7 @@ var CommentDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 			], 64))], 14, _hoisted_1$26)), [[_directive_click_outside, handleClickOutside]]);
 		};
 	}
-}, [["__scopeId", "data-v-fd214e1f"]]);
+}, [["__scopeId", "data-v-f4c743f2"]]);
 //#endregion
 //#region src/components/CommentsLayer/commentsList/ReviewDirectoryListItem.vue
 var _hoisted_1$25 = [
@@ -21589,6 +21773,16 @@ var SuperDoc_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 		const onV2LinkClick = (payload) => {
 			linkPopover.handleLinkClick(payload);
 		};
+		const onV2CommentCreated = async (payload) => {
+			try {
+				await commentsStore.announceV2CommentCreated?.({
+					superdoc: proxy.$superdoc,
+					commentId: payload?.commentId
+				});
+			} catch (err) {
+				console.warn("[SuperDoc][v2] context-menu comment reconciliation failed", err);
+			}
+		};
 		const recollectV2GeometryIfActive = (options = void 0) => {
 			if (!isV2Mode.value) return;
 			if (!v2GeometryPublisher.getLastPayload()) return;
@@ -22691,6 +22885,7 @@ var SuperDoc_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 								onV2SelectionChanged,
 								onV2HostEvent: (event) => onV2HostEvent(doc, event),
 								onV2LinkClick,
+								onV2CommentCreated,
 								onV2PageMetrics
 							}, null, 8, [
 								"file-source",
@@ -22755,7 +22950,7 @@ var SuperDoc_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 			], 38);
 		};
 	}
-}, [["__scopeId", "data-v-af3574db"]]);
+}, [["__scopeId", "data-v-85324013"]]);
 //#endregion
 //#region src/core/create-app.js
 var PINIA_DEVTOOLS_SETUP_EVENT = "devtools-plugin:setup";
@@ -37046,7 +37241,11 @@ var ToolbarButtonIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 }, [["__scopeId", "data-v-d7d79424"]]);
 //#endregion
 //#region src/internal/toolbar/built-in/ToolbarButton.vue
-var _hoisted_1$14 = ["role", "aria-label"];
+var _hoisted_1$14 = [
+	"role",
+	"aria-label",
+	"aria-disabled"
+];
 var _hoisted_2$11 = ["data-item"];
 var _hoisted_3$9 = ["data-item"];
 var _hoisted_4$6 = {
@@ -37237,6 +37436,7 @@ var ToolbarButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 				style: normalizeStyle(getStyle.value),
 				role: __props.isOverflowItem ? "menuitem" : "button",
 				"aria-label": unref(attributes).ariaLabel,
+				"aria-disabled": unref(disabled) ? "true" : void 0,
 				"data-sd-part": "toolbar-item",
 				onClick: handleOuterClick,
 				onKeydown: _cache[9] || (_cache[9] = withKeys(($event) => onEnterKeydown($event), ["enter"])),
@@ -37337,7 +37537,7 @@ var ToolbarButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default({
 			], 10, _hoisted_2$11)], 46, _hoisted_1$14);
 		};
 	}
-}, [["__scopeId", "data-v-dbdea151"]]);
+}, [["__scopeId", "data-v-22817fa7"]]);
 //#endregion
 //#region src/internal/toolbar/built-in/ToolbarSeparator.vue
 var _hoisted_1$13 = {
@@ -42468,7 +42668,7 @@ var BuiltInToolbar = class extends import_eventemitter3.default {
 			return true;
 		}
 		if (name === "search") {
-			item.setDisabled(false);
+			item.setDisabled(this.superdoc?.uiConfig?.search?.enabled !== true);
 			return true;
 		}
 		if (getBuiltInToolbarItem(name)?.disposition === "host-routed") {
@@ -43210,7 +43410,7 @@ var SuperDoc = class extends import_eventemitter3.default {
 		this.config.colors = shuffleArray(this.config.colors);
 		this.userColorMap = /* @__PURE__ */ new Map();
 		this.colorIndex = 0;
-		this.version = "2.5.1";
+		this.version = "2.6.0-next.10";
 		this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
 		this.superdocId = config.superdocId || v4();
 		this.colors = this.config.colors ?? [];
@@ -44623,6 +44823,7 @@ var SuperDoc = class extends import_eventemitter3.default {
 	* Story-aware navigation is currently supported for bookmark and tracked
 	* change targets. Block and comment targets are body-only.
 	*
+	* @deprecated Use the target-specific navigation APIs on `superdoc.ui`. This method will be removed in v3.
 	* @returns Whether the target was found and navigated to.
 	*/
 	async navigateTo(target) {