@defensestation/y-comments-blocknote 1.0.0-dev.84f89ec

package/dist/components/CreateCommentButton.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Formatting-toolbar item (same export name as v1): opens the floating
+ * composer for the current selection. Disabled when the selection is empty
+ * or the store's auth denies thread creation.
+ *
+ * Render inside BlockNote's FormattingToolbar (it uses the components
+ * context) and inside a CommentsProvider.
+ */
+export declare function CreateCommentButton(): import("react").JSX.Element | null;

package/dist/components/CreateCommentButton.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useComponentsContext } from "@blocknote/react";
+import { useCallback, useEffect, useState } from "react";
+import { useComments } from "../context.js";
+import { CommentIcon } from "./icons.js";
+/**
+ * Formatting-toolbar item (same export name as v1): opens the floating
+ * composer for the current selection. Disabled when the selection is empty
+ * or the store's auth denies thread creation.
+ *
+ * Render inside BlockNote's FormattingToolbar (it uses the components
+ * context) and inside a CommentsProvider.
+ */
+export function CreateCommentButton() {
+    const Components = useComponentsContext();
+    const { editor, store, openComposer } = useComments();
+    const [hasSelection, setHasSelection] = useState(false);
+    useEffect(() => {
+        const update = () => {
+            try {
+                setHasSelection(editor.getSelectedText().trim().length > 0);
+            }
+            catch {
+                setHasSelection(false);
+            }
+        };
+        update();
+        return editor.onSelectionChange(update);
+    }, [editor]);
+    const onClick = useCallback(() => {
+        openComposer();
+        // close the formatting toolbar so the composer (which auto-focuses its
+        // textarea) is the only thing in front of the selection
+        try {
+            const toolbar = editor.getExtension("formattingToolbar");
+            toolbar?.store?.setState(false);
+        }
+        catch {
+            // no formatting toolbar extension — nothing to close
+        }
+    }, [openComposer, editor]);
+    if (!Components) {
+        return null;
+    }
+    return (_jsx(Components.FormattingToolbar.Button, { className: "bn-button", label: "Add comment", mainTooltip: "Add comment", icon: _jsx(CommentIcon, {}), isDisabled: !hasSelection || !store.auth.canCreateThread(), onClick: onClick }));
+}

package/dist/components/FloatingComposer.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Floating comment composer, positioned at the selection captured when
+ * `openComposer()` was called (normally by CreateCommentButton).
+ *
+ * On submit: build a relative-position anchor from the selection, create the
+ * thread in the store, select it. The document is never touched.
+ */
+export declare function FloatingComposer(): import("react").JSX.Element | null;

package/dist/components/FloatingComposer.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { anchorFromRange } from "@defensestation/y-comments-prosemirror";
+import { autoUpdate, flip, offset, shift, useFloating, } from "@floating-ui/react";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { useComments } from "../context.js";
+import { OFFSCREEN_RECT } from "./floating-utils.js";
+/**
+ * Floating comment composer, positioned at the selection captured when
+ * `openComposer()` was called (normally by CreateCommentButton).
+ *
+ * On submit: build a relative-position anchor from the selection, create the
+ * thread in the store, select it. The document is never touched.
+ */
+export function FloatingComposer() {
+    const { editor, store, docId, composer, closeComposer, selectThread } = useComments();
+    const [text, setText] = useState("");
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const containerRef = useRef(null);
+    const textareaRef = useRef(null);
+    const { refs, floatingStyles, isPositioned } = useFloating({
+        open: composer !== null,
+        placement: "bottom",
+        strategy: "fixed",
+        middleware: [offset(8), flip(), shift({ padding: 8 })],
+        whileElementsMounted: autoUpdate,
+    });
+    // Anchor the popover to the selection's bounding box, recomputed live so
+    // scrolling or reflow doesn't strand it (coordsAtPos is viewport-relative).
+    useEffect(() => {
+        if (composer === null) {
+            return;
+        }
+        let view;
+        try {
+            view = editor.prosemirrorView;
+        }
+        catch {
+            return;
+        }
+        refs.setPositionReference({
+            getBoundingClientRect: () => {
+                try {
+                    const max = view.state.doc.content.size;
+                    const a = view.coordsAtPos(Math.min(composer.from, max));
+                    const b = view.coordsAtPos(Math.min(composer.to, max));
+                    const left = Math.min(a.left, b.left);
+                    const right = Math.max(a.right, b.right);
+                    const top = Math.min(a.top, b.top);
+                    const bottom = Math.max(a.bottom, b.bottom);
+                    return { x: left, y: top, left, right, top, bottom, width: right - left, height: bottom - top };
+                }
+                catch {
+                    return OFFSCREEN_RECT;
+                }
+            },
+            contextElement: view.dom,
+        });
+    }, [composer, editor, refs]);
+    useEffect(() => {
+        setText("");
+        setError(null);
+    }, [composer]);
+    // The popover mounts with visibility:hidden until floating-ui positions
+    // it, and hidden elements refuse focus — so autoFocus never fires. Focus
+    // once positioned; the rAF also lets BlockNote's post-click editor
+    // refocus settle first.
+    useEffect(() => {
+        if (composer === null || !isPositioned) {
+            return;
+        }
+        const raf = requestAnimationFrame(() => textareaRef.current?.focus());
+        return () => cancelAnimationFrame(raf);
+    }, [composer, isPositioned]);
+    // Dismiss on outside pointer-down or Escape.
+    useEffect(() => {
+        if (composer === null) {
+            return;
+        }
+        const onPointerDown = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                closeComposer();
+            }
+        };
+        const onKeyDown = (e) => {
+            if (e.key === "Escape") {
+                closeComposer();
+            }
+        };
+        document.addEventListener("mousedown", onPointerDown);
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("mousedown", onPointerDown);
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [composer, closeComposer]);
+    const submit = useCallback(() => {
+        if (composer === null) {
+            return;
+        }
+        const body = text.trim();
+        if (body.length === 0) {
+            return;
+        }
+        let anchor;
+        try {
+            const view = editor.prosemirrorView;
+            anchor = anchorFromRange(view.state, composer.from, composer.to);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+            return;
+        }
+        setBusy(true);
+        store
+            .createThread({ docId, anchor, body: { text: body } })
+            .then((thread) => {
+            setBusy(false);
+            closeComposer();
+            selectThread(thread.id);
+        })
+            .catch((err) => {
+            setBusy(false);
+            setError(err instanceof Error
+                ? `Couldn't create the comment: ${err.message}`
+                : "Couldn't create the comment — check the connection and try again.");
+        });
+    }, [composer, text, editor, store, docId, closeComposer, selectThread]);
+    const onSubmit = useCallback((e) => {
+        e.preventDefault();
+        submit();
+    }, [submit]);
+    // Enter posts the comment, Shift+Enter inserts a newline.
+    const onTextareaKeyDown = useCallback((e) => {
+        if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+            e.preventDefault();
+            submit();
+        }
+    }, [submit]);
+    if (composer === null) {
+        return null;
+    }
+    return (_jsx("div", { ref: (node) => {
+            containerRef.current = node;
+            refs.setFloating(node);
+        }, style: { ...floatingStyles, visibility: isPositioned ? undefined : "hidden" }, className: "y-comments-floating y-comments-floating-composer", "data-y-comments-composer": true, children: _jsxs("form", { className: "y-comments-composer", onSubmit: onSubmit, children: [_jsx("textarea", { ref: textareaRef, className: "y-comments-input", placeholder: "Add a comment\u2026", value: text, onChange: (e) => setText(e.target.value), onKeyDown: onTextareaKeyDown, rows: 2 }), error && (_jsx("div", { className: "y-comments-error", role: "alert", children: error })), _jsxs("div", { className: "y-comments-composer-actions", children: [_jsx("button", { type: "button", className: "y-comments-button", onClick: closeComposer, children: "Cancel" }), _jsx("button", { type: "submit", className: "y-comments-button y-comments-button-primary", disabled: text.trim().length === 0 || busy, children: busy ? "Saving…" : "Comment" })] })] }) }));
+}

package/dist/components/FloatingThread.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Popover showing the full selected thread, anchored to its highlight span
+ * in the editor. Renders only while a thread with a live highlight is
+ * selected (sidebar-only threads — orphaned/container — expand in the
+ * sidebar instead).
+ *
+ * The reference is virtual and re-queries the decoration span on every
+ * position read: ProseMirror replaces the spans whenever decorations
+ * rebuild, so holding a DOM node would leave the popover anchored to a
+ * detached element whose rect is 0,0 — the "popover in the corner" bug.
+ */
+export declare function FloatingThread(): import("react").JSX.Element | null;

package/dist/components/FloatingThread.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { autoUpdate, flip, offset, shift, useFloating, } from "@floating-ui/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useComments } from "../context.js";
+import { OFFSCREEN_RECT } from "./floating-utils.js";
+import { ThreadBody } from "./ThreadBody.js";
+/**
+ * Popover showing the full selected thread, anchored to its highlight span
+ * in the editor. Renders only while a thread with a live highlight is
+ * selected (sidebar-only threads — orphaned/container — expand in the
+ * sidebar instead).
+ *
+ * The reference is virtual and re-queries the decoration span on every
+ * position read: ProseMirror replaces the spans whenever decorations
+ * rebuild, so holding a DOM node would leave the popover anchored to a
+ * detached element whose rect is 0,0 — the "popover in the corner" bug.
+ */
+export function FloatingThread() {
+    const { editor, threads, resolutions, selectedThreadId, selectThread } = useComments();
+    const containerRef = useRef(null);
+    const [spanExists, setSpanExists] = useState(false);
+    const thread = useMemo(() => threads.find((t) => t.id === selectedThreadId) ?? null, [threads, selectedThreadId]);
+    const resolution = thread ? resolutions.get(thread.id) : undefined;
+    const hasHighlight = thread !== null &&
+        !thread.resolved &&
+        (resolution?.kind === "exact" || resolution?.kind === "reanchored");
+    const { refs, floatingStyles, isPositioned } = useFloating({
+        open: hasHighlight && spanExists,
+        placement: "bottom-start",
+        strategy: "fixed",
+        middleware: [offset(6), flip(), shift({ padding: 8 })],
+        whileElementsMounted: autoUpdate,
+    });
+    // Virtual reference resolving the *current* span on every read; re-check
+    // span existence whenever threads/resolutions change (decorations rebuild
+    // replaces the spans).
+    useEffect(() => {
+        if (!hasHighlight || thread === null) {
+            setSpanExists(false);
+            return;
+        }
+        let viewDom;
+        try {
+            viewDom = editor.prosemirrorView.dom;
+        }
+        catch {
+            setSpanExists(false);
+            return;
+        }
+        const selector = `[data-thread-id="${CSS.escape(thread.id)}"]`;
+        setSpanExists(viewDom.querySelector(selector) !== null);
+        refs.setPositionReference({
+            getBoundingClientRect: () => {
+                const span = viewDom.querySelector(selector);
+                return span ? span.getBoundingClientRect() : OFFSCREEN_RECT;
+            },
+            contextElement: viewDom,
+        });
+    }, [hasHighlight, thread, resolutions, editor, refs]);
+    // Dismiss on outside pointer-down (clicks on the highlight or inside the
+    // popover keep it open) or Escape.
+    useEffect(() => {
+        if (!hasHighlight) {
+            return;
+        }
+        const onPointerDown = (e) => {
+            const target = e.target;
+            if (containerRef.current?.contains(target)) {
+                return;
+            }
+            if (target instanceof Element && target.closest("[data-thread-id]")) {
+                return; // highlight clicks are handled by the plugin
+            }
+            selectThread(null);
+        };
+        const onKeyDown = (e) => {
+            if (e.key === "Escape") {
+                selectThread(null);
+            }
+        };
+        document.addEventListener("mousedown", onPointerDown);
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("mousedown", onPointerDown);
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [hasHighlight, selectThread]);
+    if (!hasHighlight || thread === null || !spanExists) {
+        return null;
+    }
+    return (_jsx("div", { ref: (node) => {
+            containerRef.current = node;
+            refs.setFloating(node);
+        }, style: { ...floatingStyles, visibility: isPositioned ? undefined : "hidden" }, className: "y-comments-floating y-comments-floating-thread", "data-y-comments-floating-thread": true, children: _jsx(ThreadBody, { thread: thread }) }));
+}

package/dist/components/ThreadBody.d.ts

@@ -0,0 +1,8 @@
+import type { Thread } from "@defensestation/y-comments-core";
+export interface ThreadBodyProps {
+    thread: Thread;
+    /** Render the quoted text above the comments (used by the sidebar). */
+    showQuote?: boolean;
+}
+/** Full thread: header actions, comments, reply composer. */
+export declare function ThreadBody({ thread, showQuote }: ThreadBodyProps): import("react").JSX.Element;

package/dist/components/ThreadBody.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useComments } from "../context.js";
+import { relativeTime } from "../time.js";
+import { CheckIcon, EditIcon, EmojiIcon, ReopenIcon, TrashIcon } from "./icons.js";
+const REACTION_PALETTE = ["👍", "❤️", "✅", "👀", "😄", "🎉"];
+/**
+ * Run a store action with visual failure feedback: on rejection an error
+ * line appears where the action happened, and the triggering state (draft
+ * text, edit mode) is preserved so the user can retry.
+ */
+function useStoreAction() {
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const run = useCallback((label, action, onSuccess) => {
+        setBusy(true);
+        action().then(() => {
+            setBusy(false);
+            setError(null);
+            onSuccess?.();
+        }, () => {
+            setBusy(false);
+            setError(`${label} failed — check the connection and try again.`);
+        });
+    }, []);
+    return { error, busy, run };
+}
+/** Enter submits, Shift+Enter inserts a newline (IME composition ignored). */
+function submitOnEnter(e, submit) {
+    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+        e.preventDefault();
+        submit();
+    }
+}
+function ErrorLine({ error }) {
+    if (!error) {
+        return null;
+    }
+    return (_jsx("div", { className: "y-comments-error", role: "alert", children: error }));
+}
+function Avatar({ userId }) {
+    const { users } = useComments();
+    const user = users.get(userId);
+    if (user?.avatarUrl) {
+        return _jsx("img", { className: "y-comments-avatar", src: user.avatarUrl, alt: user.username });
+    }
+    const name = user?.username ?? userId;
+    return (_jsx("span", { className: "y-comments-avatar y-comments-avatar-fallback", title: name, children: name.slice(0, 1).toUpperCase() }));
+}
+function Username({ userId }) {
+    const { users } = useComments();
+    return _jsx("span", { className: "y-comments-username", children: users.get(userId)?.username ?? userId });
+}
+function Reactions({ thread, comment }) {
+    const { store } = useComments();
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const pickerWrapRef = useRef(null);
+    const { error, run } = useStoreAction();
+    // Dismiss the palette on outside pointer-down, like any popover.
+    useEffect(() => {
+        if (!pickerOpen) {
+            return;
+        }
+        const onPointerDown = (e) => {
+            if (pickerWrapRef.current && !pickerWrapRef.current.contains(e.target)) {
+                setPickerOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", onPointerDown);
+        return () => document.removeEventListener("mousedown", onPointerDown);
+    }, [pickerOpen]);
+    const toggle = (emoji, mine) => {
+        const input = { threadId: thread.id, commentId: comment.id, emoji };
+        run("Reaction", () => (mine ? store.deleteReaction(input) : store.addReaction(input)));
+        setPickerOpen(false);
+    };
+    const canReact = store.auth.canAddReaction(comment);
+    return (_jsxs("div", { className: "y-comments-reactions", children: [comment.reactions.map((reaction) => {
+                const mine = store.auth.canDeleteReaction(comment, reaction.emoji);
+                return (_jsxs("button", { type: "button", className: `y-comments-reaction${mine ? " y-comments-reaction-mine" : ""}`, title: reaction.userIds.join(", "), onClick: () => (mine || canReact ? toggle(reaction.emoji, mine) : undefined), children: [reaction.emoji, " ", reaction.userIds.length] }, reaction.emoji));
+            }), canReact && (_jsxs("span", { className: "y-comments-reaction-picker-wrap", ref: pickerWrapRef, children: [_jsx("button", { type: "button", className: "y-comments-icon-button", "aria-label": "Add reaction", onClick: () => setPickerOpen((open) => !open), children: _jsx(EmojiIcon, {}) }), pickerOpen && (_jsx("span", { className: "y-comments-reaction-picker", role: "menu", children: REACTION_PALETTE.map((emoji) => (_jsx("button", { type: "button", className: "y-comments-reaction", onClick: () => toggle(emoji, comment.reactions.some((r) => r.emoji === emoji && store.auth.canDeleteReaction(comment, emoji))), children: emoji }, emoji))) }))] })), _jsx(ErrorLine, { error: error })] }));
+}
+function CommentView({ thread, comment }) {
+    const { store, requestUsers } = useComments();
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState(comment.body.text);
+    const { error, busy, run } = useStoreAction();
+    useEffect(() => requestUsers([comment.userId]), [comment.userId, requestUsers]);
+    const submitEdit = () => {
+        const text = draft.trim();
+        if (text.length === 0) {
+            return;
+        }
+        // stay in edit mode (draft intact) unless the save succeeds
+        run("Saving the edit", () => store.updateComment({ threadId: thread.id, commentId: comment.id, body: { text } }), () => setEditing(false));
+    };
+    const onEditKeyDown = (e) => {
+        if (e.key === "Escape") {
+            // cancel just the edit — don't let the floating thread's document
+            // Escape handler close the whole popover
+            e.stopPropagation();
+            setEditing(false);
+            return;
+        }
+        submitOnEnter(e, submitEdit);
+    };
+    return (_jsxs("div", { className: "y-comments-comment", "data-comment-id": comment.id, children: [_jsxs("div", { className: "y-comments-comment-header", children: [_jsx(Avatar, { userId: comment.userId }), _jsx(Username, { userId: comment.userId }), _jsxs("span", { className: "y-comments-timestamp", title: comment.createdAt, children: [relativeTime(comment.createdAt), comment.updatedAt ? " (edited)" : ""] }), _jsxs("span", { className: "y-comments-comment-actions", children: [store.auth.canUpdateComment(comment) && (_jsx("button", { type: "button", className: "y-comments-icon-button", "aria-label": "Edit comment", onClick: () => {
+                                    setDraft(comment.body.text);
+                                    setEditing((v) => !v);
+                                }, children: _jsx(EditIcon, {}) })), store.auth.canDeleteComment(comment) && (_jsx("button", { type: "button", className: "y-comments-icon-button", "aria-label": "Delete comment", onClick: () => run("Deleting the comment", () => store.deleteComment({ threadId: thread.id, commentId: comment.id })), children: _jsx(TrashIcon, {}) }))] })] }), editing ? (_jsxs("form", { className: "y-comments-composer", onSubmit: (e) => {
+                    e.preventDefault();
+                    submitEdit();
+                }, children: [_jsx("textarea", { className: "y-comments-input", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: onEditKeyDown, rows: 2, autoFocus: true }), _jsx(ErrorLine, { error: error }), _jsxs("div", { className: "y-comments-composer-actions", children: [_jsx("button", { type: "button", className: "y-comments-button", onClick: () => setEditing(false), children: "Cancel" }), _jsx("button", { type: "submit", className: "y-comments-button y-comments-button-primary", disabled: busy, children: "Save" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "y-comments-comment-body", children: comment.body.text }), _jsx(ErrorLine, { error: error })] })), _jsx(Reactions, { thread: thread, comment: comment })] }));
+}
+/** Full thread: header actions, comments, reply composer. */
+export function ThreadBody({ thread, showQuote }) {
+    const { store, requestUsers } = useComments();
+    const [reply, setReply] = useState("");
+    const headerAction = useStoreAction();
+    const replyAction = useStoreAction();
+    const commentsRef = useRef(null);
+    // Follow the newest comment unless the user scrolled up to read history;
+    // scrolling back near the bottom re-pins.
+    const pinnedToBottom = useRef(true);
+    // Smooth scrolling emits scroll events from positions the user never
+    // chose; don't let those unpin (only a wheel/touch takeover does).
+    const autoScrolling = useRef(false);
+    const commentCount = useRef(thread.comments.length);
+    const scrollToLatest = useCallback((behavior) => {
+        const el = commentsRef.current;
+        if (!el) {
+            return;
+        }
+        if (typeof el.scrollTo === "function") {
+            autoScrolling.current = behavior === "smooth";
+            el.scrollTo({ top: el.scrollHeight, behavior });
+        }
+        else {
+            el.scrollTop = el.scrollHeight; // jsdom
+        }
+    }, []);
+    // Open showing the latest comment.
+    useEffect(() => {
+        scrollToLatest("auto");
+    }, [scrollToLatest]);
+    useEffect(() => {
+        const grew = thread.comments.length > commentCount.current;
+        commentCount.current = thread.comments.length;
+        if (grew && pinnedToBottom.current) {
+            scrollToLatest("smooth");
+        }
+    }, [thread.comments.length, scrollToLatest]);
+    const onCommentsScroll = () => {
+        const el = commentsRef.current;
+        if (!el) {
+            return;
+        }
+        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
+        if (autoScrolling.current) {
+            if (nearBottom) {
+                autoScrolling.current = false; // arrived
+                pinnedToBottom.current = true;
+            }
+            return;
+        }
+        pinnedToBottom.current = nearBottom;
+    };
+    // A wheel or touch means the user took over, even mid-animation.
+    const onUserScrollIntent = () => {
+        autoScrolling.current = false;
+    };
+    const userIds = useMemo(() => Array.from(new Set(thread.comments.map((c) => c.userId))), [thread.comments]);
+    useEffect(() => requestUsers(userIds), [userIds, requestUsers]);
+    const submitReply = () => {
+        const text = reply.trim();
+        if (text.length === 0) {
+            return;
+        }
+        // the draft is only cleared once the reply actually saved
+        replyAction.run("Sending the reply", () => store.addComment({ threadId: thread.id, body: { text } }), () => {
+            setReply("");
+            // your own reply always comes into view, even if you were scrolled up
+            pinnedToBottom.current = true;
+        });
+    };
+    return (_jsxs("div", { className: "y-comments-thread", "data-thread-body": thread.id, children: [_jsxs("div", { className: "y-comments-thread-header", children: [thread.outdated && _jsx("span", { className: "y-comments-badge", children: "Outdated" }), thread.resolved && _jsx("span", { className: "y-comments-badge y-comments-badge-resolved", children: "Resolved" }), _jsx("span", { className: "y-comments-thread-header-spacer" }), !thread.resolved && store.auth.canResolveThread(thread) && (_jsx("button", { type: "button", className: "y-comments-icon-button", "aria-label": "Resolve thread", title: "Resolve", onClick: () => headerAction.run("Resolving", () => store.resolveThread({ threadId: thread.id })), children: _jsx(CheckIcon, {}) })), thread.resolved && store.auth.canUnresolveThread(thread) && (_jsx("button", { type: "button", className: "y-comments-icon-button", "aria-label": "Reopen thread", title: "Reopen", onClick: () => headerAction.run("Reopening", () => store.unresolveThread({ threadId: thread.id })), children: _jsx(ReopenIcon, {}) })), store.auth.canDeleteThread(thread) && (_jsx("button", { type: "button", className: "y-comments-icon-button", "aria-label": "Delete thread", title: "Delete thread", onClick: () => headerAction.run("Deleting the thread", () => store.deleteThread({ threadId: thread.id })), children: _jsx(TrashIcon, {}) }))] }), _jsx(ErrorLine, { error: headerAction.error }), showQuote && thread.anchor.quotedText && (_jsx("blockquote", { className: "y-comments-quote", children: thread.anchor.quotedText })), _jsx("div", { className: "y-comments-comments", ref: commentsRef, onScroll: onCommentsScroll, onWheel: onUserScrollIntent, onTouchMove: onUserScrollIntent, children: thread.comments.map((comment) => (_jsx(CommentView, { thread: thread, comment: comment }, comment.id))) }), store.auth.canAddComment(thread) && (_jsxs("form", { className: "y-comments-composer", onSubmit: (e) => {
+                    e.preventDefault();
+                    submitReply();
+                }, children: [_jsx("textarea", { className: "y-comments-input", placeholder: "Reply\u2026", value: reply, onChange: (e) => setReply(e.target.value), onKeyDown: (e) => submitOnEnter(e, submitReply), rows: 1 }), _jsx(ErrorLine, { error: replyAction.error }), _jsx("div", { className: "y-comments-composer-actions", children: _jsx("button", { type: "submit", className: "y-comments-button y-comments-button-primary", disabled: reply.trim().length === 0 || replyAction.busy, children: "Reply" }) })] }))] }));
+}

package/dist/components/ThreadsSidebar.d.ts

@@ -0,0 +1,13 @@
+export type ThreadsFilter = "open" | "resolved" | "all";
+export interface ThreadsSidebarProps {
+    /** Initial filter. The user can change it via the built-in control. */
+    defaultFilter?: ThreadsFilter;
+    className?: string;
+}
+/**
+ * All threads for the document, ordered by their resolved position in the
+ * doc. Threads whose anchor no longer resolves to text (container/orphaned)
+ * or that the store marked `outdated` are grouped last under "Outdated",
+ * showing their stored quote — the GitHub outdated-review-comment pattern.
+ */
+export declare function ThreadsSidebar({ defaultFilter, className }: ThreadsSidebarProps): import("react").JSX.Element;

package/dist/components/ThreadsSidebar.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useComments } from "../context.js";
+import { ThreadBody } from "./ThreadBody.js";
+const FILTERS = [
+    { value: "open", label: "Open" },
+    { value: "resolved", label: "Resolved" },
+    { value: "all", label: "All" },
+];
+/**
+ * All threads for the document, ordered by their resolved position in the
+ * doc. Threads whose anchor no longer resolves to text (container/orphaned)
+ * or that the store marked `outdated` are grouped last under "Outdated",
+ * showing their stored quote — the GitHub outdated-review-comment pattern.
+ */
+export function ThreadsSidebar({ defaultFilter = "open", className }) {
+    const { editor, threads, resolutions, selectedThreadId, selectThread } = useComments();
+    const [filter, setFilter] = useState(defaultFilter);
+    const { positioned, outdated } = useMemo(() => {
+        const visible = threads.filter((t) => filter === "all" ? true : filter === "resolved" ? t.resolved : !t.resolved);
+        const positioned = [];
+        const outdated = [];
+        for (const thread of visible) {
+            const resolution = resolutions.get(thread.id);
+            if (!thread.outdated &&
+                (resolution?.kind === "exact" || resolution?.kind === "reanchored")) {
+                positioned.push({ thread, at: resolution.from.index });
+            }
+            else {
+                outdated.push(thread);
+            }
+        }
+        positioned.sort((a, b) => a.at - b.at);
+        outdated.sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+        return { positioned, outdated };
+    }, [threads, resolutions, filter]);
+    const focusThread = (thread, scroll) => {
+        selectThread(thread.id);
+        if (!scroll) {
+            return;
+        }
+        try {
+            const span = editor.prosemirrorView.dom.querySelector(`[data-thread-id="${CSS.escape(thread.id)}"]`);
+            if (span) {
+                span.scrollIntoView({ behavior: "smooth", block: "center" });
+                span.classList.add("y-comments-flash");
+                setTimeout(() => span.classList.remove("y-comments-flash"), 1200);
+            }
+        }
+        catch {
+            // editor unmounted
+        }
+    };
+    // Cards contain their own controls (reply box, resolve/delete buttons);
+    // interacting with those must not re-select the thread or yank the editor
+    // scroll position.
+    const isInteractive = (target) => target instanceof Element &&
+        target.closest("button, textarea, input, a, [contenteditable]") !== null;
+    const renderCard = (thread, scrollOnClick) => (_jsx("div", { role: "button", tabIndex: 0, className: `y-comments-card${thread.id === selectedThreadId ? " y-comments-card-selected" : ""}`, "data-thread-card": thread.id, onClick: (e) => {
+            if (!isInteractive(e.target)) {
+                focusThread(thread, scrollOnClick);
+            }
+        }, onKeyDown: (e) => {
+            if (e.key === "Enter" && e.target === e.currentTarget) {
+                focusThread(thread, scrollOnClick);
+            }
+        }, children: _jsx(ThreadBody, { thread: thread, showQuote: true }) }, thread.id));
+    return (_jsxs("aside", { className: `y-comments-sidebar${className ? ` ${className}` : ""}`, children: [_jsxs("div", { className: "y-comments-sidebar-header", children: [_jsx("span", { className: "y-comments-sidebar-title", children: "Comments" }), _jsx("span", { className: "y-comments-filter", role: "tablist", children: FILTERS.map((f) => (_jsx("button", { type: "button", role: "tab", "aria-selected": filter === f.value, className: `y-comments-filter-button${filter === f.value ? " y-comments-filter-button-active" : ""}`, onClick: () => setFilter(f.value), children: f.label }, f.value))) })] }), positioned.length === 0 && outdated.length === 0 && (_jsx("div", { className: "y-comments-empty", children: "No comments" })), positioned.map(({ thread }) => renderCard(thread, true)), outdated.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "y-comments-group-label", children: "Outdated" }), outdated.map((thread) => renderCard(thread, false))] }))] }));
+}

package/dist/components/floating-utils.d.ts

@@ -0,0 +1,12 @@
+/** Rect returned while a floating element's anchor is missing — parks the
+ * popover far off-screen instead of the viewport's top-left corner. */
+export declare const OFFSCREEN_RECT: {
+    x: number;
+    y: number;
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+};

package/dist/components/floating-utils.js

@@ -0,0 +1,12 @@
+/** Rect returned while a floating element's anchor is missing — parks the
+ * popover far off-screen instead of the viewport's top-left corner. */
+export const OFFSCREEN_RECT = {
+    x: -9999,
+    y: -9999,
+    top: -9999,
+    left: -9999,
+    right: -9999,
+    bottom: -9999,
+    width: 0,
+    height: 0,
+};

package/dist/components/icons.d.ts

@@ -0,0 +1,8 @@
+import type { SVGProps } from "react";
+export declare const CommentIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const CheckIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const ReopenIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const TrashIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const EditIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const EmojiIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const CloseIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;