@beyondwork/docx-react-component 1.0.28 → 1.0.29

package/src/ui/WordReviewEditor.tsx

@@ -1,4086 +0,0 @@
-import React, {
-  forwardRef,
-  type FocusEvent,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-import type {
-  AutosaveState,
-  CompatibilityReport,
-  DocumentNavigationSnapshot,
-  EditorAnchorProjection,
-  EditorDatastoreAdapter,
-  EditorHostAdapter,
-  EditorSessionState,
-  ExportResult,
-  EditorError,
-  EditorStoryTarget,
-  EditorViewStateSnapshot,
-  EditorWarning,
-  ExportDocxOptions,
-  FieldSnapshot,
-  FormattingAlignment,
-  FormattingStateSnapshot,
-  HeaderFooterLinkPatch,
-  InteractionGuardSnapshot,
-  InsertImageOptions,
-  InsertTableOptions,
-  PageLayoutSnapshot,
-  PersistedEditorSnapshot,
-  RuntimeRenderSnapshot,
-  SectionBreakType,
-  SectionLayoutPatch,
-  SectionPageNumberingPatch,
-  SearchOptions,
-  SearchResultSnapshot,
-  SelectionSnapshot as PublicSelectionSnapshot,
-  StyleCatalogSnapshot,
-  SurfaceBlockSnapshot,
-  TrackedChangeEntrySnapshot,
-  TocRefreshResult,
-  UpdateFieldsResult,
-  ViewMode as EditorViewMode,
-  WorkflowBlockedCommandReason,
-  WorkflowMarkupSnapshot,
-  WorkflowScopeSnapshot,
-  WordReviewEditorChromeVisibility,
-  WordReviewEditorEvent,
-  WordReviewEditorProps,
-  WordReviewEditorRef,
-  WorkspaceMode,
-  ZoomLevel,
-} from "../api/public-types";
-import {
-  editorSessionStateFromPersistedSnapshot,
-  persistedSnapshotFromEditorSessionState,
-} from "../api/session-state.ts";
-import {
-  createDetachedAnchor,
-  createNodeAnchor,
-  createRangeAnchor,
-  storyTargetsEqual,
-  type TransactionMapping,
-} from "../core/selection/mapping.ts";
-import {
-  applyFormattingOperationToDocument,
-  getFormattingStateFromRenderSnapshot,
-} from "../core/commands/formatting-commands.ts";
-import {
-  applyParagraphStyleToDocument,
-  applyTableStyleToDocument,
-} from "../core/commands/style-commands.ts";
-import {
-  continueNumbering as continueListNumbering,
-  backspaceAtListStart,
-  indentListItems,
-  outdentListItems,
-  restartNumbering as restartListNumbering,
-  splitListParagraph,
-} from "../core/commands/list-commands.ts";
-import {
-  resolveActiveParagraphIndex,
-  setActiveParagraphIndentation,
-  setActiveParagraphTabStops,
-} from "../core/commands/paragraph-layout-commands.ts";
-import {
-  deleteSectionBreakAtSectionIndex,
-  insertSectionBreakAfterSectionIndex,
-  setHeaderFooterLinkAtSectionIndex,
-  setSectionPageNumberingAtSectionIndex,
-  updateSectionLayoutAtSectionIndex,
-} from "../core/commands/section-layout-commands.ts";
-import {
-  insertImage as insertImageInDocument,
-  resizeImage as resizeImageInCatalog,
-  repositionFloatingImage as repositionFloatingImageInDocument,
-} from "../core/commands/image-commands.ts";
-import {
-  applyTableStructureOperation,
-} from "../core/commands/table-structure-commands.ts";
-import {
-  deleteSelectionOrBackward,
-  deleteSelectionOrForward,
-  insertHardBreak as insertHardBreakInDocument,
-  insertPageBreak as insertPageBreakInDocument,
-  insertTab as insertTabInDocument,
-  insertText as insertTextInDocument,
-  insertTable as insertTableInDocument,
-  splitParagraph as splitParagraphInDocument,
-} from "../core/commands/text-commands.ts";
-import { type SelectionSnapshot as InternalSelectionSnapshot } from "../core/state/editor-state.ts";
-import {
-  getStoryBlocks,
-  replaceStoryBlocks,
-} from "../runtime/story-targeting.ts";
-import {
-  decodePersistedSourcePackageBytes,
-  hasValidPersistedSourcePackageDigest,
-} from "../io/source-package-provenance.ts";
-import { readOpcPackage } from "../io/opc/package-reader.ts";
-import { deriveCapabilities } from "../runtime/session-capabilities";
-import { searchDocument } from "../runtime/document-search.ts";
-import {
-  createEditorViewStateSnapshot,
-  createViewState,
-} from "../runtime/view-state.ts";
-import {
-  type TwProseMirrorSurfaceRef,
-} from "../ui-tailwind/editor-surface/tw-prosemirror-surface";
-import type { MediaPreviewDescriptor } from "../ui-tailwind/editor-surface/pm-state-from-snapshot";
-import {
-  incrementInvalidationCounter,
-  recordPerfSample,
-} from "../ui-tailwind/editor-surface/perf-probe.ts";
-import type { ReviewRailTab } from "../ui-tailwind/review/tw-review-rail";
-import {
-  selectMetaSlice,
-  selectReviewSlice,
-  selectStatusSlice,
-  selectSurfaceSlice,
-  selectToolbarSlice,
-  selectViewSlice,
-  shallowEqualRecord,
-  useRuntimeSnapshotSlice,
-  useRuntimeValue,
-} from "./runtime-snapshot-selectors.ts";
-import type { MarkupDisplay } from "./headless/comment-decoration-model";
-import type {
-  SelectionToolbarAnchor,
-  SelectionToolbarModel,
-  SuggestionCardModel,
-} from "./headless/selection-toolbar-model";
-import { type EditorCommandBag, useCommandBag } from "./editor-command-bag.ts";
-import { deriveVisibleWorkflowBlockedRails } from "./workflow-surface-blocked-rails.ts";
-import {
-  type WordReviewEditorRuntime,
-  persistAndExport as persistAndExportFromBoundary,
-  persistSession as persistSessionFromBoundary,
-  rejectExportWhileLoading as rejectExportWhileLoadingFromBoundary,
-  useEditorRuntimeBoundary,
-} from "./editor-runtime-boundary.ts";
-import {
-  downloadExportResult,
-  withExportDelivery,
-} from "./browser-export";
-import { EditorShellView } from "./editor-shell-view.tsx";
-import { EditorSurfaceController } from "./editor-surface-controller.tsx";
-
-export {
-  __createFallbackRuntime,
-  __resolveWordReviewEditorSource,
-} from "./editor-runtime-boundary.ts";
-
-const VISUALLY_HIDDEN_STYLES: React.CSSProperties = {
-  position: "absolute",
-  width: "1px",
-  height: "1px",
-  padding: 0,
-  margin: "-1px",
-  overflow: "hidden",
-  clip: "rect(0 0 0 0)",
-  whiteSpace: "nowrap",
-  border: 0,
-};
-
-const BROWSER_SAFE_PREVIEW_TYPES = new Set([
-  "image/png",
-  "image/jpeg",
-  "image/jpg",
-  "image/gif",
-  "image/webp",
-  "image/bmp",
-]);
-
-const ACCESSIBLE_REGION_ORDER = [
-  "toolbar",
-  "document",
-  "review-rail",
-  "status",
-] as const;
-
-type AccessibleRegionId = (typeof ACCESSIBLE_REGION_ORDER)[number];
-
-type SelectionToolbarDismissReason =
-  | "blur"
-  | "chrome-action"
-  | "comment-action"
-  | "escape";
-
-export function __createWordReviewEditorRefBridge(
-  runtime: WordReviewEditorRuntime,
-  mountedSurface?: TwProseMirrorSurfaceRef | null,
-): WordReviewEditorRef {
-  return {
-    focus: () => runtime.focus(),
-    blur: () => runtime.blur(),
-    undo: () => runtime.undo(),
-    redo: () => runtime.redo(),
-    replaceText: (text, target) => runtime.replaceText(text, target),
-    addComment: (params) => runtime.addComment(params),
-    openComment: (commentId) => runtime.openComment(commentId),
-    resolveComment: (commentId) => runtime.resolveComment(commentId),
-    reopenComment: (commentId) => runtime.reopenComment(commentId),
-    addCommentReply: (commentId, body) => runtime.addCommentReply(commentId, body),
-    editCommentBody: (commentId, body) => runtime.editCommentBody(commentId, body),
-    deleteComment: (commentId) => {
-      applyRuntimeDeleteComment(runtime, commentId);
-    },
-    acceptChange: (changeId) => runtime.acceptChange(changeId),
-    rejectChange: (changeId) => runtime.rejectChange(changeId),
-    acceptAllChanges: () => runtime.acceptAllChanges(),
-    rejectAllChanges: () => runtime.rejectAllChanges(),
-    exportDocx: (options) => runtime.exportDocx(options),
-    getSessionState: () => runtime.getSessionState(),
-    getSnapshot: () => runtime.getPersistedSnapshot(),
-    getRenderSnapshot: () => clonePublicValue(runtime.getRenderSnapshot()),
-    getCompatibilityReport: () => runtime.getCompatibilityReport(),
-    getWarnings: () => runtime.getWarnings(),
-    getCommentSidebarSnapshot: () =>
-      clonePublicValue(runtime.getRenderSnapshot().comments),
-    getTrackedChangesSnapshot: () =>
-      clonePublicValue(runtime.getRenderSnapshot().trackedChanges),
-    getComments: () => clonePublicValue(runtime.getRenderSnapshot().comments),
-    getTrackedChanges: () =>
-      clonePublicValue(runtime.getRenderSnapshot().trackedChanges),
-    isDirty: () => runtime.getRenderSnapshot().isDirty,
-    getFormattingState: () => getFormattingStateFromRenderSnapshot(runtime.getRenderSnapshot()),
-    getStyleCatalog: () => getRuntimeStyleCatalog(runtime),
-    toggleBold: () => {
-      applyRuntimeFormattingOperation(runtime, { type: "toggle", mark: "bold" });
-    },
-    toggleItalic: () => {
-      applyRuntimeFormattingOperation(runtime, { type: "toggle", mark: "italic" });
-    },
-    toggleUnderline: () => {
-      applyRuntimeFormattingOperation(runtime, { type: "toggle", mark: "underline" });
-    },
-    toggleStrikethrough: () => {
-      applyRuntimeFormattingOperation(runtime, {
-        type: "toggle",
-        mark: "strikethrough",
-      });
-    },
-    toggleSuperscript: () => {
-      applyRuntimeFormattingOperation(runtime, {
-        type: "toggle",
-        mark: "superscript",
-      });
-    },
-    toggleSubscript: () => {
-      applyRuntimeFormattingOperation(runtime, { type: "toggle", mark: "subscript" });
-    },
-    setFontFamily: (fontFamily) => {
-      applyRuntimeFormattingOperation(runtime, {
-        type: "set-font-family",
-        fontFamily,
-      });
-    },
-    setFontSize: (size) => {
-      applyRuntimeFormattingOperation(runtime, { type: "set-font-size", size });
-    },
-    setTextColor: (color) => {
-      applyRuntimeFormattingOperation(runtime, { type: "set-text-color", color });
-    },
-    setHighlightColor: (color) => {
-      applyRuntimeFormattingOperation(runtime, {
-        type: "set-highlight-color",
-        color,
-      });
-    },
-    setAlignment: (alignment) => {
-      applyRuntimeFormattingOperation(runtime, {
-        type: "set-alignment",
-        alignment,
-      });
-    },
-    setParagraphStyle: (styleId) => {
-      applyRuntimeParagraphStyle(runtime, styleId);
-    },
-    setTableStyle: (styleId) => {
-      applyRuntimeTableStyle(runtime, styleId);
-    },
-    indent: () => {
-      applyRuntimeFormattingOperation(runtime, { type: "indent" });
-    },
-    outdent: () => {
-      applyRuntimeFormattingOperation(runtime, { type: "outdent" });
-    },
-    insertPageBreak: () => {
-      applyRuntimeInsertPageBreak(runtime);
-    },
-    insertTable: (options) => {
-      applyRuntimeInsertTable(runtime, options);
-    },
-    insertImage: (options) => {
-      applyRuntimeInsertImage(runtime, options);
-    },
-    addRowBefore: () => {
-      applyRuntimeTableStructureOperation(runtime, mountedSurface ?? null, {
-        type: "add-row-before",
-      });
-    },
-    addRowAfter: () => {
-      applyRuntimeTableStructureOperation(runtime, mountedSurface ?? null, {
-        type: "add-row-after",
-      });
-    },
-    addColumnBefore: () => {
-      applyRuntimeTableStructureOperation(runtime, mountedSurface ?? null, {
-        type: "add-column-before",
-      });
-    },
-    addColumnAfter: () => {
-      applyRuntimeTableStructureOperation(runtime, mountedSurface ?? null, {
-        type: "add-column-after",
-      });
-    },
-    deleteRow: () => {
-      applyRuntimeTableStructureOperation(runtime, mountedSurface ?? null, {
-        type: "delete-row",
-      });
-    },
-    deleteColumn: () => {
-      applyRuntimeTableStructureOperation(runtime, mountedSurface ?? null, {
-        type: "delete-column",
-      });
-    },
-    deleteTable: () => {
-      applyRuntimeTableStructureOperation(runtime, mountedSurface ?? null, {
-        type: "delete-table",
-      });
-    },
-    mergeCells: () => {
-      applyRuntimeTableStructureOperation(runtime, mountedSurface ?? null, {
-        type: "merge-cells",
-      });
-    },
-    splitCell: () => {
-      applyRuntimeTableStructureOperation(runtime, mountedSurface ?? null, {
-        type: "split-cell",
-      });
-    },
-    setCellBackground: (color) => {
-      applyRuntimeTableStructureOperation(runtime, mountedSurface ?? null, {
-        type: "set-cell-background",
-        color,
-      });
-    },
-    search: (query, options) =>
-      searchRuntimeDocument(runtime, mountedSurface ?? null, query, options),
-    clearSearch: () => {
-      mountedSurface?.clearSearch();
-    },
-    setSelection: (selection) => {
-      applyRuntimeSelection(
-        runtime,
-        normalizeRequestedSelection(runtime.getRenderSnapshot(), selection),
-      );
-    },
-    scrollToRevision: (revisionId: string) => {
-      const revision = runtime.getRenderSnapshot().trackedChanges.revisions.find(
-        (r) => r.revisionId === revisionId,
-      );
-      if (!revision || revision.anchor.kind === "detached") return;
-      applyRuntimeSelection(runtime, createSelectionFromAnchor(revision.anchor));
-    },
-    scrollToComment: (commentId: string) => {
-      const comment = runtime.getRenderSnapshot().comments.threads.find(
-        (t) => t.commentId === commentId,
-      );
-      if (!comment || comment.anchor.kind === "detached") return;
-      applyRuntimeSelection(runtime, createSelectionFromAnchor(comment.anchor));
-    },
-    openStory: (target: EditorStoryTarget) => {
-      runtime.openStory(target);
-    },
-    closeStory: () => {
-      runtime.closeStory();
-    },
-    getPageLayoutSnapshot: () => {
-      return clonePublicValue(runtime.getPageLayoutSnapshot());
-    },
-    getDocumentNavigationSnapshot: () => {
-      return clonePublicValue(runtime.getDocumentNavigationSnapshot());
-    },
-    getFieldSnapshot: () => {
-      return clonePublicValue(runtime.getFieldSnapshot());
-    },
-    updateFields: (options) => {
-      return runtime.updateFields(options);
-    },
-    updateTableOfContents: (options) => {
-      return runtime.updateTableOfContents(options);
-    },
-    getViewState: () => {
-      return clonePublicValue(runtime.getViewState());
-    },
-    setDocumentMode: (mode) => {
-      runtime.setDocumentMode(mode);
-    },
-    getProtectionSnapshot: () => {
-      return clonePublicValue(runtime.getProtectionSnapshot());
-    },
-    setWorkspaceMode: (mode) => {
-      runtime.setWorkspaceMode(mode);
-    },
-    setZoom: (level) => {
-      runtime.setZoom(level);
-    },
-    insertSectionBreak: (type, options) => {
-      applyRuntimeInsertSectionBreak(runtime, type, options);
-    },
-    deleteSectionBreak: (sectionIndex) => {
-      applyRuntimeDeleteSectionBreak(runtime, sectionIndex);
-    },
-    updateSectionLayout: (sectionIndex, patch) => {
-      applyRuntimeUpdateSectionLayout(runtime, sectionIndex, patch);
-    },
-    setSectionPageNumbering: (sectionIndex, patch) => {
-      applyRuntimeSetSectionPageNumbering(runtime, sectionIndex, patch);
-    },
-    setHeaderFooterLink: (sectionIndex, params) => {
-      applyRuntimeSetHeaderFooterLink(runtime, sectionIndex, params);
-    },
-    setImageLayout: (mediaId, dimensions) => {
-      applyRuntimeImageResize(runtime, mediaId, dimensions);
-    },
-    setImageFrame: (mediaId, offsets) => {
-      applyRuntimeImageReposition(runtime, mediaId, offsets);
-    },
-    setWorkflowOverlay: (overlay) => {
-      runtime.setWorkflowOverlay(clonePublicValue(overlay));
-    },
-    clearWorkflowOverlay: () => {
-      runtime.clearWorkflowOverlay();
-    },
-    getWorkflowScopeSnapshot: () => {
-      return clonePublicValue(runtime.getWorkflowScopeSnapshot());
-    },
-    getInteractionGuardSnapshot: () => {
-      return clonePublicValue(runtime.getInteractionGuardSnapshot());
-    },
-    getWorkflowMarkupSnapshot: () => {
-      return clonePublicValue(runtime.getWorkflowMarkupSnapshot());
-    },
-    setHostAnnotationOverlay: (overlay) => {
-      runtime.setHostAnnotationOverlay(clonePublicValue(overlay));
-    },
-    clearHostAnnotationOverlay: () => {
-      runtime.clearHostAnnotationOverlay();
-    },
-    getHostAnnotationSnapshot: () => {
-      return clonePublicValue(runtime.getHostAnnotationSnapshot());
-    },
-    getWorkflowCandidateRanges: (options) => {
-      return clonePublicValue(runtime.getWorkflowCandidateRanges(options));
-    },
-    replaceWorkflowMarkupText: (markupId, text) => {
-      runtime.replaceWorkflowMarkupText(markupId, text);
-    },
-  };
-}
-
-export function __applyRuntimeTextCommand(
-  runtime: WordReviewEditorRuntime,
-  command:
-    | { type: "insert-text"; text: string }
-    | { type: "delete-backward" }
-    | { type: "delete-forward" }
-    | { type: "insert-tab" }
-    | { type: "outdent-tab" }
-    | { type: "insert-hard-break" }
-    | { type: "split-paragraph" },
-): void {
-  applyRuntimeTextCommand(runtime, command);
-}
-
-export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditorProps>(
-  function WordReviewEditor(props, ref) {
-    const {
-      currentUser,
-      hostAdapter,
-      datastore,
-      documentId,
-      externalDocSource,
-      externalDocumentRevision,
-      initialDocx,
-      loadRevision,
-      loadSourcePolicy = "prefer-saved-state",
-      initialSessionState,
-      initialSnapshot,
-      initialSourceLabel,
-      markupDisplay,
-      onError,
-      onEvent,
-      onWarning,
-      readOnly = false,
-      reviewMode = "review",
-      suggestionsEnabled = false,
-      showReviewPanel = true,
-      chromeVisibility,
-    } = props;
-
-    const [activeRailTab, setActiveRailTab] = useState<ReviewRailTab>("comments");
-    const [showTrackedChanges, setShowTrackedChanges] = useState(false);
-    const [activeRevisionId, setActiveRevisionId] = useState<string | undefined>();
-    const [suppressedSuggestionRevisionId, setSuppressedSuggestionRevisionId] = useState<string | null>(null);
-    const [selectionToolbarAnchor, setSelectionToolbarAnchor] = useState<SelectionToolbarAnchor | null>(null);
-    const [selectionToolbarDismissedKey, setSelectionToolbarDismissedKey] = useState<string | null>(null);
-    const [selectionToolbarFocusWithin, setSelectionToolbarFocusWithin] = useState(false);
-    const surfaceRef = useRef<TwProseMirrorSurfaceRef | null>(null);
-    const selectionToolbarElementRef = useRef<HTMLDivElement | null>(null);
-    const shellRef = useRef<HTMLDivElement | null>(null);
-    const lastSelectionToolbarKeyRef = useRef<string | null>(null);
-    const lastAnnouncedErrorIdRef = useRef<string | null>(null);
-    const {
-      runtime,
-      loadError,
-      activeRuntime,
-      fallbackSnapshot,
-      loadingSessionState,
-      loadingViewState,
-      loadingNavigation,
-      hostAdapterRef,
-      datastoreRef,
-      onEventRef,
-      onWarningRef,
-      onErrorRef,
-      autosaveTimerRef,
-      lastSavedRevisionTokenRef,
-      runtimeViewStateSeedRef,
-    } = useEditorRuntimeBoundary(props);
-    const metaSlice = useRuntimeSnapshotSlice(
-      runtime,
-      fallbackSnapshot,
-      selectMetaSlice,
-      shallowEqualRecord,
-    );
-    const toolbarSlice = useRuntimeSnapshotSlice(
-      runtime,
-      fallbackSnapshot,
-      selectToolbarSlice,
-      shallowEqualRecord,
-    );
-    const surfaceSlice = useRuntimeSnapshotSlice(
-      runtime,
-      fallbackSnapshot,
-      selectSurfaceSlice,
-      shallowEqualRecord,
-    );
-    const reviewSlice = useRuntimeSnapshotSlice(
-      runtime,
-      fallbackSnapshot,
-      selectReviewSlice,
-      shallowEqualRecord,
-    );
-    const viewSlice = useRuntimeSnapshotSlice(
-      runtime,
-      fallbackSnapshot,
-      selectViewSlice,
-      shallowEqualRecord,
-    );
-    const statusSlice = useRuntimeSnapshotSlice(
-      runtime,
-      fallbackSnapshot,
-      selectStatusSlice,
-      shallowEqualRecord,
-    );
-    const snapshot = useMemo(
-      () => ({
-        documentId: metaSlice.documentId,
-        sessionId: metaSlice.sessionId,
-        sourceLabel: metaSlice.sourceLabel,
-        revisionToken: surfaceSlice.revisionToken,
-        isReady: toolbarSlice.isReady,
-        isDirty: statusSlice.isDirty,
-        readOnly: toolbarSlice.readOnly,
-        documentMode: viewSlice.documentMode,
-        selection: surfaceSlice.selection,
-        activeStory: viewSlice.activeStory,
-        pageLayout: viewSlice.pageLayout,
-        documentStats: statusSlice.documentStats,
-        comments: reviewSlice.comments,
-        trackedChanges: reviewSlice.trackedChanges,
-        compatibility: reviewSlice.compatibility,
-        warnings: statusSlice.warnings,
-        fatalError: statusSlice.fatalError,
-        commandState: toolbarSlice.commandState,
-        surface: surfaceSlice.surface,
-        protectionSnapshot: statusSlice.protectionSnapshot,
-      }),
-      [
-        metaSlice.documentId,
-        metaSlice.sessionId,
-        metaSlice.sourceLabel,
-        surfaceSlice.revisionToken,
-        surfaceSlice.selection,
-        surfaceSlice.surface,
-        toolbarSlice.isReady,
-        toolbarSlice.readOnly,
-        toolbarSlice.commandState,
-        statusSlice.isDirty,
-        statusSlice.documentStats,
-        statusSlice.warnings,
-        statusSlice.fatalError,
-        statusSlice.protectionSnapshot,
-        reviewSlice.comments,
-        reviewSlice.trackedChanges,
-        reviewSlice.compatibility,
-        viewSlice.documentMode,
-        viewSlice.activeStory,
-        viewSlice.pageLayout,
-      ],
-    );
-    const viewState = useRuntimeValue(
-      runtime
-        ? {
-            subscribe: (listener) => runtime.subscribe(listener),
-            getValue: () => runtime.getViewState(),
-          }
-        : null,
-      loadingViewState,
-    );
-    const isPageWorkspace = viewState.workspaceMode === "page";
-    const liveMarkupDisplay = __resolveLiveMarkupDisplay(markupDisplay, isPageWorkspace);
-    const documentNavigation = useRuntimeValue(
-      runtime
-        ? {
-            subscribe: (listener) => runtime.subscribe(listener),
-            getValue: () => runtime.getDocumentNavigationSnapshot(),
-          }
-        : null,
-      loadingNavigation,
-    );
-    const workflowScopeSnapshot = useRuntimeValue(
-      runtime
-        ? {
-            subscribe: (listener) => runtime.subscribe(listener),
-            getValue: () => runtime.getWorkflowScopeSnapshot(),
-          }
-        : null,
-      null,
-      workflowScopeSnapshotsEqual,
-    );
-    const interactionGuardSnapshot = useRuntimeValue(
-      runtime
-        ? {
-            subscribe: (listener) => runtime.subscribe(listener),
-            getValue: () => runtime.getInteractionGuardSnapshot(),
-          }
-        : null,
-      { effectiveMode: "edit", blockedReasons: [] } satisfies InteractionGuardSnapshot,
-      interactionGuardSnapshotsEqual,
-    );
-    const workflowMarkupSnapshot = useMemo(
-      () => (runtime ? runtime.getWorkflowMarkupSnapshot() : null),
-      [runtime, snapshot.revisionToken],
-    );
-    const workflowBlockedRails = useMemo(
-      () => deriveVisibleWorkflowBlockedRails(snapshot.surface, workflowMarkupSnapshot),
-      [snapshot.surface, workflowMarkupSnapshot],
-    );
-    const canonicalDocument = useMemo(
-      () => (runtime ? runtime.getCanonicalDocument() : loadingSessionState.canonicalDocument),
-      [loadingSessionState.canonicalDocument, runtime, snapshot.revisionToken],
-    );
-    const effectiveViewMode = deriveEditorViewMode(snapshot.readOnly, reviewMode);
-
-    useEffect(() => {
-      activeRuntime.setViewMode(effectiveViewMode);
-    }, [activeRuntime, effectiveViewMode]);
-
-    useEffect(() => {
-      activeRuntime.setDocumentMode(suggestionsEnabled ? "suggesting" : "editing");
-    }, [activeRuntime, suggestionsEnabled]);
-
-    useEffect(() => {
-      runtimeViewStateSeedRef.current = {
-        workspaceMode: viewState.workspaceMode,
-        zoomLevel: viewState.zoomLevel,
-      };
-    }, [viewState.workspaceMode, viewState.zoomLevel]);
-
-    useEffect(() => {
-      recordPerfSample("shell.render");
-      incrementInvalidationCounter("shell.rerenders");
-    }, [snapshot.revisionToken, snapshot.selection, viewState, documentNavigation]);
-
-    useImperativeHandle(
-      ref,
-      () => ({
-        focus: () => activeRuntime.focus(),
-        blur: () => activeRuntime.blur(),
-        undo: () => activeRuntime.undo(),
-        redo: () => activeRuntime.redo(),
-        replaceText: (text, target) => activeRuntime.replaceText(text, target),
-        addComment: (params) =>
-          activeRuntime.addComment({
-            ...params,
-            authorId: params.authorId ?? currentUser.userId,
-          }),
-        openComment: (commentId) => activeRuntime.openComment(commentId),
-        resolveComment: (commentId) => activeRuntime.resolveComment(commentId),
-        reopenComment: (commentId) => activeRuntime.reopenComment(commentId),
-        addCommentReply: (commentId, body) =>
-          activeRuntime.addCommentReply(commentId, body, currentUser.userId),
-        editCommentBody: (commentId, body) =>
-          activeRuntime.editCommentBody(commentId, body),
-        deleteComment: (commentId) => {
-          applyRuntimeDeleteComment(activeRuntime, commentId);
-        },
-        acceptChange: (changeId) => activeRuntime.acceptChange(changeId),
-        rejectChange: (changeId) => activeRuntime.rejectChange(changeId),
-        acceptAllChanges: () => activeRuntime.acceptAllChanges(),
-        rejectAllChanges: () => activeRuntime.rejectAllChanges(),
-        exportDocx: (options) =>
-          runtime
-            ? persistAndExportFromBoundary({
-                hostAdapter: hostAdapterRef.current,
-                datastore: datastoreRef.current,
-                documentId,
-                runtime,
-                onError: onErrorRef.current,
-                onEvent: onEventRef.current,
-                options,
-                lastSavedRevisionTokenRef,
-                autosaveTimerRef,
-              })
-            : rejectExportWhileLoadingFromBoundary({
-                documentId,
-                hostAdapter: hostAdapterRef.current,
-                datastore: datastoreRef.current,
-                onError: onErrorRef.current,
-                onEvent: onEventRef.current,
-              }),
-        getSessionState: () => activeRuntime.getSessionState(),
-        getSnapshot: () => activeRuntime.getPersistedSnapshot(),
-        getRenderSnapshot: () => clonePublicValue(activeRuntime.getRenderSnapshot()),
-        getCompatibilityReport: () => activeRuntime.getCompatibilityReport(),
-        getWarnings: () => activeRuntime.getWarnings(),
-        getCommentSidebarSnapshot: () =>
-          clonePublicValue(activeRuntime.getRenderSnapshot().comments),
-        getTrackedChangesSnapshot: () =>
-          clonePublicValue(activeRuntime.getRenderSnapshot().trackedChanges),
-        getComments: () =>
-          clonePublicValue(activeRuntime.getRenderSnapshot().comments),
-        getTrackedChanges: () =>
-          clonePublicValue(activeRuntime.getRenderSnapshot().trackedChanges),
-        isDirty: () => activeRuntime.getRenderSnapshot().isDirty,
-        getFormattingState: () =>
-          getFormattingStateFromRenderSnapshot(activeRuntime.getRenderSnapshot()),
-        getStyleCatalog: () => getRuntimeStyleCatalog(activeRuntime),
-        toggleBold: () => {
-          applyRuntimeFormattingOperation(activeRuntime, {
-            type: "toggle",
-            mark: "bold",
-          });
-        },
-        toggleItalic: () => {
-          applyRuntimeFormattingOperation(activeRuntime, {
-            type: "toggle",
-            mark: "italic",
-          });
-        },
-        toggleUnderline: () => {
-          applyRuntimeFormattingOperation(activeRuntime, {
-            type: "toggle",
-            mark: "underline",
-          });
-        },
-        toggleStrikethrough: () => {
-          applyRuntimeFormattingOperation(activeRuntime, {
-            type: "toggle",
-            mark: "strikethrough",
-          });
-        },
-        toggleSuperscript: () => {
-          applyRuntimeFormattingOperation(activeRuntime, {
-            type: "toggle",
-            mark: "superscript",
-          });
-        },
-        toggleSubscript: () => {
-          applyRuntimeFormattingOperation(activeRuntime, {
-            type: "toggle",
-            mark: "subscript",
-          });
-        },
-        setFontFamily: (fontFamily) => {
-          applyRuntimeFormattingOperation(activeRuntime, {
-            type: "set-font-family",
-            fontFamily,
-          });
-        },
-        setFontSize: (size) => {
-          applyRuntimeFormattingOperation(activeRuntime, {
-            type: "set-font-size",
-            size,
-          });
-        },
-        setTextColor: (color) => {
-          applyRuntimeFormattingOperation(activeRuntime, {
-            type: "set-text-color",
-            color,
-          });
-        },
-        setHighlightColor: (color) => {
-          applyRuntimeFormattingOperation(activeRuntime, {
-            type: "set-highlight-color",
-            color,
-          });
-        },
-        setAlignment: (alignment) => {
-          applyRuntimeFormattingOperation(activeRuntime, {
-            type: "set-alignment",
-            alignment,
-          });
-        },
-        setParagraphStyle: (styleId) => {
-          applyRuntimeParagraphStyle(activeRuntime, styleId);
-        },
-        setTableStyle: (styleId) => {
-          applyRuntimeTableStyle(activeRuntime, styleId);
-        },
-        indent: () => {
-          applyRuntimeFormattingOperation(activeRuntime, { type: "indent" });
-        },
-        outdent: () => {
-          applyRuntimeFormattingOperation(activeRuntime, { type: "outdent" });
-        },
-        insertPageBreak: () => {
-          applyRuntimeInsertPageBreak(activeRuntime);
-        },
-        insertTable: (options) => {
-          applyRuntimeInsertTable(activeRuntime, options);
-        },
-        insertImage: (options) => {
-          applyRuntimeInsertImage(activeRuntime, options);
-        },
-        addRowBefore: () => {
-          applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current, {
-            type: "add-row-before",
-          });
-        },
-        addRowAfter: () => {
-          applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current, {
-            type: "add-row-after",
-          });
-        },
-        addColumnBefore: () => {
-          applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current, {
-            type: "add-column-before",
-          });
-        },
-        addColumnAfter: () => {
-          applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current, {
-            type: "add-column-after",
-          });
-        },
-        deleteRow: () => {
-          applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current, {
-            type: "delete-row",
-          });
-        },
-        deleteColumn: () => {
-          applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current, {
-            type: "delete-column",
-          });
-        },
-        deleteTable: () => {
-          applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current, {
-            type: "delete-table",
-          });
-        },
-        mergeCells: () => {
-          applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current, {
-            type: "merge-cells",
-          });
-        },
-        splitCell: () => {
-          applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current, {
-            type: "split-cell",
-          });
-        },
-        setCellBackground: (color) => {
-          applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current, {
-            type: "set-cell-background",
-            color,
-          });
-        },
-        search: (query, options) =>
-          searchRuntimeDocument(
-            activeRuntime,
-            surfaceRef.current,
-            query,
-            options,
-          ),
-        clearSearch: () => {
-          surfaceRef.current?.clearSearch();
-        },
-        setSelection: (selection) => {
-          applyRuntimeSelection(
-            activeRuntime,
-            normalizeRequestedSelection(activeRuntime.getRenderSnapshot(), selection),
-          );
-        },
-        scrollToRevision: (revisionId: string) => {
-          const revision = activeRuntime.getRenderSnapshot().trackedChanges.revisions.find(
-            (r) => r.revisionId === revisionId,
-          );
-          if (!revision || revision.anchor.kind === "detached") return;
-          applyRuntimeSelection(
-            activeRuntime,
-            createSelectionFromAnchor(revision.anchor, revision.storyTarget),
-          );
-        },
-        scrollToComment: (commentId: string) => {
-          const comment = activeRuntime.getRenderSnapshot().comments.threads.find(
-            (t) => t.commentId === commentId,
-          );
-          if (!comment || comment.anchor.kind === "detached") return;
-          applyRuntimeSelection(
-            activeRuntime,
-            createSelectionFromAnchor(comment.anchor),
-          );
-        },
-        openStory: (target: EditorStoryTarget) => {
-          activeRuntime.openStory(target);
-        },
-        closeStory: () => {
-          activeRuntime.closeStory();
-        },
-        getPageLayoutSnapshot: () => {
-          return clonePublicValue(activeRuntime.getPageLayoutSnapshot());
-        },
-        getDocumentNavigationSnapshot: () => {
-          return clonePublicValue(activeRuntime.getDocumentNavigationSnapshot());
-        },
-        getFieldSnapshot: () => {
-          return clonePublicValue(activeRuntime.getFieldSnapshot());
-        },
-        updateFields: (options) => {
-          return activeRuntime.updateFields(options);
-        },
-        updateTableOfContents: (options) => {
-          return activeRuntime.updateTableOfContents(options);
-        },
-        getViewState: () => {
-          return clonePublicValue(activeRuntime.getViewState());
-        },
-        setDocumentMode: (mode) => {
-          activeRuntime.setDocumentMode(mode);
-        },
-        getProtectionSnapshot: () => {
-          return clonePublicValue(activeRuntime.getProtectionSnapshot());
-        },
-        setWorkspaceMode: (mode) => {
-          activeRuntime.setWorkspaceMode(mode);
-        },
-        setZoom: (level) => {
-          activeRuntime.setZoom(level);
-        },
-        insertSectionBreak: (type, options) => {
-          applyRuntimeInsertSectionBreak(activeRuntime, type, options);
-        },
-        deleteSectionBreak: (sectionIndex) => {
-          applyRuntimeDeleteSectionBreak(activeRuntime, sectionIndex);
-        },
-        updateSectionLayout: (sectionIndex, patch) => {
-          applyRuntimeUpdateSectionLayout(activeRuntime, sectionIndex, patch);
-        },
-        setSectionPageNumbering: (sectionIndex, patch) => {
-          applyRuntimeSetSectionPageNumbering(activeRuntime, sectionIndex, patch);
-        },
-        setHeaderFooterLink: (sectionIndex, params) => {
-          applyRuntimeSetHeaderFooterLink(activeRuntime, sectionIndex, params);
-        },
-        setImageLayout: (mediaId, dimensions) => {
-          applyRuntimeImageResize(activeRuntime, mediaId, dimensions);
-        },
-        setImageFrame: (mediaId, offsets) => {
-          applyRuntimeImageReposition(activeRuntime, mediaId, offsets);
-        },
-        setWorkflowOverlay: (overlay) => {
-          activeRuntime.setWorkflowOverlay(clonePublicValue(overlay));
-        },
-        clearWorkflowOverlay: () => {
-          activeRuntime.clearWorkflowOverlay();
-        },
-        getWorkflowScopeSnapshot: () => {
-          return clonePublicValue(activeRuntime.getWorkflowScopeSnapshot());
-        },
-        getInteractionGuardSnapshot: () => {
-          return clonePublicValue(activeRuntime.getInteractionGuardSnapshot());
-        },
-        getWorkflowMarkupSnapshot: () => {
-          return clonePublicValue(activeRuntime.getWorkflowMarkupSnapshot());
-        },
-        setHostAnnotationOverlay: (overlay) => {
-          activeRuntime.setHostAnnotationOverlay(clonePublicValue(overlay));
-        },
-        clearHostAnnotationOverlay: () => {
-          activeRuntime.clearHostAnnotationOverlay();
-        },
-        getHostAnnotationSnapshot: () => {
-          return clonePublicValue(activeRuntime.getHostAnnotationSnapshot());
-        },
-        getWorkflowCandidateRanges: (options) => {
-          return clonePublicValue(activeRuntime.getWorkflowCandidateRanges(options));
-        },
-        replaceWorkflowMarkupText: (markupId, text) => {
-          activeRuntime.replaceWorkflowMarkupText(markupId, text);
-        },
-      }),
-      [activeRuntime, currentUser.userId, documentId, runtime],
-    );
-
-    useEffect(() => {
-      const canPersist =
-        Boolean(hostAdapterRef.current?.saveSession) || Boolean(datastoreRef.current?.saveSnapshot);
-      if (!canPersist || props.autosave?.enabled === false || !runtime || readOnly) {
-        if (autosaveTimerRef.current) {
-          clearTimeout(autosaveTimerRef.current);
-          autosaveTimerRef.current = null;
-        }
-        return;
-      }
-
-      if (!snapshot.isReady || !snapshot.isDirty) {
-        return;
-      }
-
-      if (lastSavedRevisionTokenRef.current === snapshot.revisionToken) {
-        return;
-      }
-
-      if (autosaveTimerRef.current) {
-        clearTimeout(autosaveTimerRef.current);
-      }
-
-      const debounceMs = props.autosave?.debounceMs ?? 800;
-      if (debounceMs <= 0) {
-        void persistSessionFromBoundary({
-          hostAdapter: hostAdapterRef.current,
-          datastore: datastoreRef.current,
-          documentId,
-          runtime,
-          isAutosave: true,
-          onError: onErrorRef.current,
-          onEvent: onEventRef.current,
-          lastSavedRevisionTokenRef,
-        });
-        return;
-      }
-
-      autosaveTimerRef.current = setTimeout(() => {
-        void persistSessionFromBoundary({
-          hostAdapter: hostAdapterRef.current,
-          datastore: datastoreRef.current,
-          documentId,
-          runtime,
-          isAutosave: true,
-          onError: onErrorRef.current,
-          onEvent: onEventRef.current,
-          lastSavedRevisionTokenRef,
-        });
-      }, debounceMs);
-
-      return () => {
-        if (autosaveTimerRef.current) {
-          clearTimeout(autosaveTimerRef.current);
-          autosaveTimerRef.current = null;
-        }
-      };
-    }, [
-      documentId,
-      props.autosave?.debounceMs,
-      props.autosave?.enabled,
-      readOnly,
-      runtime,
-      snapshot.isDirty,
-      snapshot.isReady,
-      snapshot.revisionToken,
-    ]);
-
-    // Auto-select the most relevant rail tab based on content.
-    // Health tab was moved to toolbar popover — rail has only comments/changes.
-    useEffect(() => {
-      if (
-        activeRailTab === "comments" &&
-        snapshot.comments.totalCount === 0 &&
-        snapshot.trackedChanges.totalCount > 0
-      ) {
-        setActiveRailTab("changes");
-        return;
-      }
-    }, [
-      activeRailTab,
-      loadError,
-      snapshot.comments.totalCount,
-      snapshot.compatibility.blockExport,
-      snapshot.fatalError,
-      snapshot.trackedChanges.totalCount,
-    ]);
-
-    function focusAnchor(
-      anchor: PublicSelectionSnapshot["activeRange"],
-      storyTarget?: EditorStoryTarget,
-    ): void {
-      if (anchor.kind === "detached") {
-        return;
-      }
-      applyRuntimeSelection(activeRuntime, createSelectionFromAnchor(anchor, storyTarget));
-    }
-
-    function addReviewComment(): string | null {
-      try {
-        const commentId = activeRuntime.addComment({
-          anchor: snapshot.selection.activeRange,
-          body: "",
-          authorId: currentUser.userId,
-        });
-        activeRuntime.openComment(commentId);
-        setActiveRailTab("comments");
-        return commentId;
-      } catch {
-        // Runtime already emitted a concrete export-safety error for invalid anchors.
-        return null;
-      }
-    }
-
-    function exportCurrentDocument(): void {
-      void (runtime
-        ? persistAndExportFromBoundary({
-            hostAdapter: hostAdapterRef.current,
-            datastore: datastoreRef.current,
-            documentId,
-            runtime,
-            onError: onErrorRef.current,
-            onEvent: onEventRef.current,
-            lastSavedRevisionTokenRef,
-            autosaveTimerRef,
-          })
-        : rejectExportWhileLoadingFromBoundary({
-            documentId,
-            hostAdapter: hostAdapterRef.current,
-            datastore: datastoreRef.current,
-            onError: onErrorRef.current,
-            onEvent: onEventRef.current,
-          }));
-    }
-
-    const derivedCapabilities = deriveCapabilities(
-      snapshot,
-      reviewMode,
-      workflowScopeSnapshot,
-    );
-    const resolvedChromeVisibility = resolveWordReviewEditorChromeVisibility(
-      chromeVisibility,
-      showReviewPanel,
-    );
-    const capabilities = resolvedChromeVisibility.reviewRail
-      ? derivedCapabilities
-      : { ...derivedCapabilities, reviewRailVisible: false };
-    const formattingState = getFormattingStateFromRenderSnapshot(snapshot);
-    const styleCatalog = useMemo(
-      () => getRuntimeStyleCatalog(canonicalDocument.styles),
-      [canonicalDocument.styles],
-    );
-    const diagnosticsModeMessage = getDiagnosticsModeMessage(loadError ?? snapshot.fatalError);
-    const addCommentDisabledReason =
-      !capabilities.canAddComment && !snapshot.selection.isCollapsed
-        ? "Select text within one paragraph to add a DOCX comment."
-        : undefined;
-    const activeImageContext = useMemo(
-      () =>
-        buildActiveImageContext({
-          canonicalDocument,
-          selection: snapshot.selection,
-          storyTarget: viewState.activeStory,
-          surface: snapshot.surface,
-        }),
-      [canonicalDocument, snapshot.selection, snapshot.surface, viewState.activeStory],
-    );
-    const sourcePackage = runtime
-      ? runtime.getSourcePackage()
-      : loadingSessionState.sourcePackage;
-    const mediaPreviewCatalogKey = Object.values(canonicalDocument.media.items)
-      .map((item) =>
-        [
-          item.mediaId,
-          item.packagePartName,
-          item.contentType ?? "",
-          item.widthEmu ?? "",
-          item.heightEmu ?? "",
-        ].join(":"),
-      )
-      .sort()
-      .join("|");
-    const mediaPreviews = useMemo(() => {
-      if (!sourcePackage) {
-        return {} as Record<string, MediaPreviewDescriptor>;
-      }
-      try {
-        const bytes = decodePersistedSourcePackageBytes(sourcePackage);
-        if (!hasValidPersistedSourcePackageDigest(sourcePackage, bytes)) {
-          return {} as Record<string, MediaPreviewDescriptor>;
-        }
-        const opc = readOpcPackage(bytes);
-        const previews: Record<string, MediaPreviewDescriptor> = {};
-        for (const item of Object.values(canonicalDocument.media.items)) {
-          const contentType = item.contentType?.toLowerCase();
-          const part = opc.parts.get(item.packagePartName);
-          if (
-            !part?.bytes ||
-            !contentType ||
-            !BROWSER_SAFE_PREVIEW_TYPES.has(contentType)
-          ) {
-            continue;
-          }
-          previews[item.mediaId] = {
-            src: createImageDataUrl(contentType, part.bytes),
-            ...(item.widthEmu !== undefined ? { widthEmu: item.widthEmu } : {}),
-            ...(item.heightEmu !== undefined ? { heightEmu: item.heightEmu } : {}),
-          };
-        }
-        return previews;
-      } catch {
-        return {} as Record<string, MediaPreviewDescriptor>;
-      }
-    }, [mediaPreviewCatalogKey, sourcePackage?.sha256Hex]);
-    const activeObjectContext = useMemo(
-      () =>
-        viewState.activeObjectFrame && viewState.activeObjectFrame.kind !== "image"
-          ? {
-            kind: viewState.activeObjectFrame.kind,
-            display: viewState.activeObjectFrame.display,
-          }
-          : null,
-      [viewState.activeObjectFrame],
-    );
-    const selectionToolbar = buildSelectionToolbarModel({
-      snapshot,
-      viewState,
-      capabilities,
-      documentNavigation,
-      styleCatalog,
-      formattingState,
-      workflowScopeSnapshot,
-      interactionGuardSnapshot,
-      addCommentDisabledReason,
-    });
-    const suggestionCard = buildSuggestionCardModel({
-      snapshot,
-      viewState,
-      capabilities,
-      workflowScopeSnapshot,
-      interactionGuardSnapshot,
-      activeRevisionId,
-      suppressedSuggestionRevisionId,
-      addCommentDisabledReason,
-    });
-    const selectionToolbarSelectionKey = useMemo(
-      () => createSelectionToolbarSelectionKey(snapshot.selection, viewState.activeStory, activeRevisionId),
-      [activeRevisionId, snapshot.selection, viewState.activeStory],
-    );
-    const shouldRenderSelectionChrome = Boolean(
-      (selectionToolbar || suggestionCard) &&
-      selectionToolbarSelectionKey &&
-      selectionToolbarDismissedKey !== selectionToolbarSelectionKey &&
-      (viewState.isFocused || selectionToolbarFocusWithin),
-    );
-    const accessibilityInstructionsId = `${documentId}-accessibility-instructions`;
-    const accessibilityStatusId = `${documentId}-accessibility-status`;
-    const accessibilityAlertId = `${documentId}-accessibility-alert`;
-
-    const dispatchSelection = (selection: PublicSelectionSnapshot) =>
-      applyRuntimeSelection(activeRuntime, selection);
-
-    const dismissSelectionToolbar = useCallback(
-      (_reason: SelectionToolbarDismissReason) => {
-        if (selectionToolbarSelectionKey) {
-          setSelectionToolbarDismissedKey(selectionToolbarSelectionKey);
-        } else {
-          setSelectionToolbarDismissedKey(null);
-        }
-        setSelectionToolbarAnchor(null);
-        setSelectionToolbarFocusWithin(false);
-      },
-      [selectionToolbarSelectionKey],
-    );
-
-    const getDocumentSurfaceElement = useCallback((): HTMLElement | null => {
-      return shellRef.current?.querySelector<HTMLElement>("[data-wre-document-surface='true']") ?? null;
-    }, []);
-
-    const isTargetWithinSelectionToolbar = useCallback((target: EventTarget | null): boolean => {
-      return target instanceof Node && Boolean(selectionToolbarElementRef.current?.contains(target));
-    }, []);
-
-    const isTargetWithinDocumentSurface = useCallback(
-      (target: EventTarget | null): boolean => {
-        const surfaceElement = getDocumentSurfaceElement();
-        return target instanceof Node && Boolean(surfaceElement?.contains(target));
-      },
-      [getDocumentSurfaceElement],
-    );
-
-    const focusDocumentSurface = useCallback((): void => {
-      const surfaceElement = getDocumentSurfaceElement();
-      surfaceElement?.focus();
-      activeRuntime.focus();
-    }, [activeRuntime, getDocumentSurfaceElement]);
-
-    const handleSurfaceFocus = useCallback(
-      (_event: FocusEvent<HTMLDivElement>) => {
-        setSelectionToolbarFocusWithin(false);
-        activeRuntime.focus();
-      },
-      [activeRuntime],
-    );
-
-    const handleSurfaceBlur = useCallback(
-      (event: FocusEvent<HTMLDivElement>) => {
-        if (isTargetWithinSelectionToolbar(event.relatedTarget)) {
-          setSelectionToolbarFocusWithin(true);
-          activeRuntime.focus();
-          return;
-        }
-
-        setSelectionToolbarFocusWithin(false);
-        activeRuntime.blur();
-        dismissSelectionToolbar("blur");
-      },
-      [activeRuntime, dismissSelectionToolbar, isTargetWithinSelectionToolbar],
-    );
-
-    const handleSelectionToolbarFocusCapture = useCallback(() => {
-      setSelectionToolbarFocusWithin(true);
-      activeRuntime.focus();
-    }, [activeRuntime]);
-
-    const handleSelectionToolbarBlurCapture = useCallback(
-      (event: FocusEvent<HTMLDivElement>) => {
-        if (isTargetWithinSelectionToolbar(event.relatedTarget)) {
-          return;
-        }
-
-        if (isTargetWithinDocumentSurface(event.relatedTarget)) {
-          setSelectionToolbarFocusWithin(false);
-          activeRuntime.focus();
-          return;
-        }
-
-        setSelectionToolbarFocusWithin(false);
-        activeRuntime.blur();
-        dismissSelectionToolbar("blur");
-      },
-      [
-        activeRuntime,
-        dismissSelectionToolbar,
-        isTargetWithinDocumentSurface,
-        isTargetWithinSelectionToolbar,
-      ],
-    );
-
-    const addSelectionToolbarComment = useCallback(() => {
-      const commentId = addReviewComment();
-      if (!commentId) {
-        return;
-      }
-      dismissSelectionToolbar("comment-action");
-      queueMicrotask(() => {
-        focusDocumentSurface();
-      });
-    }, [dismissSelectionToolbar, focusDocumentSurface]);
-
-    const handleSelectionToolbarAnchorChange = useCallback(
-      (nextAnchor: SelectionToolbarAnchor | null) => {
-        setSelectionToolbarAnchor((current) =>
-          selectionToolbarAnchorsEqual(current, nextAnchor) ? current : nextAnchor);
-      },
-      [],
-    );
-
-    useEffect(() => {
-      if (!selectionToolbarSelectionKey) {
-        setSuppressedSuggestionRevisionId(null);
-        setSelectionToolbarDismissedKey(null);
-        setSelectionToolbarFocusWithin(false);
-        setSelectionToolbarAnchor(null);
-        lastSelectionToolbarKeyRef.current = null;
-        return;
-      }
-
-      if (lastSelectionToolbarKeyRef.current !== selectionToolbarSelectionKey) {
-        lastSelectionToolbarKeyRef.current = selectionToolbarSelectionKey;
-        setSuppressedSuggestionRevisionId(null);
-        setSelectionToolbarDismissedKey(null);
-        setSelectionToolbarFocusWithin(false);
-      }
-    }, [selectionToolbarSelectionKey]);
-
-    useEffect(() => {
-      if (!selectionToolbar && !suggestionCard) {
-        setSelectionToolbarAnchor(null);
-        setSelectionToolbarFocusWithin(false);
-      }
-    }, [selectionToolbar, suggestionCard]);
-
-    useEffect(() => {
-      const shell = shellRef.current;
-      if (!shell) {
-        return;
-      }
-
-      applyRegionAttributes(shell);
-    }, [runtime, snapshot.fatalError, snapshot.isReady]);
-
-    useEffect(() => {
-      const shell = shellRef.current;
-      const fatalError = loadError ?? snapshot.fatalError;
-      if (!shell || !fatalError) {
-        lastAnnouncedErrorIdRef.current = null;
-        return;
-      }
-
-      if (lastAnnouncedErrorIdRef.current === fatalError.errorId) {
-        return;
-      }
-
-      lastAnnouncedErrorIdRef.current = fatalError.errorId;
-      const alertTarget = shell.querySelector<HTMLElement>("[data-wre-alert='true']");
-      alertTarget?.focus();
-    }, [loadError, snapshot.fatalError]);
-
-    function handleShellKeyDownCapture(event: React.KeyboardEvent<HTMLDivElement>): void {
-      const targetWithinDocument = isTargetWithinDocumentSurface(event.target);
-      const isUndoShortcut = (event.ctrlKey || event.metaKey) && !event.shiftKey && event.key.toLowerCase() === "z";
-      const isRedoShortcut =
-        ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key.toLowerCase() === "z") ||
-        (event.ctrlKey && event.key.toLowerCase() === "y");
-
-      if ((isUndoShortcut || isRedoShortcut) && targetWithinDocument) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (isUndoShortcut) {
-          activeRuntime.undo();
-        } else {
-          activeRuntime.redo();
-        }
-        return;
-      }
-
-      if (
-        event.key === "Escape" &&
-        shouldRenderSelectionChrome &&
-        (isTargetWithinDocumentSurface(event.target) || isTargetWithinSelectionToolbar(event.target))
-      ) {
-        event.preventDefault();
-        event.stopPropagation();
-        const restoreSurfaceFocus = isTargetWithinSelectionToolbar(event.target);
-        dismissSelectionToolbar("escape");
-        if (restoreSurfaceFocus) {
-          queueMicrotask(() => {
-            focusDocumentSurface();
-          });
-        }
-        return;
-      }
-
-      if (event.key !== "F6") {
-        return;
-      }
-
-      const shell = shellRef.current;
-      if (!shell) {
-        return;
-      }
-
-      event.preventDefault();
-      focusRelativeRegion(shell, event.shiftKey ? -1 : 1);
-    }
-
-    const editorCallbacks = {
-      onFocus: handleSurfaceFocus,
-      onBlur: handleSurfaceBlur,
-      onSelectionChange: dispatchSelection,
-      onInsertText: (text: string) => applyRuntimeTextCommand(activeRuntime, { type: "insert-text", text }),
-      onDeleteBackward: () => applyRuntimeTextCommand(activeRuntime, { type: "delete-backward" }),
-      onDeleteForward: () => applyRuntimeTextCommand(activeRuntime, { type: "delete-forward" }),
-      onInsertTab: () => applyRuntimeTextCommand(activeRuntime, { type: "insert-tab" }),
-      onOutdentTab: () => applyRuntimeTextCommand(activeRuntime, { type: "outdent-tab" }),
-      onInsertHardBreak: () => applyRuntimeTextCommand(activeRuntime, { type: "insert-hard-break" }),
-      onSplitParagraph: () => applyRuntimeTextCommand(activeRuntime, { type: "split-paragraph" }),
-      onUndo: () => activeRuntime.undo(),
-      onRedo: () => activeRuntime.redo(),
-      onBlockedInput: (command: "paste" | "drop", message: string) =>
-        activeRuntime.emitBlockedCommand(command, [{
-          code: "unsupported_surface",
-          message,
-        }]),
-    };
-
-    const reviewCallbacks = {
-      onUndo: () => activeRuntime.undo(),
-      onRedo: () => activeRuntime.redo(),
-      onAddComment: addReviewComment,
-      onExport: exportCurrentDocument,
-      onOpenComment: (thread: typeof snapshot.comments.threads[number]) => {
-        activeRuntime.openComment(thread.commentId);
-        focusAnchor(thread.anchor);
-        setActiveRailTab("comments");
-      },
-      onResolveComment: (commentId: string) => {
-        activeRuntime.resolveComment(commentId);
-        setActiveRailTab("comments");
-      },
-      onReopenComment: (commentId: string) => {
-        activeRuntime.reopenComment(commentId);
-        setActiveRailTab("comments");
-      },
-      onAddReply: (commentId: string, body: string) => {
-        activeRuntime.addCommentReply(commentId, body, currentUser.userId);
-      },
-      onEditBody: (commentId: string, body: string) => {
-        activeRuntime.editCommentBody(commentId, body);
-      },
-      onOpenRevision: (revision: typeof snapshot.trackedChanges.revisions[number]) => {
-        setActiveRevisionId(revision.revisionId);
-        focusAnchor(revision.anchor, revision.storyTarget);
-        setActiveRailTab("changes");
-      },
-      onAcceptRevision: (revisionId: string) => {
-        activeRuntime.acceptChange(revisionId);
-        setActiveRailTab("changes");
-      },
-      onRejectRevision: (revisionId: string) => {
-        activeRuntime.rejectChange(revisionId);
-        setActiveRailTab("changes");
-      },
-      onAcceptAllChanges: () => {
-        activeRuntime.acceptAllChanges();
-        setActiveRailTab("changes");
-      },
-      onRejectAllChanges: () => {
-        activeRuntime.rejectAllChanges();
-        setActiveRailTab("changes");
-      },
-      onCloseStory: () => {
-        activeRuntime.closeStory();
-      },
-    };
-
-    const commands = useCommandBag<EditorCommandBag>({
-      ...reviewCallbacks,
-      onWorkspaceModeChange: (mode) => activeRuntime.setWorkspaceMode(mode),
-      onZoomChange: (level) => activeRuntime.setZoom(level),
-      onActiveRailTabChange: setActiveRailTab,
-      onShowTrackedChangesChange: setShowTrackedChanges,
-      onToggleBold: () =>
-        applyRuntimeFormattingOperation(activeRuntime, { type: "toggle", mark: "bold" }),
-      onToggleItalic: () =>
-        applyRuntimeFormattingOperation(activeRuntime, { type: "toggle", mark: "italic" }),
-      onToggleUnderline: () =>
-        applyRuntimeFormattingOperation(activeRuntime, { type: "toggle", mark: "underline" }),
-      onSetSelectionTextColor: (color) =>
-        applyRuntimeFormattingOperation(activeRuntime, { type: "set-text-color", color }),
-      onSetSelectionHighlightColor: (color) =>
-        applyRuntimeFormattingOperation(activeRuntime, { type: "set-highlight-color", color }),
-      onToggleStrikethrough: () =>
-        applyRuntimeFormattingOperation(activeRuntime, {
-          type: "toggle",
-          mark: "strikethrough",
-        }),
-      onToggleSuperscript: () =>
-        applyRuntimeFormattingOperation(activeRuntime, {
-          type: "toggle",
-          mark: "superscript",
-        }),
-      onToggleSubscript: () =>
-        applyRuntimeFormattingOperation(activeRuntime, { type: "toggle", mark: "subscript" }),
-      onSetFontFamily: (fontFamily) =>
-        applyRuntimeFormattingOperation(activeRuntime, { type: "set-font-family", fontFamily }),
-      onSetFontSize: (fontSize) =>
-        applyRuntimeFormattingOperation(activeRuntime, { type: "set-font-size", size: fontSize }),
-      onSetTextColor: (color) =>
-        applyRuntimeFormattingOperation(activeRuntime, { type: "set-text-color", color }),
-      onSetHighlightColor: (color) =>
-        applyRuntimeFormattingOperation(activeRuntime, { type: "set-highlight-color", color }),
-      onSetAlignment: (alignment) =>
-        applyRuntimeFormattingOperation(activeRuntime, { type: "set-alignment", alignment }),
-      onSetParagraphStyle: (styleId) => applyRuntimeParagraphStyle(activeRuntime, styleId),
-      onOutdent: () => applyRuntimeFormattingOperation(activeRuntime, { type: "outdent" }),
-      onIndent: () => applyRuntimeFormattingOperation(activeRuntime, { type: "indent" }),
-      onInsertPageBreak: () => applyRuntimeInsertPageBreak(activeRuntime),
-      onInsertTable: () => applyRuntimeInsertTable(activeRuntime, { rows: 3, columns: 3 }),
-      onInsertSectionBreak: (type) => applyRuntimeInsertSectionBreak(activeRuntime, type),
-      onInsertImage: (options) => applyRuntimeInsertImage(activeRuntime, options),
-      onSetTableStyle: (styleId) => applyRuntimeTableStyle(activeRuntime, styleId),
-      onAddRowBefore: () =>
-        applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current ?? null, {
-          type: "add-row-before",
-        }),
-      onAddRowAfter: () =>
-        applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current ?? null, {
-          type: "add-row-after",
-        }),
-      onAddColumnBefore: () =>
-        applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current ?? null, {
-          type: "add-column-before",
-        }),
-      onAddColumnAfter: () =>
-        applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current ?? null, {
-          type: "add-column-after",
-        }),
-      onDeleteRow: () =>
-        applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current ?? null, {
-          type: "delete-row",
-        }),
-      onDeleteColumn: () =>
-        applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current ?? null, {
-          type: "delete-column",
-        }),
-      onDeleteTable: () =>
-        applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current ?? null, {
-          type: "delete-table",
-        }),
-      onMergeCells: () =>
-        applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current ?? null, {
-          type: "merge-cells",
-        }),
-      onSplitCell: () =>
-        applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current ?? null, {
-          type: "split-cell",
-        }),
-      onSetCellBackground: (color) =>
-        applyRuntimeTableStructureOperation(activeRuntime, surfaceRef.current ?? null, {
-          type: "set-cell-background",
-          color,
-        }),
-      onSetImageLayout: (mediaId, dimensions) =>
-        applyRuntimeImageResize(activeRuntime, mediaId, dimensions),
-      onSetImageFrame: (mediaId, offsets) =>
-        applyRuntimeImageReposition(activeRuntime, mediaId, offsets),
-      onOpenHeaderStory: () =>
-        openDefaultStoryVariant(activeRuntime, snapshot.pageLayout, documentNavigation, "header"),
-      onOpenFooterStory: () =>
-        openDefaultStoryVariant(activeRuntime, snapshot.pageLayout, documentNavigation, "footer"),
-      onDeleteSectionBreak: (sectionIndex) =>
-        applyRuntimeDeleteSectionBreak(activeRuntime, sectionIndex),
-      onUpdateSectionLayout: (sectionIndex, patch) =>
-        applyRuntimeUpdateSectionLayout(activeRuntime, sectionIndex, patch),
-      onSetSectionPageNumbering: (sectionIndex, patch) =>
-        applyRuntimeSetSectionPageNumbering(activeRuntime, sectionIndex, patch),
-      onSetHeaderFooterLink: (sectionIndex, patch) =>
-        applyRuntimeSetHeaderFooterLink(activeRuntime, sectionIndex, patch),
-      onSetParagraphIndentation: (indentation) =>
-        applyRuntimeParagraphIndentation(activeRuntime, indentation),
-      onSetParagraphTabStops: (tabStops) =>
-        applyRuntimeParagraphTabStops(activeRuntime, tabStops),
-      onRestartNumbering: () =>
-        applyRuntimeNumberingFlow(activeRuntime, { type: "restart" }),
-      onContinueNumbering: () =>
-        applyRuntimeNumberingFlow(activeRuntime, { type: "continue" }),
-      onNavigateHeading: (headingId) => {
-        const heading = documentNavigation.headings.find(
-          (entry) => entry.headingId === headingId,
-        );
-        if (!heading) {
-          return;
-        }
-        applyRuntimeSelection(
-          activeRuntime,
-          createCollapsedPublicSelection(heading.offset),
-        );
-      },
-    });
-
-    const documentElement = (
-      <EditorSurfaceController
-        ref={surfaceRef}
-        currentUser={currentUser}
-        snapshot={snapshot}
-        canonicalDocument={canonicalDocument}
-        documentNavigation={documentNavigation}
-        reviewMode={reviewMode}
-        markupDisplay={liveMarkupDisplay}
-        activeRevisionId={activeRevisionId}
-        showTrackedChanges={showTrackedChanges}
-        suggestionsEnabled={suggestionsEnabled}
-        mediaPreviews={mediaPreviews}
-        isPageWorkspace={isPageWorkspace}
-        workflowScopes={workflowScopeSnapshot?.scopes}
-        workflowCandidates={workflowScopeSnapshot?.candidates}
-        workflowBlockedReasons={workflowBlockedRails}
-        activeWorkflowWorkItemId={workflowScopeSnapshot?.activeWorkItemId ?? null}
-        activeWorkflowScopeIds={workflowScopeSnapshot?.activeWorkItem?.scopeIds ?? []}
-        onSelectionToolbarAnchorChange={handleSelectionToolbarAnchorChange}
-        {...editorCallbacks}
-        onCommentActivated={(commentId) => {
-          activeRuntime.openComment(commentId);
-          setActiveRailTab("comments");
-        }}
-        onRevisionActivated={(revisionId) => {
-          setActiveRevisionId(revisionId);
-          setActiveRailTab("changes");
-        }}
-      />
-    );
-
-    return (
-      <EditorShellView
-        shellRef={shellRef}
-        documentId={documentId}
-        snapshot={snapshot}
-        loadError={loadError}
-        diagnosticsModeMessage={diagnosticsModeMessage}
-        accessibilityInstructionsId={accessibilityInstructionsId}
-        accessibilityStatusId={accessibilityStatusId}
-        accessibilityAlertId={accessibilityAlertId}
-        accessibilityStatusMessage={buildAccessibilityStatusMessage(
-          snapshot,
-          loadError ?? undefined,
-        )}
-        visuallyHiddenStyles={VISUALLY_HIDDEN_STYLES}
-        onShellKeyDownCapture={handleShellKeyDownCapture}
-        viewState={viewState}
-        markupDisplay={liveMarkupDisplay}
-        currentUserId={currentUser.userId}
-        capabilities={capabilities}
-        chromeVisibility={resolvedChromeVisibility}
-        documentNavigation={documentNavigation}
-        reviewMode={reviewMode}
-        workspaceMode={viewState.workspaceMode}
-        zoomLevel={viewState.zoomLevel}
-        formattingState={formattingState}
-        styleCatalog={styleCatalog}
-        activeRailTab={activeRailTab}
-        activeCommentId={snapshot.comments.activeCommentId}
-        activeRevisionId={activeRevisionId}
-        showTrackedChanges={showTrackedChanges}
-        workflowScopeSnapshot={workflowScopeSnapshot}
-        interactionGuardSnapshot={interactionGuardSnapshot}
-        selectionToolbar={shouldRenderSelectionChrome ? selectionToolbar : null}
-        suggestionCard={shouldRenderSelectionChrome ? suggestionCard : null}
-        selectionToolbarAnchor={shouldRenderSelectionChrome ? selectionToolbarAnchor : null}
-        onAddCommentFromSelection={addSelectionToolbarComment}
-        onAddCommentFromSuggestion={addSelectionToolbarComment}
-        onAcceptSuggestion={suggestionCard
-          ? () => {
-              activeRuntime.acceptChange(suggestionCard.revisionId);
-              dismissSelectionToolbar("chrome-action");
-            }
-          : undefined}
-        onRejectSuggestion={suggestionCard
-          ? () => {
-              activeRuntime.rejectChange(suggestionCard.revisionId);
-              dismissSelectionToolbar("chrome-action");
-            }
-          : undefined}
-        onEditSuggestion={suggestionCard
-          ? () => {
-              setSuppressedSuggestionRevisionId(suggestionCard.revisionId);
-            }
-          : undefined}
-        onDismissSelectionToolbar={() => dismissSelectionToolbar("chrome-action")}
-        onSelectionToolbarFocusCapture={handleSelectionToolbarFocusCapture}
-        onSelectionToolbarBlurCapture={handleSelectionToolbarBlurCapture}
-        selectionToolbarRef={selectionToolbarElementRef}
-        activeImageContext={activeImageContext}
-        activeObjectContext={activeObjectContext}
-        commands={commands}
-        document={documentElement}
-      />
-    );
-  },
-);
-
-function applyRuntimeFormattingOperation(
-  runtime: WordReviewEditorRuntime,
-  operation:
-    | { type: "toggle"; mark: "bold" | "italic" | "underline" | "strikethrough" | "superscript" | "subscript" }
-    | { type: "set-font-family"; fontFamily: string | null }
-    | { type: "set-font-size"; size: number | null }
-    | { type: "set-text-color"; color: string | null }
-    | { type: "set-highlight-color"; color: string | null }
-    | { type: "set-alignment"; alignment: FormattingAlignment }
-    | { type: "indent" }
-    | { type: "outdent" },
-): void {
-  if (emitSuggestingUnsupportedMutation(runtime, getFormattingOperationCommandName(operation))) {
-    return;
-  }
-  const context = getStoryMutationContext(runtime, getFormattingOperationCommandName(operation));
-  if (!context) {
-    return;
-  }
-
-  const result = applyFormattingOperationToDocument(
-    context.localDocument,
-    context.localSnapshot,
-    operation,
-  );
-  dispatchStoryMutationResult(
-    runtime,
-    context,
-    {
-      ...result,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    context.timestamp,
-  );
-}
-
-function getRuntimeStyleCatalog(
-  input:
-    | WordReviewEditorRuntime
-    | EditorSessionState["canonicalDocument"]["styles"],
-): StyleCatalogSnapshot {
-  const styles =
-    "getSessionState" in input
-      ? input.getSessionState().canonicalDocument.styles
-      : input;
-  const mapRecord = <
-    T extends {
-      styleId: string;
-      displayName: string;
-      kind: "paragraph" | "character" | "table";
-      isDefault: boolean;
-      basedOn?: string;
-      nextStyle?: string;
-    },
-  >(
-    record: Record<string, T>,
-  ) =>
-    Object.values(record)
-      .map((entry) => ({
-        styleId: entry.styleId,
-        displayName: entry.displayName,
-        kind: entry.kind,
-        isDefault: entry.isDefault,
-        ...(entry.basedOn ? { basedOn: entry.basedOn } : {}),
-        ...(entry.nextStyle ? { nextStyle: entry.nextStyle } : {}),
-      }))
-      .sort((left, right) =>
-        left.displayName.localeCompare(right.displayName) ||
-        left.styleId.localeCompare(right.styleId),
-      );
-
-  return {
-    paragraphs: mapRecord(styles.paragraphs),
-    characters: mapRecord(styles.characters),
-    tables: mapRecord(styles.tables),
-    fromPackage: styles.fromPackage === true,
-  };
-}
-
-function applyRuntimeParagraphStyle(
-  runtime: WordReviewEditorRuntime,
-  styleId: string | null,
-): void {
-  if (emitSuggestingUnsupportedMutation(runtime, "setParagraphStyle")) {
-    return;
-  }
-  const context = getStoryMutationContext(runtime, "setParagraphStyle");
-  if (!context) {
-    return;
-  }
-
-  const result = applyParagraphStyleToDocument(
-    context.localDocument,
-    context.localSnapshot,
-    styleId,
-  );
-  dispatchStoryMutationResult(
-    runtime,
-    context,
-    {
-      ...result,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    context.timestamp,
-  );
-}
-
-function applyRuntimeTableStyle(
-  runtime: WordReviewEditorRuntime,
-  styleId: string | null,
-): void {
-  if (emitSuggestingUnsupportedMutation(runtime, "setTableStyle")) {
-    return;
-  }
-  const context = getStoryMutationContext(runtime, "setTableStyle");
-  if (!context) {
-    return;
-  }
-
-  const result = applyTableStyleToDocument(
-    context.localDocument,
-    context.localSnapshot,
-    styleId,
-  );
-  dispatchStoryMutationResult(
-    runtime,
-    context,
-    {
-      ...result,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    context.timestamp,
-  );
-}
-
-function applyRuntimeParagraphIndentation(
-  runtime: WordReviewEditorRuntime,
-  indentation: {
-    left?: number;
-    right?: number;
-    firstLine?: number;
-    hanging?: number;
-  },
-): void {
-  if (emitSuggestingUnsupportedMutation(runtime, "setParagraphIndentation")) {
-    return;
-  }
-  const context = getStoryMutationContext(runtime, "setParagraphIndentation");
-  if (!context) {
-    return;
-  }
-
-  const result = setActiveParagraphIndentation(
-    context.localDocument,
-    context.localSnapshot,
-    indentation,
-    { timestamp: context.timestamp },
-  );
-  dispatchStoryMutationResult(
-    runtime,
-    context,
-    {
-      ...result,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    context.timestamp,
-  );
-}
-
-function applyRuntimeParagraphTabStops(
-  runtime: WordReviewEditorRuntime,
-  tabStops: Array<{ pos: number; val?: string; leader?: string }>,
-): void {
-  if (emitSuggestingUnsupportedMutation(runtime, "setParagraphTabStops")) {
-    return;
-  }
-  const context = getStoryMutationContext(runtime, "setParagraphTabStops");
-  if (!context) {
-    return;
-  }
-
-  const result = setActiveParagraphTabStops(
-    context.localDocument,
-    context.localSnapshot,
-    tabStops,
-    { timestamp: context.timestamp },
-  );
-  dispatchStoryMutationResult(
-    runtime,
-    context,
-    {
-      ...result,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    context.timestamp,
-  );
-}
-
-function applyRuntimeNumberingFlow(
-  runtime: WordReviewEditorRuntime,
-  operation: { type: "restart"; startAt?: number } | { type: "continue" },
-): void {
-  if (
-    emitSuggestingUnsupportedMutation(
-      runtime,
-      operation.type === "restart" ? "restartNumbering" : "continueNumbering",
-    )
-  ) {
-    return;
-  }
-  const context = getStoryMutationContext(
-    runtime,
-    operation.type === "restart" ? "restartNumbering" : "continueNumbering",
-  );
-  if (!context) {
-    return;
-  }
-
-  const paragraphContext = resolveActiveParagraphContext(context.localSnapshot);
-  if (!paragraphContext?.paragraph.numbering) {
-    return;
-  }
-
-  const result =
-    operation.type === "restart"
-      ? restartListNumbering(
-          context.localDocument,
-          paragraphContext.paragraphIndex,
-          { timestamp: context.timestamp },
-          operation.startAt,
-        )
-      : continueListNumbering(
-          context.localDocument,
-          paragraphContext.paragraphIndex,
-          { timestamp: context.timestamp },
-        );
-
-  dispatchStoryMutationResult(
-    runtime,
-    context,
-    {
-      changed: result.affectedParagraphIndexes.length > 0,
-      document: result.document,
-      selection: toRuntimeSelectionSnapshot(context.localSnapshot.selection),
-    },
-    context.timestamp,
-  );
-}
-
-function applyRuntimeInsertSectionBreak(
-  runtime: WordReviewEditorRuntime,
-  breakType: SectionBreakType,
-  options?: { afterSectionIndex?: number },
-): void {
-  const snapshot = runtime.getRenderSnapshot();
-  if (!canApplyRuntimeMutation(snapshot) || snapshot.activeStory.kind !== "main") {
-    return;
-  }
-  if (emitWorkflowBlockedMutation(runtime, "insertSectionBreak")) {
-    return;
-  }
-  if (isSelectionSuggesting(runtime)) {
-    runtime.emitBlockedCommand("insertSectionBreak", [{
-      code: "unsupported_surface",
-      message: "Section break insertion is not supported in suggesting mode.",
-    }]);
-    return;
-  }
-
-  const sessionState = runtime.getSessionState();
-  const timestamp = new Date().toISOString();
-  const result =
-    typeof options?.afterSectionIndex === "number"
-      ? insertSectionBreakAfterSectionIndex(
-          sessionState.canonicalDocument,
-          options.afterSectionIndex,
-          breakType,
-          { timestamp },
-        )
-      : insertSectionBreakAfterSectionIndex(
-          sessionState.canonicalDocument,
-          runtime.getDocumentNavigationSnapshot().activeSectionIndex,
-          breakType,
-          { timestamp },
-        );
-
-  dispatchRuntimeDocumentMutation(
-    runtime,
-    {
-      changed: result.changed,
-      document: result.document,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    timestamp,
-  );
-}
-
-function emitSuggestingUnsupportedMutation(
-  runtime: WordReviewEditorRuntime,
-  command: string,
-): boolean {
-  if (!isSelectionSuggesting(runtime)) {
-    return false;
-  }
-
-  runtime.emitBlockedCommand(command, [{
-    code: "suggesting_unsupported",
-    message: `"${command}" is not supported in suggesting mode.`,
-  }]);
-  return true;
-}
-
-function isSelectionSuggesting(runtime: WordReviewEditorRuntime): boolean {
-  return runtime.getInteractionGuardSnapshot().effectiveMode === "suggest";
-}
-
-function getFormattingOperationCommandName(
-  operation:
-    | { type: "toggle"; mark: "bold" | "italic" | "underline" | "strikethrough" | "superscript" | "subscript" }
-    | { type: "set-font-family"; fontFamily: string | null }
-    | { type: "set-font-size"; size: number | null }
-    | { type: "set-text-color"; color: string | null }
-    | { type: "set-highlight-color"; color: string | null }
-    | { type: "set-alignment"; alignment: FormattingAlignment }
-    | { type: "indent" }
-    | { type: "outdent" },
-): string {
-  switch (operation.type) {
-    case "toggle":
-      return `toggle${operation.mark.charAt(0).toUpperCase()}${operation.mark.slice(1)}`;
-    case "set-font-family":
-      return "setFontFamily";
-    case "set-font-size":
-      return "setFontSize";
-    case "set-text-color":
-      return "setTextColor";
-    case "set-highlight-color":
-      return "setHighlightColor";
-    case "set-alignment":
-      return "setAlignment";
-    case "indent":
-      return "indent";
-    case "outdent":
-      return "outdent";
-  }
-}
-
-function applyRuntimeDeleteSectionBreak(
-  runtime: WordReviewEditorRuntime,
-  sectionIndex: number,
-): void {
-  const snapshot = runtime.getRenderSnapshot();
-  if (!canApplyRuntimeMutation(snapshot) || snapshot.activeStory.kind !== "main") {
-    return;
-  }
-  if (emitWorkflowBlockedMutation(runtime, "deleteSectionBreak")) {
-    return;
-  }
-  if (isSelectionSuggesting(runtime)) {
-    runtime.emitBlockedCommand("deleteSectionBreak", [{
-      code: "unsupported_surface",
-      message: "Section break deletion is not supported in suggesting mode.",
-    }]);
-    return;
-  }
-
-  const sessionState = runtime.getSessionState();
-  const timestamp = new Date().toISOString();
-  const result = deleteSectionBreakAtSectionIndex(
-    sessionState.canonicalDocument,
-    sectionIndex,
-    { timestamp },
-  );
-
-  dispatchRuntimeDocumentMutation(
-    runtime,
-    {
-      changed: result.changed,
-      document: result.document,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    timestamp,
-  );
-}
-
-function applyRuntimeUpdateSectionLayout(
-  runtime: WordReviewEditorRuntime,
-  sectionIndex: number,
-  patch: SectionLayoutPatch,
-): void {
-  const snapshot = runtime.getRenderSnapshot();
-  if (!canApplyRuntimeMutation(snapshot) || snapshot.activeStory.kind !== "main") {
-    return;
-  }
-  if (emitWorkflowBlockedMutation(runtime, "updateSectionLayout")) {
-    return;
-  }
-  if (isSelectionSuggesting(runtime)) {
-    runtime.emitBlockedCommand("updateSectionLayout", [{
-      code: "unsupported_surface",
-      message: "Section layout updates are not supported in suggesting mode.",
-    }]);
-    return;
-  }
-
-  const sessionState = runtime.getSessionState();
-  const timestamp = new Date().toISOString();
-  const result = updateSectionLayoutAtSectionIndex(
-    sessionState.canonicalDocument,
-    sectionIndex,
-    {
-      ...(patch.pageSize ? { pageSize: patch.pageSize } : {}),
-      ...(patch.pageMargins ? { pageMargins: patch.pageMargins } : {}),
-      ...(patch.columns ? { columns: patch.columns } : {}),
-      ...(patch.titlePage !== undefined ? { titlePage: patch.titlePage } : {}),
-      ...(patch.sectionType ? { sectionType: patch.sectionType } : {}),
-    },
-    { timestamp },
-  );
-
-  dispatchRuntimeDocumentMutation(
-    runtime,
-    {
-      changed: result.changed,
-      document: result.document,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    timestamp,
-  );
-}
-
-function applyRuntimeSetSectionPageNumbering(
-  runtime: WordReviewEditorRuntime,
-  sectionIndex: number,
-  patch: SectionPageNumberingPatch | null,
-): void {
-  const snapshot = runtime.getRenderSnapshot();
-  if (!canApplyRuntimeMutation(snapshot) || snapshot.activeStory.kind !== "main") {
-    return;
-  }
-  if (emitWorkflowBlockedMutation(runtime, "setSectionPageNumbering")) {
-    return;
-  }
-  if (isSelectionSuggesting(runtime)) {
-    runtime.emitBlockedCommand("setSectionPageNumbering", [{
-      code: "unsupported_surface",
-      message: "Section page numbering updates are not supported in suggesting mode.",
-    }]);
-    return;
-  }
-
-  const sessionState = runtime.getSessionState();
-  const timestamp = new Date().toISOString();
-  const normalizedPatch =
-    patch === null
-      ? null
-      : {
-          ...(patch.format !== undefined
-            ? { format: patch.format ?? undefined }
-            : {}),
-          ...(patch.start !== undefined
-            ? { start: patch.start ?? undefined }
-            : {}),
-          ...(patch.chapterStyle !== undefined
-            ? { chapStyle: patch.chapterStyle ?? undefined }
-            : {}),
-          ...(patch.chapterSeparator !== undefined
-            ? { chapSep: patch.chapterSeparator ?? undefined }
-            : {}),
-        };
-  const result = setSectionPageNumberingAtSectionIndex(
-    sessionState.canonicalDocument,
-    sectionIndex,
-    normalizedPatch,
-    { timestamp },
-  );
-
-  dispatchRuntimeDocumentMutation(
-    runtime,
-    {
-      changed: result.changed,
-      document: result.document,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    timestamp,
-  );
-}
-
-function applyRuntimeSetHeaderFooterLink(
-  runtime: WordReviewEditorRuntime,
-  sectionIndex: number,
-  patch: HeaderFooterLinkPatch,
-): void {
-  const snapshot = runtime.getRenderSnapshot();
-  if (!canApplyRuntimeMutation(snapshot) || snapshot.activeStory.kind !== "main") {
-    return;
-  }
-  if (emitWorkflowBlockedMutation(runtime, "setHeaderFooterLink")) {
-    return;
-  }
-  if (isSelectionSuggesting(runtime)) {
-    runtime.emitBlockedCommand("setHeaderFooterLink", [{
-      code: "unsupported_surface",
-      message: "Header and footer linkage updates are not supported in suggesting mode.",
-    }]);
-    return;
-  }
-
-  const sessionState = runtime.getSessionState();
-  const timestamp = new Date().toISOString();
-  const result = setHeaderFooterLinkAtSectionIndex(
-    sessionState.canonicalDocument,
-    sectionIndex,
-    patch,
-    { timestamp },
-  );
-
-  dispatchRuntimeDocumentMutation(
-    runtime,
-    {
-      changed: result.changed,
-      document: result.document,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    timestamp,
-  );
-}
-
-function applyRuntimeInsertPageBreak(runtime: WordReviewEditorRuntime): void {
-  if (isSelectionSuggesting(runtime)) {
-    runtime.emitBlockedCommand("insertPageBreak", [{
-      code: "unsupported_surface",
-      message: "Page break insertion is not supported in suggesting mode.",
-    }]);
-    return;
-  }
-  const context = getStoryMutationContext(runtime, "insertPageBreak");
-  if (!context) {
-    return;
-  }
-
-  const result = insertPageBreakInDocument(
-    context.localDocument,
-    toRuntimeSelectionSnapshot(context.localSnapshot.selection),
-    { timestamp: context.timestamp },
-  );
-  dispatchStoryMutationResult(runtime, context, result, context.timestamp);
-}
-
-function applyRuntimeInsertTable(
-  runtime: WordReviewEditorRuntime,
-  options: InsertTableOptions,
-): void {
-  if (isSelectionSuggesting(runtime)) {
-    runtime.emitBlockedCommand("insertTable", [{
-      code: "unsupported_surface",
-      message: "Table insertion is not supported in suggesting mode.",
-    }]);
-    return;
-  }
-  const context = getStoryMutationContext(runtime, "insertTable");
-  if (!context) {
-    return;
-  }
-
-  const result = insertTableInDocument(
-    context.localDocument,
-    toRuntimeSelectionSnapshot(context.localSnapshot.selection),
-    options,
-    { timestamp: context.timestamp },
-  );
-  dispatchStoryMutationResult(runtime, context, result, context.timestamp);
-}
-
-function applyRuntimeInsertImage(
-  runtime: WordReviewEditorRuntime,
-  options: InsertImageOptions,
-): void {
-  if (isSelectionSuggesting(runtime)) {
-    runtime.emitBlockedCommand("insertImage", [{
-      code: "unsupported_surface",
-      message: "Image insertion is not supported in suggesting mode.",
-    }]);
-    return;
-  }
-  const context = getStoryMutationContext(runtime, "insertImage");
-  if (!context) {
-    return;
-  }
-
-  try {
-    const result = insertImageInDocument(
-      context.localDocument,
-      toRuntimeSelectionSnapshot(context.localSnapshot.selection),
-      options.data,
-      options.mimeType,
-      options.width,
-      options.height,
-      {
-        timestamp: context.timestamp,
-        altText: options.altText,
-      },
-    );
-    dispatchStoryMutationResult(runtime, context, {
-      changed: true,
-      document: result.document,
-      selection: result.selection,
-      mapping: result.mapping,
-    }, context.timestamp);
-  } catch {
-    return;
-  }
-}
-
-function applyRuntimeImageResize(
-  runtime: WordReviewEditorRuntime,
-  mediaId: string,
-  dimensions: { widthEmu: number; heightEmu: number },
-): void {
-  const snapshot = runtime.getRenderSnapshot();
-  if (!canApplyRuntimeMutation(snapshot)) {
-    return;
-  }
-  if (emitWorkflowBlockedMutation(runtime, "setImageLayout")) {
-    return;
-  }
-  if (isSelectionSuggesting(runtime)) {
-    runtime.emitBlockedCommand("setImageLayout", [{
-      code: "unsupported_surface",
-      message: "Image resize is not supported in suggesting mode.",
-    }]);
-    return;
-  }
-
-  try {
-    const sessionState = runtime.getSessionState();
-    const result = resizeImageInCatalog(
-      sessionState.canonicalDocument,
-      mediaId,
-      dimensions,
-    );
-    runtime.dispatch({
-      type: "document.replace",
-      document: result.document,
-      selection: toRuntimeSelectionSnapshot(snapshot.selection),
-      origin: { source: "api", timestamp: new Date().toISOString() },
-    });
-  } catch {
-    return;
-  }
-}
-
-function applyRuntimeImageReposition(
-  runtime: WordReviewEditorRuntime,
-  mediaId: string,
-  offsets: { horizontalOffsetEmu?: number; verticalOffsetEmu?: number },
-): void {
-  if (emitWorkflowBlockedMutation(runtime, "setImageFrame")) {
-    return;
-  }
-  if (isSelectionSuggesting(runtime)) {
-    runtime.emitBlockedCommand("setImageFrame", [{
-      code: "unsupported_surface",
-      message: "Image reposition is not supported in suggesting mode.",
-    }]);
-    return;
-  }
-  const context = getStoryMutationContext(runtime, "setImageFrame");
-  if (!context) {
-    return;
-  }
-
-  try {
-    const result = repositionFloatingImageInDocument(
-      context.localDocument,
-      mediaId,
-      offsets,
-      context.timestamp,
-    );
-    dispatchStoryMutationResult(
-      runtime,
-      context,
-      {
-        changed: true,
-        document: result.document,
-        selection: toRuntimeSelectionSnapshot(context.localSnapshot.selection),
-      },
-      context.timestamp,
-    );
-  } catch {
-    return;
-  }
-}
-
-// deriveViewState removed — the runtime's getViewState() is now the single
-// source of truth for EditorViewStateSnapshot, backed by view-state.ts.
-
-function applyRuntimeTableStructureOperation(
-  runtime: WordReviewEditorRuntime,
-  mountedSurface: TwProseMirrorSurfaceRef | null | undefined,
-  operation:
-    | { type: "add-row-before" }
-    | { type: "add-row-after" }
-    | { type: "add-column-before" }
-    | { type: "add-column-after" }
-    | { type: "delete-row" }
-    | { type: "delete-column" }
-    | { type: "delete-table" }
-    | { type: "merge-cells" }
-    | { type: "split-cell" }
-    | { type: "set-cell-background"; color: string },
-): void {
-  if (isSelectionSuggesting(runtime)) {
-    runtime.emitBlockedCommand(`table.${operation.type}`, [{
-      code: "unsupported_surface",
-      message: `Table operation "${operation.type}" is not supported in suggesting mode.`,
-    }]);
-    return;
-  }
-  const context = getStoryMutationContext(runtime, `table.${operation.type}`);
-  if (!context) {
-    return;
-  }
-
-  const result = applyTableStructureOperation(
-    context.localDocument,
-    context.localSnapshot,
-    mountedSurface?.getTableSelection() ?? null,
-    operation,
-  );
-  dispatchStoryMutationResult(runtime, context, result, context.timestamp);
-}
-
-function applyRuntimeTextCommand(
-  runtime: WordReviewEditorRuntime,
-  command:
-    | { type: "insert-text"; text: string }
-    | { type: "delete-backward" }
-    | { type: "delete-forward" }
-    | { type: "insert-tab" }
-    | { type: "outdent-tab" }
-    | { type: "insert-hard-break" }
-    | { type: "split-paragraph" },
-): void {
-  const snapshot = runtime.getRenderSnapshot();
-  const context = getStoryMutationContext(runtime, getMountedTextCommandName(command));
-  if (!context) {
-    return;
-  }
-
-  const effectiveSelectionMode = runtime.getInteractionGuardSnapshot().effectiveMode;
-  const listAwareResult = applyListAwareTextCommand(context, command);
-  if (effectiveSelectionMode === "suggest" && listAwareResult) {
-    runtime.emitBlockedCommand(getMountedTextCommandName(command), [{
-      code: "suggesting_unsupported",
-      message: "List structure changes are not supported in suggesting mode.",
-    }]);
-    return;
-  }
-
-  if (listAwareResult) {
-    dispatchStoryMutationResult(runtime, context, listAwareResult, context.timestamp);
-    return;
-  }
-
-  switch (command.type) {
-    case "insert-text":
-      runtime.applyActiveStoryTextCommand({ type: "text.insert", text: command.text });
-      return;
-    case "delete-backward":
-      runtime.applyActiveStoryTextCommand({ type: "text.delete-backward" });
-      return;
-    case "delete-forward":
-      runtime.applyActiveStoryTextCommand({ type: "text.delete-forward" });
-      return;
-    case "insert-tab":
-      runtime.applyActiveStoryTextCommand({ type: "text.insert-tab" });
-      return;
-    case "outdent-tab":
-      return;
-    case "insert-hard-break":
-      runtime.applyActiveStoryTextCommand({ type: "text.insert-hard-break" });
-      return;
-    case "split-paragraph":
-      runtime.applyActiveStoryTextCommand({ type: "paragraph.split" });
-      return;
-  }
-}
-
-function getMountedTextCommandName(
-  command:
-    | { type: "insert-text"; text: string }
-    | { type: "delete-backward" }
-    | { type: "delete-forward" }
-    | { type: "insert-tab" }
-    | { type: "outdent-tab" }
-    | { type: "insert-hard-break" }
-    | { type: "split-paragraph" },
-): string {
-  switch (command.type) {
-    case "insert-text":
-      return "text.insert";
-    case "delete-backward":
-      return "text.delete-backward";
-    case "delete-forward":
-      return "text.delete-forward";
-    case "insert-tab":
-    case "outdent-tab":
-      return "text.insert-tab";
-    case "insert-hard-break":
-      return "text.insert-hard-break";
-    case "split-paragraph":
-      return "paragraph.split";
-  }
-}
-
-function applyListAwareTextCommand(
-  context: NonNullable<ReturnType<typeof getStoryMutationContext>>,
-  command:
-    | { type: "insert-text"; text: string }
-    | { type: "delete-backward" }
-    | { type: "delete-forward" }
-    | { type: "insert-tab" }
-    | { type: "outdent-tab" }
-    | { type: "insert-hard-break" }
-    | { type: "split-paragraph" },
-): {
-  changed: boolean;
-  document: EditorSessionState["canonicalDocument"];
-  selection: InternalSelectionSnapshot;
-} | null {
-  const paragraphContext = resolveActiveParagraphContext(context.localSnapshot);
-  if (!paragraphContext?.paragraph.numbering) {
-    return null;
-  }
-
-  switch (command.type) {
-    case "insert-tab": {
-      const result = indentListItems(
-        context.localDocument,
-        [paragraphContext.paragraphIndex],
-        { timestamp: context.timestamp },
-      );
-      return createListMutationResult(result, context.localSnapshot.selection);
-    }
-    case "outdent-tab": {
-      const result = outdentListItems(
-        context.localDocument,
-        [paragraphContext.paragraphIndex],
-        { timestamp: context.timestamp },
-      );
-      return createListMutationResult(result, context.localSnapshot.selection);
-    }
-    case "delete-backward": {
-      if (!paragraphContext.atParagraphStart || !context.localSnapshot.selection.isCollapsed) {
-        return null;
-      }
-      const result = backspaceAtListStart(
-        context.localDocument,
-        paragraphContext.paragraphIndex,
-        { timestamp: context.timestamp },
-      );
-      return result.handled
-        ? createListMutationResult(result, context.localSnapshot.selection)
-        : null;
-    }
-    case "split-paragraph": {
-      if (!context.localSnapshot.selection.isCollapsed || !paragraphContext.isEmpty) {
-        return null;
-      }
-      const result = splitListParagraph(
-        context.localDocument,
-        paragraphContext.paragraphIndex,
-        true,
-        { timestamp: context.timestamp },
-      );
-      return result.action === "split"
-        ? null
-        : createListMutationResult(result, context.localSnapshot.selection);
-    }
-    default:
-      return null;
-  }
-}
-
-function createListMutationResult(
-  result: {
-    document: EditorSessionState["canonicalDocument"];
-    affectedParagraphIndexes: number[];
-  },
-  selection: RuntimeRenderSnapshot["selection"],
-): {
-  changed: boolean;
-  document: EditorSessionState["canonicalDocument"];
-  selection: InternalSelectionSnapshot;
-} {
-  return {
-    changed: result.affectedParagraphIndexes.length > 0,
-    document: result.document,
-    selection: toRuntimeSelectionSnapshot(selection),
-  };
-}
-
-function resolveActiveParagraphContext(
-  snapshot: Pick<RuntimeRenderSnapshot, "surface" | "selection">,
-): {
-  paragraphIndex: number;
-  paragraph: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>;
-  atParagraphStart: boolean;
-  isEmpty: boolean;
-} | null {
-  if (!snapshot.surface) {
-    return null;
-  }
-
-  const paragraphIndex = resolveActiveParagraphIndex(
-    snapshot.surface.blocks,
-    snapshot.selection,
-  );
-  if (paragraphIndex === null) {
-    return null;
-  }
-
-  const selectionPosition =
-    snapshot.selection.activeRange.kind === "node"
-      ? snapshot.selection.activeRange.at
-      : snapshot.selection.head;
-  const paragraph = findSurfaceParagraphAtPosition(snapshot.surface.blocks, selectionPosition);
-  if (!paragraph) {
-    return null;
-  }
-
-  return {
-    paragraphIndex,
-    paragraph,
-    atParagraphStart:
-      snapshot.selection.isCollapsed &&
-      snapshot.selection.activeRange.kind !== "node" &&
-      snapshot.selection.anchor === snapshot.selection.head &&
-      snapshot.selection.head === paragraph.from,
-    isEmpty: isSurfaceParagraphEmpty(paragraph),
-  };
-}
-
-function findSurfaceParagraphAtPosition(
-  blocks: readonly SurfaceBlockSnapshot[],
-  position: number,
-): Extract<SurfaceBlockSnapshot, { kind: "paragraph" }> | null {
-  for (const block of blocks) {
-    if (position < block.from || position > block.to) {
-      continue;
-    }
-    if (block.kind === "paragraph") {
-      return block;
-    }
-    if (block.kind === "table") {
-      for (const row of block.rows) {
-        for (const cell of row.cells) {
-          const paragraph = findSurfaceParagraphAtPosition(cell.content, position);
-          if (paragraph) {
-            return paragraph;
-          }
-        }
-      }
-      continue;
-    }
-    if (block.kind === "sdt_block") {
-      const paragraph = findSurfaceParagraphAtPosition(block.children, position);
-      if (paragraph) {
-        return paragraph;
-      }
-    }
-  }
-  return null;
-}
-
-function isSurfaceParagraphEmpty(
-  paragraph: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
-): boolean {
-  if (paragraph.segments.length === 0) {
-    return true;
-  }
-  return paragraph.segments.every((segment) => segment.kind === "text" && segment.text.length === 0);
-}
-
-function applyRuntimeSelection(
-  runtime: WordReviewEditorRuntime,
-  selection: PublicSelectionSnapshot,
-): void {
-  const requestedStory = selection.storyTarget ?? { kind: "main" };
-  if (requestedStory.kind === "main") {
-    runtime.closeStory();
-  } else if (!storyTargetsEqual(runtime.getActiveStory(), requestedStory)) {
-    if (!runtime.openStory(requestedStory)) {
-      return;
-    }
-  }
-
-  runtime.dispatch({
-    type: "selection.set",
-    selection: toRuntimeSelectionSnapshot(stripStoryTarget(selection)),
-  });
-}
-
-function canApplyRuntimeMutation(snapshot: RuntimeRenderSnapshot): boolean {
-  return snapshot.isReady && !snapshot.readOnly && !snapshot.fatalError;
-}
-
-function emitWorkflowBlockedMutation(
-  runtime: WordReviewEditorRuntime,
-  command: string,
-): boolean {
-  const interactionGuardSnapshot = runtime.getInteractionGuardSnapshot();
-  if (interactionGuardSnapshot.blockedReasons.length === 0) {
-    return false;
-  }
-  runtime.emitBlockedCommand(command, interactionGuardSnapshot.blockedReasons);
-  return true;
-}
-
-function getStoryMutationContext(
-  runtime: WordReviewEditorRuntime,
-  command?: string,
-): {
-  timestamp: string;
-  activeStory: EditorStoryTarget;
-  persistedDocument: EditorSessionState["canonicalDocument"];
-  localDocument: EditorSessionState["canonicalDocument"];
-  localSnapshot: RuntimeRenderSnapshot;
-} | null {
-  const snapshot = runtime.getRenderSnapshot();
-  if (!canApplyRuntimeMutation(snapshot)) {
-    return null;
-  }
-  if (command && emitWorkflowBlockedMutation(runtime, command)) {
-    return null;
-  }
-
-  const persistedDocument = runtime.getSessionState().canonicalDocument;
-  const activeStory = snapshot.activeStory;
-  if (activeStory.kind === "main") {
-    return {
-      timestamp: new Date().toISOString(),
-      activeStory,
-      persistedDocument,
-      localDocument: persistedDocument,
-      localSnapshot: snapshot,
-    };
-  }
-
-  return {
-    timestamp: new Date().toISOString(),
-    activeStory,
-    persistedDocument,
-    localDocument: {
-      ...persistedDocument,
-      content: {
-        type: "doc",
-        children: [...getStoryBlocks(persistedDocument, activeStory)],
-      },
-    },
-    localSnapshot: {
-      ...snapshot,
-      activeStory: { kind: "main" },
-      selection: stripStoryTarget(snapshot.selection),
-    },
-  };
-}
-
-function dispatchStoryMutationResult(
-  runtime: WordReviewEditorRuntime,
-  context: {
-    activeStory: EditorStoryTarget;
-    persistedDocument: EditorSessionState["canonicalDocument"];
-  },
-  result: {
-    changed: boolean;
-    document: EditorSessionState["canonicalDocument"];
-    selection: InternalSelectionSnapshot;
-    mapping?: TransactionMapping;
-  },
-  timestamp: string,
-): void {
-  if (context.activeStory.kind === "main") {
-    dispatchRuntimeDocumentMutation(runtime, result, timestamp);
-    return;
-  }
-
-  if (!result.changed) {
-    return;
-  }
-
-  const nextDocument = replaceStoryBlocks(
-    context.persistedDocument,
-    context.activeStory,
-    result.document.content.children,
-  );
-  dispatchRuntimeDocumentMutation(
-    runtime,
-    {
-      changed: true,
-      document: nextDocument,
-      selection: result.selection,
-    },
-    timestamp,
-  );
-}
-
-function dispatchRuntimeDocumentMutation(
-  runtime: WordReviewEditorRuntime,
-  result: {
-    changed: boolean;
-    document: EditorSessionState["canonicalDocument"];
-    selection: InternalSelectionSnapshot;
-    mapping?: TransactionMapping;
-  },
-  timestamp: string,
-): void {
-  if (!result.changed) {
-    return;
-  }
-
-  runtime.dispatch({
-    type: "document.replace",
-    document: {
-      ...result.document,
-      updatedAt: timestamp,
-    },
-    mapping: result.mapping,
-    selection: result.selection,
-    origin: {
-      source: "api",
-      timestamp,
-    },
-  });
-}
-
-function stripStoryTarget(
-  selection: PublicSelectionSnapshot,
-): PublicSelectionSnapshot {
-  const { storyTarget: _storyTarget, ...rest } = selection;
-  return rest;
-}
-
-function applyRuntimeDeleteComment(
-  runtime: WordReviewEditorRuntime,
-  commentId: string,
-): void {
-  const snapshot = runtime.getRenderSnapshot();
-  if (!snapshot.isReady || snapshot.readOnly || snapshot.fatalError) {
-    return;
-  }
-
-  const sessionState = runtime.getSessionState();
-  if (!sessionState.canonicalDocument.review.comments[commentId]) {
-    return;
-  }
-
-  const nextComments = {
-    ...sessionState.canonicalDocument.review.comments,
-  };
-  delete nextComments[commentId];
-
-  runtime.dispatch({
-    type: "document.replace",
-    document: {
-      ...sessionState.canonicalDocument,
-      review: {
-        ...sessionState.canonicalDocument.review,
-        comments: nextComments,
-      },
-    },
-    selection: toRuntimeSelectionSnapshot(snapshot.selection),
-    origin: {
-      source: "api",
-      timestamp: new Date().toISOString(),
-    },
-  });
-}
-
-function normalizeRequestedSelection(
-  snapshot: RuntimeRenderSnapshot,
-  selection: PublicSelectionSnapshot | null,
-): PublicSelectionSnapshot {
-  return (
-    selection ??
-    createCollapsedPublicSelection(
-      snapshot.selection.head,
-      snapshot.activeStory.kind === "main" ? undefined : snapshot.activeStory,
-    )
-  );
-}
-
-export function __resolveLiveMarkupDisplay(
-  requested: MarkupDisplay | undefined,
-  isPageWorkspace: boolean,
-): MarkupDisplay {
-  return requested ?? (isPageWorkspace ? "all" : "clean");
-}
-
-function createCollapsedPublicSelection(
-  position: number,
-  storyTarget?: EditorStoryTarget,
-): PublicSelectionSnapshot {
-  return {
-    anchor: position,
-    head: position,
-    isCollapsed: true,
-    activeRange: {
-      kind: "range",
-      from: position,
-      to: position,
-      assoc: {
-        start: -1,
-        end: 1,
-      },
-    },
-    ...(storyTarget ? { storyTarget } : {}),
-  };
-}
-
-function clonePublicValue<T>(value: T): T {
-  return structuredClone(value);
-}
-
-function openDefaultStoryVariant(
-  runtime: WordReviewEditorRuntime,
-  pageLayout: PageLayoutSnapshot | undefined,
-  navigation: ReturnType<WordReviewEditorRuntime["getDocumentNavigationSnapshot"]> | undefined,
-  kind: "header" | "footer",
-): void {
-  const variants =
-    kind === "header"
-      ? pageLayout?.headerVariants
-      : pageLayout?.footerVariants;
-  const activePage = navigation?.pages[navigation.activePageIndex];
-  const isFirstPageInSection =
-    activePage !== undefined &&
-    activePage.sectionIndex === pageLayout?.sectionIndex &&
-    activePage.pageInSection === 0;
-  const isEvenDocumentPage = activePage !== undefined && (activePage.pageIndex + 1) % 2 === 0;
-
-  let variant =
-    pageLayout?.differentFirstPage && isFirstPageInSection
-      ? variants?.find((entry) => entry.variant === "first")
-      : undefined;
-
-  if (!variant && pageLayout?.differentOddEvenPages && isEvenDocumentPage) {
-    variant = variants?.find((entry) => entry.variant === "even");
-  }
-
-  if (!variant) {
-    variant = variants?.find((entry) => entry.variant === "default") ?? variants?.[0];
-  }
-
-  if (!variant) {
-    return;
-  }
-  runtime.openStory({
-    kind,
-    relationshipId: variant.relationshipId,
-    variant: variant.variant,
-    sectionIndex: pageLayout?.sectionIndex,
-  });
-}
-
-function searchRuntimeDocument(
-  runtime: WordReviewEditorRuntime,
-  mountedSurface: TwProseMirrorSurfaceRef | null,
-  query: string,
-  options: SearchOptions = {},
-): SearchResultSnapshot[] {
-  if (mountedSurface) {
-    return mountedSurface.search(query, options);
-  }
-
-  const snapshot = runtime.getRenderSnapshot();
-  return searchDocument(
-    runtime.getSessionState().canonicalDocument,
-    snapshot.selection,
-    snapshot.activeStory,
-    runtime.getDocumentNavigationSnapshot(),
-    query,
-    options,
-  );
-}
-
-function applyRegionAttributes(shell: HTMLElement): void {
-  const toolbar = shell.querySelector<HTMLElement>("header");
-  if (toolbar) {
-    toolbar.dataset.wreRegion = "toolbar";
-    toolbar.setAttribute("role", toolbar.getAttribute("role") ?? "toolbar");
-    toolbar.setAttribute("aria-label", toolbar.getAttribute("aria-label") ?? "Editor toolbar");
-    toolbar.tabIndex = -1;
-  }
-
-  const documentSurface = shell.querySelector<HTMLElement>('[aria-label="Document surface"]');
-  if (documentSurface) {
-    documentSurface.dataset.wreRegion = "document";
-  }
-
-  const reviewRail = shell.querySelector<HTMLElement>('[aria-label="Review rail"]');
-  if (reviewRail) {
-    reviewRail.dataset.wreRegion = "review-rail";
-    reviewRail.tabIndex = -1;
-  }
-
-  const statusBar = shell.querySelector<HTMLElement>("footer");
-  if (statusBar) {
-    statusBar.dataset.wreRegion = "status";
-    statusBar.setAttribute("role", statusBar.getAttribute("role") ?? "status");
-    statusBar.setAttribute("aria-label", statusBar.getAttribute("aria-label") ?? "Editor status bar");
-    statusBar.tabIndex = -1;
-  }
-}
-
-function focusRelativeRegion(shell: HTMLElement, direction: -1 | 1): void {
-  const activeRegion = getActiveRegionId(shell);
-  const startIndex =
-    activeRegion === null ? (direction === 1 ? -1 : 0) : ACCESSIBLE_REGION_ORDER.indexOf(activeRegion);
-
-  for (let offset = 1; offset <= ACCESSIBLE_REGION_ORDER.length; offset += 1) {
-    const index =
-      (startIndex + direction * offset + ACCESSIBLE_REGION_ORDER.length) %
-      ACCESSIBLE_REGION_ORDER.length;
-    const regionId = ACCESSIBLE_REGION_ORDER[index];
-    const target = findRegionFocusTarget(shell, regionId);
-    if (target) {
-      target.focus();
-      return;
-    }
-  }
-}
-
-function getActiveRegionId(shell: HTMLElement): AccessibleRegionId | null {
-  const activeElement = shell.ownerDocument.activeElement;
-  if (!(activeElement instanceof HTMLElement)) {
-    return null;
-  }
-
-  const region = activeElement.closest<HTMLElement>("[data-wre-region]");
-  const regionId = region?.dataset.wreRegion;
-  return isAccessibleRegionId(regionId) ? regionId : null;
-}
-
-function findRegionFocusTarget(
-  shell: HTMLElement,
-  regionId: AccessibleRegionId,
-): HTMLElement | null {
-  const region = shell.querySelector<HTMLElement>(`[data-wre-region="${regionId}"]`);
-  if (!region) {
-    return null;
-  }
-
-  if (regionId === "document" || regionId === "toolbar" || regionId === "review-rail" || regionId === "status") {
-    return region;
-  }
-
-  return null;
-}
-
-function isAccessibleRegionId(value: string | undefined): value is AccessibleRegionId {
-  return value === "toolbar" || value === "document" || value === "review-rail" || value === "status";
-}
-
-function buildAccessibilityStatusMessage(
-  snapshot: RuntimeRenderSnapshot,
-  loadError?: EditorError,
-): string {
-  if (loadError) {
-    return `Editor failed to load. ${loadError.message}`;
-  }
-
-  if (!snapshot.isReady) {
-    return "Editor loading. Document surface is not ready yet.";
-  }
-
-  if (snapshot.fatalError) {
-    return `Editor opened in diagnostics mode. ${snapshot.fatalError.message}`;
-  }
-
-  return [
-    snapshot.readOnly ? "Read-only mode." : "Editing enabled.",
-    `${snapshot.comments.totalCount} comment${snapshot.comments.totalCount === 1 ? "" : "s"}.`,
-    `${snapshot.trackedChanges.totalCount} tracked change${
-      snapshot.trackedChanges.totalCount === 1 ? "" : "s"
-    }.`,
-    snapshot.compatibility.blockExport ? "Export blocked." : "Export available.",
-  ].join(" ");
-}
-
-function getDiagnosticsModeMessage(error?: EditorError | null): string | null {
-  if (!error) {
-    return null;
-  }
-
-  if (error.code === "package_corrupt") {
-    return `${error.message} The document opened in read-only diagnostics mode so you can inspect the issue safely, but editing and export stay blocked until you reload a valid .docx package.`;
-  }
-
-  if (error.code === "validation_failed") {
-    return `${error.message} The document opened in read-only diagnostics mode because OOXML validation failed, so editing and export stay blocked until the source package is repaired.`;
-  }
-
-  return error.isFatal ? error.message : null;
-}
-
-function normalizeEditorError(error: unknown): EditorError {
-  if (
-    typeof error === "object" &&
-    error !== null &&
-    "errorId" in error &&
-    "code" in error &&
-    "message" in error
-  ) {
-    return error as EditorError;
-  }
-
-  return {
-    errorId: "word-review-editor-load",
-    code: "internal_invariant",
-    message: error instanceof Error ? error.message : "Unknown editor load failure.",
-    isFatal: true,
-    source: "runtime",
-  };
-}
-
-function guessSourceLabel(
-  initialSourceLabel?: string,
-  initialSessionState?: EditorSessionState,
-  initialSnapshot?: PersistedEditorSnapshot,
-  externalDocSource?: WordReviewEditorProps["externalDocSource"],
-): string | undefined {
-  return (
-    externalDocSource?.sourceLabel ??
-    (externalDocSource?.kind === "session"
-      ? externalDocSource.sessionState.sourcePackage?.sourceLabel
-      : undefined) ??
-    (externalDocSource?.kind === "snapshot"
-      ? externalDocSource.snapshot.sourcePackage?.sourceLabel
-      : undefined) ??
-    initialSourceLabel ??
-    initialSessionState?.sourcePackage?.sourceLabel ??
-    initialSessionState?.editorBuild ??
-    initialSnapshot?.sourcePackage?.sourceLabel ??
-    initialSnapshot?.editorBuild ??
-    undefined
-  );
-}
-
-function deriveEditorViewMode(
-  readOnly: boolean,
-  reviewMode: WordReviewEditorProps["reviewMode"] = "review",
-): EditorViewMode {
-  if (readOnly) {
-    return "view";
-  }
-  return reviewMode === "editing" ? "editing" : "review";
-}
-
-function resolveWordReviewEditorChromeVisibility(
-  chromeVisibility: WordReviewEditorProps["chromeVisibility"],
-  showReviewPanel: boolean,
-): Partial<WordReviewEditorChromeVisibility> {
-  const legacyVisibility =
-    showReviewPanel
-      ? {}
-      : { reviewRail: false } satisfies Partial<WordReviewEditorChromeVisibility>;
-  return {
-    ...legacyVisibility,
-    ...chromeVisibility,
-  };
-}
-
-function toRuntimeSelectionSnapshot(selection: PublicSelectionSnapshot) {
-  return {
-    anchor: selection.anchor,
-    head: selection.head,
-    isCollapsed: selection.isCollapsed,
-    activeRange:
-      selection.activeRange.kind === "range"
-        ? createRangeAnchor(
-            selection.activeRange.from,
-            selection.activeRange.to,
-            selection.activeRange.assoc,
-          )
-        : selection.activeRange.kind === "node"
-          ? createNodeAnchor(selection.activeRange.at, selection.activeRange.assoc)
-          : createDetachedAnchor(
-              selection.activeRange.lastKnownRange,
-              selection.activeRange.reason,
-            ),
-  };
-}
-
-function createSelectionFromAnchor(
-  anchor: PublicSelectionSnapshot["activeRange"],
-  storyTarget?: EditorStoryTarget,
-): PublicSelectionSnapshot {
-  switch (anchor.kind) {
-    case "range":
-      return {
-        anchor: anchor.from,
-        head: anchor.to,
-        isCollapsed: anchor.from === anchor.to,
-        activeRange: anchor,
-        ...(storyTarget ? { storyTarget } : {}),
-      };
-    case "node":
-      return {
-        anchor: anchor.at,
-        head: anchor.at,
-        isCollapsed: true,
-        activeRange: anchor,
-        ...(storyTarget ? { storyTarget } : {}),
-      };
-    case "detached":
-      return {
-        anchor: anchor.lastKnownRange.from,
-        head: anchor.lastKnownRange.to,
-        isCollapsed: anchor.lastKnownRange.from === anchor.lastKnownRange.to,
-        activeRange: anchor,
-        ...(storyTarget ? { storyTarget } : {}),
-      };
-  }
-}
-
-function estimateStoryLength(
-  sessionStateOrSnapshot?: EditorSessionState | PersistedEditorSnapshot,
-): number {
-  if (!sessionStateOrSnapshot) {
-    return 0;
-  }
-
-  const content = "sessionVersion" in sessionStateOrSnapshot
-    ? sessionStateOrSnapshot.canonicalDocument.content
-    : sessionStateOrSnapshot.canonicalDocument.content;
-  return Array.isArray(content?.children) ? content.children.length : 0;
-}
-
-function collapsedSelection(): RuntimeRenderSnapshot["selection"] {
-  return {
-    anchor: 0,
-    head: 0,
-    isCollapsed: true,
-    activeRange: {
-      kind: "range",
-      from: 0,
-      to: 0,
-      assoc: {
-        start: -1,
-        end: 1,
-      },
-    },
-  };
-}
-
-function toUint8Array(bytes: Uint8Array | ArrayBuffer): Uint8Array {
-  return bytes instanceof Uint8Array ? new Uint8Array(bytes) : new Uint8Array(bytes);
-}
-
-function summarizeSelectionPreview(snapshot: RuntimeRenderSnapshot): string | null {
-  if (!snapshot.surface || snapshot.selection.isCollapsed) {
-    return null;
-  }
-
-  const range = snapshot.selection.activeRange;
-  if (range.kind !== "range") {
-    return "Selected range";
-  }
-
-  const preview = snapshot.surface.plainText
-    .slice(range.from, range.to)
-    .replace(/\s+/g, " ")
-    .trim();
-
-  if (!preview) {
-    return "Selected range";
-  }
-
-  return preview.length > 48 ? `${preview.slice(0, 45)}...` : preview;
-}
-
-function selectionToolbarAnchorsEqual(
-  left: SelectionToolbarAnchor | null,
-  right: SelectionToolbarAnchor | null,
-): boolean {
-  if (left === right) {
-    return true;
-  }
-  if (!left || !right) {
-    return false;
-  }
-  return (
-    left.left === right.left &&
-    left.right === right.right &&
-    left.top === right.top &&
-    left.bottom === right.bottom
-  );
-}
-
-function workflowScopeSnapshotsEqual(
-  left: WorkflowScopeSnapshot | null,
-  right: WorkflowScopeSnapshot | null,
-): boolean {
-  if (left === right) {
-    return true;
-  }
-  if (!left || !right) {
-    return false;
-  }
-  return (
-    left.overlayPresent === right.overlayPresent &&
-    left.activeWorkItemId === right.activeWorkItemId &&
-    left.activeWorkItem === right.activeWorkItem &&
-    left.scopes === right.scopes &&
-    left.candidates === right.candidates &&
-    workflowBlockedReasonsEqual(left.blockedReasons, right.blockedReasons)
-  );
-}
-
-function interactionGuardSnapshotsEqual(
-  left: InteractionGuardSnapshot,
-  right: InteractionGuardSnapshot,
-): boolean {
-  if (left === right) {
-    return true;
-  }
-  return (
-    left.effectiveMode === right.effectiveMode &&
-    left.matchedScopeId === right.matchedScopeId &&
-    left.matchedScopeMode === right.matchedScopeMode &&
-    left.disabledReason === right.disabledReason &&
-    workflowBlockedReasonsEqual(left.blockedReasons, right.blockedReasons)
-  );
-}
-
-function workflowBlockedReasonsEqual(
-  left: readonly WorkflowBlockedCommandReason[],
-  right: readonly WorkflowBlockedCommandReason[],
-): boolean {
-  if (left === right) {
-    return true;
-  }
-  if (left.length !== right.length) {
-    return false;
-  }
-  for (let index = 0; index < left.length; index += 1) {
-    if (!workflowBlockedReasonEqual(left[index]!, right[index]!)) {
-      return false;
-    }
-  }
-  return true;
-}
-
-function workflowBlockedReasonEqual(
-  left: WorkflowBlockedCommandReason,
-  right: WorkflowBlockedCommandReason,
-): boolean {
-  return (
-    left.code === right.code &&
-    left.message === right.message &&
-    left.scopeId === right.scopeId &&
-    left.workItemId === right.workItemId &&
-    editorAnchorProjectionEqual(left.anchor, right.anchor) &&
-    storyTargetsEqual(left.storyTarget, right.storyTarget)
-  );
-}
-
-function editorAnchorProjectionEqual(
-  left: EditorAnchorProjection | undefined,
-  right: EditorAnchorProjection | undefined,
-): boolean {
-  if (left === right) {
-    return true;
-  }
-  if (!left || !right || left.kind !== right.kind) {
-    return false;
-  }
-
-  switch (left.kind) {
-    case "range":
-      return (
-        right.kind === "range" &&
-        left.from === right.from &&
-        left.to === right.to &&
-        left.assoc.start === right.assoc.start &&
-        left.assoc.end === right.assoc.end
-      );
-    case "node":
-      return right.kind === "node" && left.at === right.at && left.assoc === right.assoc;
-    case "detached":
-      return (
-        right.kind === "detached" &&
-        left.lastKnownRange.from === right.lastKnownRange.from &&
-        left.lastKnownRange.to === right.lastKnownRange.to &&
-        left.reason === right.reason
-      );
-  }
-
-  return false;
-}
-
-function createSelectionToolbarSelectionKey(
-  selection: RuntimeRenderSnapshot["selection"],
-  activeStory: EditorStoryTarget,
-  activeRevisionId?: string,
-): string | null {
-  if (activeRevisionId) {
-    return JSON.stringify({
-      story: activeStory,
-      revisionId: activeRevisionId,
-    });
-  }
-  if (selection.isCollapsed || selection.activeRange.kind !== "range") {
-    return null;
-  }
-
-  return JSON.stringify({
-    story: activeStory,
-    from: selection.activeRange.from,
-    to: selection.activeRange.to,
-  });
-}
-
-function buildSelectionToolbarModel(args: {
-  snapshot: RuntimeRenderSnapshot;
-  viewState: ReturnType<WordReviewEditorRuntime["getViewState"]>;
-  capabilities: ReturnType<typeof deriveCapabilities>;
-  documentNavigation: ReturnType<WordReviewEditorRuntime["getDocumentNavigationSnapshot"]>;
-  styleCatalog: StyleCatalogSnapshot;
-  formattingState: FormattingStateSnapshot;
-  workflowScopeSnapshot?: WorkflowScopeSnapshot | null;
-  interactionGuardSnapshot?: InteractionGuardSnapshot;
-  addCommentDisabledReason?: string;
-}): SelectionToolbarModel | null {
-  const {
-    snapshot,
-    viewState,
-    capabilities,
-    documentNavigation,
-    styleCatalog,
-    formattingState,
-    workflowScopeSnapshot,
-    interactionGuardSnapshot,
-    addCommentDisabledReason,
-  } = args;
-
-  if (
-    !snapshot.surface ||
-    snapshot.selection.isCollapsed ||
-    snapshot.selection.activeRange.kind !== "range" ||
-    !capabilities.canEdit ||
-    viewState.viewMode === "view"
-  ) {
-    return null;
-  }
-
-  const previewText = summarizeSelectionPreview(snapshot);
-  if (!previewText) {
-    return null;
-  }
-
-  const badges = [
-    createSelectionToolbarStoryBadge(viewState.activeStory),
-    createSelectionToolbarWorkflowBadge(
-      resolveSelectionWorkflowPosture(
-        snapshot,
-        viewState,
-        workflowScopeSnapshot,
-        interactionGuardSnapshot,
-      ),
-    ),
-    viewState.workspaceMode === "page" && documentNavigation.pageCount > 0
-      ? { label: `Page ${documentNavigation.activePageIndex + 1}` as const }
-      : null,
-    createSelectionToolbarStyleBadge(styleCatalog, formattingState),
-    createSelectionToolbarListBadge(viewState),
-  ].filter((badge): badge is SelectionToolbarModel["badges"][number] => Boolean(badge));
-
-  const workflowPosture = resolveSelectionWorkflowPosture(
-    snapshot,
-    viewState,
-    workflowScopeSnapshot,
-    interactionGuardSnapshot,
-  );
-  const canToggleFormatting = workflowPosture.mode === "edit";
-  const canAddComment = workflowPosture.mode === "view" || workflowPosture.mode === "blocked"
-    ? false
-    : capabilities.canAddComment;
-  const disabledReason =
-    workflowPosture.disabledReason ??
-    (canAddComment ? undefined : addCommentDisabledReason);
-
-  return {
-    previewText,
-    badges,
-    canToggleFormatting,
-    boldActive: formattingState.bold,
-    italicActive: formattingState.italic,
-    underlineActive: formattingState.underline,
-    canAddComment,
-    ...(disabledReason ? { disabledReason } : {}),
-  };
-}
-
-function buildSuggestionCardModel(args: {
-  snapshot: RuntimeRenderSnapshot;
-  viewState: ReturnType<WordReviewEditorRuntime["getViewState"]>;
-  capabilities: ReturnType<typeof deriveCapabilities>;
-  workflowScopeSnapshot?: WorkflowScopeSnapshot | null;
-  interactionGuardSnapshot?: InteractionGuardSnapshot;
-  activeRevisionId?: string;
-  suppressedSuggestionRevisionId?: string | null;
-  addCommentDisabledReason?: string;
-}): SuggestionCardModel | null {
-  const {
-    snapshot,
-    viewState,
-    capabilities,
-    workflowScopeSnapshot,
-    interactionGuardSnapshot,
-    activeRevisionId,
-    suppressedSuggestionRevisionId,
-    addCommentDisabledReason,
-  } = args;
-
-  if (
-    !snapshot.surface ||
-    !capabilities.canEdit ||
-    viewState.viewMode === "view"
-  ) {
-    return null;
-  }
-
-  const activeRange =
-    !snapshot.selection.isCollapsed && snapshot.selection.activeRange.kind === "range"
-      ? snapshot.selection.activeRange
-      : null;
-  const selectionFrom = activeRange
-    ? Math.min(activeRange.from, activeRange.to)
-    : null;
-  const selectionTo = activeRange
-    ? Math.max(activeRange.from, activeRange.to)
-    : null;
-  const candidateRevisions = snapshot.trackedChanges.revisions.filter((revision) =>
-    storyTargetsEqual(revision.storyTarget ?? { kind: "main" }, viewState.activeStory) &&
-    revision.status === "active" &&
-    revision.actionability === "actionable" &&
-    revision.anchor.kind === "range" &&
-    (
-      activeRevisionId === revision.revisionId ||
-      (
-        selectionFrom !== null &&
-        selectionTo !== null &&
-        rangesOverlap(
-          selectionFrom,
-          selectionTo,
-          revision.anchor.from,
-          revision.anchor.to,
-        )
-      )
-    )
-  );
-  const focusedRevision = (
-    activeRevisionId
-      ? candidateRevisions.find((revision) => revision.revisionId === activeRevisionId)
-      : null
-  ) ?? candidateRevisions[0];
-
-  if (!focusedRevision || focusedRevision.revisionId === suppressedSuggestionRevisionId) {
-    return null;
-  }
-
-  const badges = [
-    createSelectionToolbarStoryBadge(viewState.activeStory),
-    workflowScopeSnapshot?.activeWorkItem?.title
-      ? {
-          label: workflowScopeSnapshot.activeWorkItem.title,
-          tone: "accent" as const,
-        }
-      : null,
-  ].filter((badge): badge is SuggestionCardModel["badges"][number] => Boolean(badge));
-  const workflowPosture = resolveSelectionWorkflowPosture(
-    snapshot,
-    viewState,
-    workflowScopeSnapshot,
-    interactionGuardSnapshot,
-  );
-  const canReviewSuggestion = workflowPosture.mode === "edit" || workflowPosture.mode === "suggest";
-  const canAddComment = workflowPosture.mode === "view" || workflowPosture.mode === "blocked"
-    ? false
-    : capabilities.canAddComment;
-  const disabledReason =
-    workflowPosture.disabledReason ??
-    (canAddComment ? undefined : addCommentDisabledReason);
-
-  return {
-    revisionId: focusedRevision.revisionId,
-    kindLabel: getSuggestionKindLabel(focusedRevision.kind),
-    previewText:
-      focusedRevision.excerpt ??
-      focusedRevision.detail ??
-      focusedRevision.label ??
-      "Suggested change",
-    badges,
-    canAccept: canReviewSuggestion && capabilities.canAcceptChange && focusedRevision.canAccept,
-    canReject: canReviewSuggestion && capabilities.canRejectChange && focusedRevision.canReject,
-    canEditSuggestion: canReviewSuggestion,
-    canAddComment,
-    ...(disabledReason ? { disabledReason } : {}),
-  };
-}
-
-function createSelectionToolbarStoryBadge(
-  target: EditorStoryTarget,
-): SelectionToolbarModel["badges"][number] | null {
-  if (target.kind === "main") {
-    return null;
-  }
-
-  return {
-    label:
-      target.kind === "header"
-        ? target.variant === "default"
-          ? "Header"
-          : `Header ${target.variant}`
-        : target.kind === "footer"
-          ? target.variant === "default"
-            ? "Footer"
-            : `Footer ${target.variant}`
-          : target.kind === "footnote"
-            ? "Footnote"
-            : "Endnote",
-    tone: "accent",
-  };
-}
-
-function createSelectionToolbarStyleBadge(
-  styleCatalog: StyleCatalogSnapshot,
-  formattingState: FormattingStateSnapshot,
-): SelectionToolbarModel["badges"][number] | null {
-  if (!formattingState.paragraphStyleId) {
-    return null;
-  }
-
-  const styleEntry = styleCatalog.paragraphs.find(
-    (entry) => entry.styleId === formattingState.paragraphStyleId,
-  );
-  if (!styleEntry || styleEntry.isDefault) {
-    return null;
-  }
-
-  return { label: styleEntry.displayName };
-}
-
-function createSelectionToolbarListBadge(
-  viewState: ReturnType<WordReviewEditorRuntime["getViewState"]>,
-): SelectionToolbarModel["badges"][number] | null {
-  if (!viewState.activeListContext) {
-    return null;
-  }
-
-  return {
-    label: viewState.activeListContext.isOrdered ? "Numbered list" : "Bulleted list",
-  };
-}
-
-function createSelectionToolbarWorkflowBadge(
-  posture: ReturnType<typeof resolveSelectionWorkflowPosture>,
-): SelectionToolbarModel["badges"][number] | null {
-  switch (posture.mode) {
-    case "suggest":
-      return { label: "Suggest", tone: "accent" };
-    case "comment":
-      return { label: "Comment only", tone: "accent" };
-    case "view":
-      return { label: "View only" };
-    case "blocked":
-      return { label: "Blocked" };
-    default:
-      return null;
-  }
-}
-
-function resolveSelectionWorkflowPosture(
-  snapshot: RuntimeRenderSnapshot,
-  viewState: ReturnType<WordReviewEditorRuntime["getViewState"]>,
-  workflowScopeSnapshot?: WorkflowScopeSnapshot | null,
-  interactionGuardSnapshot?: InteractionGuardSnapshot,
-): {
-  mode: "edit" | "suggest" | "comment" | "view" | "blocked";
-  disabledReason?: string;
-} {
-  const blockedReasons =
-    interactionGuardSnapshot?.blockedReasons ??
-    workflowScopeSnapshot?.blockedReasons ??
-    [];
-  const blockingReason = blockedReasons[0];
-  if (blockingReason) {
-    if (blockingReason.code === "workflow_comment_only") {
-      return {
-        mode: "comment",
-        disabledReason: blockingReason.message,
-      };
-    }
-    if (blockingReason.code === "workflow_view_only") {
-      return {
-        mode: "view",
-        disabledReason: blockingReason.message,
-      };
-    }
-    return {
-      mode: "blocked",
-      disabledReason: blockingReason.message,
-    };
-  }
-
-  if (interactionGuardSnapshot) {
-    if (interactionGuardSnapshot.effectiveMode === "suggest") {
-      return {
-        mode: "suggest",
-        disabledReason:
-          interactionGuardSnapshot.disabledReason ??
-          "Suggestion authoring is active here; direct formatting changes are blocked.",
-      };
-    }
-    if (interactionGuardSnapshot.effectiveMode === "comment") {
-      return {
-        mode: "comment",
-        disabledReason: interactionGuardSnapshot.disabledReason,
-      };
-    }
-    if (interactionGuardSnapshot.effectiveMode === "view") {
-      return {
-        mode: "view",
-        disabledReason: interactionGuardSnapshot.disabledReason,
-      };
-    }
-    if (interactionGuardSnapshot.effectiveMode === "blocked") {
-      return {
-        mode: "blocked",
-        disabledReason: interactionGuardSnapshot.disabledReason,
-      };
-    }
-  }
-
-  const activeRange =
-    !snapshot.selection.isCollapsed && snapshot.selection.activeRange.kind === "range"
-      ? snapshot.selection.activeRange
-      : null;
-  const matchingScope = activeRange && workflowScopeSnapshot
-    ? workflowScopeSnapshot.scopes.find((scope) => {
-        const scopeStoryTarget = scope.storyTarget ?? { kind: "main" as const };
-        if (!storyTargetsEqual(scopeStoryTarget, viewState.activeStory)) {
-          return false;
-        }
-        if (scope.anchor.kind === "detached") {
-          return false;
-        }
-        const scopeFrom = scope.anchor.kind === "range" ? scope.anchor.from : scope.anchor.at;
-        const scopeTo = scope.anchor.kind === "range" ? scope.anchor.to : scope.anchor.at;
-        return activeRange.from >= scopeFrom && activeRange.to <= scopeTo;
-      })
-    : null;
-
-  if (matchingScope?.mode === "suggest") {
-    return {
-      mode: "suggest",
-      disabledReason: "Suggestion authoring is active here; direct formatting changes are blocked.",
-    };
-  }
-  if (matchingScope?.mode === "comment") {
-    return {
-      mode: "comment",
-      disabledReason: `Scope "${matchingScope.label ?? matchingScope.scopeId}" allows comments only.`,
-    };
-  }
-  if (matchingScope?.mode === "view") {
-    return {
-      mode: "view",
-      disabledReason: `Scope "${matchingScope.label ?? matchingScope.scopeId}" is view-only.`,
-    };
-  }
-  return { mode: "edit" };
-}
-
-function rangesOverlap(
-  leftFrom: number,
-  leftTo: number,
-  rightFrom: number,
-  rightTo: number,
-): boolean {
-  return leftFrom < rightTo && rightFrom < leftTo;
-}
-
-function getSuggestionKindLabel(kind: TrackedChangeEntrySnapshot["kind"]): string {
-  switch (kind) {
-    case "insertion":
-      return "Suggested insertion";
-    case "deletion":
-      return "Suggested deletion";
-    case "formatting":
-      return "Suggested formatting change";
-    case "property-change":
-      return "Suggested property change";
-    case "move":
-      return "Suggested move";
-  }
-}
-
-function buildActiveImageContext(args: {
-  canonicalDocument: PersistedEditorSnapshot["canonicalDocument"];
-  selection: RuntimeRenderSnapshot["selection"];
-  storyTarget: EditorStoryTarget;
-  surface?: RuntimeRenderSnapshot["surface"];
-}): {
-  mediaId: string;
-  display: "inline" | "floating";
-  widthEmu?: number;
-  heightEmu?: number;
-  horizontalOffsetEmu?: number;
-  verticalOffsetEmu?: number;
-} | null {
-  const imageSegment = findSelectedImageSegment(args.surface, args.selection);
-  if (!imageSegment) {
-    return null;
-  }
-
-  const storyBlocks = getStoryBlocks(args.canonicalDocument, args.storyTarget);
-  const imageNode = findImageNodeByMediaId(storyBlocks, imageSegment.mediaId);
-  const mediaItem = args.canonicalDocument.media.items[imageSegment.mediaId];
-
-  return {
-    mediaId: imageSegment.mediaId,
-    display: imageSegment.display === "floating" ? "floating" : "inline",
-    widthEmu: mediaItem?.widthEmu,
-    heightEmu: mediaItem?.heightEmu,
-    horizontalOffsetEmu: imageNode?.floating?.horizontalPosition?.offset,
-    verticalOffsetEmu: imageNode?.floating?.verticalPosition?.offset,
-  };
-}
-
-function findSelectedImageSegment(
-  surface: RuntimeRenderSnapshot["surface"] | undefined,
-  selection: RuntimeRenderSnapshot["selection"],
-): Extract<NonNullable<RuntimeRenderSnapshot["surface"]>["blocks"][number], { kind: "paragraph" }>["segments"][number] & {
-  kind: "image";
-} | null {
-  if (!surface) {
-    return null;
-  }
-
-  const position =
-    selection.activeRange.kind === "node" ? selection.activeRange.at : selection.head;
-
-  return findSelectedImageSegmentInBlocks(surface.blocks, position);
-}
-
-function findSelectedImageSegmentInBlocks(
-  blocks: readonly SurfaceBlockSnapshot[],
-  position: number,
-): Extract<NonNullable<RuntimeRenderSnapshot["surface"]>["blocks"][number], { kind: "paragraph" }>["segments"][number] & {
-  kind: "image";
-} | null {
-  for (const block of blocks) {
-    if (position < block.from || position > block.to) {
-      continue;
-    }
-
-    if (block.kind === "paragraph") {
-      const imageSegment = block.segments.find(
-        (segment) => segment.kind === "image" && position >= segment.from && position <= segment.to,
-      );
-      if (imageSegment && imageSegment.kind === "image") {
-        return imageSegment;
-      }
-      continue;
-    }
-
-    if (block.kind === "table") {
-      for (const row of block.rows) {
-        for (const cell of row.cells) {
-          const match = findSelectedImageSegmentInBlocks(cell.content, position);
-          if (match) {
-            return match;
-          }
-        }
-      }
-      continue;
-    }
-
-    if (block.kind === "sdt_block") {
-      const match = findSelectedImageSegmentInBlocks(block.children, position);
-      if (match) {
-        return match;
-      }
-    }
-  }
-
-  return null;
-}
-
-function findImageNodeByMediaId(blocks: readonly unknown[], mediaId: string): {
-  floating?: {
-    horizontalPosition?: { offset?: number };
-    verticalPosition?: { offset?: number };
-  };
-} | null {
-  for (const block of blocks) {
-    const match = findImageNodeInValue(block, mediaId);
-    if (match) {
-      return match;
-    }
-  }
-  return null;
-}
-
-function findImageNodeInValue(
-  value: unknown,
-  mediaId: string,
-): {
-  floating?: {
-    horizontalPosition?: { offset?: number };
-    verticalPosition?: { offset?: number };
-  };
-} | null {
-  if (!value || typeof value !== "object") {
-    return null;
-  }
-
-  const record = value as {
-    type?: string;
-    mediaId?: string;
-    children?: unknown[];
-    rows?: Array<{ cells?: Array<{ children?: unknown[] }> }>;
-    floating?: {
-      horizontalPosition?: { offset?: number };
-      verticalPosition?: { offset?: number };
-    };
-  };
-
-  if (record.type === "image" && record.mediaId === mediaId) {
-    return record;
-  }
-
-  if (Array.isArray(record.children)) {
-    for (const child of record.children) {
-      const match = findImageNodeInValue(child, mediaId);
-      if (match) {
-        return match;
-      }
-    }
-  }
-
-  if (Array.isArray(record.rows)) {
-    for (const row of record.rows) {
-      for (const cell of row.cells ?? []) {
-        for (const child of cell.children ?? []) {
-          const match = findImageNodeInValue(child, mediaId);
-          if (match) {
-            return match;
-          }
-        }
-      }
-    }
-  }
-
-  return null;
-}
-
-function createImageDataUrl(contentType: string, bytes: Uint8Array): string {
-  const base64 = bytesToBase64(bytes);
-  return `data:${contentType};base64,${base64}`;
-}
-
-function bytesToBase64(bytes: Uint8Array): string {
-  let binary = "";
-  for (let index = 0; index < bytes.length; index += 1) {
-    binary += String.fromCharCode(bytes[index] ?? 0);
-  }
-  return btoa(binary);
-}