ooxml-ui 1.1.0 → 1.2.0

package/dist/docx.js

@@ -1,14 +1,14 @@
-import { defineSmartArt } from './chunk-BEN3453I.js';
-import { shadcnBridge } from './chunk-X7RINDJQ.js';
-import { createRibbonOverflow, defineRibbon, defineDialog, defineSearchField, defineSwitch, defineTitleBar, defineBackstage, defineStatusBar, defineZoomSlider, defineContextMenu, runKeyTips, assignKeyTips } from './chunk-M5DTJSOV.js';
+import { defineSmartArt } from './chunk-Y2E22JVO.js';
+import { shadcnBridge } from './chunk-JAJFLFAV.js';
+import { createRibbonOverflow, defineRibbon, defineRuler, defineCommentsPane, defineDialog, defineSearchField, defineSwitch, defineTitleBar, defineBackstage, defineStatusBar, defineZoomSlider, defineContextMenu, runKeyTips, assignKeyTips } from './chunk-7FNDOWTX.js';
 import { registerIcon } from './chunk-BOX43CZD.js';
-import './chunk-3FPW7M6U.js';
-import './chunk-USDLALB5.js';
-import './chunk-JFJXBYRD.js';
+import './chunk-VUB44CAJ.js';
+import './chunk-YK2DPYMU.js';
+import './chunk-XNCWB2X6.js';
 import { 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, reviewParagraphFormatting, resolveThemeColorReference, lineSpacingValue, isStHighlightColor, transformCase, DEFAULT_TABLE_BORDERS, parseLineSpacingValue, twipsAttr, twipsFromPixels, headingLevel, isValidLanguageTag, WORD, isHeadingListKind, fieldName, lineSpacingOptions, halfPointsFromPoints, changeColumnWidth, changeColumnGap, createListDefinition, linkStylesToList, headingListLevels, documentStats } 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, countWords, fieldGuardPlugin, trackChangesPlugin, wordYjsPresencePlugin, 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, resolveComment, replyToComment, CollaborationAuthority } from 'ooxml-core/docx/ui';
+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, countWords, fieldGuardPlugin, 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, 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 { parseOmml, convertOmmlToLatex, convertOmmlToMathMl } from 'ooxml-core/math';
 import { PluginKey, EditorState, Plugin, NodeSelection, TextSelection, Selection } from 'prosemirror-state';
@@ -1267,6 +1267,7 @@ var deRibbon = {
   Reply: "Antworten",
   Resolve: "L\xF6sen",
   Reopen: "Erneut \xF6ffnen",
+  Resolved: "Gel\xF6st",
   Delete: "L\xF6schen",
   "No comments": "Noch keine Kommentare.",
   Tracking: "Nachverfolgung",
@@ -1927,6 +1928,7 @@ var enRibbon = {
   Reply: "Reply",
   Resolve: "Resolve",
   Reopen: "Reopen",
+  Resolved: "Resolved",
   Delete: "Delete",
   "No comments": "No comments yet.",
   Tracking: "Tracking",
@@ -2587,6 +2589,7 @@ var esRibbon = {
   Reply: "Responder",
   Resolve: "Resolver",
   Reopen: "Reabrir",
+  Resolved: "Resuelto",
   Delete: "Eliminar",
   "No comments": "A\xFAn no hay comentarios.",
   Tracking: "Seguimiento",
@@ -3247,6 +3250,7 @@ var frRibbon = {
   Reply: "R\xE9pondre",
   Resolve: "R\xE9soudre",
   Reopen: "Rouvrir",
+  Resolved: "R\xE9solu",
   Delete: "Supprimer",
   "No comments": "Aucun commentaire pour le moment.",
   Tracking: "Suivi",
@@ -3907,6 +3911,7 @@ var zhCNRibbon = {
   Reply: "\u56DE\u590D",
   Resolve: "\u89E3\u51B3",
   Reopen: "\u91CD\u65B0\u6253\u5F00",
+  Resolved: "\u5DF2\u89E3\u51B3",
   Delete: "\u5220\u9664",
   "No comments": "\u6682\u65E0\u6279\u6CE8\u3002",
   Tracking: "\u4FEE\u8BA2",
@@ -4061,8 +4066,18 @@ function localizeElement(root, locale) {
     }
   }
 }
+var controlCache = /* @__PURE__ */ new WeakMap();
 function findLocalizedControl(root, label) {
-  return root.querySelector(`[aria-label="${label}"], [data-localearialabel="${label}"]`);
+  let cache = controlCache.get(root);
+  const cached = cache?.get(label);
+  if (cached?.isConnected && root.contains(cached) && (cached.getAttribute("aria-label") === label || cached.dataset.localearialabel === label))
+    return cached;
+  const found = root.querySelector(`[aria-label="${label}"], [data-localearialabel="${label}"]`);
+  if (found) {
+    if (!cache) controlCache.set(root, cache = /* @__PURE__ */ new Map());
+    cache.set(label, found);
+  }
+  return found;
 }
 
 // src/docx/shell-labels.ts
@@ -4348,9 +4363,9 @@ var schema = new Schema({
         }
         const body = [
           "tbody",
-          ...rows.map((row4) => [
+          ...rows.map((row3) => [
             "tr",
-            ...row4.map((cell) => ["td", cell.text])
+            ...row3.map((cell) => ["td", cell.text])
           ])
         ];
         return ["table", { class: "dve-nested-preview", contenteditable: "false" }, body];
@@ -4366,12 +4381,12 @@ function cellKey(cell) {
 function tableNode(block, paragraphNode2, tableStyles) {
   const columnCount = Math.max(
     1,
-    ...block.rows.map((row4) => row4.reduce((sum, cell) => sum + (cell.gridSpan ?? 1), 0))
+    ...block.rows.map((row3) => row3.reduce((sum, cell) => sum + (cell.gridSpan ?? 1), 0))
   );
-  const rows = block.rows.map((row4, rowIndex) => {
+  const rows = block.rows.map((row3, rowIndex) => {
     const cells = [];
     let gridColumn = 0;
-    row4.forEach((cell, columnIndex) => {
+    row3.forEach((cell, columnIndex) => {
       const column = gridColumn;
       gridColumn += cell.gridSpan ?? 1;
       if (cell.verticalMerge === "continue") return;
@@ -4446,19 +4461,19 @@ function tableNode(block, paragraphNode2, tableStyles) {
 }
 function tableFormattingFromNode(node) {
   const rowProperties = [];
-  node.forEach((row4) => rowProperties.push(structuredClone(row4.attrs.properties ?? {})));
+  node.forEach((row3) => rowProperties.push(structuredClone(row3.attrs.properties ?? {})));
   return {
-    rowProperties: rowProperties.some((row4) => Object.keys(row4).length) ? rowProperties : void 0,
+    rowProperties: rowProperties.some((row3) => Object.keys(row3).length) ? rowProperties : void 0,
     cellMargins: typeof node.attrs.cellMargins === "string" ? JSON.parse(node.attrs.cellMargins) : void 0
   };
 }
 function convertSimpleTable(node, convertParagraph, prior) {
   const priorCells = /* @__PURE__ */ new Map();
-  for (const row4 of prior?.rows ?? []) for (const cell of row4) priorCells.set(cellKey(cell), cell);
+  for (const row3 of prior?.rows ?? []) for (const cell of row3) priorCells.set(cellKey(cell), cell);
   const rows = [];
-  node.forEach((row4) => {
+  node.forEach((row3) => {
     const cells = [];
-    row4.forEach((cell) => {
+    row3.forEach((cell) => {
       const paragraphs = [];
       cell.forEach((paragraph2) => {
         if (paragraph2.type.name === "paragraph") paragraphs.push(convertParagraph(paragraph2));
@@ -4492,9 +4507,9 @@ function convertSimpleTable(node, convertParagraph, prior) {
 function convertMergedTable(node, prior, convertParagraph) {
   const updated = structuredClone(prior);
   const cellByKey = /* @__PURE__ */ new Map();
-  for (const row4 of updated.rows) for (const cell of row4) cellByKey.set(cellKey(cell), cell);
+  for (const row3 of updated.rows) for (const cell of row3) cellByKey.set(cellKey(cell), cell);
   node.forEach(
-    (row4) => row4.forEach((cellNode) => {
+    (row3) => row3.forEach((cellNode) => {
       const target = cellByKey.get(String(cellNode.attrs.sourceCellKey || ""));
       if (!target) return;
       const paragraphs = [];
@@ -4551,14 +4566,14 @@ function sectionBreaksPlugin() {
         const json = state.doc.attrs.sections;
         const sections = typeof json === "string" ? JSON.parse(json) : [];
         if (sections.length < 2) return null;
-        const labels2 = /* @__PURE__ */ new Map();
+        const labels3 = /* @__PURE__ */ new Map();
         sections.slice(0, -1).forEach((section3, index) => {
           const following = sections[index + 1];
-          if (following) labels2.set(section3.endsAtBlockId, BREAK_LABEL[following.type]);
+          if (following) labels3.set(section3.endsAtBlockId, BREAK_LABEL[following.type]);
         });
         const decorations2 = [];
         state.doc.forEach((node, offset) => {
-          const label = labels2.get(String(node.attrs.id));
+          const label = labels3.get(String(node.attrs.id));
           if (label)
             decorations2.push(
               Decoration.node(offset, offset + node.nodeSize, {
@@ -4572,8 +4587,8 @@ function sectionBreaksPlugin() {
     }
   });
 }
-function paragraphNode(paragraph2, labels2, noteNumber) {
-  const label = labels2.get(paragraph2.id);
+function paragraphNode(paragraph2, labels3, noteNumber) {
+  const label = labels3.get(paragraph2.id);
   const children = paragraph2.runs.flatMap((run) => runToInlineNodes(run, noteNumber));
   return schema.node(
     "paragraph",
@@ -4589,7 +4604,7 @@ function paragraphNode(paragraph2, labels2, noteNumber) {
   );
 }
 function modelToDoc(model) {
-  const labels2 = computeListLabels(model);
+  const labels3 = computeListLabels(model);
   const footnoteOrder = numberNotesInOrder(model.blocks, "footnote");
   const endnoteOrder = numberNotesInOrder(model.blocks, "endnote");
   const noteNumber = (kind, id) => {
@@ -4598,10 +4613,10 @@ function modelToDoc(model) {
     return { number, label: formatNoteNumber(number, format) };
   };
   const blocks = model.blocks.map((block) => {
-    if (block.type === "paragraph") return paragraphNode(block, labels2, noteNumber);
+    if (block.type === "paragraph") return paragraphNode(block, labels3, noteNumber);
     return tableNode(
       block,
-      (paragraph2) => paragraphNode(paragraph2, labels2, noteNumber),
+      (paragraph2) => paragraphNode(paragraph2, labels3, noteNumber),
       model.tableStyles
     );
   });
@@ -4666,7 +4681,7 @@ function docToModel(doc, prior) {
     if (block.type === "paragraph") remember(block);
     else {
       priorTables.set(block.id, block);
-      for (const row4 of block.rows) for (const cell of row4) cell.paragraphs.forEach(remember);
+      for (const row3 of block.rows) for (const cell of row3) cell.paragraphs.forEach(remember);
     }
   }
   const convertParagraph = (node) => {
@@ -4968,10 +4983,10 @@ var DOCX_EDITOR_EVENTS = [
 function on(target, name, listener) {
   target.addEventListener(name, (event) => listener(event));
 }
-function emit(target, name, detail, options = {}) {
+function emit(target, name, detail2, options = {}) {
   return target.dispatchEvent(
     new CustomEvent(name, {
-      detail,
+      detail: detail2,
       bubbles: true,
       composed: true,
       ...options
@@ -5435,7 +5450,7 @@ function openColorGridPopover(anchor, choose, options = {}) {
     grid(
       ...THEME.map(([hex, name]) => swatch(hex, name)),
       ...[0, 1, 2, 3, 4].flatMap(
-        (row4) => THEME.map(([, name], column) => swatch(shades[column][row4], name))
+        (row3) => THEME.map(([, name], column) => swatch(shades[column][row3], name))
       )
     ),
     title("Standard Colors"),
@@ -5807,10 +5822,10 @@ function openGallery(anchor, control, kind, commands) {
     words.className = "gallery-words";
     words.append(name);
     if (look.detail) {
-      const detail = document.createElement("span");
-      detail.className = "gallery-detail";
-      detail.textContent = look.detail;
-      words.append(detail);
+      const detail2 = document.createElement("span");
+      detail2.className = "gallery-detail";
+      detail2.textContent = look.detail;
+      words.append(detail2);
     }
     item.append(look.thumb, words);
     item.addEventListener("mousedown", (event) => event.preventDefault());
@@ -6505,8 +6520,8 @@ var languageOptions = [
   ["hi-IN", "Hindi (India)"],
   ["ru-RU", "Russian (Russia)"]
 ];
-function emit2(control, detail) {
-  emit(control, "ribbon-action", detail);
+function emit2(control, detail2) {
+  emit(control, "ribbon-action", detail2);
 }
 function languageControl(label, key2) {
   const wrapper = document.createElement("label");
@@ -7838,15 +7853,15 @@ function runStylesPlugin(getModel, getMode = () => "all") {
           if (block.type.name !== "table") return;
           const table = tables.get(String(block.attrs.id));
           let columnCount = 1;
-          block.forEach((row4) => {
+          block.forEach((row3) => {
             let width = 0;
-            row4.forEach((cell) => width += Number(cell.attrs.colspan) || 1);
+            row3.forEach((cell) => width += Number(cell.attrs.colspan) || 1);
             columnCount = Math.max(columnCount, width);
           });
-          block.forEach((row4, rowOffset, rowIndex) => {
+          block.forEach((row3, rowOffset, rowIndex) => {
             let column = 0;
             const rowStart = blockOffset + 1 + rowOffset + 1;
-            row4.forEach((cell, cellOffset) => {
+            row3.forEach((cell, cellOffset) => {
               const tableStyleRun = table?.style ? resolveTableStyleFormatting(
                 table.style,
                 model.tableStyles,
@@ -9206,7 +9221,7 @@ function readCellFill(ctx, state, scope) {
   const fills = /* @__PURE__ */ new Set();
   const table = state.doc.nodeAt(ctx.tablePos);
   table?.forEach(
-    (row4, _offset, rowIndex) => row4.forEach((cell, _cellOffset, column) => {
+    (row3, _offset, rowIndex) => row3.forEach((cell, _cellOffset, column) => {
       if (scope === "cell" && (rowIndex < ctx.rect.top || rowIndex > ctx.rect.bottom || column < ctx.rect.left || column > ctx.rect.right))
         return;
       const fill = cell.attrs.shadingFill;
@@ -9221,7 +9236,7 @@ function applyCellFill(tr, ctx, scope, fill) {
   const table = tr.doc.nodeAt(ctx.tablePos);
   if (!table) return;
   table.forEach(
-    (row4, rowOffset, rowIndex) => row4.forEach((cell, cellOffset, column) => {
+    (row3, rowOffset, rowIndex) => row3.forEach((cell, cellOffset, column) => {
       if (scope === "cell" && (rowIndex < ctx.rect.top || rowIndex > ctx.rect.bottom || column < ctx.rect.left || column > ctx.rect.right))
         return;
       tr.setNodeMarkup(ctx.tablePos + 2 + rowOffset + cellOffset, void 0, {
@@ -9258,8 +9273,8 @@ function tableBorderContext(state) {
     if (table.attrs.structureEditable === false) return null;
     const tablePos = $from.before(depth);
     const cells = [];
-    table.forEach((row4, rowOffset, rowIndex) => {
-      row4.forEach((cell, cellOffset, column) => {
+    table.forEach((row3, rowOffset, rowIndex) => {
+      row3.forEach((cell, cellOffset, column) => {
         const pos = tablePos + 1 + rowOffset + 1 + cellOffset;
         if (Math.max(from2, pos + 1) <= Math.min(to, pos + cell.nodeSize - 1))
           cells.push({ pos, row: rowIndex, column, node: cell });
@@ -9283,11 +9298,11 @@ function tableBorderContext(state) {
 }
 function edgesOf(preset, rect) {
   const edges = [];
-  for (let row4 = rect.top; row4 <= rect.bottom; row4++)
+  for (let row3 = rect.top; row3 <= rect.bottom; row3++)
     for (let column = rect.left; column <= rect.right; column++) {
       const outside = {
-        top: row4 === rect.top,
-        bottom: row4 === rect.bottom,
+        top: row3 === rect.top,
+        bottom: row3 === rect.bottom,
         left: column === rect.left,
         right: column === rect.right
       };
@@ -9295,13 +9310,13 @@ function edgesOf(preset, rect) {
         const isOutside = outside[side];
         const horizontal = side === "top" || side === "bottom";
         const wanted = preset === "all" || preset === "outside" && isOutside || preset === "insideH" && horizontal && !isOutside || preset === "insideV" && !horizontal && !isOutside || preset === side && isOutside;
-        if (wanted) edges.push({ row: row4, column, side });
+        if (wanted) edges.push({ row: row3, column, side });
       }
     }
   return edges;
 }
-var current = (ctx, state, row4, column) => {
-  const cell = state.doc.nodeAt(ctx.tablePos)?.child(row4).child(column);
+var current = (ctx, state, row3, column) => {
+  const cell = state.doc.nodeAt(ctx.tablePos)?.child(row3).child(column);
   return parse2(cell?.attrs.borders);
 };
 function applyEdits(view, ctx, edits, shading) {
@@ -9326,9 +9341,9 @@ function applyEdits(view, ctx, edits, shading) {
       edit
     ]);
   let rowOffset = ctx.tablePos + 1;
-  table.forEach((row4, _offset, rowIndex) => {
+  table.forEach((row3, _offset, rowIndex) => {
     let cellPos = rowOffset + 1;
-    row4.forEach((cell, _cellOffset, column) => {
+    row3.forEach((cell, _cellOffset, column) => {
       const group3 = grouped.get(`${rowIndex}:${column}`);
       if (group3) {
         const visual = parse2(cell.attrs.borders);
@@ -9350,7 +9365,7 @@ function applyEdits(view, ctx, edits, shading) {
       }
       cellPos += cell.nodeSize;
     });
-    rowOffset += row4.nodeSize;
+    rowOffset += row3.nodeSize;
   });
   if (shading) applyCellFill(tr, ctx, shading.scope, shading.fill);
   if (!tr.docChanged) return false;
@@ -10129,9 +10144,9 @@ function paragraphElement(paragraph2, values2) {
 function blockElement(block, values2) {
   if (block.type === "paragraph") return paragraphElement(block, values2);
   const table = document.createElement("table");
-  for (const row4 of block.rows) {
+  for (const row3 of block.rows) {
     const tr = document.createElement("tr");
-    for (const cell of row4) {
+    for (const cell of row3) {
       const td = document.createElement("td");
       if (cell.gridSpan && cell.gridSpan > 1) td.colSpan = cell.gridSpan;
       for (const paragraph2 of cell.paragraphs) td.append(paragraphElement(paragraph2, values2));
@@ -10150,7 +10165,7 @@ function renderHeaderFooter(content, values2, kind) {
 }
 function floatingPictures(content, page2, anchorTopPx, values2) {
   const paragraphs = content.blocks.flatMap(
-    (block) => block.type === "paragraph" ? [block] : block.rows.flatMap((row4) => row4.flatMap((cell) => cell.paragraphs))
+    (block) => block.type === "paragraph" ? [block] : block.rows.flatMap((row3) => row3.flatMap((cell) => cell.paragraphs))
   );
   const column = { xPx: 0, widthPx: page2.widthPx - page2.marginLeftPx - page2.marginRightPx };
   return paragraphs.flatMap(
@@ -11028,10 +11043,10 @@ function tablePropertiesContext(state) {
     const rows = [];
     const cells = [];
     let pos = $from.start(depth);
-    table.forEach((row4, offset, index) => {
+    table.forEach((row3, offset, index) => {
       if (index >= $from.index(depth) && index <= $to.index(depth))
-        rows.push({ pos: pos + offset, properties: row4.attrs.properties ?? {} });
-      row4.forEach((cell, cellOffset) => {
+        rows.push({ pos: pos + offset, properties: row3.attrs.properties ?? {} });
+      row3.forEach((cell, cellOffset) => {
         const cellPos = pos + offset + 1 + cellOffset;
         if (Math.max(state.selection.from, cellPos + 1) <= Math.min(state.selection.to, cellPos + cell.nodeSize - 1))
           cells.push({
@@ -11057,12 +11072,12 @@ function applyTableProperties(view, rowPatch, marginPatch, cellMarginPatch, cell
   if (!Object.keys(rowPatch).length && !Object.keys(marginPatch).length && cellMarginPatch === void 0 && cellAlignment === void 0)
     return true;
   const tr = closeHistory(view.state.tr);
-  for (const row4 of context2.rows) {
-    const node = tr.doc.nodeAt(row4.pos);
-    const properties = { ...row4.properties, ...rowPatch };
+  for (const row3 of context2.rows) {
+    const node = tr.doc.nodeAt(row3.pos);
+    const properties = { ...row3.properties, ...rowPatch };
     for (const key2 of Object.keys(properties))
       if (properties[key2] === void 0) delete properties[key2];
-    tr.setNodeMarkup(row4.pos, void 0, {
+    tr.setNodeMarkup(row3.pos, void 0, {
       ...node.attrs,
       properties,
       heightPx: properties.heightTwips ? properties.heightTwips / 15 : null
@@ -11222,7 +11237,7 @@ function createTablePropertiesDialog(viewOf) {
       element.replaceChildren(...content);
       localizeDialog(element, locale);
       const common = (read) => {
-        const values2 = context2.rows.map((row4) => read(row4.properties));
+        const values2 = context2.rows.map((row3) => read(row3.properties));
         return values2.every((value) => value === values2[0]) ? values2[0] : null;
       };
       setTriState(
@@ -12330,13 +12345,13 @@ function syncFormatControls(toolbar, state) {
     });
     if (!found) addMarks(state.selection.$from.marks());
   }
-  const labels2 = {
+  const labels3 = {
     bold: "Bold",
     italic: "Italic",
     underline: "Underline",
     strike: "Strikethrough"
   };
-  for (const [key2, label] of Object.entries(labels2)) {
+  for (const [key2, label] of Object.entries(labels3)) {
     const values2 = marked.get(key2);
     findLocalizedControl(toolbar, label)?.setAttribute(
       "aria-pressed",
@@ -12958,7 +12973,7 @@ function paragraphStylesPlugin(getModel, getMode = () => "all") {
         state.doc.descendants((node) => {
           if (node.type.name === "paragraph") paragraphs.push(displayParagraph(node, mode).value);
         });
-        const labels2 = computeListLabels({ ...model, blocks: paragraphs });
+        const labels3 = computeListLabels({ ...model, blocks: paragraphs });
         const decorations2 = [];
         state.doc.descendants((node, pos) => {
           if (node.type.name !== "paragraph") return;
@@ -12966,7 +12981,7 @@ function paragraphStylesPlugin(getModel, getMode = () => "all") {
           const paragraph2 = projected.value;
           const reset = mode === "original" && node.attrs.formatRevision && !projected.error ? `${ORIGINAL_PARAGRAPH_RESET};` : "";
           const effective = catalog ? resolveParagraphFormatting(paragraph2, catalog) : paragraph2;
-          const label = labels2.get(String(node.attrs.id));
+          const label = labels3.get(String(node.attrs.id));
           const marker = listMarkerDisplay(
             node,
             { ...paragraph2, ...effective },
@@ -13009,8 +13024,8 @@ function context(view) {
   const table = $from.node(tableDepth);
   const width = table.childCount ? table.child(0).childCount : 0;
   if (!width || table.childCount < 1) return null;
-  for (let row4 = 0; row4 < table.childCount; row4++)
-    if (table.child(row4).childCount !== width) return null;
+  for (let row3 = 0; row3 < table.childCount; row3++)
+    if (table.child(row3).childCount !== width) return null;
   return {
     table,
     tablePos: $from.before(tableDepth),
@@ -13100,9 +13115,9 @@ function executeTableCommand(view, action) {
         view,
         ctx,
         rows.map(
-          (row4) => row4.copy(
+          (row3) => row3.copy(
             Fragment.fromArray(
-              Array.from({ length: row4.childCount }, (_, index) => row4.child(index)).filter(
+              Array.from({ length: row3.childCount }, (_, index) => row3.child(index)).filter(
                 (_, index) => index !== ctx.columnIndex
               )
             )
@@ -13115,10 +13130,10 @@ function executeTableCommand(view, action) {
   replacedTable(
     view,
     ctx,
-    rows.map((row4) => {
-      const cells = Array.from({ length: row4.childCount }, (_, index) => row4.child(index));
+    rows.map((row3) => {
+      const cells = Array.from({ length: row3.childCount }, (_, index) => row3.child(index));
       cells.splice(at, 0, emptyCell(nextId));
-      return row4.copy(Fragment.fromArray(cells));
+      return row3.copy(Fragment.fromArray(cells));
     })
   );
   return true;
@@ -13256,13 +13271,6 @@ function markerPositions(geometry) {
     right: geometry.pageWidth - geometry.marginRight - geometry.indentRight
   };
 }
-function inchLabels(geometry) {
-  const labels2 = [];
-  const width = geometry.pageWidth - geometry.marginLeft - geometry.marginRight;
-  for (let inch = 1; inch * PX_PER_INCH < width; inch++)
-    labels2.push({ at: geometry.marginLeft + inch * PX_PER_INCH, text: String(inch) });
-  return labels2;
-}
 function markerChange(marker, x, geometry) {
   const snap = (px2) => Math.round(px2 / SNAP_PX) * SNAP_PX;
   const inches3 = (px2) => Math.round(px2 / PX_PER_INCH * 1e3) / 1e3;
@@ -13289,87 +13297,52 @@ function markerChange(marker, x, geometry) {
 }
 var SNAP_PX = PX_PER_INCH / 16;
 var geometries = /* @__PURE__ */ new WeakMap();
-function enableDragging(ruler, onChange) {
-  for (const name of ["first-line", "left", "right"]) {
-    const marker = ruler.querySelector(`.dve-ruler-marker-${name}`);
-    marker.addEventListener("pointerdown", (event) => {
-      const geometry = geometries.get(ruler);
-      if (!geometry || event.button !== 0) return;
-      event.preventDefault();
-      marker.setPointerCapture?.(event.pointerId);
-      const zoom = Number(ruler.style.getPropertyValue("--dve-zoom")) || 1;
-      const at = (e) => (e.clientX - ruler.getBoundingClientRect().left) / zoom;
-      const move = (e) => {
-        const preview = markerChange(name, at(e), geometry);
-        const shifted = { ...geometry };
-        if (preview.leftInches !== void 0) shifted.indentLeft = preview.leftInches * PX_PER_INCH;
-        if (preview.rightInches !== void 0)
-          shifted.indentRight = preview.rightInches * PX_PER_INCH;
-        if (preview.special)
-          shifted.firstLine = (preview.special === "hanging" ? -1 : 1) * (preview.specialInches ?? 0) * PX_PER_INCH;
-        paintMarkers(ruler, shifted);
-      };
-      const finish = (e) => {
-        marker.removeEventListener("pointermove", move);
-        marker.removeEventListener("pointerup", finish);
-        marker.removeEventListener("pointercancel", finish);
-        onChange(e.type === "pointerup" ? markerChange(name, at(e), geometry) : {});
-      };
-      marker.addEventListener("pointermove", move);
-      marker.addEventListener("pointerup", finish);
-      marker.addEventListener("pointercancel", finish);
-    });
-  }
+function previewGeometry(marker, x, geometry) {
+  const preview = markerChange(marker, x, geometry);
+  const shifted = { ...geometry };
+  if (preview.leftInches !== void 0) shifted.indentLeft = preview.leftInches * PX_PER_INCH;
+  if (preview.rightInches !== void 0) shifted.indentRight = preview.rightInches * PX_PER_INCH;
+  if (preview.special)
+    shifted.firstLine = (preview.special === "hanging" ? -1 : 1) * (preview.specialInches ?? 0) * PX_PER_INCH;
+  return shifted;
 }
 function paintMarkers(ruler, geometry) {
   const positions = markerPositions(geometry);
-  const at = (name) => ruler.querySelector(`.dve-ruler-marker-${name}`);
-  at("first-line").style.left = `${positions.firstLine}px`;
-  at("left").style.left = `${positions.left}px`;
-  at("right").style.left = `${positions.right}px`;
+  ruler.markers = [
+    { name: "first-line", position: positions.firstLine, edge: "top" },
+    { name: "left", position: positions.left },
+    { name: "right", position: positions.right }
+  ];
 }
 function createRuler(onChange) {
-  const ruler = document.createElement("div");
+  defineRuler();
+  const ruler = document.createElement("office-ui-ruler");
   ruler.className = "dve-ruler";
-  ruler.setAttribute("role", "img");
-  ruler.setAttribute("aria-label", "Ruler");
-  for (const name of ["margin-left", "margin-right", "labels"]) {
-    const part = document.createElement("div");
-    part.className = `dve-ruler-${name}`;
-    ruler.append(part);
-  }
-  for (const name of ["first-line", "left", "right"]) {
-    const marker = document.createElement("div");
-    marker.className = `dve-ruler-marker dve-ruler-marker-${name}`;
-    ruler.append(marker);
-  }
-  if (onChange) enableDragging(ruler, onChange);
+  ruler.label = "Ruler";
+  ruler.labelsWithinMargins = true;
+  const detail2 = (event) => event.detail;
+  const marker = (event) => detail2(event).name;
+  ruler.addEventListener("ruler-marker-move", (event) => {
+    const geometry = geometries.get(ruler);
+    if (geometry)
+      paintMarkers(ruler, previewGeometry(marker(event), detail2(event).position, geometry));
+  });
+  ruler.addEventListener("ruler-marker-commit", (event) => {
+    const geometry = geometries.get(ruler);
+    if (geometry) onChange?.(markerChange(marker(event), detail2(event).position, geometry));
+  });
+  ruler.addEventListener("ruler-marker-cancel", () => onChange?.({}));
   return ruler;
 }
 function updateRuler(ruler, geometry, zoom) {
-  const part = (name) => ruler.querySelector(`.dve-ruler-${name}`);
-  ruler.style.width = `${geometry.pageWidth}px`;
-  ruler.style.setProperty("--dve-zoom", String(zoom));
-  ruler.style.setProperty("--dve-ruler-origin", `${geometry.marginLeft}px`);
-  const left = part("margin-left");
-  left.style.width = `${geometry.marginLeft}px`;
-  const right = part("margin-right");
-  right.style.width = `${geometry.marginRight}px`;
+  const element = ruler;
   geometries.set(ruler, geometry);
-  paintMarkers(ruler, geometry);
-  const labels2 = part("labels");
-  const wanted = inchLabels(geometry);
-  if (labels2.dataset.key !== JSON.stringify(wanted)) {
-    labels2.dataset.key = JSON.stringify(wanted);
-    labels2.replaceChildren(
-      ...wanted.map(({ at, text }) => {
-        const label = document.createElement("span");
-        label.textContent = text;
-        label.style.left = `${at}px`;
-        return label;
-      })
-    );
-  }
+  element.extent = geometry.pageWidth;
+  element.zoom = zoom;
+  element.origin = geometry.marginLeft;
+  element.marginStart = geometry.marginLeft;
+  element.marginEnd = geometry.marginRight;
+  paintMarkers(element, geometry);
 }
 
 // src/docx/ruler-sync.ts
@@ -13445,9 +13418,9 @@ function refreshEditorControls(toolbar, view, model, readOnly, collaboration, lo
     syncParagraphToggles(toolbar, view, model);
     syncContextualTabs(toolbar, state);
     syncRuler(toolbar, view, model);
-    const trackButton = toolbar.querySelector('[aria-label="Track changes"]');
+    const trackButton = findLocalizedControl(toolbar, "Track changes");
     trackButton?.setAttribute("aria-pressed", String(Boolean(model.trackChanges)));
-    const commentsButton = toolbar.querySelector('[aria-label="Comments"]');
+    const commentsButton = findLocalizedControl(toolbar, "Comments");
     commentsButton?.setAttribute("aria-pressed", String(commentsOpen));
     const changeAtCursor = hasChangeAtCursor(view);
     const anyChange = hasAnyChange(view);
@@ -13467,9 +13440,7 @@ function refreshEditorControls(toolbar, view, model, readOnly, collaboration, lo
         state.selection instanceof NodeSelection && state.selection.node.type.name === "image"
       ]
     ]) {
-      const control = toolbar.querySelector(
-        `[data-localearialabel="${label}"], [aria-label="${label}"]`
-      );
+      const control = findLocalizedControl(toolbar, label);
       if (control) control.disabled = readOnly || !enabled;
     }
   }
@@ -14001,6 +13972,10 @@ function imageNodeView(cache, options = {}) {
   return (node, view, getPos) => {
     const diagram = parseDiagram(node.attrs.diagram);
     if (diagram) return smartArtNodeView(node, diagram, options.theme?.());
+    if (node.attrs.chart) {
+      const spec = chartNodeSpec(node, options.theme?.());
+      return { dom: DOMSerializer.renderSpec(document, spec).dom, ignoreMutation: () => true };
+    }
     const content = renderSpec(node);
     if (content.tagName !== "IMG") return { dom: content, ignoreMutation: () => true };
     const refresh = () => {
@@ -14340,7 +14315,7 @@ function refreshPreviewScaleWithFonts(element, text, formatting, family) {
 // src/docx/preview-run-styles.ts
 function stylePreviewRuns(element, block, model, serializer, mode = "all") {
   const measurer = scaleMeasurer();
-  const paragraphs = block.type === "paragraph" ? [block] : block.rows.flatMap((row4) => row4.flatMap((cell) => cell.paragraphs));
+  const paragraphs = block.type === "paragraph" ? [block] : block.rows.flatMap((row3) => row3.flatMap((cell) => cell.paragraphs));
   const elements = block.type === "paragraph" ? [element] : [...element.querySelectorAll("p")];
   paragraphs.forEach((current2, index) => {
     const target = elements[index];
@@ -14417,10 +14392,10 @@ function blockNode(block) {
     return schema.node("paragraph", paragraphAttrs(block), children);
   }
   const rows = block.rows.map(
-    (row4) => schema.node(
+    (row3) => schema.node(
       "tableRow",
       null,
-      row4.map(
+      row3.map(
         (cell) => schema.node(
           "tableCell",
           null,
@@ -16060,8 +16035,8 @@ var InsertController = class {
         if (action.key === "figures")
           insertTableOfContents(view, this.host.model(), void 0, 3, action.label ?? "Figure");
         else if (action.key === "updateFigures") {
-          const labels2 = action.label ? [action.label] : ["Figure", "Table", "Equation"];
-          const updated = labels2.filter(
+          const labels3 = action.label ? [action.label] : ["Figure", "Table", "Equation"];
+          const updated = labels3.filter(
             (label) => updateTableOfContents(view, this.host.model(), void 0, label)
           );
           if (!updated.length)
@@ -16441,6 +16416,7 @@ var EditorCore = class {
       );
     const { searchPanel, printLayout, review, chrome, toolbar } = this.shell;
     searchPanel?.refresh();
+    if (review?.commentsOpen) review.commentsPanel.refresh();
     if (this.pages.viewMode === "print") printLayout?.refreshCurrentPage();
     const status = refreshEditorControls(
       toolbar,
@@ -16499,7 +16475,7 @@ var ribbon_polish_default = "/* Ribbon polish: distinct pressed state and Word's
 var document_default = ".dve-revision-insert {\n	color: var(--dve-revision-color, inherit);\n	text-decoration: underline;\n	text-decoration-color: var(--dve-revision-color, currentColor);\n}\n.dve-revision-delete {\n	color: var(--dve-revision-color, inherit);\n	text-decoration: line-through;\n	text-decoration-color: var(--dve-revision-color, currentColor);\n}\n/* Moved text, like Word: green, double underline at the destination, double strike at the source. */\n.dve-revision-move {\n	--dve-revision-color: #2e7d32;\n	text-decoration-style: double;\n}\n.ProseMirror .dve-revision-hidden {\n	/* Review visibility takes precedence over picture/equation node-view display rules. */\n	display: none !important;\n}\n[data-review-display]:not([data-review-display='all']) .dve-revision-insert,\n[data-review-display]:not([data-review-display='all']) .dve-revision-delete {\n	color: inherit;\n	text-decoration: none;\n}\n[data-review-display]:not([data-review-display='all']) .dve-comment-range {\n	background: transparent;\n}\n.dve-revision-format-markup {\n	outline: 1px dotted currentColor;\n	outline-offset: 2px;\n}\n.dve-comment-range {\n	background: rgba(255, 212, 0, 0.28);\n}\n.dve-paper {\n	box-sizing: border-box;\n	position: relative;\n	flex: none;\n	margin: 0 auto;\n	background: var(--dve-page-color, #fff);\n	color: #202124;\n	box-shadow:\n		0 1px 3px #20212430,\n		0 4px 12px #20212420;\n	outline: none;\n	/* Single spacing and no paragraph gap unless the document's styles set them, as in Word. */\n	font:\n		11pt/1.2 Calibri,\n		Carlito,\n		Arial,\n		sans-serif;\n	zoom: var(--dve-zoom, 1);\n}\n.dve-paper p {\n	min-height: 1.2em;\n	margin: 0;\n	white-space: pre-wrap;\n}\n.dve-paper p:last-child {\n	margin-bottom: 0;\n}\n/* The caret marks focus in the document, as in Word; no ring around the editable area. */\n.dve-paper .ProseMirror:focus,\n.dve-paper .ProseMirror:focus-visible {\n	outline: none;\n}\n.dve-paper:focus {\n	box-shadow:\n		0 1px 3px #20212430,\n		0 4px 12px #20212420,\n		0 0 0 1px var(--blue);\n}\n/* Columns follow the table's grid and cell widths (equal when it has none), as Word lays them out;\n   tables add no space around themselves. */\n.dve-paper table {\n	width: 100%;\n	table-layout: fixed;\n	border-collapse: collapse;\n	margin: 0;\n}\n.dve-paper td {\n	min-width: 44px;\n	border: var(--dve-cell-border, 1px dashed #c8c6c4);\n	vertical-align: top;\n}\n.dve-paper td p {\n	margin: 0;\n}\n.dve-paper p[data-list-label]::before {\n	content: attr(data-list-label);\n	white-space: pre;\n	user-select: none;\n}\n.dve-paper p[data-list-marker]:not([data-list-marker=''])::before {\n	content: attr(data-list-marker);\n	position: absolute;\n	left: var(--dve-marker-left);\n	text-indent: 0;\n	font-family: var(--dve-marker-family);\n	font-size: var(--dve-marker-size);\n	font-weight: var(--dve-marker-weight);\n	font-style: var(--dve-marker-style);\n	color: var(--dve-marker-color);\n}\n.multilingual-controls {\n	flex: 1 1 100%;\n	align-items: flex-start;\n	gap: 9px 14px;\n}\n.multilingual-language-control {\n	display: grid;\n	grid-template-columns: minmax(145px, 180px);\n	gap: 4px;\n	color: var(--muted);\n	font-size: 11px;\n}\n.multilingual-language-control select,\n.multilingual-language-control input {\n	box-sizing: border-box;\n	width: 180px;\n}\n.multilingual-language-control input {\n	height: 26px;\n	border: 1px solid var(--line);\n	border-radius: 3px;\n	background: var(--surface);\n	padding: 0 7px;\n	color: var(--ink);\n	font:\n		11px 'Segoe UI',\n		Arial,\n		sans-serif;\n}\n.multilingual-note {\n	align-self: end;\n	max-width: 240px;\n	color: var(--muted);\n	font-size: 11px;\n}\n@media (max-width: 650px) {\n	.ribbon-panel {\n		min-height: 96px;\n		padding: 6px;\n		gap: 4px;\n	}\n	.ribbon-group {\n		padding-right: 7px;\n	}\n	.ribbon-panel[data-panel='Home'] .ribbon-group[data-label='Font'] {\n		width: 340px;\n	}\n	.ribbon-panel[data-panel='Home'] .ribbon-group[data-label='Paragraph'] {\n		width: 280px;\n	}\n	.ribbon-panel[data-panel='Home'] .ribbon-group[data-label='Editing'] {\n		width: auto;\n	}\n	.ribbon-group button {\n		min-width: 34px;\n		min-height: 34px;\n	}\n	.ribbon-group select {\n		max-width: min(150px, 42vw);\n	}\n	.dve-canvas {\n		padding: 18px 8px 38px;\n		align-items: flex-start;\n	}\n	.ribbon-group select.font-family-select {\n		width: 120px;\n		max-width: 38vw;\n	}\n	.ribbon-group select.font-size-select {\n		width: 56px;\n	}\n	.ribbon-group select.spacing-select {\n		width: min(128px, 36vw);\n	}\n	.ribbon-group select.line-spacing-select {\n		width: min(112px, 32vw);\n	}\n}\n.dve-break-marker {\n	display: block;\n	margin: 0.4em 0;\n	padding: 2px 0;\n	border-top: 1px dashed var(--muted);\n	border-bottom: 1px dashed var(--muted);\n	color: var(--muted);\n	font-size: 10px;\n	text-align: center;\n	text-transform: uppercase;\n	letter-spacing: 0.04em;\n	user-select: none;\n}\n.dve-note-reference {\n	color: var(--blue);\n	cursor: default;\n}\n.dve-header,\n.dve-footer {\n	box-sizing: border-box;\n	width: 816px;\n	max-width: 100%;\n	margin: 0 auto;\n	padding: 10px clamp(16px, 5vw, 70px);\n	background: var(--surface);\n	color: var(--muted);\n	font:\n		10pt/1.35 Calibri,\n		Arial,\n		sans-serif;\n}\n.dve-header {\n	border-bottom: 1px dashed var(--line);\n}\n.dve-footer {\n	border-top: 1px dashed var(--line);\n}\n.dve-header-footer-label {\n	margin-bottom: 2px;\n	color: var(--muted);\n	font-size: 10px;\n	text-transform: uppercase;\n	letter-spacing: 0.04em;\n}\n.dve-notes-container {\n	box-sizing: border-box;\n	width: 816px;\n	max-width: 100%;\n	margin: 12px auto 0;\n}\n.dve-notes {\n	box-sizing: border-box;\n	padding: 10px clamp(16px, 5vw, 70px);\n	background: var(--surface);\n	border-top: 1px solid var(--line);\n	font:\n		10pt/1.35 Calibri,\n		Arial,\n		sans-serif;\n}\n.dve-notes-heading {\n	margin: 0 0 6px;\n	color: var(--ink);\n	font-size: 12px;\n}\n.dve-note-list {\n	margin: 0;\n	padding: 0;\n	list-style: none;\n}\n.dve-note-list li {\n	display: flex;\n	gap: 4px;\n	align-items: baseline;\n	margin-bottom: 4px;\n}\n.dve-note-marker {\n	flex: none;\n	color: var(--muted);\n}\n@media (prefers-reduced-motion: reduce) {\n	* {\n		scroll-behavior: auto !important;\n	}\n}\n\n/* Print Layout: a read-only, paginated render kept beside the continuous\n   editing surface (see print-layout.ts / print-layout-view.ts). */\n";
 
 // 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-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 {\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";
+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 {\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";
 
 // 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 and style the account slot. */\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.dve-title-actions {\n	display: flex;\n	align-items: center;\n	gap: 2px;\n}\n.dve-mode-select {\n	height: 28px;\n	margin-left: 4px;\n	padding: 0 6px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font: inherit;\n}\n";
@@ -16511,7 +16487,7 @@ var backstage_default = "/* Backstage: the shared office-ui-backstage draws the
 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";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/docx/styles/chrome-document.css?raw
-var chrome_document_default = "/* Links, pictures and hidden text in the document */\n.dve-equation {\n	display: inline-block;\n	vertical-align: middle;\n	max-width: 100%;\n	font-family: 'Cambria Math', math, serif;\n}\n.dve-equation-display {\n	display: block;\n	margin: 0.5em 0;\n	text-align: center;\n}\n.dve-equation-unavailable {\n	color: var(--muted);\n	font-size: 0.85em;\n}\n.dve-paper a.dve-link {\n	color: var(--word);\n	text-decoration: underline;\n	cursor: text;\n}\n.dve-paper img.dve-image {\n	max-width: 100%;\n	height: auto;\n	vertical-align: bottom;\n}\n.dve-paper .dve-image-placeholder {\n	display: inline-grid;\n	place-items: center;\n	border: 1px dashed var(--line);\n	background: var(--canvas);\n	color: var(--muted);\n	font-size: 11px;\n}\n.dve-paper .dve-image-placeholder:has(.dve-textbox-line) {\n	place-items: start;\n	align-content: start;\n	overflow: hidden;\n	padding: 4px 6px;\n	box-sizing: border-box;\n	text-align: left;\n	border-style: solid;\n}\n.dve-paper .dve-textbox-line {\n	display: block;\n	color: var(--text, #1f1f1f);\n	font-size: 12px;\n}\n.dve-paper:not([data-show-hidden]) .dve-hidden-text {\n	display: none;\n}\n.dve-paper[data-show-hidden] .dve-hidden-text {\n	opacity: 0.55;\n	text-decoration: underline dotted;\n}\n\n/* Pictures: selection outline and proportional resize handle */\n.dve-paper .dve-picture {\n	position: relative;\n	display: inline-block;\n	max-width: 100%;\n	line-height: 0;\n}\n.dve-paper .dve-picture-selected {\n	outline: 2px solid var(--word);\n	outline-offset: 1px;\n}\n.dve-picture-handle {\n	position: absolute;\n	right: -5px;\n	bottom: -5px;\n	display: none;\n	width: 10px;\n	height: 10px;\n	border: 1px solid var(--word);\n	background: #fff;\n	cursor: nwse-resize;\n}\n.dve-picture-selected .dve-picture-handle {\n	display: block;\n}\n.dve-dialog textarea {\n	min-height: 60px;\n	padding: 6px 8px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font: inherit;\n	resize: vertical;\n}\n.dve-dialog-row {\n	display: grid;\n	grid-template-columns: 1fr 1fr;\n	gap: 10px;\n}\n.dve-dialog .dve-dialog-check {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	color: var(--ink);\n}\n\n/* Header/footer editing (double-click a header or footer) */\n.dve-header-footer-slot[data-slot] {\n	cursor: text;\n}\n.dve-header-footer-editing {\n	outline: 1px dashed var(--word);\n	outline-offset: 4px;\n}\n.dve-header-footer-editor .ProseMirror {\n	outline: none;\n	white-space: pre-wrap;\n}\n.dve-header-footer-editor .ProseMirror p {\n	margin: 0;\n}\n\n/* Section break marks after the paragraph that ends a section */\n.dve-paper .dve-section-end::after {\n	display: block;\n	margin: 6px 0;\n	border-top: 1px dotted var(--muted);\n	border-bottom: 1px dotted var(--muted);\n	color: var(--muted);\n	content: attr(data-section-break);\n	font-size: 10px;\n	line-height: 14px;\n	text-align: center;\n	user-select: none;\n}\n\n/* Floating pictures: an approximation of Word's text wrapping */\n.dve-paper .dve-float-left,\n.dve-header-footer-body .dve-float-left {\n	float: left;\n	margin: 2px 12px 6px 0;\n}\n.dve-paper .dve-float-right,\n.dve-header-footer-body .dve-float-right {\n	float: right;\n	margin: 2px 0 6px 12px;\n}\n.dve-paper .dve-float-block {\n	display: block;\n	width: fit-content;\n	margin: 6px 0;\n}\n.dve-paper .dve-float-block-center {\n	margin-right: auto;\n	margin-left: auto;\n}\n.dve-paper .dve-float-block-right {\n	margin-left: auto;\n}\n.dve-paper[data-show-marks] .ProseMirror p::after,\n.dve-paper[data-show-marks] .ProseMirror h1::after,\n.dve-paper[data-show-marks] .ProseMirror h2::after,\n.dve-paper[data-show-marks] .ProseMirror h3::after {\n	color: var(--blue);\n	content: '\\00b6';\n	opacity: 0.7;\n	pointer-events: none;\n}\n\n/* Font and Paragraph dialogs */\n.dve-format-dialog {\n	--office-dialog-width: min(520px, calc(100vw - 32px));\n}\n.dve-format-dialog .dve-dialog-fieldset {\n	display: grid;\n	gap: 8px;\n	margin: 0;\n	padding: 8px 10px 10px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n}\n.dve-format-dialog legend {\n	padding: 0 4px;\n	color: var(--muted);\n	font-size: 12px;\n}\n.dve-format-dialog .dve-dialog-cols {\n	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));\n}\n.dve-format-dialog input[type='color'] {\n	padding: 2px;\n}\n.dve-format-dialog .dve-dialog-fieldset > .dve-dialog-check {\n	display: flex;\n}\n.dve-font-dialog .dve-dialog-fieldset:nth-of-type(1) {\n	grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.dve-font-dialog .dve-font-tab-panel[hidden] {\n	display: none;\n}\n.dve-font-tab-panel {\n	display: grid;\n	gap: 10px;\n}\n.dve-font-dialog .dve-font-tab-panel .dve-dialog-fieldset:has(.dve-dialog-cols) {\n	grid-template-columns: 1fr;\n}\n.dve-font-tabs {\n	display: flex;\n	gap: 2px;\n	border-bottom: 1px solid var(--line);\n}\n.dve-font-tabs button {\n	background: transparent;\n	border: 0;\n	border-radius: 0;\n	padding: 7px 14px;\n}\n.dve-font-tabs button[aria-selected='true'] {\n	color: var(--word);\n	border-bottom: 2px solid var(--word);\n	font-weight: 600;\n}\n.dve-format-preview {\n	display: grid;\n	min-height: 54px;\n	place-items: center;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: #fff;\n	color: #000;\n	overflow: hidden;\n}\n.dve-dialog input[type='checkbox'] {\n	width: 16px;\n	height: 16px;\n	padding: 0;\n	margin: 0;\n	accent-color: var(--word);\n}\n.dve-format-dialog .dve-dialog-fieldset:has(> .dve-dialog-check):not(:has(> .dve-dialog-cols)) {\n	grid-template-columns: repeat(2, minmax(0, 1fr));\n	gap: 6px 12px;\n}\n.dve-format-dialog\n	.dve-dialog-fieldset:has(> .dve-dialog-check):not(:has(> .dve-dialog-cols))\n	legend {\n	grid-column: 1 / -1;\n}\n\n/* View > Gridlines: a quarter-inch alignment grid over the page. */\n.dve-paper[data-show-gridlines] {\n	background-image:\n		linear-gradient(to right, #8ab4f855 1px, transparent 1px),\n		linear-gradient(to bottom, #8ab4f855 1px, transparent 1px);\n	background-size: 24px 24px;\n}\n\n.dve-dialog-message {\n	min-height: 1.2em;\n	margin: 0;\n	color: #b3261e;\n	font-size: 12px;\n}\n\n/* View > Ruler: inch ticks from the left margin, shaded margins and indent markers. */\n.dve-canvas > .dve-ruler {\n	position: sticky;\n	top: -30px;\n	z-index: 6;\n	flex: none;\n	box-sizing: border-box;\n	height: 22px;\n	margin: -30px auto 8px;\n	zoom: var(--dve-zoom, 1);\n	border: 1px solid var(--line);\n	background:\n		linear-gradient(to right, #6b6f75 1px, transparent 1px) var(--dve-ruler-origin, 0) 100% / 96px\n			11px repeat-x,\n		linear-gradient(to right, #6b6f75 1px, transparent 1px) var(--dve-ruler-origin, 0) 100% / 48px\n			8px repeat-x,\n		linear-gradient(to right, #9aa0a6 1px, transparent 1px) var(--dve-ruler-origin, 0) 100% / 12px\n			5px repeat-x,\n		#fff;\n	color: #4a4d52;\n	font:\n		9px 'Segoe UI',\n		Arial,\n		sans-serif;\n	pointer-events: none;\n}\n.dve-ruler-margin-left,\n.dve-ruler-margin-right {\n	position: absolute;\n	top: 0;\n	bottom: 0;\n	background: #dfe3e8;\n}\n.dve-ruler-margin-left {\n	left: 0;\n}\n.dve-ruler-margin-right {\n	right: 0;\n}\n.dve-ruler-labels span {\n	position: absolute;\n	top: 1px;\n	transform: translateX(-50%);\n}\n.dve-ruler-marker {\n	pointer-events: auto;\n	cursor: ew-resize;\n	touch-action: none;\n	position: absolute;\n	width: 0;\n	height: 0;\n	margin-left: -4px;\n	border-right: 4px solid transparent;\n	border-left: 4px solid transparent;\n}\n.dve-ruler-marker::after {\n	content: '';\n	position: absolute;\n	inset: -6px -6px -6px -6px;\n	margin-left: -4px;\n}\n.dve-ruler-marker-first-line {\n	top: 1px;\n	border-top: 6px solid #2b579a;\n}\n.dve-ruler-marker-left,\n.dve-ruler-marker-right {\n	bottom: 1px;\n	border-bottom: 6px solid #2b579a;\n}\n";
+var chrome_document_default = "/* Links, pictures and hidden text in the document */\n.dve-equation {\n	display: inline-block;\n	vertical-align: middle;\n	max-width: 100%;\n	font-family: 'Cambria Math', math, serif;\n}\n.dve-equation-display {\n	display: block;\n	margin: 0.5em 0;\n	text-align: center;\n}\n.dve-equation-unavailable {\n	color: var(--muted);\n	font-size: 0.85em;\n}\n.dve-paper a.dve-link {\n	color: var(--word);\n	text-decoration: underline;\n	cursor: text;\n}\n.dve-paper img.dve-image {\n	max-width: 100%;\n	height: auto;\n	vertical-align: bottom;\n}\n.dve-paper .dve-image-placeholder {\n	display: inline-grid;\n	place-items: center;\n	border: 1px dashed var(--line);\n	background: var(--canvas);\n	color: var(--muted);\n	font-size: 11px;\n}\n/* Charts: painted read-only from the cached values in the chart part. */\n.dve-paper .dve-chart {\n	display: inline-block;\n	vertical-align: bottom;\n	max-width: 100%;\n	overflow: hidden;\n	background: #fff;\n}\n.dve-paper .dve-chart > svg {\n	display: block;\n	width: 100%;\n	height: 100%;\n}\n.dve-paper .dve-image-placeholder:has(.dve-textbox-line) {\n	place-items: start;\n	align-content: start;\n	overflow: hidden;\n	padding: 4px 6px;\n	box-sizing: border-box;\n	text-align: left;\n	border-style: solid;\n}\n.dve-paper .dve-textbox-line {\n	display: block;\n	color: var(--text, #1f1f1f);\n	font-size: 12px;\n}\n.dve-paper:not([data-show-hidden]) .dve-hidden-text {\n	display: none;\n}\n.dve-paper[data-show-hidden] .dve-hidden-text {\n	opacity: 0.55;\n	text-decoration: underline dotted;\n}\n\n/* Pictures: selection outline and proportional resize handle */\n.dve-paper .dve-picture {\n	position: relative;\n	display: inline-block;\n	max-width: 100%;\n	line-height: 0;\n}\n.dve-paper .dve-picture-selected {\n	outline: 2px solid var(--word);\n	outline-offset: 1px;\n}\n.dve-picture-handle {\n	position: absolute;\n	right: -5px;\n	bottom: -5px;\n	display: none;\n	width: 10px;\n	height: 10px;\n	border: 1px solid var(--word);\n	background: #fff;\n	cursor: nwse-resize;\n}\n.dve-picture-selected .dve-picture-handle {\n	display: block;\n}\n.dve-dialog textarea {\n	min-height: 60px;\n	padding: 6px 8px;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: var(--surface);\n	color: var(--ink);\n	font: inherit;\n	resize: vertical;\n}\n.dve-dialog-row {\n	display: grid;\n	grid-template-columns: 1fr 1fr;\n	gap: 10px;\n}\n.dve-dialog .dve-dialog-check {\n	display: flex;\n	align-items: center;\n	gap: 6px;\n	color: var(--ink);\n}\n\n/* Header/footer editing (double-click a header or footer) */\n.dve-header-footer-slot[data-slot] {\n	cursor: text;\n}\n.dve-header-footer-editing {\n	outline: 1px dashed var(--word);\n	outline-offset: 4px;\n}\n.dve-header-footer-editor .ProseMirror {\n	outline: none;\n	white-space: pre-wrap;\n}\n.dve-header-footer-editor .ProseMirror p {\n	margin: 0;\n}\n\n/* Section break marks after the paragraph that ends a section */\n.dve-paper .dve-section-end::after {\n	display: block;\n	margin: 6px 0;\n	border-top: 1px dotted var(--muted);\n	border-bottom: 1px dotted var(--muted);\n	color: var(--muted);\n	content: attr(data-section-break);\n	font-size: 10px;\n	line-height: 14px;\n	text-align: center;\n	user-select: none;\n}\n\n/* Floating pictures: an approximation of Word's text wrapping */\n.dve-paper .dve-float-left,\n.dve-header-footer-body .dve-float-left {\n	float: left;\n	margin: 2px 12px 6px 0;\n}\n.dve-paper .dve-float-right,\n.dve-header-footer-body .dve-float-right {\n	float: right;\n	margin: 2px 0 6px 12px;\n}\n.dve-paper .dve-float-block {\n	display: block;\n	width: fit-content;\n	margin: 6px 0;\n}\n.dve-paper .dve-float-block-center {\n	margin-right: auto;\n	margin-left: auto;\n}\n.dve-paper .dve-float-block-right {\n	margin-left: auto;\n}\n.dve-paper[data-show-marks] .ProseMirror p::after,\n.dve-paper[data-show-marks] .ProseMirror h1::after,\n.dve-paper[data-show-marks] .ProseMirror h2::after,\n.dve-paper[data-show-marks] .ProseMirror h3::after {\n	color: var(--blue);\n	content: '\\00b6';\n	opacity: 0.7;\n	pointer-events: none;\n}\n\n/* Font and Paragraph dialogs */\n.dve-format-dialog {\n	--office-dialog-width: min(520px, calc(100vw - 32px));\n}\n.dve-format-dialog .dve-dialog-fieldset {\n	display: grid;\n	gap: 8px;\n	margin: 0;\n	padding: 8px 10px 10px;\n	border: 1px solid var(--line);\n	border-radius: 6px;\n}\n.dve-format-dialog legend {\n	padding: 0 4px;\n	color: var(--muted);\n	font-size: 12px;\n}\n.dve-format-dialog .dve-dialog-cols {\n	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));\n}\n.dve-format-dialog input[type='color'] {\n	padding: 2px;\n}\n.dve-format-dialog .dve-dialog-fieldset > .dve-dialog-check {\n	display: flex;\n}\n.dve-font-dialog .dve-dialog-fieldset:nth-of-type(1) {\n	grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.dve-font-dialog .dve-font-tab-panel[hidden] {\n	display: none;\n}\n.dve-font-tab-panel {\n	display: grid;\n	gap: 10px;\n}\n.dve-font-dialog .dve-font-tab-panel .dve-dialog-fieldset:has(.dve-dialog-cols) {\n	grid-template-columns: 1fr;\n}\n.dve-font-tabs {\n	display: flex;\n	gap: 2px;\n	border-bottom: 1px solid var(--line);\n}\n.dve-font-tabs button {\n	background: transparent;\n	border: 0;\n	border-radius: 0;\n	padding: 7px 14px;\n}\n.dve-font-tabs button[aria-selected='true'] {\n	color: var(--word);\n	border-bottom: 2px solid var(--word);\n	font-weight: 600;\n}\n.dve-format-preview {\n	display: grid;\n	min-height: 54px;\n	place-items: center;\n	border: 1px solid var(--line);\n	border-radius: 4px;\n	background: #fff;\n	color: #000;\n	overflow: hidden;\n}\n.dve-dialog input[type='checkbox'] {\n	width: 16px;\n	height: 16px;\n	padding: 0;\n	margin: 0;\n	accent-color: var(--word);\n}\n.dve-format-dialog .dve-dialog-fieldset:has(> .dve-dialog-check):not(:has(> .dve-dialog-cols)) {\n	grid-template-columns: repeat(2, minmax(0, 1fr));\n	gap: 6px 12px;\n}\n.dve-format-dialog\n	.dve-dialog-fieldset:has(> .dve-dialog-check):not(:has(> .dve-dialog-cols))\n	legend {\n	grid-column: 1 / -1;\n}\n\n/* View > Gridlines: a quarter-inch alignment grid over the page. */\n.dve-paper[data-show-gridlines] {\n	background-image:\n		linear-gradient(to right, #8ab4f855 1px, transparent 1px),\n		linear-gradient(to bottom, #8ab4f855 1px, transparent 1px);\n	background-size: 24px 24px;\n}\n\n.dve-dialog-message {\n	min-height: 1.2em;\n	margin: 0;\n	color: #b3261e;\n	font-size: 12px;\n}\n\n/* View > Ruler: placement only; the shared office-ui-ruler draws ticks, margins and markers. */\n.dve-canvas > .dve-ruler {\n	position: sticky;\n	top: -30px;\n	z-index: 6;\n	flex: none;\n	height: 22px;\n	margin: -30px auto 8px;\n	border: 1px solid var(--line);\n	pointer-events: none;\n}\n";
 
 // raw-css:/home/runner/work/ooxml/ooxml/src/ui/src/docx/styles/page-navigator.css?raw
 var page_navigator_default = "/* Page thumbnail rail and ribbon customisation */\n[data-dve-hidden] {\n	display: none !important;\n}\n.dve-pages-rail {\n	display: flex;\n	flex: none;\n	flex-direction: column;\n	box-sizing: border-box;\n	width: 156px;\n	min-height: 0;\n	border-right: 1px solid var(--line);\n	background: var(--surface);\n	color: var(--ink);\n}\n.dve-pages-rail[hidden] {\n	display: none;\n}\n.dve-pages-head {\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	padding: 6px 8px;\n	border-bottom: 1px solid var(--line);\n	font-size: 11px;\n	font-weight: 600;\n}\n.dve-pages-close {\n	border: 0;\n	border-radius: 4px;\n	background: none;\n	color: var(--muted);\n	font-size: 16px;\n	line-height: 1;\n	cursor: pointer;\n}\n.dve-pages-close:hover {\n	background: var(--word-soft);\n}\n.dve-pages-message {\n	margin: 0;\n	padding: 12px 10px;\n	color: var(--muted);\n	font-size: 11px;\n	line-height: 1.4;\n}\n.dve-pages-message[hidden],\n.dve-pages-list[hidden] {\n	display: none;\n}\n.dve-pages-list {\n	position: relative;\n	flex: 1;\n	min-height: 0;\n	overflow-y: auto;\n	padding: 10px 0 16px;\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	gap: 10px;\n}\n.dve-page-thumb {\n	display: flex;\n	flex: none;\n	flex-direction: column;\n	align-items: center;\n	gap: 3px;\n	padding: 4px;\n	border: 2px solid transparent;\n	border-radius: 4px;\n	cursor: pointer;\n}\n.dve-page-thumb:hover {\n	background: var(--word-soft);\n}\n.dve-page-thumb[aria-selected='true'] {\n	border-color: var(--word);\n	background: var(--word-soft);\n}\n.dve-page-thumb-sheet {\n	position: relative;\n	overflow: hidden;\n	background: #fff;\n	box-shadow: 0 1px 3px #20212440;\n	pointer-events: none;\n}\n.dve-page-thumb-sheet .dve-print-page {\n	position: absolute;\n	top: 0;\n	left: 0;\n	box-shadow: none;\n}\n.dve-page-thumb-number {\n	color: var(--muted);\n	font-size: 11px;\n}\n.dve-page-thumb[aria-selected='true'] .dve-page-thumb-number {\n	color: var(--ink);\n	font-weight: 600;\n}\n@media print {\n	.dve-pages-rail {\n		display: none !important;\n	}\n}\n";
@@ -16886,10 +16862,10 @@ function createSearchPanel(options, initialLocale = "en") {
 
 // src/docx/print-table.ts
 var cssBorder = (border) => border ? `${border.widthPx}px ${border.style} ${border.color}` : "";
-function geometryOf(row4, index, widthPx) {
-  const given = row4.geometry?.[index];
+function geometryOf(row3, index, widthPx) {
+  const given = row3.geometry?.[index];
   if (given) return given;
-  const share = widthPx / Math.max(1, row4.cells.length);
+  const share = widthPx / Math.max(1, row3.cells.length);
   return {
     xPx: share * index,
     widthPx: share,
@@ -16904,31 +16880,31 @@ function renderTable(box2, columnWidthPx, renderParagraph) {
   table.style.top = `${box2.yPx}px`;
   table.style.height = `${box2.heightPx}px`;
   if (box2.xPx) table.style.left = `${box2.xPx}px`;
-  box2.rows.forEach((row4, rowIndex) => {
+  box2.rows.forEach((row3, rowIndex) => {
     const rowEl = document.createElement("div");
     rowEl.className = "dve-print-row";
-    rowEl.style.top = `${row4.yPx}px`;
-    rowEl.style.height = `${row4.heightPx}px`;
-    if (row4.repeated) rowEl.dataset.repeated = "true";
+    rowEl.style.top = `${row3.yPx}px`;
+    rowEl.style.height = `${row3.heightPx}px`;
+    if (row3.repeated) rowEl.dataset.repeated = "true";
     const lastRow = rowIndex === box2.rows.length - 1;
-    row4.cells.forEach((paragraphs, cellIndex) => {
-      const geometry = geometryOf(row4, cellIndex, columnWidthPx);
+    row3.cells.forEach((paragraphs, cellIndex) => {
+      const geometry = geometryOf(row3, cellIndex, columnWidthPx);
       const cell = document.createElement("div");
       cell.className = "dve-print-cell";
       Object.assign(cell.style, {
         left: `${geometry.xPx}px`,
         width: `${geometry.widthPx}px`,
-        height: `${row4.heightPx}px`
+        height: `${row3.heightPx}px`
       });
       if (geometry.shading) cell.style.background = geometry.shading;
       const borders = geometry.borders;
       cell.style.borderTop = cssBorder(borders?.top);
       cell.style.borderLeft = cssBorder(borders?.left);
-      if (cellIndex === row4.cells.length - 1) cell.style.borderRight = cssBorder(borders?.right);
+      if (cellIndex === row3.cells.length - 1) cell.style.borderRight = cssBorder(borders?.right);
       if (lastRow) cell.style.borderBottom = cssBorder(borders?.bottom);
       const content = document.createElement("div");
       content.className = "dve-print-cell-content";
-      const free = Math.max(0, row4.heightPx - geometry.contentHeightPx);
+      const free = Math.max(0, row3.heightPx - geometry.contentHeightPx);
       const offset = geometry.verticalAlign === "center" ? free / 2 : geometry.verticalAlign === "bottom" ? free : 0;
       Object.assign(content.style, {
         left: `${geometry.paddingLeftPx}px`,
@@ -16950,7 +16926,7 @@ function lineNumberLabels(page2, settings, counter3, suppressed) {
   if (counter3.section === -1 || settings.restart === "newPage" || newSection && settings.restart === "newSection")
     counter3.next = settings.start;
   counter3.section = page2.sectionIndex;
-  const labels2 = [];
+  const labels3 = [];
   const gap = (settings.distanceTwips ?? 360) / 15;
   for (const column of page2.columns)
     for (const block of column.blocks) {
@@ -16967,10 +16943,10 @@ function lineNumberLabels(page2, settings, counter3, suppressed) {
           height: `${line.heightPx}px`,
           lineHeight: `${line.heightPx}px`
         });
-        labels2.push(label);
+        labels3.push(label);
       }
     }
-  return labels2;
+  return labels3;
 }
 var POINT = 4 / 3;
 function pageBorderBox(page2, borders) {
@@ -17064,8 +17040,30 @@ function resolveFragmentClick(fragments, clientX) {
   return start + Math.round((end - start) * ratio);
 }
 
-// src/docx/print-layout.ts
+// src/docx/print-picture.ts
+function chartElement(chart) {
+  const element = document.createElement("div");
+  element.dataset.docxChart = chart.svg ? "1" : "frame";
+  const svg = chart.svg ? new DOMParser().parseFromString(chart.svg, "image/svg+xml").documentElement : void 0;
+  if (svg && svg.localName === "svg") {
+    element.classList.add("dve-print-chart");
+    element.title = chart.label;
+    element.append(document.importNode(svg, true));
+  } else {
+    element.classList.add("dve-print-picture-missing", "dve-print-chart-frame");
+    element.textContent = chart.label;
+  }
+  return element;
+}
 function pictureElement(object, pictureUrl) {
+  if (object.chart) {
+    const element2 = chartElement(object.chart);
+    element2.classList.add("dve-print-picture");
+    element2.style.position = "absolute";
+    element2.style.width = `${object.widthPx}px`;
+    element2.style.height = `${object.heightPx}px`;
+    return element2;
+  }
   const url = object.partName ? pictureUrl?.(object.partName, object.contentType) : void 0;
   const element = document.createElement(url ? "img" : "div");
   if (url) {
@@ -17078,6 +17076,8 @@ function pictureElement(object, pictureUrl) {
   element.style.height = `${object.heightPx}px`;
   return element;
 }
+
+// src/docx/print-layout.ts
 var LEADER_CHARACTERS = { dot: ".", hyphen: "-", middleDot: "\xB7" };
 function leaderElement(fragment) {
   const el = document.createElement("span");
@@ -17461,107 +17461,70 @@ function moveCursorToBlock(view, blockId, offset) {
 }
 
 // src/docx/comments-panel.ts
-var styleText2 = `
-	.dve-comments-panel{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-left:1px solid var(--line,#ddd);background:var(--surface,#fff);color:var(--ink,#222);font:12px/1.4 'Segoe UI',Arial,sans-serif;width:clamp(220px,26vw,320px);overflow-y:auto}
-	.dve-comments-panel[hidden]{display:none}
-	.dve-comments-panel h2{margin:0;font-size:13px}
-	.dve-comment-new textarea,.dve-comment-reply textarea{box-sizing:border-box;width:100%;min-height:44px;resize:vertical;border:1px solid var(--line,#ddd);border-radius:3px;padding:5px 7px;font:inherit;background:var(--surface,#fff);color:var(--ink,#222)}
-	.dve-comment-new button,.dve-comment-actions button,.dve-comment-reply button{border:1px solid var(--line,#ddd);border-radius:3px;background:var(--surface,#fff);color:var(--ink,#222);font:inherit;cursor:pointer;padding:3px 8px}
-	.dve-comment-new button:disabled,.dve-comment-actions button:disabled{opacity:.5;cursor:default}
-	.dve-comment-thread{border:1px solid var(--line,#ddd);border-radius:4px;padding:7px 8px;display:flex;flex-direction:column;gap:4px}
-	.dve-comment-thread[data-resolved="true"]{opacity:.65}
-	.dve-comment-meta{display:flex;justify-content:space-between;gap:6px;color:var(--muted,#666);font-size:11px}
-	.dve-comment-text{white-space:pre-wrap}
-	.dve-comment-actions{display:flex;gap:5px;flex-wrap:wrap}
-	.dve-comment-reply{margin-left:12px;display:flex;flex-direction:column;gap:4px}
-	.dve-comment-empty{color:var(--muted,#666)}
-`;
-function row3(comment, indent, locale, options) {
-  const thread = document.createElement("div");
-  thread.className = "dve-comment-thread";
-  if (indent) thread.style.marginLeft = "14px";
-  thread.dataset.resolved = String(Boolean(comment.resolved));
-  const meta = document.createElement("div");
-  meta.className = "dve-comment-meta";
-  meta.append(
-    Object.assign(document.createElement("span"), { textContent: comment.author }),
-    Object.assign(document.createElement("span"), { textContent: comment.date ?? "" })
-  );
-  const text = document.createElement("p");
-  text.className = "dve-comment-text";
-  text.textContent = comment.text;
-  const actions = document.createElement("div");
-  const canEdit = options.canEdit?.() ?? true;
-  actions.className = "dve-comment-actions";
-  if (!comment.parentId) {
-    const resolve = document.createElement("button");
-    resolve.type = "button";
-    resolve.disabled = !canEdit;
-    resolve.textContent = translate(locale, comment.resolved ? "Reopen" : "Resolve");
-    resolve.addEventListener("click", () => options.onResolve(comment.id, !comment.resolved));
-    actions.append(resolve);
-  }
-  const del = document.createElement("button");
-  del.type = "button";
-  del.disabled = !canEdit;
-  del.textContent = translate(locale, "Delete");
-  del.addEventListener("click", () => options.onDelete(comment.id));
-  actions.append(del);
-  thread.append(meta, text, actions);
-  if (!comment.parentId) {
-    const replyForm = document.createElement("div");
-    replyForm.className = "dve-comment-reply";
-    const input = document.createElement("textarea");
-    input.disabled = !canEdit;
-    input.setAttribute("aria-label", translate(locale, "Reply"));
-    input.placeholder = translate(locale, "Reply");
-    const send = document.createElement("button");
-    send.type = "button";
-    send.disabled = !canEdit;
-    send.textContent = translate(locale, "Reply");
-    send.addEventListener("click", () => {
-      if (!input.value.trim()) return;
-      options.onReply(comment.id, input.value.trim());
-      input.value = "";
-    });
-    replyForm.append(input, send);
-    thread.append(replyForm);
-  }
-  return thread;
+function wordCommentThreads(comments) {
+  const entry = (comment) => ({
+    id: comment.id,
+    author: comment.author,
+    text: comment.text,
+    ...comment.initials ? { initials: comment.initials } : {},
+    ...comment.date ? { created: comment.date } : {}
+  });
+  return comments.filter((comment) => !comment.parentId).map((comment) => ({
+    id: comment.id,
+    resolved: Boolean(comment.resolved),
+    comments: [
+      entry(comment),
+      ...comments.filter((reply) => reply.parentId === comment.id).map(entry)
+    ]
+  }));
+}
+function labels2(locale) {
+  const t = (key2) => translate(locale, key2);
+  return {
+    heading: t("Comments"),
+    list: t("Comments"),
+    close: t("Close comments"),
+    newComment: t("New comment"),
+    add: t("Add comment"),
+    reply: t("Reply"),
+    resolve: t("Resolve"),
+    reopen: t("Reopen"),
+    resolved: t("Resolved"),
+    delete: t("Delete"),
+    empty: t("No comments")
+  };
 }
+var detail = (event) => event.detail;
 function createCommentsPanel(options) {
   let locale = "en";
-  const panel = document.createElement("aside");
+  defineCommentsPane();
+  const panel = document.createElement("office-ui-comments-pane");
   panel.className = "dve-comments-panel";
   panel.setAttribute("role", "complementary");
   panel.setAttribute("aria-label", translate(locale, "Comments"));
   panel.hidden = true;
-  const style = document.createElement("style");
-  style.textContent = styleText2;
-  const heading2 = document.createElement("h2");
-  heading2.textContent = translate(locale, "Comments");
-  const closeButton = document.createElement("button");
-  closeButton.type = "button";
-  closeButton.textContent = translate(locale, "Close comments");
-  closeButton.setAttribute("aria-label", translate(locale, "Close comments"));
-  closeButton.addEventListener("click", () => close3());
-  const newForm = document.createElement("div");
-  newForm.className = "dve-comment-new";
-  const newInput = document.createElement("textarea");
-  newInput.setAttribute("aria-label", translate(locale, "New comment"));
-  newInput.placeholder = translate(locale, "New comment");
-  const addButton = document.createElement("button");
-  addButton.type = "button";
-  addButton.textContent = translate(locale, "Add comment");
-  addButton.addEventListener("click", () => {
-    if (!newInput.value.trim()) return;
-    options.onAdd(newInput.value.trim());
-    newInput.value = "";
+  panel.closable = true;
+  panel.classNames = { thread: "dve-comment-card", comment: "dve-comment-thread" };
+  panel.labels = labels2(locale);
+  panel.addEventListener("comment-add", (event) => {
+    options.onAdd(detail(event).text);
     refresh();
   });
-  newForm.append(newInput, addButton);
-  const list = document.createElement("div");
-  panel.append(style, heading2, closeButton, newForm, list);
+  panel.addEventListener(
+    "comment-reply",
+    (event) => options.onReply(detail(event).threadId, detail(event).text)
+  );
+  panel.addEventListener(
+    "thread-resolve",
+    (event) => options.onResolve(detail(event).threadId, true)
+  );
+  panel.addEventListener(
+    "thread-reopen",
+    (event) => options.onResolve(detail(event).threadId, false)
+  );
+  panel.addEventListener("comment-delete", (event) => options.onDelete(detail(event).commentId));
+  panel.addEventListener("thread-select", (event) => options.onSelect?.(detail(event).threadId));
+  panel.addEventListener("comments-close", () => close3());
   let isOpen = false;
   function close3() {
     isOpen = false;
@@ -17569,24 +17532,11 @@ function createCommentsPanel(options) {
     options.onClose?.();
   }
   function refresh() {
-    addButton.disabled = !options.canAdd();
-    const comments = options.getModel().comments ?? [];
-    list.replaceChildren();
-    const top = comments.filter((comment) => !comment.parentId);
-    if (!top.length) {
-      const empty = document.createElement("p");
-      empty.className = "dve-comment-empty";
-      empty.textContent = translate(locale, "No comments");
-      list.append(empty);
-      return;
-    }
-    for (const comment of top) {
-      list.append(row3(comment, false, locale, options));
-      for (const reply of comments.filter((item) => item.parentId === comment.id))
-        list.append(row3(reply, true, locale, options));
-    }
+    panel.readOnly = !(options.canEdit?.() ?? true);
+    panel.addDisabled = !options.canAdd();
+    panel.activeThreadId = options.activeId?.() ?? null;
+    panel.threads = wordCommentThreads(options.getModel().comments ?? []);
   }
-  localizeElement(panel, locale);
   refresh();
   return {
     element: panel,
@@ -17602,13 +17552,9 @@ function createCommentsPanel(options) {
     refresh,
     setLocale(value) {
       locale = normalizeEditorLocale(value);
-      heading2.textContent = translate(locale, "Comments");
       panel.setAttribute("aria-label", translate(locale, "Comments"));
-      closeButton.textContent = translate(locale, "Close comments");
-      closeButton.setAttribute("aria-label", translate(locale, "Close comments"));
-      newInput.setAttribute("aria-label", translate(locale, "New comment"));
-      newInput.placeholder = translate(locale, "New comment");
-      addButton.textContent = translate(locale, "Add comment");
+      panel.labels = labels2(locale);
+      panel.locale = locale;
       refresh();
     }
   };
@@ -17625,6 +17571,11 @@ var ReviewController = class {
         const view = host.getView();
         return Boolean(host.canEditComments() && view && !view.state.selection.empty);
       },
+      activeId: () => {
+        const view = host.getView();
+        return view ? commentIdsAtSelection(view)[0] : void 0;
+      },
+      onSelect: (id) => this.goToAnchor(id),
       onAdd: (text) => this.addComment(text),
       onReply: (parentId, text) => {
         if (!host.canEditComments()) return;
@@ -17664,6 +17615,15 @@ var ReviewController = class {
   setLocale(locale) {
     this.commentsPanel.setLocale(locale);
   }
+  /** Moves the caret to the start of a thread's anchored text (the pane keeps focus). */
+  goToAnchor(id) {
+    const view = this.host.getView();
+    const anchor = view && commentAnchors(view).find((item) => item.id === id);
+    if (!view || !anchor) return;
+    view.dispatch(
+      view.state.tr.setSelection(TextSelection.create(view.state.doc, anchor.from)).scrollIntoView()
+    );
+  }
   /** Removes a comment, its replies and its anchored range in one go. */
   deleteById(id) {
     if (!this.host.canEditComments()) return;
@@ -17869,9 +17829,9 @@ function renderOptions({ handlers, t, content }) {
     input.type = "checkbox";
     input.checked = current2[key2];
     input.addEventListener("change", () => handlers.setOption(key2, String(input.checked)));
-    const row4 = field2(label, input);
-    row4.classList.add("dve-backstage-toggle");
-    controls.push(row4);
+    const row3 = field2(label, input);
+    row3.classList.add("dve-backstage-toggle");
+    controls.push(row3);
   }
   const note = document.createElement("p");
   note.className = "dve-backstage-muted";
@@ -17930,9 +17890,9 @@ var facts = (rows, t) => {
   for (const [label, value] of rows) {
     const term = document.createElement("dt");
     term.textContent = t(label);
-    const detail = document.createElement("dd");
-    detail.textContent = value;
-    list.append(term, detail);
+    const detail2 = document.createElement("dd");
+    detail2.textContent = value;
+    list.append(term, detail2);
   }
   return list;
 };
@@ -18144,16 +18104,16 @@ function renderCustomize({ handlers, t, content }) {
         const id = ribbonControlId(control);
         if (!id || seen.has(id)) continue;
         seen.add(id);
-        const row4 = document.createElement("label");
-        row4.className = "dve-customize-row";
+        const row3 = document.createElement("label");
+        row3.className = "dve-customize-row";
         const input = document.createElement("input");
         input.type = "checkbox";
         input.checked = !hidden.has(id);
         input.addEventListener("change", commit);
         const text = document.createElement("span");
         text.textContent = control.getAttribute("aria-label") ?? id;
-        row4.append(input, text);
-        list.append(row4);
+        row3.append(input, text);
+        list.append(row3);
         boxes.push({ id, input });
       }
       if (list.children.length > 1) tabSection.append(list);
@@ -18827,25 +18787,25 @@ function openTablePicker(anchor, onPick, onClose) {
   const paint = () => {
     caption.textContent = translateTemplate(locale, "table.size", { columns, rows });
     cells.forEach((cell, index) => {
-      const row4 = Math.floor(index / PICKER_COLUMNS);
+      const row3 = Math.floor(index / PICKER_COLUMNS);
       const column = index % PICKER_COLUMNS;
-      cell.classList.toggle("active", row4 < rows && column < columns);
+      cell.classList.toggle("active", row3 < rows && column < columns);
     });
   };
-  for (let row4 = 0; row4 < PICKER_ROWS; row4++)
+  for (let row3 = 0; row3 < PICKER_ROWS; row3++)
     for (let column = 0; column < PICKER_COLUMNS; column++) {
       const cell = document.createElement("div");
       cell.setAttribute("role", "gridcell");
-      cell.dataset.rows = String(row4 + 1);
+      cell.dataset.rows = String(row3 + 1);
       cell.dataset.columns = String(column + 1);
       cell.addEventListener("mouseenter", () => {
-        rows = row4 + 1;
+        rows = row3 + 1;
         columns = column + 1;
         paint();
       });
       cell.addEventListener("mousedown", (event) => event.preventDefault());
       cell.addEventListener("click", () => {
-        onPick(row4 + 1, column + 1);
+        onPick(row3 + 1, column + 1);
         onClose();
       });
       cells.push(cell);
@@ -19408,9 +19368,9 @@ var PageNavigator = class {
     }
     const version = this.host.version();
     if (version !== this.built || this.thumbs.length !== status.total) this.rebuild(version);
-    const labels2 = `${locale}:${status.total}`;
-    if (labels2 !== this.labels) this.relabelThumbs(locale, status.total);
-    this.labels = labels2;
+    const labels3 = `${locale}:${status.total}`;
+    if (labels3 !== this.labels) this.relabelThumbs(locale, status.total);
+    this.labels = labels3;
     this.mark(status.current);
   }
   relabelChrome(locale, active, ready) {
@@ -19880,7 +19840,7 @@ function createContextMenu(host) {
         element.state = {
           ...state,
           items: state.items.map(
-            (row4) => row4.id === "paste" ? { ...row4, disabled: true, title: denied } : row4
+            (row3) => row3.id === "paste" ? { ...row3, disabled: true, title: denied } : row3
           )
         };
       });
@@ -19926,7 +19886,7 @@ function shortcutRows(registry, mac) {
     label: shortcut.label,
     keys: registry.keysFor(shortcut.id, mac).join(" / ")
   }));
-  return [...general, ...editorShortcutRows(mac)].filter((row4) => row4.keys);
+  return [...general, ...editorShortcutRows(mac)].filter((row3) => row3.keys);
 }
 function createShortcutHelp(onClose) {
   const element = createDialogShell("", "dve-shortcut-help");
@@ -19966,11 +19926,11 @@ function createShortcutHelp(onClose) {
         head.append(cell);
       }
       const body = table.createTBody();
-      for (const row4 of rows) {
+      for (const row3 of rows) {
         const tr = body.insertRow();
-        tr.insertCell().textContent = translate(locale, row4.label);
+        tr.insertCell().textContent = translate(locale, row3.label);
         const kbd = document.createElement("kbd");
-        kbd.textContent = row4.keys;
+        kbd.textContent = row3.keys;
         tr.insertCell().append(kbd);
       }
       setDialogOpen(element, true);