@beyondwork/docx-react-component 1.0.83 → 1.0.85

package/src/runtime/document-runtime.ts

@@ -94,6 +94,7 @@ import type {
   ScopeQueryFilter,
   ScopeQueryResult,
   ScopeVisibility,
+  WorkflowScopeGuardPolicy,
   ScopeChromeVisibilityState,
   SearchOptions,
   TextStyleFilter,
@@ -187,7 +188,11 @@ import {
   insertScopeMarkers,
   removeScopeMarkers,
 } from "../core/commands/add-scope.ts";
-import { applyFormattingOperationToDocument } from "../core/commands/formatting-commands.ts";
+import {
+  applyFormattingOperationToDocument,
+  type FormattingOperation,
+} from "../core/commands/formatting-commands.ts";
+import { resolveActiveParagraphIndex } from "../core/commands/paragraph-layout-commands.ts";
 import { buildCompatibilityReport } from "../validation/compatibility-engine.ts";
 import { mergeCompatibilityReports } from "../validation/compatibility-report.ts";
 import { createEditorSurfaceSnapshot } from "./surface-projection.ts";
@@ -206,7 +211,6 @@ import {
 } from "./workflow/rail/compose.ts";
 import {
   createDocumentNavigationSnapshot,
-  findPageForOffset,
 } from "./document-navigation.ts";
 import {
   createDocxFontLoader,
@@ -325,7 +329,8 @@ import {
 import type { EditorStatePayload } from "../io/ooxml/workflow-payload.ts";
 import type { SharedWorkflowState } from "./collab/workflow-shared.ts";
 import { mapLocalSelectionOnRemoteReplay } from "./collab/map-local-selection-on-remote-replay.ts";
-import { formatPageNumber } from "./formatting/field/page-number-format.ts";
+import { resolvePageFieldDisplayText } from "./layout/resolve-page-fields.ts";
+import type { RuntimePageGraph, RuntimePageNode } from "./layout/page-graph.ts";
 
 /** Internal extension of ExportDocxOptions that threads the collected
  *  editorState payload from the runtime to the docx serializer. */
@@ -370,6 +375,7 @@ export interface DocumentRuntime {
     name: string,
   ): NonNullable<CanonicalDocumentEnvelope["fontTable"]>["fonts"][string] | undefined;
   replaceText(text: string, target?: EditorAnchorProjection, formatting?: TextFormattingDirective): void;
+  applyFormattingOperation(operation: FormattingOperation): void;
   insertFragment(fragment: CanonicalDocumentFragment, target?: EditorAnchorProjection): void;
   /**
    * I2 Tier B Slice 4b — serialize the selection range to a
@@ -515,6 +521,16 @@ export interface DocumentRuntime {
     body: string,
     authorId?: string,
   ): AddCommentReplyResult | null;
+  getCommentThreadForChange(changeId: string): CommentSidebarThreadSnapshot | null;
+  ensureCommentThreadForChange(
+    changeId: string,
+    authorId?: string,
+  ): AddCommentResult | null;
+  addReplyToChange(
+    changeId: string,
+    body: string,
+    authorId?: string,
+  ): AddCommentReplyResult | null;
   editCommentBody(commentId: string, body: string): void;
   addScope(params: AddScopeParams): AddScopeResult;
   getScope(scopeId: string): WorkflowScope | null;
@@ -588,6 +604,13 @@ export interface DocumentRuntime {
   setScopeVisibility(scopeId: string, visibility: ScopeVisibility): void;
   /** §C8 — Get a scope's current visibility (absent = "visible"). */
   getScopeVisibility(scopeId: string): ScopeVisibility;
+  /** Scope edit-enforcement posture (collab-replicated). */
+  setScopeGuardPolicy(
+    scopeId: string,
+    guardPolicy: WorkflowScopeGuardPolicy,
+  ): void;
+  /** Effective scope edit-enforcement posture (unknown = "none"). */
+  getScopeGuardPolicy(scopeId: string): WorkflowScopeGuardPolicy;
   /** §C7 — Set local chrome visibility state (never collab-replicated). */
   setScopeChromeVisibility(state: ScopeChromeVisibilityState): void;
   /** §C7 — Get local chrome visibility state (default: { mode: "all" }). */
@@ -3071,6 +3094,167 @@ export function createDocumentRuntime(
         emitError(toRuntimeError(error));
       }
     },
+    applyFormattingOperation(operation) {
+      try {
+        const commandName = getFormattingOperationCommandName(operation);
+        const snapshot = cachedRenderSnapshot;
+        if (!snapshot.isReady || snapshot.readOnly || snapshot.fatalError) {
+          return;
+        }
+
+        const blockedReasons = workflowCoordinator.evaluateBlockedReasons(
+          state.selection,
+          commandName,
+        );
+        if (blockedReasons.length > 0) {
+          this.emitBlockedCommand(commandName, blockedReasons);
+          return;
+        }
+
+        const persistedDocument = state.document;
+        const localDocument =
+          activeStory.kind === "main"
+            ? persistedDocument
+            : {
+                ...persistedDocument,
+                content: {
+                  type: "doc" as const,
+                  children: [...getStoryBlocks(persistedDocument, activeStory)],
+                },
+              };
+        const localSnapshot: RuntimeRenderSnapshot =
+          activeStory.kind === "main"
+            ? snapshot
+            : {
+                ...snapshot,
+                activeStory: MAIN_STORY_TARGET,
+                selection: stripStoryTarget(snapshot.selection),
+              };
+
+        const suggesting =
+          workflowCoordinator.getEffectiveDocumentMode(state.selection) === "suggesting";
+        const timestamp = clock();
+
+        if (suggesting) {
+          if (activeStory.kind !== "main") {
+            this.emitBlockedCommand(commandName, [{
+              code: "suggesting_unsupported",
+              message: `"${commandName}" is not supported in suggesting mode for this story.`,
+            }]);
+            return;
+          }
+
+          if (
+            operation.type === "set-alignment" ||
+            operation.type === "indent" ||
+            operation.type === "outdent"
+          ) {
+            const paragraphContext = resolveActiveParagraphContext(localSnapshot);
+            if (!paragraphContext) {
+              return;
+            }
+            const beforeXml = buildParagraphPropertyBeforeXml(paragraphContext.paragraph);
+            const result = applyFormattingOperationToDocument(
+              localDocument,
+              localSnapshot,
+              operation,
+            );
+            if (!result.changed) {
+              return;
+            }
+            const nextDocument = appendPropertyChangeSuggestion(
+              result.document,
+              {
+                from: paragraphContext.paragraph.from,
+                to: paragraphContext.paragraph.to,
+              },
+              {
+                originalRevisionType: "pPrChange",
+                xmlTag: "pPrChange",
+                beforeXml,
+                semanticKind: "paragraph-property-change",
+                storyTarget: activeStory,
+                authorId: defaultAuthorId ?? undefined,
+              },
+              timestamp,
+            );
+            this.dispatch({
+              type: "document.replace",
+              document: { ...nextDocument, updatedAt: timestamp },
+              mapping: createEmptyMapping(),
+              selection: toInternalSelectionSnapshot(result.selection),
+              origin: createOrigin("api", timestamp),
+            });
+            return;
+          }
+
+          const segment = findSingleSelectedTextSegment(localSnapshot);
+          if (!segment) {
+            this.emitBlockedCommand(commandName, [{
+              code: "suggesting_unsupported",
+              message: `"${commandName}" requires one bounded text segment in suggesting mode.`,
+            }]);
+            return;
+          }
+          const beforeXml = buildRunPropertyBeforeXml(segment);
+          const result = applyFormattingOperationToDocument(
+            localDocument,
+            localSnapshot,
+            operation,
+          );
+          if (!result.changed) {
+            return;
+          }
+          const nextDocument = appendPropertyChangeSuggestion(
+            result.document,
+            { from: segment.from, to: segment.to },
+            {
+              originalRevisionType: "rPrChange",
+              xmlTag: "rPrChange",
+              beforeXml,
+              semanticKind: "formatting-change",
+              storyTarget: activeStory,
+              authorId: defaultAuthorId ?? undefined,
+            },
+            timestamp,
+          );
+          this.dispatch({
+            type: "document.replace",
+            document: { ...nextDocument, updatedAt: timestamp },
+            mapping: createEmptyMapping(),
+            selection: toInternalSelectionSnapshot(result.selection),
+            origin: createOrigin("api", timestamp),
+          });
+          return;
+        }
+
+        const result = applyFormattingOperationToDocument(
+          localDocument,
+          localSnapshot,
+          operation,
+        );
+        if (!result.changed) {
+          return;
+        }
+        const nextDocument =
+          activeStory.kind === "main"
+            ? result.document
+            : replaceStoryBlocks(
+                persistedDocument,
+                activeStory,
+                result.document.content.children,
+              );
+        this.dispatch({
+          type: "document.replace",
+          document: { ...nextDocument, updatedAt: timestamp },
+          mapping: createEmptyMapping(),
+          selection: toInternalSelectionSnapshot(result.selection),
+          origin: createOrigin("api", timestamp),
+        });
+      } catch (error) {
+        emitError(toRuntimeError(error));
+      }
+    },
     applyScopeReplacement(plan: RuntimeOperationPlan) {
       // Layer-08 Slice 5. Each step lowers to an existing command; the
       // apply pipeline (`src/runtime/scopes/replacement/apply.ts`) owns
@@ -3095,6 +3279,7 @@ export function createDocumentRuntime(
               {
                 selection: createSelectionFromPublicAnchor(anchor),
                 blockedCommandName: "applyScopeReplacement",
+                skipWorkflowGuard: true,
               },
             );
           } catch (error) {
@@ -3129,6 +3314,7 @@ export function createDocumentRuntime(
               {
                 selection: createSelectionFromPublicAnchor(anchor),
                 blockedCommandName: "applyScopeReplacement",
+                skipWorkflowGuard: true,
               },
             );
           } catch (error) {
@@ -3168,6 +3354,7 @@ export function createDocumentRuntime(
                 selection: createSelectionFromPublicAnchor(anchor),
                 blockedCommandName: "applyScopeReplacement",
                 documentModeOverride: "suggesting",
+                skipWorkflowGuard: true,
               },
             );
           } catch (error) {
@@ -3200,6 +3387,7 @@ export function createDocumentRuntime(
                 selection: createSelectionFromPublicAnchor(anchor),
                 blockedCommandName: "applyScopeReplacement",
                 documentModeOverride: "suggesting",
+                skipWorkflowGuard: true,
               },
             );
           } catch (error) {
@@ -3522,6 +3710,137 @@ export function createDocumentRuntime(
       const last = entries[entries.length - 1]!;
       return { commentId, entryId: last.entryId };
     },
+    getCommentThreadForChange(changeId) {
+      return (
+        this.getRenderSnapshot().comments.threads.find(
+          (thread) => thread.linkedRevisionId === changeId,
+        ) ?? null
+      );
+    },
+    ensureCommentThreadForChange(changeId, authorId) {
+      const existing = this.getCommentThreadForChange(changeId);
+      if (existing) {
+        this.openComment(existing.commentId);
+        return { commentId: existing.commentId, anchor: existing.anchor };
+      }
+
+      if (viewState.documentMode === "viewing") {
+        return null;
+      }
+      const revision = state.document.review.revisions[changeId];
+      if (!revision || revision.anchor.kind !== "range") {
+        return null;
+      }
+      const rejectionReason = commentAnchorRejectionReason(
+        cachedRenderSnapshot.surface,
+        revision.anchor,
+      );
+      if (rejectionReason !== null) {
+        return null;
+      }
+
+      const commentId = createEntityId("comment", state.document.review.comments, clock());
+      const createdBy = authorId ?? defaultAuthorId ?? "unknown";
+      const createdAt = clock();
+      const entryId = `${commentId}-entry-1`;
+      const comment: CommentThreadRecord = {
+        commentId,
+        anchor: revision.anchor,
+        createdAt,
+        createdBy,
+        authorId: createdBy,
+        body: "",
+        entries: [
+          {
+            entryId,
+            authorId: createdBy,
+            body: "",
+            createdAt,
+          },
+        ],
+        status: "open",
+        warningIds: [],
+        isResolved: false,
+        metadata: {
+          source: "runtime",
+          linkedRevisionId: changeId,
+        },
+      };
+
+      this.dispatch({
+        type: "comment.add",
+        comment,
+        selection: createSelectionFromPublicAnchor(
+          toPublicAnchorProjection(revision.anchor),
+        ),
+        origin: createOrigin("api", clock()),
+      });
+
+      return {
+        commentId,
+        anchor: toPublicAnchorProjection(revision.anchor),
+      };
+    },
+    addReplyToChange(changeId, body, authorId) {
+      const existing = this.getCommentThreadForChange(changeId);
+      if (existing) {
+        return this.addCommentReply(existing.commentId, body, authorId);
+      }
+
+      if (viewState.documentMode === "viewing") {
+        return null;
+      }
+      const revision = state.document.review.revisions[changeId];
+      if (!revision || revision.anchor.kind !== "range") {
+        return null;
+      }
+      const rejectionReason = commentAnchorRejectionReason(
+        cachedRenderSnapshot.surface,
+        revision.anchor,
+      );
+      if (rejectionReason !== null) {
+        return null;
+      }
+
+      const commentId = createEntityId("comment", state.document.review.comments, clock());
+      const createdBy = authorId ?? defaultAuthorId ?? "unknown";
+      const createdAt = clock();
+      const entryId = `${commentId}-entry-1`;
+      const comment: CommentThreadRecord = {
+        commentId,
+        anchor: revision.anchor,
+        createdAt,
+        createdBy,
+        authorId: createdBy,
+        body,
+        entries: [
+          {
+            entryId,
+            authorId: createdBy,
+            body,
+            createdAt,
+          },
+        ],
+        status: "open",
+        warningIds: [],
+        isResolved: false,
+        metadata: {
+          source: "runtime",
+          linkedRevisionId: changeId,
+        },
+      };
+
+      this.dispatch({
+        type: "comment.add",
+        comment,
+        selection: createSelectionFromPublicAnchor(
+          toPublicAnchorProjection(revision.anchor),
+        ),
+        origin: createOrigin("api", clock()),
+      });
+
+      return { commentId, entryId };
+    },
     editCommentBody(commentId, body) {
       this.dispatch({
         type: "comment.edit-body",
@@ -3580,6 +3899,12 @@ export function createDocumentRuntime(
     getScopeVisibility(scopeId) {
       return workflowCoordinator.getScopeVisibility(scopeId);
     },
+    setScopeGuardPolicy(scopeId, guardPolicy) {
+      workflowCoordinator.setScopeGuardPolicy(scopeId, guardPolicy);
+    },
+    getScopeGuardPolicy(scopeId) {
+      return workflowCoordinator.getScopeGuardPolicy(scopeId);
+    },
     setScopeChromeVisibility(chromeVisibility) {
       workflowCoordinator.setScopeChromeVisibility(chromeVisibility);
     },
@@ -3839,13 +4164,16 @@ export function createDocumentRuntime(
           zoomLevel: viewState.zoomLevel,
         },
       });
-      const navigation = getCachedDocumentNavigationSnapshot(state, activeStory);
       const bookmarkMap = buildBookmarkNameMap(state.document);
       const paragraphContexts = collectParagraphContexts(state.document.content.children);
       const paragraphOffsets = paragraphContexts.map((p) => p.startOffset);
       return createFieldResolver({
         pageGraph,
-        activePageIndex: navigation.activePageIndex,
+        activePageIndex: resolveActivePageIndexFromPageGraph(
+          pageGraph,
+          state.selection.head,
+          activeStory,
+        ),
         bookmarkMap,
         paragraphOffsets,
         styles: state.document.styles,
@@ -4015,10 +4343,19 @@ export function createDocumentRuntime(
       return buildFieldSnapshot(state.document);
     },
     updateFields(options?: UpdateFieldsOptions): UpdateFieldsResult {
+      const pageGraph = layoutEngine.getPageGraph({
+        document: state.document,
+        viewState: {
+          activeStory,
+          workspaceMode: viewState.workspaceMode,
+          zoomLevel: viewState.zoomLevel,
+        },
+      });
       const refreshed = refreshDocumentFields(
         state.document,
         state.selection.head,
         activeStory,
+        pageGraph,
         options,
       );
       if (refreshed.changed) {
@@ -4939,6 +5276,13 @@ export function createDocumentRuntime(
        * override to the context that `executeEditorCommand` reads.
        */
       documentModeOverride?: DocumentMode;
+      /**
+       * Scope replacements are validated against their target scope by the
+       * Layer-08 compiler before reaching this mechanical dispatch step.
+       * Re-running the selection-scoped workflow guard here would make the
+       * live cursor, not the target scope, decide whether the edit lands.
+       */
+      skipWorkflowGuard?: boolean;
     } = {},
   ): TextCommandAck {
     emitStageToken(telemetryBus, "command", "command.dispatch.start", {
@@ -4980,20 +5324,22 @@ export function createDocumentRuntime(
         blockedReasons: [{ code: "suggesting_unsupported", message }],
       });
     }
-    const blockedReasons = workflowCoordinator.evaluateBlockedReasons(selection, command.type);
-    if (blockedReasons.length > 0) {
-      emit({
-        type: "command_blocked",
-        documentId: state.documentId,
-        command: textOptions.blockedCommandName ?? command.type,
-        reasons: blockedReasons,
-      });
-      return completeDispatch({
-        kind: "rejected",
-        opId,
-        newRevisionToken: "",
-        blockedReasons: blockedReasons.map((r) => ({ code: r.code, message: r.message })),
-      });
+    if (!textOptions.skipWorkflowGuard) {
+      const blockedReasons = workflowCoordinator.evaluateBlockedReasons(selection, command.type);
+      if (blockedReasons.length > 0) {
+        emit({
+          type: "command_blocked",
+          documentId: state.documentId,
+          command: textOptions.blockedCommandName ?? command.type,
+          reasons: blockedReasons,
+        });
+        return completeDispatch({
+          kind: "rejected",
+          opId,
+          newRevisionToken: "",
+          blockedReasons: blockedReasons.map((r) => ({ code: r.code, message: r.message })),
+        });
+      }
     }
 
     const timestamp = normalizeCommandTimestamp(command.origin?.timestamp) ?? clock();
@@ -6084,6 +6430,7 @@ function toPublicCommentSidebarSnapshot(
         createdBy: thread.createdBy,
         warningCount: thread.warningCount,
         anchorLabel: thread.anchorLabel,
+        linkedRevisionId: sourceThread?.metadata?.linkedRevisionId,
         detachedReason: sourceThread?.metadata?.detachedReason,
         actionabilityNote: sourceThread?.metadata?.actionabilityNote,
         isActive: thread.isActive,
@@ -6102,6 +6449,7 @@ function toPublicTrackedChangesSnapshot(
     createRevisionStoreFromDocument(state),
   );
   const storyPlainTextCache = new Map<string, string>();
+  const commentLinks = collectRevisionCommentLinks(state);
 
   return {
     pendingChangeIds: projection.activeRevisionIds,
@@ -6120,6 +6468,7 @@ function toPublicTrackedChangesSnapshot(
           createDetachedAnchor({ from: 0, to: 0 }, "importAmbiguity"),
         getStoryPlainText(state.document, storyTarget, storyPlainTextCache),
       );
+      const linkedComments = commentLinks.get(revision.revisionId);
 
       return {
         revisionId: revision.revisionId,
@@ -6143,6 +6492,12 @@ function toPublicTrackedChangesSnapshot(
         warningCount: revision.warningCount,
         canAccept: revision.canAccept,
         canReject: revision.canReject,
+        ...(linkedComments
+          ? {
+              commentThreadIds: linkedComments.commentThreadIds,
+              replyCount: linkedComments.replyCount,
+            }
+          : {}),
         importedRevisionForm: sourceRevision?.metadata?.importedRevisionForm,
         preserveOnlyReason: revision.preserveOnlyReason,
         excerpt: preview.excerpt,
@@ -6152,6 +6507,23 @@ function toPublicTrackedChangesSnapshot(
   };
 }
 
+function collectRevisionCommentLinks(
+  state: Pick<EditorState, "document">,
+): Map<string, { commentThreadIds: string[]; replyCount: number }> {
+  const links = new Map<string, { commentThreadIds: string[]; replyCount: number }>();
+  for (const thread of Object.values(state.document.review.comments)) {
+    const revisionId = thread.metadata?.linkedRevisionId;
+    if (!revisionId) {
+      continue;
+    }
+    const current = links.get(revisionId) ?? { commentThreadIds: [], replyCount: 0 };
+    current.commentThreadIds.push(thread.commentId);
+    current.replyCount += Math.max(0, (thread.entries?.length ?? 0) - 1);
+    links.set(revisionId, current);
+  }
+  return links;
+}
+
 function createRevisionStoreFromDocument(
   state: Pick<EditorState, "document">,
 ): RevisionStore {
@@ -6574,6 +6946,7 @@ function refreshDocumentFields(
   document: CanonicalDocumentEnvelope,
   selectionHead: number,
   activeStory: EditorStoryTarget,
+  pageGraph: RuntimePageGraph,
   options?: UpdateFieldsOptions,
 ): {
   document: CanonicalDocumentEnvelope;
@@ -6584,7 +6957,11 @@ function refreshDocumentFields(
   const supportedOnly = options?.supportedOnly ?? true;
   const bookmarkMap = buildBookmarkNameMap(document);
   const paragraphs = collectParagraphContexts(document.content.children);
-  const navigation = createDocumentNavigationSnapshot(document, selectionHead, activeStory);
+  const activePageIndex = resolveActivePageIndexFromPageGraph(
+    pageGraph,
+    selectionHead,
+    activeStory,
+  );
   let updatedCount = 0;
   let changed = false;
   let changedFrom: number | undefined;
@@ -6609,7 +6986,8 @@ function refreshDocumentFields(
         document,
         bookmarkMap,
         paragraphs,
-        navigation,
+        pageGraph,
+        activePageIndex,
         storyTarget,
       );
       if (!display) {
@@ -7145,7 +7523,8 @@ function resolveSupportedFieldDisplay(
   document: CanonicalDocumentEnvelope,
   bookmarkMap: Map<string, { bookmarkId: string; paragraphIndex: number }>,
   paragraphs: readonly ParagraphContext[],
-  navigation: DocumentNavigationSnapshot,
+  pageGraph: RuntimePageGraph,
+  activePageIndex: number,
   storyTarget: EditorStoryTarget,
 ): { displayText: string; refreshStatus: FieldRefreshStatus } | undefined {
   if (!field.fieldFamily || !isSupportedFieldFamily(field.fieldFamily)) {
@@ -7160,33 +7539,41 @@ function resolveSupportedFieldDisplay(
     return { displayText: result.text, refreshStatus: result.refreshStatus };
   }
   if (field.fieldFamily === "SECTIONPAGES") {
-    const sectionIndex = "sectionIndex" in storyTarget && typeof storyTarget.sectionIndex === "number"
-      ? storyTarget.sectionIndex
-      : navigation.activeSectionIndex;
-    const sectionPages = navigation.pages.filter((p) => p.sectionIndex === sectionIndex);
-    if (sectionPages.length === 0) return { displayText: "", refreshStatus: "unresolvable" };
-    const fmt = sectionPages[0]?.layout.pageNumbering?.format;
+    const page = resolveRepresentativePageForStory(pageGraph, activePageIndex, storyTarget);
+    if (!page) {
+      return { displayText: "", refreshStatus: "unresolvable" };
+    }
     return {
-      displayText: formatPageNumber(sectionPages.length, fmt),
+      displayText: resolvePageFieldDisplayText("SECTIONPAGES", "", {
+        page,
+        graph: pageGraph,
+      }),
       refreshStatus: "current",
     };
   }
   if (field.fieldFamily === "PAGE") {
-    const page = resolveRepresentativePageForStory(navigation, storyTarget);
+    const page = resolveRepresentativePageForStory(pageGraph, activePageIndex, storyTarget);
     if (!page) {
       return { displayText: "", refreshStatus: "unresolvable" };
     }
     return {
-      displayText: resolveDisplayedPageNumber(page),
+      displayText: resolvePageFieldDisplayText("PAGE", "", {
+        page,
+        graph: pageGraph,
+      }),
       refreshStatus: "current",
     };
   }
   if (field.fieldFamily === "NUMPAGES") {
-    if (navigation.pageCount === 0) {
+    const page = pageGraph.pages[activePageIndex] ?? firstContentPage(pageGraph);
+    if (!page || pageGraph.contentPageCount === 0) {
       return { displayText: "", refreshStatus: "unresolvable" };
     }
     return {
-      displayText: String(navigation.pageCount),
+      displayText: resolvePageFieldDisplayText("NUMPAGES", "", {
+        page,
+        graph: pageGraph,
+      }),
       refreshStatus: "current",
     };
   }
@@ -7211,20 +7598,28 @@ function resolveSupportedFieldDisplay(
 
     // \p switch: emit relative position text ("above" / "below" / "on this page")
     if (field.switches?.relativePosition === true) {
-      const fieldPage = resolveRepresentativePageForStory(navigation, storyTarget);
-      const targetPageIndex = findPageForOffset(navigation.pages, paragraph.startOffset);
+      const fieldPage = resolveRepresentativePageForStory(pageGraph, activePageIndex, storyTarget);
+      const targetPageIndex = findPageIndexForRuntimeOffset(
+        pageGraph.pages,
+        paragraph.startOffset,
+      );
       const fieldPageIndex = fieldPage
-        ? navigation.pages.indexOf(fieldPage)
-        : navigation.activePageIndex;
+        ? pageGraph.pages.findIndex((page) => page.pageId === fieldPage.pageId)
+        : activePageIndex;
       if (targetPageIndex < fieldPageIndex) return { displayText: "above", refreshStatus: "current" };
       if (targetPageIndex > fieldPageIndex) return { displayText: "below", refreshStatus: "current" };
       return { displayText: "on this page", refreshStatus: "current" };
     }
 
-    const pageIndex = findPageForOffset(navigation.pages, paragraph.startOffset);
-    const page = navigation.pages[pageIndex] ?? navigation.pages[0];
+    const page = pageForRuntimeOffset(pageGraph, paragraph.startOffset);
     return page
-      ? { displayText: resolveDisplayedPageNumber(page), refreshStatus: "current" }
+      ? {
+          displayText: resolvePageFieldDisplayText("PAGE", "", {
+            page,
+            graph: pageGraph,
+          }),
+          refreshStatus: "current",
+        }
       : { displayText: "", refreshStatus: "unresolvable" };
   }
   if (field.fieldFamily === "NOTEREF") {
@@ -7240,52 +7635,133 @@ function resolveSupportedFieldDisplay(
   return undefined;
 }
 
-function resolveRepresentativePageForStory(
-  navigation: DocumentNavigationSnapshot,
+function resolveActivePageIndexFromPageGraph(
+  graph: RuntimePageGraph,
+  selectionHead: number,
   storyTarget: EditorStoryTarget,
-): DocumentNavigationSnapshot["pages"][number] | undefined {
+): number {
+  if (graph.pages.length === 0) {
+    return 0;
+  }
+
   if (storyTarget.kind === "main") {
-    return navigation.pages[navigation.activePageIndex] ?? navigation.pages[0];
+    return findPageForRuntimeOffset(graph.pages, selectionHead);
   }
 
   if (storyTarget.kind === "header" || storyTarget.kind === "footer") {
-    const sectionIndex = storyTarget.sectionIndex ?? navigation.activeSectionIndex;
-    const sectionPages = navigation.pages.filter((page) => page.sectionIndex === sectionIndex);
-    if (sectionPages.length === 0) {
-      return navigation.pages[0];
+    const matchingPageIndex = graph.pages.findIndex((page) => {
+      if (page.isBlankFiller) return false;
+      const activeStory =
+        storyTarget.kind === "header" ? page.stories.header : page.stories.footer;
+      return activeStory ? storyTargetsMatchForPageInstance(activeStory, storyTarget) : false;
+    });
+    if (matchingPageIndex >= 0) {
+      return matchingPageIndex;
     }
-    if (storyTarget.variant === "first") {
-      return sectionPages[0];
+
+    const sectionIndex = storyTarget.sectionIndex ?? graph.pages[0]!.sectionIndex;
+    const sectionPageIndex = graph.pages.findIndex(
+      (page) => page.sectionIndex === sectionIndex && !page.isBlankFiller,
+    );
+    return sectionPageIndex >= 0 ? sectionPageIndex : 0;
+  }
+
+  return findPageForRuntimeOffset(graph.pages, selectionHead);
+}
+
+function findPageForRuntimeOffset(
+  pages: RuntimePageGraph["pages"],
+  offset: number,
+): number {
+  return findPageIndexForRuntimeOffset(pages, offset);
+}
+
+function findPageIndexForRuntimeOffset(
+  pages: RuntimePageGraph["pages"],
+  offset: number,
+): number {
+  let lastContentPageIndex = -1;
+  for (let i = 0; i < pages.length; i += 1) {
+    const page = pages[i]!;
+    if (page.isBlankFiller) {
+      continue;
     }
-    if (storyTarget.variant === "even") {
-      return sectionPages.find((page) => (page.pageInSection + 1) % 2 === 0) ?? sectionPages[0];
+    lastContentPageIndex = i;
+    if (offset < page.endOffset) {
+      return i;
     }
-    return (
-      sectionPages.find((page) => isDefaultHeaderFooterPage(page)) ??
-      sectionPages[0]
-    );
   }
+  if (lastContentPageIndex >= 0) {
+    return lastContentPageIndex;
+  }
+  return Math.max(0, pages.length - 1);
+}
 
-  return navigation.pages[navigation.activePageIndex] ?? navigation.pages[0];
+function pageForRuntimeOffset(
+  graph: RuntimePageGraph,
+  offset: number,
+): RuntimePageNode | undefined {
+  return graph.pages[findPageIndexForRuntimeOffset(graph.pages, offset)];
 }
 
-function isDefaultHeaderFooterPage(
-  page: DocumentNavigationSnapshot["pages"][number],
+function resolveRepresentativePageForStory(
+  graph: RuntimePageGraph,
+  activePageIndex: number,
+  storyTarget: EditorStoryTarget,
+): RuntimePageNode | undefined {
+  if (storyTarget.kind === "main") {
+    return graph.pages[activePageIndex] ?? firstContentPage(graph);
+  }
+
+  if (storyTarget.kind === "header" || storyTarget.kind === "footer") {
+    const matchedPage = graph.pages.find((page) => {
+      if (page.isBlankFiller) return false;
+      const activeStory =
+        storyTarget.kind === "header" ? page.stories.header : page.stories.footer;
+      return activeStory ? storyTargetsMatchForPageInstance(activeStory, storyTarget) : false;
+    });
+    if (matchedPage) {
+      return matchedPage;
+    }
+    if (typeof storyTarget.sectionIndex === "number") {
+      return graph.pages.find(
+        (page) => page.sectionIndex === storyTarget.sectionIndex && !page.isBlankFiller,
+      ) ?? firstContentPage(graph);
+    }
+    return firstContentPage(graph);
+  }
+
+  return graph.pages[activePageIndex] ?? firstContentPage(graph);
+}
+
+function storyTargetsMatchForPageInstance(
+  activeStory: EditorStoryTarget,
+  requestedStory: EditorStoryTarget,
 ): boolean {
-  if (page.layout.differentFirstPage && page.pageInSection === 0) {
+  if (activeStory.kind !== requestedStory.kind) {
     return false;
   }
-  if (page.layout.differentOddEvenPages) {
-    return (page.pageInSection + 1) % 2 === 1;
+  if (activeStory.kind === "header" && requestedStory.kind === "header") {
+    return (
+      activeStory.relationshipId === requestedStory.relationshipId &&
+      activeStory.variant === requestedStory.variant &&
+      (requestedStory.sectionIndex === undefined ||
+        activeStory.sectionIndex === requestedStory.sectionIndex)
+    );
   }
-  return true;
+  if (activeStory.kind === "footer" && requestedStory.kind === "footer") {
+    return (
+      activeStory.relationshipId === requestedStory.relationshipId &&
+      activeStory.variant === requestedStory.variant &&
+      (requestedStory.sectionIndex === undefined ||
+        activeStory.sectionIndex === requestedStory.sectionIndex)
+    );
+  }
+  return storyTargetsEqual(activeStory, requestedStory);
 }
 
-function resolveDisplayedPageNumber(
-  page: DocumentNavigationSnapshot["pages"][number],
-): string {
-  const n = (page.layout.pageNumbering?.start ?? 1) + page.pageInSection;
-  return formatPageNumber(n, page.layout.pageNumbering?.format);
+function firstContentPage(graph: RuntimePageGraph): RuntimePageNode | undefined {
+  return graph.pages.find((page) => !page.isBlankFiller) ?? graph.pages[0];
 }
 
 interface ParagraphContext {
@@ -7703,6 +8179,93 @@ function isHighlightedSegment(
   return typeof bg === "string" && bg.length > 0;
 }
 
+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 forEachParagraphBlock(
   blocks: readonly SurfaceBlockSnapshot[],
   visit: (paragraph: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>) => void,
@@ -7816,6 +8379,44 @@ function buildRunPropertyBeforeXml(
   return `<w:rPr>${parts.join("")}</w:rPr>`;
 }
 
+function buildParagraphPropertyBeforeXml(
+  paragraph: Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>,
+): string {
+  const parts: string[] = [];
+  if (paragraph.styleId) {
+    parts.push(`<w:pStyle w:val="${escapeAttributeXml(paragraph.styleId)}"/>`);
+  }
+  if (paragraph.numbering) {
+    parts.push(
+      `<w:numPr><w:ilvl w:val="${paragraph.numbering.level}"/><w:numId w:val="${escapeAttributeXml(
+        paragraph.numbering.numberingInstanceId.replace(/^num:/u, ""),
+      )}"/></w:numPr>`,
+    );
+  }
+  if (paragraph.alignment) {
+    parts.push(`<w:jc w:val="${escapeAttributeXml(paragraph.alignment)}"/>`);
+  }
+  if (paragraph.indentation) {
+    const attrs: string[] = [];
+    if (paragraph.indentation.left !== undefined) {
+      attrs.push(`w:left="${paragraph.indentation.left}"`);
+    }
+    if (paragraph.indentation.right !== undefined) {
+      attrs.push(`w:right="${paragraph.indentation.right}"`);
+    }
+    if (paragraph.indentation.firstLine !== undefined) {
+      attrs.push(`w:firstLine="${paragraph.indentation.firstLine}"`);
+    }
+    if (paragraph.indentation.hanging !== undefined) {
+      attrs.push(`w:hanging="${paragraph.indentation.hanging}"`);
+    }
+    if (attrs.length > 0) {
+      parts.push(`<w:ind ${attrs.join(" ")}/>`);
+    }
+  }
+  return `<w:pPr>${parts.join("")}</w:pPr>`;
+}
+
 function escapeAttributeXml(value: string): string {
   return value
     .replace(/&/g, "&amp;")
@@ -7824,6 +8425,55 @@ function escapeAttributeXml(value: string): string {
     .replace(/"/g, "&quot;");
 }
 
+function stripStoryTarget(selection: SelectionSnapshot): SelectionSnapshot {
+  const { storyTarget: _storyTarget, ...rest } = selection;
+  return rest;
+}
+
+function toInternalSelectionSnapshot(
+  selection: SelectionSnapshot,
+): EditorState["selection"] {
+  return {
+    anchor: selection.anchor,
+    head: selection.head,
+    isCollapsed: selection.isCollapsed,
+    activeRange:
+      selection.activeRange.kind === "range"
+        ? createRangeAnchor(
+            selection.activeRange.from,
+            selection.activeRange.to,
+            selection.activeRange.assoc,
+          )
+        : selection.activeRange.kind === "node"
+          ? createNodeAnchor(selection.activeRange.at, selection.activeRange.assoc)
+          : createDetachedAnchor(
+              selection.activeRange.lastKnownRange,
+              selection.activeRange.reason,
+            ),
+  };
+}
+
+function getFormattingOperationCommandName(operation: FormattingOperation): string {
+  switch (operation.type) {
+    case "toggle":
+      return `toggle${operation.mark.charAt(0).toUpperCase()}${operation.mark.slice(1)}`;
+    case "set-font-family":
+      return "setFontFamily";
+    case "set-font-size":
+      return "setFontSize";
+    case "set-text-color":
+      return "setTextColor";
+    case "set-highlight-color":
+      return "setHighlightColor";
+    case "set-alignment":
+      return "setAlignment";
+    case "indent":
+      return "indent";
+    case "outdent":
+      return "outdent";
+  }
+}
+
 function appendPropertyChangeSuggestion(
   document: CanonicalDocumentEnvelope,
   anchor: { from: number; to: number },