@plannotator/ui 0.42.0 → 0.43.1

package/components/CommentPopover.tsx

@@ -9,6 +9,9 @@ import { hasUnsavedCommentContent } from '../utils/commentContent';
 import { useSkillReferenceAutocomplete } from '../hooks/useSkillReferenceAutocomplete';
 import { HumanOnlySkillNotice, SkillReferenceMenu } from './SkillReferenceMenu';
 import type { SkillReferenceToken } from '../utils/skillReferences';
+import { useMentionAutocomplete } from '../hooks/useMentionAutocomplete';
+import { MentionPicker } from './MentionPicker';
+import type { MentionSource } from '../utils/mentions';
 import {
   hasPrimaryCoarsePointer,
   shouldUseExpandedComposer,
@@ -51,8 +54,13 @@ interface CommentPopoverProps {
   isGlobal: boolean;
   /** Pre-filled text (for type-to-comment) */
   initialText?: string;
-  /** Called on submit with comment text and optional images */
-  onSubmit: (text: string, images?: ImageAttachment[]) => void;
+  /**
+   * Called on submit with comment text and optional images. The third
+   * argument carries the mention ids the body still tags, and is passed ONLY
+   * when a `mentionSource` is supplied — without one the call is the two
+   * arguments it has always been.
+   */
+  onSubmit: (text: string, images?: ImageAttachment[], mentions?: readonly string[]) => void;
   /**
    * One-click "Looks good" action (comment-only HTML/live surfaces, where
    * pinpoint clicks open this composer directly and never see the selection
@@ -77,6 +85,13 @@ interface CommentPopoverProps {
   askAIDisabled?: boolean;
   /** Opt-in: `/` and `$` skill-reference autocomplete (document UI surfaces). Off by default. */
   skillReferences?: boolean;
+  /**
+   * Opt-in host capability: an `@` mention source for this composer. Supplies
+   * the people, an optional honest-empty notice, and optional callbacks for
+   * the surviving mention ids and for a picked person the host blocks.
+   * Absent → no listener, no picker, no extra DOM: byte-identical composer.
+   */
+  mentionSource?: MentionSource;
   /** Opt-in (HTML multi-select): selected targets rendered as horizontally
    *  scrollable chips above the textarea. Absent → byte-identical composer. */
   targetChips?: CommentTargetChip[];
@@ -166,6 +181,7 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
   askAIContext,
   askAIDisabled = false,
   skillReferences = false,
+  mentionSource,
   targetChips,
   onRemoveTargetChip,
   onHoverTargetChip,
@@ -451,14 +467,24 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
     </div>
   ) : null;
 
+  const mentionAc = useMentionAutocomplete({
+    text,
+    setText,
+    textareaRef,
+    source: mentionSource,
+  });
+
   const handleSubmit = useCallback(() => {
     const canSubmitEmpty = allowEmptySubmit && initialText.trim().length > 0;
     if (hasUnsavedContent || canSubmitEmpty) {
       if (draftKey) draftStore.delete(draftKey);
-      onSubmit(text, allowImages && images.length > 0 ? images : undefined);
+      const submitImages = allowImages && images.length > 0 ? images : undefined;
+      // Without a mentionSource this is the two-argument call it always was.
+      if (mentionSource) onSubmit(text, submitImages, mentionAc.mentionIds);
+      else onSubmit(text, submitImages);
       restoreOpeningFocus();
     }
-  }, [text, images, onSubmit, draftKey, allowImages, allowEmptySubmit, initialText, hasUnsavedContent, restoreOpeningFocus]);
+  }, [text, images, onSubmit, draftKey, allowImages, allowEmptySubmit, initialText, hasUnsavedContent, restoreOpeningFocus, mentionSource, mentionAc.mentionIds]);
 
   const handleAskAI = useCallback(async () => {
     const question = text.trim();
@@ -492,14 +518,31 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
     textareaRef,
     enabled: skillReferences,
   });
+  const readComposerCaret = useCallback(() => {
+    skillAc.onSelect();
+    mentionAc.onSelect();
+  }, [mentionAc, skillAc]);
   const skillListboxId = `skill-reference-listbox-${useId().replace(/:/g, '')}`;
+  const mentionListboxId = `${skillListboxId}-mentions`;
   const activeSkillOptionId =
     skillAc.menu?.activeIndex === null || skillAc.menu?.activeIndex === undefined
       ? undefined
       : `${skillListboxId}-option-${skillAc.menu.activeIndex}`;
+  // At most one of the two menus can be open (their triggers are disjoint), so
+  // the textarea's ARIA relationship points at whichever one is. All three are
+  // `undefined`/false with no menu open, which is every render Plannotator
+  // makes without a `mentionSource`.
+  const activeMentionOptionId =
+    mentionAc.menu === null || mentionAc.menu.activeIndex === null
+      ? undefined
+      : `${mentionListboxId}-option-${mentionAc.menu.activeIndex}`;
+  const composerListboxId = mentionAc.menu !== null ? mentionListboxId : skillListboxId;
+  const composerListboxOpen = skillAc.menu !== null || mentionAc.menu !== null;
+  const activeComposerOptionId = activeSkillOptionId ?? activeMentionOptionId;
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (skillAc.onKeyDown(e)) return;
+    if (mentionAc.onKeyDown(e)) return;
     if (e.key === 'Escape') {
       e.stopPropagation();
       if (mode === 'dialog') {
@@ -634,18 +677,32 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
             <ComposerTextarea
               textareaRef={focusOnMountRef}
               value={text}
-              onChange={(e) => { setText(e.target.value); skillAc.onSelect(); }}
+              onChange={(e) => { setText(e.target.value); readComposerCaret(); }}
               onKeyDown={handleKeyDown}
-              onSelectCaret={skillAc.onSelect}
+              onSelectCaret={readComposerCaret}
               placeholder={isGlobal ? 'Add a global comment...' : 'Add a comment...'}
               sizeClassName="min-h-32 max-h-full"
               skillReferences={skillReferences}
               tokens={skillAc.referenceTokens}
-              listboxId={skillListboxId}
-              listboxOpen={skillAc.menu !== null}
-              activeOptionId={activeSkillOptionId}
+              listboxId={composerListboxId}
+              listboxOpen={composerListboxOpen}
+              activeOptionId={activeComposerOptionId}
             />
             <HumanOnlySkillNotice skills={skillAc.humanOnlyReferences} />
+            {mentionAc.menu && (
+              <MentionPicker
+                id={mentionListboxId}
+                people={mentionAc.menu.items}
+                emptyNotice={mentionAc.menu.emptyNotice}
+                active={mentionAc.menu.activeIndex}
+                anchor={mentionAc.menu.anchor}
+                onPick={(person) => {
+                  const index = mentionAc.menu?.items.findIndex((p) => p.id === person.id) ?? -1;
+                  if (index >= 0) mentionAc.select(index);
+                }}
+                onHover={() => {}}
+              />
+            )}
           </div>
 
           {/* Footer — DOM order sets tab order (Save first); row-reverse keeps the visual layout unchanged */}
@@ -784,18 +841,32 @@ export const CommentPopover: React.FC<CommentPopoverProps> = ({
         <ComposerTextarea
           textareaRef={focusOnMountRef}
           value={text}
-          onChange={(e) => { setText(e.target.value); skillAc.onSelect(); }}
+          onChange={(e) => { setText(e.target.value); readComposerCaret(); }}
           onKeyDown={handleKeyDown}
-          onSelectCaret={skillAc.onSelect}
+          onSelectCaret={readComposerCaret}
           placeholder={isGlobal ? 'Add a global comment...' : 'Add a comment...'}
           sizeClassName="max-h-64 min-h-[4.5rem]"
           skillReferences={skillReferences}
           tokens={skillAc.referenceTokens}
-          listboxId={skillListboxId}
-          listboxOpen={skillAc.menu !== null}
-          activeOptionId={activeSkillOptionId}
+          listboxId={composerListboxId}
+          listboxOpen={composerListboxOpen}
+          activeOptionId={activeComposerOptionId}
         />
         <HumanOnlySkillNotice skills={skillAc.humanOnlyReferences} />
+        {mentionAc.menu && (
+          <MentionPicker
+            id={mentionListboxId}
+            people={mentionAc.menu.items}
+            emptyNotice={mentionAc.menu.emptyNotice}
+            active={mentionAc.menu.activeIndex}
+            anchor={mentionAc.menu.anchor}
+            onPick={(person) => {
+              const index = mentionAc.menu?.items.findIndex((p) => p.id === person.id) ?? -1;
+              if (index >= 0) mentionAc.select(index);
+            }}
+            onHover={() => {}}
+          />
+        )}
       </div>
 
       {/* Footer — same DOM-order/row-reverse pattern as the dialog footer above */}
@@ -1013,6 +1084,11 @@ const ComposerTextarea: React.FC<ComposerTextareaProps> = ({
     return (
       <textarea
         data-pn-mobile-editable="true"
+        // Absent any open menu these are all undefined, so the plain textarea
+        // renders exactly the attributes it always did.
+        aria-autocomplete={listboxOpen ? 'list' : undefined}
+        aria-controls={listboxOpen ? listboxId : undefined}
+        aria-activedescendant={activeOptionId}
         ref={attachRef}
         value={value}
         onChange={onChange}

package/components/MentionPicker.tsx

@@ -0,0 +1,110 @@
+import { createPortal } from 'react-dom';
+import type { MentionPerson } from '../utils/mentions';
+
+/**
+ * The `@` menu over the comment composer's textarea.
+ *
+ * NOTHING IS PRESELECTED (`active === null` until the person arrows into the
+ * list), the same rule `useSkillReferenceAutocomplete` keeps for `/` and `$`:
+ * until then Enter and Tab mean what they always meant in a comment box.
+ *
+ * PORTALED AND FIXED, not absolute inside the composer: the popover clips its
+ * own box and the expanded dialog scrolls, so a menu positioned inside the
+ * textarea's wrapper is cut off at the card's edge. It is placed from the
+ * textarea's measured rect instead — above it by default, below when the
+ * composer sits too close to the top of the window for the menu to open
+ * upward.
+ */
+
+export interface MentionAnchor {
+  readonly top: number;
+  readonly bottom: number;
+  readonly left: number;
+  readonly width: number;
+}
+
+/** The menu's own height cap (max-h-48 = 12rem), in px. */
+const MENU_MAX_PX = 192;
+const MENU_GAP_PX = 4;
+
+/** Measure the composer textarea for {@link MentionPicker}. Null closes the menu. */
+export function mentionAnchorOf(element: HTMLElement | null): MentionAnchor | null {
+  if (element === null) return null;
+  const rect = element.getBoundingClientRect();
+  return { top: rect.top, bottom: rect.bottom, left: rect.left, width: rect.width };
+}
+
+export function MentionPicker({
+  id,
+  people,
+  emptyNotice,
+  active,
+  anchor,
+  onPick,
+  onHover,
+}: {
+  /** Id referenced by the focused textarea's aria-controls attribute. */
+  readonly id?: string;
+  readonly people: readonly MentionPerson[];
+  /** Shown as one non-selectable row when `people` is empty. */
+  readonly emptyNotice?: string | null;
+  /** Index of the arrow-focused row, or null for "nothing preselected". */
+  readonly active: number | null;
+  readonly anchor: MentionAnchor | null;
+  readonly onPick: (person: MentionPerson) => void;
+  readonly onHover: (index: number) => void;
+}) {
+  if (anchor === null || typeof document === 'undefined') return null;
+  if (people.length === 0 && !emptyNotice) return null;
+  const above = anchor.top >= MENU_MAX_PX + MENU_GAP_PX;
+  const style = above
+    ? { bottom: window.innerHeight - anchor.top + MENU_GAP_PX }
+    : { top: anchor.bottom + MENU_GAP_PX };
+  return createPortal(
+    <div
+      id={id}
+      role="listbox"
+      aria-label="People"
+      data-mention-picker
+      data-placement={above ? 'above' : 'below'}
+      style={{ position: 'fixed', left: anchor.left, width: anchor.width, ...style }}
+      className="z-[120] max-h-48 overflow-y-auto rounded-md border border-border bg-popover p-1 shadow-xl"
+    >
+      {people.length === 0 ? (
+        <p data-mention-empty className="px-2 py-1 text-[11px] text-muted-foreground">
+          {emptyNotice}
+        </p>
+      ) : (
+        people.map((person, index) => (
+          <button
+            key={person.id}
+            type="button"
+            role="option"
+            id={id ? `${id}-option-${index}` : undefined}
+            aria-selected={active === index}
+            data-mention-option={person.id}
+            // The pick must run before the textarea loses focus, or the blur
+            // would close the menu and swallow the click.
+            onMouseDown={(event) => {
+              event.preventDefault();
+              onPick(person);
+            }}
+            onMouseEnter={() => onHover(index)}
+            className={`flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-left text-xs transition-colors ${
+              active === index ? 'bg-muted text-foreground' : 'text-foreground/85 hover:bg-muted/60'
+            }`}
+          >
+            <span className="min-w-0 flex-1 truncate">{person.label}</span>
+            {person.detail && (
+              // The NAME is what the person reads; the detail gives way first.
+              <span className="min-w-0 max-w-[44%] shrink-0 truncate text-[10px] text-muted-foreground">
+                {person.detail}
+              </span>
+            )}
+          </button>
+        ))
+      )}
+    </div>,
+    document.body,
+  );
+}

package/components/SelectionActionsDropdown.tsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import type { SelectionAction } from '../utils/selectionActions';
+
+/**
+ * The host-actions dropdown: the same context-menu shape `QuickLabelDropdown`
+ * draws (single column, accent bar, full-width rows) and the same floating
+ * placement `FloatingQuickLabelPicker` computes, opened directly below the
+ * toolbar's wand button.
+ *
+ * Keyboard here is arrows + Enter + Escape rather than the quick labels'
+ * digit keys: a host's list is not a fixed ten with memorized numbers.
+ * Nothing is preselected until the first arrow, so a stray Enter while the
+ * dropdown is open never invokes a host command.
+ */
+
+const PICKER_WIDTH = 224;
+const GAP = 6;
+const VIEWPORT_PADDING = 12;
+/** Room the dropdown wants below the anchor before it flips above. */
+const FLIP_THRESHOLD = 220;
+
+function computePosition(anchorEl: HTMLElement): { top: number; left: number; flipAbove: boolean } {
+  const rect = anchorEl.getBoundingClientRect();
+  const flipAbove = window.innerHeight - rect.bottom < FLIP_THRESHOLD;
+  const top = flipAbove ? rect.top - GAP : rect.bottom + GAP;
+  let left = rect.left + rect.width / 2 - PICKER_WIDTH / 2;
+  left = Math.max(
+    VIEWPORT_PADDING,
+    Math.min(left, window.innerWidth - PICKER_WIDTH - VIEWPORT_PADDING),
+  );
+  return { top, left, flipAbove };
+}
+
+export const SelectionActionsDropdown: React.FC<{
+  actions: SelectionAction[];
+  activeIndex: number | null;
+  onSelect: (action: SelectionAction) => void;
+  onHover: (index: number) => void;
+}> = ({ actions, activeIndex, onSelect, onHover }) => (
+  <div className="py-1" onMouseDown={(e) => e.stopPropagation()}>
+    {actions.map((action, index) => (
+      <button
+        key={action.id}
+        type="button"
+        role="option"
+        aria-selected={activeIndex === index}
+        data-selection-action={action.id}
+        onClick={() => onSelect(action)}
+        onMouseEnter={() => onHover(index)}
+        className={`group w-full flex items-center gap-2 px-2 py-[5px] text-left transition-colors ${
+          activeIndex === index ? 'bg-muted' : 'hover:bg-muted/60 active:bg-muted'
+        }`}
+      >
+        {action.icon ? (
+          <span className="flex-shrink-0 w-4 h-4 flex items-center justify-center text-muted-foreground">
+            {action.icon}
+          </span>
+        ) : (
+          <span className="w-[3px] self-stretch rounded-full flex-shrink-0 bg-primary/70" />
+        )}
+        <span className="min-w-0 flex-1">
+          <span className="block text-[11px] leading-tight text-foreground/85 group-hover:text-foreground truncate">
+            {action.label}
+          </span>
+          {action.detail && (
+            <span className="block text-[9px] leading-tight text-muted-foreground/70 truncate">
+              {action.detail}
+            </span>
+          )}
+        </span>
+      </button>
+    ))}
+  </div>
+);
+
+export const FloatingSelectionActionsPicker: React.FC<{
+  anchorEl: HTMLElement;
+  actions: SelectionAction[];
+  onSelect: (action: SelectionAction) => void;
+  onDismiss: () => void;
+}> = ({ anchorEl, actions, onSelect, onDismiss }) => {
+  const [position, setPosition] = useState<{ top: number; left: number; flipAbove: boolean } | null>(null);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const update = () => setPosition(computePosition(anchorEl));
+    update();
+    window.addEventListener('scroll', update, true);
+    window.addEventListener('resize', update);
+    return () => {
+      window.removeEventListener('scroll', update, true);
+      window.removeEventListener('resize', update);
+    };
+  }, [anchorEl]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.isComposing) return;
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onDismiss();
+        return;
+      }
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActiveIndex((prev) => {
+          if (actions.length === 0) return null;
+          if (prev === null) return e.key === 'ArrowDown' ? 0 : actions.length - 1;
+          return e.key === 'ArrowDown'
+            ? (prev + 1) % actions.length
+            : (prev - 1 + actions.length) % actions.length;
+        });
+        return;
+      }
+      if (e.key === 'Enter') {
+        // Nothing preselected: Enter before the first arrow is not aimed here.
+        if (activeIndex === null) return;
+        e.preventDefault();
+        const action = actions[activeIndex];
+        if (action) onSelect(action);
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown, true);
+    return () => window.removeEventListener('keydown', handleKeyDown, true);
+  }, [actions, activeIndex, onDismiss, onSelect]);
+
+  // Click outside dismisses. Deferred capture-phase registration, so the click
+  // that opened the dropdown does not immediately close it.
+  useEffect(() => {
+    const handlePointerDown = (e: PointerEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onDismiss();
+    };
+    const timer = setTimeout(() => {
+      document.addEventListener('pointerdown', handlePointerDown, true);
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('pointerdown', handlePointerDown, true);
+    };
+  }, [onDismiss]);
+
+  if (!position) return null;
+
+  return createPortal(
+    <div
+      ref={ref}
+      role="listbox"
+      aria-label="Actions"
+      data-selection-actions-picker
+      data-floating-picker="true"
+      className="fixed z-[100]"
+      style={{
+        top: position.top,
+        left: position.left,
+        width: PICKER_WIDTH,
+        ...(position.flipAbove ? { transform: 'translateY(-100%)' } : {}),
+      }}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <div className="bg-popover border border-border/60 rounded-lg shadow-xl overflow-hidden">
+        <SelectionActionsDropdown
+          actions={actions}
+          activeIndex={activeIndex}
+          onSelect={onSelect}
+          onHover={setActiveIndex}
+        />
+      </div>
+    </div>,
+    document.body,
+  );
+};

package/components/Viewer.tsx

@@ -59,6 +59,8 @@ import { DiagramBlockPending } from './diagram/DiagramPending';
 import { isGraphvizLanguage, isMermaidLanguage } from './diagramLanguages';
 import { getIdentity } from '../utils/identity';
 import { type QuickLabel } from '../utils/quickLabels';
+import type { SelectionAction } from '../utils/selectionActions';
+import type { MentionSource } from '../utils/mentions';
 import { DocBadges, type DocBadgesProps, type LinkedDocBadgeInfo } from './DocBadges';
 import { PinpointOverlay } from './PinpointOverlay';
 import { usePinpoint } from '../hooks/usePinpoint';
@@ -91,6 +93,28 @@ export interface ViewerAnnotationHeaderConfig {
 
 /** Public properties for the Markdown document Viewer. */
 export interface ViewerProps {
+  /**
+   * Opt-in host capability, passed straight through to the selection
+   * toolbars: the host's own commands for the current selection, rendered as
+   * one wand button that opens the package's dropdown. Absent → unchanged.
+   */
+  selectionActions?: SelectionAction[];
+  /** Opt-in host capability: the glyph on the `selectionActions` button on
+   *  both toolbars. Absent → the package's own wand. */
+  selectionActionsIcon?: React.ReactNode;
+  /**
+   * Whether the package's quick labels are offered on the selection toolbars
+   * (default true). `false` hides the Zap picker and the Alt+digit label
+   * shortcuts; the 👍 button is unaffected.
+   */
+  quickLabels?: boolean;
+  /**
+   * Opt-in host capability, forwarded to BOTH comment composers this viewer
+   * mounts (the text-selection composer and the global / code-block one): the
+   * `@` mention source for the composer's picker. The picked ids ride onto the
+   * created annotation as `Annotation.mentions`. Absent → unchanged.
+   */
+  mentionSource?: MentionSource;
   blocks: Block[];
   markdown: string;
   frontmatter?: Frontmatter | null;
@@ -360,6 +384,10 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
   mode,
   inputMethod = 'drag',
   taterMode,
+  selectionActions,
+  selectionActionsIcon,
+  quickLabels,
+  mentionSource,
   globalAttachments = [],
   onAddGlobalAttachment,
   onRemoveGlobalAttachment,
@@ -543,6 +571,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     images?: ImageAttachment[],
     isQuickLabel?: boolean,
     quickLabelTip?: string,
+    mentions?: readonly string[],
   ) => {
     if (readOnlyRef.current) return;
 
@@ -562,6 +591,9 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
       createdA: Date.now(),
       author: getIdentity(),
       images,
+      // Host capability: present only when a mentionSource was supplied AND a
+      // token survived, so a code-block comment without one is unchanged.
+      ...(mentions && mentions.length > 0 ? { mentions } : {}),
       ...(isQuickLabel ? { isQuickLabel: true } : {}),
       ...(quickLabelTip ? { quickLabelTip } : {}),
     };
@@ -942,7 +974,11 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
     setCodeBlockToolbar(null);
   };
 
-  const handleViewerCommentSubmit = (text: string, images?: ImageAttachment[]) => {
+  const handleViewerCommentSubmit = (
+    text: string,
+    images?: ImageAttachment[],
+    mentions?: readonly string[],
+  ) => {
     if (readOnlyRef.current || !viewerCommentPopover) return;
 
     if (viewerCommentPopover.isGlobal) {
@@ -960,12 +996,22 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
         createdA: Date.now(),
         author: getIdentity(),
         images,
+        ...(mentions && mentions.length > 0 ? { mentions } : {}),
       };
       onAddAnnotation(newAnnotation);
     } else if (viewerCommentPopover.codeBlock) {
       const codeEl = viewerCommentPopover.codeBlock.element.querySelector('code');
       if (codeEl) {
-        applyCodeBlockAnnotation(viewerCommentPopover.codeBlock.block.id, codeEl, AnnotationType.COMMENT, text, images);
+        applyCodeBlockAnnotation(
+          viewerCommentPopover.codeBlock.block.id,
+          codeEl,
+          AnnotationType.COMMENT,
+          text,
+          images,
+          undefined,
+          undefined,
+          mentions,
+        );
       }
     }
 
@@ -1296,6 +1342,9 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
               onClose={handleToolbarClose}
               onRequestComment={handleRequestComment}
               onQuickLabel={handleQuickLabel}
+              selectionActions={selectionActions}
+              selectionActionsIcon={selectionActionsIcon}
+              quickLabels={quickLabels}
               copyText={toolbarState.selectionText}
               hideCopyButton={!isTouchDevice}
               closeOnScrollOut
@@ -1351,6 +1400,9 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
                 onClose={handleCodeBlockToolbarClose}
                 onRequestComment={handleCodeBlockRequestComment}
                 onQuickLabel={handleCodeBlockQuickLabel}
+                selectionActions={selectionActions}
+                selectionActionsIcon={selectionActionsIcon}
+                quickLabels={quickLabels}
                 isExiting={isCodeBlockToolbarExiting}
                 onMouseEnter={() => {
                   if (hoverTimeoutRef.current) {
@@ -1428,6 +1480,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
               draftKey={`plan:${commentDraftScope}:${hookCommentPopover.draftKey}`}
               onSubmit={hookCommentSubmit}
               onClose={hookCommentClose}
+              mentionSource={mentionSource}
               allowImages={allowImages}
               skillReferences
               onAskAI={onAskAI}
@@ -1452,6 +1505,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
             }`}
             onSubmit={handleViewerCommentSubmit}
             onClose={handleViewerCommentClose}
+            mentionSource={mentionSource}
             allowImages={allowImages}
             skillReferences
             onAskAI={onAskAI}