@beyondwork/docx-react-component 1.0.37 → 1.0.38

package/src/ui-tailwind/toolbar/tw-scope-posture-menu.tsx

@@ -0,0 +1,182 @@
+/**
+ * Scope posture menu — replaces the old "Mark section" button with a
+ * topnav dropdown listing the seven `ScopeRailPosture` values so
+ * editors can mark regions with an explicit workflow mode instead of a
+ * single "marked" flag.
+ *
+ * Per runtime-rendering-and-chrome-phase.md §6.4, the menu lives inline
+ * in the editor role's primary action region (not in the review queue
+ * strip).  Postures align 1:1 with the rail vocabulary so the rail
+ * updates visually as soon as the user picks one.
+ */
+
+import React, { useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import {
+  BookmarkPlus,
+  ChevronDown,
+  Eye,
+  Flag,
+  Lock,
+  MessageCircle,
+  Pencil,
+  Sparkles,
+} from "lucide-react";
+
+import type { ScopeRailPosture } from "../../api/public-types";
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+
+export interface TwScopePostureMenuProps {
+  disabled?: boolean;
+  /** Called when the user picks a posture.  Host decides the scope to mark. */
+  onSelect: (posture: ScopeRailPosture) => void;
+  /** Optional explicit label override (defaults to "Mark…"). */
+  label?: string;
+  "data-testid"?: string;
+}
+
+interface PostureEntry {
+  posture: ScopeRailPosture;
+  label: string;
+  hint: string;
+  icon: React.ComponentType<{ className?: string }>;
+  tone: "accent" | "warning" | "comment" | "secondary" | "danger";
+}
+
+/**
+ * Posture catalog.  Mirrors `POSTURE_STYLES` in `tw-scope-rail-layer.tsx`
+ * but with lucide icon components (the rail uses CSS pseudo-element
+ * glyphs via the `data-icon` attribute).  Extract both into a single
+ * source of truth in a follow-up.
+ */
+const POSTURE_ENTRIES: readonly PostureEntry[] = [
+  {
+    posture: "edit",
+    label: "Edit scope",
+    hint: "Full authoring inside this region",
+    icon: Pencil,
+    tone: "accent",
+  },
+  {
+    posture: "suggest",
+    label: "Suggest scope",
+    hint: "Tracked-change suggestions only",
+    icon: Sparkles,
+    tone: "warning",
+  },
+  {
+    posture: "comment",
+    label: "Comment scope",
+    hint: "Comments only; body is read-only",
+    icon: MessageCircle,
+    tone: "comment",
+  },
+  {
+    posture: "view",
+    label: "In scope",
+    hint: "Read-only, in scope of review",
+    icon: Eye,
+    tone: "secondary",
+  },
+  {
+    posture: "candidate",
+    label: "Propose scope",
+    hint: "Candidate — not yet committed",
+    icon: Flag,
+    tone: "warning",
+  },
+  {
+    posture: "preserve-only",
+    label: "Preserve only",
+    hint: "Blocked — export-preserving only",
+    icon: Lock,
+    tone: "danger",
+  },
+  {
+    posture: "blocked-import",
+    label: "Blocked import",
+    hint: "Blocked — imported region is locked",
+    icon: Lock,
+    tone: "danger",
+  },
+];
+
+export function TwScopePostureMenu(props: TwScopePostureMenuProps): React.JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <button
+          type="button"
+          aria-label={`${props.label ?? "Mark"} section`}
+          aria-expanded={open}
+          disabled={props.disabled}
+          onMouseDown={preserveEditorSelectionMouseDown}
+          className="inline-flex h-6 items-center gap-1 rounded-md border border-border bg-canvas px-2 text-[11px] font-medium text-primary transition-colors hover:bg-surface outline-none disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
+          data-testid={props["data-testid"] ?? "scope-posture-menu-trigger"}
+        >
+          <BookmarkPlus className="h-3.5 w-3.5" />
+          <span>{props.label ?? "Mark…"}</span>
+          <ChevronDown className="h-3.5 w-3.5 text-tertiary" />
+        </button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          className="z-50 w-[260px] rounded-lg bg-canvas p-1 shadow-lg ring-1 ring-border"
+          sideOffset={8}
+          align="start"
+          data-testid="scope-posture-menu-content"
+        >
+          <div className="mb-1 px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
+            Mark section with posture
+          </div>
+          {POSTURE_ENTRIES.map((entry) => (
+            <Popover.Close key={entry.posture} asChild>
+              <button
+                type="button"
+                aria-label={`Mark section as ${entry.label}`}
+                onMouseDown={preserveEditorSelectionMouseDown}
+                onClick={() => {
+                  props.onSelect(entry.posture);
+                }}
+                className="flex w-full items-start gap-2 rounded-md px-2 py-1.5 text-left text-[11px] transition-colors hover:bg-surface focus-visible:outline-none focus-visible:bg-surface"
+                data-testid={`scope-posture-option-${entry.posture}`}
+                data-posture={entry.posture}
+              >
+                <entry.icon
+                  className={[
+                    "mt-0.5 h-3.5 w-3.5 shrink-0",
+                    toneClass(entry.tone),
+                  ].join(" ")}
+                />
+                <span className="flex flex-col">
+                  <span className="font-medium text-primary">{entry.label}</span>
+                  <span className="text-[10px] text-secondary">{entry.hint}</span>
+                </span>
+              </button>
+            </Popover.Close>
+          ))}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}
+
+function toneClass(tone: PostureEntry["tone"]): string {
+  switch (tone) {
+    case "accent":
+      return "text-accent";
+    case "warning":
+      return "text-warning";
+    case "comment":
+      return "text-comment";
+    case "danger":
+      return "text-danger";
+    case "secondary":
+    default:
+      return "text-secondary";
+  }
+}
+
+export default TwScopePostureMenu;

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

@@ -0,0 +1,162 @@
+import React, { type ReactNode } from "react";
+import * as Tabs from "@radix-ui/react-tabs";
+
+/**
+ * TwShellHeader — the top "app chrome" bar above the document canvas.
+ *
+ * Anatomy matches the editorial reference mock:
+ *   ┌─────────────────────────────────────────────────────────────────────┐
+ *   │  [brand]        Edit | Review | Workflow | More          [⋯] [CTA] │
+ *   └─────────────────────────────────────────────────────────────────────┘
+ *
+ * All three regions are optional slots — hosts opt in by supplying the
+ * corresponding prop.  When nothing is supplied the header renders empty but
+ * preserves layout height so the document canvas does not jump when a CTA
+ * appears.
+ */
+
+export type ShellHeaderMode = "edit" | "review" | "workflow" | "more";
+
+export interface ShellHeaderModeOption {
+  id: ShellHeaderMode;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface ShellHeaderPrimaryAction {
+  label: string;
+  onClick: () => void;
+  tone?: "accent" | "neutral";
+  disabled?: boolean;
+}
+
+export interface ShellHeaderIconAction {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  onClick?: () => void;
+  href?: string;
+}
+
+export interface TwShellHeaderProps {
+  brand?: ReactNode;
+  modes?: readonly ShellHeaderModeOption[];
+  activeMode?: ShellHeaderMode;
+  onModeChange?: (mode: ShellHeaderMode) => void;
+  iconActions?: readonly ShellHeaderIconAction[];
+  primaryAction?: ShellHeaderPrimaryAction;
+  /** Thin bottom border appears only when the document has scrolled. */
+  isScrolled?: boolean;
+  className?: string;
+}
+
+const focusRingClass =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-canvas";
+
+export function TwShellHeader(props: TwShellHeaderProps) {
+  const hasContent =
+    props.brand ||
+    (props.modes && props.modes.length > 0) ||
+    (props.iconActions && props.iconActions.length > 0) ||
+    props.primaryAction;
+
+  if (!hasContent) {
+    return null;
+  }
+
+  const className = [
+    "flex h-12 shrink-0 items-center justify-between gap-4 px-4 bg-canvas/92 backdrop-blur-sm",
+    props.isScrolled ? "border-b border-border" : "border-b border-transparent",
+    "transition-colors duration-[var(--motion-fast)]",
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <header className={className} data-testid="tw-shell-header">
+      <div className="flex min-w-0 items-center gap-3">
+        {props.brand ? (
+          <div
+            className="font-[family-name:var(--font-legal-serif)] text-[15px] font-semibold text-primary truncate"
+            data-testid="tw-shell-header__brand"
+          >
+            {props.brand}
+          </div>
+        ) : null}
+      </div>
+
+      {props.modes && props.modes.length > 0 && props.activeMode ? (
+        <Tabs.Root
+          value={props.activeMode}
+          onValueChange={(v: string) =>
+            props.onModeChange?.(v as ShellHeaderMode)
+          }
+        >
+          <Tabs.List
+            aria-label="Workspace modes"
+            className="flex items-center gap-1"
+          >
+            {props.modes.map((mode) => (
+              <Tabs.Trigger
+                key={mode.id}
+                value={mode.id}
+                disabled={mode.disabled}
+                className={`wre-rail-tab ${focusRingClass}`}
+                data-testid={`tw-shell-header__mode-${mode.id}`}
+              >
+                {mode.label}
+              </Tabs.Trigger>
+            ))}
+          </Tabs.List>
+        </Tabs.Root>
+      ) : (
+        <div aria-hidden="true" />
+      )}
+
+      <div className="flex items-center gap-1">
+        {props.iconActions?.map((action) => {
+          const commonProps = {
+            key: action.id,
+            "aria-label": action.label,
+            title: action.label,
+            className: `inline-flex h-8 w-8 items-center justify-center rounded-sm text-secondary transition-colors hover:bg-surface-hover hover:text-primary ${focusRingClass}`,
+          } as const;
+
+          if (action.href) {
+            return (
+              <a {...commonProps} href={action.href}>
+                <span aria-hidden="true">{action.icon}</span>
+              </a>
+            );
+          }
+
+          return (
+            <button {...commonProps} type="button" onClick={action.onClick}>
+              <span aria-hidden="true">{action.icon}</span>
+            </button>
+          );
+        })}
+
+        {props.primaryAction ? (
+          <button
+            type="button"
+            disabled={props.primaryAction.disabled}
+            onClick={props.primaryAction.onClick}
+            data-tone={props.primaryAction.tone ?? "accent"}
+            className={[
+              "ml-2 inline-flex h-8 items-center rounded-sm px-3 text-xs font-semibold transition-colors disabled:opacity-40",
+              props.primaryAction.tone === "neutral"
+                ? "bg-surface text-primary hover:bg-surface-hover"
+                : "bg-accent text-white hover:bg-[color-mix(in_srgb,var(--color-accent)_85%,#000)]",
+              focusRingClass,
+            ].join(" ")}
+            data-testid="tw-shell-header__primary-action"
+          >
+            {props.primaryAction.label}
+          </button>
+        ) : null}
+      </div>
+    </header>
+  );
+}

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

@@ -43,11 +43,14 @@ import {
 import type {
   ActiveListContext,
   CompatibilityPanelSnapshot,
+  EditorRole,
   EditorStoryTarget,
   EditorWarning,
   FormattingStateSnapshot,
   FormattingAlignment,
   InsertImageOptions,
+  ReviewQueueSnapshot,
+  ScopeRailPosture,
   SectionBreakType,
   StyleCatalogSnapshot,
   WorkflowBlockedCommandReason,
@@ -64,6 +67,11 @@ import {
 } from "../../ui/headless/scoped-chrome-policy";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
 import { TwHealthPanel } from "../review/tw-health-panel";
+import {
+  TwRoleActionRegion,
+  type MarkupDisplayMode,
+  type WorkflowWorkItemSnapshot,
+} from "./tw-role-action-region";
 import { TwToolbarIconButton } from "./tw-toolbar-icon-button";
 
 export interface TwToolbarProps {
@@ -121,6 +129,39 @@ export interface TwToolbarProps {
   onContinueNumbering?: () => void;
   onUpdateFields?: () => void;
   onUpdateTableOfContents?: () => void;
+
+  // ───── R1: role-scoped inline action region (spec §6.4) ──────────────
+  /**
+   * Active editor role.  When supplied, the toolbar renders the inline
+   * `TwRoleActionRegion` between the left formatting cluster and the
+   * right view cluster.  Omit to keep the pre-R1 layout.
+   */
+  role?: EditorRole;
+  /** Review-queue snapshot for the review role's inline prev/next/counts. */
+  reviewQueue?: ReviewQueueSnapshot;
+  /** Active work item for the workflow role's inline queue. */
+  workflowItem?: WorkflowWorkItemSnapshot | null;
+  /** Markup display mode for the review role. */
+  markupDisplay?: MarkupDisplayMode;
+
+  // Editor role
+  onMarkScopePosture?: (posture: ScopeRailPosture) => void;
+  // Review role
+  onReviewPrev?: () => void;
+  onReviewNext?: () => void;
+  onReviewAccept?: () => void;
+  onReviewReject?: () => void;
+  onReviewAcceptAll?: () => void;
+  onReviewRejectAll?: () => void;
+  onReviewMarkupMode?: (mode: MarkupDisplayMode) => void;
+  // Workflow role
+  onWorkflowPrev?: () => void;
+  onWorkflowNext?: () => void;
+  onWorkflowMarkComplete?: () => void;
+  onWorkflowClaim?: () => void;
+  onWorkflowSkip?: () => void;
+  onWorkflowMarkBlocked?: () => void;
+  onWorkflowJumpToScope?: () => void;
 }
 
 export interface ToolbarInteractionPolicy {
@@ -170,6 +211,7 @@ export function TwToolbar(props: TwToolbarProps) {
         } as any)
       : undefined,
     activeListContext: props.activeListContext,
+    ...(props.role ? { role: props.role } : {}),
   });
   const showStyleSelectors = isToolbarChromeItemVisible(scopedChromePolicy, "text-style-selectors");
   const showInlineFormatting = isToolbarChromeItemVisible(scopedChromePolicy, "inline-formatting");
@@ -476,6 +518,33 @@ export function TwToolbar(props: TwToolbarProps) {
         ) : null}
       </div>
 
+      {/* R1: role-scoped inline action region (spec §6.4) */}
+      {props.role ? (
+        <TwRoleActionRegion
+          role={props.role}
+          policy={scopedChromePolicy}
+          compactMode={isCompact}
+          reviewQueue={props.reviewQueue}
+          workflowItem={props.workflowItem}
+          markupDisplay={props.markupDisplay}
+          onMarkScopePosture={props.onMarkScopePosture}
+          onReviewPrev={props.onReviewPrev}
+          onReviewNext={props.onReviewNext}
+          onReviewAccept={props.onReviewAccept}
+          onReviewReject={props.onReviewReject}
+          onReviewAcceptAll={props.onReviewAcceptAll}
+          onReviewRejectAll={props.onReviewRejectAll}
+          onReviewMarkupMode={props.onReviewMarkupMode}
+          onWorkflowPrev={props.onWorkflowPrev}
+          onWorkflowNext={props.onWorkflowNext}
+          onWorkflowMarkComplete={props.onWorkflowMarkComplete}
+          onWorkflowClaim={props.onWorkflowClaim}
+          onWorkflowSkip={props.onWorkflowSkip}
+          onWorkflowMarkBlocked={props.onWorkflowMarkBlocked}
+          onWorkflowJumpToScope={props.onWorkflowJumpToScope}
+        />
+      ) : null}
+
       {/* Right cluster: comment, track changes, markup, view, export */}
       <div className={`flex items-center gap-0.5 ${isCompact ? "ml-auto flex-wrap justify-end" : ""}`}>
         {scopedChromePolicy.scopeStatusLabel ? (

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

@@ -82,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;
 
@@ -92,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;
@@ -114,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;
@@ -451,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
@@ -561,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
@@ -883,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
@@ -951,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
@@ -975,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 ? (
@@ -1021,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 ? (
@@ -1062,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>