@beyondwork/docx-react-component 1.0.29 → 1.0.30

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

@@ -0,0 +1,1460 @@
+import React, {
+  type CSSProperties,
+  type FocusEventHandler,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { ChevronLeft, ChevronRight, List } from "lucide-react";
+
+import type {
+  ActiveListContext,
+  CommentSidebarThreadSnapshot,
+  DocumentNavigationSnapshot,
+  EditorViewStateSnapshot,
+  FormattingStateSnapshot,
+  FormattingAlignment,
+  HeaderFooterLinkPatch,
+  InteractionGuardSnapshot,
+  InsertImageOptions,
+  RuntimeContextAnalyticsSnapshot,
+  RuntimeRenderSnapshot,
+  ReviewQueueSnapshot,
+  SectionPageNumberingPatch,
+  SectionBreakType,
+  StyleCatalogSnapshot,
+  SurfaceBlockSnapshot,
+  TrackedChangeEntrySnapshot,
+  WordReviewEditorChromeOptions,
+  WordReviewEditorChromePreset,
+  WordReviewEditorChromeVisibility,
+  WorkflowScopeSnapshot,
+  WorkspaceMode,
+  ZoomLevel,
+} from "../api/public-types";
+import { findPageForOffset } from "../runtime/document-navigation.ts";
+import {
+  DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP,
+  estimateBlockHeight,
+  estimateParagraphLineCount,
+  estimateParagraphLineHeight,
+  getUsableColumnWidth,
+} from "../runtime/page-layout-estimation.ts";
+import {
+  incrementInvalidationCounter,
+  recordPerfSample,
+} from "./editor-surface/perf-probe.ts";
+import { computeLineMarkersIfEnabled } from "./page-chrome-model.ts";
+import type { SessionCapabilities } from "../runtime/session-capabilities";
+import type {
+  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 { TwLayoutPanel } from "./chrome/tw-layout-panel";
+import { TwPageRuler } from "./chrome/tw-page-ruler";
+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 { type ToolbarInteractionPolicy } from "./toolbar/tw-toolbar";
+
+export type ReviewWorkspaceChromeVisibility = WordReviewEditorChromeVisibility;
+
+export interface TwReviewWorkspaceProps {
+  snapshot: RuntimeRenderSnapshot;
+  viewState: EditorViewStateSnapshot;
+  markupDisplay: MarkupDisplay;
+  currentUserId?: string;
+  capabilities?: SessionCapabilities;
+  reviewMode?: "editing" | "review";
+  document: ReactNode;
+  workspaceMode: WorkspaceMode;
+  zoomLevel?: ZoomLevel;
+  formattingState?: FormattingStateSnapshot;
+  activeListContext?: ActiveListContext | null;
+  styleCatalog?: StyleCatalogSnapshot;
+  activeRailTab: ReviewRailTab;
+  activeCommentId?: string;
+  activeRevisionId?: string;
+  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;
+  activeSelectionTool?: ActiveSelectionToolModel | null;
+  selectionToolAnchor?: SelectionToolAnchor | null;
+  documentNavigation?: DocumentNavigationSnapshot;
+  onWorkspaceModeChange?: (value: WorkspaceMode) => void;
+  onZoomChange?: (level: ZoomLevel) => void;
+  onActiveRailTabChange?: (value: ReviewRailTab) => void;
+  onShowTrackedChangesChange?: (show: boolean) => void;
+  onUndo?: () => void;
+  onRedo?: () => void;
+  onSetParagraphStyle?: (styleId: string) => void;
+  onToggleBold?: () => void;
+  onToggleItalic?: () => void;
+  onToggleUnderline?: () => void;
+  onSetSelectionTextColor?: (color: string) => void;
+  onSetSelectionHighlightColor?: (color: string | null) => void;
+  onToggleStrikethrough?: () => void;
+  onToggleSuperscript?: () => void;
+  onToggleSubscript?: () => void;
+  onSetFontFamily?: (fontFamily: string) => void;
+  onSetFontSize?: (fontSize: number) => void;
+  onSetTextColor?: (color: string) => void;
+  onSetHighlightColor?: (color: string | null) => void;
+  onSetAlignment?: (alignment: FormattingAlignment) => void;
+  onToggleBulletedList?: () => void;
+  onToggleNumberedList?: () => void;
+  onOutdent?: () => void;
+  onIndent?: () => void;
+  onAddComment?: () => void;
+  onInsertPageBreak?: () => void;
+  onInsertTable?: () => void;
+  onInsertSectionBreak?: (type: SectionBreakType) => void;
+  onInsertImage?: (options: InsertImageOptions) => void;
+  onSetTableStyle?: (styleId: string) => void;
+  onAddRowBefore?: () => void;
+  onAddRowAfter?: () => void;
+  onAddColumnBefore?: () => void;
+  onAddColumnAfter?: () => void;
+  onDeleteRow?: () => void;
+  onDeleteColumn?: () => void;
+  onDeleteTable?: () => void;
+  onMergeCells?: () => void;
+  onSplitCell?: () => void;
+  onSetCellBackground?: (color: string) => void;
+  onSetImageLayout?: (
+    mediaId: string,
+    dimensions: { widthEmu: number; heightEmu: number },
+  ) => void;
+  onSetImageFrame?: (
+    mediaId: string,
+    offsets: { horizontalOffsetEmu?: number; verticalOffsetEmu?: number },
+  ) => void;
+  onDeleteSectionBreak?: (sectionIndex: number) => void;
+  onUpdateSectionLayout?: (
+    sectionIndex: number,
+    patch: {
+      pageSize?: { width?: number; height?: number; orientation?: "portrait" | "landscape" };
+      pageMargins?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+        header?: number;
+        footer?: number;
+        gutter?: number;
+      };
+      columns?: {
+        count?: number;
+        space?: number;
+        equalWidth?: boolean;
+        columns?: Array<{ width: number; space?: number }>;
+        separator?: boolean;
+      };
+      titlePage?: boolean;
+      sectionType?: SectionBreakType;
+    },
+  ) => void;
+  onSetSectionPageNumbering?: (
+    sectionIndex: number,
+    patch: SectionPageNumberingPatch | null,
+  ) => void;
+  onSetHeaderFooterLink?: (
+    sectionIndex: number,
+    patch: HeaderFooterLinkPatch,
+  ) => void;
+  onAddCommentFromSelection?: () => void;
+  onExport?: () => void;
+  onDismissSelectionToolbar?: () => void;
+  onAcceptSuggestion?: () => void;
+  onRejectSuggestion?: () => void;
+  onEditSuggestion?: () => void;
+  onAddCommentFromSuggestion?: () => void;
+  onSelectionToolbarFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onSelectionToolbarBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  selectionToolbarRef?: Ref<HTMLDivElement>;
+  onOpenComment?: (thread: CommentSidebarThreadSnapshot) => void;
+  onResolveComment?: (commentId: string) => void;
+  onReopenComment?: (commentId: string) => void;
+  onAddReply?: (commentId: string, body: string) => void;
+  onEditBody?: (commentId: string, body: string) => void;
+  onOpenRevision?: (revision: TrackedChangeEntrySnapshot) => void;
+  onAcceptRevision?: (revisionId: string) => void;
+  onRejectRevision?: (revisionId: string) => void;
+  onAcceptAllChanges?: () => void;
+  onRejectAllChanges?: () => void;
+  onCloseStory?: () => void;
+  onOpenHeaderStory?: () => void;
+  onOpenFooterStory?: () => void;
+  onSetParagraphIndentation?: (indentation: {
+    left?: number;
+    right?: number;
+    firstLine?: number;
+    hanging?: number;
+  }) => void;
+  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>;
+}
+
+export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
+  const props = {
+    ...inputProps,
+    ...inputProps.commands,
+  } as TwReviewWorkspaceProps & EditorCommandBag;
+  const { snapshot, viewState } = props;
+  const selectionToolbarRootRef = useRef<HTMLDivElement>(null);
+  const caps = props.capabilities;
+  const isPageWorkspace = props.workspaceMode === "page";
+  const markupDisplay = props.markupDisplay;
+  const [navOpen, setNavOpen] = useState(false);
+  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",
+    ).length;
+  const blockedReasons =
+    props.interactionGuardSnapshot?.blockedReasons ??
+    props.workflowScopeSnapshot?.blockedReasons ??
+    [];
+  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";
+  const footerVariant = snapshot.pageLayout?.footerVariants[0]?.variant ?? "default";
+  const selectionPosition =
+    viewState.selection.activeRange.kind === "node"
+      ? viewState.selection.activeRange.at
+      : viewState.selection.head;
+  const shouldResolveActiveParagraphLayout =
+    isPageWorkspace &&
+    chromeVisibility.pageChrome &&
+    layoutToolsOpen;
+  const activeParagraphLayout = useMemo(
+    () =>
+      shouldResolveActiveParagraphLayout
+        ? resolveActiveParagraphLayout(snapshot.surface, selectionPosition)
+        : null,
+    [selectionPosition, shouldResolveActiveParagraphLayout, snapshot.surface],
+  );
+  const pageChromeModel = useMemo(
+    () =>
+      buildPageChromeModel(
+        snapshot.surface,
+        snapshot.pageLayout,
+        props.documentNavigation,
+        snapshot.activeStory,
+      ),
+    [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(() => {
+    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 pageChromeReadOnly =
+    snapshot.readOnly ||
+    snapshot.activeStory.kind !== "main" ||
+    effectiveSelectionMode !== "edit";
+  const toolbarInteractionPolicy: ToolbarInteractionPolicy | undefined = caps
+    ? {
+        mode: effectiveSelectionMode,
+        canFormatText: caps.canEdit && effectiveSelectionMode === "edit",
+        canInsertStructural: caps.canEdit && effectiveSelectionMode === "edit",
+        canAddComment:
+          caps.canAddComment &&
+          effectiveSelectionMode !== "view" &&
+          effectiveSelectionMode !== "blocked",
+      }
+    : undefined;
+
+  useEffect(() => {
+    recordPerfSample("workspace.chrome");
+    incrementInvalidationCounter("workspace.chrome.recomputes");
+  }, [activeParagraphLayout, pageChromeModel, pageShellMetrics]);
+
+  useEffect(() => {
+    if (isPageWorkspace && snapshot.activeStory.kind !== "main") {
+      setLayoutToolsOpen(true);
+    }
+  }, [isPageWorkspace, snapshot.activeStory.kind]);
+
+  const dismissSelectionToolbar = useCallback(() => {
+    props.onDismissSelectionToolbar?.();
+  }, [props.onDismissSelectionToolbar]);
+
+  const runWithSelectionToolbarDismiss = useCallback(
+    (action?: () => void) => () => {
+      dismissSelectionToolbar();
+      action?.();
+    },
+    [dismissSelectionToolbar],
+  );
+
+  return (
+    <Tooltip.Provider delayDuration={400}>
+      <div className="flex h-full flex-col bg-canvas text-primary">
+        {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}
+          preserveOnlyCount={preserveOnlyCount}
+          workflowBlockedReasons={blockedReasons}
+        /> : null}
+
+        <div className="flex flex-1 min-h-0">
+          {/* Collapsible document navigator — page mode only */}
+          {isPageWorkspace && chromeVisibility.pageChrome ? (
+            <aside
+              aria-label="Document navigator"
+              className={`shrink-0 border-r border-border bg-surface transition-[width] duration-200 ${
+                navOpen ? "w-48" : "w-0"
+              } overflow-hidden`}
+            >
+              {navOpen ? (
+                <div className="flex h-full flex-col">
+                  <div className="flex items-center justify-between px-3 py-2 border-b border-border">
+                    <span className="text-xs font-medium text-secondary uppercase tracking-wider">Navigator</span>
+                    <Tooltip.Root>
+                      <Tooltip.Trigger asChild>
+                        <button
+                          type="button"
+                          aria-label="Collapse navigator"
+                          onMouseDown={preserveEditorSelectionMouseDown}
+                          onClick={() => {
+                            dismissSelectionToolbar();
+                            setNavOpen(false);
+                          }}
+                          className="inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary hover:bg-surface-hover transition-colors"
+                        >
+                          <ChevronLeft 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}>
+                          Collapse navigator
+                        </Tooltip.Content>
+                      </Tooltip.Portal>
+                    </Tooltip.Root>
+                  </div>
+                  <nav className="flex-1 overflow-y-auto px-2 py-2" aria-label="Document headings">
+                    {headings.length > 0 ? (
+                      <ul className="space-y-0.5">
+                        {headings.map((entry) => (
+                          <li key={entry.headingId}>
+                            <button
+                              type="button"
+                              className="block w-full truncate rounded-md px-2 py-1 text-left text-xs text-primary hover:bg-surface-hover"
+                              style={{ paddingLeft: `${8 + (entry.level - 1) * 12}px` }}
+                              onMouseDown={preserveEditorSelectionMouseDown}
+                              onClick={() => {
+                                dismissSelectionToolbar();
+                                props.onNavigateHeading?.(entry.headingId);
+                                setNavOpen(false);
+                              }}
+                            >
+                              {entry.text}
+                            </button>
+                          </li>
+                        ))}
+                      </ul>
+                    ) : (
+                      <p className="px-2 py-4 text-xs text-tertiary">No headings found.</p>
+                    )}
+                  </nav>
+                </div>
+              ) : null}
+            </aside>
+          ) : null}
+
+          {/* Navigator expand toggle — page mode only when collapsed */}
+          {isPageWorkspace && chromeVisibility.pageChrome && !navOpen ? (
+            <div className="shrink-0 flex items-start pt-2 pl-1">
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <button
+                    type="button"
+                    aria-label="Open document navigator"
+                    onMouseDown={preserveEditorSelectionMouseDown}
+                    onClick={() => {
+                      dismissSelectionToolbar();
+                      setNavOpen(true);
+                    }}
+                    className="inline-flex h-7 w-7 items-center justify-center rounded-md text-secondary hover:bg-surface-hover transition-colors"
+                  >
+                    <List 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}>
+                    Open document navigator
+                  </Tooltip.Content>
+                </Tooltip.Portal>
+              </Tooltip.Root>
+            </div>
+          ) : null}
+
+          {/* Document column */}
+          <div className="flex flex-1 flex-col min-w-0">
+            <div
+              className="flex-1 overflow-y-auto bg-surface"
+              data-wre-scroll-root="true"
+            >
+              <div
+                ref={selectionToolbarRootRef}
+                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 my-8 overflow-hidden"
+                }`}
+                data-zoom-bucket={pageZoomBucket}
+                style={isPageWorkspace && zoomScale !== 1 ? { transform: `scale(${zoomScale})`, transformOrigin: "top center" } : undefined}
+              >
+                {isPageWorkspace && chromeVisibility.pageChrome && snapshot.pageLayout ? (
+                  <div className="border-b border-border/70 bg-surface/65 px-5 py-3" data-testid="page-context-summary">
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <div className="flex flex-wrap items-center gap-2 text-xs text-secondary">
+                        <span className="rounded-full bg-canvas px-2 py-1 font-medium text-primary">
+                          {activePage
+                            ? `Page ${activePage.pageIndex + 1} of ${props.documentNavigation?.pageCount ?? 1}`
+                            : "Page workspace"}
+                        </span>
+                        <span>{`Section ${snapshot.pageLayout.sectionIndex + 1}`}</span>
+                        <span className="uppercase tracking-[0.12em] text-tertiary">
+                          {snapshot.pageLayout.orientation}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        {snapshot.activeStory.kind !== "main" ? (
+                          <button
+                            type="button"
+                            aria-label="Return to document body"
+                            onMouseDown={preserveEditorSelectionMouseDown}
+                            onClick={runWithSelectionToolbarDismiss(props.onCloseStory)}
+                            className="inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface"
+                          >
+                            Body
+                          </button>
+                        ) : null}
+                        {snapshot.activeStory.kind === "main" && snapshot.pageLayout.sectionIndex > 0 ? (
+                          <>
+                            <button
+                              type="button"
+                              aria-label="Link header to previous"
+                              disabled={!props.onSetHeaderFooterLink || !allowLocalChromeMutations}
+                              onMouseDown={preserveEditorSelectionMouseDown}
+                              onClick={() => {
+                                dismissSelectionToolbar();
+                                props.onSetHeaderFooterLink?.(snapshot.pageLayout!.sectionIndex, {
+                                  kind: "header",
+                                  variant: headerVariant,
+                                  linkToPrevious: true,
+                                });
+                              }}
+                              className="inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
+                            >
+                              Link header
+                            </button>
+                            <button
+                              type="button"
+                              aria-label="Link footer to previous"
+                              disabled={!props.onSetHeaderFooterLink || !allowLocalChromeMutations}
+                              onMouseDown={preserveEditorSelectionMouseDown}
+                              onClick={() => {
+                                dismissSelectionToolbar();
+                                props.onSetHeaderFooterLink?.(snapshot.pageLayout!.sectionIndex, {
+                                  kind: "footer",
+                                  variant: footerVariant,
+                                  linkToPrevious: true,
+                                });
+                              }}
+                              className="inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
+                            >
+                              Link footer
+                            </button>
+                          </>
+                        ) : null}
+                        <button
+                          type="button"
+                          aria-label="Toggle layout tools"
+                          aria-expanded={layoutToolsOpen}
+                          onMouseDown={preserveEditorSelectionMouseDown}
+                          onClick={() => {
+                            dismissSelectionToolbar();
+                            setLayoutToolsOpen((open) => !open);
+                          }}
+                          className="inline-flex items-center gap-1 rounded-md border border-border bg-canvas px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface"
+                        >
+                          <ChevronRight className={`h-3.5 w-3.5 transition-transform ${layoutToolsOpen ? "rotate-90" : ""}`} />
+                          Layout tools
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ) : null}
+                {isPageWorkspace && chromeVisibility.pageChrome && snapshot.pageLayout && layoutToolsOpen ? (
+                  <div className="px-5 pt-3">
+                    <TwPageRuler
+                      pageLayout={snapshot.pageLayout}
+                      viewState={viewState}
+                      paragraphLayout={activeParagraphLayout}
+                      readOnly={pageChromeReadOnly}
+                      onReturnToBody={props.onCloseStory
+                        ? runWithSelectionToolbarDismiss(props.onCloseStory)
+                        : () => undefined}
+                      onOpenHeader={props.onOpenHeaderStory
+                        ? runWithSelectionToolbarDismiss(props.onOpenHeaderStory)
+                        : undefined}
+                      onOpenFooter={props.onOpenFooterStory
+                        ? runWithSelectionToolbarDismiss(props.onOpenFooterStory)
+                        : undefined}
+                      onSetIndentation={props.onSetParagraphIndentation
+                        ? (indentation) => {
+                          dismissSelectionToolbar();
+                          props.onSetParagraphIndentation?.(indentation);
+                        }
+                        : undefined}
+                      onSetTabStops={props.onSetParagraphTabStops
+                        ? (tabStops) => {
+                          dismissSelectionToolbar();
+                          props.onSetParagraphTabStops?.(tabStops);
+                        }
+                        : undefined}
+                      onRestartNumbering={props.onRestartNumbering
+                        ? runWithSelectionToolbarDismiss(props.onRestartNumbering)
+                        : undefined}
+                      onContinueNumbering={props.onContinueNumbering
+                        ? runWithSelectionToolbarDismiss(props.onContinueNumbering)
+                        : undefined}
+                    />
+                    <TwLayoutPanel
+                      pageLayout={snapshot.pageLayout}
+                      readOnly={pageChromeReadOnly}
+                      onInsertSectionBreak={props.onInsertSectionBreak
+                        ? (type) => {
+                          dismissSelectionToolbar();
+                          props.onInsertSectionBreak?.(type);
+                        }
+                        : undefined}
+                      onDeleteSectionBreak={props.onDeleteSectionBreak
+                        ? (sectionIndex) => {
+                          dismissSelectionToolbar();
+                          props.onDeleteSectionBreak?.(sectionIndex);
+                        }
+                        : undefined}
+                      onUpdateSectionLayout={props.onUpdateSectionLayout
+                        ? (sectionIndex, patch) => {
+                          dismissSelectionToolbar();
+                          props.onUpdateSectionLayout?.(sectionIndex, patch);
+                        }
+                        : undefined}
+                      onSetSectionPageNumbering={props.onSetSectionPageNumbering
+                        ? (sectionIndex, patch) => {
+                          dismissSelectionToolbar();
+                          props.onSetSectionPageNumbering?.(sectionIndex, patch);
+                        }
+                        : undefined}
+                    />
+                  </div>
+                ) : null}
+                {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}
+                  data-line-numbering={pageChromeModel.lineNumberingEnabled ? "enabled" : "disabled"}
+                >
+                  {isPageWorkspace && chromeVisibility.pageChrome && pageChromeModel.lineNumberingEnabled ? (
+                    <div
+                      aria-hidden="true"
+                      className="pointer-events-none absolute inset-y-0 left-0 z-10"
+                      data-testid="page-line-number-gutter"
+                      style={{ width: `${pageChromeModel.gutterWidthPx}px` }}
+                    >
+                      {pageChromeModel.lineMarkers.map((marker) => (
+                        <span
+                          key={marker.id}
+                          className="absolute right-2 font-[family-name:var(--font-legal-sans)] text-[10px] font-medium tabular-nums tracking-[0.12em] text-tertiary/80"
+                          style={{ top: `${marker.topPx}px` }}
+                        >
+                          {marker.label}
+                        </span>
+                      ))}
+                    </div>
+                  ) : null}
+                  <div
+                    className={isPageWorkspace && chromeVisibility.pageChrome && pageChromeModel.lineNumberingEnabled ? "pl-12" : undefined}
+                    style={isPageWorkspace ? pageShellMetrics.contentInsetStyle : undefined}
+                  >
+                    <div
+                      className={isPageWorkspace ? "relative" : undefined}
+                      data-document-grid={pageChromeModel.documentGridType}
+                      data-page-border-display={pageChromeModel.pageBorderDisplay}
+                      style={isPageWorkspace
+                        ? {
+                            ...pageChromeModel.documentGridStyle,
+                            ...pageShellMetrics.pageFrameStyle,
+                          }
+                        : pageChromeModel.documentGridStyle}
+                    >
+                      {isPageWorkspace && chromeVisibility.pageChrome ? (
+                        <div
+                          data-testid="page-header-band"
+                          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">{headerBandLabel}</span>
+                          {snapshot.pageLayout?.headerVariants[0] ? (
+                            <button
+                              type="button"
+                              aria-label="Open header story"
+                              onClick={props.onOpenHeaderStory}
+                              className="rounded-md px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface"
+                            >
+                              Edit header
+                            </button>
+                          ) : null}
+                        </div>
+                      ) : null}
+                      {isPageWorkspace && chromeVisibility.pageChrome && pageChromeModel.showPageBorder && !hidePageBorderForActiveEditing ? (
+                        <div
+                          aria-hidden="true"
+                          className="pointer-events-none absolute inset-0 z-0 rounded-[2px]"
+                          data-testid="page-border-overlay"
+                          style={pageChromeModel.pageBorderStyle}
+                        />
+                      ) : null}
+                      <div className={isPageWorkspace ? "relative z-10" : undefined}>
+                        {props.document}
+                      </div>
+                      {isPageWorkspace && chromeVisibility.pageChrome ? (
+                        <div
+                          data-testid="page-footer-band"
+                          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">{footerBandLabel}</span>
+                          {snapshot.pageLayout?.footerVariants[0] ? (
+                            <button
+                              type="button"
+                              aria-label="Open footer story"
+                              onClick={props.onOpenFooterStory}
+                              className="rounded-md px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-surface"
+                            >
+                              Edit footer
+                            </button>
+                          ) : null}
+                        </div>
+                      ) : null}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {chromeVisibility.statusBar ? (
+              <TwStatusBar
+                isDirty={snapshot.isDirty}
+                isExportBlocked={snapshot.compatibility.blockExport}
+                preserveOnlyCount={preserveOnlyCount}
+                commentCount={snapshot.comments.totalCount}
+                changeCount={snapshot.trackedChanges.totalCount}
+                sessionId={snapshot.sessionId}
+                contextAnalytics={
+                  chromeVisibility.contextAnalytics
+                    ? props.documentContextAnalytics
+                    : null
+                }
+              />
+            ) : null}
+          </div>
+
+          {/* Review rail — hidden in editing mode unless toggled */}
+          {showReviewRail ? <TwReviewRail
+            activeTab={props.activeRailTab}
+            currentUserId={props.currentUserId}
+            comments={snapshot.comments}
+            trackedChanges={snapshot.trackedChanges}
+            compatibility={snapshot.compatibility}
+            warnings={snapshot.warnings}
+            markupDisplay={markupDisplay}
+            contextAnalytics={
+              chromeVisibility.contextAnalytics
+                ? props.currentScopeContextAnalytics
+                : null
+            }
+            activeCommentId={props.activeCommentId}
+            activeRevisionId={props.activeRevisionId}
+            onActiveTabChange={props.onActiveRailTabChange}
+            onOpenComment={props.onOpenComment}
+            onResolveComment={props.onResolveComment}
+            onReopenComment={props.onReopenComment}
+            onAddReply={props.onAddReply}
+            onEditBody={props.onEditBody}
+            onOpenRevision={props.onOpenRevision}
+            onAcceptRevision={props.onAcceptRevision}
+            onRejectRevision={props.onRejectRevision}
+            onAcceptAllChanges={props.onAcceptAllChanges}
+            onRejectAllChanges={props.onRejectAllChanges}
+          /> : null}
+        </div>
+      </div>
+    </Tooltip.Provider>
+  );
+}
+
+function shouldHidePageBorderForSelection(
+  selection: EditorViewStateSnapshot["selection"],
+): boolean {
+  if (selection.isCollapsed) {
+    return false;
+  }
+
+  return selection.activeRange.kind === "range";
+}
+
+function resolveActiveParagraphLayout(
+  surface: RuntimeRenderSnapshot["surface"],
+  position: number,
+): {
+  leftIndent: number;
+  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: indentation?.left ?? 0,
+    rightIndent: indentation?.right ?? 0,
+    firstLineOffset:
+      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,
+): Extract<SurfaceBlockSnapshot, { kind: "paragraph" }> | null {
+  for (const block of blocks) {
+    if (block.kind === "paragraph" && position >= block.from && position <= block.to) {
+      return block;
+    }
+    if (block.kind === "table") {
+      for (const row of block.rows) {
+        for (const cell of row.cells) {
+          const paragraph = findActiveParagraph(cell.content, position);
+          if (paragraph) {
+            return paragraph;
+          }
+        }
+      }
+    }
+    if (block.kind === "sdt_block") {
+      const paragraph = findActiveParagraph(block.children, position);
+      if (paragraph) {
+        return paragraph;
+      }
+    }
+  }
+  return null;
+}
+
+interface PageChromeModel {
+  lineNumberingEnabled: boolean;
+  gutterWidthPx: number;
+  lineMarkers: Array<{ id: string; label: string; topPx: number }>;
+  showPageBorder: boolean;
+  pageBorderDisplay: string;
+  pageBorderStyle: CSSProperties | undefined;
+  documentGridType: string;
+  documentGridStyle: CSSProperties | undefined;
+}
+
+const EMPTY_PAGE_CHROME_MODEL: PageChromeModel = {
+  lineNumberingEnabled: false,
+  gutterWidthPx: 0,
+  lineMarkers: [],
+  showPageBorder: false,
+  pageBorderDisplay: "none",
+  pageBorderStyle: undefined,
+  documentGridType: "none",
+  documentGridStyle: undefined,
+};
+
+const DOCUMENT_CONTENT_TOP_PADDING_PX = 40;
+
+interface PageShellMetrics {
+  contentInsetStyle: CSSProperties;
+  pageFrameStyle: CSSProperties;
+  headerBandStyle: CSSProperties;
+  footerBandStyle: CSSProperties;
+}
+
+function buildPageChromeModel(
+  surface: RuntimeRenderSnapshot["surface"] | undefined,
+  pageLayout: RuntimeRenderSnapshot["pageLayout"] | undefined,
+  navigation: DocumentNavigationSnapshot | undefined,
+  activeStory: RuntimeRenderSnapshot["activeStory"],
+): PageChromeModel {
+  if (!surface || !pageLayout || !navigation || activeStory.kind !== "main") {
+    return EMPTY_PAGE_CHROME_MODEL;
+  }
+
+  const lineMarkers = computeLineMarkersIfEnabled({
+    pageLayout,
+    surfaceBlocks: surface.blocks,
+    pages: navigation.pages,
+    buildLineNumberMarkers,
+  });
+  const lineNumberingEnabled =
+    Boolean(pageLayout.lineNumbering) && lineMarkers.length > 0;
+  const distance = pageLayout.lineNumbering?.distance ?? 0;
+  const gutterWidthPx = lineNumberingEnabled
+    ? Math.max(40, Math.min(88, 24 + Math.round(distance * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP)))
+    : 0;
+  const showPageBorder = shouldRenderPageBorder(pageLayout, navigation.pages, navigation.activePageIndex);
+
+  return {
+    lineNumberingEnabled,
+    gutterWidthPx,
+    lineMarkers,
+    showPageBorder,
+    pageBorderDisplay: pageLayout.pageBorders?.display ?? "none",
+    pageBorderStyle: showPageBorder ? buildPageBorderStyle(pageLayout) : undefined,
+    documentGridType: pageLayout.documentGrid?.type ?? "none",
+    documentGridStyle: buildDocumentGridStyle(pageLayout.documentGrid),
+  };
+}
+
+function buildPageShellMetrics(
+  pageLayout: RuntimeRenderSnapshot["pageLayout"] | undefined,
+): PageShellMetrics {
+  if (!pageLayout) {
+    return {
+      contentInsetStyle: {},
+      pageFrameStyle: {},
+      headerBandStyle: {},
+      footerBandStyle: {},
+    };
+  }
+
+  const horizontalInsetPx = Math.max(
+    24,
+    Math.min(120, Math.round(pageLayout.marginLeft * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP)),
+  );
+  const verticalInsetPx = Math.max(
+    24,
+    Math.min(140, Math.round(pageLayout.marginTop * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP)),
+  );
+  const headerBandHeightPx = Math.max(
+    40,
+    Math.min(96, Math.round(pageLayout.headerMargin * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP + 16)),
+  );
+  const footerBandHeightPx = Math.max(
+    40,
+    Math.min(96, Math.round(pageLayout.footerMargin * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP + 16)),
+  );
+
+  return {
+    contentInsetStyle: {
+      paddingLeft: `${horizontalInsetPx}px`,
+      paddingRight: `${horizontalInsetPx}px`,
+      paddingTop: `${Math.max(20, verticalInsetPx - 12)}px`,
+      paddingBottom: `${Math.max(20, Math.round(pageLayout.marginBottom * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP) - 12)}px`,
+    },
+    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`,
+    },
+    footerBandStyle: {
+      minHeight: `${footerBandHeightPx}px`,
+    },
+  };
+}
+
+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]>,
+): Array<{ id: string; label: string; topPx: number }> {
+  const markers: Array<{ id: string; label: string; topPx: number }> = [];
+  if (pages.length === 0) {
+    return markers;
+  }
+
+  let currentTopTwips = 0;
+  let lineNumber = 1;
+  let lastPageIndex = -1;
+  let lastSectionIndex = -1;
+
+  for (const block of blocks) {
+    const pageIndex = findPageForOffset(pages, block.from);
+    const page = pages[pageIndex];
+    if (!page) {
+      continue;
+    }
+
+    const lineNumbering = page.layout.lineNumbering;
+    const restartMode = lineNumbering?.restart ?? "newPage";
+    const restartStart = lineNumbering?.start ?? 1;
+    const countBy = Math.max(1, lineNumbering?.countBy ?? 1);
+    const columnWidth = getUsableColumnWidth(page.layout);
+
+    if (pageIndex !== lastPageIndex) {
+      if (restartMode === "newPage" || lastPageIndex === -1) {
+        lineNumber = restartStart;
+      }
+      lastPageIndex = pageIndex;
+    }
+    if (page.sectionIndex !== lastSectionIndex) {
+      if (restartMode === "newSection" || lastSectionIndex === -1) {
+        lineNumber = restartStart;
+      }
+      lastSectionIndex = page.sectionIndex;
+    }
+
+    if (block.kind === "paragraph" && lineNumbering) {
+      const lineCount = estimateParagraphLineCount(block, columnWidth);
+      const lineHeight = estimateParagraphLineHeight(block);
+      const suppress = block.suppressLineNumbers === true;
+      for (let lineIndex = 0; lineIndex < lineCount; lineIndex += 1) {
+        if (!suppress && (lineNumber - restartStart) % countBy === 0) {
+          markers.push({
+            id: `${block.blockId}-${lineIndex}`,
+            label: String(lineNumber),
+            topPx:
+              DOCUMENT_CONTENT_TOP_PADDING_PX +
+              (currentTopTwips + lineIndex * lineHeight) * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP,
+          });
+        }
+        if (!suppress) {
+          lineNumber += 1;
+        }
+      }
+    }
+
+    currentTopTwips += estimateBlockHeight(block, columnWidth);
+  }
+
+  return markers;
+}
+
+function shouldRenderPageBorder(
+  pageLayout: RuntimeRenderSnapshot["pageLayout"],
+  pages: ReadonlyArray<DocumentNavigationSnapshot["pages"][number]>,
+  activePageIndex: number,
+): boolean {
+  const display = pageLayout?.pageBorders?.display ?? "allPages";
+  const activePage = pages[activePageIndex];
+  if (!pageLayout?.pageBorders || !activePage) {
+    return false;
+  }
+
+  switch (display) {
+    case "firstPage":
+      return activePage.pageInSection === 0;
+    case "notFirstPage":
+      return activePage.pageInSection > 0;
+    default:
+      return true;
+  }
+}
+
+function buildPageBorderStyle(
+  pageLayout: NonNullable<RuntimeRenderSnapshot["pageLayout"]>,
+): CSSProperties | undefined {
+  const pageBorders = pageLayout.pageBorders;
+  if (!pageBorders) {
+    return undefined;
+  }
+
+  const leftInset = createInsetValue(
+    pageBorders.left?.space,
+    pageBorders.offsetFrom === "text"
+      ? (pageLayout.marginLeft / Math.max(1, pageLayout.pageWidth)) * 100
+      : 1.25,
+  );
+  const rightInset = createInsetValue(
+    pageBorders.right?.space,
+    pageBorders.offsetFrom === "text"
+      ? (pageLayout.marginRight / Math.max(1, pageLayout.pageWidth)) * 100
+      : 1.25,
+  );
+  const topInset = createInsetValue(
+    pageBorders.top?.space,
+    pageBorders.offsetFrom === "text"
+      ? (pageLayout.marginTop / Math.max(1, pageLayout.pageHeight)) * 100
+      : 1.5,
+  );
+  const bottomInset = createInsetValue(
+    pageBorders.bottom?.space,
+    pageBorders.offsetFrom === "text"
+      ? (pageLayout.marginBottom / Math.max(1, pageLayout.pageHeight)) * 100
+      : 1.5,
+  );
+
+  return {
+    top: topInset,
+    right: rightInset,
+    bottom: bottomInset,
+    left: leftInset,
+    borderTop: toBorderCss(pageBorders.top),
+    borderRight: toBorderCss(pageBorders.right),
+    borderBottom: toBorderCss(pageBorders.bottom),
+    borderLeft: toBorderCss(pageBorders.left),
+    boxSizing: "border-box",
+    mixBlendMode: pageBorders.zOrder === "back" ? "multiply" : undefined,
+  };
+}
+
+function buildDocumentGridStyle(
+  documentGrid: NonNullable<RuntimeRenderSnapshot["pageLayout"]>["documentGrid"] | undefined,
+): CSSProperties | undefined {
+  if (!documentGrid || !documentGrid.type || documentGrid.type === "default") {
+    return undefined;
+  }
+
+  const linePitchPx = Math.max(
+    18,
+    Math.round((documentGrid.linePitch ?? 360) * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP),
+  );
+  const charSpacePx = Math.max(
+    12,
+    Math.round((documentGrid.charSpace ?? 204) * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP),
+  );
+  const gridColor = "rgba(15, 23, 42, 0.06)";
+  const backgrounds: string[] = [];
+
+  if (
+    documentGrid.type === "lines" ||
+    documentGrid.type === "linesAndChars" ||
+    documentGrid.type === "snapToChars"
+  ) {
+    backgrounds.push(
+      `repeating-linear-gradient(to bottom, ${gridColor} 0, ${gridColor} 1px, transparent 1px, transparent ${linePitchPx}px)`,
+    );
+  }
+  if (
+    documentGrid.type === "linesAndChars" ||
+    documentGrid.type === "snapToChars"
+  ) {
+    backgrounds.push(
+      `repeating-linear-gradient(to right, rgba(15, 23, 42, 0.04) 0, rgba(15, 23, 42, 0.04) 1px, transparent 1px, transparent ${charSpacePx}px)`,
+    );
+  }
+
+  if (backgrounds.length === 0) {
+    return undefined;
+  }
+
+  return {
+    backgroundImage: backgrounds.join(", "),
+    backgroundOrigin: "content-box",
+  };
+}
+
+function createInsetValue(spaceTwips: number | undefined, percent: number): string {
+  const spacingPx = Math.max(0, Math.round((spaceTwips ?? 0) * DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP));
+  return `calc(${percent.toFixed(2)}% + ${spacingPx}px)`;
+}
+
+function resolveSelectionToolbarPlacement(
+  anchor: SelectionToolAnchor | null | undefined,
+  root: HTMLDivElement | null,
+  zoomScale: number,
+): { placement: "right" | "left" | "above" | "below"; style: CSSProperties } | null {
+  if (!anchor || !root) {
+    return null;
+  }
+
+  const rootRect = root.getBoundingClientRect();
+  if (rootRect.width <= 0 || rootRect.height <= 0 || zoomScale <= 0) {
+    return null;
+  }
+
+  const centerX = (anchor.left + anchor.right) / 2;
+  const centerY = (anchor.top + anchor.bottom) / 2;
+  const localLeftEdge = (anchor.left - rootRect.left) / zoomScale;
+  const localRightEdge = (anchor.right - rootRect.left) / zoomScale;
+  const localLeft = (centerX - rootRect.left) / zoomScale;
+  const localCenterY = (centerY - rootRect.top) / zoomScale;
+  const localTop = (anchor.top - rootRect.top) / zoomScale;
+  const localBottom = (anchor.bottom - rootRect.top) / zoomScale;
+  const edgePadding = 16 / zoomScale;
+  const containerWidth = rootRect.width / zoomScale;
+  const containerHeight = rootRect.height / zoomScale;
+  const gapPx = 12 / zoomScale;
+  const estimatedToolbarWidth = Math.min(260 / zoomScale, Math.max(168 / zoomScale, containerWidth * 0.32));
+  const estimatedToolbarHeight = 44 / zoomScale;
+  const clampedCenterLeft = Math.max(
+    edgePadding,
+    Math.min(localLeft, Math.max(edgePadding, containerWidth - edgePadding)),
+  );
+  const clampedCenterY = Math.max(
+    edgePadding + estimatedToolbarHeight / 2,
+    Math.min(localCenterY, Math.max(edgePadding + estimatedToolbarHeight / 2, containerHeight - edgePadding - estimatedToolbarHeight / 2)),
+  );
+  const rightClearance = containerWidth - localRightEdge - gapPx - edgePadding;
+  const leftClearance = localLeftEdge - gapPx - edgePadding;
+
+  if (rightClearance >= estimatedToolbarWidth) {
+    return {
+      placement: "right",
+      style: {
+        left: `${localRightEdge}px`,
+        top: `${clampedCenterY}px`,
+        maxWidth: `${Math.max(220, containerWidth - edgePadding * 2)}px`,
+        transform: `translate(${gapPx}px, -50%)`,
+      },
+    };
+  }
+
+  if (leftClearance >= estimatedToolbarWidth) {
+    return {
+      placement: "left",
+      style: {
+        left: `${localLeftEdge}px`,
+        top: `${clampedCenterY}px`,
+        maxWidth: `${Math.max(220, containerWidth - edgePadding * 2)}px`,
+        transform: `translate(calc(-100% - ${gapPx}px), -50%)`,
+      },
+    };
+  }
+
+  const placement = localTop < estimatedToolbarHeight + gapPx + edgePadding ? "below" : "above";
+
+  return {
+    placement,
+    style: {
+      left: `${clampedCenterLeft}px`,
+      top: `${placement === "above" ? localTop : localBottom}px`,
+      maxWidth: `${Math.max(220, containerWidth - edgePadding * 2)}px`,
+      transform:
+        placement === "above"
+          ? `translate(-50%, calc(-100% - ${gapPx}px))`
+          : `translate(-50%, ${gapPx}px)`,
+    },
+  };
+}
+
+function toBorderCss(
+  border:
+    | NonNullable<NonNullable<RuntimeRenderSnapshot["pageLayout"]>["pageBorders"]>["top"]
+    | undefined,
+): string | undefined {
+  if (!border || border.value === "none" || border.value === "nil") {
+    return undefined;
+  }
+
+  const width = border.size ? `${Math.max(1, Math.round(border.size / 8))}px` : "1px";
+  const style =
+    border.value === "double"
+      ? "double"
+      : border.value === "dotted"
+        ? "dotted"
+        : border.value === "dashed" || border.value === "dashSmallGap"
+          ? "dashed"
+          : "solid";
+  const color = border.color && border.color !== "auto" ? `#${border.color}` : "rgba(31, 31, 31, 0.28)";
+  return `${width} ${style} ${color}`;
+}