diff --git a/packages/document-api/src/inline-semantics/token-parsers.ts b/packages/document-api/src/inline-semantics/token-parsers.ts
index 51a68be4c1..49fc4be2fe 100644
--- a/packages/document-api/src/inline-semantics/token-parsers.ts
+++ b/packages/document-api/src/inline-semantics/token-parsers.ts
@@ -9,7 +9,13 @@
 import type { CoreTogglePropertyId } from './property-ids.js';
 import type { InvalidInlineTokenError, InvalidInlineTokenToggle, InvalidInlineTokenUnderline } from './error-types.js';
 import type { DirectState } from './directives.js';
-import { ST_ON_OFF_VALUE_SET, ST_ON_OFF_ON_VALUES, ST_ON_OFF_OFF_VALUES, ST_UNDERLINE_VALUE_SET, ST_THEME_COLOR_VALUE_SET  } from './token-sets.js';
+import {
+  ST_ON_OFF_VALUE_SET,
+  ST_ON_OFF_ON_VALUES,
+  ST_ON_OFF_OFF_VALUES,
+  ST_UNDERLINE_VALUE_SET,
+  ST_THEME_COLOR_VALUE_SET,
+} from './token-sets.js';
 
 // ---------------------------------------------------------------------------
 // Result types
diff --git a/packages/layout-engine/contracts/src/index.ts b/packages/layout-engine/contracts/src/index.ts
index eb453d72fa..4a0c9f8bc7 100644
--- a/packages/layout-engine/contracts/src/index.ts
+++ b/packages/layout-engine/contracts/src/index.ts
@@ -1790,6 +1790,13 @@ export interface PositionMapping {
   readonly maps: readonly unknown[];
 }
 
+/**
+ * Rendering flow mode.
+ * - `paginated`: discrete page surfaces
+ * - `semantic`: continuous flow surface
+ */
+export type FlowMode = 'paginated' | 'semantic';
+
 export interface PainterDOM {
   paint(layout: Layout, mount: HTMLElement, mapping?: PositionMapping): void;
   /**
diff --git a/packages/layout-engine/layout-bridge/src/incrementalLayout.ts b/packages/layout-engine/layout-bridge/src/incrementalLayout.ts
index 6b82c6358e..ab5953ab54 100644
--- a/packages/layout-engine/layout-bridge/src/incrementalLayout.ts
+++ b/packages/layout-engine/layout-bridge/src/incrementalLayout.ts
@@ -16,6 +16,7 @@ import {
   computeDisplayPageNumber,
   resolvePageNumberTokens,
   type NumberingContext,
+  SEMANTIC_PAGE_HEIGHT_PX,
 } from '@superdoc/layout-engine';
 import { remeasureParagraph } from './remeasure';
 import { computeDirtyRegions } from './diff';
@@ -740,6 +741,15 @@ export async function incrementalLayout(
   },
   previousMeasures?: Measure[] | null,
 ): Promise<IncrementalLayoutResult> {
+  const isSemanticFlow = options.flowMode === 'semantic';
+
+  // In semantic mode, neutralize paginated-only inputs so downstream code
+  // doesn't need per-step guards.
+  if (isSemanticFlow) {
+    headerFooter = undefined;
+    nextBlocks = rewriteSectionBreaksForSemanticFlow(nextBlocks, options);
+  }
+
   // Dirty region computation
   const dirtyStart = performance.now();
   const dirty = computeDirtyRegions(previousBlocks, nextBlocks);
@@ -765,7 +775,15 @@ export async function incrementalLayout(
   }
 
   const hasPreviousMeasures = Array.isArray(previousMeasures) && previousMeasures.length === previousBlocks.length;
-  const previousConstraints = hasPreviousMeasures ? resolveMeasurementConstraints(options, previousBlocks) : null;
+  // In semantic mode, the options-level semantic.contentWidth can change between
+  // renders (container resize) while the block content stays the same. Since
+  // previousConstraints is re-derived from the current options (not the options
+  // that produced the previous measures), it would incorrectly match the current
+  // constraints even when the previous measures were taken at a different width.
+  // Disable previous-pass measure reuse in semantic mode; the width-keyed
+  // measureCache still provides fast lookups for unchanged blocks.
+  const previousConstraints =
+    hasPreviousMeasures && !isSemanticFlow ? resolveMeasurementConstraints(options, previousBlocks) : null;
   const canReusePreviousMeasures =
     hasPreviousMeasures &&
     previousConstraints?.measurementWidth === measurementWidth &&
@@ -1098,7 +1116,7 @@ export async function incrementalLayout(
   let converged = true;
 
   // Only run token resolution if feature flag is enabled
-  if (FeatureFlags.BODY_PAGE_TOKENS) {
+  if (!isSemanticFlow && FeatureFlags.BODY_PAGE_TOKENS) {
     while (iteration < maxIterations) {
       // Build numbering context from current layout
       const sections = options.sectionMetadata ?? [];
@@ -1212,7 +1230,7 @@ export async function incrementalLayout(
   let extraBlocks: FlowBlock[] | undefined;
   let extraMeasures: Measure[] | undefined;
   const footnotesInput = isFootnotesLayoutInput(options.footnotes) ? options.footnotes : null;
-  if (footnotesInput && footnotesInput.refs.length > 0 && footnotesInput.blocksById.size > 0) {
+  if (!isSemanticFlow && footnotesInput && footnotesInput.refs.length > 0 && footnotesInput.blocksById.size > 0) {
     const gap = typeof footnotesInput.gap === 'number' && Number.isFinite(footnotesInput.gap) ? footnotesInput.gap : 2;
     const topPadding =
       typeof footnotesInput.topPadding === 'number' && Number.isFinite(footnotesInput.topPadding)
@@ -1921,6 +1939,40 @@ const DEFAULT_MARGINS = { top: 72, right: 72, bottom: 72, left: 72 };
 export const normalizeMargin = (value: number | undefined, fallback: number): number =>
   Number.isFinite(value) ? (value as number) : fallback;
 
+/**
+ * Rewrites section break blocks so that `layoutDocument` uses the semantic page
+ * dimensions instead of the per-section DOCX page sizes. Without this, each
+ * section break carries its original narrow DOCX `pageSize` / `margins` /
+ * `columns`, and `layoutDocument` would switch `activePageSize` to those values
+ * — defeating the semantic flow's container-width–based layout.
+ *
+ * Only the block-level layout properties are overridden; everything else
+ * (numbering, header/footer refs, vAlign, orientation) is preserved.
+ */
+function rewriteSectionBreaksForSemanticFlow(blocks: FlowBlock[], options: LayoutOptions): FlowBlock[] {
+  const semanticPageSize = options.pageSize;
+  const semanticMargins = options.margins;
+  if (!semanticPageSize) return blocks;
+  if (!blocks.some((b) => b.kind === 'sectionBreak')) return blocks;
+
+  return blocks.map((block) => {
+    if (block.kind !== 'sectionBreak') return block;
+    const sb = block as SectionBreakBlock;
+    return {
+      ...sb,
+      pageSize: { w: semanticPageSize.w, h: semanticPageSize.h },
+      margins: {
+        ...sb.margins,
+        top: semanticMargins?.top,
+        right: semanticMargins?.right,
+        bottom: semanticMargins?.bottom,
+        left: semanticMargins?.left,
+      },
+      columns: { count: 1, gap: 0 },
+    };
+  });
+}
+
 /**
  * Computes measurement constraints for each block based on its section's properties.
  *
@@ -2050,6 +2102,26 @@ export function resolveMeasurementConstraints(
   measurementWidth: number;
   measurementHeight: number;
 } {
+  if (options.flowMode === 'semantic') {
+    const semanticContentWidth = options.semantic?.contentWidth;
+    if (typeof semanticContentWidth === 'number' && Number.isFinite(semanticContentWidth) && semanticContentWidth > 0) {
+      const semanticTop = normalizeMargin(
+        options.semantic?.marginTop,
+        normalizeMargin(options.margins?.top, DEFAULT_MARGINS.top),
+      );
+      const semanticBottom = normalizeMargin(
+        options.semantic?.marginBottom,
+        normalizeMargin(options.margins?.bottom, DEFAULT_MARGINS.bottom),
+      );
+      const measurementHeight = Math.max(1, SEMANTIC_PAGE_HEIGHT_PX - (semanticTop + semanticBottom));
+      const measurementWidth = Math.max(1, Math.floor(semanticContentWidth));
+      return {
+        measurementWidth,
+        measurementHeight,
+      };
+    }
+  }
+
   const pageSize = options.pageSize ?? DEFAULT_PAGE_SIZE;
   const margins = {
     top: normalizeMargin(options.margins?.top, DEFAULT_MARGINS.top),
diff --git a/packages/layout-engine/layout-bridge/src/index.ts b/packages/layout-engine/layout-bridge/src/index.ts
index a99eadccf0..d076aed516 100644
--- a/packages/layout-engine/layout-bridge/src/index.ts
+++ b/packages/layout-engine/layout-bridge/src/index.ts
@@ -50,7 +50,7 @@ export {
 export type { HeaderFooterBatch, DigitBucket } from './layoutHeaderFooter';
 export { findWordBoundaries, findParagraphBoundaries } from './text-boundaries';
 export type { BoundaryRange } from './text-boundaries';
-export { incrementalLayout, measureCache } from './incrementalLayout';
+export { incrementalLayout, measureCache, normalizeMargin } from './incrementalLayout';
 export type { HeaderFooterLayoutResult, IncrementalLayoutResult } from './incrementalLayout';
 // Re-export computeDisplayPageNumber from layout-engine for section-aware page numbering
 export { computeDisplayPageNumber, type DisplayPageInfo } from '@superdoc/layout-engine';
diff --git a/packages/layout-engine/layout-bridge/test/incrementalLayout.semanticFlow.test.ts b/packages/layout-engine/layout-bridge/test/incrementalLayout.semanticFlow.test.ts
new file mode 100644
index 0000000000..7a611ae7d8
--- /dev/null
+++ b/packages/layout-engine/layout-bridge/test/incrementalLayout.semanticFlow.test.ts
@@ -0,0 +1,126 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { incrementalLayout } from '../src/incrementalLayout';
+
+import type { FlowBlock, Measure, SectionBreakBlock } from '@superdoc/contracts';
+
+const makeParagraph = (id: string, text: string): FlowBlock => ({
+  kind: 'paragraph',
+  id,
+  runs: [{ text, fontFamily: 'Arial', fontSize: 12 }],
+});
+
+const makeParagraphMeasure = (lineHeight: number, runLength: number, maxWidth: number): Measure => ({
+  kind: 'paragraph',
+  lines: [
+    {
+      fromRun: 0,
+      fromChar: 0,
+      toRun: 0,
+      toChar: runLength,
+      width: Math.min(maxWidth, runLength * 7),
+      ascent: lineHeight * 0.8,
+      descent: lineHeight * 0.2,
+      lineHeight,
+      maxWidth,
+    },
+  ],
+  totalHeight: lineHeight,
+});
+
+describe('incrementalLayout semantic flow', () => {
+  it('rewrites section-break columns to single-column semantic width before layout', async () => {
+    const semanticMargins = { top: 24, right: 100, bottom: 36, left: 100 };
+    const semanticContentWidth = 600;
+    const semanticPageWidth = semanticContentWidth + semanticMargins.left + semanticMargins.right;
+
+    const firstSectionBreak: SectionBreakBlock = {
+      kind: 'sectionBreak',
+      id: 'sb-1',
+      type: 'continuous',
+      attrs: { isFirstSection: true, source: 'sectPr' },
+      // Intentionally narrow + multi-column: would reduce paragraph fragment width
+      // without semantic rewrite in incrementalLayout.
+      pageSize: { w: 320, h: 900 },
+      margins: { top: 12, right: 12, bottom: 12, left: 12 },
+      columns: { count: 2, gap: 24 },
+    };
+
+    const paragraph = makeParagraph('p-1', 'Semantic section rewrite keeps this paragraph full-width.');
+    const paragraphTextLength = paragraph.kind === 'paragraph' ? paragraph.runs[0].text.length : 1;
+
+    const measureBlock = vi.fn(async (block: FlowBlock, constraints: { maxWidth: number; maxHeight: number }) => {
+      if (block.kind !== 'paragraph') {
+        throw new Error(`Unexpected block kind in test measure: ${block.kind}`);
+      }
+      return makeParagraphMeasure(20, paragraphTextLength, constraints.maxWidth);
+    });
+
+    const result = await incrementalLayout(
+      [],
+      null,
+      [firstSectionBreak, paragraph],
+      {
+        flowMode: 'semantic',
+        pageSize: { w: semanticPageWidth, h: 900 },
+        margins: semanticMargins,
+        semantic: {
+          contentWidth: semanticContentWidth,
+          marginTop: semanticMargins.top,
+          marginBottom: semanticMargins.bottom,
+        },
+      },
+      measureBlock,
+    );
+
+    const paragraphFragment = result.layout.pages
+      .flatMap((page) => page.fragments)
+      .find((fragment) => fragment.kind === 'para' && fragment.blockId === paragraph.id);
+
+    expect(paragraphFragment).toBeDefined();
+    expect(paragraphFragment?.width).toBe(semanticContentWidth);
+  });
+
+  it('skips header/footer layout work in semantic flow mode', async () => {
+    const paragraph = makeParagraph('body-1', 'Body content');
+    const headerParagraph = makeParagraph('header-1', 'Header content');
+
+    const measureBlock = vi.fn(async (block: FlowBlock, constraints: { maxWidth: number; maxHeight: number }) => {
+      if (block.kind !== 'paragraph') {
+        throw new Error(`Unexpected block kind in test measure: ${block.kind}`);
+      }
+      const runLength = block.runs[0]?.text?.length ?? 1;
+      return makeParagraphMeasure(20, runLength, constraints.maxWidth);
+    });
+
+    const headerMeasure = vi.fn(async (block: FlowBlock, constraints: { maxWidth: number; maxHeight: number }) => {
+      if (block.kind !== 'paragraph') {
+        throw new Error(`Unexpected header block kind in test measure: ${block.kind}`);
+      }
+      const runLength = block.runs[0]?.text?.length ?? 1;
+      return makeParagraphMeasure(20, runLength, constraints.maxWidth);
+    });
+
+    const result = await incrementalLayout(
+      [],
+      null,
+      [paragraph],
+      {
+        flowMode: 'semantic',
+        pageSize: { w: 800, h: 900 },
+        margins: { top: 40, right: 100, bottom: 40, left: 100 },
+        semantic: { contentWidth: 600, marginTop: 40, marginBottom: 40 },
+      },
+      measureBlock,
+      {
+        headerBlocks: { default: [headerParagraph] },
+        constraints: { width: 600, height: 80 },
+        measure: headerMeasure,
+      },
+    );
+
+    expect(result.headers).toBeUndefined();
+    expect(result.footers).toBeUndefined();
+    expect(headerMeasure).not.toHaveBeenCalled();
+  });
+});
diff --git a/packages/layout-engine/layout-bridge/test/resolveMeasurementConstraints.test.ts b/packages/layout-engine/layout-bridge/test/resolveMeasurementConstraints.test.ts
index 8b5b7b3e5f..1f112e72d0 100644
--- a/packages/layout-engine/layout-bridge/test/resolveMeasurementConstraints.test.ts
+++ b/packages/layout-engine/layout-bridge/test/resolveMeasurementConstraints.test.ts
@@ -277,6 +277,54 @@ describe('resolveMeasurementConstraints', () => {
     });
   });
 
+  describe('semantic flow constraints', () => {
+    it('uses semantic content width directly when provided', () => {
+      const options: LayoutOptions = {
+        flowMode: 'semantic',
+        pageSize: { w: 612, h: 792 },
+        margins: { top: 72, right: 72, bottom: 72, left: 72 },
+        semantic: {
+          contentWidth: 530,
+          marginTop: 40,
+          marginBottom: 50,
+        },
+      };
+
+      const result = resolveMeasurementConstraints(options);
+      expect(result.measurementWidth).toBe(530);
+      expect(result.measurementHeight).toBe(999910); // 1_000_000 - (40 + 50)
+    });
+
+    it('normalizes fractional semantic content width to match layout rounding', () => {
+      const options: LayoutOptions = {
+        flowMode: 'semantic',
+        pageSize: { w: 612, h: 792 },
+        margins: { top: 72, right: 72, bottom: 72, left: 72 },
+        semantic: {
+          contentWidth: 530.9,
+          marginTop: 40,
+          marginBottom: 50,
+        },
+      };
+
+      const result = resolveMeasurementConstraints(options);
+      expect(result.measurementWidth).toBe(530);
+      expect(result.measurementHeight).toBe(999910);
+    });
+
+    it('falls back to paginated constraints when semantic content width is missing', () => {
+      const options: LayoutOptions = {
+        flowMode: 'semantic',
+        pageSize: { w: 612, h: 792 },
+        margins: { top: 72, right: 72, bottom: 72, left: 72 },
+      };
+
+      const result = resolveMeasurementConstraints(options);
+      expect(result.measurementWidth).toBe(468);
+      expect(result.measurementHeight).toBe(648);
+    });
+  });
+
   describe('column width calculations', () => {
     it('handles zero gap in multi-column layout', () => {
       const options: LayoutOptions = {
diff --git a/packages/layout-engine/layout-engine/src/index.d.ts b/packages/layout-engine/layout-engine/src/index.d.ts
index fcd5e70ab2..88ae162921 100644
--- a/packages/layout-engine/layout-engine/src/index.d.ts
+++ b/packages/layout-engine/layout-engine/src/index.d.ts
@@ -1,6 +1,7 @@
 import type {
   ColumnLayout,
   FlowBlock,
+  FlowMode,
   HeaderFooterLayout,
   Layout,
   Measure,
@@ -23,8 +24,17 @@ export type LayoutOptions = {
   pageSize?: PageSize;
   margins?: Margins;
   columns?: ColumnLayout;
+  flowMode?: FlowMode;
+  semantic?: {
+    contentWidth?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+  };
   remeasureParagraph?: (block: ParagraphBlock, maxWidth: number, firstLineIndent?: number) => ParagraphMeasure;
 };
+export declare const SEMANTIC_PAGE_HEIGHT_PX = 1000000;
 export type HeaderFooterConstraints = {
   width: number;
   height: number;
diff --git a/packages/layout-engine/layout-engine/src/index.ts b/packages/layout-engine/layout-engine/src/index.ts
index a884d50b81..09aae9dc94 100644
--- a/packages/layout-engine/layout-engine/src/index.ts
+++ b/packages/layout-engine/layout-engine/src/index.ts
@@ -24,6 +24,7 @@ import type {
   DrawingMeasure,
   DrawingFragment,
   SectionNumbering,
+  FlowMode,
 } from '@superdoc/contracts';
 import { createFloatingObjectManager, computeAnchorX } from './floating-objects.js';
 import { computeNextSectionPropsAtBreak } from './section-props';
@@ -62,6 +63,12 @@ type NormalizedColumns = ColumnLayout & { width: number };
  */
 const DEFAULT_PARAGRAPH_LINE_HEIGHT_PX = 20;
 
+/**
+ * Synthetic page height used in semantic flow mode to avoid pagination-driven clipping
+ * during measurement. A large finite value preserves stable measurement constraints.
+ */
+export const SEMANTIC_PAGE_HEIGHT_PX = 1_000_000;
+
 /**
  * Type guard to check if a fragment has a height property.
  * Image, Drawing, and Table fragments all have a required height property.
@@ -419,6 +426,14 @@ export type LayoutOptions = {
   pageSize?: PageSize;
   margins?: Margins;
   columns?: ColumnLayout;
+  flowMode?: FlowMode;
+  semantic?: {
+    contentWidth?: number;
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
+  };
   remeasureParagraph?: (block: ParagraphBlock, maxWidth: number, firstLineIndent?: number) => ParagraphMeasure;
   sectionMetadata?: SectionMetadata[];
   /**
diff --git a/packages/layout-engine/painters/dom/src/index.ts b/packages/layout-engine/painters/dom/src/index.ts
index ad734f8e99..cd029a149e 100644
--- a/packages/layout-engine/painters/dom/src/index.ts
+++ b/packages/layout-engine/painters/dom/src/index.ts
@@ -10,7 +10,7 @@ import type {
 } from '@superdoc/contracts';
 import { DomPainter } from './renderer.js';
 import type { PageStyles } from './styles.js';
-import type { PaintSnapshot, RulerOptions } from './renderer.js';
+import type { PaintSnapshot, RulerOptions, FlowMode } from './renderer.js';
 
 // Re-export constants
 export { DOM_CLASS_NAMES } from './constants.js';
@@ -55,6 +55,7 @@ export {
 export type { PmPositionValidationStats } from './pm-position-validation.js';
 
 export type LayoutMode = 'vertical' | 'horizontal' | 'book';
+export type { FlowMode } from './renderer.js';
 export type PageDecorationPayload = {
   fragments: Fragment[];
   height: number;
@@ -82,6 +83,7 @@ export type DomPainterOptions = {
   measures: Measure[];
   pageStyles?: PageStyles;
   layoutMode?: LayoutMode;
+  flowMode?: FlowMode;
   /** Gap between pages in pixels (default: 24px for vertical, 20px for horizontal) */
   pageGap?: number;
   headerProvider?: PageDecorationProvider;
@@ -99,7 +101,7 @@ export type DomPainterOptions = {
     overscan?: number;
     /**
      * Gap between pages used for spacer math (px). When set, container gap is overridden
-     * to this value during virtualization. Default approximates existing margin+gap look: 72.
+     * to this value during virtualization. Defaults to the effective `pageGap`.
      */
     gap?: number;
     /** Optional mount padding-top override (px) used in scroll mapping; defaults to computed style. */
@@ -128,6 +130,7 @@ export const createDomPainter = (
   const painter = new DomPainter(options.blocks, options.measures, {
     pageStyles: options.pageStyles,
     layoutMode: options.layoutMode,
+    flowMode: options.flowMode,
     pageGap: options.pageGap,
     headerProvider: options.headerProvider,
     footerProvider: options.footerProvider,
diff --git a/packages/layout-engine/painters/dom/src/renderer.ts b/packages/layout-engine/painters/dom/src/renderer.ts
index 9b00a82d97..4a6fe8c81e 100644
--- a/packages/layout-engine/painters/dom/src/renderer.ts
+++ b/packages/layout-engine/painters/dom/src/renderer.ts
@@ -43,6 +43,7 @@ import type {
   TableAttrs,
   TableCellAttrs,
   PositionMapping,
+  FlowMode,
   CustomGeometryData,
 } from '@superdoc/contracts';
 import { calculateJustifySpacing, computeLinePmRange, shouldApplyJustify, SPACE_CHARS } from '@superdoc/contracts';
@@ -264,6 +265,8 @@ function isMinimalWordLayout(value: unknown): value is MinimalWordLayout {
  * - 'book': Book-style layout with facing pages
  */
 export type LayoutMode = 'vertical' | 'horizontal' | 'book';
+// FlowMode is re-exported from @superdoc/contracts
+export type { FlowMode } from '@superdoc/contracts';
 
 type PageDecorationPayload = {
   fragments: Fragment[];
@@ -310,6 +313,7 @@ export type RulerOptions = {
 type PainterOptions = {
   pageStyles?: PageStyles;
   layoutMode?: LayoutMode;
+  flowMode?: FlowMode;
   /** Gap between pages in pixels (default: 24px for vertical, 20px for horizontal) */
   pageGap?: number;
   headerProvider?: PageDecorationProvider;
@@ -318,7 +322,7 @@ type PainterOptions = {
     enabled?: boolean;
     window?: number;
     overscan?: number;
-    /** Virtualization gap override (defaults to 72px; independent of pageGap) */
+    /** Virtualization gap override (defaults to 72px; independent of pageGap). */
     gap?: number;
     paddingTop?: number;
   };
@@ -986,6 +990,7 @@ export class DomPainter {
   private currentLayout: Layout | null = null;
   private changedBlocks = new Set<string>();
   private readonly layoutMode: LayoutMode;
+  private readonly isSemanticFlow: boolean;
   private headerProvider?: PageDecorationProvider;
   private footerProvider?: PageDecorationProvider;
   private totalPages = 0;
@@ -1045,6 +1050,7 @@ export class DomPainter {
   constructor(blocks: FlowBlock[], measures: Measure[], options: PainterOptions = {}) {
     this.options = options;
     this.layoutMode = options.layoutMode ?? 'vertical';
+    this.isSemanticFlow = (options.flowMode ?? 'paginated') === 'semantic';
     this.blockLookup = this.buildBlockLookup(blocks, measures);
     this.headerProvider = options.headerProvider;
     this.footerProvider = options.footerProvider;
@@ -1057,11 +1063,12 @@ export class DomPainter {
         : defaultGap;
 
     // Initialize virtualization config (feature-flagged)
-    if (this.layoutMode === 'vertical' && options.virtualization?.enabled) {
+    if (!this.isSemanticFlow && this.layoutMode === 'vertical' && options.virtualization?.enabled) {
       this.virtualEnabled = true;
       this.virtualWindow = Math.max(1, options.virtualization.window ?? 5);
       this.virtualOverscan = Math.max(0, options.virtualization.overscan ?? 0);
-      // Virtualization gap: use explicit virtualization.gap if provided, otherwise default to virtualized gap (72px)
+      // Virtualization gap: use explicit virtualization.gap if provided,
+      // otherwise default to legacy virtualized gap (72px).
       const maybeGap = options.virtualization.gap;
       if (typeof maybeGap === 'number' && Number.isFinite(maybeGap)) {
         this.virtualGap = Math.max(0, maybeGap);
@@ -1433,7 +1440,7 @@ export class DomPainter {
     ensureSdtContainerStyles(doc);
     ensureImageSelectionStyles(doc);
     ensureNativeSelectionStyles(doc);
-    if (this.options.ruler?.enabled) {
+    if (!this.isSemanticFlow && this.options.ruler?.enabled) {
       ensureRulerStyles(doc);
     }
     mount.classList.add(CLASS_NAMES.container);
@@ -1447,6 +1454,22 @@ export class DomPainter {
     this.beginPaintSnapshot(layout);
 
     this.totalPages = layout.pages.length;
+    if (this.isSemanticFlow) {
+      // Semantic mode always renders as a single continuous surface.
+      applyStyles(mount, containerStyles);
+      mount.style.gap = '0px';
+      mount.style.alignItems = 'stretch';
+      if (!this.currentLayout || this.pageStates.length === 0) {
+        this.fullRender(layout);
+      } else {
+        this.patchLayout(layout);
+      }
+      this.currentLayout = layout;
+      this.changedBlocks.clear();
+      this.currentMapping = null;
+      return;
+    }
+
     let useDomSnapshotFallback = false;
     const mode = this.layoutMode;
     if (mode === 'horizontal') {
@@ -1885,12 +1908,13 @@ export class DomPainter {
     const el = this.doc.createElement('div');
     el.classList.add(CLASS_NAMES.page);
     applyStyles(el, pageStyles(width, height, this.getEffectivePageStyles()));
+    this.applySemanticPageOverrides(el);
     el.dataset.layoutEpoch = String(this.layoutEpoch);
     el.dataset.pageNumber = String(page.number);
     el.dataset.pageIndex = String(pageIndex);
 
-    // Render per-page ruler if enabled
-    if (this.options.ruler?.enabled) {
+    // Render per-page ruler if enabled (suppressed in semantic flow mode)
+    if (!this.isSemanticFlow && this.options.ruler?.enabled) {
       const rulerEl = this.renderPageRuler(width, page);
       if (rulerEl) {
         el.appendChild(rulerEl);
@@ -1993,6 +2017,7 @@ export class DomPainter {
   }
 
   private renderDecorationsForPage(pageEl: HTMLElement, page: Page, pageIndex: number): void {
+    if (this.isSemanticFlow) return;
     this.renderDecorationSection(pageEl, page, pageIndex, 'header');
     this.renderDecorationSection(pageEl, page, pageIndex, 'footer');
   }
@@ -2239,6 +2264,7 @@ export class DomPainter {
   private patchPage(state: PageDomState, page: Page, pageSize: { w: number; h: number }, pageIndex: number): void {
     const pageEl = state.element;
     applyStyles(pageEl, pageStyles(pageSize.w, pageSize.h, this.getEffectivePageStyles()));
+    this.applySemanticPageOverrides(pageEl);
     pageEl.dataset.pageNumber = String(page.number);
     pageEl.dataset.layoutEpoch = String(this.layoutEpoch);
     // pageIndex is already set during creation and doesn't change during patch
@@ -2384,6 +2410,7 @@ export class DomPainter {
     const el = this.doc.createElement('div');
     el.classList.add(CLASS_NAMES.page);
     applyStyles(el, pageStyles(pageSize.w, pageSize.h, this.getEffectivePageStyles()));
+    this.applySemanticPageOverrides(el);
     el.dataset.layoutEpoch = String(this.layoutEpoch);
 
     const contextBase: FragmentRenderContext = {
@@ -2411,7 +2438,25 @@ export class DomPainter {
     return { element: el, fragments: fragmentStates };
   }
 
+  private applySemanticPageOverrides(el: HTMLElement): void {
+    if (this.isSemanticFlow) {
+      el.style.overflow = 'visible';
+      el.style.width = '100%';
+      el.style.minWidth = '100%';
+    }
+  }
+
   private getEffectivePageStyles(): PageStyles | undefined {
+    if (this.isSemanticFlow) {
+      const base = this.options.pageStyles ?? {};
+      return {
+        ...base,
+        background: base.background ?? '#fff',
+        boxShadow: 'none',
+        border: 'none',
+        margin: '0',
+      };
+    }
     if (this.virtualEnabled && this.layoutMode === 'vertical') {
       // Remove top/bottom margins to avoid double-counting with container gap during virtualization
       const base = this.options.pageStyles ?? {};
diff --git a/packages/layout-engine/painters/dom/src/virtualization.test.ts b/packages/layout-engine/painters/dom/src/virtualization.test.ts
index 2241668f79..1fa4388b85 100644
--- a/packages/layout-engine/painters/dom/src/virtualization.test.ts
+++ b/packages/layout-engine/painters/dom/src/virtualization.test.ts
@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { createDomPainter } from './index.js';
 import type { FlowBlock, Measure, Layout, Fragment, PageMargins } from '@superdoc/contracts';
 
@@ -621,4 +621,69 @@ describe('DomPainter virtualization (vertical)', () => {
     const firstIndexAfter = firstPageAfter ? Number(firstPageAfter.dataset.pageIndex) : -1;
     expect(firstIndexAfter).toBeGreaterThanOrEqual(firstIndexBefore);
   });
+
+  it('disables virtualization rendering paths in semantic flow mode', () => {
+    const painter = createDomPainter({
+      blocks: [block],
+      measures: [measure],
+      flowMode: 'semantic',
+      virtualization: { enabled: true, window: 2, overscan: 0, gap: 72, paddingTop: 0 },
+    });
+
+    const layout = makeLayout(8);
+    painter.paint(layout, mount);
+
+    const pages = mount.querySelectorAll('.superdoc-page');
+    expect(pages.length).toBe(8);
+    expect(mount.querySelector('[data-virtual-spacer="top"]')).toBeNull();
+    expect(mount.querySelector('[data-virtual-spacer="bottom"]')).toBeNull();
+  });
+
+  it('skips header/footer decoration providers in semantic flow mode', () => {
+    const headerProvider = vi.fn(() => ({
+      height: 20,
+      offset: 0,
+      fragments: [
+        {
+          kind: 'para',
+          blockId: block.id,
+          fromLine: 0,
+          toLine: 1,
+          x: 0,
+          y: 0,
+          width: 50,
+        },
+      ],
+    }));
+    const footerProvider = vi.fn(() => ({
+      height: 20,
+      offset: 0,
+      fragments: [
+        {
+          kind: 'para',
+          blockId: block.id,
+          fromLine: 0,
+          toLine: 1,
+          x: 0,
+          y: 0,
+          width: 50,
+        },
+      ],
+    }));
+
+    const painter = createDomPainter({
+      blocks: [block],
+      measures: [measure],
+      flowMode: 'semantic',
+      headerProvider,
+      footerProvider,
+    });
+
+    painter.paint(makeLayout(2), mount);
+
+    expect(headerProvider).not.toHaveBeenCalled();
+    expect(footerProvider).not.toHaveBeenCalled();
+    expect(mount.querySelector('.superdoc-page-header')).toBeNull();
+    expect(mount.querySelector('.superdoc-page-footer')).toBeNull();
+  });
 });
diff --git a/packages/layout-engine/pm-adapter/src/converters/table.ts b/packages/layout-engine/pm-adapter/src/converters/table.ts
index eefbadf98b..452383b756 100644
--- a/packages/layout-engine/pm-adapter/src/converters/table.ts
+++ b/packages/layout-engine/pm-adapter/src/converters/table.ts
@@ -34,7 +34,12 @@ import type {
   NestedConverters,
   TableNodeToBlockParams,
 } from '../types.js';
-import { extractTableBorders, extractCellPadding, convertBorderSpec, normalizeShadingColor  } from '../attributes/index.js';
+import {
+  extractTableBorders,
+  extractCellPadding,
+  convertBorderSpec,
+  normalizeShadingColor,
+} from '../attributes/index.js';
 import { pickNumber, twipsToPx } from '../utilities.js';
 import { hydrateTableStyleAttrs } from './table-styles.js';
 import { collectTrackedChangeFromMarks } from '../marks/index.js';
diff --git a/packages/super-editor/src/components/SuperEditor.vue b/packages/super-editor/src/components/SuperEditor.vue
index d1a5a8483b..61a9863cef 100644
--- a/packages/super-editor/src/components/SuperEditor.vue
+++ b/packages/super-editor/src/components/SuperEditor.vue
@@ -1115,13 +1115,16 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="super-editor-container" :class="{ 'web-layout': isWebLayout }" :style="containerStyle">
-    <!-- Ruler: teleport to external container if specified, otherwise render inline -->
-    <Teleport v-if="options.rulerContainer && rulersVisible && !!activeEditor" :to="options.rulerContainer">
+    <!-- Ruler: teleport to external container if specified, otherwise render inline (hidden in web layout) -->
+    <Teleport
+      v-if="options.rulerContainer && rulersVisible && !isWebLayout && !!activeEditor"
+      :to="options.rulerContainer"
+    >
       <div class="ruler-host" :style="rulerHostStyle">
         <Ruler class="ruler superdoc-ruler" :editor="activeEditor" @margin-change="handleMarginChange" />
       </div>
     </Teleport>
-    <div v-else-if="rulersVisible && !!activeEditor" class="ruler-host" :style="rulerHostStyle">
+    <div v-else-if="rulersVisible && !isWebLayout && !!activeEditor" class="ruler-host" :style="rulerHostStyle">
       <Ruler class="ruler" :editor="activeEditor" @margin-change="handleMarginChange" />
     </div>
 
diff --git a/packages/super-editor/src/core/presentation-editor/PresentationEditor.ts b/packages/super-editor/src/core/presentation-editor/PresentationEditor.ts
index fb12563003..5f72bb83dd 100644
--- a/packages/super-editor/src/core/presentation-editor/PresentationEditor.ts
+++ b/packages/super-editor/src/core/presentation-editor/PresentationEditor.ts
@@ -112,6 +112,7 @@ import { ySyncPluginKey } from 'y-prosemirror';
 import type * as Y from 'yjs';
 import type { HeaderFooterDescriptor } from '../header-footer/HeaderFooterRegistry.js';
 import { isInRegisteredSurface } from './utils/uiSurfaceRegistry.js';
+import { buildSemanticFootnoteBlocks } from './semantic-flow-footnotes.js';
 import { splitRunsAtDecorationBoundaries } from './layout/SplitRunsAtDecorationBoundaries.js';
 
 // Types
@@ -146,6 +147,7 @@ import type {
   PendingMarginClick,
   EditorViewWithScrollFlag,
   PotentiallyMockedFunction,
+  ResolvedLayoutOptions,
 } from './types.js';
 
 // Re-export public types for backward compatibility
@@ -206,6 +208,10 @@ const HEADER_FOOTER_INIT_BUDGET_MS = 200;
 const MAX_ZOOM_WARNING_THRESHOLD = 10;
 /** Maximum number of selection rectangles per user (performance guardrail) */
 const MAX_SELECTION_RECTS_PER_USER = 100;
+/** Debounce delay for semantic-flow relayout after host resize (milliseconds). */
+const SEMANTIC_RESIZE_DEBOUNCE_MS = 120;
+/** Minimum semantic content width in pixels. */
+const MIN_SEMANTIC_CONTENT_WIDTH_PX = 1;
 
 const GLOBAL_PERFORMANCE: Performance | undefined = typeof performance !== 'undefined' ? performance : undefined;
 
@@ -302,6 +308,10 @@ export class PresentationEditor extends EventEmitter {
   /** RAF handle for coalesced decoration sync scheduling. */
   #decorationSyncRafHandle: number | null = null;
   #rafHandle: number | null = null;
+  #semanticResizeObserver: ResizeObserver | null = null;
+  #semanticResizeRaf: number | null = null;
+  #semanticResizeDebounce: number | null = null;
+  #lastSemanticContainerWidth: number | null = null;
   #editorListeners: Array<{ event: string; handler: (...args: unknown[]) => void }> = [];
   #scrollHandler: (() => void) | null = null;
   #scrollContainer: Element | Window | null = null;
@@ -390,14 +400,24 @@ export class PresentationEditor extends EventEmitter {
         }
       : undefined;
 
+    const requestedFlowMode = options.layoutEngineOptions?.flowMode === 'semantic' ? 'semantic' : 'paginated';
+    const requestedLayoutMode = options.layoutEngineOptions?.layoutMode ?? 'vertical';
     this.#layoutOptions = {
       pageSize: options.layoutEngineOptions?.pageSize ?? DEFAULT_PAGE_SIZE,
       margins: options.layoutEngineOptions?.margins ?? DEFAULT_MARGINS,
-      virtualization: options.layoutEngineOptions?.virtualization,
+      virtualization:
+        requestedFlowMode === 'semantic'
+          ? {
+              ...(options.layoutEngineOptions?.virtualization ?? {}),
+              enabled: false,
+            }
+          : options.layoutEngineOptions?.virtualization,
       zoom: options.layoutEngineOptions?.zoom ?? 1,
       pageStyles: options.layoutEngineOptions?.pageStyles,
       debugLabel: options.layoutEngineOptions?.debugLabel,
-      layoutMode: options.layoutEngineOptions?.layoutMode ?? 'vertical',
+      layoutMode: requestedFlowMode === 'semantic' ? 'vertical' : requestedLayoutMode,
+      flowMode: requestedFlowMode,
+      semanticOptions: options.layoutEngineOptions?.semanticOptions,
       trackedChanges: options.layoutEngineOptions?.trackedChanges,
       emitCommentPositionsInViewing: options.layoutEngineOptions?.emitCommentPositionsInViewing,
       enableCommentsInViewing: options.layoutEngineOptions?.enableCommentsInViewing,
@@ -614,6 +634,7 @@ export class PresentationEditor extends EventEmitter {
       this.#setupDragHandlers();
       this.#setupInputBridge();
       this.#syncTrackedChangesPreferences();
+      this.#setupSemanticResizeObserver();
 
       // Register this instance in the static registry.
       // Use a separate field to avoid mutating the caller's options object and to keep
@@ -1517,6 +1538,103 @@ export class PresentationEditor extends EventEmitter {
     return { ...this.#layoutOptions };
   }
 
+  #isSemanticFlowMode(): boolean {
+    return this.#layoutOptions.flowMode === 'semantic';
+  }
+
+  #resolveSemanticMargins(margins: PageMargins): { left: number; right: number; top: number; bottom: number } {
+    const mode = this.#layoutOptions.semanticOptions?.marginsMode ?? 'firstSection';
+    if (mode === 'none') {
+      return { left: 0, right: 0, top: 0, bottom: 0 };
+    }
+
+    const clamp = (value: number | undefined, fallback: number): number => {
+      const v = typeof value === 'number' && Number.isFinite(value) ? value : fallback;
+      return v >= 0 ? v : fallback;
+    };
+
+    if (mode === 'custom') {
+      const custom = this.#layoutOptions.semanticOptions?.customMargins;
+      return {
+        left: clamp(custom?.left, clamp(margins.left, DEFAULT_MARGINS.left!)),
+        right: clamp(custom?.right, clamp(margins.right, DEFAULT_MARGINS.right!)),
+        top: clamp(custom?.top, clamp(margins.top, DEFAULT_MARGINS.top!)),
+        bottom: clamp(custom?.bottom, clamp(margins.bottom, DEFAULT_MARGINS.bottom!)),
+      };
+    }
+    // mode === 'firstSection' — keep horizontal margins from the first DOCX section
+    // but zero vertical margins so stacked pages form a seamless continuous surface.
+    return {
+      left: clamp(margins.left, DEFAULT_MARGINS.left!),
+      right: clamp(margins.right, DEFAULT_MARGINS.right!),
+      top: 0,
+      bottom: 0,
+    };
+  }
+
+  #resolveSemanticContainerInnerWidth(): number {
+    const host = this.#visibleHost;
+    if (!host) return DEFAULT_PAGE_SIZE.w;
+    const win = host.ownerDocument?.defaultView ?? window;
+    const style = win.getComputedStyle(host);
+    const paddingLeft = Number.parseFloat(style.paddingLeft ?? '0');
+    const paddingRight = Number.parseFloat(style.paddingRight ?? '0');
+    const horizontalPadding =
+      (Number.isFinite(paddingLeft) ? paddingLeft : 0) + (Number.isFinite(paddingRight) ? paddingRight : 0);
+    const clientWidth = host.clientWidth;
+    if (Number.isFinite(clientWidth) && clientWidth > 0) {
+      return Math.max(1, clientWidth - horizontalPadding);
+    }
+    const rectWidth = host.getBoundingClientRect().width;
+    if (Number.isFinite(rectWidth) && rectWidth > 0) {
+      return Math.max(1, rectWidth - horizontalPadding);
+    }
+    return Math.max(1, DEFAULT_PAGE_SIZE.w - horizontalPadding);
+  }
+
+  #setupSemanticResizeObserver(): void {
+    if (!this.#isSemanticFlowMode()) return;
+    const view = this.#visibleHost.ownerDocument?.defaultView ?? window;
+    const ResizeObs = view.ResizeObserver;
+    if (typeof ResizeObs !== 'function') return;
+
+    this.#lastSemanticContainerWidth = this.#resolveSemanticContainerInnerWidth();
+    this.#semanticResizeObserver = new ResizeObs(() => {
+      this.#scheduleSemanticResizeRelayout();
+    });
+    this.#semanticResizeObserver.observe(this.#visibleHost);
+  }
+
+  #scheduleSemanticResizeRelayout(): void {
+    if (!this.#isSemanticFlowMode()) return;
+    const view = this.#visibleHost.ownerDocument?.defaultView ?? window;
+    if (this.#semanticResizeRaf == null) {
+      this.#semanticResizeRaf = view.requestAnimationFrame(() => {
+        this.#semanticResizeRaf = null;
+        this.#applySemanticResizeRelayout();
+      });
+    }
+    if (this.#semanticResizeDebounce != null) {
+      view.clearTimeout(this.#semanticResizeDebounce);
+    }
+    this.#semanticResizeDebounce = view.setTimeout(() => {
+      this.#semanticResizeDebounce = null;
+      this.#applySemanticResizeRelayout();
+    }, SEMANTIC_RESIZE_DEBOUNCE_MS);
+  }
+
+  #applySemanticResizeRelayout(): void {
+    if (!this.#isSemanticFlowMode()) return;
+    const nextWidth = this.#resolveSemanticContainerInnerWidth();
+    const prevWidth = this.#lastSemanticContainerWidth;
+    if (prevWidth != null && Math.abs(nextWidth - prevWidth) < 1) {
+      return;
+    }
+    this.#lastSemanticContainerWidth = nextWidth;
+    this.#pendingDocChange = true;
+    this.#scheduleRerender();
+  }
+
   /**
    * Return a snapshot of painter output captured during the latest paint cycle.
    */
@@ -1600,6 +1718,9 @@ export class PresentationEditor extends EventEmitter {
    * ```
    */
   setLayoutMode(mode: LayoutMode) {
+    if (this.#isSemanticFlowMode()) {
+      return;
+    }
     if (!mode || this.#layoutOptions.layoutMode === mode) {
       return;
     }
@@ -2360,6 +2481,23 @@ export class PresentationEditor extends EventEmitter {
       this.#cursorUpdateTimer = null;
     }
 
+    if (this.#semanticResizeRaf != null) {
+      safeCleanup(() => {
+        const win = this.#visibleHost?.ownerDocument?.defaultView ?? window;
+        win.cancelAnimationFrame(this.#semanticResizeRaf!);
+        this.#semanticResizeRaf = null;
+      }, 'Semantic resize RAF');
+    }
+    if (this.#semanticResizeDebounce != null) {
+      safeCleanup(() => {
+        const win = this.#visibleHost?.ownerDocument?.defaultView ?? window;
+        win.clearTimeout(this.#semanticResizeDebounce!);
+        this.#semanticResizeDebounce = null;
+      }, 'Semantic resize debounce');
+    }
+    this.#semanticResizeObserver?.disconnect();
+    this.#semanticResizeObserver = null;
+
     // Clean up remote cursor manager
     if (this.#remoteCursorManager) {
       safeCleanup(() => {
@@ -3315,6 +3453,7 @@ export class PresentationEditor extends EventEmitter {
       }
 
       this.#applyHtmlAnnotationMeasurements(blocks);
+      const isSemanticFlow = this.#isSemanticFlowMode();
 
       const baseLayoutOptions = this.#resolveLayoutOptions(blocks, sectionMetadata);
       const footnotesLayoutInput = buildFootnotesInput(
@@ -3323,9 +3462,14 @@ export class PresentationEditor extends EventEmitter {
         converterContext,
         this.#editor?.converter?.themeColors ?? undefined,
       );
-      const layoutOptions = footnotesLayoutInput
-        ? { ...baseLayoutOptions, footnotes: footnotesLayoutInput }
-        : baseLayoutOptions;
+      const semanticFootnoteBlocks = isSemanticFlow
+        ? buildSemanticFootnoteBlocks(footnotesLayoutInput, this.#layoutOptions.semanticOptions?.footnotesMode)
+        : [];
+      const blocksForLayout = semanticFootnoteBlocks.length > 0 ? [...blocks, ...semanticFootnoteBlocks] : blocks;
+      const layoutOptions =
+        !isSemanticFlow && footnotesLayoutInput
+          ? { ...baseLayoutOptions, footnotes: footnotesLayoutInput }
+          : baseLayoutOptions;
       const previousBlocks = this.#layoutState.blocks;
       const previousLayout = this.#layoutState.layout;
       const previousMeasures = this.#layoutState.measures;
@@ -3342,7 +3486,7 @@ export class PresentationEditor extends EventEmitter {
         const result = await incrementalLayout(
           previousBlocks,
           previousLayout,
-          blocks,
+          blocksForLayout,
           layoutOptions,
           (block: FlowBlock, constraints: { maxWidth: number; maxHeight: number }) => measureBlock(block, constraints),
           headerFooterInput ?? undefined,
@@ -3390,8 +3534,8 @@ export class PresentationEditor extends EventEmitter {
       if (this.#headerFooterSession) {
         this.#headerFooterSession.multiSectionIdentifier = multiSectionId;
       }
-      const anchorMap = computeAnchorMapFromHelper(bookmarks, layout, blocks);
-      this.#layoutState = { blocks, measures, layout, bookmarks, anchorMap };
+      const anchorMap = computeAnchorMapFromHelper(bookmarks, layout, blocksForLayout);
+      this.#layoutState = { blocks: blocksForLayout, measures, layout, bookmarks, anchorMap };
 
       // Build blockId → pageNumber map for TOC page-number resolution.
       // Stored on editor.storage so the document-api adapter layer can read it
@@ -3414,7 +3558,6 @@ export class PresentationEditor extends EventEmitter {
         tocStorage.pageMap = pageMap;
         tocStorage.pageMapDoc = this.#editor.state.doc;
       }
-
       if (this.#headerFooterSession) {
         this.#headerFooterSession.headerLayoutResults = headerLayouts ?? null;
         this.#headerFooterSession.footerLayoutResults = footerLayouts ?? null;
@@ -3433,13 +3576,14 @@ export class PresentationEditor extends EventEmitter {
         }
       }
 
-      // Process per-rId header/footer content for multi-section support
-      await this.#layoutPerRIdHeaderFooters(headerFooterInput, layout, sectionMetadata);
-
-      this.#updateDecorationProviders(layout);
+      // Process per-rId header/footer content and decoration providers (paginated only)
+      if (!isSemanticFlow) {
+        await this.#layoutPerRIdHeaderFooters(headerFooterInput, layout, sectionMetadata);
+        this.#updateDecorationProviders(layout);
+      }
 
-      const painter = this.#ensurePainter(blocks, measures);
-      if (typeof painter.setProviders === 'function') {
+      const painter = this.#ensurePainter(blocksForLayout, measures);
+      if (!isSemanticFlow && typeof painter.setProviders === 'function') {
         painter.setProviders(
           this.#headerFooterSession?.headerDecorationProvider,
           this.#headerFooterSession?.footerDecorationProvider,
@@ -3490,7 +3634,7 @@ export class PresentationEditor extends EventEmitter {
       // Pass all blocks (main document + headers + footers + extras) to the painter
       const painterSetDataStart = perfNow();
       painter.setData?.(
-        blocks,
+        blocksForLayout,
         measures,
         headerBlocks.length > 0 ? headerBlocks : undefined,
         headerMeasures.length > 0 ? headerMeasures : undefined,
@@ -3534,8 +3678,8 @@ export class PresentationEditor extends EventEmitter {
       // Update viewport dimensions after layout (page count may have changed)
       this.#applyZoom();
 
-      const metrics = createLayoutMetricsFromHelper(perf, startMark, layout, blocks);
-      const payload = { layout, blocks, measures, metrics };
+      const metrics = createLayoutMetricsFromHelper(perf, startMark, layout, blocksForLayout);
+      const payload = { layout, blocks: blocksForLayout, measures, metrics };
       this.emit('layoutUpdated', payload);
       this.emit('paginationUpdate', payload);
 
@@ -3579,6 +3723,7 @@ export class PresentationEditor extends EventEmitter {
         blocks,
         measures,
         layoutMode: this.#layoutOptions.layoutMode ?? 'vertical',
+        flowMode: this.#layoutOptions.flowMode ?? 'paginated',
         virtualization: normalizedVirtualization,
         pageStyles: this.#layoutOptions.pageStyles,
         headerProvider: this.#headerFooterSession?.headerDecorationProvider,
@@ -4256,7 +4401,7 @@ export class PresentationEditor extends EventEmitter {
     overlay.appendChild(fragment);
   }
 
-  #resolveLayoutOptions(blocks: FlowBlock[] | undefined, sectionMetadata: SectionMetadata[]) {
+  #resolveLayoutOptions(blocks: FlowBlock[] | undefined, sectionMetadata: SectionMetadata[]): ResolvedLayoutOptions {
     const defaults = this.#computeDefaultLayoutDefaults();
     const firstSection = blocks?.find(
       (block) =>
@@ -4285,19 +4430,64 @@ export class PresentationEditor extends EventEmitter {
 
     this.#layoutOptions.pageSize = pageSize;
     this.#layoutOptions.margins = margins;
+    const flowMode = this.#layoutOptions.flowMode ?? 'paginated';
+
+    const resolvedMargins = {
+      top: margins.top!,
+      right: margins.right!,
+      bottom: margins.bottom!,
+      left: margins.left!,
+      ...(margins.header != null ? { header: margins.header } : {}),
+      ...(margins.footer != null ? { footer: margins.footer } : {}),
+    };
+
+    if (flowMode === 'semantic') {
+      const semanticMargins = this.#resolveSemanticMargins(margins);
+      const containerWidth = this.#resolveSemanticContainerInnerWidth();
+      const semanticContentWidth = Math.max(
+        MIN_SEMANTIC_CONTENT_WIDTH_PX,
+        containerWidth - semanticMargins.left - semanticMargins.right,
+      );
+      const semanticPageWidth = semanticContentWidth + semanticMargins.left + semanticMargins.right;
+      this.#hiddenHost.style.width = `${semanticContentWidth}px`;
+      this.#lastSemanticContainerWidth = containerWidth;
+      return {
+        flowMode: 'semantic',
+        pageSize: { w: semanticPageWidth, h: pageSize.h },
+        margins: {
+          ...resolvedMargins,
+          top: semanticMargins.top,
+          right: semanticMargins.right,
+          bottom: semanticMargins.bottom,
+          left: semanticMargins.left,
+        },
+        columns: { count: 1, gap: 0 },
+        semantic: {
+          contentWidth: semanticContentWidth,
+          marginLeft: semanticMargins.left,
+          marginRight: semanticMargins.right,
+          marginTop: semanticMargins.top,
+          marginBottom: semanticMargins.bottom,
+        },
+        sectionMetadata,
+      };
+    }
 
     this.#hiddenHost.style.width = `${pageSize.w}px`;
 
     return {
+      flowMode: 'paginated',
       pageSize,
-      margins: margins as Required<Pick<PageMargins, 'top' | 'right' | 'bottom' | 'left'>> &
-        Partial<Pick<PageMargins, 'header' | 'footer'>>,
+      margins: resolvedMargins,
       ...(columns ? { columns } : {}),
       sectionMetadata,
     };
   }
 
   #buildHeaderFooterInput() {
+    if (this.#isSemanticFlowMode()) {
+      return null;
+    }
     const adapter = this.#headerFooterSession?.adapter;
     if (!adapter) {
       return null;
@@ -4820,6 +5010,9 @@ export class PresentationEditor extends EventEmitter {
    * Uses DEFAULT_PAGE_GAP for both virtualized and non-virtualized modes for visual consistency.
    */
   #getEffectivePageGap(): number {
+    if (this.#isSemanticFlowMode()) {
+      return 0;
+    }
     if (this.#layoutOptions.virtualization?.enabled) {
       // Use explicit gap if provided, otherwise use same default as non-virtualized for consistency
       return Math.max(0, this.#layoutOptions.virtualization.gap ?? DEFAULT_PAGE_GAP);
@@ -5016,6 +5209,25 @@ export class PresentationEditor extends EventEmitter {
    * - Horizontal: Uses totalWidth for viewport width, maxHeight for scroll height
    */
   #applyZoom() {
+    if (this.#isSemanticFlowMode()) {
+      // Semantic mode: fill the container with fluid widths, no zoom scaling.
+      this.#viewportHost.style.width = '100%';
+      this.#viewportHost.style.minWidth = '';
+      this.#viewportHost.style.minHeight = '';
+      this.#viewportHost.style.transform = '';
+
+      this.#painterHost.style.width = '100%';
+      this.#painterHost.style.minHeight = '';
+      this.#painterHost.style.transformOrigin = '';
+      this.#painterHost.style.transform = '';
+
+      this.#selectionOverlay.style.width = '100%';
+      this.#selectionOverlay.style.height = '100%';
+      this.#selectionOverlay.style.transformOrigin = '';
+      this.#selectionOverlay.style.transform = '';
+      return;
+    }
+
     // Apply zoom by scaling the children (#painterHost and #selectionOverlay) and
     // setting the viewport dimensions to the scaled size.
     //
diff --git a/packages/super-editor/src/core/presentation-editor/index.ts b/packages/super-editor/src/core/presentation-editor/index.ts
index 017386807c..0b2bf6882b 100644
--- a/packages/super-editor/src/core/presentation-editor/index.ts
+++ b/packages/super-editor/src/core/presentation-editor/index.ts
@@ -16,6 +16,7 @@ export type {
   RemoteUserInfo,
   RemoteCursorState,
   PresenceOptions,
+  FlowMode,
   LayoutEngineOptions,
   TrackedChangesOverrides,
   PresentationEditorOptions,
diff --git a/packages/super-editor/src/core/presentation-editor/pointer-events/EditorInputManager.ts b/packages/super-editor/src/core/presentation-editor/pointer-events/EditorInputManager.ts
index 7b7b1ea9bc..39ff20ac36 100644
--- a/packages/super-editor/src/core/presentation-editor/pointer-events/EditorInputManager.ts
+++ b/packages/super-editor/src/core/presentation-editor/pointer-events/EditorInputManager.ts
@@ -37,6 +37,7 @@ import {
 } from '../tables/TableSelectionUtilities.js';
 import { debugLog } from '../selection/SelectionDebug.js';
 import { DOM_CLASS_NAMES, buildInlineImagePmSelector } from '@superdoc/painter-dom';
+import { isSemanticFootnoteBlockId } from '../semantic-flow-constants.js';
 
 // =============================================================================
 // Constants
@@ -51,9 +52,13 @@ const SCROLL_DETECTION_TOLERANCE_PX = 1;
 
 const clamp = (value: number, min: number, max: number): number => Math.max(min, Math.min(max, value));
 
-/** Block IDs for footnote content use prefix "footnote-{id}-" (see FootnotesBuilder). */
+/**
+ * Block IDs for footnote content use prefix "footnote-{id}-" (see FootnotesBuilder).
+ * Semantic footnote blocks use the {@link isSemanticFootnoteBlockId} helper from
+ * shared constants — it matches both heading and body footnote block IDs.
+ */
 function isFootnoteBlockId(blockId: string): boolean {
-  return typeof blockId === 'string' && blockId.startsWith('footnote-');
+  return typeof blockId === 'string' && (blockId.startsWith('footnote-') || isSemanticFootnoteBlockId(blockId));
 }
 
 // =============================================================================
diff --git a/packages/super-editor/src/core/presentation-editor/semantic-flow-constants.ts b/packages/super-editor/src/core/presentation-editor/semantic-flow-constants.ts
new file mode 100644
index 0000000000..60b14f0ecd
--- /dev/null
+++ b/packages/super-editor/src/core/presentation-editor/semantic-flow-constants.ts
@@ -0,0 +1,14 @@
+/** Synthetic block id used for the semantic footnotes heading. */
+export const SEMANTIC_FOOTNOTES_HEADING_BLOCK_ID = '__sd_semantic_footnotes_heading';
+/** Prefix used for synthetic semantic footnote block ids. */
+export const SEMANTIC_FOOTNOTE_BLOCK_ID_PREFIX = '__sd_semantic_footnote';
+
+/**
+ * Checks whether a block id belongs to semantic-flow synthetic footnote content.
+ *
+ * @param blockId - Layout block id to inspect.
+ * @returns `true` when the id matches semantic footnote heading/body prefix.
+ */
+export function isSemanticFootnoteBlockId(blockId: string): boolean {
+  return typeof blockId === 'string' && blockId.startsWith(SEMANTIC_FOOTNOTE_BLOCK_ID_PREFIX);
+}
diff --git a/packages/super-editor/src/core/presentation-editor/semantic-flow-footnotes.ts b/packages/super-editor/src/core/presentation-editor/semantic-flow-footnotes.ts
new file mode 100644
index 0000000000..d724dbc988
--- /dev/null
+++ b/packages/super-editor/src/core/presentation-editor/semantic-flow-footnotes.ts
@@ -0,0 +1,140 @@
+/**
+ * Pure functions for building semantic footnote blocks in web-view mode.
+ *
+ * Extracted from PresentationEditor to keep the class focused on orchestration.
+ * All functions are stateless — they depend only on their arguments.
+ */
+import type { FlowBlock } from '@superdoc/contracts';
+import type { FootnotesLayoutInput } from './types.js';
+import { SEMANTIC_FOOTNOTES_HEADING_BLOCK_ID, SEMANTIC_FOOTNOTE_BLOCK_ID_PREFIX } from './semantic-flow-constants.js';
+
+/** Fallback style applied to the synthetic "Footnotes" heading in semantic flow. */
+export const DEFAULT_SEMANTIC_FOOTNOTE_HEADING_STYLE = {
+  fontFamily: 'Arial',
+  fontSize: 14,
+  bold: true,
+  spacing: { before: 24, after: 12 },
+} as const;
+
+/**
+ * Builds the array of synthetic FlowBlocks that represent footnotes appended
+ * at the end of the document in semantic (web-view) mode.
+ *
+ * @param input - Footnote references and converted flow blocks grouped by footnote id.
+ * @param footnotesMode - Semantic footnote rendering mode.
+ * @returns Synthetic heading/body blocks to append to semantic flow layout.
+ *
+ * Returns an empty array when footnotes are absent or the mode is not `endOfDocument`.
+ */
+export function buildSemanticFootnoteBlocks(
+  input: FootnotesLayoutInput | null,
+  footnotesMode: 'endOfDocument' | undefined,
+): FlowBlock[] {
+  if (!input || input.refs.length === 0 || input.blocksById.size === 0) {
+    return [];
+  }
+  if ((footnotesMode ?? 'endOfDocument') !== 'endOfDocument') {
+    return [];
+  }
+  const orderedFootnoteIds: string[] = [];
+  const seen = new Set<string>();
+  input.refs.forEach((ref) => {
+    if (!ref?.id || seen.has(ref.id)) return;
+    seen.add(ref.id);
+    orderedFootnoteIds.push(ref.id);
+  });
+  if (orderedFootnoteIds.length === 0) {
+    return [];
+  }
+
+  const headingRunStyle = resolveSemanticFootnoteHeadingRunStyle(input.blocksById, orderedFootnoteIds);
+  const result: FlowBlock[] = [createSemanticFootnoteHeadingBlock(headingRunStyle)];
+  orderedFootnoteIds.forEach((id, footnoteIndex) => {
+    const sourceBlocks = input.blocksById.get(id) ?? [];
+    sourceBlocks.forEach((block, blockIndex) => {
+      result.push(cloneFlowBlockForSemanticFootnote(block, id, footnoteIndex, blockIndex));
+    });
+  });
+  return result;
+}
+
+function resolveSemanticFootnoteHeadingRunStyle(
+  blocksById: Map<string, FlowBlock[]>,
+  orderedFootnoteIds: string[],
+): { fontFamily: string; fontSize: number } {
+  for (const footnoteId of orderedFootnoteIds) {
+    const blocks = blocksById.get(footnoteId) ?? [];
+    for (const block of blocks) {
+      if (block.kind !== 'paragraph') continue;
+      for (const run of block.runs) {
+        const fontFamily = (run as { fontFamily?: unknown }).fontFamily;
+        const fontSize = (run as { fontSize?: unknown }).fontSize;
+        if (typeof fontFamily === 'string' && fontFamily.length > 0 && typeof fontSize === 'number') {
+          if (Number.isFinite(fontSize) && fontSize > 0) {
+            return { fontFamily, fontSize };
+          }
+        }
+      }
+    }
+  }
+
+  return {
+    fontFamily: DEFAULT_SEMANTIC_FOOTNOTE_HEADING_STYLE.fontFamily,
+    fontSize: DEFAULT_SEMANTIC_FOOTNOTE_HEADING_STYLE.fontSize,
+  };
+}
+
+function createSemanticFootnoteHeadingBlock(style: { fontFamily: string; fontSize: number }): FlowBlock {
+  return {
+    kind: 'paragraph',
+    id: SEMANTIC_FOOTNOTES_HEADING_BLOCK_ID,
+    attrs: {
+      spacing: DEFAULT_SEMANTIC_FOOTNOTE_HEADING_STYLE.spacing,
+    },
+    runs: [
+      {
+        kind: 'text',
+        text: 'Footnotes',
+        fontFamily: style.fontFamily,
+        fontSize: style.fontSize,
+        bold: DEFAULT_SEMANTIC_FOOTNOTE_HEADING_STYLE.bold,
+      },
+    ],
+  };
+}
+
+function cloneFlowBlock(block: FlowBlock): FlowBlock {
+  return JSON.parse(JSON.stringify(block)) as FlowBlock;
+}
+
+function stripPmRangesDeep(value: unknown): void {
+  if (Array.isArray(value)) {
+    value.forEach((item) => stripPmRangesDeep(item));
+    return;
+  }
+  if (!value || typeof value !== 'object') {
+    return;
+  }
+
+  const record = value as Record<string, unknown> & { pmStart?: unknown; pmEnd?: unknown };
+  if ('pmStart' in record) {
+    delete record.pmStart;
+  }
+  if ('pmEnd' in record) {
+    delete record.pmEnd;
+  }
+
+  Object.values(record).forEach((nested) => stripPmRangesDeep(nested));
+}
+
+function cloneFlowBlockForSemanticFootnote(
+  block: FlowBlock,
+  footnoteId: string,
+  footnoteIndex: number,
+  blockIndex: number,
+): FlowBlock {
+  const cloned = cloneFlowBlock(block);
+  stripPmRangesDeep(cloned);
+  cloned.id = `${SEMANTIC_FOOTNOTE_BLOCK_ID_PREFIX}-${footnoteId}-${footnoteIndex}-${blockIndex}-${block.id}`;
+  return cloned;
+}
diff --git a/packages/super-editor/src/core/presentation-editor/tests/EditorInputManager.footnoteClick.test.ts b/packages/super-editor/src/core/presentation-editor/tests/EditorInputManager.footnoteClick.test.ts
index 4538e9f318..2507b8b04c 100644
--- a/packages/super-editor/src/core/presentation-editor/tests/EditorInputManager.footnoteClick.test.ts
+++ b/packages/super-editor/src/core/presentation-editor/tests/EditorInputManager.footnoteClick.test.ts
@@ -187,4 +187,56 @@ describe('EditorInputManager - Footnote click selection behavior', () => {
     expect(TextSelection.create as unknown as Mock).not.toHaveBeenCalled();
     expect(mockEditor.state.tr.setSelection).not.toHaveBeenCalled();
   });
+
+  it('does not change editor selection when hit-test resolves to a semantic footnote block', () => {
+    (clickToPosition as unknown as Mock).mockReturnValue({
+      pos: 22,
+      layoutEpoch: 1,
+      pageIndex: 0,
+      blockId: '__sd_semantic_footnote-1-1',
+    });
+
+    const target = document.createElement('span');
+    viewportHost.appendChild(target);
+
+    const PointerEventImpl = getPointerEventImpl();
+    target.dispatchEvent(
+      new PointerEventImpl('pointerdown', {
+        bubbles: true,
+        cancelable: true,
+        button: 0,
+        buttons: 1,
+        clientX: 12,
+        clientY: 14,
+      } as PointerEventInit),
+    );
+
+    expect(TextSelection.create as unknown as Mock).not.toHaveBeenCalled();
+    expect(mockEditor.state.tr.setSelection).not.toHaveBeenCalled();
+  });
+
+  it('does not change editor selection on semantic footnotes heading click', () => {
+    (clickToPosition as unknown as Mock).mockReturnValue(null);
+
+    const headingEl = document.createElement('div');
+    headingEl.setAttribute('data-block-id', '__sd_semantic_footnotes_heading');
+    const nestedEl = document.createElement('span');
+    headingEl.appendChild(nestedEl);
+    viewportHost.appendChild(headingEl);
+
+    const PointerEventImpl = getPointerEventImpl();
+    nestedEl.dispatchEvent(
+      new PointerEventImpl('pointerdown', {
+        bubbles: true,
+        cancelable: true,
+        button: 0,
+        buttons: 1,
+        clientX: 12,
+        clientY: 14,
+      } as PointerEventInit),
+    );
+
+    expect(TextSelection.create as unknown as Mock).not.toHaveBeenCalled();
+    expect(mockEditor.state.tr.setSelection).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/super-editor/src/core/presentation-editor/tests/PresentationEditor.footnotesPmMarkers.test.ts b/packages/super-editor/src/core/presentation-editor/tests/PresentationEditor.footnotesPmMarkers.test.ts
index e5e67391e5..017c8b773b 100644
--- a/packages/super-editor/src/core/presentation-editor/tests/PresentationEditor.footnotesPmMarkers.test.ts
+++ b/packages/super-editor/src/core/presentation-editor/tests/PresentationEditor.footnotesPmMarkers.test.ts
@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { PresentationEditor } from '../PresentationEditor.js';
 
 let capturedLayoutOptions: any;
+let capturedBlocksForLayout: any[] | undefined;
 
 vi.mock('../../Editor', () => ({
   Editor: vi.fn().mockImplementation(() => ({
@@ -43,7 +44,9 @@ vi.mock('@superdoc/pm-adapter', async (importOriginal) => {
     toFlowBlocks: vi.fn((_: unknown, opts?: any) => {
       if (typeof opts?.blockIdPrefix === 'string' && opts.blockIdPrefix.startsWith('footnote-')) {
         return {
-          blocks: [{ kind: 'paragraph', runs: [{ kind: 'text', text: 'Body', pmStart: 5, pmEnd: 9 }] }],
+          blocks: [
+            { kind: 'paragraph', id: 'footnote-body-1', runs: [{ kind: 'text', text: 'Body', pmStart: 5, pmEnd: 9 }] },
+          ],
           bookmarks: new Map(),
         };
       }
@@ -55,8 +58,11 @@ vi.mock('@superdoc/pm-adapter', async (importOriginal) => {
 vi.mock('@superdoc/layout-bridge', () => ({
   incrementalLayout: vi.fn(async (...args: any[]) => {
     capturedLayoutOptions = args[3];
+    capturedBlocksForLayout = args[2];
     return { layout: { pages: [] }, measures: [] };
   }),
+  normalizeMargin: (value: number | undefined, fallback: number) =>
+    Number.isFinite(value) ? (value as number) : fallback,
   selectionToRects: vi.fn(() => []),
   clickToPosition: vi.fn(),
   getFragmentAtPosition: vi.fn(),
@@ -139,6 +145,7 @@ describe('PresentationEditor - footnote number marker PM position', () => {
     container = document.createElement('div');
     document.body.appendChild(container);
     capturedLayoutOptions = undefined;
+    capturedBlocksForLayout = undefined;
   });
 
   afterEach(() => {
@@ -161,4 +168,41 @@ describe('PresentationEditor - footnote number marker PM position', () => {
     expect(markerRun?.pmStart).toBe(5);
     expect(markerRun?.pmEnd).toBe(6);
   });
+
+  it('appends semantic footnotes as end-of-document blocks in semantic flow mode', async () => {
+    editor = new PresentationEditor({
+      element: container,
+      layoutEngineOptions: {
+        flowMode: 'semantic',
+      },
+    });
+    await new Promise((r) => setTimeout(r, 100));
+
+    expect(capturedLayoutOptions?.flowMode).toBe('semantic');
+    expect(capturedLayoutOptions?.footnotes).toBeUndefined();
+    expect(Array.isArray(capturedBlocksForLayout)).toBe(true);
+
+    const blockIds = (capturedBlocksForLayout ?? []).map((block) => block.id);
+    expect(blockIds).toContain('__sd_semantic_footnotes_heading');
+    expect(blockIds.some((id) => typeof id === 'string' && id.startsWith('__sd_semantic_footnote-1-'))).toBe(true);
+  });
+
+  it('does not expose PM ranges on synthetic semantic footnote blocks', async () => {
+    editor = new PresentationEditor({
+      element: container,
+      layoutEngineOptions: {
+        flowMode: 'semantic',
+      },
+    });
+    await new Promise((r) => setTimeout(r, 100));
+
+    const semanticBlocks = (capturedBlocksForLayout ?? []).filter((block) =>
+      typeof block?.id === 'string' ? block.id.startsWith('__sd_semantic_footnote-') : false,
+    );
+    expect(semanticBlocks.length).toBeGreaterThan(0);
+
+    const firstRun = semanticBlocks[0]?.runs?.[0];
+    expect(firstRun?.pmStart).toBeUndefined();
+    expect(firstRun?.pmEnd).toBeUndefined();
+  });
 });
diff --git a/packages/super-editor/src/core/presentation-editor/tests/PresentationEditor.test.ts b/packages/super-editor/src/core/presentation-editor/tests/PresentationEditor.test.ts
index b174af528a..c72d6dad42 100644
--- a/packages/super-editor/src/core/presentation-editor/tests/PresentationEditor.test.ts
+++ b/packages/super-editor/src/core/presentation-editor/tests/PresentationEditor.test.ts
@@ -225,6 +225,8 @@ vi.mock('@superdoc/pm-adapter', async (importOriginal) => {
 // Mock layout-bridge functions
 vi.mock('@superdoc/layout-bridge', () => ({
   incrementalLayout: mockIncrementalLayout,
+  normalizeMargin: (value: number | undefined, fallback: number) =>
+    Number.isFinite(value) ? (value as number) : fallback,
   selectionToRects: mockSelectionToRects,
   clickToPosition: mockClickToPosition,
   createDragHandler: vi.fn(() => {
@@ -388,6 +390,356 @@ describe('PresentationEditor', () => {
     });
   });
 
+  describe('semantic flow mode configuration', () => {
+    it('forces vertical layout and disables virtualization when flowMode is semantic', async () => {
+      editor = new PresentationEditor({
+        element: container,
+        documentId: 'semantic-config-doc',
+        mode: 'docx',
+        layoutEngineOptions: {
+          flowMode: 'semantic',
+          layoutMode: 'book',
+          virtualization: { enabled: true, window: 7, overscan: 2 },
+        },
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const layoutOptions = editor.getLayoutOptions();
+      expect(layoutOptions.flowMode).toBe('semantic');
+      expect(layoutOptions.layoutMode).toBe('vertical');
+      expect(layoutOptions.virtualization?.enabled).toBe(false);
+
+      expect(mockCreateDomPainter).toHaveBeenCalled();
+      const painterOptions = mockCreateDomPainter.mock.calls[0]?.[0];
+      expect(painterOptions?.flowMode).toBe('semantic');
+      expect(painterOptions?.virtualization?.enabled).toBe(false);
+    });
+
+    it('ignores setLayoutMode requests while semantic flow mode is active', async () => {
+      editor = new PresentationEditor({
+        element: container,
+        documentId: 'semantic-layout-mode-doc',
+        mode: 'docx',
+        layoutEngineOptions: {
+          flowMode: 'semantic',
+          layoutMode: 'vertical',
+        },
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      editor.setLayoutMode('book');
+      const layoutOptions = editor.getLayoutOptions();
+      expect(layoutOptions.layoutMode).toBe('vertical');
+    });
+
+    it('uses host width for semantic flow without forcing a wide minimum', async () => {
+      Object.defineProperty(container, 'clientWidth', {
+        configurable: true,
+        value: 120,
+      });
+
+      editor = new PresentationEditor({
+        element: container,
+        documentId: 'semantic-width-doc',
+        mode: 'docx',
+        layoutEngineOptions: {
+          flowMode: 'semantic',
+          semanticOptions: { marginsMode: 'none' },
+        },
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      expect(mockIncrementalLayout).toHaveBeenCalled();
+      const layoutOptions = mockIncrementalLayout.mock.calls[0]?.[3] as {
+        flowMode?: string;
+        semantic?: { contentWidth?: number };
+        pageSize?: { w?: number };
+      };
+      expect(layoutOptions.flowMode).toBe('semantic');
+      expect(layoutOptions.semantic?.contentWidth).toBe(120);
+      expect(layoutOptions.pageSize?.w).toBe(120);
+    });
+
+    it('defaults semantic flow to zero vertical margins to avoid page seam gaps', async () => {
+      Object.defineProperty(container, 'clientWidth', {
+        configurable: true,
+        value: 420,
+      });
+
+      editor = new PresentationEditor({
+        element: container,
+        documentId: 'semantic-default-margins-doc',
+        mode: 'docx',
+        layoutEngineOptions: {
+          flowMode: 'semantic',
+        },
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const layoutOptions = mockIncrementalLayout.mock.calls[mockIncrementalLayout.mock.calls.length - 1]?.[3] as {
+        margins?: { top?: number; bottom?: number };
+        semantic?: { marginTop?: number; marginBottom?: number };
+      };
+
+      expect(layoutOptions.margins?.top).toBe(0);
+      expect(layoutOptions.margins?.bottom).toBe(0);
+      expect(layoutOptions.semantic?.marginTop).toBe(0);
+      expect(layoutOptions.semantic?.marginBottom).toBe(0);
+    });
+
+    it('clamps semantic custom margins to finite non-negative values', async () => {
+      Object.defineProperty(container, 'clientWidth', {
+        configurable: true,
+        value: 500,
+      });
+
+      editor = new PresentationEditor({
+        element: container,
+        documentId: 'semantic-custom-margins-doc',
+        mode: 'docx',
+        layoutEngineOptions: {
+          flowMode: 'semantic',
+          semanticOptions: {
+            marginsMode: 'custom',
+            customMargins: {
+              left: -10,
+              right: Number.NaN,
+              top: 24,
+              bottom: -1,
+            },
+          },
+        },
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      const layoutOptions = mockIncrementalLayout.mock.calls[mockIncrementalLayout.mock.calls.length - 1]?.[3] as {
+        margins?: { left?: number; right?: number; top?: number; bottom?: number };
+        semantic?: { marginLeft?: number; marginRight?: number; marginTop?: number; marginBottom?: number };
+        pageSize?: { w?: number };
+      };
+
+      expect(layoutOptions.margins?.left).toBe(72);
+      expect(layoutOptions.margins?.right).toBe(72);
+      expect(layoutOptions.margins?.top).toBe(24);
+      expect(layoutOptions.margins?.bottom).toBe(72);
+
+      expect(layoutOptions.semantic?.marginLeft).toBe(72);
+      expect(layoutOptions.semantic?.marginRight).toBe(72);
+      expect(layoutOptions.semantic?.marginTop).toBe(24);
+      expect(layoutOptions.semantic?.marginBottom).toBe(72);
+      expect(layoutOptions.pageSize?.w).toBe(500);
+    });
+
+    it('relayouts semantic flow when host width changes', async () => {
+      const originalResizeObserver = window.ResizeObserver;
+      let resizeCallback: ResizeObserverCallback | null = null;
+      class ResizeObserverMock {
+        constructor(callback: ResizeObserverCallback) {
+          resizeCallback = callback;
+        }
+        observe(): void {}
+        disconnect(): void {}
+        unobserve(): void {}
+      }
+
+      Object.defineProperty(window, 'ResizeObserver', {
+        configurable: true,
+        value: ResizeObserverMock,
+      });
+
+      try {
+        Object.defineProperty(container, 'clientWidth', {
+          configurable: true,
+          value: 240,
+        });
+
+        editor = new PresentationEditor({
+          element: container,
+          documentId: 'semantic-resize-doc',
+          mode: 'docx',
+          layoutEngineOptions: {
+            flowMode: 'semantic',
+            semanticOptions: { marginsMode: 'none' },
+          },
+        });
+
+        await new Promise((resolve) => setTimeout(resolve, 80));
+
+        let layoutOptions = mockIncrementalLayout.mock.calls[mockIncrementalLayout.mock.calls.length - 1]?.[3] as {
+          semantic?: { contentWidth?: number };
+        };
+        expect(layoutOptions.semantic?.contentWidth).toBe(240);
+
+        Object.defineProperty(container, 'clientWidth', {
+          configurable: true,
+          value: 360,
+        });
+        resizeCallback?.([], {} as ResizeObserver);
+
+        await new Promise((resolve) => setTimeout(resolve, 180));
+
+        layoutOptions = mockIncrementalLayout.mock.calls[mockIncrementalLayout.mock.calls.length - 1]?.[3] as {
+          semantic?: { contentWidth?: number };
+        };
+        expect(mockIncrementalLayout.mock.calls.length).toBeGreaterThan(1);
+        expect(layoutOptions.semantic?.contentWidth).toBe(360);
+      } finally {
+        Object.defineProperty(window, 'ResizeObserver', {
+          configurable: true,
+          value: originalResizeObserver,
+        });
+      }
+    });
+
+    it('clears semantic debounce with the owner window when rescheduling', async () => {
+      const originalResizeObserver = window.ResizeObserver;
+      const ownerDocument = container.ownerDocument;
+      const originalDefaultView = ownerDocument.defaultView;
+      let resizeCallback: ResizeObserverCallback | null = null;
+
+      class ResizeObserverMock {
+        constructor(callback: ResizeObserverCallback) {
+          resizeCallback = callback;
+        }
+        observe(): void {}
+        disconnect(): void {}
+        unobserve(): void {}
+      }
+
+      Object.defineProperty(window, 'ResizeObserver', {
+        configurable: true,
+        value: ResizeObserverMock,
+      });
+
+      const ownerSetTimeout = vi.fn(() => 1);
+      const ownerClearTimeout = vi.fn();
+      const ownerWindow = {
+        setTimeout: ownerSetTimeout,
+        clearTimeout: ownerClearTimeout,
+        requestAnimationFrame: (callback: FrameRequestCallback) => window.requestAnimationFrame(callback),
+        cancelAnimationFrame: (handle: number) => window.cancelAnimationFrame(handle),
+        getComputedStyle: window.getComputedStyle.bind(window),
+        addEventListener: window.addEventListener.bind(window),
+        removeEventListener: window.removeEventListener.bind(window),
+        performance: window.performance,
+      } as unknown as Window;
+
+      try {
+        editor = new PresentationEditor({
+          element: container,
+          documentId: 'semantic-resize-owner-window-clear-doc',
+          mode: 'docx',
+          layoutEngineOptions: {
+            flowMode: 'semantic',
+            semanticOptions: { marginsMode: 'none' },
+          },
+        });
+
+        await new Promise((resolve) => setTimeout(resolve, 80));
+
+        expect(resizeCallback).toBeTypeOf('function');
+
+        Object.defineProperty(ownerDocument, 'defaultView', {
+          configurable: true,
+          value: ownerWindow,
+        });
+
+        resizeCallback?.([], {} as ResizeObserver);
+        resizeCallback?.([], {} as ResizeObserver);
+
+        expect(ownerSetTimeout).toHaveBeenCalledTimes(2);
+        expect(ownerClearTimeout).toHaveBeenCalledTimes(1);
+      } finally {
+        Object.defineProperty(ownerDocument, 'defaultView', {
+          configurable: true,
+          value: originalDefaultView,
+        });
+        Object.defineProperty(window, 'ResizeObserver', {
+          configurable: true,
+          value: originalResizeObserver,
+        });
+      }
+    });
+
+    it('clears semantic debounce with the owner window during destroy', async () => {
+      const originalResizeObserver = window.ResizeObserver;
+      const ownerDocument = container.ownerDocument;
+      const originalDefaultView = ownerDocument.defaultView;
+      let resizeCallback: ResizeObserverCallback | null = null;
+
+      class ResizeObserverMock {
+        constructor(callback: ResizeObserverCallback) {
+          resizeCallback = callback;
+        }
+        observe(): void {}
+        disconnect(): void {}
+        unobserve(): void {}
+      }
+
+      Object.defineProperty(window, 'ResizeObserver', {
+        configurable: true,
+        value: ResizeObserverMock,
+      });
+
+      const ownerSetTimeout = vi.fn(() => 1);
+      const ownerClearTimeout = vi.fn();
+      const ownerWindow = {
+        setTimeout: ownerSetTimeout,
+        clearTimeout: ownerClearTimeout,
+        requestAnimationFrame: (callback: FrameRequestCallback) => window.requestAnimationFrame(callback),
+        cancelAnimationFrame: (handle: number) => window.cancelAnimationFrame(handle),
+        getComputedStyle: window.getComputedStyle.bind(window),
+        addEventListener: window.addEventListener.bind(window),
+        removeEventListener: window.removeEventListener.bind(window),
+        performance: window.performance,
+      } as unknown as Window;
+
+      try {
+        editor = new PresentationEditor({
+          element: container,
+          documentId: 'semantic-resize-owner-window-destroy-doc',
+          mode: 'docx',
+          layoutEngineOptions: {
+            flowMode: 'semantic',
+            semanticOptions: { marginsMode: 'none' },
+          },
+        });
+
+        await new Promise((resolve) => setTimeout(resolve, 80));
+
+        expect(resizeCallback).toBeTypeOf('function');
+
+        Object.defineProperty(ownerDocument, 'defaultView', {
+          configurable: true,
+          value: ownerWindow,
+        });
+
+        resizeCallback?.([], {} as ResizeObserver);
+
+        expect(ownerSetTimeout).toHaveBeenCalledTimes(1);
+
+        editor.destroy();
+        editor = null as unknown as PresentationEditor;
+
+        expect(ownerClearTimeout).toHaveBeenCalledTimes(1);
+      } finally {
+        Object.defineProperty(ownerDocument, 'defaultView', {
+          configurable: true,
+          value: originalDefaultView,
+        });
+        Object.defineProperty(window, 'ResizeObserver', {
+          configurable: true,
+          value: originalResizeObserver,
+        });
+      }
+    });
+  });
+
   describe('scrollToPage', () => {
     const buildMixedPageLayout = () => ({
       layout: {
diff --git a/packages/super-editor/src/core/presentation-editor/tests/semantic-flow-footnotes.test.ts b/packages/super-editor/src/core/presentation-editor/tests/semantic-flow-footnotes.test.ts
new file mode 100644
index 0000000000..2402659595
--- /dev/null
+++ b/packages/super-editor/src/core/presentation-editor/tests/semantic-flow-footnotes.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it } from 'vitest';
+import type { FlowBlock } from '@superdoc/contracts';
+
+import { buildSemanticFootnoteBlocks } from '../semantic-flow-footnotes.js';
+import {
+  isSemanticFootnoteBlockId,
+  SEMANTIC_FOOTNOTES_HEADING_BLOCK_ID,
+  SEMANTIC_FOOTNOTE_BLOCK_ID_PREFIX,
+} from '../semantic-flow-constants.js';
+import type { FootnotesLayoutInput } from '../types.js';
+
+const createParagraphBlock = (id: string, run: Record<string, unknown>): FlowBlock =>
+  ({
+    kind: 'paragraph',
+    id,
+    runs: [run],
+  }) as FlowBlock;
+
+describe('semantic-flow-footnotes', () => {
+  it('returns an empty list when semantic footnotes mode is disabled', () => {
+    const input: FootnotesLayoutInput = {
+      refs: [{ id: '1', pos: 11 }],
+      blocksById: new Map([['1', [createParagraphBlock('fn-1', { kind: 'text', text: 'One' })]]]),
+    };
+
+    const result = buildSemanticFootnoteBlocks(input, 'inline' as unknown as 'endOfDocument');
+    expect(result).toEqual([]);
+  });
+
+  it('deduplicates footnote refs and strips PM ranges from synthetic blocks', () => {
+    const originalRun = { kind: 'text', text: 'First', pmStart: 10, pmEnd: 15, fontFamily: 'Calibri', fontSize: 11 };
+    const firstBlock = createParagraphBlock('fn-1', originalRun);
+    const secondBlock = createParagraphBlock('fn-2', { kind: 'text', text: 'Second' });
+    const input: FootnotesLayoutInput = {
+      refs: [
+        { id: '1', pos: 11 },
+        { id: '1', pos: 12 },
+        { id: '2', pos: 20 },
+      ],
+      blocksById: new Map([
+        ['1', [firstBlock]],
+        ['2', [secondBlock]],
+      ]),
+    };
+
+    const result = buildSemanticFootnoteBlocks(input, undefined);
+    expect(result[0]?.id).toBe(SEMANTIC_FOOTNOTES_HEADING_BLOCK_ID);
+    expect(result).toHaveLength(3);
+
+    const ids = result.map((block) => block.id);
+    expect(ids).toContain(`${SEMANTIC_FOOTNOTE_BLOCK_ID_PREFIX}-1-0-0-fn-1`);
+    expect(ids).toContain(`${SEMANTIC_FOOTNOTE_BLOCK_ID_PREFIX}-2-1-0-fn-2`);
+
+    const firstSyntheticRun = (result[1] as { runs?: Array<{ pmStart?: unknown; pmEnd?: unknown }> }).runs?.[0];
+    expect(firstSyntheticRun?.pmStart).toBeUndefined();
+    expect(firstSyntheticRun?.pmEnd).toBeUndefined();
+
+    expect((originalRun as { pmStart?: number }).pmStart).toBe(10);
+    expect((originalRun as { pmEnd?: number }).pmEnd).toBe(15);
+  });
+
+  it('recognizes semantic footnote heading and body ids', () => {
+    expect(isSemanticFootnoteBlockId(SEMANTIC_FOOTNOTES_HEADING_BLOCK_ID)).toBe(true);
+    expect(isSemanticFootnoteBlockId(`${SEMANTIC_FOOTNOTE_BLOCK_ID_PREFIX}-1-0-0-fn-1`)).toBe(true);
+    expect(isSemanticFootnoteBlockId('footnote-1-0')).toBe(false);
+  });
+});
diff --git a/packages/super-editor/src/core/presentation-editor/types.ts b/packages/super-editor/src/core/presentation-editor/types.ts
index 4ef220a5d5..f22de5f5bd 100644
--- a/packages/super-editor/src/core/presentation-editor/types.ts
+++ b/packages/super-editor/src/core/presentation-editor/types.ts
@@ -6,7 +6,7 @@
  */
 
 import type { Editor } from '../Editor.js';
-import type { TrackedChangesMode, FlowBlock, Layout, Measure } from '@superdoc/contracts';
+import type { TrackedChangesMode, FlowBlock, Layout, Measure, FlowMode, SectionMetadata } from '@superdoc/contracts';
 import type { LayoutMode, RulerOptions } from '@superdoc/painter-dom';
 import type * as Y from 'yjs';
 
@@ -90,6 +90,50 @@ export type TrackedChangesOverrides = {
   enabled?: boolean;
 };
 
+// FlowMode is re-exported from @superdoc/contracts
+export type { FlowMode } from '@superdoc/contracts';
+
+/**
+ * Internal semantic-layout tuning options.
+ * These options are intentionally not exposed as a stable public API.
+ */
+export type SemanticLayoutOptions = {
+  marginsMode?: 'firstSection' | 'none' | 'custom';
+  customMargins?: {
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
+  };
+  footnotesMode?: 'endOfDocument';
+};
+
+type ResolvedMarginsBase = Required<Pick<PageMargins, 'top' | 'right' | 'bottom' | 'left'>> &
+  Partial<Pick<PageMargins, 'header' | 'footer'>>;
+
+export type ResolvedLayoutOptions =
+  | {
+      flowMode: 'paginated';
+      pageSize: PageSize;
+      margins: ResolvedMarginsBase;
+      columns?: { count: number; gap: number };
+      sectionMetadata: SectionMetadata[];
+    }
+  | {
+      flowMode: 'semantic';
+      pageSize: PageSize;
+      margins: ResolvedMarginsBase;
+      columns: { count: 1; gap: 0 };
+      semantic: {
+        contentWidth: number;
+        marginLeft: number;
+        marginRight: number;
+        marginTop: number;
+        marginBottom: number;
+      };
+      sectionMetadata: SectionMetadata[];
+    };
+
 export type LayoutEngineOptions = {
   pageSize?: PageSize;
   margins?: PageMargins;
@@ -98,6 +142,9 @@ export type LayoutEngineOptions = {
   pageStyles?: Record<string, unknown>;
   debugLabel?: string;
   layoutMode?: LayoutMode;
+  flowMode?: FlowMode;
+  /** Internal-only semantic mode options (not a stable public API). */
+  semanticOptions?: SemanticLayoutOptions;
   trackedChanges?: TrackedChangesOverrides;
   /** Emit comment positions while in viewing mode (used to render comment highlights). */
   emitCommentPositionsInViewing?: boolean;
diff --git a/packages/superdoc/src/core/SuperDoc.js b/packages/superdoc/src/core/SuperDoc.js
index c08d857032..5859a2694c 100644
--- a/packages/superdoc/src/core/SuperDoc.js
+++ b/packages/superdoc/src/core/SuperDoc.js
@@ -182,13 +182,22 @@ export class SuperDoc extends EventEmitter {
       this.config.trackChanges.visible = false;
     }
 
-    // Web layout mode requires layout engine to be disabled (content reflows vs pagination)
-    if (this.config.viewOptions?.layout === 'web' && this.config.useLayoutEngine) {
+    // Web layout behavior:
+    // - Backward compatible default: web layout still uses PM rendering.
+    // - Opt-in semantic path: allow layout engine only when flowMode === 'semantic'.
+    const isWebLayout = this.config.viewOptions?.layout === 'web';
+    const requestedFlowMode = this.config.layoutEngineOptions?.flowMode;
+    const isSemanticFlow = requestedFlowMode === 'semantic';
+    if (isWebLayout && this.config.useLayoutEngine && !isSemanticFlow) {
       console.warn(
-        '[SuperDoc] Web layout mode requires useLayoutEngine: false. Automatically disabling layout engine.',
+        "[SuperDoc] Web layout uses PM fallback unless layoutEngineOptions.flowMode is set to 'semantic'. Automatically disabling layout engine.",
       );
       this.config.useLayoutEngine = false;
     }
+    if (!isWebLayout && isSemanticFlow) {
+      console.warn("[SuperDoc] flowMode 'semantic' is only valid with web layout. Coercing to 'paginated'.");
+      this.config.layoutEngineOptions.flowMode = 'paginated';
+    }
 
     const incomingUser = this.config.user;
     if (!incomingUser || typeof incomingUser !== 'object') {
@@ -736,9 +745,9 @@ export class SuperDoc extends EventEmitter {
     this.toolbarElement = this.config.modules?.toolbar?.selector || this.config.toolbar;
     this.toolbar = null;
 
-    // Build excludeItems list - hide ruler button if rulers not configured
+    // Build excludeItems list - hide ruler button if rulers not configured or in web layout
     const excludeItems = [...(moduleConfig.excludeItems || [])];
-    if (!this.config.rulers) {
+    if (!this.config.rulers || this.config.viewOptions?.layout === 'web') {
       excludeItems.push('ruler');
     }
 
diff --git a/packages/superdoc/src/core/SuperDoc.test.js b/packages/superdoc/src/core/SuperDoc.test.js
index fe2bc62175..804f473317 100644
--- a/packages/superdoc/src/core/SuperDoc.test.js
+++ b/packages/superdoc/src/core/SuperDoc.test.js
@@ -1360,7 +1360,7 @@ describe('SuperDoc core', () => {
   });
 
   describe('Web layout mode configuration', () => {
-    it('auto-disables layout engine when web layout is enabled', async () => {
+    it('keeps PM fallback when web layout is enabled without semantic flow mode', async () => {
       const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
       createAppHarness();
 
@@ -1373,7 +1373,7 @@ describe('SuperDoc core', () => {
       await flushMicrotasks();
 
       expect(warnSpy).toHaveBeenCalledWith(
-        '[SuperDoc] Web layout mode requires useLayoutEngine: false. Automatically disabling layout engine.',
+        "[SuperDoc] Web layout uses PM fallback unless layoutEngineOptions.flowMode is set to 'semantic'. Automatically disabling layout engine.",
       );
       expect(instance.config.useLayoutEngine).toBe(false);
       warnSpy.mockRestore();
@@ -1391,11 +1391,54 @@ describe('SuperDoc core', () => {
       });
       await flushMicrotasks();
 
-      expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining('Web layout mode requires'));
+      expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining('Web layout uses PM fallback'));
       expect(instance.config.useLayoutEngine).toBe(false);
       warnSpy.mockRestore();
     });
 
+    it('keeps layout engine enabled when semantic flow mode is explicitly requested in web layout', async () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      createAppHarness();
+
+      const instance = new SuperDoc({
+        selector: '#host',
+        document: 'https://example.com/doc.docx',
+        viewOptions: { layout: 'web' },
+        useLayoutEngine: true,
+        layoutEngineOptions: {
+          flowMode: 'semantic',
+        },
+      });
+      await flushMicrotasks();
+
+      expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining('Web layout uses PM fallback'));
+      expect(instance.config.useLayoutEngine).toBe(true);
+      warnSpy.mockRestore();
+    });
+
+    it('coerces semantic flowMode to paginated when layout is not web', async () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      createAppHarness();
+
+      const instance = new SuperDoc({
+        selector: '#host',
+        document: 'https://example.com/doc.docx',
+        viewOptions: { layout: 'print' },
+        useLayoutEngine: true,
+        layoutEngineOptions: {
+          flowMode: 'semantic',
+        },
+      });
+      await flushMicrotasks();
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        "[SuperDoc] flowMode 'semantic' is only valid with web layout. Coercing to 'paginated'.",
+      );
+      expect(instance.config.layoutEngineOptions.flowMode).toBe('paginated');
+      expect(instance.config.useLayoutEngine).toBe(true);
+      warnSpy.mockRestore();
+    });
+
     it('preserves layout engine setting for print layout', async () => {
       const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
       createAppHarness();
@@ -1408,7 +1451,7 @@ describe('SuperDoc core', () => {
       });
       await flushMicrotasks();
 
-      expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining('Web layout mode requires'));
+      expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining('Web layout uses PM fallback'));
       expect(instance.config.useLayoutEngine).toBe(true);
       warnSpy.mockRestore();
     });
@@ -1439,7 +1482,7 @@ describe('SuperDoc core', () => {
       await flushMicrotasks();
 
       // Should not trigger web layout warning
-      expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining('Web layout mode requires'));
+      expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining('Web layout uses PM fallback'));
       expect(instance.config.useLayoutEngine).toBe(true);
       warnSpy.mockRestore();
     });
diff --git a/packages/superdoc/src/core/types/index.js b/packages/superdoc/src/core/types/index.js
index 26b27d2bec..4610b8cbc5 100644
--- a/packages/superdoc/src/core/types/index.js
+++ b/packages/superdoc/src/core/types/index.js
@@ -208,6 +208,11 @@
  * @property {boolean} [isDev] Whether the SuperDoc is in development mode
  * @property {boolean} [disablePiniaDevtools=false] Disable Pinia/Vue devtools plugin setup for this SuperDoc instance (useful in non-Vue hosts)
  * @property {Object} [layoutEngineOptions] Layout engine overrides passed through to PresentationEditor (page size, margins, virtualization, zoom, debug label, etc.)
+ * @property {'paginated' | 'semantic'} [layoutEngineOptions.flowMode='paginated'] Layout engine flow mode.
+ *   - 'paginated': standard page-first layout (default)
+ *   - 'semantic': continuous semantic flow without visible pagination boundaries
+ * @property {Object} [layoutEngineOptions.semanticOptions] Internal-only semantic mode tuning options.
+ *   This shape is intentionally not a stable public API in v1.
  * @property {Object} [layoutEngineOptions.trackedChanges] Optional override for paginated track-changes rendering (e.g., `{ mode: 'final' }` to force final view or `{ enabled: false }` to strip metadata entirely)
  * @property {(editor: Editor) => void} [onEditorBeforeCreate] Callback before an editor is created
  * @property {(editor: Editor) => void} [onEditorCreate] Callback after an editor is created
diff --git a/packages/superdoc/src/dev/components/SuperdocDev.vue b/packages/superdoc/src/dev/components/SuperdocDev.vue
index f581979636..2d3f1d7ccc 100644
--- a/packages/superdoc/src/dev/components/SuperdocDev.vue
+++ b/packages/superdoc/src/dev/components/SuperdocDev.vue
@@ -623,8 +623,12 @@ const init = async () => {
     toolbarGroups: ['left', 'center', 'right'],
     pagination: useLayoutEngine.value && !useWebLayout.value,
     viewOptions: { layout: useWebLayout.value ? 'web' : 'print' },
-    // Web layout mode requires Layout Engine to be OFF (uses ProseMirror's native rendering)
-    useLayoutEngine: useLayoutEngine.value && !useWebLayout.value,
+    // Web layout + layout engine now uses semantic flow mode.
+    useLayoutEngine: useLayoutEngine.value,
+    layoutEngineOptions: {
+      flowMode: useWebLayout.value ? 'semantic' : 'paginated',
+      ...(useWebLayout.value ? { semanticOptions: { marginsMode: 'none' } } : {}),
+    },
     rulers: true,
     rulerContainer: '#ruler-container',
     annotations: true,
@@ -1185,6 +1189,7 @@ const activeSidebarLabel = computed(() => activeSidebar.value?.label ?? 'None');
 const activeSidebarProps = computed(() => {
   if (activeSidebarId.value === 'layout') {
     return {
+      useWebLayout: useWebLayout.value,
       useWordOverlay: useWordOverlay.value,
       isGeneratingWordBaseline: isGeneratingWordBaseline.value,
       generatedCount: generatedWordScreenshots.value.length,
@@ -1257,7 +1262,8 @@ if (scrollTestMode.value) {
           <div class="dev-app__brand-meta">
             <div class="dev-app__meta-row">
               <span class="dev-app__pill">SUPERDOC LABS</span>
-              <span class="badge">Layout Engine: {{ useLayoutEngine && !useWebLayout ? 'ON' : 'OFF' }}</span>
+              <span class="badge">Layout Engine: {{ useLayoutEngine ? 'ON' : 'OFF' }}</span>
+              <span v-if="useLayoutEngine" class="badge">Flow: {{ useWebLayout ? 'SEMANTIC' : 'PAGINATED' }}</span>
               <span v-if="useWebLayout" class="badge">Web Layout: ON</span>
               <span v-if="scrollTestMode" class="badge badge--warning">Scroll Test: ON</span>
               <span v-if="useCollaboration" class="badge badge--collab">Collab: ON</span>
@@ -1377,9 +1383,6 @@ if (scrollTestMode.value) {
             <button class="dev-app__header-export-btn" @click="toggleLayoutEngine">
               Turn Layout Engine {{ useLayoutEngine ? 'off' : 'on' }} (reloads)
             </button>
-            <button class="dev-app__header-export-btn" @click="toggleViewLayout">
-              Turn Web Layout {{ useWebLayout ? 'off' : 'on' }} (reloads)
-            </button>
           </div>
         </div>
       </div>
@@ -1417,6 +1420,7 @@ if (scrollTestMode.value) {
             v-bind="activeSidebarProps"
             @close="setActiveSidebar('off')"
             @toggle-overlay="toggleWordOverlay"
+            @toggle-web-layout="toggleViewLayout"
             @generate-baseline="generateWordBaseline"
             @clear-generated-baseline="clearGeneratedWordBaseline"
             @update:word-overlay-opacity="setWordOverlayOpacity"
diff --git a/packages/superdoc/src/dev/components/sidebar/SidebarLayout.vue b/packages/superdoc/src/dev/components/sidebar/SidebarLayout.vue
index b5fc68de56..3dec584183 100644
--- a/packages/superdoc/src/dev/components/sidebar/SidebarLayout.vue
+++ b/packages/superdoc/src/dev/components/sidebar/SidebarLayout.vue
@@ -2,6 +2,10 @@
 import { computed } from 'vue';
 
 const props = defineProps({
+  useWebLayout: {
+    type: Boolean,
+    default: false,
+  },
   useWordOverlay: {
     type: Boolean,
     default: false,
@@ -42,6 +46,7 @@ const props = defineProps({
 
 const emit = defineEmits([
   'close',
+  'toggle-web-layout',
   'toggle-overlay',
   'generate-baseline',
   'clear-generated-baseline',
@@ -76,50 +81,73 @@ const closeSidebar = () => {
     </div>
 
     <div class="dev-sidebar__body">
-      <div class="dev-sidebar__actions">
-        <button
-          class="dev-sidebar__button"
-          type="button"
-          :disabled="isGeneratingWordBaseline"
-          @click="emit('generate-baseline')"
-        >
-          {{ isGeneratingWordBaseline ? 'Generating Word Reference...' : 'Generate Word Reference' }}
-        </button>
-        <button class="dev-sidebar__button" type="button" :disabled="!hasWordReference" @click="emit('toggle-overlay')">
-          Word Overlay: {{ useWordOverlay ? 'ON' : 'OFF' }}
-        </button>
-        <button
-          v-if="generatedCount > 0"
-          class="dev-sidebar__button"
-          type="button"
-          :disabled="isGeneratingWordBaseline"
-          @click="emit('clear-generated-baseline')"
-        >
-          Clear Generated Reference
-        </button>
-      </div>
+      <section class="dev-sidebar__section">
+        <h4 class="dev-sidebar__section-title">
+          <span class="dev-sidebar__section-icon dev-sidebar__section-icon--layout" aria-hidden="true">▦</span>
+          <span>Layout</span>
+        </h4>
+        <div class="dev-sidebar__actions">
+          <button class="dev-sidebar__button" type="button" @click="emit('toggle-web-layout')">
+            Turn Web Layout {{ useWebLayout ? 'off' : 'on' }} (reloads)
+          </button>
+        </div>
+      </section>
 
-      <label class="dev-sidebar__label">
-        <span>Opacity {{ wordOverlayOpacityLabel }}</span>
-        <input v-model.number="opacityModel" type="range" min="0" max="1" step="0.01" />
-      </label>
-
-      <label class="dev-sidebar__label">
-        <span>Blend</span>
-        <select v-model="blendModeModel">
-          <option value="difference">difference</option>
-          <option value="normal">normal</option>
-          <option value="multiply">multiply</option>
-          <option value="screen">screen</option>
-          <option value="overlay">overlay</option>
-        </select>
-      </label>
-
-      <p v-if="wordBaselineStatus" class="dev-sidebar__status">{{ wordBaselineStatus }}</p>
-      <p v-else-if="wordBaselineError" class="dev-sidebar__error">{{ wordBaselineError }}</p>
-      <p v-else-if="!wordOverlayAvailable" class="dev-sidebar__hint">
-        Overlay inactive (generate reference + layout engine).
-      </p>
+      <section v-if="!useWebLayout" class="dev-sidebar__section">
+        <h4 class="dev-sidebar__section-title">
+          <span class="dev-sidebar__section-icon dev-sidebar__section-icon--word" aria-hidden="true">W</span>
+          <span>MS Word</span>
+        </h4>
+        <div class="dev-sidebar__actions">
+          <button
+            class="dev-sidebar__button"
+            type="button"
+            :disabled="isGeneratingWordBaseline"
+            @click="emit('generate-baseline')"
+          >
+            {{ isGeneratingWordBaseline ? 'Generating Word Reference...' : 'Generate Word Reference' }}
+          </button>
+          <button
+            class="dev-sidebar__button"
+            type="button"
+            :disabled="!hasWordReference"
+            @click="emit('toggle-overlay')"
+          >
+            Word Overlay: {{ useWordOverlay ? 'ON' : 'OFF' }}
+          </button>
+          <button
+            v-if="generatedCount > 0"
+            class="dev-sidebar__button"
+            type="button"
+            :disabled="isGeneratingWordBaseline"
+            @click="emit('clear-generated-baseline')"
+          >
+            Clear Generated Reference
+          </button>
+        </div>
+
+        <label class="dev-sidebar__label">
+          <span>Opacity {{ wordOverlayOpacityLabel }}</span>
+          <input v-model.number="opacityModel" type="range" min="0" max="1" step="0.01" />
+        </label>
+
+        <label class="dev-sidebar__label">
+          <span>Blend</span>
+          <select v-model="blendModeModel">
+            <option value="difference">difference</option>
+            <option value="normal">normal</option>
+            <option value="multiply">multiply</option>
+            <option value="screen">screen</option>
+            <option value="overlay">overlay</option>
+          </select>
+        </label>
+
+        <p v-if="wordBaselineStatus" class="dev-sidebar__status">{{ wordBaselineStatus }}</p>
+        <p v-else-if="wordBaselineError" class="dev-sidebar__error">{{ wordBaselineError }}</p>
+        <p v-else-if="!wordOverlayAvailable" class="dev-sidebar__hint">
+          Overlay inactive (generate reference + layout engine).
+        </p>
+      </section>
     </div>
   </div>
 </template>
@@ -171,6 +199,51 @@ const closeSidebar = () => {
   gap: 12px;
 }
 
+.dev-sidebar__section {
+  display: grid;
+  gap: 10px;
+}
+
+.dev-sidebar__section + .dev-sidebar__section {
+  border-top: 1px solid rgba(148, 163, 184, 0.45);
+  margin-top: 4px;
+  padding-top: 18px;
+}
+
+.dev-sidebar__section-title {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.dev-sidebar__section-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.dev-sidebar__section-icon--layout {
+  border: 1px solid rgba(59, 130, 246, 0.5);
+  color: #1d4ed8;
+  background: rgba(59, 130, 246, 0.12);
+}
+
+.dev-sidebar__section-icon--word {
+  border: 1px solid rgba(37, 99, 235, 0.6);
+  color: #ffffff;
+  background: #2563eb;
+}
+
 .dev-sidebar__actions {
   display: grid;
   gap: 8px;