@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/components/comment-thread.js

@@ -0,0 +1,449 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { AtSign, Check, CornerDownRight, Eye, Hash, Heart, HelpCircle, Link2, MoreHorizontal, Paperclip, Pencil, RotateCcw, SmilePlus, ThumbsUp, Trash2 } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat, useLocale } from "../lib/locale.js";
+import { foldText } from "../lib/text.js";
+import { RelativeTime } from "../lib/data-islands.js";
+import { Avatar } from "./avatar.js";
+import { Badge } from "./badge.js";
+import { Button, IconButton } from "./button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { Spinner } from "./spinner.js";
+import { AttachmentList } from "./attachment-list.js";
+const MENTION_RE = /([@#])\[([^\]\n]{1,120})\]\((user|team|record):([^)\s]{1,120})\)/g;
+/** Turns a mention into its stored form: `@[Jane Cooper](user:42)`. */
+export function serializeMention(m, trigger = m.kind === "record" ? "#" : "@") {
+    return `${trigger}[${m.label.replace(/[[\]]/g, "")}](${m.kind}:${m.id})`;
+}
+/**
+ * Reads a stored comment body. `text` is what people see ("@Jane Cooper can you check?");
+ * `mentions` carries ids and offsets into `text`. Locale-independent.
+ */
+export function parseMentions(body) {
+    const mentions = [];
+    let text = "";
+    let last = 0;
+    for (const m of body.matchAll(MENTION_RE)) {
+        text += body.slice(last, m.index);
+        const shown = `${m[1]}${m[2]}`;
+        mentions.push({ id: m[4], kind: m[3], label: m[2], start: text.length, end: text.length + shown.length, trigger: m[1] });
+        text += shown;
+        last = m.index + m[0].length;
+    }
+    text += body.slice(last);
+    return { text, mentions };
+}
+/** Re-serializes composer text: every `@Label` of a picked mention becomes its stored token. */
+function serializeComposer(text, picked) {
+    const used = [];
+    let body = text;
+    const sorted = [...picked].sort((a, b) => b.label.length - a.label.length);
+    const tokens = [];
+    for (const m of sorted) {
+        const trigger = m.kind === "record" ? "#" : "@";
+        const shown = `${trigger}${m.label}`;
+        if (!body.includes(shown))
+            continue;
+        if (!used.some((u) => u.id === m.id && u.kind === m.kind))
+            used.push(m);
+        // Placeholder first so a shorter label inside a longer one isn't replaced twice.
+        const ph = `\u0000${tokens.length}\u0000`;
+        tokens.push(serializeMention(m, trigger));
+        body = body.split(shown).join(ph);
+    }
+    body = body.replace(/\u0000(\d+)\u0000/g, (_, i) => tokens[Number(i)]);
+    return { body, mentions: used };
+}
+/** Default reaction set — icons, not emoji, so they follow the theme. */
+export const defaultReactions = [
+    { key: "like", label: "Like", icon: ThumbsUp },
+    { key: "agree", label: "Agree", icon: Check },
+    { key: "love", label: "Love", icon: Heart },
+    { key: "question", label: "Question", icon: HelpCircle },
+    { key: "seen", label: "Seen", icon: Eye },
+];
+export const commentLabels = {
+    thread: "Comments",
+    empty: "Start the conversation",
+    emptyHint: "Mention a teammate with @ to bring them in.",
+    placeholder: "Write a comment… Use @ to mention",
+    replyPlaceholder: "Write a reply…",
+    comment: "Comment",
+    reply: "Reply",
+    replyTo: "Reply to {name}",
+    edit: "Edit",
+    save: "Save",
+    cancel: "Cancel",
+    delete: "Delete",
+    copyLink: "Copy link",
+    linkCopied: "Link copied",
+    resolve: "Resolve",
+    reopen: "Reopen",
+    resolved: "Resolved",
+    resolvedBy: "Resolved by {name}",
+    show: "Show",
+    hide: "Hide",
+    replies: "{count, plural, one {# reply} other {# replies}}",
+    edited: "edited",
+    editedAt: "Edited {time}",
+    deleted: "This comment was deleted",
+    sending: "Sending…",
+    failed: "Not sent",
+    retry: "Retry",
+    discard: "Discard",
+    more: "More actions for {name}'s comment",
+    attach: "Attach files",
+    mention: "Mention someone",
+    submitHint: "{key}+Enter to send",
+    submitError: "Couldn't post your comment. Try again.",
+    suggestions: "{count, plural, =0 {No matches} one {# suggestion} other {# suggestions}}",
+    searching: "Searching…",
+    noMatch: "No one matches “{query}”",
+    react: "Add reaction",
+    reaction: "{label}: {count}",
+    you: "You",
+    commentBy: "Comment by {name}",
+};
+/** Inline mention token inside a comment body. */
+export function MentionChip({ mention, self, className, ...props }) {
+    const trigger = mention.trigger ?? (mention.kind === "record" ? "#" : "@");
+    return (_jsxs("span", { "data-slot": "mention", "data-kind": mention.kind, "data-self": self ? "" : undefined, className: cn("inline rounded-[5px] px-1 py-px font-medium [box-decoration-break:clone]", mention.kind === "record" ? "bg-selected text-fg" : "bg-accent-soft text-accent-ink", self && "ring-1 ring-inset ring-[color-mix(in_srgb,var(--accent-ink)_40%,transparent)]", className), ...props, children: [trigger, mention.label] }));
+}
+/** A comment's text: line breaks kept, mentions rendered as chips, mixed directions handled (`dir="auto"`). */
+export function CommentBody({ body, currentUserId, renderMention, className, ...props }) {
+    const { text, mentions } = React.useMemo(() => parseMentions(body), [body]);
+    const parts = [];
+    let pos = 0;
+    mentions.forEach((m, i) => {
+        if (m.start > pos)
+            parts.push(text.slice(pos, m.start));
+        parts.push(_jsx(React.Fragment, { children: renderMention ? renderMention(m) : _jsx(MentionChip, { mention: m, self: m.kind === "user" && m.id === currentUserId }) }, `m${i}`));
+        pos = m.end;
+    });
+    if (pos < text.length)
+        parts.push(text.slice(pos));
+    return (_jsx("div", { "data-slot": "comment-body", dir: "auto", className: cn("whitespace-pre-wrap break-words text-[13.5px] leading-relaxed text-fg", className), ...props, children: parts }));
+}
+function findTrigger(value, caret, triggers) {
+    const before = value.slice(0, caret);
+    for (let i = before.length - 1; i >= 0 && before.length - i <= 32; i--) {
+        const ch = before[i];
+        if (ch === "\n")
+            return null;
+        if (triggers.includes(ch) && (i === 0 || /\s|[(\[{"'“]/.test(before[i - 1]))) {
+            const query = before.slice(i + 1);
+            if (/^\s/.test(query) || /\s$/.test(query))
+                return null;
+            return { trigger: ch, start: i, query };
+        }
+    }
+    return null;
+}
+/**
+ * The comment box: a plain textarea with an `@` / `#` mention picker (combobox pattern:
+ * ↑/↓ move, Enter or Tab insert, Esc close), optional attachments, and ⌘/Ctrl+Enter to send.
+ * Picked mentions are stored as `@[Name](user:id)` in the submitted body.
+ */
+export const CommentComposer = React.forwardRef(function CommentComposer({ onSubmit, onCancel, defaultValue, parentId, mentionSources, allowAttachments, placeholder, submitLabel, author, autoFocus, variant = "inline", compact, labels, className, ...props }, ref) {
+    const t = useLabels("comments", commentLabels, labels);
+    const { locale } = useLocale();
+    const initial = React.useMemo(() => (defaultValue ? parseMentions(defaultValue) : null), [defaultValue]);
+    const [value, setValue] = React.useState(initial?.text ?? "");
+    const [picked, setPicked] = React.useState(() => initial?.mentions.map((m) => ({ id: m.id, kind: m.kind, label: m.label })) ?? []);
+    const [files, setFiles] = React.useState([]);
+    const [busy, setBusy] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [picker, setPicker] = React.useState(null);
+    const [results, setResults] = React.useState([]);
+    const [searching, setSearching] = React.useState(false);
+    const [active, setActive] = React.useState(0);
+    const areaRef = React.useRef(null);
+    const fileRef = React.useRef(null);
+    const searchSeq = React.useRef(0);
+    const listId = React.useId();
+    const hintId = React.useId();
+    const triggers = React.useMemo(() => (mentionSources ?? []).map((s) => s.trigger ?? "@"), [mentionSources]);
+    // Platform is read after mount so the server and first client render agree.
+    const [isMac, setIsMac] = React.useState(false);
+    React.useEffect(() => setIsMac(/Mac|iPhone|iPad/.test(navigator.platform)), []);
+    React.useImperativeHandle(ref, () => areaRef.current, []);
+    React.useEffect(() => {
+        if (autoFocus)
+            areaRef.current?.focus();
+    }, [autoFocus]);
+    // Grow with content (up to ~10 lines) and place the caret after a programmatic insert —
+    // synchronously, so keys typed right after an insert land in the right place.
+    const pendingCaret = React.useRef(null);
+    React.useLayoutEffect(() => {
+        const el = areaRef.current;
+        if (!el)
+            return;
+        el.style.height = "auto";
+        el.style.height = `${Math.min(el.scrollHeight, 240)}px`;
+        if (pendingCaret.current !== null) {
+            const pos = pendingCaret.current;
+            pendingCaret.current = null;
+            el.focus();
+            el.setSelectionRange(pos, pos);
+        }
+    }, [value]);
+    // Run the mention search for the current query (latest request wins).
+    React.useEffect(() => {
+        if (!picker)
+            return;
+        const source = mentionSources?.find((s) => (s.trigger ?? "@") === picker.trigger);
+        if (!source)
+            return;
+        const seq = ++searchSeq.current;
+        setSearching(true);
+        Promise.resolve(source.search(picker.query))
+            .then((items) => {
+            if (seq !== searchSeq.current)
+                return;
+            const q = foldText(picker.query, locale);
+            // Locale-aware fallback ranking: prefix matches first.
+            const ranked = [...items].sort((a, b) => Number(!foldText(a.label, locale).startsWith(q)) - Number(!foldText(b.label, locale).startsWith(q)));
+            setResults(ranked.slice(0, 8));
+            setActive(0);
+        })
+            .catch(() => seq === searchSeq.current && setResults([]))
+            .finally(() => seq === searchSeq.current && setSearching(false));
+    }, [picker?.trigger, picker?.query, mentionSources, locale]); // eslint-disable-line react-hooks/exhaustive-deps
+    const updatePicker = (el) => {
+        if (!triggers.length)
+            return;
+        const p = findTrigger(el.value, el.selectionStart ?? el.value.length, triggers);
+        setPicker(p);
+        if (!p)
+            setResults([]);
+    };
+    const insert = (item) => {
+        if (!picker)
+            return;
+        const el = areaRef.current;
+        const trigger = item.kind === "record" ? "#" : picker.trigger;
+        const caret = el?.selectionStart ?? picker.start + 1 + picker.query.length;
+        const token = `${trigger}${item.label} `;
+        const next = value.slice(0, picker.start) + token + value.slice(caret);
+        setValue(next);
+        setPicked((p) => (p.some((x) => x.id === item.id && x.kind === item.kind) ? p : [...p, item]));
+        setPicker(null);
+        setResults([]);
+        pendingCaret.current = picker.start + token.length;
+    };
+    const canSubmit = (value.trim().length > 0 || files.length > 0) && !busy;
+    const submit = async () => {
+        if (!canSubmit)
+            return;
+        const { body, mentions } = serializeComposer(value.trim(), picked);
+        setBusy(true);
+        setError(null);
+        try {
+            await onSubmit({ body, parentId, attachments: files, mentions });
+            setValue("");
+            setPicked([]);
+            setFiles([]);
+        }
+        catch {
+            setError(t("submitError"));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const open = Boolean(picker) && (results.length > 0 || searching || picker.query.length > 0);
+    const onKeyDown = (e) => {
+        if (open && results.length > 0) {
+            if (e.key === "ArrowDown") {
+                e.preventDefault();
+                setActive((a) => (a + 1) % results.length);
+                return;
+            }
+            if (e.key === "ArrowUp") {
+                e.preventDefault();
+                setActive((a) => (a - 1 + results.length) % results.length);
+                return;
+            }
+            if ((e.key === "Enter" && !e.metaKey && !e.ctrlKey) || e.key === "Tab") {
+                e.preventDefault();
+                insert(results[active]);
+                return;
+            }
+        }
+        if (e.key === "Escape") {
+            if (picker) {
+                e.preventDefault();
+                e.stopPropagation();
+                setPicker(null);
+                setResults([]);
+                return;
+            }
+            if (onCancel) {
+                e.preventDefault();
+                onCancel();
+            }
+            return;
+        }
+        if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            void submit();
+        }
+    };
+    const fileItems = files.map((f, i) => ({ id: `${i}-${f.name}`, name: f.name, size: f.size, mime: f.type }));
+    return (_jsxs("form", { "data-slot": "comment-composer", "data-variant": variant, className: cn("flex gap-2.5", variant === "sticky-bottom" && "sticky bottom-0 z-(--z-sticky) -mx-[var(--composer-bleed,0px)] border-t border-line bg-[color-mix(in_srgb,var(--surface-solid)_94%,transparent)] px-[var(--composer-bleed,0px)] py-3", className), onSubmit: (e) => {
+            e.preventDefault();
+            void submit();
+        }, ...props, children: [author ? _jsx(Avatar, { name: author.name, src: author.avatar, size: compact ? "sm" : "md", className: "mt-1" }) : null, _jsxs("div", { className: "relative min-w-0 flex-1", children: [_jsxs("div", { className: cn("rounded-ui border border-field-border bg-field transition-[border-color,box-shadow]", "focus-within:border-field-border-hover focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_18%,transparent)]", error && "border-[color-mix(in_srgb,var(--danger)_55%,transparent)]"), children: [_jsx("textarea", { ref: areaRef, dir: "auto", rows: compact ? 1 : 2, value: value, placeholder: placeholder ?? t(parentId ? "replyPlaceholder" : "placeholder"), "aria-label": placeholder ?? t(parentId ? "replyPlaceholder" : "placeholder"), "aria-describedby": hintId, "aria-autocomplete": triggers.length ? "list" : undefined, "aria-controls": open ? listId : undefined, "aria-activedescendant": open && results[active] ? `${listId}-${active}` : undefined, "aria-invalid": error ? true : undefined, disabled: busy, onChange: (e) => {
+                                    setValue(e.target.value);
+                                    updatePicker(e.target);
+                                }, onSelect: (e) => updatePicker(e.currentTarget), onKeyDown: onKeyDown, onBlur: () => setTimeout(() => setPicker(null), 120), className: cn("block w-full resize-none bg-transparent px-3 pt-2.5 text-[13.5px] leading-relaxed text-fg outline-none placeholder:text-fg-subtle disabled:opacity-60", compact ? "min-h-9" : "min-h-16") }), files.length ? (_jsx(AttachmentList, { layout: "chips", items: fileItems, className: "px-2 pb-1", onRemove: (f) => setFiles((all) => all.filter((_, i) => `${i}-${all[i].name}` !== f.id)) })) : null, _jsxs("div", { className: "flex items-center gap-1 px-1.5 pb-1.5", children: [triggers.includes("@") ? (_jsx(IconButton, { label: t("mention"), tooltip: false, size: "xs", tabIndex: -1, onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                                            const el = areaRef.current;
+                                            const caret = el.selectionStart ?? value.length;
+                                            const pad = caret > 0 && !/\s/.test(value[caret - 1]) ? " " : "";
+                                            const next = value.slice(0, caret) + pad + "@" + value.slice(caret);
+                                            setValue(next);
+                                            const pos = caret + pad.length + 1;
+                                            setPicker({ trigger: "@", start: pos - 1, query: "" });
+                                            pendingCaret.current = pos;
+                                        }, children: _jsx(AtSign, {}) })) : null, allowAttachments ? (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileRef, type: "file", multiple: true, hidden: true, tabIndex: -1, "aria-hidden": true, onChange: (e) => {
+                                                    const list = Array.from(e.currentTarget.files ?? []);
+                                                    setFiles((f) => [...f, ...list]);
+                                                    e.currentTarget.value = "";
+                                                } }), _jsx(IconButton, { label: t("attach"), tooltip: false, size: "xs", onClick: () => fileRef.current?.click(), children: _jsx(Paperclip, {}) })] })) : null, _jsx("span", { id: hintId, className: "ms-1 hidden truncate text-[11px] text-fg-subtle sm:inline", children: t("submitHint", { key: isMac ? "⌘" : "Ctrl" }) }), _jsxs("span", { className: "ms-auto flex items-center gap-1.5", children: [onCancel ? (_jsx(Button, { size: "xs", variant: "ghost", onClick: onCancel, children: t("cancel") })) : null, _jsx(Button, { size: "xs", variant: "primary", type: "submit", disabled: !canSubmit, loading: busy, children: submitLabel ?? t(parentId ? "reply" : "comment") })] })] })] }), error ? (_jsx("p", { role: "alert", className: "mt-1.5 text-xs text-danger", children: error })) : null, open ? (_jsxs("div", { "data-slot": "mention-picker", className: "absolute inset-x-0 top-full z-(--z-popover) mt-1 max-w-80 overflow-hidden rounded-ui border border-popover-border bg-popover-nested p-1 shadow-(--popover-shadow)", children: [_jsx("ul", { id: listId, role: "listbox", "aria-label": t("suggestions", { count: results.length }), children: results.map((item, i) => {
+                                    const Icon = item.kind === "record" ? Hash : null;
+                                    return (_jsxs("li", { id: `${listId}-${i}`, role: "option", "aria-selected": i === active, onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => setActive(i), onClick: () => insert(item), className: cn("flex cursor-pointer items-center gap-2.5 rounded-ui-sm px-2 py-1.5 text-[13px]", i === active && "bg-hover"), children: [Icon ? (_jsx("span", { "aria-hidden": true, className: "inline-flex size-6 items-center justify-center rounded-ui-sm bg-selected text-fg-muted [&_svg]:size-3.5", children: _jsx(Icon, {}) })) : (_jsx(Avatar, { name: item.label, src: item.avatar, size: "sm", shape: item.kind === "team" ? "square" : "circle", "aria-hidden": true })), _jsxs("span", { className: "grid min-w-0", children: [_jsx("span", { className: "truncate font-medium text-fg", children: item.label }), item.description ? _jsx("span", { className: "truncate text-[11.5px] text-fg-muted", children: item.description }) : null] })] }, `${item.kind}:${item.id}`));
+                                }) }), results.length === 0 ? (_jsx("p", { className: "flex items-center gap-2 px-2 py-1.5 text-[13px] text-fg-muted", children: searching ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "xs" }), " ", t("searching")] })) : (t("noMatch", { query: picker.query })) })) : null] })) : null, _jsx("span", { className: "sr-only", "aria-live": "polite", children: open && !searching ? t("suggestions", { count: results.length }) : "" })] })] }));
+});
+/** One comment: avatar, author and time, body with mention chips, attachments, reactions and actions. An `<article>` labelled by its header. */
+export const Comment = React.forwardRef(function Comment({ comment: c, currentUserId, isReply, onReply, onEdit, onDelete, onResolve, onRetry, onDiscard, onReact, getLink, reactions = defaultReactions, mentionSources, renderMention, onPreviewAttachment, readOnly, compact, now, labels, className, children, ...props }, ref) {
+    const t = useLabels("comments", commentLabels, labels);
+    const f = useFormat();
+    const headId = React.useId();
+    const [editing, setEditing] = React.useState(false);
+    const [copied, setCopied] = React.useState(false);
+    const own = c.author.id === currentUserId;
+    const canEdit = own && !readOnly && onEdit && !c.status && !c.deleted;
+    const canDelete = own && !readOnly && onDelete && !c.status && !c.deleted;
+    const canResolve = !isReply && !readOnly && onResolve && !c.status && !c.deleted;
+    if (c.deleted) {
+        return (_jsxs("article", { ref: ref, "data-slot": "comment", "data-deleted": "", "aria-label": t("deleted"), tabIndex: -1, className: cn("flex flex-col gap-3 outline-none", className), ...props, children: [_jsx("p", { className: "flex items-center gap-2 rounded-ui-sm border border-dashed border-line px-3 py-2 text-[13px] italic text-fg-subtle", children: t("deleted") }), children] }));
+    }
+    const copyLink = async () => {
+        if (!getLink)
+            return;
+        try {
+            await navigator.clipboard.writeText(getLink(c));
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1600);
+        }
+        catch {
+            /* clipboard blocked */
+        }
+    };
+    const menu = canEdit || canDelete || getLink;
+    return (_jsxs("article", { ref: ref, "data-slot": "comment", "data-status": c.status, "data-own": own ? "" : undefined, "aria-labelledby": headId, tabIndex: -1, className: cn("group/comment relative flex gap-2.5 outline-none focus-visible:rounded-ui-sm focus-visible:ring-2 focus-visible:ring-(--ring) focus-visible:ring-offset-4 focus-visible:ring-offset-(--surface-solid)", className), ...props, children: [_jsx(Avatar, { name: c.author.name, src: c.author.avatar, size: isReply || compact ? "sm" : "md", className: cn(isReply || compact ? "mt-0.5" : "mt-px") }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("header", { className: "flex min-h-6 flex-wrap items-baseline gap-x-2 gap-y-0.5", children: [_jsxs("h4", { id: headId, className: "contents", children: [_jsx("span", { className: "text-[13.5px] font-semibold text-fg", children: c.author.name }), own ? _jsxs("span", { className: "sr-only", children: [" (", t("you"), ")"] }) : null, _jsx("span", { className: "sr-only", children: ", " }), _jsx(RelativeTime, { value: c.createdAt, now: now, className: "text-xs text-fg-subtle" })] }), c.editedAt ? (_jsxs("span", { className: "text-xs text-fg-subtle", title: t("editedAt", { time: f.dateTime(c.editedAt) }), children: ["\u00B7 ", t("edited")] })) : null, c.status === "sending" ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-fg-subtle", children: [_jsx(Spinner, { size: "xs" }), " ", t("sending")] })) : null, c.resolved && !isReply ? (_jsxs(Badge, { tone: "success", size: "sm", children: [_jsx(Check, { "aria-hidden": true }), " ", c.resolvedBy ? t("resolvedBy", { name: c.resolvedBy }) : t("resolved")] })) : null, !readOnly && !editing && (menu || canResolve) && !c.status ? (_jsxs("span", { className: "ms-auto flex items-center gap-0.5 self-center opacity-100 transition-opacity sm:opacity-0 sm:group-hover/comment:opacity-100 sm:group-focus-within/comment:opacity-100 [@media(hover:none)]:opacity-100", children: [canResolve ? (_jsxs(Button, { size: "xs", variant: "ghost", onClick: () => onResolve(c.id, !c.resolved), className: "text-fg-muted", children: [c.resolved ? _jsx(RotateCcw, { "aria-hidden": true }) : _jsx(Check, { "aria-hidden": true }), c.resolved ? t("reopen") : t("resolve")] })) : null, menu ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { label: t("more", { name: c.author.name }), size: "xs", tooltip: false, children: _jsx(MoreHorizontal, {}) }) }), _jsxs(DropdownMenuContent, { align: "end", children: [canEdit ? (_jsx(DropdownMenuItem, { icon: _jsx(Pencil, {}), onSelect: () => setEditing(true), children: t("edit") })) : null, getLink ? (_jsx(DropdownMenuItem, { icon: _jsx(Link2, {}), onSelect: () => void copyLink(), children: t("copyLink") })) : null, canDelete ? (_jsxs(_Fragment, { children: [canEdit || getLink ? _jsx(DropdownMenuSeparator, {}) : null, _jsx(DropdownMenuItem, { icon: _jsx(Trash2, {}), tone: "danger", onSelect: () => void onDelete(c.id), children: t("delete") })] })) : null] })] })) : null] })) : null] }), editing ? (_jsx(CommentComposer, { className: "mt-1.5", defaultValue: c.body, mentionSources: mentionSources, autoFocus: true, compact: true, submitLabel: t("save"), labels: labels, onCancel: () => setEditing(false), onSubmit: async ({ body }) => {
+                            await onEdit(c.id, body);
+                            setEditing(false);
+                        } })) : (_jsx(CommentBody, { body: c.body, currentUserId: currentUserId, renderMention: renderMention, className: cn("mt-0.5", c.status === "sending" && "text-fg-muted") })), c.attachments?.length ? _jsx(AttachmentList, { layout: "chips", readOnly: true, items: c.attachments, onPreview: onPreviewAttachment, className: "mt-2" }) : null, c.status === "failed" ? (_jsxs("p", { role: "alert", className: "mt-1.5 flex items-center gap-2 text-xs text-danger", children: [t("failed"), onRetry ? (_jsx(Button, { size: "xs", variant: "link", onClick: () => onRetry(c), className: "text-xs", children: t("retry") })) : null, onDiscard ? (_jsx(Button, { size: "xs", variant: "link", onClick: () => onDiscard(c), className: "text-xs text-fg-muted!", children: t("discard") })) : null] })) : null, !editing && !c.status && (onReply || onReact || c.reactions?.length) ? (_jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1", children: [(c.reactions ?? [])
+                                .filter((r) => r.count > 0)
+                                .map((r) => {
+                                const opt = reactions.find((o) => o.key === r.key);
+                                if (!opt)
+                                    return null;
+                                const Icon = opt.icon;
+                                return (_jsxs("button", { type: "button", "aria-pressed": Boolean(r.reacted), "aria-label": t("reaction", { label: opt.label, count: r.count }), title: r.users?.join(", "), disabled: readOnly || !onReact, onClick: () => onReact?.(c.id, r.key, !r.reacted), className: cn("inline-flex h-6 cursor-pointer items-center gap-1 rounded-full border px-2 text-[11.5px] tabular transition-colors focus-ring disabled:cursor-default [&_svg]:size-3", r.reacted ? "border-[color-mix(in_srgb,var(--accent-ink)_35%,transparent)] bg-accent-soft text-accent-ink" : "border-line text-fg-muted hover:bg-hover"), children: [_jsx(Icon, { "aria-hidden": true, strokeWidth: 2.2 }), r.count] }, r.key));
+                            }), onReact && !readOnly ? _jsx(ReactionPicker, { reactions: reactions, current: c.reactions, onPick: (key, on) => onReact(c.id, key, on), t: t }) : null, onReply && !readOnly ? (_jsxs(Button, { size: "xs", variant: "ghost", onClick: onReply, className: "text-fg-muted", "aria-label": t("replyTo", { name: c.author.name }), children: [_jsx(CornerDownRight, { "aria-hidden": true }), t("reply")] })) : null] })) : null, _jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? t("linkCopied") : "" }), children] })] }));
+});
+function ReactionPicker({ reactions, current, onPick, t }) {
+    return (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(IconButton, { label: t("react"), size: "xs", tooltip: false, className: "size-6 rounded-full text-fg-subtle", children: _jsx(SmilePlus, {}) }) }), _jsx(DropdownMenuContent, { align: "start", className: "flex min-w-0 gap-0.5 p-1", children: reactions.map((r) => {
+                    const on = Boolean(current?.find((c) => c.key === r.key)?.reacted);
+                    const Icon = r.icon;
+                    return (_jsx(DropdownMenuItem, { "aria-label": r.label, title: r.label, onSelect: () => onPick(r.key, !on), className: cn("size-8 justify-center p-0 [&_svg]:size-4", on && "bg-accent-soft text-accent-ink"), children: _jsx(Icon, { "aria-hidden": true }) }, r.key));
+                }) })] }));
+}
+/**
+ * Threaded discussion on a record: editorial notes on a post, CRM notes on a deal, feedback on
+ * a candidate. One reply level, @mentions with a picker, attachments, reactions, edit / delete,
+ * resolve & collapse, and optimistic sending / failed states. ARIA feed: PageUp / PageDown
+ * move between comments.
+ *
+ * ```tsx
+ * <CommentThread
+ *   comments={comments}
+ *   currentUserId="u1"
+ *   mentionSources={[{ search: searchPeople }]}
+ *   onSubmit={({ body, parentId }) => api.comment(dealId, { body, parentId })}
+ *   onResolve={(id, resolved) => api.resolve(id, resolved)}
+ * />
+ * ```
+ */
+export const CommentThread = React.forwardRef(function CommentThread({ comments, currentUserId, currentUser, onSubmit, onEdit, onDelete, onResolve, onRetry, onDiscard, onReact, reactions, getLink, mentionSources, renderMention, onPreviewAttachment, allowAttachments, order = "oldest-first", layout = "thread", composer = "inline", readOnly, now, labels, className, ...props }, ref) {
+    const t = useLabels("comments", commentLabels, labels);
+    const compact = layout === "compact";
+    const [replyTo, setReplyTo] = React.useState(null);
+    const [shown, setShown] = React.useState(() => new Set());
+    const replyButtons = React.useRef(new Map());
+    const feedRef = React.useRef(null);
+    const { roots, replies } = React.useMemo(() => {
+        const byTime = (a, b) => a.createdAt.localeCompare(b.createdAt);
+        const replies = new Map();
+        const roots = [];
+        for (const c of comments) {
+            if (c.parentId)
+                replies.set(c.parentId, [...(replies.get(c.parentId) ?? []), c]);
+            else
+                roots.push(c);
+        }
+        replies.forEach((list) => list.sort(byTime));
+        roots.sort(byTime);
+        if (order === "newest-first")
+            roots.reverse();
+        // Deleted with no replies → hidden.
+        return { roots: roots.filter((r) => !r.deleted || (replies.get(r.id)?.length ?? 0) > 0), replies };
+    }, [comments, order]);
+    const canPost = Boolean(onSubmit) && !readOnly;
+    const onFeedKey = (e) => {
+        if (e.key !== "PageDown" && e.key !== "PageUp")
+            return;
+        const articles = Array.from(feedRef.current?.querySelectorAll(":scope > [data-slot=comment-group] > [data-slot=comment]") ?? []);
+        if (!articles.length)
+            return;
+        const current = articles.findIndex((a) => a.contains(document.activeElement));
+        const next = e.key === "PageDown" ? Math.min(articles.length - 1, current + 1) : Math.max(0, current - 1);
+        e.preventDefault();
+        articles[next]?.focus();
+    };
+    const shared = { currentUserId, onEdit, onDelete, onRetry, onDiscard, onReact, reactions, getLink, mentionSources, renderMention, onPreviewAttachment, readOnly, compact, now, labels };
+    const newComposer = canPost ? (_jsx(CommentComposer, { onSubmit: onSubmit, mentionSources: mentionSources, allowAttachments: allowAttachments, author: currentUser, compact: compact, variant: composer === "sticky-bottom" ? "sticky-bottom" : "inline", labels: labels })) : null;
+    return (_jsxs("div", { ref: ref, "data-slot": "comment-thread", "data-layout": layout, className: cn("flex flex-col", compact ? "gap-4" : "gap-5", className), ...props, children: [composer === "top" ? newComposer : null, roots.length === 0 ? (_jsxs("div", { "data-slot": "comment-empty", className: "flex flex-col items-start gap-1 border-s-2 border-line ps-3", children: [_jsx("p", { className: "text-sm font-medium text-fg", children: t("empty") }), canPost && mentionSources?.length ? _jsx("p", { className: "text-[13px] text-fg-muted", children: t("emptyHint") }) : null] })) : (_jsx("div", { ref: feedRef, role: "feed", "aria-label": t("thread"), "aria-busy": comments.some((c) => c.status === "sending") || undefined, onKeyDown: onFeedKey, className: cn("flex flex-col", compact ? "gap-4" : "gap-6"), children: roots.map((root, i) => {
+                    const kids = replies.get(root.id) ?? [];
+                    const collapsed = root.resolved && !shown.has(root.id);
+                    return (_jsx("div", { "data-slot": "comment-group", "data-resolved": root.resolved ? "" : undefined, className: "contents", children: _jsxs(Comment, { ...shared, comment: root, "aria-posinset": i + 1, "aria-setsize": roots.length, onResolve: onResolve, className: cn(root.resolved && "[&_[data-slot=comment-body]]:text-fg-muted"), onReply: canPost && !root.resolved
+                                ? () => {
+                                    setReplyTo(root.id);
+                                }
+                                : undefined, ref: (el) => {
+                                if (el)
+                                    replyButtons.current.set(root.id, el);
+                            }, children: [root.resolved && kids.length > 0 ? (_jsxs("button", { type: "button", "aria-expanded": !collapsed, onClick: () => setShown((s) => {
+                                        const n = new Set(s);
+                                        if (n.has(root.id))
+                                            n.delete(root.id);
+                                        else
+                                            n.add(root.id);
+                                        return n;
+                                    }), className: "mt-2 inline-flex cursor-pointer items-center gap-1.5 text-xs font-medium text-fg-muted hover:text-fg focus-ring", children: [collapsed ? t("show") : t("hide"), " \u00B7 ", t("replies", { count: kids.length })] })) : null, !collapsed && (kids.length > 0 || replyTo === root.id) ? (_jsxs("div", { "data-slot": "comment-replies", className: cn("mt-3 flex flex-col gap-3.5 border-s border-line", compact ? "ps-3" : "ps-4"), children: [kids
+                                            .filter((k) => !k.deleted)
+                                            .map((reply) => (_jsx(Comment, { ...shared, comment: reply, isReply: true, onReply: canPost && !root.resolved ? () => setReplyTo(root.id) : undefined }, reply.id))), replyTo === root.id && canPost ? (_jsx(CommentComposer, { parentId: root.id, mentionSources: mentionSources, allowAttachments: allowAttachments, compact: true, autoFocus: true, labels: labels, onCancel: () => {
+                                                setReplyTo(null);
+                                                replyButtons.current.get(root.id)?.focus();
+                                            }, onSubmit: async (d) => {
+                                                await onSubmit(d);
+                                                setReplyTo(null);
+                                                replyButtons.current.get(root.id)?.focus();
+                                            } })) : null] })) : null] }) }, root.id));
+                }) })), composer !== "top" ? newComposer : null] }));
+});

package/dist/components/context-menu.d.ts

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+import type { MenuEntry } from "../lib/variants.js";
+export declare const ContextMenuRoot: React.FC<ContextMenuPrimitive.ContextMenuProps>;
+export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
+export declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuContentProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> {
+    /** Minimum width: `sm` 180px, `md` 220px. Item size follows. */
+    size?: "sm" | "md";
+}
+/** The menu panel, opened at the pointer. Portals into the nearest `ThemeScope`. */
+export declare const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> {
+    icon?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Shortcut hint, e.g. `"mod+d"` (rendered with Kbd). Display only. */
+    shortcut?: string | string[];
+    badge?: React.ReactNode;
+    tone?: "default" | "danger";
+    inset?: boolean;
+}
+/** One action. Same API as `DropdownMenuItem`. */
+export declare const ContextMenuItem: React.ForwardRefExoticComponent<ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuCheckboxItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> {
+    shortcut?: string | string[];
+    description?: React.ReactNode;
+}
+export declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuRadioItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> {
+    shortcut?: string | string[];
+    description?: React.ReactNode;
+}
+export declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> {
+    icon?: React.ReactNode;
+    inset?: boolean;
+}
+export declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    size?: "sm" | "md";
+} & React.RefAttributes<HTMLDivElement>>;
+/** Renders `MenuEntry[]` as context-menu items (use inside your own `ContextMenuContent`). */
+export declare function ContextMenuEntries({ items }: {
+    items: MenuEntry[];
+}): React.JSX.Element;
+export interface ContextMenuProps extends Omit<React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>, "children"> {
+    /**
+     * Data-driven mode: the menu model (shared with `ActionMenu`). `children` is then the area
+     * that opens it on right-click / long-press / Shift+F10.
+     * Without `items`, `ContextMenu` is the compound root: put `ContextMenuTrigger` + `ContextMenuContent` inside.
+     */
+    items?: MenuEntry[];
+    children: React.ReactNode;
+    /** Let the native browser menu through (no custom menu). */
+    disabled?: boolean;
+    /** Content size in data-driven mode. */
+    size?: "sm" | "md";
+    /** Extra props for the content in data-driven mode. */
+    contentProps?: Omit<ContextMenuContentProps, "children">;
+}
+/**
+ * A right-click menu. Never the only way to an action: give every entry a keyboard/touch path too,
+ * e.g. the same `MenuEntry[]` in the row's `ActionMenu`.
+ *
+ * ```tsx
+ * <ContextMenu items={fileActions}>
+ *   <FileTile file={file} />
+ * </ContextMenu>
+ * ```
+ */
+export declare function ContextMenu({ items, children, disabled, size, contentProps, ...rootProps }: ContextMenuProps): React.JSX.Element;

package/dist/components/context-menu.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Layer } from "../lib/layer.js";
+import { MenuCheckIcon, MenuEntries, MenuItemContent, MenuRadioDot, MenuSizeContext, menuContentVariants, menuIndicatorClass, menuItemClass, menuLabelClass, menuSeparatorClass, useVisibleEntries, } from "../lib/menu.js";
+export const ContextMenuRoot = ContextMenuPrimitive.Root;
+export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+export const ContextMenuGroup = ContextMenuPrimitive.Group;
+export const ContextMenuSub = ContextMenuPrimitive.Sub;
+export const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+/** The menu panel, opened at the pointer. Portals into the nearest `ThemeScope`. */
+export const ContextMenuContent = React.forwardRef(function ContextMenuContent({ className, size = "md", collisionPadding = 12, ...props }, ref) {
+    const container = usePortalContainer();
+    return (_jsx(ContextMenuPrimitive.Portal, { container: container, children: _jsx(MenuSizeContext.Provider, { value: size, children: _jsx(Layer, { asChild: true, children: _jsx(ContextMenuPrimitive.Content, { ref: ref, "data-slot": "context-menu-content", collisionPadding: collisionPadding, className: cn(menuContentVariants({ size }), "max-h-(--radix-context-menu-content-available-height)", className), ...props }) }) }) }));
+});
+/** One action. Same API as `DropdownMenuItem`. */
+export const ContextMenuItem = React.forwardRef(function ContextMenuItem({ className, icon, description, shortcut, badge, tone = "default", inset, asChild, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsx(ContextMenuPrimitive.Item, { ref: ref, "data-slot": "context-menu-item", "data-tone": tone, asChild: asChild, className: menuItemClass({ size, tone, inset, className }), ...props, children: asChild ? (children) : (_jsx(MenuItemContent, { icon: icon, description: description, shortcut: shortcut, badge: badge, children: children })) }));
+});
+export const ContextMenuCheckboxItem = React.forwardRef(function ContextMenuCheckboxItem({ className, shortcut, description, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsxs(ContextMenuPrimitive.CheckboxItem, { ref: ref, "data-slot": "context-menu-checkbox-item", className: menuItemClass({ size, inset: true, className }), ...props, children: [_jsx("span", { className: menuIndicatorClass, children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(MenuCheckIcon, {}) }) }), _jsx(MenuItemContent, { shortcut: shortcut, description: description, children: children })] }));
+});
+export const ContextMenuRadioItem = React.forwardRef(function ContextMenuRadioItem({ className, shortcut, description, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsxs(ContextMenuPrimitive.RadioItem, { ref: ref, "data-slot": "context-menu-radio-item", className: menuItemClass({ size, inset: true, className }), ...props, children: [_jsx("span", { className: menuIndicatorClass, children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(MenuRadioDot, {}) }) }), _jsx(MenuItemContent, { shortcut: shortcut, description: description, children: children })] }));
+});
+export const ContextMenuLabel = React.forwardRef(function ContextMenuLabel({ className, inset, ...props }, ref) {
+    return _jsx(ContextMenuPrimitive.Label, { ref: ref, "data-slot": "context-menu-label", className: cn(menuLabelClass, inset && "ps-8", className), ...props });
+});
+export const ContextMenuSeparator = React.forwardRef(function ContextMenuSeparator({ className, ...props }, ref) {
+    return _jsx(ContextMenuPrimitive.Separator, { ref: ref, "data-slot": "context-menu-separator", className: cn(menuSeparatorClass, className), ...props });
+});
+export const ContextMenuSubTrigger = React.forwardRef(function ContextMenuSubTrigger({ className, icon, inset, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsx(ContextMenuPrimitive.SubTrigger, { ref: ref, "data-slot": "context-menu-sub-trigger", className: menuItemClass({ size, inset, className: cn("data-[state=open]:bg-hover", className) }), ...props, children: _jsx(MenuItemContent, { icon: icon, chevron: true, children: children }) }));
+});
+export const ContextMenuSubContent = React.forwardRef(function ContextMenuSubContent({ className, size: sizeProp, sideOffset = 4, collisionPadding = 12, ...props }, ref) {
+    const container = usePortalContainer();
+    const parentSize = React.useContext(MenuSizeContext);
+    const size = sizeProp ?? parentSize;
+    return (_jsx(ContextMenuPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsx(ContextMenuPrimitive.SubContent, { ref: ref, "data-slot": "context-menu-sub-content", sideOffset: sideOffset, alignOffset: -5, collisionPadding: collisionPadding, className: cn(menuContentVariants({ size }), "max-h-(--radix-context-menu-content-available-height)", className), ...props }) }) }));
+});
+/* ------------------------------------------------------------------ */
+/* Data-driven root                                                    */
+/* ------------------------------------------------------------------ */
+const contextParts = {
+    Item: ContextMenuItem,
+    CheckboxItem: ContextMenuCheckboxItem,
+    RadioGroup: ContextMenuRadioGroup,
+    RadioItem: ContextMenuRadioItem,
+    Label: ContextMenuLabel,
+    Separator: ContextMenuSeparator,
+    Group: ContextMenuGroup,
+    Sub: ContextMenuSub,
+    SubTrigger: ContextMenuSubTrigger,
+    SubContent: ContextMenuSubContent,
+};
+/** Renders `MenuEntry[]` as context-menu items (use inside your own `ContextMenuContent`). */
+export function ContextMenuEntries({ items }) {
+    const visible = useVisibleEntries(items);
+    return _jsx(MenuEntries, { entries: visible, parts: contextParts });
+}
+/**
+ * A right-click menu. Never the only way to an action: give every entry a keyboard/touch path too,
+ * e.g. the same `MenuEntry[]` in the row's `ActionMenu`.
+ *
+ * ```tsx
+ * <ContextMenu items={fileActions}>
+ *   <FileTile file={file} />
+ * </ContextMenu>
+ * ```
+ */
+export function ContextMenu({ items, children, disabled, size, contentProps, ...rootProps }) {
+    if (!items)
+        return _jsx(ContextMenuPrimitive.Root, { ...rootProps, children: children });
+    return (_jsxs(ContextMenuPrimitive.Root, { ...rootProps, children: [_jsx(ContextMenuPrimitive.Trigger, { asChild: true, disabled: disabled, children: children }), _jsx(ContextMenuContent, { size: size, ...contentProps, children: _jsx(ContextMenuEntries, { items: items }) })] }));
+}