@beyondwork/docx-react-component 1.0.21 → 1.0.23

package/src/ui-tailwind/editor-surface/tw-table-node-view.tsx

@@ -33,6 +33,58 @@ interface OpenExplicitRowSpan {
   remainingRows: number;
 }
 
+function readRowPadding(node: PMNode, side: "gridBefore" | "gridAfter"): number {
+  const value = node.attrs[side];
+  return typeof value === "number" && value > 0 ? value : 0;
+}
+
+function sumGridColumns(
+  gridColumns: readonly number[],
+  start: number,
+  count: number,
+): number {
+  let total = 0;
+  for (let index = start; index < start + count; index += 1) {
+    total += gridColumns[index] ?? 0;
+  }
+  return total;
+}
+
+function removePaddingCells(rowElement: HTMLTableRowElement): void {
+  for (const cell of Array.from(rowElement.cells)) {
+    if (cell.hasAttribute("data-row-padding")) {
+      cell.remove();
+    }
+  }
+}
+
+function createPaddingCell(colSpan: number, widthTwips: number): HTMLTableCellElement {
+  const cell = document.createElement("td");
+  cell.setAttribute("data-row-padding", "true");
+  cell.setAttribute("aria-hidden", "true");
+  cell.colSpan = Math.max(1, colSpan);
+  cell.style.border = "none";
+  cell.style.padding = "0";
+  cell.style.background = "transparent";
+  if (widthTwips > 0) {
+    cell.style.width = `${widthTwips / 20}pt`;
+  }
+  return cell;
+}
+
+function nodesAreOnlyRowPadding(nodes: ArrayLike<Node> & { item?(index: number): Node | null }): boolean {
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes.item ? nodes.item(index) : nodes[index];
+    if (!node) {
+      continue;
+    }
+    if (!(node instanceof HTMLElement) || !node.hasAttribute("data-row-padding")) {
+      return false;
+    }
+  }
+  return true;
+}
+
 function resolveRenderedColspan(node: PMNode): number {
   const colspan = node.attrs.colspan as number | undefined;
   if (typeof colspan === "number" && colspan > 1) {
@@ -172,6 +224,7 @@ function computeTableLayout(tableNode: PMNode): TableCellLayout[][] {
 function syncRenderedTableLayout(tableBody: HTMLTableSectionElement, tableNode: PMNode): void {
   const rowLayouts = computeTableLayout(tableNode);
   const rowElements = Array.from(tableBody.rows);
+  const gridColumns = Array.isArray(tableNode.attrs.gridColumns) ? tableNode.attrs.gridColumns as number[] : [];
 
   for (let rowIndex = 0; rowIndex < rowLayouts.length; rowIndex += 1) {
     const rowLayout = rowLayouts[rowIndex];
@@ -180,6 +233,7 @@ function syncRenderedTableLayout(tableBody: HTMLTableSectionElement, tableNode:
       continue;
     }
 
+    removePaddingCells(rowElement);
     const cellElements = Array.from(rowElement.cells);
     for (const cellLayout of rowLayout) {
       const element = cellElements[cellLayout.cellIndex];
@@ -199,6 +253,22 @@ function syncRenderedTableLayout(tableBody: HTMLTableSectionElement, tableNode:
         element.removeAttribute("data-vertical-merge-hidden");
       }
     }
+
+    const rowNode = tableNode.child(rowIndex);
+    const gridBefore = readRowPadding(rowNode, "gridBefore");
+    const gridAfter = readRowPadding(rowNode, "gridAfter");
+    if (gridBefore > 0) {
+      rowElement.insertBefore(
+        createPaddingCell(gridBefore, sumGridColumns(gridColumns, 0, gridBefore)),
+        rowElement.firstChild,
+      );
+    }
+    if (gridAfter > 0) {
+      const start = Math.max(0, gridColumns.length - gridAfter);
+      rowElement.appendChild(
+        createPaddingCell(gridAfter, sumGridColumns(gridColumns, start, gridAfter)),
+      );
+    }
   }
 }
 
@@ -253,7 +323,18 @@ export class TableNodeView {
   }
 
   ignoreMutation(record: ViewMutationRecord): boolean {
-    return record.type === "attributes" && record.target === this.dom;
+    if (record.type === "attributes") {
+      return record.target === this.dom
+        || (record.target instanceof HTMLElement && record.target.hasAttribute("data-row-padding"));
+    }
+    if (record.type === "childList" && this.dom.contains(record.target)) {
+      const addedNodes = record.addedNodes as ArrayLike<Node> & { item?(index: number): Node | null };
+      const removedNodes = record.removedNodes as ArrayLike<Node> & { item?(index: number): Node | null };
+      const addedOkay = (addedNodes?.length ?? 0) === 0 || nodesAreOnlyRowPadding(addedNodes);
+      const removedOkay = (removedNodes?.length ?? 0) === 0 || nodesAreOnlyRowPadding(removedNodes);
+      return addedOkay && removedOkay;
+    }
+    return false;
   }
 
   private scheduleLayoutSync(): void {

package/src/ui-tailwind/status/tw-status-bar.tsx

@@ -22,7 +22,10 @@ export function TwStatusBar(props: TwStatusBarProps) {
       : "Ready";
 
   return (
-    <footer className="flex h-7 shrink-0 items-center gap-4 border-t border-border px-3 text-xs text-tertiary">
+    <footer
+      data-testid="status-bar"
+      className="flex h-7 shrink-0 items-center gap-4 border-t border-border px-3 text-xs text-tertiary"
+    >
       <span className="flex items-center gap-1.5">
         <span
           className={`inline-block h-1.5 w-1.5 rounded-full ${

package/src/ui-tailwind/theme/editor-theme.css

@@ -323,6 +323,16 @@
   background: var(--wre-workflow-rail-color, var(--color-border-strong));
 }
 
+.prosemirror-surface .ProseMirror .wre-workflow-rail-active::before {
+  width: 0.3125rem;
+  opacity: 1;
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--wre-workflow-rail-color, var(--color-border-strong)) 30%, transparent);
+}
+
+.prosemirror-surface .ProseMirror .wre-workflow-inline-active {
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wre-workflow-rail-color, var(--color-border-strong)) 28%, transparent);
+}
+
 .prosemirror-surface .ProseMirror .wre-workflow-rail-edit {
   --wre-workflow-rail-color: var(--color-accent);
   background: color-mix(in srgb, var(--color-accent) 7%, transparent);

package/src/ui-tailwind/toolbar/tw-toolbar.tsx

@@ -62,6 +62,7 @@ export interface TwToolbarProps {
   compatibility?: CompatibilityPanelSnapshot;
   warnings?: EditorWarning[];
   blockedReasons?: WorkflowBlockedCommandReason[];
+  interactionPolicy?: ToolbarInteractionPolicy;
   workspaceMode: WorkspaceMode;
   zoomLevel?: ZoomLevel;
   formattingState?: FormattingStateSnapshot;
@@ -99,6 +100,13 @@ export interface TwToolbarProps {
   onShowTrackedChangesChange: (show: boolean) => void;
 }
 
+export interface ToolbarInteractionPolicy {
+  mode: "edit" | "suggest" | "comment" | "view" | "blocked";
+  canFormatText: boolean;
+  canInsertStructural: boolean;
+  canAddComment: boolean;
+}
+
 export function getSupportedZoomPresets(): ReadonlyArray<number> {
   return [75, 100, 125, 150];
 }
@@ -123,7 +131,9 @@ export function TwToolbar(props: TwToolbarProps) {
   const isPageMode = workspaceMode === "page";
   const paragraphStyles = props.styleCatalog?.paragraphs ?? [];
   const zoomLevel = props.zoomLevel ?? 100;
-  const canEdit = caps ? caps.canEdit : false;
+  const canEdit = props.interactionPolicy?.canFormatText ?? (caps ? caps.canEdit : false);
+  const canInsertStructural = props.interactionPolicy?.canInsertStructural ?? canEdit;
+  const canAddComment = props.interactionPolicy?.canAddComment ?? (caps ? caps.canAddComment : false);
   const zoomLabel =
     typeof zoomLevel === "number"
       ? `${zoomLevel}%`
@@ -173,14 +183,14 @@ export function TwToolbar(props: TwToolbarProps) {
           icon={Bold}
           label="Bold"
           active={props.formattingState?.bold ?? false}
-          disabled={caps ? !caps.canEdit : true}
+          disabled={!canEdit}
           onClick={props.onToggleBold}
         />
         <TwToolbarIconButton
           icon={Italic}
           label="Italic"
           active={props.formattingState?.italic ?? false}
-          disabled={caps ? !caps.canEdit : true}
+          disabled={!canEdit}
           onClick={props.onToggleItalic}
         />
         <TwToolbarIconButton
@@ -238,7 +248,7 @@ export function TwToolbar(props: TwToolbarProps) {
           onClick={props.onIndent}
         />
         <ToolbarInsertMenu
-          disabled={!canEdit}
+          disabled={!canInsertStructural}
           onInsertImage={props.onInsertImage}
           onInsertPageBreak={props.onInsertPageBreak}
           onInsertSectionBreak={props.onInsertSectionBreak}
@@ -275,7 +285,7 @@ export function TwToolbar(props: TwToolbarProps) {
         <TwToolbarIconButton
           icon={MessageSquare}
           label="Add comment"
-          disabled={caps ? !caps.canAddComment : true}
+          disabled={!canAddComment}
           emphasis
           onClick={props.onAddComment}
         />
@@ -554,6 +564,8 @@ function ToolbarParagraphStyleSelect(props: {
     >
       <Select.Trigger
         aria-label="Paragraph style"
+        aria-disabled={props.disabled || undefined}
+        data-disabled={props.disabled ? "" : undefined}
         onMouseDown={preserveEditorSelectionMouseDown}
         className={`inline-flex h-7 min-w-[8.5rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2.5 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
       >
@@ -601,6 +613,8 @@ function ToolbarFontFamilySelect(props: {
     >
       <Select.Trigger
         aria-label="Font family"
+        aria-disabled={props.disabled || undefined}
+        data-disabled={props.disabled ? "" : undefined}
         onMouseDown={preserveEditorSelectionMouseDown}
         className={`inline-flex h-7 min-w-[7rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
       >
@@ -649,6 +663,8 @@ function ToolbarFontSizeSelect(props: {
     >
       <Select.Trigger
         aria-label="Font size"
+        aria-disabled={props.disabled || undefined}
+        data-disabled={props.disabled ? "" : undefined}
         onMouseDown={preserveEditorSelectionMouseDown}
         className={`inline-flex h-7 min-w-[4rem] items-center justify-between gap-2 rounded-md border border-border bg-canvas px-2 text-xs font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 ${focusRingClass}`}
       >

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 */}