@parhelia/core 0.1.12880 → 0.1.12881

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

@@ -1,19 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { MiniMap } from "./MiniMap";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { BRIDGE_DOM_UPDATED_EVENT, 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 { IframeOverlayProvider } from "../page-editor-chrome/overlay/IframeOverlayProvider";
-import { useViewportChangeSignal } from "./pageViewContext";
-import morphdom from "morphdom";
+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 uuid from "react-uuid";
 import { cn } from "../../lib/utils";
-import { findComponentRect, findFieldElement, findNearestEditableComponentId, findParentWithAttribute, getAbsolutePosition, getFieldDescriptorFromElement, findClosestFieldElement, extractItemIdFromItemUri, } from "../utils";
-import { extractDOMSelectionContext } from "../utils/selectionContext";
+import { normalizeMarkerId } from "../utils";
 import { cleanId } from "../utils/id-helper";
-import { getAllComponentInstances, getComponentById, } from "../componentTreeHelper";
+import { getComponentById } from "../componentTreeHelper";
 import { buildComponentContextMenuItems } from "../ContextMenu";
 import { loadFieldButtons } from "../services/editService";
 import { usePathname } from "../client/navigation";
@@ -22,125 +21,263 @@ 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";
-const EDITOR_CSS_STYLE_ID = "parhelia-editor-css";
+import { BridgeClient } from "../bridge/BridgeClient";
+import { getSuggestionDisplayValue } from "../reviews/suggestionDisplayValue";
+import { buildBridgeFieldPatchPayload, getBridgeFieldPatchValue, } from "./bridgeFieldPatch";
 const ZOOM_MIN = 0.25;
 const ZOOM_MAX = 2;
 const ZOOM_STEP = 0.25;
 const ZOOM_TRANSITION_MS = 300;
-const zoomAnimationFrames = new WeakMap();
-function getAccessibleIframeDocument(iframe, location) {
-    if (!iframe)
-        return null;
-    try {
-        return iframe.contentDocument || iframe.contentWindow?.document || null;
+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;
     }
-    catch {
-        return null;
+    if (item.version !== undefined &&
+        descriptor.version !== undefined &&
+        item.version !== descriptor.version) {
+        return false;
     }
+    return true;
 }
-function getAccessibleIframeLocationHref(iframe) {
-    try {
-        return iframe?.contentWindow?.location?.href;
-    }
-    catch {
+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)
         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 getAccessibleIframeLocationOrigin(iframe) {
+function getUrlOrigin(url) {
+    if (!url)
+        return undefined;
     try {
-        return iframe?.contentWindow?.location?.origin;
+        const parsedUrl = new URL(url, window.location.href);
+        alignLoopbackHostToEditor(parsedUrl);
+        return parsedUrl.origin;
     }
     catch {
         return undefined;
     }
 }
-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;
+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;
         }
-        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;
+        if (!datasourceMatch &&
+            cleanId(component.datasourceItem?.id) === normalizedId) {
+            datasourceMatch = component;
+        }
+        for (const placeholder of component.placeholders || []) {
+            for (const child of placeholder.components || []) {
+                visit(child);
+            }
         }
-        documentElement.style.zoom = String(zoom);
-        documentElement.style.removeProperty("transform");
-        documentElement.style.removeProperty("transform-origin");
-        documentElement.style.overflow = "auto";
-        documentElement.style.removeProperty("will-change");
     };
-    if (reduceMotion) {
-        applyFinalZoom();
-        return;
+    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);
     }
-    const startZoom = getCurrentZoom();
-    const targetZoom = zoom;
-    if (Math.abs(startZoom - targetZoom) < 0.001) {
-        applyFinalZoom();
-        return;
+    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;
     }
-    documentElement.style.willChange = "zoom";
-    documentElement.style.zoom = String(startZoom);
-    if (targetZoom !== 1) {
-        documentElement.style.overflow = "auto";
+    if (typeof bridgeItem.version === "number" &&
+        Number.isFinite(bridgeItem.version) &&
+        typeof item.version === "number" &&
+        Number.isFinite(item.version) &&
+        bridgeItem.version !== item.version) {
+        return false;
     }
-    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));
+    return true;
 }
-function clampEditorZoom(value) {
-    return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, value));
+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;
+    }
+    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];
+}
+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"));
 }
 export function PageViewerFrame(props) {
     const editContext = useEditContext();
@@ -160,17 +297,38 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     const editContextRef = useEditContextRef();
     const fieldsContextRef = useFieldsEditContextRef();
     const iframeRef = useRef(null);
-    const currentLoadRef = useRef(null);
-    const rebindIframeInteractionsRef = useRef(null);
-    const prevModeRef = useRef(editContext.mode);
+    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 [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 !==
@@ -179,7 +337,6 @@ 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) => {
@@ -195,1269 +352,1368 @@ 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;
-    // Update the context whenever the iframe ref changes
-    useEffect(() => {
-        pageViewContext.setEditorIframe(iframeRef.current);
-    }, [iframeRef.current, pageViewContext.setEditorIframe]);
-    const updateMiniMapVisibility = useDebouncedCallback(() => {
-        if (!iframeRef.current)
+    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;
-        const iframe = iframeRef.current;
-        const doc = getAccessibleIframeDocument(iframe, "PageViewerFrame.tsx:updateMiniMapVisibility");
-        if (!doc?.documentElement)
+        setScroll(e);
+        if (!compareView)
+            pageViewContextRef.current?.setScroll(e);
+    }, [compareView, shouldTrackMinimapScroll]);
+    const scrollHandler = useThrottledCallback(updateScrollPosition, 100);
+    const scrollHandlerRef = useRef(scrollHandler);
+    useEffect(() => {
+        scrollHandlerRef.current = scrollHandler;
+    }, [scrollHandler]);
+    const scheduleBridgeGeometryRevision = useCallback(() => {
+        if (bridgeGeometryRevisionRafRef.current != null)
             return;
-        const scrollContainer = doc.scrollingElement || doc.body;
-        if (!scrollContainer)
+        bridgeGeometryRevisionRafRef.current = window.requestAnimationFrame(() => {
+            bridgeGeometryRevisionRafRef.current = null;
+            setBridgeGeometryRevision((revision) => revision + 1);
+        });
+    }, []);
+    const scheduleBridgeDomRevision = useCallback(() => {
+        if (bridgeDomRevisionRafRef.current != null)
             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);
+        bridgeDomRevisionRafRef.current = window.requestAnimationFrame(() => {
+            bridgeDomRevisionRafRef.current = null;
+            setBridgeDomRevision((revision) => revision + 1);
+        });
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (bridgeGeometryRevisionRafRef.current != null) {
+                window.cancelAnimationFrame(bridgeGeometryRevisionRafRef.current);
             }
-        }
-        else {
-            if (contentHeight > upperThreshold && minimapEnabled) {
-                setShowMiniMap(true);
+            if (bridgeDomRevisionRafRef.current != null) {
+                window.cancelAnimationFrame(bridgeDomRevisionRafRef.current);
             }
-        }
-    }, 100);
-    updateMiniMapVisibility();
-    const buildPageModelThrottled = useThrottledCallback(buildPageModelSkeleton, 200, {
-        leading: true,
-        trailing: 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,
     });
-    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);
+    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,
                 }
-                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;
+                : undefined;
+            activeBridgeInlineEditRef.current = {
+                elementKey: interaction.elementKey,
+                fieldId: interaction.fieldId,
+                item: interactionItem,
+                modeAtStart: editContextRef.current?.mode ?? editContext.mode,
+            };
         }
-        // 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);
-            }
-        }, 0);
-    };
-    // Disconnect the CSS guard on unmount.
+        return started;
+    }, [beginBridgeInlineEdit, editContext.mode, editContextRef]);
+    const endTrackedBridgeFieldFocus = useCallback(() => {
+        activeBridgeInlineEditRef.current = null;
+        endBridgeFieldFocus();
+    }, [endBridgeFieldFocus]);
     useEffect(() => {
-        return () => {
-            try {
-                editorCssGuardRef.current.observer?.disconnect();
+        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;
             }
-            catch { }
-            editorCssGuardRef.current.observer = null;
-            editorCssGuardRef.current.doc = null;
+            activeBridgeInlineEditRef.current = null;
+            bridgePatchSignatureRef.current.delete(`${activeEdit.elementKey}:${activeEdit.fieldId}`);
+        };
+        window.addEventListener(BRIDGE_INLINE_EDIT_RELEASE_EVENT, handleBridgeInlineEditRelease);
+        return () => {
+            window.removeEventListener(BRIDGE_INLINE_EDIT_RELEASE_EVENT, handleBridgeInlineEditRelease);
         };
     }, []);
-    // If the editor mode flips (edit/preview), re-apply CSS and disable inline editing in the iframe.
     useEffect(() => {
-        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);
+        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;
         }
-    }, [editContext.mode]);
-    useEffect(() => {
-        if (!pageItemDescriptor ||
-            !pageViewContext.editUrl ||
-            !pageViewContext.previewUrl)
+        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();
             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;
-        }
-        catch {
-            savedScrollY = 0;
-        }
-        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);
-        }
-        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");
+        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;
         }
-        // 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;
+        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;
         }
-        catch {
-            currentIframeUrl = undefined;
+        clearBridgeRemoteCaretPosition();
+        const item = selection.activeField.item ??
+            pageViewContextRef.current?.page?.item ??
+            pageViewContextRef.current?.pageItemDescriptor;
+        if (!item?.id) {
+            editor.setSelectedRange(undefined);
+            return;
         }
-        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;
+        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,
             }
-            const doc = getAccessibleIframeDocument(iframeRef.current, "PageViewerFrame.tsx:integration-refresh-doc");
-            if (doc) {
-                requestPageModelBuild(doc);
+            : 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,
             }
-            // 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);
+            : 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)) {
+                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,
+            });
         };
-        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());
+        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,
+                };
             }
-            else {
-                console.log("No integration - reloading frame via fetch");
-                // Abort any in-flight load before starting a new one
-                try {
-                    currentLoadRef.current?.controller.abort();
+        }
+        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");
                 }
-                catch { }
-                const controller = new AbortController();
-                const expectedRevision = editContext.revision ?? "";
-                currentLoadRef.current = { controller, revision: expectedRevision };
-                loadContent(renderUrl.toString(), initialLoad, expectedRevision, controller.signal);
+                document.dispatchEvent(new CustomEvent("inline-ai-open", {
+                    bubbles: true,
+                    cancelable: true,
+                }));
             }
+            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.kind !== "contextMenu") {
+            return;
         }
-        catch {
-            integrationRefreshFn = undefined;
+        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,
+                };
+            }
         }
-        if (!versionChanged && integrationRefreshFn) {
-            runIntegrationRefresh(integrationRefreshFn, "Integration - requesting refresh");
+        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);
         }
-        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 (currentOverlay &&
+            currentOverlay !== "context-menu" &&
+            !isGeneratorOverlay) {
+            editor.setCurrentOverlay(undefined);
         }
-        else {
-            runFallbackRefresh();
+        if (!componentId) {
+            if (interaction.kind === "click")
+                selectFromBridgeInteraction([]);
+            if (isEditableFieldClick) {
+                await beginTrackedBridgeInlineEdit(effectiveInteraction);
+            }
+            else if (interaction.kind === "click") {
+                endTrackedBridgeFieldFocus();
+            }
+            return;
         }
-        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 currentSelection = editor.selection || [];
+        if (interaction.kind === "contextMenu") {
+            if (pageViewContextRef.current) {
+                pageViewContextRef.current.bridgeInteraction = effectiveInteraction;
             }
-            catch {
-                fieldElement = null;
+            const selectedIds = currentSelection.includes(componentId)
+                ? currentSelection
+                : [componentId];
+            if (!currentSelection.includes(componentId)) {
+                selectFromBridgeInteraction(selectedIds);
             }
-            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 { }
-                }
+            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);
             }
-        }
-    }, [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);
+            else {
+                editor.showContextMenu(adjustedEvent, items);
             }
-        }
-    }, [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;
-                    }
-                    doc.open();
-                    doc.write(text);
-                    doc.close();
-                }
-                else {
-                    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();
+        }
+        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);
                         }
                     }
-                    catch { }
-                    setShowSpinner(false);
+                    selectFromBridgeInteraction(nextSelection);
                 }
-                ensureEditorCssGuard(doc, editContext.mode !== "preview");
-                setTimeout(() => {
-                    injectSXAScripts(iframeRef.current);
-                }, 1000);
-                try {
-                    requestPageModelBuild(doc);
+                else {
+                    selectFromBridgeInteraction(range);
                 }
-                catch (buildErr) { }
             }
-        }
-        catch (err) {
-            if (err?.name === "AbortError") {
-                // Swallow aborts – a newer refresh superseded this one
-                return;
+            else {
+                selectFromBridgeInteraction([componentId]);
             }
-            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);
         }
-        catch {
-            rect = undefined;
-        }
-        if (!rect)
-            return;
-        if (!iframeRef.current)
+        if (interaction.ctrlKey || interaction.metaKey) {
+            if (currentSelection.includes(componentId)) {
+                selectFromBridgeInteraction(currentSelection.filter((id) => id !== componentId));
+            }
+            else {
+                selectFromBridgeInteraction([...currentSelection, componentId]);
+            }
             return;
-        // Check if element is already in viewport
-        const iframeHeight = iframeRef.current.getBoundingClientRect().height;
-        let scrollTop = 0;
-        try {
-            scrollTop = iframeRef.current?.contentWindow?.scrollY || 0;
         }
-        catch {
-            scrollTop = 0;
-        }
-        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;
+        selectFromBridgeInteraction([componentId]);
+        if (isEditableFieldClick) {
+            await beginTrackedBridgeInlineEdit(effectiveInteraction);
         }
-        const scrollPosition = rect.rect.y - iframeHeight / 2 + rect.rect.height / 2;
-        try {
-            iframeRef.current?.contentWindow?.scrollTo({
-                top: scrollPosition,
-                behavior: "smooth",
-            });
+        else {
+            endTrackedBridgeFieldFocus();
         }
-        catch { }
-        editContext.setScrollIntoView(undefined);
-    }, [editContext.scrollIntoView, pageViewContext.page]);
+    }, [
+        beginTrackedBridgeInlineEdit,
+        endTrackedBridgeFieldFocus,
+        resolveBridgeFieldDescriptor,
+    ]);
+    // Update the context whenever the iframe ref changes
     useEffect(() => {
-        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())) {
+        pageViewContext.setEditorIframe(iframeElement);
+    }, [iframeElement, pageViewContext.setEditorIframe]);
+    useEffect(() => {
+        const iframe = iframeElement;
+        if (!iframe)
             return;
-        }
-        // Find the field element containing the selection/caret
-        const fieldElement = findClosestFieldElement(sel.anchorNode);
-        if (!fieldElement) {
-            if (!isInlineAiUiFocused() && !isInlineAiUiPresent()) {
-                editContextRef.current?.setSelectedRange(undefined);
-            }
+        const currentIframeSrc = iframe.src;
+        if (!iframeSrc || !loadedIframeSrc || loadedIframeSrc !== currentIframeSrc) {
+            pageViewContext.setBridgeReady(false);
+            pageViewContext.setIframeSupportsRefresh(false);
             return;
         }
-        const fieldId = fieldElement.getAttribute("data-fieldid");
-        if (!fieldId)
+        const allowedHostOrigins = [
+            getUrlOrigin(pageViewContext.editUrl),
+            getUrlOrigin(pageViewContext.previewUrl),
+        ].filter((origin) => Boolean(origin));
+        if (allowedHostOrigins.length === 0) {
+            pageViewContext.setBridgeReady(false);
+            pageViewContext.setIframeSupportsRefresh(false);
             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;
         }
-        // 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 },
+        // 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,
                             },
-                            originatingSlotId: slotContext?.slotId,
-                            refresh: "none",
-                            value: valueToSave,
+                            version: bridge.getDiagnostics().editorVersion,
+                            acknowledgedCapabilities: bridge.getAcknowledgedCapabilities(),
                         });
-                    }
-                }
-                catch (error) {
-                    console.error("[PageViewerFrame] Failed to replace text:", error);
+                        bridge.sendCommand("setZoom", {
+                            zoom: pageViewContextRef.current?.zoom ?? 1,
+                        });
+                        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;
                 }
             },
         });
-    }, 300);
+        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,
+    ]);
     useEffect(() => {
-        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)
+        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)
                 return;
-            // 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)
+            const bridge = bridgeClientRef.current;
+            const structure = pageViewContextRef.current?.bridgeStructure;
+            if (!bridge || !structure?.fields.length)
                 return;
-            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]);
-                        }
+            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;
                     }
-                    else {
-                        editContextRef.current?.select([componentId]);
+                    if (!bridgeFieldMatchesChangedField(structureField.fieldId, changedFieldId, field)) {
+                        continue;
                     }
+                    const patch = buildBridgeFieldPatch({
+                        field,
+                        structureField,
+                        itemDescriptor: change.item,
+                        preferRepositoryValue: change.source === "local-field-update",
+                    });
+                    if (!patch)
+                        continue;
+                    patchedElementKeys.add(structureField.elementKey);
+                    patches.push(patch);
                 }
-                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);
+                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;
                     }
+                    processResolvedField(change, changedFieldId, localField);
                 }
-                else {
-                    // Regular click: always select just this component
-                    editContextRef.current?.select([componentId]);
+                if (needsAsyncLookup) {
+                    asyncFieldChanges.push(change);
                 }
-                //  if (mode !== "edit") {
-                //editContextRef.current?.setScrollIntoView(componentId);
-                //}
-            }
-            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) {
+            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)
                             return;
-                        }
-                    }
-                    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
+                        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);
                     }
                 }
-                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);
-                    }
+            })().catch((error) => {
+                if (!disposed) {
+                    console.warn("[Parhelia bridge] Failed to patch host field", error);
                 }
-            }
-            const clickEvent = new MouseEvent("click", {
-                view: window,
-                bubbles: true,
-                cancelable: true,
-                clientX: event.clientX,
-                clientY: event.clientY,
             });
-            if (!isGeneratorOverlay) {
-                document.dispatchEvent(clickEvent);
-            }
-        };
-        const handleIframeScroll = () => {
-            const scrollTop = boundScrollContainer?.scrollTop || 0;
-            scrollHandler(scrollTop);
-        };
-        const handleIframeWindowScroll = () => {
-            const scrollTop = boundScrollContainer?.scrollTop || 0;
-            scrollHandler(scrollTop);
-        };
-        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));
+        });
+        return () => {
+            disposed = true;
+            unsubscribe();
         };
-        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,
+    }, [
+        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;
+                }
+                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,
                 });
-                window.parent.document.dispatchEvent(parentEvent);
-                // Also prevent default to avoid any browser behavior
-                event.preventDefault();
-                event.stopPropagation();
-                return;
+                if (!patch)
+                    continue;
+                patchedElementKeys.add(structureField.elementKey);
+                sendBridgeFieldPatch(bridge, patch, structureField.textContent);
             }
-            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);
-                }
+        })().catch((error) => {
+            if (!disposed) {
+                console.warn("[Parhelia bridge] Failed to patch host suggestion display", error);
             }
+        });
+        return () => {
+            disposed = true;
         };
-        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);
-            }
-            else {
-                blockBlurEventRef.current = 0;
+    }, [
+        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 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;
-            }
-            editContextRef.current?.operations.onFieldBlur?.();
-            fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
-            fieldsContextRef.current?.setFocusedField(undefined, false);
+        pageViewContext.requestBridgeGeometry = requestBridgeGeometry;
+        const requestBridgeScrollBy = (payload) => {
+            return bridgeClientRef.current?.sendCommand("scrollBy", payload) ?? false;
         };
-        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;
+        const requestBridgeRichTextCommand = (payload) => {
+            return (bridgeClientRef.current?.sendCommand("applyRichTextCommand", payload) ??
+                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;
+        pageViewContext.requestBridgeScrollBy = requestBridgeScrollBy;
+        pageViewContext.requestBridgeRichTextCommand = requestBridgeRichTextCommand;
+        return () => {
+            if (pageViewContext.requestBridgeGeometry === requestBridgeGeometry) {
+                pageViewContext.requestBridgeGeometry = undefined;
             }
-            detachListeners();
-            boundDocument = iframeDocument;
-            boundDocumentElement = iframeDocumentElement;
-            iframeDocumentElement.addEventListener("mousedown", handleIframeMouseDown);
-            iframeDocumentElement.addEventListener("click", handleIframeClick);
-            try {
-                iframe.contentWindow?.addEventListener("contextmenu", handleContextMenu, true);
+            if (pageViewContext.requestBridgeScrollBy === requestBridgeScrollBy) {
+                pageViewContext.requestBridgeScrollBy = undefined;
             }
-            catch { }
-            boundScrollContainer =
-                iframeDocument.scrollingElement || iframeDocument.body || null;
-            boundScrollContainer?.addEventListener("scroll", handleIframeScroll);
-            try {
-                iframe.contentWindow?.addEventListener("scroll", handleIframeWindowScroll);
+            if (pageViewContext.requestBridgeRichTextCommand ===
+                requestBridgeRichTextCommand) {
+                pageViewContext.requestBridgeRichTextCommand = undefined;
             }
-            catch { }
-            iframeDocument.addEventListener("selectionchange", selecionChangeHandler);
-            iframeDocument.addEventListener("keydown", handleIframeKeyDown);
-            iframeDocument.addEventListener("wheel", handleIframeWheel, {
-                capture: true,
-                passive: false,
-            });
-            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);
+    }, [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."));
             }
-            catch {
-                return undefined;
+            return bridge.requestCommand("captureDom", payload, "captureDomResult", {
+                requestId: payload.requestId,
+            });
+        };
+        pageViewContext.requestBridgeCaptureDom = requestBridgeCaptureDom;
+        return () => {
+            if (pageViewContext.requestBridgeCaptureDom === requestBridgeCaptureDom) {
+                pageViewContext.requestBridgeCaptureDom = undefined;
             }
-            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();
-                }
+        };
+    }, [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);
             }
-            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);
+        }
+        else {
+            if (contentHeight > upperThreshold && minimapEnabled) {
+                setShowMiniMap(true);
             }
-            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:")) {
+        }
+    }, 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;
             }
-            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;
+            console.log("Bridge - requesting iframe refresh");
+            pageViewContext.setIframeSupportsRefresh(true);
+            const accepted = bridge.sendCommand("refresh", {
+                url: renderUrl.toString(),
+                revision: editContext.revision,
+                layoutKind: editContext.layoutMode,
+            });
+            if (!accepted) {
+                pageViewContext.setIframeSupportsRefresh(false);
+                runFallbackRefresh();
             }
-            // In edit mode, keep navigation inside iframe disabled.
-            event.preventDefault();
-        };
-        const handleContextMenu = async (event) => {
-            if (editContextRef.current?.isRefreshing && showSpinner)
-                return;
-            const target = event.target;
-            if (!target)
+        }
+        if (!shouldUseIframeSrcReload && !versionChanged) {
+            if (bridgeClientRef.current?.supportsCapability("refresh")) {
+                runBridgeRefresh();
+            }
+            else {
+                const retryDelayMs = 150;
+                const retryTimer = setTimeout(() => {
+                    runBridgeRefresh();
+                }, retryDelayMs);
+                setCurrentItemDescriptor(pageItemDescriptor);
+                return () => clearTimeout(retryTimer);
+            }
+        }
+        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])
                 return;
-            if (event.ctrlKey)
+            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);
+            }
+        }
+    }, [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)
                 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-exitFullscreen") {
+                pageViewContext.setFullscreen(false);
             }
-            // 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
+            if (message.data.type === "editor-timings") {
+                editContext.setTimings(message.data.timings);
             }
-            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();
         };
-        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();
+        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);
             }
-            iframe.addEventListener("load", handleLoad);
-        }
-        // Cleanup function
+            if (trailingGeometryTimer != null) {
+                window.clearTimeout(trailingGeometryTimer);
+            }
+            geometryTimer = window.setTimeout(requestGeometry, 50);
+            trailingGeometryTimer = window.setTimeout(() => {
+                trailingGeometryTimer = null;
+                requestGeometry();
+            }, ZOOM_TRANSITION_MS + 75);
+        };
+        const resizeObserver = new ResizeObserver(scheduleGeometryRequest);
+        resizeObserver.observe(iframe);
         return () => {
-            rebindIframeInteractionsRef.current = null;
-            if (iframe) {
-                iframe.removeEventListener("load", handleLoad);
+            resizeObserver.disconnect();
+            if (geometryTimer != null) {
+                window.clearTimeout(geometryTimer);
+            }
+            if (trailingGeometryTimer != null) {
+                window.clearTimeout(trailingGeometryTimer);
             }
-            detachListeners();
         };
-    }, [iframeRef.current]);
+    }, [iframeElement]);
     useEffect(() => {
-        try {
-            iframeRef.current?.contentWindow?.postMessage({ type: "componentsSelected", componentIds: editContext.selection }, window.location.origin);
-        }
-        catch { }
+        bridgeClientRef.current?.sendCommand("setSelection", {
+            componentIds: editContext.selection,
+        });
     }, [editContext.selection]);
-    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(() => {
+        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]);
     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, {});
     }
@@ -1473,265 +1729,27 @@ 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: 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) {
+                }, 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) {
                                         setShowSpinner(false);
-                                        ensureEditorCssGuard(doc, editContext.mode !== "preview");
                                         applyIframeZoom(iframeRef.current, zoom, "PageViewerFrame.tsx:onLoad-zoom");
-                                        setTimeout(() => {
-                                            injectSXAScripts(iframeRef.current);
-                                        }, 1000);
-                                        requestPageModelBuild(doc);
                                     }
-                                } }), 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 &&
+                                } }), 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 &&
                         showMiniMap &&
                         editContext.showMinimap &&
                         !editContext.isMobile &&
-                        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;
+                        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 })] }));
 }
 //# sourceMappingURL=PageViewerFrame.js.map