@dxos/react-ui-thread 0.8.3 → 0.8.4-main.1c7ec43d41

package/dist/lib/browser/index.mjs

@@ -1,185 +1,128 @@
-// packages/ui/react-ui-thread/src/translations.ts
-var translationKey = "thread";
-var translations_default = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "plugin name": "Threads",
-        "thread title placeholder": "New thread",
-        "thread title label": "Title",
-        "delete thread label": "Delete",
-        "create thread label": "Create thread",
-        "message placeholder": "Enter message...",
-        "comment placeholder": "Enter comment...",
-        "settings standalone label": "Enable standalone thread creation",
-        "anonymous label": "Anonymous",
-        "enter to send message": "Enter to add \u23CE"
-      }
-    }
-  }
-];
-
-// packages/ui/react-ui-thread/src/Thread/Thread.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import { CaretDoubleRight, Spinner } from "@phosphor-icons/react";
+// src/Thread/Thread.tsx
 import React, { forwardRef } from "react";
-import { useTranslation } from "@dxos/react-ui";
-import { hoverableControlItem, hoverableFocusedWithinControls, mx } from "@dxos/react-ui-theme";
-var threadLayout = "is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]";
-var Thread = /* @__PURE__ */ forwardRef(({ current, children, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement("div", {
-      role: "group",
-      "data-testid": "thread",
-      ...current && {
-        "aria-current": typeof current === "string" ? current : "location"
-      },
-      ...props,
-      className: mx(threadLayout, hoverableFocusedWithinControls, "pbs-2 pbe-4 bg-[var(--surface-bg)] border-separator first:border-bs-0 border-be", "current-related attention-surface [--controls-opacity:0]", classNames),
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
+import { Icon, useTranslation } from "@dxos/react-ui";
+import { hoverableControlItem, hoverableFocusedWithinControls, mx } from "@dxos/ui-theme";
+import { translationKey } from "#translations";
+var threadLayout = "w-full place-self-start grid grid-cols-[var(--dx-rail-size)_1fr]";
+var ThreadRoot = /* @__PURE__ */ forwardRef(({ current, children, classNames, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "group",
+    "data-testid": "thread",
+    ...current && {
+      "aria-current": typeof current === "string" ? current : "location"
+    },
+    ...props,
+    className: mx(threadLayout, hoverableFocusedWithinControls, "bg-[var(--surface-bg)] current-related dx-attention-surface [--controls-opacity:0]", classNames),
+    ref: forwardedRef
+  }, children);
 });
-var ThreadHeading = /* @__PURE__ */ forwardRef(({ classNames, children, detached, ...props }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "flex items-center justify-center text-description"
-    }, /* @__PURE__ */ React.createElement(CaretDoubleRight, null)), /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "flex items-center overflow-hidden"
-    }, /* @__PURE__ */ React.createElement("p", {
-      role: "heading",
-      "data-testid": "thread.heading",
-      ...props,
-      className: mx("mie-2 text-description font-medium truncate italic", detached && "line-through decoration-1"),
-      ref: forwardedRef
-    }, children)));
-  } finally {
-    _effect.f();
-  }
+var ThreadHeader = /* @__PURE__ */ forwardRef(({ children, detached, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "flex items-center justify-center text-description"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--caret-double-right--regular"
+  })), /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "flex items-center overflow-hidden"
+  }, /* @__PURE__ */ React.createElement("p", {
+    role: "heading",
+    "data-testid": "thread.heading",
+    ...props,
+    className: mx("me-2 text-description font-medium truncate italic", detached && "line-through decoration-1"),
+    ref: forwardedRef
+  }, children)));
 });
-var ThreadFooter = /* @__PURE__ */ forwardRef(({ activity, classNames, children, ...props }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React.createElement("div", {
-      ...props,
-      className: mx("col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pie-2 text-xs text-description", classNames),
-      ref: forwardedRef
-    }, /* @__PURE__ */ React.createElement(Spinner, {
-      weight: "bold",
-      "data-visible": activity ? "show" : "hide",
-      className: "is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow"
-    }), /* @__PURE__ */ React.createElement("span", {
-      className: "truncate min-is-0",
-      "aria-live": "polite"
-    }, activity ? children : null), /* @__PURE__ */ React.createElement("span", {
-      className: mx("text-end", hoverableControlItem)
-    }, t("enter to send message")));
-  } finally {
-    _effect.f();
-  }
+var ThreadStatus = /* @__PURE__ */ forwardRef(({ activity, classNames, children, ...props }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    className: mx("col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pe-2 text-xs text-description", classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--spinner--bold",
+    classNames: "w-6 h-4 invisible data-[visible=show]:visible animate-spin-slow",
+    "data-visible": activity ? "show" : "hide"
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "truncate min-w-0",
+    "aria-live": "polite"
+  }, activity ? children : null), /* @__PURE__ */ React.createElement("span", {
+    className: mx("text-end", hoverableControlItem)
+  }, t("enter-to-send.message")));
 });
+var Thread = {
+  Root: ThreadRoot,
+  Header: ThreadHeader,
+  Status: ThreadStatus
+};
 
-// packages/ui/react-ui-thread/src/Message/Message.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+// src/Message/Message.tsx
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
 import React2, { forwardRef as forwardRef2 } from "react";
 import { Avatar, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { keymap, listener, useTextEditor } from "@dxos/react-ui-editor";
-import { focusRing, mx as mx2 } from "@dxos/react-ui-theme";
-import { hexToEmoji, hexToHue, isNotFalsy } from "@dxos/util";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import { keymap, listener } from "@dxos/ui-editor";
+import { mx as mx2 } from "@dxos/ui-theme";
+import { hexToEmoji, hexToHue, isTruthy } from "@dxos/util";
+import { translationKey as translationKey2 } from "#translations";
 var avatarSize = 7;
 var MessageRoot = /* @__PURE__ */ forwardRef2(({ authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, children, classNames, ...rootProps }, forwardedRef) => {
-  var _effect = _useSignals2();
-  try {
-    return (
-      // Must wrap the message since Avatar.Label may be used in the content.
-      /* @__PURE__ */ React2.createElement(Avatar.Root, null, /* @__PURE__ */ React2.createElement("div", {
-        role: "none",
-        "data-testid": "thread.message",
-        ...rootProps,
-        className: mx2("grid grid-cols-subgrid col-span-2", classNames),
-        ref: forwardedRef
-      }, /* @__PURE__ */ React2.createElement("div", {
-        role: "none",
-        className: "flex flex-col items-center gap-2 pbs-2"
-      }, /* @__PURE__ */ React2.createElement(Avatar.Content, {
-        size: avatarSize,
-        hue: authorAvatarProps?.hue || hexToHue(authorId ?? "0"),
-        fallback: authorAvatarProps?.emoji || hexToEmoji(authorId ?? "0"),
-        ...authorImgSrc && {
-          imgSrc: authorImgSrc
-        }
-      }), continues && /* @__PURE__ */ React2.createElement("div", {
-        role: "none",
-        className: "is-px grow bg-separator"
-      })), /* @__PURE__ */ React2.createElement("div", {
-        role: "none",
-        className: "plb-1 min-is-0"
-      }, children)))
-    );
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React2.createElement(Avatar.Root, null, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    "data-testid": "thread.message",
+    ...rootProps,
+    className: mx2("grid grid-cols-subgrid col-span-2", classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "flex flex-col items-center gap-2 pt-1"
+  }, /* @__PURE__ */ React2.createElement(Avatar.Content, {
+    size: avatarSize,
+    hue: authorAvatarProps?.hue || hexToHue(authorId ?? "0"),
+    fallback: authorAvatarProps?.emoji || hexToEmoji(authorId ?? "0"),
+    ...authorImgSrc && {
+      imgSrc: authorImgSrc
+    }
+  }), continues && /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "w-px grow bg-separator"
+  })), /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "py-1 min-w-0"
+  }, children)));
 });
 var MessageHeading = ({ children, classNames, timestamp, authorName, ...props }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      ...props,
-      className: mx2("flex gap-2 items-start", classNames)
-    }, /* @__PURE__ */ React2.createElement("p", {
-      className: "grow"
-    }, /* @__PURE__ */ React2.createElement(MessageAuthorName, {
-      authorName
-    }), timestamp && /* @__PURE__ */ React2.createElement(MessageTime, {
-      timestamp
-    })), children);
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    ...props,
+    className: mx2("flex gap-2 items-start", classNames)
+  }, /* @__PURE__ */ React2.createElement("p", {
+    className: "grow"
+  }, /* @__PURE__ */ React2.createElement(MessageAuthorName, {
+    authorName
+  }), timestamp && /* @__PURE__ */ React2.createElement(MessageTime, {
+    timestamp
+  })), children);
 };
 var MessageAuthorName = ({ authorName }) => {
-  var _effect = _useSignals2();
-  try {
-    const { t } = useTranslation2(translationKey);
-    return /* @__PURE__ */ React2.createElement(Avatar.Label, {
-      classNames: "block truncate text-sm text-subdued"
-    }, authorName ?? t("anonymous label"));
-  } finally {
-    _effect.f();
-  }
+  const { t } = useTranslation2(translationKey2);
+  return /* @__PURE__ */ React2.createElement(Avatar.Label, {
+    classNames: "block truncate text-sm text-subdued"
+  }, authorName ?? t("anonymous.label"));
 };
 var MessageTime = ({ timestamp }) => {
-  var _effect = _useSignals2();
-  try {
-    const { dtLocale } = useTranslation2(translationKey);
-    const dt = timestamp ? new Date(timestamp) : void 0;
-    return /* @__PURE__ */ React2.createElement("time", {
-      className: "block text-subdued text-xs pbe-0.5",
-      dateTime: dt?.toISOString()
-    }, dt ? formatDistanceToNow(dt, {
-      locale: dtLocale,
-      addSuffix: true
-    }) : "");
-  } finally {
-    _effect.f();
-  }
+  const { dtLocale } = useTranslation2(translationKey2);
+  const dt = timestamp ? new Date(timestamp) : void 0;
+  return /* @__PURE__ */ React2.createElement("time", {
+    className: "block text-subdued text-xs pb-0.5",
+    dateTime: dt?.toISOString()
+  }, dt ? formatDistanceToNow(dt, {
+    locale: dtLocale,
+    addSuffix: true
+  }) : "");
 };
 var MessageBody = ({ children, ...props }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement("p", props, children);
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React2.createElement("p", props, children);
 };
 var keyBindings = ({ onSend, onClear }) => [
   {
@@ -207,45 +150,40 @@ var keyBindings = ({ onSend, onClear }) => [
   }
 ];
 var MessageTextbox = ({ id, authorId, authorName, authorImgSrc, authorAvatarProps, disabled, extensions, onSend, onClear, onEditorFocus, ...editorProps }) => {
-  var _effect = _useSignals2();
-  try {
-    const { parentRef, focusAttributes } = useTextEditor(() => ({
-      id,
-      extensions: [
-        keymap.of(keyBindings({
-          onSend,
-          onClear
-        })),
-        listener({
-          onFocus: (focusing) => {
-            if (focusing) {
-              onEditorFocus?.();
-            }
+  const { parentRef, focusAttributes } = useTextEditor(() => ({
+    id,
+    extensions: [
+      keymap.of(keyBindings({
+        onSend,
+        onClear
+      })),
+      listener({
+        onFocus: ({ focusing }) => {
+          if (focusing) {
+            onEditorFocus?.();
           }
-        }),
-        extensions
-      ].filter(isNotFalsy),
-      ...editorProps
-    }), [
-      id,
+        }
+      }),
       extensions
-    ]);
-    return /* @__PURE__ */ React2.createElement(MessageRoot, {
-      id,
-      authorId,
-      authorName,
-      authorImgSrc,
-      authorAvatarProps,
-      continues: false
-    }, /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      ref: parentRef,
-      className: mx2("plb-0.5 mie-1 rounded-sm", focusRing, disabled && "opacity-50"),
-      ...focusAttributes
-    }));
-  } finally {
-    _effect.f();
-  }
+    ].filter(isTruthy),
+    ...editorProps
+  }), [
+    id,
+    extensions
+  ]);
+  return /* @__PURE__ */ React2.createElement(MessageRoot, {
+    id,
+    authorId,
+    authorName,
+    authorImgSrc,
+    authorAvatarProps,
+    continues: false
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    ref: parentRef,
+    className: mx2("py-0.5 me-1 rounded-xs dx-focus-ring", disabled && "opacity-50"),
+    ...focusAttributes
+  }));
 };
 export {
   MessageAuthorName,
@@ -255,9 +193,6 @@ export {
   MessageTextbox,
   MessageTime,
   Thread,
-  ThreadFooter,
-  ThreadHeading,
-  threadLayout,
-  translations_default as translations
+  threadLayout
 };
 //# sourceMappingURL=index.mjs.map

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/translations.ts", "../../../src/Thread/Thread.tsx", "../../../src/Message/Message.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'thread';\n\nexport default [\n  {\n    'en-US': {\n      [translationKey]: {\n        'plugin name': 'Threads',\n        'thread title placeholder': 'New thread',\n        'thread title label': 'Title',\n        'delete thread label': 'Delete',\n        'create thread label': 'Create thread',\n        'message placeholder': 'Enter message...',\n        'comment placeholder': 'Enter comment...',\n        'settings standalone label': 'Enable standalone thread creation',\n        'anonymous label': 'Anonymous',\n        'enter to send message': 'Enter to add ⏎',\n      },\n    },\n  },\n];\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { CaretDoubleRight, Spinner } from '@phosphor-icons/react';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';\n\nimport { translationKey } from '../translations';\nimport type { ThreadEntity } from '../types';\n\nexport type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> & ThreadEntity & { current?: boolean };\n\nexport const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';\n\nexport const Thread = forwardRef<HTMLDivElement, ThreadProps>(\n  ({ current, children, classNames, ...props }, forwardedRef) => {\n    return (\n      <div\n        role='group'\n        data-testid='thread'\n        {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}\n        {...props}\n        className={mx(\n          threadLayout,\n          hoverableFocusedWithinControls,\n          'pbs-2 pbe-4 bg-[var(--surface-bg)] border-separator first:border-bs-0 border-be',\n          'current-related attention-surface [--controls-opacity:0]',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nexport type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };\n\nexport const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps>(\n  ({ classNames, children, detached, ...props }, forwardedRef) => {\n    return (\n      <>\n        <div role='none' className='flex items-center justify-center text-description'>\n          <CaretDoubleRight />\n        </div>\n        <div role='none' className='flex items-center overflow-hidden'>\n          <p\n            role='heading'\n            data-testid='thread.heading'\n            {...props}\n            className={mx(\n              'mie-2 text-description font-medium truncate italic',\n              detached && 'line-through decoration-1',\n            )}\n            ref={forwardedRef}\n          >\n            {children}\n          </p>\n        </div>\n      </>\n    );\n  },\n);\n\nexport type ThreadFooterProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\n  activity?: boolean;\n};\n\nexport const ThreadFooter = forwardRef<HTMLDivElement, ThreadFooterProps>(\n  ({ activity, classNames, children, ...props }, forwardedRef) => {\n    const { t } = useTranslation(translationKey);\n    return (\n      <div\n        {...props}\n        className={mx(\n          'col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pie-2 text-xs text-description',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        <Spinner\n          weight='bold'\n          data-visible={activity ? 'show' : 'hide'}\n          className='is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow'\n        />\n        <span className='truncate min-is-0' aria-live='polite'>\n          {activity ? children : null}\n        </span>\n        <span className={mx('text-end', hoverableControlItem)}>{t('enter to send message')}</span>\n      </div>\n    );\n  },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { formatDistanceToNow } from 'date-fns/formatDistanceToNow';\nimport React, { type ComponentPropsWithRef, forwardRef, type ComponentPropsWithoutRef } from 'react';\n\n// TODO(burdon): Remove dep.\nimport { Avatar, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { type UseTextEditorProps, keymap, listener, useTextEditor } from '@dxos/react-ui-editor';\nimport { focusRing, mx } from '@dxos/react-ui-theme';\nimport { hexToEmoji, hexToHue, isNotFalsy } from '@dxos/util';\n\nimport { translationKey } from '../translations';\nimport { type MessageMetadata } from '../types';\n\nconst avatarSize = 7;\n\nexport type MessageRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n  MessageMetadata &\n  Partial<{ continues: boolean }>;\n\nexport const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(\n  (\n    { authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, children, classNames, ...rootProps },\n    forwardedRef,\n  ) => {\n    return (\n      // Must wrap the message since Avatar.Label may be used in the content.\n      <Avatar.Root>\n        <div\n          role='none'\n          data-testid='thread.message'\n          {...rootProps}\n          className={mx('grid grid-cols-subgrid col-span-2', classNames)}\n          ref={forwardedRef}\n        >\n          <div role='none' className='flex flex-col items-center gap-2 pbs-2'>\n            <Avatar.Content\n              size={avatarSize}\n              hue={authorAvatarProps?.hue || hexToHue(authorId ?? '0')}\n              fallback={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')}\n              {...(authorImgSrc && { imgSrc: authorImgSrc })}\n            />\n            {continues && <div role='none' className='is-px grow bg-separator' />}\n          </div>\n          <div role='none' className='plb-1 min-is-0'>\n            {children}\n          </div>\n        </div>\n      </Avatar.Root>\n    );\n  },\n);\n\nexport type MessageHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> &\n  Pick<MessageMetadata, 'authorName' | 'timestamp'>;\n\nexport const MessageHeading = ({ children, classNames, timestamp, authorName, ...props }: MessageHeadingProps) => {\n  return (\n    <div role='none' {...props} className={mx('flex gap-2 items-start', classNames)}>\n      <p className='grow'>\n        <MessageAuthorName authorName={authorName} />\n        {timestamp && <MessageTime timestamp={timestamp} />}\n      </p>\n      {children}\n    </div>\n  );\n};\n\nexport type MessageAuthorNameProps = Pick<MessageMetadata, 'authorName'>;\n\nexport const MessageAuthorName = ({ authorName }: MessageAuthorNameProps) => {\n  const { t } = useTranslation(translationKey);\n  return (\n    <Avatar.Label classNames='block truncate text-sm text-subdued'>{authorName ?? t('anonymous label')}</Avatar.Label>\n  );\n};\n\nexport type MessageTimeProps = Pick<MessageMetadata, 'timestamp'>;\n\nexport const MessageTime = ({ timestamp }: MessageTimeProps) => {\n  const { dtLocale } = useTranslation(translationKey);\n  const dt = timestamp ? new Date(timestamp) : undefined;\n  return (\n    <time className='block text-subdued text-xs pbe-0.5' dateTime={dt?.toISOString()}>\n      {dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}\n    </time>\n  );\n};\n\nexport type MessageBodyProps = ComponentPropsWithoutRef<'p'>;\n\nexport const MessageBody = ({ children, ...props }: MessageBodyProps) => {\n  return <p {...props}>{children}</p>;\n};\n\nexport type MessageTextboxProps = {\n  disabled?: boolean;\n  onSend?: () => void;\n  onClear?: () => void;\n  onEditorFocus?: () => void;\n} & MessageMetadata &\n  UseTextEditorProps;\n\nconst keyBindings = ({ onSend, onClear }: Pick<MessageTextboxProps, 'onSend' | 'onClear'>) => [\n  {\n    key: 'Enter',\n    run: () => {\n      if (onSend) {\n        onSend();\n        return true;\n      } else {\n        return false;\n      }\n    },\n  },\n  {\n    // TODO(burdon): Other key bindings.\n    key: 'Meta+Backspace',\n    run: () => {\n      if (onClear) {\n        onClear();\n        return true;\n      } else {\n        return false;\n      }\n    },\n  },\n];\n\nexport const MessageTextbox = ({\n  id,\n  authorId,\n  authorName,\n  authorImgSrc,\n  authorAvatarProps,\n  disabled,\n  extensions,\n  onSend,\n  onClear,\n  onEditorFocus,\n  ...editorProps\n}: MessageTextboxProps) => {\n  const { parentRef, focusAttributes } = useTextEditor(\n    () => ({\n      id,\n      extensions: [\n        keymap.of(keyBindings({ onSend, onClear })),\n        listener({\n          onFocus: (focusing) => {\n            if (focusing) {\n              onEditorFocus?.();\n            }\n          },\n        }),\n        extensions,\n      ].filter(isNotFalsy),\n      ...editorProps,\n    }),\n    [id, extensions],\n  );\n\n  return (\n    <MessageRoot {...{ id, authorId, authorName, authorImgSrc, authorAvatarProps }} continues={false}>\n      <div\n        role='none'\n        ref={parentRef}\n        className={mx('plb-0.5 mie-1 rounded-sm', focusRing, disabled && 'opacity-50')}\n        {...focusAttributes}\n      />\n    </MessageRoot>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["translationKey", "CaretDoubleRight", "Spinner", "React", "forwardRef", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "threadLayout", "Thread", "forwardRef", "current", "children", "classNames", "props", "forwardedRef", "div", "role", "data-testid", "className", "mx", "hoverableFocusedWithinControls", "ref", "ThreadHeading", "detached", "CaretDoubleRight", "p", "ThreadFooter", "activity", "t", "useTranslation", "translationKey", "Spinner", "weight", "data-visible", "span", "aria-live", "hoverableControlItem", "formatDistanceToNow", "React", "forwardRef", "Avatar", "useTranslation", "keymap", "listener", "useTextEditor", "focusRing", "mx", "hexToEmoji", "hexToHue", "isNotFalsy", "avatarSize", "MessageRoot", "forwardRef", "authorImgSrc", "authorId", "authorName", "authorAvatarProps", "continues", "children", "classNames", "rootProps", "forwardedRef", "React", "Avatar", "Root", "div", "role", "data-testid", "className", "mx", "ref", "Content", "size", "hue", "hexToHue", "fallback", "emoji", "hexToEmoji", "imgSrc", "MessageHeading", "timestamp", "props", "p", "MessageAuthorName", "MessageTime", "t", "useTranslation", "translationKey", "Label", "dtLocale", "dt", "Date", "undefined", "time", "dateTime", "toISOString", "formatDistanceToNow", "locale", "addSuffix", "MessageBody", "keyBindings", "onSend", "onClear", "key", "run", "MessageTextbox", "id", "disabled", "extensions", "onEditorFocus", "editorProps", "parentRef", "focusAttributes", "useTextEditor", "keymap", "of", "listener", "onFocus", "focusing", "filter", "isNotFalsy", "focusRing"]
+  "sources": ["../../../src/Thread/Thread.tsx", "../../../src/Message/Message.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { ComponentPropsWithRef, forwardRef, PropsWithChildren } from 'react';\n\nimport { Icon, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';\n\nimport { translationKey } from '#translations';\n\nimport type { ThreadEntity } from '../types';\n\n// TODO(burdon): Avoid exporting fragments.\nexport const threadLayout = 'w-full place-self-start grid grid-cols-[var(--dx-rail-size)_1fr]';\n\n//\n// Root\n//\n\ntype ThreadRootProps = ThemedClassName<\n  PropsWithChildren<\n    ThreadEntity & { current?: boolean } & Pick<ComponentPropsWithRef<'div'>, 'onClickCapture' | 'onFocusCapture'>\n  >\n>;\n\nconst ThreadRoot = forwardRef<HTMLDivElement, ThreadRootProps>(\n  ({ current, children, classNames, ...props }, forwardedRef) => {\n    return (\n      <div\n        role='group'\n        data-testid='thread'\n        {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}\n        {...props}\n        className={mx(\n          threadLayout,\n          hoverableFocusedWithinControls,\n          'bg-[var(--surface-bg)] current-related dx-attention-surface [--controls-opacity:0]',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n//\n// Heading\n//\n\ntype ThreadHeaderProps = PropsWithChildren<{ detached?: boolean }>;\n\nconst ThreadHeader = forwardRef<HTMLParagraphElement, ThreadHeaderProps>(\n  ({ children, detached, ...props }, forwardedRef) => {\n    return (\n      <>\n        <div role='none' className='flex items-center justify-center text-description'>\n          <Icon icon='ph--caret-double-right--regular' />\n        </div>\n        <div role='none' className='flex items-center overflow-hidden'>\n          <p\n            role='heading'\n            data-testid='thread.heading'\n            {...props}\n            className={mx('me-2 text-description font-medium truncate italic', detached && 'line-through decoration-1')}\n            ref={forwardedRef}\n          >\n            {children}\n          </p>\n        </div>\n      </>\n    );\n  },\n);\n\n//\n// Status\n//\n\ntype ThreadStatusProps = ThemedClassName<PropsWithChildren> & {\n  activity?: boolean;\n};\n\nconst ThreadStatus = forwardRef<HTMLDivElement, ThreadStatusProps>(\n  ({ activity, classNames, children, ...props }, forwardedRef) => {\n    const { t } = useTranslation(translationKey);\n    return (\n      <div\n        {...props}\n        className={mx(\n          'col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pe-2 text-xs text-description',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        <Icon\n          icon='ph--spinner--bold'\n          classNames='w-6 h-4 invisible data-[visible=show]:visible animate-spin-slow'\n          data-visible={activity ? 'show' : 'hide'}\n        />\n        <span className='truncate min-w-0' aria-live='polite'>\n          {activity ? children : null}\n        </span>\n        <span className={mx('text-end', hoverableControlItem)}>{t('enter-to-send.message')}</span>\n      </div>\n    );\n  },\n);\n\nexport const Thread = {\n  Root: ThreadRoot,\n  Header: ThreadHeader,\n  Status: ThreadStatus,\n};\n\nexport type { ThreadRootProps, ThreadHeaderProps, ThreadStatusProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { formatDistanceToNow } from 'date-fns/formatDistanceToNow';\nimport React, { type ComponentPropsWithRef, type ComponentPropsWithoutRef, forwardRef } from 'react';\n\nimport { Avatar, type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { type UseTextEditorProps, useTextEditor } from '@dxos/react-ui-editor';\nimport { keymap, listener } from '@dxos/ui-editor';\nimport { mx } from '@dxos/ui-theme';\nimport { hexToEmoji, hexToHue, isTruthy } from '@dxos/util';\n\nimport { translationKey } from '#translations';\n\nimport { type MessageMetadata } from '../types';\n\nconst avatarSize = 7;\n\nexport type MessageRootProps = ThemedClassName<\n  ComponentPropsWithRef<'div'> & MessageMetadata & Partial<{ continues: boolean }>\n>;\n\n// TODO(burdon): Show authorName on tooltip.\nexport const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(\n  (\n    { authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, children, classNames, ...rootProps },\n    forwardedRef,\n  ) => {\n    // Must wrap the message since Avatar.Label may be used in the content.\n    return (\n      <Avatar.Root>\n        <div\n          role='none'\n          data-testid='thread.message'\n          {...rootProps}\n          className={mx('grid grid-cols-subgrid col-span-2', classNames)}\n          ref={forwardedRef}\n        >\n          <div role='none' className='flex flex-col items-center gap-2 pt-1'>\n            <Avatar.Content\n              size={avatarSize}\n              hue={authorAvatarProps?.hue || hexToHue(authorId ?? '0')}\n              fallback={authorAvatarProps?.emoji || hexToEmoji(authorId ?? '0')}\n              {...(authorImgSrc && { imgSrc: authorImgSrc })}\n            />\n            {continues && <div role='none' className='w-px grow bg-separator' />}\n          </div>\n          <div role='none' className='py-1 min-w-0'>\n            {children}\n          </div>\n        </div>\n      </Avatar.Root>\n    );\n  },\n);\n\nexport type MessageHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> &\n  Pick<MessageMetadata, 'authorName' | 'timestamp'>;\n\nexport const MessageHeading = ({ children, classNames, timestamp, authorName, ...props }: MessageHeadingProps) => {\n  return (\n    <div role='none' {...props} className={mx('flex gap-2 items-start', classNames)}>\n      <p className='grow'>\n        <MessageAuthorName authorName={authorName} />\n        {timestamp && <MessageTime timestamp={timestamp} />}\n      </p>\n      {children}\n    </div>\n  );\n};\n\nexport type MessageAuthorNameProps = Pick<MessageMetadata, 'authorName'>;\n\nexport const MessageAuthorName = ({ authorName }: MessageAuthorNameProps) => {\n  const { t } = useTranslation(translationKey);\n  return (\n    <Avatar.Label classNames='block truncate text-sm text-subdued'>{authorName ?? t('anonymous.label')}</Avatar.Label>\n  );\n};\n\nexport type MessageTimeProps = Pick<MessageMetadata, 'timestamp'>;\n\nexport const MessageTime = ({ timestamp }: MessageTimeProps) => {\n  const { dtLocale } = useTranslation(translationKey);\n  const dt = timestamp ? new Date(timestamp) : undefined;\n  return (\n    <time className='block text-subdued text-xs pb-0.5' dateTime={dt?.toISOString()}>\n      {dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}\n    </time>\n  );\n};\n\nexport type MessageBodyProps = ComponentPropsWithoutRef<'p'>;\n\nexport const MessageBody = ({ children, ...props }: MessageBodyProps) => {\n  return <p {...props}>{children}</p>;\n};\n\nexport type MessageTextboxProps = {\n  disabled?: boolean;\n  onSend?: () => void;\n  onClear?: () => void;\n  onEditorFocus?: () => void;\n} & MessageMetadata &\n  UseTextEditorProps;\n\nconst keyBindings = ({ onSend, onClear }: Pick<MessageTextboxProps, 'onSend' | 'onClear'>) => [\n  {\n    key: 'Enter',\n    run: () => {\n      if (onSend) {\n        onSend();\n        return true;\n      } else {\n        return false;\n      }\n    },\n  },\n  {\n    // TODO(burdon): Other key bindings.\n    key: 'Meta+Backspace',\n    run: () => {\n      if (onClear) {\n        onClear();\n        return true;\n      } else {\n        return false;\n      }\n    },\n  },\n];\n\nexport const MessageTextbox = ({\n  id,\n  authorId,\n  authorName,\n  authorImgSrc,\n  authorAvatarProps,\n  disabled,\n  extensions,\n  onSend,\n  onClear,\n  onEditorFocus,\n  ...editorProps\n}: MessageTextboxProps) => {\n  const { parentRef, focusAttributes } = useTextEditor(\n    () => ({\n      id,\n      extensions: [\n        keymap.of(keyBindings({ onSend, onClear })),\n        listener({\n          onFocus: ({ focusing }) => {\n            if (focusing) {\n              onEditorFocus?.();\n            }\n          },\n        }),\n        extensions,\n      ].filter(isTruthy),\n      ...editorProps,\n    }),\n    [id, extensions],\n  );\n\n  return (\n    <MessageRoot {...{ id, authorId, authorName, authorImgSrc, authorAvatarProps }} continues={false}>\n      <div\n        role='none'\n        ref={parentRef}\n        className={mx('py-0.5 me-1 rounded-xs dx-focus-ring', disabled && 'opacity-50')}\n        {...focusAttributes}\n      />\n    </MessageRoot>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React", "forwardRef", "Icon", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "translationKey", "threadLayout", "ThreadRoot", "current", "children", "classNames", "props", "forwardedRef", "div", "role", "data-testid", "className", "ref", "ThreadHeader", "detached", "icon", "p", "ThreadStatus", "activity", "t", "data-visible", "span", "aria-live", "Thread", "Root", "Header", "Status", "formatDistanceToNow", "React", "forwardRef", "Avatar", "useTranslation", "useTextEditor", "keymap", "listener", "mx", "hexToEmoji", "hexToHue", "isTruthy", "translationKey", "avatarSize", "MessageRoot", "authorImgSrc", "authorId", "authorName", "authorAvatarProps", "continues", "children", "classNames", "rootProps", "forwardedRef", "Root", "div", "role", "data-testid", "className", "ref", "Content", "size", "hue", "fallback", "emoji", "imgSrc", "MessageHeading", "timestamp", "props", "p", "MessageAuthorName", "MessageTime", "t", "Label", "dtLocale", "dt", "Date", "undefined", "time", "dateTime", "toISOString", "locale", "addSuffix", "MessageBody", "keyBindings", "onSend", "onClear", "key", "run", "MessageTextbox", "id", "disabled", "extensions", "onEditorFocus", "editorProps", "parentRef", "focusAttributes", "of", "onFocus", "focusing", "filter"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytes":2281,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytes":10042,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytes":472,"imports":[{"path":"packages/ui/react-ui-thread/src/Thread/Thread.tsx","kind":"import-statement","original":"./Thread"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytes":17570,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytes":474,"imports":[{"path":"packages/ui/react-ui-thread/src/Message/Message.tsx","kind":"import-statement","original":"./Message"}],"format":"esm"},"packages/ui/react-ui-thread/src/types.ts":{"bytes":911,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/index.ts":{"bytes":877,"imports":[{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"packages/ui/react-ui-thread/src/Thread/index.ts","kind":"import-statement","original":"./Thread"},{"path":"packages/ui/react-ui-thread/src/Message/index.ts","kind":"import-statement","original":"./Message"},{"path":"packages/ui/react-ui-thread/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-thread/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":14979},"packages/ui/react-ui-thread/dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"exports":["MessageAuthorName","MessageBody","MessageHeading","MessageRoot","MessageTextbox","MessageTime","Thread","ThreadFooter","ThreadHeading","threadLayout","translations"],"entryPoint":"packages/ui/react-ui-thread/src/index.ts","inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytesInOutput":609},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytesInOutput":2937},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytesInOutput":4934},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytesInOutput":0}},"bytes":8888}}}
+{"inputs":{"src/Thread/Thread.tsx":{"bytes":9691,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true}],"format":"esm"},"src/Thread/index.ts":{"bytes":370,"imports":[{"path":"src/Thread/Thread.tsx","kind":"import-statement","original":"./Thread"}],"format":"esm"},"src/Message/Message.tsx":{"bytes":16563,"imports":[{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/ui-editor","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true}],"format":"esm"},"src/Message/index.ts":{"bytes":375,"imports":[{"path":"src/Message/Message.tsx","kind":"import-statement","original":"./Message"}],"format":"esm"},"src/index.ts":{"bytes":497,"imports":[{"path":"src/Thread/index.ts","kind":"import-statement","original":"./Thread"},{"path":"src/Message/index.ts","kind":"import-statement","original":"./Message"}],"format":"esm"},"src/translations.ts":{"bytes":2395,"imports":[],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":13971},"dist/lib/browser/index.mjs":{"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/ui-editor","kind":"import-statement","external":true},{"path":"@dxos/ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"#translations","kind":"import-statement","external":true}],"exports":["MessageAuthorName","MessageBody","MessageHeading","MessageRoot","MessageTextbox","MessageTime","Thread","threadLayout"],"entryPoint":"src/index.ts","inputs":{"src/Thread/Thread.tsx":{"bytesInOutput":2597},"src/index.ts":{"bytesInOutput":0},"src/Message/Message.tsx":{"bytesInOutput":4184}},"bytes":7008},"dist/lib/browser/translations.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":1151},"dist/lib/browser/translations.mjs":{"imports":[],"exports":["translationKey","translations"],"entryPoint":"src/translations.ts","inputs":{"src/translations.ts":{"bytesInOutput":616}},"bytes":726}}}

package/dist/lib/browser/translations.mjs

@@ -0,0 +1,25 @@
+// src/translations.ts
+var translationKey = "@dxos/react-ui-thread";
+var translations = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "plugin.name": "Threads",
+        "thread-title.placeholder": "New thread",
+        "thread-title.label": "Title",
+        "delete-thread.label": "Delete",
+        "create-thread.label": "Create thread",
+        "message.placeholder": "Enter message...",
+        "comment.placeholder": "Enter comment...",
+        "settings-standalone.label": "Enable standalone thread creation",
+        "anonymous.label": "Anonymous",
+        "enter-to-send.message": "Enter to add \u23CE"
+      }
+    }
+  }
+];
+export {
+  translationKey,
+  translations
+};
+//# sourceMappingURL=translations.mjs.map

package/dist/lib/browser/translations.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/translations.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui-thread';\n\nexport const translations = [\n  {\n    'en-US': {\n      [translationKey]: {\n        'plugin.name': 'Threads',\n        'thread-title.placeholder': 'New thread',\n        'thread-title.label': 'Title',\n        'delete-thread.label': 'Delete',\n        'create-thread.label': 'Create thread',\n        'message.placeholder': 'Enter message...',\n        'comment.placeholder': 'Enter comment...',\n        'settings-standalone.label': 'Enable standalone thread creation',\n        'anonymous.label': 'Anonymous',\n        'enter-to-send.message': 'Enter to add ⏎',\n      },\n    },\n  },\n] as const satisfies Resource[];\n"],
+  "mappings": ";AAMO,IAAMA,iBAAiB;AAEvB,IAAMC,eAAe;EAC1B;IACE,SAAS;MACP,CAACD,cAAAA,GAAiB;QAChB,eAAe;QACf,4BAA4B;QAC5B,sBAAsB;QACtB,uBAAuB;QACvB,uBAAuB;QACvB,uBAAuB;QACvB,uBAAuB;QACvB,6BAA6B;QAC7B,mBAAmB;QACnB,yBAAyB;MAC3B;IACF;EACF;;",
+  "names": ["translationKey", "translations"]
+}

package/dist/types/src/Message/Message.d.ts

@@ -2,9 +2,9 @@ import React, { type ComponentPropsWithRef, type ComponentPropsWithoutRef } from
 import { type ThemedClassName } from '@dxos/react-ui';
 import { type UseTextEditorProps } from '@dxos/react-ui-editor';
 import { type MessageMetadata } from '../types';
-export type MessageRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & MessageMetadata & Partial<{
+export type MessageRootProps = ThemedClassName<ComponentPropsWithRef<'div'> & MessageMetadata & Partial<{
     continues: boolean;
-}>;
+}>>;
 export declare const MessageRoot: React.ForwardRefExoticComponent<Omit<MessageRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type MessageHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & Pick<MessageMetadata, 'authorName' | 'timestamp'>;
 export declare const MessageHeading: ({ children, classNames, timestamp, authorName, ...props }: MessageHeadingProps) => React.JSX.Element;

package/dist/types/src/Message/Message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../src/Message/Message.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGrG,OAAO,EAAU,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,KAAK,kBAAkB,EAAmC,MAAM,uBAAuB,CAAC;AAKjG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAC1E,eAAe,GACf,OAAO,CAAC;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAElC,eAAO,MAAM,WAAW,sGA+BvB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAChF,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,WAAW,CAAC,CAAC;AAEpD,eAAO,MAAM,cAAc,GAAI,2DAA2D,mBAAmB,sBAU5G,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AAEzE,eAAO,MAAM,iBAAiB,GAAI,gBAAgB,sBAAsB,sBAKvE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AAElE,eAAO,MAAM,WAAW,GAAI,eAAe,gBAAgB,sBAQ1D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC;AAE7D,eAAO,MAAM,WAAW,GAAI,wBAAwB,gBAAgB,sBAEnE,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,GAAG,eAAe,GACjB,kBAAkB,CAAC;AA4BrB,eAAO,MAAM,cAAc,GAAI,qIAY5B,mBAAmB,sBA8BrB,CAAC"}
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../src/Message/Message.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAE,KAAK,wBAAwB,EAAc,MAAM,OAAO,CAAC;AAErG,OAAO,EAAU,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,KAAK,kBAAkB,EAAiB,MAAM,uBAAuB,CAAC;AAO/E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAC5C,qBAAqB,CAAC,KAAK,CAAC,GAAG,eAAe,GAAG,OAAO,CAAC;IAAE,SAAS,EAAE,OAAO,CAAA;CAAE,CAAC,CACjF,CAAC;AAGF,eAAO,MAAM,WAAW,sGA+BvB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAChF,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,WAAW,CAAC,CAAC;AAEpD,eAAO,MAAM,cAAc,8DAA+D,mBAAmB,sBAU5G,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;AAEzE,eAAO,MAAM,iBAAiB,mBAAoB,sBAAsB,sBAKvE,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AAElE,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,sBAQ1D,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC;AAE7D,eAAO,MAAM,WAAW,2BAA4B,gBAAgB,sBAEnE,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,GAAG,eAAe,GACjB,kBAAkB,CAAC;AA4BrB,eAAO,MAAM,cAAc,wIAYxB,mBAAmB,sBA8BrB,CAAC"}