@harbour-enterprises/superdoc 1.3.0-next.8 → 1.3.0

package/dist/chunks/{index-DoZiv8EQ.es.js → index-BEA-hKnM.es.js}

@@ -1,6 +1,6 @@
 import { B as Buffer$2 } from "./jszip-B1fkPkPJ.es.js";
 import { t as twipsToInches, i as inchesToTwips, p as ptToTwips, l as linesToTwips, a as twipsToLines, b as pixelsToTwips, h as halfPointToPoints, c as twipsToPixels$2, d as convertSizeToCSS, e as inchesToPixels } from "./helpers-C8e9wR5l.es.js";
-import { g as generateDocxRandomId, T as TextSelection$1, o as objectIncludes, w as wrapTextsInRuns, D as DOMParser$1, c as createDocFromMarkdown, a as createDocFromHTML, b as chainableEditorState, d as convertMarkdownToHTML, f as findParentNode, e as findParentNodeClosestToPos, h as generateRandom32BitHex, i as generateRandomSigned32BitIntStrId, P as PluginKey, j as Plugin, M as Mapping, N as NodeSelection, k as Selection, l as Slice, m as DOMSerializer, F as Fragment, n as Mark$1, p as dropPoint, A as AllSelection, q as Schema$1, s as canSplit, t as resolveRunProperties, u as encodeMarksFromRPr, v as liftTarget, x as canJoin, y as joinPoint, z as replaceStep$1, R as ReplaceAroundStep$1, B as htmlHandler, C as ReplaceStep, E as getResolvedParagraphProperties, G as changeListLevel, H as isList$1, I as updateNumberingProperties, L as ListHelpers, J as inputRulesPlugin, K as TrackDeleteMarkName$1, O as TrackInsertMarkName$1, Q as TrackFormatMarkName$1, U as AddMarkStep, V as RemoveMarkStep, W as CommandService, S as SuperConverter, X as EditorState, Y as unflattenListsInHtml, Z as SelectionRange, _ as Transform, $ as createOoxmlResolver, a0 as translator, a1 as translator$1, a2 as resolveDocxFontFamily, a3 as _getReferencedTableStyles, a4 as decodeRPrFromMarks, a5 as calculateResolvedParagraphProperties, a6 as encodeCSSFromPPr, a7 as encodeCSSFromRPr, a8 as generateOrderedListIndex, a9 as docxNumberingHelpers, aa as InputRule, ab as insertNewRelationship, ac as kebabCase$1, ad as getUnderlineCssString } from "./SuperConverter-DwLhA2mM.es.js";
+import { g as generateDocxRandomId, T as TextSelection$1, o as objectIncludes, w as wrapTextsInRuns, D as DOMParser$1, c as createDocFromMarkdown, a as createDocFromHTML, b as chainableEditorState, d as convertMarkdownToHTML, f as findParentNode, e as findParentNodeClosestToPos, h as generateRandom32BitHex, i as generateRandomSigned32BitIntStrId, P as PluginKey, j as Plugin, M as Mapping, N as NodeSelection, k as Selection, l as Slice, m as DOMSerializer, F as Fragment, n as Mark$1, p as dropPoint, A as AllSelection, q as Schema$1, s as canSplit, t as resolveRunProperties, u as encodeMarksFromRPr, v as liftTarget, x as canJoin, y as joinPoint, z as replaceStep$1, R as ReplaceAroundStep$1, B as htmlHandler, C as ReplaceStep, E as getResolvedParagraphProperties, G as changeListLevel, H as isList$1, I as updateNumberingProperties, L as ListHelpers, J as inputRulesPlugin, K as TrackDeleteMarkName$1, O as TrackInsertMarkName$1, Q as TrackFormatMarkName$1, U as AddMarkStep, V as RemoveMarkStep, W as CommandService, S as SuperConverter, X as EditorState, Y as unflattenListsInHtml, Z as SelectionRange, _ as Transform, $ as createOoxmlResolver, a0 as translator, a1 as translator$1, a2 as resolveDocxFontFamily, a3 as combineIndentProperties, a4 as _getReferencedTableStyles, a5 as decodeRPrFromMarks, a6 as calculateResolvedParagraphProperties, a7 as encodeCSSFromPPr, a8 as encodeCSSFromRPr, a9 as generateOrderedListIndex, aa as docxNumberingHelpers, ab as InputRule, ac as insertNewRelationship, ad as kebabCase$1, ae as getUnderlineCssString } from "./SuperConverter-z20LprsX.es.js";
 import { p as process$1, r as ref, C as global$1, c as computed, E as createElementBlock, F as Fragment$1, S as renderList, O as withModifiers, G as openBlock, P as normalizeClass, M as createCommentVNode, H as toDisplayString, K as createBaseVNode, U as createApp, f as onMounted, X as onUnmounted, R as withDirectives, v as unref, Y as vModelText, y as nextTick, L as normalizeStyle, u as watch, Z as withKeys, _ as createTextVNode, I as createVNode, h, $ as readonly, s as getCurrentInstance, o as onBeforeUnmount, j as reactive, b as onBeforeMount, i as inject, a0 as onActivated, a1 as onDeactivated, a2 as Comment, d as defineComponent, a as provide, g as Teleport, t as toRef, a3 as renderSlot, a4 as isVNode, D as shallowRef, w as watchEffect, T as Transition, a5 as mergeProps, a6 as vShow, a7 as cloneVNode, a8 as Text$2, m as markRaw, N as createBlock, J as withCtx, a9 as useCssVars, V as resolveDynamicComponent, aa as normalizeProps, ab as guardReactiveProps } from "./vue-BnBKJwCW.es.js";
 import "./jszip.min-DCl8qkFO.es.js";
 import { E as EventEmitter$1 } from "./eventemitter3-CwrdEv8r.es.js";
@@ -10936,6 +10936,105 @@ const setSectionHeaderFooterAtSelection = ({ headerInches, footerInches } = {})
   tr.setNodeMarkup(pos, void 0, nextAttrs, node.marks);
   return true;
 };
+function findGoverningSectPrParagraph(doc2, selectionPos) {
+  const candidates = [];
+  doc2.descendants((node, nodePos) => {
+    if (node.type?.name === "paragraph" && node.attrs?.paragraphProperties?.sectPr) {
+      candidates.push({ node, pos: nodePos });
+    }
+  });
+  if (!candidates.length) return null;
+  const inside = candidates.find((c2) => selectionPos >= c2.pos && selectionPos < c2.pos + c2.node.nodeSize);
+  if (inside) return inside;
+  const atOrAfter = candidates.find((c2) => c2.pos >= selectionPos);
+  return atOrAfter ?? candidates[candidates.length - 1];
+}
+const setSectionPageMarginsAtSelection = ({ topInches, rightInches, bottomInches, leftInches } = {}) => ({ tr, state, editor }) => {
+  if (!state || !editor) {
+    console.warn("[setSectionPageMarginsAtSelection] Missing state or editor");
+    return false;
+  }
+  const hasTop = typeof topInches === "number";
+  const hasRight = typeof rightInches === "number";
+  const hasBottom = typeof bottomInches === "number";
+  const hasLeft = typeof leftInches === "number";
+  if (!hasTop && !hasRight && !hasBottom && !hasLeft) {
+    console.warn("[setSectionPageMarginsAtSelection] No margin values provided");
+    return false;
+  }
+  if (hasTop && topInches < 0 || hasRight && rightInches < 0 || hasBottom && bottomInches < 0 || hasLeft && leftInches < 0) {
+    console.warn("[setSectionPageMarginsAtSelection] Margin values must be >= 0");
+    return false;
+  }
+  const updates = {};
+  if (hasTop) updates.topInches = topInches;
+  if (hasRight) updates.rightInches = rightInches;
+  if (hasBottom) updates.bottomInches = bottomInches;
+  if (hasLeft) updates.leftInches = leftInches;
+  const { from: from3 } = state.selection;
+  const governing = findGoverningSectPrParagraph(state.doc, from3);
+  if (governing) {
+    const { node, pos } = governing;
+    const paraProps = node.attrs?.paragraphProperties || null;
+    const existingSectPr = paraProps?.sectPr || null;
+    if (!existingSectPr) {
+      console.warn("[setSectionPageMarginsAtSelection] Paragraph found but has no sectPr");
+      return false;
+    }
+    const sectPr2 = JSON.parse(JSON.stringify(existingSectPr));
+    try {
+      updateSectionMargins({ type: "sectPr", sectPr: sectPr2 }, updates);
+    } catch (err) {
+      console.error("[setSectionPageMarginsAtSelection] Failed to update sectPr:", err);
+      return false;
+    }
+    const resolved = getSectPrMargins(sectPr2);
+    const normalizedSectionMargins = {
+      top: resolved.top ?? null,
+      right: resolved.right ?? null,
+      bottom: resolved.bottom ?? null,
+      left: resolved.left ?? null,
+      header: resolved.header ?? null,
+      footer: resolved.footer ?? null
+    };
+    const newParagraphProperties = { ...paraProps || {}, sectPr: sectPr2 };
+    const nextAttrs = {
+      ...node.attrs,
+      paragraphProperties: newParagraphProperties,
+      sectionMargins: normalizedSectionMargins
+    };
+    tr.setNodeMarkup(pos, void 0, nextAttrs, node.marks);
+    tr.setMeta("forceUpdatePagination", true);
+    return true;
+  }
+  const docAttrs = state.doc.attrs ?? {};
+  const converter = editor.converter ?? null;
+  const baseBodySectPr = docAttrs.bodySectPr || converter?.bodySectPr || null;
+  const sectPr = baseBodySectPr != null ? JSON.parse(JSON.stringify(baseBodySectPr)) : { type: "element", name: "w:sectPr", elements: [] };
+  try {
+    updateSectionMargins({ type: "sectPr", sectPr }, updates);
+  } catch (err) {
+    console.error("[setSectionPageMarginsAtSelection] Failed to update sectPr:", err);
+    return false;
+  }
+  if (converter) {
+    converter.bodySectPr = sectPr;
+    if (!converter.pageStyles) converter.pageStyles = {};
+    if (!converter.pageStyles.pageMargins) converter.pageStyles.pageMargins = {};
+    const pageMargins = converter.pageStyles.pageMargins;
+    const resolved = getSectPrMargins(sectPr);
+    if (resolved.top != null) pageMargins.top = resolved.top;
+    if (resolved.right != null) pageMargins.right = resolved.right;
+    if (resolved.bottom != null) pageMargins.bottom = resolved.bottom;
+    if (resolved.left != null) pageMargins.left = resolved.left;
+    if (resolved.header != null) pageMargins.header = resolved.header;
+    if (resolved.footer != null) pageMargins.footer = resolved.footer;
+  }
+  const nextDocAttrs = { ...docAttrs, bodySectPr: sectPr };
+  tr.setNodeMarkup(0, void 0, nextDocAttrs);
+  tr.setMeta("forceUpdatePagination", true);
+  return true;
+};
 const insertSectionBreakAtSelection = ({ headerInches, footerInches } = {}) => ({ tr, state, editor }) => {
   if (!state || !editor) {
     console.warn("[insertSectionBreakAtSelection] Missing state or editor");
@@ -11467,6 +11566,7 @@ const commands$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   setMeta,
   setNode,
   setSectionHeaderFooterAtSelection,
+  setSectionPageMarginsAtSelection,
   setTextIndentation,
   setTextSelection,
   skipTab,
@@ -13202,8 +13302,8 @@ const CommentsPlugin = Extension.create({
             }
             if (!onlyActiveThreadChanged) {
               const positionsChanged = hasPositionsChanged(prevAllCommentPositions, allCommentPositions);
-              const hasComments = Object.keys(allCommentPositions).length > 0;
-              const shouldEmitPositions = positionsChanged || !hasEverEmitted && hasComments;
+              const hasComments2 = Object.keys(allCommentPositions).length > 0;
+              const shouldEmitPositions = positionsChanged || !hasEverEmitted && hasComments2;
               if (shouldEmitPositions) {
                 prevAllCommentPositions = allCommentPositions;
                 hasEverEmitted = true;
@@ -15334,7 +15434,7 @@ const canUseDOM = () => {
     return false;
   }
 };
-const summaryVersion = "1.3.0-next.8";
+const summaryVersion = "1.3.0";
 const nodeKeys = ["group", "content", "marks", "inline", "atom", "defining", "code", "tableRole", "summary"];
 const markKeys = ["group", "inclusive", "excludes", "spanning", "code"];
 function mapAttributes(attrs) {
@@ -17336,9 +17436,8 @@ class Editor extends EventEmitter {
     try {
       const jsonObj = json;
       const attrs = jsonObj.attrs;
-      const hasBody = attrs && "bodySectPr" in attrs;
       const converter = this.converter;
-      if (!hasBody && converter && converter.bodySectPr) {
+      if (converter && converter.bodySectPr) {
         jsonObj.attrs = attrs || {};
         jsonObj.attrs.bodySectPr = converter.bodySectPr;
       }
@@ -17967,7 +18066,7 @@ class Editor extends EventEmitter {
    * Process collaboration migrations
    */
   processCollaborationMigrations() {
-    console.debug("[checkVersionMigrations] Current editor version", "1.3.0-next.8");
+    console.debug("[checkVersionMigrations] Current editor version", "1.3.0");
     if (!this.options.ydoc) return;
     const metaMap = this.options.ydoc.getMap("meta");
     let docVersion = metaMap.get("version");
@@ -28198,7 +28297,9 @@ const deriveBlockVersion = (block) => {
         textRun.pmEnd ?? "",
         textRun.token ?? "",
         // Tracked changes - force re-render when added or removed tracked change
-        textRun.trackedChange ? 1 : 0
+        textRun.trackedChange ? 1 : 0,
+        // Comment annotations - force re-render when comments are enabled/disabled
+        textRun.comments?.length ?? 0
       ].join(",");
     }).join("|");
     const attrs = block.attrs;
@@ -34070,6 +34171,9 @@ const hashCellBorders = (borders) => {
   if (borders.left) parts.push(`l:[${hashBorderSpec(borders.left)}]`);
   return parts.join(";");
 };
+function hasComments$1(run) {
+  return "comments" in run && Array.isArray(run.comments) && run.comments.length > 0;
+}
 const MAX_CACHE_SIZE$1 = 1e4;
 const BYTES_PER_ENTRY_ESTIMATE = 5e3;
 const hashParagraphFrame = (frame) => {
@@ -34137,6 +34241,7 @@ const hashRuns = (block) => {
               fontFamily2 ? `ff:${fontFamily2}` : "",
               highlight ? `hl:${highlight}` : ""
             ].join("");
+            const commentHash = hasComments$1(run) ? run.comments.map((c2) => `${c2.commentId ?? ""}:${c2.internal ? "1" : "0"}`).join("|") : "";
             let trackedKey = "";
             if (hasTrackedChange(run)) {
               const tc = run.trackedChange;
@@ -34144,7 +34249,8 @@ const hashRuns = (block) => {
               const afterHash = tc.after ? JSON.stringify(tc.after) : "";
               trackedKey = `|tc:${tc.kind ?? ""}:${tc.id ?? ""}:${tc.author ?? ""}:${tc.date ?? ""}:${beforeHash}:${afterHash}`;
             }
-            cellHashes.push(`${text}:${marks}${trackedKey}`);
+            const commentKey = commentHash ? `|cm:${commentHash}` : "";
+            cellHashes.push(`${text}:${marks}${trackedKey}${commentKey}`);
           }
           if (paragraphBlock.attrs) {
             const attrs = paragraphBlock.attrs;
@@ -35275,6 +35381,9 @@ function remeasureParagraph(block, maxWidth, firstLineIndent = 0) {
   const totalHeight = lines.reduce((s2, l) => s2 + l.lineHeight, 0);
   return { kind: "paragraph", lines, totalHeight };
 }
+function hasComments(run) {
+  return "comments" in run && Array.isArray(run.comments) && run.comments.length > 0;
+}
 const computeDirtyRegions = (previous, next) => {
   const prevMap = new Map(previous.map((block, index2) => [block.id, { block, index: index2 }]));
   const nextMap = new Map(next.map((block, index2) => [block.id, { block, index: index2 }]));
@@ -35335,6 +35444,10 @@ const getTrackedChangeKey = (run) => {
   }
   return "";
 };
+const getCommentKey = (run) => {
+  if (!hasComments(run)) return "";
+  return run.comments.map((c2) => `${c2.commentId ?? ""}:${c2.internal ? "1" : "0"}`).join("|");
+};
 const paragraphSpacingEqual = (a, b) => {
   if (a === b) return true;
   if (!a || !b) return !a && !b;
@@ -35416,7 +35529,7 @@ const paragraphBlocksEqual = (a, b) => {
   for (let i = 0; i < a.runs.length; i += 1) {
     const runA = a.runs[i];
     const runB = b.runs[i];
-    if (("src" in runA || runA.kind === "lineBreak" || runA.kind === "break" || runA.kind === "fieldAnnotation" ? "" : runA.text) !== ("src" in runB || runB.kind === "lineBreak" || runB.kind === "break" || runB.kind === "fieldAnnotation" ? "" : runB.text) || ("bold" in runA ? runA.bold : false) !== ("bold" in runB ? runB.bold : false) || ("italic" in runA ? runA.italic : false) !== ("italic" in runB ? runB.italic : false) || ("color" in runA ? runA.color : void 0) !== ("color" in runB ? runB.color : void 0) || ("fontSize" in runA ? runA.fontSize : void 0) !== ("fontSize" in runB ? runB.fontSize : void 0) || ("fontFamily" in runA ? runA.fontFamily : void 0) !== ("fontFamily" in runB ? runB.fontFamily : void 0) || ("highlight" in runA ? runA.highlight : void 0) !== ("highlight" in runB ? runB.highlight : void 0) || getTrackedChangeKey(runA) !== getTrackedChangeKey(runB)) {
+    if (("src" in runA || runA.kind === "lineBreak" || runA.kind === "break" || runA.kind === "fieldAnnotation" ? "" : runA.text) !== ("src" in runB || runB.kind === "lineBreak" || runB.kind === "break" || runB.kind === "fieldAnnotation" ? "" : runB.text) || ("bold" in runA ? runA.bold : false) !== ("bold" in runB ? runB.bold : false) || ("italic" in runA ? runA.italic : false) !== ("italic" in runB ? runB.italic : false) || ("color" in runA ? runA.color : void 0) !== ("color" in runB ? runB.color : void 0) || ("fontSize" in runA ? runA.fontSize : void 0) !== ("fontSize" in runB ? runB.fontSize : void 0) || ("fontFamily" in runA ? runA.fontFamily : void 0) !== ("fontFamily" in runB ? runB.fontFamily : void 0) || ("highlight" in runA ? runA.highlight : void 0) !== ("highlight" in runB ? runB.highlight : void 0) || getTrackedChangeKey(runA) !== getTrackedChangeKey(runB) || getCommentKey(runA) !== getCommentKey(runB)) {
       return false;
     }
   }
@@ -40166,7 +40279,7 @@ const resetRunFormatting = (run) => {
   delete run.link;
   delete run.letterSpacing;
 };
-const applyFormatChangeMarks = (run, config, hyperlinkConfig, applyMarksToRun2, themeColors) => {
+const applyFormatChangeMarks = (run, config, hyperlinkConfig, applyMarksToRun2, themeColors, enableComments = true) => {
   const tracked = run.trackedChange;
   if (!tracked || tracked.kind !== "format") {
     return;
@@ -40191,7 +40304,7 @@ const applyFormatChangeMarks = (run, config, hyperlinkConfig, applyMarksToRun2,
   }
   resetRunFormatting(run);
   try {
-    applyMarksToRun2(run, beforeMarks, hyperlinkConfig, themeColors);
+    applyMarksToRun2(run, beforeMarks, hyperlinkConfig, themeColors, void 0, enableComments);
   } catch (error) {
     if (process$1.env.NODE_ENV === "development") {
       console.warn("[PM-Adapter] Error applying format change marks, resetting formatting:", error);
@@ -40199,7 +40312,7 @@ const applyFormatChangeMarks = (run, config, hyperlinkConfig, applyMarksToRun2,
     resetRunFormatting(run);
   }
 };
-const applyTrackedChangesModeToRuns = (runs, config, hyperlinkConfig, applyMarksToRun2, themeColors) => {
+const applyTrackedChangesModeToRuns = (runs, config, hyperlinkConfig, applyMarksToRun2, themeColors, enableComments = true) => {
   if (!config) {
     return runs;
   }
@@ -40212,7 +40325,7 @@ const applyTrackedChangesModeToRuns = (runs, config, hyperlinkConfig, applyMarks
     } else {
       runs.forEach((run) => {
         if (isTextRun$1(run)) {
-          applyFormatChangeMarks(run, config, hyperlinkConfig, applyMarksToRun2, themeColors);
+          applyFormatChangeMarks(run, config, hyperlinkConfig, applyMarksToRun2, themeColors, enableComments);
         }
       });
     }
@@ -40242,9 +40355,23 @@ const applyTrackedChangesModeToRuns = (runs, config, hyperlinkConfig, applyMarks
   } else {
     filtered.forEach((run) => {
       if (isTextRun$1(run)) {
-        applyFormatChangeMarks(run, config, hyperlinkConfig || DEFAULT_HYPERLINK_CONFIG$1, applyMarksToRun2, themeColors);
+        applyFormatChangeMarks(
+          run,
+          config,
+          hyperlinkConfig || DEFAULT_HYPERLINK_CONFIG$1,
+          applyMarksToRun2,
+          themeColors,
+          enableComments
+        );
       }
     });
+    if ((config.mode === "original" || config.mode === "final") && config.enabled) {
+      filtered.forEach((run) => {
+        if (isTextRun$1(run) && run.trackedChange && (run.trackedChange.kind === "insert" || run.trackedChange.kind === "delete")) {
+          delete run.trackedChange;
+        }
+      });
+    }
   }
   return filtered;
 };
@@ -41186,7 +41313,10 @@ const applyTextStyleMark = (run, attrs, themeColors) => {
 const DEFAULT_HYPERLINK_CONFIG = {
   enableRichHyperlinks: false
 };
-const applyMarksToRun = (run, marks, hyperlinkConfig = DEFAULT_HYPERLINK_CONFIG, themeColors, backgroundColor) => {
+const applyMarksToRun = (run, marks, hyperlinkConfig = DEFAULT_HYPERLINK_CONFIG, themeColors, backgroundColor, enableComments = true) => {
+  if (!enableComments && "comments" in run && run.comments) {
+    delete run.comments;
+  }
   const isTabRun2 = run.kind === "tab";
   let markSetColor = false;
   marks.forEach((mark) => {
@@ -41233,7 +41363,7 @@ const applyMarksToRun = (run, marks, hyperlinkConfig = DEFAULT_HYPERLINK_CONFIG,
           break;
         case "commentMark":
         case "comment": {
-          if (!isTabRun2) {
+          if (!isTabRun2 && enableComments) {
             pushCommentAnnotation(run, mark.attrs ?? {});
           }
           break;
@@ -43307,7 +43437,16 @@ const computeParagraphAttrs = (para, styleContext, listCounterContext, converter
     if (!value || typeof value !== "object") return;
     return normalizePxIndent(value) ?? convertIndentTwipsToPx(value);
   };
-  const normalizedIndent = normalizeIndentObject(attrs.indent) ?? convertIndentTwipsToPx(paragraphProps.indent) ?? convertIndentTwipsToPx(hydrated?.indent) ?? normalizeParagraphIndent(attrs.textIndent);
+  const hydratedIndentPx = convertIndentTwipsToPx(hydrated?.indent);
+  const paragraphIndentPx = convertIndentTwipsToPx(paragraphProps.indent);
+  const textIndentPx = normalizeParagraphIndent(attrs.textIndent);
+  const attrsIndentPx = normalizeIndentObject(attrs.indent);
+  const indentChain = [];
+  if (hydratedIndentPx) indentChain.push({ indent: hydratedIndentPx });
+  if (paragraphIndentPx) indentChain.push({ indent: paragraphIndentPx });
+  if (textIndentPx) indentChain.push({ indent: textIndentPx });
+  if (attrsIndentPx) indentChain.push({ indent: attrsIndentPx });
+  const normalizedIndent = indentChain.length ? combineIndentProperties(indentChain).indent : void 0;
   const unwrapTabStops = (tabStops) => {
     if (!Array.isArray(tabStops)) {
       return void 0;
@@ -44859,7 +44998,7 @@ const applyInlineRunProperties = (run, runProperties) => {
     run.letterSpacing = twipsToPx$1(runProperties.letterSpacing);
   }
 };
-function paragraphToFlowBlocks$1(para, nextBlockId, positions, defaultFont, defaultSize, styleContext, listCounterContext, trackedChanges, bookmarks, hyperlinkConfig = DEFAULT_HYPERLINK_CONFIG$1, themeColors, converters, converterContext) {
+function paragraphToFlowBlocks$1(para, nextBlockId, positions, defaultFont, defaultSize, styleContext, listCounterContext, trackedChanges, bookmarks, hyperlinkConfig = DEFAULT_HYPERLINK_CONFIG$1, themeColors, converters, converterContext, enableComments = true) {
   const baseBlockId = nextBlockId("paragraph");
   const paragraphProps = typeof para.attrs?.paragraphProperties === "object" && para.attrs.paragraphProperties !== null ? para.attrs.paragraphProperties : {};
   const paragraphStyleId = typeof para.attrs?.styleId === "string" && para.attrs.styleId.trim() ? para.attrs.styleId : typeof paragraphProps.styleId === "string" && paragraphProps.styleId.trim() ? paragraphProps.styleId : null;
@@ -45033,7 +45172,8 @@ function paragraphToFlowBlocks$1(para, nextBlockId, positions, defaultFont, defa
         [...node.marks ?? [], ...inheritedMarks ?? []],
         hyperlinkConfig,
         themeColors,
-        converterContext?.backgroundColor
+        converterContext?.backgroundColor,
+        enableComments
       );
       currentRuns.push(run);
       return;
@@ -45095,7 +45235,8 @@ function paragraphToFlowBlocks$1(para, nextBlockId, positions, defaultFont, defa
           positions,
           defaultFont,
           defaultSize,
-          mergedMarks,
+          [],
+          // Empty marks - will be applied after linked styles
           activeSdt,
           hyperlinkConfig,
           themeColors
@@ -45104,6 +45245,14 @@ function paragraphToFlowBlocks$1(para, nextBlockId, positions, defaultFont, defa
         applyRunStyles2(tokenRun, inlineStyleId, activeRunStyleId);
         applyBaseRunDefaults(tokenRun, baseRunDefaults, defaultFont, defaultSize);
         applyInlineRunProperties(tokenRun, activeRunProperties);
+        applyMarksToRun(
+          tokenRun,
+          mergedMarks,
+          hyperlinkConfig,
+          themeColors,
+          converterContext?.backgroundColor,
+          enableComments
+        );
         if (pageRefPos) {
           tokenRun.pmStart = pageRefPos.start;
           tokenRun.pmEnd = pageRefPos.end;
@@ -45177,7 +45326,8 @@ function paragraphToFlowBlocks$1(para, nextBlockId, positions, defaultFont, defa
             mergedMarks,
             hyperlinkConfig,
             themeColors,
-            converterContext?.backgroundColor
+            converterContext?.backgroundColor,
+            enableComments
           );
         }
         console.debug("[token-debug] paragraph-token-run", {
@@ -45376,7 +45526,8 @@ function paragraphToFlowBlocks$1(para, nextBlockId, positions, defaultFont, defa
       trackedChanges,
       hyperlinkConfig,
       applyMarksToRun,
-      themeColors
+      themeColors,
+      enableComments
     );
     if (trackedChanges.enabled && filteredRuns.length === 0) {
       return;
@@ -46275,6 +46426,7 @@ function toFlowBlocks(pmDoc, options) {
   const hyperlinkConfig = {
     enableRichHyperlinks: options?.enableRichHyperlinks ?? false
   };
+  const enableComments = options?.enableComments ?? true;
   const themeColors = options?.themeColors;
   const converterContext = options?.converterContext;
   if (!doc2.content) {
@@ -46324,7 +46476,8 @@ function toFlowBlocks(pmDoc, options) {
     bookmarks2,
     hyperlinkConfig2,
     themeColorsParam ?? themeColors,
-    converterCtx ?? converterContext
+    converterCtx ?? converterContext,
+    enableComments
   );
   const tableConverter = (node, nextBlockId2, positions2, defaultFont2, defaultSize2, context, trackedChanges, bookmarks2, hyperlinkConfig2, themeColorsParam, converterCtx) => tableNodeToBlock(
     node,
@@ -46363,6 +46516,7 @@ function toFlowBlocks(pmDoc, options) {
     listCounterContext: { getListCounter, incrementListCounter, resetListCounter },
     trackedChangesConfig,
     hyperlinkConfig,
+    enableComments,
     bookmarks,
     sectionState: {
       ranges: sectionRanges,
@@ -46431,7 +46585,7 @@ function mergeDropCapParagraphs(blocks) {
   }
   return result;
 }
-function paragraphToFlowBlocks(para, nextBlockId, positions, defaultFont, defaultSize, styleContext, listCounterContext, trackedChanges, bookmarks, hyperlinkConfig = DEFAULT_HYPERLINK_CONFIG$1, themeColors, converterContext) {
+function paragraphToFlowBlocks(para, nextBlockId, positions, defaultFont, defaultSize, styleContext, listCounterContext, trackedChanges, bookmarks, hyperlinkConfig = DEFAULT_HYPERLINK_CONFIG$1, themeColors, converterContext, enableComments = true) {
   return paragraphToFlowBlocks$1(
     para,
     nextBlockId,
@@ -46478,7 +46632,8 @@ function paragraphToFlowBlocks(para, nextBlockId, positions, defaultFont, defaul
         }
       )
     },
-    converterContext
+    converterContext,
+    enableComments
   );
 }
 function tableNodeToBlock(node, nextBlockId, positions, defaultFont, defaultSize, styleContext, trackedChanges, bookmarks, hyperlinkConfig, themeColors, _paragraphToFlowBlocksParam, converterContext, options) {
@@ -48570,10 +48725,13 @@ async function measureParagraphBlock(block, maxWidth) {
         };
       }
       const originX = currentLine.width;
-      const { target, nextIndex, stop } = getNextTabStopPx(currentLine.width, tabStops, tabStopCursor);
+      const effectiveIndent = lines.length === 0 ? indentLeft + rawFirstLineOffset : indentLeft;
+      const absCurrentX = currentLine.width + effectiveIndent;
+      const { target, nextIndex, stop } = getNextTabStopPx(absCurrentX, tabStops, tabStopCursor);
       tabStopCursor = nextIndex;
-      const clampedTarget = Math.min(target, currentLine.maxWidth);
-      const tabAdvance = Math.max(0, clampedTarget - currentLine.width);
+      const maxAbsWidth = currentLine.maxWidth + effectiveIndent;
+      const clampedTarget = Math.min(target, maxAbsWidth);
+      const tabAdvance = Math.max(0, clampedTarget - absCurrentX);
       currentLine.width = roundValue(currentLine.width + tabAdvance);
       run.width = tabAdvance;
       currentLine.maxFontSize = Math.max(currentLine.maxFontSize, 12);
@@ -48581,8 +48739,9 @@ async function measureParagraphBlock(block, maxWidth) {
       currentLine.toChar = 1;
       if (stop && stop.leader && stop.leader !== "none") {
         const leaderStyle = stop.leader;
-        const from3 = Math.min(originX, clampedTarget);
-        const to = Math.max(originX, clampedTarget);
+        const relativeTarget = clampedTarget - effectiveIndent;
+        const from3 = Math.min(originX, relativeTarget);
+        const to = Math.max(originX, relativeTarget);
         if (!currentLine.leaders) currentLine.leaders = [];
         currentLine.leaders.push({ from: from3, to, style: leaderStyle });
       }
@@ -48591,27 +48750,28 @@ async function measureParagraphBlock(block, maxWidth) {
         if (stop.val === "end" || stop.val === "center" || stop.val === "decimal") {
           const groupMeasure = measureTabAlignmentGroup(runIndex + 1, runsToProcess, ctx2, decimalSeparator);
           if (groupMeasure.totalWidth > 0) {
+            const relativeTarget = clampedTarget - effectiveIndent;
             let groupStartX;
             if (stop.val === "end") {
-              groupStartX = Math.max(0, clampedTarget - groupMeasure.totalWidth);
+              groupStartX = Math.max(0, relativeTarget - groupMeasure.totalWidth);
             } else if (stop.val === "center") {
-              groupStartX = Math.max(0, clampedTarget - groupMeasure.totalWidth / 2);
+              groupStartX = Math.max(0, relativeTarget - groupMeasure.totalWidth / 2);
             } else {
               const beforeDecimal = groupMeasure.beforeDecimalWidth ?? groupMeasure.totalWidth;
-              groupStartX = Math.max(0, clampedTarget - beforeDecimal);
+              groupStartX = Math.max(0, relativeTarget - beforeDecimal);
             }
             activeTabGroup = {
               measure: groupMeasure,
               startX: groupStartX,
               currentX: groupStartX,
-              target: clampedTarget,
+              target: relativeTarget,
               val: stop.val
             };
             currentLine.width = roundValue(groupStartX);
           }
           pendingTabAlignment = null;
         } else {
-          pendingTabAlignment = { target: clampedTarget, val: stop.val };
+          pendingTabAlignment = { target: clampedTarget - effectiveIndent, val: stop.val };
         }
       } else {
         pendingTabAlignment = null;
@@ -49252,10 +49412,13 @@ async function measureParagraphBlock(block, maxWidth) {
           };
         }
         const originX = currentLine.width;
-        const { target, nextIndex, stop } = getNextTabStopPx(currentLine.width, tabStops, tabStopCursor);
+        const effectiveIndent = lines.length === 0 ? indentLeft + rawFirstLineOffset : indentLeft;
+        const absCurrentX = currentLine.width + effectiveIndent;
+        const { target, nextIndex, stop } = getNextTabStopPx(absCurrentX, tabStops, tabStopCursor);
         tabStopCursor = nextIndex;
-        const clampedTarget = Math.min(target, currentLine.maxWidth);
-        const tabAdvance = Math.max(0, clampedTarget - currentLine.width);
+        const maxAbsWidth = currentLine.maxWidth + effectiveIndent;
+        const clampedTarget = Math.min(target, maxAbsWidth);
+        const tabAdvance = Math.max(0, clampedTarget - absCurrentX);
         currentLine.width = roundValue(currentLine.width + tabAdvance);
         currentLine.maxFontInfo = updateMaxFontInfo(currentLine.maxFontSize, currentLine.maxFontInfo, run);
         currentLine.maxFontSize = Math.max(currentLine.maxFontSize, run.fontSize);
@@ -49264,14 +49427,15 @@ async function measureParagraphBlock(block, maxWidth) {
         charPosInRun += 1;
         if (stop) {
           validateTabStopVal(stop);
-          pendingTabAlignment = { target: clampedTarget, val: stop.val };
+          pendingTabAlignment = { target: clampedTarget - effectiveIndent, val: stop.val };
         } else {
           pendingTabAlignment = null;
         }
         if (stop && stop.leader && stop.leader !== "none" && stop.leader !== "middleDot") {
           const leaderStyle = stop.leader;
-          const from3 = Math.min(originX, clampedTarget);
-          const to = Math.max(originX, clampedTarget);
+          const relativeTarget = clampedTarget - effectiveIndent;
+          const from3 = Math.min(originX, relativeTarget);
+          const to = Math.max(originX, relativeTarget);
           if (!currentLine.leaders) currentLine.leaders = [];
           currentLine.leaders.push({ from: from3, to, style: leaderStyle });
         }
@@ -49547,7 +49711,11 @@ async function measureTableBlock(block, constraints) {
 }
 async function measureImageBlock(block, constraints) {
   const intrinsic = getIntrinsicImageSize(block, constraints.maxWidth);
-  const maxWidth = constraints.maxWidth > 0 ? constraints.maxWidth : intrinsic.width;
+  const isBlockBehindDoc = block.anchor?.behindDoc;
+  const isBlockWrapBehindDoc = block.wrap?.type === "None" && block.wrap?.behindDoc;
+  const bypassWidthConstraint = isBlockBehindDoc || isBlockWrapBehindDoc;
+  const isWidthConstraintBypassed = bypassWidthConstraint || constraints.maxWidth <= 0;
+  const maxWidth = isWidthConstraintBypassed ? intrinsic.width : constraints.maxWidth;
   const hasNegativeVerticalPosition = block.anchor?.isAnchored && (typeof block.anchor?.offsetV === "number" && block.anchor.offsetV < 0 || typeof block.margin?.top === "number" && block.margin.top < 0);
   const maxHeight = hasNegativeVerticalPosition || !constraints.maxHeight || constraints.maxHeight <= 0 ? Infinity : constraints.maxHeight;
   const widthScale = maxWidth / intrinsic.width;
@@ -50687,12 +50855,13 @@ class PresentationEditor extends EventEmitter {
     if (!validModes.includes(mode)) {
       throw new TypeError(`[PresentationEditor] Invalid mode "${mode}". Must be one of: ${validModes.join(", ")}`);
     }
+    const modeChanged = this.#documentMode !== mode;
     this.#documentMode = mode;
     this.#editor.setDocumentMode(mode);
     this.#syncDocumentModeClass();
     this.#syncHiddenEditorA11yAttributes();
     const trackedChangesChanged = this.#syncTrackedChangesPreferences();
-    if (trackedChangesChanged) {
+    if (modeChanged || trackedChangesChanged) {
       this.#pendingDocChange = true;
       this.#scheduleRerender();
     }
@@ -50713,9 +50882,10 @@ class PresentationEditor extends EventEmitter {
       throw new TypeError("[PresentationEditor] setTrackedChangesOverrides expects an object or undefined");
     }
     if (overrides !== void 0) {
-      if (overrides.mode !== void 0 && !["review", "simple", "original"].includes(overrides.mode)) {
+      const validModes = ["review", "original", "final", "off"];
+      if (overrides.mode !== void 0 && !validModes.includes(overrides.mode)) {
         throw new TypeError(
-          `[PresentationEditor] Invalid tracked changes mode "${overrides.mode}". Must be one of: review, simple, original`
+          `[PresentationEditor] Invalid tracked changes mode "${overrides.mode}". Must be one of: ${validModes.join(", ")}`
         );
       }
       if (overrides.enabled !== void 0 && typeof overrides.enabled !== "boolean") {
@@ -53097,12 +53267,14 @@ class PresentationEditor extends EventEmitter {
         } : void 0;
         const atomNodeTypes = getAtomNodeTypes(this.#editor?.schema ?? null);
         const positionMap = this.#editor?.state?.doc && docJson ? buildPositionMapFromPmDoc(this.#editor.state.doc, docJson) : null;
+        const commentsEnabled = this.#documentMode !== "viewing";
         const result = toFlowBlocks(docJson, {
           mediaFiles: this.#editor?.storage?.image?.media,
           emitSectionBreaks: true,
           sectionMetadata,
           trackedChangesMode: this.#trackedChangesMode,
           enableTrackedChanges: this.#trackedChangesEnabled,
+          enableComments: commentsEnabled,
           enableRichHyperlinks: true,
           themeColors: this.#editor?.converter?.themeColors ?? void 0,
           converterContext,
@@ -53233,10 +53405,12 @@ class PresentationEditor extends EventEmitter {
       const payload = { layout, blocks, measures, metrics };
       this.emit("layoutUpdated", payload);
       this.emit("paginationUpdate", payload);
-      const commentPositions = this.#collectCommentPositions();
-      const positionKeys = Object.keys(commentPositions);
-      if (positionKeys.length > 0) {
-        this.emit("commentPositions", { positions: commentPositions });
+      if (this.#documentMode !== "viewing") {
+        const commentPositions = this.#collectCommentPositions();
+        const positionKeys = Object.keys(commentPositions);
+        if (positionKeys.length > 0) {
+          this.emit("commentPositions", { positions: commentPositions });
+        }
       }
       if (this.#telemetryEmitter && metrics) {
         this.#telemetryEmitter({ type: "layout", data: { layout, blocks, measures, metrics } });
@@ -54662,7 +54836,7 @@ class PresentationEditor extends EventEmitter {
     const zoom = this.#layoutOptions.zoom ?? 1;
     const layoutMode = this.#layoutOptions.layoutMode ?? "vertical";
     const pages = this.#layoutState.layout?.pages;
-    const pageGap = this.#layoutState.layout?.pageGap ?? this.#getEffectivePageGap();
+    const pageGap = this.#getEffectivePageGap();
     const defaultWidth = this.#layoutOptions.pageSize?.w ?? DEFAULT_PAGE_SIZE.w;
     const defaultHeight = this.#layoutOptions.pageSize?.h ?? DEFAULT_PAGE_SIZE.h;
     let maxWidth = defaultWidth;
@@ -57773,7 +57947,11 @@ const Document = Node$1.create({
        */
       clearDocument: () => ({ commands: commands2 }) => {
         return commands2.setContent("<p></p>");
-      }
+      },
+      /**
+       * Set section page margins (top/right/bottom/left) for the section at the current selection.
+       */
+      setSectionPageMarginsAtSelection
     };
   }
 });
@@ -58427,12 +58605,18 @@ function findParagraphContext($pos, cache2, helpers2) {
   return null;
 }
 function extractParagraphContext(node, startPos, helpers2, depth = 0) {
-  const paragraphProperties = getResolvedParagraphProperties(node) ?? {};
+  const paragraphProperties = getResolvedParagraphProperties(node) ?? node.attrs?.paragraphProperties ?? {};
   const alignmentAliases = { left: "start", right: "end" };
   let tabStops = [];
   if (Array.isArray(paragraphProperties.tabStops)) {
     tabStops = paragraphProperties.tabStops.map((stop) => {
       const ref2 = stop?.tab;
+      if (!ref2 && stop?.pos != null) {
+        return {
+          ...stop,
+          pos: twipsToPixels(Number(stop.pos) || 0)
+        };
+      }
       if (!ref2) return stop || null;
       const rawType = ref2.tabType || "start";
       const mappedVal = alignmentAliases[rawType] || rawType;
@@ -59698,6 +59882,13 @@ function createLayoutRequest(doc2, paragraphPos, view, helpers2, revision, parag
         pos: entry.pos,
         nodeSize: node.nodeSize
       });
+    } else if (node.type.name === "lineBreak" || node.type.name === "hardBreak") {
+      spans.push({
+        type: node.type.name,
+        spanId,
+        pos: entry.pos,
+        nodeSize: node.nodeSize
+      });
     } else if (node.type.name === "text") {
       spans.push({
         type: "text",
@@ -59747,6 +59938,7 @@ function calculateTabLayout(request, measurement, view) {
     paragraphNode
   } = request;
   const tabs = {};
+  const leftIndentPx = request.indents?.left ?? 0;
   let currentX = indentWidth;
   const measureText2 = (span) => {
     if (view && typeof span.from === "number" && typeof span.to === "number") {
@@ -59759,6 +59951,8 @@ function calculateTabLayout(request, measurement, view) {
     const span = spans[i];
     if (span.type === "text") {
       currentX += measureText2(span);
+    } else if (span.type === "lineBreak" || span.type === "hardBreak") {
+      currentX = leftIndentPx;
     } else if (span.type === "tab") {
       const followingText = collectFollowingText(spans, i + 1);
       let measureTextCallback;
@@ -59854,7 +60048,7 @@ function collectFollowingText(spans, startIndex) {
   let text = "";
   for (let i = startIndex; i < spans.length; i++) {
     const span = spans[i];
-    if (span.type === "tab") break;
+    if (span.type === "tab" || span.type === "lineBreak" || span.type === "hardBreak") break;
     if (span.type === "text") text += span.text || "";
   }
   return text;
@@ -59864,7 +60058,7 @@ function getFollowingTextRange(spans, startIndex) {
   let to = null;
   for (let i = startIndex; i < spans.length; i++) {
     const span = spans[i];
-    if (span.type === "tab") break;
+    if (span.type === "tab" || span.type === "lineBreak" || span.type === "hardBreak") break;
     if (span.type === "text" && typeof span.from === "number" && typeof span.to === "number") {
       if (from3 === null) from3 = span.from;
       to = span.to;
@@ -64282,6 +64476,10 @@ const Image = Node$1.create({
     }
     const hasAnchorData = Boolean(anchorData);
     const hasMarginOffsets = marginOffset?.horizontal != null || marginOffset?.top != null;
+    const isWrapBehindDoc = wrap?.attrs?.behindDoc;
+    const isAnchorBehindDoc = anchorData?.behindDoc;
+    const isBehindDocAnchor = wrap?.type === "None" && (isWrapBehindDoc || isAnchorBehindDoc);
+    const isAbsolutelyPositioned = style2.includes("position: absolute;");
     if (hasAnchorData) {
       switch (anchorData.hRelativeFrom) {
         case "page":
@@ -64309,7 +64507,6 @@ const Image = Node$1.create({
               style2 += "float: left;";
             }
           } else if (!anchorData.alignH && marginOffset?.horizontal != null) {
-            const isAbsolutelyPositioned = style2.includes("position: absolute;");
             if (isAbsolutelyPositioned) {
               style2 += `left: ${baseHorizontal}px;`;
               style2 += "max-width: none;";
@@ -64323,7 +64520,8 @@ const Image = Node$1.create({
       const relativeFromPageV = anchorData?.vRelativeFrom === "page";
       const relativeFromMarginV = anchorData?.vRelativeFrom === "margin";
       const maxMarginV = 500;
-      const baseTop = Math.max(0, marginOffset?.top ?? 0);
+      const allowNegativeTopOffset = isBehindDocAnchor;
+      const baseTop = allowNegativeTopOffset ? marginOffset?.top ?? 0 : Math.max(0, marginOffset?.top ?? 0);
       let rotationHorizontal = 0;
       let rotationTop = 0;
       const { rotation: rotation2 } = transformData ?? {};
@@ -64342,7 +64540,10 @@ const Image = Node$1.create({
           margin.left += horizontal;
         }
       }
-      if (top2 && !relativeFromMarginV) {
+      const appliedTopViaStyle = isAbsolutelyPositioned && allowNegativeTopOffset && !relativeFromMarginV;
+      if (appliedTopViaStyle) {
+        style2 += `top: ${top2}px;`;
+      } else if (top2 && !relativeFromMarginV) {
         if (relativeFromPageV && top2 >= maxMarginV) margin.top += maxMarginV;
         else margin.top += top2;
       }
@@ -64355,6 +64556,9 @@ const Image = Node$1.create({
     }
     if (margin.top) style2 += `margin-top: ${margin.top}px;`;
     if (margin.bottom) style2 += `margin-bottom: ${margin.bottom}px;`;
+    if (isBehindDocAnchor) {
+      style2 += "max-width: none;";
+    }
     const finalAttributes = { ...htmlAttributes };
     if (style2) {
       const existingStyle = finalAttributes.style || "";
@@ -78808,7 +79012,7 @@ var ResizeObserverController = (function() {
   };
   return ResizeObserverController2;
 })();
-var ResizeObserver = (function() {
+var ResizeObserver$1 = (function() {
   function ResizeObserver2(callback) {
     if (arguments.length === 0) {
       throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
@@ -78847,7 +79051,7 @@ var ResizeObserver = (function() {
 class ResizeObserverDelegate {
   constructor() {
     this.handleResize = this.handleResize.bind(this);
-    this.observer = new (typeof window !== "undefined" && window.ResizeObserver || ResizeObserver)(this.handleResize);
+    this.observer = new (typeof window !== "undefined" && window.ResizeObserver || ResizeObserver$1)(this.handleResize);
     this.elHandlersMap = /* @__PURE__ */ new Map();
   }
   handleResize(entries) {
@@ -89716,6 +89920,31 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       },
       { immediate: true, deep: true }
     );
+    watch(
+      () => props.options?.rulerContainer,
+      () => {
+        nextTick(() => {
+          syncRulerOffset();
+          setupRulerObservers();
+        });
+      },
+      { immediate: true }
+    );
+    watch(
+      rulersVisible,
+      (visible) => {
+        nextTick(() => {
+          if (visible) {
+            syncRulerOffset();
+            setupRulerObservers();
+          } else {
+            rulerHostStyle.value = {};
+            cleanupRulerObservers();
+          }
+        });
+      },
+      { immediate: true }
+    );
     const containerStyle = computed(() => {
       let maxWidth = 8.5 * 96;
       const ed = editor.value;
@@ -89740,6 +89969,71 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         minWidth: `${scaledWidth}px`
       };
     });
+    const rulerHostStyle = ref({});
+    const rulerContainerEl = ref(null);
+    let editorResizeObserver = null;
+    let rulerContainerResizeObserver = null;
+    let layoutUpdatedHandler = null;
+    const resolveRulerContainer = () => {
+      const container = props.options?.rulerContainer;
+      if (!container) return null;
+      if (typeof container === "string") {
+        const doc2 = editorWrapper.value?.ownerDocument ?? document;
+        return doc2.querySelector(container);
+      }
+      return container instanceof HTMLElement ? container : null;
+    };
+    const getViewportRect2 = () => {
+      const host = editorWrapper.value;
+      if (!host) return null;
+      const viewport2 = host.querySelector(".presentation-editor__viewport");
+      const target = viewport2 ?? host;
+      return target.getBoundingClientRect();
+    };
+    const syncRulerOffset = () => {
+      if (!rulersVisible.value) {
+        rulerHostStyle.value = {};
+        return;
+      }
+      rulerContainerEl.value = resolveRulerContainer();
+      if (!rulerContainerEl.value) {
+        rulerHostStyle.value = {};
+        return;
+      }
+      const viewportRect = getViewportRect2();
+      if (!viewportRect) return;
+      const hostRect = rulerContainerEl.value.getBoundingClientRect();
+      const paddingLeft = Math.max(0, viewportRect.left - hostRect.left);
+      const paddingRight = Math.max(0, hostRect.right - viewportRect.right);
+      rulerHostStyle.value = {
+        paddingLeft: `${paddingLeft}px`,
+        paddingRight: `${paddingRight}px`
+      };
+    };
+    const cleanupRulerObservers = () => {
+      if (editorResizeObserver) {
+        editorResizeObserver.disconnect();
+        editorResizeObserver = null;
+      }
+      if (rulerContainerResizeObserver) {
+        rulerContainerResizeObserver.disconnect();
+        rulerContainerResizeObserver = null;
+      }
+    };
+    const setupRulerObservers = () => {
+      cleanupRulerObservers();
+      if (typeof ResizeObserver === "undefined") return;
+      const viewportHost = editorWrapper.value;
+      const rulerHost = resolveRulerContainer();
+      if (viewportHost) {
+        editorResizeObserver = new ResizeObserver(() => syncRulerOffset());
+        editorResizeObserver.observe(viewportHost);
+      }
+      if (rulerHost) {
+        rulerContainerResizeObserver = new ResizeObserver(() => syncRulerOffset());
+        rulerContainerResizeObserver.observe(rulerHost);
+      }
+    };
     const message = useMessage();
     const editorWrapper = ref(null);
     const editorElem = ref(null);
@@ -90051,7 +90345,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         presentationEditor.on("imageDeselected", () => {
           clearSelectedImage();
         });
-        presentationEditor.on("layoutUpdated", () => {
+        layoutUpdatedHandler = () => {
           if (imageResizeState.visible && imageResizeState.blockId) {
             const escapedBlockId = CSS.escape(imageResizeState.blockId);
             const newElement = editorElem.value?.querySelector(
@@ -90084,13 +90378,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               clearSelectedImage();
             }
           }
-        });
+          nextTick(() => syncRulerOffset());
+        };
+        presentationEditor.on("layoutUpdated", layoutUpdatedHandler);
         zoomChangeHandler = ({ zoom }) => {
           currentZoom.value = zoom;
+          nextTick(() => syncRulerOffset());
         };
         presentationEditor.on("zoomChange", zoomChangeHandler);
         if (typeof presentationEditor.zoom === "number") {
           currentZoom.value = presentationEditor.zoom;
+          nextTick(() => syncRulerOffset());
         }
       }
       editor.value.on("paginationUpdate", () => {
@@ -90150,6 +90448,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       initializeData();
       if (props.options?.suppressSkeletonLoader || !props.options?.collaborationProvider) editorReady.value = true;
+      window.addEventListener("resize", syncRulerOffset, { passive: true });
+      nextTick(() => {
+        syncRulerOffset();
+        setupRulerObservers();
+      });
     });
     const handleMarginClick = (event) => {
       if (event.button !== 0) {
@@ -90164,10 +90467,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const handleMarginChange = ({ side, value }) => {
       const base2 = activeEditor.value;
       if (!base2) return;
-      const pageStyles2 = base2.getPageStyles();
-      const { pageMargins } = pageStyles2;
-      const update = { ...pageMargins, [side]: value };
-      base2?.updatePageStyle({ pageMargins: update });
+      const payload = side === "left" ? { leftInches: value } : side === "right" ? { rightInches: value } : side === "top" ? { topInches: value } : side === "bottom" ? { bottomInches: value } : {};
+      const didUpdateSection = typeof base2.commands?.setSectionPageMarginsAtSelection === "function" ? base2.commands.setSectionPageMarginsAtSelection(payload) : false;
+      if (!didUpdateSection) {
+        const pageStyles2 = base2.getPageStyles();
+        const { pageMargins } = pageStyles2;
+        const update = { ...pageMargins, [side]: value };
+        base2?.updatePageStyle({ pageMargins: update });
+      }
     };
     onBeforeUnmount(() => {
       stopPolling();
@@ -90176,6 +90483,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         editor.value.off("zoomChange", zoomChangeHandler);
         zoomChangeHandler = null;
       }
+      if (editor.value instanceof PresentationEditor && layoutUpdatedHandler) {
+        editor.value.off("layoutUpdated", layoutUpdatedHandler);
+        layoutUpdatedHandler = null;
+      }
+      cleanupRulerObservers();
+      window.removeEventListener("resize", syncRulerOffset);
       editor.value?.destroy();
       editor.value = null;
     });
@@ -90187,18 +90500,28 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         __props.options.rulerContainer && rulersVisible.value && !!activeEditor.value ? (openBlock(), createBlock(Teleport, {
           key: 0,
           to: __props.options.rulerContainer
+        }, [
+          createBaseVNode("div", {
+            class: "ruler-host",
+            style: normalizeStyle(rulerHostStyle.value)
+          }, [
+            createVNode(Ruler, {
+              class: "ruler superdoc-ruler",
+              editor: activeEditor.value,
+              onMarginChange: handleMarginChange
+            }, null, 8, ["editor"])
+          ], 4)
+        ], 8, ["to"])) : rulersVisible.value && !!activeEditor.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "ruler-host",
+          style: normalizeStyle(rulerHostStyle.value)
         }, [
           createVNode(Ruler, {
-            class: "ruler superdoc-ruler",
+            class: "ruler",
             editor: activeEditor.value,
             onMarginChange: handleMarginChange
           }, null, 8, ["editor"])
-        ], 8, ["to"])) : rulersVisible.value && !!activeEditor.value ? (openBlock(), createBlock(Ruler, {
-          key: 1,
-          class: "ruler",
-          editor: activeEditor.value,
-          onMarginChange: handleMarginChange
-        }, null, 8, ["editor"])) : createCommentVNode("", true),
+        ], 4)) : createCommentVNode("", true),
         createBaseVNode("div", {
           class: "super-editor",
           ref_key: "editorWrapper",
@@ -90303,7 +90626,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SuperEditor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-8dd4cf59"]]);
+const SuperEditor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-f5c4f915"]]);
 const _hoisted_1 = ["innerHTML"];
 const _sfc_main = {
   __name: "SuperInput",