@beyondwork/docx-react-component 1.0.17 → 1.0.19

package/src/ui/WordReviewEditor.tsx

@@ -1,5 +1,7 @@
 import React, {
   forwardRef,
+  type FocusEvent,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -10,41 +12,91 @@ import React, {
 
 import type {
   AutosaveState,
-  EditorDatastoreAdapter,
   CompatibilityReport,
+  EditorDatastoreAdapter,
+  EditorHostAdapter,
+  EditorSessionState,
+  ExportResult,
   EditorError,
+  EditorStoryTarget,
   EditorWarning,
-  FormattingAlignment,
   ExportDocxOptions,
+  FormattingAlignment,
+  FormattingStateSnapshot,
+  HeaderFooterLinkPatch,
   InsertImageOptions,
   InsertTableOptions,
+  PageLayoutSnapshot,
   PersistedEditorSnapshot,
   RuntimeRenderSnapshot,
+  SectionBreakType,
+  SectionLayoutPatch,
+  SectionPageNumberingPatch,
   SearchOptions,
   SearchResultSnapshot,
   SelectionSnapshot as PublicSelectionSnapshot,
-  ExportResult,
+  StyleCatalogSnapshot,
+  SurfaceBlockSnapshot,
+  ViewMode as EditorViewMode,
   WordReviewEditorEvent,
   WordReviewEditorProps,
   WordReviewEditorRef,
+  WorkspaceMode,
+  ZoomLevel,
 } from "../api/public-types";
+import { editorSessionStateFromPersistedSnapshot } 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 {
   createCanonicalDocumentId,
@@ -54,29 +106,38 @@ import {
   createDocumentRuntime,
   type DocumentRuntime,
 } from "../runtime/document-runtime.ts";
+import {
+  getStoryBlocks,
+  replaceStoryBlocks,
+} from "../runtime/story-targeting.ts";
 import { loadDocxEditorSession } from "../io/docx-session.ts";
 import {
   decodePersistedSourcePackageBytes,
   hasValidPersistedSourcePackageDigest,
 } from "../io/source-package-provenance.ts";
 import { deriveCapabilities } from "../runtime/session-capabilities";
-import {
-  createSearchExcerpt,
-  findSearchMatches,
-} from "../ui-tailwind/editor-surface/search-plugin";
+import { searchDocument } from "../runtime/document-search.ts";
 import {
   TwProseMirrorSurface,
   type TwProseMirrorSurfaceRef,
 } from "../ui-tailwind/editor-surface/tw-prosemirror-surface";
 import { TwReviewWorkspace } from "../ui-tailwind/tw-review-workspace";
 import type { ReviewRailTab } from "../ui-tailwind/review/tw-review-rail";
-import type { ViewMode } from "../ui-tailwind/toolbar/tw-toolbar";
 import type { MarkupDisplay } from "./headless/comment-decoration-model";
+import type {
+  SelectionToolbarAnchor,
+  SelectionToolbarModel,
+} from "./headless/selection-toolbar-model";
+import {
+  downloadExportResult,
+  withExportDelivery,
+} from "./browser-export";
 
 interface ResolvedSource {
-  source: "docx" | "snapshot" | "datastore";
+  source: "docx" | "session" | "snapshot";
   sourceLabel?: string;
   initialDocx?: Uint8Array | ArrayBuffer;
+  initialSessionState?: EditorSessionState;
   initialSnapshot?: PersistedEditorSnapshot;
 }
 
@@ -84,6 +145,11 @@ interface CreateRuntimeArgs {
   documentId: string;
   readOnly: boolean;
   source: ResolvedSource;
+  initialViewState?: {
+    workspaceMode?: WorkspaceMode;
+    zoomLevel?: ZoomLevel;
+  };
+  hostAdapter?: EditorHostAdapter;
   datastore?: EditorDatastoreAdapter;
   currentUserId?: string;
 }
@@ -129,6 +195,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 +210,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 +225,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 +239,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 +288,12 @@ export function __createWordReviewEditorRefBridge(
         alignment,
       });
     },
+    setParagraphStyle: (styleId) => {
+      applyRuntimeParagraphStyle(runtime, styleId);
+    },
+    setTableStyle: (styleId) => {
+      applyRuntimeTableStyle(runtime, styleId);
+    },
     indent: () => {
       applyRuntimeFormattingOperation(runtime, { type: "indent" });
     },
@@ -281,38 +361,71 @@ 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));
+    },
+    openStory: (target: EditorStoryTarget) => {
+      runtime.openStory(target);
+    },
+    closeStory: () => {
+      runtime.closeStory();
+    },
+    getPageLayoutSnapshot: () => {
+      return runtime.getPageLayoutSnapshot();
+    },
+    getDocumentNavigationSnapshot: () => {
+      return runtime.getDocumentNavigationSnapshot();
+    },
+    getViewState: () => {
+      return runtime.getViewState();
+    },
+    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);
     },
   };
 }
@@ -321,31 +434,61 @@ export async function __resolveWordReviewEditorSource(
   props: Pick<
     WordReviewEditorProps,
     | "documentId"
+    | "hostAdapter"
     | "datastore"
     | "externalDocSource"
     | "initialDocx"
+    | "initialSessionState"
     | "initialSnapshot"
     | "initialSourceLabel"
+    | "loadRevision"
+    | "loadSourcePolicy"
   >,
 ): Promise<ResolvedSource> {
   const explicitInitialCount =
-    Number(Boolean(props.initialDocx)) + Number(Boolean(props.initialSnapshot));
+    Number(Boolean(props.initialDocx)) +
+    Number(Boolean(props.initialSessionState)) +
+    Number(Boolean(props.initialSnapshot));
   if (explicitInitialCount > 1) {
-    throw new Error("Provide exactly one of initialDocx or initialSnapshot.");
+    throw new Error(
+      "Provide exactly one of initialDocx, initialSessionState, 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.externalDocSource.kind === "docx") {
+      return {
+        source: "docx",
+        initialDocx: props.externalDocSource.bytes,
+        sourceLabel: props.externalDocSource.sourceLabel,
+      };
+    }
+
+    if (props.externalDocSource.kind === "session") {
+      return {
+        source: "session",
+        initialSessionState: props.externalDocSource.sessionState,
+        sourceLabel:
+          props.externalDocSource.sourceLabel ??
+          props.externalDocSource.sessionState.sourcePackage?.sourceLabel,
+      };
+    }
+
+    return {
+      source: "snapshot",
+      initialSnapshot: props.externalDocSource.snapshot,
+      sourceLabel: props.externalDocSource.sourceLabel,
+    };
+  }
+
+  if (props.initialSessionState) {
+    return {
+      source: "session",
+      initialSessionState: props.initialSessionState,
+      sourceLabel:
+        props.initialSourceLabel ??
+        props.initialSessionState.sourcePackage?.sourceLabel,
+    };
   }
 
   if (props.initialSnapshot) {
@@ -364,31 +507,48 @@ export async function __resolveWordReviewEditorSource(
     };
   }
 
-  if (!props.datastore) {
+  const loader = props.hostAdapter?.load ?? props.datastore?.load;
+  if (!loader) {
     throw new Error(
-      `WordReviewEditor ${props.documentId} needs initialDocx, initialSnapshot, or datastore.load().`,
+      `WordReviewEditor ${props.documentId} needs initialDocx, initialSessionState, initialSnapshot, or a host/datastore load source.`,
     );
   }
 
-  const loadResult = await props.datastore.load({
+  const loadResult = await loader({
     documentId: props.documentId,
+    loadRevision: props.loadRevision,
+    loadSourcePolicy: props.loadSourcePolicy,
   });
 
   if (!loadResult.source) {
-    throw new Error(`Datastore did not return a loadable source for ${props.documentId}.`);
+    throw new Error(
+      `Host or datastore loader 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,
-      };
+  if (loadResult.source.kind === "docx") {
+    return {
+      source: "docx",
+      initialDocx: loadResult.source.bytes,
+      sourceLabel: loadResult.source.sourceLabel,
+    };
+  }
+
+  if (loadResult.source.kind === "session") {
+    return {
+      source: "session",
+      initialSessionState: loadResult.source.sessionState,
+      sourceLabel:
+        loadResult.source.sourceLabel ??
+        loadResult.source.sessionState.sourcePackage?.sourceLabel,
+    };
+  }
+
+  return {
+    source: "snapshot",
+    initialSnapshot: loadResult.source.snapshot,
+    sourceLabel: loadResult.source.sourceLabel,
+  };
 }
 
 export function __createFallbackRuntime(args: CreateRuntimeArgs): WordReviewEditorRuntime {
@@ -408,34 +568,39 @@ function createRuntime(
       })
     : undefined;
   const snapshotExportResolution = !args.source.initialDocx
-    ? resolveSnapshotExportSession(args)
+    ? resolvePackageBackedExportSession(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;
+  const initialSessionState =
+    args.source.initialSessionState ??
+    docxSession?.initialSessionState ??
+    (args.source.initialSnapshot
+      ? editorSessionStateFromPersistedSnapshot(args.source.initialSnapshot)
+      : editorSessionStateFromPersistedSnapshot(
+          createFallbackPersistedSnapshot(
+            args.documentId,
+            args.source.sourceLabel ?? "Generated shell snapshot",
+          ),
+        ));
+  const runtimeSessionState = snapshotExportResolution?.barrier
+    ? applySessionExportBarrier(initialSessionState, snapshotExportResolution.barrier)
+    : initialSessionState;
 
   return createDocumentRuntime({
     documentId: args.documentId,
-    initialSnapshot: runtimeSnapshot,
+    initialSessionState: runtimeSessionState,
     sourceKind: args.source.source,
     sourceLabel: args.source.sourceLabel,
+    initialViewState: args.initialViewState,
     readOnly: args.readOnly || docxSession?.readOnly,
-    editorBuild: runtimeSnapshot.editorBuild,
+    editorBuild: runtimeSessionState.editorBuild,
     fatalError: docxSession?.fatalError,
-    exportDocx: async (snapshot, options) => {
+    exportDocx: async (sessionState, options) => {
       if (docxSession) {
-        return docxSession.exportDocx(snapshot, options);
+        return docxSession.exportDocx(sessionState, options);
       }
 
       if (snapshotExportResolution?.session) {
-        return snapshotExportResolution.session.exportDocx(snapshot, options);
+        return snapshotExportResolution.session.exportDocx(sessionState, options);
       }
 
       throw createSnapshotExportBlockedError(
@@ -443,7 +608,7 @@ function createRuntime(
         snapshotExportResolution?.barrier ?? {
           reason: "missing_source_package_provenance",
           message:
-            "DOCX export is blocked because this snapshot does not carry embedded source package provenance.",
+            "DOCX export is blocked because this session does not carry embedded source package provenance.",
         },
       );
     },
@@ -457,11 +622,15 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
   function WordReviewEditor(props, ref) {
     const {
       currentUser,
+      hostAdapter,
       datastore,
       documentId,
       externalDocSource,
       externalDocumentRevision,
       initialDocx,
+      loadRevision,
+      loadSourcePolicy = "prefer-saved-state",
+      initialSessionState,
       initialSnapshot,
       initialSourceLabel,
       markupDisplay = "simple",
@@ -475,24 +644,36 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
 
     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 [selectionToolbarAnchor, setSelectionToolbarAnchor] = useState<SelectionToolbarAnchor | null>(null);
+    const [selectionToolbarDismissedKey, setSelectionToolbarDismissedKey] = useState<string | null>(null);
+    const [selectionToolbarFocusWithin, setSelectionToolbarFocusWithin] = useState(false);
     const runtimeRef = useRef<WordReviewEditorRuntime | null>(null);
     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 hostAdapterRef = useRef(hostAdapter);
     const datastoreRef = useRef(datastore);
     const onEventRef = useRef(onEvent);
     const onWarningRef = useRef(onWarning);
     const onErrorRef = useRef(onError);
+    const runtimeViewStateSeedRef = useRef<{
+      workspaceMode: WorkspaceMode;
+      zoomLevel: ZoomLevel;
+    }>({
+      workspaceMode: "canvas",
+      zoomLevel: 100,
+    });
     const initialSourceRef = useRef<{
       documentId: string;
       initialDocx?: Uint8Array | ArrayBuffer;
+      initialSessionState?: EditorSessionState;
       initialSnapshot?: PersistedEditorSnapshot;
       initialSourceLabel?: string;
     } | null>(null);
@@ -501,6 +682,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       initialSourceRef.current = {
         documentId,
         initialDocx,
+        initialSessionState,
         initialSnapshot,
         initialSourceLabel,
       };
@@ -509,18 +691,23 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     const stableInitialSource = initialSourceRef.current;
     const sourceReloadKey = externalDocSource
       ? `external:${externalDocSource.kind}:${externalDocumentRevision ?? "static"}`
+      : stableInitialSource?.initialSessionState
+        ? "initial-session"
       : stableInitialSource?.initialSnapshot
         ? "initial-snapshot"
         : stableInitialSource?.initialDocx
           ? "initial-docx"
-          : "datastore";
+          : hostAdapter
+            ? `host-adapter:${loadRevision ?? "static"}`
+            : `datastore:${loadRevision ?? "static"}`;
 
     useEffect(() => {
+      hostAdapterRef.current = hostAdapter;
       datastoreRef.current = datastore;
       onEventRef.current = onEvent;
       onWarningRef.current = onWarning;
       onErrorRef.current = onError;
-    }, [datastore, onError, onEvent, onWarning]);
+    }, [datastore, hostAdapter, onError, onEvent, onWarning]);
 
     useEffect(() => {
       let cancelled = false;
@@ -531,11 +718,15 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         try {
           const source = await __resolveWordReviewEditorSource({
             documentId,
+            hostAdapter: hostAdapterRef.current,
             datastore: datastoreRef.current,
             externalDocSource,
             initialDocx: stableInitialSource?.initialDocx,
+            initialSessionState: stableInitialSource?.initialSessionState,
             initialSnapshot: stableInitialSource?.initialSnapshot,
             initialSourceLabel: stableInitialSource?.initialSourceLabel,
+            loadRevision,
+            loadSourcePolicy,
           });
 
           if (cancelled) {
@@ -548,6 +739,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
               documentId,
               readOnly,
               source,
+              initialViewState: runtimeViewStateSeedRef.current,
+              hostAdapter: hostAdapterRef.current,
               datastore: datastoreRef.current,
               currentUserId: currentUser.userId,
             },
@@ -557,6 +750,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
             },
           );
           emitEditorEvent({
+            hostAdapter: hostAdapterRef.current,
             datastore: datastoreRef.current,
             onEvent: onEventRef.current,
             event: createReadyEvent(nextRuntime, source.source),
@@ -572,6 +766,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
           setLoadError(normalized);
           onErrorRef.current?.(normalized);
           emitEditorEvent({
+            hostAdapter: hostAdapterRef.current,
             datastore: datastoreRef.current,
             onEvent: onEventRef.current,
             event: {
@@ -600,7 +795,11 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       }
 
       return runtime.subscribeToEvents((event) => {
+        if (event.type === "export_completed" || event.type === "ready") {
+          return;
+        }
         emitEditorEvent({
+          hostAdapter: hostAdapterRef.current,
           datastore: datastoreRef.current,
           onEvent: onEventRef.current,
           event,
@@ -625,20 +824,37 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
           documentId,
           readOnly,
           currentUserId: currentUser.userId,
+          initialViewState: runtimeViewStateSeedRef.current,
           source: {
-            source: "snapshot",
+            source:
+              initialSessionState
+                ? "session"
+                : "snapshot",
+            initialSessionState:
+              initialSessionState ??
+              (initialSnapshot
+                ? editorSessionStateFromPersistedSnapshot(initialSnapshot)
+                : undefined),
             initialSnapshot:
               initialSnapshot ?? createFallbackPersistedSnapshot(documentId, initialSourceLabel),
-            sourceLabel: guessSourceLabel(initialSourceLabel, initialSnapshot, externalDocSource),
+            sourceLabel: guessSourceLabel(
+              initialSourceLabel,
+              initialSessionState,
+              initialSnapshot,
+              externalDocSource,
+            ),
           },
+          hostAdapter: hostAdapterRef.current,
           datastore: datastoreRef.current,
         }),
       [
         currentUser.userId,
         documentId,
+        initialSessionState,
         initialSnapshot,
         initialSourceLabel,
         readOnly,
+        hostAdapter,
         externalDocSource?.kind,
         externalDocSource?.sourceLabel,
       ],
@@ -651,11 +867,17 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
           : createLoadingSnapshot(
               documentId,
               readOnly,
-              guessSourceLabel(initialSourceLabel, initialSnapshot, externalDocSource),
+              guessSourceLabel(
+                initialSourceLabel,
+                initialSessionState,
+                initialSnapshot,
+                externalDocSource,
+              ),
             ),
       [
         documentId,
         externalDocSource,
+        initialSessionState,
         initialSnapshot,
         initialSourceLabel,
         loadError,
@@ -670,6 +892,23 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     );
 
     const activeRuntime = runtime ?? optimisticRuntime;
+    const viewState = activeRuntime.getViewState();
+    const isPageWorkspace = viewState.workspaceMode === "page";
+    const liveMarkupDisplay: MarkupDisplay = isPageWorkspace ? "all" : "clean";
+    const canonicalDocument = activeRuntime.getSessionState().canonicalDocument;
+    const documentNavigation = activeRuntime.getDocumentNavigationSnapshot();
+    const effectiveViewMode = deriveEditorViewMode(snapshot.readOnly, reviewMode);
+
+    useEffect(() => {
+      activeRuntime.setViewMode(effectiveViewMode);
+    }, [activeRuntime, effectiveViewMode]);
+
+    useEffect(() => {
+      runtimeViewStateSeedRef.current = {
+        workspaceMode: viewState.workspaceMode,
+        zoomLevel: viewState.zoomLevel,
+      };
+    }, [viewState.workspaceMode, viewState.zoomLevel]);
 
     useImperativeHandle(
       ref,
@@ -678,6 +917,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,
@@ -700,6 +940,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         exportDocx: (options) =>
           runtime
             ? persistAndExport({
+                hostAdapter: hostAdapterRef.current,
                 datastore: datastoreRef.current,
                 documentId,
                 runtime,
@@ -711,10 +952,12 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
               })
             : rejectExportWhileLoading({
                 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 +973,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 +1040,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 +1113,85 @@ 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 activeRuntime.getPageLayoutSnapshot();
+        },
+        getDocumentNavigationSnapshot: () => {
+          return activeRuntime.getDocumentNavigationSnapshot();
+        },
+        getViewState: () => {
+          return activeRuntime.getViewState();
+        },
+        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);
         },
       }),
       [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 +1213,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
 
       const debounceMs = props.autosave?.debounceMs ?? 800;
       if (debounceMs <= 0) {
-        void persistSnapshot({
+        void persistSession({
+          hostAdapter: hostAdapterRef.current,
           datastore: datastoreRef.current,
           documentId,
           runtime,
@@ -937,7 +1227,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       }
 
       autosaveTimerRef.current = setTimeout(() => {
-        void persistSnapshot({
+        void persistSession({
+          hostAdapter: hostAdapterRef.current,
           datastore: datastoreRef.current,
           documentId,
           runtime,
@@ -989,29 +1280,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({
+            hostAdapter: hostAdapterRef.current,
             datastore: datastoreRef.current,
             documentId,
             runtime,
@@ -1022,31 +1313,181 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
           })
         : rejectExportWhileLoading({
             documentId,
+            hostAdapter: hostAdapterRef.current,
             datastore: datastoreRef.current,
             onError: onErrorRef.current,
             onEvent: onEventRef.current,
           }));
     }
 
-    const selectionPreview = summarizeSelectionPreview(snapshot);
     const derivedCapabilities = deriveCapabilities(snapshot, reviewMode);
     const capabilities = showReviewPanel
       ? derivedCapabilities
       : { ...derivedCapabilities, reviewRailVisible: false };
+    const formattingState = getFormattingStateFromRenderSnapshot(snapshot);
+    const styleCatalog = useMemo(
+      () => getRuntimeStyleCatalog(activeRuntime),
+      [activeRuntime, snapshot.revisionToken],
+    );
     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 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],
+    );
+
+    const getDocumentSurfaceElement = useCallback((): HTMLElement | null => {
+      return shellRef.current?.querySelector<HTMLElement>("[data-wre-document-surface='true']") ?? null;
+    }, []);
+
+    const isTargetWithinSelectionToolbar = useCallback((target: EventTarget | null): boolean => {
+      return target instanceof Node && Boolean(selectionToolbarElementRef.current?.contains(target));
+    }, []);
+
+    const isTargetWithinDocumentSurface = useCallback(
+      (target: EventTarget | null): boolean => {
+        const surfaceElement = getDocumentSurfaceElement();
+        return target instanceof Node && Boolean(surfaceElement?.contains(target));
+      },
+      [getDocumentSurfaceElement],
+    );
+
+    const focusDocumentSurface = useCallback((): void => {
+      const surfaceElement = getDocumentSurfaceElement();
+      surfaceElement?.focus();
+      activeRuntime.focus();
+    }, [activeRuntime, getDocumentSurfaceElement]);
+
+    const handleSurfaceFocus = useCallback(
+      (_event: FocusEvent<HTMLDivElement>) => {
+        setSelectionToolbarFocusWithin(false);
+        activeRuntime.focus();
+      },
+      [activeRuntime],
+    );
+
+    const handleSurfaceBlur = useCallback(
+      (event: FocusEvent<HTMLDivElement>) => {
+        if (isTargetWithinSelectionToolbar(event.relatedTarget)) {
+          setSelectionToolbarFocusWithin(true);
+          activeRuntime.focus();
+          return;
+        }
+
+        setSelectionToolbarFocusWithin(false);
+        activeRuntime.blur();
+        dismissSelectionToolbar("blur");
+      },
+      [activeRuntime, dismissSelectionToolbar, isTargetWithinSelectionToolbar],
+    );
+
+    const handleSelectionToolbarFocusCapture = useCallback(() => {
+      setSelectionToolbarFocusWithin(true);
+      activeRuntime.focus();
+    }, [activeRuntime]);
+
+    const handleSelectionToolbarBlurCapture = useCallback(
+      (event: FocusEvent<HTMLDivElement>) => {
+        if (isTargetWithinSelectionToolbar(event.relatedTarget)) {
+          return;
+        }
+
+        if (isTargetWithinDocumentSurface(event.relatedTarget)) {
+          setSelectionToolbarFocusWithin(false);
+          activeRuntime.focus();
+          return;
+        }
+
+        setSelectionToolbarFocusWithin(false);
+        activeRuntime.blur();
+        dismissSelectionToolbar("blur");
+      },
+      [
+        activeRuntime,
+        dismissSelectionToolbar,
+        isTargetWithinDocumentSurface,
+        isTargetWithinSelectionToolbar,
+      ],
+    );
+
+    const addSelectionToolbarComment = useCallback(() => {
+      const commentId = addReviewComment();
+      if (!commentId) {
+        return;
+      }
+      dismissSelectionToolbar("comment-action");
+      queueMicrotask(() => {
+        focusDocumentSurface();
       });
+    }, [dismissSelectionToolbar, focusDocumentSurface]);
+
+    const handleSelectionToolbarAnchorChange = useCallback(
+      (nextAnchor: SelectionToolbarAnchor | null) => {
+        setSelectionToolbarAnchor((current) =>
+          selectionToolbarAnchorsEqual(current, nextAnchor) ? current : nextAnchor);
+      },
+      [],
+    );
+
+    useEffect(() => {
+      if (!selectionToolbarSelectionKey) {
+        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;
@@ -1075,6 +1516,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 +1547,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,6 +1604,9 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         activeRuntime.rejectAllChanges();
         setActiveRailTab("changes");
       },
+      onCloseStory: () => {
+        activeRuntime.closeStory();
+      },
     };
 
     return (
@@ -1185,29 +1647,80 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         ) : null}
         <TwReviewWorkspace
           snapshot={snapshot}
+          viewState={viewState}
           currentUserId={currentUser.userId}
           capabilities={capabilities}
+          documentNavigation={documentNavigation}
           reviewMode={reviewMode}
-          viewMode={viewMode}
+          workspaceMode={viewState.workspaceMode}
+          zoomLevel={viewState.zoomLevel}
+          formattingState={formattingState}
+          styleCatalog={styleCatalog}
           activeRailTab={activeRailTab}
           activeCommentId={snapshot.comments.activeCommentId}
           activeRevisionId={activeRevisionId}
           showTrackedChanges={showTrackedChanges}
-          selectionPreview={selectionPreview}
-          addCommentDisabledReason={addCommentDisabledReason}
-          onViewModeChange={setViewMode}
+          selectionToolbar={shouldRenderSelectionToolbar ? selectionToolbar : null}
+          selectionToolbarAnchor={shouldRenderSelectionToolbar ? selectionToolbarAnchor : null}
+          onAddCommentFromSelection={addSelectionToolbarComment}
+          onDismissSelectionToolbar={() => dismissSelectionToolbar("chrome-action")}
+          onSelectionToolbarFocusCapture={handleSelectionToolbarFocusCapture}
+          onSelectionToolbarBlurCapture={handleSelectionToolbarBlurCapture}
+          selectionToolbarRef={selectionToolbarElementRef}
+          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" })}
+          onSetParagraphStyle={(styleId) =>
+            applyRuntimeParagraphStyle(activeRuntime, styleId)}
+          onOutdent={() =>
+            applyRuntimeFormattingOperation(activeRuntime, { type: "outdent" })}
+          onIndent={() =>
+            applyRuntimeFormattingOperation(activeRuntime, { type: "indent" })}
+          onOpenHeaderStory={() =>
+            openDefaultStoryVariant(activeRuntime, snapshot.pageLayout, documentNavigation, "header")}
+          onOpenFooterStory={() =>
+            openDefaultStoryVariant(activeRuntime, snapshot.pageLayout, documentNavigation, "footer")}
+          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),
+            );
+          }}
           {...reviewCallbacks}
           document={
             <TwProseMirrorSurface
               ref={surfaceRef}
               currentUser={currentUser}
               snapshot={snapshot}
+              canonicalDocument={canonicalDocument}
+              documentNavigation={documentNavigation}
               reviewMode={reviewMode}
               markupDisplay={liveMarkupDisplay}
               activeRevisionId={activeRevisionId}
               showTrackedChanges={showTrackedChanges}
+              isPageWorkspace={isPageWorkspace}
+              onSelectionToolbarAnchorChange={handleSelectionToolbarAnchorChange}
               {...editorCallbacks}
               onCommentActivated={(commentId) => {
                 activeRuntime.openComment(commentId);
@@ -1237,138 +1750,934 @@ 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) {
-    return;
-  }
+  dispatchStoryMutationResult(
+    runtime,
+    context,
+    {
+      ...result,
+      selection: toRuntimeSelectionSnapshot(result.selection),
+    },
+    context.timestamp,
+  );
+}
 
-  runtime.dispatch({
-    type: "document.replace",
-    document: result.document,
-    selection: toRuntimeSelectionSnapshot(result.selection),
-    origin: {
-      source: "api",
-      timestamp: new Date().toISOString(),
+function getRuntimeStyleCatalog(
+  runtime: WordReviewEditorRuntime,
+): StyleCatalogSnapshot {
+  const styles = runtime.getSessionState().canonicalDocument.styles;
+  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 applyRuntimeInsertPageBreak(runtime: WordReviewEditorRuntime): void {
-  const snapshot = runtime.getRenderSnapshot();
-  if (!canApplyRuntimeMutation(snapshot)) {
+function applyRuntimeParagraphStyle(
+  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 = applyParagraphStyleToDocument(
+    context.localDocument,
+    context.localSnapshot,
+    styleId,
+  );
+  dispatchStoryMutationResult(
+    runtime,
+    context,
+    {
+      ...result,
+      selection: toRuntimeSelectionSnapshot(result.selection),
+    },
+    context.timestamp,
   );
-  dispatchRuntimeDocumentMutation(runtime, result, timestamp);
 }
 
-function applyRuntimeInsertTable(
+function applyRuntimeTableStyle(
   runtime: WordReviewEditorRuntime,
-  options: InsertTableOptions,
+  styleId: string | null,
 ): 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 = applyTableStyleToDocument(
+    context.localDocument,
+    context.localSnapshot,
+    styleId,
+  );
+  dispatchStoryMutationResult(
+    runtime,
+    context,
+    {
+      ...result,
+      selection: toRuntimeSelectionSnapshot(result.selection),
+    },
+    context.timestamp,
   );
-  dispatchRuntimeDocumentMutation(runtime, result, timestamp);
 }
 
-function applyRuntimeInsertImage(
+function applyRuntimeParagraphIndentation(
   runtime: WordReviewEditorRuntime,
-  options: InsertImageOptions,
+  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();
-  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 {
-    return;
-  }
+  const result = setActiveParagraphIndentation(
+    context.localDocument,
+    context.localSnapshot,
+    indentation,
+    { timestamp: context.timestamp },
+  );
+  dispatchStoryMutationResult(
+    runtime,
+    context,
+    {
+      ...result,
+      selection: toRuntimeSelectionSnapshot(result.selection),
+    },
+    context.timestamp,
+  );
 }
 
-function applyRuntimeTableStructureOperation(
+function applyRuntimeParagraphTabStops(
   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 },
+  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();
-  const result = applyTableStructureOperation(
-    runtime.getPersistedSnapshot().canonicalDocument,
-    snapshot,
-    mountedSurface?.getTableSelection() ?? null,
-    operation,
+  const result = setActiveParagraphTabStops(
+    context.localDocument,
+    context.localSnapshot,
+    tabStops,
+    { timestamp: context.timestamp },
+  );
+  dispatchStoryMutationResult(
+    runtime,
+    context,
+    {
+      ...result,
+      selection: toRuntimeSelectionSnapshot(result.selection),
+    },
+    context.timestamp,
   );
-  dispatchRuntimeDocumentMutation(runtime, result, 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 applyRuntimeInsertSectionBreak(
+  runtime: WordReviewEditorRuntime,
+  breakType: SectionBreakType,
+  options?: { afterSectionIndex?: 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 =
+    typeof options?.afterSectionIndex === "number"
+      ? insertSectionBreakAfterSectionIndex(
+          sessionState.canonicalDocument,
+          options.afterSectionIndex,
+          breakType,
+          { timestamp },
+        )
+      : insertSectionBreakAfterSectionIndex(
+          sessionState.canonicalDocument,
+          runtime.getDocumentNavigationSnapshot().activeSectionIndex,
+          breakType,
+          { timestamp },
+        );
+
+  dispatchRuntimeDocumentMutation(
+    runtime,
+    {
+      changed: result.changed,
+      document: result.document,
+      selection: toRuntimeSelectionSnapshot(result.selection),
+    },
+    timestamp,
+  );
+}
+
+function 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 applyRuntimeUpdateSectionLayout(
+  runtime: WordReviewEditorRuntime,
+  sectionIndex: number,
+  patch: SectionLayoutPatch,
+): void {
+  const snapshot = runtime.getRenderSnapshot();
+  if (!canApplyRuntimeMutation(snapshot) || snapshot.activeStory.kind !== "main") {
+    return;
+  }
+
+  const sessionState = runtime.getSessionState();
+  const timestamp = new Date().toISOString();
+  const result = updateSectionLayoutAtSectionIndex(
+    sessionState.canonicalDocument,
+    sectionIndex,
+    {
+      ...(patch.pageSize ? { pageSize: patch.pageSize } : {}),
+      ...(patch.pageMargins ? { pageMargins: patch.pageMargins } : {}),
+      ...(patch.columns ? { columns: patch.columns } : {}),
+      ...(patch.titlePage !== undefined ? { titlePage: patch.titlePage } : {}),
+      ...(patch.sectionType ? { sectionType: patch.sectionType } : {}),
+    },
+    { timestamp },
+  );
+
+  dispatchRuntimeDocumentMutation(
+    runtime,
+    {
+      changed: result.changed,
+      document: result.document,
+      selection: toRuntimeSelectionSnapshot(result.selection),
+    },
+    timestamp,
+  );
+}
+
+function applyRuntimeSetSectionPageNumbering(
+  runtime: WordReviewEditorRuntime,
+  sectionIndex: number,
+  patch: SectionPageNumberingPatch | null,
+): void {
+  const snapshot = runtime.getRenderSnapshot();
+  if (!canApplyRuntimeMutation(snapshot) || snapshot.activeStory.kind !== "main") {
+    return;
+  }
+
+  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 sessionState = runtime.getSessionState();
+  const timestamp = new Date().toISOString();
+  const result = setHeaderFooterLinkAtSectionIndex(
+    sessionState.canonicalDocument,
+    sectionIndex,
+    patch,
+    { timestamp },
+  );
+
+  dispatchRuntimeDocumentMutation(
+    runtime,
+    {
+      changed: result.changed,
+      document: result.document,
+      selection: toRuntimeSelectionSnapshot(result.selection),
+    },
+    timestamp,
+  );
+}
+
+function applyRuntimeInsertPageBreak(runtime: WordReviewEditorRuntime): void {
+  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 snapshot = runtime.getRenderSnapshot();
+  if (!canApplyRuntimeMutation(snapshot)) {
+    return;
+  }
+
+  try {
+    const sessionState = runtime.getSessionState();
+    const result = repositionFloatingImageInDocument(
+      sessionState.canonicalDocument,
+      mediaId,
+      offsets,
+    );
+    runtime.dispatch({
+      type: "document.replace",
+      document: result.document,
+      selection: toRuntimeSelectionSnapshot(snapshot.selection),
+      origin: { source: "api", timestamp: new Date().toISOString() },
+    });
+  } 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: PersistedEditorSnapshot["canonicalDocument"];
+    document: EditorSessionState["canonicalDocument"];
     selection: InternalSelectionSnapshot;
     mapping?: TransactionMapping;
   },
@@ -1393,6 +2702,13 @@ function dispatchRuntimeDocumentMutation(
   });
 }
 
+function stripStoryTarget(
+  selection: PublicSelectionSnapshot,
+): PublicSelectionSnapshot {
+  const { storyTarget: _storyTarget, ...rest } = selection;
+  return rest;
+}
+
 function applyRuntimeDeleteComment(
   runtime: WordReviewEditorRuntime,
   commentId: string,
@@ -1402,22 +2718,22 @@ function applyRuntimeDeleteComment(
     return;
   }
 
-  const persistedSnapshot = runtime.getPersistedSnapshot();
-  if (!persistedSnapshot.canonicalDocument.review.comments[commentId]) {
+  const sessionState = runtime.getSessionState();
+  if (!sessionState.canonicalDocument.review.comments[commentId]) {
     return;
   }
 
   const nextComments = {
-    ...persistedSnapshot.canonicalDocument.review.comments,
+    ...sessionState.canonicalDocument.review.comments,
   };
   delete nextComments[commentId];
 
   runtime.dispatch({
     type: "document.replace",
     document: {
-      ...persistedSnapshot.canonicalDocument,
+      ...sessionState.canonicalDocument,
       review: {
-        ...persistedSnapshot.canonicalDocument.review,
+        ...sessionState.canonicalDocument.review,
         comments: nextComments,
       },
     },
@@ -1433,10 +2749,19 @@ 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 {
+function createCollapsedPublicSelection(
+  position: number,
+  storyTarget?: EditorStoryTarget,
+): PublicSelectionSnapshot {
   return {
     anchor: position,
     head: position,
@@ -1450,6 +2775,7 @@ function createCollapsedPublicSelection(position: number): PublicSelectionSnapsh
         end: 1,
       },
     },
+    ...(storyTarget ? { storyTarget } : {}),
   };
 }
 
@@ -1457,61 +2783,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 {
@@ -1656,12 +2987,21 @@ function normalizeEditorError(error: unknown): EditorError {
 
 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
@@ -1682,6 +3022,7 @@ function createLoadingSnapshot(
     isDirty: false,
     readOnly,
     selection: collapsedSelection(),
+    activeStory: { kind: "main" },
     documentStats: {
       storyLength: 0,
       commentCount: 0,
@@ -1721,6 +3062,16 @@ function createLoadingSnapshot(
   };
 }
 
+function deriveEditorViewMode(
+  readOnly: boolean,
+  reviewMode: WordReviewEditorProps["reviewMode"] = "review",
+): EditorViewMode {
+  if (readOnly) {
+    return "view";
+  }
+  return reviewMode === "editing" ? "editing" : "review";
+}
+
 function createErrorSnapshot(documentId: string, error: EditorError): RuntimeRenderSnapshot {
   return {
     ...createLoadingSnapshot(documentId, true),
@@ -1739,6 +3090,7 @@ function createErrorSnapshot(documentId: string, error: EditorError): RuntimeRen
 }
 
 async function persistAndExport(input: {
+  hostAdapter?: EditorHostAdapter;
   datastore?: EditorDatastoreAdapter;
   documentId: string;
   runtime: WordReviewEditorRuntime;
@@ -1753,7 +3105,8 @@ async function persistAndExport(input: {
     input.autosaveTimerRef.current = null;
   }
 
-  await persistSnapshot({
+  await persistSession({
+    hostAdapter: input.hostAdapter,
     datastore: input.datastore,
     documentId: input.documentId,
     runtime: input.runtime,
@@ -1770,6 +3123,7 @@ async function persistAndExport(input: {
     const normalized = normalizeExportError(error, input.documentId, input.options);
     input.onError?.(normalized);
     emitEditorEvent({
+      hostAdapter: input.hostAdapter,
       datastore: input.datastore,
       onEvent: input.onEvent,
       event: {
@@ -1781,24 +3135,43 @@ async function persistAndExport(input: {
     throw normalized;
   }
 
-  if (!input.datastore) {
+  const saveExport = input.hostAdapter?.saveExport ?? input.datastore?.saveExport;
+  const saveExportSource = input.hostAdapter?.saveExport ? "host" : "datastore";
+  if (!saveExport) {
+    result = downloadExportResult(result);
+    emitEditorEvent({
+      hostAdapter: input.hostAdapter,
+      datastore: input.datastore,
+      onEvent: input.onEvent,
+      event: {
+        type: "export_completed",
+        documentId: input.documentId,
+        result,
+      },
+    });
     return result;
   }
 
   try {
-    await input.datastore.saveExport({
+    const saveResult = await saveExport({
       documentId: input.documentId,
       result,
     });
+    result = withExportDelivery(result, {
+      mode: "persisted-by-host",
+      savedAt: saveResult.savedAt,
+    });
   } catch (error) {
-    const normalized = normalizeDatastoreError(error, {
+    const normalized = normalizeStorageError(error, {
       message: "Export persisted bytes could not be stored.",
+      source: saveExportSource,
       details: {
         operation: "saveExport",
       },
     });
     input.onError?.(normalized);
     emitEditorEvent({
+      hostAdapter: input.hostAdapter,
       datastore: input.datastore,
       onEvent: input.onEvent,
       event: {
@@ -1807,13 +3180,28 @@ async function persistAndExport(input: {
         error: normalized,
       },
     });
+    result = withExportDelivery(result, {
+      mode: "exported-bytes-only",
+    });
   }
 
+  emitEditorEvent({
+    hostAdapter: input.hostAdapter,
+    datastore: input.datastore,
+    onEvent: input.onEvent,
+    event: {
+      type: "export_completed",
+      documentId: input.documentId,
+      result,
+    },
+  });
+
   return result;
 }
 
 function rejectExportWhileLoading(input: {
   documentId: string;
+  hostAdapter?: EditorHostAdapter;
   datastore?: EditorDatastoreAdapter;
   onError?: (error: EditorError) => void;
   onEvent?: (event: WordReviewEditorEvent) => void;
@@ -1827,6 +3215,7 @@ function rejectExportWhileLoading(input: {
   };
   input.onError?.(error);
   emitEditorEvent({
+    hostAdapter: input.hostAdapter,
     datastore: input.datastore,
     onEvent: input.onEvent,
     event: {
@@ -1838,7 +3227,8 @@ function rejectExportWhileLoading(input: {
   return Promise.reject(error);
 }
 
-async function persistSnapshot(input: {
+async function persistSession(input: {
+  hostAdapter?: EditorHostAdapter;
   datastore?: EditorDatastoreAdapter;
   documentId: string;
   runtime: WordReviewEditorRuntime;
@@ -1847,15 +3237,19 @@ async function persistSnapshot(input: {
   onEvent?: (event: WordReviewEditorEvent) => void;
   lastSavedRevisionTokenRef: React.MutableRefObject<string | null>;
 }): Promise<void> {
-  if (!input.datastore) {
+  const saveSession = input.hostAdapter?.saveSession;
+  const saveSnapshot = input.datastore?.saveSnapshot;
+  if (!saveSession && !saveSnapshot) {
     return;
   }
 
+  const sessionState = input.runtime.getSessionState();
   const snapshot = input.runtime.getPersistedSnapshot();
   const revisionToken = input.runtime.getRenderSnapshot().revisionToken;
 
   if (input.isAutosave) {
     emitEditorEvent({
+      hostAdapter: input.hostAdapter,
       datastore: input.datastore,
       onEvent: input.onEvent,
       event: {
@@ -1869,28 +3263,43 @@ async function persistSnapshot(input: {
   }
 
   try {
-    const result = await input.datastore.saveSnapshot({
-      documentId: input.documentId,
-      snapshot,
-      isAutosave: input.isAutosave,
-    });
-    const savedSnapshot: PersistedEditorSnapshot = {
-      ...snapshot,
-      savedAt: result.savedAt,
-    };
+    const result = saveSession
+      ? await saveSession({
+          documentId: input.documentId,
+          sessionState,
+          isAutosave: input.isAutosave,
+        })
+      : await saveSnapshot!({
+          documentId: input.documentId,
+          snapshot,
+          isAutosave: input.isAutosave,
+        });
     input.lastSavedRevisionTokenRef.current = revisionToken;
     emitEditorEvent({
+      hostAdapter: input.hostAdapter,
       datastore: input.datastore,
       onEvent: input.onEvent,
-      event: {
-        type: "snapshot_saved",
-        documentId: input.documentId,
-        snapshot: savedSnapshot,
-        isAutosave: input.isAutosave,
-      },
+      event: saveSession
+        ? {
+            type: "session_saved",
+            documentId: input.documentId,
+            sessionState: input.runtime.getSessionState(),
+            savedAt: result.savedAt,
+            isAutosave: input.isAutosave,
+          }
+        : {
+            type: "snapshot_saved",
+            documentId: input.documentId,
+            snapshot: {
+              ...snapshot,
+              savedAt: result.savedAt,
+            },
+            isAutosave: input.isAutosave,
+          },
     });
     if (input.isAutosave) {
       emitEditorEvent({
+        hostAdapter: input.hostAdapter,
         datastore: input.datastore,
         onEvent: input.onEvent,
         event: {
@@ -1904,17 +3313,23 @@ async function persistSnapshot(input: {
       });
     }
   } catch (error) {
-    const normalized = normalizeDatastoreError(error, {
+    const normalized = normalizeStorageError(error, {
       message: input.isAutosave
-        ? "Autosave failed while storing the editor snapshot."
-        : "Snapshot save failed while preparing the export checkpoint.",
+        ? saveSession
+          ? "Autosave failed while storing the editor session."
+          : "Autosave failed while storing the editor snapshot."
+        : saveSession
+          ? "Session save failed while preparing the export checkpoint."
+          : "Snapshot save failed while preparing the export checkpoint.",
+      source: saveSession ? "host" : "datastore",
       details: {
-        operation: "saveSnapshot",
+        operation: saveSession ? "saveSession" : "saveSnapshot",
         isAutosave: input.isAutosave,
       },
     });
     input.onError?.(normalized);
     emitEditorEvent({
+      hostAdapter: input.hostAdapter,
       datastore: input.datastore,
       onEvent: input.onEvent,
       event: {
@@ -1925,6 +3340,7 @@ async function persistSnapshot(input: {
     });
     if (input.isAutosave) {
       emitEditorEvent({
+        hostAdapter: input.hostAdapter,
         datastore: input.datastore,
         onEvent: input.onEvent,
         event: {
@@ -1944,12 +3360,14 @@ async function persistSnapshot(input: {
 }
 
 function emitEditorEvent(input: {
+  hostAdapter?: EditorHostAdapter;
   datastore?: EditorDatastoreAdapter;
   onEvent?: (event: WordReviewEditorEvent) => void;
   event: WordReviewEditorEvent;
 }): void {
   input.onEvent?.(input.event);
-  input.datastore?.logEvent?.({
+  const logEvent = input.hostAdapter?.logEvent ?? input.datastore?.logEvent;
+  logEvent?.({
     type: input.event.type,
     documentId: input.event.documentId,
     detail: summarizeEventDetail(input.event),
@@ -1979,8 +3397,16 @@ function summarizeEventDetail(
       return { status: event.state.status };
     case "snapshot_saved":
       return { isAutosave: event.isAutosave, savedAt: event.snapshot.savedAt };
+    case "session_saved":
+      return { isAutosave: event.isAutosave, savedAt: event.savedAt };
     case "export_completed":
-      return { fileName: event.result.fileName };
+      return {
+        fileName: event.result.fileName,
+        deliveryMode: event.result.delivery?.mode,
+        savedAt: event.result.delivery?.savedAt,
+      };
+    case "story_changed":
+      return { activeStory: event.activeStory };
     case "selection_changed":
       return {
         anchor: event.selection.anchor,
@@ -1996,7 +3422,7 @@ function summarizeEventDetail(
 
 function createReadyEvent(
   runtime: Pick<WordReviewEditorRuntime, "getCompatibilityReport" | "getRenderSnapshot">,
-  source: "docx" | "snapshot" | "datastore" | "canonical",
+  source: "docx" | "session" | "snapshot",
 ): Extract<WordReviewEditorEvent, { type: "ready" }> {
   const snapshot = runtime.getRenderSnapshot();
   return {
@@ -2011,10 +3437,11 @@ function createReadyEvent(
   };
 }
 
-function normalizeDatastoreError(
+function normalizeStorageError(
   error: unknown,
   fallback: {
     message: string;
+    source: "host" | "datastore";
     details?: Record<string, unknown>;
   },
 ): EditorError {
@@ -2029,18 +3456,26 @@ function normalizeDatastoreError(
   }
 
   return {
-    errorId: "word-review-editor-datastore",
+    errorId:
+      fallback.source === "host"
+        ? "word-review-editor-host"
+        : "word-review-editor-datastore",
     code: "datastore_failed",
     message: error instanceof Error ? error.message : fallback.message,
     isFatal: false,
-    source: "datastore",
+    source: fallback.source === "host" ? "host" : "datastore",
     details: fallback.details,
   };
 }
 
 function createFallbackSnapshot(args: CreateRuntimeArgs): RuntimeRenderSnapshot {
-  const warnings = args.source.initialSnapshot?.warningLog ?? [];
-  const compatibility = args.source.initialSnapshot?.compatibility ?? emptyCompatibilityReport();
+  const initialSessionState =
+    args.source.initialSessionState ??
+    (args.source.initialSnapshot
+      ? editorSessionStateFromPersistedSnapshot(args.source.initialSnapshot)
+      : undefined);
+  const warnings = initialSessionState?.warningLog ?? [];
+  const compatibility = initialSessionState?.compatibility ?? emptyCompatibilityReport();
 
   return {
     ...createLoadingSnapshot(args.documentId, args.readOnly, args.source.sourceLabel),
@@ -2048,7 +3483,7 @@ function createFallbackSnapshot(args: CreateRuntimeArgs): RuntimeRenderSnapshot
     revisionToken: `${args.documentId}:0`,
     isReady: true,
     documentStats: {
-      storyLength: estimateStoryLength(args.source.initialSnapshot),
+      storyLength: estimateStoryLength(initialSessionState ?? args.source.initialSnapshot),
       commentCount: 0,
       revisionCount: 0,
       opaqueFragmentCount: 0,
@@ -2131,17 +3566,19 @@ function emptyCompatibilityReport(): CompatibilityReport {
   };
 }
 
-function resolveSnapshotExportSession(args: CreateRuntimeArgs): {
+function resolvePackageBackedExportSession(args: CreateRuntimeArgs): {
   session?: PackageBackedDocxSession;
   barrier?: SnapshotExportBarrier;
 } {
-  const sourcePackage = args.source.initialSnapshot?.sourcePackage;
+  const sourcePackage =
+    args.source.initialSessionState?.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.",
+          "DOCX export is blocked because this session was loaded without embedded source package provenance.",
       },
     };
   }
@@ -2162,7 +3599,10 @@ function resolveSnapshotExportSession(args: CreateRuntimeArgs): {
       documentId: args.documentId,
       sourceLabel: sourcePackage.sourceLabel ?? args.source.sourceLabel,
       bytes,
-      editorBuild: args.source.initialSnapshot?.editorBuild ?? "dev",
+      editorBuild:
+        args.source.initialSessionState?.editorBuild ??
+        args.source.initialSnapshot?.editorBuild ??
+        "dev",
     });
     if (session.readOnly || session.fatalError) {
       return {
@@ -2186,17 +3626,17 @@ function resolveSnapshotExportSession(args: CreateRuntimeArgs): {
   }
 }
 
-function applySnapshotExportBarrier(
-  snapshot: PersistedEditorSnapshot,
+function applySessionExportBarrier(
+  sessionState: EditorSessionState,
   barrier: SnapshotExportBarrier,
-): PersistedEditorSnapshot {
+): EditorSessionState {
   const featureEntryId = `feature:source-package-provenance:${barrier.reason}`;
-  const featureEntries = snapshot.compatibility.featureEntries.some(
+  const featureEntries = sessionState.compatibility.featureEntries.some(
     (entry) => entry.featureEntryId === featureEntryId,
   )
-    ? snapshot.compatibility.featureEntries
+    ? sessionState.compatibility.featureEntries
     : [
-        ...snapshot.compatibility.featureEntries,
+        ...sessionState.compatibility.featureEntries,
         {
           featureEntryId,
           featureKey: "source-package-provenance",
@@ -2209,9 +3649,9 @@ function applySnapshotExportBarrier(
       ];
 
   return {
-    ...snapshot,
+    ...sessionState,
     compatibility: {
-      ...snapshot.compatibility,
+      ...sessionState.compatibility,
       blockExport: true,
       featureEntries,
     },
@@ -2311,9 +3751,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 +3806,145 @@ 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 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",
+  };
+}