docxodus 9.4.0 → 9.6.0

package/dist/embed.bundle.js

@@ -1328,20 +1328,18 @@ function formatPageNumber(value, format) {
   return (renderer ?? RENDERERS.decimal)(value);
 }
 
-// src/pagination.ts
+// src/page-geometry.ts
 var DEFAULT_PAGE_WIDTH = 612;
 var DEFAULT_PAGE_HEIGHT = 792;
 var DEFAULT_MARGIN = 72;
-var MAX_FOOTNOTE_AREA_RATIO = 0.6;
-var MIN_BODY_CONTENT_HEIGHT = 72;
+var DEFAULT_HEADER_FOOTER_HEIGHT = 36;
 function pxToPt(px) {
   return px * 0.75;
 }
 function ptToPx(pt) {
   return pt / 0.75;
 }
-var DEFAULT_HEADER_FOOTER_HEIGHT = 36;
-function parseDimensions(section) {
+function parseSectionDimensions(section) {
   const pageWidth = parseFloat(section.dataset.pageWidth || "") || DEFAULT_PAGE_WIDTH;
   const pageHeight = parseFloat(section.dataset.pageHeight || "") || DEFAULT_PAGE_HEIGHT;
   const contentWidth = parseFloat(section.dataset.contentWidth || "") || pageWidth - 2 * DEFAULT_MARGIN;
@@ -1365,6 +1363,42 @@ function parseDimensions(section) {
     footerHeight
   };
 }
+function sectionWrappers(root) {
+  const sections = Array.from(root.querySelectorAll("[data-section-index]"));
+  return sections.length > 0 ? sections : [root];
+}
+var MIN_FIT_SCALE = 0.25;
+function fitScale(availablePx, naturalPt, max = 1) {
+  if (!(availablePx > 0) || !(naturalPt > 0)) return max;
+  const naturalPx = ptToPx(naturalPt);
+  if (naturalPx <= availablePx) return max;
+  return Math.max(MIN_FIT_SCALE, Math.min(max, availablePx / naturalPx));
+}
+function applyZoom(el, scale, naturalPt) {
+  if (scale === 1) {
+    el.style.removeProperty("zoom");
+    el.style.removeProperty("transform");
+    el.style.removeProperty("transform-origin");
+    el.style.removeProperty("margin-right");
+    el.style.removeProperty("margin-bottom");
+    return;
+  }
+  const zoomSupported = typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("zoom", "0.5");
+  if (zoomSupported) {
+    el.style.zoom = String(scale);
+    return;
+  }
+  el.style.transform = `scale(${scale})`;
+  el.style.transformOrigin = "top left";
+  if (naturalPt) {
+    el.style.marginRight = `-${ptToPx(naturalPt.width * (1 - scale))}px`;
+    el.style.marginBottom = `-${ptToPx(naturalPt.height * (1 - scale))}px`;
+  }
+}
+
+// src/pagination.ts
+var MAX_FOOTNOTE_AREA_RATIO = 0.6;
+var MIN_BODY_CONTENT_HEIGHT = 72;
 var PaginationEngine = class {
   /**
    * Creates a new pagination engine.
@@ -1410,7 +1444,7 @@ var PaginationEngine = class {
     const sectionsToProcess = sections.length > 0 ? Array.from(sections) : [this.stagingElement];
     for (const section of sectionsToProcess) {
       const sectionIndex = parseInt(section.dataset.sectionIndex || "0", 10);
-      const dims = parseDimensions(section);
+      const dims = parseSectionDimensions(section);
       this.stagingElement.style.visibility = "hidden";
       this.stagingElement.style.position = "absolute";
       this.stagingElement.style.left = "-9999px";
@@ -2708,6 +2742,114 @@ function paginateHtml(html, container, options = {}) {
   return engine.paginate();
 }
 
+// src/viewport.ts
+var DocumentViewport = class {
+  constructor(host, options = {}) {
+    this.root = null;
+    /** Natural page size in points — the widest section's PAGE box, which is what must fit. */
+    this.natural = { width: 0, height: 0 };
+    this.observer = null;
+    this.host = host;
+    this.options = {
+      columnWidth: options.columnWidth ?? "section",
+      fitToWidth: options.fitToWidth ?? true,
+      scale: options.scale ?? 1
+    };
+  }
+  /**
+   * Adopt a freshly mounted document root (a continuous flow, or the paginated page stack).
+   * Safe to call on every remount; the previous root is released first.
+   *
+   * `applySectionGeometry` is false for the paginated view, which already builds real page
+   * boxes at the section's dimensions — there the viewport contributes only the fit zoom.
+   */
+  attach(root, applySectionGeometry) {
+    this.release();
+    this.root = root;
+    this.natural = applySectionGeometry ? this.stampSections(root) : this.measurePages(root);
+    this.refresh();
+    if (typeof ResizeObserver !== "undefined") {
+      this.observer = new ResizeObserver(() => this.refresh());
+      this.observer.observe(this.host);
+    }
+  }
+  /** Recompute the fit zoom against the host's current width. */
+  refresh() {
+    if (!this.root) return;
+    const scale = this.scale;
+    applyZoom(this.root, scale, this.natural);
+    this.host.style.setProperty(
+      "--docx-sheet-width",
+      this.natural.width > 0 ? `${ptToPx(this.natural.width) * scale}px` : "100%"
+    );
+  }
+  /** The zoom currently applied (1 = 100%). Reported by the ribbon's anchor rail. */
+  get scale() {
+    if (!this.root) return this.options.scale;
+    return this.options.fitToWidth ? fitScale(this.availableWidthPx(), this.natural.width, this.options.scale) : this.options.scale;
+  }
+  dispose() {
+    this.release();
+    this.root = null;
+  }
+  release() {
+    this.observer?.disconnect();
+    this.observer = null;
+    if (this.root) applyZoom(this.root, 1);
+    this.host.style.removeProperty("--docx-sheet-width");
+  }
+  /** The host's content box, which is the space a page has to fit into. */
+  availableWidthPx() {
+    const style = typeof getComputedStyle === "function" ? getComputedStyle(this.host) : null;
+    const padding = style ? (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0) : 0;
+    return Math.max(0, this.host.clientWidth - padding);
+  }
+  /**
+   * Give each section wrapper its `w:sectPr` geometry: the authored text column, guttered by
+   * the authored margins. The wrapper then measures exactly one page wide, which is what the
+   * sheet chrome paints and what the fit zoom scales.
+   */
+  stampSections(root) {
+    const sections = sectionWrappers(root);
+    if (this.options.columnWidth === "fluid") {
+      root.style.removeProperty("width");
+      for (const section of sections) {
+        section.style.removeProperty("width");
+        section.style.removeProperty("padding-left");
+        section.style.removeProperty("padding-right");
+      }
+      return { width: 0, height: 0 };
+    }
+    let widest = 0;
+    for (const section of sections) {
+      const dims = parseSectionDimensions(section);
+      section.style.width = `${dims.contentWidth}pt`;
+      section.style.paddingLeft = `${dims.marginLeft}pt`;
+      section.style.paddingRight = `${dims.marginRight}pt`;
+      section.style.boxSizing = "content-box";
+      section.style.marginLeft = "auto";
+      section.style.marginRight = "auto";
+      widest = Math.max(widest, dims.pageWidth);
+    }
+    if (widest > 0 && sections[0] !== root) root.style.width = `${widest}pt`;
+    return { width: widest, height: 0 };
+  }
+  /**
+   * The paginated view's page boxes are already page-sized — `pagination.ts` writes each
+   * box's `width` in points — so the widest of those is the natural width. Reading the
+   * inline width rather than the laid-out box keeps this independent of the per-box zoom
+   * pagination may itself have applied.
+   */
+  measurePages(root) {
+    let widest = 0;
+    for (const box of Array.from(root.children)) {
+      const declared = /^([\d.]+)pt$/.exec(box.style.width || "");
+      widest = Math.max(widest, declared ? parseFloat(declared[1]) : pxToPt(box.offsetWidth));
+    }
+    return { width: widest, height: 0 };
+  }
+};
+
 // src/editor-headerfooter.ts
 var PAGE_FORMAT_LABELS = [
   { value: "", label: "Format\u2026" },
@@ -4796,6 +4938,146 @@ function draggable(args) {
   return once(cleanup);
 }
 
+// node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/element/custom-native-drag-preview/set-custom-native-drag-preview.js
+function ownKeys4(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread4(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys4(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys4(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
+    });
+  }
+  return e;
+}
+function defaultOffset() {
+  return {
+    x: 0,
+    y: 0
+  };
+}
+function setCustomNativeDragPreview(_ref) {
+  var render = _ref.render, nativeSetDragImage = _ref.nativeSetDragImage, _ref$getOffset = _ref.getOffset, getOffset = _ref$getOffset === void 0 ? defaultOffset : _ref$getOffset;
+  var container = document.createElement("div");
+  if (supportsPopover()) {
+    container.setAttribute("popover", "manual");
+  }
+  Object.assign(container.style, _objectSpread4(_objectSpread4({
+    // Ensuring we don't cause reflow when adding the element to the page
+    // Using `position:fixed` rather than `position:absolute` so we are
+    // positioned on the current viewport.
+    // `position:fixed` also creates a new stacking context, so we don't need to do that here
+    position: "fixed"
+  }, supportsPopover() ? (
+    // needs to come first as it has 'inset: unset' which
+    // needs to be overridden by our top / left values
+    popoverResetUserAgentStyles
+  ) : {
+    // Fallback: using maximum possible z-index so that this element
+    // will always be on top of other positioned content.
+    zIndex: maxZIndex
+  }), {}, {
+    // According to `mdn`, the element can be offscreen:
+    // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage#imgelement
+    //
+    // However, that  information does not appear in the specs:
+    // https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-setdragimage-dev
+    //
+    // If the element is _completely_ offscreen, Safari@17.1 will cancel the drag
+    top: 0,
+    left: 0,
+    // Avoiding any additional events caused by the new element (being super safe)
+    pointerEvents: "none"
+  }));
+  document.body.append(container);
+  if (supportsPopover()) {
+    container.showPopover();
+  }
+  var unmount = render({
+    container
+  });
+  queueMicrotask(function() {
+    var previewOffset = getOffset({
+      container
+    });
+    if (isSafari()) {
+      var rect = container.getBoundingClientRect();
+      if (rect.width === 0) {
+        return;
+      }
+      container.style.left = "-".concat(rect.width - 1e-4, "px");
+    }
+    nativeSetDragImage === null || nativeSetDragImage === void 0 || nativeSetDragImage(container, previewOffset.x, previewOffset.y);
+  });
+  function cleanup() {
+    unbindMonitor();
+    unmount === null || unmount === void 0 || unmount();
+    document.body.removeChild(container);
+  }
+  var unbindMonitor = monitorForElements({
+    // Remove portal in the dragstart event so that the user will never see it
+    onDragStart: cleanup,
+    // Backup: remove portal when the drop finishes (this would be an error case)
+    onDrop: cleanup
+  });
+}
+
+// node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/is-safari-on-ios.js
+var isSafariOnIOS = once(function isSafariOnIOS2() {
+  if (false) {
+    return false;
+  }
+  return isSafari() && "ontouchend" in document;
+});
+
+// node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/element/custom-native-drag-preview/center-under-pointer.js
+var centerUnderPointer = function centerUnderPointer2(_ref) {
+  var container = _ref.container;
+  var rect = container.getBoundingClientRect();
+  return {
+    x: rect.width / 2,
+    y: rect.height / 2
+  };
+};
+
+// node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js
+function pointerOutsideOfPreview(point) {
+  return function getOffset(_ref) {
+    var container = _ref.container;
+    if (isSafariOnIOS() || isAndroid()) {
+      return centerUnderPointer({
+        container
+      });
+    }
+    Object.assign(container.style, {
+      borderInlineStart: "".concat(point.x, " solid transparent"),
+      borderTop: "".concat(point.y, " solid transparent")
+    });
+    var computed = window.getComputedStyle(container);
+    if (computed.direction === "rtl") {
+      var box = container.getBoundingClientRect();
+      return {
+        x: box.width,
+        y: 0
+      };
+    }
+    return {
+      x: 0,
+      y: 0
+    };
+  };
+}
+
 // node_modules/@atlaskit/pragmatic-drag-and-drop-auto-scroll/dist/esm/shared/engagement-history.js
 var ledger2 = /* @__PURE__ */ new Map();
 var requested = /* @__PURE__ */ new Set();
@@ -4929,7 +5211,7 @@ function addScrollableAttribute(element) {
 }
 
 // node_modules/@atlaskit/pragmatic-drag-and-drop-auto-scroll/dist/esm/shared/configuration.js
-function ownKeys4(e, r) {
+function ownKeys5(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
     var o = Object.getOwnPropertySymbols(e);
@@ -4939,12 +5221,12 @@ function ownKeys4(e, r) {
   }
   return t;
 }
-function _objectSpread4(e) {
+function _objectSpread5(e) {
   for (var r = 1; r < arguments.length; r++) {
     var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys4(Object(t), true).forEach(function(r2) {
+    r % 2 ? ownKeys5(Object(t), true).forEach(function(r2) {
       _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys4(Object(t)).forEach(function(r2) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys5(Object(t)).forEach(function(r2) {
       Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
     });
   }
@@ -4979,7 +5261,7 @@ var maxPixelScrollPerSecond = {
 };
 function getInternalConfig(provided) {
   var _provided$maxScrollSp;
-  return _objectSpread4(_objectSpread4({}, baseConfig), {}, {
+  return _objectSpread5(_objectSpread5({}, baseConfig), {}, {
     // only allowing limited control over the config at this stage
     maxPixelScrollPerSecond: maxPixelScrollPerSecond[(_provided$maxScrollSp = provided === null || provided === void 0 ? void 0 : provided.maxScrollSpeed) !== null && _provided$maxScrollSp !== void 0 ? _provided$maxScrollSp : "standard"]
   });
@@ -5463,7 +5745,7 @@ function tryScroll(_ref3) {
 }
 
 // node_modules/@atlaskit/pragmatic-drag-and-drop-auto-scroll/dist/esm/over-element/make-api.js
-function ownKeys5(e, r) {
+function ownKeys6(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
     var o = Object.getOwnPropertySymbols(e);
@@ -5473,12 +5755,12 @@ function ownKeys5(e, r) {
   }
   return t;
 }
-function _objectSpread5(e) {
+function _objectSpread6(e) {
   for (var r = 1; r < arguments.length; r++) {
     var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys5(Object(t), true).forEach(function(r2) {
+    r % 2 ? ownKeys6(Object(t), true).forEach(function(r2) {
       _defineProperty(e, r2, t[r2]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys5(Object(t)).forEach(function(r2) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys6(Object(t)).forEach(function(r2) {
       Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
     });
   }
@@ -5517,7 +5799,7 @@ function makeApi(_ref) {
   }
   function autoScrollWindow() {
     var args = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    var unique = _objectSpread5({}, args);
+    var unique = _objectSpread6({}, args);
     windowRegistry.add(unique);
     function cleanup() {
       windowRegistry.delete(unique);
@@ -5670,6 +5952,11 @@ function needsRemount(diff, newUnits, oldKinds, threshold = 40) {
 var EDITABLE_TAGS = /* @__PURE__ */ new Set(["P", "H1", "H2", "H3", "H4", "H5", "H6"]);
 var BLOCK_DRAG_TYPE = "docxodus-block";
 var blockDragStyledDocuments = /* @__PURE__ */ new WeakSet();
+function blockPreviewText(unit) {
+  if (unit.tagName === "TABLE") return "Table";
+  const text = (unit.textContent ?? "").trim().replace(/\s+/g, " ");
+  return text.length > 48 ? `${text.slice(0, 48)}\u2026` : text;
+}
 function ensureBlockDragStyles(doc) {
   if (blockDragStyledDocuments.has(doc)) return;
   blockDragStyledDocuments.add(doc);
@@ -5684,10 +5971,28 @@ function ensureBlockDragStyles(doc) {
 }
 .docx-block-handle:hover, .docx-block-handle:focus-visible { color: #344054; border-color: #98a2b3; outline: none; }
 .docx-block-handle[aria-pressed="true"] { color: #175cd3; border-color: #84adff; background: #eff8ff; }
-.docx-block-handle.docx-block-dragging { cursor: grabbing; opacity: .78; }
+.docx-block-handle.docx-block-dragging { cursor: grabbing; opacity: .35; }
+/* The block being carried. Dimming it is the "a drag is happening" signal that survives the
+   pointer being anywhere on screen \u2014 the drop line only says where, not what. */
+.docx-block-drag-source { opacity: .38; transition: opacity 120ms ease-out; }
+/* Positioned by transform so tracking the pointer costs no layout. Flipping display none\u2192block
+   restarts the fade \u2014 one cheap entry animation per appearance, none while it tracks. */
 .docx-block-drop-indicator {
-  position: fixed; z-index: 2147482999; display: none; height: 3px; pointer-events: none;
-  border-radius: 999px; background: #2e90fa; box-shadow: 0 0 0 1px rgba(255,255,255,.85);
+  position: fixed; top: 0; left: 0; z-index: 2147482999; display: none; height: 0;
+  pointer-events: none; border-top: 2px solid #2e90fa;
+  filter: drop-shadow(0 1px 2px rgba(46,144,250,.5));
+  animation: docx-block-drop-in 110ms ease-out;
+}
+.docx-block-drop-indicator::before {
+  content: ""; position: absolute; top: -5px; left: -2px; width: 8px; height: 8px;
+  border-radius: 50%; background: #2e90fa;
+}
+@keyframes docx-block-drop-in { from { opacity: 0; } to { opacity: 1; } }
+.docx-block-drag-preview {
+  max-width: 320px; padding: 6px 10px; border: 1px solid #b2ddff; border-radius: 6px;
+  background: #eff8ff; color: #175cd3; box-shadow: 0 6px 16px rgba(16,24,40,.18);
+  font: 500 13px/1.35 system-ui, sans-serif; white-space: nowrap; overflow: hidden;
+  text-overflow: ellipsis;
 }
 .docx-block-move-menu {
   position: fixed; z-index: 2147483001; display: none; min-width: 150px; padding: 5px;
@@ -6075,7 +6380,11 @@ var DocxEditor = class _DocxEditor {
     this.blockMoveLive = null;
     this.blockDragSource = null;
     this.blockDragCleanup = [];
-    this.blockDragTargetCleanup = [];
+    /** Block boxes measured at drag start — see `BlockDropZone`. Empty when no drag is in flight. */
+    this.dropZones = [];
+    /** Combined scroll offset when `dropZones` was measured, and the scroller measured against. */
+    this.dropZoneOrigin = 0;
+    this.dropZoneScroller = null;
     this.blockDragging = false;
     this.blockDragPointerDown = false;
     /** Anchors the current drag source may legally move next to, per the engine's own rules.
@@ -6204,6 +6513,11 @@ var DocxEditor = class _DocxEditor {
     this.handle = handle;
     this.options = options;
     this.editRoot = container;
+    this.viewport = new DocumentViewport(container, {
+      columnWidth: options.columnWidth,
+      fitToWidth: options.fitToWidth,
+      scale: options.scale
+    });
     if (typeof document !== "undefined") {
       document.addEventListener("selectionchange", this.onSelectionChange);
       document.addEventListener("mousedown", this.onMouseDown, true);
@@ -6286,6 +6600,8 @@ var DocxEditor = class _DocxEditor {
       editable: options.editable ?? true,
       paginated: options.paginated ?? false,
       scale: options.scale ?? 1,
+      columnWidth: options.columnWidth ?? "section",
+      fitToWidth: options.fitToWidth ?? true,
       headerFooter: options.headerFooter ?? false,
       blockDrag: options.blockDrag ?? false,
       trackedChanges: options.trackedChanges ?? 0 /* Accept */,
@@ -6342,6 +6658,7 @@ var DocxEditor = class _DocxEditor {
     }
     this.clearDragSelection();
     this.teardownBlockDrag();
+    this.viewport.dispose();
     this.exports.DocxSessionBridge.CloseSession(this.handle);
   }
   /**
@@ -6359,6 +6676,14 @@ var DocxEditor = class _DocxEditor {
   get root() {
     return this.container;
   }
+  /**
+   * The zoom the viewport is currently applying (1 = 100%). Below 1 the page is wider than the
+   * host and has been scaled to fit rather than reflowed — the honest thing to show a user who
+   * is wondering why a phone shows the whole page.
+   */
+  get zoom() {
+    return this.viewport.scale;
+  }
   /**
    * The live `DocxSession` handle backing this editor — the model of record.
    *
@@ -6369,6 +6694,19 @@ var DocxEditor = class _DocxEditor {
   get sessionHandle() {
     return this.handle;
   }
+  /**
+   * Repaint from the live session after it was mutated OUTSIDE the editor's own
+   * commands — a host driving {@link sessionHandle} directly (an agent pipeline,
+   * `raw.replaceXml`, a batch import). Continuous mode patches incrementally from
+   * the render plan (a Unid-preserving single-block mutation repaints just that
+   * block); paginated mode — or anything the reconciler cannot prove — remounts.
+   * The editor cannot observe external mutations, so the host owns calling this
+   * once per mutation batch.
+   */
+  refresh() {
+    this.assertOpen();
+    this.reconcile();
+  }
   /** Move one top-level body block relative to another and repaint from the live session. */
   moveBlock(sourceAnchorId, targetAnchorId, position) {
     this.assertOpen();
@@ -6449,7 +6787,7 @@ var DocxEditor = class _DocxEditor {
     handle.style.display = "flex";
     handle.style.left = `${Math.max(4, rect.left - 32)}px`;
     handle.style.top = `${Math.max(4, rect.top + (unit.tagName === "TABLE" ? 6 : Math.max(0, (rect.height - 28) / 2)))}px`;
-    const preview = (unit.textContent ?? "").trim().replace(/\s+/g, " ").slice(0, 48);
+    const preview = blockPreviewText(unit);
     handle.setAttribute("aria-label", preview ? `Move block: ${preview}` : "Move block");
   }
   hideBlockHandle() {
@@ -6460,14 +6798,33 @@ var DocxEditor = class _DocxEditor {
     const source = this.currentBlockDragSource();
     if (source && this.blockDragHandle?.style.display !== "none") this.showBlockHandle(source);
   }
-  showDropIndicator(target, position) {
+  /** Draw the drop line on `zone`'s requested edge, or take it away when there is no target. */
+  paintDropIndicator(data) {
     const indicator = this.blockDropIndicator;
+    const zone = data.zone;
     if (!indicator) return;
-    const rect = this.unitWrapperOf(target).getBoundingClientRect();
+    if (!zone) {
+      this.hideDropIndicator();
+      return;
+    }
+    const y = Math.round(this.dropEdgeY(zone, data.position === "after" ? "after" : "before") + this.dropZoneShift()) - 1;
+    indicator.style.transform = `translate3d(${Math.round(zone.left)}px, ${y}px, 0)`;
+    indicator.style.width = `${Math.max(24, Math.round(zone.width))}px`;
     indicator.style.display = "block";
-    indicator.style.left = `${rect.left}px`;
-    indicator.style.top = `${position === "before" ? rect.top - 1 : rect.bottom - 1}px`;
-    indicator.style.width = `${Math.max(24, rect.width)}px`;
+  }
+  /**
+   * Where to draw the line for an insertion on `position` of `zone` — the MIDDLE of the gap to
+   * the neighbour on that side, not the zone's own border-box edge. A paragraph's `w:spacing`
+   * becomes a CSS margin, which sits outside the box, so drawing on the edge underlines the
+   * block's last line instead of reading as a gap between two blocks. Falls back to the raw edge
+   * at the ends of the flow, and degrades to the same value when blocks are contiguous.
+   */
+  dropEdgeY(zone, position) {
+    const neighbour = this.dropZones[zone.index + (position === "after" ? 1 : -1)];
+    if (!neighbour) {
+      return position === "after" ? zone.bottom + zone.marginAfter / 2 : zone.top - zone.marginBefore / 2;
+    }
+    return position === "after" ? (zone.bottom + neighbour.top) / 2 : (neighbour.bottom + zone.top) / 2;
   }
   hideDropIndicator() {
     if (this.blockDropIndicator) this.blockDropIndicator.style.display = "none";
@@ -6547,45 +6904,75 @@ var DocxEditor = class _DocxEditor {
     if (!sides) return false;
     return position ? sides[position] : sides.before || sides.after;
   }
+  /** Measure every movable block once, at drag start. See `BlockDropZone`. */
+  captureDropZones() {
+    const view = this.container.ownerDocument.defaultView;
+    this.dropZoneScroller = this.scrollContainer();
+    this.dropZoneOrigin = this.scrollOffsetSum();
+    this.dropZones = [];
+    const boxes = [];
+    for (const unit of this.bodyUnitNodes()) {
+      const anchorId = this.isMovableBlockUnit(unit) ? this.anchorIdOf(unit) : null;
+      if (!anchorId) continue;
+      const box = this.unitWrapperOf(unit);
+      const rect = box.getBoundingClientRect();
+      boxes.push(box);
+      this.dropZones.push({
+        unit,
+        anchorId,
+        index: this.dropZones.length,
+        top: rect.top,
+        bottom: rect.bottom,
+        left: rect.left,
+        width: rect.width,
+        marginBefore: 0,
+        marginAfter: 0
+      });
+    }
+    const ends = new Set([0, this.dropZones.length - 1].filter((i) => i >= 0 && i < boxes.length));
+    for (const i of ends) {
+      const style = view?.getComputedStyle(boxes[i]);
+      this.dropZones[i].marginBefore = parseFloat(style?.marginTop ?? "0") || 0;
+      this.dropZones[i].marginAfter = parseFloat(style?.marginBottom ?? "0") || 0;
+    }
+  }
+  scrollOffsetSum() {
+    const view = this.container.ownerDocument.defaultView;
+    return (view?.scrollY ?? 0) + (this.dropZoneScroller?.scrollTop ?? 0);
+  }
+  /** How far the measured boxes have travelled since capture, from scrolling (drag autoscroll). */
+  dropZoneShift() {
+    return this.dropZoneOrigin - this.scrollOffsetSum();
+  }
   /**
-   * The side of `unit` a drop at `clientY` should land on: the half the pointer is in, snapped to
-   * the other side when only that one is legal. Snapping rather than refusing keeps a reachable
-   * target usable — the illegal side is usually illegal only because a section break or a
-   * cross-block range sits between the two blocks on that side.
-   */
-  dropPositionFor(unit, clientY) {
-    const rect = unit.getBoundingClientRect();
-    const preferred = clientY < rect.top + rect.height / 2 ? "before" : "after";
-    if (this.isValidMoveTarget(unit, preferred)) return preferred;
-    const other = preferred === "before" ? "after" : "before";
-    return this.isValidMoveTarget(unit, other) ? other : preferred;
-  }
-  refreshBlockDropTargets() {
-    for (const cleanup of this.blockDragTargetCleanup.splice(0)) cleanup();
-    if (!this.blockDragHandle || this.options.paginated) return;
-    for (const unit of this.bodyUnitNodes().filter((el) => this.isMovableBlockUnit(el))) {
-      this.blockDragTargetCleanup.push(dropTargetForElements({
-        element: unit,
-        // A target the engine would refuse is not a drop target at all, so Pragmatic never
-        // fires onDragEnter for it and no indicator is drawn over it.
-        canDrop: ({ source }) => source.data.type === BLOCK_DRAG_TYPE && source.data.sourceAnchorId !== this.anchorIdOf(unit) && this.isValidMoveTarget(unit),
-        getData: ({ input }) => ({
-          type: BLOCK_DRAG_TYPE,
-          targetAnchorId: this.anchorIdOf(unit),
-          position: this.dropPositionFor(unit, input.clientY),
-          targetElement: unit
-        }),
-        onDragEnter: ({ self }) => {
-          const pos = self.data.position === "after" ? "after" : "before";
-          this.showDropIndicator(unit, pos);
-        },
-        onDrag: ({ self }) => {
-          const pos = self.data.position === "after" ? "after" : "before";
-          this.showDropIndicator(unit, pos);
-        },
-        onDragLeave: () => this.hideDropIndicator()
-      }));
+   * Where a drop at `clientY` lands, or null when nothing there is legal.
+   *
+   * Resolution is by VERTICAL GEOMETRY over the measured blocks, not by which element the pointer
+   * is over: the drag handle floats in the page margin, so a drag straight down the gutter — the
+   * natural gesture — never crosses a paragraph box, and element hit testing gave those drags no
+   * indicator and no drop at all. The nearest block by vertical distance is the target; the half
+   * the pointer is in picks the side, snapped to the other side when only that one is legal
+   * (a section break or a cross-block range usually makes exactly one side illegal). When neither
+   * side is legal — the pointer is in a region this block cannot reach — there is no drop, and
+   * nothing is drawn.
+   */
+  resolveDropAt(clientY) {
+    const y = clientY - this.dropZoneShift();
+    let best = null;
+    let bestGap = Infinity;
+    for (const zone of this.dropZones) {
+      const gap = y < zone.top ? zone.top - y : y > zone.bottom ? y - zone.bottom : 0;
+      if (gap < bestGap) {
+        best = zone;
+        bestGap = gap;
+      }
+      if (gap === 0) break;
     }
+    if (!best || best.unit === this.blockDragSource) return null;
+    const preferred = y < (best.top + best.bottom) / 2 ? "before" : "after";
+    if (this.isValidMoveTarget(best.unit, preferred)) return { zone: best, position: preferred };
+    const other = preferred === "before" ? "after" : "before";
+    return this.isValidMoveTarget(best.unit, other) ? { zone: best, position: other } : null;
   }
   closeBlockMoveMenu(restoreFocus = false) {
     if (!this.blockMoveMenu || !this.blockDragHandle) return;
@@ -6760,20 +7147,50 @@ var DocxEditor = class _DocxEditor {
         const source = this.currentBlockDragSource();
         return { type: BLOCK_DRAG_TYPE, sourceAnchorId: source ? this.anchorIdOf(source) : void 0 };
       },
+      // The browser would otherwise ghost the 26px grip, which says nothing about what is moving.
+      onGenerateDragPreview: ({ nativeSetDragImage }) => {
+        const source = this.currentBlockDragSource();
+        setCustomNativeDragPreview({
+          nativeSetDragImage,
+          getOffset: pointerOutsideOfPreview({ x: "14px", y: "10px" }),
+          render: ({ container }) => {
+            const chip = doc.createElement("div");
+            chip.className = "docx-block-drag-preview";
+            chip.textContent = source && blockPreviewText(source) || "Move block";
+            container.appendChild(chip);
+            return () => chip.remove();
+          }
+        });
+      },
       onDragStart: () => {
+        const source = this.currentBlockDragSource();
         this.blockDragging = true;
         handle.classList.add("docx-block-dragging");
+        source?.classList.add("docx-block-drag-source");
         this.closeBlockMoveMenu();
-        this.refreshBlockMoveTargets(this.currentBlockDragSource());
-        this.refreshBlockDropTargets();
+        this.refreshBlockMoveTargets(source);
+        this.captureDropZones();
       },
       onDrop: () => {
         this.blockDragging = false;
         this.blockDragPointerDown = false;
+        this.dropZones = [];
         handle.classList.remove("docx-block-dragging");
+        doc.querySelectorAll(".docx-block-drag-source").forEach((el) => el.classList.remove("docx-block-drag-source"));
         this.hideDropIndicator();
       }
     }));
+    this.blockDragCleanup.push(dropTargetForElements({
+      element: this.editRoot,
+      canDrop: ({ source }) => source.data.type === BLOCK_DRAG_TYPE,
+      getData: ({ input }) => {
+        const hit = this.resolveDropAt(input.clientY);
+        return hit ? { type: BLOCK_DRAG_TYPE, targetAnchorId: hit.zone.anchorId, position: hit.position, zone: hit.zone } : { type: BLOCK_DRAG_TYPE };
+      },
+      onDragEnter: ({ self }) => this.paintDropIndicator(self.data),
+      onDrag: ({ self }) => this.paintDropIndicator(self.data),
+      onDragLeave: () => this.hideDropIndicator()
+    }));
     this.blockDragCleanup.push(monitorForElements({
       canMonitor: ({ source }) => source.data.type === BLOCK_DRAG_TYPE,
       onDrop: ({ source, location: location2 }) => {
@@ -6800,13 +7217,13 @@ var DocxEditor = class _DocxEditor {
       canScroll: ({ source }) => source.data.type === BLOCK_DRAG_TYPE,
       getAllowedAxis: () => "vertical"
     }));
-    this.refreshBlockDropTargets();
   }
   teardownBlockDrag() {
     this.blockMoveTargetPrefetch?.();
     this.blockMoveTargetPrefetch = null;
     this.blockMoveTargetCache.clear();
-    for (const cleanup of this.blockDragTargetCleanup.splice(0)) cleanup();
+    this.dropZones = [];
+    this.dropZoneScroller = null;
     for (const cleanup of this.blockDragCleanup.splice(0)) cleanup();
     this.blockDragHandle?.remove();
     this.blockDropIndicator?.remove();
@@ -6895,17 +7312,17 @@ var DocxEditor = class _DocxEditor {
     bodyRoot.after(this.region.footerBand);
     this.region.refreshAll();
   }
-  /** Continuous (non-paginated) mount: inject the converter's styles + body, wire blocks. */
+  /**
+   * Continuous (non-paginated) mount: inject the converter's styles + body, wire blocks.
+   *
+   * The body always gets its own `.docx-body-flow` wrapper — not only when bands are docked.
+   * It is the sheet: the element the viewport gives page geometry to and zooms, and the one
+   * the bands dock around. Without it the container would have to be both the scrolling host
+   * and the scaled page, which are different boxes.
+   */
   mountHtml(fullHtml) {
     const parsed = new DOMParser().parseFromString(fullHtml, "text/html");
     const styles = Array.from(parsed.querySelectorAll("style")).map((s) => s.outerHTML).join("");
-    if (!this.region) {
-      this.container.innerHTML = styles + parsed.body.innerHTML;
-      this.editRoot = this.container;
-      if (this.options.editable) this.wireBlocks(this.container);
-      this.stampPlanState();
-      return;
-    }
     this.container.innerHTML = styles;
     const flow = document.createElement("div");
     flow.className = "docx-body-flow";
@@ -6914,7 +7331,8 @@ var DocxEditor = class _DocxEditor {
     this.editRoot = flow;
     if (this.options.editable) this.wireBlocks(flow);
     this.stampPlanState();
-    this.dockBands(flow);
+    if (this.region) this.dockBands(flow);
+    this.viewport.attach(flow, true);
   }
   /** Paginated mount: flow blocks into page boxes via pagination.ts, wire the page clones. */
   mountPaginated(fullHtml) {
@@ -6935,6 +7353,7 @@ var DocxEditor = class _DocxEditor {
     this.editRoot = pageRoot;
     if (this.options.editable) this.wireBlocks(pageRoot);
     if (this.region) this.dockBands(target);
+    this.viewport.attach(pageRoot, false);
   }
   wireBlocks(root) {
     root.querySelectorAll("[data-anchor]").forEach((el) => this.wireBlock(el));
@@ -8743,14 +9162,7 @@ var RIBBON_CSS = `
    SHOULD win.
    (No backticks in this file's comments: the stylesheet is a template literal.) */
 .dxr-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
-.dxr[data-chrome] .dxr-surface { max-width: 920px; margin: 26px auto; padding: 0 16px 96px; }
-.dxr-surface[data-view="continuous"] > * { background: var(--dxr-sheet); }
-.dxr[data-chrome] .dxr-surface[data-view="continuous"] {
-  padding: 56px 72px;
-  border-radius: 3px;
-  background: var(--dxr-sheet);
-  box-shadow: 0 1px 3px rgba(16, 20, 24, .14), 0 8px 24px rgba(16, 20, 24, .05);
-}
+.dxr[data-chrome] .dxr-surface { margin: 26px auto; padding: 0 16px 96px; }
 .dxr-surface [contenteditable="true"]:focus {
   outline: 2px solid var(--dxr-accent);
   outline-offset: 2px;
@@ -8762,7 +9174,10 @@ var RIBBON_CSS = `
    so they dock as their own regions. Styled from the same tokens as the ribbon
    so the surface reads as one instrument rather than two apps. */
 .dxr-surface .docx-hf-band {
-  margin: 0 0 14px;
+  /* Docked outside the zoomed sheet, so it takes the page's on-screen width from the
+     custom property the viewport publishes rather than stretching to the whole surface. */
+  width: min(100%, var(--docx-sheet-width, 100%));
+  margin: 0 auto 14px;
   padding: 9px 72px 13px;
   border: 1px solid var(--dxr-rule);
   border-left: 2px solid #c2ccd9;
@@ -8770,7 +9185,7 @@ var RIBBON_CSS = `
   background: var(--dxr-sheet);
 }
 .dxr-surface .docx-hf-band + .docx-body-flow { margin-top: 0; }
-.dxr-surface .docx-hf-band[data-hf-band="footer"] { margin: 14px 0 0; }
+.dxr-surface .docx-hf-band[data-hf-band="footer"] { margin: 14px auto 0; }
 .dxr-surface .docx-hf-chrome {
   display: flex;
   gap: 8px;
@@ -8825,13 +9240,15 @@ var RIBBON_CSS = `
   text-transform: none;
 }
 .dxr-surface .docx-hf-band[data-hf-inherited] { border-style: dashed; }
-.dxr[data-chrome] .dxr-surface[data-view="continuous"]:has(.docx-body-flow) {
-  padding: 0;
-  background: transparent;
-  box-shadow: none;
-}
+/* The sheet IS the page. The editor's viewport sizes .docx-body-flow to the section's page
+   width and its section wrappers to the authored text column, so the horizontal gutters here
+   are the document's own w:sectPr margins, not a padding this chrome invents; only the
+   vertical breathing room is ours. Centering is left to margin:auto so a page the viewport
+   has zoomed to fit stays centered at its scaled width. */
 .dxr[data-chrome] .dxr-surface[data-view="continuous"] .docx-body-flow {
-  padding: 56px 72px;
+  max-width: 100%;
+  margin: 0 auto;
+  padding: 56px 0;
   border-radius: 3px;
   background: var(--dxr-sheet);
   box-shadow: 0 1px 3px rgba(16, 20, 24, .14), 0 8px 24px rgba(16, 20, 24, .05);
@@ -8910,9 +9327,11 @@ var RIBBON_CSS = `
 .dxr[data-chrome="compact"] .dxr-note { display: none; }
 .dxr[data-chrome="compact"] .dxr-rail { display: none; }
 .dxr[data-chrome="compact"] .dxr-hint { display: none; }
+/* Compact trims the chrome around the page, never the page: the document's own column width
+   is what the viewport's fit-to-width zoom scales, so a phone shows a whole smaller page
+   instead of a narrower one that breaks its lines somewhere Word never would. */
 .dxr[data-chrome="compact"] .dxr-surface { margin: 12px auto; padding: 0 10px 64px; }
-.dxr[data-chrome="compact"] .dxr-surface[data-view="continuous"] { padding: 22px 18px; }
-.dxr[data-chrome="compact"] .dxr-surface[data-view="continuous"] .docx-body-flow { padding: 22px 18px; }
+.dxr[data-chrome="compact"] .dxr-surface[data-view="continuous"] .docx-body-flow { padding: 22px 0; }
 .dxr[data-chrome="compact"] .dxr-surface .docx-hf-band { padding: 9px 18px 13px; }
 .dxr[data-chrome="compact"] .dxr-surface .docx-hf-chrome,
 .dxr[data-chrome="compact"] .dxr-surface .docx-hf-warning { margin-left: 0; }
@@ -9662,6 +10081,8 @@ var RibbonSurface = class {
       fabricateClasses: this.options.fabricateClasses,
       editable: this.options.editable,
       scale: this.options.scale,
+      columnWidth: this.options.columnWidth,
+      fitToWidth: this.options.fitToWidth,
       onEdit: this.options.onEdit,
       onMove: this.options.onMove,
       paginated,
@@ -11633,8 +12054,12 @@ export {
   ComparisonLogLevel,
   ConflictResolution,
   ContextBoundary,
+  DEFAULT_MARGIN,
+  DEFAULT_PAGE_HEIGHT,
+  DEFAULT_PAGE_WIDTH,
   DiffFormat,
   DocumentElementType,
+  DocumentViewport,
   DocxDiffFormatComparison,
   DocxDiffRevisionGranularity,
   DocxEditor,
@@ -11680,6 +12105,7 @@ export {
   findElementsByType,
   findMovePair,
   findTextOccurrences,
+  fitScale,
   generateAnnotationCss,
   generateAnnotationVisibilityCss,
   getAnnotations,
@@ -11703,7 +12129,10 @@ export {
   mountRibbon,
   openDocxSession2 as openDocxSession,
   paginateHtml,
+  parseSectionDimensions,
   projectAnnotationsOntoHtml,
+  ptToPx,
+  pxToPt,
   removeAnnotation,
   removeAnnotationFromHtml,
   renderBlockHtml,