@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/comment-thread/comment-thread.js

@@ -0,0 +1,343 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { Check, ChevronRight, CornerDownRight, RotateCcw, SmilePlus, X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./comment-thread.module.css";
+const DEFAULT_LABELS = {
+    thread: "Comment thread",
+    commentCount: count => `${count} ${count === 1 ? "comment" : "comments"}`,
+    peopleCount: count => `${count} ${count === 1 ? "person" : "people"}`,
+    resolve: "Resolve",
+    resolved: "Resolved",
+    reopen: "Reopen",
+    empty: "No comments yet. Start the conversation below.",
+    reply: "Reply",
+    edit: "Edit",
+    delete: "Delete",
+    cancel: "Cancel",
+    send: "Send",
+    save: "Save",
+    editComment: "Edit comment",
+    edited: "edited",
+    deleteConfirm: "Delete this comment?",
+    deletedText: "This comment was deleted",
+    deletedComment: "Deleted comment",
+    replyingTo: name => `Replying to ${name}`,
+    cancelReply: "Cancel reply",
+    showReplies: count => `Show ${count} ${count === 1 ? "reply" : "replies"}`,
+    hideReplies: "Hide replies",
+    addReaction: "Add reaction",
+    closeReactions: "Close reactions",
+    reactions: "Reactions",
+    reactWith: emoji => `React with ${emoji}`,
+    reactionCount: (emoji, count, includesYou) => `${emoji} ${count}${includesYou ? ", including you" : ""}`,
+    mentions: "People",
+};
+/** A key passed as undefined keeps its default too. */
+const withDefaults = (defaults, given) => ({ ...defaults, ...Object.fromEntries(Object.entries(given ?? {}).filter(([, value]) => value !== undefined)) });
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+const physical = (visualDuration, bounce) => {
+    const root = 2 * Math.PI / (visualDuration * 1.2);
+    return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, mass: 1 };
+};
+const HEIGHT = physical(.42, 0);
+const DEFAULT_REACTIONS = ["👍", "❤️", "🎉", "👀", "🚀", "✅"];
+const subscribe = () => () => { };
+function useReducedFlag() {
+    const hydrated = useSyncExternalStore(subscribe, () => true, () => false);
+    return !!useReducedMotion() && hydrated;
+}
+/* Tree helpers. Every change returns a new tree so controlled parents can store it as is. */
+const mapTree = (list, id, fn) => list.flatMap(comment => {
+    if (comment.id === id) {
+        const next = fn(comment);
+        return next ? [next] : [];
+    }
+    return comment.replies?.length ? [{ ...comment, replies: mapTree(comment.replies, id, fn) }] : [comment];
+});
+const countTree = (list) => list.reduce((sum, comment) => sum + (comment.deleted ? 0 : 1) + countTree(comment.replies ?? []), 0);
+const authorsOf = (list, into = new Map()) => {
+    list.forEach(comment => { if (!comment.deleted)
+        into.set(comment.author.id, comment.author); authorsOf(comment.replies ?? [], into); });
+    return into;
+};
+/** Path of ids from the root to `id`. */
+const pathTo = (list, id, trail = []) => {
+    for (const comment of list) {
+        if (comment.id === id)
+            return [...trail, id];
+        const found = pathTo(comment.replies ?? [], id, [...trail, comment.id]);
+        if (found)
+            return found;
+    }
+    return null;
+};
+const find = (list, id) => {
+    for (const comment of list) {
+        if (comment.id === id)
+            return comment;
+        const found = find(comment.replies ?? [], id);
+        if (found)
+            return found;
+    }
+    return null;
+};
+/** Wraps the first `part` inside `text`, so a translated sentence keeps its highlighted name wherever the language puts it. */
+const highlight = (text, part, className) => {
+    const at = part ? text.indexOf(part) : -1;
+    return at < 0 ? text : _jsxs(_Fragment, { children: [text.slice(0, at), _jsx("span", { className: className, children: part }), text.slice(at + part.length)] });
+};
+const initials = (name) => name.split(/\s+/).map(part => part[0]).slice(0, 2).join("").toUpperCase();
+let serial = 0;
+const newId = () => `c-${Date.now().toString(36)}-${(serial++).toString(36)}`;
+function Avatar({ author, size = 28 }) {
+    return author.avatar
+        // eslint-disable-next-line @next/next/no-img-element
+        ? _jsx("img", { className: styles.avatar, src: author.avatar, alt: "", width: size, height: size, style: { width: size, height: size } })
+        : _jsx("span", { className: styles.avatar, style: { width: size, height: size, fontSize: Math.round(size * .38) }, "aria-hidden": "true", children: initials(author.name) });
+}
+/** Highlights "@Full Name" for known people. */
+function Body({ text, people }) {
+    const parts = useMemo(() => {
+        const names = people.map(person => person.name).sort((a, b) => b.length - a.length).map(name => name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+        if (!names.length)
+            return [text];
+        return text.split(new RegExp(`(@(?:${names.join("|")}))`, "g"));
+    }, [people, text]);
+    return _jsx("p", { className: styles.body, children: parts.map((part, index) => index % 2 ? _jsx("span", { className: styles.mention, children: part }, index) : part) });
+}
+const roll = {
+    hidden: (dir) => ({ y: `${dir * 70}%`, opacity: 0 }),
+    shown: { y: 0, opacity: 1 },
+    gone: (dir) => ({ y: `${dir * -70}%`, opacity: 0 }),
+};
+const rollReduced = { hidden: { opacity: 0 }, shown: { opacity: 1 }, gone: { opacity: 0 } };
+/** Rolls a count up or down in place. */
+function Count({ value, reduced }) {
+    const [last, setLast] = useState(value);
+    const [dir, setDir] = useState(1);
+    if (value !== last) {
+        setDir(value > last ? 1 : -1);
+        setLast(value);
+    }
+    return _jsx("span", { className: styles.count, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: dir, children: _jsx(motion.span, { custom: dir, variants: reduced ? rollReduced : roll, initial: "hidden", animate: "shown", exit: "gone", transition: reduced ? { duration: 0 } : motionTokens.spring.snappy, children: value }, value) }) });
+}
+/** Follows its content's height exactly, except when `morphKey` changes: then it springs, so the thread and the resolved chip morph into each other. */
+function AutoHeight({ children, reduced, morphKey }) {
+    const inner = useRef(null);
+    const height = useMotionValue(0);
+    const [measured, setMeasured] = useState(false);
+    const morphing = useRef(false);
+    const lastKey = useRef(morphKey);
+    useLayoutEffect(() => {
+        if (lastKey.current !== morphKey) {
+            lastKey.current = morphKey;
+            morphing.current = true;
+        }
+    }, [morphKey]);
+    useLayoutEffect(() => {
+        const node = inner.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        // The border box keeps subpixel line heights, so the frame never clips a fraction of the last line.
+        const observer = new ResizeObserver(([entry]) => {
+            const next = entry?.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight;
+            if (morphing.current && !reduced) {
+                morphing.current = false;
+                animate(height, next, HEIGHT);
+                return;
+            }
+            if (height.isAnimating()) {
+                animate(height, next, HEIGHT);
+                return;
+            }
+            height.jump(next);
+            setMeasured(true);
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [height, reduced]);
+    return _jsx(motion.div, { className: styles.autoHeight, style: { height: measured ? height : "auto" }, children: _jsx("div", { ref: inner, className: styles.autoInner, children: children }) });
+}
+/** A growing text field with @mention suggestions. ⌘ or Ctrl + Enter sends; Escape cancels. */
+function Composer({ people, initial = "", placeholder, submitLabel, autoFocus, focusKey, onSubmit, onCancel, leading, compact, cancelLabel, mentionsLabel }) {
+    const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const reduced = useReducedFlag();
+    const field = useRef(null);
+    const [text, setText] = useState(initial);
+    const [query, setQuery] = useState(null);
+    const [active, setActive] = useState(0);
+    const suggestions = useMemo(() => {
+        if (!query)
+            return [];
+        const term = query.term.toLowerCase();
+        return people.filter(person => person.name.toLowerCase().split(" ").some(part => part.startsWith(term)) || person.name.toLowerCase().startsWith(term)).slice(0, 5);
+    }, [people, query]);
+    const open = !!query && suggestions.length > 0;
+    useEffect(() => {
+        if (!autoFocus && !focusKey)
+            return;
+        const node = field.current;
+        if (!node)
+            return;
+        node.focus({ preventScroll: true });
+        node.setSelectionRange(node.value.length, node.value.length);
+    }, [autoFocus, focusKey]);
+    const readQuery = (value, caret) => {
+        const match = /(^|\s)@([\p{L}]*)$/u.exec(value.slice(0, caret));
+        setQuery(match ? { start: caret - match[2].length - 1, term: match[2] } : null);
+        setActive(0);
+    };
+    const insert = (person) => {
+        const node = field.current;
+        if (!node || !query)
+            return;
+        const caret = node.selectionStart ?? text.length;
+        const next = `${text.slice(0, query.start)}@${person.name} ${text.slice(caret)}`;
+        const at = query.start + person.name.length + 2;
+        setText(next);
+        setQuery(null);
+        requestAnimationFrame(() => { node.focus(); node.setSelectionRange(at, at); });
+    };
+    const send = () => {
+        const body = text.trim();
+        if (!body)
+            return;
+        onSubmit(body);
+        setText("");
+        setQuery(null);
+    };
+    const onKeyDown = (event) => {
+        if (open) {
+            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                event.preventDefault();
+                setActive(index => (index + (event.key === "ArrowDown" ? 1 : -1) + suggestions.length) % suggestions.length);
+                return;
+            }
+            if (event.key === "Enter" || event.key === "Tab") {
+                event.preventDefault();
+                insert(suggestions[active]);
+                return;
+            }
+            if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                setQuery(null);
+                return;
+            }
+        }
+        if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            send();
+            return;
+        }
+        if (event.key === "Escape" && onCancel) {
+            event.preventDefault();
+            event.stopPropagation();
+            onCancel();
+        }
+    };
+    return _jsxs("div", { className: styles.composer, "data-compact": compact || undefined, children: [leading, _jsxs("div", { className: styles.fieldWrap, children: [_jsx("textarea", { ref: field, className: styles.field, value: text, placeholder: placeholder, rows: 1, "aria-label": placeholder, role: "combobox", "aria-autocomplete": "list", "aria-expanded": open, "aria-controls": `${uid}-people`, "aria-activedescendant": open ? `${uid}-person-${active}` : undefined, onChange: event => { setText(event.target.value); readQuery(event.target.value, event.target.selectionStart); }, onSelect: event => readQuery(event.currentTarget.value, event.currentTarget.selectionStart), onBlur: () => setQuery(null), onKeyDown: onKeyDown }), _jsx(AnimatePresence, { children: open && _jsx(motion.ul, { id: `${uid}-people`, role: "listbox", "aria-label": mentionsLabel, className: styles.suggestions, initial: reduced ? { opacity: 0 } : { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, height: 0, transition: { duration: motionTokens.duration.instant, ease: standard } }, transition: reduced ? { duration: 0 } : { height: HEIGHT, opacity: { duration: motionTokens.duration.fast, ease: enter } }, children: suggestions.map((person, index) => _jsxs("li", { id: `${uid}-person-${index}`, role: "option", "aria-selected": index === active, className: styles.suggestion, onPointerDown: event => event.preventDefault(), onPointerMove: () => setActive(index), onClick: () => insert(person), children: [_jsx(Avatar, { author: person, size: 20 }), person.name] }, person.id)) }, "people") })] }), _jsxs("div", { className: styles.composerActions, children: [onCancel && _jsx("button", { type: "button", className: styles.ghost, onClick: onCancel, children: cancelLabel }), _jsx("button", { type: "button", className: styles.send, disabled: !text.trim() || text.trim() === initial.trim(), onClick: send, children: submitLabel })] })] });
+}
+export const CommentThread = forwardRef(function CommentThread({ comments, defaultComments = [], onCommentsChange, currentUser, people, resolved, defaultResolved = false, onResolvedChange, title, reactions = DEFAULT_REACTIONS, placeholder = "Reply, or @mention someone", maxDepth = 2, nowLabel = "Just now", labels, className, }, forwardedRef) {
+    const t = withDefaults(DEFAULT_LABELS, labels);
+    const reduced = useReducedFlag();
+    const rootRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    const [internal, setInternal] = useState(defaultComments);
+    const list = comments ?? internal;
+    const [internalResolved, setInternalResolved] = useState(defaultResolved);
+    const isResolved = resolved ?? internalResolved;
+    const [ui, setUi] = useState({ editing: null, confirming: null, picker: null, collapsed: {} });
+    const [replyTo, setReplyTo] = useState(null);
+    const [focusKey, setFocusKey] = useState(0);
+    const mentionable = useMemo(() => people ?? [...authorsOf(list, new Map([[currentUser.id, currentUser]])).values()], [currentUser, list, people]);
+    const total = countTree(list);
+    const participants = useMemo(() => [...authorsOf(list).values()], [list]);
+    const commit = useCallback((next, event) => {
+        if (comments === undefined)
+            setInternal(next);
+        onCommentsChange?.(next, event);
+    }, [comments, onCommentsChange]);
+    const setResolved = (next) => {
+        if (resolved === undefined)
+            setInternalResolved(next);
+        onResolvedChange?.(next);
+        setUi(current => ({ ...current, editing: null, confirming: null, picker: null }));
+        setReplyTo(null);
+        requestAnimationFrame(() => rootRef.current?.querySelector(next ? "[data-reopen]" : "[data-resolve]")?.focus({ preventScroll: true }));
+    };
+    const addReply = (body) => {
+        const comment = { id: newId(), author: currentUser, body, createdAt: nowLabel, reactions: [] };
+        let parentId = null;
+        if (replyTo) {
+            const path = pathTo(list, replyTo.id) ?? [];
+            parentId = path[Math.min(path.length, maxDepth) - 1] ?? null;
+        }
+        const next = parentId ? mapTree(list, parentId, parent => ({ ...parent, replies: [...(parent.replies ?? []), comment] })) : [...list, comment];
+        if (parentId)
+            setUi(current => ({ ...current, collapsed: { ...current.collapsed, [parentId]: false } }));
+        commit(next, { type: "reply", comment, parentId });
+        setReplyTo(null);
+    };
+    const edit = (id, body) => {
+        commit(mapTree(list, id, comment => ({ ...comment, body, edited: true })), { type: "edit", id, body });
+        setUi(current => ({ ...current, editing: null }));
+    };
+    const remove = (id) => {
+        commit(mapTree(list, id, comment => comment.replies?.length ? { ...comment, deleted: true, body: "", reactions: [] } : null), { type: "delete", id });
+        setUi(current => ({ ...current, confirming: null }));
+        if (replyTo?.id === id)
+            setReplyTo(null);
+    };
+    const react = (id, emoji) => {
+        const target = find(list, id);
+        if (!target)
+            return;
+        const existing = target.reactions?.find(reaction => reaction.emoji === emoji);
+        const added = !existing?.users.includes(currentUser.id);
+        const nextReactions = existing
+            ? (target.reactions ?? []).map(reaction => reaction.emoji !== emoji ? reaction : { ...reaction, users: added ? [...reaction.users, currentUser.id] : reaction.users.filter(user => user !== currentUser.id) }).filter(reaction => reaction.users.length)
+            : [...(target.reactions ?? []), { emoji, users: [currentUser.id] }];
+        commit(mapTree(list, id, comment => ({ ...comment, reactions: nextReactions })), { type: "react", id, emoji, added });
+        setUi(current => ({ ...current, picker: null }));
+    };
+    const grow = reduced
+        ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: motionTokens.duration.instant } }
+        : { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { height: HEIGHT, opacity: { duration: motionTokens.duration.standard, ease: enter } } };
+    const swap = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: reduced ? 0 : motionTokens.duration.instant, ease: standard } }, transition: { duration: reduced ? 0 : motionTokens.duration.fast, ease: enter } };
+    const renderComment = (comment, depth) => {
+        const mine = comment.author.id === currentUser.id;
+        const replies = comment.replies ?? [];
+        const collapsed = !!ui.collapsed[comment.id];
+        const editing = ui.editing === comment.id, confirming = ui.confirming === comment.id, picking = ui.picker === comment.id;
+        return _jsxs(motion.li, { className: styles.item, ...grow, children: [_jsxs("article", { className: styles.comment, "aria-label": comment.deleted ? t.deletedComment : `${comment.author.name}, ${comment.createdAt}`, children: [comment.deleted ? _jsx("span", { className: styles.deletedDot, "aria-hidden": "true" }) : _jsx(Avatar, { author: comment.author }), _jsxs("div", { className: styles.main, children: [comment.deleted
+                                    ? _jsx("p", { className: styles.deleted, children: t.deletedText })
+                                    : _jsxs(_Fragment, { children: [_jsxs("header", { className: styles.meta, children: [_jsx("span", { className: styles.name, children: comment.author.name }), _jsxs("span", { className: styles.time, children: [comment.createdAt, comment.edited && ` · ${t.edited}`] })] }), _jsx(AutoHeight, { reduced: reduced, morphKey: editing ? "edit" : confirming ? "confirm" : picking ? "picker" : "view", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: editing
+                                                        ? _jsx(motion.div, { ...swap, children: _jsx(Composer, { people: mentionable, initial: comment.body, placeholder: t.editComment, submitLabel: t.save, cancelLabel: t.cancel, mentionsLabel: t.mentions, autoFocus: true, compact: true, onSubmit: body => edit(comment.id, body), onCancel: () => setUi(current => ({ ...current, editing: null })) }) }, "edit")
+                                                        : _jsxs(motion.div, { ...swap, children: [_jsx(Body, { text: comment.body, people: mentionable }), _jsxs("div", { className: styles.footer, children: [(comment.reactions ?? []).length > 0 && _jsx("div", { className: styles.reactions, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: (comment.reactions ?? []).map(reaction => {
+                                                                                    const pressed = reaction.users.includes(currentUser.id);
+                                                                                    return _jsxs(motion.button, { type: "button", layout: !reduced, className: styles.reaction, "aria-pressed": pressed, "aria-label": t.reactionCount(reaction.emoji, reaction.users.length, pressed), onClick: () => react(comment.id, reaction.emoji), initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .7 }, animate: { opacity: 1, scale: 1 }, exit: reduced ? { opacity: 0 } : { opacity: 0, scale: .7 }, transition: reduced ? { duration: 0 } : motionTokens.spring.snappy, children: [_jsx("span", { "aria-hidden": "true", children: reaction.emoji }), _jsx(Count, { value: reaction.users.length, reduced: reduced })] }, reaction.emoji);
+                                                                                }) }) }), _jsx(AnimatePresence, { mode: "wait", initial: false, children: confirming
+                                                                                ? _jsxs(motion.div, { className: styles.actions, "data-open": "", initial: reduced ? { opacity: 0 } : { opacity: 0, x: 6 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, transition: { duration: reduced ? 0 : motionTokens.duration.instant, ease: standard } }, transition: { duration: reduced ? 0 : motionTokens.duration.fast, ease: enter }, onKeyDown: event => { if (event.key === "Escape") {
+                                                                                        event.stopPropagation();
+                                                                                        setUi(current => ({ ...current, confirming: null }));
+                                                                                    } }, children: [_jsx("span", { className: styles.prompt, children: t.deleteConfirm }), _jsx("button", { type: "button", className: styles.action, onClick: () => setUi(current => ({ ...current, confirming: null })), children: t.cancel }), _jsx("button", { type: "button", className: styles.action, "data-tone": "danger", autoFocus: true, onClick: () => remove(comment.id), children: t.delete })] }, "confirm")
+                                                                                : picking
+                                                                                    ? _jsxs(motion.div, { role: "group", "aria-label": t.reactions, className: styles.actions, "data-open": "", onKeyDown: event => { if (event.key === "Escape") {
+                                                                                            event.stopPropagation();
+                                                                                            setUi(current => ({ ...current, picker: null }));
+                                                                                        } }, initial: reduced ? { opacity: 0 } : { opacity: 0, x: -6 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, transition: { duration: reduced ? 0 : motionTokens.duration.instant, ease: standard } }, transition: { duration: reduced ? 0 : motionTokens.duration.fast, ease: enter }, children: [reactions.map((emoji, index) => _jsx(motion.button, { type: "button", className: styles.emoji, autoFocus: index === 0, "aria-label": t.reactWith(emoji), "aria-pressed": !!comment.reactions?.find(reaction => reaction.emoji === emoji)?.users.includes(currentUser.id), onClick: () => react(comment.id, emoji), initial: reduced ? false : { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, transition: reduced ? { duration: 0 } : { ...motionTokens.spring.snappy, delay: index * motionTokens.stagger.item }, children: emoji }, emoji)), _jsx("button", { type: "button", className: styles.iconAction, "aria-label": t.closeReactions, onClick: () => setUi(current => ({ ...current, picker: null })), children: _jsx(X, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) })] }, "picker")
+                                                                                    : _jsxs(motion.div, { className: styles.actions, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: reduced ? 0 : motionTokens.duration.instant, ease: standard }, children: [_jsx("button", { type: "button", className: styles.iconAction, "aria-label": t.addReaction, onClick: () => setUi(current => ({ ...current, picker: comment.id, confirming: null })), children: _jsx(SmilePlus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: styles.action, onClick: () => { setReplyTo({ id: comment.id, name: comment.author.name }); setFocusKey(key => key + 1); }, children: t.reply }), mine && _jsx("button", { type: "button", className: styles.action, onClick: () => setUi(current => ({ ...current, editing: comment.id, confirming: null, picker: null })), children: t.edit }), mine && _jsx("button", { type: "button", className: styles.action, onClick: () => setUi(current => ({ ...current, confirming: comment.id, editing: null, picker: null })), children: t.delete })] }, "actions") })] })] }, "view") }) })] }), replies.length > 0 && _jsxs("button", { type: "button", className: styles.toggle, "aria-expanded": !collapsed, onClick: () => setUi(current => ({ ...current, collapsed: { ...current.collapsed, [comment.id]: !collapsed } })), children: [_jsx(motion.span, { className: styles.toggleIcon, initial: false, animate: { rotate: collapsed ? 0 : 90 }, transition: reduced ? { duration: 0 } : motionTokens.spring.snappy, "aria-hidden": "true", children: _jsx(ChevronRight, { size: 13, strokeWidth: 1.75 }) }), collapsed ? t.showReplies(countTree(replies)) : t.hideReplies, collapsed && _jsx("span", { className: styles.stack, "aria-hidden": "true", children: [...authorsOf(replies).values()].slice(0, 3).map(author => _jsx(Avatar, { author: author, size: 18 }, author.id)) })] })] })] }), _jsx(AnimatePresence, { initial: false, children: replies.length > 0 && !collapsed && _jsx(motion.div, { className: styles.repliesWrap, ...grow, children: _jsx("ul", { className: styles.replies, "data-depth": depth + 1, children: _jsx(AnimatePresence, { initial: false, children: replies.map(reply => renderComment(reply, depth + 1)) }) }) }, "replies") })] }, comment.id);
+    };
+    const face = { initial: reduced ? { opacity: 0 } : { opacity: 0, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, filter: "blur(0px)" }, exit: { opacity: 0, filter: reduced ? "blur(0px)" : `blur(${motionTokens.blur.subtle}px)` }, transition: { duration: reduced ? 0 : motionTokens.duration.standard, ease: enter } };
+    return _jsx("section", { ref: rootRef, className: [styles.root, className].filter(Boolean).join(" "), "data-resolved": isResolved || undefined, "aria-label": t.thread, children: _jsx(AutoHeight, { reduced: reduced, morphKey: isResolved ? "resolved" : "thread", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: isResolved
+                    ? _jsxs(motion.div, { className: styles.resolved, ...face, children: [_jsx("span", { className: styles.resolvedIcon, "aria-hidden": "true", children: _jsx(Check, { size: 14, strokeWidth: 2 }) }), _jsxs("span", { className: styles.resolvedText, children: [_jsxs("span", { className: styles.resolvedTitle, children: [t.resolved, title ? _jsxs(_Fragment, { children: [" \u00B7 ", _jsx("span", { className: styles.resolvedSubject, children: title })] }) : null] }), _jsxs("span", { className: styles.resolvedMeta, children: [t.commentCount(total), " \u00B7 ", t.peopleCount(participants.length)] })] }), _jsx("span", { className: styles.stack, "aria-hidden": "true", children: participants.slice(0, 3).map(author => _jsx(Avatar, { author: author, size: 22 }, author.id)) }), _jsxs("button", { type: "button", className: styles.reopen, "data-reopen": true, onClick: () => setResolved(false), children: [_jsx(RotateCcw, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), t.reopen] })] }, "resolved")
+                    : _jsxs(motion.div, { className: styles.thread, ...face, children: [_jsxs("header", { className: styles.header, children: [_jsxs("div", { className: styles.heading, children: [title && _jsx("h3", { className: styles.title, children: title }), _jsx("span", { className: styles.subtitle, children: t.commentCount(total) })] }), _jsxs("button", { type: "button", className: styles.resolve, "data-resolve": true, disabled: !total, onClick: () => setResolved(true), children: [_jsx(Check, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.resolve] })] }), list.length > 0
+                                ? _jsx("ul", { className: styles.list, children: _jsx(AnimatePresence, { initial: false, children: list.map(comment => renderComment(comment, 0)) }) })
+                                : _jsx("p", { className: styles.empty, children: t.empty }), _jsxs("div", { className: styles.composerArea, children: [_jsx(AnimatePresence, { initial: false, children: replyTo && _jsx(motion.div, { className: styles.replying, ...grow, children: _jsxs("span", { className: styles.replyingInner, children: [_jsx(CornerDownRight, { size: 13, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("span", { children: highlight(t.replyingTo(replyTo.name), replyTo.name, styles.replyingName) }), _jsx("button", { type: "button", className: styles.iconAction, "aria-label": t.cancelReply, onClick: () => setReplyTo(null), children: _jsx(X, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) })] }) }, "replying") }), _jsx(Composer, { people: mentionable, placeholder: placeholder, submitLabel: t.send, cancelLabel: t.cancel, mentionsLabel: t.mentions, focusKey: focusKey, onSubmit: addReply, onCancel: replyTo ? () => setReplyTo(null) : undefined, leading: _jsx(Avatar, { author: currentUser }) })] })] }, "thread") }) }) });
+});
+export default CommentThread;

package/components/comment-thread/comment-thread.module.css

@@ -0,0 +1,195 @@
+.root {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-container); corner-shape: var(--corner-shape);
+  background: var(--surface);
+  color: var(--foreground);
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  letter-spacing: var(--tracking-body);
+  line-height: var(--leading-body);
+  transition: border-radius var(--duration-spring) var(--ease-spring);
+}
+.root *, .root *::before, .root *::after { box-sizing: border-box; }
+.root[data-resolved] { border-radius: var(--radius-container); corner-shape: var(--corner-shape); }
+.autoHeight { overflow: hidden; border-radius: inherit; corner-shape: inherit; }
+.autoInner { position: relative; }
+
+/* Header */
+.thread { display: grid; }
+.header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 8px 18px; }
+.heading { display: grid; min-width: 0; }
+.title { margin: 0; overflow: hidden; font-size: var(--text-sm); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
+.subtitle { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.resolve,
+.reopen {
+  display: inline-flex;
+  height: 32px;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px 0 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full); corner-shape: round;
+  background: var(--surface);
+  color: var(--foreground);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
+}
+.resolve > svg { color: var(--success); }
+.resolve:active:not(:disabled), .reopen:active { transform: scale(.97); }
+.resolve:disabled { opacity: .45; cursor: default; }
+
+/* Comments */
+.list, .replies { display: grid; margin: 0; padding: 0; list-style: none; }
+.list { padding: 0 8px; }
+.item { overflow: clip; overflow-clip-margin: 4px; }
+.repliesWrap { overflow: clip; }
+/* Replies hang from a quiet rail under their parent's avatar. */
+.replies { position: relative; margin-left: 24px; padding-left: 12px; }
+.replies::before { content: ""; position: absolute; top: 2px; bottom: 14px; left: 0; width: 1px; background: var(--border); }
+
+.comment { display: flex; gap: 10px; padding: 10px; border-radius: var(--radius-control); corner-shape: var(--corner-shape); }
+.avatar { display: inline-grid; flex: none; place-items: center; overflow: hidden; border-radius: 50%; corner-shape: round; background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; object-fit: cover; }
+.deletedDot { width: 28px; height: 28px; flex: none; border: 1px dashed var(--border-strong); border-radius: 50%; corner-shape: round; }
+.main { display: grid; min-width: 0; flex: 1; gap: 2px; }
+.meta { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
+.name { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
+.time { flex: none; color: var(--text-muted); font-size: var(--text-xs); }
+.body { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; white-space: pre-wrap; text-wrap: pretty; }
+.mention { color: var(--accent-strong); font-weight: 500; }
+.deleted { margin: 4px 0 0; color: var(--text-muted); font-style: italic; }
+
+.footer { display: flex; min-height: 30px; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
+.reactions { display: flex; flex-wrap: wrap; gap: 4px; }
+.reaction {
+  display: inline-flex;
+  height: 26px;
+  align-items: center;
+  gap: 5px;
+  padding: 0 9px 0 7px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full); corner-shape: round;
+  background: var(--surface);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+}
+.reaction[aria-pressed="true"] { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); background: var(--accent-subtle); color: var(--foreground); }
+.reaction:active { transform: scale(.94); }
+.count { position: relative; display: inline-grid; min-width: 1ch; overflow: hidden; font-variant-numeric: tabular-nums; }
+.count > span { grid-area: 1 / 1; }
+
+/* Actions sit quietly after the reactions and come forward on hover or focus; touch screens always show them. */
+.actions { display: flex; min-height: 28px; flex-wrap: wrap; align-items: center; gap: 2px; transition: opacity var(--duration-fast) var(--ease-standard); }
+.action,
+.iconAction {
+  display: inline-flex;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  border: 0;
+  border-radius: var(--radius-full); corner-shape: round;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
+}
+.iconAction { width: 28px; padding: 0; }
+.action[data-tone="danger"] { color: var(--danger); }
+.prompt { margin-right: 4px; color: var(--foreground); font-size: var(--text-xs); }
+.emoji { display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 0; border-radius: 50%; corner-shape: round; background: transparent; cursor: pointer; font-size: var(--text-base); line-height: 1; transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+.emoji[aria-pressed="true"] { background: var(--accent-subtle); }
+.emoji:active { transform: scale(.88); }
+
+.toggle { display: inline-flex; width: fit-content; height: 28px; align-items: center; gap: 6px; margin: 2px 0 0 -6px; padding: 0 8px 0 6px; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 500; transition: background-color var(--duration-fast) var(--ease-standard); }
+.toggleIcon { display: grid; place-items: center; color: var(--text-muted); }
+.stack { display: inline-flex; flex: none; padding-left: 4px; }
+.stack > * { margin-left: -5px; box-shadow: 0 0 0 2px var(--surface); }
+
+.empty { margin: 0; padding: 8px 18px 16px; color: var(--text-muted); }
+
+/* Composer */
+.composerArea { display: grid; margin-top: 4px; padding: 10px 12px 12px; border-top: 1px solid var(--border-subtle); }
+.replying { overflow: clip; }
+.replyingInner { display: flex; align-items: center; gap: 6px; padding: 0 2px 8px 38px; color: var(--text-secondary); font-size: var(--text-xs); }
+.replyingInner .iconAction { width: 22px; height: 22px; margin-left: 2px; }
+.replyingName { color: var(--foreground); font-weight: 500; }
+
+.composer { display: grid; align-items: start; gap: 8px 10px; grid-template-columns: auto minmax(0, 1fr) auto; }
+.composer > .avatar { margin-top: 5px; }
+.composer[data-compact] { grid-template-columns: minmax(0, 1fr); margin-top: 4px; }
+.fieldWrap { display: grid; min-width: 0; }
+.field {
+  width: 100%;
+  min-height: 38px;
+  max-height: 160px;
+  padding: 8px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control); corner-shape: var(--corner-shape);
+  background: var(--surface);
+  color: var(--foreground);
+  font: inherit;
+  resize: none;
+  field-sizing: content;
+  transition: border-color var(--duration-fast) var(--ease-standard);
+}
+.field::placeholder { color: var(--text-muted); }
+.field:focus { border-color: var(--border-strong); }
+.composerActions { display: flex; align-items: center; gap: 4px; }
+.composer[data-compact] .composerActions { justify-content: flex-end; }
+.send,
+.ghost { height: 38px; padding: 0 14px; border: 0; border-radius: var(--radius-full); corner-shape: round; cursor: pointer; font: inherit; font-weight: 500; transition: background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+.composer[data-compact] :is(.send, .ghost) { height: 32px; font-size: var(--text-xs); }
+.send { background: var(--foreground); color: var(--background); }
+.send:disabled { opacity: .35; cursor: default; }
+.send:active:not(:disabled), .ghost:active { transform: scale(.97); }
+.ghost { background: transparent; color: var(--text-secondary); }
+
+.suggestions { display: grid; margin: 6px 0 0; padding: 4px; overflow: clip; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-raised); list-style: none; }
+.suggestion { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 8px; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); cursor: pointer; }
+.suggestion[aria-selected="true"] { background: var(--surface-muted); }
+
+/* Resolved chip */
+.resolved { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; }
+.resolvedIcon { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 50%; corner-shape: round; background: color-mix(in oklab, var(--success) 14%, transparent); color: var(--success); }
+.resolvedText { display: grid; min-width: 0; flex: 1; }
+.resolvedTitle { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
+.resolvedSubject { color: var(--text-secondary); font-weight: 400; }
+.resolvedMeta { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+
+@media (hover: hover) and (pointer: fine) {
+  .comment .actions:not([data-open]) { opacity: 0; }
+  .comment:hover .actions,
+  .comment:focus-within .actions { opacity: 1; }
+  .action:hover, .iconAction:hover, .toggle:hover, .ghost:hover { background: var(--surface-muted); color: var(--foreground); }
+  .action[data-tone="danger"]:hover { background: color-mix(in oklab, var(--danger) 9%, transparent); color: var(--danger); }
+  .reaction:hover { border-color: var(--border-strong); }
+  .emoji:hover { background: var(--surface-muted); }
+  .resolve:hover:not(:disabled), .reopen:hover { border-color: var(--border-strong); background: var(--surface-muted); }
+  .send:hover:not(:disabled) { background: color-mix(in oklab, var(--foreground) 86%, var(--background)); }
+}
+.action:focus-visible, .iconAction:focus-visible, .toggle:focus-visible, .emoji:focus-visible { background: var(--surface-muted); color: var(--foreground); }
+
+@media (max-width: 420px) {
+  .composer { grid-template-columns: minmax(0, 1fr) auto; }
+  .composer > .avatar { display: none; }
+  .replyingInner { padding-left: 2px; }
+  .replies { margin-left: 12px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .root, .actions, .reaction, .action, .iconAction, .emoji, .send, .ghost, .resolve, .reopen { transition: none; }
+}

package/components/confirm-morph/confirm-morph.d.ts

@@ -0,0 +1,65 @@
+import type { ReactNode, Ref } from "react";
+/** Where the control is in its life: resting, asking, working, finished, or failed. */
+export type ConfirmMorphState = "idle" | "confirming" | "pending" | "done" | "error";
+/** How the question is answered: a press, a press held until the fill completes, or a press followed by a short countdown. */
+export type ConfirmMorphMode = "press" | "hold" | "countdown";
+/**
+ * A button for destructive or important actions that asks in place. Pressing it morphs the same pill into an inline question
+ * with Cancel and Confirm, then into a spinner, then into a result with Undo. The width springs to each face while the faces
+ * crossfade at their natural width, so text never squashes and nothing around the control jumps. Escape, an outside press,
+ * or the timeout all return it to rest.
+ * Use it where a modal dialog would be heavy: deleting a project, revoking access, discarding a draft.
+ */
+export interface ConfirmMorphProps {
+    /** The resting label, such as "Delete project". */
+    label: ReactNode;
+    /** A plain icon before the resting label. */
+    icon?: ReactNode;
+    /** The question shown while confirming, such as "Delete 3 files?". Defaults to the label with a question mark. */
+    prompt?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Shown beside the spinner while `onConfirm` resolves. */
+    pendingLabel?: string;
+    doneLabel?: string;
+    errorLabel?: string;
+    retryLabel?: string;
+    undoLabel?: string;
+    /** Shown beside the spinner while `onUndo` resolves. */
+    undoingLabel?: string;
+    /**
+     * `danger` (default) gives the confirm button the danger colour, for actions that destroy something. `neutral` gives it the
+     * accent, for important actions that can be reversed. The resting button is neutral either way.
+     */
+    tone?: "danger" | "neutral";
+    /** `press` confirms on a press. `hold` asks for a press held for `holdDuration`. `countdown` confirms, then counts down `countdown` seconds that Cancel or Escape can still stop. */
+    confirmMode?: ConfirmMorphMode;
+    /** Milliseconds the confirm button must be held in `hold` mode. */
+    holdDuration?: number;
+    /** Seconds counted down before the action runs in `countdown` mode. */
+    countdown?: number;
+    /** Text before the seconds in `countdown` mode, such as "Deleting in". Defaults to the pending label followed by "in". */
+    countdownLabel?: string;
+    /** Runs on confirm. Return a promise to show the pending face; a rejection shows the error face with Retry. */
+    onConfirm?: () => void | Promise<unknown>;
+    /** Offering it adds Undo to the result. Return a promise to show a pending face while it runs. */
+    onUndo?: () => void | Promise<unknown>;
+    onCancel?: () => void;
+    /** Controlled state. Pair it with `onStateChange`. */
+    state?: ConfirmMorphState;
+    /** Starting state when uncontrolled. */
+    defaultState?: ConfirmMorphState;
+    onStateChange?: (state: ConfirmMorphState) => void;
+    /** Milliseconds before an unanswered question returns to rest. Resting the pointer on the control pauses it. 0 turns it off. */
+    confirmTimeout?: number;
+    /** Milliseconds a result stays before returning to rest. Resting the pointer on the control pauses it. 0 turns it off. */
+    resultTimeout?: number;
+    /** A press outside the control cancels an open question. Defaults to true. */
+    cancelOnOutsidePress?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Receives the root element, which also takes focus while the action is pending. */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ConfirmMorph({ label, icon, prompt, confirmLabel, cancelLabel, pendingLabel, doneLabel, errorLabel, retryLabel, undoLabel, undoingLabel, tone, confirmMode, holdDuration, countdown, countdownLabel, onConfirm, onUndo, onCancel, state: stateProp, defaultState, onStateChange, confirmTimeout, resultTimeout, cancelOnOutsidePress, disabled, className, ref, }: ConfirmMorphProps): import("react").JSX.Element;
+export default ConfirmMorph;