@beyondwork/docx-react-component 1.0.67 → 1.0.70

package/src/ui-tailwind/review-workspace/page-shell-metrics.ts

@@ -0,0 +1,101 @@
+import type { CSSProperties } from "react";
+
+import type { RuntimeRenderSnapshot } from "../../api/public-types";
+
+// P2.a — real-dimension page frame.  Page frame width/height are
+// `pageLayout.pageWidth/pageHeight × FRAME_PX_PER_TWIP_AT_96DPI` so
+// every paper size renders at its Word-matching CSS px (Letter
+// 816×1056, A4 794×1123, Legal 816×1344, …).  Constants are exported
+// so tests + harness panels can derive the same values.
+export const FRAME_PX_PER_TWIP_AT_96DPI = 96 / 1440;
+
+/** Floor on header/footer band heights so empty bands stay clickable. */
+export const MIN_BAND_HEIGHT_PX = 20;
+
+const FIT_WIDTH_CHROME_RESERVATION_PX = 96;
+const FIT_HEIGHT_CHROME_RESERVATION_PX = 180;
+const MIN_FIT_ZOOM = 0.5;
+const MAX_FIT_ZOOM = 2.0;
+
+export interface PageShellMetrics {
+  /** P2.a — page frame CSS px width = `pageWidth × FRAME_PX_PER_TWIP_AT_96DPI`. */
+  frameWidthPx?: number;
+  /** P2.a — page frame CSS px height = `pageHeight × FRAME_PX_PER_TWIP_AT_96DPI`. */
+  frameHeightPx?: number;
+  contentInsetStyle: CSSProperties;
+  pageFrameStyle: CSSProperties;
+}
+
+export function buildPageShellMetrics(
+  pageLayout: RuntimeRenderSnapshot["pageLayout"] | undefined,
+): PageShellMetrics {
+  if (!pageLayout) {
+    return {
+      contentInsetStyle: {},
+      pageFrameStyle: {},
+      frameWidthPx: 0,
+      frameHeightPx: 0,
+    };
+  }
+
+  const pxPerTwip = FRAME_PX_PER_TWIP_AT_96DPI;
+  const frameWidthPx = Math.round(pageLayout.pageWidth * pxPerTwip);
+  const frameHeightPx = Math.round(pageLayout.pageHeight * pxPerTwip);
+  const horizontalInsetPx = Math.round(pageLayout.marginLeft * pxPerTwip);
+  const horizontalInsetRightPx = Math.round(pageLayout.marginRight * pxPerTwip);
+
+  return {
+    contentInsetStyle: {
+      paddingLeft: `${horizontalInsetPx}px`,
+      paddingRight: `${horizontalInsetRightPx}px`,
+    },
+    pageFrameStyle: {
+      backgroundColor: "var(--color-page-bg)",
+      borderRadius: "8px",
+      boxShadow:
+        "0 24px 48px -32px rgba(15, 23, 42, 0.38), 0 8px 20px -18px rgba(15, 23, 42, 0.22)",
+      border: "1px solid rgba(148, 163, 184, 0.2)",
+    },
+    frameWidthPx,
+    frameHeightPx,
+  };
+}
+
+// P2.c — fit-to-width / fit-to-page resolves against the active section's
+// real paper size (not a global constant), so Letter and A4 produce the
+// expected 1.029:1 fit-width ratio at the same viewport.  Clamped so
+// extreme viewports don't pin the editor at unreadable zooms.
+export function resolveZoomMultiplier(
+  zoomLevel: number | "pageWidth" | "onePage",
+  frameWidthPx: number,
+  frameHeightPx: number,
+  viewportWidth: number | undefined,
+  viewportHeight: number | undefined,
+): number {
+  if (typeof zoomLevel === "number") {
+    return zoomLevel / 100;
+  }
+  if (!viewportWidth || frameWidthPx <= 0) return 1;
+  const widthFit =
+    (viewportWidth - FIT_WIDTH_CHROME_RESERVATION_PX) / frameWidthPx;
+  if (zoomLevel === "pageWidth") {
+    return Math.max(MIN_FIT_ZOOM, Math.min(MAX_FIT_ZOOM, widthFit));
+  }
+  if (!viewportHeight || frameHeightPx <= 0) {
+    return Math.max(MIN_FIT_ZOOM, Math.min(MAX_FIT_ZOOM, widthFit));
+  }
+  const heightFit =
+    (viewportHeight - FIT_HEIGHT_CHROME_RESERVATION_PX) / frameHeightPx;
+  return Math.max(
+    MIN_FIT_ZOOM,
+    Math.min(MAX_FIT_ZOOM, Math.min(widthFit, heightFit)),
+  );
+}
+
+export function readViewportWidth(): number | undefined {
+  return typeof window === "undefined" ? undefined : window.innerWidth;
+}
+
+export function readViewportHeight(): number | undefined {
+  return typeof window === "undefined" ? undefined : window.innerHeight;
+}

package/src/ui-tailwind/review-workspace/paragraph-layout.ts

@@ -0,0 +1,115 @@
+import type {
+  EditorViewStateSnapshot,
+  RuntimeRenderSnapshot,
+  SurfaceBlockSnapshot,
+} from "../../api/public-types";
+
+export interface ActiveParagraphLayout {
+  leftIndent: number;
+  rightIndent: number;
+  firstLineOffset: number;
+  tabStops: Array<{ pos: number; val?: string; leader?: string }>;
+  indentationReadOnly?: boolean;
+  tabStopsReadOnly?: boolean;
+}
+
+export function shouldHidePageBorderForSelection(
+  selection: EditorViewStateSnapshot["selection"],
+): boolean {
+  if (selection.isCollapsed) {
+    return false;
+  }
+
+  return selection.activeRange.kind === "range";
+}
+
+export function resolveActiveParagraphLayout(
+  surface: RuntimeRenderSnapshot["surface"],
+  position: number,
+): ActiveParagraphLayout | null {
+  const paragraph = surface ? findActiveParagraph(surface.blocks, position) : null;
+  if (!paragraph) {
+    return null;
+  }
+  const resolvedIndentation = paragraph.resolvedNumbering?.geometry.indentation;
+  const resolvedTabStops = paragraph.resolvedNumbering?.geometry.tabStops;
+  const indentation = resolvedIndentation ?? paragraph.indentation;
+  const tabStops = resolvedTabStops ?? paragraph.tabStops;
+
+  return {
+    leftIndent: indentation?.left ?? 0,
+    rightIndent: indentation?.right ?? 0,
+    firstLineOffset:
+      indentation?.firstLine ??
+      (indentation?.hanging ? -indentation.hanging : 0),
+    tabStops: tabStops ? [...tabStops] : [],
+    indentationReadOnly:
+      Boolean(resolvedIndentation) &&
+      !areIndentationsEqual(resolvedIndentation, paragraph.indentation),
+    tabStopsReadOnly:
+      Boolean(resolvedTabStops) &&
+      !areTabStopsEqual(resolvedTabStops, paragraph.tabStops),
+  };
+}
+
+function areIndentationsEqual(
+  left:
+    | Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["indentation"]
+    | undefined,
+  right:
+    | Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>["indentation"]
+    | undefined,
+): boolean {
+  return (
+    left?.left === right?.left &&
+    left?.right === right?.right &&
+    left?.firstLine === right?.firstLine &&
+    left?.hanging === right?.hanging
+  );
+}
+
+function areTabStopsEqual(
+  left: ReadonlyArray<{ pos: number; val?: string; leader?: string }> | undefined,
+  right: ReadonlyArray<{ pos: number; val?: string; leader?: string }> | undefined,
+): boolean {
+  if (!left?.length && !right?.length) {
+    return true;
+  }
+  if (!left || !right || left.length !== right.length) {
+    return false;
+  }
+  return left.every(
+    (tabStop, index) =>
+      tabStop.pos === right[index]?.pos &&
+      tabStop.val === right[index]?.val &&
+      tabStop.leader === right[index]?.leader,
+  );
+}
+
+function findActiveParagraph(
+  blocks: readonly SurfaceBlockSnapshot[],
+  position: number,
+): Extract<SurfaceBlockSnapshot, { kind: "paragraph" }> | null {
+  for (const block of blocks) {
+    if (block.kind === "paragraph" && position >= block.from && position <= block.to) {
+      return block;
+    }
+    if (block.kind === "table") {
+      for (const row of block.rows) {
+        for (const cell of row.cells) {
+          const paragraph = findActiveParagraph(cell.content, position);
+          if (paragraph) {
+            return paragraph;
+          }
+        }
+      }
+    }
+    if (block.kind === "sdt_block") {
+      const paragraph = findActiveParagraph(block.children, position);
+      if (paragraph) {
+        return paragraph;
+      }
+    }
+  }
+  return null;
+}

package/src/ui-tailwind/review-workspace/selection-toolbar-placement.ts

@@ -0,0 +1,97 @@
+import type { CSSProperties } from "react";
+
+import type { SelectionToolAnchor } from "../../ui/headless/selection-tool-types";
+
+export interface SelectionToolbarPlacement {
+  placement: "right" | "left" | "above" | "below";
+  style: CSSProperties;
+}
+
+export function resolveSelectionToolbarPlacement(
+  anchor: SelectionToolAnchor | null | undefined,
+  root: HTMLDivElement | null,
+  zoomScale: number,
+): SelectionToolbarPlacement | 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)`,
+    },
+  };
+}

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

@@ -0,0 +1,130 @@
+import React from "react";
+
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { ChevronLeft, List } from "lucide-react";
+
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+import type { DocumentNavigationSnapshot } from "../../api/public-types";
+
+export interface TwReviewWorkspaceNavigatorProps {
+  /** When false, the aside and expand toggle both stay unmounted. */
+  enabled: boolean;
+  navOpen: boolean;
+  setNavOpen: (open: boolean) => void;
+  headings: DocumentNavigationSnapshot["headings"] | readonly [];
+  onNavigateHeading?: (headingId: string) => void;
+  /**
+   * Dismiss the selection toolbar before any navigator action.  Matches
+   * the shipped workspace behavior: nav interactions count as a
+   * "commit" that should clear the ephemeral selection toolbar.
+   */
+  dismissSelectionToolbar: () => void;
+}
+
+/**
+ * Page-mode document navigator.  Collapsed to a 0-width aside + a small
+ * expand toggle; expanded to a 192-px sidebar with a heading list.
+ *
+ * Pure JSX extract from `tw-review-workspace.tsx` — no behavior changes.
+ */
+export function TwReviewWorkspaceNavigator({
+  enabled,
+  navOpen,
+  setNavOpen,
+  headings,
+  onNavigateHeading,
+  dismissSelectionToolbar,
+}: TwReviewWorkspaceNavigatorProps): React.ReactElement | null {
+  if (!enabled) return null;
+
+  return (
+    <>
+      <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();
+                          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>
+
+      {!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}
+    </>
+  );
+}

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

@@ -0,0 +1,240 @@
+import React from "react";
+
+import { ChevronRight } from "lucide-react";
+
+import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
+import { TwPageRuler } from "../chrome/tw-page-ruler";
+import { TwLayoutPanel } from "../chrome/tw-layout-panel";
+import type {
+  DocumentNavigationSnapshot,
+  EditorViewStateSnapshot,
+  HeaderFooterLinkPatch,
+  RuntimeRenderSnapshot,
+  SectionBreakType,
+  SectionLayoutPatch,
+  SectionPageNumberingPatch,
+} from "../../api/public-types";
+import type { ActiveParagraphLayout } from "./paragraph-layout";
+
+/**
+ * Page-mode inline toolbar: the "Page N of M · Section N · orientation"
+ * summary strip plus the expandable `TwPageRuler` + `TwLayoutPanel`
+ * cluster.  Lifted verbatim from `tw-review-workspace.tsx` — no behavior
+ * changes.
+ */
+export interface TwReviewWorkspacePageToolbarProps {
+  /** `isPageWorkspace && chromeVisibility.pageChrome && snapshot.pageLayout` */
+  enabled: boolean;
+  pageLayout: RuntimeRenderSnapshot["pageLayout"];
+  activeStory: RuntimeRenderSnapshot["activeStory"];
+  activePage: DocumentNavigationSnapshot["pages"][number] | null;
+  pageCount: number;
+  headerVariant: HeaderFooterLinkPatch["variant"];
+  footerVariant: HeaderFooterLinkPatch["variant"];
+  allowLocalChromeMutations: boolean;
+  pageChromeReadOnly: boolean;
+  layoutToolsOpen: boolean;
+  setLayoutToolsOpen: (fn: (open: boolean) => boolean) => void;
+  viewState: EditorViewStateSnapshot;
+  activeParagraphLayout: ActiveParagraphLayout | null;
+
+  /** Dismiss the floating selection toolbar before committing any action. */
+  dismissSelectionToolbar: () => void;
+  /** Wrap an optional nullary callback so it dismisses the toolbar first. */
+  runWithSelectionToolbarDismiss: (action?: () => void) => () => void;
+
+  onCloseStory?: () => void;
+  onOpenHeaderStory?: () => void;
+  onOpenFooterStory?: () => void;
+  onSetHeaderFooterLink?: (sectionIndex: number, patch: HeaderFooterLinkPatch) => void;
+  onSetParagraphIndentation?: (indentation: Parameters<NonNullable<React.ComponentProps<typeof TwPageRuler>["onSetIndentation"]>>[0]) => void;
+  onSetParagraphTabStops?: (tabStops: Parameters<NonNullable<React.ComponentProps<typeof TwPageRuler>["onSetTabStops"]>>[0]) => void;
+  onRestartNumbering?: () => void;
+  onContinueNumbering?: () => void;
+  onInsertSectionBreak?: (type: SectionBreakType) => void;
+  onDeleteSectionBreak?: (sectionIndex: number) => void;
+  onUpdateSectionLayout?: (sectionIndex: number, patch: SectionLayoutPatch) => void;
+  onSetSectionPageNumbering?: (sectionIndex: number, patch: SectionPageNumberingPatch | null) => void;
+}
+
+export function TwReviewWorkspacePageToolbar({
+  enabled,
+  pageLayout,
+  activeStory,
+  activePage,
+  pageCount,
+  headerVariant,
+  footerVariant,
+  allowLocalChromeMutations,
+  pageChromeReadOnly,
+  layoutToolsOpen,
+  setLayoutToolsOpen,
+  viewState,
+  activeParagraphLayout,
+  dismissSelectionToolbar,
+  runWithSelectionToolbarDismiss,
+  onCloseStory,
+  onOpenHeaderStory,
+  onOpenFooterStory,
+  onSetHeaderFooterLink,
+  onSetParagraphIndentation,
+  onSetParagraphTabStops,
+  onRestartNumbering,
+  onContinueNumbering,
+  onInsertSectionBreak,
+  onDeleteSectionBreak,
+  onUpdateSectionLayout,
+  onSetSectionPageNumbering,
+}: TwReviewWorkspacePageToolbarProps): React.ReactElement | null {
+  if (!enabled || !pageLayout) return null;
+
+  return (
+    <>
+      <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 ${pageCount}`
+                : "Page workspace"}
+            </span>
+            <span>{`Section ${pageLayout.sectionIndex + 1}`}</span>
+            <span className="uppercase tracking-[0.12em] text-tertiary">
+              {pageLayout.orientation}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            {activeStory.kind !== "main" ? (
+              <button
+                type="button"
+                aria-label="Return to document body"
+                onMouseDown={preserveEditorSelectionMouseDown}
+                onClick={runWithSelectionToolbarDismiss(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}
+            {activeStory.kind === "main" && pageLayout.sectionIndex > 0 ? (
+              <>
+                <button
+                  type="button"
+                  aria-label="Link header to previous"
+                  disabled={!onSetHeaderFooterLink || !allowLocalChromeMutations}
+                  onMouseDown={preserveEditorSelectionMouseDown}
+                  onClick={() => {
+                    dismissSelectionToolbar();
+                    onSetHeaderFooterLink?.(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={!onSetHeaderFooterLink || !allowLocalChromeMutations}
+                  onMouseDown={preserveEditorSelectionMouseDown}
+                  onClick={() => {
+                    dismissSelectionToolbar();
+                    onSetHeaderFooterLink?.(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>
+      {layoutToolsOpen ? (
+        <div className="px-5 pt-3">
+          <TwPageRuler
+            pageLayout={pageLayout}
+            viewState={viewState}
+            paragraphLayout={activeParagraphLayout}
+            readOnly={pageChromeReadOnly}
+            onReturnToBody={onCloseStory
+              ? runWithSelectionToolbarDismiss(onCloseStory)
+              : () => undefined}
+            onOpenHeader={onOpenHeaderStory
+              ? runWithSelectionToolbarDismiss(onOpenHeaderStory)
+              : undefined}
+            onOpenFooter={onOpenFooterStory
+              ? runWithSelectionToolbarDismiss(onOpenFooterStory)
+              : undefined}
+            onSetIndentation={onSetParagraphIndentation
+              ? (indentation) => {
+                dismissSelectionToolbar();
+                onSetParagraphIndentation?.(indentation);
+              }
+              : undefined}
+            onSetTabStops={onSetParagraphTabStops
+              ? (tabStops) => {
+                dismissSelectionToolbar();
+                onSetParagraphTabStops?.(tabStops);
+              }
+              : undefined}
+            onRestartNumbering={onRestartNumbering
+              ? runWithSelectionToolbarDismiss(onRestartNumbering)
+              : undefined}
+            onContinueNumbering={onContinueNumbering
+              ? runWithSelectionToolbarDismiss(onContinueNumbering)
+              : undefined}
+          />
+          <TwLayoutPanel
+            pageLayout={pageLayout}
+            readOnly={pageChromeReadOnly}
+            onInsertSectionBreak={onInsertSectionBreak
+              ? (type) => {
+                dismissSelectionToolbar();
+                onInsertSectionBreak?.(type);
+              }
+              : undefined}
+            onDeleteSectionBreak={onDeleteSectionBreak
+              ? (sectionIndex) => {
+                dismissSelectionToolbar();
+                onDeleteSectionBreak?.(sectionIndex);
+              }
+              : undefined}
+            onUpdateSectionLayout={onUpdateSectionLayout
+              ? (sectionIndex, patch) => {
+                dismissSelectionToolbar();
+                onUpdateSectionLayout?.(sectionIndex, patch);
+              }
+              : undefined}
+            onSetSectionPageNumbering={onSetSectionPageNumbering
+              ? (sectionIndex, patch) => {
+                dismissSelectionToolbar();
+                onSetSectionPageNumbering?.(sectionIndex, patch);
+              }
+              : undefined}
+          />
+        </div>
+      ) : null}
+    </>
+  );
+}