@beyondwork/docx-react-component 1.0.84 → 1.0.85

package/src/ui-tailwind/page-stack/tw-page-stack-chrome-layer.tsx

@@ -111,7 +111,7 @@ export interface TwPageStackChromeLayerProps {
   renderFrameRevision: number;
   /** Current active story target — used to promote the matching band to slot mode. */
   activeStory: EditorStoryTarget;
-  /** Fires when a band is clicked.  Task 10 routes PM into the matching band. */
+  /** Fires when a band is double-clicked. Routes PM into the matching band. */
   onOpenStory?: (target: EditorStoryTarget) => void;
   /**
    * PM surface DOM element (typically `view.dom`, i.e. the outer
@@ -189,6 +189,7 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
   });
   const overlayRootRef = React.useRef<HTMLDivElement | null>(null);
   const rafHandleRef = React.useRef<number | null>(null);
+  const [activeStoryPageIndex, setActiveStoryPageIndex] = React.useState<number | null>(null);
 
   // --------------------------------------------------------------------
   // rAF-debounced refresh.  Mirrors the pattern in
@@ -293,6 +294,20 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
     };
   }, [refreshRects, renderFrameRevision, scrollRoot]);
 
+  React.useEffect(() => {
+    if (activeStory.kind !== "header" && activeStory.kind !== "footer") {
+      setActiveStoryPageIndex(null);
+    }
+  }, [activeStory]);
+
+  const handleOpenStoryForPage = React.useCallback(
+    (target: EditorStoryTarget, pageIndex: number) => {
+      setActiveStoryPageIndex(pageIndex);
+      onOpenStory?.(target);
+    },
+    [onOpenStory],
+  );
+
   // Observe scroll-root size changes.
   React.useEffect(() => {
     if (geometryFacet) return;
@@ -357,14 +372,17 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
   React.useLayoutEffect(() => {
     if (!pmSurfaceElement) return;
     const overlay = overlayRootRef.current;
-    // Find a portal slot the ChromeLayer currently exposes.  Every
-    // visible band whose story equals `activeStory` renders a slot —
-    // so if a header variant repeats across pages, every one of those
-    // pages emits a `[data-pm-portal-slot]` div.  PM is a single DOM
-    // element, so we pick the first slot in document order via
-    // `querySelector` (singular) and park the element there.  The
-    // remaining slot divs stay empty until the next reparent.
+    // Find the active portal slot.  Double-click activation records the
+    // page index, so repeated shared header/footer stories still route PM
+    // into the actual page band the user opened.
+    const pageScopedSelector =
+      activeStoryPageIndex == null
+        ? null
+        : `[data-pm-portal-slot][data-page-index="${activeStoryPageIndex}"]`;
     const activeSlot =
+      (pageScopedSelector
+        ? overlay?.querySelector<HTMLElement>(pageScopedSelector)
+        : null) ??
       overlay?.querySelector<HTMLElement>("[data-pm-portal-slot]") ?? null;
     // Body slot lives outside the chrome overlay root.  Walk up from
     // the PM element's owner document so jsdom tests and the real
@@ -396,7 +414,7 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
         // updateState pass.
       }
     }
-  }, [pmSurfaceElement, pmView, activeStory, rects, scrollRoot]);
+  }, [pmSurfaceElement, pmView, activeStory, activeStoryPageIndex, rects, scrollRoot]);
 
   // --------------------------------------------------------------------
   // Render
@@ -440,7 +458,8 @@ const TwPageStackChromeLayerInner: React.FC<TwPageStackChromeLayerProps> = ({
             page={page}
             facet={facet}
             activeStory={activeStory}
-            onOpenStory={onOpenStory}
+            activeStoryPageIndex={activeStoryPageIndex}
+            onOpenStory={handleOpenStoryForPage}
             visiblePageIndexRange={visiblePageIndexRange}
             renderFrameRevision={renderFrameRevision}
             mediaPreviews={mediaPreviews}

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}