@actuate-media/cms-admin 0.11.0 → 0.12.1

package/dist/components/CommentMark.js

@@ -0,0 +1,104 @@
+/**
+ * TipTap inline mark that tags a text range with a `commentId`. The mark
+ * is the glue between the comment side panel and the editor — selecting
+ * a range, creating a comment, and then re-painting the highlight when
+ * the comment list updates all flow through this extension.
+ *
+ * Storage shape: a single attribute, `commentId`, that mirrors the row
+ * id returned by the slice-4 REST API. The mark also stamps a
+ * `data-comment-id` attribute on its rendered span and a CSS class so
+ * the panel can style it (yellow band for active, dotted underline for
+ * resolved, faded for detached anchors).
+ *
+ * We deliberately use a TipTap Mark (vs. a ProseMirror decoration) so
+ * the comment anchor is *persisted* in the document HTML and round-trips
+ * through the autosave path. Decorations would be simpler but they're
+ * presentational only — they disappear on next render unless re-painted
+ * from scratch, which would defeat slice 5's main job (keeping anchors
+ * stable under collaborative edits).
+ */
+import { Mark, mergeAttributes } from '@tiptap/core';
+export const CommentMark = Mark.create({
+    name: 'comment',
+    // Inline mark; we never want it on block-level nodes.
+    inclusive: false,
+    spanning: false,
+    // Allow the mark to be split when text is inserted at its boundaries —
+    // otherwise replies/edits in the middle of a comment would silently
+    // expand its scope.
+    excludes: '',
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+            className: 'actuate-comment',
+        };
+    },
+    addAttributes() {
+        return {
+            commentId: {
+                default: null,
+                parseHTML: (element) => element.getAttribute('data-comment-id'),
+                renderHTML: (attributes) => {
+                    if (!attributes.commentId)
+                        return {};
+                    return { 'data-comment-id': attributes.commentId };
+                },
+            },
+        };
+    },
+    parseHTML() {
+        return [{ tag: 'span[data-comment-id]' }];
+    },
+    renderHTML({ HTMLAttributes }) {
+        const opts = this.options;
+        return [
+            'span',
+            mergeAttributes(opts.HTMLAttributes, HTMLAttributes, {
+                class: opts.className,
+            }),
+            0,
+        ];
+    },
+    addCommands() {
+        return {
+            setComment: (attrs) => ({ commands }) => {
+                if (!attrs?.commentId)
+                    return false;
+                return commands.setMark(this.name, attrs);
+            },
+            updateComment: (attrs) => ({ commands }) => {
+                if (!attrs?.commentId)
+                    return false;
+                return commands.updateAttributes(this.name, attrs);
+            },
+            unsetComment: () => ({ commands }) => {
+                return commands.unsetMark(this.name);
+            },
+        };
+    },
+});
+/**
+ * CSS the editor styles include to render the comment highlights. The
+ * `TipTapEditor` injects this so consumers don't need to import a CSS
+ * file separately.
+ */
+export const COMMENT_MARK_STYLES = `
+.actuate-comment {
+  background-color: rgba(250, 204, 21, 0.25);
+  border-bottom: 2px solid rgba(202, 138, 4, 0.65);
+  cursor: pointer;
+}
+.actuate-comment:hover {
+  background-color: rgba(250, 204, 21, 0.4);
+}
+.actuate-comment--resolved {
+  background-color: transparent;
+  border-bottom: 1px dotted rgba(107, 114, 128, 0.6);
+}
+.actuate-comment--active {
+  background-color: rgba(250, 204, 21, 0.55);
+  outline: 2px solid rgba(202, 138, 4, 0.9);
+  outline-offset: -1px;
+}
+`;
+//# sourceMappingURL=CommentMark.js.map

package/dist/components/CommentMark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentMark.js","sourceRoot":"","sources":["../../src/components/CommentMark.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AA0BpD,MAAM,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAqB;IACzD,IAAI,EAAE,SAAS;IACf,sDAAsD;IACtD,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,KAAK;IACf,uEAAuE;IACvE,oEAAoE;IACpE,oBAAoB;IACpB,QAAQ,EAAE,EAAE;IAEZ,UAAU;QACR,OAAO;YACL,cAAc,EAAE,EAAE;YAClB,SAAS,EAAE,iBAAiB;SAC7B,CAAA;IACH,CAAC;IAED,aAAa;QACX,OAAO;YACL,SAAS,EAAE;gBACT,OAAO,EAAE,IAAI;gBACb,SAAS,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC;gBAC/D,UAAU,EAAE,CAAC,UAAU,EAAE,EAAE;oBACzB,IAAI,CAAC,UAAU,CAAC,SAAS;wBAAE,OAAO,EAAE,CAAA;oBACpC,OAAO,EAAE,iBAAiB,EAAE,UAAU,CAAC,SAAmB,EAAE,CAAA;gBAC9D,CAAC;aACF;SACF,CAAA;IACH,CAAC;IAED,SAAS;QACP,OAAO,CAAC,EAAE,GAAG,EAAE,uBAAuB,EAAE,CAAC,CAAA;IAC3C,CAAC;IAED,UAAU,CAAC,EAAE,cAAc,EAAE;QAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAA;QACzB,OAAO;YACL,MAAM;YACN,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE,cAAc,EAAE;gBACnD,KAAK,EAAE,IAAI,CAAC,SAAS;aACtB,CAAC;YACF,CAAC;SACF,CAAA;IACH,CAAC;IAED,WAAW;QACT,OAAO;YACL,UAAU,EACR,CAAC,KAAK,EAAE,EAAE,CACV,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE,SAAS;oBAAE,OAAO,KAAK,CAAA;gBACnC,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YAC3C,CAAC;YACH,aAAa,EACX,CAAC,KAAK,EAAE,EAAE,CACV,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE,SAAS;oBAAE,OAAO,KAAK,CAAA;gBACnC,OAAO,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YACpD,CAAC;YACH,YAAY,EACV,GAAG,EAAE,CACL,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;gBACf,OAAO,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACtC,CAAC;SACJ,CAAA;IACH,CAAC;CACF,CAAC,CAAA;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;CAkBlC,CAAA"}

package/dist/components/CommentSidePanel.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import { type Comment, type CommentAnchor, type CommentOutcome } from '../lib/comments-client.js';
+/**
+ * Side-panel view of the slice-4 comments API. Renders threaded comments
+ * for a document, lets the current user compose new threads and replies,
+ * and offers per-comment actions: edit, resolve / reopen, delete.
+ *
+ * The component is *pure I/O* against the comments-client module —
+ * anchor encoding/decoding, editor mark painting, and bubble-menu wiring
+ * are layered on top in `TipTapEditor.tsx` through the `comments` prop.
+ * Keeping the panel logic agnostic of TipTap means the unit tests can
+ * verify thread ordering / state transitions without spinning up an
+ * editor.
+ *
+ * Behaviour
+ * ─────────
+ * - Active comments (not resolved, not deleted) are shown by default.
+ * - A toggle reveals resolved threads in the same list, sorted by
+ *   resolved-at descending so the most recently closed appears first.
+ * - Composer accepts free-form text. When `onComposeAnchor` returns a
+ *   non-null anchor the new comment is bound to that range; otherwise
+ *   it is a document-level comment.
+ * - The list refreshes after every successful mutation so optimistic
+ *   state can't drift from the server.
+ *
+ * Errors fall through to the `onError` callback so the host shell can
+ * surface them with its own toast / banner system (we don't import
+ * sonner here to keep the component testable in plain JSDOM).
+ */
+export interface CommentSidePanelProps {
+    documentId: string;
+    /** Current user id — used to gate edit / delete affordances. */
+    currentUserId: string;
+    /** Set to `true` to show admin-only affordances (delete others'). */
+    isAdmin?: boolean;
+    /**
+     * Called when the user clicks "Comment on selection". Should return
+     * the encoded anchor for the active editor selection, or `null` for a
+     * doc-level comment. Wiring lives in `TipTapEditor` so this component
+     * stays editor-agnostic.
+     */
+    onComposeAnchor?: () => CommentAnchor | null;
+    /**
+     * Called whenever the active comment changes (focus shift / open
+     * thread). The editor uses this to scroll the highlighted range into
+     * view and paint the `actuate-comment--active` modifier.
+     */
+    onActiveCommentChange?: (commentId: string | null) => void;
+    /** Error sink — bubble up server failures to a toast / banner. */
+    onError?: (message: string) => void;
+    /**
+     * Override the comments-client API. Tests inject a fake; real callers
+     * should leave this unset.
+     */
+    api?: CommentsApi;
+    className?: string;
+}
+/**
+ * Tiny adapter type that lets tests swap the comments-client module out.
+ * Mirrors the slice-4 client surface 1:1 — keeping it explicit prevents
+ * accidental drift when new endpoints are added later.
+ */
+export interface CommentsApi {
+    list: (documentId: string, opts?: {
+        includeResolved?: boolean;
+    }) => Promise<CommentOutcome<Comment[]>>;
+    create: (input: {
+        documentId: string;
+        body: string;
+        anchor?: CommentAnchor | null;
+        parentId?: string | null;
+    }) => Promise<CommentOutcome<Comment>>;
+    update: (id: string, body: string) => Promise<CommentOutcome<Comment>>;
+    resolve: (id: string) => Promise<CommentOutcome<Comment>>;
+    reopen: (id: string) => Promise<CommentOutcome<Comment>>;
+    remove: (id: string) => Promise<CommentOutcome<Comment>>;
+}
+export declare function CommentSidePanel({ documentId, currentUserId, isAdmin, onComposeAnchor, onActiveCommentChange, onError, api, className, }: CommentSidePanelProps): React.JSX.Element;
+/**
+ * Cheap "n seconds / minutes / hours / days ago" formatter. We avoid
+ * importing a full date-fns dependency just for this view; the panel is
+ * fine being approximate.
+ */
+declare function formatRelative(iso: string): string;
+export { formatRelative as _formatRelative };
+//# sourceMappingURL=CommentSidePanel.d.ts.map

package/dist/components/CommentSidePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentSidePanel.d.ts","sourceRoot":"","sources":["../../src/components/CommentSidePanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAA;AAEhF,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,aAAa,EASlB,KAAK,cAAc,EACpB,MAAM,2BAA2B,CAAA;AAElC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAA;IAClB,gEAAgE;IAChE,aAAa,EAAE,MAAM,CAAA;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,aAAa,GAAG,IAAI,CAAA;IAC5C;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC1D,kEAAkE;IAClE,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,CACJ,UAAU,EAAE,MAAM,EAClB,IAAI,CAAC,EAAE;QAAE,eAAe,CAAC,EAAE,OAAO,CAAA;KAAE,KACjC,OAAO,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC,CAAC,CAAA;IACvC,MAAM,EAAE,CAAC,KAAK,EAAE;QACd,UAAU,EAAE,MAAM,CAAA;QAClB,IAAI,EAAE,MAAM,CAAA;QACZ,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAA;QAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KACzB,KAAK,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;IACtC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;IACtE,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;IACzD,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;IACxD,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACzD;AAWD,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,aAAa,EACb,OAAe,EACf,eAAe,EACf,qBAAqB,EACrB,OAAO,EACP,GAAgB,EAChB,SAAS,GACV,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2K3C;AAwND;;;;GAIG;AACH,iBAAS,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAW3C;AAGD,OAAO,EAAE,cAAc,IAAI,eAAe,EAAE,CAAA"}

package/dist/components/CommentSidePanel.js

@@ -0,0 +1,165 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createComment as apiCreateComment, deleteComment as apiDeleteComment, groupCommentsIntoThreads, listComments as apiListComments, reopenComment as apiReopenComment, resolveComment as apiResolveComment, updateComment as apiUpdateComment, } from '../lib/comments-client.js';
+const defaultApi = {
+    list: (documentId, opts) => apiListComments(documentId, opts),
+    create: (input) => apiCreateComment(input),
+    update: (id, body) => apiUpdateComment(id, body),
+    resolve: (id) => apiResolveComment(id),
+    reopen: (id) => apiReopenComment(id),
+    remove: (id) => apiDeleteComment(id),
+};
+export function CommentSidePanel({ documentId, currentUserId, isAdmin = false, onComposeAnchor, onActiveCommentChange, onError, api = defaultApi, className, }) {
+    const [comments, setComments] = useState([]);
+    const [includeResolved, setIncludeResolved] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [draft, setDraft] = useState('');
+    const [activeCommentId, setActiveCommentId] = useState(null);
+    const mountedRef = useRef(true);
+    useEffect(() => {
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    const setActive = useCallback((id) => {
+        setActiveCommentId(id);
+        onActiveCommentChange?.(id);
+    }, [onActiveCommentChange]);
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        const out = await api.list(documentId, { includeResolved });
+        if (!mountedRef.current)
+            return;
+        if (!out.ok) {
+            onError?.(out.error);
+            setComments([]);
+        }
+        else {
+            setComments(out.result);
+        }
+        setLoading(false);
+    }, [api, documentId, includeResolved, onError]);
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    const threads = useMemo(() => groupCommentsIntoThreads(comments), [comments]);
+    const handleCompose = useCallback(async () => {
+        const body = draft.trim();
+        if (!body)
+            return;
+        const anchor = onComposeAnchor?.() ?? null;
+        const out = await api.create({ documentId, body, anchor });
+        if (!out.ok) {
+            onError?.(out.error);
+            return;
+        }
+        setDraft('');
+        setActive(out.result.id);
+        await refresh();
+    }, [draft, onComposeAnchor, api, documentId, onError, setActive, refresh]);
+    const handleReply = useCallback(async (parentId, body) => {
+        const trimmed = body.trim();
+        if (!trimmed)
+            return;
+        const out = await api.create({ documentId, body: trimmed, parentId });
+        if (!out.ok) {
+            onError?.(out.error);
+            return;
+        }
+        await refresh();
+    }, [api, documentId, onError, refresh]);
+    const handleEdit = useCallback(async (id, body) => {
+        const out = await api.update(id, body);
+        if (!out.ok) {
+            onError?.(out.error);
+            return false;
+        }
+        await refresh();
+        return true;
+    }, [api, onError, refresh]);
+    const handleResolve = useCallback(async (id, alreadyResolved) => {
+        const out = alreadyResolved ? await api.reopen(id) : await api.resolve(id);
+        if (!out.ok) {
+            onError?.(out.error);
+            return;
+        }
+        await refresh();
+    }, [api, onError, refresh]);
+    const handleDelete = useCallback(async (id) => {
+        const out = await api.remove(id);
+        if (!out.ok) {
+            onError?.(out.error);
+            return;
+        }
+        if (activeCommentId === id)
+            setActive(null);
+        await refresh();
+    }, [api, onError, refresh, activeCommentId, setActive]);
+    const wrapperClass = `flex h-full flex-col gap-3 border-l border-gray-200 bg-white p-3 ${className ?? ''}`;
+    return (_jsxs("aside", { className: wrapperClass, "data-testid": "comment-side-panel", children: [_jsxs("header", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-sm font-semibold text-gray-900", children: "Comments" }), _jsxs("label", { className: "flex cursor-pointer items-center gap-1 text-xs text-gray-600", children: [_jsx("input", { type: "checkbox", checked: includeResolved, onChange: (e) => setIncludeResolved(e.target.checked), "data-testid": "include-resolved-toggle" }), "Show resolved"] })] }), _jsxs("section", { className: "flex flex-col gap-1.5", children: [_jsx("textarea", { className: "w-full resize-none rounded border border-gray-300 p-2 text-sm focus:border-blue-500 focus:outline-none", rows: 3, placeholder: "Write a comment\u2026", value: draft, onChange: (e) => setDraft(e.target.value), "data-testid": "comment-composer" }), _jsx("div", { className: "flex justify-end", children: _jsx("button", { type: "button", className: "rounded bg-blue-600 px-3 py-1 text-xs font-medium text-white hover:bg-blue-500 disabled:opacity-50", disabled: !draft.trim(), onClick: handleCompose, "data-testid": "comment-submit", children: "Comment" }) })] }), _jsx("section", { className: "flex-1 overflow-y-auto", "aria-busy": loading, "data-testid": "comment-list", children: loading ? (_jsx("p", { className: "text-xs text-gray-500", children: "Loading\u2026" })) : threads.length === 0 ? (_jsx("p", { className: "text-xs text-gray-500", children: "No comments yet." })) : (_jsx("ul", { className: "flex flex-col gap-2", children: threads.map((thread) => (_jsx(CommentThreadView, { thread: thread, currentUserId: currentUserId, isAdmin: isAdmin, isActive: activeCommentId === thread.root.id, onFocus: () => setActive(thread.root.id), onReply: (body) => handleReply(thread.root.id, body), onEdit: (id, body) => handleEdit(id, body), onToggleResolve: (id, alreadyResolved) => handleResolve(id, alreadyResolved), onDelete: (id) => handleDelete(id) }, thread.root.id))) })) })] }));
+}
+function CommentThreadView({ thread, currentUserId, isAdmin, isActive, onFocus, onReply, onEdit, onToggleResolve, onDelete, }) {
+    const [replyDraft, setReplyDraft] = useState('');
+    const cardClass = `rounded border bg-gray-50 p-2 ${isActive ? 'border-yellow-400 ring-1 ring-yellow-300' : 'border-gray-200'}`;
+    return (_jsxs("li", { className: cardClass, onClick: onFocus, "data-testid": `comment-thread-${thread.root.id}`, "data-active": isActive ? 'true' : 'false', children: [_jsx(CommentRow, { comment: thread.root, currentUserId: currentUserId, isAdmin: isAdmin, onEdit: onEdit, onToggleResolve: () => onToggleResolve(thread.root.id, thread.root.isResolved), onDelete: () => onDelete(thread.root.id) }), thread.replies.length > 0 && (_jsx("ul", { className: "mt-2 flex flex-col gap-1 border-l-2 border-gray-200 pl-2", children: thread.replies.map((reply) => (_jsx("li", { children: _jsx(CommentRow, { comment: reply, currentUserId: currentUserId, isAdmin: isAdmin, onEdit: onEdit, 
+                        // Replies inherit the thread's resolve action; we only
+                        // expose delete here.
+                        onToggleResolve: null, onDelete: () => onDelete(reply.id) }) }, reply.id))) })), _jsxs("div", { className: "mt-2 flex gap-1", children: [_jsx("input", { className: "flex-1 rounded border border-gray-300 px-2 py-1 text-xs focus:border-blue-500 focus:outline-none", placeholder: "Reply\u2026", value: replyDraft, onChange: (e) => setReplyDraft(e.target.value), "data-testid": `reply-input-${thread.root.id}`, onClick: (e) => e.stopPropagation() }), _jsx("button", { type: "button", className: "rounded bg-gray-700 px-2 py-1 text-xs font-medium text-white hover:bg-gray-600 disabled:opacity-50", disabled: !replyDraft.trim(), onClick: (e) => {
+                            e.stopPropagation();
+                            onReply(replyDraft);
+                            setReplyDraft('');
+                        }, "data-testid": `reply-submit-${thread.root.id}`, children: "Reply" })] })] }));
+}
+function CommentRow({ comment, currentUserId, isAdmin, onEdit, onToggleResolve, onDelete, }) {
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState(comment.body);
+    useEffect(() => {
+        setDraft(comment.body);
+    }, [comment.body]);
+    const canMutate = isAdmin || comment.userId === currentUserId;
+    const meta = (_jsxs("div", { className: "text-xs text-gray-500", children: [comment.userId ?? 'deleted user', " \u00B7 ", formatRelative(comment.createdAt), comment.isResolved ? ' · resolved' : null] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [meta, editing ? (_jsxs(_Fragment, { children: [_jsx("textarea", { className: "w-full resize-none rounded border border-gray-300 p-1 text-sm", rows: 3, value: draft, onChange: (e) => setDraft(e.target.value), "data-testid": `edit-textarea-${comment.id}`, onClick: (e) => e.stopPropagation() }), _jsxs("div", { className: "flex gap-1", children: [_jsx("button", { type: "button", className: "rounded bg-blue-600 px-2 py-1 text-xs font-medium text-white", onClick: async (e) => {
+                                    e.stopPropagation();
+                                    const ok = await onEdit(comment.id, draft);
+                                    if (ok)
+                                        setEditing(false);
+                                }, "data-testid": `edit-save-${comment.id}`, children: "Save" }), _jsx("button", { type: "button", className: "rounded border border-gray-300 px-2 py-1 text-xs", onClick: (e) => {
+                                    e.stopPropagation();
+                                    setDraft(comment.body);
+                                    setEditing(false);
+                                }, "data-testid": `edit-cancel-${comment.id}`, children: "Cancel" })] })] })) : (_jsx("p", { className: "text-sm whitespace-pre-wrap text-gray-900", "data-testid": `comment-body-${comment.id}`, children: comment.body })), !editing && (_jsxs("div", { className: "flex flex-wrap gap-1 text-xs", children: [canMutate && (_jsx("button", { type: "button", className: "text-gray-600 hover:text-gray-900", onClick: (e) => {
+                            e.stopPropagation();
+                            setEditing(true);
+                        }, "data-testid": `edit-${comment.id}`, children: "Edit" })), onToggleResolve && (_jsx("button", { type: "button", className: "text-gray-600 hover:text-gray-900", onClick: (e) => {
+                            e.stopPropagation();
+                            onToggleResolve();
+                        }, "data-testid": `resolve-${comment.id}`, children: comment.isResolved ? 'Reopen' : 'Resolve' })), canMutate && (_jsx("button", { type: "button", className: "text-red-600 hover:text-red-700", onClick: (e) => {
+                            e.stopPropagation();
+                            onDelete();
+                        }, "data-testid": `delete-${comment.id}`, children: "Delete" }))] }))] }));
+}
+/**
+ * Cheap "n seconds / minutes / hours / days ago" formatter. We avoid
+ * importing a full date-fns dependency just for this view; the panel is
+ * fine being approximate.
+ */
+function formatRelative(iso) {
+    const t = Date.parse(iso);
+    if (Number.isNaN(t))
+        return iso;
+    const deltaSec = Math.max(0, Math.round((Date.now() - t) / 1000));
+    if (deltaSec < 60)
+        return `${deltaSec}s ago`;
+    const m = Math.round(deltaSec / 60);
+    if (m < 60)
+        return `${m}m ago`;
+    const h = Math.round(m / 60);
+    if (h < 24)
+        return `${h}h ago`;
+    const d = Math.round(h / 24);
+    return `${d}d ago`;
+}
+// Re-export for tests that build their own CommentsApi.
+export { formatRelative as _formatRelative };
+//# sourceMappingURL=CommentSidePanel.js.map

package/dist/components/CommentSidePanel.js.map

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

package/dist/components/LivePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LivePreview.d.ts","sourceRoot":"","sources":["../../src/components/LivePreview.tsx"],"names":[],"mappings":"AAMA,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAUD,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,UAAU,EACV,UAAU,EACV,MAAM,EACN,OAAO,GACR,EAAE,gBAAgB,2CAsIlB"}
+{"version":3,"file":"LivePreview.d.ts","sourceRoot":"","sources":["../../src/components/LivePreview.tsx"],"names":[],"mappings":"AAeA,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC/B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AA4BD,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,UAAU,EACV,UAAU,EACV,MAAM,EACN,OAAO,GACR,EAAE,gBAAgB,2CAqNlB"}

package/dist/components/LivePreview.js

@@ -1,47 +1,105 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from 'react';
-import { Monitor, Tablet, Smartphone, RefreshCw, ExternalLink, X } from 'lucide-react';
+import { Monitor, Tablet, Smartphone, RefreshCw, ExternalLink, X, Wifi, WifiOff, } from 'lucide-react';
 import { cmsApi } from '../lib/api.js';
 const VIEWPORT_WIDTHS = {
     desktop: '100%',
     tablet: '768px',
     mobile: '375px',
 };
+const PREVIEW_STREAM_PATH = '/api/cms/preview/stream';
+function postToIframe(iframe, src, data) {
+    if (!iframe?.contentWindow || !src)
+        return;
+    let targetOrigin;
+    try {
+        targetOrigin = new URL(src).origin;
+    }
+    catch {
+        targetOrigin = window.location.origin;
+    }
+    iframe.contentWindow.postMessage({ type: 'actuate-preview-update', data }, targetOrigin);
+}
 export function LivePreview({ collection, documentId, previewUrl, values, onClose, }) {
     const iframeRef = useRef(null);
     const [viewport, setViewport] = useState('desktop');
     const [loading, setLoading] = useState(true);
     const [previewSrc, setPreviewSrc] = useState(null);
+    const [previewToken, setPreviewToken] = useState(null);
+    const [streamStatus, setStreamStatus] = useState('idle');
     useEffect(() => {
         if (!documentId || !previewUrl) {
             setPreviewSrc(null);
+            setPreviewToken(null);
             return;
         }
+        let cancelled = false;
         async function fetchToken() {
             const res = await cmsApi('/preview/token', {
                 method: 'POST',
                 body: JSON.stringify({ collection, documentId }),
             });
+            if (cancelled)
+                return;
             if (res.data?.token) {
                 const sep = previewUrl.includes('?') ? '&' : '?';
+                setPreviewToken(res.data.token);
                 setPreviewSrc(`${previewUrl}${sep}preview=true#token=${res.data.token}`);
             }
         }
         fetchToken();
+        return () => {
+            cancelled = true;
+        };
     }, [collection, documentId, previewUrl]);
     useEffect(() => {
-        if (!iframeRef.current?.contentWindow || !previewSrc)
+        postToIframe(iframeRef.current, previewSrc, values);
+    }, [values, previewSrc]);
+    /**
+     * SSE pipe — when the server pushes a draft update for the same
+     * `{collection, documentId}`, forward the new `values` straight to the
+     * iframe via `postMessage`. The bus key matches the token's payload, so
+     * a second admin session updating the same draft (e.g. an AI agent)
+     * appears live in this preview without polling.
+     */
+    useEffect(() => {
+        if (typeof window === 'undefined' || typeof EventSource === 'undefined')
+            return;
+        if (!documentId || !previewToken) {
+            setStreamStatus('idle');
             return;
-        let targetOrigin;
-        try {
-            targetOrigin = new URL(previewSrc).origin;
-        }
-        catch {
-            targetOrigin = window.location.origin;
         }
-        iframeRef.current.contentWindow.postMessage({ type: 'actuate-preview-update', data: values }, targetOrigin);
-    }, [values, previewSrc]);
+        setStreamStatus('connecting');
+        const source = new EventSource(`${PREVIEW_STREAM_PATH}?token=${encodeURIComponent(previewToken)}`, { withCredentials: true });
+        const onReady = () => setStreamStatus('connected');
+        const onUpdate = (event) => {
+            try {
+                const payload = JSON.parse(event.data);
+                if (payload.values && typeof payload.values === 'object') {
+                    postToIframe(iframeRef.current, previewSrc, payload.values);
+                }
+            }
+            catch {
+                // Ignore malformed events — the SSE wire format guarantees JSON,
+                // but a future schema bump shouldn't break this consumer.
+            }
+        };
+        const onError = () => setStreamStatus('offline');
+        const onOpen = () => setStreamStatus((s) => (s === 'offline' ? 'connecting' : s));
+        source.addEventListener('ready', onReady);
+        source.addEventListener('update', onUpdate);
+        source.addEventListener('error', onError);
+        source.addEventListener('open', onOpen);
+        return () => {
+            source.removeEventListener('ready', onReady);
+            source.removeEventListener('update', onUpdate);
+            source.removeEventListener('error', onError);
+            source.removeEventListener('open', onOpen);
+            source.close();
+            setStreamStatus('idle');
+        };
+    }, [documentId, previewToken, previewSrc]);
     const handleRefresh = useCallback(() => {
         if (iframeRef.current) {
             setLoading(true);
@@ -57,10 +115,16 @@ export function LivePreview({ collection, documentId, previewUrl, values, onClos
                         ? 'Save the document first to enable preview'
                         : 'Configure a preview URL in the collection settings to enable live preview' }), _jsx("button", { onClick: onClose, className: "mt-4 text-xs text-gray-400 hover:text-gray-600", children: "Close Preview" })] }));
     }
-    return (_jsxs("div", { className: "flex h-full flex-col border-l border-gray-200 bg-white", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 bg-gray-50 px-3 py-2", children: [_jsx("div", { className: "flex items-center gap-1", children: [
-                            ['desktop', Monitor],
-                            ['tablet', Tablet],
-                            ['mobile', Smartphone],
-                        ].map(([vp, Icon]) => (_jsx("button", { onClick: () => setViewport(vp), className: `rounded p-1.5 ${viewport === vp ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-400 hover:text-gray-600'}`, title: vp, children: _jsx(Icon, { className: "h-4 w-4" }) }, vp))) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: handleRefresh, className: "rounded p-1.5 text-gray-400 hover:text-gray-600", title: "Refresh", children: _jsx(RefreshCw, { className: "h-4 w-4" }) }), _jsx("button", { onClick: handleOpenExternal, className: "rounded p-1.5 text-gray-400 hover:text-gray-600", title: "Open in new tab", children: _jsx(ExternalLink, { className: "h-4 w-4" }) }), _jsx("button", { onClick: onClose, className: "rounded p-1.5 text-gray-400 hover:text-gray-600", title: "Close", children: _jsx(X, { className: "h-4 w-4" }) })] })] }), _jsx("div", { className: "flex flex-1 justify-center overflow-auto bg-gray-100 p-4", children: _jsxs("div", { style: { width: VIEWPORT_WIDTHS[viewport], maxWidth: '100%', transition: 'width 0.3s' }, className: "relative", children: [loading && (_jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-white/80", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600" }) })), _jsx("iframe", { ref: iframeRef, src: previewSrc, className: "h-full w-full rounded-lg border border-gray-200 bg-white shadow-lg", style: { minHeight: '600px' }, onLoad: () => setLoading(false), title: "Page Preview" })] }) })] }));
+    return (_jsxs("div", { className: "flex h-full flex-col border-l border-gray-200 bg-white", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 bg-gray-50 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [[
+                                ['desktop', Monitor],
+                                ['tablet', Tablet],
+                                ['mobile', Smartphone],
+                            ].map(([vp, Icon]) => (_jsx("button", { onClick: () => setViewport(vp), className: `rounded p-1.5 ${viewport === vp ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-400 hover:text-gray-600'}`, title: vp, children: _jsx(Icon, { className: "h-4 w-4" }) }, vp))), _jsx("span", { className: "ml-2 inline-flex items-center gap-1 rounded-full bg-white px-2 py-0.5 text-[10px] font-medium text-gray-600", title: streamStatus === 'connected'
+                                    ? 'Live preview is streaming updates from the server.'
+                                    : streamStatus === 'connecting'
+                                        ? 'Connecting to the live preview stream…'
+                                        : streamStatus === 'offline'
+                                            ? 'Live stream disconnected. Updates from this admin still work; cross-session updates will reconnect automatically.'
+                                            : 'Live preview stream idle.', children: streamStatus === 'connected' ? (_jsxs(_Fragment, { children: [_jsx(Wifi, { className: "h-3 w-3 text-green-600", "aria-hidden": true }), " Live"] })) : streamStatus === 'connecting' ? (_jsxs(_Fragment, { children: [_jsx(Wifi, { className: "h-3 w-3 animate-pulse text-blue-500", "aria-hidden": true }), " Connecting"] })) : streamStatus === 'offline' ? (_jsxs(_Fragment, { children: [_jsx(WifiOff, { className: "h-3 w-3 text-amber-500", "aria-hidden": true }), " Reconnecting"] })) : (_jsxs(_Fragment, { children: [_jsx(WifiOff, { className: "h-3 w-3 text-gray-400", "aria-hidden": true }), " Idle"] })) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: handleRefresh, className: "rounded p-1.5 text-gray-400 hover:text-gray-600", title: "Refresh", children: _jsx(RefreshCw, { className: "h-4 w-4" }) }), _jsx("button", { onClick: handleOpenExternal, className: "rounded p-1.5 text-gray-400 hover:text-gray-600", title: "Open in new tab", children: _jsx(ExternalLink, { className: "h-4 w-4" }) }), _jsx("button", { onClick: onClose, className: "rounded p-1.5 text-gray-400 hover:text-gray-600", title: "Close", children: _jsx(X, { className: "h-4 w-4" }) })] })] }), _jsx("div", { className: "flex flex-1 justify-center overflow-auto bg-gray-100 p-4", children: _jsxs("div", { style: { width: VIEWPORT_WIDTHS[viewport], maxWidth: '100%', transition: 'width 0.3s' }, className: "relative", children: [loading && (_jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-white/80", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600" }) })), _jsx("iframe", { ref: iframeRef, src: previewSrc, className: "h-full w-full rounded-lg border border-gray-200 bg-white shadow-lg", style: { minHeight: '600px' }, onLoad: () => setLoading(false), title: "Page Preview" })] }) })] }));
 }
 //# sourceMappingURL=LivePreview.js.map

package/dist/components/LivePreview.js.map

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

package/dist/components/NotificationBell.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { type Notification, type NotificationOutcome } from '../lib/notifications-client.js';
+/**
+ * Top-bar notification bell + dropdown panel. Slice 6 of Phase 3
+ * surfaces every collaboration event that affects the current user —
+ * comment replies, resolves, and mentions — without forcing the
+ * editor to round-trip through the comments side panel.
+ *
+ * Design choices:
+ *
+ * - **Polling, not SSE.** Phase 3 already ships an SSE stream for live
+ *   previews (Phase 2 / `/preview/stream`), but extending it to
+ *   per-user notifications adds a non-trivial fan-out path and a fresh
+ *   security surface (privacy-leak risk on misconfigured streams). The
+ *   bell polls every `pollIntervalMs` (default 30s) and on dropdown
+ *   open. A push-based extension is queued as a Phase 4 follow-up.
+ * - **Optimistic read state.** When the user clicks a notification we
+ *   mark it read locally before the server confirms — so the bell
+ *   counter feels instant. Server failures roll the state back via
+ *   the `onError` toast.
+ * - **API injection.** The dependency-injection seam matches the rest
+ *   of the admin (`CommentSidePanel.api`) so unit tests can substitute
+ *   in-memory fakes.
+ */
+export interface NotificationsApi {
+    list: (opts: {
+        includeRead?: boolean;
+    }) => Promise<NotificationOutcome<Notification[]>>;
+    unread: () => Promise<NotificationOutcome<number>>;
+    markRead: (id: string) => Promise<NotificationOutcome<Notification>>;
+    markAllRead: () => Promise<NotificationOutcome<number>>;
+}
+export interface NotificationBellProps {
+    /** Polling cadence in milliseconds. Default 30,000. Pass 0 to disable. */
+    pollIntervalMs?: number;
+    /** Optional click hook — called with the notification when a row is clicked. */
+    onSelect?: (notification: Notification) => void;
+    /** Error sink — bubble server failures to a toast / banner. */
+    onError?: (message: string) => void;
+    /** Override the API client (tests). */
+    api?: NotificationsApi;
+    className?: string;
+}
+export declare function NotificationBell({ pollIntervalMs, onSelect, onError, api, className, }: NotificationBellProps): React.JSX.Element;
+//# sourceMappingURL=NotificationBell.d.ts.map

package/dist/components/NotificationBell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBell.d.ts","sourceRoot":"","sources":["../../src/components/NotificationBell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAEvE,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,mBAAmB,EAMzB,MAAM,gCAAgC,CAAA;AAEvC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,CAAC,IAAI,EAAE;QAAE,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,CAAC,CAAC,CAAA;IACvF,MAAM,EAAE,MAAM,OAAO,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAA;IAClD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAA;IACpE,WAAW,EAAE,MAAM,OAAO,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAA;CACxD;AASD,MAAM,WAAW,qBAAqB;IACpC,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAA;IAC/C,+DAA+D;IAC/D,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,uCAAuC;IACvC,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,cAAuB,EACvB,QAAQ,EACR,OAAO,EACP,GAAgB,EAChB,SAAS,GACV,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA0J3C"}