@beyondwork/docx-react-component 1.0.18 → 1.0.19

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

@@ -1,40 +1,89 @@
-import React, { type ReactNode, useState } from "react";
+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,
   RuntimeRenderSnapshot,
+  StyleCatalogSnapshot,
+  SurfaceBlockSnapshot,
   TrackedChangeEntrySnapshot,
+  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 type { SessionCapabilities } from "../runtime/session-capabilities";
+import type {
+  SelectionToolbarAnchor,
+  SelectionToolbarModel,
+} from "../ui/headless/selection-toolbar-model";
 import type { MarkupDisplay } from "../ui/headless/comment-decoration-model";
+import { preserveEditorSelectionMouseDown } from "../ui/headless/preserve-editor-selection";
 import { TwAlertBanner } from "./chrome/tw-alert-banner";
+import { TwPageRuler } from "./chrome/tw-page-ruler";
 import { TwSelectionToolbar } from "./chrome/tw-selection-toolbar";
 import { TwReviewRail, type ReviewRailTab } from "./review/tw-review-rail";
 import { TwStatusBar } from "./status/tw-status-bar";
-import { TwToolbar, type ViewMode } from "./toolbar/tw-toolbar";
+import { TwToolbar } from "./toolbar/tw-toolbar";
 
 export interface TwReviewWorkspaceProps {
   snapshot: RuntimeRenderSnapshot;
+  viewState: EditorViewStateSnapshot;
   currentUserId?: string;
   capabilities?: SessionCapabilities;
   reviewMode?: "editing" | "review";
   document: ReactNode;
-  viewMode: ViewMode;
+  workspaceMode: WorkspaceMode;
+  zoomLevel?: ZoomLevel;
+  formattingState?: FormattingStateSnapshot;
+  styleCatalog?: StyleCatalogSnapshot;
   activeRailTab: ReviewRailTab;
   activeCommentId?: string;
   activeRevisionId?: string;
   showTrackedChanges: boolean;
-  selectionPreview?: string | null;
-  addCommentDisabledReason?: string;
-  onViewModeChange: (value: ViewMode) => void;
+  selectionToolbar?: SelectionToolbarModel | 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;
+  onOutdent?: () => void;
+  onIndent?: () => void;
   onAddComment: () => void;
+  onAddCommentFromSelection?: () => void;
   onExport: () => void;
+  onDismissSelectionToolbar?: () => void;
+  onSelectionToolbarFocusCapture?: FocusEventHandler<HTMLDivElement>;
+  onSelectionToolbarBlurCapture?: FocusEventHandler<HTMLDivElement>;
+  selectionToolbarRef?: Ref<HTMLDivElement>;
   onOpenComment: (thread: CommentSidebarThreadSnapshot) => void;
   onResolveComment: (commentId: string) => void;
   onReopenComment?: (commentId: string) => void;
@@ -45,17 +94,84 @@ export interface TwReviewWorkspaceProps {
   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;
 }
 
 export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
-  const { snapshot } = props;
+  const { snapshot, viewState } = props;
+  const selectionToolbarRootRef = useRef<HTMLDivElement>(null);
   const caps = props.capabilities;
-  const markupDisplay: MarkupDisplay = props.viewMode === "document" ? "all" : "clean";
+  const isPageWorkspace = props.workspaceMode === "page";
+  const markupDisplay: MarkupDisplay = isPageWorkspace ? "all" : "clean";
+  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 showReviewRail = caps?.reviewRailVisible ?? true;
+  const headings = props.documentNavigation?.headings ?? [];
+  const selectionPosition =
+    viewState.selection.activeRange.kind === "node"
+      ? viewState.selection.activeRange.at
+      : viewState.selection.head;
+  const activeParagraphLayout = resolveActiveParagraphLayout(snapshot.surface, selectionPosition);
+  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);
+
+  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}>
@@ -65,41 +181,366 @@ export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
           capabilities={caps}
           compatibility={snapshot.compatibility}
           warnings={snapshot.warnings}
-          viewMode={props.viewMode}
+          workspaceMode={props.workspaceMode}
+          zoomLevel={props.zoomLevel}
+          formattingState={props.formattingState}
+          styleCatalog={props.styleCatalog}
           showTrackedChanges={props.showTrackedChanges}
-          onUndo={props.onUndo}
-          onRedo={props.onRedo}
-          onAddComment={props.onAddComment}
-          onExport={props.onExport}
-          onViewModeChange={props.onViewModeChange}
-          onShowTrackedChangesChange={props.onShowTrackedChangesChange}
+          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)}
+          onOutdent={runWithSelectionToolbarDismiss(props.onOutdent)}
+          onIndent={runWithSelectionToolbarDismiss(props.onIndent)}
+          onAddComment={runWithSelectionToolbarDismiss(props.onAddComment)}
+          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);
+          }}
         />
 
         <TwAlertBanner snapshot={snapshot} preserveOnlyCount={preserveOnlyCount} />
 
         <div className="flex flex-1 min-h-0">
+          {/* Collapsible document navigator — page mode only */}
+          {isPageWorkspace ? (
+            <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 && !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 ${props.viewMode === "document" ? "bg-surface" : "bg-canvas"}`}>
+            <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 ${
-                  props.viewMode === "document"
-                    ? "max-w-[780px] my-8 rounded-xl ring-1 ring-border shadow-sm bg-canvas"
-                    : "bg-canvas"
+                  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}
               >
-                {props.selectionPreview ? (
-                  <div className="flex justify-center pt-4 px-4">
-                    <TwSelectionToolbar
-                      selectionPreview={props.selectionPreview}
+                {isPageWorkspace && 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}
+                        <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 && snapshot.pageLayout && layoutToolsOpen ? (
+                  <div className="px-5 pt-3">
+                    <TwPageRuler
+                      pageLayout={snapshot.pageLayout}
+                      viewState={viewState}
+                      paragraphLayout={activeParagraphLayout}
                       readOnly={snapshot.readOnly}
-                      canAddComment={props.capabilities?.canAddComment}
-                      disabledReason={props.addCommentDisabledReason}
-                      onAddComment={props.onAddComment}
+                      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}
                     />
                   </div>
                 ) : null}
-                {props.document}
+                {props.selectionToolbar && 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}
+                        onAddComment={props.onAddCommentFromSelection ?? props.onAddComment}
+                      />
+                    </div>
+                  </div>
+                ) : null}
+                {props.selectionToolbar && !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}
+                        onAddComment={props.onAddCommentFromSelection ?? props.onAddComment}
+                      />
+                    </div>
+                  </div>
+                ) : null}
+                <div
+                  className={isPageWorkspace ? "relative" : undefined}
+                  data-line-numbering={pageChromeModel.lineNumberingEnabled ? "enabled" : "disabled"}
+                >
+                  {isPageWorkspace && 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 && 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 ? (
+                        <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 && 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 ? (
+                        <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>
 
@@ -141,3 +582,461 @@ export function TwReviewWorkspace(props: TwReviewWorkspaceProps) {
     </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 = buildLineNumberMarkers(surface.blocks, navigation.pages);
+  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}`;
+}