@beyondwork/docx-react-component 1.0.22 → 1.0.24-rc

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

@@ -28,6 +28,7 @@ import type {
   StyleCatalogSnapshot,
   SurfaceBlockSnapshot,
   TrackedChangeEntrySnapshot,
+  WordReviewEditorChromeVisibility,
   WorkflowScopeSnapshot,
   WorkspaceMode,
   ZoomLevel,
@@ -49,6 +50,7 @@ import type { SessionCapabilities } from "../runtime/session-capabilities";
 import type {
   SelectionToolbarAnchor,
   SelectionToolbarModel,
+  SuggestionCardModel,
 } from "../ui/headless/selection-toolbar-model";
 import type { MarkupDisplay } from "../ui/headless/comment-decoration-model";
 import type { EditorCommandBag } from "../ui/editor-command-bag.ts";
@@ -59,10 +61,13 @@ 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 { TwSuggestionCard } from "./chrome/tw-suggestion-card";
 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";
+import { TwToolbar, type ToolbarInteractionPolicy } from "./toolbar/tw-toolbar";
+
+export type ReviewWorkspaceChromeVisibility = WordReviewEditorChromeVisibility;
 
 export interface TwReviewWorkspaceProps {
   snapshot: RuntimeRenderSnapshot;
@@ -84,6 +89,7 @@ export interface TwReviewWorkspaceProps {
   interactionGuardSnapshot?: InteractionGuardSnapshot;
   commands: EditorCommandBag;
   selectionToolbar?: SelectionToolbarModel | null;
+  suggestionCard?: SuggestionCardModel | null;
   selectionToolbarAnchor?: SelectionToolbarAnchor | null;
   documentNavigation?: DocumentNavigationSnapshot;
   onWorkspaceModeChange?: (value: WorkspaceMode) => void;
@@ -170,6 +176,10 @@ export interface TwReviewWorkspaceProps {
   onAddCommentFromSelection?: () => void;
   onExport?: () => void;
   onDismissSelectionToolbar?: () => void;
+  onAcceptSuggestion?: () => void;
+  onRejectSuggestion?: () => void;
+  onEditSuggestion?: () => void;
+  onAddCommentFromSuggestion?: () => void;
   onSelectionToolbarFocusCapture?: FocusEventHandler<HTMLDivElement>;
   onSelectionToolbarBlurCapture?: FocusEventHandler<HTMLDivElement>;
   selectionToolbarRef?: Ref<HTMLDivElement>;
@@ -196,6 +206,7 @@ export interface TwReviewWorkspaceProps {
   onRestartNumbering?: () => void;
   onContinueNumbering?: () => void;
   onNavigateHeading?: (headingId: string) => void;
+  chromeVisibility?: Partial<ReviewWorkspaceChromeVisibility>;
 }
 
 export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
@@ -220,7 +231,17 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     props.interactionGuardSnapshot?.blockedReasons ??
     props.workflowScopeSnapshot?.blockedReasons ??
     [];
-  const showReviewRail = caps?.reviewRailVisible ?? true;
+  const chromeVisibility: ReviewWorkspaceChromeVisibility = {
+    toolbar: true,
+    alerts: true,
+    selectionOverlay: true,
+    contextToolbars: true,
+    pageChrome: true,
+    statusBar: true,
+    reviewRail: true,
+    ...props.chromeVisibility,
+  };
+  const showReviewRail = chromeVisibility.reviewRail && (caps?.reviewRailVisible ?? true);
   const headings = props.documentNavigation?.headings ?? [];
   const headerVariant = snapshot.pageLayout?.headerVariants[0]?.variant ?? "default";
   const footerVariant = snapshot.pageLayout?.footerVariants[0]?.variant ?? "default";
@@ -267,6 +288,23 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     isPageWorkspace &&
     snapshot.activeStory.kind === "main" &&
     shouldHidePageBorderForSelection(viewState.selection);
+  const effectiveSelectionMode = props.interactionGuardSnapshot?.effectiveMode ?? "edit";
+  const allowLocalChromeMutations = Boolean(caps?.canEdit) && effectiveSelectionMode === "edit";
+  const pageChromeReadOnly =
+    snapshot.readOnly ||
+    snapshot.activeStory.kind !== "main" ||
+    effectiveSelectionMode !== "edit";
+  const toolbarInteractionPolicy: ToolbarInteractionPolicy | undefined = caps
+    ? {
+        mode: effectiveSelectionMode,
+        canFormatText: caps.canEdit && effectiveSelectionMode === "edit",
+        canInsertStructural: caps.canEdit && effectiveSelectionMode === "edit",
+        canAddComment:
+          caps.canAddComment &&
+          effectiveSelectionMode !== "view" &&
+          effectiveSelectionMode !== "blocked",
+      }
+    : undefined;
 
   useEffect(() => {
     recordPerfSample("workspace.chrome");
@@ -294,11 +332,12 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   return (
     <Tooltip.Provider delayDuration={400}>
       <div className="flex h-full flex-col bg-canvas text-primary">
-        <TwToolbar
+        {chromeVisibility.toolbar ? <TwToolbar
           sourceLabel={snapshot.sourceLabel}
           capabilities={caps}
           compatibility={snapshot.compatibility}
           warnings={snapshot.warnings}
+          interactionPolicy={toolbarInteractionPolicy}
           workspaceMode={props.workspaceMode}
           zoomLevel={props.zoomLevel}
           formattingState={props.formattingState}
@@ -385,17 +424,17 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
             props.onShowTrackedChangesChange(show);
           }}
           blockedReasons={blockedReasons}
-        />
+        /> : null}
 
-        <TwAlertBanner
+        {chromeVisibility.alerts ? <TwAlertBanner
           snapshot={snapshot}
           preserveOnlyCount={preserveOnlyCount}
           workflowBlockedReasons={blockedReasons}
-        />
+        /> : null}
 
         <div className="flex flex-1 min-h-0">
           {/* Collapsible document navigator — page mode only */}
-          {isPageWorkspace ? (
+          {isPageWorkspace && chromeVisibility.pageChrome ? (
             <aside
               aria-label="Document navigator"
               className={`shrink-0 border-r border-border bg-surface transition-[width] duration-200 ${
@@ -459,7 +498,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
           ) : null}
 
           {/* Navigator expand toggle — page mode only when collapsed */}
-          {isPageWorkspace && !navOpen ? (
+          {isPageWorkspace && chromeVisibility.pageChrome && !navOpen ? (
             <div className="shrink-0 flex items-start pt-2 pl-1">
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
@@ -500,7 +539,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                 }`}
                 style={isPageWorkspace && zoomScale !== 1 ? { transform: `scale(${zoomScale})`, transformOrigin: "top center" } : undefined}
               >
-                {isPageWorkspace && snapshot.pageLayout ? (
+                {isPageWorkspace && chromeVisibility.pageChrome && snapshot.pageLayout ? (
                   <div className="border-b border-border/70 bg-surface/65 px-5 py-3" data-testid="page-context-summary">
                     <div className="flex flex-wrap items-center justify-between gap-2">
                       <div className="flex flex-wrap items-center gap-2 text-xs text-secondary">
@@ -531,7 +570,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                             <button
                               type="button"
                               aria-label="Link header to previous"
-                              disabled={!props.onSetHeaderFooterLink}
+                              disabled={!props.onSetHeaderFooterLink || !allowLocalChromeMutations}
                               onMouseDown={preserveEditorSelectionMouseDown}
                               onClick={() => {
                                 dismissSelectionToolbar();
@@ -548,7 +587,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                             <button
                               type="button"
                               aria-label="Link footer to previous"
-                              disabled={!props.onSetHeaderFooterLink}
+                              disabled={!props.onSetHeaderFooterLink || !allowLocalChromeMutations}
                               onMouseDown={preserveEditorSelectionMouseDown}
                               onClick={() => {
                                 dismissSelectionToolbar();
@@ -582,13 +621,13 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     </div>
                   </div>
                 ) : null}
-                {isPageWorkspace && snapshot.pageLayout && layoutToolsOpen ? (
+                {isPageWorkspace && chromeVisibility.pageChrome && snapshot.pageLayout && layoutToolsOpen ? (
                   <div className="px-5 pt-3">
                     <TwPageRuler
                       pageLayout={snapshot.pageLayout}
                       viewState={viewState}
                       paragraphLayout={activeParagraphLayout}
-                      readOnly={snapshot.readOnly}
+                      readOnly={pageChromeReadOnly}
                       onReturnToBody={props.onCloseStory
                         ? runWithSelectionToolbarDismiss(props.onCloseStory)
                         : () => undefined}
@@ -619,7 +658,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     />
                     <TwLayoutPanel
                       pageLayout={snapshot.pageLayout}
-                      readOnly={snapshot.readOnly || snapshot.activeStory.kind !== "main"}
+                      readOnly={pageChromeReadOnly}
                       onInsertSectionBreak={props.onInsertSectionBreak
                         ? (type) => {
                           dismissSelectionToolbar();
@@ -647,11 +686,11 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     />
                   </div>
                 ) : null}
-                {contextualSurface ? (
+                {chromeVisibility.contextToolbars && contextualSurface ? (
                   <div className="px-5 pt-3 space-y-3">
                     {contextualSurface === "table" ? (
                       <TwTableContextToolbar
-                        disabled={!caps?.canEdit}
+                        disabled={!allowLocalChromeMutations}
                         tableStyles={props.styleCatalog?.tables ?? []}
                         onSetTableStyle={props.onSetTableStyle
                           ? (styleId) => {
@@ -679,7 +718,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     {contextualSurface === "image" && props.activeImageContext ? (
                       <TwImageContextToolbar
                         activeImage={props.activeImageContext}
-                        disabled={!caps?.canEdit}
+                        disabled={!allowLocalChromeMutations}
                         onSetImageLayout={props.onSetImageLayout
                           ? (mediaId, dimensions) => {
                             dismissSelectionToolbar();
@@ -699,7 +738,44 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     ) : null}
                   </div>
                 ) : null}
-                {props.selectionToolbar && selectionToolbarPlacement ? (
+                {chromeVisibility.selectionOverlay && props.suggestionCard && selectionToolbarPlacement ? (
+                  <div className="pointer-events-none absolute inset-0 z-20" data-testid="suggestion-card-overlay">
+                    <div
+                      className="pointer-events-auto absolute"
+                      data-placement={selectionToolbarPlacement.placement}
+                      style={selectionToolbarPlacement.style}
+                    >
+                      <TwSuggestionCard
+                        model={props.suggestionCard}
+                        onFocusCapture={props.onSelectionToolbarFocusCapture}
+                        onBlurCapture={props.onSelectionToolbarBlurCapture}
+                        onAccept={props.onAcceptSuggestion}
+                        onReject={props.onRejectSuggestion}
+                        onEditSuggestion={props.onEditSuggestion}
+                        onAddComment={props.onAddCommentFromSuggestion ?? props.onAddComment}
+                      />
+                    </div>
+                  </div>
+                ) : null}
+                {chromeVisibility.selectionOverlay && props.suggestionCard && !selectionToolbarPlacement ? (
+                  <div
+                    className="pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center px-4 pt-3"
+                    data-testid="suggestion-card-fallback"
+                  >
+                    <div className="pointer-events-auto" data-placement="fallback">
+                      <TwSuggestionCard
+                        model={props.suggestionCard}
+                        onFocusCapture={props.onSelectionToolbarFocusCapture}
+                        onBlurCapture={props.onSelectionToolbarBlurCapture}
+                        onAccept={props.onAcceptSuggestion}
+                        onReject={props.onRejectSuggestion}
+                        onEditSuggestion={props.onEditSuggestion}
+                        onAddComment={props.onAddCommentFromSuggestion ?? props.onAddComment}
+                      />
+                    </div>
+                  </div>
+                ) : null}
+                {chromeVisibility.selectionOverlay && props.selectionToolbar && !props.suggestionCard && selectionToolbarPlacement ? (
                   <div className="pointer-events-none absolute inset-0 z-20" data-testid="selection-toolbar-overlay">
                     <div
                       className="pointer-events-auto absolute"
@@ -722,7 +798,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     </div>
                   </div>
                 ) : null}
-                {props.selectionToolbar && !selectionToolbarPlacement ? (
+                {chromeVisibility.selectionOverlay && props.selectionToolbar && !props.suggestionCard && !selectionToolbarPlacement ? (
                   <div
                     className="pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center px-4 pt-3"
                     data-testid="selection-toolbar-fallback"
@@ -748,7 +824,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                   className={isPageWorkspace ? "relative" : undefined}
                   data-line-numbering={pageChromeModel.lineNumberingEnabled ? "enabled" : "disabled"}
                 >
-                  {isPageWorkspace && pageChromeModel.lineNumberingEnabled ? (
+                  {isPageWorkspace && chromeVisibility.pageChrome && pageChromeModel.lineNumberingEnabled ? (
                     <div
                       aria-hidden="true"
                       className="pointer-events-none absolute inset-y-0 left-0 z-10"
@@ -767,7 +843,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     </div>
                   ) : null}
                   <div
-                    className={isPageWorkspace && pageChromeModel.lineNumberingEnabled ? "pl-12" : undefined}
+                    className={isPageWorkspace && chromeVisibility.pageChrome && pageChromeModel.lineNumberingEnabled ? "pl-12" : undefined}
                     style={isPageWorkspace ? pageShellMetrics.contentInsetStyle : undefined}
                   >
                     <div
@@ -781,7 +857,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                           }
                         : pageChromeModel.documentGridStyle}
                     >
-                      {isPageWorkspace ? (
+                      {isPageWorkspace && chromeVisibility.pageChrome ? (
                         <div
                           data-testid="page-header-band"
                           className="relative z-10 flex items-center justify-between border-b border-dashed border-border/60 px-4 text-[11px] text-secondary"
@@ -800,7 +876,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                           ) : null}
                         </div>
                       ) : null}
-                      {isPageWorkspace && pageChromeModel.showPageBorder && !hidePageBorderForActiveEditing ? (
+                      {isPageWorkspace && chromeVisibility.pageChrome && pageChromeModel.showPageBorder && !hidePageBorderForActiveEditing ? (
                         <div
                           aria-hidden="true"
                           className="pointer-events-none absolute inset-0 z-0 rounded-[2px]"
@@ -811,7 +887,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                       <div className={isPageWorkspace ? "relative z-10" : undefined}>
                         {props.document}
                       </div>
-                      {isPageWorkspace ? (
+                      {isPageWorkspace && chromeVisibility.pageChrome ? (
                         <div
                           data-testid="page-footer-band"
                           className="relative z-10 flex items-center justify-between border-t border-dashed border-border/60 px-4 text-[11px] text-secondary"
@@ -836,14 +912,16 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
               </div>
             </div>
 
-            <TwStatusBar
-              isDirty={snapshot.isDirty}
-              isExportBlocked={snapshot.compatibility.blockExport}
-              preserveOnlyCount={preserveOnlyCount}
-              commentCount={snapshot.comments.totalCount}
-              changeCount={snapshot.trackedChanges.totalCount}
-              sessionId={snapshot.sessionId}
-            />
+            {chromeVisibility.statusBar ? (
+              <TwStatusBar
+                isDirty={snapshot.isDirty}
+                isExportBlocked={snapshot.compatibility.blockExport}
+                preserveOnlyCount={preserveOnlyCount}
+                commentCount={snapshot.comments.totalCount}
+                changeCount={snapshot.trackedChanges.totalCount}
+                sessionId={snapshot.sessionId}
+              />
+            ) : null}
           </div>
 
           {/* Review rail — hidden in editing mode unless toggled */}