superdoc 1.0.0-beta.1 → 1.0.0-beta.3

package/README.md

@@ -13,6 +13,7 @@ SuperDoc is a powerful document editor that brings Microsoft Word-level capabili
 
 - **Document Compatibility**: View and edit DOCX and PDF documents directly in the browser
 - **Microsoft Word Integration**: Full support for importing/exporting, advanced formatting, comments, and tracked changes
+- **Paginated Layout**: True WYSIWYG editing with accurate page rendering powered by the layout engine
 - **Real-time Collaboration**: Built-in multiplayer editing, live updates, commenting, sharing, and revision history
 - **Framework Agnostic**: Seamlessly integrates with Vue, React, or vanilla JavaScript
 - **Extensible Architecture**: Modular design makes it easy to extend and customize
@@ -70,6 +71,21 @@ SuperDoc consists of two main packages:
   npm install && npm run dev
   ```
 
+## 🏗️ Architecture
+
+SuperDoc uses a **paginated-only** rendering approach powered by `PresentationEditor` and the layout engine:
+
+- **For web applications**: Use `SuperDoc` - it automatically uses `PresentationEditor` for paginated rendering
+- **For Node.js/CLI/headless environments**: Use `Editor` directly from `@harbour-enterprises/super-editor`
+
+The layout engine provides:
+- True WYSIWYG page rendering with accurate pagination
+- Support for multi-column layouts, headers, footers, and section breaks
+- Virtualization for optimal performance with large documents
+- Zoom controls and responsive page scaling
+
+**Note**: If you need a flow-mode (unpaginated) editor, use the core `Editor` class directly. SuperDoc is designed for paginated document editing.
+
 ## 📖 Documentation
 
 For comprehensive documentation, visit our [SuperDocumentation](https://docs.superdoc.dev) site. Key topics include:

package/dist/chunks/{PdfViewer-2trl719d.es.js → PdfViewer-CKzs9Ct5.es.js}

@@ -1,5 +1,5 @@
-import { m as defineComponent, y as h, O as Transition, $ as process$1, J as watchEffect, a as computed, r as ref, j as onMounted, W as onUnmounted, b as createElementBlock, o as openBlock, f as createBaseVNode, e as createCommentVNode, v as createVNode, x as unref } from "./vue-B5QAf5pA.es.js";
-import { d as derived, c, a as cB, f as fadeInTransition, b as cM, N as NBaseLoading, w as warnOnce, u as useConfig, e as useTheme, p as pxfy, g as createKey, h as useThemeClass, i as useCompitable, _ as _export_sfc, j as useSuperdocStore, s as storeToRefs, k as useSelection } from "./index-DLOjOQRL.es.js";
+import { y as defineComponent, z as h, O as Transition, $ as process$1, J as watchEffect, a as computed, r as ref, j as onMounted, W as onUnmounted, b as createElementBlock, o as openBlock, f as createBaseVNode, e as createCommentVNode, u as createVNode, v as unref } from "./vue-CztqUvm1.es.js";
+import { d as derived, c, a as cB, f as fadeInTransition, b as cM, N as NBaseLoading, w as warnOnce, u as useConfig, e as useTheme, p as pxfy, g as createKey, h as useThemeClass, i as useCompitable, _ as _export_sfc, j as useSuperdocStore, s as storeToRefs, k as useSelection } from "./index-DukSDI8_.es.js";
 function self(vars) {
   const {
     opacityDisabled,
@@ -314,7 +314,7 @@ class PDFJSAdapter extends PDFAdapter {
   }
   /**
    * @param {PDFPageProxy} page
-   * @returns {object}
+   * @returns {PageSize}
    */
   getOriginalPageSize(page) {
     const viewport = page.getViewport({ scale: 1 });

package/dist/chunks/{PdfViewer-C4ilYw1S.cjs → PdfViewer-CxHbcDGx.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("./vue-ARQSyfaw.cjs");
-const superdoc = require("./index-CEA-d7Y_.cjs");
+const superdoc = require("./index-Dp3rVMnX.cjs");
 function self(vars) {
   const {
     opacityDisabled,
@@ -316,7 +316,7 @@ class PDFJSAdapter extends PDFAdapter {
   }
   /**
    * @param {PDFPageProxy} page
-   * @returns {object}
+   * @returns {PageSize}
    */
   getOriginalPageSize(page) {
     const viewport = page.getViewport({ scale: 1 });

package/dist/chunks/{eventemitter3-BZXKb7j7.es.js → eventemitter3-ByBH0NYV.es.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from "./jszip-Duxs2YMV.es.js";
+import { g as getDefaultExportFromCjs } from "./jszip-BwsONqK5.es.js";
 var eventemitter3 = { exports: {} };
 var hasRequiredEventemitter3;
 function requireEventemitter3() {

package/dist/chunks/{index-tvya7CfE-DF5ylbKU.cjs → index-CJUy3fVi-BGLfCP5B.cjs}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const superEditor_es = require("./super-editor.es-DvdAXVMu.cjs");
+const superEditor_es = require("./super-editor.es-CDiTp9Fe.cjs");
 const indexCvBqQJbG = require("./index-CvBqQJbG-Dwm0THD7.cjs");
 function bail(error) {
   if (error) {

package/dist/chunks/{index-tvya7CfE-CGwoeCGp.es.js → index-CJUy3fVi-D8zt9F3Z.es.js}

@@ -1,4 +1,4 @@
-import { s as getDefaultExportFromCjs$2 } from "./super-editor.es-CtZI-Vuw.es.js";
+import { s as getDefaultExportFromCjs$2 } from "./super-editor.es-BRKZG90h.es.js";
 import { V as VFile } from "./index-CvBqQJbG-CvBqQJbG.es.js";
 function bail(error) {
   if (error) {

package/dist/chunks/{index-CEA-d7Y_.cjs → index-Dp3rVMnX.cjs}

@@ -1,5 +1,5 @@
 "use strict";
-const superEditor_es = require("./super-editor.es-DvdAXVMu.cjs");
+const superEditor_es = require("./super-editor.es-CDiTp9Fe.cjs");
 const blankDocx = require("./blank-docx-DfW3Eeh2.cjs");
 const eventemitter3 = require("./eventemitter3-CFCpOk3d.cjs");
 const provider = require("@hocuspocus/provider");
@@ -46,13 +46,16 @@ const comments_module_events = {
   CHANGE_ACCEPTED: "change-accepted",
   CHANGE_REJECTED: "change-rejected"
 };
+function hasV8CaptureStackTrace(error) {
+  return typeof error.captureStackTrace === "function";
+}
 class FileObjectError extends Error {
   constructor(message, cause) {
     super(message);
     this.cause = cause;
     this.name = "FileObjectError";
-    if (typeof Error.captureStackTrace === "function") {
-      Error.captureStackTrace(this, FileObjectError);
+    if (hasV8CaptureStackTrace(Error)) {
+      Error.captureStackTrace(this, this.constructor);
     }
   }
 }
@@ -127,7 +130,7 @@ function getCrypto() {
     return void 0;
   }
   const cryptoObj = globalThis.crypto ?? globalThis.msCrypto;
-  if (cryptoObj?.getRandomValues) {
+  if (cryptoObj && typeof cryptoObj.getRandomValues === "function") {
     return cryptoObj;
   }
   return void 0;
@@ -3661,6 +3664,9 @@ function useDocument(params2, superdocConfig) {
   const editorRef = vue.shallowRef(null);
   const setEditor = (ref) => editorRef.value = ref;
   const getEditor = () => editorRef.value;
+  const presentationEditorRef = vue.shallowRef(null);
+  const setPresentationEditor = (ref) => presentationEditorRef.value = ref;
+  const getPresentationEditor = () => presentationEditorRef.value;
   function initDocumentType({ type: type2, data: data2 }) {
     if (data2?.type) return data2.type;
     if (type2) return type2 in documentTypes ? documentTypes[type2] : null;
@@ -3715,6 +3721,8 @@ function useDocument(params2, superdocConfig) {
     // Actions
     setEditor,
     getEditor,
+    setPresentationEditor,
+    getPresentationEditor,
     removeComments,
     restoreComments,
     removeConversation
@@ -17219,7 +17227,7 @@ const _sfc_main = {
   __name: "SuperDoc",
   emits: ["selection-update"],
   setup(__props, { emit: __emit }) {
-    const PdfViewer = vue.defineAsyncComponent(() => Promise.resolve().then(() => require("./PdfViewer-C4ilYw1S.cjs")));
+    const PdfViewer = vue.defineAsyncComponent(() => Promise.resolve().then(() => require("./PdfViewer-CxHbcDGx.cjs")));
     const superdocStore = useSuperdocStore();
     const commentsStore = useCommentsStore();
     const {
@@ -17335,6 +17343,18 @@ const _sfc_main = {
       proxy.$superdoc.broadcastEditorCreate(editor);
       initAiLayer(true);
     };
+    const onEditorReady = ({ editor, presentationEditor }) => {
+      if (!presentationEditor) return;
+      const { documentId } = editor.options;
+      const doc = getDocument(documentId);
+      if (doc) {
+        doc.setPresentationEditor(presentationEditor);
+      }
+      presentationEditor.setContextMenuDisabled?.(proxy.$superdoc.config.disableContextMenu);
+      presentationEditor.onTelemetry((telemetryPayload) => {
+        proxy.$superdoc.captureLayoutPipelineEvent(telemetryPayload);
+      });
+    };
     const onEditorDestroy = () => {
       proxy.$superdoc.broadcastEditorDestroy();
     };
@@ -17356,10 +17376,52 @@ const _sfc_main = {
       const { $from, $to } = transaction.selection;
       if ($from.pos === $to.pos) updateSelection({ x: null, y: null, source: "super-editor" });
       if (!layers.value) return;
+      const presentation = superEditor_es.PresentationEditor.getInstance(documentId);
+      if (!presentation) {
+        const { view: view2 } = editor;
+        const fromCoords2 = view2.coordsAtPos($from.pos);
+        const toCoords2 = view2.coordsAtPos($to.pos);
+        const layerBounds2 = layers.value.getBoundingClientRect();
+        const HEADER_HEIGHT2 = 96;
+        const top2 = Math.max(HEADER_HEIGHT2, fromCoords2.top - layerBounds2.top);
+        const bottom2 = toCoords2.bottom - layerBounds2.top;
+        const selectionBounds2 = {
+          top: top2,
+          left: fromCoords2.left,
+          right: toCoords2.left,
+          bottom: bottom2
+        };
+        const selection2 = useSelection({
+          selectionBounds: selectionBounds2,
+          page: 1,
+          documentId,
+          source: "super-editor"
+        });
+        handleSelectionChange(selection2);
+        return;
+      }
+      const layoutRange = presentation.getSelectionBounds($from.pos, $to.pos, layers.value);
+      if (layoutRange) {
+        const { bounds, pageIndex } = layoutRange;
+        updateSelection({
+          startX: bounds.left,
+          startY: bounds.top,
+          x: bounds.right,
+          y: bounds.bottom,
+          source: "super-editor"
+        });
+        const selection2 = useSelection({
+          selectionBounds: { ...bounds },
+          page: pageIndex + 1,
+          documentId,
+          source: "super-editor"
+        });
+        handleSelectionChange(selection2);
+        return;
+      }
       const { view } = editor;
       const fromCoords = view.coordsAtPos($from.pos);
       const toCoords = view.coordsAtPos($to.pos);
-      const { pageMargins } = editor.getPageStyles();
       const layerBounds = layers.value.getBoundingClientRect();
       const HEADER_HEIGHT = 96;
       const top = Math.max(HEADER_HEIGHT, fromCoords.top - layerBounds.top);
@@ -17398,9 +17460,9 @@ const _sfc_main = {
     };
     const editorOptions = (doc) => {
       const onFontsResolvedFn = proxy.$superdoc.listeners?.("fonts-resolved")?.length > 0 ? proxy.$superdoc.listeners("fonts-resolved")[0] : null;
+      const useLayoutEngine = proxy.$superdoc.config.useLayoutEngine !== false;
       const options = {
         isDebug: proxy.$superdoc.config.isDebug || false,
-        pagination: proxy.$superdoc.config.pagination,
         documentId: doc.id,
         user: proxy.$superdoc.user,
         users: proxy.$superdoc.users,
@@ -17415,6 +17477,7 @@ const _sfc_main = {
         isCommentsEnabled: Boolean(commentsModuleConfig.value),
         isAiEnabled: proxy.$superdoc.config.modules?.ai,
         slashMenuConfig: proxy.$superdoc.config.modules?.slashMenu,
+        editorCtor: useLayoutEngine ? superEditor_es.PresentationEditor : void 0,
         onBeforeCreate: onEditorBeforeCreate,
         onCreate: onEditorCreate,
         onDestroy: onEditorDestroy,
@@ -17427,7 +17490,7 @@ const _sfc_main = {
         onException: onEditorException,
         onCommentsLoaded,
         onCommentsUpdate: onEditorCommentsUpdate,
-        onCommentLocationsUpdate: onEditorCommentLocationsUpdate,
+        onCommentLocationsUpdate: (payload) => onEditorCommentLocationsUpdate(doc, payload),
         onListDefinitionsChange: onEditorListdefinitionsChange,
         onFontsResolved: onFontsResolvedFn,
         onTransaction: onEditorTransaction,
@@ -17440,6 +17503,11 @@ const _sfc_main = {
         suppressDefaultDocxStyles: proxy.$superdoc.config.suppressDefaultDocxStyles,
         disableContextMenu: proxy.$superdoc.config.disableContextMenu,
         jsonOverride: proxy.$superdoc.config.jsonOverride,
+        layoutEngineOptions: useLayoutEngine ? {
+          ...proxy.$superdoc.config.layoutEngineOptions || {},
+          debugLabel: proxy.$superdoc.config.layoutEngineOptions?.debugLabel ?? doc.name ?? doc.id,
+          zoom: (activeZoom.value ?? 100) / 100
+        } : void 0,
         permissionResolver: (payload = {}) => proxy.$superdoc.canPerformPermission({
           role: proxy.$superdoc.config.role,
           isInternal: proxy.$superdoc.config.isInternal,
@@ -17448,10 +17516,16 @@ const _sfc_main = {
       };
       return options;
     };
-    const onEditorCommentLocationsUpdate = ({ allCommentIds: activeThreadId, allCommentPositions }) => {
+    const onEditorCommentLocationsUpdate = (doc, { allCommentIds: activeThreadId, allCommentPositions } = {}) => {
       const commentsConfig = proxy.$superdoc.config.modules?.comments;
       if (!commentsConfig || commentsConfig === false) return;
-      handleEditorLocationsUpdate(allCommentPositions, activeThreadId);
+      const presentation = superEditor_es.PresentationEditor.getInstance(doc.id);
+      if (!presentation) {
+        handleEditorLocationsUpdate(allCommentPositions, activeThreadId);
+        return;
+      }
+      const mappedPositions = presentation.getCommentBounds(allCommentPositions, layers.value);
+      handleEditorLocationsUpdate(mappedPositions, activeThreadId);
     };
     const onEditorCommentsUpdate = (params2 = {}) => {
       let { activeCommentId, type, comment: commentPayload } = params2;
@@ -17579,13 +17653,13 @@ const _sfc_main = {
       selectionPosition.value = null;
     };
     const updateSelection = ({ startX, startY, x, y, source }) => {
-      const hasStartCoords = startX || startY;
-      const hasEndCoords = x || y;
+      const hasStartCoords = typeof startX === "number" || typeof startY === "number";
+      const hasEndCoords = typeof x === "number" || typeof y === "number";
       if (!hasStartCoords && !hasEndCoords) {
         return selectionPosition.value = null;
       }
       if (!selectionPosition.value) {
-        if (startY <= 0 || startX <= 0) return;
+        if (startY == null || startX == null) return;
         selectionPosition.value = {
           top: startY,
           left: startX,
@@ -17596,19 +17670,23 @@ const _sfc_main = {
           source
         };
       }
-      if (startX) selectionPosition.value.startX = startX;
-      if (startY) selectionPosition.value.startY = startY;
-      const selectionTop = selectionPosition.value.startY;
-      if (y < selectionTop) {
-        selectionPosition.value.top = y;
-      } else {
-        selectionPosition.value.bottom = y;
+      if (typeof startX === "number") selectionPosition.value.startX = startX;
+      if (typeof startY === "number") selectionPosition.value.startY = startY;
+      if (typeof y === "number") {
+        const selectionTop = selectionPosition.value.startY;
+        if (y < selectionTop) {
+          selectionPosition.value.top = y;
+        } else {
+          selectionPosition.value.bottom = y;
+        }
       }
-      const selectionLeft = selectionPosition.value.startX;
-      if (x < selectionLeft) {
-        selectionPosition.value.left = x;
-      } else {
-        selectionPosition.value.right = x;
+      if (typeof x === "number") {
+        const selectionLeft = selectionPosition.value.startX;
+        if (x < selectionLeft) {
+          selectionPosition.value.left = x;
+        } else {
+          selectionPosition.value.right = x;
+        }
       }
     };
     const handleSelectionStart = (e) => {
@@ -17658,6 +17736,14 @@ const _sfc_main = {
       isDragging.value = true;
       handleSelectionStart(e);
     };
+    vue.watch(
+      () => activeZoom.value,
+      (zoom) => {
+        if (proxy.$superdoc.config.useLayoutEngine !== false) {
+          superEditor_es.PresentationEditor.setGlobalZoom((zoom ?? 100) / 100);
+        }
+      }
+    );
     vue.watch(getFloatingComments, () => {
       hasInitializedLocations.value = false;
       vue.nextTick(() => {
@@ -17762,6 +17848,7 @@ const _sfc_main = {
                       state: doc.state,
                       "document-id": doc.id,
                       options: editorOptions(doc),
+                      onEditorReady,
                       onPageMarginsChange: ($event) => handleSuperEditorPageMarginsChange(doc, $event)
                     }, null, 8, ["file-source", "state", "document-id", "options", "onPageMarginsChange"])) : vue.createCommentVNode("", true)
                   ]),
@@ -17813,7 +17900,7 @@ const _sfc_main = {
     };
   }
 };
-const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-29e35f23"]]);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3fafc837"]]);
 const createSuperdocVueApp = () => {
   const app = vue.createApp(App);
   const pinia = createPinia();
@@ -17916,8 +18003,6 @@ class SuperDoc extends eventemitter3.EventEmitter {
     // Optional: Override for permission checks
     title: "SuperDoc",
     conversations: [],
-    pagination: false,
-    // Optional: Whether to show pagination in SuperEditors
     isInternal: false,
     // toolbar config
     toolbar: null,
@@ -17950,7 +18035,9 @@ class SuperDoc extends eventemitter3.EventEmitter {
     // async (file) => url;
     handleImageUpload: null,
     // Disable context menus (slash and right-click) globally
-    disableContextMenu: false
+    disableContextMenu: false,
+    // Internal: toggle layout-engine-powered PresentationEditor in dev shells
+    useLayoutEngine: true
   };
   /**
    * @param {Config} config
@@ -17976,6 +18063,16 @@ class SuperDoc extends eventemitter3.EventEmitter {
         this.config.user.name = DEFAULT_USER.name;
       }
     }
+    if (!this.config.layoutEngineOptions) {
+      this.config.layoutEngineOptions = {};
+    }
+    if (!this.config.layoutEngineOptions.trackedChanges) {
+      const isViewingMode = this.config.documentMode === "viewing";
+      this.config.layoutEngineOptions.trackedChanges = {
+        mode: isViewingMode ? "final" : "review",
+        enabled: !isViewingMode
+      };
+    }
     this.config.modules = this.config.modules || {};
     if (!Object.prototype.hasOwnProperty.call(this.config.modules, "comments")) {
       this.config.modules.comments = {};
@@ -17983,7 +18080,7 @@ class SuperDoc extends eventemitter3.EventEmitter {
     this.config.colors = shuffleArray(this.config.colors);
     this.userColorMap = /* @__PURE__ */ new Map();
     this.colorIndex = 0;
-    this.version = "1.0.0-beta.1";
+    this.version = "1.0.0-beta.3";
     this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
     this.superdocId = config.superdocId || uuid.v4();
     this.colors = this.config.colors;
@@ -18178,19 +18275,6 @@ class SuperDoc extends eventemitter3.EventEmitter {
   removeSharedUser(email) {
     this.users = this.users.filter((u) => u.email !== email);
   }
-  /**
-   * Initialize telemetry service.
-   */
-  // eslint-disable-next-line no-unused-private-class-members
-  #initTelemetry() {
-    this.telemetry = new Telemetry({
-      enabled: this.config.telemetry?.enabled ?? true,
-      licenseKey: this.config.telemetry?.licenseKey,
-      endpoint: this.config.telemetry?.endpoint,
-      superdocId: this.superdocId,
-      superdocVersion: this.version
-    });
-  }
   /**
    * Triggered when there is an error in the content
    * @param {Object} param0
@@ -18276,19 +18360,6 @@ class SuperDoc extends eventemitter3.EventEmitter {
       doc.rulers = this.config.rulers;
     });
   }
-  /**
-   * Toggle pagination for SuperEditors
-   * @returns {void}
-   */
-  togglePagination() {
-    this.config.pagination = !this.config.pagination;
-    this.superdocStore.documents.forEach((doc) => {
-      const editor = doc.getEditor();
-      if (editor) {
-        editor.commands.togglePagination();
-      }
-    });
-  }
   /**
    * Determine whether the current configuration allows a given permission.
    * Used by downstream consumers (toolbar, context menu, commands) to keep
@@ -18333,7 +18404,6 @@ class SuperDoc extends eventemitter3.EventEmitter {
       isDev: this.isDev || false,
       toolbarGroups: this.config.modules?.toolbar?.groups || this.config.toolbarGroups,
       role: this.config.role,
-      pagination: this.config.pagination,
       icons: this.config.modules?.toolbar?.icons || this.config.toolbarIcons,
       texts: this.config.modules?.toolbar?.texts || this.config.toolbarTexts,
       fonts: this.config.modules?.toolbar?.fonts || null,
@@ -18374,6 +18444,26 @@ class SuperDoc extends eventemitter3.EventEmitter {
       if (this.config.onCommentsListChange) this.config.onCommentsListChange({ isRendered: false });
     }
   }
+  /**
+   * Toggle the custom context menu globally.
+   * Updates both flow editors and PresentationEditor instances so downstream listeners can short-circuit early.
+   * @param {boolean} disabled
+   */
+  setDisableContextMenu(disabled = true) {
+    const nextValue = Boolean(disabled);
+    if (this.config.disableContextMenu === nextValue) return;
+    this.config.disableContextMenu = nextValue;
+    this.superdocStore?.documents?.forEach((doc) => {
+      const presentationEditor = doc.getPresentationEditor?.();
+      if (presentationEditor?.setContextMenuDisabled) {
+        presentationEditor.setContextMenuDisabled(nextValue);
+      }
+      const editor = doc.getEditor?.();
+      if (editor?.setOptions) {
+        editor.setOptions({ disableContextMenu: nextValue });
+      }
+    });
+  }
   /**
    * Triggered when a toolbar command is executed
    * @param {Object} param0
@@ -18403,16 +18493,52 @@ class SuperDoc extends eventemitter3.EventEmitter {
     };
     if (types[type]) types[type]();
   }
+  /**
+   * Set the document mode on a document's editor (PresentationEditor or Editor).
+   * Tries PresentationEditor first, falls back to Editor for backward compatibility.
+   * @param {Object} doc - The document object
+   * @param {string} mode - The document mode ('editing', 'viewing', 'suggesting')
+   */
+  #applyDocumentMode(doc, mode) {
+    const presentationEditor = typeof doc.getPresentationEditor === "function" ? doc.getPresentationEditor() : null;
+    if (presentationEditor) {
+      presentationEditor.setDocumentMode(mode);
+      return;
+    }
+    const editor = typeof doc.getEditor === "function" ? doc.getEditor() : null;
+    if (editor) {
+      editor.setDocumentMode(mode);
+    }
+  }
+  /**
+   * Force PresentationEditor instances to render a specific tracked-changes mode
+   * or disable tracked-change metadata entirely.
+   *
+   * @param {{ mode?: 'review' | 'original' | 'final' | 'off', enabled?: boolean }} [preferences]
+   */
+  setTrackedChangesPreferences(preferences) {
+    const normalized = preferences && Object.keys(preferences).length ? { ...preferences } : void 0;
+    if (!this.config.layoutEngineOptions) {
+      this.config.layoutEngineOptions = {};
+    }
+    this.config.layoutEngineOptions.trackedChanges = normalized;
+    this.superdocStore?.documents?.forEach((doc) => {
+      const presentationEditor = typeof doc.getPresentationEditor === "function" ? doc.getPresentationEditor() : null;
+      if (presentationEditor?.setTrackedChangesOverrides) {
+        presentationEditor.setTrackedChangesOverrides(normalized);
+      }
+    });
+  }
   #setModeEditing() {
     if (this.config.role !== "editor") return this.#setModeSuggesting();
     if (this.superdocStore.documents.length > 0) {
       const firstEditor = this.superdocStore.documents[0]?.getEditor();
       if (firstEditor) this.setActiveEditor(firstEditor);
     }
+    this.setTrackedChangesPreferences({ mode: "review", enabled: true });
     this.superdocStore.documents.forEach((doc) => {
       doc.restoreComments();
-      const editor = doc.getEditor();
-      if (editor) editor.setDocumentMode("editing");
+      this.#applyDocumentMode(doc, "editing");
     });
     if (this.toolbar) {
       this.toolbar.documentMode = "editing";
@@ -18425,10 +18551,10 @@ class SuperDoc extends eventemitter3.EventEmitter {
       const firstEditor = this.superdocStore.documents[0]?.getEditor();
       if (firstEditor) this.setActiveEditor(firstEditor);
     }
+    this.setTrackedChangesPreferences({ mode: "review", enabled: true });
     this.superdocStore.documents.forEach((doc) => {
       doc.restoreComments();
-      const editor = doc.getEditor();
-      if (editor) editor.setDocumentMode("suggesting");
+      this.#applyDocumentMode(doc, "suggesting");
     });
     if (this.toolbar) {
       this.toolbar.documentMode = "suggesting";
@@ -18437,10 +18563,10 @@ class SuperDoc extends eventemitter3.EventEmitter {
   }
   #setModeViewing() {
     this.toolbar.activeEditor = null;
+    this.setTrackedChangesPreferences({ mode: "final", enabled: false });
     this.superdocStore.documents.forEach((doc) => {
       doc.removeComments();
-      const editor = doc.getEditor();
-      if (editor) editor.setDocumentMode("viewing");
+      this.#applyDocumentMode(doc, "viewing");
     });
     if (this.toolbar) {
       this.toolbar.documentMode = "viewing";
@@ -18668,6 +18794,20 @@ class SuperDoc extends eventemitter3.EventEmitter {
     this.activeEditor.setHighContrastMode(isHighContrast);
     this.highContrastModeStore.setHighContrastMode(isHighContrast);
   }
+  /**
+   * Capture layout pipeline events from PresentationEditor
+   * Forwards metrics and errors to host callbacks
+   * @param {Object} payload - Event payload from PresentationEditor.onTelemetry
+   * @param {string} payload.type - Event type: 'layout' or 'error'
+   * @param {Object} payload.data - Event data (metrics for layout, error details for error)
+   * @returns {void}
+   */
+  captureLayoutPipelineEvent(payload) {
+    this.emit("layout-pipeline", payload);
+    if (typeof this.config.onLayoutPipelineEvent === "function") {
+      this.config.onLayoutPipelineEvent(payload);
+    }
+  }
 }
 exports.DOCX = DOCX;
 exports.HTML = HTML;