Apply page styles to an element. Exported because virtualization.ts uses it to size lightweight shells before content lands in them.

declare function applyPageStyles(element: HTMLElement, width: number, height: number, options: RenderPageOptions): void;

declare function floatingImageIsBehindDoc(img: {
    wrapType?: string;
}): boolean;

Whether a floating image record reserves space in the text-wrap calculation. Records reaching this predicate have already passed `isFloatingImageRun`, so `wrapType=undefined` implies a `cssFloat`-driven float that wraps text.

declare function floatingImageWrapsText(img: {
    wrapType?: string;
}): boolean;

Capture the rendered position of an inline image as EMUs, normalised to unzoomed coordinates. Returns horizontal offset relative to the page content area (column origin) and vertical offset relative to the containing paragraph — matches the OOXML attrs the resolver writes (`relativeFrom: 'column'` / `relativeFrom: 'paragraph'`).

`zoom` defaults to 1; pass the editor's current zoom factor when the pages container has a CSS scale applied so `getBoundingClientRect` deltas are converted back to authored-pixel space before going to EMU.

Returns undefined for non-inline images or detached DOM.

declare function captureInlinePositionEmu(imageEl: HTMLElement, zoom?: number): {
    horizontalEmu: number;
    verticalEmu: number;
} | undefined;

Create a new LayoutPainter instance

declare function createPainter(options?: PainterOptions): LayoutPainter;

Check if an image run is a floating image positioned at page/cell level.

declare function isFloatingImageRun(run: ImageRun): boolean;

Check if a floating image should create text wrapping exclusion zones. wrapNone images (`behind` / `inFront`) are positioned floats but do not shrink line widths; text paints over or under them.

declare function isTextWrappingFloatingImageRun(run: ImageRun): boolean;

Map an image's current OOXML attrs onto the menu's choice vocabulary so the menu can highlight the active option. Returns null for `topAndBottom` and any unknown wrap type — those don't have a directional menu entry.

`cssFloat` accepts both `null` and `undefined` so framework adapters can use either as their "unset" sentinel without an extra normalisation step.

declare function deriveLayoutChoice(wrapType: WrapType, cssFloat?: ImageAttrs['cssFloat'] | null): ImageLayoutTarget | null;

Walk up from a click target to the nearest rendered image element, returning just the element (no PM position parsing). Used by the left-click selection path in both adapters — `data-pm-start` is read separately by callers that need the position. Returns the element when the click was directly on an inline `<img.layout-run-image>` OR inside one of the container classes registered in `LAYOUT_IMAGE_CLASSES`.

declare function findImageElement(target: EventTarget | null): HTMLElement | null;

Walk up from an event target looking for any rendered image element. Returns the PM position embedded in `data-pm-start`, or null if the target isn't on an image.

declare function hitTestImage(target: EventTarget | null): ImageHitTestResult | null;

Whether a given option is enabled for an image with the given current wrap type. Every option stays clickable — picking the option that matches the current state is a no-op (the PM command early-returns), which matches Word's behavior. We don't grey out the current option, so the menu reads consistently regardless of whether the image is inline or anchored.

The flag is kept around for forward-compatibility (e.g. future read-only mode), but currently always returns true.

declare function isImageLayoutOptionEnabled(_option: ImageLayoutOptionDef, _currentWrapType: WrapType): boolean;

Render an image fragment to DOM

declare function renderImageFragment(fragment: ImageFragment, block: ImageBlock, _measure: ImageMeasure, _context: RenderContext, options?: RenderImageFragmentOptions): HTMLElement;

Render a single line

declare function renderLine(block: ParagraphBlock, line: MeasuredLine, alignment: 'left' | 'center' | 'right' | 'justify' | undefined, doc: Document, options?: RenderLineOptions): HTMLElement;

Render a paragraph fragment

declare function renderParagraphFragment(fragment: ParagraphFragment, block: ParagraphBlock, measure: ParagraphMeasure, context: RenderContext, options?: RenderParagraphOptions): HTMLElement;

Render a table fragment to DOM

declare function renderTableFragment(fragment: TableFragment, block: TableBlock, measure: TableMeasure, context: RenderContext, options?: RenderTableFragmentOptions): HTMLElement;

Render a fragment to DOM

declare function renderFragment(fragment: Fragment, context: RenderContext, options?: RenderFragmentOptions): HTMLElement;

Render a layer of positioned floating images. Used at both page level and inside table cells; the variant differs only in class names and sizing.

declare function renderFloatingImagesLayer(floatingImages: FloatingImagePaintRecord[], doc: Document, options: FloatingImagesLayerOptions): HTMLElement;

Render a single page to DOM

declare function renderPage(page: Page, context: RenderContext, options?: RenderPageOptions): HTMLElement;

Render multiple pages to a container with virtualization for large documents.

For documents with fewer than VIRTUALIZATION_THRESHOLD pages, all pages are rendered eagerly. For larger documents, only pages near the visible viewport are fully rendered — off-screen pages are lightweight shells with correct dimensions to preserve scroll position.

An IntersectionObserver watches page elements and populates/clears content as pages scroll into and out of view.

declare function renderPages(pages: Page[], container: HTMLElement, options?: RenderPageOptions & {
    pageGap?: number;
    footnotesByPage?: Map<number, FootnoteRenderItem[]>;
}): RenderPagesUpdateKind;

Resolve the (left, top) position for a floating table inside a header/ footer container, per ECMA-376 §17.4.57. The table's `floating.tblpX/tblpY` are already in pixels (parser converted from twips); `horzAnchor`/ `vertAnchor` decide whether the offset is relative to the page, the margins, or the surrounding text/column. Coordinates returned are relative to the HF container's flow origin (`layout.flowTop` / `layout.flowLeft`) so the caller can drop them straight into `style.top` / `style.left`.

declare function resolveHeaderFooterFloatingTablePosition(floating: NonNullable<TableBlock['floating']>, layout: HeaderFooterLayoutInfo): {
    left: number;
    top: number;
};

Render a text box fragment to DOM

declare function renderTextBoxFragment(fragment: TextBoxFragment, block: TextBoxBlock, measure: TextBoxMeasure, context: RenderContext, options?: RenderTextBoxFragmentOptions): HTMLElement;

Slice runs for a specific line

declare function sliceRunsForLine(block: ParagraphBlock, line: MeasuredLine): Run[];

Translate the legacy toolbar wrap-type vocabulary (`wrapLeft` / `wrapRight` / `square` / `tight` / `through` / `topAndBottom` / `behind` / `inFront` / `inline`) into a `ImageLayoutTarget` so toolbar dispatch shares the same PM command path as the right-click menu.

Returns `undefined` for unknown values; callers should treat that as "no-op".

declare function toolbarValueToLayoutTarget(value: string): ImageLayoutTarget | undefined;

Layout Painter class

Renders Layout data to DOM with efficient reconciliation. Only updates changed pages and fragments for better performance.

declare class LayoutPainter

Block lookup entry for painter

interface BlockLookupEntry

interface ImageHitTestResult

interface ImageLayoutOptionDef

Minimum fields the floating-image painter needs. Page-level and cell-level float records both satisfy this shape.

interface FloatingImagePaintRecord

interface FloatingImagesLayerOptions

A single footnote item ready for rendering at page bottom.

interface FootnoteRenderItem

Header/footer content for rendering

interface HeaderFooterContent

interface HeaderFooterLayoutInfo

Painter options

interface PainterOptions

Context passed to fragment renderers

interface RenderContext

Options for rendering a page

interface RenderPageOptions

Block lookup map type

type BlockLookup = Map<string, BlockLookupEntry>;

Hint to the framework's icon registry for which Material Symbol — or equivalent — to render alongside each option. Bindings own the icon component itself.

type ImageLayoutIconHint = 'inline' | 'squareLeft' | 'squareRight' | 'behind' | 'inFront';

Multi-page rendering with virtualization.

For documents under VIRTUALIZATION_THRESHOLD pages, all pages render eagerly. Larger documents render only pages near the viewport — off-screen pages are lightweight shells (correct dimensions, no fragment content) so scroll position is preserved. An IntersectionObserver populates and clears page content as the user scrolls. Incremental updates (re-rendering only fingerprint-changed pages) avoid blink when the document model shifts.

type RenderPagesUpdateKind = 'incremental' | 'full';

Mirrors Word's Wrap Text menu — five directional options.

IMAGE_LAYOUT_OPTIONS: readonly ImageLayoutOptionDef[]

CSS class names for fragment elements

FRAGMENT_CLASS_NAMES: {
    fragment: string;
    paragraph: string;
    table: string;
    image: string;
    line: string;
    run: string;
}

CSS class names for text box elements

TEXTBOX_CLASS_NAMES: {
    textBox: string;
}

CSS class names for image elements

IMAGE_CLASS_NAMES: {
    image: string;
    imageAnchored: string;
}

Image layout helpers shared between framework adapters (React, Vue, ...).

Everything here is framework-agnostic: pure DOM math + pure functions over OOXML wrap-type vocabulary. The corresponding UI bindings (right-click menu, toolbar dropdown) live in each framework adapter and call into these.

LAYOUT_IMAGE_CLASSES: {
    readonly runImage: "layout-run-image";
    readonly blockImage: "layout-block-image";
    readonly pageFloatingImage: "layout-page-floating-image";
    readonly cellFloatingImage: "layout-cell-floating-image";
    readonly pageContent: "layout-page-content";
    readonly paragraph: "layout-paragraph";
}

CSS class names for page elements

PAGE_CLASS_NAMES: {
    page: string;
    content: string;
    header: string;
    footer: string;
}

CSS class names for table elements

TABLE_CLASS_NAMES: {
    table: string;
    row: string;
    cell: string;
    cellContent: string;
    resizeHandle: string;
    rowResizeHandle: string;
    tableEdgeHandleBottom: string;
    tableEdgeHandleRight: string;
}