@beyondwork/docx-react-component 1.0.38 → 1.0.39

package/src/ui-tailwind/toolbar/tw-role-action-region.tsx

@@ -15,6 +15,8 @@
 
 import React, { useState } from "react";
 import * as Popover from "@radix-ui/react-popover";
+import * as Toggle from "@radix-ui/react-toggle";
+import * as Tooltip from "@radix-ui/react-tooltip";
 import {
   BookmarkCheck,
   Check,
@@ -23,8 +25,13 @@ import {
   ChevronLeft,
   ChevronRight,
   CircleOff,
+  Eye,
+  EyeOff,
+  FileDiff,
   Flag,
   Hand,
+  MessageSquare,
+  MessageSquareDot,
   MessageSquareText,
   Rows3,
   SkipForward,
@@ -38,6 +45,7 @@ import type {
   ReviewQueueSnapshot,
   ScopeRailPosture,
 } from "../../api/public-types";
+import type { SessionCapabilities } from "../../runtime/session-capabilities";
 import type { ScopedChromePolicy } from "../../ui/headless/scoped-chrome-policy";
 import type { ToolbarChromeItemId } from "../../ui/headless/chrome-registry";
 import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
@@ -68,7 +76,23 @@ export interface TwRoleActionRegionProps {
   workflowItem?: WorkflowWorkItemSnapshot | null;
   markupDisplay?: MarkupDisplayMode;
 
-  // Editor role
+  // Shared: editor + review role
+  canAddComment?: boolean;
+  showTrackedChanges?: boolean;
+  onAddComment?: () => void;
+  onShowTrackedChangesChange?: (show: boolean) => void;
+  /**
+   * Session capabilities used to gate the role-region tracked-changes
+   * toggle (mirrors the right-cluster gate at tw-toolbar.tsx).  When
+   * `capabilities.trackChangesSupported` is false, the toggle is disabled.
+   */
+  capabilities?: SessionCapabilities;
+
+  // Review sidebar panel (optional — hidden when not provided)
+  onReviewSidebarTrackedChanges?: () => void;
+  onReviewSidebarComments?: () => void;
+
+  // Workflow + review role: scope posture menu
   onMarkScopePosture?: (posture: ScopeRailPosture) => void;
 
   // Review role
@@ -142,7 +166,104 @@ interface RoleActionButtonProps {
 
 function RoleActionButton(arg: RoleActionButtonProps): React.JSX.Element | null {
   const { id, props } = arg;
+  const focusRingClass =
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-canvas";
   switch (id) {
+    case "comment":
+      return (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              aria-label="Add comment"
+              disabled={!props.canAddComment || !props.onAddComment}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onAddComment}
+              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 outline-none ${focusRingClass}`}
+              data-testid="role-add-comment"
+            >
+              <MessageSquare className="h-3.5 w-3.5" />
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+              Add comment
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      );
+    case "tracked-changes-toggle":
+      return (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Toggle.Root
+              pressed={props.showTrackedChanges ?? false}
+              onPressedChange={(v) => props.onShowTrackedChangesChange?.(v)}
+              disabled={props.capabilities ? !props.capabilities.trackChangesSupported : false}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none disabled:opacity-40 ${focusRingClass}`}
+              data-testid="role-tracked-changes-toggle"
+            >
+              {(props.showTrackedChanges ?? false) ? (
+                <Eye className="h-3.5 w-3.5" />
+              ) : (
+                <EyeOff className="h-3.5 w-3.5" />
+              )}
+            </Toggle.Root>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+              {(props.showTrackedChanges ?? false) ? "Hide tracked changes" : "Show tracked changes"}
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      );
+    case "review-sidebar-tracked-changes":
+      return (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              aria-label="Show tracked changes in sidebar"
+              disabled={!props.onReviewSidebarTrackedChanges}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onReviewSidebarTrackedChanges}
+              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 outline-none ${focusRingClass}`}
+              data-testid="role-sidebar-tracked-changes"
+            >
+              <FileDiff className="h-3.5 w-3.5" />
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+              Tracked changes panel
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      );
+    case "review-sidebar-comments":
+      return (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              aria-label="Show comments in sidebar"
+              disabled={!props.onReviewSidebarComments}
+              onMouseDown={preserveEditorSelectionMouseDown}
+              onClick={props.onReviewSidebarComments}
+              className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40 outline-none ${focusRingClass}`}
+              data-testid="role-sidebar-comments"
+            >
+              <MessageSquareDot className="h-3.5 w-3.5" />
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
+              Comments panel
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
+      );
     case "editor-scope-posture-menu":
       return (
         <TwScopePostureMenu

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

@@ -42,6 +42,8 @@ import {
 
 import type {
   ActiveListContext,
+  ChromePinSurface,
+  ChromePinsState,
   CompatibilityPanelSnapshot,
   EditorRole,
   EditorStoryTarget,
@@ -49,6 +51,7 @@ import type {
   FormattingStateSnapshot,
   FormattingAlignment,
   InsertImageOptions,
+  PinState,
   ReviewQueueSnapshot,
   ScopeRailPosture,
   SectionBreakType,
@@ -61,6 +64,7 @@ import type {
 import type { SessionCapabilities } from "../../runtime/session-capabilities";
 import {
   getToolbarChromePlacement,
+  isChromeItemOwnedByRoleRegion,
   isToolbarChromeItemVisible,
   resolveScopedChromePolicy,
   type ScopedChromePolicy,
@@ -72,6 +76,7 @@ import {
   type MarkupDisplayMode,
   type WorkflowWorkItemSnapshot,
 } from "./tw-role-action-region";
+import { TwDetachHandle } from "../chrome/tw-detach-handle";
 import { TwToolbarIconButton } from "./tw-toolbar-icon-button";
 
 export interface TwToolbarProps {
@@ -144,7 +149,10 @@ export interface TwToolbarProps {
   /** Markup display mode for the review role. */
   markupDisplay?: MarkupDisplayMode;
 
-  // Editor role
+  // Shared: editor + review role (comment + TC in role region)
+  onReviewSidebarTrackedChanges?: () => void;
+  onReviewSidebarComments?: () => void;
+  // Workflow + review role: scope posture
   onMarkScopePosture?: (posture: ScopeRailPosture) => void;
   // Review role
   onReviewPrev?: () => void;
@@ -162,6 +170,10 @@ export interface TwToolbarProps {
   onWorkflowSkip?: () => void;
   onWorkflowMarkBlocked?: () => void;
   onWorkflowJumpToScope?: () => void;
+  /** Current chrome pin state; when supplied enables the topnav detach handle. */
+  chromePins?: ChromePinsState;
+  /** Called when the user detaches or re-attaches the topnav. */
+  onChromePinChange?: (surface: ChromePinSurface, pin: PinState | null) => void;
 }
 
 export interface ToolbarInteractionPolicy {
@@ -219,7 +231,12 @@ export function TwToolbar(props: TwToolbarProps) {
   const showTextColors = isToolbarChromeItemVisible(scopedChromePolicy, "text-colors");
   const showParagraphAlignment = isToolbarChromeItemVisible(scopedChromePolicy, "paragraph-alignment");
   const showInsertMenu = isToolbarChromeItemVisible(scopedChromePolicy, "insert-actions");
-  const showTrackedChangesToggle = isToolbarChromeItemVisible(scopedChromePolicy, "tracked-changes-toggle");
+  const showTrackedChangesToggle =
+    isToolbarChromeItemVisible(scopedChromePolicy, "tracked-changes-toggle") &&
+    !isChromeItemOwnedByRoleRegion("tracked-changes-toggle", props.role);
+  const showRightClusterComment =
+    isToolbarChromeItemVisible(scopedChromePolicy, "comment") &&
+    !isChromeItemOwnedByRoleRegion("comment", props.role);
   const showHealth =
     showDiagnosticsChrome &&
     isToolbarChromeItemVisible(scopedChromePolicy, "health") &&
@@ -527,6 +544,13 @@ export function TwToolbar(props: TwToolbarProps) {
           reviewQueue={props.reviewQueue}
           workflowItem={props.workflowItem}
           markupDisplay={props.markupDisplay}
+          canAddComment={canAddComment}
+          showTrackedChanges={props.showTrackedChanges}
+          capabilities={caps}
+          onAddComment={props.onAddComment}
+          onShowTrackedChangesChange={props.onShowTrackedChangesChange}
+          onReviewSidebarTrackedChanges={props.onReviewSidebarTrackedChanges}
+          onReviewSidebarComments={props.onReviewSidebarComments}
           onMarkScopePosture={props.onMarkScopePosture}
           onReviewPrev={props.onReviewPrev}
           onReviewNext={props.onReviewNext}
@@ -567,7 +591,7 @@ export function TwToolbar(props: TwToolbarProps) {
           </>
         ) : null}
 
-        {isToolbarChromeItemVisible(scopedChromePolicy, "comment") ? (
+        {showRightClusterComment ? (
           <TwToolbarIconButton
             icon={MessageSquare}
             label="Add comment"
@@ -809,6 +833,15 @@ export function TwToolbar(props: TwToolbarProps) {
             onClick={props.onExport}
           />
         ) : null}
+
+        {props.onChromePinChange ? (
+          <TwDetachHandle
+            surface="topnav"
+            pin={props.chromePins?.topnav}
+            onChange={props.onChromePinChange}
+            label="Detach toolbar"
+          />
+        ) : null}
       </div>
     </header>
   );

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

@@ -39,6 +39,7 @@ import type {
   ZoomLevel,
 } from "../api/public-types";
 import { findPageForOffset } from "../runtime/document-navigation.ts";
+import { createCanvasBackend } from "../runtime/layout/index.ts";
 import {
   DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP,
   estimateBlockHeight,
@@ -50,6 +51,8 @@ import {
   incrementInvalidationCounter,
   recordPerfSample,
 } from "./editor-surface/perf-probe.ts";
+import { sliceBlocksForPage } from "./editor-surface/page-slice-util.ts";
+import { TwPageBlockView } from "./editor-surface/tw-page-block-view.tsx";
 import { computeLineMarkersIfEnabled } from "./page-chrome-model.ts";
 import type { SessionCapabilities } from "../runtime/session-capabilities";
 import type {
@@ -77,8 +80,9 @@ import {
   resolveChromePresetOptions,
   resolveChromeVisibilityForPreset,
 } from "./chrome/chrome-preset-model";
-import { TwReviewQueueBar } from "./chrome/review-queue-bar";
 import { TwSelectionToolHost } from "./chrome/tw-selection-tool-host";
+import { resolveSelectionAnchor } from "./chrome/tw-selection-anchor-resolver";
+import { resolveSelectionToolPlacement } from "./chrome/tw-selection-tool-placement";
 import { TwReviewRail, type ReviewRailTab } from "./review/tw-review-rail";
 import { TwStatusBar } from "./status/tw-status-bar";
 import { type ToolbarInteractionPolicy } from "./toolbar/tw-toolbar";
@@ -262,6 +266,14 @@ export interface TwReviewWorkspaceProps {
   onCloseStory?: () => void;
   onOpenHeaderStory?: () => void;
   onOpenFooterStory?: () => void;
+  /**
+   * Open a header/footer story for a specific page.  Called when the user
+   * double-clicks a per-page header/footer band in the page-stack chrome.
+   * Must resolve the correct variant for that page's section and call
+   * `runtime.openStory()`.
+   */
+  onOpenHeaderStoryForPage?: (pageIndex: number) => void;
+  onOpenFooterStoryForPage?: (pageIndex: number) => void;
   onSetParagraphIndentation?: (indentation: {
     left?: number;
     right?: number;
@@ -271,13 +283,37 @@ export interface TwReviewWorkspaceProps {
   onSetParagraphTabStops?: (tabStops: Array<{ pos: number; val?: string; leader?: string }>) => void;
   onRestartNumbering?: () => void;
   onContinueNumbering?: () => void;
+  // P6: new table ops
+  onToggleRowHeader?: () => void;
+  onToggleRowCantSplit?: () => void;
+  onDistributeColumnsEvenly?: () => void;
+  onSetTableAlignment?: (alignment: "left" | "center" | "right") => void;
+  onSetCellVerticalAlign?: (align: "top" | "center" | "bottom") => void;
+  /** P6: active table context for chrome overlay grips. */
+  tableContext?: import("../api/public-types").TableStructureContextSnapshot | null;
+  /** P6: column resize committed from overlay grip → set-column-width op. */
+  onSetColumnWidth?: (columnIndex: number, twips: number) => void;
+  /** P6: row resize committed from overlay grip → set-row-height op. */
+  onSetRowHeight?: (rowIndex: number, twips: number, rule: "auto" | "atLeast" | "exact") => void;
+  onListIndent?: () => void;
+  onListOutdent?: () => void;
   onUpdateFields?: () => void;
   onUpdateTableOfContents?: () => void;
   onGoToPreviousReviewItem?: () => void;
   onGoToNextReviewItem?: () => void;
   onMarkSectionForReview?: () => void;
+  /** Optional: open sidebar to tracked-changes panel. When provided, the review role shows a sidebar-TC icon. */
+  onReviewSidebarTrackedChanges?: () => void;
+  /** Optional: open sidebar to comments panel. When provided, the review role shows a sidebar-comments icon. */
+  onReviewSidebarComments?: () => void;
   onNavigateHeading?: (headingId: string) => void;
   chromeVisibility?: Partial<ReviewWorkspaceChromeVisibility>;
+  /**
+   * Called when the shell-header mode tab changes or any chrome surface fires
+   * a role switch.  Wire to `runtime.setEditorRole(role)` so the workspace
+   * re-renders with the new per-role action set.
+   */
+  onEditorRoleChange?: (role: import("../api/public-types.ts").EditorRole) => void;
 }
 
 export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
@@ -319,6 +355,9 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
       reviewRailAvailable,
     }),
   );
+  // Incremented on zoom_changed / render_frame_ready so the placement
+  // useMemo below re-executes when the render kernel emits new rects.
+  const [renderFrameRevision, setRenderFrameRevision] = useState(0);
   const responsiveChromeSignatureRef = useRef<string | null>(null);
   const headings = props.documentNavigation?.headings ?? [];
   const headerVariant = snapshot.pageLayout?.headerVariants[0]?.variant ?? "default";
@@ -348,11 +387,6 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
       ),
     [props.documentNavigation, snapshot.activeStory, snapshot.pageLayout, snapshot.surface],
   );
-  const selectionToolbarPlacement = resolveSelectionToolbarPlacement(
-    props.selectionToolAnchor,
-    selectionToolbarRootRef.current,
-    zoomScale,
-  );
   const effectiveSelectionMode = props.interactionGuardSnapshot?.effectiveMode ?? "edit";
   const allowLocalChromeMutations = Boolean(caps?.canEdit) && effectiveSelectionMode === "edit";
   const gatedSelectionTool = useMemo(() => {
@@ -364,6 +398,40 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     }
     return props.activeSelectionTool;
   }, [props.activeSelectionTool, chromeVisibility.contextToolbars]);
+  const selectionToolbarPlacement = useMemo(() => {
+    // Prefer render-frame anchors when the layout facet is available — this
+    // keeps the tool glued to kernel coordinates across zoom, scroll, and
+    // predicted-text reconciliation (R4).
+    if (props.layoutFacet && gatedSelectionTool) {
+      const anchorRect = resolveSelectionAnchor({
+        facet: props.layoutFacet,
+        selection: viewState.selection,
+        tool: gatedSelectionTool,
+      });
+      if (anchorRect && selectionToolbarRootRef.current) {
+        const containerRect = selectionToolbarRootRef.current.getBoundingClientRect();
+        const result = resolveSelectionToolPlacement({
+          anchor: anchorRect,
+          container: { widthPx: containerRect.width, heightPx: containerRect.height },
+        });
+        if (result) return result;
+      }
+    }
+    // Fall back to DOM rects for hosts that do not supply a layout facet.
+    return resolveSelectionToolbarPlacement(
+      props.selectionToolAnchor,
+      selectionToolbarRootRef.current,
+      zoomScale,
+    );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    props.layoutFacet,
+    props.selectionToolAnchor,
+    gatedSelectionTool,
+    viewState.selection,
+    zoomScale,
+    renderFrameRevision,
+  ]);
   const activePage = props.documentNavigation?.pages[props.documentNavigation.activePageIndex] ?? null;
   const pageShellMetrics = useMemo(
     () => buildPageShellMetrics(snapshot.pageLayout),
@@ -388,6 +456,9 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
       }),
     [reviewRailAvailable, reviewRailOpen, viewportWidth],
   );
+  const hasSidebarPanelAccess = Boolean(
+    props.onReviewSidebarTrackedChanges || props.onReviewSidebarComments,
+  );
   const scopedChromePolicy = useMemo(
     () =>
       resolveScopedChromePolicy({
@@ -397,14 +468,18 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
         interactionGuardSnapshot: props.interactionGuardSnapshot,
         workflowScopeSnapshot: props.workflowScopeSnapshot,
         activeListContext: props.activeListContext,
+        role: viewState.editorRole,
+        hasSidebarPanelAccess,
       }),
     [
       caps,
       chromePreset,
+      hasSidebarPanelAccess,
       props.activeListContext,
       props.interactionGuardSnapshot,
       props.workflowScopeSnapshot,
       responsiveChrome.isNarrow,
+      viewState.editorRole,
     ],
   );
   const toolbarInteractionPolicy: ToolbarInteractionPolicy | undefined = caps
@@ -446,6 +521,18 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     };
   }, []);
 
+  // Subscribe to layout facet events so chrome re-projects on zoom changes
+  // and after incremental relayout (R4).
+  useEffect(() => {
+    if (!props.layoutFacet) return;
+    const unsub = props.layoutFacet.subscribe((event) => {
+      if (event.kind === "zoom_changed" || event.kind === "render_frame_ready") {
+        setRenderFrameRevision((n) => n + 1);
+      }
+    });
+    return unsub;
+  }, [props.layoutFacet]);
+
   useEffect(() => {
     const responsiveSignature = `${reviewRailAvailable ? "1" : "0"}:${isNarrowChromeViewport(viewportWidth) ? "n" : "d"}`;
     if (responsiveChromeSignatureRef.current === responsiveSignature) {
@@ -492,6 +579,14 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     };
   }, [responsiveChrome.showDrawerReviewRail]);
 
+  useEffect(() => {
+    if (!props.layoutFacet) return;
+    const facet = props.layoutFacet;
+    void document.fonts.ready.then(() => {
+      facet.swapMeasurementProvider(createCanvasBackend());
+    });
+  }, [props.layoutFacet]);
+
   return (
     <Tooltip.Provider delayDuration={400}>
       <div className="flex h-full flex-col bg-canvas text-primary">
@@ -609,6 +704,12 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
               role={viewState.editorRole}
               reviewQueue={props.reviewQueue}
               markupDisplay={markupDisplay}
+              onReviewSidebarTrackedChanges={props.onReviewSidebarTrackedChanges
+                ? runWithSelectionToolbarDismiss(props.onReviewSidebarTrackedChanges)
+                : undefined}
+              onReviewSidebarComments={props.onReviewSidebarComments
+                ? runWithSelectionToolbarDismiss(props.onReviewSidebarComments)
+                : undefined}
               onMarkScopePosture={props.onMarkSectionForReview
                 ? runWithSelectionToolbarDismiss(props.onMarkSectionForReview)
                 : undefined}
@@ -642,27 +743,14 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                   props.onRejectRevision?.(revisionId);
                 };
               })()}
+              chromePins={viewState.chromePins}
+              onChromePinChange={props.onChromePinChange}
             />
           </div>
         ) : null}
 
-        {viewState.editorRole !== "review" &&
-        chromePreset === "review" &&
-        chromeOptions.showReviewQueueBar &&
-        props.reviewQueue ? (
-          <TwReviewQueueBar
-            queue={props.reviewQueue}
-            onPrevious={props.onGoToPreviousReviewItem
-              ? runWithSelectionToolbarDismiss(props.onGoToPreviousReviewItem)
-              : undefined}
-            onNext={props.onGoToNextReviewItem
-              ? runWithSelectionToolbarDismiss(props.onGoToNextReviewItem)
-              : undefined}
-            onMarkSection={chromeOptions.showSectionTagAction && props.onMarkSectionForReview
-              ? runWithSelectionToolbarDismiss(props.onMarkSectionForReview)
-              : undefined}
-          />
-        ) : null}
+        {/* Legacy TwReviewQueueBar is suppressed — review role's action region
+            now owns queue prev/next + counts inline in the top toolbar. */}
 
         {chromeVisibility.alerts ? <TwAlertBanner
           snapshot={snapshot}
@@ -967,6 +1055,11 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     onSetImageFrame={props.onSetImageFrame}
                     onRestartNumbering={props.onRestartNumbering}
                     onContinueNumbering={props.onContinueNumbering}
+                    onToggleRowHeader={props.onToggleRowHeader}
+                    onToggleRowCantSplit={props.onToggleRowCantSplit}
+                    onDistributeColumnsEvenly={props.onDistributeColumnsEvenly}
+                    onSetTableAlignment={props.onSetTableAlignment}
+                    onSetCellVerticalAlign={props.onSetCellVerticalAlign}
                     chromePins={viewState.chromePins}
                     onChromePinChange={props.onChromePinChange}
                   />
@@ -1035,15 +1128,22 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                           style={pageChromeModel.pageBorderStyle}
                         />
                       ) : null}
-                      <div className={isPageWorkspace ? "relative z-10" : undefined}>
+                      <div className={isPageWorkspace ? "relative z-10" : "relative"}>
+                        {/* Page chrome (frame borders, header/footer bands,
+                            page-number labels, inter-page separators) is
+                            rendered as in-flow widget decorations inside
+                            the PM surface itself — see
+                            `pm-page-break-decorations.ts`.  That keeps the
+                            chrome perfectly aligned with PM content without
+                            any absolute-positioned overlay that would drift
+                            relative to the browser's line layout. */}
                         {props.document}
                         {props.layoutFacet ? (
                           <TwChromeOverlay
                             facet={props.layoutFacet}
-                            activeWorkspaceView={
-                              props.reviewMode === "review" ? "review" : "workflow"
-                            }
-                            showWorkspaceDock={chromeVisibility.pageChrome}
+                            tableContext={props.tableContext}
+                            onSetColumnWidth={props.onSetColumnWidth}
+                            onSetRowHeight={props.onSetRowHeight}
                           />
                         ) : null}
                       </div>
@@ -1070,32 +1170,10 @@ 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}
+              {/* Pages 2..N in page mode are now rendered by TwPageStackChrome
+                  as absolute overlays above the single flowing PM surface.
+                  The PM surface holds all editable content; page frames draw
+                  borders, header/footer bands, and per-page numbers on top. */}
             </div>
 
             {chromeVisibility.statusBar ? (