@liveblocks/react-ui 2.12.2 → 2.13.0

package/dist/components/Thread.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Thread.mjs","sources":["../../src/components/Thread.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentData,\n  DM,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { useThreadSubscription } from \"@liveblocks/react\";\nimport {\n  useMarkRoomThreadAsResolved,\n  useMarkRoomThreadAsUnresolved,\n} from \"@liveblocks/react/_private\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport type {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport React, {\n  forwardRef,\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { ResolveIcon } from \"../icons/Resolve\";\nimport { ResolvedIcon } from \"../icons/Resolved\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { classNames } from \"../utils/class-names\";\nimport { findLastIndex } from \"../utils/find-last-index\";\nimport type { CommentProps } from \"./Comment\";\nimport { Comment } from \"./Comment\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\nimport { Button } from \"./internal/Button\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\nexport interface ThreadProps<M extends BaseMetadata = DM>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The thread to display.\n   */\n  thread: ThreadData<M>;\n\n  /**\n   * How to show or hide the composer to reply to the thread.\n   */\n  showComposer?: boolean | \"collapsed\";\n\n  /**\n   * Whether to show the action to resolve the thread.\n   */\n  showResolveAction?: boolean;\n\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: CommentProps[\"showActions\"];\n\n  /**\n   * Whether to show reactions.\n   */\n  showReactions?: CommentProps[\"showReactions\"];\n\n  /**\n   * Whether to indent the comments' content.\n   */\n  indentCommentContent?: CommentProps[\"indentContent\"];\n\n  /**\n   * Whether to show deleted comments.\n   */\n  showDeletedComments?: CommentProps[\"showDeleted\"];\n\n  /**\n   * Whether to show attachments.\n   */\n  showAttachments?: boolean;\n\n  /**\n   * The event handler called when changing the resolved status.\n   */\n  onResolvedChange?: (resolved: boolean) => void;\n\n  /**\n   * The event handler called when a comment is edited.\n   */\n  onCommentEdit?: CommentProps[\"onCommentEdit\"];\n\n  /**\n   * The event handler called when a comment is deleted.\n   */\n  onCommentDelete?: CommentProps[\"onCommentDelete\"];\n\n  /**\n   * The event handler called when the thread is deleted.\n   * A thread is deleted when all its comments are deleted.\n   */\n  onThreadDelete?: (thread: ThreadData<M>) => void;\n\n  /**\n   * The event handler called when clicking on a comment's author.\n   */\n  onAuthorClick?: CommentProps[\"onAuthorClick\"];\n\n  /**\n   * The event handler called when clicking on a mention.\n   */\n  onMentionClick?: CommentProps[\"onMentionClick\"];\n\n  /**\n   * The event handler called when clicking on a comment's attachment.\n   */\n  onAttachmentClick?: CommentProps[\"onAttachmentClick\"];\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: ComposerProps[\"onComposerSubmit\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides\n  >;\n}\n\n/**\n * Displays a thread of comments, with a composer to reply\n * to it.\n *\n * @example\n * <>\n *   {threads.map((thread) => (\n *     <Thread key={thread.id} thread={thread} />\n *   ))}\n * </>\n */\nexport const Thread = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      thread,\n      indentCommentContent = true,\n      showActions = \"hover\",\n      showDeletedComments,\n      showResolveAction = true,\n      showReactions = true,\n      showComposer = \"collapsed\",\n      showAttachments = true,\n      onResolvedChange,\n      onCommentEdit,\n      onCommentDelete,\n      onThreadDelete,\n      onAuthorClick,\n      onMentionClick,\n      onAttachmentClick,\n      onComposerSubmit,\n      overrides,\n      className,\n      ...props\n    }: ThreadProps<M>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const markThreadAsResolved = useMarkRoomThreadAsResolved(thread.roomId);\n    const markThreadAsUnresolved = useMarkRoomThreadAsUnresolved(thread.roomId);\n    const $ = useOverrides(overrides);\n    const firstCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? 0\n        : thread.comments.findIndex((comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const lastCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? thread.comments.length - 1\n        : findLastIndex(thread.comments, (comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const { status: subscriptionStatus, unreadSince } = useThreadSubscription(\n      thread.id\n    );\n    const unreadIndex = useMemo(() => {\n      // The user is not subscribed to this thread.\n      if (subscriptionStatus !== \"subscribed\") {\n        return;\n      }\n\n      // The user hasn't read the thread yet, so all comments are unread.\n      if (unreadSince === null) {\n        return firstCommentIndex;\n      }\n\n      // The user has read the thread, so we find the first unread comment.\n      const unreadIndex = thread.comments.findIndex(\n        (comment) =>\n          (showDeletedComments ? true : comment.body) &&\n          comment.createdAt > unreadSince\n      );\n\n      return unreadIndex >= 0 && unreadIndex < thread.comments.length\n        ? unreadIndex\n        : undefined;\n    }, [\n      firstCommentIndex,\n      showDeletedComments,\n      subscriptionStatus,\n      thread.comments,\n      unreadSince,\n    ]);\n    const [newIndex, setNewIndex] = useState<number>();\n    const newIndicatorIndex = newIndex === undefined ? unreadIndex : newIndex;\n\n    useEffect(() => {\n      if (unreadIndex) {\n        // Keep the \"new\" indicator at the lowest unread index.\n        setNewIndex((persistedUnreadIndex) =>\n          Math.min(persistedUnreadIndex ?? Infinity, unreadIndex)\n        );\n      }\n    }, [unreadIndex]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const handleResolvedChange = useCallback(\n      (resolved: boolean) => {\n        onResolvedChange?.(resolved);\n\n        if (resolved) {\n          markThreadAsResolved(thread.id);\n        } else {\n          markThreadAsUnresolved(thread.id);\n        }\n      },\n      [\n        markThreadAsResolved,\n        markThreadAsUnresolved,\n        onResolvedChange,\n        thread.id,\n      ]\n    );\n\n    const handleCommentDelete = useCallback(\n      (comment: CommentData) => {\n        onCommentDelete?.(comment);\n\n        const filteredComments = thread.comments.filter(\n          (comment) => comment.body\n        );\n\n        if (filteredComments.length <= 1) {\n          onThreadDelete?.(thread);\n        }\n      },\n      [onCommentDelete, onThreadDelete, thread]\n    );\n\n    return (\n      <TooltipProvider>\n        <div\n          className={classNames(\n            \"lb-root lb-thread\",\n            showActions === \"hover\" && \"lb-thread:show-actions-hover\",\n            className\n          )}\n          data-resolved={thread.resolved ? \"\" : undefined}\n          data-unread={unreadIndex !== undefined ? \"\" : undefined}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n        >\n          <div className=\"lb-thread-comments\">\n            {thread.comments.map((comment, index) => {\n              const isFirstComment = index === firstCommentIndex;\n              const isUnread =\n                unreadIndex !== undefined && index >= unreadIndex;\n\n              const children = (\n                <Comment\n                  key={comment.id}\n                  className=\"lb-thread-comment\"\n                  data-unread={isUnread ? \"\" : undefined}\n                  comment={comment}\n                  indentContent={indentCommentContent}\n                  showDeleted={showDeletedComments}\n                  showActions={showActions}\n                  showReactions={showReactions}\n                  showAttachments={showAttachments}\n                  onCommentEdit={onCommentEdit}\n                  onCommentDelete={handleCommentDelete}\n                  onAuthorClick={onAuthorClick}\n                  onMentionClick={onMentionClick}\n                  onAttachmentClick={onAttachmentClick}\n                  autoMarkReadThreadId={\n                    index === lastCommentIndex && isUnread\n                      ? thread.id\n                      : undefined\n                  }\n                  additionalActionsClassName={\n                    isFirstComment ? \"lb-thread-actions\" : undefined\n                  }\n                  additionalActions={\n                    isFirstComment && showResolveAction ? (\n                      <Tooltip\n                        content={\n                          thread.resolved\n                            ? $.THREAD_UNRESOLVE\n                            : $.THREAD_RESOLVE\n                        }\n                      >\n                        <TogglePrimitive.Root\n                          pressed={thread.resolved}\n                          onPressedChange={handleResolvedChange}\n                          asChild\n                        >\n                          <Button\n                            className=\"lb-comment-action\"\n                            onClick={stopPropagation}\n                            aria-label={\n                              thread.resolved\n                                ? $.THREAD_UNRESOLVE\n                                : $.THREAD_RESOLVE\n                            }\n                          >\n                            {thread.resolved ? (\n                              <ResolvedIcon className=\"lb-button-icon\" />\n                            ) : (\n                              <ResolveIcon className=\"lb-button-icon\" />\n                            )}\n                          </Button>\n                        </TogglePrimitive.Root>\n                      </Tooltip>\n                    ) : null\n                  }\n                />\n              );\n\n              return index === newIndicatorIndex &&\n                newIndicatorIndex !== firstCommentIndex &&\n                newIndicatorIndex <= lastCommentIndex ? (\n                <Fragment key={comment.id}>\n                  <div\n                    className=\"lb-thread-new-indicator\"\n                    aria-label={$.THREAD_NEW_INDICATOR_DESCRIPTION}\n                  >\n                    <span className=\"lb-thread-new-indicator-label\">\n                      <ArrowDownIcon className=\"lb-thread-new-indicator-label-icon\" />\n                      {$.THREAD_NEW_INDICATOR}\n                    </span>\n                  </div>\n                  {children}\n                </Fragment>\n              ) : (\n                children\n              );\n            })}\n          </div>\n          {showComposer && (\n            <Composer\n              className=\"lb-thread-composer\"\n              threadId={thread.id}\n              defaultCollapsed={showComposer === \"collapsed\" ? true : undefined}\n              showAttachments={showAttachments}\n              onComposerSubmit={onComposerSubmit}\n              overrides={{\n                COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,\n                COMPOSER_SEND: $.THREAD_COMPOSER_SEND,\n              }}\n              roomId={thread.roomId}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ThreadProps<M> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsJO;AAAe;AAElB;AACE;AACuB;AACT;AACd;AACoB;AACJ;AACD;AACG;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACE;AAEuD;AAEzD;AACE;AAE4D;AAE9D;AAAoD;AAC3C;AAET;AAEE;AACE;AAAA;AAIF;AACE;AAAO;AAIT;AAAoC;AAGZ;AAGxB;AAEI;AACH;AACD;AACA;AACA;AACO;AACP;AAEF;AACA;AAEA;AACE;AAEE;AAAA;AACwD;AACxD;AACF;AAGF;AACE;AAAsB;AAGxB;AAA6B;AAEzB;AAEA;AACE;AAA8B;AAE9B;AAAgC;AAClC;AACF;AACA;AACE;AACA;AACA;AACO;AACT;AAGF;AAA4B;AAExB;AAEA;AAAyC;AAClB;AAGvB;AACE;AAAuB;AACzB;AACF;AACwC;AAG1C;AAEK;AACY;AACT;AAC2B;AAC3B;AACF;AACsC;AACQ;AACvC;AACH;AACC;AAEJ;AAAc;AAEX;AACA;AAGA;AACG;AACc;AACH;AACmB;AAC7B;AACe;AACF;AACb;AACA;AACA;AACA;AACiB;AACjB;AACA;AACA;AAIM;AAGmC;AAIpC;AAIS;AAGP;AACiB;AACC;AACV;AAEN;AACW;AACD;AAID;AAIL;AAAuB;AAEvB;AAAsB;AAK7B;AAKV;AAGG;AAAsB;AACpB;AACW;AACI;AAEb;AAAe;AACb;AAAwB;AAO/B;AAKH;AACW;AACO;AACuC;AACxD;AACA;AACW;AACe;AACP;AACnB;AACe;AAIvB;AAGN;;"}
+{"version":3,"file":"Thread.mjs","sources":["../../src/components/Thread.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentData,\n  DM,\n  ThreadData,\n} from \"@liveblocks/core\";\nimport { useThreadSubscription } from \"@liveblocks/react\";\nimport {\n  useMarkRoomThreadAsResolved,\n  useMarkRoomThreadAsUnresolved,\n} from \"@liveblocks/react/_private\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport type {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport React, {\n  forwardRef,\n  Fragment,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nimport { ArrowDownIcon } from \"../icons/ArrowDown\";\nimport { ResolveIcon } from \"../icons/Resolve\";\nimport { ResolvedIcon } from \"../icons/Resolved\";\nimport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  ThreadOverrides,\n} from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport { classNames } from \"../utils/class-names\";\nimport { findLastIndex } from \"../utils/find-last-index\";\nimport type { CommentProps } from \"./Comment\";\nimport { Comment } from \"./Comment\";\nimport type { ComposerProps } from \"./Composer\";\nimport { Composer } from \"./Composer\";\nimport { Button } from \"./internal/Button\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\nexport interface ThreadProps<M extends BaseMetadata = DM>\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The thread to display.\n   */\n  thread: ThreadData<M>;\n\n  /**\n   * How to show or hide the composer to reply to the thread.\n   */\n  showComposer?: boolean | \"collapsed\";\n\n  /**\n   * Whether to show the action to resolve the thread.\n   */\n  showResolveAction?: boolean;\n\n  /**\n   * How to show or hide the actions.\n   */\n  showActions?: CommentProps[\"showActions\"];\n\n  /**\n   * Whether to show reactions.\n   */\n  showReactions?: CommentProps[\"showReactions\"];\n\n  /**\n   * Whether to show the composer's formatting controls.\n   */\n  showComposerFormattingControls?: ComposerProps[\"showFormattingControls\"];\n\n  /**\n   * Whether to indent the comments' content.\n   */\n  indentCommentContent?: CommentProps[\"indentContent\"];\n\n  /**\n   * Whether to show deleted comments.\n   */\n  showDeletedComments?: CommentProps[\"showDeleted\"];\n\n  /**\n   * Whether to show attachments.\n   */\n  showAttachments?: boolean;\n\n  /**\n   * The event handler called when changing the resolved status.\n   */\n  onResolvedChange?: (resolved: boolean) => void;\n\n  /**\n   * The event handler called when a comment is edited.\n   */\n  onCommentEdit?: CommentProps[\"onCommentEdit\"];\n\n  /**\n   * The event handler called when a comment is deleted.\n   */\n  onCommentDelete?: CommentProps[\"onCommentDelete\"];\n\n  /**\n   * The event handler called when the thread is deleted.\n   * A thread is deleted when all its comments are deleted.\n   */\n  onThreadDelete?: (thread: ThreadData<M>) => void;\n\n  /**\n   * The event handler called when clicking on a comment's author.\n   */\n  onAuthorClick?: CommentProps[\"onAuthorClick\"];\n\n  /**\n   * The event handler called when clicking on a mention.\n   */\n  onMentionClick?: CommentProps[\"onMentionClick\"];\n\n  /**\n   * The event handler called when clicking on a comment's attachment.\n   */\n  onAttachmentClick?: CommentProps[\"onAttachmentClick\"];\n\n  /**\n   * The event handler called when the composer is submitted.\n   */\n  onComposerSubmit?: ComposerProps[\"onComposerSubmit\"];\n\n  /**\n   * Override the component's strings.\n   */\n  overrides?: Partial<\n    GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides\n  >;\n}\n\n/**\n * Displays a thread of comments, with a composer to reply\n * to it.\n *\n * @example\n * <>\n *   {threads.map((thread) => (\n *     <Thread key={thread.id} thread={thread} />\n *   ))}\n * </>\n */\nexport const Thread = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      thread,\n      indentCommentContent = true,\n      showActions = \"hover\",\n      showDeletedComments,\n      showResolveAction = true,\n      showReactions = true,\n      showComposer = \"collapsed\",\n      showAttachments = true,\n      showComposerFormattingControls = true,\n      onResolvedChange,\n      onCommentEdit,\n      onCommentDelete,\n      onThreadDelete,\n      onAuthorClick,\n      onMentionClick,\n      onAttachmentClick,\n      onComposerSubmit,\n      overrides,\n      className,\n      ...props\n    }: ThreadProps<M>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const markThreadAsResolved = useMarkRoomThreadAsResolved(thread.roomId);\n    const markThreadAsUnresolved = useMarkRoomThreadAsUnresolved(thread.roomId);\n    const $ = useOverrides(overrides);\n    const firstCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? 0\n        : thread.comments.findIndex((comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const lastCommentIndex = useMemo(() => {\n      return showDeletedComments\n        ? thread.comments.length - 1\n        : findLastIndex(thread.comments, (comment) => comment.body);\n    }, [showDeletedComments, thread.comments]);\n    const { status: subscriptionStatus, unreadSince } = useThreadSubscription(\n      thread.id\n    );\n    const unreadIndex = useMemo(() => {\n      // The user is not subscribed to this thread.\n      if (subscriptionStatus !== \"subscribed\") {\n        return;\n      }\n\n      // The user hasn't read the thread yet, so all comments are unread.\n      if (unreadSince === null) {\n        return firstCommentIndex;\n      }\n\n      // The user has read the thread, so we find the first unread comment.\n      const unreadIndex = thread.comments.findIndex(\n        (comment) =>\n          (showDeletedComments ? true : comment.body) &&\n          comment.createdAt > unreadSince\n      );\n\n      return unreadIndex >= 0 && unreadIndex < thread.comments.length\n        ? unreadIndex\n        : undefined;\n    }, [\n      firstCommentIndex,\n      showDeletedComments,\n      subscriptionStatus,\n      thread.comments,\n      unreadSince,\n    ]);\n    const [newIndex, setNewIndex] = useState<number>();\n    const newIndicatorIndex = newIndex === undefined ? unreadIndex : newIndex;\n\n    useEffect(() => {\n      if (unreadIndex) {\n        // Keep the \"new\" indicator at the lowest unread index.\n        setNewIndex((persistedUnreadIndex) =>\n          Math.min(persistedUnreadIndex ?? Infinity, unreadIndex)\n        );\n      }\n    }, [unreadIndex]);\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const handleResolvedChange = useCallback(\n      (resolved: boolean) => {\n        onResolvedChange?.(resolved);\n\n        if (resolved) {\n          markThreadAsResolved(thread.id);\n        } else {\n          markThreadAsUnresolved(thread.id);\n        }\n      },\n      [\n        markThreadAsResolved,\n        markThreadAsUnresolved,\n        onResolvedChange,\n        thread.id,\n      ]\n    );\n\n    const handleCommentDelete = useCallback(\n      (comment: CommentData) => {\n        onCommentDelete?.(comment);\n\n        const filteredComments = thread.comments.filter(\n          (comment) => comment.body\n        );\n\n        if (filteredComments.length <= 1) {\n          onThreadDelete?.(thread);\n        }\n      },\n      [onCommentDelete, onThreadDelete, thread]\n    );\n\n    return (\n      <TooltipProvider>\n        <div\n          className={classNames(\n            \"lb-root lb-thread\",\n            showActions === \"hover\" && \"lb-thread:show-actions-hover\",\n            className\n          )}\n          data-resolved={thread.resolved ? \"\" : undefined}\n          data-unread={unreadIndex !== undefined ? \"\" : undefined}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n        >\n          <div className=\"lb-thread-comments\">\n            {thread.comments.map((comment, index) => {\n              const isFirstComment = index === firstCommentIndex;\n              const isUnread =\n                unreadIndex !== undefined && index >= unreadIndex;\n\n              const children = (\n                <Comment\n                  key={comment.id}\n                  className=\"lb-thread-comment\"\n                  data-unread={isUnread ? \"\" : undefined}\n                  comment={comment}\n                  indentContent={indentCommentContent}\n                  showDeleted={showDeletedComments}\n                  showActions={showActions}\n                  showReactions={showReactions}\n                  showAttachments={showAttachments}\n                  showComposerFormattingControls={\n                    showComposerFormattingControls\n                  }\n                  onCommentEdit={onCommentEdit}\n                  onCommentDelete={handleCommentDelete}\n                  onAuthorClick={onAuthorClick}\n                  onMentionClick={onMentionClick}\n                  onAttachmentClick={onAttachmentClick}\n                  autoMarkReadThreadId={\n                    index === lastCommentIndex && isUnread\n                      ? thread.id\n                      : undefined\n                  }\n                  additionalActionsClassName={\n                    isFirstComment ? \"lb-thread-actions\" : undefined\n                  }\n                  additionalActions={\n                    isFirstComment && showResolveAction ? (\n                      <Tooltip\n                        content={\n                          thread.resolved\n                            ? $.THREAD_UNRESOLVE\n                            : $.THREAD_RESOLVE\n                        }\n                      >\n                        <TogglePrimitive.Root\n                          pressed={thread.resolved}\n                          onPressedChange={handleResolvedChange}\n                          asChild\n                        >\n                          <Button\n                            className=\"lb-comment-action\"\n                            onClick={stopPropagation}\n                            aria-label={\n                              thread.resolved\n                                ? $.THREAD_UNRESOLVE\n                                : $.THREAD_RESOLVE\n                            }\n                          >\n                            {thread.resolved ? (\n                              <ResolvedIcon className=\"lb-button-icon\" />\n                            ) : (\n                              <ResolveIcon className=\"lb-button-icon\" />\n                            )}\n                          </Button>\n                        </TogglePrimitive.Root>\n                      </Tooltip>\n                    ) : null\n                  }\n                />\n              );\n\n              return index === newIndicatorIndex &&\n                newIndicatorIndex !== firstCommentIndex &&\n                newIndicatorIndex <= lastCommentIndex ? (\n                <Fragment key={comment.id}>\n                  <div\n                    className=\"lb-thread-new-indicator\"\n                    aria-label={$.THREAD_NEW_INDICATOR_DESCRIPTION}\n                  >\n                    <span className=\"lb-thread-new-indicator-label\">\n                      <ArrowDownIcon className=\"lb-thread-new-indicator-label-icon\" />\n                      {$.THREAD_NEW_INDICATOR}\n                    </span>\n                  </div>\n                  {children}\n                </Fragment>\n              ) : (\n                children\n              );\n            })}\n          </div>\n          {showComposer && (\n            <Composer\n              className=\"lb-thread-composer\"\n              threadId={thread.id}\n              defaultCollapsed={showComposer === \"collapsed\" ? true : undefined}\n              showAttachments={showAttachments}\n              showFormattingControls={showComposerFormattingControls}\n              onComposerSubmit={onComposerSubmit}\n              overrides={{\n                COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,\n                COMPOSER_SEND: $.THREAD_COMPOSER_SEND,\n              }}\n              roomId={thread.roomId}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ThreadProps<M> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA2JO;AAAe;AAElB;AACE;AACuB;AACT;AACd;AACoB;AACJ;AACD;AACG;AACe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AACE;AAEuD;AAEzD;AACE;AAE4D;AAE9D;AAAoD;AAC3C;AAET;AAEE;AACE;AAAA;AAIF;AACE;AAAO;AAIT;AAAoC;AAGZ;AAGxB;AAEI;AACH;AACD;AACA;AACA;AACO;AACP;AAEF;AACA;AAEA;AACE;AAEE;AAAA;AACwD;AACxD;AACF;AAGF;AACE;AAAsB;AAGxB;AAA6B;AAEzB;AAEA;AACE;AAA8B;AAE9B;AAAgC;AAClC;AACF;AACA;AACE;AACA;AACA;AACO;AACT;AAGF;AAA4B;AAExB;AAEA;AAAyC;AAClB;AAGvB;AACE;AAAuB;AACzB;AACF;AACwC;AAG1C;AAEK;AACY;AACT;AAC2B;AAC3B;AACF;AACsC;AACQ;AACvC;AACH;AACC;AAEJ;AAAc;AAEX;AACA;AAGA;AACG;AACc;AACH;AACmB;AAC7B;AACe;AACF;AACb;AACA;AACA;AACA;AAGA;AACiB;AACjB;AACA;AACA;AAIM;AAGmC;AAIpC;AAIS;AAGP;AACiB;AACC;AACV;AAEN;AACW;AACD;AAID;AAIL;AAAuB;AAEvB;AAAsB;AAK7B;AAKV;AAGG;AAAsB;AACpB;AACW;AACI;AAEb;AAAe;AACb;AAAwB;AAO/B;AAKH;AACW;AACO;AACuC;AACxD;AACwB;AACxB;AACW;AACe;AACP;AACnB;AACe;AAIvB;AAGN;;"}

package/dist/components/internal/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n  variant?: \"default\" | \"outline\" | \"primary\";\n  size?: \"default\" | \"large\";\n  disableable?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = \"default\",\n      size = \"default\",\n      disableable = true,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        type=\"button\"\n        className={classNames(\n          \"lb-button\",\n          !disableable && \"lb-button:non-disableable\",\n          className\n        )}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;AAaO;AAAe;AAElB;AACY;AACH;AACO;AACd;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AACP;AAGN;;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n  variant?: \"default\" | \"outline\" | \"toggle\" | \"primary\";\n  size?: \"default\" | \"large\";\n  disableable?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = \"default\",\n      size = \"default\",\n      disableable = true,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        type=\"button\"\n        className={classNames(\n          \"lb-button\",\n          !disableable && \"lb-button:non-disableable\",\n          className\n        )}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;AAaO;AAAe;AAElB;AACY;AACH;AACO;AACd;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AACP;AAGN;;"}

package/dist/components/internal/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n  variant?: \"default\" | \"outline\" | \"primary\";\n  size?: \"default\" | \"large\";\n  disableable?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = \"default\",\n      size = \"default\",\n      disableable = true,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        type=\"button\"\n        className={classNames(\n          \"lb-button\",\n          !disableable && \"lb-button:non-disableable\",\n          className\n        )}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;AAaO;AAAe;AAElB;AACY;AACH;AACO;AACd;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AACP;AAGN;;"}
+{"version":3,"file":"Button.mjs","sources":["../../../src/components/internal/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface ButtonProps extends ComponentProps<\"button\"> {\n  variant?: \"default\" | \"outline\" | \"toggle\" | \"primary\";\n  size?: \"default\" | \"large\";\n  disableable?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = \"default\",\n      size = \"default\",\n      disableable = true,\n      className,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    return (\n      <button\n        type=\"button\"\n        className={classNames(\n          \"lb-button\",\n          !disableable && \"lb-button:non-disableable\",\n          className\n        )}\n        data-variant={variant}\n        data-size={size}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;AAaO;AAAe;AAElB;AACY;AACH;AACO;AACd;AACG;AAIL;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACH;AACP;AACC;AACP;AAGN;;"}

package/dist/icons/Bold.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var Icon = require('../components/internal/Icon.js');
+
+function BoldIcon(props) {
+  return /* @__PURE__ */ React.createElement(Icon.Icon, {
+    ...props
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M5.5 10h6.63m0 5.75H5.5V4.25h5.63M11.125 10a2.875 2.875 0 0 0 0-5.75m1 11.5a2.875 2.875 0 0 0 0-5.75"
+  }));
+}
+
+exports.BoldIcon = BoldIcon;
+//# sourceMappingURL=Bold.js.map

package/dist/icons/Bold.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bold.js","sources":["../../src/icons/Bold.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function BoldIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <Icon {...props}>\n      <path d=\"M5.5 10h6.63m0 5.75H5.5V4.25h5.63M11.125 10a2.875 2.875 0 0 0 0-5.75m1 11.5a2.875 2.875 0 0 0 0-5.75\" />\n    </Icon>\n  );\n}\n"],"names":["Icon"],"mappings":";;;;;AAKO,SAAS,SAAS,KAA8B,EAAA;AACrD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAAA,SAAA,EAAA;AAAA,IAAM,GAAG,KAAA;AAAA,GAAA,kBACP,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,CAAE,EAAA,sGAAA;AAAA,GAAuG,CACjH,CAAA,CAAA;AAEJ;;;;"}

package/dist/icons/Bold.mjs

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { Icon } from '../components/internal/Icon.mjs';
+
+function BoldIcon(props) {
+  return /* @__PURE__ */ React__default.createElement(Icon, {
+    ...props
+  }, /* @__PURE__ */ React__default.createElement("path", {
+    d: "M5.5 10h6.63m0 5.75H5.5V4.25h5.63M11.125 10a2.875 2.875 0 0 0 0-5.75m1 11.5a2.875 2.875 0 0 0 0-5.75"
+  }));
+}
+
+export { BoldIcon };
+//# sourceMappingURL=Bold.mjs.map

package/dist/icons/Bold.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bold.mjs","sources":["../../src/icons/Bold.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function BoldIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <Icon {...props}>\n      <path d=\"M5.5 10h6.63m0 5.75H5.5V4.25h5.63M11.125 10a2.875 2.875 0 0 0 0-5.75m1 11.5a2.875 2.875 0 0 0 0-5.75\" />\n    </Icon>\n  );\n}\n"],"names":["React"],"mappings":";;;AAKO,SAAS,SAAS,KAA8B,EAAA;AACrD,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAM,GAAG,KAAA;AAAA,GAAA,kBACPA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,CAAE,EAAA,sGAAA;AAAA,GAAuG,CACjH,CAAA,CAAA;AAEJ;;;;"}

package/dist/icons/Code.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var Icon = require('../components/internal/Icon.js');
+
+function CodeIcon(props) {
+  return /* @__PURE__ */ React.createElement(Icon.Icon, {
+    ...props
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "m7.5 6-4 4 4 4m5-8 4 4-4 4"
+  }));
+}
+
+exports.CodeIcon = CodeIcon;
+//# sourceMappingURL=Code.js.map

package/dist/icons/Code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.js","sources":["../../src/icons/Code.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function CodeIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <Icon {...props}>\n      <path d=\"m7.5 6-4 4 4 4m5-8 4 4-4 4\" />\n    </Icon>\n  );\n}\n"],"names":["Icon"],"mappings":";;;;;AAKO,SAAS,SAAS,KAA8B,EAAA;AACrD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAAA,SAAA,EAAA;AAAA,IAAM,GAAG,KAAA;AAAA,GAAA,kBACP,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,CAAE,EAAA,4BAAA;AAAA,GAA6B,CACvC,CAAA,CAAA;AAEJ;;;;"}

package/dist/icons/Code.mjs

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { Icon } from '../components/internal/Icon.mjs';
+
+function CodeIcon(props) {
+  return /* @__PURE__ */ React__default.createElement(Icon, {
+    ...props
+  }, /* @__PURE__ */ React__default.createElement("path", {
+    d: "m7.5 6-4 4 4 4m5-8 4 4-4 4"
+  }));
+}
+
+export { CodeIcon };
+//# sourceMappingURL=Code.mjs.map

package/dist/icons/Code.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.mjs","sources":["../../src/icons/Code.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function CodeIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <Icon {...props}>\n      <path d=\"m7.5 6-4 4 4 4m5-8 4 4-4 4\" />\n    </Icon>\n  );\n}\n"],"names":["React"],"mappings":";;;AAKO,SAAS,SAAS,KAA8B,EAAA;AACrD,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAM,GAAG,KAAA;AAAA,GAAA,kBACPA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,CAAE,EAAA,4BAAA;AAAA,GAA6B,CACvC,CAAA,CAAA;AAEJ;;;;"}

package/dist/icons/Italic.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var Icon = require('../components/internal/Icon.js');
+
+function ItalicIcon(props) {
+  return /* @__PURE__ */ React.createElement(Icon.Icon, {
+    ...props
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M15 4.25H8m4 11.5H5m6.75-11.5-3.5 11.5"
+  }));
+}
+
+exports.ItalicIcon = ItalicIcon;
+//# sourceMappingURL=Italic.js.map

package/dist/icons/Italic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Italic.js","sources":["../../src/icons/Italic.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function ItalicIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <Icon {...props}>\n      <path d=\"M15 4.25H8m4 11.5H5m6.75-11.5-3.5 11.5\" />\n    </Icon>\n  );\n}\n"],"names":["Icon"],"mappings":";;;;;AAKO,SAAS,WAAW,KAA8B,EAAA;AACvD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAAA,SAAA,EAAA;AAAA,IAAM,GAAG,KAAA;AAAA,GAAA,kBACP,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,CAAE,EAAA,wCAAA;AAAA,GAAyC,CACnD,CAAA,CAAA;AAEJ;;;;"}

package/dist/icons/Italic.mjs

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { Icon } from '../components/internal/Icon.mjs';
+
+function ItalicIcon(props) {
+  return /* @__PURE__ */ React__default.createElement(Icon, {
+    ...props
+  }, /* @__PURE__ */ React__default.createElement("path", {
+    d: "M15 4.25H8m4 11.5H5m6.75-11.5-3.5 11.5"
+  }));
+}
+
+export { ItalicIcon };
+//# sourceMappingURL=Italic.mjs.map

package/dist/icons/Italic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Italic.mjs","sources":["../../src/icons/Italic.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function ItalicIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <Icon {...props}>\n      <path d=\"M15 4.25H8m4 11.5H5m6.75-11.5-3.5 11.5\" />\n    </Icon>\n  );\n}\n"],"names":["React"],"mappings":";;;AAKO,SAAS,WAAW,KAA8B,EAAA;AACvD,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAM,GAAG,KAAA;AAAA,GAAA,kBACPA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,CAAE,EAAA,wCAAA;AAAA,GAAyC,CACnD,CAAA,CAAA;AAEJ;;;;"}

package/dist/icons/Strikethrough.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var Icon = require('../components/internal/Icon.js');
+
+function StrikethroughIcon(props) {
+  return /* @__PURE__ */ React.createElement(Icon.Icon, {
+    ...props
+  }, /* @__PURE__ */ React.createElement("path", {
+    d: "M15.5 10h-11m4.669 0C7.599 9.44 6.5 8.484 6.5 7.125 6.5 5.537 7.79 4.25 10 4.25c1.654 0 2.793.721 3.261 1.75M6.74 14c.468 1.029 1.607 1.75 3.261 1.75 2 0 3.5-1 3.5-2.5 0-.085-.004-.169-.013-.25"
+  }));
+}
+
+exports.StrikethroughIcon = StrikethroughIcon;
+//# sourceMappingURL=Strikethrough.js.map

package/dist/icons/Strikethrough.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Strikethrough.js","sources":["../../src/icons/Strikethrough.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function StrikethroughIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <Icon {...props}>\n      <path d=\"M15.5 10h-11m4.669 0C7.599 9.44 6.5 8.484 6.5 7.125 6.5 5.537 7.79 4.25 10 4.25c1.654 0 2.793.721 3.261 1.75M6.74 14c.468 1.029 1.607 1.75 3.261 1.75 2 0 3.5-1 3.5-2.5 0-.085-.004-.169-.013-.25\" />\n    </Icon>\n  );\n}\n"],"names":["Icon"],"mappings":";;;;;AAKO,SAAS,kBAAkB,KAA8B,EAAA;AAC9D,EAAA,uBACG,KAAA,CAAA,aAAA,CAAAA,SAAA,EAAA;AAAA,IAAM,GAAG,KAAA;AAAA,GAAA,kBACP,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,CAAE,EAAA,mMAAA;AAAA,GAAoM,CAC9M,CAAA,CAAA;AAEJ;;;;"}

package/dist/icons/Strikethrough.mjs

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { Icon } from '../components/internal/Icon.mjs';
+
+function StrikethroughIcon(props) {
+  return /* @__PURE__ */ React__default.createElement(Icon, {
+    ...props
+  }, /* @__PURE__ */ React__default.createElement("path", {
+    d: "M15.5 10h-11m4.669 0C7.599 9.44 6.5 8.484 6.5 7.125 6.5 5.537 7.79 4.25 10 4.25c1.654 0 2.793.721 3.261 1.75M6.74 14c.468 1.029 1.607 1.75 3.261 1.75 2 0 3.5-1 3.5-2.5 0-.085-.004-.169-.013-.25"
+  }));
+}
+
+export { StrikethroughIcon };
+//# sourceMappingURL=Strikethrough.mjs.map

package/dist/icons/Strikethrough.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Strikethrough.mjs","sources":["../../src/icons/Strikethrough.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { Icon } from \"../components/internal/Icon\";\n\nexport function StrikethroughIcon(props: ComponentProps<\"svg\">) {\n  return (\n    <Icon {...props}>\n      <path d=\"M15.5 10h-11m4.669 0C7.599 9.44 6.5 8.484 6.5 7.125 6.5 5.537 7.79 4.25 10 4.25c1.654 0 2.793.721 3.261 1.75M6.74 14c.468 1.029 1.607 1.75 3.261 1.75 2 0 3.5-1 3.5-2.5 0-.085-.004-.169-.013-.25\" />\n    </Icon>\n  );\n}\n"],"names":["React"],"mappings":";;;AAKO,SAAS,kBAAkB,KAA8B,EAAA;AAC9D,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAM,GAAG,KAAA;AAAA,GAAA,kBACPA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,CAAE,EAAA,mMAAA;AAAA,GAAoM,CAC9M,CAAA,CAAA;AAEJ;;;;"}

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { CommentAttachment, CommentData, CommentBody, BaseMetadata, DM, HistoryVersion, InboxNotificationData, InboxNotificationThreadData, InboxNotificationTextMentionData, InboxNotificationCustomData, KDAD, ThreadData } from '@liveblocks/core';
-import React, { ElementType, ComponentPropsWithoutRef, ReactNode, MouseEvent, FormEvent, ComponentType, RefAttributes, ComponentProps, PropsWithChildren } from 'react';
+import { CommentAttachment, CommentBody, BaseMetadata, DM, CommentData, HistoryVersion, InboxNotificationData, InboxNotificationThreadData, InboxNotificationTextMentionData, InboxNotificationCustomData, KDAD, ThreadData } from '@liveblocks/core';
+import React, { ElementType, ComponentPropsWithoutRef, ReactNode, FormEvent, ComponentType, RefAttributes, MouseEvent, ComponentProps, PropsWithChildren } from 'react';
 
 declare type Direction = "ltr" | "rtl";
 declare type SlotProp = {
@@ -9,6 +9,17 @@ declare type SlotProp = {
     asChild?: boolean;
 };
 declare type ComponentPropsWithSlot<TElement extends ElementType<any>> = ComponentPropsWithoutRef<TElement> & SlotProp;
+declare type ComposerBodyText = {
+    bold?: boolean;
+    italic?: boolean;
+    strikethrough?: boolean;
+    code?: boolean;
+    text: string;
+};
+declare type ComposerBodyMark = keyof Omit<ComposerBodyText, "text">;
+declare type ComposerBodyMarks = {
+    [K in ComposerBodyMark]: boolean;
+};
 interface CommentAttachmentArgs {
     /**
      * The attachment.
@@ -57,6 +68,7 @@ interface ComposerOverrides {
     COMPOSER_REMOVE_ATTACHMENT: string;
     COMPOSER_PLACEHOLDER: string;
     COMPOSER_SEND: string;
+    COMPOSER_TOGGLE_MARK: (mark: ComposerBodyMark) => string;
 }
 interface ThreadOverrides {
     THREAD_RESOLVE: string;
@@ -83,68 +95,6 @@ interface HistoryVersionPreviewOverrides {
 declare type Overrides = LocalizationOverrides & GlobalOverrides & ComposerOverrides & CommentOverrides & ThreadOverrides & InboxNotificationOverrides & HistoryVersionPreviewOverrides;
 declare function useOverrides(overrides?: Partial<Overrides>): Overrides;
 
-interface CommentProps extends ComponentPropsWithoutRef<"div"> {
-    /**
-     * The comment to display.
-     */
-    comment: CommentData;
-    /**
-     * How to show or hide the actions.
-     */
-    showActions?: boolean | "hover";
-    /**
-     * Whether to show the comment if it was deleted. If set to `false`, it will render deleted comments as `null`.
-     */
-    showDeleted?: boolean;
-    /**
-     * Whether to show reactions.
-     */
-    showReactions?: boolean;
-    /**
-     * Whether to show attachments.
-     */
-    showAttachments?: boolean;
-    /**
-     * Whether to indent the comment's content.
-     */
-    indentContent?: boolean;
-    /**
-     * The event handler called when the comment is edited.
-     */
-    onCommentEdit?: (comment: CommentData) => void;
-    /**
-     * The event handler called when the comment is deleted.
-     */
-    onCommentDelete?: (comment: CommentData) => void;
-    /**
-     * The event handler called when clicking on the author.
-     */
-    onAuthorClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;
-    /**
-     * The event handler called when clicking on a mention.
-     */
-    onMentionClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;
-    /**
-     * The event handler called when clicking on a comment's attachment.
-     */
-    onAttachmentClick?: (args: CommentAttachmentArgs, event: MouseEvent<HTMLElement>) => void;
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides & CommentOverrides & ComposerOverrides>;
-}
-/**
- * Displays a single comment.
- *
- * @example
- * <>
- *   {thread.comments.map((comment) => (
- *     <Comment key={comment.id} comment={comment} />
- *   ))}
- * </>
- */
-declare const Comment: React.ForwardRefExoticComponent<CommentProps & React.RefAttributes<HTMLDivElement>>;
-
 interface ComposerEditorMentionProps {
     /**
      * Whether the mention is selected.
@@ -179,6 +129,7 @@ declare type ComposerEditorMentionSuggestionsProps = {
      */
     selectedUserId?: string;
 };
+declare type ComposerEditorFloatingToolbarProps = Record<string, never>;
 interface ComposerEditorComponents {
     /**
      * The component used to display mentions.
@@ -192,6 +143,10 @@ interface ComposerEditorComponents {
      * The component used to display links.
      */
     Link: ComponentType<ComposerEditorLinkProps>;
+    /**
+     * The component used to display a floating toolbar attached to the selection.
+     */
+    FloatingToolbar?: ComponentType<ComposerEditorFloatingToolbarProps>;
 }
 interface ComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue"> {
     /**
@@ -317,6 +272,10 @@ declare type ComposerProps<M extends BaseMetadata = DM> = Omit<ComponentPropsWit
      * Whether to show and allow adding attachments.
      */
     showAttachments?: boolean;
+    /**
+     * Whether to show formatting controls (e.g. a floating toolbar with formatting toggles when selecting text)
+     */
+    showFormattingControls?: boolean;
     /**
      * Whether the composer is disabled.
      */
@@ -338,6 +297,72 @@ declare type ComposerProps<M extends BaseMetadata = DM> = Omit<ComponentPropsWit
  */
 declare const Composer: <M extends BaseMetadata = BaseMetadata>(props: ComposerProps<M> & RefAttributes<HTMLFormElement>) => JSX.Element;
 
+interface CommentProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The comment to display.
+     */
+    comment: CommentData;
+    /**
+     * How to show or hide the actions.
+     */
+    showActions?: boolean | "hover";
+    /**
+     * Whether to show the comment if it was deleted. If set to `false`, it will render deleted comments as `null`.
+     */
+    showDeleted?: boolean;
+    /**
+     * Whether to show reactions.
+     */
+    showReactions?: boolean;
+    /**
+     * Whether to show attachments.
+     */
+    showAttachments?: boolean;
+    /**
+     * Whether to show the composer's formatting controls when editing the comment.
+     */
+    showComposerFormattingControls?: ComposerProps["showFormattingControls"];
+    /**
+     * Whether to indent the comment's content.
+     */
+    indentContent?: boolean;
+    /**
+     * The event handler called when the comment is edited.
+     */
+    onCommentEdit?: (comment: CommentData) => void;
+    /**
+     * The event handler called when the comment is deleted.
+     */
+    onCommentDelete?: (comment: CommentData) => void;
+    /**
+     * The event handler called when clicking on the author.
+     */
+    onAuthorClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;
+    /**
+     * The event handler called when clicking on a mention.
+     */
+    onMentionClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;
+    /**
+     * The event handler called when clicking on a comment's attachment.
+     */
+    onAttachmentClick?: (args: CommentAttachmentArgs, event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Override the component's strings.
+     */
+    overrides?: Partial<GlobalOverrides & CommentOverrides & ComposerOverrides>;
+}
+/**
+ * Displays a single comment.
+ *
+ * @example
+ * <>
+ *   {thread.comments.map((comment) => (
+ *     <Comment key={comment.id} comment={comment} />
+ *   ))}
+ * </>
+ */
+declare const Comment: React.ForwardRefExoticComponent<CommentProps & React.RefAttributes<HTMLDivElement>>;
+
 interface HistoryVersionSummaryProps extends ComponentPropsWithoutRef<"button"> {
     version: HistoryVersion;
     selected?: boolean;
@@ -534,6 +559,10 @@ interface ThreadProps<M extends BaseMetadata = DM> extends ComponentPropsWithout
      * Whether to show reactions.
      */
     showReactions?: CommentProps["showReactions"];
+    /**
+     * Whether to show the composer's formatting controls.
+     */
+    showComposerFormattingControls?: ComposerProps["showFormattingControls"];
     /**
      * Whether to indent the comments' content.
      */
@@ -633,42 +662,4 @@ declare type LiveblocksUIConfigProps = PropsWithChildren<{
  */
 declare function LiveblocksUIConfig({ overrides, components, portalContainer, preventUnsavedComposerChanges, children, }: LiveblocksUIConfigProps): React.JSX.Element;
 
-interface TimestampProps extends Omit<ComponentPropsWithSlot<"time">, "children" | "title"> {
-    /**
-     * The date to display.
-     */
-    date: Date | string | number;
-    /**
-     * A function to format the displayed date.
-     */
-    children?: (date: Date, locale?: string) => ReactNode;
-    /**
-     * The `title` attribute's value or a function to format it.
-     */
-    title?: string | ((date: Date, locale?: string) => string);
-    /**
-     * The interval in milliseconds at which the component will re-render.
-     * Can be set to `false` to disable re-rendering.
-     */
-    interval?: number | false;
-    /**
-     * The locale used when formatting the date.
-     */
-    locale?: string;
-}
-/**
- * Displays a formatted date, and automatically re-renders to support relative
- * formatting. Defaults to relative formatting for recent dates and a short
- * absolute formatting for older ones.
- *
- * @example
- * <Timestamp date={new Date()} />
- *
- * @example
- * <Timestamp date={new Date()} title={(date) => date.toISOString()} interval={false}>
- *   {(date) => date.toLocaleDateString()}
- * </Timestamp>
- */
-declare const Timestamp: React.ForwardRefExoticComponent<TimestampProps & React.RefAttributes<HTMLTimeElement>>;
-
-export { Comment, CommentAttachmentArgs, CommentOverrides, CommentProps, Composer, ComposerOverrides, ComposerProps, ComposerSubmitComment, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUIConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, Timestamp, useOverrides };
+export { Comment, CommentAttachmentArgs, CommentOverrides, CommentProps, Composer, ComposerBodyMark, ComposerBodyMarks, ComposerOverrides, ComposerProps, ComposerSubmitComment, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUIConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, useOverrides };