mdx-artifacts 0.1.0

package/dist/lib/react/components/Comments.js

@@ -0,0 +1,613 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import * as Tabs from "@radix-ui/react-tabs";
+import { createArtifactThreadsFromState as createThreadsFromState, useOptionalArtifactState } from "./ArtifactState.js";
+import { InlineText } from "./InlineText.js";
+export { createArtifactCommentsFromState, createArtifactThreadsFromState } from "./ArtifactState.js";
+const CommentContext = createContext(null);
+export function CommentLayer({ children }) {
+    const artifactState = useOptionalArtifactState();
+    const [activeTargetId, setActiveTargetId] = useState();
+    const [threads, setThreads] = useState([]);
+    const [openTargetIds, setOpenTargetIds] = useState([]);
+    const [targets, setTargets] = useState({});
+    const [targetIds, setTargetIds] = useState([]);
+    const nextId = useRef(1);
+    const pendingPersistThreads = useRef(undefined);
+    const panels = createReviewPanels(activeTargetId, threads, openTargetIds, targetIds, targets);
+    const unplacedPanels = createUnplacedReviewPanels(threads, targetIds, targets);
+    useEffect(() => {
+        if (!artifactState?.state) {
+            return;
+        }
+        const savedThreads = createThreadsFromState(artifactState.state);
+        if (savedThreads.length === 0) {
+            return;
+        }
+        setThreads((current) => (sameReviewThreads(current, savedThreads) ? current : savedThreads));
+        setOpenTargetIds((current) => current.length > 0 ? current : uniqueValues(savedThreads.map((thread) => thread.blockId)));
+    }, [artifactState?.state]);
+    useEffect(() => {
+        if (!artifactState || pendingPersistThreads.current !== threads) {
+            return;
+        }
+        pendingPersistThreads.current = undefined;
+        void artifactState.actions.saveThreads(threads);
+    }, [artifactState, threads]);
+    const value = useMemo(() => ({
+        activeTargetId,
+        threads,
+        addComment(input) {
+            const thread = createArtifactThread(input, `thread-${nextId.current}`, `comment-${nextId.current}`, new Date().toISOString());
+            if (!thread) {
+                return;
+            }
+            const nextThreads = threads.some((item) => item.blockId === thread.blockId)
+                ? threads.map((item) => (item.blockId === thread.blockId ? replaceUserMessage(item, thread.messages[0]) : item))
+                : [...threads, thread];
+            nextId.current += 1;
+            pendingPersistThreads.current = nextThreads;
+            setThreads(nextThreads);
+            setOpenTargetIds((current) => (current.includes(thread.blockId) ? current : [...current, thread.blockId]));
+        },
+        closePanel(targetId) {
+            setOpenTargetIds((current) => current.filter((item) => item !== targetId));
+            setActiveTargetId((current) => (current === targetId ? undefined : current));
+        },
+        closeTarget() {
+            setActiveTargetId(undefined);
+        },
+        getActiveTarget() {
+            return activeTargetId ? targets[activeTargetId] : undefined;
+        },
+        getPanels() {
+            return panels;
+        },
+        getUnplacedPanels() {
+            return unplacedPanels;
+        },
+        getTargetNumber(targetId) {
+            const index = targetIds.indexOf(targetId);
+            return index >= 0 ? index + 1 : undefined;
+        },
+        openTarget(input) {
+            setActiveTargetId((current) => (current === input.targetId ? undefined : input.targetId));
+            setOpenTargetIds((current) => current.includes(input.targetId)
+                ? current.filter((item) => item !== input.targetId)
+                : [...current, input.targetId]);
+        },
+        registerTarget(input) {
+            const nextTarget = anchorFromRect(input);
+            setTargetIds((current) => (current.includes(input.targetId) ? current : [...current, input.targetId]));
+            setTargets((current) => {
+                const previous = current[input.targetId];
+                if (previous && sameAnchor(previous, nextTarget)) {
+                    return current;
+                }
+                return { ...current, [input.targetId]: nextTarget };
+            });
+        },
+        updateComment(commentId, comment) {
+            const normalized = comment.trim();
+            if (!normalized) {
+                return;
+            }
+            const nextThreads = threads.map((thread) => ({
+                ...thread,
+                messages: thread.messages.map((message) => message.id === commentId && message.role === "user" ? { ...message, body: normalized } : message)
+            }));
+            pendingPersistThreads.current = nextThreads;
+            setThreads(nextThreads);
+        }
+    }), [activeTargetId, panels, targetIds, targets, threads, unplacedPanels]);
+    const isReviewLayoutActive = (activeTargetId !== undefined && targets[activeTargetId] !== undefined) ||
+        openTargetIds.some((targetId) => targets[targetId] !== undefined);
+    return (_jsxs(CommentContext.Provider, { value: value, children: [_jsxs("div", { className: classNames("ak-review-layout", isReviewLayoutActive ? "ak-review-layout-active" : "ak-review-layout-inactive"), children: [_jsx(CommentReviewRail, { side: "left" }), _jsx("div", { className: "ak-review-content", children: children }), _jsx(CommentReviewRail, { side: "right" })] }), _jsx(UnplacedReviewDock, {})] }));
+}
+export function CommentableBlock({ blockId, title, description, children, className }) {
+    return (_jsx(CommentTarget, { className: className, description: description, targetId: blockId, title: title, children: children }));
+}
+export function CommentTarget({ targetId, title, description, children, className }) {
+    const layer = useOptionalCommentLayer();
+    const targetRef = useRef(null);
+    const [isCompactPopoverOpen, setCompactPopoverOpen] = useState(false);
+    const [isCompactComposerOpen, setCompactComposerOpen] = useState(false);
+    const [compactDraft, setCompactDraft] = useState("");
+    const [compactEditingCommentId, setCompactEditingCommentId] = useState();
+    const [compactEditingDraft, setCompactEditingDraft] = useState("");
+    const blockThread = layer?.threads.find((thread) => thread.blockId === targetId);
+    const blockMessageCount = blockThread?.messages.length ?? 0;
+    const targetNumber = layer?.getTargetNumber(targetId);
+    const isOpen = layer?.activeTargetId === targetId;
+    useEffect(() => {
+        if (!layer) {
+            return;
+        }
+        function registerCurrentTarget() {
+            const rect = targetRef.current?.getBoundingClientRect();
+            if (!rect || !layer) {
+                return;
+            }
+            layer.registerTarget({
+                targetId,
+                title,
+                description,
+                rect,
+                contentRect: findReviewContentRect(targetRef.current)
+            });
+        }
+        registerCurrentTarget();
+        window.addEventListener("resize", registerCurrentTarget);
+        window.addEventListener("scroll", registerCurrentTarget, true);
+        return () => {
+            window.removeEventListener("resize", registerCurrentTarget);
+            window.removeEventListener("scroll", registerCurrentTarget, true);
+        };
+    }, [description, targetId, title]);
+    if (!layer) {
+        return _jsx(_Fragment, { children: children });
+    }
+    function toggleTarget() {
+        if (!layer) {
+            return;
+        }
+        const rect = targetRef.current?.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        layer.openTarget({
+            targetId,
+            rect
+        });
+    }
+    function closeCompactPopover() {
+        setCompactPopoverOpen(false);
+        setCompactEditingCommentId(undefined);
+        setCompactEditingDraft("");
+    }
+    function closeCompactComposer() {
+        setCompactComposerOpen(false);
+    }
+    function handleMarkerClick() {
+        if (isCompactReviewLayout()) {
+            setCompactPopoverOpen((current) => !current);
+            setCompactComposerOpen(false);
+            return;
+        }
+        toggleTarget();
+    }
+    function handleAffordanceClick() {
+        if (isCompactReviewLayout()) {
+            setCompactComposerOpen((current) => !current);
+            setCompactPopoverOpen(false);
+            return;
+        }
+        toggleTarget();
+    }
+    function submitCompactComment(event) {
+        event.preventDefault();
+        if (!layer) {
+            return;
+        }
+        if (!compactDraft.trim()) {
+            return;
+        }
+        layer.addComment({
+            blockId: targetId,
+            blockTitle: title,
+            blockDescription: description,
+            comment: compactDraft
+        });
+        setCompactDraft("");
+        setCompactComposerOpen(false);
+    }
+    function beginCompactEdit(message) {
+        setCompactEditingCommentId(message.id);
+        setCompactEditingDraft(message.body);
+    }
+    function cancelCompactEdit() {
+        setCompactEditingCommentId(undefined);
+        setCompactEditingDraft("");
+    }
+    function submitCompactEdit(event, commentId) {
+        event.preventDefault();
+        if (!layer) {
+            return;
+        }
+        layer.updateComment(commentId, compactEditingDraft);
+        cancelCompactEdit();
+    }
+    return (_jsxs("section", { className: classNames("ak-comment-target-block", blockThread ? "ak-comment-target-has-comments" : undefined, isOpen ? "ak-comment-target-selected" : undefined, isCompactPopoverOpen ? "ak-comment-target-popover-open" : undefined, isCompactComposerOpen ? "ak-comment-target-composer-open" : undefined, className), "data-comment-target-id": targetId, "data-anchor-id": targetId, id: targetId, ref: targetRef, children: [_jsx("div", { className: "ak-comment-target-content", children: children }), blockThread ? (_jsxs("span", { className: "ak-comment-marker-anchor", children: [_jsxs("button", { "aria-label": `Show comments on ${title}`, className: "ak-comment-marker", onClick: handleMarkerClick, type: "button", children: ["#", targetNumber ?? "?", " \u00B7 ", blockMessageCount] }), _jsx(CommentTargetPopover, { editingCommentId: compactEditingCommentId, editingDraft: compactEditingDraft, number: targetNumber, onBeginEdit: beginCompactEdit, onCancelEdit: cancelCompactEdit, onClose: closeCompactPopover, onEditingDraftChange: setCompactEditingDraft, onSubmitEdit: submitCompactEdit, thread: blockThread, title: title })] })) : null, !blockThread ? (_jsxs("span", { className: "ak-comment-affordance-anchor", children: [_jsx("button", { "aria-label": `Comment on ${title}`, className: "ak-comment-affordance", onClick: handleAffordanceClick, type: "button", children: "Comment" }), _jsx(CommentTargetComposer, { draft: compactDraft, onDraftChange: setCompactDraft, onClose: closeCompactComposer, onSubmit: submitCompactComment, title: title })] })) : null] }));
+}
+function CommentTargetComposer({ draft, onDraftChange, onClose, onSubmit, title }) {
+    return (_jsxs("aside", { className: "ak-comment-composer-popover", role: "dialog", children: [_jsxs("div", { className: "ak-comment-form-header", children: [_jsx(InlineText, { as: "span", text: title, variant: "label" }), _jsx("button", { "aria-label": "Close comment composer", className: "ak-comment-close-button", onClick: onClose, type: "button", children: "Close" })] }), _jsxs("form", { className: "ak-comment-form", onSubmit: onSubmit, children: [_jsx("textarea", { "aria-label": `Comment on ${title}`, className: "ak-comment-input", onChange: (event) => onDraftChange(event.currentTarget.value), placeholder: "Write a block-level comment...", value: draft }), _jsx("div", { className: "ak-comment-form-actions", children: _jsx("button", { className: "ak-button ak-button-primary", disabled: !draft.trim(), type: "submit", children: "Add comment" }) })] })] }));
+}
+function CommentTargetPopover({ editingCommentId, editingDraft, number, onBeginEdit, onCancelEdit, onClose, onEditingDraftChange, onSubmitEdit, thread, title }) {
+    return (_jsxs("aside", { className: "ak-comment-target-popover", role: "dialog", children: [_jsxs("div", { className: "ak-comment-form-header", children: [_jsxs("span", { className: "ak-comment-target-label", children: ["#", number ?? "?"] }), _jsx(InlineText, { as: "span", text: title, variant: "label" }), _jsx("button", { "aria-label": "Close comments", className: "ak-comment-close-button", onClick: onClose, type: "button", children: "Close" })] }), _jsx(ThreadMessageList, { editingCommentId: editingCommentId, editingDraft: editingDraft, number: number, onBeginEdit: onBeginEdit, onCancelEdit: onCancelEdit, onEditingDraftChange: onEditingDraftChange, onSubmitEdit: onSubmitEdit, thread: thread })] }));
+}
+function ThreadMessageList({ editingCommentId, editingDraft, number, onBeginEdit, onCancelEdit, onEditingDraftChange, onSubmitEdit, thread }) {
+    return (_jsx("ul", { className: "ak-comment-list", children: thread.messages.map((message, index) => (_jsxs("li", { className: classNames("ak-comment-item", `ak-comment-item-${message.role}`), children: [_jsxs("span", { className: "ak-comment-item-number", children: ["#", number ?? "?", ".", index + 1] }), _jsx("span", { className: "ak-comment-role-label", children: message.role === "assistant" ? "Agent" : "User" }), editingCommentId === message.id ? (_jsxs("form", { className: "ak-comment-edit-form", onSubmit: (event) => onSubmitEdit(event, message.id), children: [_jsx("textarea", { "aria-label": `Edit comment ${number ?? "?"}.${index + 1}`, className: "ak-comment-input ak-comment-edit-input", onChange: (event) => onEditingDraftChange(event.currentTarget.value), value: editingDraft }), _jsxs("div", { className: "ak-comment-form-actions", children: [_jsx("button", { className: "ak-button", onClick: onCancelEdit, type: "button", children: "Cancel" }), _jsx("button", { className: "ak-button ak-button-primary", disabled: !editingDraft.trim(), type: "submit", children: "Save" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { children: message.body }), _jsxs("div", { className: "ak-comment-item-footer", children: [message.createdAt ? _jsx("time", { dateTime: message.createdAt, children: message.createdAt }) : _jsx("span", {}), message.role === "user" ? (_jsx("button", { className: "ak-comment-edit-button", onClick: () => onBeginEdit(message), type: "button", children: "Edit" })) : null] })] }))] }, message.id))) }));
+}
+function CommentReviewRail({ side }) {
+    const [draft, setDraft] = useState("");
+    const [editingCommentId, setEditingCommentId] = useState();
+    const [editingDraft, setEditingDraft] = useState("");
+    const [panelHeights, setPanelHeights] = useState({});
+    const [railTop, setRailTop] = useState(0);
+    const context = useCommentLayer("CommentReviewRail");
+    const activeTarget = context.getActiveTarget();
+    const panels = context.getPanels().filter((panel) => panel.side === side);
+    const positionedPanels = positionReviewPanels(panels, panelHeights, railTop);
+    const panelSignature = panels
+        .map((panel) => `${panel.targetId}:${panel.thread?.messages.length ?? 0}:${panel.isActive ? "active" : "idle"}`)
+        .join("|");
+    const railRef = useRef(null);
+    const panelRefs = useRef(new Map());
+    useEffect(() => {
+        function measurePanels() {
+            const nextHeights = {};
+            panelRefs.current.forEach((element, targetId) => {
+                nextHeights[targetId] = element.offsetHeight;
+            });
+            const nextRailTop = railRef.current
+                ? railRef.current.getBoundingClientRect().top + window.scrollY
+                : 0;
+            setPanelHeights((current) => (samePanelHeights(current, nextHeights) ? current : nextHeights));
+            setRailTop((current) => (Math.round(current) === Math.round(nextRailTop) ? current : nextRailTop));
+        }
+        measurePanels();
+        const observer = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(measurePanels);
+        if (railRef.current) {
+            observer?.observe(railRef.current);
+        }
+        panelRefs.current.forEach((element) => observer?.observe(element));
+        window.addEventListener("resize", measurePanels);
+        return () => {
+            observer?.disconnect();
+            window.removeEventListener("resize", measurePanels);
+        };
+    }, [editingCommentId, panelSignature]);
+    useEffect(() => {
+        setDraft("");
+        setEditingCommentId(undefined);
+        setEditingDraft("");
+    }, [context.activeTargetId]);
+    function setPanelRef(targetId) {
+        return (element) => {
+            if (element) {
+                panelRefs.current.set(targetId, element);
+            }
+            else {
+                panelRefs.current.delete(targetId);
+            }
+        };
+    }
+    function submitComment(event) {
+        event.preventDefault();
+        if (!activeTarget) {
+            return;
+        }
+        if (!draft.trim()) {
+            return;
+        }
+        context.addComment({
+            blockId: activeTarget.targetId,
+            blockTitle: activeTarget.title,
+            blockDescription: activeTarget.description,
+            comment: draft
+        });
+        setDraft("");
+        context.closeTarget();
+    }
+    function beginEdit(message) {
+        setEditingCommentId(message.id);
+        setEditingDraft(message.body);
+    }
+    function submitEdit(event, commentId) {
+        event.preventDefault();
+        context.updateComment(commentId, editingDraft);
+        setEditingCommentId(undefined);
+        setEditingDraft("");
+    }
+    return (_jsx("aside", { className: `ak-review-rail ak-review-rail-${side}`, ref: railRef, children: positionedPanels.map((panel) => {
+            const isActive = panel.targetId === context.activeTargetId;
+            return (_jsxs("section", { className: classNames("ak-comment-panel", isActive ? "ak-comment-panel-active" : undefined), ref: setPanelRef(panel.targetId), style: commentPanelStyle(panel.top), children: [_jsxs("div", { className: "ak-comment-form-header", children: [_jsxs("span", { className: "ak-comment-target-label", children: ["#", panel.number] }), _jsx(InlineText, { as: "span", text: panel.title, variant: "label" }), _jsx("button", { "aria-label": `Close comments on ${panel.title}`, className: "ak-comment-close-button", onClick: () => context.closePanel(panel.targetId), type: "button", children: "Close" })] }), isActive && !panel.thread ? (_jsxs("form", { className: "ak-comment-form", onSubmit: submitComment, children: [_jsx("textarea", { "aria-label": `Comment on ${panel.title}`, className: "ak-comment-input", onChange: (event) => setDraft(event.currentTarget.value), placeholder: "Write a block-level comment...", value: draft }), _jsx("div", { className: "ak-comment-form-actions", children: _jsx("button", { className: "ak-button ak-button-primary", disabled: !draft.trim(), type: "submit", children: "Add comment" }) })] })) : null, panel.thread ? (_jsx(ThreadMessageList, { editingCommentId: editingCommentId, editingDraft: editingDraft, number: panel.number, onBeginEdit: beginEdit, onCancelEdit: () => {
+                            setEditingCommentId(undefined);
+                            setEditingDraft("");
+                        }, onEditingDraftChange: setEditingDraft, onSubmitEdit: submitEdit, thread: panel.thread })) : null] }, panel.targetId));
+        }) }));
+}
+function UnplacedReviewDock() {
+    const context = useCommentLayer("UnplacedReviewDock");
+    const panels = context.getUnplacedPanels();
+    const [isOpen, setOpen] = useState(false);
+    const [editingCommentId, setEditingCommentId] = useState();
+    const [editingDraft, setEditingDraft] = useState("");
+    useEffect(() => {
+        if (panels.length === 0) {
+            setOpen(false);
+        }
+    }, [panels.length]);
+    if (panels.length === 0) {
+        return null;
+    }
+    function beginEdit(message) {
+        setEditingCommentId(message.id);
+        setEditingDraft(message.body);
+    }
+    function cancelEdit() {
+        setEditingCommentId(undefined);
+        setEditingDraft("");
+    }
+    function submitEdit(event, commentId) {
+        event.preventDefault();
+        context.updateComment(commentId, editingDraft);
+        cancelEdit();
+    }
+    return (_jsxs("aside", { className: "ak-unplaced-review-dock", "aria-label": "Unplaced comments", children: [_jsxs("button", { className: "ak-unplaced-review-trigger", onClick: () => setOpen((current) => !current), type: "button", children: ["Unplaced \u00B7 ", panels.length] }), isOpen ? (_jsxs("div", { className: "ak-unplaced-review-sheet", role: "dialog", children: [_jsxs("div", { className: "ak-section-header ak-unplaced-review-header", children: [_jsxs("div", { children: [_jsx("p", { className: "ak-eyebrow", children: "Review" }), _jsx(InlineText, { as: "h2", text: "Unplaced comments", variant: "title" })] }), _jsx("button", { className: "ak-button", onClick: () => setOpen(false), type: "button", children: "Close" })] }), _jsx("div", { className: "ak-unplaced-review-list", children: panels.map((panel) => (_jsxs("section", { className: "ak-unplaced-review-card", children: [_jsxs("div", { className: "ak-comment-form-header", children: [_jsxs("span", { className: "ak-comment-target-label", children: ["#", panel.number] }), _jsx(InlineText, { as: "span", text: panel.title, variant: "label" })] }), _jsxs("p", { className: "ak-unplaced-review-anchor", children: ["Missing anchor: ", panel.targetId] }), panel.thread ? (_jsx(ThreadMessageList, { editingCommentId: editingCommentId, editingDraft: editingDraft, number: panel.number, onBeginEdit: beginEdit, onCancelEdit: cancelEdit, onEditingDraftChange: setEditingDraft, onSubmitEdit: submitEdit, thread: panel.thread })) : null] }, panel.targetId))) })] })) : null] }));
+}
+export function CommentExport({ title = "Export Comments", formats = ["markdown", "json"] }) {
+    const layer = useCommentLayer("CommentExport");
+    const [format, setFormat] = useState(formats[0] ?? "markdown");
+    const [isOpen, setOpen] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const exportValue = { comments: createCommentsFromThreads(layer.threads), threads: layer.threads };
+    const output = format === "json" ? JSON.stringify(exportValue, null, 2) : serializeCommentsToMarkdown(exportValue);
+    async function copyOutput() {
+        if (navigator.clipboard?.writeText) {
+            await navigator.clipboard.writeText(output);
+        }
+        else {
+            fallbackCopy(output);
+        }
+        setCopied(true);
+        window.setTimeout(() => setCopied(false), 1200);
+    }
+    return (_jsxs("aside", { className: "ak-export-dock ak-comment-export", "aria-label": title, children: [_jsx("button", { className: "ak-export-dock-trigger", onClick: () => setOpen((current) => !current), type: "button", children: "Comments" }), isOpen ? (_jsxs("div", { className: "ak-export-drawer ak-comment-export-drawer", role: "dialog", children: [_jsxs("div", { className: "ak-section-header ak-export-header", children: [_jsxs("div", { children: [_jsx("p", { className: "ak-eyebrow", children: "Comments" }), _jsx(InlineText, { as: "h2", text: title, variant: "title" })] }), _jsx("button", { className: "ak-button ak-comment-export-close", onClick: () => setOpen(false), type: "button", children: "Close" })] }), _jsxs("div", { className: "ak-export-toolbar", children: [_jsx(Tabs.Root, { className: "ak-format-tabs", onValueChange: (value) => setFormat(value), value: format, children: _jsx(Tabs.List, { "aria-label": "Comment export format", className: "ak-format-tabs-list", children: formats.map((item) => (_jsx(Tabs.Trigger, { className: "ak-format-trigger", value: item, children: item }, item))) }) }), _jsx("button", { className: "ak-button ak-button-primary", onClick: copyOutput, type: "button", children: copied ? "Copied" : "Copy" })] }), _jsx("pre", { className: "ak-export-output", children: output })] })) : null] }));
+}
+export function useOptionalCommentExportValue() {
+    const layer = useOptionalCommentLayer();
+    return layer ? { comments: createCommentsFromThreads(layer.threads), threads: layer.threads } : undefined;
+}
+export function serializeCommentsToMarkdown(value) {
+    const threads = value.threads ?? createThreadsFromComments(value.comments ?? []);
+    if (threads.length === 0) {
+        return "# Artifact comments\n\nNo comments yet.";
+    }
+    return [
+        "# Artifact comments",
+        "",
+        ...threads.flatMap((thread) => [
+            `## ${thread.blockTitle}`,
+            `- blockId: ${thread.blockId}`,
+            `- status: ${thread.status}`,
+            thread.blockDescription ? `- description: ${thread.blockDescription}` : undefined,
+            "",
+            "### Messages",
+            "",
+            ...thread.messages.map((message) => {
+                const createdAt = message.createdAt ? ` (${message.createdAt})` : "";
+                return `- ${message.role}${createdAt}: ${message.body}`;
+            }),
+            ""
+        ].filter(Boolean))
+    ].join("\n").trimEnd();
+}
+export function createArtifactComment(input, id, createdAt) {
+    const normalized = input.comment.trim();
+    if (!normalized) {
+        return null;
+    }
+    return {
+        id,
+        blockId: input.blockId,
+        blockTitle: input.blockTitle,
+        blockDescription: input.blockDescription,
+        comment: normalized,
+        createdAt
+    };
+}
+export function createArtifactThread(input, threadId, messageId, createdAt) {
+    const comment = createArtifactComment(input, messageId, createdAt);
+    if (!comment) {
+        return null;
+    }
+    return {
+        id: threadId,
+        blockId: comment.blockId,
+        blockTitle: comment.blockTitle,
+        blockDescription: comment.blockDescription,
+        status: "open",
+        messages: [
+            {
+                id: comment.id,
+                role: "user",
+                body: comment.comment,
+                createdAt: comment.createdAt
+            }
+        ]
+    };
+}
+function replaceUserMessage(thread, message) {
+    if (!message) {
+        return thread;
+    }
+    const hasUserMessage = thread.messages.some((item) => item.role === "user");
+    return {
+        ...thread,
+        messages: hasUserMessage
+            ? thread.messages.map((item) => (item.role === "user" ? { ...item, body: message.body } : item))
+            : [message, ...thread.messages]
+    };
+}
+function createCommentsFromThreads(threads) {
+    return threads.flatMap((thread) => {
+        const userMessage = thread.messages.find((message) => message.role === "user");
+        if (!userMessage) {
+            return [];
+        }
+        return [
+            {
+                id: userMessage.id,
+                blockId: thread.blockId,
+                blockTitle: thread.blockTitle,
+                blockDescription: thread.blockDescription,
+                comment: userMessage.body,
+                createdAt: userMessage.createdAt ?? ""
+            }
+        ];
+    });
+}
+function createThreadsFromComments(comments) {
+    return comments.flatMap((comment) => {
+        const thread = createArtifactThread({
+            blockId: comment.blockId,
+            blockTitle: comment.blockTitle,
+            blockDescription: comment.blockDescription,
+            comment: comment.comment
+        }, `thread-${comment.id}`, comment.id, comment.createdAt);
+        return thread ? [thread] : [];
+    });
+}
+function createReviewPanels(activeTargetId, threads, openTargetIds, targetIds, targets) {
+    const panelMap = new Map();
+    for (const thread of threads) {
+        if (!openTargetIds.includes(thread.blockId) && activeTargetId !== thread.blockId) {
+            continue;
+        }
+        const target = targets[thread.blockId];
+        if (!target) {
+            continue;
+        }
+        const number = targetIds.indexOf(thread.blockId) + 1 || panelMap.size + 1;
+        panelMap.set(thread.blockId, {
+            number,
+            side: panelMap.get(thread.blockId)?.side ?? target.side,
+            targetId: thread.blockId,
+            thread,
+            title: thread.blockTitle,
+            top: panelMap.get(thread.blockId)?.top ?? target.top,
+            isActive: activeTargetId === thread.blockId
+        });
+    }
+    if (activeTargetId && targets[activeTargetId]) {
+        const activeTarget = targets[activeTargetId];
+        const current = panelMap.get(activeTargetId);
+        panelMap.set(activeTargetId, {
+            number: targetIds.indexOf(activeTargetId) + 1 || panelMap.size + 1,
+            side: activeTarget.side,
+            targetId: activeTargetId,
+            thread: current?.thread,
+            title: activeTarget.title,
+            top: activeTarget.top,
+            isActive: true
+        });
+    }
+    return Array.from(panelMap.values());
+}
+function createUnplacedReviewPanels(threads, targetIds, targets) {
+    const placedThreadIds = new Set(targetIds);
+    const placedCount = targetIds.length;
+    let unplacedCount = 0;
+    return threads.flatMap((thread) => {
+        if (targets[thread.blockId] || placedThreadIds.has(thread.blockId)) {
+            return [];
+        }
+        unplacedCount += 1;
+        return [
+            {
+                number: placedCount + unplacedCount,
+                side: "right",
+                targetId: thread.blockId,
+                thread,
+                title: thread.blockTitle,
+                top: 0
+            }
+        ];
+    });
+}
+function positionReviewPanels(panels, panelHeights, railTop) {
+    let nextTop = 16;
+    return [...panels].sort((first, second) => first.top - second.top).map((panel) => {
+        const preferredTop = Math.max(0, panel.top - railTop);
+        const top = Math.max(preferredTop, nextTop);
+        nextTop = top + (panelHeights[panel.targetId] ?? estimatePanelHeight(panel)) + 12;
+        return { ...panel, top };
+    });
+}
+function estimatePanelHeight(panel) {
+    return 54 + (panel.isActive ? 150 : 0) + (panel.thread?.messages.length ?? 0) * 96;
+}
+function anchorFromRect(input) {
+    const side = choosePanelSide(input.rect, input.contentRect);
+    return {
+        targetId: input.targetId,
+        title: input.title,
+        description: input.description,
+        top: Math.max(0, input.rect.top + window.scrollY),
+        side
+    };
+}
+function sameAnchor(previous, next) {
+    return (previous.title === next.title &&
+        previous.description === next.description &&
+        previous.side === next.side &&
+        Math.round(previous.top) === Math.round(next.top));
+}
+function samePanelHeights(first, second) {
+    const firstKeys = Object.keys(first);
+    const secondKeys = Object.keys(second);
+    if (firstKeys.length !== secondKeys.length) {
+        return false;
+    }
+    return firstKeys.every((key) => Math.round(first[key] ?? 0) === Math.round(second[key] ?? 0));
+}
+function sameReviewThreads(first, second) {
+    return JSON.stringify(first) === JSON.stringify(second);
+}
+function isCompactReviewLayout() {
+    return typeof window !== "undefined" && window.matchMedia("(max-width: 1548px)").matches;
+}
+function choosePanelSide(rect, contentRect) {
+    if (!contentRect) {
+        const rightSpace = window.innerWidth - rect.right;
+        const leftSpace = rect.left;
+        return rightSpace >= 320 || rightSpace >= leftSpace ? "right" : "left";
+    }
+    const relativeCenter = rect.left + rect.width / 2 - contentRect.left;
+    const leftBand = contentRect.width / 3;
+    return relativeCenter <= leftBand ? "left" : "right";
+}
+function findReviewContentRect(element) {
+    return element?.closest(".ak-review-content")?.getBoundingClientRect();
+}
+function useCommentLayer(componentName) {
+    const context = useContext(CommentContext);
+    if (!context) {
+        throw new Error(`${componentName} must be used inside CommentLayer.`);
+    }
+    return context;
+}
+function useOptionalCommentLayer() {
+    return useContext(CommentContext);
+}
+function fallbackCopy(value) {
+    const textarea = document.createElement("textarea");
+    textarea.value = value;
+    textarea.setAttribute("readonly", "true");
+    textarea.style.position = "fixed";
+    textarea.style.left = "-9999px";
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textarea);
+}
+function commentPanelStyle(top) {
+    return { "--ak-comment-panel-top": `${top}px` };
+}
+function classNames(...values) {
+    return values.filter(Boolean).join(" ");
+}
+function uniqueValues(values) {
+    return Array.from(new Set(values));
+}

package/dist/lib/react/components/ComparisonSet.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+import { type AkCollapseAt, type AkGap } from "./Layout";
+export type ComparisonSetProps = {
+    id?: string;
+    title: string;
+    children: ReactNode;
+    columns?: 2 | 3 | 4;
+    gap?: AkGap;
+    collapseAt?: AkCollapseAt;
+    className?: string;
+};
+export type ComparisonSetItemProps = {
+    id?: string;
+    title: string;
+    children: ReactNode;
+    value?: string;
+    className?: string;
+};
+declare function ComparisonSetRoot({ id, title, children, columns, gap, collapseAt, className }: ComparisonSetProps): import("react/jsx-runtime").JSX.Element;
+declare function ComparisonSetItem({ id, title, children, value, className }: ComparisonSetItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const ComparisonSet: typeof ComparisonSetRoot & {
+    Item: typeof ComparisonSetItem;
+};
+export {};

package/dist/lib/react/components/ComparisonSet.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { Grid } from "./Layout.js";
+import { InlineText } from "./InlineText.js";
+import { CommentTarget } from "./Comments.js";
+const ComparisonSetIdContext = createContext(undefined);
+function ComparisonSetRoot({ id, title, children, columns = 2, gap = "md", collapseAt = "md", className }) {
+    const targetId = id ?? `comparison:${slugify(title)}`;
+    return (_jsx(CommentTarget, { className: classNames("ak-comment-target-section", className), description: "ComparisonSet component", targetId: targetId, title: title, children: _jsxs("section", { className: "ak-section ak-comparison-set", children: [_jsxs("div", { className: "ak-section-header", children: [_jsx("p", { className: "ak-eyebrow", children: "Comparison Set" }), _jsx(InlineText, { as: "h2", text: title, variant: "title" })] }), _jsx(ComparisonSetIdContext.Provider, { value: id, children: _jsx(Grid, { collapseAt: collapseAt, columns: columns, gap: gap, children: children }) })] }) }));
+}
+function ComparisonSetItem({ id, title, children, value, className }) {
+    const comparisonSetId = useContext(ComparisonSetIdContext);
+    const targetId = comparisonSetId && id ? `${comparisonSetId}.${id}` : id ?? `comparison:${slugify(value ?? title)}`;
+    return (_jsx(CommentTarget, { className: classNames("ak-comment-target-card", className), description: "ComparisonSet item", targetId: targetId, title: title, children: _jsxs("article", { className: "ak-frame ak-surface-outlined ak-padding-md ak-comparison-item", "data-value": value, children: [_jsx(InlineText, { as: "h3", text: title, variant: "subtitle" }), _jsx("div", { className: "ak-comparison-item-body", children: children })] }) }));
+}
+export const ComparisonSet = Object.assign(ComparisonSetRoot, {
+    Item: ComparisonSetItem
+});
+function classNames(...values) {
+    return values.filter(Boolean).join(" ");
+}
+function slugify(value) {
+    const slug = value
+        .toLowerCase()
+        .replace(/[`*_~[\]()]/g, "")
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .slice(0, 64);
+    return slug || "item";
+}