pagyra-js 0.0.1

package/src/layout/inline/layout.ts

@@ -0,0 +1,285 @@
+import { LayoutNode, type InlineRun } from "../../dom/node.js";
+import { Display, FloatMode } from "../../css/enums.js";
+import { resolvedLineHeight } from "../../css/style.js";
+import { resolveLength } from "../../css/length.js";
+import type { InlineLayoutOptions, InlineLayoutResult, LayoutItem, InlineMetrics } from "./types.js";
+import { isBoxItem } from "./types.js";
+import type { LayoutContext } from "../pipeline/strategy.js";
+import { collectInlineFragments, tokenizeFragments, splitWordItemToken } from "./tokenizer.js";
+import { FloatContext } from "../context/float-context.js";
+import {
+    resolveInlineTextAlign,
+    isInlineDisplay,
+    shouldLayoutInlineChildren,
+    collectInlineParticipants,
+    inlineExtentWithinContainer,
+} from "./inline-utils.js";
+import { getAlignmentStrategy, type TextAlignmentStrategy } from "./text-alignment.js";
+import { BoundingBoxCalculator } from "./bounding-box-calculator.js";
+import { RunPlacer } from "./run-placer.js";
+import { createLayoutDebug } from "../debug.js";
+
+
+
+export function layoutInlineFormattingContext(options: InlineLayoutOptions): InlineLayoutResult {
+    const { container, inlineNodes, context, floatContext, contentX, contentWidth } = options;
+    container.establishesIFC = true;
+    const layoutDebug = createLayoutDebug(context);
+
+    const textAlign = container.style.display === Display.Inline
+        ? undefined
+        : resolveInlineTextAlign(container);
+    const alignmentStrategy = getAlignmentStrategy(textAlign);
+    const shouldApplyTextIndent = container.style.display !== Display.Inline;
+    const resolvedTextIndent = shouldApplyTextIndent
+        ? resolveLength(container.style.textIndent, contentWidth, { auto: "zero" })
+        : 0;
+    let firstLineTextIndentPending = shouldApplyTextIndent && resolvedTextIndent !== 0;
+
+    const layoutCallback = (node: LayoutNode, width: number, ctx: any) => layoutInlineChildrenIfNeeded(node, width, ctx);
+    const fragments = collectInlineFragments(inlineNodes, contentWidth, context, layoutCallback);
+    const items = tokenizeFragments(fragments, context.env.fontEmbedder);
+
+    let lineTop = options.startY;
+    let lineHeight = Math.max(resolvedLineHeight(container.style), 0);
+    let inlineOffset = floatContext.inlineOffsets(lineTop, lineTop + lineHeight, contentWidth);
+    let availableWidth = Math.max(0, inlineOffset.end - inlineOffset.start);
+    let cursorX = 0;
+    let lineIndex = 0;
+    const lineParts: { item: LayoutItem; offset: number }[] = [];
+    const runPlacer = new RunPlacer(context.env.fontEmbedder);
+
+    const placeRunsForLine = (parts: { item: LayoutItem; offset: number }[], isLastLine: boolean) => {
+        const offsetShift = alignmentStrategy.calculateOffset(
+            parts.reduce((max, part) => Math.max(max, part.offset + part.item.width), 0),
+            Math.max(availableWidth, 0)
+        );
+
+        runPlacer.placeRunsForLine(parts, {
+            lineTop,
+            lineHeight,
+            lineStartX: contentX + inlineOffset.start + offsetShift,
+            lineIndex,
+            availableWidth,
+            offsetShift,
+            isLastLine,
+            contentX,
+            inlineOffsetStart: inlineOffset.start,
+        });
+    };
+
+    const commitLine = (isLastLine: boolean) => {
+        if (lineParts.length === 0) {
+            lineTop += lineHeight;
+        } else {
+            placeRunsForLine(lineParts, isLastLine);
+            lineTop += lineHeight;
+        }
+        cursorX = 0;
+        lineHeight = Math.max(resolvedLineHeight(container.style), 0);
+        lineParts.length = 0;
+        inlineOffset = floatContext.inlineOffsets(lineTop, lineTop + lineHeight, contentWidth);
+        availableWidth = Math.max(0, inlineOffset.end - inlineOffset.start);
+        lineIndex += 1;
+    };
+
+    for (let index = 0; index < items.length; index++) {
+        const item = items[index];
+
+        if (item.kind === "newline") {
+            commitLine(false);
+            continue;
+        }
+
+        let workingItem: LayoutItem | null = item;
+
+        while (workingItem) {
+            if (availableWidth <= 0) {
+                const nextLineTop = floatContext.nextUnblockedY(lineTop, lineTop + lineHeight);
+                if (nextLineTop === null) {
+                    // No floats to skip; allow overflow on this line.
+                    availableWidth = Math.max(0, contentWidth);
+                    inlineOffset = { start: 0, end: contentWidth };
+                } else {
+                    lineTop = nextLineTop;
+                    inlineOffset = floatContext.inlineOffsets(lineTop, lineTop + lineHeight, contentWidth);
+                    availableWidth = Math.max(0, inlineOffset.end - inlineOffset.start);
+                    cursorX = 0;
+                    lineParts.length = 0;
+                    continue;
+                }
+            }
+
+            if (lineParts.length === 0 && firstLineTextIndentPending) {
+                cursorX += resolvedTextIndent;
+                firstLineTextIndentPending = false;
+            }
+
+            const remaining = Math.max(availableWidth - cursorX, 0);
+
+            if (workingItem.kind === "box") {
+                if (lineParts.length > 0 && cursorX + workingItem.width > availableWidth) {
+                    commitLine(false);
+                    continue;
+                }
+                if (lineParts.length === 0 && workingItem.width > availableWidth) {
+                    const nextLineTop = floatContext.nextUnblockedY(lineTop, lineTop + lineHeight);
+                    if (nextLineTop === null) {
+                        lineParts.push({ item: workingItem, offset: cursorX });
+                        cursorX += workingItem.width;
+                        lineHeight = Math.max(lineHeight, workingItem.lineHeight);
+                        break;
+                    }
+                    lineTop = nextLineTop;
+                    inlineOffset = floatContext.inlineOffsets(lineTop, lineTop + lineHeight, contentWidth);
+                    availableWidth = Math.max(0, inlineOffset.end - inlineOffset.start);
+                    cursorX = 0;
+                    lineParts.length = 0;
+                    continue;
+                }
+
+                lineParts.push({ item: workingItem, offset: cursorX });
+                cursorX += workingItem.width;
+                lineHeight = Math.max(lineHeight, workingItem.lineHeight);
+                break;
+            }
+
+            // Text items
+            if (workingItem.kind === "word" && workingItem.width > remaining) {
+                const mode = workingItem.style?.overflowWrap ?? "normal";
+                if (mode !== "normal" && remaining > 0) {
+                    const [head, tail] = splitWordItemToken(workingItem, remaining);
+                    if (head) {
+                        lineParts.push({ item: head, offset: cursorX });
+                        cursorX += head.width;
+                        lineHeight = Math.max(lineHeight, head.lineHeight);
+                    }
+                    if (tail) {
+                        items.splice(index + 1, 0, tail);
+                    }
+                    workingItem = null;
+                    break;
+                }
+            }
+
+            if (lineParts.length > 0 && cursorX + workingItem.width > availableWidth) {
+                commitLine(false);
+                continue;
+            }
+
+            if (lineParts.length === 0 && workingItem.width > availableWidth && workingItem.kind === "word") {
+                const nextLineTop = floatContext.nextUnblockedY(lineTop, lineTop + lineHeight);
+                if (nextLineTop === null) {
+                    lineParts.push({ item: workingItem, offset: cursorX });
+                    cursorX += workingItem.width;
+                    lineHeight = Math.max(lineHeight, workingItem.lineHeight);
+                    workingItem = null;
+                    break;
+                }
+                lineTop = nextLineTop;
+                inlineOffset = floatContext.inlineOffsets(lineTop, lineTop + lineHeight, contentWidth);
+                availableWidth = Math.max(0, inlineOffset.end - inlineOffset.start);
+                cursorX = 0;
+                lineParts.length = 0;
+                continue;
+            }
+
+            lineParts.push({ item: workingItem, offset: cursorX });
+            cursorX += workingItem.width;
+            lineHeight = Math.max(lineHeight, workingItem.lineHeight);
+            workingItem = null;
+        }
+    }
+
+    if (lineParts.length > 0) {
+        commitLine(true);
+    }
+
+    // Compute per-node sizes and propagate bounding boxes
+    const nodeRuns = runPlacer.getNodeRuns();
+    const boxCalculator = new BoundingBoxCalculator();
+    boxCalculator.computeNodeBoxes(nodeRuns);
+    boxCalculator.propagateBoundingBoxes(nodeRuns, container);
+
+    return { newCursorY: lineTop };
+}
+
+export function placeInlineItem(item: InlineMetrics, lineStartX: number, lineTop: number, context?: LayoutContext): void {
+    const { node } = item;
+    const contentX = lineStartX + item.lineOffset + item.marginLeft + item.borderLeft + item.paddingLeft;
+    const contentY = lineTop + item.marginTop + item.borderTop + item.paddingTop;
+    const layoutDebug = context ? createLayoutDebug(context) : (): void => { /* no-op */ };
+    layoutDebug(`[placeInlineItem] node=${node.tagName ?? "(anonymous)"} lineStartX=${lineStartX} lineOffset=${item.lineOffset} marginLeft=${item.marginLeft} paddingLeft=${item.paddingLeft} borderLeft=${item.borderLeft} -> contentX=${contentX}`);
+
+    const previousX = node.box.x;
+    const previousY = node.box.y;
+
+    node.box.x = contentX;
+    node.box.y = contentY;
+    node.box.baseline = contentY + item.contentHeight;
+
+    const deltaX = node.box.x - previousX;
+    const deltaY = node.box.y - previousY;
+    if (deltaX !== 0 || deltaY !== 0) {
+        offsetInlineDescendants(node, deltaX, deltaY);
+    }
+}
+
+export function offsetInlineDescendants(node: LayoutNode, deltaX: number, deltaY: number): void {
+    for (const child of node.children) {
+        child.shift(deltaX, deltaY);
+    }
+}
+
+function layoutInlineChildrenIfNeeded(
+    node: LayoutNode,
+    containerWidth: number,
+    context: any, // Using any to avoid circular type dependency if needed, or import LayoutContext
+): { contentWidth: number; contentHeight: number } | null {
+    if (!shouldLayoutInlineChildren(node)) {
+        return null;
+    }
+
+    const inlineChildren = collectInlineParticipants(node);
+    if (inlineChildren.length === 0) {
+        return null;
+    }
+
+    const savedX = node.box.x;
+    const savedY = node.box.y;
+    node.box.x = 0;
+    node.box.y = 0;
+
+    for (const child of inlineChildren) {
+        child.box.x = 0;
+        child.box.y = 0;
+    }
+
+    const localFloatContext = new FloatContext();
+    const result = layoutInlineFormattingContext({
+        container: node,
+        inlineNodes: inlineChildren,
+        context,
+        floatContext: localFloatContext,
+        contentX: 0,
+        contentWidth: Math.max(containerWidth, 0),
+        startY: 0,
+    });
+
+    const floatBottom = Math.max(localFloatContext.bottom("left"), localFloatContext.bottom("right"));
+    const contentHeight = Math.max(result.newCursorY, floatBottom);
+
+    let maxInlineEnd = 0;
+    for (const child of inlineChildren) {
+        const extent = inlineExtentWithinContainer(child, containerWidth);
+        maxInlineEnd = Math.max(maxInlineEnd, extent.end);
+    }
+
+    node.box.x = savedX;
+    node.box.y = savedY;
+
+    return {
+        contentWidth: Math.max(0, maxInlineEnd),
+        contentHeight: Math.max(0, contentHeight),
+    };
+}

package/src/layout/inline/line_breaker.ts

@@ -0,0 +1,109 @@
+export type MeasureFn = (
+  text: string,
+  fontFamily: string,
+  fontSizePx: number,
+  fontWeight?: number,
+  fontStyle?: string
+) => { width: number; ascent: number; descent: number; lineHeight: number };
+
+export type LineBox = {
+  text: string;
+  width: number;
+  ascent: number;
+  descent: number;
+  height: number; // = resolved line-height
+};
+
+export type ComputedStyle = {
+  fontFamily: string;
+  fontSizePx: number;
+  fontWeight?: number;
+  fontStyle?: string;
+  lineHeightPx: number;
+  whiteSpace?: 'normal'|'nowrap'|'pre'|'pre-wrap'|'pre-line';
+  overflowWrap?: 'normal'|'break-word'|'anywhere';
+  wordBreak?: 'normal'|'break-all'|'keep-all';
+};
+
+export function tokenizeInline(text: string): string[] {
+  // Keep spaces as tokens so we preserve gaps and can wrap before them
+  // "Row 3, Cell 3" → ["Row"," ","3",","," ","Cell"," ","3"]
+  const tokens: string[] = [];
+  const re = /(\s+|[^\s]+)/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(text)) !== null) tokens.push(m[0]);
+  return tokens;
+}
+
+export function buildLineBoxes(
+  text: string,
+  style: ComputedStyle,
+  availWidthPx: number,
+  measure: MeasureFn
+): LineBox[] {
+  const { fontFamily, fontSizePx, fontWeight, fontStyle, lineHeightPx,
+          whiteSpace = 'normal', overflowWrap = 'normal', wordBreak = 'normal' } = style;
+
+  // Short-circuit for nowrap
+  if (whiteSpace === 'nowrap') {
+    const m = measure(text, fontFamily, fontSizePx, fontWeight, fontStyle);
+    return [{ text, width: m.width, ascent: m.ascent, descent: m.descent, height: lineHeightPx }];
+  }
+
+  const tokens = tokenizeInline(text);
+  const lines: LineBox[] = [];
+
+  let cur = '';
+  let curW = 0;
+
+  const push = (s: string) => {
+    const m = measure(s, fontFamily, fontSizePx, fontWeight, fontStyle);
+    lines.push({ text: s, width: m.width, ascent: m.ascent, descent: m.descent, height: lineHeightPx });
+  };
+  const w = (s: string) => measure(s, fontFamily, fontSizePx, fontWeight, fontStyle).width;
+
+  for (let i = 0; i < tokens.length; i++) {
+    const tok = tokens[i];
+
+    // Handle explicit newlines in pre/pre-wrap
+    if ((whiteSpace === 'pre' || whiteSpace === 'pre-wrap') && tok.includes('\n')) {
+      const parts = tok.split(/(\n)/);
+      for (const part of parts) {
+        if (part === '\n') { push(cur); cur = ''; curW = 0; }
+        else {
+          const pw = w(part);
+          if (!cur || curW + pw <= availWidthPx) { cur += part; curW += pw; }
+          else { push(cur); cur = part; curW = pw; }
+        }
+      }
+      continue;
+    }
+
+    const tokW = w(tok);
+
+    if (!cur) {
+      if (tokW <= availWidthPx) { cur = tok; curW = tokW; }
+      else {
+        // Oversized single token policy
+        if (wordBreak === 'break-all' || overflowWrap === 'anywhere' || overflowWrap === 'break-word') {
+          let chunk = '';
+          for (const ch of tok) {
+            const test = chunk + ch;
+            if (w(test) > availWidthPx && chunk) { push(chunk); chunk = ch; }
+            else chunk = test;
+          }
+          if (chunk) { cur = chunk; curW = w(chunk); }
+        } else {
+          cur = tok; curW = tokW; // allow overflow like browsers
+        }
+      }
+      continue;
+    }
+
+    if (curW + tokW <= availWidthPx) { cur += tok; curW += tokW; }
+    else { push(cur); cur = ''; curW = 0; i--; } // wrap before tok
+  }
+
+  if (cur !== '') push(cur);
+  return lines.length ? lines : [{ text: '', width: 0, ascent: 0, descent: 0, height: lineHeightPx }];
+}

package/src/layout/inline/measurement.ts

@@ -0,0 +1,144 @@
+import { LayoutNode } from "../../dom/node.js";
+import { Display } from "../../css/enums.js";
+import { resolvedLineHeight } from "../../css/style.js";
+import { clampMinMax, resolveLength } from "../../css/length.js";
+import type { LayoutContext } from "../pipeline/strategy.js";
+import { estimateLineWidth, measureTextWithGlyphs } from "../utils/text-metrics.js";
+import { FontEmbedder } from "../../pdf/font/embedder.js";
+import type { InlineMetrics } from "./types.js";
+import { FloatContext } from "../context/float-context.js";
+
+export type LayoutCallback = (node: LayoutNode, containerWidth: number, context: LayoutContext) => { contentWidth: number; contentHeight: number } | null;
+
+export function measureSegment(text: string, style: LayoutNode["style"], fontEmbedder: FontEmbedder | null): number {
+    const fontWeight = typeof style.fontWeight === "number" ? style.fontWeight : 400;
+    const fontStyle = style.fontStyle ?? "normal";
+    const metrics = fontEmbedder?.getMetrics(style.fontFamily ?? "", fontWeight, fontStyle);
+    const glyphWidth = measureTextWithGlyphs(text, style, metrics ?? null);
+    return glyphWidth ?? estimateLineWidth(text, style);
+}
+
+export function countSpaces(value: string): number {
+    let count = 0;
+    for (const char of value) {
+        if (char === " ") {
+            count += 1;
+        }
+    }
+    return count;
+}
+
+export function measureInlineNode(node: LayoutNode, containerWidth: number, context: LayoutContext, layoutCallback: LayoutCallback): InlineMetrics {
+    if (node.style.display === Display.InlineBlock || node.style.display === Display.InlineFlex || node.style.display === Display.InlineGrid || node.style.display === Display.InlineTable) {
+        const savedX = node.box.x;
+        const savedY = node.box.y;
+        context.layoutChild(node);
+        node.box.x = savedX;
+        node.box.y = savedY;
+    }
+
+    const marginLeft = resolveLength(node.style.marginLeft, containerWidth, { auto: "zero" });
+    const marginRight = resolveLength(node.style.marginRight, containerWidth, { auto: "zero" });
+    const marginTop = resolveLength(node.style.marginTop, containerWidth, { auto: "zero" });
+    const marginBottom = resolveLength(node.style.marginBottom, containerWidth, { auto: "zero" });
+
+    const inlineChildrenResult = layoutCallback(node, containerWidth, context);
+
+    let contentWidth = node.box.contentWidth;
+    let contentHeight = node.box.contentHeight;
+
+    if (inlineChildrenResult) {
+        contentWidth = Math.max(contentWidth, inlineChildrenResult.contentWidth);
+        contentHeight = Math.max(contentHeight, inlineChildrenResult.contentHeight);
+    }
+
+    if (node.style.display === Display.InlineBlock && node.style.width === "auto") {
+        const intrinsicWidth = node.box.scrollWidth;
+        if (Number.isFinite(intrinsicWidth) && intrinsicWidth > 0 && intrinsicWidth < contentWidth) {
+            const minWidth = node.style.minWidth !== undefined ? resolveLength(node.style.minWidth, containerWidth, { auto: "zero" }) : undefined;
+            const maxWidth = node.style.maxWidth !== undefined ? resolveLength(node.style.maxWidth, containerWidth, { auto: "reference" }) : undefined;
+            const clamped = clampMinMax(intrinsicWidth, minWidth, maxWidth);
+            contentWidth = Math.min(clamped, contentWidth);
+        }
+    }
+
+    if (contentWidth === 0 && !node.textContent) {
+        if (typeof node.style.width === "number") {
+            contentWidth = node.style.width;
+        } else if (node.style.width !== "auto") {
+            contentWidth = resolveLength(node.style.width, containerWidth, { auto: "zero" });
+        } else if (node.intrinsicInlineSize !== undefined) {
+            contentWidth = node.intrinsicInlineSize;
+        } else {
+            contentWidth = resolvedLineHeight(node.style);
+        }
+    }
+
+    if (contentHeight === 0 && !node.textContent) {
+        if (node.style.height !== "auto") {
+            contentHeight = resolveLength(node.style.height, containerWidth, { auto: "zero" });
+        } else if (node.intrinsicBlockSize !== undefined) {
+            contentHeight = node.intrinsicBlockSize;
+        } else {
+            contentHeight = resolvedLineHeight(node.style);
+        }
+    }
+
+    const paddingLeft = resolveLength(node.style.paddingLeft, containerWidth, { auto: "zero" });
+    const paddingRight = resolveLength(node.style.paddingRight, containerWidth, { auto: "zero" });
+    const paddingTop = resolveLength(node.style.paddingTop, containerWidth, { auto: "zero" });
+    const paddingBottom = resolveLength(node.style.paddingBottom, containerWidth, { auto: "zero" });
+
+    const borderLeft = resolveLength(node.style.borderLeft, containerWidth, { auto: "zero" });
+    const borderRight = resolveLength(node.style.borderRight, containerWidth, { auto: "zero" });
+    const borderTop = resolveLength(node.style.borderTop, containerWidth, { auto: "zero" });
+    const borderBottom = resolveLength(node.style.borderBottom, containerWidth, { auto: "zero" });
+
+    node.box.contentWidth = contentWidth;
+    node.box.contentHeight = contentHeight;
+    node.box.borderBoxWidth = contentWidth + paddingLeft + paddingRight + borderLeft + borderRight;
+    node.box.borderBoxHeight = contentHeight + paddingTop + paddingBottom + borderTop + borderBottom;
+    node.box.marginBoxWidth = node.box.borderBoxWidth + marginLeft + marginRight;
+    node.box.marginBoxHeight = node.box.borderBoxHeight + marginTop + marginBottom;
+    node.box.scrollWidth = Math.max(node.box.scrollWidth, node.box.contentWidth);
+    node.box.scrollHeight = Math.max(node.box.scrollHeight, node.box.contentHeight);
+
+    return {
+        node,
+        contentWidth,
+        contentHeight,
+        lineOffset: 0,
+        marginLeft,
+        marginRight,
+        marginTop,
+        marginBottom,
+        paddingLeft,
+        paddingRight,
+        paddingTop,
+        paddingBottom,
+        borderLeft,
+        borderRight,
+        borderTop,
+        borderBottom,
+        outerWidth: node.box.marginBoxWidth,
+        outerHeight: node.box.marginBoxHeight,
+    };
+}
+
+function inlineExtentWithinContainer(node: LayoutNode, referenceWidth: number): { start: number; end: number } {
+    const marginLeft = resolveLength(node.style.marginLeft, referenceWidth, { auto: "zero" });
+    const marginRight = resolveLength(node.style.marginRight, referenceWidth, { auto: "zero" });
+    const paddingLeft = resolveLength(node.style.paddingLeft, referenceWidth, { auto: "zero" });
+    const paddingRight = resolveLength(node.style.paddingRight, referenceWidth, { auto: "zero" });
+    const borderLeft = resolveLength(node.style.borderLeft, referenceWidth, { auto: "zero" });
+    const borderRight = resolveLength(node.style.borderRight, referenceWidth, { auto: "zero" });
+
+    const marginStart = node.box.x - paddingLeft - borderLeft - marginLeft;
+    const width =
+        node.box.contentWidth + paddingLeft + paddingRight + borderLeft + borderRight + marginLeft + marginRight;
+
+    return {
+        start: marginStart,
+        end: marginStart + width,
+    };
+}

package/src/layout/inline/run-placer.ts

@@ -0,0 +1,139 @@
+import { LayoutNode, type InlineRun } from "../../dom/node.js";
+import type { LayoutItem } from "./types.js";
+import { isBoxItem } from "./types.js";
+import { placeInlineItem } from "./layout.js";
+import { calculateBaseline } from "./font-baseline-calculator.js";
+import type { FontEmbedder } from "../../pdf/font/embedder.js";
+
+/**
+ * Context information for placing runs on a specific line
+ */
+export interface LineContext {
+    lineTop: number;
+    lineHeight: number;
+    lineStartX: number;
+    lineIndex: number;
+    availableWidth: number;
+    offsetShift: number;
+    isLastLine: boolean;
+    contentX: number;
+    inlineOffsetStart: number;
+}
+
+/**
+ * Responsible for placing text runs and box items on lines.
+ * Tracks runs per node and handles both text and inline-block layouts.
+ */
+export class RunPlacer {
+    private nodeRuns = new Map<LayoutNode, InlineRun[]>();
+    private maxInlineEnd = 0;
+
+    constructor(private readonly fontEmbedder: FontEmbedder | null = null) { }
+
+    /**
+     * Place all items on a line, creating InlineRun objects for text and positioning box items.
+     */
+    placeRunsForLine(
+        parts: { item: LayoutItem; offset: number }[],
+        lineContext: LineContext
+    ): void {
+        if (parts.length === 0) {
+            return;
+        }
+
+        const { lineTop, lineHeight, lineStartX, lineIndex, availableWidth, offsetShift, isLastLine, contentX, inlineOffsetStart } = lineContext;
+
+        const lineWidth = parts.reduce((max, part) => Math.max(max, part.offset + part.item.width), 0);
+        const currentAvailableWidth = Math.max(availableWidth, 0);
+
+        const spaceCount = parts.reduce((count, part) => {
+            if (part.item.kind === "space") {
+                return count + (part.item.spaceCount ?? 1);
+            }
+            return count;
+        }, 0);
+
+        this.maxInlineEnd = Math.max(this.maxInlineEnd, lineStartX + lineWidth - contentX);
+
+        for (const part of parts) {
+            // Handle box items (inline-block, etc.)
+            if (isBoxItem(part.item)) {
+                const metrics = part.item.metrics;
+                metrics.lineOffset = part.offset + offsetShift;
+                placeInlineItem(metrics, contentX + inlineOffsetStart, lineTop);
+                continue;
+            }
+
+            // Handle text items
+            const node = part.item.node;
+            if (!node || !part.item.text) {
+                continue;
+            }
+
+            // Calculate baseline based on the item's fontSize and lineHeight
+            const fontSize = part.item.style?.fontSize ?? 16;
+            const itemLineHeight = part.item.lineHeight ?? lineHeight;
+
+            // Use calculateBaseline with font metrics when available
+            const fontFamily = part.item.style?.fontFamily ?? "sans-serif";
+            const fontWeight = part.item.style?.fontWeight ?? 400;
+            const fontStyle = part.item.style?.fontStyle ?? "normal";
+
+            const fontMetrics = this.fontEmbedder?.getMetrics(fontFamily, fontWeight, fontStyle);
+            const lineBaseline = calculateBaseline(lineTop, fontSize, itemLineHeight, fontMetrics);
+
+            const startX = lineStartX + part.offset;
+            const run: InlineRun = {
+                lineIndex,
+                startX,
+                baseline: lineBaseline,
+                text: part.item.text,
+                width: part.item.width,
+                lineWidth,
+                targetWidth: currentAvailableWidth,
+                spaceCount: spaceCount,
+                isLastLine,
+            };
+
+            // Update node.box.x to track the minimum startX across all runs for this node
+            // This ensures the bounding box starts at the leftmost run position
+            if (!this.nodeRuns.has(node)) {
+                // First run for this node - set initial position
+                node.box.x = startX;
+                node.box.y = lineTop;
+            } else {
+                // Multiple runs -use the minimum X and Y to encompass all runs
+                node.box.x = Math.min(node.box.x, startX);
+                node.box.y = Math.min(node.box.y, lineTop);
+            }
+            node.box.baseline = lineBaseline;
+            this.pushRun(node, run);
+        }
+    }
+
+    /**
+     * Get all collected node runs
+     */
+    getNodeRuns(): Map<LayoutNode, InlineRun[]> {
+        return this.nodeRuns;
+    }
+
+    /**
+     * Get the maximum inline end position seen
+     */
+    getMaxInlineEnd(): number {
+        return this.maxInlineEnd;
+    }
+
+    /**
+     * Add a run to a node's run list
+     */
+    private pushRun(node: LayoutNode, run: InlineRun): void {
+        const existing = this.nodeRuns.get(node);
+        if (existing) {
+            existing.push(run);
+        } else {
+            this.nodeRuns.set(node, [run]);
+        }
+    }
+}