@beyondwork/docx-react-component 1.0.74 → 1.0.76

package/src/ui-tailwind/editor-surface/tw-prosemirror-surface.tsx

@@ -65,6 +65,7 @@ import { buildPositionMap, type PositionMap } from "./pm-position-map";
 import { createLocalEditSessionState } from "./local-edit-session-state";
 import { createFastTextEditLane } from "./fast-text-edit-lane";
 import { createPredictedTxGate } from "./predicted-tx-gate";
+import { replaceStatePreservingPosition } from "./preserve-position";
 import {
   createScopeTagRegistry,
   type ScopeTagRegistry,
@@ -772,11 +773,35 @@ export const TwProseMirrorSurface = forwardRef<
       laneRef.current = null;
       return;
     }
+    // Wave 1 Slice E1/E2 — lane observability.
+    //
+    // `typing.reconcile` measures the dispatch → ack window per keystroke
+    // (predicted path). `typing.divergence` fires on the
+    // structural-divergence ack kind (the rollback-all path). Both probe
+    // kinds are declared in `PerfProbeKind` and were previously
+    // unemitted — wiring them here closes the instrumentation gap so
+    // lane quality regressions show up in the standard perf summary.
+    const pendingReconcileTokens = new Map<string, string | null>();
     laneRef.current = createFastTextEditLane({
       session: sessionRef.current,
       getView: () => viewRef.current,
       getPositionMap: () => positionMapRef.current,
       dispatchRuntimeCommand: props.dispatchRuntimeCommand,
+      probe: {
+        markPredicted(opId: string) {
+          pendingReconcileTokens.set(opId, startPerfProbe("typing.reconcile"));
+        },
+        markReconciled(opId: string, kind) {
+          const token = pendingReconcileTokens.get(opId);
+          if (token !== undefined) {
+            finishPerfProbe(token);
+            pendingReconcileTokens.delete(opId);
+          }
+          if (kind === "structural-divergence") {
+            recordPerfSample("typing.divergence");
+          }
+        },
+      },
       suppressSelectionSync: (suppressed) => {
         suppressSelectionEchoRef.current = suppressed;
       },
@@ -891,11 +916,30 @@ export const TwProseMirrorSurface = forwardRef<
       viewRef.current = view;
       recordPerfSample("pm.mount");
     } else {
-      suppressSelectionEchoRef.current = true;
-      viewRef.current.updateState(state);
-      queueMicrotask(() => {
-        suppressSelectionEchoRef.current = false;
-      });
+      // Wave 1 Slice C · the single funnel for snapshot replacement.
+      //
+      // `replaceStatePreservingPosition` encapsulates two invariants:
+      //   1. Scroll position preservation — capture the anchor block
+      //      before `view.updateState`, restore scroll after, so the
+      //      user's viewport doesn't jump when blocks above change
+      //      height (invariant 7: geometry-facet warm path, no DOM
+      //      measurement on the hot path).
+      //   2. Echo-suppression ordering — `suppressSelectionEchoRef` is
+      //      set to `true` BEFORE the state swap and released in a
+      //      microtask AFTER, so PM's internal selection-change events
+      //      during the swap are swallowed by the selection-sync
+      //      plugin.
+      //
+      // Ordering is regression-guarded by
+      // `test/ui-tailwind/editor-surface/preserve-position-ordering.test.ts`.
+      replaceStatePreservingPosition(
+        {
+          view: viewRef.current,
+          geometryFacet: props.geometryFacet,
+          suppressionRef: suppressSelectionEchoRef,
+        },
+        state,
+      );
     }
     documentBuildKeyRef.current = documentBuildKey;
     applyDecorationProps(viewRef.current, positionMap);

package/src/ui-tailwind/page-stack/floating-image-overlay-model.ts

@@ -145,11 +145,15 @@ export function collectFloatingImageOverlayItems(input: {
   };
 
   // coord-01 §9 / §5.1 — CCEP logos live in header stories; collect from
-  // the main story for the active-story case AND from every secondary
-  // story so header/footer images reach the overlay regardless of which
-  // story is active in the editor.
+  // the active story's surface.blocks (always) + every secondary story
+  // EXCEPT the one whose target matches activeStory (runtime fills
+  // surface.blocks with that same story's blocks, so walking secondary
+  // stories unconditionally would double-emit header/footer segments
+  // the moment the user enters a header for editing — M1).
   collectFromStory(surface.blocks, activeStory);
+  const activeKey = storyTargetKey(activeStory);
   for (const secondary of surface.secondaryStories ?? []) {
+    if (storyTargetKey(secondary.target) === activeKey) continue;
     collectFromStory(secondary.blocks, secondary.target);
   }
 

package/src/ui-tailwind/page-stack/tw-endnote-area.tsx

@@ -52,7 +52,11 @@ export const TwEndnoteArea: React.FC<TwEndnoteAreaProps> = ({
           marginBottom: "8pt",
         }}
       />
-      <TwRegionBlockRenderer blocks={blocks} mediaPreviews={mediaPreviews} />
+      <TwRegionBlockRenderer
+        blocks={blocks}
+        mediaPreviews={mediaPreviews}
+        fallbackDisplay="hidden"
+      />
     </div>
   );
 };

package/src/ui-tailwind/page-stack/tw-footnote-area.tsx

@@ -66,7 +66,11 @@ export const TwFootnoteArea: React.FC<TwFootnoteAreaProps> = React.memo(({
           marginBottom: "4pt",
         }}
       />
-      <TwRegionBlockRenderer blocks={blocks} mediaPreviews={mediaPreviews} />
+      <TwRegionBlockRenderer
+        blocks={blocks}
+        mediaPreviews={mediaPreviews}
+        fallbackDisplay="hidden"
+      />
     </div>
   );
 });

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

@@ -14,6 +14,7 @@ import {
   headingClassList,
   resolveHeadingLevel,
 } from "../editor-surface/tw-page-block-view.helpers.ts";
+import { shouldRenderAbsoluteFloatingImageInPageOverlay } from "./floating-image-overlay-model.ts";
 
 const EMU_PER_PX = 9525;
 
@@ -94,11 +95,12 @@ function renderSegment(
     case "hard_break":
       return <br key={seg.segmentId} />;
     case "image": {
-      // §5.1 gap 3 — floating-anchor images are owned by the absolute
-      // floating-image overlay (`TwFloatingImageLayer`). Emitting them
-      // inline here would double-paint the CCEP header logo on every
-      // page. Skip entirely so only the overlay renders them.
-      if (seg.anchor?.display === "floating") {
+      // §5.1 gap 3 — floating-anchor images the overlay can render
+      // (`TwFloatingImageLayer`) are owned by the overlay. Skip inline
+      // emission ONLY for anchors the overlay predicate accepts —
+      // otherwise wrap-mode=square / column-relative / tight-wrapped
+      // floats get dropped from inline AND from the overlay (M2).
+      if (shouldRenderAbsoluteFloatingImageInPageOverlay(seg.anchor)) {
         return null;
       }
       // Mirror body-renderer behavior (`pm-state-from-snapshot.ts` :500+):

package/src/ui-tailwind/review-workspace/use-workspace-side-effects.ts

@@ -2,7 +2,6 @@ import { useCallback, useEffect } from "react";
 import type { Dispatch, SetStateAction } from "react";
 
 import { createCanvasBackend } from "../../api/public-types.ts";
-import type { RuntimeRenderSnapshot } from "../../api/public-types.ts";
 import {
   incrementInvalidationCounter,
   recordPerfSample,
@@ -17,8 +16,6 @@ export interface UseWorkspaceSideEffectsOptions {
   activeParagraphLayout: ActiveParagraphLayout | null;
   pageChromeModel: PageChromeModel;
   pageShellMetrics: PageShellMetrics;
-  isPageWorkspace: boolean;
-  activeStoryKind: RuntimeRenderSnapshot["activeStory"]["kind"];
   showDrawerReviewRail: boolean;
   setReviewRailOpen: Dispatch<SetStateAction<boolean>>;
   onOpenHeaderStory?: () => void;
@@ -58,8 +55,6 @@ export function useWorkspaceSideEffects(
     activeParagraphLayout,
     pageChromeModel,
     pageShellMetrics,
-    isPageWorkspace,
-    activeStoryKind,
     showDrawerReviewRail,
     setReviewRailOpen,
     onOpenHeaderStory,
@@ -67,14 +62,6 @@ export function useWorkspaceSideEffects(
     onDismissSelectionToolbar,
   } = options;
 
-  // Slice A (designsystem §6.20 reshape, 2026-04-24): isPageWorkspace +
-  // activeStoryKind referenced here so the prop sweep stays a no-op
-  // type-checker pass even though the auto-open-layout-tools effect
-  // they fed retired with the strip. Slice B mounts an active-band
-  // ribbon that observes activeStoryKind directly.
-  void isPageWorkspace;
-  void activeStoryKind;
-
   useEffect(() => {
     recordPerfSample("workspace.chrome");
     incrementInvalidationCounter("workspace.chrome.recomputes");

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

@@ -10,10 +10,6 @@ import React, {
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { ChevronRight } from "lucide-react";
 
-import {
-  useVisibleBlockRange,
-  useVisiblePageIndexRange,
-} from "./page-stack/use-visible-block-range.ts";
 import { sliceBlocksForPage } from "./editor-surface/page-slice-util.ts";
 import {
   findScrollAnchor,
@@ -330,8 +326,6 @@ export function TwReviewWorkspace(inputProps: TwReviewWorkspaceProps) {
       activeParagraphLayout,
       pageChromeModel,
       pageShellMetrics,
-      isPageWorkspace,
-      activeStoryKind: snapshot.activeStory.kind,
       showDrawerReviewRail: responsiveChrome.showDrawerReviewRail,
       setReviewRailOpen,
       onOpenHeaderStory: props.onOpenHeaderStory,