@beyondwork/docx-react-component 1.0.19 → 1.0.20

package/src/ui-tailwind/tw-review-workspace.tsx

@@ -18,10 +18,17 @@ import type {
   DocumentNavigationSnapshot,
   EditorViewStateSnapshot,
   FormattingStateSnapshot,
+  FormattingAlignment,
+  HeaderFooterLinkPatch,
+  InteractionGuardSnapshot,
+  InsertImageOptions,
   RuntimeRenderSnapshot,
+  SectionPageNumberingPatch,
+  SectionBreakType,
   StyleCatalogSnapshot,
   SurfaceBlockSnapshot,
   TrackedChangeEntrySnapshot,
+  WorkflowScopeSnapshot,
   WorkspaceMode,
   ZoomLevel,
 } from "../api/public-types";
@@ -33,16 +40,26 @@ import {
   estimateParagraphLineHeight,
   getUsableColumnWidth,
 } from "../runtime/page-layout-estimation.ts";
+import {
+  incrementInvalidationCounter,
+  recordPerfSample,
+} from "./editor-surface/perf-probe.ts";
+import { computeLineMarkersIfEnabled } from "./page-chrome-model.ts";
 import type { SessionCapabilities } from "../runtime/session-capabilities";
 import type {
   SelectionToolbarAnchor,
   SelectionToolbarModel,
 } from "../ui/headless/selection-toolbar-model";
 import type { MarkupDisplay } from "../ui/headless/comment-decoration-model";
+import type { EditorCommandBag } from "../ui/editor-command-bag.ts";
 import { preserveEditorSelectionMouseDown } from "../ui/headless/preserve-editor-selection";
 import { TwAlertBanner } from "./chrome/tw-alert-banner";
+import { TwImageContextToolbar, type ActiveImageContext } from "./chrome/tw-image-context-toolbar";
+import { TwLayoutPanel } from "./chrome/tw-layout-panel";
+import { TwObjectContextToolbar, type ActiveObjectContext } from "./chrome/tw-object-context-toolbar";
 import { TwPageRuler } from "./chrome/tw-page-ruler";
 import { TwSelectionToolbar } from "./chrome/tw-selection-toolbar";
+import { TwTableContextToolbar } from "./chrome/tw-table-context-toolbar";
 import { TwReviewRail, type ReviewRailTab } from "./review/tw-review-rail";
 import { TwStatusBar } from "./status/tw-status-bar";
 import { TwToolbar } from "./toolbar/tw-toolbar";
@@ -50,6 +67,7 @@ import { TwToolbar } from "./toolbar/tw-toolbar";
 export interface TwReviewWorkspaceProps {
   snapshot: RuntimeRenderSnapshot;
   viewState: EditorViewStateSnapshot;
+  markupDisplay: MarkupDisplay;
   currentUserId?: string;
   capabilities?: SessionCapabilities;
   reviewMode?: "editing" | "review";
@@ -62,38 +80,109 @@ export interface TwReviewWorkspaceProps {
   activeCommentId?: string;
   activeRevisionId?: string;
   showTrackedChanges: boolean;
+  workflowScopeSnapshot?: WorkflowScopeSnapshot | null;
+  interactionGuardSnapshot?: InteractionGuardSnapshot;
+  commands: EditorCommandBag;
   selectionToolbar?: SelectionToolbarModel | null;
   selectionToolbarAnchor?: SelectionToolbarAnchor | null;
   documentNavigation?: DocumentNavigationSnapshot;
-  onWorkspaceModeChange: (value: WorkspaceMode) => void;
+  onWorkspaceModeChange?: (value: WorkspaceMode) => void;
   onZoomChange?: (level: ZoomLevel) => void;
-  onActiveRailTabChange: (value: ReviewRailTab) => void;
-  onShowTrackedChangesChange: (show: boolean) => void;
-  onUndo: () => void;
-  onRedo: () => void;
+  onActiveRailTabChange?: (value: ReviewRailTab) => void;
+  onShowTrackedChangesChange?: (show: boolean) => void;
+  onUndo?: () => void;
+  onRedo?: () => void;
   onSetParagraphStyle?: (styleId: string) => void;
   onToggleBold?: () => void;
   onToggleItalic?: () => void;
   onToggleUnderline?: () => void;
+  onSetSelectionTextColor?: (color: string) => void;
+  onSetSelectionHighlightColor?: (color: string | null) => void;
+  onToggleStrikethrough?: () => void;
+  onToggleSuperscript?: () => void;
+  onToggleSubscript?: () => void;
+  onSetFontFamily?: (fontFamily: string) => void;
+  onSetFontSize?: (fontSize: number) => void;
+  onSetTextColor?: (color: string) => void;
+  onSetHighlightColor?: (color: string | null) => void;
+  onSetAlignment?: (alignment: FormattingAlignment) => void;
   onOutdent?: () => void;
   onIndent?: () => void;
-  onAddComment: () => void;
+  onAddComment?: () => void;
+  onInsertPageBreak?: () => void;
+  onInsertTable?: () => void;
+  onInsertSectionBreak?: (type: SectionBreakType) => void;
+  onInsertImage?: (options: InsertImageOptions) => void;
+  onSetTableStyle?: (styleId: string) => void;
+  onAddRowBefore?: () => void;
+  onAddRowAfter?: () => void;
+  onAddColumnBefore?: () => void;
+  onAddColumnAfter?: () => void;
+  onDeleteRow?: () => void;
+  onDeleteColumn?: () => void;
+  onDeleteTable?: () => void;
+  onMergeCells?: () => void;
+  onSplitCell?: () => void;
+  onSetCellBackground?: (color: string) => void;
+  activeImageContext?: ActiveImageContext | null;
+  activeObjectContext?: ActiveObjectContext | null;
+  onSetImageLayout?: (
+    mediaId: string,
+    dimensions: { widthEmu: number; heightEmu: number },
+  ) => void;
+  onSetImageFrame?: (
+    mediaId: string,
+    offsets: { horizontalOffsetEmu?: number; verticalOffsetEmu?: number },
+  ) => void;
+  onDeleteSectionBreak?: (sectionIndex: number) => void;
+  onUpdateSectionLayout?: (
+    sectionIndex: number,
+    patch: {
+      pageSize?: { width?: number; height?: number; orientation?: "portrait" | "landscape" };
+      pageMargins?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+        header?: number;
+        footer?: number;
+        gutter?: number;
+      };
+      columns?: {
+        count?: number;
+        space?: number;
+        equalWidth?: boolean;
+        columns?: Array<{ width: number; space?: number }>;
+        separator?: boolean;
+      };
+      titlePage?: boolean;
+      sectionType?: SectionBreakType;
+    },
+  ) => void;
+  onSetSectionPageNumbering?: (
+    sectionIndex: number,
+    patch: SectionPageNumberingPatch | null,
+  ) => void;
+  onSetHeaderFooterLink?: (
+    sectionIndex: number,
+    patch: HeaderFooterLinkPatch,
+  ) => void;
   onAddCommentFromSelection?: () => void;
-  onExport: () => void;
+  onExport?: () => void;
   onDismissSelectionToolbar?: () => void;
   onSelectionToolbarFocusCapture?: FocusEventHandler<HTMLDivElement>;
   onSelectionToolbarBlurCapture?: FocusEventHandler<HTMLDivElement>;
   selectionToolbarRef?: Ref<HTMLDivElement>;
-  onOpenComment: (thread: CommentSidebarThreadSnapshot) => void;
-  onResolveComment: (commentId: string) => void;
+  onOpenComment?: (thread: CommentSidebarThreadSnapshot) => void;
+  onResolveComment?: (commentId: string) => void;
   onReopenComment?: (commentId: string) => void;
   onAddReply?: (commentId: string, body: string) => void;
   onEditBody?: (commentId: string, body: string) => void;
-  onOpenRevision: (revision: TrackedChangeEntrySnapshot) => void;
-  onAcceptRevision: (revisionId: string) => void;
-  onRejectRevision: (revisionId: string) => void;
-  onAcceptAllChanges: () => void;
-  onRejectAllChanges: () => void;
+  onOpenRevision?: (revision: TrackedChangeEntrySnapshot) => void;
+  onAcceptRevision?: (revisionId: string) => void;
+  onRejectRevision?: (revisionId: string) => void;
+  onAcceptAllChanges?: () => void;
+  onRejectAllChanges?: () => void;
   onCloseStory?: () => void;
   onOpenHeaderStory?: () => void;
   onOpenFooterStory?: () => void;
@@ -109,12 +198,16 @@ export interface TwReviewWorkspaceProps {
   onNavigateHeading?: (headingId: string) => void;
 }
 
-export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
+export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
+  const props = {
+    ...inputProps,
+    ...inputProps.commands,
+  } as TwReviewWorkspaceProps & EditorCommandBag;
   const { snapshot, viewState } = props;
   const selectionToolbarRootRef = useRef<HTMLDivElement>(null);
   const caps = props.capabilities;
   const isPageWorkspace = props.workspaceMode === "page";
-  const markupDisplay: MarkupDisplay = isPageWorkspace ? "all" : "clean";
+  const markupDisplay = props.markupDisplay;
   const [navOpen, setNavOpen] = useState(false);
   const [layoutToolsOpen, setLayoutToolsOpen] = useState(false);
   const zoomLevel = props.zoomLevel ?? 100;
@@ -123,13 +216,33 @@ export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
     snapshot.compatibility.featureEntries.filter(
       (entry) => entry.featureClass === "preserve-only",
     ).length;
+  const blockedReasons =
+    props.interactionGuardSnapshot?.blockedReasons ??
+    props.workflowScopeSnapshot?.blockedReasons ??
+    [];
   const showReviewRail = caps?.reviewRailVisible ?? true;
   const headings = props.documentNavigation?.headings ?? [];
+  const headerVariant = snapshot.pageLayout?.headerVariants[0]?.variant ?? "default";
+  const footerVariant = snapshot.pageLayout?.footerVariants[0]?.variant ?? "default";
   const selectionPosition =
     viewState.selection.activeRange.kind === "node"
       ? viewState.selection.activeRange.at
       : viewState.selection.head;
-  const activeParagraphLayout = resolveActiveParagraphLayout(snapshot.surface, selectionPosition);
+  const activeParagraphLayout = useMemo(
+    () => resolveActiveParagraphLayout(snapshot.surface, selectionPosition),
+    [selectionPosition, snapshot.surface],
+  );
+  const isTableContext = Boolean(
+    props.formattingState?.breadcrumb.some((item) => item.kind === "table" || item.kind === "table_cell" || item.kind === "table_row"),
+  );
+  const contextualSurface =
+    props.activeImageContext
+      ? "image"
+      : props.activeObjectContext
+        ? "object"
+        : isTableContext
+          ? "table"
+          : null;
   const pageChromeModel = useMemo(
     () =>
       buildPageChromeModel(
@@ -155,6 +268,11 @@ export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
     snapshot.activeStory.kind === "main" &&
     shouldHidePageBorderForSelection(viewState.selection);
 
+  useEffect(() => {
+    recordPerfSample("workspace.chrome");
+    incrementInvalidationCounter("workspace.chrome.recomputes");
+  }, [activeParagraphLayout, pageChromeModel, pageShellMetrics]);
+
   useEffect(() => {
     if (isPageWorkspace && snapshot.activeStory.kind !== "main") {
       setLayoutToolsOpen(true);
@@ -197,9 +315,56 @@ export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
           onToggleBold={runWithSelectionToolbarDismiss(props.onToggleBold)}
           onToggleItalic={runWithSelectionToolbarDismiss(props.onToggleItalic)}
           onToggleUnderline={runWithSelectionToolbarDismiss(props.onToggleUnderline)}
+          onToggleStrikethrough={runWithSelectionToolbarDismiss(props.onToggleStrikethrough)}
+          onToggleSuperscript={runWithSelectionToolbarDismiss(props.onToggleSuperscript)}
+          onToggleSubscript={runWithSelectionToolbarDismiss(props.onToggleSubscript)}
+          onSetFontFamily={props.onSetFontFamily
+            ? (fontFamily) => {
+              dismissSelectionToolbar();
+              props.onSetFontFamily?.(fontFamily);
+            }
+            : undefined}
+          onSetFontSize={props.onSetFontSize
+            ? (fontSize) => {
+              dismissSelectionToolbar();
+              props.onSetFontSize?.(fontSize);
+            }
+            : undefined}
+          onSetTextColor={props.onSetTextColor
+            ? (color) => {
+              dismissSelectionToolbar();
+              props.onSetTextColor?.(color);
+            }
+            : undefined}
+          onSetHighlightColor={props.onSetHighlightColor
+            ? (color) => {
+              dismissSelectionToolbar();
+              props.onSetHighlightColor?.(color);
+            }
+            : undefined}
+          onSetAlignment={props.onSetAlignment
+            ? (alignment) => {
+              dismissSelectionToolbar();
+              props.onSetAlignment?.(alignment);
+            }
+            : undefined}
           onOutdent={runWithSelectionToolbarDismiss(props.onOutdent)}
           onIndent={runWithSelectionToolbarDismiss(props.onIndent)}
           onAddComment={runWithSelectionToolbarDismiss(props.onAddComment)}
+          onInsertPageBreak={runWithSelectionToolbarDismiss(props.onInsertPageBreak)}
+          onInsertTable={runWithSelectionToolbarDismiss(props.onInsertTable)}
+          onInsertSectionBreak={props.onInsertSectionBreak
+            ? (type) => {
+              dismissSelectionToolbar();
+              props.onInsertSectionBreak?.(type);
+            }
+            : undefined}
+          onInsertImage={props.onInsertImage
+            ? (options) => {
+              dismissSelectionToolbar();
+              props.onInsertImage?.(options);
+            }
+            : undefined}
           onExport={runWithSelectionToolbarDismiss(props.onExport)}
           activeStory={snapshot.activeStory}
           onCloseStory={props.onCloseStory
@@ -219,9 +384,14 @@ export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
             dismissSelectionToolbar();
             props.onShowTrackedChangesChange(show);
           }}
+          blockedReasons={blockedReasons}
         />
 
-        <TwAlertBanner snapshot={snapshot} preserveOnlyCount={preserveOnlyCount} />
+        <TwAlertBanner
+          snapshot={snapshot}
+          preserveOnlyCount={preserveOnlyCount}
+          workflowBlockedReasons={blockedReasons}
+        />
 
         <div className="flex flex-1 min-h-0">
           {/* Collapsible document navigator — page mode only */}
@@ -356,6 +526,44 @@ export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
                             Body
                           </button>
                         ) : null}
+                        {snapshot.activeStory.kind === "main" && snapshot.pageLayout.sectionIndex > 0 ? (
+                          <>
+                            <button
+                              type="button"
+                              aria-label="Link header to previous"
+                              disabled={!props.onSetHeaderFooterLink}
+                              onMouseDown={preserveEditorSelectionMouseDown}
+                              onClick={() => {
+                                dismissSelectionToolbar();
+                                props.onSetHeaderFooterLink?.(snapshot.pageLayout!.sectionIndex, {
+                                  kind: "header",
+                                  variant: headerVariant,
+                                  linkToPrevious: true,
+                                });
+                              }}
+                              className="inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
+                            >
+                              Link header
+                            </button>
+                            <button
+                              type="button"
+                              aria-label="Link footer to previous"
+                              disabled={!props.onSetHeaderFooterLink}
+                              onMouseDown={preserveEditorSelectionMouseDown}
+                              onClick={() => {
+                                dismissSelectionToolbar();
+                                props.onSetHeaderFooterLink?.(snapshot.pageLayout!.sectionIndex, {
+                                  kind: "footer",
+                                  variant: footerVariant,
+                                  linkToPrevious: true,
+                                });
+                              }}
+                              className="inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
+                            >
+                              Link footer
+                            </button>
+                          </>
+                        ) : null}
                         <button
                           type="button"
                           aria-label="Toggle layout tools"
@@ -409,6 +617,86 @@ export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
                         ? runWithSelectionToolbarDismiss(props.onContinueNumbering)
                         : undefined}
                     />
+                    <TwLayoutPanel
+                      pageLayout={snapshot.pageLayout}
+                      readOnly={snapshot.readOnly || snapshot.activeStory.kind !== "main"}
+                      onInsertSectionBreak={props.onInsertSectionBreak
+                        ? (type) => {
+                          dismissSelectionToolbar();
+                          props.onInsertSectionBreak?.(type);
+                        }
+                        : undefined}
+                      onDeleteSectionBreak={props.onDeleteSectionBreak
+                        ? (sectionIndex) => {
+                          dismissSelectionToolbar();
+                          props.onDeleteSectionBreak?.(sectionIndex);
+                        }
+                        : undefined}
+                      onUpdateSectionLayout={props.onUpdateSectionLayout
+                        ? (sectionIndex, patch) => {
+                          dismissSelectionToolbar();
+                          props.onUpdateSectionLayout?.(sectionIndex, patch);
+                        }
+                        : undefined}
+                      onSetSectionPageNumbering={props.onSetSectionPageNumbering
+                        ? (sectionIndex, patch) => {
+                          dismissSelectionToolbar();
+                          props.onSetSectionPageNumbering?.(sectionIndex, patch);
+                        }
+                        : undefined}
+                    />
+                  </div>
+                ) : null}
+                {contextualSurface ? (
+                  <div className="px-5 pt-3 space-y-3">
+                    {contextualSurface === "table" ? (
+                      <TwTableContextToolbar
+                        disabled={!caps?.canEdit}
+                        tableStyles={props.styleCatalog?.tables ?? []}
+                        onSetTableStyle={props.onSetTableStyle
+                          ? (styleId) => {
+                            dismissSelectionToolbar();
+                            props.onSetTableStyle?.(styleId);
+                          }
+                          : undefined}
+                        onAddRowBefore={runWithSelectionToolbarDismiss(props.onAddRowBefore)}
+                        onAddRowAfter={runWithSelectionToolbarDismiss(props.onAddRowAfter)}
+                        onAddColumnBefore={runWithSelectionToolbarDismiss(props.onAddColumnBefore)}
+                        onAddColumnAfter={runWithSelectionToolbarDismiss(props.onAddColumnAfter)}
+                        onDeleteRow={runWithSelectionToolbarDismiss(props.onDeleteRow)}
+                        onDeleteColumn={runWithSelectionToolbarDismiss(props.onDeleteColumn)}
+                        onDeleteTable={runWithSelectionToolbarDismiss(props.onDeleteTable)}
+                        onMergeCells={runWithSelectionToolbarDismiss(props.onMergeCells)}
+                        onSplitCell={runWithSelectionToolbarDismiss(props.onSplitCell)}
+                        onSetCellBackground={props.onSetCellBackground
+                          ? (color) => {
+                            dismissSelectionToolbar();
+                            props.onSetCellBackground?.(color);
+                          }
+                          : undefined}
+                      />
+                    ) : null}
+                    {contextualSurface === "image" && props.activeImageContext ? (
+                      <TwImageContextToolbar
+                        activeImage={props.activeImageContext}
+                        disabled={!caps?.canEdit}
+                        onSetImageLayout={props.onSetImageLayout
+                          ? (mediaId, dimensions) => {
+                            dismissSelectionToolbar();
+                            props.onSetImageLayout?.(mediaId, dimensions);
+                          }
+                          : undefined}
+                        onSetImageFrame={props.onSetImageFrame
+                          ? (mediaId, offsets) => {
+                            dismissSelectionToolbar();
+                            props.onSetImageFrame?.(mediaId, offsets);
+                          }
+                          : undefined}
+                      />
+                    ) : null}
+                    {contextualSurface === "object" && props.activeObjectContext ? (
+                      <TwObjectContextToolbar activeObject={props.activeObjectContext} />
+                    ) : null}
                   </div>
                 ) : null}
                 {props.selectionToolbar && selectionToolbarPlacement ? (
@@ -427,6 +715,8 @@ export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
                         onToggleBold={props.onToggleBold}
                         onToggleItalic={props.onToggleItalic}
                         onToggleUnderline={props.onToggleUnderline}
+                        onSetTextColor={props.onSetSelectionTextColor}
+                        onSetHighlightColor={props.onSetSelectionHighlightColor}
                         onAddComment={props.onAddCommentFromSelection ?? props.onAddComment}
                       />
                     </div>
@@ -447,6 +737,8 @@ export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
                         onToggleBold={props.onToggleBold}
                         onToggleItalic={props.onToggleItalic}
                         onToggleUnderline={props.onToggleUnderline}
+                        onSetTextColor={props.onSetSelectionTextColor}
+                        onSetHighlightColor={props.onSetSelectionHighlightColor}
                         onAddComment={props.onAddCommentFromSelection ?? props.onAddComment}
                       />
                     </div>
@@ -686,7 +978,12 @@ function buildPageChromeModel(
     return EMPTY_PAGE_CHROME_MODEL;
   }
 
-  const lineMarkers = buildLineNumberMarkers(surface.blocks, navigation.pages);
+  const lineMarkers = computeLineMarkersIfEnabled({
+    pageLayout,
+    surfaceBlocks: surface.blocks,
+    pages: navigation.pages,
+    buildLineNumberMarkers,
+  });
   const lineNumberingEnabled =
     Boolean(pageLayout.lineNumbering) && lineMarkers.length > 0;
   const distance = pageLayout.lineNumbering?.distance ?? 0;

package/src/validation/compatibility-engine.ts

@@ -479,6 +479,15 @@ function collectLossyBlocks(
   const issues: string[] = [];
 
   for (const block of blocks) {
+    if (block.type === "table") {
+      for (const row of block.rows) {
+        for (const cell of row.cells) {
+          issues.push(...collectLossyBlocks(cell.children, `${surface}:table-cell`));
+        }
+      }
+      continue;
+    }
+
     if (block.type !== "paragraph") {
       issues.push(`${surface}:${block.type}`);
       continue;
@@ -486,9 +495,6 @@ function collectLossyBlocks(
 
     if (
       block.numbering !== undefined ||
-      block.spacing !== undefined ||
-      block.indentation !== undefined ||
-      block.tabStops !== undefined ||
       block.keepNext !== undefined ||
       block.keepLines !== undefined ||
       block.outlineLevel !== undefined ||
@@ -517,6 +523,8 @@ function collectLossyInlineContent(
 ): string[] {
   switch (node.type) {
     case "text": {
+      const allowSecondaryStoryColorMarks =
+        surface.startsWith("header:") || surface.startsWith("footer:");
       const unsupportedMarks = (node.marks ?? [])
         .filter(
           (mark) =>
@@ -524,7 +532,14 @@ function collectLossyInlineContent(
             mark.type !== "italic" &&
             mark.type !== "underline" &&
             mark.type !== "strikethrough" &&
-            mark.type !== "doubleStrikethrough",
+            mark.type !== "doubleStrikethrough" &&
+            mark.type !== "fontFamily" &&
+            mark.type !== "fontSize" &&
+            mark.type !== "textColor" &&
+            (!allowSecondaryStoryColorMarks || mark.type !== "backgroundColor") &&
+            (!allowSecondaryStoryColorMarks || mark.type !== "highlight") &&
+            mark.type !== "smallCaps" &&
+            mark.type !== "allCaps",
         )
         .map((mark) => `${surface}:mark:${mark.type}`);
       return unsupportedMarks;
@@ -532,6 +547,14 @@ function collectLossyInlineContent(
     case "tab":
     case "hard_break":
     case "footnote_ref":
+    case "field":
+    case "bookmark_start":
+    case "bookmark_end":
+    case "shape":
+    case "wordart":
+    case "vml_shape":
+    case "chart_preview":
+    case "smartart_preview":
       return [];
     default:
       return [`${surface}:${node.type}`];

package/src/validation/compatibility-report.ts

@@ -44,6 +44,7 @@ export const COMPATIBILITY_FEATURE_KEYS = [
   "unknown-package-parts",
   "package-integrity",
   "relationship-integrity",
+  "workflow-scopes",
 ] as const;
 
 export type CompatibilityFeatureKey =