@parhelia/core 0.4.12825 → 0.4.12871

package/dist/editor/page-editor-chrome/SuggestionHighlightings.js

@@ -1,294 +1,59 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
-import { SuggestionDisplayPopover } from "../reviews/SuggestionDisplayPopover";
-import { measureBridgeTextRangeRects, rectListEquals, } from "./overlay/geometry";
-import { useOverlayMeasurement } from "./overlay/useOverlayMeasurement";
+import { openCommentsFeedback } from "../reviews/openCommentsFeedback";
+import { hostViewportToOverlay } from "./overlay/geometry";
+import { usePageViewState, } from "../page-viewer/pageViewContext";
 import { dedupeFeedbackHighlightItems, FeedbackHighlightBadge, FeedbackHighlightBadgeTray, } from "./FeedbackHighlightBadge";
-import { getSuggestedEditScrollIntoViewTarget, getSuggestedEditTextRangeKey, getSuggestionDisplayRanges, getSuggestionRangeData, } from "../reviews/feedbackScrollTarget";
+import { getSuggestedEditScrollIntoViewTarget } from "../reviews/feedbackScrollTarget";
 import { getSuggestedEditItemLanguage, getSuggestedEditItemVersion, getSuggestionDisplayValue, getSuggestionFieldIdentityKey, getSuggestionSelectionKey, } from "../reviews/suggestionDisplayValue";
 import { SuggestionVariantSwitcher } from "./SuggestionVariantSwitcher";
-const SUGGESTION_BRIDGE_SOURCE = "suggestions";
-function suggestionMeasurementsEqual(previous, next) {
-    const previousKeys = Object.keys(previous);
-    const nextKeys = Object.keys(next);
-    if (previousKeys.length !== nextKeys.length)
-        return false;
-    for (const key of previousKeys) {
-        const previousValue = previous[key];
-        const nextValue = next[key];
-        if (!previousValue || !nextValue)
-            return false;
-        if (previousValue.isTextRange !== nextValue.isTextRange)
-            return false;
-        if (!rectListEquals(previousValue.rects, nextValue.rects))
-            return false;
-    }
-    return true;
-}
+import { getAnchorMeasurementKey, getFeedbackAnchor, } from "./overlay/feedbackAnchorMeasurements";
+import { getOpenSuggestions, useSuggestionAnchorMeasurements, } from "./overlay/useSuggestionAnchorMeasurements";
+import { useIframeOverlay } from "./overlay/IframeOverlayProvider";
+import { publishSuggestionAnchors } from "./overlay/feedbackAnchorStore";
+import { useOverlayViewportRight } from "./overlay/useOverlayViewportRight";
+import { clearHoveredFeedback, setHoveredFeedback, useHoveredFeedback, } from "../reviews/feedbackHoverState";
+import { FeedbackLeaderCanvasSegment } from "./FeedbackLeaderCanvasSegment";
+import { buildOverviewRulerMarks, usePublishOverviewRulerMarks, } from "../page-viewer/overviewRuler";
 export function SuggestionHighlightings({ pageViewContext, variant = "default", }) {
     const editContext = useEditContext();
     const modifiedFields = useFieldsEditContext();
-    const lastMeasurementsRef = useRef({});
-    const bridgeTextRangeRequestRef = useRef({
-        signature: "",
-        requestedSignature: "",
-        hasSeenAnyTarget: false,
-    });
-    const [rangeDataBySuggestionId, setRangeDataBySuggestionId] = useState({});
-    const [fieldValueByIdentity, setFieldValueByIdentity] = useState({});
-    const [fieldIdentityBySuggestionId, setFieldIdentityBySuggestionId] = useState({});
-    const previewsAllSuggestions = editContext?.mode === "suggestions";
+    const overlay = useIframeOverlay();
+    const hovered = useHoveredFeedback();
+    const viewportRight = useOverlayViewportRight();
     const selectedSuggestedEditId = editContext?.selectedSuggestedEdit?.id;
-    // Selecting a badge can regroup the measured ranges as the comments panel
-    // changes the canvas width. Keep its open state outside those geometry nodes.
-    const [openSuggestionId, setOpenSuggestionId] = useState();
-    // Outside suggestions mode the selected card previews its suggestion on the
-    // canvas exactly like suggestions mode does (while its "Show on page"
-    // toggle is on), so its ranges must target the suggested text rather than
-    // the original. With the toggle off the canvas keeps the original text and
-    // the ranges mark the text the suggestion removes.
-    const previewedSuggestionId = !previewsAllSuggestions &&
-        editContext?.showSelectedSuggestionOnPage !== false
-        ? selectedSuggestedEditId
-        : undefined;
-    const previewsSuggestedText = useCallback((suggestion) => previewsAllSuggestions || suggestion.id === previewedSuggestionId, [previewsAllSuggestions, previewedSuggestionId]);
-    const suggestions = useMemo(() => (editContext?.suggestedEdits || []).filter((suggestion) => suggestion.status !== "applied" && suggestion.status !== "rejected"), [editContext?.suggestedEdits]);
+    const pageItemDescriptor = usePageViewState(pageViewContext, (state) => state.pageItemDescriptor);
+    const editorIframe = usePageViewState(pageViewContext, (state) => state.editorIframe);
+    const interaction = usePageViewState(pageViewContext, (state) => state.bridgeInteraction);
+    const bridgeGeometry = usePageViewState(pageViewContext, (state) => state.bridgeGeometry);
+    // Only open suggestions mark the canvas. Decided ones (applied, rejected)
+    // are measured too, so the comment margin can keep their cards beside the
+    // text they were about. The minimap measures the same set although it only
+    // draws the marks: both variants query the bridge under one source, where
+    // the latest request replaces the previous one, so their sets must match.
+    const openSuggestions = useMemo(() => getOpenSuggestions(editContext?.suggestedEdits || []), [editContext?.suggestedEdits]);
+    const suggestions = useMemo(() => editContext?.suggestedEdits || [], [editContext?.suggestedEdits]);
+    const { measurements, fieldValueByIdentity, fieldIdentityBySuggestionId, previewsSuggestedText, } = useSuggestionAnchorMeasurements(pageViewContext, editContext, suggestions);
+    // The comment margin positions its cards from these same measurements.
+    const anchorKey = editorIframe;
     useEffect(() => {
-        if (!editContext) {
-            setRangeDataBySuggestionId({});
-            setFieldValueByIdentity({});
-            setFieldIdentityBySuggestionId({});
+        if (variant !== "default")
             return;
-        }
-        let cancelled = false;
-        const resolveRanges = async () => {
-            const nextRangeData = {};
-            const nextFieldValues = {};
-            const nextFieldIdentities = {};
-            await Promise.all(suggestions.map(async (suggestion) => {
-                if (!suggestion.fieldId) {
-                    nextRangeData[suggestion.id] = {
-                        oldRanges: [],
-                        newRanges: [],
-                        oldAnchorOffsets: [],
-                        newAnchorOffsets: [],
-                        oldText: "",
-                        newText: "",
-                    };
-                    return;
-                }
-                const language = getSuggestedEditItemLanguage(suggestion);
-                const version = getSuggestedEditItemVersion(suggestion) ?? 0;
-                const field = await editContext.itemsRepository.getField({
-                    item: {
-                        id: suggestion.itemId,
-                        language,
-                        version,
-                    },
-                    fieldId: suggestion.fieldId,
-                });
-                const resolvedItem = field?.descriptor?.item ?? {
-                    id: suggestion.itemId,
-                    language,
-                    version,
-                };
-                const identityKey = getSuggestionFieldIdentityKey({
-                    itemId: resolvedItem.id,
-                    language: resolvedItem.language,
-                    version: resolvedItem.version,
-                    fieldId: suggestion.fieldId,
-                });
-                nextFieldIdentities[suggestion.id] = identityKey;
-                nextFieldValues[identityKey] = {
-                    rawValue: field?.rawValue ?? "",
-                    itemId: resolvedItem.id,
-                    language: resolvedItem.language,
-                    version: resolvedItem.version,
-                    fieldId: suggestion.fieldId,
-                };
-                nextRangeData[suggestion.id] = getSuggestionRangeData(suggestion.oldValue ?? field?.rawValue ?? "", suggestion.newValue ?? "");
-            }));
-            if (!cancelled) {
-                setRangeDataBySuggestionId(nextRangeData);
-                setFieldValueByIdentity(nextFieldValues);
-                setFieldIdentityBySuggestionId(nextFieldIdentities);
-            }
-        };
-        resolveRanges();
-        return () => {
-            cancelled = true;
-        };
-    }, [editContext, suggestions]);
-    // While a single selected suggestion is previewed, the canvas shows its
-    // suggested text; other pending suggestions on that same field still hold
-    // ranges into the original text and would land at the wrong offsets.
-    const hiddenSuggestionIds = useMemo(() => {
-        const hidden = new Set();
-        if (!previewedSuggestionId)
-            return hidden;
-        const previewedIdentity = fieldIdentityBySuggestionId[previewedSuggestionId];
-        if (!previewedIdentity)
-            return hidden;
-        for (const suggestion of suggestions) {
-            if (suggestion.id !== previewedSuggestionId &&
-                fieldIdentityBySuggestionId[suggestion.id] === previewedIdentity) {
-                hidden.add(suggestion.id);
-            }
-        }
-        return hidden;
-    }, [fieldIdentityBySuggestionId, previewedSuggestionId, suggestions]);
-    const bridgeTextRanges = useMemo(() => suggestions.flatMap((suggestion) => {
-        if (!suggestion.fieldId)
-            return [];
-        if (hiddenSuggestionIds.has(suggestion.id))
-            return [];
-        const rangeData = rangeDataBySuggestionId[suggestion.id];
-        if (!rangeData)
-            return [];
-        const ranges = getSuggestionDisplayRanges(rangeData, previewsSuggestedText(suggestion) ? "new" : "old");
-        const fieldIdentity = fieldIdentityBySuggestionId[suggestion.id];
-        const resolvedField = fieldIdentity
-            ? fieldValueByIdentity[fieldIdentity]
-            : undefined;
-        return ranges.map(([start, end]) => ({
-            key: getSuggestedEditTextRangeKey(suggestion),
-            fieldId: suggestion.fieldId,
-            item: {
-                id: resolvedField?.itemId ?? suggestion.itemId,
-                language: resolvedField?.language ??
-                    getSuggestedEditItemLanguage(suggestion),
-                version: resolvedField?.version ??
-                    getSuggestedEditItemVersion(suggestion) ??
-                    0,
-            },
-            start,
-            end,
-        }));
-    }), [
-        fieldIdentityBySuggestionId,
-        fieldValueByIdentity,
-        hiddenSuggestionIds,
-        previewsSuggestedText,
-        rangeDataBySuggestionId,
-        suggestions,
-    ]);
-    const bridgeTextRangeSignature = useMemo(() => bridgeTextRanges
-        .map((range) => [
-        range.key,
-        range.fieldId,
-        range.item.id,
-        range.item.language,
-        range.item.version,
-        range.start,
-        range.end,
-    ].join(":"))
-        .join("|"), [bridgeTextRanges]);
+        publishSuggestionAnchors(anchorKey, measurements);
+    }, [variant, anchorKey, measurements]);
     useEffect(() => {
-        const requestState = bridgeTextRangeRequestRef.current;
-        if (!pageViewContext.bridgeReady || bridgeTextRanges.length === 0) {
-            if (pageViewContext.bridgeReady && requestState.signature !== "") {
-                // Drop our contribution from the shared union so the highlights clear
-                // instead of lingering as phantom geometry targets.
-                pageViewContext.requestBridgeGeometry?.({
-                    source: SUGGESTION_BRIDGE_SOURCE,
-                    textRanges: [],
-                });
-            }
-            requestState.signature = "";
-            requestState.requestedSignature = "";
-            requestState.hasSeenAnyTarget = false;
+        if (variant !== "default")
             return;
-        }
-        const signatureChanged = requestState.signature !== bridgeTextRangeSignature;
-        if (signatureChanged) {
-            requestState.signature = bridgeTextRangeSignature;
-            requestState.requestedSignature = "";
-            requestState.hasSeenAnyTarget = false;
-        }
-        const bridgeGeometry = pageViewContext.bridgeGeometry;
-        const hasAnyTarget = hasAnyExpectedBridgeTextRange(bridgeGeometry, bridgeTextRanges);
-        const hasAllTargets = hasAllExpectedBridgeTextRanges(bridgeGeometry, bridgeTextRanges);
-        if (hasAnyTarget) {
-            requestState.hasSeenAnyTarget = true;
-        }
-        if (hasAllTargets && !signatureChanged) {
-            requestState.requestedSignature = "";
-            return;
-        }
-        const shouldRequest = signatureChanged ||
-            requestState.requestedSignature !== bridgeTextRangeSignature ||
-            (requestState.hasSeenAnyTarget && !hasAnyTarget);
-        if (!shouldRequest)
-            return;
-        requestState.requestedSignature = bridgeTextRangeSignature;
-        pageViewContext.requestBridgeGeometry?.({
-            source: SUGGESTION_BRIDGE_SOURCE,
-            textRanges: bridgeTextRanges,
-        });
-    }, [
-        pageViewContext,
-        pageViewContext.bridgeReady,
-        pageViewContext.bridgeGeometry,
-        bridgeTextRanges,
-        bridgeTextRangeSignature,
-    ]);
-    const measurements = useOverlayMeasurement((metrics, reasons) => {
-        const bridgeGeometry = pageViewContext.bridgeGeometry;
-        if (!bridgeGeometry)
-            return {};
-        const canReusePreviousMeasurement = !reasons.has("viewport") &&
-            !reasons.has("layout") &&
-            !reasons.has("text");
-        const nextMeasurements = {};
-        for (const suggestion of suggestions) {
-            if (!suggestion.fieldId)
-                continue;
-            if (hiddenSuggestionIds.has(suggestion.id))
-                continue;
-            const rangeData = rangeDataBySuggestionId[suggestion.id];
-            if (!rangeData)
-                continue;
-            const ranges = getSuggestionDisplayRanges(rangeData, previewsSuggestedText(suggestion) ? "new" : "old");
-            if (ranges.length === 0)
-                continue;
-            const rects = measureBridgeTextRangeRects(bridgeGeometry, getSuggestedEditTextRangeKey(suggestion), metrics);
-            if (rects.length === 0) {
-                const previousMeasurement = lastMeasurementsRef.current[suggestion.id];
-                if (canReusePreviousMeasurement &&
-                    previousMeasurement?.isTextRange &&
-                    previousMeasurement.rects.length) {
-                    nextMeasurements[suggestion.id] = previousMeasurement;
-                }
-                continue;
-            }
-            nextMeasurements[suggestion.id] = {
-                rects,
-                isTextRange: true,
-            };
-        }
-        return nextMeasurements;
-    }, [
-        pageViewContext.bridgeGeometry,
-        hiddenSuggestionIds,
-        previewsSuggestedText,
-        suggestions,
-        rangeDataBySuggestionId,
-    ], {
-        initialValue: {},
-        equals: suggestionMeasurementsEqual,
-        interests: ["viewport", "layout", "text", "adornment-data"],
-    });
-    useEffect(() => {
-        lastMeasurementsRef.current = measurements;
-    }, [measurements]);
+        return () => publishSuggestionAnchors(anchorKey, {});
+    }, [variant, anchorKey]);
     const overlayGroups = useMemo(() => {
         const groups = new Map();
-        for (const suggestion of suggestions) {
+        for (const suggestion of openSuggestions) {
             const measurement = measurements[suggestion.id];
             if (!measurement?.rects.length)
                 continue;
-            const key = getSuggestionMeasurementKey(measurement);
+            const key = getAnchorMeasurementKey(measurement);
             const existing = groups.get(key);
             if (existing) {
                 existing.suggestions.push(suggestion);
@@ -302,10 +67,30 @@ export function SuggestionHighlightings({ pageViewContext, variant = "default",
             });
         }
         return Array.from(groups.values());
-    }, [suggestions, measurements]);
+    }, [openSuggestions, measurements]);
+    // The canvas overview ruler marks every open suggestion measured on this
+    // page; a click on a mark selects its (topmost) suggestion.
+    const rulerMarks = useMemo(() => {
+        if (variant !== "default")
+            return null;
+        const marks = buildOverviewRulerMarks(overlayGroups.map((group) => ({
+            tone: "suggestion",
+            rects: group.rects,
+            ids: group.suggestions.map((suggestion) => suggestion.id),
+        })));
+        return marks.length > 0 ? marks : null;
+    }, [variant, overlayGroups]);
+    const selectRulerMarkSuggestion = useCallback((mark) => {
+        const suggestion = mark.ids
+            ?.map((id) => openSuggestions.find((candidate) => candidate.id === id))
+            .find((candidate) => !!candidate);
+        if (suggestion)
+            focusSuggestion(editContext, modifiedFields, suggestion);
+    }, [openSuggestions, editContext, modifiedFields]);
+    usePublishOverviewRulerMarks(variant === "default" ? "suggestions" : undefined, rulerMarks, selectRulerMarkSuggestion);
     const variantDisplayByIdentity = useMemo(() => {
         const displays = new Map();
-        for (const suggestion of suggestions) {
+        for (const suggestion of openSuggestions) {
             if (!suggestion.fieldId)
                 continue;
             const identityKey = fieldIdentityBySuggestionId[suggestion.id];
@@ -322,9 +107,9 @@ export function SuggestionHighlightings({ pageViewContext, variant = "default",
                 suggestedEdits: suggestions,
                 field: {
                     ...fieldValue,
-                    pageItemId: pageViewContext.pageItemDescriptor?.id,
-                    pageItemLanguage: pageViewContext.pageItemDescriptor?.language,
-                    pageItemVersion: pageViewContext.pageItemDescriptor?.version,
+                    pageItemId: pageItemDescriptor?.id,
+                    pageItemLanguage: pageItemDescriptor?.language,
+                    pageItemVersion: pageItemDescriptor?.version,
                 },
                 mode: "suggestions",
                 selectedVariantId: editContext?.suggestionVariantSelection[selectionKey],
@@ -335,130 +120,183 @@ export function SuggestionHighlightings({ pageViewContext, variant = "default",
         editContext?.suggestionVariantSelection,
         fieldIdentityBySuggestionId,
         fieldValueByIdentity,
-        pageViewContext.pageItemDescriptor,
+        openSuggestions,
+        pageItemDescriptor,
         suggestions,
     ]);
+    // Canvas → margin hover, see CommentHighlightings.
+    const lastHoverRef = useRef(null);
+    useEffect(() => {
+        if (variant !== "default")
+            return;
+        if (!interaction ||
+            interaction.kind !== "hover" ||
+            typeof interaction.clientX !== "number" ||
+            typeof interaction.clientY !== "number" ||
+            !bridgeGeometry) {
+            // The pointer left the canvas (or did something else than hover).
+            if (lastHoverRef.current) {
+                clearHoveredFeedback(lastHoverRef.current);
+                lastHoverRef.current = null;
+            }
+            return;
+        }
+        const point = hostViewportToOverlay({ x: interaction.clientX, y: interaction.clientY }, bridgeGeometry, overlay.getMetrics());
+        const hit = overlayGroups.find((group) => group.rects.some((rect) => point.x >= rect.x &&
+            point.x <= rect.x + rect.width &&
+            point.y >= rect.y &&
+            point.y <= rect.y + rect.height));
+        if (hit?.suggestions[0]) {
+            lastHoverRef.current = hit.suggestions[0].id;
+            setHoveredFeedback({ kind: "suggestion", id: hit.suggestions[0].id });
+        }
+        else if (lastHoverRef.current) {
+            clearHoveredFeedback(lastHoverRef.current);
+            lastHoverRef.current = null;
+        }
+    }, [variant, interaction, bridgeGeometry, overlayGroups, overlay]);
+    useEffect(() => () => {
+        if (lastHoverRef.current)
+            clearHoveredFeedback(lastHoverRef.current);
+    }, []);
     if (!editContext)
         return null;
     const selectedCommentId = editContext.selectedComment?.id;
     const hasSelectedFeedback = !!selectedCommentId || !!selectedSuggestedEditId;
-    return (_jsx(_Fragment, { children: overlayGroups.flatMap((group) => {
-            const badgeSuggestions = dedupeFeedbackHighlightItems(group.suggestions);
-            return group.rects.map((rect, index) => (_jsxs("div", { style: {
-                    position: "absolute",
-                    top: rect.y,
-                    left: rect.x,
-                    width: rect.width,
-                    height: rect.height,
-                    zIndex: 20,
-                    pointerEvents: "none",
-                }, children: [index === 0 && (_jsxs(FeedbackHighlightBadgeTray, { variant: variant, style: {
-                            top: variant === "minimap" ? -12 : -38,
-                            left: variant === "minimap"
-                                ? group.isTextRange
-                                    ? -4
-                                    : 4
-                                : group.isTextRange
-                                    ? -9
-                                    : 8,
-                        }, children: [variant === "default" &&
-                                Array.from(new Set(group.suggestions.map((suggestion) => fieldIdentityBySuggestionId[suggestion.id] ??
-                                    getSuggestionFieldIdentityKey({
-                                        itemId: suggestion.itemId,
-                                        language: getSuggestedEditItemLanguage(suggestion),
-                                        version: getSuggestedEditItemVersion(suggestion) ?? 0,
-                                        fieldId: suggestion.fieldId ?? "",
-                                    })))).map((identityKey) => {
-                                    const display = variantDisplayByIdentity.get(identityKey);
-                                    const fieldValue = fieldValueByIdentity[identityKey];
-                                    if (!display || !fieldValue)
-                                        return null;
-                                    const selectionKey = getSuggestionSelectionKey(fieldValue);
-                                    return (_jsx(SuggestionVariantSwitcher, { variants: display.variants, selectedVariantId: display.selectedVariantId, onSelect: (variantId) => editContext.setSuggestionVariantSelection((current) => ({
-                                            ...current,
-                                            [selectionKey]: variantId,
-                                        })) }, identityKey));
-                                }), badgeSuggestions.map((suggestion, badgeIndex) => {
-                                const isSelected = suggestion.id === selectedSuggestedEditId;
-                                const isDimmed = hasSelectedFeedback && !isSelected;
-                                return (_jsx(SuggestionDisplayPopover, { suggestion: suggestion, open: openSuggestionId === suggestion.id, onOpenChange: (open) => setOpenSuggestionId((current) => open
-                                        ? suggestion.id
-                                        : current === suggestion.id
-                                            ? undefined
-                                            : current), onSuggestionUpdated: () => { }, children: _jsx(FeedbackHighlightBadge, { item: suggestion, isSelected: isSelected, isDimmed: isDimmed, variant: variant, minimapColorClassName: "bg-component-suggestions", zIndex: isSelected
+    const hoveredSuggestionId = hovered?.kind === "suggestion" ? hovered.id : undefined;
+    // The leader runs from the highlight to the margin beside the canvas; on a
+    // phone the comments sit below the canvas and there is nothing to point at.
+    const leaderIds = variant === "default" && !editContext?.isMobile
+        ? Array.from(new Set([selectedSuggestedEditId, hoveredSuggestionId].filter((id) => !!id)))
+        : [];
+    return (_jsxs(_Fragment, { children: [leaderIds.map((id) => {
+                const suggestion = suggestions.find((candidate) => candidate.id === id);
+                const anchor = getFeedbackAnchor(measurements[id]);
+                if (!suggestion || !anchor)
+                    return null;
+                return (_jsx(FeedbackLeaderCanvasSegment, { anchor: anchor, viewportRight: viewportRight, color: previewsSuggestedText(suggestion)
+                        ? "var(--color-feedback-green)"
+                        : "var(--color-feedback-red)", emphasis: id === selectedSuggestedEditId ? "selected" : "hovered" }, `leader-${id}`));
+            }), overlayGroups.flatMap((group) => {
+                const badgeSuggestions = variant === "minimap"
+                    ? dedupeFeedbackHighlightItems(group.suggestions)
+                    : [];
+                const switchers = variant === "default"
+                    ? Array.from(new Set(group.suggestions.map((suggestion) => fieldIdentityBySuggestionId[suggestion.id] ??
+                        getSuggestionFieldIdentityKey({
+                            itemId: suggestion.itemId,
+                            language: getSuggestedEditItemLanguage(suggestion),
+                            version: getSuggestedEditItemVersion(suggestion) ?? 0,
+                            fieldId: suggestion.fieldId ?? "",
+                        })))).flatMap((identityKey) => {
+                        const display = variantDisplayByIdentity.get(identityKey);
+                        const fieldValue = fieldValueByIdentity[identityKey];
+                        if (!display || !fieldValue || display.variants.length < 2) {
+                            return [];
+                        }
+                        const selectionKey = getSuggestionSelectionKey(fieldValue);
+                        return [
+                            _jsx(SuggestionVariantSwitcher, { variants: display.variants, selectedVariantId: display.selectedVariantId, onSelect: (variantId) => editContext.setSuggestionVariantSelection((current) => ({
+                                    ...current,
+                                    [selectionKey]: variantId,
+                                })) }, identityKey),
+                        ];
+                    })
+                    : [];
+                const showTray = badgeSuggestions.length > 0 || switchers.length > 0;
+                return group.rects.map((rect, index) => (_jsxs("div", { style: {
+                        position: "absolute",
+                        top: rect.y,
+                        left: rect.x,
+                        width: rect.width,
+                        height: rect.height,
+                        zIndex: 20,
+                        pointerEvents: "none",
+                    }, children: [index === 0 && showTray && (_jsxs(FeedbackHighlightBadgeTray, { variant: variant, style: {
+                                top: variant === "minimap" ? -12 : -38,
+                                left: variant === "minimap"
+                                    ? group.isTextRange
+                                        ? -4
+                                        : 4
+                                    : group.isTextRange
+                                        ? -9
+                                        : 8,
+                            }, children: [switchers, badgeSuggestions.map((suggestion, badgeIndex) => {
+                                    const isSelected = suggestion.id === selectedSuggestedEditId;
+                                    const isDimmed = hasSelectedFeedback && !isSelected;
+                                    // A minimap dot is a way to get there, not a second place
+                                    // to read the suggestion: clicking it selects it and
+                                    // scrolls the canvas to it; the margin shows its card.
+                                    return (_jsx(FeedbackHighlightBadge, { item: suggestion, isSelected: isSelected, isDimmed: isDimmed, variant: variant, minimapColorClassName: "bg-component-suggestions", zIndex: isSelected
                                             ? badgeSuggestions.length + 101
-                                            : badgeSuggestions.length - badgeIndex + 100, testId: "suggestion-highlight-icon", "data-suggestion-id": variant === "default" ? suggestion.id : undefined, ariaSubject: "suggestion", onClick: () => {
-                                            editContext.setSelectedComment(undefined);
-                                            editContext.setSelectedSuggestedEdit(suggestion);
-                                            editContext.setScrollIntoView(getSuggestedEditScrollIntoViewTarget(suggestion));
-                                            editContext.select([suggestion.itemId]);
-                                            modifiedFields?.setFocusedField({
-                                                item: {
-                                                    id: suggestion.itemId,
-                                                    language: getSuggestedEditItemLanguage(suggestion),
-                                                    version: getSuggestedEditItemVersion(suggestion) ?? 0,
-                                                },
-                                                fieldId: suggestion.fieldId,
-                                            }, true);
-                                        } }) }, suggestion.id));
-                            })] })), (hasSelectedFeedback
-                        ? group.suggestions.map((suggestion) => [suggestion])
-                        : [group.suggestions]).map((suggestions, highlightIndex) => {
-                        const isSelected = suggestions.length === 1 &&
-                            suggestions[0]?.id === selectedSuggestedEditId;
-                        const isDimmed = hasSelectedFeedback && !isSelected;
-                        // The colour follows the text the ranges point into: on the
-                        // suggested text they mark inserted text (green); on the
-                        // original text they mark what the suggestion removes (red).
-                        // Grouped highlights share one measurement, so they also share
-                        // the preview state of their field.
-                        const marksRemovedText = suggestions.every((suggestion) => !previewsSuggestedText(suggestion));
-                        const highlightKey = suggestions
-                            .map((suggestion) => suggestion.id)
-                            .join("-");
-                        return (_jsx("div", { "data-testid": "suggested-edit-highlight", "data-feedback-selected": isSelected ? "true" : undefined, "data-feedback-dimmed": isDimmed ? "true" : undefined, "data-suggestion-highlight-kind": marksRemovedText ? "removed" : "inserted", className: group.isTextRange
-                                ? "absolute inset-0 rounded-sm"
-                                : "absolute inset-0 rounded-[3px]", style: {
-                                ...getSuggestionHighlightStyle(isSelected, isDimmed, marksRemovedText),
-                                zIndex: isSelected ? 2 : 0,
-                            } }, highlightKey || highlightIndex));
-                    })] }, `${group.suggestions
-                .map((suggestion) => suggestion.id)
-                .sort()
-                .join("|")}-${index}`)));
-        }) }));
-}
-function hasAnyExpectedBridgeTextRange(geometry, textRanges) {
-    if (!geometry)
-        return false;
-    const expectedKeys = new Set(textRanges.map((range) => range.key));
-    return geometry.targets.some((target) => target.kind === "textRange" && expectedKeys.has(target.key));
-}
-function hasAllExpectedBridgeTextRanges(geometry, textRanges) {
-    if (!geometry)
-        return false;
-    const availableKeys = new Set(geometry.targets
-        .filter((target) => target.kind === "textRange")
-        .map((target) => target.key));
-    return textRanges.every((range) => availableKeys.has(range.key));
+                                            : badgeSuggestions.length - badgeIndex + 100, testId: "suggestion-highlight-icon", ariaSubject: "suggestion", onClick: () => focusSuggestion(editContext, modifiedFields, suggestion) }, suggestion.id));
+                                })] })), (hasSelectedFeedback
+                            ? group.suggestions.map((suggestion) => [suggestion])
+                            : [group.suggestions]).map((suggestions, highlightIndex) => {
+                            const isSelected = suggestions.length === 1 &&
+                                suggestions[0]?.id === selectedSuggestedEditId;
+                            const isDimmed = hasSelectedFeedback && !isSelected;
+                            const isHovered = !!hoveredSuggestionId &&
+                                suggestions.some((suggestion) => suggestion.id === hoveredSuggestionId);
+                            // The colour follows the text the ranges point into: on the
+                            // suggested text they mark inserted text (green); on the
+                            // original text they mark what the suggestion removes (red).
+                            // Grouped highlights share one measurement, so they also share
+                            // the preview state of their field.
+                            const marksRemovedText = suggestions.every((suggestion) => !previewsSuggestedText(suggestion));
+                            const highlightKey = suggestions
+                                .map((suggestion) => suggestion.id)
+                                .join("-");
+                            return (_jsx("div", { "data-testid": "suggested-edit-highlight", "data-feedback-selected": isSelected ? "true" : undefined, "data-feedback-dimmed": isDimmed ? "true" : undefined, "data-feedback-hovered": isHovered ? "true" : undefined, "data-suggestion-highlight-kind": marksRemovedText ? "removed" : "inserted", className: group.isTextRange
+                                    ? "absolute inset-0 rounded-sm"
+                                    : "absolute inset-0 rounded-[3px]", style: {
+                                    ...getSuggestionHighlightStyle(isSelected, isDimmed, marksRemovedText, isHovered),
+                                    zIndex: isSelected ? 2 : 0,
+                                } }, highlightKey || highlightIndex));
+                        })] }, `${group.suggestions
+                    .map((suggestion) => suggestion.id)
+                    .sort()
+                    .join("|")}-${index}`)));
+            })] }));
 }
-function getSuggestionMeasurementKey(measurement) {
-    const rectKey = measurement.rects
-        .map((rect) => `${roundMeasurement(rect.x)}:${roundMeasurement(rect.y)}:${roundMeasurement(rect.width)}:${roundMeasurement(rect.height)}`)
-        .join("|");
-    return `${measurement.isTextRange ? "text" : "box"}:${rectKey}`;
-}
-function roundMeasurement(value) {
-    return Math.round(value * 2) / 2;
+/**
+ * Selects a suggestion from a mark that stands for it (minimap dot, overview
+ * ruler): the canvas scrolls to it and the margin shows its card. The marks
+ * also show with only suggested edits on, so the margin is opened first.
+ */
+function focusSuggestion(editContext, modifiedFields, suggestion) {
+    if (!editContext)
+        return;
+    openCommentsFeedback(editContext);
+    editContext.setSelectedComment(undefined);
+    editContext.setSelectedSuggestedEdit(suggestion);
+    editContext.setScrollIntoView(getSuggestedEditScrollIntoViewTarget(suggestion));
+    editContext.select([suggestion.itemId]);
+    modifiedFields?.setFocusedField({
+        item: {
+            id: suggestion.itemId,
+            language: getSuggestedEditItemLanguage(suggestion),
+            version: getSuggestedEditItemVersion(suggestion) ?? 0,
+        },
+        fieldId: suggestion.fieldId,
+    }, true);
 }
-function getSuggestionHighlightStyle(isSelected, isDimmed, marksRemovedText = false) {
-    const fillStrength = isDimmed ? 6 : isSelected ? 28 : 15;
+function getSuggestionHighlightStyle(isSelected, isDimmed, marksRemovedText = false, isHovered = false) {
+    const fillStrength = isDimmed
+        ? isHovered
+            ? 14
+            : 6
+        : isSelected
+            ? 28
+            : isHovered
+                ? 22
+                : 15;
     const color = marksRemovedText
         ? "var(--color-feedback-red)"
         : "var(--color-feedback-green)";
     return {
         background: `color-mix(in srgb, ${color} ${fillStrength}%, transparent)`,
-        opacity: isDimmed ? 0.42 : 1,
+        opacity: isDimmed ? (isHovered ? 0.8 : 0.42) : 1,
         boxShadow: isSelected
             ? `0 1px 5px color-mix(in srgb, ${color} 22%, transparent)`
             : undefined,