@parhelia/core 0.1.12556 → 0.1.12560

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

@@ -4,15 +4,17 @@ import { MiniMap } from "./MiniMap";
 import { useEditContext, useEditContextRef, useFieldsEditContext, useFieldsEditContextRef, } from "../client/editContext";
 import { useDebouncedCallback, useThrottledCallback } from "use-debounce";
 import { PageEditorChrome } from "../page-editor-chrome/PageEditorChrome";
+import { useViewportChangeSignal } from "./pageViewContext";
 import morphdom from "morphdom";
 import uuid from "react-uuid";
 import { cn } from "../../lib/utils";
-import { findComponentRect, findFieldElement, findNearestEditableComponentId, findParentWithAttribute, getAbsolutePosition, getFieldDescriptorFromElement, findClosestFieldElement, } 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 { getAllComponentInstances, getComponentById, } from "../componentTreeHelper";
 import { buildComponentContextMenuItems } from "../ContextMenu";
 import { loadFieldButtons } from "../services/editService";
-import { usePathname } from "next/navigation";
+import { usePathname } from "../client/navigation";
 import { EditorWarnings } from "../EditorWarnings";
 import { FieldActionsOverlay, } from "../FieldActionsOverlay";
 import { NoLayout } from "../page-editor-chrome/NoLayout";
@@ -20,9 +22,10 @@ import { Spinner } from "../ui/Spinner";
 import { DeviceToolbar } from "./DeviceToolbar";
 import { buildPageModelSkeleton } from "./pageModelSkeletonBuilder";
 const EDITOR_CSS_STYLE_ID = "parhelia-editor-css";
-export function PageViewerFrame({ compareView, pageViewContext, className, }) {
+export function PageViewerFrame({ compareView, pageViewContext, className, slotCloseButton, }) {
     const editContext = useEditContext();
     const fieldsContext = useFieldsEditContext();
+    useViewportChangeSignal();
     const pathname = usePathname();
     const pageViewContextRef = useRef(undefined);
     if (!editContext || !pageViewContext)
@@ -35,6 +38,7 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
     const iframeRef = useRef(null);
     const currentLoadRef = useRef(null);
     const rebindIframeInteractionsRef = useRef(null);
+    const prevModeRef = useRef(editContext.mode);
     const [showSpinner, setShowSpinner] = useState(false);
     const [scroll, setScroll] = useState(0);
     const [showMiniMap, setShowMiniMap] = useState(false);
@@ -104,6 +108,11 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
         leading: true,
         trailing: true,
     });
+    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) => {
@@ -170,11 +179,16 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
             editorCssGuardRef.current.doc = null;
         };
     }, []);
-    // If the editor mode flips (edit/preview), re-apply CSS in the current iframe doc.
+    // If the editor mode flips (edit/preview), re-apply CSS and disable inline editing in the iframe.
     useEffect(() => {
         const doc = iframeRef.current?.contentDocument;
+        const isPreview = editContext.mode === "preview";
         if (doc)
-            ensureEditorCssGuard(doc, editContext.mode !== "preview");
+            ensureEditorCssGuard(doc, !isPreview);
+        if (isPreview) {
+            editContextRef.current?.setSelectedRange(undefined);
+            fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
+        }
     }, [editContext.mode]);
     useEffect(() => {
         if (!pageItemDescriptor ||
@@ -184,6 +198,12 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
         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);
@@ -204,6 +224,10 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
         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) => {
@@ -218,6 +242,21 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
             ensureLater(100);
             ensureLater(500);
             ensureLater(1200);
+            if (modeOnlyChange && savedScrollY > 0) {
+                const restoreScroll = (delay) => {
+                    setTimeout(() => {
+                        const win = iframeRef.current?.contentWindow;
+                        if (win && win.scrollY === 0) {
+                            win.scrollTo(0, savedScrollY);
+                        }
+                    }, delay);
+                };
+                restoreScroll(50);
+                restoreScroll(200);
+                restoreScroll(500);
+                restoreScroll(1000);
+                restoreScroll(2000);
+            }
         };
         const runFallbackRefresh = () => {
             setShowSpinner(true);
@@ -375,7 +414,7 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
                     injectSXAScripts(iframeRef.current);
                 }, 1000);
                 try {
-                    buildPageModelThrottled(doc, editContextRef, pageViewContextRef);
+                    requestPageModelBuild(doc);
                 }
                 catch (buildErr) { }
             }
@@ -431,95 +470,110 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
     }, []);
     const selecionChangeHandler = useDebouncedCallback(() => {
         const sel = iframeRef.current?.contentDocument?.getSelection();
-        if (sel && sel.rangeCount > 0) {
-            // Only process selections that have text.
-            // Collapsed selections (carets) should not overwrite a previous AI selection context.
-            if (sel.isCollapsed)
-                return;
-            // Find the field element containing the selection
-            const fieldElement = findClosestFieldElement(sel.anchorNode);
-            if (!fieldElement)
-                return;
-            const fieldId = fieldElement.getAttribute("data-fieldid");
-            if (!fieldId)
-                return;
-            const range = sel.getRangeAt(0);
-            // Guard: if layout components are hidden, do not set focus for fields of layout components
-            if (editContextRef.current?.showLayoutComponents === false &&
-                pageViewContextRef.current?.page) {
-                const ownerId = fieldElement.getAttribute("data-itemid") || "";
-                const owner = getComponentById(ownerId, pageViewContextRef.current.page);
-                if (owner?.layoutId)
-                    return;
+        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);
             }
-            // 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
-                        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,
-                            });
-                        }
+            return;
+        }
+        // Preserve the last non-collapsed selection while the inline AI UI takes focus.
+        // This avoids losing context when users click the trigger or dialog.
+        if (sel.isCollapsed && isInlineAiUiFocused()) {
+            return;
+        }
+        // Find the field element containing the selection/caret
+        const fieldElement = findClosestFieldElement(sel.anchorNode);
+        if (!fieldElement) {
+            if (!isInlineAiUiFocused()) {
+                editContextRef.current?.setSelectedRange(undefined);
+            }
+            return;
+        }
+        const fieldId = fieldElement.getAttribute("data-fieldid");
+        if (!fieldId)
+            return;
+        const range = sel.getRangeAt(0);
+        // Guard: if layout components are hidden, do not set focus for fields of layout components
+        if (editContextRef.current?.showLayoutComponents === false &&
+            pageViewContextRef.current?.page) {
+            const ownerId = fieldElement.getAttribute("data-itemid") || "";
+            const owner = getComponentById(ownerId, pageViewContextRef.current.page);
+            if (owner?.layoutId)
+                return;
+        }
+        // Compute the global offsets relative to the field element.
+        const globalStartOffset = getGlobalTextOffset(fieldElement, range.startContainer, range.startOffset);
+        const globalEndOffset = getGlobalTextOffset(fieldElement, range.endContainer, range.endOffset);
+        const selectedText = range.toString();
+        // Extract plain text context from the DOM
+        const { contextBefore, contextAfter } = extractDOMSelectionContext(fieldElement, globalStartOffset, globalEndOffset);
+        // Clone the range for the replaceText callback (ranges can become invalid after DOM changes)
+        const rangeClone = range.cloneRange();
+        const itemId = fieldElement.getAttribute("data-itemid") || "";
+        const language = fieldElement.getAttribute("data-language") || "";
+        const versionStr = fieldElement.getAttribute("data-version");
+        const version = versionStr ? parseInt(versionStr, 10) : 0;
+        editContextRef.current?.setSelectedRange({
+            itemId,
+            fieldId: fieldId,
+            language,
+            version,
+            startOffset: globalStartOffset,
+            endOffset: globalEndOffset,
+            text: selectedText,
+            contextBefore,
+            contextAfter,
+            // Create a callback that uses DOM Range API to replace text in contenteditable
+            replaceText: (newText) => {
+                try {
+                    // Delete the selected content (no-op for collapsed ranges)
+                    rangeClone.deleteContents();
+                    // Insert the new text - use the correct document from the range containers
+                    const doc = rangeClone.startContainer.ownerDocument || document;
+                    const textNode = doc.createTextNode(newText);
+                    rangeClone.insertNode(textNode);
+                    // Collapse the range to the end of the inserted text
+                    rangeClone.setStartAfter(textNode);
+                    rangeClone.collapse(true);
+                    // Update the selection
+                    const iframeSel = iframeRef.current?.contentDocument?.getSelection();
+                    if (iframeSel) {
+                        iframeSel.removeAllRanges();
+                        iframeSel.addRange(rangeClone);
                     }
-                    catch (error) {
-                        console.error("[PageViewerFrame] Failed to replace text:", error);
+                    // 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;
@@ -531,6 +585,7 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
         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
@@ -542,10 +597,21 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
             // Skip selection changes on right-click (button 2) - let context menu handler deal with it
             if (event.button === 2)
                 return;
-            let componentId = findNearestEditableComponentId(target);
+            const fieldElement = targetElement
+                ? findParentWithAttribute(targetElement, "data-fieldid")
+                : null;
             const pageForSelection = pageViewContextRef.current?.page;
-            if (componentId && pageForSelection) {
-                componentId = resolveComponentIdForTarget(componentId, target, pageForSelection);
+            const fieldDescriptor = fieldElement?.hasAttribute("data-itemid")
+                ? getFieldDescriptorFromElement(fieldElement)
+                : undefined;
+            const componentIdFromField = fieldDescriptor && targetElement && pageForSelection
+                ? resolveComponentIdForFieldTarget(fieldDescriptor, targetElement, pageForSelection)
+                : undefined;
+            const rawComponentId = componentIdFromField ??
+                (targetElement ? findNearestEditableComponentId(targetElement) : undefined);
+            let componentId = rawComponentId;
+            if (!componentIdFromField && componentId && pageForSelection) {
+                componentId = resolveComponentIdForTarget(componentId, targetElement, pageForSelection);
             }
             // Layout components can still be selected even when showLayoutComponents is false
             // They will be displayed in read-only mode
@@ -628,7 +694,6 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
                 ((editContextRef.current?.mode === "edit" &&
                     pageViewContextRef.current?.page?.item.canWriteItem) ||
                     editContextRef.current?.mode === "suggestions")) {
-                const fieldElement = findParentWithAttribute(target, "data-fieldid");
                 if (fieldElement?.hasAttribute("data-itemid")) {
                     // Guard: if layout components are hidden, do not allow editing fields of layout components
                     if (editContextRef.current?.showLayoutComponents === false &&
@@ -641,7 +706,7 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
                     }
                     blockBlurEventRef.current = Date.now() + 500;
                     const shouldRequestLock = editContextRef.current?.mode !== "suggestions";
-                    const hasLock = (await fieldsContextRef.current?.setFocusedField(getFieldDescriptorFromElement(fieldElement), shouldRequestLock)) ?? false;
+                    const hasLock = (await fieldsContextRef.current?.setFocusedField(fieldDescriptor, shouldRequestLock)) ?? false;
                     if (hasLock &&
                         fieldsContextRef.current?.inlineEditingFieldElement !== fieldElement) {
                         fieldsContextRef.current?.setInlineEditingFieldElement(fieldElement);
@@ -707,12 +772,16 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
                     const isDialog = activeEl?.closest(".agent-inline-dialog") ||
                         activeEl?.closest('[role="dialog"]');
                     const isTrigger = activeEl?.closest(".agent-inline-trigger");
-                    // If focus moved to dialog or trigger, OR if we still have a selection, don't clear.
-                    if (!isDialog &&
-                        !isTrigger &&
-                        !editContextRef.current?.selectedRange) {
-                        fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
+                    // 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?.();
+                        // Keep selection-related state intact, but clear inline editing element
+                        // when there is no active selectedRange.
+                        if (!editContextRef.current?.selectedRange) {
+                            fieldsContextRef.current?.setInlineEditingFieldElement(undefined);
+                        }
                     }
                 }, 100);
             }
@@ -768,7 +837,7 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
                     "getAttribute" in x.target &&
                     x.target.getAttribute("data-fieldid") &&
                     x.target.getAttribute("data-itemid")))) {
-                    buildPageModelThrottled(iframeDocument, editContextRef, pageViewContextRef);
+                    requestPageModelBuild(iframeDocument);
                 }
             });
             mutationObserver.observe(iframeDocument, {
@@ -777,19 +846,126 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
                 characterData: false, // observe text changes
                 //attributes: true, // observe attribute changes (like style or class)
             });
-            buildPageModelThrottled(iframeDocument, editContextRef, pageViewContextRef);
+            requestPageModelBuild(iframeDocument);
+        };
+        const parsePositiveInt = (value) => {
+            if (!value)
+                return undefined;
+            const parsed = parseInt(value, 10);
+            return Number.isFinite(parsed) ? parsed : undefined;
+        };
+        const resolveLinkedItemDescriptor = (anchor, clickedElement) => {
+            const href = anchor.getAttribute("href") || anchor.href;
+            let hrefUrl;
+            try {
+                hrefUrl = new URL(anchor.href, iframe.contentWindow?.location?.href || window.location.href);
+            }
+            catch {
+                return undefined;
+            }
+            const attributeContainer = clickedElement?.closest("[data-itemid],[data-language],[data-version],[sc_item],[sc_itemid],[sc_lang]") || anchor;
+            // Parse Sitecore RTE format first: ~/link.aspx?_id=GUID&_z=z (target item, not the containing component)
+            let itemIdRaw;
+            if (href.includes("~/link.aspx?_id=") ||
+                href.includes("link.aspx?_id=")) {
+                const idFromUrl = hrefUrl.searchParams.get("_id");
+                if (idFromUrl) {
+                    // Convert compact GUID (AD973E51E8454BD2B333859375FBBA24) to standard format with dashes
+                    itemIdRaw = idFromUrl
+                        .replace(/^(\w{8})(\w{4})(\w{4})(\w{4})(\w{12})$/i, "$1-$2-$3-$4-$5")
+                        .toLowerCase();
+                }
+            }
+            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;
-            // Check if the click target is a link (anchor tag)
-            const anchor = target.tagName.toLowerCase() === "a" ? target : target.closest("a");
-            if (anchor) {
-                const href = anchor.href;
-                // Block only navigation links, allow anchor links and javascript links
-                if (href && !href.startsWith("#") && !href.startsWith("javascript:")) {
+            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 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;
             }
+            // In edit mode, keep navigation inside iframe disabled.
+            event.preventDefault();
         };
         const handleContextMenu = async (event) => {
             if (editContextRef.current?.isRefreshing && showSpinner)
@@ -982,9 +1158,7 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
     const deviceHeight = pageViewContext.device === "desktop" || !pageViewContext.deviceHeight
         ? "100%"
         : pageViewContext.deviceHeight || 640;
-    return (_jsxs("div", { className: cn("relative flex h-full w-full flex-col items-center select-none", className, (editContext.showComponentNavigator ||
-            (editContext.showAgentsPanel && !editContext.currentWizardId)) &&
-            "pr-0"), children: [!pageViewContext.fullscreen && (_jsx(EditorWarnings, { item: pageViewContext.page?.item })), 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: {
+    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%"
@@ -1000,15 +1174,32 @@ export function PageViewerFrame({ compareView, pageViewContext, className, }) {
                                         setTimeout(() => {
                                             injectSXAScripts(iframeRef.current);
                                         }, 1000);
-                                        buildPageModelThrottled(doc, editContextRef, pageViewContextRef);
+                                        requestPageModelBuild(doc);
                                     }
                                 } }), 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.parheliaSettings?.showMinimap !== false && (_jsx(MiniMap, { compareView: compareView, scroll: scroll, mainViewIframeRef: iframeRef, pageViewContext: pageViewContext, deviceHeight: pageViewContext.device === "Desktop"
+                        !editContext.isMobile &&
+                        editContext.parheliaSettings?.showMinimap !== false && (_jsx(MiniMap, { 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;
@@ -1045,6 +1236,9 @@ function injectEditorCSS(iframeDocument, editMode) {
     if (iframeDocument && iframeDocument.head) {
         iframeDocument.head.appendChild(style);
     }
+    if (!editMode) {
+        disableEditingInIframeDocument(iframeDocument);
+    }
 }
 function resolveComponentIdForTarget(rawId, target, page) {
     const direct = getComponentById(rawId, page);
@@ -1061,6 +1255,45 @@ function resolveComponentIdForTarget(rawId, target, page) {
         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;