@parhelia/core 0.4.12800 → 0.4.12818

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

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
 import { BRIDGE_DOM_UPDATED_EVENT, MiniMap } from "./MiniMap";
 import { resolveMiniMapVisibility, } from "./minimapVisibility";
 import { useCanvasSelection, useEditContext, useEditContextRef, useFieldsEditContext, useFieldsEditContextRef, } from "../client/editContext";
@@ -33,7 +33,7 @@ import { toSitecoreDate } from "../utils/sitecoreDate";
 import { pickVersionAtDate } from "../utils/versionAtDate";
 import { BridgeClient } from "../bridge/BridgeClient";
 import { beginPerfTrace, isPerfTraceActive, isPerfTraceEnabled, perfTraceStep, } from "../perfTrace";
-import { getPendingFieldSuggestions, getSuggestionSelectionKey, getSuggestionDisplayValue, } from "../reviews/suggestionDisplayValue";
+import { getBaselineFieldValue, getPendingFieldSuggestions, getSuggestionPreviewScope, getSuggestionSelectionKey, getSuggestionDisplayValue, previewScopeCoversField, } from "../reviews/suggestionDisplayValue";
 import { bridgeItemDescriptorMatchesItem, bridgeStructureTargetsChangedItem, } from "./bridgeItemChangeTarget";
 import { buildBridgeFieldPatchPayload, buildBridgeFieldPatchSignature, buildRemoteCaretFieldPatches, getBridgeFieldPatchValue, hasRemoteCaretDraftForField, isBridgePatchableTextField, isSuggestionPreviewPatchSignature, } from "./bridgeFieldPatch";
 import { bridgeSelectionMatchesInteraction, resolveBridgeTextCompletionInput, } from "./bridgeTextCompletion";
@@ -47,10 +47,14 @@ import { projectParentPointerToHost, resolveParentBridgePointerRelease, } from "
 import { getTextCompletion, normalizeTextCompletion, } from "../services/textCompletionService";
 import { resolvePageAndSiteByPath } from "../services/contentService";
 import { areInternalLinkItemIdsEqual, extractInternalLinkPath, extractInternalLinkTargetItemId, isSamePageFragmentHref, shouldOpenInternalLinkInNewSlot, } from "./internalLinkNavigation";
+import { downloadLink } from "../bridge/linkDownload";
 const ZOOM_MIN = 0.25;
 const ZOOM_MAX = 2;
 const ZOOM_STEP = 0.25;
 const ZOOM_TRANSITION_MS = 300;
+// useSyncExternalStore fallbacks for frames rendered without a slot context.
+const subscribeToNothing = () => () => { };
+const getUndefined = () => undefined;
 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";
@@ -932,7 +936,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             bridgeTextCompletionAbortRef.current?.abort();
         };
     }, []);
-    const { beginInlineEdit: beginBridgeInlineEdit, clearInlineDedupe: clearBridgeInlineDedupe, endFieldFocus: endBridgeFieldFocus, flushPendingFieldValueChanges: flushPendingBridgeFieldValueChanges, handleFieldValueChanged: handleBridgeFieldValueChanged, handleInlineEditEnded: handleBridgeInlineEditEnded, supersedeInlineEdit: supersedeBridgeInlineEdit, } = useBridgeInlineEditing({
+    const { beginInlineEdit: beginBridgeInlineEdit, clearInlineDedupe: clearBridgeInlineDedupe, endFieldFocus: endBridgeFieldFocus, flushPendingFieldValueChanges: flushPendingBridgeFieldValueChanges, handleFieldValueChanged: handleBridgeFieldValueChanged, handleInlineEditEnded: handleBridgeInlineEditEnded, supersedeInlineEdit: supersedeBridgeInlineEdit, supersedeFieldEdits: supersedeBridgeFieldEdits, } = useBridgeInlineEditing({
         pageViewContextRef,
         inlineEditSession: bridgeInlineEditSession,
         blockIframeBlurUntil,
@@ -940,9 +944,80 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         sendCancelInlineEdit,
         sendApplyFieldPatch: sendApplyFieldPatchCommand,
     });
+    // Outside suggestions mode a selected suggestion card previews its text on
+    // the canvas. An inline edit must start from the real field value, or the
+    // previewed suggestion would silently become part of a direct edit. Drop
+    // the selection and put the baseline back before the host begins editing.
+    const restoreSelectedSuggestionPreview = useCallback(async (elementKey) => {
+        const editor = editContextRef.current;
+        if (!editor || editor.mode === "suggestions")
+            return;
+        const previewScope = getSuggestionPreviewScope({
+            editorMode: editor.mode,
+            selectedSuggestion: editor.selectedSuggestedEdit,
+            showSelectedOnPage: editor.showSelectedSuggestionOnPage,
+        });
+        if (!previewScope.onlySuggestionId)
+            return;
+        const structureField = pageViewContextRef.current?.bridgeStructure?.fields.find((candidate) => candidate.elementKey === elementKey);
+        if (!structureField)
+            return;
+        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") {
+            return;
+        }
+        const loadedItem = await editor.itemsRepository.getItem(itemDescriptor);
+        const field = loadedItem?.fields.find((candidate) => fieldIdentifierMatches(candidate, structureField.fieldId));
+        if (!field)
+            return;
+        const suggestionField = {
+            fieldId: field.id || structureField.fieldId,
+            itemId: itemDescriptor.id,
+            language: itemDescriptor.language,
+            version: itemDescriptor.version,
+            pageItemId: pageViewContextRef.current?.pageItemDescriptor?.id,
+            pageItemLanguage: pageViewContextRef.current?.pageItemDescriptor?.language,
+            pageItemVersion: pageViewContextRef.current?.pageItemDescriptor?.version,
+        };
+        if (!previewScopeCoversField(previewScope, editor.suggestedEdits, suggestionField)) {
+            return;
+        }
+        editor.setSelectedSuggestedEdit(undefined);
+        const patch = buildBridgeFieldPatchPayload({
+            field,
+            structureField,
+            display: {
+                source: "real",
+                value: getBaselineFieldValue({
+                    repositoryValue: getBridgeFieldPatchValue(field),
+                    modifiedFields: fieldsContextRef.current?.modifiedFields,
+                    field: suggestionField,
+                }),
+            },
+            activeInlineEdit: activeBridgeInlineEditRef.current,
+        });
+        if (!patch)
+            return;
+        // Record the signature so the display effect treats the field as
+        // restored instead of sending a duplicate patch into the edit session.
+        bridgePatchSignatureRef.current.set(`${patch.elementKey}:${patch.fieldId}`, buildBridgeFieldPatchSignature(patch, structureField.textContent));
+        sendApplyFieldPatchCommand(patch);
+    }, [editContextRef, fieldsContextRef, sendApplyFieldPatchCommand]);
     const beginTrackedBridgeInlineEdit = useCallback(async (interaction) => {
         if (!interaction.elementKey || !interaction.fieldId)
             return false;
+        await restoreSelectedSuggestionPreview(interaction.elementKey);
         const interactionItem = interaction.item?.id &&
             interaction.item.language &&
             typeof interaction.item.version === "number"
@@ -972,6 +1047,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         bridgeInlineEditSession,
         editContext.mode,
         editContextRef,
+        restoreSelectedSuggestionPreview,
     ]);
     const endTrackedBridgeFieldFocus = useCallback(() => {
         clearActiveBridgeInlineEdit();
@@ -1032,7 +1108,11 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 .detail;
             const field = detail?.field;
             const activeEdit = activeBridgeInlineEditRef.current;
-            if (!field || !activeEdit)
+            if (!field)
+                return;
+            // Ended sessions can still have a field change awaiting its lock.
+            supersedeBridgeFieldEdits(field);
+            if (!activeEdit)
                 return;
             if (!bridgeKeysMatch(activeEdit.fieldId, field.fieldId))
                 return;
@@ -1054,7 +1134,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         return () => {
             window.removeEventListener(BRIDGE_INLINE_EDIT_RELEASE_EVENT, handleBridgeInlineEditRelease);
         };
-    }, [supersedeBridgeInlineEdit]);
+    }, [supersedeBridgeInlineEdit, supersedeBridgeFieldEdits]);
     useEffect(() => {
         return editContext.registerModeChangeParticipant({
             captureBeforeModeChange: () => commitActiveBridgeInlineEdit(),
@@ -1092,7 +1172,12 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         flushPendingBridgeFieldValueChanges,
     ]);
     const getBridgePatchDisplayValue = useCallback(({ field, structureField, itemDescriptor, preferRepositoryValue, }) => {
-        const showSuggestions = editContext.mode === "suggestions";
+        const previewScope = getSuggestionPreviewScope({
+            editorMode: editContext.mode,
+            selectedSuggestion: editContext.selectedSuggestedEdit,
+            showSelectedOnPage: editContext.showSelectedSuggestionOnPage,
+        });
+        const showSuggestions = previewScope.mode === "suggestions";
         const repositoryValue = getBridgeFieldPatchValue(field);
         const selectionKey = getSuggestionSelectionKey({
             itemId: itemDescriptor.id,
@@ -1114,7 +1199,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 pageItemLanguage: pageViewContext.pageItemDescriptor?.language,
                 pageItemVersion: pageViewContext.pageItemDescriptor?.version,
             },
-            mode: showSuggestions ? "suggestions" : "baseline",
+            mode: previewScope.mode,
+            onlySuggestionId: previewScope.onlySuggestionId,
             selectedVariantId: editContext.suggestionVariantSelection[selectionKey],
         });
         const result = {
@@ -1126,6 +1212,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         return result;
     }, [
         editContext.mode,
+        editContext.selectedSuggestedEdit,
+        editContext.showSelectedSuggestionOnPage,
         editContext.suggestedEdits,
         editContext.suggestionVariantSelection,
         fieldsContext?.modifiedFields,
@@ -1790,6 +1878,17 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         const editor = editContextRef.current;
         if (!editor)
             return;
+        if (interaction.kind === "click" &&
+            editor.mode === "preview" &&
+            interaction.link?.download !== undefined) {
+            try {
+                await downloadLink(interaction.link.resolvedHref ?? interaction.link.href, interaction.link.download);
+            }
+            catch {
+                editor.showToast("The linked file could not be downloaded.");
+            }
+            return;
+        }
         // In preview mode the bridge suppresses the canvas's native link
         // navigation (the proxied iframe cannot follow root-relative hrefs), so
         // a plain click on an internal link navigates the editor to the linked
@@ -2381,7 +2480,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                         const currentGeometry = pageViewContext.bridgeGeometry;
                         const viewportChanged = !currentGeometry ||
                             currentGeometry.viewport.width !== event.payload.viewport.width ||
-                            currentGeometry.viewport.height !== event.payload.viewport.height ||
+                            currentGeometry.viewport.height !==
+                                event.payload.viewport.height ||
                             currentGeometry.devicePixelRatio !==
                                 event.payload.devicePixelRatio;
                         if (!viewportChanged)
@@ -2843,7 +2943,23 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 const field = loadedItem.fields.find((candidate) => fieldIdentifierMatches(candidate, structureField.fieldId));
                 if (!field)
                     continue;
-                const showSuggestions = editContext.mode === "suggestions";
+                const suggestionField = {
+                    fieldId: field.id || structureField.fieldId,
+                    itemId: itemDescriptor.id,
+                    language: itemDescriptor.language,
+                    version: itemDescriptor.version,
+                    pageItemId: pageViewContextRef.current?.pageItemDescriptor?.id,
+                    pageItemLanguage: pageViewContextRef.current?.pageItemDescriptor?.language,
+                    pageItemVersion: pageViewContextRef.current?.pageItemDescriptor?.version,
+                };
+                // Suggestions mode previews every field with pending suggestions. A
+                // selected suggestion card outside that mode previews only its own
+                // field; every other field falls through to the restore logic below.
+                const showSuggestions = previewScopeCoversField(getSuggestionPreviewScope({
+                    editorMode: editContext.mode,
+                    selectedSuggestion: editContext.selectedSuggestedEdit,
+                    showSelectedOnPage: editContext.showSelectedSuggestionOnPage,
+                }), editContext.suggestedEdits, suggestionField);
                 const dirtyModifiedField = findModifiedBridgeField({
                     modifiedFields: fieldsContext?.modifiedFields,
                     structureField,
@@ -2858,15 +2974,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 // need an explicit restore patch back to the baseline value.
                 const needsSuggestionRestore = !showSuggestions &&
                     (isSuggestionPreviewPatchSignature(bridgePatchSignatureRef.current.get(`${structureField.elementKey}:${structureField.fieldId}`)) ||
-                        getPendingFieldSuggestions(editContext.suggestedEdits, {
-                            fieldId: field.id || structureField.fieldId,
-                            itemId: itemDescriptor.id,
-                            language: itemDescriptor.language,
-                            version: itemDescriptor.version,
-                            pageItemId: pageViewContextRef.current?.pageItemDescriptor?.id,
-                            pageItemLanguage: pageViewContextRef.current?.pageItemDescriptor?.language,
-                            pageItemVersion: pageViewContextRef.current?.pageItemDescriptor?.version,
-                        }).length > 0);
+                        getPendingFieldSuggestions(editContext.suggestedEdits, suggestionField).length > 0);
                 if (!showSuggestions &&
                     !dirtyModifiedField &&
                     !needsSuggestionRestore) {
@@ -2895,6 +3003,8 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         editContext.itemsRepository,
         editContext.itemsRepository.revision,
         editContext.mode,
+        editContext.selectedSuggestedEdit,
+        editContext.showSelectedSuggestionOnPage,
         editContext.suggestedEdits,
         fieldsContext?.modifiedFields,
         bridgeDomRevision,
@@ -2957,6 +3067,18 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 timeoutMs: 15_000,
             });
         };
+        const requestBridgePageSnapshot = (payload) => {
+            const bridge = bridgeClientRef.current;
+            if (!bridge) {
+                return Promise.reject(new Error("The Parhelia bridge is not connected to the host."));
+            }
+            // A whole-page raster of a long page can take a while; the host itself
+            // gives each renderer 10s before falling back.
+            return bridge.requestCommand("capturePageSnapshot", payload, "pageSnapshotResult", {
+                requestId: payload.requestId,
+                timeoutMs: 30_000,
+            });
+        };
         const requestBridgeCancelPointerDrag = () => {
             return (bridgeClientRef.current?.sendCommand("cancelPointerDrag", {}) ?? false);
         };
@@ -2967,6 +3089,7 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         pageViewContext.requestBridgeCaptureSnapshot = requestBridgeCaptureSnapshot;
         pageViewContext.requestBridgeComponentSnapshot =
             requestBridgeComponentSnapshot;
+        pageViewContext.requestBridgePageSnapshot = requestBridgePageSnapshot;
         pageViewContext.requestBridgeCancelPointerDrag =
             requestBridgeCancelPointerDrag;
         return () => {
@@ -2987,6 +3110,9 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
                 requestBridgeComponentSnapshot) {
                 pageViewContext.requestBridgeComponentSnapshot = undefined;
             }
+            if (pageViewContext.requestBridgePageSnapshot === requestBridgePageSnapshot) {
+                pageViewContext.requestBridgePageSnapshot = undefined;
+            }
             if (pageViewContext.requestBridgeCancelPointerDrag ===
                 requestBridgeCancelPointerDrag) {
                 pageViewContext.requestBridgeCancelPointerDrag = undefined;
@@ -3386,16 +3512,20 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
             requestState.signature = signature;
             requestState.requestedTextRangeGeometry = false;
         }
-        const exactBounds = findScrollIntoViewDocumentBounds(activePageViewContext.bridgeGeometry, scrollTarget, { includeTextRangeFallback: false });
-        let bounds = exactBounds;
-        if (!bounds &&
-            isTextRangeScrollTarget(scrollTarget) &&
+        // Text-range rectangles are viewport-relative snapshots. After the user
+        // scrolls, a rectangle left over from the previous selection can still
+        // have the right key while pointing at the old viewport position. Refresh
+        // it for every explicit request, including a click on the already-selected
+        // comment, before deciding whether the range is visible.
+        if (isTextRangeScrollTarget(scrollTarget) &&
             !requestState.requestedTextRangeGeometry) {
             requestState.requestedTextRangeGeometry = true;
             if (requestScrollTargetGeometry(activePageViewContext, scrollTarget)) {
                 return;
             }
         }
+        const exactBounds = findScrollIntoViewDocumentBounds(activePageViewContext.bridgeGeometry, scrollTarget, { includeTextRangeFallback: false });
+        let bounds = exactBounds;
         bounds ??= findScrollIntoViewDocumentBounds(activePageViewContext.bridgeGeometry, scrollTarget, { includeTextRangeFallback: true });
         if (bounds) {
             scrollBridgeBoundsIntoView(activePageViewContext, bounds, latestBridgeScrollRef.current);
@@ -3587,6 +3717,48 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
         editContext.showMinimap &&
         !editContext.isMobile &&
         editContext.parheliaSettings?.showMinimap !== false;
+    // Compare view: both panes render their page iframe at one shared width so
+    // the two versions reflow identically (see compareFrameWidth.ts). This pane
+    // reports the width its iframe could take — the container's content box
+    // minus the minimap column when that is showing — and renders at the
+    // narrower of both panes' reports.
+    const frameContainerRef = useRef(null);
+    const inCompareMode = !!slotContext?.compareMode;
+    const compareFrameView = compareView
+        ? "compare"
+        : "primary";
+    const miniMapColumnWidth = editContext.configuration.outline.width || 100;
+    const reportCompareFrameWidth = slotContext?.reportCompareFrameWidth;
+    const miniMapReservedWidth = shouldRenderMiniMap ? miniMapColumnWidth : 0;
+    useLayoutEffect(() => {
+        if (!inCompareMode || !reportCompareFrameWidth)
+            return;
+        const container = frameContainerRef.current;
+        if (!container || typeof ResizeObserver === "undefined")
+            return;
+        const report = () => {
+            const style = window.getComputedStyle(container);
+            const padding = (parseFloat(style.paddingLeft) || 0) +
+                (parseFloat(style.paddingRight) || 0);
+            const available = container.clientWidth - padding - miniMapReservedWidth;
+            reportCompareFrameWidth(compareFrameView, available > 0 ? available : undefined);
+        };
+        report();
+        const observer = new ResizeObserver(report);
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [
+        inCompareMode,
+        reportCompareFrameWidth,
+        compareFrameView,
+        miniMapReservedWidth,
+    ]);
+    // Withdraw this pane's report only on unmount, so a minimap toggle or a
+    // resize does not briefly drop the other pane back to full width.
+    useEffect(() => {
+        return () => reportCompareFrameWidth?.(compareFrameView, undefined);
+    }, [reportCompareFrameWidth, compareFrameView]);
+    const sharedCompareFrameWidth = useSyncExternalStore(slotContext?.subscribeCompareFrameWidth ?? subscribeToNothing, slotContext?.getCompareFrameWidth ?? getUndefined, getUndefined);
     if (pageViewContext.page?.item && !pageViewContext.page?.item.hasLayout) {
         return _jsx(NoLayout, {});
     }
@@ -3595,13 +3767,18 @@ function PageViewerFrameContent({ compareView, pageViewContext, editContext, cla
     const deviceHeight = pageViewContext.device === "desktop" || !pageViewContext.deviceHeight
         ? "100%"
         : pageViewContext.deviceHeight || 640;
+    const compareFrameWidth = inCompareMode ? sharedCompareFrameWidth : undefined;
     const deviceWidth = isResponsiveDevice
-        ? "100%"
-        : (pageViewContext.deviceWidth || 640) +
-            editContext.configuration.outline.width +
-            "px";
+        ? compareFrameWidth !== undefined
+            ? compareFrameWidth + miniMapReservedWidth + "px"
+            : "100%"
+        : inCompareMode
+            ? (pageViewContext.deviceWidth || 640) + miniMapReservedWidth + "px"
+            : (pageViewContext.deviceWidth || 640) +
+                editContext.configuration.outline.width +
+                "px";
     const showSuggestionsCursor = !isBridgeInlineEditing && editContext.mode === "suggestions";
-    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 grid h-11 w-full shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center border-b bg-white px-3 shadow-sm", "data-testid": "fullscreen-page-title-bar", children: [_jsx("div", { className: "w-full min-w-0 pr-3 text-left", children: _jsx(PageSelector, { itemDescriptor: pageViewContext.page?.item, variant: "fullscreen" }) }), _jsx("div", { className: "justify-self-center", children: _jsx(FullscreenControls, { device: pageViewContext.device, setDevice: (device) => pageViewContext.setDevice(device), zoom: pageViewContext.zoom, setZoom: pageViewContext.setZoom, canExit: !editContext.configuration.forceFullscreen, onExit: () => editContext.setFullscreen(false) }) }), _jsx("div", { "aria-hidden": "true" })] })), 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: {
+    return (_jsxs("div", { ref: frameContainerRef, 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 grid h-11 w-full shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center border-b bg-white px-3 shadow-sm", "data-testid": "fullscreen-page-title-bar", children: [_jsx("div", { className: "w-full min-w-0 pr-3 text-left", children: _jsx(PageSelector, { itemDescriptor: pageViewContext.page?.item, variant: "fullscreen" }) }), _jsx("div", { className: "justify-self-center", children: _jsx(FullscreenControls, { device: pageViewContext.device, setDevice: (device) => pageViewContext.setDevice(device), zoom: pageViewContext.zoom, setZoom: pageViewContext.setZoom, canExit: !editContext.configuration.forceFullscreen, onExit: () => editContext.setFullscreen(false) }) }), _jsx("div", { "aria-hidden": "true" })] })), 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-visible", onMouseLeave: () => {
                             if (pageViewContext.bridgeInteraction?.kind === "hover") {