@tldraw/commenting 0.0.0-bootstrap

package/dist-esm/index.mjs

@@ -0,0 +1,139 @@
+import { registerTldrawLibraryVersion } from "@tldraw/utils";
+import { Avatar } from "./ui/avatar.mjs";
+import { Byline } from "./ui/byline.mjs";
+import { CommentCard } from "./ui/comment-card.mjs";
+import { CommentComposer } from "./ui/comment-composer.mjs";
+import { CountBadge } from "./ui/count-badge.mjs";
+import { CommentPin } from "./ui/comment-pin.mjs";
+import { CommentText } from "./ui/comment-text.mjs";
+import { CommentThread } from "./ui/comment-thread.mjs";
+import { CommentsList } from "./ui/comments-list.mjs";
+import { EmptyState } from "./ui/empty-state.mjs";
+import { formatRelativeTime } from "./ui/format-time.mjs";
+import { Mention } from "./ui/mention.mjs";
+import { MentionList } from "./ui/mention-list.mjs";
+import {
+  createMentionSuggestion,
+  filterMentionMembers
+} from "./ui/mention-suggestion.mjs";
+import { Reaction } from "./ui/reaction.mjs";
+import { Reactions } from "./ui/reactions.mjs";
+import { renderMarkdown } from "./ui/render-markdown.mjs";
+import { SendButton } from "./ui/send-button.mjs";
+import { CommentBody } from "./canvas/comment-body.mjs";
+import {
+  CommentTool,
+  commentToolOverrides,
+  commentTools
+} from "./canvas/comment-tool.mjs";
+import { collectClusterLeaves } from "./canvas/cluster-input.mjs";
+import { computeClusterTable } from "./clustering/computeClusterTable.mjs";
+import {
+  getCommentRecord,
+  getComments,
+  getCommentThreads,
+  putCommentRecords,
+  removeCommentRecords
+} from "./canvas/comment-store.mjs";
+import { createClusterRuntime } from "./clustering/runtime.mjs";
+import { CommentsFilterMenu } from "./canvas/comments-filter-menu.mjs";
+import { CommentsMenuItem } from "./canvas/comments-menu-item.mjs";
+import { CanvasComments } from "./canvas/comments-overlay.mjs";
+import {
+  defaultCommentingOptions,
+  getCommentingOptions,
+  useCommentingOptions
+} from "./canvas/options.mjs";
+import { CommentsOverflowMenu } from "./canvas/comments-overflow-menu.mjs";
+import { CanvasCommentsSidebar } from "./canvas/comments-sidebar.mjs";
+import { useComments, useCommentThreads, useThreadComments } from "./canvas/hooks.mjs";
+import { useCommentingEnabled } from "./canvas/license.mjs";
+import { DEFAULT_REGION_COMMENT_OPTIONS } from "./canvas/region-options.mjs";
+import { richTextToPlaintext } from "./canvas/rich-text.mjs";
+import { DEFAULT_SIDEBAR_FILTERS } from "./canvas/sidebar-filters.mjs";
+import {
+  commentsHidden,
+  commitCommentMutation,
+  openThreadId,
+  pendingComment,
+  sidebarFilters,
+  toggleCommentsHidden,
+  useCommentsHidden,
+  useOpenThreadId,
+  usePendingComment,
+  useSidebarFilters
+} from "./canvas/state.mjs";
+import {
+  anchorPagePoint,
+  DEFAULT_IMPRECISE_SHAPE_ANCHOR,
+  focusThread,
+  shapeAnchorAt
+} from "./canvas/thread-state.mjs";
+registerTldrawLibraryVersion(
+  "@tldraw/commenting",
+  "0.0.0-bootstrap",
+  "esm"
+);
+export {
+  Avatar,
+  Byline,
+  CanvasComments,
+  CanvasCommentsSidebar,
+  CommentBody,
+  CommentCard,
+  CommentComposer,
+  CommentPin,
+  CommentText,
+  CommentThread,
+  CommentTool,
+  CommentsFilterMenu,
+  CommentsList,
+  CommentsMenuItem,
+  CommentsOverflowMenu,
+  CountBadge,
+  DEFAULT_IMPRECISE_SHAPE_ANCHOR,
+  DEFAULT_REGION_COMMENT_OPTIONS,
+  DEFAULT_SIDEBAR_FILTERS,
+  EmptyState,
+  Mention,
+  MentionList,
+  Reaction,
+  Reactions,
+  SendButton,
+  anchorPagePoint,
+  collectClusterLeaves,
+  commentToolOverrides,
+  commentTools,
+  commentsHidden,
+  commitCommentMutation,
+  computeClusterTable,
+  createClusterRuntime,
+  createMentionSuggestion,
+  defaultCommentingOptions,
+  filterMentionMembers,
+  focusThread,
+  formatRelativeTime,
+  getCommentRecord,
+  getCommentThreads,
+  getCommentingOptions,
+  getComments,
+  openThreadId,
+  pendingComment,
+  putCommentRecords,
+  removeCommentRecords,
+  renderMarkdown,
+  richTextToPlaintext,
+  shapeAnchorAt,
+  sidebarFilters,
+  toggleCommentsHidden,
+  useCommentThreads,
+  useCommentingEnabled,
+  useCommentingOptions,
+  useComments,
+  useCommentsHidden,
+  useOpenThreadId,
+  usePendingComment,
+  useSidebarFilters,
+  useThreadComments
+};
+//# sourceMappingURL=index.mjs.map

package/dist-esm/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["import { registerTldrawLibraryVersion } from '@tldraw/utils'\n\n// Presentational commenting components. These are tldraw-independent and can be used to build\n// custom commenting UI.\nexport { Avatar, type AvatarProps } from './ui/avatar'\nexport { Byline, type BylineProps } from './ui/byline'\nexport { CommentCard, type CommentCardProps } from './ui/comment-card'\nexport { CommentComposer, type CommentComposerProps } from './ui/comment-composer'\nexport { CountBadge, type CountBadgeProps } from './ui/count-badge'\nexport { CommentPin, type CommentPinProps } from './ui/comment-pin'\nexport { CommentText, type CommentTextProps } from './ui/comment-text'\nexport { CommentThread, type CommentThreadProps } from './ui/comment-thread'\nexport { CommentsList, type CommentListItemProps, type CommentsListProps } from './ui/comments-list'\nexport { EmptyState, type EmptyStateProps } from './ui/empty-state'\nexport { formatRelativeTime } from './ui/format-time'\nexport { Mention, type MentionProps } from './ui/mention'\nexport { MentionList, type MentionListProps, type MentionMember } from './ui/mention-list'\nexport {\n\tcreateMentionSuggestion,\n\tfilterMentionMembers,\n\ttype MentionSuggestionOptions,\n} from './ui/mention-suggestion'\nexport { Reaction, type ReactionProps } from './ui/reaction'\nexport { Reactions } from './ui/reactions'\nexport { renderMarkdown } from './ui/render-markdown'\nexport { SendButton, type SendButtonProps } from './ui/send-button'\n\n// The tldraw-coupled commenting layer: the comment tool, reactive hooks over the comment\n// records, a rich-text body renderer, and a batteries-included <CanvasComments> overlay. Pairs\n// with the presentational components above.\nexport { CommentBody, type CommentBodyProps } from './canvas/comment-body'\nexport {\n\tCommentTool,\n\tcommentToolOverrides,\n\tcommentTools,\n\ttype PendingComment,\n} from './canvas/comment-tool'\nexport { collectClusterLeaves } from './canvas/cluster-input'\nexport { computeClusterTable } from './clustering/computeClusterTable'\nexport {\n\tgetCommentRecord,\n\tgetComments,\n\tgetCommentThreads,\n\tputCommentRecords,\n\tremoveCommentRecords,\n\ttype TLCommentRecord,\n} from './canvas/comment-store'\nexport { createClusterRuntime, type ClusterRuntime } from './clustering/runtime'\nexport type {\n\tClusterNode,\n\tClusterOptions,\n\tClusterTable,\n\tLeafInput,\n\tMergeEvent,\n} from './clustering/types'\nexport { CommentsFilterMenu, type CommentsFilterMenuProps } from './canvas/comments-filter-menu'\nexport { CommentsMenuItem } from './canvas/comments-menu-item'\nexport { CanvasComments, type CanvasCommentsProps } from './canvas/comments-overlay'\nexport {\n\ttype CommentingComponents,\n\ttype CommentingOptions,\n\tdefaultCommentingOptions,\n\tgetCommentingOptions,\n\tuseCommentingOptions,\n} from './canvas/options'\nexport { CommentsOverflowMenu } from './canvas/comments-overflow-menu'\nexport { CanvasCommentsSidebar, type CanvasCommentsSidebarProps } from './canvas/comments-sidebar'\nexport { useComments, useCommentThreads, useThreadComments } from './canvas/hooks'\nexport { useCommentingEnabled } from './canvas/license'\nexport { DEFAULT_REGION_COMMENT_OPTIONS, type RegionCommentOptions } from './canvas/region-options'\nexport { richTextToPlaintext } from './canvas/rich-text'\nexport { DEFAULT_SIDEBAR_FILTERS, type SidebarFilters } from './canvas/sidebar-filters'\nexport {\n\tcommentsHidden,\n\tcommitCommentMutation,\n\topenThreadId,\n\tpendingComment,\n\tsidebarFilters,\n\ttoggleCommentsHidden,\n\tuseCommentsHidden,\n\tuseOpenThreadId,\n\tusePendingComment,\n\tuseSidebarFilters,\n} from './canvas/state'\nexport {\n\tanchorPagePoint,\n\tDEFAULT_IMPRECISE_SHAPE_ANCHOR,\n\tfocusThread,\n\tshapeAnchorAt,\n} from './canvas/thread-state'\n\nregisterTldrawLibraryVersion(\n\t(globalThis as any).TLDRAW_LIBRARY_NAME,\n\t(globalThis as any).TLDRAW_LIBRARY_VERSION,\n\t(globalThis as any).TLDRAW_LIBRARY_MODULES\n)\n"],
+  "mappings": "AAAA,SAAS,oCAAoC;AAI7C,SAAS,cAAgC;AACzC,SAAS,cAAgC;AACzC,SAAS,mBAA0C;AACnD,SAAS,uBAAkD;AAC3D,SAAS,kBAAwC;AACjD,SAAS,kBAAwC;AACjD,SAAS,mBAA0C;AACnD,SAAS,qBAA8C;AACvD,SAAS,oBAAuE;AAChF,SAAS,kBAAwC;AACjD,SAAS,0BAA0B;AACnC,SAAS,eAAkC;AAC3C,SAAS,mBAA8D;AACvE;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AACP,SAAS,gBAAoC;AAC7C,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,kBAAwC;AAKjD,SAAS,mBAA0C;AACnD;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AACP,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AACP,SAAS,4BAAiD;AAQ1D,SAAS,0BAAwD;AACjE,SAAS,wBAAwB;AACjC,SAAS,sBAAgD;AACzD;AAAA,EAGC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,4BAA4B;AACrC,SAAS,6BAA8D;AACvE,SAAS,aAAa,mBAAmB,yBAAyB;AAClE,SAAS,4BAA4B;AACrC,SAAS,sCAAiE;AAC1E,SAAS,2BAA2B;AACpC,SAAS,+BAAoD;AAC7D;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF;",
+  "names": []
+}

package/dist-esm/ui/avatar.mjs

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { getFirstCharacter } from "tldraw";
+function initial(name) {
+  return (getFirstCharacter(name.trim()) || "?").toUpperCase();
+}
+function Avatar({ name, color, image }) {
+  if (image) {
+    return /* @__PURE__ */ jsx("img", { className: "cmt-avatar cmt-avatar--image", src: image, alt: "", "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "cmt-avatar",
+      "aria-hidden": "true",
+      style: color ? { backgroundColor: color } : void 0,
+      children: initial(name)
+    }
+  );
+}
+export {
+  Avatar
+};
+//# sourceMappingURL=avatar.mjs.map

package/dist-esm/ui/avatar.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/avatar.tsx"],
+  "sourcesContent": ["import { getFirstCharacter } from 'tldraw'\n\n/** @public */\nexport interface AvatarProps {\n\tname: string\n\t/** Background colour, used when there's no `image`. Falls back to the default avatar tint. */\n\tcolor?: string\n\t/** Avatar image URL. When set, shows the image instead of the coloured initial. */\n\timage?: string\n}\n\nfunction initial(name: string) {\n\treturn (getFirstCharacter(name.trim()) || '?').toUpperCase()\n}\n\n/** A commenter's avatar \u2014 their image if provided, otherwise a single-initial coloured circle.\n * @public @react */\nexport function Avatar({ name, color, image }: AvatarProps) {\n\tif (image) {\n\t\treturn <img className=\"cmt-avatar cmt-avatar--image\" src={image} alt=\"\" aria-hidden=\"true\" />\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName=\"cmt-avatar\"\n\t\t\taria-hidden=\"true\"\n\t\t\tstyle={color ? { backgroundColor: color } : undefined}\n\t\t>\n\t\t\t{initial(name)}\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "AAmBS;AAnBT,SAAS,yBAAyB;AAWlC,SAAS,QAAQ,MAAc;AAC9B,UAAQ,kBAAkB,KAAK,KAAK,CAAC,KAAK,KAAK,YAAY;AAC5D;AAIO,SAAS,OAAO,EAAE,MAAM,OAAO,MAAM,GAAgB;AAC3D,MAAI,OAAO;AACV,WAAO,oBAAC,SAAI,WAAU,gCAA+B,KAAK,OAAO,KAAI,IAAG,eAAY,QAAO;AAAA,EAC5F;AACA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,OAAO,QAAQ,EAAE,iBAAiB,MAAM,IAAI;AAAA,MAE3C,kBAAQ,IAAI;AAAA;AAAA,EACd;AAEF;",
+  "names": []
+}

package/dist-esm/ui/byline.mjs

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { formatRelativeTime } from "./format-time.mjs";
+function Byline({ author, date, edited }) {
+  return /* @__PURE__ */ jsxs("div", { className: "cmt-head", children: [
+    /* @__PURE__ */ jsx("span", { className: "cmt-author", children: author }),
+    /* @__PURE__ */ jsxs("span", { className: "cmt-time", children: [
+      formatRelativeTime(date),
+      edited && /* @__PURE__ */ jsx("span", { className: "cmt-edited", children: " \xB7 edited" })
+    ] })
+  ] });
+}
+export {
+  Byline
+};
+//# sourceMappingURL=byline.mjs.map

package/dist-esm/ui/byline.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/byline.tsx"],
+  "sourcesContent": ["import { formatRelativeTime } from './format-time'\n\n/** @public */\nexport interface BylineProps {\n\tauthor: string\n\t/** ISO datetime; formatted to relative time by the component. */\n\tdate: string\n\t/** Shows an \"edited\" marker when the comment has been edited. */\n\tedited?: boolean\n}\n\n/** A comment's metadata line: author name, relative time, and an edited marker. @public @react */\nexport function Byline({ author, date, edited }: BylineProps) {\n\treturn (\n\t\t<div className=\"cmt-head\">\n\t\t\t<span className=\"cmt-author\">{author}</span>\n\t\t\t<span className=\"cmt-time\">\n\t\t\t\t{formatRelativeTime(date)}\n\t\t\t\t{edited && <span className=\"cmt-edited\"> \u00B7 edited</span>}\n\t\t\t</span>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "AAeG,cACA,YADA;AAfH,SAAS,0BAA0B;AAY5B,SAAS,OAAO,EAAE,QAAQ,MAAM,OAAO,GAAgB;AAC7D,SACC,qBAAC,SAAI,WAAU,YACd;AAAA,wBAAC,UAAK,WAAU,cAAc,kBAAO;AAAA,IACrC,qBAAC,UAAK,WAAU,YACd;AAAA,yBAAmB,IAAI;AAAA,MACvB,UAAU,oBAAC,UAAK,WAAU,cAAa,0BAAS;AAAA,OAClD;AAAA,KACD;AAEF;",
+  "names": []
+}

package/dist-esm/ui/comment-card.mjs

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "./avatar.mjs";
+import { Byline } from "./byline.mjs";
+function CommentCard({ author, body, date, you, edited, actions }) {
+  return /* @__PURE__ */ jsxs("div", { className: you ? "cmt-card cmt-card--you" : "cmt-card", children: [
+    /* @__PURE__ */ jsx(Avatar, { name: author }),
+    /* @__PURE__ */ jsxs("div", { className: "cmt-body", children: [
+      /* @__PURE__ */ jsx(Byline, { author, date, edited }),
+      body
+    ] }),
+    actions !== void 0 && /* @__PURE__ */ jsx("div", { className: "cmt-card__actions", children: actions })
+  ] });
+}
+export {
+  CommentCard
+};
+//# sourceMappingURL=comment-card.mjs.map

package/dist-esm/ui/comment-card.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/comment-card.tsx"],
+  "sourcesContent": ["import { ReactNode } from 'react'\nimport { Avatar } from './avatar'\nimport { Byline } from './byline'\n\n/** @public */\nexport interface CommentCardProps {\n\tauthor: string\n\t/** The rendered comment body. The card doesn't dictate a format \u2014 pass a `<CommentText>`\n\t *  for markdown, a rich-text render, or any node. */\n\tbody: ReactNode\n\t/** ISO datetime; formatted to relative time by the component. */\n\tdate: string\n\tyou: boolean\n\t/** Whether the comment has been edited (shows an \"edited\" marker). */\n\tedited?: boolean\n\t/** Hover-revealed controls at the card's top-right (e.g. an edit affordance). */\n\tactions?: ReactNode\n}\n\n/** A single comment: Avatar, Byline, and a body slot the consumer renders. @public @react */\nexport function CommentCard({ author, body, date, you, edited, actions }: CommentCardProps) {\n\treturn (\n\t\t<div className={you ? 'cmt-card cmt-card--you' : 'cmt-card'}>\n\t\t\t<Avatar name={author} />\n\t\t\t<div className=\"cmt-body\">\n\t\t\t\t<Byline author={author} date={date} edited={edited} />\n\t\t\t\t{body}\n\t\t\t</div>\n\t\t\t{actions !== undefined && <div className=\"cmt-card__actions\">{actions}</div>}\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "AAuBG,cACA,YADA;AAtBH,SAAS,cAAc;AACvB,SAAS,cAAc;AAkBhB,SAAS,YAAY,EAAE,QAAQ,MAAM,MAAM,KAAK,QAAQ,QAAQ,GAAqB;AAC3F,SACC,qBAAC,SAAI,WAAW,MAAM,2BAA2B,YAChD;AAAA,wBAAC,UAAO,MAAM,QAAQ;AAAA,IACtB,qBAAC,SAAI,WAAU,YACd;AAAA,0BAAC,UAAO,QAAgB,MAAY,QAAgB;AAAA,MACnD;AAAA,OACF;AAAA,IACC,YAAY,UAAa,oBAAC,SAAI,WAAU,qBAAqB,mBAAQ;AAAA,KACvE;AAEF;",
+  "names": []
+}

package/dist-esm/ui/comment-composer.mjs

@@ -0,0 +1,116 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Extension } from "@tiptap/core";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { isEqual, useMaybeEditor } from "tldraw";
+import { Avatar } from "./avatar.mjs";
+import { commentTipTapExtensions, EMPTY_COMMENT, isCommentEmpty } from "./comment-extensions.mjs";
+import { commentMention } from "./comment-mention.mjs";
+import { createMentionSuggestion, isMentionPickerOpen } from "./mention-suggestion.mjs";
+import { SendButton } from "./send-button.mjs";
+function CommentComposer({
+  author,
+  placeholder,
+  value,
+  onChange,
+  onSubmit,
+  sendLabel = "Send",
+  disabled,
+  autoFocus,
+  leading,
+  getMentionSuggestions,
+  renderMentionSuggestion
+}) {
+  const interactive = !!onChange || !!onSubmit;
+  const tlEditor = useMaybeEditor();
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const onSubmitRef = useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
+  const disabledRef = useRef(disabled);
+  disabledRef.current = disabled;
+  const getMentionSuggestionsRef = useRef(getMentionSuggestions);
+  getMentionSuggestionsRef.current = getMentionSuggestions;
+  const renderMentionSuggestionRef = useRef(renderMentionSuggestion);
+  renderMentionSuggestionRef.current = renderMentionSuggestion;
+  const [isEmpty, setIsEmpty] = useState(() => !value || isCommentEmpty(value));
+  const submitExtension = useMemo(
+    () => Extension.create({
+      name: "commentComposerSubmit",
+      priority: 1e3,
+      addKeyboardShortcuts() {
+        return {
+          Enter: () => {
+            if (isMentionPickerOpen()) return false;
+            if (!disabledRef.current) onSubmitRef.current?.();
+            return true;
+          }
+        };
+      }
+    }),
+    []
+  );
+  const mentionsEnabled = !!getMentionSuggestions;
+  const hasCustomRow = !!renderMentionSuggestion;
+  const extensions = useMemo(() => {
+    const list = [...commentTipTapExtensions, submitExtension];
+    if (mentionsEnabled) {
+      const resolveSuggestions = (query) => getMentionSuggestionsRef.current?.(query) ?? [];
+      const renderRow = hasCustomRow ? (member) => renderMentionSuggestionRef.current?.(member) : void 0;
+      list.push(
+        commentMention({
+          suggestion: createMentionSuggestion(resolveSuggestions, {
+            renderMember: renderRow,
+            editor: tlEditor
+          })
+        })
+      );
+    } else {
+      list.push(commentMention({ suggestion: { char: "@", allow: () => false } }));
+    }
+    return list;
+  }, [submitExtension, mentionsEnabled, hasCustomRow, tlEditor]);
+  const editor = useEditor(
+    {
+      extensions,
+      content: value ?? EMPTY_COMMENT,
+      editable: interactive,
+      // tldraw's default extensions add their own TextDirection extension (so it can be
+      // overridden), so disable TipTap's core one to avoid a duplicate-extension warning —
+      // mirrors RichTextArea's setup.
+      enableCoreExtensions: { textDirection: false },
+      textDirection: "auto",
+      editorProps: { attributes: { class: "cmt-input" } },
+      onUpdate: ({ editor: editor2 }) => {
+        setIsEmpty(editor2.isEmpty);
+        onChangeRef.current?.(editor2.getJSON());
+      }
+    },
+    [interactive]
+  );
+  useEffect(() => {
+    if (!editor || value === void 0) return;
+    if (isEqual(editor.getJSON(), value)) return;
+    editor.commands.setContent(value);
+    setIsEmpty(editor.isEmpty);
+  }, [editor, value]);
+  useEffect(() => {
+    if (!autoFocus || !editor) return;
+    const raf = requestAnimationFrame(() => editor.commands.focus("end"));
+    return () => cancelAnimationFrame(raf);
+  }, [autoFocus, editor]);
+  return /* @__PURE__ */ jsxs("div", { className: "cmt-composer", children: [
+    leading ?? /* @__PURE__ */ jsx(Avatar, { name: author }),
+    /* @__PURE__ */ jsxs("div", { className: "cmt-composer__field", children: [
+      /* @__PURE__ */ jsxs("div", { className: "cmt-composer__input-wrap", children: [
+        /* @__PURE__ */ jsx(EditorContent, { editor }),
+        isEmpty && /* @__PURE__ */ jsx("div", { className: "cmt-input__placeholder", "aria-hidden": "true", children: placeholder })
+      ] }),
+      interactive && /* @__PURE__ */ jsx(SendButton, { label: sendLabel, onClick: onSubmit, disabled })
+    ] })
+  ] });
+}
+export {
+  CommentComposer
+};
+//# sourceMappingURL=comment-composer.mjs.map

package/dist-esm/ui/comment-composer.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/comment-composer.tsx"],
+  "sourcesContent": ["import { Extension, JSONContent } from '@tiptap/core'\nimport { EditorContent, useEditor } from '@tiptap/react'\nimport { ReactNode, useEffect, useMemo, useRef, useState } from 'react'\nimport { isEqual, TLRichText, useMaybeEditor } from 'tldraw'\nimport { Avatar } from './avatar'\nimport { commentTipTapExtensions, EMPTY_COMMENT, isCommentEmpty } from './comment-extensions'\nimport { commentMention } from './comment-mention'\nimport { MentionMember } from './mention-list'\nimport { createMentionSuggestion, isMentionPickerOpen } from './mention-suggestion'\nimport { SendButton } from './send-button'\n\n/** @public */\nexport interface CommentComposerProps {\n\tauthor: string\n\tplaceholder: string\n\t/** Controlled rich-text value. Omit for the presentational (display-only) composer. */\n\tvalue?: TLRichText\n\tonChange?(value: TLRichText): void\n\t/** Called on Send click or Enter. When set, the composer is interactive. */\n\tonSubmit?(): void\n\tsendLabel?: string\n\tdisabled?: boolean\n\tautoFocus?: boolean\n\t/** The leading element before the field. Defaults to the author's avatar. */\n\tleading?: ReactNode\n\t/** Resolve the members matching an `@`-query (sync or async). Provide to enable mentions. */\n\tgetMentionSuggestions?(query: string): MentionMember[] | Promise<MentionMember[]>\n\t/** Override a picker row's content. Defaults to avatar + name (+ secondary). */\n\trenderMentionSuggestion?(member: MentionMember): ReactNode\n}\n\n/**\n * The input for writing a comment: a TipTap rich-text editor restricted to the comment extension\n * set (bold, italic, lists, links, code, highlight \u2014 no headings), with a Send button. Formatting\n * is applied through markdown and keyboard shortcuts (e.g. `**bold**`, `- `, Cmd+B); there's no\n * floating toolbar. Presentational by default; pass value/onChange/onSubmit to drive it as a form.\n * @public @react\n */\nexport function CommentComposer({\n\tauthor,\n\tplaceholder,\n\tvalue,\n\tonChange,\n\tonSubmit,\n\tsendLabel = 'Send',\n\tdisabled,\n\tautoFocus,\n\tleading,\n\tgetMentionSuggestions,\n\trenderMentionSuggestion,\n}: CommentComposerProps) {\n\tconst interactive = !!onChange || !!onSubmit\n\t// The canvas editor the composer lives in, if any \u2014 lets the mention popup track the camera. Null\n\t// when the composer is used outside a tldraw editor (e.g. an isolated demo).\n\tconst tlEditor = useMaybeEditor()\n\n\t// Callbacks are read through refs so the editor instance doesn't need to be recreated when they\n\t// change identity between renders.\n\tconst onChangeRef = useRef(onChange)\n\tonChangeRef.current = onChange\n\tconst onSubmitRef = useRef(onSubmit)\n\tonSubmitRef.current = onSubmit\n\tconst disabledRef = useRef(disabled)\n\tdisabledRef.current = disabled\n\tconst getMentionSuggestionsRef = useRef(getMentionSuggestions)\n\tgetMentionSuggestionsRef.current = getMentionSuggestions\n\tconst renderMentionSuggestionRef = useRef(renderMentionSuggestion)\n\trenderMentionSuggestionRef.current = renderMentionSuggestion\n\n\tconst [isEmpty, setIsEmpty] = useState(() => !value || isCommentEmpty(value))\n\n\t// Enter submits the comment. Shift+Enter (and Cmd/Ctrl+Enter) keep their default behavior \u2014 a\n\t// new line \u2014 for the occasional multi-line comment.\n\tconst submitExtension = useMemo(\n\t\t() =>\n\t\t\tExtension.create({\n\t\t\t\tname: 'commentComposerSubmit',\n\t\t\t\tpriority: 1000,\n\t\t\t\taddKeyboardShortcuts() {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tEnter: () => {\n\t\t\t\t\t\t\t// While the @-mention picker is open, Enter selects the highlighted member.\n\t\t\t\t\t\t\t// This extension outranks the mention plugin (priority 1000), so defer to the\n\t\t\t\t\t\t\t// picker here or Enter would submit before the member could be inserted.\n\t\t\t\t\t\t\tif (isMentionPickerOpen()) return false\n\t\t\t\t\t\t\tif (!disabledRef.current) onSubmitRef.current?.()\n\t\t\t\t\t\t\treturn true\n\t\t\t\t\t\t},\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t}),\n\t\t[]\n\t)\n\n\t// The suggestion plugin is built once (the editor is recreated only on `interactive`) and runs\n\t// outside React, so it must read the mention callbacks through refs \u2014 like onChange/onSubmit \u2014\n\t// or it queries the roster present at mount forever, never seeing a member who loads or joins\n\t// later. Whether mentions (and a custom picker row) are wired at all is fixed at mount; only the\n\t// callbacks themselves are live.\n\tconst mentionsEnabled = !!getMentionSuggestions\n\tconst hasCustomRow = !!renderMentionSuggestion\n\tconst extensions = useMemo(() => {\n\t\tconst list = [...commentTipTapExtensions, submitExtension]\n\t\t// Always register the mention node so an existing body that contains a mention keeps it on\n\t\t// edit (an unregistered node would be stripped by ProseMirror when the content loads). The `@`\n\t\t// picker itself only turns on when the host provides a resolver; otherwise the node is present\n\t\t// but its trigger is disabled.\n\t\tif (mentionsEnabled) {\n\t\t\tconst resolveSuggestions = (query: string) => getMentionSuggestionsRef.current?.(query) ?? []\n\t\t\tconst renderRow = hasCustomRow\n\t\t\t\t? (member: MentionMember) => renderMentionSuggestionRef.current?.(member)\n\t\t\t\t: undefined\n\t\t\tlist.push(\n\t\t\t\tcommentMention({\n\t\t\t\t\tsuggestion: createMentionSuggestion(resolveSuggestions, {\n\t\t\t\t\t\trenderMember: renderRow,\n\t\t\t\t\t\teditor: tlEditor,\n\t\t\t\t\t}),\n\t\t\t\t})\n\t\t\t)\n\t\t} else {\n\t\t\tlist.push(commentMention({ suggestion: { char: '@', allow: () => false } }))\n\t\t}\n\t\treturn list\n\t}, [submitExtension, mentionsEnabled, hasCustomRow, tlEditor])\n\n\tconst editor = useEditor(\n\t\t{\n\t\t\textensions,\n\t\t\tcontent: (value ?? EMPTY_COMMENT) as JSONContent,\n\t\t\teditable: interactive,\n\t\t\t// tldraw's default extensions add their own TextDirection extension (so it can be\n\t\t\t// overridden), so disable TipTap's core one to avoid a duplicate-extension warning \u2014\n\t\t\t// mirrors RichTextArea's setup.\n\t\t\tenableCoreExtensions: { textDirection: false },\n\t\t\ttextDirection: 'auto',\n\t\t\teditorProps: { attributes: { class: 'cmt-input' } },\n\t\t\tonUpdate: ({ editor }) => {\n\t\t\t\tsetIsEmpty(editor.isEmpty)\n\t\t\t\tonChangeRef.current?.(editor.getJSON() as TLRichText)\n\t\t\t},\n\t\t},\n\t\t[interactive]\n\t)\n\n\t// Sync controlled resets (e.g. the parent clearing to EMPTY_COMMENT after posting) into the\n\t// editor without echoing back the value the editor itself just emitted.\n\tuseEffect(() => {\n\t\tif (!editor || value === undefined) return\n\t\tif (isEqual(editor.getJSON(), value)) return\n\t\teditor.commands.setContent(value as JSONContent)\n\t\tsetIsEmpty(editor.isEmpty)\n\t}, [editor, value])\n\n\t// Focus on the next frame rather than via TipTap's autofocus: the composer often mounts from a\n\t// canvas pointer event whose default focus handling would otherwise steal it back.\n\tuseEffect(() => {\n\t\tif (!autoFocus || !editor) return\n\t\tconst raf = requestAnimationFrame(() => editor.commands.focus('end'))\n\t\treturn () => cancelAnimationFrame(raf)\n\t}, [autoFocus, editor])\n\n\treturn (\n\t\t<div className=\"cmt-composer\">\n\t\t\t{leading ?? <Avatar name={author} />}\n\t\t\t<div className=\"cmt-composer__field\">\n\t\t\t\t<div className=\"cmt-composer__input-wrap\">\n\t\t\t\t\t<EditorContent editor={editor} />\n\t\t\t\t\t{isEmpty && (\n\t\t\t\t\t\t<div className=\"cmt-input__placeholder\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{interactive && <SendButton label={sendLabel} onClick={onSubmit} disabled={disabled} />}\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "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",
+  "names": ["editor"]
+}

package/dist-esm/ui/comment-extensions.mjs

@@ -0,0 +1,17 @@
+import { getTipTapDefaultExtensions, toRichText } from "tldraw";
+const commentTipTapExtensions = getTipTapDefaultExtensions({ heading: false });
+const EMPTY_COMMENT = toRichText("");
+function isCommentEmpty(richText) {
+  if (richText.content.length === 0) return true;
+  if (richText.content.length === 1) {
+    const node = richText.content[0];
+    if (!node.content || node.content.length === 0) return true;
+  }
+  return false;
+}
+export {
+  EMPTY_COMMENT,
+  commentTipTapExtensions,
+  isCommentEmpty
+};
+//# sourceMappingURL=comment-extensions.mjs.map

package/dist-esm/ui/comment-extensions.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/comment-extensions.ts"],
+  "sourcesContent": ["import { getTipTapDefaultExtensions, TLRichText, toRichText } from 'tldraw'\n\n/**\n * tldraw's default rich-text extension set, minus headings \u2014 the deliberately limited set used for\n * both the comment composer and comment display. Comments support paragraphs, bold, italic, lists,\n * links, code, and highlight, but not headings. Built from tldraw's shared factory so the config\n * stays in lockstep with the text shape's defaults rather than drifting from a copy.\n */\nexport const commentTipTapExtensions = getTipTapDefaultExtensions({ heading: false })\n\n/** An empty comment document \u2014 the seed value for a fresh composer and its post-submit reset. */\nexport const EMPTY_COMMENT: TLRichText = toRichText('')\n\n/**\n * Whether a rich-text comment body has no text. Mirrors tldraw's private `isEmptyRichText`: an\n * empty doc can be encoded as an empty `content` array or a single empty paragraph.\n */\nexport function isCommentEmpty(richText: TLRichText): boolean {\n\tif (richText.content.length === 0) return true\n\tif (richText.content.length === 1) {\n\t\tconst node = richText.content[0] as any\n\t\tif (!node.content || node.content.length === 0) return true\n\t}\n\treturn false\n}\n"],
+  "mappings": "AAAA,SAAS,4BAAwC,kBAAkB;AAQ5D,MAAM,0BAA0B,2BAA2B,EAAE,SAAS,MAAM,CAAC;AAG7E,MAAM,gBAA4B,WAAW,EAAE;AAM/C,SAAS,eAAe,UAA+B;AAC7D,MAAI,SAAS,QAAQ,WAAW,EAAG,QAAO;AAC1C,MAAI,SAAS,QAAQ,WAAW,GAAG;AAClC,UAAM,OAAO,SAAS,QAAQ,CAAC;AAC/B,QAAI,CAAC,KAAK,WAAW,KAAK,QAAQ,WAAW,EAAG,QAAO;AAAA,EACxD;AACA,SAAO;AACR;",
+  "names": []
+}

package/dist-esm/ui/comment-mention.mjs

@@ -0,0 +1,22 @@
+import { mergeAttributes } from "@tiptap/core";
+import { Mention } from "@tiptap/extension-mention";
+function mentionName(attrs, resolveName) {
+  const resolved = attrs.id && resolveName ? resolveName(attrs.id) : void 0;
+  return resolved ?? attrs.label ?? attrs.id ?? "";
+}
+function commentMention({ resolveName, suggestion } = {}) {
+  return Mention.configure({
+    HTMLAttributes: { class: "cmt-mention" },
+    renderText: ({ node }) => `@${mentionName(node.attrs, resolveName)}`,
+    renderHTML: ({ node, options }) => [
+      "span",
+      mergeAttributes(options.HTMLAttributes, { "data-mention-id": node.attrs.id }),
+      `@${mentionName(node.attrs, resolveName)}`
+    ],
+    ...(suggestion ? { suggestion } : {})
+  });
+}
+export {
+  commentMention
+};
+//# sourceMappingURL=comment-mention.mjs.map

package/dist-esm/ui/comment-mention.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/comment-mention.ts"],
+  "sourcesContent": ["import { mergeAttributes } from '@tiptap/core'\nimport { Mention, type MentionNodeAttrs, type MentionOptions } from '@tiptap/extension-mention'\n\n/**\n * A mention node's display name: the member's current name, resolved live from its id when a\n * resolver is given (so a rename shows through), falling back to the label captured at insert time\n * when no source can name the id \u2014 e.g. a deleted account. The stored id is always the source of\n * truth; live resolution only freshens the displayed name over that captured label.\n */\nfunction mentionName(\n\tattrs: MentionNodeAttrs,\n\tresolveName?: (id: string) => string | undefined\n): string {\n\tconst resolved = attrs.id && resolveName ? resolveName(attrs.id) : undefined\n\treturn resolved ?? attrs.label ?? attrs.id ?? ''\n}\n\nexport interface CommentMentionOptions {\n\t/**\n\t * Resolve a member id to its current display name \u2014 for the read-only render paths. Returns\n\t * `undefined` when the id can't be resolved, so the render falls back to the mention's stored label.\n\t */\n\tresolveName?(id: string): string | undefined\n\t/** The `@`-picker suggestion config \u2014 for the composer (omit on the render paths). */\n\tsuggestion?: MentionOptions['suggestion']\n}\n\n/**\n * The comment @-mention node \u2014 TipTap's `Mention` configured to render as a `.cmt-mention` pill.\n *\n * A factory rather than a shared constant because it's configured differently per context: the\n * read-only render paths pass `resolveName` (so the stored `{ id }` node always shows the member's\n * current name, not a copy frozen at insert time), while the composer passes a `suggestion` (the\n * `@` picker). The node schema is identical either way \u2014 only these two levers differ.\n */\nexport function commentMention({ resolveName, suggestion }: CommentMentionOptions = {}) {\n\treturn Mention.configure({\n\t\tHTMLAttributes: { class: 'cmt-mention' },\n\t\trenderText: ({ node }) => `@${mentionName(node.attrs as MentionNodeAttrs, resolveName)}`,\n\t\trenderHTML: ({ node, options }) => [\n\t\t\t'span',\n\t\t\tmergeAttributes(options.HTMLAttributes, { 'data-mention-id': node.attrs.id }),\n\t\t\t`@${mentionName(node.attrs as MentionNodeAttrs, resolveName)}`,\n\t\t],\n\t\t...(suggestion ? { suggestion } : {}),\n\t})\n}\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,eAA2D;AAQpE,SAAS,YACR,OACA,aACS;AACT,QAAM,WAAW,MAAM,MAAM,cAAc,YAAY,MAAM,EAAE,IAAI;AACnE,SAAO,YAAY,MAAM,SAAS,MAAM,MAAM;AAC/C;AAoBO,SAAS,eAAe,EAAE,aAAa,WAAW,IAA2B,CAAC,GAAG;AACvF,SAAO,QAAQ,UAAU;AAAA,IACxB,gBAAgB,EAAE,OAAO,cAAc;AAAA,IACvC,YAAY,CAAC,EAAE,KAAK,MAAM,IAAI,YAAY,KAAK,OAA2B,WAAW,CAAC;AAAA,IACtF,YAAY,CAAC,EAAE,MAAM,QAAQ,MAAM;AAAA,MAClC;AAAA,MACA,gBAAgB,QAAQ,gBAAgB,EAAE,mBAAmB,KAAK,MAAM,GAAG,CAAC;AAAA,MAC5E,IAAI,YAAY,KAAK,OAA2B,WAAW,CAAC;AAAA,IAC7D;AAAA,IACA,GAAI,aAAa,EAAE,WAAW,IAAI,CAAC;AAAA,EACpC,CAAC;AACF;",
+  "names": []
+}

package/dist-esm/ui/comment-pin.mjs

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+function CommentPin({ children, resolved, open }) {
+  const className = ["cmt-pin", resolved && "cmt-pin--resolved", open && "cmt-pin--open"].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className, children: resolved ? "\u2713" : children });
+}
+export {
+  CommentPin
+};
+//# sourceMappingURL=comment-pin.mjs.map

package/dist-esm/ui/comment-pin.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/comment-pin.tsx"],
+  "sourcesContent": ["import { ReactNode } from 'react'\n\n/** @public */\nexport interface CommentPinProps {\n\t/** What the pin shows when unresolved \u2014 a number, an author initial, an <Avatar>, etc.\n\t *  Left as a lever so consumers aren't locked into a count. */\n\tchildren?: ReactNode\n\tresolved?: boolean\n\t/** The pin's thread is open \u2014 shows the active/selected indicator state. */\n\topen?: boolean\n}\n\n/** A canvas comment marker: shows its `children` (or a check when resolved). Purely\n * presentational \u2014 it reflects open/resolved state via CSS; wrap it to make it clickable.\n * @public @react */\nexport function CommentPin({ children, resolved, open }: CommentPinProps) {\n\tconst className = ['cmt-pin', resolved && 'cmt-pin--resolved', open && 'cmt-pin--open']\n\t\t.filter(Boolean)\n\t\t.join(' ')\n\treturn <div className={className}>{resolved ? '\u2713' : children}</div>\n}\n"],
+  "mappings": "AAmBQ;AAJD,SAAS,WAAW,EAAE,UAAU,UAAU,KAAK,GAAoB;AACzE,QAAM,YAAY,CAAC,WAAW,YAAY,qBAAqB,QAAQ,eAAe,EACpF,OAAO,OAAO,EACd,KAAK,GAAG;AACV,SAAO,oBAAC,SAAI,WAAuB,qBAAW,WAAM,UAAS;AAC9D;",
+  "names": []
+}

package/dist-esm/ui/comment-text.mjs

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { renderMarkdown } from "./render-markdown.mjs";
+function CommentText({ text }) {
+  return /* @__PURE__ */ jsx("div", { className: "cmt-text", children: renderMarkdown(text) });
+}
+export {
+  CommentText
+};
+//# sourceMappingURL=comment-text.mjs.map

package/dist-esm/ui/comment-text.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/comment-text.tsx"],
+  "sourcesContent": ["import { renderMarkdown } from './render-markdown'\n\n/** @public */\nexport interface CommentTextProps {\n\t/** Rich text body, authored as markdown. */\n\ttext: string\n}\n\n/** A comment's body, rendered as markdown (bold, italic, code, links, lists). @public @react */\nexport function CommentText({ text }: CommentTextProps) {\n\treturn <div className=\"cmt-text\">{renderMarkdown(text)}</div>\n}\n"],
+  "mappings": "AAUQ;AAVR,SAAS,sBAAsB;AASxB,SAAS,YAAY,EAAE,KAAK,GAAqB;AACvD,SAAO,oBAAC,SAAI,WAAU,YAAY,yBAAe,IAAI,GAAE;AACxD;",
+  "names": []
+}

package/dist-esm/ui/comment-thread.mjs

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CommentCard } from "./comment-card.mjs";
+import { CommentComposer } from "./comment-composer.mjs";
+function CommentThread({
+  comments,
+  header,
+  headerActions,
+  resolvedBanner,
+  composer,
+  renderComment
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "cmt-thread", children: [
+    (header !== void 0 || headerActions !== void 0) && /* @__PURE__ */ jsxs("div", { className: "cmt-thread__header", children: [
+      /* @__PURE__ */ jsx("span", { className: "cmt-thread__title", children: header }),
+      headerActions !== void 0 && /* @__PURE__ */ jsx("div", { className: "cmt-thread__actions", children: headerActions })
+    ] }),
+    resolvedBanner !== void 0 && /* @__PURE__ */ jsx("div", { className: "cmt-thread__resolved", children: resolvedBanner }),
+    /* @__PURE__ */ jsx("div", { className: "cmt-thread__list", children: comments.map((comment, i) => /* @__PURE__ */ jsx("div", { children: renderComment ? renderComment(comment, i) : /* @__PURE__ */ jsx(CommentCard, { ...comment }) }, i)) }),
+    composer !== void 0 && /* @__PURE__ */ jsx(CommentComposer, { ...composer })
+  ] });
+}
+export {
+  CommentThread
+};
+//# sourceMappingURL=comment-thread.mjs.map

package/dist-esm/ui/comment-thread.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/ui/comment-thread.tsx"],
+  "sourcesContent": ["import { ReactNode } from 'react'\nimport { CommentCard, CommentCardProps } from './comment-card'\nimport { CommentComposer, CommentComposerProps } from './comment-composer'\n\n/** @public */\nexport interface CommentThreadProps {\n\t/** The thread's comments, already adapted to card props (oldest first). */\n\tcomments: CommentCardProps[]\n\t/** Optional header, e.g. \"Thread\". Omit for no header. */\n\theader?: ReactNode\n\t/** Action controls shown at the right of the header (resolve, delete, dismiss\u2026). */\n\theaderActions?: ReactNode\n\t/** When set, shows a banner above the comments (e.g. \"Resolved by Jess\"). */\n\tresolvedBanner?: ReactNode\n\t/** Reply composer props. Omit for a read-only thread (no composer). */\n\tcomposer?: CommentComposerProps\n\t/** Override how each comment renders. Defaults to `<CommentCard>`. */\n\trenderComment?(comment: CommentCardProps, index: number): ReactNode\n}\n\n/**\n * A comment thread: an optional header, an optional resolved banner, the comments, and an\n * optional reply composer. Presentational \u2014 you supply the comments (as card props) and the\n * composer's handlers; how each comment renders is overridable via `renderComment`.\n * @public @react\n */\nexport function CommentThread({\n\tcomments,\n\theader,\n\theaderActions,\n\tresolvedBanner,\n\tcomposer,\n\trenderComment,\n}: CommentThreadProps) {\n\treturn (\n\t\t<div className=\"cmt-thread\">\n\t\t\t{(header !== undefined || headerActions !== undefined) && (\n\t\t\t\t<div className=\"cmt-thread__header\">\n\t\t\t\t\t<span className=\"cmt-thread__title\">{header}</span>\n\t\t\t\t\t{headerActions !== undefined && (\n\t\t\t\t\t\t<div className=\"cmt-thread__actions\">{headerActions}</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{resolvedBanner !== undefined && <div className=\"cmt-thread__resolved\">{resolvedBanner}</div>}\n\t\t\t<div className=\"cmt-thread__list\">\n\t\t\t\t{comments.map((comment, i) => (\n\t\t\t\t\t<div key={i}>\n\t\t\t\t\t\t{renderComment ? renderComment(comment, i) : <CommentCard {...comment} />}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t{composer !== undefined && <CommentComposer {...composer} />}\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "AAqCI,SACC,KADD;AApCJ,SAAS,mBAAqC;AAC9C,SAAS,uBAA6C;AAwB/C,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAuB;AACtB,SACC,qBAAC,SAAI,WAAU,cACZ;AAAA,gBAAW,UAAa,kBAAkB,WAC3C,qBAAC,SAAI,WAAU,sBACd;AAAA,0BAAC,UAAK,WAAU,qBAAqB,kBAAO;AAAA,MAC3C,kBAAkB,UAClB,oBAAC,SAAI,WAAU,uBAAuB,yBAAc;AAAA,OAEtD;AAAA,IAEA,mBAAmB,UAAa,oBAAC,SAAI,WAAU,wBAAwB,0BAAe;AAAA,IACvF,oBAAC,SAAI,WAAU,oBACb,mBAAS,IAAI,CAAC,SAAS,MACvB,oBAAC,SACC,0BAAgB,cAAc,SAAS,CAAC,IAAI,oBAAC,eAAa,GAAG,SAAS,KAD9D,CAEV,CACA,GACF;AAAA,IACC,aAAa,UAAa,oBAAC,mBAAiB,GAAG,UAAU;AAAA,KAC3D;AAEF;",
+  "names": []
+}

package/dist-esm/ui/comments-list.mjs

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "./avatar.mjs";
+import { Byline } from "./byline.mjs";
+function CommentsList({
+  items,
+  onSelect,
+  header,
+  headerAction,
+  empty,
+  resolvedLabel,
+  renderItem
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "cmt-list", children: [
+    (header !== void 0 || headerAction) && /* @__PURE__ */ jsxs("div", { className: "cmt-list__header", children: [
+      header !== void 0 && /* @__PURE__ */ jsx("span", { className: "cmt-list__header-title", children: header }),
+      headerAction
+    ] }),
+    items.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cmt-list__empty", children: empty }) : /* @__PURE__ */ jsx("div", { className: "cmt-list__items", children: items.map(
+      (item) => renderItem ? renderItem(item) : /* @__PURE__ */ jsx(
+        CommentListItem,
+        {
+          ...item,
+          resolvedLabel,
+          onSelect
+        },
+        item.id
+      )
+    ) })
+  ] });
+}
+function CommentListItem({
+  id,
+  author,
+  preview,
+  date,
+  resolved,
+  page,
+  count,
+  selected,
+  resolvedLabel = "Resolved",
+  onSelect
+}) {
+  const handleClick = () => {
+    if (onSelect) onSelect(id);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: selected ? "cmt-list__item cmt-list__item--selected" : "cmt-list__item",
+      "data-resolved": resolved || void 0,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx(Avatar, { name: author }),
+        /* @__PURE__ */ jsxs("div", { className: "cmt-list__item-body", children: [
+          /* @__PURE__ */ jsx(Byline, { author, date }),
+          /* @__PURE__ */ jsx("div", { className: "cmt-list__item-preview", children: preview }),
+          (resolved || page !== void 0) && /* @__PURE__ */ jsxs("div", { className: "cmt-list__item-meta", children: [
+            resolved && /* @__PURE__ */ jsxs("span", { className: "cmt-list__item-resolved", children: [
+              /* @__PURE__ */ jsx(CheckIcon, {}),
+              resolvedLabel
+            ] }),
+            page !== void 0 && /* @__PURE__ */ jsx("span", { className: "cmt-list__item-page", children: page })
+          ] })
+        ] }),
+        count !== void 0 && count > 1 && /* @__PURE__ */ jsx("span", { className: "cmt-list__item-count", children: count })
+      ]
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M2.5 6.2 4.7 8.4 9.5 3.6",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+export {
+  CommentsList
+};
+//# sourceMappingURL=comments-list.mjs.map