@liveblocks/react-ui 3.15.0-feeds2 → 3.15.0-rc1

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { ComponentType, ComponentPropsWithoutRef, ElementType, ReactNode, ComponentProps, FormEvent, RefAttributes, MouseEvent, PropsWithChildren } from 'react';
-import { CommentAttachment, AiReasoningPart, AiRetrievalPart, Relax, WithNavigation, AiAssistantMessage, CopilotId, AiKnowledgeSource, AiOpaqueToolDefinition, AiToolTypePack, JsonObject, AiToolExecuteCallback, NoInfr, CommentBody, MentionData, BaseMetadata, DTM, DCM, Patchable, CommentData, HistoryVersion, InboxNotificationData, InboxNotificationThreadData, InboxNotificationTextMentionData, InboxNotificationCustomData, KDAD, ThreadData } from '@liveblocks/core';
+import { CommentAttachment, AiReasoningPart, AiRetrievalPart, Relax, WithNavigation, AiAssistantMessage, CopilotId, AiKnowledgeSource, AiOpaqueToolDefinition, AiToolTypePack, JsonObject, AiToolExecuteCallback, NoInfr, CommentBody, MentionData, BaseMetadata, DTM, DCM, Patchable, CommentData, ThreadData, HistoryVersion, InboxNotificationData, InboxNotificationThreadData, InboxNotificationTextMentionData, InboxNotificationCustomData, KDAD } from '@liveblocks/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Popover } from 'radix-ui';
 
 interface GlobalComponents {
     Anchor: ComponentType<ComponentPropsWithoutRef<"a">> | "a";
@@ -809,6 +810,30 @@ declare const AiTool: react.ForwardRefExoticComponent<Omit<AiToolProps, "ref"> &
     Confirmation: typeof AiToolConfirmation;
 };
 
+interface AvatarStackProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * Optional additional user IDs to include in the stack.
+     */
+    userIds?: string[];
+    /**
+     * The maximum number of visible avatars.
+     * Defaults to 3, set to `undefined` to show all avatars.
+     */
+    max?: number;
+    /**
+     * The size of the avatars.
+     */
+    size?: string | number;
+    /**
+     * Override the component's strings.
+     */
+    overrides?: Partial<GlobalOverrides>;
+}
+/**
+ * Displays a stack of avatars for the users currently present in the room.
+ */
+declare const AvatarStack: react.ForwardRefExoticComponent<AvatarStackProps & react.RefAttributes<HTMLDivElement>>;
+
 interface ComposerEditorMentionProps {
     /**
      * Whether the mention is selected.
@@ -1031,11 +1056,27 @@ type ComposerProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>
  */
 declare const Composer: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: ComposerProps<TM, CM> & RefAttributes<HTMLFormElement>) => JSX.Element;
 
-interface CommentProps extends ComponentPropsWithoutRef<"div"> {
+interface CommentProps<CM extends BaseMetadata = DCM> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     /**
      * The comment to display.
      */
-    comment: CommentData;
+    comment: CommentData<CM>;
+    /**
+     * The comment's avatar.
+     * Can be combined with `Comment.Avatar` to easily follow default styles.
+     */
+    avatar?: ReactNode;
+    /**
+     * The comment's author.
+     * Can be combined with `Comment.Author` to easily follow default styles.
+     */
+    author?: ReactNode;
+    /**
+     * The comment's date.
+     * Can be combined with `Comment.Date` to easily follow default styles,
+     * or the `Timestamp` primitive for more control.
+     */
+    date?: ReactNode;
     /**
      * How to show or hide the actions.
      */
@@ -1060,6 +1101,10 @@ interface CommentProps extends ComponentPropsWithoutRef<"div"> {
      * Whether to indent the comment's content.
      */
     indentContent?: boolean;
+    /**
+     * Additional content to display below the comment's body.
+     */
+    additionalContent?: ReactNode;
     /**
      * The event handler called when the comment is edited.
      */
@@ -1084,7 +1129,13 @@ interface CommentProps extends ComponentPropsWithoutRef<"div"> {
      * Add (or change) items to display in the comment's dropdown.
      */
     dropdownItems?: ReactNode | ((props: PropsWithChildren<{
-        comment: CommentData;
+        comment: CommentData<CM>;
+    }>) => ReactNode);
+    /**
+     * Override the comment's content.
+     */
+    children?: ReactNode | ((props: PropsWithChildren<{
+        comment: CommentData<CM>;
     }>) => ReactNode);
     /**
      * Override the component's strings.
@@ -1095,6 +1146,31 @@ interface CommentProps extends ComponentPropsWithoutRef<"div"> {
      */
     components?: Partial<GlobalComponents>;
 }
+interface CommentAvatarProps extends Omit<ComponentProps<"div">, "children"> {
+    /**
+     * The user ID to display the avatar for.
+     */
+    userId: string;
+}
+interface CommentAuthorProps extends Omit<ComponentProps<"span">, "children"> {
+    /**
+     * The user ID to display the author for.
+     */
+    userId: string;
+}
+interface CommentDateProps extends Omit<ComponentProps<"span">, "children"> {
+    /**
+     * The date to display.
+     */
+    date: Date | string | number;
+    /**
+     * The locale used when formatting the date.
+     */
+    locale?: string;
+}
+declare function CommentAvatar(props: CommentAvatarProps): react_jsx_runtime.JSX.Element;
+declare function CommentAuthor(props: CommentAuthorProps): react_jsx_runtime.JSX.Element;
+declare function CommentDate({ locale, date, className, ...props }: CommentDateProps): react_jsx_runtime.JSX.Element;
 interface CommentDropdownItemProps extends Omit<ComponentPropsWithoutRef<"div">, "onSelect"> {
     /**
      * An optional icon displayed in this dropdown item.
@@ -1115,13 +1191,228 @@ interface CommentDropdownItemProps extends Omit<ComponentPropsWithoutRef<"div">,
  *   ))}
  * </>
  */
-declare const Comment: react.ForwardRefExoticComponent<CommentProps & react.RefAttributes<HTMLDivElement>> & {
+declare const Comment: (<CM extends BaseMetadata = BaseMetadata>(props: CommentProps<CM> & RefAttributes<HTMLDivElement>) => JSX.Element) & {
     /**
      * Displays a dropdown item in the comment's dropdown.
      */
-    DropdownItem: react.ForwardRefExoticComponent<CommentDropdownItemProps & react.RefAttributes<HTMLDivElement>>;
+    DropdownItem: react.ForwardRefExoticComponent<CommentDropdownItemProps & RefAttributes<HTMLDivElement>>;
+    /**
+     * Displays a comment's avatar.
+     */
+    Avatar: typeof CommentAvatar;
+    /**
+     * Displays a comment's author.
+     */
+    Author: typeof CommentAuthor;
+    /**
+     * Displays a comment's date.
+     */
+    Date: typeof CommentDate;
 };
 
+interface CommentPinProps extends ComponentPropsWithoutRef<"button"> {
+    /**
+     * The corner that points to the comment position.
+     * Defaults to the bottom left corner.
+     */
+    corner?: "top-left" | "top-right" | "bottom-right" | "bottom-left";
+    /**
+     * The user ID to optionally display an avatar for.
+     */
+    userId?: string;
+    /**
+     * The size of the pin.
+     */
+    size?: string | number;
+}
+/**
+ * Displays a comment pin that can be used as a trigger
+ * for `FloatingComposer` and `FloatingThread`.
+ */
+declare const CommentPin: react.ForwardRefExoticComponent<CommentPinProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface CursorProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * A floating label to display next to the cursor.
+     */
+    label?: ReactNode;
+    /**
+     * The color of the cursor.
+     */
+    color?: string;
+}
+/**
+ * Displays a multiplayer cursor.
+ */
+declare const Cursor: react.ForwardRefExoticComponent<CursorProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CursorsProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The key used to store the cursors in users' Presence.
+     * This can be used to have multiple `Cursors` in a single room.
+     */
+    presenceKey?: string;
+}
+/**
+ * Displays multiplayer cursors.
+ */
+declare const Cursors: react.ForwardRefExoticComponent<CursorsProps & react.RefAttributes<HTMLDivElement>>;
+
+interface FloatingComposerProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends Omit<ComposerProps<TM, CM>, "collapsed" | "onCollapsedChange" | "defaultCollapsed">, Relax<Pick<Popover.PopoverProps, "defaultOpen" | "open" | "onOpenChange"> & Pick<Popover.PopoverContentProps, "side" | "sideOffset" | "align" | "alignOffset">> {
+    /**
+     * The element which opens the floating composer.
+     */
+    children: ReactNode;
+}
+/**
+ * Displays a floating composer attached to a trigger element.
+ */
+declare const FloatingComposer: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: FloatingComposerProps<TM, CM> & RefAttributes<HTMLFormElement>) => JSX.Element;
+
+interface ThreadComponents<_TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> {
+    /**
+     * The component used to display comments.
+     */
+    Comment: ComponentType<CommentProps<CM>>;
+}
+interface ThreadProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The thread to display.
+     */
+    thread: ThreadData<TM, CM>;
+    /**
+     * How to show or hide the composer to reply to the thread.
+     */
+    showComposer?: boolean | "collapsed";
+    /**
+     * Whether to show the action to resolve the thread.
+     */
+    showResolveAction?: boolean;
+    /**
+     * How to show or hide the actions.
+     */
+    showActions?: CommentProps["showActions"];
+    /**
+     * Whether to show reactions.
+     */
+    showReactions?: CommentProps["showReactions"];
+    /**
+     * Whether to show the composer's formatting controls.
+     */
+    showComposerFormattingControls?: ComposerProps["showFormattingControls"];
+    /**
+     * Add (or change) items to display in a comment's dropdown.
+     */
+    commentDropdownItems?: ReactNode | ((props: PropsWithChildren<{
+        comment: CommentData<CM>;
+    }>) => ReactNode);
+    /**
+     * The maximum number of comments to show.
+     *
+     * The first and last comments are always shown and by default if some comments
+     * are hidden, only the first comment will be shown before the "show more" button
+     * and after it will be shown all the newest comments to fit the limit set.
+     *
+     * It's possible to customize this by setting `maxVisibleComments` to an object:
+     *
+     * @example
+     * // Only show the last comment, and all the older ones to fit the limit.
+     * <Thread maxVisibleComments={{ max: 5, show: "oldest" }} />
+     *
+     * @example
+     * // Show as many old comments as new ones to fit the limit.
+     * <Thread maxVisibleComments={{ max: 5, show: "both" }} />
+     */
+    maxVisibleComments?: number | {
+        max: number;
+        show: "oldest" | "both" | "newest";
+    };
+    /**
+     * Whether to blur the composer editor when the composer is submitted.
+     */
+    blurComposerOnSubmit?: ComposerProps["blurOnSubmit"];
+    /**
+     * Whether to indent the comments' content.
+     */
+    indentCommentContent?: CommentProps["indentContent"];
+    /**
+     * Whether to show deleted comments.
+     */
+    showDeletedComments?: CommentProps["showDeleted"];
+    /**
+     * Whether to show attachments.
+     */
+    showAttachments?: boolean;
+    /**
+     * The event handler called when changing the resolved status.
+     */
+    onResolvedChange?: (resolved: boolean) => void;
+    /**
+     * The event handler called when a comment is edited.
+     */
+    onCommentEdit?: CommentProps["onCommentEdit"];
+    /**
+     * The event handler called when a comment is deleted.
+     */
+    onCommentDelete?: CommentProps["onCommentDelete"];
+    /**
+     * The event handler called when the thread is deleted.
+     * A thread is deleted when all its comments are deleted.
+     */
+    onThreadDelete?: (thread: ThreadData<TM, CM>) => void;
+    /**
+     * The event handler called when clicking on a comment's author.
+     */
+    onAuthorClick?: CommentProps["onAuthorClick"];
+    /**
+     * The event handler called when clicking on a mention.
+     */
+    onMentionClick?: CommentProps["onMentionClick"];
+    /**
+     * The event handler called when clicking on a comment's attachment.
+     */
+    onAttachmentClick?: CommentProps["onAttachmentClick"];
+    /**
+     * The event handler called when the composer is submitted.
+     */
+    onComposerSubmit?: ComposerProps["onComposerSubmit"];
+    /**
+     * Whether to focus the composer on mount.
+     */
+    autoFocus?: ComposerProps["autoFocus"];
+    /**
+     * Override the component's strings.
+     */
+    overrides?: Partial<GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
+    /**
+     * Override the component's components.
+     */
+    components?: Partial<GlobalComponents & ThreadComponents<TM, CM>>;
+}
+/**
+ * Displays a thread of comments, with a composer to reply
+ * to it.
+ *
+ * @example
+ * <>
+ *   {threads.map((thread) => (
+ *     <Thread key={thread.id} thread={thread} />
+ *   ))}
+ * </>
+ */
+declare const Thread: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: ThreadProps<TM, CM> & RefAttributes<HTMLDivElement>) => JSX.Element;
+
+interface FloatingThreadProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends ThreadProps<TM, CM>, Relax<Pick<Popover.PopoverProps, "defaultOpen" | "open" | "onOpenChange"> & Pick<Popover.PopoverContentProps, "side" | "sideOffset" | "align" | "alignOffset">> {
+    /**
+     * The element which opens the floating thread.
+     */
+    children: ReactNode;
+}
+/**
+ * Displays a floating thread attached to a trigger element.
+ */
+declare const FloatingThread: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: FloatingThreadProps<TM, CM> & RefAttributes<HTMLDivElement>) => JSX.Element;
+
 interface HistoryVersionSummaryProps extends ComponentPropsWithoutRef<"button"> {
     version: HistoryVersion;
     selected?: boolean;
@@ -1317,129 +1608,6 @@ interface InboxNotificationListProps extends ComponentPropsWithoutRef<"ol"> {
  */
 declare const InboxNotificationList: react.ForwardRefExoticComponent<InboxNotificationListProps & react.RefAttributes<HTMLOListElement>>;
 
-interface ThreadProps<TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM> extends ComponentPropsWithoutRef<"div"> {
-    /**
-     * The thread to display.
-     */
-    thread: ThreadData<TM, CM>;
-    /**
-     * How to show or hide the composer to reply to the thread.
-     */
-    showComposer?: boolean | "collapsed";
-    /**
-     * Whether to show the action to resolve the thread.
-     */
-    showResolveAction?: boolean;
-    /**
-     * How to show or hide the actions.
-     */
-    showActions?: CommentProps["showActions"];
-    /**
-     * Whether to show reactions.
-     */
-    showReactions?: CommentProps["showReactions"];
-    /**
-     * Whether to show the composer's formatting controls.
-     */
-    showComposerFormattingControls?: ComposerProps["showFormattingControls"];
-    /**
-     * Add (or change) items to display in a comment's dropdown.
-     */
-    commentDropdownItems?: ReactNode | ((props: PropsWithChildren<{
-        comment: CommentData;
-    }>) => ReactNode);
-    /**
-     * The maximum number of comments to show.
-     *
-     * The first and last comments are always shown and by default if some comments
-     * are hidden, only the first comment will be shown before the "show more" button
-     * and after it will be shown all the newest comments to fit the limit set.
-     *
-     * It's possible to customize this by setting `maxVisibleComments` to an object:
-     *
-     * @example
-     * // Only show the last comment, and all the older ones to fit the limit.
-     * <Thread maxVisibleComments={{ max: 5, show: "oldest" }} />
-     *
-     * @example
-     * // Show as many old comments as new ones to fit the limit.
-     * <Thread maxVisibleComments={{ max: 5, show: "both" }} />
-     */
-    maxVisibleComments?: number | {
-        max: number;
-        show: "oldest" | "both" | "newest";
-    };
-    /**
-     * Whether to blur the composer editor when the composer is submitted.
-     */
-    blurComposerOnSubmit?: ComposerProps["blurOnSubmit"];
-    /**
-     * Whether to indent the comments' content.
-     */
-    indentCommentContent?: CommentProps["indentContent"];
-    /**
-     * Whether to show deleted comments.
-     */
-    showDeletedComments?: CommentProps["showDeleted"];
-    /**
-     * Whether to show attachments.
-     */
-    showAttachments?: boolean;
-    /**
-     * The event handler called when changing the resolved status.
-     */
-    onResolvedChange?: (resolved: boolean) => void;
-    /**
-     * The event handler called when a comment is edited.
-     */
-    onCommentEdit?: CommentProps["onCommentEdit"];
-    /**
-     * The event handler called when a comment is deleted.
-     */
-    onCommentDelete?: CommentProps["onCommentDelete"];
-    /**
-     * The event handler called when the thread is deleted.
-     * A thread is deleted when all its comments are deleted.
-     */
-    onThreadDelete?: (thread: ThreadData<TM, CM>) => void;
-    /**
-     * The event handler called when clicking on a comment's author.
-     */
-    onAuthorClick?: CommentProps["onAuthorClick"];
-    /**
-     * The event handler called when clicking on a mention.
-     */
-    onMentionClick?: CommentProps["onMentionClick"];
-    /**
-     * The event handler called when clicking on a comment's attachment.
-     */
-    onAttachmentClick?: CommentProps["onAttachmentClick"];
-    /**
-     * The event handler called when the composer is submitted.
-     */
-    onComposerSubmit?: ComposerProps["onComposerSubmit"];
-    /**
-     * Override the component's strings.
-     */
-    overrides?: Partial<GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
-    /**
-     * Override the component's components.
-     */
-    components?: Partial<GlobalComponents>;
-}
-/**
- * Displays a thread of comments, with a composer to reply
- * to it.
- *
- * @example
- * <>
- *   {threads.map((thread) => (
- *     <Thread key={thread.id} thread={thread} />
- *   ))}
- * </>
- */
-declare const Thread: <TM extends BaseMetadata = DTM, CM extends BaseMetadata = DCM>(props: ThreadProps<TM, CM> & RefAttributes<HTMLDivElement>) => JSX.Element;
-
 type LiveblocksUiConfigProps = PropsWithChildren<{
     /**
      * Override the components' strings.
@@ -1639,4 +1807,4 @@ declare namespace icon {
   };
 }
 
-export { AiChat, AiChatComponents, AiChatComponentsEmptyProps, AiChatComponentsLoadingProps, AiChatProps, AiComposerSubmitMessage, AiTool, AiToolIconProps, AiToolProps, Comment, CommentAttachmentArgs, CommentDropdownItemProps, CommentOverrides, CommentProps, Composer, ComposerBodyMark, ComposerBodyMarks, ComposerOverrides, ComposerProps, ComposerSubmitComment, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, icon as Icon, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationInspectorProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUiConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, useOverrides };
+export { AiChat, AiChatComponents, AiChatComponentsEmptyProps, AiChatComponentsLoadingProps, AiChatProps, AiComposerSubmitMessage, AiTool, AiToolIconProps, AiToolProps, AvatarStack, AvatarStackProps, Comment, CommentAttachmentArgs, CommentAuthorProps, CommentAvatarProps, CommentDateProps, CommentDropdownItemProps, CommentOverrides, CommentPin, CommentPinProps, CommentProps, Composer, ComposerBodyMark, ComposerBodyMarks, ComposerOverrides, ComposerProps, ComposerSubmitComment, Cursor, CursorProps, Cursors, CursorsProps, FloatingComposer, FloatingComposerProps, FloatingThread, FloatingThreadProps, GlobalOverrides, HistoryVersionSummary, HistoryVersionSummaryList, HistoryVersionSummaryListProps, HistoryVersionSummaryProps, icon as Icon, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomKindProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationInspectorProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationOverrides, InboxNotificationProps, InboxNotificationTextMentionKindProps, InboxNotificationTextMentionProps, InboxNotificationThreadKindProps, InboxNotificationThreadProps, LiveblocksUiConfig, LocalizationOverrides, Overrides, Thread, ThreadOverrides, ThreadProps, useOverrides };

package/dist/index.js

@@ -2,8 +2,14 @@ import { detectDupes } from '@liveblocks/core';
 import { PKG_NAME, PKG_VERSION, PKG_FORMAT } from './version.js';
 export { AiChat } from './components/AiChat.js';
 export { AiTool } from './components/AiTool.js';
+export { AvatarStack } from './components/AvatarStack.js';
 export { Comment } from './components/Comment.js';
+export { CommentPin } from './components/CommentPin.js';
 export { Composer } from './components/Composer.js';
+export { Cursor } from './components/Cursor.js';
+export { Cursors } from './components/Cursors.js';
+export { FloatingComposer } from './components/FloatingComposer.js';
+export { FloatingThread } from './components/FloatingThread.js';
 export { HistoryVersionSummary } from './components/HistoryVersionSummary.js';
 export { HistoryVersionSummaryList } from './components/HistoryVersionSummaryList.js';
 export { InboxNotification } from './components/InboxNotification.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type {\n  AiChatComponents,\n  AiChatComponentsEmptyProps,\n  AiChatComponentsLoadingProps,\n  AiChatProps,\n} from \"./components/AiChat\";\nexport { AiChat } from \"./components/AiChat\";\nexport type { AiToolIconProps, AiToolProps } from \"./components/AiTool\";\nexport { AiTool } from \"./components/AiTool\";\nexport type {\n  CommentDropdownItemProps,\n  CommentProps,\n} from \"./components/Comment\";\nexport { Comment } from \"./components/Comment\";\nexport type { ComposerProps } from \"./components/Composer\";\nexport { Composer } from \"./components/Composer\";\nexport type { HistoryVersionSummaryProps } from \"./components/HistoryVersionSummary\";\nexport { HistoryVersionSummary } from \"./components/HistoryVersionSummary\";\nexport type { HistoryVersionSummaryListProps } from \"./components/HistoryVersionSummaryList\";\nexport { HistoryVersionSummaryList } from \"./components/HistoryVersionSummaryList\";\nexport type {\n  InboxNotificationAvatarProps,\n  InboxNotificationCustomKindProps,\n  InboxNotificationCustomProps,\n  InboxNotificationIconProps,\n  InboxNotificationInspectorProps,\n  InboxNotificationProps,\n  InboxNotificationTextMentionKindProps,\n  InboxNotificationTextMentionProps,\n  InboxNotificationThreadKindProps,\n  InboxNotificationThreadProps,\n} from \"./components/InboxNotification\";\nexport { InboxNotification } from \"./components/InboxNotification\";\nexport type { InboxNotificationListProps } from \"./components/InboxNotificationList\";\nexport { InboxNotificationList } from \"./components/InboxNotificationList\";\nexport type { ThreadProps } from \"./components/Thread\";\nexport { Thread } from \"./components/Thread\";\nexport { LiveblocksUiConfig } from \"./config\";\nexport * as Icon from \"./icon\";\nexport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  InboxNotificationOverrides,\n  LocalizationOverrides,\n  Overrides,\n  ThreadOverrides,\n} from \"./overrides\";\nexport { useOverrides } from \"./overrides\";\nexport type {\n  AiComposerSubmitMessage,\n  ComposerSubmitComment,\n} from \"./primitives\";\nexport type {\n  CommentAttachmentArgs,\n  ComposerBodyMark,\n  ComposerBodyMarks,\n} from \"./types\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { detectDupes } from \"@liveblocks/core\";\n\nimport { PKG_FORMAT, PKG_NAME, PKG_VERSION } from \"./version\";\n\ndetectDupes(PKG_NAME, PKG_VERSION, PKG_FORMAT);\n\nexport type {\n  AiChatComponents,\n  AiChatComponentsEmptyProps,\n  AiChatComponentsLoadingProps,\n  AiChatProps,\n} from \"./components/AiChat\";\nexport { AiChat } from \"./components/AiChat\";\nexport type { AiToolIconProps, AiToolProps } from \"./components/AiTool\";\nexport { AiTool } from \"./components/AiTool\";\nexport type { AvatarStackProps } from \"./components/AvatarStack\";\nexport { AvatarStack } from \"./components/AvatarStack\";\nexport type {\n  CommentAuthorProps,\n  CommentAvatarProps,\n  CommentDateProps,\n  CommentDropdownItemProps,\n  CommentProps,\n} from \"./components/Comment\";\nexport { Comment } from \"./components/Comment\";\nexport type { CommentPinProps } from \"./components/CommentPin\";\nexport { CommentPin } from \"./components/CommentPin\";\nexport type { ComposerProps } from \"./components/Composer\";\nexport { Composer } from \"./components/Composer\";\nexport type { CursorProps } from \"./components/Cursor\";\nexport { Cursor } from \"./components/Cursor\";\nexport type { CursorsProps } from \"./components/Cursors\";\nexport { Cursors } from \"./components/Cursors\";\nexport type { FloatingComposerProps } from \"./components/FloatingComposer\";\nexport { FloatingComposer } from \"./components/FloatingComposer\";\nexport type { FloatingThreadProps } from \"./components/FloatingThread\";\nexport { FloatingThread } from \"./components/FloatingThread\";\nexport type { HistoryVersionSummaryProps } from \"./components/HistoryVersionSummary\";\nexport { HistoryVersionSummary } from \"./components/HistoryVersionSummary\";\nexport type { HistoryVersionSummaryListProps } from \"./components/HistoryVersionSummaryList\";\nexport { HistoryVersionSummaryList } from \"./components/HistoryVersionSummaryList\";\nexport type {\n  InboxNotificationAvatarProps,\n  InboxNotificationCustomKindProps,\n  InboxNotificationCustomProps,\n  InboxNotificationIconProps,\n  InboxNotificationInspectorProps,\n  InboxNotificationProps,\n  InboxNotificationTextMentionKindProps,\n  InboxNotificationTextMentionProps,\n  InboxNotificationThreadKindProps,\n  InboxNotificationThreadProps,\n} from \"./components/InboxNotification\";\nexport { InboxNotification } from \"./components/InboxNotification\";\nexport type { InboxNotificationListProps } from \"./components/InboxNotificationList\";\nexport { InboxNotificationList } from \"./components/InboxNotificationList\";\nexport type { ThreadProps } from \"./components/Thread\";\nexport { Thread } from \"./components/Thread\";\nexport { LiveblocksUiConfig } from \"./config\";\nexport * as Icon from \"./icon\";\nexport type {\n  CommentOverrides,\n  ComposerOverrides,\n  GlobalOverrides,\n  InboxNotificationOverrides,\n  LocalizationOverrides,\n  Overrides,\n  ThreadOverrides,\n} from \"./overrides\";\nexport { useOverrides } from \"./overrides\";\nexport type {\n  AiComposerSubmitMessage,\n  ComposerSubmitComment,\n} from \"./primitives\";\nexport type {\n  CommentAttachmentArgs,\n  ComposerBodyMark,\n  ComposerBodyMarks,\n} from \"./types\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAIA,WAAY,CAAA,QAAA,EAAU,aAAa,UAAU,CAAA"}

package/dist/primitives/AiComposer/index.cjs

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
 var react$1 = require('@liveblocks/react');
 var _private = require('@liveblocks/react/_private');
-var reactSlot = require('@radix-ui/react-slot');
+var radixUi = require('radix-ui');
 var react = require('react');
 var slate = require('slate');
 var slateHistory = require('slate-history');
@@ -43,7 +43,7 @@ const AiComposerForm = react.forwardRef(
     asChild,
     ...props
   }, forwardedRef) => {
-    const Component = asChild ? reactSlot.Slot : "form";
+    const Component = asChild ? radixUi.Slot.Slot : "form";
     const client = react$1.useClient();
     const formRef = react.useRef(null);
     const editor = useInitial.useInitial(
@@ -302,6 +302,7 @@ const AiComposerEditor = react.forwardRef(
           slateReact.Editable,
           {
             dir,
+            tabIndex: isDisabled ? -1 : 0,
             enterKeyHint: "send",
             autoCapitalize: "sentences",
             "aria-label": "Composer editor",
@@ -321,7 +322,7 @@ const AiComposerEditor = react.forwardRef(
   }
 );
 const AiComposerSubmit = react.forwardRef(({ disabled, asChild, ...props }, forwardedRef) => {
-  const Component = asChild ? reactSlot.Slot : "button";
+  const Component = asChild ? radixUi.Slot.Slot : "button";
   const { isDisabled: isComposerDisabled, canSubmit } = contexts.useAiComposer();
   const isDisabled = isComposerDisabled || disabled || !canSubmit;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -335,7 +336,7 @@ const AiComposerSubmit = react.forwardRef(({ disabled, asChild, ...props }, forw
   );
 });
 const AiComposerAbort = react.forwardRef(({ disabled, onClick, asChild, ...props }, forwardedRef) => {
-  const Component = asChild ? reactSlot.Slot : "button";
+  const Component = asChild ? radixUi.Slot.Slot : "button";
   const { isDisabled: isComposerDisabled, canAbort, abort } = contexts.useAiComposer();
   const isDisabled = isComposerDisabled || disabled || !canAbort;
   const handleClick = react.useCallback(