@liveblocks/react-ui 3.15.0-components1 → 3.15.0-thread2

package/dist/primitives/Composer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/primitives/Composer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type CommentAttachment,\n  type CommentBody,\n  type CommentLocalAttachment,\n  createCommentAttachmentId,\n  type EventSource,\n  makeEventSource,\n  MENTION_CHARACTER,\n  type MentionData,\n  sanitizeUrl,\n} from \"@liveblocks/core\";\nimport { useRoom } from \"@liveblocks/react\";\nimport {\n  useClientOrNull,\n  useLayoutEffect,\n  useMentionSuggestions,\n  useResolveMentionSuggestions,\n  useSyncSource,\n} from \"@liveblocks/react/_private\";\nimport { Slot as SlotPrimitive, Toggle as TogglePrimitive } from \"radix-ui\";\nimport type {\n  AriaAttributes,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  Descendant as SlateDescendant,\n  Element as SlateElement,\n} from \"slate\";\nimport {\n  createEditor,\n  Editor as SlateEditor,\n  insertText as insertSlateText,\n  Range as SlateRange,\n  Transforms as SlateTransforms,\n} from \"slate\";\nimport { withHistory } from \"slate-history\";\nimport type {\n  RenderElementProps,\n  RenderElementSpecificProps,\n  RenderLeafSpecificProps,\n  RenderPlaceholderProps,\n} from \"slate-react\";\nimport {\n  Editable,\n  ReactEditor,\n  Slate,\n  useSelected,\n  useSlateStatic,\n  withReact,\n} from \"slate-react\";\n\nimport { useCurrentUserId } from \"../../shared\";\nimport type {\n  ComposerBody as ComposerBodyData,\n  ComposerBodyAutoLink,\n  ComposerBodyCustomLink,\n  ComposerBodyMark,\n  ComposerBodyMarks,\n  ComposerBodyMention,\n  ComposerBodyText,\n} from \"../../types\";\nimport { isKey } from \"../../utils/is-key\";\nimport { Persist, useAnimationPersist, usePersist } from \"../../utils/Persist\";\nimport { Portal } from \"../../utils/Portal\";\nimport { requestSubmit } from \"../../utils/request-submit\";\nimport { useIndex } from \"../../utils/use-index\";\nimport { useInitial } from \"../../utils/use-initial\";\nimport { useObservable } from \"../../utils/use-observable\";\nimport { usePreResolveUser } from \"../../utils/use-pre-resolve-user\";\nimport { useRefs } from \"../../utils/use-refs\";\nimport { withEmptyClearFormatting } from \"../slate/plugins/empty-clear-formatting\";\nimport { withNormalize } from \"../slate/plugins/normalize\";\nimport { getDOMRange } from \"../slate/utils/get-dom-range\";\nimport { isEmpty as isEditorEmpty } from \"../slate/utils/is-empty\";\nimport {\n  getComposerBodyMarks,\n  leaveMarkEdge,\n  toggleMark as toggleEditorMark,\n} from \"../slate/utils/marks\";\nimport {\n  ComposerAttachmentsContext,\n  ComposerContext,\n  ComposerEditorContext,\n  ComposerFloatingToolbarContext,\n  ComposerSuggestionsContext,\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n  useComposerFloatingToolbarContext,\n  useComposerSuggestionsContext,\n} from \"./contexts\";\nimport { withAutoFormatting } from \"./slate/plugins/auto-formatting\";\nimport { withAutoLinks } from \"./slate/plugins/auto-links\";\nimport { withCustomLinks } from \"./slate/plugins/custom-links\";\nimport type { MentionDraft } from \"./slate/plugins/mentions\";\nimport {\n  getMentionDraftAtSelection,\n  insertMention,\n  insertMentionCharacter,\n  withMentions,\n} from \"./slate/plugins/mentions\";\nimport { withPaste } from \"./slate/plugins/paste\";\nimport type {\n  ComposerAttachFilesProps,\n  ComposerAttachmentsDropAreaProps,\n  ComposerEditorComponents,\n  ComposerEditorElementProps,\n  ComposerEditorFloatingToolbarWrapperProps,\n  ComposerEditorLinkWrapperProps,\n  ComposerEditorMentionSuggestionsWrapperProps,\n  ComposerEditorMentionWrapperProps,\n  ComposerEditorProps,\n  ComposerFloatingToolbarProps,\n  ComposerFormProps,\n  ComposerLinkProps,\n  ComposerMarkToggleProps,\n  ComposerMentionProps,\n  ComposerSubmitProps,\n  ComposerSuggestionsListItemProps,\n  ComposerSuggestionsListProps,\n  ComposerSuggestionsProps,\n  FloatingPosition,\n} from \"./types\";\nimport {\n  commentBodyToComposerBody,\n  composerBodyToCommentBody,\n  getSideAndAlignFromFloatingPlacement,\n  useComposerAttachmentsDropArea,\n  useComposerAttachmentsManager,\n  useContentZIndex,\n  useFloatingWithOptions,\n} from \"./utils\";\n\nconst MENTION_SUGGESTIONS_POSITION: FloatingPosition = \"top\";\n\nconst FLOATING_TOOLBAR_POSITION: FloatingPosition = \"top\";\n\nconst COMPOSER_MENTION_NAME = \"ComposerMention\";\nconst COMPOSER_LINK_NAME = \"ComposerLink\";\nconst COMPOSER_FLOATING_TOOLBAR_NAME = \"ComposerFloatingToolbar\";\nconst COMPOSER_SUGGESTIONS_NAME = \"ComposerSuggestions\";\nconst COMPOSER_SUGGESTIONS_LIST_NAME = \"ComposerSuggestionsList\";\nconst COMPOSER_SUGGESTIONS_LIST_ITEM_NAME = \"ComposerSuggestionsListItem\";\nconst COMPOSER_SUBMIT_NAME = \"ComposerSubmit\";\nconst COMPOSER_EDITOR_NAME = \"ComposerEditor\";\nconst COMPOSER_ATTACH_FILES_NAME = \"ComposerAttachFiles\";\nconst COMPOSER_ATTACHMENTS_DROP_AREA_NAME = \"ComposerAttachmentsDropArea\";\nconst COMPOSER_MARK_TOGGLE_NAME = \"ComposerMarkToggle\";\nconst COMPOSER_FORM_NAME = \"ComposerForm\";\n\nconst emptyCommentBody: CommentBody = {\n  version: 1,\n  content: [{ type: \"paragraph\", children: [{ text: \"\" }] }],\n};\n\nfunction createComposerEditor({\n  createAttachments,\n  pasteFilesAsAttachments,\n}: {\n  createAttachments: (files: File[]) => void;\n  pasteFilesAsAttachments?: boolean;\n}) {\n  return withNormalize(\n    withMentions(\n      withCustomLinks(\n        withAutoLinks(\n          withAutoFormatting(\n            withEmptyClearFormatting(\n              withPaste(withHistory(withReact(createEditor())), {\n                createAttachments,\n                pasteFilesAsAttachments,\n              })\n            )\n          )\n        )\n      )\n    )\n  );\n}\n\nfunction ComposerEditorMentionWrapper({\n  Mention,\n  attributes,\n  children,\n  element,\n}: ComposerEditorMentionWrapperProps) {\n  const isSelected = useSelected();\n  const { children: _, ...mention } = element;\n\n  return (\n    <span {...attributes}>\n      {element.id ? (\n        <Mention mention={mention} isSelected={isSelected} />\n      ) : null}\n      {children}\n    </span>\n  );\n}\n\nfunction ComposerEditorLinkWrapper({\n  Link,\n  attributes,\n  element,\n  children,\n}: ComposerEditorLinkWrapperProps) {\n  const href = useMemo(() => sanitizeUrl(element.url) ?? \"\", [element.url]);\n\n  return (\n    <span {...attributes}>\n      <Link href={href}>{children}</Link>\n    </span>\n  );\n}\n\nfunction ComposerEditorMentionSuggestionsWrapper({\n  id,\n  itemId,\n  mentions,\n  selectedMentionId,\n  setSelectedMentionId,\n  mentionDraft,\n  setMentionDraft,\n  onItemSelect,\n  position = MENTION_SUGGESTIONS_POSITION,\n  dir,\n  MentionSuggestions,\n}: ComposerEditorMentionSuggestionsWrapperProps) {\n  const editor = useSlateStatic();\n  const { onEditorChange } = useComposerEditorContext();\n  const { isFocused } = useComposer();\n  const [contentRef, contentZIndex] = useContentZIndex();\n  const isOpen =\n    isFocused && mentionDraft?.range !== undefined && mentions !== undefined;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    isPositioned,\n    placement,\n    x,\n    y,\n    update,\n    elements,\n  } = useFloatingWithOptions({\n    position,\n    dir,\n    alignment: \"start\",\n    open: isOpen,\n  });\n\n  useObservable(onEditorChange, () => {\n    setMentionDraft(getMentionDraftAtSelection(editor));\n  });\n\n  useLayoutEffect(() => {\n    if (!mentionDraft) {\n      setReference(null);\n\n      return;\n    }\n\n    const domRange = getDOMRange(editor, mentionDraft.range);\n    setReference(domRange ?? null);\n  }, [setReference, editor, mentionDraft]);\n\n  // Manually update the placement when the number of suggestions changes\n  // This can prevent the list of suggestions from scrolling instead of moving to the other placement\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    const mentionSuggestions = elements.floating?.firstChild as\n      | HTMLElement\n      | undefined;\n\n    if (!mentionSuggestions) {\n      return;\n    }\n\n    // Force the mention suggestions to grow instead of scrolling\n    mentionSuggestions.style.overflowY = \"visible\";\n    mentionSuggestions.style.maxHeight = \"none\";\n\n    // Trigger a placement update\n    update();\n\n    // Reset the mention suggestions after the placement update\n    const animationFrame = requestAnimationFrame(() => {\n      mentionSuggestions.style.overflowY = \"auto\";\n      mentionSuggestions.style.maxHeight =\n        \"var(--lb-composer-floating-available-height)\";\n    });\n\n    return () => {\n      cancelAnimationFrame(animationFrame);\n    };\n  }, [mentions?.length, isOpen, elements.floating, update]);\n\n  return (\n    <Persist>\n      {isOpen ? (\n        <ComposerSuggestionsContext.Provider\n          value={{\n            id,\n            itemId,\n            selectedValue: selectedMentionId,\n            setSelectedValue: setSelectedMentionId,\n            onItemSelect,\n            placement,\n            dir,\n            ref: contentRef,\n          }}\n        >\n          <Portal\n            ref={setFloating}\n            style={{\n              position: strategy,\n              top: 0,\n              left: 0,\n              transform: isPositioned\n                ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`\n                : \"translate3d(0, -200%, 0)\",\n              minWidth: \"max-content\",\n              zIndex: contentZIndex,\n            }}\n          >\n            <MentionSuggestions\n              mentions={mentions}\n              selectedMentionId={selectedMentionId}\n            />\n          </Portal>\n        </ComposerSuggestionsContext.Provider>\n      ) : null}\n    </Persist>\n  );\n}\n\nfunction ComposerEditorFloatingToolbarWrapper({\n  id,\n  position = FLOATING_TOOLBAR_POSITION,\n  dir,\n  FloatingToolbar,\n  hasFloatingToolbarRange,\n  setHasFloatingToolbarRange,\n}: ComposerEditorFloatingToolbarWrapperProps) {\n  const editor = useSlateStatic();\n  const { onEditorChange } = useComposerEditorContext();\n  const { isFocused } = useComposer();\n  const [contentRef, contentZIndex] = useContentZIndex();\n  const [isPointerDown, setPointerDown] = useState(false);\n  const isOpen = isFocused && !isPointerDown && hasFloatingToolbarRange;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    isPositioned,\n    placement,\n    x,\n    y,\n  } = useFloatingWithOptions({\n    type: \"range\",\n    position,\n    dir,\n    alignment: \"center\",\n    open: isOpen,\n  });\n\n  useLayoutEffect(() => {\n    if (!isFocused) {\n      return;\n    }\n\n    const handlePointerDown = () => setPointerDown(true);\n    const handlePointerUp = () => setPointerDown(false);\n\n    document.addEventListener(\"pointerdown\", handlePointerDown);\n    document.addEventListener(\"pointerup\", handlePointerUp);\n\n    return () => {\n      document.removeEventListener(\"pointerdown\", handlePointerDown);\n      document.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n  }, [isFocused]);\n\n  useObservable(onEditorChange, () => {\n    // Detach from previous selection range (if any) to avoid sudden jumps\n    setReference(null);\n\n    // Then, wait for the next render to ensure the selection is updated\n    requestAnimationFrame(() => {\n      const domSelection = window.getSelection();\n\n      // Finally, show the toolbar if there's a selection range\n      if (\n        !editor.selection ||\n        SlateRange.isCollapsed(editor.selection) ||\n        !domSelection ||\n        !domSelection.rangeCount\n      ) {\n        setHasFloatingToolbarRange(false);\n        setReference(null);\n      } else {\n        setHasFloatingToolbarRange(true);\n\n        const domRange = domSelection.getRangeAt(0);\n        setReference(domRange);\n      }\n    });\n  });\n\n  return (\n    <Persist>\n      {isOpen ? (\n        <ComposerFloatingToolbarContext.Provider\n          value={{\n            id,\n            placement,\n            dir,\n            ref: contentRef,\n          }}\n        >\n          <Portal\n            ref={setFloating}\n            style={{\n              position: strategy,\n              top: 0,\n              left: 0,\n              transform: isPositioned\n                ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`\n                : \"translate3d(0, -200%, 0)\",\n              minWidth: \"max-content\",\n              zIndex: contentZIndex,\n            }}\n          >\n            <FloatingToolbar />\n          </Portal>\n        </ComposerFloatingToolbarContext.Provider>\n      ) : null}\n    </Persist>\n  );\n}\n\n/**\n * Displays a floating toolbar attached to the selection within `Composer.Editor`.\n *\n * @example\n * <Composer.FloatingToolbar>\n *   <Composer.MarkToggle mark=\"bold\">Bold</Composer.MarkToggle>\n *   <Composer.MarkToggle mark=\"italic\">Italic</Composer.MarkToggle>\n * </Composer.FloatingToolbar>\n */\nconst ComposerFloatingToolbar = forwardRef<\n  HTMLDivElement,\n  ComposerFloatingToolbarProps\n>(({ children, onPointerDown, style, asChild, ...props }, forwardedRef) => {\n  const [isPresent] = usePersist();\n  const ref = useRef<HTMLDivElement>(null);\n  const {\n    id,\n    ref: contentRef,\n    placement,\n    dir,\n  } = useComposerFloatingToolbarContext(COMPOSER_FLOATING_TOOLBAR_NAME);\n  const mergedRefs = useRefs(forwardedRef, contentRef, ref);\n  const [side, align] = useMemo(\n    () => getSideAndAlignFromFloatingPlacement(placement),\n    [placement]\n  );\n  const Component = asChild ? SlotPrimitive.Slot : \"div\";\n  useAnimationPersist(ref);\n\n  const handlePointerDown = useCallback(\n    (event: PointerEvent<HTMLDivElement>) => {\n      onPointerDown?.(event);\n\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [onPointerDown]\n  );\n\n  return (\n    <Component\n      dir={dir}\n      role=\"toolbar\"\n      id={id}\n      aria-label=\"Floating toolbar\"\n      {...props}\n      onPointerDown={handlePointerDown}\n      data-state={isPresent ? \"open\" : \"closed\"}\n      data-side={side}\n      data-align={align}\n      style={{\n        display: \"flex\",\n        flexDirection: \"row\",\n        maxWidth: \"var(--lb-composer-floating-available-width)\",\n        overflowX: \"auto\",\n        ...style,\n      }}\n      ref={mergedRefs}\n    >\n      {children}\n    </Component>\n  );\n});\n\nfunction ComposerEditorElement({\n  Mention,\n  Link,\n  ...props\n}: ComposerEditorElementProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const { attributes, children, element } = props;\n\n  switch (element.type) {\n    case \"mention\":\n      return (\n        <ComposerEditorMentionWrapper\n          Mention={Mention}\n          {...(props as RenderElementSpecificProps<ComposerBodyMention>)}\n        />\n      );\n    case \"auto-link\":\n    case \"custom-link\":\n      return (\n        <ComposerEditorLinkWrapper\n          Link={Link}\n          {...(props as RenderElementSpecificProps<\n            ComposerBodyAutoLink | ComposerBodyCustomLink\n          >)}\n        />\n      );\n    case \"paragraph\":\n      return (\n        <p {...attributes} style={{ position: \"relative\" }}>\n          {children}\n        </p>\n      );\n    default:\n      return null;\n  }\n}\n\n// <code><s><em><strong>text</strong></s></em></code>\nfunction ComposerEditorLeaf({\n  attributes,\n  children,\n  leaf,\n}: RenderLeafSpecificProps<ComposerBodyText>) {\n  if (leaf.bold) {\n    children = <strong>{children}</strong>;\n  }\n\n  if (leaf.italic) {\n    children = <em>{children}</em>;\n  }\n\n  if (leaf.strikethrough) {\n    children = <s>{children}</s>;\n  }\n\n  if (leaf.code) {\n    children = <code>{children}</code>;\n  }\n\n  return <span {...attributes}>{children}</span>;\n}\n\nfunction ComposerEditorPlaceholder({\n  attributes,\n  children,\n}: RenderPlaceholderProps) {\n  const { opacity: _opacity, ...style } = attributes.style;\n\n  return (\n    <span {...attributes} style={style} data-placeholder=\"\">\n      {children}\n    </span>\n  );\n}\n\n/**\n * Displays mentions within `Composer.Editor`.\n *\n * @example\n * <Composer.Mention>@{mention.id}</Composer.Mention>\n */\nconst ComposerMention = forwardRef<HTMLSpanElement, ComposerMentionProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? SlotPrimitive.Slot : \"span\";\n    const isSelected = useSelected();\n\n    return (\n      <Component\n        data-selected={isSelected || undefined}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\n/**\n * Displays links within `Composer.Editor`.\n *\n * @example\n * <Composer.Link href={href}>{children}</Composer.Link>\n */\nconst ComposerLink = forwardRef<HTMLAnchorElement, ComposerLinkProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? SlotPrimitive.Slot : \"a\";\n\n    return (\n      <Component\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow\"\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\n/**\n * Contains suggestions within `Composer.Editor`.\n */\nconst ComposerSuggestions = forwardRef<\n  HTMLDivElement,\n  ComposerSuggestionsProps\n>(({ children, style, asChild, ...props }, forwardedRef) => {\n  const [isPresent] = usePersist();\n  const ref = useRef<HTMLDivElement>(null);\n  const {\n    ref: contentRef,\n    placement,\n    dir,\n  } = useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_NAME);\n  const mergedRefs = useRefs(forwardedRef, contentRef, ref);\n  const [side, align] = useMemo(\n    () => getSideAndAlignFromFloatingPlacement(placement),\n    [placement]\n  );\n  const Component = asChild ? SlotPrimitive.Slot : \"div\";\n  useAnimationPersist(ref);\n\n  return (\n    <Component\n      dir={dir}\n      {...props}\n      data-state={isPresent ? \"open\" : \"closed\"}\n      data-side={side}\n      data-align={align}\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        maxHeight: \"var(--lb-composer-floating-available-height)\",\n        overflowY: \"auto\",\n        ...style,\n      }}\n      ref={mergedRefs}\n    >\n      {children}\n    </Component>\n  );\n});\n\n/**\n * Displays a list of suggestions within `Composer.Editor`.\n *\n * @example\n * <Composer.SuggestionsList>\n *   {mentions.map((mention) => (\n *     <Composer.SuggestionsListItem key={mention.id} value={mention.id}>\n *       @{mention.id}\n *     </Composer.SuggestionsListItem>\n *   ))}\n * </Composer.SuggestionsList>\n */\nconst ComposerSuggestionsList = forwardRef<\n  HTMLUListElement,\n  ComposerSuggestionsListProps\n>(({ children, asChild, ...props }, forwardedRef) => {\n  const { id } = useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_NAME);\n  const Component = asChild ? SlotPrimitive.Slot : \"ul\";\n\n  return (\n    <Component\n      role=\"listbox\"\n      id={id}\n      aria-label=\"Suggestions list\"\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </Component>\n  );\n});\n\n/**\n * Displays a suggestion within `Composer.SuggestionsList`.\n *\n * @example\n * <Composer.SuggestionsListItem key={mention.id} value={mention.id}>\n *   @{mention.id}\n * </Composer.SuggestionsListItem>\n */\nconst ComposerSuggestionsListItem = forwardRef<\n  HTMLLIElement,\n  ComposerSuggestionsListItemProps\n>(\n  (\n    {\n      value,\n      children,\n      onPointerMove,\n      onPointerDown,\n      onClick,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLLIElement>(null);\n    const mergedRefs = useRefs(forwardedRef, ref);\n    const { selectedValue, setSelectedValue, itemId, onItemSelect } =\n      useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_ITEM_NAME);\n    const Component = asChild ? SlotPrimitive.Slot : \"li\";\n    const isSelected = useMemo(\n      () => selectedValue === value,\n      [selectedValue, value]\n    );\n    // TODO: Support props.id if provided, it will need to be sent up to Composer.Editor to use it in aria-activedescendant\n    const id = useMemo(() => itemId(value), [itemId, value]);\n\n    useEffect(() => {\n      if (ref?.current && isSelected) {\n        ref.current.scrollIntoView({ block: \"nearest\" });\n      }\n    }, [isSelected]);\n\n    const handlePointerMove = useCallback(\n      (event: PointerEvent<HTMLLIElement>) => {\n        onPointerMove?.(event);\n\n        if (!event.isDefaultPrevented()) {\n          setSelectedValue(value);\n        }\n      },\n      [onPointerMove, setSelectedValue, value]\n    );\n\n    const handlePointerDown = useCallback(\n      (event: PointerEvent<HTMLLIElement>) => {\n        onPointerDown?.(event);\n\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      [onPointerDown]\n    );\n\n    const handleClick = useCallback(\n      (event: MouseEvent<HTMLLIElement>) => {\n        onClick?.(event);\n\n        const wasDefaultPrevented = event.isDefaultPrevented();\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (!wasDefaultPrevented) {\n          onItemSelect(value);\n        }\n      },\n      [onClick, onItemSelect, value]\n    );\n\n    return (\n      <Component\n        role=\"option\"\n        id={id}\n        data-selected={isSelected || undefined}\n        aria-selected={isSelected || undefined}\n        onPointerMove={handlePointerMove}\n        onPointerDown={handlePointerDown}\n        onClick={handleClick}\n        {...props}\n        ref={mergedRefs}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nconst defaultEditorComponents: ComposerEditorComponents = {\n  Link: ({ href, children }) => {\n    return <ComposerLink href={href}>{children}</ComposerLink>;\n  },\n  Mention: ({ mention }) => {\n    return (\n      <ComposerMention>\n        {MENTION_CHARACTER}\n        {mention.id}\n      </ComposerMention>\n    );\n  },\n  MentionSuggestions: ({ mentions }) => {\n    return mentions.length > 0 ? (\n      <ComposerSuggestions>\n        <ComposerSuggestionsList>\n          {mentions.map((mention) => (\n            <ComposerSuggestionsListItem key={mention.id} value={mention.id}>\n              {mention.id}\n            </ComposerSuggestionsListItem>\n          ))}\n        </ComposerSuggestionsList>\n      </ComposerSuggestions>\n    ) : null;\n  },\n};\n\n/**\n * Displays the composer's editor.\n *\n * @example\n * <Composer.Editor placeholder=\"Write a comment…\" />\n */\nconst ComposerEditor = forwardRef<HTMLDivElement, ComposerEditorProps>(\n  (\n    {\n      defaultValue,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      disabled,\n      autoFocus,\n      components,\n      dir,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const client = useClientOrNull();\n    const { editor, validate, setFocused, onEditorChange, roomId } =\n      useComposerEditorContext();\n    const {\n      submit,\n      focus,\n      blur,\n      select,\n      canSubmit,\n      isDisabled: isComposerDisabled,\n      isFocused,\n    } = useComposer();\n    const currentUserId = useCurrentUserId();\n    const preResolveUser = usePreResolveUser();\n    const isDisabled = isComposerDisabled || disabled;\n    const initialBody = useInitial(defaultValue ?? emptyCommentBody);\n    const initialEditorValue = useMemo(() => {\n      return commentBodyToComposerBody(initialBody);\n    }, [initialBody]);\n    const { Link, Mention, MentionSuggestions, FloatingToolbar } = useMemo(\n      () => ({ ...defaultEditorComponents, ...components }),\n      [components]\n    );\n\n    const [hasFloatingToolbarRange, setHasFloatingToolbarRange] =\n      useState(false);\n    // If used with LiveblocksProvider but without resolveMentionSuggestions,\n    // we can skip the mention suggestions logic entirely\n    const resolveMentionSuggestions = useResolveMentionSuggestions();\n    const hasResolveMentionSuggestions = client\n      ? resolveMentionSuggestions\n      : true;\n    const [mentionDraft, setMentionDraft] = useState<MentionDraft>();\n    const mentionSuggestions = useMentionSuggestions(\n      roomId,\n      mentionDraft?.text\n    );\n    const [\n      selectedMentionSuggestionIndex,\n      setPreviousSelectedMentionSuggestionIndex,\n      setNextSelectedMentionSuggestionIndex,\n      setSelectedMentionSuggestionIndex,\n    ] = useIndex(0, mentionSuggestions?.length ?? 0);\n    const id = useId();\n    const floatingToolbarId = `liveblocks-floating-toolbar-${id}`;\n    const suggestionsListId = `liveblocks-suggestions-list-${id}`;\n    const suggestionsListItemId = useCallback(\n      (mentionId?: string) =>\n        mentionId\n          ? `liveblocks-suggestions-list-item-${id}-${mentionId}`\n          : undefined,\n      [id]\n    );\n\n    const renderElement = useCallback(\n      (props: RenderElementProps) => {\n        return (\n          <ComposerEditorElement Mention={Mention} Link={Link} {...props} />\n        );\n      },\n      [Link, Mention]\n    );\n\n    const handleChange = useCallback(\n      (value: SlateDescendant[]) => {\n        validate(value as SlateElement[]);\n\n        // Our multi-component setup requires us to instantiate the editor in `Composer.Form`\n        // but we can only listen to changes here in `Composer.Editor` via `Slate`, so we use\n        // an event source to notify `Composer.Form` of changes.\n        onEditorChange.notify();\n      },\n      [validate, onEditorChange]\n    );\n\n    const createMention = useCallback(\n      (mention?: MentionData) => {\n        if (!mentionDraft || !mention) {\n          return;\n        }\n\n        SlateTransforms.select(editor, mentionDraft.range);\n        insertMention(editor, mention);\n        setMentionDraft(undefined);\n        setSelectedMentionSuggestionIndex(0);\n      },\n      [editor, mentionDraft, setSelectedMentionSuggestionIndex]\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLDivElement>) => {\n        onKeyDown?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        // Allow leaving marks with ArrowLeft\n        if (isKey(event, \"ArrowLeft\")) {\n          leaveMarkEdge(editor, \"start\");\n        }\n\n        // Allow leaving marks with ArrowRight\n        if (isKey(event, \"ArrowRight\")) {\n          leaveMarkEdge(editor, \"end\");\n        }\n\n        if (mentionDraft && mentionSuggestions?.length) {\n          // Select the next mention suggestion on ArrowDown\n          if (isKey(event, \"ArrowDown\")) {\n            event.preventDefault();\n            setNextSelectedMentionSuggestionIndex();\n          }\n\n          // Select the previous mention suggestion on ArrowUp\n          if (isKey(event, \"ArrowUp\")) {\n            event.preventDefault();\n            setPreviousSelectedMentionSuggestionIndex();\n          }\n\n          // Create a mention on Enter/Tab\n          if (isKey(event, \"Enter\") || isKey(event, \"Tab\")) {\n            event.preventDefault();\n\n            const mention =\n              mentionSuggestions?.[selectedMentionSuggestionIndex];\n            createMention(mention);\n          }\n\n          // Close the suggestions on Escape\n          if (isKey(event, \"Escape\")) {\n            event.preventDefault();\n            setMentionDraft(undefined);\n            setSelectedMentionSuggestionIndex(0);\n          }\n        } else {\n          if (hasFloatingToolbarRange) {\n            // Close the floating toolbar on Escape\n            if (isKey(event, \"Escape\")) {\n              event.preventDefault();\n              setHasFloatingToolbarRange(false);\n            }\n          }\n\n          // Blur the editor on Escape\n          if (isKey(event, \"Escape\")) {\n            blur();\n          }\n\n          // Submit the editor on Enter\n          if (isKey(event, \"Enter\", { shift: false })) {\n            // Even if submitting is not possible, don't do anything else on Enter. (e.g. creating a new line)\n            event.preventDefault();\n\n            if (canSubmit) {\n              submit();\n            }\n          }\n\n          // Create a new line on Shift + Enter\n          if (isKey(event, \"Enter\", { shift: true })) {\n            event.preventDefault();\n            editor.insertBreak();\n          }\n\n          // Toggle bold on Command/Control + B\n          if (isKey(event, \"b\", { mod: true })) {\n            event.preventDefault();\n            toggleEditorMark(editor, \"bold\");\n          }\n\n          // Toggle italic on Command/Control + I\n          if (isKey(event, \"i\", { mod: true })) {\n            event.preventDefault();\n            toggleEditorMark(editor, \"italic\");\n          }\n\n          // Toggle strikethrough on Command/Control + Shift + S\n          if (isKey(event, \"s\", { mod: true, shift: true })) {\n            event.preventDefault();\n            toggleEditorMark(editor, \"strikethrough\");\n          }\n\n          // Toggle code on Command/Control + E\n          if (isKey(event, \"e\", { mod: true })) {\n            event.preventDefault();\n            toggleEditorMark(editor, \"code\");\n          }\n        }\n      },\n      [\n        onKeyDown,\n        mentionDraft,\n        mentionSuggestions,\n        hasFloatingToolbarRange,\n        editor,\n        setNextSelectedMentionSuggestionIndex,\n        setPreviousSelectedMentionSuggestionIndex,\n        selectedMentionSuggestionIndex,\n        createMention,\n        setSelectedMentionSuggestionIndex,\n        blur,\n        canSubmit,\n        submit,\n      ]\n    );\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLDivElement>) => {\n        onFocus?.(event);\n\n        if (!event.isDefaultPrevented()) {\n          setFocused(true);\n\n          // Pre-resolve the current user's info the first time\n          // they focus a composer editor.\n          if (currentUserId) {\n            preResolveUser(currentUserId);\n          }\n        }\n      },\n      [onFocus, setFocused, currentUserId, preResolveUser]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLDivElement>) => {\n        onBlur?.(event);\n\n        if (!event.isDefaultPrevented()) {\n          setFocused(false);\n        }\n      },\n      [onBlur, setFocused]\n    );\n\n    const selectedMention =\n      mentionSuggestions?.[selectedMentionSuggestionIndex];\n    const selectedMentionId = selectedMention?.id;\n    const setSelectedMentionId = useCallback(\n      (mentionId: string) => {\n        const index = mentionSuggestions?.findIndex(\n          (mention) => mention.id === mentionId\n        );\n\n        if (index !== undefined && index >= 0) {\n          setSelectedMentionSuggestionIndex(index);\n        }\n      },\n      [setSelectedMentionSuggestionIndex, mentionSuggestions]\n    );\n\n    const additionalProps: AriaAttributes = useMemo(\n      () =>\n        mentionDraft\n          ? {\n              role: \"combobox\",\n              \"aria-autocomplete\": \"list\",\n              \"aria-expanded\": true,\n              \"aria-controls\": suggestionsListId,\n              \"aria-activedescendant\": suggestionsListItemId(selectedMentionId),\n            }\n          : hasFloatingToolbarRange\n            ? {\n                \"aria-haspopup\": true,\n                \"aria-controls\": floatingToolbarId,\n              }\n            : {},\n      [\n        mentionDraft,\n        suggestionsListId,\n        suggestionsListItemId,\n        selectedMentionId,\n        hasFloatingToolbarRange,\n        floatingToolbarId,\n      ]\n    );\n\n    useImperativeHandle(forwardedRef, () => {\n      return ReactEditor.toDOMNode(editor, editor) as HTMLDivElement;\n    }, [editor]);\n\n    // Manually focus the editor when `autoFocus` is true\n    useLayoutEffect(() => {\n      if (!autoFocus) {\n        return;\n      }\n\n      // `focus` needs to be synchronous to ensure its errors can be caught\n      // but the triggering of `focus` on mount itself can be asynchronous.\n      // This brings back the same timing behavior as Slate's `ReactEditor.focus`\n      // (which uses `setTimeout` internally) while still allowing us to catch errors.\n      const timeout = setTimeout(() => focus(), 0);\n\n      return () => clearTimeout(timeout);\n    }, [autoFocus, editor, focus]);\n\n    // Manually add a selection in the editor if the selection\n    // is still empty after being focused\n    useLayoutEffect(() => {\n      if (isFocused && editor.selection === null) {\n        select();\n      }\n    }, [editor, select, isFocused]);\n\n    const handleMentionSelect = useCallback(\n      (mentionId: string) => {\n        const mention = mentionSuggestions?.find(\n          (mention) => mention.id === mentionId\n        );\n\n        createMention(mention);\n      },\n      [createMention, mentionSuggestions]\n    );\n\n    return (\n      <Slate\n        editor={editor}\n        initialValue={initialEditorValue}\n        onChange={handleChange}\n      >\n        <Editable\n          dir={dir}\n          tabIndex={isDisabled ? -1 : 0}\n          enterKeyHint={mentionDraft ? \"enter\" : \"send\"}\n          autoCapitalize=\"sentences\"\n          aria-label=\"Composer editor\"\n          data-focused={isFocused || undefined}\n          data-disabled={isDisabled || undefined}\n          {...additionalProps}\n          {...props}\n          readOnly={isDisabled}\n          disabled={isDisabled}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          renderElement={renderElement}\n          renderLeaf={ComposerEditorLeaf}\n          renderPlaceholder={ComposerEditorPlaceholder}\n        />\n        {hasResolveMentionSuggestions && (\n          <ComposerEditorMentionSuggestionsWrapper\n            dir={dir}\n            mentionDraft={mentionDraft}\n            setMentionDraft={setMentionDraft}\n            selectedMentionId={selectedMentionId}\n            setSelectedMentionId={setSelectedMentionId}\n            mentions={mentionSuggestions}\n            id={suggestionsListId}\n            itemId={suggestionsListItemId}\n            onItemSelect={handleMentionSelect}\n            MentionSuggestions={MentionSuggestions}\n          />\n        )}\n        {FloatingToolbar && (\n          <ComposerEditorFloatingToolbarWrapper\n            dir={dir}\n            id={floatingToolbarId}\n            hasFloatingToolbarRange={hasFloatingToolbarRange}\n            setHasFloatingToolbarRange={setHasFloatingToolbarRange}\n            FloatingToolbar={FloatingToolbar}\n          />\n        )}\n      </Slate>\n    );\n  }\n);\n\nconst MAX_ATTACHMENTS = 10;\nconst MAX_ATTACHMENT_SIZE = 1024 * 1024 * 1024; // 1 GB\n\nfunction prepareAttachment(file: File): CommentLocalAttachment {\n  return {\n    type: \"localAttachment\",\n    status: \"idle\",\n    id: createCommentAttachmentId(),\n    name: file.name,\n    size: file.size,\n    mimeType: file.type,\n    file,\n  };\n}\n\n/**\n * Surrounds the composer's content and handles submissions.\n *\n * @example\n * <Composer.Form onComposerSubmit={({ body }) => {}}>\n *\t <Composer.Editor />\n *   <Composer.Submit />\n * </Composer.Form>\n */\nconst ComposerForm = forwardRef<HTMLFormElement, ComposerFormProps>(\n  (\n    {\n      children,\n      onSubmit,\n      onComposerSubmit,\n      defaultAttachments = [],\n      pasteFilesAsAttachments,\n      blurOnSubmit = true,\n      preventUnsavedChanges = true,\n      disabled,\n      asChild,\n      roomId: _roomId,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? SlotPrimitive.Slot : \"form\";\n    const [isEmpty, setEmpty] = useState(true);\n    const [isSubmitting, setSubmitting] = useState(false);\n    const [isFocused, setFocused] = useState(false);\n    const room = useRoom({ allowOutsideRoom: true });\n\n    const roomId = _roomId !== undefined ? _roomId : room?.id;\n    if (roomId === undefined) {\n      throw new Error(\"Composer.Form must be a descendant of RoomProvider.\");\n    }\n\n    // Later: Offer as Composer.Form props: { maxAttachments: number; maxAttachmentSize: number; supportedAttachmentMimeTypes: string[]; }\n    const maxAttachments = MAX_ATTACHMENTS;\n    const maxAttachmentSize = MAX_ATTACHMENT_SIZE;\n\n    const {\n      attachments,\n      isUploadingAttachments,\n      addAttachments,\n      removeAttachment,\n      clearAttachments,\n    } = useComposerAttachmentsManager(defaultAttachments, {\n      maxFileSize: maxAttachmentSize,\n      roomId,\n    });\n    const numberOfAttachments = attachments.length;\n    const hasMaxAttachments = numberOfAttachments >= maxAttachments;\n\n    const isDisabled = useMemo(() => {\n      return isSubmitting || disabled === true;\n    }, [isSubmitting, disabled]);\n    const canSubmit = useMemo(() => {\n      return !isEmpty && !isUploadingAttachments;\n    }, [isEmpty, isUploadingAttachments]);\n    const [marks, setMarks] = useState<ComposerBodyMarks>(getComposerBodyMarks);\n\n    const ref = useRef<HTMLFormElement>(null);\n    const mergedRefs = useRefs(forwardedRef, ref);\n    const fileInputRef = useRef<HTMLInputElement>(null);\n    const syncSource = useSyncSource();\n\n    // Mark the composer as a pending update when it has unsubmitted (draft)\n    // text or attachments\n    const isPending = !preventUnsavedChanges\n      ? false\n      : !isEmpty || isUploadingAttachments || attachments.length > 0;\n\n    useEffect(() => {\n      syncSource?.setSyncStatus(\n        isPending ? \"has-local-changes\" : \"synchronized\"\n      );\n    }, [syncSource, isPending]);\n\n    const createAttachments = useCallback(\n      (files: File[]) => {\n        if (!files.length) {\n          return;\n        }\n\n        const numberOfAcceptedFiles = Math.max(\n          0,\n          maxAttachments - numberOfAttachments\n        );\n\n        files.splice(numberOfAcceptedFiles);\n\n        const attachments = files.map((file) => prepareAttachment(file));\n\n        addAttachments(attachments);\n      },\n      [addAttachments, maxAttachments, numberOfAttachments]\n    );\n\n    const createAttachmentsRef = useRef(createAttachments);\n\n    useEffect(() => {\n      createAttachmentsRef.current = createAttachments;\n    }, [createAttachments]);\n\n    const stableCreateAttachments = useCallback((files: File[]) => {\n      createAttachmentsRef.current(files);\n    }, []);\n\n    const editor = useInitial(() =>\n      createComposerEditor({\n        createAttachments: stableCreateAttachments,\n        pasteFilesAsAttachments,\n      })\n    );\n    const onEditorChange = useInitial(makeEventSource) as EventSource<void>;\n\n    const validate = useCallback(\n      (value: SlateElement[]) => {\n        setEmpty(isEditorEmpty(editor, value));\n      },\n      [editor]\n    );\n\n    const submit = useCallback(() => {\n      if (!canSubmit) {\n        return;\n      }\n\n      // We need to wait for the next frame in some cases like when composing diacritics,\n      // we want any native handling to be done first while still being handled on `keydown`.\n      requestAnimationFrame(() => {\n        if (ref.current) {\n          requestSubmit(ref.current);\n        }\n      });\n    }, [canSubmit]);\n\n    const clear = useCallback(() => {\n      SlateTransforms.delete(editor, {\n        at: {\n          anchor: SlateEditor.start(editor, []),\n          focus: SlateEditor.end(editor, []),\n        },\n      });\n    }, [editor]);\n\n    const select = useCallback(() => {\n      SlateTransforms.select(editor, SlateEditor.end(editor, []));\n    }, [editor]);\n\n    const focus = useCallback(\n      (resetSelection = true) => {\n        try {\n          // Slate's `ReactEditor.focus` method can use `setTimeout` internally\n          // which prevents us from catching errors, so this is a reimplementation.\n          // https://github.com/ianstormtaylor/slate/blob/main/packages/slate-dom/src/plugin/dom-editor.ts\n          if (!ReactEditor.isFocused(editor)) {\n            SlateTransforms.select(\n              editor,\n              resetSelection || !editor.selection\n                ? SlateEditor.end(editor, [])\n                : editor.selection\n            );\n\n            const element = ReactEditor.toDOMNode(editor, editor);\n\n            if (editor.selection) {\n              const domSelection = window.getSelection();\n              const domRange = getDOMRange(editor, editor.selection);\n\n              if (domRange) {\n                domSelection?.removeAllRanges();\n                domSelection?.addRange(domRange);\n              }\n            }\n\n            element.focus({ preventScroll: true });\n          }\n        } catch {\n          // Slate's DOM-specific methods will throw if the editor's DOM\n          // node no longer exists. This action doesn't make sense on an\n          // unmounted editor so we can safely ignore it.\n        }\n      },\n      [editor]\n    );\n\n    const blur = useCallback(() => {\n      try {\n        ReactEditor.blur(editor);\n      } catch {\n        // Slate's DOM-specific methods will throw if the editor's DOM\n        // node no longer exists. This action doesn't make sense on an\n        // unmounted editor so we can safely ignore it.\n      }\n    }, [editor]);\n\n    const createMention = useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      focus();\n      insertMentionCharacter(editor);\n    }, [disabled, editor, focus]);\n\n    const insertText = useCallback(\n      (text: string) => {\n        if (disabled) {\n          return;\n        }\n\n        focus(false);\n        insertSlateText(editor, text);\n      },\n      [disabled, editor, focus]\n    );\n\n    const attachFiles = useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      if (fileInputRef.current) {\n        fileInputRef.current.click();\n      }\n    }, [disabled]);\n\n    const handleAttachmentsInputChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n          return;\n        }\n\n        if (event.target.files) {\n          createAttachments(Array.from(event.target.files));\n\n          // Reset the input value to allow selecting the same file(s) again\n          event.target.value = \"\";\n        }\n      },\n      [createAttachments, disabled]\n    );\n\n    const onSubmitEnd = useCallback(() => {\n      clear();\n      clearAttachments();\n      setSubmitting(false);\n\n      if (blurOnSubmit) {\n        blur();\n      }\n    }, [blur, blurOnSubmit, clear, clearAttachments]);\n\n    const handleSubmit = useCallback(\n      (event: FormEvent<HTMLFormElement>) => {\n        if (disabled) {\n          return;\n        }\n\n        // In some situations (e.g. pressing Enter while composing diacritics), it's possible\n        // for the form to be submitted as empty even though we already checked whether the\n        // editor was empty when handling the key press.\n        const isEmpty = isEditorEmpty(editor, editor.children);\n\n        // We even prevent the user's `onSubmit` handler from being called if the editor is empty.\n        if (isEmpty) {\n          event.preventDefault();\n\n          return;\n        }\n\n        onSubmit?.(event);\n\n        if (!onComposerSubmit || event.isDefaultPrevented()) {\n          event.preventDefault();\n\n          return;\n        }\n\n        const body = composerBodyToCommentBody(\n          editor.children as ComposerBodyData\n        );\n        // Only non-local attachments are included to be submitted.\n        const commentAttachments: CommentAttachment[] = attachments\n          .filter(\n            (attachment) =>\n              attachment.type === \"attachment\" ||\n              (attachment.type === \"localAttachment\" &&\n                attachment.status === \"uploaded\")\n          )\n          .map((attachment) => {\n            return {\n              id: attachment.id,\n              type: \"attachment\",\n              mimeType: attachment.mimeType,\n              size: attachment.size,\n              name: attachment.name,\n            };\n          });\n\n        const promise = onComposerSubmit(\n          { body, attachments: commentAttachments },\n          event\n        );\n\n        event.preventDefault();\n\n        if (promise) {\n          setSubmitting(true);\n          promise.then(onSubmitEnd);\n        } else {\n          onSubmitEnd();\n        }\n      },\n      [disabled, editor, attachments, onComposerSubmit, onSubmit, onSubmitEnd]\n    );\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const toggleMark = useCallback(\n      (mark: ComposerBodyMark) => {\n        toggleEditorMark(editor, mark);\n      },\n      [editor]\n    );\n\n    useObservable(onEditorChange, () => {\n      setMarks(getComposerBodyMarks(editor));\n    });\n\n    return (\n      <ComposerEditorContext.Provider\n        value={{\n          editor,\n          validate,\n          setFocused,\n          onEditorChange,\n          roomId,\n        }}\n      >\n        <ComposerAttachmentsContext.Provider\n          value={{\n            createAttachments,\n            isUploadingAttachments,\n            hasMaxAttachments,\n            maxAttachments,\n            maxAttachmentSize,\n          }}\n        >\n          <ComposerContext.Provider\n            value={{\n              isDisabled,\n              isFocused,\n              isEmpty,\n              canSubmit,\n              submit,\n              clear,\n              select,\n              focus,\n              blur,\n              createMention,\n              insertText,\n              attachments,\n              attachFiles,\n              removeAttachment,\n              toggleMark,\n              marks,\n            }}\n          >\n            <Component {...props} onSubmit={handleSubmit} ref={mergedRefs}>\n              <input\n                type=\"file\"\n                multiple\n                ref={fileInputRef}\n                onChange={handleAttachmentsInputChange}\n                onClick={stopPropagation}\n                tabIndex={-1}\n                style={{ display: \"none\" }}\n              />\n              <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>\n            </Component>\n          </ComposerContext.Provider>\n        </ComposerAttachmentsContext.Provider>\n      </ComposerEditorContext.Provider>\n    );\n  }\n);\n\n/**\n * A button to submit the composer.\n *\n * @example\n * <Composer.Submit>Send</Composer.Submit>\n */\nconst ComposerSubmit = forwardRef<HTMLButtonElement, ComposerSubmitProps>(\n  ({ children, disabled, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? SlotPrimitive.Slot : \"button\";\n    const { canSubmit, isDisabled: isComposerDisabled } = useComposer();\n    const isDisabled = isComposerDisabled || disabled || !canSubmit;\n\n    return (\n      <Component\n        type=\"submit\"\n        {...props}\n        ref={forwardedRef}\n        disabled={isDisabled}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\n/**\n * A button which opens a file picker to create attachments.\n *\n * @example\n * <Composer.AttachFiles>Attach files</Composer.AttachFiles>\n */\nconst ComposerAttachFiles = forwardRef<\n  HTMLButtonElement,\n  ComposerAttachFilesProps\n>(({ children, onClick, disabled, asChild, ...props }, forwardedRef) => {\n  const Component = asChild ? SlotPrimitive.Slot : \"button\";\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const { isDisabled: isComposerDisabled, attachFiles } = useComposer();\n  const isDisabled = isComposerDisabled || hasMaxAttachments || disabled;\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        attachFiles();\n      }\n    },\n    [attachFiles, onClick]\n  );\n\n  return (\n    <Component\n      type=\"button\"\n      {...props}\n      onClick={handleClick}\n      ref={forwardedRef}\n      disabled={isDisabled}\n    >\n      {children}\n    </Component>\n  );\n});\n\n/**\n * A drop area which accepts files to create attachments.\n *\n * @example\n * <Composer.AttachmentsDropArea>\n *   Drop files here\n * </Composer.AttachmentsDropArea>\n */\nconst ComposerAttachmentsDropArea = forwardRef<\n  HTMLDivElement,\n  ComposerAttachmentsDropAreaProps\n>(\n  (\n    {\n      onDragEnter,\n      onDragLeave,\n      onDragOver,\n      onDrop,\n      disabled,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? SlotPrimitive.Slot : \"div\";\n    const { isDisabled: isComposerDisabled } = useComposer();\n    const isDisabled = isComposerDisabled || disabled;\n    const [, dropAreaProps] = useComposerAttachmentsDropArea({\n      onDragEnter,\n      onDragLeave,\n      onDragOver,\n      onDrop,\n      disabled: isDisabled,\n    });\n\n    return (\n      <Component\n        {...dropAreaProps}\n        data-disabled={isDisabled ? \"\" : undefined}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n\n/**\n * A toggle button which toggles a specific text mark.\n *\n * @example\n * <Composer.MarkToggle mark=\"bold\">\n *   Bold\n * </Composer.MarkToggle>\n */\nconst ComposerMarkToggle = forwardRef<\n  HTMLButtonElement,\n  ComposerMarkToggleProps\n>(\n  (\n    {\n      children,\n      mark,\n      onValueChange,\n      onClick,\n      onPointerDown,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? SlotPrimitive.Slot : \"button\";\n    const { marks, toggleMark } = useComposer();\n\n    const handlePointerDown = useCallback(\n      (event: PointerEvent<HTMLButtonElement>) => {\n        onPointerDown?.(event);\n\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      [onPointerDown]\n    );\n\n    const handleClick = useCallback(\n      (event: MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n\n        if (!event.isDefaultPrevented()) {\n          event.preventDefault();\n          event.stopPropagation();\n\n          toggleMark(mark);\n          onValueChange?.(mark);\n        }\n      },\n      [mark, onClick, onValueChange, toggleMark]\n    );\n\n    return (\n      <TogglePrimitive.Root\n        asChild\n        pressed={marks[mark]}\n        onClick={handleClick}\n        onPointerDown={handlePointerDown}\n        {...props}\n      >\n        <Component {...props} ref={forwardedRef}>\n          {children}\n        </Component>\n      </TogglePrimitive.Root>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  ComposerAttachFiles.displayName = COMPOSER_ATTACH_FILES_NAME;\n  ComposerAttachmentsDropArea.displayName = COMPOSER_ATTACHMENTS_DROP_AREA_NAME;\n  ComposerEditor.displayName = COMPOSER_EDITOR_NAME;\n  ComposerFloatingToolbar.displayName = COMPOSER_FLOATING_TOOLBAR_NAME;\n  ComposerForm.displayName = COMPOSER_FORM_NAME;\n  ComposerMention.displayName = COMPOSER_MENTION_NAME;\n  ComposerLink.displayName = COMPOSER_LINK_NAME;\n  ComposerSubmit.displayName = COMPOSER_SUBMIT_NAME;\n  ComposerSuggestions.displayName = COMPOSER_SUGGESTIONS_NAME;\n  ComposerSuggestionsList.displayName = COMPOSER_SUGGESTIONS_LIST_NAME;\n  ComposerSuggestionsListItem.displayName = COMPOSER_SUGGESTIONS_LIST_ITEM_NAME;\n  ComposerMarkToggle.displayName = COMPOSER_MARK_TOGGLE_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as Composer.*\nexport {\n  ComposerAttachFiles as AttachFiles,\n  ComposerAttachmentsDropArea as AttachmentsDropArea,\n  ComposerEditor as Editor,\n  ComposerFloatingToolbar as FloatingToolbar,\n  ComposerForm as Form,\n  ComposerLink as Link,\n  ComposerMarkToggle as MarkToggle,\n  ComposerMention as Mention,\n  ComposerSubmit as Submit,\n  ComposerSuggestions as Suggestions,\n  ComposerSuggestionsList as SuggestionsList,\n  ComposerSuggestionsListItem as SuggestionsListItem,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuJA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAsC;AAC3B;AAEX;AAEA;AAA8B;AAC5B;AAEF;AAIE;AAAO;AACL;AACE;AACE;AACE;AACE;AACoD;AAChD;AACA;AACD;AACH;AACF;AACF;AACF;AACF;AAEJ;AAEA;AAAsC;AACpC;AACA;AACA;AAEF;AACE;AACA;AAEA;AAEK;AAEG;AACH;AAGP;AAEA;AAAmC;AACjC;AACA;AACA;AAEF;AACE;AAEA;AAKF;AAEA;AAAiD;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AAEF;AACE;AACA;AACA;AACA;AACA;AAEA;AAAM;AAC8B;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACyB;AACzB;AACA;AACW;AACL;AAGR;AACE;AAAkD;AAGpD;AACE;AACE;AAEA;AAAA;AAGF;AACA;AAA6B;AAK/B;AACE;AAAa;AAEb;AAIA;AACE;AAAA;AAIF;AACA;AAGA;AAGA;AACE;AACA;AACE;AAGJ;AACE;AAAmC;AACrC;AAGF;AAGM;AAA4B;AAA3B;AACQ;AACL;AACA;AACe;AACG;AAClB;AACA;AACA;AACK;AACP;AAEA;AAAC;AAAA;AACM;AACE;AACK;AACL;AACC;AAGF;AACM;AACF;AACV;AAEA;AAAC;AAAA;AACC;AACA;AAAA;AACF;AAAA;AACF;AAAA;AAKV;AAEA;AAA8C;AAC5C;AACW;AACX;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAM;AAC8B;AAClC;AACA;AACA;AACA;AACA;AACyB;AACnB;AACN;AACA;AACW;AACL;AAGR;AACE;AACE;AAAA;AAGF;AACA;AAEA;AACA;AAEA;AACE;AACA;AAAyD;AAC3D;AAGF;AAEE;AAGA;AACE;AAGA;AAME;AACA;AAAiB;AAEjB;AAEA;AACA;AAAqB;AACvB;AACD;AAGH;AAGM;AAAgC;AAA/B;AACQ;AACL;AACA;AACA;AACK;AACP;AAEA;AAAC;AAAA;AACM;AACE;AACK;AACL;AACC;AAGF;AACM;AACF;AACV;AAEiB;AAAA;AACnB;AAAA;AAKV;AAWM;AAIJ;AACA;AACA;AAAM;AACJ;AACK;AACL;AACA;AAEF;AACA;AAAsB;AACgC;AAC1C;AAEZ;AACA;AAEA;AAA0B;AAEtB;AAEA;AACA;AAAsB;AACxB;AACc;AAGhB;AACE;AAAC;AAAA;AACC;AACK;AACL;AACW;AACP;AACW;AACkB;AACtB;AACC;AACL;AACI;AACM;AACL;AACC;AACR;AACL;AACK;AAEJ;AAAA;AAGP;AAEA;AAA+B;AAC7B;AACA;AAEF;AAEE;AAEA;AAAsB;AAElB;AACE;AAAC;AAAA;AACC;AACK;AAAA;AACP;AAEC;AAEH;AACE;AAAC;AAAA;AACC;AACK;AAAA;AAGP;AAGF;AAGE;AAGF;AAAO;AAEb;AAGA;AAA4B;AAC1B;AACA;AAEF;AACE;AACE;AAA6B;AAG/B;AACE;AAAyB;AAG3B;AACE;AAAwB;AAG1B;AACE;AAA2B;AAG7B;AACF;AAEA;AAAmC;AACjC;AAEF;AACE;AAEA;AAKF;AAQA;AAAwB;AAEpB;AACA;AAEA;AACE;AAAC;AAAA;AAC8B;AACzB;AACC;AAEJ;AAAA;AACH;AAGN;AAQA;AAAqB;AAEjB;AAEA;AACE;AAAC;AAAA;AACQ;AACH;AACA;AACC;AAEJ;AAAA;AACH;AAGN;AAKM;AAIJ;AACA;AACA;AAAM;AACC;AACL;AACA;AAEF;AACA;AAAsB;AACgC;AAC1C;AAEZ;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACI;AAC6B;AACtB;AACC;AACL;AACI;AACM;AACJ;AACA;AACR;AACL;AACK;AAEJ;AAAA;AAGP;AAcM;AAIJ;AACA;AAEA;AACE;AAAC;AAAA;AACM;AACL;AACW;AACP;AACC;AAEJ;AAAA;AAGP;AAUA;AAAoC;AAKhC;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AAEA;AACA;AAAmB;AACO;AACH;AAGvB;AAEA;AACE;AACE;AAA+C;AACjD;AAGF;AAA0B;AAEtB;AAEA;AACE;AAAsB;AACxB;AACF;AACuC;AAGzC;AAA0B;AAEtB;AAEA;AACA;AAAsB;AACxB;AACc;AAGhB;AAAoB;AAEhB;AAEA;AAEA;AACA;AAEA;AACE;AAAkB;AACpB;AACF;AAC6B;AAG/B;AACE;AAAC;AAAA;AACM;AACL;AAC6B;AACA;AACd;AACA;AACN;AACL;AACC;AAEJ;AAAA;AACH;AAGN;AAEA;AAA0D;AAEtD;AAA2C;AAC7C;AAEE;AAEK;AAAA;AACQ;AACX;AAEJ;AAEE;AAUI;AAER;AAQA;AAAuB;AAEnB;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AAEA;AAAM;AACJ;AACA;AACA;AACA;AACA;AACY;AACZ;AAEF;AACA;AACA;AACA;AACA;AACE;AAA4C;AAE9C;AAA+D;AACV;AACxC;AAGb;AAIA;AACA;AAGA;AACA;AAA2B;AACzB;AACc;AAEhB;AAAM;AACJ;AACA;AACA;AACA;AAEF;AACA;AACA;AACA;AAA8B;AAItB;AACH;AAGL;AAAsB;AAElB;AACkE;AAEpE;AACc;AAGhB;AAAqB;AAEjB;AAKA;AAAsB;AACxB;AACyB;AAG3B;AAAsB;AAElB;AACE;AAAA;AAGF;AACA;AACA;AACA;AAAmC;AACrC;AACwD;AAG1D;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAA6B;AAI/B;AACE;AAA2B;AAG7B;AAEE;AACE;AACA;AAAsC;AAIxC;AACE;AACA;AAA0C;AAI5C;AACE;AAEA;AAEA;AAAqB;AAIvB;AACE;AACA;AACA;AAAmC;AACrC;AAEA;AAEE;AACE;AACA;AAAgC;AAClC;AAIF;AACE;AAAK;AAIP;AAEE;AAEA;AACE;AAAO;AACT;AAIF;AACE;AACA;AAAmB;AAIrB;AACE;AACA;AAA+B;AAIjC;AACE;AACA;AAAiC;AAInC;AACE;AACA;AAAwC;AAI1C;AACE;AACA;AAA+B;AACjC;AACF;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAAoB;AAEhB;AAEA;AACE;AAIA;AACE;AAA4B;AAC9B;AACF;AACF;AACmD;AAGrD;AAAmB;AAEf;AAEA;AACE;AAAgB;AAClB;AACF;AACmB;AAGrB;AAEA;AACA;AAA6B;AAEzB;AAAkC;AACJ;AAG9B;AACE;AAAuC;AACzC;AACF;AACsD;AAGxD;AAAwC;AAGhC;AACQ;AACe;AACJ;AACA;AAC+C;AAGhE;AACmB;AACA;AAElB;AACT;AACE;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AACE;AAA2C;AAI7C;AACE;AACE;AAAA;AAOF;AAEA;AAAiC;AAKnC;AACE;AACE;AAAO;AACT;AAGF;AAA4B;AAExB;AAAoC;AACN;AAG9B;AAAqB;AACvB;AACkC;AAGpC;AACE;AAAC;AAAA;AACC;AACc;AACJ;AAEV;AAAA;AAAC;AAAA;AACC;AAC4B;AACW;AACxB;AACJ;AACgB;AACE;AACzB;AACA;AACM;AACA;AACC;AACF;AACD;AACR;AACY;AACO;AAAA;AACrB;AAEE;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACU;AACN;AACI;AACM;AACd;AAAA;AACF;AAGA;AAAC;AAAA;AACC;AACI;AACJ;AACA;AACA;AAAA;AACF;AAAA;AAAA;AAEJ;AAGN;AAEA;AACA;AAEA;AACE;AAAO;AACC;AACE;AACsB;AACnB;AACA;AACI;AACf;AAEJ;AAWA;AAAqB;AAEjB;AACE;AACA;AACA;AACsB;AACtB;AACe;AACS;AACxB;AACA;AACQ;AACL;AAIL;AACA;AACA;AACA;AACA;AAEA;AACA;AACE;AAAqE;AAIvE;AACA;AAEA;AAAM;AACJ;AACA;AACA;AACA;AACA;AACoD;AACvC;AACb;AAEF;AACA;AAEA;AACE;AAAoC;AAEtC;AACE;AAAoB;AAEtB;AAEA;AACA;AACA;AACA;AAIA;AAIA;AACE;AAAY;AACwB;AACpC;AAGF;AAA0B;AAEtB;AACE;AAAA;AAGF;AAAmC;AACjC;AACiB;AAGnB;AAEA;AAEA;AAA0B;AAC5B;AACoD;AAGtD;AAEA;AACE;AAA+B;AAGjC;AACE;AAAkC;AAGpC;AAAe;AACQ;AACA;AACnB;AACD;AAEH;AAEA;AAAiB;AAEb;AAAqC;AACvC;AACO;AAGT;AACE;AACE;AAAA;AAKF;AACE;AACE;AAAyB;AAC3B;AACD;AAGH;AACE;AAA+B;AACzB;AACkC;AACH;AACnC;AACD;AAGH;AACE;AAA0D;AAG5D;AAAc;AAEV;AAIE;AACE;AAAgB;AACd;AAGW;AAGb;AAEA;AACE;AACA;AAEA;AACE;AACA;AAA+B;AACjC;AAGF;AAAqC;AACvC;AACM;AAIR;AACF;AACO;AAGT;AACE;AACE;AAAuB;AACjB;AAIR;AAGF;AACE;AACE;AAAA;AAGF;AACA;AAA6B;AAG/B;AAAmB;AAEf;AACE;AAAA;AAGF;AACA;AAA4B;AAC9B;AACwB;AAG1B;AACE;AACE;AAAA;AAGF;AACE;AAA2B;AAC7B;AAGF;AAAqC;AAEjC;AACE;AAAA;AAGF;AACE;AAGA;AAAqB;AACvB;AACF;AAC4B;AAG9B;AACE;AACA;AACA;AAEA;AACE;AAAK;AACP;AAGF;AAAqB;AAEjB;AACE;AAAA;AAMF;AAGA;AACE;AAEA;AAAA;AAGF;AAEA;AACE;AAEA;AAAA;AAGF;AAAa;AACJ;AAGT;AACG;AAI2B;AAG1B;AAAO;AACU;AACT;AACe;AACJ;AACA;AACnB;AAGJ;AAAgB;AAC0B;AACxC;AAGF;AAEA;AACE;AACA;AAAwB;AAExB;AAAY;AACd;AACF;AACuE;AAGzE;AACE;AAAsB;AAGxB;AAAmB;AAEf;AAA6B;AAC/B;AACO;AAGT;AACE;AAAqC;AAGvC;AACE;AAAuB;AAAtB;AACQ;AACL;AACA;AACA;AACA;AACA;AACF;AAEA;AAA4B;AAA3B;AACQ;AACL;AACA;AACA;AACA;AACA;AACF;AAEA;AAAiB;AAAhB;AACQ;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGE;AAAA;AAAC;AAAA;AACM;AACG;AACH;AACK;AACD;AACC;AACe;AAAA;AAC3B;AACmC;AACrC;AAAA;AACF;AAAA;AACF;AAAA;AACF;AAGN;AAQA;AAAuB;AAEnB;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACM;AACD;AACC;AACK;AAET;AAAA;AACH;AAGN;AAQM;AAIJ;AACA;AACA;AACA;AAEA;AAAoB;AAEhB;AAEA;AACE;AAAY;AACd;AACF;AACqB;AAGvB;AACE;AAAC;AAAA;AACM;AACD;AACK;AACJ;AACK;AAET;AAAA;AAGP;AAUA;AAAoC;AAKhC;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AAAyD;AACvD;AACA;AACA;AACA;AACU;AAGZ;AACE;AAAC;AAAA;AACK;AAC6B;AAC7B;AACC;AAAA;AACP;AAGN;AAUA;AAA2B;AAKvB;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AAEA;AAA0B;AAEtB;AAEA;AACA;AAAsB;AACxB;AACc;AAGhB;AAAoB;AAEhB;AAEA;AACE;AACA;AAEA;AACA;AAAoB;AACtB;AACF;AACyC;AAG3C;AACE;AAAiB;AAAhB;AACQ;AACY;AACV;AACM;AACX;AAIJ;AAAA;AACF;AAGN;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;;"}
+{"version":3,"file":"index.js","sources":["../../../src/primitives/Composer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type CommentAttachment,\n  type CommentBody,\n  type CommentLocalAttachment,\n  createCommentAttachmentId,\n  type EventSource,\n  makeEventSource,\n  MENTION_CHARACTER,\n  type MentionData,\n  sanitizeUrl,\n} from \"@liveblocks/core\";\nimport { useRoom } from \"@liveblocks/react\";\nimport {\n  useClientOrNull,\n  useLayoutEffect,\n  useMentionSuggestions,\n  useResolveMentionSuggestions,\n  useSyncSource,\n} from \"@liveblocks/react/_private\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport type {\n  AriaAttributes,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  KeyboardEvent,\n  MouseEvent,\n  PointerEvent,\n  SyntheticEvent,\n} from \"react\";\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  Descendant as SlateDescendant,\n  Element as SlateElement,\n} from \"slate\";\nimport {\n  createEditor,\n  Editor as SlateEditor,\n  insertText as insertSlateText,\n  Range as SlateRange,\n  Transforms as SlateTransforms,\n} from \"slate\";\nimport { withHistory } from \"slate-history\";\nimport type {\n  RenderElementProps,\n  RenderElementSpecificProps,\n  RenderLeafSpecificProps,\n  RenderPlaceholderProps,\n} from \"slate-react\";\nimport {\n  Editable,\n  ReactEditor,\n  Slate,\n  useSelected,\n  useSlateStatic,\n  withReact,\n} from \"slate-react\";\n\nimport type {\n  ComposerBody as ComposerBodyData,\n  ComposerBodyAutoLink,\n  ComposerBodyCustomLink,\n  ComposerBodyMark,\n  ComposerBodyMarks,\n  ComposerBodyMention,\n  ComposerBodyText,\n} from \"../../types\";\nimport { isKey } from \"../../utils/is-key\";\nimport { Persist, useAnimationPersist, usePersist } from \"../../utils/Persist\";\nimport { Portal } from \"../../utils/Portal\";\nimport { requestSubmit } from \"../../utils/request-submit\";\nimport { useIndex } from \"../../utils/use-index\";\nimport { useInitial } from \"../../utils/use-initial\";\nimport { useObservable } from \"../../utils/use-observable\";\nimport { useRefs } from \"../../utils/use-refs\";\nimport { withEmptyClearFormatting } from \"../slate/plugins/empty-clear-formatting\";\nimport { withNormalize } from \"../slate/plugins/normalize\";\nimport { getDOMRange } from \"../slate/utils/get-dom-range\";\nimport { isEmpty as isEditorEmpty } from \"../slate/utils/is-empty\";\nimport {\n  getComposerBodyMarks,\n  leaveMarkEdge,\n  toggleMark as toggleEditorMark,\n} from \"../slate/utils/marks\";\nimport {\n  ComposerAttachmentsContext,\n  ComposerContext,\n  ComposerEditorContext,\n  ComposerFloatingToolbarContext,\n  ComposerSuggestionsContext,\n  useComposer,\n  useComposerAttachmentsContext,\n  useComposerEditorContext,\n  useComposerFloatingToolbarContext,\n  useComposerSuggestionsContext,\n} from \"./contexts\";\nimport { withAutoFormatting } from \"./slate/plugins/auto-formatting\";\nimport { withAutoLinks } from \"./slate/plugins/auto-links\";\nimport { withCustomLinks } from \"./slate/plugins/custom-links\";\nimport type { MentionDraft } from \"./slate/plugins/mentions\";\nimport {\n  getMentionDraftAtSelection,\n  insertMention,\n  insertMentionCharacter,\n  withMentions,\n} from \"./slate/plugins/mentions\";\nimport { withPaste } from \"./slate/plugins/paste\";\nimport type {\n  ComposerAttachFilesProps,\n  ComposerAttachmentsDropAreaProps,\n  ComposerEditorComponents,\n  ComposerEditorElementProps,\n  ComposerEditorFloatingToolbarWrapperProps,\n  ComposerEditorLinkWrapperProps,\n  ComposerEditorMentionSuggestionsWrapperProps,\n  ComposerEditorMentionWrapperProps,\n  ComposerEditorProps,\n  ComposerFloatingToolbarProps,\n  ComposerFormProps,\n  ComposerLinkProps,\n  ComposerMarkToggleProps,\n  ComposerMentionProps,\n  ComposerSubmitProps,\n  ComposerSuggestionsListItemProps,\n  ComposerSuggestionsListProps,\n  ComposerSuggestionsProps,\n  FloatingPosition,\n} from \"./types\";\nimport {\n  commentBodyToComposerBody,\n  composerBodyToCommentBody,\n  getSideAndAlignFromFloatingPlacement,\n  useComposerAttachmentsDropArea,\n  useComposerAttachmentsManager,\n  useContentZIndex,\n  useFloatingWithOptions,\n} from \"./utils\";\n\nconst MENTION_SUGGESTIONS_POSITION: FloatingPosition = \"top\";\n\nconst FLOATING_TOOLBAR_POSITION: FloatingPosition = \"top\";\n\nconst COMPOSER_MENTION_NAME = \"ComposerMention\";\nconst COMPOSER_LINK_NAME = \"ComposerLink\";\nconst COMPOSER_FLOATING_TOOLBAR_NAME = \"ComposerFloatingToolbar\";\nconst COMPOSER_SUGGESTIONS_NAME = \"ComposerSuggestions\";\nconst COMPOSER_SUGGESTIONS_LIST_NAME = \"ComposerSuggestionsList\";\nconst COMPOSER_SUGGESTIONS_LIST_ITEM_NAME = \"ComposerSuggestionsListItem\";\nconst COMPOSER_SUBMIT_NAME = \"ComposerSubmit\";\nconst COMPOSER_EDITOR_NAME = \"ComposerEditor\";\nconst COMPOSER_ATTACH_FILES_NAME = \"ComposerAttachFiles\";\nconst COMPOSER_ATTACHMENTS_DROP_AREA_NAME = \"ComposerAttachmentsDropArea\";\nconst COMPOSER_MARK_TOGGLE_NAME = \"ComposerMarkToggle\";\nconst COMPOSER_FORM_NAME = \"ComposerForm\";\n\nconst emptyCommentBody: CommentBody = {\n  version: 1,\n  content: [{ type: \"paragraph\", children: [{ text: \"\" }] }],\n};\n\nfunction createComposerEditor({\n  createAttachments,\n  pasteFilesAsAttachments,\n}: {\n  createAttachments: (files: File[]) => void;\n  pasteFilesAsAttachments?: boolean;\n}) {\n  return withNormalize(\n    withMentions(\n      withCustomLinks(\n        withAutoLinks(\n          withAutoFormatting(\n            withEmptyClearFormatting(\n              withPaste(withHistory(withReact(createEditor())), {\n                createAttachments,\n                pasteFilesAsAttachments,\n              })\n            )\n          )\n        )\n      )\n    )\n  );\n}\n\nfunction ComposerEditorMentionWrapper({\n  Mention,\n  attributes,\n  children,\n  element,\n}: ComposerEditorMentionWrapperProps) {\n  const isSelected = useSelected();\n  const { children: _, ...mention } = element;\n\n  return (\n    <span {...attributes}>\n      {element.id ? (\n        <Mention mention={mention} isSelected={isSelected} />\n      ) : null}\n      {children}\n    </span>\n  );\n}\n\nfunction ComposerEditorLinkWrapper({\n  Link,\n  attributes,\n  element,\n  children,\n}: ComposerEditorLinkWrapperProps) {\n  const href = useMemo(() => sanitizeUrl(element.url) ?? \"\", [element.url]);\n\n  return (\n    <span {...attributes}>\n      <Link href={href}>{children}</Link>\n    </span>\n  );\n}\n\nfunction ComposerEditorMentionSuggestionsWrapper({\n  id,\n  itemId,\n  mentions,\n  selectedMentionId,\n  setSelectedMentionId,\n  mentionDraft,\n  setMentionDraft,\n  onItemSelect,\n  position = MENTION_SUGGESTIONS_POSITION,\n  dir,\n  MentionSuggestions,\n}: ComposerEditorMentionSuggestionsWrapperProps) {\n  const editor = useSlateStatic();\n  const { onEditorChange } = useComposerEditorContext();\n  const { isFocused } = useComposer();\n  const [contentRef, contentZIndex] = useContentZIndex();\n  const isOpen =\n    isFocused && mentionDraft?.range !== undefined && mentions !== undefined;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    isPositioned,\n    placement,\n    x,\n    y,\n    update,\n    elements,\n  } = useFloatingWithOptions({\n    position,\n    dir,\n    alignment: \"start\",\n    open: isOpen,\n  });\n\n  useObservable(onEditorChange, () => {\n    setMentionDraft(getMentionDraftAtSelection(editor));\n  });\n\n  useLayoutEffect(() => {\n    if (!mentionDraft) {\n      setReference(null);\n\n      return;\n    }\n\n    const domRange = getDOMRange(editor, mentionDraft.range);\n    setReference(domRange ?? null);\n  }, [setReference, editor, mentionDraft]);\n\n  // Manually update the placement when the number of suggestions changes\n  // This can prevent the list of suggestions from scrolling instead of moving to the other placement\n  useLayoutEffect(() => {\n    if (!isOpen) return;\n\n    const mentionSuggestions = elements.floating?.firstChild as\n      | HTMLElement\n      | undefined;\n\n    if (!mentionSuggestions) {\n      return;\n    }\n\n    // Force the mention suggestions to grow instead of scrolling\n    mentionSuggestions.style.overflowY = \"visible\";\n    mentionSuggestions.style.maxHeight = \"none\";\n\n    // Trigger a placement update\n    update();\n\n    // Reset the mention suggestions after the placement update\n    const animationFrame = requestAnimationFrame(() => {\n      mentionSuggestions.style.overflowY = \"auto\";\n      mentionSuggestions.style.maxHeight =\n        \"var(--lb-composer-floating-available-height)\";\n    });\n\n    return () => {\n      cancelAnimationFrame(animationFrame);\n    };\n  }, [mentions?.length, isOpen, elements.floating, update]);\n\n  return (\n    <Persist>\n      {isOpen ? (\n        <ComposerSuggestionsContext.Provider\n          value={{\n            id,\n            itemId,\n            selectedValue: selectedMentionId,\n            setSelectedValue: setSelectedMentionId,\n            onItemSelect,\n            placement,\n            dir,\n            ref: contentRef,\n          }}\n        >\n          <Portal\n            ref={setFloating}\n            style={{\n              position: strategy,\n              top: 0,\n              left: 0,\n              transform: isPositioned\n                ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`\n                : \"translate3d(0, -200%, 0)\",\n              minWidth: \"max-content\",\n              zIndex: contentZIndex,\n            }}\n          >\n            <MentionSuggestions\n              mentions={mentions}\n              selectedMentionId={selectedMentionId}\n            />\n          </Portal>\n        </ComposerSuggestionsContext.Provider>\n      ) : null}\n    </Persist>\n  );\n}\n\nfunction ComposerEditorFloatingToolbarWrapper({\n  id,\n  position = FLOATING_TOOLBAR_POSITION,\n  dir,\n  FloatingToolbar,\n  hasFloatingToolbarRange,\n  setHasFloatingToolbarRange,\n}: ComposerEditorFloatingToolbarWrapperProps) {\n  const editor = useSlateStatic();\n  const { onEditorChange } = useComposerEditorContext();\n  const { isFocused } = useComposer();\n  const [contentRef, contentZIndex] = useContentZIndex();\n  const [isPointerDown, setPointerDown] = useState(false);\n  const isOpen = isFocused && !isPointerDown && hasFloatingToolbarRange;\n  const {\n    refs: { setReference, setFloating },\n    strategy,\n    isPositioned,\n    placement,\n    x,\n    y,\n  } = useFloatingWithOptions({\n    type: \"range\",\n    position,\n    dir,\n    alignment: \"center\",\n    open: isOpen,\n  });\n\n  useLayoutEffect(() => {\n    if (!isFocused) {\n      return;\n    }\n\n    const handlePointerDown = () => setPointerDown(true);\n    const handlePointerUp = () => setPointerDown(false);\n\n    document.addEventListener(\"pointerdown\", handlePointerDown);\n    document.addEventListener(\"pointerup\", handlePointerUp);\n\n    return () => {\n      document.removeEventListener(\"pointerdown\", handlePointerDown);\n      document.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n  }, [isFocused]);\n\n  useObservable(onEditorChange, () => {\n    // Detach from previous selection range (if any) to avoid sudden jumps\n    setReference(null);\n\n    // Then, wait for the next render to ensure the selection is updated\n    requestAnimationFrame(() => {\n      const domSelection = window.getSelection();\n\n      // Finally, show the toolbar if there's a selection range\n      if (\n        !editor.selection ||\n        SlateRange.isCollapsed(editor.selection) ||\n        !domSelection ||\n        !domSelection.rangeCount\n      ) {\n        setHasFloatingToolbarRange(false);\n        setReference(null);\n      } else {\n        setHasFloatingToolbarRange(true);\n\n        const domRange = domSelection.getRangeAt(0);\n        setReference(domRange);\n      }\n    });\n  });\n\n  return (\n    <Persist>\n      {isOpen ? (\n        <ComposerFloatingToolbarContext.Provider\n          value={{\n            id,\n            placement,\n            dir,\n            ref: contentRef,\n          }}\n        >\n          <Portal\n            ref={setFloating}\n            style={{\n              position: strategy,\n              top: 0,\n              left: 0,\n              transform: isPositioned\n                ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`\n                : \"translate3d(0, -200%, 0)\",\n              minWidth: \"max-content\",\n              zIndex: contentZIndex,\n            }}\n          >\n            <FloatingToolbar />\n          </Portal>\n        </ComposerFloatingToolbarContext.Provider>\n      ) : null}\n    </Persist>\n  );\n}\n\n/**\n * Displays a floating toolbar attached to the selection within `Composer.Editor`.\n *\n * @example\n * <Composer.FloatingToolbar>\n *   <Composer.MarkToggle mark=\"bold\">Bold</Composer.MarkToggle>\n *   <Composer.MarkToggle mark=\"italic\">Italic</Composer.MarkToggle>\n * </Composer.FloatingToolbar>\n */\nconst ComposerFloatingToolbar = forwardRef<\n  HTMLDivElement,\n  ComposerFloatingToolbarProps\n>(({ children, onPointerDown, style, asChild, ...props }, forwardedRef) => {\n  const [isPresent] = usePersist();\n  const ref = useRef<HTMLDivElement>(null);\n  const {\n    id,\n    ref: contentRef,\n    placement,\n    dir,\n  } = useComposerFloatingToolbarContext(COMPOSER_FLOATING_TOOLBAR_NAME);\n  const mergedRefs = useRefs(forwardedRef, contentRef, ref);\n  const [side, align] = useMemo(\n    () => getSideAndAlignFromFloatingPlacement(placement),\n    [placement]\n  );\n  const Component = asChild ? Slot : \"div\";\n  useAnimationPersist(ref);\n\n  const handlePointerDown = useCallback(\n    (event: PointerEvent<HTMLDivElement>) => {\n      onPointerDown?.(event);\n\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [onPointerDown]\n  );\n\n  return (\n    <Component\n      dir={dir}\n      role=\"toolbar\"\n      id={id}\n      aria-label=\"Floating toolbar\"\n      {...props}\n      onPointerDown={handlePointerDown}\n      data-state={isPresent ? \"open\" : \"closed\"}\n      data-side={side}\n      data-align={align}\n      style={{\n        display: \"flex\",\n        flexDirection: \"row\",\n        maxWidth: \"var(--lb-composer-floating-available-width)\",\n        overflowX: \"auto\",\n        ...style,\n      }}\n      ref={mergedRefs}\n    >\n      {children}\n    </Component>\n  );\n});\n\nfunction ComposerEditorElement({\n  Mention,\n  Link,\n  ...props\n}: ComposerEditorElementProps) {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n  const { attributes, children, element } = props;\n\n  switch (element.type) {\n    case \"mention\":\n      return (\n        <ComposerEditorMentionWrapper\n          Mention={Mention}\n          {...(props as RenderElementSpecificProps<ComposerBodyMention>)}\n        />\n      );\n    case \"auto-link\":\n    case \"custom-link\":\n      return (\n        <ComposerEditorLinkWrapper\n          Link={Link}\n          {...(props as RenderElementSpecificProps<\n            ComposerBodyAutoLink | ComposerBodyCustomLink\n          >)}\n        />\n      );\n    case \"paragraph\":\n      return (\n        <p {...attributes} style={{ position: \"relative\" }}>\n          {children}\n        </p>\n      );\n    default:\n      return null;\n  }\n}\n\n// <code><s><em><strong>text</strong></s></em></code>\nfunction ComposerEditorLeaf({\n  attributes,\n  children,\n  leaf,\n}: RenderLeafSpecificProps<ComposerBodyText>) {\n  if (leaf.bold) {\n    children = <strong>{children}</strong>;\n  }\n\n  if (leaf.italic) {\n    children = <em>{children}</em>;\n  }\n\n  if (leaf.strikethrough) {\n    children = <s>{children}</s>;\n  }\n\n  if (leaf.code) {\n    children = <code>{children}</code>;\n  }\n\n  return <span {...attributes}>{children}</span>;\n}\n\nfunction ComposerEditorPlaceholder({\n  attributes,\n  children,\n}: RenderPlaceholderProps) {\n  const { opacity: _opacity, ...style } = attributes.style;\n\n  return (\n    <span {...attributes} style={style} data-placeholder=\"\">\n      {children}\n    </span>\n  );\n}\n\n/**\n * Displays mentions within `Composer.Editor`.\n *\n * @example\n * <Composer.Mention>@{mention.id}</Composer.Mention>\n */\nconst ComposerMention = forwardRef<HTMLSpanElement, ComposerMentionProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"span\";\n    const isSelected = useSelected();\n\n    return (\n      <Component\n        data-selected={isSelected || undefined}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\n/**\n * Displays links within `Composer.Editor`.\n *\n * @example\n * <Composer.Link href={href}>{children}</Composer.Link>\n */\nconst ComposerLink = forwardRef<HTMLAnchorElement, ComposerLinkProps>(\n  ({ children, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"a\";\n\n    return (\n      <Component\n        target=\"_blank\"\n        rel=\"noopener noreferrer nofollow\"\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\n/**\n * Contains suggestions within `Composer.Editor`.\n */\nconst ComposerSuggestions = forwardRef<\n  HTMLDivElement,\n  ComposerSuggestionsProps\n>(({ children, style, asChild, ...props }, forwardedRef) => {\n  const [isPresent] = usePersist();\n  const ref = useRef<HTMLDivElement>(null);\n  const {\n    ref: contentRef,\n    placement,\n    dir,\n  } = useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_NAME);\n  const mergedRefs = useRefs(forwardedRef, contentRef, ref);\n  const [side, align] = useMemo(\n    () => getSideAndAlignFromFloatingPlacement(placement),\n    [placement]\n  );\n  const Component = asChild ? Slot : \"div\";\n  useAnimationPersist(ref);\n\n  return (\n    <Component\n      dir={dir}\n      {...props}\n      data-state={isPresent ? \"open\" : \"closed\"}\n      data-side={side}\n      data-align={align}\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        maxHeight: \"var(--lb-composer-floating-available-height)\",\n        overflowY: \"auto\",\n        ...style,\n      }}\n      ref={mergedRefs}\n    >\n      {children}\n    </Component>\n  );\n});\n\n/**\n * Displays a list of suggestions within `Composer.Editor`.\n *\n * @example\n * <Composer.SuggestionsList>\n *   {mentions.map((mention) => (\n *     <Composer.SuggestionsListItem key={mention.id} value={mention.id}>\n *       @{mention.id}\n *     </Composer.SuggestionsListItem>\n *   ))}\n * </Composer.SuggestionsList>\n */\nconst ComposerSuggestionsList = forwardRef<\n  HTMLUListElement,\n  ComposerSuggestionsListProps\n>(({ children, asChild, ...props }, forwardedRef) => {\n  const { id } = useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_NAME);\n  const Component = asChild ? Slot : \"ul\";\n\n  return (\n    <Component\n      role=\"listbox\"\n      id={id}\n      aria-label=\"Suggestions list\"\n      {...props}\n      ref={forwardedRef}\n    >\n      {children}\n    </Component>\n  );\n});\n\n/**\n * Displays a suggestion within `Composer.SuggestionsList`.\n *\n * @example\n * <Composer.SuggestionsListItem key={mention.id} value={mention.id}>\n *   @{mention.id}\n * </Composer.SuggestionsListItem>\n */\nconst ComposerSuggestionsListItem = forwardRef<\n  HTMLLIElement,\n  ComposerSuggestionsListItemProps\n>(\n  (\n    {\n      value,\n      children,\n      onPointerMove,\n      onPointerDown,\n      onClick,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const ref = useRef<HTMLLIElement>(null);\n    const mergedRefs = useRefs(forwardedRef, ref);\n    const { selectedValue, setSelectedValue, itemId, onItemSelect } =\n      useComposerSuggestionsContext(COMPOSER_SUGGESTIONS_LIST_ITEM_NAME);\n    const Component = asChild ? Slot : \"li\";\n    const isSelected = useMemo(\n      () => selectedValue === value,\n      [selectedValue, value]\n    );\n    // TODO: Support props.id if provided, it will need to be sent up to Composer.Editor to use it in aria-activedescendant\n    const id = useMemo(() => itemId(value), [itemId, value]);\n\n    useEffect(() => {\n      if (ref?.current && isSelected) {\n        ref.current.scrollIntoView({ block: \"nearest\" });\n      }\n    }, [isSelected]);\n\n    const handlePointerMove = useCallback(\n      (event: PointerEvent<HTMLLIElement>) => {\n        onPointerMove?.(event);\n\n        if (!event.isDefaultPrevented()) {\n          setSelectedValue(value);\n        }\n      },\n      [onPointerMove, setSelectedValue, value]\n    );\n\n    const handlePointerDown = useCallback(\n      (event: PointerEvent<HTMLLIElement>) => {\n        onPointerDown?.(event);\n\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      [onPointerDown]\n    );\n\n    const handleClick = useCallback(\n      (event: MouseEvent<HTMLLIElement>) => {\n        onClick?.(event);\n\n        const wasDefaultPrevented = event.isDefaultPrevented();\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (!wasDefaultPrevented) {\n          onItemSelect(value);\n        }\n      },\n      [onClick, onItemSelect, value]\n    );\n\n    return (\n      <Component\n        role=\"option\"\n        id={id}\n        data-selected={isSelected || undefined}\n        aria-selected={isSelected || undefined}\n        onPointerMove={handlePointerMove}\n        onPointerDown={handlePointerDown}\n        onClick={handleClick}\n        {...props}\n        ref={mergedRefs}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nconst defaultEditorComponents: ComposerEditorComponents = {\n  Link: ({ href, children }) => {\n    return <ComposerLink href={href}>{children}</ComposerLink>;\n  },\n  Mention: ({ mention }) => {\n    return (\n      <ComposerMention>\n        {MENTION_CHARACTER}\n        {mention.id}\n      </ComposerMention>\n    );\n  },\n  MentionSuggestions: ({ mentions }) => {\n    return mentions.length > 0 ? (\n      <ComposerSuggestions>\n        <ComposerSuggestionsList>\n          {mentions.map((mention) => (\n            <ComposerSuggestionsListItem key={mention.id} value={mention.id}>\n              {mention.id}\n            </ComposerSuggestionsListItem>\n          ))}\n        </ComposerSuggestionsList>\n      </ComposerSuggestions>\n    ) : null;\n  },\n};\n\n/**\n * Displays the composer's editor.\n *\n * @example\n * <Composer.Editor placeholder=\"Write a comment…\" />\n */\nconst ComposerEditor = forwardRef<HTMLDivElement, ComposerEditorProps>(\n  (\n    {\n      defaultValue,\n      onKeyDown,\n      onFocus,\n      onBlur,\n      disabled,\n      autoFocus,\n      components,\n      dir,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const client = useClientOrNull();\n    const { editor, validate, setFocused, onEditorChange, roomId } =\n      useComposerEditorContext();\n    const {\n      submit,\n      focus,\n      blur,\n      select,\n      canSubmit,\n      isDisabled: isComposerDisabled,\n      isFocused,\n    } = useComposer();\n    const isDisabled = isComposerDisabled || disabled;\n    const initialBody = useInitial(defaultValue ?? emptyCommentBody);\n    const initialEditorValue = useMemo(() => {\n      return commentBodyToComposerBody(initialBody);\n    }, [initialBody]);\n    const { Link, Mention, MentionSuggestions, FloatingToolbar } = useMemo(\n      () => ({ ...defaultEditorComponents, ...components }),\n      [components]\n    );\n\n    const [hasFloatingToolbarRange, setHasFloatingToolbarRange] =\n      useState(false);\n    // If used with LiveblocksProvider but without resolveMentionSuggestions,\n    // we can skip the mention suggestions logic entirely\n    const resolveMentionSuggestions = useResolveMentionSuggestions();\n    const hasResolveMentionSuggestions = client\n      ? resolveMentionSuggestions\n      : true;\n    const [mentionDraft, setMentionDraft] = useState<MentionDraft>();\n    const mentionSuggestions = useMentionSuggestions(\n      roomId,\n      mentionDraft?.text\n    );\n    const [\n      selectedMentionSuggestionIndex,\n      setPreviousSelectedMentionSuggestionIndex,\n      setNextSelectedMentionSuggestionIndex,\n      setSelectedMentionSuggestionIndex,\n    ] = useIndex(0, mentionSuggestions?.length ?? 0);\n    const id = useId();\n    const floatingToolbarId = `liveblocks-floating-toolbar-${id}`;\n    const suggestionsListId = `liveblocks-suggestions-list-${id}`;\n    const suggestionsListItemId = useCallback(\n      (mentionId?: string) =>\n        mentionId\n          ? `liveblocks-suggestions-list-item-${id}-${mentionId}`\n          : undefined,\n      [id]\n    );\n\n    const renderElement = useCallback(\n      (props: RenderElementProps) => {\n        return (\n          <ComposerEditorElement Mention={Mention} Link={Link} {...props} />\n        );\n      },\n      [Link, Mention]\n    );\n\n    const handleChange = useCallback(\n      (value: SlateDescendant[]) => {\n        validate(value as SlateElement[]);\n\n        // Our multi-component setup requires us to instantiate the editor in `Composer.Form`\n        // but we can only listen to changes here in `Composer.Editor` via `Slate`, so we use\n        // an event source to notify `Composer.Form` of changes.\n        onEditorChange.notify();\n      },\n      [validate, onEditorChange]\n    );\n\n    const createMention = useCallback(\n      (mention?: MentionData) => {\n        if (!mentionDraft || !mention) {\n          return;\n        }\n\n        SlateTransforms.select(editor, mentionDraft.range);\n        insertMention(editor, mention);\n        setMentionDraft(undefined);\n        setSelectedMentionSuggestionIndex(0);\n      },\n      [editor, mentionDraft, setSelectedMentionSuggestionIndex]\n    );\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent<HTMLDivElement>) => {\n        onKeyDown?.(event);\n\n        if (event.isDefaultPrevented()) {\n          return;\n        }\n\n        // Allow leaving marks with ArrowLeft\n        if (isKey(event, \"ArrowLeft\")) {\n          leaveMarkEdge(editor, \"start\");\n        }\n\n        // Allow leaving marks with ArrowRight\n        if (isKey(event, \"ArrowRight\")) {\n          leaveMarkEdge(editor, \"end\");\n        }\n\n        if (mentionDraft && mentionSuggestions?.length) {\n          // Select the next mention suggestion on ArrowDown\n          if (isKey(event, \"ArrowDown\")) {\n            event.preventDefault();\n            setNextSelectedMentionSuggestionIndex();\n          }\n\n          // Select the previous mention suggestion on ArrowUp\n          if (isKey(event, \"ArrowUp\")) {\n            event.preventDefault();\n            setPreviousSelectedMentionSuggestionIndex();\n          }\n\n          // Create a mention on Enter/Tab\n          if (isKey(event, \"Enter\") || isKey(event, \"Tab\")) {\n            event.preventDefault();\n\n            const mention =\n              mentionSuggestions?.[selectedMentionSuggestionIndex];\n            createMention(mention);\n          }\n\n          // Close the suggestions on Escape\n          if (isKey(event, \"Escape\")) {\n            event.preventDefault();\n            setMentionDraft(undefined);\n            setSelectedMentionSuggestionIndex(0);\n          }\n        } else {\n          if (hasFloatingToolbarRange) {\n            // Close the floating toolbar on Escape\n            if (isKey(event, \"Escape\")) {\n              event.preventDefault();\n              setHasFloatingToolbarRange(false);\n            }\n          }\n\n          // Blur the editor on Escape\n          if (isKey(event, \"Escape\")) {\n            blur();\n          }\n\n          // Submit the editor on Enter\n          if (isKey(event, \"Enter\", { shift: false })) {\n            // Even if submitting is not possible, don't do anything else on Enter. (e.g. creating a new line)\n            event.preventDefault();\n\n            if (canSubmit) {\n              submit();\n            }\n          }\n\n          // Create a new line on Shift + Enter\n          if (isKey(event, \"Enter\", { shift: true })) {\n            event.preventDefault();\n            editor.insertBreak();\n          }\n\n          // Toggle bold on Command/Control + B\n          if (isKey(event, \"b\", { mod: true })) {\n            event.preventDefault();\n            toggleEditorMark(editor, \"bold\");\n          }\n\n          // Toggle italic on Command/Control + I\n          if (isKey(event, \"i\", { mod: true })) {\n            event.preventDefault();\n            toggleEditorMark(editor, \"italic\");\n          }\n\n          // Toggle strikethrough on Command/Control + Shift + S\n          if (isKey(event, \"s\", { mod: true, shift: true })) {\n            event.preventDefault();\n            toggleEditorMark(editor, \"strikethrough\");\n          }\n\n          // Toggle code on Command/Control + E\n          if (isKey(event, \"e\", { mod: true })) {\n            event.preventDefault();\n            toggleEditorMark(editor, \"code\");\n          }\n        }\n      },\n      [\n        onKeyDown,\n        mentionDraft,\n        mentionSuggestions,\n        hasFloatingToolbarRange,\n        editor,\n        setNextSelectedMentionSuggestionIndex,\n        setPreviousSelectedMentionSuggestionIndex,\n        selectedMentionSuggestionIndex,\n        createMention,\n        setSelectedMentionSuggestionIndex,\n        blur,\n        canSubmit,\n        submit,\n      ]\n    );\n\n    const handleFocus = useCallback(\n      (event: FocusEvent<HTMLDivElement>) => {\n        onFocus?.(event);\n\n        if (!event.isDefaultPrevented()) {\n          setFocused(true);\n        }\n      },\n      [onFocus, setFocused]\n    );\n\n    const handleBlur = useCallback(\n      (event: FocusEvent<HTMLDivElement>) => {\n        onBlur?.(event);\n\n        if (!event.isDefaultPrevented()) {\n          setFocused(false);\n        }\n      },\n      [onBlur, setFocused]\n    );\n\n    const selectedMention =\n      mentionSuggestions?.[selectedMentionSuggestionIndex];\n    const selectedMentionId = selectedMention?.id;\n    const setSelectedMentionId = useCallback(\n      (mentionId: string) => {\n        const index = mentionSuggestions?.findIndex(\n          (mention) => mention.id === mentionId\n        );\n\n        if (index !== undefined && index >= 0) {\n          setSelectedMentionSuggestionIndex(index);\n        }\n      },\n      [setSelectedMentionSuggestionIndex, mentionSuggestions]\n    );\n\n    const additionalProps: AriaAttributes = useMemo(\n      () =>\n        mentionDraft\n          ? {\n              role: \"combobox\",\n              \"aria-autocomplete\": \"list\",\n              \"aria-expanded\": true,\n              \"aria-controls\": suggestionsListId,\n              \"aria-activedescendant\": suggestionsListItemId(selectedMentionId),\n            }\n          : hasFloatingToolbarRange\n            ? {\n                \"aria-haspopup\": true,\n                \"aria-controls\": floatingToolbarId,\n              }\n            : {},\n      [\n        mentionDraft,\n        suggestionsListId,\n        suggestionsListItemId,\n        selectedMentionId,\n        hasFloatingToolbarRange,\n        floatingToolbarId,\n      ]\n    );\n\n    useImperativeHandle(forwardedRef, () => {\n      return ReactEditor.toDOMNode(editor, editor) as HTMLDivElement;\n    }, [editor]);\n\n    // Manually focus the editor when `autoFocus` is true\n    useLayoutEffect(() => {\n      if (!autoFocus) {\n        return;\n      }\n\n      // `focus` needs to be synchronous to ensure its errors can be caught\n      // but the triggering of `focus` on mount itself can be asynchronous.\n      // This brings back the same timing behavior as Slate's `ReactEditor.focus`\n      // (which uses `setTimeout` internally) while still allowing us to catch errors.\n      const timeout = setTimeout(() => focus(), 0);\n\n      return () => clearTimeout(timeout);\n    }, [autoFocus, editor, focus]);\n\n    // Manually add a selection in the editor if the selection\n    // is still empty after being focused\n    useLayoutEffect(() => {\n      if (isFocused && editor.selection === null) {\n        select();\n      }\n    }, [editor, select, isFocused]);\n\n    const handleMentionSelect = useCallback(\n      (mentionId: string) => {\n        const mention = mentionSuggestions?.find(\n          (mention) => mention.id === mentionId\n        );\n\n        createMention(mention);\n      },\n      [createMention, mentionSuggestions]\n    );\n\n    return (\n      <Slate\n        editor={editor}\n        initialValue={initialEditorValue}\n        onChange={handleChange}\n      >\n        <Editable\n          dir={dir}\n          enterKeyHint={mentionDraft ? \"enter\" : \"send\"}\n          autoCapitalize=\"sentences\"\n          aria-label=\"Composer editor\"\n          data-focused={isFocused || undefined}\n          data-disabled={isDisabled || undefined}\n          {...additionalProps}\n          {...props}\n          readOnly={isDisabled}\n          disabled={isDisabled}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          renderElement={renderElement}\n          renderLeaf={ComposerEditorLeaf}\n          renderPlaceholder={ComposerEditorPlaceholder}\n        />\n        {hasResolveMentionSuggestions && (\n          <ComposerEditorMentionSuggestionsWrapper\n            dir={dir}\n            mentionDraft={mentionDraft}\n            setMentionDraft={setMentionDraft}\n            selectedMentionId={selectedMentionId}\n            setSelectedMentionId={setSelectedMentionId}\n            mentions={mentionSuggestions}\n            id={suggestionsListId}\n            itemId={suggestionsListItemId}\n            onItemSelect={handleMentionSelect}\n            MentionSuggestions={MentionSuggestions}\n          />\n        )}\n        {FloatingToolbar && (\n          <ComposerEditorFloatingToolbarWrapper\n            dir={dir}\n            id={floatingToolbarId}\n            hasFloatingToolbarRange={hasFloatingToolbarRange}\n            setHasFloatingToolbarRange={setHasFloatingToolbarRange}\n            FloatingToolbar={FloatingToolbar}\n          />\n        )}\n      </Slate>\n    );\n  }\n);\n\nconst MAX_ATTACHMENTS = 10;\nconst MAX_ATTACHMENT_SIZE = 1024 * 1024 * 1024; // 1 GB\n\nfunction prepareAttachment(file: File): CommentLocalAttachment {\n  return {\n    type: \"localAttachment\",\n    status: \"idle\",\n    id: createCommentAttachmentId(),\n    name: file.name,\n    size: file.size,\n    mimeType: file.type,\n    file,\n  };\n}\n\n/**\n * Surrounds the composer's content and handles submissions.\n *\n * @example\n * <Composer.Form onComposerSubmit={({ body }) => {}}>\n *\t <Composer.Editor />\n *   <Composer.Submit />\n * </Composer.Form>\n */\nconst ComposerForm = forwardRef<HTMLFormElement, ComposerFormProps>(\n  (\n    {\n      children,\n      onSubmit,\n      onComposerSubmit,\n      defaultAttachments = [],\n      pasteFilesAsAttachments,\n      blurOnSubmit = true,\n      preventUnsavedChanges = true,\n      disabled,\n      asChild,\n      roomId: _roomId,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"form\";\n    const [isEmpty, setEmpty] = useState(true);\n    const [isSubmitting, setSubmitting] = useState(false);\n    const [isFocused, setFocused] = useState(false);\n    const room = useRoom({ allowOutsideRoom: true });\n\n    const roomId = _roomId !== undefined ? _roomId : room?.id;\n    if (roomId === undefined) {\n      throw new Error(\"Composer.Form must be a descendant of RoomProvider.\");\n    }\n\n    // Later: Offer as Composer.Form props: { maxAttachments: number; maxAttachmentSize: number; supportedAttachmentMimeTypes: string[]; }\n    const maxAttachments = MAX_ATTACHMENTS;\n    const maxAttachmentSize = MAX_ATTACHMENT_SIZE;\n\n    const {\n      attachments,\n      isUploadingAttachments,\n      addAttachments,\n      removeAttachment,\n      clearAttachments,\n    } = useComposerAttachmentsManager(defaultAttachments, {\n      maxFileSize: maxAttachmentSize,\n      roomId,\n    });\n    const numberOfAttachments = attachments.length;\n    const hasMaxAttachments = numberOfAttachments >= maxAttachments;\n\n    const isDisabled = useMemo(() => {\n      return isSubmitting || disabled === true;\n    }, [isSubmitting, disabled]);\n    const canSubmit = useMemo(() => {\n      return !isEmpty && !isUploadingAttachments;\n    }, [isEmpty, isUploadingAttachments]);\n    const [marks, setMarks] = useState<ComposerBodyMarks>(getComposerBodyMarks);\n\n    const ref = useRef<HTMLFormElement>(null);\n    const mergedRefs = useRefs(forwardedRef, ref);\n    const fileInputRef = useRef<HTMLInputElement>(null);\n    const syncSource = useSyncSource();\n\n    // Mark the composer as a pending update when it has unsubmitted (draft)\n    // text or attachments\n    const isPending = !preventUnsavedChanges\n      ? false\n      : !isEmpty || isUploadingAttachments || attachments.length > 0;\n\n    useEffect(() => {\n      syncSource?.setSyncStatus(\n        isPending ? \"has-local-changes\" : \"synchronized\"\n      );\n    }, [syncSource, isPending]);\n\n    const createAttachments = useCallback(\n      (files: File[]) => {\n        if (!files.length) {\n          return;\n        }\n\n        const numberOfAcceptedFiles = Math.max(\n          0,\n          maxAttachments - numberOfAttachments\n        );\n\n        files.splice(numberOfAcceptedFiles);\n\n        const attachments = files.map((file) => prepareAttachment(file));\n\n        addAttachments(attachments);\n      },\n      [addAttachments, maxAttachments, numberOfAttachments]\n    );\n\n    const createAttachmentsRef = useRef(createAttachments);\n\n    useEffect(() => {\n      createAttachmentsRef.current = createAttachments;\n    }, [createAttachments]);\n\n    const stableCreateAttachments = useCallback((files: File[]) => {\n      createAttachmentsRef.current(files);\n    }, []);\n\n    const editor = useInitial(() =>\n      createComposerEditor({\n        createAttachments: stableCreateAttachments,\n        pasteFilesAsAttachments,\n      })\n    );\n    const onEditorChange = useInitial(makeEventSource) as EventSource<void>;\n\n    const validate = useCallback(\n      (value: SlateElement[]) => {\n        setEmpty(isEditorEmpty(editor, value));\n      },\n      [editor]\n    );\n\n    const submit = useCallback(() => {\n      if (!canSubmit) {\n        return;\n      }\n\n      // We need to wait for the next frame in some cases like when composing diacritics,\n      // we want any native handling to be done first while still being handled on `keydown`.\n      requestAnimationFrame(() => {\n        if (ref.current) {\n          requestSubmit(ref.current);\n        }\n      });\n    }, [canSubmit]);\n\n    const clear = useCallback(() => {\n      SlateTransforms.delete(editor, {\n        at: {\n          anchor: SlateEditor.start(editor, []),\n          focus: SlateEditor.end(editor, []),\n        },\n      });\n    }, [editor]);\n\n    const select = useCallback(() => {\n      SlateTransforms.select(editor, SlateEditor.end(editor, []));\n    }, [editor]);\n\n    const focus = useCallback(\n      (resetSelection = true) => {\n        try {\n          // Slate's `ReactEditor.focus` method can use `setTimeout` internally\n          // which prevents us from catching errors, so this is a reimplementation.\n          // https://github.com/ianstormtaylor/slate/blob/main/packages/slate-dom/src/plugin/dom-editor.ts\n          if (!ReactEditor.isFocused(editor)) {\n            SlateTransforms.select(\n              editor,\n              resetSelection || !editor.selection\n                ? SlateEditor.end(editor, [])\n                : editor.selection\n            );\n\n            const element = ReactEditor.toDOMNode(editor, editor);\n\n            if (editor.selection) {\n              const domSelection = window.getSelection();\n              const domRange = getDOMRange(editor, editor.selection);\n\n              if (domRange) {\n                domSelection?.removeAllRanges();\n                domSelection?.addRange(domRange);\n              }\n            }\n\n            element.focus({ preventScroll: true });\n          }\n        } catch {\n          // Slate's DOM-specific methods will throw if the editor's DOM\n          // node no longer exists. This action doesn't make sense on an\n          // unmounted editor so we can safely ignore it.\n        }\n      },\n      [editor]\n    );\n\n    const blur = useCallback(() => {\n      try {\n        ReactEditor.blur(editor);\n      } catch {\n        // Slate's DOM-specific methods will throw if the editor's DOM\n        // node no longer exists. This action doesn't make sense on an\n        // unmounted editor so we can safely ignore it.\n      }\n    }, [editor]);\n\n    const createMention = useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      focus();\n      insertMentionCharacter(editor);\n    }, [disabled, editor, focus]);\n\n    const insertText = useCallback(\n      (text: string) => {\n        if (disabled) {\n          return;\n        }\n\n        focus(false);\n        insertSlateText(editor, text);\n      },\n      [disabled, editor, focus]\n    );\n\n    const attachFiles = useCallback(() => {\n      if (disabled) {\n        return;\n      }\n\n      if (fileInputRef.current) {\n        fileInputRef.current.click();\n      }\n    }, [disabled]);\n\n    const handleAttachmentsInputChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n          return;\n        }\n\n        if (event.target.files) {\n          createAttachments(Array.from(event.target.files));\n\n          // Reset the input value to allow selecting the same file(s) again\n          event.target.value = \"\";\n        }\n      },\n      [createAttachments, disabled]\n    );\n\n    const onSubmitEnd = useCallback(() => {\n      clear();\n      clearAttachments();\n      setSubmitting(false);\n\n      if (blurOnSubmit) {\n        blur();\n      }\n    }, [blur, blurOnSubmit, clear, clearAttachments]);\n\n    const handleSubmit = useCallback(\n      (event: FormEvent<HTMLFormElement>) => {\n        if (disabled) {\n          return;\n        }\n\n        // In some situations (e.g. pressing Enter while composing diacritics), it's possible\n        // for the form to be submitted as empty even though we already checked whether the\n        // editor was empty when handling the key press.\n        const isEmpty = isEditorEmpty(editor, editor.children);\n\n        // We even prevent the user's `onSubmit` handler from being called if the editor is empty.\n        if (isEmpty) {\n          event.preventDefault();\n\n          return;\n        }\n\n        onSubmit?.(event);\n\n        if (!onComposerSubmit || event.isDefaultPrevented()) {\n          event.preventDefault();\n\n          return;\n        }\n\n        const body = composerBodyToCommentBody(\n          editor.children as ComposerBodyData\n        );\n        // Only non-local attachments are included to be submitted.\n        const commentAttachments: CommentAttachment[] = attachments\n          .filter(\n            (attachment) =>\n              attachment.type === \"attachment\" ||\n              (attachment.type === \"localAttachment\" &&\n                attachment.status === \"uploaded\")\n          )\n          .map((attachment) => {\n            return {\n              id: attachment.id,\n              type: \"attachment\",\n              mimeType: attachment.mimeType,\n              size: attachment.size,\n              name: attachment.name,\n            };\n          });\n\n        const promise = onComposerSubmit(\n          { body, attachments: commentAttachments },\n          event\n        );\n\n        event.preventDefault();\n\n        if (promise) {\n          setSubmitting(true);\n          promise.then(onSubmitEnd);\n        } else {\n          onSubmitEnd();\n        }\n      },\n      [disabled, editor, attachments, onComposerSubmit, onSubmit, onSubmitEnd]\n    );\n\n    const stopPropagation = useCallback((event: SyntheticEvent) => {\n      event.stopPropagation();\n    }, []);\n\n    const toggleMark = useCallback(\n      (mark: ComposerBodyMark) => {\n        toggleEditorMark(editor, mark);\n      },\n      [editor]\n    );\n\n    useObservable(onEditorChange, () => {\n      setMarks(getComposerBodyMarks(editor));\n    });\n\n    return (\n      <ComposerEditorContext.Provider\n        value={{\n          editor,\n          validate,\n          setFocused,\n          onEditorChange,\n          roomId,\n        }}\n      >\n        <ComposerAttachmentsContext.Provider\n          value={{\n            createAttachments,\n            isUploadingAttachments,\n            hasMaxAttachments,\n            maxAttachments,\n            maxAttachmentSize,\n          }}\n        >\n          <ComposerContext.Provider\n            value={{\n              isDisabled,\n              isFocused,\n              isEmpty,\n              canSubmit,\n              submit,\n              clear,\n              select,\n              focus,\n              blur,\n              createMention,\n              insertText,\n              attachments,\n              attachFiles,\n              removeAttachment,\n              toggleMark,\n              marks,\n            }}\n          >\n            <Component {...props} onSubmit={handleSubmit} ref={mergedRefs}>\n              <input\n                type=\"file\"\n                multiple\n                ref={fileInputRef}\n                onChange={handleAttachmentsInputChange}\n                onClick={stopPropagation}\n                tabIndex={-1}\n                style={{ display: \"none\" }}\n              />\n              <Slottable>{children}</Slottable>\n            </Component>\n          </ComposerContext.Provider>\n        </ComposerAttachmentsContext.Provider>\n      </ComposerEditorContext.Provider>\n    );\n  }\n);\n\n/**\n * A button to submit the composer.\n *\n * @example\n * <Composer.Submit>Send</Composer.Submit>\n */\nconst ComposerSubmit = forwardRef<HTMLButtonElement, ComposerSubmitProps>(\n  ({ children, disabled, asChild, ...props }, forwardedRef) => {\n    const Component = asChild ? Slot : \"button\";\n    const { canSubmit, isDisabled: isComposerDisabled } = useComposer();\n    const isDisabled = isComposerDisabled || disabled || !canSubmit;\n\n    return (\n      <Component\n        type=\"submit\"\n        {...props}\n        ref={forwardedRef}\n        disabled={isDisabled}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\n/**\n * A button which opens a file picker to create attachments.\n *\n * @example\n * <Composer.AttachFiles>Attach files</Composer.AttachFiles>\n */\nconst ComposerAttachFiles = forwardRef<\n  HTMLButtonElement,\n  ComposerAttachFilesProps\n>(({ children, onClick, disabled, asChild, ...props }, forwardedRef) => {\n  const Component = asChild ? Slot : \"button\";\n  const { hasMaxAttachments } = useComposerAttachmentsContext();\n  const { isDisabled: isComposerDisabled, attachFiles } = useComposer();\n  const isDisabled = isComposerDisabled || hasMaxAttachments || disabled;\n\n  const handleClick = useCallback(\n    (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n\n      if (!event.isDefaultPrevented()) {\n        attachFiles();\n      }\n    },\n    [attachFiles, onClick]\n  );\n\n  return (\n    <Component\n      type=\"button\"\n      {...props}\n      onClick={handleClick}\n      ref={forwardedRef}\n      disabled={isDisabled}\n    >\n      {children}\n    </Component>\n  );\n});\n\n/**\n * A drop area which accepts files to create attachments.\n *\n * @example\n * <Composer.AttachmentsDropArea>\n *   Drop files here\n * </Composer.AttachmentsDropArea>\n */\nconst ComposerAttachmentsDropArea = forwardRef<\n  HTMLDivElement,\n  ComposerAttachmentsDropAreaProps\n>(\n  (\n    {\n      onDragEnter,\n      onDragLeave,\n      onDragOver,\n      onDrop,\n      disabled,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"div\";\n    const { isDisabled: isComposerDisabled } = useComposer();\n    const isDisabled = isComposerDisabled || disabled;\n    const [, dropAreaProps] = useComposerAttachmentsDropArea({\n      onDragEnter,\n      onDragLeave,\n      onDragOver,\n      onDrop,\n      disabled: isDisabled,\n    });\n\n    return (\n      <Component\n        {...dropAreaProps}\n        data-disabled={isDisabled ? \"\" : undefined}\n        {...props}\n        ref={forwardedRef}\n      />\n    );\n  }\n);\n\n/**\n * A toggle button which toggles a specific text mark.\n *\n * @example\n * <Composer.MarkToggle mark=\"bold\">\n *   Bold\n * </Composer.MarkToggle>\n */\nconst ComposerMarkToggle = forwardRef<\n  HTMLButtonElement,\n  ComposerMarkToggleProps\n>(\n  (\n    {\n      children,\n      mark,\n      onValueChange,\n      onClick,\n      onPointerDown,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"button\";\n    const { marks, toggleMark } = useComposer();\n\n    const handlePointerDown = useCallback(\n      (event: PointerEvent<HTMLButtonElement>) => {\n        onPointerDown?.(event);\n\n        event.preventDefault();\n        event.stopPropagation();\n      },\n      [onPointerDown]\n    );\n\n    const handleClick = useCallback(\n      (event: MouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n\n        if (!event.isDefaultPrevented()) {\n          event.preventDefault();\n          event.stopPropagation();\n\n          toggleMark(mark);\n          onValueChange?.(mark);\n        }\n      },\n      [mark, onClick, onValueChange, toggleMark]\n    );\n\n    return (\n      <TogglePrimitive.Root\n        asChild\n        pressed={marks[mark]}\n        onClick={handleClick}\n        onPointerDown={handlePointerDown}\n        {...props}\n      >\n        <Component {...props} ref={forwardedRef}>\n          {children}\n        </Component>\n      </TogglePrimitive.Root>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  ComposerAttachFiles.displayName = COMPOSER_ATTACH_FILES_NAME;\n  ComposerAttachmentsDropArea.displayName = COMPOSER_ATTACHMENTS_DROP_AREA_NAME;\n  ComposerEditor.displayName = COMPOSER_EDITOR_NAME;\n  ComposerFloatingToolbar.displayName = COMPOSER_FLOATING_TOOLBAR_NAME;\n  ComposerForm.displayName = COMPOSER_FORM_NAME;\n  ComposerMention.displayName = COMPOSER_MENTION_NAME;\n  ComposerLink.displayName = COMPOSER_LINK_NAME;\n  ComposerSubmit.displayName = COMPOSER_SUBMIT_NAME;\n  ComposerSuggestions.displayName = COMPOSER_SUGGESTIONS_NAME;\n  ComposerSuggestionsList.displayName = COMPOSER_SUGGESTIONS_LIST_NAME;\n  ComposerSuggestionsListItem.displayName = COMPOSER_SUGGESTIONS_LIST_ITEM_NAME;\n  ComposerMarkToggle.displayName = COMPOSER_MARK_TOGGLE_NAME;\n}\n\n// NOTE: Every export from this file will be available publicly as Composer.*\nexport {\n  ComposerAttachFiles as AttachFiles,\n  ComposerAttachmentsDropArea as AttachmentsDropArea,\n  ComposerEditor as Editor,\n  ComposerFloatingToolbar as FloatingToolbar,\n  ComposerForm as Form,\n  ComposerLink as Link,\n  ComposerMarkToggle as MarkToggle,\n  ComposerMention as Mention,\n  ComposerSubmit as Submit,\n  ComposerSuggestions as Suggestions,\n  ComposerSuggestionsList as SuggestionsList,\n  ComposerSuggestionsListItem as SuggestionsListItem,\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsJA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAsC;AAC3B;AAEX;AAEA;AAA8B;AAC5B;AAEF;AAIE;AAAO;AACL;AACE;AACE;AACE;AACE;AACoD;AAChD;AACA;AACD;AACH;AACF;AACF;AACF;AACF;AAEJ;AAEA;AAAsC;AACpC;AACA;AACA;AAEF;AACE;AACA;AAEA;AAEK;AAEG;AACH;AAGP;AAEA;AAAmC;AACjC;AACA;AACA;AAEF;AACE;AAEA;AAKF;AAEA;AAAiD;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AACX;AAEF;AACE;AACA;AACA;AACA;AACA;AAEA;AAAM;AAC8B;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACyB;AACzB;AACA;AACW;AACL;AAGR;AACE;AAAkD;AAGpD;AACE;AACE;AAEA;AAAA;AAGF;AACA;AAA6B;AAK/B;AACE;AAAa;AAEb;AAIA;AACE;AAAA;AAIF;AACA;AAGA;AAGA;AACE;AACA;AACE;AAGJ;AACE;AAAmC;AACrC;AAGF;AAGM;AAA4B;AAA3B;AACQ;AACL;AACA;AACe;AACG;AAClB;AACA;AACA;AACK;AACP;AAEA;AAAC;AAAA;AACM;AACE;AACK;AACL;AACC;AAGF;AACM;AACF;AACV;AAEA;AAAC;AAAA;AACC;AACA;AAAA;AACF;AAAA;AACF;AAAA;AAKV;AAEA;AAA8C;AAC5C;AACW;AACX;AACA;AACA;AAEF;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AAAM;AAC8B;AAClC;AACA;AACA;AACA;AACA;AACyB;AACnB;AACN;AACA;AACW;AACL;AAGR;AACE;AACE;AAAA;AAGF;AACA;AAEA;AACA;AAEA;AACE;AACA;AAAyD;AAC3D;AAGF;AAEE;AAGA;AACE;AAGA;AAME;AACA;AAAiB;AAEjB;AAEA;AACA;AAAqB;AACvB;AACD;AAGH;AAGM;AAAgC;AAA/B;AACQ;AACL;AACA;AACA;AACK;AACP;AAEA;AAAC;AAAA;AACM;AACE;AACK;AACL;AACC;AAGF;AACM;AACF;AACV;AAEiB;AAAA;AACnB;AAAA;AAKV;AAWM;AAIJ;AACA;AACA;AAAM;AACJ;AACK;AACL;AACA;AAEF;AACA;AAAsB;AACgC;AAC1C;AAEZ;AACA;AAEA;AAA0B;AAEtB;AAEA;AACA;AAAsB;AACxB;AACc;AAGhB;AACE;AAAC;AAAA;AACC;AACK;AACL;AACW;AACP;AACW;AACkB;AACtB;AACC;AACL;AACI;AACM;AACL;AACC;AACR;AACL;AACK;AAEJ;AAAA;AAGP;AAEA;AAA+B;AAC7B;AACA;AAEF;AAEE;AAEA;AAAsB;AAElB;AACE;AAAC;AAAA;AACC;AACK;AAAA;AACP;AAEC;AAEH;AACE;AAAC;AAAA;AACC;AACK;AAAA;AAGP;AAGF;AAGE;AAGF;AAAO;AAEb;AAGA;AAA4B;AAC1B;AACA;AAEF;AACE;AACE;AAA6B;AAG/B;AACE;AAAyB;AAG3B;AACE;AAAwB;AAG1B;AACE;AAA2B;AAG7B;AACF;AAEA;AAAmC;AACjC;AAEF;AACE;AAEA;AAKF;AAQA;AAAwB;AAEpB;AACA;AAEA;AACE;AAAC;AAAA;AAC8B;AACzB;AACC;AAEJ;AAAA;AACH;AAGN;AAQA;AAAqB;AAEjB;AAEA;AACE;AAAC;AAAA;AACQ;AACH;AACA;AACC;AAEJ;AAAA;AACH;AAGN;AAKM;AAIJ;AACA;AACA;AAAM;AACC;AACL;AACA;AAEF;AACA;AAAsB;AACgC;AAC1C;AAEZ;AACA;AAEA;AACE;AAAC;AAAA;AACC;AACI;AAC6B;AACtB;AACC;AACL;AACI;AACM;AACJ;AACA;AACR;AACL;AACK;AAEJ;AAAA;AAGP;AAcM;AAIJ;AACA;AAEA;AACE;AAAC;AAAA;AACM;AACL;AACW;AACP;AACC;AAEJ;AAAA;AAGP;AAUA;AAAoC;AAKhC;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AAEA;AACA;AAAmB;AACO;AACH;AAGvB;AAEA;AACE;AACE;AAA+C;AACjD;AAGF;AAA0B;AAEtB;AAEA;AACE;AAAsB;AACxB;AACF;AACuC;AAGzC;AAA0B;AAEtB;AAEA;AACA;AAAsB;AACxB;AACc;AAGhB;AAAoB;AAEhB;AAEA;AAEA;AACA;AAEA;AACE;AAAkB;AACpB;AACF;AAC6B;AAG/B;AACE;AAAC;AAAA;AACM;AACL;AAC6B;AACA;AACd;AACA;AACN;AACL;AACC;AAEJ;AAAA;AACH;AAGN;AAEA;AAA0D;AAEtD;AAA2C;AAC7C;AAEE;AAEK;AAAA;AACQ;AACX;AAEJ;AAEE;AAUI;AAER;AAQA;AAAuB;AAEnB;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AAEA;AAAM;AACJ;AACA;AACA;AACA;AACA;AACY;AACZ;AAEF;AACA;AACA;AACE;AAA4C;AAE9C;AAA+D;AACV;AACxC;AAGb;AAIA;AACA;AAGA;AACA;AAA2B;AACzB;AACc;AAEhB;AAAM;AACJ;AACA;AACA;AACA;AAEF;AACA;AACA;AACA;AAA8B;AAItB;AACH;AAGL;AAAsB;AAElB;AACkE;AAEpE;AACc;AAGhB;AAAqB;AAEjB;AAKA;AAAsB;AACxB;AACyB;AAG3B;AAAsB;AAElB;AACE;AAAA;AAGF;AACA;AACA;AACA;AAAmC;AACrC;AACwD;AAG1D;AAAsB;AAElB;AAEA;AACE;AAAA;AAIF;AACE;AAA6B;AAI/B;AACE;AAA2B;AAG7B;AAEE;AACE;AACA;AAAsC;AAIxC;AACE;AACA;AAA0C;AAI5C;AACE;AAEA;AAEA;AAAqB;AAIvB;AACE;AACA;AACA;AAAmC;AACrC;AAEA;AAEE;AACE;AACA;AAAgC;AAClC;AAIF;AACE;AAAK;AAIP;AAEE;AAEA;AACE;AAAO;AACT;AAIF;AACE;AACA;AAAmB;AAIrB;AACE;AACA;AAA+B;AAIjC;AACE;AACA;AAAiC;AAInC;AACE;AACA;AAAwC;AAI1C;AACE;AACA;AAA+B;AACjC;AACF;AACF;AACA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AAAoB;AAEhB;AAEA;AACE;AAAe;AACjB;AACF;AACoB;AAGtB;AAAmB;AAEf;AAEA;AACE;AAAgB;AAClB;AACF;AACmB;AAGrB;AAEA;AACA;AAA6B;AAEzB;AAAkC;AACJ;AAG9B;AACE;AAAuC;AACzC;AACF;AACsD;AAGxD;AAAwC;AAGhC;AACQ;AACe;AACJ;AACA;AAC+C;AAGhE;AACmB;AACA;AAElB;AACT;AACE;AACA;AACA;AACA;AACA;AACA;AACF;AAGF;AACE;AAA2C;AAI7C;AACE;AACE;AAAA;AAOF;AAEA;AAAiC;AAKnC;AACE;AACE;AAAO;AACT;AAGF;AAA4B;AAExB;AAAoC;AACN;AAG9B;AAAqB;AACvB;AACkC;AAGpC;AACE;AAAC;AAAA;AACC;AACc;AACJ;AAEV;AAAA;AAAC;AAAA;AACC;AACuC;AACxB;AACJ;AACgB;AACE;AACzB;AACA;AACM;AACA;AACC;AACF;AACD;AACR;AACY;AACO;AAAA;AACrB;AAEE;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACU;AACN;AACI;AACM;AACd;AAAA;AACF;AAGA;AAAC;AAAA;AACC;AACI;AACJ;AACA;AACA;AAAA;AACF;AAAA;AAAA;AAEJ;AAGN;AAEA;AACA;AAEA;AACE;AAAO;AACC;AACE;AACsB;AACnB;AACA;AACI;AACf;AAEJ;AAWA;AAAqB;AAEjB;AACE;AACA;AACA;AACsB;AACtB;AACe;AACS;AACxB;AACA;AACQ;AACL;AAIL;AACA;AACA;AACA;AACA;AAEA;AACA;AACE;AAAqE;AAIvE;AACA;AAEA;AAAM;AACJ;AACA;AACA;AACA;AACA;AACoD;AACvC;AACb;AAEF;AACA;AAEA;AACE;AAAoC;AAEtC;AACE;AAAoB;AAEtB;AAEA;AACA;AACA;AACA;AAIA;AAIA;AACE;AAAY;AACwB;AACpC;AAGF;AAA0B;AAEtB;AACE;AAAA;AAGF;AAAmC;AACjC;AACiB;AAGnB;AAEA;AAEA;AAA0B;AAC5B;AACoD;AAGtD;AAEA;AACE;AAA+B;AAGjC;AACE;AAAkC;AAGpC;AAAe;AACQ;AACA;AACnB;AACD;AAEH;AAEA;AAAiB;AAEb;AAAqC;AACvC;AACO;AAGT;AACE;AACE;AAAA;AAKF;AACE;AACE;AAAyB;AAC3B;AACD;AAGH;AACE;AAA+B;AACzB;AACkC;AACH;AACnC;AACD;AAGH;AACE;AAA0D;AAG5D;AAAc;AAEV;AAIE;AACE;AAAgB;AACd;AAGW;AAGb;AAEA;AACE;AACA;AAEA;AACE;AACA;AAA+B;AACjC;AAGF;AAAqC;AACvC;AACM;AAIR;AACF;AACO;AAGT;AACE;AACE;AAAuB;AACjB;AAIR;AAGF;AACE;AACE;AAAA;AAGF;AACA;AAA6B;AAG/B;AAAmB;AAEf;AACE;AAAA;AAGF;AACA;AAA4B;AAC9B;AACwB;AAG1B;AACE;AACE;AAAA;AAGF;AACE;AAA2B;AAC7B;AAGF;AAAqC;AAEjC;AACE;AAAA;AAGF;AACE;AAGA;AAAqB;AACvB;AACF;AAC4B;AAG9B;AACE;AACA;AACA;AAEA;AACE;AAAK;AACP;AAGF;AAAqB;AAEjB;AACE;AAAA;AAMF;AAGA;AACE;AAEA;AAAA;AAGF;AAEA;AACE;AAEA;AAAA;AAGF;AAAa;AACJ;AAGT;AACG;AAI2B;AAG1B;AAAO;AACU;AACT;AACe;AACJ;AACA;AACnB;AAGJ;AAAgB;AAC0B;AACxC;AAGF;AAEA;AACE;AACA;AAAwB;AAExB;AAAY;AACd;AACF;AACuE;AAGzE;AACE;AAAsB;AAGxB;AAAmB;AAEf;AAA6B;AAC/B;AACO;AAGT;AACE;AAAqC;AAGvC;AACE;AAAuB;AAAtB;AACQ;AACL;AACA;AACA;AACA;AACA;AACF;AAEA;AAA4B;AAA3B;AACQ;AACL;AACA;AACA;AACA;AACA;AACF;AAEA;AAAiB;AAAhB;AACQ;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;AAGE;AAAA;AAAC;AAAA;AACM;AACG;AACH;AACK;AACD;AACC;AACe;AAAA;AAC3B;AACqB;AACvB;AAAA;AACF;AAAA;AACF;AAAA;AACF;AAGN;AAQA;AAAuB;AAEnB;AACA;AACA;AAEA;AACE;AAAC;AAAA;AACM;AACD;AACC;AACK;AAET;AAAA;AACH;AAGN;AAQM;AAIJ;AACA;AACA;AACA;AAEA;AAAoB;AAEhB;AAEA;AACE;AAAY;AACd;AACF;AACqB;AAGvB;AACE;AAAC;AAAA;AACM;AACD;AACK;AACJ;AACK;AAET;AAAA;AAGP;AAUA;AAAoC;AAKhC;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AACA;AACA;AAAyD;AACvD;AACA;AACA;AACA;AACU;AAGZ;AACE;AAAC;AAAA;AACK;AAC6B;AAC7B;AACC;AAAA;AACP;AAGN;AAUA;AAA2B;AAKvB;AACE;AACA;AACA;AACA;AACA;AACA;AACG;AAIL;AACA;AAEA;AAA0B;AAEtB;AAEA;AACA;AAAsB;AACxB;AACc;AAGhB;AAAoB;AAEhB;AAEA;AACE;AACA;AAEA;AACA;AAAoB;AACtB;AACF;AACyC;AAG3C;AACE;AAAiB;AAAhB;AACQ;AACY;AACV;AACM;AACX;AAIJ;AAAA;AACF;AAGN;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF;;"}

package/dist/primitives/Duration.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var radixUi = require('radix-ui');
+var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 var intl = require('../utils/intl.cjs');
 var useInterval = require('../utils/use-interval.cjs');
@@ -150,7 +150,7 @@ const Duration = react.forwardRef(
     asChild,
     ...props
   }, forwardedRef) => {
-    const Component = asChild ? radixUi.Slot.Slot : "time";
+    const Component = asChild ? reactSlot.Slot : "time";
     const [rerender, key] = useRerender.useRerender();
     const resolvedDuration = react.useMemo(() => {
       if (duration !== void 0) {

package/dist/primitives/Duration.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Duration.cjs","sources":["../../src/primitives/Duration.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport { forwardRef, type ReactNode, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { numberFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst RENDER_INTERVAL = 0.5 * 1000; // 0.5 second\n\nconst DURATION_NAME = \"Duration\";\n\nexport type DurationProps = Omit<\n  ComponentPropsWithSlot<\"time\">,\n  \"children\" | \"title\"\n> &\n  Relax<\n    | {\n        /**\n         * The duration in milliseconds.\n         * If provided, `from` and `to` will be ignored.\n         */\n        duration: number;\n      }\n    | {\n        /**\n         * The date at which the duration starts.\n         * If provided, `duration` will be ignored.\n         * If provided without `to` it means that the duration is in progress,\n         * and the component will re-render at an interval, customizable with\n         * the `interval` prop.\n         */\n        from: Date | string | number;\n\n        /**\n         * The date at which the duration ends.\n         * If `from` is provided without `to`, `Date.now()` will be used.\n         */\n        to?: Date | string | number;\n      }\n  > & {\n    /**\n     * A function to format the displayed duration.\n     */\n    children?: (duration: number, locale?: string) => ReactNode;\n\n    /**\n     * The `title` attribute's value or a function to format it.\n     */\n    title?: string | ((duration: number, locale?: string) => string);\n\n    /**\n     * The interval in milliseconds at which the component will re-render if\n     * `from` is provided without `to`, meaning that the duration is in progress.\n     * Can be set to `false` to disable re-rendering.\n     */\n    interval?: number | false;\n\n    /**\n     * The locale used when formatting the duration.\n     */\n    locale?: string;\n  };\n\ninterface DurationParts {\n  weeks: number;\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  milliseconds: number;\n}\n\nfunction getDurationParts(duration: number): DurationParts {\n  let remaining = Math.max(duration, 0);\n\n  const milliseconds = remaining % 1000;\n  remaining = Math.floor(remaining / 1000);\n\n  const seconds = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const minutes = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const hours = remaining % 24;\n  remaining = Math.floor(remaining / 24);\n\n  const days = remaining % 7;\n  const weeks = Math.floor(remaining / 7);\n\n  return { weeks, days, hours, minutes, seconds, milliseconds };\n}\n\nconst durationPartsToNumberFormatOptions: Record<\n  keyof DurationParts,\n  Intl.NumberFormatOptions[\"unit\"]\n> = {\n  weeks: \"week\",\n  days: \"day\",\n  hours: \"hour\",\n  minutes: \"minute\",\n  seconds: \"second\",\n  milliseconds: \"millisecond\",\n};\n\n/**\n * Formats a duration in a short format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatShortDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"narrow\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"narrow\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration in a longer format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatVerboseDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"long\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"long\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration as ISO 8601.\n * TODO: Use `Temporal.Duration` when it's better supported.\n */\nexport function formatIso8601Duration(duration: number) {\n  const normalizedDuration = Math.max(duration, 0);\n\n  if (normalizedDuration === 0) {\n    return \"PT0S\";\n  }\n\n  const { weeks, days, hours, minutes, seconds, milliseconds } =\n    getDurationParts(normalizedDuration);\n\n  let isoDuration = \"P\";\n\n  // 1. Weeks\n  if (weeks > 0) {\n    isoDuration += `${weeks}W`;\n  }\n\n  // 2. Days\n  if (days > 0) {\n    isoDuration += `${days}D`;\n  }\n\n  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {\n    isoDuration += \"T\";\n\n    // 3. Hours\n    if (hours > 0) {\n      isoDuration += `${hours}H`;\n    }\n\n    // 4. Minutes\n    if (minutes > 0) {\n      isoDuration += `${minutes}M`;\n    }\n\n    // 5. Seconds and milliseconds\n    if (seconds > 0 || milliseconds > 0) {\n      if (milliseconds > 0) {\n        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, \"0\").replace(/0+$/, \"\")}S`;\n      } else {\n        isoDuration += `${seconds}S`;\n      }\n    }\n  }\n\n  return isoDuration;\n}\n\n/**\n * Converts a Date or Date-like value to a timestamp in milliseconds.\n */\nfunction getDateTime(date: Date | string | number) {\n  if (date instanceof Date) {\n    return date.getTime();\n  }\n\n  return new Date(date).getTime();\n}\n\n/**\n * Get a duration between two Date or Date-like values.\n */\nexport function getDuration(\n  from: Date | string | number,\n  to: Date | string | number\n) {\n  return getDateTime(to) - getDateTime(from);\n}\n\n/**\n * Displays a formatted duration, and automatically re-renders to if the\n * duration is in progress.\n *\n * @example\n * <Duration duration={3 * 60 * 1000} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} to={oneHourAgoDate} />\n */\nexport const Duration = forwardRef<HTMLTimeElement, DurationProps>(\n  (\n    {\n      duration,\n      from,\n      to,\n      locale,\n      dateTime,\n      title: renderTitle = formatVerboseDuration,\n      children: renderChildren = formatShortDuration,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? SlotPrimitive.Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const resolvedDuration = useMemo(() => {\n      if (duration !== undefined) {\n        return duration;\n      }\n\n      if (from !== undefined) {\n        return getDuration(from, to ?? Date.now());\n      }\n\n      return 0;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [duration, from, to, key]);\n    const normalizedDuration = useMemo(\n      () => formatIso8601Duration(resolvedDuration),\n      [resolvedDuration]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(resolvedDuration, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, resolvedDuration, locale]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(resolvedDuration, locale)\n          : renderChildren,\n\n      [renderChildren, resolvedDuration, locale]\n    );\n\n    // Only re-render if the duration is in progress.\n    useInterval(\n      rerender,\n      from !== undefined && to === undefined ? interval : false\n    );\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDuration}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Duration.displayName = DURATION_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAWA;AAEA;AA+DA;AACE;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACF;AAEA;AAGI;AACK;AACD;AACC;AACE;AACA;AAEX;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACsC;AAChC;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACsC;AAChC;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMO;AACL;AAEA;AACE;AAAO;AAGT;AAGA;AAGA;AACE;AAAuB;AAIzB;AACE;AAAsB;AAGxB;AACE;AAGA;AACE;AAAuB;AAIzB;AACE;AAAyB;AAI3B;AACE;AACE;AAAwF;AAExF;AAAyB;AAC3B;AACF;AAGF;AACF;AAKA;AACE;AACE;AAAoB;AAGtB;AACF;AAKgB;AAId;AACF;AAeO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACqB;AACM;AAChB;AACX;AACG;AAIL;AACA;AACA;AACE;AACE;AAAO;AAGT;AACE;AAAyC;AAG3C;AAAO;AAGT;AAA2B;AACmB;AAC3B;AAEnB;AAAc;AAIN;AAAA;AAEgC;AAExC;AAAiB;AAIT;AAEmC;AAI3C;AAAA;AACE;AACoD;AAGtD;AACE;AAAC;AAAA;AACK;AACC;AACiB;AACtB;AAEC;AAAA;AACH;AAGN;AAEA;AACE;AACF;;;;"}
+{"version":3,"file":"Duration.cjs","sources":["../../src/primitives/Duration.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef, type ReactNode, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { numberFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst RENDER_INTERVAL = 0.5 * 1000; // 0.5 second\n\nconst DURATION_NAME = \"Duration\";\n\nexport type DurationProps = Omit<\n  ComponentPropsWithSlot<\"time\">,\n  \"children\" | \"title\"\n> &\n  Relax<\n    | {\n        /**\n         * The duration in milliseconds.\n         * If provided, `from` and `to` will be ignored.\n         */\n        duration: number;\n      }\n    | {\n        /**\n         * The date at which the duration starts.\n         * If provided, `duration` will be ignored.\n         * If provided without `to` it means that the duration is in progress,\n         * and the component will re-render at an interval, customizable with\n         * the `interval` prop.\n         */\n        from: Date | string | number;\n\n        /**\n         * The date at which the duration ends.\n         * If `from` is provided without `to`, `Date.now()` will be used.\n         */\n        to?: Date | string | number;\n      }\n  > & {\n    /**\n     * A function to format the displayed duration.\n     */\n    children?: (duration: number, locale?: string) => ReactNode;\n\n    /**\n     * The `title` attribute's value or a function to format it.\n     */\n    title?: string | ((duration: number, locale?: string) => string);\n\n    /**\n     * The interval in milliseconds at which the component will re-render if\n     * `from` is provided without `to`, meaning that the duration is in progress.\n     * Can be set to `false` to disable re-rendering.\n     */\n    interval?: number | false;\n\n    /**\n     * The locale used when formatting the duration.\n     */\n    locale?: string;\n  };\n\ninterface DurationParts {\n  weeks: number;\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  milliseconds: number;\n}\n\nfunction getDurationParts(duration: number): DurationParts {\n  let remaining = Math.max(duration, 0);\n\n  const milliseconds = remaining % 1000;\n  remaining = Math.floor(remaining / 1000);\n\n  const seconds = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const minutes = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const hours = remaining % 24;\n  remaining = Math.floor(remaining / 24);\n\n  const days = remaining % 7;\n  const weeks = Math.floor(remaining / 7);\n\n  return { weeks, days, hours, minutes, seconds, milliseconds };\n}\n\nconst durationPartsToNumberFormatOptions: Record<\n  keyof DurationParts,\n  Intl.NumberFormatOptions[\"unit\"]\n> = {\n  weeks: \"week\",\n  days: \"day\",\n  hours: \"hour\",\n  minutes: \"minute\",\n  seconds: \"second\",\n  milliseconds: \"millisecond\",\n};\n\n/**\n * Formats a duration in a short format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatShortDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"narrow\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"narrow\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration in a longer format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatVerboseDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"long\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"long\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration as ISO 8601.\n * TODO: Use `Temporal.Duration` when it's better supported.\n */\nexport function formatIso8601Duration(duration: number) {\n  const normalizedDuration = Math.max(duration, 0);\n\n  if (normalizedDuration === 0) {\n    return \"PT0S\";\n  }\n\n  const { weeks, days, hours, minutes, seconds, milliseconds } =\n    getDurationParts(normalizedDuration);\n\n  let isoDuration = \"P\";\n\n  // 1. Weeks\n  if (weeks > 0) {\n    isoDuration += `${weeks}W`;\n  }\n\n  // 2. Days\n  if (days > 0) {\n    isoDuration += `${days}D`;\n  }\n\n  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {\n    isoDuration += \"T\";\n\n    // 3. Hours\n    if (hours > 0) {\n      isoDuration += `${hours}H`;\n    }\n\n    // 4. Minutes\n    if (minutes > 0) {\n      isoDuration += `${minutes}M`;\n    }\n\n    // 5. Seconds and milliseconds\n    if (seconds > 0 || milliseconds > 0) {\n      if (milliseconds > 0) {\n        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, \"0\").replace(/0+$/, \"\")}S`;\n      } else {\n        isoDuration += `${seconds}S`;\n      }\n    }\n  }\n\n  return isoDuration;\n}\n\n/**\n * Converts a Date or Date-like value to a timestamp in milliseconds.\n */\nfunction getDateTime(date: Date | string | number) {\n  if (date instanceof Date) {\n    return date.getTime();\n  }\n\n  return new Date(date).getTime();\n}\n\n/**\n * Get a duration between two Date or Date-like values.\n */\nexport function getDuration(\n  from: Date | string | number,\n  to: Date | string | number\n) {\n  return getDateTime(to) - getDateTime(from);\n}\n\n/**\n * Displays a formatted duration, and automatically re-renders to if the\n * duration is in progress.\n *\n * @example\n * <Duration duration={3 * 60 * 1000} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} to={oneHourAgoDate} />\n */\nexport const Duration = forwardRef<HTMLTimeElement, DurationProps>(\n  (\n    {\n      duration,\n      from,\n      to,\n      locale,\n      dateTime,\n      title: renderTitle = formatVerboseDuration,\n      children: renderChildren = formatShortDuration,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const resolvedDuration = useMemo(() => {\n      if (duration !== undefined) {\n        return duration;\n      }\n\n      if (from !== undefined) {\n        return getDuration(from, to ?? Date.now());\n      }\n\n      return 0;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [duration, from, to, key]);\n    const normalizedDuration = useMemo(\n      () => formatIso8601Duration(resolvedDuration),\n      [resolvedDuration]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(resolvedDuration, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, resolvedDuration, locale]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(resolvedDuration, locale)\n          : renderChildren,\n\n      [renderChildren, resolvedDuration, locale]\n    );\n\n    // Only re-render if the duration is in progress.\n    useInterval(\n      rerender,\n      from !== undefined && to === undefined ? interval : false\n    );\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDuration}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Duration.displayName = DURATION_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAWA;AAEA;AA+DA;AACE;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACF;AAEA;AAGI;AACK;AACD;AACC;AACE;AACA;AAEX;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACsC;AAChC;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACsC;AAChC;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMO;AACL;AAEA;AACE;AAAO;AAGT;AAGA;AAGA;AACE;AAAuB;AAIzB;AACE;AAAsB;AAGxB;AACE;AAGA;AACE;AAAuB;AAIzB;AACE;AAAyB;AAI3B;AACE;AACE;AAAwF;AAExF;AAAyB;AAC3B;AACF;AAGF;AACF;AAKA;AACE;AACE;AAAoB;AAGtB;AACF;AAKgB;AAId;AACF;AAeO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACqB;AACM;AAChB;AACX;AACG;AAIL;AACA;AACA;AACE;AACE;AAAO;AAGT;AACE;AAAyC;AAG3C;AAAO;AAGT;AAA2B;AACmB;AAC3B;AAEnB;AAAc;AAIN;AAAA;AAEgC;AAExC;AAAiB;AAIT;AAEmC;AAI3C;AAAA;AACE;AACoD;AAGtD;AACE;AAAC;AAAA;AACK;AACC;AACiB;AACtB;AAEC;AAAA;AACH;AAGN;AAEA;AACE;AACF;;;;"}

package/dist/primitives/Duration.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from 'radix-ui';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useMemo } from 'react';
 import { numberFormat } from '../utils/intl.js';
 import { useInterval } from '../utils/use-interval.js';
@@ -148,7 +148,7 @@ const Duration = forwardRef(
     asChild,
     ...props
   }, forwardedRef) => {
-    const Component = asChild ? Slot.Slot : "time";
+    const Component = asChild ? Slot : "time";
     const [rerender, key] = useRerender();
     const resolvedDuration = useMemo(() => {
       if (duration !== void 0) {

package/dist/primitives/Duration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Duration.js","sources":["../../src/primitives/Duration.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport { forwardRef, type ReactNode, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { numberFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst RENDER_INTERVAL = 0.5 * 1000; // 0.5 second\n\nconst DURATION_NAME = \"Duration\";\n\nexport type DurationProps = Omit<\n  ComponentPropsWithSlot<\"time\">,\n  \"children\" | \"title\"\n> &\n  Relax<\n    | {\n        /**\n         * The duration in milliseconds.\n         * If provided, `from` and `to` will be ignored.\n         */\n        duration: number;\n      }\n    | {\n        /**\n         * The date at which the duration starts.\n         * If provided, `duration` will be ignored.\n         * If provided without `to` it means that the duration is in progress,\n         * and the component will re-render at an interval, customizable with\n         * the `interval` prop.\n         */\n        from: Date | string | number;\n\n        /**\n         * The date at which the duration ends.\n         * If `from` is provided without `to`, `Date.now()` will be used.\n         */\n        to?: Date | string | number;\n      }\n  > & {\n    /**\n     * A function to format the displayed duration.\n     */\n    children?: (duration: number, locale?: string) => ReactNode;\n\n    /**\n     * The `title` attribute's value or a function to format it.\n     */\n    title?: string | ((duration: number, locale?: string) => string);\n\n    /**\n     * The interval in milliseconds at which the component will re-render if\n     * `from` is provided without `to`, meaning that the duration is in progress.\n     * Can be set to `false` to disable re-rendering.\n     */\n    interval?: number | false;\n\n    /**\n     * The locale used when formatting the duration.\n     */\n    locale?: string;\n  };\n\ninterface DurationParts {\n  weeks: number;\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  milliseconds: number;\n}\n\nfunction getDurationParts(duration: number): DurationParts {\n  let remaining = Math.max(duration, 0);\n\n  const milliseconds = remaining % 1000;\n  remaining = Math.floor(remaining / 1000);\n\n  const seconds = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const minutes = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const hours = remaining % 24;\n  remaining = Math.floor(remaining / 24);\n\n  const days = remaining % 7;\n  const weeks = Math.floor(remaining / 7);\n\n  return { weeks, days, hours, minutes, seconds, milliseconds };\n}\n\nconst durationPartsToNumberFormatOptions: Record<\n  keyof DurationParts,\n  Intl.NumberFormatOptions[\"unit\"]\n> = {\n  weeks: \"week\",\n  days: \"day\",\n  hours: \"hour\",\n  minutes: \"minute\",\n  seconds: \"second\",\n  milliseconds: \"millisecond\",\n};\n\n/**\n * Formats a duration in a short format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatShortDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"narrow\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"narrow\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration in a longer format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatVerboseDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"long\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"long\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration as ISO 8601.\n * TODO: Use `Temporal.Duration` when it's better supported.\n */\nexport function formatIso8601Duration(duration: number) {\n  const normalizedDuration = Math.max(duration, 0);\n\n  if (normalizedDuration === 0) {\n    return \"PT0S\";\n  }\n\n  const { weeks, days, hours, minutes, seconds, milliseconds } =\n    getDurationParts(normalizedDuration);\n\n  let isoDuration = \"P\";\n\n  // 1. Weeks\n  if (weeks > 0) {\n    isoDuration += `${weeks}W`;\n  }\n\n  // 2. Days\n  if (days > 0) {\n    isoDuration += `${days}D`;\n  }\n\n  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {\n    isoDuration += \"T\";\n\n    // 3. Hours\n    if (hours > 0) {\n      isoDuration += `${hours}H`;\n    }\n\n    // 4. Minutes\n    if (minutes > 0) {\n      isoDuration += `${minutes}M`;\n    }\n\n    // 5. Seconds and milliseconds\n    if (seconds > 0 || milliseconds > 0) {\n      if (milliseconds > 0) {\n        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, \"0\").replace(/0+$/, \"\")}S`;\n      } else {\n        isoDuration += `${seconds}S`;\n      }\n    }\n  }\n\n  return isoDuration;\n}\n\n/**\n * Converts a Date or Date-like value to a timestamp in milliseconds.\n */\nfunction getDateTime(date: Date | string | number) {\n  if (date instanceof Date) {\n    return date.getTime();\n  }\n\n  return new Date(date).getTime();\n}\n\n/**\n * Get a duration between two Date or Date-like values.\n */\nexport function getDuration(\n  from: Date | string | number,\n  to: Date | string | number\n) {\n  return getDateTime(to) - getDateTime(from);\n}\n\n/**\n * Displays a formatted duration, and automatically re-renders to if the\n * duration is in progress.\n *\n * @example\n * <Duration duration={3 * 60 * 1000} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} to={oneHourAgoDate} />\n */\nexport const Duration = forwardRef<HTMLTimeElement, DurationProps>(\n  (\n    {\n      duration,\n      from,\n      to,\n      locale,\n      dateTime,\n      title: renderTitle = formatVerboseDuration,\n      children: renderChildren = formatShortDuration,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? SlotPrimitive.Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const resolvedDuration = useMemo(() => {\n      if (duration !== undefined) {\n        return duration;\n      }\n\n      if (from !== undefined) {\n        return getDuration(from, to ?? Date.now());\n      }\n\n      return 0;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [duration, from, to, key]);\n    const normalizedDuration = useMemo(\n      () => formatIso8601Duration(resolvedDuration),\n      [resolvedDuration]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(resolvedDuration, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, resolvedDuration, locale]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(resolvedDuration, locale)\n          : renderChildren,\n\n      [renderChildren, resolvedDuration, locale]\n    );\n\n    // Only re-render if the duration is in progress.\n    useInterval(\n      rerender,\n      from !== undefined && to === undefined ? interval : false\n    );\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDuration}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Duration.displayName = DURATION_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;AAWA;AAEA;AA+DA;AACE;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACF;AAEA;AAGI;AACK;AACD;AACC;AACE;AACA;AAEX;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACsC;AAChC;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACsC;AAChC;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMO;AACL;AAEA;AACE;AAAO;AAGT;AAGA;AAGA;AACE;AAAuB;AAIzB;AACE;AAAsB;AAGxB;AACE;AAGA;AACE;AAAuB;AAIzB;AACE;AAAyB;AAI3B;AACE;AACE;AAAwF;AAExF;AAAyB;AAC3B;AACF;AAGF;AACF;AAKA;AACE;AACE;AAAoB;AAGtB;AACF;AAKgB;AAId;AACF;AAeO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACqB;AACM;AAChB;AACX;AACG;AAIL;AACA;AACA;AACE;AACE;AAAO;AAGT;AACE;AAAyC;AAG3C;AAAO;AAGT;AAA2B;AACmB;AAC3B;AAEnB;AAAc;AAIN;AAAA;AAEgC;AAExC;AAAiB;AAIT;AAEmC;AAI3C;AAAA;AACE;AACoD;AAGtD;AACE;AAAC;AAAA;AACK;AACC;AACiB;AACtB;AAEC;AAAA;AACH;AAGN;AAEA;AACE;AACF;;"}
+{"version":3,"file":"Duration.js","sources":["../../src/primitives/Duration.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef, type ReactNode, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { numberFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst RENDER_INTERVAL = 0.5 * 1000; // 0.5 second\n\nconst DURATION_NAME = \"Duration\";\n\nexport type DurationProps = Omit<\n  ComponentPropsWithSlot<\"time\">,\n  \"children\" | \"title\"\n> &\n  Relax<\n    | {\n        /**\n         * The duration in milliseconds.\n         * If provided, `from` and `to` will be ignored.\n         */\n        duration: number;\n      }\n    | {\n        /**\n         * The date at which the duration starts.\n         * If provided, `duration` will be ignored.\n         * If provided without `to` it means that the duration is in progress,\n         * and the component will re-render at an interval, customizable with\n         * the `interval` prop.\n         */\n        from: Date | string | number;\n\n        /**\n         * The date at which the duration ends.\n         * If `from` is provided without `to`, `Date.now()` will be used.\n         */\n        to?: Date | string | number;\n      }\n  > & {\n    /**\n     * A function to format the displayed duration.\n     */\n    children?: (duration: number, locale?: string) => ReactNode;\n\n    /**\n     * The `title` attribute's value or a function to format it.\n     */\n    title?: string | ((duration: number, locale?: string) => string);\n\n    /**\n     * The interval in milliseconds at which the component will re-render if\n     * `from` is provided without `to`, meaning that the duration is in progress.\n     * Can be set to `false` to disable re-rendering.\n     */\n    interval?: number | false;\n\n    /**\n     * The locale used when formatting the duration.\n     */\n    locale?: string;\n  };\n\ninterface DurationParts {\n  weeks: number;\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  milliseconds: number;\n}\n\nfunction getDurationParts(duration: number): DurationParts {\n  let remaining = Math.max(duration, 0);\n\n  const milliseconds = remaining % 1000;\n  remaining = Math.floor(remaining / 1000);\n\n  const seconds = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const minutes = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const hours = remaining % 24;\n  remaining = Math.floor(remaining / 24);\n\n  const days = remaining % 7;\n  const weeks = Math.floor(remaining / 7);\n\n  return { weeks, days, hours, minutes, seconds, milliseconds };\n}\n\nconst durationPartsToNumberFormatOptions: Record<\n  keyof DurationParts,\n  Intl.NumberFormatOptions[\"unit\"]\n> = {\n  weeks: \"week\",\n  days: \"day\",\n  hours: \"hour\",\n  minutes: \"minute\",\n  seconds: \"second\",\n  milliseconds: \"millisecond\",\n};\n\n/**\n * Formats a duration in a short format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatShortDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"narrow\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"narrow\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration in a longer format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatVerboseDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"long\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"long\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration as ISO 8601.\n * TODO: Use `Temporal.Duration` when it's better supported.\n */\nexport function formatIso8601Duration(duration: number) {\n  const normalizedDuration = Math.max(duration, 0);\n\n  if (normalizedDuration === 0) {\n    return \"PT0S\";\n  }\n\n  const { weeks, days, hours, minutes, seconds, milliseconds } =\n    getDurationParts(normalizedDuration);\n\n  let isoDuration = \"P\";\n\n  // 1. Weeks\n  if (weeks > 0) {\n    isoDuration += `${weeks}W`;\n  }\n\n  // 2. Days\n  if (days > 0) {\n    isoDuration += `${days}D`;\n  }\n\n  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {\n    isoDuration += \"T\";\n\n    // 3. Hours\n    if (hours > 0) {\n      isoDuration += `${hours}H`;\n    }\n\n    // 4. Minutes\n    if (minutes > 0) {\n      isoDuration += `${minutes}M`;\n    }\n\n    // 5. Seconds and milliseconds\n    if (seconds > 0 || milliseconds > 0) {\n      if (milliseconds > 0) {\n        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, \"0\").replace(/0+$/, \"\")}S`;\n      } else {\n        isoDuration += `${seconds}S`;\n      }\n    }\n  }\n\n  return isoDuration;\n}\n\n/**\n * Converts a Date or Date-like value to a timestamp in milliseconds.\n */\nfunction getDateTime(date: Date | string | number) {\n  if (date instanceof Date) {\n    return date.getTime();\n  }\n\n  return new Date(date).getTime();\n}\n\n/**\n * Get a duration between two Date or Date-like values.\n */\nexport function getDuration(\n  from: Date | string | number,\n  to: Date | string | number\n) {\n  return getDateTime(to) - getDateTime(from);\n}\n\n/**\n * Displays a formatted duration, and automatically re-renders to if the\n * duration is in progress.\n *\n * @example\n * <Duration duration={3 * 60 * 1000} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} to={oneHourAgoDate} />\n */\nexport const Duration = forwardRef<HTMLTimeElement, DurationProps>(\n  (\n    {\n      duration,\n      from,\n      to,\n      locale,\n      dateTime,\n      title: renderTitle = formatVerboseDuration,\n      children: renderChildren = formatShortDuration,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const resolvedDuration = useMemo(() => {\n      if (duration !== undefined) {\n        return duration;\n      }\n\n      if (from !== undefined) {\n        return getDuration(from, to ?? Date.now());\n      }\n\n      return 0;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [duration, from, to, key]);\n    const normalizedDuration = useMemo(\n      () => formatIso8601Duration(resolvedDuration),\n      [resolvedDuration]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(resolvedDuration, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, resolvedDuration, locale]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(resolvedDuration, locale)\n          : renderChildren,\n\n      [renderChildren, resolvedDuration, locale]\n    );\n\n    // Only re-render if the duration is in progress.\n    useInterval(\n      rerender,\n      from !== undefined && to === undefined ? interval : false\n    );\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDuration}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Duration.displayName = DURATION_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;AAWA;AAEA;AA+DA;AACE;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACF;AAEA;AAGI;AACK;AACD;AACC;AACE;AACA;AAEX;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACsC;AAChC;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACsC;AAChC;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMO;AACL;AAEA;AACE;AAAO;AAGT;AAGA;AAGA;AACE;AAAuB;AAIzB;AACE;AAAsB;AAGxB;AACE;AAGA;AACE;AAAuB;AAIzB;AACE;AAAyB;AAI3B;AACE;AACE;AAAwF;AAExF;AAAyB;AAC3B;AACF;AAGF;AACF;AAKA;AACE;AACE;AAAoB;AAGtB;AACF;AAKgB;AAId;AACF;AAeO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACqB;AACM;AAChB;AACX;AACG;AAIL;AACA;AACA;AACE;AACE;AAAO;AAGT;AACE;AAAyC;AAG3C;AAAO;AAGT;AAA2B;AACmB;AAC3B;AAEnB;AAAc;AAIN;AAAA;AAEgC;AAExC;AAAiB;AAIT;AAEmC;AAI3C;AAAA;AACE;AACoD;AAGtD;AACE;AAAC;AAAA;AACK;AACC;AACiB;AACtB;AAEC;AAAA;AACH;AAGN;AAEA;AACE;AACF;;"}

package/dist/primitives/FileSize.cjs

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var radixUi = require('radix-ui');
+var reactSlot = require('@radix-ui/react-slot');
 var react = require('react');
 var formatFileSize = require('../utils/format-file-size.cjs');
 
@@ -16,7 +16,7 @@ const FileSize = react.forwardRef(
     asChild,
     ...props
   }, forwardedRef) => {
-    const Component = asChild ? radixUi.Slot.Slot : "span";
+    const Component = asChild ? reactSlot.Slot : "span";
     const children = react.useMemo(
       () => typeof renderChildren === "function" ? renderChildren(size, locale) : renderChildren,
       // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/primitives/FileSize.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileSize.cjs","sources":["../../src/primitives/FileSize.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { formatFileSize } from \"../utils/format-file-size\";\n\nconst FILE_SIZE_NAME = \"FileSize\";\n\nexport interface FileSizeProps\n  extends Omit<ComponentPropsWithSlot<\"span\">, \"children\"> {\n  /**\n   * The file size to display.\n   */\n  size: number;\n\n  /**\n   * A function to format the displayed file size.\n   */\n  children?: (size: number, locale?: string) => ReactNode;\n\n  /**\n   * The locale used when formatting the file size.\n   */\n  locale?: string;\n}\n\n/**\n * Displays a formatted file size.\n *\n * @example\n * <FileSize size={100000} />\n */\nexport const FileSize = forwardRef<HTMLSpanElement, FileSizeProps>(\n  (\n    {\n      size,\n      locale,\n      children: renderChildren = formatFileSize,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? SlotPrimitive.Slot : \"span\";\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(size, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, size]\n    );\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  FileSize.displayName = FILE_SIZE_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;AASA;AA0BO;AAAiB;AAEpB;AACE;AACA;AAC2B;AAC3B;AACG;AAIL;AACA;AAAiB;AAIT;AAAA;AAEe;AAGvB;AAGE;AAGN;AAEA;AACE;AACF;;"}
+{"version":3,"file":"FileSize.cjs","sources":["../../src/primitives/FileSize.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { formatFileSize } from \"../utils/format-file-size\";\n\nconst FILE_SIZE_NAME = \"FileSize\";\n\nexport interface FileSizeProps\n  extends Omit<ComponentPropsWithSlot<\"span\">, \"children\"> {\n  /**\n   * The file size to display.\n   */\n  size: number;\n\n  /**\n   * A function to format the displayed file size.\n   */\n  children?: (size: number, locale?: string) => ReactNode;\n\n  /**\n   * The locale used when formatting the file size.\n   */\n  locale?: string;\n}\n\n/**\n * Displays a formatted file size.\n *\n * @example\n * <FileSize size={100000} />\n */\nexport const FileSize = forwardRef<HTMLSpanElement, FileSizeProps>(\n  (\n    {\n      size,\n      locale,\n      children: renderChildren = formatFileSize,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(size, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, size]\n    );\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  FileSize.displayName = FILE_SIZE_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;AASA;AA0BO;AAAiB;AAEpB;AACE;AACA;AAC2B;AAC3B;AACG;AAIL;AACA;AAAiB;AAIT;AAAA;AAEe;AAGvB;AAGE;AAGN;AAEA;AACE;AACF;;"}

package/dist/primitives/FileSize.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Slot } from 'radix-ui';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useMemo } from 'react';
 import { formatFileSize } from '../utils/format-file-size.js';
 
@@ -14,7 +14,7 @@ const FileSize = forwardRef(
     asChild,
     ...props
   }, forwardedRef) => {
-    const Component = asChild ? Slot.Slot : "span";
+    const Component = asChild ? Slot : "span";
     const children = useMemo(
       () => typeof renderChildren === "function" ? renderChildren(size, locale) : renderChildren,
       // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/primitives/FileSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileSize.js","sources":["../../src/primitives/FileSize.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot as SlotPrimitive } from \"radix-ui\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { formatFileSize } from \"../utils/format-file-size\";\n\nconst FILE_SIZE_NAME = \"FileSize\";\n\nexport interface FileSizeProps\n  extends Omit<ComponentPropsWithSlot<\"span\">, \"children\"> {\n  /**\n   * The file size to display.\n   */\n  size: number;\n\n  /**\n   * A function to format the displayed file size.\n   */\n  children?: (size: number, locale?: string) => ReactNode;\n\n  /**\n   * The locale used when formatting the file size.\n   */\n  locale?: string;\n}\n\n/**\n * Displays a formatted file size.\n *\n * @example\n * <FileSize size={100000} />\n */\nexport const FileSize = forwardRef<HTMLSpanElement, FileSizeProps>(\n  (\n    {\n      size,\n      locale,\n      children: renderChildren = formatFileSize,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? SlotPrimitive.Slot : \"span\";\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(size, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, size]\n    );\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  FileSize.displayName = FILE_SIZE_NAME;\n}\n"],"names":[],"mappings":";;;;;;;AASA;AA0BO;AAAiB;AAEpB;AACE;AACA;AAC2B;AAC3B;AACG;AAIL;AACA;AAAiB;AAIT;AAAA;AAEe;AAGvB;AAGE;AAGN;AAEA;AACE;AACF;;"}
+{"version":3,"file":"FileSize.js","sources":["../../src/primitives/FileSize.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport type { ReactNode } from \"react\";\nimport { forwardRef, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { formatFileSize } from \"../utils/format-file-size\";\n\nconst FILE_SIZE_NAME = \"FileSize\";\n\nexport interface FileSizeProps\n  extends Omit<ComponentPropsWithSlot<\"span\">, \"children\"> {\n  /**\n   * The file size to display.\n   */\n  size: number;\n\n  /**\n   * A function to format the displayed file size.\n   */\n  children?: (size: number, locale?: string) => ReactNode;\n\n  /**\n   * The locale used when formatting the file size.\n   */\n  locale?: string;\n}\n\n/**\n * Displays a formatted file size.\n *\n * @example\n * <FileSize size={100000} />\n */\nexport const FileSize = forwardRef<HTMLSpanElement, FileSizeProps>(\n  (\n    {\n      size,\n      locale,\n      children: renderChildren = formatFileSize,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"span\";\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(size, locale)\n          : renderChildren,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderChildren, size]\n    );\n\n    return (\n      <Component {...props} ref={forwardedRef}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  FileSize.displayName = FILE_SIZE_NAME;\n}\n"],"names":[],"mappings":";;;;;;;AASA;AA0BO;AAAiB;AAEpB;AACE;AACA;AAC2B;AAC3B;AACG;AAIL;AACA;AAAiB;AAIT;AAAA;AAEe;AAGvB;AAGE;AAGN;AAEA;AACE;AACF;;"}

package/dist/primitives/Markdown.cjs

@@ -2,8 +2,8 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@liveblocks/core');
+var reactSlot = require('@radix-ui/react-slot');
 var marked = require('marked');
-var radixUi = require('radix-ui');
 var react = require('react');
 
 const LIST_ITEM_CHECKBOX_REGEX = /^\[\s?(x)?\]?$/i;
@@ -75,7 +75,7 @@ const defaultComponents = {
 };
 const Markdown = react.forwardRef(
   ({ content, partial, components, asChild, ...props }, forwardedRef) => {
-    const Component = asChild ? radixUi.Slot.Slot : "div";
+    const Component = asChild ? reactSlot.Slot : "div";
     const tokens = react.useMemo(() => {
       if (!content) {
         return [];