pagyra-js 0.0.1

package/src/pdf/layout-tree-builder.ts

@@ -0,0 +1,261 @@
+import { FloatMode, OverflowMode, Position } from "../css/enums.js";
+import type { ComputedStyle } from "../css/style.js";
+import { LayoutNode } from "../dom/node.js";
+import { resolveLength } from "../css/length.js";
+import { log } from "../logging/debug.js";
+import {
+  type LayoutTree,
+  type RenderBox,
+  type Rect,
+  type HeaderFooterHTML,
+  type StyleSheets,
+  type Positioning,
+  type RGBA,
+  type ImageRef,
+  type BorderStyles,
+  type Background,
+  NodeKind,
+  Overflow,
+  LayerMode,
+} from "./types.js";
+import { parseColor } from "./utils/color-utils.js";
+import { resolveTextAlign } from "./utils/text-alignment-resolver.js";
+import { resolveBorderRadius } from "./utils/border-radius-utils.js";
+import { resolveBoxShadows, resolveTextShadows, calculateVisualOverflow } from "./utils/shadow-utils.js";
+import { extractImageRef } from "./utils/image-utils.js";
+import { calculateBoxDimensions } from "./utils/box-dimensions-utils.js";
+import { resolveDecorations } from "./utils/text-decoration-utils.js";
+import {
+  resolveBackgroundLayers,
+  resolveTextGradientLayer,
+} from "./utils/background-layer-resolver.js";
+import { resolveClipPath } from "./utils/clip-path-resolver.js";
+import { parseTransform } from "../transform/css-parser.js";
+import { buildNodeTextRuns } from "./utils/node-text-run-factory.js";
+import type { FontResolver } from "../fonts/types.js";
+
+export interface RenderTreeOptions {
+  dpiAssumption?: number;
+  stylesheets?: Partial<StyleSheets>;
+  headerFooter?: Partial<HeaderFooterHTML>;
+  fontResolver?: FontResolver;
+}
+
+export function buildRenderTree(root: LayoutNode, options: RenderTreeOptions = {}): LayoutTree {
+  const dpiAssumption = options.dpiAssumption ?? 96;
+  const stylesheets: StyleSheets = {
+    fontFaces: options.stylesheets?.fontFaces ?? [],
+  };
+  const headerFooter: HeaderFooterHTML = {
+    headerHtml: options.headerFooter?.headerHtml,
+    footerHtml: options.headerFooter?.footerHtml,
+    headerFirstHtml: options.headerFooter?.headerFirstHtml,
+    footerFirstHtml: options.headerFooter?.footerFirstHtml,
+    headerEvenHtml: options.headerFooter?.headerEvenHtml,
+    footerEvenHtml: options.headerFooter?.footerEvenHtml,
+    headerOddHtml: options.headerFooter?.headerOddHtml,
+    footerOddHtml: options.headerFooter?.footerOddHtml,
+    placeholders: options.headerFooter?.placeholders ?? {},
+    layerMode: options.headerFooter?.layerMode ?? LayerMode.Under,
+    maxHeaderHeightPx: options.headerFooter?.maxHeaderHeightPx ?? 0,
+    maxFooterHeightPx: options.headerFooter?.maxFooterHeightPx ?? 0,
+    clipOverflow: options.headerFooter?.clipOverflow ?? false,
+    fontFamily: options.headerFooter?.fontFamily,
+  };
+
+  const state = { counter: 0, fontResolver: options.fontResolver };
+  const renderRoot = convertNode(root, state);
+  return {
+    root: renderRoot,
+    dpiAssumption,
+    css: stylesheets,
+    hf: headerFooter,
+  };
+}
+
+const DEFAULT_TEXT_COLOR: RGBA = { r: 0, g: 0, b: 0, a: 1 };
+
+function mapNodeKind(node: LayoutNode): NodeKind {
+  if (node.tagName === "img") {
+    return NodeKind.Image;
+  }
+  if (node.tagName === "svg" && node.customData && "svg" in node.customData) {
+    return NodeKind.Svg;
+  }
+  if (node.tagName === "li") {
+    return NodeKind.ListItem;
+  }
+  if (node.textContent && node.textContent.length > 0) {
+    return NodeKind.TextRuns;
+  }
+  return NodeKind.Container;
+}
+
+function mapPosition(style: ComputedStyle): Positioning {
+  if (style.float !== FloatMode.None) {
+    return { type: "float" };
+  }
+  switch (style.position) {
+    case Position.Absolute:
+      return { type: "absolute" };
+    case Position.Fixed:
+      return { type: "fixed" };
+    case Position.Sticky:
+      return { type: "sticky" };
+    default:
+      return { type: "normal" };
+  }
+}
+
+function mapOverflow(mode: OverflowMode): Overflow {
+  switch (mode) {
+    case OverflowMode.Hidden:
+      return Overflow.Hidden;
+    case OverflowMode.Scroll:
+      return Overflow.Scroll;
+    case OverflowMode.Auto:
+      return Overflow.Auto;
+    case OverflowMode.Clip:
+      return Overflow.Clip;
+    default:
+      return Overflow.Visible;
+  }
+}
+
+
+// ====================
+// MAIN CONVERSION FUNCTION
+// ====================
+
+function convertNode(
+  node: LayoutNode,
+  state: { counter: number; fontResolver?: FontResolver },
+  inheritedTextGradient?: Background["gradient"],
+): RenderBox {
+  // Use the original HTML ID if available, otherwise generate a new one
+  const originalId = node.customData?.id as string | undefined;
+  const id = originalId || `node-${state.counter++}`;
+  const { borderBox, paddingBox, contentBox } = calculateBoxDimensions(node);
+  const textColor = parseColor(node.style.color);
+  const fallbackShadowColor = textColor ?? DEFAULT_TEXT_COLOR;
+  const boxShadows = resolveBoxShadows(node, fallbackShadowColor);
+  const visualOverflow = calculateVisualOverflow(node, borderBox, boxShadows);
+  const borderRadius = resolveBorderRadius(node.style, borderBox);
+
+  const transformString = node.style.transform;
+  const transform = transformString ? parseTransform(transformString) ?? undefined : undefined;
+
+  const ownTextGradient = resolveTextGradientLayer(node, { borderBox, paddingBox, contentBox });
+  if (ownTextGradient) {
+    log("layout", "debug", "node has background-clip:text gradient", {
+      tagName: node.tagName,
+      rect: ownTextGradient.rect,
+    });
+  }
+  const textGradient = ownTextGradient ?? inheritedTextGradient;
+
+  const children = node.children.map((child) => convertNode(child, state, textGradient));
+  const imageRef = extractImageRef(node);
+  const decorations = resolveDecorations(node.style);
+  const textRuns = buildNodeTextRuns({
+    node,
+    children,
+    borderBox,
+    contentBox,
+    textColor,
+    decorations,
+    transform: transform ?? undefined,
+    fallbackColor: textColor ?? DEFAULT_TEXT_COLOR,
+    fontResolver: state.fontResolver,
+    textGradient,
+  });
+
+  log("layout", "debug", "node converted", {
+    tagName: node.tagName,
+    textContent: node.textContent?.slice(0, 40),
+    fontFamily: node.style.fontFamily,
+    fontSize: node.style.fontSize,
+    contentBox,
+  });
+
+  const background = resolveBackgroundLayers(node, { borderBox, paddingBox, contentBox });
+  const clipPath = resolveClipPath(node, { borderBox, paddingBox, contentBox });
+
+  const zIndex = typeof node.style.zIndex === "number" ? node.style.zIndex : 0;
+  const establishesStackingContext =
+    typeof node.style.zIndex === "number" && node.style.position !== Position.Static;
+
+  const borderStyle: BorderStyles = {
+    top: normalizeBorderStyle(node.style.borderStyleTop),
+    right: normalizeBorderStyle(node.style.borderStyleRight),
+    bottom: normalizeBorderStyle(node.style.borderStyleBottom),
+    left: normalizeBorderStyle(node.style.borderStyleLeft),
+  };
+
+  const rawTextAlign = resolveTextAlign(node);
+  const textAlign =
+    rawTextAlign === "left" ||
+      rawTextAlign === "center" ||
+      rawTextAlign === "right" ||
+      rawTextAlign === "justify"
+      ? (rawTextAlign as "left" | "center" | "right" | "justify")
+      : undefined;
+
+  return {
+    id,
+    tagName: node.tagName,
+    textContent: node.textContent,
+    kind: mapNodeKind(node),
+    contentBox,
+    paddingBox,
+    borderBox,
+    visualOverflow,
+    padding: {
+      top: resolveLength(node.style.paddingTop, Math.max(node.box.contentWidth, 0), { auto: "zero" }),
+      right: resolveLength(node.style.paddingRight, Math.max(node.box.contentWidth, 0), { auto: "zero" }),
+      bottom: resolveLength(node.style.paddingBottom, Math.max(node.box.contentWidth, 0), { auto: "zero" }),
+      left: resolveLength(node.style.paddingLeft, Math.max(node.box.contentWidth, 0), { auto: "zero" }),
+    },
+    border: {
+      top: resolveLength(node.style.borderTop, Math.max(node.box.contentWidth, 0), { auto: "zero" }),
+      right: resolveLength(node.style.borderRight, Math.max(node.box.contentWidth, 0), { auto: "zero" }),
+      bottom: resolveLength(node.style.borderBottom, Math.max(node.box.contentWidth, 0), { auto: "zero" }),
+      left: resolveLength(node.style.borderLeft, Math.max(node.box.contentWidth, 0), { auto: "zero" }),
+    },
+    borderRadius,
+    opacity: node.style.opacity ?? 1,
+    overflow: mapOverflow(node.style.overflowX ?? OverflowMode.Visible),
+    textRuns,
+    decorations: decorations ?? {},
+    textShadows: resolveTextShadows(node, fallbackShadowColor),
+    boxShadows: resolveBoxShadows(node, textColor ?? DEFAULT_TEXT_COLOR),
+    establishesStackingContext,
+    zIndexComputed: zIndex,
+    positioning: mapPosition(node.style),
+    children,
+    links: [],
+    borderColor: parseColor(node.style.borderColor),
+    borderStyle,
+    color: textColor,
+    background,
+    clipPath,
+    image: imageRef,
+    customData: node.customData ? { ...node.customData } : undefined,
+    textAlign,
+    transform,
+  };
+}
+
+function normalizeBorderStyle(value: string | undefined): "none" | "solid" | "dashed" | "dotted" | "double" {
+  if (!value) {
+    return "solid";
+  }
+  const keyword = value.toLowerCase();
+  if (keyword === "dashed" || keyword === "dotted" || keyword === "double") {
+    return keyword;
+  }
+  if (keyword === "none" || keyword === "hidden") {
+    return "none";
+  }
+  return "solid";
+}

package/src/pdf/page-painter.ts

@@ -0,0 +1,241 @@
+import type {
+  Rect,
+  Run,
+  RGBA,
+  ImageRef,
+  Radius,
+  TextPaintOptions,
+  TextMatrix,
+  StrokeOptions,
+} from "./types.js";
+import type { LinearGradient, RadialGradient } from "../css/parsers/gradient-parser.js";
+import type { FontRegistry } from "./font/font-registry.js";
+import type { PdfObjectRef } from "./primitives/pdf-document.js";
+import { CoordinateTransformer } from "./utils/coordinate-transformer.js";
+import { TextRenderer } from "./renderers/text-renderer.js";
+import { ImageRenderer } from "./renderers/image-renderer.js";
+import { ShapeRenderer, type ShapePoint, type PathCommand } from "./renderers/shape-renderer.js";
+import { GraphicsStateManager } from "./renderers/graphics-state-manager.js";
+import { ClippingPathBuilder } from "./utils/clipping-path-builder.js";
+import { ImageMatrixBuilder } from "./utils/image-matrix-builder.js";
+import { TransformScopeManager } from "./utils/transform-scope-manager.js";
+import { ResultCombiner } from "./utils/result-combiner.js";
+import { globalGlyphAtlas } from "./font/glyph-atlas.js";
+import type { Environment } from "../environment/environment.js";
+
+export interface PainterResult {
+  readonly content: string;
+  readonly fonts: Map<string, PdfObjectRef>;
+  readonly images: PainterImageResource[];
+  readonly graphicsStates: Map<string, number>;
+  readonly shadings: Map<string, string>;
+  readonly patterns?: Map<string, string>;
+}
+
+export interface PainterImageResource {
+  readonly alias: string;
+  readonly image: {
+    src: string;
+    width: number;
+    height: number;
+    format: "jpeg" | "png" | "gif" | "webp";
+    channels: number;
+    bitsPerComponent: number;
+    data: Uint8Array;
+  };
+  ref?: PdfObjectRef;
+}
+
+export class PagePainter {
+  private readonly coordinateTransformer: CoordinateTransformer;
+  private readonly textRenderer: TextRenderer;
+  private readonly imageRenderer: ImageRenderer;
+  private readonly shapeRenderer: ShapeRenderer;
+  private readonly graphicsStateManager: GraphicsStateManager;
+  private readonly clippingPathBuilder: ClippingPathBuilder;
+  private readonly imageMatrixBuilder: ImageMatrixBuilder;
+  private readonly transformScopeManager: TransformScopeManager;
+  private readonly resultCombiner: ResultCombiner;
+  private clipDepth = 0;
+  readonly environment?: Environment;
+
+  constructor(
+    pageHeightPt: number,
+    pxToPt: (value: number) => number,
+    fontRegistry: FontRegistry,
+    pageOffsetPx: number = 0,
+    environment?: Environment,
+  ) {
+    this.coordinateTransformer = new CoordinateTransformer(pageHeightPt, pxToPt, pageOffsetPx);
+    this.graphicsStateManager = new GraphicsStateManager();
+    this.imageRenderer = new ImageRenderer(this.coordinateTransformer);
+    this.textRenderer = new TextRenderer(this.coordinateTransformer, fontRegistry, this.imageRenderer, this.graphicsStateManager);
+    this.shapeRenderer = new ShapeRenderer(this.coordinateTransformer, this.graphicsStateManager);
+    this.clippingPathBuilder = new ClippingPathBuilder(this.coordinateTransformer);
+    this.imageMatrixBuilder = new ImageMatrixBuilder(this.coordinateTransformer);
+    this.transformScopeManager = new TransformScopeManager(this.coordinateTransformer, this.shapeRenderer);
+    this.resultCombiner = new ResultCombiner(this.textRenderer, this.imageRenderer, this.shapeRenderer, this.graphicsStateManager);
+    this.environment = environment;
+  }
+
+  get pageHeightPx(): number {
+    return this.coordinateTransformer.pageHeightPx;
+  }
+
+  drawBoxOutline(box: Rect, color: RGBA = { r: 0.85, g: 0.85, b: 0.85, a: 1 }): void {
+    this.shapeRenderer.drawBoxOutline(box, color);
+  }
+
+  drawFilledBox(box: Rect, color: RGBA): void {
+    this.shapeRenderer.drawFilledBox(box, color);
+  }
+
+  drawImage(image: ImageRef, rect: Rect): void {
+    this.imageRenderer.drawImage(image, rect);
+  }
+
+  drawBackgroundImage(image: ImageRef, rect: Rect, clipRect: Rect, clipRadius: Radius): void {
+    if (!clipRect || clipRect.width <= 0 || clipRect.height <= 0) {
+      this.drawImage(image, rect);
+      return;
+    }
+    const clipCommands = this.clippingPathBuilder.buildClipCommands(clipRect, clipRadius);
+    if (!clipCommands) {
+      this.drawImage(image, rect);
+      return;
+    }
+    const resource = this.imageRenderer.registerResource(image);
+    const imageMatrix = this.imageMatrixBuilder.buildImageMatrix(rect);
+    if (!imageMatrix) {
+      return;
+    }
+    const commands = ["q", ...clipCommands, "W n", imageMatrix, `/${resource.alias} Do`, "Q"];
+    this.shapeRenderer.pushRawCommands(commands);
+  }
+
+  // Draw an image immediately into the shape command stream (for shadows)
+  drawShadowImage(image: ImageRef, rect: Rect): void {
+    if (rect.width <= 0 || rect.height <= 0) return;
+    const res = this.imageRenderer.registerResource(image);
+    const widthPt = this.coordinateTransformer.convertPxToPt(rect.width);
+    const heightPt = this.coordinateTransformer.convertPxToPt(rect.height);
+    if (widthPt === 0 || heightPt === 0) return;
+    const xPt = this.coordinateTransformer.convertPxToPt(rect.x);
+    const localY = rect.y - this.coordinateTransformer.pageOffsetPx;
+    const yPt = this.coordinateTransformer.pageHeightPt - this.coordinateTransformer.convertPxToPt(localY + rect.height);
+    const cmds = [
+      "q",
+      `${formatNumber(widthPt)} 0 0 ${formatNumber(heightPt)} ${formatNumber(xPt)} ${formatNumber(yPt)} cm`,
+      `/${res.alias} Do`,
+      "Q",
+    ];
+    this.shapeRenderer.pushRawCommands(cmds);
+  }
+
+  async drawText(text: string, xPx: number, yPx: number, options: TextPaintOptions = { fontSizePt: 10 }): Promise<void> {
+    await this.textRenderer.drawText(text, xPx, yPx, options);
+  }
+
+  async drawTextRun(run: Run): Promise<void> {
+    await this.textRenderer.drawTextRun(run);
+  }
+
+  fillRoundedRect(rect: Rect, radii: Radius, paint: RGBA | LinearGradient | RadialGradient | string): void {
+    this.shapeRenderer.fillRoundedRect(rect, radii, paint);
+  }
+
+  fillRoundedRectDifference(outerRect: Rect, outerRadii: Radius, innerRect: Rect, innerRadii: Radius, color: RGBA): void {
+    this.shapeRenderer.fillRoundedRectDifference(outerRect, outerRadii, innerRect, innerRadii, color);
+  }
+
+  fillRect(rect: Rect, paint: RGBA | LinearGradient | RadialGradient | string): void {
+    this.shapeRenderer.fillRect(rect, paint);
+  }
+
+  strokeRect(rect: Rect, color: RGBA): void {
+    this.shapeRenderer.strokeRect(rect, color);
+  }
+
+  strokeRoundedRect(rect: Rect, radii: Radius, color: RGBA, lineWidth?: number): void {
+    this.shapeRenderer.strokeRoundedRect(rect, radii, color, lineWidth);
+  }
+
+  fillPolygon(points: ShapePoint[], color: RGBA, close: boolean = true): void {
+    this.shapeRenderer.fillPolygon(points, color, close);
+  }
+
+  fillPath(commands: PathCommand[], color: RGBA, options: { fillRule?: "nonzero" | "evenodd" } = {}): void {
+    this.shapeRenderer.fillPath(commands, color, options);
+  }
+
+  // New: fill an arbitrary path with a gradient (linear or radial). The ShapeRenderer will
+  // create a clipping path from the provided commands and paint the shading clipped to that path.
+  fillPathWithGradient(commands: PathCommand[], gradient: LinearGradient | RadialGradient, options: { fillRule?: "nonzero" | "evenodd" } = {}): void {
+    this.shapeRenderer.fillPathWithGradient(commands, gradient, options);
+  }
+
+  strokePolyline(points: ShapePoint[], color: RGBA, options: StrokeOptions & { close?: boolean } = {}): void {
+    this.shapeRenderer.strokePolyline(points, color, options);
+  }
+
+  strokePath(commands: PathCommand[], color: RGBA, options: StrokeOptions = {}): void {
+    this.shapeRenderer.strokePath(commands, color, options);
+  }
+
+  beginClipPath(commands: PathCommand[], options: { fillRule?: "nonzero" | "evenodd" } = {}): void {
+    if (this.shapeRenderer.beginClipPath(commands, options)) {
+      this.clipDepth++;
+    }
+  }
+
+  endClipPath(): void {
+    if (this.clipDepth <= 0) {
+      return;
+    }
+    this.shapeRenderer.endClipPath();
+    this.clipDepth--;
+  }
+
+  convertPxToPt(value: number): number {
+    return this.coordinateTransformer.convertPxToPt(value);
+  }
+
+  beginOpacityScope(opacity: number): void {
+    if (opacity >= 1) return;
+    const state = this.graphicsStateManager.ensureFillAlphaState(opacity);
+    this.shapeRenderer.pushRawCommands(["q", `/${state} gs`]);
+  }
+
+  endOpacityScope(opacity: number): void {
+    if (opacity >= 1) return;
+    this.shapeRenderer.pushRawCommands(["Q"]);
+  }
+
+  beginTransformScope(transform: TextMatrix, rect: Rect): void {
+    this.transformScopeManager.beginTransformScope(transform, rect);
+  }
+
+  endTransformScope(): void {
+    this.transformScopeManager.endTransformScope();
+  }
+
+  result(): PainterResult {
+    // Ensure any atlas pages created by the glyph packer are registered as image resources
+    try {
+      const pages = globalGlyphAtlas.getPages();
+      if (pages && pages.length > 0) {
+        this.imageRenderer.registerAtlasPages(pages);
+      }
+    } catch {
+      // ignore atlas registration errors - fall back to per-glyph images
+    }
+    return this.resultCombiner.combineResults();
+  }
+}
+
+function formatNumber(value: number): string {
+  if (!Number.isFinite(value)) {
+    return "0";
+  }
+  return Number.isInteger(value) ? value.toString() : value.toFixed(4).replace(/0+$/, "").replace(/\.$/, "");
+}

package/src/pdf/pagination.ts

@@ -0,0 +1,155 @@
+import type {
+  LayoutPageTree,
+  RenderBox,
+  PositionedLayer,
+  DecorationCommand,
+  Link,
+} from "./types.js";
+import { resolvePaintOrder } from "./stacking/resolve-paint-order.js";
+
+export interface PaginationOptions {
+  pageHeight: number;
+}
+
+export function paginateTree(root: RenderBox, options: PaginationOptions): LayoutPageTree[] {
+  const pageHeight = Number.isFinite(options.pageHeight) && options.pageHeight > 0 ? options.pageHeight : 1;
+
+  const paintOrderAll = resolvePaintOrder(root);
+  const flowOrderAll = collectFlowOrder(root);
+  const positionedAll = collectPositionedLayers(root);
+  const linksAll = collectLinks(root);
+
+  const documentHeight = resolveDocumentHeight(paintOrderAll);
+  const totalPages = Math.max(1, Math.ceil(documentHeight / pageHeight));
+
+  const pages: LayoutPageTree[] = [];
+
+  for (let index = 0; index < totalPages; index++) {
+    const pageTop = index * pageHeight;
+    const pageBottom = pageTop + pageHeight;
+
+    const paintOrder = paintOrderAll.filter((box) => intersectsVerticalSlice(box, pageTop, pageBottom));
+    const flowContentOrder = flowOrderAll.filter((box) => intersectsVerticalSlice(box, pageTop, pageBottom));
+    const positionedLayersSortedByZ = filterPositionedLayers(positionedAll, pageTop, pageBottom);
+    const links = filterLinks(linksAll, pageTop, pageBottom, pageTop);
+
+    const decorations: DecorationCommand[] = []; // Placeholder until decoration pagination is implemented
+
+    pages.push({
+      paintOrder,
+      floatLayerOrder: [],
+      flowContentOrder,
+      positionedLayersSortedByZ,
+      decorations,
+      links,
+      pageOffsetY: pageTop,
+    });
+  }
+
+  return pages;
+}
+
+
+function collectFlowOrder(root: RenderBox): RenderBox[] {
+  const result: RenderBox[] = [];
+  dfs(root, (box) => {
+    result.push(box);
+    return box.positioning.type === "normal";
+  });
+  return result;
+}
+
+function collectPositionedLayers(_root: RenderBox): PositionedLayer[] {
+  // Positioned layers are not yet implemented; return empty array to keep the pipeline stable.
+  return [];
+}
+
+function collectLinks(root: RenderBox): Link[] {
+  const links: Link[] = [];
+  dfs(root, (box) => {
+    links.push(...box.links);
+    return true;
+  });
+  return links;
+}
+
+function filterPositionedLayers(layers: PositionedLayer[], top: number, bottom: number): PositionedLayer[] {
+  const result: PositionedLayer[] = [];
+  for (const layer of layers) {
+    const boxes = layer.boxes.filter((box) => intersectsVerticalSlice(box, top, bottom));
+    if (boxes.length > 0) {
+      result.push({ z: layer.z, boxes });
+    }
+  }
+  return result;
+}
+
+function filterLinks(links: Link[], top: number, bottom: number, offset: number): Link[] {
+  const result: Link[] = [];
+  for (const link of links) {
+    const linkTop = link.rect.y;
+    const linkBottom = link.rect.y + Math.max(link.rect.height, 0);
+    if (linkBottom <= top || linkTop >= bottom) {
+      continue;
+    }
+    result.push({
+      rect: {
+        x: link.rect.x,
+        y: link.rect.y - offset,
+        width: link.rect.width,
+        height: link.rect.height,
+      },
+      target: { ...link.target },
+    });
+  }
+  return result;
+}
+
+function resolveDocumentHeight(boxes: RenderBox[]): number {
+  let maxBottom = 0;
+  for (const box of boxes) {
+    const span = getBoxVerticalSpan(box);
+    maxBottom = Math.max(maxBottom, span.bottom);
+  }
+  return maxBottom;
+}
+
+function intersectsVerticalSlice(box: RenderBox, sliceTop: number, sliceBottom: number): boolean {
+  const span = getBoxVerticalSpan(box);
+  return span.bottom > sliceTop && span.top < sliceBottom;
+}
+
+function getBoxVerticalSpan(box: RenderBox): { top: number; bottom: number } {
+  const referenceRect = box.visualOverflow ?? box.borderBox ?? box.contentBox;
+  let top = referenceRect ? referenceRect.y : box.contentBox.y;
+  let bottom = referenceRect ? referenceRect.y + Math.max(referenceRect.height, 0) : box.contentBox.y + Math.max(box.contentBox.height, 0);
+
+  if (!Number.isFinite(top)) {
+    top = 0;
+  }
+  if (!Number.isFinite(bottom)) {
+    bottom = top;
+  }
+
+  if (box.textRuns.length > 0) {
+    for (const run of box.textRuns) {
+      const baseline = run.lineMatrix?.f ?? 0;
+      const ascent = run.fontSize;
+      const descent = Math.max(run.fontSize * 0.2, 0);
+      top = Math.min(top, baseline - ascent);
+      bottom = Math.max(bottom, baseline + descent);
+    }
+  }
+
+  return { top, bottom };
+}
+
+function dfs(node: RenderBox, visitor: (box: RenderBox) => boolean): void {
+  const descend = visitor(node);
+  if (!descend) {
+    return;
+  }
+  for (const child of node.children) {
+    dfs(child, visitor);
+  }
+}