@crisp-ui-kit/crisp 0.54.2 → 0.54.4

package/dist/esm/product/comments/comments.js

@@ -0,0 +1,388 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpRight, Check, ChevronLeft, CornerUpLeft, ListFilter, MessageSquare, MoreHorizontal, SmilePlus, X, } from "lucide-react";
+import * as React from "react";
+import { Avatar } from "../../components/avatar/index.js";
+import { Button } from "../../components/button/index.js";
+import { Dialog, DialogBody, DialogFooter } from "../../components/dialog/index.js";
+import { Menu, MenuCheckboxItem, MenuItem } from "../../components/menu/index.js";
+import { Popover } from "../../components/popover/index.js";
+import { matchMentionTrigger, useCrispMessage, } from "../../core/index.js";
+import { commentsRecipe } from "./comments.recipe.js";
+/** A single literal JSX occurrence for the reply glyph, used at two sizes --
+ * so the RTL-mirroring sweep (which counts the flip-marker attribute against
+ * source-text occurrences, not runtime renders) sees one mark for one
+ * direction-bearing icon, not two. */
+function ReplyGlyph({ size }) {
+    return (_jsx(CornerUpLeft, { "data-rtl-flip": "", size: size, strokeWidth: 2, "aria-hidden": "true" }));
+}
+const DEFAULT_EMOJI = [
+    "👍",
+    "👎",
+    "😀",
+    "😂",
+    "😍",
+    "🎉",
+    "🙏",
+    "👏",
+    "🔥",
+    "❤️",
+    "✅",
+    "👀",
+    "🚀",
+    "💯",
+    "😢",
+    "🤔",
+];
+function initial(name) {
+    return (name.trim().charAt(0) || "?").toUpperCase();
+}
+function AuthorAvatar({ author }) {
+    if (author.avatar != null)
+        return _jsx(_Fragment, { children: author.avatar });
+    return (_jsx(Avatar, { size: "sm", tone: "cyan", children: initial(author.name) }));
+}
+/**
+ * A minimal reaction picker — search box + a curated emoji grid. Attio's own
+ * picker (`Search Emojis`, categorised sections) wasn't independently
+ * pixel-measured this pass: the live CDP session's `Page.captureScreenshot`
+ * started timing out after the panel/composer/row measurements were already
+ * captured, and the popover itself closed on every retry before a shadow/
+ * radius read landed. The chrome below reuses crisp's own already-measured
+ * floating-popover shell (`radius.xl`, `elevation.floating`-family shadow —
+ * see `Menu`) rather than inventing new values, and the search placeholder
+ * ("Search Emojis") IS the live-read copy. The emoji SET is crisp's own
+ * curated 16, not Attio's full category grid — a full emoji library is out
+ * of scope for a dependency-free kit; swap `emojiOptions` for a real one.
+ */
+function ReactionPicker({ options, searchLabel, onPick, }) {
+    const [query, setQuery] = React.useState("");
+    const filtered = query.trim()
+        ? options.filter((e) => e.includes(query.trim()))
+        : options;
+    return (_jsxs("div", { className: "crisp-comments-reactionpicker", children: [_jsx("input", { className: "crisp-comments-reactionpicker-search", placeholder: searchLabel, "aria-label": searchLabel, value: query, onChange: (e) => setQuery(e.target.value) }), _jsx("div", { className: "crisp-comments-reactionpicker-grid", children: filtered.map((emoji) => (_jsx("button", { type: "button", className: "crisp-comments-reactionpicker-item", onClick: () => onPick(emoji), children: emoji }, emoji))) })] }));
+}
+/**
+ * Reads the composer field's DOM into plain text, serializing each mention
+ * chip as `@[label](id)` — a fixed, parseable token a consumer (GRC) can
+ * pull the mentioned record's id back out of.
+ *
+ * This is the actual fix for a real bug (GRC's own composer, a plain
+ * `<textarea>` holding `@[name](actor:id)` as its literal editable value:
+ * a caret placed inside that markup can edit it like any other character,
+ * so a stray keystroke corrupts the token and the broken markup posts
+ * verbatim — seen live, `/private/tmp/grc-land138/mentions-6-posted.png`).
+ * A mention here is NEVER the editable representation: it's a real DOM node
+ * (`contentEditable=false`, so a browser won't place a caret inside it to
+ * begin with) carrying its id/label in two `data-` attributes set once, at
+ * insertion (`insertMention`), and never touched again. This function reads
+ * those attributes — not the chip's own `.textContent` — specifically so
+ * that even if something DID manage to mutate the chip's interior (a
+ * hostile paste, an IME composition, a direct DOM call bypassing the
+ * `contentEditable=false` guard entirely — exactly the class of thing a
+ * real browser mostly prevents but a test, or a buggy extension, would
+ * not), the token this function emits still can't be corrupted: it was
+ * never read from the part that changed.
+ */
+export function serializeComposerField(field) {
+    let out = "";
+    for (const node of Array.from(field.childNodes)) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            out += node.textContent ?? "";
+            continue;
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            continue;
+        const el = node;
+        if (el.classList.contains("crisp-comments-mention")) {
+            const id = el.dataset.mentionId ?? "";
+            const label = el.dataset.mentionLabel ?? "";
+            out += `@[${label}](${id})`;
+            continue;
+        }
+        if (el.tagName === "BR") {
+            out += "\n";
+            continue;
+        }
+        // A wrapper the browser itself inserted (Enter's own new-line block,
+        // Shift+Enter's, a pasted `<span>`) -- recurse so a mention nested
+        // inside one still serializes atomically instead of falling through to
+        // a flattened `.textContent` read that would re-expose its raw text.
+        out += serializeComposerField(el);
+        if (el.tagName === "DIV" || el.tagName === "P")
+            out += "\n";
+    }
+    return out;
+}
+/**
+ * The bottom composer — a plain `contentEditable` field (no rich-text
+ * toolbar; Attio's own comment composer has none, unlike its note editor),
+ * with an "@" mention trigger mirroring `RichTextEditor`'s own detection
+ * (`matchMentionTrigger` + a live `Range`), and a `Comment`/`Reply` button
+ * disabled until the field holds text. Uncontrolled — reads its own DOM on
+ * submit, the same shape `RichTextEditor` uses for its body.
+ */
+const Composer = React.forwardRef(function Composer({ placeholder, postLabel, mentionTrigger, renderMentionPicker, replyToolLabel, mentionToolLabel, onSubmit, }, ref) {
+    const fieldRef = React.useRef(null);
+    const [empty, setEmpty] = React.useState(true);
+    const [mention, setMention] = React.useState(null);
+    const mentionRangeRef = React.useRef(null);
+    const syncEmpty = () => setEmpty((fieldRef.current?.textContent ?? "") === "");
+    const closeMention = React.useCallback(() => {
+        mentionRangeRef.current = null;
+        setMention(null);
+    }, []);
+    const updateMention = React.useCallback(() => {
+        const field = fieldRef.current;
+        const sel = window.getSelection();
+        if (!field ||
+            !sel?.isCollapsed ||
+            sel.rangeCount === 0 ||
+            !field.contains(sel.anchorNode)) {
+            closeMention();
+            return;
+        }
+        const range = sel.getRangeAt(0);
+        const node = range.startContainer;
+        if (node.nodeType !== Node.TEXT_NODE) {
+            closeMention();
+            return;
+        }
+        const textBefore = (node.textContent ?? "").slice(0, range.startOffset);
+        const match = matchMentionTrigger(textBefore, mentionTrigger);
+        if (!match) {
+            closeMention();
+            return;
+        }
+        const triggerRange = document.createRange();
+        triggerRange.setStart(node, match.start);
+        triggerRange.setEnd(node, range.startOffset);
+        mentionRangeRef.current = triggerRange;
+        const rect = triggerRange.getBoundingClientRect();
+        setMention({
+            query: match.query,
+            anchor: { x: rect.left, y: rect.bottom },
+        });
+    }, [mentionTrigger, closeMention]);
+    const insertMention = (item) => {
+        const field = fieldRef.current;
+        const sel = window.getSelection();
+        if (!field || !sel)
+            return;
+        field.focus();
+        const range = mentionRangeRef.current ??
+            (sel.rangeCount > 0 ? sel.getRangeAt(0) : null);
+        if (!range)
+            return;
+        const chip = document.createElement("span");
+        chip.className = "crisp-comments-mention";
+        chip.contentEditable = "false";
+        // An immutable snapshot, read back only from these two attributes at
+        // submit time -- never from the chip's own live text (see `serialize`'s
+        // own doc comment for why).
+        chip.dataset.mentionId = item.id;
+        chip.dataset.mentionLabel = item.label;
+        chip.textContent = `${mentionTrigger}${item.label}`;
+        range.deleteContents();
+        range.insertNode(chip);
+        const space = document.createTextNode(" ");
+        chip.after(space);
+        const after = document.createRange();
+        after.setStartAfter(space);
+        after.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(after);
+        closeMention();
+        syncEmpty();
+    };
+    /**
+     * Delete a mention chip as one unit, the same "Backspace removes it whole"
+     * behaviour a real browser already gives a `contentEditable=false` node --
+     * made explicit rather than relied on, since that native behaviour isn't
+     * consistent enough across engines to trust alone. Only fires when the
+     * caret sits immediately after a chip with nothing selected; a caret
+     * anywhere else (including genuinely inside a chip, which a real
+     * `contentEditable=false` node refuses to place one in) is untouched.
+     */
+    const backspaceMention = (e) => {
+        const field = fieldRef.current;
+        const sel = window.getSelection();
+        if (!field || !sel?.isCollapsed || sel.rangeCount === 0)
+            return false;
+        const range = sel.getRangeAt(0);
+        let mention = null;
+        if (range.startContainer.nodeType === Node.TEXT_NODE) {
+            if (range.startOffset === 0) {
+                const prev = range.startContainer.previousSibling;
+                if (prev instanceof HTMLElement)
+                    mention = prev;
+            }
+        }
+        else if (range.startContainer === field) {
+            const prev = field.childNodes[range.startOffset - 1];
+            if (prev instanceof HTMLElement)
+                mention = prev;
+        }
+        if (!mention?.classList.contains("crisp-comments-mention"))
+            return false;
+        e.preventDefault();
+        mention.remove();
+        syncEmpty();
+        return true;
+    };
+    const clear = () => {
+        if (fieldRef.current)
+            fieldRef.current.innerHTML = "";
+        setEmpty(true);
+        closeMention();
+    };
+    React.useImperativeHandle(ref, () => ({
+        clear,
+        focus: () => fieldRef.current?.focus(),
+    }));
+    const submit = () => {
+        const field = fieldRef.current;
+        const text = field ? serializeComposerField(field).trim() : "";
+        if (!text)
+            return;
+        onSubmit(text);
+        clear();
+    };
+    return (_jsxs("div", { className: "crisp-comments-composer", children: [_jsx("div", { ref: fieldRef, className: "crisp-comments-field", contentEditable: true, suppressContentEditableWarning: true, role: "textbox", tabIndex: 0, "aria-multiline": "true", "aria-label": placeholder, "data-placeholder": placeholder, onInput: () => {
+                    syncEmpty();
+                    updateMention();
+                }, onKeyUp: updateMention, onMouseUp: updateMention, onKeyDown: (e) => {
+                    if (e.key === "Backspace" && backspaceMention(e))
+                        return;
+                    if (e.key === "Enter" && !e.shiftKey && !mention) {
+                        e.preventDefault();
+                        submit();
+                    }
+                } }), _jsxs("div", { className: "crisp-comments-composer-foot", children: [_jsxs("div", { className: "crisp-comments-composer-tools", children: [_jsx("button", { type: "button", className: "crisp-comments-tool", "aria-label": replyToolLabel, children: _jsx(ReplyGlyph, { size: 14 }) }), _jsx("button", { type: "button", className: "crisp-comments-tool", "aria-label": mentionToolLabel, onClick: () => {
+                                    const field = fieldRef.current;
+                                    if (!field)
+                                        return;
+                                    field.focus();
+                                    document.execCommand("insertText", false, mentionTrigger);
+                                    syncEmpty();
+                                    updateMention();
+                                }, children: "@" })] }), _jsx("button", { type: "button", className: "crisp-comments-post", disabled: empty, onClick: submit, children: postLabel })] }), mention &&
+                renderMentionPicker?.({
+                    query: mention.query,
+                    anchor: mention.anchor,
+                    select: insertMention,
+                    close: closeMention,
+                })] }));
+});
+function CommentRow({ comment, replyLabel, reactLabel, resolveLabel, moreLabel, copyLinkLabel, deleteLabel, addReactionLabel, reactionSearchLabel, emojiOptions, resolvable, resolved, resolvedLabel, onReply, onReact, onResolve, onCopyLink, onDeleteRequest, }) {
+    return (_jsxs("div", { className: "crisp-comments-row", children: [_jsx(AuthorAvatar, { author: comment.author }), _jsxs("div", { className: "crisp-comments-row-main", children: [resolvedLabel != null && (_jsxs("div", { className: "crisp-comments-resolved-label", children: [_jsx(Check, { size: 12, strokeWidth: 2.5, "aria-hidden": "true" }), resolvedLabel] })), _jsxs("div", { className: "crisp-comments-row-head", children: [_jsx("span", { className: "crisp-comments-author", children: comment.author.name }), _jsx("span", { className: "crisp-comments-time", children: comment.time })] }), _jsx("div", { className: "crisp-comments-body-text", children: comment.body }), comment.reactions && comment.reactions.length > 0 && (_jsxs("div", { className: "crisp-comments-reactions", children: [comment.reactions.map((r) => (_jsxs("button", { type: "button", className: "crisp-comments-reaction", "data-reacted": r.reactedByMe ? "" : undefined, onClick: () => onReact(r.emoji), children: [_jsx("span", { "aria-hidden": "true", children: r.emoji }), r.count] }, r.emoji))), _jsx(Popover, { align: "start", trigger: _jsx("button", { type: "button", className: "crisp-comments-reaction-add", "aria-label": addReactionLabel, children: _jsx(SmilePlus, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: _jsx(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) })] }))] }), _jsxs("div", { className: "crisp-comments-row-actions", children: [onReply && (_jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": replyLabel, onClick: onReply, children: _jsx(ReplyGlyph, { size: 16 }) })), _jsx(Popover, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": reactLabel, children: _jsx(SmilePlus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: _jsx(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) }), resolvable && (_jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": resolveLabel, "aria-pressed": !!resolved, "data-active": resolved ? "" : undefined, onClick: onResolve, children: _jsx(Check, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })), _jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": moreLabel, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [_jsx(MenuItem, { onSelect: onCopyLink, children: copyLinkLabel }), _jsx(MenuItem, { danger: true, onSelect: onDeleteRequest, children: deleteLabel })] })] })] }));
+}
+/**
+ * Per-record comment threads (crisp#625) — measured live on app.attio.com's
+ * own right-hand comments panel: a header (title, filter menu), a scrolling
+ * thread list or a single narrowed thread, and a persistent bottom composer.
+ * Controlled: pass `threads` and wire the callbacks; the panel renders
+ * nothing on its own beyond that data. See `CommentCountBadge` for the
+ * separate row affordance (P-051) — deliberately NOT part of this
+ * component, since it lives in a table cell this component doesn't own.
+ */
+export function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResolved = false, onShowResolvedChange, onlyMine = false, onOnlyMineChange, activeThreadId: activeThreadIdProp, onActiveThreadChange, onPost, onReact, onResolve, onDelete, onCopyLink, emojiOptions = DEFAULT_EMOJI, mentionTrigger = "@", renderMentionPicker, onClose, closeLabel: closeLabelProp, backLabel: backLabelProp, title: titleProp, threadTitle: threadTitleProp, breadcrumbPrefix: breadcrumbPrefixProp, composerPlaceholder: composerPlaceholderProp, replyPlaceholder: replyPlaceholderProp, postLabel: postLabelProp, replyPostLabel: replyPostLabelProp, emptyLabel, filterLabel: filterLabelProp, showResolvedLabel: showResolvedLabelProp, onlyMineLabel: onlyMineLabelProp, replyActionLabel: replyActionLabelProp, reactActionLabel: reactActionLabelProp, resolveActionLabel: resolveActionLabelProp, resolvedByYouLabel: resolvedByYouLabelProp, resolvedByLabel, moreActionsLabel: moreActionsLabelProp, copyLinkLabel: copyLinkLabelProp, deleteLabel: deleteLabelProp, addReactionLabel: addReactionLabelProp, reactionSearchLabel: reactionSearchLabelProp, deleteConfirmTitle: deleteConfirmTitleProp, deleteConfirmBody: deleteConfirmBodyProp, deleteConfirmActionLabel: deleteConfirmActionLabelProp, cancelLabel: cancelLabelProp, composerReplyToolLabel: composerReplyToolLabelProp, composerMentionToolLabel: composerMentionToolLabelProp, className, ...rest }) {
+    const closeLabel = useCrispMessage(closeLabelProp, "Close");
+    const backLabel = useCrispMessage(backLabelProp, "Back");
+    const title = useCrispMessage(titleProp, "All comments");
+    const threadTitle = useCrispMessage(threadTitleProp, "Comments");
+    const breadcrumbPrefix = useCrispMessage(breadcrumbPrefixProp, "Comment on");
+    const composerPlaceholder = useCrispMessage(composerPlaceholderProp, "Add comment...");
+    const replyPlaceholder = useCrispMessage(replyPlaceholderProp, "Reply...");
+    const postLabel = useCrispMessage(postLabelProp, "Comment");
+    const replyPostLabel = useCrispMessage(replyPostLabelProp, "Reply");
+    const filterLabel = useCrispMessage(filterLabelProp, "Filter comments");
+    const showResolvedLabel = useCrispMessage(showResolvedLabelProp, "Show resolved comments");
+    const onlyMineLabel = useCrispMessage(onlyMineLabelProp, "Only my threads");
+    const replyActionLabel = useCrispMessage(replyActionLabelProp, "Reply to comment");
+    const reactActionLabel = useCrispMessage(reactActionLabelProp, "Pick emoji");
+    const resolveActionLabel = useCrispMessage(resolveActionLabelProp, "Resolve comment");
+    const resolvedByYouLabel = useCrispMessage(resolvedByYouLabelProp, "Resolved by you");
+    const moreActionsLabel = useCrispMessage(moreActionsLabelProp, "More actions");
+    const copyLinkLabel = useCrispMessage(copyLinkLabelProp, "Copy link to comment");
+    const deleteLabel = useCrispMessage(deleteLabelProp, "Delete comment");
+    const addReactionLabel = useCrispMessage(addReactionLabelProp, "Add reaction");
+    const reactionSearchLabel = useCrispMessage(reactionSearchLabelProp, "Search Emojis");
+    const deleteConfirmTitle = useCrispMessage(deleteConfirmTitleProp, "Delete comment");
+    const deleteConfirmBody = useCrispMessage(deleteConfirmBodyProp, "You're about to delete this comment. Once deleted it cannot be restored.");
+    const deleteConfirmActionLabel = useCrispMessage(deleteConfirmActionLabelProp, "Delete");
+    const cancelLabel = useCrispMessage(cancelLabelProp, "Cancel");
+    const composerReplyToolLabel = useCrispMessage(composerReplyToolLabelProp, "Reply");
+    const composerMentionToolLabel = useCrispMessage(composerMentionToolLabelProp, "Mention someone");
+    const [internalActiveId, setInternalActiveId] = React.useState(null);
+    const activeThreadId = activeThreadIdProp ?? internalActiveId;
+    const setActiveThreadId = (id) => {
+        if (activeThreadIdProp === undefined)
+            setInternalActiveId(id);
+        onActiveThreadChange?.(id);
+    };
+    const [deleteTarget, setDeleteTarget] = React.useState(null);
+    const copyLink = (threadId, commentId) => {
+        if (onCopyLink) {
+            onCopyLink(threadId, commentId);
+            return;
+        }
+        const url = `${typeof window !== "undefined" ? window.location.href.split("#")[0] : ""}#comment-${commentId}`;
+        navigator.clipboard?.writeText(url).catch(() => { });
+    };
+    const visibleThreads = threads.filter((t) => {
+        if (!showResolved && t.resolved)
+            return false;
+        if (onlyMine && !t.mine)
+            return false;
+        return true;
+    });
+    const activeThread = activeThreadId
+        ? threads.find((t) => t.id === activeThreadId)
+        : null;
+    return (_jsxs("div", { className: commentsRecipe({ className }), role: "dialog", "aria-label": title, ...rest, children: [_jsxs("div", { className: "crisp-comments-head", children: [activeThread ? (_jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": backLabel, onClick: () => setActiveThreadId(null), children: _jsx(ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) : null, _jsxs("div", { className: "crisp-comments-title-wrap", children: [_jsx("span", { className: "crisp-comments-title", children: activeThread ? threadTitle : title }), activeThread && (_jsxs("span", { className: "crisp-comments-breadcrumb", children: [breadcrumbPrefix, " ", subjectIcon, " ", subject] }))] }), !activeThread && (_jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": filterLabel, children: _jsx(ListFilter, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [_jsx(MenuCheckboxItem, { checked: showResolved, onCheckedChange: onShowResolvedChange, children: showResolvedLabel }), _jsx(MenuCheckboxItem, { checked: onlyMine, onCheckedChange: onOnlyMineChange, children: onlyMineLabel })] })), _jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsx("div", { className: "crisp-comments-body crisp-comments-body--pad-top", children: activeThread ? (_jsxs("div", { children: [_jsx(CommentRow, { comment: activeThread.root, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, resolvable: !!onResolve, resolved: activeThread.resolved, resolvedLabel: activeThread.resolved
+                                ? activeThread.resolvedBy?.id === currentUserId ||
+                                    !activeThread.resolvedBy
+                                    ? resolvedByYouLabel
+                                    : (resolvedByLabel?.(activeThread.resolvedBy.name) ??
+                                        `Resolved by ${activeThread.resolvedBy.name}`)
+                                : undefined, onReact: (emoji) => onReact(activeThread.id, activeThread.root.id, emoji), onResolve: onResolve ? () => onResolve(activeThread.id) : undefined, onCopyLink: () => copyLink(activeThread.id, activeThread.root.id), onDeleteRequest: () => setDeleteTarget({
+                                threadId: activeThread.id,
+                                commentId: activeThread.root.id,
+                            }) }), activeThread.replies && activeThread.replies.length > 0 && (_jsx("div", { className: "crisp-comments-replies", children: activeThread.replies.map((reply) => (_jsx(CommentRow, { comment: reply, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, onReact: (emoji) => onReact(activeThread.id, reply.id, emoji), onCopyLink: () => copyLink(activeThread.id, reply.id), onDeleteRequest: () => setDeleteTarget({
+                                    threadId: activeThread.id,
+                                    commentId: reply.id,
+                                }) }, reply.id))) }))] })) : visibleThreads.length === 0 && emptyLabel != null ? (_jsx("div", { className: "crisp-comments-empty", children: emptyLabel })) : (visibleThreads.map((t) => (_jsx(CommentRow, { comment: t.root, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, resolvable: !!onResolve, resolved: t.resolved, resolvedLabel: t.resolved
+                        ? t.resolvedBy?.id === currentUserId || !t.resolvedBy
+                            ? resolvedByYouLabel
+                            : (resolvedByLabel?.(t.resolvedBy.name) ??
+                                `Resolved by ${t.resolvedBy.name}`)
+                        : undefined, onReply: () => setActiveThreadId(t.id), onReact: (emoji) => onReact(t.id, t.root.id, emoji), onResolve: onResolve ? () => onResolve(t.id) : undefined, onCopyLink: () => copyLink(t.id, t.root.id), onDeleteRequest: () => setDeleteTarget({ threadId: t.id, commentId: t.root.id }) }, t.id)))) }), _jsx(Composer, { placeholder: activeThread ? replyPlaceholder : composerPlaceholder, postLabel: activeThread ? replyPostLabel : postLabel, mentionTrigger: mentionTrigger, renderMentionPicker: renderMentionPicker, replyToolLabel: composerReplyToolLabel, mentionToolLabel: composerMentionToolLabel, onSubmit: (text) => onPost(text, activeThread ? activeThread.id : null) }, activeThread ? activeThread.id : "root"), _jsxs(Dialog, { open: deleteTarget != null, onOpenChange: (open) => {
+                    if (!open)
+                        setDeleteTarget(null);
+                }, title: deleteConfirmTitle, children: [_jsx(DialogBody, { children: deleteConfirmBody }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", intent: "neutral", size: "md", onClick: () => setDeleteTarget(null), children: cancelLabel }), _jsx(Button, { type: "button", intent: "danger", size: "md", onClick: () => {
+                                    if (deleteTarget)
+                                        onDelete(deleteTarget.threadId, deleteTarget.commentId);
+                                    setDeleteTarget(null);
+                                }, children: deleteConfirmActionLabel })] })] })] }));
+}
+CommentsPanel.displayName = "CommentsPanel";
+/**
+ * The row's own comment affordance (P-051) — a persistent 6px dot once a
+ * record has ≥1 comment, replaced on hover by a comment-count icon (P-035's
+ * "icon 1") plus, when `onOpenPreview` is given, the row's second hover icon
+ * ("Open preview"). A standalone piece by design (see the module doc
+ * comment) — the grid lane wires it into a cell.
+ */
+export function CommentCountBadge({ count, hovered, onOpen, onOpenPreview, label: labelProp, previewLabel: previewLabelProp, className, }) {
+    const label = useCrispMessage(labelProp, count === 1 ? "1 comment" : `${count} comments`);
+    const previewLabel = useCrispMessage(previewLabelProp, "Open preview");
+    if (count === 0 && !hovered)
+        return null;
+    if (!hovered) {
+        return (_jsx("span", { className: className
+                ? `crisp-comments-badge ${className}`
+                : "crisp-comments-badge", "aria-hidden": "true", children: _jsx("span", { className: "crisp-comments-badge-dot" }) }));
+    }
+    return (_jsxs("span", { className: className ? `crisp-comments-badge ${className}` : "crisp-comments-badge", children: [_jsxs("button", { type: "button", className: "crisp-comments-badge", "aria-label": label, onClick: onOpen, children: [_jsx(MessageSquare, { size: 12, strokeWidth: 2, "aria-hidden": "true" }), count > 0 && (_jsx("span", { className: "crisp-comments-badge-count", children: count }))] }), onOpenPreview && (_jsx("button", { type: "button", className: "crisp-comments-badge", "aria-label": previewLabel, onClick: onOpenPreview, children: _jsx(ArrowUpRight, { "data-rtl-flip": "", size: 12, strokeWidth: 2, "aria-hidden": "true" }) }))] }));
+}
+CommentCountBadge.displayName = "CommentCountBadge";

package/dist/esm/product/comments/comments.recipe.js

@@ -0,0 +1,123 @@
+import { defineRecipe, resolveRecipe, rtlFlipCss } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// Per-record comment threads (crisp#625) — measured live on app.attio.com's
+// own per-record comments panel (open the "zz-parity-crisp-comments" test
+// company's Overview tab, click the speech-bubble icon top-right of the
+// record header). Unlike `RecordPanel`'s peek, this panel is laid out
+// IN-FLOW beside the record view, not floated over it: `getComputedStyle`
+// on the panel wrapper read a shadow of `none` and no left-edge border at all
+// (elevation.floating was tried first and contradicted the live read), so
+// this recipe carries no shadow of its own — only a hairline
+// `border-inline-start` for the seam visible in every screenshot. Width read
+// 319px in situ; used here as 320px (one hairline off, almost certainly a
+// scrollbar/subpixel artifact of the sampled window, not a real 319px
+// design value — flag this if a future pass measures a *different* window
+// width and still gets an odd number).
+const config = defineRecipe({
+    name: "comments",
+    base: `display: flex; flex-direction: column; box-sizing: border-box; width: 320px; height: 100%;
+    background: ${c.bgSurface}; border-inline-start: 1px solid ${c.borderSubtle};
+    font-family: ${c.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & * { box-sizing: border-box; }
+
+    & .crisp-comments-head { display: flex; align-items: center; gap: ${c.space["1"]}; flex-shrink: 0; height: 49px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; }
+    & .crisp-comments-headbtn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-comments-headbtn:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    & .crisp-comments-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+    & .crisp-comments-title { font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-comments-breadcrumb { display: flex; align-items: center; gap: ${c.space["1"]}; font-size: 12px; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+    & .crisp-comments-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 ${c.space["4"]}; display: flex; flex-direction: column; gap: ${c.space["4"]}; }
+    & .crisp-comments-body--pad-top { padding-top: ${c.space["3"]}; }
+
+    /* One comment row -- avatar 16px (Avatar size="sm"), 6px gap to the
+       name/time line, 14px/600 name + 12px/500 63%-muted time, 14px/400 body
+       two lines below. Hover actions fade in flush with the name line. */
+    & .crisp-comments-row { position: relative; display: flex; gap: ${c.space["1.5"]}; }
+    & .crisp-comments-row-main { flex: 1; min-width: 0; }
+    & .crisp-comments-row-head { display: flex; align-items: baseline; gap: ${c.space["1.5"]}; height: 20px; }
+    & .crisp-comments-author { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .crisp-comments-time { font-size: 12px; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); white-space: nowrap; }
+    & .crisp-comments-resolved-label { display: flex; align-items: center; gap: ${c.space["1"]}; margin-bottom: ${c.space["1"]}; font-size: 12px; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-comments-body-text { font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.regular}; color: ${c.fgPrimary}; white-space: pre-wrap; word-break: break-word; }
+
+    /* Hover actions -- measured: 4 buttons, 28x28, radius 8, flush
+       side-by-side (0 gap), transparent by default, 16px icon at 55% ink. */
+    & .crisp-comments-row-actions { position: absolute; top: 0; inset-inline-end: 0; display: flex; opacity: 0; pointer-events: none; background: ${c.bgSurface}; }
+    & .crisp-comments-row:hover .crisp-comments-row-actions,
+    & .crisp-comments-row-actions:focus-within { opacity: 1; pointer-events: auto; }
+    & .crisp-comments-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: transparent; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-comments-action:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    & .crisp-comments-action[data-active] { color: ${c.bgBrandSolid}; }
+
+    /* Reactions -- measured: 28px pill, radius 8, subtle 4% ink fill,
+       padding 4px 8px 4px 6px, gap 4px between the emoji glyph and count. */
+    & .crisp-comments-reactions { display: flex; flex-wrap: wrap; gap: ${c.space["1"]}; margin-top: ${c.space["1.5"]}; }
+    & .crisp-comments-reaction { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: 28px; padding: 4px 8px 4px 6px; border: none; border-radius: ${c.radius.md}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); font-family: inherit; font-size: 12px; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; cursor: pointer; }
+    & .crisp-comments-reaction[data-reacted] { background: color-mix(in srgb, ${c.bgBrandSolid} 12%, transparent); color: ${c.bgBrandSolid}; }
+    & .crisp-comments-reaction-add { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: ${c.radius.md}; background: transparent; font-family: inherit; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); cursor: pointer; opacity: 0; transition: opacity .12s, background-color .12s; }
+    & .crisp-comments-row:hover .crisp-comments-reaction-add { opacity: 1; }
+    & .crisp-comments-reaction-add:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+
+    /* Reply-in-thread view -- an indented block of replies below the root. */
+    & .crisp-comments-replies { display: flex; flex-direction: column; gap: ${c.space["4"]}; margin-top: ${c.space["3"]}; padding-inline-start: ${c.space["4"]}; border-inline-start: 1px solid ${c.borderSubtle}; }
+
+    & .crisp-comments-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: ${c.space["1"]}; padding: ${c.space["6"]} ${c.space["4"]}; text-align: center; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); font-size: ${c.text.lg}; }
+
+    /* Composer -- measured: 14px/20px body text, 16px gap above the
+       reply/mention icon row, Comment button 84x32 padding 6px 10px radius
+       9 (= radius.lg) brand-solid fill, 14px/500 white label, opacity .4
+       disabled / 1 enabled (no color/background change between the two). */
+    & .crisp-comments-composer { flex-shrink: 0; padding: ${c.space["3"]} ${c.space["4"]} ${c.space["4"]}; border-top: 1px solid ${c.borderSubtle}; }
+    & .crisp-comments-field { min-height: 20px; max-height: 120px; overflow-y: auto; font-family: inherit; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.regular}; color: ${c.fgPrimary}; outline: none; white-space: pre-wrap; word-break: break-word; }
+    & .crisp-comments-field:focus-visible { outline: 2px solid ${c.strokeFocusRing}; outline-offset: 2px; }
+    & .crisp-comments-field:empty::before { content: attr(data-placeholder); color: color-mix(in srgb, ${c.fgPrimary} 40%, transparent); }
+    & .crisp-comments-composer-foot { display: flex; align-items: center; justify-content: space-between; margin-top: ${c.space["4"]}; }
+    & .crisp-comments-composer-tools { display: flex; align-items: center; gap: ${c.space["1"]}; }
+    & .crisp-comments-tool { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: color-mix(in srgb, ${c.fgPrimary} 45%, transparent); font-family: inherit; cursor: pointer; }
+    & .crisp-comments-tool:hover { color: ${c.fgPrimary}; }
+    /* Same fill/shadow as Button's own intent="primary" (crisp/button.recipe.ts) --
+       confirmed byte-identical against the live "Comment" button's computed
+       box-shadow, so this reuses that literal rather than re-deriving it.
+       32px/radius.lg/6px-10px padding has no matching Button \`size\` yet
+       (24/28/40 are the three that exist), so this stays hand-rolled instead
+       of stretching one of those. */
+    & .crisp-comments-post { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 6px ${c.space["2.5"]}; border: none; border-radius: ${c.radius.lg}; background: ${c.bgBrandSolid}; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgOnBrand}; cursor: pointer; opacity: 1; transition: opacity .12s, background-color .12s; }
+    & .crisp-comments-post:hover:not(:disabled) { background: ${c.bgBrandSolidPressed}; }
+    & .crisp-comments-post:disabled { opacity: .4; cursor: default; }
+
+    /* Filter menu -- measured: 220px, radius 12 (radius.xl), 4px padding,
+       elevation.floating -- a plain reuse of crisp's own Menu, so no rules
+       live here; kept as a comment for the record. */
+
+    /* An inserted "@mention" chip in the composer -- same shape as
+       RichTextEditor's own \`.crisp-rte-mention\` (crisp#428), reused here
+       rather than re-derived since it's the same atomic-chip affordance. */
+    & .crisp-comments-mention { display: inline; padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, ${c.bgBrandSolid} 12%, transparent); color: ${c.bgBrandSolid}; font-weight: ${c.weight.medium}; user-select: none; }
+
+    /* Reaction picker -- see \`ReactionPicker\`'s own doc comment: the exact
+       chrome wasn't independently pixel-measured this pass (screenshot
+       capture broke mid-session), so this reuses Menu's already-measured
+       floating-popover shell rather than a new value. */
+    & .crisp-comments-reactionpicker { width: 240px; padding: ${c.space["2"]}; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: ${e.floating}; }
+    & .crisp-comments-reactionpicker-search { box-sizing: border-box; width: 100%; height: 28px; margin-bottom: ${c.space["2"]}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgRaised}; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgPrimary}; }
+    & .crisp-comments-reactionpicker-search::placeholder { color: color-mix(in srgb, ${c.fgPrimary} 40%, transparent); }
+    & .crisp-comments-reactionpicker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: ${c.space["0.5"]}; max-height: 160px; overflow-y: auto; }
+    & .crisp-comments-reactionpicker-item { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: ${c.radius.sm}; background: none; font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
+    & .crisp-comments-reactionpicker-item:hover { background: ${c.bgRaised}; }
+
+    /* Row badge (CommentCountBadge) -- lives in its own class family so the
+       grid lanes can drop it into a cell without pulling in the panel's
+       CSS. Persistent state: a 6px grey dot. Hover state: a 12px comment
+       icon + 12px count text, both at 55% ink, replacing the dot. */
+    & .crisp-comments-badge { display: inline-flex; align-items: center; gap: ${c.space["1"]}; border: none; background: none; padding: 0; margin: 0; font-family: inherit; cursor: pointer; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); }
+    & .crisp-comments-badge-dot { width: 6px; height: 6px; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 38%, transparent); }
+    & .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
+    ${rtlFlipCss}`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const commentsRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/comments/index.js

@@ -0,0 +1,2 @@
+export { CommentCountBadge, CommentsPanel, } from "./comments.js";
+export { commentsRecipe } from "./comments.recipe.js";

package/dist/esm/product/headerbar/headerbar.recipe.js

@@ -17,10 +17,18 @@ import { contract as c } from "../../tokens/index.js";
 // `title`/`trailing` slot content a consumer supplies. `size.header` (48px)
 // is reused rather than a new token, since it's the same "workspace-switcher
 // header height" measured elsewhere in the sidebar.
+//
+// crisp#576: `border-box` plus a plain `height: ${size.header}` meant the
+// bordered variant's own 1px border was eaten OUT OF the 48px box, leaving
+// only 47px of content -- caught in review of internal/grc's own shell
+// shifting up 1px end-to-end after adopting this component. Re-measured
+// live: Attio's own `<header>` is 49px total (border-box) with the 1px
+// border OUTSIDE the 48px content row, not inside it. `[data-bordered]` now
+// grows the box by the border's own width so content stays 48px either way.
 const config = defineRecipe({
     name: "headerbar",
     base: `box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: ${c.space["2"]}; height: ${c.size.header}; flex-shrink: 0; padding: 0 ${c.space["3"]}; font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
-    &[data-bordered] { border-bottom: 1px solid ${c.borderSubtle}; }
+    &[data-bordered] { height: calc(${c.size.header} + 1px); border-bottom: 1px solid ${c.borderSubtle}; }
     & .crisp-headerbar-leading { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; min-width: 0; }
     & .crisp-headerbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: ${c.space["2"]}; overflow: hidden; }
     & .crisp-headerbar-trailing { display: flex; align-items: center; gap: ${c.space["2"]}; flex-shrink: 0; }`,

package/dist/esm/product/listpage/listpage.recipe.js

@@ -12,7 +12,16 @@ const config = defineRecipe({
     & .crisp-listpage-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.header}; flex-shrink: 0; padding: 0 ${c.space["3"]}; }
     & .crisp-listpage-toolbar-lead { display: flex; align-items: center; gap: ${c.space["2"]}; }
     & .crisp-listpage-count { margin-inline-start: auto; font-size: ${c.text.md}; color: ${c.fgMuted}; white-space: nowrap; }
-    & .crisp-listpage-toolbar-trail { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    /* #641: trailing (View settings / New) has to reach the toolbar's own
+       inline-end edge on its own -- the only thing pushing it there used
+       to be .crisp-listpage-count's margin-inline-start: auto, which a
+       consumer with no count badge (TasksTable, measured live: trailing
+       sat right after leading, nowhere near the row's own right edge)
+       never renders. A bare margin-inline-start: auto here is safely
+       overridden by the more specific rule right below whenever count IS
+       present, so the two cases don't fight -- count's own auto margin
+       still does the pushing there, this one only fires when it's absent. */
+    & .crisp-listpage-toolbar-trail { display: flex; align-items: center; gap: ${c.space["2"]}; margin-inline-start: auto; }
     & .crisp-listpage-count + .crisp-listpage-toolbar-trail { margin-inline-start: ${c.space["3"]}; }
 
     & .crisp-listpage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 ${c.space["3"]} ${c.space["3"]}; }

package/dist/esm/product/objectsettings/index.js

@@ -0,0 +1,2 @@
+export { ATTRIBUTE_AI_AUTOFILL_OPTIONS, ATTRIBUTE_TYPE_OPTIONS, AttributesTable, AttributeTypeSelect, CreateAttributeDialog, ObjectAppearanceSection, ObjectDetailPage, ObjectGeneralSection, ObjectSettings, ObjectsList, } from "./objectsettings.js";
+export { objectsettingsRecipe } from "./objectsettings.recipe.js";