@beyondwork/docx-react-component 1.0.21 → 1.0.23

package/src/ui/editor-runtime-boundary.ts

@@ -718,7 +718,10 @@ function createLoadingRuntimeBridge(input: {
     subscribeToEvents: () => () => undefined,
     emitBlockedCommand: () => undefined,
     getRenderSnapshot: () => input.snapshot,
+    getCanonicalDocument: () => input.sessionState.canonicalDocument,
+    getSourcePackage: () => input.sessionState.sourcePackage,
     replaceText: () => undefined,
+    applyActiveStoryTextCommand: () => undefined,
     dispatch: () => undefined,
     undo: () => undefined,
     redo: () => undefined,
@@ -770,7 +773,7 @@ function createLoadingRuntimeBridge(input: {
     setWorkflowOverlay: () => undefined,
     clearWorkflowOverlay: () => undefined,
     getWorkflowScopeSnapshot: () => null,
-    getInteractionGuardSnapshot: () => ({ blockedReasons: [] }),
+    getInteractionGuardSnapshot: () => ({ effectiveMode: "edit", blockedReasons: [] }),
     getWorkflowMarkupSnapshot: () => ({
       totalCount: 0,
       items: [],
@@ -781,6 +784,12 @@ function createLoadingRuntimeBridge(input: {
       protectedRanges: [],
       opaqueFragments: [],
     }),
+    setHostAnnotationOverlay: () => undefined,
+    clearHostAnnotationOverlay: () => undefined,
+    getHostAnnotationSnapshot: () => ({
+      totalCount: 0,
+      annotations: [],
+    }),
     getWorkflowCandidateRanges: () => [],
     replaceWorkflowMarkupText: () => undefined,
   };

package/src/ui/editor-shell-view.tsx

@@ -7,6 +7,7 @@ import type {
   InteractionGuardSnapshot,
   RuntimeRenderSnapshot,
   StyleCatalogSnapshot,
+  WordReviewEditorChromeVisibility,
   WorkflowScopeSnapshot,
   WorkspaceMode,
   ZoomLevel,
@@ -16,6 +17,7 @@ import type { MarkupDisplay } from "./headless/comment-decoration-model.ts";
 import type {
   SelectionToolbarAnchor,
   SelectionToolbarModel,
+  SuggestionCardModel,
 } from "./headless/selection-toolbar-model.ts";
 import type { EditorCommandBag } from "./editor-command-bag.ts";
 import type { ReviewRailTab } from "../ui-tailwind/review/tw-review-rail.tsx";
@@ -56,17 +58,23 @@ export interface EditorShellViewProps {
   workflowScopeSnapshot?: WorkflowScopeSnapshot | null;
   interactionGuardSnapshot?: InteractionGuardSnapshot;
   selectionToolbar?: SelectionToolbarModel | null;
+  suggestionCard?: SuggestionCardModel | null;
   selectionToolbarAnchor?: SelectionToolbarAnchor | null;
   documentNavigation?: DocumentNavigationSnapshot;
   commands: EditorCommandBag;
   document: ReactNode;
   onAddCommentFromSelection?: () => void;
+  onAddCommentFromSuggestion?: () => void;
+  onAcceptSuggestion?: () => void;
+  onRejectSuggestion?: () => void;
+  onEditSuggestion?: () => void;
   onDismissSelectionToolbar?: () => void;
   onSelectionToolbarFocusCapture?: React.FocusEventHandler<HTMLDivElement>;
   onSelectionToolbarBlurCapture?: React.FocusEventHandler<HTMLDivElement>;
   selectionToolbarRef?: React.Ref<HTMLDivElement>;
   activeImageContext?: ActiveImageContext | null;
   activeObjectContext?: ActiveObjectContext | null;
+  chromeVisibility?: Partial<WordReviewEditorChromeVisibility>;
 }
 
 export function EditorShellView(props: EditorShellViewProps) {

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

@@ -40,11 +40,16 @@ export interface EditorSurfaceControllerProps {
   onOutdentTab?: () => void;
   onInsertHardBreak?: () => void;
   onSplitParagraph?: () => void;
+  onUndo?: () => void;
+  onRedo?: () => void;
+  onBlockedInput?: (command: "paste" | "drop", message: string) => void;
   onCommentActivated?: (commentId: string) => void;
   onRevisionActivated?: (revisionId: string) => void;
   workflowScopes?: readonly WorkflowScope[];
   workflowCandidates?: readonly WorkflowCandidateRange[];
   workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[];
+  activeWorkflowWorkItemId?: string | null;
+  activeWorkflowScopeIds?: readonly string[];
 }
 
 export const EditorSurfaceController = forwardRef<

package/src/ui/headless/selection-toolbar-model.ts

@@ -14,6 +14,18 @@ export interface SelectionToolbarModel {
   disabledReason?: string;
 }
 
+export interface SuggestionCardModel {
+  revisionId: string;
+  kindLabel: string;
+  previewText: string;
+  badges: SelectionToolbarBadge[];
+  canAccept: boolean;
+  canReject: boolean;
+  canEditSuggestion: boolean;
+  canAddComment: boolean;
+  disabledReason?: string;
+}
+
 export interface SelectionToolbarAnchor {
   left: number;
   right: number;

package/src/ui-tailwind/chrome/tw-suggestion-card.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import type { FocusEventHandler } from "react";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { Check, MessageSquare, Pencil, X } from "lucide-react";
+
+import type { SuggestionCardModel } from "../../ui/headless/selection-toolbar-model";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwSuggestionCardProps {
+  model: SuggestionCardModel;
+  onFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  onAccept?: () => void;
+  onReject?: () => void;
+  onEditSuggestion?: () => void;
+  onAddComment?: () => void;
+}
+
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
+
+export function TwSuggestionCard(props: TwSuggestionCardProps) {
+  const contextLabel = summarizeSuggestionContext(props.model);
+  const commentDisabled = !props.model.canAddComment;
+  const tooltipLabel = commentDisabled
+    ? props.model.disabledReason ?? "Commenting is unavailable for this selection"
+    : "Comment on suggestion";
+
+  return (
+    <div
+      data-testid="suggestion-card"
+      className="inline-flex max-w-[min(28rem,calc(100vw-2rem))] flex-col gap-2 rounded-2xl border border-border/80 bg-canvas px-3 py-2 shadow-xl ring-1 ring-border/80"
+      onFocusCapture={props.onFocusCapture}
+      onBlurCapture={props.onBlurCapture}
+      role="group"
+      aria-label="Suggestion actions"
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.12em] text-warning">
+            {props.model.kindLabel}
+          </div>
+          <div className="mt-1 max-w-[16rem] truncate text-sm text-primary">
+            {props.model.previewText}
+          </div>
+        </div>
+        {contextLabel ? (
+          <div className="shrink-0 rounded-full bg-accent-soft px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.08em] text-accent">
+            {contextLabel}
+          </div>
+        ) : null}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-1.5">
+        <SuggestionActionButton
+          icon={<Check className="h-3.5 w-3.5" />}
+          label="Accept suggestion"
+          disabled={!props.model.canAccept}
+          tone="accept"
+          onClick={props.onAccept}
+        />
+        <SuggestionActionButton
+          icon={<X className="h-3.5 w-3.5" />}
+          label="Reject suggestion"
+          disabled={!props.model.canReject}
+          tone="reject"
+          onClick={props.onReject}
+        />
+        <SuggestionActionButton
+          icon={<Pencil className="h-3.5 w-3.5" />}
+          label="Edit suggestion"
+          disabled={!props.model.canEditSuggestion}
+          tone="neutral"
+          onClick={props.onEditSuggestion}
+        />
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              aria-label="Comment on suggestion"
+              disabled={commentDisabled}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onAddComment}
+              className={`inline-flex h-8 items-center gap-1 rounded-lg border border-border px-2.5 text-xs font-medium text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
+            >
+              <MessageSquare className="h-3.5 w-3.5" />
+              Comment
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content
+              className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
+              sideOffset={6}
+            >
+              {tooltipLabel}
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      </div>
+    </div>
+  );
+}
+
+function summarizeSuggestionContext(model: SuggestionCardModel): string | null {
+  const labels = model.badges.map((badge) => badge.label.trim()).filter(Boolean);
+  if (labels.length === 0) {
+    return null;
+  }
+  const summary = labels.slice(0, 2).join(" · ");
+  return summary.length > 36 ? `${summary.slice(0, 33)}...` : summary;
+}
+
+function SuggestionActionButton(props: {
+  icon: React.ReactNode;
+  label: string;
+  disabled: boolean;
+  tone: "accept" | "reject" | "neutral";
+  onClick?: () => void;
+}) {
+  const toneClass = props.tone === "accept"
+    ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300"
+    : props.tone === "reject"
+      ? "border-rose-500/30 bg-rose-500/10 text-rose-700 hover:bg-rose-500/15 dark:text-rose-300"
+      : "border-border text-secondary hover:bg-surface";
+
+  return (
+    <button
+      type="button"
+      aria-label={props.label}
+      disabled={props.disabled}
+      onMouseDown={preserveEditorSelectionMouseDown}
+      onClick={props.onClick}
+      className={`inline-flex h-8 items-center gap-1 rounded-lg border px-2.5 text-xs font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${toneClass} ${focusRingClass}`}
+    >
+      {props.icon}
+      {props.label.replace(" suggestion", "").replace(" on suggestion", "")}
+    </button>
+  );
+}

package/src/ui-tailwind/editor-surface/pm-command-bridge.ts

@@ -19,6 +19,7 @@ export interface CommandBridgeCallbacks {
   onOutdentTab?: () => void;
   onUndo: () => void;
   onRedo: () => void;
+  onBlockedInput?: (command: "paste" | "drop", message: string) => void;
   onSelectionChange: (selection: SelectionSnapshot) => void;
   getPositionMap: () => PositionMap | null;
   isSelectionSyncSuppressed?: () => boolean;
@@ -100,17 +101,22 @@ export function createCommandBridgePlugins(
         },
       },
       handleTextInput(_view, _from, _to, text) {
+        if (isComposing) {
+          return true;
+        }
         callbacks.onInsertText(text);
         return true; // Block PM from processing
       },
 
       // Block paste (rich paste is not safe, plain paste via text.insert is TODO)
       handlePaste() {
+        callbacks.onBlockedInput?.("paste", "Paste is not supported in the mounted editor yet.");
         return true; // Block
       },
 
       // Block drop
       handleDrop() {
+        callbacks.onBlockedInput?.("drop", "Drag and drop is not supported in the mounted editor.");
         return true; // Block
       },
     },

package/src/ui-tailwind/editor-surface/pm-decorations.ts

@@ -21,18 +21,28 @@ type RailDecorationSpec = {
   attrs: Record<string, string>;
 };
 
-function getWorkflowInlineClass(scope: WorkflowScope): string {
-  if (scope.mode === "edit") return "wre-workflow-inline wre-workflow-inline-edit";
-  if (scope.mode === "suggest") return "wre-workflow-inline wre-workflow-inline-suggest";
-  if (scope.mode === "comment") return "wre-workflow-inline wre-workflow-inline-comment";
-  return "wre-workflow-inline wre-workflow-inline-view";
+function getWorkflowInlineClass(scope: WorkflowScope, isActiveWorkItem: boolean): string {
+  const base =
+    scope.mode === "edit"
+      ? "wre-workflow-inline wre-workflow-inline-edit"
+      : scope.mode === "suggest"
+        ? "wre-workflow-inline wre-workflow-inline-suggest"
+        : scope.mode === "comment"
+          ? "wre-workflow-inline wre-workflow-inline-comment"
+          : "wre-workflow-inline wre-workflow-inline-view";
+  return isActiveWorkItem ? `${base} wre-workflow-inline-active` : base;
 }
 
-function getWorkflowRailClass(scope: WorkflowScope): string {
-  if (scope.mode === "edit") return "wre-workflow-rail wre-workflow-rail-edit";
-  if (scope.mode === "suggest") return "wre-workflow-rail wre-workflow-rail-suggest";
-  if (scope.mode === "comment") return "wre-workflow-rail wre-workflow-rail-comment";
-  return "wre-workflow-rail wre-workflow-rail-view";
+function getWorkflowRailClass(scope: WorkflowScope, isActiveWorkItem: boolean): string {
+  const base =
+    scope.mode === "edit"
+      ? "wre-workflow-rail wre-workflow-rail-edit"
+      : scope.mode === "suggest"
+        ? "wre-workflow-rail wre-workflow-rail-suggest"
+        : scope.mode === "comment"
+          ? "wre-workflow-rail wre-workflow-rail-comment"
+          : "wre-workflow-rail wre-workflow-rail-view";
+  return isActiveWorkItem ? `${base} wre-workflow-rail-active` : base;
 }
 
 function getWorkflowCandidateInlineClass(): string {
@@ -142,8 +152,14 @@ function pushRailDecorations(
   from: number,
   to: number,
   spec: RailDecorationSpec,
+  rangeCache: Map<string, Array<{ from: number; to: number }>>,
 ): void {
-  for (const range of collectRailRanges(doc, from, to)) {
+  const cacheKey = `${from}:${to}`;
+  const ranges = rangeCache.get(cacheKey) ?? collectRailRanges(doc, from, to);
+  if (!rangeCache.has(cacheKey)) {
+    rangeCache.set(cacheKey, ranges);
+  }
+  for (const range of ranges) {
     decorations.push(
       Decoration.node(range.from, range.to, {
         class: spec.className,
@@ -172,8 +188,12 @@ export function buildDecorations(
   activeStory: EditorStoryTarget = MAIN_STORY_TARGET,
   workflowCandidates?: readonly WorkflowCandidateRange[],
   workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[],
+  activeWorkflowWorkItemId?: string | null,
+  activeWorkflowScopeIds?: readonly string[],
 ): DecorationSet {
   const decorations: Decoration[] = [];
+  const railRangeCache = new Map<string, Array<{ from: number; to: number }>>();
+  const activeScopeIds = new Set(activeWorkflowScopeIds ?? []);
 
   // Walk comment threads and create inline decorations
   if (commentModel) {
@@ -251,25 +271,33 @@ export function buildDecorations(
       if (!storyTargetsEqual(scopeStoryTarget, activeStory)) continue;
       const pmRange = buildAnchorPmRange(scope.anchor, positionMap);
       if (!pmRange) continue;
+      const isActiveWorkItem =
+        Boolean(activeWorkflowWorkItemId) &&
+        (
+          scope.workItemId === activeWorkflowWorkItemId ||
+          activeScopeIds.has(scope.scopeId)
+        );
 
       if (pmRange.allowInline && pmRange.from < pmRange.to) {
         decorations.push(
           Decoration.inline(pmRange.from, pmRange.to, {
-            class: getWorkflowInlineClass(scope),
+            class: getWorkflowInlineClass(scope, isActiveWorkItem),
             "data-workflow-scope-id": scope.scopeId,
             "data-workflow-scope-mode": scope.mode,
+            "data-workflow-active": isActiveWorkItem ? "true" : "false",
           }),
         );
       }
 
       pushRailDecorations(decorations, doc, pmRange.from, pmRange.to, {
         railKind: "scope",
-        className: getWorkflowRailClass(scope),
+        className: getWorkflowRailClass(scope, isActiveWorkItem),
         attrs: {
           "data-workflow-scope-id": scope.scopeId,
           "data-workflow-scope-mode": scope.mode,
+          "data-workflow-active": isActiveWorkItem ? "true" : "false",
         },
-      });
+      }, railRangeCache);
     }
   }
 
@@ -295,7 +323,7 @@ export function buildDecorations(
         attrs: {
           "data-workflow-candidate-id": candidate.candidateId,
         },
-      });
+      }, railRangeCache);
     }
   }
 
@@ -327,7 +355,7 @@ export function buildDecorations(
         attrs: {
           "data-workflow-blocked-code": reason.code,
         },
-      });
+      }, railRangeCache);
     }
   }
 

package/src/ui-tailwind/editor-surface/pm-state-from-snapshot.ts

@@ -383,6 +383,8 @@ function buildTable(
     }
     rows.push(editorSchema.nodes.table_row.create(
       {
+        gridBefore: row.gridBefore ?? 0,
+        gridAfter: row.gridAfter ?? 0,
         height: row.height ?? null,
         heightRule: row.heightRule ?? null,
         isHeader: row.isHeader ?? false,

package/src/ui-tailwind/editor-surface/surface-build-keys.ts

@@ -41,6 +41,8 @@ export function createSurfaceDecorationKey(input: {
   workflowScopeSignature?: string;
   workflowCandidateSignature?: string;
   workflowBlockedSignature?: string;
+  activeWorkflowWorkItemId?: string | null;
+  activeWorkflowScopeIds?: readonly string[];
 }): string {
   return JSON.stringify({
     markupDisplay: input.markupDisplay,
@@ -51,5 +53,7 @@ export function createSurfaceDecorationKey(input: {
     workflowScopeSignature: input.workflowScopeSignature ?? null,
     workflowCandidateSignature: input.workflowCandidateSignature ?? null,
     workflowBlockedSignature: input.workflowBlockedSignature ?? null,
+    activeWorkflowWorkItemId: input.activeWorkflowWorkItemId ?? null,
+    activeWorkflowScopeIds: input.activeWorkflowScopeIds ?? [],
   });
 }

package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx

@@ -87,6 +87,9 @@ export interface TwProseMirrorSurfaceProps {
   onOutdentTab?: () => void;
   onInsertHardBreak?: () => void;
   onSplitParagraph?: () => void;
+  onUndo?: () => void;
+  onRedo?: () => void;
+  onBlockedInput?: (command: "paste" | "drop", message: string) => void;
   onCommentActivated?: (commentId: string) => void;
   onRevisionActivated?: (revisionId: string) => void;
   onSelectionToolbarAnchorChange?: (anchor: SelectionToolbarAnchor | null) => void;
@@ -94,6 +97,8 @@ export interface TwProseMirrorSurfaceProps {
   workflowScopes?: readonly WorkflowScope[];
   workflowCandidates?: readonly WorkflowCandidateRange[];
   workflowBlockedReasons?: readonly WorkflowBlockedCommandReason[];
+  activeWorkflowWorkItemId?: string | null;
+  activeWorkflowScopeIds?: readonly string[];
 }
 
 export interface TwProseMirrorSurfaceRef {
@@ -161,8 +166,11 @@ export const TwProseMirrorSurface = forwardRef<
     onInsertHardBreak: () => props.onInsertHardBreak?.(),
     onInsertTab: () => props.onInsertTab?.(),
     onOutdentTab: () => props.onOutdentTab?.(),
-    onUndo: () => {}, // Handled by toolbar, not PM
-    onRedo: () => {}, // Handled by toolbar, not PM
+    onUndo: () => props.onUndo?.(),
+    onRedo: () => props.onRedo?.(),
+    onBlockedInput: (command, message) => {
+      props.onBlockedInput?.(command, message);
+    },
     onSelectionChange: (sel) => {
       pendingSelectionProbeRef.current = startPerfProbe("selection");
       props.onSelectionChange?.(
@@ -204,9 +212,11 @@ export const TwProseMirrorSurface = forwardRef<
         canEdit,
         activeCommentId: snapshot.comments.activeCommentId,
         activeRevisionId: props.activeRevisionId,
-        workflowScopeSignature: JSON.stringify(props.workflowScopes ?? []),
-        workflowCandidateSignature: JSON.stringify(props.workflowCandidates ?? []),
-        workflowBlockedSignature: JSON.stringify(props.workflowBlockedReasons ?? []),
+        workflowScopeSignature: createWorkflowScopeSignature(props.workflowScopes),
+        workflowCandidateSignature: createWorkflowCandidateSignature(props.workflowCandidates),
+        workflowBlockedSignature: createWorkflowBlockedSignature(props.workflowBlockedReasons),
+        activeWorkflowWorkItemId: props.activeWorkflowWorkItemId ?? null,
+        activeWorkflowScopeIds: props.activeWorkflowScopeIds ?? [],
       }),
     [
       canEdit,
@@ -214,6 +224,8 @@ export const TwProseMirrorSurface = forwardRef<
       props.activeRevisionId,
       props.workflowCandidates,
       props.workflowBlockedReasons,
+      props.activeWorkflowWorkItemId,
+      props.activeWorkflowScopeIds,
       props.workflowScopes,
       showTrackedChanges,
       snapshot.comments.activeCommentId,
@@ -233,6 +245,7 @@ export const TwProseMirrorSurface = forwardRef<
         onOutdentTab: () => callbacksRef.current?.onOutdentTab?.(),
         onUndo: () => callbacksRef.current?.onUndo(),
         onRedo: () => callbacksRef.current?.onRedo(),
+        onBlockedInput: (command, message) => callbacksRef.current?.onBlockedInput?.(command, message),
         onSelectionChange: (sel) => callbacksRef.current?.onSelectionChange(sel),
         getPositionMap: () => callbacksRef.current?.getPositionMap() ?? null,
         isSelectionSyncSuppressed: () =>
@@ -259,6 +272,8 @@ export const TwProseMirrorSurface = forwardRef<
         snapshot.activeStory,
         props.workflowCandidates,
         props.workflowBlockedReasons,
+        props.activeWorkflowWorkItemId,
+        props.activeWorkflowScopeIds,
       );
       view.setProps({
         editable: () => canEdit,
@@ -273,13 +288,13 @@ export const TwProseMirrorSurface = forwardRef<
       commentModel,
       decorationBuildKey,
       markupDisplay,
-      revisionModel,
-      showTrackedChanges,
+      props.activeWorkflowScopeIds,
+      props.activeWorkflowWorkItemId,
       props.workflowBlockedReasons,
       props.workflowCandidates,
       props.workflowScopes,
-      props.workflowCandidates,
-      props.workflowBlockedReasons,
+      revisionModel,
+      showTrackedChanges,
     ],
   );
 
@@ -309,6 +324,8 @@ export const TwProseMirrorSurface = forwardRef<
       snapshot.activeStory,
       props.workflowCandidates,
       props.workflowBlockedReasons,
+      props.activeWorkflowWorkItemId,
+      props.activeWorkflowScopeIds,
     );
     recordPerfSample("pm.rebuild");
     incrementInvalidationCounter("pm.laneA.rebuilds");
@@ -371,6 +388,20 @@ export const TwProseMirrorSurface = forwardRef<
     applyDecorationProps(view, positionMap);
   }, [applyDecorationProps, decorationBuildKey, surface]);
 
+  useEffect(() => {
+    if (!activeSearchRef.current || !surface) {
+      return;
+    }
+    applySearch(activeSearchRef.current.query, activeSearchRef.current.options);
+  }, [
+    markupDisplay,
+    props.canonicalDocument,
+    props.documentNavigation,
+    snapshot.activeStory,
+    snapshot.trackedChanges,
+    surface,
+  ]);
+
   useEffect(() => {
     const view = viewRef.current;
     const positionMap = positionMapRef.current;
@@ -442,7 +473,15 @@ export const TwProseMirrorSurface = forwardRef<
         return getTableSelectionDescriptor(view.state);
       },
     }),
-    [snapshot.selection, snapshot.surface],
+    [
+      markupDisplay,
+      props.canonicalDocument,
+      props.documentNavigation,
+      snapshot.activeStory,
+      snapshot.selection,
+      snapshot.surface,
+      snapshot.trackedChanges,
+    ],
   );
 
   function applySearch(query: string, options: SearchOptions): SearchResultSnapshot[] {
@@ -788,6 +827,84 @@ export const TwProseMirrorSurface = forwardRef<
   }
 });
 
+function createWorkflowScopeSignature(scopes: readonly WorkflowScope[] | undefined): string {
+  if (!scopes || scopes.length === 0) {
+    return "";
+  }
+  return scopes.map((scope) =>
+    [
+      scope.scopeId,
+      scope.mode,
+      scope.workItemId ?? "",
+      serializeAnchorSignature(scope.anchor),
+      serializeStoryTargetSignature(scope.storyTarget),
+    ].join(":")
+  ).join("|");
+}
+
+function createWorkflowCandidateSignature(
+  candidates: readonly WorkflowCandidateRange[] | undefined,
+): string {
+  if (!candidates || candidates.length === 0) {
+    return "";
+  }
+  return candidates.map((candidate) =>
+    [
+      candidate.candidateId,
+      serializeAnchorSignature(candidate.anchor),
+      serializeStoryTargetSignature(candidate.storyTarget),
+      candidate.source ?? "",
+    ].join(":")
+  ).join("|");
+}
+
+function createWorkflowBlockedSignature(
+  blockedReasons: readonly WorkflowBlockedCommandReason[] | undefined,
+): string {
+  if (!blockedReasons || blockedReasons.length === 0) {
+    return "";
+  }
+  return blockedReasons.map((reason) =>
+    [
+      reason.code,
+      reason.scopeId ?? "",
+      reason.workItemId ?? "",
+      serializeAnchorSignature(reason.anchor),
+      serializeStoryTargetSignature(reason.storyTarget),
+    ].join(":")
+  ).join("|");
+}
+
+function serializeAnchorSignature(anchor: WorkflowScope["anchor"] | WorkflowCandidateRange["anchor"] | WorkflowBlockedCommandReason["anchor"] | undefined): string {
+  if (!anchor) {
+    return "";
+  }
+  switch (anchor.kind) {
+    case "range":
+      return `range:${anchor.from}:${anchor.to}:${anchor.assoc.start}:${anchor.assoc.end}`;
+    case "node":
+      return `node:${anchor.at}:${anchor.assoc}`;
+    case "detached":
+      return `detached:${anchor.lastKnownRange.from}:${anchor.lastKnownRange.to}:${anchor.reason}`;
+  }
+}
+
+function serializeStoryTargetSignature(storyTarget: WorkflowScope["storyTarget"] | WorkflowCandidateRange["storyTarget"] | WorkflowBlockedCommandReason["storyTarget"]): string {
+  if (!storyTarget) {
+    return "";
+  }
+  switch (storyTarget.kind) {
+    case "main":
+      return "main";
+    case "header":
+    case "footer":
+      return `${storyTarget.kind}:${storyTarget.relationshipId}:${storyTarget.variant}:${storyTarget.sectionIndex ?? ""}`;
+    case "footnote":
+    case "endnote":
+      return `${storyTarget.kind}:${storyTarget.noteId}`;
+  }
+}
+
 function buildSelectionToolbarMeasurementKey(
   selection: SelectionSnapshot,
   activeStory: RuntimeRenderSnapshot["activeStory"],