@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.31036673d3f8

package/dist-esm/index.mjs

@@ -1,77 +1,102 @@
 import { registerTldrawLibraryVersion } from "@tldraw/utils";
-import { Avatar } from "./ui/avatar.mjs";
+import {
+  Avatar,
+  createMentionSuggestion,
+  filterMentionMembers,
+  Mention,
+  MentionList
+} from "@tldraw/mentions";
 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 {
+  CommentsList,
+  isOpenInNewTabClick
+} 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";
+  DEFAULT_REACTION_EMOJI,
+  EmojiPicker,
+  isAllowedReactionEmoji
+} from "./ui/emoji-picker.mjs";
+import {
+  Reaction,
+  defaultRenderReaction,
+  DefaultReactionTooltip,
+  DefaultReactionTooltipContent
+} from "./ui/reaction.mjs";
+import { ReactionPicker } from "./ui/reaction-picker.mjs";
+import {
+  Reactions
+} from "./ui/reactions.mjs";
 import { SendButton } from "./ui/send-button.mjs";
+import { registerCommentAnchorLifecycle } from "./canvas/anchor-lifecycle.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";
+  deleteComment,
+  deleteThread,
+  editComment,
+  putCommentRecords,
+  removeCommentRecords,
+  reopenThread,
+  resolveThread
+} from "./canvas/comment-mutations.mjs";
 import {
+  CommentReactionPicker,
+  CommentReactions,
+  summarizeReactions,
+  toggleCommentReaction,
+  useCommentReactions
+} from "./canvas/comment-reactions.mjs";
+import { CommentTool, commentToolOverrides, commentTools } from "./canvas/comment-tool.mjs";
+import {
+  getCommentReactions,
   getCommentRecord,
   getComments,
   getCommentThreads,
-  putCommentRecords,
-  removeCommentRecords
+  getLiveComments,
+  getLiveCommentThreads
 } 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,
+  getCanComment,
   getCommentingOptions,
+  useCanComment,
   useCommentingOptions
 } from "./canvas/options.mjs";
 import { CommentsOverflowMenu } from "./canvas/comments-overflow-menu.mjs";
+import { CommentsVisibilityToggle } from "./canvas/comments-visibility-toggle.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,
+  commentsSidebarOpen,
+  getRevealThreadPending,
   openThreadId,
-  pendingComment,
+  revealThread,
   sidebarFilters,
   toggleCommentsHidden,
+  toggleCommentsSidebar,
   useCommentsHidden,
+  useCommentsSidebarOpen,
   useOpenThreadId,
-  usePendingComment,
+  useRevealThreadPending,
   useSidebarFilters
 } from "./canvas/state.mjs";
-import {
-  anchorPagePoint,
-  DEFAULT_IMPRECISE_SHAPE_ANCHOR,
-  focusThread,
-  shapeAnchorAt
-} from "./canvas/thread-state.mjs";
+import { anchorPagePoint, focusThread, shapeAnchorAt } from "./canvas/thread-state.mjs";
 registerTldrawLibraryVersion(
   "@tldraw/commenting",
-  "0.0.0-bootstrap",
+  "5.3.0-canary.31036673d3f8",
   "esm"
 );
 export {
@@ -83,56 +108,77 @@ export {
   CommentCard,
   CommentComposer,
   CommentPin,
-  CommentText,
+  CommentReactionPicker,
+  CommentReactions,
   CommentThread,
   CommentTool,
   CommentsFilterMenu,
   CommentsList,
   CommentsMenuItem,
   CommentsOverflowMenu,
+  CommentsVisibilityToggle,
   CountBadge,
-  DEFAULT_IMPRECISE_SHAPE_ANCHOR,
-  DEFAULT_REGION_COMMENT_OPTIONS,
+  DEFAULT_REACTION_EMOJI,
   DEFAULT_SIDEBAR_FILTERS,
+  DefaultReactionTooltip,
+  DefaultReactionTooltipContent,
+  EmojiPicker,
   EmptyState,
   Mention,
   MentionList,
   Reaction,
+  ReactionPicker,
   Reactions,
   SendButton,
   anchorPagePoint,
-  collectClusterLeaves,
   commentToolOverrides,
   commentTools,
   commentsHidden,
-  commitCommentMutation,
-  computeClusterTable,
-  createClusterRuntime,
+  commentsSidebarOpen,
   createMentionSuggestion,
   defaultCommentingOptions,
+  defaultRenderReaction,
+  deleteComment,
+  deleteThread,
+  editComment,
   filterMentionMembers,
   focusThread,
   formatRelativeTime,
+  getCanComment,
+  getCommentReactions,
   getCommentRecord,
   getCommentThreads,
   getCommentingOptions,
   getComments,
+  getLiveCommentThreads,
+  getLiveComments,
+  getRevealThreadPending,
+  isAllowedReactionEmoji,
+  isOpenInNewTabClick,
   openThreadId,
-  pendingComment,
   putCommentRecords,
+  registerCommentAnchorLifecycle,
   removeCommentRecords,
-  renderMarkdown,
+  reopenThread,
+  resolveThread,
+  revealThread,
   richTextToPlaintext,
   shapeAnchorAt,
   sidebarFilters,
+  summarizeReactions,
+  toggleCommentReaction,
   toggleCommentsHidden,
+  toggleCommentsSidebar,
+  useCanComment,
+  useCommentReactions,
   useCommentThreads,
   useCommentingEnabled,
   useCommentingOptions,
   useComments,
   useCommentsHidden,
+  useCommentsSidebarOpen,
   useOpenThreadId,
-  usePendingComment,
+  useRevealThreadPending,
   useSidebarFilters,
   useThreadComments
 };

package/dist-esm/index.mjs.map

@@ -1,7 +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;",
+  "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. The mention picker, pill, and avatar are re-exported from @tldraw/mentions\n// so the commenting public API is unchanged.\nexport {\n\tAvatar,\n\ttype AvatarProps,\n\ttype CommentAuthor,\n\tcreateMentionSuggestion,\n\tfilterMentionMembers,\n\tMention,\n\tMentionList,\n\ttype MentionListProps,\n\ttype MentionMember,\n\ttype MentionProps,\n\ttype MentionSuggestionOptions,\n} from '@tldraw/mentions'\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 { CommentThread, type CommentThreadProps } from './ui/comment-thread'\nexport {\n\tCommentsList,\n\tisOpenInNewTabClick,\n\ttype CommentListItemProps,\n\ttype CommentsListProps,\n} from './ui/comments-list'\nexport { EmptyState, type EmptyStateProps } from './ui/empty-state'\nexport { formatRelativeTime } from './ui/format-time'\nexport {\n\tDEFAULT_REACTION_EMOJI,\n\tEmojiPicker,\n\ttype EmojiPickerProps,\n\tisAllowedReactionEmoji,\n} from './ui/emoji-picker'\nexport {\n\tReaction,\n\ttype ReactionProps,\n\ttype RenderReaction,\n\tdefaultRenderReaction,\n\tDefaultReactionTooltip,\n\tDefaultReactionTooltipContent,\n\ttype ReactionTooltipProps,\n} from './ui/reaction'\nexport { ReactionPicker, type ReactionPickerProps } from './ui/reaction-picker'\nexport {\n\tReactions,\n\ttype ReactionReactor,\n\ttype ReactionsProps,\n\ttype ReactionSummary,\n} from './ui/reactions'\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 { registerCommentAnchorLifecycle } from './canvas/anchor-lifecycle'\nexport { CommentBody, type CommentBodyProps } from './canvas/comment-body'\nexport {\n\tdeleteComment,\n\tdeleteThread,\n\teditComment,\n\tputCommentRecords,\n\tremoveCommentRecords,\n\treopenThread,\n\tresolveThread,\n} from './canvas/comment-mutations'\nexport {\n\tCommentReactionPicker,\n\ttype CommentReactionPickerProps,\n\tCommentReactions,\n\ttype CommentReactionsProps,\n\tsummarizeReactions,\n\ttoggleCommentReaction,\n\tuseCommentReactions,\n} from './canvas/comment-reactions'\nexport { CommentTool, commentToolOverrides, commentTools } from './canvas/comment-tool'\nexport {\n\tgetCommentReactions,\n\tgetCommentRecord,\n\tgetComments,\n\tgetCommentThreads,\n\tgetLiveComments,\n\tgetLiveCommentThreads,\n\ttype TLCommentRecord,\n} from './canvas/comment-store'\nexport { type CommentingContext } from './canvas/context'\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\tgetCanComment,\n\tgetCommentingOptions,\n\ttype ShapeCommentPrecisionContext,\n\tuseCanComment,\n\tuseCommentingOptions,\n} from './canvas/options'\nexport { CommentsOverflowMenu } from './canvas/comments-overflow-menu'\nexport { CommentsVisibilityToggle } from './canvas/comments-visibility-toggle'\nexport { CanvasCommentsSidebar, type CanvasCommentsSidebarProps } from './canvas/comments-sidebar'\nexport { useComments, useCommentThreads, useThreadComments } from './canvas/hooks'\nexport { useCommentingEnabled } from './canvas/license'\nexport { richTextToPlaintext } from './canvas/rich-text'\nexport { DEFAULT_SIDEBAR_FILTERS, type SidebarFilters } from './canvas/sidebar-filters'\nexport {\n\tcommentsHidden,\n\tcommentsSidebarOpen,\n\tgetRevealThreadPending,\n\topenThreadId,\n\trevealThread,\n\tsidebarFilters,\n\ttoggleCommentsHidden,\n\ttoggleCommentsSidebar,\n\tuseCommentsHidden,\n\tuseCommentsSidebarOpen,\n\tuseOpenThreadId,\n\tuseRevealThreadPending,\n\tuseSidebarFilters,\n} from './canvas/state'\nexport { anchorPagePoint, focusThread, shapeAnchorAt } 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;AAK7C;AAAA,EACC;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKM;AACP,SAAS,cAAgC;AACzC,SAAS,mBAA0C;AACnD,SAAS,uBAAkD;AAC3D,SAAS,kBAAwC;AACjD,SAAS,kBAAwC;AACjD,SAAS,qBAA8C;AACvD;AAAA,EACC;AAAA,EACA;AAAA,OAGM;AACP,SAAS,kBAAwC;AACjD,SAAS,0BAA0B;AACnC;AAAA,EACC;AAAA,EACA;AAAA,EAEA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AACP,SAAS,sBAAgD;AACzD;AAAA,EACC;AAAA,OAIM;AACP,SAAS,kBAAwC;AAKjD,SAAS,sCAAsC;AAC/C,SAAS,mBAA0C;AACnD;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EAEA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,aAAa,sBAAsB,oBAAoB;AAChE;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AAEP,SAAS,0BAAwD;AACjE,SAAS,wBAAwB;AACjC,SAAS,sBAAgD;AACzD;AAAA,EAGC;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACM;AACP,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AACzC,SAAS,6BAA8D;AACvE,SAAS,aAAa,mBAAmB,yBAAyB;AAClE,SAAS,4BAA4B;AACrC,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,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,aAAa,qBAAqB;AAE5D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF;",
   "names": []
 }

package/dist-esm/ui/byline.mjs

@@ -1,11 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@tldraw/mentions";
 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: [
+  return /* @__PURE__ */ jsxs("div", { className: "tlui-cmt-head", children: [
+    /* @__PURE__ */ jsx(Avatar, { author }),
+    /* @__PURE__ */ jsx("span", { className: "tlui-cmt-author", children: author.name }),
+    /* @__PURE__ */ jsxs("span", { className: "tlui-cmt-time", children: [
       formatRelativeTime(date),
-      edited && /* @__PURE__ */ jsx("span", { className: "cmt-edited", children: " \xB7 edited" })
+      edited && /* @__PURE__ */ jsx("span", { className: "tlui-cmt-edited", children: " \xB7 edited" })
     ] })
   ] });
 }

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

@@ -1,7 +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;",
+  "sourcesContent": ["import { Avatar, type CommentAuthor } from '@tldraw/mentions'\nimport { formatRelativeTime } from './format-time'\n\n/** @public */\nexport interface BylineProps {\n\tauthor: CommentAuthor\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=\"tlui-cmt-head\">\n\t\t\t<Avatar author={author} />\n\t\t\t<span className=\"tlui-cmt-author\">{author.name}</span>\n\t\t\t<span className=\"tlui-cmt-time\">\n\t\t\t\t{formatRelativeTime(date)}\n\t\t\t\t{edited && <span className=\"tlui-cmt-edited\"> \u00B7 edited</span>}\n\t\t\t</span>\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "AAgBG,cAEA,YAFA;AAhBH,SAAS,cAAkC;AAC3C,SAAS,0BAA0B;AAY5B,SAAS,OAAO,EAAE,QAAQ,MAAM,OAAO,GAAgB;AAC7D,SACC,qBAAC,SAAI,WAAU,iBACd;AAAA,wBAAC,UAAO,QAAgB;AAAA,IACxB,oBAAC,UAAK,WAAU,mBAAmB,iBAAO,MAAK;AAAA,IAC/C,qBAAC,UAAK,WAAU,iBACd;AAAA,yBAAmB,IAAI;AAAA,MACvB,UAAU,oBAAC,UAAK,WAAU,mBAAkB,0BAAS;AAAA,OACvD;AAAA,KACD;AAEF;",
   "names": []
 }

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

@@ -1,14 +1,21 @@
 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
+function CommentCard({
+  author,
+  body,
+  date,
+  you,
+  edited,
+  actions,
+  footer
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: you ? "tlui-cmt-card tlui-cmt-card--you" : "tlui-cmt-card", children: [
+    /* @__PURE__ */ jsx(Byline, { author, date, edited }),
+    /* @__PURE__ */ jsxs("div", { className: "tlui-cmt-body", children: [
+      body,
+      footer
     ] }),
-    actions !== void 0 && /* @__PURE__ */ jsx("div", { className: "cmt-card__actions", children: actions })
+    actions !== void 0 && /* @__PURE__ */ jsx("div", { className: "tlui-cmt-card__actions", children: actions })
   ] });
 }
 export {

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

@@ -1,7 +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;",
+  "sourcesContent": ["import { type CommentAuthor } from '@tldraw/mentions'\nimport { ReactNode } from 'react'\nimport { Byline } from './byline'\n\n/** @public */\nexport interface CommentCardProps {\n\tauthor: CommentAuthor\n\t/** The rendered comment body. The card doesn't dictate a format \u2014 pass a `<CommentBody>`\n\t *  for a comment's rich text, or any node of your own. */\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\t/** Content under the body, aligned with it rather than the avatar (e.g. a `<Reactions>` row). */\n\tfooter?: ReactNode\n}\n\n/** A single comment: Avatar, Byline, and a body slot the consumer renders. @public @react */\nexport function CommentCard({\n\tauthor,\n\tbody,\n\tdate,\n\tyou,\n\tedited,\n\tactions,\n\tfooter,\n}: CommentCardProps) {\n\treturn (\n\t\t<div className={you ? 'tlui-cmt-card tlui-cmt-card--you' : 'tlui-cmt-card'}>\n\t\t\t<Byline author={author} date={date} edited={edited} />\n\t\t\t<div className=\"tlui-cmt-body\">\n\t\t\t\t{body}\n\t\t\t\t{footer}\n\t\t\t</div>\n\t\t\t{actions !== undefined && <div className=\"tlui-cmt-card__actions\">{actions}</div>}\n\t\t</div>\n\t)\n}\n"],
+  "mappings": "AAiCG,cACA,YADA;AA/BH,SAAS,cAAc;AAoBhB,SAAS,YAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAqB;AACpB,SACC,qBAAC,SAAI,WAAW,MAAM,qCAAqC,iBAC1D;AAAA,wBAAC,UAAO,QAAgB,MAAY,QAAgB;AAAA,IACpD,qBAAC,SAAI,WAAU,iBACb;AAAA;AAAA,MACA;AAAA,OACF;AAAA,IACC,YAAY,UAAa,oBAAC,SAAI,WAAU,0BAA0B,mBAAQ;AAAA,KAC5E;AAEF;",
   "names": []
 }

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

@@ -1,12 +1,20 @@
 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 {
+  Avatar,
+  createMentionExtension,
+  createMentionSuggestion,
+  isMentionPickerOpen
+} from "@tldraw/mentions";
+import {
+  useEffect,
+  useLayoutEffect,
+  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,
@@ -15,6 +23,7 @@ function CommentComposer({
   onChange,
   onSubmit,
   sendLabel = "Send",
+  onArrowUpWhenEmpty,
   disabled,
   autoFocus,
   leading,
@@ -27,6 +36,8 @@ function CommentComposer({
   onChangeRef.current = onChange;
   const onSubmitRef = useRef(onSubmit);
   onSubmitRef.current = onSubmit;
+  const onArrowUpWhenEmptyRef = useRef(onArrowUpWhenEmpty);
+  onArrowUpWhenEmptyRef.current = onArrowUpWhenEmpty;
   const disabledRef = useRef(disabled);
   disabledRef.current = disabled;
   const getMentionSuggestionsRef = useRef(getMentionSuggestions);
@@ -34,31 +45,55 @@ function CommentComposer({
   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 [expanded, setExpanded] = useState(false);
+  const expandedRef = useRef(expanded);
+  expandedRef.current = expanded;
+  const inputWrapRef = useRef(null);
+  const mirrorRef = useRef(null);
+  const remeasure = () => {
+    const wrap = inputWrapRef.current;
+    const mirror = mirrorRef.current;
+    const editor2 = editorRef.current;
+    if (!wrap || !mirror || !editor2) return;
+    if (editor2.isEmpty) {
+      if (expandedRef.current) setExpanded(false);
+      return;
+    }
+    if (wrap.clientWidth === 0) return;
+    const doc = editor2.state.doc;
+    const multiBlock = doc.childCount > 1 || doc.firstChild !== null && doc.firstChild.type.name !== "paragraph";
+    if (multiBlock) {
+      if (!expandedRef.current) setExpanded(true);
+      return;
+    }
+    const field = wrap.parentElement;
+    const send = field ? field.querySelector(".tlui-cmt-send") : null;
+    const input = wrap.querySelector(".tlui-cmt-input");
+    if (!send || !input) return;
+    mirror.innerHTML = input.innerHTML;
+    const textWidth = mirror.offsetWidth;
+    const wrapStyle = getComputedStyle(wrap);
+    const wrapPadX = parseFloat(wrapStyle.paddingLeft) + parseFloat(wrapStyle.paddingRight);
+    const collapsedAvailable = wrap.clientWidth - wrapPadX - (expandedRef.current ? send.offsetWidth + 6 : 0);
+    if (!expandedRef.current && textWidth > collapsedAvailable - 8) {
+      setExpanded(true);
+    } else if (expandedRef.current && textWidth < collapsedAvailable - 24) {
+      setExpanded(false);
+    }
+  };
+  const remeasureRef = useRef(remeasure);
+  remeasureRef.current = remeasure;
+  const editorRef = useRef(null);
+  const replayingEnter = useRef(false);
   const mentionsEnabled = !!getMentionSuggestions;
   const hasCustomRow = !!renderMentionSuggestion;
   const extensions = useMemo(() => {
-    const list = [...commentTipTapExtensions, submitExtension];
+    const list = [...commentTipTapExtensions];
     if (mentionsEnabled) {
       const resolveSuggestions = (query) => getMentionSuggestionsRef.current?.(query) ?? [];
       const renderRow = hasCustomRow ? (member) => renderMentionSuggestionRef.current?.(member) : void 0;
       list.push(
-        commentMention({
+        createMentionExtension({
           suggestion: createMentionSuggestion(resolveSuggestions, {
             renderMember: renderRow,
             editor: tlEditor
@@ -66,10 +101,10 @@ function CommentComposer({
         })
       );
     } else {
-      list.push(commentMention({ suggestion: { char: "@", allow: () => false } }));
+      list.push(createMentionExtension({ suggestion: { char: "@", allow: () => false } }));
     }
     return list;
-  }, [submitExtension, mentionsEnabled, hasCustomRow, tlEditor]);
+  }, [mentionsEnabled, hasCustomRow, tlEditor]);
   const editor = useEditor(
     {
       extensions,
@@ -80,34 +115,111 @@ function CommentComposer({
       // mirrors RichTextArea's setup.
       enableCoreExtensions: { textDirection: false },
       textDirection: "auto",
-      editorProps: { attributes: { class: "cmt-input" } },
+      editorProps: {
+        attributes: {
+          class: "tlui-cmt-input",
+          "aria-label": placeholder,
+          role: "textbox",
+          "aria-multiline": "true"
+        },
+        // Runs before every keymap plugin, so it can distinguish Shift+Enter from Enter — an
+        // `Enter` keymap binding also fires on Shift+Enter and would otherwise swallow it.
+        handleKeyDown: (_view, event) => {
+          if (replayingEnter.current) return false;
+          if (event.key === "ArrowUp" && !event.isComposing) {
+            if (onArrowUpWhenEmptyRef.current && editorRef.current?.isEmpty && !isMentionPickerOpen()) {
+              onArrowUpWhenEmptyRef.current();
+              return true;
+            }
+            return false;
+          }
+          if (event.key !== "Enter" || event.isComposing) return false;
+          if (isMentionPickerOpen()) return false;
+          if (event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey) {
+            if (editorRef.current?.isEmpty) return true;
+            replayingEnter.current = true;
+            try {
+              editorRef.current?.commands.enter();
+            } finally {
+              replayingEnter.current = false;
+            }
+            return true;
+          }
+          if (!disabledRef.current) onSubmitRef.current?.();
+          return true;
+        }
+      },
       onUpdate: ({ editor: editor2 }) => {
         setIsEmpty(editor2.isEmpty);
+        remeasureRef.current();
         onChangeRef.current?.(editor2.getJSON());
       }
     },
-    [interactive]
+    [interactive, placeholder]
   );
+  editorRef.current = editor;
   useEffect(() => {
     if (!editor || value === void 0) return;
     if (isEqual(editor.getJSON(), value)) return;
     editor.commands.setContent(value);
     setIsEmpty(editor.isEmpty);
   }, [editor, value]);
+  useLayoutEffect(() => {
+    remeasureRef.current();
+  }, [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 })
-    ] })
+  useEffect(() => {
+    const wrap = inputWrapRef.current;
+    if (!wrap) return;
+    const onWheel = (e) => {
+      const input = wrap.querySelector(".tlui-cmt-input");
+      if (!input || input.scrollHeight <= input.clientHeight) return;
+      const atTop = input.scrollTop <= 0;
+      const atBottom = input.scrollTop >= input.scrollHeight - input.clientHeight - 1;
+      if (e.deltaY < 0 && !atTop || e.deltaY > 0 && !atBottom) {
+        e.stopPropagation();
+      }
+    };
+    wrap.addEventListener("wheel", onWheel);
+    return () => wrap.removeEventListener("wheel", onWheel);
+  }, []);
+  const focusEditorFromField = (e) => {
+    const target = e.target;
+    if (target.closest(".tlui-cmt-input") || target.closest(".tlui-cmt-send")) return;
+    e.preventDefault();
+    editor?.commands.focus("end");
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "tlui-cmt-composer", children: [
+    leading ?? /* @__PURE__ */ jsx(Avatar, { author }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: [
+          "tlui-cmt-composer__field",
+          interactive && expanded && "tlui-cmt-composer__field--expanded"
+        ].filter(Boolean).join(" "),
+        onMouseDown: interactive ? focusEditorFromField : void 0,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "tlui-cmt-composer__input-wrap", ref: inputWrapRef, children: [
+            /* @__PURE__ */ jsx(EditorContent, { editor }),
+            isEmpty && /* @__PURE__ */ jsx("div", { className: "tlui-cmt-input__placeholder", "aria-hidden": "true", children: placeholder }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "tlui-cmt-composer__mirror tlui-cmt-input",
+                ref: mirrorRef,
+                "aria-hidden": "true"
+              }
+            )
+          ] }),
+          interactive && /* @__PURE__ */ jsx(SendButton, { label: sendLabel, onClick: onSubmit, disabled })
+        ]
+      }
+    )
   ] });
 }
 export {