@extend-ai/react-docx 0.9.1 → 0.9.2

package/dist/index.cjs

@@ -1503,7 +1503,7 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 init_cjs_shims();
-var React2 = __toESM(require("react"), 1);
+var React3 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
 
 // ../layout-engine/src/index.ts
@@ -1933,7 +1933,7 @@ async function importDocxBuffer(buffer, options = {}) {
 
 // src/editor.tsx
 init_cjs_shims();
-var React = __toESM(require("react"), 1);
+var React2 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 
 // src/pointer-drag.ts
@@ -2118,6 +2118,247 @@ function startObjectDrag(options) {
   return cancel;
 }
 
+// src/viewer-zoom.ts
+init_cjs_shims();
+var React = __toESM(require("react"), 1);
+var VIEWER_ZOOM_MIN = 50;
+var VIEWER_ZOOM_MAX = 200;
+function normalizeViewerZoomLevel(level) {
+  if (typeof level !== "number") {
+    return level;
+  }
+  if (!Number.isFinite(level)) {
+    return 100;
+  }
+  return Math.max(VIEWER_ZOOM_MIN, Math.min(VIEWER_ZOOM_MAX, level));
+}
+function resolveViewerZoom(level, dimensions) {
+  const normalizedLevel = normalizeViewerZoomLevel(level);
+  if (typeof normalizedLevel === "number") {
+    return normalizedLevel;
+  }
+  const safeContentWidth = Math.max(1, dimensions.contentWidth);
+  const safeContentHeight = Math.max(1, dimensions.contentHeight);
+  const fitWidth = Math.max(1, dimensions.viewportWidth) / safeContentWidth * 100;
+  const fitHeight = Math.max(1, dimensions.viewportHeight) / safeContentHeight * 100;
+  const resolved = normalizedLevel === "fit-page" ? Math.min(fitWidth, fitHeight) : normalizedLevel === "automatic" ? Math.min(fitWidth, 100) : fitWidth;
+  return Math.max(
+    VIEWER_ZOOM_MIN,
+    Math.min(VIEWER_ZOOM_MAX, resolved)
+  );
+}
+function isWindowScroller(element) {
+  return element === document.documentElement || element === document.body || element === document.scrollingElement;
+}
+function nearestScrollableAncestor(element) {
+  let current = element.parentElement;
+  while (current) {
+    const style = window.getComputedStyle(current);
+    if (/(auto|scroll|overlay|hidden)/.test(`${style.overflow} ${style.overflowY}`)) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return document.scrollingElement ?? document.documentElement;
+}
+function elementPadding(element) {
+  const style = window.getComputedStyle(element);
+  const number = (value) => {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+  };
+  return {
+    horizontal: number(style.paddingLeft) + number(style.paddingRight),
+    vertical: number(style.paddingTop) + number(style.paddingBottom)
+  };
+}
+function viewportRect(scroller) {
+  if (isWindowScroller(scroller)) {
+    return { top: 0, bottom: window.innerHeight };
+  }
+  const rect = scroller.getBoundingClientRect();
+  return { top: rect.top, bottom: rect.bottom };
+}
+function captureAnchor(root, scroller, pageSelector) {
+  const viewport = viewportRect(scroller);
+  let best;
+  root.querySelectorAll(pageSelector).forEach((element2) => {
+    const rect2 = element2.getBoundingClientRect();
+    const visible = Math.max(
+      0,
+      Math.min(rect2.bottom, viewport.bottom) - Math.max(rect2.top, viewport.top)
+    );
+    if (!best || visible > best.visible) {
+      best = { element: element2, visible };
+    }
+  });
+  if (!best || best.visible <= 0) {
+    return void 0;
+  }
+  const element = best.element;
+  const rect = element.getBoundingClientRect();
+  const pageIndex = element.dataset.docxPageIndex ?? element.dataset.pageIndex ?? element.dataset.page;
+  if (!pageIndex || rect.height <= 0) {
+    return void 0;
+  }
+  return {
+    pageIndex,
+    progress: Math.max(0, Math.min(1, (viewport.top - rect.top) / rect.height))
+  };
+}
+function restoreAnchor(root, scroller, pageSelector, anchor) {
+  const page = Array.from(root.querySelectorAll(pageSelector)).find(
+    (element) => (element.dataset.docxPageIndex ?? element.dataset.pageIndex ?? element.dataset.page) === anchor.pageIndex
+  );
+  if (!page) {
+    return;
+  }
+  const viewport = viewportRect(scroller);
+  const rect = page.getBoundingClientRect();
+  const desiredTop = viewport.top - anchor.progress * rect.height;
+  const delta = rect.top - desiredTop;
+  if (Math.abs(delta) < 0.5) {
+    return;
+  }
+  if (isWindowScroller(scroller)) {
+    window.scrollBy(0, delta);
+  } else {
+    scroller.scrollTop += delta;
+  }
+}
+function useViewerZoom({
+  zoom,
+  defaultZoom = 100,
+  onZoomChange,
+  rootRef,
+  contentWidth,
+  contentHeight,
+  pageSelector,
+  onBridgeChange
+}) {
+  const controlled = zoom !== void 0;
+  const [uncontrolledLevel, setUncontrolledLevel] = React.useState(
+    () => normalizeViewerZoomLevel(defaultZoom)
+  );
+  const level = normalizeViewerZoomLevel(controlled ? zoom : uncontrolledLevel);
+  const levelRef = React.useRef(level);
+  levelRef.current = level;
+  const [resolvedZoom, setResolvedZoom] = React.useState(
+    () => typeof level === "number" ? level : 100
+  );
+  const resolvedZoomRef = React.useRef(resolvedZoom);
+  resolvedZoomRef.current = resolvedZoom;
+  const onZoomChangeRef = React.useRef(onZoomChange);
+  onZoomChangeRef.current = onZoomChange;
+  const controlledRef = React.useRef(controlled);
+  controlledRef.current = controlled;
+  const dimensionsRef = React.useRef(
+    void 0
+  );
+  const pendingAnchorRef = React.useRef(void 0);
+  const scrollerRef = React.useRef(void 0);
+  const lastEmittedRef = React.useRef(void 0);
+  const emit = React.useCallback((state) => {
+    const key = `${state.level}:${state.resolvedZoom.toFixed(4)}`;
+    if (lastEmittedRef.current === key) {
+      return;
+    }
+    lastEmittedRef.current = key;
+    onZoomChangeRef.current?.(state);
+  }, []);
+  const setLevel = React.useCallback(
+    (nextLevel) => {
+      const normalized = normalizeViewerZoomLevel(nextLevel);
+      const root = rootRef.current;
+      const scroller = root ? nearestScrollableAncestor(root) : void 0;
+      if (root && scroller) {
+        pendingAnchorRef.current = captureAnchor(root, scroller, pageSelector);
+      }
+      const nextResolved = typeof normalized === "number" ? normalized : dimensionsRef.current ? resolveViewerZoom(normalized, dimensionsRef.current) : resolvedZoomRef.current;
+      if (!controlledRef.current) {
+        levelRef.current = normalized;
+        resolvedZoomRef.current = nextResolved;
+        setUncontrolledLevel(normalized);
+        setResolvedZoom(nextResolved);
+      }
+      emit({ level: normalized, resolvedZoom: nextResolved });
+    },
+    [emit, pageSelector, rootRef]
+  );
+  const bridge = React.useMemo(
+    () => ({
+      setZoom: setLevel,
+      getZoom: () => levelRef.current,
+      getResolvedZoom: () => resolvedZoomRef.current
+    }),
+    [setLevel]
+  );
+  React.useLayoutEffect(() => {
+    onBridgeChange?.(bridge);
+    return () => onBridgeChange?.(void 0);
+  }, [bridge, onBridgeChange]);
+  React.useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root || typeof window === "undefined") {
+      return;
+    }
+    const scroller = nearestScrollableAncestor(root);
+    scrollerRef.current = scroller;
+    let frame = 0;
+    const recalculate = () => {
+      frame = 0;
+      const scrollerPadding = elementPadding(scroller);
+      const rootPadding = elementPadding(root);
+      const viewportWidth = (isWindowScroller(scroller) ? window.innerWidth : scroller.clientWidth) - scrollerPadding.horizontal;
+      const viewportHeight = (isWindowScroller(scroller) ? window.innerHeight : scroller.clientHeight) - scrollerPadding.vertical;
+      const dimensions = {
+        viewportWidth,
+        viewportHeight,
+        contentWidth: contentWidth + rootPadding.horizontal,
+        contentHeight: contentHeight + rootPadding.vertical
+      };
+      dimensionsRef.current = dimensions;
+      const nextResolved = resolveViewerZoom(levelRef.current, dimensions);
+      if (Math.abs(nextResolved - resolvedZoomRef.current) < 0.01) {
+        return;
+      }
+      pendingAnchorRef.current = captureAnchor(root, scroller, pageSelector);
+      resolvedZoomRef.current = nextResolved;
+      setResolvedZoom(nextResolved);
+      emit({ level: levelRef.current, resolvedZoom: nextResolved });
+    };
+    const schedule = () => {
+      if (frame) {
+        cancelAnimationFrame(frame);
+      }
+      frame = requestAnimationFrame(recalculate);
+    };
+    const observer = typeof ResizeObserver === "function" ? new ResizeObserver(schedule) : void 0;
+    observer?.observe(scroller);
+    observer?.observe(root);
+    window.addEventListener("resize", schedule);
+    recalculate();
+    return () => {
+      if (frame) {
+        cancelAnimationFrame(frame);
+      }
+      observer?.disconnect();
+      window.removeEventListener("resize", schedule);
+    };
+  }, [contentHeight, contentWidth, emit, pageSelector, rootRef, level]);
+  React.useLayoutEffect(() => {
+    const root = rootRef.current;
+    const scroller = scrollerRef.current;
+    const anchor = pendingAnchorRef.current;
+    if (!root || !scroller || !anchor) {
+      return;
+    }
+    pendingAnchorRef.current = void 0;
+    restoreAnchor(root, scroller, pageSelector, anchor);
+  }, [pageSelector, resolvedZoom, rootRef]);
+  return { level, resolvedZoom };
+}
+
 // src/image-drop.ts
 init_cjs_shims();
 function copyModelForParagraphEdits(model, locations) {
@@ -8221,7 +8462,7 @@ function clampNumber(value, min, max) {
 function hasVerticalScrollOverflow(value) {
   return value === "auto" || value === "scroll" || value === "overlay" || value === "hidden";
 }
-function nearestScrollableAncestor(element) {
+function nearestScrollableAncestor2(element) {
   let current = element;
   while (current) {
     const style = window.getComputedStyle(current);
@@ -9948,6 +10189,18 @@ function normalizeTextRange(range) {
     end: range.start
   };
 }
+var viewerZoomBridgeByController = /* @__PURE__ */ new WeakMap();
+function viewerZoomControllerKey(editor) {
+  return editor.syncPaginationInfo;
+}
+function setViewerZoomBridge(editor, bridge) {
+  const key = viewerZoomControllerKey(editor);
+  if (bridge) {
+    viewerZoomBridgeByController.set(key, bridge);
+  } else {
+    viewerZoomBridgeByController.delete(key);
+  }
+}
 var defaultStarterModel = {
   nodes: [
     {
@@ -24316,14 +24569,14 @@ function updateSectionImageFloatingAtLocation(model, location, patch) {
   return changed ? next : model;
 }
 function useDocxEditor(options = {}) {
-  const [starterTemplate] = React.useState(
+  const [starterTemplate] = React2.useState(
     () => cloneDocModelWithBlockIds(options.starterModel ?? defaultStarterModel)
   );
-  const starterTemplateRef = React.useRef(starterTemplate);
-  const [initialModel] = React.useState(
+  const starterTemplateRef = React2.useRef(starterTemplate);
+  const [initialModel] = React2.useState(
     () => cloneDocModelWithBlockIds(options.document?.model ?? starterTemplate)
   );
-  const [editorState, dispatchCanonicalEditorState] = React.useReducer(
+  const [editorState, dispatchCanonicalEditorState] = React2.useReducer(
     reduceDocxEditorState,
     initialModel,
     (initialModel2) => ({
@@ -24341,8 +24594,8 @@ function useDocxEditor(options = {}) {
     })
   );
   const { model, selection, activeTextRange, pendingRunStyle, history } = editorState;
-  const canonicalEditorStateRef = React.useRef(editorState);
-  const applyCanonicalEditorStateAction = React.useCallback(
+  const canonicalEditorStateRef = React2.useRef(editorState);
+  const applyCanonicalEditorStateAction = React2.useCallback(
     (action) => {
       const previous = canonicalEditorStateRef.current;
       const next = reduceDocxEditorState(previous, action);
@@ -24354,7 +24607,7 @@ function useDocxEditor(options = {}) {
     },
     []
   );
-  const setModel = React.useCallback(
+  const setModel = React2.useCallback(
     (value) => {
       const currentModel = canonicalEditorStateRef.current.model;
       const nextModel = typeof value === "function" ? value(currentModel) : value;
@@ -24366,7 +24619,7 @@ function useDocxEditor(options = {}) {
     },
     [applyCanonicalEditorStateAction]
   );
-  const setSelection = React.useCallback(
+  const setSelection = React2.useCallback(
     (value) => {
       const currentSelection = canonicalEditorStateRef.current.selection;
       const nextSelection = typeof value === "function" ? value(currentSelection) : value;
@@ -24378,7 +24631,7 @@ function useDocxEditor(options = {}) {
     },
     [applyCanonicalEditorStateAction]
   );
-  const setActiveTextRangeState = React.useCallback(
+  const setActiveTextRangeState = React2.useCallback(
     (value) => {
       const currentRange = canonicalEditorStateRef.current.activeTextRange;
       const nextRange = typeof value === "function" ? value(currentRange) : value;
@@ -24390,7 +24643,7 @@ function useDocxEditor(options = {}) {
     },
     [applyCanonicalEditorStateAction]
   );
-  const setPendingRunStyle = React.useCallback(
+  const setPendingRunStyle = React2.useCallback(
     (value) => {
       const currentStyle = canonicalEditorStateRef.current.pendingRunStyle;
       const nextStyle = typeof value === "function" ? value(currentStyle) : value;
@@ -24402,7 +24655,7 @@ function useDocxEditor(options = {}) {
     },
     [applyCanonicalEditorStateAction]
   );
-  const setHistory = React.useCallback(
+  const setHistory = React2.useCallback(
     (value) => {
       const currentHistory = canonicalEditorStateRef.current.history;
       const nextHistory = typeof value === "function" ? value(currentHistory) : value;
@@ -24413,61 +24666,65 @@ function useDocxEditor(options = {}) {
     },
     [applyCanonicalEditorStateAction]
   );
-  const [basePackage, setBasePackage] = React.useState(options.document?.package);
-  const [documentLoadNonce, setDocumentLoadNonce] = React.useState(0);
-  const documentLoadNonceRef = React.useRef(0);
-  const advanceDocumentLoadNonce = React.useCallback(() => {
+  const [basePackage, setBasePackage] = React2.useState(options.document?.package);
+  const [documentLoadNonce, setDocumentLoadNonce] = React2.useState(0);
+  const documentLoadNonceRef = React2.useRef(0);
+  const advanceDocumentLoadNonce = React2.useCallback(() => {
     documentLoadNonceRef.current += 1;
     setDocumentLoadNonce(documentLoadNonceRef.current);
   }, []);
-  const [fileName, setFileName] = React.useState(
+  const [fileName, setFileName] = React2.useState(
     options.initialFileName ?? options.document?.fileName ?? "(new document)"
   );
-  const [selectedFormFieldLocation, setSelectedFormFieldLocation] = React.useState();
-  const [status, setStatus] = React.useState(
+  const [selectedFormFieldLocation, setSelectedFormFieldLocation] = React2.useState();
+  const [status, setStatus] = React2.useState(
     options.initialStatus ?? (options.document?.fileName ? `Loaded ${options.document.fileName}` : "Ready")
   );
-  const [importError, setImportError] = React.useState();
-  const [isImporting, setIsImporting] = React.useState(false);
-  const [documentTheme, setDocumentThemeState] = React.useState(options.initialDocumentTheme ?? "light");
-  const [showTrackedChanges, setShowTrackedChangesState] = React.useState(options.initialShowTrackedChanges ?? false);
-  const [showComments, setShowCommentsState] = React.useState(
+  const [importError, setImportError] = React2.useState();
+  const [isImporting, setIsImporting] = React2.useState(false);
+  const [documentTheme, setDocumentThemeState] = React2.useState(options.initialDocumentTheme ?? "light");
+  const [showTrackedChanges, setShowTrackedChangesState] = React2.useState(options.initialShowTrackedChanges ?? false);
+  const [showComments, setShowCommentsState] = React2.useState(
     options.initialShowComments ?? false
   );
-  const [paginationInfo, setPaginationInfo] = React.useState({
+  const [paginationInfo, setPaginationInfo] = React2.useState({
     currentPage: 1,
     totalPages: 1
   });
-  const activeImportAbortControllerRef = React.useRef(void 0);
-  const [historyRestoreRequest, setHistoryRestoreRequest] = React.useState();
-  const [selectionSessionKind, setSelectionSessionKind] = React.useState("idle");
-  const modelRef = React.useRef(model);
-  const selectionRef = React.useRef(selection);
-  const activeTextRangeRef = React.useRef(
+  const fallbackZoomRef = React2.useRef({
+    level: 100,
+    resolvedZoom: 100
+  });
+  const activeImportAbortControllerRef = React2.useRef(void 0);
+  const [historyRestoreRequest, setHistoryRestoreRequest] = React2.useState();
+  const [selectionSessionKind, setSelectionSessionKind] = React2.useState("idle");
+  const modelRef = React2.useRef(model);
+  const selectionRef = React2.useRef(selection);
+  const activeTextRangeRef = React2.useRef(
     activeTextRange
   );
-  const pendingRunStyleRef = React.useRef(
+  const pendingRunStyleRef = React2.useRef(
     pendingRunStyle
   );
-  const suppressNextDomSelectionRestoreRef = React.useRef(false);
-  const textCommitBurstRef = React.useRef(
+  const suppressNextDomSelectionRestoreRef = React2.useRef(false);
+  const textCommitBurstRef = React2.useRef(
     void 0
   );
-  const domSelectionRestoreModelRef = React.useRef(model);
-  const selectionSessionRef = React.useRef("idle");
-  const selectionSessionTimeoutRef = React.useRef(null);
-  const lastInViewerActiveTextRangeRef = React.useRef(void 0);
-  const suppressSelectionResetRef = React.useRef(false);
-  const historyRestoreNonceRef = React.useRef(0);
-  const embeddedFontLoadNonceRef = React.useRef(0);
-  const loadedEmbeddedFontFacesRef = React.useRef([]);
-  React.useEffect(() => {
+  const domSelectionRestoreModelRef = React2.useRef(model);
+  const selectionSessionRef = React2.useRef("idle");
+  const selectionSessionTimeoutRef = React2.useRef(null);
+  const lastInViewerActiveTextRangeRef = React2.useRef(void 0);
+  const suppressSelectionResetRef = React2.useRef(false);
+  const historyRestoreNonceRef = React2.useRef(0);
+  const embeddedFontLoadNonceRef = React2.useRef(0);
+  const loadedEmbeddedFontFacesRef = React2.useRef([]);
+  React2.useEffect(() => {
     canonicalEditorStateRef.current = editorState;
   }, [editorState]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     modelRef.current = model;
   }, [model]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (typeof process === "undefined" || process.env?.NODE_ENV === "production") {
       return;
     }
@@ -24480,10 +24737,10 @@ function useDocxEditor(options = {}) {
       );
     }
   }, [model]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     selectionRef.current = selection;
   }, [selection]);
-  const selectedFormField = React.useMemo(() => {
+  const selectedFormField = React2.useMemo(() => {
     if (!selectedFormFieldLocation) {
       return void 0;
     }
@@ -24505,22 +24762,22 @@ function useDocxEditor(options = {}) {
       field: child
     };
   }, [model, selectedFormFieldLocation]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     activeTextRangeRef.current = activeTextRange;
     if (activeTextRange) {
       lastInViewerActiveTextRangeRef.current = cloneTextRange(activeTextRange);
     }
   }, [activeTextRange]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     pendingRunStyleRef.current = pendingRunStyle;
   }, [pendingRunStyle]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     setPaginationInfo({
       currentPage: 1,
       totalPages: 1
     });
   }, [documentLoadNonce]);
-  const clearSelectionSession = React.useCallback(
+  const clearSelectionSession = React2.useCallback(
     (expectedKind) => {
       if (expectedKind && selectionSessionRef.current !== expectedKind) {
         return;
@@ -24536,7 +24793,7 @@ function useDocxEditor(options = {}) {
     },
     []
   );
-  const beginSelectionSession = React.useCallback(
+  const beginSelectionSession = React2.useCallback(
     (kind, options2) => {
       if (selectionSessionTimeoutRef.current !== null && typeof window !== "undefined") {
         window.clearTimeout(selectionSessionTimeoutRef.current);
@@ -24559,7 +24816,7 @@ function useDocxEditor(options = {}) {
     },
     []
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const normalizedCursorState = normalizeEditorCursorStateForModel(
       model,
       selection,
@@ -24610,7 +24867,7 @@ function useDocxEditor(options = {}) {
       activeTextRange: cloneTextRange(nextRange)
     });
   }, [model]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!selectedFormFieldLocation) {
       return;
     }
@@ -24623,14 +24880,14 @@ function useDocxEditor(options = {}) {
       setSelectedFormFieldLocation(void 0);
     }
   }, [model, selectedFormFieldLocation]);
-  const selectedParagraphLocation = React.useMemo(
+  const selectedParagraphLocation = React2.useMemo(
     () => resolveSelectedParagraphLocation(selection, activeTextRange),
     [activeTextRange, selection]
   );
-  const selectedParagraph = React.useMemo(() => {
+  const selectedParagraph = React2.useMemo(() => {
     return getParagraphAtLocation(model, selectedParagraphLocation).paragraph;
   }, [model, selectedParagraphLocation]);
-  const availableParagraphStyles = React.useMemo(() => {
+  const availableParagraphStyles = React2.useMemo(() => {
     const embeddedStyles = model.metadata.paragraphStyles ?? [];
     if (embeddedStyles.length > 0) {
       return normalizeParagraphStyleDefinitionsForUi(embeddedStyles);
@@ -24639,11 +24896,11 @@ function useDocxEditor(options = {}) {
       defaultStarterModel.metadata.paragraphStyles
     );
   }, [model.metadata.paragraphStyles]);
-  const paragraphStyleById = React.useMemo(
+  const paragraphStyleById = React2.useMemo(
     () => new Map(availableParagraphStyles.map((style) => [style.id, style])),
     [availableParagraphStyles]
   );
-  const selectedParagraphStyleId = React.useMemo(() => {
+  const selectedParagraphStyleId = React2.useMemo(() => {
     if (!selectedParagraph) {
       return model.metadata.defaultParagraphStyleId ?? availableParagraphStyles.find((style) => style.isDefault)?.id;
     }
@@ -24663,7 +24920,7 @@ function useDocxEditor(options = {}) {
     availableParagraphStyles,
     paragraphStyleById
   ]);
-  const selectedLineSpacing = React.useMemo(() => {
+  const selectedLineSpacing = React2.useMemo(() => {
     const lineTwipsRaw = selectedParagraph?.style?.spacing?.lineTwips;
     const lineTwips = Number.isFinite(lineTwipsRaw) ? Math.max(1, Math.round(lineTwipsRaw)) : void 0;
     const lineRule = selectedParagraph?.style?.spacing?.lineRule ?? "auto";
@@ -24678,7 +24935,7 @@ function useDocxEditor(options = {}) {
     };
   }, [selectedParagraph]);
   const selectedBorderContext = selectedParagraphLocation.kind === "table-cell" ? "table" : "paragraph";
-  const activeBorderPresets = React.useMemo(() => {
+  const activeBorderPresets = React2.useMemo(() => {
     if (selectedParagraphLocation.kind === "table-cell") {
       const node = model.nodes[selectedParagraphLocation.tableIndex];
       if (!node || node.type !== "table") {
@@ -24689,10 +24946,10 @@ function useDocxEditor(options = {}) {
     }
     return paragraphBorderPresetState(selectedParagraph?.style?.borders);
   }, [model.nodes, selectedParagraph, selectedParagraphLocation]);
-  const selectedRunStyleFromSelection = React.useMemo(() => {
+  const selectedRunStyleFromSelection = React2.useMemo(() => {
     return runStyleForEditorSelection(model, selection, activeTextRange);
   }, [activeTextRange, model, selection]);
-  const selectedRunStyle = React.useMemo(() => {
+  const selectedRunStyle = React2.useMemo(() => {
     const hasExpandedRange = Boolean(
       activeTextRange && compareTextRangeBoundaries(activeTextRange.start, activeTextRange.end) < 0
     );
@@ -24704,7 +24961,7 @@ function useDocxEditor(options = {}) {
       ...pendingRunStyle
     };
   }, [activeTextRange, pendingRunStyle, selectedRunStyleFromSelection]);
-  const selectedLink = React.useMemo(() => {
+  const selectedLink = React2.useMemo(() => {
     if (!selectedParagraph || !activeTextRange) {
       return void 0;
     }
@@ -24742,11 +24999,11 @@ function useDocxEditor(options = {}) {
     );
   }, [activeTextRange, selectedParagraph, selectedParagraphLocation]);
   const selectedListType = selectedParagraph ? paragraphListType(selectedParagraph, model.metadata.numberingDefinitions) : void 0;
-  const trackedChanges = React.useMemo(
+  const trackedChanges = React2.useMemo(
     () => collectTrackedChangesFromModel(model, documentLoadNonce),
     [documentLoadNonce, model]
   );
-  const comments = React.useMemo(
+  const comments = React2.useMemo(
     () => collectCommentsFromModel(model, documentLoadNonce),
     [documentLoadNonce, model]
   );
@@ -24754,38 +25011,38 @@ function useDocxEditor(options = {}) {
   const hasOrderedList = selectedListType === "ordered";
   const canUndo = history.past.length > 0;
   const canRedo = history.future.length > 0;
-  const pendingExportModelTransformerRef = React.useRef(void 0);
-  const setDocumentTheme = React.useCallback(
+  const pendingExportModelTransformerRef = React2.useRef(void 0);
+  const setDocumentTheme = React2.useCallback(
     (theme) => {
       setDocumentThemeState(theme);
     },
     []
   );
-  const setShowTrackedChanges = React.useCallback(
+  const setShowTrackedChanges = React2.useCallback(
     (nextShowTrackedChanges) => {
       setShowTrackedChangesState(nextShowTrackedChanges);
     },
     []
   );
-  const toggleShowTrackedChanges = React.useCallback(() => {
+  const toggleShowTrackedChanges = React2.useCallback(() => {
     setShowTrackedChangesState((current) => !current);
   }, []);
-  const setShowComments = React.useCallback(
+  const setShowComments = React2.useCallback(
     (nextShowComments) => {
       setShowCommentsState(nextShowComments);
     },
     []
   );
-  const toggleShowComments = React.useCallback(() => {
+  const toggleShowComments = React2.useCallback(() => {
     setShowCommentsState((current) => !current);
   }, []);
-  const registerPendingExportModelTransformer = React.useCallback(
+  const registerPendingExportModelTransformer = React2.useCallback(
     (transformer) => {
       pendingExportModelTransformerRef.current = transformer;
     },
     []
   );
-  const unloadEmbeddedFonts = React.useCallback(() => {
+  const unloadEmbeddedFonts = React2.useCallback(() => {
     if (typeof document !== "undefined" && "fonts" in document) {
       loadedEmbeddedFontFacesRef.current.forEach((fontFace) => {
         try {
@@ -24799,7 +25056,7 @@ function useDocxEditor(options = {}) {
     }
     loadedEmbeddedFontFacesRef.current = [];
   }, []);
-  const loadEmbeddedFontsFromPackage = React.useCallback(
+  const loadEmbeddedFontsFromPackage = React2.useCallback(
     async (pkg) => {
       embeddedFontLoadNonceRef.current += 1;
       const requestNonce = embeddedFontLoadNonceRef.current;
@@ -24846,13 +25103,13 @@ function useDocxEditor(options = {}) {
     },
     [unloadEmbeddedFonts]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     return () => {
       activeImportAbortControllerRef.current?.abort();
       unloadEmbeddedFonts();
     };
   }, [unloadEmbeddedFonts]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!options.document || options.loadEmbeddedFonts === false || options.document.embeddedFontsLoaded) {
       return;
     }
@@ -24862,7 +25119,7 @@ function useDocxEditor(options = {}) {
     options.document,
     options.loadEmbeddedFonts
   ]);
-  const dispatchEditorTransaction = React.useCallback(
+  const dispatchEditorTransaction = React2.useCallback(
     (resolver) => {
       const currentState = canonicalEditorStateRef.current;
       const currentModel = currentState.model;
@@ -24956,14 +25213,14 @@ function useDocxEditor(options = {}) {
     },
     [applyCanonicalEditorStateAction]
   );
-  const annotationFailureStatus = React.useCallback(
+  const annotationFailureStatus = React2.useCallback(
     (action, reason) => {
       const detail = reason === "stale" ? "the annotation no longer matches the document" : reason === "unsafe-xml" ? "the source markup is ambiguous" : "this annotation shape is not safely editable";
       return `${action} failed: ${detail}`;
     },
     []
   );
-  const runTrackedChangeCommand = React.useCallback(
+  const runTrackedChangeCommand = React2.useCallback(
     (action, change) => {
       if (change.documentLoadNonce !== documentLoadNonceRef.current) {
         const failure = { ok: false, reason: "stale" };
@@ -25033,15 +25290,15 @@ function useDocxEditor(options = {}) {
     },
     [annotationFailureStatus, dispatchEditorTransaction]
   );
-  const acceptTrackedChange = React.useCallback(
+  const acceptTrackedChange = React2.useCallback(
     (change) => runTrackedChangeCommand("accept", change),
     [runTrackedChangeCommand]
   );
-  const rejectTrackedChange = React.useCallback(
+  const rejectTrackedChange = React2.useCallback(
     (change) => runTrackedChangeCommand("reject", change),
     [runTrackedChangeCommand]
   );
-  const createComment = React.useCallback(
+  const createComment = React2.useCallback(
     (text, commentOptions = {}) => {
       let outcome = {
         ok: false,
@@ -25086,7 +25343,7 @@ function useDocxEditor(options = {}) {
     },
     [annotationFailureStatus, dispatchEditorTransaction]
   );
-  const setCommentResolved2 = React.useCallback(
+  const setCommentResolved2 = React2.useCallback(
     (comment, resolved) => {
       if (comment.documentLoadNonce !== documentLoadNonceRef.current) {
         const failure = { ok: false, reason: "stale" };
@@ -25154,7 +25411,7 @@ function useDocxEditor(options = {}) {
     },
     [annotationFailureStatus, dispatchEditorTransaction]
   );
-  const applyModelChange = React.useCallback(
+  const applyModelChange = React2.useCallback(
     (updater, successStatus) => {
       dispatchEditorTransaction((current) => {
         const nextModel = updater(current.model);
@@ -25170,7 +25427,7 @@ function useDocxEditor(options = {}) {
     },
     [dispatchEditorTransaction]
   );
-  const replaceDocumentWithImportError = React.useCallback(
+  const replaceDocumentWithImportError = React2.useCallback(
     (fileName2, error) => {
       unloadEmbeddedFonts();
       setModel(createBlankDocumentModel());
@@ -25188,7 +25445,7 @@ function useDocxEditor(options = {}) {
     },
     [advanceDocumentLoadNonce, unloadEmbeddedFonts]
   );
-  const importDocxFile = React.useCallback(
+  const importDocxFile = React2.useCallback(
     async (file) => {
       activeImportAbortControllerRef.current?.abort();
       activeImportAbortControllerRef.current = void 0;
@@ -25289,7 +25546,7 @@ function useDocxEditor(options = {}) {
       replaceDocumentWithImportError
     ]
   );
-  const newDocument = React.useCallback(() => {
+  const newDocument = React2.useCallback(() => {
     activeImportAbortControllerRef.current?.abort();
     activeImportAbortControllerRef.current = void 0;
     unloadEmbeddedFonts();
@@ -25306,7 +25563,7 @@ function useDocxEditor(options = {}) {
     setImportError(void 0);
     setStatus("Created new document");
   }, [advanceDocumentLoadNonce, unloadEmbeddedFonts]);
-  const exportDocx = React.useCallback(async () => {
+  const exportDocx = React2.useCallback(async () => {
     const sourceModel = modelRef.current;
     const transformedModel = pendingExportModelTransformerRef.current ? pendingExportModelTransformerRef.current(sourceModel) : sourceModel;
     if (transformedModel !== sourceModel) {
@@ -25329,7 +25586,7 @@ function useDocxEditor(options = {}) {
     }, 1e3);
     setStatus("Exported DOCX");
   }, [basePackage, fileName]);
-  const undo = React.useCallback(() => {
+  const undo = React2.useCallback(() => {
     textCommitBurstRef.current = void 0;
     const { previous, next } = applyCanonicalEditorStateAction({
       type: "undo"
@@ -25353,7 +25610,7 @@ function useDocxEditor(options = {}) {
     });
     setStatus("Undo");
   }, [applyCanonicalEditorStateAction]);
-  const redo = React.useCallback(() => {
+  const redo = React2.useCallback(() => {
     textCommitBurstRef.current = void 0;
     const { previous, next } = applyCanonicalEditorStateAction({
       type: "redo"
@@ -25377,7 +25634,7 @@ function useDocxEditor(options = {}) {
     });
     setStatus("Redo");
   }, [applyCanonicalEditorStateAction]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const onKeyDown = (event) => {
       if (event.defaultPrevented) {
         return;
@@ -25422,7 +25679,7 @@ function useDocxEditor(options = {}) {
       window.removeEventListener("keydown", onKeyDown);
     };
   }, [redo, undo]);
-  const applyToSelectedParagraphNode = React.useCallback(
+  const applyToSelectedParagraphNode = React2.useCallback(
     (mutate) => {
       applyModelChange((current) => {
         const next = cloneDocModel(current);
@@ -25443,7 +25700,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange, selectedParagraphLocation]
   );
-  const restoreSelectionAfterToolbarCommand = React.useCallback(
+  const restoreSelectionAfterToolbarCommand = React2.useCallback(
     (selectionSnapshot, textRangeSnapshot) => {
       dispatchEditorTransaction(() => ({
         selection: cloneEditorSelection(selectionSnapshot),
@@ -25453,7 +25710,7 @@ function useDocxEditor(options = {}) {
     },
     [dispatchEditorTransaction]
   );
-  const setActiveTextRange = React.useCallback(
+  const setActiveTextRange = React2.useCallback(
     (range) => {
       const currentRange = cloneTextRange(activeTextRangeRef.current);
       if (!range) {
@@ -25462,7 +25719,7 @@ function useDocxEditor(options = {}) {
           return;
         }
         activeTextRangeRef.current = void 0;
-        React.startTransition(() => {
+        React2.startTransition(() => {
           setActiveTextRangeState(void 0);
         });
         setPendingRunStyle(void 0);
@@ -25485,17 +25742,17 @@ function useDocxEditor(options = {}) {
       const nextRange = cloneTextRange(normalized);
       activeTextRangeRef.current = nextRange;
       lastInViewerActiveTextRangeRef.current = cloneTextRange(nextRange);
-      React.startTransition(() => {
+      React2.startTransition(() => {
         setActiveTextRangeState(cloneTextRange(nextRange));
       });
       setPendingRunStyle(void 0);
     },
     []
   );
-  const suppressNextDomSelectionRestore = React.useCallback(() => {
+  const suppressNextDomSelectionRestore = React2.useCallback(() => {
     suppressNextDomSelectionRestoreRef.current = true;
   }, []);
-  const applySelectedStyleChange = React.useCallback(
+  const applySelectedStyleChange = React2.useCallback(
     (mutator) => {
       const currentState = canonicalEditorStateRef.current;
       const textRangeSnapshot = cloneTextRange(
@@ -25574,7 +25831,7 @@ function useDocxEditor(options = {}) {
       lastInViewerActiveTextRangeRef
     ]
   );
-  const setParagraphStyle = React.useCallback(
+  const setParagraphStyle = React2.useCallback(
     (styleId) => {
       const fallbackStyleId = modelRef.current.metadata.defaultParagraphStyleId;
       const nextStyleId = styleId ?? fallbackStyleId;
@@ -25603,7 +25860,7 @@ function useDocxEditor(options = {}) {
       lastInViewerActiveTextRangeRef
     ]
   );
-  const setHeading = React.useCallback(
+  const setHeading = React2.useCallback(
     (heading) => {
       const styleId = heading ? `Heading${heading}` : modelRef.current.metadata.defaultParagraphStyleId;
       const styleDefinition = styleId ? paragraphStyleById.get(styleId) : void 0;
@@ -25630,7 +25887,7 @@ function useDocxEditor(options = {}) {
       lastInViewerActiveTextRangeRef
     ]
   );
-  const setLineSpacing = React.useCallback(
+  const setLineSpacing = React2.useCallback(
     (lineMultiple) => {
       if (!Number.isFinite(lineMultiple)) {
         return;
@@ -25678,7 +25935,7 @@ function useDocxEditor(options = {}) {
       lastInViewerActiveTextRangeRef
     ]
   );
-  const setFontFamily = React.useCallback(
+  const setFontFamily = React2.useCallback(
     (fontFamily) => {
       applySelectedStyleChange(
         (style) => textStyleWithExplicitFontFamily(style, fontFamily)
@@ -25686,7 +25943,7 @@ function useDocxEditor(options = {}) {
     },
     [applySelectedStyleChange]
   );
-  const setFontSize = React.useCallback(
+  const setFontSize = React2.useCallback(
     (fontSizePt) => {
       applySelectedStyleChange((style) => ({
         ...style ?? {},
@@ -25695,7 +25952,7 @@ function useDocxEditor(options = {}) {
     },
     [applySelectedStyleChange]
   );
-  const currentSelectedRunStyleSnapshot = React.useCallback(() => {
+  const currentSelectedRunStyleSnapshot = React2.useCallback(() => {
     const currentState = canonicalEditorStateRef.current;
     const range = cloneTextRange(
       currentState.activeTextRange ?? lastInViewerActiveTextRangeRef.current
@@ -25717,21 +25974,21 @@ function useDocxEditor(options = {}) {
       ...currentPendingStyle
     };
   }, []);
-  const toggleBold = React.useCallback(() => {
+  const toggleBold = React2.useCallback(() => {
     const nextBold = !Boolean(currentSelectedRunStyleSnapshot()?.bold);
     applySelectedStyleChange((style) => ({
       ...style ?? {},
       bold: nextBold
     }));
   }, [applySelectedStyleChange, currentSelectedRunStyleSnapshot]);
-  const toggleItalic = React.useCallback(() => {
+  const toggleItalic = React2.useCallback(() => {
     const nextItalic = !Boolean(currentSelectedRunStyleSnapshot()?.italic);
     applySelectedStyleChange((style) => ({
       ...style ?? {},
       italic: nextItalic
     }));
   }, [applySelectedStyleChange, currentSelectedRunStyleSnapshot]);
-  const toggleUnderline = React.useCallback(() => {
+  const toggleUnderline = React2.useCallback(() => {
     const nextUnderline = !Boolean(
       currentSelectedRunStyleSnapshot()?.underline
     );
@@ -25740,28 +25997,28 @@ function useDocxEditor(options = {}) {
       underline: nextUnderline
     }));
   }, [applySelectedStyleChange, currentSelectedRunStyleSnapshot]);
-  const toggleStrike = React.useCallback(() => {
+  const toggleStrike = React2.useCallback(() => {
     const nextStrike = !Boolean(currentSelectedRunStyleSnapshot()?.strike);
     applySelectedStyleChange((style) => ({
       ...style ?? {},
       strike: nextStrike
     }));
   }, [applySelectedStyleChange, currentSelectedRunStyleSnapshot]);
-  const toggleSuperscript = React.useCallback(() => {
+  const toggleSuperscript = React2.useCallback(() => {
     const nextVerticalAlign = selectedRunStyle?.verticalAlign === "superscript" ? void 0 : "superscript";
     applySelectedStyleChange((style) => ({
       ...style ?? {},
       verticalAlign: nextVerticalAlign
     }));
   }, [applySelectedStyleChange, selectedRunStyle?.verticalAlign]);
-  const toggleSubscript = React.useCallback(() => {
+  const toggleSubscript = React2.useCallback(() => {
     const nextVerticalAlign = selectedRunStyle?.verticalAlign === "subscript" ? void 0 : "subscript";
     applySelectedStyleChange((style) => ({
       ...style ?? {},
       verticalAlign: nextVerticalAlign
     }));
   }, [applySelectedStyleChange, selectedRunStyle?.verticalAlign]);
-  const setHighlight = React.useCallback(
+  const setHighlight = React2.useCallback(
     (highlight) => {
       applySelectedStyleChange((style) => ({
         ...style ?? {},
@@ -25770,7 +26027,7 @@ function useDocxEditor(options = {}) {
     },
     [applySelectedStyleChange]
   );
-  const setTextColor = React.useCallback(
+  const setTextColor = React2.useCallback(
     (color) => {
       applySelectedStyleChange((style) => ({
         ...style ?? {},
@@ -25779,7 +26036,7 @@ function useDocxEditor(options = {}) {
     },
     [applySelectedStyleChange]
   );
-  const setLink = React.useCallback(
+  const setLink = React2.useCallback(
     (link) => {
       const normalized = link?.trim();
       const nextLink = normalized && normalized.length > 0 ? normalized : void 0;
@@ -25861,7 +26118,7 @@ function useDocxEditor(options = {}) {
     },
     [activeTextRange, applyModelChange]
   );
-  const replaceExpandedSelection = React.useCallback(
+  const replaceExpandedSelection = React2.useCallback(
     (text, range) => {
       const sourceRange = range ?? activeTextRangeRef.current;
       if (!sourceRange) {
@@ -26215,13 +26472,13 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange, pendingRunStyle]
   );
-  const deleteExpandedSelection = React.useCallback(
+  const deleteExpandedSelection = React2.useCallback(
     (range) => {
       return replaceExpandedSelection("", range);
     },
     [replaceExpandedSelection]
   );
-  const updateFormField = React.useCallback(
+  const updateFormField = React2.useCallback(
     (location, updater, successStatus) => {
       dispatchEditorTransaction((current) => {
         const next = cloneDocModel(current.model);
@@ -26251,7 +26508,7 @@ function useDocxEditor(options = {}) {
     },
     [dispatchEditorTransaction]
   );
-  const selectFormField = React.useCallback(
+  const selectFormField = React2.useCallback(
     (location) => {
       if (!location) {
         setSelectedFormFieldLocation(void 0);
@@ -26276,7 +26533,7 @@ function useDocxEditor(options = {}) {
     },
     []
   );
-  const toggleFormCheckbox = React.useCallback(
+  const toggleFormCheckbox = React2.useCallback(
     (location) => {
       updateFormField(
         location,
@@ -26294,7 +26551,7 @@ function useDocxEditor(options = {}) {
     },
     [updateFormField]
   );
-  const setFormFieldValue = React.useCallback(
+  const setFormFieldValue = React2.useCallback(
     (location, value) => {
       updateFormField(
         location,
@@ -26316,7 +26573,7 @@ function useDocxEditor(options = {}) {
     },
     [updateFormField]
   );
-  const updateFormFieldWidget = React.useCallback(
+  const updateFormFieldWidget = React2.useCallback(
     (location, patch) => {
       updateFormField(
         location,
@@ -26329,7 +26586,7 @@ function useDocxEditor(options = {}) {
     },
     [updateFormField]
   );
-  const applyBorderPreset = React.useCallback(
+  const applyBorderPreset = React2.useCallback(
     (preset) => {
       const textRangeSnapshot = cloneTextRange(
         activeTextRangeRef.current ?? lastInViewerActiveTextRangeRef.current
@@ -26516,7 +26773,7 @@ function useDocxEditor(options = {}) {
       lastInViewerActiveTextRangeRef
     ]
   );
-  const setAlignment = React.useCallback(
+  const setAlignment = React2.useCallback(
     (align) => {
       const textRangeSnapshot = cloneTextRange(
         activeTextRangeRef.current ?? lastInViewerActiveTextRangeRef.current
@@ -26575,7 +26832,7 @@ function useDocxEditor(options = {}) {
       lastInViewerActiveTextRangeRef
     ]
   );
-  const toggleList = React.useCallback(
+  const toggleList = React2.useCallback(
     (listType) => {
       const textRangeSnapshot = cloneTextRange(
         activeTextRangeRef.current ?? lastInViewerActiveTextRangeRef.current
@@ -26718,7 +26975,7 @@ function useDocxEditor(options = {}) {
       lastInViewerActiveTextRangeRef
     ]
   );
-  const adjustSelectedListDepth = React.useCallback(
+  const adjustSelectedListDepth = React2.useCallback(
     (levelDelta, draftText) => {
       const normalizedLevelDelta = Math.trunc(levelDelta);
       if (!normalizedLevelDelta) {
@@ -26835,7 +27092,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange, pendingRunStyle, selection]
   );
-  const insertListItemAfterSelection = React.useCallback(
+  const insertListItemAfterSelection = React2.useCallback(
     (draftText, startOffset, endOffset, targetLocationOverride) => {
       const targetLocation = targetLocationOverride ?? resolveSelectedParagraphLocation(selection, activeTextRangeRef.current);
       if (targetLocation.kind !== "paragraph") {
@@ -26945,7 +27202,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange, pendingRunStyle, selection]
   );
-  const splitParagraphAtSelection = React.useCallback(
+  const splitParagraphAtSelection = React2.useCallback(
     (draftText, startOffset, endOffset, targetLocationOverride) => {
       const targetLocation = targetLocationOverride ?? resolveSelectedParagraphLocation(selection, activeTextRangeRef.current);
       if (targetLocation.kind !== "paragraph") {
@@ -27036,7 +27293,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange, pendingRunStyle, selection]
   );
-  const insertTable = React.useCallback(() => {
+  const insertTable = React2.useCallback(() => {
     applyModelChange((current) => {
       const next = cloneDocModel(current);
       const insertionIndex = selection.kind === "paragraph" ? selection.nodeIndex + 1 : selection.tableIndex + 1;
@@ -27119,7 +27376,7 @@ function useDocxEditor(options = {}) {
       return next;
     }, "Inserted table");
   }, [applyModelChange, selection]);
-  const insertImageFile = React.useCallback(
+  const insertImageFile = React2.useCallback(
     async (file) => {
       if (!file.type.startsWith("image/")) {
         setStatus("Select an image file");
@@ -27169,7 +27426,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange, selection]
   );
-  const appendParagraph = React.useCallback(
+  const appendParagraph = React2.useCallback(
     (text = "") => {
       let insertedIndex = 0;
       dispatchEditorTransaction((current) => {
@@ -27193,7 +27450,7 @@ function useDocxEditor(options = {}) {
     },
     [dispatchEditorTransaction]
   );
-  const resizeImage = React.useCallback(
+  const resizeImage = React2.useCallback(
     (location, widthPx, heightPx) => {
       const safeWidth = Math.max(24, Math.round(widthPx));
       const safeHeight = Math.max(24, Math.round(heightPx));
@@ -27224,7 +27481,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const setSyntheticTextBoxText = React.useCallback(
+  const setSyntheticTextBoxText = React2.useCallback(
     (location, text) => {
       applyModelChange((current) => {
         const next = cloneDocModel(current);
@@ -27263,7 +27520,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const setImageWrapMode = React.useCallback(
+  const setImageWrapMode = React2.useCallback(
     (location, mode, seedFloating) => {
       applyModelChange((current) => {
         const next = cloneDocModel(current);
@@ -27298,7 +27555,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const moveFloatingImage = React.useCallback(
+  const moveFloatingImage = React2.useCallback(
     (location, patch, options2) => {
       applyModelChange((current) => {
         const sourceLocation = imageLocationToParagraphLocation(location);
@@ -27355,7 +27612,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const moveSectionFloatingImage = React.useCallback(
+  const moveSectionFloatingImage = React2.useCallback(
     (location, patch) => {
       applyModelChange((current) => {
         return updateSectionImageFloatingAtLocation(current, location, patch);
@@ -27363,7 +27620,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const moveParagraphDropCap = React.useCallback(
+  const moveParagraphDropCap = React2.useCallback(
     (nodeIndex, patch) => {
       applyModelChange((current) => {
         const next = cloneDocModel(current);
@@ -27386,7 +27643,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const setParagraphDropCapFontSizePt = React.useCallback(
+  const setParagraphDropCapFontSizePt = React2.useCallback(
     (nodeIndex, fontSizePt) => {
       applyModelChange((current) => {
         const next = cloneDocModel(current);
@@ -27425,7 +27682,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const setParagraphDropCapText = React.useCallback(
+  const setParagraphDropCapText = React2.useCallback(
     (nodeIndex, text) => {
       applyModelChange((current) => {
         const next = cloneDocModel(current);
@@ -27461,7 +27718,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const moveImage = React.useCallback(
+  const moveImage = React2.useCallback(
     (source, target) => {
       const sourceParagraphLocation = imageLocationToParagraphLocation(source);
       const targetParagraphLocation = target.kind === "paragraph" ? {
@@ -27533,7 +27790,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const selectParagraph = React.useCallback(
+  const selectParagraph = React2.useCallback(
     (nodeIndex) => {
       dispatchEditorTransaction((current) => {
         const nextSelection = {
@@ -27553,7 +27810,7 @@ function useDocxEditor(options = {}) {
     },
     [dispatchEditorTransaction]
   );
-  const selectTableCell = React.useCallback(
+  const selectTableCell = React2.useCallback(
     (tableIndex, rowIndex, cellIndex) => {
       dispatchEditorTransaction((current) => {
         const nextSelection = {
@@ -27575,7 +27832,7 @@ function useDocxEditor(options = {}) {
     },
     [dispatchEditorTransaction]
   );
-  const clearTableCellContents = React.useCallback(
+  const clearTableCellContents = React2.useCallback(
     (tableIndex, cells) => {
       const dedupedCells = Array.from(
         new Map(
@@ -27634,7 +27891,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange, pendingRunStyle]
   );
-  const deleteTable = React.useCallback(
+  const deleteTable = React2.useCallback(
     (tableIndex) => {
       const currentModel = modelRef.current;
       const target = currentModel.nodes[tableIndex];
@@ -27712,7 +27969,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const moveTable = React.useCallback(
+  const moveTable = React2.useCallback(
     (tableIndex, targetNodeIndex) => {
       let nextSelection;
       applyModelChange((current) => {
@@ -27770,7 +28027,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const setTableFloating = React.useCallback(
+  const setTableFloating = React2.useCallback(
     (tableIndex, patch, options2) => {
       applyModelChange((current) => {
         const tableNode = current.nodes[tableIndex];
@@ -27834,7 +28091,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const moveEmbeddedTableToBody = React.useCallback(
+  const moveEmbeddedTableToBody = React2.useCallback(
     (tableRuntimeKey, targetNodeIndex) => {
       const runtimeLocation = parseEmbeddedTableRuntimeKey(tableRuntimeKey);
       if (!runtimeLocation) {
@@ -27920,7 +28177,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const insertTableRow = React.useCallback(
+  const insertTableRow = React2.useCallback(
     (tableIndex, rowIndex, direction) => {
       let nextSelection;
       const currentSelection = selectionRef.current;
@@ -27975,7 +28232,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const insertTableColumn = React.useCallback(
+  const insertTableColumn = React2.useCallback(
     (tableIndex, cellIndex, direction, rowIndex) => {
       let nextSelection;
       applyModelChange(
@@ -28057,7 +28314,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const deleteTableRow = React.useCallback(
+  const deleteTableRow = React2.useCallback(
     (tableIndex, rowIndex) => {
       const tableNode = modelRef.current.nodes[tableIndex];
       if (!tableNode || tableNode.type !== "table") {
@@ -28120,7 +28377,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange, deleteTable]
   );
-  const deleteTableColumn = React.useCallback(
+  const deleteTableColumn = React2.useCallback(
     (tableIndex, cellIndex, rowIndex) => {
       const tableNode = modelRef.current.nodes[tableIndex];
       if (!tableNode || tableNode.type !== "table") {
@@ -28206,7 +28463,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange, deleteTable]
   );
-  const commitParagraphText = React.useCallback(
+  const commitParagraphText = React2.useCallback(
     (nodeIndex, text) => {
       applyModelChange((current) => {
         const activeRange = activeTextRangeRef.current ? normalizeTextRange(activeTextRangeRef.current) : void 0;
@@ -28224,7 +28481,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const commitTableCellText = React.useCallback(
+  const commitTableCellText = React2.useCallback(
     (tableIndex, rowIndex, cellIndex, text) => {
       applyModelChange((current) => {
         const activeRange = activeTextRangeRef.current ? normalizeTextRange(activeTextRangeRef.current) : void 0;
@@ -28255,7 +28512,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const commitTableCellParagraphTextRecursive = React.useCallback(
+  const commitTableCellParagraphTextRecursive = React2.useCallback(
     (tableIndex, rowIndex, cellIndex, paragraphIndex, text) => {
       applyModelChange((current) => {
         const activeRange = activeTextRangeRef.current ? normalizeTextRange(activeTextRangeRef.current) : void 0;
@@ -28287,7 +28544,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const commitParagraphTextAtRange = React.useCallback(
+  const commitParagraphTextAtRange = React2.useCallback(
     (location, text, caret, options2) => {
       const now2 = Date.now();
       return dispatchEditorTransaction((current) => {
@@ -28330,7 +28587,7 @@ function useDocxEditor(options = {}) {
     },
     [dispatchEditorTransaction]
   );
-  const commitTableCellTextAtRange = React.useCallback(
+  const commitTableCellTextAtRange = React2.useCallback(
     (tableIndex, rowIndex, cellIndex, text, caret) => {
       textCommitBurstRef.current = void 0;
       return dispatchEditorTransaction((current) => {
@@ -28383,7 +28640,7 @@ function useDocxEditor(options = {}) {
     },
     [dispatchEditorTransaction]
   );
-  const commitSectionParagraphText = React.useCallback(
+  const commitSectionParagraphText = React2.useCallback(
     (location, text) => {
       applyModelChange(
         (current) => updateSectionParagraphTextAtLocation(current, location, text, {
@@ -28394,7 +28651,7 @@ function useDocxEditor(options = {}) {
     },
     [applyModelChange]
   );
-  const syncPaginationInfo = React.useCallback(
+  const syncPaginationInfo = React2.useCallback(
     (nextPaginationInfo) => {
       setPaginationInfo((current) => {
         const nextTotalPages = Math.max(
@@ -28417,6 +28674,29 @@ function useDocxEditor(options = {}) {
     },
     []
   );
+  const setZoom = React2.useCallback(
+    (level) => {
+      const bridge = viewerZoomBridgeByController.get(
+        syncPaginationInfo
+      );
+      if (bridge) {
+        bridge.setZoom(level);
+        return;
+      }
+      const normalized = normalizeViewerZoomLevel(level);
+      fallbackZoomRef.current = {
+        level: normalized,
+        resolvedZoom: typeof normalized === "number" ? normalized : fallbackZoomRef.current.resolvedZoom
+      };
+    },
+    [syncPaginationInfo]
+  );
+  const getZoom = React2.useCallback(() => {
+    return viewerZoomBridgeByController.get(syncPaginationInfo)?.getZoom() ?? fallbackZoomRef.current.level;
+  }, [syncPaginationInfo]);
+  const getResolvedZoom = React2.useCallback(() => {
+    return viewerZoomBridgeByController.get(syncPaginationInfo)?.getResolvedZoom() ?? fallbackZoomRef.current.resolvedZoom;
+  }, [syncPaginationInfo]);
   return {
     model,
     documentLoadNonce,
@@ -28458,6 +28738,9 @@ function useDocxEditor(options = {}) {
     setShowTrackedChanges,
     setShowComments,
     syncPaginationInfo,
+    setZoom,
+    getZoom,
+    getResolvedZoom,
     toggleShowTrackedChanges,
     toggleShowComments,
     acceptTrackedChange,
@@ -29265,27 +29548,27 @@ function resolveDocxPageThumbnailResolution(options) {
 }
 function useDocxPageThumbnails(editor, options = {}) {
   const pageSurfaceRegistryOwner = docxViewerPageSurfaceRegistryOwner(editor);
-  const pageSurfaceRegistryEditor = React.useMemo(
+  const pageSurfaceRegistryEditor = React2.useMemo(
     () => ({ syncPaginationInfo: editor.syncPaginationInfo }),
     [pageSurfaceRegistryOwner]
   );
-  const [pageSurfaceEpoch, setPageSurfaceEpoch] = React.useState(0);
-  const [pageThumbnailStates, setPageThumbnailStates] = React.useState(() => /* @__PURE__ */ new Map());
-  const attachedCanvasByPageRef = React.useRef(
+  const [pageSurfaceEpoch, setPageSurfaceEpoch] = React2.useState(0);
+  const [pageThumbnailStates, setPageThumbnailStates] = React2.useState(() => /* @__PURE__ */ new Map());
+  const attachedCanvasByPageRef = React2.useRef(
     /* @__PURE__ */ new Map()
   );
-  const canvasRefCallbacksRef = React.useRef(/* @__PURE__ */ new Map());
-  const renderToCanvasCallbacksRef = React.useRef(/* @__PURE__ */ new Map());
-  const fallbackLayout = React.useMemo(
+  const canvasRefCallbacksRef = React2.useRef(/* @__PURE__ */ new Map());
+  const renderToCanvasCallbacksRef = React2.useRef(/* @__PURE__ */ new Map());
+  const fallbackLayout = React2.useMemo(
     () => resolveDocumentLayout(editor.model),
     [editor.model]
   );
-  const pageSurfaceRegistry = React.useMemo(
+  const pageSurfaceRegistry = React2.useMemo(
     () => ensureDocxViewerPageSurfaceRegistry(pageSurfaceRegistryEditor),
     [pageSurfaceRegistryEditor]
   );
   const hasRequestedThumbnails = options.pageIndexes?.length !== 0;
-  React.useEffect(
+  React2.useEffect(
     () => {
       if (!hasRequestedThumbnails) return;
       setPageSurfaceEpoch((current) => current + 1);
@@ -29295,11 +29578,11 @@ function useDocxPageThumbnails(editor, options = {}) {
     },
     [hasRequestedThumbnails, pageSurfaceRegistryEditor]
   );
-  const mountedPageElements = React.useMemo(
+  const mountedPageElements = React2.useMemo(
     () => new Map(pageSurfaceRegistry.pageElements),
     [pageSurfaceEpoch, pageSurfaceRegistry.pageElements]
   );
-  const updatePageThumbnailState = React.useCallback(
+  const updatePageThumbnailState = React2.useCallback(
     (pageIndex, status, error) => {
       setPageThumbnailStates((current) => {
         const next = new Map(current);
@@ -29313,20 +29596,20 @@ function useDocxPageThumbnails(editor, options = {}) {
     },
     []
   );
-  const thumbnailSurfaceCacheRef = React.useRef(void 0);
-  const thumbnailRasterQueueRef = React.useRef(void 0);
-  const detachedThumbnailSurfaceRendererRef = React.useRef(void 0);
-  const lastPaintedThumbnailKeyByCanvasRef = React.useRef(
+  const thumbnailSurfaceCacheRef = React2.useRef(void 0);
+  const thumbnailRasterQueueRef = React2.useRef(void 0);
+  const detachedThumbnailSurfaceRendererRef = React2.useRef(void 0);
+  const lastPaintedThumbnailKeyByCanvasRef = React2.useRef(
     /* @__PURE__ */ new WeakMap()
   );
-  const thumbnailQueueKeyByCanvasRef = React.useRef(
+  const thumbnailQueueKeyByCanvasRef = React2.useRef(
     /* @__PURE__ */ new WeakMap()
   );
-  const nextThumbnailCanvasQueueIdRef = React.useRef(0);
-  const queuedPrefetchThumbnailKeysRef = React.useRef(/* @__PURE__ */ new Set());
+  const nextThumbnailCanvasQueueIdRef = React2.useRef(0);
+  const queuedPrefetchThumbnailKeysRef = React2.useRef(/* @__PURE__ */ new Set());
   const thumbnailMinRasterIntervalMs = normalizeDocxThumbnailMinRasterIntervalMs(options.minRasterIntervalMs);
   const defaultThumbnailScheduling = options.scheduling ?? "idle";
-  const ensureThumbnailSurfaceCache = React.useCallback(() => {
+  const ensureThumbnailSurfaceCache = React2.useCallback(() => {
     if (!thumbnailSurfaceCacheRef.current) {
       thumbnailSurfaceCacheRef.current = new DocxThumbnailSurfaceCache(
         DOCX_THUMBNAIL_SURFACE_CACHE_MAX_ENTRIES
@@ -29334,7 +29617,7 @@ function useDocxPageThumbnails(editor, options = {}) {
     }
     return thumbnailSurfaceCacheRef.current;
   }, []);
-  const ensureThumbnailRasterQueue = React.useCallback(() => {
+  const ensureThumbnailRasterQueue = React2.useCallback(() => {
     if (!thumbnailRasterQueueRef.current) {
       thumbnailRasterQueueRef.current = new SerialIdleTaskQueue({
         minTaskIntervalMs: thumbnailMinRasterIntervalMs
@@ -29342,7 +29625,7 @@ function useDocxPageThumbnails(editor, options = {}) {
     }
     return thumbnailRasterQueueRef.current;
   }, [thumbnailMinRasterIntervalMs]);
-  const thumbnailQueueKeyForCanvas = React.useCallback(
+  const thumbnailQueueKeyForCanvas = React2.useCallback(
     (canvas) => {
       const existing = thumbnailQueueKeyByCanvasRef.current.get(canvas);
       if (existing) {
@@ -29357,12 +29640,12 @@ function useDocxPageThumbnails(editor, options = {}) {
     },
     []
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     thumbnailRasterQueueRef.current?.clear();
     thumbnailRasterQueueRef.current = void 0;
     queuedPrefetchThumbnailKeysRef.current.clear();
   }, [thumbnailMinRasterIntervalMs]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     thumbnailSurfaceCacheRef.current?.clear();
     thumbnailRasterQueueRef.current?.clear();
     detachedThumbnailSurfaceRendererRef.current?.clear();
@@ -29372,7 +29655,7 @@ function useDocxPageThumbnails(editor, options = {}) {
     nextThumbnailCanvasQueueIdRef.current = 0;
     queuedPrefetchThumbnailKeysRef.current.clear();
   }, [editor.documentLoadNonce, pageSurfaceRegistryOwner]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     detachedThumbnailSurfaceRendererRef.current?.clear();
     detachedThumbnailSurfaceRendererRef.current = void 0;
   }, [
@@ -29381,14 +29664,14 @@ function useDocxPageThumbnails(editor, options = {}) {
     editor.showComments,
     editor.showTrackedChanges
   ]);
-  React.useEffect(
+  React2.useEffect(
     () => () => {
       detachedThumbnailSurfaceRendererRef.current?.clear();
       detachedThumbnailSurfaceRendererRef.current = void 0;
     },
     []
   );
-  const thumbnailResolutionOptionsKey = React.useMemo(() => {
+  const thumbnailResolutionOptionsKey = React2.useMemo(() => {
     const bounds = options.resolution;
     const boundsKey = typeof bounds === "number" ? `n${bounds}` : bounds ? `b${bounds.maxWidth ?? ""}x${bounds.maxHeight ?? ""}` : "";
     return `${boundsKey}|${options.maxWidthPx ?? ""}|${options.maxHeightPx ?? ""}|${options.pixelRatio ?? ""}`;
@@ -29398,7 +29681,7 @@ function useDocxPageThumbnails(editor, options = {}) {
     options.pixelRatio,
     options.resolution
   ]);
-  const thumbnailSkipKeyForPage = React.useCallback(
+  const thumbnailSkipKeyForPage = React2.useCallback(
     (pageIndex) => {
       const contentKey = pageSurfaceRegistry.pageContentKeys.get(pageIndex);
       return contentKey === void 0 ? void 0 : `${contentKey}|${editor.documentTheme}|${thumbnailResolutionOptionsKey}`;
@@ -29406,18 +29689,18 @@ function useDocxPageThumbnails(editor, options = {}) {
     [editor.documentTheme, pageSurfaceRegistry, thumbnailResolutionOptionsKey]
   );
   const totalThumbnailPages = Math.max(1, editor.totalPages);
-  const hardThumbnailPageIndexes = React.useMemo(
+  const hardThumbnailPageIndexes = React2.useMemo(
     () => options.pageIndexes === void 0 ? void 0 : normalizeDocxThumbnailPageIndexes(
       options.pageIndexes,
       totalThumbnailPages
     ),
     [options.pageIndexes, totalThumbnailPages]
   );
-  const hardThumbnailPageIndexSet = React.useMemo(
+  const hardThumbnailPageIndexSet = React2.useMemo(
     () => hardThumbnailPageIndexes ? new Set(hardThumbnailPageIndexes) : void 0,
     [hardThumbnailPageIndexes]
   );
-  const visibleThumbnailPageIndexes = React.useMemo(() => {
+  const visibleThumbnailPageIndexes = React2.useMemo(() => {
     const normalized = normalizeDocxThumbnailPageIndexes(
       options.renderWindow?.visiblePageIndexes,
       totalThumbnailPages
@@ -29430,7 +29713,7 @@ function useDocxPageThumbnails(editor, options = {}) {
     options.renderWindow?.visiblePageIndexes,
     totalThumbnailPages
   ]);
-  const prefetchThumbnailPageIndexes = React.useMemo(() => {
+  const prefetchThumbnailPageIndexes = React2.useMemo(() => {
     const normalized = normalizeDocxThumbnailPageIndexes(
       options.renderWindow?.prefetchPageIndexes,
       totalThumbnailPages
@@ -29449,15 +29732,15 @@ function useDocxPageThumbnails(editor, options = {}) {
   const prefetchThumbnailPageIndexesKey = docxThumbnailPageIndexesKey(
     prefetchThumbnailPageIndexes
   );
-  const visibleThumbnailPageIndexSet = React.useMemo(
+  const visibleThumbnailPageIndexSet = React2.useMemo(
     () => new Set(visibleThumbnailPageIndexes),
     [visibleThumbnailPageIndexesKey]
   );
-  const thumbnailRenderPriorityForPage = React.useCallback(
+  const thumbnailRenderPriorityForPage = React2.useCallback(
     (pageIndex, fallbackPriority = DOCX_THUMBNAIL_RENDER_PRIORITY_ATTACHED) => visibleThumbnailPageIndexSet.has(pageIndex) ? DOCX_THUMBNAIL_RENDER_PRIORITY_VISIBLE : fallbackPriority,
     [visibleThumbnailPageIndexSet]
   );
-  const renderPageThumbnailSurface = React.useCallback(
+  const renderPageThumbnailSurface = React2.useCallback(
     async (pageIndex, renderOptions) => {
       const force = renderOptions?.force === true;
       const runSkipKey = thumbnailSkipKeyForPage(pageIndex);
@@ -29549,7 +29832,7 @@ function useDocxPageThumbnails(editor, options = {}) {
       editor
     ]
   );
-  const renderPageThumbnailToCanvas = React.useCallback(
+  const renderPageThumbnailToCanvas = React2.useCallback(
     async (pageIndex, canvas, renderOptions) => {
       if (options.disabled) {
         return;
@@ -29626,7 +29909,7 @@ function useDocxPageThumbnails(editor, options = {}) {
       updatePageThumbnailState
     ]
   );
-  const prefetchPageThumbnailSurface = React.useCallback(
+  const prefetchPageThumbnailSurface = React2.useCallback(
     async (pageIndex) => {
       if (options.disabled) {
         return;
@@ -29647,7 +29930,7 @@ function useDocxPageThumbnails(editor, options = {}) {
     },
     [ensureThumbnailRasterQueue, options.disabled, renderPageThumbnailSurface]
   );
-  const requestAttachedThumbnailRenders = React.useCallback(
+  const requestAttachedThumbnailRenders = React2.useCallback(
     async (renderOptions) => {
       const attachedPageIndexes = [
         ...attachedCanvasByPageRef.current.keys()
@@ -29666,7 +29949,7 @@ function useDocxPageThumbnails(editor, options = {}) {
     },
     [renderPageThumbnailToCanvas, thumbnailRenderPriorityForPage]
   );
-  const requestPrefetchThumbnailRenders = React.useCallback(async () => {
+  const requestPrefetchThumbnailRenders = React2.useCallback(async () => {
     if (options.disabled) {
       queuedPrefetchThumbnailKeysRef.current.forEach((queueKey) => {
         thumbnailRasterQueueRef.current?.cancel(queueKey);
@@ -29694,7 +29977,7 @@ function useDocxPageThumbnails(editor, options = {}) {
     prefetchPageThumbnailSurface,
     prefetchThumbnailPageIndexes
   ]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     void requestPrefetchThumbnailRenders();
   }, [
     editor.documentLoadNonce,
@@ -29708,21 +29991,21 @@ function useDocxPageThumbnails(editor, options = {}) {
     prefetchThumbnailPageIndexesKey,
     requestPrefetchThumbnailRenders
   ]);
-  const rerenderAttachedThumbnails = React.useCallback(
+  const rerenderAttachedThumbnails = React2.useCallback(
     async () => requestAttachedThumbnailRenders({ force: true }),
     [requestAttachedThumbnailRenders]
   );
-  const renderPageThumbnailToCanvasRef = React.useRef(
+  const renderPageThumbnailToCanvasRef = React2.useRef(
     renderPageThumbnailToCanvas
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     renderPageThumbnailToCanvasRef.current = renderPageThumbnailToCanvas;
   }, [renderPageThumbnailToCanvas]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     canvasRefCallbacksRef.current.clear();
     renderToCanvasCallbacksRef.current.clear();
   }, [pageSurfaceRegistryOwner]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     void requestAttachedThumbnailRenders();
   }, [
     editor.documentLoadNonce,
@@ -29736,7 +30019,7 @@ function useDocxPageThumbnails(editor, options = {}) {
     options.pixelRatio,
     requestAttachedThumbnailRenders
   ]);
-  const thumbnailGeometryItems = React.useMemo(() => {
+  const thumbnailGeometryItems = React2.useMemo(() => {
     const totalPages = Math.max(1, editor.totalPages);
     const geometryPageIndexes = hardThumbnailPageIndexes ?? Array.from({ length: totalPages }, (_, pageIndex) => pageIndex);
     return geometryPageIndexes.map((pageIndex) => {
@@ -29827,7 +30110,7 @@ function useDocxPageThumbnails(editor, options = {}) {
     pageSurfaceRegistry,
     thumbnailQueueKeyForCanvas
   ]);
-  const thumbnails = React.useMemo(
+  const thumbnails = React2.useMemo(
     () => thumbnailGeometryItems.map((geometryItem) => {
       const { hasElement, ...item } = geometryItem;
       const state = pageThumbnailStates.get(item.pageIndex);
@@ -29839,7 +30122,7 @@ function useDocxPageThumbnails(editor, options = {}) {
     }),
     [thumbnailGeometryItems, pageThumbnailStates]
   );
-  const paintThumbnail = React.useCallback(
+  const paintThumbnail = React2.useCallback(
     (pageIndex, canvas) => {
       if (!canvas || options.disabled) {
         return false;
@@ -29854,7 +30137,7 @@ function useDocxPageThumbnails(editor, options = {}) {
     },
     [options.disabled, thumbnails]
   );
-  return React.useMemo(
+  return React2.useMemo(
     () => ({
       paintThumbnail,
       thumbnails,
@@ -29865,16 +30148,16 @@ function useDocxPageThumbnails(editor, options = {}) {
 }
 var useDocxViewerThumbnails = useDocxPageThumbnails;
 function useDocxDocumentTheme(editor) {
-  const setDocumentTheme = React.useCallback(
+  const setDocumentTheme = React2.useCallback(
     (theme) => {
       editor.setDocumentTheme(theme);
     },
     [editor.setDocumentTheme]
   );
-  const toggleDocumentTheme = React.useCallback(() => {
+  const toggleDocumentTheme = React2.useCallback(() => {
     editor.setDocumentTheme(editor.documentTheme === "dark" ? "light" : "dark");
   }, [editor.documentTheme, editor.setDocumentTheme]);
-  return React.useMemo(
+  return React2.useMemo(
     () => ({
       documentTheme: editor.documentTheme,
       isDarkDocument: editor.documentTheme === "dark",
@@ -29885,13 +30168,13 @@ function useDocxDocumentTheme(editor) {
   );
 }
 function useDocxParagraphStyles(editor) {
-  const setParagraphStyle = React.useCallback(
+  const setParagraphStyle = React2.useCallback(
     (styleId) => {
       editor.setParagraphStyle(styleId);
     },
     [editor.setParagraphStyle]
   );
-  return React.useMemo(
+  return React2.useMemo(
     () => ({
       paragraphStyles: editor.availableParagraphStyles,
       selectedParagraphStyleId: editor.selectedParagraphStyleId,
@@ -29906,13 +30189,13 @@ function useDocxParagraphStyles(editor) {
 }
 function useDocxImageWrapMenu(menu) {
   const wrapState = menu.context.kind === "image" ? menu.context.image?.wrap ?? resolveDocxImageWrapState(menu.context.image?.floating) : void 0;
-  const setMode = React.useCallback(
+  const setMode = React2.useCallback(
     (mode) => {
       menu.runAction(imageWrapModeActionId(mode));
     },
     [menu]
   );
-  const setMoveWithText = React.useCallback(
+  const setMoveWithText = React2.useCallback(
     (moveWithText) => {
       menu.runAction(
         moveWithText ? "image-move-with-text" : "image-fix-position-on-page"
@@ -29920,7 +30203,7 @@ function useDocxImageWrapMenu(menu) {
     },
     [menu]
   );
-  return React.useMemo(() => {
+  return React2.useMemo(() => {
     if (!wrapState) {
       return void 0;
     }
@@ -29968,13 +30251,13 @@ function useDocxImageWrapMenu(menu) {
   }, [menu, setMode, setMoveWithText, wrapState]);
 }
 function useDocxLineSpacing(editor) {
-  const setLineSpacing = React.useCallback(
+  const setLineSpacing = React2.useCallback(
     (lineMultiple) => {
       editor.setLineSpacing(lineMultiple);
     },
     [editor.setLineSpacing]
   );
-  return React.useMemo(
+  return React2.useMemo(
     () => ({
       lineSpacing: editor.selectedLineSpacing,
       setLineSpacing
@@ -29983,13 +30266,13 @@ function useDocxLineSpacing(editor) {
   );
 }
 function useDocxBorders(editor) {
-  const applyBorderPreset = React.useCallback(
+  const applyBorderPreset = React2.useCallback(
     (preset) => {
       editor.applyBorderPreset(preset);
     },
     [editor.applyBorderPreset]
   );
-  return React.useMemo(
+  return React2.useMemo(
     () => ({
       borderContext: editor.selectedBorderContext,
       activeBorderPresets: editor.activeBorderPresets,
@@ -30003,11 +30286,11 @@ function useDocxBorders(editor) {
   );
 }
 function useDocxFormFields(editor) {
-  const formFields = React.useMemo(
+  const formFields = React2.useMemo(
     () => collectFormFieldsFromModel(editor.model),
     [editor.model]
   );
-  const updateSelectedFormFieldWidget = React.useCallback(
+  const updateSelectedFormFieldWidget = React2.useCallback(
     (patch) => {
       if (!editor.selectedFormField) {
         return;
@@ -30016,7 +30299,7 @@ function useDocxFormFields(editor) {
     },
     [editor.selectedFormField, editor.updateFormFieldWidget]
   );
-  return React.useMemo(
+  return React2.useMemo(
     () => ({
       formFields,
       selectedFormField: editor.selectedFormField,
@@ -30038,7 +30321,7 @@ function useDocxFormFields(editor) {
   );
 }
 function useDocxTrackChanges(editor) {
-  const changesByLocation = React.useMemo(() => {
+  const changesByLocation = React2.useMemo(() => {
     const grouped = /* @__PURE__ */ new Map();
     editor.trackedChanges.forEach((change) => {
       const key = paragraphLocationKey(change.location);
@@ -30048,13 +30331,13 @@ function useDocxTrackChanges(editor) {
     });
     return grouped;
   }, [editor.trackedChanges]);
-  const getChangesForLocation = React.useCallback(
+  const getChangesForLocation = React2.useCallback(
     (location) => {
       return changesByLocation.get(paragraphLocationKey(location)) ?? [];
     },
     [changesByLocation]
   );
-  return React.useMemo(
+  return React2.useMemo(
     () => ({
       trackedChanges: editor.trackedChanges,
       showTrackedChanges: editor.showTrackedChanges,
@@ -30078,7 +30361,7 @@ function useDocxTrackChanges(editor) {
   );
 }
 function useDocxComments(editor) {
-  const commentsByLocation = React.useMemo(() => {
+  const commentsByLocation = React2.useMemo(() => {
     const grouped = /* @__PURE__ */ new Map();
     editor.comments.forEach((comment) => {
       const key = paragraphLocationKey(comment.location);
@@ -30088,13 +30371,13 @@ function useDocxComments(editor) {
     });
     return grouped;
   }, [editor.comments]);
-  const getCommentsForLocation = React.useCallback(
+  const getCommentsForLocation = React2.useCallback(
     (location) => {
       return commentsByLocation.get(paragraphLocationKey(location)) ?? [];
     },
     [commentsByLocation]
   );
-  return React.useMemo(
+  return React2.useMemo(
     () => ({
       comments: editor.comments,
       showComments: editor.showComments,
@@ -30119,7 +30402,7 @@ function useDocxComments(editor) {
 }
 function useDocxPageLayout(editor) {
   const primarySectionPropertiesXml = editor.model.metadata.sections?.[0]?.sectionPropertiesXml ?? editor.model.metadata.sectionPropertiesXml;
-  const layout = React.useMemo(() => {
+  const layout = React2.useMemo(() => {
     const sectionLayout = parseSectionLayout(primarySectionPropertiesXml);
     const sectionColumns = parseSectionColumns(primarySectionPropertiesXml);
     const pageNumberStart = parseSectionPageNumberStart(
@@ -30152,7 +30435,7 @@ function useDocxPageLayout(editor) {
       }
     };
   }, [primarySectionPropertiesXml]);
-  return React.useMemo(
+  return React2.useMemo(
     () => ({
       layout
     }),
@@ -30160,7 +30443,7 @@ function useDocxPageLayout(editor) {
   );
 }
 function useDocxPagination(editor) {
-  return React.useMemo(
+  return React2.useMemo(
     () => ({
       pagination: {
         currentPage: editor.currentPage,
@@ -30978,6 +31261,9 @@ function DocxEditorViewer({
   editor,
   className,
   style,
+  zoom,
+  defaultZoom,
+  onZoomChange,
   pageBackgroundColor,
   pageGapBackgroundColor,
   deferInitialPaginationPaint = false,
@@ -30997,7 +31283,7 @@ function DocxEditorViewer({
   onFormFieldDoubleClick,
   mode = "edit"
 }) {
-  const fontMetricsRevision = React.useSyncExternalStore(
+  const fontMetricsRevision = React2.useSyncExternalStore(
     subscribeFontMetrics,
     getFontMetricsRevision,
     getServerFontMetricsRevision
@@ -31013,17 +31299,17 @@ function DocxEditorViewer({
   const documentContentTheme = isNightReaderMode ? "light" : editor.documentTheme;
   const documentContentFilter = isNightReaderMode ? NIGHT_READER_INVERSION_FILTER : void 0;
   const canReplaceDocumentByDrop = mode !== "read-only";
-  const formFieldLocationKey = React.useCallback(
+  const formFieldLocationKey = React2.useCallback(
     (location) => {
       return location.kind === "paragraph" ? `p:${location.nodeIndex}:${location.childIndex}` : `t:${location.tableIndex}:${location.rowIndex}:${location.cellIndex}:${location.paragraphIndex}:${location.childIndex}`;
     },
     []
   );
-  const tocLinkColorByLevel = React.useMemo(
+  const tocLinkColorByLevel = React2.useMemo(
     () => collectHeadingTextColorByLevel(editor.model),
     [editor.model]
   );
-  const paragraphRunRenderOptions = React.useMemo(
+  const paragraphRunRenderOptions = React2.useMemo(
     () => ({
       showTrackedChanges: trackedChangesEnabled,
       showCommentHighlights: commentsEnabled,
@@ -31039,29 +31325,29 @@ function DocxEditorViewer({
       trackedChangesEnabled
     ]
   );
-  const viewerRootRef = React.useRef(null);
-  const tableCellDraftsRef = React.useRef(/* @__PURE__ */ new Map());
-  const plainParagraphHtmlCacheRef = React.useRef(
+  const viewerRootRef = React2.useRef(null);
+  const tableCellDraftsRef = React2.useRef(/* @__PURE__ */ new Map());
+  const plainParagraphHtmlCacheRef = React2.useRef(
     /* @__PURE__ */ new WeakMap()
   );
-  const editableParagraphHtmlPropsRef = React.useRef(/* @__PURE__ */ new Map());
-  const editableTableCellHtmlPropsRef = React.useRef(/* @__PURE__ */ new Map());
-  const tableCellParagraphDraftsRef = React.useRef(
+  const editableParagraphHtmlPropsRef = React2.useRef(/* @__PURE__ */ new Map());
+  const editableTableCellHtmlPropsRef = React2.useRef(/* @__PURE__ */ new Map());
+  const tableCellParagraphDraftsRef = React2.useRef(
     /* @__PURE__ */ new Map()
   );
-  const contextMenuClipboardTextRef = React.useRef("");
-  const sectionParagraphDraftsRef = React.useRef(
+  const contextMenuClipboardTextRef = React2.useRef("");
+  const sectionParagraphDraftsRef = React2.useRef(
     /* @__PURE__ */ new Map()
   );
-  const pendingParagraphSegmentFocusRef = React.useRef(void 0);
-  const paragraphElementsRef = React.useRef(
+  const pendingParagraphSegmentFocusRef = React2.useRef(void 0);
+  const paragraphElementsRef = React2.useRef(
     /* @__PURE__ */ new Map()
   );
   const [
     measuredParagraphOuterHeightsPxByBlockId,
     setMeasuredParagraphOuterHeightsPxByBlockId
-  ] = React.useState(() => /* @__PURE__ */ new Map());
-  const measuredParagraphOuterHeightsPxByNodeIndex = React.useMemo(() => {
+  ] = React2.useState(() => /* @__PURE__ */ new Map());
+  const measuredParagraphOuterHeightsPxByNodeIndex = React2.useMemo(() => {
     const byNodeIndex = /* @__PURE__ */ new Map();
     if (measuredParagraphOuterHeightsPxByBlockId.size === 0) {
       return byNodeIndex;
@@ -31079,70 +31365,70 @@ function DocxEditorViewer({
     });
     return byNodeIndex;
   }, [editor.model.nodes, measuredParagraphOuterHeightsPxByBlockId]);
-  const tableCellEditorElementsRef = React.useRef(
+  const tableCellEditorElementsRef = React2.useRef(
     /* @__PURE__ */ new Map()
   );
-  const tableCellParagraphElementsRef = React.useRef(/* @__PURE__ */ new Map());
-  const sectionParagraphElementsRef = React.useRef(
+  const tableCellParagraphElementsRef = React2.useRef(/* @__PURE__ */ new Map());
+  const sectionParagraphElementsRef = React2.useRef(
     /* @__PURE__ */ new Map()
   );
-  const tableElementsRef = React.useRef(/* @__PURE__ */ new Map());
-  const pageHeaderElementsRef = React.useRef(
+  const tableElementsRef = React2.useRef(/* @__PURE__ */ new Map());
+  const pageHeaderElementsRef = React2.useRef(
     /* @__PURE__ */ new Map()
   );
-  const pageBodyElementsRef = React.useRef(
+  const pageBodyElementsRef = React2.useRef(
     /* @__PURE__ */ new Map()
   );
-  const pageFooterElementsRef = React.useRef(
+  const pageFooterElementsRef = React2.useRef(
     /* @__PURE__ */ new Map()
   );
-  const pageElementsRef = React.useRef(/* @__PURE__ */ new Map());
-  const pageSurfaceRefCallbacksRef = React.useRef(/* @__PURE__ */ new Map());
-  const trackedChangeCardElementsRef = React.useRef(/* @__PURE__ */ new Map());
-  const initialPaginationStableSignatureRef = React.useRef(
+  const pageElementsRef = React2.useRef(/* @__PURE__ */ new Map());
+  const pageSurfaceRefCallbacksRef = React2.useRef(/* @__PURE__ */ new Map());
+  const trackedChangeCardElementsRef = React2.useRef(/* @__PURE__ */ new Map());
+  const initialPaginationStableSignatureRef = React2.useRef(
     void 0
   );
-  const initialPaginationRevealFrameRef = React.useRef(null);
-  const pendingHeaderFooterDeactivateFrameRef = React.useRef(
+  const initialPaginationRevealFrameRef = React2.useRef(null);
+  const pendingHeaderFooterDeactivateFrameRef = React2.useRef(
     null
   );
-  const appliedHistoryRestoreNonceRef = React.useRef(0);
-  const pendingTableCellFocusRef = React.useRef(void 0);
-  const pendingSectionParagraphFocusRef = React.useRef(void 0);
-  const draggedImageRef = React.useRef(null);
-  const previousBodyNodeCountRef = React.useRef(
+  const appliedHistoryRestoreNonceRef = React2.useRef(0);
+  const pendingTableCellFocusRef = React2.useRef(void 0);
+  const pendingSectionParagraphFocusRef = React2.useRef(void 0);
+  const draggedImageRef = React2.useRef(null);
+  const previousBodyNodeCountRef = React2.useRef(
     editor.model.nodes.length
   );
-  const fileDragDepthRef = React.useRef(0);
-  const tableDraftLayoutRefreshRafRef = React.useRef(null);
-  const activeRangeFlushFrameRef = React.useRef(null);
-  const pendingEditableCaretRef = React.useRef(null);
-  const commandSelectionGuardRef = React.useRef(void 0);
-  const editingIntentContinuationRef = React.useRef(void 0);
-  const compositionActiveRef = React.useRef(false);
-  const pointerSelectionDragRef = React.useRef({ down: false, moved: false });
-  const deferredCollapsedSelectionSyncTimeoutRef = React.useRef(
+  const fileDragDepthRef = React2.useRef(0);
+  const tableDraftLayoutRefreshRafRef = React2.useRef(null);
+  const activeRangeFlushFrameRef = React2.useRef(null);
+  const pendingEditableCaretRef = React2.useRef(null);
+  const commandSelectionGuardRef = React2.useRef(void 0);
+  const editingIntentContinuationRef = React2.useRef(void 0);
+  const compositionActiveRef = React2.useRef(false);
+  const pointerSelectionDragRef = React2.useRef({ down: false, moved: false });
+  const deferredCollapsedSelectionSyncTimeoutRef = React2.useRef(
     null
   );
-  const pendingSelectionIntentFrameRef = React.useRef(null);
-  const selectionIntentNonceRef = React.useRef(0);
-  const lastFormFieldClickRef = React.useRef(void 0);
-  const [isDragOverCanvas, setIsDragOverCanvas] = React.useState(false);
-  const [isDraggingImage, setIsDraggingImage] = React.useState(false);
-  const [activeDropTarget, setActiveDropTarget] = React.useState();
-  const [selectedImage, setSelectedImage] = React.useState();
-  const [selectedSectionImageKey, setSelectedSectionImageKey] = React.useState();
-  const [selectedDropCapNodeIndex, setSelectedDropCapNodeIndex] = React.useState();
-  const [hoveredDropCapNodeIndex, setHoveredDropCapNodeIndex] = React.useState();
-  const [activeWrappedParagraphSession, setActiveWrappedParagraphSession] = React.useState();
-  const activeWrappedParagraphSessionRef = React.useRef(void 0);
-  const [resizePreview, setResizePreview] = React.useState();
-  const [floatingMovePreview, setFloatingMovePreview] = React.useState();
-  const [dropCapMovePreview, setDropCapMovePreview] = React.useState();
-  const [dropCapResizePreview, setDropCapResizePreview] = React.useState();
-  const [tableColumnWidths, setTableColumnWidths] = React.useState({});
-  const [embeddedTableColumnWidths, setEmbeddedTableColumnWidths] = React.useState({});
-  const handleRepeatedFormFieldClick = React.useCallback(
+  const pendingSelectionIntentFrameRef = React2.useRef(null);
+  const selectionIntentNonceRef = React2.useRef(0);
+  const lastFormFieldClickRef = React2.useRef(void 0);
+  const [isDragOverCanvas, setIsDragOverCanvas] = React2.useState(false);
+  const [isDraggingImage, setIsDraggingImage] = React2.useState(false);
+  const [activeDropTarget, setActiveDropTarget] = React2.useState();
+  const [selectedImage, setSelectedImage] = React2.useState();
+  const [selectedSectionImageKey, setSelectedSectionImageKey] = React2.useState();
+  const [selectedDropCapNodeIndex, setSelectedDropCapNodeIndex] = React2.useState();
+  const [hoveredDropCapNodeIndex, setHoveredDropCapNodeIndex] = React2.useState();
+  const [activeWrappedParagraphSession, setActiveWrappedParagraphSession] = React2.useState();
+  const activeWrappedParagraphSessionRef = React2.useRef(void 0);
+  const [resizePreview, setResizePreview] = React2.useState();
+  const [floatingMovePreview, setFloatingMovePreview] = React2.useState();
+  const [dropCapMovePreview, setDropCapMovePreview] = React2.useState();
+  const [dropCapResizePreview, setDropCapResizePreview] = React2.useState();
+  const [tableColumnWidths, setTableColumnWidths] = React2.useState({});
+  const [embeddedTableColumnWidths, setEmbeddedTableColumnWidths] = React2.useState({});
+  const handleRepeatedFormFieldClick = React2.useCallback(
     (location) => {
       const now2 = typeof performance !== "undefined" ? performance.now() : Date.now();
       const key = formFieldLocationKey(location);
@@ -31158,16 +31444,16 @@ function DocxEditorViewer({
     },
     [editor.selectFormField, formFieldLocationKey, onFormFieldDoubleClick]
   );
-  const [activeColumnResize, setActiveColumnResize] = React.useState();
-  const [activeEmbeddedColumnResize, setActiveEmbeddedColumnResize] = React.useState();
-  const [tableRowHeights, setTableRowHeights] = React.useState({});
-  const [embeddedTableRowHeights, setEmbeddedTableRowHeights] = React.useState({});
-  const [tableMeasuredRowHeights, setTableMeasuredRowHeights] = React.useState({});
+  const [activeColumnResize, setActiveColumnResize] = React2.useState();
+  const [activeEmbeddedColumnResize, setActiveEmbeddedColumnResize] = React2.useState();
+  const [tableRowHeights, setTableRowHeights] = React2.useState({});
+  const [embeddedTableRowHeights, setEmbeddedTableRowHeights] = React2.useState({});
+  const [tableMeasuredRowHeights, setTableMeasuredRowHeights] = React2.useState({});
   const [
     measuredPageContentHeightByIndex,
     setMeasuredPageContentHeightByIndex
-  ] = React.useState([]);
-  const pageSurfaceRefForIndex = React.useCallback(
+  ] = React2.useState([]);
+  const pageSurfaceRefForIndex = React2.useCallback(
     (pageIndex) => {
       const normalizedPageIndex = Math.max(0, Math.round(pageIndex));
       const cached = pageSurfaceRefCallbacksRef.current.get(normalizedPageIndex);
@@ -31197,54 +31483,54 @@ function DocxEditorViewer({
     },
     [pageSurfaceRegistryOwner]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     pageSurfaceRefCallbacksRef.current.clear();
   }, [pageSurfaceRegistryOwner]);
   const [
     measuredPageContentIdentityKeysByIndex,
     setMeasuredPageContentIdentityKeysByIndex
-  ] = React.useState([]);
+  ] = React2.useState([]);
   const [
     measuredPageContentValidationByIndex,
     setMeasuredPageContentValidationByIndex
-  ] = React.useState([]);
-  const [hasMeasuredBodyFooterOverlap, setHasMeasuredBodyFooterOverlap] = React.useState(false);
-  const measuredBodyFooterOverlapCandidateRef = React.useRef({
+  ] = React2.useState([]);
+  const [hasMeasuredBodyFooterOverlap, setHasMeasuredBodyFooterOverlap] = React2.useState(false);
+  const measuredBodyFooterOverlapCandidateRef = React2.useRef({
     signature: void 0,
     consecutivePasses: 0
   });
-  const [, setRenderableImageSourceRevision] = React.useState(0);
-  const [activeEditableParagraphSegment, setActiveEditableParagraphSegment] = React.useState(void 0);
-  const wrappedParagraphTextareaRef = React.useRef(
+  const [, setRenderableImageSourceRevision] = React2.useState(0);
+  const [activeEditableParagraphSegment, setActiveEditableParagraphSegment] = React2.useState(void 0);
+  const wrappedParagraphTextareaRef = React2.useRef(
     null
   );
-  const wrappedParagraphPendingSelectionRef = React.useRef(void 0);
-  const wrappedParagraphSelectionDragRef = React.useRef(void 0);
-  const wrappedParagraphSurfaceRegistryRef = React.useRef(/* @__PURE__ */ new Map());
-  const [isInitialPaginationSettled, setIsInitialPaginationSettled] = React.useState(!deferInitialPaginationPaint);
+  const wrappedParagraphPendingSelectionRef = React2.useRef(void 0);
+  const wrappedParagraphSelectionDragRef = React2.useRef(void 0);
+  const wrappedParagraphSurfaceRegistryRef = React2.useRef(/* @__PURE__ */ new Map());
+  const [isInitialPaginationSettled, setIsInitialPaginationSettled] = React2.useState(!deferInitialPaginationPaint);
   const [
     initialPaginationBackgroundRefinementUnlocked,
     setInitialPaginationBackgroundRefinementUnlocked
-  ] = React.useState(!deferInitialPaginationPaint);
-  const [postImportPaginationUnlocked, setPostImportPaginationUnlocked] = React.useState(false);
+  ] = React2.useState(!deferInitialPaginationPaint);
+  const [postImportPaginationUnlocked, setPostImportPaginationUnlocked] = React2.useState(false);
   const [
     initialPaginationReservedLayoutState,
     setInitialPaginationReservedLayoutState
-  ] = React.useState({
+  ] = React2.useState({
     pageCount: 0,
     totalHeightPx: 0
   });
-  const [disableMeasuredImportPagination, setDisableMeasuredImportPagination] = React.useState(false);
-  const initialPaginationPageCountOscillationRef = React.useRef({
+  const [disableMeasuredImportPagination, setDisableMeasuredImportPagination] = React2.useState(false);
+  const initialPaginationPageCountOscillationRef = React2.useRef({
     changeCount: 0,
     distinctPageCounts: /* @__PURE__ */ new Set()
   });
-  React.useEffect(() => {
+  React2.useEffect(() => {
     return subscribeRenderableImageSourceUpdates(() => {
       setRenderableImageSourceRevision((value) => value + 1);
     });
   }, []);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -31264,7 +31550,7 @@ function DocxEditorViewer({
       document.head.appendChild(styleElement);
     }
   }, []);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     setMeasuredPageContentHeightByIndex([]);
     setMeasuredPageContentIdentityKeysByIndex([]);
     setMeasuredPageContentValidationByIndex([]);
@@ -31309,7 +31595,7 @@ function DocxEditorViewer({
       distinctPageCounts: /* @__PURE__ */ new Set()
     };
   }, [editor.documentLoadNonce]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     initialPaginationStableSignatureRef.current = void 0;
     if (initialPaginationRevealFrameRef.current !== null && typeof window !== "undefined" && typeof window.cancelAnimationFrame === "function") {
       window.cancelAnimationFrame(initialPaginationRevealFrameRef.current);
@@ -31320,47 +31606,47 @@ function DocxEditorViewer({
       !deferInitialPaginationPaint
     );
   }, [deferInitialPaginationPaint, editor.documentLoadNonce]);
-  const [activeRowResize, setActiveRowResize] = React.useState();
-  const [activeEmbeddedRowResize, setActiveEmbeddedRowResize] = React.useState();
-  const [activeTableResize, setActiveTableResize] = React.useState();
-  const [activeEmbeddedTableResize, setActiveEmbeddedTableResize] = React.useState();
-  const [hoveredTableResizeHandle, setHoveredTableResizeHandle] = React.useState();
-  const [hoveredTableHandleTableIndex, setHoveredTableHandleTableIndex] = React.useState();
+  const [activeRowResize, setActiveRowResize] = React2.useState();
+  const [activeEmbeddedRowResize, setActiveEmbeddedRowResize] = React2.useState();
+  const [activeTableResize, setActiveTableResize] = React2.useState();
+  const [activeEmbeddedTableResize, setActiveEmbeddedTableResize] = React2.useState();
+  const [hoveredTableResizeHandle, setHoveredTableResizeHandle] = React2.useState();
+  const [hoveredTableHandleTableIndex, setHoveredTableHandleTableIndex] = React2.useState();
   const [
     hoveredEmbeddedTableResizeHandle,
     setHoveredEmbeddedTableResizeHandle
-  ] = React.useState();
-  const [hoveredEmbeddedTableKey, setHoveredEmbeddedTableKey] = React.useState();
-  const [focusedEmbeddedTableKey, setFocusedEmbeddedTableKey] = React.useState();
-  const tableSelectionDragRef = React.useRef(void 0);
-  const tableCellSelectionDragRef = React.useRef(void 0);
-  const tableMoveDragRef = React.useRef(void 0);
-  const suppressNextTableCellClickRef = React.useRef(false);
-  const [tableCellSelectionRange, setTableCellSelectionRange] = React.useState();
-  const [tableMoveDropPreview, setTableMoveDropPreview] = React.useState();
-  const [objectWrapDragPreview, setObjectWrapDragPreview] = React.useState();
-  const objectDragCleanupRef = React.useRef(void 0);
-  React.useEffect(() => () => objectDragCleanupRef.current?.(), [editor.documentLoadNonce, editor.model, isReadOnly]);
-  const [tableContextMenuState, setTableContextMenuState] = React.useState();
-  const [contextMenuState, setContextMenuState] = React.useState();
-  const [activeHeaderFooterEdit, setActiveHeaderFooterEdit] = React.useState();
-  const [tableDraftLayoutEpoch, bumpTableDraftLayoutEpoch] = React.useReducer(
+  ] = React2.useState();
+  const [hoveredEmbeddedTableKey, setHoveredEmbeddedTableKey] = React2.useState();
+  const [focusedEmbeddedTableKey, setFocusedEmbeddedTableKey] = React2.useState();
+  const tableSelectionDragRef = React2.useRef(void 0);
+  const tableCellSelectionDragRef = React2.useRef(void 0);
+  const tableMoveDragRef = React2.useRef(void 0);
+  const suppressNextTableCellClickRef = React2.useRef(false);
+  const [tableCellSelectionRange, setTableCellSelectionRange] = React2.useState();
+  const [tableMoveDropPreview, setTableMoveDropPreview] = React2.useState();
+  const [objectWrapDragPreview, setObjectWrapDragPreview] = React2.useState();
+  const objectDragCleanupRef = React2.useRef(void 0);
+  React2.useEffect(() => () => objectDragCleanupRef.current?.(), [editor.documentLoadNonce, editor.model, isReadOnly]);
+  const [tableContextMenuState, setTableContextMenuState] = React2.useState();
+  const [contextMenuState, setContextMenuState] = React2.useState();
+  const [activeHeaderFooterEdit, setActiveHeaderFooterEdit] = React2.useState();
+  const [tableDraftLayoutEpoch, bumpTableDraftLayoutEpoch] = React2.useReducer(
     (value) => value + 1,
     0
   );
-  const [paragraphStructureEpoch, bumpParagraphStructureEpoch] = React.useReducer((value) => value + 1, 0);
-  const [paginationMeasurementEpoch, bumpPaginationMeasurementEpoch] = React.useReducer((value) => value + 1, 0);
-  const [measuredWrapBands, setMeasuredWrapBands] = React.useState(() => /* @__PURE__ */ new Map());
-  const wrapBandReconcileModelRef = React.useRef(void 0);
-  const wrapBandReconcilePassCountRef = React.useRef(0);
-  const paginationMeasurementSuspendUntilRef = React.useRef(0);
-  const paginationMeasurementResumeTimeoutRef = React.useRef(
+  const [paragraphStructureEpoch, bumpParagraphStructureEpoch] = React2.useReducer((value) => value + 1, 0);
+  const [paginationMeasurementEpoch, bumpPaginationMeasurementEpoch] = React2.useReducer((value) => value + 1, 0);
+  const [measuredWrapBands, setMeasuredWrapBands] = React2.useState(() => /* @__PURE__ */ new Map());
+  const wrapBandReconcileModelRef = React2.useRef(void 0);
+  const wrapBandReconcilePassCountRef = React2.useRef(0);
+  const paginationMeasurementSuspendUntilRef = React2.useRef(0);
+  const paginationMeasurementResumeTimeoutRef = React2.useRef(
     null
   );
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     setMeasuredParagraphOuterHeightsPxByBlockId(/* @__PURE__ */ new Map());
   }, [editor.documentLoadNonce]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     setMeasuredParagraphOuterHeightsPxByBlockId((current) => {
       if (current.size === 0) {
         return current;
@@ -31380,7 +31666,7 @@ function DocxEditorViewer({
       return next ?? current;
     });
   }, [editor.model.nodes]);
-  const schedulePaginationMeasurementResume = React.useCallback(
+  const schedulePaginationMeasurementResume = React2.useCallback(
     (delayMs) => {
       if (typeof window === "undefined") {
         return;
@@ -31401,7 +31687,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const requestTableDraftLayoutRefresh = React.useCallback(() => {
+  const requestTableDraftLayoutRefresh = React2.useCallback(() => {
     if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") {
       bumpTableDraftLayoutEpoch();
       return;
@@ -31414,7 +31700,7 @@ function DocxEditorViewer({
       bumpTableDraftLayoutEpoch();
     });
   }, []);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     return () => {
       if (tableDraftLayoutRefreshRafRef.current !== null && typeof window !== "undefined" && typeof window.cancelAnimationFrame === "function") {
         window.cancelAnimationFrame(tableDraftLayoutRefreshRafRef.current);
@@ -31448,7 +31734,7 @@ function DocxEditorViewer({
       pendingSelectionIntentFrameRef.current = null;
     };
   }, []);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!isReadOnly) {
       return;
     }
@@ -31482,7 +31768,7 @@ function DocxEditorViewer({
     sectionParagraphDraftsRef.current.clear();
     pendingSectionParagraphFocusRef.current = void 0;
   }, [isReadOnly]);
-  const beginSelectionIntent = React.useCallback(() => {
+  const beginSelectionIntent = React2.useCallback(() => {
     if (pendingSelectionIntentFrameRef.current !== null && typeof window !== "undefined" && typeof window.cancelAnimationFrame === "function") {
       window.cancelAnimationFrame(pendingSelectionIntentFrameRef.current);
     }
@@ -31491,13 +31777,13 @@ function DocxEditorViewer({
     selectionIntentNonceRef.current = nextNonce;
     return nextNonce;
   }, []);
-  const isSelectionIntentCurrent = React.useCallback(
+  const isSelectionIntentCurrent = React2.useCallback(
     (nonce) => {
       return selectionIntentNonceRef.current === nonce;
     },
     []
   );
-  const scheduleSelectionIntentFrame = React.useCallback(
+  const scheduleSelectionIntentFrame = React2.useCallback(
     (nonce, callback) => {
       if (pendingSelectionIntentFrameRef.current !== null && typeof window !== "undefined" && typeof window.cancelAnimationFrame === "function") {
         window.cancelAnimationFrame(pendingSelectionIntentFrameRef.current);
@@ -31521,10 +31807,10 @@ function DocxEditorViewer({
     },
     []
   );
-  const cancelPendingSelectionIntent = React.useCallback(() => {
+  const cancelPendingSelectionIntent = React2.useCallback(() => {
     beginSelectionIntent();
   }, [beginSelectionIntent]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const previousNodeCount = previousBodyNodeCountRef.current;
     const nextNodeCount = editor.model.nodes.length;
     const structureChanged = previousNodeCount !== nextNodeCount;
@@ -31573,20 +31859,20 @@ function DocxEditorViewer({
     });
     previousBodyNodeCountRef.current = nextNodeCount;
   }, [editor.model.nodes]);
-  const documentSections = React.useMemo(
+  const documentSections = React2.useMemo(
     () => resolveDocumentSectionsFromMetadata(editor.model.metadata),
     [editor.model.metadata]
   );
   const primarySectionPropertiesXml = documentSections[0]?.sectionPropertiesXml ?? editor.model.metadata.sectionPropertiesXml;
-  const documentLayout = React.useMemo(
+  const documentLayout = React2.useMemo(
     () => parseSectionLayout(primarySectionPropertiesXml),
     [primarySectionPropertiesXml]
   );
-  const paginationSectionMetrics = React.useMemo(
+  const paginationSectionMetrics = React2.useMemo(
     () => buildPaginationSectionMetrics(documentSections, documentLayout),
     [documentLayout, documentSections]
   );
-  const paginationMeasurementContextSignature = React.useMemo(
+  const paginationMeasurementContextSignature = React2.useMemo(
     () => [
       Math.round(documentLayout.pageWidthPx),
       Math.round(documentLayout.pageHeightPx),
@@ -31605,7 +31891,7 @@ function DocxEditorViewer({
       trackedChangesEnabled
     ]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     setMeasuredPageContentHeightByIndex((current) => current.length ? [] : current);
     setMeasuredPageContentIdentityKeysByIndex(
       (current) => current.length ? [] : current
@@ -31615,7 +31901,7 @@ function DocxEditorViewer({
     );
     setHasMeasuredBodyFooterOverlap(false);
   }, [fontMetricsRevision]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     setMeasuredParagraphOuterHeightsPxByBlockId(
       (current) => current.size === 0 ? current : /* @__PURE__ */ new Map()
     );
@@ -31627,7 +31913,7 @@ function DocxEditorViewer({
     docGridLinePitchPxByNodeIndex,
     pageContentWidthPxByNodeIndex,
     pageContentHeightPxByNodeIndex
-  } = React.useMemo(() => {
+  } = React2.useMemo(() => {
     const pitchByNodeIndex = /* @__PURE__ */ new Map();
     const widthByNodeIndex = /* @__PURE__ */ new Map();
     const heightByNodeIndex = /* @__PURE__ */ new Map();
@@ -31674,17 +31960,17 @@ function DocxEditorViewer({
       pageContentHeightPxByNodeIndex: heightByNodeIndex
     };
   }, [editor.model.nodes.length, paginationSectionMetrics]);
-  const sectionColumnsBySectionIndex = React.useMemo(
+  const sectionColumnsBySectionIndex = React2.useMemo(
     () => documentSections.map(
       (section) => parseSectionColumns(section.sectionPropertiesXml)
     ),
     [documentSections]
   );
-  const paragraphNumberingLabels = React.useMemo(
+  const paragraphNumberingLabels = React2.useMemo(
     () => buildParagraphNumberingLabels(editor.model),
     [editor.model]
   );
-  const noteMarkerIndexes = React.useMemo(
+  const noteMarkerIndexes = React2.useMemo(
     () => ({
       footnote: new Map(
         editor.model.metadata.footnotes?.map((note, index) => [
@@ -31701,7 +31987,7 @@ function DocxEditorViewer({
     }),
     [editor.model.metadata.footnotes, editor.model.metadata.endnotes]
   );
-  const bookmarkTargetNodeIndexByName = React.useMemo(() => {
+  const bookmarkTargetNodeIndexByName = React2.useMemo(() => {
     const targets = /* @__PURE__ */ new Map();
     editor.model.nodes.forEach((node, nodeIndex) => {
       if (node.type === "paragraph") {
@@ -31726,7 +32012,7 @@ function DocxEditorViewer({
     });
     return targets;
   }, [editor.model.nodes]);
-  const tableMeasuredRowHeightsForPagination = React.useMemo(() => {
+  const tableMeasuredRowHeightsForPagination = React2.useMemo(() => {
     const allowMeasuredImportPagination = !editor.canUndo && !editor.canRedo && !disableMeasuredImportPagination;
     const activeDraftKeys = [
       ...tableCellDraftsRef.current.keys(),
@@ -31757,10 +32043,10 @@ function DocxEditorViewer({
     tableDraftLayoutEpoch,
     tableMeasuredRowHeights
   ]);
-  const textEditPaginationMemo = React.useRef(null);
+  const textEditPaginationMemo = React2.useRef(null);
   if (!textEditPaginationMemo.current)
     textEditPaginationMemo.current = createTextEditPaginationMemo();
-  const pageSegmentationPlan = React.useMemo(() => {
+  const pageSegmentationPlan = React2.useMemo(() => {
     const pageContentHeightPx = Math.max(
       120,
       documentLayout.pageHeightPx - documentLayout.marginsPx.top - documentLayout.marginsPx.bottom
@@ -32161,13 +32447,13 @@ function DocxEditorViewer({
   const useMeasuredPageContentHeightsForRender = pageSegmentationPlan.useMeasuredPageContentHeightsForRender;
   const renderMeasuredPageContentHeightsPxByPageIndex = pageSegmentationPlan.renderMeasuredPageContentHeightsPxByPageIndex;
   const renderPageContentHeightScale = pageSegmentationPlan.renderPageContentHeightScale;
-  const pageNodeSegmentIdentityKeysByPage = React.useMemo(
+  const pageNodeSegmentIdentityKeysByPage = React2.useMemo(
     () => pageNodeSegmentsByPage.map(
       (pageSegments) => documentPageNodeSegmentsIdentityKey(pageSegments)
     ),
     [pageNodeSegmentsByPage]
   );
-  const pageIndexByNodeIndex = React.useMemo(() => {
+  const pageIndexByNodeIndex = React2.useMemo(() => {
     const indexByNode = /* @__PURE__ */ new Map();
     pageNodeSegmentsByPage.forEach((segments, pageIndex) => {
       segments.forEach((segment) => {
@@ -32178,14 +32464,14 @@ function DocxEditorViewer({
     });
     return indexByNode;
   }, [pageNodeSegmentsByPage]);
-  const storedDocumentPageCount = React.useMemo(() => {
+  const storedDocumentPageCount = React2.useMemo(() => {
     const value = editor.model.metadata.documentPageCount;
     if (!Number.isFinite(value) || value <= 0) {
       return void 0;
     }
     return Math.max(1, Math.round(value));
   }, [editor.model.metadata.documentPageCount]);
-  const pageSectionInfoByIndex = React.useMemo(() => {
+  const pageSectionInfoByIndex = React2.useMemo(() => {
     if (pageNodeSegmentsByPage.length === 0) {
       return [];
     }
@@ -32322,7 +32608,7 @@ function DocxEditorViewer({
     pageNodeSegmentsByPage,
     primarySectionPropertiesXml
   ]);
-  const pageThumbnailContentKeysByPage = React.useMemo(() => {
+  const pageThumbnailContentKeysByPage = React2.useMemo(() => {
     const metadataSignature = docModelThumbnailMetadataSignature(
       editor.model.metadata
     );
@@ -32352,7 +32638,7 @@ function DocxEditorViewer({
     pageSectionInfoByIndex,
     trackedChangesEnabled
   ]);
-  const pageThumbnailSurfaceSizesByPage = React.useMemo(
+  const pageThumbnailSurfaceSizesByPage = React2.useMemo(
     () => pageNodeSegmentsByPage.map((_, pageIndex) => {
       const pageLayout = pageSectionInfoByIndex[pageIndex]?.layout ?? documentLayout;
       return {
@@ -32362,7 +32648,7 @@ function DocxEditorViewer({
     }),
     [documentLayout, pageNodeSegmentsByPage, pageSectionInfoByIndex]
   );
-  const pageThumbnailSnapshotEntriesByPage = React.useMemo(
+  const pageThumbnailSnapshotEntriesByPage = React2.useMemo(
     () => buildDocxPageThumbnailRenderSnapshotEntries({
       model: editor.model,
       pageNodeSegmentsByPage,
@@ -32384,7 +32670,7 @@ function DocxEditorViewer({
       pageThumbnailContentKeysByPage
     ]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     syncDocxViewerPageSurfaceContentKeys(
       editor,
       pageThumbnailContentKeysByPage,
@@ -32397,7 +32683,7 @@ function DocxEditorViewer({
     pageThumbnailSnapshotEntriesByPage,
     pageThumbnailSurfaceSizesByPage
   ]);
-  const resolveStyleRefFieldValueForPage = React.useMemo(() => {
+  const resolveStyleRefFieldValueForPage = React2.useMemo(() => {
     const valueCache = /* @__PURE__ */ new Map();
     const nodes = editor.model.nodes;
     const resolveFromParagraph = (paragraph, target, normalizedTarget) => {
@@ -32462,14 +32748,43 @@ function DocxEditorViewer({
     };
   }, [editor.model.nodes, pageNodeSegmentsByPage]);
   const pageCount = pageNodeSegmentsByPage.length;
-  const requestedPageIndexes = React.useMemo(
+  const viewerZoomContentSize = React2.useMemo(() => {
+    let width = documentLayout.pageWidthPx;
+    let height = documentLayout.pageHeightPx;
+    pageSectionInfoByIndex.forEach(({ layout }) => {
+      width = Math.max(width, layout.pageWidthPx);
+      height = Math.max(height, layout.pageHeightPx);
+    });
+    if (showTrackedChangeGutter) {
+      width += TRACKED_CHANGE_GUTTER_WIDTH_PX;
+    }
+    return { width, height };
+  }, [documentLayout, pageSectionInfoByIndex, showTrackedChangeGutter]);
+  const onViewerZoomBridgeChange = React2.useCallback(
+    (bridge) => {
+      setViewerZoomBridge(editor, bridge);
+    },
+    [editor.syncPaginationInfo]
+  );
+  const viewerZoom = useViewerZoom({
+    zoom,
+    defaultZoom: defaultZoom ?? editor.getZoom(),
+    onZoomChange,
+    rootRef: viewerRootRef,
+    contentWidth: viewerZoomContentSize.width,
+    contentHeight: viewerZoomContentSize.height,
+    pageSelector: '[data-docx-page-wrapper="true"]',
+    onBridgeChange: onViewerZoomBridgeChange
+  });
+  const builtInViewerZoomScale = viewerZoom.resolvedZoom / 100;
+  const requestedPageIndexes = React2.useMemo(
     () => normalizeDocxThumbnailPageIndexes(pageIndexes, pageCount).sort(
       (left, right) => left - right
     ),
     [pageCount, pageIndexes]
   );
   const hasRequestedPageIndexes = pageIndexes !== void 0;
-  const hasLargeTableLayoutSurface = React.useMemo(() => {
+  const hasLargeTableLayoutSurface = React2.useMemo(() => {
     let tableParagraphCount = 0;
     let tableCellCount = 0;
     let largestRowParagraphCount = 0;
@@ -32496,7 +32811,7 @@ function DocxEditorViewer({
     return tableParagraphCount >= 1e3 || tableCellCount >= 240 || largestRowParagraphCount >= 100;
   }, [editor.model.nodes]);
   const hideDocumentUntilPaginationSettled = deferInitialPaginationPaint && !isInitialPaginationSettled;
-  const estimateDocumentStackHeightPx = React.useCallback(
+  const estimateDocumentStackHeightPx = React2.useCallback(
     (count) => {
       const safeCount = Math.max(0, Math.round(count));
       if (safeCount <= 0) {
@@ -32512,7 +32827,7 @@ function DocxEditorViewer({
     },
     [documentLayout, pageSectionInfoByIndex]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!hideDocumentUntilPaginationSettled) {
       setInitialPaginationReservedLayoutState((current) => {
         if (current.pageCount === 0 && current.totalHeightPx === 0) {
@@ -32564,10 +32879,10 @@ function DocxEditorViewer({
     )
   ) : 0;
   const hasExternalVisiblePageRange = hasRequestedPageIndexes || Number.isFinite(Number(visiblePageRange?.startPageIndex)) || Number.isFinite(Number(visiblePageRange?.endPageIndex));
-  const [deferInternalPageVirtualization, setDeferInternalPageVirtualization] = React.useState(false);
-  const [internalVirtualScrollElement, setInternalVirtualScrollElement] = React.useState(null);
-  const [virtualizerMeasurementScale, setVirtualizerMeasurementScale] = React.useState(1);
-  const [observedVisiblePageRange, setObservedVisiblePageRange] = React.useState(void 0);
+  const [deferInternalPageVirtualization, setDeferInternalPageVirtualization] = React2.useState(false);
+  const [internalVirtualScrollElement, setInternalVirtualScrollElement] = React2.useState(null);
+  const [virtualizerMeasurementScale, setVirtualizerMeasurementScale] = React2.useState(1);
+  const [observedVisiblePageRange, setObservedVisiblePageRange] = React2.useState(void 0);
   const pageVirtualizationSettleDelayMs = Math.max(
     0,
     Math.round(
@@ -32585,16 +32900,16 @@ function DocxEditorViewer({
   const internalPageVirtualizationRequested = pageVirtualization?.enabled !== false && !hasExternalVisiblePageRange && !hideDocumentUntilPaginationSettled && isInitialPaginationSettled && !deferInternalPageVirtualization && !webdriverActive && pageCount > 1;
   const explicitPageVirtualizationScrollElement = pageVirtualization?.scrollElement ?? null;
   const explicitPageVirtualizationZoomScale = normalizePageVirtualizationZoomScale(pageVirtualization?.zoomScale);
-  const resolveViewerMeasurementZoomScale = React.useCallback(
+  const resolveViewerMeasurementZoomScale = React2.useCallback(
     (rootElement, fallback = 1) => {
       if (explicitPageVirtualizationZoomScale !== void 0) {
-        return explicitPageVirtualizationZoomScale;
+        return explicitPageVirtualizationZoomScale * builtInViewerZoomScale;
       }
-      return rootElement ? resolveEffectiveZoomScale(rootElement) : fallback;
+      return rootElement ? resolveEffectiveZoomScale(rootElement) : fallback * builtInViewerZoomScale;
     },
-    [explicitPageVirtualizationZoomScale]
+    [builtInViewerZoomScale, explicitPageVirtualizationZoomScale]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (floatingMovePreview || objectWrapDragPreview || resizePreview || tableMoveDragRef.current) {
       return;
     }
@@ -32726,10 +33041,10 @@ function DocxEditorViewer({
     }
     setMeasuredWrapBands(next);
   });
-  React.useEffect(() => {
+  React2.useEffect(() => {
     setDeferInternalPageVirtualization(!hasLargeTableLayoutSurface);
   }, [editor.documentLoadNonce, hasLargeTableLayoutSurface]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (typeof window === "undefined" || webdriverActive || pageCount <= 1) {
       setDeferInternalPageVirtualization(true);
       return;
@@ -32751,12 +33066,12 @@ function DocxEditorViewer({
     pageVirtualizationSettleDelayMs,
     webdriverActive
   ]);
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     if (typeof window === "undefined") {
       return;
     }
     setInternalVirtualScrollElement(
-      explicitPageVirtualizationScrollElement instanceof HTMLElement ? explicitPageVirtualizationScrollElement : nearestScrollableAncestor(viewerRootRef.current)
+      explicitPageVirtualizationScrollElement instanceof HTMLElement ? explicitPageVirtualizationScrollElement : nearestScrollableAncestor2(viewerRootRef.current)
     );
   }, [
     editor.documentLoadNonce,
@@ -32764,8 +33079,8 @@ function DocxEditorViewer({
     pageCount,
     trackedChangesEnabled
   ]);
-  const [zoomProbeNonce, setZoomProbeNonce] = React.useState(0);
-  React.useEffect(() => {
+  const [zoomProbeNonce, setZoomProbeNonce] = React2.useState(0);
+  React2.useEffect(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -32784,7 +33099,7 @@ function DocxEditorViewer({
       window.removeEventListener("resize", bumpZoomProbe);
     };
   }, [editor.documentLoadNonce]);
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -32813,7 +33128,7 @@ function DocxEditorViewer({
   const internalVirtualScrollUsesWindow = typeof document !== "undefined" && internalVirtualScrollElement !== null && (internalVirtualScrollElement === document.scrollingElement || internalVirtualScrollElement === document.documentElement || internalVirtualScrollElement === document.body);
   const internalElementPageVirtualizationEnabled = internalPageVirtualizationEnabled && !internalVirtualScrollUsesWindow;
   const internalWindowPageVirtualizationEnabled = internalPageVirtualizationEnabled && internalVirtualScrollUsesWindow;
-  const estimateVirtualPageSize = React.useCallback(
+  const estimateVirtualPageSize = React2.useCallback(
     (pageIndex) => {
       const pageLayout = pageSectionInfoByIndex[pageIndex]?.layout ?? documentLayout;
       return Math.max(
@@ -32825,7 +33140,7 @@ function DocxEditorViewer({
     },
     [documentLayout, pageSectionInfoByIndex, virtualizerMeasurementScale]
   );
-  const suspendPaginationMeasurementForScroll = React.useCallback(() => {
+  const suspendPaginationMeasurementForScroll = React2.useCallback(() => {
     paginationMeasurementSuspendUntilRef.current = Date.now() + PAGE_SCROLL_MEASUREMENT_SUSPEND_MS;
   }, []);
   const internalElementPageVirtualizer = (0, import_react_virtual.useVirtualizer)({
@@ -32846,7 +33161,7 @@ function DocxEditorViewer({
       (layout.pageHeightPx + DOC_PAGE_BREAK_GAP) * virtualizerMeasurementScale
     )
   ).join("|");
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     internalElementPageVirtualizer.measure();
     internalWindowPageVirtualizer.measure();
   }, [
@@ -32857,7 +33172,7 @@ function DocxEditorViewer({
     internalWindowPageVirtualizer
   ]);
   const internalVirtualItems = internalPageVirtualizer.getVirtualItems();
-  const internalMostVisiblePageIndex = React.useMemo(() => {
+  const internalMostVisiblePageIndex = React2.useMemo(() => {
     if (!internalPageVirtualizationEnabled || internalVirtualItems.length === 0) {
       return void 0;
     }
@@ -32881,7 +33196,7 @@ function DocxEditorViewer({
     internalVirtualItems,
     pageCount
   ]);
-  const internalVisiblePageRange = React.useMemo(() => {
+  const internalVisiblePageRange = React2.useMemo(() => {
     if (!internalPageVirtualizationEnabled) {
       return void 0;
     }
@@ -32914,7 +33229,7 @@ function DocxEditorViewer({
       endPageIndex
     };
   }, [internalPageVirtualizationEnabled, internalVirtualItems, pageCount]);
-  const internalRenderVisiblePageRange = React.useMemo(() => {
+  const internalRenderVisiblePageRange = React2.useMemo(() => {
     if (!internalVisiblePageRange) {
       return void 0;
     }
@@ -32946,7 +33261,7 @@ function DocxEditorViewer({
     pageVirtualization?.overscan
   ]);
   const shouldObserveVisiblePageRange = hasLargeTableLayoutSurface || internalVirtualItems.length === 0;
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     if (!internalPageVirtualizationEnabled || !internalVirtualScrollElement || !shouldObserveVisiblePageRange || typeof window === "undefined") {
       setObservedVisiblePageRange(
         (current) => current === void 0 ? current : void 0
@@ -32962,14 +33277,14 @@ function DocxEditorViewer({
     }
     let frameId = null;
     const commitObservedVisiblePageRange = (updater) => {
-      React.startTransition(() => {
+      React2.startTransition(() => {
         setObservedVisiblePageRange(updater);
       });
     };
     const syncVisiblePageRange = () => {
       frameId = null;
       suspendPaginationMeasurementForScroll();
-      const viewportRect = internalVirtualScrollUsesWindow ? {
+      const viewportRect2 = internalVirtualScrollUsesWindow ? {
         top: 0,
         bottom: window.innerHeight
       } : internalVirtualScrollElement.getBoundingClientRect();
@@ -32985,10 +33300,10 @@ function DocxEditorViewer({
           continue;
         }
         const pageRect = pageWrapper.getBoundingClientRect();
-        if (pageRect.bottom <= viewportRect.top) {
+        if (pageRect.bottom <= viewportRect2.top) {
           continue;
         }
-        if (pageRect.top >= viewportRect.bottom) {
+        if (pageRect.top >= viewportRect2.bottom) {
           if (firstVisiblePageIndex !== void 0) {
             break;
           }
@@ -33078,7 +33393,7 @@ function DocxEditorViewer({
     shouldObserveVisiblePageRange,
     suspendPaginationMeasurementForScroll
   ]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!internalPageVirtualizationEnabled || !internalVirtualScrollElement || typeof window === "undefined") {
       return;
     }
@@ -33096,7 +33411,7 @@ function DocxEditorViewer({
     internalVirtualScrollUsesWindow,
     suspendPaginationMeasurementForScroll
   ]);
-  const internalEffectiveRenderVisiblePageRange = React.useMemo(() => {
+  const internalEffectiveRenderVisiblePageRange = React2.useMemo(() => {
     if (!internalRenderVisiblePageRange) {
       return observedVisiblePageRange;
     }
@@ -33129,7 +33444,7 @@ function DocxEditorViewer({
       Math.max(0, pageVirtualizationOverscan)
     )
   } : void 0);
-  const normalizedVisiblePageRange = React.useMemo(() => {
+  const normalizedVisiblePageRange = React2.useMemo(() => {
     if (pageCount <= 0) {
       return {
         startPageIndex: 0,
@@ -33161,7 +33476,7 @@ function DocxEditorViewer({
   const measureAllPagesBeforeInitialReveal = hideDocumentUntilPaginationSettled && pageCount > 0 && initialPremeasureStartPageIndex === 0 && initialPremeasureEndPageIndex >= pageCount - 1;
   const visiblePageStartIndex = hasRequestedPageIndexes ? requestedPageIndexes[0] ?? 0 : measureAllPagesBeforeInitialReveal ? 0 : hideDocumentUntilPaginationSettled ? initialPremeasureStartPageIndex : normalizedVisiblePageRange.startPageIndex;
   const visiblePageEndIndex = hasRequestedPageIndexes ? requestedPageIndexes[requestedPageIndexes.length - 1] ?? -1 : measureAllPagesBeforeInitialReveal ? pageCount - 1 : hideDocumentUntilPaginationSettled ? initialPremeasureEndPageIndex : normalizedVisiblePageRange.endPageIndex;
-  const visiblePageIndexes = React.useMemo(() => {
+  const visiblePageIndexes = React2.useMemo(() => {
     if (hasRequestedPageIndexes) {
       return requestedPageIndexes;
     }
@@ -33180,7 +33495,7 @@ function DocxEditorViewer({
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
-  const pageStackVirtualSpacers = React.useMemo(() => {
+  const pageStackVirtualSpacers = React2.useMemo(() => {
     const pageWrapperWidthPxForIndex = (pageIndex) => {
       const pageLayout = pageSectionInfoByIndex[pageIndex]?.layout ?? documentLayout;
       return showTrackedChangeGutter ? pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_WIDTH_PX : pageLayout.pageWidthPx;
@@ -33214,7 +33529,7 @@ function DocxEditorViewer({
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -33264,7 +33579,7 @@ function DocxEditorViewer({
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
-  const visibleTableRowIndexesByNodeIndex = React.useMemo(() => {
+  const visibleTableRowIndexesByNodeIndex = React2.useMemo(() => {
     const rowsByNodeIndex = /* @__PURE__ */ new Map();
     const addRowIndex = (nodeIndex, rowIndex) => {
       const tableNode = editor.model.nodes[nodeIndex];
@@ -33302,7 +33617,7 @@ function DocxEditorViewer({
     return rowsByNodeIndex;
   }, [editor.model.nodes, pageNodeSegmentsByPage, visiblePageIndexes]);
   const paginationMeasurementEnabled = hideDocumentUntilPaginationSettled || postImportPaginationUnlocked;
-  const visiblePagesHavePendingPaginationMeasurements = React.useMemo(() => {
+  const visiblePagesHavePendingPaginationMeasurements = React2.useMemo(() => {
     if (pageCount === 0) {
       return false;
     }
@@ -33340,13 +33655,13 @@ function DocxEditorViewer({
   ]);
   const allowPostImportPaginationMeasurement = !hasLargeTableLayoutSurface || !internalPageVirtualizationEnabled;
   const visiblePagesNeedMeasurementUnlock = !hideDocumentUntilPaginationSettled && allowPostImportPaginationMeasurement && visiblePagesHavePendingPaginationMeasurements;
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!visiblePagesNeedMeasurementUnlock) {
       return;
     }
     setPostImportPaginationUnlocked(true);
   }, [visiblePagesNeedMeasurementUnlock]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (hideDocumentUntilPaginationSettled || !postImportPaginationUnlocked || visiblePagesNeedMeasurementUnlock) {
       return;
     }
@@ -33372,13 +33687,13 @@ function DocxEditorViewer({
     postImportPaginationUnlocked,
     visiblePagesNeedMeasurementUnlock
   ]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!onPageCountChange) {
       return;
     }
     onPageCountChange(stableReportedPageCount);
   }, [onPageCountChange, stableReportedPageCount]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const nextCurrentPage = clampNumber(
       (internalMostVisiblePageIndex ?? visiblePageStartIndex) + 1,
       1,
@@ -33394,7 +33709,7 @@ function DocxEditorViewer({
     stableReportedPageCount,
     visiblePageStartIndex
   ]);
-  const trackedChangesByPage = React.useMemo(() => {
+  const trackedChangesByPage = React2.useMemo(() => {
     const pageBuckets = pageNodeSegmentsByPage.map(
       () => []
     );
@@ -33450,13 +33765,13 @@ function DocxEditorViewer({
     pageNodeSegmentsByPage,
     trackedChangesEnabled
   ]);
-  const [trackedChangeAnchorByPage, setTrackedChangeAnchorByPage] = React.useState([]);
-  const [headerBodyClearanceByPage, setHeaderBodyClearanceByPage] = React.useState({});
-  React.useEffect(() => {
+  const [trackedChangeAnchorByPage, setTrackedChangeAnchorByPage] = React2.useState([]);
+  const [headerBodyClearanceByPage, setHeaderBodyClearanceByPage] = React2.useState({});
+  React2.useEffect(() => {
     setHeaderBodyClearanceByPage({});
   }, [editor.documentLoadNonce]);
-  const [trackedChangeCardHeightsByPage, setTrackedChangeCardHeightsByPage] = React.useState([]);
-  React.useLayoutEffect(() => {
+  const [trackedChangeCardHeightsByPage, setTrackedChangeCardHeightsByPage] = React2.useState([]);
+  React2.useLayoutEffect(() => {
     if (!showTrackedChangeGutter || trackedChangesByPage.length === 0) {
       setTrackedChangeAnchorByPage(
         (current) => current.length === 0 ? current : []
@@ -33509,7 +33824,7 @@ function DocxEditorViewer({
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     if (!showTrackedChangeGutter || trackedChangesByPage.length === 0) {
       setTrackedChangeCardHeightsByPage(
         (current) => current.length === 0 ? current : []
@@ -33572,7 +33887,7 @@ function DocxEditorViewer({
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
-  const positionedTrackedChangesByPage = React.useMemo(() => {
+  const positionedTrackedChangesByPage = React2.useMemo(() => {
     return trackedChangesByPage.map((changes, pageIndex) => {
       const pageLayout = pageSectionInfoByIndex[pageIndex]?.layout ?? documentLayout;
       const anchorsByChangeId = trackedChangeAnchorByPage[pageIndex] ?? /* @__PURE__ */ new Map();
@@ -33592,7 +33907,7 @@ function DocxEditorViewer({
     trackedChangeCardHeightsByPage,
     trackedChangesByPage
   ]);
-  const totalPagesForFieldResolution = React.useMemo(() => {
+  const totalPagesForFieldResolution = React2.useMemo(() => {
     if (editor.canUndo || editor.canRedo) {
       return pageCount;
     }
@@ -33607,7 +33922,7 @@ function DocxEditorViewer({
     editor.model.metadata.documentPageCount,
     pageCount
   ]);
-  const isPageVisible = React.useCallback(
+  const isPageVisible = React2.useCallback(
     (pageIndex) => {
       return hasRequestedPageIndexes ? requestedPageIndexes.includes(pageIndex) : pageIndex >= visiblePageStartIndex && pageIndex <= visiblePageEndIndex;
     },
@@ -33618,7 +33933,7 @@ function DocxEditorViewer({
       visiblePageStartIndex
     ]
   );
-  const requestPageReveal = React.useCallback(
+  const requestPageReveal = React2.useCallback(
     (targetPageIndex) => {
       if (onRequestPageReveal) {
         onRequestPageReveal(targetPageIndex);
@@ -33644,7 +33959,7 @@ function DocxEditorViewer({
       pageCount
     ]
   );
-  const scrollToBookmark = React.useCallback(
+  const scrollToBookmark = React2.useCallback(
     (bookmarkName) => {
       const normalized = bookmarkName.trim();
       if (!normalized) {
@@ -33708,7 +34023,7 @@ function DocxEditorViewer({
       visiblePageStartIndex
     ]
   );
-  const pageHeaderAndFooterNodes = React.useMemo(
+  const pageHeaderAndFooterNodes = React2.useMemo(
     () => pageNodeSegmentsByPage.map((_, pageIndex) => {
       const sectionInfo = pageSectionInfoByIndex[pageIndex];
       const sectionHeaderSections = sectionInfo?.section.headerSections ?? editor.model.metadata.headerSections;
@@ -33751,7 +34066,7 @@ function DocxEditorViewer({
       editor.model.metadata.sectionPropertiesXml
     ]
   );
-  const headerBodyClearanceFloorByPage = React.useMemo(() => {
+  const headerBodyClearanceFloorByPage = React2.useMemo(() => {
     const next = {};
     for (let pageIndex = 0; pageIndex < pageNodeSegmentsByPage.length; pageIndex += 1) {
       const headerNodes = pageHeaderAndFooterNodes[pageIndex]?.headerNodes ?? [];
@@ -33781,7 +34096,7 @@ function DocxEditorViewer({
     pageNodeSegmentsByPage.length,
     pageSectionInfoByIndex
   ]);
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     if (!paginationMeasurementEnabled) {
       return;
     }
@@ -33883,7 +34198,7 @@ function DocxEditorViewer({
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (disableMeasuredImportPagination) {
       setMeasuredPageContentHeightByIndex(
         (current) => current.length === 0 ? current : []
@@ -34172,7 +34487,7 @@ function DocxEditorViewer({
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!deferInitialPaginationPaint || isInitialPaginationSettled || disableMeasuredImportPagination) {
       return;
     }
@@ -34200,7 +34515,7 @@ function DocxEditorViewer({
     isInitialPaginationSettled,
     pageCount
   ]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!deferInitialPaginationPaint || !isInitialPaginationSettled || initialPaginationBackgroundRefinementUnlocked) {
       return;
     }
@@ -34209,7 +34524,7 @@ function DocxEditorViewer({
       return;
     }
     const timeoutId = window.setTimeout(() => {
-      React.startTransition(() => {
+      React2.startTransition(() => {
         setInitialPaginationBackgroundRefinementUnlocked(true);
       });
     }, INITIAL_PAGINATION_BACKGROUND_REFINEMENT_DELAY_MS);
@@ -34221,7 +34536,7 @@ function DocxEditorViewer({
     initialPaginationBackgroundRefinementUnlocked,
     isInitialPaginationSettled
   ]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!deferInitialPaginationPaint || isInitialPaginationSettled) {
       return;
     }
@@ -34337,7 +34652,7 @@ function DocxEditorViewer({
     visiblePageEndIndex,
     visiblePageStartIndex
   ]);
-  const setSingleTableCellSelection = React.useCallback(
+  const setSingleTableCellSelection = React2.useCallback(
     (tableIndex, rowIndex, cellIndex) => {
       const nextRange = {
         tableIndex,
@@ -34355,10 +34670,10 @@ function DocxEditorViewer({
     },
     []
   );
-  const clearTableCellSelection = React.useCallback(() => {
+  const clearTableCellSelection = React2.useCallback(() => {
     setTableCellSelectionRange((current) => current ? void 0 : current);
   }, []);
-  const isPointWithinTableHandleHoverZone = React.useCallback(
+  const isPointWithinTableHandleHoverZone = React2.useCallback(
     (tableIndex, x, y) => {
       const tableElement = tableElementsRef.current.get(tableIndex);
       if (!tableElement || !tableElement.isConnected) {
@@ -34372,7 +34687,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const resolveHoveredTableHandleIndexFromPoint = React.useCallback(
+  const resolveHoveredTableHandleIndexFromPoint = React2.useCallback(
     (x, y) => {
       let nextHoveredTableIndex;
       let bestDistance = Number.POSITIVE_INFINITY;
@@ -34399,7 +34714,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const onViewerPointerMove = React.useCallback(
+  const onViewerPointerMove = React2.useCallback(
     (event) => {
       if (isReadOnly) {
         return;
@@ -34417,7 +34732,7 @@ function DocxEditorViewer({
     },
     [isReadOnly, resolveHoveredTableHandleIndexFromPoint]
   );
-  const onViewerPointerLeave = React.useCallback(() => {
+  const onViewerPointerLeave = React2.useCallback(() => {
     if (isReadOnly) {
       return;
     }
@@ -34426,7 +34741,7 @@ function DocxEditorViewer({
     }
     setHoveredTableHandleTableIndex(void 0);
   }, [isReadOnly]);
-  const selectWholeTable = React.useCallback(
+  const selectWholeTable = React2.useCallback(
     (tableIndex) => {
       const tableNode = editor.model.nodes[tableIndex];
       if (!tableNode || tableNode.type !== "table") {
@@ -34452,7 +34767,7 @@ function DocxEditorViewer({
     },
     [editor]
   );
-  const resolveTableMoveDropTarget = React.useCallback(
+  const resolveTableMoveDropTarget = React2.useCallback(
     (tableIndex, point) => {
       const rootElement = viewerRootRef.current;
       if (!rootElement) {
@@ -34513,9 +34828,9 @@ function DocxEditorViewer({
     },
     [editor.model.nodes.length]
   );
-  const objectWrapDragSignatureRef = React.useRef("");
-  const objectWrapDragLatestRef = React.useRef(void 0);
-  const updateObjectWrapDragPreview = React.useCallback(
+  const objectWrapDragSignatureRef = React2.useRef("");
+  const objectWrapDragLatestRef = React2.useRef(void 0);
+  const updateObjectWrapDragPreview = React2.useCallback(
     (frame, source, distances) => {
       const bandsByPage = /* @__PURE__ */ new Map();
       let pageIndex = -1;
@@ -34604,7 +34919,7 @@ function DocxEditorViewer({
     },
     [resolveViewerMeasurementZoomScale]
   );
-  const clearObjectDragPreview = React.useCallback(
+  const clearObjectDragPreview = React2.useCallback(
     (preserveMeasurements = false) => {
       if (preserveMeasurements && objectWrapDragLatestRef.current) {
         const next = new Map(measuredWrapBands);
@@ -34624,7 +34939,7 @@ function DocxEditorViewer({
     },
     [measuredWrapBands]
   );
-  const beginTableMoveDrag = React.useCallback(
+  const beginTableMoveDrag = React2.useCallback(
     (event, tableIndex) => {
       if (isReadOnly || event.button !== 0) return;
       const element = tableElementsRef.current.get(tableIndex);
@@ -34642,12 +34957,12 @@ function DocxEditorViewer({
         startY: event.clientY,
         hasMoved: false
       };
-      const zoom = resolveViewerMeasurementZoomScale(element, 1);
+      const zoom2 = resolveViewerMeasurementZoomScale(element, 1);
       const floating = table.style?.floating;
       objectDragCleanupRef.current = startObjectDrag({
         event,
         element,
-        zoom,
+        zoom: zoom2,
         resolveElement: () => tableElementsRef.current.get(tableIndex),
         onFrame: (frame) => {
           if (tableMoveDragRef.current)
@@ -34682,7 +34997,7 @@ function DocxEditorViewer({
           const anchorLayout = anchorParagraph?.type === "paragraph" && anchorSource && anchorRect ? layoutParagraphPretextSource(
             anchorParagraph,
             anchorSource,
-            anchorRect.width / zoom,
+            anchorRect.width / zoom2,
             Number(anchor?.host.dataset.docxParagraphLineHeight) || estimateParagraphLineHeightPx(anchorParagraph),
             []
           ) : void 0;
@@ -34693,9 +35008,9 @@ function DocxEditorViewer({
             tableIndex,
             {
               xTwips: pixelsToTwips(
-                (frame.left - (bodyRect?.left ?? anchorRect.left)) / zoom
+                (frame.left - (bodyRect?.left ?? anchorRect.left)) / zoom2
               ),
-              yTwips: pixelsToTwips((frame.top - anchorRect.top) / zoom),
+              yTwips: pixelsToTwips((frame.top - anchorRect.top) / zoom2),
               horizontalAnchor: "margin",
               verticalAnchor: "text",
               horizontalAlign: void 0,
@@ -34719,13 +35034,13 @@ function DocxEditorViewer({
       clearObjectDragPreview
     ]
   );
-  const closeTableContextMenu = React.useCallback(() => {
+  const closeTableContextMenu = React2.useCallback(() => {
     setTableContextMenuState(void 0);
   }, []);
-  const closeContextMenu = React.useCallback(() => {
+  const closeContextMenu = React2.useCallback(() => {
     setContextMenuState(void 0);
   }, []);
-  const openContextMenu = React.useCallback(
+  const openContextMenu = React2.useCallback(
     (context, point) => {
       setTableContextMenuState(void 0);
       setContextMenuState({
@@ -34736,7 +35051,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const openTableContextMenu = React.useCallback(
+  const openTableContextMenu = React2.useCallback(
     (context, point) => {
       setContextMenuState(void 0);
       setTableContextMenuState({
@@ -34747,7 +35062,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const runTableContextMenuAction = React.useCallback(
+  const runTableContextMenuAction = React2.useCallback(
     (actionId, providedContext) => {
       const context = providedContext ?? tableContextMenuState;
       if (!context) {
@@ -34796,11 +35111,11 @@ function DocxEditorViewer({
     },
     [closeTableContextMenu, editor, tableContextMenuState]
   );
-  const tableContextMenuActions = React.useMemo(
+  const tableContextMenuActions = React2.useMemo(
     () => [...DEFAULT_TABLE_CONTEXT_MENU_ACTIONS],
     []
   );
-  const resolveTableContextMenuLocation = React.useCallback(
+  const resolveTableContextMenuLocation = React2.useCallback(
     (tableIndex, fallbackRowIndex = 0, fallbackCellIndex = 0) => {
       const tableNode = editor.model.nodes[tableIndex];
       if (!tableNode || tableNode.type !== "table") {
@@ -34830,7 +35145,7 @@ function DocxEditorViewer({
     },
     [editor.model.nodes, editor.selection]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!tableContextMenuState && !contextMenuState) {
       return;
     }
@@ -34859,7 +35174,7 @@ function DocxEditorViewer({
       window.removeEventListener("keydown", onKeyDown, true);
     };
   }, [contextMenuState, tableContextMenuState]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!tableCellSelectionRange) {
       return;
     }
@@ -34868,7 +35183,7 @@ function DocxEditorViewer({
       setTableCellSelectionRange(void 0);
     }
   }, [editor.model.nodes, tableCellSelectionRange]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!tableContextMenuState) {
       return;
     }
@@ -34877,7 +35192,7 @@ function DocxEditorViewer({
       setTableContextMenuState(void 0);
     }
   }, [editor.model.nodes, tableContextMenuState]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!contextMenuState || contextMenuState.kind !== "image") {
       return;
     }
@@ -34895,7 +35210,7 @@ function DocxEditorViewer({
       setContextMenuState(void 0);
     }
   }, [contextMenuState, editor.model]);
-  const placeCaretInsideElement = React.useCallback(
+  const placeCaretInsideElement = React2.useCallback(
     (element, point) => {
       const selection = window.getSelection();
       if (!selection) {
@@ -35072,7 +35387,7 @@ function DocxEditorViewer({
     },
     []
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const pendingFocus = pendingSectionParagraphFocusRef.current;
     if (!pendingFocus) {
       return;
@@ -35093,7 +35408,7 @@ function DocxEditorViewer({
       pendingSectionParagraphFocusRef.current = void 0;
     });
   }, [activeHeaderFooterEdit, placeCaretInsideElement]);
-  const setSelectionWithinElementByTextOffsets = React.useCallback(
+  const setSelectionWithinElementByTextOffsets = React2.useCallback(
     (element, startOffset, endOffset) => {
       const selection = window.getSelection();
       if (!selection) {
@@ -35148,7 +35463,7 @@ function DocxEditorViewer({
     },
     [placeCaretInsideElement]
   );
-  const paragraphTextLengthFromElement = React.useCallback(
+  const paragraphTextLengthFromElement = React2.useCallback(
     (element) => {
       const range = document.createRange();
       range.selectNodeContents(element);
@@ -35156,7 +35471,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const activateEditableParagraphSegment = React.useCallback(
+  const activateEditableParagraphSegment = React2.useCallback(
     (nodeIndex, paragraphLineRange, point) => {
       if (!paragraphSegmentHasPartialLineRange(paragraphLineRange)) {
         pendingParagraphSegmentFocusRef.current = void 0;
@@ -35181,7 +35496,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const resolveParagraphHostElement = React.useCallback(
+  const resolveParagraphHostElement = React2.useCallback(
     (location) => {
       if (location.kind === "paragraph") {
         const wrappedSurface = wrappedParagraphSurfaceRegistryRef.current.get(
@@ -35218,7 +35533,7 @@ function DocxEditorViewer({
     },
     [paragraphElementsRef]
   );
-  const resolveDomPositionFromTextOffset = React.useCallback(
+  const resolveDomPositionFromTextOffset = React2.useCallback(
     (element, targetOffset) => {
       const safeOffset = Math.max(0, Math.round(targetOffset));
       const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
@@ -35248,7 +35563,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const resolveParagraphHostElementForOffset = React.useCallback(
+  const resolveParagraphHostElementForOffset = React2.useCallback(
     (paragraphIndex, offset) => {
       const rootElement = viewerRootRef.current;
       const trackedElement = paragraphElementsRef.current.get(paragraphIndex);
@@ -35286,7 +35601,7 @@ function DocxEditorViewer({
     },
     [resolveDomPositionFromTextOffset]
   );
-  const resolveDomPositionFromBoundary = React.useCallback(
+  const resolveDomPositionFromBoundary = React2.useCallback(
     (boundary) => {
       const location = boundary.location;
       const hostElement = resolveParagraphHostElement(location);
@@ -35305,7 +35620,7 @@ function DocxEditorViewer({
       paragraphTextLengthFromElement
     ]
   );
-  const setSelectionFromDocxBoundaries = React.useCallback(
+  const setSelectionFromDocxBoundaries = React2.useCallback(
     (rawStartBoundary, rawEndBoundary) => {
       const selection = window.getSelection();
       if (!selection) {
@@ -35401,7 +35716,7 @@ function DocxEditorViewer({
       placeCaretInsideElement
     ]
   );
-  const syncSelectionFromDocxRange = React.useCallback(
+  const syncSelectionFromDocxRange = React2.useCallback(
     (range) => {
       const selectionIntentNonce = beginSelectionIntent();
       editor.beginSelectionSession("command", { settleAfterMs: 140 });
@@ -35491,7 +35806,7 @@ function DocxEditorViewer({
       setSelectionFromDocxBoundaries
     ]
   );
-  const resolveWrappedParagraphBoundaryFromPoint = React.useCallback(
+  const resolveWrappedParagraphBoundaryFromPoint = React2.useCallback(
     (point) => {
       const elementAtPoint = document.elementFromPoint(point.x, point.y);
       if (!(elementAtPoint instanceof Element)) {
@@ -35530,7 +35845,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const selectAllDocumentText = React.useCallback(() => {
+  const selectAllDocumentText = React2.useCallback(() => {
     const rootElement = viewerRootRef.current;
     if (!rootElement) {
       return;
@@ -35565,7 +35880,7 @@ function DocxEditorViewer({
     paragraphTextLengthFromElement,
     setSelectionFromDocxBoundaries
   ]);
-  const resolveParagraphBoundaryFromSelectionPoint = React.useCallback(
+  const resolveParagraphBoundaryFromSelectionPoint = React2.useCallback(
     (container, offset) => {
       if (!container) {
         return void 0;
@@ -35636,7 +35951,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const resolveBoundaryFromPoint = React.useCallback(
+  const resolveBoundaryFromPoint = React2.useCallback(
     (point, fallbackBias) => {
       const wrappedParagraphBoundary = resolveWrappedParagraphBoundaryFromPoint(point);
       if (wrappedParagraphBoundary) {
@@ -35845,7 +36160,7 @@ function DocxEditorViewer({
       resolveWrappedParagraphBoundaryFromPoint
     ]
   );
-  const resolveActiveRangeFromDomSelection = React.useCallback(() => {
+  const resolveActiveRangeFromDomSelection = React2.useCallback(() => {
     const rootElement = viewerRootRef.current;
     const selection = window.getSelection();
     if (!rootElement || !selection || selection.rangeCount === 0) {
@@ -35871,7 +36186,7 @@ function DocxEditorViewer({
       end: endBoundary
     });
   }, [resolveParagraphBoundaryFromSelectionPoint]);
-  const setActiveRangeFromSelection = React.useCallback(() => {
+  const setActiveRangeFromSelection = React2.useCallback(() => {
     const session = editor.selectionSessionKind;
     const rootElement = viewerRootRef.current;
     const activeElement = document.activeElement;
@@ -35928,7 +36243,7 @@ function DocxEditorViewer({
     resolveParagraphHostElement,
     setSelectionFromDocxBoundaries
   ]);
-  const flushActiveRangeFromSelection = React.useCallback(() => {
+  const flushActiveRangeFromSelection = React2.useCallback(() => {
     if (deferredCollapsedSelectionSyncTimeoutRef.current !== null) {
       window.clearTimeout(deferredCollapsedSelectionSyncTimeoutRef.current);
       deferredCollapsedSelectionSyncTimeoutRef.current = null;
@@ -35941,7 +36256,7 @@ function DocxEditorViewer({
       setActiveRangeFromSelection();
     });
   }, [setActiveRangeFromSelection]);
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     if (isReadOnly) {
       return;
     }
@@ -36025,7 +36340,7 @@ function DocxEditorViewer({
     }
     setSelectionFromDocxBoundaries(normalized.start, normalized.end);
   });
-  const selectionIsExpandedWithinElement = React.useCallback(
+  const selectionIsExpandedWithinElement = React2.useCallback(
     (element) => {
       const selection = window.getSelection();
       if (!selection || selection.isCollapsed || selection.rangeCount === 0) {
@@ -36036,7 +36351,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const ensureCaretPlacementInsideElement = React.useCallback(
+  const ensureCaretPlacementInsideElement = React2.useCallback(
     (element, point, selectionIntentNonce) => {
       const selection = window.getSelection();
       const selectedRange = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : void 0;
@@ -36089,7 +36404,7 @@ function DocxEditorViewer({
       scheduleSelectionIntentFrame
     ]
   );
-  const schedulePointerSelectionReconcile = React.useCallback(
+  const schedulePointerSelectionReconcile = React2.useCallback(
     (element, point, syncSelection) => {
       const selectionIntentNonce = beginSelectionIntent();
       editor.beginSelectionSession("pointer", { settleAfterMs: 320 });
@@ -36156,11 +36471,11 @@ function DocxEditorViewer({
       scheduleSelectionIntentFrame
     ]
   );
-  const cancelPendingPointerSelectionReconcile = React.useCallback(() => {
+  const cancelPendingPointerSelectionReconcile = React2.useCallback(() => {
     cancelPendingSelectionIntent();
     editor.clearSelectionSession("pointer");
   }, [cancelPendingSelectionIntent, editor]);
-  const clearObjectSelectionForParagraphEntry = React.useCallback(
+  const clearObjectSelectionForParagraphEntry = React2.useCallback(
     (nodeIndex) => {
       clearTableCellSelection();
       setSelectedImage(void 0);
@@ -36174,7 +36489,7 @@ function DocxEditorViewer({
     },
     [clearTableCellSelection, editor]
   );
-  const syncWrappedParagraphRange = React.useCallback(
+  const syncWrappedParagraphRange = React2.useCallback(
     (location, startOffset, endOffset, options) => {
       const paragraph = getParagraphAtLocation(
         editor.model,
@@ -36234,7 +36549,7 @@ function DocxEditorViewer({
     },
     [editor]
   );
-  const focusWrappedParagraphTextarea = React.useCallback(() => {
+  const focusWrappedParagraphTextarea = React2.useCallback(() => {
     scheduleDomWrite(() => {
       const textarea = wrappedParagraphTextareaRef.current;
       if (!textarea || !textarea.isConnected) {
@@ -36268,7 +36583,7 @@ function DocxEditorViewer({
       }
     });
   }, [activeWrappedParagraphSession]);
-  const commitWrappedParagraphTextAtLocation = React.useCallback(
+  const commitWrappedParagraphTextAtLocation = React2.useCallback(
     (location, text) => {
       editor.suppressNextDomSelectionRestore();
       if (location.kind === "paragraph") {
@@ -36285,7 +36600,7 @@ function DocxEditorViewer({
     },
     [editor]
   );
-  const focusDropCapWrappedParagraph = React.useCallback(
+  const focusDropCapWrappedParagraph = React2.useCallback(
     (nodeIndex, point) => {
       clearObjectSelectionForParagraphEntry(nodeIndex);
       editor.selectParagraph(nodeIndex);
@@ -36309,7 +36624,7 @@ function DocxEditorViewer({
       placeCaretInsideElement
     ]
   );
-  const activateDropCapEditor = React.useCallback(
+  const activateDropCapEditor = React2.useCallback(
     (nodeIndex) => {
       if (isReadOnly) {
         return;
@@ -36322,7 +36637,7 @@ function DocxEditorViewer({
     },
     [clearTableCellSelection, isReadOnly]
   );
-  const scheduleDeferredCollapsedSelectionSync = React.useCallback(() => {
+  const scheduleDeferredCollapsedSelectionSync = React2.useCallback(() => {
     if (deferredCollapsedSelectionSyncTimeoutRef.current !== null) {
       window.clearTimeout(deferredCollapsedSelectionSyncTimeoutRef.current);
     }
@@ -36331,7 +36646,7 @@ function DocxEditorViewer({
       flushActiveRangeFromSelection();
     }, 80);
   }, [flushActiveRangeFromSelection]);
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     const request = editor.historyRestoreRequest;
     if (!request?.textInput || !request.activeTextRange || request.nonce === appliedHistoryRestoreNonceRef.current || compositionActiveRef.current) {
       return;
@@ -36379,7 +36694,7 @@ function DocxEditorViewer({
     resolveDomPositionFromBoundary,
     resolveParagraphHostElement
   ]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const restoreRequest = editor.historyRestoreRequest;
     if (!restoreRequest) {
       return;
@@ -36511,7 +36826,7 @@ function DocxEditorViewer({
     scheduleSelectionIntentFrame,
     setSelectionFromDocxBoundaries
   ]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const handleSelectionChange = () => {
       const selection = window.getSelection();
       if (!selection) {
@@ -36577,7 +36892,7 @@ function DocxEditorViewer({
       document.removeEventListener("selectionchange", handleSelectionChange);
     };
   }, [flushActiveRangeFromSelection, scheduleDeferredCollapsedSelectionSync]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const onPointerDown = (event) => {
       commandSelectionGuardRef.current = void 0;
       const rootElement = viewerRootRef.current;
@@ -36612,7 +36927,7 @@ function DocxEditorViewer({
     editor,
     resolveActiveRangeFromDomSelection
   ]);
-  const beginCrossNodeSelectionDrag = React.useCallback(
+  const beginCrossNodeSelectionDrag = React2.useCallback(
     (startBoundary, pointerId, startX, startY) => {
       tableSelectionDragRef.current = {
         pointerId,
@@ -36700,14 +37015,14 @@ function DocxEditorViewer({
     },
     [resolveBoundaryFromPoint, setSelectionFromDocxBoundaries]
   );
-  const resolveTableCellLocationFromPoint = React.useCallback(
+  const resolveTableCellLocationFromPoint = React2.useCallback(
     (point) => {
       const element = document.elementFromPoint(point.x, point.y);
       return parseTableCellLocationFromElement(element);
     },
     []
   );
-  const beginTableCellSelectionDrag = React.useCallback(
+  const beginTableCellSelectionDrag = React2.useCallback(
     (pointerId, anchorCell, startX, startY, startBoundary) => {
       tableCellSelectionDragRef.current = {
         pointerId,
@@ -36823,7 +37138,7 @@ function DocxEditorViewer({
       setSelectionFromDocxBoundaries
     ]
   );
-  const onViewerPointerDown = React.useCallback(
+  const onViewerPointerDown = React2.useCallback(
     (event) => {
       if (tableContextMenuState || contextMenuState) {
         const target2 = event.target;
@@ -36884,7 +37199,7 @@ function DocxEditorViewer({
       tableContextMenuState
     ]
   );
-  const onViewerFormFieldDoubleClick = React.useCallback(
+  const onViewerFormFieldDoubleClick = React2.useCallback(
     (event) => {
       if (isReadOnly || !(event.target instanceof Element)) {
         return;
@@ -36911,7 +37226,7 @@ function DocxEditorViewer({
     },
     [editor.model, editor.selectFormField, isReadOnly, onFormFieldDoubleClick]
   );
-  const onViewerContextMenu = React.useCallback(
+  const onViewerContextMenu = React2.useCallback(
     (event) => {
       if (isReadOnly || event.defaultPrevented) {
         return;
@@ -36986,7 +37301,7 @@ function DocxEditorViewer({
       setSelectionFromDocxBoundaries
     ]
   );
-  const handleDeleteAcrossTableCellSelection = React.useCallback(
+  const handleDeleteAcrossTableCellSelection = React2.useCallback(
     (event) => {
       if (isReadOnly) {
         return false;
@@ -37062,7 +37377,7 @@ function DocxEditorViewer({
       tableCellSelectionRange
     ]
   );
-  const onViewerKeyDown = React.useCallback(
+  const onViewerKeyDown = React2.useCallback(
     (event) => {
       commandSelectionGuardRef.current = void 0;
       if (!isReadOnly && handleDeleteAcrossTableCellSelection(event)) {
@@ -37151,7 +37466,7 @@ function DocxEditorViewer({
       syncSelectionFromDocxRange
     ]
   );
-  const onViewerKeyUp = React.useCallback(
+  const onViewerKeyUp = React2.useCallback(
     (event) => {
       if (!shouldSyncActiveRangeOnKeyUp(event)) {
         return;
@@ -37160,7 +37475,7 @@ function DocxEditorViewer({
     },
     [flushActiveRangeFromSelection]
   );
-  const handleDeleteAcrossSelection = React.useCallback(
+  const handleDeleteAcrossSelection = React2.useCallback(
     (event) => {
       if (isReadOnly) {
         return false;
@@ -37230,7 +37545,7 @@ function DocxEditorViewer({
       syncSelectionFromDocxRange
     ]
   );
-  const replaceExpandedSelectionWithText = React.useCallback(
+  const replaceExpandedSelectionWithText = React2.useCallback(
     (rawText) => {
       if (isReadOnly) {
         return false;
@@ -37287,7 +37602,7 @@ function DocxEditorViewer({
       syncSelectionFromDocxRange
     ]
   );
-  const resolveContextMenuActions = React.useCallback(
+  const resolveContextMenuActions = React2.useCallback(
     (context) => {
       if (context.kind === "table") {
         return tableContextMenuActions.map((action) => ({
@@ -37392,7 +37707,7 @@ function DocxEditorViewer({
     },
     [tableContextMenuActions]
   );
-  const runContextMenuAction = React.useCallback(
+  const runContextMenuAction = React2.useCallback(
     (actionId, providedContext) => {
       const isTableAction = (value) => value === "insert-row-above" || value === "insert-row-below" || value === "insert-column-left" || value === "insert-column-right" || value === "delete-row" || value === "delete-column" || value === "delete-table";
       if (isTableAction(actionId)) {
@@ -37863,7 +38178,7 @@ function DocxEditorViewer({
       syncSelectionFromDocxRange
     ]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const onWindowKeyDown = (event) => {
       if (isReadOnly || event.defaultPrevented) {
         return;
@@ -37937,7 +38252,7 @@ function DocxEditorViewer({
     resolveParagraphBoundaryFromSelectionPoint,
     syncSelectionFromDocxRange
   ]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!selectedImage) {
       return;
     }
@@ -37951,10 +38266,10 @@ function DocxEditorViewer({
       setResizePreview(void 0);
     }
   }, [editor.model, selectedImage]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     activeWrappedParagraphSessionRef.current = activeWrappedParagraphSession;
   }, [activeWrappedParagraphSession]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!selectedImage && !selectedSectionImageKey) {
       return;
     }
@@ -37963,7 +38278,7 @@ function DocxEditorViewer({
     setDropCapMovePreview(void 0);
     setActiveWrappedParagraphSession(void 0);
   }, [selectedImage, selectedSectionImageKey]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (selectedDropCapNodeIndex === void 0) {
       return;
     }
@@ -37974,7 +38289,7 @@ function DocxEditorViewer({
       setDropCapMovePreview(void 0);
     }
   }, [editor.model, selectedDropCapNodeIndex]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!activeWrappedParagraphSession) {
       return;
     }
@@ -38004,13 +38319,13 @@ function DocxEditorViewer({
       );
     }
   }, [activeWrappedParagraphSession, editor.model]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!activeWrappedParagraphSession) {
       return;
     }
     focusWrappedParagraphTextarea();
   }, [activeWrappedParagraphSession, focusWrappedParagraphTextarea]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const textarea = wrappedParagraphTextareaRef.current;
     const session = activeWrappedParagraphSession;
     if (!textarea || !session) {
@@ -38031,7 +38346,7 @@ function DocxEditorViewer({
     } catch {
     }
   }, [activeWrappedParagraphSession]);
-  const focusParagraphAtOffset = React.useCallback(
+  const focusParagraphAtOffset = React2.useCallback(
     (paragraphIndex, offset) => {
       const focusAttempt = (attempt) => {
         const element = resolveParagraphHostElementForOffset(
@@ -38076,7 +38391,7 @@ function DocxEditorViewer({
       setSelectionWithinElementByTextOffsets
     ]
   );
-  const focusTableCellParagraphAtOffset = React.useCallback(
+  const focusTableCellParagraphAtOffset = React2.useCallback(
     (cellDraftKey, paragraphIndex, offset) => {
       window.requestAnimationFrame(() => {
         const cellElement = tableCellEditorElementsRef.current.get(cellDraftKey);
@@ -38107,7 +38422,7 @@ function DocxEditorViewer({
     },
     [setSelectionWithinElementByTextOffsets]
   );
-  const focusParagraphLocationAtOffset = React.useCallback(
+  const focusParagraphLocationAtOffset = React2.useCallback(
     (location, offset) => {
       if (location.kind === "paragraph") {
         focusParagraphAtOffset(location.nodeIndex, offset);
@@ -38122,7 +38437,7 @@ function DocxEditorViewer({
     },
     [focusParagraphAtOffset, focusTableCellParagraphAtOffset]
   );
-  const focusParagraphLocationAtClientPoint = React.useCallback(
+  const focusParagraphLocationAtClientPoint = React2.useCallback(
     (location, preferredPoint, fallbackOffset) => {
       const targetElement = resolveParagraphHostElement(location);
       if (!targetElement) {
@@ -38168,7 +38483,7 @@ function DocxEditorViewer({
       setSelectionFromDocxBoundaries
     ]
   );
-  const focusParagraphAtEnd = React.useCallback(
+  const focusParagraphAtEnd = React2.useCallback(
     (paragraphIndex) => {
       window.requestAnimationFrame(() => {
         const element = paragraphElementsRef.current.get(paragraphIndex);
@@ -38189,7 +38504,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const selectionOffsetsWithinElement = React.useCallback(
+  const selectionOffsetsWithinElement = React2.useCallback(
     (element) => {
       const selection = window.getSelection();
       if (!selection || selection.rangeCount === 0) {
@@ -38228,7 +38543,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const collapsedCaretClientPointWithinElement = React.useCallback(
+  const collapsedCaretClientPointWithinElement = React2.useCallback(
     (element) => {
       const selection = window.getSelection();
       if (!selection || selection.rangeCount === 0 || !selection.isCollapsed) {
@@ -38255,7 +38570,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const activeTableCellParagraphContext = React.useCallback(
+  const activeTableCellParagraphContext = React2.useCallback(
     (cellElement) => {
       const selection = window.getSelection();
       if (!selection) {
@@ -38292,7 +38607,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const updateActiveTextRangeFromTableCell = React.useCallback(
+  const updateActiveTextRangeFromTableCell = React2.useCallback(
     (cellElement, tableIndex, rowIndex, cellIndex) => {
       const selection = window.getSelection();
       if (!selection || selection.rangeCount === 0) {
@@ -38331,7 +38646,7 @@ function DocxEditorViewer({
       resolveParagraphBoundaryFromSelectionPoint
     ]
   );
-  const updateActiveTextRangeFromElement = React.useCallback(
+  const updateActiveTextRangeFromElement = React2.useCallback(
     (element, location) => {
       const selection = window.getSelection();
       if (!selection || selection.rangeCount === 0) {
@@ -38363,7 +38678,7 @@ function DocxEditorViewer({
     },
     [clearTableCellSelection, editor, selectionOffsetsWithinElement]
   );
-  const commitTableCellDraftFromElement = React.useCallback(
+  const commitTableCellDraftFromElement = React2.useCallback(
     (tableIndex, rowIndex, cellIndex, cellParagraphs, draftKey, element) => {
       const nextText = editableTextFromTableCellElement(element);
       const nextHtml = element.innerHTML;
@@ -38377,7 +38692,7 @@ function DocxEditorViewer({
     },
     [editor]
   );
-  const registerTableCellParagraphElement = React.useCallback(
+  const registerTableCellParagraphElement = React2.useCallback(
     (draftKey, element) => {
       if (element) {
         tableCellParagraphElementsRef.current.set(draftKey, element);
@@ -38387,27 +38702,27 @@ function DocxEditorViewer({
     },
     []
   );
-  const readTableCellParagraphDraft = React.useCallback(
+  const readTableCellParagraphDraft = React2.useCallback(
     (draftKey) => {
       return tableCellParagraphDraftsRef.current.get(draftKey);
     },
     []
   );
-  const writeTableCellParagraphDraft = React.useCallback(
+  const writeTableCellParagraphDraft = React2.useCallback(
     (draftKey, html) => {
       tableCellParagraphDraftsRef.current.set(draftKey, html);
       requestTableDraftLayoutRefresh();
     },
     [requestTableDraftLayoutRefresh]
   );
-  const clearTableCellParagraphDraft = React.useCallback(
+  const clearTableCellParagraphDraft = React2.useCallback(
     (draftKey) => {
       tableCellParagraphDraftsRef.current.delete(draftKey);
       requestTableDraftLayoutRefresh();
     },
     [requestTableDraftLayoutRefresh]
   );
-  const commitTableCellParagraphDraft = React.useCallback(
+  const commitTableCellParagraphDraft = React2.useCallback(
     (tableIndex, rowIndex, cellIndex, paragraphIndex, text) => {
       const draftKey = tableCellParagraphDraftKey(
         tableIndex,
@@ -38439,7 +38754,7 @@ function DocxEditorViewer({
     },
     [editor]
   );
-  const registerSectionParagraphElement = React.useCallback(
+  const registerSectionParagraphElement = React2.useCallback(
     (draftKey, element) => {
       if (element) {
         sectionParagraphElementsRef.current.set(draftKey, element);
@@ -38449,25 +38764,25 @@ function DocxEditorViewer({
     },
     []
   );
-  const readSectionParagraphDraft = React.useCallback(
+  const readSectionParagraphDraft = React2.useCallback(
     (draftKey) => {
       return sectionParagraphDraftsRef.current.get(draftKey);
     },
     []
   );
-  const writeSectionParagraphDraft = React.useCallback(
+  const writeSectionParagraphDraft = React2.useCallback(
     (draftKey, html) => {
       sectionParagraphDraftsRef.current.set(draftKey, html);
     },
     []
   );
-  const clearSectionParagraphDraft = React.useCallback(
+  const clearSectionParagraphDraft = React2.useCallback(
     (draftKey) => {
       sectionParagraphDraftsRef.current.delete(draftKey);
     },
     []
   );
-  const commitSectionParagraphDraft = React.useCallback(
+  const commitSectionParagraphDraft = React2.useCallback(
     (location, text) => {
       const draftKey = sectionParagraphLocationKey(location);
       const currentSectionLists = location.region === "header" ? [
@@ -38497,7 +38812,7 @@ function DocxEditorViewer({
     },
     [editor]
   );
-  const updateSectionParagraphDraftFromTarget = React.useCallback(
+  const updateSectionParagraphDraftFromTarget = React2.useCallback(
     (target) => {
       if (!(target instanceof Element)) {
         return;
@@ -38518,7 +38833,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const commitSectionRegionDraftsFromContainer = React.useCallback(
+  const commitSectionRegionDraftsFromContainer = React2.useCallback(
     (container, region, partName) => {
       const paragraphHosts = Array.from(
         container.querySelectorAll(
@@ -38577,7 +38892,7 @@ function DocxEditorViewer({
       closeActiveHeaderFooterEdit(activeEdit);
     });
   }
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const flushPendingDraftsForExport = (currentModel) => {
       if (tableCellDraftsRef.current.size === 0 && tableCellParagraphDraftsRef.current.size === 0 && sectionParagraphDraftsRef.current.size === 0) {
         return currentModel;
@@ -38699,7 +39014,7 @@ function DocxEditorViewer({
       editor.registerPendingExportModelTransformer(void 0);
     };
   }, [editor, editor.pendingRunStyle]);
-  const handleEditorHistoryShortcut = React.useCallback(
+  const handleEditorHistoryShortcut = React2.useCallback(
     (event, commitDraft) => {
       if (event.defaultPrevented || !(event.metaKey || event.ctrlKey) || event.altKey) {
         return false;
@@ -38724,7 +39039,7 @@ function DocxEditorViewer({
     },
     [editor]
   );
-  const handleEditableHostBeforeInput = React.useCallback(
+  const handleEditableHostBeforeInput = React2.useCallback(
     (event) => {
       if (isReadOnly) {
         return;
@@ -39129,7 +39444,7 @@ function DocxEditorViewer({
       syncSelectionFromDocxRange
     ]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const rootElement = viewerRootRef.current;
     if (!rootElement) {
       return;
@@ -39142,7 +39457,7 @@ function DocxEditorViewer({
       rootElement.removeEventListener("beforeinput", handleBeforeInput);
     };
   }, [handleEditableHostBeforeInput]);
-  const resolveTableColumnWidths = React.useCallback(
+  const resolveTableColumnWidths = React2.useCallback(
     (tableIndex, table, tableWidthPx) => {
       const columnCount = tableColumnCount(table);
       const storedWidths = tableColumnWidths[tableIndex];
@@ -39173,7 +39488,7 @@ function DocxEditorViewer({
     },
     [tableColumnWidths]
   );
-  const resolveTableRowHeights = React.useCallback(
+  const resolveTableRowHeights = React2.useCallback(
     (tableIndex, table) => {
       const storedHeights = tableRowHeights[tableIndex];
       return table.rows.map((row, rowIndex) => {
@@ -39193,7 +39508,7 @@ function DocxEditorViewer({
     },
     [tableRowHeights]
   );
-  const resolveEmbeddedTableColumnWidths = React.useCallback(
+  const resolveEmbeddedTableColumnWidths = React2.useCallback(
     (tableKey, table, tableWidthPx) => {
       const columnCount = tableColumnCount(table);
       const storedWidths = embeddedTableColumnWidths[tableKey];
@@ -39224,7 +39539,7 @@ function DocxEditorViewer({
     },
     [embeddedTableColumnWidths]
   );
-  const resolveEmbeddedTableRowHeights = React.useCallback(
+  const resolveEmbeddedTableRowHeights = React2.useCallback(
     (tableKey, table) => {
       const storedHeights = embeddedTableRowHeights[tableKey];
       return table.rows.map((row, rowIndex) => {
@@ -39244,7 +39559,7 @@ function DocxEditorViewer({
     },
     [embeddedTableRowHeights]
   );
-  React.useLayoutEffect(() => {
+  React2.useLayoutEffect(() => {
     if (disableMeasuredImportPagination) {
       setTableMeasuredRowHeights(
         (current) => Object.keys(current).length === 0 ? current : {}
@@ -39422,7 +39737,7 @@ function DocxEditorViewer({
     virtualizerMeasurementScale,
     visibleTableRowIndexesByNodeIndex
   ]);
-  const normalizeResizableHeights = React.useCallback(
+  const normalizeResizableHeights = React2.useCallback(
     (rowHeights) => {
       return rowHeights.map((height) => {
         if (typeof height !== "number" || !Number.isFinite(height) || height <= 0) {
@@ -39433,7 +39748,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const distributeHeightByTotal = React.useCallback(
+  const distributeHeightByTotal = React2.useCallback(
     (rowHeights, totalHeightPx) => {
       const safeCount = rowHeights.length;
       if (safeCount === 0) {
@@ -39482,7 +39797,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const beginTableColumnResize = React.useCallback(
+  const beginTableColumnResize = React2.useCallback(
     (event, tableIndex, boundaryColumnIndex, tableWidthPx, columnWidths) => {
       if (isReadOnly) {
         return;
@@ -39572,7 +39887,7 @@ function DocxEditorViewer({
     },
     [isReadOnly]
   );
-  const beginTableRowResize = React.useCallback(
+  const beginTableRowResize = React2.useCallback(
     (event, tableIndex, boundaryRowIndex, rowHeights) => {
       if (isReadOnly) {
         return;
@@ -39653,7 +39968,7 @@ function DocxEditorViewer({
     },
     [isReadOnly]
   );
-  const beginEmbeddedTableColumnResize = React.useCallback(
+  const beginEmbeddedTableColumnResize = React2.useCallback(
     (event, tableKey, boundaryColumnIndex, tableWidthPx, columnWidths) => {
       if (isReadOnly) {
         return;
@@ -39746,7 +40061,7 @@ function DocxEditorViewer({
     },
     [isReadOnly]
   );
-  const beginEmbeddedTableRowResize = React.useCallback(
+  const beginEmbeddedTableRowResize = React2.useCallback(
     (event, tableKey, boundaryRowIndex, rowHeights) => {
       if (isReadOnly) {
         return;
@@ -39827,7 +40142,7 @@ function DocxEditorViewer({
     },
     [isReadOnly]
   );
-  const beginImageResize = React.useCallback(
+  const beginImageResize = React2.useCallback(
     (event, location, startWidthPx, startHeightPx, xDirection, yDirection) => {
       if (isReadOnly) {
         return;
@@ -39881,7 +40196,7 @@ function DocxEditorViewer({
     },
     [editor, isReadOnly]
   );
-  const beginFloatingImageMove = React.useCallback(
+  const beginFloatingImageMove = React2.useCallback(
     (event, location, image, isWrappedFloatingImage, isAbsoluteFloatingImage) => {
       if (isReadOnly || event.button !== 0 || event.target.closest(
         "[data-image-resize-handle='true']"
@@ -39893,7 +40208,7 @@ function DocxEditorViewer({
       setSelectedImage(location);
       const element = event.currentTarget;
       const imageKey = imageLocationKey(location);
-      const zoom = resolveViewerMeasurementZoomScale(element, 1);
+      const zoom2 = resolveViewerMeasurementZoomScale(element, 1);
       const isInline = !isWrappedFloatingImage && !isAbsoluteFloatingImage;
       const floating = image.floating;
       let caret;
@@ -39973,7 +40288,7 @@ function DocxEditorViewer({
       objectDragCleanupRef.current = startObjectDrag({
         event,
         element,
-        zoom,
+        zoom: zoom2,
         resolveElement: () => viewerRootRef.current?.querySelector(
           `[data-docx-image-location="${imageKey}"]`
         ) ?? void 0,
@@ -40033,7 +40348,7 @@ function DocxEditorViewer({
             const anchorLayout = anchorParagraph?.type === "paragraph" && anchorSource ? layoutParagraphPretextSource(
               anchorParagraph,
               anchorSource,
-              hostRect.width / zoom,
+              hostRect.width / zoom2,
               Number(host?.dataset.docxParagraphLineHeight) || estimateParagraphLineHeightPx(anchorParagraph),
               []
             ) : void 0;
@@ -40051,9 +40366,9 @@ function DocxEditorViewer({
               {
                 ...resolveWrappedFloatingImageDropPatch(
                   image,
-                  hostRect.width / zoom,
-                  (frame.left - hostRect.left) / zoom,
-                  (frame.top - hostRect.top) / zoom
+                  hostRect.width / zoom2,
+                  (frame.left - hostRect.left) / zoom2,
+                  (frame.top - hostRect.top) / zoom2
                 ),
                 horizontalAlign: void 0,
                 verticalAlign: void 0,
@@ -40074,12 +40389,12 @@ function DocxEditorViewer({
                 documentLayout,
                 {
                   wrapperRect: {
-                    left: frame.left / zoom,
-                    top: frame.top / zoom,
-                    width: frame.width / zoom,
-                    height: frame.height / zoom
+                    left: frame.left / zoom2,
+                    top: frame.top / zoom2,
+                    width: frame.width / zoom2,
+                    height: frame.height / zoom2
                   },
-                  pageSurfaceRect: surfaceRect ? normalizeFloatingDropRectForZoom(surfaceRect, zoom) : void 0,
+                  pageSurfaceRect: surfaceRect ? normalizeFloatingDropRectForZoom(surfaceRect, zoom2) : void 0,
                   deltaX: 0,
                   deltaY: 0
                 }
@@ -40107,7 +40422,7 @@ function DocxEditorViewer({
       clearObjectDragPreview
     ]
   );
-  const beginDropCapMove = React.useCallback(
+  const beginDropCapMove = React2.useCallback(
     (event, nodeIndex, dropCap) => {
       if (isReadOnly) {
         return;
@@ -40154,7 +40469,7 @@ function DocxEditorViewer({
     },
     [editor, isReadOnly]
   );
-  const beginDropCapResize = React.useCallback(
+  const beginDropCapResize = React2.useCallback(
     (event, nodeIndex, currentFontSizePx, currentWidthPx, currentHeightPx) => {
       if (isReadOnly || event.button !== 0) {
         return;
@@ -40205,7 +40520,7 @@ function DocxEditorViewer({
     },
     [editor, isReadOnly]
   );
-  const beginSectionFloatingImageMove = React.useCallback(
+  const beginSectionFloatingImageMove = React2.useCallback(
     (event, location, image, isWrappedFloatingImage, isAbsoluteFloatingImage) => {
       if (isReadOnly) {
         return;
@@ -40367,7 +40682,7 @@ function DocxEditorViewer({
       resolveViewerMeasurementZoomScale
     ]
   );
-  const onSectionImageClick = React.useCallback(
+  const onSectionImageClick = React2.useCallback(
     (location) => {
       if (isReadOnly) {
         return;
@@ -40380,7 +40695,7 @@ function DocxEditorViewer({
     },
     [activeHeaderFooterEdit, isReadOnly]
   );
-  const onImageDragStart = React.useCallback(
+  const onImageDragStart = React2.useCallback(
     (event, location) => {
       if (isReadOnly) {
         event.preventDefault();
@@ -40395,12 +40710,12 @@ function DocxEditorViewer({
     },
     [isReadOnly]
   );
-  const onImageDragEnd = React.useCallback(() => {
+  const onImageDragEnd = React2.useCallback(() => {
     draggedImageRef.current = null;
     setIsDraggingImage(false);
     setActiveDropTarget(void 0);
   }, []);
-  const beginTableCornerResize = React.useCallback(
+  const beginTableCornerResize = React2.useCallback(
     (event, tableIndex, tableWidthPx, columnWidths, rowHeights, maxTableWidthPx) => {
       if (isReadOnly) {
         return;
@@ -40503,7 +40818,7 @@ function DocxEditorViewer({
     },
     [isReadOnly]
   );
-  const beginEmbeddedTableCornerResize = React.useCallback(
+  const beginEmbeddedTableCornerResize = React2.useCallback(
     (event, tableKey, tableWidthPx, columnWidths, rowHeights, maxTableWidthPx) => {
       if (isReadOnly) {
         return;
@@ -40606,7 +40921,7 @@ function DocxEditorViewer({
     },
     [distributeHeightByTotal, isReadOnly, normalizeResizableHeights]
   );
-  const beginEmbeddedTableMove = React.useCallback(
+  const beginEmbeddedTableMove = React2.useCallback(
     (event, tableKey) => {
       if (isReadOnly) {
         return;
@@ -40692,7 +41007,7 @@ function DocxEditorViewer({
     },
     [editor, isReadOnly, resolveTableMoveDropTarget]
   );
-  const embeddedTableResizeController = React.useMemo(
+  const embeddedTableResizeController = React2.useMemo(
     () => ({
       isReadOnly,
       hoveredTableKey: hoveredEmbeddedTableKey,
@@ -40754,7 +41069,7 @@ function DocxEditorViewer({
       resolveEmbeddedTableRowHeights
     ]
   );
-  const onDropImageAtTarget = React.useCallback(
+  const onDropImageAtTarget = React2.useCallback(
     (target) => {
       if (isReadOnly) {
         return;
@@ -40786,7 +41101,7 @@ function DocxEditorViewer({
     },
     [editor, isReadOnly]
   );
-  const renderImageDropZone = React.useCallback(
+  const renderImageDropZone = React2.useCallback(
     (target, key) => {
       if (isReadOnly || !isDraggingImage) {
         return null;
@@ -41553,7 +41868,7 @@ function DocxEditorViewer({
       }
     );
   };
-  const renderInteractiveParagraphRuns = React.useCallback(
+  const renderInteractiveParagraphRuns = React2.useCallback(
     (paragraph, keyPrefix, location, options) => {
       const lineRange = options?.paragraphLineRange;
       const sliceTop = (lineRange?.startLineIndex ?? 0) * (lineRange?.lineHeightPx ?? 0);
@@ -43756,13 +44071,13 @@ function DocxEditorViewer({
       trackedChangesEnabled
     ]
   );
-  const hasFilePayload = React.useCallback(
+  const hasFilePayload = React2.useCallback(
     (dataTransfer) => {
       return Array.from(dataTransfer?.types ?? []).includes("Files");
     },
     []
   );
-  const extractDroppedDocxFile = React.useCallback(
+  const extractDroppedDocxFile = React2.useCallback(
     (dataTransfer) => {
       return Array.from(dataTransfer?.files ?? []).find(
         (candidate) => /\.docx?$/i.test(candidate.name)
@@ -43770,7 +44085,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const onCanvasDragOver = React.useCallback(
+  const onCanvasDragOver = React2.useCallback(
     (event) => {
       if (isDraggingImage) {
         event.preventDefault();
@@ -43792,7 +44107,7 @@ function DocxEditorViewer({
     },
     [canReplaceDocumentByDrop, hasFilePayload, isDraggingImage]
   );
-  const onCanvasDragLeave = React.useCallback(
+  const onCanvasDragLeave = React2.useCallback(
     (event) => {
       if (event.currentTarget.contains(event.relatedTarget)) {
         return;
@@ -43801,7 +44116,7 @@ function DocxEditorViewer({
     },
     []
   );
-  const onCanvasDrop = React.useCallback(
+  const onCanvasDrop = React2.useCallback(
     async (event) => {
       setIsDragOverCanvas(false);
       if (isDraggingImage) {
@@ -43821,7 +44136,7 @@ function DocxEditorViewer({
     },
     [canReplaceDocumentByDrop, editor, extractDroppedDocxFile, isDraggingImage]
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!canReplaceDocumentByDrop) {
       fileDragDepthRef.current = 0;
       setIsDragOverCanvas(false);
@@ -43894,7 +44209,7 @@ function DocxEditorViewer({
     120,
     documentLayout.pageWidthPx - documentLayout.marginsPx.left - documentLayout.marginsPx.right
   );
-  const documentInheritedFontFamily = React.useMemo(
+  const documentInheritedFontFamily = React2.useMemo(
     () => resolveDocumentInheritedFontFamily(editor.model),
     [editor.model]
   );
@@ -43906,19 +44221,19 @@ function DocxEditorViewer({
     boxSizing: "border-box",
     overflow: floatingMovePreview || dropCapMovePreview ? "visible" : "clip"
   };
-  const tableCellParagraphSliceLayoutCacheRef = React.useRef(
+  const tableCellParagraphSliceLayoutCacheRef = React2.useRef(
     /* @__PURE__ */ new Map()
   );
-  const tableCellParagraphFlowLayoutCacheRef = React.useRef(
+  const tableCellParagraphFlowLayoutCacheRef = React2.useRef(
     /* @__PURE__ */ new Map()
   );
-  const tableCellParagraphSlicePlanCacheRef = React.useRef(
+  const tableCellParagraphSlicePlanCacheRef = React2.useRef(
     /* @__PURE__ */ new Map()
   );
-  const tableCellParagraphSliceSignatureCacheRef = React.useRef(
+  const tableCellParagraphSliceSignatureCacheRef = React2.useRef(
     /* @__PURE__ */ new WeakMap()
   );
-  React.useEffect(() => {
+  React2.useEffect(() => {
     tableCellParagraphSliceLayoutCacheRef.current.clear();
     tableCellParagraphFlowLayoutCacheRef.current.clear();
     tableCellParagraphSlicePlanCacheRef.current.clear();
@@ -47344,11 +47659,11 @@ ${currentText.slice(end)}`;
     }
     return renderedTableBlock;
   };
-  const objectDragPageRenderCacheRef = React.useRef(
+  const objectDragPageRenderCacheRef = React2.useRef(
     /* @__PURE__ */ new Map()
   );
   if (!objectWrapDragPreview) objectDragPageRenderCacheRef.current.clear();
-  const renderNodeSegments = React.useCallback(
+  const renderNodeSegments = React2.useCallback(
     (nodeSegments, options) => {
       const dragSourceIndex = objectWrapDragPreview?.tableIndex ?? (objectWrapDragPreview?.imageKey?.startsWith("p:") ? Number(objectWrapDragPreview.imageKey.split(":")[1]) : -1);
       const dragPagePreview = objectWrapDragPreview?.bandsByPage.has(
@@ -47403,7 +47718,7 @@ ${currentText.slice(end)}`;
               Math.round(segment2.tableRowSlice.sliceHeightPx)
             )}` : ""}` : segment2.paragraphLineRange ? `lines-${segment2.paragraphLineRange.startLineIndex}-${segment2.paragraphLineRange.endLineIndex}` : "all";
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              React.Fragment,
+              React2.Fragment,
               {
                 children: renderDocumentNode(
                   groupNode,
@@ -47453,7 +47768,7 @@ ${currentText.slice(end)}`;
                   const leftSegment = leftSegments[rowIndex];
                   const rightSegment = rightSegments[rowIndex];
                   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                    React.Fragment,
+                    React2.Fragment,
                     {
                       children: [
                         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: letterheadColumnStackStyle(), children: leftSegment ? renderLetterheadSegment(
@@ -48095,23 +48410,23 @@ ${currentText.slice(end)}`;
   );
   const footnotes = editor.model.metadata.footnotes ?? [];
   const endnotes = editor.model.metadata.endnotes ?? [];
-  const footnoteDisplayIndexById = React.useMemo(
+  const footnoteDisplayIndexById = React2.useMemo(
     () => new Map(footnotes.map((note, index) => [note.id, index + 1])),
     [footnotes]
   );
-  const endnoteDisplayIndexById = React.useMemo(
+  const endnoteDisplayIndexById = React2.useMemo(
     () => new Map(endnotes.map((note, index) => [note.id, index + 1])),
     [endnotes]
   );
-  const footnotesById = React.useMemo(
+  const footnotesById = React2.useMemo(
     () => new Map(footnotes.map((note) => [note.id, note])),
     [footnotes]
   );
-  const endnotesById = React.useMemo(
+  const endnotesById = React2.useMemo(
     () => new Map(endnotes.map((note) => [note.id, note])),
     [endnotes]
   );
-  const pageFootnotesByIndex = React.useMemo(() => {
+  const pageFootnotesByIndex = React2.useMemo(() => {
     if (footnotes.length === 0) {
       return pageNodeSegmentsByPage.map(() => []);
     }
@@ -48144,7 +48459,7 @@ ${currentText.slice(end)}`;
     footnotesById,
     pageNodeSegmentsByPage
   ]);
-  const referencedEndnotes = React.useMemo(() => {
+  const referencedEndnotes = React2.useMemo(() => {
     if (endnotes.length === 0) {
       return endnotes;
     }
@@ -48162,7 +48477,7 @@ ${currentText.slice(end)}`;
     const referenced = referencedIds.map((referenceId) => endnotesById.get(referenceId)).filter((note) => Boolean(note));
     return referenced.length > 0 ? referenced : endnotes;
   }, [editor.model.nodes, endnotes, endnotesById]);
-  const placedFootnoteIds = React.useMemo(() => {
+  const placedFootnoteIds = React2.useMemo(() => {
     const ids = /* @__PURE__ */ new Set();
     pageFootnotesByIndex.forEach((notesForPage) => {
       notesForPage.forEach((note) => {
@@ -48171,11 +48486,11 @@ ${currentText.slice(end)}`;
     });
     return ids;
   }, [pageFootnotesByIndex]);
-  const remainingFootnotes = React.useMemo(
+  const remainingFootnotes = React2.useMemo(
     () => footnotes.filter((note) => !placedFootnoteIds.has(note.id)),
     [footnotes, placedFootnoteIds]
   );
-  const renderDocumentNote = React.useCallback(
+  const renderDocumentNote = React2.useCallback(
     (note, noteKind, keyPrefix, pageNumberValue, runRenderOptions) => {
       const noteNodes = note.nodes?.filter(
         (node) => node.type === "paragraph"
@@ -48239,7 +48554,7 @@ ${currentText.slice(end)}`;
       totalPagesForFieldResolution
     ]
   );
-  const headerFooterEditHandlers = React.useMemo(
+  const headerFooterEditHandlers = React2.useMemo(
     () => ({
       registerElement: registerSectionParagraphElement,
       readDraftHtml: readSectionParagraphDraft,
@@ -48255,7 +48570,7 @@ ${currentText.slice(end)}`;
       writeSectionParagraphDraft
     ]
   );
-  const activateHeaderFooterEdit = React.useCallback(
+  const activateHeaderFooterEdit = React2.useCallback(
     (region, partName, pageIndex, options) => {
       if (isReadOnly || !partName) {
         return;
@@ -48282,6 +48597,8 @@ ${currentText.slice(end)}`;
     "div",
     {
       "data-testid": "docx-editor-viewer",
+      "data-docx-zoom-level": viewerZoom.level,
+      "data-docx-resolved-zoom": viewerZoom.resolvedZoom,
       ref: viewerRootRef,
       className,
       style: {
@@ -48290,7 +48607,8 @@ ${currentText.slice(end)}`;
         gap: DOC_PAGE_BREAK_GAP,
         minHeight: hideDocumentUntilPaginationSettled && stableHiddenDocumentHeightPx > 0 ? stableHiddenDocumentHeightPx : void 0,
         backgroundColor: pageGapBackgroundColor ?? "transparent",
-        ...style
+        ...style,
+        zoom: builtInViewerZoomScale
       },
       onDragOver: onCanvasDragOver,
       onDragLeave: onCanvasDragLeave,
@@ -48911,7 +49229,7 @@ ${currentText.slice(end)}`;
                                   const explicitColumnBreakParagraphSegments = columnNode.type === "paragraph" && !columnSegment.tableRowRange && !columnSegment.tableRowSlice && !columnSegment.paragraphLineRange && !explicitColumnWidthsPx && (sectionColumns?.count ?? 0) > 1 ? splitParagraphAtExplicitColumnBreaks(columnNode) : void 0;
                                   if (explicitColumnBreakParagraphSegments && explicitColumnBreakParagraphSegments.length > 1) {
                                     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                      React.Fragment,
+                                      React2.Fragment,
                                       {
                                         children: explicitColumnBreakParagraphSegments.map(
                                           (segmentParagraph, segmentIndex) => {
@@ -48982,7 +49300,7 @@ ${currentText.slice(end)}`;
                                 };
                                 if (!sectionColumns || sectionColumns.count <= 1 || requiresPlainFlowRender) {
                                   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                    React.Fragment,
+                                    React2.Fragment,
                                     {
                                       children: renderNodeSegments(group.segments, {
                                         pageIndex,
@@ -49042,7 +49360,7 @@ ${currentText.slice(end)}`;
                                             return null;
                                           }
                                           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                            React.Fragment,
+                                            React2.Fragment,
                                             {
                                               children: renderDocumentNode(
                                                 overlayNode,
@@ -49370,7 +49688,7 @@ ${currentText.slice(end)}`;
                                                 )
                                               )}` : ""}` : overlaySegment.paragraphLineRange ? `lines-${overlaySegment.paragraphLineRange.startLineIndex}-${overlaySegment.paragraphLineRange.endLineIndex}` : "all";
                                               return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                                React.Fragment,
+                                                React2.Fragment,
                                                 {
                                                   children: renderDocumentNode(
                                                     overlayNode,
@@ -52150,10 +52468,10 @@ function headingFontSize(level) {
   }
 }
 function useDocxModel(file) {
-  const [state, setState] = React2.useState({
+  const [state, setState] = React3.useState({
     isLoading: Boolean(file)
   });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (!file) {
       setState({ isLoading: false });
       return;
@@ -52381,7 +52699,7 @@ var containerStyle = {
 };
 function renderBlock(block) {
   if (block.kind === "table") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(React2.Fragment, { children: renderTable(block) }, block.id);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(React3.Fragment, { children: renderTable(block) }, block.id);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "p",
@@ -52405,6 +52723,9 @@ function ReactDocxViewer({
   loadEmbeddedFonts = true,
   pageIndexes,
   className,
+  zoom,
+  defaultZoom,
+  onZoomChange,
   layoutOptions,
   emptyState
 }) {
@@ -52414,12 +52735,12 @@ function ReactDocxViewer({
     error
   } = useDocxModel(model || document2 ? void 0 : file);
   const resolvedModel = model ?? document2?.model ?? parsedModel;
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (document2 && loadEmbeddedFonts && !document2.embeddedFontsLoaded) {
       void document2.loadEmbeddedFonts();
     }
   }, [document2, loadEmbeddedFonts]);
-  const modelWithSections = React2.useMemo(() => {
+  const modelWithSections = React3.useMemo(() => {
     if (!resolvedModel) {
       return void 0;
     }
@@ -52433,7 +52754,7 @@ function ReactDocxViewer({
       nodes: [...headerNodes, ...resolvedModel.nodes, ...footerNodes]
     };
   }, [resolvedModel]);
-  const resolvedLayoutOptions = React2.useMemo(() => {
+  const resolvedLayoutOptions = React3.useMemo(() => {
     if (!resolvedModel) {
       return layoutOptions;
     }
@@ -52444,18 +52765,28 @@ function ReactDocxViewer({
       pageHeight: layoutOptions?.pageHeight ?? documentLayout.pageHeightPx
     };
   }, [layoutOptions, resolvedModel]);
-  const pages = React2.useMemo(() => {
+  const pages = React3.useMemo(() => {
     if (!modelWithSections) {
       return [];
     }
     return layoutDocument(modelWithSections, resolvedLayoutOptions);
   }, [modelWithSections, resolvedLayoutOptions]);
-  const requestedPageIndexSet = React2.useMemo(
+  const requestedPageIndexSet = React3.useMemo(
     () => pageIndexes === void 0 ? void 0 : new Set(
       pageIndexes.filter((pageIndex) => Number.isFinite(pageIndex)).map((pageIndex) => Math.trunc(pageIndex))
     ),
     [pageIndexes]
   );
+  const viewerRootRef = React3.useRef(null);
+  const viewerZoom = useViewerZoom({
+    zoom,
+    defaultZoom,
+    onZoomChange,
+    rootRef: viewerRootRef,
+    contentWidth: resolvedLayoutOptions?.pageWidth ?? DEFAULT_DOCUMENT_LAYOUT.pageWidthPx,
+    contentHeight: resolvedLayoutOptions?.pageHeight ?? DEFAULT_DOCUMENT_LAYOUT.pageHeightPx,
+    pageSelector: "[data-page-index]"
+  });
   if (isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children: "Loading DOCX..." });
   }
@@ -52474,9 +52805,12 @@ function ReactDocxViewer({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
+      ref: viewerRootRef,
       className,
       "data-testid": "react-docx-viewer",
-      style: containerStyle,
+      "data-docx-zoom-level": viewerZoom.level,
+      "data-docx-resolved-zoom": viewerZoom.resolvedZoom,
+      style: { ...containerStyle, zoom: viewerZoom.resolvedZoom / 100 },
       children: pages.map(
         (page, pageIndex) => requestedPageIndexSet && !requestedPageIndexSet.has(pageIndex) ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "section",