@beyondwork/docx-react-component 1.0.83 → 1.0.85

package/src/shell/ref-commands.ts

@@ -30,7 +30,6 @@
 import type {
   EditorSessionState,
   EditorStoryTarget,
-  FormattingAlignment,
   HeaderFooterLinkPatch,
   InsertImageOptions,
   InsertTableOptions,
@@ -41,7 +40,6 @@ import type {
   SelectionSnapshot as PublicSelectionSnapshot,
   StyleCatalogSnapshot,
   SurfaceBlockSnapshot,
-  SurfaceInlineSegment,
   TableOp,
 } from "../api/public-types";
 import {
@@ -51,7 +49,7 @@ import {
   storyTargetsEqual,
   type TransactionMapping,
 } from "../core/selection/mapping.ts";
-import { applyFormattingOperationToDocument } from "../core/commands/formatting-commands.ts";
+import type { FormattingOperation } from "../core/commands/formatting-commands.ts";
 import {
   applyParagraphStyleToDocument,
   applyTableStyleToDocument,
@@ -220,178 +218,15 @@ export function getRuntimeStyleCatalog(
 // Formatting (flat + suggesting-mode)
 // ---------------------------------------------------------------------------
 
-type FormattingOperation =
-  | { type: "toggle"; mark: "bold" | "italic" | "underline" | "strikethrough" | "superscript" | "subscript" }
-  | { type: "set-font-family"; fontFamily: string | null }
-  | { type: "set-font-size"; size: number | null }
-  | { type: "set-text-color"; color: string | null }
-  | { type: "set-highlight-color"; color: string | null }
-  | { type: "set-alignment"; alignment: FormattingAlignment }
-  | { type: "indent" }
-  | { type: "outdent" };
-
 export function applyRuntimeFormattingOperation(
   runtime: WordReviewEditorRuntime,
   operation: FormattingOperation,
 ): void {
-  if (isSelectionSuggesting(runtime)) {
-    if (applySuggestingFormattingOperation(runtime, operation)) {
-      return;
-    }
-  }
-  if (emitSuggestingUnsupportedMutation(runtime, getFormattingOperationCommandName(operation))) {
-    return;
-  }
-  const context = getStoryMutationContext(runtime, getFormattingOperationCommandName(operation));
-  if (!context) {
-    return;
-  }
-
-  const result = applyFormattingOperationToDocument(
-    context.localDocument,
-    context.localSnapshot,
-    operation,
-  );
-  dispatchStoryMutationResult(
-    runtime,
-    context,
-    {
-      ...result,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    context.timestamp,
-  );
-}
-
-function applySuggestingFormattingOperation(
-  runtime: WordReviewEditorRuntime,
-  operation: FormattingOperation,
-): boolean {
-  const commandName = getFormattingOperationCommandName(operation);
-  const context = getStoryMutationContext(runtime, commandName);
-  if (!context) {
-    return true;
-  }
-  if (context.activeStory.kind !== "main") {
-    runtime.emitBlockedCommand(commandName, [{
-      code: "suggesting_unsupported",
-      message: `"${commandName}" is not supported in suggesting mode for this story.`,
-    }]);
-    return true;
-  }
-
-  if (operation.type === "set-alignment" || operation.type === "indent" || operation.type === "outdent") {
-    const paragraphContext = resolveActiveParagraphContext(context.localSnapshot);
-    if (!paragraphContext) {
-      return true;
-    }
-    const beforeXml = buildParagraphPropertyBeforeXml(paragraphContext.paragraph);
-    const result = applyFormattingOperationToDocument(
-      context.localDocument,
-      context.localSnapshot,
-      operation,
-    );
-    if (!result.changed) {
-      return true;
-    }
-    const nextDocument = appendPropertyChangeSuggestion(
-      result.document,
-      {
-        from: paragraphContext.paragraph.from,
-        to: paragraphContext.paragraph.to,
-      },
-      {
-        originalRevisionType: "pPrChange",
-        xmlTag: "pPrChange",
-        beforeXml,
-        semanticKind: "paragraph-property-change",
-        storyTarget: context.activeStory,
-        authorId: runtime.getDefaultAuthorId?.(),
-      },
-      context.timestamp,
-    );
-    dispatchStoryMutationResult(
-      runtime,
-      context,
-      {
-        changed: true,
-        document: nextDocument,
-        selection: toRuntimeSelectionSnapshot(result.selection),
-      },
-      context.timestamp,
-    );
-    return true;
-  }
-
-  const segment = findSingleSelectedTextSegment(context.localSnapshot);
-  if (!segment) {
-    runtime.emitBlockedCommand(commandName, [{
-      code: "suggesting_unsupported",
-      message: `"${commandName}" requires one bounded text segment in suggesting mode.`,
-    }]);
-    return true;
-  }
-  const beforeXml = buildRunPropertyBeforeXml(segment);
-  const result = applyFormattingOperationToDocument(
-    context.localDocument,
-    context.localSnapshot,
-    operation,
-  );
-  if (!result.changed) {
-    return true;
-  }
-  const nextDocument = appendPropertyChangeSuggestion(
-    result.document,
-    {
-      from: segment.from,
-      to: segment.to,
-    },
-    {
-      originalRevisionType: "rPrChange",
-      xmlTag: "rPrChange",
-      beforeXml,
-      semanticKind: "formatting-change",
-      storyTarget: context.activeStory,
-      authorId: runtime.getDefaultAuthorId?.(),
-    },
-    context.timestamp,
-  );
-  dispatchStoryMutationResult(
-    runtime,
-    context,
-    {
-      changed: true,
-      document: nextDocument,
-      selection: toRuntimeSelectionSnapshot(result.selection),
-    },
-    context.timestamp,
-  );
-  return true;
-}
-
-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";
-  }
+  runtime.applyFormattingOperation(operation);
 }
 
 // ---------------------------------------------------------------------------
-// Suggesting-mode property-change plumbing
+// Suggesting-mode guard helper for commands without bounded redline support
 // ---------------------------------------------------------------------------
 
 function emitSuggestingUnsupportedMutation(
@@ -409,192 +244,6 @@ function emitSuggestingUnsupportedMutation(
   return true;
 }
 
-function appendPropertyChangeSuggestion(
-  document: EditorSessionState["canonicalDocument"],
-  anchor: { from: number; to: number },
-  input: {
-    originalRevisionType: "rPrChange" | "pPrChange";
-    xmlTag: "rPrChange" | "pPrChange";
-    beforeXml: string;
-    semanticKind: "formatting-change" | "paragraph-property-change";
-    storyTarget: EditorStoryTarget;
-    authorId?: string;
-  },
-  timestamp: string,
-): EditorSessionState["canonicalDocument"] {
-  const existing = document.review.revisions;
-  const changeId = createRuntimeSuggestionChangeId(existing, timestamp);
-  const resolvedAuthorId = input.authorId ?? "unknown";
-  return {
-    ...document,
-    review: {
-      ...document.review,
-      revisions: {
-        ...existing,
-        [changeId]: {
-          changeId,
-          kind: "property-change",
-          anchor: createRangeAnchor(anchor.from, anchor.to, { start: 1, end: -1 }),
-          authorId: resolvedAuthorId,
-          createdAt: timestamp,
-          warningIds: [],
-          metadata: {
-            source: "runtime",
-            storyTarget: input.storyTarget,
-            suggestionId: changeId,
-            semanticKind: input.semanticKind,
-            originalRevisionType: input.originalRevisionType,
-            propertyChangeData: {
-              xmlTag: input.xmlTag,
-              beforeXml: input.beforeXml,
-            },
-          },
-          status: "open",
-        },
-      },
-    },
-  };
-}
-
-function createRuntimeSuggestionChangeId(
-  existing: EditorSessionState["canonicalDocument"]["review"]["revisions"],
-  timestamp: string,
-): string {
-  const base = `change-${timestamp.replace(/[^0-9]/gu, "")}`;
-  let counter = Object.keys(existing).length + 1;
-  let candidate = `${base}-p${counter}`;
-  while (existing[candidate]) {
-    counter += 1;
-    candidate = `${base}-p${counter}`;
-  }
-  return candidate;
-}
-
-function findSingleSelectedTextSegment(
-  snapshot: Pick<RuntimeRenderSnapshot, "surface" | "selection">,
-): Extract<SurfaceInlineSegment, { kind: "text" }> | null {
-  if (!snapshot.surface || snapshot.selection.activeRange.kind !== "range" || snapshot.selection.isCollapsed) {
-    return null;
-  }
-  const selectionFrom = Math.min(snapshot.selection.anchor, snapshot.selection.head);
-  const selectionTo = Math.max(snapshot.selection.anchor, snapshot.selection.head);
-  const segments = collectSelectedTextSegments(snapshot.surface.blocks, selectionFrom, selectionTo);
-  if (segments.length !== 1) {
-    return null;
-  }
-  const [segment] = segments;
-  if (!segment || segment.from !== selectionFrom || segment.to !== selectionTo) {
-    return null;
-  }
-  return segment;
-}
-
-function collectSelectedTextSegments(
-  blocks: readonly SurfaceBlockSnapshot[],
-  selectionFrom: number,
-  selectionTo: number,
-  output: Array<Extract<SurfaceInlineSegment, { kind: "text" }>> = [],
-): Array<Extract<SurfaceInlineSegment, { kind: "text" }>> {
-  for (const block of blocks) {
-    if (block.kind === "paragraph") {
-      for (const segment of block.segments) {
-        if (
-          segment.kind === "text" &&
-          rangesOverlap(selectionFrom, selectionTo, segment.from, segment.to)
-        ) {
-          output.push(segment);
-        }
-      }
-      continue;
-    }
-    if (block.kind === "table") {
-      for (const row of block.rows) {
-        for (const cell of row.cells) {
-          collectSelectedTextSegments(cell.content, selectionFrom, selectionTo, output);
-        }
-      }
-      continue;
-    }
-    if (block.kind === "sdt_block") {
-      collectSelectedTextSegments(block.children, selectionFrom, selectionTo, output);
-    }
-  }
-  return output;
-}
-
-function rangesOverlap(
-  leftFrom: number,
-  leftTo: number,
-  rightFrom: number,
-  rightTo: number,
-): boolean {
-  return leftFrom < rightTo && rightFrom < leftTo;
-}
-
-function buildRunPropertyBeforeXml(
-  segment: Extract<SurfaceInlineSegment, { kind: "text" }>,
-): string {
-  const parts: string[] = [];
-  const marks = new Set(segment.marks ?? []);
-  if (marks.has("bold")) parts.push("<w:b/>");
-  if (marks.has("italic")) parts.push("<w:i/>");
-  if (marks.has("underline")) parts.push("<w:u w:val=\"single\"/>");
-  if (marks.has("strikethrough")) parts.push("<w:strike/>");
-  if (marks.has("superscript")) parts.push("<w:vertAlign w:val=\"superscript\"/>");
-  if (marks.has("subscript")) parts.push("<w:vertAlign w:val=\"subscript\"/>");
-  if (segment.markAttrs?.fontFamily) {
-    parts.push(`<w:rFonts w:ascii="${escapeAttributeXml(segment.markAttrs.fontFamily)}" w:hAnsi="${escapeAttributeXml(segment.markAttrs.fontFamily)}"/>`);
-  }
-  if (segment.markAttrs?.fontSize !== undefined) {
-    parts.push(`<w:sz w:val="${segment.markAttrs.fontSize}"/>`);
-  }
-  if (segment.markAttrs?.textColor) {
-    parts.push(`<w:color w:val="${escapeAttributeXml(segment.markAttrs.textColor)}"/>`);
-  }
-  if (segment.markAttrs?.backgroundColor) {
-    parts.push(`<w:shd w:val="clear" w:color="auto" w:fill="${escapeAttributeXml(segment.markAttrs.backgroundColor)}"/>`);
-  }
-  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;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;");
-}
-
 // ---------------------------------------------------------------------------
 // List toggle / paragraph style / table style
 // ---------------------------------------------------------------------------

package/src/shell/session-bootstrap.ts

@@ -1098,6 +1098,7 @@ function createLoadingRuntimeBridge(input: {
     getFontEntry: (name: string) =>
       input.sessionState.canonicalDocument.fontTable?.fonts[name],
     replaceText: () => undefined,
+    applyFormattingOperation: () => undefined,
     applyScopeReplacement: () => undefined,
     insertFragment: () => undefined,
     copy: () => undefined,
@@ -1133,6 +1134,13 @@ function createLoadingRuntimeBridge(input: {
     addCommentReply: () => {
       throw createLoadingBoundaryError(input.snapshot.documentId, "comment");
     },
+    getCommentThreadForChange: () => null,
+    ensureCommentThreadForChange: () => {
+      throw createLoadingBoundaryError(input.snapshot.documentId, "comment");
+    },
+    addReplyToChange: () => {
+      throw createLoadingBoundaryError(input.snapshot.documentId, "comment");
+    },
     editCommentBody: () => undefined,
     addScope: () => {
       throw createLoadingBoundaryError(input.snapshot.documentId, "scope");
@@ -1289,6 +1297,8 @@ function createLoadingRuntimeBridge(input: {
     addInvisibleScope: () => ({ scopeId: "", anchor: { kind: "range", from: 0, to: 0, assoc: { start: -1, end: 1 } } }),
     setScopeVisibility: () => undefined,
     getScopeVisibility: () => "visible" as const,
+    setScopeGuardPolicy: () => undefined,
+    getScopeGuardPolicy: () => "none" as const,
     setScopeChromeVisibility: () => undefined,
     getScopeChromeVisibility: () => ({ mode: "all" as const }),
     subscribeToScopeQuery: (_filter, _callback) => () => undefined,

package/src/ui/WordReviewEditor.tsx

@@ -66,6 +66,7 @@ import type {
   ViewMode as EditorViewMode,
   WorkflowBlockedCommandReason,
   WorkflowMarkupSnapshot,
+  WorkflowMarkupMode,
   WorkflowScopeSnapshot,
   WordReviewEditorChromeOptions,
   WordReviewEditorChromePreset,
@@ -250,6 +251,21 @@ function normalizeHostMarkupDisplay(
   return "markup";
 }
 
+function toWorkflowMarkupMode(mode: MarkupDisplay): WorkflowMarkupMode {
+  switch (mode) {
+    case "all":
+    case "all-markup":
+      return "all";
+    case "simple":
+    case "simple-markup":
+      return "simple";
+    case "clean":
+    case "no-markup":
+    case "original":
+      return "clean";
+  }
+}
+
 const VISUALLY_HIDDEN_STYLES: React.CSSProperties = {
   position: "absolute",
   width: "1px",
@@ -383,6 +399,11 @@ export function __createWordReviewEditorRefBridge(
     resolveComment: (commentId) => runtime.resolveComment(commentId),
     reopenComment: (commentId) => runtime.reopenComment(commentId),
     addCommentReply: (commentId, body) => runtime.addCommentReply(commentId, body),
+    getCommentThreadForChange: (changeId) =>
+      clonePublicValue(runtime.getCommentThreadForChange(changeId)),
+    ensureCommentThreadForChange: (changeId) =>
+      runtime.ensureCommentThreadForChange(changeId),
+    addReplyToChange: (changeId, body) => runtime.addReplyToChange(changeId, body),
     editCommentBody: (commentId, body) => runtime.editCommentBody(commentId, body),
     deleteComment: (commentId) => {
       applyRuntimeDeleteComment(runtime, commentId);
@@ -393,6 +414,8 @@ export function __createWordReviewEditorRefBridge(
     addInvisibleScope: (params) => runtime.addInvisibleScope(params),
     setScopeVisibility: (scopeId, visibility) => runtime.setScopeVisibility(scopeId, visibility),
     getScopeVisibility: (scopeId) => runtime.getScopeVisibility(scopeId),
+    setScopeGuardPolicy: (scopeId, guardPolicy) => runtime.setScopeGuardPolicy(scopeId, guardPolicy),
+    getScopeGuardPolicy: (scopeId) => runtime.getScopeGuardPolicy(scopeId),
     setScopeChromeVisibility: (state) => runtime.setScopeChromeVisibility(state),
     getScopeChromeVisibility: () => runtime.getScopeChromeVisibility(),
     subscribeToScopeQuery: (filter, callback) => runtime.subscribeToScopeQuery(filter, callback),
@@ -1039,7 +1062,9 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     } = props;
 
     const [activeRailTab, setActiveRailTab] = useState<ReviewRailTab>("comments");
-    const [showTrackedChanges, setShowTrackedChanges] = useState(false);
+    const [showTrackedChanges, setShowTrackedChanges] = useState(() => suggestionsEnabled);
+    const [localMarkupDisplay, setLocalMarkupDisplay] =
+      useState<WorkflowMarkupMode | null>(() => suggestionsEnabled ? "all" : null);
     const [activeRevisionId, setActiveRevisionId] = useState<string | undefined>();
     const [suppressedSuggestionRevisionId, setSuppressedSuggestionRevisionId] = useState<string | null>(null);
     const [selectionToolbarAnchor, setSelectionToolbarAnchor] = useState<SelectionToolbarAnchor | null>(null);
@@ -1341,7 +1366,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       loadingViewState,
     );
     const isPageWorkspace = viewState.workspaceMode === "page";
-    const liveMarkupDisplay = __resolveLiveMarkupDisplay(markupDisplay, isPageWorkspace);
+    const liveMarkupDisplay = localMarkupDisplay ??
+      __resolveLiveMarkupDisplay(markupDisplay, isPageWorkspace);
     const documentNavigation = useRuntimeValue(
       runtime
         ? {
@@ -1481,9 +1507,29 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       activeRuntime.setViewMode(effectiveViewMode);
     }, [activeRuntime, effectiveViewMode]);
 
+    const setReviewMarkupMode = useCallback((mode: MarkupDisplay) => {
+      const workflowMode = toWorkflowMarkupMode(mode);
+      setLocalMarkupDisplay(workflowMode);
+      setShowTrackedChanges(workflowMode !== "clean");
+      api.ui?.viewport.setLocalMarkupMode(workflowMode);
+    }, [api]);
+
+    const setTrackedChangesAuthoring = useCallback((enabled: boolean) => {
+      const workflowMode: WorkflowMarkupMode = enabled ? "all" : "clean";
+      setShowTrackedChanges(enabled);
+      setLocalMarkupDisplay(workflowMode);
+      api.runtime.document.setMode(enabled ? "suggesting" : "editing");
+      api.ui?.viewport.setLocalMarkupMode(workflowMode);
+    }, [api]);
+
     useEffect(() => {
-      activeRuntime.setDocumentMode(suggestionsEnabled ? "suggesting" : "editing");
-    }, [activeRuntime, suggestionsEnabled]);
+      if (suggestionsEnabled) {
+        setTrackedChangesAuthoring(true);
+        return;
+      }
+      setShowTrackedChanges(false);
+      api.runtime.document.setMode("editing");
+    }, [api, setTrackedChangesAuthoring, suggestionsEnabled]);
 
     // design-close-chrome Phase 2 — density contract (designsystem §4.2).
     // When the `density` prop is supplied, drive the root `data-density`
@@ -1643,6 +1689,12 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         reopenComment: (commentId) => activeRuntime.reopenComment(commentId),
         addCommentReply: (commentId, body) =>
           activeRuntime.addCommentReply(commentId, body, currentUser.userId),
+        getCommentThreadForChange: (changeId) =>
+          clonePublicValue(activeRuntime.getCommentThreadForChange(changeId)),
+        ensureCommentThreadForChange: (changeId) =>
+          activeRuntime.ensureCommentThreadForChange(changeId, currentUser.userId),
+        addReplyToChange: (changeId, body) =>
+          activeRuntime.addReplyToChange(changeId, body, currentUser.userId),
         editCommentBody: (commentId, body) =>
           activeRuntime.editCommentBody(commentId, body),
         deleteComment: (commentId) => {
@@ -1654,6 +1706,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         addInvisibleScope: (params) => activeRuntime.addInvisibleScope(params),
         setScopeVisibility: (scopeId, visibility) => activeRuntime.setScopeVisibility(scopeId, visibility),
         getScopeVisibility: (scopeId) => activeRuntime.getScopeVisibility(scopeId),
+        setScopeGuardPolicy: (scopeId, guardPolicy) => activeRuntime.setScopeGuardPolicy(scopeId, guardPolicy),
+        getScopeGuardPolicy: (scopeId) => activeRuntime.getScopeGuardPolicy(scopeId),
         setScopeChromeVisibility: (state) => activeRuntime.setScopeChromeVisibility(state),
         getScopeChromeVisibility: () => activeRuntime.getScopeChromeVisibility(),
         subscribeToScopeQuery: (filter, callback) => activeRuntime.subscribeToScopeQuery(filter, callback),
@@ -2736,7 +2790,20 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
     );
 
     const addSelectionToolbarComment = useCallback(() => {
-      const commentId = addReviewComment();
+      let commentId: string | null = null;
+      if (activeSelectionTool?.kind === "suggestion-review") {
+        const primaryChangeId = activeSelectionTool.changeIds[0];
+        const linkedThread = primaryChangeId
+          ? activeRuntime.ensureCommentThreadForChange(primaryChangeId, currentUser.userId)
+          : null;
+        commentId = linkedThread?.commentId ?? null;
+        if (commentId) {
+          activeRuntime.openComment(commentId);
+          setActiveRailTab("comments");
+        }
+      } else {
+        commentId = addReviewComment();
+      }
       if (!commentId) {
         return;
       }
@@ -2744,7 +2811,13 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       queueMicrotask(() => {
         focusDocumentSurface();
       });
-    }, [dismissSelectionToolbar, focusDocumentSurface]);
+    }, [
+      activeRuntime,
+      activeSelectionTool,
+      currentUser.userId,
+      dismissSelectionToolbar,
+      focusDocumentSurface,
+    ]);
 
     const handleSelectionToolbarAnchorChange = useCallback(
       (nextAnchor: SelectionToolbarAnchor | null) => {
@@ -3162,7 +3235,8 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       onWorkspaceModeChange: (mode) => activeRuntime.setWorkspaceMode(mode),
       onZoomChange: (level) => activeRuntime.setZoom(level),
       onActiveRailTabChange: setActiveRailTab,
-      onShowTrackedChangesChange: setShowTrackedChanges,
+      onShowTrackedChangesChange: setTrackedChangesAuthoring,
+      onReviewMarkupModeChange: setReviewMarkupMode,
       onToggleBold: () =>
         applyRuntimeFormattingOperation(activeRuntime, { type: "toggle", mark: "bold" }),
       onToggleItalic: () =>
@@ -3259,10 +3333,20 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       // with a mount-time `console.warn`; hosts that still pass them can
       // migrate to `onOpenStory` at their leisure.
       onOpenHeaderStoryForPage: (pageIndex: number) =>
-        openStoryForPage(activeRuntime, pageIndex, "header"),
+        isPageWorkspace
+          ? openStoryForPage(activeRuntime, pageIndex, "header")
+          : undefined,
       onOpenFooterStoryForPage: (pageIndex: number) =>
-        openStoryForPage(activeRuntime, pageIndex, "footer"),
+        isPageWorkspace
+          ? openStoryForPage(activeRuntime, pageIndex, "footer")
+          : undefined,
       onOpenStory: (target) => {
+        if (
+          !isPageWorkspace &&
+          (target.kind === "header" || target.kind === "footer")
+        ) {
+          return;
+        }
         activeRuntime.openStory(target);
       },
       onDeleteSectionBreak: (sectionIndex) =>
@@ -4736,6 +4820,12 @@ function buildSuggestionCardModel(args: {
     canReject: canReviewSuggestion && capabilities.canRejectChange && focusedSuggestion.canReject,
     canEditSuggestion: canReviewSuggestion && focusedSuggestion.editable,
     canAddComment,
+    ...(focusedSuggestion.commentThreadIds
+      ? { commentThreadIds: focusedSuggestion.commentThreadIds }
+      : {}),
+    ...(focusedSuggestion.replyCount !== undefined
+      ? { replyCount: focusedSuggestion.replyCount }
+      : {}),
     ...(disabledReason ? { disabledReason } : {}),
   };
 }

package/src/ui/editor-command-bag.ts

@@ -14,6 +14,7 @@ import type {
   WorkspaceMode,
 } from "../api/public-types.ts";
 import type { ReviewRailTab } from "../ui-tailwind/review/tw-review-rail.tsx";
+import type { MarkupDisplay } from "./headless/comment-decoration-model.ts";
 
 type CommandHandler = (...args: any[]) => unknown;
 
@@ -22,6 +23,7 @@ export interface EditorCommandBag {
   onZoomChange?(level: ZoomLevel): void;
   onActiveRailTabChange(value: ReviewRailTab): void;
   onShowTrackedChangesChange(show: boolean): void;
+  onReviewMarkupModeChange?(mode: MarkupDisplay): void;
   onUndo(): void;
   onRedo(): void;
   onSetParagraphStyle?(styleId: string): void;
@@ -102,7 +104,7 @@ export interface EditorCommandBag {
   /** Open the footer story for a specific page (double-click on its band). */
   onOpenFooterStoryForPage?(pageIndex: number): void;
   /**
-   * P8.11 — per-page header/footer band click handler.  Receives the
+   * P8.11 — per-page header/footer band double-click handler. Receives the
    * exact `EditorStoryTarget` the band represents; the command bag wires
    * this to `runtime.openStory(target)`.
    */

package/src/ui/headless/revision-decoration-model.ts

@@ -225,6 +225,19 @@ export function buildClassFromRevisionDisplay(
     parts.push("text-secondary");
   }
 
+  // Formatting/property-change revisions carry their semantics through
+  // `kind` even when markup posture has no underline/strike flag. Give
+  // mounted suggestion authoring a visible, non-destructive cue instead
+  // of silently relying on the sidebar/card path.
+  if (
+    parts.length === 0 &&
+    (display.kind === "formatting" || display.kind === "property-change")
+  ) {
+    parts.push(
+      "underline decoration-accent/70 decoration-dotted decoration-1 underline-offset-2",
+    );
+  }
+
   // Surface the author palette color as a CSS variable the renderer
   // can pick up via `var(--wre-revision-author)`. Consumer stylesheet
   // composes this into ring/underline color when the palette slot is

package/src/ui/headless/selection-tool-types.ts

@@ -81,6 +81,8 @@ export interface SuggestionReviewSelectionToolModel extends BaseSelectionToolMod
   canReject: boolean;
   canEditSuggestion: boolean;
   canAddComment: boolean;
+  commentThreadIds?: string[];
+  replyCount?: number;
 }
 
 export type StructureContextKind = "table" | "image" | "object" | "list";