@parhelia/core 0.1.12902 → 0.1.12904

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

@@ -1,19 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { BRIDGE_DOM_UPDATED_EVENT, MiniMap } from "./MiniMap";
+import { useEffect, useRef, useState } from "react";
+import { MiniMap } from "./MiniMap";
 import { useEditContext, useEditContextRef, useFieldsEditContext, useFieldsEditContextRef, } from "../client/editContext";
-import { useSlotContext } from "../views/editorSlotContext";
 import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
 import { PageEditorChrome } from "../page-editor-chrome/PageEditorChrome";
-import { useBridgeInlineEditing, } from "../page-editor-chrome/useBridgeInlineEditing";
-import { 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 { useViewportChangeSignal } from "./pageViewContext";
+import morphdom from "morphdom";
 import uuid from "react-uuid";
 import { cn } from "../../lib/utils";
-import { normalizeMarkerId } from "../utils";
+import { findComponentRect, findFieldElement, findNearestEditableComponentId, findParentWithAttribute, getAbsolutePosition, getFieldDescriptorFromElement, findClosestFieldElement, extractItemIdFromItemUri, } from "../utils";
+import { extractDOMSelectionContext } from "../utils/selectionContext";
 import { cleanId } from "../utils/id-helper";
-import { getComponentById } from "../componentTreeHelper";
+import { getAllComponentInstances, getComponentById, } from "../componentTreeHelper";
 import { buildComponentContextMenuItems } from "../ContextMenu";
 import { loadFieldButtons } from "../services/editService";
 import { usePathname } from "../client/navigation";
@@ -22,625 +20,34 @@ import { FieldActionsOverlay, } from "../FieldActionsOverlay";
 import { NoLayout } from "../page-editor-chrome/NoLayout";
 import { Spinner } from "../ui/Spinner";
 import { DeviceToolbar } from "./DeviceToolbar";
-import { FullscreenControls } from "../client/ui/FullscreenControls";
+import { buildPageModelSkeleton } from "./pageModelSkeletonBuilder";
 import { toSitecoreDate } from "../utils/sitecoreDate";
-import { BridgeClient } from "../bridge/BridgeClient";
-import { getSuggestionDisplayValue } from "../reviews/suggestionDisplayValue";
-import { buildBridgeFieldPatchPayload, getBridgeFieldPatchValue, } from "./bridgeFieldPatch";
-const 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) {
-    if (!targetScroll)
-        return false;
-    try {
-        const win = iframe?.contentWindow;
-        if (!win)
-            return false;
-        let attempts = 0;
-        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 && attempts < 8) {
-                    window.requestAnimationFrame(apply);
-                }
-            }
-            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.
-            }
-        };
-        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 isLoopbackHost(hostname) {
-    return hostname === "localhost" || hostname === "127.0.0.1";
-}
-function alignLoopbackHostToEditor(url) {
-    if (isLoopbackHost(window.location.hostname) &&
-        isLoopbackHost(url.hostname)) {
-        // Sitecore auth cookies are host-scoped, so localhost and 127.0.0.1 are
-        // different origins even when they point at the same machine.
-        url.hostname = window.location.hostname;
-    }
-}
-function isXmCloudManagedEditingHost(url) {
-    return url.hostname.endsWith("-eh.sitecorecloud.io");
-}
-function alignXmCloudManagedEditingHostToEditor(url) {
-    if (window.location.hostname.endsWith(".sitecorecloud.io") &&
-        isXmCloudManagedEditingHost(url)) {
-        url.protocol = window.location.protocol;
-        url.hostname = window.location.hostname;
-        url.port = window.location.port;
-    }
-}
-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 getEditorQueryParam(name) {
-    try {
-        return new URLSearchParams(window.location.search).get(name) || undefined;
-    }
-    catch {
-        return undefined;
-    }
-}
-function inferRoutePathFromSitecoreItemPath(itemPath) {
-    const segments = (itemPath || "")
-        .split("/")
-        .map((segment) => segment.trim())
-        .filter(Boolean);
-    const homeIndex = segments
-        .map((segment) => segment.toLowerCase())
-        .lastIndexOf("home");
-    if (homeIndex < 0)
-        return undefined;
-    const routeSegments = segments.slice(homeIndex + 1);
-    if (routeSegments.length === 0)
-        return "/";
-    return `/${routeSegments.map(encodeURIComponent).join("/")}`;
-}
-function isRootRenderPath(pathname) {
-    return !pathname || pathname === "/";
-}
-function applyParheliaRenderContext(renderUrl, pageItemDescriptor, siteName) {
-    if (siteName) {
-        if (!renderUrl.searchParams.has("site")) {
-            renderUrl.searchParams.set("site", siteName);
-        }
-        // Same-origin Sitecore fallback URLs use sc_site for site resolution and can
-        // canonical-redirect to the public site host before the editor iframe loads.
-        if (renderUrl.origin !== window.location.origin &&
-            !renderUrl.searchParams.has("sc_site")) {
-            renderUrl.searchParams.set("sc_site", siteName);
-        }
-    }
-    if (!renderUrl.searchParams.has("sc_itemid")) {
-        renderUrl.searchParams.set("sc_itemid", pageItemDescriptor.id);
-    }
-    if (!renderUrl.searchParams.has("sc_lang")) {
-        renderUrl.searchParams.set("sc_lang", pageItemDescriptor.language);
-    }
-    if (!renderUrl.searchParams.has("sc_version")) {
-        renderUrl.searchParams.set("sc_version", String(pageItemDescriptor.version));
-    }
-    const routePath = inferRoutePathFromSitecoreItemPath(pageItemDescriptor.path);
-    if (!routePath || !isRootRenderPath(renderUrl.pathname))
-        return;
-    renderUrl.pathname = routePath;
-    if (!renderUrl.searchParams.has("route")) {
-        renderUrl.searchParams.set("route", routePath);
-    }
-}
-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 EDITOR_CSS_STYLE_ID = "parhelia-editor-css";
+export function PageViewerFrame({ compareView, pageViewContext, className, slotCloseButton, }) {
     const editContext = useEditContext();
-    useViewportChangeSignal();
-    if (!editContext || !props.pageViewContext)
-        return null;
-    return (_jsx(PageViewerFrameContent, { ...props, editContext: editContext, pageViewContext: props.pageViewContext }));
-}
-function PageViewerFrameContent({ compareView, pageViewContext, editContext, className, slotCloseButton, }) {
     const fieldsContext = useFieldsEditContext();
-    const slotContext = useSlotContext();
+    useViewportChangeSignal();
     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 [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 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 currentLoadRef = useRef(null);
+    const rebindIframeInteractionsRef = useRef(null);
+    const prevModeRef = useRef(editContext.mode);
     const [showSpinner, setShowSpinner] = useState(false);
-    const [iframeSrc, setIframeSrc] = useState();
-    const [loadedIframeSrc, setLoadedIframeSrc] = useState();
     const [scroll, setScroll] = useState(0);
     const [showMiniMap, setShowMiniMap] = useState(false);
-    const [bridgeGeometryRevision, setBridgeGeometryRevision] = useState(0);
-    const [bridgeDomRevision, setBridgeDomRevision] = useState(0);
-    const bridgeGeometryRevisionRafRef = useRef(null);
-    const bridgeDomRevisionRafRef = useRef(null);
     const fieldActionsOverlay = useRef(null);
-    const lastSentBridgeCaretRef = useRef(null);
     const [contextMenuFieldButtons, setContextMenuFieldButtons] = useState([]);
     const [contextMenuField, setContextMenuField] = useState();
     const [contextMenuPosition, setContextMenuPosition] = useState();
     const [preSelectedAction, setPreSelectedAction] = useState();
-    const bindIframeRef = useCallback((node) => {
-        iframeRef.current = node;
-        setIframeElement(node);
-    }, []);
     // Clear preSelectedAction when overlay is closed
     useEffect(() => {
         if (editContext?.currentOverlay !==
@@ -649,6 +56,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         }
     }, [editContext?.currentOverlay, contextMenuField?.fieldId]);
     const zoom = pageViewContext.zoom;
+    const blockBlurEventRef = useRef(0);
     const [currentItemDescriptor, setCurrentItemDescriptor] = useState(undefined);
     // Field action handlers for the overlay
     const handleActionClick = async (action, event) => {
@@ -664,683 +72,1028 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     // Note: handleParameterizedActionFromContextMenu is now created inline in handleContextMenu
     // to avoid React state timing issues with contextMenuPosition
     const pageItemDescriptor = pageViewContext.pageItemDescriptor;
-    const shouldTrackMinimapScroll = useCallback(() => {
-        const editor = editContextRef.current;
-        return !!(showMiniMap &&
-            editor?.showMinimap &&
-            !editor?.isMobile &&
-            editor?.parheliaSettings?.showMinimap !== false);
-    }, [showMiniMap]);
-    const updateScrollPosition = useCallback((e) => {
-        if (!shouldTrackMinimapScroll())
-            return;
-        setScroll(e);
-        if (!compareView)
-            pageViewContextRef.current?.setScroll(e);
-    }, [compareView, shouldTrackMinimapScroll]);
-    const scrollHandler = useThrottledCallback(updateScrollPosition, 100);
-    const scrollHandlerRef = useRef(scrollHandler);
+    // Update the context whenever the iframe ref changes
     useEffect(() => {
-        scrollHandlerRef.current = scrollHandler;
-    }, [scrollHandler]);
-    const scheduleBridgeGeometryRevision = useCallback(() => {
-        if (bridgeGeometryRevisionRafRef.current != null)
+        pageViewContext.setEditorIframe(iframeRef.current);
+    }, [iframeRef.current, pageViewContext.setEditorIframe]);
+    const updateMiniMapVisibility = useDebouncedCallback(() => {
+        if (!iframeRef.current)
             return;
-        bridgeGeometryRevisionRafRef.current = window.requestAnimationFrame(() => {
-            bridgeGeometryRevisionRafRef.current = null;
-            setBridgeGeometryRevision((revision) => revision + 1);
-        });
-    }, []);
-    const scheduleBridgeDomRevision = useCallback(() => {
-        if (bridgeDomRevisionRafRef.current != null)
+        const iframe = iframeRef.current;
+        const doc = iframe.contentDocument;
+        if (!doc?.documentElement)
             return;
-        bridgeDomRevisionRafRef.current = window.requestAnimationFrame(() => {
-            bridgeDomRevisionRafRef.current = null;
-            setBridgeDomRevision((revision) => revision + 1);
-        });
-    }, []);
-    useEffect(() => {
-        return () => {
-            if (bridgeGeometryRevisionRafRef.current != null) {
-                window.cancelAnimationFrame(bridgeGeometryRevisionRafRef.current);
+        const scrollContainer = doc.scrollingElement || doc.body;
+        if (!scrollContainer)
+            return;
+        const contentHeight = scrollContainer.scrollHeight;
+        const clientHeight = iframe.clientHeight;
+        const upperThreshold = clientHeight + 100; // show minimap if content exceeds this height
+        const lowerThreshold = clientHeight; // hide minimap if content falls below this
+        // Check if minimap is enabled in settings and user controls
+        const minimapEnabled = editContext.parheliaSettings?.showMinimap !== false &&
+            editContext.showMinimap;
+        if (showMiniMap) {
+            if (contentHeight <= lowerThreshold || !minimapEnabled) {
+                setShowMiniMap(false);
             }
-            if (bridgeDomRevisionRafRef.current != null) {
-                window.cancelAnimationFrame(bridgeDomRevisionRafRef.current);
+        }
+        else {
+            if (contentHeight > upperThreshold && minimapEnabled) {
+                setShowMiniMap(true);
             }
-        };
-    }, []);
-    const blockIframeBlurUntil = useCallback((_timestamp) => {
-        // Iframe blur is handled by the bridge inline-edit lifecycle now.
-    }, []);
-    const sendBeginInlineEdit = useCallback((payload) => {
-        return (bridgeClientRef.current?.sendCommand("beginInlineEdit", payload) ??
-            false);
-    }, []);
-    const 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,
+        }
+    }, 100);
+    updateMiniMapVisibility();
+    const buildPageModelThrottled = useThrottledCallback(buildPageModelSkeleton, 200, {
+        leading: true,
+        trailing: true,
     });
-    const beginTrackedBridgeInlineEdit = useCallback(async (interaction) => {
-        activeBridgeInlineEditRef.current = null;
-        const started = await beginBridgeInlineEdit(interaction);
-        if (started && interaction.elementKey && interaction.fieldId) {
-            const interactionItem = interaction.item?.id &&
-                interaction.item.language &&
-                typeof interaction.item.version === "number"
-                ? {
-                    id: interaction.item.id,
-                    language: interaction.item.language,
-                    version: interaction.item.version,
-                    name: interaction.item.name,
-                    displayName: interaction.item.displayName,
-                    path: interaction.item.path,
-                    database: interaction.item.database,
+    const requestPageModelBuild = (doc) => {
+        if (!doc)
+            return;
+        buildPageModelThrottled(doc, editContextRef, pageViewContextRef);
+    };
+    const [iframeSrc, setIframeSrc] = useState();
+    const editorCssGuardRef = useRef({ doc: null, observer: null, editMode: true });
+    const ensureEditorCssGuard = (doc, editMode) => {
+        if (!doc)
+            return;
+        // Keep latest mode so the observer can re-apply the right CSS after hydration/head updates.
+        editorCssGuardRef.current.editMode = editMode;
+        const needsNewObserver = editorCssGuardRef.current.doc !== doc;
+        if (needsNewObserver) {
+            try {
+                editorCssGuardRef.current.observer?.disconnect();
+            }
+            catch { }
+            editorCssGuardRef.current.doc = doc;
+            editorCssGuardRef.current.observer = null;
+            // Guard against frameworks (Next/Head managers) removing/replacing our injected <style>.
+            let isApplying = false;
+            const observer = new MutationObserver(() => {
+                const currentDoc = editorCssGuardRef.current.doc;
+                if (!currentDoc || currentDoc !== doc)
+                    return;
+                if (isApplying)
+                    return;
+                const head = currentDoc.head;
+                if (!head)
+                    return;
+                const style = head.querySelector(`#${EDITOR_CSS_STYLE_ID}`);
+                if (style)
+                    return;
+                try {
+                    isApplying = true;
+                    injectEditorCSS(currentDoc, editorCssGuardRef.current.editMode);
                 }
-                : undefined;
-            activeBridgeInlineEditRef.current = {
-                elementKey: interaction.elementKey,
-                fieldId: interaction.fieldId,
-                item: interactionItem,
-                modeAtStart: editContextRef.current?.mode ?? editContext.mode,
-            };
+                finally {
+                    isApplying = false;
+                }
+            });
+            // Observe <head> for style removals, and <html> for rare head replacements.
+            try {
+                if (doc.head)
+                    observer.observe(doc.head, { childList: true });
+                if (doc.documentElement)
+                    observer.observe(doc.documentElement, { childList: true });
+            }
+            catch { }
+            editorCssGuardRef.current.observer = observer;
         }
-        return started;
-    }, [beginBridgeInlineEdit, editContext.mode, editContextRef]);
-    const endTrackedBridgeFieldFocus = useCallback(() => {
-        activeBridgeInlineEditRef.current = null;
-        endBridgeFieldFocus();
-    }, [endBridgeFieldFocus]);
-    useEffect(() => {
-        const handleBridgeInlineEditRelease = (event) => {
-            const detail = event
-                .detail;
-            const field = detail?.field;
-            const activeEdit = activeBridgeInlineEditRef.current;
-            if (!field || !activeEdit)
-                return;
-            if (!bridgeKeysMatch(activeEdit.fieldId, field.fieldId))
-                return;
-            if (activeEdit.item && !bridgeItemMatches(activeEdit.item, field.item)) {
-                return;
+        // Apply now, and again shortly after to catch post-hydration head normalization.
+        injectEditorCSS(doc, editMode);
+        setTimeout(() => {
+            if (editorCssGuardRef.current.doc === doc) {
+                injectEditorCSS(doc, editorCssGuardRef.current.editMode);
             }
-            activeBridgeInlineEditRef.current = null;
-            bridgePatchSignatureRef.current.delete(`${activeEdit.elementKey}:${activeEdit.fieldId}`);
-        };
-        window.addEventListener(BRIDGE_INLINE_EDIT_RELEASE_EVENT, handleBridgeInlineEditRelease);
+        }, 0);
+    };
+    // Disconnect the CSS guard on unmount.
+    useEffect(() => {
         return () => {
-            window.removeEventListener(BRIDGE_INLINE_EDIT_RELEASE_EVENT, handleBridgeInlineEditRelease);
+            try {
+                editorCssGuardRef.current.observer?.disconnect();
+            }
+            catch { }
+            editorCssGuardRef.current.observer = null;
+            editorCssGuardRef.current.doc = null;
         };
     }, []);
+    // If the editor mode flips (edit/preview), re-apply CSS and disable inline editing in the iframe.
     useEffect(() => {
-        return editContext.registerModeChangeParticipant({
-            beforeModeChange: (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;
+        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);
         }
-        bridgePatchSignatureRef.current.set(cacheKey, signature);
-        bridge.sendCommand("applyFieldPatch", patch);
-        return true;
-    }, []);
-    const clearBridgeRemoteCaretPosition = useCallback(() => {
-        const editor = editContextRef.current;
-        if (!editor || lastSentBridgeCaretRef.current === "clear")
-            return;
-        editor.sendSocketMessage({
-            type: "caret-position",
-            payload: { offset: null },
-        });
-        lastSentBridgeCaretRef.current = "clear";
-    }, [editContextRef]);
-    const sendBridgeRemoteCaretPosition = useCallback((selection) => {
-        const editor = editContextRef.current;
-        const activeField = selection.activeField;
-        const offset = selection.startOffset ?? selection.endOffset;
-        if (!editor ||
-            !activeField?.fieldId ||
-            !selection.collapsed ||
-            offset == null) {
-            clearBridgeRemoteCaretPosition();
+    }, [editContext.mode]);
+    useEffect(() => {
+        if (!pageItemDescriptor ||
+            !pageViewContext.editUrl ||
+            !pageViewContext.previewUrl)
             return;
+        const urlPath = editContext.mode === "preview"
+            ? pageViewContext.previewUrl
+            : pageViewContext.editUrl;
+        const prevMode = prevModeRef.current;
+        prevModeRef.current = editContext.mode;
+        const modeOnlyChange = prevMode !== editContext.mode &&
+            prevMode !== "preview" &&
+            editContext.mode !== "preview";
+        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);
         }
-        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;
+        if (editContext.mode === "preview" && editContext.previewDate) {
+            renderUrl.searchParams.delete("sc_version");
+            renderUrl.searchParams.set("sc_date", toSitecoreDate(editContext.previewDate));
         }
-        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;
+        // 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");
         }
-        if (selection.collapsed ||
-            !selection.text ||
-            !selection.activeField?.fieldId) {
-            sendBridgeRemoteCaretPosition(selection);
-            if (!inlineAiUiFocused && !inlineAiUiPresent) {
-                editor.setSelectedRange(undefined);
-            }
-            return;
+        else {
+            renderUrl.searchParams.delete("parhelia_layout");
         }
-        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,
+        // 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);
             }
-            : 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,
         };
-        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,
+        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());
             }
-            : undefined;
-        const addCandidateItem = (source) => {
-            const itemId = source?.id ?? fallbackItem?.id;
-            const language = source?.language ?? fallbackItem?.language;
-            const versionValue = source?.version ?? fallbackItem?.version;
-            const version = typeof versionValue === "number" && Number.isFinite(versionValue)
-                ? versionValue
-                : undefined;
-            if (!itemId || !language || version === undefined)
-                return;
-            if (candidateItems.some((item) => bridgeIdsMatch(item.id, itemId) &&
-                item.language.toLowerCase() === language.toLowerCase() &&
-                item.version === version)) {
-                return;
+            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);
             }
-            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,
-                };
-            }
+        // 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");
         }
-        const fallbackDescriptorItem = candidateItems[0];
-        if (!fallbackDescriptorItem)
-            return undefined;
-        return {
-            fieldId,
-            item: fallbackDescriptorItem,
-        };
-    }, [editContextRef]);
-    const handleBridgeInteraction = useCallback(async (interaction, iframe) => {
-        if (interaction.kind === "wheel") {
-            if (!interaction.ctrlKey && !interaction.metaKey)
-                return;
-            if (!interaction.deltaY)
+        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])
                 return;
-            const zoomContext = (compareView ? slotContext?.primaryPageViewContext : undefined) ??
-                pageViewContextRef.current;
-            const direction = interaction.deltaY < 0 ? 1 : -1;
-            zoomContext?.setZoom((value) => clampEditorZoom(value + direction * ZOOM_STEP));
-            return;
+            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",
+                    });
+                }
+            }
         }
-        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,
-                        };
+    }, [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,
+                });
+                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();
                 }
-                if (isBridgeLinkShortcutRange(linkRange, interaction)) {
-                    document.dispatchEvent(new CustomEvent(BRIDGE_INLINE_LINK_OPEN_EVENT, {
-                        bubbles: true,
-                        cancelable: true,
-                        detail: { selectedRange: linkRange },
-                    }));
+                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) { }
+            }
+        }
+        catch (err) {
+            if (err?.name === "AbortError") {
+                // Swallow aborts – a newer refresh superseded this one
                 return;
             }
-            if (isBridgeInlineAiShortcut(interaction)) {
-                const editor = editContextRef.current;
-                const field = await resolveBridgeFieldDescriptor(interaction);
-                if (editor && field) {
-                    await editor.setFocusedField(field, editor.mode !== "suggestions");
-                }
-                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",
-                        }
-                        : 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,
-                    detail: caretAnchor ? { anchor: caretAnchor } : undefined,
-                }));
+            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)
+                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;
         }
-        if (interaction.kind !== "click" && interaction.kind !== "contextMenu") {
+        // 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;
         }
-        if (interaction.kind === "click" && interaction.button !== 0)
+        // Find the field element containing the selection/caret
+        const fieldElement = findClosestFieldElement(sel.anchorNode);
+        if (!fieldElement) {
+            if (!isInlineAiUiFocused()) {
+                editContextRef.current?.setSelectedRange(undefined);
+            }
             return;
-        if (interaction.kind === "contextMenu" && interaction.ctrlKey)
+        }
+        const fieldId = fieldElement.getAttribute("data-fieldid");
+        if (!fieldId)
             return;
-        const editor = editContextRef.current;
-        if (!editor)
+        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,
+                        });
+                    }
+                }
+                catch (error) {
+                    console.error("[PageViewerFrame] Failed to replace text:", error);
+                }
+            },
+        });
+    }, 300);
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe)
             return;
-        const selectFromBridgeInteraction = (ids) => {
-            if (!bridgeComponentSelectionsMatch(editor.selection, ids)) {
-                suppressNextSelectionScrollRef.current = true;
+        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);
             }
-            editor.select(ids);
-        };
-        let effectiveInteraction = interaction;
-        if (interaction.kind === "contextMenu" &&
-            !interaction.fieldId &&
-            interaction.clientX !== undefined &&
-            interaction.clientY !== undefined) {
-            const fieldTarget = findBridgeFieldTargetAtPoint(pageViewContextRef.current?.bridgeGeometry, interaction.clientX, interaction.clientY);
-            if (fieldTarget?.fieldId) {
-                effectiveInteraction = {
-                    ...interaction,
-                    elementKey: fieldTarget.elementKey ?? interaction.elementKey,
-                    fieldId: fieldTarget.fieldId,
-                };
+            // 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);
             }
-        }
-        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())
+            // 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 (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;
+                        }
+                    }
+                    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", {
+                    bubbles: true,
+                    cancelable: true,
+                });
+                window.parent.document.dispatchEvent(parentEvent);
+                // Also prevent default to avoid any browser behavior
+                event.preventDefault();
+                event.stopPropagation();
                 return;
-            if (clearSelection) {
-                editor.setSelectedRange(undefined);
             }
-            document.dispatchEvent(new CustomEvent(INLINE_AI_CLOSE_EVENT));
+            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);
+            }
+            else {
+                blockBlurEventRef.current = 0;
+            }
+        };
+        const detachListeners = () => {
+            if (!iframe || !boundDocument || !boundDocumentElement)
+                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;
         };
-        const clearSelectedRangeForEditableClick = () => {
-            const selectedRange = editor.selectedRange;
-            const clickMatchesActiveTextSelection = !!(selectedRange?.text?.trim() &&
-                selectedRange.elementKey &&
-                effectiveInteraction.elementKey &&
-                selectedRange.elementKey === effectiveInteraction.elementKey);
-            if (clickMatchesActiveTextSelection) {
-                closeInlineAiIfOpen(false);
+        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) {
                 return;
             }
-            closeInlineAiIfOpen(true);
+            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);
         };
-        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);
+        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);
             }
-            else if (interaction.kind === "click") {
-                closeInlineAiIfOpen();
-                endTrackedBridgeFieldFocus();
+            catch {
+                return undefined;
             }
-            return;
-        }
-        const currentSelection = editor.selection || [];
-        if (interaction.kind === "contextMenu") {
-            if (pageViewContextRef.current) {
-                pageViewContextRef.current.bridgeInteraction = effectiveInteraction;
+            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();
+                }
+            }
+            if (!itemIdRaw) {
+                itemIdRaw =
+                    hrefUrl.searchParams.get("sc_itemid") ??
+                        hrefUrl.searchParams.get("itemid") ??
+                        anchor.getAttribute("data-itemid") ??
+                        anchor.getAttribute("sc_itemid") ??
+                        attributeContainer?.getAttribute("data-itemid") ??
+                        attributeContainer?.getAttribute("sc_itemid") ??
+                        (anchor.getAttribute("sc_item")
+                            ? extractItemIdFromItemUri(anchor.getAttribute("sc_item"))
+                            : undefined) ??
+                        (attributeContainer?.getAttribute("sc_item")
+                            ? extractItemIdFromItemUri(attributeContainer.getAttribute("sc_item"))
+                            : undefined);
+            }
+            const itemId = cleanId(itemIdRaw);
+            if (!itemId)
+                return undefined;
+            const language = hrefUrl.searchParams.get("sc_lang") ??
+                hrefUrl.searchParams.get("lang") ??
+                hrefUrl.searchParams.get("language") ??
+                anchor.getAttribute("data-language") ??
+                anchor.getAttribute("sc_lang") ??
+                attributeContainer?.getAttribute("data-language") ??
+                attributeContainer?.getAttribute("sc_lang") ??
+                editContextRef.current?.currentItemDescriptor?.language ??
+                editContextRef.current?.item?.language;
+            if (!language)
+                return undefined;
+            const version = parsePositiveInt(hrefUrl.searchParams.get("sc_version")) ??
+                parsePositiveInt(hrefUrl.searchParams.get("version")) ??
+                parsePositiveInt(anchor.getAttribute("data-version")) ??
+                parsePositiveInt(attributeContainer?.getAttribute("data-version")) ??
+                editContextRef.current?.currentItemDescriptor?.version ??
+                editContextRef.current?.item?.version ??
+                0;
+            return {
+                id: itemId,
+                language,
+                version,
+            };
+        };
+        const handleIframeClick = async (event) => {
+            const target = event.target;
+            if (!target)
+                return;
+            const anchor = target.tagName.toLowerCase() === "a"
+                ? target
+                : target.closest("a");
+            if (!anchor)
+                return;
+            const href = anchor.getAttribute("href") || anchor.href;
+            if (!href || href.startsWith("#") || href.startsWith("javascript:")) {
+                return;
             }
-            const selectedIds = currentSelection.includes(componentId)
-                ? currentSelection
-                : [componentId];
-            if (!currentSelection.includes(componentId)) {
-                selectFromBridgeInteraction(selectedIds);
+            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 page = pageViewContextRef.current?.page;
-            if (!page)
+            // In edit mode, keep navigation inside iframe disabled.
+            event.preventDefault();
+        };
+        const handleContextMenu = async (event) => {
+            if (editContextRef.current?.isRefreshing && showSpinner)
                 return;
-            const selectedComponents = selectedIds
-                .map((id) => getComponentById(id, page))
-                .filter((component) => !!component);
-            if (selectedComponents.length === 0)
+            const target = event.target;
+            if (!target)
                 return;
+            if (event.ctrlKey)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            let componentId = findNearestEditableComponentId(target);
+            const pageForContextMenu = pageViewContextRef.current?.page;
+            if (componentId && pageForContextMenu) {
+                componentId = resolveComponentIdForTarget(componentId, target, pageForContextMenu);
+            }
+            // 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: interaction.shiftKey,
-                altKey: interaction.altKey,
-                ctrlKey: interaction.ctrlKey,
-                metaKey: interaction.metaKey,
+                shiftKey: event.shiftKey,
+                altKey: event.altKey,
+                ctrlKey: event.ctrlKey,
                 view: window,
-                clientX,
-                clientY,
-                button: 2,
+                clientX: event.clientX + iframeRect.x,
+                clientY: event.clientY + iframeRect.y,
             });
+            // Store the original context menu position for overlay positioning
+            const menuPosition = {
+                x: event.clientX + iframeRect.x,
+                y: event.clientY + iframeRect.y,
+            };
             setContextMenuPosition(menuPosition);
+            // Only show a spinner if work takes longer than 100ms
             let loadingShown = false;
-            const loadingTimer = window.setTimeout(() => {
+            const loadingTimer = setTimeout(() => {
                 loadingShown = true;
-                editor.showContextMenu(adjustedEvent, [
+                editContextRef.current?.showContextMenu(adjustedEvent, [
                     {
                         id: "loading",
-                        label: "Loading...",
+                        label: "Loading…",
                         disabled: true,
                         icon: _jsx(Spinner, { size: "sm", className: "mr-2" }),
                     },
                 ]);
             }, 100);
-            const field = await resolveBridgeFieldDescriptor(effectiveInteraction);
+            const field = fieldElement
+                ? getFieldDescriptorFromElement(fieldElement)
+                : undefined;
             const fieldButtons = field ? await loadFieldButtons(field) : [];
-            const handleParameterizedActionWithPosition = (field, action) => {
+            // Create a handler that has access to the current menu position
+            const handleParameterizedActionWithPosition = (field, action, allFieldButtons, event) => {
                 setContextMenuField(field);
                 setContextMenuFieldButtons([action]);
                 setPreSelectedAction(action);
-                window.setTimeout(() => {
+                // Create a new MouseEvent with the captured position
+                const syntheticEvent = new MouseEvent("click", {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window,
+                    clientX: menuPosition.x,
+                    clientY: menuPosition.y,
+                    screenX: menuPosition.x,
+                    screenY: menuPosition.y,
+                });
+                // Add target property to the event for proper positioning
+                Object.defineProperty(syntheticEvent, "target", {
+                    value: document.body,
+                    enumerable: true,
+                });
+                console.log("About to show overlay with position:", {
+                    menuPosition,
+                    syntheticEvent,
+                    preSelectedAction: action,
+                });
+                // Add a small delay to ensure context menu has closed
+                setTimeout(() => {
+                    console.log("Showing overlay with position:", {
+                        menuPosition,
+                        syntheticEvent,
+                        preSelectedAction: action,
+                    });
+                    // Create a temporary element at the exact position for better positioning
                     const tempElement = document.createElement("div");
                     tempElement.style.position = "fixed";
                     tempElement.style.left = menuPosition.x + "px";
@@ -1350,6 +1103,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                     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,
@@ -1362,1073 +1116,334 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                         enumerable: true,
                     });
                     fieldActionsOverlay.current?.show(positionedEvent, action);
-                    window.setTimeout(() => {
-                        tempElement.remove();
+                    // Clean up the temporary element after overlay is shown
+                    setTimeout(() => {
+                        document.body.removeChild(tempElement);
                     }, 1000);
                 }, 100);
             };
-            const items = await buildComponentContextMenuItems(selectedComponents, editor, field, fieldButtons, handleParameterizedActionWithPosition);
-            window.clearTimeout(loadingTimer);
-            if (loadingShown) {
-                editor.updateContextMenu(items);
+            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;
             }
-            else {
-                editor.showContextMenu(adjustedEvent, 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();
             }
-            return;
+            iframe.addEventListener("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);
-                }
+        // Cleanup function
+        return () => {
+            rebindIframeInteractionsRef.current = null;
+            if (iframe) {
+                iframe.removeEventListener("load", handleLoad);
             }
-            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,
-                        });
-                        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,
-                            };
-                            const deltaX = targetScroll.x - observedScroll.x;
-                            const deltaY = targetScroll.y - observedScroll.y;
-                            pendingRefreshScrollRef.current = undefined;
-                            if (Math.abs(deltaX) > 1 || Math.abs(deltaY) > 1) {
-                                restoreIframeWindowScroll(iframe, targetScroll);
-                                bridgeClientRef.current?.sendCommand("scrollBy", {
-                                    x: deltaX,
-                                    y: deltaY,
-                                    behavior: "instant",
-                                });
-                            }
-                        }
-                        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,
-    ]);
-    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();
+            detachListeners();
         };
-    }, [
-        buildBridgeFieldPatch,
-        editContext.itemsRepository,
-        sendBridgeFieldPatch,
-    ]);
+    }, [iframeRef.current]);
     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 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;
-        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,
-        });
+        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);
+    };
     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") {
+        if (!iframeRef.current)
             return;
-        }
-        const interaction = getSelectedRangeInlineEditInteraction(editContextRef.current?.selectedRange);
-        if (!interaction)
+        const body = iframeRef.current.contentWindow?.document.documentElement;
+        if (!body)
             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);
-        };
+        body.style.transform = `scale(${zoom})`;
+        body.style.transformOrigin = "top center";
+        body.style.overflow = "auto";
+        //body.style.height = `${body.scrollHeight / zoom}px`;
     }, [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;
-    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) {
+    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) {
                                         setShowSpinner(false);
-                                        applyIframeZoom(iframeRef.current, zoom, "PageViewerFrame.tsx:onLoad-zoom");
-                                        if (pendingRefreshScrollRef.current) {
-                                            const targetScroll = pendingRefreshScrollRef.current;
-                                            pendingRefreshScrollRef.current = undefined;
-                                            restoreIframeWindowScroll(iframeRef.current, targetScroll);
-                                            const observedScroll = getIframeWindowScroll(iframeRef.current) ?? { x: 0, y: 0 };
-                                            bridgeClientRef.current?.sendCommand("scrollBy", {
-                                                x: targetScroll.x - observedScroll.x,
-                                                y: targetScroll.y - observedScroll.y,
-                                                behavior: "instant",
-                                            });
-                                        }
+                                        ensureEditorCssGuard(doc, editContext.mode !== "preview");
+                                        setTimeout(() => {
+                                            injectSXAScripts(iframeRef.current);
+                                        }, 1000);
+                                        requestPageModelBuild(doc);
                                     }
-                                } }), iframeElement && (_jsx(IframeOverlayProvider, { iframe: iframeElement, mode: "scrolling", scrollScale: 1, visualScale: 1, invalidationKey: `${zoom}:${bridgeGeometryRevision}`, deferredInvalidationMs: ZOOM_TRANSITION_MS + 50, children: _jsx(PageEditorChrome, { iframe: iframeElement, compareView: compareView, pageViewContext: pageViewContext, onBridgeRichTextCommand: sendApplyRichTextCommand }) })), pageViewContext.deviceHeight && pageViewContext.device && (_jsx("div", { className: "bg-neutral-grey-5 relative z-40 h-full w-full" }))] }), !pageViewContext.fullscreen &&
+                                } }), iframeRef.current && (_jsx(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 &&
                         showMiniMap &&
                         editContext.showMinimap &&
                         !editContext.isMobile &&
-                        editContext.parheliaSettings?.showMinimap !== false && (_jsx(MiniMap, { compareView: compareView, scroll: scroll, mainViewIframeRef: iframeRef, pageViewContext: pageViewContext })), showSpinner && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-neutral-grey-5/50 absolute top-0 left-0 h-full w-full" }), _jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform", children: _jsx(Spinner, {}) })] }))] }), _jsx(FieldActionsOverlay, { ref: fieldActionsOverlay, generatorButtons: contextMenuFieldButtons, onActionClick: handleActionClick, onParameterizedActionExecute: handleParameterizedActionExecute, currentOverlay: editContext?.currentOverlay, fieldId: contextMenuField?.fieldId || "", setCurrentOverlay: editContext?.setCurrentOverlay || (() => { }), preSelectedAction: preSelectedAction })] }));
+                        editContext.parheliaSettings?.showMinimap !== false && (_jsx(MiniMap, { compareView: compareView, scroll: scroll, mainViewIframeRef: iframeRef, pageViewContext: pageViewContext, deviceHeight: pageViewContext.device === "Desktop"
+                            ? undefined
+                            : pageViewContext.deviceHeight })), showSpinner && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bg-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;
 }
 //# sourceMappingURL=PageViewerFrame.js.map