@liveblocks/react-ui 1.12.0-initial1

package/dist/components/Thread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thread.js","sources":["../../src/components/Thread.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, CommentData, ThreadData } from \"@liveblocks/core\";\nimport { useRoomContextBundle } from \"@liveblocks/react\";\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 type { ThreadMetadata } from \"../types\";\nimport { classNames } from \"../utils/class-names\";\nimport { findLastIndex } from \"../utils/find-last-index\";\nimport type { CommentProps } from \"./Comment\";\nimport { Comment } from \"./Comment\";\nimport { Composer } from \"./Composer\";\nimport { Button } from \"./internal/Button\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\nexport interface ThreadProps<M extends BaseMetadata = ThreadMetadata>\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   * 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   * 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 = ThreadMetadata>(\n    {\n      thread,\n      indentCommentContent = true,\n      showActions = \"hover\",\n      showDeletedComments,\n      showResolveAction = true,\n      showReactions = true,\n      showComposer = \"collapsed\",\n      onResolvedChange,\n      onCommentEdit,\n      onCommentDelete,\n      onThreadDelete,\n      onAuthorClick,\n      onMentionClick,\n      overrides,\n      className,\n      ...props\n    }: ThreadProps<M>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const { useEditThreadMetadata, useThreadSubscription } =\n      useRoomContextBundle();\n    const editThreadMetadata = useEditThreadMetadata();\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        editThreadMetadata({ threadId: thread.id, metadata: { resolved } });\n      },\n      [editThreadMetadata, onResolvedChange, thread.id]\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={\n            (thread.metadata as ThreadMetadata).resolved ? \"\" : undefined\n          }\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                  onCommentEdit={onCommentEdit}\n                  onCommentDelete={handleCommentDelete}\n                  onAuthorClick={onAuthorClick}\n                  onMentionClick={onMentionClick}\n                  markThreadAsReadWhenVisible={\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.metadata as ThreadMetadata).resolved\n                            ? $.THREAD_UNRESOLVE\n                            : $.THREAD_RESOLVE\n                        }\n                      >\n                        <TogglePrimitive.Root\n                          pressed={(thread.metadata as ThreadMetadata).resolved}\n                          onPressedChange={handleResolvedChange}\n                          asChild\n                        >\n                          <Button\n                            className=\"lb-comment-action\"\n                            onClick={stopPropagation}\n                            aria-label={\n                              (thread.metadata as ThreadMetadata).resolved\n                                ? $.THREAD_UNRESOLVE\n                                : $.THREAD_RESOLVE\n                            }\n                          >\n                            {(thread.metadata as ThreadMetadata).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              overrides={{\n                COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,\n                COMPOSER_SEND: $.THREAD_COMPOSER_SEND,\n              }}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = ThreadMetadata>(\n  props: ThreadProps<M> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8HO;AAAe;AAElB;AACE;AACuB;AACT;AACd;AACoB;AACJ;AACD;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AAEA;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;AAAkE;AACpE;AACgD;AAGlD;AAA4B;AAExB;AAEA;AAAyC;AAClB;AAGvB;AACE;AAAuB;AACzB;AACF;AACwC;AAG1C;AAEK;AACY;AACT;AAC2B;AAC3B;AACF;AAEsD;AAER;AACvC;AACH;AACC;AAEJ;AAAc;AAEX;AACA;AAGA;AACG;AACc;AACH;AACmB;AAC7B;AACe;AACF;AACb;AACA;AACA;AACiB;AACjB;AACA;AAIM;AAGmC;AAIpC;AAIS;AAGP;AAC8C;AAC5B;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;AAC7C;AACe;AACP;AACnB;AAIR;AAGN;;"}

package/dist/components/Thread.mjs

@@ -0,0 +1,167 @@
+'use client';
+import { useRoomContextBundle } from '@liveblocks/react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import React__default, { forwardRef, useMemo, useState, useEffect, useCallback, Fragment } from 'react';
+import { ArrowDownIcon } from '../icons/ArrowDown.mjs';
+import { ResolveIcon } from '../icons/Resolve.mjs';
+import { ResolvedIcon } from '../icons/Resolved.mjs';
+import { useOverrides } from '../overrides.mjs';
+import { classNames } from '../utils/class-names.mjs';
+import { findLastIndex } from '../utils/find-last-index.mjs';
+import { Comment } from './Comment.mjs';
+import { Composer } from './Composer.mjs';
+import { Button } from './internal/Button.mjs';
+import { Tooltip } from './internal/Tooltip.mjs';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+
+const Thread = forwardRef(
+  ({
+    thread,
+    indentCommentContent = true,
+    showActions = "hover",
+    showDeletedComments,
+    showResolveAction = true,
+    showReactions = true,
+    showComposer = "collapsed",
+    onResolvedChange,
+    onCommentEdit,
+    onCommentDelete,
+    onThreadDelete,
+    onAuthorClick,
+    onMentionClick,
+    overrides,
+    className,
+    ...props
+  }, forwardedRef) => {
+    const { useEditThreadMetadata, useThreadSubscription } = useRoomContextBundle();
+    const editThreadMetadata = useEditThreadMetadata();
+    const $ = useOverrides(overrides);
+    const firstCommentIndex = useMemo(() => {
+      return showDeletedComments ? 0 : thread.comments.findIndex((comment) => comment.body);
+    }, [showDeletedComments, thread.comments]);
+    const lastCommentIndex = useMemo(() => {
+      return showDeletedComments ? thread.comments.length - 1 : findLastIndex(thread.comments, (comment) => comment.body);
+    }, [showDeletedComments, thread.comments]);
+    const { status: subscriptionStatus, unreadSince } = useThreadSubscription(
+      thread.id
+    );
+    const unreadIndex = useMemo(() => {
+      if (subscriptionStatus !== "subscribed") {
+        return;
+      }
+      if (unreadSince === null) {
+        return firstCommentIndex;
+      }
+      const unreadIndex2 = thread.comments.findIndex(
+        (comment) => (showDeletedComments ? true : comment.body) && comment.createdAt > unreadSince
+      );
+      return unreadIndex2 >= 0 && unreadIndex2 < thread.comments.length ? unreadIndex2 : void 0;
+    }, [
+      firstCommentIndex,
+      showDeletedComments,
+      subscriptionStatus,
+      thread.comments,
+      unreadSince
+    ]);
+    const [newIndex, setNewIndex] = useState();
+    const newIndicatorIndex = newIndex === void 0 ? unreadIndex : newIndex;
+    useEffect(() => {
+      if (unreadIndex) {
+        setNewIndex(
+          (persistedUnreadIndex) => Math.min(persistedUnreadIndex ?? Infinity, unreadIndex)
+        );
+      }
+    }, [unreadIndex]);
+    const stopPropagation = useCallback((event) => {
+      event.stopPropagation();
+    }, []);
+    const handleResolvedChange = useCallback(
+      (resolved) => {
+        onResolvedChange?.(resolved);
+        editThreadMetadata({ threadId: thread.id, metadata: { resolved } });
+      },
+      [editThreadMetadata, onResolvedChange, thread.id]
+    );
+    const handleCommentDelete = useCallback(
+      (comment) => {
+        onCommentDelete?.(comment);
+        const filteredComments = thread.comments.filter(
+          (comment2) => comment2.body
+        );
+        if (filteredComments.length <= 1) {
+          onThreadDelete?.(thread);
+        }
+      },
+      [onCommentDelete, onThreadDelete, thread]
+    );
+    return /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement("div", {
+      className: classNames(
+        "lb-root lb-thread",
+        showActions === "hover" && "lb-thread:show-actions-hover",
+        className
+      ),
+      "data-resolved": thread.metadata.resolved ? "" : void 0,
+      "data-unread": unreadIndex !== void 0 ? "" : void 0,
+      dir: $.dir,
+      ...props,
+      ref: forwardedRef
+    }, /* @__PURE__ */ React__default.createElement("div", {
+      className: "lb-thread-comments"
+    }, thread.comments.map((comment, index) => {
+      const isFirstComment = index === firstCommentIndex;
+      const isUnread = unreadIndex !== void 0 && index >= unreadIndex;
+      const children = /* @__PURE__ */ React__default.createElement(Comment, {
+        key: comment.id,
+        className: "lb-thread-comment",
+        "data-unread": isUnread ? "" : void 0,
+        comment,
+        indentContent: indentCommentContent,
+        showDeleted: showDeletedComments,
+        showActions,
+        showReactions,
+        onCommentEdit,
+        onCommentDelete: handleCommentDelete,
+        onAuthorClick,
+        onMentionClick,
+        markThreadAsReadWhenVisible: index === lastCommentIndex && isUnread ? thread.id : void 0,
+        additionalActionsClassName: isFirstComment ? "lb-thread-actions" : void 0,
+        additionalActions: isFirstComment && showResolveAction ? /* @__PURE__ */ React__default.createElement(Tooltip, {
+          content: thread.metadata.resolved ? $.THREAD_UNRESOLVE : $.THREAD_RESOLVE
+        }, /* @__PURE__ */ React__default.createElement(TogglePrimitive.Root, {
+          pressed: thread.metadata.resolved,
+          onPressedChange: handleResolvedChange,
+          asChild: true
+        }, /* @__PURE__ */ React__default.createElement(Button, {
+          className: "lb-comment-action",
+          onClick: stopPropagation,
+          "aria-label": thread.metadata.resolved ? $.THREAD_UNRESOLVE : $.THREAD_RESOLVE
+        }, thread.metadata.resolved ? /* @__PURE__ */ React__default.createElement(ResolvedIcon, {
+          className: "lb-button-icon"
+        }) : /* @__PURE__ */ React__default.createElement(ResolveIcon, {
+          className: "lb-button-icon"
+        })))) : null
+      });
+      return index === newIndicatorIndex && newIndicatorIndex !== firstCommentIndex && newIndicatorIndex <= lastCommentIndex ? /* @__PURE__ */ React__default.createElement(Fragment, {
+        key: comment.id
+      }, /* @__PURE__ */ React__default.createElement("div", {
+        className: "lb-thread-new-indicator",
+        "aria-label": $.THREAD_NEW_INDICATOR_DESCRIPTION
+      }, /* @__PURE__ */ React__default.createElement("span", {
+        className: "lb-thread-new-indicator-label"
+      }, /* @__PURE__ */ React__default.createElement(ArrowDownIcon, {
+        className: "lb-thread-new-indicator-label-icon"
+      }), $.THREAD_NEW_INDICATOR)), children) : children;
+    })), showComposer && /* @__PURE__ */ React__default.createElement(Composer, {
+      className: "lb-thread-composer",
+      threadId: thread.id,
+      defaultCollapsed: showComposer === "collapsed" ? true : void 0,
+      overrides: {
+        COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,
+        COMPOSER_SEND: $.THREAD_COMPOSER_SEND
+      }
+    })));
+  }
+);
+
+export { Thread };
+//# sourceMappingURL=Thread.mjs.map

package/dist/components/Thread.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thread.mjs","sources":["../../src/components/Thread.tsx"],"sourcesContent":["\"use client\";\n\nimport type { BaseMetadata, CommentData, ThreadData } from \"@liveblocks/core\";\nimport { useRoomContextBundle } from \"@liveblocks/react\";\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 type { ThreadMetadata } from \"../types\";\nimport { classNames } from \"../utils/class-names\";\nimport { findLastIndex } from \"../utils/find-last-index\";\nimport type { CommentProps } from \"./Comment\";\nimport { Comment } from \"./Comment\";\nimport { Composer } from \"./Composer\";\nimport { Button } from \"./internal/Button\";\nimport { Tooltip, TooltipProvider } from \"./internal/Tooltip\";\n\nexport interface ThreadProps<M extends BaseMetadata = ThreadMetadata>\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   * 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   * 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 = ThreadMetadata>(\n    {\n      thread,\n      indentCommentContent = true,\n      showActions = \"hover\",\n      showDeletedComments,\n      showResolveAction = true,\n      showReactions = true,\n      showComposer = \"collapsed\",\n      onResolvedChange,\n      onCommentEdit,\n      onCommentDelete,\n      onThreadDelete,\n      onAuthorClick,\n      onMentionClick,\n      overrides,\n      className,\n      ...props\n    }: ThreadProps<M>,\n    forwardedRef: ForwardedRef<HTMLDivElement>\n  ) => {\n    const { useEditThreadMetadata, useThreadSubscription } =\n      useRoomContextBundle();\n    const editThreadMetadata = useEditThreadMetadata();\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        editThreadMetadata({ threadId: thread.id, metadata: { resolved } });\n      },\n      [editThreadMetadata, onResolvedChange, thread.id]\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={\n            (thread.metadata as ThreadMetadata).resolved ? \"\" : undefined\n          }\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                  onCommentEdit={onCommentEdit}\n                  onCommentDelete={handleCommentDelete}\n                  onAuthorClick={onAuthorClick}\n                  onMentionClick={onMentionClick}\n                  markThreadAsReadWhenVisible={\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.metadata as ThreadMetadata).resolved\n                            ? $.THREAD_UNRESOLVE\n                            : $.THREAD_RESOLVE\n                        }\n                      >\n                        <TogglePrimitive.Root\n                          pressed={(thread.metadata as ThreadMetadata).resolved}\n                          onPressedChange={handleResolvedChange}\n                          asChild\n                        >\n                          <Button\n                            className=\"lb-comment-action\"\n                            onClick={stopPropagation}\n                            aria-label={\n                              (thread.metadata as ThreadMetadata).resolved\n                                ? $.THREAD_UNRESOLVE\n                                : $.THREAD_RESOLVE\n                            }\n                          >\n                            {(thread.metadata as ThreadMetadata).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              overrides={{\n                COMPOSER_PLACEHOLDER: $.THREAD_COMPOSER_PLACEHOLDER,\n                COMPOSER_SEND: $.THREAD_COMPOSER_SEND,\n              }}\n            />\n          )}\n        </div>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = ThreadMetadata>(\n  props: ThreadProps<M> & RefAttributes<HTMLDivElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA8HO;AAAe;AAElB;AACE;AACuB;AACT;AACd;AACoB;AACJ;AACD;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AAEA;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;AAAkE;AACpE;AACgD;AAGlD;AAA4B;AAExB;AAEA;AAAyC;AAClB;AAGvB;AACE;AAAuB;AACzB;AACF;AACwC;AAG1C;AAEK;AACY;AACT;AAC2B;AAC3B;AACF;AAEsD;AAER;AACvC;AACH;AACC;AAEJ;AAAc;AAEX;AACA;AAGA;AACG;AACc;AACH;AACmB;AAC7B;AACe;AACF;AACb;AACA;AACA;AACiB;AACjB;AACA;AAIM;AAGmC;AAIpC;AAIS;AAGP;AAC8C;AAC5B;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;AAC7C;AACe;AACP;AACnB;AAIR;AAGN;;"}

package/dist/components/internal/Attribution.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var React = require('react');
+var classNames = require('../../utils/class-names.js');
+
+function Attribution({ className, ...props }) {
+  return /* @__PURE__ */ React.createElement("a", {
+    href: "https://liveblocks.io",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: classNames.classNames("lb-composer-attribution", className),
+    ...props
+  }, /* @__PURE__ */ React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 384 72",
+    "aria-label": "Made with Liveblocks"
+  }, /* @__PURE__ */ React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M86 10h-8v50h8V10Zm16 14h-8v36h8V24Zm0-15h-8v9h8V9Zm13 15h-9l12 36h10l13-36h-9l-9 28-8-28Zm44-1c-11 0-18 8-18 19s7 19 18 19c8 0 15-4 17-13h-8c-1 4-5 6-9 6-6 0-9-3-9-10h27c0-10-6-21-18-21Zm0 7c5 0 9 3 9 8h-18c0-5 4-8 9-8Zm42-7c-4 0-8 2-11 6V10h-8v50h8v-5c3 4 7 6 11 6 11 0 16-9 16-19s-5-19-16-19Zm-2 32c-7 0-9-7-9-13s2-13 9-13 9 7 9 13-2 13-9 13Zm32-45h-8v50h8V10Zm24 51c11 0 18-8 18-19s-8-19-18-19c-11 0-19 8-19 19s7 19 19 19Zm0-6c-8 0-10-7-10-13s2-13 10-13c7 0 9 7 9 13s-2 13-9 13Zm39 6c8 0 15-4 17-12l-8-1c-2 4-4 6-9 6-7 0-9-6-9-12s2-12 9-12c5 0 8 3 8 7l9-1c-2-8-9-13-17-13-11 0-18 9-18 19 0 11 7 19 18 19Zm30-14 4-4 10 17h10l-15-23 15-13h-11l-13 13V10h-9v50h9V47Zm39 14c8 0 16-3 16-12 0-8-8-10-15-11-2-1-7-1-7-5 0-3 3-4 6-4 4 0 7 3 7 7l8-1c-1-9-8-12-15-12s-15 3-15 11 9 10 15 11c3 1 8 2 8 5 0 4-4 5-7 5-5 0-8-3-9-7l-8 1c1 8 9 12 16 12ZM41 27H0l12 12v17l29-29ZM20 60h40L48 48V32L20 60Z",
+    fill: "currentColor"
+  })));
+}
+
+exports.Attribution = Attribution;
+//# sourceMappingURL=Attribution.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Attribution.js","sources":["../../../src/components/internal/Attribution.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\n\nexport function Attribution({ className, ...props }: ComponentProps<\"a\">) {\n  return (\n    <a\n      href=\"https://liveblocks.io\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={classNames(\"lb-composer-attribution\", className)}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 384 72\"\n        aria-label=\"Made with Liveblocks\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M86 10h-8v50h8V10Zm16 14h-8v36h8V24Zm0-15h-8v9h8V9Zm13 15h-9l12 36h10l13-36h-9l-9 28-8-28Zm44-1c-11 0-18 8-18 19s7 19 18 19c8 0 15-4 17-13h-8c-1 4-5 6-9 6-6 0-9-3-9-10h27c0-10-6-21-18-21Zm0 7c5 0 9 3 9 8h-18c0-5 4-8 9-8Zm42-7c-4 0-8 2-11 6V10h-8v50h8v-5c3 4 7 6 11 6 11 0 16-9 16-19s-5-19-16-19Zm-2 32c-7 0-9-7-9-13s2-13 9-13 9 7 9 13-2 13-9 13Zm32-45h-8v50h8V10Zm24 51c11 0 18-8 18-19s-8-19-18-19c-11 0-19 8-19 19s7 19 19 19Zm0-6c-8 0-10-7-10-13s2-13 10-13c7 0 9 7 9 13s-2 13-9 13Zm39 6c8 0 15-4 17-12l-8-1c-2 4-4 6-9 6-7 0-9-6-9-12s2-12 9-12c5 0 8 3 8 7l9-1c-2-8-9-13-17-13-11 0-18 9-18 19 0 11 7 19 18 19Zm30-14 4-4 10 17h10l-15-23 15-13h-11l-13 13V10h-9v50h9V47Zm39 14c8 0 16-3 16-12 0-8-8-10-15-11-2-1-7-1-7-5 0-3 3-4 6-4 4 0 7 3 7 7l8-1c-1-9-8-12-15-12s-15 3-15 11 9 10 15 11c3 1 8 2 8 5 0 4-4 5-7 5-5 0-8-3-9-7l-8 1c1 8 9 12 16 12ZM41 27H0l12 12v17l29-29ZM20 60h40L48 48V32L20 60Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </a>\n  );\n}\n"],"names":["classNames"],"mappings":";;;;;AAKO,SAAS,WAAY,CAAA,EAAE,SAAc,EAAA,GAAA,KAAA,EAA8B,EAAA;AACxE,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IACC,IAAK,EAAA,uBAAA;AAAA,IACL,MAAO,EAAA,QAAA;AAAA,IACP,GAAI,EAAA,qBAAA;AAAA,IACJ,SAAA,EAAWA,qBAAW,CAAA,yBAAA,EAA2B,SAAS,CAAA;AAAA,IACzD,GAAG,KAAA;AAAA,GAAA,kBAEH,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,KAAM,EAAA,4BAAA;AAAA,IACN,OAAQ,EAAA,YAAA;AAAA,IACR,YAAW,EAAA,sBAAA;AAAA,GAAA,kBAEV,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,QAAS,EAAA,SAAA;AAAA,IACT,QAAS,EAAA,SAAA;AAAA,IACT,CAAE,EAAA,y3BAAA;AAAA,IACF,IAAK,EAAA,cAAA;AAAA,GACP,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/internal/Attribution.mjs

@@ -0,0 +1,24 @@
+import React__default from 'react';
+import { classNames } from '../../utils/class-names.mjs';
+
+function Attribution({ className, ...props }) {
+  return /* @__PURE__ */ React__default.createElement("a", {
+    href: "https://liveblocks.io",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: classNames("lb-composer-attribution", className),
+    ...props
+  }, /* @__PURE__ */ React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 384 72",
+    "aria-label": "Made with Liveblocks"
+  }, /* @__PURE__ */ React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M86 10h-8v50h8V10Zm16 14h-8v36h8V24Zm0-15h-8v9h8V9Zm13 15h-9l12 36h10l13-36h-9l-9 28-8-28Zm44-1c-11 0-18 8-18 19s7 19 18 19c8 0 15-4 17-13h-8c-1 4-5 6-9 6-6 0-9-3-9-10h27c0-10-6-21-18-21Zm0 7c5 0 9 3 9 8h-18c0-5 4-8 9-8Zm42-7c-4 0-8 2-11 6V10h-8v50h8v-5c3 4 7 6 11 6 11 0 16-9 16-19s-5-19-16-19Zm-2 32c-7 0-9-7-9-13s2-13 9-13 9 7 9 13-2 13-9 13Zm32-45h-8v50h8V10Zm24 51c11 0 18-8 18-19s-8-19-18-19c-11 0-19 8-19 19s7 19 19 19Zm0-6c-8 0-10-7-10-13s2-13 10-13c7 0 9 7 9 13s-2 13-9 13Zm39 6c8 0 15-4 17-12l-8-1c-2 4-4 6-9 6-7 0-9-6-9-12s2-12 9-12c5 0 8 3 8 7l9-1c-2-8-9-13-17-13-11 0-18 9-18 19 0 11 7 19 18 19Zm30-14 4-4 10 17h10l-15-23 15-13h-11l-13 13V10h-9v50h9V47Zm39 14c8 0 16-3 16-12 0-8-8-10-15-11-2-1-7-1-7-5 0-3 3-4 6-4 4 0 7 3 7 7l8-1c-1-9-8-12-15-12s-15 3-15 11 9 10 15 11c3 1 8 2 8 5 0 4-4 5-7 5-5 0-8-3-9-7l-8 1c1 8 9 12 16 12ZM41 27H0l12 12v17l29-29ZM20 60h40L48 48V32L20 60Z",
+    fill: "currentColor"
+  })));
+}
+
+export { Attribution };
+//# sourceMappingURL=Attribution.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Attribution.mjs","sources":["../../../src/components/internal/Attribution.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport React from \"react\";\n\nimport { classNames } from \"../../utils/class-names\";\n\nexport function Attribution({ className, ...props }: ComponentProps<\"a\">) {\n  return (\n    <a\n      href=\"https://liveblocks.io\"\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={classNames(\"lb-composer-attribution\", className)}\n      {...props}\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 384 72\"\n        aria-label=\"Made with Liveblocks\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M86 10h-8v50h8V10Zm16 14h-8v36h8V24Zm0-15h-8v9h8V9Zm13 15h-9l12 36h10l13-36h-9l-9 28-8-28Zm44-1c-11 0-18 8-18 19s7 19 18 19c8 0 15-4 17-13h-8c-1 4-5 6-9 6-6 0-9-3-9-10h27c0-10-6-21-18-21Zm0 7c5 0 9 3 9 8h-18c0-5 4-8 9-8Zm42-7c-4 0-8 2-11 6V10h-8v50h8v-5c3 4 7 6 11 6 11 0 16-9 16-19s-5-19-16-19Zm-2 32c-7 0-9-7-9-13s2-13 9-13 9 7 9 13-2 13-9 13Zm32-45h-8v50h8V10Zm24 51c11 0 18-8 18-19s-8-19-18-19c-11 0-19 8-19 19s7 19 19 19Zm0-6c-8 0-10-7-10-13s2-13 10-13c7 0 9 7 9 13s-2 13-9 13Zm39 6c8 0 15-4 17-12l-8-1c-2 4-4 6-9 6-7 0-9-6-9-12s2-12 9-12c5 0 8 3 8 7l9-1c-2-8-9-13-17-13-11 0-18 9-18 19 0 11 7 19 18 19Zm30-14 4-4 10 17h10l-15-23 15-13h-11l-13 13V10h-9v50h9V47Zm39 14c8 0 16-3 16-12 0-8-8-10-15-11-2-1-7-1-7-5 0-3 3-4 6-4 4 0 7 3 7 7l8-1c-1-9-8-12-15-12s-15 3-15 11 9 10 15 11c3 1 8 2 8 5 0 4-4 5-7 5-5 0-8-3-9-7l-8 1c1 8 9 12 16 12ZM41 27H0l12 12v17l29-29ZM20 60h40L48 48V32L20 60Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </a>\n  );\n}\n"],"names":["React"],"mappings":";;;AAKO,SAAS,WAAY,CAAA,EAAE,SAAc,EAAA,GAAA,KAAA,EAA8B,EAAA;AACxE,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IACC,IAAK,EAAA,uBAAA;AAAA,IACL,MAAO,EAAA,QAAA;AAAA,IACP,GAAI,EAAA,qBAAA;AAAA,IACJ,SAAA,EAAW,UAAW,CAAA,yBAAA,EAA2B,SAAS,CAAA;AAAA,IACzD,GAAG,KAAA;AAAA,GAAA,kBAEHA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,KAAM,EAAA,4BAAA;AAAA,IACN,OAAQ,EAAA,YAAA;AAAA,IACR,YAAW,EAAA,sBAAA;AAAA,GAAA,kBAEVA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,QAAS,EAAA,SAAA;AAAA,IACT,QAAS,EAAA,SAAA;AAAA,IACT,CAAE,EAAA,y3BAAA;AAAA,IACF,IAAK,EAAA,cAAA;AAAA,GACP,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/internal/Avatar.js

@@ -0,0 +1,40 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var react = require('@liveblocks/react');
+var classNames = require('../../utils/class-names.js');
+var getInitials = require('../../utils/get-initials.js');
+
+function Avatar({ userId, className, ...props }) {
+  const { user, isLoading } = react.useUser(userId);
+  const resolvedUserName = React.useMemo(() => user?.name, [user]);
+  const resolvedUserAvatar = React.useMemo(() => user?.avatar, [user]);
+  const resolvedUserInitials = React.useMemo(
+    () => resolvedUserName ? getInitials.getInitials(resolvedUserName) : void 0,
+    [resolvedUserName]
+  );
+  const resolvedUserIdInitials = React.useMemo(
+    () => !isLoading && !user ? getInitials.getInitials(userId) : void 0,
+    [isLoading, user, userId]
+  );
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classNames.classNames("lb-avatar", className),
+    "data-loading": isLoading ? "" : void 0,
+    ...props
+  }, resolvedUserAvatar && /* @__PURE__ */ React.createElement("img", {
+    className: "lb-avatar-image",
+    src: resolvedUserAvatar,
+    alt: resolvedUserName
+  }), resolvedUserInitials ? /* @__PURE__ */ React.createElement("span", {
+    className: "lb-avatar-fallback",
+    "aria-hidden": true
+  }, resolvedUserInitials) : resolvedUserIdInitials ? /* @__PURE__ */ React.createElement("span", {
+    className: "lb-avatar-fallback",
+    "aria-label": userId,
+    title: userId
+  }, resolvedUserIdInitials) : null);
+}
+
+exports.Avatar = Avatar;
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/internal/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport React, { useMemo } from \"react\";\nimport { useUser } from \"@liveblocks/react\";\n\nimport { classNames } from \"../../utils/class-names\";\nimport { getInitials } from \"../../utils/get-initials\";\n\nexport interface AvatarProps extends ComponentProps<\"div\"> {\n  /**\n   * The user ID to display the avatar for.\n   */\n  userId: string;\n}\n\nexport function Avatar({ userId, className, ...props }: AvatarProps) {\n  const { user, isLoading } = useUser(userId);\n  const resolvedUserName = useMemo(() => user?.name, [user]);\n  const resolvedUserAvatar = useMemo(() => user?.avatar, [user]);\n  const resolvedUserInitials = useMemo(\n    () => (resolvedUserName ? getInitials(resolvedUserName) : undefined),\n    [resolvedUserName]\n  );\n  const resolvedUserIdInitials = useMemo(\n    () => (!isLoading && !user ? getInitials(userId) : undefined),\n    [isLoading, user, userId]\n  );\n\n  return (\n    <div\n      className={classNames(\"lb-avatar\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {resolvedUserAvatar && (\n        <img\n          className=\"lb-avatar-image\"\n          src={resolvedUserAvatar}\n          alt={resolvedUserName}\n        />\n      )}\n      {resolvedUserInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-hidden>\n          {resolvedUserInitials}\n        </span>\n      ) : resolvedUserIdInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-label={userId} title={userId}>\n          {resolvedUserIdInitials}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAgBO;AACL;AACA;AACA;AACA;AAA6B;AAC+B;AACzC;AAEnB;AAA+B;AACsB;AAC3B;AAG1B;AACG;AAC6C;AACb;AAC3B;AAGD;AACW;AACL;AACA;AAIN;AAAe;AAAgC;AAI/C;AAAe;AAAiC;AAAe;AAMxE;;"}

package/dist/components/internal/Avatar.mjs

@@ -0,0 +1,38 @@
+'use client';
+import React__default, { useMemo } from 'react';
+import { useUser } from '@liveblocks/react';
+import { classNames } from '../../utils/class-names.mjs';
+import { getInitials } from '../../utils/get-initials.mjs';
+
+function Avatar({ userId, className, ...props }) {
+  const { user, isLoading } = useUser(userId);
+  const resolvedUserName = useMemo(() => user?.name, [user]);
+  const resolvedUserAvatar = useMemo(() => user?.avatar, [user]);
+  const resolvedUserInitials = useMemo(
+    () => resolvedUserName ? getInitials(resolvedUserName) : void 0,
+    [resolvedUserName]
+  );
+  const resolvedUserIdInitials = useMemo(
+    () => !isLoading && !user ? getInitials(userId) : void 0,
+    [isLoading, user, userId]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", {
+    className: classNames("lb-avatar", className),
+    "data-loading": isLoading ? "" : void 0,
+    ...props
+  }, resolvedUserAvatar && /* @__PURE__ */ React__default.createElement("img", {
+    className: "lb-avatar-image",
+    src: resolvedUserAvatar,
+    alt: resolvedUserName
+  }), resolvedUserInitials ? /* @__PURE__ */ React__default.createElement("span", {
+    className: "lb-avatar-fallback",
+    "aria-hidden": true
+  }, resolvedUserInitials) : resolvedUserIdInitials ? /* @__PURE__ */ React__default.createElement("span", {
+    className: "lb-avatar-fallback",
+    "aria-label": userId,
+    title: userId
+  }, resolvedUserIdInitials) : null);
+}
+
+export { Avatar };
+//# sourceMappingURL=Avatar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.mjs","sources":["../../../src/components/internal/Avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport React, { useMemo } from \"react\";\nimport { useUser } from \"@liveblocks/react\";\n\nimport { classNames } from \"../../utils/class-names\";\nimport { getInitials } from \"../../utils/get-initials\";\n\nexport interface AvatarProps extends ComponentProps<\"div\"> {\n  /**\n   * The user ID to display the avatar for.\n   */\n  userId: string;\n}\n\nexport function Avatar({ userId, className, ...props }: AvatarProps) {\n  const { user, isLoading } = useUser(userId);\n  const resolvedUserName = useMemo(() => user?.name, [user]);\n  const resolvedUserAvatar = useMemo(() => user?.avatar, [user]);\n  const resolvedUserInitials = useMemo(\n    () => (resolvedUserName ? getInitials(resolvedUserName) : undefined),\n    [resolvedUserName]\n  );\n  const resolvedUserIdInitials = useMemo(\n    () => (!isLoading && !user ? getInitials(userId) : undefined),\n    [isLoading, user, userId]\n  );\n\n  return (\n    <div\n      className={classNames(\"lb-avatar\", className)}\n      data-loading={isLoading ? \"\" : undefined}\n      {...props}\n    >\n      {resolvedUserAvatar && (\n        <img\n          className=\"lb-avatar-image\"\n          src={resolvedUserAvatar}\n          alt={resolvedUserName}\n        />\n      )}\n      {resolvedUserInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-hidden>\n          {resolvedUserInitials}\n        </span>\n      ) : resolvedUserIdInitials ? (\n        <span className=\"lb-avatar-fallback\" aria-label={userId} title={userId}>\n          {resolvedUserIdInitials}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAgBO;AACL;AACA;AACA;AACA;AAA6B;AAC+B;AACzC;AAEnB;AAA+B;AACsB;AAC3B;AAG1B;AACG;AAC6C;AACb;AAC3B;AAGD;AACW;AACL;AACA;AAIN;AAAe;AAAgC;AAI/C;AAAe;AAAiC;AAAe;AAMxE;;"}

package/dist/components/internal/Button.js

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+var React = require('react');
+var classNames = require('../../utils/class-names.js');
+
+const Button = React.forwardRef(
+  ({ variant = "default", disableable = true, className, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ React.createElement("button", {
+      type: "button",
+      className: classNames.classNames(
+        "lb-button",
+        !disableable && "lb-button:non-disableable",
+        className
+      ),
+      "data-variant": variant,
+      ...props,
+      ref: forwardedRef
+    });
+  }
+);
+
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +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  disableable?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    { variant = \"default\", disableable = true, className, ...props },\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        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;AAYO;AAAe;AAKlB;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACV;AACC;AACP;AAGN;;"}

package/dist/components/internal/Button.mjs

@@ -0,0 +1,22 @@
+'use client';
+import React__default, { forwardRef } from 'react';
+import { classNames } from '../../utils/class-names.mjs';
+
+const Button = forwardRef(
+  ({ variant = "default", disableable = true, className, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ React__default.createElement("button", {
+      type: "button",
+      className: classNames(
+        "lb-button",
+        !disableable && "lb-button:non-disableable",
+        className
+      ),
+      "data-variant": variant,
+      ...props,
+      ref: forwardedRef
+    });
+  }
+);
+
+export { Button };
+//# sourceMappingURL=Button.mjs.map

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

@@ -0,0 +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  disableable?: boolean;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    { variant = \"default\", disableable = true, className, ...props },\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        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;AAYO;AAAe;AAKlB;AACG;AACM;AACM;AACT;AACgB;AAChB;AACF;AACc;AACV;AACC;AACP;AAGN;;"}

package/dist/components/internal/Dropdown.js

@@ -0,0 +1,72 @@
+'use client';
+'use strict';
+
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var React = require('react');
+var config = require('../../config.js');
+var constants = require('../../constants.js');
+var overrides = require('../../overrides.js');
+var classNames = require('../../utils/class-names.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
+
+function Dropdown({
+  children,
+  content,
+  defaultOpen,
+  open,
+  onOpenChange,
+  className,
+  ...props
+}) {
+  const $ = overrides.useOverrides();
+  const { portalContainer } = config.useLiveblocksUIConfig();
+  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive__namespace.Root, {
+    defaultOpen,
+    open,
+    onOpenChange,
+    dir: $.dir
+  }, children, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive__namespace.Portal, {
+    container: portalContainer
+  }, /* @__PURE__ */ React.createElement(DropdownMenuPrimitive__namespace.Content, {
+    className: classNames.classNames(
+      "lb-root lb-portal lb-elevation lb-dropdown",
+      className
+    ),
+    sideOffset: constants.FLOATING_ELEMENT_SIDE_OFFSET,
+    collisionPadding: constants.FLOATING_ELEMENT_COLLISION_PADDING,
+    ...props
+  }, content)));
+}
+const DropdownItem = React.forwardRef(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React.createElement(DropdownMenuPrimitive__namespace.DropdownMenuItem, {
+    className: classNames.classNames("lb-dropdown-item", className),
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+
+Object.defineProperty(exports, 'DropdownTrigger', {
+  enumerable: true,
+  get: function () { return DropdownMenuPrimitive.DropdownMenuTrigger; }
+});
+exports.Dropdown = Dropdown;
+exports.DropdownItem = DropdownItem;
+//# sourceMappingURL=Dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ReactNode } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface DropdownProps\n  extends Pick<\n      DropdownMenuPrimitive.DropdownMenuProps,\n      \"defaultOpen\" | \"open\" | \"onOpenChange\"\n    >,\n    Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n    Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n  content: ReactNode;\n}\n\nexport function Dropdown({\n  children,\n  content,\n  defaultOpen,\n  open,\n  onOpenChange,\n  className,\n  ...props\n}: DropdownProps) {\n  const $ = useOverrides();\n  const { portalContainer } = useLiveblocksUIConfig();\n\n  return (\n    <DropdownMenuPrimitive.Root\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={onOpenChange}\n      dir={$.dir}\n    >\n      {children}\n      <DropdownMenuPrimitive.Portal container={portalContainer}>\n        <DropdownMenuPrimitive.Content\n          className={classNames(\n            \"lb-root lb-portal lb-elevation lb-dropdown\",\n            className\n          )}\n          sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n          collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n          {...props}\n        >\n          {content}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  );\n}\n\nexport const DropdownItem = forwardRef<\n  HTMLDivElement,\n  DropdownMenuPrimitive.DropdownMenuItemProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <DropdownMenuPrimitive.DropdownMenuItem\n      className={classNames(\"lb-dropdown-item\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </DropdownMenuPrimitive.DropdownMenuItem>\n  );\n});\n\nexport { DropdownMenuTrigger as DropdownTrigger } from \"@radix-ui/react-dropdown-menu\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACG;AACC;AACA;AACA;AACO;AAGN;AAAwC;AACtC;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAOd;AAEa;AAIX;AACG;AACoD;AAC/C;AACC;AAKX;;;;;;;"}

package/dist/components/internal/Dropdown.mjs

@@ -0,0 +1,47 @@
+'use client';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export { DropdownMenuTrigger as DropdownTrigger } from '@radix-ui/react-dropdown-menu';
+import React__default, { forwardRef } from 'react';
+import { useLiveblocksUIConfig } from '../../config.mjs';
+import { FLOATING_ELEMENT_SIDE_OFFSET, FLOATING_ELEMENT_COLLISION_PADDING } from '../../constants.mjs';
+import { useOverrides } from '../../overrides.mjs';
+import { classNames } from '../../utils/class-names.mjs';
+
+function Dropdown({
+  children,
+  content,
+  defaultOpen,
+  open,
+  onOpenChange,
+  className,
+  ...props
+}) {
+  const $ = useOverrides();
+  const { portalContainer } = useLiveblocksUIConfig();
+  return /* @__PURE__ */ React__default.createElement(DropdownMenuPrimitive.Root, {
+    defaultOpen,
+    open,
+    onOpenChange,
+    dir: $.dir
+  }, children, /* @__PURE__ */ React__default.createElement(DropdownMenuPrimitive.Portal, {
+    container: portalContainer
+  }, /* @__PURE__ */ React__default.createElement(DropdownMenuPrimitive.Content, {
+    className: classNames(
+      "lb-root lb-portal lb-elevation lb-dropdown",
+      className
+    ),
+    sideOffset: FLOATING_ELEMENT_SIDE_OFFSET,
+    collisionPadding: FLOATING_ELEMENT_COLLISION_PADDING,
+    ...props
+  }, content)));
+}
+const DropdownItem = forwardRef(({ children, className, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React__default.createElement(DropdownMenuPrimitive.DropdownMenuItem, {
+    className: classNames("lb-dropdown-item", className),
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+
+export { Dropdown, DropdownItem };
+//# sourceMappingURL=Dropdown.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.mjs","sources":["../../../src/components/internal/Dropdown.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ReactNode } from \"react\";\nimport React, { forwardRef } from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../../config\";\nimport {\n  FLOATING_ELEMENT_COLLISION_PADDING,\n  FLOATING_ELEMENT_SIDE_OFFSET,\n} from \"../../constants\";\nimport { useOverrides } from \"../../overrides\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport interface DropdownProps\n  extends Pick<\n      DropdownMenuPrimitive.DropdownMenuProps,\n      \"defaultOpen\" | \"open\" | \"onOpenChange\"\n    >,\n    Pick<DropdownMenuPrimitive.DropdownMenuTriggerProps, \"children\">,\n    Omit<DropdownMenuPrimitive.DropdownMenuContentProps, \"content\"> {\n  content: ReactNode;\n}\n\nexport function Dropdown({\n  children,\n  content,\n  defaultOpen,\n  open,\n  onOpenChange,\n  className,\n  ...props\n}: DropdownProps) {\n  const $ = useOverrides();\n  const { portalContainer } = useLiveblocksUIConfig();\n\n  return (\n    <DropdownMenuPrimitive.Root\n      defaultOpen={defaultOpen}\n      open={open}\n      onOpenChange={onOpenChange}\n      dir={$.dir}\n    >\n      {children}\n      <DropdownMenuPrimitive.Portal container={portalContainer}>\n        <DropdownMenuPrimitive.Content\n          className={classNames(\n            \"lb-root lb-portal lb-elevation lb-dropdown\",\n            className\n          )}\n          sideOffset={FLOATING_ELEMENT_SIDE_OFFSET}\n          collisionPadding={FLOATING_ELEMENT_COLLISION_PADDING}\n          {...props}\n        >\n          {content}\n        </DropdownMenuPrimitive.Content>\n      </DropdownMenuPrimitive.Portal>\n    </DropdownMenuPrimitive.Root>\n  );\n}\n\nexport const DropdownItem = forwardRef<\n  HTMLDivElement,\n  DropdownMenuPrimitive.DropdownMenuItemProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <DropdownMenuPrimitive.DropdownMenuItem\n      className={classNames(\"lb-dropdown-item\", className)}\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </DropdownMenuPrimitive.DropdownMenuItem>\n  );\n});\n\nexport { DropdownMenuTrigger as DropdownTrigger } from \"@radix-ui/react-dropdown-menu\";\n"],"names":[],"mappings":";;;;;;;;;AAwBO;AAAkB;AACvB;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AAEA;AACG;AACC;AACA;AACA;AACO;AAGN;AAAwC;AACtC;AACY;AACT;AACA;AACF;AACY;AACM;AACd;AAOd;AAEa;AAIX;AACG;AACoD;AAC/C;AACC;AAKX;;"}

package/dist/components/internal/Emoji.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var Emoji$1 = require('../../primitives/internal/Emoji.js');
+var classNames = require('../../utils/class-names.js');
+
+const Emoji = React.forwardRef(
+  ({ className, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ React.createElement(Emoji$1.Emoji, {
+      className: classNames.classNames("lb-emoji", className),
+      ...props,
+      ref: forwardedRef
+    });
+  }
+);
+
+exports.Emoji = Emoji;
+//# sourceMappingURL=Emoji.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.js","sources":["../../../src/components/internal/Emoji.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\n\nimport type { EmojiProps as EmojiPrimitiveProps } from \"../../primitives/internal/Emoji\";\nimport { Emoji as EmojiPrimitive } from \"../../primitives/internal/Emoji\";\nimport { classNames } from \"../../utils/class-names\";\n\nexport const Emoji = forwardRef<HTMLSpanElement, EmojiPrimitiveProps>(\n  ({ className, ...props }, forwardedRef) => {\n    return (\n      <EmojiPrimitive\n        className={classNames(\"lb-emoji\", className)}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","EmojiPrimitive","classNames"],"mappings":";;;;;;AAMO,MAAM,KAAQ,GAAAA,gBAAA;AAAA,EACnB,CAAC,EAAE,SAAc,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACzC,IAAA,uBACG,KAAA,CAAA,aAAA,CAAAC,aAAA,EAAA;AAAA,MACC,SAAA,EAAWC,qBAAW,CAAA,UAAA,EAAY,SAAS,CAAA;AAAA,MAC1C,GAAG,KAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,KACP,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist/components/internal/Emoji.mjs

@@ -0,0 +1,16 @@
+import React__default, { forwardRef } from 'react';
+import { Emoji as Emoji$1 } from '../../primitives/internal/Emoji.mjs';
+import { classNames } from '../../utils/class-names.mjs';
+
+const Emoji = forwardRef(
+  ({ className, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ React__default.createElement(Emoji$1, {
+      className: classNames("lb-emoji", className),
+      ...props,
+      ref: forwardedRef
+    });
+  }
+);
+
+export { Emoji };
+//# sourceMappingURL=Emoji.mjs.map