docxodus 9.4.0 → 9.5.0

package/dist/editor.bundle.js

@@ -161,20 +161,18 @@ var DocxodusEditor = (() => {
     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;
@@ -198,6 +196,42 @@ var DocxodusEditor = (() => {
       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.
@@ -243,7 +277,7 @@ var DocxodusEditor = (() => {
       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";
@@ -1541,6 +1575,114 @@ var DocxodusEditor = (() => {
     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" },
@@ -3629,6 +3771,146 @@ var DocxodusEditor = (() => {
     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();
@@ -3762,7 +4044,7 @@ var DocxodusEditor = (() => {
   }
 
   // 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);
@@ -3772,12 +4054,12 @@ var DocxodusEditor = (() => {
     }
     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));
       });
     }
@@ -3812,7 +4094,7 @@ var DocxodusEditor = (() => {
   };
   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"]
     });
@@ -4296,7 +4578,7 @@ var DocxodusEditor = (() => {
   }
 
   // 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);
@@ -4306,12 +4588,12 @@ var DocxodusEditor = (() => {
     }
     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));
       });
     }
@@ -4350,7 +4632,7 @@ var DocxodusEditor = (() => {
     }
     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);
@@ -4503,6 +4785,11 @@ var DocxodusEditor = (() => {
   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);
@@ -4517,10 +4804,28 @@ var DocxodusEditor = (() => {
 }
 .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;
@@ -4908,7 +5213,11 @@ var DocxodusEditor = (() => {
       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.
@@ -5037,6 +5346,11 @@ var DocxodusEditor = (() => {
       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);
@@ -5119,6 +5433,8 @@ var DocxodusEditor = (() => {
         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 */,
@@ -5175,6 +5491,7 @@ var DocxodusEditor = (() => {
       }
       this.clearDragSelection();
       this.teardownBlockDrag();
+      this.viewport.dispose();
       this.exports.DocxSessionBridge.CloseSession(this.handle);
     }
     /**
@@ -5192,6 +5509,14 @@ var DocxodusEditor = (() => {
     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.
      *
@@ -5282,7 +5607,7 @@ var DocxodusEditor = (() => {
       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() {
@@ -5293,14 +5618,33 @@ var DocxodusEditor = (() => {
       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";
@@ -5380,45 +5724,75 @@ var DocxodusEditor = (() => {
       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.
+     * 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.
      */
-    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()
-        }));
+    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;
@@ -5593,20 +5967,50 @@ var DocxodusEditor = (() => {
           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 }) => {
@@ -5633,13 +6037,13 @@ var DocxodusEditor = (() => {
         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();
@@ -5728,17 +6132,17 @@ var DocxodusEditor = (() => {
       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";
@@ -5747,7 +6151,8 @@ var DocxodusEditor = (() => {
       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) {
@@ -5768,6 +6173,7 @@ var DocxodusEditor = (() => {
       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));
@@ -7576,14 +7982,7 @@ var DocxodusEditor = (() => {
    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;
@@ -7595,7 +7994,10 @@ var DocxodusEditor = (() => {
    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;
@@ -7603,7 +8005,7 @@ var DocxodusEditor = (() => {
   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;
@@ -7658,13 +8060,15 @@ var DocxodusEditor = (() => {
   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);
@@ -7743,9 +8147,11 @@ var DocxodusEditor = (() => {
 .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; }
@@ -8495,6 +8901,8 @@ var DocxodusEditor = (() => {
         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,