@tldraw/commenting 0.0.0-bootstrap

package/dist-cjs/index.js

@@ -0,0 +1,126 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+  Avatar: () => import_avatar.Avatar,
+  Byline: () => import_byline.Byline,
+  CanvasComments: () => import_comments_overlay.CanvasComments,
+  CanvasCommentsSidebar: () => import_comments_sidebar.CanvasCommentsSidebar,
+  CommentBody: () => import_comment_body.CommentBody,
+  CommentCard: () => import_comment_card.CommentCard,
+  CommentComposer: () => import_comment_composer.CommentComposer,
+  CommentPin: () => import_comment_pin.CommentPin,
+  CommentText: () => import_comment_text.CommentText,
+  CommentThread: () => import_comment_thread.CommentThread,
+  CommentTool: () => import_comment_tool.CommentTool,
+  CommentsFilterMenu: () => import_comments_filter_menu.CommentsFilterMenu,
+  CommentsList: () => import_comments_list.CommentsList,
+  CommentsMenuItem: () => import_comments_menu_item.CommentsMenuItem,
+  CommentsOverflowMenu: () => import_comments_overflow_menu.CommentsOverflowMenu,
+  CountBadge: () => import_count_badge.CountBadge,
+  DEFAULT_IMPRECISE_SHAPE_ANCHOR: () => import_thread_state.DEFAULT_IMPRECISE_SHAPE_ANCHOR,
+  DEFAULT_REGION_COMMENT_OPTIONS: () => import_region_options.DEFAULT_REGION_COMMENT_OPTIONS,
+  DEFAULT_SIDEBAR_FILTERS: () => import_sidebar_filters.DEFAULT_SIDEBAR_FILTERS,
+  EmptyState: () => import_empty_state.EmptyState,
+  Mention: () => import_mention.Mention,
+  MentionList: () => import_mention_list.MentionList,
+  Reaction: () => import_reaction.Reaction,
+  Reactions: () => import_reactions.Reactions,
+  SendButton: () => import_send_button.SendButton,
+  anchorPagePoint: () => import_thread_state.anchorPagePoint,
+  collectClusterLeaves: () => import_cluster_input.collectClusterLeaves,
+  commentToolOverrides: () => import_comment_tool.commentToolOverrides,
+  commentTools: () => import_comment_tool.commentTools,
+  commentsHidden: () => import_state.commentsHidden,
+  commitCommentMutation: () => import_state.commitCommentMutation,
+  computeClusterTable: () => import_computeClusterTable.computeClusterTable,
+  createClusterRuntime: () => import_runtime.createClusterRuntime,
+  createMentionSuggestion: () => import_mention_suggestion.createMentionSuggestion,
+  defaultCommentingOptions: () => import_options.defaultCommentingOptions,
+  filterMentionMembers: () => import_mention_suggestion.filterMentionMembers,
+  focusThread: () => import_thread_state.focusThread,
+  formatRelativeTime: () => import_format_time.formatRelativeTime,
+  getCommentRecord: () => import_comment_store.getCommentRecord,
+  getCommentThreads: () => import_comment_store.getCommentThreads,
+  getCommentingOptions: () => import_options.getCommentingOptions,
+  getComments: () => import_comment_store.getComments,
+  openThreadId: () => import_state.openThreadId,
+  pendingComment: () => import_state.pendingComment,
+  putCommentRecords: () => import_comment_store.putCommentRecords,
+  removeCommentRecords: () => import_comment_store.removeCommentRecords,
+  renderMarkdown: () => import_render_markdown.renderMarkdown,
+  richTextToPlaintext: () => import_rich_text.richTextToPlaintext,
+  shapeAnchorAt: () => import_thread_state.shapeAnchorAt,
+  sidebarFilters: () => import_state.sidebarFilters,
+  toggleCommentsHidden: () => import_state.toggleCommentsHidden,
+  useCommentThreads: () => import_hooks.useCommentThreads,
+  useCommentingEnabled: () => import_license.useCommentingEnabled,
+  useCommentingOptions: () => import_options.useCommentingOptions,
+  useComments: () => import_hooks.useComments,
+  useCommentsHidden: () => import_state.useCommentsHidden,
+  useOpenThreadId: () => import_state.useOpenThreadId,
+  usePendingComment: () => import_state.usePendingComment,
+  useSidebarFilters: () => import_state.useSidebarFilters,
+  useThreadComments: () => import_hooks.useThreadComments
+});
+module.exports = __toCommonJS(index_exports);
+var import_utils = require("@tldraw/utils");
+var import_avatar = require("./ui/avatar");
+var import_byline = require("./ui/byline");
+var import_comment_card = require("./ui/comment-card");
+var import_comment_composer = require("./ui/comment-composer");
+var import_count_badge = require("./ui/count-badge");
+var import_comment_pin = require("./ui/comment-pin");
+var import_comment_text = require("./ui/comment-text");
+var import_comment_thread = require("./ui/comment-thread");
+var import_comments_list = require("./ui/comments-list");
+var import_empty_state = require("./ui/empty-state");
+var import_format_time = require("./ui/format-time");
+var import_mention = require("./ui/mention");
+var import_mention_list = require("./ui/mention-list");
+var import_mention_suggestion = require("./ui/mention-suggestion");
+var import_reaction = require("./ui/reaction");
+var import_reactions = require("./ui/reactions");
+var import_render_markdown = require("./ui/render-markdown");
+var import_send_button = require("./ui/send-button");
+var import_comment_body = require("./canvas/comment-body");
+var import_comment_tool = require("./canvas/comment-tool");
+var import_cluster_input = require("./canvas/cluster-input");
+var import_computeClusterTable = require("./clustering/computeClusterTable");
+var import_comment_store = require("./canvas/comment-store");
+var import_runtime = require("./clustering/runtime");
+var import_comments_filter_menu = require("./canvas/comments-filter-menu");
+var import_comments_menu_item = require("./canvas/comments-menu-item");
+var import_comments_overlay = require("./canvas/comments-overlay");
+var import_options = require("./canvas/options");
+var import_comments_overflow_menu = require("./canvas/comments-overflow-menu");
+var import_comments_sidebar = require("./canvas/comments-sidebar");
+var import_hooks = require("./canvas/hooks");
+var import_license = require("./canvas/license");
+var import_region_options = require("./canvas/region-options");
+var import_rich_text = require("./canvas/rich-text");
+var import_sidebar_filters = require("./canvas/sidebar-filters");
+var import_state = require("./canvas/state");
+var import_thread_state = require("./canvas/thread-state");
+(0, import_utils.registerTldrawLibraryVersion)(
+  "@tldraw/commenting",
+  "0.0.0-bootstrap",
+  "cjs"
+);
+//# sourceMappingURL=index.js.map

package/dist-cjs/index.js.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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6C;AAI7C,oBAAyC;AACzC,oBAAyC;AACzC,0BAAmD;AACnD,8BAA2D;AAC3D,yBAAiD;AACjD,yBAAiD;AACjD,0BAAmD;AACnD,4BAAuD;AACvD,2BAAgF;AAChF,yBAAiD;AACjD,yBAAmC;AACnC,qBAA2C;AAC3C,0BAAuE;AACvE,gCAIO;AACP,sBAA6C;AAC7C,uBAA0B;AAC1B,6BAA+B;AAC/B,yBAAiD;AAKjD,0BAAmD;AACnD,0BAKO;AACP,2BAAqC;AACrC,iCAAoC;AACpC,2BAOO;AACP,qBAA0D;AAQ1D,kCAAiE;AACjE,gCAAiC;AACjC,8BAAyD;AACzD,qBAMO;AACP,oCAAqC;AACrC,8BAAuE;AACvE,mBAAkE;AAClE,qBAAqC;AACrC,4BAA0E;AAC1E,uBAAoC;AACpC,6BAA6D;AAC7D,mBAWO;AACP,0BAKO;AAAA,IAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF;",
+  "names": []
+}

package/dist-cjs/ui/avatar.js

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var avatar_exports = {};
+__export(avatar_exports, {
+  Avatar: () => Avatar
+});
+module.exports = __toCommonJS(avatar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_tldraw = require("tldraw");
+function initial(name) {
+  return ((0, import_tldraw.getFirstCharacter)(name.trim()) || "?").toUpperCase();
+}
+function Avatar({ name, color, image }) {
+  if (image) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { className: "cmt-avatar cmt-avatar--image", src: image, alt: "", "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: "cmt-avatar",
+      "aria-hidden": "true",
+      style: color ? { backgroundColor: color } : void 0,
+      children: initial(name)
+    }
+  );
+}
+//# sourceMappingURL=avatar.js.map

package/dist-cjs/ui/avatar.js.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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBS;AAnBT,oBAAkC;AAWlC,SAAS,QAAQ,MAAc;AAC9B,cAAQ,iCAAkB,KAAK,KAAK,CAAC,KAAK,KAAK,YAAY;AAC5D;AAIO,SAAS,OAAO,EAAE,MAAM,OAAO,MAAM,GAAgB;AAC3D,MAAI,OAAO;AACV,WAAO,4CAAC,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-cjs/ui/byline.js

@@ -0,0 +1,35 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var byline_exports = {};
+__export(byline_exports, {
+  Byline: () => Byline
+});
+module.exports = __toCommonJS(byline_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_format_time = require("./format-time");
+function Byline({ author, date, edited }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-head", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-author", children: author }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "cmt-time", children: [
+      (0, import_format_time.formatRelativeTime)(date),
+      edited && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cmt-edited", children: " \xB7 edited" })
+    ] })
+  ] });
+}
+//# sourceMappingURL=byline.js.map

package/dist-cjs/ui/byline.js.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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeG;AAfH,yBAAmC;AAY5B,SAAS,OAAO,EAAE,QAAQ,MAAM,OAAO,GAAgB;AAC7D,SACC,6CAAC,SAAI,WAAU,YACd;AAAA,gDAAC,UAAK,WAAU,cAAc,kBAAO;AAAA,IACrC,6CAAC,UAAK,WAAU,YACd;AAAA,iDAAmB,IAAI;AAAA,MACvB,UAAU,4CAAC,UAAK,WAAU,cAAa,0BAAS;AAAA,OAClD;AAAA,KACD;AAEF;",
+  "names": []
+}

package/dist-cjs/ui/comment-card.js

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var comment_card_exports = {};
+__export(comment_card_exports, {
+  CommentCard: () => CommentCard
+});
+module.exports = __toCommonJS(comment_card_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_avatar = require("./avatar");
+var import_byline = require("./byline");
+function CommentCard({ author, body, date, you, edited, actions }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: you ? "cmt-card cmt-card--you" : "cmt-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar, { name: author }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_byline.Byline, { author, date, edited }),
+      body
+    ] }),
+    actions !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-card__actions", children: actions })
+  ] });
+}
+//# sourceMappingURL=comment-card.js.map

package/dist-cjs/ui/comment-card.js.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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBG;AAtBH,oBAAuB;AACvB,oBAAuB;AAkBhB,SAAS,YAAY,EAAE,QAAQ,MAAM,MAAM,KAAK,QAAQ,QAAQ,GAAqB;AAC3F,SACC,6CAAC,SAAI,WAAW,MAAM,2BAA2B,YAChD;AAAA,gDAAC,wBAAO,MAAM,QAAQ;AAAA,IACtB,6CAAC,SAAI,WAAU,YACd;AAAA,kDAAC,wBAAO,QAAgB,MAAY,QAAgB;AAAA,MACnD;AAAA,OACF;AAAA,IACC,YAAY,UAAa,4CAAC,SAAI,WAAU,qBAAqB,mBAAQ;AAAA,KACvE;AAEF;",
+  "names": []
+}

package/dist-cjs/ui/comment-composer.js

@@ -0,0 +1,136 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var comment_composer_exports = {};
+__export(comment_composer_exports, {
+  CommentComposer: () => CommentComposer
+});
+module.exports = __toCommonJS(comment_composer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_core = require("@tiptap/core");
+var import_react = require("@tiptap/react");
+var import_react2 = require("react");
+var import_tldraw = require("tldraw");
+var import_avatar = require("./avatar");
+var import_comment_extensions = require("./comment-extensions");
+var import_comment_mention = require("./comment-mention");
+var import_mention_suggestion = require("./mention-suggestion");
+var import_send_button = require("./send-button");
+function CommentComposer({
+  author,
+  placeholder,
+  value,
+  onChange,
+  onSubmit,
+  sendLabel = "Send",
+  disabled,
+  autoFocus,
+  leading,
+  getMentionSuggestions,
+  renderMentionSuggestion
+}) {
+  const interactive = !!onChange || !!onSubmit;
+  const tlEditor = (0, import_tldraw.useMaybeEditor)();
+  const onChangeRef = (0, import_react2.useRef)(onChange);
+  onChangeRef.current = onChange;
+  const onSubmitRef = (0, import_react2.useRef)(onSubmit);
+  onSubmitRef.current = onSubmit;
+  const disabledRef = (0, import_react2.useRef)(disabled);
+  disabledRef.current = disabled;
+  const getMentionSuggestionsRef = (0, import_react2.useRef)(getMentionSuggestions);
+  getMentionSuggestionsRef.current = getMentionSuggestions;
+  const renderMentionSuggestionRef = (0, import_react2.useRef)(renderMentionSuggestion);
+  renderMentionSuggestionRef.current = renderMentionSuggestion;
+  const [isEmpty, setIsEmpty] = (0, import_react2.useState)(() => !value || (0, import_comment_extensions.isCommentEmpty)(value));
+  const submitExtension = (0, import_react2.useMemo)(
+    () => import_core.Extension.create({
+      name: "commentComposerSubmit",
+      priority: 1e3,
+      addKeyboardShortcuts() {
+        return {
+          Enter: () => {
+            if ((0, import_mention_suggestion.isMentionPickerOpen)()) return false;
+            if (!disabledRef.current) onSubmitRef.current?.();
+            return true;
+          }
+        };
+      }
+    }),
+    []
+  );
+  const mentionsEnabled = !!getMentionSuggestions;
+  const hasCustomRow = !!renderMentionSuggestion;
+  const extensions = (0, import_react2.useMemo)(() => {
+    const list = [...import_comment_extensions.commentTipTapExtensions, submitExtension];
+    if (mentionsEnabled) {
+      const resolveSuggestions = (query) => getMentionSuggestionsRef.current?.(query) ?? [];
+      const renderRow = hasCustomRow ? (member) => renderMentionSuggestionRef.current?.(member) : void 0;
+      list.push(
+        (0, import_comment_mention.commentMention)({
+          suggestion: (0, import_mention_suggestion.createMentionSuggestion)(resolveSuggestions, {
+            renderMember: renderRow,
+            editor: tlEditor
+          })
+        })
+      );
+    } else {
+      list.push((0, import_comment_mention.commentMention)({ suggestion: { char: "@", allow: () => false } }));
+    }
+    return list;
+  }, [submitExtension, mentionsEnabled, hasCustomRow, tlEditor]);
+  const editor = (0, import_react.useEditor)(
+    {
+      extensions,
+      content: value ?? import_comment_extensions.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]
+  );
+  (0, import_react2.useEffect)(() => {
+    if (!editor || value === void 0) return;
+    if ((0, import_tldraw.isEqual)(editor.getJSON(), value)) return;
+    editor.commands.setContent(value);
+    setIsEmpty(editor.isEmpty);
+  }, [editor, value]);
+  (0, import_react2.useEffect)(() => {
+    if (!autoFocus || !editor) return;
+    const raf = requestAnimationFrame(() => editor.commands.focus("end"));
+    return () => cancelAnimationFrame(raf);
+  }, [autoFocus, editor]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-composer", children: [
+    leading ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar, { name: author }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-composer__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "cmt-composer__input-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.EditorContent, { editor }),
+        isEmpty && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-input__placeholder", "aria-hidden": "true", children: placeholder })
+      ] }),
+      interactive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_send_button.SendButton, { label: sendLabel, onClick: onSubmit, disabled })
+    ] })
+  ] });
+}
+//# sourceMappingURL=comment-composer.js.map

package/dist-cjs/ui/comment-composer.js.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": ["import_react", "editor"]
+}

package/dist-cjs/ui/comment-extensions.js

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var comment_extensions_exports = {};
+__export(comment_extensions_exports, {
+  EMPTY_COMMENT: () => EMPTY_COMMENT,
+  commentTipTapExtensions: () => commentTipTapExtensions,
+  isCommentEmpty: () => isCommentEmpty
+});
+module.exports = __toCommonJS(comment_extensions_exports);
+var import_tldraw = require("tldraw");
+const commentTipTapExtensions = (0, import_tldraw.getTipTapDefaultExtensions)({ heading: false });
+const EMPTY_COMMENT = (0, import_tldraw.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;
+}
+//# sourceMappingURL=comment-extensions.js.map

package/dist-cjs/ui/comment-extensions.js.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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAmE;AAQ5D,MAAM,8BAA0B,0CAA2B,EAAE,SAAS,MAAM,CAAC;AAG7E,MAAM,oBAA4B,0BAAW,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-cjs/ui/comment-mention.js

@@ -0,0 +1,42 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var comment_mention_exports = {};
+__export(comment_mention_exports, {
+  commentMention: () => commentMention
+});
+module.exports = __toCommonJS(comment_mention_exports);
+var import_core = require("@tiptap/core");
+var import_extension_mention = require("@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 import_extension_mention.Mention.configure({
+    HTMLAttributes: { class: "cmt-mention" },
+    renderText: ({ node }) => `@${mentionName(node.attrs, resolveName)}`,
+    renderHTML: ({ node, options }) => [
+      "span",
+      (0, import_core.mergeAttributes)(options.HTMLAttributes, { "data-mention-id": node.attrs.id }),
+      `@${mentionName(node.attrs, resolveName)}`
+    ],
+    ...suggestion ? { suggestion } : {}
+  });
+}
+//# sourceMappingURL=comment-mention.js.map

package/dist-cjs/ui/comment-mention.js.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;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAgC;AAChC,+BAAoE;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,iCAAQ,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,UACA,6BAAgB,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-cjs/ui/comment-pin.js

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var comment_pin_exports = {};
+__export(comment_pin_exports, {
+  CommentPin: () => CommentPin
+});
+module.exports = __toCommonJS(comment_pin_exports);
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)("div", { className, children: resolved ? "\u2713" : children });
+}
+//# sourceMappingURL=comment-pin.js.map

package/dist-cjs/ui/comment-pin.js.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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;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,4CAAC,SAAI,WAAuB,qBAAW,WAAM,UAAS;AAC9D;",
+  "names": []
+}

package/dist-cjs/ui/comment-text.js

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var comment_text_exports = {};
+__export(comment_text_exports, {
+  CommentText: () => CommentText
+});
+module.exports = __toCommonJS(comment_text_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_render_markdown = require("./render-markdown");
+function CommentText({ text }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cmt-text", children: (0, import_render_markdown.renderMarkdown)(text) });
+}
+//# sourceMappingURL=comment-text.js.map