ooxml-ui 1.12.2 → 1.13.0

package/dist/docx.js

@@ -1,13 +1,14 @@
-import { syncRibbonAddIns } from './chunk-GI3WX6LZ.js';
-export { RIBBON_ADD_IN_EVENT } from './chunk-GI3WX6LZ.js';
-import { defineSmartArt } from './chunk-PXIYHFZ5.js';
-import { shadcnBridge } from './chunk-S6ZXU442.js';
-import { createRibbonOverflow, defineRibbon, defineRuler, defineCommentsPane, defineDialog, defineSearchField, defineSwitch, defineTitleBar, defineRibbonActions, defineBackstage, defineStatusBar, defineZoomSlider, defineContextMenu, defineColorGrid, runKeyTips, assignKeyTips } from './chunk-FUQYUUIQ.js';
+import { statusLayout, watchStatusWidth, compactPageText } from './chunk-UBBC5FH7.js';
+import { syncRibbonAddIns } from './chunk-3XST4F6J.js';
+export { RIBBON_ADD_IN_EVENT } from './chunk-3XST4F6J.js';
+import { defineSmartArt } from './chunk-ANPFMQ6E.js';
+import { shadcnBridge } from './chunk-7E3HU7RL.js';
+import { createRibbonOverflow, defineRibbon, defineRuler, defineCommentsPane, defineDialog, defineSearchField, defineSwitch, defineTitleBar, defineRibbonActions, defineBackstage, defineStatusBar, defineZoomSlider, defineContextMenu, defineColorGrid, runKeyTips, defineOptionsDialog, assignKeyTips, optionsLabels, userInterfaceSection, personalizeSection, optionText, unavailableCategory } from './chunk-BFPHRWEB.js';
 import { registerIcon } from './chunk-M6GF5ED2.js';
-import './chunk-L7JV5FVE.js';
-import './chunk-OGNNNTKI.js';
-import './chunk-SPNWHKSR.js';
-import { normalizeLocale, SUPPORTED_OFFICE_LOCALES, interpolate } from 'ooxml-core/i18n';
+import './chunk-KNC2UEUR.js';
+import './chunk-CWBSXK7P.js';
+import './chunk-LD3K2RDN.js';
+import { optionStrings, normalizeLocale, SUPPORTED_OFFICE_LOCALES, interpolate } from 'ooxml-core/i18n';
 import { createDocument, saveDocx, sectionsFromLayout, sectionLayoutJson, sectionsOf, pageSizeOf, columnPreset, applyPageSetup, withSection, computeListLabels, numberNotesInOrder, tocEntries, tableOfFiguresInstruction, findTableOfContents, ensureListDefinition, resolveNumberingLevel, 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, reviewDocumentFormatting, reviewFormattingWarnings, listRevisions, plainText, tocHyperlinks, DEFAULT_TOC_INSTRUCTION, tocBookmarks, buildTableOfContents, tocCaptionLabel, isFieldLocked, twips as twips$1, signedTwips, formatListNumber, columnTextWidth, validColumnDraft, validatePageSetup, presetOf, LIGATURE_VALUES, isLigatures, reviewRunFormatting, resolveRunFormatting, resolveThemeColorReference, lineSpacingValue, isStHighlightColor, transformCase, DEFAULT_TABLE_BORDERS, parseLineSpacingValue, twipsAttr, twipsFromPixels, headingLevel, reviewParagraphFormatting, isValidLanguageTag, WORD, isHeadingListKind, lineSpacingOptions, halfPointsFromPoints, changeColumnWidth, changeColumnGap, createListDefinition, linkStylesToList, headingListLevels, documentStats, fieldName } from 'ooxml-core/docx';
 import { Schema, DOMSerializer, Fragment } from 'prosemirror-model';
 import { markSpecs, imageNodeSpec, fieldMarkerNodeSpec, noteReferenceNodeSpec, pageBreakNodeSpec, hardBreakNodeSpec, commentHistoryAttributes, tableCellStyle, tableStyle, createToggleFormat, expectDefined, paragraphBoxCss, themeToCssVars, lightTheme, darkTheme, normalizeThemeMode, applyThemeColors, refreshWordYjsPresence, normalizeRibbonActions, DirtyState, isWordYjsRemoteTransaction, REMOTE_TRANSACTION_META, repairCollaborativeDocumentIds, HEADER_FOOTER_INPUT, restoreSectionParts, commentThreadsFromDoc, restoreNoteParts, CollaborationClient, createCollaborationIdGenerator, WordYjsCollaboration, sectionPartsJson, NotePartsStep, notePartsJson, SectionPartsStep, fitZoomPercent, hasChangeAtCursor, hasAnyChange, commentIdsAtSelection, commentAnchors, documentWordCount, fieldGuardPlugin, tableStructureGuardPlugin, 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, wordYjsPluginKey, setReviewRecordingPreferences, nodeNumbering, paragraphFormattingRevision, inlineNodeRun, formattingRevision, insertWordHardBreak, paragraphAttrs, resolveCellVisuals, themeDrawing, ribbonActionIdForLabel, removeWordLink, fieldResultRanges, wordLinkRangeAt, ligatureCss as ligatureCss$1, wordYjsRedo, wordYjsUndo, runToInlineNodes as runToInlineNodes$1, backstageFocus, applyRunFormattingPatch, clearDirectRunFormatting, applyWordLink, ligatureStyle, wordHighlightColors, swatchColor, cssBorderSide, deleteFieldSelection, countWords, resolveComment, replyToComment, CollaborationAuthority } from 'ooxml-core/docx/ui';
@@ -23,6 +24,42 @@ import { sanitizeColor, sanitizeUserName, SequenceTracker, isValidId, classifyVe
 import { keymap } from 'prosemirror-keymap';
 import { chainCommands, baseKeymap, selectAll } from 'prosemirror-commands';
 
+var enOptions = {
+  ...optionStrings.en,
+  "Change how document content is displayed on the screen.": "Change how document content is displayed on the screen.",
+  "Page display options": "Page display options",
+  "Formatting marks": "Formatting marks",
+  "Check spelling as you type": "Check spelling as you type"
+};
+var frOptions = {
+  ...optionStrings.fr,
+  "Change how document content is displayed on the screen.": "Modifiez l\u2019affichage du contenu du document \xE0 l\u2019\xE9cran.",
+  "Page display options": "Options d\u2019affichage des pages",
+  "Formatting marks": "Marques de mise en forme",
+  "Check spelling as you type": "V\xE9rifier l\u2019orthographe au cours de la frappe"
+};
+var deOptions = {
+  ...optionStrings.de,
+  "Change how document content is displayed on the screen.": "\xC4ndern Sie, wie der Dokumentinhalt auf dem Bildschirm angezeigt wird.",
+  "Page display options": "Seitenanzeigeoptionen",
+  "Formatting marks": "Formatierungszeichen",
+  "Check spelling as you type": "Rechtschreibung w\xE4hrend der Eingabe \xFCberpr\xFCfen"
+};
+var esOptions = {
+  ...optionStrings.es,
+  "Change how document content is displayed on the screen.": "Cambie la forma en que se muestra el contenido del documento en pantalla.",
+  "Page display options": "Opciones de presentaci\xF3n de p\xE1gina",
+  "Formatting marks": "Marcas de formato",
+  "Check spelling as you type": "Revisar la ortograf\xEDa mientras escribe"
+};
+var zhOptions = {
+  ...optionStrings["zh-CN"],
+  "Change how document content is displayed on the screen.": "\u66F4\u6539\u6587\u6863\u5185\u5BB9\u5728\u5C4F\u5E55\u4E0A\u7684\u663E\u793A\u65B9\u5F0F\u3002",
+  "Page display options": "\u9875\u9762\u663E\u793A\u9009\u9879",
+  "Formatting marks": "\u683C\u5F0F\u6807\u8BB0",
+  "Check spelling as you type": "\u952E\u5165\u65F6\u68C0\u67E5\u62FC\u5199"
+};
+
 // src/docx/locales/columns.ts
 var enColumns = {
   Column: "Column",
@@ -702,6 +739,7 @@ var deApp = {
   "Theme Colors": "Designfarben",
   "Standard Colors": "Standardfarben",
   "More Colors\u2026": "Weitere Farben\u2026",
+  More: "Mehr",
   "No Color": "Keine Farbe",
   "Dark Red": "Dunkelrot",
   "Light Green": "Hellgr\xFCn",
@@ -1334,6 +1372,7 @@ var deRibbon = {
 
 // src/docx/locales/de.ts
 var de = {
+  ...deOptions,
   ...deRibbon,
   ...deApp,
   ...deTableProperties,
@@ -1528,6 +1567,7 @@ var enApp = {
   "Theme Colors": "Theme Colors",
   "Standard Colors": "Standard Colors",
   "More Colors\u2026": "More Colors\u2026",
+  More: "More",
   "No Color": "No Color",
   "Dark Red": "Dark Red",
   "Light Green": "Light Green",
@@ -2030,6 +2070,7 @@ var enRibbon = {
 
 // src/docx/locales/en.ts
 var en = {
+  ...enOptions,
   ...enRibbon,
   ...enApp,
   ...enTableProperties,
@@ -2224,6 +2265,7 @@ var esApp = {
   "Theme Colors": "Colores del tema",
   "Standard Colors": "Colores est\xE1ndar",
   "More Colors\u2026": "M\xE1s colores\u2026",
+  More: "M\xE1s",
   "No Color": "Sin color",
   "Dark Red": "Rojo oscuro",
   "Light Green": "Verde claro",
@@ -2726,6 +2768,7 @@ var esRibbon = {
 
 // src/docx/locales/es.ts
 var es = {
+  ...esOptions,
   ...esRibbon,
   ...esApp,
   ...esTableProperties,
@@ -2920,6 +2963,7 @@ var frApp = {
   "Theme Colors": "Couleurs du th\xE8me",
   "Standard Colors": "Couleurs standard",
   "More Colors\u2026": "Autres couleurs\u2026",
+  More: "Plus",
   "No Color": "Aucune couleur",
   "Dark Red": "Rouge fonc\xE9",
   "Light Green": "Vert clair",
@@ -3422,6 +3466,7 @@ var frRibbon = {
 
 // src/docx/locales/fr.ts
 var fr = {
+  ...frOptions,
   ...frRibbon,
   ...frApp,
   ...frTableProperties,
@@ -3616,6 +3661,7 @@ var zhCNApp = {
   "Theme Colors": "\u4E3B\u9898\u989C\u8272",
   "Standard Colors": "\u6807\u51C6\u8272",
   "More Colors\u2026": "\u5176\u4ED6\u989C\u8272\u2026",
+  More: "\u66F4\u591A",
   "No Color": "\u65E0\u989C\u8272",
   "Dark Red": "\u6DF1\u7EA2",
   "Light Green": "\u6D45\u7EFF",
@@ -4118,6 +4164,7 @@ var zhCNRibbon = {
 
 // src/docx/locales/zh-CN.ts
 var zhCN = {
+  ...zhOptions,
   ...zhCNRibbon,
   ...zhCNApp,
   ...zhTableProperties,
@@ -6664,6 +6711,8 @@ var GROUP_ICONS = {
 };
 var overflow = createRibbonOverflow({
   icon: (_doc, name, size) => ribbonIcon(name, size),
+  // Read per sync from the panel's own locale, so a language change reaches the chevron.
+  moreLabel: (panel) => translate(localeOf(panel), "More"),
   groupIcons: GROUP_ICONS,
   fallbackIcon: "moreStyles",
   ribbon: ".dve-ribbon",
@@ -15750,6 +15799,114 @@ function pageSetupChange(model, index, section3, key2, value) {
       return setTitlePage(model, index, !section3.titlePage);
   }
 }
+
+// src/docx/auto-fit.ts
+var AUTO_FIT_MIN = 25;
+function autoFitZoom(availableWidth, pageWidth) {
+  if (!(availableWidth > 0) || !(pageWidth > 0)) return void 0;
+  if (availableWidth >= pageWidth) return 100;
+  return Math.max(AUTO_FIT_MIN, Math.floor(availableWidth / pageWidth * 100));
+}
+function pinchZoom(startPercent, scale, min, max) {
+  if (!(scale > 0)) return startPercent;
+  return Math.min(max, Math.max(min, Math.round(startPercent * scale)));
+}
+
+// src/docx/status-bar.ts
+var ZOOM_MIN = AUTO_FIT_MIN;
+var ZOOM_MAX = 200;
+var LAYOUT_ICONS = {
+  webLayout: "M3 5h14v10H3z M3 8h14",
+  printLayout: "M5 3h10v14H5z M8 7h4 M8 10h4"
+};
+function createStatusBar(handlers) {
+  defineStatusBar();
+  defineZoomSlider();
+  for (const [name, d] of Object.entries(LAYOUT_ICONS)) registerIcon(name, d);
+  const element = document.createElement("office-ui-status-bar");
+  element.className = "dve-status";
+  const slider = document.createElement("office-ui-zoom-slider");
+  slider.slot = "end";
+  slider.setAttribute("min", String(ZOOM_MIN));
+  slider.setAttribute("max", String(ZOOM_MAX));
+  slider.className = "dve-zoom";
+  element.append(slider);
+  const model = { page: "", words: "", language: "", notes: 0, mode: "draft", zoom: 100 };
+  let layout = statusLayout(0);
+  const locale = () => normalizeEditorLocale(element.dataset.editorLocale);
+  const render = () => {
+    const t = locale();
+    const noteKey = model.notes === 1 ? "status.note" : "status.notes";
+    const view = (mode, key2) => ({
+      id: mode,
+      icon: mode === "draft" ? "webLayout" : "printLayout",
+      label: translate(t, key2),
+      pressed: model.mode === mode
+    });
+    element.state = {
+      items: [
+        {
+          id: "page",
+          text: layout.compactPage ? compactPageText(model.page) : model.page,
+          title: layout.compactPage ? `${model.page}. ${translate(t, "nav.approximate")}` : translate(t, "nav.approximate"),
+          live: true
+        },
+        ...layout.words ? [{ id: "words", text: model.words }] : [],
+        ...model.language && layout.language ? [{ id: "language", text: model.language, narrowHide: true }] : []
+      ],
+      toggles: [
+        {
+          id: "notes",
+          icon: "warning",
+          label: translate(t, noteKey).replace("{count}", String(model.notes)),
+          text: translate(t, noteKey).replace("{count}", String(model.notes)),
+          hidden: model.notes === 0
+        }
+      ],
+      views: layout.views ? [view("draft", "Web Layout"), view("print", "Print Layout")] : false
+    };
+    slider.setAttribute("out-label", translate(t, "Zoom out"));
+    slider.setAttribute("in-label", translate(t, "Zoom in"));
+    slider.setAttribute("slider-label", translate(t, "Zoom level"));
+    slider.value = model.zoom;
+  };
+  element.addEventListener("office-status-activate", (event) => {
+    const { id } = event.detail;
+    if (id === "notes") handlers.showCompatibilityNotes();
+    else if (id === "draft" || id === "print") handlers.setViewMode(id);
+  });
+  slider.addEventListener("input", () => handlers.setZoom(slider.value));
+  render();
+  watchStatusWidth(element, (width) => {
+    layout = statusLayout(width);
+    render();
+  });
+  return {
+    element,
+    setPageAndWords(pageText, wordText) {
+      model.page = pageText;
+      model.words = wordText;
+      render();
+    },
+    setLanguage(value) {
+      model.language = value;
+      render();
+    },
+    setNoteCount(count) {
+      model.notes = count;
+      render();
+    },
+    setViewMode(mode) {
+      model.mode = mode;
+      render();
+    },
+    setZoom(value) {
+      model.zoom = value;
+      render();
+    },
+    relocalize: render
+  };
+}
 var PageController = class {
   constructor(host) {
     this.host = host;
@@ -15757,6 +15914,9 @@ var PageController = class {
   host;
   zoom = 1;
   viewMode = "draft";
+  /** True once the user picked a zoom; the automatic fit to a narrow viewport then stays out. */
+  userZoomed = false;
+  observed;
   /** Page setup applies to the section holding the selection, as in Word, and is undoable. */
   changePageSetup(key2, value) {
     const view = this.host.view();
@@ -15941,6 +16101,7 @@ var PageController = class {
     const paper = this.host.paper();
     if (!paper) return;
     const model = this.host.model();
+    this.observeViewport(paper.parentElement);
     applyPageStyles(paper, model, this.zoom);
     const sections = model.sections ?? [];
     const columns = sections.length === 1 ? sections[0]?.columns : void 0;
@@ -15971,8 +16132,65 @@ var PageController = class {
       mode === "pages"
     );
   }
-  /** `sideBySide` lays Print Layout's pages out two across (View > Multiple Pages). */
+  /** A zoom the user chose (slider, ribbon, dialog, pinch); it ends the automatic fit. */
   setZoom(percent, sideBySide = false) {
+    this.userZoomed = true;
+    this.applyZoom(percent, sideBySide);
+  }
+  /**
+   * Fits the page to the canvas width while the user has not chosen a zoom, so a phone or a narrow
+   * window shows the whole page width (as Word for the web and mobile do) and the zoom returns to
+   * 100% when the window grows. Runs on resize and orientation change.
+   */
+  autoFit() {
+    if (this.userZoomed) return;
+    const canvas = this.host.paper()?.parentElement;
+    if (!canvas || canvas.hasAttribute("data-multipage")) return;
+    const style = getComputedStyle(canvas);
+    const available = canvas.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
+    const percent = autoFitZoom(available, this.host.model().page.width);
+    if (percent !== void 0 && Math.round(this.zoom * 100) !== percent) this.applyZoom(percent);
+  }
+  observeViewport(canvas) {
+    if (!canvas || this.observed === canvas) return;
+    this.observed = canvas;
+    this.watchPinch(canvas);
+    if (typeof ResizeObserver === "undefined") return;
+    let width = canvas.clientWidth;
+    new ResizeObserver(() => {
+      if (canvas.clientWidth === width) return;
+      width = canvas.clientWidth;
+      this.autoFit();
+    }).observe(canvas);
+    queueMicrotask(() => this.autoFit());
+  }
+  /** Two-finger pinch over the canvas zooms the page; one finger keeps scrolling. */
+  watchPinch(canvas) {
+    let start;
+    const distance = (e) => {
+      const [a, b] = [e.touches[0], e.touches[1]];
+      return a && b ? Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY) : 0;
+    };
+    canvas.addEventListener(
+      "touchstart",
+      (e) => {
+        start = e.touches.length === 2 ? { distance: distance(e), percent: Math.round(this.zoom * 100) } : void 0;
+      },
+      { passive: true }
+    );
+    canvas.addEventListener(
+      "touchmove",
+      (e) => {
+        if (!start || e.touches.length !== 2 || start.distance <= 0) return;
+        if (e.cancelable) e.preventDefault();
+        this.setZoom(pinchZoom(start.percent, distance(e) / start.distance, ZOOM_MIN, ZOOM_MAX));
+      },
+      { passive: false }
+    );
+    canvas.addEventListener("touchend", () => start = void 0, { passive: true });
+  }
+  /** `sideBySide` lays Print Layout's pages out two across (View > Multiple Pages). */
+  applyZoom(percent, sideBySide = false) {
     this.zoom = percent / 100;
     this.host.paper()?.parentElement?.toggleAttribute("data-multipage", sideBySide);
     this.refreshPageStyles();
@@ -15984,6 +16202,7 @@ var PageController = class {
   }
   /** Switches between continuous and paginated presentations of the existing editor. */
   setViewMode(mode) {
+    const wasPrint = this.viewMode === "print";
     this.viewMode = mode;
     const printLayout = this.host.printLayout();
     printLayout?.setActive(mode === "print");
@@ -15994,13 +16213,16 @@ var PageController = class {
     const toolbar = this.host.toolbar();
     const select2 = toolbar && findLocalizedControl(toolbar, "Layout view");
     if (select2) select2.value = mode;
-    if (mode === "print") printLayout?.scheduleRelayout(this.host.model());
+    if (mode === "print" && !wasPrint) printLayout?.scheduleRelayout(this.host.model());
     this.host.statusBar()?.setViewMode(mode);
     this.host.refreshControls();
   }
-  /** Re-lays out Print Layout after a model change (coalesced by the layout view). */
-  relayout() {
-    if (this.viewMode === "print") this.host.printLayout()?.scheduleRelayout(this.host.model());
+  /** Re-lays out Print Layout after a model change (coalesced unless `immediate`, for a swapped document). */
+  relayout(immediate = false) {
+    if (this.viewMode !== "print") return;
+    const printLayout = this.host.printLayout();
+    if (immediate) printLayout?.relayoutNow(this.host.model());
+    else printLayout?.scheduleRelayout(this.host.model());
   }
   print() {
     this.host.printLayout()?.print(this.host.model(), (message) => emit(this.host.element, "document-warning", message));
@@ -16941,13 +17163,13 @@ var underline_default = `/* Styled runs paint their own underline. Do not superi
 `;
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/docx/styles/print.css?raw
-var print_default = ".dve-print-pages {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: 24px;\n	margin: 0 auto;\n	zoom: var(--dve-zoom, 1);\n}\n.dve-print-pages[hidden] {\n	display: none;\n}\n.dve-print-page {\n	position: relative;\n	flex: none;\n	background: var(--dve-page-color, #fff);\n	color: #202124;\n	box-shadow:\n		0 1px 3px #20212430,\n		0 4px 12px #20212420;\n	overflow: hidden;\n}\n.dve-print-column {\n	position: absolute;\n	z-index: 1;\n}\n/* Floating pictures sit in front of text unless anchored behind it (wp:anchor/@behindDoc). */\n.dve-print-float {\n	z-index: 2;\n}\n.dve-print-float-behind {\n	z-index: 0;\n}\n.dve-print-picture-missing {\n	box-sizing: border-box;\n	border: 1px dashed #8a8886;\n	background: #f3f2f1;\n}\n.dve-print-chart {\n	overflow: hidden;\n	background: #fff;\n}\n.dve-print-chart > svg {\n	display: block;\n	width: 100%;\n	height: 100%;\n}\n.dve-print-chart-frame {\n	display: grid;\n	place-items: center;\n	color: #605e5c;\n	font-size: 11px;\n}\n.dve-print-block {\n	position: absolute;\n	left: 0;\n	width: 100%;\n}\n.dve-print-line {\n	position: absolute;\n	left: 0;\n	width: 100%;\n	font:\n		11pt/1.2 Calibri,\n		Arial,\n		sans-serif;\n	cursor: text;\n}\n.dve-print-line span {\n	position: absolute;\n	top: 0;\n}\n.dve-print-row {\n	position: absolute;\n	left: 0;\n	width: 100%;\n}\n/* Cells sit at their grid positions; borders come from the document (Word prints no gridlines). */\n.dve-print-cell {\n	position: absolute;\n	top: 0;\n	box-sizing: border-box;\n}\n.dve-print-cell-content {\n	position: absolute;\n	bottom: 0;\n}\n@media print {\n	.dve-ribbon,\n	.dve-status,\n	.multilingual-controls {\n		display: none !important;\n	}\n	.dve-canvas {\n		overflow: visible !important;\n		padding: 0 !important;\n	}\n	.dve-paper {\n		display: none !important;\n	}\n	.dve-print-pages {\n		gap: 0 !important;\n		zoom: 1 !important;\n	}\n	.dve-print-page {\n		/* Like Word, page colours are not printed unless asked for. */\n		background: #fff !important;\n		box-shadow: none !important;\n		break-after: page;\n	}\n}\n.dve-print-header,\n.dve-print-footer {\n	position: absolute;\n	color: var(--ink);\n	font-size: 11pt;\n	pointer-events: none;\n}\n.dve-print-header p,\n.dve-print-footer p {\n	margin: 0;\n}\n.dve-print-header table,\n.dve-print-footer table {\n	width: 100%;\n	border-collapse: collapse;\n}\n\n/* Complex field begin/code/separate/end markers: kept in the document, never shown. */\n.dve-field-marker {\n	display: inline;\n	font-size: 0;\n}\n\n/* TOC entries link to hidden _Toc bookmarks; Word draws them in the entry's style, not as links. */\na.dve-link[data-anchor^='_Toc'] {\n	color: inherit;\n	text-decoration: none;\n}\n\n/* Tabs sized to Word's tab stops by tab-stops-view.ts; leaders fill the tab's width. */\n.dve-tab {\n	display: inline-block;\n	overflow: hidden;\n	white-space: pre;\n	vertical-align: baseline;\n	text-indent: 0;\n}\n.dve-tab-leader-dot,\n.dve-tab-leader-middleDot {\n	background-image: radial-gradient(circle, currentColor 0.8px, transparent 1.1px);\n	background-size: 4px 4px;\n	background-repeat: repeat-x;\n	background-position: right 0 bottom 0.25em;\n}\n.dve-tab-leader-hyphen {\n	background-image: linear-gradient(to right, currentColor 50%, transparent 50%);\n	background-size: 6px 1px;\n	background-repeat: repeat-x;\n	background-position: right 0 bottom 0.4em;\n}\n.dve-tab-leader-underscore,\n.dve-tab-leader-heavy {\n	border-bottom: 1px solid currentColor;\n}\n.dve-tab-leader-heavy {\n	border-bottom-width: 2px;\n}\n\n/* Footnotes above the bottom margin; the separator is Word's 2-inch rule. */\n.dve-print-footnotes {\n	position: absolute;\n	z-index: 1;\n}\n.dve-print-footnote-separator {\n	position: absolute;\n	top: -7px;\n	left: 0;\n	width: 192px;\n	border-top: 1px solid currentColor;\n}\n.dve-print-footnote-continuation-separator {\n	width: 100%;\n}\n.dve-print-footnote {\n	position: absolute;\n	left: 0;\n	width: 100%;\n}\n\n[data-print-view] .dve-notes-container {\n	display: none;\n}\n\n/* Word draws superscript and subscript at about two thirds size without growing the line. */\n.dve-paper sup,\n.dve-paper sub {\n	font-size: 0.65em;\n	line-height: 0;\n}\n/* Exact-height rows clip content that does not fit, as Word does. */\n.dve-print-cell {\n	overflow: hidden;\n}\n.dve-print-paragraph-frame {\n	position: absolute;\n	top: 0;\n	box-sizing: border-box;\n}\n\n/* View > Multiple Pages: Print Layout's sheets sit side by side and wrap, instead of one column. */\n.dve-canvas[data-multipage] .dve-print-pages {\n	flex-direction: row;\n	flex-wrap: wrap;\n	align-items: flex-start;\n	justify-content: center;\n}\n\n/* Layout > Line Numbers: numbers in the left margin, one per printed line. */\n.dve-print-line-number {\n	position: absolute;\n	width: 40px;\n	text-align: right;\n	font:\n		10px 'Segoe UI',\n		Arial,\n		sans-serif;\n	color: #444;\n	pointer-events: none;\n}\n\n/* Native input stays mounted while page geometry supplies the visible selection. */\n.dve-paper.dve-print-input {\n	position: fixed;\n	top: 0;\n	left: 0;\n	margin: 0;\n	opacity: 0;\n	max-height: 1px;\n	overflow: hidden;\n	pointer-events: none;\n	z-index: -1;\n}\n.dve-print-pages {\n	position: relative;\n}\n.dve-print-selection-layer {\n	position: absolute;\n	inset: 0;\n	pointer-events: none;\n	z-index: 3;\n}\n.dve-print-caret,\n.dve-print-selection {\n	position: absolute;\n	pointer-events: none;\n}\n.dve-print-caret {\n	background: currentColor;\n	animation: dve-print-caret-blink 1s step-end infinite;\n}\n.dve-print-selection {\n	background: Highlight;\n	opacity: 0.3;\n}\n@keyframes dve-print-caret-blink {\n	50% {\n		opacity: 0;\n	}\n}\n@media print {\n	.dve-print-input,\n	.dve-print-selection-layer {\n		display: none !important;\n	}\n}\n";
+var print_default = ".dve-print-pages {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: 24px;\n	margin: 0 auto;\n	zoom: var(--dve-zoom, 1);\n}\n/* The view wraps the layout's own pages container; zoom the pair once, not twice. */\n.dve-print-pages > .dve-print-pages {\n	zoom: 1;\n}\n.dve-print-pages[hidden] {\n	display: none;\n}\n.dve-print-page {\n	position: relative;\n	flex: none;\n	background: var(--dve-page-color, #fff);\n	color: #202124;\n	box-shadow:\n		0 1px 3px #20212430,\n		0 4px 12px #20212420;\n	overflow: hidden;\n}\n.dve-print-column {\n	position: absolute;\n	z-index: 1;\n}\n/* Floating pictures sit in front of text unless anchored behind it (wp:anchor/@behindDoc). */\n.dve-print-float {\n	z-index: 2;\n}\n.dve-print-float-behind {\n	z-index: 0;\n}\n.dve-print-picture-missing {\n	box-sizing: border-box;\n	border: 1px dashed #8a8886;\n	background: #f3f2f1;\n}\n.dve-print-chart {\n	overflow: hidden;\n	background: #fff;\n}\n.dve-print-chart > svg {\n	display: block;\n	width: 100%;\n	height: 100%;\n}\n.dve-print-chart-frame {\n	display: grid;\n	place-items: center;\n	color: #605e5c;\n	font-size: 11px;\n}\n.dve-print-block {\n	position: absolute;\n	left: 0;\n	width: 100%;\n}\n.dve-print-line {\n	position: absolute;\n	left: 0;\n	width: 100%;\n	font:\n		11pt/1.2 Calibri,\n		Arial,\n		sans-serif;\n	cursor: text;\n}\n.dve-print-line span {\n	position: absolute;\n	top: 0;\n}\n.dve-print-row {\n	position: absolute;\n	left: 0;\n	width: 100%;\n}\n/* Cells sit at their grid positions; borders come from the document (Word prints no gridlines). */\n.dve-print-cell {\n	position: absolute;\n	top: 0;\n	box-sizing: border-box;\n}\n.dve-print-cell-content {\n	position: absolute;\n	bottom: 0;\n}\n@media print {\n	.dve-ribbon,\n	.dve-status,\n	.multilingual-controls {\n		display: none !important;\n	}\n	.dve-canvas {\n		overflow: visible !important;\n		padding: 0 !important;\n	}\n	.dve-paper {\n		display: none !important;\n	}\n	.dve-print-pages {\n		gap: 0 !important;\n		zoom: 1 !important;\n	}\n	.dve-print-page {\n		/* Like Word, page colours are not printed unless asked for. */\n		background: #fff !important;\n		box-shadow: none !important;\n		break-after: page;\n	}\n}\n.dve-print-header,\n.dve-print-footer {\n	position: absolute;\n	color: var(--ink);\n	font-size: 11pt;\n	pointer-events: none;\n}\n.dve-print-header p,\n.dve-print-footer p {\n	margin: 0;\n}\n.dve-print-header table,\n.dve-print-footer table {\n	width: 100%;\n	border-collapse: collapse;\n}\n\n/* Complex field begin/code/separate/end markers: kept in the document, never shown. */\n.dve-field-marker {\n	display: inline;\n	font-size: 0;\n}\n\n/* TOC entries link to hidden _Toc bookmarks; Word draws them in the entry's style, not as links. */\na.dve-link[data-anchor^='_Toc'] {\n	color: inherit;\n	text-decoration: none;\n}\n\n/* Tabs sized to Word's tab stops by tab-stops-view.ts; leaders fill the tab's width. */\n.dve-tab {\n	display: inline-block;\n	overflow: hidden;\n	white-space: pre;\n	vertical-align: baseline;\n	text-indent: 0;\n}\n.dve-tab-leader-dot,\n.dve-tab-leader-middleDot {\n	background-image: radial-gradient(circle, currentColor 0.8px, transparent 1.1px);\n	background-size: 4px 4px;\n	background-repeat: repeat-x;\n	background-position: right 0 bottom 0.25em;\n}\n.dve-tab-leader-hyphen {\n	background-image: linear-gradient(to right, currentColor 50%, transparent 50%);\n	background-size: 6px 1px;\n	background-repeat: repeat-x;\n	background-position: right 0 bottom 0.4em;\n}\n.dve-tab-leader-underscore,\n.dve-tab-leader-heavy {\n	border-bottom: 1px solid currentColor;\n}\n.dve-tab-leader-heavy {\n	border-bottom-width: 2px;\n}\n\n/* Footnotes above the bottom margin; the separator is Word's 2-inch rule. */\n.dve-print-footnotes {\n	position: absolute;\n	z-index: 1;\n}\n.dve-print-footnote-separator {\n	position: absolute;\n	top: -7px;\n	left: 0;\n	width: 192px;\n	border-top: 1px solid currentColor;\n}\n.dve-print-footnote-continuation-separator {\n	width: 100%;\n}\n.dve-print-footnote {\n	position: absolute;\n	left: 0;\n	width: 100%;\n}\n\n[data-print-view] .dve-notes-container {\n	display: none;\n}\n\n/* Word draws superscript and subscript at about two thirds size without growing the line. */\n.dve-paper sup,\n.dve-paper sub {\n	font-size: 0.65em;\n	line-height: 0;\n}\n/* Exact-height rows clip content that does not fit, as Word does. */\n.dve-print-cell {\n	overflow: hidden;\n}\n.dve-print-paragraph-frame {\n	position: absolute;\n	top: 0;\n	box-sizing: border-box;\n}\n\n/* View > Multiple Pages: Print Layout's sheets sit side by side and wrap, instead of one column. */\n.dve-canvas[data-multipage] .dve-print-pages {\n	flex-direction: row;\n	flex-wrap: wrap;\n	align-items: flex-start;\n	justify-content: center;\n}\n\n/* Layout > Line Numbers: numbers in the left margin, one per printed line. */\n.dve-print-line-number {\n	position: absolute;\n	width: 40px;\n	text-align: right;\n	font:\n		10px 'Segoe UI',\n		Arial,\n		sans-serif;\n	color: #444;\n	pointer-events: none;\n}\n\n/* Native input stays mounted while page geometry supplies the visible selection. */\n.dve-paper.dve-print-input {\n	position: fixed;\n	top: 0;\n	left: 0;\n	margin: 0;\n	opacity: 0;\n	max-height: 1px;\n	overflow: hidden;\n	pointer-events: none;\n	z-index: -1;\n}\n.dve-print-pages {\n	position: relative;\n}\n.dve-print-selection-layer {\n	position: absolute;\n	inset: 0;\n	pointer-events: none;\n	z-index: 3;\n}\n.dve-print-caret,\n.dve-print-selection {\n	position: absolute;\n	pointer-events: none;\n}\n.dve-print-caret {\n	background: currentColor;\n	animation: dve-print-caret-blink 1s step-end infinite;\n}\n.dve-print-selection {\n	background: Highlight;\n	opacity: 0.3;\n}\n@keyframes dve-print-caret-blink {\n	50% {\n		opacity: 0;\n	}\n}\n@media print {\n	.dve-print-input,\n	.dve-print-selection-layer {\n		display: none !important;\n	}\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/docx/styles/chrome-titlebar.css?raw
 var chrome_titlebar_default = ".dve-frame {\n	position: relative;\n	border: 0;\n	box-shadow: none;\n}\n.dve-icon {\n	flex: none;\n}\n.dve-icon-button {\n	display: inline-flex;\n	align-items: center;\n	justify-content: center;\n	min-width: 28px;\n	height: 28px;\n	padding: 0 6px;\n	border: 0;\n	border-radius: 4px;\n	background: none;\n	color: inherit;\n	cursor: pointer;\n}\n.dve-icon-button:hover:not(:disabled),\n.dve-icon-button[aria-pressed='true'] {\n	background: var(--word-soft);\n}\n.dve-icon-button:disabled {\n	opacity: 0.4;\n	cursor: default;\n}\n\n/* Title bar: drawn by the shared office-ui-title-bar; these colour it. */\n.dve-titlebar {\n	flex: none;\n	--office-title-bar-height: 40px;\n	--office-title-bar-background: var(--chrome);\n	--office-title-bar-border: var(--line);\n	--office-title-bar-mark-background: var(--word);\n	--office-title-bar-mark-foreground: var(--dve-primary-foreground);\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/docx/styles/backstage.css?raw
-var backstage_default = "/* Backstage: the shared office-ui-backstage draws the frame; these colour it and style the pages. */\n.dve-backstage {\n	--office-backstage-nav-width: 220px;\n	--office-backstage-nav-background: var(--word);\n	--office-backstage-nav-foreground: var(--dve-primary-foreground);\n	--office-backstage-item-hover: var(--word-strong);\n	z-index: 40;\n	background: var(--surface);\n}\n.dve-backstage-content {\n	overflow: auto;\n	padding: 28px 40px;\n	color: var(--ink);\n}\n.dve-backstage-content h2 {\n	margin: 0 0 20px;\n	font-size: 30px;\n	font-weight: 300;\n}\n.dve-backstage-content h3 {\n	margin: 24px 0 10px;\n	font-size: 15px;\n	font-weight: 600;\n}\n.dve-backstage-facts {\n	display: grid;\n	grid-template-columns: max-content minmax(0, 1fr);\n	gap: 6px 24px;\n	margin: 0;\n}\n.dve-backstage-facts dt {\n	color: var(--muted);\n}\n.dve-backstage-facts dd {\n	margin: 0;\n	overflow-wrap: anywhere;\n}\n.dve-compatibility-notes {\n	display: grid;\n	gap: 8px;\n	max-width: 760px;\n	margin: 0;\n	padding: 0;\n	list-style: none;\n}\n.dve-compatibility-notes li {\n	display: flex;\n	gap: 8px;\n	padding: 10px 12px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n	line-height: 1.45;\n}\n.dve-compatibility-notes .dve-icon {\n	margin-top: 2px;\n	color: #b7791f;\n}\n.dve-backstage-tile {\n	display: inline-flex;\n	flex-direction: column;\n	gap: 8px;\n	padding: 8px;\n	border: 1px solid transparent;\n	border-radius: 6px;\n	background: none;\n	color: var(--ink);\n	font: inherit;\n	cursor: pointer;\n}\n.dve-backstage-tile:hover {\n	border-color: var(--line);\n	background: var(--word-soft);\n}\n.dve-backstage-tile-preview {\n	width: 150px;\n	height: 190px;\n	border: 1px solid var(--line);\n	background: #fff;\n	box-shadow: 0 1px 3px #0002;\n}\n.dve-backstage-primary {\n	padding: 8px 18px;\n	border: 0;\n	border-radius: 4px;\n	background: var(--word);\n	color: var(--dve-primary-foreground);\n	font: inherit;\n	cursor: pointer;\n}\n.dve-backstage-muted {\n	color: var(--muted);\n}\n\n.dve-backstage-title {\n	margin: 0 0 4px;\n	font-size: 26px;\n	font-weight: 400;\n	overflow-wrap: anywhere;\n}\n.dve-backstage-columns {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr) 300px;\n	gap: 40px;\n	align-items: start;\n}\n.dve-backstage-properties {\n	padding: 4px 0 0 24px;\n	border-left: 1px solid var(--line);\n}\n.dve-backstage-properties h3 {\n	margin-top: 0;\n}\n.dve-backstage-card {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: 24px;\n	max-width: 760px;\n	margin-bottom: 12px;\n	padding: 14px 18px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n}\n.dve-backstage-card h3 {\n	margin: 0 0 4px;\n}\n.dve-backstage-card p {\n	margin: 0;\n}\n.dve-backstage-field {\n	display: grid;\n	gap: 4px;\n	max-width: 420px;\n	margin-bottom: 14px;\n	color: var(--muted);\n	font-size: 12px;\n}\n.dve-backstage-field input,\n.dve-backstage-field select {\n	height: 32px;\n	padding: 0 8px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font:\n		14px 'Segoe UI',\n		Arial,\n		sans-serif;\n}\n.dve-backstage-home-actions {\n	display: flex;\n	flex-wrap: wrap;\n	gap: 12px;\n	margin: 24px 0;\n}\n.dve-backstage-toggle {\n	display: flex;\n	align-items: center;\n	gap: 12px;\n}\n.dve-backstage-toggle input {\n	width: 18px;\n	height: 18px;\n}\n@media (max-width: 760px) {\n	.dve-backstage-content {\n		padding: 20px;\n	}\n	.dve-backstage-card {\n		align-items: stretch;\n		flex-direction: column;\n	}\n	.dve-backstage-columns {\n		grid-template-columns: minmax(0, 1fr);\n	}\n	.dve-backstage-properties {\n		padding-left: 0;\n		border-left: 0;\n	}\n}\n\n/* Customize Ribbon: one block per tab, one fieldset per group, a checkbox per command. */\n.dve-customize-tab h3 {\n	margin: 18px 0 6px;\n}\n.dve-customize-group {\n	margin: 0 0 8px;\n	padding: 6px 10px 8px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n}\n.dve-customize-group legend {\n	padding: 0 4px;\n	color: var(--muted);\n	font-size: 12px;\n}\n.dve-customize-row {\n	display: inline-flex;\n	align-items: center;\n	gap: 6px;\n	min-width: 180px;\n	padding: 2px 8px 2px 0;\n	font-size: 13px;\n}\n";
+var backstage_default = "/* Backstage: the shared office-ui-backstage draws the frame; these colour it and style the pages. */\n.dve-backstage {\n	--office-backstage-nav-width: 220px;\n	--office-backstage-nav-background: var(--word);\n	--office-backstage-nav-foreground: var(--dve-primary-foreground);\n	--office-backstage-item-hover: var(--word-strong);\n	z-index: 40;\n	background: var(--surface);\n}\n.dve-backstage-content {\n	overflow: auto;\n	padding: 28px 40px;\n	color: var(--ink);\n}\n.dve-backstage-content h2 {\n	margin: 0 0 20px;\n	font-size: 30px;\n	font-weight: 300;\n}\n.dve-backstage-content h3 {\n	margin: 24px 0 10px;\n	font-size: 15px;\n	font-weight: 600;\n}\n.dve-backstage-facts {\n	display: grid;\n	grid-template-columns: max-content minmax(0, 1fr);\n	gap: 6px 24px;\n	margin: 0;\n}\n.dve-backstage-facts dt {\n	color: var(--muted);\n}\n.dve-backstage-facts dd {\n	margin: 0;\n	overflow-wrap: anywhere;\n}\n.dve-compatibility-notes {\n	display: grid;\n	gap: 8px;\n	max-width: 760px;\n	margin: 0;\n	padding: 0;\n	list-style: none;\n}\n.dve-compatibility-notes li {\n	display: flex;\n	gap: 8px;\n	padding: 10px 12px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n	line-height: 1.45;\n}\n.dve-compatibility-notes .dve-icon {\n	margin-top: 2px;\n	color: #b7791f;\n}\n.dve-backstage-tile {\n	display: inline-flex;\n	flex-direction: column;\n	gap: 8px;\n	padding: 8px;\n	border: 1px solid transparent;\n	border-radius: 6px;\n	background: none;\n	color: var(--ink);\n	font: inherit;\n	cursor: pointer;\n}\n.dve-backstage-tile:hover {\n	border-color: var(--line);\n	background: var(--word-soft);\n}\n.dve-backstage-tile-preview {\n	width: 150px;\n	height: 190px;\n	border: 1px solid var(--line);\n	background: #fff;\n	box-shadow: 0 1px 3px #0002;\n}\n.dve-backstage-primary {\n	padding: 8px 18px;\n	border: 0;\n	border-radius: 4px;\n	background: var(--word);\n	color: var(--dve-primary-foreground);\n	font: inherit;\n	cursor: pointer;\n}\n.dve-backstage-muted {\n	color: var(--muted);\n}\n\n.dve-backstage-title {\n	margin: 0 0 4px;\n	font-size: 26px;\n	font-weight: 400;\n	overflow-wrap: anywhere;\n}\n.dve-backstage-columns {\n	display: grid;\n	grid-template-columns: minmax(0, 1fr) 300px;\n	gap: 40px;\n	align-items: start;\n}\n.dve-backstage-properties {\n	padding: 4px 0 0 24px;\n	border-left: 1px solid var(--line);\n}\n.dve-backstage-properties h3 {\n	margin-top: 0;\n}\n.dve-backstage-card {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: 24px;\n	max-width: 760px;\n	margin-bottom: 12px;\n	padding: 14px 18px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n}\n.dve-backstage-card h3 {\n	margin: 0 0 4px;\n}\n.dve-backstage-card p {\n	margin: 0;\n}\n.dve-backstage-field {\n	display: grid;\n	gap: 4px;\n	max-width: 420px;\n	margin-bottom: 14px;\n	color: var(--muted);\n	font-size: 12px;\n}\n.dve-backstage-field input,\n.dve-backstage-field select {\n	height: 32px;\n	padding: 0 8px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font:\n		14px 'Segoe UI',\n		Arial,\n		sans-serif;\n}\n.dve-backstage-home-actions {\n	display: flex;\n	flex-wrap: wrap;\n	gap: 12px;\n	margin: 24px 0;\n}\n.dve-backstage-toggle {\n	display: flex;\n	align-items: center;\n	gap: 12px;\n}\n.dve-backstage-toggle input {\n	width: 18px;\n	height: 18px;\n}\n@media (max-width: 760px) {\n	.dve-backstage-content {\n		padding: 20px;\n	}\n	.dve-backstage-card {\n		align-items: stretch;\n		flex-direction: column;\n	}\n	.dve-backstage-columns {\n		grid-template-columns: minmax(0, 1fr);\n	}\n	.dve-backstage-properties {\n		padding-left: 0;\n		border-left: 0;\n	}\n}\n\n/* File > Options > Customize Ribbon: one block per tab, one fieldset per group, a checkbox per command. */\n.dve-options-note {\n	margin: 0 0 8px;\n	color: var(--muted);\n	font-size: 11px;\n}\n.dve-options-action {\n	margin: 0 0 8px;\n	padding: 6px 11px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: transparent;\n	color: inherit;\n	font: inherit;\n	font-size: 12px;\n	cursor: pointer;\n}\n.dve-customize-tab h3 {\n	margin: 14px 0 4px;\n	padding-bottom: 2px;\n	border-bottom: 1px solid var(--line);\n	color: var(--muted);\n	font-size: 10px;\n	font-weight: 700;\n	letter-spacing: 0.04em;\n	text-transform: uppercase;\n}\n.dve-customize-group {\n	margin: 0 0 8px;\n	padding: 6px 10px 8px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n}\n.dve-customize-group legend {\n	padding: 0 4px;\n	color: var(--muted);\n	font-size: 11px;\n}\n.dve-customize-row {\n	display: inline-flex;\n	align-items: center;\n	gap: 6px;\n	min-width: 180px;\n	padding: 2px 8px 2px 0;\n	font-size: 12px;\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/docx/styles/status-dialogs.css?raw
 var status_dialogs_default = "/* Status bar: drawn by the shared office-ui-status-bar; this only places it in the frame. */\n.dve-status {\n	display: block;\n	flex: none;\n	min-width: 0;\n	border-top: 1px solid var(--line);\n}\n\n@media (max-width: 760px) {\n	.dve-backstage-content {\n		padding: 20px;\n	}\n}\n\n/* Dialogs: the shared office-ui-dialog draws the modal frame; these style the fields inside it. */\n.dve-dialog {\n	--office-dialog-width: min(440px, calc(100vw - 32px));\n}\n/* The fields are the dialog's light-DOM children, laid out in the shared body. */\n.dve-dialog > :not([slot]) + :not([slot]) {\n	margin-top: 10px;\n}\n.dve-dialog label {\n	display: grid;\n	gap: 4px;\n	color: var(--muted);\n	font-size: 12px;\n}\n.dve-dialog input,\n.dve-dialog select {\n	height: 30px;\n	padding: 0 8px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font: inherit;\n}\n.dve-dialog-actions {\n	display: flex;\n	justify-content: flex-end;\n	gap: 8px;\n}\n.dve-dialog-actions button {\n	min-height: 30px;\n	padding: 0 14px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font: inherit;\n	cursor: pointer;\n}\n.dve-dialog-actions .dve-dialog-primary {\n	border-color: var(--word);\n	background: var(--word);\n	color: var(--dve-primary-foreground);\n}\n";
@@ -18137,6 +18359,12 @@ function createPrintLayoutController(scrollContainer, onRequestCursor, pictureUr
         pendingModel = null;
       }
     },
+    relayoutNow(model) {
+      if (timer) clearTimeout(timer);
+      timer = void 0;
+      pendingModel = null;
+      relayout(model);
+    },
     scheduleRelayout(model) {
       pendingModel = model;
       if (timer !== void 0) return;
@@ -18520,6 +18748,7 @@ function createPrintEditingBridge(pages, paper, getView, resolveHit, scrollConta
   let nativeX = 0;
   let nativeY = 0;
   let dragging = false;
+  let skipScroll = false;
   let previousDoc;
   let previousHead = -1;
   let preferredPage;
@@ -18595,7 +18824,9 @@ function createPrintEditingBridge(pages, paper, getView, resolveHit, scrollConta
         marker.style.background = "transparent";
         marker.style.animation = "none";
       }
-      if (!dragging && !view.composing && (previousDoc !== view.state.doc || previousHead !== head))
+      const settle = skipScroll;
+      skipScroll = false;
+      if (!dragging && !settle && !view.composing && (previousDoc !== view.state.doc || previousHead !== head))
         marker.scrollIntoView?.({ block: "nearest", inline: "nearest" });
       previousDoc = view.state.doc;
       previousHead = head;
@@ -18636,9 +18867,30 @@ function createPrintEditingBridge(pages, paper, getView, resolveHit, scrollConta
     const root = pages.getRootNode();
     const target = root.elementFromPoint?.(event.clientX, event.clientY);
     const line = target?.closest(".dve-print-line[data-block-id]");
-    if (!line || !pages.contains(line)) return void 0;
+    if (line && pages.contains(line)) {
+      preferredPage = line.closest(".dve-print-page")?.dataset.pageIndex;
+      return resolveHit(target, event.clientX) ?? void 0;
+    }
+    const origin = event.target instanceof Element ? event.target : target;
+    if (origin?.closest('button, a, input, textarea, select, [contenteditable="true"]'))
+      return void 0;
+    const view = getView();
+    if (!view || view.isDestroyed) return void 0;
+    index.update(view.state.doc);
+    const nearest = index.nearest(event.clientX, event.clientY);
+    if (!nearest) return void 0;
+    preferredPage = nearest.closest(".dve-print-page")?.dataset.pageIndex;
+    return resolveHit(nearest, event.clientX) ?? void 0;
+  }
+  function selectNearest(x, y) {
+    const view = getView();
+    if (!active || !view || view.isDestroyed) return false;
+    index.update(view.state.doc);
+    const line = index.nearest(x, y);
+    const target = line && resolveHit(line, x);
+    if (!line || !target) return false;
     preferredPage = line.closest(".dve-print-page")?.dataset.pageIndex;
-    return resolveHit(target, event.clientX) ?? void 0;
+    return select2(target.blockId, target.offset);
   }
   function extendAt(x, y) {
     const view = getView();
@@ -18657,6 +18909,7 @@ function createPrintEditingBridge(pages, paper, getView, resolveHit, scrollConta
     dragScroll.update(event.clientX, event.clientY);
   }
   function up() {
+    if (dragging) skipScroll = true;
     dragging = false;
     dragScroll.stop();
     window.removeEventListener("pointermove", move);
@@ -18765,7 +19018,8 @@ function createPrintEditingBridge(pages, paper, getView, resolveHit, scrollConta
       previousDoc = void 0;
     },
     refresh,
-    select: select2
+    select: select2,
+    selectNearest
   };
 }
 function moveCursorToBlock(view, blockId, offset) {
@@ -19092,79 +19346,6 @@ function icon(name) {
   svg.append(path);
   return svg;
 }
-
-// src/docx/backstage-options.ts
-function renderOptions({ handlers, t, content }) {
-  const current2 = handlers.options();
-  const heading2 = (text, tag) => {
-    const el = document.createElement(tag);
-    el.textContent = t(text);
-    return el;
-  };
-  const field2 = (text, control) => {
-    const label = document.createElement("label");
-    label.className = "dve-backstage-field";
-    const caption = document.createElement("span");
-    caption.textContent = t(text);
-    control.setAttribute("aria-label", t(text));
-    label.append(caption, control);
-    return label;
-  };
-  const select2 = (key2, values2) => {
-    const el = document.createElement("select");
-    for (const [value, text] of values2) el.append(new Option(t(text), value));
-    el.value = current2[key2];
-    el.addEventListener("change", () => handlers.setOption(key2, el.value));
-    return el;
-  };
-  const author = document.createElement("input");
-  author.type = "text";
-  author.value = current2.author;
-  author.addEventListener("change", () => handlers.setOption("author", author.value));
-  const language = select2("locale", [
-    ["en", "English"],
-    ["fr", "Fran\xE7ais"],
-    ["de", "Deutsch"],
-    ["es", "Espa\xF1ol"],
-    ["zh-CN", "\u7B80\u4F53\u4E2D\u6587"]
-  ]);
-  const theme = select2("theme", [
-    ["auto", "Automatic"],
-    ["light", "Light"],
-    ["dark", "Dark"]
-  ]);
-  if (!theme.value) theme.value = "auto";
-  const controls = [];
-  for (const [key2, label] of [
-    ["spellCheck", "Spelling"],
-    ["showRuler", "Ruler"],
-    ["showMarks", "Show paragraph marks"],
-    ["showThumbnails", "Page thumbnails"]
-  ]) {
-    if (current2[key2] === void 0) continue;
-    const input = document.createElement("input");
-    input.type = "checkbox";
-    input.checked = current2[key2];
-    input.addEventListener("change", () => handlers.setOption(key2, String(input.checked)));
-    const row3 = field2(label, input);
-    row3.classList.add("dve-backstage-toggle");
-    controls.push(row3);
-  }
-  const note = document.createElement("p");
-  note.className = "dve-backstage-muted";
-  note.textContent = t("Options apply to this editor and are not stored between sessions.");
-  content.replaceChildren(
-    heading2("Options", "h2"),
-    heading2("General", "h3"),
-    field2("Display language", language),
-    field2("Theme", theme),
-    field2("Author name", author),
-    ...controls.length ? [heading2("View", "h3"), ...controls] : [],
-    note
-  );
-}
-
-// src/docx/backstage-pages.ts
 var heading = (text, level = "h2") => {
   const element = document.createElement(level);
   element.textContent = text;
@@ -19398,7 +19579,9 @@ function renderExport({ handlers, t, content }) {
     )
   );
 }
-function renderCustomize({ handlers, t, content }) {
+
+// src/docx/backstage-customize.ts
+function renderCustomizeRibbon(host, handlers, t) {
   const ribbon = handlers.ribbon();
   const hidden = new Set(handlers.hiddenActions());
   const seen = /* @__PURE__ */ new Set();
@@ -19408,7 +19591,9 @@ function renderCustomize({ handlers, t, content }) {
   for (const panel of ribbon ? panelsOf(ribbon) : []) {
     const tabSection = document.createElement("section");
     tabSection.className = "dve-customize-tab";
-    tabSection.append(heading(panel.dataset.label ?? "", "h3"));
+    const title = document.createElement("h3");
+    title.textContent = panel.dataset.label ?? "";
+    tabSection.append(title);
     for (const group3 of panel.querySelectorAll(".ribbon-group")) {
       const list = document.createElement("fieldset");
       list.className = "dve-customize-group";
@@ -19437,16 +19622,185 @@ function renderCustomize({ handlers, t, content }) {
     }
     if (tabSection.children.length > 1) sections.push(tabSection);
   }
-  const reset = primary(t("Reset all customizations"), () => {
+  const note = document.createElement("p");
+  note.className = "dve-options-note";
+  note.textContent = t("Choose which commands the ribbon shows.");
+  const reset = document.createElement("button");
+  reset.type = "button";
+  reset.className = "dve-options-action";
+  reset.textContent = t("Reset all customizations");
+  reset.addEventListener("click", () => {
     for (const box2 of boxes) box2.input.checked = true;
     commit();
   });
-  content.replaceChildren(
-    heading(t("Customize Ribbon")),
-    paragraph(t("Choose which commands the ribbon shows."), "dve-backstage-muted"),
-    reset,
-    ...sections
-  );
+  host.replaceChildren(note, reset, ...sections);
+}
+
+// src/docx/backstage-options.ts
+var LANGUAGES = [
+  ["en", "English"],
+  ["fr", "Fran\xE7ais"],
+  ["de", "Deutsch"],
+  ["es", "Espa\xF1ol"],
+  ["zh-CN", "\u7B80\u4F53\u4E2D\u6587"]
+];
+var BOOLEAN_KEYS = [
+  "spellCheck",
+  "showRuler",
+  "showMarks",
+  "showThumbnails"
+];
+var KEYS = ["locale", "theme", "author", ...BOOLEAN_KEYS];
+function wordCategories(context2, current2) {
+  const { t } = context2;
+  const toggle = (key2, label) => current2[key2] === void 0 ? [] : [{ kind: "toggle", key: key2, label: t(label) }];
+  const display = [
+    {
+      id: "page",
+      title: t("Page display options"),
+      controls: [...toggle("showRuler", "Ruler"), ...toggle("showThumbnails", "Page thumbnails")]
+    },
+    {
+      id: "marks",
+      title: t("Formatting marks"),
+      controls: toggle("showMarks", "Show paragraph marks")
+    }
+  ].filter((section3) => section3.controls.length);
+  const spelling = toggle("spellCheck", "Check spelling as you type");
+  return [
+    {
+      id: "general",
+      label: t("General"),
+      description: optionText(context2, "General options for working with {product}."),
+      sections: [
+        userInterfaceSection(context2),
+        personalizeSection(
+          context2,
+          [
+            { kind: "text", key: "author", label: t("User name"), maxLength: 64 },
+            {
+              kind: "select",
+              key: "theme",
+              label: t("Office Theme"),
+              choices: [
+                { value: "auto", label: t("Automatic") },
+                { value: "light", label: t("Light") },
+                { value: "dark", label: t("Dark") }
+              ]
+            }
+          ],
+          t("Options apply to this editor and are not stored between sessions.")
+        )
+      ]
+    },
+    {
+      id: "display",
+      label: t("Display"),
+      description: t("Change how document content is displayed on the screen."),
+      sections: display,
+      ...display.length ? {} : { disabled: t("Not available yet. The editing behaviour is fixed.") }
+    },
+    spelling.length ? {
+      id: "proofing",
+      label: t("Proofing"),
+      description: optionText(context2, "Change how {product} corrects and formats your text."),
+      sections: [{ id: "spelling", title: t("Spelling"), controls: spelling }]
+    } : unavailableCategory(context2, "proofing"),
+    unavailableCategory(context2, "save"),
+    {
+      id: "language",
+      label: t("Language"),
+      description: t("Set the Office Language Preferences."),
+      sections: [
+        {
+          id: "display-language",
+          title: t("Office display language"),
+          description: t("Choose the language for menus, buttons and messages."),
+          controls: [
+            {
+              kind: "select",
+              key: "locale",
+              label: t("Display language"),
+              choices: LANGUAGES.map(([value, label]) => ({ value, label }))
+            }
+          ]
+        }
+      ]
+    },
+    unavailableCategory(context2, "accessibility"),
+    unavailableCategory(context2, "advanced"),
+    {
+      id: "ribbon",
+      label: t("Customize Ribbon"),
+      description: t("Customize the Ribbon and keyboard shortcuts."),
+      sections: [],
+      custom: true
+    },
+    unavailableCategory(context2, "qat"),
+    unavailableCategory(context2, "addins"),
+    unavailableCategory(context2, "trust")
+  ];
+}
+function dialogValues(current2) {
+  const values2 = {
+    locale: current2.locale,
+    theme: current2.theme === "light" || current2.theme === "dark" ? current2.theme : "auto",
+    author: current2.author
+  };
+  for (const key2 of BOOLEAN_KEYS) {
+    const value = current2[key2];
+    if (value !== void 0) values2[key2] = value;
+  }
+  return values2;
+}
+function createWordOptions(handlers, t) {
+  defineOptionsDialog();
+  const element = document.createElement("office-ui-options-dialog");
+  element.className = "dve-options";
+  const ribbon = document.createElement("div");
+  ribbon.slot = "pane-ribbon";
+  ribbon.className = "dve-options-ribbon";
+  element.append(ribbon);
+  const context2 = { product: "Word", t };
+  let hiddenOnOpen = [];
+  const build2 = () => {
+    const current2 = handlers.options();
+    element.setAttribute("heading", t("Options"));
+    element.labels = optionsLabels(context2);
+    element.categories = wordCategories(context2, current2);
+    element.values = dialogValues(current2);
+    element.defaults = {
+      theme: "auto",
+      ...Object.fromEntries(
+        BOOLEAN_KEYS.filter((key2) => current2[key2] !== void 0).map((key2) => [
+          key2,
+          key2 === "spellCheck"
+        ])
+      )
+    };
+  };
+  element.addEventListener("office-options-change", (event) => {
+    const { values: values2, changed } = event.detail;
+    for (const key2 of KEYS) if (changed.includes(key2)) handlers.setOption(key2, String(values2[key2]));
+    build2();
+  });
+  element.addEventListener("office-options-cancel", () => {
+    if (hiddenOnOpen.join() !== handlers.hiddenActions().join())
+      handlers.setHiddenActions([...hiddenOnOpen]);
+  });
+  for (const name of ["office-options-change", "office-options-cancel"])
+    element.addEventListener(name, () => setTimeout(() => handlers.close(), 0));
+  return {
+    element,
+    show(category = "general") {
+      build2();
+      hiddenOnOpen = [...handlers.hiddenActions()];
+      renderCustomizeRibbon(ribbon, handlers, t);
+      element.category = category;
+      element.show();
+    },
+    relocalize: build2
+  };
 }
 
 // src/docx/backstage.ts
@@ -19459,8 +19813,7 @@ var NAV = [
   { id: "saveAs", label: "Save As" },
   { id: "print", label: "Print" },
   { id: "export", label: "Export" },
-  { id: "options", label: "Options", footer: true },
-  { id: "customize", label: "Customize Ribbon", footer: true }
+  { id: "options", label: "Options", footer: true }
 ];
 var RENDERERS = {
   home: renderHome,
@@ -19469,9 +19822,7 @@ var RENDERERS = {
   open: renderOpen,
   saveAs: renderSaveAs,
   print: renderPrint,
-  export: renderExport,
-  options: renderOptions,
-  customize: renderCustomize
+  export: renderExport
 };
 function createBackstage(handlers) {
   defineBackstage();
@@ -19481,7 +19832,7 @@ function createBackstage(handlers) {
   const t = (text) => translateUiText(element, text);
   const pages = /* @__PURE__ */ new Map();
   for (const { id } of NAV) {
-    if (id === "save") continue;
+    if (id === "save" || id === "options") continue;
     const page2 = document.createElement("div");
     page2.className = "dve-backstage-content";
     page2.dataset.backstagePage = id;
@@ -19490,25 +19841,18 @@ function createBackstage(handlers) {
     element.append(page2);
   }
   let current2 = "info";
-  const pageHandlers = {
-    ...handlers,
-    setOption(key2, value) {
-      const content = pages.get(current2);
-      const active = element.getRootNode().activeElement;
-      const label = active instanceof HTMLElement && content.contains(active) ? active.getAttribute("aria-label") : null;
-      handlers.setOption(key2, value);
-      queueMicrotask(() => {
-        if (!element.open) return;
-        draw(current2);
-        if (label)
-          [...content.querySelectorAll("[aria-label]")].find((control) => control.getAttribute("aria-label") === label)?.focus();
-      });
-    }
-  };
+  const options = createWordOptions(handlers, t);
   const draw = (page2) => {
     current2 = page2;
-    const content = pages.get(page2);
-    RENDERERS[page2]({ handlers: pageHandlers, t, content });
+    RENDERERS[page2]({ handlers, t, content: pages.get(page2) });
+  };
+  const showOptions = (category) => {
+    if (element.open) {
+      element.open = false;
+      focus.close();
+    }
+    handlers.close();
+    options.show(category);
   };
   const localize = () => {
     const locale = normalizeEditorLocale(element.dataset.editorLocale);
@@ -19527,6 +19871,9 @@ function createBackstage(handlers) {
       event.preventDefault();
       handlers.close();
       handlers.fileCommand("save");
+    } else if (id === "options") {
+      event.preventDefault();
+      showOptions();
     } else draw(id);
   });
   element.addEventListener("office-backstage-close", (event) => {
@@ -19536,7 +19883,12 @@ function createBackstage(handlers) {
   });
   return {
     element,
+    optionsDialog: options.element,
     open(page2 = "home") {
+      if (page2 === "options" || page2 === "customize") {
+        showOptions(page2 === "customize" ? "ribbon" : void 0);
+        return;
+      }
       focus.open();
       draw(page2);
       element.show(page2);
@@ -19550,6 +19902,7 @@ function createBackstage(handlers) {
     },
     relocalize() {
       localize();
+      options.relocalize();
       if (element.open) draw(current2);
     }
   };
@@ -19640,97 +19993,6 @@ function createRibbonActions(handlers) {
   };
 }
 
-// src/docx/status-bar.ts
-var ZOOM_MIN = 50;
-var ZOOM_MAX = 200;
-var LAYOUT_ICONS = {
-  webLayout: "M3 5h14v10H3z M3 8h14",
-  printLayout: "M5 3h10v14H5z M8 7h4 M8 10h4"
-};
-function createStatusBar(handlers) {
-  defineStatusBar();
-  defineZoomSlider();
-  for (const [name, d] of Object.entries(LAYOUT_ICONS)) registerIcon(name, d);
-  const element = document.createElement("office-ui-status-bar");
-  element.className = "dve-status";
-  const slider = document.createElement("office-ui-zoom-slider");
-  slider.slot = "end";
-  slider.setAttribute("min", String(ZOOM_MIN));
-  slider.setAttribute("max", String(ZOOM_MAX));
-  slider.className = "dve-zoom";
-  element.append(slider);
-  const model = { page: "", words: "", language: "", notes: 0, mode: "draft", zoom: 100 };
-  const locale = () => normalizeEditorLocale(element.dataset.editorLocale);
-  const render = () => {
-    const t = locale();
-    const noteKey = model.notes === 1 ? "status.note" : "status.notes";
-    const layout = (mode, key2) => ({
-      id: mode,
-      icon: mode === "draft" ? "webLayout" : "printLayout",
-      label: translate(t, key2),
-      pressed: model.mode === mode
-    });
-    element.state = {
-      items: [
-        {
-          id: "page",
-          text: model.page,
-          title: translate(t, "nav.approximate"),
-          live: true
-        },
-        { id: "words", text: model.words },
-        ...model.language ? [{ id: "language", text: model.language, narrowHide: true }] : []
-      ],
-      toggles: [
-        {
-          id: "notes",
-          icon: "warning",
-          label: translate(t, noteKey).replace("{count}", String(model.notes)),
-          text: translate(t, noteKey).replace("{count}", String(model.notes)),
-          hidden: model.notes === 0
-        }
-      ],
-      views: [layout("draft", "Web Layout"), layout("print", "Print Layout")]
-    };
-    slider.setAttribute("out-label", translate(t, "Zoom out"));
-    slider.setAttribute("in-label", translate(t, "Zoom in"));
-    slider.setAttribute("slider-label", translate(t, "Zoom level"));
-    slider.value = model.zoom;
-  };
-  element.addEventListener("office-status-activate", (event) => {
-    const { id } = event.detail;
-    if (id === "notes") handlers.showCompatibilityNotes();
-    else if (id === "draft" || id === "print") handlers.setViewMode(id);
-  });
-  slider.addEventListener("input", () => handlers.setZoom(slider.value));
-  render();
-  return {
-    element,
-    setPageAndWords(pageText, wordText) {
-      model.page = pageText;
-      model.words = wordText;
-      render();
-    },
-    setLanguage(value) {
-      model.language = value;
-      render();
-    },
-    setNoteCount(count) {
-      model.notes = count;
-      render();
-    },
-    setViewMode(mode) {
-      model.mode = mode;
-      render();
-    },
-    setZoom(value) {
-      model.zoom = value;
-      render();
-    },
-    relocalize: render
-  };
-}
-
 // src/docx/title-bar.ts
 var SAVE_STATE_TEXT = {
   saved: "Saved",
@@ -19912,7 +20174,12 @@ var EditorChrome = class {
   /** Adds the chrome around an existing frame: title bar first, status bar and backstage last. */
   mount(frame, ribbon) {
     frame.prepend(this.titleBar.element);
-    frame.append(this.statusBar.element, this.backstage.element, this.fileInput);
+    frame.append(
+      this.statusBar.element,
+      this.backstage.element,
+      this.backstage.optionsDialog,
+      this.fileInput
+    );
     this.ribbon = ribbon;
     ribbon.append(this.ribbonActions.element);
     ribbon.addEventListener("office-ribbon-file", () => this.backstage.open("home"));
@@ -21034,6 +21301,51 @@ var HeadingNavigator = class {
     }
   }
 };
+var clamp = (value, low, high) => Math.min(Math.max(value, low), Math.max(low, high));
+function attachCanvasClick(core) {
+  const canvas = core.shell.canvas;
+  if (!canvas) return;
+  const editable2 = () => {
+    const view = core.view;
+    return view && !view.isDestroyed && view.editable && !core.readOnly && core.targetView() === view ? view : void 0;
+  };
+  canvas.addEventListener("pointerdown", (event) => {
+    const view = editable2();
+    if (!view || event.button !== 0) return;
+    if (event.target !== canvas && event.target !== core.shell.paper) return;
+    const frame = canvas.getBoundingClientRect();
+    if (event.clientX - frame.left >= canvas.clientWidth || event.clientY - frame.top >= canvas.clientHeight)
+      return;
+    if (core.pages.viewMode === "print") {
+      if (core.shell.printEditing?.selectNearest(event.clientX, event.clientY))
+        event.preventDefault();
+      return;
+    }
+    const box2 = view.dom.getBoundingClientRect();
+    const found = view.posAtCoords({
+      left: clamp(event.clientX, box2.left + 1, box2.right - 1),
+      top: clamp(event.clientY, box2.top + 1, box2.bottom - 1)
+    });
+    if (!found) return;
+    event.preventDefault();
+    view.dispatch(
+      view.state.tr.setSelection(TextSelection.near(view.state.doc.resolve(found.pos)))
+    );
+    view.focus();
+  });
+  let armed2 = 0;
+  canvas.addEventListener(
+    "pointerdown",
+    (event) => {
+      const target = event.target instanceof Element ? event.target : null;
+      armed2 = editable2() && event.button === 0 && !target?.closest('[data-read-only="true"]') ? Date.now() + 1e3 : 0;
+    },
+    { capture: true }
+  );
+  canvas.addEventListener("focus", (event) => {
+    if (event.target === canvas && Date.now() < armed2) editable2()?.focus();
+  });
+}
 
 // src/docx/context-menu-items.ts
 var TABLE_ITEMS = [
@@ -21297,6 +21609,7 @@ function attachEditorInteractions(core, frame) {
   const { element, shell } = core;
   const activeElement = () => element.shadowRoot?.activeElement ?? null;
   shell.canvas.tabIndex = -1;
+  attachCanvasClick(core);
   const toDocument = () => {
     const view = core.targetView();
     if (view?.editable) focusView(view);
@@ -21907,7 +22220,7 @@ function renderDocument(core) {
   core.detachedState = void 0;
   core.inserts.syncPaper();
   core.parts.render(canvas, paper);
-  core.pages.relayout();
+  core.pages.relayout(true);
   core.refreshControls();
   core.scheduleCollaborationSend();
 }