@dxos/react-ui-thread 0.8.4-main.3eb6e50203 → 0.8.4-main.3fbcb4aa9b

package/dist/lib/browser/index.mjs

@@ -1,29 +1,9 @@
-// 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"
-      }
-    }
-  }
-];
-
 // src/Thread/Thread.tsx
 import React, { forwardRef } from "react";
 import { Icon, useTranslation } from "@dxos/react-ui";
 import { hoverableControlItem, hoverableFocusedWithinControls, mx } from "@dxos/ui-theme";
-var threadLayout = "is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]";
+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",
@@ -32,24 +12,22 @@ var ThreadRoot = /* @__PURE__ */ forwardRef(({ current, children, classNames, ..
       "aria-current": typeof current === "string" ? current : "location"
     },
     ...props,
-    className: mx(threadLayout, hoverableFocusedWithinControls, "bg-[var(--surface-bg)] current-related attention-surface [--controls-opacity:0]", classNames),
+    className: mx(threadLayout, hoverableFocusedWithinControls, "bg-[var(--surface-bg)] current-related dx-attention-surface [--controls-opacity:0]", classNames),
     ref: forwardedRef
   }, children);
 });
 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("mie-2 text-description font-medium truncate italic", detached && "line-through decoration-1"),
+    className: mx("me-2 text-description font-medium truncate italic", detached && "line-through decoration-1"),
     ref: forwardedRef
   }, children)));
 });
@@ -57,18 +35,18 @@ var ThreadStatus = /* @__PURE__ */ forwardRef(({ activity, classNames, children,
   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),
+    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: "is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow",
+    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-is-0",
+    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")));
+  }, t("enter-to-send.message")));
 });
 var Thread = {
   Root: ThreadRoot,
@@ -82,40 +60,33 @@ import React2, { forwardRef as forwardRef2 } from "react";
 import { Avatar, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { useTextEditor } from "@dxos/react-ui-editor";
 import { keymap, listener } from "@dxos/ui-editor";
-import { focusRing, mx as mx2 } from "@dxos/ui-theme";
+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) => {
-  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-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: "is-px grow bg-separator"
-    })), /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      className: "plb-1 min-is-0"
-    }, children)))
-  );
+  return /* @__PURE__ */ React2.createElement(Avatar.Root, null, /* @__PURE__ */ React2.createElement("div", {
+    "data-testid": "thread.message",
+    ...rootProps,
+    className: mx2("grid grid-cols-subgrid col-span-2", classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React2.createElement("div", {
+    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", {
+    className: "w-px grow bg-separator"
+  })), /* @__PURE__ */ React2.createElement("div", {
+    className: "py-1 min-w-0"
+  }, children)));
 });
 var MessageHeading = ({ children, classNames, timestamp, authorName, ...props }) => {
   return /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
     ...props,
     className: mx2("flex gap-2 items-start", classNames)
   }, /* @__PURE__ */ React2.createElement("p", {
@@ -127,16 +98,16 @@ var MessageHeading = ({ children, classNames, timestamp, authorName, ...props })
   })), children);
 };
 var MessageAuthorName = ({ authorName }) => {
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation2(translationKey2);
   return /* @__PURE__ */ React2.createElement(Avatar.Label, {
     classNames: "block truncate text-sm text-subdued"
-  }, authorName ?? t("anonymous label"));
+  }, authorName ?? t("anonymous.label"));
 };
 var MessageTime = ({ timestamp }) => {
-  const { dtLocale } = useTranslation2(translationKey);
+  const { dtLocale } = useTranslation2(translationKey2);
   const dt = timestamp ? new Date(timestamp) : void 0;
   return /* @__PURE__ */ React2.createElement("time", {
-    className: "block text-subdued text-xs pbe-0.5",
+    className: "block text-subdued text-xs pb-0.5",
     dateTime: dt?.toISOString()
   }, dt ? formatDistanceToNow(dt, {
     locale: dtLocale,
@@ -201,9 +172,8 @@ var MessageTextbox = ({ id, authorId, authorName, authorImgSrc, authorAvatarProp
     authorAvatarProps,
     continues: false
   }, /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
     ref: parentRef,
-    className: mx2("plb-0.5 mie-1 rounded-sm", focusRing, disabled && "opacity-50"),
+    className: mx2("py-0.5 me-1 rounded-xs dx-focus-ring", disabled && "opacity-50"),
     ...focusAttributes
   }));
 };
@@ -215,7 +185,6 @@ export {
   MessageTextbox,
   MessageTime,
   Thread,
-  threadLayout,
-  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\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", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type ComponentPropsWithRef, forwardRef } 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';\nimport type { ThreadEntity } from '../types';\n\n// TODO(burdon): Avoid exporting fragments.\nexport const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';\n\n//\n// Root\n//\n\ntype ThreadRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & ThreadEntity & { current?: boolean };\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 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 = ComponentPropsWithRef<'div'> & { 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(\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\n//\n// Status\n//\n\ntype ThreadStatusProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\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 pie-2 text-xs text-description',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        <Icon\n          icon='ph--spinner--bold'\n          classNames='is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow'\n          data-visible={activity ? 'show' : 'hide'}\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\nexport const Thread = {\n  Root: ThreadRoot,\n  Header: ThreadHeader,\n  Status: ThreadStatus,\n};\n\nexport type { ThreadRootProps, ThreadHeaderProps as ThreadHeadingProps, 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 { focusRing, mx } from '@dxos/ui-theme';\nimport { hexToEmoji, hexToHue, isTruthy } 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\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    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-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='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(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('plb-0.5 mie-1 rounded-sm', focusRing, disabled && 'opacity-50')}\n        {...focusAttributes}\n      />\n    </MessageRoot>\n  );\n};\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;;;;ACpBF,OAAOE,SAAqCC,kBAAkB;AAE9D,SAASC,MAA4BC,sBAAsB;AAC3D,SAASC,sBAAsBC,gCAAgCC,UAAU;AAMlE,IAAMC,eAAe;AAQ5B,IAAMC,aAAaC,2BACjB,CAAC,EAAEC,SAASC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;AAC5C,SACE,sBAAA,cAACC,OAAAA;IACCC,MAAK;IACLC,eAAY;IACX,GAAIP,WAAW;MAAE,gBAAgB,OAAOA,YAAY,WAAWA,UAAU;IAAW;IACpF,GAAGG;IACJK,WAAWC,GACTZ,cACAa,gCACA,mFACAR,UAAAA;IAEFS,KAAKP;KAEJH,QAAAA;AAGP,CAAA;AASF,IAAMW,eAAeb,2BACnB,CAAC,EAAEE,UAAUY,UAAU,GAAGV,MAAAA,GAASC,iBAAAA;AACjC,SACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACC,OAAAA;IAAIC,MAAK;IAAOE,WAAU;KACzB,sBAAA,cAACM,MAAAA;IAAKC,MAAK;OAEb,sBAAA,cAACV,OAAAA;IAAIC,MAAK;IAAOE,WAAU;KACzB,sBAAA,cAACQ,KAAAA;IACCV,MAAK;IACLC,eAAY;IACX,GAAGJ;IACJK,WAAWC,GACT,sDACAI,YAAY,2BAAA;IAEdF,KAAKP;KAEJH,QAAAA,CAAAA,CAAAA;AAKX,CAAA;AAWF,IAAMgB,eAAelB,2BACnB,CAAC,EAAEmB,UAAUhB,YAAYD,UAAU,GAAGE,MAAAA,GAASC,iBAAAA;AAC7C,QAAM,EAAEe,EAAC,IAAKC,eAAeC,cAAAA;AAC7B,SACE,sBAAA,cAAChB,OAAAA;IACE,GAAGF;IACJK,WAAWC,GACT,gGACAP,UAAAA;IAEFS,KAAKP;KAEL,sBAAA,cAACU,MAAAA;IACCC,MAAK;IACLb,YAAW;IACXoB,gBAAcJ,WAAW,SAAS;MAEpC,sBAAA,cAACK,QAAAA;IAAKf,WAAU;IAAoBgB,aAAU;KAC3CN,WAAWjB,WAAW,IAAA,GAEzB,sBAAA,cAACsB,QAAAA;IAAKf,WAAWC,GAAG,YAAYgB,oBAAAA;KAAwBN,EAAE,uBAAA,CAAA,CAAA;AAGhE,CAAA;AAGK,IAAMO,SAAS;EACpBC,MAAM7B;EACN8B,QAAQhB;EACRiB,QAAQZ;AACV;;;AC7GA,SAASa,2BAA2B;AACpC,OAAOC,UAAoEC,cAAAA,mBAAkB;AAE7F,SAASC,QAA8BC,kBAAAA,uBAAsB;AAC7D,SAAkCC,qBAAqB;AACvD,SAASC,QAAQC,gBAAgB;AACjC,SAASC,WAAWC,MAAAA,WAAU;AAC9B,SAASC,YAAYC,UAAUC,gBAAgB;AAK/C,IAAMC,aAAa;AAOZ,IAAMC,cAAcC,gBAAAA,YACzB,CACE,EAAEC,cAAcC,UAAUC,YAAYC,mBAAmBC,YAAY,MAAMC,UAAUC,YAAY,GAAGC,UAAAA,GACpGC,iBAAAA;AAEA;;IAEE,gBAAAC,OAAA,cAACC,OAAOC,MAAI,MACV,gBAAAF,OAAA,cAACG,OAAAA;MACCC,MAAK;MACLC,eAAY;MACX,GAAGP;MACJQ,WAAWC,IAAG,qCAAqCV,UAAAA;MACnDW,KAAKT;OAEL,gBAAAC,OAAA,cAACG,OAAAA;MAAIC,MAAK;MAAOE,WAAU;OACzB,gBAAAN,OAAA,cAACC,OAAOQ,SAAO;MACbC,MAAMtB;MACNuB,KAAKjB,mBAAmBiB,OAAOC,SAASpB,YAAY,GAAA;MACpDqB,UAAUnB,mBAAmBoB,SAASC,WAAWvB,YAAY,GAAA;MAC5D,GAAID,gBAAgB;QAAEyB,QAAQzB;MAAa;QAE7CI,aAAa,gBAAAK,OAAA,cAACG,OAAAA;MAAIC,MAAK;MAAOE,WAAU;SAE3C,gBAAAN,OAAA,cAACG,OAAAA;MAAIC,MAAK;MAAOE,WAAU;OACxBV,QAAAA,CAAAA,CAAAA;;AAKX,CAAA;AAMK,IAAMqB,iBAAiB,CAAC,EAAErB,UAAUC,YAAYqB,WAAWzB,YAAY,GAAG0B,MAAAA,MAA4B;AAC3G,SACE,gBAAAnB,OAAA,cAACG,OAAAA;IAAIC,MAAK;IAAQ,GAAGe;IAAOb,WAAWC,IAAG,0BAA0BV,UAAAA;KAClE,gBAAAG,OAAA,cAACoB,KAAAA;IAAEd,WAAU;KACX,gBAAAN,OAAA,cAACqB,mBAAAA;IAAkB5B;MAClByB,aAAa,gBAAAlB,OAAA,cAACsB,aAAAA;IAAYJ;OAE5BtB,QAAAA;AAGP;AAIO,IAAMyB,oBAAoB,CAAC,EAAE5B,WAAU,MAA0B;AACtE,QAAM,EAAE8B,EAAC,IAAKC,gBAAeC,cAAAA;AAC7B,SACE,gBAAAzB,OAAA,cAACC,OAAOyB,OAAK;IAAC7B,YAAW;KAAuCJ,cAAc8B,EAAE,iBAAA,CAAA;AAEpF;AAIO,IAAMD,cAAc,CAAC,EAAEJ,UAAS,MAAoB;AACzD,QAAM,EAAES,SAAQ,IAAKH,gBAAeC,cAAAA;AACpC,QAAMG,KAAKV,YAAY,IAAIW,KAAKX,SAAAA,IAAaY;AAC7C,SACE,gBAAA9B,OAAA,cAAC+B,QAAAA;IAAKzB,WAAU;IAAqC0B,UAAUJ,IAAIK,YAAAA;KAChEL,KAAKM,oBAAoBN,IAAI;IAAEO,QAAQR;IAAUS,WAAW;EAAK,CAAA,IAAK,EAAA;AAG7E;AAIO,IAAMC,cAAc,CAAC,EAAEzC,UAAU,GAAGuB,MAAAA,MAAyB;AAClE,SAAO,gBAAAnB,OAAA,cAACoB,KAAMD,OAAQvB,QAAAA;AACxB;AAUA,IAAM0C,cAAc,CAAC,EAAEC,QAAQC,QAAO,MAAwD;EAC5F;IACEC,KAAK;IACLC,KAAK,MAAA;AACH,UAAIH,QAAQ;AACVA,eAAAA;AACA,eAAO;MACT,OAAO;AACL,eAAO;MACT;IACF;EACF;EACA;;IAEEE,KAAK;IACLC,KAAK,MAAA;AACH,UAAIF,SAAS;AACXA,gBAAAA;AACA,eAAO;MACT,OAAO;AACL,eAAO;MACT;IACF;EACF;;AAGK,IAAMG,iBAAiB,CAAC,EAC7BC,IACApD,UACAC,YACAF,cACAG,mBACAmD,UACAC,YACAP,QACAC,SACAO,eACA,GAAGC,YAAAA,MACiB;AACpB,QAAM,EAAEC,WAAWC,gBAAe,IAAKC,cACrC,OAAO;IACLP;IACAE,YAAY;MACVM,OAAOC,GAAGf,YAAY;QAAEC;QAAQC;MAAQ,CAAA,CAAA;MACxCc,SAAS;QACPC,SAAS,CAAC,EAAEC,SAAQ,MAAE;AACpB,cAAIA,UAAU;AACZT,4BAAAA;UACF;QACF;MACF,CAAA;MACAD;MACAW,OAAOC,QAAAA;IACT,GAAGV;EACL,IACA;IAACJ;IAAIE;GAAW;AAGlB,SACE,gBAAA9C,OAAA,cAACX,aAAAA;IAAkBuD;IAAIpD;IAAUC;IAAYF;IAAcG;IAAqBC,WAAW;KACzF,gBAAAK,OAAA,cAACG,OAAAA;IACCC,MAAK;IACLI,KAAKyC;IACL3C,WAAWC,IAAG,4BAA4BoD,WAAWd,YAAY,YAAA;IAChE,GAAGK;;AAIZ;",
-  "names": ["translationKey", "translations", "React", "forwardRef", "Icon", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "threadLayout", "ThreadRoot", "forwardRef", "current", "children", "classNames", "props", "forwardedRef", "div", "role", "data-testid", "className", "mx", "hoverableFocusedWithinControls", "ref", "ThreadHeader", "detached", "Icon", "icon", "p", "ThreadStatus", "activity", "t", "useTranslation", "translationKey", "data-visible", "span", "aria-live", "hoverableControlItem", "Thread", "Root", "Header", "Status", "formatDistanceToNow", "React", "forwardRef", "Avatar", "useTranslation", "useTextEditor", "keymap", "listener", "focusRing", "mx", "hexToEmoji", "hexToHue", "isTruthy", "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", "isTruthy", "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 className='flex items-center justify-center text-description'>\n          <Icon icon='ph--caret-double-right--regular' />\n        </div>\n        <div 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          data-testid='thread.message'\n          {...rootProps}\n          className={mx('grid grid-cols-subgrid col-span-2', classNames)}\n          ref={forwardedRef}\n        >\n          <div 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 className='w-px grow bg-separator' />}\n          </div>\n          <div className='py-1 min-w-0'>{children}</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 {...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        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": ";AAIA,OAAOA,SAAgCC,kBAAqC;AAE5E,SAASC,MAA4BC,sBAAsB;AAC3D,SAASC,sBAAsBC,gCAAgCC,UAAU;AAEzE,SAASC,sBAAsB;AAKxB,IAAMC,eAAe;AAY5B,IAAMC,aAAaR,2BACjB,CAAC,EAAES,SAASC,UAAUC,YAAY,GAAGC,MAAAA,GAASC,iBAAAA;AAC5C,SACE,sBAAA,cAACC,OAAAA;IACCC,MAAK;IACLC,eAAY;IACX,GAAIP,WAAW;MAAE,gBAAgB,OAAOA,YAAY,WAAWA,UAAU;IAAW;IACpF,GAAGG;IACJK,WAAWZ,GACTE,cACAH,gCACA,sFACAO,UAAAA;IAEFO,KAAKL;KAEJH,QAAAA;AAGP,CAAA;AASF,IAAMS,eAAenB,2BACnB,CAAC,EAAEU,UAAUU,UAAU,GAAGR,MAAAA,GAASC,iBAAAA;AACjC,SACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACC,OAAAA;IAAIG,WAAU;KACb,sBAAA,cAAChB,MAAAA;IAAKoB,MAAK;OAEb,sBAAA,cAACP,OAAAA;IAAIG,WAAU;KACb,sBAAA,cAACK,KAAAA;IACCP,MAAK;IACLC,eAAY;IACX,GAAGJ;IACJK,WAAWZ,GAAG,qDAAqDe,YAAY,2BAAA;IAC/EF,KAAKL;KAEJH,QAAAA,CAAAA,CAAAA;AAKX,CAAA;AAWF,IAAMa,eAAevB,2BACnB,CAAC,EAAEwB,UAAUb,YAAYD,UAAU,GAAGE,MAAAA,GAASC,iBAAAA;AAC7C,QAAM,EAAEY,EAAC,IAAKvB,eAAeI,cAAAA;AAC7B,SACE,sBAAA,cAACQ,OAAAA;IACE,GAAGF;IACJK,WAAWZ,GACT,+FACAM,UAAAA;IAEFO,KAAKL;KAEL,sBAAA,cAACZ,MAAAA;IACCoB,MAAK;IACLV,YAAW;IACXe,gBAAcF,WAAW,SAAS;MAEpC,sBAAA,cAACG,QAAAA;IAAKV,WAAU;IAAmBW,aAAU;KAC1CJ,WAAWd,WAAW,IAAA,GAEzB,sBAAA,cAACiB,QAAAA;IAAKV,WAAWZ,GAAG,YAAYF,oBAAAA;KAAwBsB,EAAE,uBAAA,CAAA,CAAA;AAGhE,CAAA;AAGK,IAAMI,SAAS;EACpBC,MAAMtB;EACNuB,QAAQZ;EACRa,QAAQT;AACV;;;AC/GA,SAASU,2BAA2B;AACpC,OAAOC,UAAoEC,cAAAA,mBAAkB;AAE7F,SAASC,QAA8BC,kBAAAA,uBAAsB;AAC7D,SAAkCC,qBAAqB;AACvD,SAASC,QAAQC,gBAAgB;AACjC,SAASC,MAAAA,WAAU;AACnB,SAASC,YAAYC,UAAUC,gBAAgB;AAE/C,SAASC,kBAAAA,uBAAsB;AAI/B,IAAMC,aAAa;AAOZ,IAAMC,cAAcZ,gBAAAA,YACzB,CACE,EAAEa,cAAcC,UAAUC,YAAYC,mBAAmBC,YAAY,MAAMC,UAAUC,YAAY,GAAGC,UAAAA,GACpGC,iBAAAA;AAGA,SACE,gBAAAtB,OAAA,cAACE,OAAOqB,MAAI,MACV,gBAAAvB,OAAA,cAACwB,OAAAA;IACCC,eAAY;IACX,GAAGJ;IACJK,WAAWnB,IAAG,qCAAqCa,UAAAA;IACnDO,KAAKL;KAEL,gBAAAtB,OAAA,cAACwB,OAAAA;IAAIE,WAAU;KACb,gBAAA1B,OAAA,cAACE,OAAO0B,SAAO;IACbC,MAAMjB;IACNkB,KAAKb,mBAAmBa,OAAOrB,SAASM,YAAY,GAAA;IACpDgB,UAAUd,mBAAmBe,SAASxB,WAAWO,YAAY,GAAA;IAC5D,GAAID,gBAAgB;MAAEmB,QAAQnB;IAAa;MAE7CI,aAAa,gBAAAlB,OAAA,cAACwB,OAAAA;IAAIE,WAAU;OAE/B,gBAAA1B,OAAA,cAACwB,OAAAA;IAAIE,WAAU;KAAgBP,QAAAA,CAAAA,CAAAA;AAIvC,CAAA;AAMK,IAAMe,iBAAiB,CAAC,EAAEf,UAAUC,YAAYe,WAAWnB,YAAY,GAAGoB,MAAAA,MAA4B;AAC3G,SACE,gBAAApC,OAAA,cAACwB,OAAAA;IAAK,GAAGY;IAAOV,WAAWnB,IAAG,0BAA0Ba,UAAAA;KACtD,gBAAApB,OAAA,cAACqC,KAAAA;IAAEX,WAAU;KACX,gBAAA1B,OAAA,cAACsC,mBAAAA;IAAkBtB;MAClBmB,aAAa,gBAAAnC,OAAA,cAACuC,aAAAA;IAAYJ;OAE5BhB,QAAAA;AAGP;AAIO,IAAMmB,oBAAoB,CAAC,EAAEtB,WAAU,MAA0B;AACtE,QAAM,EAAEwB,EAAC,IAAKrC,gBAAeQ,eAAAA;AAC7B,SACE,gBAAAX,OAAA,cAACE,OAAOuC,OAAK;IAACrB,YAAW;KAAuCJ,cAAcwB,EAAE,iBAAA,CAAA;AAEpF;AAIO,IAAMD,cAAc,CAAC,EAAEJ,UAAS,MAAoB;AACzD,QAAM,EAAEO,SAAQ,IAAKvC,gBAAeQ,eAAAA;AACpC,QAAMgC,KAAKR,YAAY,IAAIS,KAAKT,SAAAA,IAAaU;AAC7C,SACE,gBAAA7C,OAAA,cAAC8C,QAAAA;IAAKpB,WAAU;IAAoCqB,UAAUJ,IAAIK,YAAAA;KAC/DL,KAAK5C,oBAAoB4C,IAAI;IAAEM,QAAQP;IAAUQ,WAAW;EAAK,CAAA,IAAK,EAAA;AAG7E;AAIO,IAAMC,cAAc,CAAC,EAAEhC,UAAU,GAAGiB,MAAAA,MAAyB;AAClE,SAAO,gBAAApC,OAAA,cAACqC,KAAMD,OAAQjB,QAAAA;AACxB;AAUA,IAAMiC,cAAc,CAAC,EAAEC,QAAQC,QAAO,MAAwD;EAC5F;IACEC,KAAK;IACLC,KAAK,MAAA;AACH,UAAIH,QAAQ;AACVA,eAAAA;AACA,eAAO;MACT,OAAO;AACL,eAAO;MACT;IACF;EACF;EACA;;IAEEE,KAAK;IACLC,KAAK,MAAA;AACH,UAAIF,SAAS;AACXA,gBAAAA;AACA,eAAO;MACT,OAAO;AACL,eAAO;MACT;IACF;EACF;;AAGK,IAAMG,iBAAiB,CAAC,EAC7BC,IACA3C,UACAC,YACAF,cACAG,mBACA0C,UACAC,YACAP,QACAC,SACAO,eACA,GAAGC,YAAAA,MACiB;AACpB,QAAM,EAAEC,WAAWC,gBAAe,IAAK5D,cACrC,OAAO;IACLsD;IACAE,YAAY;MACVvD,OAAO4D,GAAGb,YAAY;QAAEC;QAAQC;MAAQ,CAAA,CAAA;MACxChD,SAAS;QACP4D,SAAS,CAAC,EAAEC,SAAQ,MAAE;AACpB,cAAIA,UAAU;AACZN,4BAAAA;UACF;QACF;MACF,CAAA;MACAD;MACAQ,OAAO1D,QAAAA;IACT,GAAGoD;EACL,IACA;IAACJ;IAAIE;GAAW;AAGlB,SACE,gBAAA5D,OAAA,cAACa,aAAAA;IAAkB6C;IAAI3C;IAAUC;IAAYF;IAAcG;IAAqBC,WAAW;KACzF,gBAAAlB,OAAA,cAACwB,OAAAA;IACCG,KAAKoC;IACLrC,WAAWnB,IAAG,wCAAwCoD,YAAY,YAAA;IACjE,GAAGK;;AAIZ;",
+  "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", "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":{"src/translations.ts":{"bytes":2480,"imports":[],"format":"esm"},"src/Thread/Thread.tsx":{"bytes":9776,"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":"src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"src/Thread/index.ts":{"bytes":459,"imports":[{"path":"src/Thread/Thread.tsx","kind":"import-statement","original":"./Thread"}],"format":"esm"},"src/Message/Message.tsx":{"bytes":16734,"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":"src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"src/Message/index.ts":{"bytes":461,"imports":[{"path":"src/Message/Message.tsx","kind":"import-statement","original":"./Message"}],"format":"esm"},"src/index.ts":{"bytes":839,"imports":[{"path":"src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"src/Thread/index.ts","kind":"import-statement","original":"./Thread"},{"path":"src/Message/index.ts","kind":"import-statement","original":"./Message"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":15281},"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":"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}],"exports":["MessageAuthorName","MessageBody","MessageHeading","MessageRoot","MessageTextbox","MessageTime","Thread","threadLayout","translations"],"entryPoint":"src/index.ts","inputs":{"src/translations.ts":{"bytesInOutput":616},"src/Thread/Thread.tsx":{"bytesInOutput":2549},"src/index.ts":{"bytesInOutput":0},"src/Message/Message.tsx":{"bytesInOutput":4260}},"bytes":7692}}}
+{"inputs":{"src/Thread/Thread.tsx":{"bytes":9583,"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":16171,"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":13727},"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":2561},"src/index.ts":{"bytesInOutput":0},"src/Message/Message.tsx":{"bytesInOutput":4076}},"bytes":6864},"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,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;AAM/E,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;AAGlC,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,sGA4BvB,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,sBA6BrB,CAAC"}

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

@@ -10,16 +10,16 @@ declare const meta: {
         translations: [{
             readonly 'en-US': {
                 readonly "@dxos/react-ui-thread": {
-                    readonly 'plugin name': "Threads";
-                    readonly 'thread title placeholder': "New thread";
-                    readonly 'thread title label': "Title";
-                    readonly 'delete thread label': "Delete";
-                    readonly 'create thread label': "Create thread";
-                    readonly 'message placeholder': "Enter message...";
-                    readonly 'comment placeholder': "Enter comment...";
-                    readonly 'settings standalone label': "Enable standalone thread creation";
-                    readonly 'anonymous label': "Anonymous";
-                    readonly 'enter to send message': "Enter to add ⏎";
+                    readonly 'plugin.name': 'Threads';
+                    readonly 'thread-title.placeholder': 'New thread';
+                    readonly 'thread-title.label': 'Title';
+                    readonly 'delete-thread.label': 'Delete';
+                    readonly 'create-thread.label': 'Create thread';
+                    readonly 'message.placeholder': 'Enter message...';
+                    readonly 'comment.placeholder': 'Enter comment...';
+                    readonly 'settings-standalone.label': 'Enable standalone thread creation';
+                    readonly 'anonymous.label': 'Anonymous';
+                    readonly 'enter-to-send.message': 'Enter to add \u23CE';
                 };
             };
         }];

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

@@ -1 +1 @@
-{"version":3,"file":"Message.stories.d.ts","sourceRoot":"","sources":["../../../../src/Message/Message.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgCxC,QAAA,MAAM,IAAI;;eAEkB,GAAG;;;;;;;;;;;;;;;;;;;;;;CAOM,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
+{"version":3,"file":"Message.stories.d.ts","sourceRoot":"","sources":["../../../../src/Message/Message.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgCxC,QAAA,MAAM,IAAI;;eAEkB,GAAG;;;;;;;;;;;;;;;;;;;;;;CAOM,CAAC;eAEvB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/types/src/Thread/Comments.stories.d.ts

@@ -1,28 +1,28 @@
 import { type StoryObj } from '@storybook/react-vite';
 import React from 'react';
-type StoryProps = {
+type DefaultStoryProps = {
     text?: string;
     autoCreate?: boolean;
 };
 declare const meta: {
     title: string;
     component: any;
-    render: ({ text, autoCreate }: StoryProps) => React.JSX.Element;
+    render: ({ text, autoCreate }: DefaultStoryProps) => React.JSX.Element;
     decorators: import("@storybook/react").Decorator[];
     parameters: {
         translations: [{
             readonly 'en-US': {
                 readonly "@dxos/react-ui-thread": {
-                    readonly 'plugin name': "Threads";
-                    readonly 'thread title placeholder': "New thread";
-                    readonly 'thread title label': "Title";
-                    readonly 'delete thread label': "Delete";
-                    readonly 'create thread label': "Create thread";
-                    readonly 'message placeholder': "Enter message...";
-                    readonly 'comment placeholder': "Enter comment...";
-                    readonly 'settings standalone label': "Enable standalone thread creation";
-                    readonly 'anonymous label': "Anonymous";
-                    readonly 'enter to send message': "Enter to add ⏎";
+                    readonly 'plugin.name': 'Threads';
+                    readonly 'thread-title.placeholder': 'New thread';
+                    readonly 'thread-title.label': 'Title';
+                    readonly 'delete-thread.label': 'Delete';
+                    readonly 'create-thread.label': 'Create thread';
+                    readonly 'message.placeholder': 'Enter message...';
+                    readonly 'comment.placeholder': 'Enter comment...';
+                    readonly 'settings-standalone.label': 'Enable standalone thread creation';
+                    readonly 'anonymous.label': 'Anonymous';
+                    readonly 'enter-to-send.message': 'Enter to add \u23CE';
                 };
             };
         }];

package/dist/types/src/Thread/Comments.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Comments.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Comments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAwD,MAAM,OAAO,CAAC;AAyP7E,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAuHF,QAAA,MAAM,IAAI;;eAEkB,GAAG;mCAvHa,UAAU;;;;;;;;;;;;;;;;;;;;;CA8HjB,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}
+{"version":3,"file":"Comments.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Comments.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAwD,MAAM,OAAO,CAAC;AAwP7E,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAuHF,QAAA,MAAM,IAAI;;eAEkB,GAAG;mCAvHa,iBAAiB;;;;;;;;;;;;;;;;;;;;;CA8HxB,CAAC;eAEvB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAInC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC"}

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

@@ -1,20 +1,34 @@
-import React, { type ComponentPropsWithRef } from 'react';
+import React, { ComponentPropsWithRef, PropsWithChildren } from 'react';
 import { type ThemedClassName } from '@dxos/react-ui';
 import type { ThreadEntity } from '../types';
-export declare const threadLayout = "is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]";
-type ThreadRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & ThreadEntity & {
+export declare const threadLayout = "w-full place-self-start grid grid-cols-[var(--dx-rail-size)_1fr]";
+type ThreadRootProps = ThemedClassName<PropsWithChildren<ThreadEntity & {
     current?: boolean;
-};
-type ThreadHeaderProps = ComponentPropsWithRef<'div'> & {
+} & Pick<ComponentPropsWithRef<'div'>, 'onClickCapture' | 'onFocusCapture'>>>;
+type ThreadHeaderProps = PropsWithChildren<{
     detached?: boolean;
-};
-type ThreadStatusProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
+}>;
+type ThreadStatusProps = ThemedClassName<PropsWithChildren> & {
     activity?: boolean;
 };
 export declare const Thread: {
-    Root: React.ForwardRefExoticComponent<Omit<ThreadRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Header: React.ForwardRefExoticComponent<Omit<ThreadHeaderProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-    Status: React.ForwardRefExoticComponent<Omit<ThreadStatusProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Root: React.ForwardRefExoticComponent<Omit<PropsWithChildren<ThreadEntity & {
+        current?: boolean;
+    } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onClickCapture" | "onFocusCapture">>, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<{
+        detached?: boolean;
+    } & {
+        children?: React.ReactNode | undefined;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Status: React.ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode | undefined;
+    }, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & {
+        activity?: boolean;
+    } & React.RefAttributes<HTMLDivElement>>;
 };
-export type { ThreadRootProps, ThreadHeaderProps as ThreadHeadingProps, ThreadStatusProps };
+export type { ThreadRootProps, ThreadHeaderProps, ThreadStatusProps };
 //# sourceMappingURL=Thread.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAQ,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAI5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,eAAO,MAAM,YAAY,mEAAmE,CAAC;AAM7F,KAAK,eAAe,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG,YAAY,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AA4B5G,KAAK,iBAAiB,GAAG,qBAAqB,CAAC,KAAK,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAgC/E,KAAK,iBAAiB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA4BF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,YAAY,EAAE,eAAe,EAAE,iBAAiB,IAAI,kBAAkB,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,qBAAqB,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAQ,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAK5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,eAAO,MAAM,YAAY,qEAAqE,CAAC;AAM/F,KAAK,eAAe,GAAG,eAAe,CACpC,iBAAiB,CACf,YAAY,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,CAAC,CAC/G,CACF,CAAC;AA4BF,KAAK,iBAAiB,GAAG,iBAAiB,CAAC;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AA6BnE,KAAK,iBAAiB,GAAG,eAAe,CAAC,iBAAiB,CAAC,GAAG;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA4BF,eAAO,MAAM,MAAM;IACjB,IAAI;kBA1FyB,OAAO;;;;IA2FpC,MAAM;mBA7DgD,OAAO;;;;IA8D7D,MAAM;;;;;mBAhCK,OAAO;;CAiCnB,CAAC;AAEF,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/types/src/Thread/Thread.stories.d.ts

@@ -2,7 +2,11 @@ import { type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import("./Thread").ThreadRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<import("..").ThreadEntity & {
+        current?: boolean;
+    } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "onClickCapture" | "onFocusCapture">>, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & React.RefAttributes<HTMLDivElement>>;
     render: () => React.JSX.Element;
     decorators: import("@storybook/react").Decorator[];
     parameters: {
@@ -10,16 +14,16 @@ declare const meta: {
         translations: [{
             readonly 'en-US': {
                 readonly "@dxos/react-ui-thread": {
-                    readonly 'plugin name': "Threads";
-                    readonly 'thread title placeholder': "New thread";
-                    readonly 'thread title label': "Title";
-                    readonly 'delete thread label': "Delete";
-                    readonly 'create thread label': "Create thread";
-                    readonly 'message placeholder': "Enter message...";
-                    readonly 'comment placeholder': "Enter comment...";
-                    readonly 'settings standalone label': "Enable standalone thread creation";
-                    readonly 'anonymous label': "Anonymous";
-                    readonly 'enter to send message': "Enter to add ⏎";
+                    readonly 'plugin.name': 'Threads';
+                    readonly 'thread-title.placeholder': 'New thread';
+                    readonly 'thread-title.label': 'Title';
+                    readonly 'delete-thread.label': 'Delete';
+                    readonly 'create-thread.label': 'Create thread';
+                    readonly 'message.placeholder': 'Enter message...';
+                    readonly 'comment.placeholder': 'Enter comment...';
+                    readonly 'settings-standalone.label': 'Enable standalone thread creation';
+                    readonly 'anonymous.label': 'Anonymous';
+                    readonly 'enter-to-send.message': 'Enter to add \u23CE';
                 };
             };
         }];

package/dist/types/src/Thread/Thread.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thread.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAoC,MAAM,OAAO,CAAC;AA8EzD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAS0B,CAAC;AAErC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
+{"version":3,"file":"Thread.stories.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAoC,MAAM,OAAO,CAAC;AA8EzD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAS0B,CAAC;eAEtB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

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

@@ -1,6 +1,4 @@
-import { translations } from './translations';
 export * from './Thread';
 export * from './Message';
 export type * from './types';
-export { translations };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,mBAAmB,SAAS,CAAC;AAC7B,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,mBAAmB,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/testing.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,aAAa,CAAC,SAAS,GAAG,GAAG,IAAI,eAAe,GAAG;IAC7D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,2CAA2C,gBAAgB,sBAkB3F,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,SAAS,IAAI;IACxC,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,SAAS,EAAG,UAAU,gBAAgB,CAAC,SAAS,CAAC,sBAWlF,CAAC"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/testing.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,aAAa,CAAC,SAAS,GAAG,GAAG,IAAI,eAAe,GAAG;IAC7D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,8CAA+C,gBAAgB,sBAkB3F,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,SAAS,IAAI;IACxC,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,SAAS,YAAa,gBAAgB,CAAC,SAAS,CAAC,sBAQlF,CAAC"}