@parhelia/core 0.4.12818 → 0.4.12871

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

@@ -1,223 +1,69 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useMemo, useRef, useState, } from "react";
-import { useEditContext, useFieldsEditContext, } from "../client/editContext";
-import { normalizeMarkerId } from "../utils";
-import { CommentDisplayPopover } from "../reviews/CommentDisplayPopover";
-import { measureBridgeComponentRect, measureBridgeFieldRect, measureBridgeTextRangeRects, rectListEquals, toOverlayRect, } from "./overlay/geometry";
-import { useOverlayMeasurement } from "./overlay/useOverlayMeasurement";
-import { getComponentById } from "../componentTreeHelper";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, } from "react";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
+import { openCommentsFeedback } from "../reviews/openCommentsFeedback";
+import { hostViewportToOverlay } from "./overlay/geometry";
+import { usePageViewState, } from "../page-viewer/pageViewContext";
 import { dedupeFeedbackHighlightItems, FeedbackHighlightBadge, FeedbackHighlightBadgeTray, } from "./FeedbackHighlightBadge";
-import { COMMENT_DRAFT_SELECTION_EVENT, COMMENT_TRANSIENT_SELECTION_RECT, } from "../reviews/commentTransientSelection";
-import { getCommentScrollIntoViewTarget, getCommentTextRange, getCommentTextRangeKey, getCommentTransientElementKey, } from "../reviews/feedbackScrollTarget";
-const COMMENT_DRAFT_TEXT_RANGE_KEY = "comment-draft-selection";
-const COMMENT_BRIDGE_SOURCE = "comments";
-function commentMeasurementsEqual(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;
+import { getCommentScrollIntoViewTarget } from "../reviews/feedbackScrollTarget";
+import { getAnchorMeasurementKey, getFeedbackAnchor, } from "./overlay/feedbackAnchorMeasurements";
+import { useCommentAnchorMeasurements } from "./overlay/useCommentAnchorMeasurements";
+import { publishCommentAnchors } from "./overlay/feedbackAnchorStore";
+import { useIframeOverlay } from "./overlay/IframeOverlayProvider";
+import { useOverlayViewportRight } from "./overlay/useOverlayViewportRight";
+import { clearHoveredFeedback, setHoveredFeedback, useHoveredFeedback, } from "../reviews/feedbackHoverState";
+import { FeedbackLeaderCanvasSegment } from "./FeedbackLeaderCanvasSegment";
+import { buildOverviewRulerMarks, usePublishOverviewRulerMarks, } from "../page-viewer/overviewRuler";
+/** Comments that mark the canvas: top-level and replies, not suggestion threads. */
+export function getCanvasComments(comments, showResolved) {
+    return (comments || []).filter((comment) => !comment.suggestedEditId && (showResolved ? true : !comment.isResolved));
+}
+function getRootCommentId(comment, allComments) {
+    let current = comment;
+    const seen = new Set();
+    while (current.parentCommentId && !seen.has(current.id)) {
+        seen.add(current.id);
+        const parent = allComments.find((c) => c.id === current.parentCommentId);
+        if (!parent)
+            return current.parentCommentId;
+        current = parent;
     }
-    return true;
+    return current.id;
+}
+function getCommentColor(comments) {
+    return comments.every((comment) => comment.isResolved)
+        ? "var(--color-feedback-green)"
+        : "var(--color-highlight-100)";
 }
 export function CommentHighlightings({ pageViewContext, variant = "default", }) {
     const editContext = useEditContext();
-    const modifiedFields = useFieldsEditContext();
-    const lastMeasurementsRef = useRef({});
-    const bridgeTextRangeRequestRef = useRef({
-        signature: "",
-        requestedSignature: "",
-        hasSeenAnyTarget: false,
-    });
-    const [commentDraftRange, setCommentDraftRange] = useState();
-    useEffect(() => {
-        const handleDraftSelection = (event) => {
-            const detail = event
-                .detail;
-            setCommentDraftRange(detail?.range);
-        };
-        window.addEventListener(COMMENT_DRAFT_SELECTION_EVENT, handleDraftSelection);
-        return () => {
-            window.removeEventListener(COMMENT_DRAFT_SELECTION_EVENT, handleDraftSelection);
-        };
-    }, []);
-    const visibleComments = useMemo(() => (editContext?.comments || []).filter((comment) => !comment.suggestedEditId &&
-        (editContext?.showResolvedComments ? true : !comment.isResolved)), [editContext?.comments, editContext?.showResolvedComments]);
-    const bridgeTextRanges = useMemo(() => {
-        const commentRanges = visibleComments.flatMap((comment) => {
-            const range = getCommentTextRange(comment);
-            if (!comment.fieldId || !range)
-                return [];
-            return getCommentFieldDescriptors(comment).map((descriptor) => ({
-                key: getCommentTextRangeKey(comment),
-                elementKey: getCommentTransientElementKey(comment),
-                fieldId: descriptor.fieldId,
-                item: descriptor.item,
-                start: range[0],
-                end: range[1],
-            }));
-        });
-        const draftRange = getDraftBridgeTextRange(commentDraftRange);
-        return draftRange ? [...commentRanges, draftRange] : commentRanges;
-    }, [visibleComments, commentDraftRange]);
-    const bridgeTextRangeSignature = useMemo(() => bridgeTextRanges
-        .map((range) => [
-        range.key,
-        range.elementKey,
-        range.fieldId,
-        range.item.id,
-        range.item.language,
-        range.item.version,
-        range.start,
-        range.end,
-    ].join(":"))
-        .join("|"), [bridgeTextRanges]);
+    const overlay = useIframeOverlay();
+    const hovered = useHoveredFeedback();
+    const viewportRight = useOverlayViewportRight();
+    const editorIframe = usePageViewState(pageViewContext, (state) => state.editorIframe);
+    const interaction = usePageViewState(pageViewContext, (state) => state.bridgeInteraction);
+    const bridgeGeometry = usePageViewState(pageViewContext, (state) => state.bridgeGeometry);
+    const visibleComments = useMemo(() => getCanvasComments(editContext?.comments, editContext?.showResolvedComments), [editContext?.comments, editContext?.showResolvedComments]);
+    const { measurements, draftRects } = useCommentAnchorMeasurements(pageViewContext, visibleComments);
+    // The comment margin positions its cards from these same measurements.
+    const anchorKey = editorIframe;
     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: COMMENT_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: COMMENT_BRIDGE_SOURCE,
-            textRanges: bridgeTextRanges,
-        });
-    }, [
-        pageViewContext,
-        pageViewContext.bridgeReady,
-        pageViewContext.bridgeGeometry,
-        bridgeTextRanges,
-        bridgeTextRangeSignature,
-        commentDraftRange,
-    ]);
-    const measurements = useOverlayMeasurement((metrics, reasons) => {
-        if (!editContext)
-            return {};
-        const bridgeGeometry = pageViewContext.bridgeGeometry;
-        const canReusePreviousMeasurement = !reasons.has("viewport") &&
-            !reasons.has("layout") &&
-            !reasons.has("text");
-        const nextMeasurements = {};
-        for (const comment of visibleComments) {
-            const textRange = getCommentTextRange(comment);
-            const fieldDescriptors = getCommentFieldDescriptors(comment);
-            const hasTextRange = !!comment.fieldId && !!textRange;
-            const textRangeRects = hasTextRange
-                ? dedupeOverlayRects(measureBridgeTextRangeRects(bridgeGeometry, getCommentTextRangeKey(comment), metrics))
-                : [];
-            const previousMeasurement = lastMeasurementsRef.current[comment.id];
-            const previousTextRangeRects = canReusePreviousMeasurement && previousMeasurement?.isTextRange
-                ? previousMeasurement.rects
-                : [];
-            let rects = [];
-            let isTextRange = false;
-            if (hasTextRange) {
-                rects = textRangeRects.length
-                    ? textRangeRects
-                    : previousTextRangeRects.length
-                        ? previousTextRangeRects
-                        : getTransientSelectionRects(comment, metrics, pageViewContext.editorIframe);
-                isTextRange = rects.length > 0;
-            }
-            else {
-                const fallbackRect = fieldDescriptors
-                    .map((descriptor) => measureBridgeFieldRect(bridgeGeometry, pageViewContext.bridgeStructure, descriptor, metrics))
-                    .find((rect) => !!rect) ??
-                    measureBridgeCommentComponentRect(comment, pageViewContext, bridgeGeometry, metrics);
-                rects = fallbackRect
-                    ? [fallbackRect]
-                    : canReusePreviousMeasurement && previousMeasurement?.rects.length
-                        ? previousMeasurement.rects
-                        : [];
-                isTextRange =
-                    !fallbackRect &&
-                        canReusePreviousMeasurement &&
-                        previousMeasurement?.isTextRange === true;
-            }
-            if (rects.length > 0) {
-                nextMeasurements[comment.id] = {
-                    rects,
-                    isTextRange,
-                };
-            }
-        }
-        return nextMeasurements;
-    }, [
-        editContext,
-        pageViewContext.bridgeGeometry,
-        pageViewContext.bridgeStructure,
-        visibleComments,
-    ], {
-        initialValue: {},
-        equals: commentMeasurementsEqual,
-        interests: ["viewport", "layout", "text", "adornment-data"],
-    });
-    const draftRects = useOverlayMeasurement((metrics) => {
-        if (!commentDraftRange)
-            return [];
-        const bridgeRects = dedupeOverlayRects(measureBridgeTextRangeRects(pageViewContext.bridgeGeometry, COMMENT_DRAFT_TEXT_RANGE_KEY, metrics));
-        const fallbackRects = getSelectionRangeClientRects(commentDraftRange, metrics, pageViewContext.editorIframe);
-        const rects = bridgeRects.length ? bridgeRects : fallbackRects;
-        return rects;
-    }, [
-        commentDraftRange,
-        pageViewContext.bridgeGeometry,
-        pageViewContext.editorIframe,
-    ], {
-        initialValue: [],
-        equals: rectListEquals,
-        interests: ["viewport", "layout", "text", "adornment-data"],
-    });
+        publishCommentAnchors(anchorKey, measurements);
+    }, [variant, anchorKey, measurements]);
     useEffect(() => {
-        lastMeasurementsRef.current = measurements;
-    }, [measurements]);
+        if (variant !== "default")
+            return;
+        return () => publishCommentAnchors(anchorKey, {});
+    }, [variant, anchorKey]);
     const overlayGroups = useMemo(() => {
         const groups = new Map();
         for (const comment of visibleComments) {
             const measurement = measurements[comment.id];
             if (!measurement?.rects.length)
                 continue;
-            const key = getCommentMeasurementKey(measurement);
+            const key = getAnchorMeasurementKey(measurement);
             const existing = groups.get(key);
             if (existing) {
                 existing.comments.push(comment);
@@ -230,14 +76,91 @@ export function CommentHighlightings({ pageViewContext, variant = "default", })
                 isTextRange: measurement.isTextRange,
             });
         }
-        const nextGroups = Array.from(groups.values());
-        return nextGroups;
+        return Array.from(groups.values());
     }, [visibleComments, measurements]);
+    // The canvas overview ruler marks every comment measured on this page; a
+    // click on a mark opens its (topmost) thread.
+    const allComments = editContext?.comments;
+    const rulerMarks = useMemo(() => {
+        if (variant !== "default")
+            return null;
+        const marks = buildOverviewRulerMarks(overlayGroups.map((group) => ({
+            tone: group.comments.every((comment) => comment.isResolved)
+                ? "comment-resolved"
+                : "comment",
+            rects: group.rects,
+            ids: Array.from(new Set(group.comments.map((comment) => getRootCommentId(comment, allComments || [])))),
+        })));
+        return marks.length > 0 ? marks : null;
+    }, [variant, overlayGroups, allComments]);
+    const modifiedFields = useFieldsEditContext();
+    const openRulerMarkThread = useCallback((mark) => {
+        const thread = mark.ids
+            ?.map((id) => allComments?.find((comment) => comment.id === id))
+            .find((comment) => !!comment);
+        if (thread)
+            focusCommentThread(editContext, modifiedFields, thread);
+    }, [allComments, editContext, modifiedFields]);
+    usePublishOverviewRulerMarks(variant === "default" ? "comments" : undefined, rulerMarks, openRulerMarkThread);
+    // Canvas → margin hover: the highlights are pointer-transparent (inline
+    // editing owns the pointer), so hovering is derived from the bridge's hover
+    // interaction hit-testing the measured rects.
+    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?.comments[0]) {
+            const rootId = getRootCommentId(hit.comments[0], allComments || []);
+            lastHoverRef.current = rootId;
+            setHoveredFeedback({ kind: "comment", id: rootId });
+        }
+        else if (lastHoverRef.current) {
+            clearHoveredFeedback(lastHoverRef.current);
+            lastHoverRef.current = null;
+        }
+    }, [
+        variant,
+        interaction,
+        bridgeGeometry,
+        overlayGroups,
+        overlay,
+        allComments,
+    ]);
+    useEffect(() => () => {
+        if (lastHoverRef.current)
+            clearHoveredFeedback(lastHoverRef.current);
+    }, []);
     if (!editContext)
         return null;
     const selectedCommentId = editContext.selectedComment?.id;
     const selectedSuggestedEditId = editContext.selectedSuggestedEdit?.id;
     const hasSelectedFeedback = !!selectedCommentId || !!selectedSuggestedEditId;
+    const hoveredCommentId = hovered?.kind === "comment" ? hovered.id : undefined;
+    const isHoveredComment = (comment) => !!hoveredCommentId &&
+        (comment.id === hoveredCommentId ||
+            comment.parentCommentId === hoveredCommentId);
+    // 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([selectedCommentId, hoveredCommentId].filter((id) => !!id)))
+        : [];
     return (_jsxs(_Fragment, { children: [_jsx("style", { children: commentHighlightingStyles }), draftRects.map((rect, index) => (_jsx("div", { style: {
                     position: "absolute",
                     top: rect.y,
@@ -248,8 +171,16 @@ export function CommentHighlightings({ pageViewContext, variant = "default", })
                 }, children: _jsx("div", { "data-testid": "comment-draft-highlight", className: "absolute right-0 bottom-[0.08em] left-0 h-[0.82em] min-h-[10px]", style: {
                         ...getDraftCommentRangeStyle(),
                         zIndex: 0,
-                    } }) }, `comment-draft-${index}`))), overlayGroups.flatMap((group) => {
-                const badgeComments = dedupeFeedbackHighlightItems(group.comments, (comment) => comment.id === editContext.selectedComment?.id);
+                    } }) }, `comment-draft-${index}`))), leaderIds.map((id) => {
+                const comment = visibleComments.find((candidate) => candidate.id === id);
+                const anchor = getFeedbackAnchor(measurements[id]);
+                if (!comment || !anchor)
+                    return null;
+                return (_jsx(FeedbackLeaderCanvasSegment, { anchor: anchor, viewportRight: viewportRight, color: getCommentColor([comment]), emphasis: id === selectedCommentId ? "selected" : "hovered" }, `leader-${id}`));
+            }), overlayGroups.flatMap((group) => {
+                const badgeComments = variant === "minimap"
+                    ? dedupeFeedbackHighlightItems(group.comments, (comment) => comment.id === editContext.selectedComment?.id)
+                    : [];
                 return group.rects.map((rect, index) => (_jsxs("div", { style: {
                         position: "absolute",
                         top: rect.y,
@@ -262,42 +193,54 @@ export function CommentHighlightings({ pageViewContext, variant = "default", })
                             : [group.comments]).map((comments, highlightIndex) => {
                             const isSelected = comments.length === 1 && comments[0]?.id === selectedCommentId;
                             const isDimmed = hasSelectedFeedback && !isSelected;
+                            const isHovered = comments.some(isHoveredComment);
                             const highlightKey = comments
                                 .map((comment) => comment.id)
                                 .join("-");
-                            return group.isTextRange ? (_jsx("div", { "data-testid": "comment-highlight", "data-feedback-selected": isSelected ? "true" : undefined, "data-feedback-dimmed": isDimmed ? "true" : undefined, className: "absolute right-0 bottom-[0.08em] left-0 h-[0.82em] min-h-[10px]", style: {
-                                    ...getCommentRangeStyle(comments, isSelected, isDimmed),
+                            return group.isTextRange ? (_jsx("div", { "data-testid": "comment-highlight", "data-feedback-selected": isSelected ? "true" : undefined, "data-feedback-dimmed": isDimmed ? "true" : undefined, "data-feedback-hovered": isHovered ? "true" : undefined, className: "absolute right-0 bottom-[0.08em] left-0 h-[0.82em] min-h-[10px]", style: {
+                                    ...getCommentRangeStyle(comments, isSelected, isDimmed, isHovered),
                                     zIndex: isSelected ? 2 : 0,
-                                } }, highlightKey || highlightIndex)) : (_jsx("div", { "data-testid": "comment-highlight", "data-feedback-selected": isSelected ? "true" : undefined, "data-feedback-dimmed": isDimmed ? "true" : undefined, className: "absolute inset-0 rounded-[3px]", style: {
-                                    ...getCommentFallbackStyle(comments, isSelected, isDimmed),
+                                } }, highlightKey || highlightIndex)) : (_jsx("div", { "data-testid": "comment-highlight", "data-feedback-selected": isSelected ? "true" : undefined, "data-feedback-dimmed": isDimmed ? "true" : undefined, "data-feedback-hovered": isHovered ? "true" : undefined, className: "absolute inset-0 rounded-[3px]", style: {
+                                    ...getCommentFallbackStyle(comments, isSelected, isDimmed, isHovered),
                                     zIndex: isSelected ? 2 : 0,
                                 } }, highlightKey || highlightIndex));
-                        }), index === 0 && (_jsx(FeedbackHighlightBadgeTray, { variant: variant, style: {
-                                top: variant === "minimap"
-                                    ? group.isTextRange
-                                        ? -11
-                                        : -8
-                                    : group.isTextRange
-                                        ? -24
-                                        : -16,
-                                left: variant === "minimap"
-                                    ? group.isTextRange
-                                        ? -4
-                                        : 4
-                                    : group.isTextRange
-                                        ? -9
-                                        : 8,
+                        }), index === 0 && badgeComments.length > 0 && (_jsx(FeedbackHighlightBadgeTray, { variant: variant, style: {
+                                top: group.isTextRange ? -11 : -8,
+                                left: group.isTextRange ? -4 : 4,
                             }, children: badgeComments.map((comment, badgeIndex) => {
                                 const isSelected = comment.id === selectedCommentId;
                                 const isDimmed = hasSelectedFeedback && !isSelected;
-                                return (_jsx(CommentDisplayPopover, { comment: comment, onCommentUpdated: () => {
-                                        editContext?.loadComments?.();
-                                    }, children: _jsx(CommentHighlightBadge, { comment: comment, isSelected: isSelected, isDimmed: isDimmed, variant: variant, minimapColorClassName: "bg-highlight-100", zIndex: isSelected
-                                            ? badgeComments.length + 101
-                                            : badgeComments.length - badgeIndex + 100 }) }, comment.id));
+                                // A minimap dot is a way to get there, not a second place
+                                // to read the thread: clicking it selects the thread and
+                                // scrolls the canvas to it; the margin shows its card.
+                                return (_jsx(CommentHighlightBadge, { comment: comment, isSelected: isSelected, isDimmed: isDimmed, variant: variant, minimapColorClassName: "bg-highlight-100", zIndex: isSelected
+                                        ? badgeComments.length + 101
+                                        : badgeComments.length - badgeIndex + 100 }, comment.id));
                             }) }))] }, `${group.key}-${index}`)));
             })] }));
 }
+/**
+ * Selects a thread from a mark that stands for it (minimap dot, overview
+ * ruler): the canvas scrolls to it and the margin shows its card.
+ */
+function focusCommentThread(editContext, modifiedFields, comment) {
+    // The thread is read in the comment margin; make sure it is showing.
+    openCommentsFeedback(editContext);
+    editContext?.setSelectedComment(comment);
+    editContext?.setSelectedSuggestedEdit(undefined);
+    editContext?.setScrollIntoView(getCommentScrollIntoViewTarget(comment));
+    editContext?.select([comment.itemId]);
+    if (comment.fieldId) {
+        modifiedFields?.setFocusedField({
+            fieldId: comment.fieldId,
+            item: {
+                id: comment.itemId,
+                language: comment.language,
+                version: comment.version,
+            },
+        }, false);
+    }
+}
 const CommentHighlightBadge = forwardRef(function CommentHighlightBadge({ comment, isSelected, isDimmed, variant, minimapColorClassName, zIndex, className, style, onClick, ...buttonProps }, ref) {
     const editContext = useEditContext();
     const modifiedFields = useFieldsEditContext();
@@ -305,164 +248,30 @@ const CommentHighlightBadge = forwardRef(function CommentHighlightBadge({ commen
         onClick?.(event);
         if (event.defaultPrevented)
             return;
-        editContext?.setSelectedComment(comment);
-        editContext?.setSelectedSuggestedEdit(undefined);
-        editContext?.setScrollIntoView(getCommentScrollIntoViewTarget(comment));
-        editContext?.select([comment.itemId]);
-        if (comment.fieldId) {
-            modifiedFields?.setFocusedField({
-                fieldId: comment.fieldId,
-                item: {
-                    id: comment.itemId,
-                    language: comment.language,
-                    version: comment.version,
-                },
-            }, false);
-        }
+        focusCommentThread(editContext, modifiedFields, comment);
     };
     return (_jsx(FeedbackHighlightBadge, { ref: ref, item: comment, isSelected: isSelected, isDimmed: isDimmed, variant: variant, minimapColorClassName: minimapColorClassName, zIndex: zIndex, testId: "comment-highlight-icon", ariaSubject: "comment", className: className, style: style, onClick: handleClick, ...buttonProps }));
 });
-function getCommentMeasurementKey(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;
-}
-function getDraftBridgeTextRange(range) {
-    const textRange = getSelectionTextRange(range);
-    if (!range?.fieldId || !range.itemId || !textRange)
-        return undefined;
-    return {
-        key: COMMENT_DRAFT_TEXT_RANGE_KEY,
-        elementKey: range.elementKey,
-        fieldId: range.fieldId,
-        item: {
-            id: range.itemId,
-            language: range.language || "",
-            version: typeof range.version === "number" ? range.version : undefined,
-        },
-        start: textRange[0],
-        end: textRange[1],
-    };
-}
-function getSelectionTextRange(range) {
-    if (!range?.text?.trim() ||
-        typeof range.startOffset !== "number" ||
-        typeof range.endOffset !== "number") {
-        return null;
-    }
-    const start = Math.max(0, Math.min(range.startOffset, range.endOffset));
-    const end = Math.max(start, range.startOffset, range.endOffset);
-    return end > start ? [start, end] : null;
-}
-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));
-}
-function getCommentFieldDescriptors(comment) {
-    if (!comment.fieldId)
-        return [];
-    const items = getCommentCandidateItems(comment);
-    return items.map((item) => ({
-        fieldId: comment.fieldId,
-        item,
-    }));
-}
-function getCommentCandidateItems(comment) {
-    const candidates = [];
-    const addCandidate = (id) => {
-        if (!id)
-            return;
-        const normalizedId = normalizeMarkerId(id);
-        if (candidates.some((candidate) => normalizeMarkerId(candidate.id) === normalizedId)) {
-            return;
-        }
-        candidates.push({
-            id,
-            language: comment.language,
-            version: comment.version,
-        });
-    };
-    addCandidate(comment.itemId);
-    addCandidate(comment.mainItemId);
-    comment.relatedItems?.forEach((item) => addCandidate(item.itemId));
-    return candidates;
-}
-function measureBridgeCommentComponentRect(comment, pageViewContext, bridgeGeometry, metrics) {
-    const page = pageViewContext?.page;
-    if (!page)
-        return null;
-    for (const item of getCommentCandidateItems(comment)) {
-        const component = getComponentById(item.id, page);
-        if (!component)
-            continue;
-        const measurement = measureBridgeComponentRect(bridgeGeometry, component, metrics);
-        if (measurement?.rect)
-            return measurement.rect;
-    }
-    return null;
-}
-function getTransientSelectionRects(comment, metrics, iframe) {
-    const rect = comment[COMMENT_TRANSIENT_SELECTION_RECT];
-    return rect ? viewportSelectionRectToOverlayRects(rect, metrics, iframe) : [];
-}
-function getSelectionRangeClientRects(range, metrics, iframe) {
-    const rect = range.clientRect;
-    return rect ? viewportSelectionRectToOverlayRects(rect, metrics, iframe) : [];
-}
-function viewportSelectionRectToOverlayRects(rect, metrics, iframe) {
-    if (!rect || rect.width <= 0 || rect.height <= 0)
-        return [];
-    const iframeRect = iframe?.getBoundingClientRect();
-    return [
-        toOverlayRect({
-            left: iframeRect ? rect.left - iframeRect.left : rect.left,
-            top: iframeRect ? rect.top - iframeRect.top : rect.top,
-            width: rect.width,
-            height: rect.height,
-        }, metrics),
-    ];
-}
-function dedupeOverlayRects(rects) {
-    const seen = new Set();
-    return rects.filter((rect) => {
-        const key = [
-            Math.round(rect.x * 100),
-            Math.round(rect.y * 100),
-            Math.round(rect.width * 100),
-            Math.round(rect.height * 100),
-        ].join(":");
-        if (seen.has(key))
-            return false;
-        seen.add(key);
-        return true;
-    });
-}
-function getCommentRangeStyle(comments, isSelected, isDimmed = false) {
+function getCommentRangeStyle(comments, isSelected, isDimmed = false, isHovered = false) {
     const allResolved = comments.every((comment) => comment.isResolved);
-    const color = allResolved
-        ? "var(--color-feedback-green)"
-        : "var(--color-highlight-100)";
-    const fillStrength = isDimmed ? 10 : allResolved ? 18 : isSelected ? 42 : 28;
+    const color = getCommentColor(comments);
+    const fillStrength = isDimmed
+        ? isHovered
+            ? 22
+            : 10
+        : allResolved
+            ? 18
+            : isSelected
+                ? 42
+                : isHovered
+                    ? 36
+                    : 28;
     const shadowStrength = isDimmed ? 0 : allResolved ? 8 : isSelected ? 28 : 12;
     return {
         background: `color-mix(in srgb, ${color} ${fillStrength}%, transparent)`,
         borderRadius: "2px",
         boxShadow: `0 1px 4px color-mix(in srgb, ${color} ${shadowStrength}%, transparent)`,
-        opacity: isDimmed ? 0.42 : allResolved ? 0.72 : 1,
+        opacity: isDimmed ? (isHovered ? 0.8 : 0.42) : allResolved ? 0.72 : 1,
         ...(isSelected
             ? {
                 animation: "parhelia-comment-highlight-pulse 2.8s ease-in-out infinite",
@@ -478,14 +287,12 @@ function getDraftCommentRangeStyle() {
         boxShadow: "0 1px 4px color-mix(in srgb, var(--color-highlight-100) 18%, transparent)",
     };
 }
-function getCommentFallbackStyle(comments, isSelected, isDimmed = false) {
+function getCommentFallbackStyle(comments, isSelected, isDimmed = false, isHovered = false) {
     const allResolved = comments.every((comment) => comment.isResolved);
-    const color = allResolved
-        ? "var(--color-feedback-green)"
-        : "var(--color-highlight-100)";
+    const color = getCommentColor(comments);
     return {
-        background: `color-mix(in srgb, ${color} ${isDimmed ? 4 : isSelected ? 16 : 8}%, transparent)`,
-        opacity: isDimmed ? 0.4 : allResolved ? 0.72 : 1,
+        background: `color-mix(in srgb, ${color} ${isDimmed ? (isHovered ? 10 : 4) : isSelected ? 16 : isHovered ? 12 : 8}%, transparent)`,
+        opacity: isDimmed ? (isHovered ? 0.8 : 0.4) : allResolved ? 0.72 : 1,
     };
 }
 const commentHighlightingStyles = `