@dxos/react-ui-thread 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

package/dist/lib/browser/index.mjs

@@ -1,191 +1,201 @@
-// src/translations.ts
-var translationKey = "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"
-      }
-    }
-  }
-];
+import {
+  translationKey
+} from "./chunk-QFRRLZVL.mjs";
 
 // src/Thread/Thread.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React, { forwardRef } from "react";
-import { Icon, 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 ThreadRoot = /* @__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, "bg-[var(--surface-bg)] current-related attention-surface [--controls-opacity:0]", classNames),
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
+import React2, { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { Obj as Obj2 } from "@dxos/echo";
+import { Icon, IconButton as IconButton2, ScrollArea, composable, composableProps, useThemeContext as useThemeContext2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Mosaic } from "@dxos/react-ui-mosaic";
+import { createBasicExtensions as createBasicExtensions2, createThemeExtensions as createThemeExtensions2, listener as listener2 } from "@dxos/ui-editor";
+import { hoverableControlItem as hoverableControlItem2, hoverableControls as hoverableControls2, hoverableFocusedWithinControls as hoverableFocusedWithinControls2, mx as mx3 } from "@dxos/ui-theme";
+
+// src/command.ts
+import { HighlightStyle, StreamLanguage, syntaxHighlighting } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
+import { tags } from "@dxos/ui-editor";
+import { mx } from "@dxos/ui-theme";
+var parser = StreamLanguage.define({
+  startState: () => ({
+    count: 0
+  }),
+  token: (stream, state) => {
+    state.count++;
+    if (stream.eatSpace()) {
+      return null;
+    }
+    if (state.count === 1 && stream.match(/^\/\w+/)) {
+      return "tagName";
+    }
+    if (stream.match(/^@\w+/)) {
+      return "labelName";
+    }
+    stream.next();
+    return null;
   }
 });
-var ThreadHeader = /* @__PURE__ */ forwardRef(({ 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(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"),
-      ref: forwardedRef
-    }, children)));
-  } finally {
-    _effect.f();
+var styles = HighlightStyle.define([
+  {
+    tag: tags.tagName,
+    class: mx("dx-tag dx-tag--indigo")
+  },
+  {
+    tag: tags.labelName,
+    class: mx("dx-tag dx-tag--blue")
   }
-});
-var ThreadStatus = /* @__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(Icon, {
-      icon: "ph--spinner--bold",
-      classNames: "is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow",
-      "data-visible": activity ? "show" : "hide"
-    }), /* @__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 theme = EditorView.theme({
+  ".dx-tag": {
+    verticalAlign: "bottom"
   }
 });
-var Thread = {
-  Root: ThreadRoot,
-  Header: ThreadHeader,
-  Status: ThreadStatus
-};
+var command = [
+  parser,
+  syntaxHighlighting(styles),
+  theme
+];
+
+// src/context.ts
+import { createContext } from "@radix-ui/react-context";
+var [ThreadContextProvider, useThreadContext] = createContext("Thread");
 
 // src/Message/Message.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import { EditorView as EditorView2 } from "@codemirror/view";
 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 React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { Obj, Ref } from "@dxos/echo";
+import { Avatar, IconButton, useOnTransition, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { useTextEditor } from "@dxos/react-ui-editor";
+import { createBasicExtensions, createThemeExtensions, keymap, listener } from "@dxos/ui-editor";
+import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx as mx2 } from "@dxos/ui-theme";
 import { hexToEmoji, hexToHue, isTruthy } from "@dxos/util";
 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-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)))
-    );
-  } finally {
-    _effect.f();
-  }
+var buttonGroupClassNames = "flex flex-row items-center gap-0.5 pe-2";
+var buttonClassNames = "p-1! transition-opacity";
+var MessageRoot = /* @__PURE__ */ forwardRef(({ authorImgSrc, authorId, authorName, authorAvatarProps, continues = true, controls, children, classNames, ...rootProps }, forwardedRef) => {
+  return /* @__PURE__ */ React.createElement(Avatar.Root, null, /* @__PURE__ */ React.createElement("div", {
+    "data-testid": "thread.message",
+    ...rootProps,
+    className: mx2("grid grid-cols-[var(--dx-rail-size)_1fr_min-content] w-full", classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col items-center gap-2 pt-1"
+  }, /* @__PURE__ */ React.createElement(Avatar.Content, {
+    size: avatarSize,
+    hue: authorAvatarProps?.hue || hexToHue(authorId ?? "0"),
+    fallback: authorAvatarProps?.emoji || hexToEmoji(authorId ?? "0"),
+    ...authorImgSrc && {
+      imgSrc: authorImgSrc
+    }
+  }), continues && /* @__PURE__ */ React.createElement("div", {
+    className: "w-px grow bg-separator"
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "py-1 min-w-0"
+  }, children), controls && /* @__PURE__ */ React.createElement("div", {
+    className: "self-start"
+  }, controls)));
 });
+MessageRoot.displayName = "Message.Root";
 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__ */ React.createElement("div", {
+    ...props,
+    className: mx2("flex gap-2 items-start", classNames)
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: "grow"
+  }, /* @__PURE__ */ React.createElement(MessageAuthorName, {
+    authorName
+  }), timestamp && /* @__PURE__ */ React.createElement(MessageTime, {
+    timestamp
+  })), children);
 };
+MessageHeading.displayName = "Message.Heading";
 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 } = useTranslation(translationKey);
+  return /* @__PURE__ */ React.createElement(Avatar.Label, {
+    classNames: "block truncate text-sm text-subdued"
+  }, authorName ?? t("anonymous.label"));
 };
+MessageAuthorName.displayName = "Message.AuthorName";
 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 } = useTranslation(translationKey);
+  const dt = timestamp ? new Date(timestamp) : void 0;
+  return /* @__PURE__ */ React.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();
-  }
+MessageTime.displayName = "Message.Time";
+var MessageBody = ({ message, isAuthor, editing, onSave }) => {
+  const { components } = useThreadContext("Message.Body");
+  const textBlockIndex = message.blocks.findIndex((block) => block._tag === "text");
+  const textBlock = textBlockIndex !== -1 ? message.blocks[textBlockIndex] : void 0;
+  const proposalBlock = message.blocks.find((block) => block._tag === "proposal");
+  const references = message.blocks.filter((block) => block._tag === "reference").map((block) => block.reference);
+  const Object = components.Object;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, textBlock && /* @__PURE__ */ React.createElement(TextBlock, {
+    block: textBlock,
+    isAuthor,
+    editing,
+    onSave
+  }), proposalBlock && /* @__PURE__ */ React.createElement("div", {
+    className: "me-4 italic"
+  }, proposalBlock.text), Object && Ref.Array.targets(references).map((reference, index) => /* @__PURE__ */ React.createElement(Object, {
+    key: index,
+    subject: reference
+  })));
+};
+MessageBody.displayName = "Message.Body";
+var TextBlock = ({ block, isAuthor, editing, onSave }) => {
+  const { themeMode } = useThemeContext();
+  const inMemoryContentRef = useRef(block.text);
+  const handleDocumentChange = useCallback((next) => {
+    inMemoryContentRef.current = next;
+  }, []);
+  const saveDocumentChange = useCallback(() => {
+    onSave?.(inMemoryContentRef.current);
+  }, [
+    onSave
+  ]);
+  useOnTransition(editing, true, false, saveDocumentChange);
+  const { parentRef, focusAttributes, view } = useTextEditor(() => ({
+    initialValue: block.text,
+    extensions: [
+      createBasicExtensions({
+        readOnly: !isAuthor || !editing
+      }),
+      createThemeExtensions({
+        themeMode
+      }),
+      command,
+      EditorView2.updateListener.of((update) => {
+        if (update.docChanged) {
+          handleDocumentChange(update.state.doc.toString());
+        }
+      })
+    ]
+  }), [
+    block.text,
+    editing,
+    isAuthor,
+    themeMode,
+    handleDocumentChange
+  ]);
+  useEffect(() => {
+    if (editing) {
+      view?.focus();
+    }
+  }, [
+    editing,
+    view
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: parentRef,
+    className: "me-4",
+    ...focusAttributes
+  });
 };
 var keyBindings = ({ onSend, onClear }) => [
   {
@@ -194,74 +204,351 @@ var keyBindings = ({ onSend, onClear }) => [
       if (onSend) {
         onSend();
         return true;
-      } else {
-        return false;
       }
+      return false;
     }
   },
   {
-    // TODO(burdon): Other key bindings.
     key: "Meta+Backspace",
     run: () => {
       if (onClear) {
         onClear();
         return true;
-      } else {
-        return false;
       }
+      return false;
     }
   }
 ];
-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?.();
-            }
+var MessageTextbox = /* @__PURE__ */ forwardRef(({ id, authorId, authorName, authorImgSrc, authorAvatarProps, disabled, extensions, onSend, onClear, onEditorFocus, ...editorProps }, forwardedRef) => {
+  const { parentRef, focusAttributes, view } = useTextEditor(() => ({
+    id,
+    extensions: [
+      keymap.of(keyBindings({
+        onSend,
+        onClear
+      })),
+      listener({
+        onFocus: ({ focusing }) => {
+          if (focusing) {
+            onEditorFocus?.();
           }
-        }),
-        extensions
-      ].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("plb-0.5 mie-1 rounded-sm", focusRing, disabled && "opacity-50"),
-      ...focusAttributes
-    }));
-  } finally {
-    _effect.f();
-  }
+    ].filter(isTruthy),
+    ...editorProps
+  }), [
+    id,
+    extensions
+  ]);
+  useImperativeHandle(forwardedRef, () => ({
+    focus: () => view?.focus()
+  }), [
+    view
+  ]);
+  return /* @__PURE__ */ React.createElement(MessageRoot, {
+    id,
+    authorId,
+    authorName,
+    authorImgSrc,
+    authorAvatarProps,
+    continues: false
+  }, /* @__PURE__ */ React.createElement("div", {
+    ref: parentRef,
+    className: mx2("py-0.5 me-1 rounded-xs dx-focus-ring", disabled && "opacity-50"),
+    ...focusAttributes
+  }));
+});
+MessageTextbox.displayName = "Message.Textbox";
+var MessageTile = ({ message, classNames }) => {
+  const { t } = useTranslation(translationKey);
+  const { getMetadata, identityDid, editable, onMessageDelete, onAcceptProposal } = useThreadContext("Message.Tile");
+  const [editing, setEditing] = useState(false);
+  const metadata = getMetadata(message);
+  const isAuthor = !!identityDid && identityDid === metadata.authorId;
+  const hasProposal = message.blocks.some((block) => block._tag === "proposal");
+  const handleEdit = useCallback(() => setEditing((value) => !value), []);
+  const handleDelete = useCallback(() => onMessageDelete?.(message.id), [
+    onMessageDelete,
+    message.id
+  ]);
+  const handleAcceptProposal = useCallback(() => onAcceptProposal?.(message.id), [
+    onAcceptProposal,
+    message.id
+  ]);
+  const handleSave = useCallback((text) => {
+    Obj.update(message, (message2) => {
+      const block = message2.blocks.find((block2) => block2._tag === "text");
+      if (block && block._tag === "text") {
+        block.text = text;
+      }
+    });
+  }, [
+    message
+  ]);
+  const showEdit = isAuthor && editable;
+  const showAccept = hasProposal && !!onAcceptProposal;
+  const showDelete = !!onMessageDelete;
+  const controls = showEdit || showAccept || showDelete ? /* @__PURE__ */ React.createElement("div", {
+    className: buttonGroupClassNames
+  }, showEdit && /* @__PURE__ */ React.createElement(IconButton, {
+    "data-testid": editing ? "thread.message.save" : "thread.message.edit",
+    variant: "ghost",
+    icon: editing ? "ph--check--regular" : "ph--pencil-simple--regular",
+    iconOnly: true,
+    label: t(editing ? "save-message.label" : "edit-message.label"),
+    classNames: [
+      buttonClassNames,
+      hoverableControlItem
+    ],
+    onClick: handleEdit
+  }), showAccept && /* @__PURE__ */ React.createElement(IconButton, {
+    "data-testid": "thread.message.accept",
+    variant: "ghost",
+    icon: "ph--check--regular",
+    iconOnly: true,
+    label: t("accept-proposal.label"),
+    classNames: [
+      buttonClassNames,
+      hoverableControlItem
+    ],
+    onClick: handleAcceptProposal
+  }), showDelete && /* @__PURE__ */ React.createElement(IconButton, {
+    "data-testid": "thread.message.delete",
+    variant: "ghost",
+    icon: "ph--x--regular",
+    iconOnly: true,
+    label: t("delete-message.label"),
+    classNames: [
+      buttonClassNames,
+      hoverableControlItem
+    ],
+    onClick: handleDelete
+  })) : void 0;
+  return /* @__PURE__ */ React.createElement(MessageRoot, {
+    ...metadata,
+    controls,
+    classNames: [
+      hoverableControls,
+      hoverableFocusedWithinControls,
+      classNames
+    ]
+  }, /* @__PURE__ */ React.createElement(MessageHeading, {
+    authorName: metadata.authorName,
+    timestamp: metadata.timestamp
+  }), /* @__PURE__ */ React.createElement(MessageBody, {
+    message,
+    isAuthor,
+    editing,
+    onSave: handleSave
+  }));
+};
+MessageTile.displayName = "Message.Tile";
+var Message = {
+  Root: MessageRoot,
+  Heading: MessageHeading,
+  AuthorName: MessageAuthorName,
+  Time: MessageTime,
+  Body: MessageBody,
+  Textbox: MessageTextbox,
+  Tile: MessageTile
+};
+
+// src/Thread/Thread.tsx
+var getMessageId = (message) => Obj2.getURI(message);
+var ThreadRoot = ({ children, getMetadata, components, identityDid, editable, onMessageDelete, onAcceptProposal }) => {
+  const composerFocus = useRef2(void 0);
+  const registerComposerFocus = useCallback2((focus) => {
+    composerFocus.current = focus;
+  }, []);
+  const focusComposer = useCallback2(() => composerFocus.current?.(), []);
+  return /* @__PURE__ */ React2.createElement(ThreadContextProvider, {
+    getMetadata,
+    components: components ?? {},
+    identityDid,
+    editable,
+    registerComposerFocus,
+    focusComposer,
+    onMessageDelete,
+    onAcceptProposal
+  }, /* @__PURE__ */ React2.createElement(Mosaic.Root, null, children));
+};
+ThreadRoot.displayName = "Thread.Root";
+var ThreadContent = composable(({ children, current, id, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React2.createElement("div", {
+    ...composableProps(props, {
+      role: "group",
+      classNames: [
+        "flex flex-col bg-[var(--surface-bg)] current-related dx-attention-surface [--controls-opacity:0]",
+        hoverableFocusedWithinControls2
+      ]
+    }),
+    "data-testid": "thread",
+    id,
+    "aria-current": current ? "location" : void 0,
+    ref: forwardedRef
+  }, children);
+});
+ThreadContent.displayName = "Thread.Content";
+var ThreadHeader = composable(({ title, detached, current, controls, onSelect, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey);
+  const { focusComposer } = useThreadContext("Thread.Header");
+  const handleSelect = useCallback2(() => {
+    onSelect?.();
+    focusComposer();
+  }, [
+    onSelect,
+    focusComposer
+  ]);
+  return /* @__PURE__ */ React2.createElement("div", {
+    ...composableProps(props, {
+      classNames: [
+        "grid grid-cols-[var(--dx-rail-size)_1fr_min-content] items-center",
+        hoverableControls2,
+        hoverableFocusedWithinControls2
+      ]
+    }),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "flex items-center justify-center"
+  }, /* @__PURE__ */ React2.createElement(IconButton2, {
+    iconOnly: true,
+    variant: "ghost",
+    density: "sm",
+    icon: "ph--caret-double-right--regular",
+    label: t("select-thread.label"),
+    classNames: "text-description",
+    onClick: handleSelect
+  })), /* @__PURE__ */ React2.createElement("div", {
+    className: "flex items-center overflow-hidden"
+  }, /* @__PURE__ */ React2.createElement("p", {
+    role: "heading",
+    "data-testid": "thread.heading",
+    className: mx3("me-2 font-medium truncate italic", current ? "text-accent-text" : "text-description", detached && "line-through decoration-1")
+  }, title)), controls);
+});
+ThreadHeader.displayName = "Thread.Header";
+var MessageTileAdapter = ({ id, data, location, draggable, current, selected }) => /* @__PURE__ */ React2.createElement(Mosaic.Tile, {
+  id,
+  data,
+  location,
+  draggable,
+  current,
+  selected
+}, /* @__PURE__ */ React2.createElement(Message.Tile, {
+  message: data
+}));
+var ThreadMessages = ({ messages, estimateSize = 80, currentId, classNames }) => {
+  const [viewport, setViewport] = useState2(null);
+  const items = useMemo(() => messages.filter(Boolean), [
+    messages
+  ]);
+  return /* @__PURE__ */ React2.createElement(Mosaic.Container, {
+    asChild: true,
+    orientation: "vertical",
+    autoScroll: viewport,
+    currentId,
+    eventHandler: {
+      id: "thread",
+      canDrop: () => false
+    }
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Root, {
+    classNames: mx3("col-span-2", classNames),
+    orientation: "vertical"
+  }, /* @__PURE__ */ React2.createElement(ScrollArea.Viewport, {
+    ref: setViewport
+  }, /* @__PURE__ */ React2.createElement(Mosaic.VirtualStack, {
+    items,
+    getId: getMessageId,
+    Tile: MessageTileAdapter,
+    draggable: false,
+    getScrollElement: () => viewport,
+    estimateSize: () => estimateSize
+  }))));
+};
+ThreadMessages.displayName = "Thread.Messages";
+var ThreadTextbox = ({ placeholder, autoFocus, disabled, extensions, onSend, ...metadata }) => {
+  const { t } = useTranslation2(translationKey);
+  const { themeMode } = useThemeContext2();
+  const { registerComposerFocus } = useThreadContext("Thread.Textbox");
+  const composerRef = useRef2(null);
+  const messageRef = useRef2("");
+  const [count, setCount] = useState2(0);
+  useEffect2(() => {
+    registerComposerFocus(() => composerRef.current?.focus());
+    return () => registerComposerFocus(void 0);
+  }, [
+    registerComposerFocus
+  ]);
+  const editorExtensions = useMemo(() => [
+    createBasicExtensions2({
+      placeholder: placeholder ?? t("message.placeholder")
+    }),
+    createThemeExtensions2({
+      themeMode
+    }),
+    listener2({
+      onChange: ({ text }) => messageRef.current = text
+    }),
+    command,
+    extensions
+  ].filter(Boolean), [
+    themeMode,
+    placeholder,
+    t,
+    extensions,
+    count
+  ]);
+  const handleSend = useCallback2(() => {
+    const text = messageRef.current;
+    if (!text?.length || !onSend) {
+      return;
+    }
+    if (onSend(text)) {
+      messageRef.current = "";
+      setCount((value) => value + 1);
+    }
+  }, []);
+  return /* @__PURE__ */ React2.createElement(Message.Textbox, {
+    ref: composerRef,
+    ...metadata,
+    autoFocus,
+    disabled,
+    extensions: editorExtensions,
+    onSend: handleSend
+  });
+};
+ThreadTextbox.displayName = "Thread.Textbox";
+var ThreadStatus = /* @__PURE__ */ forwardRef2(({ activity, classNames, children, ...props }, forwardedRef) => {
+  const { t } = useTranslation2(translationKey);
+  return /* @__PURE__ */ React2.createElement("div", {
+    ...props,
+    className: mx3("col-start-2 grid grid-cols-[min-content_1fr_max-content] pb-2 pe-2 text-xs text-description", classNames),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React2.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__ */ React2.createElement("span", {
+    className: "truncate min-w-0",
+    "aria-live": "polite"
+  }, activity ? children : null), /* @__PURE__ */ React2.createElement("span", {
+    className: mx3("text-end", hoverableControlItem2)
+  }, t("enter-to-send.message")));
+});
+ThreadStatus.displayName = "Thread.Status";
+var Thread = {
+  Root: ThreadRoot,
+  Content: ThreadContent,
+  Header: ThreadHeader,
+  Messages: ThreadMessages,
+  Textbox: ThreadTextbox,
+  Status: ThreadStatus
 };
 export {
-  MessageAuthorName,
-  MessageBody,
-  MessageHeading,
-  MessageRoot,
-  MessageTextbox,
-  MessageTime,
+  Message,
   Thread,
-  threadLayout,
-  translations
+  command,
+  useThreadContext
 };
 //# sourceMappingURL=index.mjs.map