@parhelia/core 0.4.12825 → 0.4.12871

package/dist/editor/page-viewer/PageViewerFrame.js

@@ -1,17 +1,29 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
-import { BRIDGE_DOM_UPDATED_EVENT, MiniMap } from "./MiniMap";
+import { MiniMap } from "./MiniMap";
+import { FEEDBACK_MARGIN_MIN_WIDTH, FEEDBACK_MARGIN_RAIL_WIDTH, FeedbackMargin, } from "./FeedbackMargin";
+import { getFeedbackMarginRoom, resolveFeedbackMarginSize, shouldShowFeedbackMargin, } from "./feedbackMarginLayout";
+import { useFeedbackMarginCollapsed, useFeedbackMarginPreferredWidth, } from "./feedbackMarginWidth";
+import { handleCanvasPickInteraction, isCanvasPickSelection, markPickedSelection, releasePickedSelection, stopCommentTargetPicking, useCommentTargetPicking, } from "../reviews/commentTargetPicker";
+import { shouldOpenMobileFormOnCanvasTap } from "../mobileBottomPanel";
+import { navigateCanvasFrame } from "./canvasFrameNavigation";
+import { isCanvasLoadSettling, resolveDeferredCanvasRefresh, } from "./canvasLoadSettling";
+import { getCanvasScrollHandoffKey, stashCanvasScrollHandoff, takeCanvasScrollHandoff, } from "./canvasScrollHandoff";
 import { resolveMiniMapVisibility, } from "./minimapVisibility";
 import { useCanvasSelection, useEditContext, useEditContextRef, useFieldsEditContext, useFieldsEditContextRef, } from "../client/editContext";
 import { useSlotContext } from "../views/editorSlotContext";
+import { getScrollIntoViewTextRangeKey, getScrollIntoViewTextRangeQuery, SCROLL_INTO_VIEW_BRIDGE_SOURCE, } from "./scrollIntoViewTextRanges";
 import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
 import { PageEditorChrome } from "../page-editor-chrome/PageEditorChrome";
+import { BridgePasteCleanupOverlay } from "../page-editor-chrome/BridgePasteCleanupOverlay";
 import { useBridgeInlineEditing, } from "../page-editor-chrome/useBridgeInlineEditing";
 import { createBridgeInlineEditSessionCoordinator, } from "./bridgeInlineEditSession";
 import { getInlineAiAnchorFromBridgeToolbar, getVisibleBridgeToolbarRect, waitForVisibleBridgeToolbarRect, } from "../page-editor-chrome/bridgeInlineFormatToolbarLayout";
 import { IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, IFRAME_OVERLAY_BRIDGE_GEOMETRY_EVENT, IFRAME_OVERLAY_BRIDGE_SCROLL_EVENT, IframeOverlayProvider, } from "../page-editor-chrome/overlay/IframeOverlayProvider";
-import { projectBridgeGeometryToScroll } from "../page-editor-chrome/overlay/geometry";
-import { CANVAS_REFRESH_COMPLETED_EVENT, DEVICE_CHANGE_EVENT, useViewportChangeSignal, } from "./pageViewContext";
+import { createOverviewRulerStore, OverviewRulerContext, } from "./overviewRuler";
+import { CanvasOverviewRuler } from "./CanvasOverviewRuler";
+import { getBridgeGeometryDocumentSize, getBridgeGeometryScrollScale, getBridgeOverlayGeometryDetail, projectBridgeGeometryToScroll, } from "../page-editor-chrome/overlay/geometry";
+import { CANVAS_REFRESH_COMPLETED_EVENT, usePageViewState, } from "./pageViewContext";
 import uuid from "react-uuid";
 import { cn } from "../../lib/utils";
 import { normalizeMarkerId } from "../utils";
@@ -25,7 +37,12 @@ import { FieldActionsOverlay, } from "../FieldActionsOverlay";
 import { alignLoopbackHostToEditor, alignXmCloudManagedEditingHostToEditor, applyParheliaRenderContext, crossesPreviewRenderBoundary, getEditorQueryParam, } from "./renderUrl";
 import { NoLayout } from "../page-editor-chrome/NoLayout";
 import { Spinner } from "../ui/Spinner";
+import { buildCanvasSpellCheckMenuItems } from "../spellcheck/canvasSpellCheckContextMenu";
 import { DeviceToolbar } from "./DeviceToolbar";
+import { DynamicRenderingsStrip } from "./DynamicRenderingsStrip";
+import { readCanvasRenderings } from "./interactivePreview";
+import { recordPageRenderingIds } from "./renderingApproval";
+import { useInteractivePreview } from "./useInteractivePreview";
 import { isPreviewEditAttemptInteraction, showPreviewEditAttemptToast, } from "./previewEditAttempt";
 import { FullscreenControls } from "../client/ui/FullscreenControls";
 import { PageSelector } from "../menubar/PageSelector";
@@ -51,14 +68,13 @@ import { downloadLink } from "../bridge/linkDownload";
 const ZOOM_MIN = 0.25;
 const ZOOM_MAX = 2;
 const ZOOM_STEP = 0.25;
-const ZOOM_TRANSITION_MS = 300;
+export const ZOOM_TRANSITION_MS = 300;
 // useSyncExternalStore fallbacks for frames rendered without a slot context.
 const subscribeToNothing = () => () => { };
 const getUndefined = () => undefined;
 const BRIDGE_INLINE_EDIT_RELEASE_EVENT = "parhelia:bridge-inline-edit-release";
 const INLINE_AI_CLOSE_EVENT = "inline-ai-close";
 const BRIDGE_INLINE_LINK_OPEN_EVENT = "bridge-inline-link-open";
-const SCROLL_INTO_VIEW_BRIDGE_SOURCE = "scroll-into-view";
 // How long a requested canvas refresh may suppress viewport reactions
 // (selection auto-scroll, scrollIntoView) before it is presumed lost.
 const CANVAS_REFRESH_IN_FLIGHT_MAX_MS = 15000;
@@ -119,37 +135,10 @@ function dispatchBridgeOverlayScroll(iframe, scroll, scrollScale = 1) {
         },
     }));
 }
-function getBridgeGeometryScrollScale(geometry) {
-    return typeof geometry?.scrollScale === "number" &&
-        Number.isFinite(geometry.scrollScale) &&
-        geometry.scrollScale > 0
-        ? geometry.scrollScale
-        : 1;
-}
 function dispatchBridgeOverlayGeometry(iframe, geometry, scrollOverride) {
-    const documentSize = getBridgeGeometryDocumentSize(geometry);
-    const scrollScale = getBridgeGeometryScrollScale(geometry);
-    const scroll = scrollOverride ?? geometry?.scroll;
-    const detail = {
-        scrollLeft: (scroll?.x ?? 0) * scrollScale,
-        scrollTop: (scroll?.y ?? 0) * scrollScale,
-        viewportWidth: geometry?.viewport.width,
-        viewportHeight: geometry?.viewport.height,
-        scrollWidth: documentSize?.width,
-        scrollHeight: documentSize?.height,
-    };
+    const detail = getBridgeOverlayGeometryDetail(geometry, scrollOverride);
     iframe?.dispatchEvent(new CustomEvent(IFRAME_OVERLAY_BRIDGE_GEOMETRY_EVENT, { detail }));
 }
-function getBridgeGeometryDocumentSize(geometry) {
-    if (!geometry)
-        return undefined;
-    const rectScale = geometry.rectScale ?? 1;
-    const scrollScale = getBridgeGeometryScrollScale(geometry);
-    return {
-        width: Math.max(geometry.viewport.width, ...geometry.targets.map((target) => target.rect.right * rectScale + geometry.scroll.x * scrollScale)),
-        height: Math.max(geometry.viewport.height, ...geometry.targets.map((target) => target.rect.bottom * rectScale + geometry.scroll.y * scrollScale)),
-    };
-}
 function bridgeKeysMatch(left, right) {
     const normalizedLeft = normalizeMarkerId(left);
     const normalizedRight = normalizeMarkerId(right);
@@ -266,7 +255,9 @@ function findScrollIntoViewDocumentBounds(geometry, target, options = {}) {
                 ? findBridgeComponentDocumentBounds(geometry, target.fallbackComponentId)
                 : undefined));
     }
-    const textRangeBounds = findBridgeTextRangeDocumentBounds(geometry, target.key);
+    // The scroll measures the target under its own keys (see
+    // `getScrollIntoViewTextRangeKey`), never an overlay's.
+    const textRangeBounds = findBridgeTextRangeDocumentBounds(geometry, getScrollIntoViewTextRangeKey(target.key));
     if (textRangeBounds || !options.includeTextRangeFallback) {
         return textRangeBounds;
     }
@@ -310,8 +301,8 @@ function getScrollIntoViewSignature(target) {
     ].join("|");
 }
 function requestScrollTargetGeometry(pageViewContext, target) {
-    const textRanges = target.textRanges?.filter((range) => !!range);
-    if (!textRanges?.length)
+    const textRanges = getScrollIntoViewTextRangeQuery(target);
+    if (!textRanges.length)
         return false;
     return (pageViewContext.requestBridgeGeometry?.({
         source: SCROLL_INTO_VIEW_BRIDGE_SOURCE,
@@ -329,7 +320,7 @@ function getFocusedFieldScrollKey(field) {
     ].join("|");
 }
 function scrollBridgeBoundsIntoView(pageViewContext, bounds, currentScroll) {
-    const geometry = pageViewContext.bridgeGeometry;
+    const geometry = pageViewContext.getState().bridgeGeometry;
     if (!geometry)
         return false;
     const scrollScale = getBridgeGeometryScrollScale(geometry);
@@ -392,6 +383,10 @@ function restoreIframeWindowScroll(iframe, targetScroll, options = {}) {
             }
         };
         const apply = () => {
+            if (options.isCurrent?.() === false) {
+                completed = true;
+                return;
+            }
             try {
                 attempts += 1;
                 win.scrollTo(targetScroll.x, targetScroll.y);
@@ -584,12 +579,27 @@ function getBridgeSelectionMetadataString(selection, key) {
 }
 export function PageViewerFrame(props) {
     const editContext = useEditContext();
-    useViewportChangeSignal();
     if (!editContext || !props.pageViewContext)
         return null;
     return (_jsx(PageViewerFrameContent, { ...props, editContext: editContext, pageViewContext: props.pageViewContext }));
 }
 function PageViewerFrameContent({ compareView, pageViewContext, editContext, className, slotCloseButton, }) {
+    // The page view state this frame renders from. Handlers and effects that run
+    // later read the current state (`getState()`) instead.
+    // Which page to load and from where: the canvas load effect depends on these
+    // values and runs whenever one changes.
+    const pageItemDescriptor = usePageViewState(pageViewContext, (state) => state.pageItemDescriptor);
+    const editUrl = usePageViewState(pageViewContext, (state) => state.editUrl);
+    const previewUrl = usePageViewState(pageViewContext, (state) => state.previewUrl);
+    const siteName = usePageViewState(pageViewContext, (state) => state.site?.name);
+    const page = usePageViewState(pageViewContext, (state) => state.page);
+    const zoom = usePageViewState(pageViewContext, (state) => state.zoom);
+    const device = usePageViewState(pageViewContext, (state) => state.device);
+    const deviceWidth = usePageViewState(pageViewContext, (state) => state.deviceWidth);
+    const deviceHeight = usePageViewState(pageViewContext, (state) => state.deviceHeight);
+    const fullscreen = usePageViewState(pageViewContext, (state) => state.fullscreen);
+    const bridgeReady = usePageViewState(pageViewContext, (state) => state.bridgeReady);
+    const bridgeStructure = usePageViewState(pageViewContext, (state) => state.bridgeStructure);
     const fieldsContext = useFieldsEditContext();
     const slotContext = useSlotContext();
     const canvasSelection = useCanvasSelection();
@@ -598,13 +608,6 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     useEffect(() => {
         pageViewContextRef.current = pageViewContext;
     }, [pageViewContext]);
-    const latestBridgeSelectionRef = useRef(pageViewContext.bridgeSelection);
-    // Bridge events are ordered, but the context setter commits asynchronously.
-    // A layout synchronization cannot run later and clobber a newer event-time
-    // ref the way a pending passive effect could.
-    useLayoutEffect(() => {
-        latestBridgeSelectionRef.current = pageViewContext.bridgeSelection;
-    }, [pageViewContext.bridgeSelection]);
     const editContextRef = useEditContextRef();
     const fieldsContextRef = useFieldsEditContextRef();
     const iframeRef = useRef(null);
@@ -633,6 +636,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         };
     }, []);
     const [isBridgeInlineEditing, setIsBridgeInlineEditing] = useState(false);
+    const pickingCommentTarget = useCommentTargetPicking();
     const bridgeInlineEditSessionRef = useRef(null);
     if (!bridgeInlineEditSessionRef.current) {
         bridgeInlineEditSessionRef.current =
@@ -657,7 +661,15 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     const directOverlayScrollSyncRef = useRef(false);
     const lastBridgeHoverInteractionRef = useRef(undefined);
     const [bridgeInteraction, setBridgeInteraction] = useState(undefined);
+    const [pasteCleanupMenu, setPasteCleanupMenu] = useState();
+    const sendPasteCleanupCommand = useCallback((payload) => {
+        bridgeClientRef.current?.sendCommand("pasteCleanup", payload);
+    }, []);
     const pendingRefreshScrollRef = useRef(undefined);
+    // Selected component handed over by a frame that unmounted for a layout
+    // switch; once geometry arrives it is put back at its previous distance
+    // from the canvas top (see canvasScrollHandoff).
+    const pendingScrollAnchorRef = useRef(undefined);
     // #fragment carried by a canvas link navigation (preview click / alt+click).
     // Applied to the next iframe src load so the browser lands the canvas on the
     // linked section instead of the page top.
@@ -721,11 +733,18 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             // bridge is delivering that newer target. Restoring the stale capture
             // would fight it (restoreIframeWindowScroll re-asserts for ~150
             // frames and cancels in-flight smooth scrolls).
+            logFieldValueDiagnostic("canvas-load", `scroll restore ctx=${pageViewContextRef.current?.debugId} dropped y=${targetScroll.y}: newer scroll command`);
             clearPendingTarget();
             return;
         }
-        const currentScroll = getIframeWindowScroll(iframe) ??
-            observedScroll ?? { x: 0, y: 0 };
+        const iframeScroll = getIframeWindowScroll(iframe);
+        if (!iframeScroll && !bridgeClientRef.current?.isReady()) {
+            // A cross-origin host can only be scrolled through the bridge, and the
+            // iframe load event fires before its handshake. Keep the target for
+            // the bridge's ready event instead of dropping it here.
+            return;
+        }
+        const currentScroll = iframeScroll ?? observedScroll ?? { x: 0, y: 0 };
         const deltaX = targetScroll.x - currentScroll.x;
         const deltaY = targetScroll.y - currentScroll.y;
         // Already at the target: re-asserting the position would be a no-op
@@ -735,10 +754,14 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             clearPendingTarget();
             return;
         }
+        logFieldValueDiagnostic("canvas-load", `scroll restore ctx=${pageViewContextRef.current?.debugId} y=${currentScroll.y}->${targetScroll.y} from=${iframeScroll ? "window" : "bridge"}`);
         const restoreStarted = restoreIframeWindowScroll(iframe, targetScroll, {
             maxAttempts: 150,
             onSettled: clearPendingTarget,
             onExpired: clearPendingTarget,
+            // A newer target (or a cleared one) owns the viewport now; re-asserting
+            // this one for the rest of the ~150 frames would fight it.
+            isCurrent: () => pendingRefreshScrollRef.current === targetScroll,
         });
         if (!restoreStarted) {
             clearPendingTarget();
@@ -769,7 +792,19 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         requestedTextRangeGeometry: false,
     });
     const [showSpinner, setShowSpinner] = useState(false);
+    // Collects the canvas highlightings' marks for the overview ruler.
+    const [overviewRulerStore] = useState(createOverviewRulerStore);
     const [iframeSrc, setIframeSrc] = useState();
+    // Mirrors iframeSrc for the render effect, which must read the last
+    // requested canvas URL without re-running on it. The iframe's `src`
+    // attribute no longer tracks it: later loads go through location.replace()
+    // (see navigateCanvasFrame), so the attribute keeps the first URL.
+    const requestedIframeSrcRef = useRef(undefined);
+    // The full iframe load that has been requested but whose bridge has not
+    // connected yet. The render effect consults it so a pre-bridge re-run for the
+    // same URL waits for this load instead of issuing a second one (see
+    // canvasLoadSettling.ts). Cleared once the bridge reports ready.
+    const inFlightCanvasLoadRef = useRef(null);
     const [loadedIframeSrc, setLoadedIframeSrc] = useState();
     const [scroll, setScroll] = useState(0);
     const [showMiniMap, setShowMiniMap] = useState(false);
@@ -788,6 +823,13 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         iframeRef.current = node;
         setIframeElement(node);
     }, []);
+    // Apply the requested canvas URL to the frame. Runs again for a remounted
+    // iframe element so a fresh frame picks up the current URL.
+    useEffect(() => {
+        if (!iframeElement || !iframeSrc)
+            return;
+        navigateCanvasFrame(iframeElement, iframeSrc);
+    }, [iframeElement, iframeSrc]);
     // Clear preSelectedAction when overlay is closed
     useEffect(() => {
         if (editContext?.currentOverlay !==
@@ -795,8 +837,47 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             setPreSelectedAction(undefined);
         }
     }, [editContext?.currentOverlay, contextMenuField?.fieldId]);
-    const zoom = pageViewContext.zoom;
     const [currentItemDescriptor, setCurrentItemDescriptor] = useState(undefined);
+    // The iframe, and with it the scroll position, goes away with this frame.
+    // A layout switch (fullscreen on/off) mounts a new frame for the same page
+    // right away; hand it the scroll so the page does not jump back to the top.
+    const loadedItemDescriptorRef = useRef(undefined);
+    useLayoutEffect(() => {
+        loadedItemDescriptorRef.current = currentItemDescriptor;
+    }, [currentItemDescriptor]);
+    useLayoutEffect(() => () => {
+        const loadedItemDescriptor = loadedItemDescriptorRef.current;
+        const unmountingContextId = pageViewContextRef.current?.debugId;
+        if (!loadedItemDescriptor) {
+            logFieldValueDiagnostic("canvas-load", `frame unmount ctx=${unmountingContextId} no handoff: no page loaded`);
+            return;
+        }
+        // Layout cleanups run before React detaches the iframe, so the live
+        // window scroll is still readable for same-origin hosts.
+        const windowScroll = getIframeWindowScroll(iframeRef.current);
+        const scroll = windowScroll ?? latestBridgeScrollRef.current;
+        if (!scroll) {
+            logFieldValueDiagnostic("canvas-load", `frame unmount ctx=${unmountingContextId} no handoff: no scroll known`);
+            return;
+        }
+        let anchor;
+        const geometry = pageViewContextRef.current?.getState().bridgeGeometry;
+        const selection = editContextRef.current?.getSelection() ?? [];
+        const selectedComponentId = selection[selection.length - 1];
+        const bounds = selectedComponentId
+            ? findBridgeComponentDocumentBounds(geometry, selectedComponentId)
+            : undefined;
+        if (geometry && selectedComponentId && bounds) {
+            const viewportTop = bounds.y - scroll.y * getBridgeGeometryScrollScale(geometry);
+            // Only a component the user can see anchors the view.
+            if (viewportTop < geometry.viewport.height &&
+                viewportTop + bounds.height > 0) {
+                anchor = { componentId: selectedComponentId, viewportTop };
+            }
+        }
+        logFieldValueDiagnostic("canvas-load", `frame unmount ctx=${unmountingContextId} handoff y=${scroll.y} from=${windowScroll ? "window" : "bridge"} anchor=${anchor?.componentId ?? "none"}`);
+        stashCanvasScrollHandoff(getCanvasScrollHandoffKey(loadedItemDescriptor), { scroll, anchor });
+    }, []);
     // Field action handlers for the overlay
     const handleActionClick = async (action, event) => {
         if (contextMenuField) {
@@ -810,7 +891,6 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     };
     // Note: handleParameterizedActionFromContextMenu is now created inline in handleContextMenu
     // to avoid React state timing issues with contextMenuPosition
-    const pageItemDescriptor = pageViewContext.pageItemDescriptor;
     const shouldTrackMinimapScroll = useCallback(() => {
         const editor = editContextRef.current;
         return !!(showMiniMap &&
@@ -822,9 +902,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         if (!shouldTrackMinimapScroll())
             return;
         setScroll(e);
-        if (!compareView)
-            pageViewContextRef.current?.setScroll(e);
-    }, [compareView, shouldTrackMinimapScroll]);
+    }, [shouldTrackMinimapScroll]);
     const scrollHandler = useThrottledCallback(updateScrollPosition, 100);
     const scrollHandlerRef = useRef(scrollHandler);
     useEffect(() => {
@@ -840,14 +918,13 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     }, []);
     const projectCurrentBridgeGeometryToScroll = useCallback((scroll) => {
         const activeContext = pageViewContextRef.current;
-        const currentGeometry = activeContext?.bridgeGeometry;
+        const currentGeometry = activeContext?.getState().bridgeGeometry;
         const projectedGeometry = projectBridgeGeometryToScroll(currentGeometry, scroll);
         if (!activeContext ||
             !projectedGeometry ||
             projectedGeometry === currentGeometry) {
             return;
         }
-        activeContext.bridgeGeometry = projectedGeometry;
         activeContext.setBridgeGeometry(projectedGeometry);
         scheduleBridgeGeometryRevision();
     }, [scheduleBridgeGeometryRevision]);
@@ -959,11 +1036,13 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         });
         if (!previewScope.onlySuggestionId)
             return;
-        const structureField = pageViewContextRef.current?.bridgeStructure?.fields.find((candidate) => candidate.elementKey === elementKey);
+        const structureField = pageViewContextRef.current
+            ?.getState()
+            .bridgeStructure?.fields.find((candidate) => candidate.elementKey === elementKey);
         if (!structureField)
             return;
-        const fallbackItem = pageViewContextRef.current?.pageItemDescriptor ??
-            pageViewContextRef.current?.page?.item?.descriptor;
+        const fallbackItem = pageViewContextRef.current?.getState().pageItemDescriptor ??
+            pageViewContextRef.current?.getState().page?.item?.descriptor;
         const bridgeItem = structureField.item;
         const itemDescriptor = {
             id: bridgeItem?.id ?? fallbackItem?.id,
@@ -986,9 +1065,9 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             itemId: itemDescriptor.id,
             language: itemDescriptor.language,
             version: itemDescriptor.version,
-            pageItemId: pageViewContextRef.current?.pageItemDescriptor?.id,
-            pageItemLanguage: pageViewContextRef.current?.pageItemDescriptor?.language,
-            pageItemVersion: pageViewContextRef.current?.pageItemDescriptor?.version,
+            pageItemId: pageViewContextRef.current?.getState().pageItemDescriptor?.id,
+            pageItemLanguage: pageViewContextRef.current?.getState().pageItemDescriptor?.language,
+            pageItemVersion: pageViewContextRef.current?.getState().pageItemDescriptor?.version,
         };
         if (!previewScopeCoversField(previewScope, editor.suggestedEdits, suggestionField)) {
             return;
@@ -1188,16 +1267,17 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             repositoryValue,
             modifiedFields: preferRepositoryValue
                 ? undefined
-                : fieldsContext?.modifiedFields,
+                : (slotContext?.fieldModificationStore.getAllFields() ??
+                    fieldsContext?.modifiedFields),
             suggestedEdits: editContext.suggestedEdits,
             field: {
                 fieldId: field.id || structureField.fieldId,
                 itemId: itemDescriptor.id,
                 language: itemDescriptor.language,
                 version: itemDescriptor.version,
-                pageItemId: pageViewContext.pageItemDescriptor?.id,
-                pageItemLanguage: pageViewContext.pageItemDescriptor?.language,
-                pageItemVersion: pageViewContext.pageItemDescriptor?.version,
+                pageItemId: pageItemDescriptor?.id,
+                pageItemLanguage: pageItemDescriptor?.language,
+                pageItemVersion: pageItemDescriptor?.version,
             },
             mode: previewScope.mode,
             onlySuggestionId: previewScope.onlySuggestionId,
@@ -1217,7 +1297,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         editContext.suggestedEdits,
         editContext.suggestionVariantSelection,
         fieldsContext?.modifiedFields,
-        pageViewContext.pageItemDescriptor,
+        slotContext?.fieldModificationStore,
+        pageItemDescriptor,
     ]);
     const buildBridgeFieldPatch = useCallback(({ field, structureField, itemDescriptor, preferRepositoryValue, replaceActiveInlineEdit, }) => {
         const display = getBridgePatchDisplayValue({
@@ -1292,8 +1373,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             return;
         }
         const sourceItem = activeField.item ??
-            pageViewContextRef.current?.page?.item ??
-            pageViewContextRef.current?.pageItemDescriptor;
+            pageViewContextRef.current?.getState().page?.item ??
+            pageViewContextRef.current?.getState().pageItemDescriptor;
         const version = typeof sourceItem?.version === "number" &&
             Number.isFinite(sourceItem.version)
             ? sourceItem.version
@@ -1325,30 +1406,34 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         });
         lastSentBridgeCaretRef.current = nextKey;
     }, [clearBridgeRemoteCaretPosition, editContextRef, pageViewContextRef]);
+    // Subscribed, not rendered: carets move on every keystroke of every session.
+    const remoteCaretsStore = editContext.remoteCaretsStore;
     useEffect(() => {
-        const bridge = bridgeClientRef.current;
-        const structureFields = pageViewContext.bridgeStructure?.fields ?? [];
-        if (!bridge || structureFields.length === 0)
+        if (!remoteCaretsStore)
             return;
-        const patches = buildRemoteCaretFieldPatches({
-            remoteCarets: editContext.remoteCarets,
-            structureFields,
-            activeInlineEdit: activeBridgeInlineEditRef.current,
-        });
-        // Keep the host informed about the complete live-draft set. Unlike an
-        // ordinary field patch, this state survives host-app/React renders: the
-        // bridge reapplies these values in its mutation observer before other
-        // observers can see stale server markup.
-        bridge.sendCommand("syncRemoteFieldDrafts", { drafts: patches });
-        for (const patch of patches) {
-            const structureField = structureFields.find((field) => field.elementKey === patch.elementKey);
-            sendBridgeFieldPatch(bridge, patch, structureField?.textContent);
-        }
-    }, [
-        editContext.remoteCarets,
-        pageViewContext.bridgeStructure,
-        sendBridgeFieldPatch,
-    ]);
+        const syncRemoteFieldDrafts = () => {
+            const bridge = bridgeClientRef.current;
+            const structureFields = bridgeStructure?.fields ?? [];
+            if (!bridge || structureFields.length === 0)
+                return;
+            const patches = buildRemoteCaretFieldPatches({
+                remoteCarets: remoteCaretsStore.get(),
+                structureFields,
+                activeInlineEdit: activeBridgeInlineEditRef.current,
+            });
+            // Keep the host informed about the complete live-draft set. Unlike an
+            // ordinary field patch, this state survives host-app/React renders: the
+            // bridge reapplies these values in its mutation observer before other
+            // observers can see stale server markup.
+            bridge.sendCommand("syncRemoteFieldDrafts", { drafts: patches });
+            for (const patch of patches) {
+                const structureField = structureFields.find((field) => field.elementKey === patch.elementKey);
+                sendBridgeFieldPatch(bridge, patch, structureField?.textContent);
+            }
+        };
+        syncRemoteFieldDrafts();
+        return remoteCaretsStore.subscribe(syncRemoteFieldDrafts);
+    }, [remoteCaretsStore, bridgeStructure, sendBridgeFieldPatch]);
     const handleBridgeSelection = useCallback((selection, iframe) => {
         const editor = editContextRef.current;
         if (!editor)
@@ -1376,8 +1461,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         }
         clearBridgeRemoteCaretPosition();
         const item = selection.activeField.item ??
-            pageViewContextRef.current?.page?.item ??
-            pageViewContextRef.current?.pageItemDescriptor;
+            pageViewContextRef.current?.getState().page?.item ??
+            pageViewContextRef.current?.getState().pageItemDescriptor;
         if (!item?.id) {
             editor.setSelectedRange(undefined);
             return;
@@ -1418,7 +1503,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         editor.setSelectedRange(nextRange);
     }, [clearBridgeRemoteCaretPosition, sendBridgeRemoteCaretPosition]);
     const resolveBridgeFieldDescriptor = useCallback(async (interaction) => {
-        const pageView = pageViewContextRef.current;
+        const pageView = pageViewContextRef.current?.getState();
         const selectedRange = editContextRef.current?.selectedRange;
         const selectedRangeElementKey = selectedRange?.elementKey;
         const selectedRangeMatchesInteraction = !!((interaction.kind === "contextMenu" ||
@@ -1544,7 +1629,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             clearBridgeTextCompletion();
             return;
         }
-        const bridgeSelection = latestBridgeSelectionRef.current;
+        const bridgeSelection = pageViewContextRef.current?.getState().bridgeSelection;
         const selectionMatches = bridgeSelectionMatchesInteraction(bridgeSelection, interaction);
         const activeField = selectionMatches
             ? bridgeSelection?.activeField
@@ -1688,6 +1773,9 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         sendTextCompletionCommand,
     ]);
     const handleBridgeInteraction = useCallback(async (interaction, iframe) => {
+        if (interaction.kind === "click" && interaction.fieldId) {
+            logFieldValueDiagnostic("bridge-inline", `interaction click field=${interaction.fieldId} element=${interaction.elementKey ?? "none"} component=${interaction.componentId ?? "none"}`);
+        }
         if (interaction.kind === "wheel") {
             if (!interaction.ctrlKey && !interaction.metaKey)
                 return;
@@ -1752,10 +1840,10 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 const editor = editContextRef.current;
                 let linkRange = editor?.selectedRange;
                 if (!isBridgeLinkShortcutRange(linkRange, interaction)) {
-                    const bridgeSelection = latestBridgeSelectionRef.current;
+                    const bridgeSelection = pageViewContextRef.current?.getState().bridgeSelection;
                     const item = bridgeSelection?.activeField?.item ??
-                        pageViewContextRef.current?.page?.item ??
-                        pageViewContextRef.current?.pageItemDescriptor;
+                        pageViewContextRef.current?.getState().page?.item ??
+                        pageViewContextRef.current?.getState().pageItemDescriptor;
                     if (bridgeSelection &&
                         !bridgeSelection.collapsed &&
                         bridgeSelection.text?.trim() &&
@@ -1823,16 +1911,16 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 const editor = editContextRef.current;
                 const field = await resolveBridgeFieldDescriptor(interaction);
                 if (editor && field) {
-                    await editor.setFocusedField(field, editor.mode !== "suggestions");
+                    await fieldsContextRef.current?.setFocusedField(field, editor.mode !== "suggestions");
                 }
                 const iframeRect = iframe.getBoundingClientRect();
-                const bridgeSelection = latestBridgeSelectionRef.current;
+                const bridgeSelection = pageViewContextRef.current?.getState().bridgeSelection;
                 const commandRange = resolveBridgeInlineAiSelectionRange({
                     interaction,
                     bridgeSelection,
                     iframeRect,
-                    fallbackItem: pageViewContextRef.current?.page?.item ??
-                        pageViewContextRef.current?.pageItemDescriptor,
+                    fallbackItem: pageViewContextRef.current?.getState().page?.item ??
+                        pageViewContextRef.current?.getState().pageItemDescriptor,
                 });
                 const fallbackCaretRect = !interaction.selectionRect &&
                     !interaction.caretRect &&
@@ -1956,8 +2044,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 structuredFieldValue,
                 anchorIndex: interaction.link.anchorIndex,
             });
-            const sourceItem = pageViewContextRef.current?.page?.item ??
-                pageViewContextRef.current?.pageItemDescriptor ??
+            const sourceItem = pageViewContextRef.current?.getState().page?.item ??
+                pageViewContextRef.current?.getState().pageItemDescriptor ??
                 interaction.item;
             if (!targetItemId &&
                 canvasLinkHash &&
@@ -1968,7 +2056,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             if (!targetItemId && sourceItem) {
                 const linkPath = extractInternalLinkPath(interaction.link.href, window.location.href);
                 if (linkPath) {
-                    const resolvedPage = await resolvePageAndSiteByPath(linkPath, sourceItem.language ?? "en", pageViewContextRef.current?.site?.name);
+                    const resolvedPage = await resolvePageAndSiteByPath(linkPath, sourceItem.language ?? "en", pageViewContextRef.current?.getState().site?.name);
                     targetItemId = resolvedPage?.pageItem.id;
                 }
             }
@@ -2028,7 +2116,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             !interaction.fieldId &&
             interaction.clientX !== undefined &&
             interaction.clientY !== undefined) {
-            const fieldTarget = findBridgeFieldTargetAtPoint(pageViewContextRef.current?.bridgeGeometry, interaction.clientX, interaction.clientY);
+            const fieldTarget = findBridgeFieldTargetAtPoint(pageViewContextRef.current?.getState().bridgeGeometry, interaction.clientX, interaction.clientY);
             if (fieldTarget?.fieldId) {
                 effectiveInteraction = {
                     ...interaction,
@@ -2037,7 +2125,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 };
             }
         }
-        const componentId = resolveBridgeComponentId(effectiveInteraction.componentId, pageViewContextRef.current?.page);
+        const componentId = resolveBridgeComponentId(effectiveInteraction.componentId, pageViewContextRef.current?.getState().page);
         const isEditableFieldClick = !!(effectiveInteraction.kind === "click" &&
             effectiveInteraction.fieldId &&
             effectiveInteraction.elementKey &&
@@ -2105,7 +2193,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         const currentSelection = editor.getSelection();
         if (interaction.kind === "contextMenu") {
             if (pageViewContextRef.current) {
-                pageViewContextRef.current.bridgeInteraction = effectiveInteraction;
+                pageViewContextRef.current.setBridgeInteraction(effectiveInteraction);
             }
             const selectedIds = currentSelection.includes(componentId)
                 ? currentSelection
@@ -2113,7 +2201,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             if (!currentSelection.includes(componentId)) {
                 selectFromBridgeInteraction(selectedIds);
             }
-            const page = pageViewContextRef.current?.page;
+            const page = pageViewContextRef.current?.getState().page;
             if (!page)
                 return;
             const selectedComponents = selectedIds
@@ -2189,6 +2277,23 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                     }, 100);
                 };
                 items = await buildComponentContextMenuItems(selectedComponents, editor, field, fieldButtons, handleParameterizedActionWithPosition);
+                // Right-click on an underlined misspelling: suggestions come first.
+                const spellItems = await buildCanvasSpellCheckMenuItems({
+                    editor,
+                    geometry: pageViewContextRef.current?.getState().bridgeGeometry,
+                    clientX: interaction.clientX,
+                    clientY: interaction.clientY,
+                    enabled: !editor.readonly &&
+                        editor.mode === "edit" &&
+                        editor.userInfo?.preferences?.spellCheckEnabled !== false,
+                });
+                if (spellItems.length > 0) {
+                    items = [
+                        ...spellItems,
+                        { id: "spellcheck-section-separator", separator: true },
+                        ...items,
+                    ];
+                }
             }
             catch (error) {
                 console.error("Failed to build component context menu:", error);
@@ -2212,7 +2317,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             return;
         }
         if (interaction.shiftKey && currentSelection.length > 0) {
-            const orderedIds = getOrderedBridgeComponentIds(pageViewContextRef.current?.bridgeGeometry, pageViewContextRef.current?.page);
+            const orderedIds = getOrderedBridgeComponentIds(pageViewContextRef.current?.getState().bridgeGeometry, pageViewContextRef.current?.getState().page);
             const anchorId = currentSelection[currentSelection.length - 1];
             const anchorIndex = orderedIds.findIndex((id) => bridgeIdsMatch(id, anchorId));
             const targetIndex = orderedIds.findIndex((id) => bridgeIdsMatch(id, componentId));
@@ -2248,6 +2353,18 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             return;
         }
         selectFromBridgeInteraction([componentId]);
+        // On a phone the tap also opens the edit form when the component is
+        // already selected: the selection-driven auto-open in the shell only
+        // reacts to changes, and the comments panel may be covering the form.
+        if (interaction.kind === "click" &&
+            shouldOpenMobileFormOnCanvasTap({
+                isMobile: editor.isMobile,
+                workspaceId: editor.workspaceId,
+                mode: editor.mode,
+                hasTarget: true,
+            })) {
+            editor.setMobileEditorPanelOpen(true);
+        }
         if (isEditableFieldClick) {
             clearSelectedRangeForEditableClick();
             beginTrackedBridgeInlineEditAfterSelection(effectiveInteraction);
@@ -2282,7 +2399,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             const active = activeBridgePointerDragRef.current;
             if (!active || event.pointerId !== active.pointerId)
                 return;
-            const projected = projectParentPointerToHost(event.clientX, event.clientY, iframe.getBoundingClientRect(), pageViewContextRef.current?.bridgeGeometry?.viewport);
+            const projected = projectParentPointerToHost(event.clientX, event.clientY, iframe.getBoundingClientRect(), pageViewContextRef.current?.getState().bridgeGeometry?.viewport);
             if (!projected.inside)
                 return;
             active.clientX = projected.clientX;
@@ -2301,7 +2418,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             if (!active)
                 return;
             const rect = iframe.getBoundingClientRect();
-            const payload = resolveParentBridgePointerRelease(active, event, rect, pageViewContextRef.current?.bridgeGeometry?.viewport);
+            const payload = resolveParentBridgePointerRelease(active, event, rect, pageViewContextRef.current?.getState().bridgeGeometry?.viewport);
             if (!payload)
                 return;
             // Clear before dispatching and before asking the host to clean up. Any
@@ -2358,7 +2475,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 lastY = scroll.y;
                 latestBridgeScrollRef.current = scroll;
                 projectCurrentBridgeGeometryToScroll(scroll);
-                dispatchBridgeOverlayScroll(iframe, scroll, getBridgeGeometryScrollScale(pageViewContextRef.current?.bridgeGeometry));
+                dispatchBridgeOverlayScroll(iframe, scroll, getBridgeGeometryScrollScale(pageViewContextRef.current?.getState().bridgeGeometry));
             };
             iframeDocument.addEventListener("scroll", handleScroll, {
                 capture: true,
@@ -2391,8 +2508,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             return;
         }
         const allowedHostOrigins = [
-            getUrlOrigin(pageViewContext.editUrl),
-            getUrlOrigin(pageViewContext.previewUrl),
+            getUrlOrigin(editUrl),
+            getUrlOrigin(previewUrl),
         ].filter((origin) => Boolean(origin));
         // The iframe can finish loading before the page-view URLs have propagated
         // into context, and a same-origin host can normalize its live URL after the
@@ -2406,6 +2523,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             editorOrigin: window.location.origin,
             allowedHostOrigins,
             onReadyChange: (ready) => {
+                if (ready)
+                    inFlightCanvasLoadRef.current = null;
                 pageViewContext.setBridgeReady(ready);
                 if (!ready)
                     pageViewContext.setIframeSupportsRefresh(false);
@@ -2440,6 +2559,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                             selectedComponentIds: editContextRef.current?.getSelection() ?? [],
                             featureFlags: {
                                 crossOriginBridge: true,
+                                pasteCleanupOverlay: true,
                                 // Lets the host emit its own perf logs + interaction perf
                                 // timestamps without needing a flag in the iframe's origin.
                                 perfTrace: isPerfTraceEnabled(),
@@ -2448,7 +2568,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                             acknowledgedCapabilities: bridge.getAcknowledgedCapabilities(),
                         });
                         bridge.sendCommand("setZoom", {
-                            zoom: pageViewContextRef.current?.zoom ?? 1,
+                            zoom: pageViewContextRef.current?.getState().zoom ?? 1,
                         });
                         // Ready confirms the bridge transport, not that its initial
                         // mutation-driven geometry snapshot reached the editor. Query the
@@ -2462,8 +2582,12 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                         bridge.sendCommand("queryGeometry", {
                             textRanges: Array.from(bridgeTextRangeSourcesRef.current.values()).flat(),
                         });
-                        if (pendingRefreshScrollRef.current) {
-                            restorePendingRefreshScroll(iframe, pendingRefreshScrollRef.current);
+                        // With a handed-over anchor, the first geometry decides the
+                        // target (see the anchor effect); a relative scrollBy sent now
+                        // would add up with the anchor's on cross-origin hosts.
+                        if (pendingRefreshScrollRef.current &&
+                            !pendingScrollAnchorRef.current) {
+                            restorePendingRefreshScroll(iframe, pendingRefreshScrollRef.current, event.payload.scroll);
                         }
                         break;
                     case "structureUpdated":
@@ -2493,7 +2617,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                         pageViewContext.setPageSkeleton(event.payload.pageSkeleton);
                         break;
                     case "resizeChanged": {
-                        const currentGeometry = pageViewContext.bridgeGeometry;
+                        const currentGeometry = pageViewContext.getState().bridgeGeometry;
                         const viewportChanged = !currentGeometry ||
                             currentGeometry.viewport.width !== event.payload.viewport.width ||
                             currentGeometry.viewport.height !==
@@ -2508,7 +2632,6 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                         // example, when the minimap narrows the canvas). Remove that stale
                         // snapshot immediately and request its replacement now, preserving
                         // every overlay's registered text-range query.
-                        pageViewContext.bridgeGeometry = undefined;
                         pageViewContext.setBridgeGeometry(undefined);
                         scheduleBridgeGeometryRevision();
                         bridge.sendCommand("queryGeometry", {
@@ -2532,7 +2655,6 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                             : undefined) ?? event.payload.geometry.scroll;
                         const geometry = projectBridgeGeometryToScroll(event.payload.geometry, liveScroll) ?? event.payload.geometry;
                         latestBridgeScrollRef.current = geometry.scroll;
-                        pageViewContext.bridgeGeometry = geometry;
                         pageViewContext.setBridgeGeometry(geometry);
                         scheduleBridgeGeometryRevision();
                         dispatchBridgeOverlayScroll(iframe, geometry.scroll, getBridgeGeometryScrollScale(geometry));
@@ -2543,10 +2665,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                         break;
                     }
                     case "domUpdated":
-                        pageViewContext.bridgeDom = event.payload;
                         pageViewContext.setBridgeDom(event.payload);
                         scheduleBridgeDomRevision();
-                        window.dispatchEvent(new CustomEvent(BRIDGE_DOM_UPDATED_EVENT));
                         break;
                     case "refreshStarted":
                         hostAppRefreshSawStructureUpdateRef.current = false;
@@ -2589,7 +2709,6 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                                 : undefined) ?? event.payload.geometry.scroll;
                             const geometry = projectBridgeGeometryToScroll(event.payload.geometry, liveScroll) ?? event.payload.geometry;
                             latestBridgeScrollRef.current = geometry.scroll;
-                            pageViewContext.bridgeGeometry = geometry;
                             pageViewContext.setBridgeGeometry(geometry);
                             scheduleBridgeGeometryRevision();
                             dispatchBridgeOverlayScroll(iframe, geometry.scroll, getBridgeGeometryScrollScale(geometry));
@@ -2606,6 +2725,9 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                             // The host already replayed a scroll issued during the refresh
                             // (e.g. a minimap navigation) — restoring the pre-refresh
                             // position now would clobber that newer intent.
+                            if (pendingRefreshScrollRef.current) {
+                                logFieldValueDiagnostic("canvas-load", `scroll restore ctx=${pageViewContext.debugId} dropped y=${pendingRefreshScrollRef.current.y}: host replayed a newer scroll`);
+                            }
                             pendingRefreshScrollRef.current = undefined;
                         }
                         else if (pendingRefreshScrollRef.current) {
@@ -2635,10 +2757,24 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                         }
                         setShowSpinner(false);
                         break;
+                    case "pasteCleanupChanged":
+                        setPasteCleanupMenu(event.payload.menu);
+                        break;
                     case "selectionChanged":
-                        latestBridgeSelectionRef.current = event.payload.selection;
                         pageViewContext.setBridgeSelection(event.payload.selection);
                         handleBridgeSelection(event.payload.selection, iframe);
+                        // Comment target picking: a passage selected on the canvas is
+                        // the target once the pointer is released. The composer reads
+                        // the selection from the edit context, which the call above
+                        // updates with the next render. The formatting menu stays away
+                        // from a passage picked this way until the selection changes.
+                        releasePickedSelection(event.payload.selection);
+                        if (!compareView &&
+                            isCanvasPickSelection(event.payload.selection)) {
+                            markPickedSelection(event.payload.selection);
+                            stopCommentTargetPicking();
+                            window.requestAnimationFrame(() => window.requestAnimationFrame(() => editContextRef.current?.addComment()));
+                        }
                         break;
                     case "fieldValueChanged":
                         handleBridgeFieldValueChanged(event.payload);
@@ -2679,6 +2815,12 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                                 transportMs: Date.now() - event.timestamp,
                             }, eventAt ?? event.timestamp);
                         }
+                        // While picking a comment target, clicks, Escape and the context
+                        // menu belong to the picker, not to selection or inline editing.
+                        if (!compareView &&
+                            handleCanvasPickInteraction(event.payload, editContextRef.current, pageViewContextRef.current?.getState().pageItemDescriptor)) {
+                            break;
+                        }
                         setBridgeInteraction(event.payload);
                         pageViewContext.setBridgeInteraction(event.payload);
                         void handleBridgeInteraction(event.payload, iframe);
@@ -2728,7 +2870,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                         // late echo of a scroll the overlay already applied; re-dispatching
                         // it would briefly drag the overlay back to a stale position.
                         if (!directOverlayScrollSyncRef.current) {
-                            dispatchBridgeOverlayScroll(iframe, event.payload.scroll, getBridgeGeometryScrollScale(pageViewContextRef.current?.bridgeGeometry));
+                            dispatchBridgeOverlayScroll(iframe, event.payload.scroll, getBridgeGeometryScrollScale(pageViewContextRef.current?.getState().bridgeGeometry));
                         }
                         if (shouldTrackMinimapScroll()) {
                             scrollHandlerRef.current(event.payload.scroll.y);
@@ -2740,6 +2882,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 }
             },
         });
+        setPasteCleanupMenu(undefined);
         bridgeClientRef.current = client;
         pageViewContext.setBridgeReady(false);
         client.connect();
@@ -2767,8 +2910,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         clearActiveBridgeInlineEdit,
         bridgeInlineEditSession,
         reconcileActiveBridgeInlineEdit,
-        pageViewContext.editUrl,
-        pageViewContext.previewUrl,
+        editUrl,
+        previewUrl,
         scheduleBridgeDomRevision,
         scheduleBridgeGeometryRevision,
         shouldTrackMinimapScroll,
@@ -2784,7 +2927,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             if (fieldChanges.length === 0)
                 return;
             const bridge = bridgeClientRef.current;
-            const structure = pageViewContextRef.current?.bridgeStructure;
+            const structure = pageViewContextRef.current?.getState().bridgeStructure;
             if (!bridge || !structure?.fields.length)
                 return;
             const processResolvedField = (change, changedFieldId, field) => {
@@ -2792,8 +2935,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                     return;
                 const patchedElementKeys = new Set();
                 const patches = [];
-                const pageItemDescriptor = pageViewContextRef.current?.pageItemDescriptor ??
-                    pageViewContextRef.current?.page?.item?.descriptor;
+                const pageItemDescriptor = pageViewContextRef.current?.getState().pageItemDescriptor ??
+                    pageViewContextRef.current?.getState().page?.item?.descriptor;
                 for (const structureField of structure.fields) {
                     if (!structureField.elementKey)
                         continue;
@@ -2832,7 +2975,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                     // stale mid-typing — applying it would roll the canvas text back
                     // and make the remote caret jump against the shorter text.
                     if (hasRemoteCaretDraftForField({
-                        remoteCarets: editContextRef.current?.remoteCarets,
+                        remoteCarets: editContextRef.current?.remoteCaretsStore?.get(),
                         fieldId: structureField.fieldId,
                         item: structureField.item,
                     })) {
@@ -2860,8 +3003,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             };
             const asyncFieldChanges = [];
             for (const change of fieldChanges) {
-                const pageItemDescriptor = pageViewContextRef.current?.pageItemDescriptor ??
-                    pageViewContextRef.current?.page?.item?.descriptor;
+                const pageItemDescriptor = pageViewContextRef.current?.getState().pageItemDescriptor ??
+                    pageViewContextRef.current?.getState().page?.item?.descriptor;
                 if (!bridgeStructureTargetsChangedItem(structure.fields, change.item, pageItemDescriptor)) {
                     continue;
                 }
@@ -2924,8 +3067,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     ]);
     useEffect(() => {
         const bridge = bridgeClientRef.current;
-        const structure = pageViewContext.bridgeStructure;
-        if (!pageViewContext.bridgeReady || !bridge || !structure?.fields.length) {
+        const structure = bridgeStructure;
+        if (!bridgeReady || !bridge || !structure?.fields.length) {
             return;
         }
         let disposed = false;
@@ -2938,8 +3081,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                     continue;
                 if (patchedElementKeys.has(structureField.elementKey))
                     continue;
-                const fallbackItem = pageViewContextRef.current?.pageItemDescriptor ??
-                    pageViewContextRef.current?.page?.item?.descriptor;
+                const fallbackItem = pageViewContextRef.current?.getState().pageItemDescriptor ??
+                    pageViewContextRef.current?.getState().page?.item?.descriptor;
                 const bridgeItem = structureField.item;
                 const itemDescriptor = {
                     id: bridgeItem?.id ?? fallbackItem?.id,
@@ -2964,9 +3107,9 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                     itemId: itemDescriptor.id,
                     language: itemDescriptor.language,
                     version: itemDescriptor.version,
-                    pageItemId: pageViewContextRef.current?.pageItemDescriptor?.id,
-                    pageItemLanguage: pageViewContextRef.current?.pageItemDescriptor?.language,
-                    pageItemVersion: pageViewContextRef.current?.pageItemDescriptor?.version,
+                    pageItemId: pageViewContextRef.current?.getState().pageItemDescriptor?.id,
+                    pageItemLanguage: pageViewContextRef.current?.getState().pageItemDescriptor?.language,
+                    pageItemVersion: pageViewContextRef.current?.getState().pageItemDescriptor?.version,
                 };
                 // Suggestions mode previews every field with pending suggestions. A
                 // selected suggestion card outside that mode previews only its own
@@ -2977,7 +3120,12 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                     showSelectedOnPage: editContext.showSelectedSuggestionOnPage,
                 }), editContext.suggestedEdits, suggestionField);
                 const dirtyModifiedField = findModifiedBridgeField({
-                    modifiedFields: fieldsContext?.modifiedFields,
+                    // Global React snapshots are intentionally deferred by the store.
+                    // An undo refresh can finish before that notification: consult the
+                    // live store so a formerly dirty value is not patched over the
+                    // authoritative server HTML during this window.
+                    modifiedFields: slotContext?.fieldModificationStore.getAllFields() ??
+                        fieldsContext?.modifiedFields,
                     structureField,
                     field,
                     itemDescriptor: itemDescriptor,
@@ -3023,9 +3171,10 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         editContext.showSelectedSuggestionOnPage,
         editContext.suggestedEdits,
         fieldsContext?.modifiedFields,
+        slotContext?.fieldModificationStore,
         bridgeDomRevision,
-        pageViewContext.bridgeReady,
-        pageViewContext.bridgeStructure,
+        bridgeReady,
+        bridgeStructure,
         sendBridgeFieldPatch,
     ]);
     useEffect(() => {
@@ -3067,6 +3216,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             return (bridgeClientRef.current?.sendCommand("applyRichTextCommand", payload) ??
                 false);
         };
+        const requestBridgeRichTextFieldOptions = (payload) => bridgeClientRef.current?.sendCommand("setRichTextFieldOptions", payload) ??
+            false;
         const requestBridgePreviewGap = (payload) => {
             return (bridgeClientRef.current?.sendCommand("previewGap", payload) ?? false);
         };
@@ -3101,6 +3252,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         pageViewContext.requestBridgeScrollBy = requestBridgeScrollBy;
         pageViewContext.requestBridgeFieldPatch = sendApplyFieldPatchCommand;
         pageViewContext.requestBridgeRichTextCommand = requestBridgeRichTextCommand;
+        pageViewContext.requestBridgeRichTextFieldOptions =
+            requestBridgeRichTextFieldOptions;
         pageViewContext.requestBridgePreviewGap = requestBridgePreviewGap;
         pageViewContext.requestBridgeCaptureSnapshot = requestBridgeCaptureSnapshot;
         pageViewContext.requestBridgeComponentSnapshot =
@@ -3108,7 +3261,9 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         pageViewContext.requestBridgePageSnapshot = requestBridgePageSnapshot;
         pageViewContext.requestBridgeCancelPointerDrag =
             requestBridgeCancelPointerDrag;
+        pageViewContext.setCanvasAttached(true);
         return () => {
+            pageViewContext.setCanvasAttached(false);
             if (pageViewContext.requestBridgeGeometry === requestBridgeGeometry) {
                 pageViewContext.requestBridgeGeometry = undefined;
             }
@@ -3140,6 +3295,10 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 requestBridgeRichTextCommand) {
                 pageViewContext.requestBridgeRichTextCommand = undefined;
             }
+            if (pageViewContext.requestBridgeRichTextFieldOptions ===
+                requestBridgeRichTextFieldOptions) {
+                pageViewContext.requestBridgeRichTextFieldOptions = undefined;
+            }
         };
     }, [pageViewContext, sendApplyFieldPatchCommand]);
     useEffect(() => {
@@ -3163,8 +3322,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         if (!iframeRef.current)
             return;
         const iframe = iframeRef.current;
-        const bridgeGeometry = pageViewContextRef.current?.bridgeGeometry;
-        const bridgeDom = pageViewContextRef.current?.bridgeDom;
+        const bridgeGeometry = pageViewContextRef.current?.getState().bridgeGeometry;
+        const bridgeDom = pageViewContextRef.current?.getState().bridgeDom;
         const contentHeight = bridgeDom?.scrollHeight ??
             getBridgeGeometryDocumentSize(bridgeGeometry)?.height;
         const contentWidth = bridgeDom?.viewport.width ?? bridgeGeometry?.viewport.width;
@@ -3212,18 +3371,38 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         ? pickVersionAtDate(editContext.itemVersions, editContext.previewDate)
             ?.version
         : undefined;
+    // The page's dynamic renderings, read from the preview canvas, for the strip
+    // that lists them for review and approval (never in compare panes). Client
+    // code that is not approved runs only in the review dialog's sealed frame;
+    // the canvas itself always stays the canvas.
+    const interactivePreviewPage = pageItemDescriptor
+        ? {
+            id: pageItemDescriptor.id,
+            language: pageItemDescriptor.language,
+            version: previewDateVersion ?? pageItemDescriptor.version,
+        }
+        : undefined;
+    const interactivePreview = useInteractivePreview({
+        mode: compareView ? undefined : editContext.mode,
+        page: interactivePreviewPage,
+    });
+    const { setHint: setCanvasRenderings } = interactivePreview;
+    // The latest preview canvas URL (without its edit_rev nonce); the review
+    // dialog's sealed frame loads the page with its query.
+    const previewCanvasUrlRef = useRef(undefined);
+    const getPreviewCanvasUrl = useCallback(() => previewCanvasUrlRef.current, []);
     useEffect(() => {
-        if (!pageItemDescriptor ||
-            !pageViewContext.editUrl ||
-            !pageViewContext.previewUrl)
+        if (!pageItemDescriptor || !editUrl || !previewUrl) {
+            if (!requestedIframeSrcRef.current) {
+                logFieldValueDiagnostic("canvas-load", `frame waiting ctx=${pageViewContext.debugId} compare=${!!compareView} descriptor=${pageItemDescriptor ? `${pageItemDescriptor.id}/v${pageItemDescriptor.version}` : "none"} editUrl=${editUrl ? "yes" : "no"} previewUrl=${previewUrl ? "yes" : "no"}`);
+            }
             return;
-        const urlPath = editContext.mode === "preview"
-            ? pageViewContext.previewUrl
-            : pageViewContext.editUrl;
+        }
+        const urlPath = editContext.mode === "preview" ? previewUrl : editUrl;
         const renderUrl = new URL(urlPath, window.location.origin);
         alignLoopbackHostToEditor(renderUrl);
         alignXmCloudManagedEditingHostToEditor(renderUrl);
-        applyParheliaRenderContext(renderUrl, pageItemDescriptor, getEditorQueryParam("site") || pageViewContext.site?.name);
+        applyParheliaRenderContext(renderUrl, pageItemDescriptor, getEditorQueryParam("site") || siteName);
         const editRev = uuid();
         renderUrl.searchParams.set("edit_rev", editRev);
         if (editContext.mode !== "preview" && editContext.sessionId) {
@@ -3261,7 +3440,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         }
         // Detect if the version in the URL changed - this requires a full reload, not just requestRefresh
         // because Next.js router.replace may not properly refetch server data for version changes.
-        const currentIframeUrl = iframeRef.current?.src;
+        const currentIframeUrl = requestedIframeSrcRef.current ?? iframeRef.current?.src;
         const currentIframeOrigin = getUrlOrigin(currentIframeUrl);
         const renderUrlIsCrossOrigin = renderUrl.origin !== window.location.origin;
         const iframeOriginChanged = !!(currentIframeOrigin && currentIframeOrigin !== renderUrl.origin);
@@ -3282,6 +3461,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         const initialLoad = currentItemDescriptor?.id !== pageItemDescriptor.id ||
             currentItemDescriptor?.language !== pageItemDescriptor.language ||
             currentItemDescriptor?.version !== pageItemDescriptor.version;
+        const scrollHandoffKey = getCanvasScrollHandoffKey(pageItemDescriptor);
         // A user-requested hard refresh: skip the incremental path entirely. It is
         // the escape hatch for the case where the bridge patch is what produced the
         // wrong DOM, so routing it through the bridge again would repeat the fault.
@@ -3295,6 +3475,9 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         const modeChanged = previousRenderMode !== editContext.mode;
         const previewRenderBoundaryChanged = crossesPreviewRenderBoundary(previousRenderMode, editContext.mode);
         lastRenderModeRef.current = editContext.mode;
+        if (editContext.mode === "preview") {
+            previewCanvasUrlRef.current = signatureUrl.toString();
+        }
         const shouldUseIframeSrcReload = initialLoad ||
             iframeOriginChanged ||
             fullReloadRequested ||
@@ -3304,7 +3487,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         // mode change. Mode is delivered by setEditorMode and cannot change the
         // server-rendered URL/revision; reloading during a transient bridge
         // disconnect would needlessly reset iframe scroll. Before the first bridge
-        // connection, identical non-mode re-runs still use the recovery path.
+        // connection, identical non-mode re-runs still use the recovery path -
+        // deferred while the load they duplicate is settling (see below).
         if (!shouldUseIframeSrcReload &&
             !versionChanged &&
             lastRenderSignatureRef.current === renderSignature &&
@@ -3320,12 +3504,29 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 // its own landing position. Restoring the previous page's scroll on
                 // ready would yank the canvas off that spot.
                 pendingRefreshScrollRef.current = undefined;
+                pendingScrollAnchorRef.current = undefined;
             }
             else if (!pendingRefreshScrollRef.current) {
+                // This frame's first load continues where a frame that just unmounted
+                // for the same page (layout switch) left off.
+                const handoff = currentItemDescriptor === undefined
+                    ? takeCanvasScrollHandoff(scrollHandoffKey)
+                    : undefined;
+                if (handoff) {
+                    // The page view context outlives the frame: its geometry still
+                    // describes the previous layout, and must not position the anchor
+                    // (or be projected onto this document's first scroll).
+                    pageViewContext.setBridgeGeometry(undefined);
+                }
+                pendingScrollAnchorRef.current = handoff?.anchor;
                 pendingRefreshScrollRef.current =
-                    getIframeWindowScroll(iframeRef.current) ??
+                    handoff?.scroll ??
+                        getIframeWindowScroll(iframeRef.current) ??
                         latestBridgeScrollRef.current;
                 pendingRefreshScrollCapturedAtRef.current = Date.now();
+                if (currentItemDescriptor === undefined) {
+                    logFieldValueDiagnostic("canvas-load", `frame handoff ctx=${pageViewContext.debugId} taken=${handoff ? `y=${handoff.scroll.y}` : "none"} target=${pendingRefreshScrollRef.current ? `y=${pendingRefreshScrollRef.current.y}` : "none"}`);
+                }
             }
             canvasRefreshInFlightSinceRef.current = Date.now();
             awaitingHostAppRefreshRenderRef.current = false;
@@ -3340,6 +3541,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                         : fullReloadRequested
                             ? "Hard refresh requested - setting iframe src"
                             : "Reloading iframe src");
+            logFieldValueDiagnostic("canvas-load", `frame load ctx=${pageViewContext.debugId} compare=${!!compareView} page=${pageItemDescriptor?.id}/v${pageItemDescriptor?.version} initial=${initialLoad}`);
             setLoadedIframeSrc(undefined);
             // A canvas link navigation may carry a #anchor; the browser scrolls the
             // freshly loaded document to it natively.
@@ -3347,6 +3549,12 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 renderUrl.hash = pendingCanvasAnchorRef.current;
                 pendingCanvasAnchorRef.current = undefined;
             }
+            requestedIframeSrcRef.current = renderUrl.toString();
+            inFlightCanvasLoadRef.current = {
+                signatureUrl: signatureUrl.toString(),
+                requestedSrc: renderUrl.toString(),
+                startedAt: Date.now(),
+            };
             setIframeSrc(renderUrl.toString());
         }
         function runBridgeRefresh() {
@@ -3387,11 +3595,52 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             }
             else {
                 const retryDelayMs = 150;
-                const retryTimer = setTimeout(() => {
-                    runBridgeRefresh();
-                }, retryDelayMs);
+                const signatureUrlString = signatureUrl.toString();
+                // No bridge yet. When the full load for this same URL is still
+                // settling - the usual page open: the revision arrives or a dependency
+                // changes identity right after src was set, before the bridge
+                // handshake - the recovery path would issue a second full load that
+                // differs only by its edit_rev nonce. Poll until that load settles
+                // instead: a ready bridge either already covers this signature or
+                // applies it incrementally, and a load that never yields a bridge
+                // still gets the recovery reload. Outside that window the single
+                // retry keeps the pre-bridge recovery behaviour unchanged.
+                const deferToInFlightLoad = isCanvasLoadSettling(inFlightCanvasLoadRef.current, signatureUrlString, Date.now());
+                if (deferToInFlightLoad) {
+                    console.log("Deferring canvas refresh - initial load in flight");
+                }
+                let retryTimer;
+                const retry = () => {
+                    retryTimer = undefined;
+                    if (!deferToInFlightLoad) {
+                        runBridgeRefresh();
+                        return;
+                    }
+                    const decision = resolveDeferredCanvasRefresh({
+                        bridgeSupportsRefresh: !!bridgeClientRef.current?.supportsCapability("refresh"),
+                        renderSignature,
+                        lastAppliedSignature: lastRenderSignatureRef.current,
+                        load: inFlightCanvasLoadRef.current,
+                        signatureUrl: signatureUrlString,
+                        now: Date.now(),
+                    });
+                    if (decision === "wait") {
+                        retryTimer = setTimeout(retry, retryDelayMs);
+                    }
+                    else if (decision === "bridge-refresh") {
+                        runBridgeRefresh();
+                    }
+                    else if (decision === "reload") {
+                        runFallbackRefresh();
+                    }
+                    // "skip": the settled load already rendered this signature.
+                };
+                retryTimer = setTimeout(retry, retryDelayMs);
                 setCurrentItemDescriptor(pageItemDescriptor);
-                return () => clearTimeout(retryTimer);
+                return () => {
+                    if (retryTimer !== undefined)
+                        clearTimeout(retryTimer);
+                };
             }
         }
         else {
@@ -3403,16 +3652,42 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         editContext.revision,
         editContext.fullReloadToken,
         pageItemDescriptor,
-        pageViewContext.editUrl,
-        pageViewContext.previewUrl,
-        pageViewContext.site?.name,
-        pageViewContext.fullscreen,
+        editUrl,
+        previewUrl,
+        siteName,
+        fullscreen,
         editContext.mode,
         editContext.previewDate,
         previewDateVersion,
         editContext.sessionId,
         editContext.layoutMode,
     ]);
+    // The rendering host wraps every dynamic rendering in the canvas document
+    // (same-origin) and, in preview mode, lists those with client code in a
+    // hint. Read them once the canvas has loaded, and again when the host
+    // reports DOM changes. Declared after the render effect: a load that effect
+    // has just requested means the document is outdated. The primary canvas also
+    // records them, in edit mode too, for the publish dialog's approval warning.
+    useEffect(() => {
+        if (!iframeElement ||
+            !loadedIframeSrc ||
+            requestedIframeSrcRef.current !== loadedIframeSrc) {
+            return;
+        }
+        const renderings = readCanvasRenderings(iframeElement);
+        setCanvasRenderings(renderings);
+        if (!compareView && pageItemDescriptor) {
+            recordPageRenderingIds(pageItemDescriptor, renderings.renderingIds);
+        }
+    }, [
+        bridgeDomRevision,
+        compareView,
+        editContext.mode,
+        iframeElement,
+        loadedIframeSrc,
+        pageItemDescriptor,
+        setCanvasRenderings,
+    ]);
     useEffect(() => {
         if (fieldsContext?.focusedField) {
             const focusedField = fieldsContext.focusedField;
@@ -3445,7 +3720,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 focusedField.item.id !== currentSelection[0])
                 return;
             lastScrolledFocusedFieldKeyRef.current = focusedFieldKey;
-            const bounds = findBridgeFieldDocumentBounds(pageViewContextRef.current?.bridgeGeometry, focusedField);
+            const bounds = findBridgeFieldDocumentBounds(pageViewContextRef.current?.getState().bridgeGeometry, focusedField);
             const activePageViewContext = pageViewContextRef.current;
             if (bounds && activePageViewContext) {
                 scrollBridgeBoundsIntoView(activePageViewContext, bounds, latestBridgeScrollRef.current);
@@ -3503,15 +3778,33 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         if (isCanvasRefreshInFlight())
             return;
         if (!fieldsContext?.focusedField && canvasSelection.length > 0) {
-            const lastSelectedComponent = getComponentById(canvasSelection[canvasSelection.length - 1], pageViewContextRef.current.page);
+            const lastSelectedComponent = getComponentById(canvasSelection[canvasSelection.length - 1], pageViewContextRef.current.getState().page);
             if (lastSelectedComponent) {
                 editContext.setScrollIntoView(lastSelectedComponent.id);
             }
         }
     }, [canvasSelection, fieldsContext?.focusedField, isCanvasRefreshInFlight]);
     useEffect(() => {
-        if (!editContext.scrollIntoView)
+        // The scroll's text-range query lives only while its request is pending:
+        // once the request is resolved, replaced by a target of another kind or
+        // withdrawn by whoever set it, the range must not stay in the union and
+        // be measured on every geometry, and a later request for the same target
+        // must query afresh.
+        const endScrollIntoViewRequest = () => {
+            const requestState = scrollIntoViewRequestRef.current;
+            requestState.signature = "";
+            requestState.requestedTextRangeGeometry = false;
+            if (bridgeTextRangeSourcesRef.current.has(SCROLL_INTO_VIEW_BRIDGE_SOURCE)) {
+                pageViewContextRef.current?.requestBridgeGeometry?.({
+                    source: SCROLL_INTO_VIEW_BRIDGE_SOURCE,
+                    textRanges: [],
+                });
+            }
+        };
+        if (!editContext.scrollIntoView) {
+            endScrollIntoViewRequest();
             return;
+        }
         const activePageViewContext = pageViewContextRef.current;
         if (!activePageViewContext)
             return;
@@ -3540,27 +3833,55 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 return;
             }
         }
-        const exactBounds = findScrollIntoViewDocumentBounds(activePageViewContext.bridgeGeometry, scrollTarget, { includeTextRangeFallback: false });
+        const bridgeGeometry = activePageViewContext.getState().bridgeGeometry;
+        const exactBounds = findScrollIntoViewDocumentBounds(bridgeGeometry, scrollTarget, { includeTextRangeFallback: false });
         let bounds = exactBounds;
-        bounds ??= findScrollIntoViewDocumentBounds(activePageViewContext.bridgeGeometry, scrollTarget, { includeTextRangeFallback: true });
+        bounds ??= findScrollIntoViewDocumentBounds(bridgeGeometry, scrollTarget, {
+            includeTextRangeFallback: true,
+        });
         if (bounds) {
             scrollBridgeBoundsIntoView(activePageViewContext, bounds, latestBridgeScrollRef.current);
         }
-        if (isTextRangeScrollTarget(scrollTarget)) {
-            activePageViewContext.requestBridgeGeometry?.({
-                source: SCROLL_INTO_VIEW_BRIDGE_SOURCE,
-                textRanges: [],
-            });
-        }
-        requestState.signature = "";
-        requestState.requestedTextRangeGeometry = false;
+        endScrollIntoViewRequest();
         editContext.setScrollIntoView(undefined);
     }, [
         editContext.scrollIntoView,
-        pageViewContext.page,
-        pageViewContext.bridgeGeometry,
+        page,
+        // Runs again for each geometry the bridge reports (read above).
+        bridgeGeometryRevision,
         isCanvasRefreshInFlight,
     ]);
+    // A layout switch changes the canvas width, so the page reflows and the
+    // handed-over pixel offset alone no longer shows the same content. The first
+    // geometry of the new document puts the selected component back at its
+    // previous distance from the canvas top; without it (component not
+    // rendered), the plain offset is restored.
+    useEffect(() => {
+        const anchor = pendingScrollAnchorRef.current;
+        const geometry = pageViewContext.getState().bridgeGeometry;
+        if (!anchor || !geometry || isCanvasRefreshInFlight())
+            return;
+        pendingScrollAnchorRef.current = undefined;
+        const bounds = findBridgeComponentDocumentBounds(geometry, anchor.componentId);
+        const targetScroll = bounds
+            ? {
+                x: geometry.scroll.x,
+                y: Math.max(0, (bounds.y - anchor.viewportTop) /
+                    getBridgeGeometryScrollScale(geometry)),
+            }
+            : pendingRefreshScrollRef.current;
+        logFieldValueDiagnostic("canvas-load", `scroll anchor ctx=${pageViewContext.debugId} component=${anchor.componentId} top=${Math.round(anchor.viewportTop)} bounds=${bounds ? Math.round(bounds.y) : "none"} target=${targetScroll ? `y=${Math.round(targetScroll.y)}` : "none"}`);
+        if (!targetScroll)
+            return;
+        pendingRefreshScrollRef.current = targetScroll;
+        pendingRefreshScrollCapturedAtRef.current = Date.now();
+        restorePendingRefreshScroll(iframeRef.current, targetScroll, geometry.scroll);
+    }, [
+        // Runs again for each geometry the bridge reports (read above).
+        bridgeGeometryRevision,
+        isCanvasRefreshInFlight,
+        restorePendingRefreshScroll,
+    ]);
     useEffect(() => {
         const handleMessage = (message) => {
             if (message.origin !== window.location.origin)
@@ -3583,7 +3904,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             return;
         const handleLoad = () => {
             setShowSpinner(false);
-            applyIframeZoom(iframe, pageViewContextRef.current?.zoom ?? 1, "PageViewerFrame.tsx:handleLoad-zoom");
+            applyIframeZoom(iframe, pageViewContextRef.current?.getState().zoom ?? 1, "PageViewerFrame.tsx:handleLoad-zoom");
         };
         iframe.addEventListener("load", handleLoad);
         return () => {
@@ -3653,8 +3974,15 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             mode: editContext.mode,
             readOnly: editContext.readonly,
             suggestionsCursorActive: !isBridgeInlineEditing && editContext.mode === "suggestions",
+            commentPickerActive: pickingCommentTarget && !compareView,
         });
-    }, [editContext.mode, editContext.readonly, isBridgeInlineEditing]);
+    }, [
+        editContext.mode,
+        editContext.readonly,
+        isBridgeInlineEditing,
+        pickingCommentTarget,
+        compareView,
+    ]);
     useEffect(() => {
         const previousMode = previousBridgeInlineEditModeRef.current;
         previousBridgeInlineEditModeRef.current = editContext.mode;
@@ -3688,7 +4016,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         };
     }, [zoom]);
     useEffect(() => {
-        if (!pageViewContext.bridgeReady ||
+        if (!bridgeReady ||
             (!editContext.dragObject &&
                 !editContext.selectedForInsertion &&
                 !editContext.insertMode)) {
@@ -3702,33 +4030,22 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         editContext.dragObject,
         editContext.insertMode,
         editContext.selectedForInsertion,
-        pageViewContext.bridgeReady,
+        bridgeReady,
     ]);
+    // A device or size change reflows the page: tell the bridge the zoom again
+    // and measure once the transition settled.
     useEffect(() => {
-        let geometryTimer = null;
-        const sendViewportStateToBridge = (event) => {
-            const detail = event.detail;
-            const nextZoom = detail?.zoom ?? pageViewContextRef.current?.zoom ?? zoom;
-            bridgeClientRef.current?.sendCommand("setZoom", {
-                zoom: nextZoom,
-            });
-            if (geometryTimer != null) {
-                window.clearTimeout(geometryTimer);
-            }
-            geometryTimer = window.setTimeout(() => {
-                geometryTimer = null;
-                bridgeClientRef.current?.sendCommand("queryGeometry", {});
-            }, ZOOM_TRANSITION_MS + 75);
-        };
-        window.addEventListener(DEVICE_CHANGE_EVENT, sendViewportStateToBridge);
+        bridgeClientRef.current?.sendCommand("setZoom", {
+            zoom: pageViewContext.getState().zoom,
+        });
+        const geometryTimer = window.setTimeout(() => {
+            bridgeClientRef.current?.sendCommand("queryGeometry", {});
+        }, ZOOM_TRANSITION_MS + 75);
         return () => {
-            if (geometryTimer != null) {
-                window.clearTimeout(geometryTimer);
-            }
-            window.removeEventListener(DEVICE_CHANGE_EVENT, sendViewportStateToBridge);
+            window.clearTimeout(geometryTimer);
         };
-    }, [zoom]);
-    const shouldRenderMiniMap = !pageViewContext.fullscreen &&
+    }, [pageViewContext, device, deviceWidth, deviceHeight]);
+    const shouldRenderMiniMap = !fullscreen &&
         showMiniMap &&
         editContext.showMinimap &&
         !editContext.isMobile &&
@@ -3746,6 +4063,58 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     const miniMapColumnWidth = editContext.configuration.outline.width || 100;
     const reportCompareFrameWidth = slotContext?.reportCompareFrameWidth;
     const miniMapReservedWidth = shouldRenderMiniMap ? miniMapColumnWidth : 0;
+    // The pane's content width decides how wide the comment margin is beside
+    // the canvas. The pane is the splitter panel around this frame, so resizing
+    // the margin inside it does not change the measurement (no flapping).
+    const [frameContainerWidth, setFrameContainerWidth] = useState();
+    useLayoutEffect(() => {
+        const container = frameContainerRef.current;
+        if (!container || typeof ResizeObserver === "undefined")
+            return;
+        const measure = () => {
+            const style = window.getComputedStyle(container);
+            const padding = (parseFloat(style.paddingLeft) || 0) +
+                (parseFloat(style.paddingRight) || 0);
+            const width = container.clientWidth - padding;
+            setFrameContainerWidth((previous) => previous === width ? previous : width);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, []);
+    // The comment margin sits beside the canvas of the primary pane. Compare
+    // panes share one iframe width, so its column counts against the width
+    // this pane reports exactly like the minimap column does.
+    const shouldRenderFeedbackMargin = shouldShowFeedbackMargin({
+        showComments: !!editContext.showComments,
+        compareView,
+        isMobile: !!editContext.isMobile,
+        fullscreen: !!fullscreen,
+        slotActive: slotContext?.isActive ?? true,
+        hasLayout: !!page?.item?.hasLayout,
+    });
+    // Takes the width the user dragged it to (or the rail they dragged it into)
+    // where the pane has room for it; narrows first, then collapses into a
+    // rail; never hidden for lack of room.
+    const feedbackMarginPreferredWidth = useFeedbackMarginPreferredWidth();
+    const feedbackMarginCollapsed = useFeedbackMarginCollapsed();
+    const feedbackMarginRoom = getFeedbackMarginRoom({
+        paneWidth: frameContainerWidth,
+        reservedWidth: miniMapReservedWidth,
+    });
+    const feedbackMarginSize = resolveFeedbackMarginSize({
+        paneWidth: frameContainerWidth,
+        reservedWidth: miniMapReservedWidth,
+        maxWidth: feedbackMarginPreferredWidth,
+        minWidth: FEEDBACK_MARGIN_MIN_WIDTH,
+        railWidth: FEEDBACK_MARGIN_RAIL_WIDTH,
+        collapsed: feedbackMarginCollapsed,
+    });
+    const feedbackMarginReservedWidth = shouldRenderFeedbackMargin
+        ? feedbackMarginSize.width
+        : 0;
+    const overlayInvalidationKey = `${zoom}:${bridgeGeometryRevision}:${feedbackMarginReservedWidth}`;
     useLayoutEffect(() => {
         if (!inCompareMode || !reportCompareFrameWidth)
             return;
@@ -3756,7 +4125,10 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             const style = window.getComputedStyle(container);
             const padding = (parseFloat(style.paddingLeft) || 0) +
                 (parseFloat(style.paddingRight) || 0);
-            const available = container.clientWidth - padding - miniMapReservedWidth;
+            const available = container.clientWidth -
+                padding -
+                miniMapReservedWidth -
+                feedbackMarginReservedWidth;
             reportCompareFrameWidth(compareFrameView, available > 0 ? available : undefined);
         };
         report();
@@ -3768,6 +4140,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         reportCompareFrameWidth,
         compareFrameView,
         miniMapReservedWidth,
+        feedbackMarginReservedWidth,
     ]);
     // Withdraw this pane's report only on unmount, so a minimap toggle or a
     // resize does not briefly drop the other pane back to full width.
@@ -3775,34 +4148,42 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         return () => reportCompareFrameWidth?.(compareFrameView, undefined);
     }, [reportCompareFrameWidth, compareFrameView]);
     const sharedCompareFrameWidth = useSyncExternalStore(slotContext?.subscribeCompareFrameWidth ?? subscribeToNothing, slotContext?.getCompareFrameWidth ?? getUndefined, getUndefined);
-    if (pageViewContext.page?.item && !pageViewContext.page?.item.hasLayout) {
+    if (page?.item && !page.item.hasLayout) {
         return _jsx(NoLayout, {});
     }
-    const isResponsiveDevice = pageViewContext.device === "desktop" ||
-        pageViewContext.device === "Responsive";
-    const deviceHeight = pageViewContext.device === "desktop" || !pageViewContext.deviceHeight
-        ? "100%"
-        : pageViewContext.deviceHeight || 640;
+    const isResponsiveDevice = device === "desktop" || device === "Responsive";
+    const frameHeight = device === "desktop" || !deviceHeight ? "100%" : deviceHeight || 640;
     const compareFrameWidth = inCompareMode ? sharedCompareFrameWidth : undefined;
-    const deviceWidth = isResponsiveDevice
+    const frameWidth = isResponsiveDevice
         ? compareFrameWidth !== undefined
-            ? compareFrameWidth + miniMapReservedWidth + "px"
+            ? compareFrameWidth +
+                miniMapReservedWidth +
+                feedbackMarginReservedWidth +
+                "px"
             : "100%"
         : inCompareMode
-            ? (pageViewContext.deviceWidth || 640) + miniMapReservedWidth + "px"
-            : (pageViewContext.deviceWidth || 640) +
+            ? (deviceWidth || 640) +
+                miniMapReservedWidth +
+                feedbackMarginReservedWidth +
+                "px"
+            : (deviceWidth || 640) +
                 editContext.configuration.outline.width +
+                feedbackMarginReservedWidth +
                 "px";
     const showSuggestionsCursor = !isBridgeInlineEditing && editContext.mode === "suggestions";
-    return (_jsxs("div", { ref: frameContainerRef, className: cn("relative flex h-full w-full flex-col items-center select-none", className, editContext.showAgentsPanel && !editContext.currentWizardId && "pr-0"), children: [!pageViewContext.fullscreen && (_jsx(EditorWarnings, { item: pageViewContext.page?.item })), slotCloseButton && (_jsx("div", { className: "absolute top-3 right-3 z-50", children: slotCloseButton })), pageViewContext.fullscreen && (_jsxs("div", { className: "border-neutral-grey-15 relative z-40 grid h-11 w-full shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center border-b bg-white px-3 shadow-sm", "data-testid": "fullscreen-page-title-bar", children: [_jsx("div", { className: "w-full min-w-0 pr-3 text-left", children: _jsx(PageSelector, { itemDescriptor: pageViewContext.page?.item, variant: "fullscreen" }) }), _jsx("div", { className: "justify-self-center", children: _jsx(FullscreenControls, { device: pageViewContext.device, setDevice: (device) => pageViewContext.setDevice(device), zoom: pageViewContext.zoom, setZoom: pageViewContext.setZoom, canExit: !editContext.configuration.forceFullscreen, onExit: () => editContext.setFullscreen(false) }) }), _jsx("div", { "aria-hidden": "true" })] })), pageViewContext.device !== "desktop" && (_jsx(DeviceToolbar, { pageViewContext: pageViewContext, configuration: editContext.configuration })), _jsxs("div", { className: "relative flex min-h-0 flex-1 transition-[width] duration-300 ease-in-out select-none motion-reduce:transition-none", "data-testid": "page-viewer-viewport", style: {
-                    width: deviceWidth,
+    const showDynamicRenderingsStrip = !compareView &&
+        editContext.mode === "preview" &&
+        interactivePreview.renderingIds.length > 0;
+    return (_jsxs("div", { ref: frameContainerRef, className: cn("relative flex h-full w-full flex-col items-center select-none", className, editContext.showAgentsPanel && !editContext.currentWizardId && "pr-0"), children: [!fullscreen && _jsx(EditorWarnings, { item: page?.item }), slotCloseButton && (_jsx("div", { className: "absolute top-3 right-3 z-50", children: slotCloseButton })), fullscreen && (_jsxs("div", { className: "border-neutral-grey-15 relative z-40 grid h-11 w-full shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center border-b bg-white px-3 shadow-sm", "data-testid": "fullscreen-page-title-bar", children: [_jsx("div", { className: "w-full min-w-0 pr-3 text-left", children: _jsx(PageSelector, { itemDescriptor: page?.item, variant: "fullscreen" }) }), _jsx("div", { className: "justify-self-center", children: _jsx(FullscreenControls, { pageViewContext: pageViewContext, canExit: !editContext.configuration.forceFullscreen, onExit: () => editContext.setFullscreen(false) }) }), _jsx("div", { "aria-hidden": "true" })] })), showDynamicRenderingsStrip && (_jsx(DynamicRenderingsStrip, { page: interactivePreviewPage, renderingIds: interactivePreview.renderingIds, getCanvasUrl: getPreviewCanvasUrl })), device !== "desktop" && (_jsx(DeviceToolbar, { pageViewContext: pageViewContext, configuration: editContext.configuration })), _jsxs("div", { className: "relative flex min-h-0 flex-1 transition-[width] duration-300 ease-in-out select-none motion-reduce:transition-none", "data-testid": "page-viewer-viewport", style: {
+                    width: frameWidth,
                 }, children: [_jsxs("div", { className: "relative h-full w-full overflow-visible", onMouseLeave: () => {
-                            if (pageViewContext.bridgeInteraction?.kind === "hover") {
+                            if (pageViewContext.getState().bridgeInteraction?.kind === "hover") {
+                                setPasteCleanupMenu(undefined);
                                 setBridgeInteraction(undefined);
                                 pageViewContext.setBridgeInteraction(undefined);
                             }
                         }, children: [_jsx("iframe", { ref: bindIframeRef, className: "page-iframe h-full w-full bg-white transition-[height] duration-300 ease-in-out motion-reduce:transition-none", style: {
-                                    height: deviceHeight,
+                                    height: frameHeight,
                                     // The iframe element exists before its document has loaded. Keep
                                     // that blank document out of both the UI and accessibility tree;
                                     // consumers can treat a visible canvas as a rendered canvas.
@@ -3810,7 +4191,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                                     cursor: showSuggestionsCursor
                                         ? SUGGESTIONS_CURSOR_VALUE
                                         : undefined,
-                                }, src: iframeSrc, "data-testid": "pageEditoriframe", onLoad: () => {
+                                }, "data-testid": "pageEditoriframe", onLoad: () => {
                                     const iframe = iframeRef.current;
                                     if (iframeSrc && iframe) {
                                         parentBridgeInjectionRef.current?.dispose();
@@ -3823,13 +4204,18 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                                         latestParentBridgeInjectionRef.current =
                                             parentBridgeInjectionRef.current.attempt;
                                     }
-                                    const loadedSrc = iframe?.src;
-                                    if (iframeSrc && loadedSrc) {
-                                        setLoadedIframeSrc(loadedSrc);
+                                    if (iframeSrc) {
+                                        const inFlightLoad = inFlightCanvasLoadRef.current;
+                                        if (inFlightLoad &&
+                                            inFlightLoad.requestedSrc === iframeSrc &&
+                                            inFlightLoad.loadedAt === undefined) {
+                                            inFlightLoad.loadedAt = Date.now();
+                                        }
+                                        setLoadedIframeSrc(iframeSrc);
                                     }
                                     const sendZoomToBridge = () => {
                                         bridgeClientRef.current?.sendCommand("setZoom", {
-                                            zoom: pageViewContextRef.current?.zoom ?? zoom,
+                                            zoom: pageViewContextRef.current?.getState().zoom ?? zoom,
                                         });
                                     };
                                     sendZoomToBridge();
@@ -3843,6 +4229,6 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                                         }
                                         completeCanvasRefresh();
                                     }
-                                } }), iframeElement && (_jsx(IframeOverlayProvider, { iframe: iframeElement, mode: "scrolling", scrollScale: 1, visualScale: 1, invalidationKey: `${zoom}:${bridgeGeometryRevision}`, deferredInvalidationMs: ZOOM_TRANSITION_MS + 50, bleed: { top: 2, right: 150, bottom: 2, left: 2 }, children: _jsx(PageEditorChrome, { iframe: iframeElement, compareView: compareView, pageViewContext: pageViewContext, bridgeInteraction: bridgeInteraction, onBridgeRichTextCommand: sendApplyRichTextCommand }) })), pageViewContext.deviceHeight && pageViewContext.device && (_jsx("div", { className: "bg-neutral-grey-5 relative z-40 h-full w-full" }))] }), shouldRenderMiniMap && (_jsx(MiniMap, { compareView: compareView, scroll: scroll, mainViewIframeRef: iframeRef, pageViewContext: pageViewContext })), showSpinner && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-neutral-grey-5/50 absolute top-0 left-0 h-full w-full" }), _jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: _jsx(Spinner, {}) })] }))] }), _jsx(FieldActionsOverlay, { ref: fieldActionsOverlay, generatorButtons: contextMenuFieldButtons, onActionClick: handleActionClick, onParameterizedActionExecute: handleParameterizedActionExecute, currentOverlay: editContext?.currentOverlay, fieldId: contextMenuField?.fieldId || "", setCurrentOverlay: editContext?.setCurrentOverlay || (() => { }), preSelectedAction: preSelectedAction })] }));
+                                } }, "canvas"), _jsxs(OverviewRulerContext.Provider, { value: overviewRulerStore, children: [iframeElement && (_jsxs(IframeOverlayProvider, { iframe: iframeElement, mode: "scrolling", scrollScale: 1, visualScale: 1, invalidationKey: overlayInvalidationKey, deferredInvalidationMs: ZOOM_TRANSITION_MS + 50, bleed: { top: 2, right: 150, bottom: 2, left: 2 }, children: [_jsx(PageEditorChrome, { iframe: iframeElement, compareView: compareView, pageViewContext: pageViewContext, bridgeInteraction: bridgeInteraction, onBridgeRichTextCommand: sendApplyRichTextCommand }), pasteCleanupMenu && editContext.mode !== "preview" && (_jsx(BridgePasteCleanupOverlay, { iframe: iframeElement, menu: pasteCleanupMenu, onCommand: sendPasteCleanupCommand }))] })), _jsx(CanvasOverviewRuler, { height: frameHeight })] }), deviceHeight && device && (_jsx("div", { className: "bg-neutral-grey-5 relative z-40 h-full w-full" }))] }), shouldRenderFeedbackMargin && (_jsx(FeedbackMargin, { iframe: iframeElement, pageViewContext: pageViewContext, height: frameHeight, size: feedbackMarginSize, maxResizeWidth: feedbackMarginRoom, invalidationKey: overlayInvalidationKey, deferredInvalidationMs: ZOOM_TRANSITION_MS + 50 })), shouldRenderMiniMap && (_jsx(MiniMap, { compareView: compareView, scroll: scroll, mainViewIframeRef: iframeRef, pageViewContext: pageViewContext })), showSpinner && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-neutral-grey-5/50 absolute top-0 left-0 h-full w-full" }), _jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: _jsx(Spinner, {}) })] }))] }), _jsx(FieldActionsOverlay, { ref: fieldActionsOverlay, generatorButtons: contextMenuFieldButtons, onActionClick: handleActionClick, onParameterizedActionExecute: handleParameterizedActionExecute, currentOverlay: editContext?.currentOverlay, fieldId: contextMenuField?.fieldId || "", setCurrentOverlay: editContext?.setCurrentOverlay || (() => { }), preSelectedAction: preSelectedAction })] }));
 }
 //# sourceMappingURL=PageViewerFrame.js.map