diff --git a/packages/layout-engine/painters/dom/src/between-borders.test.ts b/packages/layout-engine/painters/dom/src/between-borders.test.ts
index 52627ac04e..12f33cf124 100644
--- a/packages/layout-engine/painters/dom/src/between-borders.test.ts
+++ b/packages/layout-engine/painters/dom/src/between-borders.test.ts
@@ -6,7 +6,7 @@ import {
   getParagraphBorderBox,
   computeBorderSpaceExpansion,
   type BetweenBorderInfo,
-} from './features/paragraph-borders/index.js';
+} from './paragraph/borders/index.js';
 import { hashParagraphBorders } from './paragraph-hash-utils.js';
 
 /** Helper to create BetweenBorderInfo for tests that previously passed a boolean. */
diff --git a/packages/layout-engine/painters/dom/src/features/feature-registry.ts b/packages/layout-engine/painters/dom/src/features/feature-registry.ts
index 05cab44146..5d8aabe5a0 100644
--- a/packages/layout-engine/painters/dom/src/features/feature-registry.ts
+++ b/packages/layout-engine/painters/dom/src/features/feature-registry.ts
@@ -17,8 +17,8 @@ export const RENDERING_FEATURES = {
   // ─── Paragraph Borders ───────────────────────────────────────────
   // @spec ECMA-376 §17.3.1.24 (pBdr)
   'w:pBdr': {
-    feature: 'paragraph-borders',
-    module: './paragraph-borders',
+    feature: 'paragraph/borders',
+    module: '../paragraph/borders',
     handles: ['w:pBdr/w:top', 'w:pBdr/w:bottom', 'w:pBdr/w:left', 'w:pBdr/w:right', 'w:pBdr/w:between', 'w:pBdr/w:bar'],
     spec: '§17.3.1.24',
   },
@@ -26,8 +26,8 @@ export const RENDERING_FEATURES = {
   // ─── Paragraph Shading ───────────────────────────────────────────
   // @spec ECMA-376 §17.3.1.31 (shd)
   'w:shd': {
-    feature: 'paragraph-borders', // shading shares the border layer module
-    module: './paragraph-borders',
+    feature: 'paragraph/borders', // shading shares the border layer module
+    module: '../paragraph/borders',
     handles: ['w:shd/@w:fill', 'w:shd/@w:val', 'w:shd/@w:color'],
     spec: '§17.3.1.31',
   },
diff --git a/packages/layout-engine/painters/dom/src/index.ts b/packages/layout-engine/painters/dom/src/index.ts
index 5d91414acb..3207a7e360 100644
--- a/packages/layout-engine/painters/dom/src/index.ts
+++ b/packages/layout-engine/painters/dom/src/index.ts
@@ -40,10 +40,11 @@ export type {
   PaintSnapshotImageEntity,
   PaintSnapshotEntities,
 } from './renderer.js';
-export type { DomPainterInput, PositionMapping, RenderedLineInfo } from './renderer.js';
+export type { DomPainterInput, PositionMapping } from './renderer.js';
+export type { RenderedLineInfo } from './runs/index.js';
 
 // Re-export utility functions for testing
-export { sanitizeUrl, linkMetrics, applyRunDataAttributes } from './renderer.js';
+export { sanitizeUrl, linkMetrics, applyRunDataAttributes } from './runs/index.js';
 
 export { applySquareWrapExclusionsToLines } from './utils/anchor-helpers';
 export { buildImagePmSelector, buildInlineImagePmSelector } from './utils/image-selectors.js';
diff --git a/packages/layout-engine/painters/dom/src/paragraph-hash-utils.ts b/packages/layout-engine/painters/dom/src/paragraph-hash-utils.ts
index 55870ed7e9..57883ea6da 100644
--- a/packages/layout-engine/painters/dom/src/paragraph-hash-utils.ts
+++ b/packages/layout-engine/painters/dom/src/paragraph-hash-utils.ts
@@ -1,5 +1,4 @@
 import type {
-  Run,
   ParagraphBorders,
   ParagraphBorder,
   TableBorders,
@@ -82,108 +81,13 @@ export const hashCellBorders = (borders: CellBorders | undefined): string => {
   return parts.join(';');
 };
 
-/**
- * Type guard to check if a run has a string property.
- *
- * @param run - The run to check
- * @param prop - The property name to check
- * @returns True if the run has the property and it's a string
- */
-export const hasStringProp = (run: Run, prop: string): run is Run & Record<string, string> => {
-  return prop in run && typeof (run as Record<string, unknown>)[prop] === 'string';
-};
-
-/**
- * Type guard to check if a run has a number property.
- *
- * @param run - The run to check
- * @param prop - The property name to check
- * @returns True if the run has the property and it's a number
- */
-export const hasNumberProp = (run: Run, prop: string): run is Run & Record<string, number> => {
-  return prop in run && typeof (run as Record<string, unknown>)[prop] === 'number';
-};
-
-/**
- * Type guard to check if a run has a boolean property.
- *
- * @param run - The run to check
- * @param prop - The property name to check
- * @returns True if the run has the property and it's a boolean
- */
-export const hasBooleanProp = (run: Run, prop: string): run is Run & Record<string, boolean> => {
-  return prop in run && typeof (run as Record<string, unknown>)[prop] === 'boolean';
-};
-
-/**
- * Safely gets a string property from a run, with type narrowing.
- *
- * @param run - The run to get the property from
- * @param prop - The property name
- * @returns The string value or empty string if not present
- */
-export const getRunStringProp = (run: Run, prop: string): string => {
-  if (hasStringProp(run, prop)) {
-    return run[prop];
-  }
-  return '';
-};
-
-/**
- * Safely gets a number property from a run, with type narrowing.
- *
- * @param run - The run to get the property from
- * @param prop - The property name
- * @returns The number value or 0 if not present
- */
-export const getRunNumberProp = (run: Run, prop: string): number => {
-  if (hasNumberProp(run, prop)) {
-    return run[prop];
-  }
-  return 0;
-};
-
-/**
- * Safely gets a boolean property from a run, with type narrowing.
- *
- * @param run - The run to get the property from
- * @param prop - The property name
- * @returns The boolean value or false if not present
- */
-export const getRunBooleanProp = (run: Run, prop: string): boolean => {
-  if (hasBooleanProp(run, prop)) {
-    return run[prop];
-  }
-  return false;
-};
-
-/**
- * Safely gets the underline style from a run.
- * Handles the object-shaped underline property { style?, color? }.
- *
- * @param run - The run to get the underline style from
- * @returns The underline style or empty string if not present
- */
-export const getRunUnderlineStyle = (run: Run): string => {
-  if ('underline' in run && typeof run.underline === 'boolean') {
-    return run.underline ? 'single' : '';
-  }
-  if ('underline' in run && run.underline && typeof run.underline === 'object') {
-    return (run.underline as { style?: string }).style ?? '';
-  }
-  return '';
-};
-
-/**
- * Safely gets the underline color from a run.
- * Handles the object-shaped underline property { style?, color? }.
- *
- * @param run - The run to get the underline color from
- * @returns The underline color or empty string if not present
- */
-export const getRunUnderlineColor = (run: Run): string => {
-  if ('underline' in run && run.underline && typeof run.underline === 'object') {
-    return (run.underline as { color?: string }).color ?? '';
-  }
-  return '';
-};
+export {
+  getRunBooleanProp,
+  getRunNumberProp,
+  getRunStringProp,
+  getRunUnderlineColor,
+  getRunUnderlineStyle,
+  hasBooleanProp,
+  hasNumberProp,
+  hasStringProp,
+} from './runs/hash.js';
diff --git a/packages/layout-engine/painters/dom/src/paragraph/block-version.ts b/packages/layout-engine/painters/dom/src/paragraph/block-version.ts
new file mode 100644
index 0000000000..19ffa2f086
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/paragraph/block-version.ts
@@ -0,0 +1,230 @@
+import type { ImageRun, ParagraphAttrs, ParagraphBlock, TextRun } from '@superdoc/contracts';
+import { getParagraphInlineDirection } from '@superdoc/contracts';
+import { hashParagraphBorders } from '../paragraph-hash-utils.js';
+import {
+  getRunBooleanProp,
+  getRunNumberProp,
+  getRunStringProp,
+  getRunUnderlineColor,
+  getRunUnderlineStyle,
+} from '../runs/hash.js';
+
+type ParagraphHashFns = {
+  hashString: (seed: number, value: string) => number;
+  hashNumber: (seed: number, value: number | undefined | null) => number;
+};
+
+const hasListMarkerProperties = (
+  attrs: unknown,
+): attrs is {
+  numberingProperties: { numId?: number | string; ilvl?: number };
+  wordLayout?: { marker?: { markerText?: string } };
+} => {
+  if (!attrs || typeof attrs !== 'object') return false;
+  const obj = attrs as Record<string, unknown>;
+
+  if (!obj.numberingProperties || typeof obj.numberingProperties !== 'object') return false;
+  const numProps = obj.numberingProperties as Record<string, unknown>;
+
+  if ('numId' in numProps) {
+    const numId = numProps.numId;
+    if (typeof numId !== 'number' && typeof numId !== 'string') return false;
+  }
+
+  if ('ilvl' in numProps) {
+    const ilvl = numProps.ilvl;
+    if (typeof ilvl !== 'number') return false;
+  }
+
+  if ('wordLayout' in obj && obj.wordLayout !== undefined) {
+    if (typeof obj.wordLayout !== 'object' || obj.wordLayout === null) return false;
+    const wordLayout = obj.wordLayout as Record<string, unknown>;
+
+    if ('marker' in wordLayout && wordLayout.marker !== undefined) {
+      if (typeof wordLayout.marker !== 'object' || wordLayout.marker === null) return false;
+      const marker = wordLayout.marker as Record<string, unknown>;
+
+      if ('markerText' in marker && marker.markerText !== undefined) {
+        if (typeof marker.markerText !== 'string') return false;
+      }
+    }
+  }
+
+  return true;
+};
+
+export const deriveParagraphBlockVersion = (
+  block: ParagraphBlock,
+  getSdtMetadataVersion: (metadata: ParagraphAttrs['sdt']) => string,
+  readClipPathValue: (value: unknown) => string,
+): string => {
+  const markerVersion = hasListMarkerProperties(block.attrs)
+    ? `marker:${block.attrs.numberingProperties.numId ?? ''}:${block.attrs.numberingProperties.ilvl ?? 0}:${block.attrs.wordLayout?.marker?.markerText ?? ''}`
+    : '';
+
+  const runsVersion = block.runs
+    .map((run) => {
+      // Paragraph-level cache keys intentionally exclude run pmStart/pmEnd; position-only edits update datasets in place.
+      if (run.kind === 'image') {
+        const imgRun = run as ImageRun;
+        return [
+          'img',
+          imgRun.src,
+          imgRun.width,
+          imgRun.height,
+          imgRun.alt ?? '',
+          imgRun.title ?? '',
+          imgRun.clipPath ?? '',
+          imgRun.distTop ?? '',
+          imgRun.distBottom ?? '',
+          imgRun.distLeft ?? '',
+          imgRun.distRight ?? '',
+          readClipPathValue((imgRun as { clipPath?: unknown }).clipPath),
+        ].join(',');
+      }
+
+      if (run.kind === 'lineBreak') {
+        return 'linebreak';
+      }
+
+      if (run.kind === 'tab') {
+        return [run.text ?? '', 'tab'].join(',');
+      }
+
+      if (run.kind === 'fieldAnnotation') {
+        const size = run.size ? `${run.size.width ?? ''}x${run.size.height ?? ''}` : '';
+        const highlighted = run.highlighted !== false ? 1 : 0;
+        return [
+          'field',
+          run.variant ?? '',
+          run.displayLabel ?? '',
+          run.fieldColor ?? '',
+          run.borderColor ?? '',
+          highlighted,
+          run.hidden ? 1 : 0,
+          run.visibility ?? '',
+          run.imageSrc ?? '',
+          run.linkUrl ?? '',
+          run.rawHtml ?? '',
+          size,
+          run.fontFamily ?? '',
+          run.fontSize ?? '',
+          run.textColor ?? '',
+          run.textHighlight ?? '',
+          run.bold ? 1 : 0,
+          run.italic ? 1 : 0,
+          run.underline ? 1 : 0,
+          run.fieldId ?? '',
+          run.fieldType ?? '',
+        ].join(',');
+      }
+
+      const textRun = run as TextRun;
+      const trackedChangeVersion = textRun.trackedChange
+        ? [
+            textRun.trackedChange.kind ?? '',
+            textRun.trackedChange.id ?? '',
+            textRun.trackedChange.storyKey ?? '',
+            textRun.trackedChange.author ?? '',
+            textRun.trackedChange.authorEmail ?? '',
+            textRun.trackedChange.authorImage ?? '',
+            textRun.trackedChange.date ?? '',
+            textRun.trackedChange.before ? JSON.stringify(textRun.trackedChange.before) : '',
+            textRun.trackedChange.after ? JSON.stringify(textRun.trackedChange.after) : '',
+          ].join(':')
+        : '';
+      return [
+        textRun.text ?? '',
+        textRun.fontFamily,
+        textRun.fontSize,
+        textRun.bold ? 1 : 0,
+        textRun.italic ? 1 : 0,
+        textRun.color ?? '',
+        textRun.underline?.style ?? '',
+        textRun.underline?.color ?? '',
+        textRun.strike ? 1 : 0,
+        textRun.highlight ?? '',
+        textRun.letterSpacing != null ? textRun.letterSpacing : '',
+        textRun.vertAlign ?? '',
+        textRun.baselineShift != null ? textRun.baselineShift : '',
+        textRun.token ?? '',
+        trackedChangeVersion,
+        textRun.comments?.length ?? 0,
+      ].join(',');
+    })
+    .join('|');
+
+  const attrs = block.attrs as ParagraphAttrs | undefined;
+  const paragraphAttrsVersion = attrs
+    ? [
+        attrs.alignment ?? '',
+        attrs.spacing?.before ?? '',
+        attrs.spacing?.after ?? '',
+        attrs.spacing?.line ?? '',
+        attrs.spacing?.lineRule ?? '',
+        attrs.indent?.left ?? '',
+        attrs.indent?.right ?? '',
+        attrs.indent?.firstLine ?? '',
+        attrs.indent?.hanging ?? '',
+        attrs.borders ? hashParagraphBorders(attrs.borders) : '',
+        attrs.shading?.fill ?? '',
+        attrs.shading?.color ?? '',
+        getParagraphInlineDirection(attrs) ?? '',
+        attrs.tabs?.length ? JSON.stringify(attrs.tabs) : '',
+      ].join(':')
+    : '';
+
+  const sdtVersion = getSdtMetadataVersion(attrs?.sdt);
+  const parts = [markerVersion, runsVersion, paragraphAttrsVersion, sdtVersion].filter(Boolean);
+  return parts.join('|');
+};
+
+export const hashParagraphBlockForTableVersion = (
+  seed: number,
+  paragraphBlock: ParagraphBlock,
+  hashFns: ParagraphHashFns,
+): number => {
+  const { hashNumber, hashString } = hashFns;
+  const runs = paragraphBlock.runs ?? [];
+  let hash = hashNumber(seed, runs.length);
+  const attrs = paragraphBlock.attrs as ParagraphAttrs | undefined;
+
+  if (attrs) {
+    hash = hashString(hash, attrs.alignment ?? '');
+    hash = hashNumber(hash, attrs.spacing?.before ?? 0);
+    hash = hashNumber(hash, attrs.spacing?.after ?? 0);
+    hash = hashNumber(hash, attrs.spacing?.line ?? 0);
+    hash = hashString(hash, attrs.spacing?.lineRule ?? '');
+    hash = hashNumber(hash, attrs.indent?.left ?? 0);
+    hash = hashNumber(hash, attrs.indent?.right ?? 0);
+    hash = hashNumber(hash, attrs.indent?.firstLine ?? 0);
+    hash = hashNumber(hash, attrs.indent?.hanging ?? 0);
+    hash = hashString(hash, attrs.shading?.fill ?? '');
+    hash = hashString(hash, attrs.shading?.color ?? '');
+    hash = hashString(hash, getParagraphInlineDirection(attrs) ?? '');
+    if (attrs.borders) {
+      hash = hashString(hash, hashParagraphBorders(attrs.borders));
+    }
+  }
+
+  for (const run of runs) {
+    if ('text' in run && typeof run.text === 'string') {
+      hash = hashString(hash, run.text);
+    }
+    hash = hashNumber(hash, run.pmStart ?? -1);
+    hash = hashNumber(hash, run.pmEnd ?? -1);
+    hash = hashString(hash, getRunStringProp(run, 'color'));
+    hash = hashString(hash, getRunStringProp(run, 'highlight'));
+    hash = hashString(hash, getRunBooleanProp(run, 'bold') ? '1' : '');
+    hash = hashString(hash, getRunBooleanProp(run, 'italic') ? '1' : '');
+    hash = hashNumber(hash, getRunNumberProp(run, 'fontSize'));
+    hash = hashString(hash, getRunStringProp(run, 'fontFamily'));
+    hash = hashString(hash, getRunUnderlineStyle(run));
+    hash = hashString(hash, getRunUnderlineColor(run));
+    hash = hashString(hash, getRunBooleanProp(run, 'strike') ? '1' : '');
+    hash = hashString(hash, getRunStringProp(run, 'vertAlign'));
+    hash = hashNumber(hash, getRunNumberProp(run, 'baselineShift'));
+  }
+
+  return hash;
+};
diff --git a/packages/layout-engine/painters/dom/src/features/paragraph-borders/border-layer.ts b/packages/layout-engine/painters/dom/src/paragraph/borders/border-layer.ts
similarity index 100%
rename from packages/layout-engine/painters/dom/src/features/paragraph-borders/border-layer.ts
rename to packages/layout-engine/painters/dom/src/paragraph/borders/border-layer.ts
diff --git a/packages/layout-engine/painters/dom/src/features/paragraph-borders/group-analysis.ts b/packages/layout-engine/painters/dom/src/paragraph/borders/group-analysis.ts
similarity index 100%
rename from packages/layout-engine/painters/dom/src/features/paragraph-borders/group-analysis.ts
rename to packages/layout-engine/painters/dom/src/paragraph/borders/group-analysis.ts
diff --git a/packages/layout-engine/painters/dom/src/features/paragraph-borders/index.ts b/packages/layout-engine/painters/dom/src/paragraph/borders/index.ts
similarity index 100%
rename from packages/layout-engine/painters/dom/src/features/paragraph-borders/index.ts
rename to packages/layout-engine/painters/dom/src/paragraph/borders/index.ts
diff --git a/packages/layout-engine/painters/dom/src/paragraph/frame.ts b/packages/layout-engine/painters/dom/src/paragraph/frame.ts
new file mode 100644
index 0000000000..9e3b940543
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/paragraph/frame.ts
@@ -0,0 +1,43 @@
+import type { ParaFragment, ResolvedFragmentItem } from '@superdoc/contracts';
+import { assertFragmentPmPositions } from '../pm-position-validation.js';
+
+export type FragmentFrameSection = 'body' | 'header' | 'footer';
+
+export const applyParagraphFragmentPmAttributes = (
+  el: HTMLElement,
+  fragment: ParaFragment,
+  section?: FragmentFrameSection,
+  resolvedItem?: ResolvedFragmentItem,
+): void => {
+  if (section === 'body' || section === undefined) {
+    assertFragmentPmPositions(fragment, 'paragraph fragment');
+  }
+
+  const pmStart = resolvedItem ? resolvedItem.pmStart : fragment.pmStart;
+  if (pmStart != null) {
+    el.dataset.pmStart = String(pmStart);
+  } else {
+    delete el.dataset.pmStart;
+  }
+
+  const pmEnd = resolvedItem ? resolvedItem.pmEnd : fragment.pmEnd;
+  if (pmEnd != null) {
+    el.dataset.pmEnd = String(pmEnd);
+  } else {
+    delete el.dataset.pmEnd;
+  }
+
+  const continuesFromPrev = resolvedItem ? resolvedItem.continuesFromPrev : fragment.continuesFromPrev;
+  if (continuesFromPrev) {
+    el.dataset.continuesFromPrev = 'true';
+  } else {
+    delete el.dataset.continuesFromPrev;
+  }
+
+  const continuesOnNext = resolvedItem ? resolvedItem.continuesOnNext : fragment.continuesOnNext;
+  if (continuesOnNext) {
+    el.dataset.continuesOnNext = 'true';
+  } else {
+    delete el.dataset.continuesOnNext;
+  }
+};
diff --git a/packages/layout-engine/painters/dom/src/paragraph/indentation.ts b/packages/layout-engine/painters/dom/src/paragraph/indentation.ts
new file mode 100644
index 0000000000..72b9368c11
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/paragraph/indentation.ts
@@ -0,0 +1,102 @@
+import type { Line, ParagraphIndent } from '@superdoc/contracts';
+import { adjustAvailableWidthForTextIndent } from '@superdoc/contracts';
+
+export type ParagraphLineIndentationParams = {
+  lineEl: HTMLElement;
+  line: Line;
+  indent?: ParagraphIndent;
+  indentLeftPx: number;
+  hasListMarkerLayout: boolean;
+  lineIndex: number;
+  localStartLine: number;
+  continuesFromPrev?: boolean;
+  suppressFirstLineIndent: boolean;
+  resetContinuationTextIndent?: boolean;
+};
+
+export const hasExplicitSegmentPositioning = (line: Line): boolean =>
+  line.segments?.some((segment) => segment.x !== undefined) === true;
+
+export const applyParagraphLineIndentation = (params: ParagraphLineIndentationParams): void => {
+  const {
+    lineEl,
+    line,
+    indent,
+    indentLeftPx,
+    hasListMarkerLayout,
+    lineIndex,
+    localStartLine,
+    continuesFromPrev,
+    suppressFirstLineIndent,
+    resetContinuationTextIndent,
+  } = params;
+  const paraIndentLeft = indent?.left ?? 0;
+  const paraIndentRight = indent?.right ?? 0;
+  const firstLineOffset = suppressFirstLineIndent ? 0 : (indent?.firstLine ?? 0) - (indent?.hanging ?? 0);
+  const isFirstLine = lineIndex === 0 && localStartLine === 0 && !continuesFromPrev;
+  const explicitSegmentPositioning = hasExplicitSegmentPositioning(line);
+
+  if (hasListMarkerLayout && indentLeftPx) {
+    if (!explicitSegmentPositioning) {
+      lineEl.style.paddingLeft = `${indentLeftPx}px`;
+    }
+  } else if (explicitSegmentPositioning) {
+    if (isFirstLine && firstLineOffset !== 0) {
+      const effectiveLeftIndent = paraIndentLeft < 0 ? 0 : paraIndentLeft;
+      const adjustedPadding = effectiveLeftIndent + firstLineOffset;
+      if (adjustedPadding > 0) {
+        lineEl.style.paddingLeft = `${adjustedPadding}px`;
+      }
+    }
+  } else if (paraIndentLeft && paraIndentLeft > 0) {
+    lineEl.style.paddingLeft = `${paraIndentLeft}px`;
+  } else if (!isFirstLine && indent?.hanging && indent.hanging > 0 && (paraIndentLeft == null || paraIndentLeft >= 0)) {
+    lineEl.style.paddingLeft = `${indent.hanging}px`;
+  }
+
+  if (paraIndentRight && paraIndentRight > 0) {
+    lineEl.style.paddingRight = `${paraIndentRight}px`;
+  }
+  if (isFirstLine && firstLineOffset && !explicitSegmentPositioning) {
+    lineEl.style.textIndent = `${firstLineOffset}px`;
+  } else if (firstLineOffset && explicitSegmentPositioning) {
+    lineEl.style.textIndent = '0px';
+  } else if (firstLineOffset && !hasListMarkerLayout && resetContinuationTextIndent) {
+    lineEl.style.textIndent = '0px';
+  }
+};
+
+export const resolveAvailableWidthForLine = (params: {
+  containerWidth: number;
+  line: Line;
+  indentLeftPx: number;
+  indentRightPx: number;
+  firstLineOffset: number;
+  isFirstLine: boolean;
+  isListFirstLine: boolean;
+  resolvedListTextStartPx?: number;
+}): number => {
+  const {
+    containerWidth,
+    line,
+    indentLeftPx,
+    indentRightPx,
+    firstLineOffset,
+    isFirstLine,
+    isListFirstLine,
+    resolvedListTextStartPx,
+  } = params;
+  const positiveIndentReduction = Math.max(0, indentLeftPx) + Math.max(0, indentRightPx);
+  const fallbackAvailableWidth = Math.max(0, containerWidth - positiveIndentReduction);
+  let availableWidth = line.maxWidth != null ? Math.min(line.maxWidth, fallbackAvailableWidth) : fallbackAvailableWidth;
+
+  if (resolvedListTextStartPx != null) {
+    availableWidth = containerWidth - resolvedListTextStartPx - Math.max(0, indentRightPx);
+  }
+
+  if (isFirstLine && !isListFirstLine && line.hasExplicitTabStops !== true) {
+    availableWidth = adjustAvailableWidthForTextIndent(availableWidth, firstLineOffset, line.maxWidth);
+  }
+
+  return availableWidth;
+};
diff --git a/packages/layout-engine/painters/dom/src/paragraph/list-marker.ts b/packages/layout-engine/painters/dom/src/paragraph/list-marker.ts
new file mode 100644
index 0000000000..2746a8b24c
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/paragraph/list-marker.ts
@@ -0,0 +1,299 @@
+import { DOM_CLASS_NAMES } from '@superdoc/dom-contract';
+import { toCssFontFamily } from '@superdoc/font-utils';
+import type { ParagraphMeasure, ResolvedListMarkerItem, SourceAnchor } from '@superdoc/contracts';
+import {
+  computeTabWidth,
+  resolveListMarkerGeometry,
+  resolveListTextStartPx,
+  type MinimalMarker,
+  type MinimalWordLayout,
+  type ResolvedListMarkerGeometry,
+} from '@superdoc/common/list-marker-utils';
+import { applySourceAnchorDataset } from '../renderer.js';
+
+type PainterListTextStartParams = {
+  wordLayout: MinimalWordLayout | undefined;
+  indentLeftPx: number;
+  hangingIndentPx: number;
+  firstLineIndentPx: number;
+  markerTextWidthPx?: number;
+};
+
+const getFiniteNonNegativeNumber = (value: unknown): number | undefined => {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value < 0) {
+    return undefined;
+  }
+  return value;
+};
+
+const resolvePainterMarkerTextWidth = (
+  markerTextWidthPx: number | undefined,
+  marker: { glyphWidthPx?: number; markerBoxWidthPx?: number },
+): number =>
+  getFiniteNonNegativeNumber(markerTextWidthPx) ??
+  getFiniteNonNegativeNumber(marker.glyphWidthPx) ??
+  getFiniteNonNegativeNumber(marker.markerBoxWidthPx) ??
+  0;
+
+export const resolvePainterListMarkerGeometry = ({
+  wordLayout,
+  indentLeftPx,
+  hangingIndentPx,
+  firstLineIndentPx,
+  markerTextWidthPx,
+}: PainterListTextStartParams): ResolvedListMarkerGeometry | undefined =>
+  resolveListMarkerGeometry(
+    wordLayout,
+    indentLeftPx,
+    firstLineIndentPx,
+    hangingIndentPx,
+    (_markerText: string, marker: MinimalMarker) => resolvePainterMarkerTextWidth(markerTextWidthPx, marker),
+  );
+
+export const resolvePainterListTextStartPx = ({
+  wordLayout,
+  indentLeftPx,
+  hangingIndentPx,
+  firstLineIndentPx,
+  markerTextWidthPx,
+}: PainterListTextStartParams): number | undefined =>
+  resolveListTextStartPx(
+    wordLayout,
+    indentLeftPx,
+    firstLineIndentPx,
+    hangingIndentPx,
+    (_markerText: string, marker: MinimalMarker) => resolvePainterMarkerTextWidth(markerTextWidthPx, marker),
+  );
+
+type MarkerRunStyle = {
+  fontFamily?: string | null;
+  fontSize?: number | null;
+  bold?: boolean | null;
+  italic?: boolean | null;
+  color?: string | null;
+  letterSpacing?: number | null;
+};
+
+export const createListMarkerElement = (
+  doc: Document,
+  markerText: string,
+  run: MarkerRunStyle,
+  sourceAnchor?: SourceAnchor,
+): HTMLElement => {
+  const markerContainer = doc.createElement('span');
+  markerContainer.classList.add(DOM_CLASS_NAMES.LIST_MARKER);
+  markerContainer.style.display = 'inline-block';
+  markerContainer.style.wordSpacing = '0px';
+
+  const markerEl = doc.createElement('span');
+  markerEl.classList.add('superdoc-paragraph-marker');
+  markerEl.textContent = markerText;
+  markerEl.style.pointerEvents = 'none';
+  markerEl.style.fontFamily = toCssFontFamily(run.fontFamily) ?? run.fontFamily ?? '';
+
+  if (run.fontSize != null) {
+    markerEl.style.fontSize = `${run.fontSize}px`;
+  }
+  markerEl.style.fontWeight = run.bold ? 'bold' : '';
+  markerEl.style.fontStyle = run.italic ? 'italic' : '';
+
+  if (run.color) {
+    markerEl.style.color = run.color;
+  }
+  if (run.letterSpacing != null) {
+    markerEl.style.letterSpacing = `${run.letterSpacing}px`;
+  }
+
+  markerContainer.appendChild(markerEl);
+  if (sourceAnchor) {
+    applySourceAnchorDataset(markerEl, sourceAnchor);
+  }
+  return markerContainer;
+};
+
+export const renderLegacyListMarker = (params: {
+  doc: Document;
+  lineEl: HTMLElement;
+  wordLayout?: MinimalWordLayout;
+  markerLayout: MinimalMarker;
+  markerMeasure: ParagraphMeasure['marker'];
+  markerTextWidthPx?: number;
+  indentLeftPx: number;
+  hangingIndentPx: number;
+  firstLineIndentPx: number;
+  isRtl?: boolean;
+  sourceAnchor?: SourceAnchor;
+}): void => {
+  const {
+    doc,
+    lineEl,
+    wordLayout,
+    markerLayout,
+    markerMeasure,
+    markerTextWidthPx,
+    indentLeftPx,
+    hangingIndentPx,
+    firstLineIndentPx,
+    isRtl,
+    sourceAnchor,
+  } = params;
+  const markerTextWidth = markerTextWidthPx ?? markerMeasure?.markerTextWidth ?? 0;
+  const shouldUseSharedInlinePrefixGeometry =
+    markerLayout?.justification === 'left' &&
+    wordLayout?.firstLineIndentMode !== true &&
+    typeof markerTextWidth === 'number' &&
+    Number.isFinite(markerTextWidth) &&
+    markerTextWidth >= 0;
+  const markerGeometry = shouldUseSharedInlinePrefixGeometry
+    ? resolvePainterListMarkerGeometry({
+        wordLayout,
+        indentLeftPx,
+        hangingIndentPx,
+        firstLineIndentPx,
+        markerTextWidthPx: markerTextWidth,
+      })
+    : undefined;
+
+  const anchorPoint = indentLeftPx - hangingIndentPx + firstLineIndentPx;
+  const markerJustification = markerLayout?.justification ?? 'left';
+  let markerStartPos: number;
+  let currentPos: number;
+  if (markerJustification === 'left') {
+    markerStartPos = anchorPoint;
+    currentPos = markerStartPos + markerTextWidth;
+  } else if (markerJustification === 'right') {
+    markerStartPos = anchorPoint - markerTextWidth;
+    currentPos = anchorPoint;
+  } else {
+    markerStartPos = anchorPoint - markerTextWidth / 2;
+    currentPos = markerStartPos + markerTextWidth;
+  }
+
+  const suffix = markerLayout?.suffix ?? 'tab';
+  let suffixWidthPx = 0;
+  if (markerGeometry && (suffix === 'tab' || suffix === 'space')) {
+    suffixWidthPx = markerGeometry.suffixWidthPx;
+  } else if (suffix === 'tab') {
+    suffixWidthPx = computeTabWidth(
+      currentPos,
+      markerJustification,
+      wordLayout?.tabsPx,
+      hangingIndentPx,
+      firstLineIndentPx,
+      indentLeftPx,
+    );
+  } else if (suffix === 'space') {
+    suffixWidthPx = 4;
+  }
+
+  if (isRtl) {
+    lineEl.style.paddingRight = `${anchorPoint}px`;
+  } else {
+    lineEl.style.paddingLeft = `${anchorPoint}px`;
+  }
+
+  if (markerLayout?.run?.vanish) {
+    return;
+  }
+
+  const markerContainer = createListMarkerElement(
+    doc,
+    markerLayout?.markerText ?? '',
+    markerLayout?.run ?? {},
+    sourceAnchor,
+  );
+  markerContainer.style.position = 'relative';
+  if (markerJustification === 'right') {
+    markerContainer.style.position = 'absolute';
+    if (isRtl) {
+      markerContainer.style.right = `${markerStartPos}px`;
+    } else {
+      markerContainer.style.left = `${markerStartPos}px`;
+    }
+  } else if (markerJustification === 'center') {
+    markerContainer.style.position = 'absolute';
+    if (isRtl) {
+      markerContainer.style.right = `${markerStartPos - markerTextWidth / 2}px`;
+      lineEl.style.paddingRight = `${parseFloat(lineEl.style.paddingRight || '0') + markerTextWidth / 2}px`;
+    } else {
+      markerContainer.style.left = `${markerStartPos - markerTextWidth / 2}px`;
+      lineEl.style.paddingLeft = `${parseFloat(lineEl.style.paddingLeft || '0') + markerTextWidth / 2}px`;
+    }
+  }
+
+  prependMarkerSuffix(doc, lineEl, suffix, suffixWidthPx, markerLayout?.run?.fontSize);
+  lineEl.prepend(markerContainer);
+};
+
+export const renderResolvedListMarker = (params: {
+  doc: Document;
+  lineEl: HTMLElement;
+  marker: ResolvedListMarkerItem;
+  isRtl?: boolean;
+  sourceAnchor?: SourceAnchor;
+}): void => {
+  const { doc, lineEl, marker, isRtl, sourceAnchor } = params;
+  if (isRtl) {
+    lineEl.style.paddingRight = `${marker.firstLinePaddingLeftPx}px`;
+  } else {
+    lineEl.style.paddingLeft = `${marker.firstLinePaddingLeftPx}px`;
+  }
+
+  if (marker.vanish) {
+    return;
+  }
+
+  const markerContainer = createListMarkerElement(doc, marker.text, marker.run, marker.sourceAnchor ?? sourceAnchor);
+  markerContainer.style.position = 'relative';
+  if (marker.justification === 'right') {
+    markerContainer.style.position = 'absolute';
+    if (isRtl) {
+      markerContainer.style.right = `${marker.markerStartPx}px`;
+    } else {
+      markerContainer.style.left = `${marker.markerStartPx}px`;
+    }
+  } else if (marker.justification === 'center') {
+    markerContainer.style.position = 'absolute';
+    const paddingAdjust = marker.centerPaddingAdjustPx ?? 0;
+    if (isRtl) {
+      markerContainer.style.right = `${marker.markerStartPx - paddingAdjust}px`;
+      lineEl.style.paddingRight = `${parseFloat(lineEl.style.paddingRight || '0') + paddingAdjust}px`;
+    } else {
+      markerContainer.style.left = `${marker.markerStartPx - paddingAdjust}px`;
+      lineEl.style.paddingLeft = `${parseFloat(lineEl.style.paddingLeft || '0') + paddingAdjust}px`;
+    }
+  }
+
+  prependMarkerSuffix(doc, lineEl, marker.suffix, marker.suffixWidthPx, marker.run.fontSize);
+  lineEl.prepend(markerContainer);
+};
+
+const prependMarkerSuffix = (
+  doc: Document,
+  lineEl: HTMLElement,
+  suffix: 'tab' | 'space' | 'nothing' | undefined,
+  suffixWidthPx: number,
+  fontSize?: number,
+): void => {
+  if (suffix === 'tab') {
+    const tabEl = doc.createElement('span');
+    tabEl.classList.add('superdoc-tab', 'superdoc-marker-suffix-tab');
+    tabEl.innerHTML = '&nbsp;';
+    tabEl.style.display = 'inline-block';
+    if (fontSize != null) {
+      tabEl.style.fontSize = `${fontSize}px`;
+    }
+    tabEl.style.wordSpacing = '0px';
+    tabEl.style.width = `${suffixWidthPx}px`;
+    lineEl.prepend(tabEl);
+  } else if (suffix === 'space') {
+    const spaceEl = doc.createElement('span');
+    spaceEl.classList.add('superdoc-marker-suffix-space');
+    if (fontSize != null) {
+      spaceEl.style.fontSize = `${fontSize}px`;
+    }
+    spaceEl.style.wordSpacing = '0px';
+    spaceEl.textContent = '\u00A0';
+    lineEl.prepend(spaceEl);
+  }
+};
diff --git a/packages/layout-engine/painters/dom/src/paragraph/renderParagraphContent.test.ts b/packages/layout-engine/painters/dom/src/paragraph/renderParagraphContent.test.ts
new file mode 100644
index 0000000000..f13f33f338
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/paragraph/renderParagraphContent.test.ts
@@ -0,0 +1,252 @@
+import { describe, expect, it } from 'vitest';
+import { renderParagraphContent } from './renderParagraphContent.js';
+import type { Line, ParagraphBlock, ParagraphMeasure, ResolvedParagraphContent } from '@superdoc/contracts';
+
+describe('renderParagraphContent', () => {
+  const line = (index: number): Line => ({
+    fromRun: 0,
+    fromChar: index,
+    toRun: 0,
+    toChar: index + 1,
+    width: 10,
+    ascent: 12,
+    descent: 4,
+    lineHeight: 20,
+  });
+
+  it('keeps partial body fragments at their rendered line height', () => {
+    const doc = document.implementation.createHTMLDocument('paragraph-content');
+    const frameEl = doc.createElement('div');
+    const block: ParagraphBlock = {
+      kind: 'paragraph',
+      id: 'split-paragraph',
+      runs: [{ text: 'abc', fontFamily: 'Arial', fontSize: 16 }],
+    };
+    const measure: ParagraphMeasure = {
+      kind: 'paragraph',
+      lines: [line(0), line(1), line(2)],
+      totalHeight: 60,
+    };
+
+    const result = renderParagraphContent({
+      doc,
+      frameEl,
+      block,
+      measure,
+      containerKind: 'body-fragment',
+      width: 200,
+      localStartLine: 0,
+      localEndLine: 1,
+      lineIndexOffset: 0,
+      linesOverride: measure.lines.slice(0, 1),
+      contextSection: 'body',
+      continuesOnNext: true,
+      applySdtDataset: () => {},
+      renderLine: () => doc.createElement('div'),
+    });
+
+    expect(result.renderedHeight).toBe(20);
+    expect(result.totalHeight).toBe(20);
+    expect(frameEl.style.height).toBe('20px');
+  });
+
+  it('marks the final remeasured override line as the paragraph final line', () => {
+    const doc = document.implementation.createHTMLDocument('paragraph-content');
+    const frameEl = doc.createElement('div');
+    const block: ParagraphBlock = {
+      kind: 'paragraph',
+      id: 'remeasured-paragraph',
+      runs: [{ text: 'abc', fontFamily: 'Arial', fontSize: 16 }],
+    };
+    const measure: ParagraphMeasure = {
+      kind: 'paragraph',
+      lines: [line(0)],
+      totalHeight: 20,
+    };
+    const renderedLines: Array<{ lineIndex: number; isLastLine: boolean; skipJustify?: boolean }> = [];
+
+    renderParagraphContent({
+      doc,
+      frameEl,
+      block,
+      measure,
+      containerKind: 'body-fragment',
+      width: 200,
+      localStartLine: 0,
+      localEndLine: 2,
+      lineIndexOffset: 0,
+      linesOverride: [line(0), line(1)],
+      contextSection: 'body',
+      applySdtDataset: () => {},
+      renderLine: ({ lineIndex, isLastLine, skipJustify }) => {
+        renderedLines.push({ lineIndex, isLastLine, skipJustify });
+        return doc.createElement('div');
+      },
+    });
+
+    expect(renderedLines).toEqual([
+      { lineIndex: 0, isLastLine: false, skipJustify: false },
+      { lineIndex: 1, isLastLine: true, skipJustify: true },
+    ]);
+  });
+
+  it('preserves paragraph right indent on list marker lines', () => {
+    const doc = document.implementation.createHTMLDocument('paragraph-content');
+    const frameEl = doc.createElement('div');
+    const block: ParagraphBlock = {
+      kind: 'paragraph',
+      id: 'list-paragraph',
+      attrs: {
+        indent: { left: 24, hanging: 12, right: 18 },
+        wordLayout: {
+          marker: {
+            markerText: '1.',
+            suffix: 'space',
+            run: { fontFamily: 'Arial', fontSize: 16 },
+          },
+        },
+      },
+      runs: [{ text: 'abc', fontFamily: 'Arial', fontSize: 16 }],
+    };
+    const measure: ParagraphMeasure = {
+      kind: 'paragraph',
+      lines: [line(0)],
+      marker: {
+        markerWidth: 10,
+        markerTextWidth: 8,
+      },
+      totalHeight: 20,
+    };
+    let lineEl: HTMLElement | undefined;
+
+    renderParagraphContent({
+      doc,
+      frameEl,
+      block,
+      measure,
+      containerKind: 'body-fragment',
+      width: 200,
+      localStartLine: 0,
+      localEndLine: 1,
+      contextSection: 'body',
+      markerWidth: 10,
+      markerTextWidth: 8,
+      applySdtDataset: () => {},
+      renderLine: () => {
+        lineEl = doc.createElement('div');
+        return lineEl;
+      },
+    });
+
+    expect(lineEl?.style.cssText).toContain('padding-right: 18px');
+  });
+
+  it('renders resolved RTL list markers on the right side', () => {
+    const doc = document.implementation.createHTMLDocument('paragraph-content');
+    const frameEl = doc.createElement('div');
+    const block: ParagraphBlock = {
+      kind: 'paragraph',
+      id: 'resolved-list-paragraph',
+      attrs: { direction: 'rtl' },
+      runs: [{ text: 'abc', fontFamily: 'Arial', fontSize: 16 }],
+    };
+    const resolvedContent: ResolvedParagraphContent = {
+      lines: [
+        {
+          line: line(0),
+          lineIndex: 0,
+          availableWidth: 160,
+          skipJustify: true,
+          paddingLeftPx: 0,
+          paddingRightPx: 0,
+          textIndentPx: 0,
+          isListFirstLine: true,
+          hasExplicitSegmentPositioning: false,
+          indentOffset: 30,
+        },
+      ],
+      marker: {
+        text: '1.',
+        justification: 'right',
+        suffix: 'space',
+        markerStartPx: 6,
+        suffixWidthPx: 4,
+        firstLinePaddingLeftPx: 30,
+        run: { fontFamily: 'Arial', fontSize: 16 },
+      },
+    };
+
+    renderParagraphContent({
+      doc,
+      frameEl,
+      block,
+      measure: { kind: 'paragraph', lines: [line(0)], totalHeight: 20 },
+      containerKind: 'body-fragment',
+      width: 200,
+      localStartLine: 0,
+      localEndLine: 1,
+      contextSection: 'body',
+      resolvedContent,
+      applySdtDataset: () => {},
+      renderLine: () => doc.createElement('div'),
+    });
+
+    const lineEl = frameEl.lastElementChild as HTMLElement;
+    const markerEl = lineEl.querySelector<HTMLElement>('.superdoc-list-marker');
+    expect(lineEl.style.paddingRight).toBe('30px');
+    expect(markerEl?.style.right).toBe('6px');
+  });
+
+  it('converts the final paragraph mark for resolved content', () => {
+    const doc = document.implementation.createHTMLDocument('paragraph-content');
+    const frameEl = doc.createElement('div');
+    const block: ParagraphBlock = {
+      kind: 'paragraph',
+      id: 'resolved-cell-paragraph',
+      runs: [{ text: 'abc', fontFamily: 'Arial', fontSize: 16 }],
+    };
+    const resolvedContent: ResolvedParagraphContent = {
+      lines: [
+        {
+          line: line(0),
+          lineIndex: 0,
+          availableWidth: 160,
+          skipJustify: true,
+          paddingLeftPx: 0,
+          paddingRightPx: 0,
+          textIndentPx: 0,
+          isListFirstLine: false,
+          hasExplicitSegmentPositioning: false,
+          indentOffset: 0,
+        },
+      ],
+    };
+
+    renderParagraphContent({
+      doc,
+      frameEl,
+      block,
+      measure: { kind: 'paragraph', lines: [line(0)], totalHeight: 20 },
+      containerKind: 'table-cell',
+      width: 200,
+      localStartLine: 0,
+      localEndLine: 1,
+      contextSection: 'body',
+      resolvedContent,
+      convertFinalParagraphMark: true,
+      applySdtDataset: () => {},
+      renderLine: () => {
+        const lineEl = doc.createElement('div');
+        const mark = doc.createElement('span');
+        mark.classList.add('superdoc-formatting-paragraph-mark');
+        mark.textContent = '¶';
+        lineEl.appendChild(mark);
+        return lineEl;
+      },
+    });
+
+    const mark = frameEl.querySelector<HTMLElement>('.superdoc-formatting-paragraph-mark');
+    expect(mark?.classList.contains('superdoc-formatting-cell-mark')).toBe(true);
+    expect(mark?.textContent).toBe('¤');
+  });
+});
diff --git a/packages/layout-engine/painters/dom/src/paragraph/renderParagraphContent.ts b/packages/layout-engine/painters/dom/src/paragraph/renderParagraphContent.ts
new file mode 100644
index 0000000000..fe032d0001
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/paragraph/renderParagraphContent.ts
@@ -0,0 +1,522 @@
+import type {
+  DropCapDescriptor,
+  Line,
+  ParagraphBlock,
+  ParagraphMeasure,
+  ResolvedParagraphContent,
+  Run,
+  SdtMetadata,
+  SourceAnchor,
+} from '@superdoc/contracts';
+import {
+  effectiveTableCellSpacing,
+  expandRunsForInlineNewlines,
+  getParagraphInlineDirection,
+} from '@superdoc/contracts';
+import { resolveMarkerIndent, type MinimalWordLayout } from '@superdoc/common/list-marker-utils';
+import { applySdtContainerStyling, type SdtBoundaryOptions } from '../utils/sdt-helpers.js';
+import { createParagraphDecorationLayers, stampBetweenBorderDataset, type BetweenBorderInfo } from './borders/index.js';
+import {
+  applyParagraphLineIndentation,
+  hasExplicitSegmentPositioning,
+  resolveAvailableWidthForLine,
+} from './indentation.js';
+import { renderLegacyListMarker, renderResolvedListMarker, resolvePainterListTextStartPx } from './list-marker.js';
+import { applyParagraphBlockStyles, clearParagraphFrameIndentStyles } from './styles.js';
+
+export type RenderedParagraphLineInfo = {
+  el: HTMLElement;
+  top: number;
+  height: number;
+};
+
+export type ParagraphRenderLineInput = {
+  block: ParagraphBlock;
+  line: Line;
+  lineIndex: number;
+  isLastLine: boolean;
+  availableWidth?: number;
+  skipJustify?: boolean;
+  preExpandedRuns?: Run[];
+  resolvedListTextStartPx?: number;
+  indentOffsetOverride?: number;
+  paragraphMarkLeftOffsetOverride?: number;
+};
+
+export type ParagraphRenderLine = (input: ParagraphRenderLineInput) => HTMLElement;
+
+export type ParagraphRenderDropCap = (
+  descriptor: DropCapDescriptor,
+  measure?: { width: number; height: number; lines: number; mode: 'drop' | 'margin' },
+) => HTMLElement;
+
+export type ParagraphContainerKind = 'body-fragment' | 'table-cell';
+
+type ParagraphSpacingPolicy = {
+  isFirstBlock: boolean;
+  isLastBlock: boolean;
+  paddingTop: number;
+};
+
+export type RenderParagraphContentParams = {
+  doc: Document;
+  frameEl: HTMLElement;
+  block: ParagraphBlock;
+  measure: ParagraphMeasure;
+  containerKind: ParagraphContainerKind;
+  width: number;
+  localStartLine: number;
+  localEndLine: number;
+  linesOverride?: Line[];
+  lineIndexOffset?: number;
+  continuesFromPrev?: boolean;
+  continuesOnNext?: boolean;
+  markerWidth?: number;
+  markerTextWidth?: number;
+  wordLayout?: MinimalWordLayout;
+  resolvedContent?: ResolvedParagraphContent;
+  betweenInfo?: BetweenBorderInfo;
+  sdtBoundary?: SdtBoundaryOptions;
+  spacingPolicy?: ParagraphSpacingPolicy;
+  shouldApplySdtContainerStyling?: (sdt?: SdtMetadata | null, containerSdt?: SdtMetadata | null) => boolean;
+  applySdtDataset: (el: HTMLElement | null, metadata?: SdtMetadata | null) => void;
+  applyContainerSdtDataset?: (el: HTMLElement | null, metadata?: SdtMetadata | null) => void;
+  renderLine: ParagraphRenderLine;
+  renderDropCap?: ParagraphRenderDropCap;
+  captureLineSnapshot?: (
+    lineEl: HTMLElement,
+    options?: { inTableParagraph?: boolean; wrapperEl?: HTMLElement; sourceAnchor?: SourceAnchor },
+  ) => void;
+  convertFinalParagraphMark?: boolean;
+  lineTopOffset?: number;
+  sourceAnchor?: SourceAnchor;
+};
+
+export type RenderParagraphContentResult = {
+  renderedHeight: number;
+  totalHeight: number;
+  renderedLines: RenderedParagraphLineInfo[];
+};
+
+export const renderParagraphContent = (params: RenderParagraphContentParams): RenderParagraphContentResult => {
+  const {
+    doc,
+    frameEl,
+    block,
+    measure,
+    linesOverride,
+    width,
+    localStartLine,
+    localEndLine,
+    lineIndexOffset = 0,
+    continuesFromPrev,
+    continuesOnNext,
+    resolvedContent,
+    betweenInfo,
+    sdtBoundary,
+    spacingPolicy,
+    shouldApplySdtContainerStyling,
+    applySdtDataset,
+    applyContainerSdtDataset,
+    renderDropCap,
+    lineTopOffset = 0,
+  } = params;
+
+  applyParagraphBlockStyles(frameEl, block.attrs);
+  const { shadingLayer, borderLayer } = createParagraphDecorationLayers(doc, width, block.attrs, betweenInfo);
+  if (shadingLayer) frameEl.appendChild(shadingLayer);
+  if (borderLayer) frameEl.appendChild(borderLayer);
+  stampBetweenBorderDataset(frameEl, betweenInfo);
+
+  if (block.attrs?.styleId) {
+    frameEl.dataset.styleId = block.attrs.styleId;
+    frameEl.setAttribute('styleid', block.attrs.styleId);
+  }
+  applySdtDataset(frameEl, block.attrs?.sdt);
+  applyContainerSdtDataset?.(frameEl, block.attrs?.containerSdt);
+
+  const applySdtChrome = shouldApplySdtContainerStyling?.(block.attrs?.sdt, block.attrs?.containerSdt) ?? true;
+  if (applySdtChrome) {
+    applySdtContainerStyling(doc, frameEl, block.attrs?.sdt, block.attrs?.containerSdt, sdtBoundary);
+  }
+
+  renderParagraphDropCap({
+    frameEl,
+    block,
+    measure,
+    resolvedContent,
+    continuesFromPrev,
+    renderDropCap,
+  });
+
+  clearParagraphFrameIndentStyles(frameEl);
+
+  const spacingBefore = block.attrs?.spacing?.before;
+  let beforeHeight = 0;
+  if (spacingPolicy && localStartLine === 0) {
+    beforeHeight = effectiveTableCellSpacing(spacingBefore, spacingPolicy.isFirstBlock, spacingPolicy.paddingTop);
+    if (beforeHeight > 0) {
+      frameEl.style.marginTop = `${beforeHeight}px`;
+    }
+  }
+
+  const renderResult =
+    resolvedContent != null
+      ? renderResolvedLines({
+          ...params,
+          resolvedContent,
+          lineTopOffset: lineTopOffset + beforeHeight,
+        })
+      : renderMeasuredLines({
+          ...params,
+          lineTopOffset: lineTopOffset + beforeHeight,
+        });
+
+  let renderedHeight = renderResult.renderedHeight;
+  const originalLineCount = measure.lines?.length ?? linesOverride?.length ?? 0;
+  const renderedStartLine = lineIndexOffset + localStartLine;
+  const renderedEndLine = lineIndexOffset + localEndLine;
+  const renderedEntireBlock =
+    !continuesFromPrev && !continuesOnNext && renderedStartLine === 0 && renderedEndLine >= originalLineCount;
+  if (renderedEntireBlock && measure.totalHeight && measure.totalHeight > renderedHeight) {
+    renderedHeight = measure.totalHeight;
+  }
+
+  let afterHeight = 0;
+  if (spacingPolicy && renderedEntireBlock && !spacingPolicy.isLastBlock) {
+    const spacingAfter = block.attrs?.spacing?.after;
+    if (typeof spacingAfter === 'number' && spacingAfter > 0) {
+      frameEl.style.marginBottom = `${spacingAfter}px`;
+      afterHeight = spacingAfter;
+    }
+  }
+
+  if (renderedHeight > 0) {
+    frameEl.style.height = `${renderedHeight}px`;
+  }
+
+  return {
+    renderedHeight,
+    totalHeight: beforeHeight + renderedHeight + afterHeight,
+    renderedLines: renderResult.renderedLines,
+  };
+};
+
+const renderResolvedLines = (
+  params: RenderParagraphContentParams & { resolvedContent: ResolvedParagraphContent },
+): { renderedHeight: number; renderedLines: RenderedParagraphLineInfo[] } => {
+  const {
+    frameEl,
+    block,
+    resolvedContent: content,
+    markerTextWidth,
+    renderLine,
+    captureLineSnapshot,
+    convertFinalParagraphMark,
+    lineTopOffset = 0,
+    sourceAnchor,
+  } = params;
+  const renderedLines: RenderedParagraphLineInfo[] = [];
+  const resolvedMarker = content.marker;
+  const expandedRunsForBlock = expandRunsForInlineNewlines(block.runs);
+  const isRtl = getParagraphInlineDirection(block.attrs) === 'rtl';
+  let renderedHeight = 0;
+
+  content.lines.forEach((resolvedLine, index) => {
+    const paragraphMarkLeftOffset = resolveResolvedListParagraphMarkOffset(
+      resolvedLine.isListFirstLine ? resolvedMarker : undefined,
+      markerTextWidth,
+      resolvedLine.indentOffset,
+    );
+    const lineEl = renderLine({
+      block,
+      line: resolvedLine.line,
+      lineIndex: resolvedLine.lineIndex,
+      isLastLine: index === content.lines.length - 1 && !content.continuesOnNext,
+      availableWidth: resolvedLine.availableWidth,
+      skipJustify: resolvedLine.skipJustify,
+      preExpandedRuns: expandedRunsForBlock,
+      resolvedListTextStartPx: resolvedLine.resolvedListTextStartPx,
+      indentOffsetOverride: resolvedLine.indentOffset,
+      paragraphMarkLeftOffsetOverride: paragraphMarkLeftOffset,
+    });
+
+    if (!resolvedLine.isListFirstLine) {
+      applyResolvedLineIndentation(lineEl, block, content, resolvedLine);
+    }
+    if (resolvedLine.paddingRightPx > 0) {
+      lineEl.style.paddingRight = `${resolvedLine.paddingRightPx}px`;
+    }
+    if (resolvedLine.isListFirstLine && resolvedMarker) {
+      renderResolvedListMarker({ doc: params.doc, lineEl, marker: resolvedMarker, isRtl, sourceAnchor });
+    }
+    if (convertFinalParagraphMark && index === content.lines.length - 1 && !content.continuesOnNext) {
+      convertParagraphMarkToCellMark(lineEl);
+    }
+    captureLineSnapshot?.(lineEl, {
+      inTableParagraph: params.containerKind === 'table-cell',
+      wrapperEl: frameEl,
+      sourceAnchor,
+    });
+    frameEl.appendChild(lineEl);
+    const height = resolvedLine.line.lineHeight;
+    renderedLines.push({ el: lineEl, top: lineTopOffset + renderedHeight, height });
+    renderedHeight += height;
+  });
+
+  return { renderedHeight, renderedLines };
+};
+
+const renderMeasuredLines = (
+  params: RenderParagraphContentParams,
+): { renderedHeight: number; renderedLines: RenderedParagraphLineInfo[] } => {
+  const {
+    doc,
+    frameEl,
+    block,
+    measure,
+    containerKind,
+    width,
+    localStartLine,
+    localEndLine,
+    linesOverride,
+    lineIndexOffset = 0,
+    continuesFromPrev,
+    continuesOnNext,
+    markerWidth,
+    markerTextWidth,
+    wordLayout,
+    renderLine,
+    captureLineSnapshot,
+    convertFinalParagraphMark,
+    lineTopOffset = 0,
+    sourceAnchor,
+  } = params;
+  const lines = linesOverride ?? measure.lines ?? [];
+  const paraIndent = block.attrs?.indent;
+  const paraIndentLeft = paraIndent?.left ?? 0;
+  const paraIndentRight = paraIndent?.right ?? 0;
+  const isRtl = getParagraphInlineDirection(block.attrs) === 'rtl';
+  const {
+    anchorIndentPx: paraMarkerAnchorIndent,
+    firstLinePx: markerFirstLine,
+    hangingPx: markerHanging,
+  } = resolveMarkerIndent(paraIndent, isRtl);
+  const tableMarkerIndentLeft =
+    measure.marker?.indentLeft ??
+    wordLayout?.indentLeftPx ??
+    (typeof paraIndent?.left === 'number' ? paraIndent.left : 0);
+  const suppressFirstLineIndent = block.attrs?.suppressFirstLineIndent === true;
+  const firstLineOffset = suppressFirstLineIndent ? 0 : (paraIndent?.firstLine ?? 0) - (paraIndent?.hanging ?? 0);
+  const expandedRunsForBlock = containerKind === 'body-fragment' ? expandRunsForInlineNewlines(block.runs) : undefined;
+  const lastRun = block.runs.length > 0 ? block.runs[block.runs.length - 1] : null;
+  const paragraphEndsWithLineBreak = lastRun?.kind === 'lineBreak';
+  const markerLayout = wordLayout?.marker;
+  const markerMeasure = measure.marker;
+
+  const legacyMarkerWidth = markerWidth ?? markerMeasure?.markerWidth;
+  const legacyMarkerTextWidth = markerTextWidth ?? markerMeasure?.markerTextWidth;
+  const listFirstLineTextStartPx =
+    !continuesFromPrev && legacyMarkerWidth && markerLayout && markerMeasure
+      ? resolvePainterListTextStartPx({
+          wordLayout,
+          indentLeftPx: containerKind === 'table-cell' ? tableMarkerIndentLeft : paraMarkerAnchorIndent,
+          hangingIndentPx: markerHanging,
+          firstLineIndentPx: markerFirstLine,
+          markerTextWidthPx: legacyMarkerTextWidth,
+        })
+      : undefined;
+
+  let renderedHeight = 0;
+  const renderedLines: RenderedParagraphLineInfo[] = [];
+  const renderedLocalEndLine = Math.min(localEndLine, lines.length);
+
+  for (let lineIdx = localStartLine; lineIdx < localEndLine && lineIdx < lines.length; lineIdx++) {
+    const line = lines[lineIdx];
+    const explicitSegmentPositioning = hasExplicitSegmentPositioning(line);
+    const isFirstLine = lineIdx === 0 && !continuesFromPrev;
+    const isListFirstLine = Boolean(lineIdx === 0 && !continuesFromPrev && legacyMarkerWidth && markerLayout);
+    const shouldUseResolvedListTextStart =
+      isListFirstLine && explicitSegmentPositioning && listFirstLineTextStartPx != null;
+    const globalLineIndex = lineIndexOffset + lineIdx;
+    const isLastLineOfParagraph =
+      (linesOverride
+        ? lineIdx === renderedLocalEndLine - 1
+        : globalLineIndex === (measure.lines?.length ?? lines.length) - 1) && !continuesOnNext;
+    const shouldSkipJustifyForLastLine = isLastLineOfParagraph && !paragraphEndsWithLineBreak;
+    const availableWidth =
+      containerKind === 'body-fragment'
+        ? resolveAvailableWidthForLine({
+            containerWidth: width,
+            line,
+            indentLeftPx: paraIndentLeft,
+            indentRightPx: paraIndentRight,
+            firstLineOffset,
+            isFirstLine,
+            isListFirstLine,
+            resolvedListTextStartPx: shouldUseResolvedListTextStart ? listFirstLineTextStartPx : undefined,
+          })
+        : undefined;
+    const lineEl = renderLine({
+      block,
+      line,
+      lineIndex: globalLineIndex,
+      isLastLine: isLastLineOfParagraph,
+      availableWidth,
+      skipJustify: shouldSkipJustifyForLastLine,
+      preExpandedRuns: expandedRunsForBlock,
+      resolvedListTextStartPx: shouldUseResolvedListTextStart ? listFirstLineTextStartPx : undefined,
+    });
+    lineEl.style.paddingLeft = '';
+    lineEl.style.paddingRight = '';
+    lineEl.style.textIndent = '';
+
+    if (convertFinalParagraphMark && isLastLineOfParagraph) {
+      convertParagraphMarkToCellMark(lineEl);
+    }
+
+    if (isListFirstLine && markerLayout && markerMeasure) {
+      if (paraIndentRight > 0) {
+        lineEl.style.paddingRight = `${paraIndentRight}px`;
+      }
+      renderLegacyListMarker({
+        doc,
+        lineEl,
+        wordLayout,
+        markerLayout,
+        markerMeasure,
+        markerTextWidthPx: legacyMarkerTextWidth,
+        indentLeftPx: containerKind === 'table-cell' ? tableMarkerIndentLeft : paraMarkerAnchorIndent,
+        hangingIndentPx: markerHanging,
+        firstLineIndentPx: markerFirstLine,
+        isRtl,
+        sourceAnchor,
+      });
+    } else {
+      applyParagraphLineIndentation({
+        lineEl,
+        line,
+        indent: paraIndent,
+        indentLeftPx: containerKind === 'table-cell' ? tableMarkerIndentLeft : paraMarkerAnchorIndent,
+        hasListMarkerLayout: Boolean(markerLayout),
+        lineIndex: lineIdx,
+        localStartLine,
+        continuesFromPrev,
+        suppressFirstLineIndent,
+        resetContinuationTextIndent: containerKind === 'body-fragment',
+      });
+    }
+
+    captureLineSnapshot?.(lineEl, {
+      inTableParagraph: containerKind === 'table-cell',
+      wrapperEl: frameEl,
+      sourceAnchor,
+    });
+    frameEl.appendChild(lineEl);
+    const height = line.lineHeight;
+    renderedLines.push({ el: lineEl, top: lineTopOffset + renderedHeight, height });
+    renderedHeight += height;
+  }
+
+  return { renderedHeight, renderedLines };
+};
+
+const renderParagraphDropCap = (params: {
+  frameEl: HTMLElement;
+  block: ParagraphBlock;
+  measure: ParagraphMeasure;
+  resolvedContent?: ResolvedParagraphContent;
+  continuesFromPrev?: boolean;
+  renderDropCap?: ParagraphRenderDropCap;
+}): void => {
+  const { frameEl, block, measure, resolvedContent, continuesFromPrev, renderDropCap } = params;
+  if (!renderDropCap) return;
+  if (resolvedContent?.dropCap) {
+    const dc = resolvedContent.dropCap;
+    const dropCapEl = renderDropCap(
+      {
+        mode: dc.mode,
+        run: {
+          text: dc.text,
+          fontFamily: dc.fontFamily,
+          fontSize: dc.fontSize,
+          bold: dc.bold,
+          italic: dc.italic,
+          color: dc.color,
+          position: dc.position,
+        },
+        lines: 0,
+      },
+      dc.width != null && dc.height != null
+        ? { width: dc.width, height: dc.height, lines: 0, mode: dc.mode }
+        : undefined,
+    );
+    frameEl.appendChild(dropCapEl);
+    return;
+  }
+  const dropCapDescriptor = block.attrs?.dropCapDescriptor;
+  const dropCapMeasure = measure.dropCap;
+  if (dropCapDescriptor && dropCapMeasure && !continuesFromPrev) {
+    frameEl.appendChild(renderDropCap(dropCapDescriptor, dropCapMeasure));
+  }
+};
+
+const applyResolvedLineIndentation = (
+  lineEl: HTMLElement,
+  block: ParagraphBlock,
+  content: ResolvedParagraphContent,
+  resolvedLine: ResolvedParagraphContent['lines'][number],
+): void => {
+  if (resolvedLine.paddingLeftPx > 0) {
+    lineEl.style.paddingLeft = `${resolvedLine.paddingLeftPx}px`;
+  }
+  if (resolvedLine.textIndentPx !== 0) {
+    lineEl.style.textIndent = `${resolvedLine.textIndentPx}px`;
+  } else if (resolvedLine.lineIndex > 0 || content.continuesFromPrev) {
+    const paraIndent = block.attrs?.indent;
+    const suppressFirstLineIndent = block.attrs?.suppressFirstLineIndent === true;
+    const firstLineOffset = suppressFirstLineIndent ? 0 : (paraIndent?.firstLine ?? 0) - (paraIndent?.hanging ?? 0);
+    if (firstLineOffset && !resolvedLine.isListFirstLine) {
+      lineEl.style.textIndent = '0px';
+    }
+  }
+};
+
+const resolveResolvedListParagraphMarkOffset = (
+  marker: ResolvedParagraphContent['marker'] | undefined,
+  markerTextWidth: number | undefined,
+  indentOffset: number,
+): number | undefined => {
+  if (!marker) return undefined;
+  if (typeof indentOffset === 'number' && Number.isFinite(indentOffset) && indentOffset > 0) {
+    return indentOffset;
+  }
+  if (marker.vanish) {
+    return indentOffset;
+  }
+
+  const paddingLeft = Number.isFinite(marker.firstLinePaddingLeftPx) ? marker.firstLinePaddingLeftPx : 0;
+  const suffixWidth = marker.suffix !== 'nothing' && Number.isFinite(marker.suffixWidthPx) ? marker.suffixWidthPx : 0;
+
+  if (marker.justification === 'left') {
+    const markerWidth =
+      typeof markerTextWidth === 'number' && Number.isFinite(markerTextWidth) && markerTextWidth > 0
+        ? markerTextWidth
+        : 0;
+    return paddingLeft + markerWidth + suffixWidth;
+  }
+
+  const centerPadding =
+    marker.justification === 'center' && Number.isFinite(marker.centerPaddingAdjustPx)
+      ? (marker.centerPaddingAdjustPx ?? 0)
+      : 0;
+  return paddingLeft + centerPadding + suffixWidth;
+};
+
+const convertParagraphMarkToCellMark = (lineEl: HTMLElement): void => {
+  const mark = lineEl.querySelector<HTMLElement>('.superdoc-formatting-paragraph-mark');
+  if (!mark) return;
+
+  mark.classList.add('superdoc-formatting-cell-mark');
+  mark.textContent = '¤';
+};
diff --git a/packages/layout-engine/painters/dom/src/paragraph/renderParagraphFragment.ts b/packages/layout-engine/painters/dom/src/paragraph/renderParagraphFragment.ts
new file mode 100644
index 0000000000..671bbdb2e3
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/paragraph/renderParagraphFragment.ts
@@ -0,0 +1,188 @@
+import type {
+  DropCapDescriptor,
+  ParaFragment,
+  ParagraphBlock,
+  ParagraphMeasure,
+  ResolvedFragmentItem,
+  SdtMetadata,
+} from '@superdoc/contracts';
+import { isMinimalWordLayout as isMinimalWordLayoutShared } from '@superdoc/common/list-marker-utils';
+import type { MinimalWordLayout } from '@superdoc/common/list-marker-utils';
+import { CLASS_NAMES, fragmentStyles } from '../styles.js';
+import type { SdtBoundaryOptions } from '../utils/sdt-helpers.js';
+import type { BetweenBorderInfo } from './borders/index.js';
+import { renderParagraphContent, type ParagraphRenderLineInput } from './renderParagraphContent.js';
+
+type ApplyStyles = (el: HTMLElement, styles: Partial<CSSStyleDeclaration>) => void;
+
+type RenderParagraphFragmentParams = {
+  doc: Document | null;
+  fragment: ParaFragment;
+  sdtBoundary?: SdtBoundaryOptions;
+  betweenInfo?: BetweenBorderInfo;
+  resolvedItem?: ResolvedFragmentItem;
+  applyStyles: ApplyStyles;
+  applyResolvedFragmentFrame: (el: HTMLElement, item: ResolvedFragmentItem, fragment: ParaFragment) => void;
+  applyFragmentFrame: (el: HTMLElement, fragment: ParaFragment) => void;
+  applySdtDataset: (el: HTMLElement | null, metadata?: SdtMetadata | null) => void;
+  applyContainerSdtDataset: (el: HTMLElement | null, metadata?: SdtMetadata | null) => void;
+  renderLine: (input: ParagraphRenderLineInput) => HTMLElement;
+  captureLineSnapshot: (lineEl: HTMLElement, options?: { sourceAnchor?: ResolvedFragmentItem['sourceAnchor'] }) => void;
+  createErrorPlaceholder: (blockId: string, error: unknown) => HTMLElement;
+};
+
+const isMinimalWordLayout = (value: unknown): value is MinimalWordLayout => isMinimalWordLayoutShared(value);
+
+export const renderParagraphFragment = (params: RenderParagraphFragmentParams): HTMLElement => {
+  const {
+    doc,
+    fragment,
+    sdtBoundary,
+    betweenInfo,
+    resolvedItem,
+    applyStyles,
+    applyResolvedFragmentFrame,
+    applyFragmentFrame,
+    applySdtDataset,
+    applyContainerSdtDataset,
+    renderLine,
+    captureLineSnapshot,
+    createErrorPlaceholder,
+  } = params;
+
+  try {
+    if (!doc) {
+      throw new Error('DomPainter: document is not available');
+    }
+
+    if (resolvedItem?.block?.kind !== 'paragraph' || resolvedItem?.measure?.kind !== 'paragraph') {
+      throw new Error(`DomPainter: missing resolved paragraph block/measure for fragment ${fragment.blockId}`);
+    }
+    const block = resolvedItem.block as ParagraphBlock;
+    const measure = resolvedItem.measure as ParagraphMeasure;
+    const wordLayout = isMinimalWordLayout(block.attrs?.wordLayout) ? block.attrs.wordLayout : undefined;
+    const content = resolvedItem?.content;
+
+    const paraContinuesFromPrev = resolvedItem?.continuesFromPrev;
+    const paraContinuesOnNext = resolvedItem?.continuesOnNext;
+    const paraMarkerWidth = resolvedItem?.markerWidth;
+
+    const fragmentEl = doc.createElement('div');
+    fragmentEl.classList.add(CLASS_NAMES.fragment);
+
+    const isTocEntry = block.attrs?.isTocEntry;
+    const hasMarker = !paraContinuesFromPrev && paraMarkerWidth && wordLayout?.marker;
+    const hasSdtContainer =
+      block.attrs?.sdt?.type === 'documentSection' ||
+      block.attrs?.sdt?.type === 'structuredContent' ||
+      block.attrs?.containerSdt?.type === 'documentSection' ||
+      block.attrs?.containerSdt?.type === 'structuredContent';
+    const paraIndentForOverflow = block.attrs?.indent;
+    const hasNegativeIndent = (paraIndentForOverflow?.left ?? 0) < 0 || (paraIndentForOverflow?.right ?? 0) < 0;
+    const styles = isTocEntry
+      ? { ...fragmentStyles, whiteSpace: 'nowrap' }
+      : hasMarker || hasSdtContainer || hasNegativeIndent
+        ? { ...fragmentStyles, overflow: 'visible' }
+        : fragmentStyles;
+    applyStyles(fragmentEl, styles);
+    if (resolvedItem) {
+      applyResolvedFragmentFrame(fragmentEl, resolvedItem, fragment);
+    } else {
+      applyFragmentFrame(fragmentEl, fragment);
+    }
+
+    if (isTocEntry) {
+      fragmentEl.classList.add('superdoc-toc-entry');
+    }
+
+    if (paraContinuesFromPrev) {
+      fragmentEl.dataset.continuesFromPrev = 'true';
+    }
+    if (paraContinuesOnNext) {
+      fragmentEl.dataset.continuesOnNext = 'true';
+    }
+
+    const lines = fragment.lines ?? measure.lines.slice(fragment.fromLine, fragment.toLine);
+    renderParagraphContent({
+      doc,
+      frameEl: fragmentEl,
+      block,
+      measure,
+      containerKind: 'body-fragment',
+      width: fragment.width,
+      localStartLine: 0,
+      localEndLine: lines.length,
+      lineIndexOffset: fragment.fromLine,
+      linesOverride: lines,
+      continuesFromPrev: paraContinuesFromPrev,
+      continuesOnNext: paraContinuesOnNext,
+      markerWidth: paraMarkerWidth,
+      markerTextWidth: fragment.markerTextWidth,
+      wordLayout,
+      resolvedContent: content,
+      betweenInfo,
+      sdtBoundary,
+      applySdtDataset,
+      applyContainerSdtDataset,
+      renderDropCap: (descriptor, dropCapMeasure) => renderDropCap(doc, descriptor, dropCapMeasure),
+      renderLine,
+      captureLineSnapshot: (lineEl, options) => {
+        captureLineSnapshot(lineEl, {
+          sourceAnchor: options?.sourceAnchor,
+        });
+      },
+      sourceAnchor: resolvedItem?.sourceAnchor,
+    });
+
+    return fragmentEl;
+  } catch (error) {
+    console.error('[DomPainter] Fragment rendering failed:', { fragment, error });
+    return createErrorPlaceholder(fragment.blockId, error);
+  }
+};
+
+const renderDropCap = (
+  doc: Document,
+  descriptor: DropCapDescriptor,
+  measure: ParagraphMeasure['dropCap'],
+): HTMLElement => {
+  const { run, mode } = descriptor;
+
+  const dropCapEl = doc.createElement('span');
+  dropCapEl.classList.add('superdoc-drop-cap');
+  dropCapEl.textContent = run.text;
+
+  dropCapEl.style.fontFamily = run.fontFamily;
+  dropCapEl.style.fontSize = `${run.fontSize}px`;
+  if (run.bold) {
+    dropCapEl.style.fontWeight = 'bold';
+  }
+  if (run.italic) {
+    dropCapEl.style.fontStyle = 'italic';
+  }
+  if (run.color) {
+    dropCapEl.style.color = run.color;
+  }
+
+  if (mode === 'drop') {
+    dropCapEl.style.float = 'left';
+    dropCapEl.style.marginRight = '4px';
+    dropCapEl.style.lineHeight = '1';
+  } else if (mode === 'margin') {
+    dropCapEl.style.position = 'absolute';
+    dropCapEl.style.left = '0';
+    dropCapEl.style.lineHeight = '1';
+  }
+
+  if (run.position && run.position !== 0) {
+    dropCapEl.style.position = dropCapEl.style.position || 'relative';
+    dropCapEl.style.top = `${run.position}px`;
+  }
+
+  if (measure) {
+    dropCapEl.style.width = `${measure.width}px`;
+    dropCapEl.style.height = `${measure.height}px`;
+  }
+
+  return dropCapEl;
+};
diff --git a/packages/layout-engine/painters/dom/src/paragraph/styles.ts b/packages/layout-engine/painters/dom/src/paragraph/styles.ts
new file mode 100644
index 0000000000..0548474826
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/paragraph/styles.ts
@@ -0,0 +1,37 @@
+import type { ParagraphAttrs } from '@superdoc/contracts';
+import { applyRtlStyles } from '../features/rtl-paragraph/index.js';
+
+export const applyParagraphBlockStyles = (element: HTMLElement, attrs?: ParagraphAttrs): void => {
+  if (!attrs) return;
+  if (attrs.styleId) {
+    element.setAttribute('styleid', attrs.styleId);
+  }
+  applyRtlStyles(element, attrs);
+  if ((attrs as Record<string, unknown>).dropCap) {
+    element.classList.add('sd-editor-dropcap');
+  }
+  const indent = attrs.indent;
+  if (indent) {
+    if (indent.left && indent.left > 0) {
+      element.style.paddingLeft = `${indent.left}px`;
+    }
+    if (indent.right && indent.right > 0) {
+      element.style.paddingRight = `${indent.right}px`;
+    }
+    const hasNegativeLeftIndent = indent.left != null && indent.left < 0;
+    if (!hasNegativeLeftIndent) {
+      const textIndent = (indent.firstLine ?? 0) - (indent.hanging ?? 0);
+      if (textIndent) {
+        element.style.textIndent = `${textIndent}px`;
+      }
+    }
+  }
+};
+
+export const clearParagraphFrameIndentStyles = (element: HTMLElement): void => {
+  if (element.style.paddingLeft) element.style.removeProperty('padding-left');
+  if (element.style.paddingRight) element.style.removeProperty('padding-right');
+  if (element.style.marginLeft) element.style.removeProperty('margin-left');
+  if (element.style.marginRight) element.style.removeProperty('margin-right');
+  if (element.style.textIndent) element.style.removeProperty('text-indent');
+};
diff --git a/packages/layout-engine/painters/dom/src/renderer.ts b/packages/layout-engine/painters/dom/src/renderer.ts
index 4ce4d07110..890679e6da 100644
--- a/packages/layout-engine/painters/dom/src/renderer.ts
+++ b/packages/layout-engine/painters/dom/src/renderer.ts
@@ -5,25 +5,19 @@ import type {
   DrawingBlock,
   DrawingFragment,
   DrawingGeometry,
-  DropCapDescriptor,
-  FieldAnnotationRun,
   FlowBlock,
   FlowMode,
-  FlowRunLink,
   Fragment,
   GradientFill,
   ImageBlock,
   ImageDrawing,
   ImageFragment,
   ImageHyperlink,
-  ImageRun,
   Line,
   LineSegment,
   PageMargins,
   ParaFragment,
-  ParagraphAttrs,
   ParagraphBlock,
-  ParagraphMeasure,
   PositionedDrawingGeometry,
   Run,
   SdtMetadata,
@@ -37,10 +31,7 @@ import type {
   TableCellAttrs,
   TableFragment,
   TableMeasure,
-  MathRun,
   TextRun,
-  TrackedChangeKind,
-  TrackedChangesMode,
   VectorShapeDrawing,
   VectorShapeStyle,
   ResolvedLayout,
@@ -50,38 +41,13 @@ import type {
   ResolvedTableItem,
   ResolvedImageItem,
   ResolvedDrawingItem,
-  ResolvedListMarkerItem,
 } from '@superdoc/contracts';
-import {
-  adjustAvailableWidthForTextIndent,
-  calculateJustifySpacing,
-  computeLinePmRange,
-  expandRunsForInlineNewlines,
-  getCellSpacingPx,
-  getParagraphInlineDirection,
-  normalizeColumnLayout,
-  normalizeBaselineShift,
-  resolveBaseFontSizeForVerticalText,
-  shouldApplyJustify,
-  sliceRunsForLine,
-  SPACE_CHARS,
-} from '@superdoc/contracts';
-import { toCssFontFamily } from '@superdoc/font-utils';
+import { expandRunsForInlineNewlines, getCellSpacingPx, normalizeColumnLayout } from '@superdoc/contracts';
 import { getPresetShapeSvg } from '@superdoc/preset-geometry';
 import { encodeTooltip, sanitizeHref } from '@superdoc/url-validation';
 import { DOM_CLASS_NAMES } from './constants.js';
 import { createChartElement as renderChartToElement } from './chart-renderer.js';
-import {
-  getRunBooleanProp,
-  getRunNumberProp,
-  getRunStringProp,
-  getRunUnderlineColor,
-  getRunUnderlineStyle,
-  hashCellBorders,
-  hashParagraphBorders,
-  hashTableBorders,
-} from './paragraph-hash-utils.js';
-import { assertFragmentPmPositions, assertPmPositions } from './pm-position-validation.js';
+import { hashCellBorders, hashTableBorders } from './paragraph-hash-utils.js';
 import { createRulerElement, ensureRulerStyles, generateRulerDefinitionFromPx } from './ruler/index.js';
 import {
   BROWSER_DEFAULT_FONT_SIZE,
@@ -97,7 +63,6 @@ import {
   ensureSdtContainerStyles,
   ensureTrackChangeStyles,
   fragmentStyles,
-  lineStyles,
   pageStyles,
   spreadStyles,
   type PageStyles,
@@ -105,80 +70,15 @@ import {
 import { applyAlphaToSVG, applyGradientToSVG, validateHexColor } from './svg-utils.js';
 import { renderTableFragment as renderTableFragmentElement } from './table/renderTableFragment.js';
 import { applyImageClipPath } from './utils/image-clip-path.js';
-import {
-  isMinimalWordLayout as isMinimalWordLayoutShared,
-  resolveMarkerIndent,
-} from '@superdoc/common/list-marker-utils';
-import {
-  computeTabWidth,
-  createListMarkerElement,
-  resolvePainterListMarkerGeometry,
-  resolvePainterListTextStartPx,
-} from './utils/marker-helpers.js';
 import { applySdtContainerStyling, shouldRebuildForSdtBoundary, type SdtBoundaryOptions } from './utils/sdt-helpers.js';
-import {
-  computeBetweenBorderFlags,
-  createParagraphDecorationLayers,
-  stampBetweenBorderDataset,
-  type BetweenBorderInfo,
-} from './features/paragraph-borders/index.js';
-import { applyRtlStyles, shouldUseSegmentPositioning } from './features/rtl-paragraph/index.js';
-import { convertOmmlToMathml } from './features/math/index.js';
-
-/**
- * Minimal type for WordParagraphLayoutOutput marker data used in rendering.
- * Extracted to avoid dependency on @superdoc/word-layout package.
- */
-type WordLayoutMarker = {
-  markerText?: string;
-  justification?: 'left' | 'right' | 'center';
-  gutterWidthPx?: number;
-  markerBoxWidthPx?: number;
-  suffix?: 'tab' | 'space' | 'nothing';
-  /** Pre-calculated X position where the marker should be placed (used in firstLineIndentMode). */
-  markerX?: number;
-  /** Pre-calculated X position where paragraph text should begin after the marker (used in firstLineIndentMode). */
-  textStartX?: number;
-  run: {
-    fontFamily: string;
-    fontSize: number;
-    bold?: boolean;
-    italic?: boolean;
-    color?: string;
-    letterSpacing?: number;
-    vanish?: boolean;
-  };
-};
-
-/**
- * Minimal type for wordLayout property used in this renderer.
- *
- * This is a subset of the full WordParagraphLayoutOutput type from @superdoc/word-layout.
- * We extract only the fields needed for rendering to avoid a direct dependency on the
- * word-layout package from the renderer. This allows the renderer to work with any object
- * that provides these properties, maintaining loose coupling between packages.
- *
- * The wordLayout property is attached to ParagraphBlock.attrs during block processing
- * and contains layout metadata needed for proper list marker and indent rendering.
- *
- * @property marker - Optional list marker layout containing text, styling, and positioning info
- * @property indentLeftPx - Left indent in pixels (used for marker positioning calculations)
- * @property firstLineIndentMode - When true, indicates the paragraph uses firstLine indent
- *   pattern (marker at left+firstLine) instead of standard hanging indent (marker at left-hanging).
- *   This flag changes how markers are positioned and how tab spacing is calculated.
- * @property textStartPx - X position where paragraph text should begin (used for tab width calculation)
- * @property tabsPx - Array of explicit tab stop positions in pixels
- */
-type MinimalWordLayout = {
-  marker?: WordLayoutMarker;
-  indentLeftPx?: number;
-  /** True for firstLine indent pattern (marker at left+firstLine vs left-hanging). */
-  firstLineIndentMode?: boolean;
-  /** X position where paragraph text should begin. */
-  textStartPx?: number;
-  /** Array of explicit tab stop positions in pixels. */
-  tabsPx?: number[];
-};
+import { computeBetweenBorderFlags, type BetweenBorderInfo } from './paragraph/borders/index.js';
+import { deriveParagraphBlockVersion, hashParagraphBlockForTableVersion } from './paragraph/block-version.js';
+import { applyParagraphFragmentPmAttributes } from './paragraph/frame.js';
+import { renderParagraphFragment as renderParagraphFragmentElement } from './paragraph/renderParagraphFragment.js';
+import { renderLine as renderRunLine } from './runs/render-line.js';
+import type { RunRenderContext } from './runs/types.js';
+import { buildImageFilters } from './runs/image-run.js';
+import { applyTrackedChangeDecorations, resolveTrackedChangesConfig } from './runs/tracked-changes.js';
 
 type LineEnd = {
   type?: string;
@@ -203,14 +103,6 @@ type VectorShapeDrawingWithEffects = VectorShapeDrawing & {
   effectExtent?: EffectExtent;
 };
 
-/**
- * Type guard narrowing to the renderer-local MinimalWordLayout type.
- * Delegates structural validation to the shared isMinimalWordLayout guard.
- */
-function isMinimalWordLayout(value: unknown): value is MinimalWordLayout {
-  return isMinimalWordLayoutShared(value);
-}
-
 /**
  * Layout mode for document rendering.
  * @typedef {('vertical'|'horizontal'|'book')} LayoutMode
@@ -803,449 +695,9 @@ function collectLineTabsForSnapshot(lineEl: HTMLElement): PaintSnapshotTabStyle[
 const DEFAULT_PAGE_HEIGHT_PX = 1056;
 /** Default gap used when virtualization is enabled (kept in sync with PresentationEditor layout defaults). */
 const DEFAULT_VIRTUALIZED_PAGE_GAP = 72;
-// Comment highlight color tokens moved to CommentHighlightDecorator (super-editor).
-
-type LinkRenderData = {
-  href?: string;
-  target?: string;
-  rel?: string;
-  tooltip?: string | null;
-  dataset?: Record<string, string>;
-  blocked: boolean;
-};
-
-const LINK_DATASET_KEYS = {
-  blocked: 'linkBlocked',
-  docLocation: 'linkDocLocation',
-  history: 'linkHistory',
-  rId: 'linkRid',
-  truncated: 'linkTooltipTruncated',
-} as const;
-
-const MAX_HREF_LENGTH = 2048;
-
-const SAFE_ANCHOR_PATTERN = /^[A-Za-z0-9._-]+$/;
-
-/**
- * Maximum allowed length for data URLs (10MB).
- * Prevents denial of service attacks from extremely large embedded images.
- */
-const MAX_DATA_URL_LENGTH = 10 * 1024 * 1024; // 10MB
-
-/**
- * Regular expression to validate data URL format for images.
- * Only allows common, safe image MIME types with base64 encoding.
- * Prevents XSS and malformed data URL attacks.
- */
-const VALID_IMAGE_DATA_URL = /^data:image\/(png|jpeg|jpg|gif|svg\+xml|webp|bmp|ico|tiff?);base64,/i;
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const WORDART_LINE_FILL_RATIO = 0.9;
-
-/**
- * Maximum resize multiplier for image metadata.
- * Images can be resized up to 3x their original dimensions.
- */
-const MAX_RESIZE_MULTIPLIER = 3;
-
-/**
- * Fallback maximum dimension for image resizing when original size is small.
- * Ensures images can be resized to at least 1000px even if original is smaller.
- */
-const FALLBACK_MAX_DIMENSION = 1000;
-
-/**
- * Minimum image dimension in pixels.
- * Ensures images remain visible and interactive during resizing.
- */
-const MIN_IMAGE_DIMENSION = 20;
-
-/**
- * Pattern to detect ambiguous link text that doesn't convey destination (WCAG 2.4.4).
- * Matches common generic phrases like "click here", "read more", etc.
- */
-const AMBIGUOUS_LINK_PATTERNS = /^(click here|read more|more|link|here|this|download|view)$/i;
-
-/**
- * Hyperlink rendering metrics for observability.
- * Tracks sanitization, blocking, and security-related events.
- */
-const linkMetrics = {
-  sanitized: 0,
-  blocked: 0,
-  invalidProtocol: 0,
-  homographWarnings: 0,
-
-  reset() {
-    this.sanitized = 0;
-    this.blocked = 0;
-    this.invalidProtocol = 0;
-    this.homographWarnings = 0;
-  },
-
-  getMetrics() {
-    return {
-      'hyperlink.sanitized.count': this.sanitized,
-      'hyperlink.blocked.count': this.blocked,
-      'hyperlink.invalid_protocol.count': this.invalidProtocol,
-      'hyperlink.homograph_warnings.count': this.homographWarnings,
-    };
-  },
-};
-
-// Export for testing/monitoring
-export { linkMetrics };
-
-const TRACK_CHANGE_BASE_CLASS: Record<TrackedChangeKind, string> = {
-  insert: 'track-insert-dec',
-  delete: 'track-delete-dec',
-  format: 'track-format-dec',
-};
-// TRACK_CHANGE_FOCUSED_CLASS moved to CommentHighlightDecorator (super-editor).
-
-const TRACK_CHANGE_MODIFIER_CLASS: Record<TrackedChangeKind, Record<TrackedChangesMode, string | undefined>> = {
-  insert: {
-    review: 'highlighted',
-    original: 'hidden',
-    final: 'normal',
-    off: undefined,
-  },
-  delete: {
-    review: 'highlighted',
-    original: 'normal',
-    final: 'hidden',
-    off: undefined,
-  },
-  format: {
-    review: 'highlighted',
-    original: 'before',
-    final: 'normal',
-    off: undefined,
-  },
-};
-
-type TrackedChangesRenderConfig = {
-  mode: TrackedChangesMode;
-  enabled: boolean;
-};
-
-/**
- * Sanitize a URL to prevent XSS attacks.
- * Only allows http, https, mailto, tel, and internal anchors.
- *
- * @param href - The URL to sanitize
- * @returns Sanitized URL or null if blocked
- */
-export function sanitizeUrl(href: string): string | null {
-  if (typeof href !== 'string') return null;
-  const sanitized = sanitizeHref(href);
-  return sanitized?.href ?? null;
-}
-
-const LINK_TARGET_SET = new Set(['_blank', '_self', '_parent', '_top']);
-
-/**
- * Normalize and validate an anchor fragment identifier for use in hyperlinks.
- * Strips leading '#' if present and validates against safe character pattern.
- *
- * @param value - Raw anchor string (with or without leading '#')
- * @returns Normalized anchor with leading '#' (e.g., '#section-1'), or null if invalid
- *
- * @remarks
- * SECURITY: Only allows safe characters (A-Z, a-z, 0-9, ., _, -) to prevent HTML attribute injection.
- * Rejects characters like quotes, angle brackets, colons, and spaces that could break HTML structure
- * or enable XSS attacks when used in href attributes.
- *
- * @example
- * normalizeAnchor('section-1') // Returns: '#section-1'
- * normalizeAnchor('#bookmark') // Returns: '#bookmark'
- * normalizeAnchor('unsafe<script>') // Returns: null
- * normalizeAnchor('  whitespace  ') // Returns: null
- */
-const normalizeAnchor = (value: string | null | undefined): string | null => {
-  if (typeof value !== 'string') return null;
-  const trimmed = value.trim();
-  if (!trimmed) return null;
-
-  // Remove leading # if present, then validate
-  const anchor = trimmed.startsWith('#') ? trimmed.slice(1) : trimmed;
-
-  // SECURITY: Only allow safe characters to prevent attribute injection
-  // Rejects characters like quotes, angle brackets, spaces that could break HTML
-  if (!SAFE_ANCHOR_PATTERN.test(anchor)) {
-    return null;
-  }
-
-  return `#${anchor}`;
-};
-
-/**
- * Check if a fragment string contains only safe anchor characters.
- * Safe characters are alphanumeric, dots, underscores, and hyphens.
- *
- * @param {string} fragment - Fragment to validate
- * @returns {boolean} True if fragment matches safe pattern
- * @private
- */
-const isValidSafeFragment = (fragment: string): boolean => {
-  return SAFE_ANCHOR_PATTERN.test(fragment);
-};
-
-type ImageFilterSource = Pick<ImageBlock, 'grayscale' | 'gain' | 'blacklevel' | 'lum'>;
-
-const clampLumUnit = (value: number): number => {
-  return Math.max(-100000, Math.min(100000, value));
-};
-
-const parseVmlFixedFraction = (value: string | number | undefined): number | null => {
-  if (typeof value === 'number' && Number.isFinite(value)) {
-    return value;
-  }
-  if (typeof value !== 'string' || value.length === 0) {
-    return null;
-  }
-
-  if (value.endsWith('f')) {
-    const raw = Number.parseInt(value.slice(0, -1), 10);
-    return Number.isFinite(raw) ? raw / 65536 : null;
-  }
-
-  const parsed = Number.parseFloat(value);
-  return Number.isFinite(parsed) ? parsed : null;
-};
-
-const buildImageFilters = (source: ImageFilterSource): string[] => {
-  const filters: string[] = [];
-
-  if (source.grayscale) {
-    filters.push('grayscale(100%)');
-  }
-
-  if (source.gain != null || source.blacklevel != null) {
-    const gain = parseVmlFixedFraction(source.gain);
-    const blacklevel = parseVmlFixedFraction(source.blacklevel);
-
-    if (gain != null) {
-      const contrast = Math.max(0, gain);
-      if (contrast > 0) {
-        filters.push(`contrast(${contrast})`);
-      }
-    }
-
-    if (blacklevel != null) {
-      // CSS has no black-point control, so approximate VML blacklevel with a linear
-      // brightness shift using the same 0..32767 range Word's watermark UI uses.
-      const brightness = Math.max(0, 1 + blacklevel * (65536 / 32767));
-      if (brightness > 0) {
-        filters.push(`brightness(${brightness})`);
-      }
-    }
-  }
-
-  if (source.lum) {
-    // a:lum uses ST_FixedPercentage values expressed in thousandths of a percent.
-    // Convert those percentage deltas into CSS filter multipliers.
-    const contrastValue = typeof source.lum.contrast === 'number' ? clampLumUnit(source.lum.contrast) : null;
-    const brightValue = typeof source.lum.bright === 'number' ? clampLumUnit(source.lum.bright) : null;
-
-    if (contrastValue != null) {
-      const contrast = Math.max(0, 1 + contrastValue / 100000);
-      if (contrast >= 0) {
-        filters.push(`contrast(${contrast})`);
-      }
-    }
-
-    if (brightValue != null) {
-      const brightness = Math.max(0, 1 + brightValue / 100000);
-      if (brightness >= 0) {
-        filters.push(`brightness(${brightness})`);
-      }
-    }
-  }
-
-  return filters;
-};
-
-/**
- * URL-encode a fragment string for use in a URL hash.
- * Returns null if encoding fails (rare edge case).
- *
- * @param {string} fragment - Fragment to encode
- * @returns {string | null} Encoded fragment or null if encoding fails
- * @private
- */
-const encodeFragment = (fragment: string): string | null => {
-  try {
-    return encodeURIComponent(fragment);
-  } catch {
-    return null;
-  }
-};
-
-/**
- * Append a document location fragment to an href.
- * CRITICAL FIX: URL-encode unsafe characters instead of destroying the entire href.
- *
- * @param href - Base URL or null
- * @param docLocation - Fragment identifier to append
- * @returns Combined URL with fragment, or original href if fragment is invalid
- */
-const appendDocLocation = (href: string | null, docLocation?: string | null): string | null => {
-  if (!docLocation?.trim()) return href;
-
-  const fragment = docLocation.trim();
-  if (href?.includes('#')) return href;
-
-  const encoded = isValidSafeFragment(fragment) ? fragment : encodeFragment(fragment);
-
-  if (!encoded) return href;
-  return href ? `${href}#${encoded}` : `#${encoded}`;
-};
-
-/**
- * Build HTML data-* attributes object from hyperlink metadata for version 2 links.
- * Extracts relationship ID, document location fragment, and history preferences from link object.
- *
- * @param link - Flow run link object containing hyperlink metadata
- * @returns Record of data attribute keys and string values to be applied to anchor element
- *
- * @remarks
- * Only processes version 2 links (Office Open XML format). Version 1 links return empty object.
- * All dataset values are converted to strings for DOM compatibility.
- *
- * @example
- * buildLinkDataset({
- *   version: 2,
- *   rId: 'rId5',
- *   docLocation: 'bookmark1',
- *   history: true
- * })
- * // Returns: { rId: 'rId5', docLocation: 'bookmark1', history: 'true' }
- */
-const buildLinkDataset = (link: FlowRunLink): Record<string, string> => {
-  const dataset: Record<string, string> = {};
-  if (link.version === 2) {
-    if (link.rId) dataset[LINK_DATASET_KEYS.rId] = link.rId;
-    if (link.docLocation) dataset[LINK_DATASET_KEYS.docLocation] = link.docLocation;
-    if (typeof link.history === 'boolean') dataset[LINK_DATASET_KEYS.history] = String(link.history);
-  }
-  return dataset;
-};
-
-/**
- * Resolve the appropriate target attribute for a hyperlink anchor element.
- * Validates user-specified targets and auto-sets '_blank' for external HTTP(S) links.
- *
- * @param link - Flow run link object potentially containing target preference
- * @param sanitized - Sanitized URL metadata containing protocol information, or null if sanitization failed
- * @returns Valid target string ('_blank', '_self', '_parent', '_top') or undefined if not applicable
- *
- * @remarks
- * Target resolution follows this priority:
- * 1. If link.target is specified and valid (in LINK_TARGET_SET), use it
- * 2. If URL is external (http/https protocol), default to '_blank' for security
- * 3. Otherwise, return undefined (browser default behavior)
- *
- * @example
- * resolveLinkTarget(
- *   { target: '_self' },
- *   { protocol: 'https', href: 'https://example.com', isExternal: true }
- * ) // Returns: '_self' (user preference honored)
- *
- * resolveLinkTarget(
- *   {},
- *   { protocol: 'https', href: 'https://example.com', isExternal: true }
- * ) // Returns: '_blank' (external link default)
- */
-const resolveLinkTarget = (
-  link: FlowRunLink,
-  sanitized?: ReturnType<typeof sanitizeHref> | null,
-): string | undefined => {
-  if (link.target && LINK_TARGET_SET.has(link.target)) {
-    return link.target;
-  }
-  if (sanitized && (sanitized.protocol === 'http' || sanitized.protocol === 'https')) {
-    return '_blank';
-  }
-  return undefined;
-};
-
-/**
- * Resolve the rel attribute value for a hyperlink, combining user-specified relationships
- * with security-critical values for external links.
- *
- * @param link - Flow run link object potentially containing rel preference (space-separated string)
- * @param target - Resolved target attribute value (e.g., '_blank', '_self')
- * @returns Space-separated rel values, or undefined if no rel values apply
- *
- * @remarks
- * SECURITY: Automatically adds 'noopener noreferrer' for target='_blank' links to prevent:
- * - Tabnabbing attacks (window.opener access)
- * - Referrer leakage to external sites
- *
- * User-specified rel values are parsed from link.rel (whitespace-separated string),
- * deduplicated, and merged with security values.
- *
- * @example
- * resolveLinkRel(
- *   { rel: 'nofollow external' },
- *   '_blank'
- * ) // Returns: 'nofollow external noopener noreferrer'
- *
- * resolveLinkRel(
- *   { rel: 'nofollow  noopener  ' },
- *   '_blank'
- * ) // Returns: 'nofollow noopener noreferrer' (deduplicated)
- *
- * resolveLinkRel({}, '_self') // Returns: undefined
- */
-const resolveLinkRel = (link: FlowRunLink, target?: string): string | undefined => {
-  const relValues = new Set<string>();
-  if (typeof link.rel === 'string' && link.rel.trim()) {
-    link.rel
-      .trim()
-      .split(/\s+/)
-      .forEach((value) => {
-        if (value) relValues.add(value);
-      });
-  }
-  if (target === '_blank') {
-    relValues.add('noopener');
-    relValues.add('noreferrer');
-  }
-  if (relValues.size === 0) {
-    return undefined;
-  }
-  return Array.from(relValues).join(' ');
-};
-
-/**
- * Apply data-* attributes to an HTML element from a dataset object.
- * Safely assigns dataset properties while filtering out null/undefined values.
- *
- * @param element - Target HTML element to receive data attributes
- * @param dataset - Object mapping data attribute keys to string values
- *
- * @remarks
- * Uses the element.dataset API which automatically prefixes keys with 'data-'.
- * Only assigns non-null, non-undefined values to prevent empty attributes.
- *
- * @example
- * const anchor = document.createElement('a');
- * applyLinkDataset(anchor, {
- *   rId: 'rId5',
- *   docLocation: 'bookmark1',
- *   history: 'true'
- * });
- * // Resulting HTML: <a data-r-id="rId5" data-doc-location="bookmark1" data-history="true"></a>
- */
-const applyLinkDataset = (element: HTMLElement, dataset?: Record<string, string>): void => {
-  if (!dataset) return;
-  Object.entries(dataset).forEach(([key, value]) => {
-    if (value != null) {
-      element.dataset[key] = value;
-    }
-  });
-};
+// Comment highlight color tokens moved to CommentHighlightDecorator (super-editor).
 
 /**
  * DOM-based document painter that renders layout fragments to HTML elements.
@@ -3029,609 +2481,123 @@ export class DomPainter {
     sdtBoundary?: SdtBoundaryOptions,
     betweenInfo?: BetweenBorderInfo,
     resolvedItem?: ResolvedFragmentItem,
+  ): HTMLElement {
+    return renderParagraphFragmentElement({
+      doc: this.doc,
+      fragment,
+      sdtBoundary,
+      betweenInfo,
+      resolvedItem,
+      applyStyles,
+      applyResolvedFragmentFrame: (el, item, paraFragment) =>
+        this.applyResolvedFragmentFrame(el, item, paraFragment, context.section),
+      applyFragmentFrame: (el, paraFragment) => this.applyFragmentFrame(el, paraFragment, context.section),
+      applySdtDataset: this.applySdtDataset.bind(this),
+      applyContainerSdtDataset: this.applyContainerSdtDataset.bind(this),
+      renderLine: ({
+        block,
+        line,
+        availableWidth,
+        lineIndex,
+        skipJustify,
+        preExpandedRuns,
+        resolvedListTextStartPx,
+        indentOffsetOverride,
+        paragraphMarkLeftOffsetOverride,
+      }) =>
+        this.renderLine(
+          block,
+          line,
+          context,
+          availableWidth,
+          lineIndex,
+          skipJustify,
+          preExpandedRuns,
+          resolvedListTextStartPx,
+          indentOffsetOverride,
+          paragraphMarkLeftOffsetOverride,
+        ),
+      captureLineSnapshot: (lineEl, options) => {
+        this.capturePaintSnapshotLine(lineEl, context, {
+          inTableFragment: false,
+          inTableParagraph: false,
+          sourceAnchor: options?.sourceAnchor,
+        });
+      },
+      createErrorPlaceholder: this.createErrorPlaceholder.bind(this),
+    });
+  }
+
+  /**
+   * Creates an error placeholder element for failed fragment renders.
+   * Prevents entire paint operation from failing due to single fragment error.
+   *
+   * @param blockId - The block ID that failed to render
+   * @param error - The error that occurred
+   * @returns HTMLElement showing the error
+   */
+  private createErrorPlaceholder(blockId: string, error: unknown): HTMLElement {
+    if (!this.doc) {
+      // Fallback if doc is not available
+      const el = document.createElement('div');
+      el.className = 'render-error-placeholder';
+      el.style.cssText = 'color: red; padding: 4px; border: 1px solid red; background: #fee;';
+      el.textContent = `[Render Error: ${blockId}]`;
+      return el;
+    }
+
+    const el = this.doc.createElement('div');
+    el.className = 'render-error-placeholder';
+    el.style.cssText = 'color: red; padding: 4px; border: 1px solid red; background: #fee;';
+    el.textContent = `[Render Error: ${blockId}]`;
+    if (error instanceof Error) {
+      el.title = error.message;
+    }
+    return el;
+  }
+
+  private renderImageFragment(
+    fragment: ImageFragment,
+    context: FragmentRenderContext,
+    resolvedItem?: ResolvedImageItem,
   ): HTMLElement {
     try {
-      if (!this.doc) {
-        throw new Error('DomPainter: document is not available');
+      // Pre-extracted block from the resolved item.
+      if (resolvedItem?.block?.kind !== 'image') {
+        throw new Error(`DomPainter: missing resolved image block for fragment ${fragment.blockId}`);
       }
+      const block = resolvedItem.block as ImageBlock;
 
-      // Pre-extracted block/measure from the resolved item.
-      if (resolvedItem?.block?.kind !== 'paragraph' || resolvedItem?.measure?.kind !== 'paragraph') {
-        throw new Error(`DomPainter: missing resolved paragraph block/measure for fragment ${fragment.blockId}`);
+      if (!this.doc) {
+        throw new Error('DomPainter: document is not available');
       }
-      const block = resolvedItem.block as ParagraphBlock;
-      const measure = resolvedItem.measure as ParagraphMeasure;
-      const wordLayout = isMinimalWordLayout(block.attrs?.wordLayout) ? block.attrs.wordLayout : undefined;
-      const content = resolvedItem?.content;
-
-      // Prefer resolved item metadata over legacy fragment reads
-      const paraContinuesFromPrev = resolvedItem?.continuesFromPrev;
-      const paraContinuesOnNext = resolvedItem?.continuesOnNext;
-      const paraMarkerWidth = resolvedItem?.markerWidth;
 
       const fragmentEl = this.doc.createElement('div');
-      fragmentEl.classList.add(CLASS_NAMES.fragment);
-
-      // For TOC entries, override white-space to prevent wrapping
-      const isTocEntry = block.attrs?.isTocEntry;
-      // For fragments with markers, allow overflow to show markers positioned at negative left
-      const hasMarker = !paraContinuesFromPrev && paraMarkerWidth && wordLayout?.marker;
-      // SDT containers need overflow visible for tooltips/labels positioned above
-      const hasSdtContainer =
-        block.attrs?.sdt?.type === 'documentSection' ||
-        block.attrs?.sdt?.type === 'structuredContent' ||
-        block.attrs?.containerSdt?.type === 'documentSection' ||
-        block.attrs?.containerSdt?.type === 'structuredContent';
-      // Negative indents extend text into the margin area, requiring overflow:visible
-      const paraIndentForOverflow = block.attrs?.indent;
-      const hasNegativeIndent = (paraIndentForOverflow?.left ?? 0) < 0 || (paraIndentForOverflow?.right ?? 0) < 0;
-      const styles = isTocEntry
-        ? { ...fragmentStyles, whiteSpace: 'nowrap' }
-        : hasMarker || hasSdtContainer || hasNegativeIndent
-          ? { ...fragmentStyles, overflow: 'visible' }
-          : fragmentStyles;
-      applyStyles(fragmentEl, styles);
+      fragmentEl.classList.add(CLASS_NAMES.fragment, DOM_CLASS_NAMES.IMAGE_FRAGMENT);
+      applyStyles(fragmentEl, fragmentStyles);
       if (resolvedItem) {
         this.applyResolvedFragmentFrame(fragmentEl, resolvedItem, fragment, context.section);
       } else {
         this.applyFragmentFrame(fragmentEl, fragment, context.section);
+        fragmentEl.style.height = `${fragment.height}px`;
+        this.applyFragmentWrapperZIndex(fragmentEl, fragment);
       }
+      this.applySdtDataset(fragmentEl, block.attrs?.sdt);
+      this.applyContainerSdtDataset(fragmentEl, block.attrs?.containerSdt);
 
-      // Add TOC-specific styling class
-      if (isTocEntry) {
-        fragmentEl.classList.add('superdoc-toc-entry');
+      // Add block ID for PM transaction targeting
+      if (block.id) {
+        fragmentEl.setAttribute('data-sd-block-id', block.id);
       }
 
-      if (paraContinuesFromPrev) {
-        fragmentEl.dataset.continuesFromPrev = 'true';
+      // Add PM position markers for transaction targeting
+      const imgPmStart = resolvedItem?.pmStart;
+      if (imgPmStart != null) {
+        fragmentEl.dataset.pmStart = String(imgPmStart);
       }
-      if (paraContinuesOnNext) {
-        fragmentEl.dataset.continuesOnNext = 'true';
-      }
-
-      // Use fragment.lines if available (set when paragraph was remeasured for narrower column).
-      // Otherwise, fall back to slicing from the original measure.
-      const lines = fragment.lines ?? measure.lines.slice(fragment.fromLine, fragment.toLine);
-      applyParagraphBlockStyles(fragmentEl, block.attrs);
-      const { shadingLayer, borderLayer } = createParagraphDecorationLayers(
-        this.doc,
-        fragment.width,
-        block.attrs,
-        betweenInfo,
-      );
-      if (shadingLayer) {
-        fragmentEl.appendChild(shadingLayer);
-      }
-      if (borderLayer) {
-        fragmentEl.appendChild(borderLayer);
-      }
-      stampBetweenBorderDataset(fragmentEl, betweenInfo);
-      if (block.attrs?.styleId) {
-        fragmentEl.dataset.styleId = block.attrs.styleId;
-        fragmentEl.setAttribute('styleid', block.attrs.styleId);
-      }
-      this.applySdtDataset(fragmentEl, block.attrs?.sdt);
-      this.applyContainerSdtDataset(fragmentEl, block.attrs?.containerSdt);
-
-      // Apply SDT container styling (document sections, structured content blocks)
-      applySdtContainerStyling(this.doc, fragmentEl, block.attrs?.sdt, block.attrs?.containerSdt, sdtBoundary);
-
-      // Render drop cap if present (only on the first fragment, not continuation)
-      if (content?.dropCap) {
-        const dc = content.dropCap;
-        const dropCapEl = this.renderDropCap(
-          {
-            mode: dc.mode,
-            run: {
-              text: dc.text,
-              fontFamily: dc.fontFamily,
-              fontSize: dc.fontSize,
-              bold: dc.bold,
-              italic: dc.italic,
-              color: dc.color,
-              position: dc.position,
-            },
-            lines: 0,
-          },
-          dc.width != null && dc.height != null
-            ? { width: dc.width, height: dc.height, lines: 0, mode: dc.mode }
-            : undefined,
-        );
-        fragmentEl.appendChild(dropCapEl);
-      } else {
-        const dropCapDescriptor = block.attrs?.dropCapDescriptor;
-        const dropCapMeasure = measure.dropCap;
-        if (dropCapDescriptor && dropCapMeasure && !paraContinuesFromPrev) {
-          const dropCapEl = this.renderDropCap(dropCapDescriptor, dropCapMeasure);
-          fragmentEl.appendChild(dropCapEl);
-        }
-      }
-
-      // Remove fragment-level indent so line-level indent handling doesn't double-apply.
-      // Include margin properties for negative indents (which use margin instead of padding).
-      if (fragmentEl.style.paddingLeft) fragmentEl.style.removeProperty('padding-left');
-      if (fragmentEl.style.paddingRight) fragmentEl.style.removeProperty('padding-right');
-      if (fragmentEl.style.marginLeft) fragmentEl.style.removeProperty('margin-left');
-      if (fragmentEl.style.marginRight) fragmentEl.style.removeProperty('margin-right');
-      if (fragmentEl.style.textIndent) fragmentEl.style.removeProperty('text-indent');
-
-      if (content) {
-        // ── Resolved path: read pre-computed values from ResolvedParagraphContent ──
-        const resolvedMarker = content.marker;
-        const expandedRunsForBlock = expandRunsForInlineNewlines(block.runs);
-
-        content.lines.forEach((resolvedLine) => {
-          const paragraphMarkLeftOffset = this.resolveResolvedListParagraphMarkOffset(
-            resolvedLine.isListFirstLine ? resolvedMarker : undefined,
-            fragment.markerTextWidth,
-            resolvedLine.indentOffset,
-          );
-          const isRtl = getParagraphInlineDirection(block.attrs) === 'rtl';
-          const lineEl = this.renderLine(
-            block,
-            resolvedLine.line,
-            context,
-            resolvedLine.availableWidth,
-            resolvedLine.lineIndex,
-            resolvedLine.skipJustify,
-            expandedRunsForBlock,
-            resolvedLine.resolvedListTextStartPx,
-            resolvedLine.indentOffset,
-            paragraphMarkLeftOffset,
-          );
-
-          // Apply pre-computed indent values
-          if (!resolvedLine.isListFirstLine) {
-            if (resolvedLine.paddingLeftPx > 0) {
-              lineEl.style.paddingLeft = `${resolvedLine.paddingLeftPx}px`;
-            }
-            if (resolvedLine.textIndentPx !== 0) {
-              lineEl.style.textIndent = `${resolvedLine.textIndentPx}px`;
-            } else if (resolvedLine.lineIndex > 0 || content.continuesFromPrev) {
-              // Body lines: reset textIndent to 0 if firstLineOffset would have been set
-              // (mirrors the legacy `else if (firstLineOffset && !isListFirstLine)` branch)
-              const paraIndent = block.attrs?.indent;
-              const suppressFLI = (block.attrs as Record<string, unknown>)?.suppressFirstLineIndent === true;
-              const flo = suppressFLI ? 0 : (paraIndent?.firstLine ?? 0) - (paraIndent?.hanging ?? 0);
-              if (flo && !resolvedLine.isListFirstLine) {
-                lineEl.style.textIndent = '0px';
-              }
-            }
-          }
-          if (resolvedLine.paddingRightPx > 0) {
-            lineEl.style.paddingRight = `${resolvedLine.paddingRightPx}px`;
-          }
-
-          // Render marker on list first line
-          if (resolvedLine.isListFirstLine && resolvedMarker) {
-            if (isRtl) {
-              lineEl.style.paddingRight = `${resolvedMarker.firstLinePaddingLeftPx}px`;
-            } else {
-              lineEl.style.paddingLeft = `${resolvedMarker.firstLinePaddingLeftPx}px`;
-            }
-
-            if (!resolvedMarker.vanish) {
-              const markerContainer = createListMarkerElement(
-                this.doc!,
-                resolvedMarker.text,
-                resolvedMarker.run,
-                resolvedMarker.sourceAnchor ?? resolvedItem?.sourceAnchor,
-              );
-
-              markerContainer.style.position = 'relative';
-              if (resolvedMarker.justification === 'right') {
-                markerContainer.style.position = 'absolute';
-                if (isRtl) {
-                  markerContainer.style.right = `${resolvedMarker.markerStartPx}px`;
-                } else {
-                  markerContainer.style.left = `${resolvedMarker.markerStartPx}px`;
-                }
-              } else if (resolvedMarker.justification === 'center') {
-                markerContainer.style.position = 'absolute';
-                if (isRtl) {
-                  markerContainer.style.right = `${resolvedMarker.markerStartPx - (resolvedMarker.centerPaddingAdjustPx ?? 0)}px`;
-                  lineEl.style.paddingRight =
-                    (
-                      parseFloat(lineEl.style.paddingRight || '0') + (resolvedMarker.centerPaddingAdjustPx ?? 0)
-                    ).toString() + 'px';
-                } else {
-                  markerContainer.style.left = `${resolvedMarker.markerStartPx - (resolvedMarker.centerPaddingAdjustPx ?? 0)}px`;
-                  lineEl.style.paddingLeft =
-                    parseFloat(lineEl.style.paddingLeft) + (resolvedMarker.centerPaddingAdjustPx ?? 0) + 'px';
-                }
-              }
-
-              if (resolvedMarker.suffix === 'tab') {
-                const tabEl = this.doc!.createElement('span');
-                tabEl.classList.add('superdoc-tab', 'superdoc-marker-suffix-tab');
-                tabEl.innerHTML = '&nbsp;';
-                tabEl.style.display = 'inline-block';
-                tabEl.style.fontSize = `${resolvedMarker.run.fontSize}px`;
-                tabEl.style.wordSpacing = '0px';
-                tabEl.style.width = `${resolvedMarker.suffixWidthPx}px`;
-                lineEl.prepend(tabEl);
-              } else if (resolvedMarker.suffix === 'space') {
-                const spaceEl = this.doc!.createElement('span');
-                spaceEl.classList.add('superdoc-marker-suffix-space');
-                spaceEl.style.fontSize = `${resolvedMarker.run.fontSize}px`;
-                spaceEl.style.wordSpacing = '0px';
-                spaceEl.textContent = '\u00A0';
-                lineEl.prepend(spaceEl);
-              }
-              lineEl.prepend(markerContainer);
-            }
-          }
-          this.capturePaintSnapshotLine(lineEl, context, {
-            inTableFragment: false,
-            inTableParagraph: false,
-            sourceAnchor: resolvedItem?.sourceAnchor,
-          });
-          fragmentEl.appendChild(lineEl);
-        });
-      } else {
-        // ── Legacy path: compute everything from block attrs and measure ──
-        const paraIndent = block.attrs?.indent;
-        const paraIndentLeft = paraIndent?.left ?? 0;
-        const paraIndentRight = paraIndent?.right ?? 0;
-        const isRtl = getParagraphInlineDirection(block.attrs) === 'rtl';
-        const {
-          anchorIndentPx: paraMarkerAnchorIndent,
-          firstLinePx: markerFirstLine,
-          hangingPx: markerHanging,
-        } = resolveMarkerIndent(paraIndent, isRtl);
-        const suppressFirstLineIndent = (block.attrs as Record<string, unknown>)?.suppressFirstLineIndent === true;
-        const firstLineOffset = suppressFirstLineIndent ? 0 : (paraIndent?.firstLine ?? 0) - (paraIndent?.hanging ?? 0);
-
-        const expandedRunsForBlock = expandRunsForInlineNewlines(block.runs);
-        const lastRun = block.runs.length > 0 ? block.runs[block.runs.length - 1] : null;
-        const paragraphEndsWithLineBreak = lastRun?.kind === 'lineBreak';
-
-        const listFirstLineTextStartPx =
-          !paraContinuesFromPrev && paraMarkerWidth && wordLayout?.marker
-            ? resolvePainterListTextStartPx({
-                wordLayout,
-                indentLeftPx: paraMarkerAnchorIndent,
-                hangingIndentPx: markerHanging,
-                firstLineIndentPx: markerFirstLine,
-                markerTextWidthPx: fragment.markerTextWidth,
-              })
-            : undefined;
-
-        const shouldUseSharedInlinePrefixGeometry =
-          !paraContinuesFromPrev &&
-          paraMarkerWidth &&
-          wordLayout?.marker?.justification === 'left' &&
-          wordLayout.firstLineIndentMode !== true &&
-          typeof fragment.markerTextWidth === 'number' &&
-          Number.isFinite(fragment.markerTextWidth) &&
-          fragment.markerTextWidth >= 0;
-        const listFirstLineMarkerGeometry = shouldUseSharedInlinePrefixGeometry
-          ? resolvePainterListMarkerGeometry({
-              wordLayout,
-              indentLeftPx: paraMarkerAnchorIndent,
-              hangingIndentPx: markerHanging,
-              firstLineIndentPx: markerFirstLine,
-              markerTextWidthPx: fragment.markerTextWidth,
-            })
-          : undefined;
-
-        let listTabWidth = 0;
-        let markerStartPos = 0;
-        if (!paraContinuesFromPrev && paraMarkerWidth && wordLayout?.marker) {
-          const markerTextWidth = fragment.markerTextWidth!;
-          const anchorPoint = paraMarkerAnchorIndent - markerHanging + markerFirstLine;
-          const markerJustification = wordLayout.marker.justification ?? 'left';
-          let currentPos: number;
-          if (markerJustification === 'left') {
-            markerStartPos = anchorPoint;
-            currentPos = markerStartPos + markerTextWidth;
-          } else if (markerJustification === 'right') {
-            markerStartPos = anchorPoint - markerTextWidth;
-            currentPos = anchorPoint;
-          } else {
-            markerStartPos = anchorPoint - markerTextWidth / 2;
-            currentPos = markerStartPos + markerTextWidth;
-          }
-
-          const suffix = wordLayout.marker.suffix ?? 'tab';
-          if (listFirstLineMarkerGeometry && (suffix === 'tab' || suffix === 'space')) {
-            listTabWidth = listFirstLineMarkerGeometry.suffixWidthPx;
-          } else if (suffix === 'tab') {
-            listTabWidth = computeTabWidth(
-              currentPos,
-              markerJustification,
-              wordLayout.tabsPx,
-              markerHanging,
-              markerFirstLine,
-              paraMarkerAnchorIndent,
-            );
-          } else if (suffix === 'space') {
-            listTabWidth = 4;
-          }
-        }
-
-        lines.forEach((line, index) => {
-          const hasExplicitSegmentPositioning = line.segments?.some((segment) => segment.x !== undefined) === true;
-          const hasListFirstLineMarker = index === 0 && !paraContinuesFromPrev && paraMarkerWidth && wordLayout?.marker;
-          const shouldUseResolvedListTextStart =
-            hasListFirstLineMarker && hasExplicitSegmentPositioning && listFirstLineTextStartPx != null;
-
-          const positiveIndentReduction = Math.max(0, paraIndentLeft) + Math.max(0, paraIndentRight);
-          const fallbackAvailableWidth = Math.max(0, fragment.width - positiveIndentReduction);
-          let availableWidthOverride =
-            line.maxWidth != null ? Math.min(line.maxWidth, fallbackAvailableWidth) : fallbackAvailableWidth;
-
-          if (shouldUseResolvedListTextStart) {
-            availableWidthOverride = fragment.width - listFirstLineTextStartPx - Math.max(0, paraIndentRight);
-          }
-
-          // Adjust availableWidth for first-line text indent (hanging indent).
-          const isFirstLine = index === 0 && !paraContinuesFromPrev;
-          const isListFirstLine = Boolean(hasListFirstLineMarker && fragment.markerTextWidth);
-          if (isFirstLine && !isListFirstLine && line.hasExplicitTabStops !== true) {
-            availableWidthOverride = adjustAvailableWidthForTextIndent(
-              availableWidthOverride,
-              firstLineOffset,
-              line.maxWidth,
-            );
-          }
-
-          const isLastLineOfFragment = index === lines.length - 1;
-          const isLastLineOfParagraph = isLastLineOfFragment && !paraContinuesOnNext;
-          const shouldSkipJustifyForLastLine = isLastLineOfParagraph && !paragraphEndsWithLineBreak;
-
-          const lineEl = this.renderLine(
-            block,
-            line,
-            context,
-            availableWidthOverride,
-            fragment.fromLine + index,
-            shouldSkipJustifyForLastLine,
-            expandedRunsForBlock,
-            shouldUseResolvedListTextStart ? listFirstLineTextStartPx : undefined,
-          );
-
-          if (!isListFirstLine) {
-            if (hasExplicitSegmentPositioning) {
-              if (isFirstLine && firstLineOffset !== 0) {
-                const effectiveLeftIndent = paraIndentLeft < 0 ? 0 : paraIndentLeft;
-                const adjustedPadding = effectiveLeftIndent + firstLineOffset;
-                if (adjustedPadding > 0) {
-                  lineEl.style.paddingLeft = `${adjustedPadding}px`;
-                }
-              }
-            } else if (paraIndentLeft && paraIndentLeft > 0) {
-              lineEl.style.paddingLeft = `${paraIndentLeft}px`;
-            } else if (
-              !isFirstLine &&
-              paraIndent?.hanging &&
-              paraIndent.hanging > 0 &&
-              !(paraIndentLeft != null && paraIndentLeft < 0)
-            ) {
-              lineEl.style.paddingLeft = `${paraIndent.hanging}px`;
-            }
-          }
-          if (paraIndentRight && paraIndentRight > 0) {
-            lineEl.style.paddingRight = `${paraIndentRight}px`;
-          }
-          if (!paraContinuesFromPrev && index === 0 && firstLineOffset && !isListFirstLine) {
-            if (!hasExplicitSegmentPositioning) {
-              lineEl.style.textIndent = `${firstLineOffset}px`;
-            }
-          } else if (firstLineOffset && !isListFirstLine) {
-            lineEl.style.textIndent = '0px';
-          }
-
-          if (isListFirstLine) {
-            const marker = wordLayout?.marker;
-            if (!marker) {
-              return;
-            }
-            const firstLineIndent = paraMarkerAnchorIndent - markerHanging + markerFirstLine;
-            if (isRtl) {
-              lineEl.style.paddingRight = `${firstLineIndent}px`;
-            } else {
-              lineEl.style.paddingLeft = `${firstLineIndent}px`;
-            }
-
-            if (!marker.run.vanish) {
-              const markerContainer = createListMarkerElement(
-                this.doc!,
-                marker.markerText ?? '',
-                marker.run,
-                block.sourceAnchor ?? resolvedItem?.sourceAnchor,
-              );
-
-              const markerJustification = marker.justification ?? 'left';
-
-              markerContainer.style.position = 'relative';
-              if (markerJustification === 'right') {
-                markerContainer.style.position = 'absolute';
-                if (isRtl) {
-                  markerContainer.style.right = `${markerStartPos}px`;
-                } else {
-                  markerContainer.style.left = `${markerStartPos}px`;
-                }
-              } else if (markerJustification === 'center') {
-                markerContainer.style.position = 'absolute';
-                if (isRtl) {
-                  markerContainer.style.right = `${markerStartPos - fragment.markerTextWidth! / 2}px`;
-                  lineEl.style.paddingRight =
-                    (parseFloat(lineEl.style.paddingRight || '0') + fragment.markerTextWidth! / 2).toString() + 'px';
-                } else {
-                  markerContainer.style.left = `${markerStartPos - fragment.markerTextWidth! / 2}px`;
-                  lineEl.style.paddingLeft =
-                    parseFloat(lineEl.style.paddingLeft) + fragment.markerTextWidth! / 2 + 'px';
-                }
-              }
-
-              const suffix = marker.suffix ?? 'tab';
-              if (suffix === 'tab') {
-                const tabEl = this.doc!.createElement('span');
-                tabEl.classList.add('superdoc-tab', 'superdoc-marker-suffix-tab');
-                tabEl.innerHTML = '&nbsp;';
-                tabEl.style.display = 'inline-block';
-                tabEl.style.fontSize = `${marker.run.fontSize}px`;
-                tabEl.style.wordSpacing = '0px';
-                tabEl.style.width = `${listTabWidth}px`;
-                lineEl.prepend(tabEl);
-              } else if (suffix === 'space') {
-                const spaceEl = this.doc!.createElement('span');
-                spaceEl.classList.add('superdoc-marker-suffix-space');
-                spaceEl.style.fontSize = `${marker.run.fontSize}px`;
-                spaceEl.style.wordSpacing = '0px';
-                spaceEl.textContent = '\u00A0';
-                lineEl.prepend(spaceEl);
-              }
-              lineEl.prepend(markerContainer);
-            }
-          }
-          this.capturePaintSnapshotLine(lineEl, context, {
-            inTableFragment: false,
-            inTableParagraph: false,
-            sourceAnchor: resolvedItem?.sourceAnchor,
-          });
-          fragmentEl.appendChild(lineEl);
-        });
-      }
-
-      return fragmentEl;
-    } catch (error) {
-      console.error('[DomPainter] Fragment rendering failed:', { fragment, error });
-      return this.createErrorPlaceholder(fragment.blockId, error);
-    }
-  }
-
-  /**
-   * Creates an error placeholder element for failed fragment renders.
-   * Prevents entire paint operation from failing due to single fragment error.
-   *
-   * @param blockId - The block ID that failed to render
-   * @param error - The error that occurred
-   * @returns HTMLElement showing the error
-   */
-  private createErrorPlaceholder(blockId: string, error: unknown): HTMLElement {
-    if (!this.doc) {
-      // Fallback if doc is not available
-      const el = document.createElement('div');
-      el.className = 'render-error-placeholder';
-      el.style.cssText = 'color: red; padding: 4px; border: 1px solid red; background: #fee;';
-      el.textContent = `[Render Error: ${blockId}]`;
-      return el;
-    }
-
-    const el = this.doc.createElement('div');
-    el.className = 'render-error-placeholder';
-    el.style.cssText = 'color: red; padding: 4px; border: 1px solid red; background: #fee;';
-    el.textContent = `[Render Error: ${blockId}]`;
-    if (error instanceof Error) {
-      el.title = error.message;
-    }
-    return el;
-  }
-
-  /**
-   * Renders a drop cap element as a floated span at the start of a paragraph.
-   *
-   * Drop caps are large initial letters that span multiple lines of text.
-   * This method creates a floated element with the drop cap letter styled
-   * according to the descriptor's run properties.
-   *
-   * @param descriptor - The drop cap descriptor with text and styling info
-   * @param measure - The measured dimensions of the drop cap
-   * @returns HTMLElement containing the rendered drop cap
-   */
-  private renderDropCap(descriptor: DropCapDescriptor, measure: ParagraphMeasure['dropCap']): HTMLElement {
-    const doc = this.doc!;
-    const { run, mode } = descriptor;
-
-    const dropCapEl = doc.createElement('span');
-    dropCapEl.classList.add('superdoc-drop-cap');
-    dropCapEl.textContent = run.text;
-
-    // Apply styling from the run
-    dropCapEl.style.fontFamily = run.fontFamily;
-    dropCapEl.style.fontSize = `${run.fontSize}px`;
-    if (run.bold) {
-      dropCapEl.style.fontWeight = 'bold';
-    }
-    if (run.italic) {
-      dropCapEl.style.fontStyle = 'italic';
-    }
-    if (run.color) {
-      dropCapEl.style.color = run.color;
-    }
-
-    // Position the drop cap based on mode
-    if (mode === 'drop') {
-      // Float left so text wraps around it
-      dropCapEl.style.float = 'left';
-      dropCapEl.style.marginRight = '4px'; // Small gap between drop cap and text
-      dropCapEl.style.lineHeight = '1'; // Prevent extra line height from affecting layout
-    } else if (mode === 'margin') {
-      // Position in the margin (left of the text area)
-      dropCapEl.style.position = 'absolute';
-      dropCapEl.style.left = '0';
-      dropCapEl.style.lineHeight = '1';
-    }
-
-    // Apply vertical position offset if specified
-    if (run.position && run.position !== 0) {
-      dropCapEl.style.position = dropCapEl.style.position || 'relative';
-      dropCapEl.style.top = `${run.position}px`;
-    }
-
-    // Set dimensions from measurement
-    if (measure) {
-      dropCapEl.style.width = `${measure.width}px`;
-      dropCapEl.style.height = `${measure.height}px`;
-    }
-
-    return dropCapEl;
-  }
-
-  private renderImageFragment(
-    fragment: ImageFragment,
-    context: FragmentRenderContext,
-    resolvedItem?: ResolvedImageItem,
-  ): HTMLElement {
-    try {
-      // Pre-extracted block from the resolved item.
-      if (resolvedItem?.block?.kind !== 'image') {
-        throw new Error(`DomPainter: missing resolved image block for fragment ${fragment.blockId}`);
-      }
-      const block = resolvedItem.block as ImageBlock;
-
-      if (!this.doc) {
-        throw new Error('DomPainter: document is not available');
-      }
-
-      const fragmentEl = this.doc.createElement('div');
-      fragmentEl.classList.add(CLASS_NAMES.fragment, DOM_CLASS_NAMES.IMAGE_FRAGMENT);
-      applyStyles(fragmentEl, fragmentStyles);
-      if (resolvedItem) {
-        this.applyResolvedFragmentFrame(fragmentEl, resolvedItem, fragment, context.section);
-      } else {
-        this.applyFragmentFrame(fragmentEl, fragment, context.section);
-        fragmentEl.style.height = `${fragment.height}px`;
-        this.applyFragmentWrapperZIndex(fragmentEl, fragment);
-      }
-      this.applySdtDataset(fragmentEl, block.attrs?.sdt);
-      this.applyContainerSdtDataset(fragmentEl, block.attrs?.containerSdt);
-
-      // Add block ID for PM transaction targeting
-      if (block.id) {
-        fragmentEl.setAttribute('data-sd-block-id', block.id);
-      }
-
-      // Add PM position markers for transaction targeting
-      const imgPmStart = resolvedItem?.pmStart;
-      if (imgPmStart != null) {
-        fragmentEl.dataset.pmStart = String(imgPmStart);
-      }
-      const imgPmEnd = resolvedItem?.pmEnd;
-      if (imgPmEnd != null) {
-        fragmentEl.dataset.pmEnd = String(imgPmEnd);
+      const imgPmEnd = resolvedItem?.pmEnd;
+      if (imgPmEnd != null) {
+        fragmentEl.dataset.pmEnd = String(imgPmEnd);
       }
 
       // Add metadata for interactive image resizing (skip watermarks - they should not be interactive)
@@ -4943,1921 +3909,101 @@ export class DomPainter {
     }
   }
 
-  /**
-   * Extract link data from a run, including sanitization.
-   * @returns Sanitized link data or null if invalid/missing
-   */
-  private extractLinkData(run: Run): LinkRenderData | null {
-    if (run.kind === 'tab' || run.kind === 'image' || run.kind === 'lineBreak' || run.kind === 'math') {
-      return null;
-    }
-    const link = (run as TextRun).link as FlowRunLink | undefined;
-    if (!link) {
-      return null;
-    }
-    return this.buildLinkRenderData(link);
-  }
-
-  private buildLinkRenderData(link: FlowRunLink): LinkRenderData | null {
-    const dataset = buildLinkDataset(link);
-    const sanitized = typeof link.href === 'string' ? sanitizeHref(link.href) : null;
-    const anchorHref = normalizeAnchor(link.anchor ?? link.name ?? '');
-    let href: string | null = sanitized?.href ?? anchorHref;
-    if (link.version === 2) {
-      href = appendDocLocation(href, link.docLocation ?? null);
-    }
-
-    // Track metrics: successful sanitization
-    if (sanitized) {
-      linkMetrics.sanitized++;
-
-      // Check for homograph if hostname has non-ASCII (in raw href before URL parsing)
-      if (sanitized.href && typeof link.href === 'string') {
-        const hostStartIndex = link.href.indexOf('://') + 3;
-        let hostEndIndex = link.href.indexOf('/', hostStartIndex);
-        if (hostEndIndex === -1) {
-          hostEndIndex = link.href.indexOf('?', hostStartIndex);
-        }
-        if (hostEndIndex === -1) {
-          hostEndIndex = link.href.indexOf('#', hostStartIndex);
-        }
-        if (hostEndIndex === -1) {
-          hostEndIndex = link.href.length;
-        }
-        const rawHostname = link.href.slice(hostStartIndex, hostEndIndex);
-        if (rawHostname && /[^\x00-\x7F]/.test(rawHostname)) {
-          linkMetrics.homographWarnings++;
-        }
-      }
-    }
-
-    // Defense-in-depth: Enforce maximum URL length even if sanitization was bypassed
-    if (sanitized && sanitized.href.length > MAX_HREF_LENGTH) {
-      console.warn(`[DomPainter] Rejecting URL exceeding ${MAX_HREF_LENGTH} characters`);
-      linkMetrics.blocked++;
-      return { blocked: true, dataset: { [LINK_DATASET_KEYS.blocked]: 'true' } };
-    }
-
-    if (!href) {
-      if (typeof link.href === 'string' && link.href.trim()) {
-        dataset[LINK_DATASET_KEYS.blocked] = 'true';
-        console.warn(`[DomPainter] Blocked potentially unsafe URL: ${link.href.slice(0, 50)}`);
-        linkMetrics.blocked++;
-        // Track invalid protocol if sanitized was null
-        if (!sanitized) {
-          linkMetrics.invalidProtocol++;
-        }
-        return { blocked: true, dataset };
-      }
-      // Check if there was an anchor/name that failed validation
-      const hadAnchor = (link.anchor ?? link.name ?? null) != null;
-      if (Object.keys(dataset).length > 0 || hadAnchor) {
-        dataset[LINK_DATASET_KEYS.blocked] = 'true';
-        linkMetrics.blocked++;
-        return { blocked: true, dataset };
-      }
-      return null;
+  private renderLine(
+    block: ParagraphBlock,
+    line: Line,
+    context: FragmentRenderContext,
+    availableWidthOverride?: number,
+    lineIndex?: number,
+    skipJustify?: boolean,
+    preExpandedRuns?: Run[],
+    resolvedListTextStartPx?: number,
+    indentOffsetOverride?: number,
+    paragraphMarkLeftOffsetOverride?: number,
+  ): HTMLElement {
+    if (!this.doc) {
+      throw new Error('DomPainter: document is not available');
     }
 
-    const target = resolveLinkTarget(link, sanitized);
-    const rel = resolveLinkRel(link, target);
-    const tooltipSource = link.version === 2 ? (link.tooltip ?? link.title) : link.title;
-    const tooltipResult = tooltipSource ? encodeTooltip(tooltipSource) : null;
-    // Use raw text - browser will escape when setting attribute
-    const tooltip = tooltipResult?.text ?? null;
+    return renderRunLine({
+      block,
+      line,
+      context,
+      availableWidthOverride,
+      lineIndex,
+      skipJustify,
+      preExpandedRuns,
+      resolvedListTextStartPx,
+      indentOffsetOverride,
+      paragraphMarkLeftOffsetOverride,
+      runContext: this.createRunRenderContext(),
+    });
+  }
 
-    // Signal when tooltip is truncated
-    if (tooltipResult?.wasTruncated) {
-      dataset[LINK_DATASET_KEYS.truncated] = 'true';
+  private createRunRenderContext(): RunRenderContext {
+    if (!this.doc) {
+      throw new Error('DomPainter: document is not available');
     }
 
     return {
-      href,
-      target,
-      rel,
-      tooltip,
-      dataset: Object.keys(dataset).length > 0 ? dataset : undefined,
-      blocked: false,
+      doc: this.doc,
+      layoutEpoch: this.layoutEpoch,
+      showFormattingMarks: this.showFormattingMarks,
+      pendingTooltips: this.pendingTooltips,
+      getNextLinkId: () => `superdoc-link-${++this.linkIdCounter}`,
+      applySdtDataset: this.applySdtDataset.bind(this),
+      buildImageHyperlinkAnchor: this.buildImageHyperlinkAnchor.bind(
+        this,
+      ) as RunRenderContext['buildImageHyperlinkAnchor'],
+      resolveTrackedChangesConfig,
+      applyTrackedChangeDecorations,
+      resolveRunSdtId: this.resolveRunSdtId.bind(this),
+      createInlineSdtWrapper: this.createInlineSdtWrapper.bind(this),
+      syncInlineSdtWrapperTypography: this.syncInlineSdtWrapperTypography.bind(this),
+      expandSdtWrapperPmRange: this.expandSdtWrapperPmRange.bind(this),
     };
   }
 
   /**
-   * Apply tooltip accessibility using aria-describedby for better screen reader support.
-   * Creates a visually-hidden element containing the tooltip text and links it to the anchor.
+   * Updates an existing fragment element's position and dimensions in place.
+   * Used during incremental updates to efficiently reposition fragments without full re-render.
    *
-   * @param elem - The anchor element to enhance
-   * @param tooltip - The tooltip text to make accessible
-   * @returns The unique ID generated for this link
+   * @param el - The HTMLElement representing the fragment to update
+   * @param fragment - The fragment data containing updated position and dimensions
+   * @param section - The document section ('body', 'header', 'footer') containing this fragment.
+   *                  Affects PM position validation - only body sections validate PM positions.
+   *                  If undefined, defaults to 'body' section behavior.
    */
-  private applyTooltipAccessibility(elem: HTMLAnchorElement, tooltip: string | null): string {
-    const linkId = `superdoc-link-${++this.linkIdCounter}`;
-    elem.id = linkId;
-
-    if (!tooltip || !this.doc) return linkId;
-
-    // Keep title attribute for visual tooltip (browser default)
-    elem.setAttribute('title', tooltip);
-
-    // Create visually-hidden element for screen readers
-    const descId = `link-desc-${linkId}`;
-    const descElem = this.doc.createElement('span');
-    descElem.id = descId;
-    descElem.className = 'superdoc-sr-only'; // Screen reader only class
-    descElem.textContent = tooltip;
-
-    // Insert description element after the link
-    // Note: We'll insert it as a sibling in the parent line element
-    if (elem.parentElement) {
-      elem.parentElement.appendChild(descElem);
-      // Reference from link only if we successfully added the description element
-      elem.setAttribute('aria-describedby', descId);
-    } else {
-      // Element not yet in DOM - accessibility feature will degrade gracefully
-      // The title attribute will still provide tooltip functionality
-      console.warn('[DomPainter] Unable to add aria-describedby for tooltip (element not in DOM)');
-    }
-
-    return linkId;
-  }
+  private updateFragmentElement(
+    el: HTMLElement,
+    fragment: Fragment,
+    section?: 'body' | 'header' | 'footer',
+    resolvedItem?: ResolvedPaintItem,
+  ): void {
+    // Narrow to fragment-kind resolved items (excludes ResolvedGroupItem)
+    const fragmentItem = resolvedItem?.kind === 'fragment' ? resolvedItem : undefined;
 
-  /**
-   * Enhance accessibility of a link element with ARIA labels and attributes.
-   * Adds descriptive ARIA labels for ambiguous text and target=_blank links (WCAG 2.4.4).
-   *
-   * @param elem - The anchor element to enhance
-   * @param linkData - Link metadata including href and target
-   * @param textContent - The visible link text to analyze for ambiguity
-   */
-  private enhanceAccessibility(elem: HTMLAnchorElement, linkData: LinkRenderData, textContent: string): void {
-    if (!linkData.href) return;
-
-    const trimmedText = textContent.trim().toLowerCase();
-
-    // Check if link text is ambiguous (e.g., "click here", "read more")
-    if (AMBIGUOUS_LINK_PATTERNS.test(trimmedText)) {
-      try {
-        const url = new URL(linkData.href);
-        const hostname = url.hostname.replace(/^www\./, '');
-
-        // Generate descriptive aria-label for screen readers
-        const ariaLabel = `${textContent.trim()} - ${hostname}`;
-        elem.setAttribute('aria-label', ariaLabel);
-        return; // Exit early since we've set the label
-      } catch {
-        // If URL parsing fails, add generic label
-        elem.setAttribute('aria-label', `${textContent.trim()} - external link`);
-        return;
+    if (fragmentItem) {
+      this.applyResolvedFragmentFrame(el, fragmentItem, fragment, section);
+    } else {
+      this.applyFragmentFrame(el, fragment, section);
+      if (fragment.kind === 'image' || fragment.kind === 'drawing') {
+        el.style.height = `${fragment.height}px`;
+        this.applyFragmentWrapperZIndex(el, fragment);
       }
     }
-
-    // Add aria-label for external links without one (indicates new tab)
-    if (linkData.target === '_blank' && !elem.getAttribute('aria-label')) {
-      elem.setAttribute('aria-label', `${textContent.trim()} (opens in new tab)`);
-    }
   }
 
   /**
-   * Apply link attributes to an anchor element.
-   */
-  private applyLinkAttributes(elem: HTMLAnchorElement, linkData: LinkRenderData): void {
-    if (!linkData.href) return;
-    elem.href = linkData.href;
-    elem.classList.add('superdoc-link');
-
-    if (linkData.target) {
-      elem.target = linkData.target;
-    } else {
-      elem.removeAttribute('target');
-    }
-    if (linkData.rel) {
-      elem.rel = linkData.rel;
-    } else {
-      elem.removeAttribute('rel');
-    }
-    if (linkData.tooltip) {
-      elem.title = linkData.tooltip;
-    } else {
-      elem.removeAttribute('title');
-    }
-
-    // Explicitly set role for clarity (though <a> with href has implicit role="link")
-    elem.setAttribute('role', 'link');
-
-    // Ensure link is keyboard accessible (should be default for <a>, but verify)
-    elem.setAttribute('tabindex', '0');
-
-    // Note: Click handling is done via event delegation in EditorInputManager,
-    // not per-element handlers. This avoids duplicate event dispatching.
-  }
-
-  /**
-   * Render a single run as an HTML element (span or anchor).
-   */
-  /**
-   * Type guard to check if a run is an image run.
-   */
-  private isImageRun(run: Run): run is ImageRun {
-    return run.kind === 'image';
-  }
-
-  /**
-   * Type guard to check if a run is a line break run.
-   */
-  private isLineBreakRun(run: Run): run is import('@superdoc/contracts').LineBreakRun {
-    return run.kind === 'lineBreak';
-  }
-
-  /**
-   * Type guard to check if a run is a break run.
-   */
-  private isBreakRun(run: Run): run is import('@superdoc/contracts').BreakRun {
-    return run.kind === 'break';
-  }
-
-  /**
-   * Type guard to check if a run is a field annotation run.
-   */
-  private isFieldAnnotationRun(run: Run): run is FieldAnnotationRun {
-    return run.kind === 'fieldAnnotation';
-  }
-
-  /**
-   * Type guard to check if a run is a math run.
-   */
-  private isMathRun(run: Run): run is MathRun {
-    return run.kind === 'math';
-  }
-
-  /**
-   * Render a math run as a MathML element wrapped in a span.
-   * Follows the same pattern as renderImageRun — sets explicit dimensions.
-   */
-  private renderMathRun(run: MathRun): HTMLElement | null {
-    if (!this.doc) return null;
-    const wrapper = this.doc.createElement('span');
-    wrapper.className = 'sd-math';
-    wrapper.style.display = 'inline-block';
-    wrapper.style.verticalAlign = 'middle';
-    // Let browser auto-size to MathML content; estimated dimensions are for layout only
-    wrapper.style.minWidth = `${run.width}px`;
-    wrapper.style.minHeight = `${run.height}px`;
-    // Restore font-size so the plain-text fallback renders at a reasonable size
-    // (the line container sets fontSize: 0 to eliminate the CSS strut). MathML
-    // has its own internal scaling, so this only matters for the textContent
-    // fallback path. run.height would make tall expressions (fractions, equation
-    // arrays) render at 80–100px — use the browser default instead.
-    wrapper.style.fontSize = BROWSER_DEFAULT_FONT_SIZE;
-    wrapper.dataset.layoutEpoch = String(this.layoutEpoch ?? 0);
-
-    const mathEl = convertOmmlToMathml(run.ommlJson, this.doc);
-    if (mathEl) {
-      wrapper.appendChild(mathEl);
-    } else {
-      // Fallback: render plain text content
-      wrapper.textContent = run.textContent || '';
-    }
-
-    if (run.pmStart != null) wrapper.dataset.pmStart = String(run.pmStart);
-    if (run.pmEnd != null) wrapper.dataset.pmEnd = String(run.pmEnd);
-
-    return wrapper;
-  }
-
-  private setTextContentWithFormattingSpaceMarks(element: HTMLElement, text: string): void {
-    if (!this.showFormattingMarks || !text.includes(' ') || !this.doc) {
-      element.textContent = text;
-      return;
-    }
-
-    element.textContent = '';
-    let chunkStart = 0;
-    for (let index = 0; index < text.length; index += 1) {
-      if (text[index] !== ' ') continue;
-
-      if (index > chunkStart) {
-        element.appendChild(this.doc.createTextNode(text.slice(chunkStart, index)));
-      }
-
-      const space = this.doc.createElement('span');
-      space.classList.add('superdoc-formatting-space-mark');
-      space.textContent = ' ';
-      element.appendChild(space);
-      chunkStart = index + 1;
-    }
-
-    if (chunkStart < text.length) {
-      element.appendChild(this.doc.createTextNode(text.slice(chunkStart)));
-    }
-  }
-
-  private findLastTextRun(runs: Run[]): { run: TextRun; index: number } | null {
-    for (let index = runs.length - 1; index >= 0; index -= 1) {
-      const run = runs[index];
-      if (run && (run.kind === 'text' || run.kind === undefined) && 'text' in run) {
-        return { run: run as TextRun, index };
-      }
-    }
-    return null;
-  }
-
-  private appendFormattingParagraphMark(
-    lineEl: HTMLElement,
-    line: Line,
-    runs: Run[],
-    leftOffsetPx: number,
-    availableWidth: number,
-    hasExplicitPositioning: boolean,
-  ): void {
-    if (!this.showFormattingMarks || !this.doc) return;
-    const lastRun = runs.length > 0 ? runs[runs.length - 1] : null;
-    if (lastRun) {
-      const lastRunIndex = runs.length - 1;
-      if (line.toRun < lastRunIndex) return;
-      if (
-        line.toRun === lastRunIndex &&
-        (lastRun.kind === 'text' || lastRun.kind === undefined) &&
-        'text' in lastRun &&
-        line.toChar < lastRun.text.length
-      ) {
-        return;
-      }
-    }
-
-    const lastTextRun = this.findLastTextRun(runs);
-
-    const mark = this.doc.createElement('span');
-    mark.classList.add('superdoc-formatting-paragraph-mark');
-    mark.setAttribute('aria-hidden', 'true');
-    mark.textContent = '¶';
-
-    const run = lastTextRun?.run;
-    if (run) {
-      if (run.fontFamily) {
-        mark.style.fontFamily = toCssFontFamily(run.fontFamily) ?? run.fontFamily;
-      }
-      if (typeof run.fontSize === 'number') {
-        mark.style.fontSize = `${run.fontSize}px`;
-      }
-      if (run.bold) {
-        mark.style.fontWeight = 'bold';
-      }
-      if (run.italic) {
-        mark.style.fontStyle = 'italic';
-      }
-      if (run.letterSpacing != null) {
-        mark.style.letterSpacing = `${run.letterSpacing}px`;
-      }
-    }
-    mark.style.lineHeight = `${line.lineHeight}px`;
-
-    const lineWidth = line.naturalWidth ?? line.width ?? 0;
-    const alignmentSlack = Math.max(0, availableWidth - lineWidth);
-    const textAlign = lineEl.style.textAlign;
-    const alignmentOffset =
-      !hasExplicitPositioning && textAlign === 'center'
-        ? alignmentSlack / 2
-        : !hasExplicitPositioning && textAlign === 'right'
-          ? alignmentSlack
-          : 0;
-    const isRtl = lineEl.dir === 'rtl' || lineEl.style.direction === 'rtl';
-    const visualTextEndOffset = isRtl ? alignmentOffset : alignmentOffset + lineWidth;
-    mark.style.left = `${Math.max(0, leftOffsetPx + visualTextEndOffset)}px`;
-    lineEl.appendChild(mark);
-  }
-
-  private resolveResolvedListParagraphMarkOffset(
-    marker: ResolvedListMarkerItem | undefined,
-    markerTextWidth: number | undefined,
-    fallbackOffset: number | undefined,
-  ): number | undefined {
-    if (typeof fallbackOffset === 'number' && Number.isFinite(fallbackOffset) && fallbackOffset > 0) {
-      return fallbackOffset;
-    }
-    if (!marker || marker.vanish) {
-      return fallbackOffset;
-    }
-
-    const paddingLeft = Number.isFinite(marker.firstLinePaddingLeftPx) ? marker.firstLinePaddingLeftPx : 0;
-    const suffixWidth = marker.suffix !== 'nothing' && Number.isFinite(marker.suffixWidthPx) ? marker.suffixWidthPx : 0;
-
-    if (marker.justification === 'left') {
-      const markerWidth =
-        typeof markerTextWidth === 'number' && Number.isFinite(markerTextWidth) && markerTextWidth > 0
-          ? markerTextWidth
-          : 0;
-      return paddingLeft + markerWidth + suffixWidth;
-    }
-
-    const centerPadding =
-      marker.justification === 'center' && Number.isFinite(marker.centerPaddingAdjustPx)
-        ? (marker.centerPaddingAdjustPx ?? 0)
-        : 0;
-    return paddingLeft + centerPadding + suffixWidth;
-  }
-
-  private renderRun(
-    run: Run,
-    context: FragmentRenderContext,
-    trackedConfig?: TrackedChangesRenderConfig,
-  ): HTMLElement | null {
-    // Handle ImageRun
-    if (this.isImageRun(run)) {
-      return this.renderImageRun(run);
-    }
-
-    // Handle FieldAnnotationRun - inline pill-styled form fields
-    if (this.isFieldAnnotationRun(run)) {
-      return this.renderFieldAnnotationRun(run);
-    }
-
-    // Handle MathRun - inline math rendered as MathML
-    if (this.isMathRun(run)) {
-      return this.renderMathRun(run);
-    }
-
-    // Handle LineBreakRun - line breaks are handled by the measurer creating new lines,
-    // so we don't render anything for them in the DOM. They exist in the run array for
-    // proper PM position tracking but don't need visual representation.
-    if (this.isLineBreakRun(run)) {
-      return null;
-    }
-
-    // Handle BreakRun - similar to LineBreakRun, breaks are handled by the measurer
-    if (this.isBreakRun(run)) {
-      return null;
-    }
-
-    // Handle TextRun
-    if (!('text' in run) || !run.text || !this.doc) {
-      return null;
-    }
-
-    const linkData = this.extractLinkData(run);
-    const isActiveLink = !!(linkData && !linkData.blocked && linkData.href);
-    const elem = isActiveLink ? this.doc.createElement('a') : this.doc.createElement('span');
-    const text = resolveRunText(run, context);
-    const textRun = run as TextRun;
-    const effectiveText =
-      textRun.bidi?.rtl === true && typeof text === 'string' ? normalizeRtlDateTokenForWordParity(text) : text;
-    this.setTextContentWithFormattingSpaceMarks(elem, effectiveText);
-
-    if (linkData?.dataset) {
-      applyLinkDataset(elem, linkData.dataset);
-    }
-    if (linkData?.blocked) {
-      elem.dataset[LINK_DATASET_KEYS.blocked] = 'true';
-      // For blocked links rendered as spans, set appropriate role
-      elem.setAttribute('role', 'text');
-      elem.setAttribute('aria-label', 'Invalid link - not clickable');
-    }
-    if (isActiveLink && linkData) {
-      this.applyLinkAttributes(elem as HTMLAnchorElement, linkData);
-      // Enhance accessibility with ARIA labels for ambiguous text
-      this.enhanceAccessibility(elem as HTMLAnchorElement, linkData, text);
-
-      // Note: Tooltip accessibility (aria-describedby) will be applied after
-      // the element is added to the DOM in renderLine, since it creates a sibling element
-      // Store tooltip for later processing
-      if (linkData.tooltip) {
-        this.pendingTooltips.set(elem, linkData.tooltip);
-      }
-    }
-
-    // Pass isLink flag to skip applying inline color/decoration styles for links
-    applyRunStyles(elem as HTMLElement, run, isActiveLink);
-    // SD-3098 Word-parity: rtl-tagged runs get dir="rtl" so per-run bidi is isolated;
-    // non-rtl date-like runs in RTL context get dir="ltr" to prevent separator drift.
-    if (textRun.bidi?.rtl === true) {
-      elem.setAttribute('dir', 'rtl');
-    } else if (typeof textRun.text === 'string' && RTL_DATE_LIKE_TOKEN_RE.test(textRun.text)) {
-      elem.setAttribute('dir', 'ltr');
-    }
-    const commentAnnotations = textRun.comments;
-    const hasAnyComment = !!commentAnnotations?.length;
-    // Comment highlight styles are applied post-paint by CommentHighlightDecorator (super-editor).
-    // The painter only stamps metadata attributes below.
-    // We still need to preserve the comment ids
-    if (hasAnyComment) {
-      elem.dataset.commentIds = commentAnnotations.map((c) => c.commentId).join(',');
-      if (commentAnnotations.some((c) => c.internal)) {
-        elem.dataset.commentInternal = 'true';
-      }
-      // Per-comment internal flag so the editor-side decorator can pick the right color
-      const internalIds = commentAnnotations.filter((c) => c.internal).map((c) => c.commentId);
-      if (internalIds.length > 0) {
-        elem.dataset.commentInternalIds = internalIds.join(',');
-      }
-      // importedId aliases so the decorator can match by either ID
-      const importedEntries = commentAnnotations
-        .filter((c) => c.importedId && c.importedId !== c.commentId)
-        .map((c) => `${c.importedId}=${c.commentId}`);
-      if (importedEntries.length > 0) {
-        elem.dataset.commentImportedIds = importedEntries.join(',');
-      }
-      elem.classList.add('superdoc-comment-highlight');
-    }
-    // Ensure text renders above tab leaders (leaders are z-index: 0)
-    elem.style.zIndex = '1';
-    applyRunDataAttributes(elem as HTMLElement, (run as TextRun).dataAttrs);
-
-    // SD-2454: bookmark marker runs carry a data-bookmark-name attribute.
-    // Surface the bookmark name as a native `title` tooltip so hovering the
-    // opening bracket identifies which bookmark is being marked.
-    const bookmarkName = (run as TextRun).dataAttrs?.['data-bookmark-name'];
-    if (bookmarkName) {
-      (elem as HTMLElement).title = bookmarkName;
-    }
-
-    // Assert PM positions are present for cursor fallback
-    assertPmPositions(run, 'paragraph text run');
-
-    if (run.pmStart != null) elem.dataset.pmStart = String(run.pmStart);
-    if (run.pmEnd != null) elem.dataset.pmEnd = String(run.pmEnd);
-    elem.dataset.layoutEpoch = String(this.layoutEpoch);
-    if (trackedConfig) {
-      this.applyTrackedChangeDecorations(elem, run, trackedConfig);
-    }
-    this.applySdtDataset(elem, (run as TextRun).sdt);
-
-    return elem;
-  }
-
-  /**
-   * Renders an ImageRun as an inline <img> element.
-   *
-   * SECURITY NOTES:
-   * - Data URLs are validated against VALID_IMAGE_DATA_URL regex to ensure proper format
-   * - Size limit (MAX_DATA_URL_LENGTH) prevents DoS attacks from extremely large images
-   * - Only allows safe image MIME types (png, jpeg, gif, etc.) with base64 encoding
-   * - Non-data URLs are sanitized through sanitizeUrl to prevent XSS
-   *
-   * METADATA ATTRIBUTE:
-   * - Adds `data-image-metadata` attribute to enable interactive resizing via ImageResizeOverlay
-   * - Metadata includes: originalWidth, originalHeight, aspectRatio, min/max dimensions
-   * - Only added when run.width > 0 && run.height > 0 to prevent invalid metadata
-   * - Max dimensions: 3x original size or 1000px (whichever is larger)
-   * - Min dimensions: 20px to ensure visibility and interactivity
-   *
-   * @param run - The ImageRun to render containing image source, dimensions, and spacing
-   * @returns HTMLElement (img) or null if src is missing or invalid
-   *
-   * @example
-   * ```typescript
-   * // Valid data URL with metadata
-   * renderImageRun({ kind: 'image', src: 'data:image/png;base64,iVBORw...', width: 100, height: 100 })
-   * // Returns: <img> element with data-image-metadata attribute
-   *
-   * // Invalid dimensions - no metadata
-   * renderImageRun({ kind: 'image', src: 'data:image/png;base64,iVBORw...', width: 0, height: 0 })
-   * // Returns: <img> element WITHOUT data-image-metadata attribute
-   *
-   * // Invalid MIME type
-   * renderImageRun({ kind: 'image', src: 'data:text/html;base64,PHNjcmlwdD4...', width: 100, height: 100 })
-   * // Returns: null (blocked)
-   *
-   * // HTTP URL
-   * renderImageRun({ kind: 'image', src: 'https://example.com/image.png', width: 100, height: 100 })
-   * // Returns: <img> element (after sanitization) with data-image-metadata attribute
-   * ```
-   */
-  private renderImageRun(run: ImageRun): HTMLElement | null {
-    if (!this.doc || !run.src) {
-      return null;
-    }
-
-    const hasClipPath = typeof run.clipPath === 'string' && run.clipPath.trim().length > 0;
-
-    // Create img element
-    const img = this.doc.createElement('img');
-    img.classList.add(DOM_CLASS_NAMES.INLINE_IMAGE);
-
-    // Set source - validate data URLs with strict format and size checks
-    // Note: data: URLs are blocked by sanitizeUrl for hyperlinks (XSS risk),
-    // but are safe for <img> elements when properly validated
-    const isDataUrl = typeof run.src === 'string' && run.src.startsWith('data:');
-    if (isDataUrl) {
-      // SECURITY: Validate data URL format and size
-      if (run.src.length > MAX_DATA_URL_LENGTH) {
-        // Reject data URLs that are too large (DoS prevention)
-        return null;
-      }
-      if (!VALID_IMAGE_DATA_URL.test(run.src)) {
-        // Reject data URLs with invalid MIME types or encoding
-        return null;
-      }
-      img.src = run.src;
-    } else {
-      const sanitized = sanitizeUrl(run.src);
-      if (sanitized) {
-        img.src = sanitized;
-      } else {
-        // Invalid URL - return null
-        return null;
-      }
-    }
-
-    // Set dimensions: when we have clipPath we put img in a wrapper that has the layout size and overflow:hidden; img fills wrapper so cropped portion stays within after resize
-    if (!hasClipPath) {
-      img.width = run.width;
-      img.height = run.height;
-    } else {
-      Object.assign(img.style, {
-        width: '100%',
-        height: '100%',
-        maxWidth: '100%',
-        maxHeight: '100%',
-        boxSizing: 'border-box',
-        minWidth: '0',
-        minHeight: '0',
-      });
-    }
-    applyImageClipPath(img, run.clipPath);
-
-    // Add metadata for interactive image resizing (inline images)
-    // Only add metadata if dimensions are valid (positive, non-zero values)
-    if (run.width > 0 && run.height > 0) {
-      // This enables the ImageResizeOverlay to work with inline images
-      const aspectRatio = run.width / run.height;
-      const inlineImageMetadata = {
-        originalWidth: run.width,
-        originalHeight: run.height,
-        // Max dimensions: MAX_RESIZE_MULTIPLIER x original size or FALLBACK_MAX_DIMENSION, whichever is larger
-        // This provides generous constraints while preventing excessive scaling
-        maxWidth: Math.max(run.width * MAX_RESIZE_MULTIPLIER, FALLBACK_MAX_DIMENSION),
-        maxHeight: Math.max(run.height * MAX_RESIZE_MULTIPLIER, FALLBACK_MAX_DIMENSION),
-        aspectRatio,
-        // Min dimensions: MIN_IMAGE_DIMENSION to ensure images remain visible and interactive
-        minWidth: MIN_IMAGE_DIMENSION,
-        minHeight: MIN_IMAGE_DIMENSION,
-      };
-      img.setAttribute('data-image-metadata', JSON.stringify(inlineImageMetadata));
-    }
-
-    // Set alt text (required for accessibility)
-    img.alt = run.alt ?? '';
-
-    // Set title if present
-    if (run.title) {
-      img.title = run.title;
-    }
-
-    // Apply inline-block display
-    img.style.display = 'inline-block';
-
-    // When we use a wrapper (clipPath + positive dimensions), margins/verticalAlign/position/zIndex go on the wrapper only.
-    // When we don't use a wrapper (no clipPath, or clipPath with width/height 0), apply them on the img so layout is correct.
-    const useWrapper = hasClipPath && run.width > 0 && run.height > 0;
-    if (!useWrapper) {
-      // Apply vertical alignment (bottom-aligned to text baseline)
-      img.style.verticalAlign = run.verticalAlign ?? 'bottom';
-
-      // Apply spacing as CSS margins
-      if (run.distTop) {
-        img.style.marginTop = `${run.distTop}px`;
-      }
-      if (run.distBottom) {
-        img.style.marginBottom = `${run.distBottom}px`;
-      }
-      if (run.distLeft) {
-        img.style.marginLeft = `${run.distLeft}px`;
-      }
-      if (run.distRight) {
-        img.style.marginRight = `${run.distRight}px`;
-      }
-
-      // Position and z-index on the image only (not the line) so resize overlay can stack above.
-      img.style.position = 'relative';
-      img.style.zIndex = '1';
-      img.style.maxWidth = '100%';
-    }
-
-    // Apply rotation and flip transforms from OOXML a:xfrm
-    const transforms: string[] = [];
-
-    // Calculate translation offset to keep top-left corner fixed when rotating
-    if (run.rotation != null && run.rotation !== 0) {
-      const angleRad = (run.rotation * Math.PI) / 180;
-      const w = run.width;
-      const h = run.height;
-
-      // Calculate how much the top-left corner moves when rotating around center
-      // Top-left corner starts at (0, 0) in element space
-      // Center is at (w/2, h/2)
-      // After rotation, we need to translate to keep top-left at (0, 0)
-      const cosA = Math.cos(angleRad);
-      const sinA = Math.sin(angleRad);
-
-      // Position of top-left corner after rotation (relative to original top-left)
-      const newTopLeftX = (w / 2) * (1 - cosA) + (h / 2) * sinA;
-      const newTopLeftY = (w / 2) * sinA + (h / 2) * (1 - cosA);
-
-      transforms.push(`translate(${-newTopLeftX}px, ${-newTopLeftY}px)`);
-      transforms.push(`rotate(${run.rotation}deg)`);
-    }
-    if (run.flipH) {
-      transforms.push('scaleX(-1)');
-    }
-    if (run.flipV) {
-      transforms.push('scaleY(-1)');
-    }
-    if (transforms.length > 0) {
-      img.style.transform = transforms.join(' ');
-      img.style.transformOrigin = 'center';
-    }
-
-    const filters = buildImageFilters(run);
-    if (filters.length > 0) {
-      img.style.filter = filters.join(' ');
-    }
-
-    // Assert PM positions are present for cursor fallback
-    assertPmPositions(run, 'inline image run');
-
-    // When clipPath is set, scale makes the img paint outside its box;
-    // wrap in a clip container so only the cropped portion occupies space in the document.
-    // Wrapper size is the only layout box (position calculation uses run.width/run.height).
-    // PM position attributes go on the wrapper only so selection highlight and selection rects use the wrapper, not the scaled img.
-    // Skip wrapper when width or height is 0 (no layout box); img already has margins/verticalAlign/position/zIndex from above.
-    if (useWrapper) {
-      const wrapper = this.doc.createElement('span');
-      wrapper.classList.add(DOM_CLASS_NAMES.INLINE_IMAGE_CLIP_WRAPPER);
-      wrapper.style.display = 'inline-block';
-      wrapper.style.width = `${run.width}px`;
-      wrapper.style.height = `${run.height}px`;
-      wrapper.style.boxSizing = 'border-box';
-      wrapper.style.overflow = 'hidden';
-      wrapper.style.verticalAlign = run.verticalAlign ?? 'bottom';
-      if (run.distTop) wrapper.style.marginTop = `${run.distTop}px`;
-      if (run.distBottom) wrapper.style.marginBottom = `${run.distBottom}px`;
-      if (run.distLeft) wrapper.style.marginLeft = `${run.distLeft}px`;
-      if (run.distRight) wrapper.style.marginRight = `${run.distRight}px`;
-      wrapper.style.position = 'relative';
-      wrapper.style.zIndex = '1';
-      if (run.pmStart != null) wrapper.dataset.pmStart = String(run.pmStart);
-      if (run.pmEnd != null) wrapper.dataset.pmEnd = String(run.pmEnd);
-      wrapper.dataset.layoutEpoch = String(this.layoutEpoch);
-      this.applySdtDataset(wrapper, run.sdt);
-      if (run.dataAttrs) applyRunDataAttributes(wrapper, run.dataAttrs);
-      wrapper.appendChild(img);
-      return this.buildImageHyperlinkAnchor(wrapper, run.hyperlink, 'inline-block');
-    }
-
-    // Apply PM position tracking for cursor placement (only on img when not wrapped)
-    if (run.pmStart != null) {
-      img.dataset.pmStart = String(run.pmStart);
-    }
-    if (run.pmEnd != null) {
-      img.dataset.pmEnd = String(run.pmEnd);
-    }
-    img.dataset.layoutEpoch = String(this.layoutEpoch);
-
-    // Apply SDT metadata
-    this.applySdtDataset(img, run.sdt);
-
-    // Apply data attributes
-    if (run.dataAttrs) {
-      applyRunDataAttributes(img, run.dataAttrs);
-    }
-
-    const runClipPath = readClipPathValue((run as { clipPath?: unknown }).clipPath);
-    if (runClipPath && this.doc) {
-      img.style.clipPath = runClipPath;
-      img.style.display = 'block';
-      img.style.marginTop = '';
-      img.style.marginBottom = '';
-      img.style.marginLeft = '';
-      img.style.marginRight = '';
-      img.style.verticalAlign = '';
-      img.style.position = 'static';
-      img.style.zIndex = '';
-
-      const wrapper = this.doc.createElement('span');
-      wrapper.classList.add('superdoc-inline-image-clip-wrapper');
-      wrapper.style.display = 'inline-block';
-      wrapper.style.width = `${run.width}px`;
-      wrapper.style.height = `${run.height}px`;
-      wrapper.style.verticalAlign = run.verticalAlign ?? 'bottom';
-      wrapper.style.position = 'relative';
-      wrapper.style.zIndex = '1';
-      if (run.distTop) wrapper.style.marginTop = `${run.distTop}px`;
-      if (run.distBottom) wrapper.style.marginBottom = `${run.distBottom}px`;
-      if (run.distLeft) wrapper.style.marginLeft = `${run.distLeft}px`;
-      if (run.distRight) wrapper.style.marginRight = `${run.distRight}px`;
-
-      if (run.pmStart != null) {
-        wrapper.dataset.pmStart = String(run.pmStart);
-      }
-      if (run.pmEnd != null) {
-        wrapper.dataset.pmEnd = String(run.pmEnd);
-      }
-      wrapper.dataset.layoutEpoch = String(this.layoutEpoch);
-      this.applySdtDataset(wrapper, run.sdt);
-
-      wrapper.appendChild(img);
-      return this.buildImageHyperlinkAnchor(wrapper, run.hyperlink, 'inline-block');
-    }
-
-    return this.buildImageHyperlinkAnchor(img, run.hyperlink, 'inline-block');
-  }
-
-  /**
-   * Renders a FieldAnnotationRun as an inline "pill" element matching super-editor's visual appearance.
-   *
-   * Field annotations are styled inline elements that display form fields with:
-   * - Outer span with border, border-radius, padding, and background color
-   * - Inner span containing the displayLabel or type-specific content (image, link, etc.)
-   *
-   * @param run - The FieldAnnotationRun to render containing field configuration and styling
-   * @returns HTMLElement (span) or null if document is not available
-   *
-   * @example
-   * ```typescript
-   * // Text variant
-   * renderFieldAnnotationRun({ kind: 'fieldAnnotation', variant: 'text', displayLabel: 'Full Name', fieldColor: '#980043' })
-   * // Returns: <span class="annotation" style="border: 2px solid #b015b3; ..."><span class="annotation-content">Full Name</span></span>
-   *
-   * // Image variant with imageSrc
-   * renderFieldAnnotationRun({ kind: 'fieldAnnotation', variant: 'image', displayLabel: 'Photo', imageSrc: 'data:image/png;...' })
-   * // Returns: <span class="annotation"><span class="annotation-content"><img src="..." /></span></span>
-   *
-   * // Link variant
-   * renderFieldAnnotationRun({ kind: 'fieldAnnotation', variant: 'link', displayLabel: 'Website', linkUrl: 'https://example.com' })
-   * // Returns: <span class="annotation"><span class="annotation-content"><a href="...">https://example.com</a></span></span>
-   * ```
-   */
-  private renderFieldAnnotationRun(run: FieldAnnotationRun): HTMLElement | null {
-    if (!this.doc) {
-      return null;
-    }
-
-    // Handle hidden fields
-    if (run.hidden) {
-      const hidden = this.doc.createElement('span');
-      hidden.style.display = 'none';
-      if (run.pmStart != null) hidden.dataset.pmStart = String(run.pmStart);
-      if (run.pmEnd != null) hidden.dataset.pmEnd = String(run.pmEnd);
-      hidden.dataset.layoutEpoch = String(this.layoutEpoch);
-      return hidden;
-    }
-
-    // Default styling values (matching super-editor's FieldAnnotationView)
-    const defaultBorderColor = '#b015b3';
-    const defaultFieldColor = '#980043';
-
-    // Create outer annotation wrapper
-    const annotation = this.doc.createElement('span');
-    annotation.classList.add(DOM_CLASS_NAMES.ANNOTATION);
-    annotation.setAttribute('aria-label', 'Field annotation');
-
-    // Apply pill styling (unless highlighted is explicitly false)
-    const showHighlight = run.highlighted !== false;
-    if (showHighlight) {
-      const borderColor = run.borderColor || defaultBorderColor;
-      annotation.style.border = `2px solid ${borderColor}`;
-      annotation.style.borderRadius = '2px';
-      annotation.style.padding = '1px 2px';
-      annotation.style.boxSizing = 'border-box';
-
-      // Apply background color with alpha
-      const fieldColor = run.fieldColor || defaultFieldColor;
-      // Add alpha to make it semi-transparent (matching super-editor's behavior)
-      const bgColor = fieldColor.length === 7 ? `${fieldColor}33` : fieldColor;
-      // textHighlight takes precedence over fieldColor
-      if (run.textHighlight) {
-        annotation.style.backgroundColor = run.textHighlight;
-      } else {
-        annotation.style.backgroundColor = bgColor;
-      }
-    }
-
-    // Apply visibility
-    if (run.visibility === 'hidden') {
-      annotation.style.visibility = 'hidden';
-    }
-
-    // Apply explicit size if present
-    if (run.size) {
-      if (run.size.width) {
-        const requiresImage = run.variant === 'image' || run.variant === 'signature';
-        if (!requiresImage || run.imageSrc) {
-          annotation.style.width = `${run.size.width}px`;
-          annotation.style.display = 'inline-block';
-          annotation.style.overflow = 'hidden';
-        }
-      }
-      if (run.size.height && run.variant !== 'html') {
-        const requiresImage = run.variant === 'image' || run.variant === 'signature';
-        if (!requiresImage || run.imageSrc) {
-          annotation.style.height = `${run.size.height}px`;
-        }
-      }
-    }
-
-    // Apply typography to the annotation element.
-    // Always set a font-size so the annotation never inherits fontSize: 0 from
-    // the line container (which zeroes it to eliminate the CSS strut). When the
-    // run has no explicit fontSize, fall back to BROWSER_DEFAULT_FONT_SIZE (the
-    // browser default that was previously inherited before the strut fix).
-    if (run.fontFamily) {
-      annotation.style.fontFamily = run.fontFamily;
-    }
-    {
-      const fontSize = run.fontSize
-        ? typeof run.fontSize === 'number'
-          ? `${run.fontSize}pt`
-          : run.fontSize
-        : BROWSER_DEFAULT_FONT_SIZE;
-      annotation.style.fontSize = fontSize;
-    }
-    if (run.textColor) {
-      annotation.style.color = run.textColor;
-    }
-    if (run.bold) {
-      annotation.style.fontWeight = 'bold';
-    }
-    if (run.italic) {
-      annotation.style.fontStyle = 'italic';
-    }
-    if (run.underline) {
-      annotation.style.textDecoration = 'underline';
-    }
-
-    // Apply z-index for proper layering
-    annotation.style.zIndex = '1';
-
-    // Create inner content wrapper
-    const content = this.doc.createElement('span');
-    content.classList.add(DOM_CLASS_NAMES.ANNOTATION_CONTENT);
-    content.style.pointerEvents = 'none';
-    content.setAttribute('contenteditable', 'false');
-
-    // Render type-specific content
-    switch (run.variant) {
-      case 'image':
-      case 'signature': {
-        if (run.imageSrc) {
-          const img = this.doc.createElement('img');
-          // SECURITY: Validate data URLs
-          const isDataUrl = run.imageSrc.startsWith('data:');
-          if (isDataUrl) {
-            if (run.imageSrc.length <= MAX_DATA_URL_LENGTH && VALID_IMAGE_DATA_URL.test(run.imageSrc)) {
-              img.src = run.imageSrc;
-            } else {
-              // Invalid data URL - fall back to displayLabel
-              content.textContent = run.displayLabel;
-              break;
-            }
-          } else {
-            const sanitized = sanitizeHref(run.imageSrc);
-            if (sanitized) {
-              img.src = sanitized.href;
-            } else {
-              content.textContent = run.displayLabel;
-              break;
-            }
-          }
-          img.alt = run.displayLabel;
-          img.style.height = 'auto';
-          img.style.maxWidth = '100%';
-          img.style.pointerEvents = 'none';
-          img.style.verticalAlign = 'middle';
-          if (run.variant === 'signature') {
-            img.style.maxHeight = '28px';
-          }
-          content.appendChild(img);
-          annotation.style.display = 'inline-block';
-          content.style.display = 'inline-block';
-          // Prevent line-height inheritance from the line container from breaking image layout.
-          annotation.style.lineHeight = 'normal';
-          content.style.lineHeight = 'normal';
-        } else {
-          content.textContent = run.displayLabel || (run.variant === 'signature' ? 'Signature' : '');
-        }
-        break;
-      }
-
-      case 'link': {
-        if (run.linkUrl) {
-          const link = this.doc.createElement('a');
-          const sanitized = sanitizeHref(run.linkUrl);
-          if (sanitized) {
-            link.href = sanitized.href;
-            link.target = '_blank';
-            link.rel = 'noopener noreferrer';
-            link.textContent = run.linkUrl;
-            link.style.textDecoration = 'none';
-            content.style.pointerEvents = 'all';
-            content.appendChild(link);
-          } else {
-            content.textContent = run.displayLabel;
-          }
-        } else {
-          content.textContent = run.displayLabel;
-        }
-        break;
-      }
-
-      case 'html': {
-        if (run.rawHtml && typeof run.rawHtml === 'string') {
-          // Note: rawHtml is expected to be sanitized upstream.
-          content.innerHTML = run.rawHtml.trim();
-          annotation.style.display = 'inline-block';
-          content.style.display = 'inline-block';
-          // Prevent line-height inheritance from the line container from affecting HTML layout.
-          annotation.style.lineHeight = 'normal';
-          content.style.lineHeight = 'normal';
-        } else {
-          content.textContent = run.displayLabel;
-        }
-        break;
-      }
-
-      case 'text':
-      case 'checkbox':
-      default: {
-        content.textContent = run.displayLabel;
-        break;
-      }
-    }
-
-    annotation.appendChild(content);
-
-    // Apply data attributes for field tracking
-    annotation.dataset.type = run.variant;
-    annotation.dataset.displayLabel = run.displayLabel;
-    if (run.fieldId) {
-      annotation.dataset.fieldId = run.fieldId;
-    }
-    if (run.fieldType) {
-      annotation.dataset.fieldType = run.fieldType;
-    }
-
-    // Assert PM positions are present for cursor fallback
-    assertPmPositions(run, 'field annotation run');
-
-    // Apply PM position tracking
-    if (run.pmStart != null) {
-      annotation.dataset.pmStart = String(run.pmStart);
-    }
-    if (run.pmEnd != null) {
-      annotation.dataset.pmEnd = String(run.pmEnd);
-    }
-    annotation.dataset.layoutEpoch = String(this.layoutEpoch);
-
-    // Apply SDT metadata
-    this.applySdtDataset(annotation, run.sdt);
-
-    return annotation;
-  }
-
-  /**
-   * Renders a single line of a paragraph block.
-   *
-   * @param block - The paragraph block containing the line
-   * @param line - The line measurement data
-   * @param context - Rendering context with fragment information
-   * @param availableWidthOverride - Optional override for available width used in justification calculations
-   * @param lineIndex - Optional zero-based index of the line within the fragment
-   * @param skipJustify - When true, prevents justification even if alignment is 'justify'
-   * @param preExpandedRuns - Pre-computed result of expandRunsForInlineNewlines; pass when rendering multiple lines of the same paragraph to avoid recomputing per line
-   * @param resolvedListTextStartPx - Optional canonical text-start override for list first lines
-   * @param indentOffsetOverride - When defined, used instead of re-deriving indentOffset from block attrs in the segment positioning path
-   * @param paragraphMarkLeftOffsetOverride - Optional text-start override for positioning presentation-only paragraph marks
-   * @returns The rendered line element
-   */
-  private renderLine(
-    block: ParagraphBlock,
-    line: Line,
-    context: FragmentRenderContext,
-    availableWidthOverride?: number,
-    lineIndex?: number,
-    skipJustify?: boolean,
-    preExpandedRuns?: Run[],
-    resolvedListTextStartPx?: number,
-    indentOffsetOverride?: number,
-    paragraphMarkLeftOffsetOverride?: number,
-  ): HTMLElement {
-    if (!this.doc) {
-      throw new Error('DomPainter: document is not available');
-    }
-
-    const expandedBlock = { ...block, runs: preExpandedRuns ?? expandRunsForInlineNewlines(block.runs) };
-    const lineRange = computeLinePmRange(expandedBlock, line);
-    let runsForLine = sliceRunsForLine(expandedBlock, line);
-
-    const el = this.doc.createElement('div');
-    el.classList.add(CLASS_NAMES.line);
-    applyStyles(el, lineStyles(line.lineHeight));
-    el.dataset.layoutEpoch = String(this.layoutEpoch);
-    const paragraphAttrs = (block.attrs as ParagraphAttrs | undefined) ?? {};
-    const styleId = paragraphAttrs.styleId;
-    if (styleId) {
-      el.setAttribute('styleid', styleId);
-    }
-    const pAttrs = block.attrs as ParagraphAttrs | undefined;
-    const isRtl = applyRtlStyles(el, pAttrs);
-
-    if (lineRange.pmStart != null) {
-      el.dataset.pmStart = String(lineRange.pmStart);
-    }
-    if (lineRange.pmEnd != null) {
-      el.dataset.pmEnd = String(lineRange.pmEnd);
-    }
-    const trackedConfig = this.resolveTrackedChangesConfig(block);
-
-    // Preserve PM positions for DOM caret mapping on empty lines.
-    if (runsForLine.length === 0) {
-      const span = this.doc.createElement('span');
-      span.classList.add('superdoc-empty-run');
-      if (lineRange.pmStart != null) {
-        span.dataset.pmStart = String(lineRange.pmStart);
-      }
-      if (lineRange.pmEnd != null) {
-        span.dataset.pmEnd = String(lineRange.pmEnd);
-      }
-      // Restore font-size so the &nbsp; remains a visible caret target
-      // (the line container sets fontSize: 0 to eliminate the CSS strut).
-      span.style.fontSize = `${line.lineHeight}px`;
-      span.innerHTML = '&nbsp;';
-      el.appendChild(span);
-    }
-
-    // Render tab leaders (absolute positioned overlays)
-    if (line.leaders && line.leaders.length > 0) {
-      line.leaders.forEach((ld) => {
-        const leaderEl = this.doc!.createElement('div');
-        leaderEl.classList.add('superdoc-leader');
-        leaderEl.setAttribute('data-style', ld.style);
-        leaderEl.style.position = 'absolute';
-        leaderEl.style.left = `${ld.from}px`;
-        leaderEl.style.width = `${Math.max(0, ld.to - ld.from)}px`;
-        // Align leaders closer to the text baseline using measured descent
-        const baselineOffset = Math.max(1, Math.round(Math.max(1, line.descent * 0.5)));
-        leaderEl.style.bottom = `${baselineOffset}px`;
-        leaderEl.style.height = ld.style === 'heavy' ? '2px' : '1px';
-        leaderEl.style.pointerEvents = 'none';
-        leaderEl.style.zIndex = '0'; // Same layer as line, text will be z-index: 1
-
-        // Map leader styles to CSS
-        if (ld.style === 'dot' || ld.style === 'middleDot') {
-          leaderEl.style.borderBottom = '1px dotted currentColor';
-        } else if (ld.style === 'hyphen') {
-          leaderEl.style.borderBottom = '1px dashed currentColor';
-        } else if (ld.style === 'underscore') {
-          leaderEl.style.borderBottom = '1px solid currentColor';
-        } else if (ld.style === 'heavy') {
-          leaderEl.style.borderBottom = '2px solid currentColor';
-        }
-
-        el.appendChild(leaderEl);
-      });
-    }
-
-    // Render bar tabs (vertical hairlines)
-    if (line.bars && line.bars.length > 0) {
-      line.bars.forEach((bar) => {
-        const barEl = this.doc!.createElement('div');
-        barEl.classList.add('superdoc-tab-bar');
-        barEl.style.position = 'absolute';
-        barEl.style.left = `${bar.x}px`;
-        barEl.style.top = '0px';
-        barEl.style.bottom = '0px';
-        barEl.style.width = '1px';
-        barEl.style.background = 'currentColor';
-        barEl.style.opacity = '0.6';
-        barEl.style.pointerEvents = 'none';
-        el.appendChild(barEl);
-      });
-    }
-
-    // Check if any segments have explicit X positioning (from tab stops)
-    const hasExplicitPositioning = line.segments?.some((seg) => seg.x !== undefined);
-    const explicitPositionedSegmentCount = line.segments?.filter((seg) => seg.x !== undefined).length ?? 0;
-    const hasMultipleExplicitPositionedSegments = explicitPositionedSegmentCount > 1;
-    const availableWidth = availableWidthOverride ?? line.maxWidth ?? line.width;
-
-    const justifyShouldApply = shouldApplyJustify({
-      alignment: (block as ParagraphBlock).attrs?.alignment,
-      hasExplicitPositioning: hasExplicitPositioning ?? false,
-      hasExplicitTabStops: line.hasExplicitTabStops === true,
-      // Caller already folds last-line + trailing lineBreak behavior into skipJustify.
-      isLastLineOfParagraph: false,
-      paragraphEndsWithLineBreak: false,
-      skipJustifyOverride: skipJustify || hasMultipleExplicitPositionedSegments,
-    });
-
-    const countSpaces = (text: string): number => {
-      let count = 0;
-      for (let i = 0; i < text.length; i += 1) {
-        if (SPACE_CHARS.has(text[i])) count += 1;
-      }
-      return count;
-    };
-
-    if (justifyShouldApply) {
-      // The measurer trims wrap-point trailing spaces from line ranges, but slicing can still
-      // produce whitespace-only runs at style boundaries. These runs are especially problematic
-      // for justify because `word-spacing` behavior is inconsistent on pure-whitespace spans.
-      //
-      // Normalize by merging whitespace-only slices into adjacent runs with identical styling.
-      const stableDataAttrs = (attrs: Record<string, string> | undefined): Record<string, string> | undefined => {
-        if (!attrs) return undefined;
-        const keys = Object.keys(attrs).sort();
-        const out: Record<string, string> = {};
-        keys.forEach((key) => {
-          out[key] = attrs[key]!;
-        });
-        return out;
-      };
-
-      const mergeSignature = (run: TextRun): string =>
-        JSON.stringify({
-          kind: run.kind ?? 'text',
-          fontFamily: run.fontFamily,
-          fontSize: run.fontSize,
-          bold: run.bold ?? false,
-          italic: run.italic ?? false,
-          letterSpacing: run.letterSpacing ?? null,
-          color: run.color ?? null,
-          underline: run.underline ?? null,
-          strike: run.strike ?? false,
-          highlight: run.highlight ?? null,
-          textTransform: run.textTransform ?? null,
-          token: run.token ?? null,
-          pageRefMetadata: run.pageRefMetadata ?? null,
-          trackedChange: run.trackedChange ?? null,
-          sdt: run.sdt ?? null,
-          link: run.link ?? null,
-          comments: run.comments ?? null,
-          dataAttrs: stableDataAttrs(run.dataAttrs) ?? null,
-          bidi: run.bidi ?? null,
-        });
-
-      const isWhitespaceOnly = (text: string): boolean => {
-        if (text.length === 0) return false;
-        for (let i = 0; i < text.length; i += 1) {
-          if (!SPACE_CHARS.has(text[i])) return false;
-        }
-        return true;
-      };
-
-      const cloneTextRun = (run: TextRun): TextRun => ({
-        ...(run as TextRun),
-        comments: run.comments ? [...run.comments] : undefined,
-        dataAttrs: run.dataAttrs ? { ...run.dataAttrs } : undefined,
-        underline: run.underline ? { ...run.underline } : undefined,
-        pageRefMetadata: run.pageRefMetadata ? { ...run.pageRefMetadata } : undefined,
-      });
-
-      const normalized: Run[] = runsForLine.map((run) => {
-        if ((run.kind !== 'text' && run.kind !== undefined) || !('text' in run)) return run;
-        return cloneTextRun(run as TextRun);
-      });
-
-      const merged: Run[] = [];
-      for (let i = 0; i < normalized.length; i += 1) {
-        const run = normalized[i]!;
-        if ((run.kind !== 'text' && run.kind !== undefined) || !('text' in run)) {
-          merged.push(run);
-          continue;
-        }
-
-        const textRun = run as TextRun;
-        if (!isWhitespaceOnly(textRun.text ?? '')) {
-          merged.push(textRun);
-          continue;
-        }
-
-        const prev = merged[merged.length - 1];
-        if (prev && (prev.kind === 'text' || prev.kind === undefined) && 'text' in prev) {
-          const prevTextRun = prev as TextRun;
-          if (mergeSignature(prevTextRun) === mergeSignature(textRun)) {
-            const extra = textRun.text ?? '';
-            prevTextRun.text = (prevTextRun.text ?? '') + extra;
-            if (prevTextRun.pmStart != null) {
-              prevTextRun.pmEnd = prevTextRun.pmStart + prevTextRun.text.length;
-            } else if (prevTextRun.pmEnd != null) {
-              prevTextRun.pmEnd = prevTextRun.pmEnd + extra.length;
-            }
-            continue;
-          }
-        }
-
-        const next = normalized[i + 1];
-        if (next && (next.kind === 'text' || next.kind === undefined) && 'text' in next) {
-          const nextTextRun = next as TextRun;
-          if (mergeSignature(nextTextRun) === mergeSignature(textRun)) {
-            const extra = textRun.text ?? '';
-            nextTextRun.text = extra + (nextTextRun.text ?? '');
-            if (textRun.pmStart != null) {
-              nextTextRun.pmStart = textRun.pmStart;
-            } else if (nextTextRun.pmStart != null) {
-              nextTextRun.pmStart = nextTextRun.pmStart - extra.length;
-            }
-            if (nextTextRun.pmStart != null && nextTextRun.pmEnd == null) {
-              nextTextRun.pmEnd = nextTextRun.pmStart + nextTextRun.text.length;
-            }
-            continue;
-          }
-        }
-
-        merged.push(textRun);
-      }
-
-      runsForLine = merged;
-
-      // Suppress trailing wrap-point spaces on justified lines. With `white-space: pre`, they would
-      // otherwise consume width and be stretched by word-spacing, producing a ragged visible edge.
-      // Preserve intentionally space-only lines (rare but supported).
-      const hasNonSpaceText = runsForLine.some(
-        (run) => (run.kind === 'text' || run.kind === undefined) && 'text' in run && (run.text ?? '').trim().length > 0,
-      );
-      if (hasNonSpaceText) {
-        for (let i = runsForLine.length - 1; i >= 0; i -= 1) {
-          const run = runsForLine[i];
-          if ((run.kind !== 'text' && run.kind !== undefined) || !('text' in run)) continue;
-          const text = run.text ?? '';
-          let trimCount = 0;
-          for (let j = text.length - 1; j >= 0 && text[j] === ' '; j -= 1) {
-            trimCount += 1;
-          }
-          if (trimCount === 0) break;
-
-          const nextText = text.slice(0, Math.max(0, text.length - trimCount));
-          if (nextText.length === 0) {
-            runsForLine.splice(i, 1);
-            continue;
-          }
-          (run as TextRun).text = nextText;
-          if ((run as TextRun).pmEnd != null) {
-            (run as TextRun).pmEnd = (run as TextRun).pmEnd! - trimCount;
-          }
-          break;
-        }
-      }
-    }
-
-    const spaceCount =
-      line.spaceCount ??
-      runsForLine.reduce((sum, run) => {
-        if ((run.kind !== 'text' && run.kind !== undefined) || !('text' in run) || run.text == null) return sum;
-        return sum + countSpaces(run.text);
-      }, 0);
-    const lineWidth = line.naturalWidth ?? line.width;
-    const spacingPerSpace = calculateJustifySpacing({
-      lineWidth,
-      availableWidth,
-      spaceCount,
-      shouldJustify: justifyShouldApply,
-    });
-    const resolveLineIndentOffset = (): number => {
-      if (indentOffsetOverride != null) {
-        return indentOffsetOverride;
-      }
-
-      const paraIndent = (block.attrs as ParagraphAttrs | undefined)?.indent;
-      const indentLeft = paraIndent?.left ?? 0;
-      const firstLine = paraIndent?.firstLine ?? 0;
-      const hanging = paraIndent?.hanging ?? 0;
-      const isFirstLineOfPara = lineIndex === 0 || lineIndex === undefined;
-      const firstLineOffsetForCumX = isFirstLineOfPara ? firstLine - hanging : 0;
-      const wordLayoutValue = (block.attrs as ParagraphAttrs | undefined)?.wordLayout;
-      const wordLayout = isMinimalWordLayout(wordLayoutValue) ? wordLayoutValue : undefined;
-      const isListParagraph = Boolean(wordLayout?.marker);
-      const fallbackListTextStartPx =
-        typeof wordLayout?.marker?.textStartX === 'number' && Number.isFinite(wordLayout.marker.textStartX)
-          ? wordLayout.marker.textStartX
-          : typeof wordLayout?.textStartPx === 'number' && Number.isFinite(wordLayout.textStartPx)
-            ? wordLayout.textStartPx
-            : undefined;
-      const listIndentOffset = isFirstLineOfPara
-        ? (resolvedListTextStartPx ?? fallbackListTextStartPx ?? indentLeft)
-        : indentLeft;
-
-      return isListParagraph ? listIndentOffset : indentLeft + firstLineOffsetForCumX;
-    };
-    const lineTextStartOffsetPx =
-      paragraphMarkLeftOffsetOverride != null ? paragraphMarkLeftOffsetOverride : resolveLineIndentOffset();
-    const paragraphMarkLeftOffsetPx = lineTextStartOffsetPx;
-
-    if (spacingPerSpace !== 0) {
-      // Each rendered line is its own block; relying on text-align-last is brittle, so we use word-spacing.
-      el.style.wordSpacing = `${spacingPerSpace}px`;
-    }
-
-    if (shouldUseSegmentPositioning(hasExplicitPositioning ?? false, Boolean(line.segments), isRtl)) {
-      // Use segment-based rendering with absolute positioning for tab-aligned text.
-      // shouldUseSegmentPositioning returns false for RTL because the layout engine
-      // computes tab positions in LTR order; RTL lines fall through to inline-flow
-      // rendering where dir="rtl" lets the browser handle tab positioning.
-      //
-      // The segment x positions from layout are relative to the content area (left margin = 0).
-      // We need to add the paragraph indent to ALL positions (both explicit and calculated).
-      // Segment x positions and paragraph marks both need the visual text start,
-      // including list marker/suffix space when the resolved layout provides it.
-      const indentOffset = lineTextStartOffsetPx;
-      let cumulativeX = 0; // Start at 0, we'll add indentOffset when positioning
-
-      const segments = line.segments!;
-      const segmentsByRun = new Map<number, LineSegment[]>();
-      segments.forEach((segment) => {
-        const list = segmentsByRun.get(segment.runIndex);
-        if (list) {
-          list.push(segment);
-        } else {
-          segmentsByRun.set(segment.runIndex, [segment]);
-        }
-      });
-
-      /**
-       * Finds the immediate next segment carrying tab geometry after a given run index.
-       * This handles tab-aligned text and compensated tab paint geometry.
-       *
-       * WHY ONLY THE IMMEDIATE NEXT RUN:
-       * When rendering a tab, we need to know where the content IMMEDIATELY after this tab begins
-       * to correctly size the tab element. We don't look beyond the immediate next run because:
-       * 1. Each tab is independent and should only consider its directly adjacent content
-       * 2. Looking further ahead would incorrectly span multiple tabs or unrelated runs
-       * 3. If there's another tab between this tab and some content, that intermediate tab is
-       *    responsible for its own layout - we shouldn't reach across it
-       *
-       * For example, given: "Text[TAB1]Content[TAB2]MoreContent"
-       * - When sizing TAB1, we only check "Content" (immediate next run)
-       * - We don't check "MoreContent" because TAB2 is in between
-       * - TAB2 will independently check "MoreContent" when it's rendered
-       *
-       * @param fromRunIndex - The run index to search after
-       * @returns The immediate next tab-positioned segment, or undefined if not found or not immediate
-       */
-      const findImmediateNextSegment = (fromRunIndex: number): LineSegment | undefined => {
-        // Only check the immediate next run - don't skip over other tabs
-        const nextRunIdx = fromRunIndex + 1;
-        if (nextRunIdx <= line.toRun) {
-          const nextSegments = segmentsByRun.get(nextRunIdx);
-          if (nextSegments && nextSegments.length > 0) {
-            const firstSegment = nextSegments[0];
-            // Return only the first segment; later segments in the same run are
-            // not immediately adjacent to this tab.
-            return firstSegment.x !== undefined || firstSegment.precedingTabEndX !== undefined
-              ? firstSegment
-              : undefined;
-          }
-        }
-        return undefined;
-      };
-
-      // Inline SDT wrapping for geometry path (absolute-positioned elements).
-      // Same concept as the run-based path's SDT wrapper, but here elements use
-      // position:absolute so the wrapper itself must be absolutely positioned to
-      // span from the leftmost to rightmost child element.
-      let geoSdtWrapper: HTMLElement | null = null;
-      let geoSdtId: string | null = null;
-      let geoSdtWrapperLeft = 0;
-      let geoSdtMaxRight = 0;
-
-      const closeGeoSdtWrapper = () => {
-        if (geoSdtWrapper) {
-          geoSdtWrapper.style.width = `${geoSdtMaxRight - geoSdtWrapperLeft}px`;
-          el.appendChild(geoSdtWrapper);
-          geoSdtWrapper = null;
-          geoSdtId = null;
-        }
-      };
-
-      /**
-       * Append an element to the line, routing through an inline SDT wrapper
-       * when the run has inline structuredContent metadata.
-       */
-      const appendToLineGeo = (elem: HTMLElement, runForSdt: Run, elemLeftPx: number, elemWidthPx: number) => {
-        const resolved = this.resolveRunSdtId(runForSdt);
-        const thisRunSdtId = resolved?.sdtId ?? null;
-
-        if (thisRunSdtId !== geoSdtId) {
-          closeGeoSdtWrapper();
-        }
-
-        if (resolved && this.doc) {
-          if (!geoSdtWrapper) {
-            geoSdtWrapper = this.createInlineSdtWrapper(resolved.sdt);
-            geoSdtId = thisRunSdtId;
-            geoSdtWrapperLeft = elemLeftPx;
-            geoSdtMaxRight = elemLeftPx;
-            geoSdtWrapper.style.position = 'absolute';
-            geoSdtWrapper.style.left = `${elemLeftPx}px`;
-            geoSdtWrapper.style.top = '0px';
-            geoSdtWrapper.style.height = `${line.lineHeight}px`;
-          }
-          this.syncInlineSdtWrapperTypography(geoSdtWrapper, runForSdt);
-          elem.style.left = `${elemLeftPx - geoSdtWrapperLeft}px`;
-          geoSdtMaxRight = Math.max(geoSdtMaxRight, elemLeftPx + elemWidthPx);
-          this.expandSdtWrapperPmRange(geoSdtWrapper, (runForSdt as TextRun).pmStart, (runForSdt as TextRun).pmEnd);
-          geoSdtWrapper.appendChild(elem);
-        } else {
-          el.appendChild(elem);
-        }
-      };
-
-      for (let runIndex = line.fromRun; runIndex <= line.toRun; runIndex += 1) {
-        const baseRun = block.runs[runIndex];
-        if (!baseRun) continue;
-
-        if (baseRun.kind === 'tab') {
-          // Find where the immediate next content begins (if it's right after this tab)
-          const immediateNextSegment = findImmediateNextSegment(runIndex);
-          const tabStartX = cumulativeX;
-
-          // The tab should span from where previous content ended to where next content begins.
-          // If layout supplied a tab-end boundary for the next segment, prefer it.
-          // Otherwise, use the next segment's explicit X (from tab alignment) or the
-          // tab's measured width.
-          const measuredTabEndX = tabStartX + (baseRun.width ?? 0);
-          const tabEndX = immediateNextSegment?.precedingTabEndX ?? immediateNextSegment?.x ?? measuredTabEndX;
-          const actualTabWidth = tabEndX - tabStartX;
-
-          const tabEl = this.doc!.createElement('span');
-          tabEl.style.position = 'absolute';
-          tabEl.style.left = `${tabStartX + indentOffset}px`;
-          tabEl.style.top = '0px';
-          tabEl.style.width = `${actualTabWidth}px`;
-          tabEl.style.height = `${line.lineHeight}px`;
-          tabEl.style.display = 'inline-block';
-          tabEl.style.pointerEvents = 'none';
-          tabEl.style.zIndex = '1';
-
-          // Apply underline styling to tab if present (common in signature lines)
-          // TabRun can have RunMarks properties like underline, bold, etc.
-          //
-          // Signature line use case: In documents with signature lines, tabs are often used
-          // to create underlined blank spaces where signatures should go. The underline mark
-          // is inherited from a parent node (e.g., a paragraph with underline formatting) and
-          // applied to the tab, creating a visible underline even though the tab itself has
-          // no visible text content.
-          if (baseRun.underline) {
-            const underlineStyle = baseRun.underline.style ?? 'single';
-            // We must use an explicit color instead of currentColor because tab content is
-            // invisible (no text). If we used currentColor, the underline would inherit the
-            // text color, which might be transparent or the same as the background, making
-            // the underline invisible. Using an explicit color (defaulting to black) ensures
-            // the underline is always visible for signature lines.
-            const underlineColor = baseRun.underline.color ?? '#000000';
-            const borderStyle = underlineStyle === 'double' ? 'double' : 'solid';
-            tabEl.style.borderBottom = `1px ${borderStyle} ${underlineColor}`;
-          } else {
-            tabEl.style.visibility = 'hidden';
-          }
-
-          if (styleId) {
-            tabEl.setAttribute('styleid', styleId);
-          }
-          if (baseRun.pmStart != null) tabEl.dataset.pmStart = String(baseRun.pmStart);
-          if (baseRun.pmEnd != null) tabEl.dataset.pmEnd = String(baseRun.pmEnd);
-          tabEl.dataset.layoutEpoch = String(this.layoutEpoch);
-          appendToLineGeo(tabEl, baseRun, tabStartX + indentOffset, actualTabWidth);
-
-          // Update cumulativeX to where the next content begins
-          // This ensures proper positioning for subsequent elements
-          cumulativeX = tabEndX;
-          continue;
-        }
-
-        // Handle ImageRun - render as-is (no slicing needed, atomic unit)
-        if (this.isImageRun(baseRun)) {
-          const elem = this.renderRun(baseRun, context, trackedConfig);
-          if (elem) {
-            if (styleId) {
-              elem.setAttribute('styleid', styleId);
-            }
-            // Position image using explicit segment X when available; fallback to cumulative flow
-            // Add indentOffset to position content at the correct paragraph indent.
-            const runSegments = segmentsByRun.get(runIndex);
-            const baseSegX = runSegments && runSegments[0]?.x !== undefined ? runSegments[0].x : cumulativeX;
-            const segX = baseSegX + indentOffset;
-            // LineSegment.width is required by contract; producer (measuring-dom) always emits it.
-            // No paint-time DOM measurement (SD-2957).
-            const segWidth = runSegments?.[0]?.width ?? 0;
-            elem.style.position = 'absolute';
-            elem.style.left = `${segX}px`;
-            appendToLineGeo(elem, baseRun, segX, segWidth);
-            cumulativeX = baseSegX + segWidth;
-          }
-          continue;
-        }
-
-        // Handle LineBreakRun - line breaks are handled by line creation, skip here
-        if (this.isLineBreakRun(baseRun)) {
-          continue;
-        }
-
-        // Handle BreakRun - breaks are handled by line creation, skip here
-        if (this.isBreakRun(baseRun)) {
-          continue;
-        }
-
-        // Handle FieldAnnotationRun - render as-is (no slicing needed, atomic unit like images)
-        if (this.isFieldAnnotationRun(baseRun)) {
-          const elem = this.renderRun(baseRun, context, trackedConfig);
-          if (elem) {
-            if (styleId) {
-              elem.setAttribute('styleid', styleId);
-            }
-            // Position using explicit segment X when available; fallback to cumulative flow
-            // Add indentOffset to position content at the correct paragraph indent.
-            const runSegments = segmentsByRun.get(runIndex);
-            const baseSegX = runSegments && runSegments[0]?.x !== undefined ? runSegments[0].x : cumulativeX;
-            const segX = baseSegX + indentOffset;
-            const segWidth = (runSegments && runSegments[0]?.width !== undefined ? runSegments[0].width : 0) ?? 0;
-            elem.style.position = 'absolute';
-            elem.style.left = `${segX}px`;
-            appendToLineGeo(elem, baseRun, segX, segWidth);
-            cumulativeX = baseSegX + segWidth;
-          }
-          continue;
-        }
-
-        // Handle MathRun - render as-is (atomic unit like images)
-        if (this.isMathRun(baseRun)) {
-          const elem = this.renderRun(baseRun, context, trackedConfig);
-          if (elem) {
-            if (styleId) {
-              elem.setAttribute('styleid', styleId);
-            }
-            const runSegments = segmentsByRun.get(runIndex);
-            const baseSegX = runSegments && runSegments[0]?.x !== undefined ? runSegments[0].x : cumulativeX;
-            const segX = baseSegX + indentOffset;
-            const segWidth =
-              (runSegments && runSegments[0]?.width !== undefined ? runSegments[0].width : baseRun.width) ?? 0;
-            elem.style.position = 'absolute';
-            elem.style.left = `${segX}px`;
-            appendToLineGeo(elem, baseRun, segX, segWidth);
-            cumulativeX = baseSegX + segWidth;
-          }
-          continue;
-        }
-
-        const runSegments = segmentsByRun.get(runIndex);
-        if (!runSegments || runSegments.length === 0) {
-          continue;
-        }
-
-        // At this point, baseRun must be TextRun (has .text property)
-        if (!('text' in baseRun)) {
-          continue;
-        }
-
-        const baseText = baseRun.text ?? '';
-        const runPmStart = baseRun.pmStart ?? null;
-        const fallbackPmEnd =
-          runPmStart != null && baseRun.pmEnd == null ? runPmStart + baseText.length : (baseRun.pmEnd ?? null);
-
-        runSegments.forEach((segment) => {
-          const segmentText = baseText.slice(segment.fromChar, segment.toChar);
-          if (!segmentText) return;
-
-          const pmSliceStart = runPmStart != null ? runPmStart + segment.fromChar : undefined;
-          const pmSliceEnd = runPmStart != null ? runPmStart + segment.toChar : (fallbackPmEnd ?? undefined);
-          const segmentRun: TextRun = {
-            ...(baseRun as TextRun),
-            text: segmentText,
-            pmStart: pmSliceStart,
-            pmEnd: pmSliceEnd,
-          };
-
-          const elem = this.renderRun(segmentRun, context, trackedConfig);
-          if (elem) {
-            if (styleId) {
-              elem.setAttribute('styleid', styleId);
-            }
-            // Determine X position for this segment
-            // Layout positions are relative to content area start (0).
-            // Add indentOffset to position content at the correct paragraph indent.
-            const baseX = segment.x !== undefined ? segment.x : cumulativeX;
-            const xPos = baseX + indentOffset;
-
-            elem.style.position = 'absolute';
-            elem.style.left = `${xPos}px`;
-            appendToLineGeo(elem, segmentRun, xPos, segment.width);
-
-            // Advance cumulative X by the resolved segment width. LineSegment.width is the
-            // sole source of truth — the painter does not measure inline elements (SD-2957).
-            // Use baseX (without indent) to keep cumulativeX relative to content area,
-            // matching how segment.x values are calculated in layout.
-            const width = segment.width;
-            const justifyExtraWidth = spacingPerSpace !== 0 ? spacingPerSpace * countSpaces(segmentText) : 0;
-            const visualWidth = width + justifyExtraWidth;
-            cumulativeX = baseX + visualWidth;
-            // Update SDT wrapper width if actual measured width differs from initial estimate
-            if (geoSdtWrapper) {
-              geoSdtMaxRight = Math.max(geoSdtMaxRight, xPos + visualWidth);
-            }
-          }
-        });
-      }
-      // Close any remaining SDT wrapper at end of geometry rendering
-      closeGeoSdtWrapper();
-    } else {
-      // Use run-based rendering for normal text flow
-      // Track current inline SDT wrapper to group adjacent runs with the same SDT id
-      let currentInlineSdtWrapper: HTMLElement | null = null;
-      let currentInlineSdtId: string | null = null;
-
-      const closeCurrentWrapper = () => {
-        if (currentInlineSdtWrapper) {
-          el.appendChild(currentInlineSdtWrapper);
-          currentInlineSdtWrapper = null;
-          currentInlineSdtId = null;
-        }
-      };
-
-      runsForLine.forEach((run) => {
-        // Check if this run has inline structuredContent SDT
-        const resolved = this.resolveRunSdtId(run);
-        const runSdtId = resolved?.sdtId ?? null;
-
-        // If SDT context changed, close the current wrapper
-        if (runSdtId !== currentInlineSdtId) {
-          closeCurrentWrapper();
-        }
-
-        // Special handling for TabRuns (e.g., signature lines with underlines)
-        let elem: HTMLElement | null = null;
-        if (run.kind === 'tab') {
-          const tabEl = this.doc!.createElement('span');
-          tabEl.classList.add('superdoc-tab');
-
-          // Calculate tab width - use measured width or estimate based on typical tab stop
-          const tabWidth = run.width ?? 48; // Default tab width if not measured
-
-          tabEl.style.display = 'inline-block';
-          tabEl.style.width = `${tabWidth}px`;
-          tabEl.style.height = `${line.lineHeight}px`;
-          tabEl.style.verticalAlign = 'bottom';
-
-          // Apply underline styling if present (common for signature lines)
-          //
-          // Signature line use case: In documents with signature lines, tabs are often used
-          // to create underlined blank spaces where signatures should go. The underline mark
-          // is inherited from a parent node (e.g., a paragraph with underline formatting) and
-          // applied to the tab, creating a visible underline even though the tab itself has
-          // no visible text content.
-          if (run.underline) {
-            const underlineStyle = run.underline.style ?? 'single';
-            // We must use an explicit color instead of currentColor because tab content is
-            // invisible (no text). If we used currentColor, the underline would inherit the
-            // text color, which might be transparent or the same as the background, making
-            // the underline invisible. Using an explicit color (defaulting to black) ensures
-            // the underline is always visible for signature lines.
-            const underlineColor = run.underline.color ?? '#000000';
-            const borderStyle = underlineStyle === 'double' ? 'double' : 'solid';
-            tabEl.style.borderBottom = `1px ${borderStyle} ${underlineColor}`;
-          }
-
-          if (styleId) {
-            tabEl.setAttribute('styleid', styleId);
-          }
-          if (run.pmStart != null) tabEl.dataset.pmStart = String(run.pmStart);
-          if (run.pmEnd != null) tabEl.dataset.pmEnd = String(run.pmEnd);
-          tabEl.dataset.layoutEpoch = String(this.layoutEpoch);
-
-          elem = tabEl;
-        } else {
-          elem = this.renderRun(run, context, trackedConfig);
-        }
-        if (elem) {
-          if (styleId) {
-            elem.setAttribute('styleid', styleId);
-          }
-
-          // If this run has inline SDT, add to or create wrapper
-          if (resolved && this.doc) {
-            if (!currentInlineSdtWrapper) {
-              currentInlineSdtWrapper = this.createInlineSdtWrapper(resolved.sdt);
-              this.syncInlineSdtWrapperTypography(currentInlineSdtWrapper, run);
-              currentInlineSdtId = runSdtId;
-            }
-            // Typography is set when wrapper is created from the first run.
-            // Follow-up (SD-2744): define a deterministic mixed-typography rule.
-            this.expandSdtWrapperPmRange(currentInlineSdtWrapper, run.pmStart, run.pmEnd);
-            currentInlineSdtWrapper.appendChild(elem);
-          } else {
-            el.appendChild(elem);
-          }
-        }
-      });
-
-      // Close any remaining wrapper at end of line
-      closeCurrentWrapper();
-    }
-
-    this.appendFormattingParagraphMark(
-      el,
-      line,
-      expandedBlock.runs,
-      paragraphMarkLeftOffsetPx,
-      availableWidth,
-      hasExplicitPositioning ?? false,
-    );
-
-    // Post-process: Apply tooltip accessibility for any links with pending tooltips
-    // This must happen after elements are in the DOM so aria-describedby can reference siblings
-    const anchors = el.querySelectorAll('a[href]');
-    anchors.forEach((anchor) => {
-      const pendingTooltip = this.pendingTooltips.get(anchor as HTMLElement);
-      if (pendingTooltip) {
-        this.applyTooltipAccessibility(anchor as HTMLAnchorElement, pendingTooltip);
-        this.pendingTooltips.delete(anchor as HTMLElement); // Clean up memory
-      }
-    });
-
-    return el;
-  }
-
-  private resolveTrackedChangesConfig(block: ParagraphBlock): TrackedChangesRenderConfig {
-    const attrs = (block.attrs as ParagraphAttrs | undefined) ?? {};
-    const mode = (attrs.trackedChangesMode as TrackedChangesMode | undefined) ?? 'review';
-    const enabled = attrs.trackedChangesEnabled !== false;
-    return { mode, enabled };
-  }
-
-  private applyTrackedChangeDecorations(elem: HTMLElement, run: Run, config: TrackedChangesRenderConfig): void {
-    if (!config.enabled || config.mode === 'off') {
-      return;
-    }
-
-    const textRun = run as TextRun;
-    const meta = textRun.trackedChange;
-    if (!meta) {
-      return;
-    }
-
-    const baseClass = TRACK_CHANGE_BASE_CLASS[meta.kind];
-    if (baseClass) {
-      elem.classList.add(baseClass);
-    }
-
-    const modifier = TRACK_CHANGE_MODIFIER_CLASS[meta.kind]?.[config.mode];
-    if (modifier) {
-      elem.classList.add(modifier);
-    }
-
-    elem.dataset.trackChangeId = meta.id;
-    elem.dataset.trackChangeKind = meta.kind;
-    elem.dataset.storyKey = meta.storyKey ?? 'body';
-    if (meta.author) {
-      elem.dataset.trackChangeAuthor = meta.author;
-    }
-    if (meta.authorEmail) {
-      elem.dataset.trackChangeAuthorEmail = meta.authorEmail;
-    }
-    if (meta.authorImage) {
-      elem.dataset.trackChangeAuthorImage = meta.authorImage;
-    }
-    if (meta.date) {
-      elem.dataset.trackChangeDate = meta.date;
-    }
-    // track-change-focused class is applied post-paint by CommentHighlightDecorator (super-editor).
-  }
-
-  /**
-   * Updates an existing fragment element's position and dimensions in place.
-   * Used during incremental updates to efficiently reposition fragments without full re-render.
-   *
-   * @param el - The HTMLElement representing the fragment to update
-   * @param fragment - The fragment data containing updated position and dimensions
-   * @param section - The document section ('body', 'header', 'footer') containing this fragment.
-   *                  Affects PM position validation - only body sections validate PM positions.
-   *                  If undefined, defaults to 'body' section behavior.
-   */
-  private updateFragmentElement(
-    el: HTMLElement,
-    fragment: Fragment,
-    section?: 'body' | 'header' | 'footer',
-    resolvedItem?: ResolvedPaintItem,
-  ): void {
-    // Narrow to fragment-kind resolved items (excludes ResolvedGroupItem)
-    const fragmentItem = resolvedItem?.kind === 'fragment' ? resolvedItem : undefined;
-
-    if (fragmentItem) {
-      this.applyResolvedFragmentFrame(el, fragmentItem, fragment, section);
-    } else {
-      this.applyFragmentFrame(el, fragment, section);
-      if (fragment.kind === 'image' || fragment.kind === 'drawing') {
-        el.style.height = `${fragment.height}px`;
-        this.applyFragmentWrapperZIndex(el, fragment);
-      }
-    }
-  }
-
-  /**
-   * Applies fragment positioning, dimensions, and metadata to an HTML element.
-   * Sets CSS positioning, block ID, and PM position data attributes for paragraph fragments.
-   *
-   * @param el - The HTMLElement to apply fragment properties to
-   * @param fragment - The fragment data containing position, dimensions, and PM position information
-   * @param section - The document section ('body', 'header', 'footer') containing this fragment.
-   *                  Controls PM position validation behavior:
-   *                  - 'body' or undefined: PM positions are validated and required for paragraph fragments
-   *                  - 'header' or 'footer': PM position validation is skipped (these sections have separate PM coordinate spaces)
-   *                  When undefined, defaults to 'body' section behavior (validation enabled).
+   * Applies fragment positioning, dimensions, and metadata to an HTML element.
+   *
+   * @param el - The HTMLElement to apply fragment properties to
+   * @param fragment - The fragment data containing position, dimensions, and PM position information
+   * @param section - The document section ('body', 'header', 'footer') containing this fragment.
+   *                  Controls PM position validation behavior:
+   *                  - 'body' or undefined: PM positions are validated and required for paragraph fragments
+   *                  - 'header' or 'footer': PM position validation is skipped (these sections have separate PM coordinate spaces)
+   *                  When undefined, defaults to 'body' section behavior (validation enabled).
    */
   private applyFragmentFrame(el: HTMLElement, fragment: Fragment, section?: 'body' | 'header' | 'footer'): void {
     el.style.left = `${fragment.x}px`;
@@ -6873,33 +4019,7 @@ export class DomPainter {
     }
 
     if (fragment.kind === 'para') {
-      // Assert PM positions are present for paragraph fragments
-      // Only validate for body sections - header/footer fragments have their own PM coordinate space
-      // Note: undefined section defaults to body section behavior (validation enabled)
-      if (section === 'body' || section === undefined) {
-        assertFragmentPmPositions(fragment, 'paragraph fragment');
-      }
-
-      if (fragment.pmStart != null) {
-        el.dataset.pmStart = String(fragment.pmStart);
-      } else {
-        delete el.dataset.pmStart;
-      }
-      if (fragment.pmEnd != null) {
-        el.dataset.pmEnd = String(fragment.pmEnd);
-      } else {
-        delete el.dataset.pmEnd;
-      }
-      if (fragment.continuesFromPrev) {
-        el.dataset.continuesFromPrev = 'true';
-      } else {
-        delete el.dataset.continuesFromPrev;
-      }
-      if (fragment.continuesOnNext) {
-        el.dataset.continuesOnNext = 'true';
-      } else {
-        delete el.dataset.continuesOnNext;
-      }
+      applyParagraphFragmentPmAttributes(el, fragment, section);
     }
   }
 
@@ -6920,36 +4040,7 @@ export class DomPainter {
     }
 
     if (fragment.kind === 'para') {
-      if (section === 'body' || section === undefined) {
-        assertFragmentPmPositions(fragment, 'paragraph fragment');
-      }
-      // Narrow to ResolvedFragmentItem to access para-specific resolved fields.
-      // resolveLayout copies pmStart/pmEnd/continuesFromPrev/continuesOnNext from the
-      // source paragraph onto the resolved item when present, so reading off the
-      // back-pointer would be redundant (SD-2957).
-      const resolvedFrag = resolvedItem as ResolvedFragmentItem | undefined;
-      const pmStart = resolvedFrag?.pmStart;
-      if (pmStart != null) {
-        el.dataset.pmStart = String(pmStart);
-      } else {
-        delete el.dataset.pmStart;
-      }
-      const pmEnd = resolvedFrag?.pmEnd;
-      if (pmEnd != null) {
-        el.dataset.pmEnd = String(pmEnd);
-      } else {
-        delete el.dataset.pmEnd;
-      }
-      if (resolvedFrag?.continuesFromPrev) {
-        el.dataset.continuesFromPrev = 'true';
-      } else {
-        delete el.dataset.continuesFromPrev;
-      }
-      if (resolvedFrag?.continuesOnNext) {
-        el.dataset.continuesOnNext = 'true';
-      } else {
-        delete el.dataset.continuesOnNext;
-      }
+      applyParagraphFragmentPmAttributes(el, fragment, section, resolvedItem as ResolvedFragmentItem | undefined);
     }
   }
 
@@ -7309,8 +4400,6 @@ const computeSdtBoundaries = (
   return boundaries;
 };
 
-// computeBetweenBorderFlags — moved to features/paragraph-borders/
-
 const fragmentKey = (fragment: Fragment): string => {
   switch (fragment.kind) {
     case 'para':
@@ -7371,54 +4460,6 @@ const getSdtMetadataVersion = (metadata: SdtMetadata | null | undefined): string
   return [metadata.type, getSdtMetadataLockMode(metadata), getSdtMetadataId(metadata)].join(':');
 };
 
-/**
- * Type guard to validate list marker attributes structure.
- *
- * @param attrs - The paragraph attributes to validate
- * @returns True if the attrs contain valid list marker properties
- */
-const hasListMarkerProperties = (
-  attrs: unknown,
-): attrs is {
-  numberingProperties: { numId?: number | string; ilvl?: number };
-  wordLayout?: { marker?: { markerText?: string } };
-} => {
-  if (!attrs || typeof attrs !== 'object') return false;
-  const obj = attrs as Record<string, unknown>;
-
-  if (!obj.numberingProperties || typeof obj.numberingProperties !== 'object') return false;
-  const numProps = obj.numberingProperties as Record<string, unknown>;
-
-  // Validate numId is number or string if present
-  if ('numId' in numProps) {
-    const numId = numProps.numId;
-    if (typeof numId !== 'number' && typeof numId !== 'string') return false;
-  }
-
-  // Validate ilvl is number if present
-  if ('ilvl' in numProps) {
-    const ilvl = numProps.ilvl;
-    if (typeof ilvl !== 'number') return false;
-  }
-
-  // Validate wordLayout structure if present
-  if ('wordLayout' in obj && obj.wordLayout !== undefined) {
-    if (typeof obj.wordLayout !== 'object' || obj.wordLayout === null) return false;
-    const wordLayout = obj.wordLayout as Record<string, unknown>;
-
-    if ('marker' in wordLayout && wordLayout.marker !== undefined) {
-      if (typeof wordLayout.marker !== 'object' || wordLayout.marker === null) return false;
-      const marker = wordLayout.marker as Record<string, unknown>;
-
-      if ('markerText' in marker && marker.markerText !== undefined) {
-        if (typeof marker.markerText !== 'string') return false;
-      }
-    }
-  }
-
-  return true;
-};
-
 /**
  * Derives a version string for a flow block based on its content and styling properties.
  *
@@ -7450,144 +4491,7 @@ const hasListMarkerProperties = (
  */
 const deriveBlockVersion = (block: FlowBlock): string => {
   if (block.kind === 'paragraph') {
-    // Include list marker info in version to detect indent/marker changes
-    const markerVersion = hasListMarkerProperties(block.attrs)
-      ? `marker:${block.attrs.numberingProperties.numId ?? ''}:${block.attrs.numberingProperties.ilvl ?? 0}:${block.attrs.wordLayout?.marker?.markerText ?? ''}`
-      : '';
-
-    const runsVersion = block.runs
-      .map((run) => {
-        // Handle ImageRun
-        if (run.kind === 'image') {
-          const imgRun = run as ImageRun;
-          return [
-            'img',
-            imgRun.src,
-            imgRun.width,
-            imgRun.height,
-            imgRun.alt ?? '',
-            imgRun.title ?? '',
-            imgRun.clipPath ?? '',
-            imgRun.distTop ?? '',
-            imgRun.distBottom ?? '',
-            imgRun.distLeft ?? '',
-            imgRun.distRight ?? '',
-            readClipPathValue((imgRun as { clipPath?: unknown }).clipPath),
-            // Note: pmStart/pmEnd intentionally excluded to prevent O(n) change detection
-          ].join(',');
-        }
-
-        // Handle LineBreakRun
-        if (run.kind === 'lineBreak') {
-          // Note: pmStart/pmEnd intentionally excluded to prevent O(n) change detection
-          return 'linebreak';
-        }
-
-        // Handle TabRun
-        if (run.kind === 'tab') {
-          // Note: pmStart/pmEnd intentionally excluded to prevent O(n) change detection
-          return [run.text ?? '', 'tab'].join(',');
-        }
-
-        // Handle FieldAnnotationRun
-        if (run.kind === 'fieldAnnotation') {
-          const size = run.size ? `${run.size.width ?? ''}x${run.size.height ?? ''}` : '';
-          const highlighted = run.highlighted !== false ? 1 : 0;
-          return [
-            'field',
-            run.variant ?? '',
-            run.displayLabel ?? '',
-            run.fieldColor ?? '',
-            run.borderColor ?? '',
-            highlighted,
-            run.hidden ? 1 : 0,
-            run.visibility ?? '',
-            run.imageSrc ?? '',
-            run.linkUrl ?? '',
-            run.rawHtml ?? '',
-            size,
-            run.fontFamily ?? '',
-            run.fontSize ?? '',
-            run.textColor ?? '',
-            run.textHighlight ?? '',
-            run.bold ? 1 : 0,
-            run.italic ? 1 : 0,
-            run.underline ? 1 : 0,
-            run.fieldId ?? '',
-            run.fieldType ?? '',
-          ].join(',');
-        }
-
-        // Handle TextRun (kind is 'text' or undefined)
-        const textRun = run as TextRun;
-        const trackedChangeVersion = textRun.trackedChange
-          ? [
-              textRun.trackedChange.kind ?? '',
-              textRun.trackedChange.id ?? '',
-              textRun.trackedChange.storyKey ?? '',
-              textRun.trackedChange.author ?? '',
-              textRun.trackedChange.authorEmail ?? '',
-              textRun.trackedChange.authorImage ?? '',
-              textRun.trackedChange.date ?? '',
-              textRun.trackedChange.before ? JSON.stringify(textRun.trackedChange.before) : '',
-              textRun.trackedChange.after ? JSON.stringify(textRun.trackedChange.after) : '',
-            ].join(':')
-          : '';
-        return [
-          textRun.text ?? '',
-          textRun.fontFamily,
-          textRun.fontSize,
-          textRun.bold ? 1 : 0,
-          textRun.italic ? 1 : 0,
-          textRun.color ?? '',
-          // Text decorations - ensures DOM updates when decoration properties change.
-          textRun.underline?.style ?? '',
-          textRun.underline?.color ?? '',
-          textRun.strike ? 1 : 0,
-          textRun.highlight ?? '',
-          textRun.letterSpacing != null ? textRun.letterSpacing : '',
-          textRun.vertAlign ?? '',
-          textRun.baselineShift != null ? textRun.baselineShift : '',
-          // Note: pmStart/pmEnd intentionally excluded to prevent O(n) change detection
-          textRun.token ?? '',
-          // Tracked changes - force re-render when any rendered tracked-change metadata changes.
-          trackedChangeVersion,
-          // Comment annotations - force re-render when comments are enabled/disabled
-          textRun.comments?.length ?? 0,
-        ].join(',');
-      })
-      .join('|');
-
-    // Include paragraph-level attributes that affect rendering (alignment, spacing, indent, etc.)
-    // This ensures DOM updates when toolbar commands like "align center" change these properties.
-    const attrs = block.attrs as ParagraphAttrs | undefined;
-
-    const paragraphAttrsVersion = attrs
-      ? [
-          attrs.alignment ?? '',
-          attrs.spacing?.before ?? '',
-          attrs.spacing?.after ?? '',
-          attrs.spacing?.line ?? '',
-          attrs.spacing?.lineRule ?? '',
-          attrs.indent?.left ?? '',
-          attrs.indent?.right ?? '',
-          attrs.indent?.firstLine ?? '',
-          attrs.indent?.hanging ?? '',
-          attrs.borders ? hashParagraphBorders(attrs.borders) : '',
-          attrs.shading?.fill ?? '',
-          attrs.shading?.color ?? '',
-          getParagraphInlineDirection(attrs) ?? '',
-          attrs.tabs?.length ? JSON.stringify(attrs.tabs) : '',
-        ].join(':')
-      : '';
-
-    // Include SDT metadata so lock-mode (and other SDT property) changes invalidate the cache.
-    const sdtAttrs = (block.attrs as ParagraphAttrs | undefined)?.sdt;
-    const sdtVersion = getSdtMetadataVersion(sdtAttrs);
-
-    // Combine marker version, runs version, paragraph attrs version, and SDT version
-    const parts = [markerVersion, runsVersion, paragraphAttrsVersion, sdtVersion].filter(Boolean);
-    return parts.join('|');
+    return deriveParagraphBlockVersion(block, getSdtMetadataVersion, readClipPathValue);
   }
 
   if (block.kind === 'image') {
@@ -7738,54 +4642,7 @@ const deriveBlockVersion = (block: FlowBlock): string => {
         for (const cellBlock of cellBlocks) {
           hash = hashString(hash, cellBlock?.kind ?? 'unknown');
           if (cellBlock?.kind === 'paragraph') {
-            const paragraphBlock = cellBlock as ParagraphBlock;
-            const runs = paragraphBlock.runs ?? [];
-            hash = hashNumber(hash, runs.length);
-
-            // Include paragraph-level attributes that affect rendering
-            // (alignment, spacing, indent, etc.) - fixes toolbar commands not updating tables
-            const attrs = paragraphBlock.attrs as ParagraphAttrs | undefined;
-
-            if (attrs) {
-              hash = hashString(hash, attrs.alignment ?? '');
-              hash = hashNumber(hash, attrs.spacing?.before ?? 0);
-              hash = hashNumber(hash, attrs.spacing?.after ?? 0);
-              hash = hashNumber(hash, attrs.spacing?.line ?? 0);
-              hash = hashString(hash, attrs.spacing?.lineRule ?? '');
-              hash = hashNumber(hash, attrs.indent?.left ?? 0);
-              hash = hashNumber(hash, attrs.indent?.right ?? 0);
-              hash = hashNumber(hash, attrs.indent?.firstLine ?? 0);
-              hash = hashNumber(hash, attrs.indent?.hanging ?? 0);
-              hash = hashString(hash, attrs.shading?.fill ?? '');
-              hash = hashString(hash, attrs.shading?.color ?? '');
-              hash = hashString(hash, getParagraphInlineDirection(attrs) ?? '');
-              if (attrs.borders) {
-                hash = hashString(hash, hashParagraphBorders(attrs.borders));
-              }
-            }
-
-            for (const run of runs) {
-              // Only text runs have .text property; ImageRun does not
-              if ('text' in run && typeof run.text === 'string') {
-                hash = hashString(hash, run.text);
-              }
-              hash = hashNumber(hash, run.pmStart ?? -1);
-              hash = hashNumber(hash, run.pmEnd ?? -1);
-
-              // Include run formatting properties that affect rendering
-              // (color, highlight, bold, italic, etc.) - fixes toolbar commands not updating tables
-              hash = hashString(hash, getRunStringProp(run, 'color'));
-              hash = hashString(hash, getRunStringProp(run, 'highlight'));
-              hash = hashString(hash, getRunBooleanProp(run, 'bold') ? '1' : '');
-              hash = hashString(hash, getRunBooleanProp(run, 'italic') ? '1' : '');
-              hash = hashNumber(hash, getRunNumberProp(run, 'fontSize'));
-              hash = hashString(hash, getRunStringProp(run, 'fontFamily'));
-              hash = hashString(hash, getRunUnderlineStyle(run));
-              hash = hashString(hash, getRunUnderlineColor(run));
-              hash = hashString(hash, getRunBooleanProp(run, 'strike') ? '1' : '');
-              hash = hashString(hash, getRunStringProp(run, 'vertAlign'));
-              hash = hashNumber(hash, getRunNumberProp(run, 'baselineShift'));
-            }
+            hash = hashParagraphBlockForTableVersion(hash, cellBlock as ParagraphBlock, { hashString, hashNumber });
           } else if (cellBlock?.kind) {
             // Non-paragraph cell blocks participate in the parent table version
             // through their own block-level signatures. layout-bridge/cache.ts
@@ -7832,105 +4689,6 @@ const deriveBlockVersion = (block: FlowBlock): string => {
   return block.id;
 };
 
-const DEFAULT_SUPERSCRIPT_RAISE_RATIO = 0.33;
-const DEFAULT_SUBSCRIPT_LOWER_RATIO = 0.14;
-
-const hasVerticalPositioning = (run: TextRun): boolean =>
-  normalizeBaselineShift(run.baselineShift) != null || run.vertAlign === 'superscript' || run.vertAlign === 'subscript';
-
-const applyRunVerticalPositioning = (element: HTMLElement, run: TextRun): void => {
-  // Vertically shifted runs should use a tight inline box. If they inherit the
-  // parent line's full line-height, the glyph remains visually low inside an
-  // oversized inline box even when the superscript/subscript offset is correct.
-  if (hasVerticalPositioning(run)) {
-    element.style.lineHeight = '1';
-  }
-
-  const explicitBaselineShift = normalizeBaselineShift(run.baselineShift);
-  if (explicitBaselineShift != null) {
-    element.style.verticalAlign = `${explicitBaselineShift}pt`;
-    return;
-  }
-
-  if (run.vertAlign === 'superscript') {
-    const baseFontSize = resolveBaseFontSizeForVerticalText(run.fontSize, run);
-    element.style.verticalAlign = `${baseFontSize * DEFAULT_SUPERSCRIPT_RAISE_RATIO}px`;
-    return;
-  }
-
-  if (run.vertAlign === 'subscript') {
-    const baseFontSize = resolveBaseFontSizeForVerticalText(run.fontSize, run);
-    element.style.verticalAlign = `${-(baseFontSize * DEFAULT_SUBSCRIPT_LOWER_RATIO)}px`;
-    return;
-  }
-
-  if (run.vertAlign === 'baseline') {
-    element.style.verticalAlign = 'baseline';
-  }
-};
-
-/**
- * Applies run styling properties to a DOM element.
- *
- * @param element - The HTML element to style
- * @param run - The run object containing styling information
- * @param _isLink - Whether this run is part of a hyperlink. Note: This parameter
- *                  is kept for API compatibility but no longer affects behavior -
- *                  inline colors are now applied to all runs (including links) to
- *                  ensure OOXML hyperlink character styles appear correctly.
- */
-const applyRunStyles = (element: HTMLElement, run: Run, _isLink = false): void => {
-  if (
-    run.kind === 'tab' ||
-    run.kind === 'image' ||
-    run.kind === 'lineBreak' ||
-    run.kind === 'break' ||
-    run.kind === 'fieldAnnotation' ||
-    run.kind === 'math'
-  ) {
-    // Tab, image, lineBreak, break, and fieldAnnotation runs don't have text styling properties
-    return;
-  }
-
-  element.style.fontFamily = run.fontFamily;
-  element.style.fontSize = `${run.fontSize}px`;
-  if (run.bold) element.style.fontWeight = 'bold';
-  if (run.italic) element.style.fontStyle = 'italic';
-
-  // Apply inline color even for links so OOXML hyperlink styles appear when CSS is absent
-  if (run.color) element.style.color = run.color;
-
-  if (run.letterSpacing != null) {
-    element.style.letterSpacing = `${run.letterSpacing}px`;
-  }
-  if (run.highlight) {
-    element.style.backgroundColor = run.highlight;
-  }
-  if (run.textTransform) {
-    element.style.textTransform = run.textTransform;
-  }
-
-  // Apply text decorations from the run. Even for links, inline decorations should reflect
-  // the document styling (tests assert underline presence on anchors).
-  const decorations: string[] = [];
-  if (run.underline) {
-    decorations.push('underline');
-    const u = run.underline;
-    element.style.textDecorationStyle = u.style && u.style !== 'single' ? u.style : 'solid';
-    if (u.color) {
-      element.style.textDecorationColor = u.color;
-    }
-  }
-  if (run.strike) {
-    decorations.push('line-through');
-  }
-  if (decorations.length > 0) {
-    element.style.textDecorationLine = decorations.join(' ');
-  }
-
-  applyRunVerticalPositioning(element, run);
-};
-
 const CLIP_PATH_PREFIXES = ['inset(', 'polygon(', 'circle(', 'ellipse(', 'path(', 'rect('];
 
 const readClipPathValue = (value: unknown): string => {
@@ -7954,72 +4712,6 @@ const resolveBlockClipPath = (block: unknown): string => {
   return readClipPathValue(record.clipPath) || resolveClipPathFromAttrs(record.attrs);
 };
 
-/**
- * Applies data-* attributes from a text run to a DOM element.
- * Validates attribute names and safely sets them on the element.
- * Invalid or unsafe attributes are skipped with development-mode logging.
- *
- * @param element - The HTML element to apply attributes to
- * @param dataAttrs - Record of data-* attribute key-value pairs from the text run
- *
- * @example
- * ```typescript
- * const span = document.createElement('span');
- * applyRunDataAttributes(span, { 'data-id': '123', 'data-name': 'test' });
- * // span now has: <span data-id="123" data-name="test"></span>
- * ```
- */
-export const applyRunDataAttributes = (element: HTMLElement, dataAttrs?: Record<string, string>): void => {
-  if (!dataAttrs) return;
-  Object.entries(dataAttrs).forEach(([key, value]) => {
-    if (typeof key !== 'string' || !key.toLowerCase().startsWith('data-')) return;
-    if (typeof value !== 'string') return;
-    try {
-      element.setAttribute(key, value);
-    } catch (error) {
-      if (process.env.NODE_ENV === 'development') {
-        console.warn(`[DomPainter] Failed to set data attribute "${key}":`, error);
-      }
-    }
-  });
-};
-
-const applyParagraphBlockStyles = (element: HTMLElement, attrs?: ParagraphAttrs): void => {
-  if (!attrs) return;
-  if (attrs.styleId) {
-    element.setAttribute('styleid', attrs.styleId);
-  }
-  applyRtlStyles(element, attrs);
-  if ((attrs as Record<string, unknown>).dropCap) {
-    element.classList.add('sd-editor-dropcap');
-  }
-  const indent = attrs.indent;
-  if (indent) {
-    // Only apply positive indents as padding.
-    // Negative indents are handled by fragment positioning in the layout engine.
-    if (indent.left && indent.left > 0) {
-      element.style.paddingLeft = `${indent.left}px`;
-    }
-    if (indent.right && indent.right > 0) {
-      element.style.paddingRight = `${indent.right}px`;
-    }
-    // Skip textIndent when left indent is negative - fragment positioning handles the indent,
-    // and per-line paddingLeft handles the hanging indent for body lines.
-    const hasNegativeLeftIndent = indent.left != null && indent.left < 0;
-    if (!hasNegativeLeftIndent) {
-      const textIndent = (indent.firstLine ?? 0) - (indent.hanging ?? 0);
-      if (textIndent) {
-        element.style.textIndent = `${textIndent}px`;
-      }
-    }
-  }
-};
-
-// getParagraphBorderBox, createParagraphDecorationLayers, applyParagraphBorderStyles,
-// setBorderSideStyle, applyParagraphShadingStyles — moved to features/paragraph-borders/
-
-// applyParagraphShadingStyles — moved to features/paragraph-borders/border-layer.ts
-
 const applyStyles = (el: HTMLElement, styles: Partial<CSSStyleDeclaration>): void => {
   Object.entries(styles).forEach(([key, value]) => {
     if (value != null && value !== '' && key in el.style) {
@@ -8027,52 +4719,3 @@ const applyStyles = (el: HTMLElement, styles: Partial<CSSStyleDeclaration>): voi
     }
   });
 };
-
-const resolveRunText = (run: Run, context: FragmentRenderContext): string => {
-  const runToken = 'token' in run ? run.token : undefined;
-
-  if (run.kind === 'tab') {
-    return run.text;
-  }
-  if (run.kind === 'image') {
-    // Image runs don't have text content
-    return '';
-  }
-  if (run.kind === 'lineBreak') {
-    // Line break runs don't render text - the measurer creates new lines for them
-    return '';
-  }
-  if (run.kind === 'break') {
-    // Break runs don't render text - the measurer creates new lines for them
-    return '';
-  }
-  if (!('text' in run)) {
-    // Safety check - if run doesn't have text property, return empty string
-    return '';
-  }
-  if (!runToken) {
-    return run.text ?? '';
-  }
-  if (runToken === 'pageNumber') {
-    return context.pageNumberText ?? String(context.pageNumber);
-  }
-  if (runToken === 'totalPageCount') {
-    return context.totalPages ? String(context.totalPages) : (run.text ?? '');
-  }
-  return run.text ?? '';
-};
-
-const RTL_DATE_LIKE_TOKEN_RE = /^-?\d+(?:[./-]\d+)+$/;
-const RLM = '\u200F';
-
-// AIDEV-NOTE: SD-3098 Word-parity workaround for RTL date-like tokens. We inject
-// RLM around separators at paint time only (DOM text), never into PM/model/export.
-// Word reorders numerics inside RTL date strings via internal RLM treatment; the
-// browser's UBA does not. This is intentionally narrow - only matches date-like
-// numeric patterns - so non-date numeric content is unaffected.
-const normalizeRtlDateTokenForWordParity = (text: string): string => {
-  if (!RTL_DATE_LIKE_TOKEN_RE.test(text)) {
-    return text;
-  }
-  return text.replace(/[./-]/g, (separator) => `${RLM}${separator}${RLM}`);
-};
diff --git a/packages/layout-engine/painters/dom/src/runs/field-annotation-run.ts b/packages/layout-engine/painters/dom/src/runs/field-annotation-run.ts
new file mode 100644
index 0000000000..077e174f4b
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/field-annotation-run.ts
@@ -0,0 +1,238 @@
+import type { FieldAnnotationRun } from '@superdoc/contracts';
+import { sanitizeHref } from '@superdoc/url-validation';
+import { DOM_CLASS_NAMES } from '../constants.js';
+import { assertPmPositions } from '../pm-position-validation.js';
+import type { RunRenderContext } from './types.js';
+import { BROWSER_DEFAULT_FONT_SIZE } from './text-run.js';
+import { MAX_DATA_URL_LENGTH, VALID_IMAGE_DATA_URL } from './image-run.js';
+
+/**
+ * Renders a FieldAnnotationRun as an inline "pill" element matching super-editor's visual appearance.
+ *
+ * Field annotations are styled inline elements that display form fields with:
+ * - Outer span with border, border-radius, padding, and background color
+ * - Inner span containing the displayLabel or type-specific content (image, link, etc.)
+ *
+ * @param run - The FieldAnnotationRun to render containing field configuration and styling
+ * @returns HTMLElement (span) or null if document is not available
+ */
+export const renderFieldAnnotationRun = (run: FieldAnnotationRun, context: RunRenderContext): HTMLElement | null => {
+  // Handle hidden fields
+  if (run.hidden) {
+    const hidden = context.doc.createElement('span');
+    hidden.style.display = 'none';
+    if (run.pmStart != null) hidden.dataset.pmStart = String(run.pmStart);
+    if (run.pmEnd != null) hidden.dataset.pmEnd = String(run.pmEnd);
+    hidden.dataset.layoutEpoch = String(context.layoutEpoch);
+    return hidden;
+  }
+
+  // Default styling values (matching super-editor's FieldAnnotationView)
+  const defaultBorderColor = '#b015b3';
+  const defaultFieldColor = '#980043';
+
+  // Create outer annotation wrapper
+  const annotation = context.doc.createElement('span');
+  annotation.classList.add(DOM_CLASS_NAMES.ANNOTATION);
+  annotation.setAttribute('aria-label', 'Field annotation');
+
+  // Apply pill styling (unless highlighted is explicitly false)
+  const showHighlight = run.highlighted !== false;
+  if (showHighlight) {
+    const borderColor = run.borderColor || defaultBorderColor;
+    annotation.style.border = `2px solid ${borderColor}`;
+    annotation.style.borderRadius = '2px';
+    annotation.style.padding = '1px 2px';
+    annotation.style.boxSizing = 'border-box';
+
+    // Apply background color with alpha
+    const fieldColor = run.fieldColor || defaultFieldColor;
+    // Add alpha to make it semi-transparent (matching super-editor's behavior)
+    const bgColor = fieldColor.length === 7 ? `${fieldColor}33` : fieldColor;
+    // textHighlight takes precedence over fieldColor
+    if (run.textHighlight) {
+      annotation.style.backgroundColor = run.textHighlight;
+    } else {
+      annotation.style.backgroundColor = bgColor;
+    }
+  }
+
+  // Apply visibility
+  if (run.visibility === 'hidden') {
+    annotation.style.visibility = 'hidden';
+  }
+
+  // Apply explicit size if present
+  if (run.size) {
+    if (run.size.width) {
+      const requiresImage = run.variant === 'image' || run.variant === 'signature';
+      if (!requiresImage || run.imageSrc) {
+        annotation.style.width = `${run.size.width}px`;
+        annotation.style.display = 'inline-block';
+        annotation.style.overflow = 'hidden';
+      }
+    }
+    if (run.size.height && run.variant !== 'html') {
+      const requiresImage = run.variant === 'image' || run.variant === 'signature';
+      if (!requiresImage || run.imageSrc) {
+        annotation.style.height = `${run.size.height}px`;
+      }
+    }
+  }
+
+  // Apply typography to the annotation element.
+  // Always set a font-size so the annotation never inherits fontSize: 0 from
+  // the line container (which zeroes it to eliminate the CSS strut). When the
+  // run has no explicit fontSize, fall back to BROWSER_DEFAULT_FONT_SIZE (the
+  // browser default that was previously inherited before the strut fix).
+  if (run.fontFamily) {
+    annotation.style.fontFamily = run.fontFamily;
+  }
+  {
+    const fontSize = run.fontSize
+      ? typeof run.fontSize === 'number'
+        ? `${run.fontSize}pt`
+        : run.fontSize
+      : BROWSER_DEFAULT_FONT_SIZE;
+    annotation.style.fontSize = fontSize;
+  }
+  if (run.textColor) {
+    annotation.style.color = run.textColor;
+  }
+  if (run.bold) {
+    annotation.style.fontWeight = 'bold';
+  }
+  if (run.italic) {
+    annotation.style.fontStyle = 'italic';
+  }
+  if (run.underline) {
+    annotation.style.textDecoration = 'underline';
+  }
+
+  // Apply z-index for proper layering
+  annotation.style.zIndex = '1';
+
+  // Create inner content wrapper
+  const content = context.doc.createElement('span');
+  content.classList.add(DOM_CLASS_NAMES.ANNOTATION_CONTENT);
+  content.style.pointerEvents = 'none';
+  content.setAttribute('contenteditable', 'false');
+
+  // Render type-specific content
+  switch (run.variant) {
+    case 'image':
+    case 'signature': {
+      if (run.imageSrc) {
+        const img = context.doc.createElement('img');
+        // SECURITY: Validate data URLs
+        const isDataUrl = run.imageSrc.startsWith('data:');
+        if (isDataUrl) {
+          if (run.imageSrc.length <= MAX_DATA_URL_LENGTH && VALID_IMAGE_DATA_URL.test(run.imageSrc)) {
+            img.src = run.imageSrc;
+          } else {
+            // Invalid data URL - fall back to displayLabel
+            content.textContent = run.displayLabel;
+            break;
+          }
+        } else {
+          const sanitized = sanitizeHref(run.imageSrc);
+          if (sanitized) {
+            img.src = sanitized.href;
+          } else {
+            content.textContent = run.displayLabel;
+            break;
+          }
+        }
+        img.alt = run.displayLabel;
+        img.style.height = 'auto';
+        img.style.maxWidth = '100%';
+        img.style.pointerEvents = 'none';
+        img.style.verticalAlign = 'middle';
+        if (run.variant === 'signature') {
+          img.style.maxHeight = '28px';
+        }
+        content.appendChild(img);
+        annotation.style.display = 'inline-block';
+        content.style.display = 'inline-block';
+        // Prevent line-height inheritance from the line container from breaking image layout.
+        annotation.style.lineHeight = 'normal';
+        content.style.lineHeight = 'normal';
+      } else {
+        content.textContent = run.displayLabel || (run.variant === 'signature' ? 'Signature' : '');
+      }
+      break;
+    }
+
+    case 'link': {
+      if (run.linkUrl) {
+        const link = context.doc.createElement('a');
+        const sanitized = sanitizeHref(run.linkUrl);
+        if (sanitized) {
+          link.href = sanitized.href;
+          link.target = '_blank';
+          link.rel = 'noopener noreferrer';
+          link.textContent = run.linkUrl;
+          link.style.textDecoration = 'none';
+          content.style.pointerEvents = 'all';
+          content.appendChild(link);
+        } else {
+          content.textContent = run.displayLabel;
+        }
+      } else {
+        content.textContent = run.displayLabel;
+      }
+      break;
+    }
+
+    case 'html': {
+      if (run.rawHtml && typeof run.rawHtml === 'string') {
+        // Note: rawHtml is expected to be sanitized upstream.
+        content.innerHTML = run.rawHtml.trim();
+        annotation.style.display = 'inline-block';
+        content.style.display = 'inline-block';
+        // Prevent line-height inheritance from the line container from affecting HTML layout.
+        annotation.style.lineHeight = 'normal';
+        content.style.lineHeight = 'normal';
+      } else {
+        content.textContent = run.displayLabel;
+      }
+      break;
+    }
+
+    case 'text':
+    case 'checkbox':
+    default: {
+      content.textContent = run.displayLabel;
+      break;
+    }
+  }
+
+  annotation.appendChild(content);
+
+  // Apply data attributes for field tracking
+  annotation.dataset.type = run.variant;
+  annotation.dataset.displayLabel = run.displayLabel;
+  if (run.fieldId) {
+    annotation.dataset.fieldId = run.fieldId;
+  }
+  if (run.fieldType) {
+    annotation.dataset.fieldType = run.fieldType;
+  }
+
+  // Assert PM positions are present for cursor fallback
+  assertPmPositions(run, 'field annotation run');
+
+  // Apply PM position tracking
+  if (run.pmStart != null) {
+    annotation.dataset.pmStart = String(run.pmStart);
+  }
+  if (run.pmEnd != null) {
+    annotation.dataset.pmEnd = String(run.pmEnd);
+  }
+  annotation.dataset.layoutEpoch = String(context.layoutEpoch);
+
+  // Apply SDT metadata
+  context.applySdtDataset(annotation, run.sdt);
+
+  return annotation;
+};
diff --git a/packages/layout-engine/painters/dom/src/runs/formatting-marks.ts b/packages/layout-engine/painters/dom/src/runs/formatting-marks.ts
new file mode 100644
index 0000000000..9e59ea50e9
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/formatting-marks.ts
@@ -0,0 +1,111 @@
+import type { Line, Run, TextRun } from '@superdoc/contracts';
+import { toCssFontFamily } from '@superdoc/font-utils';
+
+export const setTextContentWithFormattingSpaceMarks = (
+  element: HTMLElement,
+  text: string,
+  doc: Document,
+  showFormattingMarks: boolean,
+): void => {
+  if (!showFormattingMarks || !text.includes(' ')) {
+    element.textContent = text;
+    return;
+  }
+
+  element.textContent = '';
+  let chunkStart = 0;
+  for (let index = 0; index < text.length; index += 1) {
+    if (text[index] !== ' ') continue;
+
+    if (index > chunkStart) {
+      element.appendChild(doc.createTextNode(text.slice(chunkStart, index)));
+    }
+
+    const space = doc.createElement('span');
+    space.classList.add('superdoc-formatting-space-mark');
+    space.textContent = ' ';
+    element.appendChild(space);
+    chunkStart = index + 1;
+  }
+
+  if (chunkStart < text.length) {
+    element.appendChild(doc.createTextNode(text.slice(chunkStart)));
+  }
+};
+
+const findLastTextRun = (runs: Run[]): { run: TextRun; index: number } | null => {
+  for (let index = runs.length - 1; index >= 0; index -= 1) {
+    const run = runs[index];
+    if (run && (run.kind === 'text' || run.kind === undefined) && 'text' in run) {
+      return { run: run as TextRun, index };
+    }
+  }
+  return null;
+};
+
+export const appendFormattingParagraphMark = (
+  lineEl: HTMLElement,
+  line: Line,
+  runs: Run[],
+  leftOffsetPx: number,
+  availableWidth: number,
+  hasExplicitPositioning: boolean,
+  doc: Document,
+  showFormattingMarks: boolean,
+): void => {
+  if (!showFormattingMarks) return;
+  const lastRun = runs.length > 0 ? runs[runs.length - 1] : null;
+  if (lastRun) {
+    const lastRunIndex = runs.length - 1;
+    if (line.toRun < lastRunIndex) return;
+    if (
+      line.toRun === lastRunIndex &&
+      (lastRun.kind === 'text' || lastRun.kind === undefined) &&
+      'text' in lastRun &&
+      line.toChar < lastRun.text.length
+    ) {
+      return;
+    }
+  }
+
+  const lastTextRun = findLastTextRun(runs);
+
+  const mark = doc.createElement('span');
+  mark.classList.add('superdoc-formatting-paragraph-mark');
+  mark.setAttribute('aria-hidden', 'true');
+  mark.textContent = '¶';
+
+  const run = lastTextRun?.run;
+  if (run) {
+    if (run.fontFamily) {
+      mark.style.fontFamily = toCssFontFamily(run.fontFamily) ?? run.fontFamily;
+    }
+    if (typeof run.fontSize === 'number') {
+      mark.style.fontSize = `${run.fontSize}px`;
+    }
+    if (run.bold) {
+      mark.style.fontWeight = 'bold';
+    }
+    if (run.italic) {
+      mark.style.fontStyle = 'italic';
+    }
+    if (run.letterSpacing != null) {
+      mark.style.letterSpacing = `${run.letterSpacing}px`;
+    }
+  }
+  mark.style.lineHeight = `${line.lineHeight}px`;
+
+  const lineWidth = line.naturalWidth ?? line.width ?? 0;
+  const alignmentSlack = Math.max(0, availableWidth - lineWidth);
+  const textAlign = lineEl.style.textAlign;
+  const alignmentOffset =
+    !hasExplicitPositioning && textAlign === 'center'
+      ? alignmentSlack / 2
+      : !hasExplicitPositioning && textAlign === 'right'
+        ? alignmentSlack
+        : 0;
+  const isRtl = lineEl.dir === 'rtl' || lineEl.style.direction === 'rtl';
+  const visualTextEndOffset = isRtl ? alignmentOffset : alignmentOffset + lineWidth;
+  mark.style.left = `${Math.max(0, leftOffsetPx + visualTextEndOffset)}px`;
+  lineEl.appendChild(mark);
+};
diff --git a/packages/layout-engine/painters/dom/src/runs/hash.ts b/packages/layout-engine/painters/dom/src/runs/hash.ts
new file mode 100644
index 0000000000..5274d242bd
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/hash.ts
@@ -0,0 +1,170 @@
+import type { Run, TextRun } from '@superdoc/contracts';
+
+/**
+ * Type guard to check if a run has a string property.
+ *
+ * @param run - The run to check
+ * @param prop - The property name to check
+ * @returns True if the run has the property and it's a string
+ */
+export const hasStringProp = (run: Run, prop: string): run is Run & Record<string, string> => {
+  return prop in run && typeof (run as Record<string, unknown>)[prop] === 'string';
+};
+
+/**
+ * Type guard to check if a run has a number property.
+ *
+ * @param run - The run to check
+ * @param prop - The property name to check
+ * @returns True if the run has the property and it's a number
+ */
+export const hasNumberProp = (run: Run, prop: string): run is Run & Record<string, number> => {
+  return prop in run && typeof (run as Record<string, unknown>)[prop] === 'number';
+};
+
+/**
+ * Type guard to check if a run has a boolean property.
+ *
+ * @param run - The run to check
+ * @param prop - The property name to check
+ * @returns True if the run has the property and it's a boolean
+ */
+export const hasBooleanProp = (run: Run, prop: string): run is Run & Record<string, boolean> => {
+  return prop in run && typeof (run as Record<string, unknown>)[prop] === 'boolean';
+};
+
+/**
+ * Safely gets a string property from a run, with type narrowing.
+ *
+ * @param run - The run to get the property from
+ * @param prop - The property name
+ * @returns The string value or empty string if not present
+ */
+export const getRunStringProp = (run: Run, prop: string): string => {
+  if (hasStringProp(run, prop)) {
+    return run[prop];
+  }
+  return '';
+};
+
+/**
+ * Safely gets a number property from a run, with type narrowing.
+ *
+ * @param run - The run to get the property from
+ * @param prop - The property name
+ * @returns The number value or 0 if not present
+ */
+export const getRunNumberProp = (run: Run, prop: string): number => {
+  if (hasNumberProp(run, prop)) {
+    return run[prop];
+  }
+  return 0;
+};
+
+/**
+ * Safely gets a boolean property from a run, with type narrowing.
+ *
+ * @param run - The run to get the property from
+ * @param prop - The property name
+ * @returns The boolean value or false if not present
+ */
+export const getRunBooleanProp = (run: Run, prop: string): boolean => {
+  if (hasBooleanProp(run, prop)) {
+    return run[prop];
+  }
+  return false;
+};
+
+/**
+ * Safely gets the underline style from a run.
+ * Handles the object-shaped underline property { style?, color? }.
+ *
+ * @param run - The run to get the underline style from
+ * @returns The underline style or empty string if not present
+ */
+export const getRunUnderlineStyle = (run: Run): string => {
+  if ('underline' in run && typeof run.underline === 'boolean') {
+    return run.underline ? 'single' : '';
+  }
+  if ('underline' in run && run.underline && typeof run.underline === 'object') {
+    return (run.underline as { style?: string }).style ?? '';
+  }
+  return '';
+};
+
+/**
+ * Safely gets the underline color from a run.
+ * Handles the object-shaped underline property { style?, color? }.
+ *
+ * @param run - The run to get the underline color from
+ * @returns The underline color or empty string if not present
+ */
+export const getRunUnderlineColor = (run: Run): string => {
+  if ('underline' in run && run.underline && typeof run.underline === 'object') {
+    return (run.underline as { color?: string }).color ?? '';
+  }
+  return '';
+};
+
+/**
+ * Applies data-* attributes from a text run to a DOM element.
+ * Validates attribute names and safely sets them on the element.
+ * Invalid or unsafe attributes are skipped with development-mode logging.
+ *
+ * @param element - The HTML element to apply attributes to
+ * @param dataAttrs - Record of data-* attribute key-value pairs from the text run
+ *
+ * @example
+ * ```typescript
+ * const span = document.createElement('span');
+ * applyRunDataAttributes(span, { 'data-id': '123', 'data-name': 'test' });
+ * // span now has: <span data-id="123" data-name="test"></span>
+ * ```
+ */
+export const applyRunDataAttributes = (element: HTMLElement, dataAttrs?: Record<string, string>): void => {
+  if (!dataAttrs) return;
+  Object.entries(dataAttrs).forEach(([key, value]) => {
+    if (typeof key !== 'string' || !key.toLowerCase().startsWith('data-')) return;
+    if (typeof value !== 'string') return;
+    try {
+      element.setAttribute(key, value);
+    } catch (error) {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(`[DomPainter] Failed to set data attribute "${key}":`, error);
+      }
+    }
+  });
+};
+
+const stableDataAttrs = (attrs: Record<string, string> | undefined): Record<string, string> | undefined => {
+  if (!attrs) return undefined;
+  const keys = Object.keys(attrs).sort();
+  const out: Record<string, string> = {};
+  keys.forEach((key) => {
+    out[key] = attrs[key]!;
+  });
+  return out;
+};
+
+export const textRunMergeSignature = (run: TextRun): string =>
+  JSON.stringify({
+    kind: run.kind ?? 'text',
+    fontFamily: run.fontFamily,
+    fontSize: run.fontSize,
+    bold: run.bold ?? false,
+    italic: run.italic ?? false,
+    letterSpacing: run.letterSpacing ?? null,
+    color: run.color ?? null,
+    underline: run.underline ?? null,
+    strike: run.strike ?? false,
+    highlight: run.highlight ?? null,
+    textTransform: run.textTransform ?? null,
+    token: run.token ?? null,
+    pageRefMetadata: run.pageRefMetadata ?? null,
+    trackedChange: run.trackedChange ?? null,
+    sdt: run.sdt ?? null,
+    link: run.link ?? null,
+    comments: run.comments ?? null,
+    dataAttrs: stableDataAttrs(run.dataAttrs) ?? null,
+    bidi: run.bidi ?? null,
+  });
diff --git a/packages/layout-engine/painters/dom/src/runs/image-run.ts b/packages/layout-engine/painters/dom/src/runs/image-run.ts
new file mode 100644
index 0000000000..245ff4c884
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/image-run.ts
@@ -0,0 +1,385 @@
+import type { ImageBlock, ImageRun } from '@superdoc/contracts';
+import { DOM_CLASS_NAMES } from '../constants.js';
+import { assertPmPositions } from '../pm-position-validation.js';
+import { applyImageClipPath } from '../utils/image-clip-path.js';
+import type { RunRenderContext } from './types.js';
+import { applyRunDataAttributes } from './hash.js';
+import { sanitizeUrl } from './links.js';
+
+/**
+ * Maximum allowed length for data URLs (10MB).
+ * Prevents denial of service attacks from extremely large embedded images.
+ */
+const MAX_DATA_URL_LENGTH = 10 * 1024 * 1024; // 10MB
+
+/**
+ * Regular expression to validate data URL format for images.
+ * Only allows common, safe image MIME types with base64 encoding.
+ * Prevents XSS and malformed data URL attacks.
+ */
+const VALID_IMAGE_DATA_URL = /^data:image\/(png|jpeg|jpg|gif|svg\+xml|webp|bmp|ico|tiff?);base64,/i;
+
+/**
+ * Maximum resize multiplier for image metadata.
+ * Images can be resized up to 3x their original dimensions.
+ */
+const MAX_RESIZE_MULTIPLIER = 3;
+
+/**
+ * Fallback maximum dimension for image resizing when original size is small.
+ * Ensures images can be resized to at least 1000px even if original is smaller.
+ */
+const FALLBACK_MAX_DIMENSION = 1000;
+
+/**
+ * Minimum image dimension in pixels.
+ * Ensures images remain visible and interactive during resizing.
+ */
+const MIN_IMAGE_DIMENSION = 20;
+
+type ImageFilterSource = Pick<ImageBlock, 'grayscale' | 'gain' | 'blacklevel' | 'lum'>;
+
+const clampLumUnit = (value: number): number => {
+  return Math.max(-100000, Math.min(100000, value));
+};
+
+const parseVmlFixedFraction = (value: string | number | undefined): number | null => {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  if (typeof value !== 'string' || value.length === 0) {
+    return null;
+  }
+
+  if (value.endsWith('f')) {
+    const raw = Number.parseInt(value.slice(0, -1), 10);
+    return Number.isFinite(raw) ? raw / 65536 : null;
+  }
+
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+export const buildImageFilters = (source: ImageFilterSource): string[] => {
+  const filters: string[] = [];
+
+  if (source.grayscale) {
+    filters.push('grayscale(100%)');
+  }
+
+  if (source.gain != null || source.blacklevel != null) {
+    const gain = parseVmlFixedFraction(source.gain);
+    const blacklevel = parseVmlFixedFraction(source.blacklevel);
+
+    if (gain != null) {
+      const contrast = Math.max(0, gain);
+      if (contrast > 0) {
+        filters.push(`contrast(${contrast})`);
+      }
+    }
+
+    if (blacklevel != null) {
+      // CSS has no black-point control, so approximate VML blacklevel with a linear
+      // brightness shift using the same 0..32767 range Word's watermark UI uses.
+      const brightness = Math.max(0, 1 + blacklevel * (65536 / 32767));
+      if (brightness > 0) {
+        filters.push(`brightness(${brightness})`);
+      }
+    }
+  }
+
+  if (source.lum) {
+    // a:lum uses ST_FixedPercentage values expressed in thousandths of a percent.
+    // Convert those percentage deltas into CSS filter multipliers.
+    const contrastValue = typeof source.lum.contrast === 'number' ? clampLumUnit(source.lum.contrast) : null;
+    const brightValue = typeof source.lum.bright === 'number' ? clampLumUnit(source.lum.bright) : null;
+
+    if (contrastValue != null) {
+      const contrast = Math.max(0, 1 + contrastValue / 100000);
+      if (contrast >= 0) {
+        filters.push(`contrast(${contrast})`);
+      }
+    }
+
+    if (brightValue != null) {
+      const brightness = Math.max(0, 1 + brightValue / 100000);
+      if (brightness >= 0) {
+        filters.push(`brightness(${brightness})`);
+      }
+    }
+  }
+
+  return filters;
+};
+
+const CLIP_PATH_PREFIXES = ['inset(', 'polygon(', 'circle(', 'ellipse(', 'path(', 'rect('];
+
+const readClipPathValue = (value: unknown): string => {
+  if (typeof value !== 'string') return '';
+  const normalized = value.trim();
+  if (normalized.length === 0) return '';
+  const lower = normalized.toLowerCase();
+  if (!CLIP_PATH_PREFIXES.some((prefix) => lower.startsWith(prefix))) return '';
+  return normalized;
+};
+
+/**
+ * Renders an ImageRun as an inline <img> element.
+ *
+ * SECURITY NOTES:
+ * - Data URLs are validated against VALID_IMAGE_DATA_URL regex to ensure proper format
+ * - Size limit (MAX_DATA_URL_LENGTH) prevents DoS attacks from extremely large images
+ * - Only allows safe image MIME types (png, jpeg, gif, etc.) with base64 encoding
+ * - Non-data URLs are sanitized through sanitizeUrl to prevent XSS
+ *
+ * METADATA ATTRIBUTE:
+ * - Adds `data-image-metadata` attribute to enable interactive resizing via ImageResizeOverlay
+ * - Metadata includes: originalWidth, originalHeight, aspectRatio, min/max dimensions
+ * - Only added when run.width > 0 && run.height > 0 to prevent invalid metadata
+ * - Max dimensions: 3x original size or 1000px (whichever is larger)
+ * - Min dimensions: 20px to ensure visibility and interactivity
+ *
+ * @param run - The ImageRun to render containing image source, dimensions, and spacing
+ * @returns HTMLElement (img) or null if src is missing or invalid
+ */
+export const renderImageRun = (run: ImageRun, context: RunRenderContext): HTMLElement | null => {
+  if (!run.src) {
+    return null;
+  }
+
+  const hasClipPath = typeof run.clipPath === 'string' && run.clipPath.trim().length > 0;
+
+  // Create img element
+  const img = context.doc.createElement('img');
+  img.classList.add(DOM_CLASS_NAMES.INLINE_IMAGE);
+
+  // Set source - validate data URLs with strict format and size checks
+  // Note: data: URLs are blocked by sanitizeUrl for hyperlinks (XSS risk),
+  // but are safe for <img> elements when properly validated
+  const isDataUrl = typeof run.src === 'string' && run.src.startsWith('data:');
+  if (isDataUrl) {
+    // SECURITY: Validate data URL format and size
+    if (run.src.length > MAX_DATA_URL_LENGTH) {
+      // Reject data URLs that are too large (DoS prevention)
+      return null;
+    }
+    if (!VALID_IMAGE_DATA_URL.test(run.src)) {
+      // Reject data URLs with invalid MIME types or encoding
+      return null;
+    }
+    img.src = run.src;
+  } else {
+    const sanitized = sanitizeUrl(run.src);
+    if (sanitized) {
+      img.src = sanitized;
+    } else {
+      // Invalid URL - return null
+      return null;
+    }
+  }
+
+  // Set dimensions: when we have clipPath we put img in a wrapper that has the layout size and overflow:hidden; img fills wrapper so cropped portion stays within after resize
+  if (!hasClipPath) {
+    img.width = run.width;
+    img.height = run.height;
+  } else {
+    Object.assign(img.style, {
+      width: '100%',
+      height: '100%',
+      maxWidth: '100%',
+      maxHeight: '100%',
+      boxSizing: 'border-box',
+      minWidth: '0',
+      minHeight: '0',
+    });
+  }
+  applyImageClipPath(img, run.clipPath);
+
+  // Add metadata for interactive image resizing (inline images)
+  // Only add metadata if dimensions are valid (positive, non-zero values)
+  if (run.width > 0 && run.height > 0) {
+    // This enables the ImageResizeOverlay to work with inline images
+    const aspectRatio = run.width / run.height;
+    const inlineImageMetadata = {
+      originalWidth: run.width,
+      originalHeight: run.height,
+      // Max dimensions: MAX_RESIZE_MULTIPLIER x original size or FALLBACK_MAX_DIMENSION, whichever is larger
+      // This provides generous constraints while preventing excessive scaling
+      maxWidth: Math.max(run.width * MAX_RESIZE_MULTIPLIER, FALLBACK_MAX_DIMENSION),
+      maxHeight: Math.max(run.height * MAX_RESIZE_MULTIPLIER, FALLBACK_MAX_DIMENSION),
+      aspectRatio,
+      // Min dimensions: MIN_IMAGE_DIMENSION to ensure images remain visible and interactive
+      minWidth: MIN_IMAGE_DIMENSION,
+      minHeight: MIN_IMAGE_DIMENSION,
+    };
+    img.setAttribute('data-image-metadata', JSON.stringify(inlineImageMetadata));
+  }
+
+  // Set alt text (required for accessibility)
+  img.alt = run.alt ?? '';
+
+  // Set title if present
+  if (run.title) {
+    img.title = run.title;
+  }
+
+  // Apply inline-block display
+  img.style.display = 'inline-block';
+
+  // When we use a wrapper (clipPath + positive dimensions), margins/verticalAlign/position/zIndex go on the wrapper only.
+  // When we don't use a wrapper (no clipPath, or clipPath with width/height 0), apply them on the img so layout is correct.
+  const useWrapper = hasClipPath && run.width > 0 && run.height > 0;
+  if (!useWrapper) {
+    // Apply vertical alignment (bottom-aligned to text baseline)
+    img.style.verticalAlign = run.verticalAlign ?? 'bottom';
+
+    // Apply spacing as CSS margins
+    if (run.distTop) {
+      img.style.marginTop = `${run.distTop}px`;
+    }
+    if (run.distBottom) {
+      img.style.marginBottom = `${run.distBottom}px`;
+    }
+    if (run.distLeft) {
+      img.style.marginLeft = `${run.distLeft}px`;
+    }
+    if (run.distRight) {
+      img.style.marginRight = `${run.distRight}px`;
+    }
+
+    // Position and z-index on the image only (not the line) so resize overlay can stack above.
+    img.style.position = 'relative';
+    img.style.zIndex = '1';
+    img.style.maxWidth = '100%';
+  }
+
+  // Apply rotation and flip transforms from OOXML a:xfrm
+  const transforms: string[] = [];
+
+  // Calculate translation offset to keep top-left corner fixed when rotating
+  if (run.rotation != null && run.rotation !== 0) {
+    const angleRad = (run.rotation * Math.PI) / 180;
+    const w = run.width;
+    const h = run.height;
+
+    // Calculate how much the top-left corner moves when rotating around center
+    // Top-left corner starts at (0, 0) in element space
+    // Center is at (w/2, h/2)
+    // After rotation, we need to translate to keep top-left at (0, 0)
+    const cosA = Math.cos(angleRad);
+    const sinA = Math.sin(angleRad);
+
+    // Position of top-left corner after rotation (relative to original top-left)
+    const newTopLeftX = (w / 2) * (1 - cosA) + (h / 2) * sinA;
+    const newTopLeftY = (w / 2) * sinA + (h / 2) * (1 - cosA);
+
+    transforms.push(`translate(${-newTopLeftX}px, ${-newTopLeftY}px)`);
+    transforms.push(`rotate(${run.rotation}deg)`);
+  }
+  if (run.flipH) {
+    transforms.push('scaleX(-1)');
+  }
+  if (run.flipV) {
+    transforms.push('scaleY(-1)');
+  }
+  if (transforms.length > 0) {
+    img.style.transform = transforms.join(' ');
+    img.style.transformOrigin = 'center';
+  }
+
+  const filters = buildImageFilters(run);
+  if (filters.length > 0) {
+    img.style.filter = filters.join(' ');
+  }
+
+  // Assert PM positions are present for cursor fallback
+  assertPmPositions(run, 'inline image run');
+
+  // When clipPath is set, scale makes the img paint outside its box;
+  // wrap in a clip container so only the cropped portion occupies space in the document.
+  // Wrapper size is the only layout box (position calculation uses run.width/run.height).
+  // PM position attributes go on the wrapper only so selection highlight and selection rects use the wrapper, not the scaled img.
+  // Skip wrapper when width or height is 0 (no layout box); img already has margins/verticalAlign/position/zIndex from above.
+  if (useWrapper) {
+    const wrapper = context.doc.createElement('span');
+    wrapper.classList.add(DOM_CLASS_NAMES.INLINE_IMAGE_CLIP_WRAPPER);
+    wrapper.style.display = 'inline-block';
+    wrapper.style.width = `${run.width}px`;
+    wrapper.style.height = `${run.height}px`;
+    wrapper.style.boxSizing = 'border-box';
+    wrapper.style.overflow = 'hidden';
+    wrapper.style.verticalAlign = run.verticalAlign ?? 'bottom';
+    if (run.distTop) wrapper.style.marginTop = `${run.distTop}px`;
+    if (run.distBottom) wrapper.style.marginBottom = `${run.distBottom}px`;
+    if (run.distLeft) wrapper.style.marginLeft = `${run.distLeft}px`;
+    if (run.distRight) wrapper.style.marginRight = `${run.distRight}px`;
+    wrapper.style.position = 'relative';
+    wrapper.style.zIndex = '1';
+    if (run.pmStart != null) wrapper.dataset.pmStart = String(run.pmStart);
+    if (run.pmEnd != null) wrapper.dataset.pmEnd = String(run.pmEnd);
+    wrapper.dataset.layoutEpoch = String(context.layoutEpoch);
+    context.applySdtDataset(wrapper, run.sdt);
+    if (run.dataAttrs) applyRunDataAttributes(wrapper, run.dataAttrs);
+    wrapper.appendChild(img);
+    return context.buildImageHyperlinkAnchor(wrapper, run.hyperlink, 'inline-block');
+  }
+
+  // Apply PM position tracking for cursor placement (only on img when not wrapped)
+  if (run.pmStart != null) {
+    img.dataset.pmStart = String(run.pmStart);
+  }
+  if (run.pmEnd != null) {
+    img.dataset.pmEnd = String(run.pmEnd);
+  }
+  img.dataset.layoutEpoch = String(context.layoutEpoch);
+
+  // Apply SDT metadata
+  context.applySdtDataset(img, run.sdt);
+
+  // Apply data attributes
+  if (run.dataAttrs) {
+    applyRunDataAttributes(img, run.dataAttrs);
+  }
+
+  const runClipPath = readClipPathValue((run as { clipPath?: unknown }).clipPath);
+  if (runClipPath) {
+    img.style.clipPath = runClipPath;
+    img.style.display = 'block';
+    img.style.marginTop = '';
+    img.style.marginBottom = '';
+    img.style.marginLeft = '';
+    img.style.marginRight = '';
+    img.style.verticalAlign = '';
+    img.style.position = 'static';
+    img.style.zIndex = '';
+
+    const wrapper = context.doc.createElement('span');
+    wrapper.classList.add('superdoc-inline-image-clip-wrapper');
+    wrapper.style.display = 'inline-block';
+    wrapper.style.width = `${run.width}px`;
+    wrapper.style.height = `${run.height}px`;
+    wrapper.style.verticalAlign = run.verticalAlign ?? 'bottom';
+    wrapper.style.position = 'relative';
+    wrapper.style.zIndex = '1';
+    if (run.distTop) wrapper.style.marginTop = `${run.distTop}px`;
+    if (run.distBottom) wrapper.style.marginBottom = `${run.distBottom}px`;
+    if (run.distLeft) wrapper.style.marginLeft = `${run.distLeft}px`;
+    if (run.distRight) wrapper.style.marginRight = `${run.distRight}px`;
+
+    if (run.pmStart != null) {
+      wrapper.dataset.pmStart = String(run.pmStart);
+    }
+    if (run.pmEnd != null) {
+      wrapper.dataset.pmEnd = String(run.pmEnd);
+    }
+    wrapper.dataset.layoutEpoch = String(context.layoutEpoch);
+    context.applySdtDataset(wrapper, run.sdt);
+
+    wrapper.appendChild(img);
+    return context.buildImageHyperlinkAnchor(wrapper, run.hyperlink, 'inline-block');
+  }
+
+  return context.buildImageHyperlinkAnchor(img, run.hyperlink, 'inline-block');
+};
+
+export { MAX_DATA_URL_LENGTH, VALID_IMAGE_DATA_URL };
diff --git a/packages/layout-engine/painters/dom/src/runs/index.ts b/packages/layout-engine/painters/dom/src/runs/index.ts
new file mode 100644
index 0000000000..d5117686d4
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/index.ts
@@ -0,0 +1,18 @@
+export { renderLine } from './render-line.js';
+export { renderRun } from './render-run.js';
+export { renderTextRun } from './text-run.js';
+export { renderImageRun } from './image-run.js';
+export { renderFieldAnnotationRun } from './field-annotation-run.js';
+export { renderMathRun } from './math-run.js';
+export { renderInlineTabRun, renderPositionedTabRun } from './tab-run.js';
+export { appendFormattingParagraphMark, setTextContentWithFormattingSpaceMarks } from './formatting-marks.js';
+export { sanitizeUrl, linkMetrics } from './links.js';
+export { applyRunDataAttributes } from './hash.js';
+export { resolveTrackedChangesConfig, applyTrackedChangeDecorations } from './tracked-changes.js';
+export {
+  resolveRunSdtId,
+  createInlineSdtWrapper,
+  syncInlineSdtWrapperTypography,
+  expandSdtWrapperPmRange,
+} from './sdt.js';
+export type { RenderedLineInfo, RenderLineParams, RunRenderContext, TrackedChangesRenderConfig } from './types.js';
diff --git a/packages/layout-engine/painters/dom/src/runs/links.ts b/packages/layout-engine/painters/dom/src/runs/links.ts
new file mode 100644
index 0000000000..653e74fab8
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/links.ts
@@ -0,0 +1,430 @@
+import type { FlowRunLink } from '@superdoc/contracts';
+import { encodeTooltip, sanitizeHref } from '@superdoc/url-validation';
+import type { LinkRenderData, RunRenderContext } from './types.js';
+
+const LINK_DATASET_KEYS = {
+  blocked: 'linkBlocked',
+  docLocation: 'linkDocLocation',
+  history: 'linkHistory',
+  rId: 'linkRid',
+  truncated: 'linkTooltipTruncated',
+} as const;
+
+const MAX_HREF_LENGTH = 2048;
+const SAFE_ANCHOR_PATTERN = /^[A-Za-z0-9._-]+$/;
+const LINK_TARGET_SET = new Set(['_blank', '_self', '_parent', '_top']);
+const AMBIGUOUS_LINK_PATTERNS = /^(click here|read more|more|link|here|this|download|view)$/i;
+
+/**
+ * Hyperlink rendering metrics for observability.
+ * Tracks sanitization, blocking, and security-related events.
+ */
+export const linkMetrics = {
+  sanitized: 0,
+  blocked: 0,
+  invalidProtocol: 0,
+  homographWarnings: 0,
+
+  reset() {
+    this.sanitized = 0;
+    this.blocked = 0;
+    this.invalidProtocol = 0;
+    this.homographWarnings = 0;
+  },
+
+  getMetrics() {
+    return {
+      'hyperlink.sanitized.count': this.sanitized,
+      'hyperlink.blocked.count': this.blocked,
+      'hyperlink.invalid_protocol.count': this.invalidProtocol,
+      'hyperlink.homograph_warnings.count': this.homographWarnings,
+    };
+  },
+};
+
+/**
+ * Sanitize a URL to prevent XSS attacks.
+ * Only allows http, https, mailto, tel, and internal anchors.
+ *
+ * @param href - The URL to sanitize
+ * @returns Sanitized URL or null if blocked
+ */
+export function sanitizeUrl(href: string): string | null {
+  if (typeof href !== 'string') return null;
+  const sanitized = sanitizeHref(href);
+  return sanitized?.href ?? null;
+}
+
+/**
+ * Normalize and validate an anchor fragment identifier for use in hyperlinks.
+ * Strips leading '#' if present and validates against safe character pattern.
+ *
+ * @param value - Raw anchor string (with or without leading '#')
+ * @returns Normalized anchor with leading '#' (e.g., '#section-1'), or null if invalid
+ *
+ * @remarks
+ * SECURITY: Only allows safe characters (A-Z, a-z, 0-9, ., _, -) to prevent HTML attribute injection.
+ * Rejects characters like quotes, angle brackets, colons, and spaces that could break HTML structure
+ * or enable XSS attacks when used in href attributes.
+ *
+ * @example
+ * normalizeAnchor('section-1') // Returns: '#section-1'
+ * normalizeAnchor('#bookmark') // Returns: '#bookmark'
+ * normalizeAnchor('unsafe<script>') // Returns: null
+ * normalizeAnchor('  whitespace  ') // Returns: null
+ */
+const normalizeAnchor = (value: string | null | undefined): string | null => {
+  if (typeof value !== 'string') return null;
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+
+  // Remove leading # if present, then validate
+  const anchor = trimmed.startsWith('#') ? trimmed.slice(1) : trimmed;
+
+  // SECURITY: Only allow safe characters to prevent attribute injection
+  // Rejects characters like quotes, angle brackets, spaces that could break HTML
+  if (!SAFE_ANCHOR_PATTERN.test(anchor)) {
+    return null;
+  }
+
+  return `#${anchor}`;
+};
+
+/**
+ * Check if a fragment string contains only safe anchor characters.
+ * Safe characters are alphanumeric, dots, underscores, and hyphens.
+ *
+ * @param {string} fragment - Fragment to validate
+ * @returns {boolean} True if fragment matches safe pattern
+ * @private
+ */
+const isValidSafeFragment = (fragment: string): boolean => {
+  return SAFE_ANCHOR_PATTERN.test(fragment);
+};
+
+/**
+ * URL-encode a fragment string for use in a URL hash.
+ * Returns null if encoding fails (rare edge case).
+ *
+ * @param {string} fragment - Fragment to encode
+ * @returns {string | null} Encoded fragment or null if encoding fails
+ * @private
+ */
+const encodeFragment = (fragment: string): string | null => {
+  try {
+    return encodeURIComponent(fragment);
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Append a document location fragment to an href.
+ * CRITICAL FIX: URL-encode unsafe characters instead of destroying the entire href.
+ *
+ * @param href - Base URL or null
+ * @param docLocation - Fragment identifier to append
+ * @returns Combined URL with fragment, or original href if fragment is invalid
+ */
+const appendDocLocation = (href: string | null, docLocation?: string | null): string | null => {
+  if (!docLocation?.trim()) return href;
+
+  const fragment = docLocation.trim();
+  if (href?.includes('#')) return href;
+
+  const encoded = isValidSafeFragment(fragment) ? fragment : encodeFragment(fragment);
+
+  if (!encoded) return href;
+  return href ? `${href}#${encoded}` : `#${encoded}`;
+};
+
+/**
+ * Build HTML data-* attributes object from hyperlink metadata for version 2 links.
+ * Extracts relationship ID, document location fragment, and history preferences from link object.
+ *
+ * @param link - Flow run link object containing hyperlink metadata
+ * @returns Record of data attribute keys and string values to be applied to anchor element
+ *
+ * @remarks
+ * Only processes version 2 links (Office Open XML format). Version 1 links return empty object.
+ * All dataset values are converted to strings for DOM compatibility.
+ *
+ * @example
+ * buildLinkDataset({
+ *   version: 2,
+ *   rId: 'rId5',
+ *   docLocation: 'bookmark1',
+ *   history: true
+ * })
+ * // Returns: { rId: 'rId5', docLocation: 'bookmark1', history: 'true' }
+ */
+const buildLinkDataset = (link: FlowRunLink): Record<string, string> => {
+  const dataset: Record<string, string> = {};
+  if (link.version === 2) {
+    if (link.rId) dataset[LINK_DATASET_KEYS.rId] = link.rId;
+    if (link.docLocation) dataset[LINK_DATASET_KEYS.docLocation] = link.docLocation;
+    if (typeof link.history === 'boolean') dataset[LINK_DATASET_KEYS.history] = String(link.history);
+  }
+  return dataset;
+};
+
+/**
+ * Resolve the appropriate target attribute for a hyperlink anchor element.
+ * Validates user-specified targets and auto-sets '_blank' for external HTTP(S) links.
+ *
+ * @param link - Flow run link object potentially containing target preference
+ * @param sanitized - Sanitized URL metadata containing protocol information, or null if sanitization failed
+ * @returns Valid target string ('_blank', '_self', '_parent', '_top') or undefined if not applicable
+ */
+const resolveLinkTarget = (
+  link: FlowRunLink,
+  sanitized?: ReturnType<typeof sanitizeHref> | null,
+): string | undefined => {
+  if (link.target && LINK_TARGET_SET.has(link.target)) {
+    return link.target;
+  }
+  if (sanitized && (sanitized.protocol === 'http' || sanitized.protocol === 'https')) {
+    return '_blank';
+  }
+  return undefined;
+};
+
+/**
+ * Resolve the rel attribute value for a hyperlink, combining user-specified relationships
+ * with security-critical values for external links.
+ *
+ * @param link - Flow run link object potentially containing rel preference (space-separated string)
+ * @param target - Resolved target attribute value (e.g., '_blank', '_self')
+ * @returns Space-separated rel values, or undefined if no rel values apply
+ */
+const resolveLinkRel = (link: FlowRunLink, target?: string): string | undefined => {
+  const relValues = new Set<string>();
+  if (typeof link.rel === 'string' && link.rel.trim()) {
+    link.rel
+      .trim()
+      .split(/\s+/)
+      .forEach((value) => {
+        if (value) relValues.add(value);
+      });
+  }
+  if (target === '_blank') {
+    relValues.add('noopener');
+    relValues.add('noreferrer');
+  }
+  if (relValues.size === 0) {
+    return undefined;
+  }
+  return Array.from(relValues).join(' ');
+};
+
+/**
+ * Apply data-* attributes to an HTML element from a dataset object.
+ * Safely assigns dataset properties while filtering out null/undefined values.
+ *
+ * @param element - Target HTML element to receive data attributes
+ * @param dataset - Object mapping data attribute keys to string values
+ */
+export const applyLinkDataset = (element: HTMLElement, dataset?: Record<string, string>): void => {
+  if (!dataset) return;
+  Object.entries(dataset).forEach(([key, value]) => {
+    if (value != null) {
+      element.dataset[key] = value;
+    }
+  });
+};
+
+export const buildLinkRenderData = (link: FlowRunLink): LinkRenderData | null => {
+  const dataset = buildLinkDataset(link);
+  const sanitized = typeof link.href === 'string' ? sanitizeHref(link.href) : null;
+  const anchorHref = normalizeAnchor(link.anchor ?? link.name ?? '');
+  let href: string | null = sanitized?.href ?? anchorHref;
+  if (link.version === 2) {
+    href = appendDocLocation(href, link.docLocation ?? null);
+  }
+
+  // Track metrics: successful sanitization
+  if (sanitized) {
+    linkMetrics.sanitized++;
+
+    // Check for homograph if hostname has non-ASCII (in raw href before URL parsing)
+    if (sanitized.href && typeof link.href === 'string') {
+      const hostStartIndex = link.href.indexOf('://') + 3;
+      let hostEndIndex = link.href.indexOf('/', hostStartIndex);
+      if (hostEndIndex === -1) {
+        hostEndIndex = link.href.indexOf('?', hostStartIndex);
+      }
+      if (hostEndIndex === -1) {
+        hostEndIndex = link.href.indexOf('#', hostStartIndex);
+      }
+      if (hostEndIndex === -1) {
+        hostEndIndex = link.href.length;
+      }
+      const rawHostname = link.href.slice(hostStartIndex, hostEndIndex);
+      if (rawHostname && /[^\x00-\x7F]/.test(rawHostname)) {
+        linkMetrics.homographWarnings++;
+      }
+    }
+  }
+
+  // Defense-in-depth: Enforce maximum URL length even if sanitization was bypassed
+  if (sanitized && sanitized.href.length > MAX_HREF_LENGTH) {
+    console.warn(`[DomPainter] Rejecting URL exceeding ${MAX_HREF_LENGTH} characters`);
+    linkMetrics.blocked++;
+    return { blocked: true, dataset: { [LINK_DATASET_KEYS.blocked]: 'true' } };
+  }
+
+  if (!href) {
+    if (typeof link.href === 'string' && link.href.trim()) {
+      dataset[LINK_DATASET_KEYS.blocked] = 'true';
+      console.warn(`[DomPainter] Blocked potentially unsafe URL: ${link.href.slice(0, 50)}`);
+      linkMetrics.blocked++;
+      // Track invalid protocol if sanitized was null
+      if (!sanitized) {
+        linkMetrics.invalidProtocol++;
+      }
+      return { blocked: true, dataset };
+    }
+    // Check if there was an anchor/name that failed validation
+    const hadAnchor = (link.anchor ?? link.name ?? null) != null;
+    if (Object.keys(dataset).length > 0 || hadAnchor) {
+      dataset[LINK_DATASET_KEYS.blocked] = 'true';
+      linkMetrics.blocked++;
+      return { blocked: true, dataset };
+    }
+    return null;
+  }
+
+  const target = resolveLinkTarget(link, sanitized);
+  const rel = resolveLinkRel(link, target);
+  const tooltipSource = link.version === 2 ? (link.tooltip ?? link.title) : link.title;
+  const tooltipResult = tooltipSource ? encodeTooltip(tooltipSource) : null;
+  // Use raw text - browser will escape when setting attribute
+  const tooltip = tooltipResult?.text ?? null;
+
+  // Signal when tooltip is truncated
+  if (tooltipResult?.wasTruncated) {
+    dataset[LINK_DATASET_KEYS.truncated] = 'true';
+  }
+
+  return {
+    href,
+    target,
+    rel,
+    tooltip,
+    dataset: Object.keys(dataset).length > 0 ? dataset : undefined,
+    blocked: false,
+  };
+};
+
+/**
+ * Apply tooltip accessibility using aria-describedby for better screen reader support.
+ * Creates a visually-hidden element containing the tooltip text and links it to the anchor.
+ *
+ * @param elem - The anchor element to enhance
+ * @param tooltip - The tooltip text to make accessible
+ * @returns The unique ID generated for this link
+ */
+export const applyTooltipAccessibility = (
+  elem: HTMLAnchorElement,
+  tooltip: string | null,
+  context: RunRenderContext,
+): string => {
+  const linkId = context.getNextLinkId();
+  elem.id = linkId;
+
+  if (!tooltip) return linkId;
+
+  // Keep title attribute for visual tooltip (browser default)
+  elem.setAttribute('title', tooltip);
+
+  // Create visually-hidden element for screen readers
+  const descId = `link-desc-${linkId}`;
+  const descElem = context.doc.createElement('span');
+  descElem.id = descId;
+  descElem.className = 'superdoc-sr-only'; // Screen reader only class
+  descElem.textContent = tooltip;
+
+  // Insert description element after the link
+  // Note: We'll insert it as a sibling in the parent line element
+  if (elem.parentElement) {
+    elem.parentElement.appendChild(descElem);
+    // Reference from link only if we successfully added the description element
+    elem.setAttribute('aria-describedby', descId);
+  } else {
+    // Element not yet in DOM - accessibility feature will degrade gracefully
+    // The title attribute will still provide tooltip functionality
+    console.warn('[DomPainter] Unable to add aria-describedby for tooltip (element not in DOM)');
+  }
+
+  return linkId;
+};
+
+/**
+ * Enhance accessibility of a link element with ARIA labels and attributes.
+ * Adds descriptive ARIA labels for ambiguous text and target=_blank links (WCAG 2.4.4).
+ *
+ * @param elem - The anchor element to enhance
+ * @param linkData - Link metadata including href and target
+ * @param textContent - The visible link text to analyze for ambiguity
+ */
+export const enhanceAccessibility = (elem: HTMLAnchorElement, linkData: LinkRenderData, textContent: string): void => {
+  if (!linkData.href) return;
+
+  const trimmedText = textContent.trim().toLowerCase();
+
+  // Check if link text is ambiguous (e.g., "click here", "read more")
+  if (AMBIGUOUS_LINK_PATTERNS.test(trimmedText)) {
+    try {
+      const url = new URL(linkData.href);
+      const hostname = url.hostname.replace(/^www\./, '');
+
+      // Generate descriptive aria-label for screen readers
+      const ariaLabel = `${textContent.trim()} - ${hostname}`;
+      elem.setAttribute('aria-label', ariaLabel);
+      return; // Exit early since we've set the label
+    } catch {
+      // If URL parsing fails, add generic label
+      elem.setAttribute('aria-label', `${textContent.trim()} - external link`);
+      return;
+    }
+  }
+
+  // Add aria-label for external links without one (indicates new tab)
+  if (linkData.target === '_blank' && !elem.getAttribute('aria-label')) {
+    elem.setAttribute('aria-label', `${textContent.trim()} (opens in new tab)`);
+  }
+};
+
+/**
+ * Apply link attributes to an anchor element.
+ */
+export const applyLinkAttributes = (elem: HTMLAnchorElement, linkData: LinkRenderData): void => {
+  if (!linkData.href) return;
+  elem.href = linkData.href;
+  elem.classList.add('superdoc-link');
+
+  if (linkData.target) {
+    elem.target = linkData.target;
+  } else {
+    elem.removeAttribute('target');
+  }
+  if (linkData.rel) {
+    elem.rel = linkData.rel;
+  } else {
+    elem.removeAttribute('rel');
+  }
+  if (linkData.tooltip) {
+    elem.title = linkData.tooltip;
+  } else {
+    elem.removeAttribute('title');
+  }
+
+  // Explicitly set role for clarity (though <a> with href has implicit role="link")
+  elem.setAttribute('role', 'link');
+
+  // Ensure link is keyboard accessible (should be default for <a>, but verify)
+  elem.setAttribute('tabindex', '0');
+
+  // Note: Click handling is done via event delegation in EditorInputManager,
+  // not per-element handlers. This avoids duplicate event dispatching.
+};
diff --git a/packages/layout-engine/painters/dom/src/runs/math-run.ts b/packages/layout-engine/painters/dom/src/runs/math-run.ts
new file mode 100644
index 0000000000..984cd9b9c8
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/math-run.ts
@@ -0,0 +1,38 @@
+import type { MathRun } from '@superdoc/contracts';
+import { convertOmmlToMathml } from '../features/math/index.js';
+import type { RunRenderContext } from './types.js';
+import { BROWSER_DEFAULT_FONT_SIZE } from './text-run.js';
+
+/**
+ * Render a math run as a MathML element wrapped in a span.
+ * Follows the same pattern as renderImageRun — sets explicit dimensions.
+ */
+export const renderMathRun = (run: MathRun, context: RunRenderContext): HTMLElement | null => {
+  const wrapper = context.doc.createElement('span');
+  wrapper.className = 'sd-math';
+  wrapper.style.display = 'inline-block';
+  wrapper.style.verticalAlign = 'middle';
+  // Let browser auto-size to MathML content; estimated dimensions are for layout only
+  wrapper.style.minWidth = `${run.width}px`;
+  wrapper.style.minHeight = `${run.height}px`;
+  // Restore font-size so the plain-text fallback renders at a reasonable size
+  // (the line container sets fontSize: 0 to eliminate the CSS strut). MathML
+  // has its own internal scaling, so this only matters for the textContent
+  // fallback path. run.height would make tall expressions (fractions, equation
+  // arrays) render at 80–100px — use the browser default instead.
+  wrapper.style.fontSize = BROWSER_DEFAULT_FONT_SIZE;
+  wrapper.dataset.layoutEpoch = String(context.layoutEpoch ?? 0);
+
+  const mathEl = convertOmmlToMathml(run.ommlJson, context.doc);
+  if (mathEl) {
+    wrapper.appendChild(mathEl);
+  } else {
+    // Fallback: render plain text content
+    wrapper.textContent = run.textContent || '';
+  }
+
+  if (run.pmStart != null) wrapper.dataset.pmStart = String(run.pmStart);
+  if (run.pmEnd != null) wrapper.dataset.pmEnd = String(run.pmEnd);
+
+  return wrapper;
+};
diff --git a/packages/layout-engine/painters/dom/src/runs/render-line.ts b/packages/layout-engine/painters/dom/src/runs/render-line.ts
new file mode 100644
index 0000000000..c89d468f46
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/render-line.ts
@@ -0,0 +1,737 @@
+import type { LineSegment, ParagraphAttrs, ParagraphBlock, Run, TextRun } from '@superdoc/contracts';
+import {
+  calculateJustifySpacing,
+  computeLinePmRange,
+  expandRunsForInlineNewlines,
+  shouldApplyJustify,
+  sliceRunsForLine,
+  SPACE_CHARS,
+} from '@superdoc/contracts';
+import {
+  isMinimalWordLayout as isMinimalWordLayoutShared,
+  type MinimalWordLayout,
+} from '@superdoc/common/list-marker-utils';
+import { CLASS_NAMES, lineStyles } from '../styles.js';
+import { applyRtlStyles, shouldUseSegmentPositioning } from '../features/rtl-paragraph/index.js';
+import { applyTooltipAccessibility } from './links.js';
+import { appendFormattingParagraphMark } from './formatting-marks.js';
+import { textRunMergeSignature } from './hash.js';
+import { isBreakRun, isFieldAnnotationRun, isImageRun, isLineBreakRun, isMathRun, renderRun } from './render-run.js';
+import { renderInlineTabRun, renderPositionedTabRun } from './tab-run.js';
+import type { RenderLineParams } from './types.js';
+
+/**
+ * Type guard narrowing to the shared word layout contract type.
+ * Delegates structural validation to the shared isMinimalWordLayout guard.
+ */
+function isMinimalWordLayout(value: unknown): value is MinimalWordLayout {
+  return isMinimalWordLayoutShared(value);
+}
+
+const applyStyles = (el: HTMLElement, styles: Partial<CSSStyleDeclaration>): void => {
+  Object.entries(styles).forEach(([key, value]) => {
+    if (value != null && value !== '' && key in el.style) {
+      (el.style as unknown as Record<string, string>)[key] = String(value);
+    }
+  });
+};
+
+const countSpaces = (text: string): number => {
+  let count = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    if (SPACE_CHARS.has(text[i])) count += 1;
+  }
+  return count;
+};
+
+const isWhitespaceOnly = (text: string): boolean => {
+  if (text.length === 0) return false;
+  for (let i = 0; i < text.length; i += 1) {
+    if (!SPACE_CHARS.has(text[i])) return false;
+  }
+  return true;
+};
+
+const cloneTextRun = (run: TextRun): TextRun => ({
+  ...(run as TextRun),
+  comments: run.comments ? [...run.comments] : undefined,
+  dataAttrs: run.dataAttrs ? { ...run.dataAttrs } : undefined,
+  underline: run.underline ? { ...run.underline } : undefined,
+  pageRefMetadata: run.pageRefMetadata ? { ...run.pageRefMetadata } : undefined,
+});
+
+const normalizeJustifiedRuns = (runsForLine: Run[]): Run[] => {
+  const normalized: Run[] = runsForLine.map((run) => {
+    if ((run.kind !== 'text' && run.kind !== undefined) || !('text' in run)) return run;
+    return cloneTextRun(run as TextRun);
+  });
+
+  const merged: Run[] = [];
+  for (let i = 0; i < normalized.length; i += 1) {
+    const run = normalized[i]!;
+    if ((run.kind !== 'text' && run.kind !== undefined) || !('text' in run)) {
+      merged.push(run);
+      continue;
+    }
+
+    const textRun = run as TextRun;
+    if (!isWhitespaceOnly(textRun.text ?? '')) {
+      merged.push(textRun);
+      continue;
+    }
+
+    const prev = merged[merged.length - 1];
+    if (prev && (prev.kind === 'text' || prev.kind === undefined) && 'text' in prev) {
+      const prevTextRun = prev as TextRun;
+      if (textRunMergeSignature(prevTextRun) === textRunMergeSignature(textRun)) {
+        const extra = textRun.text ?? '';
+        prevTextRun.text = (prevTextRun.text ?? '') + extra;
+        if (prevTextRun.pmStart != null) {
+          prevTextRun.pmEnd = prevTextRun.pmStart + prevTextRun.text.length;
+        } else if (prevTextRun.pmEnd != null) {
+          prevTextRun.pmEnd = prevTextRun.pmEnd + extra.length;
+        }
+        continue;
+      }
+    }
+
+    const next = normalized[i + 1];
+    if (next && (next.kind === 'text' || next.kind === undefined) && 'text' in next) {
+      const nextTextRun = next as TextRun;
+      if (textRunMergeSignature(nextTextRun) === textRunMergeSignature(textRun)) {
+        const extra = textRun.text ?? '';
+        nextTextRun.text = extra + (nextTextRun.text ?? '');
+        if (textRun.pmStart != null) {
+          nextTextRun.pmStart = textRun.pmStart;
+        } else if (nextTextRun.pmStart != null) {
+          nextTextRun.pmStart = nextTextRun.pmStart - extra.length;
+        }
+        if (nextTextRun.pmStart != null && nextTextRun.pmEnd == null) {
+          nextTextRun.pmEnd = nextTextRun.pmStart + nextTextRun.text.length;
+        }
+        continue;
+      }
+    }
+
+    merged.push(textRun);
+  }
+
+  // Suppress trailing wrap-point spaces on justified lines. With `white-space: pre`, they would
+  // otherwise consume width and be stretched by word-spacing, producing a ragged visible edge.
+  // Preserve intentionally space-only lines (rare but supported).
+  const hasNonSpaceText = merged.some(
+    (run) => (run.kind === 'text' || run.kind === undefined) && 'text' in run && (run.text ?? '').trim().length > 0,
+  );
+  if (hasNonSpaceText) {
+    for (let i = merged.length - 1; i >= 0; i -= 1) {
+      const run = merged[i];
+      if ((run.kind !== 'text' && run.kind !== undefined) || !('text' in run)) continue;
+      const text = run.text ?? '';
+      let trimCount = 0;
+      for (let j = text.length - 1; j >= 0 && text[j] === ' '; j -= 1) {
+        trimCount += 1;
+      }
+      if (trimCount === 0) break;
+
+      const nextText = text.slice(0, Math.max(0, text.length - trimCount));
+      if (nextText.length === 0) {
+        merged.splice(i, 1);
+        continue;
+      }
+      (run as TextRun).text = nextText;
+      if ((run as TextRun).pmEnd != null) {
+        (run as TextRun).pmEnd = (run as TextRun).pmEnd! - trimCount;
+      }
+      break;
+    }
+  }
+
+  return merged;
+};
+
+export const renderLine = ({
+  block,
+  line,
+  context,
+  availableWidthOverride,
+  lineIndex,
+  skipJustify,
+  preExpandedRuns,
+  resolvedListTextStartPx,
+  indentOffsetOverride,
+  paragraphMarkLeftOffsetOverride,
+  runContext,
+}: RenderLineParams): HTMLElement => {
+  const expandedBlock = { ...block, runs: preExpandedRuns ?? expandRunsForInlineNewlines(block.runs) };
+  const lineRange = computeLinePmRange(expandedBlock, line);
+  let runsForLine = sliceRunsForLine(expandedBlock, line);
+
+  const el = runContext.doc.createElement('div');
+  el.classList.add(CLASS_NAMES.line);
+  applyStyles(el, lineStyles(line.lineHeight));
+  el.dataset.layoutEpoch = String(runContext.layoutEpoch);
+  const paragraphAttrs = (block.attrs as ParagraphAttrs | undefined) ?? {};
+  const styleId = paragraphAttrs.styleId;
+  if (styleId) {
+    el.setAttribute('styleid', styleId);
+  }
+  const pAttrs = block.attrs as ParagraphAttrs | undefined;
+  const isRtl = applyRtlStyles(el, pAttrs);
+
+  if (lineRange.pmStart != null) {
+    el.dataset.pmStart = String(lineRange.pmStart);
+  }
+  if (lineRange.pmEnd != null) {
+    el.dataset.pmEnd = String(lineRange.pmEnd);
+  }
+  const trackedConfig = runContext.resolveTrackedChangesConfig(block);
+
+  // Preserve PM positions for DOM caret mapping on empty lines.
+  if (runsForLine.length === 0) {
+    const span = runContext.doc.createElement('span');
+    span.classList.add('superdoc-empty-run');
+    if (lineRange.pmStart != null) {
+      span.dataset.pmStart = String(lineRange.pmStart);
+    }
+    if (lineRange.pmEnd != null) {
+      span.dataset.pmEnd = String(lineRange.pmEnd);
+    }
+    // Restore font-size so the &nbsp; remains a visible caret target
+    // (the line container sets fontSize: 0 to eliminate the CSS strut).
+    span.style.fontSize = `${line.lineHeight}px`;
+    span.innerHTML = '&nbsp;';
+    el.appendChild(span);
+  }
+
+  // Render tab leaders (absolute positioned overlays)
+  if (line.leaders && line.leaders.length > 0) {
+    line.leaders.forEach((ld) => {
+      const leaderEl = runContext.doc.createElement('div');
+      leaderEl.classList.add('superdoc-leader');
+      leaderEl.setAttribute('data-style', ld.style);
+      leaderEl.style.position = 'absolute';
+      leaderEl.style.left = `${ld.from}px`;
+      leaderEl.style.width = `${Math.max(0, ld.to - ld.from)}px`;
+      // Align leaders closer to the text baseline using measured descent
+      const baselineOffset = Math.max(1, Math.round(Math.max(1, line.descent * 0.5)));
+      leaderEl.style.bottom = `${baselineOffset}px`;
+      leaderEl.style.height = ld.style === 'heavy' ? '2px' : '1px';
+      leaderEl.style.pointerEvents = 'none';
+      leaderEl.style.zIndex = '0'; // Same layer as line, text will be z-index: 1
+
+      // Map leader styles to CSS
+      if (ld.style === 'dot' || ld.style === 'middleDot') {
+        leaderEl.style.borderBottom = '1px dotted currentColor';
+      } else if (ld.style === 'hyphen') {
+        leaderEl.style.borderBottom = '1px dashed currentColor';
+      } else if (ld.style === 'underscore') {
+        leaderEl.style.borderBottom = '1px solid currentColor';
+      } else if (ld.style === 'heavy') {
+        leaderEl.style.borderBottom = '2px solid currentColor';
+      }
+
+      el.appendChild(leaderEl);
+    });
+  }
+
+  // Render bar tabs (vertical hairlines)
+  if (line.bars && line.bars.length > 0) {
+    line.bars.forEach((bar) => {
+      const barEl = runContext.doc.createElement('div');
+      barEl.classList.add('superdoc-tab-bar');
+      barEl.style.position = 'absolute';
+      barEl.style.left = `${bar.x}px`;
+      barEl.style.top = '0px';
+      barEl.style.bottom = '0px';
+      barEl.style.width = '1px';
+      barEl.style.background = 'currentColor';
+      barEl.style.opacity = '0.6';
+      barEl.style.pointerEvents = 'none';
+      el.appendChild(barEl);
+    });
+  }
+
+  // Check if any segments have explicit X positioning (from tab stops)
+  const hasExplicitPositioning = line.segments?.some((seg) => seg.x !== undefined);
+  const explicitPositionedSegmentCount = line.segments?.filter((seg) => seg.x !== undefined).length ?? 0;
+  const hasMultipleExplicitPositionedSegments = explicitPositionedSegmentCount > 1;
+  const availableWidth = availableWidthOverride ?? line.maxWidth ?? line.width;
+
+  const justifyShouldApply = shouldApplyJustify({
+    alignment: (block as ParagraphBlock).attrs?.alignment,
+    hasExplicitPositioning: hasExplicitPositioning ?? false,
+    hasExplicitTabStops: line.hasExplicitTabStops === true,
+    // Caller already folds last-line + trailing lineBreak behavior into skipJustify.
+    isLastLineOfParagraph: false,
+    paragraphEndsWithLineBreak: false,
+    skipJustifyOverride: skipJustify || hasMultipleExplicitPositionedSegments,
+  });
+
+  if (justifyShouldApply) {
+    // The measurer trims wrap-point trailing spaces from line ranges, but slicing can still
+    // produce whitespace-only runs at style boundaries. These runs are especially problematic
+    // for justify because `word-spacing` behavior is inconsistent on pure-whitespace spans.
+    //
+    // Normalize by merging whitespace-only slices into adjacent runs with identical styling.
+    runsForLine = normalizeJustifiedRuns(runsForLine);
+  }
+
+  const spaceCount =
+    line.spaceCount ??
+    runsForLine.reduce((sum, run) => {
+      if ((run.kind !== 'text' && run.kind !== undefined) || !('text' in run) || run.text == null) return sum;
+      return sum + countSpaces(run.text);
+    }, 0);
+  const lineWidth = line.naturalWidth ?? line.width;
+  const spacingPerSpace = calculateJustifySpacing({
+    lineWidth,
+    availableWidth,
+    spaceCount,
+    shouldJustify: justifyShouldApply,
+  });
+  const resolveLineIndentOffset = (): number => {
+    if (indentOffsetOverride != null) {
+      return indentOffsetOverride;
+    }
+
+    const paraIndent = (block.attrs as ParagraphAttrs | undefined)?.indent;
+    const indentLeft = paraIndent?.left ?? 0;
+    const firstLine = paraIndent?.firstLine ?? 0;
+    const hanging = paraIndent?.hanging ?? 0;
+    const isFirstLineOfPara = lineIndex === 0 || lineIndex === undefined;
+    const firstLineOffsetForCumX = isFirstLineOfPara ? firstLine - hanging : 0;
+    const wordLayoutValue = (block.attrs as ParagraphAttrs | undefined)?.wordLayout;
+    const wordLayout = isMinimalWordLayout(wordLayoutValue) ? wordLayoutValue : undefined;
+    const isListParagraph = Boolean(wordLayout?.marker);
+    const fallbackListTextStartPx =
+      typeof wordLayout?.marker?.textStartX === 'number' && Number.isFinite(wordLayout.marker.textStartX)
+        ? wordLayout.marker.textStartX
+        : typeof wordLayout?.textStartPx === 'number' && Number.isFinite(wordLayout.textStartPx)
+          ? wordLayout.textStartPx
+          : undefined;
+    const listIndentOffset = isFirstLineOfPara
+      ? (resolvedListTextStartPx ?? fallbackListTextStartPx ?? indentLeft)
+      : indentLeft;
+
+    return isListParagraph ? listIndentOffset : indentLeft + firstLineOffsetForCumX;
+  };
+  const lineTextStartOffsetPx =
+    paragraphMarkLeftOffsetOverride != null ? paragraphMarkLeftOffsetOverride : resolveLineIndentOffset();
+  const paragraphMarkLeftOffsetPx = lineTextStartOffsetPx;
+
+  if (spacingPerSpace !== 0) {
+    // Each rendered line is its own block; relying on text-align-last is brittle, so we use word-spacing.
+    el.style.wordSpacing = `${spacingPerSpace}px`;
+  }
+
+  if (shouldUseSegmentPositioning(hasExplicitPositioning ?? false, Boolean(line.segments), isRtl)) {
+    renderExplicitlyPositionedRuns({
+      block,
+      line,
+      context,
+      el,
+      lineTextStartOffsetPx,
+      spacingPerSpace,
+      styleId,
+      runContext,
+      trackedConfig,
+    });
+  } else {
+    renderInlineRuns({
+      runsForLine,
+      line,
+      context,
+      el,
+      styleId,
+      runContext,
+      trackedConfig,
+    });
+  }
+
+  appendFormattingParagraphMark(
+    el,
+    line,
+    expandedBlock.runs,
+    paragraphMarkLeftOffsetPx,
+    availableWidth,
+    hasExplicitPositioning ?? false,
+    runContext.doc,
+    runContext.showFormattingMarks,
+  );
+
+  // Post-process: Apply tooltip accessibility for any links with pending tooltips
+  // This must happen after elements are in the DOM so aria-describedby can reference siblings
+  const anchors = el.querySelectorAll('a[href]');
+  anchors.forEach((anchor) => {
+    const pendingTooltip = runContext.pendingTooltips.get(anchor as HTMLElement);
+    if (pendingTooltip) {
+      applyTooltipAccessibility(anchor as HTMLAnchorElement, pendingTooltip, runContext);
+      runContext.pendingTooltips.delete(anchor as HTMLElement); // Clean up memory
+    }
+  });
+
+  return el;
+};
+
+type RunRenderBranchParams = {
+  line: import('@superdoc/contracts').Line;
+  context: import('../renderer.js').FragmentRenderContext;
+  el: HTMLElement;
+  styleId?: string;
+  runContext: RenderLineParams['runContext'];
+  trackedConfig: ReturnType<RenderLineParams['runContext']['resolveTrackedChangesConfig']>;
+};
+
+const renderExplicitlyPositionedRuns = ({
+  block,
+  line,
+  context,
+  el,
+  lineTextStartOffsetPx,
+  spacingPerSpace,
+  styleId,
+  runContext,
+  trackedConfig,
+}: RunRenderBranchParams & {
+  block: ParagraphBlock;
+  lineTextStartOffsetPx: number;
+  spacingPerSpace: number;
+}): void => {
+  // Use segment-based rendering with absolute positioning for tab-aligned text.
+  // shouldUseSegmentPositioning returns false for RTL because the layout engine
+  // computes tab positions in LTR order; RTL lines fall through to inline-flow
+  // rendering where dir="rtl" lets the browser handle tab positioning.
+  //
+  // The segment x positions from layout are relative to the content area (left margin = 0).
+  // We need to add the paragraph indent to ALL positions (both explicit and calculated).
+  // Segment x positions and paragraph marks both need the visual text start,
+  // including list marker/suffix space when the resolved layout provides it.
+  const indentOffset = lineTextStartOffsetPx;
+  let cumulativeX = 0; // Start at 0, we'll add indentOffset when positioning
+
+  const segments = line.segments!;
+  const segmentsByRun = new Map<number, LineSegment[]>();
+  segments.forEach((segment) => {
+    const list = segmentsByRun.get(segment.runIndex);
+    if (list) {
+      list.push(segment);
+    } else {
+      segmentsByRun.set(segment.runIndex, [segment]);
+    }
+  });
+
+  /**
+   * Finds the immediate next segment carrying tab geometry after a given run index.
+   * This handles tab-aligned text and compensated tab paint geometry.
+   *
+   * WHY ONLY THE IMMEDIATE NEXT RUN:
+   * When rendering a tab, we need to know where the content IMMEDIATELY after this tab begins
+   * to correctly size the tab element. We don't look beyond the immediate next run because:
+   * 1. Each tab is independent and should only consider its directly adjacent content
+   * 2. Looking further ahead would incorrectly span multiple tabs or unrelated runs
+   * 3. If there's another tab between this tab and some content, that intermediate tab is
+   *    responsible for its own layout - we shouldn't reach across it
+   *
+   * For example, given: "Text[TAB1]Content[TAB2]MoreContent"
+   * - When sizing TAB1, we only check "Content" (immediate next run)
+   * - We don't check "MoreContent" because TAB2 is in between
+   * - TAB2 will independently check "MoreContent" when it's rendered
+   *
+   * @param fromRunIndex - The run index to search after
+   * @returns The immediate next tab-positioned segment, or undefined if not found or not immediate
+   */
+  const findImmediateNextSegment = (fromRunIndex: number): LineSegment | undefined => {
+    // Only check the immediate next run - don't skip over other tabs
+    const nextRunIdx = fromRunIndex + 1;
+    if (nextRunIdx <= line.toRun) {
+      const nextSegments = segmentsByRun.get(nextRunIdx);
+      if (nextSegments && nextSegments.length > 0) {
+        const firstSegment = nextSegments[0];
+        // Return only the first segment; later segments in the same run are
+        // not immediately adjacent to this tab.
+        return firstSegment.x !== undefined || firstSegment.precedingTabEndX !== undefined ? firstSegment : undefined;
+      }
+    }
+    return undefined;
+  };
+
+  // Inline SDT wrapping for geometry path (absolute-positioned elements).
+  // Same concept as the run-based path's SDT wrapper, but here elements use
+  // position:absolute so the wrapper itself must be absolutely positioned to
+  // span from the leftmost to rightmost child element.
+  let geoSdtWrapper: HTMLElement | null = null;
+  let geoSdtId: string | null = null;
+  let geoSdtWrapperLeft = 0;
+  let geoSdtMaxRight = 0;
+
+  const closeGeoSdtWrapper = () => {
+    if (geoSdtWrapper) {
+      geoSdtWrapper.style.width = `${geoSdtMaxRight - geoSdtWrapperLeft}px`;
+      el.appendChild(geoSdtWrapper);
+      geoSdtWrapper = null;
+      geoSdtId = null;
+    }
+  };
+
+  /**
+   * Append an element to the line, routing through an inline SDT wrapper
+   * when the run has inline structuredContent metadata.
+   */
+  const appendToLineGeo = (elem: HTMLElement, runForSdt: Run, elemLeftPx: number, elemWidthPx: number) => {
+    const resolved = runContext.resolveRunSdtId(runForSdt);
+    const thisRunSdtId = resolved?.sdtId ?? null;
+
+    if (thisRunSdtId !== geoSdtId) {
+      closeGeoSdtWrapper();
+    }
+
+    if (resolved) {
+      if (!geoSdtWrapper) {
+        geoSdtWrapper = runContext.createInlineSdtWrapper(resolved.sdt);
+        geoSdtId = thisRunSdtId;
+        geoSdtWrapperLeft = elemLeftPx;
+        geoSdtMaxRight = elemLeftPx;
+        geoSdtWrapper.style.position = 'absolute';
+        geoSdtWrapper.style.left = `${elemLeftPx}px`;
+        geoSdtWrapper.style.top = '0px';
+        geoSdtWrapper.style.height = `${line.lineHeight}px`;
+      }
+      runContext.syncInlineSdtWrapperTypography(geoSdtWrapper, runForSdt);
+      elem.style.left = `${elemLeftPx - geoSdtWrapperLeft}px`;
+      geoSdtMaxRight = Math.max(geoSdtMaxRight, elemLeftPx + elemWidthPx);
+      runContext.expandSdtWrapperPmRange(geoSdtWrapper, (runForSdt as TextRun).pmStart, (runForSdt as TextRun).pmEnd);
+      geoSdtWrapper.appendChild(elem);
+    } else {
+      el.appendChild(elem);
+    }
+  };
+
+  for (let runIndex = line.fromRun; runIndex <= line.toRun; runIndex += 1) {
+    const baseRun = block.runs[runIndex];
+    if (!baseRun) continue;
+
+    if (baseRun.kind === 'tab') {
+      // Find where the immediate next content begins (if it's right after this tab)
+      const immediateNextSegment = findImmediateNextSegment(runIndex);
+      const tabStartX = cumulativeX;
+      const {
+        element: tabEl,
+        tabEndX,
+        actualTabWidth,
+      } = renderPositionedTabRun(
+        baseRun,
+        line,
+        runContext.doc,
+        runContext.layoutEpoch,
+        tabStartX,
+        indentOffset,
+        immediateNextSegment,
+        styleId,
+      );
+      appendToLineGeo(tabEl, baseRun, tabStartX + indentOffset, actualTabWidth);
+
+      // Update cumulativeX to where the next content begins
+      // This ensures proper positioning for subsequent elements
+      cumulativeX = tabEndX;
+      continue;
+    }
+
+    // Handle ImageRun - render as-is (no slicing needed, atomic unit)
+    if (isImageRun(baseRun)) {
+      const elem = renderRun(baseRun, context, runContext, trackedConfig);
+      if (elem) {
+        if (styleId) {
+          elem.setAttribute('styleid', styleId);
+        }
+        // Position image using explicit segment X when available; fallback to cumulative flow
+        // Add indentOffset to position content at the correct paragraph indent.
+        const runSegments = segmentsByRun.get(runIndex);
+        const baseSegX = runSegments && runSegments[0]?.x !== undefined ? runSegments[0].x : cumulativeX;
+        const segX = baseSegX + indentOffset;
+        // LineSegment.width is required by contract; producer (measuring-dom) always emits it.
+        // No paint-time DOM measurement (SD-2957).
+        const segWidth = runSegments?.[0]?.width ?? 0;
+        elem.style.position = 'absolute';
+        elem.style.left = `${segX}px`;
+        appendToLineGeo(elem, baseRun, segX, segWidth);
+        cumulativeX = baseSegX + segWidth;
+      }
+      continue;
+    }
+
+    // Handle LineBreakRun - line breaks are handled by line creation, skip here
+    if (isLineBreakRun(baseRun)) {
+      continue;
+    }
+
+    // Handle BreakRun - breaks are handled by line creation, skip here
+    if (isBreakRun(baseRun)) {
+      continue;
+    }
+
+    // Handle FieldAnnotationRun - render as-is (no slicing needed, atomic unit like images)
+    if (isFieldAnnotationRun(baseRun)) {
+      const elem = renderRun(baseRun, context, runContext, trackedConfig);
+      if (elem) {
+        if (styleId) {
+          elem.setAttribute('styleid', styleId);
+        }
+        // Position using explicit segment X when available; fallback to cumulative flow
+        // Add indentOffset to position content at the correct paragraph indent.
+        const runSegments = segmentsByRun.get(runIndex);
+        const baseSegX = runSegments && runSegments[0]?.x !== undefined ? runSegments[0].x : cumulativeX;
+        const segX = baseSegX + indentOffset;
+        const segWidth = (runSegments && runSegments[0]?.width !== undefined ? runSegments[0].width : 0) ?? 0;
+        elem.style.position = 'absolute';
+        elem.style.left = `${segX}px`;
+        appendToLineGeo(elem, baseRun, segX, segWidth);
+        cumulativeX = baseSegX + segWidth;
+      }
+      continue;
+    }
+
+    // Handle MathRun - render as-is (atomic unit like images)
+    if (isMathRun(baseRun)) {
+      const elem = renderRun(baseRun, context, runContext, trackedConfig);
+      if (elem) {
+        if (styleId) {
+          elem.setAttribute('styleid', styleId);
+        }
+        const runSegments = segmentsByRun.get(runIndex);
+        const baseSegX = runSegments && runSegments[0]?.x !== undefined ? runSegments[0].x : cumulativeX;
+        const segX = baseSegX + indentOffset;
+        const segWidth =
+          (runSegments && runSegments[0]?.width !== undefined ? runSegments[0].width : baseRun.width) ?? 0;
+        elem.style.position = 'absolute';
+        elem.style.left = `${segX}px`;
+        appendToLineGeo(elem, baseRun, segX, segWidth);
+        cumulativeX = baseSegX + segWidth;
+      }
+      continue;
+    }
+
+    const runSegments = segmentsByRun.get(runIndex);
+    if (!runSegments || runSegments.length === 0) {
+      continue;
+    }
+
+    // At this point, baseRun must be TextRun (has .text property)
+    if (!('text' in baseRun)) {
+      continue;
+    }
+
+    const baseText = baseRun.text ?? '';
+    const runPmStart = baseRun.pmStart ?? null;
+    const fallbackPmEnd =
+      runPmStart != null && baseRun.pmEnd == null ? runPmStart + baseText.length : (baseRun.pmEnd ?? null);
+
+    runSegments.forEach((segment) => {
+      const segmentText = baseText.slice(segment.fromChar, segment.toChar);
+      if (!segmentText) return;
+
+      const pmSliceStart = runPmStart != null ? runPmStart + segment.fromChar : undefined;
+      const pmSliceEnd = runPmStart != null ? runPmStart + segment.toChar : (fallbackPmEnd ?? undefined);
+      const segmentRun: TextRun = {
+        ...(baseRun as TextRun),
+        text: segmentText,
+        pmStart: pmSliceStart,
+        pmEnd: pmSliceEnd,
+      };
+
+      const elem = renderRun(segmentRun, context, runContext, trackedConfig);
+      if (elem) {
+        if (styleId) {
+          elem.setAttribute('styleid', styleId);
+        }
+        // Determine X position for this segment
+        // Layout positions are relative to content area start (0).
+        // Add indentOffset to position content at the correct paragraph indent.
+        const baseX = segment.x !== undefined ? segment.x : cumulativeX;
+        const xPos = baseX + indentOffset;
+
+        elem.style.position = 'absolute';
+        elem.style.left = `${xPos}px`;
+        appendToLineGeo(elem, segmentRun, xPos, segment.width);
+
+        // Advance cumulative X by the resolved segment width. LineSegment.width is the
+        // sole source of truth — the painter does not measure inline elements (SD-2957).
+        // Use baseX (without indent) to keep cumulativeX relative to content area,
+        // matching how segment.x values are calculated in layout.
+        const width = segment.width;
+        const justifyExtraWidth = spacingPerSpace !== 0 ? spacingPerSpace * countSpaces(segmentText) : 0;
+        const visualWidth = width + justifyExtraWidth;
+        cumulativeX = baseX + visualWidth;
+        // Update SDT wrapper width if actual measured width differs from initial estimate
+        if (geoSdtWrapper) {
+          geoSdtMaxRight = Math.max(geoSdtMaxRight, xPos + visualWidth);
+        }
+      }
+    });
+  }
+  // Close any remaining SDT wrapper at end of geometry rendering
+  closeGeoSdtWrapper();
+};
+
+const renderInlineRuns = ({
+  runsForLine,
+  line,
+  context,
+  el,
+  styleId,
+  runContext,
+  trackedConfig,
+}: RunRenderBranchParams & { runsForLine: Run[] }): void => {
+  // Use run-based rendering for normal text flow
+  // Track current inline SDT wrapper to group adjacent runs with the same SDT id
+  let currentInlineSdtWrapper: HTMLElement | null = null;
+  let currentInlineSdtId: string | null = null;
+
+  const closeCurrentWrapper = () => {
+    if (currentInlineSdtWrapper) {
+      el.appendChild(currentInlineSdtWrapper);
+      currentInlineSdtWrapper = null;
+      currentInlineSdtId = null;
+    }
+  };
+
+  runsForLine.forEach((run) => {
+    // Check if this run has inline structuredContent SDT
+    const resolved = runContext.resolveRunSdtId(run);
+    const runSdtId = resolved?.sdtId ?? null;
+
+    // If SDT context changed, close the current wrapper
+    if (runSdtId !== currentInlineSdtId) {
+      closeCurrentWrapper();
+    }
+
+    // Special handling for TabRuns (e.g., signature lines with underlines)
+    const elem =
+      run.kind === 'tab'
+        ? renderInlineTabRun(run, line, runContext.doc, runContext.layoutEpoch, styleId)
+        : renderRun(run, context, runContext, trackedConfig);
+
+    if (elem) {
+      if (styleId) {
+        elem.setAttribute('styleid', styleId);
+      }
+
+      // If this run has inline SDT, add to or create wrapper
+      if (resolved) {
+        if (!currentInlineSdtWrapper) {
+          currentInlineSdtWrapper = runContext.createInlineSdtWrapper(resolved.sdt);
+          runContext.syncInlineSdtWrapperTypography(currentInlineSdtWrapper, run);
+          currentInlineSdtId = runSdtId;
+        }
+        // Typography is set when wrapper is created from the first run.
+        // Follow-up (SD-2744): define a deterministic mixed-typography rule.
+        runContext.expandSdtWrapperPmRange(currentInlineSdtWrapper, run.pmStart, run.pmEnd);
+        currentInlineSdtWrapper.appendChild(elem);
+      } else {
+        el.appendChild(elem);
+      }
+    }
+  });
+
+  // Close any remaining wrapper at end of line
+  closeCurrentWrapper();
+};
diff --git a/packages/layout-engine/painters/dom/src/runs/render-run.ts b/packages/layout-engine/painters/dom/src/runs/render-run.ts
new file mode 100644
index 0000000000..14a49373e2
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/render-run.ts
@@ -0,0 +1,57 @@
+import type { FieldAnnotationRun, ImageRun, MathRun, Run, TextRun } from '@superdoc/contracts';
+import type { FragmentRenderContext } from '../renderer.js';
+import type { RunRenderContext, TrackedChangesRenderConfig } from './types.js';
+import { renderFieldAnnotationRun } from './field-annotation-run.js';
+import { renderImageRun } from './image-run.js';
+import { renderMathRun } from './math-run.js';
+import { renderTextRun } from './text-run.js';
+
+export const isImageRun = (run: Run): run is ImageRun => run.kind === 'image';
+export const isLineBreakRun = (run: Run): run is import('@superdoc/contracts').LineBreakRun => run.kind === 'lineBreak';
+export const isBreakRun = (run: Run): run is import('@superdoc/contracts').BreakRun => run.kind === 'break';
+export const isFieldAnnotationRun = (run: Run): run is FieldAnnotationRun => run.kind === 'fieldAnnotation';
+export const isMathRun = (run: Run): run is MathRun => run.kind === 'math';
+
+/**
+ * Render a single run as an HTML element (span or anchor).
+ */
+export const renderRun = (
+  run: Run,
+  context: FragmentRenderContext,
+  renderContext: RunRenderContext,
+  trackedConfig?: TrackedChangesRenderConfig,
+): HTMLElement | null => {
+  // Handle ImageRun
+  if (isImageRun(run)) {
+    return renderImageRun(run, renderContext);
+  }
+
+  // Handle FieldAnnotationRun - inline pill-styled form fields
+  if (isFieldAnnotationRun(run)) {
+    return renderFieldAnnotationRun(run, renderContext);
+  }
+
+  // Handle MathRun - inline math rendered as MathML
+  if (isMathRun(run)) {
+    return renderMathRun(run, renderContext);
+  }
+
+  // Handle LineBreakRun - line breaks are handled by the measurer creating new lines,
+  // so we don't render anything for them in the DOM. They exist in the run array for
+  // proper PM position tracking but don't need visual representation.
+  if (isLineBreakRun(run)) {
+    return null;
+  }
+
+  // Handle BreakRun - similar to LineBreakRun, breaks are handled by the measurer
+  if (isBreakRun(run)) {
+    return null;
+  }
+
+  // Handle TextRun
+  if (!('text' in run) || !run.text) {
+    return null;
+  }
+
+  return renderTextRun(run as TextRun, context, renderContext, trackedConfig);
+};
diff --git a/packages/layout-engine/painters/dom/src/runs/sdt.ts b/packages/layout-engine/painters/dom/src/runs/sdt.ts
new file mode 100644
index 0000000000..4db629b8fb
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/sdt.ts
@@ -0,0 +1,51 @@
+import type { Run, SdtMetadata, TextRun } from '@superdoc/contracts';
+import { DOM_CLASS_NAMES } from '../constants.js';
+import { BROWSER_DEFAULT_FONT_SIZE } from './text-run.js';
+import type { RunRenderContext } from './types.js';
+
+export const resolveRunSdtId = (run: Run): { sdtId: string; sdt: SdtMetadata } | null => {
+  const sdt = (run as TextRun).sdt;
+  if (sdt?.type === 'structuredContent' && sdt?.scope === 'inline' && sdt?.id) {
+    return { sdtId: String(sdt.id), sdt };
+  }
+  return null;
+};
+
+export const createInlineSdtWrapper = (sdt: SdtMetadata, context: RunRenderContext): HTMLElement => {
+  const wrapper = context.doc.createElement('span');
+  wrapper.className = DOM_CLASS_NAMES.INLINE_SDT_WRAPPER;
+  wrapper.dataset.layoutEpoch = String(context.layoutEpoch);
+  context.applySdtDataset(wrapper, sdt);
+  const alias = (sdt as { alias?: string })?.alias || 'Inline content';
+  const labelEl = context.doc.createElement('span');
+  labelEl.className = `${DOM_CLASS_NAMES.INLINE_SDT_WRAPPER}__label`;
+  labelEl.textContent = alias;
+  wrapper.appendChild(labelEl);
+  return wrapper;
+};
+
+export const syncInlineSdtWrapperTypography = (wrapper: HTMLElement, runForSizing?: Run): void => {
+  // The line container sets fontSize:0 (strut fix). Keep wrapper typography
+  // synced with the current run so border height tracks text-size edits.
+  const runFontSize =
+    runForSizing && 'fontSize' in runForSizing && typeof runForSizing.fontSize === 'number'
+      ? `${runForSizing.fontSize}px`
+      : BROWSER_DEFAULT_FONT_SIZE;
+  wrapper.style.fontSize = runFontSize;
+  wrapper.style.lineHeight = 'normal';
+};
+
+export const expandSdtWrapperPmRange = (wrapper: HTMLElement, pmStart?: number | null, pmEnd?: number | null): void => {
+  if (pmStart != null) {
+    const cur = wrapper.dataset.pmStart;
+    if (!cur || pmStart < parseInt(cur, 10)) {
+      wrapper.dataset.pmStart = String(pmStart);
+    }
+  }
+  if (pmEnd != null) {
+    const cur = wrapper.dataset.pmEnd;
+    if (!cur || pmEnd > parseInt(cur, 10)) {
+      wrapper.dataset.pmEnd = String(pmEnd);
+    }
+  }
+};
diff --git a/packages/layout-engine/painters/dom/src/runs/tab-run.ts b/packages/layout-engine/painters/dom/src/runs/tab-run.ts
new file mode 100644
index 0000000000..bb404bc0ff
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/tab-run.ts
@@ -0,0 +1,95 @@
+import type { Line, LineSegment, Run } from '@superdoc/contracts';
+
+export const renderInlineTabRun = (
+  run: Extract<Run, { kind: 'tab' }>,
+  line: Line,
+  doc: Document,
+  layoutEpoch: number,
+  styleId?: string,
+): HTMLElement => {
+  const tabEl = doc.createElement('span');
+  tabEl.classList.add('superdoc-tab');
+
+  // Calculate tab width - use measured width or estimate based on typical tab stop
+  const tabWidth = run.width ?? 48; // Default tab width if not measured
+
+  tabEl.style.display = 'inline-block';
+  tabEl.style.width = `${tabWidth}px`;
+  tabEl.style.height = `${line.lineHeight}px`;
+  tabEl.style.verticalAlign = 'bottom';
+
+  applyTabUnderline(tabEl, run);
+
+  if (styleId) {
+    tabEl.setAttribute('styleid', styleId);
+  }
+  if (run.pmStart != null) tabEl.dataset.pmStart = String(run.pmStart);
+  if (run.pmEnd != null) tabEl.dataset.pmEnd = String(run.pmEnd);
+  tabEl.dataset.layoutEpoch = String(layoutEpoch);
+
+  return tabEl;
+};
+
+export const renderPositionedTabRun = (
+  run: Extract<Run, { kind: 'tab' }>,
+  line: Line,
+  doc: Document,
+  layoutEpoch: number,
+  tabStartX: number,
+  indentOffset: number,
+  immediateNextSegment?: LineSegment,
+  styleId?: string,
+): { element: HTMLElement; tabEndX: number; actualTabWidth: number } => {
+  // The tab should span from where previous content ended to where next content begins.
+  // If layout supplied a tab-end boundary for the next segment, prefer it.
+  // Otherwise, use the next segment's explicit X (from tab alignment) or the
+  // tab's measured width.
+  const measuredTabEndX = tabStartX + (run.width ?? 0);
+  const tabEndX = immediateNextSegment?.precedingTabEndX ?? immediateNextSegment?.x ?? measuredTabEndX;
+  const actualTabWidth = tabEndX - tabStartX;
+
+  const tabEl = doc.createElement('span');
+  tabEl.style.position = 'absolute';
+  tabEl.style.left = `${tabStartX + indentOffset}px`;
+  tabEl.style.top = '0px';
+  tabEl.style.width = `${actualTabWidth}px`;
+  tabEl.style.height = `${line.lineHeight}px`;
+  tabEl.style.display = 'inline-block';
+  tabEl.style.pointerEvents = 'none';
+  tabEl.style.zIndex = '1';
+
+  applyTabUnderline(tabEl, run);
+  if (!run.underline) {
+    tabEl.style.visibility = 'hidden';
+  }
+
+  if (styleId) {
+    tabEl.setAttribute('styleid', styleId);
+  }
+  if (run.pmStart != null) tabEl.dataset.pmStart = String(run.pmStart);
+  if (run.pmEnd != null) tabEl.dataset.pmEnd = String(run.pmEnd);
+  tabEl.dataset.layoutEpoch = String(layoutEpoch);
+
+  return { element: tabEl, tabEndX, actualTabWidth };
+};
+
+const applyTabUnderline = (tabEl: HTMLElement, run: Extract<Run, { kind: 'tab' }>): void => {
+  // Apply underline styling if present (common for signature lines)
+  //
+  // Signature line use case: In documents with signature lines, tabs are often used
+  // to create underlined blank spaces where signatures should go. The underline mark
+  // is inherited from a parent node (e.g., a paragraph with underline formatting) and
+  // applied to the tab, creating a visible underline even though the tab itself has
+  // no visible text content.
+  if (run.underline) {
+    const underlineStyle = run.underline.style ?? 'single';
+    // We must use an explicit color instead of currentColor because tab content is
+    // invisible (no text). If we used currentColor, the underline would inherit the
+    // text color, which might be transparent or the same as the background, making
+    // the underline invisible. Using an explicit color (defaulting to black) ensures
+    // the underline is always visible for signature lines.
+    const underlineColor = run.underline.color ?? '#000000';
+    const borderStyle = underlineStyle === 'double' ? 'double' : 'solid';
+    tabEl.style.borderBottom = `1px ${borderStyle} ${underlineColor}`;
+  }
+};
diff --git a/packages/layout-engine/painters/dom/src/runs/text-run.ts b/packages/layout-engine/painters/dom/src/runs/text-run.ts
new file mode 100644
index 0000000000..c1eb776a4f
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/text-run.ts
@@ -0,0 +1,268 @@
+import type { FlowRunLink, Run, TextRun } from '@superdoc/contracts';
+import { normalizeBaselineShift, resolveBaseFontSizeForVerticalText } from '@superdoc/contracts';
+import { assertPmPositions } from '../pm-position-validation.js';
+import type { FragmentRenderContext } from '../renderer.js';
+import { BROWSER_DEFAULT_FONT_SIZE } from '../styles.js';
+import type { RunRenderContext, TrackedChangesRenderConfig } from './types.js';
+import { applyRunDataAttributes } from './hash.js';
+import { applyLinkAttributes, applyLinkDataset, buildLinkRenderData, enhanceAccessibility } from './links.js';
+import { setTextContentWithFormattingSpaceMarks } from './formatting-marks.js';
+
+const DEFAULT_SUPERSCRIPT_RAISE_RATIO = 0.33;
+const DEFAULT_SUBSCRIPT_LOWER_RATIO = 0.14;
+const RTL_DATE_LIKE_TOKEN_RE = /^-?\d+(?:[./-]\d+)+$/;
+const RLM = '\u200F';
+
+const hasVerticalPositioning = (run: TextRun): boolean =>
+  normalizeBaselineShift(run.baselineShift) != null || run.vertAlign === 'superscript' || run.vertAlign === 'subscript';
+
+const applyRunVerticalPositioning = (element: HTMLElement, run: TextRun): void => {
+  // Vertically shifted runs should use a tight inline box. If they inherit the
+  // parent line's full line-height, the glyph remains visually low inside an
+  // oversized inline box even when the superscript/subscript offset is correct.
+  if (hasVerticalPositioning(run)) {
+    element.style.lineHeight = '1';
+  }
+
+  const explicitBaselineShift = normalizeBaselineShift(run.baselineShift);
+  if (explicitBaselineShift != null) {
+    element.style.verticalAlign = `${explicitBaselineShift}pt`;
+    return;
+  }
+
+  if (run.vertAlign === 'superscript') {
+    const baseFontSize = resolveBaseFontSizeForVerticalText(run.fontSize, run);
+    element.style.verticalAlign = `${baseFontSize * DEFAULT_SUPERSCRIPT_RAISE_RATIO}px`;
+    return;
+  }
+
+  if (run.vertAlign === 'subscript') {
+    const baseFontSize = resolveBaseFontSizeForVerticalText(run.fontSize, run);
+    element.style.verticalAlign = `${-(baseFontSize * DEFAULT_SUBSCRIPT_LOWER_RATIO)}px`;
+    return;
+  }
+
+  if (run.vertAlign === 'baseline') {
+    element.style.verticalAlign = 'baseline';
+  }
+};
+
+/**
+ * Applies run styling properties to a DOM element.
+ *
+ * @param element - The HTML element to style
+ * @param run - The run object containing styling information
+ * @param _isLink - Whether this run is part of a hyperlink. Note: This parameter
+ *                  is kept for API compatibility but no longer affects behavior -
+ *                  inline colors are now applied to all runs (including links) to
+ *                  ensure OOXML hyperlink character styles appear correctly.
+ */
+export const applyRunStyles = (element: HTMLElement, run: Run, _isLink = false): void => {
+  if (
+    run.kind === 'tab' ||
+    run.kind === 'image' ||
+    run.kind === 'lineBreak' ||
+    run.kind === 'break' ||
+    run.kind === 'fieldAnnotation' ||
+    run.kind === 'math'
+  ) {
+    // Tab, image, lineBreak, break, and fieldAnnotation runs don't have text styling properties
+    return;
+  }
+
+  element.style.fontFamily = run.fontFamily;
+  element.style.fontSize = `${run.fontSize}px`;
+  if (run.bold) element.style.fontWeight = 'bold';
+  if (run.italic) element.style.fontStyle = 'italic';
+
+  // Apply inline color even for links so OOXML hyperlink styles appear when CSS is absent
+  if (run.color) element.style.color = run.color;
+
+  if (run.letterSpacing != null) {
+    element.style.letterSpacing = `${run.letterSpacing}px`;
+  }
+  if (run.highlight) {
+    element.style.backgroundColor = run.highlight;
+  }
+  if (run.textTransform) {
+    element.style.textTransform = run.textTransform;
+  }
+
+  // Apply text decorations from the run. Even for links, inline decorations should reflect
+  // the document styling (tests assert underline presence on anchors).
+  const decorations: string[] = [];
+  if (run.underline) {
+    decorations.push('underline');
+    const u = run.underline;
+    element.style.textDecorationStyle = u.style && u.style !== 'single' ? u.style : 'solid';
+    if (u.color) {
+      element.style.textDecorationColor = u.color;
+    }
+  }
+  if (run.strike) {
+    decorations.push('line-through');
+  }
+  if (decorations.length > 0) {
+    element.style.textDecorationLine = decorations.join(' ');
+  }
+
+  applyRunVerticalPositioning(element, run);
+};
+
+export const resolveRunText = (run: Run, context: FragmentRenderContext): string => {
+  const runToken = 'token' in run ? run.token : undefined;
+
+  if (run.kind === 'tab') {
+    return run.text;
+  }
+  if (run.kind === 'image') {
+    // Image runs don't have text content
+    return '';
+  }
+  if (run.kind === 'lineBreak') {
+    // Line break runs don't render text - the measurer creates new lines for them
+    return '';
+  }
+  if (run.kind === 'break') {
+    // Break runs don't render text - the measurer creates new lines for them
+    return '';
+  }
+  if (!('text' in run)) {
+    // Safety check - if run doesn't have text property, return empty string
+    return '';
+  }
+  if (!runToken) {
+    return run.text ?? '';
+  }
+  if (runToken === 'pageNumber') {
+    return context.pageNumberText ?? String(context.pageNumber);
+  }
+  if (runToken === 'totalPageCount') {
+    return context.totalPages ? String(context.totalPages) : (run.text ?? '');
+  }
+  return run.text ?? '';
+};
+
+// AIDEV-NOTE: SD-3098 Word-parity workaround for RTL date-like tokens. We inject
+// RLM around separators at paint time only (DOM text), never into PM/model/export.
+// Word reorders numerics inside RTL date strings via internal RLM treatment; the
+// browser's UBA does not. This is intentionally narrow - only matches date-like
+// numeric patterns - so non-date numeric content is unaffected.
+const normalizeRtlDateTokenForWordParity = (text: string): string => {
+  if (!RTL_DATE_LIKE_TOKEN_RE.test(text)) {
+    return text;
+  }
+  return text.replace(/[./-]/g, (separator) => `${RLM}${separator}${RLM}`);
+};
+
+export const extractLinkData = (run: Run) => {
+  if (run.kind === 'tab' || run.kind === 'image' || run.kind === 'lineBreak' || run.kind === 'math') {
+    return null;
+  }
+  const link = (run as TextRun).link as FlowRunLink | undefined;
+  if (!link) {
+    return null;
+  }
+  return buildLinkRenderData(link);
+};
+
+export const renderTextRun = (
+  run: TextRun,
+  context: FragmentRenderContext,
+  renderContext: RunRenderContext,
+  trackedConfig?: TrackedChangesRenderConfig,
+): HTMLElement | null => {
+  if (!run.text) {
+    return null;
+  }
+
+  const linkData = extractLinkData(run);
+  const isActiveLink = !!(linkData && !linkData.blocked && linkData.href);
+  const elem = isActiveLink ? renderContext.doc.createElement('a') : renderContext.doc.createElement('span');
+  const text = resolveRunText(run, context);
+  const effectiveText =
+    run.bidi?.rtl === true && typeof text === 'string' ? normalizeRtlDateTokenForWordParity(text) : text;
+  setTextContentWithFormattingSpaceMarks(elem, effectiveText, renderContext.doc, renderContext.showFormattingMarks);
+
+  if (linkData?.dataset) {
+    applyLinkDataset(elem, linkData.dataset);
+  }
+  if (linkData?.blocked) {
+    elem.dataset.linkBlocked = 'true';
+    // For blocked links rendered as spans, set appropriate role
+    elem.setAttribute('role', 'text');
+    elem.setAttribute('aria-label', 'Invalid link - not clickable');
+  }
+  if (isActiveLink && linkData) {
+    applyLinkAttributes(elem as HTMLAnchorElement, linkData);
+    // Enhance accessibility with ARIA labels for ambiguous text
+    enhanceAccessibility(elem as HTMLAnchorElement, linkData, text);
+
+    // Note: Tooltip accessibility (aria-describedby) will be applied after
+    // the element is added to the DOM in renderLine, since it creates a sibling element
+    // Store tooltip for later processing
+    if (linkData.tooltip) {
+      renderContext.pendingTooltips.set(elem, linkData.tooltip);
+    }
+  }
+
+  // Pass isLink flag to skip applying inline color/decoration styles for links
+  applyRunStyles(elem as HTMLElement, run, isActiveLink);
+  // SD-3098 Word-parity: rtl-tagged runs get dir="rtl" so per-run bidi is isolated;
+  // non-rtl date-like runs in RTL context get dir="ltr" to prevent separator drift.
+  if (run.bidi?.rtl === true) {
+    elem.setAttribute('dir', 'rtl');
+  } else if (typeof run.text === 'string' && RTL_DATE_LIKE_TOKEN_RE.test(run.text)) {
+    elem.setAttribute('dir', 'ltr');
+  }
+  const commentAnnotations = run.comments;
+  const hasAnyComment = !!commentAnnotations?.length;
+  // Comment highlight styles are applied post-paint by CommentHighlightDecorator (super-editor).
+  // The painter only stamps metadata attributes below.
+  // We still need to preserve the comment ids
+  if (hasAnyComment) {
+    elem.dataset.commentIds = commentAnnotations.map((c) => c.commentId).join(',');
+    if (commentAnnotations.some((c) => c.internal)) {
+      elem.dataset.commentInternal = 'true';
+    }
+    // Per-comment internal flag so the editor-side decorator can pick the right color
+    const internalIds = commentAnnotations.filter((c) => c.internal).map((c) => c.commentId);
+    if (internalIds.length > 0) {
+      elem.dataset.commentInternalIds = internalIds.join(',');
+    }
+    // importedId aliases so the decorator can match by either ID
+    const importedEntries = commentAnnotations
+      .filter((c) => c.importedId && c.importedId !== c.commentId)
+      .map((c) => `${c.importedId}=${c.commentId}`);
+    if (importedEntries.length > 0) {
+      elem.dataset.commentImportedIds = importedEntries.join(',');
+    }
+    elem.classList.add('superdoc-comment-highlight');
+  }
+  // Ensure text renders above tab leaders (leaders are z-index: 0)
+  elem.style.zIndex = '1';
+  applyRunDataAttributes(elem as HTMLElement, run.dataAttrs);
+
+  // SD-2454: bookmark marker runs carry a data-bookmark-name attribute.
+  // Surface the bookmark name as a native `title` tooltip so hovering the
+  // opening bracket identifies which bookmark is being marked.
+  const bookmarkName = run.dataAttrs?.['data-bookmark-name'];
+  if (bookmarkName) {
+    (elem as HTMLElement).title = bookmarkName;
+  }
+
+  // Assert PM positions are present for cursor fallback
+  assertPmPositions(run, 'paragraph text run');
+
+  if (run.pmStart != null) elem.dataset.pmStart = String(run.pmStart);
+  if (run.pmEnd != null) elem.dataset.pmEnd = String(run.pmEnd);
+  elem.dataset.layoutEpoch = String(renderContext.layoutEpoch);
+  if (trackedConfig) {
+    renderContext.applyTrackedChangeDecorations(elem, run, trackedConfig);
+  }
+  renderContext.applySdtDataset(elem, run.sdt);
+
+  return elem;
+};
+
+export { BROWSER_DEFAULT_FONT_SIZE };
diff --git a/packages/layout-engine/painters/dom/src/runs/tracked-changes.ts b/packages/layout-engine/painters/dom/src/runs/tracked-changes.ts
new file mode 100644
index 0000000000..d970274faf
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/tracked-changes.ts
@@ -0,0 +1,86 @@
+import type {
+  ParagraphAttrs,
+  ParagraphBlock,
+  Run,
+  TextRun,
+  TrackedChangeKind,
+  TrackedChangesMode,
+} from '@superdoc/contracts';
+import type { TrackedChangesRenderConfig } from './types.js';
+
+const TRACK_CHANGE_BASE_CLASS: Record<TrackedChangeKind, string> = {
+  insert: 'track-insert-dec',
+  delete: 'track-delete-dec',
+  format: 'track-format-dec',
+};
+
+const TRACK_CHANGE_MODIFIER_CLASS: Record<TrackedChangeKind, Record<TrackedChangesMode, string | undefined>> = {
+  insert: {
+    review: 'highlighted',
+    original: 'hidden',
+    final: 'normal',
+    off: undefined,
+  },
+  delete: {
+    review: 'highlighted',
+    original: 'normal',
+    final: 'hidden',
+    off: undefined,
+  },
+  format: {
+    review: 'highlighted',
+    original: 'before',
+    final: 'normal',
+    off: undefined,
+  },
+};
+
+export const resolveTrackedChangesConfig = (block: ParagraphBlock): TrackedChangesRenderConfig => {
+  const attrs = (block.attrs as ParagraphAttrs | undefined) ?? {};
+  const mode = (attrs.trackedChangesMode as TrackedChangesMode | undefined) ?? 'review';
+  const enabled = attrs.trackedChangesEnabled !== false;
+  return { mode, enabled };
+};
+
+export const applyTrackedChangeDecorations = (
+  elem: HTMLElement,
+  run: Run,
+  config: TrackedChangesRenderConfig,
+): void => {
+  if (!config.enabled || config.mode === 'off') {
+    return;
+  }
+
+  const textRun = run as TextRun;
+  const meta = textRun.trackedChange;
+  if (!meta) {
+    return;
+  }
+
+  const baseClass = TRACK_CHANGE_BASE_CLASS[meta.kind];
+  if (baseClass) {
+    elem.classList.add(baseClass);
+  }
+
+  const modifier = TRACK_CHANGE_MODIFIER_CLASS[meta.kind]?.[config.mode];
+  if (modifier) {
+    elem.classList.add(modifier);
+  }
+
+  elem.dataset.trackChangeId = meta.id;
+  elem.dataset.trackChangeKind = meta.kind;
+  elem.dataset.storyKey = meta.storyKey ?? 'body';
+  if (meta.author) {
+    elem.dataset.trackChangeAuthor = meta.author;
+  }
+  if (meta.authorEmail) {
+    elem.dataset.trackChangeAuthorEmail = meta.authorEmail;
+  }
+  if (meta.authorImage) {
+    elem.dataset.trackChangeAuthorImage = meta.authorImage;
+  }
+  if (meta.date) {
+    elem.dataset.trackChangeDate = meta.date;
+  }
+  // track-change-focused class is applied post-paint by CommentHighlightDecorator (super-editor).
+};
diff --git a/packages/layout-engine/painters/dom/src/runs/types.ts b/packages/layout-engine/painters/dom/src/runs/types.ts
new file mode 100644
index 0000000000..aff98713af
--- /dev/null
+++ b/packages/layout-engine/painters/dom/src/runs/types.ts
@@ -0,0 +1,56 @@
+import type { ImageHyperlink, ParagraphBlock, Run, SdtMetadata, TrackedChangesMode } from '@superdoc/contracts';
+import type { FragmentRenderContext } from '../renderer.js';
+
+export type RenderedLineInfo = {
+  el: HTMLElement;
+  top: number;
+  height: number;
+};
+
+export type TrackedChangesRenderConfig = {
+  mode: TrackedChangesMode;
+  enabled: boolean;
+};
+
+export type LinkRenderData = {
+  href?: string;
+  target?: string;
+  rel?: string;
+  tooltip?: string | null;
+  dataset?: Record<string, string>;
+  blocked: boolean;
+};
+
+export type RunRenderContext = {
+  doc: Document;
+  layoutEpoch: number;
+  showFormattingMarks: boolean;
+  pendingTooltips: WeakMap<HTMLElement, string>;
+  getNextLinkId: () => string;
+  applySdtDataset: (el: HTMLElement | null, metadata?: SdtMetadata | null) => void;
+  buildImageHyperlinkAnchor: (
+    child: HTMLElement,
+    hyperlink: ImageHyperlink | undefined,
+    display: string,
+  ) => HTMLElement;
+  resolveTrackedChangesConfig: (block: ParagraphBlock) => TrackedChangesRenderConfig;
+  applyTrackedChangeDecorations: (elem: HTMLElement, run: Run, config: TrackedChangesRenderConfig) => void;
+  resolveRunSdtId: (run: Run) => { sdtId: string; sdt: SdtMetadata } | null;
+  createInlineSdtWrapper: (sdt: SdtMetadata) => HTMLElement;
+  syncInlineSdtWrapperTypography: (wrapper: HTMLElement, runForSizing?: Run) => void;
+  expandSdtWrapperPmRange: (wrapper: HTMLElement, pmStart?: number | null, pmEnd?: number | null) => void;
+};
+
+export type RenderLineParams = {
+  block: ParagraphBlock;
+  line: import('@superdoc/contracts').Line;
+  context: FragmentRenderContext;
+  availableWidthOverride?: number;
+  lineIndex?: number;
+  skipJustify?: boolean;
+  preExpandedRuns?: Run[];
+  resolvedListTextStartPx?: number;
+  indentOffsetOverride?: number;
+  paragraphMarkLeftOffsetOverride?: number;
+  runContext: RunRenderContext;
+};
diff --git a/packages/layout-engine/painters/dom/src/table/renderTableCell.test.ts b/packages/layout-engine/painters/dom/src/table/renderTableCell.test.ts
index bbb9650371..9430547ba5 100644
--- a/packages/layout-engine/painters/dom/src/table/renderTableCell.test.ts
+++ b/packages/layout-engine/painters/dom/src/table/renderTableCell.test.ts
@@ -35,6 +35,18 @@ describe('renderTableCell', () => {
     expect([normalizedHex, rgb]).toContain(normalizedActual);
   };
 
+  const getParagraphBorderLayer = (paraWrapper: HTMLElement): HTMLElement => {
+    const layer = paraWrapper.querySelector<HTMLElement>('.superdoc-paragraph-border');
+    expect(layer).toBeTruthy();
+    return layer!;
+  };
+
+  const getParagraphShadingLayer = (paraWrapper: HTMLElement): HTMLElement => {
+    const layer = paraWrapper.querySelector<HTMLElement>('.superdoc-paragraph-shading');
+    expect(layer).toBeTruthy();
+    return layer!;
+  };
+
   const paragraphBlock: ParagraphBlock = {
     kind: 'paragraph',
     id: 'para-1',
@@ -1840,21 +1852,21 @@ describe('renderTableCell', () => {
 
       const contentElement = cellElement.firstElementChild as HTMLElement;
       const paraWrapper = contentElement.firstElementChild as HTMLElement;
-
-      // Verify borders are applied
-      expect(paraWrapper.style.boxSizing).toBe('border-box');
-      expect(paraWrapper.style.borderTopWidth).toBe('2px');
-      expect(paraWrapper.style.borderTopStyle).toBe('solid');
-      expectCssColor(paraWrapper.style.borderTopColor, '#ff0000');
-      expect(paraWrapper.style.borderBottomWidth).toBe('1px');
-      expect(paraWrapper.style.borderBottomStyle).toBe('dashed');
-      expectCssColor(paraWrapper.style.borderBottomColor, '#0000ff');
-      expect(paraWrapper.style.borderLeftWidth).toBe('3px');
-      expect(paraWrapper.style.borderLeftStyle).toBe('dotted');
-      expectCssColor(paraWrapper.style.borderLeftColor, '#00ff00');
-      expect(paraWrapper.style.borderRightWidth).toBe('1px');
-      expect(paraWrapper.style.borderRightStyle).toBe('solid');
-      expectCssColor(paraWrapper.style.borderRightColor, '#000000');
+      const borderLayer = getParagraphBorderLayer(paraWrapper);
+
+      expect(borderLayer.style.boxSizing).toBe('border-box');
+      expect(borderLayer.style.borderTopWidth).toBe('2px');
+      expect(borderLayer.style.borderTopStyle).toBe('solid');
+      expectCssColor(borderLayer.style.borderTopColor, '#ff0000');
+      expect(borderLayer.style.borderBottomWidth).toBe('1px');
+      expect(borderLayer.style.borderBottomStyle).toBe('dashed');
+      expectCssColor(borderLayer.style.borderBottomColor, '#0000ff');
+      expect(borderLayer.style.borderLeftWidth).toBe('3px');
+      expect(borderLayer.style.borderLeftStyle).toBe('dotted');
+      expectCssColor(borderLayer.style.borderLeftColor, '#00ff00');
+      expect(borderLayer.style.borderRightWidth).toBe('1px');
+      expect(borderLayer.style.borderRightStyle).toBe('solid');
+      expectCssColor(borderLayer.style.borderRightColor, '#000000');
     });
 
     it('should apply paragraph shading (background) to paraWrapper', () => {
@@ -1909,9 +1921,9 @@ describe('renderTableCell', () => {
 
       const contentElement = cellElement.firstElementChild as HTMLElement;
       const paraWrapper = contentElement.firstElementChild as HTMLElement;
+      const shadingLayer = getParagraphShadingLayer(paraWrapper);
 
-      // Verify shading is applied
-      expectCssColor(paraWrapper.style.backgroundColor, '#ffff00');
+      expectCssColor(shadingLayer.style.backgroundColor, '#ffff00');
     });
 
     it('should apply both borders and shading to the same paragraph', () => {
@@ -1970,11 +1982,12 @@ describe('renderTableCell', () => {
 
       const contentElement = cellElement.firstElementChild as HTMLElement;
       const paraWrapper = contentElement.firstElementChild as HTMLElement;
+      const borderLayer = getParagraphBorderLayer(paraWrapper);
+      const shadingLayer = getParagraphShadingLayer(paraWrapper);
 
-      // Verify both borders and shading are applied
-      expect(paraWrapper.style.borderTopWidth).toBe('1px');
-      expect(paraWrapper.style.borderBottomWidth).toBe('1px');
-      expectCssColor(paraWrapper.style.backgroundColor, '#e0e0e0');
+      expect(borderLayer.style.borderTopWidth).toBe('1px');
+      expect(borderLayer.style.borderBottomWidth).toBe('1px');
+      expectCssColor(shadingLayer.style.backgroundColor, '#e0e0e0');
     });
 
     it('should handle multiple paragraphs with different borders in same cell', () => {
@@ -2043,14 +2056,16 @@ describe('renderTableCell', () => {
 
       // First paragraph has bottom border
       const wrapper1 = paraWrappers[0] as HTMLElement;
-      expect(wrapper1.style.borderBottomWidth).toBe('2px');
-      expectCssColor(wrapper1.style.borderBottomColor, '#ff0000');
+      const borderLayer1 = getParagraphBorderLayer(wrapper1);
+      expect(borderLayer1.style.borderBottomWidth).toBe('2px');
+      expectCssColor(borderLayer1.style.borderBottomColor, '#ff0000');
 
       // Second paragraph has top border
       const wrapper2 = paraWrappers[1] as HTMLElement;
-      expect(wrapper2.style.borderTopWidth).toBe('1px');
-      expect(wrapper2.style.borderTopStyle).toBe('dashed');
-      expectCssColor(wrapper2.style.borderTopColor, '#0000ff');
+      const borderLayer2 = getParagraphBorderLayer(wrapper2);
+      expect(borderLayer2.style.borderTopWidth).toBe('1px');
+      expect(borderLayer2.style.borderTopStyle).toBe('dashed');
+      expectCssColor(borderLayer2.style.borderTopColor, '#0000ff');
     });
 
     it('should not apply borders when paragraph has no borders attribute', () => {
@@ -2161,10 +2176,10 @@ describe('renderTableCell', () => {
 
       const contentElement = cellElement.firstElementChild as HTMLElement;
       const paraWrapper = contentElement.firstElementChild as HTMLElement;
+      const borderLayer = getParagraphBorderLayer(paraWrapper);
 
-      // Border style 'none' should result in no visible border
-      expect(paraWrapper.style.borderTopStyle).toBe('none');
-      expect(paraWrapper.style.borderTopWidth).toBe('0px');
+      expect(borderLayer.style.borderTopStyle).toBe('none');
+      expect(borderLayer.style.borderTopWidth).toBe('0px');
     });
 
     it('should handle zero width borders (width: 0)', () => {
@@ -2219,11 +2234,11 @@ describe('renderTableCell', () => {
 
       const contentElement = cellElement.firstElementChild as HTMLElement;
       const paraWrapper = contentElement.firstElementChild as HTMLElement;
+      const borderLayer = getParagraphBorderLayer(paraWrapper);
 
-      // Zero width should render as '0px'
-      expect(paraWrapper.style.borderTopWidth).toBe('0px');
-      expect(paraWrapper.style.borderTopStyle).toBe('solid');
-      expectCssColor(paraWrapper.style.borderTopColor, '#ff0000');
+      expect(borderLayer.style.borderTopWidth).toBe('0px');
+      expect(borderLayer.style.borderTopStyle).toBe('solid');
+      expectCssColor(borderLayer.style.borderTopColor, '#ff0000');
     });
 
     it('should clamp negative width borders to 0px', () => {
@@ -2278,11 +2293,11 @@ describe('renderTableCell', () => {
 
       const contentElement = cellElement.firstElementChild as HTMLElement;
       const paraWrapper = contentElement.firstElementChild as HTMLElement;
+      const borderLayer = getParagraphBorderLayer(paraWrapper);
 
-      // Negative width should be clamped to '0px'
-      expect(paraWrapper.style.borderLeftWidth).toBe('0px');
-      expect(paraWrapper.style.borderLeftStyle).toBe('solid');
-      expectCssColor(paraWrapper.style.borderLeftColor, '#0000ff');
+      expect(borderLayer.style.borderLeftWidth).toBe('0px');
+      expect(borderLayer.style.borderLeftStyle).toBe('solid');
+      expectCssColor(borderLayer.style.borderLeftColor, '#0000ff');
     });
 
     it('should default to 1px when width is undefined', () => {
@@ -2337,11 +2352,11 @@ describe('renderTableCell', () => {
 
       const contentElement = cellElement.firstElementChild as HTMLElement;
       const paraWrapper = contentElement.firstElementChild as HTMLElement;
+      const borderLayer = getParagraphBorderLayer(paraWrapper);
 
-      // Undefined width should default to '1px'
-      expect(paraWrapper.style.borderBottomWidth).toBe('1px');
-      expect(paraWrapper.style.borderBottomStyle).toBe('dashed');
-      expectCssColor(paraWrapper.style.borderBottomColor, '#00ff00');
+      expect(borderLayer.style.borderBottomWidth).toBe('1px');
+      expect(borderLayer.style.borderBottomStyle).toBe('dashed');
+      expectCssColor(borderLayer.style.borderBottomColor, '#00ff00');
     });
 
     it('should only apply border to specified sides (e.g., only top)', () => {
@@ -2396,16 +2411,16 @@ describe('renderTableCell', () => {
 
       const contentElement = cellElement.firstElementChild as HTMLElement;
       const paraWrapper = contentElement.firstElementChild as HTMLElement;
+      const borderLayer = getParagraphBorderLayer(paraWrapper);
 
-      // Only top border should be set
-      expect(paraWrapper.style.borderTopWidth).toBe('3px');
-      expect(paraWrapper.style.borderTopStyle).toBe('solid');
-      expectCssColor(paraWrapper.style.borderTopColor, '#ff00ff');
+      expect(borderLayer.style.borderTopWidth).toBe('3px');
+      expect(borderLayer.style.borderTopStyle).toBe('solid');
+      expectCssColor(borderLayer.style.borderTopColor, '#ff00ff');
 
       // Left, right, and bottom borders should remain unset
-      expect(paraWrapper.style.borderLeftWidth).toBe('');
-      expect(paraWrapper.style.borderRightWidth).toBe('');
-      expect(paraWrapper.style.borderBottomWidth).toBe('');
+      expect(borderLayer.style.borderLeftWidth).toBe('');
+      expect(borderLayer.style.borderRightWidth).toBe('');
+      expect(borderLayer.style.borderBottomWidth).toBe('');
     });
 
     it('should handle empty shading object (shading: {})', () => {
diff --git a/packages/layout-engine/painters/dom/src/table/renderTableCell.ts b/packages/layout-engine/painters/dom/src/table/renderTableCell.ts
index 65077310b1..c8453ea764 100644
--- a/packages/layout-engine/painters/dom/src/table/renderTableCell.ts
+++ b/packages/layout-engine/painters/dom/src/table/renderTableCell.ts
@@ -7,7 +7,6 @@ import type {
   ImageMeasure,
   Line,
   ParagraphBlock,
-  ParagraphIndent,
   ParagraphMeasure,
   PartialRowInfo,
   SdtMetadata,
@@ -17,77 +16,15 @@ import type {
   WrapExclusion,
   WrapTextMode,
 } from '@superdoc/contracts';
-import { effectiveTableCellSpacing, rescaleColumnWidths, normalizeZIndex, getCellSpacingPx } from '@superdoc/contracts';
-import {
-  createListMarkerElement,
-  computeTabWidth,
-  resolvePainterListMarkerGeometry,
-  resolvePainterListTextStartPx,
-} from '../utils/marker-helpers.js';
+import { rescaleColumnWidths, normalizeZIndex, getCellSpacingPx } from '@superdoc/contracts';
+import type { MinimalWordLayout } from '@superdoc/common/list-marker-utils';
 import type { FragmentRenderContext, RenderedLineInfo } from '../renderer.js';
-import { applyParagraphBorderStyles, applyParagraphShadingStyles } from '../features/paragraph-borders/index.js';
 import { applySquareWrapExclusionsToLines } from '../utils/anchor-helpers';
 import { applyImageClipPath } from '../utils/image-clip-path.js';
-import {
-  applySdtContainerStyling,
-  getSdtContainerConfig,
-  getSdtContainerKey,
-  type SdtBoundaryOptions,
-} from '../utils/sdt-helpers.js';
+import { getSdtContainerConfig, getSdtContainerKey, type SdtBoundaryOptions } from '../utils/sdt-helpers.js';
 import { applyCellBorders } from './border-utils.js';
 import { renderTableFragment as renderTableFragmentElement } from './renderTableFragment.js';
-
-/**
- * Word layout information for paragraph list markers.
- * Contains positioning, styling, and rendering details for list markers (bullets/numbers).
- */
-type WordLayoutMarker = {
-  /** Text content of the marker (e.g., "1.", "a)", "•") */
-  markerText?: string;
-  /** Width of the marker box in pixels */
-  markerBoxWidthPx?: number;
-  /** Width of the gutter (space between marker and text) in pixels */
-  gutterWidthPx?: number;
-  /** Horizontal justification of marker within its box */
-  justification?: 'left' | 'center' | 'right';
-  /** Absolute x position of the marker start */
-  markerX?: number;
-  /** Run properties for marker styling */
-  run: {
-    /** Font family for the marker */
-    fontFamily?: string;
-    /** Font size in pixels */
-    fontSize?: number;
-    /** Whether marker is bold */
-    bold?: boolean;
-    /** Whether marker is italic */
-    italic?: boolean;
-    /** Text color as hex string */
-    color?: string;
-    /** Letter spacing in pixels */
-    letterSpacing?: number;
-    /** Hidden text flag */
-    vanish?: boolean;
-  };
-  /** Separator between marker and text: tab (default), space, or nothing */
-  suffix?: 'tab' | 'space' | 'nothing';
-};
-
-/**
- * Word layout information for a paragraph.
- * Computed by the word-layout engine to provide accurate list marker positioning
- * and indent calculations matching Microsoft Word's behavior.
- */
-type WordLayoutInfo = {
-  /** Marker layout information if this is a list paragraph */
-  marker?: WordLayoutMarker;
-  /** Left indent in pixels */
-  indentLeftPx?: number;
-  /** Whether first-line indent mode is enabled */
-  firstLineIndentMode?: boolean;
-  /** Array of explicit tab stop positions in pixels */
-  tabsPx?: number[];
-};
+import { renderParagraphContent } from '../paragraph/renderParagraphContent.js';
 
 type TableRowMeasure = TableMeasure['rows'][number];
 type TableCellMeasure = TableRowMeasure['cells'][number];
@@ -224,265 +161,6 @@ function computeCellVisibleHeight(cell: TableCellMeasure, cellFrom: number, cell
   return cellVisHeight;
 }
 
-/**
- * Parameters for rendering a list marker element.
- */
-type MarkerRenderParams = {
-  /** Document object for creating DOM elements */
-  doc: Document;
-  /** Line element to which the marker will be attached */
-  lineEl: HTMLElement;
-  /** Full word-layout information for this paragraph */
-  wordLayout?: WordLayoutInfo;
-  /** Marker layout information from word-layout engine */
-  markerLayout: WordLayoutMarker;
-  /** Marker measurement data from measurement stage */
-  markerMeasure: ParagraphMeasure['marker'];
-  /** Left indent in pixels */
-  indentLeftPx: number;
-  /** Hanging indent in pixels */
-  hangingIndentPx: number;
-  /** First line indent in pixels */
-  firstLineIndentPx: number;
-  /** Array of explicit tab stop positions in pixels. */
-  tabsPx?: number[];
-};
-
-/**
- * Parameters for applying paragraph indentation within a table cell line.
- */
-type TableCellIndentParams = {
-  /** Line element to apply indentation styles to */
-  lineEl: HTMLElement;
-  /** Line measurement data */
-  line: Line;
-  /** Paragraph indentation values */
-  indent?: ParagraphIndent;
-  /** List text indent in pixels (when list marker layout is present) */
-  indentLeftPx: number;
-  /** Whether this paragraph has list marker layout */
-  hasListMarkerLayout: boolean;
-  /** Zero-based index of the line within the paragraph */
-  lineIndex: number;
-  /** Local start line for partial rendering */
-  localStartLine: number;
-  /** Whether first-line indent should be suppressed */
-  suppressFirstLineIndent: boolean;
-};
-
-/**
- * Renders a list marker (bullet or number) for a paragraph line inside a table cell.
- *
- * Mirrors the top-level renderer approach: the marker and suffix separator are prepended
- * inside `lineEl`, and `lineEl.paddingLeft` controls the text start position. This keeps
- * table cell list markers aligned with the top-level paragraph renderer.
- *
- * @param params - Marker rendering parameters
- */
-function renderListMarker(params: MarkerRenderParams): void {
-  const {
-    doc,
-    lineEl,
-    wordLayout,
-    markerLayout,
-    markerMeasure,
-    indentLeftPx,
-    hangingIndentPx,
-    firstLineIndentPx,
-    tabsPx,
-  } = params;
-
-  const shouldUseSharedInlinePrefixGeometry =
-    markerLayout?.justification === 'left' &&
-    wordLayout?.firstLineIndentMode !== true &&
-    typeof markerMeasure?.markerTextWidth === 'number' &&
-    Number.isFinite(markerMeasure.markerTextWidth) &&
-    markerMeasure.markerTextWidth >= 0;
-  const markerGeometry = shouldUseSharedInlinePrefixGeometry
-    ? resolvePainterListMarkerGeometry({
-        wordLayout,
-        indentLeftPx,
-        hangingIndentPx,
-        firstLineIndentPx,
-        markerTextWidthPx: markerMeasure?.markerTextWidth,
-      })
-    : undefined;
-
-  const anchorPoint = indentLeftPx - hangingIndentPx + firstLineIndentPx;
-
-  const markerJustification = markerLayout?.justification ?? 'left';
-  const markerTextWidth = markerMeasure?.markerTextWidth ?? 0;
-
-  let markerStartPos: number, currentPos: number;
-  if (markerJustification === 'left') {
-    markerStartPos = anchorPoint;
-    currentPos = markerStartPos + markerTextWidth;
-  } else if (markerJustification === 'right') {
-    markerStartPos = anchorPoint - markerTextWidth;
-    currentPos = anchorPoint;
-  } else {
-    markerStartPos = anchorPoint - markerTextWidth / 2;
-    currentPos = markerStartPos + markerTextWidth;
-  }
-
-  const suffix = markerLayout?.suffix ?? 'tab';
-  let listTabWidth = 0;
-  if (markerGeometry && (suffix === 'tab' || suffix === 'space')) {
-    listTabWidth = markerGeometry.suffixWidthPx;
-  } else if (suffix === 'tab') {
-    listTabWidth = computeTabWidth(
-      currentPos,
-      markerJustification,
-      tabsPx,
-      hangingIndentPx,
-      firstLineIndentPx,
-      indentLeftPx,
-    );
-  } else if (suffix === 'space') {
-    listTabWidth = 4;
-  }
-
-  // Set line padding to the anchor point — this is where the inline marker flow starts.
-  // Matches renderer.ts: lineEl.style.paddingLeft = anchorPoint
-  lineEl.style.paddingLeft = `${anchorPoint}px`;
-
-  if (markerLayout?.run?.vanish) {
-    // Hidden marker — preserve list indentation but don't render marker text
-    return;
-  }
-
-  const markerContainer = createListMarkerElement(doc, markerLayout?.markerText ?? '', markerLayout?.run ?? {});
-
-  // Left-justified markers stay inline (position: relative) within the text flow.
-  // Right/center-justified markers are absolutely positioned.
-  markerContainer.style.position = 'relative';
-  if (markerJustification === 'right') {
-    markerContainer.style.position = 'absolute';
-    markerContainer.style.left = `${markerStartPos}px`;
-  } else if (markerJustification === 'center') {
-    markerContainer.style.position = 'absolute';
-    // Match renderer.ts center positioning
-    markerContainer.style.left = `${markerStartPos - markerTextWidth / 2}px`;
-    lineEl.style.paddingLeft = parseFloat(lineEl.style.paddingLeft) + markerTextWidth / 2 + 'px';
-  }
-
-  // Add suffix separator after marker, before text content
-  const suffixType = markerLayout?.suffix ?? 'tab';
-  if (suffixType === 'tab') {
-    const tabEl = doc.createElement('span');
-    tabEl.classList.add('superdoc-tab', 'superdoc-marker-suffix-tab');
-    tabEl.innerHTML = '&nbsp;';
-    tabEl.style.display = 'inline-block';
-    if (markerLayout?.run?.fontSize != null) {
-      tabEl.style.fontSize = `${markerLayout.run.fontSize}px`;
-    }
-    tabEl.style.wordSpacing = '0px';
-    tabEl.style.width = `${listTabWidth}px`;
-    lineEl.prepend(tabEl);
-  } else if (suffixType === 'space') {
-    const spaceEl = doc.createElement('span');
-    spaceEl.classList.add('superdoc-marker-suffix-space');
-    if (markerLayout?.run?.fontSize != null) {
-      spaceEl.style.fontSize = `${markerLayout.run.fontSize}px`;
-    }
-    spaceEl.style.wordSpacing = '0px';
-    spaceEl.textContent = '\u00A0';
-    lineEl.prepend(spaceEl);
-  }
-
-  lineEl.prepend(markerContainer);
-}
-
-/**
- * Applies paragraph indentation to a rendered line inside a table cell.
- *
- * **SD-1472 Fix:** When segments have explicit x positions (from tab stops), the content
- * is already absolutely positioned. Applying padding/textIndent would double-shift the text,
- * causing the first character to be lost. This function detects explicit positioning via
- * `segment.x !== undefined` and adjusts the indent strategy accordingly.
- *
- * **Mathematical Model (SD-1295):**
- * The hanging indent effect is achieved through a combination of paddingLeft and textIndent:
- * - `firstLineOffset = firstLine - hanging`
- * - This offset can be positive (indent first line further right) or negative (outdent to left)
- *
- * **CSS Application Pattern:**
- * - **First line (no explicit positioning):**
- *   - `paddingLeft = left` (base left indent)
- *   - `textIndent = firstLineOffset` (additional first-line adjustment)
- *   - Combined effect: text starts at `left + firstLineOffset` pixels from cell edge
- *
- * - **First line (with explicit positioning):**
- *   - `paddingLeft = max(0, left) + firstLineOffset` (only if positive)
- *   - `textIndent = 0` (reset to prevent double-shift)
- *
- * - **Body lines (continuation lines):**
- *   - `paddingLeft = hanging` (when hanging > 0 and no explicit positioning)
- *   - Creates the "hanging" visual effect where body lines are indented further right
- *
- * **Edge Cases:**
- * - Negative hanging: Ignored for body lines (no effect, body uses left indent only)
- * - Negative left indent: Clamped to 0 (browsers don't support negative padding)
- * - suppressFirstLineIndent: When true, firstLineOffset is forced to 0
- * - Explicit segment positioning: Skips padding to avoid double-application
- *
- * @param params - Configuration for indent application within a table cell line.
- */
-function applyTableCellLineIndentation(params: TableCellIndentParams): void {
-  const {
-    lineEl,
-    line,
-    indent,
-    indentLeftPx,
-    hasListMarkerLayout,
-    lineIndex,
-    localStartLine,
-    suppressFirstLineIndent,
-  } = params;
-  const paraIndentLeft = indent?.left ?? 0;
-  const paraIndentRight = indent?.right ?? 0;
-  const firstLineOffset = suppressFirstLineIndent ? 0 : (indent?.firstLine ?? 0) - (indent?.hanging ?? 0);
-  const isFirstLine = lineIndex === 0 && localStartLine === 0;
-  const hasExplicitSegmentPositioning = line.segments?.some((seg) => seg.x !== undefined) ?? false;
-
-  if (hasListMarkerLayout && indentLeftPx) {
-    // List continuation lines should use the list text indent unless tabs handle explicit positioning.
-    if (!hasExplicitSegmentPositioning) {
-      lineEl.style.paddingLeft = `${indentLeftPx}px`;
-    }
-  } else {
-    // Preserve non-list paragraph indentation that was cleared above.
-    if (hasExplicitSegmentPositioning) {
-      if (isFirstLine && firstLineOffset !== 0) {
-        const effectiveLeftIndent = paraIndentLeft < 0 ? 0 : paraIndentLeft;
-        const adjustedPadding = effectiveLeftIndent + firstLineOffset;
-        if (adjustedPadding > 0) {
-          lineEl.style.paddingLeft = `${adjustedPadding}px`;
-        }
-      }
-    } else if (paraIndentLeft && paraIndentLeft > 0) {
-      lineEl.style.paddingLeft = `${paraIndentLeft}px`;
-    } else if (
-      !isFirstLine &&
-      indent?.hanging &&
-      indent.hanging > 0 &&
-      (paraIndentLeft == null || paraIndentLeft >= 0)
-    ) {
-      lineEl.style.paddingLeft = `${indent.hanging}px`;
-    }
-  }
-
-  if (paraIndentRight && paraIndentRight > 0) {
-    lineEl.style.paddingRight = `${paraIndentRight}px`;
-  }
-  if (isFirstLine && firstLineOffset && !hasExplicitSegmentPositioning) {
-    lineEl.style.textIndent = `${firstLineOffset}px`;
-  } else if (firstLineOffset && hasExplicitSegmentPositioning) {
-    // Reset textIndent when segments have explicit positioning to prevent double-shift
-    lineEl.style.textIndent = '0px';
-  }
-}
-
 /**
  * Applies inline CSS styles to an element, filtering out null/undefined/empty values.
  *
@@ -501,14 +179,6 @@ const applyInlineStyles = (el: HTMLElement, styles: Partial<CSSStyleDeclaration>
   });
 };
 
-const convertParagraphMarkToCellMark = (lineEl: HTMLElement): void => {
-  const mark = lineEl.querySelector<HTMLElement>('.superdoc-formatting-paragraph-mark');
-  if (!mark) return;
-
-  mark.classList.add('superdoc-formatting-cell-mark');
-  mark.textContent = '¤';
-};
-
 /**
  * Parameters for rendering a nested table inside a table cell.
  *
@@ -784,50 +454,6 @@ function renderPartialEmbeddedTable(params: {
   return { element: tableWrapper, height: visibleHeight, nextCumulativeLineCount };
 }
 
-/**
- * Apply paragraph-level visual styling such as borders and shading.
- * Borders are set per side with sensible defaults and clamping.
- */
-function applyParagraphBordersAndShading(paraWrapper: HTMLElement, block: ParagraphBlock): void {
-  const borders = block.attrs?.borders;
-
-  if (borders) {
-    paraWrapper.style.boxSizing = 'border-box';
-
-    const sideStyles: Record<'top' | 'bottom' | 'left' | 'right', { width: string; style: string; color: string }> = {
-      top: { width: 'border-top-width', style: 'border-top-style', color: 'border-top-color' },
-      bottom: { width: 'border-bottom-width', style: 'border-bottom-style', color: 'border-bottom-color' },
-      left: { width: 'border-left-width', style: 'border-left-style', color: 'border-left-color' },
-      right: { width: 'border-right-width', style: 'border-right-style', color: 'border-right-color' },
-    };
-
-    (['top', 'bottom', 'left', 'right'] as const).forEach((side) => {
-      const border = borders[side];
-      if (!border) return;
-
-      const styleValue = border.style ?? 'solid';
-      let widthValue = typeof border.width === 'number' ? Math.max(0, border.width) : 1; // default width when undefined
-
-      // Border style none should render as zero width
-      if (styleValue === 'none') {
-        widthValue = 0;
-      }
-
-      const cssKeys = sideStyles[side];
-      paraWrapper.style.setProperty(cssKeys.style, styleValue);
-      paraWrapper.style.setProperty(cssKeys.width, `${widthValue}px`);
-      if (border.color) {
-        paraWrapper.style.setProperty(cssKeys.color, border.color);
-      }
-    });
-  }
-
-  const shadingFill = block.attrs?.shading?.fill;
-  if (shadingFill) {
-    paraWrapper.style.backgroundColor = shadingFill;
-  }
-}
-
 /**
  * Dependencies required for rendering a table cell.
  *
@@ -1289,45 +915,7 @@ export const renderTableCell = (deps: TableCellRenderDependencies): TableCellRen
         const lines = paragraphMeasure.lines;
         const blockLineCount = lines?.length || 0;
         const isLastBlockInCell = i === Math.min(blockMeasures.length, cellBlocks.length) - 1;
-
-        /**
-         * Extract Word layout information from paragraph attributes.
-         * This contains computed marker positioning and indent details from the word-layout engine.
-         * The wordLayout is pre-computed during paragraph attribute processing and provides
-         * accurate positioning for list markers matching Microsoft Word's behavior.
-         */
-        const wordLayout = (block.attrs?.wordLayout ?? null) as WordLayoutInfo | null;
-
-        /**
-         * Marker layout contains the rendering details for list markers (bullets/numbers).
-         * This includes the marker text, positioning, justification, and styling.
-         */
-        const markerLayout = wordLayout?.marker;
-
-        /**
-         * Marker measurement data from the measurement stage.
-         * Contains computed dimensions (width, gutter) for the marker.
-         */
-        const markerMeasure = paragraphMeasure.marker;
-        const indentLeftPx =
-          markerMeasure?.indentLeft ??
-          wordLayout?.indentLeftPx ??
-          (block.attrs?.indent && typeof block.attrs.indent.left === 'number' ? block.attrs.indent.left : 0);
-        const hangingIndentPx =
-          block.attrs?.indent && typeof block.attrs.indent.hanging === 'number' ? block.attrs.indent.hanging : 0;
-        const firstLineIndentPx =
-          block.attrs?.indent && typeof block.attrs.indent.firstLine === 'number' ? block.attrs.indent.firstLine : 0;
-        const suppressFirstLineIndent = block.attrs?.suppressFirstLineIndent === true;
-        const listFirstLineTextStartPx =
-          markerLayout && markerMeasure
-            ? resolvePainterListTextStartPx({
-                wordLayout: wordLayout ?? undefined,
-                indentLeftPx,
-                hangingIndentPx,
-                firstLineIndentPx,
-                markerTextWidthPx: markerMeasure.markerTextWidth,
-              })
-            : undefined;
+        const wordLayout = (block.attrs?.wordLayout ?? null) as MinimalWordLayout | null;
 
         // Calculate the global line indices for this block
         const blockStartGlobal = cumulativeLineCount;
@@ -1353,138 +941,36 @@ export const renderTableCell = (deps: TableCellRenderDependencies): TableCellRen
         paraWrapper.style.position = 'relative';
         paraWrapper.style.left = '0';
         paraWrapper.style.width = '100%';
-        applySdtDataset(paraWrapper, block.attrs?.sdt);
         const sdtBoundary = sdtBoundaries[i];
         const blockKey = sdtContainerKeys[i] ?? null;
-        if (shouldApplySdtContainerStyling(block.attrs?.sdt, block.attrs?.containerSdt, blockKey)) {
-          applySdtContainerStyling(doc, paraWrapper, block.attrs?.sdt, block.attrs?.containerSdt, sdtBoundary);
-        }
-        applyParagraphBordersAndShading(paraWrapper, block as ParagraphBlock);
-
-        // Apply paragraph-level border and shading styles (SD-1296)
-        // These were previously missing, causing paragraph borders to not render in table cells
-        applyParagraphBorderStyles(paraWrapper, block.attrs?.borders);
-        applyParagraphShadingStyles(paraWrapper, block.attrs?.shading);
-
-        // Apply paragraph spacing.before when rendering from the top of the paragraph.
-        // Word absorbs first paragraph's spacing.before into cell paddingTop (effectiveTableCellSpacing).
-        const spacingBefore = (block as ParagraphBlock).attrs?.spacing?.before;
-        if (localStartLine === 0) {
-          const effectiveBefore = effectiveTableCellSpacing(spacingBefore, i === 0, paddingTop);
-          if (effectiveBefore > 0) {
-            paraWrapper.style.marginTop = `${effectiveBefore}px`;
-            flowCursorY += effectiveBefore;
-          }
-        }
-
-        // Calculate height of rendered content for proper block accumulation
-        let renderedHeight = 0;
-
-        /**
-         * Render lines for this paragraph block.
-         * Lines are rendered within the local range (localStartLine to localEndLine).
-         * List markers are only rendered on the first line if we're rendering from the start.
-         */
-        for (let lineIdx = localStartLine; lineIdx < localEndLine && lineIdx < lines.length; lineIdx++) {
-          const line = lines[lineIdx];
-          const isLastLine = lineIdx === lines.length - 1;
-          const lineTop = flowCursorY + renderedHeight;
-
-          /**
-           * Render line without extra paragraph padding to enable explicit marker/text offset control.
-           * This mirrors the main renderer behavior where list markers clear padding/textIndent.
-           */
-          const lineEl = renderLine(
-            block as ParagraphBlock,
-            line,
-            { ...context, section: 'body' },
-            lineIdx,
-            isLastLine,
-            lineIdx === 0 && localStartLine === 0 ? listFirstLineTextStartPx : undefined,
-          );
-          if (isLastBlockInCell && isLastLine) {
-            convertParagraphMarkToCellMark(lineEl);
-          }
-          lineEl.style.paddingLeft = '';
-          lineEl.style.paddingRight = '';
-          lineEl.style.textIndent = '';
-
-          /**
-           * Determine if we should render a list marker for this line.
-           * Markers are only rendered on the first line of a paragraph, and only if:
-           * - We have marker layout information from word-layout engine
-           * - We have marker measurement data
-           * - This is the first line (lineIdx === 0)
-           * - We're rendering from the start of the paragraph (localStartLine === 0)
-           * - The marker has a non-zero width
-           * Note: vanish markers are handled inside renderListMarker (sets correct
-           * indentation but skips marker text rendering).
-           */
-          const shouldRenderMarker =
-            markerLayout && markerMeasure && lineIdx === 0 && localStartLine === 0 && markerMeasure.markerWidth > 0;
-
-          if (shouldRenderMarker) {
-            // Prepend marker + suffix inside lineEl (mirrors renderer.ts approach)
-            renderListMarker({
-              doc,
-              lineEl,
-              wordLayout: wordLayout ?? undefined,
-              markerLayout,
-              markerMeasure,
-              indentLeftPx,
-              hangingIndentPx,
-              firstLineIndentPx,
-              tabsPx: wordLayout?.tabsPx,
-            });
-            renderedLines.push({ el: lineEl, top: lineTop, height: line.lineHeight });
-            paraWrapper.appendChild(lineEl);
-          } else {
-            /**
-             * For lines without markers, apply appropriate indentation:
-             * - For list paragraphs: apply indent padding for continuation lines
-             * - For non-list paragraphs: preserve the paragraph's own indent styling
-             */
-            applyTableCellLineIndentation({
-              lineEl,
-              line,
-              indent: block.attrs?.indent,
-              indentLeftPx,
-              hasListMarkerLayout: Boolean(markerLayout),
-              lineIndex: lineIdx,
-              localStartLine,
-              suppressFirstLineIndent,
-            });
-            renderedLines.push({ el: lineEl, top: lineTop, height: line.lineHeight });
-            paraWrapper.appendChild(lineEl);
-          }
-
-          renderedHeight += line.lineHeight;
-        }
-
-        // If we rendered the entire paragraph, use measured totalHeight to keep layout aligned with measurement
-        const renderedEntireBlock = localStartLine === 0 && localEndLine >= blockLineCount;
-        if (renderedEntireBlock && blockMeasure.totalHeight && blockMeasure.totalHeight > renderedHeight) {
-          renderedHeight = blockMeasure.totalHeight;
-        }
 
         content.appendChild(paraWrapper);
-
-        if (renderedHeight > 0) {
-          paraWrapper.style.height = `${renderedHeight}px`;
-        }
-
-        flowCursorY += renderedHeight;
-
-        // Apply paragraph spacing.after as margin-bottom for non-last paragraphs.
-        // In Word, the last paragraph's spacing.after is absorbed by the cell's bottom padding.
-        const isLastBlock = i === Math.min(blockMeasures.length, cellBlocks.length) - 1;
-        if (renderedEntireBlock && !isLastBlock) {
-          const spacingAfter = (block as ParagraphBlock).attrs?.spacing?.after;
-          if (typeof spacingAfter === 'number' && spacingAfter > 0) {
-            paraWrapper.style.marginBottom = `${spacingAfter}px`;
-            flowCursorY += spacingAfter;
-          }
-        }
+        const result = renderParagraphContent({
+          doc,
+          frameEl: paraWrapper,
+          block: block as ParagraphBlock,
+          measure: paragraphMeasure,
+          containerKind: 'table-cell',
+          width: contentWidthPx,
+          localStartLine,
+          localEndLine,
+          wordLayout: wordLayout ?? undefined,
+          spacingPolicy: {
+            isFirstBlock: i === 0,
+            isLastBlock: isLastBlockInCell,
+            paddingTop,
+          },
+          sdtBoundary,
+          shouldApplySdtContainerStyling: (sdt, containerSdt) =>
+            shouldApplySdtContainerStyling(sdt, containerSdt, blockKey),
+          applySdtDataset,
+          renderLine: ({ block, line, lineIndex, isLastLine, resolvedListTextStartPx }) =>
+            renderLine(block, line, { ...context, section: 'body' }, lineIndex, isLastLine, resolvedListTextStartPx),
+          convertFinalParagraphMark: isLastBlockInCell,
+          lineTopOffset: flowCursorY,
+        });
+        renderedLines.push(...result.renderedLines);
+        flowCursorY += result.totalHeight;
 
         cumulativeLineCount += blockLineCount;
       }
diff --git a/packages/layout-engine/painters/dom/src/utils/marker-helpers.ts b/packages/layout-engine/painters/dom/src/utils/marker-helpers.ts
deleted file mode 100644
index 577cb2ac9c..0000000000
--- a/packages/layout-engine/painters/dom/src/utils/marker-helpers.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { DOM_CLASS_NAMES } from '@superdoc/dom-contract';
-import { toCssFontFamily } from '@superdoc/font-utils';
-import {
-  resolveListMarkerGeometry,
-  resolveListTextStartPx,
-  computeTabWidth,
-  type MinimalMarker,
-  type MinimalWordLayout,
-  type ResolvedListMarkerGeometry,
-} from '@superdoc/common/list-marker-utils';
-import { applySourceAnchorDataset } from '../renderer';
-import { SourceAnchor } from '@superdoc/contracts';
-
-type PainterListTextStartParams = {
-  wordLayout: MinimalWordLayout | undefined;
-  indentLeftPx: number;
-  hangingIndentPx: number;
-  firstLineIndentPx: number;
-  markerTextWidthPx?: number;
-};
-
-const getFiniteNonNegativeNumber = (value: unknown): number | undefined => {
-  if (typeof value !== 'number' || !Number.isFinite(value) || value < 0) {
-    return undefined;
-  }
-  return value;
-};
-
-/**
- * Resolves marker width using the already-measured glyph width from layout whenever possible.
- */
-const resolvePainterMarkerTextWidth = (
-  markerTextWidthPx: number | undefined,
-  marker: { glyphWidthPx?: number; markerBoxWidthPx?: number },
-): number =>
-  getFiniteNonNegativeNumber(markerTextWidthPx) ??
-  getFiniteNonNegativeNumber(marker.glyphWidthPx) ??
-  getFiniteNonNegativeNumber(marker.markerBoxWidthPx) ??
-  0;
-
-/**
- * Resolves the canonical marker geometry for a list first line while letting the
- * painter reuse the measured marker glyph width instead of remeasuring text.
- */
-export const resolvePainterListMarkerGeometry = ({
-  wordLayout,
-  indentLeftPx,
-  hangingIndentPx,
-  firstLineIndentPx,
-  markerTextWidthPx,
-}: PainterListTextStartParams): ResolvedListMarkerGeometry | undefined =>
-  resolveListMarkerGeometry(
-    wordLayout,
-    indentLeftPx,
-    firstLineIndentPx,
-    hangingIndentPx,
-    (_markerText: string, marker: MinimalMarker) => resolvePainterMarkerTextWidth(markerTextWidthPx, marker),
-  );
-
-/**
- * Resolves the canonical text-start position for a list first line while letting
- * the painter reuse the measured marker glyph width instead of remeasuring text.
- */
-export const resolvePainterListTextStartPx = ({
-  wordLayout,
-  indentLeftPx,
-  hangingIndentPx,
-  firstLineIndentPx,
-  markerTextWidthPx,
-}: PainterListTextStartParams): number | undefined =>
-  resolveListTextStartPx(
-    wordLayout,
-    indentLeftPx,
-    firstLineIndentPx,
-    hangingIndentPx,
-    (_markerText: string, marker: MinimalMarker) => resolvePainterMarkerTextWidth(markerTextWidthPx, marker),
-  );
-
-// Re-export computeTabWidth from shared module
-export { computeTabWidth };
-
-type MarkerRunStyle = {
-  fontFamily?: string | null;
-  fontSize?: number | null;
-  bold?: boolean | null;
-  italic?: boolean | null;
-  color?: string | null;
-  letterSpacing?: number | null;
-};
-
-/**
- * Build the marker container `<span class="superdoc-list-marker">` with the inner
- * `<span class="superdoc-paragraph-marker">` already appended and styled from the
- * given run. Callers handle positioning, suffix separators, and the final prepend.
- */
-export const createListMarkerElement = (
-  doc: Document,
-  markerText: string,
-  run: MarkerRunStyle,
-  sourceAnchor?: SourceAnchor,
-): HTMLElement => {
-  const markerContainer = doc.createElement('span');
-  markerContainer.classList.add(DOM_CLASS_NAMES.LIST_MARKER);
-  markerContainer.style.display = 'inline-block';
-  markerContainer.style.wordSpacing = '0px';
-
-  const markerEl = doc.createElement('span');
-  markerEl.classList.add('superdoc-paragraph-marker');
-  markerEl.textContent = markerText;
-  markerEl.style.pointerEvents = 'none';
-  markerEl.style.fontFamily = toCssFontFamily(run.fontFamily) ?? run.fontFamily ?? '';
-
-  if (run.fontSize != null) {
-    markerEl.style.fontSize = `${run.fontSize}px`;
-  }
-  markerEl.style.fontWeight = run.bold ? 'bold' : '';
-  markerEl.style.fontStyle = run.italic ? 'italic' : '';
-
-  if (run.color) {
-    markerEl.style.color = run.color;
-  }
-  if (run.letterSpacing != null) {
-    markerEl.style.letterSpacing = `${run.letterSpacing}px`;
-  }
-
-  markerContainer.appendChild(markerEl);
-  if (sourceAnchor) {
-    applySourceAnchorDataset(markerEl, sourceAnchor);
-  }
-  return markerContainer;
-};
diff --git a/shared/common/list-marker-utils.ts b/shared/common/list-marker-utils.ts
index aff373c8af..03bdb1ffc8 100644
--- a/shared/common/list-marker-utils.ts
+++ b/shared/common/list-marker-utils.ts
@@ -22,6 +22,9 @@ export type MinimalMarkerRun = {
   fontSize?: number;
   bold?: boolean;
   italic?: boolean;
+  color?: string;
+  letterSpacing?: number;
+  vanish?: boolean;
 };
 
 /**
@@ -43,9 +46,9 @@ export type MinimalMarker = {
   /** Width of the gutter between marker and text (used for center/right justification) */
   gutterWidthPx?: number;
   /** Marker justification: 'left', 'center', or 'right' */
-  justification?: string;
+  justification?: 'left' | 'center' | 'right';
   /** What follows the marker: 'tab', 'space', or 'nothing' */
-  suffix?: string;
+  suffix?: 'tab' | 'space' | 'nothing';
   /** The text content of the marker (for measurement if glyphWidthPx not available) */
   markerText?: string;
   /** Formatting information for the marker (for measurement if needed) */
@@ -62,6 +65,8 @@ export type MinimalWordLayout = {
   firstLineIndentMode?: boolean;
   /** Pre-calculated horizontal position where text should start */
   textStartPx?: number;
+  /** Left indent in pixels from word-layout marker positioning */
+  indentLeftPx?: number;
   /** Array of tab stop positions in pixels (for firstLineIndentMode) */
   tabsPx?: number[];
   /** Marker information */