@beyondwork/docx-react-component 1.0.31 → 1.0.33

package/src/runtime/document-runtime.ts

@@ -354,7 +354,12 @@ export function createDocumentRuntime(
     enforcedRangeCount: 0,
     preservedRangeCount: 0,
   };
-  let workflowOverlay: WorkflowOverlay | null = null;
+  let workflowOverlay: WorkflowOverlay | null =
+    structuredClone(
+      options.initialSessionState?.workflowOverlay ??
+      options.initialSnapshot?.workflowOverlay ??
+      null,
+    );
   let workflowMetadataDefinitions: WorkflowMetadataDefinition[] =
     options.initialSessionState?.workflowMetadata?.definitions
     ?? options.initialSnapshot?.workflowMetadata?.definitions
@@ -1995,6 +2000,7 @@ export function createDocumentRuntime(
             compatibility,
             protectionSnapshot,
           }) as unknown as PersistedEditorSnapshot),
+          workflowOverlay: workflowOverlay ?? undefined,
           workflowMetadata: deriveWorkflowMetadataSnapshot(),
         },
       );
@@ -3484,39 +3490,155 @@ function refreshDocumentFields(
   let changedFrom: number | undefined;
   let changedTo: number | undefined;
 
-  const nextChildren = refreshBlocksWithCursor(document.content.children, (field, range) => {
-    if (!field.fieldFamily || !isSupportedFieldFamily(field.fieldFamily)) {
-      return field;
-    }
-    if (supportedOnly && field.fieldFamily === "TOC") {
-      return field;
+  const refreshStoryFields = (
+    blocks: readonly BlockNode[],
+    storyTarget: EditorStoryTarget,
+  ): { blocks: BlockNode[]; changed: boolean } => {
+    let storyChanged = false;
+    let storyChangedFrom: number | undefined;
+    let storyChangedTo: number | undefined;
+    const refreshed = refreshBlocksWithCursor(blocks, (field, range) => {
+      if (!field.fieldFamily || !isSupportedFieldFamily(field.fieldFamily)) {
+        return field;
+      }
+      if (supportedOnly && field.fieldFamily === "TOC") {
+        return field;
+      }
+      const display = resolveSupportedFieldDisplay(
+        field,
+        document,
+        bookmarkMap,
+        paragraphs,
+        navigation,
+        storyTarget,
+      );
+      if (!display) {
+        return field;
+      }
+      updatedCount += 1;
+      const nextField: FieldNode = {
+        ...field,
+        children: buildInlineNodesFromDisplayText(display.displayText),
+        refreshStatus: display.refreshStatus,
+      };
+      if (
+        nextField.refreshStatus !== field.refreshStatus ||
+        flattenInlineDisplayText(nextField.children) !== flattenInlineDisplayText(field.children)
+      ) {
+        storyChanged = true;
+        storyChangedFrom = storyChangedFrom === undefined ? range.from : Math.min(storyChangedFrom, range.from);
+        storyChangedTo = storyChangedTo === undefined ? range.to : Math.max(storyChangedTo, range.to);
+      }
+      return nextField;
+    });
+    if (storyChanged) {
+      changed = true;
+      if (storyTargetsEqual(activeStory, storyTarget)) {
+        if (storyChangedFrom !== undefined) {
+          changedFrom = changedFrom === undefined ? storyChangedFrom : Math.min(changedFrom, storyChangedFrom);
+        }
+        if (storyChangedTo !== undefined) {
+          changedTo = changedTo === undefined ? storyChangedTo : Math.max(changedTo, storyChangedTo);
+        }
+      }
     }
-    const display = resolveSupportedFieldDisplay(
-      field,
-      document,
-      bookmarkMap,
-      paragraphs,
-      navigation,
-    );
-    if (!display) {
-      return field;
+    return { blocks: refreshed.blocks, changed: storyChanged };
+  };
+
+  const refreshedMain = refreshStoryFields(document.content.children, MAIN_STORY_TARGET);
+  let nextSubParts = document.subParts;
+
+  if (document.subParts) {
+    let subPartsChanged = false;
+    const nextHeaders = document.subParts.headers.map((header) => {
+      const storyTarget: EditorStoryTarget = {
+        kind: "header",
+        relationshipId: header.relationshipId,
+        variant: header.variant,
+        ...(header.sectionIndex !== undefined ? { sectionIndex: header.sectionIndex } : {}),
+      };
+      const refreshed = refreshStoryFields(header.blocks, storyTarget);
+      if (refreshed.changed) {
+        subPartsChanged = true;
+        return {
+          ...header,
+          blocks: refreshed.blocks,
+        };
+      }
+      return header;
+    });
+    const nextFooters = document.subParts.footers.map((footer) => {
+      const storyTarget: EditorStoryTarget = {
+        kind: "footer",
+        relationshipId: footer.relationshipId,
+        variant: footer.variant,
+        ...(footer.sectionIndex !== undefined ? { sectionIndex: footer.sectionIndex } : {}),
+      };
+      const refreshed = refreshStoryFields(footer.blocks, storyTarget);
+      if (refreshed.changed) {
+        subPartsChanged = true;
+        return {
+          ...footer,
+          blocks: refreshed.blocks,
+        };
+      }
+      return footer;
+    });
+
+    let nextFootnoteCollection = document.subParts.footnoteCollection;
+    if (document.subParts.footnoteCollection) {
+      let noteCollectionChanged = false;
+      const nextFootnotes = Object.fromEntries(
+        Object.entries(document.subParts.footnoteCollection.footnotes).map(([noteId, note]) => {
+          const refreshed = refreshStoryFields(note.blocks, { kind: "footnote", noteId });
+          if (refreshed.changed) {
+            noteCollectionChanged = true;
+            return [
+              noteId,
+              {
+                ...note,
+                blocks: refreshed.blocks,
+              },
+            ];
+          }
+          return [noteId, note];
+        }),
+      );
+      const nextEndnotes = Object.fromEntries(
+        Object.entries(document.subParts.footnoteCollection.endnotes).map(([noteId, note]) => {
+          const refreshed = refreshStoryFields(note.blocks, { kind: "endnote", noteId });
+          if (refreshed.changed) {
+            noteCollectionChanged = true;
+            return [
+              noteId,
+              {
+                ...note,
+                blocks: refreshed.blocks,
+              },
+            ];
+          }
+          return [noteId, note];
+        }),
+      );
+      if (noteCollectionChanged) {
+        subPartsChanged = true;
+        nextFootnoteCollection = {
+          footnotes: nextFootnotes,
+          endnotes: nextEndnotes,
+        };
+      }
     }
-    updatedCount += 1;
-    const nextField: FieldNode = {
-      ...field,
-      children: buildInlineNodesFromDisplayText(display.displayText),
-      refreshStatus: display.refreshStatus,
-    };
-    if (
-      nextField.refreshStatus !== field.refreshStatus ||
-      flattenInlineDisplayText(nextField.children) !== flattenInlineDisplayText(field.children)
-    ) {
-      changed = true;
-      changedFrom = changedFrom === undefined ? range.from : Math.min(changedFrom, range.from);
-      changedTo = changedTo === undefined ? range.to : Math.max(changedTo, range.to);
+
+    if (subPartsChanged) {
+      nextSubParts = {
+        ...document.subParts,
+        headers: nextHeaders,
+        footers: nextFooters,
+        ...(nextFootnoteCollection ? { footnoteCollection: nextFootnoteCollection } : {}),
+      };
     }
-    return nextField;
-  }).blocks;
+  }
+
   if (!changed) {
     return { document, updatedCount, changed: false };
   }
@@ -3525,8 +3647,9 @@ function refreshDocumentFields(
     ...document,
     content: {
       ...document.content,
-      children: nextChildren,
+      children: refreshedMain.blocks,
     },
+    ...(nextSubParts ? { subParts: nextSubParts } : {}),
   };
   const nextRegistry = buildFieldRegistry({
     content: nextDocument.content,
@@ -3821,6 +3944,7 @@ function resolveSupportedFieldDisplay(
   bookmarkMap: Map<string, { bookmarkId: string; paragraphIndex: number }>,
   paragraphs: readonly ParagraphContext[],
   navigation: DocumentNavigationSnapshot,
+  storyTarget: EditorStoryTarget,
 ): { displayText: string; refreshStatus: FieldRefreshStatus } | undefined {
   if (!field.fieldFamily || !isSupportedFieldFamily(field.fieldFamily)) {
     return undefined;
@@ -3846,7 +3970,10 @@ function resolveSupportedFieldDisplay(
       return { displayText: "", refreshStatus: "unresolvable" };
     }
     const pageIndex = findPageForOffset(navigation.pages, paragraph.startOffset);
-    return { displayText: String(pageIndex + 1), refreshStatus: "current" };
+    const page = navigation.pages[pageIndex] ?? navigation.pages[0];
+    return page
+      ? { displayText: String(resolveDisplayedPageNumber(page)), refreshStatus: "current" }
+      : { displayText: "", refreshStatus: "unresolvable" };
   }
   if (field.fieldFamily === "NOTEREF") {
     const paragraph = paragraphs[bookmark.paragraphIndex]?.paragraph;
@@ -3861,6 +3988,53 @@ function resolveSupportedFieldDisplay(
   return undefined;
 }
 
+function resolveRepresentativePageForStory(
+  navigation: DocumentNavigationSnapshot,
+  storyTarget: EditorStoryTarget,
+): DocumentNavigationSnapshot["pages"][number] | undefined {
+  if (storyTarget.kind === "main") {
+    return navigation.pages[navigation.activePageIndex] ?? navigation.pages[0];
+  }
+
+  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];
+    }
+    if (storyTarget.variant === "first") {
+      return sectionPages[0];
+    }
+    if (storyTarget.variant === "even") {
+      return sectionPages.find((page) => (page.pageInSection + 1) % 2 === 0) ?? sectionPages[0];
+    }
+    return (
+      sectionPages.find((page) => isDefaultHeaderFooterPage(page)) ??
+      sectionPages[0]
+    );
+  }
+
+  return navigation.pages[navigation.activePageIndex] ?? navigation.pages[0];
+}
+
+function isDefaultHeaderFooterPage(
+  page: DocumentNavigationSnapshot["pages"][number],
+): boolean {
+  if (page.layout.differentFirstPage && page.pageInSection === 0) {
+    return false;
+  }
+  if (page.layout.differentOddEvenPages) {
+    return (page.pageInSection + 1) % 2 === 1;
+  }
+  return true;
+}
+
+function resolveDisplayedPageNumber(
+  page: DocumentNavigationSnapshot["pages"][number],
+): number {
+  return (page.layout.pageNumbering?.start ?? 1) + page.pageInSection;
+}
+
 interface ParagraphContext {
   paragraph: ParagraphNode;
   startOffset: number;

package/src/runtime/surface-projection.ts

@@ -90,6 +90,7 @@ export function createEditorSurfaceSnapshot(
       cursor,
       counters,
       numberingPrefixResolver,
+      activeStory.kind !== "main",
     );
     blocks.push(surfaceBlock.block);
     lockedFragmentIds.push(...surfaceBlock.lockedFragmentIds);
@@ -123,6 +124,7 @@ function createSurfaceBlock(
     altChunk: number;
   },
   numberingPrefixResolver: NumberingPrefixResolver,
+  promoteSecondaryStoryTextBoxes: boolean,
 ): { block: SurfaceBlockSnapshot; lockedFragmentIds: string[]; nextCursor: number } {
   if (block.type === "opaque_block") {
     const fragment = getOpaqueFragment(document.preservation as never, block.fragmentId);
@@ -162,6 +164,7 @@ function createSurfaceBlock(
       cursor,
       counters,
       numberingPrefixResolver,
+      promoteSecondaryStoryTextBoxes,
     );
   }
 
@@ -200,6 +203,7 @@ function createSurfaceBlock(
       cursor,
       counters,
       numberingPrefixResolver,
+      promoteSecondaryStoryTextBoxes,
     );
   }
 
@@ -291,6 +295,7 @@ function createSurfaceBlock(
     document,
     cursor,
     numberingPrefixResolver,
+    promoteSecondaryStoryTextBoxes,
   );
 }
 
@@ -308,6 +313,7 @@ function createTableBlock(
     altChunk: number;
   },
   numberingPrefixResolver: NumberingPrefixResolver,
+  promoteSecondaryStoryTextBoxes: boolean,
 ): { block: SurfaceBlockSnapshot; lockedFragmentIds: string[]; nextCursor: number } {
   const lockedFragmentIds: string[] = [];
   let innerCursor = cursor;
@@ -327,6 +333,7 @@ function createTableBlock(
           innerCursor,
           counters,
           numberingPrefixResolver,
+          promoteSecondaryStoryTextBoxes,
         );
         cellContent.push(result.block);
         lockedFragmentIds.push(...result.lockedFragmentIds);
@@ -458,6 +465,7 @@ function createSdtBlock(
     altChunk: number;
   },
   numberingPrefixResolver: NumberingPrefixResolver,
+  promoteSecondaryStoryTextBoxes: boolean,
 ): { block: SurfaceBlockSnapshot; lockedFragmentIds: string[]; nextCursor: number } {
   const children: SurfaceBlockSnapshot[] = [];
   const lockedFragmentIds: string[] = [];
@@ -470,6 +478,7 @@ function createSdtBlock(
       innerCursor,
       counters,
       numberingPrefixResolver,
+      promoteSecondaryStoryTextBoxes,
     );
     children.push(result.block);
     lockedFragmentIds.push(...result.lockedFragmentIds);
@@ -504,6 +513,7 @@ function createParagraphBlock(
   document: CanonicalDocumentEnvelope,
   start: number,
   numberingPrefixResolver: NumberingPrefixResolver,
+  promoteSecondaryStoryTextBoxes: boolean,
 ): {
   block: SurfaceBlockSnapshot;
   nextCursor: number;
@@ -553,7 +563,13 @@ function createParagraphBlock(
   const children = Array.isArray(paragraph.children) ? paragraph.children : [];
 
   for (const child of children) {
-    const result = appendInlineSegments(accumulator, child, document, cursor);
+    const result = appendInlineSegments(
+      accumulator,
+      child,
+      document,
+      cursor,
+      promoteSecondaryStoryTextBoxes,
+    );
     cursor = result.nextCursor;
     lockedFragmentIds.push(...result.lockedFragmentIds);
   }
@@ -671,6 +687,7 @@ function appendInlineSegments(
   node: InlineNode,
   document: CanonicalDocumentEnvelope,
   start: number,
+  promoteSecondaryStoryTextBoxes: boolean,
   hyperlinkHref?: string,
 ): { nextCursor: number; lockedFragmentIds: string[] } {
   switch (node.type) {
@@ -712,7 +729,14 @@ function appendInlineSegments(
     case "hyperlink": {
       let cursor = start;
       for (const child of node.children) {
-        const result = appendInlineSegments(paragraph, child, document, cursor, node.href);
+        const result = appendInlineSegments(
+          paragraph,
+          child,
+          document,
+          cursor,
+          promoteSecondaryStoryTextBoxes,
+          node.href,
+        );
         cursor = result.nextCursor;
       }
       return { nextCursor: cursor, lockedFragmentIds: [] };
@@ -756,6 +780,7 @@ function appendInlineSegments(
           "Locked whole-unit to keep unsupported inline OOXML intact through export.",
         ...(descriptor ? { featureKey: descriptor.featureKey, blockedReasonCode } : {}),
         ...(preview?.presentation ? { presentation: preview.presentation } : {}),
+        ...(preview?.displayText ? { displayText: preview.displayText } : {}),
         state: "locked-preserve-only",
       });
       return { nextCursor: start + 1, lockedFragmentIds: [node.fragmentId] };
@@ -765,11 +790,29 @@ function appendInlineSegments(
     case "smartart_preview":
       return appendComplexPreviewSegment(paragraph, node, start, "SmartArt diagram", createSmartArtDetail(node));
     case "shape":
+      if (promoteSecondaryStoryTextBoxes && node.isTextBox && node.text) {
+        return appendTextBoxSegment(
+          paragraph,
+          start,
+          "Text box",
+          createShapeDetail(node),
+          node.text,
+        );
+      }
       return appendComplexPreviewSegment(paragraph, node, start,
         node.isTextBox ? "Text box" : "Drawing shape", createShapeDetail(node));
     case "wordart":
       return appendComplexPreviewSegment(paragraph, node, start, "WordArt", createWordArtDetail(node));
     case "vml_shape":
+      if (promoteSecondaryStoryTextBoxes && shouldRenderSecondaryStoryVmlTextBox(node)) {
+        return appendTextBoxSegment(
+          paragraph,
+          start,
+          "Text box",
+          createVmlDetail(node),
+          node.text!,
+        );
+      }
       return appendComplexPreviewSegment(paragraph, node, start, "Legacy VML drawing", createVmlDetail(node));
     case "symbol":
       paragraph.segments.push({
@@ -810,12 +853,20 @@ function appendInlineSegments(
         node.fieldFamily === "REF" ||
         node.fieldFamily === "PAGEREF" ||
         node.fieldFamily === "NOTEREF" ||
-        node.fieldFamily === "TOC";
+        node.fieldFamily === "TOC" ||
+        node.fieldFamily === "PAGE" ||
+        node.fieldFamily === "NUMPAGES";
       if (node.children && node.children.length > 0) {
         let cursor = start;
         const lockedIds: string[] = [];
         for (const child of node.children) {
-          const result = appendInlineSegments(paragraph, child, document, cursor);
+          const result = appendInlineSegments(
+            paragraph,
+            child,
+            document,
+            cursor,
+            promoteSecondaryStoryTextBoxes,
+          );
           cursor = result.nextCursor;
           lockedIds.push(...result.lockedFragmentIds);
         }
@@ -826,7 +877,11 @@ function appendInlineSegments(
         const fieldLabel =
           node.fieldFamily === "TOC"
             ? "Table of Contents"
-            : `${node.fieldFamily ?? "Field"}: ${node.fieldTarget ?? node.instruction.trim()}`;
+            : node.fieldFamily === "PAGE"
+              ? "Current page number"
+              : node.fieldFamily === "NUMPAGES"
+                ? "Total pages"
+                : `${node.fieldFamily ?? "Field"}: ${node.fieldTarget ?? node.instruction.trim()}`;
         paragraph.segments.push({
           segmentId: `${paragraph.blockId}-segment-${paragraph.segments.length}`,
           kind: "field_ref",
@@ -883,6 +938,33 @@ function appendComplexPreviewSegment(
   return { nextCursor: start + 1, lockedFragmentIds: [] };
 }
 
+function appendTextBoxSegment(
+  paragraph: ParagraphAccumulator,
+  start: number,
+  label: string,
+  detail: string,
+  displayText: string,
+): { nextCursor: number; lockedFragmentIds: string[] } {
+  paragraph.segments.push({
+    segmentId: `${paragraph.blockId}-segment-${paragraph.segments.length}`,
+    kind: "opaque_inline",
+    from: start,
+    to: start + 1,
+    fragmentId: `complex:text-box:${start}`,
+    warningId: `warning:text-box:${start}`,
+    label,
+    detail,
+    presentation: "text-box",
+    displayText,
+    state: "locked-preserve-only",
+  });
+  return { nextCursor: start + 1, lockedFragmentIds: [] };
+}
+
+function shouldRenderSecondaryStoryVmlTextBox(node: VmlShapeNode): boolean {
+  return Boolean(node.text) && (!node.shapeType || /_x0000_t202$/iu.test(node.shapeType));
+}
+
 function createChartDetail(node: ChartPreviewNode): string {
   const parts = ["Embedded chart."];
   if (node.previewMediaId) {
@@ -977,7 +1059,11 @@ function createPlainText(
           text.push("\uFFFC");
           break;
         case "opaque_inline":
-          text.push("\uFFF9");
+          if ((segment.presentation === "text-box" || segment.presentation === "checkbox") && segment.displayText) {
+            text.push(segment.displayText);
+          } else {
+            text.push("\uFFF9");
+          }
           break;
       }
     }
@@ -1095,6 +1181,7 @@ function createStorySurface(
       cursor,
       counters,
       numberingPrefixResolver,
+      true,
     );
     surfaceBlocks.push(surfaceBlock.block);
     cursor = surfaceBlock.nextCursor;
@@ -1317,7 +1404,8 @@ function describePreservedInlinePreview(
 ): {
   label: string;
   detail: string;
-  presentation?: "inline-chip" | "quiet-marker";
+  presentation?: "inline-chip" | "quiet-marker" | "text-box" | "checkbox";
+  displayText?: string;
 } | null {
   if (/\b(?:w:)?proofErr\b/u.test(payloadReference)) {
     const proofType = /\bw:type="([^"]+)"/u.exec(payloadReference)?.[1];
@@ -1359,6 +1447,11 @@ function describePreservedInlinePreview(
     };
   }
 
+  const checkboxPreview = describePreservedCheckboxPreview(payloadReference);
+  if (checkboxPreview) {
+    return checkboxPreview;
+  }
+
   if (/\b(?:w:)?bookmarkStart\b/u.test(payloadReference)) {
     const name = /\bw:name="([^"]+)"/u.exec(payloadReference)?.[1];
     return {
@@ -1402,6 +1495,62 @@ function describePreservedInlinePreview(
   return null;
 }
 
+function describePreservedCheckboxPreview(
+  payloadReference: string,
+): {
+  label: string;
+  detail: string;
+  presentation: "checkbox";
+  displayText: string;
+} | null {
+  if (!/\b(?:w:)?sdt\b/u.test(payloadReference) || !/\b(?:w14:)?checkbox\b/u.test(payloadReference)) {
+    return null;
+  }
+
+  const checkedValue = /\b(?:w14:)?checked\b[^>]*\b(?:w14:)?val="([^"]+)"/u.exec(payloadReference)?.[1];
+  const isChecked = checkedValue === "1" || /^true$/iu.test(checkedValue ?? "");
+  const checkedState = /\b(?:w14:)?checkedState\b[^>]*\b(?:w14:)?val="([^"]+)"/u.exec(payloadReference)?.[1];
+  const uncheckedState = /\b(?:w14:)?uncheckedState\b[^>]*\b(?:w14:)?val="([^"]+)"/u.exec(payloadReference)?.[1];
+  const displayText =
+    extractCheckboxGlyph(payloadReference) ??
+    decodeCheckboxCodePoint(isChecked ? checkedState : uncheckedState) ??
+    (isChecked ? "☒" : "☐");
+
+  return {
+    label: isChecked ? "Checked checkbox" : "Unchecked checkbox",
+    detail: `Checkbox content control is visible while the original OOXML wrapper remains preserve-backed for export. State: ${isChecked ? "checked" : "unchecked"}.`,
+    presentation: "checkbox",
+    displayText,
+  };
+}
+
+function extractCheckboxGlyph(payloadReference: string): string | null {
+  const content = /<(?:\w+:)?sdtContent\b[^>]*>([\s\S]*?)<\/(?:\w+:)?sdtContent>/u.exec(payloadReference)?.[1];
+  if (!content) {
+    return null;
+  }
+  const text = [...content.matchAll(/<(?:\w+:)?t\b[^>]*>([\s\S]*?)<\/(?:\w+:)?t>/gu)]
+    .map((match) => decodeXmlEntities(match[1] ?? ""))
+    .join("")
+    .trim();
+  return text.length > 0 ? text : null;
+}
+
+function decodeCheckboxCodePoint(value: string | undefined): string | null {
+  if (!value) {
+    return null;
+  }
+  const codePoint = Number.parseInt(value, 16);
+  if (!Number.isFinite(codePoint)) {
+    return null;
+  }
+  try {
+    return String.fromCodePoint(codePoint);
+  } catch {
+    return null;
+  }
+}
+
 function decodeXmlEntities(text: string): string {
   return text
     .replace(/&lt;/g, "<")

package/src/ui/WordReviewEditor.tsx

@@ -176,7 +176,10 @@ import {
   resolveHeadingShortcutStyleId,
   resolveShellShortcut,
 } from "./runtime-shortcut-dispatch";
-import { deriveVisibleWorkflowBlockedRails } from "./workflow-surface-blocked-rails.ts";
+import {
+  deriveVisibleWorkflowBlockedRails,
+  deriveVisibleWorkflowLockedZones,
+} from "./workflow-surface-blocked-rails.ts";
 import {
   type WordReviewEditorRuntime,
   persistAndExport as persistAndExportFromBoundary,
@@ -869,6 +872,10 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       () => deriveVisibleWorkflowBlockedRails(snapshot.surface, workflowMarkupSnapshot),
       [snapshot.surface, workflowMarkupSnapshot],
     );
+    const workflowLockedZones = useMemo(
+      () => deriveVisibleWorkflowLockedZones(snapshot.surface, workflowMarkupSnapshot),
+      [snapshot.surface, workflowMarkupSnapshot],
+    );
     const canonicalDocument = useMemo(
       () => (runtime ? runtime.getCanonicalDocument() : loadingSessionState.canonicalDocument),
       [loadingSessionState.canonicalDocument, runtime, snapshot.revisionToken],
@@ -902,6 +909,10 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       activeRuntime.setViewMode(effectiveViewMode);
     }, [activeRuntime, effectiveViewMode]);
 
+    useEffect(() => {
+      activeRuntime.setDocumentMode(suggestionsEnabled ? "suggesting" : "editing");
+    }, [activeRuntime, suggestionsEnabled]);
+
     const markCurrentSectionForReview = useCallback((input?: {
       sectionIndex?: number;
       label?: string;
@@ -971,10 +982,6 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
       [activeReviewQueueItemId, activeRuntime, reviewQueueSnapshot],
     );
 
-    useEffect(() => {
-      activeRuntime.setDocumentMode(suggestionsEnabled ? "suggesting" : "editing");
-    }, [activeRuntime, suggestionsEnabled]);
-
     useEffect(() => {
       runtimeViewStateSeedRef.current = {
         workspaceMode: viewState.workspaceMode,
@@ -2217,6 +2224,7 @@ export const WordReviewEditor = forwardRef<WordReviewEditorRef, WordReviewEditor
         workflowScopes={workflowScopeSnapshot?.scopes}
         workflowCandidates={workflowScopeSnapshot?.candidates}
         workflowBlockedReasons={workflowBlockedRails}
+        workflowLockedZones={workflowLockedZones}
         activeWorkflowWorkItemId={workflowScopeSnapshot?.activeWorkItemId ?? null}
         activeWorkflowScopeIds={workflowScopeSnapshot?.activeWorkItem?.scopeIds ?? []}
         workflowMetadata={workflowMarkupSnapshot?.metadata}

package/src/ui/editor-surface-controller.tsx

@@ -7,6 +7,7 @@ import type {
   SelectionSnapshot,
   WorkflowBlockedCommandReason,
   WorkflowCandidateRange,
+  WorkflowLockedZone,
   WorkflowMetadataMarkup,
   WorkflowScope,
 } from "../api/public-types.ts";
@@ -53,6 +54,7 @@ export interface EditorSurfaceControllerProps {
   workflowScopes?: readonly WorkflowScope[];
   workflowCandidates?: readonly WorkflowCandidateRange[];
   workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[];
+  workflowLockedZones?: readonly WorkflowLockedZone[];
   activeWorkflowWorkItemId?: string | null;
   activeWorkflowScopeIds?: readonly string[];
   workflowMetadata?: readonly WorkflowMetadataMarkup[];

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

@@ -357,7 +357,10 @@ export function buildStructureContextSelectionToolModel(
       kind: "structure-context",
       structureKind: "table",
       badges,
-      tableStyles: input.styleCatalog.tables,
+      tableStyles: input.styleCatalog.tables.map((entry) => ({
+        styleId: entry.styleId,
+        displayName: entry.displayName,
+      })),
       activeTable: input.activeTableContext ?? null,
       canMutate,
       ...(disabledReason ? { disabledReason } : {}),