From 4b76bc97aa53570c3db690c664c4942858ca6287 Mon Sep 17 00:00:00 2001
From: Caio Pizzol <caio@harbourshare.com>
Date: Tue, 20 Jan 2026 18:22:08 -0300
Subject: [PATCH 1/2] feat: view options print and web

---
 .../src/components/SuperEditor.vue            |  45 ++++++-
 packages/super-editor/src/core/Editor.ts      |  44 ++++++-
 .../src/core/renderers/ProseMirrorRenderer.ts |  99 ++++++++++-----
 .../src/core/types/EditorConfig.ts            |  28 ++++
 packages/superdoc/src/SuperDoc.vue            |   7 +-
 .../src/assets/styles/elements/superdoc.css   |   8 ++
 packages/superdoc/src/core/SuperDoc.js        |  13 ++
 packages/superdoc/src/core/types/index.js     |  15 +++
 .../src/dev/components/SuperdocDev.vue        | 120 +++++++++++++++++-
 9 files changed, 339 insertions(+), 40 deletions(-)

diff --git a/packages/super-editor/src/components/SuperEditor.vue b/packages/super-editor/src/components/SuperEditor.vue
index ee70752440..a5abebabca 100644
--- a/packages/super-editor/src/components/SuperEditor.vue
+++ b/packages/super-editor/src/components/SuperEditor.vue
@@ -60,6 +60,14 @@ const contextMenuDisabled = computed(() => {
   return active?.options ? Boolean(active.options.disableContextMenu) : Boolean(props.options.disableContextMenu);
 });
 
+/**
+ * Computed property that determines if web layout mode is active (OOXML ST_View 'web').
+ * @returns {boolean} True if viewOptions.layout is 'web'
+ */
+const isWebLayout = computed(() => {
+  return props.options.viewOptions?.layout === 'web';
+});
+
 /**
  * Reactive ruler visibility state.
  * Uses a ref with a deep watcher to ensure proper reactivity when options.rulers changes.
@@ -126,6 +134,12 @@ watch(
  * falling back to 8.5in (letter size).
  */
 const containerStyle = computed(() => {
+  // Web layout mode: no min-width, let CSS handle responsive width
+  if (isWebLayout.value) {
+    return {};
+  }
+
+  // Print layout mode: use fixed page dimensions
   // Default: 8.5 inches at 96 DPI = 816px (letter size)
   let maxWidth = 8.5 * 96;
 
@@ -1040,7 +1054,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="super-editor-container" :style="containerStyle">
+  <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">
       <div class="ruler-host" :style="rulerHostStyle">
@@ -1141,6 +1155,35 @@ onBeforeUnmount(() => {
   flex-direction: column;
 }
 
+/* Web layout mode (OOXML ST_View 'web'): content reflows to fit container */
+.super-editor-container.web-layout {
+  min-height: unset;
+  min-width: unset;
+  width: 100%;
+}
+
+.super-editor-container.web-layout .super-editor {
+  width: 100%;
+}
+
+.super-editor-container.web-layout .editor-element {
+  width: 100%;
+}
+
+/* Web layout: ensure editor fills screen width and content reflows (WCAG AA) */
+.super-editor-container.web-layout :deep(.ProseMirror) {
+  width: 100%;
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
+
+.super-editor-container.web-layout :deep(.ProseMirror p),
+.super-editor-container.web-layout :deep(.ProseMirror div),
+.super-editor-container.web-layout :deep(.ProseMirror li) {
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
+
 .ruler-host {
   display: flex;
   justify-content: center;
diff --git a/packages/super-editor/src/core/Editor.ts b/packages/super-editor/src/core/Editor.ts
index daffbd56a2..c666da0381 100644
--- a/packages/super-editor/src/core/Editor.ts
+++ b/packages/super-editor/src/core/Editor.ts
@@ -56,6 +56,13 @@ import { ProseMirrorRenderer } from './renderers/ProseMirrorRenderer.js';
 declare const __APP_VERSION__: string;
 declare const version: string | undefined;
 
+/**
+ * Constants for layout calculations
+ */
+const PIXELS_PER_INCH = 96;
+const MAX_HEIGHT_BUFFER_PX = 50;
+const MAX_WIDTH_BUFFER_PX = 20;
+
 /**
  * Image storage structure used by the image extension
  */
@@ -261,6 +268,7 @@ export class Editor extends EventEmitter<EditorEventMap> {
     isCommentsEnabled: false,
     isNewFile: false,
     scale: 1,
+    viewOptions: { layout: 'print' },
     annotations: false,
     isInternal: false,
     externalExtensions: [],
@@ -1011,6 +1019,13 @@ export class Editor extends EventEmitter<EditorEventMap> {
     }
   }
 
+  /**
+   * Check if web layout mode is enabled (OOXML ST_View 'web')
+   */
+  isWebLayout(): boolean {
+    return this.options.viewOptions?.layout === 'web';
+  }
+
   /**
    * Focus the editor.
    */
@@ -1831,19 +1846,38 @@ export class Editor extends EventEmitter<EditorEventMap> {
   }
 
   /**
-   * Get the maximum content size
+   * Get the maximum content size based on page dimensions and margins
+   * @returns Size object with width and height in pixels, or empty object if no page size
+   * @note In web layout mode, returns empty object to skip content constraints.
+   *       CSS max-width: 100% handles responsive display while preserving full resolution.
    */
   getMaxContentSize(): { width?: number; height?: number } {
     if (!this.converter) return {};
+
+    // In web layout mode: skip constraints, let CSS handle responsive sizing
+    // This preserves full image resolution while CSS max-width: 100% handles display
+    if (this.isWebLayout()) {
+      return {};
+    }
+
     const { pageSize = {}, pageMargins = {} } = this.converter.pageStyles ?? {};
     const { width, height } = pageSize;
-    const { top = 0, bottom = 0, left = 0, right = 0 } = pageMargins;
 
-    // All sizes are in inches so we multiply by 96 to get pixels
     if (!width || !height) return {};
 
-    const maxHeight = height * 96 - top * 96 - bottom * 96 - 50;
-    const maxWidth = width * 96 - left * 96 - right * 96 - 20;
+    // Print layout mode: use document margins (inches converted to pixels)
+    const getMarginPx = (side: 'top' | 'bottom' | 'left' | 'right'): number => {
+      return (pageMargins?.[side] ?? 0) * PIXELS_PER_INCH;
+    };
+
+    const topPx = getMarginPx('top');
+    const bottomPx = getMarginPx('bottom');
+    const leftPx = getMarginPx('left');
+    const rightPx = getMarginPx('right');
+
+    // All sizes are in inches so we multiply by PIXELS_PER_INCH to get pixels
+    const maxHeight = height * PIXELS_PER_INCH - topPx - bottomPx - MAX_HEIGHT_BUFFER_PX;
+    const maxWidth = width * PIXELS_PER_INCH - leftPx - rightPx - MAX_WIDTH_BUFFER_PX;
     return {
       width: maxWidth,
       height: maxHeight,
diff --git a/packages/super-editor/src/core/renderers/ProseMirrorRenderer.ts b/packages/super-editor/src/core/renderers/ProseMirrorRenderer.ts
index 293eabd31e..586ba991af 100644
--- a/packages/super-editor/src/core/renderers/ProseMirrorRenderer.ts
+++ b/packages/super-editor/src/core/renderers/ProseMirrorRenderer.ts
@@ -229,41 +229,43 @@ export class ProseMirrorRenderer implements EditorRenderer {
    * @param proseMirror - The ProseMirror content element (.ProseMirror)
    */
   updateEditorStyles(editor: Editor, element: HTMLElement, proseMirror: HTMLElement): void {
-    const { pageSize, pageMargins } = editor.converter.pageStyles ?? {};
-
     if (!proseMirror || !element) {
       return;
     }
 
+    this.#applyBaseStyles(editor, element, proseMirror);
+
+    if (editor.isWebLayout()) {
+      this.#applyWebLayoutStyles(element, proseMirror);
+    } else {
+      this.#applyPrintLayoutStyles(editor, element, proseMirror);
+    }
+  }
+
+  /**
+   * Apply base styles common to both web and print layouts.
+   * Includes accessibility attributes, colors, typography, and mobile styles.
+   */
+  #applyBaseStyles(editor: Editor, element: HTMLElement, proseMirror: HTMLElement): void {
+    // Accessibility
     proseMirror.setAttribute('role', 'document');
     proseMirror.setAttribute('aria-multiline', 'true');
     proseMirror.setAttribute('aria-label', 'Main content area, start typing to enter text.');
     proseMirror.setAttribute('aria-description', '');
     proseMirror.classList.remove('view-mode');
 
-    // Set fixed dimensions and padding that won't change with scaling
-    if (pageSize) {
-      element.style.width = pageSize.width + 'in';
-      element.style.minWidth = pageSize.width + 'in';
-      element.style.minHeight = pageSize.height + 'in';
-    }
-
-    if (pageMargins) {
-      element.style.paddingLeft = pageMargins.left + 'in';
-      element.style.paddingRight = pageMargins.right + 'in';
-    }
-
+    // Box model
     element.style.boxSizing = 'border-box';
-    element.style.isolation = 'isolate'; // to create new stacking context.
+    element.style.isolation = 'isolate';
 
+    // Colors
     proseMirror.style.outline = 'none';
     proseMirror.style.border = 'none';
     element.style.backgroundColor = '#fff';
     proseMirror.style.backgroundColor = '#fff';
 
-    // Typeface and font size
+    // Typography from document defaults
     const { typeface, fontSizePt, fontFamilyCss } = editor.converter.getDocumentDefaultStyles() ?? {};
-
     const resolvedFontFamily = fontFamilyCss || typeface;
     if (resolvedFontFamily) {
       element.style.fontFamily = resolvedFontFamily;
@@ -272,36 +274,68 @@ export class ProseMirrorRenderer implements EditorRenderer {
       element.style.fontSize = `${fontSizePt}pt`;
     }
 
+    // Line height
+    proseMirror.style.lineHeight = String(DEFAULT_LINE_HEIGHT);
+
     // Mobile styles
     element.style.transformOrigin = 'top left';
     element.style.touchAction = 'auto';
-
-    // Safely set vendor-prefixed properties
-    // Type assertion is safe here because we're setting a valid CSS property
     const elementStyleWithVendor = element.style as CSSStyleDeclaration & {
       webkitOverflowScrolling?: string;
     };
     if ('webkitOverflowScrolling' in element.style || typeof elementStyleWithVendor === 'object') {
       elementStyleWithVendor.webkitOverflowScrolling = 'touch';
     }
+  }
 
-    // Calculate line height
-    proseMirror.style.lineHeight = String(DEFAULT_LINE_HEIGHT);
+  /**
+   * Apply styles for web layout mode (OOXML ST_View 'web').
+   * Content reflows to fit container width - CSS handles dimensions and text reflow.
+   * This method resets inline styles that print mode may have set.
+   */
+  #applyWebLayoutStyles(element: HTMLElement, proseMirror: HTMLElement): void {
+    // Reset dimension styles - CSS .web-layout class handles these
+    element.style.width = '';
+    element.style.minWidth = '';
+    element.style.minHeight = '';
+
+    // Reset padding - consuming app controls via CSS
+    element.style.paddingLeft = '';
+    element.style.paddingRight = '';
+    proseMirror.style.paddingTop = '0';
+    proseMirror.style.paddingBottom = '0';
+  }
+
+  /**
+   * Apply styles for print layout mode (OOXML ST_View 'print').
+   * Fixed page dimensions with document margins for print fidelity.
+   */
+  #applyPrintLayoutStyles(editor: Editor, element: HTMLElement, proseMirror: HTMLElement): void {
+    const { pageSize, pageMargins } = editor.converter.pageStyles ?? {};
 
-    // If we are not using pagination, we still need to add some padding for header/footer
-    // Always pad the body to the page top margin so the body baseline
-    // starts at pageTop + topMargin (Word parity). Pagination decorations
-    // will only reserve header overflow beyond this margin.
+    // Fixed page dimensions
+    if (pageSize?.width != null) {
+      element.style.width = `${pageSize.width}in`;
+      element.style.minWidth = `${pageSize.width}in`;
+      if (pageSize?.height != null) {
+        element.style.minHeight = `${pageSize.height}in`;
+      }
+    }
+
+    // Document margins as padding
+    if (pageMargins) {
+      element.style.paddingLeft = `${pageMargins.left}in`;
+      element.style.paddingRight = `${pageMargins.right}in`;
+    }
+
+    // Top padding for body baseline (presentation editor only)
     if (editor.presentationEditor && pageMargins?.top != null) {
       proseMirror.style.paddingTop = `${pageMargins.top}in`;
     } else if (editor.presentationEditor) {
-      // Fallback for missing margins
       proseMirror.style.paddingTop = `${DEFAULT_FALLBACK_MARGIN_INCHES}in`;
     } else {
       proseMirror.style.paddingTop = '0';
     }
-
-    // Keep footer padding managed by pagination; set to 0 here.
     proseMirror.style.paddingBottom = '0';
   }
 
@@ -338,6 +372,8 @@ export class ProseMirrorRenderer implements EditorRenderer {
    * Sets up viewport-based scaling to fit the editor within mobile screen widths.
    * Listens for orientation changes and window resize events to update scaling dynamically.
    *
+   * Note: Scaling is skipped in responsive layout mode since content reflows naturally.
+   *
    * Scaling calculation:
    * - Maintains minimum side margins (MIN_MOBILE_SIDE_MARGIN_PX)
    * - Scales editor down if viewport is narrower than content
@@ -353,6 +389,11 @@ export class ProseMirrorRenderer implements EditorRenderer {
       return;
     }
 
+    // In web layout mode, content reflows naturally - no scaling needed
+    if (editor.isWebLayout()) {
+      return;
+    }
+
     const initialWidth = element.offsetWidth;
 
     const updateScale = () => {
diff --git a/packages/super-editor/src/core/types/EditorConfig.ts b/packages/super-editor/src/core/types/EditorConfig.ts
index 0ed724ed78..5a0564e8f3 100644
--- a/packages/super-editor/src/core/types/EditorConfig.ts
+++ b/packages/super-editor/src/core/types/EditorConfig.ts
@@ -54,6 +54,27 @@ export interface DocxFileEntry {
   content: string;
 }
 
+/**
+ * Document view layout values - mirrors OOXML ST_View (ECMA-376 §17.18.102)
+ * - 'print': Print Layout View - displays document as it prints (default)
+ * - 'web': Web Page View - content reflows to fit container (mobile/accessibility)
+ */
+export type ViewLayout = 'print' | 'web';
+
+/**
+ * Document view options for controlling how the document is displayed.
+ * Mirrors OOXML document view settings.
+ */
+export interface ViewOptions {
+  /**
+   * Document view layout (OOXML ST_View compatible)
+   * - 'print': Fixed page width, displays document as it prints (default)
+   * - 'web': Content reflows to fit container width
+   * @default 'print'
+   */
+  layout?: ViewLayout;
+}
+
 /**
  * Awareness interface - matches y-protocols Awareness.
  * All properties optional to support various provider implementations.
@@ -191,6 +212,13 @@ export interface EditorOptions {
   /** Editor scale/zoom */
   scale?: number;
 
+  /**
+   * Document view options (OOXML ST_View compatible).
+   * Controls how the document is displayed.
+   * @example { layout: 'web' } // Content reflows to fit container
+   */
+  viewOptions?: ViewOptions | null;
+
   /** Whether annotations are enabled */
   annotations?: boolean;
 
diff --git a/packages/superdoc/src/SuperDoc.vue b/packages/superdoc/src/SuperDoc.vue
index 7b6988885f..b68b03e515 100644
--- a/packages/superdoc/src/SuperDoc.vue
+++ b/packages/superdoc/src/SuperDoc.vue
@@ -473,6 +473,7 @@ const editorOptions = (doc) => {
     suppressDefaultDocxStyles: proxy.$superdoc.config.suppressDefaultDocxStyles,
     disableContextMenu: proxy.$superdoc.config.disableContextMenu,
     jsonOverride: proxy.$superdoc.config.jsonOverride,
+    viewOptions: proxy.$superdoc.config.viewOptions,
     layoutEngineOptions: useLayoutEngine
       ? {
           ...(proxy.$superdoc.config.layoutEngineOptions || {}),
@@ -824,7 +825,11 @@ watch(getFloatingComments, () => {
   <n-config-provider abstract preflight-style-disabled>
     <div
       class="superdoc"
-      :class="{ 'superdoc--with-sidebar': showCommentsSidebar, 'high-contrast': isHighContrastMode }"
+      :class="{
+        'superdoc--with-sidebar': showCommentsSidebar,
+        'superdoc--web-layout': proxy.$superdoc.config.viewOptions?.layout === 'web',
+        'high-contrast': isHighContrastMode,
+      }"
       :style="superdocStyleVars"
     >
       <div class="superdoc__layers layers" ref="layers" role="group">
diff --git a/packages/superdoc/src/assets/styles/elements/superdoc.css b/packages/superdoc/src/assets/styles/elements/superdoc.css
index 8e933f7b84..97383be4e0 100644
--- a/packages/superdoc/src/assets/styles/elements/superdoc.css
+++ b/packages/superdoc/src/assets/styles/elements/superdoc.css
@@ -9,3 +9,11 @@
 .superdoc .ai-textarea-icon.error > svg {
   fill: #ed4337;
 }
+
+/* Web Layout Mode (OOXML ST_View 'web') - content reflows to container width */
+.superdoc--web-layout,
+.superdoc--web-layout .superdoc__layers,
+.superdoc--web-layout .superdoc__document,
+.superdoc--web-layout .superdoc__sub-document {
+  width: 100%;
+}
diff --git a/packages/superdoc/src/core/SuperDoc.js b/packages/superdoc/src/core/SuperDoc.js
index 8da548e226..7e3f94d642 100644
--- a/packages/superdoc/src/core/SuperDoc.js
+++ b/packages/superdoc/src/core/SuperDoc.js
@@ -114,6 +114,11 @@ export class SuperDoc extends EventEmitter {
     // Disable context menus (slash and right-click) globally
     disableContextMenu: false,
 
+    // Document view options (OOXML ST_View compatible)
+    // - 'print': Print Layout View - displays document as it prints (default)
+    // - 'web': Web Page View - content reflows to fit container (mobile/accessibility)
+    viewOptions: { layout: 'print' },
+
     // Internal: toggle layout-engine-powered PresentationEditor in dev shells
     useLayoutEngine: true,
   };
@@ -142,6 +147,14 @@ 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) {
+      console.warn(
+        '[SuperDoc] Web layout mode requires useLayoutEngine: false. Automatically disabling layout engine.',
+      );
+      this.config.useLayoutEngine = false;
+    }
+
     const incomingUser = this.config.user;
     if (!incomingUser || typeof incomingUser !== 'object') {
       this.config.user = { ...DEFAULT_USER };
diff --git a/packages/superdoc/src/core/types/index.js b/packages/superdoc/src/core/types/index.js
index 79efaa263f..84e6f2e2a4 100644
--- a/packages/superdoc/src/core/types/index.js
+++ b/packages/superdoc/src/core/types/index.js
@@ -79,6 +79,20 @@
  * - 'clean': Export without any comments
  */
 
+/**
+ * @typedef {'print' | 'web'} ViewLayout
+ * Document view layout values - mirrors OOXML ST_View (ECMA-376 §17.18.102)
+ * - 'print': Print Layout View - displays document as it prints (default)
+ * - 'web': Web Page View - content reflows to fit container (mobile/accessibility)
+ */
+
+/**
+ * @typedef {Object} ViewOptions
+ * Document view options for controlling how the document is displayed.
+ * Mirrors OOXML document view settings.
+ * @property {ViewLayout} [layout='print'] Document view layout (OOXML ST_View compatible)
+ */
+
 /**
  * @typedef {Object} ExportParams
  * @property {ExportType[]} [exportType=['docx']] - File formats to export
@@ -156,6 +170,7 @@
  * @property {string} [html] HTML content to initialize the editor with
  * @property {string} [markdown] Markdown content to initialize the editor with
  * @property {boolean} [isDebug=false] Whether to enable debug mode
+ * @property {ViewOptions} [viewOptions] Document view options (OOXML ST_View compatible)
  */
 
 export {};
diff --git a/packages/superdoc/src/dev/components/SuperdocDev.vue b/packages/superdoc/src/dev/components/SuperdocDev.vue
index 4a4f6e5d81..1c744fe512 100644
--- a/packages/superdoc/src/dev/components/SuperdocDev.vue
+++ b/packages/superdoc/src/dev/components/SuperdocDev.vue
@@ -39,6 +39,7 @@ const testUserEmail = urlParams.get('email') || 'user@superdoc.com';
 const testUserName = urlParams.get('name') || `SuperDoc ${Math.floor(1000 + Math.random() * 9000)}`;
 const userRole = urlParams.get('role') || 'editor';
 const useLayoutEngine = ref(urlParams.get('layout') !== '0');
+const useWebLayout = ref(urlParams.get('view') === 'web');
 const superdocLogo = SuperdocLogo;
 const uploadedFileName = ref('');
 const uploadDisplayName = computed(() => uploadedFileName.value || 'No file chosen');
@@ -172,7 +173,10 @@ const init = async () => {
       visible: true,
     },
     toolbarGroups: ['left', 'center', 'right'],
-    pagination: useLayoutEngine.value,
+    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,
     rulers: true,
     rulerContainer: '#ruler-container',
     annotations: true,
@@ -196,7 +200,6 @@ const init = async () => {
     //   },
     // ],
     // cspNonce: 'testnonce123',
-    useLayoutEngine: useLayoutEngine.value,
     modules: {
       comments: {
         // comments: sampleComments,
@@ -495,6 +498,13 @@ const toggleLayoutEngine = () => {
   window.location.href = url.toString();
 };
 
+const toggleViewLayout = () => {
+  const nextValue = !useWebLayout.value;
+  const url = new URL(window.location.href);
+  url.searchParams.set('view', nextValue ? 'web' : 'print');
+  window.location.href = url.toString();
+};
+
 const showExportMenu = ref(false);
 const closeExportMenu = () => {
   showExportMenu.value = false;
@@ -567,7 +577,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 ? 'ON' : 'OFF' }}</span>
+              <span class="badge">Layout Engine: {{ useLayoutEngine && !useWebLayout ? 'ON' : 'OFF' }}</span>
+              <span v-if="useWebLayout" class="badge">Web Layout: ON</span>
               <span v-if="scrollTestMode" class="badge badge--warning">Scroll Test: ON</span>
             </div>
             <h2 class="dev-app__title">SuperDoc Dev</h2>
@@ -680,6 +691,9 @@ 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>
@@ -703,7 +717,7 @@ if (scrollTestMode.value) {
       <div class="dev-app__main">
         <div class="dev-app__view">
           <div class="dev-app__content" v-if="currentFile">
-            <div class="dev-app__content-container">
+            <div class="dev-app__content-container" :class="{ 'dev-app__content-container--web-layout': useWebLayout }">
               <div id="superdoc"></div>
             </div>
           </div>
@@ -1190,6 +1204,28 @@ if (scrollTestMode.value) {
   width: auto;
 }
 
+/* Web layout mode: dev app container styling */
+.dev-app__content-container--web-layout {
+  width: 100%;
+  max-width: 100%;
+  padding: 0 16px;
+  box-sizing: border-box;
+  overflow-x: hidden;
+}
+
+/* Web layout mode: prevent centering to allow full-width layout */
+.dev-app__content:has(.dev-app__content-container--web-layout) {
+  align-items: stretch;
+}
+
+.dev-app__view:has(.dev-app__content-container--web-layout) {
+  width: 100%;
+}
+
+.dev-app__main:has(.dev-app__content-container--web-layout) {
+  overflow-x: hidden;
+}
+
 .dev-app__inputs-panel {
   display: grid;
   height: calc(100vh - var(--header-height) - var(--toolbar-height));
@@ -1249,4 +1285,80 @@ if (scrollTestMode.value) {
   line-height: 1.5;
   color: #fde68a;
 }
+
+/* Mobile responsive styles */
+@media screen and (max-width: 768px) {
+  .dev-app {
+    --header-height: auto;
+    overflow-x: hidden;
+  }
+
+  .dev-app__layout {
+    overflow-x: hidden;
+  }
+
+  .dev-app__header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+    padding: 16px;
+  }
+
+  .dev-app__brand {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .dev-app__logo {
+    width: 48px;
+    height: 48px;
+  }
+
+  .dev-app__title {
+    font-size: 18px;
+  }
+
+  .dev-app__meta-row {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .dev-app__header-actions {
+    align-items: stretch;
+    width: 100%;
+  }
+
+  .dev-app__header-buttons {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .dev-app__header-export-btn {
+    width: 100%;
+    text-align: center;
+  }
+
+  .dev-app__upload-control {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .dev-app__url-form {
+    flex-direction: column;
+  }
+
+  .dev-app__url-input {
+    width: 100%;
+  }
+
+  .dev-app__main {
+    overflow-x: hidden;
+  }
+
+  .dev-app__view {
+    padding-top: 10px;
+    overflow-x: hidden;
+  }
+}
 </style>

From b7d68852e6855d1f68e61444c5970745b93e2edd Mon Sep 17 00:00:00 2001
From: Caio Pizzol <caio@harbourshare.com>
Date: Tue, 20 Jan 2026 18:30:39 -0300
Subject: [PATCH 2/2] test: web layout

---
 .../src/core/Editor.webLayout.test.ts         | 180 ++++++++++++++++++
 packages/superdoc/src/core/SuperDoc.test.js   |  86 +++++++++
 2 files changed, 266 insertions(+)
 create mode 100644 packages/super-editor/src/core/Editor.webLayout.test.ts

diff --git a/packages/super-editor/src/core/Editor.webLayout.test.ts b/packages/super-editor/src/core/Editor.webLayout.test.ts
new file mode 100644
index 0000000000..e9456d1175
--- /dev/null
+++ b/packages/super-editor/src/core/Editor.webLayout.test.ts
@@ -0,0 +1,180 @@
+import { describe, it, expect, vi, beforeEach, beforeAll } from 'vitest';
+import { Editor } from './Editor.js';
+import { loadTestDataForEditorTests } from '@tests/helpers/helpers.js';
+import { getStarterExtensions } from '@extensions/index.js';
+
+/**
+ * Tests for web layout mode (OOXML ST_View 'web').
+ *
+ * Web layout mode enables responsive document rendering where content
+ * reflows to fit the container width, similar to web pages. This contrasts
+ * with print layout mode which maintains fixed page dimensions.
+ *
+ * Key behaviors tested:
+ * - isWebLayout() detection
+ * - getMaxContentSize() behavior in web vs print layout
+ */
+
+let blankDocData: { docx: unknown; media: unknown; mediaFiles: unknown; fonts: unknown };
+
+beforeAll(async () => {
+  blankDocData = await loadTestDataForEditorTests('blank-doc.docx');
+});
+
+function createTestEditor(options: Partial<Parameters<(typeof Editor)['prototype']['constructor']>[0]> = {}) {
+  return new Editor({
+    isHeadless: true,
+    deferDocumentLoad: true,
+    mode: 'docx',
+    extensions: getStarterExtensions(),
+    suppressDefaultDocxStyles: true,
+    ...options,
+  });
+}
+
+function getBlankDocOptions() {
+  return {
+    mode: 'docx' as const,
+    content: blankDocData.docx,
+    mediaFiles: blankDocData.mediaFiles,
+    fonts: blankDocData.fonts,
+  };
+}
+
+describe('Editor Web Layout Mode', () => {
+  describe('isWebLayout()', () => {
+    it('returns true when viewOptions.layout is "web"', () => {
+      const editor = createTestEditor({
+        viewOptions: { layout: 'web' },
+      });
+
+      expect(editor.isWebLayout()).toBe(true);
+    });
+
+    it('returns false when viewOptions.layout is "print"', () => {
+      const editor = createTestEditor({
+        viewOptions: { layout: 'print' },
+      });
+
+      expect(editor.isWebLayout()).toBe(false);
+    });
+
+    it('returns false when viewOptions is undefined', () => {
+      const editor = createTestEditor({
+        viewOptions: undefined,
+      });
+
+      expect(editor.isWebLayout()).toBe(false);
+    });
+
+    it('returns false when viewOptions.layout is undefined', () => {
+      const editor = createTestEditor({
+        viewOptions: {},
+      });
+
+      expect(editor.isWebLayout()).toBe(false);
+    });
+  });
+
+  describe('getMaxContentSize()', () => {
+    describe('web layout mode', () => {
+      it('returns empty object to skip image constraints', async () => {
+        const editor = createTestEditor({
+          viewOptions: { layout: 'web' },
+        });
+        await editor.open(undefined, getBlankDocOptions());
+
+        const size = editor.getMaxContentSize();
+
+        // Web layout skips constraints - CSS handles responsive sizing
+        expect(size).toEqual({});
+      });
+
+      it('returns empty object even when document has page size defined', async () => {
+        const editor = createTestEditor({
+          viewOptions: { layout: 'web' },
+        });
+        await editor.open(undefined, getBlankDocOptions());
+
+        // Verify document has page styles (blank-doc.docx has standard Letter size)
+        expect(editor.converter?.pageStyles?.pageSize).toBeDefined();
+
+        // But web layout still returns empty - let CSS handle it
+        expect(editor.getMaxContentSize()).toEqual({});
+      });
+    });
+
+    describe('print layout mode', () => {
+      it('returns calculated dimensions based on page size and margins', async () => {
+        const editor = createTestEditor({
+          viewOptions: { layout: 'print' },
+        });
+        await editor.open(undefined, getBlankDocOptions());
+
+        const size = editor.getMaxContentSize();
+
+        // Print layout should return numeric dimensions
+        expect(size.width).toBeDefined();
+        expect(size.height).toBeDefined();
+        expect(typeof size.width).toBe('number');
+        expect(typeof size.height).toBe('number');
+        expect(size.width).toBeGreaterThan(0);
+        expect(size.height).toBeGreaterThan(0);
+      });
+
+      it('accounts for page margins in calculations', async () => {
+        const editor = createTestEditor({
+          viewOptions: { layout: 'print' },
+        });
+        await editor.open(undefined, getBlankDocOptions());
+
+        const { pageSize = {}, pageMargins = {} } = editor.converter?.pageStyles ?? {};
+        const PIXELS_PER_INCH = 96;
+
+        // Get the actual calculated size
+        const size = editor.getMaxContentSize();
+
+        // Verify margins are subtracted from page dimensions
+        if (pageSize.width && pageSize.height) {
+          const expectedMaxWidth =
+            pageSize.width * PIXELS_PER_INCH -
+            (pageMargins.left ?? 0) * PIXELS_PER_INCH -
+            (pageMargins.right ?? 0) * PIXELS_PER_INCH -
+            20; // MAX_WIDTH_BUFFER_PX
+
+          const expectedMaxHeight =
+            pageSize.height * PIXELS_PER_INCH -
+            (pageMargins.top ?? 0) * PIXELS_PER_INCH -
+            (pageMargins.bottom ?? 0) * PIXELS_PER_INCH -
+            50; // MAX_HEIGHT_BUFFER_PX
+
+          expect(size.width).toBe(expectedMaxWidth);
+          expect(size.height).toBe(expectedMaxHeight);
+        }
+      });
+    });
+
+    describe('edge cases', () => {
+      it('returns empty object when converter is not initialized', () => {
+        const editor = createTestEditor({
+          viewOptions: { layout: 'print' },
+        });
+        // Don't call open() - converter won't be initialized
+
+        expect(editor.getMaxContentSize()).toEqual({});
+      });
+
+      it('returns empty object by default (no viewOptions)', async () => {
+        const editor = createTestEditor();
+        await editor.open(undefined, getBlankDocOptions());
+
+        // Default behavior - print layout with calculated dimensions
+        const size = editor.getMaxContentSize();
+
+        // Default should be print layout (calculated dimensions)
+        expect(typeof size.width).toBe('number');
+        expect(typeof size.height).toBe('number');
+      });
+    });
+  });
+});
diff --git a/packages/superdoc/src/core/SuperDoc.test.js b/packages/superdoc/src/core/SuperDoc.test.js
index f1d9829a39..fc591610d6 100644
--- a/packages/superdoc/src/core/SuperDoc.test.js
+++ b/packages/superdoc/src/core/SuperDoc.test.js
@@ -890,4 +890,90 @@ describe('SuperDoc core', () => {
       });
     });
   });
+
+  describe('Web layout mode configuration', () => {
+    it('auto-disables layout engine when web layout is enabled', 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,
+      });
+      await flushMicrotasks();
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        '[SuperDoc] Web layout mode requires useLayoutEngine: false. Automatically disabling layout engine.',
+      );
+      expect(instance.config.useLayoutEngine).toBe(false);
+      warnSpy.mockRestore();
+    });
+
+    it('does not warn when web layout with layout engine already disabled', 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: false,
+      });
+      await flushMicrotasks();
+
+      expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining('Web layout mode requires'));
+      expect(instance.config.useLayoutEngine).toBe(false);
+      warnSpy.mockRestore();
+    });
+
+    it('preserves layout engine setting for print layout', 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,
+      });
+      await flushMicrotasks();
+
+      expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining('Web layout mode requires'));
+      expect(instance.config.useLayoutEngine).toBe(true);
+      warnSpy.mockRestore();
+    });
+
+    it('uses default print layout when viewOptions not specified', async () => {
+      createAppHarness();
+
+      const instance = new SuperDoc({
+        selector: '#host',
+        document: 'https://example.com/doc.docx',
+      });
+      await flushMicrotasks();
+
+      expect(instance.config.viewOptions).toEqual({ layout: 'print' });
+      expect(instance.config.useLayoutEngine).toBe(true);
+    });
+
+    it('handles undefined viewOptions.layout gracefully', async () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      createAppHarness();
+
+      const instance = new SuperDoc({
+        selector: '#host',
+        document: 'https://example.com/doc.docx',
+        viewOptions: {},
+        useLayoutEngine: true,
+      });
+      await flushMicrotasks();
+
+      // Should not trigger web layout warning
+      expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining('Web layout mode requires'));
+      expect(instance.config.useLayoutEngine).toBe(true);
+      warnSpy.mockRestore();
+    });
+  });
 });