@beyondwork/docx-react-component 1.0.28 → 1.0.29

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

@@ -1,1417 +0,0 @@
-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 {
-  CommentSidebarThreadSnapshot,
-  DocumentNavigationSnapshot,
-  EditorViewStateSnapshot,
-  FormattingStateSnapshot,
-  FormattingAlignment,
-  HeaderFooterLinkPatch,
-  InteractionGuardSnapshot,
-  InsertImageOptions,
-  RuntimeRenderSnapshot,
-  SectionPageNumberingPatch,
-  SectionBreakType,
-  StyleCatalogSnapshot,
-  SurfaceBlockSnapshot,
-  TrackedChangeEntrySnapshot,
-  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 {
-  SelectionToolbarAnchor,
-  SelectionToolbarModel,
-  SuggestionCardModel,
-} from "../ui/headless/selection-toolbar-model";
-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 { TwReviewRail, type ReviewRailTab } from "./review/tw-review-rail";
-import { TwStatusBar } from "./status/tw-status-bar";
-import { TwToolbar, 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;
-  styleCatalog?: StyleCatalogSnapshot;
-  activeRailTab: ReviewRailTab;
-  activeCommentId?: string;
-  activeRevisionId?: string;
-  showTrackedChanges: boolean;
-  workflowScopeSnapshot?: WorkflowScopeSnapshot | null;
-  interactionGuardSnapshot?: InteractionGuardSnapshot;
-  commands: EditorCommandBag;
-  selectionToolbar?: SelectionToolbarModel | null;
-  suggestionCard?: SuggestionCardModel | null;
-  selectionToolbarAnchor?: SelectionToolbarAnchor | 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;
-  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;
-  activeImageContext?: ActiveImageContext | null;
-  activeObjectContext?: ActiveObjectContext | null;
-  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;
-  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 preserveOnlyCount = caps?.preserveOnlyCount ??
-    snapshot.compatibility.featureEntries.filter(
-      (entry) => entry.featureClass === "preserve-only",
-    ).length;
-  const blockedReasons =
-    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 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 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"),
-  );
-  const contextualSurface =
-    props.activeImageContext
-      ? "image"
-      : props.activeObjectContext
-        ? "object"
-        : isTableContext
-          ? "table"
-          : null;
-  const pageChromeModel = useMemo(
-    () =>
-      buildPageChromeModel(
-        snapshot.surface,
-        snapshot.pageLayout,
-        props.documentNavigation,
-        snapshot.activeStory,
-      ),
-    [props.documentNavigation, snapshot.activeStory, snapshot.pageLayout, snapshot.surface],
-  );
-  const selectionToolbarPlacement = resolveSelectionToolbarPlacement(
-    props.selectionToolbarAnchor,
-    selectionToolbarRootRef.current,
-    zoomScale,
-  );
-  const activePage = props.documentNavigation?.pages[props.documentNavigation.activePageIndex] ?? null;
-  const pageShellMetrics = useMemo(
-    () => buildPageShellMetrics(snapshot.pageLayout),
-    [snapshot.pageLayout],
-  );
-  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" ||
-    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 ? <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.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 ${isPageWorkspace ? "bg-surface" : "bg-canvas"}`}
-              data-wre-scroll-root="true"
-            >
-              <div
-                ref={selectionToolbarRootRef}
-                className={`mx-auto min-h-full ${
-                  isPageWorkspace
-                    ? "wre-page-chrome wre-page-surface relative max-w-[840px] my-8 overflow-hidden"
-                    : "wre-canvas-surface relative bg-canvas"
-                }`}
-                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.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>
-                ) : 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-dashed border-border/60 px-4 text-[11px] text-secondary"
-                          style={pageShellMetrics.headerBandStyle}
-                        >
-                          <span className="uppercase tracking-[0.12em] text-tertiary">Header</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-dashed border-border/60 px-4 text-[11px] text-secondary"
-                          style={pageShellMetrics.footerBandStyle}
-                        >
-                          <span className="uppercase tracking-[0.12em] text-tertiary">Footer</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}
-              />
-            ) : 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}
-            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 }>;
-} | null {
-  const paragraph = surface ? findActiveParagraph(surface.blocks, position) : null;
-  if (!paragraph) {
-    return null;
-  }
-
-  return {
-    leftIndent: paragraph.indentation?.left ?? 0,
-    rightIndent: paragraph.indentation?.right ?? 0,
-    firstLineOffset:
-      paragraph.indentation?.firstLine ??
-      (paragraph.indentation?.hanging ? -paragraph.indentation.hanging : 0),
-    tabStops: paragraph.tabStops ? [...paragraph.tabStops] : [],
-  };
-}
-
-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)",
-    },
-    headerBandStyle: {
-      minHeight: `${headerBandHeightPx}px`,
-    },
-    footerBandStyle: {
-      minHeight: `${footerBandHeightPx}px`,
-    },
-  };
-}
-
-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: SelectionToolbarAnchor | 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}`;
-}