@beyondwork/docx-react-component 1.0.106 → 1.0.108

package/src/ui/WordReviewEditor.tsx

@@ -11,6 +11,7 @@ import React, {
 
 import type {
   AutosaveState,
+  CommentSidebarThreadSnapshot,
   CompatibilityReport,
   DocumentNavigationSnapshot,
   EditorAnchorProjection,
@@ -137,7 +138,13 @@ import { findTextMatchesForRuntime, searchRuntimeDocument } from "../shell/searc
 import {
   type TwProseMirrorSurfaceRef,
 } from "../ui-tailwind/editor-surface/tw-prosemirror-surface";
-import { TwInlineFindBar } from "../ui-tailwind/chrome/tw-inline-find-bar";
+import {
+  TwNavigationCommandBar,
+  type NavigationCommandMode,
+  type NavigationGoToGroup,
+  type NavigationSearchScope,
+  type NavigationSearchScopeOption,
+} from "../ui-tailwind/chrome/tw-navigation-command-bar";
 import { PAGE_CHROME_DEFAULTS } from "../ui-tailwind/editor-surface/pm-page-break-decorations.ts";
 import type { MediaPreviewDescriptor } from "../ui-tailwind/editor-surface/pm-state-from-snapshot";
 import {
@@ -229,14 +236,197 @@ import type {
   ChromeHostPosture,
   ChromePosture,
   OverlayAnchorQuery,
+  UiObjectDragCommitResult,
+  UiObjectDragSession,
+  UiObjectDragStartInput,
+  UiObjectDragUpdateInput,
   ViewportState,
 } from "../api/v3/ui/_types.ts";
 
 export {
   __createFallbackRuntime,
+  __preloadSnapshotSourceForRuntime,
   __resolveWordReviewEditorSource,
 } from "../shell/session-bootstrap.ts";
 
+const EMU_PER_CSS_PX = 9525;
+let nextObjectDragSessionId = 0;
+
+function createMountedObjectDragSession(
+  runtime: WordReviewEditorRuntime,
+  input: UiObjectDragStartInput,
+): UiObjectDragSession {
+  nextObjectDragSessionId += 1;
+  const sessionId = `object-drag-${nextObjectDragSessionId}`;
+  const start = findObjectDragSegment(runtime.getRenderSnapshot(), input.objectId);
+  let latestDelta = { x: 0, y: 0 };
+  let closed: "committed" | "cancelled" | null = null;
+
+  const readDelta = (update?: UiObjectDragUpdateInput) => {
+    if (!update) return latestDelta;
+    const x = update.deltaX ?? (update.clientX != null ? update.clientX - input.clientX : latestDelta.x);
+    const y = update.deltaY ?? (update.clientY != null ? update.clientY - input.clientY : latestDelta.y);
+    latestDelta = { x, y };
+    return latestDelta;
+  };
+  const snapshotFor = (
+    status: "active" | "committed" | "cancelled",
+    update?: UiObjectDragUpdateInput,
+  ) => {
+    const delta = readDelta(update);
+    return {
+      objectId: input.objectId,
+      handle: input.handle,
+      status,
+      deltaPx: delta,
+      previewRect: previewObjectDragRect(input, delta),
+    };
+  };
+
+  return {
+    id: sessionId,
+    objectId: input.objectId,
+    handle: input.handle,
+    update(update) {
+      if (closed) return snapshotFor(closed, update);
+      return snapshotFor("active", update);
+    },
+    commit(update) {
+      if (closed) {
+        return {
+          ...snapshotFor(closed, update),
+          changed: false,
+          reason: `object-drag-${closed}`,
+        };
+      }
+      const active = snapshotFor("committed", update);
+      const result = commitMountedObjectDrag(runtime, input, start, active.deltaPx);
+      closed = "committed";
+      return { ...active, ...result };
+    },
+    cancel() {
+      closed = "cancelled";
+      return {
+        ...snapshotFor("cancelled"),
+        changed: false,
+        reason: "object-drag-cancelled",
+      };
+    },
+  };
+}
+
+function previewObjectDragRect(
+  input: UiObjectDragStartInput,
+  delta: { x: number; y: number },
+) {
+  const rect = input.initialRect;
+  const next = {
+    leftPx: rect.leftPx,
+    topPx: rect.topPx,
+    widthPx: rect.widthPx,
+    heightPx: rect.heightPx,
+    space: rect.space,
+    ...(rect.precision ? { precision: rect.precision } : {}),
+  };
+  if (input.handle === "move") {
+    return { ...next, leftPx: next.leftPx + delta.x, topPx: next.topPx + delta.y };
+  }
+  if (input.handle === "rotate") return next;
+  const west = input.handle.includes("w");
+  const east = input.handle.includes("e");
+  const north = input.handle.includes("n");
+  const south = input.handle.includes("s");
+  const minPx = 1;
+  return {
+    ...next,
+    leftPx: west ? next.leftPx + delta.x : next.leftPx,
+    topPx: north ? next.topPx + delta.y : next.topPx,
+    widthPx: Math.max(minPx, next.widthPx + (east ? delta.x : 0) - (west ? delta.x : 0)),
+    heightPx: Math.max(minPx, next.heightPx + (south ? delta.y : 0) - (north ? delta.y : 0)),
+  };
+}
+
+function commitMountedObjectDrag(
+  runtime: WordReviewEditorRuntime,
+  input: UiObjectDragStartInput,
+  segment: ObjectDragSegment | null,
+  delta: { x: number; y: number },
+): Pick<UiObjectDragCommitResult, "changed" | "reason"> {
+  if (!segment) return { changed: false, reason: "object-not-found" };
+  if (segment.kind !== "image") {
+    return { changed: false, reason: "object-kind-not-supported" };
+  }
+  if (input.handle === "rotate") {
+    return { changed: false, reason: "rotate-not-supported" };
+  }
+
+  if (input.handle === "move") {
+    if (segment.display !== "floating" && segment.anchor?.display !== "floating") {
+      return { changed: false, reason: "inline-object-move-not-supported" };
+    }
+    applyRuntimeImageReposition(runtime, input.objectId, {
+      horizontalOffsetEmu: Math.round((segment.anchor?.positionH?.offset ?? 0) + delta.x * EMU_PER_CSS_PX),
+      verticalOffsetEmu: Math.round((segment.anchor?.positionV?.offset ?? 0) + delta.y * EMU_PER_CSS_PX),
+    });
+    return { changed: true };
+  }
+
+  const startWidth =
+    segment.anchor?.extent?.widthEmu ??
+    Math.round(input.initialRect.widthPx * EMU_PER_CSS_PX);
+  const startHeight =
+    segment.anchor?.extent?.heightEmu ??
+    Math.round(input.initialRect.heightPx * EMU_PER_CSS_PX);
+  const west = input.handle.includes("w");
+  const east = input.handle.includes("e");
+  const north = input.handle.includes("n");
+  const south = input.handle.includes("s");
+  const minEmu = EMU_PER_CSS_PX;
+  const widthEmu = Math.max(
+    minEmu,
+    Math.round(startWidth + (east ? delta.x : 0) * EMU_PER_CSS_PX - (west ? delta.x : 0) * EMU_PER_CSS_PX),
+  );
+  const heightEmu = Math.max(
+    minEmu,
+    Math.round(startHeight + (south ? delta.y : 0) * EMU_PER_CSS_PX - (north ? delta.y : 0) * EMU_PER_CSS_PX),
+  );
+  applyRuntimeImageResize(runtime, input.objectId, { widthEmu, heightEmu });
+  return { changed: true };
+}
+
+interface ObjectDragSegment {
+  kind: string;
+  mediaId?: string;
+  from?: number;
+  to?: number;
+  display?: "inline" | "floating";
+  anchor?: {
+    display?: "inline" | "floating";
+    extent?: { widthEmu: number; heightEmu: number };
+    positionH?: { offset?: number };
+    positionV?: { offset?: number };
+  };
+}
+
+function findObjectDragSegment(
+  snapshot: RuntimeRenderSnapshot,
+  objectId: string,
+): ObjectDragSegment | null {
+  for (const block of snapshot.surface?.blocks ?? []) {
+    if (!("segments" in block)) continue;
+    for (const segment of (block as { segments?: unknown[] }).segments ?? []) {
+      const candidate = segment as ObjectDragSegment;
+      if (
+        (candidate.kind === "image" || candidate.kind === "shape") &&
+        candidate.mediaId === objectId
+      ) {
+        return candidate;
+      }
+    }
+  }
+  return null;
+}
+
 /**
  * Map a host-facing `markupDisplay` prop value to the narrow
  * `ChromeMarkupDisplay` enum on `ChromeHostPosture` (`"final" | "markup"
@@ -1064,9 +1254,15 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
 
     const [activeRailTab, setActiveRailTab] = useState<ReviewRailTab>("comments");
     const [inlineFindOpen, setInlineFindOpen] = useState(false);
+    const [navigationCommandMode, setNavigationCommandMode] =
+      useState<NavigationCommandMode>("find");
     const [inlineFindQuery, setInlineFindQuery] = useState("");
+    const [inlineReplaceText, setInlineReplaceText] = useState("");
+    const [inlineSearchScope, setInlineSearchScope] =
+      useState<NavigationSearchScope>("main");
     const [inlineFindResults, setInlineFindResults] = useState<readonly SearchResultSnapshot[]>([]);
     const [inlineFindActiveIndex, setInlineFindActiveIndex] = useState(0);
+    const [activeGoToGroupId, setActiveGoToGroupId] = useState("pages");
     const [localMarkupDisplay, setLocalMarkupDisplay] =
       useState<WorkflowMarkupMode | null>(() => suggestionsEnabled ? "all" : null);
     const [activeRevisionId, setActiveRevisionId] = useState<string | undefined>();
@@ -1219,6 +1415,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
               viewportChannelRef.current!.subscribe(listener),
             subscribeOverlays: (listener) =>
               overlaysChannelRef.current!.subscribe(listener),
+            beginObjectDrag: (input) =>
+              createMountedObjectDragSession(activeRuntime, input),
           }),
         }),
       [activeRuntime],
@@ -2609,6 +2807,21 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       },
       [activeRuntime],
     );
+    const inlineFindSearchOptions = useMemo<SearchOptions>(() => {
+      const base: SearchOptions = { limit: 500 };
+      if (inlineSearchScope === "story") {
+        return { ...base, inStory: snapshot.activeStory };
+      }
+      if (inlineSearchScope === "scope") {
+        const scopeId = interactionGuardSnapshot.matchedScopeId;
+        return scopeId ? { ...base, inScope: scopeId } : base;
+      }
+      return base;
+    }, [
+      inlineSearchScope,
+      interactionGuardSnapshot.matchedScopeId,
+      snapshot.activeStory,
+    ]);
     const refreshInlineFindResults = useCallback(
       (query: string, requestedIndex = 0) => {
         const normalizedQuery = query.trim();
@@ -2622,7 +2835,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
           activeRuntime,
           surfaceRef.current,
           normalizedQuery,
-          { limit: 500 },
+          inlineFindSearchOptions,
         );
         const nextIndex =
           results.length > 0 ? wrapSearchResultIndex(requestedIndex, results.length) : 0;
@@ -2630,14 +2843,24 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         setInlineFindActiveIndex(nextIndex);
         navigateInlineFindResult(results, nextIndex);
       },
-      [activeRuntime, navigateInlineFindResult],
+      [activeRuntime, inlineFindSearchOptions, navigateInlineFindResult],
     );
-    const handleOpenInlineFind = useCallback(() => {
+    const openNavigationCommandBar = useCallback((mode: NavigationCommandMode) => {
+      setNavigationCommandMode(mode);
       setInlineFindOpen(true);
       if (inlineFindQuery.trim()) {
         refreshInlineFindResults(inlineFindQuery, inlineFindActiveIndex);
       }
     }, [inlineFindActiveIndex, inlineFindQuery, refreshInlineFindResults]);
+    const handleOpenInlineFind = useCallback(() => {
+      openNavigationCommandBar("find");
+    }, [openNavigationCommandBar]);
+    const handleOpenInlineReplace = useCallback(() => {
+      openNavigationCommandBar("replace");
+    }, [openNavigationCommandBar]);
+    const handleOpenInlineGoTo = useCallback(() => {
+      openNavigationCommandBar("go-to");
+    }, [openNavigationCommandBar]);
     const handleCloseInlineFind = useCallback(() => {
       setInlineFindOpen(false);
       surfaceRef.current?.clearSearch();
@@ -2649,6 +2872,35 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       },
       [refreshInlineFindResults],
     );
+    const handleInlineSearchScopeChange = useCallback(
+      (scope: NavigationSearchScope) => {
+        setInlineSearchScope(scope);
+        if (inlineFindQuery.trim()) {
+          const options: SearchOptions =
+            scope === "story"
+              ? { limit: 500, inStory: snapshot.activeStory }
+              : scope === "scope" && interactionGuardSnapshot.matchedScopeId
+                ? { limit: 500, inScope: interactionGuardSnapshot.matchedScopeId }
+                : { limit: 500 };
+          const results = searchRuntimeDocument(
+            activeRuntime,
+            surfaceRef.current,
+            inlineFindQuery.trim(),
+            options,
+          );
+          setInlineFindResults(results);
+          setInlineFindActiveIndex(0);
+          navigateInlineFindResult(results, 0);
+        }
+      },
+      [
+        activeRuntime,
+        inlineFindQuery,
+        interactionGuardSnapshot.matchedScopeId,
+        navigateInlineFindResult,
+        snapshot.activeStory,
+      ],
+    );
     const handleInlineFindNext = useCallback(() => {
       if (inlineFindResults.length === 0) {
         refreshInlineFindResults(inlineFindQuery, 0);
@@ -2667,6 +2919,26 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       navigateInlineFindResult,
       refreshInlineFindResults,
     ]);
+    const handleInlineReplaceCurrent = useCallback(() => {
+      const result = inlineFindResults[inlineFindActiveIndex];
+      if (!result) {
+        refreshInlineFindResults(inlineFindQuery, 0);
+        return;
+      }
+      applyRuntimeSelection(
+        activeRuntime,
+        createSelectionFromAnchor(result.anchor, result.storyTarget),
+      );
+      activeRuntime.replaceText(inlineReplaceText);
+      refreshInlineFindResults(inlineFindQuery, inlineFindActiveIndex);
+    }, [
+      activeRuntime,
+      inlineFindActiveIndex,
+      inlineFindQuery,
+      inlineFindResults,
+      inlineReplaceText,
+      refreshInlineFindResults,
+    ]);
     const handleInlineFindPrevious = useCallback(() => {
       if (inlineFindResults.length === 0) {
         refreshInlineFindResults(inlineFindQuery, 0);
@@ -2685,6 +2957,127 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       navigateInlineFindResult,
       refreshInlineFindResults,
     ]);
+    const navigationSearchScopes = useMemo<readonly NavigationSearchScopeOption[]>(
+      () => [
+        { id: "main", label: "Main" },
+        {
+          id: "story",
+          label: storyTargetLabel(snapshot.activeStory),
+          disabled: snapshot.activeStory.kind === "main",
+          disabledReason: "Already searching the main story.",
+        },
+        {
+          id: "scope",
+          label: "Scope",
+          disabled: !interactionGuardSnapshot.matchedScopeId,
+          disabledReason: "No workflow scope covers the current selection.",
+        },
+      ],
+      [interactionGuardSnapshot.matchedScopeId, snapshot.activeStory],
+    );
+    const navigationGoToGroups = useMemo<readonly NavigationGoToGroup[]>(
+      () =>
+        buildNavigationGoToGroups({
+          documentNavigation,
+          comments: snapshot.comments.threads,
+          revisions: snapshot.trackedChanges.revisions,
+          workflowScopeSnapshot,
+        }),
+      [
+        documentNavigation,
+        snapshot.comments.threads,
+        snapshot.trackedChanges.revisions,
+        workflowScopeSnapshot,
+      ],
+    );
+    const handleNavigationModeChange = useCallback(
+      (mode: NavigationCommandMode) => {
+        setNavigationCommandMode(mode);
+        if (mode !== "go-to" && inlineFindQuery.trim()) {
+          refreshInlineFindResults(inlineFindQuery, inlineFindActiveIndex);
+        }
+      },
+      [inlineFindActiveIndex, inlineFindQuery, refreshInlineFindResults],
+    );
+    const handleGoToTarget = useCallback(
+      (groupId: string, itemId: string) => {
+        const group = navigationGoToGroups.find((candidate) => candidate.id === groupId);
+        const item = group?.items.find((candidate) => candidate.id === itemId);
+        if (!group || !item) return;
+
+        if (group.id === "pages") {
+          const page = documentNavigation.pages.find(
+            (candidate) => `page:${candidate.pageIndex}` === item.id,
+          );
+          if (!page) return;
+          applyRuntimeSelection(
+            activeRuntime,
+            createCollapsedPublicSelection(page.startOffset),
+          );
+          handleCloseInlineFind();
+          return;
+        }
+
+        if (group.id === "headings") {
+          const heading = documentNavigation.headings.find(
+            (candidate) => `heading:${candidate.headingId}` === item.id,
+          );
+          if (!heading) return;
+          applyRuntimeSelection(
+            activeRuntime,
+            createCollapsedPublicSelection(heading.offset),
+          );
+          handleCloseInlineFind();
+          return;
+        }
+
+        if (group.id === "comments") {
+          const comment = snapshot.comments.threads.find(
+            (candidate) => `comment:${candidate.commentId}` === item.id,
+          );
+          if (!comment) return;
+          applyRuntimeSelection(activeRuntime, createSelectionFromAnchor(comment.anchor));
+          activeRuntime.openComment(comment.commentId);
+          handleCloseInlineFind();
+          return;
+        }
+
+        if (group.id === "changes") {
+          const revision = snapshot.trackedChanges.revisions.find(
+            (candidate) => `change:${candidate.revisionId}` === item.id,
+          );
+          if (!revision) return;
+          applyRuntimeSelection(
+            activeRuntime,
+            createSelectionFromAnchor(revision.anchor, revision.storyTarget),
+          );
+          handleCloseInlineFind();
+          return;
+        }
+
+        if (group.id === "scopes") {
+          const scope = workflowScopeSnapshot?.scopes.find(
+            (candidate) => `scope:${candidate.scopeId}` === item.id,
+          );
+          if (!scope) return;
+          applyRuntimeSelection(
+            activeRuntime,
+            createSelectionFromAnchor(scope.anchor, scope.storyTarget),
+          );
+          handleCloseInlineFind();
+        }
+      },
+      [
+        activeRuntime,
+        documentNavigation.headings,
+        documentNavigation.pages,
+        handleCloseInlineFind,
+        navigationGoToGroups,
+        snapshot.comments.threads,
+        snapshot.trackedChanges.revisions,
+        workflowScopeSnapshot?.scopes,
+      ],
+    );
     const suggestionsSnapshot = activeRuntime.getSuggestionsSnapshot();
     const caretCommentPoint =
       snapshot.selection.isCollapsed && snapshot.selection.activeRange.kind === "range"
@@ -3117,11 +3510,19 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
             shortcut.shortcut === "zoom-out" ? "out" : "reset";
           onZoomRequested(direction);
           handled = true;
-        } else if (shortcut.shortcut === "replace" && onReplaceRequested) {
-          onReplaceRequested({ selectionText: "", selectionRange: snapshot.selection });
+        } else if (shortcut.shortcut === "replace") {
+          if (onReplaceRequested) {
+            onReplaceRequested({ selectionText: "", selectionRange: snapshot.selection });
+          } else {
+            handleOpenInlineReplace();
+          }
           handled = true;
-        } else if (shortcut.shortcut === "go-to" && onGoToRequested) {
-          onGoToRequested({ selectionText: "", selectionRange: snapshot.selection });
+        } else if (shortcut.shortcut === "go-to") {
+          if (onGoToRequested) {
+            onGoToRequested({ selectionText: "", selectionRange: snapshot.selection });
+          } else {
+            handleOpenInlineGoTo();
+          }
           handled = true;
         } else if (shortcut.shortcut === "spell" && onSpellRequested) {
           onSpellRequested({ selectionText: "", selectionRange: snapshot.selection });
@@ -3619,6 +4020,10 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
           // Browser-native clipboard commands are best-effort fallbacks.
         }
       };
+      const createAgentRequestId = () =>
+        typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+          ? `req-${crypto.randomUUID()}`
+          : `req-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
 
       const defaultHost: EditorActionHostCallbacks = {
         onUndo: commands.onUndo,
@@ -3677,11 +4082,11 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
           : handleOpenInlineFind,
         onReplaceRequested: onReplaceRequested
           ? () => onReplaceRequested({ selectionText: "", selectionRange: snapshot.selection })
-          : undefined,
+          : handleOpenInlineReplace,
         onPrintRequested,
         onGoToRequested: onGoToRequested
           ? () => onGoToRequested({ selectionText: "", selectionRange: snapshot.selection })
-          : undefined,
+          : handleOpenInlineGoTo,
         onInsertRowAbove: commands.onAddRowBefore,
         onInsertRowBelow: commands.onAddRowAfter,
         onInsertColumnBefore: commands.onAddColumnBefore,
@@ -3691,6 +4096,17 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         onDeleteTable: commands.onDeleteTable,
         onMergeCells: commands.onMergeCells,
         onSplitCell: commands.onSplitCell,
+        onAskAgentForSelection: () => {
+          const { selection } = snapshot;
+          onEventRef.current?.({
+            type: "agent-on-selection-requested",
+            documentId,
+            requestId: createAgentRequestId(),
+            anchor: selection.activeRange,
+            ...(selection.storyTarget ? { storyTarget: selection.storyTarget } : {}),
+            selectionText: "",
+          });
+        },
       };
 
       return editorActionHost
@@ -3701,10 +4117,13 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       commands,
       editorActionHost,
       handleOpenInlineFind,
+      handleOpenInlineGoTo,
+      handleOpenInlineReplace,
       onFindRequested,
       onGoToRequested,
       onPrintRequested,
       onReplaceRequested,
+      documentId,
       snapshot.selection,
       styleCatalog,
     ]);
@@ -3730,7 +4149,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         documentNavigation={documentNavigation}
         reviewMode={reviewMode}
         markupDisplay={liveMarkupDisplay}
-        showUnsupportedObjectPreviews={effectiveShowUnsupportedPreviews}
+        unsupportedObjectPreviewsVisible={effectiveShowUnsupportedPreviews}
         activeRevisionId={activeRevisionId}
         activeSelectionToolKind={activeSelectionTool?.kind ?? null}
         showTrackedChanges={showTrackedChanges}
@@ -3874,13 +4293,25 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         onOpenInlineFind={handleOpenInlineFind}
         inlineFindBar={
           inlineFindOpen ? (
-            <TwInlineFindBar
+            <TwNavigationCommandBar
+              mode={navigationCommandMode}
               query={inlineFindQuery}
+              replacement={inlineReplaceText}
               activeIndex={inlineFindActiveIndex}
               resultCount={inlineFindResults.length}
+              searchScope={inlineSearchScope}
+              searchScopes={navigationSearchScopes}
+              goToGroups={navigationGoToGroups}
+              activeGoToGroupId={activeGoToGroupId}
+              onModeChange={handleNavigationModeChange}
               onQueryChange={handleInlineFindQueryChange}
+              onReplacementChange={setInlineReplaceText}
+              onSearchScopeChange={handleInlineSearchScopeChange}
               onPrevious={handleInlineFindPrevious}
               onNext={handleInlineFindNext}
+              onReplaceCurrent={handleInlineReplaceCurrent}
+              onGoToGroupChange={setActiveGoToGroupId}
+              onGoToTarget={handleGoToTarget}
               onClose={handleCloseInlineFind}
             />
           ) : null
@@ -3930,6 +4361,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
           });
         }}
         onDeselectObject={() => activeRuntime.deselectObject()}
+        onBeginObjectDrag={(input) => api.ui!.surface.beginObjectDrag(input)}
         onScopeAskAgent={(payload) => {
           // Resolve scope card + story through the mounted UI API seam so
           // the shell root does not re-own workflow facet reads.
@@ -4248,6 +4680,82 @@ function wrapSearchResultIndex(index: number, resultCount: number): number {
   return ((index % resultCount) + resultCount) % resultCount;
 }
 
+function storyTargetLabel(target: EditorStoryTarget): string {
+  switch (target.kind) {
+    case "main":
+      return "Story";
+    case "header":
+      return "Header";
+    case "footer":
+      return "Footer";
+    case "footnote":
+      return "Footnote";
+    case "endnote":
+      return "Endnote";
+  }
+}
+
+function buildNavigationGoToGroups(input: {
+  documentNavigation: DocumentNavigationSnapshot;
+  comments: readonly CommentSidebarThreadSnapshot[];
+  revisions: readonly TrackedChangeEntrySnapshot[];
+  workflowScopeSnapshot: WorkflowScopeSnapshot | null;
+}): readonly NavigationGoToGroup[] {
+  const { documentNavigation, comments, revisions, workflowScopeSnapshot } = input;
+  return [
+    {
+      id: "pages",
+      label: "Pages",
+      emptyLabel: "No page targets available.",
+      items: documentNavigation.pages.map((page) => ({
+        id: `page:${page.pageIndex}`,
+        label: `Page ${page.pageIndex + 1}`,
+        detail: `Section ${page.sectionIndex + 1}`,
+      })),
+    },
+    {
+      id: "headings",
+      label: "Headings",
+      emptyLabel: "No headings in this document.",
+      items: documentNavigation.headings.map((heading) => ({
+        id: `heading:${heading.headingId}`,
+        label: heading.text || `Heading ${heading.headingId}`,
+        detail: `Level ${heading.level} · Page ${heading.pageIndex + 1}`,
+      })),
+    },
+    {
+      id: "comments",
+      label: "Comments",
+      emptyLabel: "No comments in this document.",
+      items: comments.map((comment) => ({
+        id: `comment:${comment.commentId}`,
+        label: comment.anchorLabel || comment.excerpt || "Comment",
+        detail: `${comment.status} · ${comment.excerpt || `${comment.entryCount} entries`}`,
+      })),
+    },
+    {
+      id: "changes",
+      label: "Changes",
+      emptyLabel: "No tracked changes in this document.",
+      items: revisions.map((revision) => ({
+        id: `change:${revision.revisionId}`,
+        label: revision.label || revision.anchorLabel || "Tracked change",
+        detail: `${revision.kind} · ${revision.status}`,
+      })),
+    },
+    {
+      id: "scopes",
+      label: "Scopes",
+      emptyLabel: "No workflow scopes available.",
+      items: (workflowScopeSnapshot?.scopes ?? []).map((scope) => ({
+        id: `scope:${scope.scopeId}`,
+        label: scope.label || scope.scopeId,
+        detail: `${scope.mode}${scope.workItemId ? ` · ${scope.workItemId}` : ""}`,
+      })),
+    },
+  ];
+}
+
 function readTableRowCantSplit(
   document: CanonicalDocumentEnvelope,
   tableBlockIndex: number,