@parhelia/core 0.1.12881 → 0.1.12882

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

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { BRIDGE_DOM_UPDATED_EVENT, MiniMap } from "./MiniMap";
+import { useEffect, useRef, useState } from "react";
+import { MiniMap } from "./MiniMap";
 import { useEditContext, useEditContextRef, useFieldsEditContext, useFieldsEditContextRef, } from "../client/editContext";
 import { useSlotContext } from "../views/editorSlotContext";
 import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
 import { PageEditorChrome } from "../page-editor-chrome/PageEditorChrome";
-import { useBridgeInlineEditing, } from "../page-editor-chrome/useBridgeInlineEditing";
-import { IFRAME_OVERLAY_BRIDGE_GEOMETRY_EVENT, IFRAME_OVERLAY_BRIDGE_SCROLL_EVENT, IframeOverlayProvider, } from "../page-editor-chrome/overlay/IframeOverlayProvider";
-import { DEVICE_CHANGE_EVENT, useViewportChangeSignal, } from "./pageViewContext";
+import { IframeOverlayProvider } from "../page-editor-chrome/overlay/IframeOverlayProvider";
+import { useViewportChangeSignal } from "./pageViewContext";
+import morphdom from "morphdom";
 import uuid from "react-uuid";
 import { cn } from "../../lib/utils";
-import { normalizeMarkerId } from "../utils";
+import { findComponentRect, findFieldElement, findNearestEditableComponentId, findParentWithAttribute, getAbsolutePosition, getFieldDescriptorFromElement, findClosestFieldElement, extractItemIdFromItemUri, } from "../utils";
+import { extractDOMSelectionContext } from "../utils/selectionContext";
 import { cleanId } from "../utils/id-helper";
-import { getComponentById } from "../componentTreeHelper";
+import { getAllComponentInstances, getComponentById, } from "../componentTreeHelper";
 import { buildComponentContextMenuItems } from "../ContextMenu";
 import { loadFieldButtons } from "../services/editService";
 import { usePathname } from "../client/navigation";
@@ -21,263 +22,125 @@ import { FieldActionsOverlay, } from "../FieldActionsOverlay";
 import { NoLayout } from "../page-editor-chrome/NoLayout";
 import { Spinner } from "../ui/Spinner";
 import { DeviceToolbar } from "./DeviceToolbar";
+import { buildPageModelSkeleton } from "./pageModelSkeletonBuilder";
 import { toSitecoreDate } from "../utils/sitecoreDate";
-import { BridgeClient } from "../bridge/BridgeClient";
-import { getSuggestionDisplayValue } from "../reviews/suggestionDisplayValue";
-import { buildBridgeFieldPatchPayload, getBridgeFieldPatchValue, } from "./bridgeFieldPatch";
+const EDITOR_CSS_STYLE_ID = "parhelia-editor-css";
 const ZOOM_MIN = 0.25;
 const ZOOM_MAX = 2;
 const ZOOM_STEP = 0.25;
 const ZOOM_TRANSITION_MS = 300;
-const BRIDGE_INLINE_EDIT_RELEASE_EVENT = "parhelia:bridge-inline-edit-release";
-function dispatchBridgeOverlayScroll(iframe, scroll, scrollScale = 1) {
-    iframe?.dispatchEvent(new CustomEvent(IFRAME_OVERLAY_BRIDGE_SCROLL_EVENT, {
-        detail: {
-            scrollLeft: scroll.x * scrollScale,
-            scrollTop: scroll.y * scrollScale,
-        },
-    }));
-}
-function getBridgeGeometryScrollScale(geometry) {
-    return typeof geometry?.scrollScale === "number" &&
-        Number.isFinite(geometry.scrollScale) &&
-        geometry.scrollScale > 0
-        ? geometry.scrollScale
-        : 1;
-}
-function dispatchBridgeOverlayGeometry(iframe, geometry) {
-    const documentSize = getBridgeGeometryDocumentSize(geometry);
-    const scrollScale = getBridgeGeometryScrollScale(geometry);
-    const detail = {
-        scrollLeft: (geometry?.scroll.x ?? 0) * scrollScale,
-        scrollTop: (geometry?.scroll.y ?? 0) * scrollScale,
-        viewportWidth: geometry?.viewport.width,
-        viewportHeight: geometry?.viewport.height,
-        scrollWidth: documentSize?.width,
-        scrollHeight: documentSize?.height,
-    };
-    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);
-    return (!!normalizedLeft && !!normalizedRight && normalizedLeft === normalizedRight);
-}
-function bridgeItemMatches(item, descriptor) {
-    if (!item)
-        return false;
-    if (!bridgeKeysMatch(item.id, descriptor.id))
-        return false;
-    if (item.language &&
-        descriptor.language &&
-        item.language !== descriptor.language) {
-        return false;
+const zoomAnimationFrames = new WeakMap();
+function getAccessibleIframeDocument(iframe, location) {
+    if (!iframe)
+        return null;
+    try {
+        return iframe.contentDocument || iframe.contentWindow?.document || null;
     }
-    if (item.version !== undefined &&
-        descriptor.version !== undefined &&
-        item.version !== descriptor.version) {
-        return false;
+    catch {
+        return null;
     }
-    return true;
-}
-function bridgeTargetToDocumentBounds(geometry, target) {
-    const rectScale = geometry.rectScale ?? 1;
-    const scrollScale = getBridgeGeometryScrollScale(geometry);
-    return {
-        x: target.rect.left * rectScale + geometry.scroll.x * scrollScale,
-        y: target.rect.top * rectScale + geometry.scroll.y * scrollScale,
-        width: target.rect.width * rectScale,
-        height: target.rect.height * rectScale,
-    };
-}
-function findBridgeFieldDocumentBounds(geometry, descriptor) {
-    if (!geometry)
-        return undefined;
-    const target = geometry.targets.find((candidate) => {
-        if (candidate.kind !== "field")
-            return false;
-        return (bridgeKeysMatch(candidate.fieldId, descriptor.fieldId) &&
-            bridgeItemMatches(candidate.item, descriptor.item));
-    });
-    return target?.rect
-        ? bridgeTargetToDocumentBounds(geometry, target)
-        : undefined;
 }
-function findBridgeComponentDocumentBounds(geometry, componentId) {
-    if (!geometry)
+function getAccessibleIframeLocationHref(iframe) {
+    try {
+        return iframe?.contentWindow?.location?.href;
+    }
+    catch {
         return undefined;
-    const target = geometry.targets.find((candidate) => {
-        if (candidate.kind !== "component")
-            return false;
-        return (bridgeKeysMatch(candidate.componentId, componentId) ||
-            bridgeKeysMatch(candidate.key, componentId));
-    });
-    return target?.rect
-        ? bridgeTargetToDocumentBounds(geometry, target)
-        : undefined;
-}
-function scrollBridgeBoundsIntoView(pageViewContext, bounds, currentScroll) {
-    const geometry = pageViewContext.bridgeGeometry;
-    if (!geometry)
-        return false;
-    const scrollScale = getBridgeGeometryScrollScale(geometry);
-    const currentScrollY = (currentScroll?.y ?? geometry.scroll.y) * scrollScale;
-    const viewportHeight = geometry.viewport.height;
-    const isInViewport = bounds.y + bounds.height > currentScrollY &&
-        bounds.y < currentScrollY + viewportHeight;
-    if (isInViewport)
-        return false;
-    const targetScrollY = bounds.y - viewportHeight / 2 + Math.max(bounds.height, 1) / 2;
-    return (pageViewContext.requestBridgeScrollBy?.({
-        y: targetScrollY - currentScrollY,
-        behavior: "smooth",
-    }) ?? false);
-}
-function applyIframeZoom(_iframe, _zoom, _location) {
-    // Zoom is applied inside the page host through the bridge setZoom command.
-}
-function clampEditorZoom(value) {
-    return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, value));
-}
-function isLoopbackHost(hostname) {
-    return hostname === "localhost" || hostname === "127.0.0.1";
-}
-function alignLoopbackHostToEditor(url) {
-    if (isLoopbackHost(window.location.hostname) &&
-        isLoopbackHost(url.hostname)) {
-        // Sitecore auth cookies are host-scoped, so localhost and 127.0.0.1 are
-        // different origins even when they point at the same machine.
-        url.hostname = window.location.hostname;
     }
 }
-function getUrlOrigin(url) {
-    if (!url)
-        return undefined;
+function getAccessibleIframeLocationOrigin(iframe) {
     try {
-        const parsedUrl = new URL(url, window.location.href);
-        alignLoopbackHostToEditor(parsedUrl);
-        return parsedUrl.origin;
+        return iframe?.contentWindow?.location?.origin;
     }
     catch {
         return undefined;
     }
 }
-function resolveBridgeComponentId(rawId, page) {
-    if (!rawId)
-        return undefined;
-    if (!page?.rootComponent)
-        return rawId;
-    const normalizedId = cleanId(rawId);
-    if (!normalizedId)
-        return undefined;
-    let exactMatch;
-    let datasourceMatch;
-    const visit = (component) => {
-        if (!exactMatch && cleanId(component.id) === normalizedId) {
-            exactMatch = component;
-        }
-        if (!datasourceMatch &&
-            cleanId(component.datasourceItem?.id) === normalizedId) {
-            datasourceMatch = component;
+function applyIframeZoom(iframe, zoom, location) {
+    const documentElement = getAccessibleIframeDocument(iframe, location)?.documentElement;
+    if (!documentElement)
+        return;
+    const ownerWindow = documentElement.ownerDocument.defaultView ?? window;
+    let reduceMotion = false;
+    try {
+        reduceMotion =
+            iframe?.contentWindow?.matchMedia?.("(prefers-reduced-motion: reduce)")
+                .matches ?? false;
+    }
+    catch { }
+    const animationFrame = zoomAnimationFrames.get(documentElement);
+    if (animationFrame !== undefined) {
+        ownerWindow.cancelAnimationFrame(animationFrame);
+        zoomAnimationFrames.delete(documentElement);
+    }
+    documentElement.style.removeProperty("transition");
+    const getCurrentZoom = () => {
+        const inlineZoom = Number.parseFloat(documentElement.style.zoom);
+        if (Number.isFinite(inlineZoom) && inlineZoom > 0)
+            return inlineZoom;
+        const computedZoom = Number.parseFloat(ownerWindow.getComputedStyle(documentElement).zoom);
+        if (Number.isFinite(computedZoom) && computedZoom > 0) {
+            return computedZoom;
         }
-        for (const placeholder of component.placeholders || []) {
-            for (const child of placeholder.components || []) {
-                visit(child);
-            }
+        return 1;
+    };
+    const applyFinalZoom = () => {
+        if (zoom === 1) {
+            documentElement.style.removeProperty("zoom");
+            documentElement.style.removeProperty("transform");
+            documentElement.style.removeProperty("transform-origin");
+            documentElement.style.removeProperty("overflow");
+            documentElement.style.removeProperty("will-change");
+            return;
         }
+        documentElement.style.zoom = String(zoom);
+        documentElement.style.removeProperty("transform");
+        documentElement.style.removeProperty("transform-origin");
+        documentElement.style.overflow = "auto";
+        documentElement.style.removeProperty("will-change");
     };
-    visit(page.rootComponent);
-    return exactMatch?.id ?? datasourceMatch?.id ?? rawId;
-}
-function getOrderedBridgeComponentIds(geometry, page) {
-    const orderedIds = [];
-    for (const target of geometry?.targets ?? []) {
-        if (target.kind !== "component")
-            continue;
-        const componentId = resolveBridgeComponentId(target.componentId, page);
-        if (!componentId)
-            continue;
-        if (orderedIds.some((id) => bridgeIdsMatch(id, componentId)))
-            continue;
-        orderedIds.push(componentId);
-    }
-    return orderedIds;
-}
-function bridgeIdsMatch(left, right) {
-    const normalizedLeft = normalizeMarkerId(left);
-    const normalizedRight = normalizeMarkerId(right);
-    return (!!normalizedLeft && !!normalizedRight && normalizedLeft === normalizedRight);
-}
-function bridgeComponentSelectionsMatch(left, right) {
-    if ((left?.length ?? 0) !== (right?.length ?? 0))
-        return false;
-    return (left ?? []).every((leftId, index) => bridgeIdsMatch(leftId, right?.[index]));
-}
-function bridgeDescriptorMatchesItem(bridgeItem, item) {
-    if (!bridgeItem?.id)
-        return true;
-    if (!bridgeIdsMatch(bridgeItem.id, item.id))
-        return false;
-    if (bridgeItem.language &&
-        item.language &&
-        bridgeItem.language.toLowerCase() !== item.language.toLowerCase()) {
-        return false;
+    if (reduceMotion) {
+        applyFinalZoom();
+        return;
     }
-    if (typeof bridgeItem.version === "number" &&
-        Number.isFinite(bridgeItem.version) &&
-        typeof item.version === "number" &&
-        Number.isFinite(item.version) &&
-        bridgeItem.version !== item.version) {
-        return false;
+    const startZoom = getCurrentZoom();
+    const targetZoom = zoom;
+    if (Math.abs(startZoom - targetZoom) < 0.001) {
+        applyFinalZoom();
+        return;
     }
-    return true;
-}
-function fieldIdentifierMatches(field, fieldId) {
-    return (bridgeIdsMatch(field.id, fieldId) ||
-        bridgeIdsMatch(field.name, fieldId) ||
-        bridgeIdsMatch(field.displayName, fieldId));
-}
-function bridgeFieldMatchesChangedField(bridgeFieldId, changedFieldId, field) {
-    return (bridgeIdsMatch(bridgeFieldId, changedFieldId) ||
-        bridgeIdsMatch(bridgeFieldId, field.id) ||
-        bridgeIdsMatch(bridgeFieldId, field.name) ||
-        bridgeIdsMatch(bridgeFieldId, field.displayName));
-}
-function findBridgeFieldTargetAtPoint(geometry, clientX, clientY) {
-    if (!geometry || typeof clientX !== "number" || typeof clientY !== "number") {
-        return undefined;
+    documentElement.style.willChange = "zoom";
+    documentElement.style.zoom = String(startZoom);
+    if (targetZoom !== 1) {
+        documentElement.style.overflow = "auto";
     }
-    return geometry.targets
-        .filter((target) => {
-        if (target.kind !== "field")
-            return false;
-        const rect = target.rect;
-        return (clientX >= rect.left &&
-            clientX <= rect.right &&
-            clientY >= rect.top &&
-            clientY <= rect.bottom);
-    })
-        .sort((left, right) => left.rect.width * left.rect.height -
-        right.rect.width * right.rect.height)[0];
+    documentElement.style.removeProperty("transform");
+    documentElement.style.removeProperty("transform-origin");
+    const startedAt = ownerWindow.performance.now();
+    const easeInOut = (value) => value < 0.5
+        ? 4 * value * value * value
+        : 1 - Math.pow(-2 * value + 2, 3) / 2;
+    const step = (now) => {
+        const progress = Math.min(1, (now - startedAt) / ZOOM_TRANSITION_MS);
+        const easedProgress = easeInOut(progress);
+        const currentZoom = startZoom + (targetZoom - startZoom) * easedProgress;
+        documentElement.style.zoom = String(currentZoom);
+        documentElement.style.removeProperty("transform");
+        documentElement.style.removeProperty("transform-origin");
+        if (targetZoom !== 1) {
+            documentElement.style.overflow = "auto";
+        }
+        if (progress < 1) {
+            zoomAnimationFrames.set(documentElement, ownerWindow.requestAnimationFrame(step));
+            return;
+        }
+        zoomAnimationFrames.delete(documentElement);
+        applyFinalZoom();
+    };
+    zoomAnimationFrames.set(documentElement, ownerWindow.requestAnimationFrame(step));
 }
-function isBridgeInlineAiShortcut(interaction) {
-    const keyboardInteraction = interaction;
-    return !!((keyboardInteraction.ctrlKey || keyboardInteraction.metaKey) &&
-        (keyboardInteraction.key === "." ||
-            keyboardInteraction.key === "Period" ||
-            keyboardInteraction.key === "Decimal" ||
-            keyboardInteraction.code === "Period" ||
-            keyboardInteraction.code === "NumpadDecimal"));
+function clampEditorZoom(value) {
+    return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, value));
 }
 export function PageViewerFrame(props) {
     const editContext = useEditContext();
@@ -297,38 +160,17 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     const editContextRef = useEditContextRef();
     const fieldsContextRef = useFieldsEditContextRef();
     const iframeRef = useRef(null);
-    const [iframeElement, setIframeElement] = useState(null);
-    const bridgeClientRef = useRef(null);
-    const bridgePatchSignatureRef = useRef(new Map());
-    const bridgeTextRangeSourcesRef = useRef(new Map());
-    const activeBridgeInlineEditRef = useRef(null);
-    const latestBridgeScrollRef = useRef(undefined);
-    const suppressNextSelectionScrollRef = useRef(false);
-    // Tracks the selection we last evaluated for auto-scroll. The selection
-    // effect also depends on focusedField, so it re-runs when a field blurs
-    // (focusedField -> undefined) even though the selection itself did not
-    // change. Without this guard that blur re-render would scroll the just
-    // clicked component into view after the suppress flag was already consumed.
-    const lastScrolledSelectionKeyRef = useRef("");
+    const currentLoadRef = useRef(null);
+    const rebindIframeInteractionsRef = useRef(null);
+    const prevModeRef = useRef(editContext.mode);
     const [showSpinner, setShowSpinner] = useState(false);
-    const [iframeSrc, setIframeSrc] = useState();
-    const [loadedIframeSrc, setLoadedIframeSrc] = useState();
     const [scroll, setScroll] = useState(0);
     const [showMiniMap, setShowMiniMap] = useState(false);
-    const [bridgeGeometryRevision, setBridgeGeometryRevision] = useState(0);
-    const [bridgeDomRevision, setBridgeDomRevision] = useState(0);
-    const bridgeGeometryRevisionRafRef = useRef(null);
-    const bridgeDomRevisionRafRef = useRef(null);
     const fieldActionsOverlay = useRef(null);
-    const lastSentBridgeCaretRef = useRef(null);
     const [contextMenuFieldButtons, setContextMenuFieldButtons] = useState([]);
     const [contextMenuField, setContextMenuField] = useState();
     const [contextMenuPosition, setContextMenuPosition] = useState();
     const [preSelectedAction, setPreSelectedAction] = useState();
-    const bindIframeRef = useCallback((node) => {
-        iframeRef.current = node;
-        setIframeElement(node);
-    }, []);
     // Clear preSelectedAction when overlay is closed
     useEffect(() => {
         if (editContext?.currentOverlay !==
@@ -337,6 +179,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         }
     }, [editContext?.currentOverlay, contextMenuField?.fieldId]);
     const zoom = pageViewContext.zoom;
+    const blockBlurEventRef = useRef(0);
     const [currentItemDescriptor, setCurrentItemDescriptor] = useState(undefined);
     // Field action handlers for the overlay
     const handleActionClick = async (action, event) => {
@@ -352,1368 +195,1269 @@ 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 &&
-            editor?.showMinimap &&
-            !editor?.isMobile &&
-            editor?.parheliaSettings?.showMinimap !== false);
-    }, [showMiniMap]);
-    const updateScrollPosition = useCallback((e) => {
-        if (!shouldTrackMinimapScroll())
-            return;
-        setScroll(e);
-        if (!compareView)
-            pageViewContextRef.current?.setScroll(e);
-    }, [compareView, shouldTrackMinimapScroll]);
-    const scrollHandler = useThrottledCallback(updateScrollPosition, 100);
-    const scrollHandlerRef = useRef(scrollHandler);
+    // Update the context whenever the iframe ref changes
     useEffect(() => {
-        scrollHandlerRef.current = scrollHandler;
-    }, [scrollHandler]);
-    const scheduleBridgeGeometryRevision = useCallback(() => {
-        if (bridgeGeometryRevisionRafRef.current != null)
+        pageViewContext.setEditorIframe(iframeRef.current);
+    }, [iframeRef.current, pageViewContext.setEditorIframe]);
+    const updateMiniMapVisibility = useDebouncedCallback(() => {
+        if (!iframeRef.current)
             return;
-        bridgeGeometryRevisionRafRef.current = window.requestAnimationFrame(() => {
-            bridgeGeometryRevisionRafRef.current = null;
-            setBridgeGeometryRevision((revision) => revision + 1);
-        });
-    }, []);
-    const scheduleBridgeDomRevision = useCallback(() => {
-        if (bridgeDomRevisionRafRef.current != null)
+        const iframe = iframeRef.current;
+        const doc = getAccessibleIframeDocument(iframe, "PageViewerFrame.tsx:updateMiniMapVisibility");
+        if (!doc?.documentElement)
             return;
-        bridgeDomRevisionRafRef.current = window.requestAnimationFrame(() => {
-            bridgeDomRevisionRafRef.current = null;
-            setBridgeDomRevision((revision) => revision + 1);
-        });
-    }, []);
-    useEffect(() => {
-        return () => {
-            if (bridgeGeometryRevisionRafRef.current != null) {
-                window.cancelAnimationFrame(bridgeGeometryRevisionRafRef.current);
+        const scrollContainer = doc.scrollingElement || doc.body;
+        if (!scrollContainer)
+            return;
+        const contentHeight = scrollContainer.scrollHeight;
+        const clientHeight = iframe.clientHeight;
+        const upperThreshold = clientHeight + 100; // show minimap if content exceeds this height
+        const lowerThreshold = clientHeight; // hide minimap if content falls below this
+        // Check if minimap is enabled in settings and user controls
+        const minimapEnabled = editContext.parheliaSettings?.showMinimap !== false &&
+            editContext.showMinimap;
+        if (showMiniMap) {
+            if (contentHeight <= lowerThreshold || !minimapEnabled) {
+                setShowMiniMap(false);
             }
-            if (bridgeDomRevisionRafRef.current != null) {
-                window.cancelAnimationFrame(bridgeDomRevisionRafRef.current);
+        }
+        else {
+            if (contentHeight > upperThreshold && minimapEnabled) {
+                setShowMiniMap(true);
             }
-        };
-    }, []);
-    const blockIframeBlurUntil = useCallback((_timestamp) => {
-        // Iframe blur is handled by the bridge inline-edit lifecycle now.
-    }, []);
-    const sendBeginInlineEdit = useCallback((payload) => {
-        return (bridgeClientRef.current?.sendCommand("beginInlineEdit", payload) ??
-            false);
-    }, []);
-    const sendApplyRichTextCommand = useCallback((payload) => {
-        return (bridgeClientRef.current?.sendCommand("applyRichTextCommand", payload) ??
-            false);
-    }, []);
-    const { beginInlineEdit: beginBridgeInlineEdit, clearInlineDedupe: clearBridgeInlineDedupe, endFieldFocus: endBridgeFieldFocus, handleFieldValueChanged: handleBridgeFieldValueChanged, handleInlineEditEnded: handleBridgeInlineEditEnded, } = useBridgeInlineEditing({
-        pageViewContextRef,
-        activeBridgeInlineEditRef,
-        blockIframeBlurUntil,
-        sendBeginInlineEdit,
+        }
+    }, 100);
+    updateMiniMapVisibility();
+    const buildPageModelThrottled = useThrottledCallback(buildPageModelSkeleton, 200, {
+        leading: true,
+        trailing: true,
     });
-    const beginTrackedBridgeInlineEdit = useCallback(async (interaction) => {
-        activeBridgeInlineEditRef.current = null;
-        const started = await beginBridgeInlineEdit(interaction);
-        if (started && interaction.elementKey && interaction.fieldId) {
-            const interactionItem = interaction.item?.id &&
-                interaction.item.language &&
-                typeof interaction.item.version === "number"
-                ? {
-                    id: interaction.item.id,
-                    language: interaction.item.language,
-                    version: interaction.item.version,
-                    name: interaction.item.name,
-                    displayName: interaction.item.displayName,
-                    path: interaction.item.path,
-                    database: interaction.item.database,
+    const requestPageModelBuild = (doc) => {
+        if (!doc)
+            return;
+        buildPageModelThrottled(doc, editContextRef, pageViewContextRef);
+    };
+    const [iframeSrc, setIframeSrc] = useState();
+    const editorCssGuardRef = useRef({ doc: null, observer: null, editMode: true });
+    const ensureEditorCssGuard = (doc, editMode) => {
+        if (!doc)
+            return;
+        // Keep latest mode so the observer can re-apply the right CSS after hydration/head updates.
+        editorCssGuardRef.current.editMode = editMode;
+        const needsNewObserver = editorCssGuardRef.current.doc !== doc;
+        if (needsNewObserver) {
+            try {
+                editorCssGuardRef.current.observer?.disconnect();
+            }
+            catch { }
+            editorCssGuardRef.current.doc = doc;
+            editorCssGuardRef.current.observer = null;
+            // Guard against frameworks (Next/Head managers) removing/replacing our injected <style>.
+            let isApplying = false;
+            const observer = new MutationObserver(() => {
+                const currentDoc = editorCssGuardRef.current.doc;
+                if (!currentDoc || currentDoc !== doc)
+                    return;
+                if (isApplying)
+                    return;
+                const head = currentDoc.head;
+                if (!head)
+                    return;
+                const style = head.querySelector(`#${EDITOR_CSS_STYLE_ID}`);
+                if (style)
+                    return;
+                try {
+                    isApplying = true;
+                    injectEditorCSS(currentDoc, editorCssGuardRef.current.editMode);
                 }
-                : undefined;
-            activeBridgeInlineEditRef.current = {
-                elementKey: interaction.elementKey,
-                fieldId: interaction.fieldId,
-                item: interactionItem,
-                modeAtStart: editContextRef.current?.mode ?? editContext.mode,
-            };
+                finally {
+                    isApplying = false;
+                }
+            });
+            // Observe <head> for style removals, and <html> for rare head replacements.
+            try {
+                if (doc.head)
+                    observer.observe(doc.head, { childList: true });
+                if (doc.documentElement)
+                    observer.observe(doc.documentElement, { childList: true });
+            }
+            catch { }
+            editorCssGuardRef.current.observer = observer;
         }
-        return started;
-    }, [beginBridgeInlineEdit, editContext.mode, editContextRef]);
-    const endTrackedBridgeFieldFocus = useCallback(() => {
-        activeBridgeInlineEditRef.current = null;
-        endBridgeFieldFocus();
-    }, [endBridgeFieldFocus]);
-    useEffect(() => {
-        const handleBridgeInlineEditRelease = (event) => {
-            const detail = event
-                .detail;
-            const field = detail?.field;
-            const activeEdit = activeBridgeInlineEditRef.current;
-            if (!field || !activeEdit)
-                return;
-            if (!bridgeKeysMatch(activeEdit.fieldId, field.fieldId))
-                return;
-            if (activeEdit.item && !bridgeItemMatches(activeEdit.item, field.item)) {
-                return;
+        // Apply now, and again shortly after to catch post-hydration head normalization.
+        injectEditorCSS(doc, editMode);
+        setTimeout(() => {
+            if (editorCssGuardRef.current.doc === doc) {
+                injectEditorCSS(doc, editorCssGuardRef.current.editMode);
             }
-            activeBridgeInlineEditRef.current = null;
-            bridgePatchSignatureRef.current.delete(`${activeEdit.elementKey}:${activeEdit.fieldId}`);
-        };
-        window.addEventListener(BRIDGE_INLINE_EDIT_RELEASE_EVENT, handleBridgeInlineEditRelease);
+        }, 0);
+    };
+    // Disconnect the CSS guard on unmount.
+    useEffect(() => {
         return () => {
-            window.removeEventListener(BRIDGE_INLINE_EDIT_RELEASE_EVENT, handleBridgeInlineEditRelease);
+            try {
+                editorCssGuardRef.current.observer?.disconnect();
+            }
+            catch { }
+            editorCssGuardRef.current.observer = null;
+            editorCssGuardRef.current.doc = null;
         };
     }, []);
+    // If the editor mode flips (edit/preview), re-apply CSS and disable inline editing in the iframe.
     useEffect(() => {
-        return editContext.registerModeChangeParticipant({
-            beforeModeChange: () => {
-                editContext.operations.onFieldBlur?.();
-                void fieldsContextRef.current?.setFocusedField(undefined, false);
-                endBridgeFieldFocus();
-            },
-            clearInlineDedupe: () => {
-                clearBridgeInlineDedupe();
-            },
-        });
-    }, [
-        clearBridgeInlineDedupe,
-        editContext,
-        endBridgeFieldFocus,
-        fieldsContextRef,
-    ]);
-    const getBridgePatchDisplayValue = useCallback(({ field, structureField, itemDescriptor, preferRepositoryValue, }) => {
-        const showSuggestions = editContext.mode === "suggestions" || editContext.showSuggestedEdits;
-        const repositoryValue = getBridgeFieldPatchValue(field);
-        const display = getSuggestionDisplayValue({
-            repositoryValue,
-            modifiedFields: preferRepositoryValue
-                ? undefined
-                : fieldsContext?.modifiedFields,
-            suggestedEdits: editContext.suggestedEdits,
-            field: {
-                fieldId: field.id || structureField.fieldId,
-                itemId: itemDescriptor.id,
-                language: itemDescriptor.language,
-                version: itemDescriptor.version,
-                pageItemId: pageViewContext.pageItemDescriptor?.id,
-                pageItemVersion: pageViewContext.pageItemDescriptor?.version,
-            },
-            mode: showSuggestions ? "suggestions" : "baseline",
-        });
-        return {
-            value: showSuggestions ? display.mergedValue : display.baselineValue,
-            source: showSuggestions && display.hasSuggestions
-                ? "suggestion-preview"
-                : "real",
-        };
-    }, [
-        editContext.mode,
-        editContext.showSuggestedEdits,
-        editContext.suggestedEdits,
-        fieldsContext?.modifiedFields,
-        pageViewContext.pageItemDescriptor,
-    ]);
-    const buildBridgeFieldPatch = useCallback(({ field, structureField, itemDescriptor, preferRepositoryValue, }) => {
-        const display = getBridgePatchDisplayValue({
-            field,
-            structureField,
-            itemDescriptor,
-            preferRepositoryValue,
-        });
-        const activeInlineEdit = activeBridgeInlineEditRef.current;
-        const patch = buildBridgeFieldPatchPayload({
-            field,
-            structureField,
-            display,
-            activeInlineEdit,
-        });
-        return patch;
-    }, [getBridgePatchDisplayValue]);
-    const clearBridgePatchSignatures = useCallback(() => {
-        bridgePatchSignatureRef.current.clear();
-    }, []);
-    const sendBridgeFieldPatch = useCallback((bridge, patch, observedTextContent) => {
-        const cacheKey = `${patch.elementKey}:${patch.fieldId}`;
-        const signature = JSON.stringify({
-            value: patch.value,
-            isRichText: !!patch.isRichText,
-            source: patch.source ?? "",
-            observedTextContent: observedTextContent ?? "",
-        });
-        if (bridgePatchSignatureRef.current.get(cacheKey) === signature) {
-            return false;
+        const doc = getAccessibleIframeDocument(iframeRef.current, "PageViewerFrame.tsx:mode-css");
+        const isPreview = editContext.mode === "preview";
+        if (doc)
+            ensureEditorCssGuard(doc, !isPreview);
+        if (isPreview) {
+            editContextRef.current?.setSelectedRange(undefined);
+            fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
         }
-        bridgePatchSignatureRef.current.set(cacheKey, signature);
-        bridge.sendCommand("applyFieldPatch", patch);
-        return true;
-    }, []);
-    const clearBridgeRemoteCaretPosition = useCallback(() => {
-        const editor = editContextRef.current;
-        if (!editor || lastSentBridgeCaretRef.current === "clear")
-            return;
-        editor.sendSocketMessage({
-            type: "caret-position",
-            payload: { offset: null },
-        });
-        lastSentBridgeCaretRef.current = "clear";
-    }, [editContextRef]);
-    const sendBridgeRemoteCaretPosition = useCallback((selection) => {
-        const editor = editContextRef.current;
-        const activeField = selection.activeField;
-        const offset = selection.startOffset ?? selection.endOffset;
-        if (!editor ||
-            !activeField?.fieldId ||
-            !selection.collapsed ||
-            offset == null) {
-            clearBridgeRemoteCaretPosition();
+    }, [editContext.mode]);
+    useEffect(() => {
+        if (!pageItemDescriptor ||
+            !pageViewContext.editUrl ||
+            !pageViewContext.previewUrl)
             return;
+        const urlPath = editContext.mode === "preview"
+            ? pageViewContext.previewUrl
+            : pageViewContext.editUrl;
+        const prevMode = prevModeRef.current;
+        prevModeRef.current = editContext.mode;
+        const modeOnlyChange = prevMode !== editContext.mode &&
+            prevMode !== "preview" &&
+            editContext.mode !== "preview";
+        let savedScrollY = 0;
+        try {
+            savedScrollY = iframeRef.current?.contentWindow?.scrollY ?? 0;
         }
-        const sourceItem = activeField.item ??
-            pageViewContextRef.current?.page?.item ??
-            pageViewContextRef.current?.pageItemDescriptor;
-        const version = typeof sourceItem?.version === "number" &&
-            Number.isFinite(sourceItem.version)
-            ? sourceItem.version
-            : undefined;
-        if (!sourceItem?.id || !sourceItem.language || version === undefined) {
-            clearBridgeRemoteCaretPosition();
-            return;
+        catch {
+            savedScrollY = 0;
         }
-        const item = {
-            ...sourceItem,
-            version,
-        };
-        const nextKey = `${activeField.fieldId}:${item.id}:${item.language}:${item.version}:${offset}`;
-        if (lastSentBridgeCaretRef.current === nextKey)
-            return;
-        editor.sendSocketMessage({
-            type: "caret-position",
-            payload: {
-                fieldId: activeField.fieldId,
-                item,
-                offset,
-            },
-        });
-        lastSentBridgeCaretRef.current = nextKey;
-    }, [clearBridgeRemoteCaretPosition, editContextRef, pageViewContextRef]);
-    const handleBridgeSelection = useCallback((selection, iframe) => {
-        const editor = editContextRef.current;
-        if (!editor)
-            return;
-        const isInlineAiUiFocused = () => {
-            const activeEl = document.activeElement;
-            return !!(activeEl?.closest(".agent-inline-dialog") ||
-                activeEl?.closest(".agent-inline-trigger") ||
-                activeEl?.closest('[role="dialog"]'));
-        };
-        if (selection.collapsed ||
-            !selection.text ||
-            !selection.activeField?.fieldId) {
-            sendBridgeRemoteCaretPosition(selection);
-            if (!isInlineAiUiFocused()) {
-                editor.setSelectedRange(undefined);
-            }
-            return;
+        const renderUrl = new URL(urlPath, window.location.origin);
+        const editRev = uuid();
+        renderUrl.searchParams.set("edit_rev", editRev);
+        if (editContext.mode !== "preview" && editContext.sessionId) {
+            renderUrl.searchParams.set("parhelia_session", editContext.sessionId);
         }
-        clearBridgeRemoteCaretPosition();
-        const item = selection.activeField.item ??
-            pageViewContextRef.current?.page?.item ??
-            pageViewContextRef.current?.pageItemDescriptor;
-        if (!item?.id) {
-            editor.setSelectedRange(undefined);
-            return;
+        if (editContext.mode === "preview" && editContext.previewDate) {
+            renderUrl.searchParams.delete("sc_version");
+            renderUrl.searchParams.set("sc_date", toSitecoreDate(editContext.previewDate));
         }
-        const metadata = selection.metadata ?? {};
-        const iframeRect = iframe.getBoundingClientRect();
-        const selectionRect = selection.rect
-            ? {
-                x: iframeRect.left + selection.rect.left,
-                y: iframeRect.top + selection.rect.top,
-                width: selection.rect.width,
-                height: selection.rect.height,
-                top: iframeRect.top + selection.rect.top,
-                right: iframeRect.left + selection.rect.right,
-                bottom: iframeRect.top + selection.rect.bottom,
-                left: iframeRect.left + selection.rect.left,
-            }
-            : undefined;
-        const nextRange = {
-            itemId: item.id,
-            fieldId: selection.activeField.fieldId,
-            elementKey: selection.activeField.elementKey,
-            isRichText: selection.activeField.isRichText,
-            language: item.language,
-            version: item.version,
-            startOffset: selection.startOffset ?? 0,
-            endOffset: selection.endOffset ?? selection.startOffset ?? 0,
-            text: selection.text,
-            contextBefore: typeof metadata.contextBefore === "string"
-                ? metadata.contextBefore
-                : undefined,
-            contextAfter: typeof metadata.contextAfter === "string"
-                ? metadata.contextAfter
-                : undefined,
-            clientRect: selectionRect,
-        };
-        editor.setSelectedRange(nextRange);
-    }, [clearBridgeRemoteCaretPosition, sendBridgeRemoteCaretPosition]);
-    const resolveBridgeFieldDescriptor = useCallback(async (interaction) => {
-        const pageView = pageViewContextRef.current;
-        const selectedRange = editContextRef.current?.selectedRange;
-        const selectedRangeElementKey = selectedRange?.elementKey;
-        const selectedRangeMatchesInteraction = !!((interaction.kind === "contextMenu" ||
-            interaction.kind === "keydown") &&
-            selectedRange?.text &&
-            selectedRange.fieldId &&
-            ((selectedRangeElementKey &&
-                interaction.elementKey &&
-                selectedRangeElementKey === interaction.elementKey) ||
-                bridgeIdsMatch(selectedRange.fieldId, interaction.fieldId) ||
-                bridgeIdsMatch(selectedRange.itemId, interaction.item?.id)));
-        const fieldId = selectedRangeMatchesInteraction
-            ? selectedRange?.fieldId
-            : interaction.fieldId;
-        if (!fieldId)
-            return undefined;
-        const targetElementKey = selectedRangeMatchesInteraction
-            ? selectedRangeElementKey
-            : interaction.elementKey;
-        const structureFields = pageView?.bridgeStructure?.fields ?? [];
-        const structureField = structureFields.find((field) => bridgeIdsMatch(field.fieldId, fieldId)) ??
-            structureFields.find((field) => targetElementKey && field.elementKey === targetElementKey);
-        const fallbackItem = pageView?.page?.item ?? pageView?.pageItemDescriptor;
-        const componentId = resolveBridgeComponentId(interaction.componentId ?? structureField?.componentId, pageView?.page);
-        const component = componentId && pageView?.page
-            ? getComponentById(componentId, pageView.page)
-            : undefined;
-        const candidateItems = [];
-        const selectedRangeItem = selectedRangeMatchesInteraction &&
-            selectedRange?.itemId &&
-            selectedRange.language &&
-            typeof selectedRange.version === "number"
-            ? {
-                id: selectedRange.itemId,
-                language: selectedRange.language,
-                version: selectedRange.version,
-                database: fallbackItem?.database,
-            }
-            : undefined;
-        const addCandidateItem = (source) => {
-            const itemId = source?.id ?? fallbackItem?.id;
-            const language = source?.language ?? fallbackItem?.language;
-            const versionValue = source?.version ?? fallbackItem?.version;
-            const version = typeof versionValue === "number" && Number.isFinite(versionValue)
-                ? versionValue
-                : undefined;
-            if (!itemId || !language || version === undefined)
-                return;
-            if (candidateItems.some((item) => bridgeIdsMatch(item.id, itemId) &&
-                item.language.toLowerCase() === language.toLowerCase() &&
-                item.version === version)) {
+        // Layout-mode marker. Only set when editing shared layout, paired with the
+        // `parhelia` editor marker so ParheliaSetLayoutRenderings ignores any unrelated
+        // requests that happen to carry parhelia_layout.
+        if (editContext.mode !== "preview" && editContext.layoutMode === "shared") {
+            renderUrl.searchParams.set("parhelia", "1");
+            renderUrl.searchParams.set("parhelia_layout", "shared");
+        }
+        else {
+            renderUrl.searchParams.delete("parhelia_layout");
+        }
+        // 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.
+        let currentIframeUrl;
+        try {
+            currentIframeUrl = iframeRef.current?.contentWindow?.location?.href;
+        }
+        catch {
+            currentIframeUrl = undefined;
+        }
+        const currentVersion = currentIframeUrl
+            ? new URL(currentIframeUrl).searchParams.get("sc_version")
+            : null;
+        const newVersion = renderUrl.searchParams.get("sc_version");
+        const versionChanged = (currentVersion !== null || newVersion !== null) &&
+            currentVersion !== newVersion;
+        const initialLoad = currentItemDescriptor?.id !== pageItemDescriptor.id ||
+            currentItemDescriptor?.language !== pageItemDescriptor.language ||
+            currentItemDescriptor?.version !== pageItemDescriptor.version;
+        const shouldUseIframeSrcReload = initialLoad || pageViewContext.fullscreen;
+        const runIntegrationRefresh = (refreshFn, message) => {
+            console.log(message);
+            const refreshAccepted = refreshFn(renderUrl.toString());
+            if (refreshAccepted === false) {
+                runFallbackRefresh();
                 return;
             }
-            candidateItems.push({
-                id: itemId,
-                language,
-                version,
-                name: source?.name ?? fallbackItem?.name,
-                displayName: source?.displayName ?? fallbackItem?.displayName,
-                path: source?.path ?? fallbackItem?.path,
-                database: source?.database ?? fallbackItem?.database,
-            });
-        };
-        addCandidateItem(selectedRangeItem);
-        addCandidateItem(interaction.item);
-        addCandidateItem(structureField?.item);
-        addCandidateItem(component?.datasourceItem);
-        component?.items.forEach(addCandidateItem);
-        addCandidateItem(fallbackItem);
-        for (const item of candidateItems) {
-            const repositoryItem = await editContextRef.current?.itemsRepository.getItem(item);
-            const repositoryField = repositoryItem?.fields.find((field) => fieldIdentifierMatches(field, fieldId));
-            if (repositoryField) {
-                return {
-                    fieldId: repositoryField.id,
-                    item,
+            const doc = getAccessibleIframeDocument(iframeRef.current, "PageViewerFrame.tsx:integration-refresh-doc");
+            if (doc) {
+                requestPageModelBuild(doc);
+            }
+            // The integration refresh path may replace/normalize <head> during hydration,
+            // which can remove our injected style. Re-ensure a few times post-refresh.
+            const ensureLater = (delay) => {
+                setTimeout(() => {
+                    const doc = getAccessibleIframeDocument(iframeRef.current, "PageViewerFrame.tsx:integration-refresh-ensure-later");
+                    if (doc)
+                        ensureEditorCssGuard(doc, editContext.mode !== "preview");
+                    rebindIframeInteractionsRef.current?.();
+                }, delay);
+            };
+            ensureLater(0);
+            ensureLater(100);
+            ensureLater(500);
+            ensureLater(1200);
+            if (modeOnlyChange && savedScrollY > 0) {
+                const restoreScroll = (delay) => {
+                    setTimeout(() => {
+                        const win = iframeRef.current?.contentWindow;
+                        if (win && win.scrollY === 0) {
+                            win.scrollTo(0, savedScrollY);
+                        }
+                    }, delay);
                 };
+                restoreScroll(50);
+                restoreScroll(200);
+                restoreScroll(500);
+                restoreScroll(1000);
+                restoreScroll(2000);
             }
-        }
-        const fallbackDescriptorItem = candidateItems[0];
-        if (!fallbackDescriptorItem)
-            return undefined;
-        return {
-            fieldId,
-            item: fallbackDescriptorItem,
         };
-    }, [editContextRef]);
-    const handleBridgeInteraction = useCallback(async (interaction, iframe) => {
-        if (interaction.kind === "wheel") {
-            if (!interaction.ctrlKey && !interaction.metaKey)
-                return;
-            if (!interaction.deltaY)
-                return;
-            const zoomContext = (compareView ? slotContext?.primaryPageViewContext : undefined) ??
-                pageViewContextRef.current;
-            const direction = interaction.deltaY < 0 ? 1 : -1;
-            zoomContext?.setZoom((value) => clampEditorZoom(value + direction * ZOOM_STEP));
-            return;
-        }
-        if (interaction.kind === "keydown") {
-            if (isBridgeInlineAiShortcut(interaction)) {
-                const editor = editContextRef.current;
-                const field = await resolveBridgeFieldDescriptor(interaction);
-                if (editor && field) {
-                    await editor.setFocusedField(field, editor.mode !== "suggestions");
+        function runFallbackRefresh() {
+            setShowSpinner(true);
+            if (shouldUseIframeSrcReload) {
+                // For initial loads and fullscreen mode, prefer a full iframe src reload.
+                // The morphdom path can race with framework hydration and leave the frame blank.
+                console.log(initialLoad
+                    ? "Initial load - setting iframe src"
+                    : "Fullscreen load - setting iframe src");
+                // Clear any stale load tracking to prevent handleLoad from incorrectly
+                // skipping spinner dismissal due to revision mismatch
+                currentLoadRef.current = null;
+                setIframeSrc(renderUrl.toString());
+            }
+            else {
+                console.log("No integration - reloading frame via fetch");
+                // Abort any in-flight load before starting a new one
+                try {
+                    currentLoadRef.current?.controller.abort();
                 }
-                document.dispatchEvent(new CustomEvent("inline-ai-open", {
-                    bubbles: true,
-                    cancelable: true,
-                }));
+                catch { }
+                const controller = new AbortController();
+                const expectedRevision = editContext.revision ?? "";
+                currentLoadRef.current = { controller, revision: expectedRevision };
+                loadContent(renderUrl.toString(), initialLoad, expectedRevision, controller.signal);
             }
-            return;
         }
-        if (interaction.kind !== "click" && interaction.kind !== "contextMenu") {
-            return;
+        // Use requestRefresh for normal refreshes, but force full reload for version changes.
+        // If requestRefresh is temporarily unavailable, wait briefly before falling back.
+        let integrationRefreshFn;
+        try {
+            integrationRefreshFn = iframeRef.current?.contentWindow?.requestRefresh;
         }
-        if (interaction.kind === "click" && interaction.button !== 0)
-            return;
-        if (interaction.kind === "contextMenu" && interaction.ctrlKey)
-            return;
-        const editor = editContextRef.current;
-        if (!editor)
-            return;
-        const selectFromBridgeInteraction = (ids) => {
-            if (!bridgeComponentSelectionsMatch(editor.selection, ids)) {
-                suppressNextSelectionScrollRef.current = true;
-            }
-            editor.select(ids);
-        };
-        let effectiveInteraction = interaction;
-        if (interaction.kind === "contextMenu" &&
-            !interaction.fieldId &&
-            interaction.clientX !== undefined &&
-            interaction.clientY !== undefined) {
-            const fieldTarget = findBridgeFieldTargetAtPoint(pageViewContextRef.current?.bridgeGeometry, interaction.clientX, interaction.clientY);
-            if (fieldTarget?.fieldId) {
-                effectiveInteraction = {
-                    ...interaction,
-                    elementKey: fieldTarget.elementKey ?? interaction.elementKey,
-                    fieldId: fieldTarget.fieldId,
-                };
-            }
+        catch {
+            integrationRefreshFn = undefined;
         }
-        const componentId = resolveBridgeComponentId(effectiveInteraction.componentId, pageViewContextRef.current?.page);
-        const isEditableFieldClick = !!(effectiveInteraction.kind === "click" &&
-            effectiveInteraction.fieldId &&
-            effectiveInteraction.elementKey &&
-            !effectiveInteraction.ctrlKey &&
-            !effectiveInteraction.shiftKey &&
-            !effectiveInteraction.metaKey);
-        const currentOverlay = editor.currentOverlay;
-        const isGeneratorOverlay = !!(currentOverlay &&
-            typeof currentOverlay === "string" &&
-            currentOverlay.endsWith("_generators"));
-        if (interaction.kind === "click" && currentOverlay === "context-menu") {
-            editor.setCurrentOverlay(undefined);
+        if (!versionChanged && integrationRefreshFn) {
+            runIntegrationRefresh(integrationRefreshFn, "Integration - requesting refresh");
         }
-        if (currentOverlay &&
-            currentOverlay !== "context-menu" &&
-            !isGeneratorOverlay) {
-            editor.setCurrentOverlay(undefined);
+        else if (!versionChanged && !shouldUseIframeSrcReload) {
+            const retryDelayMs = 150;
+            const retryTimer = setTimeout(() => {
+                let retryIntegrationRefreshFn;
+                try {
+                    retryIntegrationRefreshFn =
+                        iframeRef.current?.contentWindow?.requestRefresh;
+                }
+                catch {
+                    retryIntegrationRefreshFn = undefined;
+                }
+                if (retryIntegrationRefreshFn) {
+                    runIntegrationRefresh(retryIntegrationRefreshFn, "Integration became available after brief wait - requesting refresh");
+                    return;
+                }
+                runFallbackRefresh();
+            }, retryDelayMs);
+            setCurrentItemDescriptor(pageItemDescriptor);
+            return () => clearTimeout(retryTimer);
         }
-        if (!componentId) {
-            if (interaction.kind === "click")
-                selectFromBridgeInteraction([]);
-            if (isEditableFieldClick) {
-                await beginTrackedBridgeInlineEdit(effectiveInteraction);
-            }
-            else if (interaction.kind === "click") {
-                endTrackedBridgeFieldFocus();
-            }
-            return;
+        else {
+            runFallbackRefresh();
         }
-        const currentSelection = editor.selection || [];
-        if (interaction.kind === "contextMenu") {
-            if (pageViewContextRef.current) {
-                pageViewContextRef.current.bridgeInteraction = effectiveInteraction;
+        setCurrentItemDescriptor(pageItemDescriptor);
+    }, [
+        pathname,
+        editContext.revision,
+        pageItemDescriptor,
+        pageViewContext.editUrl,
+        pageViewContext.previewUrl,
+        pageViewContext.fullscreen,
+        editContext.mode,
+        editContext.previewDate,
+        editContext.sessionId,
+        editContext.layoutMode,
+    ]);
+    useEffect(() => {
+        if (fieldsContext?.focusedField) {
+            if (editContext.selection.length > 0 &&
+                fieldsContext.focusedField.item.id !== editContext.selection[0])
+                return;
+            let fieldElement;
+            try {
+                fieldElement = findFieldElement(iframeRef.current, fieldsContext.focusedField);
             }
-            const selectedIds = currentSelection.includes(componentId)
-                ? currentSelection
-                : [componentId];
-            if (!currentSelection.includes(componentId)) {
-                selectFromBridgeInteraction(selectedIds);
+            catch {
+                fieldElement = null;
             }
-            const page = pageViewContextRef.current?.page;
-            if (!page)
-                return;
-            const selectedComponents = selectedIds
-                .map((id) => getComponentById(id, page))
-                .filter((component) => !!component);
-            if (selectedComponents.length === 0)
-                return;
-            const iframeRect = iframe.getBoundingClientRect();
-            const clientX = iframeRect.x + (interaction.clientX ?? 0);
-            const clientY = iframeRect.y + (interaction.clientY ?? 0);
-            const menuPosition = { x: clientX, y: clientY };
-            const adjustedEvent = new MouseEvent("contextmenu", {
-                bubbles: true,
-                cancelable: true,
-                shiftKey: interaction.shiftKey,
-                altKey: interaction.altKey,
-                ctrlKey: interaction.ctrlKey,
-                metaKey: interaction.metaKey,
-                view: window,
-                clientX,
-                clientY,
-                button: 2,
-            });
-            setContextMenuPosition(menuPosition);
-            let loadingShown = false;
-            const loadingTimer = window.setTimeout(() => {
-                loadingShown = true;
-                editor.showContextMenu(adjustedEvent, [
-                    {
-                        id: "loading",
-                        label: "Loading...",
-                        disabled: true,
-                        icon: _jsx(Spinner, { size: "sm", className: "mr-2" }),
-                    },
-                ]);
-            }, 100);
-            const field = await resolveBridgeFieldDescriptor(effectiveInteraction);
-            const fieldButtons = field ? await loadFieldButtons(field) : [];
-            const handleParameterizedActionWithPosition = (field, action) => {
-                setContextMenuField(field);
-                setContextMenuFieldButtons([action]);
-                setPreSelectedAction(action);
-                window.setTimeout(() => {
-                    const tempElement = document.createElement("div");
-                    tempElement.style.position = "fixed";
-                    tempElement.style.left = menuPosition.x + "px";
-                    tempElement.style.top = menuPosition.y + "px";
-                    tempElement.style.width = "1px";
-                    tempElement.style.height = "1px";
-                    tempElement.style.visibility = "hidden";
-                    tempElement.style.pointerEvents = "none";
-                    document.body.appendChild(tempElement);
-                    const positionedEvent = new MouseEvent("click", {
-                        bubbles: true,
-                        cancelable: true,
-                        view: window,
-                        clientX: menuPosition.x,
-                        clientY: menuPosition.y,
-                    });
-                    Object.defineProperty(positionedEvent, "target", {
-                        value: tempElement,
-                        enumerable: true,
-                    });
-                    fieldActionsOverlay.current?.show(positionedEvent, action);
-                    window.setTimeout(() => {
-                        tempElement.remove();
-                    }, 1000);
-                }, 100);
-            };
-            const items = await buildComponentContextMenuItems(selectedComponents, editor, field, fieldButtons, handleParameterizedActionWithPosition);
-            window.clearTimeout(loadingTimer);
-            if (loadingShown) {
-                editor.updateContextMenu(items);
+            if (fieldElement) {
+                const rect = getAbsolutePosition(fieldElement, iframeRef.current);
+                let scrollTop = 0;
+                try {
+                    scrollTop = iframeRef.current?.contentWindow?.scrollY || 0;
+                }
+                catch {
+                    scrollTop = 0;
+                }
+                const iframeHeight = iframeRef.current?.getBoundingClientRect().height;
+                const isInViewport = rect.y + rect.height > scrollTop &&
+                    rect.y < scrollTop + (iframeHeight || 0);
+                if (!isInViewport) {
+                    try {
+                        iframeRef.current?.contentWindow?.scrollTo({
+                            top: rect.y,
+                            behavior: "smooth",
+                        });
+                    }
+                    catch { }
+                }
             }
-            else {
-                editor.showContextMenu(adjustedEvent, items);
+        }
+    }, [fieldsContext?.focusedField]);
+    useEffect(() => {
+        if (!fieldsContext?.focusedField && editContext.selection.length > 0) {
+            const lastSelectedComponent = getComponentById(editContext.selection[editContext.selection.length - 1], pageViewContextRef.current.page);
+            if (lastSelectedComponent) {
+                editContext.setScrollIntoView(lastSelectedComponent.id);
             }
-            return;
         }
-        if (interaction.shiftKey && currentSelection.length > 0) {
-            const orderedIds = getOrderedBridgeComponentIds(pageViewContextRef.current?.bridgeGeometry, pageViewContextRef.current?.page);
-            const anchorId = currentSelection[currentSelection.length - 1];
-            const anchorIndex = orderedIds.findIndex((id) => bridgeIdsMatch(id, anchorId));
-            const targetIndex = orderedIds.findIndex((id) => bridgeIdsMatch(id, componentId));
-            if (anchorIndex !== -1 && targetIndex !== -1) {
-                const start = Math.min(anchorIndex, targetIndex);
-                const end = Math.max(anchorIndex, targetIndex);
-                const range = orderedIds.slice(start, end + 1);
-                if (interaction.ctrlKey || interaction.metaKey) {
-                    const nextSelection = [...currentSelection];
-                    for (const id of range) {
-                        if (!nextSelection.some((selectedId) => bridgeIdsMatch(selectedId, id))) {
-                            nextSelection.push(id);
-                        }
+    }, [editContext.selection, fieldsContext?.focusedField]);
+    const loadContent = async (href, initialLoad, expectedRevision, signal) => {
+        console.log("Loading content:", href);
+        const start = performance.now();
+        if (!href)
+            return;
+        try {
+            const content = await fetch(href, { signal });
+            // Detect redirect to login page (session expired)
+            if (content.redirected) {
+                const redirectUrl = content.url.toLowerCase();
+                if (redirectUrl.includes("/identity/login") ||
+                    redirectUrl.includes("/sitecore/login") ||
+                    redirectUrl.includes("returnurl=")) {
+                    console.warn("Session expired - redirected to login page:", content.url);
+                    setShowSpinner(false);
+                    // Redirect the main window to the login page
+                    window.location.href = content.url;
+                    return;
+                }
+            }
+            const text = await content.text();
+            console.log("Content loaded in " + (performance.now() - start) + " ms");
+            // Skip applying if this response is stale
+            if (expectedRevision !== (editContextRef.current?.revision ?? "")) {
+                console.log("Stale refresh skipped", {
+                    expectedRevision,
+                    current: editContextRef.current?.revision,
+                });
+                return;
+            }
+            console.log("Content loaded in " + (performance.now() - start) + " ms");
+            const doc = getAccessibleIframeDocument(iframeRef.current, "PageViewerFrame.tsx:loadContent-doc");
+            if (doc) {
+                if (initialLoad) {
+                    // Guard again just before applying
+                    if (expectedRevision !== (editContextRef.current?.revision ?? "")) {
+                        console.log("Stale initial load skipped", {
+                            expectedRevision,
+                            current: editContextRef.current?.revision,
+                        });
+                        return;
                     }
-                    selectFromBridgeInteraction(nextSelection);
+                    doc.open();
+                    doc.write(text);
+                    doc.close();
                 }
                 else {
-                    selectFromBridgeInteraction(range);
+                    const parser = new DOMParser();
+                    const newDoc = parser.parseFromString(text, "text/html");
+                    // Guard before morphing DOM to avoid applying stale content
+                    if (expectedRevision !== (editContextRef.current?.revision ?? "")) {
+                        console.log("Stale morphdom skipped", {
+                            expectedRevision,
+                            current: editContextRef.current?.revision,
+                        });
+                        return;
+                    }
+                    const morphTarget = doc.body && newDoc.body ? "body" : "documentElement";
+                    if (morphTarget === "body") {
+                        morphdom(doc.body, newDoc.body);
+                    }
+                    else {
+                        morphdom(doc.documentElement, newDoc.documentElement);
+                    }
+                    rebindIframeInteractionsRef.current?.();
+                    try {
+                        const xa = iframeRef.current.contentWindow.XA;
+                        if (xa) {
+                            console.log("init XA");
+                            xa.init();
+                        }
+                    }
+                    catch { }
+                    setShowSpinner(false);
                 }
+                ensureEditorCssGuard(doc, editContext.mode !== "preview");
+                setTimeout(() => {
+                    injectSXAScripts(iframeRef.current);
+                }, 1000);
+                try {
+                    requestPageModelBuild(doc);
+                }
+                catch (buildErr) { }
             }
-            else {
-                selectFromBridgeInteraction([componentId]);
+        }
+        catch (err) {
+            if (err?.name === "AbortError") {
+                // Swallow aborts – a newer refresh superseded this one
+                return;
             }
+            throw err;
+        }
+    };
+    useEffect(() => {
+        const iframeDoc = getAccessibleIframeDocument(iframeRef.current, "PageViewerFrame.tsx:scrollIntoView-doc");
+        if (!editContext.scrollIntoView || !iframeDoc?.documentElement)
+            return;
+        const component = getComponentById(editContext.scrollIntoView, pageViewContextRef.current.page);
+        if (!component)
             return;
+        let rect;
+        try {
+            rect = findComponentRect(iframeRef.current, component, true);
         }
-        if (interaction.ctrlKey || interaction.metaKey) {
-            if (currentSelection.includes(componentId)) {
-                selectFromBridgeInteraction(currentSelection.filter((id) => id !== componentId));
-            }
-            else {
-                selectFromBridgeInteraction([...currentSelection, componentId]);
-            }
+        catch {
+            rect = undefined;
+        }
+        if (!rect)
             return;
+        if (!iframeRef.current)
+            return;
+        // Check if element is already in viewport
+        const iframeHeight = iframeRef.current.getBoundingClientRect().height;
+        let scrollTop = 0;
+        try {
+            scrollTop = iframeRef.current?.contentWindow?.scrollY || 0;
         }
-        selectFromBridgeInteraction([componentId]);
-        if (isEditableFieldClick) {
-            await beginTrackedBridgeInlineEdit(effectiveInteraction);
+        catch {
+            scrollTop = 0;
         }
-        else {
-            endTrackedBridgeFieldFocus();
+        const elementTop = rect.rect.y;
+        const isInViewport = elementTop >= scrollTop && elementTop <= scrollTop + iframeHeight;
+        // If already in viewport, no need to scroll
+        if (isInViewport) {
+            editContext.setScrollIntoView(undefined);
+            return;
         }
-    }, [
-        beginTrackedBridgeInlineEdit,
-        endTrackedBridgeFieldFocus,
-        resolveBridgeFieldDescriptor,
-    ]);
-    // Update the context whenever the iframe ref changes
-    useEffect(() => {
-        pageViewContext.setEditorIframe(iframeElement);
-    }, [iframeElement, pageViewContext.setEditorIframe]);
+        const scrollPosition = rect.rect.y - iframeHeight / 2 + rect.rect.height / 2;
+        try {
+            iframeRef.current?.contentWindow?.scrollTo({
+                top: scrollPosition,
+                behavior: "smooth",
+            });
+        }
+        catch { }
+        editContext.setScrollIntoView(undefined);
+    }, [editContext.scrollIntoView, pageViewContext.page]);
     useEffect(() => {
-        const iframe = iframeElement;
-        if (!iframe)
+        const handleMessage = (message) => {
+            if (message.origin !== window.location.origin)
+                return;
+            if (message.data.type === "editor-exitFullscreen") {
+                pageViewContext.setFullscreen(false);
+            }
+            if (message.data.type === "editor-timings") {
+                editContext.setTimings(message.data.timings);
+            }
+        };
+        window.addEventListener("message", handleMessage);
+        return () => {
+            window.removeEventListener("message", handleMessage);
+        };
+    }, []);
+    const selecionChangeHandler = useDebouncedCallback(() => {
+        const sel = getAccessibleIframeDocument(iframeRef.current, "PageViewerFrame.tsx:selectionchange-doc")?.getSelection();
+        const isInlineAiUiFocused = () => {
+            const activeEl = document.activeElement;
+            return !!(activeEl?.closest(".agent-inline-dialog") ||
+                activeEl?.closest(".agent-inline-trigger") ||
+                activeEl?.closest('[role="dialog"]'));
+        };
+        // Whether the inline AI UI is currently mounted (regardless of focus). When the
+        // AI dialog is open, the selection may transiently collapse (e.g. a click falling
+        // through into the iframe right after opening from the context menu). We must not
+        // wipe the selectedRange in that case, otherwise the dialog closes immediately.
+        const isInlineAiUiPresent = () => !!document.querySelector(".agent-inline-dialog, .agent-inline-trigger");
+        if (!sel || sel.rangeCount === 0) {
+            if (!isInlineAiUiFocused() && !isInlineAiUiPresent()) {
+                editContextRef.current?.setSelectedRange(undefined);
+            }
+            return;
+        }
+        // Preserve the last non-collapsed selection while the inline AI UI is open.
+        // This avoids losing context when users click the trigger or dialog.
+        if (sel.isCollapsed && (isInlineAiUiFocused() || isInlineAiUiPresent())) {
             return;
-        const currentIframeSrc = iframe.src;
-        if (!iframeSrc || !loadedIframeSrc || loadedIframeSrc !== currentIframeSrc) {
-            pageViewContext.setBridgeReady(false);
-            pageViewContext.setIframeSupportsRefresh(false);
+        }
+        // Find the field element containing the selection/caret
+        const fieldElement = findClosestFieldElement(sel.anchorNode);
+        if (!fieldElement) {
+            if (!isInlineAiUiFocused() && !isInlineAiUiPresent()) {
+                editContextRef.current?.setSelectedRange(undefined);
+            }
             return;
         }
-        const allowedHostOrigins = [
-            getUrlOrigin(pageViewContext.editUrl),
-            getUrlOrigin(pageViewContext.previewUrl),
-        ].filter((origin) => Boolean(origin));
-        if (allowedHostOrigins.length === 0) {
-            pageViewContext.setBridgeReady(false);
-            pageViewContext.setIframeSupportsRefresh(false);
+        const fieldId = fieldElement.getAttribute("data-fieldid");
+        if (!fieldId)
             return;
+        const range = sel.getRangeAt(0);
+        // Guard: if layout components are hidden, do not set focus for fields of layout components
+        if (editContextRef.current?.showLayoutComponents === false &&
+            pageViewContextRef.current?.page) {
+            const ownerId = fieldElement.getAttribute("data-itemid") || "";
+            const owner = getComponentById(ownerId, pageViewContextRef.current.page);
+            if (owner?.layoutId)
+                return;
         }
-        // The canonical bridge is served from the editor's own origin. A stub
-        // bootloader on the host loads it from this URL; full-bridge hosts ignore
-        // it. Editor shells deploy under different base paths (e.g. dev-vite under
-        // `/parhelia/` in Sitecore), so each app advertises its own served location
-        // via `window.__PARHELIA_EDITOR_BRIDGE_URL__`. If that global is missing,
-        // infer the known `/parhelia` mount from the current editor URL.
-        const configuredEditorBridgeUrl = window.__PARHELIA_EDITOR_BRIDGE_URL__;
-        const editorBasePath = window.location.pathname.startsWith("/parhelia")
-            ? "/parhelia"
-            : "";
-        const editorBridgeUrl = configuredEditorBridgeUrl ||
-            new URL(`${editorBasePath}/editor-bridge/v1/parhelia-bridge.js`, window.location.origin).toString();
-        let client;
-        client = new BridgeClient({
-            iframe,
-            editorOrigin: window.location.origin,
-            allowedHostOrigins,
-            bridgeUrl: editorBridgeUrl,
-            onReadyChange: (ready) => {
-                pageViewContext.setBridgeReady(ready);
-                if (!ready)
-                    pageViewContext.setIframeSupportsRefresh(false);
-            },
-            onError: (error) => {
-                pageViewContext.setBridgeReady(false);
-                pageViewContext.setIframeSupportsRefresh(false);
-                console.error("[Parhelia bridge]", error.message);
-                if (!compareView) {
-                    editContextRef.current?.showErrorToast({
-                        summary: "Editing host bridge unavailable",
-                        details: error.message,
-                    });
-                }
-            },
-            onEvent: (event, bridge) => {
-                switch (event.name) {
-                    case "ready":
-                        clearBridgePatchSignatures();
-                        pageViewContext.setIframeSupportsRefresh(bridge.supportsCapability("refresh"));
-                        bridge.sendCommand("init", {
-                            editorOrigin: window.location.origin,
-                            sessionId: editContextRef.current?.sessionId,
-                            mode: editContextRef.current?.mode ?? "edit",
-                            selectedComponentIds: editContextRef.current?.selection ?? [],
-                            featureFlags: {
-                                crossOriginBridge: true,
+        // Compute the global offsets relative to the field element.
+        const globalStartOffset = getGlobalTextOffset(fieldElement, range.startContainer, range.startOffset);
+        const globalEndOffset = getGlobalTextOffset(fieldElement, range.endContainer, range.endOffset);
+        const selectedText = range.toString();
+        // Extract plain text context from the DOM
+        const { contextBefore, contextAfter } = extractDOMSelectionContext(fieldElement, globalStartOffset, globalEndOffset);
+        // Clone the range for the replaceText callback (ranges can become invalid after DOM changes)
+        const rangeClone = range.cloneRange();
+        const itemId = fieldElement.getAttribute("data-itemid") || "";
+        const language = fieldElement.getAttribute("data-language") || "";
+        const versionStr = fieldElement.getAttribute("data-version");
+        const version = versionStr ? parseInt(versionStr, 10) : 0;
+        editContextRef.current?.setSelectedRange({
+            itemId,
+            fieldId: fieldId,
+            language,
+            version,
+            startOffset: globalStartOffset,
+            endOffset: globalEndOffset,
+            text: selectedText,
+            contextBefore,
+            contextAfter,
+            // Create a callback that uses DOM Range API to replace text in contenteditable
+            replaceText: (newText) => {
+                try {
+                    // Delete the selected content (no-op for collapsed ranges)
+                    rangeClone.deleteContents();
+                    // Insert the new text - use the correct document from the range containers
+                    const doc = rangeClone.startContainer.ownerDocument || document;
+                    const textNode = doc.createTextNode(newText);
+                    rangeClone.insertNode(textNode);
+                    // Collapse the range to the end of the inserted text
+                    rangeClone.setStartAfter(textNode);
+                    rangeClone.collapse(true);
+                    // Update the selection
+                    const iframeSel = getAccessibleIframeDocument(iframeRef.current, "PageViewerFrame.tsx:replaceText-doc")?.getSelection();
+                    if (iframeSel) {
+                        iframeSel.removeAllRanges();
+                        iframeSel.addRange(rangeClone);
+                    }
+                    // Explicitly save the field value since the MutationObserver may not be active
+                    // when text is selected without entering inline edit mode
+                    const isRichText = fieldElement?.getAttribute("data-is-richtext") === "true";
+                    const valueToSave = isRichText
+                        ? fieldElement?.innerHTML
+                        : fieldElement?.innerText;
+                    if (fieldId &&
+                        itemId &&
+                        language &&
+                        version &&
+                        editContextRef.current) {
+                        editContextRef.current.operations.editField({
+                            field: {
+                                fieldId,
+                                fieldName: fieldElement?.getAttribute("data-fieldname") || undefined,
+                                item: { id: itemId, language, version },
                             },
-                            version: bridge.getDiagnostics().editorVersion,
-                            acknowledgedCapabilities: bridge.getAcknowledgedCapabilities(),
-                        });
-                        bridge.sendCommand("setZoom", {
-                            zoom: pageViewContextRef.current?.zoom ?? 1,
+                            originatingSlotId: slotContext?.slotId,
+                            refresh: "none",
+                            value: valueToSave,
                         });
-                        break;
-                    case "structureUpdated":
-                        pageViewContext.setBridgeStructure(event.payload.structure);
-                        break;
-                    case "pageSkeletonUpdated":
-                        pageViewContext.setPageSkeleton(event.payload.pageSkeleton);
-                        break;
-                    case "geometryUpdated":
-                        latestBridgeScrollRef.current = event.payload.geometry.scroll;
-                        pageViewContext.bridgeGeometry = event.payload.geometry;
-                        pageViewContext.setBridgeGeometry(event.payload.geometry);
-                        scheduleBridgeGeometryRevision();
-                        dispatchBridgeOverlayScroll(iframe, event.payload.geometry.scroll, getBridgeGeometryScrollScale(event.payload.geometry));
-                        dispatchBridgeOverlayGeometry(iframe, event.payload.geometry);
-                        if (shouldTrackMinimapScroll()) {
-                            scrollHandlerRef.current(event.payload.geometry.scroll.y);
-                        }
-                        break;
-                    case "domUpdated":
-                        pageViewContext.bridgeDom = event.payload;
-                        pageViewContext.setBridgeDom(event.payload);
-                        scheduleBridgeDomRevision();
-                        window.dispatchEvent(new CustomEvent(BRIDGE_DOM_UPDATED_EVENT));
-                        break;
-                    case "refreshStarted":
-                        clearBridgePatchSignatures();
-                        activeBridgeInlineEditRef.current = null;
-                        break;
-                    case "refreshCompleted":
-                        // Runtime refresh replaces host DOM without a new bridge ready event.
-                        // Field patches sent during the refresh window may have been cached
-                        // against the previous DOM generation, so force the refreshed host to
-                        // receive the current repository values again.
-                        clearBridgePatchSignatures();
-                        if (event.payload.structure) {
-                            pageViewContext.setBridgeStructure(event.payload.structure);
-                        }
-                        if (event.payload.geometry) {
-                            latestBridgeScrollRef.current = event.payload.geometry.scroll;
-                            pageViewContext.bridgeGeometry = event.payload.geometry;
-                            pageViewContext.setBridgeGeometry(event.payload.geometry);
-                            scheduleBridgeGeometryRevision();
-                            dispatchBridgeOverlayScroll(iframe, event.payload.geometry.scroll, getBridgeGeometryScrollScale(event.payload.geometry));
-                            dispatchBridgeOverlayGeometry(iframe, event.payload.geometry);
-                            if (shouldTrackMinimapScroll()) {
-                                scrollHandlerRef.current(event.payload.geometry.scroll.y);
-                            }
-                        }
-                        setShowSpinner(false);
-                        break;
-                    case "selectionChanged":
-                        pageViewContext.setBridgeSelection(event.payload.selection);
-                        handleBridgeSelection(event.payload.selection, iframe);
-                        break;
-                    case "fieldValueChanged":
-                        handleBridgeFieldValueChanged(event.payload);
-                        break;
-                    case "inlineEditEnded":
-                        handleBridgeInlineEditEnded(event.payload);
-                        activeBridgeInlineEditRef.current = null;
-                        break;
-                    case "interaction":
-                        pageViewContext.setBridgeInteraction(event.payload);
-                        void handleBridgeInteraction(event.payload, iframe);
-                        break;
-                    case "scrollChanged":
-                        latestBridgeScrollRef.current = event.payload.scroll;
-                        dispatchBridgeOverlayScroll(iframe, event.payload.scroll, getBridgeGeometryScrollScale(pageViewContextRef.current?.bridgeGeometry));
-                        if (shouldTrackMinimapScroll()) {
-                            scrollHandlerRef.current(event.payload.scroll.y);
-                        }
-                        break;
-                    case "renderError":
-                        console.warn("[Parhelia bridge] Host render error", event.payload);
-                        break;
+                    }
+                }
+                catch (error) {
+                    console.error("[PageViewerFrame] Failed to replace text:", error);
                 }
             },
         });
-        bridgeClientRef.current = client;
-        pageViewContext.setBridgeReady(false);
-        client.connect();
-        return () => {
-            if (bridgeClientRef.current === client) {
-                bridgeClientRef.current = null;
-            }
-            client.disconnect();
-            clearBridgePatchSignatures();
-            activeBridgeInlineEditRef.current = null;
-            pageViewContext.setBridgeReady(false);
-            pageViewContext.setIframeSupportsRefresh(false);
-        };
-    }, [
-        iframeElement,
-        iframeSrc,
-        loadedIframeSrc,
-        compareView,
-        handleBridgeFieldValueChanged,
-        handleBridgeInlineEditEnded,
-        handleBridgeInteraction,
-        handleBridgeSelection,
-        clearBridgePatchSignatures,
-        pageViewContext.editUrl,
-        pageViewContext.previewUrl,
-        scheduleBridgeDomRevision,
-        scheduleBridgeGeometryRevision,
-        shouldTrackMinimapScroll,
-    ]);
+    }, 300);
     useEffect(() => {
-        const repository = editContext.itemsRepository;
-        let disposed = false;
-        const unsubscribe = repository.subscribeItemsChanged((changes) => {
-            const fieldChanges = changes.filter((change) => change.action === "update" &&
-                (change.changes.fields?.length ?? 0) > 0);
-            if (fieldChanges.length === 0)
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return;
+        let boundDocument = null;
+        let boundDocumentElement = null;
+        let boundScrollContainer = null;
+        let mutationObserver = null;
+        const handleIframeMouseDown = async (event) => {
+            const target = event.target;
+            const targetElement = target;
+            if (editContextRef.current?.isRefreshing && showSpinner)
                 return;
-            const bridge = bridgeClientRef.current;
-            const structure = pageViewContextRef.current?.bridgeStructure;
-            if (!bridge || !structure?.fields.length)
+            // Activate the editor slot this iframe belongs to
+            const slotElement = iframe?.closest("[data-editor-slot]");
+            const slotId = slotElement?.getAttribute("data-slotid");
+            const activeSlotId = editContextRef.current?.getActiveSlotId?.() ??
+                editContextRef.current?.activeSlotId;
+            if (slotId && activeSlotId !== slotId) {
+                editContextRef.current?.setActiveSlot(slotId);
+            }
+            // Skip selection changes on right-click (button 2) - let context menu handler deal with it
+            if (event.button === 2)
                 return;
-            const processResolvedField = (change, changedFieldId, field) => {
-                if (disposed)
-                    return;
-                const patchedElementKeys = new Set();
-                const patches = [];
-                for (const structureField of structure.fields) {
-                    if (!structureField.elementKey)
-                        continue;
-                    if (patchedElementKeys.has(structureField.elementKey))
-                        continue;
-                    if (!bridgeDescriptorMatchesItem(structureField.item, change.item)) {
-                        continue;
+            const fieldElement = targetElement
+                ? findParentWithAttribute(targetElement, "data-fieldid")
+                : null;
+            const pageForSelection = pageViewContextRef.current?.page;
+            const fieldDescriptor = fieldElement?.hasAttribute("data-itemid")
+                ? getFieldDescriptorFromElement(fieldElement)
+                : undefined;
+            const componentIdFromField = fieldDescriptor && targetElement && pageForSelection
+                ? resolveComponentIdForFieldTarget(fieldDescriptor, targetElement, pageForSelection)
+                : undefined;
+            const rawComponentId = componentIdFromField ??
+                (targetElement
+                    ? findNearestEditableComponentId(targetElement)
+                    : undefined);
+            let componentId = rawComponentId;
+            if (!componentIdFromField && componentId && pageForSelection) {
+                componentId = resolveComponentIdForTarget(componentId, targetElement, pageForSelection);
+            }
+            // Layout components can still be selected even when showLayoutComponents is false
+            // They will be displayed in read-only mode
+            const currentOverlayName = editContextRef.current?.currentOverlay;
+            const isGeneratorOverlay = !!(currentOverlayName &&
+                typeof currentOverlayName === "string" &&
+                currentOverlayName.endsWith("_generators"));
+            // Don't close context-menu overlay on mousedown - let it handle its own closing
+            if (editContextRef.current?.currentOverlay &&
+                !isGeneratorOverlay &&
+                editContextRef.current.currentOverlay !== "context-menu")
+                editContextRef.current?.setCurrentOverlay(undefined);
+            if (componentId) {
+                const currentSelection = editContextRef.current?.selection || [];
+                if (event.shiftKey && currentSelection.length > 0) {
+                    const page = pageViewContextRef.current?.page;
+                    if (page) {
+                        // Build ordered list of visible component ids by DOM order
+                        const doc = getAccessibleIframeDocument(iframeRef.current, "PageViewerFrame.tsx:shift-select-doc");
+                        const orderedIds = [];
+                        if (doc) {
+                            const all = Array.from(doc.querySelectorAll("[data-component-id]"));
+                            for (const el of all) {
+                                const id = el.getAttribute("data-component-id");
+                                if (!id)
+                                    continue;
+                                // Layout components are now selectable even when showLayoutComponents is false
+                                orderedIds.push(id);
+                            }
+                        }
+                        const anchorId = currentSelection[currentSelection.length - 1];
+                        const aIdx = orderedIds.indexOf(anchorId);
+                        const bIdx = orderedIds.indexOf(componentId);
+                        if (aIdx !== -1 && bIdx !== -1) {
+                            const start = Math.min(aIdx, bIdx);
+                            const end = Math.max(aIdx, bIdx);
+                            const range = orderedIds.slice(start, end + 1);
+                            if (event.ctrlKey) {
+                                const union = new Set([...currentSelection, ...range]);
+                                editContextRef.current?.select(Array.from(union));
+                            }
+                            else {
+                                editContextRef.current?.select(range);
+                            }
+                        }
+                        else {
+                            editContextRef.current?.select([componentId]);
+                        }
                     }
-                    if (!bridgeFieldMatchesChangedField(structureField.fieldId, changedFieldId, field)) {
-                        continue;
+                    else {
+                        editContextRef.current?.select([componentId]);
                     }
-                    const patch = buildBridgeFieldPatch({
-                        field,
-                        structureField,
-                        itemDescriptor: change.item,
-                        preferRepositoryValue: change.source === "local-field-update",
-                    });
-                    if (!patch)
-                        continue;
-                    patchedElementKeys.add(structureField.elementKey);
-                    patches.push(patch);
-                }
-                for (const patch of patches) {
-                    if (disposed)
-                        return;
-                    const structureField = structure.fields.find((field) => field.elementKey === patch.elementKey &&
-                        field.fieldId === patch.fieldId);
-                    sendBridgeFieldPatch(bridge, patch, structureField?.textContent);
                 }
-            };
-            const asyncFieldChanges = [];
-            for (const change of fieldChanges) {
-                const localFieldsById = new Map((change.changes.fieldValues ?? []).map((field) => [
-                    field.id.toLowerCase(),
-                    field,
-                ]));
-                let needsAsyncLookup = false;
-                for (const changedFieldId of change.changes.fields ?? []) {
-                    if (disposed)
-                        return;
-                    const localField = localFieldsById.get(changedFieldId.toLowerCase());
-                    if (!localField) {
-                        needsAsyncLookup = true;
-                        continue;
+                else if (event.ctrlKey) {
+                    // Toggle selection: add if not selected, remove if already selected
+                    const idx = currentSelection.indexOf(componentId);
+                    if (idx === -1) {
+                        editContextRef.current?.select([...currentSelection, componentId]);
+                    }
+                    else {
+                        const newSelection = [...currentSelection];
+                        newSelection.splice(idx, 1);
+                        editContextRef.current?.select(newSelection);
                     }
-                    processResolvedField(change, changedFieldId, localField);
                 }
-                if (needsAsyncLookup) {
-                    asyncFieldChanges.push(change);
+                else {
+                    // Regular click: always select just this component
+                    editContextRef.current?.select([componentId]);
                 }
+                //  if (mode !== "edit") {
+                //editContextRef.current?.setScrollIntoView(componentId);
+                //}
             }
-            if (asyncFieldChanges.length === 0)
-                return;
-            void (async () => {
-                for (const change of asyncFieldChanges) {
-                    if (disposed)
-                        return;
-                    const item = await repository.getItem(change.item);
-                    for (const changedFieldId of change.changes.fields ?? []) {
-                        if (disposed)
+            else {
+                editContextRef.current?.select([]);
+            }
+            // Skip field focusing when using modifier keys for multi-selection
+            if (!event.ctrlKey &&
+                !event.shiftKey &&
+                ((editContextRef.current?.mode === "edit" &&
+                    pageViewContextRef.current?.page?.item.canWriteItem) ||
+                    editContextRef.current?.mode === "suggestions")) {
+                if (fieldElement?.hasAttribute("data-itemid")) {
+                    // Guard: if layout components are hidden, do not allow editing fields of layout components
+                    if (editContextRef.current?.showLayoutComponents === false &&
+                        pageViewContextRef.current?.page) {
+                        const owningItemId = fieldElement.getAttribute("data-itemid") || "";
+                        const ownerComponent = getComponentById(owningItemId, pageViewContextRef.current.page);
+                        if (ownerComponent?.layoutId) {
                             return;
-                        const field = change.changes.fieldValues?.find((candidate) => fieldIdentifierMatches(candidate, changedFieldId)) ??
-                            item?.fields.find((candidate) => fieldIdentifierMatches(candidate, changedFieldId)) ??
-                            (await repository.getField({
-                                fieldId: changedFieldId,
-                                item: change.item,
-                            }));
-                        if (!field)
-                            continue;
-                        processResolvedField(change, changedFieldId, field);
+                        }
+                    }
+                    blockBlurEventRef.current = Date.now() + 500;
+                    const shouldRequestLock = editContextRef.current?.mode !== "suggestions";
+                    const hasLock = (await fieldsContextRef.current?.setFocusedField(fieldDescriptor, shouldRequestLock)) ?? false;
+                    if (hasLock &&
+                        fieldsContextRef.current?.inlineEditingFieldElement !== fieldElement) {
+                        fieldsContextRef.current?.setInlineEditingFieldElement(fieldElement);
+                        // Don't prevent default - we want the browser's natural cursor positioning
                     }
                 }
-            })().catch((error) => {
-                if (!disposed) {
-                    console.warn("[Parhelia bridge] Failed to patch host field", error);
-                }
-            });
-        });
-        return () => {
-            disposed = true;
-            unsubscribe();
-        };
-    }, [
-        buildBridgeFieldPatch,
-        editContext.itemsRepository,
-        sendBridgeFieldPatch,
-    ]);
-    useEffect(() => {
-        const bridge = bridgeClientRef.current;
-        const structure = pageViewContext.bridgeStructure;
-        if (!pageViewContext.bridgeReady || !bridge || !structure?.fields.length) {
-            return;
-        }
-        let disposed = false;
-        void (async () => {
-            const patchedElementKeys = new Set();
-            for (const structureField of structure.fields) {
-                if (disposed)
-                    return;
-                if (!structureField.elementKey)
-                    continue;
-                if (patchedElementKeys.has(structureField.elementKey))
-                    continue;
-                const fallbackItem = pageViewContextRef.current?.pageItemDescriptor ??
-                    pageViewContextRef.current?.page?.item?.descriptor;
-                const bridgeItem = structureField.item;
-                const itemDescriptor = {
-                    id: bridgeItem?.id ?? fallbackItem?.id,
-                    language: bridgeItem?.language ?? fallbackItem?.language,
-                    version: typeof bridgeItem?.version === "number"
-                        ? bridgeItem.version
-                        : fallbackItem?.version,
-                };
-                if (!itemDescriptor.id ||
-                    !itemDescriptor.language ||
-                    typeof itemDescriptor.version !== "number") {
-                    continue;
+                else {
+                    // Clicked inside iframe but not on a field: clear focused field
+                    fieldsContextRef.current?.setFocusedField(undefined, false);
+                    fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
+                    // Release field locks when unfocusing field
+                    if (editContextRef.current?.unlockField) {
+                        editContextRef.current.unlockField(undefined);
+                    }
                 }
-                const loadedItem = await editContext.itemsRepository.getItem(itemDescriptor);
-                if (disposed || !loadedItem)
-                    continue;
-                const field = loadedItem.fields.find((candidate) => fieldIdentifierMatches(candidate, structureField.fieldId));
-                if (!field)
-                    continue;
-                const patch = buildBridgeFieldPatch({
-                    field,
-                    structureField,
-                    itemDescriptor: itemDescriptor,
-                });
-                if (!patch)
-                    continue;
-                patchedElementKeys.add(structureField.elementKey);
-                sendBridgeFieldPatch(bridge, patch, structureField.textContent);
             }
-        })().catch((error) => {
-            if (!disposed) {
-                console.warn("[Parhelia bridge] Failed to patch host suggestion display", error);
+            const clickEvent = new MouseEvent("click", {
+                view: window,
+                bubbles: true,
+                cancelable: true,
+                clientX: event.clientX,
+                clientY: event.clientY,
+            });
+            if (!isGeneratorOverlay) {
+                document.dispatchEvent(clickEvent);
             }
-        });
-        return () => {
-            disposed = true;
         };
-    }, [
-        buildBridgeFieldPatch,
-        editContext.itemsRepository,
-        editContext.itemsRepository.revision,
-        editContext.mode,
-        editContext.showSuggestedEdits,
-        editContext.suggestedEdits,
-        fieldsContext?.modifiedFields,
-        bridgeDomRevision,
-        pageViewContext.bridgeReady,
-        pageViewContext.bridgeStructure,
-        sendBridgeFieldPatch,
-    ]);
-    useEffect(() => {
-        const requestBridgeGeometry = (payload) => {
-            const bridge = bridgeClientRef.current;
-            if (!bridge)
-                return false;
-            // The editing host only remembers the most recent queryGeometry payload.
-            // Comments, suggestions, locks and version-diff each contribute text
-            // ranges independently, so without merging they clobbered one another and
-            // fought in an endless re-request loop (heavy highlight flicker). Keep the
-            // latest ranges per `source` and always query with their union.
-            if (payload && typeof payload.source === "string") {
-                const { source, textRanges, ...rest } = payload;
-                const sources = bridgeTextRangeSourcesRef.current;
-                if (textRanges && textRanges.length > 0) {
-                    sources.set(source, textRanges);
-                }
-                else {
-                    sources.delete(source);
-                }
-                const mergedTextRanges = Array.from(sources.values()).flat();
-                return (bridge.sendCommand("queryGeometry", {
-                    ...rest,
-                    textRanges: mergedTextRanges,
-                }) ?? false);
-            }
-            return bridge.sendCommand("queryGeometry", payload) ?? false;
+        const handleIframeScroll = () => {
+            const scrollTop = boundScrollContainer?.scrollTop || 0;
+            scrollHandler(scrollTop);
         };
-        pageViewContext.requestBridgeGeometry = requestBridgeGeometry;
-        const requestBridgeScrollBy = (payload) => {
-            return bridgeClientRef.current?.sendCommand("scrollBy", payload) ?? false;
+        const handleIframeWindowScroll = () => {
+            const scrollTop = boundScrollContainer?.scrollTop || 0;
+            scrollHandler(scrollTop);
         };
-        const requestBridgeRichTextCommand = (payload) => {
-            return (bridgeClientRef.current?.sendCommand("applyRichTextCommand", payload) ??
-                false);
+        const handleIframeWheel = (event) => {
+            if (!event.ctrlKey && !event.metaKey)
+                return;
+            if (event.deltaY === 0)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const zoomContext = (compareView ? slotContext?.primaryPageViewContext : undefined) ??
+                pageViewContextRef.current;
+            const direction = event.deltaY < 0 ? 1 : -1;
+            zoomContext?.setZoom((value) => clampEditorZoom(value + direction * ZOOM_STEP));
         };
-        pageViewContext.requestBridgeScrollBy = requestBridgeScrollBy;
-        pageViewContext.requestBridgeRichTextCommand = requestBridgeRichTextCommand;
-        return () => {
-            if (pageViewContext.requestBridgeGeometry === requestBridgeGeometry) {
-                pageViewContext.requestBridgeGeometry = undefined;
+        const handleIframeKeyDown = (event) => {
+            // Handle Ctrl+. keyboard shortcut to open AI text editor
+            // Forward this to the parent window since InlineAiTrigger listens there
+            const isCtrlPeriod = (event.ctrlKey || event.metaKey) && event.key === ".";
+            if (isCtrlPeriod) {
+                // Dispatch the inline-ai-open event on the parent window's document
+                // so InlineAiTrigger can catch it
+                const parentEvent = new CustomEvent("inline-ai-open", {
+                    bubbles: true,
+                    cancelable: true,
+                });
+                window.parent.document.dispatchEvent(parentEvent);
+                // Also prevent default to avoid any browser behavior
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            editContextRef.current?.handleKeyDown(event);
+            if (editContextRef.current?.mode === "suggestions") {
+                const target = event.target;
+                const fieldElement = target?.closest?.("[data-fieldid][data-itemid][data-language][data-version]");
+                if (fieldElement?.isContentEditable) {
+                    setTimeout(() => {
+                        const fieldId = fieldElement.getAttribute("data-fieldid");
+                        const fieldName = fieldElement.getAttribute("data-fieldname");
+                        const itemId = fieldElement.getAttribute("data-itemid");
+                        const language = fieldElement.getAttribute("data-language");
+                        const versionText = fieldElement.getAttribute("data-version");
+                        const version = versionText ? parseInt(versionText, 10) : undefined;
+                        if (!fieldId || !itemId || !language || !version)
+                            return;
+                        const isRichText = fieldElement.getAttribute("data-is-richtext") === "true";
+                        const value = (isRichText ? fieldElement.innerHTML : fieldElement.innerText).replaceAll("\u200B", "");
+                        editContextRef.current?.operations.editField({
+                            field: {
+                                fieldId,
+                                fieldName: fieldName ?? undefined,
+                                item: { id: itemId, language, version },
+                            },
+                            forceMode: "suggestions",
+                            originatingSlotId: slotContext?.slotId,
+                            refresh: "none",
+                            value,
+                        });
+                    }, 0);
+                }
             }
-            if (pageViewContext.requestBridgeScrollBy === requestBridgeScrollBy) {
-                pageViewContext.requestBridgeScrollBy = undefined;
+        };
+        const handleIframeBlur = () => {
+            // Block blur event if it was triggered by clicking on a field
+            if (blockBlurEventRef.current < Date.now()) {
+                // Only clear if the focus didn't move to the parent document (e.g. AI dialog)
+                // OR if we still have a selection range.
+                // We use a small timeout because document.activeElement might not be updated yet
+                setTimeout(() => {
+                    const activeEl = document.activeElement;
+                    const isDialog = activeEl?.closest(".agent-inline-dialog") ||
+                        activeEl?.closest('[role="dialog"]');
+                    const isTrigger = activeEl?.closest(".agent-inline-trigger");
+                    // If focus moved to dialog/trigger (e.g. inline AI), don't force a blur boundary yet.
+                    if (!isDialog && !isTrigger) {
+                        // Always mark a field blur operation boundary so consecutive edits do not
+                        // collapse into a single undo step when a selection range is still present.
+                        editContextRef.current?.operations.onFieldBlur?.();
+                        // Leaving the iframe ends inline editing even if we keep the
+                        // selection metadata. Suggestions mode relies on this blur
+                        // boundary so pending suggestions can be re-applied after focus
+                        // moves to the surrounding editor UI.
+                        fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
+                        fieldsContextRef.current?.setFocusedField(undefined, false);
+                    }
+                }, 100);
             }
-            if (pageViewContext.requestBridgeRichTextCommand ===
-                requestBridgeRichTextCommand) {
-                pageViewContext.requestBridgeRichTextCommand = undefined;
+            else {
+                blockBlurEventRef.current = 0;
             }
         };
-    }, [pageViewContext]);
-    useEffect(() => {
-        const requestBridgeCaptureDom = (payload) => {
-            const bridge = bridgeClientRef.current;
-            if (!bridge) {
-                return Promise.reject(new Error("The Parhelia bridge is not connected to the host."));
+        const handleIframeFocusOut = (event) => {
+            const target = event.target;
+            const fieldElement = target?.closest?.("[data-fieldid][data-itemid],[data-fieldname]");
+            if (!fieldElement)
+                return;
+            const nextFocusedElement = event.relatedTarget;
+            if (nextFocusedElement && fieldElement.contains(nextFocusedElement)) {
+                return;
             }
-            return bridge.requestCommand("captureDom", payload, "captureDomResult", {
-                requestId: payload.requestId,
-            });
+            editContextRef.current?.operations.onFieldBlur?.();
+            fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
+            fieldsContextRef.current?.setFocusedField(undefined, false);
         };
-        pageViewContext.requestBridgeCaptureDom = requestBridgeCaptureDom;
-        return () => {
-            if (pageViewContext.requestBridgeCaptureDom === requestBridgeCaptureDom) {
-                pageViewContext.requestBridgeCaptureDom = undefined;
+        const detachListeners = () => {
+            if (!iframe || !boundDocument || !boundDocumentElement)
+                return;
+            boundDocumentElement.removeEventListener("mousedown", handleIframeMouseDown);
+            boundDocumentElement.removeEventListener("click", handleIframeClick);
+            try {
+                iframe.contentWindow?.removeEventListener("contextmenu", handleContextMenu, true);
             }
+            catch { }
+            boundDocument.removeEventListener("selectionchange", selecionChangeHandler);
+            boundDocument.removeEventListener("keydown", handleIframeKeyDown);
+            boundDocument.removeEventListener("wheel", handleIframeWheel, true);
+            boundDocument.removeEventListener("focusout", handleIframeFocusOut, true);
+            boundDocumentElement.removeEventListener("blur", handleIframeBlur, true);
+            boundScrollContainer?.removeEventListener("scroll", handleIframeScroll);
+            try {
+                iframe.contentWindow?.removeEventListener("scroll", handleIframeWindowScroll);
+            }
+            catch { }
+            mutationObserver?.disconnect();
+            mutationObserver = null;
+            boundScrollContainer = null;
+            boundDocumentElement = null;
+            boundDocument = null;
         };
-    }, [pageViewContext]);
-    const updateMiniMapVisibility = useDebouncedCallback(() => {
-        if (!iframeRef.current)
-            return;
-        const iframe = iframeRef.current;
-        const bridgeGeometry = pageViewContextRef.current?.bridgeGeometry;
-        const bridgeDom = pageViewContextRef.current?.bridgeDom;
-        const contentHeight = bridgeDom?.scrollHeight ??
-            getBridgeGeometryDocumentSize(bridgeGeometry)?.height;
-        const clientHeight = iframe.clientHeight;
-        if (!contentHeight || !clientHeight)
-            return;
-        const upperThreshold = clientHeight + 100; // show minimap if content exceeds this height
-        const lowerThreshold = clientHeight; // hide minimap if content falls below this
-        // Check if minimap is enabled in settings and user controls
-        const minimapEnabled = editContext.parheliaSettings?.showMinimap !== false &&
-            editContext.showMinimap;
-        if (showMiniMap) {
-            if (contentHeight <= lowerThreshold || !minimapEnabled) {
-                setShowMiniMap(false);
+        const attachListeners = () => {
+            // The iframe may navigate to a different origin (e.g. an auth redirect),
+            // in which case reading contentDocument/contentWindow.document throws a
+            // SecurityError. Treat that as an inaccessible frame and skip wiring up
+            // listeners instead of letting the exception unwind into React.
+            const iframeDocument = getAccessibleIframeDocument(iframe, "PageViewerFrame.tsx:attachListeners-document-access");
+            const iframeDocumentElement = iframeDocument?.documentElement;
+            if (!iframeDocument || !iframeDocumentElement)
+                return;
+            // Skip if already bound to current root element.
+            if (boundDocument === iframeDocument &&
+                boundDocumentElement === iframeDocumentElement) {
+                return;
             }
-        }
-        else {
-            if (contentHeight > upperThreshold && minimapEnabled) {
-                setShowMiniMap(true);
+            detachListeners();
+            boundDocument = iframeDocument;
+            boundDocumentElement = iframeDocumentElement;
+            iframeDocumentElement.addEventListener("mousedown", handleIframeMouseDown);
+            iframeDocumentElement.addEventListener("click", handleIframeClick);
+            try {
+                iframe.contentWindow?.addEventListener("contextmenu", handleContextMenu, true);
             }
-        }
-    }, 100);
-    useEffect(() => {
-        updateMiniMapVisibility();
-    }, [
-        bridgeDomRevision,
-        bridgeGeometryRevision,
-        editContext.parheliaSettings?.showMinimap,
-        editContext.showMinimap,
-        iframeElement,
-        showMiniMap,
-        updateMiniMapVisibility,
-    ]);
-    // If the editor mode flips into preview, clear any active text selection state.
-    useEffect(() => {
-        const isPreview = editContext.mode === "preview";
-        if (isPreview) {
-            editContextRef.current?.setSelectedRange(undefined);
-        }
-    }, [editContext.mode]);
-    useEffect(() => {
-        if (!pageItemDescriptor ||
-            !pageViewContext.editUrl ||
-            !pageViewContext.previewUrl)
-            return;
-        const urlPath = editContext.mode === "preview"
-            ? pageViewContext.previewUrl
-            : pageViewContext.editUrl;
-        const renderUrl = new URL(urlPath, window.location.origin);
-        alignLoopbackHostToEditor(renderUrl);
-        const editRev = uuid();
-        renderUrl.searchParams.set("edit_rev", editRev);
-        if (editContext.mode !== "preview" && editContext.sessionId) {
-            renderUrl.searchParams.set("parhelia_session", editContext.sessionId);
-        }
-        if (editContext.mode === "preview" && editContext.previewDate) {
-            renderUrl.searchParams.delete("sc_version");
-            renderUrl.searchParams.set("sc_date", toSitecoreDate(editContext.previewDate));
-        }
-        // Layout-mode marker. Only set when editing shared layout, paired with the
-        // `parhelia` editor marker so ParheliaSetLayoutRenderings ignores any unrelated
-        // requests that happen to carry parhelia_layout.
-        if (editContext.mode !== "preview" && editContext.layoutMode === "shared") {
-            renderUrl.searchParams.set("parhelia", "1");
-            renderUrl.searchParams.set("parhelia_layout", "shared");
-        }
-        else {
-            renderUrl.searchParams.delete("parhelia_layout");
-        }
-        // 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 currentIframeOrigin = getUrlOrigin(currentIframeUrl);
-        const renderUrlIsCrossOrigin = renderUrl.origin !== window.location.origin;
-        const iframeOriginChanged = !!(currentIframeOrigin && currentIframeOrigin !== renderUrl.origin);
-        const currentVersion = currentIframeUrl
-            ? new URL(currentIframeUrl).searchParams.get("sc_version")
-            : null;
-        const newVersion = renderUrl.searchParams.get("sc_version");
-        const versionChanged = (currentVersion !== null || newVersion !== null) &&
-            currentVersion !== newVersion;
-        const initialLoad = currentItemDescriptor?.id !== pageItemDescriptor.id ||
-            currentItemDescriptor?.language !== pageItemDescriptor.language ||
-            currentItemDescriptor?.version !== pageItemDescriptor.version;
-        const shouldUseIframeSrcReload = initialLoad || pageViewContext.fullscreen || iframeOriginChanged;
-        function runFallbackRefresh() {
-            pageViewContext.setIframeSupportsRefresh(false);
-            setShowSpinner(true);
-            console.log(initialLoad
-                ? "Initial load - setting iframe src"
-                : renderUrlIsCrossOrigin
-                    ? "Cross-origin load - setting iframe src"
-                    : iframeOriginChanged
-                        ? "Iframe origin changed - setting iframe src"
-                        : "Reloading iframe src");
-            setLoadedIframeSrc(undefined);
-            setIframeSrc(renderUrl.toString());
-        }
-        function runBridgeRefresh() {
-            const bridge = bridgeClientRef.current;
-            if (!bridge?.supportsCapability("refresh")) {
-                runFallbackRefresh();
-                return;
+            catch { }
+            boundScrollContainer =
+                iframeDocument.scrollingElement || iframeDocument.body || null;
+            boundScrollContainer?.addEventListener("scroll", handleIframeScroll);
+            try {
+                iframe.contentWindow?.addEventListener("scroll", handleIframeWindowScroll);
             }
-            console.log("Bridge - requesting iframe refresh");
-            pageViewContext.setIframeSupportsRefresh(true);
-            const accepted = bridge.sendCommand("refresh", {
-                url: renderUrl.toString(),
-                revision: editContext.revision,
-                layoutKind: editContext.layoutMode,
+            catch { }
+            iframeDocument.addEventListener("selectionchange", selecionChangeHandler);
+            iframeDocument.addEventListener("keydown", handleIframeKeyDown);
+            iframeDocument.addEventListener("wheel", handleIframeWheel, {
+                capture: true,
+                passive: false,
             });
-            if (!accepted) {
-                pageViewContext.setIframeSupportsRefresh(false);
-                runFallbackRefresh();
+            iframeDocument.addEventListener("focusout", handleIframeFocusOut, true);
+            iframeDocumentElement.addEventListener("blur", handleIframeBlur, true);
+            mutationObserver = new MutationObserver((records) => {
+                // Ignore all text field edits
+                if (records.some((x) => !(x &&
+                    "getAttribute" in x.target &&
+                    x.target.getAttribute("data-fieldid") &&
+                    x.target.getAttribute("data-itemid")))) {
+                    requestPageModelBuild(iframeDocument);
+                }
+            });
+            mutationObserver.observe(iframeDocument, {
+                childList: true, // observe direct children changes
+                subtree: true, // observe all descendants changes
+                characterData: false, // observe text changes
+                //attributes: true, // observe attribute changes (like style or class)
+            });
+            requestPageModelBuild(iframeDocument);
+        };
+        const parsePositiveInt = (value) => {
+            if (!value)
+                return undefined;
+            const parsed = parseInt(value, 10);
+            return Number.isFinite(parsed) ? parsed : undefined;
+        };
+        const resolveLinkedItemDescriptor = (anchor, clickedElement) => {
+            const href = anchor.getAttribute("href") || anchor.href;
+            let hrefUrl;
+            try {
+                hrefUrl = new URL(anchor.href, getAccessibleIframeLocationHref(iframe) || window.location.href);
             }
-        }
-        if (!shouldUseIframeSrcReload && !versionChanged) {
-            if (bridgeClientRef.current?.supportsCapability("refresh")) {
-                runBridgeRefresh();
+            catch {
+                return undefined;
             }
-            else {
-                const retryDelayMs = 150;
-                const retryTimer = setTimeout(() => {
-                    runBridgeRefresh();
-                }, retryDelayMs);
-                setCurrentItemDescriptor(pageItemDescriptor);
-                return () => clearTimeout(retryTimer);
+            const attributeContainer = clickedElement?.closest("[data-itemid],[data-language],[data-version],[sc_item],[sc_itemid],[sc_lang]") || anchor;
+            // Parse Sitecore RTE format first: ~/link.aspx?_id=GUID&_z=z (target item, not the containing component)
+            let itemIdRaw;
+            if (href.includes("~/link.aspx?_id=") ||
+                href.includes("link.aspx?_id=")) {
+                const idFromUrl = hrefUrl.searchParams.get("_id");
+                if (idFromUrl) {
+                    // Convert compact GUID (AD973E51E8454BD2B333859375FBBA24) to standard format with dashes
+                    itemIdRaw = idFromUrl
+                        .replace(/^(\w{8})(\w{4})(\w{4})(\w{4})(\w{12})$/i, "$1-$2-$3-$4-$5")
+                        .toLowerCase();
+                }
             }
-        }
-        else {
-            runFallbackRefresh();
-        }
-        setCurrentItemDescriptor(pageItemDescriptor);
-    }, [
-        pathname,
-        editContext.revision,
-        pageItemDescriptor,
-        pageViewContext.editUrl,
-        pageViewContext.previewUrl,
-        pageViewContext.fullscreen,
-        editContext.mode,
-        editContext.previewDate,
-        editContext.sessionId,
-        editContext.layoutMode,
-    ]);
-    useEffect(() => {
-        if (fieldsContext?.focusedField) {
-            if (editContext.selection.length > 0 &&
-                fieldsContext.focusedField.item.id !== editContext.selection[0])
+            if (!itemIdRaw) {
+                itemIdRaw =
+                    hrefUrl.searchParams.get("sc_itemid") ??
+                        hrefUrl.searchParams.get("itemid") ??
+                        anchor.getAttribute("data-itemid") ??
+                        anchor.getAttribute("sc_itemid") ??
+                        attributeContainer?.getAttribute("data-itemid") ??
+                        attributeContainer?.getAttribute("sc_itemid") ??
+                        (anchor.getAttribute("sc_item")
+                            ? extractItemIdFromItemUri(anchor.getAttribute("sc_item"))
+                            : undefined) ??
+                        (attributeContainer?.getAttribute("sc_item")
+                            ? extractItemIdFromItemUri(attributeContainer.getAttribute("sc_item"))
+                            : undefined);
+            }
+            const itemId = cleanId(itemIdRaw);
+            if (!itemId)
+                return undefined;
+            const language = hrefUrl.searchParams.get("sc_lang") ??
+                hrefUrl.searchParams.get("lang") ??
+                hrefUrl.searchParams.get("language") ??
+                anchor.getAttribute("data-language") ??
+                anchor.getAttribute("sc_lang") ??
+                attributeContainer?.getAttribute("data-language") ??
+                attributeContainer?.getAttribute("sc_lang") ??
+                editContextRef.current?.currentItemDescriptor?.language ??
+                editContextRef.current?.item?.language;
+            if (!language)
+                return undefined;
+            const version = parsePositiveInt(hrefUrl.searchParams.get("sc_version")) ??
+                parsePositiveInt(hrefUrl.searchParams.get("version")) ??
+                parsePositiveInt(anchor.getAttribute("data-version")) ??
+                parsePositiveInt(attributeContainer?.getAttribute("data-version")) ??
+                editContextRef.current?.currentItemDescriptor?.version ??
+                editContextRef.current?.item?.version ??
+                0;
+            return {
+                id: itemId,
+                language,
+                version,
+            };
+        };
+        const handleIframeClick = async (event) => {
+            const target = event.target;
+            if (!target)
+                return;
+            const anchor = target.tagName.toLowerCase() === "a"
+                ? target
+                : target.closest("a");
+            if (!anchor)
+                return;
+            const href = anchor.getAttribute("href") || anchor.href;
+            if (!href || href.startsWith("#") || href.startsWith("javascript:")) {
                 return;
-            const bounds = findBridgeFieldDocumentBounds(pageViewContextRef.current?.bridgeGeometry, fieldsContext.focusedField);
-            const activePageViewContext = pageViewContextRef.current;
-            if (bounds && activePageViewContext) {
-                scrollBridgeBoundsIntoView(activePageViewContext, bounds, latestBridgeScrollRef.current);
             }
-        }
-    }, [fieldsContext?.focusedField]);
-    useEffect(() => {
-        const selectionKey = editContext.selection.join("|");
-        const selectionChanged = selectionKey !== lastScrolledSelectionKeyRef.current;
-        lastScrolledSelectionKeyRef.current = selectionKey;
-        // The effect also re-runs when focusedField changes (e.g. a field blurs
-        // after a click). Only the selection actually changing should drive an
-        // auto-scroll; otherwise a blur re-render scrolls the just-clicked
-        // component away.
-        if (!selectionChanged)
-            return;
-        if (suppressNextSelectionScrollRef.current) {
-            suppressNextSelectionScrollRef.current = false;
-            return;
-        }
-        if (!fieldsContext?.focusedField && editContext.selection.length > 0) {
-            const lastSelectedComponent = getComponentById(editContext.selection[editContext.selection.length - 1], pageViewContextRef.current.page);
-            if (lastSelectedComponent) {
-                editContext.setScrollIntoView(lastSelectedComponent.id);
+            const mode = editContextRef.current?.mode;
+            const isPreviewOrSuggestions = mode === "preview" || mode === "suggestions";
+            if (isPreviewOrSuggestions) {
+                let hrefUrl;
+                try {
+                    hrefUrl = new URL(anchor.href, getAccessibleIframeLocationHref(iframe) || window.location.href);
+                }
+                catch {
+                    return;
+                }
+                const iframeOrigin = getAccessibleIframeLocationOrigin(iframe);
+                const isInternalLink = hrefUrl.origin === window.location.origin ||
+                    (iframeOrigin ? hrefUrl.origin === iframeOrigin : false);
+                if (!isInternalLink) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    window.open(hrefUrl.toString(), "_blank", "noopener,noreferrer");
+                    return;
+                }
+                if (isInternalLink) {
+                    const linkedItem = resolveLinkedItemDescriptor(anchor, target);
+                    if (linkedItem) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        await editContextRef.current?.loadItem(linkedItem, {
+                            openInNewSlot: event.altKey,
+                        });
+                        return;
+                    }
+                }
+                // If this link cannot be resolved to an item, allow browser behavior.
+                return;
             }
-        }
-    }, [editContext.selection, fieldsContext?.focusedField]);
-    useEffect(() => {
-        if (!editContext.scrollIntoView)
-            return;
-        const activePageViewContext = pageViewContextRef.current;
-        if (!activePageViewContext)
-            return;
-        const bounds = findBridgeComponentDocumentBounds(activePageViewContext.bridgeGeometry, editContext.scrollIntoView);
-        if (bounds) {
-            scrollBridgeBoundsIntoView(activePageViewContext, bounds, latestBridgeScrollRef.current);
-        }
-        editContext.setScrollIntoView(undefined);
-    }, [editContext.scrollIntoView, pageViewContext.page]);
-    useEffect(() => {
-        const handleMessage = (message) => {
-            if (message.origin !== window.location.origin)
+            // In edit mode, keep navigation inside iframe disabled.
+            event.preventDefault();
+        };
+        const handleContextMenu = async (event) => {
+            if (editContextRef.current?.isRefreshing && showSpinner)
                 return;
-            if (message.data.type === "editor-exitFullscreen") {
-                pageViewContext.setFullscreen(false);
+            const target = event.target;
+            if (!target)
+                return;
+            if (event.ctrlKey)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            let componentId = findNearestEditableComponentId(target);
+            const pageForContextMenu = pageViewContextRef.current?.page;
+            if (componentId && pageForContextMenu) {
+                componentId = resolveComponentIdForTarget(componentId, target, pageForContextMenu);
             }
-            if (message.data.type === "editor-timings") {
-                editContext.setTimings(message.data.timings);
+            // Layout components can now be right-clicked even when showLayoutComponents is false
+            // Context menu will show limited/read-only actions
+            if (componentId) {
+                // Only change selection if right-clicking on a component that's not in the current selection
+                if (!editContextRef.current?.selection.includes(componentId)) {
+                    // Right-clicking on a component not in the selection - select just that component
+                    editContextRef.current.select([componentId]);
+                }
+                // else: right-clicking on a component already in the selection - keep current selection
             }
+            const fieldElement = findParentWithAttribute(target, "data-fieldid");
+            const selectedComponents = editContextRef.current?.selection
+                .map((id) => getComponentById(id, pageViewContextRef.current.page))
+                .filter((x) => x);
+            // Context menu will now show for layout components even when showLayoutComponents is false
+            // Commands will be appropriately filtered/disabled
+            const iframeRect = iframe.getBoundingClientRect();
+            const adjustedEvent = new MouseEvent("contextmenu", {
+                bubbles: true,
+                cancelable: true,
+                shiftKey: event.shiftKey,
+                altKey: event.altKey,
+                ctrlKey: event.ctrlKey,
+                view: window,
+                clientX: event.clientX + iframeRect.x,
+                clientY: event.clientY + iframeRect.y,
+            });
+            // Store the original context menu position for overlay positioning
+            const menuPosition = {
+                x: event.clientX + iframeRect.x,
+                y: event.clientY + iframeRect.y,
+            };
+            setContextMenuPosition(menuPosition);
+            // Only show a spinner if work takes longer than 100ms
+            let loadingShown = false;
+            const loadingTimer = setTimeout(() => {
+                loadingShown = true;
+                editContextRef.current?.showContextMenu(adjustedEvent, [
+                    {
+                        id: "loading",
+                        label: "Loading…",
+                        disabled: true,
+                        icon: _jsx(Spinner, { size: "sm", className: "mr-2" }),
+                    },
+                ]);
+            }, 100);
+            const field = fieldElement
+                ? getFieldDescriptorFromElement(fieldElement)
+                : undefined;
+            const fieldButtons = field ? await loadFieldButtons(field) : [];
+            // Create a handler that has access to the current menu position
+            const handleParameterizedActionWithPosition = (field, action, allFieldButtons, event) => {
+                setContextMenuField(field);
+                setContextMenuFieldButtons([action]);
+                setPreSelectedAction(action);
+                // Create a new MouseEvent with the captured position
+                const syntheticEvent = new MouseEvent("click", {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window,
+                    clientX: menuPosition.x,
+                    clientY: menuPosition.y,
+                    screenX: menuPosition.x,
+                    screenY: menuPosition.y,
+                });
+                // Add target property to the event for proper positioning
+                Object.defineProperty(syntheticEvent, "target", {
+                    value: document.body,
+                    enumerable: true,
+                });
+                console.log("About to show overlay with position:", {
+                    menuPosition,
+                    syntheticEvent,
+                    preSelectedAction: action,
+                });
+                // Add a small delay to ensure context menu has closed
+                setTimeout(() => {
+                    console.log("Showing overlay with position:", {
+                        menuPosition,
+                        syntheticEvent,
+                        preSelectedAction: action,
+                    });
+                    // Create a temporary element at the exact position for better positioning
+                    const tempElement = document.createElement("div");
+                    tempElement.style.position = "fixed";
+                    tempElement.style.left = menuPosition.x + "px";
+                    tempElement.style.top = menuPosition.y + "px";
+                    tempElement.style.width = "1px";
+                    tempElement.style.height = "1px";
+                    tempElement.style.visibility = "hidden";
+                    tempElement.style.pointerEvents = "none";
+                    document.body.appendChild(tempElement);
+                    // Create event targeting the positioned element
+                    const positionedEvent = new MouseEvent("click", {
+                        bubbles: true,
+                        cancelable: true,
+                        view: window,
+                        clientX: menuPosition.x,
+                        clientY: menuPosition.y,
+                    });
+                    Object.defineProperty(positionedEvent, "target", {
+                        value: tempElement,
+                        enumerable: true,
+                    });
+                    fieldActionsOverlay.current?.show(positionedEvent, action);
+                    // Clean up the temporary element after overlay is shown
+                    setTimeout(() => {
+                        document.body.removeChild(tempElement);
+                    }, 1000);
+                }, 100);
+            };
+            const items = await buildComponentContextMenuItems(selectedComponents, editContextRef.current, field, fieldButtons, handleParameterizedActionWithPosition);
+            clearTimeout(loadingTimer);
+            if (loadingShown)
+                editContextRef.current?.updateContextMenu(items);
+            else
+                editContextRef.current?.showContextMenu(adjustedEvent, items);
         };
-        window.addEventListener("message", handleMessage);
-        return () => {
-            window.removeEventListener("message", handleMessage);
-        };
-    }, []);
-    useEffect(() => {
-        const iframe = iframeRef.current;
-        if (!iframe)
-            return;
         const handleLoad = () => {
+            // Skip handling if this load does not correspond to the latest requested revision
+            const expectedRevision = currentLoadRef.current?.revision ?? "";
+            const currentRevision = editContextRef.current?.revision ?? "";
+            if (expectedRevision && expectedRevision !== currentRevision) {
+                console.log("Stale load skipped", {
+                    expectedRevision,
+                    currentRevision,
+                });
+                return;
+            }
             setShowSpinner(false);
             applyIframeZoom(iframe, pageViewContextRef.current?.zoom ?? 1, "PageViewerFrame.tsx:handleLoad-zoom");
+            attachListeners();
         };
-        iframe.addEventListener("load", handleLoad);
-        return () => {
-            iframe.removeEventListener("load", handleLoad);
-        };
-    }, [iframeElement]);
-    useEffect(() => {
-        const iframe = iframeRef.current;
-        if (!iframe || typeof ResizeObserver === "undefined")
-            return;
-        let lastWidth = iframe.clientWidth;
-        let lastHeight = iframe.clientHeight;
-        let geometryTimer = null;
-        let trailingGeometryTimer = null;
-        const requestGeometry = () => {
-            geometryTimer = null;
-            const nextWidth = iframe.clientWidth;
-            const nextHeight = iframe.clientHeight;
-            if (nextWidth === lastWidth && nextHeight === lastHeight)
-                return;
-            lastWidth = nextWidth;
-            lastHeight = nextHeight;
-            bridgeClientRef.current?.sendCommand("queryGeometry", {});
-        };
-        const scheduleGeometryRequest = () => {
-            if (geometryTimer != null) {
-                window.clearTimeout(geometryTimer);
-            }
-            if (trailingGeometryTimer != null) {
-                window.clearTimeout(trailingGeometryTimer);
+        rebindIframeInteractionsRef.current = attachListeners;
+        if (iframe) {
+            // If the iframe is already loaded, attach the listener immediately
+            const iframeDoc = getAccessibleIframeDocument(iframe, "PageViewerFrame.tsx:initial-attach-ready-state");
+            if (iframeDoc?.readyState === "complete" ||
+                iframeDoc?.readyState === "interactive") {
+                handleLoad();
             }
-            geometryTimer = window.setTimeout(requestGeometry, 50);
-            trailingGeometryTimer = window.setTimeout(() => {
-                trailingGeometryTimer = null;
-                requestGeometry();
-            }, ZOOM_TRANSITION_MS + 75);
-        };
-        const resizeObserver = new ResizeObserver(scheduleGeometryRequest);
-        resizeObserver.observe(iframe);
+            iframe.addEventListener("load", handleLoad);
+        }
+        // Cleanup function
         return () => {
-            resizeObserver.disconnect();
-            if (geometryTimer != null) {
-                window.clearTimeout(geometryTimer);
-            }
-            if (trailingGeometryTimer != null) {
-                window.clearTimeout(trailingGeometryTimer);
+            rebindIframeInteractionsRef.current = null;
+            if (iframe) {
+                iframe.removeEventListener("load", handleLoad);
             }
+            detachListeners();
         };
-    }, [iframeElement]);
+    }, [iframeRef.current]);
     useEffect(() => {
-        bridgeClientRef.current?.sendCommand("setSelection", {
-            componentIds: editContext.selection,
-        });
+        try {
+            iframeRef.current?.contentWindow?.postMessage({ type: "componentsSelected", componentIds: editContext.selection }, window.location.origin);
+        }
+        catch { }
     }, [editContext.selection]);
-    useEffect(() => {
-        const bridge = bridgeClientRef.current;
-        bridge?.sendCommand("setPreviewMode", {
-            enabled: editContext.mode === "preview",
-        });
-        bridge?.sendCommand("setEditorMode", {
-            mode: editContext.mode,
-        });
-    }, [editContext.mode]);
-    useEffect(() => {
-        bridgeClientRef.current?.sendCommand("setLayoutKind", {
-            layoutKind: editContext.layoutMode,
-        });
-    }, [editContext.layoutMode]);
+    const updateScrollPosition = (e) => {
+        const shouldTrackMinimapScroll = showMiniMap &&
+            editContextRef.current?.showMinimap &&
+            !editContextRef.current?.isMobile &&
+            editContextRef.current?.parheliaSettings?.showMinimap !== false;
+        if (!shouldTrackMinimapScroll)
+            return;
+        setScroll(e);
+        if (!compareView)
+            pageViewContextRef.current?.setScroll(e);
+    };
     useEffect(() => {
         applyIframeZoom(iframeRef.current, zoom, "PageViewerFrame.tsx:zoom-doc");
-        bridgeClientRef.current?.sendCommand("setZoom", { zoom });
-        const geometryTimer = window.setTimeout(() => {
-            bridgeClientRef.current?.sendCommand("queryGeometry", {});
-        }, ZOOM_TRANSITION_MS + 75);
-        return () => {
-            window.clearTimeout(geometryTimer);
-        };
-    }, [zoom]);
-    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);
-        return () => {
-            if (geometryTimer != null) {
-                window.clearTimeout(geometryTimer);
-            }
-            window.removeEventListener(DEVICE_CHANGE_EVENT, sendViewportStateToBridge);
-        };
     }, [zoom]);
+    const scrollHandler = useThrottledCallback(updateScrollPosition, 100);
     if (pageViewContext.page?.item && !pageViewContext.page?.item.hasLayout) {
         return _jsx(NoLayout, {});
     }
@@ -1729,27 +1473,265 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             "px";
     return (_jsxs("div", { 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.device !== "desktop" && (_jsx(DeviceToolbar, { pageViewContext: pageViewContext, configuration: editContext.configuration })), _jsxs("div", { className: "relative flex flex-1 transition-[width] duration-300 ease-in-out select-none motion-reduce:transition-none", "data-testid": "page-viewer-viewport", style: {
                     width: deviceWidth,
-                }, children: [_jsxs("div", { className: "relative h-full w-full overflow-hidden", 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 }, src: iframeSrc, "data-testid": "pageEditoriframe", onLoad: () => {
-                                    const loadedSrc = iframeRef.current?.src;
-                                    if (loadedSrc) {
-                                        setLoadedIframeSrc(loadedSrc);
-                                    }
-                                    const sendZoomToBridge = () => {
-                                        bridgeClientRef.current?.sendCommand("setZoom", {
-                                            zoom: pageViewContextRef.current?.zoom ?? zoom,
-                                        });
-                                    };
-                                    sendZoomToBridge();
-                                    window.setTimeout(sendZoomToBridge, 100);
-                                    window.setTimeout(sendZoomToBridge, 500);
-                                    if (iframeSrc) {
+                }, children: [_jsxs("div", { className: "relative h-full w-full overflow-hidden", children: [_jsx("iframe", { ref: iframeRef, className: "page-iframe h-full w-full bg-white transition-[height] duration-300 ease-in-out motion-reduce:transition-none", style: { height: deviceHeight }, src: iframeSrc, "data-testid": "pageEditoriframe", onLoad: () => {
+                                    // Handle iframe load when using src attribute (initial load)
+                                    const doc = getAccessibleIframeDocument(iframeRef.current, "PageViewerFrame.tsx:onLoad-doc");
+                                    if (doc && iframeSrc) {
                                         setShowSpinner(false);
+                                        ensureEditorCssGuard(doc, editContext.mode !== "preview");
                                         applyIframeZoom(iframeRef.current, zoom, "PageViewerFrame.tsx:onLoad-zoom");
+                                        setTimeout(() => {
+                                            injectSXAScripts(iframeRef.current);
+                                        }, 1000);
+                                        requestPageModelBuild(doc);
                                     }
-                                } }), iframeElement && (_jsx(IframeOverlayProvider, { iframe: iframeElement, mode: "scrolling", scrollScale: 1, visualScale: 1, invalidationKey: `${zoom}:${bridgeGeometryRevision}`, deferredInvalidationMs: ZOOM_TRANSITION_MS + 50, children: _jsx(PageEditorChrome, { iframe: iframeElement, compareView: compareView, pageViewContext: pageViewContext, onBridgeRichTextCommand: sendApplyRichTextCommand }) })), pageViewContext.deviceHeight && pageViewContext.device && (_jsx("div", { className: "bg-neutral-grey-5 relative z-40 h-full w-full" }))] }), !pageViewContext.fullscreen &&
+                                } }), iframeRef.current && (_jsx(IframeOverlayProvider, { iframe: iframeRef.current, mode: "scrolling", scrollScale: 1, visualScale: 1, children: _jsx(PageEditorChrome, { iframe: iframeRef.current, compareView: compareView, pageViewContext: pageViewContext }) })), pageViewContext.deviceHeight && pageViewContext.device && (_jsx("div", { className: "bg-neutral-grey-5 relative z-40 h-full w-full" }))] }), !pageViewContext.fullscreen &&
                         showMiniMap &&
                         editContext.showMinimap &&
                         !editContext.isMobile &&
-                        editContext.parheliaSettings?.showMinimap !== false && (_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 })] }));
+                        editContext.parheliaSettings?.showMinimap !== false && (_jsx(MiniMap, { compareView: compareView, scroll: scroll, mainViewIframeRef: iframeRef, pageViewContext: pageViewContext, deviceHeight: pageViewContext.device === "desktop"
+                            ? undefined
+                            : pageViewContext.deviceHeight })), 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, iframe: iframeRef.current })] }));
+}
+/**
+ * In preview mode, disable editing in the iframe: set contentEditable=false on all
+ * editable elements and blur the active element so the caret is removed and typing does nothing.
+ */
+function disableEditingInIframeDocument(doc) {
+    if (!doc || !doc.body)
+        return;
+    const editable = doc.querySelectorAll("[contenteditable='true'], [contenteditable='']");
+    editable.forEach((el) => {
+        el.contentEditable = "false";
+    });
+    const active = doc.activeElement;
+    if (active?.isContentEditable) {
+        active.blur();
+    }
+}
+function injectEditorCSS(iframeDocument, editMode) {
+    if (!iframeDocument)
+        return;
+    const styleId = EDITOR_CSS_STYLE_ID;
+    // Remove existing style element if present to avoid duplicates
+    const existingStyle = iframeDocument.getElementById(styleId);
+    if (existingStyle) {
+        existingStyle.remove();
+    }
+    const style = iframeDocument.createElement("style");
+    style.id = styleId;
+    style.textContent = editMode
+        ? `[contentEditable]:empty:before {
+    content: attr(placeholder);
+    opacity: 0.6;
+  }
+
+  .scChromeData, code {
+    display: none;
+  }
+
+  [contenteditable] {
+    outline: 0px solid transparent;
+  }
+
+  [data-fieldid][data-itemid][data-language][data-version][data-is-richtext="true"] {
+    cursor: text;
+  }
+      `
+        : `
+ [contenteditable] {
+    outline: 0px solid transparent;
+  }
+  .scChromeData, code {
+    display: none;
+  }
+`;
+    if (iframeDocument && iframeDocument.head) {
+        iframeDocument.head.appendChild(style);
+    }
+    if (!editMode) {
+        disableEditingInIframeDocument(iframeDocument);
+    }
+}
+function resolveComponentIdForTarget(rawId, target, page) {
+    const direct = getComponentById(rawId, page);
+    const candidates = getAllComponentInstances(rawId, page);
+    if (candidates.length === 0) {
+        return direct?.id || rawId;
+    }
+    const containing = candidates.filter((component) => isTargetInsideComponent(target, component));
+    if (containing.length === 0) {
+        return direct?.id || candidates[0].id;
+    }
+    // Prefer the deepest/most specific matching component for nested SXA markup.
+    containing.sort((a, b) => getElementDepth(b.firstDOMElement || null) -
+        getElementDepth(a.firstDOMElement || null));
+    return containing[0].id;
+}
+function resolveComponentIdForFieldTarget(field, target, page) {
+    const matches = findComponentsRenderingField(field, page);
+    const containingMatches = matches.filter((component) => isTargetInsideComponent(target, component));
+    const rankedMatches = (containingMatches.length > 0 ? containingMatches : matches).sort((a, b) => getElementDepth(b.firstDOMElement || null) -
+        getElementDepth(a.firstDOMElement || null));
+    return rankedMatches[0]?.id;
+}
+function findComponentsRenderingField(field, page) {
+    if (!page?.rootComponent)
+        return [];
+    const matches = [];
+    const visit = (component) => {
+        if (componentRendersField(component, field)) {
+            matches.push(component);
+        }
+        for (const placeholder of component.placeholders || []) {
+            for (const child of placeholder.components || []) {
+                visit(child);
+            }
+        }
+    };
+    visit(page.rootComponent);
+    return matches;
+}
+function componentRendersField(component, field) {
+    const renderedItems = [
+        component.datasourceItem,
+        ...component.items.filter((item) => !component.datasourceItem ||
+            !(item.id === component.datasourceItem.id &&
+                item.language === component.datasourceItem.language &&
+                item.version === component.datasourceItem.version)),
+    ].filter(Boolean);
+    return renderedItems.some((item) => item.id === field.item.id &&
+        item.language === field.item.language &&
+        item.version === field.item.version &&
+        item.renderedFieldIds.includes(field.fieldId));
+}
+function isTargetInsideComponent(target, component) {
+    const start = component.firstDOMElement;
+    const end = component.lastDOMElement || component.firstDOMElement;
+    if (!start || !end)
+        return false;
+    if (start.contains(target) || end.contains(target))
+        return true;
+    const startPos = start.compareDocumentPosition(target);
+    const endPos = end.compareDocumentPosition(target);
+    const isAfterStart = !!(startPos & Node.DOCUMENT_POSITION_FOLLOWING) ||
+        !!(startPos & Node.DOCUMENT_POSITION_CONTAINED_BY);
+    const isBeforeEnd = !!(endPos & Node.DOCUMENT_POSITION_PRECEDING) ||
+        !!(endPos & Node.DOCUMENT_POSITION_CONTAINED_BY);
+    return isAfterStart && isBeforeEnd;
+}
+function getElementDepth(element) {
+    let depth = 0;
+    let current = element;
+    while (current) {
+        depth++;
+        current = current.parentElement;
+    }
+    return depth;
+}
+function injectSXAScripts(iframe) {
+    if (!iframe)
+        return;
+    const iframeDocument = getAccessibleIframeDocument(iframe, "PageViewerFrame.tsx:injectSXAScripts-doc");
+    let iframeWindow;
+    try {
+        iframeWindow = iframe.contentWindow;
+    }
+    catch {
+        iframeWindow = null;
+    }
+    if (!iframeDocument || !iframeWindow)
+        return;
+    iframeWindow.Sitecore = {
+        PageModes: {
+            HoverFrame: {
+                extend: () => {
+                    //  console.log("extend hoverframe");
+                },
+            },
+            ChromeManager: {
+                chromes: () => {
+                    //  console.log("chromes");
+                    return [];
+                },
+                resetChromes: () => {
+                    //   console.log("resetChromes");
+                    iframeWindow.XA.init();
+                },
+                chromesReseted: {
+                    observe: () => {
+                        //  console.log("chromesReseted.observe");
+                    },
+                },
+                // Dummy selectionChanged with an _callbacks array
+                selectionChanged: {
+                    _callbacks: [],
+                    // Optionally, you can add a method to trigger all callbacks if needed.
+                    trigger: function (...args) {
+                        this._callbacks.forEach((callback) => callback(...args));
+                    },
+                },
+            },
+            ChromeControls: function () { },
+            ChromeTypes: {
+                PlaceholderSorting: function () { },
+                Rendering: function () { },
+            },
+        },
+    };
+    // Option 1: Use main window's jQuery if available.
+    if (iframeWindow.jQuery) {
+        // Be cautious: if the iframe's document is different, it's better to load jQuery within the iframe.
+        iframeWindow.$sc = iframeWindow.jQuery;
+    }
+    else {
+        // Option 2: Dynamically load jQuery in the iframe.
+        const jqueryScript = iframeDocument.createElement("script");
+        jqueryScript.type = "text/javascript";
+        jqueryScript.src = "https://code.jquery.com/jquery-3.6.0.min.js"; // Use the version you prefer.
+        jqueryScript.integrity =
+            "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=";
+        jqueryScript.crossOrigin = "anonymous";
+        jqueryScript.onload = () => {
+            // Once loaded, assign it to $sc using noConflict to avoid global collisions.
+            iframeWindow.$sc = iframeWindow.jQuery.noConflict();
+            //  console.log("jQuery loaded in iframe and assigned to $sc");
+        };
+        (iframeDocument.head || iframeDocument.body).appendChild(jqueryScript);
+    }
+    // Add a dummy implementation for renderExpandCommand on the ChromeControls prototype.
+    iframeWindow.Sitecore.PageModes.ChromeControls.prototype.renderExpandCommand =
+        function () {
+            console.log("renderExpandCommand called");
+            // Return a dummy value if needed. For example, you might return a dummy HTML string.
+            return "<div>Dummy Expand Command</div>";
+        };
+    iframeWindow.Sitecore.PageModes.ChromeTypes.PlaceholderSorting.prototype.insertSortingHandle =
+        function () {
+            console.log("insertSortingHandle called");
+        };
+}
+/**
+ * Calculates the global offset of a given target node and its local offset,
+ * relative to the container's complete text content.
+ *
+ * @param container - The container element that holds the text nodes.
+ * @param targetNode - The text node where the selection starts or ends.
+ * @param localOffset - The offset within the target text node.
+ * @returns The computed global offset.
+ */
+function getGlobalTextOffset(container, targetNode, localOffset) {
+    let globalOffset = 0;
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null);
+    while (walker.nextNode()) {
+        const currentNode = walker.currentNode;
+        // If we've reached the target node, add the local offset and return.
+        if (currentNode === targetNode) {
+            return globalOffset + localOffset;
+        }
+        // Otherwise, add the length of this text node.
+        globalOffset += (currentNode.textContent || "").length;
+    }
+    return globalOffset;
 }
 //# sourceMappingURL=PageViewerFrame.js.map