@parhelia/core 0.1.12907 → 0.1.12910

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

@@ -1,53 +1,620 @@
 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 { useViewportChangeSignal } from "./pageViewContext";
-import morphdom from "morphdom";
+import { useBridgeInlineEditing, } from "../page-editor-chrome/useBridgeInlineEditing";
+import { getInlineAiAnchorFromBridgeToolbar, getVisibleBridgeToolbarRect, waitForVisibleBridgeToolbarRect, } from "../page-editor-chrome/bridgeInlineFormatToolbarLayout";
+import { IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, IFRAME_OVERLAY_BRIDGE_GEOMETRY_EVENT, IFRAME_OVERLAY_BRIDGE_SCROLL_EVENT, IframeOverlayProvider, } from "../page-editor-chrome/overlay/IframeOverlayProvider";
+import { 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";
 import { EditorWarnings } from "../EditorWarnings";
 import { FieldActionsOverlay, } from "../FieldActionsOverlay";
+import { alignLoopbackHostToEditor, alignXmCloudManagedEditingHostToEditor, applyParheliaRenderContext, getEditorQueryParam, } from "./renderUrl";
 import { NoLayout } from "../page-editor-chrome/NoLayout";
 import { Spinner } from "../ui/Spinner";
 import { DeviceToolbar } from "./DeviceToolbar";
-import { buildPageModelSkeleton } from "./pageModelSkeletonBuilder";
+import { FullscreenControls } from "../client/ui/FullscreenControls";
 import { toSitecoreDate } from "../utils/sitecoreDate";
-const EDITOR_CSS_STYLE_ID = "parhelia-editor-css";
-export function PageViewerFrame({ compareView, pageViewContext, className, slotCloseButton, }) {
+import { BridgeClient } from "../bridge/BridgeClient";
+import { getSuggestionDisplayValue } from "../reviews/suggestionDisplayValue";
+import { buildBridgeFieldPatchPayload, getBridgeFieldPatchValue, } from "./bridgeFieldPatch";
+import { createKeyboardEventFromBridgeInteraction } from "./bridgeKeyboardShortcuts";
+const ZOOM_MIN = 0.25;
+const ZOOM_MAX = 2;
+const ZOOM_STEP = 0.25;
+const ZOOM_TRANSITION_MS = 300;
+const BRIDGE_INLINE_EDIT_RELEASE_EVENT = "parhelia:bridge-inline-edit-release";
+const INLINE_AI_CLOSE_EVENT = "inline-ai-close";
+const BRIDGE_INLINE_LINK_OPEN_EVENT = "bridge-inline-link-open";
+const SCROLL_INTO_VIEW_BRIDGE_SOURCE = "scroll-into-view";
+// Suggestions-mode cursor: a text I-beam (the click insertion point) badged with
+// the lucide PenLine icon from the "Suggestions mode" toolbar button. A white
+// halo keeps it visible on any page background; the hotspot is the I-beam centre.
+const SUGGESTIONS_CURSOR_PEN_PATHS = '<path d="M12 20h9"/>' +
+    '<path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"/>';
+const SUGGESTIONS_CURSOR_BEAM_PATHS = '<path d="M5 5.5V22.5"/><path d="M2.5 5.5H7.5"/><path d="M2.5 22.5H7.5"/>';
+const SUGGESTIONS_CURSOR_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke-linecap="round" stroke-linejoin="round">' +
+    // White halo, drawn first so the dark ink sits on top of it.
+    '<g stroke="#ffffff">' +
+    '<g stroke-width="4">' +
+    SUGGESTIONS_CURSOR_BEAM_PATHS +
+    "</g>" +
+    '<g transform="translate(11 -1.5) scale(0.7)" stroke-width="5">' +
+    SUGGESTIONS_CURSOR_PEN_PATHS +
+    "</g>" +
+    "</g>" +
+    // Dark ink: the I-beam (text insertion point) plus the pen badge.
+    '<g stroke="#121212">' +
+    '<g stroke-width="2">' +
+    SUGGESTIONS_CURSOR_BEAM_PATHS +
+    "</g>" +
+    '<g transform="translate(11 -1.5) scale(0.7)" stroke-width="2.6">' +
+    SUGGESTIONS_CURSOR_PEN_PATHS +
+    "</g>" +
+    "</g>" +
+    "</svg>";
+const SUGGESTIONS_CURSOR_IMAGE = "data:image/svg+xml," + encodeURIComponent(SUGGESTIONS_CURSOR_SVG);
+const SUGGESTIONS_CURSOR_VALUE = `url("${SUGGESTIONS_CURSOR_IMAGE}") 5 14, default`;
+function getSelectedRangeInlineEditInteraction(range) {
+    if (!range?.text?.trim() || !range.elementKey || !range.fieldId) {
+        return undefined;
+    }
+    const item = range.itemId && range.language && typeof range.version === "number"
+        ? {
+            id: range.itemId,
+            language: range.language,
+            version: range.version,
+        }
+        : undefined;
+    return {
+        kind: "click",
+        elementKey: range.elementKey,
+        fieldId: range.fieldId,
+        item,
+        selectedText: range.text,
+        selectionStartOffset: range.startOffset,
+        selectionEndOffset: range.endOffset,
+    };
+}
+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, scrollOverride) {
+    const documentSize = getBridgeGeometryDocumentSize(geometry);
+    const scrollScale = getBridgeGeometryScrollScale(geometry);
+    const scroll = scrollOverride ?? geometry?.scroll;
+    const detail = {
+        scrollLeft: (scroll?.x ?? 0) * scrollScale,
+        scrollTop: (scroll?.y ?? 0) * scrollScale,
+        viewportWidth: geometry?.viewport.width,
+        viewportHeight: geometry?.viewport.height,
+        scrollWidth: documentSize?.width,
+        scrollHeight: documentSize?.height,
+    };
+    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;
+    }
+    if (item.version !== undefined &&
+        descriptor.version !== undefined &&
+        item.version !== descriptor.version) {
+        return false;
+    }
+    return true;
+}
+function bridgeTargetToDocumentBounds(geometry, target) {
+    const rectScale = geometry.rectScale ?? 1;
+    const scrollScale = getBridgeGeometryScrollScale(geometry);
+    return {
+        x: target.rect.left * rectScale + geometry.scroll.x * scrollScale,
+        y: target.rect.top * rectScale + geometry.scroll.y * scrollScale,
+        width: target.rect.width * rectScale,
+        height: target.rect.height * rectScale,
+    };
+}
+function findBridgeFieldDocumentBounds(geometry, descriptor) {
+    if (!geometry)
+        return undefined;
+    const target = geometry.targets.find((candidate) => {
+        if (candidate.kind !== "field")
+            return false;
+        return (bridgeKeysMatch(candidate.fieldId, descriptor.fieldId) &&
+            bridgeItemMatches(candidate.item, descriptor.item));
+    });
+    return target?.rect
+        ? bridgeTargetToDocumentBounds(geometry, target)
+        : undefined;
+}
+function findBridgeTextRangeDocumentBounds(geometry, key) {
+    if (!geometry || !key)
+        return undefined;
+    const bounds = geometry.targets
+        .filter((candidate) => candidate.kind === "textRange" &&
+        candidate.key === key &&
+        (candidate.rect.width > 0 || candidate.rect.height > 0))
+        .map((target) => bridgeTargetToDocumentBounds(geometry, target));
+    return unionDocumentBounds(bounds);
+}
+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 unionDocumentBounds(bounds) {
+    if (bounds.length === 0)
+        return undefined;
+    let left = Number.POSITIVE_INFINITY;
+    let top = Number.POSITIVE_INFINITY;
+    let right = Number.NEGATIVE_INFINITY;
+    let bottom = Number.NEGATIVE_INFINITY;
+    bounds.forEach((rect) => {
+        left = Math.min(left, rect.x);
+        top = Math.min(top, rect.y);
+        right = Math.max(right, rect.x + rect.width);
+        bottom = Math.max(bottom, rect.y + rect.height);
+    });
+    if (!Number.isFinite(left) || !Number.isFinite(top))
+        return undefined;
+    return {
+        x: left,
+        y: top,
+        width: Math.max(0, right - left),
+        height: Math.max(0, bottom - top),
+    };
+}
+function findScrollIntoViewDocumentBounds(geometry, target, options = {}) {
+    if (typeof target === "string") {
+        return findBridgeComponentDocumentBounds(geometry, target);
+    }
+    if (target.kind === "component") {
+        return findBridgeComponentDocumentBounds(geometry, target.componentId);
+    }
+    if (target.kind === "field") {
+        return (findBridgeFieldDocumentBounds(geometry, target.field) ??
+            (target.fallbackComponentId
+                ? findBridgeComponentDocumentBounds(geometry, target.fallbackComponentId)
+                : undefined));
+    }
+    const textRangeBounds = findBridgeTextRangeDocumentBounds(geometry, target.key);
+    if (textRangeBounds || !options.includeTextRangeFallback) {
+        return textRangeBounds;
+    }
+    return ((target.fallbackField
+        ? findBridgeFieldDocumentBounds(geometry, target.fallbackField)
+        : undefined) ??
+        (target.fallbackComponentId
+            ? findBridgeComponentDocumentBounds(geometry, target.fallbackComponentId)
+            : undefined));
+}
+function isTextRangeScrollTarget(target) {
+    return typeof target !== "string" && target.kind === "textRange";
+}
+function getScrollIntoViewSignature(target) {
+    if (typeof target === "string")
+        return `component:${target}`;
+    if (target.kind === "component")
+        return `component:${target.componentId}`;
+    if (target.kind === "field") {
+        return [
+            "field",
+            target.field.fieldId,
+            target.field.item.id,
+            target.field.item.language,
+            target.field.item.version,
+        ].join(":");
+    }
+    return [
+        "textRange",
+        target.key,
+        ...(target.textRanges || []).map((range) => [
+            range.key,
+            range.elementKey,
+            range.fieldId,
+            range.item?.id,
+            range.item?.language,
+            range.item?.version,
+            range.start,
+            range.end,
+        ].join(":")),
+    ].join("|");
+}
+function requestScrollTargetGeometry(pageViewContext, target) {
+    const textRanges = target.textRanges?.filter((range) => !!range);
+    if (!textRanges?.length)
+        return false;
+    return (pageViewContext.requestBridgeGeometry?.({
+        source: SCROLL_INTO_VIEW_BRIDGE_SOURCE,
+        textRanges,
+    }) ?? false);
+}
+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 getAccessibleIframeDocument(iframe) {
+    try {
+        return iframe?.contentDocument ?? null;
+    }
+    catch {
+        // Cross-origin hosts expose a WindowProxy whose document access throws.
+        return null;
+    }
+}
+function getIframeWindowScroll(iframe) {
+    try {
+        const win = iframe?.contentWindow;
+        const doc = win?.document;
+        if (!win || !doc)
+            return undefined;
+        const scrollingElement = doc.scrollingElement;
+        return {
+            x: Math.max(win.scrollX || 0, scrollingElement?.scrollLeft || 0, doc.documentElement?.scrollLeft || 0, doc.body?.scrollLeft || 0),
+            y: Math.max(win.scrollY || 0, scrollingElement?.scrollTop || 0, doc.documentElement?.scrollTop || 0, doc.body?.scrollTop || 0),
+        };
+    }
+    catch {
+        return undefined;
+    }
+}
+function restoreIframeWindowScroll(iframe, targetScroll, options = {}) {
+    if (!targetScroll)
+        return false;
+    try {
+        const win = iframe?.contentWindow;
+        if (!win)
+            return false;
+        let attempts = 0;
+        let completed = false;
+        const maxAttempts = options.maxAttempts ?? 8;
+        const finish = (settled) => {
+            if (completed)
+                return;
+            completed = true;
+            if (settled) {
+                options.onSettled?.();
+            }
+            else {
+                options.onExpired?.();
+            }
+        };
+        const apply = () => {
+            try {
+                attempts += 1;
+                win.scrollTo(targetScroll.x, targetScroll.y);
+                const settled = Math.abs((win.scrollX || 0) - targetScroll.x) <= 1 &&
+                    Math.abs((win.scrollY || 0) - targetScroll.y) <= 1;
+                if (settled) {
+                    finish(true);
+                    return;
+                }
+                if (attempts < maxAttempts) {
+                    window.requestAnimationFrame(apply);
+                }
+                else {
+                    finish(false);
+                }
+            }
+            catch {
+                // Cross-origin preview frames expose a WindowProxy, but reading named
+                // properties such as scrollTo/scrollX can throw. In that case the
+                // bridge-side scroll restoration is responsible for preserving scroll.
+                finish(false);
+            }
+        };
+        window.requestAnimationFrame(apply);
+        return true;
+    }
+    catch {
+        return 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 getUrlOrigin(url) {
+    if (!url)
+        return undefined;
+    try {
+        const parsedUrl = new URL(url, window.location.href);
+        alignLoopbackHostToEditor(parsedUrl);
+        alignXmCloudManagedEditingHostToEditor(parsedUrl);
+        return parsedUrl.origin;
+    }
+    catch {
+        return undefined;
+    }
+}
+function resolveBridgeComponentId(rawId, page) {
+    if (!rawId)
+        return undefined;
+    if (!page?.rootComponent)
+        return rawId;
+    const normalizedId = cleanId(rawId);
+    if (!normalizedId)
+        return undefined;
+    let exactMatch;
+    let datasourceMatch;
+    const visit = (component) => {
+        if (!exactMatch && cleanId(component.id) === normalizedId) {
+            exactMatch = component;
+        }
+        if (!datasourceMatch &&
+            cleanId(component.datasourceItem?.id) === normalizedId) {
+            datasourceMatch = component;
+        }
+        for (const placeholder of component.placeholders || []) {
+            for (const child of placeholder.components || []) {
+                visit(child);
+            }
+        }
+    };
+    visit(page.rootComponent);
+    return exactMatch?.id ?? datasourceMatch?.id ?? rawId;
+}
+function getOrderedBridgeComponentIds(geometry, page) {
+    const orderedIds = [];
+    for (const target of geometry?.targets ?? []) {
+        if (target.kind !== "component")
+            continue;
+        const componentId = resolveBridgeComponentId(target.componentId, page);
+        if (!componentId)
+            continue;
+        if (orderedIds.some((id) => bridgeIdsMatch(id, componentId)))
+            continue;
+        orderedIds.push(componentId);
+    }
+    return orderedIds;
+}
+function bridgeIdsMatch(left, right) {
+    const normalizedLeft = normalizeMarkerId(left);
+    const normalizedRight = normalizeMarkerId(right);
+    return (!!normalizedLeft && !!normalizedRight && normalizedLeft === normalizedRight);
+}
+function bridgeComponentSelectionsMatch(left, right) {
+    if ((left?.length ?? 0) !== (right?.length ?? 0))
+        return false;
+    return (left ?? []).every((leftId, index) => bridgeIdsMatch(leftId, right?.[index]));
+}
+function bridgeDescriptorMatchesItem(bridgeItem, item) {
+    if (!bridgeItem?.id)
+        return true;
+    if (!bridgeIdsMatch(bridgeItem.id, item.id))
+        return false;
+    if (bridgeItem.language &&
+        item.language &&
+        bridgeItem.language.toLowerCase() !== item.language.toLowerCase()) {
+        return false;
+    }
+    if (typeof bridgeItem.version === "number" &&
+        Number.isFinite(bridgeItem.version) &&
+        typeof item.version === "number" &&
+        Number.isFinite(item.version) &&
+        bridgeItem.version !== item.version) {
+        return false;
+    }
+    return true;
+}
+function fieldIdentifierMatches(field, fieldId) {
+    return (bridgeIdsMatch(field.id, fieldId) ||
+        bridgeIdsMatch(field.name, fieldId) ||
+        bridgeIdsMatch(field.displayName, fieldId));
+}
+function bridgeFieldMatchesChangedField(bridgeFieldId, changedFieldId, field) {
+    return (bridgeIdsMatch(bridgeFieldId, changedFieldId) ||
+        bridgeIdsMatch(bridgeFieldId, field.id) ||
+        bridgeIdsMatch(bridgeFieldId, field.name) ||
+        bridgeIdsMatch(bridgeFieldId, field.displayName));
+}
+function findModifiedBridgeField({ modifiedFields, structureField, field, itemDescriptor, dirtyOnly, }) {
+    return modifiedFields?.find((candidate) => {
+        if (dirtyOnly && !candidate.isDirty)
+            return false;
+        if (!bridgeDescriptorMatchesItem(candidate.item, itemDescriptor)) {
+            return false;
+        }
+        return (bridgeIdsMatch(candidate.fieldId, structureField.fieldId) ||
+            fieldIdentifierMatches(field, candidate.fieldId));
+    });
+}
+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"));
+}
+function isBridgeLinkShortcut(interaction) {
+    const keyboardInteraction = interaction;
+    return !!((keyboardInteraction.ctrlKey || keyboardInteraction.metaKey) &&
+        !keyboardInteraction.shiftKey &&
+        !keyboardInteraction.altKey &&
+        (keyboardInteraction.key?.toLowerCase() === "k" ||
+            keyboardInteraction.code === "KeyK"));
+}
+function isBridgeLinkShortcutRange(range, interaction) {
+    return !!(range?.text?.trim() &&
+        range.isRichText &&
+        range.elementKey &&
+        ((interaction.elementKey && range.elementKey === interaction.elementKey) ||
+            bridgeIdsMatch(range.fieldId, interaction.fieldId)));
+}
+export function PageViewerFrame(props) {
     const editContext = useEditContext();
-    const fieldsContext = useFieldsEditContext();
     useViewportChangeSignal();
+    if (!editContext || !props.pageViewContext)
+        return null;
+    return (_jsx(PageViewerFrameContent, { ...props, editContext: editContext, pageViewContext: props.pageViewContext }));
+}
+function PageViewerFrameContent({ compareView, pageViewContext, editContext, className, slotCloseButton, }) {
+    const fieldsContext = useFieldsEditContext();
+    const slotContext = useSlotContext();
     const pathname = usePathname();
     const pageViewContextRef = useRef(undefined);
-    if (!editContext || !pageViewContext)
-        return null;
     useEffect(() => {
         pageViewContextRef.current = pageViewContext;
     }, [pageViewContext]);
     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 previousBridgeInlineEditModeRef = useRef(editContext.mode);
+    const latestBridgeScrollRef = useRef(undefined);
+    const directOverlayScrollSyncRef = useRef(false);
+    const pendingRefreshScrollRef = useRef(undefined);
+    const restorePendingRefreshScroll = useCallback((iframe, targetScroll, observedScroll) => {
+        if (!targetScroll)
+            return;
+        const clearPendingTarget = () => {
+            if (pendingRefreshScrollRef.current === targetScroll) {
+                pendingRefreshScrollRef.current = undefined;
+            }
+        };
+        const restoreStarted = restoreIframeWindowScroll(iframe, targetScroll, {
+            maxAttempts: 150,
+            onSettled: clearPendingTarget,
+            onExpired: clearPendingTarget,
+        });
+        if (!restoreStarted) {
+            clearPendingTarget();
+        }
+        const currentScroll = observedScroll ??
+            getIframeWindowScroll(iframe) ?? { x: 0, y: 0 };
+        const deltaX = targetScroll.x - currentScroll.x;
+        const deltaY = targetScroll.y - currentScroll.y;
+        if (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1) {
+            bridgeClientRef.current?.sendCommand("scrollBy", {
+                x: deltaX,
+                y: deltaY,
+                behavior: "instant",
+            });
+        }
+    }, []);
+    const suppressNextSelectionScrollRef = useRef(false);
+    // Timestamp (ms) until which selection auto-scroll is suppressed. Held open for
+    // the whole drag and a short window after, so the drop's re-selection doesn't
+    // jump the page (see the dragObject transition effect that drives it).
+    const suppressSelectionScrollUntilRef = useRef(0);
+    // 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 scrollIntoViewRequestRef = useRef({
+        signature: "",
+        requestedTextRangeGeometry: false,
+    });
     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 !==
@@ -56,7 +623,6 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
         }
     }, [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) => {
@@ -72,1028 +638,688 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
     // 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 = iframe.contentDocument;
-        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 sendCancelInlineEdit = useCallback((payload) => {
+        return (bridgeClientRef.current?.sendCommand("cancelInlineEdit", payload) ??
+            false);
+    }, []);
+    const sendApplyFieldPatchCommand = useCallback((payload) => {
+        return (bridgeClientRef.current?.sendCommand("applyFieldPatch", 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,
+        sendCancelInlineEdit,
+        sendApplyFieldPatch: sendApplyFieldPatchCommand,
     });
-    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 = iframeRef.current?.contentDocument;
-        const isPreview = editContext.mode === "preview";
-        if (doc)
-            ensureEditorCssGuard(doc, !isPreview);
-        if (isPreview) {
-            editContextRef.current?.setSelectedRange(undefined);
-            fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
+        return editContext.registerModeChangeParticipant({
+            beforeModeChange: (nextMode) => {
+                if (nextMode === "suggestions" &&
+                    getSelectedRangeInlineEditInteraction(editContextRef.current?.selectedRange)) {
+                    return;
+                }
+                editContext.operations.onFieldBlur?.();
+                void fieldsContextRef.current?.setFocusedField(undefined, false);
+                endBridgeFieldFocus();
+            },
+            clearInlineDedupe: () => {
+                clearBridgeInlineDedupe();
+            },
+        });
+    }, [
+        clearBridgeInlineDedupe,
+        editContext,
+        editContextRef,
+        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";
-        const savedScrollY = iframeRef.current?.contentWindow?.scrollY ?? 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));
+        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;
         }
-        // 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");
+        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"]'));
+        };
+        const isInlineAiUiPresent = () => !!document.querySelector(".agent-inline-dialog, .agent-inline-trigger");
+        const inlineAiUiFocused = isInlineAiUiFocused();
+        const inlineAiUiPresent = isInlineAiUiPresent();
+        if (selection.collapsed && (inlineAiUiFocused || inlineAiUiPresent)) {
+            return;
         }
-        else {
-            renderUrl.searchParams.delete("parhelia_layout");
+        if (selection.collapsed ||
+            !selection.text ||
+            !selection.activeField?.fieldId) {
+            sendBridgeRemoteCaretPosition(selection);
+            if (!inlineAiUiFocused && !inlineAiUiPresent) {
+                editor.setSelectedRange(undefined);
+            }
+            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.
-        const currentIframeUrl = iframeRef.current?.contentWindow?.location?.href;
-        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);
-            refreshFn(renderUrl.toString());
-            const doc = iframeRef.current?.contentDocument;
-            if (doc) {
-                requestPageModelBuild(doc);
-            }
-            // The integration refresh path may replace/normalize <head> during hydration,
-            // which can remove our injected style. Re-ensure a few times post-refresh.
-            const ensureLater = (delay) => {
-                setTimeout(() => {
-                    const doc = iframeRef.current?.contentDocument;
-                    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);
+        clearBridgeRemoteCaretPosition();
+        const item = selection.activeField.item ??
+            pageViewContextRef.current?.page?.item ??
+            pageViewContextRef.current?.pageItemDescriptor;
+        if (!item?.id) {
+            editor.setSelectedRange(undefined);
+            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,
             }
+            : 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,
+            formatting: selection.formatting,
+            clientRect: selectionRect,
         };
-        const runFallbackRefresh = () => {
-            setShowSpinner(true);
-            if (shouldUseIframeSrcReload) {
-                // For initial loads and fullscreen mode, prefer a full iframe src reload.
-                // The morphdom path can race with framework hydration and leave the frame blank.
-                console.log(initialLoad
-                    ? "Initial load - setting iframe src"
-                    : "Fullscreen load - setting iframe src");
-                // Clear any stale load tracking to prevent handleLoad from incorrectly
-                // skipping spinner dismissal due to revision mismatch
-                currentLoadRef.current = null;
-                setIframeSrc(renderUrl.toString());
-            }
-            else {
-                console.log("No integration - reloading frame via fetch");
-                // Abort any in-flight load before starting a new one
-                try {
-                    currentLoadRef.current?.controller.abort();
-                }
-                catch { }
-                const controller = new AbortController();
-                const expectedRevision = editContext.revision ?? "";
-                currentLoadRef.current = { controller, revision: expectedRevision };
-                loadContent(renderUrl.toString(), initialLoad, expectedRevision, controller.signal);
+        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,
             }
-        };
-        // Use requestRefresh for normal refreshes, but force full reload for version changes.
-        // If requestRefresh is temporarily unavailable, wait briefly before falling back.
-        const integrationRefreshFn = iframeRef.current?.contentWindow?.requestRefresh;
-        if (!versionChanged && integrationRefreshFn) {
-            runIntegrationRefresh(integrationRefreshFn, "Integration - requesting refresh");
-        }
-        else if (!versionChanged && !shouldUseIframeSrcReload) {
-            const retryDelayMs = 150;
-            const retryTimer = setTimeout(() => {
-                const retryIntegrationRefreshFn = iframeRef.current?.contentWindow?.requestRefresh;
-                if (retryIntegrationRefreshFn) {
-                    runIntegrationRefresh(retryIntegrationRefreshFn, "Integration became available after brief wait - requesting refresh");
-                    return;
-                }
-                runFallbackRefresh();
-            }, 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])
+            : 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;
-            const fieldElement = findFieldElement(iframeRef.current, fieldsContext.focusedField);
-            if (fieldElement) {
-                const rect = getAbsolutePosition(fieldElement, iframeRef.current);
-                const scrollTop = iframeRef.current?.contentWindow?.scrollY || 0;
-                const iframeHeight = iframeRef.current?.getBoundingClientRect().height;
-                const isInViewport = rect.y + rect.height > scrollTop &&
-                    rect.y < scrollTop + (iframeHeight || 0);
-                if (!isInViewport) {
-                    iframeRef.current?.contentWindow?.scrollTo({
-                        top: rect.y,
-                        behavior: "smooth",
-                    });
-                }
-            }
-        }
-    }, [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);
-            }
-        }
-    }, [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,
-                });
+            if (candidateItems.some((item) => bridgeIdsMatch(item.id, itemId) &&
+                item.language.toLowerCase() === language.toLowerCase() &&
+                item.version === version)) {
                 return;
             }
-            console.log("Content loaded in " + (performance.now() - start) + " ms");
-            const doc = iframeRef.current?.contentDocument;
-            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?.();
-                    if (iframeRef.current.contentWindow.XA) {
-                        console.log("init XA");
-                        iframeRef.current.contentWindow.XA.init();
-                    }
-                    setShowSpinner(false);
-                }
-                ensureEditorCssGuard(doc, editContext.mode !== "preview");
-                setTimeout(() => {
-                    injectSXAScripts(iframeRef.current);
-                }, 1000);
-                try {
-                    requestPageModelBuild(doc);
-                }
-                catch (buildErr) { }
+            candidateItems.push({
+                id: itemId,
+                language,
+                version,
+                name: source?.name ?? fallbackItem?.name,
+                displayName: source?.displayName ?? fallbackItem?.displayName,
+                path: source?.path ?? fallbackItem?.path,
+                database: source?.database ?? fallbackItem?.database,
+            });
+        };
+        addCandidateItem(selectedRangeItem);
+        addCandidateItem(interaction.item);
+        addCandidateItem(structureField?.item);
+        addCandidateItem(component?.datasourceItem);
+        component?.items.forEach(addCandidateItem);
+        addCandidateItem(fallbackItem);
+        for (const item of candidateItems) {
+            const repositoryItem = await editContextRef.current?.itemsRepository.getItem(item);
+            const repositoryField = repositoryItem?.fields.find((field) => fieldIdentifierMatches(field, fieldId));
+            if (repositoryField) {
+                return {
+                    fieldId: repositoryField.id,
+                    item,
+                };
             }
         }
-        catch (err) {
-            if (err?.name === "AbortError") {
-                // Swallow aborts – a newer refresh superseded this one
+        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;
-            }
-            throw err;
-        }
-    };
-    useEffect(() => {
-        if (!editContext.scrollIntoView ||
-            !iframeRef.current?.contentDocument?.documentElement)
-            return;
-        const component = getComponentById(editContext.scrollIntoView, pageViewContextRef.current.page);
-        if (!component)
-            return;
-        const rect = findComponentRect(iframeRef.current, component, true);
-        if (!rect)
-            return;
-        // Check if element is already in viewport
-        const iframeHeight = iframeRef.current.getBoundingClientRect().height;
-        const scrollTop = iframeRef.current?.contentWindow?.scrollY || 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;
-        }
-        const scrollPosition = rect.rect.y - iframeHeight / 2 + rect.rect.height / 2;
-        iframeRef.current?.contentWindow?.scrollTo({
-            top: scrollPosition,
-            behavior: "smooth",
-        });
-        editContext.setScrollIntoView(undefined);
-    }, [editContext.scrollIntoView, pageViewContext.page]);
-    useEffect(() => {
-        const handleMessage = (message) => {
-            if (message.origin !== window.location.origin)
+            if (!interaction.deltaY)
                 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 = iframeRef.current?.contentDocument?.getSelection();
-        const isInlineAiUiFocused = () => {
-            const activeEl = document.activeElement;
-            return !!(activeEl?.closest(".agent-inline-dialog") ||
-                activeEl?.closest(".agent-inline-trigger") ||
-                activeEl?.closest('[role="dialog"]'));
-        };
-        if (!sel || sel.rangeCount === 0) {
-            if (!isInlineAiUiFocused()) {
-                editContextRef.current?.setSelectedRange(undefined);
-            }
-            return;
-        }
-        // Preserve the last non-collapsed selection while the inline AI UI takes focus.
-        // This avoids losing context when users click the trigger or dialog.
-        if (sel.isCollapsed && isInlineAiUiFocused()) {
-            return;
-        }
-        // Find the field element containing the selection/caret
-        const fieldElement = findClosestFieldElement(sel.anchorNode);
-        if (!fieldElement) {
-            if (!isInlineAiUiFocused()) {
-                editContextRef.current?.setSelectedRange(undefined);
-            }
-            return;
-        }
-        const fieldId = fieldElement.getAttribute("data-fieldid");
-        if (!fieldId)
+            const zoomContext = (compareView ? slotContext?.primaryPageViewContext : undefined) ??
+                pageViewContextRef.current;
+            const direction = interaction.deltaY < 0 ? 1 : -1;
+            zoomContext?.setZoom((value) => clampEditorZoom(value + direction * ZOOM_STEP));
             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 = iframeRef.current?.contentDocument?.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 },
-                            },
-                            refresh: "none",
-                            value: valueToSave,
-                        });
+        if (interaction.kind === "keydown") {
+            if (isBridgeLinkShortcut(interaction)) {
+                const editor = editContextRef.current;
+                let linkRange = editor?.selectedRange;
+                if (!isBridgeLinkShortcutRange(linkRange, interaction)) {
+                    const bridgeSelection = pageViewContextRef.current?.bridgeSelection;
+                    const item = bridgeSelection?.activeField?.item ??
+                        pageViewContextRef.current?.page?.item ??
+                        pageViewContextRef.current?.pageItemDescriptor;
+                    if (bridgeSelection &&
+                        !bridgeSelection.collapsed &&
+                        bridgeSelection.text?.trim() &&
+                        bridgeSelection.activeField?.isRichText &&
+                        bridgeSelection.activeField.fieldId &&
+                        bridgeSelection.activeField.elementKey &&
+                        item?.id &&
+                        item.language &&
+                        typeof item.version === "number") {
+                        const metadata = bridgeSelection.metadata ?? {};
+                        const iframeRect = iframe.getBoundingClientRect();
+                        const selectionRect = bridgeSelection.rect
+                            ? {
+                                x: iframeRect.left + bridgeSelection.rect.left,
+                                y: iframeRect.top + bridgeSelection.rect.top,
+                                width: bridgeSelection.rect.width,
+                                height: bridgeSelection.rect.height,
+                                top: iframeRect.top + bridgeSelection.rect.top,
+                                right: iframeRect.left + bridgeSelection.rect.right,
+                                bottom: iframeRect.top + bridgeSelection.rect.bottom,
+                                left: iframeRect.left + bridgeSelection.rect.left,
+                            }
+                            : undefined;
+                        linkRange = {
+                            itemId: item.id,
+                            fieldId: bridgeSelection.activeField.fieldId,
+                            elementKey: bridgeSelection.activeField.elementKey,
+                            isRichText: bridgeSelection.activeField.isRichText,
+                            language: item.language,
+                            version: item.version,
+                            startOffset: bridgeSelection.startOffset ?? 0,
+                            endOffset: bridgeSelection.endOffset ?? bridgeSelection.startOffset ?? 0,
+                            text: bridgeSelection.text,
+                            contextBefore: typeof metadata.contextBefore === "string"
+                                ? metadata.contextBefore
+                                : undefined,
+                            contextAfter: typeof metadata.contextAfter === "string"
+                                ? metadata.contextAfter
+                                : undefined,
+                            formatting: bridgeSelection.formatting,
+                            clientRect: selectionRect,
+                        };
                     }
                 }
-                catch (error) {
-                    console.error("[PageViewerFrame] Failed to replace text:", error);
+                if (isBridgeLinkShortcutRange(linkRange, interaction)) {
+                    document.dispatchEvent(new CustomEvent(BRIDGE_INLINE_LINK_OPEN_EVENT, {
+                        bubbles: true,
+                        cancelable: true,
+                        detail: { selectedRange: linkRange },
+                    }));
                 }
-            },
-        });
-    }, 300);
-    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)
-                return;
-            // Activate the editor slot this iframe belongs to
-            const slotElement = iframe?.closest("[data-editor-slot]");
-            const slotId = slotElement?.getAttribute("data-slotid");
-            if (slotId && editContextRef.current?.activeSlotId !== slotId) {
-                editContextRef.current?.setActiveSlot(slotId);
-            }
-            // Skip selection changes on right-click (button 2) - let context menu handler deal with it
-            if (event.button === 2)
                 return;
-            const 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 = iframeRef.current?.contentDocument;
-                        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]);
-                        }
-                    }
-                    else {
-                        editContextRef.current?.select([componentId]);
-                    }
-                }
-                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);
-                    }
-                }
-                else {
-                    // Regular click: always select just this component
-                    editContextRef.current?.select([componentId]);
+            if (isBridgeInlineAiShortcut(interaction)) {
+                const editor = editContextRef.current;
+                const field = await resolveBridgeFieldDescriptor(interaction);
+                if (editor && field) {
+                    await editor.setFocusedField(field, editor.mode !== "suggestions");
                 }
-                //  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) {
-                            return;
+                const iframeRect = iframe.getBoundingClientRect();
+                const bridgeSelection = pageViewContextRef.current?.bridgeSelection;
+                const fallbackCaretRect = !interaction.selectionRect &&
+                    !interaction.caretRect &&
+                    bridgeSelection?.collapsed &&
+                    bridgeSelection.rect &&
+                    bridgeSelection.activeField?.fieldId &&
+                    bridgeIdsMatch(bridgeSelection.activeField.fieldId, interaction.fieldId)
+                    ? bridgeSelection.rect
+                    : undefined;
+                const resolvedSelectionRect = interaction.selectionRect ??
+                    interaction.caretRect ??
+                    fallbackCaretRect;
+                const toolbarRect = await waitForVisibleBridgeToolbarRect();
+                const selectedRange = editContextRef.current?.selectedRange ?? editor?.selectedRange;
+                const toolbarAnchor = getInlineAiAnchorFromBridgeToolbar(selectedRange, toolbarRect ?? getVisibleBridgeToolbarRect());
+                const caretAnchor = toolbarAnchor
+                    ? toolbarAnchor
+                    : selectedRange?.text && selectedRange.clientRect
+                        ? {
+                            x: selectedRange.clientRect.left +
+                                selectedRange.clientRect.width / 2,
+                            y: selectedRange.clientRect.bottom,
+                            origin: "caret",
                         }
-                    }
-                    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
-                    }
-                }
-                else {
-                    // Clicked inside iframe but not on a field: clear focused field
-                    fieldsContextRef.current?.setFocusedField(undefined, false);
-                    fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
-                    // Release field locks when unfocusing field
-                    if (editContextRef.current?.unlockField) {
-                        editContextRef.current.unlockField(undefined);
-                    }
-                }
-            }
-            const 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 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", {
+                        : resolvedSelectionRect
+                            ? {
+                                x: iframeRect.left +
+                                    resolvedSelectionRect.left +
+                                    (resolvedSelectionRect.width ?? 0) / 2,
+                                y: iframeRect.top + resolvedSelectionRect.bottom,
+                                origin: "caret",
+                            }
+                            : undefined;
+                document.dispatchEvent(new CustomEvent("inline-ai-open", {
                     bubbles: true,
                     cancelable: true,
-                });
-                window.parent.document.dispatchEvent(parentEvent);
-                // Also prevent default to avoid any browser behavior
-                event.preventDefault();
-                event.stopPropagation();
+                    detail: caretAnchor ? { anchor: caretAnchor } : undefined,
+                }));
                 return;
             }
-            editContextRef.current?.handleKeyDown(event);
-        };
-        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);
-                    }
-                }, 100);
+            const keyboardEvent = createKeyboardEventFromBridgeInteraction(interaction);
+            if (keyboardEvent) {
+                void editContextRef.current?.handleKeyDown(keyboardEvent);
             }
-            else {
-                blockBlurEventRef.current = 0;
+            return;
+        }
+        if (interaction.kind !== "click" && interaction.kind !== "contextMenu") {
+            return;
+        }
+        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);
         };
-        const detachListeners = () => {
-            if (!iframe || !boundDocument || !boundDocumentElement)
+        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,
+                };
+            }
+        }
+        const componentId = resolveBridgeComponentId(effectiveInteraction.componentId, pageViewContextRef.current?.page);
+        const isEditableFieldClick = !!(effectiveInteraction.kind === "click" &&
+            effectiveInteraction.fieldId &&
+            effectiveInteraction.elementKey &&
+            !effectiveInteraction.ctrlKey &&
+            !effectiveInteraction.shiftKey &&
+            !effectiveInteraction.metaKey);
+        const isInlineAiUiPresent = () => !!document.querySelector(".agent-inline-dialog, .agent-inline-trigger");
+        const closeInlineAiIfOpen = (clearSelection = true) => {
+            if (!isInlineAiUiPresent())
                 return;
-            boundDocumentElement.removeEventListener("mousedown", handleIframeMouseDown);
-            boundDocumentElement.removeEventListener("click", handleIframeClick);
-            iframe.contentWindow?.removeEventListener("contextmenu", handleContextMenu, true);
-            boundDocument.removeEventListener("selectionchange", selecionChangeHandler);
-            boundDocument.removeEventListener("keydown", handleIframeKeyDown);
-            boundDocumentElement.removeEventListener("blur", handleIframeBlur, true);
-            boundScrollContainer?.removeEventListener("scroll", handleIframeScroll);
-            iframe.contentWindow?.removeEventListener("scroll", handleIframeWindowScroll);
-            mutationObserver?.disconnect();
-            mutationObserver = null;
-            boundScrollContainer = null;
-            boundDocumentElement = null;
-            boundDocument = null;
+            if (clearSelection) {
+                editor.setSelectedRange(undefined);
+            }
+            document.dispatchEvent(new CustomEvent(INLINE_AI_CLOSE_EVENT));
         };
-        const attachListeners = () => {
-            const iframeDocument = iframe.contentDocument || iframe.contentWindow?.document;
-            const iframeDocumentElement = iframeDocument?.documentElement;
-            if (!iframeDocument || !iframeDocumentElement)
-                return;
-            // Skip if already bound to current root element.
-            if (boundDocument === iframeDocument &&
-                boundDocumentElement === iframeDocumentElement) {
+        const clearSelectedRangeForEditableClick = () => {
+            const selectedRange = editor.selectedRange;
+            const clickMatchesActiveTextSelection = !!(selectedRange?.text?.trim() &&
+                selectedRange.elementKey &&
+                effectiveInteraction.elementKey &&
+                selectedRange.elementKey === effectiveInteraction.elementKey);
+            if (clickMatchesActiveTextSelection) {
+                closeInlineAiIfOpen(false);
                 return;
             }
-            detachListeners();
-            boundDocument = iframeDocument;
-            boundDocumentElement = iframeDocumentElement;
-            iframeDocumentElement.addEventListener("mousedown", handleIframeMouseDown);
-            iframeDocumentElement.addEventListener("click", handleIframeClick);
-            iframe.contentWindow?.addEventListener("contextmenu", handleContextMenu, true);
-            boundScrollContainer =
-                iframe.contentWindow?.document.scrollingElement ||
-                    iframe.contentWindow?.document.body ||
-                    null;
-            boundScrollContainer?.addEventListener("scroll", handleIframeScroll);
-            iframe.contentWindow?.addEventListener("scroll", handleIframeWindowScroll);
-            iframeDocument.addEventListener("selectionchange", selecionChangeHandler);
-            iframeDocument.addEventListener("keydown", handleIframeKeyDown);
-            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);
+            closeInlineAiIfOpen(true);
         };
-        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, iframe.contentWindow?.location?.href || window.location.href);
-            }
-            catch {
-                return 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();
-                }
+        const currentOverlay = editor.currentOverlay;
+        const isGeneratorOverlay = !!(currentOverlay &&
+            typeof currentOverlay === "string" &&
+            currentOverlay.endsWith("_generators"));
+        if (interaction.kind === "click" && currentOverlay === "context-menu") {
+            editor.setCurrentOverlay(undefined);
+        }
+        if (currentOverlay &&
+            currentOverlay !== "context-menu" &&
+            !isGeneratorOverlay) {
+            editor.setCurrentOverlay(undefined);
+        }
+        if (!componentId) {
+            if (interaction.kind === "click")
+                selectFromBridgeInteraction([]);
+            if (isEditableFieldClick) {
+                clearSelectedRangeForEditableClick();
+                await beginTrackedBridgeInlineEdit(effectiveInteraction);
             }
-            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 (interaction.kind === "click") {
+                closeInlineAiIfOpen();
+                endTrackedBridgeFieldFocus();
             }
-            const itemId = cleanId(itemIdRaw);
-            if (!itemId)
-                return undefined;
-            const language = hrefUrl.searchParams.get("sc_lang") ??
-                hrefUrl.searchParams.get("lang") ??
-                hrefUrl.searchParams.get("language") ??
-                anchor.getAttribute("data-language") ??
-                anchor.getAttribute("sc_lang") ??
-                attributeContainer?.getAttribute("data-language") ??
-                attributeContainer?.getAttribute("sc_lang") ??
-                editContextRef.current?.currentItemDescriptor?.language ??
-                editContextRef.current?.item?.language;
-            if (!language)
-                return undefined;
-            const version = parsePositiveInt(hrefUrl.searchParams.get("sc_version")) ??
-                parsePositiveInt(hrefUrl.searchParams.get("version")) ??
-                parsePositiveInt(anchor.getAttribute("data-version")) ??
-                parsePositiveInt(attributeContainer?.getAttribute("data-version")) ??
-                editContextRef.current?.currentItemDescriptor?.version ??
-                editContextRef.current?.item?.version ??
-                0;
-            return {
-                id: itemId,
-                language,
-                version,
-            };
-        };
-        const handleIframeClick = async (event) => {
-            const target = event.target;
-            if (!target)
-                return;
-            const anchor = target.tagName.toLowerCase() === "a"
-                ? target
-                : target.closest("a");
-            if (!anchor)
-                return;
-            const href = anchor.getAttribute("href") || anchor.href;
-            if (!href || href.startsWith("#") || href.startsWith("javascript:")) {
-                return;
+            return;
+        }
+        const currentSelection = editor.selection || [];
+        if (interaction.kind === "contextMenu") {
+            if (pageViewContextRef.current) {
+                pageViewContextRef.current.bridgeInteraction = effectiveInteraction;
             }
-            const mode = editContextRef.current?.mode;
-            const isPreviewOrSuggestions = mode === "preview" || mode === "suggestions";
-            if (isPreviewOrSuggestions) {
-                let hrefUrl;
-                try {
-                    hrefUrl = new URL(anchor.href, iframe.contentWindow?.location?.href || window.location.href);
-                }
-                catch {
-                    return;
-                }
-                const iframeOrigin = iframe.contentWindow?.location?.origin;
-                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;
+            const selectedIds = currentSelection.includes(componentId)
+                ? currentSelection
+                : [componentId];
+            if (!currentSelection.includes(componentId)) {
+                selectFromBridgeInteraction(selectedIds);
             }
-            // 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)
+            const page = pageViewContextRef.current?.page;
+            if (!page)
                 return;
-            if (event.ctrlKey)
+            const selectedComponents = selectedIds
+                .map((id) => getComponentById(id, page))
+                .filter((component) => !!component);
+            if (selectedComponents.length === 0)
                 return;
-            event.preventDefault();
-            event.stopPropagation();
-            let componentId = findNearestEditableComponentId(target);
-            const pageForContextMenu = pageViewContextRef.current?.page;
-            if (componentId && pageForContextMenu) {
-                componentId = resolveComponentIdForTarget(componentId, target, pageForContextMenu);
-            }
-            // Layout components can now be right-clicked even when showLayoutComponents is false
-            // Context menu will show limited/read-only actions
-            if (componentId) {
-                // Only change selection if right-clicking on a component that's not in the current selection
-                if (!editContextRef.current?.selection.includes(componentId)) {
-                    // Right-clicking on a component not in the selection - select just that component
-                    editContextRef.current.select([componentId]);
-                }
-                // else: right-clicking on a component already in the selection - keep current selection
-            }
-            const fieldElement = findParentWithAttribute(target, "data-fieldid");
-            const selectedComponents = editContextRef.current?.selection
-                .map((id) => getComponentById(id, pageViewContextRef.current.page))
-                .filter((x) => x);
-            // Context menu will now show for layout components even when showLayoutComponents is false
-            // Commands will be appropriately filtered/disabled
             const iframeRect = iframe.getBoundingClientRect();
+            const 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: event.shiftKey,
-                altKey: event.altKey,
-                ctrlKey: event.ctrlKey,
+                shiftKey: interaction.shiftKey,
+                altKey: interaction.altKey,
+                ctrlKey: interaction.ctrlKey,
+                metaKey: interaction.metaKey,
                 view: window,
-                clientX: event.clientX + iframeRect.x,
-                clientY: event.clientY + iframeRect.y,
+                clientX,
+                clientY,
+                button: 2,
             });
-            // 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(() => {
+            const loadingTimer = window.setTimeout(() => {
                 loadingShown = true;
-                editContextRef.current?.showContextMenu(adjustedEvent, [
+                editor.showContextMenu(adjustedEvent, [
                     {
                         id: "loading",
-                        label: "Loading…",
+                        label: "Loading...",
                         disabled: true,
                         icon: _jsx(Spinner, { size: "sm", className: "mr-2" }),
                     },
                 ]);
             }, 100);
-            const field = fieldElement
-                ? getFieldDescriptorFromElement(fieldElement)
-                : undefined;
+            const field = await resolveBridgeFieldDescriptor(effectiveInteraction);
             const fieldButtons = field ? await loadFieldButtons(field) : [];
-            // Create a handler that has access to the current menu position
-            const handleParameterizedActionWithPosition = (field, action, allFieldButtons, event) => {
+            const handleParameterizedActionWithPosition = (field, action) => {
                 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
+                window.setTimeout(() => {
                     const tempElement = document.createElement("div");
                     tempElement.style.position = "fixed";
                     tempElement.style.left = menuPosition.x + "px";
@@ -1103,7 +1329,6 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
                     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,
@@ -1116,334 +1341,1059 @@ export function PageViewerFrame({ compareView, pageViewContext, className, slotC
                         enumerable: true,
                     });
                     fieldActionsOverlay.current?.show(positionedEvent, action);
-                    // Clean up the temporary element after overlay is shown
-                    setTimeout(() => {
-                        document.body.removeChild(tempElement);
+                    window.setTimeout(() => {
+                        tempElement.remove();
                     }, 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);
-        };
-        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;
+            const items = await buildComponentContextMenuItems(selectedComponents, editor, field, fieldButtons, handleParameterizedActionWithPosition);
+            window.clearTimeout(loadingTimer);
+            if (loadingShown) {
+                editor.updateContextMenu(items);
             }
-            setShowSpinner(false);
-            attachListeners();
-        };
-        rebindIframeInteractionsRef.current = attachListeners;
-        if (iframe) {
-            // If the iframe is already loaded, attach the listener immediately
-            if (iframe.contentDocument?.readyState === "complete" ||
-                iframe.contentDocument?.readyState === "interactive") {
-                handleLoad();
+            else {
+                editor.showContextMenu(adjustedEvent, items);
             }
-            iframe.addEventListener("load", handleLoad);
+            return;
         }
-        // Cleanup function
-        return () => {
-            rebindIframeInteractionsRef.current = null;
-            if (iframe) {
-                iframe.removeEventListener("load", handleLoad);
+        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);
+                        }
+                    }
+                    selectFromBridgeInteraction(nextSelection);
+                }
+                else {
+                    selectFromBridgeInteraction(range);
+                }
             }
-            detachListeners();
-        };
-    }, [iframeRef.current]);
-    useEffect(() => {
-        iframeRef.current?.contentWindow?.postMessage({ type: "componentsSelected", componentIds: editContext.selection }, window.location.origin);
-    }, [editContext.selection]);
-    const updateScrollPosition = (e) => {
-        setScroll(e);
-        if (!compareView)
-            pageViewContextRef.current?.setScroll(e);
-    };
+            else {
+                selectFromBridgeInteraction([componentId]);
+            }
+            return;
+        }
+        if (interaction.ctrlKey || interaction.metaKey) {
+            if (currentSelection.includes(componentId)) {
+                selectFromBridgeInteraction(currentSelection.filter((id) => id !== componentId));
+            }
+            else {
+                selectFromBridgeInteraction([...currentSelection, componentId]);
+            }
+            return;
+        }
+        selectFromBridgeInteraction([componentId]);
+        if (isEditableFieldClick) {
+            clearSelectedRangeForEditableClick();
+            await beginTrackedBridgeInlineEdit(effectiveInteraction);
+        }
+        else {
+            closeInlineAiIfOpen();
+            endTrackedBridgeFieldFocus();
+        }
+    }, [
+        beginTrackedBridgeInlineEdit,
+        endTrackedBridgeFieldFocus,
+        resolveBridgeFieldDescriptor,
+    ]);
+    // Update the context whenever the iframe ref changes
+    useEffect(() => {
+        pageViewContext.setEditorIframe(iframeElement);
+    }, [iframeElement, pageViewContext.setEditorIframe]);
+    // Same-origin fast path for overlay scroll tracking. The bridge's
+    // scrollChanged postMessage is delivered as a task after the host's
+    // rendering update, so overlays driven by it paint at least one frame
+    // behind the page. When the host document is same-origin we can observe its
+    // scroll directly and translate the overlay layer synchronously inside the
+    // scroll event, which paints in the same frame. The bridge remains the only
+    // channel for cross-origin hosts and for everything besides scroll.
+    useEffect(() => {
+        const iframe = iframeElement;
+        if (!iframe)
+            return;
+        let detach;
+        const attach = () => {
+            detach?.();
+            detach = undefined;
+            directOverlayScrollSyncRef.current = false;
+            const iframeDocument = getAccessibleIframeDocument(iframe);
+            // The pre-load document is an accessible about:blank even when the
+            // host that commits afterwards is cross-origin. Binding to it would
+            // suppress the bridge path while the real host streams in, so wait for
+            // the load rebind instead.
+            if (!iframeDocument || iframeDocument.URL === "about:blank")
+                return;
+            let lastX = Number.NaN;
+            let lastY = Number.NaN;
+            const handleScroll = () => {
+                const scroll = getIframeWindowScroll(iframe);
+                if (!scroll || (scroll.x === lastX && scroll.y === lastY))
+                    return;
+                lastX = scroll.x;
+                lastY = scroll.y;
+                dispatchBridgeOverlayScroll(iframe, scroll, getBridgeGeometryScrollScale(pageViewContextRef.current?.bridgeGeometry));
+            };
+            iframeDocument.addEventListener("scroll", handleScroll, {
+                capture: true,
+                passive: true,
+            });
+            directOverlayScrollSyncRef.current = true;
+            detach = () => {
+                directOverlayScrollSyncRef.current = false;
+                iframeDocument.removeEventListener("scroll", handleScroll, {
+                    capture: true,
+                });
+            };
+        };
+        attach();
+        // Each navigation creates a new host document, so rebind per load.
+        iframe.addEventListener("load", attach);
+        return () => {
+            iframe.removeEventListener("load", attach);
+            detach?.();
+            directOverlayScrollSyncRef.current = false;
+        };
+    }, [iframeElement, loadedIframeSrc]);
+    useEffect(() => {
+        const iframe = iframeElement;
+        if (!iframe)
+            return;
+        const currentIframeSrc = iframe.src;
+        if (!iframeSrc ||
+            !loadedIframeSrc ||
+            loadedIframeSrc !== currentIframeSrc) {
+            pageViewContext.setBridgeReady(false);
+            pageViewContext.setIframeSupportsRefresh(false);
+            return;
+        }
+        const allowedHostOrigins = [
+            getUrlOrigin(pageViewContext.editUrl),
+            getUrlOrigin(pageViewContext.previewUrl),
+        ].filter((origin) => Boolean(origin));
+        if (allowedHostOrigins.length === 0) {
+            pageViewContext.setBridgeReady(false);
+            pageViewContext.setIframeSupportsRefresh(false);
+            return;
+        }
+        let client;
+        client = new BridgeClient({
+            iframe,
+            editorOrigin: window.location.origin,
+            allowedHostOrigins,
+            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",
+                            suggestionsCursorActive: editContextRef.current?.mode === "suggestions" ||
+                                !!editContextRef.current?.showSuggestedEdits,
+                            selectedComponentIds: editContextRef.current?.selection ?? [],
+                            featureFlags: {
+                                crossOriginBridge: true,
+                            },
+                            version: bridge.getDiagnostics().editorVersion,
+                            acknowledgedCapabilities: bridge.getAcknowledgedCapabilities(),
+                        });
+                        bridge.sendCommand("setZoom", {
+                            zoom: pageViewContextRef.current?.zoom ?? 1,
+                        });
+                        if (pendingRefreshScrollRef.current) {
+                            restorePendingRefreshScroll(iframe, pendingRefreshScrollRef.current);
+                        }
+                        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();
+                        // The snapshot's scroll can be a frame older than what the direct
+                        // same-origin listener already applied; prefer the live position.
+                        const overlayScroll = (directOverlayScrollSyncRef.current
+                            ? getIframeWindowScroll(iframe)
+                            : undefined) ?? event.payload.geometry.scroll;
+                        dispatchBridgeOverlayScroll(iframe, overlayScroll, getBridgeGeometryScrollScale(event.payload.geometry));
+                        dispatchBridgeOverlayGeometry(iframe, event.payload.geometry, overlayScroll);
+                        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();
+                            const overlayScroll = (directOverlayScrollSyncRef.current
+                                ? getIframeWindowScroll(iframe)
+                                : undefined) ?? event.payload.geometry.scroll;
+                            dispatchBridgeOverlayScroll(iframe, overlayScroll, getBridgeGeometryScrollScale(event.payload.geometry));
+                            dispatchBridgeOverlayGeometry(iframe, event.payload.geometry, overlayScroll);
+                            if (shouldTrackMinimapScroll()) {
+                                scrollHandlerRef.current(event.payload.geometry.scroll.y);
+                            }
+                        }
+                        if (pendingRefreshScrollRef.current) {
+                            const targetScroll = pendingRefreshScrollRef.current;
+                            const observedScroll = event.payload.geometry?.scroll ?? {
+                                x: 0,
+                                y: 0,
+                            };
+                            restorePendingRefreshScroll(iframe, targetScroll, observedScroll);
+                        }
+                        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 "dragGestureStarted":
+                        iframe?.dispatchEvent(new CustomEvent(IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, {
+                            detail: { phase: "start", ...event.payload },
+                        }));
+                        break;
+                    case "dragGestureMoved":
+                        iframe?.dispatchEvent(new CustomEvent(IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, {
+                            detail: { phase: "move", ...event.payload },
+                        }));
+                        break;
+                    case "dragGestureEnded":
+                        iframe?.dispatchEvent(new CustomEvent(IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, {
+                            detail: { phase: "end", ...event.payload },
+                        }));
+                        break;
+                    case "dragSnapshot":
+                        iframe?.dispatchEvent(new CustomEvent(IFRAME_OVERLAY_BRIDGE_DRAG_GESTURE_EVENT, {
+                            detail: { phase: "snapshot", ...event.payload },
+                        }));
+                        break;
+                    case "scrollChanged":
+                        latestBridgeScrollRef.current = event.payload.scroll;
+                        // With the direct same-origin listener active, this message is a
+                        // late echo of a scroll the overlay already applied; re-dispatching
+                        // it would briefly drag the overlay back to a stale position.
+                        if (!directOverlayScrollSyncRef.current) {
+                            dispatchBridgeOverlayScroll(iframe, event.payload.scroll, getBridgeGeometryScrollScale(pageViewContextRef.current?.bridgeGeometry));
+                        }
+                        if (shouldTrackMinimapScroll()) {
+                            scrollHandlerRef.current(event.payload.scroll.y);
+                        }
+                        break;
+                    case "renderError":
+                        console.warn("[Parhelia bridge] Host render error", event.payload);
+                        break;
+                }
+            },
+        });
+        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,
+        restorePendingRefreshScroll,
+    ]);
+    useEffect(() => {
+        const repository = editContext.itemsRepository;
+        let disposed = false;
+        const unsubscribe = repository.subscribeItemsChanged((changes) => {
+            const fieldChanges = changes.filter((change) => change.action === "update" &&
+                (change.changes.fields?.length ?? 0) > 0);
+            if (fieldChanges.length === 0)
+                return;
+            const bridge = bridgeClientRef.current;
+            const structure = pageViewContextRef.current?.bridgeStructure;
+            if (!bridge || !structure?.fields.length)
+                return;
+            const processResolvedField = (change, changedFieldId, field) => {
+                if (disposed)
+                    return;
+                const patchedElementKeys = new Set();
+                const patches = [];
+                for (const structureField of structure.fields) {
+                    if (!structureField.elementKey)
+                        continue;
+                    if (patchedElementKeys.has(structureField.elementKey))
+                        continue;
+                    if (!bridgeDescriptorMatchesItem(structureField.item, change.item)) {
+                        continue;
+                    }
+                    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);
+                }
+                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);
+                }
+                if (needsAsyncLookup) {
+                    asyncFieldChanges.push(change);
+                }
+            }
+            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;
+                        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);
+                    }
+                }
+            })().catch((error) => {
+                if (!disposed) {
+                    console.warn("[Parhelia bridge] Failed to patch host field", error);
+                }
+            });
+        });
+        return () => {
+            disposed = true;
+            unsubscribe();
+        };
+    }, [
+        buildBridgeFieldPatch,
+        editContext.itemsRepository,
+        sendBridgeFieldPatch,
+    ]);
+    useEffect(() => {
+        const bridge = bridgeClientRef.current;
+        const structure = pageViewContext.bridgeStructure;
+        if (!pageViewContext.bridgeReady || !bridge || !structure?.fields.length) {
+            return;
+        }
+        let disposed = false;
+        void (async () => {
+            const patchedElementKeys = new Set();
+            for (const structureField of structure.fields) {
+                if (disposed)
+                    return;
+                if (!structureField.elementKey)
+                    continue;
+                if (patchedElementKeys.has(structureField.elementKey))
+                    continue;
+                const fallbackItem = pageViewContextRef.current?.pageItemDescriptor ??
+                    pageViewContextRef.current?.page?.item?.descriptor;
+                const bridgeItem = structureField.item;
+                const itemDescriptor = {
+                    id: bridgeItem?.id ?? fallbackItem?.id,
+                    language: bridgeItem?.language ?? fallbackItem?.language,
+                    version: typeof bridgeItem?.version === "number"
+                        ? bridgeItem.version
+                        : fallbackItem?.version,
+                };
+                if (!itemDescriptor.id ||
+                    !itemDescriptor.language ||
+                    typeof itemDescriptor.version !== "number") {
+                    continue;
+                }
+                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 showSuggestions = editContext.mode === "suggestions" || editContext.showSuggestedEdits;
+                const dirtyModifiedField = findModifiedBridgeField({
+                    modifiedFields: fieldsContext?.modifiedFields,
+                    structureField,
+                    field,
+                    itemDescriptor: itemDescriptor,
+                    dirtyOnly: true,
+                });
+                if (!showSuggestions && !dirtyModifiedField) {
+                    continue;
+                }
+                const patch = buildBridgeFieldPatch({
+                    field,
+                    structureField,
+                    itemDescriptor: itemDescriptor,
+                });
+                if (!patch)
+                    continue;
+                patchedElementKeys.add(structureField.elementKey);
+                sendBridgeFieldPatch(bridge, patch, structureField.textContent);
+            }
+        })().catch((error) => {
+            if (!disposed) {
+                console.warn("[Parhelia bridge] Failed to patch host suggestion display", error);
+            }
+        });
+        return () => {
+            disposed = true;
+        };
+    }, [
+        buildBridgeFieldPatch,
+        editContext.itemsRepository,
+        editContext.itemsRepository.revision,
+        editContext.mode,
+        editContext.showSuggestedEdits,
+        editContext.suggestedEdits,
+        fieldsContext?.modifiedFields,
+        bridgeDomRevision,
+        pageViewContext.bridgeReady,
+        pageViewContext.bridgeStructure,
+        sendBridgeFieldPatch,
+    ]);
     useEffect(() => {
+        const requestBridgeGeometry = (payload) => {
+            const bridge = bridgeClientRef.current;
+            if (!bridge)
+                return false;
+            // The editing host only remembers the most recent queryGeometry payload.
+            // Comments, suggestions, locks and version-diff each contribute text
+            // ranges independently, so without merging they clobbered one another and
+            // fought in an endless re-request loop (heavy highlight flicker). Keep the
+            // latest ranges per `source` and always query with their union.
+            if (payload && typeof payload.source === "string") {
+                const { source, textRanges, ...rest } = payload;
+                const sources = bridgeTextRangeSourcesRef.current;
+                if (textRanges && textRanges.length > 0) {
+                    sources.set(source, textRanges);
+                }
+                else {
+                    sources.delete(source);
+                }
+                const mergedTextRanges = Array.from(sources.values()).flat();
+                return (bridge.sendCommand("queryGeometry", {
+                    ...rest,
+                    textRanges: mergedTextRanges,
+                }) ?? false);
+            }
+            return bridge.sendCommand("queryGeometry", payload) ?? false;
+        };
+        pageViewContext.requestBridgeGeometry = requestBridgeGeometry;
+        const requestBridgeScrollBy = (payload) => {
+            return bridgeClientRef.current?.sendCommand("scrollBy", payload) ?? false;
+        };
+        const requestBridgeRichTextCommand = (payload) => {
+            return (bridgeClientRef.current?.sendCommand("applyRichTextCommand", payload) ??
+                false);
+        };
+        const requestBridgePreviewGap = (payload) => {
+            return (bridgeClientRef.current?.sendCommand("previewGap", payload) ?? false);
+        };
+        const requestBridgeCaptureSnapshot = (payload) => {
+            return (bridgeClientRef.current?.sendCommand("captureComponentSnapshot", payload) ?? false);
+        };
+        pageViewContext.requestBridgeScrollBy = requestBridgeScrollBy;
+        pageViewContext.requestBridgeRichTextCommand = requestBridgeRichTextCommand;
+        pageViewContext.requestBridgePreviewGap = requestBridgePreviewGap;
+        pageViewContext.requestBridgeCaptureSnapshot = requestBridgeCaptureSnapshot;
+        return () => {
+            if (pageViewContext.requestBridgeGeometry === requestBridgeGeometry) {
+                pageViewContext.requestBridgeGeometry = undefined;
+            }
+            if (pageViewContext.requestBridgeScrollBy === requestBridgeScrollBy) {
+                pageViewContext.requestBridgeScrollBy = undefined;
+            }
+            if (pageViewContext.requestBridgePreviewGap === requestBridgePreviewGap) {
+                pageViewContext.requestBridgePreviewGap = undefined;
+            }
+            if (pageViewContext.requestBridgeCaptureSnapshot ===
+                requestBridgeCaptureSnapshot) {
+                pageViewContext.requestBridgeCaptureSnapshot = undefined;
+            }
+            if (pageViewContext.requestBridgeRichTextCommand ===
+                requestBridgeRichTextCommand) {
+                pageViewContext.requestBridgeRichTextCommand = undefined;
+            }
+        };
+    }, [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."));
+            }
+            return bridge.requestCommand("captureDom", payload, "captureDomResult", {
+                requestId: payload.requestId,
+            });
+        };
+        pageViewContext.requestBridgeCaptureDom = requestBridgeCaptureDom;
+        return () => {
+            if (pageViewContext.requestBridgeCaptureDom === requestBridgeCaptureDom) {
+                pageViewContext.requestBridgeCaptureDom = undefined;
+            }
+        };
+    }, [pageViewContext]);
+    const updateMiniMapVisibility = useDebouncedCallback(() => {
         if (!iframeRef.current)
             return;
-        const body = iframeRef.current.contentWindow?.document.documentElement;
-        if (!body)
+        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);
+            }
+        }
+        else {
+            if (contentHeight > upperThreshold && minimapEnabled) {
+                setShowMiniMap(true);
+            }
+        }
+    }, 100);
+    useEffect(() => {
+        updateMiniMapVisibility();
+    }, [
+        bridgeDomRevision,
+        bridgeGeometryRevision,
+        editContext.parheliaSettings?.showMinimap,
+        editContext.showMinimap,
+        iframeElement,
+        showMiniMap,
+        updateMiniMapVisibility,
+    ]);
+    // If the editor mode flips into preview, clear any active text selection state.
+    useEffect(() => {
+        const isPreview = editContext.mode === "preview";
+        if (isPreview) {
+            editContextRef.current?.setSelectedRange(undefined);
+        }
+    }, [editContext.mode]);
+    useEffect(() => {
+        if (!pageItemDescriptor ||
+            !pageViewContext.editUrl ||
+            !pageViewContext.previewUrl)
+            return;
+        const urlPath = editContext.mode === "preview"
+            ? pageViewContext.previewUrl
+            : pageViewContext.editUrl;
+        const renderUrl = new URL(urlPath, window.location.origin);
+        alignLoopbackHostToEditor(renderUrl);
+        alignXmCloudManagedEditingHostToEditor(renderUrl);
+        applyParheliaRenderContext(renderUrl, pageItemDescriptor, getEditorQueryParam("site") || pageViewContext.site?.name);
+        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);
+            pendingRefreshScrollRef.current ??=
+                getIframeWindowScroll(iframeRef.current) ??
+                    latestBridgeScrollRef.current;
+            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() {
+            pendingRefreshScrollRef.current =
+                getIframeWindowScroll(iframeRef.current) ??
+                    latestBridgeScrollRef.current;
+            const bridge = bridgeClientRef.current;
+            if (!bridge?.supportsCapability("refresh")) {
+                runFallbackRefresh();
+                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) {
+                pendingRefreshScrollRef.current = undefined;
+                pageViewContext.setIframeSupportsRefresh(false);
+                runFallbackRefresh();
+            }
+        }
+        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.site?.name,
+        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;
+            const bounds = findBridgeFieldDocumentBounds(pageViewContextRef.current?.bridgeGeometry, fieldsContext.focusedField);
+            const activePageViewContext = pageViewContextRef.current;
+            if (bounds && activePageViewContext) {
+                scrollBridgeBoundsIntoView(activePageViewContext, bounds, latestBridgeScrollRef.current);
+            }
+        }
+    }, [fieldsContext?.focusedField]);
+    // Drive the selection-scroll suppression window from the drag lifecycle.
+    // Declared BEFORE the selection-scroll effect so it runs first in the same
+    // commit (when a drop changes both dragObject and selection at once).
+    useEffect(() => {
+        if (editContext.dragObject) {
+            // Suppress for the whole drag.
+            suppressSelectionScrollUntilRef.current = Number.MAX_SAFE_INTEGER;
+        }
+        else if (suppressSelectionScrollUntilRef.current === Number.MAX_SAFE_INTEGER) {
+            // Drag just ended: keep suppressing briefly so the drop's re-selection
+            // (often the target's parent) doesn't scroll the page toward stale
+            // pre-move geometry.
+            suppressSelectionScrollUntilRef.current = Date.now() + 500;
+        }
+    }, [editContext.dragObject]);
+    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;
+        }
+        // Suppressed during a drag and briefly after it ends. The drag owns
+        // scrolling, and the drop's re-selection must not jump the page away from
+        // where the user dropped (toward stale pre-move geometry).
+        if (Date.now() < suppressSelectionScrollUntilRef.current)
+            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 scrollTarget = editContext.scrollIntoView;
+        const requestState = scrollIntoViewRequestRef.current;
+        const signature = getScrollIntoViewSignature(scrollTarget);
+        if (requestState.signature !== signature) {
+            requestState.signature = signature;
+            requestState.requestedTextRangeGeometry = false;
+        }
+        const exactBounds = findScrollIntoViewDocumentBounds(activePageViewContext.bridgeGeometry, scrollTarget, { includeTextRangeFallback: false });
+        let bounds = exactBounds;
+        if (!bounds &&
+            isTextRangeScrollTarget(scrollTarget) &&
+            !requestState.requestedTextRangeGeometry) {
+            requestState.requestedTextRangeGeometry = true;
+            if (requestScrollTargetGeometry(activePageViewContext, scrollTarget)) {
+                return;
+            }
+        }
+        bounds ??= findScrollIntoViewDocumentBounds(activePageViewContext.bridgeGeometry, scrollTarget, { includeTextRangeFallback: true });
+        if (bounds) {
+            scrollBridgeBoundsIntoView(activePageViewContext, bounds, latestBridgeScrollRef.current);
+        }
+        if (isTextRangeScrollTarget(scrollTarget)) {
+            activePageViewContext.requestBridgeGeometry?.({
+                source: SCROLL_INTO_VIEW_BRIDGE_SOURCE,
+                textRanges: [],
+            });
+        }
+        requestState.signature = "";
+        requestState.requestedTextRangeGeometry = false;
+        editContext.setScrollIntoView(undefined);
+    }, [
+        editContext.scrollIntoView,
+        pageViewContext.page,
+        pageViewContext.bridgeGeometry,
+    ]);
+    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);
+        };
+    }, []);
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe)
+            return;
+        const handleLoad = () => {
+            setShowSpinner(false);
+            applyIframeZoom(iframe, pageViewContextRef.current?.zoom ?? 1, "PageViewerFrame.tsx:handleLoad-zoom");
+        };
+        iframe.addEventListener("load", handleLoad);
+        return () => {
+            iframe.removeEventListener("load", handleLoad);
+        };
+    }, [iframeElement]);
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe || typeof ResizeObserver === "undefined")
             return;
-        body.style.transform = `scale(${zoom})`;
-        body.style.transformOrigin = "top center";
-        body.style.overflow = "auto";
-        //body.style.height = `${body.scrollHeight / zoom}px`;
+        let lastWidth = iframe.clientWidth;
+        let lastHeight = iframe.clientHeight;
+        let geometryTimer = null;
+        let trailingGeometryTimer = null;
+        const requestGeometry = () => {
+            geometryTimer = null;
+            const nextWidth = iframe.clientWidth;
+            const nextHeight = iframe.clientHeight;
+            if (nextWidth === lastWidth && nextHeight === lastHeight)
+                return;
+            lastWidth = nextWidth;
+            lastHeight = nextHeight;
+            bridgeClientRef.current?.sendCommand("queryGeometry", {});
+        };
+        const scheduleGeometryRequest = () => {
+            if (geometryTimer != null) {
+                window.clearTimeout(geometryTimer);
+            }
+            if (trailingGeometryTimer != null) {
+                window.clearTimeout(trailingGeometryTimer);
+            }
+            geometryTimer = window.setTimeout(requestGeometry, 50);
+            trailingGeometryTimer = window.setTimeout(() => {
+                trailingGeometryTimer = null;
+                requestGeometry();
+            }, ZOOM_TRANSITION_MS + 75);
+        };
+        const resizeObserver = new ResizeObserver(scheduleGeometryRequest);
+        resizeObserver.observe(iframe);
+        return () => {
+            resizeObserver.disconnect();
+            if (geometryTimer != null) {
+                window.clearTimeout(geometryTimer);
+            }
+            if (trailingGeometryTimer != null) {
+                window.clearTimeout(trailingGeometryTimer);
+            }
+        };
+    }, [iframeElement]);
+    useEffect(() => {
+        bridgeClientRef.current?.sendCommand("setSelection", {
+            componentIds: editContext.selection,
+        });
+    }, [editContext.selection]);
+    useEffect(() => {
+        const bridge = bridgeClientRef.current;
+        bridge?.sendCommand("setPreviewMode", {
+            enabled: editContext.mode === "preview",
+        });
+        bridge?.sendCommand("setEditorMode", {
+            mode: editContext.mode,
+            suggestionsCursorActive: editContext.mode === "suggestions" || editContext.showSuggestedEdits,
+        });
+    }, [editContext.mode, editContext.showSuggestedEdits]);
+    useEffect(() => {
+        const previousMode = previousBridgeInlineEditModeRef.current;
+        previousBridgeInlineEditModeRef.current = editContext.mode;
+        if (previousMode === editContext.mode ||
+            editContext.mode !== "suggestions") {
+            return;
+        }
+        const interaction = getSelectedRangeInlineEditInteraction(editContextRef.current?.selectedRange);
+        if (!interaction)
+            return;
+        void beginTrackedBridgeInlineEdit(interaction);
+    }, [
+        beginTrackedBridgeInlineEdit,
+        editContext.mode,
+        editContext.modeTransitionRevision,
+        editContextRef,
+    ]);
+    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, {});
     }
+    const isResponsiveDevice = pageViewContext.device === "desktop" ||
+        pageViewContext.device === "Responsive";
     const deviceHeight = pageViewContext.device === "desktop" || !pageViewContext.deviceHeight
         ? "100%"
         : pageViewContext.deviceHeight || 640;
-    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 select-none", "data-testid": "page-viewer-viewport", style: {
-                    width: pageViewContext.device === "desktop" ||
-                        pageViewContext.device === "Responsive"
-                        ? "100%"
-                        : (pageViewContext.deviceWidth || 640) +
-                            editContext.configuration.outline.width +
-                            "px",
-                }, 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", style: { height: deviceHeight }, src: iframeSrc, "data-testid": "pageEditoriframe", onLoad: () => {
-                                    // Handle iframe load when using src attribute (initial load)
-                                    const doc = iframeRef.current?.contentDocument;
-                                    if (doc && iframeSrc) {
+    const deviceWidth = isResponsiveDevice
+        ? "100%"
+        : (pageViewContext.deviceWidth || 640) +
+            editContext.configuration.outline.width +
+            "px";
+    const fullscreenPageTitle = pageViewContext.page?.item?.displayName?.trim() ||
+        pageViewContext.page?.item?.name?.trim() ||
+        "Page";
+    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.fullscreen && (_jsxs("div", { className: "border-neutral-grey-15 relative z-40 flex h-11 w-full shrink-0 items-center justify-center border-b bg-white px-28 text-center shadow-sm", "data-testid": "fullscreen-page-title-bar", children: [_jsx("div", { className: "text-neutral-grey-100 max-w-full truncate text-sm font-medium", title: fullscreenPageTitle, "data-testid": "fullscreen-page-title", children: fullscreenPageTitle }), _jsx("div", { className: "absolute top-1/2 right-3 -translate-y-1/2", children: _jsx(FullscreenControls, { device: pageViewContext.device, setDevice: (device) => pageViewContext.setDevice(device), canExit: !editContext.configuration.forceFullscreen, onExit: () => editContext.setFullscreen(false), firstMobileDeviceName: editContext.configuration.devices[0]?.name }) })] })), pageViewContext.device !== "desktop" && (_jsx(DeviceToolbar, { pageViewContext: pageViewContext, configuration: editContext.configuration })), _jsxs("div", { className: "relative flex min-h-0 flex-1 transition-[width] duration-300 ease-in-out select-none motion-reduce:transition-none", "data-testid": "page-viewer-viewport", style: {
+                    width: deviceWidth,
+                }, children: [_jsxs("div", { className: "relative h-full w-full overflow-hidden", onMouseLeave: () => {
+                            if (pageViewContext.bridgeInteraction?.kind === "hover") {
+                                pageViewContext.setBridgeInteraction(undefined);
+                            }
+                        }, children: [_jsx("iframe", { ref: bindIframeRef, className: "page-iframe h-full w-full bg-white transition-[height] duration-300 ease-in-out motion-reduce:transition-none", style: {
+                                    height: deviceHeight,
+                                    cursor: editContext.mode === "suggestions" ||
+                                        editContext.showSuggestedEdits
+                                        ? SUGGESTIONS_CURSOR_VALUE
+                                        : undefined,
+                                }, 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");
-                                        setTimeout(() => {
-                                            injectSXAScripts(iframeRef.current);
-                                        }, 1000);
-                                        requestPageModelBuild(doc);
+                                        applyIframeZoom(iframeRef.current, zoom, "PageViewerFrame.tsx:onLoad-zoom");
+                                        if (pendingRefreshScrollRef.current) {
+                                            restorePendingRefreshScroll(iframeRef.current, pendingRefreshScrollRef.current);
+                                        }
                                     }
-                                } }), iframeRef.current && (_jsx(PageEditorChrome, { iframe: iframeRef.current, compareView: compareView, pageViewContext: pageViewContext })), pageViewContext.deviceHeight && pageViewContext.device && (_jsx("div", { className: "bg-gray-4 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-gray-4/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;
-  }
-      `
-        : `
- [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 = iframe.contentDocument;
-    const iframeWindow = iframe.contentWindow;
-    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