@beyondwork/docx-react-component 1.0.18 → 1.0.20

package/src/ui/WordReviewEditor.tsx

@@ -1,112 +1,174 @@
 import React, {
   forwardRef,
+  type FocusEvent,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
   useState,
-  useSyncExternalStore,
 } from "react";
 
 import type {
   AutosaveState,
-  EditorDatastoreAdapter,
   CompatibilityReport,
+  DocumentNavigationSnapshot,
+  EditorAnchorProjection,
+  EditorDatastoreAdapter,
+  EditorHostAdapter,
+  EditorSessionState,
+  ExportResult,
   EditorError,
+  EditorStoryTarget,
+  EditorViewStateSnapshot,
   EditorWarning,
-  FormattingAlignment,
   ExportDocxOptions,
+  FieldSnapshot,
+  FormattingAlignment,
+  FormattingStateSnapshot,
+  HeaderFooterLinkPatch,
+  InteractionGuardSnapshot,
   InsertImageOptions,
   InsertTableOptions,
+  PageLayoutSnapshot,
   PersistedEditorSnapshot,
   RuntimeRenderSnapshot,
+  SectionBreakType,
+  SectionLayoutPatch,
+  SectionPageNumberingPatch,
   SearchOptions,
   SearchResultSnapshot,
   SelectionSnapshot as PublicSelectionSnapshot,
-  ExportResult,
+  StyleCatalogSnapshot,
+  SurfaceBlockSnapshot,
+  TocRefreshResult,
+  UpdateFieldsResult,
+  ViewMode as EditorViewMode,
+  WorkflowBlockedCommandReason,
+  WorkflowScopeSnapshot,
   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 { insertImage as insertImageInDocument } from "../core/commands/image-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 {
-  createCanonicalDocumentId,
-  type SelectionSnapshot as InternalSelectionSnapshot,
-} from "../core/state/editor-state.ts";
-import {
-  createDocumentRuntime,
-  type DocumentRuntime,
-} from "../runtime/document-runtime.ts";
-import { loadDocxEditorSession } from "../io/docx-session.ts";
+  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 {
-  createSearchExcerpt,
-  findSearchMatches,
-} from "../ui-tailwind/editor-surface/search-plugin";
+  createEditorViewStateSnapshot,
+  createViewState,
+} from "../runtime/view-state.ts";
 import {
-  TwProseMirrorSurface,
   type TwProseMirrorSurfaceRef,
 } from "../ui-tailwind/editor-surface/tw-prosemirror-surface";
-import { TwReviewWorkspace } from "../ui-tailwind/tw-review-workspace";
+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 type { ViewMode } from "../ui-tailwind/toolbar/tw-toolbar";
+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,
+} from "./headless/selection-toolbar-model";
+import { type EditorCommandBag, useCommandBag } from "./editor-command-bag.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";
 
-interface ResolvedSource {
-  source: "docx" | "snapshot" | "datastore";
-  sourceLabel?: string;
-  initialDocx?: Uint8Array | ArrayBuffer;
-  initialSnapshot?: PersistedEditorSnapshot;
-}
-
-interface CreateRuntimeArgs {
-  documentId: string;
-  readOnly: boolean;
-  source: ResolvedSource;
-  datastore?: EditorDatastoreAdapter;
-  currentUserId?: string;
-}
-
-interface RuntimeLifecycleHandlers {
-  onEvent?: (event: WordReviewEditorEvent) => void;
-  onWarning?: (warning: EditorWarning) => void;
-  onError?: (error: EditorError) => void;
-}
-
-interface WordReviewEditorRuntime extends DocumentRuntime {
-  getFatalError?(): EditorError | undefined;
-  dispose?(): void;
-}
-
-type PackageBackedDocxSession = ReturnType<typeof loadDocxEditorSession>;
-
-interface SnapshotExportBarrier {
-  reason:
-    | "missing_source_package_provenance"
-    | "invalid_source_package_provenance";
-  message: string;
-}
+export {
+  __createFallbackRuntime,
+  __resolveWordReviewEditorSource,
+} from "./editor-runtime-boundary.ts";
 
 const VISUALLY_HIDDEN_STYLES: React.CSSProperties = {
   position: "absolute",
@@ -120,6 +182,15 @@ const VISUALLY_HIDDEN_STYLES: React.CSSProperties = {
   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",
@@ -129,6 +200,12 @@ const ACCESSIBLE_REGION_ORDER = [
 
 type AccessibleRegionId = (typeof ACCESSIBLE_REGION_ORDER)[number];
 
+type SelectionToolbarDismissReason =
+  | "blur"
+  | "chrome-action"
+  | "comment-action"
+  | "escape";
+
 export function __createWordReviewEditorRefBridge(
   runtime: WordReviewEditorRuntime,
   mountedSurface?: TwProseMirrorSurfaceRef | null,
@@ -138,6 +215,7 @@ export function __createWordReviewEditorRefBridge(
     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),
@@ -152,6 +230,7 @@ export function __createWordReviewEditorRefBridge(
     acceptAllChanges: () => runtime.acceptAllChanges(),
     rejectAllChanges: () => runtime.rejectAllChanges(),
     exportDocx: (options) => runtime.exportDocx(options),
+    getSessionState: () => runtime.getSessionState(),
     getSnapshot: () => runtime.getPersistedSnapshot(),
     getRenderSnapshot: () => clonePublicValue(runtime.getRenderSnapshot()),
     getCompatibilityReport: () => runtime.getCompatibilityReport(),
@@ -165,7 +244,7 @@ export function __createWordReviewEditorRefBridge(
       clonePublicValue(runtime.getRenderSnapshot().trackedChanges),
     isDirty: () => runtime.getRenderSnapshot().isDirty,
     getFormattingState: () => getFormattingStateFromRenderSnapshot(runtime.getRenderSnapshot()),
-    replaceText: (text, target) => runtime.replaceText(text, target),
+    getStyleCatalog: () => getRuntimeStyleCatalog(runtime),
     toggleBold: () => {
       applyRuntimeFormattingOperation(runtime, { type: "toggle", mark: "bold" });
     },
@@ -214,6 +293,12 @@ export function __createWordReviewEditorRefBridge(
         alignment,
       });
     },
+    setParagraphStyle: (styleId) => {
+      applyRuntimeParagraphStyle(runtime, styleId);
+    },
+    setTableStyle: (styleId) => {
+      applyRuntimeTableStyle(runtime, styleId);
+    },
     indent: () => {
       applyRuntimeFormattingOperation(runtime, { type: "indent" });
     },
@@ -281,190 +366,127 @@ export function __createWordReviewEditorRefBridge(
       });
     },
     search: (query, options) =>
-      mountedSurface?.search(query, options) ??
-      searchSnapshotSurface(runtime.getRenderSnapshot(), query, options),
+      searchRuntimeDocument(runtime, mountedSurface ?? null, query, options),
     clearSearch: () => {
       mountedSurface?.clearSearch();
     },
     setSelection: (selection) => {
-      runtime.dispatch({
-        type: "selection.set",
-        selection: toRuntimeSelectionSnapshot(
-          normalizeRequestedSelection(runtime.getRenderSnapshot(), 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;
-      runtime.dispatch({
-        type: "selection.set",
-        selection: toRuntimeSelectionSnapshot(createSelectionFromAnchor(revision.anchor)),
-      });
+      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;
-      runtime.dispatch({
-        type: "selection.set",
-        selection: toRuntimeSelectionSnapshot(createSelectionFromAnchor(comment.anchor)),
-      });
+      applyRuntimeSelection(runtime, createSelectionFromAnchor(comment.anchor));
     },
-  };
-}
-
-export async function __resolveWordReviewEditorSource(
-  props: Pick<
-    WordReviewEditorProps,
-    | "documentId"
-    | "datastore"
-    | "externalDocSource"
-    | "initialDocx"
-    | "initialSnapshot"
-    | "initialSourceLabel"
-  >,
-): Promise<ResolvedSource> {
-  const explicitInitialCount =
-    Number(Boolean(props.initialDocx)) + Number(Boolean(props.initialSnapshot));
-  if (explicitInitialCount > 1) {
-    throw new Error("Provide exactly one of initialDocx or initialSnapshot.");
-  }
-
-  if (props.externalDocSource) {
-    return props.externalDocSource.kind === "docx"
-      ? {
-          source: "docx",
-          initialDocx: props.externalDocSource.bytes,
-          sourceLabel: props.externalDocSource.sourceLabel,
-        }
-      : {
-          source: "snapshot",
-          initialSnapshot: props.externalDocSource.snapshot,
-          sourceLabel: props.externalDocSource.sourceLabel,
-        };
-  }
-
-  if (props.initialSnapshot) {
-    return {
-      source: "snapshot",
-      initialSnapshot: props.initialSnapshot,
-      sourceLabel: props.initialSourceLabel,
-    };
-  }
-
-  if (props.initialDocx) {
-    return {
-      source: "docx",
-      initialDocx: props.initialDocx,
-      sourceLabel: props.initialSourceLabel,
-    };
-  }
-
-  if (!props.datastore) {
-    throw new Error(
-      `WordReviewEditor ${props.documentId} needs initialDocx, initialSnapshot, or datastore.load().`,
-    );
-  }
-
-  const loadResult = await props.datastore.load({
-    documentId: props.documentId,
-  });
-
-  if (!loadResult.source) {
-    throw new Error(`Datastore did not return a loadable source for ${props.documentId}.`);
-  }
-
-  return loadResult.source.kind === "docx"
-    ? {
-        source: "datastore",
-        initialDocx: loadResult.source.bytes,
-        sourceLabel: loadResult.source.sourceLabel,
-      }
-    : {
-        source: "datastore",
-        initialSnapshot: loadResult.source.snapshot,
-        sourceLabel: loadResult.source.sourceLabel,
-      };
-}
-
-export function __createFallbackRuntime(args: CreateRuntimeArgs): WordReviewEditorRuntime {
-  return createRuntime(args);
-}
-
-function createRuntime(
-  args: CreateRuntimeArgs,
-  handlers: RuntimeLifecycleHandlers = {},
-): WordReviewEditorRuntime {
-  const docxSession = args.source.initialDocx
-    ? loadDocxEditorSession({
-        documentId: args.documentId,
-        sourceLabel: args.source.sourceLabel,
-        bytes: args.source.initialDocx,
-        editorBuild: "dev",
-      })
-    : undefined;
-  const snapshotExportResolution = !args.source.initialDocx
-    ? resolveSnapshotExportSession(args)
-    : undefined;
-  const initialSnapshot =
-    args.source.initialSnapshot ??
-    docxSession?.initialSnapshot ??
-    createFallbackPersistedSnapshot(
-      args.documentId,
-      args.source.sourceLabel ?? "Generated shell snapshot",
-    );
-  const runtimeSnapshot = snapshotExportResolution?.barrier
-    ? applySnapshotExportBarrier(initialSnapshot, snapshotExportResolution.barrier)
-    : initialSnapshot;
-
-  return createDocumentRuntime({
-    documentId: args.documentId,
-    initialSnapshot: runtimeSnapshot,
-    sourceKind: args.source.source,
-    sourceLabel: args.source.sourceLabel,
-    readOnly: args.readOnly || docxSession?.readOnly,
-    editorBuild: runtimeSnapshot.editorBuild,
-    fatalError: docxSession?.fatalError,
-    exportDocx: async (snapshot, options) => {
-      if (docxSession) {
-        return docxSession.exportDocx(snapshot, options);
-      }
-
-      if (snapshotExportResolution?.session) {
-        return snapshotExportResolution.session.exportDocx(snapshot, options);
-      }
-
-      throw createSnapshotExportBlockedError(
-        args.documentId,
-        snapshotExportResolution?.barrier ?? {
-          reason: "missing_source_package_provenance",
-          message:
-            "DOCX export is blocked because this snapshot does not carry embedded source package provenance.",
-        },
-      );
+    openStory: (target: EditorStoryTarget) => {
+      runtime.openStory(target);
     },
-    onWarning: handlers.onWarning,
-    onError: handlers.onError,
-    defaultAuthorId: args.currentUserId,
-  });
+    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());
+    },
+    getWorkflowCandidateRanges: (options) => {
+      return clonePublicValue(runtime.getWorkflowCandidateRanges(options));
+    },
+    replaceWorkflowMarkupText: (markupId, text) => {
+      runtime.replaceWorkflowMarkupText(markupId, text);
+    },
+  };
 }
 
 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 = "simple",
+      markupDisplay,
       onError,
       onEvent,
       onWarning,
@@ -473,203 +495,178 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       showReviewPanel = true,
     } = props;
 
-    const [runtime, setRuntime] = useState<WordReviewEditorRuntime | null>(null);
-    const [loadError, setLoadError] = useState<EditorError | null>(null);
-    const [viewMode, setViewMode] = useState<ViewMode>("canvas");
-    const liveMarkupDisplay: MarkupDisplay = viewMode === "document" ? "all" : "clean";
     const [activeRailTab, setActiveRailTab] = useState<ReviewRailTab>("comments");
     const [showTrackedChanges, setShowTrackedChanges] = useState(false);
     const [activeRevisionId, setActiveRevisionId] = useState<string | undefined>();
-    const runtimeRef = useRef<WordReviewEditorRuntime | 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 autosaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-    const lastSavedRevisionTokenRef = useRef<string | null>(null);
-    const datastoreRef = useRef(datastore);
-    const onEventRef = useRef(onEvent);
-    const onWarningRef = useRef(onWarning);
-    const onErrorRef = useRef(onError);
-    const initialSourceRef = useRef<{
-      documentId: string;
-      initialDocx?: Uint8Array | ArrayBuffer;
-      initialSnapshot?: PersistedEditorSnapshot;
-      initialSourceLabel?: string;
-    } | null>(null);
-
-    if (!initialSourceRef.current || initialSourceRef.current.documentId !== documentId) {
-      initialSourceRef.current = {
-        documentId,
-        initialDocx,
-        initialSnapshot,
-        initialSourceLabel,
-      };
-    }
-
-    const stableInitialSource = initialSourceRef.current;
-    const sourceReloadKey = externalDocSource
-      ? `external:${externalDocSource.kind}:${externalDocumentRevision ?? "static"}`
-      : stableInitialSource?.initialSnapshot
-        ? "initial-snapshot"
-        : stableInitialSource?.initialDocx
-          ? "initial-docx"
-          : "datastore";
-
-    useEffect(() => {
-      datastoreRef.current = datastore;
-      onEventRef.current = onEvent;
-      onWarningRef.current = onWarning;
-      onErrorRef.current = onError;
-    }, [datastore, onError, onEvent, onWarning]);
-
-    useEffect(() => {
-      let cancelled = false;
-
-      async function loadRuntime(): Promise<void> {
-        setLoadError(null);
-
-        try {
-          const source = await __resolveWordReviewEditorSource({
-            documentId,
-            datastore: datastoreRef.current,
-            externalDocSource,
-            initialDocx: stableInitialSource?.initialDocx,
-            initialSnapshot: stableInitialSource?.initialSnapshot,
-            initialSourceLabel: stableInitialSource?.initialSourceLabel,
-          });
-
-          if (cancelled) {
-            return;
+    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(),
           }
-
-          runtimeRef.current?.dispose?.();
-          const nextRuntime = createRuntime(
-            {
-              documentId,
-              readOnly,
-              source,
-              datastore: datastoreRef.current,
-              currentUserId: currentUser.userId,
-            },
-            {
-              onWarning: onWarningRef.current,
-              onError: onErrorRef.current,
-            },
-          );
-          emitEditorEvent({
-            datastore: datastoreRef.current,
-            onEvent: onEventRef.current,
-            event: createReadyEvent(nextRuntime, source.source),
-          });
-          runtimeRef.current = nextRuntime;
-          setRuntime(nextRuntime);
-        } catch (error) {
-          if (cancelled) {
-            return;
+        : null,
+      loadingViewState,
+    );
+    const isPageWorkspace = viewState.workspaceMode === "page";
+    const liveMarkupDisplay = __resolveLiveMarkupDisplay(markupDisplay, isPageWorkspace);
+    const documentNavigation = useRuntimeValue(
+      runtime
+        ? {
+            subscribe: (listener) => runtime.subscribe(listener),
+            getValue: () => runtime.getDocumentNavigationSnapshot(),
           }
-
-          const normalized = normalizeEditorError(error);
-          setLoadError(normalized);
-          onErrorRef.current?.(normalized);
-          emitEditorEvent({
-            datastore: datastoreRef.current,
-            onEvent: onEventRef.current,
-            event: {
-              type: "error",
-              documentId,
-              error: normalized,
-            },
-          });
-        }
-      }
-
-      void loadRuntime();
-
-      return () => {
-        cancelled = true;
-      };
-    }, [
-      documentId,
-      readOnly,
-      sourceReloadKey,
-    ]);
+        : 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,
+      { blockedReasons: [] } satisfies InteractionGuardSnapshot,
+      interactionGuardSnapshotsEqual,
+    );
+    const sessionState = useMemo(
+      () => (runtime ? runtime.getSessionState() : loadingSessionState),
+      [loadingSessionState, runtime, snapshot.revisionToken],
+    );
+    const canonicalDocument = sessionState.canonicalDocument;
+    const effectiveViewMode = deriveEditorViewMode(snapshot.readOnly, reviewMode);
 
     useEffect(() => {
-      if (!runtime?.subscribeToEvents) {
-        return;
-      }
-
-      return runtime.subscribeToEvents((event) => {
-        emitEditorEvent({
-          datastore: datastoreRef.current,
-          onEvent: onEventRef.current,
-          event,
-        });
-      });
-    }, [runtime]);
+      activeRuntime.setViewMode(effectiveViewMode);
+    }, [activeRuntime, effectiveViewMode]);
 
     useEffect(() => {
-      return () => {
-        if (autosaveTimerRef.current) {
-          clearTimeout(autosaveTimerRef.current);
-          autosaveTimerRef.current = null;
-        }
-        runtimeRef.current?.dispose?.();
-        runtimeRef.current = null;
+      runtimeViewStateSeedRef.current = {
+        workspaceMode: viewState.workspaceMode,
+        zoomLevel: viewState.zoomLevel,
       };
-    }, []);
-
-    const optimisticRuntime = useMemo(
-      () =>
-        __createFallbackRuntime({
-          documentId,
-          readOnly,
-          currentUserId: currentUser.userId,
-          source: {
-            source: "snapshot",
-            initialSnapshot:
-              initialSnapshot ?? createFallbackPersistedSnapshot(documentId, initialSourceLabel),
-            sourceLabel: guessSourceLabel(initialSourceLabel, initialSnapshot, externalDocSource),
-          },
-          datastore: datastoreRef.current,
-        }),
-      [
-        currentUser.userId,
-        documentId,
-        initialSnapshot,
-        initialSourceLabel,
-        readOnly,
-        externalDocSource?.kind,
-        externalDocSource?.sourceLabel,
-      ],
-    );
-
-    const fallbackSnapshot = useMemo(
-      () =>
-        loadError
-          ? createErrorSnapshot(documentId, loadError)
-          : createLoadingSnapshot(
-              documentId,
-              readOnly,
-              guessSourceLabel(initialSourceLabel, initialSnapshot, externalDocSource),
-            ),
-      [
-        documentId,
-        externalDocSource,
-        initialSnapshot,
-        initialSourceLabel,
-        loadError,
-        readOnly,
-      ],
-    );
-
-    const snapshot = useSyncExternalStore(
-      (listener) => runtime?.subscribe(listener) ?? (() => undefined),
-      () => runtime?.getRenderSnapshot() ?? fallbackSnapshot,
-      () => runtime?.getRenderSnapshot() ?? fallbackSnapshot,
-    );
+    }, [viewState.workspaceMode, viewState.zoomLevel]);
 
-    const activeRuntime = runtime ?? optimisticRuntime;
+    useEffect(() => {
+      recordPerfSample("shell.render");
+      incrementInvalidationCounter("shell.rerenders");
+    }, [snapshot.revisionToken, snapshot.selection, viewState, documentNavigation]);
 
     useImperativeHandle(
       ref,
@@ -678,6 +675,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         blur: () => activeRuntime.blur(),
         undo: () => activeRuntime.undo(),
         redo: () => activeRuntime.redo(),
+        replaceText: (text, target) => activeRuntime.replaceText(text, target),
         addComment: (params) =>
           activeRuntime.addComment({
             ...params,
@@ -699,7 +697,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         rejectAllChanges: () => activeRuntime.rejectAllChanges(),
         exportDocx: (options) =>
           runtime
-            ? persistAndExport({
+            ? persistAndExportFromBoundary({
+                hostAdapter: hostAdapterRef.current,
                 datastore: datastoreRef.current,
                 documentId,
                 runtime,
@@ -709,12 +708,14 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
                 lastSavedRevisionTokenRef,
                 autosaveTimerRef,
               })
-            : rejectExportWhileLoading({
+            : 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(),
@@ -730,7 +731,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         isDirty: () => activeRuntime.getRenderSnapshot().isDirty,
         getFormattingState: () =>
           getFormattingStateFromRenderSnapshot(activeRuntime.getRenderSnapshot()),
-        replaceText: (text, target) => activeRuntime.replaceText(text, target),
+        getStyleCatalog: () => getRuntimeStyleCatalog(activeRuntime),
         toggleBold: () => {
           applyRuntimeFormattingOperation(activeRuntime, {
             type: "toggle",
@@ -797,6 +798,12 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
             alignment,
           });
         },
+        setParagraphStyle: (styleId) => {
+          applyRuntimeParagraphStyle(activeRuntime, styleId);
+        },
+        setTableStyle: (styleId) => {
+          applyRuntimeTableStyle(activeRuntime, styleId);
+        },
         indent: () => {
           applyRuntimeFormattingOperation(activeRuntime, { type: "indent" });
         },
@@ -864,45 +871,121 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
           });
         },
         search: (query, options) =>
-          surfaceRef.current?.search(query, options) ??
-          searchSnapshotSurface(activeRuntime.getRenderSnapshot(), query, options),
+          searchRuntimeDocument(
+            activeRuntime,
+            surfaceRef.current,
+            query,
+            options,
+          ),
         clearSearch: () => {
           surfaceRef.current?.clearSearch();
         },
         setSelection: (selection) => {
-          activeRuntime.dispatch({
-            type: "selection.set",
-            selection: toRuntimeSelectionSnapshot(
-              normalizeRequestedSelection(activeRuntime.getRenderSnapshot(), 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;
-          activeRuntime.dispatch({
-            type: "selection.set",
-            selection: toRuntimeSelectionSnapshot(createSelectionFromAnchor(revision.anchor)),
-          });
+          applyRuntimeSelection(activeRuntime, createSelectionFromAnchor(revision.anchor));
         },
         scrollToComment: (commentId: string) => {
           const comment = activeRuntime.getRenderSnapshot().comments.threads.find(
             (t) => t.commentId === commentId,
           );
           if (!comment || comment.anchor.kind === "detached") return;
-          activeRuntime.dispatch({
-            type: "selection.set",
-            selection: toRuntimeSelectionSnapshot(createSelectionFromAnchor(comment.anchor)),
-          });
+          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());
+        },
+        getWorkflowCandidateRanges: (options) => {
+          return clonePublicValue(activeRuntime.getWorkflowCandidateRanges(options));
+        },
+        replaceWorkflowMarkupText: (markupId, text) => {
+          activeRuntime.replaceWorkflowMarkupText(markupId, text);
         },
       }),
       [activeRuntime, currentUser.userId, documentId, runtime],
     );
 
     useEffect(() => {
-      if (!datastoreRef.current || props.autosave?.enabled === false || !runtime || readOnly) {
+      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;
@@ -924,7 +1007,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
 
       const debounceMs = props.autosave?.debounceMs ?? 800;
       if (debounceMs <= 0) {
-        void persistSnapshot({
+        void persistSessionFromBoundary({
+          hostAdapter: hostAdapterRef.current,
           datastore: datastoreRef.current,
           documentId,
           runtime,
@@ -937,7 +1021,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       }
 
       autosaveTimerRef.current = setTimeout(() => {
-        void persistSnapshot({
+        void persistSessionFromBoundary({
+          hostAdapter: hostAdapterRef.current,
           datastore: datastoreRef.current,
           documentId,
           runtime,
@@ -989,29 +1074,29 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       if (anchor.kind === "detached") {
         return;
       }
-
-      activeRuntime.dispatch({
-        type: "selection.set",
-        selection: toRuntimeSelectionSnapshot(createSelectionFromAnchor(anchor)),
-      });
+      applyRuntimeSelection(activeRuntime, createSelectionFromAnchor(anchor));
     }
 
-    function addReviewComment(): void {
+    function addReviewComment(): string | null {
       try {
-        activeRuntime.addComment({
+        const commentId = activeRuntime.addComment({
           anchor: snapshot.selection.activeRange,
-          body: "New review comment",
+          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
-        ? persistAndExport({
+        ? persistAndExportFromBoundary({
+            hostAdapter: hostAdapterRef.current,
             datastore: datastoreRef.current,
             documentId,
             runtime,
@@ -1020,41 +1105,260 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
             lastSavedRevisionTokenRef,
             autosaveTimerRef,
           })
-        : rejectExportWhileLoading({
+        : rejectExportWhileLoadingFromBoundary({
             documentId,
+            hostAdapter: hostAdapterRef.current,
             datastore: datastoreRef.current,
             onError: onErrorRef.current,
             onEvent: onEventRef.current,
           }));
     }
 
-    const selectionPreview = summarizeSelectionPreview(snapshot);
-    const derivedCapabilities = deriveCapabilities(snapshot, reviewMode);
+    const derivedCapabilities = deriveCapabilities(
+      snapshot,
+      reviewMode,
+      workflowScopeSnapshot,
+    );
     const capabilities = showReviewPanel
       ? 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 = sessionState.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,
+      addCommentDisabledReason,
+    });
+    const selectionToolbarSelectionKey = useMemo(
+      () => createSelectionToolbarSelectionKey(snapshot.selection, viewState.activeStory),
+      [snapshot.selection, viewState.activeStory],
+    );
+    const shouldRenderSelectionToolbar = Boolean(
+      selectionToolbar &&
+      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) =>
-      activeRuntime.dispatch({
-        type: "selection.set",
-        selection: toRuntimeSelectionSnapshot(selection),
-      });
+      applyRuntimeSelection(activeRuntime, selection);
+
+    const dismissSelectionToolbar = useCallback(
+      (_reason: SelectionToolbarDismissReason) => {
+        if (selectionToolbarSelectionKey) {
+          setSelectionToolbarDismissedKey(selectionToolbarSelectionKey);
+        } else {
+          setSelectionToolbarDismissedKey(null);
+        }
+        setSelectionToolbarAnchor(null);
+        setSelectionToolbarFocusWithin(false);
+      },
+      [selectionToolbarSelectionKey],
+    );
 
-    useEffect(() => {
-      const shell = shellRef.current;
-      if (!shell) {
-        return;
-      }
+    const getDocumentSurfaceElement = useCallback((): HTMLElement | null => {
+      return shellRef.current?.querySelector<HTMLElement>("[data-wre-document-surface='true']") ?? null;
+    }, []);
 
-      applyRegionAttributes(shell);
+    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) {
+        setSelectionToolbarDismissedKey(null);
+        setSelectionToolbarFocusWithin(false);
+        setSelectionToolbarAnchor(null);
+        lastSelectionToolbarKeyRef.current = null;
+        return;
+      }
+
+      if (lastSelectionToolbarKeyRef.current !== selectionToolbarSelectionKey) {
+        lastSelectionToolbarKeyRef.current = selectionToolbarSelectionKey;
+        setSelectionToolbarDismissedKey(null);
+        setSelectionToolbarFocusWithin(false);
+      }
+    }, [selectionToolbarSelectionKey]);
+
+    useEffect(() => {
+      if (!selectionToolbar) {
+        setSelectionToolbarAnchor(null);
+        setSelectionToolbarFocusWithin(false);
+      }
+    }, [selectionToolbar]);
+
+    useEffect(() => {
+      const shell = shellRef.current;
+      if (!shell) {
+        return;
+      }
+
+      applyRegionAttributes(shell);
     }, [runtime, snapshot.fatalError, snapshot.isReady]);
 
     useEffect(() => {
@@ -1075,6 +1379,23 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     }, [loadError, snapshot.fatalError]);
 
     function handleShellKeyDownCapture(event: React.KeyboardEvent<HTMLDivElement>): void {
+      if (
+        event.key === "Escape" &&
+        shouldRenderSelectionToolbar &&
+        (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;
       }
@@ -1089,15 +1410,16 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     }
 
     const editorCallbacks = {
-      onFocus: () => activeRuntime.focus(),
-      onBlur: () => activeRuntime.blur(),
+      onFocus: handleSurfaceFocus,
+      onBlur: handleSurfaceBlur,
       onSelectionChange: dispatchSelection,
-      onInsertText: (text: string) => activeRuntime.dispatch({ type: "text.insert", text }),
-      onDeleteBackward: () => activeRuntime.dispatch({ type: "text.delete-backward" }),
-      onDeleteForward: () => activeRuntime.dispatch({ type: "text.delete-forward" }),
-      onInsertTab: () => activeRuntime.dispatch({ type: "text.insert-tab" }),
-      onInsertHardBreak: () => activeRuntime.dispatch({ type: "text.insert-hard-break" }),
-      onSplitParagraph: () => activeRuntime.dispatch({ type: "paragraph.split" }),
+      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" }),
     };
 
     const reviewCallbacks = {
@@ -1145,82 +1467,207 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         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}
+        mediaPreviews={mediaPreviews}
+        isPageWorkspace={isPageWorkspace}
+        workflowScopes={workflowScopeSnapshot?.scopes}
+        onSelectionToolbarAnchorChange={handleSelectionToolbarAnchorChange}
+        {...editorCallbacks}
+        onCommentActivated={(commentId) => {
+          activeRuntime.openComment(commentId);
+          setActiveRailTab("comments");
+        }}
+        onRevisionActivated={(revisionId) => {
+          setActiveRevisionId(revisionId);
+          setActiveRailTab("changes");
+        }}
+      />
+    );
+
     return (
-      <div
-        ref={shellRef}
-        role="region"
-        aria-label={`Word review editor for ${snapshot.sourceLabel ?? documentId}`}
-        aria-describedby={`${accessibilityInstructionsId} ${accessibilityStatusId}${
-          diagnosticsModeMessage ? ` ${accessibilityAlertId}` : ""
-        }`}
-        className="relative h-full"
-        onKeyDownCapture={handleShellKeyDownCapture}
-      >
-        <p id={accessibilityInstructionsId} style={VISUALLY_HIDDEN_STYLES}>
-          Press F6 to move focus between the toolbar, document surface, review rail, and status bar.
-        </p>
-        <div
-          id={accessibilityStatusId}
-          role="status"
-          aria-live="polite"
-          aria-atomic="true"
-          style={VISUALLY_HIDDEN_STYLES}
-        >
-          {buildAccessibilityStatusMessage(snapshot, loadError ?? undefined)}
-        </div>
-        {diagnosticsModeMessage ? (
-          <div
-            id={accessibilityAlertId}
-            data-wre-alert="true"
-            role="alert"
-            aria-live="assertive"
-            aria-atomic="true"
-            tabIndex={-1}
-            className="border-b border-danger/30 bg-danger/5 px-4 py-3 text-sm text-danger"
-          >
-            {diagnosticsModeMessage}
-          </div>
-        ) : null}
-        <TwReviewWorkspace
-          snapshot={snapshot}
-          currentUserId={currentUser.userId}
-          capabilities={capabilities}
-          reviewMode={reviewMode}
-          viewMode={viewMode}
-          activeRailTab={activeRailTab}
-          activeCommentId={snapshot.comments.activeCommentId}
-          activeRevisionId={activeRevisionId}
-          showTrackedChanges={showTrackedChanges}
-          selectionPreview={selectionPreview}
-          addCommentDisabledReason={addCommentDisabledReason}
-          onViewModeChange={setViewMode}
-          onActiveRailTabChange={setActiveRailTab}
-          onShowTrackedChangesChange={setShowTrackedChanges}
-          {...reviewCallbacks}
-          document={
-            <TwProseMirrorSurface
-              ref={surfaceRef}
-              currentUser={currentUser}
-              snapshot={snapshot}
-              reviewMode={reviewMode}
-              markupDisplay={liveMarkupDisplay}
-              activeRevisionId={activeRevisionId}
-              showTrackedChanges={showTrackedChanges}
-              {...editorCallbacks}
-              onCommentActivated={(commentId) => {
-                activeRuntime.openComment(commentId);
-                setActiveRailTab("comments");
-              }}
-              onRevisionActivated={(revisionId) => {
-                setActiveRevisionId(revisionId);
-                setActiveRailTab("changes");
-              }}
-            />
-          }
-        />
-      </div>
+      <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}
+        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={shouldRenderSelectionToolbar ? selectionToolbar : null}
+        selectionToolbarAnchor={shouldRenderSelectionToolbar ? selectionToolbarAnchor : null}
+        onAddCommentFromSelection={addSelectionToolbarComment}
+        onDismissSelectionToolbar={() => dismissSelectionToolbar("chrome-action")}
+        onSelectionToolbarFocusCapture={handleSelectionToolbarFocusCapture}
+        onSelectionToolbarBlurCapture={handleSelectionToolbarBlurCapture}
+        selectionToolbarRef={selectionToolbarElementRef}
+        activeImageContext={activeImageContext}
+        activeObjectContext={activeObjectContext}
+        commands={commands}
+        document={documentElement}
+      />
     );
   },
 );
@@ -1237,206 +1684,1034 @@ function applyRuntimeFormattingOperation(
     | { type: "indent" }
     | { type: "outdent" },
 ): void {
-  const snapshot = runtime.getRenderSnapshot();
-  if (!snapshot.isReady || snapshot.readOnly || snapshot.fatalError) {
+  const context = getStoryMutationContext(runtime);
+  if (!context) {
     return;
   }
 
   const result = applyFormattingOperationToDocument(
-    runtime.getPersistedSnapshot().canonicalDocument,
-    snapshot,
+    context.localDocument,
+    context.localSnapshot,
     operation,
   );
-  if (!result.changed) {
+  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 {
+  const context = getStoryMutationContext(runtime);
+  if (!context) {
     return;
   }
 
-  runtime.dispatch({
-    type: "document.replace",
-    document: result.document,
-    selection: toRuntimeSelectionSnapshot(result.selection),
-    origin: {
-      source: "api",
-      timestamp: new Date().toISOString(),
+  const result = applyParagraphStyleToDocument(
+    context.localDocument,
+    context.localSnapshot,
+    styleId,
+  );
+  dispatchStoryMutationResult(
+    runtime,
+    context,
+    {
+      ...result,
+      selection: toRuntimeSelectionSnapshot(result.selection),
     },
-  });
+    context.timestamp,
+  );
 }
 
-function applyRuntimeInsertPageBreak(runtime: WordReviewEditorRuntime): void {
-  const snapshot = runtime.getRenderSnapshot();
-  if (!canApplyRuntimeMutation(snapshot)) {
+function applyRuntimeTableStyle(
+  runtime: WordReviewEditorRuntime,
+  styleId: string | null,
+): void {
+  const context = getStoryMutationContext(runtime);
+  if (!context) {
     return;
   }
 
-  const timestamp = new Date().toISOString();
-  const result = insertPageBreakInDocument(
-    runtime.getPersistedSnapshot().canonicalDocument,
-    toRuntimeSelectionSnapshot(snapshot.selection),
-    { timestamp },
+  const result = applyTableStyleToDocument(
+    context.localDocument,
+    context.localSnapshot,
+    styleId,
+  );
+  dispatchStoryMutationResult(
+    runtime,
+    context,
+    {
+      ...result,
+      selection: toRuntimeSelectionSnapshot(result.selection),
+    },
+    context.timestamp,
   );
-  dispatchRuntimeDocumentMutation(runtime, result, timestamp);
 }
 
-function applyRuntimeInsertTable(
+function applyRuntimeParagraphIndentation(
   runtime: WordReviewEditorRuntime,
-  options: InsertTableOptions,
+  indentation: {
+    left?: number;
+    right?: number;
+    firstLine?: number;
+    hanging?: number;
+  },
 ): void {
-  const snapshot = runtime.getRenderSnapshot();
-  if (!canApplyRuntimeMutation(snapshot)) {
+  const context = getStoryMutationContext(runtime);
+  if (!context) {
     return;
   }
 
-  const timestamp = new Date().toISOString();
-  const result = insertTableInDocument(
-    runtime.getPersistedSnapshot().canonicalDocument,
-    toRuntimeSelectionSnapshot(snapshot.selection),
-    options,
-    { timestamp },
+  const result = setActiveParagraphIndentation(
+    context.localDocument,
+    context.localSnapshot,
+    indentation,
+    { timestamp: context.timestamp },
+  );
+  dispatchStoryMutationResult(
+    runtime,
+    context,
+    {
+      ...result,
+      selection: toRuntimeSelectionSnapshot(result.selection),
+    },
+    context.timestamp,
   );
-  dispatchRuntimeDocumentMutation(runtime, result, timestamp);
 }
 
-function applyRuntimeInsertImage(
+function applyRuntimeParagraphTabStops(
   runtime: WordReviewEditorRuntime,
-  options: InsertImageOptions,
+  tabStops: Array<{ pos: number; val?: string; leader?: string }>,
 ): void {
-  const snapshot = runtime.getRenderSnapshot();
-  if (!canApplyRuntimeMutation(snapshot)) {
+  const context = getStoryMutationContext(runtime);
+  if (!context) {
     return;
   }
 
-  const timestamp = new Date().toISOString();
-  try {
-    const result = insertImageInDocument(
-      runtime.getPersistedSnapshot().canonicalDocument,
-      toRuntimeSelectionSnapshot(snapshot.selection),
-      options.data,
-      options.mimeType,
-      options.width,
-      options.height,
-      {
-        timestamp,
-        altText: options.altText,
-      },
-    );
-    dispatchRuntimeDocumentMutation(runtime, {
-      changed: true,
-      document: result.document,
-      selection: result.selection,
-      mapping: result.mapping,
-    }, timestamp);
-  } catch {
+  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 {
+  const context = getStoryMutationContext(runtime);
+  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 applyRuntimeTableStructureOperation(
+function applyRuntimeInsertSectionBreak(
   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 },
+  breakType: SectionBreakType,
+  options?: { afterSectionIndex?: number },
 ): void {
   const snapshot = runtime.getRenderSnapshot();
-  if (!canApplyRuntimeMutation(snapshot)) {
+  if (!canApplyRuntimeMutation(snapshot) || snapshot.activeStory.kind !== "main") {
     return;
   }
 
+  const sessionState = runtime.getSessionState();
   const timestamp = new Date().toISOString();
-  const result = applyTableStructureOperation(
-    runtime.getPersistedSnapshot().canonicalDocument,
-    snapshot,
-    mountedSurface?.getTableSelection() ?? null,
-    operation,
+  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,
   );
-  dispatchRuntimeDocumentMutation(runtime, result, timestamp);
 }
 
-function canApplyRuntimeMutation(snapshot: RuntimeRenderSnapshot): boolean {
-  return snapshot.isReady && !snapshot.readOnly && !snapshot.fatalError;
+function applyRuntimeDeleteSectionBreak(
+  runtime: WordReviewEditorRuntime,
+  sectionIndex: number,
+): void {
+  const snapshot = runtime.getRenderSnapshot();
+  if (!canApplyRuntimeMutation(snapshot) || snapshot.activeStory.kind !== "main") {
+    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 dispatchRuntimeDocumentMutation(
+function applyRuntimeUpdateSectionLayout(
   runtime: WordReviewEditorRuntime,
-  result: {
-    changed: boolean;
-    document: PersistedEditorSnapshot["canonicalDocument"];
-    selection: InternalSelectionSnapshot;
-    mapping?: TransactionMapping;
-  },
-  timestamp: string,
+  sectionIndex: number,
+  patch: SectionLayoutPatch,
 ): void {
-  if (!result.changed) {
+  const snapshot = runtime.getRenderSnapshot();
+  if (!canApplyRuntimeMutation(snapshot) || snapshot.activeStory.kind !== "main") {
     return;
   }
 
-  runtime.dispatch({
-    type: "document.replace",
-    document: {
-      ...result.document,
-      updatedAt: timestamp,
+  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 } : {}),
     },
-    mapping: result.mapping,
-    selection: result.selection,
-    origin: {
-      source: "api",
-      timestamp,
+    { timestamp },
+  );
+
+  dispatchRuntimeDocumentMutation(
+    runtime,
+    {
+      changed: result.changed,
+      document: result.document,
+      selection: toRuntimeSelectionSnapshot(result.selection),
     },
-  });
+    timestamp,
+  );
 }
 
-function applyRuntimeDeleteComment(
+function applyRuntimeSetSectionPageNumbering(
   runtime: WordReviewEditorRuntime,
-  commentId: string,
+  sectionIndex: number,
+  patch: SectionPageNumberingPatch | null,
 ): void {
   const snapshot = runtime.getRenderSnapshot();
-  if (!snapshot.isReady || snapshot.readOnly || snapshot.fatalError) {
+  if (!canApplyRuntimeMutation(snapshot) || snapshot.activeStory.kind !== "main") {
     return;
   }
 
-  const persistedSnapshot = runtime.getPersistedSnapshot();
-  if (!persistedSnapshot.canonicalDocument.review.comments[commentId]) {
+  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;
   }
 
-  const nextComments = {
-    ...persistedSnapshot.canonicalDocument.review.comments,
-  };
-  delete nextComments[commentId];
+  const sessionState = runtime.getSessionState();
+  const timestamp = new Date().toISOString();
+  const result = setHeaderFooterLinkAtSectionIndex(
+    sessionState.canonicalDocument,
+    sectionIndex,
+    patch,
+    { timestamp },
+  );
 
-  runtime.dispatch({
-    type: "document.replace",
-    document: {
-      ...persistedSnapshot.canonicalDocument,
-      review: {
-        ...persistedSnapshot.canonicalDocument.review,
-        comments: nextComments,
-      },
-    },
-    selection: toRuntimeSelectionSnapshot(snapshot.selection),
-    origin: {
-      source: "api",
-      timestamp: new Date().toISOString(),
+  dispatchRuntimeDocumentMutation(
+    runtime,
+    {
+      changed: result.changed,
+      document: result.document,
+      selection: toRuntimeSelectionSnapshot(result.selection),
     },
-  });
+    timestamp,
+  );
 }
 
-function normalizeRequestedSelection(
-  snapshot: RuntimeRenderSnapshot,
-  selection: PublicSelectionSnapshot | null,
+function applyRuntimeInsertPageBreak(runtime: WordReviewEditorRuntime): void {
+  const context = getStoryMutationContext(runtime);
+  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 {
+  const context = getStoryMutationContext(runtime);
+  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 {
+  const context = getStoryMutationContext(runtime);
+  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;
+  }
+
+  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 {
+  const context = getStoryMutationContext(runtime);
+  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 {
+  const context = getStoryMutationContext(runtime);
+  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 context = getStoryMutationContext(runtime);
+  if (!context) {
+    return;
+  }
+
+  const listAwareResult = applyListAwareTextCommand(context, command);
+  if (listAwareResult) {
+    dispatchStoryMutationResult(runtime, context, listAwareResult, context.timestamp);
+    return;
+  }
+
+  if (context.activeStory.kind === "main") {
+    switch (command.type) {
+      case "insert-text":
+        runtime.dispatch({ type: "text.insert", text: command.text });
+        return;
+      case "delete-backward":
+        runtime.dispatch({ type: "text.delete-backward" });
+        return;
+      case "delete-forward":
+        runtime.dispatch({ type: "text.delete-forward" });
+        return;
+      case "insert-tab":
+        runtime.dispatch({ type: "text.insert-tab" });
+        return;
+      case "outdent-tab":
+        return;
+      case "insert-hard-break":
+        runtime.dispatch({ type: "text.insert-hard-break" });
+        return;
+      case "split-paragraph":
+        runtime.dispatch({ type: "paragraph.split" });
+        return;
+    }
+  }
+
+  const selection = toRuntimeSelectionSnapshot(context.localSnapshot.selection);
+  const localResult = (() => {
+    switch (command.type) {
+      case "insert-text":
+        return insertTextInDocument(
+          context.localDocument,
+          selection,
+          command.text,
+          { timestamp: context.timestamp },
+        );
+      case "delete-backward":
+        return deleteSelectionOrBackward(
+          context.localDocument,
+          selection,
+          { timestamp: context.timestamp },
+        );
+      case "delete-forward":
+        return deleteSelectionOrForward(
+          context.localDocument,
+          selection,
+          { timestamp: context.timestamp },
+        );
+      case "insert-tab":
+        return insertTabInDocument(
+          context.localDocument,
+          selection,
+          { timestamp: context.timestamp },
+        );
+      case "outdent-tab":
+        return {
+          changed: false,
+          document: context.localDocument,
+          selection,
+        };
+      case "insert-hard-break":
+        return insertHardBreakInDocument(
+          context.localDocument,
+          selection,
+          { timestamp: context.timestamp },
+        );
+      case "split-paragraph":
+        return splitParagraphInDocument(
+          context.localDocument,
+          selection,
+          { timestamp: context.timestamp },
+        );
+    }
+  })();
+
+  dispatchStoryMutationResult(
+    runtime,
+    context,
+    {
+      changed: "changed" in localResult ? localResult.changed : true,
+      document: localResult.document,
+      selection: localResult.selection,
+      mapping: "mapping" in localResult ? localResult.mapping : undefined,
+    },
+    context.timestamp,
+  );
+}
+
+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 getStoryMutationContext(
+  runtime: WordReviewEditorRuntime,
+): {
+  timestamp: string;
+  activeStory: EditorStoryTarget;
+  persistedDocument: EditorSessionState["canonicalDocument"];
+  localDocument: EditorSessionState["canonicalDocument"];
+  localSnapshot: RuntimeRenderSnapshot;
+} | null {
+  const snapshot = runtime.getRenderSnapshot();
+  if (!canApplyRuntimeMutation(snapshot)) {
+    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);
+  return (
+    selection ??
+    createCollapsedPublicSelection(
+      snapshot.selection.head,
+      snapshot.activeStory.kind === "main" ? undefined : snapshot.activeStory,
+    )
+  );
 }
 
-function createCollapsedPublicSelection(position: number): PublicSelectionSnapshot {
+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,
@@ -1450,6 +2725,7 @@ function createCollapsedPublicSelection(position: number): PublicSelectionSnapsh
         end: 1,
       },
     },
+    ...(storyTarget ? { storyTarget } : {}),
   };
 }
 
@@ -1457,61 +2733,66 @@ function clonePublicValue<T>(value: T): T {
   return structuredClone(value);
 }
 
-function searchSnapshotSurface(
-  snapshot: RuntimeRenderSnapshot,
-  query: string,
-  options: SearchOptions = {},
-): SearchResultSnapshot[] {
-  const normalizedQuery = query.trim();
-  if (!normalizedQuery || !snapshot.surface) {
-    return [];
+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");
   }
 
-  const rawResults = findSearchMatches(
-    snapshot.surface.plainText,
-    normalizedQuery,
-    options,
-  ).slice(0, options.limit ?? Number.POSITIVE_INFINITY);
-  const activeResultIndex = getActiveSearchResultIndex(rawResults, snapshot.selection);
+  if (!variant) {
+    variant = variants?.find((entry) => entry.variant === "default") ?? variants?.[0];
+  }
 
-  return rawResults.map((result, index) => ({
-    resultId: `search-result-${index}`,
-    anchor: {
-      kind: "range",
-      from: result.from,
-      to: result.to,
-      assoc: {
-        start: -1,
-        end: 1,
-      },
-    },
-    excerpt: createSearchExcerpt(
-      snapshot.surface?.plainText ?? "",
-      result.from,
-      result.to,
-    ),
-    isActive: index === activeResultIndex,
-  }));
+  if (!variant) {
+    return;
+  }
+  runtime.openStory({
+    kind,
+    relationshipId: variant.relationshipId,
+    variant: variant.variant,
+    sectionIndex: pageLayout?.sectionIndex,
+  });
 }
 
-function getActiveSearchResultIndex(
-  results: Array<{ from: number; to: number }>,
-  selection: PublicSelectionSnapshot,
-): number {
-  if (results.length === 0) {
-    return -1;
+function searchRuntimeDocument(
+  runtime: WordReviewEditorRuntime,
+  mountedSurface: TwProseMirrorSurfaceRef | null,
+  query: string,
+  options: SearchOptions = {},
+): SearchResultSnapshot[] {
+  if (mountedSurface) {
+    return mountedSurface.search(query, options);
   }
 
-  const selectionFrom = Math.min(selection.anchor, selection.head);
-  const selectionTo = Math.max(selection.anchor, selection.head);
-  const activeIndex = results.findIndex((result) => {
-    if (selectionFrom === selectionTo) {
-      return selectionFrom >= result.from && selectionFrom <= result.to;
-    }
-    return selectionFrom < result.to && selectionTo > result.from;
-  });
-
-  return activeIndex >= 0 ? activeIndex : 0;
+  const snapshot = runtime.getRenderSnapshot();
+  return searchDocument(
+    runtime.getSessionState().canonicalDocument,
+    snapshot.selection,
+    snapshot.activeStory,
+    runtime.getDocumentNavigationSnapshot(),
+    query,
+    options,
+  );
 }
 
 function applyRegionAttributes(shell: HTMLElement): void {
@@ -1582,663 +2863,59 @@ function findRegionFocusTarget(
   }
 
   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,
-  initialSnapshot?: PersistedEditorSnapshot,
-  externalDocSource?: WordReviewEditorProps["externalDocSource"],
-): string | undefined {
-  return (
-    externalDocSource?.sourceLabel ??
-    initialSourceLabel ??
-    initialSnapshot?.sourcePackage?.sourceLabel ??
-    initialSnapshot?.editorBuild ??
-    undefined
-  );
-}
-
-function createLoadingSnapshot(
-  documentId: string,
-  readOnly: boolean,
-  sourceLabel?: string,
-): RuntimeRenderSnapshot {
-  return {
-    documentId,
-    sessionId: `${documentId}-loading`,
-    sourceLabel,
-    revisionToken: `${documentId}:loading`,
-    isReady: false,
-    isDirty: false,
-    readOnly,
-    selection: collapsedSelection(),
-    documentStats: {
-      storyLength: 0,
-      commentCount: 0,
-      revisionCount: 0,
-      opaqueFragmentCount: 0,
-    },
-    comments: {
-      openCommentIds: [],
-      resolvedCommentIds: [],
-      detachedCommentIds: [],
-      totalCount: 0,
-      threads: [],
-    },
-    trackedChanges: {
-      pendingChangeIds: [],
-      acceptedChangeIds: [],
-      rejectedChangeIds: [],
-      detachedChangeIds: [],
-      actionableChangeIds: [],
-      preserveOnlyChangeIds: [],
-      totalCount: 0,
-      revisions: [],
-    },
-    compatibility: {
-      blockExport: false,
-      blockExportReasons: [],
-      warningCount: 0,
-      errorCount: 0,
-      featureEntries: [],
-    },
-    warnings: [],
-    commandState: {
-      canUndo: false,
-      canRedo: false,
-      readOnly,
-    },
-  };
-}
-
-function createErrorSnapshot(documentId: string, error: EditorError): RuntimeRenderSnapshot {
-  return {
-    ...createLoadingSnapshot(documentId, true),
-    isReady: true,
-    sessionId: `${documentId}-error`,
-    revisionToken: `${documentId}:error`,
-    compatibility: {
-      blockExport: true,
-      blockExportReasons: [error.message],
-      warningCount: 0,
-      errorCount: 1,
-      featureEntries: [],
-    },
-    fatalError: error,
-  };
-}
-
-async function persistAndExport(input: {
-  datastore?: EditorDatastoreAdapter;
-  documentId: string;
-  runtime: WordReviewEditorRuntime;
-  onError?: (error: EditorError) => void;
-  onEvent?: (event: WordReviewEditorEvent) => void;
-  options?: ExportDocxOptions;
-  lastSavedRevisionTokenRef: React.MutableRefObject<string | null>;
-  autosaveTimerRef: React.MutableRefObject<ReturnType<typeof setTimeout> | null>;
-}): Promise<ExportResult> {
-  if (input.autosaveTimerRef.current) {
-    clearTimeout(input.autosaveTimerRef.current);
-    input.autosaveTimerRef.current = null;
-  }
-
-  await persistSnapshot({
-    datastore: input.datastore,
-    documentId: input.documentId,
-    runtime: input.runtime,
-    isAutosave: false,
-    onError: input.onError,
-    onEvent: input.onEvent,
-    lastSavedRevisionTokenRef: input.lastSavedRevisionTokenRef,
-  });
-
-  let result: ExportResult;
-  try {
-    result = await input.runtime.exportDocx(input.options);
-  } catch (error) {
-    const normalized = normalizeExportError(error, input.documentId, input.options);
-    input.onError?.(normalized);
-    emitEditorEvent({
-      datastore: input.datastore,
-      onEvent: input.onEvent,
-      event: {
-        type: "error",
-        documentId: input.documentId,
-        error: normalized,
-      },
-    });
-    throw normalized;
-  }
-
-  if (!input.datastore) {
-    return result;
-  }
-
-  try {
-    await input.datastore.saveExport({
-      documentId: input.documentId,
-      result,
-    });
-  } catch (error) {
-    const normalized = normalizeDatastoreError(error, {
-      message: "Export persisted bytes could not be stored.",
-      details: {
-        operation: "saveExport",
-      },
-    });
-    input.onError?.(normalized);
-    emitEditorEvent({
-      datastore: input.datastore,
-      onEvent: input.onEvent,
-      event: {
-        type: "error",
-        documentId: input.documentId,
-        error: normalized,
-      },
-    });
-  }
-
-  return result;
-}
-
-function rejectExportWhileLoading(input: {
-  documentId: string;
-  datastore?: EditorDatastoreAdapter;
-  onError?: (error: EditorError) => void;
-  onEvent?: (event: WordReviewEditorEvent) => void;
-}): Promise<never> {
-  const error: EditorError = {
-    errorId: "word-review-editor-loading-export",
-    code: "internal_invariant",
-    message: "WordReviewEditor is still loading and cannot export yet.",
-    isFatal: false,
-    source: "runtime",
-  };
-  input.onError?.(error);
-  emitEditorEvent({
-    datastore: input.datastore,
-    onEvent: input.onEvent,
-    event: {
-      type: "error",
-      documentId: input.documentId,
-      error,
-    },
-  });
-  return Promise.reject(error);
-}
-
-async function persistSnapshot(input: {
-  datastore?: EditorDatastoreAdapter;
-  documentId: string;
-  runtime: WordReviewEditorRuntime;
-  isAutosave: boolean;
-  onError?: (error: EditorError) => void;
-  onEvent?: (event: WordReviewEditorEvent) => void;
-  lastSavedRevisionTokenRef: React.MutableRefObject<string | null>;
-}): Promise<void> {
-  if (!input.datastore) {
-    return;
-  }
-
-  const snapshot = input.runtime.getPersistedSnapshot();
-  const revisionToken = input.runtime.getRenderSnapshot().revisionToken;
-
-  if (input.isAutosave) {
-    emitEditorEvent({
-      datastore: input.datastore,
-      onEvent: input.onEvent,
-      event: {
-        type: "autosave_state",
-        documentId: input.documentId,
-        state: {
-          status: "saving",
-        } satisfies AutosaveState,
-      },
-    });
-  }
-
-  try {
-    const result = await input.datastore.saveSnapshot({
-      documentId: input.documentId,
-      snapshot,
-      isAutosave: input.isAutosave,
-    });
-    const savedSnapshot: PersistedEditorSnapshot = {
-      ...snapshot,
-      savedAt: result.savedAt,
-    };
-    input.lastSavedRevisionTokenRef.current = revisionToken;
-    emitEditorEvent({
-      datastore: input.datastore,
-      onEvent: input.onEvent,
-      event: {
-        type: "snapshot_saved",
-        documentId: input.documentId,
-        snapshot: savedSnapshot,
-        isAutosave: input.isAutosave,
-      },
-    });
-    if (input.isAutosave) {
-      emitEditorEvent({
-        datastore: input.datastore,
-        onEvent: input.onEvent,
-        event: {
-          type: "autosave_state",
-          documentId: input.documentId,
-          state: {
-            status: "saved",
-            savedAt: result.savedAt,
-          } satisfies AutosaveState,
-        },
-      });
-    }
-  } catch (error) {
-    const normalized = normalizeDatastoreError(error, {
-      message: input.isAutosave
-        ? "Autosave failed while storing the editor snapshot."
-        : "Snapshot save failed while preparing the export checkpoint.",
-      details: {
-        operation: "saveSnapshot",
-        isAutosave: input.isAutosave,
-      },
-    });
-    input.onError?.(normalized);
-    emitEditorEvent({
-      datastore: input.datastore,
-      onEvent: input.onEvent,
-      event: {
-        type: "error",
-        documentId: input.documentId,
-        error: normalized,
-      },
-    });
-    if (input.isAutosave) {
-      emitEditorEvent({
-        datastore: input.datastore,
-        onEvent: input.onEvent,
-        event: {
-          type: "autosave_state",
-          documentId: input.documentId,
-          state: {
-            status: "error",
-            error: normalized,
-          } satisfies AutosaveState,
-        },
-      });
-    }
-    if (!input.isAutosave) {
-      throw normalized;
-    }
-  }
-}
-
-function emitEditorEvent(input: {
-  datastore?: EditorDatastoreAdapter;
-  onEvent?: (event: WordReviewEditorEvent) => void;
-  event: WordReviewEditorEvent;
-}): void {
-  input.onEvent?.(input.event);
-  input.datastore?.logEvent?.({
-    type: input.event.type,
-    documentId: input.event.documentId,
-    detail: summarizeEventDetail(input.event),
-  });
-}
-
-function summarizeEventDetail(
-  event: WordReviewEditorEvent,
-): Record<string, unknown> | undefined {
-  switch (event.type) {
-    case "dirty_changed":
-      return { isDirty: event.isDirty };
-    case "comment_added":
-      return { commentId: event.commentId };
-    case "comment_resolved":
-      return { commentId: event.commentId };
-    case "change_accepted":
-    case "change_rejected":
-      return { changeId: event.changeId };
-    case "warning_added":
-      return { warningId: event.warning.warningId, code: event.warning.code };
-    case "warning_cleared":
-      return { warningId: event.warningId, code: event.code };
-    case "error":
-      return { errorId: event.error.errorId, code: event.error.code };
-    case "autosave_state":
-      return { status: event.state.status };
-    case "snapshot_saved":
-      return { isAutosave: event.isAutosave, savedAt: event.snapshot.savedAt };
-    case "export_completed":
-      return { fileName: event.result.fileName };
-    case "selection_changed":
-      return {
-        anchor: event.selection.anchor,
-        head: event.selection.head,
-      };
-    case "ready":
-      return {
-        source: event.source,
-        blockExport: event.compatibility.blockExport,
-      };
-  }
-}
-
-function createReadyEvent(
-  runtime: Pick<WordReviewEditorRuntime, "getCompatibilityReport" | "getRenderSnapshot">,
-  source: "docx" | "snapshot" | "datastore" | "canonical",
-): Extract<WordReviewEditorEvent, { type: "ready" }> {
-  const snapshot = runtime.getRenderSnapshot();
-  return {
-    type: "ready",
-    documentId: snapshot.documentId,
-    sessionId: snapshot.sessionId,
-    source,
-    stats: snapshot.documentStats,
-    compatibility: runtime.getCompatibilityReport(),
-    comments: snapshot.comments,
-    trackedChanges: snapshot.trackedChanges,
-  };
-}
-
-function normalizeDatastoreError(
-  error: unknown,
-  fallback: {
-    message: string;
-    details?: Record<string, 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-datastore",
-    code: "datastore_failed",
-    message: error instanceof Error ? error.message : fallback.message,
-    isFatal: false,
-    source: "datastore",
-    details: fallback.details,
-  };
-}
-
-function createFallbackSnapshot(args: CreateRuntimeArgs): RuntimeRenderSnapshot {
-  const warnings = args.source.initialSnapshot?.warningLog ?? [];
-  const compatibility = args.source.initialSnapshot?.compatibility ?? emptyCompatibilityReport();
+    return region;
+  }
 
-  return {
-    ...createLoadingSnapshot(args.documentId, args.readOnly, args.source.sourceLabel),
-    sessionId: `${args.documentId}-session`,
-    revisionToken: `${args.documentId}:0`,
-    isReady: true,
-    documentStats: {
-      storyLength: estimateStoryLength(args.source.initialSnapshot),
-      commentCount: 0,
-      revisionCount: 0,
-      opaqueFragmentCount: 0,
-    },
-    compatibility: {
-      blockExport: compatibility.blockExport,
-      blockExportReasons: [],
-      warningCount: compatibility.warnings.length,
-      errorCount: compatibility.errors.length,
-      featureEntries: compatibility.featureEntries,
-    },
-    warnings,
-  };
+  return null;
 }
 
-function createFallbackPersistedSnapshot(
-  documentId: string,
-  label = "Generated shell snapshot",
-): PersistedEditorSnapshot {
-  const docId = createCanonicalDocumentId(documentId);
-  return {
-    snapshotVersion: "persisted-editor-snapshot/2",
-    schemaVersion: "cds/1.0.0",
-    documentId,
-    docId,
-    createdAt: "1970-01-01T00:00:00.000Z",
-    updatedAt: "1970-01-01T00:00:00.000Z",
-    savedAt: "1970-01-01T00:00:00.000Z",
-    editorBuild: label,
-    canonicalDocument: {
-      schemaVersion: "cds/1.0.0",
-      docId,
-      createdAt: "1970-01-01T00:00:00.000Z",
-      updatedAt: "1970-01-01T00:00:00.000Z",
-      metadata: {
-        customProperties: {},
-      },
-      styles: {
-        paragraphs: {},
-        characters: {},
-        tables: {},
-      },
-      numbering: {
-        abstractDefinitions: {},
-        instances: {},
-      },
-      media: {
-        items: {},
-      },
-      content: {
-        type: "doc",
-        children: [{ type: "paragraph", children: [] }],
-      },
-      review: {
-        comments: {},
-        revisions: {},
-      },
-      preservation: {
-        opaqueFragments: {},
-        packageParts: {},
-      },
-      diagnostics: {
-        warnings: [],
-        errors: [],
-      },
-    },
-    compatibility: emptyCompatibilityReport(),
-    warningLog: [],
-  };
+function isAccessibleRegionId(value: string | undefined): value is AccessibleRegionId {
+  return value === "toolbar" || value === "document" || value === "review-rail" || value === "status";
 }
 
-function emptyCompatibilityReport(): CompatibilityReport {
-  return {
-    reportVersion: "compatibility-report/1",
-    generatedAt: "1970-01-01T00:00:00.000Z",
-    blockExport: false,
-    featureEntries: [],
-    warnings: [],
-    errors: [],
-  };
-}
+function buildAccessibilityStatusMessage(
+  snapshot: RuntimeRenderSnapshot,
+  loadError?: EditorError,
+): string {
+  if (loadError) {
+    return `Editor failed to load. ${loadError.message}`;
+  }
 
-function resolveSnapshotExportSession(args: CreateRuntimeArgs): {
-  session?: PackageBackedDocxSession;
-  barrier?: SnapshotExportBarrier;
-} {
-  const sourcePackage = args.source.initialSnapshot?.sourcePackage;
-  if (!sourcePackage) {
-    return {
-      barrier: {
-        reason: "missing_source_package_provenance",
-        message:
-          "DOCX export is blocked because this snapshot was loaded without embedded source package provenance.",
-      },
-    };
+  if (!snapshot.isReady) {
+    return "Editor loading. Document surface is not ready yet.";
   }
 
-  try {
-    const bytes = decodePersistedSourcePackageBytes(sourcePackage);
-    if (!hasValidPersistedSourcePackageDigest(sourcePackage, bytes)) {
-      return {
-        barrier: {
-          reason: "invalid_source_package_provenance",
-          message:
-            "DOCX export is blocked because the embedded source package provenance failed its integrity check.",
-        },
-      };
-    }
+  if (snapshot.fatalError) {
+    return `Editor opened in diagnostics mode. ${snapshot.fatalError.message}`;
+  }
 
-    const session = loadDocxEditorSession({
-      documentId: args.documentId,
-      sourceLabel: sourcePackage.sourceLabel ?? args.source.sourceLabel,
-      bytes,
-      editorBuild: args.source.initialSnapshot?.editorBuild ?? "dev",
-    });
-    if (session.readOnly || session.fatalError) {
-      return {
-        barrier: {
-          reason: "invalid_source_package_provenance",
-          message:
-            "DOCX export is blocked because the embedded source package provenance is no longer loadable as a valid package-backed session.",
-        },
-      };
-    }
+  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(" ");
+}
 
-    return { session };
-  } catch {
-    return {
-      barrier: {
-        reason: "invalid_source_package_provenance",
-        message:
-          "DOCX export is blocked because the embedded source package provenance could not be decoded into a package-backed session.",
-      },
-    };
+function getDiagnosticsModeMessage(error?: EditorError | null): string | null {
+  if (!error) {
+    return null;
   }
-}
 
-function applySnapshotExportBarrier(
-  snapshot: PersistedEditorSnapshot,
-  barrier: SnapshotExportBarrier,
-): PersistedEditorSnapshot {
-  const featureEntryId = `feature:source-package-provenance:${barrier.reason}`;
-  const featureEntries = snapshot.compatibility.featureEntries.some(
-    (entry) => entry.featureEntryId === featureEntryId,
-  )
-    ? snapshot.compatibility.featureEntries
-    : [
-        ...snapshot.compatibility.featureEntries,
-        {
-          featureEntryId,
-          featureKey: "source-package-provenance",
-          featureClass: "unsupported-fatal" as const,
-          message: barrier.message,
-          details: {
-            reason: barrier.reason,
-          },
-        },
-      ];
+  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.`;
+  }
 
-  return {
-    ...snapshot,
-    compatibility: {
-      ...snapshot.compatibility,
-      blockExport: true,
-      featureEntries,
-    },
-  };
-}
+  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.`;
+  }
 
-function createSnapshotExportBlockedError(
-  documentId: string,
-  barrier: SnapshotExportBarrier,
-): EditorError {
-  return {
-    errorId: `${documentId}:export:${barrier.reason}`,
-    code: "export_failed",
-    message: barrier.message,
-    isFatal: false,
-    source: "export",
-    details: {
-      reason: barrier.reason,
-    },
-  };
+  return error.isFatal ? error.message : null;
 }
 
-function normalizeExportError(
-  error: unknown,
-  documentId: string,
-  options?: ExportDocxOptions,
-): EditorError {
+function normalizeEditorError(error: unknown): EditorError {
   if (
     typeof error === "object" &&
     error !== null &&
@@ -2250,18 +2927,47 @@ function normalizeExportError(
   }
 
   return {
-    errorId: `${documentId}:export:failed`,
-    code: "export_failed",
-    message:
-      error instanceof Error ? error.message : "DOCX export failed for an unknown reason.",
-    isFatal: false,
-    source: "export",
-    details: {
-      requestedOptions: options ?? {},
-    },
+    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 toRuntimeSelectionSnapshot(selection: PublicSelectionSnapshot) {
   return {
     anchor: selection.anchor,
@@ -2311,9 +3017,17 @@ function createSelectionFromAnchor(
   }
 }
 
-function estimateStoryLength(snapshot?: PersistedEditorSnapshot): number {
-  const content = snapshot?.canonicalDocument.content;
-  return Array.isArray(content) ? content.length : 0;
+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"] {
@@ -2358,3 +3072,414 @@ function summarizeSelectionPreview(snapshot: RuntimeRenderSnapshot): string | nu
 
   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 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,
+): string | null {
+  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;
+  addCommentDisabledReason?: string;
+}): SelectionToolbarModel | null {
+  const {
+    snapshot,
+    viewState,
+    capabilities,
+    documentNavigation,
+    styleCatalog,
+    formattingState,
+    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),
+    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));
+
+  return {
+    previewText,
+    badges,
+    canToggleFormatting: true,
+    boldActive: formattingState.bold,
+    italicActive: formattingState.italic,
+    underlineActive: formattingState.underline,
+    canAddComment: capabilities.canAddComment,
+    ...(addCommentDisabledReason ? { disabledReason: addCommentDisabledReason } : {}),
+  };
+}
+
+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 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);
+}