@beyondwork/docx-react-component 1.0.121 → 1.0.123

package/dist/{chunk-QFU7ZOAD.js → chunk-PFYUJU3Q.js}

@@ -2,7 +2,7 @@ import {
   incrementInvalidationCounter,
   recordPerfSample,
   resolvePageOverlayRectsFromGeometry
-} from "./chunk-GZW2ERUO.js";
+} from "./chunk-N4VIXI2Z.js";
 import {
   buildPageAnchorAttributes,
   buildPageAnchorSelector,
@@ -10,7 +10,7 @@ import {
   resolveChromePreset,
   resolveChromePresetOptions,
   resolveChromeVisibilityForPreset
-} from "./chunk-GON2DNTE.js";
+} from "./chunk-HXHQA4BU.js";
 import {
   DEFAULT_PAGE_ESTIMATE_PX_PER_TWIP,
   DEFAULT_PX_PER_TWIP,
@@ -20,19 +20,19 @@ import {
   findPageForOffset,
   getUsableColumnWidth,
   sanitizeMarkdown
-} from "./chunk-G3B2OBCZ.js";
+} from "./chunk-ZRHLLPSJ.js";
 import {
   createCanvasBackend
 } from "./chunk-KFCQYZXR.js";
 import {
   storyTargetKey
-} from "./chunk-3TUQCHYT.js";
+} from "./chunk-H6IL5ABU.js";
 import {
   EMU_PER_INCH,
   EMU_PER_PX,
   ROTATION_UNITS_PER_DEGREE,
   TWIPS_PER_PX
-} from "./chunk-TFSXOIAI.js";
+} from "./chunk-FNWKE74J.js";
 import {
   createPublicNodeAnchor,
   createPublicRangeAnchor
@@ -84,14 +84,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"
     }
   },
   {
@@ -99,14 +98,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"
     }
   },
   {
@@ -233,10 +231,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"
@@ -1860,12 +1857,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";
@@ -2160,14 +2161,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,
@@ -2677,8 +2690,8 @@ function ToolbarFontSizeSelect(props) {
 function ToolbarCompactOverflow(props) {
   const [open, setOpen] = React4.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));
@@ -2763,6 +2776,129 @@ function ToolbarCompactOverflow(props) {
           ] })
         ] })
       ] }) : null,
+      props.showInlineFormatting || props.showTextColors ? /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+        !props.showStyleSelectors ? /* @__PURE__ */ jsx6("div", { className: "px-1 text-[10px] font-semibold uppercase tracking-[var(--tracking-status)] text-tertiary", children: "Text" }) : null,
+        props.showInlineFormatting ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+          /* @__PURE__ */ jsx6(
+            ToolbarMenuButton,
+            {
+              ariaLabel: "Bold",
+              disabled: !props.canEdit || !props.onToggleBold,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ jsx6(Bold, { className: "h-3.5 w-3.5" }),
+              label: "Bold",
+              onClick: () => {
+                props.onToggleBold?.();
+                setOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            ToolbarMenuButton,
+            {
+              ariaLabel: "Italic",
+              disabled: !props.canEdit || !props.onToggleItalic,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ jsx6(Italic, { className: "h-3.5 w-3.5" }),
+              label: "Italic",
+              onClick: () => {
+                props.onToggleItalic?.();
+                setOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            ToolbarMenuButton,
+            {
+              ariaLabel: "Underline",
+              disabled: !props.canEdit || !props.onToggleUnderline,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ jsx6(Underline, { className: "h-3.5 w-3.5" }),
+              label: "Underline",
+              onClick: () => {
+                props.onToggleUnderline?.();
+                setOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            ToolbarMenuButton,
+            {
+              ariaLabel: "Strikethrough",
+              disabled: !props.canEdit || !props.onToggleStrikethrough,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ jsx6(Strikethrough, { className: "h-3.5 w-3.5" }),
+              label: "Strikethrough",
+              onClick: () => {
+                props.onToggleStrikethrough?.();
+                setOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            ToolbarMenuButton,
+            {
+              ariaLabel: "Superscript",
+              disabled: !props.canEdit || !props.onToggleSuperscript,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ jsx6(Superscript, { className: "h-3.5 w-3.5" }),
+              label: "Superscript",
+              onClick: () => {
+                props.onToggleSuperscript?.();
+                setOpen(false);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            ToolbarMenuButton,
+            {
+              ariaLabel: "Subscript",
+              disabled: !props.canEdit || !props.onToggleSubscript,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ jsx6(Subscript, { className: "h-3.5 w-3.5" }),
+              label: "Subscript",
+              onClick: () => {
+                props.onToggleSubscript?.();
+                setOpen(false);
+              }
+            }
+          )
+        ] }) : null,
+        props.showTextColors ? /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-2 gap-2 px-1 pt-1", children: [
+          /* @__PURE__ */ jsx6(
+            ToolbarColorPopover,
+            {
+              ariaLabel: "Text color",
+              colors: TEXT_COLORS.map((value) => ({ value, label: value })),
+              disabled: !props.canEdit || !props.onSetTextColor,
+              disabledReason: props.editDisabledReason,
+              icon: /* @__PURE__ */ jsx6(Baseline, { className: "h-3.5 w-3.5" }),
+              onSelect: (value) => {
+                if (value) {
+                  props.onSetTextColor?.(value);
+                  setOpen(false);
+                }
+              },
+              title: "Text color"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            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__ */ jsx6(Highlighter2, { className: "h-3.5 w-3.5" }),
+              onSelect: (value) => {
+                props.onSetHighlightColor?.(value);
+                setOpen(false);
+              },
+              title: "Highlight color"
+            }
+          )
+        ] }) : null
+      ] }) : null,
       props.showListActions ? /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
         /* @__PURE__ */ jsx6("div", { className: "px-1 text-[10px] font-semibold uppercase tracking-[var(--tracking-status)] text-tertiary", children: "Structure" }),
         /* @__PURE__ */ jsx6(
@@ -2794,8 +2930,20 @@ function ToolbarCompactOverflow(props) {
           }
         )
       ] }) : null,
-      props.showParagraphActions || props.showListContinuation && props.activeListContext ? /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
+      props.showParagraphActions || props.showParagraphAlignment || props.showListContinuation && props.activeListContext ? /* @__PURE__ */ jsxs6("div", { className: "space-y-1", children: [
         /* @__PURE__ */ jsx6("div", { className: "px-1 text-[10px] font-semibold uppercase tracking-[var(--tracking-status)] text-tertiary", children: "Paragraph" }),
+        props.showParagraphAlignment ? /* @__PURE__ */ jsx6("div", { className: "px-1 pb-1", children: /* @__PURE__ */ jsx6(
+          ToolbarAlignmentPopover,
+          {
+            activeAlignment: props.formattingState?.alignment,
+            disabled: !props.canEdit || !props.onSetAlignment,
+            disabledReason: props.editDisabledReason,
+            onSelect: (alignment) => {
+              props.onSetAlignment?.(alignment);
+              setOpen(false);
+            }
+          }
+        ) }) : null,
         props.showParagraphActions ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
           /* @__PURE__ */ jsx6(
             ToolbarMenuButton,
@@ -8088,10 +8236,7 @@ var TwPageStackOverlayLayer = ({
         null
       );
       if (warm) {
-        return extendPageOverlayRectsAcrossTableBoundaryGaps(
-          warm,
-          containsTableBoundaryRisk(scrollRoot) ? collectTableEmbeddedBoundaryIndices(scrollRoot) : []
-        );
+        return warm;
       }
     }
     return resolveSkeletalPageOverlayRectsFromLayout(facet);
@@ -8132,7 +8277,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");
@@ -8147,7 +8292,7 @@ var TwPageStackOverlayLayer = ({
       );
       if (geometryRects !== null) {
         incrementInvalidationCounter("overlay.page.geometry.hit");
-        setRectsIfChanged(reconcilePaperRectsWithFlow(geometryRects, pageCount));
+        setRectsIfChanged(geometryRects);
         return;
       }
       incrementInvalidationCounter("overlay.page.geometry.fallthrough");
@@ -8516,11 +8661,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) {
@@ -16995,7 +17135,7 @@ var TwPageStackChromeLayerInner = ({
   const [activeStoryPageIndex, setActiveStoryPageIndex] = React34.useState(null);
   const refreshRectsNow = React34.useCallback(() => {
     const pageCount = facet.getPageCount();
-    const reconcileRects = (baseRects) => reconcilePageStackRectsWithFlow({
+    const reconcileDomRects = (baseRects) => reconcilePageStackRectsWithFlow({
       baseRects,
       pageCount,
       scrollRoot,
@@ -17003,7 +17143,7 @@ var TwPageStackChromeLayerInner = ({
     });
     const uiRects = resolveUiPageRects(pageCount);
     if (uiRects !== null) {
-      setRects(reconcileRects(uiRects));
+      setRects(uiRects);
       return;
     }
     if (geometryFacet) {
@@ -17013,7 +17153,7 @@ var TwPageStackChromeLayerInner = ({
         visiblePageIndexRange
       );
       if (geometryRects !== null) {
-        setRects(reconcileRects(geometryRects));
+        setRects(geometryRects);
         return;
       }
       setRects([]);
@@ -17041,7 +17181,7 @@ var TwPageStackChromeLayerInner = ({
         visiblePageIndexRange
       });
       setRects(
-        reconcileRects(domRects)
+        reconcileDomRects(domRects)
       );
     } else {
       const widgets = measureWidgetsViaOffsetChain(scrollRoot, {
@@ -17056,7 +17196,7 @@ var TwPageStackChromeLayerInner = ({
         visiblePageIndexRange
       });
       setRects(
-        reconcileRects(domRects)
+        reconcileDomRects(domRects)
       );
     }
   }, [facet, geometryFacet, resolveUiPageRects, scrollRoot, visiblePageIndexRange]);

package/dist/{chunk-37SEJQ3G.js → chunk-RSYN6FTS.js}

@@ -1,10 +1,10 @@
 import {
   TextTransactionError
-} from "./chunk-3OHVK2D6.js";
+} from "./chunk-IR7QV2BX.js";
 import {
   replaceParagraphScope,
   resolveParagraphScope
-} from "./chunk-ZKSDVHGH.js";
+} from "./chunk-KOHQFZMM.js";
 import {
   cloneParagraphProperties,
   cloneStoryUnit,

package/dist/{chunk-OBCP6VTG.js → chunk-RWERZWHR.js}

@@ -1,6 +1,6 @@
 import {
   extractBookmarksFromBodyXml
-} from "./chunk-TMU7JMXX.js";
+} from "./chunk-MB7RJBSN.js";
 
 // src/legal/document-root.ts
 function resolveWalkableRoot(document) {