@beyondwork/docx-react-component 1.0.36 → 1.0.38

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

@@ -57,6 +57,10 @@ import type {
   SelectionToolAnchor,
 } from "../ui/headless/selection-tool-types";
 import type { MarkupDisplay } from "../ui/headless/comment-decoration-model";
+import {
+  resolveScopedChromePolicy,
+  shouldRenderSelectionToolKind,
+} from "../ui/headless/scoped-chrome-policy";
 import type { EditorCommandBag } from "../ui/editor-command-bag.ts";
 import { preserveEditorSelectionMouseDown } from "../ui/headless/preserve-editor-selection";
 import { TwAlertBanner } from "./chrome/tw-alert-banner";
@@ -78,6 +82,7 @@ import { TwSelectionToolHost } from "./chrome/tw-selection-tool-host";
 import { TwReviewRail, type ReviewRailTab } from "./review/tw-review-rail";
 import { TwStatusBar } from "./status/tw-status-bar";
 import { type ToolbarInteractionPolicy } from "./toolbar/tw-toolbar";
+import { TwChromeOverlay } from "./chrome-overlay";
 
 export type ReviewWorkspaceChromeVisibility = WordReviewEditorChromeVisibility;
 
@@ -88,6 +93,38 @@ export interface TwReviewWorkspaceProps {
   currentUserId?: string;
   capabilities?: SessionCapabilities;
   reviewMode?: "editing" | "review";
+  /**
+   * Runtime-owned layout facet.  Optional so existing tests + host apps
+   * continue to mount the workspace without installing a facet.  When
+   * supplied, the ChromeOverlay plane (scope rail, workflow dock, etc.)
+   * renders over the document column.
+   */
+  layoutFacet?: import("../runtime/layout/index.ts").WordReviewEditorLayoutFacet;
+  /**
+   * Optional shell header mounted above the formatting toolbar.  Pass a
+   * pre-assembled `<TwShellHeader />` with brand / mode switcher /
+   * primaryAction, or any other ReactNode.  Hosts that do not supply this
+   * get the legacy layout.
+   */
+  shellHeader?: ReactNode;
+  /**
+   * Optional host-provided Workflow-tab override for the review rail.
+   * When unset the rail renders the built-in `TwWorkflowTab` sourced from
+   * `layoutFacet.getAllScopeRailSegments()`.
+   */
+  reviewRailWorkflowTab?: ReactNode;
+  reviewRailWorkflowCount?: number;
+  reviewRailWorkflowScopesTitle?: string;
+  reviewRailIntelligenceEyebrow?: string;
+  /** Opt in to the editorial DOCUMENT INTELLIGENCE header + underline tab chip. */
+  reviewRailIntelligenceHeader?: boolean;
+  /** Optional SEARCH / HELP utility footer at the bottom of the rail. */
+  reviewRailFooter?: {
+    onSearch?: () => void;
+    helpHref?: string;
+    searchLabel?: string;
+    helpLabel?: string;
+  };
   document: ReactNode;
   workspaceMode: WorkspaceMode;
   zoomLevel?: ZoomLevel;
@@ -110,6 +147,17 @@ export interface TwReviewWorkspaceProps {
   activeSelectionTool?: ActiveSelectionToolModel | null;
   selectionToolAnchor?: SelectionToolAnchor | null;
   documentNavigation?: DocumentNavigationSnapshot;
+  /**
+   * R2.3: chrome-pin change handler.  When supplied, selection tools
+   * expose their detach affordance and persist pin state through to
+   * runtime ViewState (via the host's `setChromePin` action).  When
+   * omitted, the detach handle is suppressed — the tool behaves as
+   * a non-pinnable anchored panel (pre-R2 behavior for most kinds).
+   */
+  onChromePinChange?: (
+    surface: import("../api/public-types").ChromePinSurface,
+    pin: import("../api/public-types").PinState | null,
+  ) => void;
   onWorkspaceModeChange?: (value: WorkspaceMode) => void;
   onZoomChange?: (level: ZoomLevel) => void;
   onActiveRailTabChange?: (value: ReviewRailTab) => void;
@@ -340,6 +388,25 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
       }),
     [reviewRailAvailable, reviewRailOpen, viewportWidth],
   );
+  const scopedChromePolicy = useMemo(
+    () =>
+      resolveScopedChromePolicy({
+        preset: chromePreset,
+        compactMode: responsiveChrome.isNarrow,
+        capabilities: caps,
+        interactionGuardSnapshot: props.interactionGuardSnapshot,
+        workflowScopeSnapshot: props.workflowScopeSnapshot,
+        activeListContext: props.activeListContext,
+      }),
+    [
+      caps,
+      chromePreset,
+      props.activeListContext,
+      props.interactionGuardSnapshot,
+      props.workflowScopeSnapshot,
+      responsiveChrome.isNarrow,
+    ],
+  );
   const toolbarInteractionPolicy: ToolbarInteractionPolicy | undefined = caps
     ? {
         mode: effectiveSelectionMode,
@@ -428,6 +495,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   return (
     <Tooltip.Provider delayDuration={400}>
       <div className="flex h-full flex-col bg-canvas text-primary">
+        {props.shellHeader}
         {chromeVisibility.toolbar ? (
           <div className="px-3 pt-3">
             <ChromePresetToolbar
@@ -438,6 +506,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
               blockedReasons={blockedReasons}
               showDiagnosticsChrome={chromeVisibility.alerts}
               interactionPolicy={toolbarInteractionPolicy}
+              scopedChromePolicy={scopedChromePolicy}
               compactMode={responsiveChrome.isNarrow}
               workspaceMode={props.workspaceMode}
               zoomLevel={props.zoomLevel}
@@ -537,11 +606,50 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                 dismissSelectionToolbar();
                 props.onShowTrackedChangesChange(show);
               }}
+              role={viewState.editorRole}
+              reviewQueue={props.reviewQueue}
+              markupDisplay={markupDisplay}
+              onMarkScopePosture={props.onMarkSectionForReview
+                ? runWithSelectionToolbarDismiss(props.onMarkSectionForReview)
+                : undefined}
+              onReviewPrev={props.onGoToPreviousReviewItem
+                ? runWithSelectionToolbarDismiss(props.onGoToPreviousReviewItem)
+                : undefined}
+              onReviewNext={props.onGoToNextReviewItem
+                ? runWithSelectionToolbarDismiss(props.onGoToNextReviewItem)
+                : undefined}
+              onReviewAccept={(() => {
+                const active = props.reviewQueue?.items[props.reviewQueue.activeIndex];
+                if (active?.kind !== "change" || !props.onAcceptRevision) {
+                  return undefined;
+                }
+                // ReviewQueueItem.itemId for a "change" entry is the
+                // revision id (set by the runtime review-queue projection).
+                const revisionId = active.itemId;
+                return () => {
+                  dismissSelectionToolbar();
+                  props.onAcceptRevision?.(revisionId);
+                };
+              })()}
+              onReviewReject={(() => {
+                const active = props.reviewQueue?.items[props.reviewQueue.activeIndex];
+                if (active?.kind !== "change" || !props.onRejectRevision) {
+                  return undefined;
+                }
+                const revisionId = active.itemId;
+                return () => {
+                  dismissSelectionToolbar();
+                  props.onRejectRevision?.(revisionId);
+                };
+              })()}
             />
           </div>
         ) : null}
 
-        {chromePreset === "review" && chromeOptions.showReviewQueueBar && props.reviewQueue ? (
+        {viewState.editorRole !== "review" &&
+        chromePreset === "review" &&
+        chromeOptions.showReviewQueueBar &&
+        props.reviewQueue ? (
           <TwReviewQueueBar
             queue={props.reviewQueue}
             onPrevious={props.onGoToPreviousReviewItem
@@ -817,7 +925,9 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     />
                   </div>
                 ) : null}
-                {chromeVisibility.selectionOverlay && gatedSelectionTool ? (
+                {chromeVisibility.selectionOverlay &&
+                gatedSelectionTool &&
+                shouldRenderSelectionToolKind(scopedChromePolicy, gatedSelectionTool.kind) ? (
                   <TwSelectionToolHost
                     tool={gatedSelectionTool}
                     contextAnalytics={
@@ -857,6 +967,8 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     onSetImageFrame={props.onSetImageFrame}
                     onRestartNumbering={props.onRestartNumbering}
                     onContinueNumbering={props.onContinueNumbering}
+                    chromePins={viewState.chromePins}
+                    onChromePinChange={props.onChromePinChange}
                   />
                 ) : null}
                 <div
@@ -925,6 +1037,15 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                       ) : null}
                       <div className={isPageWorkspace ? "relative z-10" : undefined}>
                         {props.document}
+                        {props.layoutFacet ? (
+                          <TwChromeOverlay
+                            facet={props.layoutFacet}
+                            activeWorkspaceView={
+                              props.reviewMode === "review" ? "review" : "workflow"
+                            }
+                            showWorkspaceDock={chromeVisibility.pageChrome}
+                          />
+                        ) : null}
                       </div>
                       {isPageWorkspace && chromeVisibility.pageChrome ? (
                         <div
@@ -949,6 +1070,32 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                   </div>
                 </div>
               </div>
+              {isPageWorkspace && (props.documentNavigation?.pages.length ?? 0) > 1 ? (
+                <div className="flex flex-col items-center gap-8 pb-8" data-testid="page-stack-continuation">
+                  {props.documentNavigation!.pages.slice(1).map((page) => (
+                    <div
+                      key={`page-${page.pageIndex}`}
+                      data-wre-page-frame="true"
+                      data-page-index={page.pageIndex}
+                      className="wre-page-chrome wre-page-surface relative mx-auto w-full max-w-[840px] overflow-hidden rounded-[2px] bg-canvas"
+                      style={{
+                        minHeight: "600px",
+                        boxShadow: "0 1px 2px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04)",
+                        border: "1px solid var(--color-border, rgba(0,0,0,0.08))",
+                      }}
+                    >
+                      <div className="absolute left-4 top-3 text-[11px] uppercase tracking-[0.12em] text-tertiary">
+                        Page {page.pageIndex + 1} of {props.documentNavigation!.pageCount}
+                      </div>
+                      <div className="absolute inset-0 flex items-center justify-center text-sm text-secondary">
+                        Continuation of document flow.
+                        <br />
+                        (Editing occurs in the page above.)
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : null}
             </div>
 
             {chromeVisibility.statusBar ? (
@@ -995,6 +1142,13 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
             onRejectRevision={props.onRejectRevision}
             onAcceptAllChanges={props.onAcceptAllChanges}
             onRejectAllChanges={props.onRejectAllChanges}
+            scopeRailSegments={props.layoutFacet?.getAllScopeRailSegments?.() ?? []}
+            workflowTab={props.reviewRailWorkflowTab}
+            workflowCount={props.reviewRailWorkflowCount}
+            workflowScopesTitle={props.reviewRailWorkflowScopesTitle}
+            intelligenceEyebrow={props.reviewRailIntelligenceEyebrow}
+            intelligenceHeader={props.reviewRailIntelligenceHeader}
+            railFooter={props.reviewRailFooter}
           /> : null}
 
           {responsiveChrome.showDrawerReviewRail ? (
@@ -1036,6 +1190,13 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                   onRejectRevision={props.onRejectRevision}
                   onAcceptAllChanges={props.onAcceptAllChanges}
                   onRejectAllChanges={props.onRejectAllChanges}
+                  scopeRailSegments={props.layoutFacet?.getAllScopeRailSegments?.() ?? []}
+                  workflowTab={props.reviewRailWorkflowTab}
+                  workflowCount={props.reviewRailWorkflowCount}
+                  workflowScopesTitle={props.reviewRailWorkflowScopesTitle}
+                  intelligenceEyebrow={props.reviewRailIntelligenceEyebrow}
+                  intelligenceHeader={props.reviewRailIntelligenceHeader}
+                  railFooter={props.reviewRailFooter}
                 />
               </div>
             </div>