@parhelia/core 0.4.12818 → 0.4.12871

package/dist/editor/reviews/CommentQuote.d.ts

@@ -1,4 +1,13 @@
 import type { Comment } from "../../types";
-export declare function CommentQuote({ comment }: {
+/**
+ * How following a quote reaches the quoted comment:
+ * - `dom`: reveal the quoted comment inside the same surface (list, popover)
+ *   by scrolling its nearest feedback scroll container;
+ * - `select`: select the quoted comment so the owning surface pins its thread
+ *   and the canvas scrolls to its anchor (the comment margin).
+ */
+export type FeedbackNavigation = "dom" | "select";
+export declare function CommentQuote({ comment, navigation, }: {
     comment: Comment;
+    navigation?: FeedbackNavigation;
 }): import("react").JSX.Element;

package/dist/editor/reviews/CommentQuote.js

@@ -1,16 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatDate } from "../utils";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { useFeedbackAuthor } from "./feedbackAvatar";
 import { stripCommentImages } from "./commentImages";
-import { isTextSelectionClick } from "./feedbackSelection";
-export function CommentQuote({ comment }) {
+import { EmojiText } from "../../components/emoji/EmojiText";
+import { isTextSelectionClick, selectFeedbackComment, } from "./feedbackSelection";
+import { revealInFeedbackScrollContainer } from "./scrollWithin";
+export function CommentQuote({ comment, navigation = "dom", }) {
     const author = useFeedbackAuthor(comment);
+    const editContext = useEditContext();
+    const fieldsContext = useFieldsEditContext();
     const created = comment.created ? new Date(comment.created) : undefined;
     const date = created && !Number.isNaN(created.getTime()) ? created : undefined;
     return (_jsx("button", { type: "button", className: "border-border-default hover:bg-neutral-grey-5 focus-visible:ring-highlight-100 mb-2 block w-full cursor-pointer rounded-md border bg-white px-3 py-2 text-left shadow-sm focus-visible:ring-2 focus-visible:outline-none", "aria-label": `Jump to comment by ${author.displayName}`, "data-testid": "comment-quote", onClick: (event) => {
             event.stopPropagation();
             if (isTextSelectionClick(event.currentTarget, event))
                 return;
+            if (navigation === "select") {
+                void selectFeedbackComment(comment, editContext, fieldsContext);
+                return;
+            }
             // Keep navigation within the surface containing this quote: the same
             // comment can also be mounted in the sidebar behind an open popover.
             const thread = event.currentTarget.closest("[data-comment-thread]");
@@ -18,13 +27,9 @@ export function CommentQuote({ comment }) {
             if (!target)
                 return;
             target.focus({ preventScroll: true });
-            target.scrollIntoView({
-                behavior: window.matchMedia("(prefers-reduced-motion: reduce)")
-                    .matches
-                    ? "instant"
-                    : "smooth",
-                block: "nearest",
-            });
-        }, children: _jsxs("span", { className: "border-neutral-grey-50 block min-w-0 border-l-2 pl-2", children: [_jsxs("span", { className: "text-neutral-grey-50 mb-0.5 flex flex-wrap items-baseline gap-x-2 text-xs leading-4", children: [_jsx("span", { className: "min-w-0 truncate font-medium", children: author.displayName }), date && (_jsx("time", { dateTime: date.toISOString(), children: formatDate(date) }))] }), _jsx("span", { className: "text-neutral-grey-100 line-clamp-3 text-sm leading-5 [overflow-wrap:anywhere] whitespace-pre-wrap select-text", children: stripCommentImages(comment.text) })] }) }));
+            // Only the surface's own scroll container moves; scrollIntoView would
+            // also scroll every ancestor (editor shell, overlay roots).
+            revealInFeedbackScrollContainer(target, { behavior: "smooth" });
+        }, children: _jsxs("span", { className: "border-neutral-grey-50 block min-w-0 border-l-2 pl-2", children: [_jsxs("span", { className: "text-neutral-grey-50 mb-0.5 flex flex-wrap items-baseline gap-x-2 text-xs leading-4", children: [_jsx("span", { className: "min-w-0 truncate font-medium", children: author.displayName }), date && (_jsx("time", { dateTime: date.toISOString(), children: formatDate(date) }))] }), _jsx("span", { className: "text-neutral-grey-100 line-clamp-3 text-sm leading-5 [overflow-wrap:anywhere] whitespace-pre-wrap select-text", children: _jsx(EmojiText, { text: stripCommentImages(comment.text) }) })] }) }));
 }
 //# sourceMappingURL=CommentQuote.js.map

package/dist/editor/reviews/CommentQuote.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentQuote.js","sourceRoot":"","sources":["../../../src/editor/reviews/CommentQuote.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAE3D,MAAM,UAAU,YAAY,CAAC,EAAE,OAAO,EAAwB;IAC5D,MAAM,MAAM,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACxE,MAAM,IAAI,GACR,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpE,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,0NAA0N,gBACxN,sBAAsB,MAAM,CAAC,WAAW,EAAE,iBAC1C,eAAe,EAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,oBAAoB,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC;gBAAE,OAAO;YAC7D,qEAAqE;YACrE,qEAAqE;YACrE,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;YACpE,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CACvB,MAAM,EAAE,gBAAgB,CAAc,mBAAmB,CAAC,IAAI,EAAE,CACjE,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,KAAK,OAAO,CAAC,EAAE,CAAC,CAAC;YAC9D,IAAI,CAAC,MAAM;gBAAE,OAAO;YACpB,MAAM,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YACtC,MAAM,CAAC,cAAc,CAAC;gBACpB,QAAQ,EAAE,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC;qBAC5D,OAAO;oBACR,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,QAAQ;gBACZ,KAAK,EAAE,SAAS;aACjB,CAAC,CAAC;QACL,CAAC,YAED,gBAAM,SAAS,EAAC,sDAAsD,aACpE,gBAAM,SAAS,EAAC,qFAAqF,aACnG,eAAM,SAAS,EAAC,8BAA8B,YAC3C,MAAM,CAAC,WAAW,GACd,EACN,IAAI,IAAI,CACP,eAAM,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,YAAG,UAAU,CAAC,IAAI,CAAC,GAAQ,CAC9D,IACI,EACP,eAAM,SAAS,EAAC,+GAA+G,YAC5H,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,GAC5B,IACF,GACA,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"CommentQuote.js","sourceRoot":"","sources":["../../../src/editor/reviews/CommentQuote.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,OAAO,EACL,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,+BAA+B,EAAE,MAAM,gBAAgB,CAAC;AAWjE,MAAM,UAAU,YAAY,CAAC,EAC3B,OAAO,EACP,UAAU,GAAG,KAAK,GAInB;IACC,MAAM,MAAM,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,aAAa,GAAG,oBAAoB,EAAE,CAAC;IAC7C,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IACxE,MAAM,IAAI,GACR,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpE,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,0NAA0N,gBACxN,sBAAsB,MAAM,CAAC,WAAW,EAAE,iBAC1C,eAAe,EAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,oBAAoB,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC;gBAAE,OAAO;YAC7D,IAAI,UAAU,KAAK,QAAQ,EAAE,CAAC;gBAC5B,KAAK,qBAAqB,CAAC,OAAO,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;gBAChE,OAAO;YACT,CAAC;YACD,qEAAqE;YACrE,qEAAqE;YACrE,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;YACpE,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CACvB,MAAM,EAAE,gBAAgB,CAAc,mBAAmB,CAAC,IAAI,EAAE,CACjE,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,KAAK,OAAO,CAAC,EAAE,CAAC,CAAC;YAC9D,IAAI,CAAC,MAAM;gBAAE,OAAO;YACpB,MAAM,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC;YACtC,sEAAsE;YACtE,4DAA4D;YAC5D,+BAA+B,CAAC,MAAM,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QAClE,CAAC,YAED,gBAAM,SAAS,EAAC,sDAAsD,aACpE,gBAAM,SAAS,EAAC,qFAAqF,aACnG,eAAM,SAAS,EAAC,8BAA8B,YAC3C,MAAM,CAAC,WAAW,GACd,EACN,IAAI,IAAI,CACP,eAAM,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,YAAG,UAAU,CAAC,IAAI,CAAC,GAAQ,CAC9D,IACI,EACP,eAAM,SAAS,EAAC,+GAA+G,YAC7H,KAAC,SAAS,IAAC,IAAI,EAAE,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,GAAI,GAChD,IACF,GACA,CACV,CAAC;AACJ,CAAC"}

package/dist/editor/reviews/CommentTargetOutline.d.ts

@@ -0,0 +1,13 @@
+import type { PickableRect } from "./commentTargetPicker";
+/**
+ * Outlines what a click would comment on while picking a comment target,
+ * with a label naming it. Never takes pointer events: the surface or form
+ * underneath owns the pointer.
+ */
+export declare function CommentTargetOutline({ rect, label, position, zIndex, }: {
+    rect: PickableRect;
+    label: string;
+    /** `absolute` inside the canvas overlay layer, `fixed` over editor forms. */
+    position: "absolute" | "fixed";
+    zIndex: number;
+}): import("react").JSX.Element;

package/dist/editor/reviews/CommentTargetOutline.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MessageCirclePlus } from "lucide-react";
+/**
+ * Outlines what a click would comment on while picking a comment target,
+ * with a label naming it. Never takes pointer events: the surface or form
+ * underneath owns the pointer.
+ */
+export function CommentTargetOutline({ rect, label, position, zIndex, }) {
+    // The label sits above the box, or inside its top edge when there is no
+    // room above (targets at the very top of the page or viewport).
+    const labelInside = rect.y < 22;
+    return (_jsx("div", { "data-testid": "comment-target-outline", className: "border-highlight-100 bg-highlight-100/5 pointer-events-none rounded-[3px] border-2", style: {
+            position,
+            left: rect.x,
+            top: rect.y,
+            width: rect.width,
+            height: rect.height,
+            zIndex,
+        }, children: _jsxs("div", { "data-testid": "comment-target-label", className: "bg-highlight-100 absolute left-[-2px] flex max-w-[260px] items-center gap-1 rounded-[3px] px-1.5 py-0.5 text-[11px] leading-4 font-medium whitespace-nowrap text-white", style: labelInside ? { top: -2 } : { bottom: "100%" }, children: [_jsx(MessageCirclePlus, { className: "h-3 w-3 shrink-0", strokeWidth: 1.5 }), _jsx("span", { className: "truncate", children: label })] }) }));
+}
+//# sourceMappingURL=CommentTargetOutline.js.map

package/dist/editor/reviews/CommentTargetOutline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentTargetOutline.js","sourceRoot":"","sources":["../../../src/editor/reviews/CommentTargetOutline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGjD;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAAC,EACnC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,GAOP;IACC,wEAAwE;IACxE,gEAAgE;IAChE,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC;IAEhC,OAAO,CACL,6BACc,wBAAwB,EACpC,SAAS,EAAC,oFAAoF,EAC9F,KAAK,EAAE;YACL,QAAQ;YACR,IAAI,EAAE,IAAI,CAAC,CAAC;YACZ,GAAG,EAAE,IAAI,CAAC,CAAC;YACX,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,MAAM;SACP,YAED,8BACc,sBAAsB,EAClC,SAAS,EAAC,wKAAwK,EAClL,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,aAErD,KAAC,iBAAiB,IAAC,SAAS,EAAC,kBAAkB,EAAC,WAAW,EAAE,GAAG,GAAI,EACpE,eAAM,SAAS,EAAC,UAAU,YAAE,KAAK,GAAQ,IACrC,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/editor/reviews/CommentTargetPickerDomLayer.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The editor-document half of comment target picking: form fields become
+ * pickable, the picker cursor applies across the editor, Escape or a click on
+ * anything that is not a target leaves the mode. Mounted only while picking.
+ * (The canvas is covered by `CommentTargetPickerCanvasLayer`.)
+ */
+export declare function CommentTargetPickerDomLayer(): import("react").ReactPortal | null;

package/dist/editor/reviews/CommentTargetPickerDomLayer.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useEditContext } from "../client/editContext";
+import { COMMENT_PICKER_CURSOR, COMMENT_PICKER_IGNORE_ATTRIBUTE, stopCommentTargetPicking, } from "./commentTargetPicker";
+import { CommentTargetOutline } from "./CommentTargetOutline";
+/** Form fields of the editor (item form, page side form) carry these. */
+const FORM_FIELD_SELECTOR = "[data-field-id][data-itemid]";
+const PICKING_ATTRIBUTE = "data-comment-target-picking";
+function closestFormField(target) {
+    return target instanceof Element
+        ? target.closest(FORM_FIELD_SELECTOR)
+        : null;
+}
+function readFieldDescriptor(element) {
+    const fieldId = element.getAttribute("data-field-id");
+    const itemId = element.getAttribute("data-itemid");
+    if (!fieldId || !itemId)
+        return null;
+    const version = Number.parseInt(element.getAttribute("data-version") ?? "", 10);
+    return {
+        fieldId,
+        item: {
+            id: itemId,
+            language: element.getAttribute("data-language") ?? "",
+            version: Number.isFinite(version) ? version : 0,
+        },
+    };
+}
+/**
+ * The editor-document half of comment target picking: form fields become
+ * pickable, the picker cursor applies across the editor, Escape or a click on
+ * anything that is not a target leaves the mode. Mounted only while picking.
+ * (The canvas is covered by `CommentTargetPickerCanvasLayer`.)
+ */
+export function CommentTargetPickerDomLayer() {
+    const editContext = useEditContext();
+    const [hovered, setHovered] = useState();
+    // The edit context changes identity with every editor state change; the
+    // listeners only need its latest `addComment`.
+    const addCommentRef = useRef(editContext?.addComment);
+    addCommentRef.current = editContext?.addComment;
+    useEffect(() => {
+        const root = document.documentElement;
+        root.setAttribute(PICKING_ATTRIBUTE, "");
+        const style = document.createElement("style");
+        style.textContent = `html[${PICKING_ATTRIBUTE}], html[${PICKING_ATTRIBUTE}] * { cursor: ${COMMENT_PICKER_CURSOR} !important; }`;
+        document.head.appendChild(style);
+        let hoveredElement = null;
+        const showOutline = (element) => {
+            hoveredElement = element;
+            if (!element) {
+                setHovered(undefined);
+                return;
+            }
+            const box = element.getBoundingClientRect();
+            setHovered({
+                rect: { x: box.left, y: box.top, width: box.width, height: box.height },
+                label: element.getAttribute("data-fieldname") || "Field",
+            });
+        };
+        const handleMove = (event) => {
+            const field = closestFormField(event.target);
+            if (field !== hoveredElement)
+                showOutline(field);
+        };
+        // The outline is fixed-positioned; keep it on its field while scrolling.
+        const handleScroll = () => {
+            if (hoveredElement)
+                showOutline(hoveredElement);
+        };
+        // The mouse-down is left alone so text can be selected in the field; a
+        // selection inside it becomes the comment's range. The click that ends
+        // the gesture picks: it must not reach the field's own handlers, and the
+        // field gives the focus back so the composer can take it.
+        const handleClick = (event) => {
+            const target = event.target instanceof Element ? event.target : null;
+            if (target?.closest(`[${COMMENT_PICKER_IGNORE_ATTRIBUTE}]`))
+                return;
+            const field = closestFormField(target);
+            const descriptor = field ? readFieldDescriptor(field) : null;
+            stopCommentTargetPicking();
+            if (!descriptor)
+                return; // a click elsewhere just leaves the mode
+            event.preventDefault();
+            event.stopPropagation();
+            const active = document.activeElement;
+            if (active instanceof HTMLElement && field?.contains(active)) {
+                active.blur();
+            }
+            addCommentRef.current?.({ field: descriptor });
+        };
+        const handleKeyDown = (event) => {
+            if (event.key !== "Escape")
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            stopCommentTargetPicking();
+        };
+        document.addEventListener("mousemove", handleMove, true);
+        document.addEventListener("scroll", handleScroll, true);
+        document.addEventListener("click", handleClick, true);
+        document.addEventListener("keydown", handleKeyDown, true);
+        return () => {
+            document.removeEventListener("mousemove", handleMove, true);
+            document.removeEventListener("scroll", handleScroll, true);
+            document.removeEventListener("click", handleClick, true);
+            document.removeEventListener("keydown", handleKeyDown, true);
+            root.removeAttribute(PICKING_ATTRIBUTE);
+            style.remove();
+        };
+    }, []);
+    if (!hovered || typeof document === "undefined")
+        return null;
+    return createPortal(_jsx(CommentTargetOutline, { rect: hovered.rect, label: hovered.label, position: "fixed", zIndex: 300 }), document.body);
+}
+//# sourceMappingURL=CommentTargetPickerDomLayer.js.map

package/dist/editor/reviews/CommentTargetPickerDomLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentTargetPickerDomLayer.js","sourceRoot":"","sources":["../../../src/editor/reviews/CommentTargetPickerDomLayer.tsx"],"names":[],"mappings":"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"}

package/dist/editor/reviews/CommentThreadAgentLink.d.ts

@@ -11,6 +11,11 @@ type CommentThreadAgentLinkProps = {
     threadComments: readonly CommentType[];
     resolvedAuthorNames?: Record<string, string>;
     className?: string;
+    /**
+     * Shares a single line with other actions (margin balloon): never wraps;
+     * the label truncates before it would push the line apart.
+     */
+    compact?: boolean;
     onStarted?: () => void;
 };
 /**
@@ -19,5 +24,5 @@ type CommentThreadAgentLinkProps = {
  * available or the thread cannot be worked on (resolved, read-only, unsaved).
  * Hidden until the surrounding thread is hovered or the link has focus.
  */
-export declare function CommentThreadAgentLink({ rootComment, threadComments, resolvedAuthorNames, className, onStarted, }: CommentThreadAgentLinkProps): import("react").JSX.Element | null;
+export declare function CommentThreadAgentLink({ rootComment, threadComments, resolvedAuthorNames, className, compact, onStarted, }: CommentThreadAgentLinkProps): import("react").JSX.Element | null;
 export {};

package/dist/editor/reviews/CommentThreadAgentLink.js

@@ -17,7 +17,7 @@ export const COMMENT_THREAD_HOVER_GROUP_CLASS = "group/comment-thread";
  * available or the thread cannot be worked on (resolved, read-only, unsaved).
  * Hidden until the surrounding thread is hovered or the link has focus.
  */
-export function CommentThreadAgentLink({ rootComment, threadComments, resolvedAuthorNames, className, onStarted, }) {
+export function CommentThreadAgentLink({ rootComment, threadComments, resolvedAuthorNames, className, compact = false, onStarted, }) {
     const editContext = useEditContext();
     const canUseAi = useFeature(LicenseFeatures.AI);
     if (!canUseAi ||
@@ -27,11 +27,11 @@ export function CommentThreadAgentLink({ rootComment, threadComments, resolvedAu
         editContext?.readonly) {
         return null;
     }
-    return (_jsx("div", { className: cn("flex", className), children: _jsxs("button", { type: "button", className: cn("text-neutral-grey-50 hover:text-neutral-grey-100 inline-flex items-start gap-1.5 text-left text-xs leading-4 underline-offset-2 transition-opacity hover:underline focus-visible:opacity-100", !editContext?.isMobile &&
-                "opacity-0 group-hover/comment-thread:opacity-100"), "data-testid": "comment-thread-start-agent", onClick: (event) => {
+    return (_jsx("div", { className: cn("flex", compact && "min-w-0", className), children: _jsxs("button", { type: "button", className: cn("text-neutral-grey-50 hover:text-neutral-grey-100 inline-flex items-start text-left text-xs leading-4 underline-offset-2 transition-opacity hover:underline focus-visible:opacity-100", compact ? "max-w-full min-w-0 gap-1" : "gap-1.5", !editContext?.isMobile &&
+                "opacity-0 group-hover/comment-thread:opacity-100"), title: compact ? COMMENT_THREAD_AGENT_LINK_LABEL : undefined, "data-testid": "comment-thread-start-agent", onClick: (event) => {
                 event.stopPropagation();
                 openAiAgentForCommentThread(rootComment, threadComments, editContext, resolvedAuthorNames);
                 onStarted?.();
-            }, children: [_jsx(Sparkles, { className: "mt-px h-3.5 w-3.5 shrink-0", strokeWidth: 1 }), COMMENT_THREAD_AGENT_LINK_LABEL] }) }));
+            }, children: [_jsx(Sparkles, { className: "mt-px h-3.5 w-3.5 shrink-0", strokeWidth: 1 }), compact ? (_jsx("span", { className: "truncate", children: COMMENT_THREAD_AGENT_LINK_LABEL })) : (COMMENT_THREAD_AGENT_LINK_LABEL)] }) }));
 }
 //# sourceMappingURL=CommentThreadAgentLink.js.map

package/dist/editor/reviews/CommentThreadAgentLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentThreadAgentLink.js","sourceRoot":"","sources":["../../../src/editor/reviews/CommentThreadAgentLink.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,+BAA+B,GAAG,oBAAoB,CAAC;AAEpE;;;GAGG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,sBAAsB,CAAC;AAWvE;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB,CAAC,EACrC,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,SAAS,EACT,SAAS,GACmB;IAC5B,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;IAEhD,IACE,CAAC,QAAQ;QACT,CAAC,cAAc,CAAC,WAAW,CAAC;QAC5B,WAAW,CAAC,KAAK;QACjB,WAAW,CAAC,UAAU;QACtB,WAAW,EAAE,QAAQ,EACrB,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,YACnC,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CACX,8LAA8L,EAC9L,CAAC,WAAW,EAAE,QAAQ;gBACpB,kDAAkD,CACrD,iBACW,4BAA4B,EACxC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,2BAA2B,CACzB,WAAW,EACX,cAAc,EACd,WAAW,EACX,mBAAmB,CACpB,CAAC;gBACF,SAAS,EAAE,EAAE,CAAC;YAChB,CAAC,aAED,KAAC,QAAQ,IAAC,SAAS,EAAC,4BAA4B,EAAC,WAAW,EAAE,CAAC,GAAI,EAClE,+BAA+B,IACzB,GACL,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"CommentThreadAgentLink.js","sourceRoot":"","sources":["../../../src/editor/reviews/CommentThreadAgentLink.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,+BAA+B,GAAG,oBAAoB,CAAC;AAEpE;;;GAGG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,sBAAsB,CAAC;AAgBvE;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB,CAAC,EACrC,WAAW,EACX,cAAc,EACd,mBAAmB,EACnB,SAAS,EACT,OAAO,GAAG,KAAK,EACf,SAAS,GACmB;IAC5B,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;IAEhD,IACE,CAAC,QAAQ;QACT,CAAC,cAAc,CAAC,WAAW,CAAC;QAC5B,WAAW,CAAC,KAAK;QACjB,WAAW,CAAC,UAAU;QACtB,WAAW,EAAE,QAAQ,EACrB,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,OAAO,IAAI,SAAS,EAAE,SAAS,CAAC,YACzD,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CACX,sLAAsL,EACtL,OAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,SAAS,EAChD,CAAC,WAAW,EAAE,QAAQ;gBACpB,kDAAkD,CACrD,EACD,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,SAAS,iBAChD,4BAA4B,EACxC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,2BAA2B,CACzB,WAAW,EACX,cAAc,EACd,WAAW,EACX,mBAAmB,CACpB,CAAC;gBACF,SAAS,EAAE,EAAE,CAAC;YAChB,CAAC,aAED,KAAC,QAAQ,IAAC,SAAS,EAAC,4BAA4B,EAAC,WAAW,EAAE,CAAC,GAAI,EAClE,OAAO,CAAC,CAAC,CAAC,CACT,eAAM,SAAS,EAAC,UAAU,YAAE,+BAA+B,GAAQ,CACpE,CAAC,CAAC,CAAC,CACF,+BAA+B,CAChC,IACM,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/editor/reviews/CommentThreadCard.d.ts

@@ -0,0 +1,34 @@
+import { type Ref } from "react";
+import type { FeedbackNavigation } from "./CommentQuote";
+import type { CommentThread } from "./feedbackThreads";
+import type { FeedbackItem } from "./feedbackOrdering";
+export type CommentThreadCardProps = {
+    thread: CommentThread;
+    availableTags: {
+        label: string;
+        color: string;
+    }[];
+    getAuthorName: (item: FeedbackItem) => string;
+    resolvedAuthorNames: Record<string, string>;
+    selected: boolean;
+    navigation?: FeedbackNavigation;
+    className?: string;
+    /** Bounds the thread body (which then scrolls) so one long thread never
+     * exceeds the page beside it. */
+    bodyMaxHeight?: number;
+    /**
+     * Word-style margin balloon: flat frame without the context header, small
+     * type, replies collapsed and the reply composer opened on demand.
+     */
+    balloon?: boolean;
+    /** Name what the thread is about (a balloon that is not beside it). */
+    showContext?: boolean;
+    onHoverChange?: (hovered: boolean) => void;
+    cardRef?: Ref<HTMLDivElement>;
+};
+/**
+ * One comment thread: the root comment, its replies (collapsible), the agent
+ * link and the reply composer. Reply target, reply text and collapse state
+ * live in the thread's draft so the card can be re-homed without losing them.
+ */
+export declare function CommentThreadCard({ thread, availableTags, getAuthorName, resolvedAuthorNames, selected, navigation, className, bodyMaxHeight, balloon, showContext, onHoverChange, cardRef, }: CommentThreadCardProps): import("react").JSX.Element;

package/dist/editor/reviews/CommentThreadCard.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ChevronDown, ChevronRight, Reply } from "lucide-react";
+import uuid from "react-uuid";
+import { toast } from "sonner";
+import { useEditContext, useFieldsEditContext } from "../client/editContext";
+import { CloseButton } from "../../components/ui/close-button";
+import { cn } from "../../lib/utils";
+import { createOrUpdateComment } from "../services/reviewsService";
+import { Comment as CommentComponent } from "./Comment";
+import { CommentEditor, COMMENT_INPUT_PLACEHOLDER } from "./CommentEditor";
+import { COMMENT_THREAD_HOVER_GROUP_CLASS, CommentThreadAgentLink, } from "./CommentThreadAgentLink";
+import { FeedbackCardFrame, getCommentContextSegments } from "./FeedbackCard";
+import { canReplyToComment } from "./feedbackCommentRules";
+import { useFeedbackDraft } from "./feedbackDrafts";
+import { isTextSelectionClick, selectFeedbackComment, } from "./feedbackSelection";
+import { activateCommentsMode } from "./openCommentsFeedback";
+function buildReplyFrom(base, text, quoteParent, context) {
+    return {
+        id: uuid(),
+        isNew: false,
+        parentCommentId: base.id,
+        quoteParentComment: quoteParent,
+        itemId: base.itemId,
+        itemName: base.itemName,
+        fieldId: base.fieldId,
+        fieldName: base.fieldName,
+        mainItemId: base.mainItemId,
+        language: base.language || context.language,
+        version: base.version || context.version,
+        position: 0,
+        rangeStart: base.rangeStart,
+        rangeEnd: base.rangeEnd,
+        author: context.author,
+        authorDisplayName: context.authorDisplayName,
+        created: new Date().toISOString(),
+        text,
+        tags: "",
+        fieldValue: base.fieldValue,
+    };
+}
+/**
+ * One comment thread: the root comment, its replies (collapsible), the agent
+ * link and the reply composer. Reply target, reply text and collapse state
+ * live in the thread's draft so the card can be re-homed without losing them.
+ */
+export function CommentThreadCard({ thread, availableTags, getAuthorName, resolvedAuthorNames, selected, navigation = "dom", className, bodyMaxHeight, balloon = false, showContext = false, onHoverChange, cardRef, }) {
+    const editContext = useEditContext();
+    const fieldsContext = useFieldsEditContext();
+    const { root, replies } = thread;
+    const [draft, updateDraft, clearDraft] = useFeedbackDraft(thread.id);
+    const [isSavingReply, setIsSavingReply] = useState(false);
+    // Balloons keep replies folded until asked; the list shows them.
+    const isCollapsed = draft.collapsed ?? balloon;
+    const replyTarget = draft.replyTargetCommentId
+        ? [root, ...replies].find((comment) => comment.id === draft.replyTargetCommentId)
+        : undefined;
+    // Closing the composer discards its draft: the editor has already revoked
+    // its pasted images, which must not come back in the next composer.
+    const setReplyTarget = (target) => updateDraft(target
+        ? { replyTargetCommentId: target.id, collapsed: false }
+        : {
+            replyTargetCommentId: undefined,
+            replyText: undefined,
+            replyAttachments: undefined,
+        });
+    // A card can unmount under the pointer (deleted, resolved, re-homed by the
+    // margin) without a mouseleave; do not leave its hover behind.
+    const onHoverChangeRef = useRef(onHoverChange);
+    onHoverChangeRef.current = onHoverChange;
+    useEffect(() => () => onHoverChangeRef.current?.(false), []);
+    const contextSegments = getCommentContextSegments(root, editContext?.currentItemDescriptor?.name);
+    const cancelNewComment = (event) => {
+        event.stopPropagation();
+        if (!root.isNew)
+            return;
+        editContext?.setComments?.((comments) => comments.filter((comment) => comment.id !== root.id));
+        if (editContext?.selectedComment?.id === root.id) {
+            editContext.setSelectedComment(undefined);
+        }
+        // Every draft comment has a fresh id; nothing would ever reuse this entry.
+        clearDraft();
+    };
+    const handleReplySave = async (target, text) => {
+        if (!editContext?.currentItemDescriptor)
+            return;
+        activateCommentsMode(editContext, { reason: "comment-reply" });
+        const descriptor = editContext.currentItemDescriptor;
+        // A balloon opens its composer by targeting the root; that is a plain
+        // reply to the thread, not a quote of it.
+        const quotesTarget = replyTarget?.id === target.id && !(balloon && target.id === root.id);
+        const newReply = buildReplyFrom(target, text, quotesTarget, {
+            language: descriptor.language,
+            version: descriptor.version,
+            author: editContext.user?.name,
+            authorDisplayName: editContext.user?.fullName,
+        });
+        setIsSavingReply(true);
+        try {
+            const result = await createOrUpdateComment(newReply);
+            if (result.type === "error" || result.type === "unauthorized") {
+                console.error("Failed to save reply comment:", result);
+                toast.error(result.details || result.summary || "Failed to save reply comment");
+                return;
+            }
+            updateDraft({
+                replyTargetCommentId: undefined,
+                replyText: undefined,
+                replyAttachments: undefined,
+            });
+            await editContext.loadComments?.();
+        }
+        catch (error) {
+            console.error("Failed to save reply comment:", error);
+            toast.error(error instanceof Error ? error.message : "Failed to save reply comment");
+        }
+        finally {
+            setIsSavingReply(false);
+        }
+    };
+    const canReplyToRoot = !!editContext && canReplyToComment(root, root, editContext.readonly);
+    const renderReplyEditor = () => {
+        if (!editContext)
+            return null;
+        // The list always offers the composer; a balloon only after "Reply".
+        if (balloon && !replyTarget)
+            return null;
+        const target = replyTarget ?? root;
+        if (!canReplyToComment(target, root, editContext.readonly)) {
+            return null;
+        }
+        return (_jsxs("div", { className: balloon ? "mt-2 pl-7" : "mt-3 pt-3", onClick: (event) => event.stopPropagation(), children: [replyTarget && (!balloon || replyTarget.id !== root.id) && (_jsxs("div", { className: "text-neutral-grey-50 mb-2 flex items-center justify-between gap-2 text-xs", children: [_jsxs("span", { className: "truncate", children: ["Replying to ", getAuthorName(replyTarget)] }), _jsx("button", { type: "button", className: "badge-pad-sm text-neutral-grey-50 hover:bg-neutral-grey-5 shrink-0 rounded", onClick: () => setReplyTarget(undefined), children: "Cancel" })] })), _jsx(CommentEditor, { onSave: (text) => handleReplySave(target, text), onCancel: () => setReplyTarget(undefined), isSaving: isSavingReply, placeholder: balloon ? "Reply or @mention" : COMMENT_INPUT_PLACEHOLDER, submitLabel: "Reply", showTagSelector: false, showCancelButton: balloon, balloon: balloon, clearOnSave: true, compact: true, autoFocus: !!replyTarget, value: draft.replyText, onValueChange: (replyText) => updateDraft({ replyText }), attachments: draft.replyAttachments, onAttachmentsChange: (replyAttachments) => updateDraft({ replyAttachments }) }, target.id)] }));
+    };
+    const repliesLabel = `${replies.length} ${replies.length === 1 ? "reply" : "replies"}`;
+    const agentLink = (_jsx(CommentThreadAgentLink, { rootComment: root, threadComments: [root, ...replies], resolvedAuthorNames: resolvedAuthorNames, className: balloon ? "ml-auto" : "mt-1", compact: balloon }));
+    return (_jsx("div", { ref: cardRef, "data-feedback-thread-id": thread.id, onMouseEnter: onHoverChange ? () => onHoverChange(true) : undefined, onMouseLeave: onHoverChange ? () => onHoverChange(false) : undefined, children: _jsxs(FeedbackCardFrame, { variant: balloon ? "balloon" : "card", contextSegments: contextSegments, showBalloonContext: showContext, selected: selected, className: cn("cursor-pointer", COMMENT_THREAD_HOVER_GROUP_CLASS, className), bodyClassName: bodyMaxHeight ? "overflow-auto" : undefined, bodyStyle: bodyMaxHeight ? { maxHeight: bodyMaxHeight } : undefined, bodyScrollable: !!bodyMaxHeight, testId: "comment-thread", headerAction: 
+            // The list's frame header holds the draft's close button; a balloon
+            // has no header, its input carries the cancel button instead.
+            root.isNew && !balloon ? (_jsx(CloseButton, { onClick: cancelNewComment, "data-testid": "add-comment-cancel", label: "Cancel" })) : undefined, onClick: (event) => {
+                // A mouse release that ends a text drag-selection also clicks; keep
+                // the selection instead of jumping.
+                if (isTextSelectionClick(event.currentTarget, event))
+                    return;
+                void selectFeedbackComment(root, editContext, fieldsContext);
+            }, children: [_jsx(CommentComponent, { comment: root, availableTags: availableTags, rootCommentId: root.id, resolvedAuthorName: getAuthorName(root), variant: "inline", showContextHeader: false, showEditorCancelButton: !root.isNew, navigation: navigation, balloon: balloon, onReply: (target) => setReplyTarget(target) }), (replies.length > 0 || (balloon && canReplyToRoot && !root.isNew)) && (_jsxs("div", { className: cn("text-neutral-grey-50 flex items-center", 
+                    // One line, always: a wrapped (hover-only) agent link would
+                    // reserve an empty line in every balloon.
+                    balloon ? "mt-1 gap-2 pl-7 whitespace-nowrap" : "mb-3 gap-3"), children: [replies.length > 0 && (_jsxs("button", { type: "button", "data-testid": "comment-thread-replies-toggle", "aria-expanded": !isCollapsed, className: cn("hover:text-neutral-grey-100 flex items-center gap-1 text-left", !balloon && "text-neutral-grey-100 text-sm"), onClick: (event) => {
+                                event.stopPropagation();
+                                updateDraft({ collapsed: !isCollapsed });
+                            }, children: [isCollapsed ? (_jsx(ChevronRight, { size: 12, strokeWidth: 1.5 })) : (_jsx(ChevronDown, { size: 12, strokeWidth: 1.5 })), repliesLabel] })), balloon && canReplyToRoot && !root.isNew && !replyTarget && (_jsxs("button", { type: "button", "data-testid": "comment-reply-button", className: "hover:text-neutral-grey-100 flex items-center gap-1", onClick: (event) => {
+                                event.stopPropagation();
+                                setReplyTarget(root);
+                            }, children: [_jsx(Reply, { size: 12, strokeWidth: 1.5 }), "Reply"] })), balloon && agentLink] })), replies.length > 0 && !isCollapsed && (_jsx("div", { className: cn(balloon && "border-border-default mt-1.5 ml-2.5 border-l pl-3"), children: replies.map((reply) => (_jsx(CommentComponent, { comment: reply, availableTags: availableTags, rootCommentId: root.id, resolvedAuthorName: getAuthorName(reply), variant: "inline", showContextHeader: false, navigation: navigation, balloon: balloon, onReply: (target) => setReplyTarget(target) }, reply.id))) })), !balloon && agentLink, renderReplyEditor()] }) }));
+}
+//# sourceMappingURL=CommentThreadCard.js.map

package/dist/editor/reviews/CommentThreadCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentThreadCard.js","sourceRoot":"","sources":["../../../src/editor/reviews/CommentThreadCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,IAAI,MAAM,YAAY,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAE3E,OAAO,EACL,gCAAgC,EAChC,sBAAsB,GACvB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EACL,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAyB9D,SAAS,cAAc,CACrB,IAAiB,EACjB,IAAY,EACZ,WAAoB,EACpB,OAKC;IAED,OAAO;QACL,EAAE,EAAE,IAAI,EAAE;QACV,KAAK,EAAE,KAAK;QACZ,eAAe,EAAE,IAAI,CAAC,EAAE;QACxB,kBAAkB,EAAE,WAAW;QAC/B,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ;QAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO;QACxC,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,iBAAiB,EAAE,OAAO,CAAC,iBAAiB;QAC5C,OAAO,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;QACjC,IAAI;QACJ,IAAI,EAAE,EAAE;QACR,UAAU,EAAE,IAAI,CAAC,UAAU;KAC5B,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,MAAM,EACN,aAAa,EACb,aAAa,EACb,mBAAmB,EACnB,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,aAAa,EACb,OAAO,GAAG,KAAK,EACf,WAAW,GAAG,KAAK,EACnB,aAAa,EACb,OAAO,GACgB;IACvB,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,aAAa,GAAG,oBAAoB,EAAE,CAAC;IAC7C,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC;IACjC,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,CAAC,GAAG,gBAAgB,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACrE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,iEAAiE;IACjE,MAAM,WAAW,GAAG,KAAK,CAAC,SAAS,IAAI,OAAO,CAAC;IAC/C,MAAM,WAAW,GAAG,KAAK,CAAC,oBAAoB;QAC5C,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,CAAC,IAAI,CACrB,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,KAAK,CAAC,oBAAoB,CACvD;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,0EAA0E;IAC1E,oEAAoE;IACpE,MAAM,cAAc,GAAG,CAAC,MAA+B,EAAE,EAAE,CACzD,WAAW,CACT,MAAM;QACJ,CAAC,CAAC,EAAE,oBAAoB,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE;QACvD,CAAC,CAAC;YACE,oBAAoB,EAAE,SAAS;YAC/B,SAAS,EAAE,SAAS;YACpB,gBAAgB,EAAE,SAAS;SAC5B,CACN,CAAC;IAEJ,2EAA2E;IAC3E,+DAA+D;IAC/D,MAAM,gBAAgB,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAC/C,gBAAgB,CAAC,OAAO,GAAG,aAAa,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IAE7D,MAAM,eAAe,GAAG,yBAAyB,CAC/C,IAAI,EACJ,WAAW,EAAE,qBAAqB,EAAE,IAAI,CACzC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QAExB,WAAW,EAAE,WAAW,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,CACtC,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CACrD,CAAC;QAEF,IAAI,WAAW,EAAE,eAAe,EAAE,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC;YACjD,WAAW,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC;QAC5C,CAAC;QACD,2EAA2E;QAC3E,UAAU,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,KAAK,EAAE,MAAmB,EAAE,IAAY,EAAE,EAAE;QAClE,IAAI,CAAC,WAAW,EAAE,qBAAqB;YAAE,OAAO;QAEhD,oBAAoB,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC;QAE/D,MAAM,UAAU,GAAG,WAAW,CAAC,qBAAqB,CAAC;QACrD,sEAAsE;QACtE,0CAA0C;QAC1C,MAAM,YAAY,GAChB,WAAW,EAAE,EAAE,KAAK,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;QACvE,MAAM,QAAQ,GAAG,cAAc,CAAC,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE;YAC1D,QAAQ,EAAE,UAAU,CAAC,QAAQ;YAC7B,OAAO,EAAE,UAAU,CAAC,OAAO;YAC3B,MAAM,EAAE,WAAW,CAAC,IAAI,EAAE,IAAI;YAC9B,iBAAiB,EAAE,WAAW,CAAC,IAAI,EAAE,QAAQ;SAC9C,CAAC,CAAC;QACH,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAEvB,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,qBAAqB,CAAC,QAAQ,CAAC,CAAC;YACrD,IAAI,MAAM,CAAC,IAAI,KAAK,OAAO,IAAI,MAAM,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;gBAC9D,OAAO,CAAC,KAAK,CAAC,+BAA+B,EAAE,MAAM,CAAC,CAAC;gBACvD,KAAK,CAAC,KAAK,CACT,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,IAAI,8BAA8B,CACnE,CAAC;gBACF,OAAO;YACT,CAAC;YAED,WAAW,CAAC;gBACV,oBAAoB,EAAE,SAAS;gBAC/B,SAAS,EAAE,SAAS;gBACpB,gBAAgB,EAAE,SAAS;aAC5B,CAAC,CAAC;YACH,MAAM,WAAW,CAAC,YAAY,EAAE,EAAE,CAAC;QACrC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,+BAA+B,EAAE,KAAK,CAAC,CAAC;YACtD,KAAK,CAAC,KAAK,CACT,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,8BAA8B,CACxE,CAAC;QACJ,CAAC;gBAAS,CAAC;YACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAClB,CAAC,CAAC,WAAW,IAAI,iBAAiB,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAEvE,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,CAAC,WAAW;YAAE,OAAO,IAAI,CAAC;QAC9B,qEAAqE;QACrE,IAAI,OAAO,IAAI,CAAC,WAAW;YAAE,OAAO,IAAI,CAAC;QAEzC,MAAM,MAAM,GAAG,WAAW,IAAI,IAAI,CAAC;QACnC,IAAI,CAAC,iBAAiB,CAAC,MAAM,EAAE,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC3D,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,eACE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAC9C,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE,aAE1C,WAAW,IAAI,CAAC,CAAC,OAAO,IAAI,WAAW,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,IAAI,CAC1D,eAAK,SAAS,EAAC,2EAA2E,aACxF,gBAAM,SAAS,EAAC,UAAU,6BACX,aAAa,CAAC,WAAW,CAAC,IAClC,EACP,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,4EAA4E,EACtF,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,uBAGjC,IACL,CACP,EACD,KAAC,aAAa,IAEZ,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,EAC/C,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC,EACzC,QAAQ,EAAE,aAAa,EACvB,WAAW,EACT,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,yBAAyB,EAE3D,WAAW,EAAC,OAAO,EACnB,eAAe,EAAE,KAAK,EACtB,gBAAgB,EAAE,OAAO,EACzB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,IAAI,EACjB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,CAAC,CAAC,WAAW,EACxB,KAAK,EAAE,KAAK,CAAC,SAAS,EACtB,aAAa,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC,EACxD,WAAW,EAAE,KAAK,CAAC,gBAAgB,EACnC,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,EAAE,CACxC,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC,IAlB9B,MAAM,CAAC,EAAE,CAoBd,IACE,CACP,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,OAAO,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;IACvF,MAAM,SAAS,GAAG,CAChB,KAAC,sBAAsB,IACrB,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,EAClC,mBAAmB,EAAE,mBAAmB,EACxC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EACvC,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;IAEF,OAAO,CACL,cACE,GAAG,EAAE,OAAO,6BACa,MAAM,CAAC,EAAE,EAClC,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,EACnE,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,YAEpE,MAAC,iBAAiB,IAChB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EACrC,eAAe,EAAE,eAAe,EAChC,kBAAkB,EAAE,WAAW,EAC/B,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,EAAE,CACX,gBAAgB,EAChB,gCAAgC,EAChC,SAAS,CACV,EACD,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EAC1D,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,SAAS,EACnE,cAAc,EAAE,CAAC,CAAC,aAAa,EAC/B,MAAM,EAAC,gBAAgB,EACvB,YAAY;YACV,oEAAoE;YACpE,8DAA8D;YAC9D,IAAI,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACvB,KAAC,WAAW,IACV,OAAO,EAAE,gBAAgB,iBACb,oBAAoB,EAChC,KAAK,EAAC,QAAQ,GACd,CACH,CAAC,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,oEAAoE;gBACpE,oCAAoC;gBACpC,IAAI,oBAAoB,CAAC,KAAK,CAAC,aAAa,EAAE,KAAK,CAAC;oBAAE,OAAO;gBAC7D,KAAK,qBAAqB,CAAC,IAAI,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;YAC/D,CAAC,aAED,KAAC,gBAAgB,IACf,OAAO,EAAE,IAAI,EACb,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,IAAI,CAAC,EAAE,EACtB,kBAAkB,EAAE,aAAa,CAAC,IAAI,CAAC,EACvC,OAAO,EAAC,QAAQ,EAChB,iBAAiB,EAAE,KAAK,EACxB,sBAAsB,EAAE,CAAC,IAAI,CAAC,KAAK,EACnC,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,GAC3C,EACD,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,cAAc,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CACrE,eACE,SAAS,EAAE,EAAE,CACX,wCAAwC;oBACxC,4DAA4D;oBAC5D,0CAA0C;oBAC1C,OAAO,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,YAAY,CAC7D,aAEA,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACrB,kBACE,IAAI,EAAC,QAAQ,iBACD,+BAA+B,mBAC5B,CAAC,WAAW,EAC3B,SAAS,EAAE,EAAE,CACX,+DAA+D,EAC/D,CAAC,OAAO,IAAI,+BAA+B,CAC5C,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gCACjB,KAAK,CAAC,eAAe,EAAE,CAAC;gCACxB,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;4BAC3C,CAAC,aAEA,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,GAAG,GAAI,CAC7C,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,GAAG,GAAI,CAC5C,EACA,YAAY,IACN,CACV,EACA,OAAO,IAAI,cAAc,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,WAAW,IAAI,CAC3D,kBACE,IAAI,EAAC,QAAQ,iBACD,sBAAsB,EAClC,SAAS,EAAC,qDAAqD,EAC/D,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gCACjB,KAAK,CAAC,eAAe,EAAE,CAAC;gCACxB,cAAc,CAAC,IAAI,CAAC,CAAC;4BACvB,CAAC,aAED,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,GAAG,GAAI,aAE9B,CACV,EAIA,OAAO,IAAI,SAAS,IACjB,CACP,EACA,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,CACrC,cACE,SAAS,EAAE,EAAE,CACX,OAAO,IAAI,mDAAmD,CAC/D,YAEA,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,KAAC,gBAAgB,IAEf,OAAO,EAAE,KAAK,EACd,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,IAAI,CAAC,EAAE,EACtB,kBAAkB,EAAE,aAAa,CAAC,KAAK,CAAC,EACxC,OAAO,EAAC,QAAQ,EAChB,iBAAiB,EAAE,KAAK,EACxB,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,IATtC,KAAK,CAAC,EAAE,CAUb,CACH,CAAC,GACE,CACP,EACA,CAAC,OAAO,IAAI,SAAS,EACrB,iBAAiB,EAAE,IACF,GAChB,CACP,CAAC;AACJ,CAAC"}

package/dist/editor/reviews/CommentView.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { Comment as CommentType } from "../../types";
+import { type FeedbackNavigation } from "./CommentQuote";
 export interface CommentViewProps {
     comment: CommentType;
     canEdit: boolean;
@@ -22,5 +23,10 @@ export interface CommentViewProps {
     showCommentIcon?: boolean;
     showContextInfo?: boolean;
     compact?: boolean;
+    /** How following the quoted comment navigates; see `CommentQuote`. */
+    quoteNavigation?: FeedbackNavigation;
+    /** Compact Word-style balloon presentation (comment margin): small avatar,
+     * author and date on one muted line, long text collapsed. */
+    balloon?: boolean;
 }
-export declare function CommentView({ comment, canEdit, canDelete, canResolve, availableTags, basePageId, basePageName, quotedComment, resolvedAuthorName, onEdit, onDelete, onResolve, onUnresolve, onReply, hideActions, showCommentIcon, showContextInfo, compact, }: CommentViewProps): React.JSX.Element;
+export declare function CommentView({ comment, canEdit, canDelete, canResolve, availableTags, basePageId, basePageName, quotedComment, resolvedAuthorName, onEdit, onDelete, onResolve, onUnresolve, onReply, hideActions, showCommentIcon, showContextInfo, compact, quoteNavigation, balloon, }: CommentViewProps): React.JSX.Element;

package/dist/editor/reviews/CommentView.js

@@ -8,6 +8,9 @@ import { Avatar } from "../../components/ui/avatar";
 import { MentionText } from "./MentionText";
 import { FEEDBACK_SIDEBAR_TEXT_CLASS } from "./feedbackSidebarText";
 import { CommentQuote } from "./CommentQuote";
+import { CollapsibleText } from "./CollapsibleText";
+import { formatFeedbackBalloonDate } from "./feedbackBalloonDate";
+import { cn } from "../../lib/utils";
 function getValidResolvedDate(comment) {
     if (!comment.resolvedDate)
         return undefined;
@@ -29,10 +32,17 @@ function getResolvedStatusText(comment) {
         return `Resolved on ${dateText}`;
     return "Resolved";
 }
-export function CommentView({ comment, canEdit, canDelete, canResolve, availableTags = [], basePageId, basePageName, quotedComment, resolvedAuthorName, onEdit, onDelete, onResolve, onUnresolve, onReply, hideActions = false, showCommentIcon = true, showContextInfo = true, compact = false, }) {
+export function CommentView({ comment, canEdit, canDelete, canResolve, availableTags = [], basePageId, basePageName, quotedComment, resolvedAuthorName, onEdit, onDelete, onResolve, onUnresolve, onReply, hideActions = false, showCommentIcon = true, showContextInfo = true, compact = false, quoteNavigation, balloon = false, }) {
     const author = useFeedbackAuthor(comment, resolvedAuthorName);
-    const contentIndentClass = showCommentIcon ? "pl-16" : "pl-9";
+    const contentIndentClass = balloon
+        ? "pl-7"
+        : showCommentIcon
+            ? "pl-16"
+            : "pl-9";
     const resolvedStatusText = getResolvedStatusText(comment);
+    const createdText = comment.created
+        ? formatDate(new Date(comment.created))
+        : "";
     const renderTags = () => {
         const tagLabels = comment.tags
             ? comment.tags.split(",").filter((t) => t.trim())
@@ -71,9 +81,17 @@ export function CommentView({ comment, canEdit, canDelete, canResolve, available
         (canResolve && !comment.isResolved && !!onResolve) ||
         (canResolve && comment.isResolved && !!onUnresolve) ||
         (!comment.isResolved && !!onReply);
-    return (_jsxs("div", { "data-comment-id": comment.id, tabIndex: -1, className: "focus:ring-highlight-100 focus:bg-neutral-grey-5 scroll-my-3 rounded-md focus:ring-2 focus:ring-offset-2 focus:outline-none", children: [_jsxs("div", { className: "flex items-center gap-3", children: [showCommentIcon && (_jsx(MessageCircle, { strokeWidth: 1, className: "text-feedback-blue mt-1 h-4 w-4 shrink-0" })), _jsx(Avatar, { src: author.avatarUrl, name: author.displayName, size: "sm", fallbackColor: author.fallbackColor, fallbackClassName: getFeedbackAvatarClassName(comment), className: "!text-[10px] font-medium", title: author.title }), _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("div", { className: `flex min-w-0 ${compact
-                                ? "min-h-7 items-center gap-2"
-                                : "flex-col justify-center gap-0.5"}`, children: [_jsx("span", { className: "text-neutral-grey-100 truncate text-sm leading-5 font-medium", title: author.title, children: author.displayName }), _jsx("span", { className: "text-neutral-grey-50 shrink-0 text-xs leading-4", children: comment.created ? formatDate(new Date(comment.created)) : "" })] }) }), !hideActions && hasActions && (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "text-neutral-grey-50 hover:bg-neutral-grey-5 -mr-1 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full", "aria-label": "Comment actions", onClick: (e) => e.stopPropagation(), children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1 }) }) }), _jsxs(PopoverContent, { className: `${FEEDBACK_SIDEBAR_TEXT_CLASS} w-44 p-1`, align: "end", children: [canEdit && onEdit && (_jsxs("button", { type: "button", className: "hover:bg-neutral-grey-5 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm", "data-testid": "comment-action-edit", onClick: (e) => {
+    return (_jsxs("div", { "data-comment-id": comment.id, tabIndex: -1, className: cn("scroll-my-3 rounded-md focus:outline-none", 
+        // A balloon already frames its selected thread; a second ring inside
+        // it would double the border.
+        !balloon &&
+            "focus:ring-highlight-100 focus:bg-neutral-grey-5 focus:ring-2 focus:ring-offset-2"), children: [_jsxs("div", { className: cn("flex items-center", balloon ? "gap-2" : "gap-3"), children: [showCommentIcon && (_jsx(MessageCircle, { strokeWidth: 1, className: "text-feedback-blue mt-1 h-4 w-4 shrink-0" })), _jsx(Avatar, { src: author.avatarUrl, name: author.displayName, size: "sm", fallbackColor: author.fallbackColor, fallbackClassName: getFeedbackAvatarClassName(comment), className: cn("!text-[10px] font-medium", balloon && "size-5 !text-[9px]"), title: author.title }), _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("div", { className: cn("flex min-w-0", balloon
+                                ? "min-h-5 items-baseline gap-1.5"
+                                : compact
+                                    ? "min-h-7 items-center gap-2"
+                                    : "flex-col justify-center gap-0.5"), children: [_jsx("span", { className: cn("text-neutral-grey-100 truncate font-medium", balloon ? "leading-4" : "text-sm leading-5"), title: author.title, children: author.displayName }), _jsx("span", { className: cn("text-neutral-grey-50 shrink-0 leading-4", !balloon && "text-xs"), title: balloon ? createdText : undefined, children: balloon && comment.created
+                                        ? formatFeedbackBalloonDate(new Date(comment.created))
+                                        : createdText })] }) }), !hideActions && hasActions && (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: cn("text-neutral-grey-50 hover:bg-neutral-grey-5 -mr-1 inline-flex shrink-0 items-center justify-center rounded-full", balloon ? "h-6 w-6" : "h-7 w-7"), "aria-label": "Comment actions", onClick: (e) => e.stopPropagation(), children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1 }) }) }), _jsxs(PopoverContent, { className: `${FEEDBACK_SIDEBAR_TEXT_CLASS} w-44 p-1`, align: "end", children: [canEdit && onEdit && (_jsxs("button", { type: "button", className: "hover:bg-neutral-grey-5 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm", "data-testid": "comment-action-edit", onClick: (e) => {
                                             e.stopPropagation();
                                             onEdit();
                                         }, children: [_jsx(Edit, { className: "h-4 w-4", strokeWidth: 1 }), "Edit"] })), canResolve && !comment.isResolved && onResolve && (_jsxs("button", { type: "button", className: "hover:bg-neutral-grey-5 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm", "data-testid": "comment-action-resolve", onClick: (e) => {
@@ -90,6 +108,6 @@ export function CommentView({ comment, canEdit, canDelete, canResolve, available
                                             : undefined, children: _jsxs("button", { type: "button", className: "hover:bg-neutral-grey-5 flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm", "data-testid": "comment-action-delete", onClick: (e) => {
                                                 e.stopPropagation();
                                                 onDelete();
-                                            }, children: [_jsx(DeleteIcon, { size: "lg" }), "Delete"] }) }))] })] }))] }), quotedComment && (_jsx("div", { className: contentIndentClass, children: _jsx(CommentQuote, { comment: quotedComment }) })), _jsx("div", { className: `${contentIndentClass} text-neutral-grey-100 cursor-text text-sm leading-5 [overflow-wrap:anywhere] break-words whitespace-pre-wrap select-text`, "data-testid": "comment-text", children: _jsx(MentionText, { text: comment.text }) }), renderTags(), showContextInfo && renderContextInfo(), comment.isResolved && (_jsxs("div", { className: `${compact ? "mt-2" : "mt-3"} text-feedback-green text-xs font-medium`, children: ["\u2713 ", resolvedStatusText] }))] }));
+                                            }, children: [_jsx(DeleteIcon, { size: "lg" }), "Delete"] }) }))] })] }))] }), quotedComment && (_jsx("div", { className: contentIndentClass, children: _jsx(CommentQuote, { comment: quotedComment, navigation: quoteNavigation }) })), _jsx("div", { className: cn(contentIndentClass, "text-neutral-grey-100 cursor-text [overflow-wrap:anywhere] break-words whitespace-pre-wrap select-text", balloon ? "leading-4" : "text-sm leading-5"), "data-testid": "comment-text", children: balloon ? (_jsx(CollapsibleText, { lines: 4, children: _jsx(MentionText, { text: comment.text }) })) : (_jsx(MentionText, { text: comment.text })) }), renderTags(), showContextInfo && renderContextInfo(), comment.isResolved && (_jsxs("div", { className: `${compact ? "mt-2" : "mt-3"} text-feedback-green text-xs font-medium`, children: ["\u2713 ", resolvedStatusText] }))] }));
 }
 //# sourceMappingURL=CommentView.js.map