@beyondwork/docx-react-component 1.0.121 → 1.0.123

package/dist/ui-tailwind.cjs

@@ -880,14 +880,13 @@ var TOOLBAR_CHROME_REGISTRY = [
     surfaces: ["top-toolbar"],
     group: "text",
     presets: ["advanced", "review", "workflow"],
-    roles: ALL_ROLES,
+    roles: EDITOR_AND_REVIEW,
     fullPlacement: "inline",
     compactPlacement: "overflow",
     runtimeBehavior: "formatting",
     rolePlacement: {
       editor: "inline",
-      review: "inline",
-      workflow: "overflow"
+      review: "overflow"
     }
   },
   {
@@ -895,14 +894,13 @@ var TOOLBAR_CHROME_REGISTRY = [
     surfaces: ["top-toolbar"],
     group: "text",
     presets: ["simple", "advanced", "review", "workflow"],
-    roles: ALL_ROLES,
+    roles: EDITOR_AND_REVIEW,
     fullPlacement: "inline",
     compactPlacement: "inline",
     runtimeBehavior: "formatting",
     rolePlacement: {
       editor: "inline",
-      review: "inline",
-      workflow: "overflow"
+      review: "overflow"
     }
   },
   {
@@ -1029,10 +1027,9 @@ var TOOLBAR_CHROME_REGISTRY = [
     surfaces: ["top-toolbar"],
     group: "review",
     presets: ["simple", "advanced", "review", "workflow"],
-    // Visible in every role, but editor/review roles render it inside the
-    // role action region (see ROLE_ACTION_SETS) and the right cluster
-    // suppresses it via `isChromeItemOwnedByRoleRegion` to avoid duplication.
-    roles: ALL_ROLES,
+    // Comment authoring belongs to Edit / Review. Workflow mode keeps scope
+    // and work-item controls primary instead of carrying review chrome.
+    roles: EDITOR_AND_REVIEW,
     fullPlacement: "inline",
     compactPlacement: "inline",
     runtimeBehavior: "comment"
@@ -2598,12 +2595,16 @@ function TwToolbar(props) {
   const showUpdateActions = isToolbarChromeItemVisible(scopedChromePolicy, "update-actions");
   const showSidebarToggle = (props.showSidebarToggle ?? false) && isToolbarChromeItemVisible(scopedChromePolicy, "sidebar-toggle");
   const showStyleSelectorsInRow = getToolbarChromePlacement(scopedChromePolicy, "text-style-selectors") === "inline";
+  const showStyleSelectorsInOverflow = getToolbarChromePlacement(scopedChromePolicy, "text-style-selectors") === "overflow";
+  const showInlineFormattingInOverflow = getToolbarChromePlacement(scopedChromePolicy, "inline-formatting") === "overflow";
+  const showTextColorsInOverflow = getToolbarChromePlacement(scopedChromePolicy, "text-colors") === "overflow";
+  const showParagraphAlignmentInOverflow = getToolbarChromePlacement(scopedChromePolicy, "paragraph-alignment") === "overflow";
   const showListActionsInRow = getToolbarChromePlacement(scopedChromePolicy, "list-actions") === "inline";
   const showSpacingActionsInRow = getToolbarChromePlacement(scopedChromePolicy, "indentation") === "inline";
   const showListContinuationInRow = getToolbarChromePlacement(scopedChromePolicy, "list-continuation") === "inline";
   const showInsertActionsInRow = getToolbarChromePlacement(scopedChromePolicy, "insert-actions") === "inline";
   const showUpdateActionsInRow = getToolbarChromePlacement(scopedChromePolicy, "update-actions") === "inline";
-  const showCompactOverflow = getToolbarChromePlacement(scopedChromePolicy, "text-style-selectors") === "overflow" || getToolbarChromePlacement(scopedChromePolicy, "list-actions") === "overflow" || getToolbarChromePlacement(scopedChromePolicy, "indentation") === "overflow" || getToolbarChromePlacement(scopedChromePolicy, "list-continuation") === "overflow" || getToolbarChromePlacement(scopedChromePolicy, "insert-actions") === "overflow" || getToolbarChromePlacement(scopedChromePolicy, "update-actions") === "overflow";
+  const showCompactOverflow = getToolbarChromePlacement(scopedChromePolicy, "text-style-selectors") === "overflow" || getToolbarChromePlacement(scopedChromePolicy, "inline-formatting") === "overflow" || getToolbarChromePlacement(scopedChromePolicy, "text-colors") === "overflow" || getToolbarChromePlacement(scopedChromePolicy, "paragraph-alignment") === "overflow" || getToolbarChromePlacement(scopedChromePolicy, "list-actions") === "overflow" || getToolbarChromePlacement(scopedChromePolicy, "indentation") === "overflow" || getToolbarChromePlacement(scopedChromePolicy, "list-continuation") === "overflow" || getToolbarChromePlacement(scopedChromePolicy, "insert-actions") === "overflow" || getToolbarChromePlacement(scopedChromePolicy, "update-actions") === "overflow";
   const showPostFormattingDivider = showListActionsInRow || showSpacingActionsInRow || showInsertActionsInRow || showUpdateActionsInRow || showCompactOverflow;
   const zoomLabel = typeof zoomLevel === "number" ? `${zoomLevel}%` : zoomLevel === "pageWidth" ? "Fit width" : "Fit page";
   const showZoomSteppers = responsiveTier === "wide";
@@ -2898,14 +2899,26 @@ function TwToolbar(props) {
               insertDisabledReason,
               paragraphStyles,
               showInsertMenu: getToolbarChromePlacement(scopedChromePolicy, "insert-actions") === "overflow",
+              showInlineFormatting: showInlineFormattingInOverflow,
               showListActions: getToolbarChromePlacement(scopedChromePolicy, "list-actions") === "overflow",
               showParagraphActions: getToolbarChromePlacement(scopedChromePolicy, "indentation") === "overflow",
+              showParagraphAlignment: showParagraphAlignmentInOverflow,
               showListContinuation: getToolbarChromePlacement(scopedChromePolicy, "list-continuation") === "overflow",
-              showStyleSelectors: getToolbarChromePlacement(scopedChromePolicy, "text-style-selectors") === "overflow",
+              showStyleSelectors: showStyleSelectorsInOverflow,
+              showTextColors: showTextColorsInOverflow,
               showUpdateActions: getToolbarChromePlacement(scopedChromePolicy, "update-actions") === "overflow",
               onSetParagraphStyle: props.onSetParagraphStyle,
               onSetFontFamily: props.onSetFontFamily,
               onSetFontSize: props.onSetFontSize,
+              onToggleBold: props.onToggleBold,
+              onToggleItalic: props.onToggleItalic,
+              onToggleUnderline: props.onToggleUnderline,
+              onToggleStrikethrough: props.onToggleStrikethrough,
+              onToggleSuperscript: props.onToggleSuperscript,
+              onToggleSubscript: props.onToggleSubscript,
+              onSetTextColor: props.onSetTextColor,
+              onSetHighlightColor: props.onSetHighlightColor,
+              onSetAlignment: props.onSetAlignment,
               onToggleBulletedList: props.onToggleBulletedList,
               onToggleNumberedList: props.onToggleNumberedList,
               onOutdent: props.onOutdent,
@@ -3415,8 +3428,8 @@ function ToolbarFontSizeSelect(props) {
 function ToolbarCompactOverflow(props) {
   const [open, setOpen] = import_react4.default.useState(false);
   const overflowGroups = [
-    props.showStyleSelectors ? "Format" : null,
-    props.showListActions || props.showParagraphActions || props.showListContinuation ? "Paragraph" : null,
+    props.showStyleSelectors || props.showInlineFormatting || props.showTextColors ? "Format" : null,
+    props.showListActions || props.showParagraphActions || props.showParagraphAlignment || props.showListContinuation ? "Paragraph" : null,
     props.showInsertMenu ? "Insert" : null,
     props.showUpdateActions ? "Update" : null
   ].filter((label) => Boolean(label));
@@ -3501,6 +3514,129 @@ function ToolbarCompactOverflow(props) {
           ] })
         ] })
       ] }) : null,
+      props.showInlineFormatting || props.showTextColors ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-1", children: [
+        !props.showStyleSelectors ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-1 text-[10px] font-semibold uppercase tracking-[var(--tracking-status)] text-tertiary", children: "Text" }) : null,
+        props.showInlineFormatting ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ToolbarMenuButton,
+            {
+              ariaLabel: "Bold",
+              disabled: !props.canEdit || !props.onToggleBold,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Bold, { className: "h-3.5 w-3.5" }),
+              label: "Bold",
+              onClick: () => {
+                props.onToggleBold?.();
+                setOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ToolbarMenuButton,
+            {
+              ariaLabel: "Italic",
+              disabled: !props.canEdit || !props.onToggleItalic,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Italic, { className: "h-3.5 w-3.5" }),
+              label: "Italic",
+              onClick: () => {
+                props.onToggleItalic?.();
+                setOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ToolbarMenuButton,
+            {
+              ariaLabel: "Underline",
+              disabled: !props.canEdit || !props.onToggleUnderline,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Underline, { className: "h-3.5 w-3.5" }),
+              label: "Underline",
+              onClick: () => {
+                props.onToggleUnderline?.();
+                setOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ToolbarMenuButton,
+            {
+              ariaLabel: "Strikethrough",
+              disabled: !props.canEdit || !props.onToggleStrikethrough,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Strikethrough, { className: "h-3.5 w-3.5" }),
+              label: "Strikethrough",
+              onClick: () => {
+                props.onToggleStrikethrough?.();
+                setOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ToolbarMenuButton,
+            {
+              ariaLabel: "Superscript",
+              disabled: !props.canEdit || !props.onToggleSuperscript,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Superscript, { className: "h-3.5 w-3.5" }),
+              label: "Superscript",
+              onClick: () => {
+                props.onToggleSuperscript?.();
+                setOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ToolbarMenuButton,
+            {
+              ariaLabel: "Subscript",
+              disabled: !props.canEdit || !props.onToggleSubscript,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Subscript, { className: "h-3.5 w-3.5" }),
+              label: "Subscript",
+              onClick: () => {
+                props.onToggleSubscript?.();
+                setOpen(false);
+              }
+            }
+          )
+        ] }) : null,
+        props.showTextColors ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-2 gap-2 px-1 pt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ToolbarColorPopover,
+            {
+              ariaLabel: "Text color",
+              colors: TEXT_COLORS.map((value) => ({ value, label: value })),
+              disabled: !props.canEdit || !props.onSetTextColor,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Baseline, { className: "h-3.5 w-3.5" }),
+              onSelect: (value) => {
+                if (value) {
+                  props.onSetTextColor?.(value);
+                  setOpen(false);
+                }
+              },
+              title: "Text color"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ToolbarColorPopover,
+            {
+              ariaLabel: "Highlight color",
+              colors: HIGHLIGHT_COLORS.map((entry) => ({ value: entry.value, label: entry.label })),
+              disabled: !props.canEdit || !props.onSetHighlightColor,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Highlighter, { className: "h-3.5 w-3.5" }),
+              onSelect: (value) => {
+                props.onSetHighlightColor?.(value);
+                setOpen(false);
+              },
+              title: "Highlight color"
+            }
+          )
+        ] }) : null
+      ] }) : null,
       props.showListActions ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-1 text-[10px] font-semibold uppercase tracking-[var(--tracking-status)] text-tertiary", children: "Structure" }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -3532,8 +3668,20 @@ function ToolbarCompactOverflow(props) {
           }
         )
       ] }) : null,
-      props.showParagraphActions || props.showListContinuation && props.activeListContext ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-1", children: [
+      props.showParagraphActions || props.showParagraphAlignment || props.showListContinuation && props.activeListContext ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-1 text-[10px] font-semibold uppercase tracking-[var(--tracking-status)] text-tertiary", children: "Paragraph" }),
+        props.showParagraphAlignment ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "px-1 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          ToolbarAlignmentPopover,
+          {
+            activeAlignment: props.formattingState?.alignment,
+            disabled: !props.canEdit || !props.onSetAlignment,
+            disabledReason: props.editDisabledReason,
+            onSelect: (alignment) => {
+              props.onSetAlignment?.(alignment);
+              setOpen(false);
+            }
+          }
+        ) }) : null,
         props.showParagraphActions ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             ToolbarMenuButton,
@@ -7253,12 +7401,13 @@ function buildBlockCacheSignature(context, blockIndex) {
     owner?.targetKey ?? ""
   ].join("|");
 }
-function collectEditableTargetsInBlocks(blocks, context, targets, cache) {
+function collectEditableTargetsInBlocks(blocks, context, targets, cache, blockIndexOffset = 0) {
   for (let blockIndex = 0; blockIndex < blocks.length; blockIndex += 1) {
     const block = blocks[blockIndex];
     if (!block) continue;
-    const blockPath = `${context.basePath}/block[${blockIndex}]`;
-    const signature = cache !== void 0 ? buildBlockCacheSignature(context, blockIndex) : "";
+    const absoluteBlockIndex = blockIndex + blockIndexOffset;
+    const blockPath = `${context.basePath}/block[${absoluteBlockIndex}]`;
+    const signature = cache !== void 0 ? buildBlockCacheSignature(context, absoluteBlockIndex) : "";
     if (cache !== void 0) {
       const cached = cache.get(block);
       if (cached !== void 0 && cached.blockPath === blockPath && cached.signature === signature) {
@@ -12127,6 +12276,8 @@ function createSurfaceBlock(block, document2, cursor, counters, formattingContex
     formattingContext,
     promoteSecondaryStoryTextBoxes,
     cullBuild,
+    editableTargetsByBlockPath,
+    blockPath,
     blockPath !== void 0 ? editableTargetsByBlockPath.get(blockPath) : void 0
   );
 }
@@ -12533,7 +12684,7 @@ function getRecursableSdtBlockedReasonCode(block) {
   ].filter(Boolean).join(" ").toLowerCase();
   return searchText.includes("table of contents") || /\btoc\b/u.test(searchText) ? "workflow_preserve_only" : null;
 }
-function createParagraphBlock(paragraphIndex, paragraph, document2, start, formattingContext, promoteSecondaryStoryTextBoxes, cullBuild = false, editableTarget) {
+function createParagraphBlock(paragraphIndex, paragraph, document2, start, formattingContext, promoteSecondaryStoryTextBoxes, cullBuild = false, editableTargetsByBlockPath = EMPTY_EDITABLE_TARGETS_BY_BLOCK_PATH, blockPath, editableTarget) {
   const themeResolver = formattingContext.theme;
   const effectiveNumbering = formattingContext.resolveEffectiveParagraphNumbering(paragraph);
   let resolvedNumbering = null;
@@ -12598,6 +12749,8 @@ function createParagraphBlock(paragraphIndex, paragraph, document2, start, forma
       document2,
       cursor,
       promoteSecondaryStoryTextBoxes,
+      blockPath !== void 0 ? `${blockPath}/inline[${childIndex}]` : void 0,
+      editableTargetsByBlockPath,
       void 0,
       cullBuild,
       themeResolver,
@@ -12654,7 +12807,7 @@ function isVisibleTocResultInline(node) {
       return false;
   }
 }
-function appendInlineSegments(paragraph, node, document2, start, promoteSecondaryStoryTextBoxes, hyperlinkHref, cullBuild = false, themeResolver, formattingContext) {
+function appendInlineSegments(paragraph, node, document2, start, promoteSecondaryStoryTextBoxes, inlinePath, editableTargetsByBlockPath = EMPTY_EDITABLE_TARGETS_BY_BLOCK_PATH, hyperlinkHref, cullBuild = false, themeResolver, formattingContext) {
   switch (node.type) {
     case "text": {
       const cloned = node.marks ? cloneMarks2(node.marks) : { marks: [] };
@@ -12707,13 +12860,16 @@ function appendInlineSegments(paragraph, node, document2, start, promoteSecondar
       return { nextCursor: start + 1, lockedFragmentIds: [] };
     case "hyperlink": {
       let cursor = start;
-      for (const child of node.children) {
+      for (let childIndex = 0; childIndex < node.children.length; childIndex += 1) {
+        const child = node.children[childIndex];
         const result = appendInlineSegments(
           paragraph,
           child,
           document2,
           cursor,
           promoteSecondaryStoryTextBoxes,
+          inlinePath !== void 0 ? `${inlinePath}/child[${childIndex}]` : void 0,
+          editableTargetsByBlockPath,
           node.href,
           cullBuild,
           themeResolver,
@@ -12772,6 +12928,33 @@ function appendInlineSegments(paragraph, node, document2, start, promoteSecondar
       if (isMicrosoftSensitivityLabelShape(node)) {
         return { nextCursor: start + 1, lockedFragmentIds: [] };
       }
+      if (node.isTextBox && node.txbxBlocks !== void 0) {
+        const txbxTextSegment = extractTxbxFirstTextSegment(node.txbxBlocks);
+        const txbxText = txbxTextSegment?.text ?? node.text;
+        const txbxBody = surfaceTextBoxBodyFromShape(
+          node,
+          void 0,
+          inlinePath,
+          editableTargetsByBlockPath
+        );
+        paragraph.segments.push({
+          segmentId: `${paragraph.blockId}-segment-${paragraph.segments.length}`,
+          kind: "shape",
+          from: start,
+          to: start + 1,
+          label: "Text box",
+          detail: createShapeDetail(node),
+          ...node.geometry !== void 0 ? { geometry: node.geometry } : {},
+          isTextBox: true,
+          ...node.textBoxBody ? { textBoxBody: node.textBoxBody } : {},
+          ...node.preserveOnlyObject ? { preserveOnlyObject: surfacePreserveOnlyObject(node.preserveOnlyObject) } : {},
+          ...txbxText ? { txbxText } : {},
+          ...txbxBody ? { txbxBody } : {},
+          ...txbxTextSegment?.marks && txbxTextSegment.marks.length > 0 ? { txbxMarks: txbxTextSegment.marks } : {},
+          ...txbxTextSegment?.markAttrs ? { txbxMarkAttrs: txbxTextSegment.markAttrs } : {}
+        });
+        return { nextCursor: start + 1, lockedFragmentIds: [] };
+      }
       if (promoteSecondaryStoryTextBoxes && node.isTextBox && node.text) {
         return appendTextBoxSegment(
           paragraph,
@@ -12831,7 +13014,7 @@ function appendInlineSegments(paragraph, node, document2, start, promoteSecondar
         const anchor = surfaceAnchorFromGeometry(node.anchor);
         const txbxTextSegment = c.isTextBox ? extractTxbxFirstTextSegment(c.txbxBlocks) : void 0;
         const txbxText = txbxTextSegment?.text ?? (c.isTextBox ? c.text : void 0);
-        const txbxBody = c.isTextBox ? surfaceTextBoxBodyFromShape(c, node.sourceRef) : void 0;
+        const txbxBody = c.isTextBox ? surfaceTextBoxBodyFromShape(c, node.sourceRef, inlinePath, editableTargetsByBlockPath) : void 0;
         const surfaceFill = c.fill;
         paragraph.segments.push({
           segmentId: `${paragraph.blockId}-segment-${paragraph.segments.length}`,
@@ -13008,13 +13191,16 @@ function appendInlineSegments(paragraph, node, document2, start, promoteSecondar
         const refHyperlinkHref = (node.fieldFamily === "REF" || node.fieldFamily === "PAGEREF" || node.fieldFamily === "NOTEREF") && node.switches?.hyperlink === true && node.fieldTarget ? `#${node.fieldTarget}` : void 0;
         let cursor = start;
         const lockedIds = [];
-        for (const child of node.children) {
+        for (let childIndex = 0; childIndex < node.children.length; childIndex += 1) {
+          const child = node.children[childIndex];
           const result = appendInlineSegments(
             paragraph,
             child,
             document2,
             cursor,
             promoteSecondaryStoryTextBoxes,
+            inlinePath !== void 0 ? `${inlinePath}/child[${childIndex}]` : void 0,
+            editableTargetsByBlockPath,
             refHyperlinkHref ?? hyperlinkHref,
             cullBuild,
             themeResolver,
@@ -13261,7 +13447,7 @@ function extractTxbxFirstTextSegment(blocks) {
   }
   return void 0;
 }
-function surfaceTextBoxBodyFromShape(shape, sourceRef) {
+function surfaceTextBoxBodyFromShape(shape, sourceRef, inlinePath, editableTargetsByBlockPath = EMPTY_EDITABLE_TARGETS_BY_BLOCK_PATH) {
   if (!shape.isTextBox && shape.txbxContentXml === void 0 && shape.txbxBlocks === void 0) {
     return void 0;
   }
@@ -13287,9 +13473,12 @@ function surfaceTextBoxBodyFromShape(shape, sourceRef) {
       (run, inlineIndex) => surfaceTextBoxRunFromLegacyRun(run, inlineIndex)
     ) ?? [];
     const text = runs.map((run) => run.text ?? "").join("");
+    const blockPath = inlinePath !== void 0 ? `${inlinePath}/txbx/block[${blockIndex}]` : void 0;
+    const editableTarget = blockPath !== void 0 ? editableTargetsByBlockPath.get(blockPath) : void 0;
     return [{
       ...block.sourceRef !== void 0 ? { sourceRef: block.sourceRef } : {},
       blockIndex,
+      ...editableTarget !== void 0 ? { editableTarget } : {},
       text,
       textLength: Array.from(text).length,
       ...block.borders !== void 0 ? { borders: block.borders } : {},
@@ -16557,6 +16746,7 @@ function buildPageGraph(inputOrPages, sectionsArg, storiesArg) {
       regions,
       divergences: frameDivergences,
       subParts: input.subParts,
+      anchors: input.anchors,
       pageFieldCounts
     });
     const divergences = builtFrame.divergences;
@@ -16723,6 +16913,7 @@ function buildPageFrame(input) {
     stories: input.stories,
     regions,
     subParts: input.subParts,
+    anchors: input.anchors,
     pageFieldCounts: input.pageFieldCounts
   });
   const divergences = [...input.divergences, ...pageLocalStoryResult.divergences];
@@ -16760,6 +16951,7 @@ function buildPageLocalStoryInstances(input) {
       input.stories.header,
       input.regions.header,
       findHeaderFooterPart(input.subParts?.headers, input.stories.header),
+      input.anchors,
       input.pageFieldCounts
     );
     instances.push(built.instance);
@@ -16776,6 +16968,7 @@ function buildPageLocalStoryInstances(input) {
       input.stories.footer,
       input.regions.footer,
       findHeaderFooterPart(input.subParts?.footers, input.stories.footer),
+      input.anchors,
       input.pageFieldCounts
     );
     instances.push(built.instance);
@@ -16783,7 +16976,7 @@ function buildPageLocalStoryInstances(input) {
   }
   return { instances, divergences };
 }
-function buildPageLocalStoryInstance(frameId, pageId, pageIndex, sectionIndex, displayPageNumber, layout, target, region, source, pageFieldCounts) {
+function buildPageLocalStoryInstance(frameId, pageId, pageIndex, sectionIndex, displayPageNumber, layout, target, region, source, anchors, pageFieldCounts) {
   const measuredFrameHeightTwips = region?.heightTwips ?? 0;
   const sectionPart = target.sectionIndex === void 0 ? "section-unknown" : `section-${target.sectionIndex}`;
   const instanceId = `${frameId}:${target.kind}:${target.variant}:${target.relationshipId}`;
@@ -16804,7 +16997,9 @@ function buildPageLocalStoryInstance(frameId, pageId, pageIndex, sectionIndex, d
     kind: target.kind,
     variant: target.variant,
     relationshipId: target.relationshipId,
-    region
+    region,
+    storyBasePath: `${target.kind}:${source.partPath ?? `word/${target.kind}${target.relationshipId}.xml`}`,
+    anchorsByInlinePath: buildAnchorsByInlinePath(anchors)
   }) : { objects: [], divergences: [] };
   const signature = buildPageLocalStorySignature({
     kind: target.kind,
@@ -16858,6 +17053,23 @@ function buildPageLocalStorySignature(input) {
         object.anchorRectTwips?.yTwips ?? "",
         object.anchorRectTwips?.widthTwips ?? "",
         object.anchorRectTwips?.heightTwips ?? "",
+        object.textBoxBody?.bodyKey ?? "",
+        object.textBoxBody?.status ?? "",
+        object.textBoxBody?.unavailableReason ?? "",
+        object.textBoxBody?.contentRectTwips?.xTwips ?? "",
+        object.textBoxBody?.contentRectTwips?.yTwips ?? "",
+        object.textBoxBody?.contentRectTwips?.widthTwips ?? "",
+        object.textBoxBody?.contentRectTwips?.heightTwips ?? "",
+        object.textBoxBody?.paragraphs.map(
+          (paragraph) => [
+            paragraph.paragraphKey,
+            paragraph.rectTwips?.xTwips ?? "",
+            paragraph.rectTwips?.yTwips ?? "",
+            paragraph.rectTwips?.widthTwips ?? "",
+            paragraph.rectTwips?.heightTwips ?? "",
+            paragraph.unavailableReason ?? ""
+          ].join("/")
+        ).join(",") ?? "",
         object.relationshipIds?.join(",") ?? "",
         object.mediaIds?.join(",") ?? "",
         object.wrapMode ?? "",
@@ -17002,6 +17214,10 @@ function truncatePageLocalStoryPreview(text) {
   if (text.length <= MAX_PAGE_LOCAL_STORY_PREVIEW_CHARS) return text;
   return `${text.slice(0, MAX_PAGE_LOCAL_STORY_PREVIEW_CHARS - 1).trimEnd()}\u2026`;
 }
+function buildAnchorsByInlinePath(anchors) {
+  if (!anchors || anchors.length === 0) return void 0;
+  return new Map(anchors.map((anchor) => [anchor.inlinePath, anchor]));
+}
 function collectStoryAnchoredObjects(blocks, context) {
   const objects = [];
   const divergences = [];
@@ -17045,26 +17261,45 @@ function collectStoryAnchoredObjects(blocks, context) {
     });
     ordinal += 1;
   };
-  const visitBlock = (block) => {
+  const visitBlocks = (blocksToVisit, basePath) => {
+    for (let blockIndex = 0; blockIndex < blocksToVisit.length; blockIndex += 1) {
+      const block = blocksToVisit[blockIndex];
+      if (!block) continue;
+      visitBlock(block, `${basePath}/block[${blockIndex}]`);
+    }
+  };
+  const visitBlock = (block, blockPath) => {
     switch (block.type) {
       case "paragraph":
-        for (const child of block.children) visitInline(child);
+        visitInlines(block.children, blockPath, `${blockPath}/inline`);
         break;
       case "table":
-        for (const row of block.rows) {
-          for (const cell of row.cells) {
-            for (const child of cell.children) visitBlock(child);
+        for (let rowIndex = 0; rowIndex < block.rows.length; rowIndex += 1) {
+          const row = block.rows[rowIndex];
+          if (!row) continue;
+          for (let cellIndex = 0; cellIndex < row.cells.length; cellIndex += 1) {
+            const cell = row.cells[cellIndex];
+            if (!cell) continue;
+            visitBlocks(cell.children, `${blockPath}/row[${rowIndex}]/cell[${cellIndex}]`);
           }
         }
         break;
       case "sdt":
-        for (const child of block.children) visitBlock(child);
+      case "custom_xml":
+        visitBlocks(block.children, blockPath);
         break;
       default:
         break;
     }
   };
-  const visitInline = (inline) => {
+  const visitInlines = (inlines, blockPath, basePath) => {
+    for (let inlineIndex = 0; inlineIndex < inlines.length; inlineIndex += 1) {
+      const inline = inlines[inlineIndex];
+      if (!inline) continue;
+      visitInline(inline, blockPath, `${basePath}[${inlineIndex}]`);
+    }
+  };
+  const visitInline = (inline, blockPath, inlinePath) => {
     switch (inline.type) {
       case "image": {
         pushObject({
@@ -17085,17 +17320,27 @@ function collectStoryAnchoredObjects(blocks, context) {
           inline.anchor.extent.widthEmu,
           inline.anchor.extent.heightEmu
         );
+        const anchorRectTwips = resolveObjectAnchorRectTwips(
+          context.region,
+          extentTwips,
+          inline.anchor.positionH,
+          inline.anchor.positionV
+        );
+        const canonicalAnchor = context.anchorsByInlinePath?.get(inlinePath);
+        const textBoxBody = buildDrawingFrameTextBoxBodyFacts(
+          inline,
+          canonicalAnchor,
+          inlinePath,
+          display,
+          anchorRectTwips
+        );
         pushObject({
           objectId: getDrawingFrameObjectId(inline, context.storyKey, ordinal),
           sourceType: "drawing-frame",
           display,
           extentTwips,
-          anchorRectTwips: resolveObjectAnchorRectTwips(
-            context.region,
-            extentTwips,
-            inline.anchor.positionH,
-            inline.anchor.positionV
-          ),
+          anchorRectTwips,
+          ...textBoxBody ? { textBoxBody } : {},
           ...relationshipIds.length > 0 ? { relationshipIds } : {},
           ...inline.content.type === "picture" && inline.content.mediaId ? { mediaIds: [inline.content.mediaId] } : {},
           preserveOnly: Boolean(preserveHint),
@@ -17103,7 +17348,7 @@ function collectStoryAnchoredObjects(blocks, context) {
           wrapMode: inline.anchor.wrapMode
         });
         if (inline.content.type === "shape") {
-          for (const child of inline.content.txbxBlocks ?? []) visitBlock(child);
+          visitBlocks(inline.content.txbxBlocks ?? [], `${inlinePath}/txbx`);
         }
         break;
       }
@@ -17130,10 +17375,11 @@ function collectStoryAnchoredObjects(blocks, context) {
           } : {},
           ...preserveHint?.relationshipIds ? { relationshipIds: [...preserveHint.relationshipIds] } : {},
           preserveOnly: Boolean(preserveHint),
-          ...preserveHint ? { preserveHint } : {}
+          ...preserveHint ? { preserveHint } : {},
+          ...inline.type === "vml_shape" && inline.text ? { textBoxBody: buildUnsupportedVmlTextBoxFacts(inline, inlinePath) } : {}
         });
         if (inline.type === "shape") {
-          for (const child of inline.txbxBlocks ?? []) visitBlock(child);
+          visitBlocks(inline.txbxBlocks ?? [], `${inlinePath}/txbx`);
         }
         break;
       }
@@ -17155,16 +17401,16 @@ function collectStoryAnchoredObjects(blocks, context) {
         });
         break;
       case "field":
-        for (const child of inline.children) visitInline(child);
+        visitInlines(inline.children, blockPath, `${inlinePath}/child`);
         break;
       case "hyperlink":
-        for (const child of inline.children) visitInline(child);
+        visitInlines(inline.children, blockPath, `${inlinePath}/child`);
         break;
       default:
         break;
     }
   };
-  for (const block of blocks) visitBlock(block);
+  visitBlocks(blocks, context.storyBasePath);
   return { objects, divergences };
 }
 function getDrawingFramePreserveHint(inline) {
@@ -17172,6 +17418,170 @@ function getDrawingFramePreserveHint(inline) {
   if (content.type === "picture") return void 0;
   return content.preserveOnlyObject;
 }
+function buildDrawingFrameTextBoxBodyFacts(inline, canonicalAnchor, inlinePath, display, anchorRectTwips) {
+  if (inline.content.type !== "shape") return void 0;
+  const content = inline.content;
+  const canonicalBody = canonicalAnchor?.textBoxBody;
+  const hasTextBoxContent = Boolean(
+    canonicalBody || content.isTextBox || content.textBoxBody || content.txbxBlocks?.length
+  );
+  if (!hasTextBoxContent) return void 0;
+  if (!canonicalBody) {
+    return unavailableTextBoxBodyFacts(
+      `${canonicalAnchor?.objectKey ?? inlinePath}:txbx`,
+      "unmodeled-txbx-blocks",
+      content.textBoxBody,
+      content.txbxBlocks?.length ?? 0,
+      countParagraphBlocks(content.txbxBlocks ?? []),
+      0
+    );
+  }
+  if (display !== "floating") {
+    return unavailableTextBoxBodyFactsFromCanonical(canonicalBody, "inline-textbox");
+  }
+  if (!anchorRectTwips) {
+    return unavailableTextBoxBodyFactsFromCanonical(canonicalBody, "missing-anchor-rect");
+  }
+  if (canonicalBody.status !== "modeled") {
+    return unavailableTextBoxBodyFactsFromCanonical(
+      canonicalBody,
+      normalizeTextBoxBodyUnavailableReason(canonicalBody.unavailableReason)
+    );
+  }
+  const bodyInsetsTwips = textBoxInsetsTwips(canonicalBody.bodyProperties);
+  if (!bodyInsetsTwips) {
+    return unavailableTextBoxBodyFactsFromCanonical(canonicalBody, "missing-body-insets");
+  }
+  const contentRectTwips = rect(
+    anchorRectTwips.xTwips + bodyInsetsTwips.leftTwips,
+    anchorRectTwips.yTwips + bodyInsetsTwips.topTwips,
+    Math.max(0, anchorRectTwips.widthTwips - bodyInsetsTwips.leftTwips - bodyInsetsTwips.rightTwips),
+    Math.max(0, anchorRectTwips.heightTwips - bodyInsetsTwips.topTwips - bodyInsetsTwips.bottomTwips)
+  );
+  return {
+    bodyKey: canonicalBody.bodyKey,
+    status: "modeled",
+    ...canonicalBody.bodyProperties ? { bodyProperties: { ...canonicalBody.bodyProperties } } : {},
+    bodyInsetsTwips,
+    contentRectTwips,
+    blockCount: canonicalBody.blockCount,
+    paragraphCount: canonicalBody.paragraphCount,
+    unsupportedBlockCount: canonicalBody.unsupportedBlockCount,
+    paragraphs: buildTextBoxParagraphFacts(canonicalBody, contentRectTwips)
+  };
+}
+function unavailableTextBoxBodyFactsFromCanonical(body, reason) {
+  return {
+    bodyKey: body.bodyKey,
+    status: body.status === "preserve-only" ? "preserve-only" : "unavailable",
+    unavailableReason: reason,
+    ...body.bodyProperties ? { bodyProperties: { ...body.bodyProperties } } : {},
+    blockCount: body.blockCount,
+    paragraphCount: body.paragraphCount,
+    unsupportedBlockCount: body.unsupportedBlockCount,
+    paragraphs: body.paragraphs.map((paragraph) => ({
+      paragraphKey: paragraph.paragraphKey,
+      blockPath: paragraph.blockPath,
+      blockIndex: paragraph.blockIndex,
+      unavailableReason: reason,
+      ...paragraph.styleId !== void 0 ? { styleId: paragraph.styleId } : {},
+      ...paragraph.alignment !== void 0 ? { alignment: paragraph.alignment } : {},
+      textLength: paragraph.textLength,
+      runCount: paragraph.runCount
+    }))
+  };
+}
+function unavailableTextBoxBodyFacts(bodyKey, reason, bodyProperties, blockCount, paragraphCount, unsupportedBlockCount) {
+  return {
+    bodyKey,
+    status: "unavailable",
+    unavailableReason: reason,
+    ...bodyProperties ? { bodyProperties: { ...bodyProperties } } : {},
+    blockCount,
+    paragraphCount,
+    unsupportedBlockCount,
+    paragraphs: []
+  };
+}
+function buildUnsupportedVmlTextBoxFacts(inline, inlinePath) {
+  const hasText = Boolean(inline.text?.length);
+  return {
+    bodyKey: `${inline.preserveOnlyObject?.sourceId ?? inlinePath}:vml-textbox`,
+    status: "unavailable",
+    unavailableReason: "unsupported-vml-textbox",
+    blockCount: hasText ? 1 : 0,
+    paragraphCount: hasText ? 1 : 0,
+    unsupportedBlockCount: hasText ? 1 : 0,
+    paragraphs: []
+  };
+}
+function buildTextBoxParagraphFacts(body, contentRectTwips) {
+  const paragraphCount = body.paragraphs.length;
+  if (paragraphCount === 0) return [];
+  const baseHeight = Math.floor(contentRectTwips.heightTwips / paragraphCount);
+  return body.paragraphs.map((paragraph, index) => {
+    const yTwips = contentRectTwips.yTwips + baseHeight * index;
+    const heightTwips = index === paragraphCount - 1 ? Math.max(0, contentRectTwips.yTwips + contentRectTwips.heightTwips - yTwips) : Math.max(0, baseHeight);
+    return {
+      paragraphKey: paragraph.paragraphKey,
+      blockPath: paragraph.blockPath,
+      blockIndex: paragraph.blockIndex,
+      rectTwips: rect(
+        contentRectTwips.xTwips,
+        yTwips,
+        contentRectTwips.widthTwips,
+        heightTwips
+      ),
+      ...paragraph.styleId !== void 0 ? { styleId: paragraph.styleId } : {},
+      ...paragraph.alignment !== void 0 ? { alignment: paragraph.alignment } : {},
+      textLength: paragraph.textLength,
+      runCount: paragraph.runCount
+    };
+  });
+}
+function textBoxInsetsTwips(bodyProperties) {
+  if (!bodyProperties || bodyProperties.insetLeftEmu === void 0 || bodyProperties.insetTopEmu === void 0 || bodyProperties.insetRightEmu === void 0 || bodyProperties.insetBottomEmu === void 0) {
+    return void 0;
+  }
+  return {
+    leftTwips: Math.max(0, Math.round(bodyProperties.insetLeftEmu / EMUS_PER_TWIP)),
+    topTwips: Math.max(0, Math.round(bodyProperties.insetTopEmu / EMUS_PER_TWIP)),
+    rightTwips: Math.max(0, Math.round(bodyProperties.insetRightEmu / EMUS_PER_TWIP)),
+    bottomTwips: Math.max(0, Math.round(bodyProperties.insetBottomEmu / EMUS_PER_TWIP))
+  };
+}
+function normalizeTextBoxBodyUnavailableReason(reason) {
+  switch (reason) {
+    case "txbx-blocks-unavailable":
+    case "empty-body":
+    case "unsupported-content":
+      return reason;
+    default:
+      return "unmodeled-txbx-blocks";
+  }
+}
+function countParagraphBlocks(blocks) {
+  let count = 0;
+  const visit = (block) => {
+    if (block.type === "paragraph") {
+      count += 1;
+      return;
+    }
+    if (block.type === "table") {
+      for (const row of block.rows) {
+        for (const cell of row.cells) {
+          for (const child of cell.children) visit(child);
+        }
+      }
+      return;
+    }
+    if (block.type === "sdt" || block.type === "custom_xml") {
+      for (const child of block.children) visit(child);
+    }
+  };
+  for (const block of blocks) visit(block);
+  return count;
+}
 function collectDrawingRelationshipIds(inline) {
   const content = inline.content;
   if (content.type === "picture") return [content.blipRef];
@@ -17500,12 +17910,34 @@ function freezePageFrame(frame) {
   for (const story of frame.pageLocalStories) {
     Object.freeze(story.resolvedFields);
     Object.freeze(story.previewParts);
+    for (const object of story.anchoredObjects) {
+      freezeStoryAnchoredObject(object);
+    }
     Object.freeze(story.anchoredObjects);
     Object.freeze(story);
   }
   Object.freeze(frame.pageLocalStories);
   Object.freeze(frame);
 }
+function freezeStoryAnchoredObject(object) {
+  if (object.extentTwips) Object.freeze(object.extentTwips);
+  if (object.anchorRectTwips) Object.freeze(object.anchorRectTwips);
+  if (object.relationshipIds) Object.freeze(object.relationshipIds);
+  if (object.mediaIds) Object.freeze(object.mediaIds);
+  if (object.textBoxBody) {
+    if (object.textBoxBody.bodyProperties) Object.freeze(object.textBoxBody.bodyProperties);
+    if (object.textBoxBody.bodyInsetsTwips) Object.freeze(object.textBoxBody.bodyInsetsTwips);
+    if (object.textBoxBody.contentRectTwips) Object.freeze(object.textBoxBody.contentRectTwips);
+    for (const paragraph of object.textBoxBody.paragraphs) {
+      if (paragraph.rectTwips) Object.freeze(paragraph.rectTwips);
+      Object.freeze(paragraph);
+    }
+    Object.freeze(object.textBoxBody.paragraphs);
+    Object.freeze(object.textBoxBody);
+  }
+  Object.freeze(object.divergenceIds);
+  Object.freeze(object);
+}
 function normalizePageLocalStoryFieldsForPages(pages) {
   const pageFieldCounts = buildPageFieldCounts(pages);
   return pages.map((page) => {
@@ -19140,7 +19572,8 @@ function createLayoutEngine(options = {}) {
       fragmentsByPageIndex,
       lineBoxesByPageIndex,
       noteAllocationsByPageIndex: pageStack.noteAllocationsByPageIndex,
-      subParts: document2.subParts
+      subParts: document2.subParts,
+      anchors: layoutInputs.anchors
     });
     const graph = applyViewportWindowMaterialization(
       measuredGraph,
@@ -19275,7 +19708,8 @@ function createLayoutEngine(options = {}) {
       fragmentsByPageIndex: freshFragmentsByPageIndex,
       lineBoxesByPageIndex: freshLineBoxesByPageIndex,
       noteAllocationsByPageIndex: freshResult.noteAllocationsByPageIndex,
-      subParts: document2.subParts
+      subParts: document2.subParts,
+      anchors: layoutInputs.anchors
     });
     const freshNodes = freshGraph.pages;
     const splicedGraph = spliceGraph(priorGraph, freshNodes, firstDirty, convergedTailStart);
@@ -25766,10 +26200,7 @@ var TwPageStackOverlayLayer = ({
         null
       );
       if (warm) {
-        return extendPageOverlayRectsAcrossTableBoundaryGaps(
-          warm,
-          containsTableBoundaryRisk(scrollRoot) ? collectTableEmbeddedBoundaryIndices(scrollRoot) : []
-        );
+        return warm;
       }
     }
     return resolveSkeletalPageOverlayRectsFromLayout(facet);
@@ -25810,7 +26241,7 @@ var TwPageStackOverlayLayer = ({
       );
       if (uiRects !== null) {
         incrementInvalidationCounter("overlay.page.ui_api.hit");
-        setRectsIfChanged(reconcilePaperRectsWithFlow(uiRects, pageCount));
+        setRectsIfChanged(uiRects);
         return;
       }
       incrementInvalidationCounter("overlay.page.ui_api.fallthrough");
@@ -25825,7 +26256,7 @@ var TwPageStackOverlayLayer = ({
       );
       if (geometryRects !== null) {
         incrementInvalidationCounter("overlay.page.geometry.hit");
-        setRectsIfChanged(reconcilePaperRectsWithFlow(geometryRects, pageCount));
+        setRectsIfChanged(geometryRects);
         return;
       }
       incrementInvalidationCounter("overlay.page.geometry.fallthrough");
@@ -26194,11 +26625,6 @@ function buildParagraphStyle(block) {
       style[cssKey] = `${width} ${bStyle} ${color}`;
     }
   }
-  if (block.pageBreakBefore) {
-    style.borderTop = "2px dashed rgba(0,0,0,0.1)";
-    style.paddingTop = "8px";
-    style.marginTop = "16px";
-  }
   const framePr = block.frameProperties;
   const hasPosition = typeof framePr?.xTwips === "number" || typeof framePr?.yTwips === "number" || typeof framePr?.xAlign === "string" || typeof framePr?.yAlign === "string";
   if (framePr && framePr.dropCap !== "drop" && framePr.dropCap !== "margin" && hasPosition) {
@@ -28010,7 +28436,7 @@ var TwPageStackChromeLayerInner = ({
   const [activeStoryPageIndex, setActiveStoryPageIndex] = import_react29.default.useState(null);
   const refreshRectsNow = import_react29.default.useCallback(() => {
     const pageCount = facet.getPageCount();
-    const reconcileRects = (baseRects) => reconcilePageStackRectsWithFlow({
+    const reconcileDomRects = (baseRects) => reconcilePageStackRectsWithFlow({
       baseRects,
       pageCount,
       scrollRoot,
@@ -28018,7 +28444,7 @@ var TwPageStackChromeLayerInner = ({
     });
     const uiRects = resolveUiPageRects(pageCount);
     if (uiRects !== null) {
-      setRects(reconcileRects(uiRects));
+      setRects(uiRects);
       return;
     }
     if (geometryFacet) {
@@ -28028,7 +28454,7 @@ var TwPageStackChromeLayerInner = ({
         visiblePageIndexRange
       );
       if (geometryRects !== null) {
-        setRects(reconcileRects(geometryRects));
+        setRects(geometryRects);
         return;
       }
       setRects([]);
@@ -28056,7 +28482,7 @@ var TwPageStackChromeLayerInner = ({
         visiblePageIndexRange
       });
       setRects(
-        reconcileRects(domRects)
+        reconcileDomRects(domRects)
       );
     } else {
       const widgets = measureWidgetsViaOffsetChain(scrollRoot, {
@@ -28071,7 +28497,7 @@ var TwPageStackChromeLayerInner = ({
         visiblePageIndexRange
       });
       setRects(
-        reconcileRects(domRects)
+        reconcileDomRects(domRects)
       );
     }
   }, [facet, geometryFacet, resolveUiPageRects, scrollRoot, visiblePageIndexRange]);