@liveblocks/react-ui 2.15.0-debug1 → 2.15.1

package/dist/components/Composer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.js","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DM,\n} from \"@liveblocks/core\";\nimport { Permission } from \"@liveblocks/core\";\nimport {\n  useCreateRoomComment,\n  useCreateRoomThread,\n  useEditRoomComment,\n  useResolveMentionSuggestions,\n  useRoomOrNull,\n  useRoomPermissions,\n} from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../config\";\nimport { FLOATING_ELEMENT_SIDE_OFFSET } from \"../constants\";\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { BoldIcon } from \"../icons/Bold\";\nimport { CodeIcon } from \"../icons/Code\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { ItalicIcon } from \"../icons/Italic\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport { StrikethroughIcon } from \"../icons/Strikethrough\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerMarkToggleProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport type { ComposerBodyMark } from \"../types\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ninterface MarkToggleProps extends ComposerMarkToggleProps {\n  shortcut?: ReactNode;\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether to show formatting controls (e.g. a floating toolbar with formatting toggles when selecting text)\n     */\n    showFormattingControls?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n\n    /**\n     * @internal\n     */\n    roomId?: string;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showFormattingControls\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onPointerDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onPointerDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={classNames(\"lb-composer-editor-action\", className)}\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          {...props}\n        >\n          <AttachmentIcon className=\"lb-button-icon\" />\n        </Button>\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction MarkToggle({ mark, shortcut, children, ...props }: MarkToggleProps) {\n  const $ = useOverrides();\n  const label = useMemo(() => {\n    return $.COMPOSER_TOGGLE_MARK(mark);\n  }, [$, mark]);\n\n  return (\n    <ShortcutTooltip\n      content={label}\n      shortcut={shortcut}\n      sideOffset={FLOATING_ELEMENT_SIDE_OFFSET + 2}\n    >\n      <ComposerPrimitive.MarkToggle mark={mark} asChild {...props}>\n        <Button aria-label={label} variant=\"toggle\">\n          {children}\n        </Button>\n      </ComposerPrimitive.MarkToggle>\n    </ShortcutTooltip>\n  );\n}\n\ntype MarkToggles = {\n  [K in ComposerBodyMark]: ComponentType<PropsWithChildren>;\n};\n\nconst markToggles: MarkToggles = {\n  bold: () => (\n    <MarkToggle\n      mark=\"bold\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <span>B</span>\n        </>\n      }\n    >\n      <BoldIcon />\n    </MarkToggle>\n  ),\n  italic: () => (\n    <MarkToggle\n      mark=\"italic\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <span>I</span>\n        </>\n      }\n    >\n      <ItalicIcon />\n    </MarkToggle>\n  ),\n  strikethrough: () => (\n    <MarkToggle\n      mark=\"strikethrough\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <ShortcutTooltipKey name=\"shift\" />\n          <span>S</span>\n        </>\n      }\n    >\n      <StrikethroughIcon />\n    </MarkToggle>\n  ),\n  code: () => (\n    <MarkToggle\n      mark=\"code\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <span>E</span>\n        </>\n      }\n    >\n      <CodeIcon />\n    </MarkToggle>\n  ),\n};\n\nconst markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => (\n  <Toggle key={mark} />\n));\n\nfunction ComposerFloatingToolbar() {\n  return (\n    <ComposerPrimitive.FloatingToolbar className=\"lb-root lb-portal lb-elevation lb-composer-floating-toolbar\">\n      {markTogglesList}\n    </ComposerPrimitive.FloatingToolbar>\n  );\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n  const { roomId } = useComposerEditorContext();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n      roomId={roomId}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\"lb-composer-attachments\", className)}\n      {...props}\n    >\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorRequiredComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showFormattingControls = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n  const components = useMemo(() => {\n    return {\n      ...editorRequiredComponents,\n      FloatingToolbar: showFormattingControls\n        ? ComposerFloatingToolbar\n        : undefined,\n    };\n  }, [showFormattingControls]);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={components}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip\n                  content={$.COMPOSER_SEND}\n                  shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                >\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onPointerDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                    >\n                      <SendIcon />\n                    </Button>\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const ComposerRoomIdContext = createContext<string | null>(null);\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      showAttachments = true,\n      showFormattingControls = true,\n      showAttribution,\n      roomId: _roomId,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const room = useRoomOrNull();\n\n    const roomId = _roomId !== undefined ? _roomId : room?.id;\n    if (roomId === undefined) {\n      throw new Error(\n        \"Composer must be a descendant of RoomProvider component\"\n      );\n    }\n\n    const createThread = useCreateRoomThread(roomId);\n    const createComment = useCreateRoomComment(roomId);\n    const editComment = useEditRoomComment(roomId);\n    const { preventUnsavedComposerChanges } = useLiveblocksUIConfig();\n    const hasResolveMentionSuggestions =\n      useResolveMentionSuggestions() !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const canCommentFallback = useSyncExternalStore(\n      useCallback(\n        (callback) => {\n          if (room === null) return () => {};\n          return room.events.self.subscribeOnce(callback);\n        },\n        [room]\n      ),\n      useCallback(() => {\n        return room?.getSelf()?.canComment ?? true;\n      }, [room]),\n      useCallback(() => true, [])\n    );\n\n    const permissions = useRoomPermissions(roomId);\n    const canComment =\n      permissions.size > 0\n        ? permissions.has(Permission.CommentsWrite) ||\n          permissions.has(Permission.Write)\n        : canCommentFallback;\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus, canComment]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, canComment]\n    );\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          className={classNames(\n            \"lb-root lb-composer lb-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled || !canComment}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n          preventUnsavedChanges={preventUnsavedComposerChanges}\n          roomId={roomId}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            showFormattingControls={showFormattingControls}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":["useComposer","useCallback","jsx","Tooltip","Button","classNames","MentionIcon","EmojiPicker","EmojiPickerTrigger","EmojiIcon","ComposerPrimitive.AttachFiles","AttachmentIcon","jsxs","ComposerPrimitive.Mention","MENTION_CHARACTER","User","ComposerPrimitive.Suggestions","ComposerPrimitive.SuggestionsList","ComposerPrimitive.SuggestionsListItem","Avatar","useOverrides","useMemo","ShortcutTooltip","FLOATING_ELEMENT_SIDE_OFFSET","ComposerPrimitive.MarkToggle","Fragment","ShortcutTooltipKey","BoldIcon","ItalicIcon","StrikethroughIcon","CodeIcon","ComposerPrimitive.FloatingToolbar","ComposerPrimitive.Link","useComposerEditorContext","FileAttachment","overrides","useComposerAttachmentsContext","useComposerAttachmentsDropArea","useLayoutEffect","ComposerPrimitive.Editor","Attribution","ComposerPrimitive.Submit","SendIcon","createContext","forwardRef","useRoomOrNull","useCreateRoomThread","useCreateRoomComment","useEditRoomComment","useLiveblocksUIConfig","useResolveMentionSuggestions","useRef","useControllableState","useSyncExternalStore","useRoomPermissions","Permission","TooltipProvider","ComposerPrimitive.Form"],"mappings":"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"}
+{"version":3,"file":"Composer.js","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DM,\n} from \"@liveblocks/core\";\nimport { Permission } from \"@liveblocks/core\";\nimport {\n  useCreateRoomComment,\n  useCreateRoomThread,\n  useEditRoomComment,\n  useResolveMentionSuggestions,\n  useRoomOrNull,\n  useRoomPermissions,\n} from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../config\";\nimport { FLOATING_ELEMENT_SIDE_OFFSET } from \"../constants\";\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { BoldIcon } from \"../icons/Bold\";\nimport { CodeIcon } from \"../icons/Code\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { ItalicIcon } from \"../icons/Italic\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport { StrikethroughIcon } from \"../icons/Strikethrough\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerMarkToggleProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport type { ComposerBodyMark } from \"../types\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ninterface MarkToggleProps extends ComposerMarkToggleProps {\n  shortcut?: ReactNode;\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether to show formatting controls (e.g. a floating toolbar with formatting toggles when selecting text)\n     */\n    showFormattingControls?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n\n    /**\n     * @internal\n     */\n    roomId?: string;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showFormattingControls\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onPointerDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onPointerDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={classNames(\"lb-composer-editor-action\", className)}\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          {...props}\n        >\n          <AttachmentIcon className=\"lb-button-icon\" />\n        </Button>\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction MarkToggle({ mark, shortcut, children, ...props }: MarkToggleProps) {\n  const $ = useOverrides();\n  const label = useMemo(() => {\n    return $.COMPOSER_TOGGLE_MARK(mark);\n  }, [$, mark]);\n\n  return (\n    <ShortcutTooltip\n      content={label}\n      shortcut={shortcut}\n      sideOffset={FLOATING_ELEMENT_SIDE_OFFSET + 2}\n    >\n      <ComposerPrimitive.MarkToggle mark={mark} asChild {...props}>\n        <Button aria-label={label} variant=\"toggle\">\n          {children}\n        </Button>\n      </ComposerPrimitive.MarkToggle>\n    </ShortcutTooltip>\n  );\n}\n\ntype MarkToggles = {\n  [K in ComposerBodyMark]: ComponentType<PropsWithChildren>;\n};\n\nconst markToggles: MarkToggles = {\n  bold: () => (\n    <MarkToggle\n      mark=\"bold\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <span>B</span>\n        </>\n      }\n    >\n      <BoldIcon />\n    </MarkToggle>\n  ),\n  italic: () => (\n    <MarkToggle\n      mark=\"italic\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <span>I</span>\n        </>\n      }\n    >\n      <ItalicIcon />\n    </MarkToggle>\n  ),\n  strikethrough: () => (\n    <MarkToggle\n      mark=\"strikethrough\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <ShortcutTooltipKey name=\"shift\" />\n          <span>S</span>\n        </>\n      }\n    >\n      <StrikethroughIcon />\n    </MarkToggle>\n  ),\n  code: () => (\n    <MarkToggle\n      mark=\"code\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <span>E</span>\n        </>\n      }\n    >\n      <CodeIcon />\n    </MarkToggle>\n  ),\n};\n\nconst markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => (\n  <Toggle key={mark} />\n));\n\nfunction ComposerFloatingToolbar() {\n  return (\n    <ComposerPrimitive.FloatingToolbar className=\"lb-root lb-portal lb-elevation lb-composer-floating-toolbar\">\n      {markTogglesList}\n    </ComposerPrimitive.FloatingToolbar>\n  );\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n  const { roomId } = useComposerEditorContext();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n      roomId={roomId}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\"lb-composer-attachments\", className)}\n      {...props}\n    >\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorRequiredComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showFormattingControls = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n  const components = useMemo(() => {\n    return {\n      ...editorRequiredComponents,\n      FloatingToolbar: showFormattingControls\n        ? ComposerFloatingToolbar\n        : undefined,\n    };\n  }, [showFormattingControls]);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={components}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip\n                  content={$.COMPOSER_SEND}\n                  shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                >\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onPointerDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                    >\n                      <SendIcon />\n                    </Button>\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const ComposerRoomIdContext = createContext<string | null>(null);\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      showAttachments = true,\n      showFormattingControls = true,\n      showAttribution,\n      roomId: _roomId,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const room = useRoomOrNull();\n\n    const roomId = _roomId !== undefined ? _roomId : room?.id;\n    if (roomId === undefined) {\n      throw new Error(\n        \"Composer must be a descendant of RoomProvider component\"\n      );\n    }\n\n    const createThread = useCreateRoomThread(roomId);\n    const createComment = useCreateRoomComment(roomId);\n    const editComment = useEditRoomComment(roomId);\n    const { preventUnsavedComposerChanges } = useLiveblocksUIConfig();\n    const hasResolveMentionSuggestions =\n      useResolveMentionSuggestions() !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const canCommentFallback = useSyncExternalStore(\n      useCallback(\n        (callback) => {\n          if (room === null) return () => {};\n          return room.events.self.subscribeOnce(callback);\n        },\n        [room]\n      ),\n      useCallback(() => {\n        return room?.getSelf()?.canComment ?? true;\n      }, [room]),\n      useCallback(() => true, [])\n    );\n\n    const permissions = useRoomPermissions(roomId);\n    const canComment =\n      permissions.size > 0\n        ? permissions.has(Permission.CommentsWrite) ||\n          permissions.has(Permission.Write)\n        : canCommentFallback;\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus, canComment]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, canComment]\n    );\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          className={classNames(\n            \"lb-root lb-composer lb-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled || !canComment}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n          preventUnsavedChanges={preventUnsavedComposerChanges}\n          roomId={roomId}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            showFormattingControls={showFormattingControls}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAyOA;AAA2C;AACzC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AACG;AAAiC;AAC/B;AAC6D;AAC7C;AACN;AACG;AACR;AAEH;AAAsB;AAAiB;AAC1C;AAGN;AAEA;AAAyC;AACvC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAA2B;AAA0B;AACnD;AAAiC;AAC/B;AAA0B;AACxB;AAC6D;AAC7C;AACN;AACG;AACR;AAEH;AAAoB;AAAiB;AACxC;AACF;AACF;AAGN;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAiC;AAC/B;AAAqC;AACnC;AAC6D;AAC7C;AACN;AACG;AACR;AAEH;AAAyB;AAAiB;AAC7C;AACF;AAGN;AAEA;AACE;AACG;AAAoC;AAClC;AAAA;AACA;AAAK;AAAgB;AAAA;AAG5B;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AAEW;AACH;AAEP;AAAC;AACC;AACU;AACZ;AACC;AACC;AACU;AACZ;AAAA;AAEH;AACH;AAGN;AAEA;AACE;AACA;AACE;AAAkC;AAGpC;AACG;AACU;AACT;AAC2C;AAE1C;AAA6B;AAAmB;AAAK;AACnD;AAAmB;AAAe;AAChC;AACH;AACF;AAGN;AAMA;AAAiC;AAE5B;AACM;AAEH;AACE;AAAC;AAAwB;AAAM;AAC9B;AAAK;AAAC;AAAA;AACT;AAGQ;AACZ;AAGC;AACM;AAEH;AACE;AAAC;AAAwB;AAAM;AAC9B;AAAK;AAAC;AAAA;AACT;AAGU;AACd;AAGC;AACM;AAEH;AACE;AAAC;AAAwB;AAAM;AAC9B;AAAwB;AAAQ;AAChC;AAAK;AAAC;AAAA;AACT;AAGiB;AACrB;AAGC;AACM;AAEH;AACE;AAAC;AAAwB;AAAM;AAC9B;AAAK;AAAC;AAAA;AACT;AAGQ;AAGhB;AAEA;AAIA;AACE;AACG;AAA4C;AAC1C;AAGP;AAEA;AACE;AACG;AAAuB;AAAsB;AAC3C;AAGP;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AACA;AAEA;AACE;AAA8B;AAGhC;AACG;AAC0D;AACrD;AACJ;AACe;AACK;AACpB;AACA;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AACG;AAC2D;AACtD;AAEH;AAAc;AAEX;AACG;AAEC;AACA;AACF;AAEH;AACH;AAGN;AAEA;AAA2D;AAChD;AACW;AAEtB;AAEA;AAAiC;AACb;AACO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACE;AAAO;AACF;AAGC;AACN;AAGF;AAAuE;AAC/C;AAGxB;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAc;AAAmC;AAChD;AAAC;AACW;AACD;AACM;AACf;AACA;AACA;AACA;AACO;AACT;AACqB;AAAoB;AAAsB;AAE5D;AAAc;AACb;AAAC;AAAc;AACZ;AACE;AACU;AACT;AACF;AAED;AACU;AACW;AACpB;AACF;AAEG;AACU;AACT;AACF;AAAA;AAEJ;AACiC;AAChC;AAAc;AAEX;AACG;AACY;AACA;AAAwB;AAAQ;AAE1C;AAAgC;AAC9B;AACgB;AACN;AACC;AACF;AACM;AAEJ;AACZ;AACF;AACF;AACF;AAEJ;AAAA;AACF;AAGC;AAAc;AACZ;AAAc;AACb;AAAgB;AACb;AAAA;AACL;AACF;AAAA;AAIR;AAEa;AAQN;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACkB;AACO;AACzB;AACQ;AACL;AAIL;AAEA;AACA;AACE;AAAU;AACR;AACF;AAGF;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AAInC;AACJ;AACA;AAGF;AAA2B;AACzB;AAEI;AAAmB;AAAa;AAChC;AAA8C;AAChD;AACK;AACP;AAEE;AAAsC;AAC/B;AACiB;AAG5B;AACA;AAMA;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AACuC;AAGzC;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AAC8B;AAGhC;AAA4B;AAExB;AAEA;AACE;AAAA;AAGF;AACE;AAAY;AACV;AACA;AACc;AACO;AACtB;AAED;AAAc;AACZ;AACc;AACO;AACtB;AAED;AAAa;AACG;AACS;AACF;AACtB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AACG;AACE;AACmB;AACP;AACT;AACA;AACF;AACO;AACH;AACC;AAC8B;AAC1B;AACD;AACe;AACvB;AACyB;AACF;AACvB;AAEC;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AACF;AACF;AACF;AAGN;;;"}

package/dist/components/Composer.mjs

@@ -1,7 +1,8 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Permission } from '@liveblocks/core';
 import { useRoomOrNull, useCreateRoomThread, useCreateRoomComment, useEditRoomComment, useResolveMentionSuggestions, useRoomPermissions } from '@liveblocks/react/_private';
-import { createContext, forwardRef, useRef, useSyncExternalStore, useCallback, useMemo, useLayoutEffect } from 'react';
+import { useCallback, useMemo, useLayoutEffect, createContext, forwardRef, useRef, useSyncExternalStore } from 'react';
 import { useLiveblocksUIConfig } from '../config.mjs';
 import { FLOATING_ELEMENT_SIDE_OFFSET } from '../constants.mjs';
 import { AttachmentIcon } from '../icons/Attachment.mjs';
@@ -13,8 +14,8 @@ import { MentionIcon } from '../icons/Mention.mjs';
 import { SendIcon } from '../icons/Send.mjs';
 import { StrikethroughIcon } from '../icons/Strikethrough.mjs';
 import { useOverrides } from '../overrides.mjs';
-import { Form as ComposerForm, Editor as ComposerEditor, Submit as ComposerSubmit, AttachFiles as ComposerAttachFiles, MarkToggle as ComposerMarkToggle, FloatingToolbar as ComposerFloatingToolbar$1, Mention as ComposerMention$1, Suggestions as ComposerSuggestions, SuggestionsList as ComposerSuggestionsList, SuggestionsListItem as ComposerSuggestionsListItem, Link as ComposerLink$1 } from '../primitives/Composer/index.mjs';
-import { useComposer, useComposerAttachmentsContext, useComposerEditorContext } from '../primitives/Composer/contexts.mjs';
+import { AttachFiles as ComposerAttachFiles, Mention as ComposerMention$1, Suggestions as ComposerSuggestions, SuggestionsList as ComposerSuggestionsList, SuggestionsListItem as ComposerSuggestionsListItem, MarkToggle as ComposerMarkToggle, FloatingToolbar as ComposerFloatingToolbar$1, Link as ComposerLink$1, Editor as ComposerEditor, Submit as ComposerSubmit, Form as ComposerForm } from '../primitives/Composer/index.mjs';
+import { useComposer, useComposerEditorContext, useComposerAttachmentsContext } from '../primitives/Composer/contexts.mjs';
 import { useComposerAttachmentsDropArea } from '../primitives/Composer/utils.mjs';
 import { MENTION_CHARACTER } from '../slate/plugins/mentions.mjs';
 import { classNames } from '../utils/class-names.mjs';
@@ -24,10 +25,11 @@ import { Attribution } from './internal/Attribution.mjs';
 import { Avatar } from './internal/Avatar.mjs';
 import { Button } from './internal/Button.mjs';
 import { EmojiPicker } from './internal/EmojiPicker.mjs';
-import { ShortcutTooltipKey, ShortcutTooltip, Tooltip } from './internal/Tooltip.mjs';
+import { Tooltip, ShortcutTooltip, ShortcutTooltipKey } from './internal/Tooltip.mjs';
 import { User } from './internal/User.mjs';
-import { TooltipProvider } from '@radix-ui/react-tooltip';
 import { PopoverTrigger } from '@radix-ui/react-popover';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+
 
 function ComposerInsertMentionEditorAction({
   label,
@@ -420,7 +422,7 @@ function ComposerEditorContainer({
     ]
   });
 }
-createContext(null);
+const ComposerRoomIdContext = createContext(null);
 const Composer = forwardRef(
   ({
     threadId,
@@ -599,5 +601,5 @@ const Composer = forwardRef(
   }
 );
 
-export { Composer };
+export { Composer, ComposerRoomIdContext };
 //# sourceMappingURL=Composer.mjs.map

package/dist/components/Composer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.mjs","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DM,\n} from \"@liveblocks/core\";\nimport { Permission } from \"@liveblocks/core\";\nimport {\n  useCreateRoomComment,\n  useCreateRoomThread,\n  useEditRoomComment,\n  useResolveMentionSuggestions,\n  useRoomOrNull,\n  useRoomPermissions,\n} from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../config\";\nimport { FLOATING_ELEMENT_SIDE_OFFSET } from \"../constants\";\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { BoldIcon } from \"../icons/Bold\";\nimport { CodeIcon } from \"../icons/Code\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { ItalicIcon } from \"../icons/Italic\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport { StrikethroughIcon } from \"../icons/Strikethrough\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerMarkToggleProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport type { ComposerBodyMark } from \"../types\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ninterface MarkToggleProps extends ComposerMarkToggleProps {\n  shortcut?: ReactNode;\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether to show formatting controls (e.g. a floating toolbar with formatting toggles when selecting text)\n     */\n    showFormattingControls?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n\n    /**\n     * @internal\n     */\n    roomId?: string;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showFormattingControls\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onPointerDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onPointerDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={classNames(\"lb-composer-editor-action\", className)}\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          {...props}\n        >\n          <AttachmentIcon className=\"lb-button-icon\" />\n        </Button>\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction MarkToggle({ mark, shortcut, children, ...props }: MarkToggleProps) {\n  const $ = useOverrides();\n  const label = useMemo(() => {\n    return $.COMPOSER_TOGGLE_MARK(mark);\n  }, [$, mark]);\n\n  return (\n    <ShortcutTooltip\n      content={label}\n      shortcut={shortcut}\n      sideOffset={FLOATING_ELEMENT_SIDE_OFFSET + 2}\n    >\n      <ComposerPrimitive.MarkToggle mark={mark} asChild {...props}>\n        <Button aria-label={label} variant=\"toggle\">\n          {children}\n        </Button>\n      </ComposerPrimitive.MarkToggle>\n    </ShortcutTooltip>\n  );\n}\n\ntype MarkToggles = {\n  [K in ComposerBodyMark]: ComponentType<PropsWithChildren>;\n};\n\nconst markToggles: MarkToggles = {\n  bold: () => (\n    <MarkToggle\n      mark=\"bold\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <span>B</span>\n        </>\n      }\n    >\n      <BoldIcon />\n    </MarkToggle>\n  ),\n  italic: () => (\n    <MarkToggle\n      mark=\"italic\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <span>I</span>\n        </>\n      }\n    >\n      <ItalicIcon />\n    </MarkToggle>\n  ),\n  strikethrough: () => (\n    <MarkToggle\n      mark=\"strikethrough\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <ShortcutTooltipKey name=\"shift\" />\n          <span>S</span>\n        </>\n      }\n    >\n      <StrikethroughIcon />\n    </MarkToggle>\n  ),\n  code: () => (\n    <MarkToggle\n      mark=\"code\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <span>E</span>\n        </>\n      }\n    >\n      <CodeIcon />\n    </MarkToggle>\n  ),\n};\n\nconst markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => (\n  <Toggle key={mark} />\n));\n\nfunction ComposerFloatingToolbar() {\n  return (\n    <ComposerPrimitive.FloatingToolbar className=\"lb-root lb-portal lb-elevation lb-composer-floating-toolbar\">\n      {markTogglesList}\n    </ComposerPrimitive.FloatingToolbar>\n  );\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n  const { roomId } = useComposerEditorContext();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n      roomId={roomId}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\"lb-composer-attachments\", className)}\n      {...props}\n    >\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorRequiredComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showFormattingControls = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n  const components = useMemo(() => {\n    return {\n      ...editorRequiredComponents,\n      FloatingToolbar: showFormattingControls\n        ? ComposerFloatingToolbar\n        : undefined,\n    };\n  }, [showFormattingControls]);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={components}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip\n                  content={$.COMPOSER_SEND}\n                  shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                >\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onPointerDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                    >\n                      <SendIcon />\n                    </Button>\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const ComposerRoomIdContext = createContext<string | null>(null);\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      showAttachments = true,\n      showFormattingControls = true,\n      showAttribution,\n      roomId: _roomId,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const room = useRoomOrNull();\n\n    const roomId = _roomId !== undefined ? _roomId : room?.id;\n    if (roomId === undefined) {\n      throw new Error(\n        \"Composer must be a descendant of RoomProvider component\"\n      );\n    }\n\n    const createThread = useCreateRoomThread(roomId);\n    const createComment = useCreateRoomComment(roomId);\n    const editComment = useEditRoomComment(roomId);\n    const { preventUnsavedComposerChanges } = useLiveblocksUIConfig();\n    const hasResolveMentionSuggestions =\n      useResolveMentionSuggestions() !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const canCommentFallback = useSyncExternalStore(\n      useCallback(\n        (callback) => {\n          if (room === null) return () => {};\n          return room.events.self.subscribeOnce(callback);\n        },\n        [room]\n      ),\n      useCallback(() => {\n        return room?.getSelf()?.canComment ?? true;\n      }, [room]),\n      useCallback(() => true, [])\n    );\n\n    const permissions = useRoomPermissions(roomId);\n    const canComment =\n      permissions.size > 0\n        ? permissions.has(Permission.CommentsWrite) ||\n          permissions.has(Permission.Write)\n        : canCommentFallback;\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus, canComment]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, canComment]\n    );\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          className={classNames(\n            \"lb-root lb-composer lb-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled || !canComment}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n          preventUnsavedChanges={preventUnsavedComposerChanges}\n          roomId={roomId}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            showFormattingControls={showFormattingControls}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":["EmojiPickerTrigger","ComposerPrimitive.AttachFiles","ComposerPrimitive.Mention","ComposerPrimitive.Suggestions","ComposerPrimitive.SuggestionsList","ComposerPrimitive.SuggestionsListItem","ComposerPrimitive.MarkToggle","ComposerPrimitive.FloatingToolbar","ComposerPrimitive.Link","ComposerPrimitive.Editor","ComposerPrimitive.Submit","ComposerPrimitive.Form"],"mappings":"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"}
+{"version":3,"file":"Composer.mjs","sources":["../../src/components/Composer.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  BaseMetadata,\n  CommentAttachment,\n  CommentMixedAttachment,\n  DM,\n} from \"@liveblocks/core\";\nimport { Permission } from \"@liveblocks/core\";\nimport {\n  useCreateRoomComment,\n  useCreateRoomThread,\n  useEditRoomComment,\n  useResolveMentionSuggestions,\n  useRoomOrNull,\n  useRoomPermissions,\n} from \"@liveblocks/react/_private\";\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentType,\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  MouseEvent,\n  PropsWithChildren,\n  ReactNode,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from \"react\";\n\nimport { useLiveblocksUIConfig } from \"../config\";\nimport { FLOATING_ELEMENT_SIDE_OFFSET } from \"../constants\";\nimport { AttachmentIcon } from \"../icons/Attachment\";\nimport { BoldIcon } from \"../icons/Bold\";\nimport { CodeIcon } from \"../icons/Code\";\nimport { EmojiIcon } from \"../icons/Emoji\";\nimport { ItalicIcon } from \"../icons/Italic\";\nimport { MentionIcon } from \"../icons/Mention\";\nimport { SendIcon } from \"../icons/Send\";\nimport { StrikethroughIcon } from \"../icons/Strikethrough\";\nimport type { ComposerOverrides, GlobalOverrides } from \"../overrides\";\nimport { useOverrides } from \"../overrides\";\nimport * as ComposerPrimitive from \"../primitives/Composer\";\nimport {\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n} from \"../primitives/Composer/contexts\";\nimport type {\n  ComposerEditorComponents,\n  ComposerEditorLinkProps,\n  ComposerEditorMentionProps,\n  ComposerEditorMentionSuggestionsProps,\n  ComposerEditorProps,\n  ComposerFormProps,\n  ComposerMarkToggleProps,\n  ComposerSubmitComment,\n} from \"../primitives/Composer/types\";\nimport { useComposerAttachmentsDropArea } from \"../primitives/Composer/utils\";\nimport { MENTION_CHARACTER } from \"../slate/plugins/mentions\";\nimport type { ComposerBodyMark } from \"../types\";\nimport { classNames } from \"../utils/class-names\";\nimport { useControllableState } from \"../utils/use-controllable-state\";\nimport { FileAttachment } from \"./internal/Attachment\";\nimport { Attribution } from \"./internal/Attribution\";\nimport { Avatar } from \"./internal/Avatar\";\nimport { Button } from \"./internal/Button\";\nimport type { EmojiPickerProps } from \"./internal/EmojiPicker\";\nimport { EmojiPicker, EmojiPickerTrigger } from \"./internal/EmojiPicker\";\nimport {\n  ShortcutTooltip,\n  ShortcutTooltipKey,\n  Tooltip,\n  TooltipProvider,\n} from \"./internal/Tooltip\";\nimport { User } from \"./internal/User\";\n\ninterface EditorActionProps extends ComponentPropsWithoutRef<\"button\"> {\n  label: string;\n  tooltipLabel?: string;\n}\n\ninterface EmojiEditorActionProps extends EditorActionProps {\n  onPickerOpenChange?: EmojiPickerProps[\"onOpenChange\"];\n}\n\ninterface MarkToggleProps extends ComposerMarkToggleProps {\n  shortcut?: ReactNode;\n}\n\ntype ComposerCreateThreadProps<M extends BaseMetadata> = {\n  threadId?: never;\n  commentId?: never;\n\n  /**\n   * The metadata of the thread to create.\n   */\n  metadata?: M;\n};\n\ntype ComposerCreateCommentProps = {\n  /**\n   * The ID of the thread to reply to.\n   */\n  threadId: string;\n  commentId?: never;\n  metadata?: never;\n};\n\ntype ComposerEditCommentProps = {\n  /**\n   * The ID of the thread to edit a comment in.\n   */\n  threadId: string;\n\n  /**\n   * The ID of the comment to edit.\n   */\n  commentId: string;\n  metadata?: never;\n};\n\nexport type ComposerProps<M extends BaseMetadata = DM> = Omit<\n  ComponentPropsWithoutRef<\"form\">,\n  \"defaultValue\"\n> &\n  (\n    | ComposerCreateThreadProps<M>\n    | ComposerCreateCommentProps\n    | ComposerEditCommentProps\n  ) & {\n    /**\n     * The event handler called when the composer is submitted.\n     */\n    onComposerSubmit?: (\n      comment: ComposerSubmitComment,\n      event: FormEvent<HTMLFormElement>\n    ) => Promise<void> | void;\n\n    /**\n     * The composer's initial value.\n     */\n    defaultValue?: ComposerEditorProps[\"defaultValue\"];\n\n    /**\n     * The composer's initial attachments.\n     */\n    defaultAttachments?: CommentAttachment[];\n\n    /**\n     * Whether the composer is collapsed. Setting a value will make the composer controlled.\n     */\n    collapsed?: boolean;\n\n    /**\n     * The event handler called when the collapsed state of the composer changes.\n     */\n    onCollapsedChange?: (collapsed: boolean) => void;\n\n    /**\n     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.\n     */\n    defaultCollapsed?: boolean;\n\n    /**\n     * Whether to show and allow adding attachments.\n     */\n    showAttachments?: boolean;\n\n    /**\n     * Whether to show formatting controls (e.g. a floating toolbar with formatting toggles when selecting text)\n     */\n    showFormattingControls?: boolean;\n\n    /**\n     * Whether the composer is disabled.\n     */\n    disabled?: ComposerFormProps[\"disabled\"];\n\n    /**\n     * Whether to focus the composer on mount.\n     */\n    autoFocus?: ComposerEditorProps[\"autoFocus\"];\n\n    /**\n     * Override the component's strings.\n     */\n    overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n\n    /**\n     * @internal\n     */\n    actions?: ReactNode;\n\n    /**\n     * @internal\n     */\n    showAttribution?: boolean;\n\n    /**\n     * @internal\n     */\n    roomId?: string;\n  };\n\ninterface ComposerEditorContainerProps\n  extends Pick<\n    ComposerProps,\n    | \"defaultValue\"\n    | \"showAttachments\"\n    | \"showFormattingControls\"\n    | \"showAttribution\"\n    | \"overrides\"\n    | \"actions\"\n    | \"autoFocus\"\n    | \"disabled\"\n  > {\n  isCollapsed: boolean | undefined;\n  onEmptyChange: (isEmpty: boolean) => void;\n  hasResolveMentionSuggestions: boolean;\n  onEmojiPickerOpenChange: (isOpen: boolean) => void;\n  onEditorClick: (event: MouseEvent<HTMLDivElement>) => void;\n}\n\nfunction ComposerInsertMentionEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  onClick,\n  ...props\n}: EditorActionProps) {\n  const { createMention } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        event.stopPropagation();\n        createMention();\n      }\n    },\n    [createMention, onClick]\n  );\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <Button\n        className={classNames(\"lb-composer-editor-action\", className)}\n        onPointerDown={preventDefault}\n        onClick={handleClick}\n        aria-label={label}\n        {...props}\n      >\n        <MentionIcon className=\"lb-button-icon\" />\n      </Button>\n    </Tooltip>\n  );\n}\n\nfunction ComposerInsertEmojiEditorAction({\n  label,\n  tooltipLabel,\n  onPickerOpenChange,\n  className,\n  ...props\n}: EmojiEditorActionProps) {\n  const { insertText } = useComposer();\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <EmojiPicker onEmojiSelect={insertText} onOpenChange={onPickerOpenChange}>\n      <Tooltip content={tooltipLabel ?? label}>\n        <EmojiPickerTrigger asChild>\n          <Button\n            className={classNames(\"lb-composer-editor-action\", className)}\n            onPointerDown={preventDefault}\n            onClick={stopPropagation}\n            aria-label={label}\n            {...props}\n          >\n            <EmojiIcon className=\"lb-button-icon\" />\n          </Button>\n        </EmojiPickerTrigger>\n      </Tooltip>\n    </EmojiPicker>\n  );\n}\n\nfunction ComposerAttachFilesEditorAction({\n  label,\n  tooltipLabel,\n  className,\n  ...props\n}: EditorActionProps) {\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <Tooltip content={tooltipLabel ?? label}>\n      <ComposerPrimitive.AttachFiles asChild>\n        <Button\n          className={classNames(\"lb-composer-editor-action\", className)}\n          onPointerDown={preventDefault}\n          onClick={stopPropagation}\n          aria-label={label}\n          {...props}\n        >\n          <AttachmentIcon className=\"lb-button-icon\" />\n        </Button>\n      </ComposerPrimitive.AttachFiles>\n    </Tooltip>\n  );\n}\n\nfunction ComposerMention({ userId }: ComposerEditorMentionProps) {\n  return (\n    <ComposerPrimitive.Mention className=\"lb-composer-mention\">\n      {MENTION_CHARACTER}\n      <User userId={userId} />\n    </ComposerPrimitive.Mention>\n  );\n}\n\nfunction ComposerMentionSuggestions({\n  userIds,\n}: ComposerEditorMentionSuggestionsProps) {\n  return userIds.length > 0 ? (\n    <ComposerPrimitive.Suggestions className=\"lb-root lb-portal lb-elevation lb-composer-suggestions lb-composer-mention-suggestions\">\n      <ComposerPrimitive.SuggestionsList className=\"lb-composer-suggestions-list lb-composer-mention-suggestions-list\">\n        {userIds.map((userId) => (\n          <ComposerPrimitive.SuggestionsListItem\n            key={userId}\n            className=\"lb-composer-suggestions-list-item lb-composer-mention-suggestion\"\n            value={userId}\n          >\n            <Avatar\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-avatar\"\n            />\n            <User\n              userId={userId}\n              className=\"lb-composer-mention-suggestion-user\"\n            />\n          </ComposerPrimitive.SuggestionsListItem>\n        ))}\n      </ComposerPrimitive.SuggestionsList>\n    </ComposerPrimitive.Suggestions>\n  ) : null;\n}\n\nfunction MarkToggle({ mark, shortcut, children, ...props }: MarkToggleProps) {\n  const $ = useOverrides();\n  const label = useMemo(() => {\n    return $.COMPOSER_TOGGLE_MARK(mark);\n  }, [$, mark]);\n\n  return (\n    <ShortcutTooltip\n      content={label}\n      shortcut={shortcut}\n      sideOffset={FLOATING_ELEMENT_SIDE_OFFSET + 2}\n    >\n      <ComposerPrimitive.MarkToggle mark={mark} asChild {...props}>\n        <Button aria-label={label} variant=\"toggle\">\n          {children}\n        </Button>\n      </ComposerPrimitive.MarkToggle>\n    </ShortcutTooltip>\n  );\n}\n\ntype MarkToggles = {\n  [K in ComposerBodyMark]: ComponentType<PropsWithChildren>;\n};\n\nconst markToggles: MarkToggles = {\n  bold: () => (\n    <MarkToggle\n      mark=\"bold\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <span>B</span>\n        </>\n      }\n    >\n      <BoldIcon />\n    </MarkToggle>\n  ),\n  italic: () => (\n    <MarkToggle\n      mark=\"italic\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <span>I</span>\n        </>\n      }\n    >\n      <ItalicIcon />\n    </MarkToggle>\n  ),\n  strikethrough: () => (\n    <MarkToggle\n      mark=\"strikethrough\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <ShortcutTooltipKey name=\"shift\" />\n          <span>S</span>\n        </>\n      }\n    >\n      <StrikethroughIcon />\n    </MarkToggle>\n  ),\n  code: () => (\n    <MarkToggle\n      mark=\"code\"\n      shortcut={\n        <>\n          <ShortcutTooltipKey name=\"mod\" />\n          <span>E</span>\n        </>\n      }\n    >\n      <CodeIcon />\n    </MarkToggle>\n  ),\n};\n\nconst markTogglesList = Object.entries(markToggles).map(([mark, Toggle]) => (\n  <Toggle key={mark} />\n));\n\nfunction ComposerFloatingToolbar() {\n  return (\n    <ComposerPrimitive.FloatingToolbar className=\"lb-root lb-portal lb-elevation lb-composer-floating-toolbar\">\n      {markTogglesList}\n    </ComposerPrimitive.FloatingToolbar>\n  );\n}\n\nfunction ComposerLink({ href, children }: ComposerEditorLinkProps) {\n  return (\n    <ComposerPrimitive.Link href={href} className=\"lb-composer-link\">\n      {children}\n    </ComposerPrimitive.Link>\n  );\n}\n\ninterface ComposerAttachmentsProps extends ComponentPropsWithoutRef<\"div\"> {\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\ninterface ComposerFileAttachmentProps extends ComponentPropsWithoutRef<\"div\"> {\n  attachment: CommentMixedAttachment;\n  overrides?: Partial<GlobalOverrides & ComposerOverrides>;\n}\n\nfunction ComposerFileAttachment({\n  attachment,\n  className,\n  overrides,\n  ...props\n}: ComposerFileAttachmentProps) {\n  const { removeAttachment } = useComposer();\n  const { roomId } = useComposerEditorContext();\n\n  const handleDeleteClick = useCallback(() => {\n    removeAttachment(attachment.id);\n  }, [attachment.id, removeAttachment]);\n\n  return (\n    <FileAttachment\n      className={classNames(\"lb-composer-attachment\", className)}\n      {...props}\n      attachment={attachment}\n      onDeleteClick={handleDeleteClick}\n      preventFocusOnDelete\n      overrides={overrides}\n      roomId={roomId}\n    />\n  );\n}\n\nfunction ComposerAttachments({\n  overrides,\n  className,\n  ...props\n}: ComposerAttachmentsProps) {\n  const { attachments } = useComposer();\n\n  if (attachments.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\"lb-composer-attachments\", className)}\n      {...props}\n    >\n      <div className=\"lb-attachments\">\n        {attachments.map((attachment) => {\n          return (\n            <ComposerFileAttachment\n              key={attachment.id}\n              attachment={attachment}\n              overrides={overrides}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nconst editorRequiredComponents: ComposerEditorComponents = {\n  Mention: ComposerMention,\n  MentionSuggestions: ComposerMentionSuggestions,\n  Link: ComposerLink,\n};\n\nfunction ComposerEditorContainer({\n  showAttachments = true,\n  showFormattingControls = true,\n  showAttribution,\n  defaultValue,\n  isCollapsed,\n  overrides,\n  actions,\n  autoFocus,\n  disabled,\n  hasResolveMentionSuggestions,\n  onEmojiPickerOpenChange,\n  onEmptyChange,\n  onEditorClick,\n}: ComposerEditorContainerProps) {\n  const { isEmpty } = useComposer();\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const $ = useOverrides(overrides);\n  const components = useMemo(() => {\n    return {\n      ...editorRequiredComponents,\n      FloatingToolbar: showFormattingControls\n        ? ComposerFloatingToolbar\n        : undefined,\n    };\n  }, [showFormattingControls]);\n\n  const [isDraggingOver, dropAreaProps] = useComposerAttachmentsDropArea({\n    disabled: disabled || hasMaxAttachments,\n  });\n\n  useLayoutEffect(() => {\n    onEmptyChange(isEmpty);\n  }, [isEmpty, onEmptyChange]);\n\n  const preventDefault = useCallback((event: SyntheticEvent) => {\n    event.preventDefault();\n  }, []);\n\n  const stopPropagation = useCallback((event: SyntheticEvent) => {\n    event.stopPropagation();\n  }, []);\n\n  return (\n    <div className=\"lb-composer-editor-container\" {...dropAreaProps}>\n      <ComposerPrimitive.Editor\n        className=\"lb-composer-editor\"\n        onClick={onEditorClick}\n        placeholder={$.COMPOSER_PLACEHOLDER}\n        defaultValue={defaultValue}\n        autoFocus={autoFocus}\n        components={components}\n        disabled={disabled}\n        dir={$.dir}\n      />\n      {showAttachments && <ComposerAttachments overrides={overrides} />}\n      {(!isCollapsed || isDraggingOver) && (\n        <div className=\"lb-composer-footer\">\n          <div className=\"lb-composer-editor-actions\">\n            {hasResolveMentionSuggestions && (\n              <ComposerInsertMentionEditorAction\n                label={$.COMPOSER_INSERT_MENTION}\n                disabled={disabled}\n              />\n            )}\n            <ComposerInsertEmojiEditorAction\n              label={$.COMPOSER_INSERT_EMOJI}\n              onPickerOpenChange={onEmojiPickerOpenChange}\n              disabled={disabled}\n            />\n            {showAttachments && (\n              <ComposerAttachFilesEditorAction\n                label={$.COMPOSER_ATTACH_FILES}\n                disabled={disabled}\n              />\n            )}\n          </div>\n          {showAttribution && <Attribution />}\n          <div className=\"lb-composer-actions\">\n            {actions ?? (\n              <>\n                <ShortcutTooltip\n                  content={$.COMPOSER_SEND}\n                  shortcut={<ShortcutTooltipKey name=\"enter\" />}\n                >\n                  <ComposerPrimitive.Submit asChild>\n                    <Button\n                      onPointerDown={preventDefault}\n                      onClick={stopPropagation}\n                      className=\"lb-composer-action\"\n                      variant=\"primary\"\n                      aria-label={$.COMPOSER_SEND}\n                    >\n                      <SendIcon />\n                    </Button>\n                  </ComposerPrimitive.Submit>\n                </ShortcutTooltip>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n      {showAttachments && isDraggingOver && (\n        <div className=\"lb-composer-attachments-drop-area\">\n          <div className=\"lb-composer-attachments-drop-area-label\">\n            <AttachmentIcon />\n            {$.COMPOSER_ATTACH_FILES}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const ComposerRoomIdContext = createContext<string | null>(null);\n\n/**\n * Displays a composer to create comments.\n *\n * @example\n * <Composer />\n */\nexport const Composer = forwardRef(\n  <M extends BaseMetadata = DM>(\n    {\n      threadId,\n      commentId,\n      metadata,\n      defaultValue,\n      defaultAttachments,\n      onComposerSubmit,\n      collapsed: controlledCollapsed,\n      defaultCollapsed,\n      onCollapsedChange: controlledOnCollapsedChange,\n      overrides,\n      actions,\n      onBlur,\n      className,\n      onFocus,\n      autoFocus,\n      disabled,\n      showAttachments = true,\n      showFormattingControls = true,\n      showAttribution,\n      roomId: _roomId,\n      ...props\n    }: ComposerProps<M>,\n    forwardedRef: ForwardedRef<HTMLFormElement>\n  ) => {\n    const room = useRoomOrNull();\n\n    const roomId = _roomId !== undefined ? _roomId : room?.id;\n    if (roomId === undefined) {\n      throw new Error(\n        \"Composer must be a descendant of RoomProvider component\"\n      );\n    }\n\n    const createThread = useCreateRoomThread(roomId);\n    const createComment = useCreateRoomComment(roomId);\n    const editComment = useEditRoomComment(roomId);\n    const { preventUnsavedComposerChanges } = useLiveblocksUIConfig();\n    const hasResolveMentionSuggestions =\n      useResolveMentionSuggestions() !== undefined;\n    const isEmptyRef = useRef(true);\n    const isEmojiPickerOpenRef = useRef(false);\n    const $ = useOverrides(overrides);\n    const [isCollapsed, onCollapsedChange] = useControllableState(\n      // If the composer is neither controlled nor uncontrolled, it defaults to controlled as uncollapsed.\n      controlledCollapsed === undefined && defaultCollapsed === undefined\n        ? false\n        : controlledCollapsed,\n      controlledOnCollapsedChange,\n      defaultCollapsed\n    );\n\n    const canCommentFallback = useSyncExternalStore(\n      useCallback(\n        (callback) => {\n          if (room === null) return () => {};\n          return room.events.self.subscribeOnce(callback);\n        },\n        [room]\n      ),\n      useCallback(() => {\n        return room?.getSelf()?.canComment ?? true;\n      }, [room]),\n      useCallback(() => true, [])\n    );\n\n    const permissions = useRoomPermissions(roomId);\n    const canComment =\n      permissions.size > 0\n        ? permissions.has(Permission.CommentsWrite) ||\n          permissions.has(Permission.Write)\n        : canCommentFallback;\n\n    const setEmptyRef = useCallback((isEmpty: boolean) => {\n      isEmptyRef.current = isEmpty;\n    }, []);\n\n    const setEmojiPickerOpenRef = useCallback((isEmojiPickerOpen: boolean) => {\n      isEmojiPickerOpenRef.current = isEmojiPickerOpen;\n    }, []);\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onFocus?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (isEmptyRef.current && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, onFocus, canComment]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLFormElement>) => {\n        onBlur?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        const isOutside = !event.currentTarget.contains(\n          event.relatedTarget ?? document.activeElement\n        );\n\n        if (isOutside && isEmptyRef.current && !isEmojiPickerOpenRef.current) {\n          onCollapsedChange?.(true);\n        }\n      },\n      [onBlur, onCollapsedChange]\n    );\n\n    const handleEditorClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        event.stopPropagation();\n\n        if (isEmptyRef.current && canComment) {\n          onCollapsedChange?.(false);\n        }\n      },\n      [onCollapsedChange, canComment]\n    );\n\n    const handleCommentSubmit = useCallback(\n      (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => {\n        onComposerSubmit?.(comment, event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        if (commentId && threadId) {\n          editComment({\n            commentId,\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else if (threadId) {\n          createComment({\n            threadId,\n            body: comment.body,\n            attachments: comment.attachments,\n          });\n        } else {\n          createThread({\n            body: comment.body,\n            metadata: metadata ?? {},\n            attachments: comment.attachments,\n          });\n        }\n      },\n      [\n        commentId,\n        createComment,\n        createThread,\n        editComment,\n        metadata,\n        onComposerSubmit,\n        threadId,\n      ]\n    );\n\n    return (\n      <TooltipProvider>\n        <ComposerPrimitive.Form\n          onComposerSubmit={handleCommentSubmit}\n          className={classNames(\n            \"lb-root lb-composer lb-composer-form\",\n            className\n          )}\n          dir={$.dir}\n          {...props}\n          ref={forwardedRef}\n          data-collapsed={isCollapsed ? \"\" : undefined}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled || !canComment}\n          defaultAttachments={defaultAttachments}\n          pasteFilesAsAttachments={showAttachments}\n          preventUnsavedChanges={preventUnsavedComposerChanges}\n          roomId={roomId}\n        >\n          <ComposerEditorContainer\n            defaultValue={defaultValue}\n            actions={actions}\n            overrides={overrides}\n            isCollapsed={isCollapsed}\n            showAttachments={showAttachments}\n            showAttribution={showAttribution}\n            showFormattingControls={showFormattingControls}\n            hasResolveMentionSuggestions={hasResolveMentionSuggestions}\n            onEmptyChange={setEmptyRef}\n            onEmojiPickerOpenChange={setEmojiPickerOpenRef}\n            onEditorClick={handleEditorClick}\n            autoFocus={autoFocus}\n            disabled={disabled}\n          />\n        </ComposerPrimitive.Form>\n      </TooltipProvider>\n    );\n  }\n) as <M extends BaseMetadata = DM>(\n  props: ComposerProps<M> & RefAttributes<HTMLFormElement>\n) => JSX.Element;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAyOA;AAA2C;AACzC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AAAoB;AAEhB;AAEA;AACE;AACA;AAAc;AAChB;AACF;AACuB;AAGzB;AACG;AAAiC;AAC/B;AAC6D;AAC7C;AACN;AACG;AACR;AAEH;AAAsB;AAAiB;AAC1C;AAGN;AAEA;AAAyC;AACvC;AACA;AACA;AACA;AAEF;AACE;AAEA;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAA2B;AAA0B;AACnD;AAAiC;AAC/B;AAA0B;AACxB;AAC6D;AAC7C;AACN;AACG;AACR;AAEH;AAAoB;AAAiB;AACxC;AACF;AACF;AAGN;AAEA;AAAyC;AACvC;AACA;AACA;AAEF;AACE;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAiC;AAC/B;AAAqC;AACnC;AAC6D;AAC7C;AACN;AACG;AACR;AAEH;AAAyB;AAAiB;AAC7C;AACF;AAGN;AAEA;AACE;AACG;AAAoC;AAClC;AAAA;AACA;AAAK;AAAgB;AAAA;AAG5B;AAEA;AAAoC;AAEpC;AACE;AACG;AAAwC;AACtC;AAA4C;AAExC;AAEW;AACH;AAEP;AAAC;AACC;AACU;AACZ;AACC;AACC;AACU;AACZ;AAAA;AAEH;AACH;AAGN;AAEA;AACE;AACA;AACE;AAAkC;AAGpC;AACG;AACU;AACT;AAC2C;AAE1C;AAA6B;AAAmB;AAAK;AACnD;AAAmB;AAAe;AAChC;AACH;AACF;AAGN;AAMA;AAAiC;AAE5B;AACM;AAEH;AACE;AAAC;AAAwB;AAAM;AAC9B;AAAK;AAAC;AAAA;AACT;AAGQ;AACZ;AAGC;AACM;AAEH;AACE;AAAC;AAAwB;AAAM;AAC9B;AAAK;AAAC;AAAA;AACT;AAGU;AACd;AAGC;AACM;AAEH;AACE;AAAC;AAAwB;AAAM;AAC9B;AAAwB;AAAQ;AAChC;AAAK;AAAC;AAAA;AACT;AAGiB;AACrB;AAGC;AACM;AAEH;AACE;AAAC;AAAwB;AAAM;AAC9B;AAAK;AAAC;AAAA;AACT;AAGQ;AAGhB;AAEA;AAIA;AACE;AACG;AAA4C;AAC1C;AAGP;AAEA;AACE;AACG;AAAuB;AAAsB;AAC3C;AAGP;AAWA;AAAgC;AAC9B;AACA;AACA;AAEF;AACE;AACA;AAEA;AACE;AAA8B;AAGhC;AACG;AAC0D;AACrD;AACJ;AACe;AACK;AACpB;AACA;AAGN;AAEA;AAA6B;AAC3B;AACA;AAEF;AACE;AAEA;AACE;AAAO;AAGT;AACG;AAC2D;AACtD;AAEH;AAAc;AAEX;AACG;AAEC;AACA;AACF;AAEH;AACH;AAGN;AAEA;AAA2D;AAChD;AACW;AAEtB;AAEA;AAAiC;AACb;AACO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACE;AAAO;AACF;AAGC;AACN;AAGF;AAAuE;AAC/C;AAGxB;AACE;AAAqB;AAGvB;AACE;AAAqB;AAGvB;AACE;AAAsB;AAGxB;AACG;AAAc;AAAmC;AAChD;AAAC;AACW;AACD;AACM;AACf;AACA;AACA;AACA;AACO;AACT;AACqB;AAAoB;AAAsB;AAE5D;AAAc;AACb;AAAC;AAAc;AACZ;AACE;AACU;AACT;AACF;AAED;AACU;AACW;AACpB;AACF;AAEG;AACU;AACT;AACF;AAAA;AAEJ;AACiC;AAChC;AAAc;AAEX;AACG;AACY;AACA;AAAwB;AAAQ;AAE1C;AAAgC;AAC9B;AACgB;AACN;AACC;AACF;AACM;AAEJ;AACZ;AACF;AACF;AACF;AAEJ;AAAA;AACF;AAGC;AAAc;AACZ;AAAc;AACb;AAAgB;AACb;AAAA;AACL;AACF;AAAA;AAIR;AAEa;AAQN;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AACmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACkB;AACO;AACzB;AACQ;AACL;AAIL;AAEA;AACA;AACE;AAAU;AACR;AACF;AAGF;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAyC;AAInC;AACJ;AACA;AAGF;AAA2B;AACzB;AAEI;AAAmB;AAAa;AAChC;AAA8C;AAChD;AACK;AACP;AAEE;AAAsC;AAC/B;AACiB;AAG5B;AACA;AAMA;AACE;AAAqB;AAGvB;AACE;AAA+B;AAGjC;AAAoB;AAEhB;AAEA;AACE;AAAA;AAGF;AACE;AAAyB;AAC3B;AACF;AACuC;AAGzC;AAAmB;AAEf;AAEA;AACE;AAAA;AAGF;AAAuC;AACL;AAGlC;AACE;AAAwB;AAC1B;AACF;AAC0B;AAG5B;AAA0B;AAEtB;AAEA;AACE;AAAyB;AAC3B;AACF;AAC8B;AAGhC;AAA4B;AAExB;AAEA;AACE;AAAA;AAGF;AACE;AAAY;AACV;AACA;AACc;AACO;AACtB;AAED;AAAc;AACZ;AACc;AACO;AACtB;AAED;AAAa;AACG;AACS;AACF;AACtB;AACH;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AACG;AACE;AACmB;AACP;AACT;AACA;AACF;AACO;AACH;AACC;AAC8B;AAC1B;AACD;AACe;AACvB;AACyB;AACF;AACvB;AAEC;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe;AACU;AACV;AACf;AACA;AACF;AACF;AACF;AAGN;;"}

package/dist/components/HistoryVersionSummary.js

@@ -1,21 +1,15 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var overrides = require('../overrides.js');
-require('../primitives/Comment/index.js');
-require('../primitives/Composer/index.js');
-require('../primitives/Composer/contexts.js');
-require('@floating-ui/react-dom');
-require('@liveblocks/core');
-require('@liveblocks/react');
-require('slate');
-require('../primitives/EmojiPicker/index.js');
-require('../primitives/FileSize.js');
-var Timestamp = require('../primitives/Timestamp.js');
+require('../primitives/index.js');
 var classNames = require('../utils/class-names.js');
 var List = require('./internal/List.js');
 var User = require('./internal/User.js');
+var Timestamp = require('../primitives/Timestamp.js');
+
 
 const AUTHORS_TRUNCATE = 3;
 const HistoryVersionSummary = react.forwardRef(({ version, selected, className, ...props }, forwardedRef) => {

package/dist/components/HistoryVersionSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryVersionSummary.js","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { classNames } from \"../utils/class-names\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={classNames(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":["forwardRef","useOverrides","jsxs","classNames","jsx","Timestamp","List","User"],"mappings":";;;;;;;;;;;;;;;;;;;AAYA,MAAM,gBAAmB,GAAA,CAAA,CAAA;AAcZ,MAAA,qBAAA,GAAwBA,iBAGnC,CAAC,EAAE,SAAS,QAAU,EAAA,SAAA,EAAA,GAAc,KAAM,EAAA,EAAG,YAAiB,KAAA;AAC9D,EAAA,MAAM,IAAIC,sBAAa,EAAA,CAAA;AAEvB,EAAA,uBACGC,eAAA,CAAA,QAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,SAAA,EAAWC,qBAAW,CAAA,oCAAA,EAAsC,SAAS,CAAA;AAAA,IACrE,GAAK,EAAA,YAAA;AAAA,IACL,eAAA,EAAe,WAAW,EAAK,GAAA,KAAA,CAAA;AAAA,IAE/B,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAAC,mBAAA,EAAA;AAAA,QACC,QAAQ,CAAE,CAAA,MAAA;AAAA,QACV,MAAM,OAAQ,CAAA,SAAA;AAAA,QACd,SAAU,EAAA,yCAAA;AAAA,OACZ,CAAA;AAAA,sBACCD,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAU,EAAA,oCAAA;AAAA,QACd,QAAC,kBAAAA,cAAA,CAAAE,SAAA,EAAA;AAAA,UACC,QAAQ,OAAQ,CAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,2BAC1BF,cAAA,CAAAG,SAAA,EAAA;AAAA,YAAqB,QAAQ,MAAO,CAAA,EAAA;AAAA,YAAI,WAAW,EAAA,IAAA;AAAA,WAAzC,EAAA,MAAA,CAAO,EAAmC,CACtD,CAAA;AAAA,UACD,iBAAiB,CAAE,CAAA,oBAAA;AAAA,UACnB,QAAU,EAAA,gBAAA;AAAA,UACV,QAAQ,CAAE,CAAA,MAAA;AAAA,SACZ,CAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"HistoryVersionSummary.js","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { classNames } from \"../utils/class-names\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={classNames(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AAYA;AAca;AAIX;AAEA;AACG;AACK;AACiE;AAChE;AAC0B;AAE/B;AAAC;AACW;AACI;AACJ;AACZ;AACC;AAAe;AACb;AAEI;AAAoC;AAAe;AACrD;AACkB;AACT;AACA;AACZ;AACF;AAAA;AAGN;;"}

package/dist/components/HistoryVersionSummary.mjs

@@ -1,19 +1,13 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useOverrides } from '../overrides.mjs';
-import '../primitives/Comment/index.mjs';
-import '../primitives/Composer/index.mjs';
-import '../primitives/Composer/contexts.mjs';
-import '@floating-ui/react-dom';
-import '@liveblocks/core';
-import '@liveblocks/react';
-import 'slate';
-import '../primitives/EmojiPicker/index.mjs';
-import '../primitives/FileSize.mjs';
-import { Timestamp } from '../primitives/Timestamp.mjs';
+import '../primitives/index.mjs';
 import { classNames } from '../utils/class-names.mjs';
 import { List } from './internal/List.mjs';
 import { User } from './internal/User.mjs';
+import { Timestamp } from '../primitives/Timestamp.mjs';
+
 
 const AUTHORS_TRUNCATE = 3;
 const HistoryVersionSummary = forwardRef(({ version, selected, className, ...props }, forwardedRef) => {

package/dist/components/HistoryVersionSummary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryVersionSummary.mjs","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { classNames } from \"../utils/class-names\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={classNames(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAYA,MAAM,gBAAmB,GAAA,CAAA,CAAA;AAcZ,MAAA,qBAAA,GAAwB,WAGnC,CAAC,EAAE,SAAS,QAAU,EAAA,SAAA,EAAA,GAAc,KAAM,EAAA,EAAG,YAAiB,KAAA;AAC9D,EAAA,MAAM,IAAI,YAAa,EAAA,CAAA;AAEvB,EAAA,uBACG,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,GAAG,KAAA;AAAA,IACJ,SAAA,EAAW,UAAW,CAAA,oCAAA,EAAsC,SAAS,CAAA;AAAA,IACrE,GAAK,EAAA,YAAA;AAAA,IACL,eAAA,EAAe,WAAW,EAAK,GAAA,KAAA,CAAA;AAAA,IAE/B,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,SAAA,EAAA;AAAA,QACC,QAAQ,CAAE,CAAA,MAAA;AAAA,QACV,MAAM,OAAQ,CAAA,SAAA;AAAA,QACd,SAAU,EAAA,yCAAA;AAAA,OACZ,CAAA;AAAA,sBACC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAU,EAAA,oCAAA;AAAA,QACd,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,QAAQ,OAAQ,CAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,2BAC1B,GAAA,CAAA,IAAA,EAAA;AAAA,YAAqB,QAAQ,MAAO,CAAA,EAAA;AAAA,YAAI,WAAW,EAAA,IAAA;AAAA,WAAzC,EAAA,MAAA,CAAO,EAAmC,CACtD,CAAA;AAAA,UACD,iBAAiB,CAAE,CAAA,oBAAA;AAAA,UACnB,QAAU,EAAA,gBAAA;AAAA,UACV,QAAQ,CAAE,CAAA,MAAA;AAAA,SACZ,CAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"HistoryVersionSummary.mjs","sources":["../../src/components/HistoryVersionSummary.tsx"],"sourcesContent":["\"use client\";\n\nimport type { HistoryVersion } from \"@liveblocks/core\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { useOverrides } from \"../overrides\";\nimport { Timestamp } from \"../primitives\";\nimport { classNames } from \"../utils/class-names\";\nimport { List } from \"./internal/List\";\nimport { User } from \"./internal/User\";\n\nconst AUTHORS_TRUNCATE = 3;\n\nexport interface HistoryVersionSummaryProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  version: HistoryVersion;\n  selected?: boolean;\n}\n\n/**\n * Displays some information about a version.\n *\n * @example\n * <HistoryVersionSummary version={version} />\n */\nexport const HistoryVersionSummary = forwardRef<\n  HTMLButtonElement,\n  HistoryVersionSummaryProps\n>(({ version, selected, className, ...props }, forwardedRef) => {\n  const $ = useOverrides();\n\n  return (\n    <button\n      {...props}\n      className={classNames(\"lb-root lb-history-version-summary\", className)}\n      ref={forwardedRef}\n      data-selected={selected ? \"\" : undefined}\n    >\n      <Timestamp\n        locale={$.locale}\n        date={version.createdAt}\n        className=\"lb-date lb-history-version-summary-date\"\n      />\n      <span className=\"lb-history-version-summary-authors\">\n        <List\n          values={version.authors.map((author) => (\n            <User key={author.id} userId={author.id} replaceSelf />\n          ))}\n          formatRemaining={$.LIST_REMAINING_USERS}\n          truncate={AUTHORS_TRUNCATE}\n          locale={$.locale}\n        />\n      </span>\n    </button>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;AAAA;AAYA;AAca;AAIX;AAEA;AACG;AACK;AACiE;AAChE;AAC0B;AAE/B;AAAC;AACW;AACI;AACJ;AACZ;AACC;AAAe;AACb;AAEI;AAAoC;AAAe;AACrD;AACkB;AACT;AACA;AACZ;AACF;AAAA;AAGN;;"}

package/dist/components/HistoryVersionSummaryList.js

@@ -1,9 +1,11 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var classNames = require('../utils/class-names.js');
 
+
 const HistoryVersionSummaryList = react.forwardRef(({ children, className, ...props }, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx("ol", {
     className: classNames.classNames(

package/dist/components/HistoryVersionSummaryList.js.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryVersionSummaryList.js","sources":["../../src/components/HistoryVersionSummaryList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Children, forwardRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\n\nexport type HistoryVersionSummaryListProps = ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * Displays versions summaries as a list.\n *\n * @example\n * <HistoryVersionSummaryList>\n *   {versions.map((version) => (\n *     <HistoryVersionSummary key={version.id} version={version} />\n *   ))}\n * </HistoryVersionSummaryList>\n */\nexport const HistoryVersionSummaryList = forwardRef<\n  HTMLOListElement,\n  HistoryVersionSummaryListProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\n        \"lb-root lb-history-version-summary-list\",\n        className\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-history-version-summary-list-item\">\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n});\n"],"names":["forwardRef","jsx","classNames"],"mappings":";;;;;;AAmBa,MAAA,yBAAA,GAA4BA,iBAGvC,CAAC,EAAE,UAAU,SAAc,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACrD,EAAA,uBACGC,cAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAAC,qBAAA;AAAA,MACT,yCAAA;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,KAAA;AAAA,IACJ,GAAK,EAAA,YAAA;AAAA,IAEJ,yBAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAA,EAAO,0BAC7BD,cAAA,CAAA,IAAA,EAAA;AAAA,MAAe,SAAU,EAAA,sCAAA;AAAA,MACvB,QAAA,EAAA,KAAA;AAAA,KAAA,EADM,KAET,CACD,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"HistoryVersionSummaryList.js","sources":["../../src/components/HistoryVersionSummaryList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Children, forwardRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\n\nexport type HistoryVersionSummaryListProps = ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * Displays versions summaries as a list.\n *\n * @example\n * <HistoryVersionSummaryList>\n *   {versions.map((version) => (\n *     <HistoryVersionSummary key={version.id} version={version} />\n *   ))}\n * </HistoryVersionSummaryList>\n */\nexport const HistoryVersionSummaryList = forwardRef<\n  HTMLOListElement,\n  HistoryVersionSummaryListProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\n        \"lb-root lb-history-version-summary-list\",\n        className\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-history-version-summary-list-item\">\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAAA;AAmBa;AAIX;AACG;AACY;AACT;AACA;AACF;AACI;AACC;AAGF;AAAyB;AACvB;AAEJ;AAGP;;"}

package/dist/components/HistoryVersionSummaryList.mjs

@@ -1,7 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, Children } from 'react';
 import { classNames } from '../utils/class-names.mjs';
 
+
 const HistoryVersionSummaryList = forwardRef(({ children, className, ...props }, forwardedRef) => {
   return /* @__PURE__ */ jsx("ol", {
     className: classNames(

package/dist/components/HistoryVersionSummaryList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryVersionSummaryList.mjs","sources":["../../src/components/HistoryVersionSummaryList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Children, forwardRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\n\nexport type HistoryVersionSummaryListProps = ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * Displays versions summaries as a list.\n *\n * @example\n * <HistoryVersionSummaryList>\n *   {versions.map((version) => (\n *     <HistoryVersionSummary key={version.id} version={version} />\n *   ))}\n * </HistoryVersionSummaryList>\n */\nexport const HistoryVersionSummaryList = forwardRef<\n  HTMLOListElement,\n  HistoryVersionSummaryListProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\n        \"lb-root lb-history-version-summary-list\",\n        className\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-history-version-summary-list-item\">\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;AAmBa,MAAA,yBAAA,GAA4B,WAGvC,CAAC,EAAE,UAAU,SAAc,EAAA,GAAA,KAAA,IAAS,YAAiB,KAAA;AACrD,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAA,UAAA;AAAA,MACT,yCAAA;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,KAAA;AAAA,IACJ,GAAK,EAAA,YAAA;AAAA,IAEJ,mBAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAA,EAAO,0BAC7B,GAAA,CAAA,IAAA,EAAA;AAAA,MAAe,SAAU,EAAA,sCAAA;AAAA,MACvB,QAAA,EAAA,KAAA;AAAA,KAAA,EADM,KAET,CACD,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"HistoryVersionSummaryList.mjs","sources":["../../src/components/HistoryVersionSummaryList.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Children, forwardRef } from \"react\";\n\nimport { classNames } from \"../utils/class-names\";\n\nexport type HistoryVersionSummaryListProps = ComponentPropsWithoutRef<\"ol\">;\n\n/**\n * Displays versions summaries as a list.\n *\n * @example\n * <HistoryVersionSummaryList>\n *   {versions.map((version) => (\n *     <HistoryVersionSummary key={version.id} version={version} />\n *   ))}\n * </HistoryVersionSummaryList>\n */\nexport const HistoryVersionSummaryList = forwardRef<\n  HTMLOListElement,\n  HistoryVersionSummaryListProps\n>(({ children, className, ...props }, forwardedRef) => {\n  return (\n    <ol\n      className={classNames(\n        \"lb-root lb-history-version-summary-list\",\n        className\n      )}\n      {...props}\n      ref={forwardedRef}\n    >\n      {Children.map(children, (child, index) => (\n        <li key={index} className=\"lb-history-version-summary-list-item\">\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n});\n"],"names":[],"mappings":";;;;;AAAA;AAmBa;AAIX;AACG;AACY;AACT;AACA;AACF;AACI;AACC;AAGF;AAAyB;AACvB;AAEJ;AAGP;;"}

package/dist/components/InboxNotification.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
@@ -26,6 +27,7 @@ var Tooltip = require('./internal/Tooltip.js');
 var User = require('./internal/User.js');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 
+
 const InboxNotificationLayout = react.forwardRef(
   ({
     inboxNotification,