@beyondwork/docx-react-component 1.0.83 → 1.0.85

package/src/ui-tailwind/page-stack/tw-region-block-renderer.tsx

@@ -174,7 +174,7 @@ function renderSegment(
           data-node-type="field_ref"
           style={{ opacity: 0.6, fontSize: "0.85em" }}
         >
-          [field]
+          {seg.displayText ?? seg.label}
         </span>
       );
     case "note_ref":

package/src/ui-tailwind/review-workspace/types.ts

@@ -192,6 +192,7 @@ export interface TwReviewWorkspaceProps {
   onZoomChange?: (level: ZoomLevel) => void;
   onActiveRailTabChange?: (value: ReviewRailTab) => void;
   onShowTrackedChangesChange?: (show: boolean) => void;
+  onReviewMarkupModeChange?: (mode: MarkupDisplay) => void;
   onUndo?: () => void;
   onRedo?: () => void;
   onSetParagraphStyle?: (styleId: string) => void;
@@ -293,7 +294,7 @@ export interface TwReviewWorkspaceProps {
   /**
    * @deprecated P8.11 — the workspace no longer renders a workspace-level
    * header band with an "Edit header" button; per-page header bands route
-   * clicks via `onOpenStory` / `runtime.openStory` directly.  The prop
+   * double-clicks via `onOpenStory` / `runtime.openStory` directly. The prop
    * remains optional for one release so existing hosts continue to
    * compile; supplying it emits a `console.warn` on mount.
    */
@@ -313,7 +314,7 @@ export interface TwReviewWorkspaceProps {
   onOpenFooterStoryForPage?: (pageIndex: number) => void;
   /**
    * P8.11 — fired when a per-page chrome band (header / footer) is
-   * clicked to promote it into the active editing surface.  Wire to
+   * double-clicked to promote it into the active editing surface. Wire to
    * `runtime.openStory(target)`; the chrome layer's portal mechanism
    * then reparents the PM surface into the matching band's active slot.
    */

package/src/ui-tailwind/review-workspace/use-page-markers.ts

@@ -212,6 +212,16 @@ export function usePageMarkers(options: UsePageMarkersOptions): PageMarkersResul
   const [pageMarkers, setPageMarkers] = useState<readonly HTMLElement[]>([]);
 
   useEffect(() => {
+    if (geometryFacet && layoutFacet) {
+      // Warm path: render-kernel geometry gives us page frames and the layout
+      // facet gives us page offsets, so DOM page-break markers are only legacy
+      // fallback. Skipping the marker scan avoids querySelectorAll +
+      // IntersectionObserver churn when PM swaps virtualized blocks at page
+      // dividers during scroll.
+      setPageMarkers((prev) => (prev.length === 0 ? prev : []));
+      return undefined;
+    }
+
     const root = pageStackScrollRoot;
     if (!root) {
       setPageMarkers((prev) => (prev.length === 0 ? prev : []));
@@ -283,7 +293,7 @@ export function usePageMarkers(options: UsePageMarkersOptions): PageMarkersResul
     // every requestViewportRefresh(), which would add two extra render passes per
     // scroll event.  The page-0 fallback uses -1 when page1First is unknown,
     // which is correct (no page-0 blocks → synthetic marker contributes nothing).
-  }, [pageStackScrollRoot, snapshot.revisionToken]);
+  }, [geometryFacet, layoutFacet, pageStackScrollRoot, snapshot.revisionToken]);
 
   const selectionBlockIndex = useMemo(() => {
     const sel = snapshot.selection;

package/src/ui-tailwind/toolbar/tw-role-action-region.tsx

@@ -233,6 +233,7 @@ function RoleActionButton(arg: RoleActionButtonProps): React.JSX.Element | null
             <Toggle.Root
               pressed={props.showTrackedChanges ?? false}
               onPressedChange={(v) => props.onShowTrackedChangesChange?.(v)}
+              aria-label={(props.showTrackedChanges ?? false) ? "Turn off tracked changes" : "Turn on tracked changes"}
               disabled={props.capabilities ? !props.capabilities.trackChangesSupported : false}
               onMouseDown={preserveEditorSelectionMouseDown}
               className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none disabled:opacity-40 ${focusRingClass}`}
@@ -247,7 +248,7 @@ function RoleActionButton(arg: RoleActionButtonProps): React.JSX.Element | null
           </Tooltip.Trigger>
           <Tooltip.Portal>
             <Tooltip.Content className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50" sideOffset={6}>
-              {(props.showTrackedChanges ?? false) ? "Hide tracked changes" : "Show tracked changes"}
+              {(props.showTrackedChanges ?? false) ? "Turn off tracked changes" : "Turn on tracked changes"}
             </Tooltip.Content>
           </Tooltip.Portal>
         </Tooltip.Root>

package/src/ui-tailwind/toolbar/tw-toolbar.tsx

@@ -669,6 +669,7 @@ export function TwToolbar(props: TwToolbarProps) {
                 <Toggle.Root
                   pressed={props.showTrackedChanges}
                   onPressedChange={props.onShowTrackedChangesChange}
+                  aria-label={props.showTrackedChanges ? "Turn off tracked changes" : "Turn on tracked changes"}
                   disabled={caps ? !caps.trackChangesSupported : false}
                   onMouseDown={preserveEditorSelectionMouseDown}
                   className={`inline-flex h-6 w-6 items-center justify-center rounded-md text-secondary transition-colors hover:bg-surface data-[state=on]:bg-canvas data-[state=on]:text-accent data-[state=on]:ring-1 data-[state=on]:ring-accent/30 data-[state=on]:shadow-sm outline-none disabled:opacity-40 ${focusRingClass}`}
@@ -681,7 +682,7 @@ export function TwToolbar(props: TwToolbarProps) {
                   className="rounded-md bg-primary px-2 py-1 text-xs text-white shadow-md z-50"
                   sideOffset={6}
                 >
-                  {props.showTrackedChanges ? "Hide tracked changes" : "Show tracked changes"}
+                  {props.showTrackedChanges ? "Turn off tracked changes" : "Turn on tracked changes"}
                 </Tooltip.Content>
               </Tooltip.Portal>
             </Tooltip.Root>

package/src/ui-tailwind/tw-review-workspace.tsx

@@ -85,7 +85,7 @@ export type {
   TwReviewWorkspaceProps,
 } from "./review-workspace/types.ts";
 
-import type { EditorRole } from "../api/public-types.ts";
+import type { EditorRole, EditorStoryTarget } from "../api/public-types.ts";
 
 // Default shell-header modes for the workspace's default composition.
 // Designsystem §6.1 prescribes a 4-mode switcher; all four are reachable in
@@ -185,6 +185,18 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
   const isPageWorkspace = props.workspaceMode === "page";
   const markupDisplay = props.markupDisplay;
   const [navOpen, setNavOpen] = useState(false);
+  const handleOpenPageModeStory = useCallback(
+    (target: EditorStoryTarget) => {
+      if (
+        !isPageWorkspace &&
+        (target.kind === "header" || target.kind === "footer")
+      ) {
+        return;
+      }
+      props.onOpenStory?.(target);
+    },
+    [isPageWorkspace, props.onOpenStory],
+  );
 
   // Scope card state — tracks which scope's card is currently open so
   // the ChromeOverlay's card layer renders the right one. Open/close
@@ -608,6 +620,10 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                   dismissSelectionToolbar();
                   props.onShowTrackedChangesChange(show);
                 }}
+                onReviewMarkupMode={(mode) => {
+                  dismissSelectionToolbar();
+                  props.onReviewMarkupModeChange?.(mode);
+                }}
                 onReviewSidebarTrackedChanges={
                   props.onReviewSidebarTrackedChanges
                     ? runWithSelectionToolbarDismiss(props.onReviewSidebarTrackedChanges)
@@ -1159,7 +1175,7 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
                             }
                             renderFrameRevision={renderFrameRevision}
                             activeStory={snapshot.activeStory}
-                            onOpenStory={props.onOpenStory}
+                            onOpenStory={handleOpenPageModeStory}
                             pmSurfaceElement={pmSurfaceElement}
                             visiblePageIndexRange={visiblePageIndexRange}
                             mediaPreviews={props.mediaPreviews}