ooxml-ui 1.20.0 → 1.22.0

package/dist/docx.js

@@ -9,7 +9,7 @@ import './chunk-YZH2QS7J.js';
 import './chunk-QLHCGV4C.js';
 import './chunk-XL77FR4B.js';
 import { optionStrings, normalizeLocale, SUPPORTED_OFFICE_LOCALES, interpolate } from 'ooxml-core/i18n';
-import { markSpecs, imageNodeSpec, fieldMarkerNodeSpec, noteReferenceNodeSpec, pageBreakNodeSpec, hardBreakNodeSpec, commentHistoryAttributes, tableCellStyle, tableStyle, createToggleFormat, expectDefined, controlFromData, paragraphBoxCss, normalizeThemeMode, applyThemeColors, refreshWordYjsPresence, normalizeRibbonActions, DirtyState, isFormsProtected, isWordYjsRemoteTransaction, REMOTE_TRANSACTION_META, repairCollaborativeDocumentIds, HEADER_FOOTER_INPUT, wordYjsPluginKey, wordYjsRedo, wordYjsUndo, restoreSectionParts, commentThreadsFromDoc, restoreNoteParts, CollaborationClient, createCollaborationIdGenerator, WordYjsCollaboration, insertContentControl, sectionPartsJson, NotePartsStep, notePartsJson, SectionPartsStep, fitZoomPercent, hasChangeAtCursor, hasAnyChange, commentIdsAtSelection, commentAnchors, documentWordCount, fieldGuardPlugin, tableStructureGuardPlugin, contentControlPlugin, formFieldGuardPlugin, symbolFontPlugin, positionalTabInputPlugin, trackChangesPlugin, wordYjsPresencePlugin, chartNodeSpec, placementClass, removeCommentThread, removeCommentAnchor, deleteComment, updateCommentThreads, addComment, toggleTrackChanges, goToNextChange, goToPreviousChange, rejectAllChanges, acceptAllChanges, rejectChangeAtCursor, acceptChangeAtCursor, goToComment, appendInlineNode, sameJson, sameRuns, PARAGRAPH_KEEP_KEYS, paragraphFromAttrs, parseBordersJson, isNavigableHref, setReviewRecordingPreferences, nodeNumbering, controlAtSelection, paragraphFormattingRevision, inlineNodeRun, formattingRevision, insertWordHardBreak, paragraphAttrs, resolveCellVisuals, themeDrawing, ribbonActionIdForLabel, removeWordLink, fieldResultRanges, wordLinkRangeAt, ligatureCss as ligatureCss$1, toggleCheckboxControl, formFieldBeside, formFieldOfNode, formFieldLocked, toggleFormCheckboxAt, runToInlineNodes as runToInlineNodes$1, insertedTextMarks, backstageFocus, applyRunFormattingPatch, clearDirectRunFormatting, deleteFieldSelection, applyWordLink, emptySimpleFieldResult, ligatureStyle, wordHighlightColors, swatchColor, cssBorderSide, countWords, chooseListItem, chooseDate, selectFormDropDownAt, updateControlProperties, resolveComment, replyToComment, CollaborationAuthority } from 'ooxml-core/docx/ui';
+import { markSpecs, imageNodeSpec, fieldMarkerNodeSpec, noteReferenceNodeSpec, pageBreakNodeSpec, hardBreakNodeSpec, commentHistoryAttributes, tableCellStyle, tableStyle, createToggleFormat, expectDefined, controlFromData, paragraphBoxCss, normalizeThemeMode, applyThemeColors, refreshWordYjsPresence, normalizeRibbonActions, DirtyState, isFormsProtected, isWordYjsRemoteTransaction, REMOTE_TRANSACTION_META, repairCollaborativeDocumentIds, HEADER_FOOTER_INPUT, wordYjsPluginKey, wordYjsRedo, wordYjsUndo, documentWordCount, restoreSectionParts, commentThreadsFromDoc, restoreNoteParts, CollaborationClient, createCollaborationIdGenerator, WordYjsCollaboration, insertContentControl, sectionPartsJson, NotePartsStep, notePartsJson, SectionPartsStep, fitZoomPercent, hasChangeAtCursor, hasAnyChange, commentIdsAtSelection, commentAnchors, fieldGuardPlugin, tableStructureGuardPlugin, contentControlPlugin, formFieldGuardPlugin, symbolFontPlugin, positionalTabInputPlugin, trackChangesPlugin, wordYjsPresencePlugin, chartNodeSpec, placementClass, removeCommentThread, removeCommentAnchor, deleteComment, updateCommentThreads, addComment, toggleTrackChanges, goToNextChange, goToPreviousChange, rejectAllChanges, acceptAllChanges, rejectChangeAtCursor, acceptChangeAtCursor, goToComment, appendInlineNode, sameJson, sameRuns, PARAGRAPH_KEEP_KEYS, paragraphFromAttrs, parseBordersJson, isNavigableHref, setReviewRecordingPreferences, nodeNumbering, controlAtSelection, paragraphFormattingRevision, inlineNodeRun, formattingRevision, insertWordHardBreak, paragraphAttrs, resolveCellVisuals, themeDrawing, ribbonActionIdForLabel, removeWordLink, fieldResultRanges, wordLinkRangeAt, ligatureCss as ligatureCss$1, toggleCheckboxControl, formFieldBeside, formFieldOfNode, formFieldLocked, toggleFormCheckboxAt, runToInlineNodes as runToInlineNodes$1, insertedTextMarks, backstageFocus, applyRunFormattingPatch, clearDirectRunFormatting, applyWordLink, deleteFieldSelection, emptySimpleFieldResult, ligatureStyle, wordHighlightColors, swatchColor, cssBorderSide, countWords, chooseListItem, chooseDate, selectFormDropDownAt, updateControlProperties, resolveComment, replyToComment, CollaborationAuthority } from 'ooxml-core/docx/ui';
 export { CollaborationAuthority, CollaborationClient, RIBBON_ACTION_IDS, RIBBON_ACTION_LABELS, createCollaborationIdGenerator, darkTheme, isRibbonActionId, lightTheme, normalizeRibbonActions, repairCollaborativeDocumentIds, themeToCssVars } from 'ooxml-core/docx/ui';
 import { createDocument, saveDocx, sectionsFromLayout, sectionLayoutJson, sectionsOf, pageSizeOf, columnPreset, applyPageSetup, withSection, computeListLabels, numberNotesInOrder, tocEntries, resolveNumberingLevel, tableOfFiguresInstruction, findTableOfContents, ensureListDefinition, equalColumnDraft, readColumnDraft, PAGE_SIZE_OPTIONS, PAGE_SIZES, readPageSetup, isRunHiddenForReview, resolveTableStyleFormatting, resolveParagraphFormatting, displayListLabel, setTitlePage, setLineNumbering, setVerticalAlign, setPageNumbering, ST_NumberFormat, unequalColumnPreset, setColumns, setOrientation, setPageSize, setMargins, lineSpacingLabel, formatNoteNumber, cellSourceBlocks, reviewDocumentFormatting, reviewFormattingWarnings, listRevisions, plainText, resolveRunFormatting, removedByEdit, tocHyperlinks, DEFAULT_TOC_INSTRUCTION, tocBookmarks, buildTableOfContents, tocCaptionLabel, twips as twips$1, signedTwips, formatListNumber, columnTextWidth, validColumnDraft, validatePageSetup, presetOf, LIGATURE_VALUES, isLigatures, reviewRunFormatting, resolveThemeColorReference, lineSpacingValue, canEditControlContent, controlDate, formDropDownIndex, shapeSvg, isStHighlightColor, transformCase, DEFAULT_TABLE_BORDERS, parseLineSpacingValue, twipsAttr, SHAPE_PALETTE, isHeadingListKind, twipsFromPixels, isFieldLocked, styleRefSource, parseStyleReference, bodyStyleRefResult, isDirectionalPreset, headingLevel, reviewParagraphFormatting, isValidLanguageTag, WORD, newShape, withFieldCodeFormatting, fieldResultRun, DEFAULT_DRAWN_SHAPE, fieldName, lineSpacingOptions, createListDefinition, linkStylesToList, headingListLevels, halfPointsFromPoints, changeColumnWidth, changeColumnGap, documentStats } from 'ooxml-core/docx';
 import { loadDocument } from 'ooxml-core/docx/load';
@@ -1276,6 +1276,7 @@ var deApp = {
   "Next page section break": "Abschnittswechsel (n\xE4chste Seite)",
   "Continuous section break": "Abschnittswechsel (fortlaufend)",
   "Next page": "N\xE4chste Seite",
+  "Previous page": "Vorherige Seite",
   Continuous: "Fortlaufend",
   "Page numbers": "Seitenzahlen",
   "Page number format": "Seitenzahlformat",
@@ -2106,6 +2107,7 @@ var enApp = {
   "Next page section break": "Next page section break",
   "Continuous section break": "Continuous section break",
   "Next page": "Next page",
+  "Previous page": "Previous page",
   Continuous: "Continuous",
   "Page numbers": "Page numbers",
   "Page number format": "Page number format",
@@ -2806,6 +2808,7 @@ var esApp = {
   "Next page section break": "Salto de secci\xF3n (p\xE1gina siguiente)",
   "Continuous section break": "Salto de secci\xF3n (continuo)",
   "Next page": "P\xE1gina siguiente",
+  "Previous page": "P\xE1gina anterior",
   Continuous: "Continuo",
   "Page numbers": "N\xFAmeros de p\xE1gina",
   "Page number format": "Formato de n\xFAmero de p\xE1gina",
@@ -3505,6 +3508,7 @@ var frApp = {
   "Next page section break": "Saut de section (page suivante)",
   "Continuous section break": "Saut de section (continu)",
   "Next page": "Page suivante",
+  "Previous page": "Page pr\xE9c\xE9dente",
   Continuous: "Continu",
   "Page numbers": "Num\xE9ros de page",
   "Page number format": "Format des num\xE9ros de page",
@@ -4206,6 +4210,7 @@ var zhCNApp = {
   "Next page section break": "\u5206\u8282\u7B26\uFF08\u4E0B\u4E00\u9875\uFF09",
   "Continuous section break": "\u5206\u8282\u7B26\uFF08\u8FDE\u7EED\uFF09",
   "Next page": "\u4E0B\u4E00\u9875",
+  "Previous page": "\u4E0A\u4E00\u9875",
   Continuous: "\u8FDE\u7EED",
   "Page numbers": "\u9875\u7801",
   "Page number format": "\u9875\u7801\u683C\u5F0F",
@@ -19364,21 +19369,27 @@ var InsertController = class {
   async insertSelectedPicture() {
     const file = this.pictureInput.files?.[0];
     this.pictureInput.value = "";
+    if (file) await this.insertPictureFile(file);
+  }
+  /** Stages `file` and inserts it at the selection; false when it could not be inserted. */
+  async insertPictureFile(file) {
     const view = this.host.view();
-    if (!file || !view?.editable) return;
+    if (!view?.editable) return false;
     try {
       const staged = await stagePicture(file, this.host.contentWidth(), this.host.newMediaPartName);
-      if (this.host.view() !== view || !view.editable) return;
+      if (this.host.view() !== view || !view.editable) return false;
       this.host.stageMedia?.(staged.image.partName, staged.media);
       if (staged.svg && staged.image.svgPartName)
         this.host.stageMedia?.(staged.image.svgPartName, staged.svg);
       this.pendingMedia.set(staged.image.partName, staged.media);
       if (staged.svg && staged.image.svgPartName)
         this.pendingMedia.set(staged.image.svgPartName, staged.svg);
-      insertPicture(view, staged.image);
+      const inserted = insertPicture(view, staged.image);
       focusView(view);
+      return inserted;
     } catch (cause) {
       this.host.reportError(cause instanceof Error ? cause : new Error(String(cause)));
+      return false;
     }
   }
 };
@@ -19563,6 +19574,8 @@ var EditorCore = class {
   readOnly = false;
   /** Set before mounting to render only the document surface. */
   surfaceOnly = false;
+  /** Host-owned workflows for surface mode (link, find and replace, picture picker). */
+  surfaceActions = {};
   locale = "en";
   reviewAuthor = "Author";
   theme = "auto";
@@ -19711,6 +19724,7 @@ var EditorCore = class {
         this.wordText
       );
     syncPageState(this);
+    if (this.surfaceOnly) this.element.dispatchEvent(new CustomEvent("editor-state-change"));
   }
 };
 
@@ -24402,6 +24416,117 @@ function routeRibbonAction(core, action) {
     focusView(target);
   }
 }
+function moveFor(event) {
+  const word = event.ctrlKey || event.altKey;
+  switch (event.key) {
+    case "ArrowLeft":
+      return { direction: "backward", granularity: word ? "word" : "character" };
+    case "ArrowRight":
+      return { direction: "forward", granularity: word ? "word" : "character" };
+    case "ArrowUp":
+      return { direction: "backward", granularity: "line" };
+    case "ArrowDown":
+      return { direction: "forward", granularity: "line" };
+    case "Home":
+      return {
+        direction: "backward",
+        granularity: event.ctrlKey ? "documentboundary" : "lineboundary"
+      };
+    case "End":
+      return {
+        direction: "forward",
+        granularity: event.ctrlKey ? "documentboundary" : "lineboundary"
+      };
+    default:
+      return void 0;
+  }
+}
+function attachSurfaceNavigation(core) {
+  const canvas = core.shell.canvas;
+  if (!canvas) return () => {
+  };
+  const doc = canvas.ownerDocument;
+  canvas.tabIndex = -1;
+  const domSelection = () => {
+    const root = core.view?.root;
+    return root?.getSelection?.() ?? doc.getSelection();
+  };
+  const ends = () => {
+    const selection = domSelection();
+    if (!selection) return void 0;
+    if (selection.anchorNode && selection.anchorNode === selection.focusNode) {
+      const root2 = core.view?.root;
+      if (!(root2 instanceof ShadowRoot) || root2.host !== selection.anchorNode)
+        return {
+          anchor: selection.anchorNode,
+          anchorOffset: selection.anchorOffset,
+          focus: selection.focusNode,
+          focusOffset: selection.focusOffset
+        };
+    }
+    const root = core.view?.root;
+    const composed = selection.getComposedRanges;
+    if (root instanceof ShadowRoot && typeof composed === "function") {
+      const range = composed.call(selection, { shadowRoots: [root] })[0];
+      if (range)
+        return {
+          anchor: range.startContainer,
+          anchorOffset: range.startOffset,
+          focus: range.endContainer,
+          focusOffset: range.endOffset
+        };
+    }
+    return {
+      anchor: selection.anchorNode,
+      anchorOffset: selection.anchorOffset,
+      focus: selection.focusNode,
+      focusOffset: selection.focusOffset
+    };
+  };
+  const mirror = () => {
+    const view = core.view;
+    if (!view || view.isDestroyed || view.editable) return;
+    const found = ends();
+    if (!found?.anchor || !found.focus) return;
+    if (!view.dom.contains(found.anchor) || !view.dom.contains(found.focus)) return;
+    try {
+      const $anchor = view.state.doc.resolve(view.posAtDOM(found.anchor, found.anchorOffset));
+      const $head = view.state.doc.resolve(view.posAtDOM(found.focus, found.focusOffset));
+      const next = TextSelection.between($anchor, $head);
+      if (next.eq(view.state.selection)) return;
+      view.dispatch(view.state.tr.setSelection(next));
+    } catch {
+    }
+  };
+  doc.addEventListener("selectionchange", mirror);
+  const onKeyDown = (event) => {
+    const view = core.view;
+    if (!view || view.isDestroyed || view.editable || event.defaultPrevented) return;
+    if (event.target !== canvas && !view.dom.contains(event.target)) return;
+    const selection = domSelection();
+    if (!selection) return;
+    const mod = event.ctrlKey || event.metaKey;
+    if (mod && event.key.toLowerCase() === "a") {
+      selection.selectAllChildren(view.dom);
+      event.preventDefault();
+      return;
+    }
+    const move = moveFor(event);
+    if (!move || event.metaKey || typeof selection.modify !== "function") return;
+    if (!view.dom.contains(ends()?.anchor ?? null)) {
+      selection.selectAllChildren(view.dom);
+      selection.collapseToStart();
+    }
+    selection.modify(event.shiftKey ? "extend" : "move", move.direction, move.granularity);
+    event.preventDefault();
+    mirror();
+  };
+  canvas.addEventListener("keydown", onKeyDown);
+  return () => {
+    doc.removeEventListener("selectionchange", mirror);
+    canvas.removeEventListener("keydown", onKeyDown);
+  };
+}
 
 // src/docx/page-navigator.ts
 var THUMBNAIL_WIDTH = 120;
@@ -25289,6 +25414,7 @@ function buildShell(core, api) {
   const { element, shell } = core;
   if (shell.paper) {
     attachPrintEditing(core);
+    if (core.surfaceOnly) attachSurface(core);
     return;
   }
   element.classList.add("dve-host");
@@ -25336,6 +25462,7 @@ function buildShell(core, api) {
     Object.assign(shell, { canvas, paper });
     attachPrintEditing(core);
     attachCanvasClick(core);
+    attachSurface(core);
     applyShellLabels(element, paper, core.locale);
     return;
   }
@@ -25422,6 +25549,9 @@ function applyRibbonAddIns(core) {
   syncRibbonAddIns(toolbar, core.ribbonAddIns, { panelClass: "ribbon-panel" });
   if (toolbar.querySelector("[data-add-in]") !== before) refitRibbon(toolbar);
 }
+function attachSurface(core) {
+  core.shell.surfaceNavigation ??= attachSurfaceNavigation(core);
+}
 function attachPrintEditing(core) {
   const { shell } = core;
   if (shell.printEditing || !shell.printLayout || !shell.paper) return;
@@ -25511,6 +25641,110 @@ function reflectAttribute(element, name, value) {
   if (name === "locale" && current2 !== null && normalizeEditorLocale(current2) === value) return;
   element.setAttribute(name, value);
 }
+
+// src/docx/building-blocks-actions.ts
+function hyperlinkRequest(core) {
+  const view = core.targetView();
+  if (!view) return void 0;
+  const { from: from2, to } = view.state.selection;
+  return {
+    href: linkAtSelection(view)?.href ?? null,
+    text: view.state.doc.textBetween(from2, to, " "),
+    apply: (href, text) => core.canEditBody() && applyLink(view, { href }, text),
+    remove: () => core.canEditBody() && removeLink(view)
+  };
+}
+function findReplaceRequest(core) {
+  const controller = new SearchController(() => core.targetView());
+  return {
+    get status() {
+      return controller.status;
+    },
+    get canReplace() {
+      return core.canEditBody();
+    },
+    search: (query, caseSensitive) => controller.search(query, caseSensitive),
+    findNext: () => controller.findNext() !== null,
+    findPrevious: () => controller.findPrevious() !== null,
+    replaceOne: (replacement) => core.canEditBody() && controller.replaceOne(replacement),
+    replaceAll: (replacement) => core.canEditBody() ? controller.replaceAll(replacement) : 0
+  };
+}
+function wordHostActionProps(core) {
+  const ready = () => Boolean(core.targetView()) && !core.loading;
+  const editable2 = () => ready() && core.canEditBody() && Boolean(core.targetView()?.editable);
+  const linkEnabled = () => editable2() && Boolean(core.surfaceActions.onOpenHyperlinkDialog);
+  const findEnabled = () => ready() && Boolean(core.surfaceActions.onOpenFindReplace);
+  const pictureEnabled = () => editable2() && Boolean(core.surfaceActions.onOpenImagePicker);
+  const supplied = core.surfaceActions;
+  return {
+    /** Which workflows the host supplied a callback for, whether or not they are usable now. */
+    hostWorkflows: {
+      hyperlink: Boolean(supplied.onOpenHyperlinkDialog),
+      findReplace: Boolean(supplied.onOpenFindReplace),
+      picture: Boolean(supplied.onOpenImagePicker)
+    },
+    canInsertLink: linkEnabled(),
+    canFindReplace: findEnabled(),
+    canInsertPicture: pictureEnabled(),
+    /** Opens the host's link dialog for the selection. Returns false when not enabled. */
+    openHyperlinkDialog: () => {
+      const open = core.surfaceActions.onOpenHyperlinkDialog;
+      const request = linkEnabled() && open ? hyperlinkRequest(core) : void 0;
+      if (!request || !open) return false;
+      open(request);
+      return true;
+    },
+    /** Opens the host's find and replace workflow. Returns false when not enabled. */
+    openFindReplace: () => {
+      const open = core.surfaceActions.onOpenFindReplace;
+      if (!findEnabled() || !open) return false;
+      open(findReplaceRequest(core));
+      return true;
+    },
+    /** Opens the host's picture picker. Returns false when not enabled. */
+    openImagePicker: () => {
+      const open = core.surfaceActions.onOpenImagePicker;
+      if (!pictureEnabled() || !open) return false;
+      open({
+        insert: (file) => editable2() ? core.inserts.insertPictureFile(file) : Promise.resolve(false)
+      });
+      return true;
+    }
+  };
+}
+
+// src/docx/building-blocks.ts
+var ALIGNMENTS2 = {
+  left: "left",
+  start: "left",
+  center: "center",
+  right: "right",
+  end: "right",
+  justify: "justify",
+  both: "justify"
+};
+var TOOLBAR_LABELS = [
+  "Bold",
+  "Italic",
+  "Underline",
+  "Undo",
+  "Redo",
+  "Font",
+  "Font size",
+  "Align left",
+  "Align center",
+  "Align right",
+  "Justify",
+  "Bulleted list",
+  "Numbered list",
+  "Insert link",
+  "Find",
+  "Insert picture"
+];
+function listState(kind) {
+  return kind === "decimal" ? "number" : kind;
+}
 function wordToolbarProps(core) {
   const view = core.targetView();
   const state = view?.state;
@@ -25530,7 +25764,7 @@ function wordToolbarProps(core) {
       const font = effectiveFont(state, text, paragraph2);
       add("fontFamily", font.family);
       add("fontSize", font.size);
-      add("alignment", String(paragraph2.attrs.align ?? "left"));
+      add("alignment", ALIGNMENTS2[String(paragraph2.attrs.align ?? "left")] ?? "left");
     };
     if (state.selection.empty)
       sample(
@@ -25555,13 +25789,12 @@ function wordToolbarProps(core) {
   const shared = state && wordYjsPluginKey.getState(state);
   return {
     labels: Object.fromEntries(
-      ["Bold", "Italic", "Underline", "Undo", "Redo"].map((label) => [
-        label,
-        translate(core.locale, label)
-      ])
+      TOOLBAR_LABELS.map((label) => [label, translate(core.locale, label)])
     ),
     canEdit,
-    list: state ? listKindOf(state.selection.$from.parent, core.model.numberingCatalog) : null,
+    list: listState(
+      state ? listKindOf(state.selection.$from.parent, core.model.numberingCatalog) : null
+    ),
     selection: state ? { from: state.selection.from, to: state.selection.to } : null,
     bold: value("bold", false),
     italic: value("italic", false),
@@ -25579,7 +25812,79 @@ function wordToolbarProps(core) {
     onAlignmentChange: (alignment) => run({ type: "align", value: alignment }),
     onListChange: (kind) => run({ type: "list", key: kind }),
     onUndo: () => run({ type: "history", key: "undo" }),
-    onRedo: () => run({ type: "history", key: "redo" })
+    onRedo: () => run({ type: "history", key: "redo" }),
+    ...wordHostActionProps(core)
+  };
+}
+var ZOOM_STEP = 10;
+var clamp2 = (value, low, high) => Math.min(Math.max(value, low), high);
+function wordNavigationProps(core) {
+  const { printLayout } = core.shell;
+  const viewMode = core.pages.viewMode;
+  const status = viewMode === "print" ? printLayout?.pageStatus() ?? null : null;
+  const page2 = status?.current ?? 1;
+  const pageCount = status?.total ?? 1;
+  const live = () => core.pages.viewMode === "print" ? core.shell.printLayout?.pageStatus() : null;
+  const goTo = (target) => {
+    const now = live();
+    if (!now || !Number.isFinite(target)) return false;
+    core.shell.printLayout?.scrollToPage(clamp2(Math.round(target), 1, now.total));
+    core.refreshControls();
+    return true;
+  };
+  return {
+    labels: {
+      "Previous page": translate(core.locale, "Previous page"),
+      "Next page": translate(core.locale, "Next page"),
+      "Layout view": translate(core.locale, "Layout view"),
+      Draft: translate(core.locale, "Draft"),
+      "Print Layout": translate(core.locale, "Print Layout")
+    },
+    viewMode,
+    /** False in Draft, where there are no pages to move between. */
+    pagesAvailable: status !== null,
+    page: page2,
+    pageCount,
+    pageText: formatPageStatus(core.locale, page2, pageCount),
+    canGoPrevious: status !== null && page2 > 1,
+    canGoNext: status !== null && page2 < pageCount,
+    onGoToPage: goTo,
+    onPreviousPage: () => {
+      const now = live();
+      return Boolean(now && now.current > 1) && goTo((now?.current ?? 1) - 1);
+    },
+    onNextPage: () => {
+      const now = live();
+      return Boolean(now && now.current < now.total) && goTo((now?.current ?? 1) + 1);
+    },
+    onViewModeChange: (mode) => {
+      if (mode !== "draft" && mode !== "print") return false;
+      core.pages.setViewMode(mode);
+      return true;
+    }
+  };
+}
+function wordStatusProps(core) {
+  const doc = core.view?.state.doc;
+  const words = doc ? documentWordCount(doc, core.element.lang || void 0) : 0;
+  const zoom = Math.round(core.pages.zoom * 100);
+  const setZoom = (percent) => {
+    if (!Number.isFinite(percent)) return false;
+    core.pages.setZoom(clamp2(Math.round(percent), ZOOM_MIN, ZOOM_MAX));
+    core.refreshControls();
+    return true;
+  };
+  const level = () => Math.round(core.pages.zoom * 100);
+  return {
+    labels: { Zoom: translate(core.locale, "Zoom") },
+    words,
+    wordText: formatWordCount(core.locale, words),
+    zoom,
+    minZoom: ZOOM_MIN,
+    maxZoom: ZOOM_MAX,
+    onZoomChange: setZoom,
+    onZoomIn: () => setZoom(level() + ZOOM_STEP),
+    onZoomOut: () => setZoom(level() - ZOOM_STEP)
   };
 }
 
@@ -25599,6 +25904,25 @@ var DocxEditorApi = class extends HTMLElementBase {
   getToolbarProps() {
     return wordToolbarProps(this.core);
   }
+  /** Page, view mode and navigation callbacks for custom page controls. */
+  getNavigationProps() {
+    return wordNavigationProps(this.core);
+  }
+  /** Word count and zoom for custom status controls. */
+  getStatusProps() {
+    return wordStatusProps(this.core);
+  }
+  /**
+   * Host-owned dialogs for surface mode: `onOpenHyperlinkDialog`, `onOpenFindReplace` and
+   * `onOpenImagePicker`. A workflow without its callback is reported as not enabled.
+   */
+  get surfaceActions() {
+    return this.core.surfaceActions;
+  }
+  set surfaceActions(value) {
+    this.core.surfaceActions = { ...value };
+    if (this.core.view) this.core.refreshControls();
+  }
   get loading() {
     return this.core.loading;
   }
@@ -25869,6 +26193,8 @@ var DocxEditorElement = class extends DocxEditorApi {
   }
   disconnectedCallback() {
     const { core } = this;
+    core.shell.surfaceNavigation?.();
+    delete core.shell.surfaceNavigation;
     core.shell.printStoryEditing?.();
     core.shell.printNoteEditing?.();
     core.shell.printFloats?.destroy();

package/dist/index.js

@@ -1,7 +1,7 @@
-export { OFFICE_UI_TAGS, registerOfficeUi } from './chunk-UB36NYDT.js';
+export { OFFICE_UI_TAGS, registerOfficeUi } from './chunk-REJECZGV.js';
 export { RIBBON_ADD_IN_EVENT, defineRibbonAddInElements, syncRibbonAddIns } from './chunk-C7B7TJ2J.js';
 export { OfficeUiSmartArt, defineSmartArt, renderDiagramDrawing } from './chunk-QBXYGKPB.js';
-export { EMOJI, OfficeUiActivityFeed, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCalendarAgenda, OfficeUiCalendarView, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiChatSidebar, OfficeUiPeoplePicker, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsApp, TeamsChannelTab, TeamsContentPreview, TeamsController, TeamsElement, TeamsFilesPanel, TeamsSettings, activityTime, applyTeamsProps, colorFor, createTeams, dayKind, dayLabel, defineActivityFeed, defineAppRail, defineAvatar, defineCalendarAgenda, defineCalendarView, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, defineChatSidebar, definePeoplePicker, definePrejoin, defineTeamsApp, defineTeamsChannelTab, defineTeamsContentPreview, defineTeamsFilesPanel, defineTeamsSettings, formatElapsed, formatSize, formatTime, formatWhen, icon, listenTeamsEvents, loadConfig, loadIdentity, parseIceLines, registerTeams, safeStorage, saveConfig, saveIdentity, withStyles } from './chunk-4XPAPETH.js';
+export { EMOJI, OfficeUiActivityFeed, OfficeUiAppRail, OfficeUiAvatar, OfficeUiCalendarAgenda, OfficeUiCalendarView, OfficeUiCallControls, OfficeUiCallGrid, OfficeUiChannelList, OfficeUiChatComposer, OfficeUiChatList, OfficeUiChatSidebar, OfficeUiPeoplePicker, OfficeUiPrejoin, QUICK_REACTIONS, TEAMS_TAGS, TeamsApp, TeamsChannelTab, TeamsContentPreview, TeamsController, TeamsElement, TeamsFilesPanel, TeamsSettings, activityTime, applyTeamsProps, colorFor, createTeams, dayKind, dayLabel, defineActivityFeed, defineAppRail, defineAvatar, defineCalendarAgenda, defineCalendarView, defineCallControls, defineCallGrid, defineChannelList, defineChatComposer, defineChatList, defineChatSidebar, definePeoplePicker, definePrejoin, defineTeamsApp, defineTeamsChannelTab, defineTeamsContentPreview, defineTeamsFilesPanel, defineTeamsSettings, formatElapsed, formatSize, formatTime, formatWhen, icon, listenTeamsEvents, loadConfig, loadIdentity, parseIceLines, registerTeams, safeStorage, saveConfig, saveIdentity, withStyles } from './chunk-DRBAJ5UO.js';
 export { TeamsPresentationPreview, defineTeamsPresentationPreview } from './chunk-FHO7TEWA.js';
 export { BUILDING_BLOCKS_CSS, LEGACY_OFFICE_THEME_TOKENS, THEME_CSS, THEME_STYLE_ID, installOfficeUiTheme, installOfficeUiThemeFor, legacyThemeAliases, legacyThemeBridge, prepareOfficeUiBlock, shadcnBridge, themeBridge } from './chunk-T5ARELU2.js';
 export { CONTROL_DEFINERS, DEFAULT_COMMENTS_LABELS, DEFAULT_OFFICE_PROFILE, EMPTY_MENU_STATE, OFFICE_AVATAR_SWATCHES, OFFICE_COLOR_SWATCHES, OFFICE_COLOR_SWATCH_HEXES, OFFICE_PROFILE_STORAGE_KEY, OFFICE_SYMBOLS, OFFICE_TITLE_BAR_SEARCH_LIMIT, OFFICE_TOAST_VISIBLE_LIMIT, assignKeyTips, attachKeyTips, attachRibbonGroupOverflow, clampFlyoutPosition, clampOptionNumber, clearOfficeProfile, commentInitials, createRibbonOverflow, defineAccount, defineBackstage, defineButton, defineChartPicker, defineCheckbox, defineColorCustom, defineColorGrid, defineCommandSearch, defineCommentsPane, defineContextMenu, defineDialog, defineDialogFooter, defineFindBar, defineGallery, defineIcon, defineMenuButton, defineMenuItem, defineMenuSeparator, defineOptionsDialog, definePasteOptions, definePrintPreview, defineRadio, defineReadOnlyBanner, defineRibbon, defineRibbonActions, defineRibbonGroup, defineRibbonSection, defineRibbonStack, defineRibbonToggle, defineRuler, defineSearchField, defineSelect, defineStatusBar, defineStatusItem, defineSwitch, defineSymbolPicker, defineTabStrip, defineTaskPane, defineTitleBar, defineToasts, defineToolbar, defineZoomSlider, fitRibbonGroups, formatCommentTime, glyph, nextEnabledIndex, optionText, optionsLabels, parseOfficeSymbolCode, parseSvgPreview, personalizeSection, profileInitials, readOfficeProfile, registerControls, rulerDivisions, runKeyTips, sanitizeOfficeProfile, typeAheadIndex, unavailableCategory, unavailableControl, userInterfaceSection, writeOfficeProfile } from './chunk-TJ245GDD.js';

package/dist/parse-worker.js

@@ -6,7 +6,11 @@ var worker = self;
 worker.onmessage = async (event) => {
   if (event.origin && event.origin !== self.location.origin) return;
   try {
-    const document = await loadVisio(event.data, { metafileConverter: convertMetafileToSvgTree });
+    const request = event.data;
+    const document = request instanceof ArrayBuffer ? await loadVisio(request, { metafileConverter: convertMetafileToSvgTree }) : await loadVisio(request.bytes, {
+      metafileConverter: convertMetafileToSvgTree,
+      pages: request.pages
+    });
     worker.postMessage({ ok: true, document });
   } catch (cause) {
     worker.postMessage({