@beyondwork/docx-react-component 1.0.28 → 1.0.30

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

@@ -14,6 +14,7 @@ import * as Tooltip from "@radix-ui/react-tooltip";
 import { ChevronLeft, ChevronRight, List } from "lucide-react";
 
 import type {
+  ActiveListContext,
   CommentSidebarThreadSnapshot,
   DocumentNavigationSnapshot,
   EditorViewStateSnapshot,
@@ -22,12 +23,16 @@ import type {
   HeaderFooterLinkPatch,
   InteractionGuardSnapshot,
   InsertImageOptions,
+  RuntimeContextAnalyticsSnapshot,
   RuntimeRenderSnapshot,
+  ReviewQueueSnapshot,
   SectionPageNumberingPatch,
   SectionBreakType,
   StyleCatalogSnapshot,
   SurfaceBlockSnapshot,
   TrackedChangeEntrySnapshot,
+  WordReviewEditorChromeOptions,
+  WordReviewEditorChromePreset,
   WordReviewEditorChromeVisibility,
   WorkflowScopeSnapshot,
   WorkspaceMode,
@@ -48,24 +53,26 @@ import {
 import { computeLineMarkersIfEnabled } from "./page-chrome-model.ts";
 import type { SessionCapabilities } from "../runtime/session-capabilities";
 import type {
-  SelectionToolbarAnchor,
-  SelectionToolbarModel,
-  SuggestionCardModel,
-} from "../ui/headless/selection-toolbar-model";
+  ActiveSelectionToolModel,
+  SelectionToolAnchor,
+} from "../ui/headless/selection-tool-types";
 import type { MarkupDisplay } from "../ui/headless/comment-decoration-model";
 import type { EditorCommandBag } from "../ui/editor-command-bag.ts";
 import { preserveEditorSelectionMouseDown } from "../ui/headless/preserve-editor-selection";
 import { TwAlertBanner } from "./chrome/tw-alert-banner";
-import { TwImageContextToolbar, type ActiveImageContext } from "./chrome/tw-image-context-toolbar";
 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 { ChromePresetToolbar } from "./chrome/chrome-preset-toolbar";
+import {
+  resolveChromePreset,
+  resolveChromePresetOptions,
+  resolveChromeVisibilityForPreset,
+} from "./chrome/chrome-preset-model";
+import { TwReviewQueueBar } from "./chrome/review-queue-bar";
+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 { TwToolbar, type ToolbarInteractionPolicy } from "./toolbar/tw-toolbar";
+import { type ToolbarInteractionPolicy } from "./toolbar/tw-toolbar";
 
 export type ReviewWorkspaceChromeVisibility = WordReviewEditorChromeVisibility;
 
@@ -80,6 +87,7 @@ export interface TwReviewWorkspaceProps {
   workspaceMode: WorkspaceMode;
   zoomLevel?: ZoomLevel;
   formattingState?: FormattingStateSnapshot;
+  activeListContext?: ActiveListContext | null;
   styleCatalog?: StyleCatalogSnapshot;
   activeRailTab: ReviewRailTab;
   activeCommentId?: string;
@@ -87,10 +95,15 @@ export interface TwReviewWorkspaceProps {
   showTrackedChanges: boolean;
   workflowScopeSnapshot?: WorkflowScopeSnapshot | null;
   interactionGuardSnapshot?: InteractionGuardSnapshot;
+  chromePreset?: WordReviewEditorChromePreset;
+  chromeOptions?: Partial<WordReviewEditorChromeOptions>;
+  reviewQueue?: ReviewQueueSnapshot;
+  documentContextAnalytics?: RuntimeContextAnalyticsSnapshot | null;
+  selectionContextAnalytics?: RuntimeContextAnalyticsSnapshot | null;
+  currentScopeContextAnalytics?: RuntimeContextAnalyticsSnapshot | null;
   commands: EditorCommandBag;
-  selectionToolbar?: SelectionToolbarModel | null;
-  suggestionCard?: SuggestionCardModel | null;
-  selectionToolbarAnchor?: SelectionToolbarAnchor | null;
+  activeSelectionTool?: ActiveSelectionToolModel | null;
+  selectionToolAnchor?: SelectionToolAnchor | null;
   documentNavigation?: DocumentNavigationSnapshot;
   onWorkspaceModeChange?: (value: WorkspaceMode) => void;
   onZoomChange?: (level: ZoomLevel) => void;
@@ -112,6 +125,8 @@ export interface TwReviewWorkspaceProps {
   onSetTextColor?: (color: string) => void;
   onSetHighlightColor?: (color: string | null) => void;
   onSetAlignment?: (alignment: FormattingAlignment) => void;
+  onToggleBulletedList?: () => void;
+  onToggleNumberedList?: () => void;
   onOutdent?: () => void;
   onIndent?: () => void;
   onAddComment?: () => void;
@@ -130,8 +145,6 @@ export interface TwReviewWorkspaceProps {
   onMergeCells?: () => void;
   onSplitCell?: () => void;
   onSetCellBackground?: (color: string) => void;
-  activeImageContext?: ActiveImageContext | null;
-  activeObjectContext?: ActiveObjectContext | null;
   onSetImageLayout?: (
     mediaId: string,
     dimensions: { widthEmu: number; heightEmu: number },
@@ -205,6 +218,11 @@ export interface TwReviewWorkspaceProps {
   onSetParagraphTabStops?: (tabStops: Array<{ pos: number; val?: string; leader?: string }>) => void;
   onRestartNumbering?: () => void;
   onContinueNumbering?: () => void;
+  onUpdateFields?: () => void;
+  onUpdateTableOfContents?: () => void;
+  onGoToPreviousReviewItem?: () => void;
+  onGoToNextReviewItem?: () => void;
+  onMarkSectionForReview?: () => void;
   onNavigateHeading?: (headingId: string) => void;
   chromeVisibility?: Partial<ReviewWorkspaceChromeVisibility>;
 }
@@ -223,6 +241,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   const [layoutToolsOpen, setLayoutToolsOpen] = useState(false);
   const zoomLevel = props.zoomLevel ?? 100;
   const zoomScale = typeof zoomLevel === "number" ? zoomLevel / 100 : 1;
+  const pageZoomBucket =
+    !isPageWorkspace ? undefined : zoomScale < 1 ? "low" : zoomScale > 1 ? "high" : "base";
+  const chromePreset = resolveChromePreset(props.chromePreset, props.reviewMode);
+  const chromeOptions = resolveChromePresetOptions(chromePreset, props.chromeOptions);
   const preserveOnlyCount = caps?.preserveOnlyCount ??
     snapshot.compatibility.featureEntries.filter(
       (entry) => entry.featureClass === "preserve-only",
@@ -231,16 +253,11 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     props.interactionGuardSnapshot?.blockedReasons ??
     props.workflowScopeSnapshot?.blockedReasons ??
     [];
-  const chromeVisibility: ReviewWorkspaceChromeVisibility = {
-    toolbar: true,
-    alerts: true,
-    selectionOverlay: true,
-    contextToolbars: true,
-    pageChrome: true,
-    statusBar: true,
-    reviewRail: true,
-    ...props.chromeVisibility,
-  };
+  const chromeVisibility = resolveChromeVisibilityForPreset({
+    chromePreset,
+    chromeOptions,
+    chromeVisibility: props.chromeVisibility,
+  });
   const showReviewRail = chromeVisibility.reviewRail && (caps?.reviewRailVisible ?? true);
   const headings = props.documentNavigation?.headings ?? [];
   const headerVariant = snapshot.pageLayout?.headerVariants[0]?.variant ?? "default";
@@ -249,21 +266,17 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     viewState.selection.activeRange.kind === "node"
       ? viewState.selection.activeRange.at
       : viewState.selection.head;
+  const shouldResolveActiveParagraphLayout =
+    isPageWorkspace &&
+    chromeVisibility.pageChrome &&
+    layoutToolsOpen;
   const activeParagraphLayout = useMemo(
-    () => resolveActiveParagraphLayout(snapshot.surface, selectionPosition),
-    [selectionPosition, snapshot.surface],
-  );
-  const isTableContext = Boolean(
-    props.formattingState?.breadcrumb.some((item) => item.kind === "table" || item.kind === "table_cell" || item.kind === "table_row"),
+    () =>
+      shouldResolveActiveParagraphLayout
+        ? resolveActiveParagraphLayout(snapshot.surface, selectionPosition)
+        : null,
+    [selectionPosition, shouldResolveActiveParagraphLayout, snapshot.surface],
   );
-  const contextualSurface =
-    props.activeImageContext
-      ? "image"
-      : props.activeObjectContext
-        ? "object"
-        : isTableContext
-          ? "table"
-          : null;
   const pageChromeModel = useMemo(
     () =>
       buildPageChromeModel(
@@ -275,21 +288,32 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
     [props.documentNavigation, snapshot.activeStory, snapshot.pageLayout, snapshot.surface],
   );
   const selectionToolbarPlacement = resolveSelectionToolbarPlacement(
-    props.selectionToolbarAnchor,
+    props.selectionToolAnchor,
     selectionToolbarRootRef.current,
     zoomScale,
   );
+  const effectiveSelectionMode = props.interactionGuardSnapshot?.effectiveMode ?? "edit";
+  const allowLocalChromeMutations = Boolean(caps?.canEdit) && effectiveSelectionMode === "edit";
+  const gatedSelectionTool = useMemo(() => {
+    if (!props.activeSelectionTool) {
+      return null;
+    }
+    if (props.activeSelectionTool.kind === "structure-context" && !chromeVisibility.contextToolbars) {
+      return null;
+    }
+    return props.activeSelectionTool;
+  }, [props.activeSelectionTool, chromeVisibility.contextToolbars]);
   const activePage = props.documentNavigation?.pages[props.documentNavigation.activePageIndex] ?? null;
   const pageShellMetrics = useMemo(
     () => buildPageShellMetrics(snapshot.pageLayout),
     [snapshot.pageLayout],
   );
+  const headerBandLabel = resolvePageBandLabel("header", snapshot.activeStory);
+  const footerBandLabel = resolvePageBandLabel("footer", snapshot.activeStory);
   const hidePageBorderForActiveEditing =
     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" ||
@@ -332,99 +356,126 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   return (
     <Tooltip.Provider delayDuration={400}>
       <div className="flex h-full flex-col bg-canvas text-primary">
-        {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}
-          styleCatalog={props.styleCatalog}
-          showTrackedChanges={props.showTrackedChanges}
-          onUndo={runWithSelectionToolbarDismiss(props.onUndo)}
-          onRedo={runWithSelectionToolbarDismiss(props.onRedo)}
-          onSetParagraphStyle={props.onSetParagraphStyle
-            ? (styleId) => {
-              dismissSelectionToolbar();
-              props.onSetParagraphStyle?.(styleId);
-            }
-            : undefined}
-          onToggleBold={runWithSelectionToolbarDismiss(props.onToggleBold)}
-          onToggleItalic={runWithSelectionToolbarDismiss(props.onToggleItalic)}
-          onToggleUnderline={runWithSelectionToolbarDismiss(props.onToggleUnderline)}
-          onToggleStrikethrough={runWithSelectionToolbarDismiss(props.onToggleStrikethrough)}
-          onToggleSuperscript={runWithSelectionToolbarDismiss(props.onToggleSuperscript)}
-          onToggleSubscript={runWithSelectionToolbarDismiss(props.onToggleSubscript)}
-          onSetFontFamily={props.onSetFontFamily
-            ? (fontFamily) => {
-              dismissSelectionToolbar();
-              props.onSetFontFamily?.(fontFamily);
-            }
-            : undefined}
-          onSetFontSize={props.onSetFontSize
-            ? (fontSize) => {
-              dismissSelectionToolbar();
-              props.onSetFontSize?.(fontSize);
-            }
-            : undefined}
-          onSetTextColor={props.onSetTextColor
-            ? (color) => {
-              dismissSelectionToolbar();
-              props.onSetTextColor?.(color);
-            }
-            : undefined}
-          onSetHighlightColor={props.onSetHighlightColor
-            ? (color) => {
-              dismissSelectionToolbar();
-              props.onSetHighlightColor?.(color);
-            }
-            : undefined}
-          onSetAlignment={props.onSetAlignment
-            ? (alignment) => {
-              dismissSelectionToolbar();
-              props.onSetAlignment?.(alignment);
-            }
-            : undefined}
-          onOutdent={runWithSelectionToolbarDismiss(props.onOutdent)}
-          onIndent={runWithSelectionToolbarDismiss(props.onIndent)}
-          onAddComment={runWithSelectionToolbarDismiss(props.onAddComment)}
-          onInsertPageBreak={runWithSelectionToolbarDismiss(props.onInsertPageBreak)}
-          onInsertTable={runWithSelectionToolbarDismiss(props.onInsertTable)}
-          onInsertSectionBreak={props.onInsertSectionBreak
-            ? (type) => {
-              dismissSelectionToolbar();
-              props.onInsertSectionBreak?.(type);
-            }
-            : undefined}
-          onInsertImage={props.onInsertImage
-            ? (options) => {
-              dismissSelectionToolbar();
-              props.onInsertImage?.(options);
-            }
-            : undefined}
-          onExport={runWithSelectionToolbarDismiss(props.onExport)}
-          activeStory={snapshot.activeStory}
-          onCloseStory={props.onCloseStory
-            ? runWithSelectionToolbarDismiss(props.onCloseStory)
-            : undefined}
-          onWorkspaceModeChange={(value) => {
-            dismissSelectionToolbar();
-            props.onWorkspaceModeChange(value);
-          }}
-          onZoomChange={props.onZoomChange
-            ? (level) => {
-              dismissSelectionToolbar();
-              props.onZoomChange?.(level);
-            }
-            : undefined}
-          onShowTrackedChangesChange={(show) => {
-            dismissSelectionToolbar();
-            props.onShowTrackedChangesChange(show);
-          }}
-          blockedReasons={blockedReasons}
-        /> : null}
+        {chromeVisibility.toolbar ? (
+          <div className="px-3 pt-3">
+            <ChromePresetToolbar
+              chromePreset={chromePreset}
+              capabilities={caps}
+              compatibility={snapshot.compatibility}
+              warnings={snapshot.warnings}
+              blockedReasons={blockedReasons}
+              showDiagnosticsChrome={chromeVisibility.alerts}
+              interactionPolicy={toolbarInteractionPolicy}
+              workspaceMode={props.workspaceMode}
+              zoomLevel={props.zoomLevel}
+              formattingState={props.formattingState}
+              activeListContext={props.activeListContext}
+              styleCatalog={props.styleCatalog}
+              showTrackedChanges={props.showTrackedChanges}
+              onUndo={runWithSelectionToolbarDismiss(props.onUndo)}
+              onRedo={runWithSelectionToolbarDismiss(props.onRedo)}
+              onSetParagraphStyle={props.onSetParagraphStyle
+                ? (styleId) => {
+                  dismissSelectionToolbar();
+                  props.onSetParagraphStyle?.(styleId);
+                }
+                : undefined}
+              onToggleBold={runWithSelectionToolbarDismiss(props.onToggleBold)}
+              onToggleItalic={runWithSelectionToolbarDismiss(props.onToggleItalic)}
+              onToggleUnderline={runWithSelectionToolbarDismiss(props.onToggleUnderline)}
+              onToggleStrikethrough={runWithSelectionToolbarDismiss(props.onToggleStrikethrough)}
+              onToggleSuperscript={runWithSelectionToolbarDismiss(props.onToggleSuperscript)}
+              onToggleSubscript={runWithSelectionToolbarDismiss(props.onToggleSubscript)}
+              onSetFontFamily={props.onSetFontFamily
+                ? (fontFamily) => {
+                  dismissSelectionToolbar();
+                  props.onSetFontFamily?.(fontFamily);
+                }
+                : undefined}
+              onSetFontSize={props.onSetFontSize
+                ? (fontSize) => {
+                  dismissSelectionToolbar();
+                  props.onSetFontSize?.(fontSize);
+                }
+                : undefined}
+              onSetTextColor={props.onSetTextColor
+                ? (color) => {
+                  dismissSelectionToolbar();
+                  props.onSetTextColor?.(color);
+                }
+                : undefined}
+              onSetHighlightColor={props.onSetHighlightColor
+                ? (color) => {
+                  dismissSelectionToolbar();
+                  props.onSetHighlightColor?.(color);
+                }
+                : undefined}
+              onSetAlignment={props.onSetAlignment
+                ? (alignment) => {
+                  dismissSelectionToolbar();
+                  props.onSetAlignment?.(alignment);
+                }
+                : undefined}
+              onToggleBulletedList={runWithSelectionToolbarDismiss(props.onToggleBulletedList)}
+              onToggleNumberedList={runWithSelectionToolbarDismiss(props.onToggleNumberedList)}
+              onOutdent={runWithSelectionToolbarDismiss(props.onOutdent)}
+              onIndent={runWithSelectionToolbarDismiss(props.onIndent)}
+              onAddComment={runWithSelectionToolbarDismiss(props.onAddComment)}
+              onInsertPageBreak={runWithSelectionToolbarDismiss(props.onInsertPageBreak)}
+              onInsertTable={runWithSelectionToolbarDismiss(props.onInsertTable)}
+              onInsertSectionBreak={props.onInsertSectionBreak
+                ? (type) => {
+                  dismissSelectionToolbar();
+                  props.onInsertSectionBreak?.(type);
+                }
+                : undefined}
+              onInsertImage={props.onInsertImage
+                ? (options) => {
+                  dismissSelectionToolbar();
+                  props.onInsertImage?.(options);
+                }
+                : undefined}
+              onExport={runWithSelectionToolbarDismiss(props.onExport)}
+              activeStory={snapshot.activeStory}
+              onCloseStory={props.onCloseStory
+                ? runWithSelectionToolbarDismiss(props.onCloseStory)
+                : undefined}
+              onWorkspaceModeChange={(value) => {
+                dismissSelectionToolbar();
+                props.onWorkspaceModeChange(value);
+              }}
+              onZoomChange={props.onZoomChange
+                ? (level) => {
+                  dismissSelectionToolbar();
+                  props.onZoomChange?.(level);
+                }
+                : undefined}
+              onRestartNumbering={runWithSelectionToolbarDismiss(props.onRestartNumbering)}
+              onContinueNumbering={runWithSelectionToolbarDismiss(props.onContinueNumbering)}
+              onUpdateFields={runWithSelectionToolbarDismiss(props.onUpdateFields)}
+              onUpdateTableOfContents={runWithSelectionToolbarDismiss(props.onUpdateTableOfContents)}
+              onShowTrackedChangesChange={(show) => {
+                dismissSelectionToolbar();
+                props.onShowTrackedChangesChange(show);
+              }}
+            />
+          </div>
+        ) : null}
+
+        {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}
 
         {chromeVisibility.alerts ? <TwAlertBanner
           snapshot={snapshot}
@@ -527,16 +578,17 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
           {/* Document column */}
           <div className="flex flex-1 flex-col min-w-0">
             <div
-              className={`flex-1 overflow-y-auto ${isPageWorkspace ? "bg-surface" : "bg-canvas"}`}
+              className="flex-1 overflow-y-auto bg-surface"
               data-wre-scroll-root="true"
             >
               <div
                 ref={selectionToolbarRootRef}
-                className={`mx-auto min-h-full ${
+                className={`mx-auto min-h-full w-full ${
                   isPageWorkspace
                     ? "wre-page-chrome wre-page-surface relative max-w-[840px] my-8 overflow-hidden"
-                    : "wre-canvas-surface relative bg-canvas"
+                    : "wre-canvas-surface relative my-8 overflow-hidden"
                 }`}
+                data-zoom-bucket={pageZoomBucket}
                 style={isPageWorkspace && zoomScale !== 1 ? { transform: `scale(${zoomScale})`, transformOrigin: "top center" } : undefined}
               >
                 {isPageWorkspace && chromeVisibility.pageChrome && snapshot.pageLayout ? (
@@ -686,139 +738,47 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                     />
                   </div>
                 ) : null}
-                {chromeVisibility.contextToolbars && contextualSurface ? (
-                  <div className="px-5 pt-3 space-y-3">
-                    {contextualSurface === "table" ? (
-                      <TwTableContextToolbar
-                        disabled={!allowLocalChromeMutations}
-                        tableStyles={props.styleCatalog?.tables ?? []}
-                        onSetTableStyle={props.onSetTableStyle
-                          ? (styleId) => {
-                            dismissSelectionToolbar();
-                            props.onSetTableStyle?.(styleId);
-                          }
-                          : undefined}
-                        onAddRowBefore={runWithSelectionToolbarDismiss(props.onAddRowBefore)}
-                        onAddRowAfter={runWithSelectionToolbarDismiss(props.onAddRowAfter)}
-                        onAddColumnBefore={runWithSelectionToolbarDismiss(props.onAddColumnBefore)}
-                        onAddColumnAfter={runWithSelectionToolbarDismiss(props.onAddColumnAfter)}
-                        onDeleteRow={runWithSelectionToolbarDismiss(props.onDeleteRow)}
-                        onDeleteColumn={runWithSelectionToolbarDismiss(props.onDeleteColumn)}
-                        onDeleteTable={runWithSelectionToolbarDismiss(props.onDeleteTable)}
-                        onMergeCells={runWithSelectionToolbarDismiss(props.onMergeCells)}
-                        onSplitCell={runWithSelectionToolbarDismiss(props.onSplitCell)}
-                        onSetCellBackground={props.onSetCellBackground
-                          ? (color) => {
-                            dismissSelectionToolbar();
-                            props.onSetCellBackground?.(color);
-                          }
-                          : undefined}
-                      />
-                    ) : null}
-                    {contextualSurface === "image" && props.activeImageContext ? (
-                      <TwImageContextToolbar
-                        activeImage={props.activeImageContext}
-                        disabled={!allowLocalChromeMutations}
-                        onSetImageLayout={props.onSetImageLayout
-                          ? (mediaId, dimensions) => {
-                            dismissSelectionToolbar();
-                            props.onSetImageLayout?.(mediaId, dimensions);
-                          }
-                          : undefined}
-                        onSetImageFrame={props.onSetImageFrame
-                          ? (mediaId, offsets) => {
-                            dismissSelectionToolbar();
-                            props.onSetImageFrame?.(mediaId, offsets);
-                          }
-                          : undefined}
-                      />
-                    ) : null}
-                    {contextualSurface === "object" && props.activeObjectContext ? (
-                      <TwObjectContextToolbar activeObject={props.activeObjectContext} />
-                    ) : null}
-                  </div>
-                ) : null}
-                {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"
-                      data-placement={selectionToolbarPlacement.placement}
-                      style={selectionToolbarPlacement.style}
-                    >
-                      <TwSelectionToolbar
-                        ref={props.selectionToolbarRef}
-                        model={props.selectionToolbar}
-                        disabledReason={props.selectionToolbar.disabledReason}
-                        onFocusCapture={props.onSelectionToolbarFocusCapture}
-                        onBlurCapture={props.onSelectionToolbarBlurCapture}
-                        onToggleBold={props.onToggleBold}
-                        onToggleItalic={props.onToggleItalic}
-                        onToggleUnderline={props.onToggleUnderline}
-                        onSetTextColor={props.onSetSelectionTextColor}
-                        onSetHighlightColor={props.onSetSelectionHighlightColor}
-                        onAddComment={props.onAddCommentFromSelection ?? props.onAddComment}
-                      />
-                    </div>
-                  </div>
-                ) : null}
-                {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"
-                  >
-                    <div className="pointer-events-auto" data-placement="fallback">
-                      <TwSelectionToolbar
-                        ref={props.selectionToolbarRef}
-                        model={props.selectionToolbar}
-                        disabledReason={props.selectionToolbar.disabledReason}
-                        onFocusCapture={props.onSelectionToolbarFocusCapture}
-                        onBlurCapture={props.onSelectionToolbarBlurCapture}
-                        onToggleBold={props.onToggleBold}
-                        onToggleItalic={props.onToggleItalic}
-                        onToggleUnderline={props.onToggleUnderline}
-                        onSetTextColor={props.onSetSelectionTextColor}
-                        onSetHighlightColor={props.onSetSelectionHighlightColor}
-                        onAddComment={props.onAddCommentFromSelection ?? props.onAddComment}
-                      />
-                    </div>
-                  </div>
+                {chromeVisibility.selectionOverlay && gatedSelectionTool ? (
+                  <TwSelectionToolHost
+                    tool={gatedSelectionTool}
+                    contextAnalytics={
+                      chromeVisibility.contextAnalytics
+                        ? props.selectionContextAnalytics
+                        : null
+                    }
+                    placement={selectionToolbarPlacement}
+                    rootRef={props.selectionToolbarRef}
+                    onFocusCapture={props.onSelectionToolbarFocusCapture}
+                    onBlurCapture={props.onSelectionToolbarBlurCapture}
+                    onToggleBold={props.onToggleBold}
+                    onToggleItalic={props.onToggleItalic}
+                    onToggleUnderline={props.onToggleUnderline}
+                    onSetTextColor={props.onSetSelectionTextColor}
+                    onSetHighlightColor={props.onSetSelectionHighlightColor}
+                    onAddComment={
+                      gatedSelectionTool.kind === "suggestion-review"
+                        ? (props.onAddCommentFromSuggestion ?? props.onAddComment)
+                        : (props.onAddCommentFromSelection ?? props.onAddComment)
+                    }
+                    onAcceptSuggestion={props.onAcceptSuggestion}
+                    onRejectSuggestion={props.onRejectSuggestion}
+                    onEditSuggestion={props.onEditSuggestion}
+                    onSetTableStyle={props.onSetTableStyle}
+                    onAddRowBefore={props.onAddRowBefore}
+                    onAddRowAfter={props.onAddRowAfter}
+                    onAddColumnBefore={props.onAddColumnBefore}
+                    onAddColumnAfter={props.onAddColumnAfter}
+                    onDeleteRow={props.onDeleteRow}
+                    onDeleteColumn={props.onDeleteColumn}
+                    onDeleteTable={props.onDeleteTable}
+                    onMergeCells={props.onMergeCells}
+                    onSplitCell={props.onSplitCell}
+                    onSetCellBackground={props.onSetCellBackground}
+                    onSetImageLayout={props.onSetImageLayout}
+                    onSetImageFrame={props.onSetImageFrame}
+                    onRestartNumbering={props.onRestartNumbering}
+                    onContinueNumbering={props.onContinueNumbering}
+                  />
                 ) : null}
                 <div
                   className={isPageWorkspace ? "relative" : undefined}
@@ -860,10 +820,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                       {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"
+                          className="relative z-10 flex items-center justify-between border-b border-border/50 bg-surface/45 px-4 text-[11px] text-secondary backdrop-blur-[1px]"
                           style={pageShellMetrics.headerBandStyle}
                         >
-                          <span className="uppercase tracking-[0.12em] text-tertiary">Header</span>
+                          <span className="uppercase tracking-[0.12em] text-tertiary">{headerBandLabel}</span>
                           {snapshot.pageLayout?.headerVariants[0] ? (
                             <button
                               type="button"
@@ -890,10 +850,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                       {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"
+                          className="relative z-10 flex items-center justify-between border-t border-border/50 bg-surface/45 px-4 text-[11px] text-secondary backdrop-blur-[1px]"
                           style={pageShellMetrics.footerBandStyle}
                         >
-                          <span className="uppercase tracking-[0.12em] text-tertiary">Footer</span>
+                          <span className="uppercase tracking-[0.12em] text-tertiary">{footerBandLabel}</span>
                           {snapshot.pageLayout?.footerVariants[0] ? (
                             <button
                               type="button"
@@ -920,6 +880,11 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                 commentCount={snapshot.comments.totalCount}
                 changeCount={snapshot.trackedChanges.totalCount}
                 sessionId={snapshot.sessionId}
+                contextAnalytics={
+                  chromeVisibility.contextAnalytics
+                    ? props.documentContextAnalytics
+                    : null
+                }
               />
             ) : null}
           </div>
@@ -933,6 +898,11 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
             compatibility={snapshot.compatibility}
             warnings={snapshot.warnings}
             markupDisplay={markupDisplay}
+            contextAnalytics={
+              chromeVisibility.contextAnalytics
+                ? props.currentScopeContextAnalytics
+                : null
+            }
             activeCommentId={props.activeCommentId}
             activeRevisionId={props.activeRevisionId}
             onActiveTabChange={props.onActiveRailTabChange}
@@ -971,22 +941,68 @@ function resolveActiveParagraphLayout(
   rightIndent: number;
   firstLineOffset: number;
   tabStops: Array<{ pos: number; val?: string; leader?: string }>;
+  indentationReadOnly?: boolean;
+  tabStopsReadOnly?: boolean;
 } | null {
   const paragraph = surface ? findActiveParagraph(surface.blocks, position) : null;
   if (!paragraph) {
     return null;
   }
+  const resolvedIndentation = paragraph.resolvedNumbering?.geometry.indentation;
+  const resolvedTabStops = paragraph.resolvedNumbering?.geometry.tabStops;
+  const indentation = resolvedIndentation ?? paragraph.indentation;
+  const tabStops = resolvedTabStops ?? paragraph.tabStops;
 
   return {
-    leftIndent: paragraph.indentation?.left ?? 0,
-    rightIndent: paragraph.indentation?.right ?? 0,
+    leftIndent: indentation?.left ?? 0,
+    rightIndent: indentation?.right ?? 0,
     firstLineOffset:
-      paragraph.indentation?.firstLine ??
-      (paragraph.indentation?.hanging ? -paragraph.indentation.hanging : 0),
-    tabStops: paragraph.tabStops ? [...paragraph.tabStops] : [],
+      indentation?.firstLine ??
+      (indentation?.hanging ? -indentation.hanging : 0),
+    tabStops: tabStops ? [...tabStops] : [],
+    indentationReadOnly:
+      Boolean(resolvedIndentation) &&
+      !areIndentationsEqual(resolvedIndentation, paragraph.indentation),
+    tabStopsReadOnly:
+      Boolean(resolvedTabStops) &&
+      !areTabStopsEqual(resolvedTabStops, paragraph.tabStops),
   };
 }
 
+function areIndentationsEqual(
+  left:
+    | Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["indentation"]
+    | undefined,
+  right:
+    | Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["indentation"]
+    | undefined,
+): boolean {
+  return (
+    left?.left === right?.left &&
+    left?.right === right?.right &&
+    left?.firstLine === right?.firstLine &&
+    left?.hanging === right?.hanging
+  );
+}
+
+function areTabStopsEqual(
+  left: ReadonlyArray<{ pos: number; val?: string; leader?: string }> | undefined,
+  right: ReadonlyArray<{ pos: number; val?: string; leader?: string }> | undefined,
+): boolean {
+  if (!left?.length && !right?.length) {
+    return true;
+  }
+  if (!left || !right || left.length !== right.length) {
+    return false;
+  }
+  return left.every(
+    (tabStop, index) =>
+      tabStop.pos === right[index]?.pos &&
+      tabStop.val === right[index]?.val &&
+      tabStop.leader === right[index]?.leader,
+  );
+}
+
 function findActiveParagraph(
   blocks: readonly SurfaceBlockSnapshot[],
   position: number,
@@ -1120,6 +1136,9 @@ function buildPageShellMetrics(
     },
     pageFrameStyle: {
       backgroundColor: "var(--color-page-bg)",
+      borderRadius: "8px",
+      boxShadow: "0 24px 48px -32px rgba(15, 23, 42, 0.38), 0 8px 20px -18px rgba(15, 23, 42, 0.22)",
+      border: "1px solid rgba(148, 163, 184, 0.2)",
     },
     headerBandStyle: {
       minHeight: `${headerBandHeightPx}px`,
@@ -1130,6 +1149,30 @@ function buildPageShellMetrics(
   };
 }
 
+function resolvePageBandLabel(
+  region: "header" | "footer",
+  activeStory: RuntimeRenderSnapshot["activeStory"],
+): string {
+  const regionLabel = region === "header" ? "header" : "footer";
+  let label: string;
+  if (activeStory.kind !== region) {
+    label = region === "header" ? "Header" : "Footer";
+  } else {
+    switch (activeStory.variant) {
+      case "first":
+        label = `First page ${regionLabel}`;
+        break;
+      case "even":
+        label = `Even page ${regionLabel}`;
+        break;
+      default:
+        label = `Default ${regionLabel}`;
+        break;
+    }
+  }
+  return label;
+}
+
 function buildLineNumberMarkers(
   blocks: readonly SurfaceBlockSnapshot[],
   pages: ReadonlyArray<DocumentNavigationSnapshot["pages"][number]>,
@@ -1316,7 +1359,7 @@ function createInsetValue(spaceTwips: number | undefined, percent: number): stri
 }
 
 function resolveSelectionToolbarPlacement(
-  anchor: SelectionToolbarAnchor | null | undefined,
+  anchor: SelectionToolAnchor | null | undefined,
   root: HTMLDivElement | null,
   zoomScale: number,
 ): { placement: "right" | "left" | "above" | "below"; style: CSSProperties } | null {