@dxos/plugin-thread 0.8.4-main.4a85c3132b → 0.8.4-main.4f23b4e393

package/dist/lib/{node-esm/chunk-IQUV7DR6.mjs → neutral/components/index.mjs}

@@ -1,23 +1,20 @@
-import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 import {
-  useDebugMode,
-  useOnEditAnalytics,
-  useStatus
-} from "./chunk-YN2Y7GPW.mjs";
+  command
+} from "../chunk-KRXHIW4P.mjs";
 import {
   getMessageMetadata
-} from "./chunk-ABUFOZVX.mjs";
-import {
-  ThreadCapabilities
-} from "./chunk-QYAVWNVM.mjs";
-import {
-  meta
-} from "./chunk-GPPP2MZ3.mjs";
+} from "../chunk-JLY4NVTA.mjs";
+import "../chunk-J5LGTIGS.mjs";
+
+// src/components/index.ts
+import { lazy } from "react";
 
 // src/components/Call/Call.tsx
 import { useAtomValue as useAtomValue3 } from "@effect-atom/atom-react";
 import React9 from "react";
 import { useCapability as useCapability3 } from "@dxos/app-framework/ui";
+import { useDebugMode } from "#hooks";
+import { ThreadCapabilities as ThreadCapabilities3 } from "#types";
 
 // src/components/Media/AudioStream.tsx
 import React, { useEffect, useRef } from "react";
@@ -107,21 +104,19 @@ VideoObject.displayName = "VideoObject";
 import { useAtomValue } from "@effect-atom/atom-react";
 import React6, { memo as memo2, useMemo as useMemo2 } from "react";
 import { useCapability } from "@dxos/app-framework/ui";
+import { ThreadCapabilities } from "#types";
 
-// src/components/ResponsiveGrid/ResponsiveContainer.tsx
+// src/components/ResponsiveGrid/ResponsivePanel.tsx
 import React3 from "react";
 import { mx as mx2 } from "@dxos/ui-theme";
-var ResponsiveContainer = ({ children }) => {
+var ResponsivePanel = ({ children }) => {
   return (
     // Outer container that takes full size of parent.
     /* @__PURE__ */ React3.createElement("div", {
-      role: "none",
-      className: "relative flex w-full h-full"
+      className: "dx-expander relative flex"
     }, /* @__PURE__ */ React3.createElement("div", {
-      role: "none",
       className: "absolute inset-0 flex justify-center items-center"
     }, /* @__PURE__ */ React3.createElement("div", {
-      role: "none",
       className: mx2("max-h-full max-w-full w-auto h-auto aspect-video")
     }, children)))
   );
@@ -192,15 +187,7 @@ var ResponsiveGrid = ({ classNames, Cell, gap = DEFAULT_GAP, getId: getId2 = def
     }
     const t = setTimeout(() => {
       setBounds(items.filter((item) => !hideGallery || item === pinnedItem).map((item) => {
-        invariant(containerRef.current, void 0, {
-          F: __dxlog_file,
-          L: 117,
-          S: void 0,
-          A: [
-            "containerRef.current",
-            ""
-          ]
-        });
+        invariant(containerRef.current, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 79, S: void 0, A: ["containerRef.current", ""] });
         const el = containerRef.current.querySelector(`[data-grid-item="${getId2(item)}"]`);
         if (!el) {
           return null;
@@ -226,7 +213,7 @@ var ResponsiveGrid = ({ classNames, Cell, gap = DEFAULT_GAP, getId: getId2 = def
   ]);
   return /* @__PURE__ */ React4.createElement("div", {
     ref: containerRef,
-    className: mx3("relative w-full h-full", classNames)
+    className: mx3("dx-expander relative", classNames)
   }, /* @__PURE__ */ React4.createElement("div", {
     className: "absolute inset-0 flex flex-col grow gap-2"
   }, pinnedItem && /* @__PURE__ */ React4.createElement("div", {
@@ -274,7 +261,7 @@ var ResponsiveGrid = ({ classNames, Cell, gap = DEFAULT_GAP, getId: getId2 = def
   }))));
 };
 var SoloItem = ({ debug, id }) => {
-  return /* @__PURE__ */ React4.createElement(ResponsiveContainer, null, /* @__PURE__ */ React4.createElement("div", {
+  return /* @__PURE__ */ React4.createElement(ResponsivePanel, null, /* @__PURE__ */ React4.createElement("div", {
     "data-grid-item": id,
     className: mx3("aspect-video overflow-hidden", debug && "z-20 border-2 border-primary-500")
   }, /* @__PURE__ */ React4.createElement("img", {
@@ -350,17 +337,18 @@ import React5, { useEffect as useEffect4, useState as useState2 } from "react";
 import { Icon, IconButton, useTranslation } from "@dxos/react-ui";
 import { Waveform } from "@dxos/react-ui-sfx";
 import { groupHoverControlItemWithTransition, mx as mx4 } from "@dxos/ui-theme";
+import { meta } from "#meta";
 var ResponsiveGridItem = ({ children, classNames, item, style, name, self, pinned, screenshare, video, mute, wave, speaking, onClick }) => {
   const { t } = useTranslation(meta.id);
   const iconProps = {
     wave: {
       icon: "ph--hand-waving--duotone",
-      label: t("icon wave"),
+      label: t("icon-wave.label"),
       classNames: "animate-pulse bg-orange-500"
     },
     mute: {
       icon: "ph--microphone-slash--regular",
-      label: t("icon muted")
+      label: t("icon-muted.label")
     }
   };
   const props = wave && !pinned ? iconProps.wave : mute ? iconProps.mute : speaking ? iconProps.speaking : void 0;
@@ -378,7 +366,7 @@ var ResponsiveGridItem = ({ children, classNames, item, style, name, self, pinne
     speaking
   ]);
   return /* @__PURE__ */ React5.createElement("div", {
-    className: mx4("relative w-full h-full group", "rounded-md outline outline-2 outline-neutral-900 transition-[outline-color] duration-500", speakingIndicator ? "outline-green-500" : !video && "outline-separator", classNames),
+    className: mx4("dx-expander relative group", "rounded-md outline outline-2 outline-neutral-900 transition-[outline-color] duration-500", speakingIndicator ? "outline-green-500" : !video && "outline-separator", classNames),
     style
   }, children, onClick && /* @__PURE__ */ React5.createElement("div", {
     className: "z-10 absolute top-1 right-1 flex"
@@ -387,7 +375,7 @@ var ResponsiveGridItem = ({ children, classNames, item, style, name, self, pinne
     iconOnly: true,
     icon: pinned ? "ph--x--regular" : "ph--arrows-out--regular",
     size: pinned ? 5 : 4,
-    label: pinned ? t("icon unpin") : t("icon pin"),
+    label: pinned ? t("icon-unpin.label") : t("icon-pin.label"),
     onClick: () => onClick?.(item)
   })), name && /* @__PURE__ */ React5.createElement("div", {
     className: "z-10 absolute bottom-1 left-8 right-1 flex justify-end gap-1 items-center"
@@ -543,11 +531,13 @@ import { Node, useActionRunner } from "@dxos/plugin-graph";
 import { useActions, useNode } from "@dxos/plugin-graph";
 import { Icon as Icon2, IconButton as IconButton2, Toolbar as NaturalToolbar, toLocalizedString, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { groupHoverControlItemWithTransition as groupHoverControlItemWithTransition2, mx as mx5 } from "@dxos/ui-theme";
+import { meta as meta2 } from "#meta";
+import { ThreadCapabilities as ThreadCapabilities2 } from "#types";
 var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJoin, onLeave }) => {
-  const { t } = useTranslation2(meta.id);
+  const { t } = useTranslation2(meta2.id);
   const { graph } = useAppGraph();
   const runAction = useActionRunner();
-  const call = useCapability2(ThreadCapabilities.CallManager);
+  const call = useCapability2(ThreadCapabilities2.CallManager);
   const media = useAtomValue2(call.mediaAtom);
   const joined = useAtomValue2(call.joinedAtom);
   const raisedHand = useAtomValue2(call.raisedHandAtom);
@@ -567,13 +557,13 @@ var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJ
     state: {
       on: {
         icon: "ph--microphone--regular",
-        label: t("mic off"),
+        label: t("mic-off.button"),
         onClick: () => call.turnAudioOff(),
         classNames: "bg-call-active"
       },
       off: {
         icon: "ph--microphone-slash--duotone",
-        label: t("mic on"),
+        label: t("mic-on.button"),
         onClick: () => call.turnAudioOn()
       }
     }
@@ -582,20 +572,19 @@ var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJ
     state: {
       on: {
         icon: "ph--video-camera--regular",
-        label: t("camera off"),
+        label: t("camera-off.button"),
         onClick: () => call.turnVideoOff()
       },
       off: {
         icon: "ph--video-camera-slash--duotone",
-        label: t("camera on"),
+        label: t("camera-on.button"),
         onClick: () => call.turnVideoOn()
       }
     }
   }), participants !== void 0 && /* @__PURE__ */ React8.createElement("div", {
     className: "flex justify-center items-center gap-2 w-[5rem] text-xs text-subdued"
   }, /* @__PURE__ */ React8.createElement(Icon2, {
-    icon: "ph--users--regular",
-    size: 4
+    icon: "ph--users--regular"
   }), /* @__PURE__ */ React8.createElement("div", null, participants)) || /* @__PURE__ */ React8.createElement(NaturalToolbar.Separator, {
     variant: "gap"
   }), joined && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(ToggleButton, {
@@ -604,12 +593,12 @@ var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJ
     state: {
       on: {
         icon: "ph--monitor--regular",
-        label: t("screenshare off"),
+        label: t("screenshare-off.button"),
         onClick: () => call.turnScreenshareOff()
       },
       off: {
         icon: "ph--monitor-arrow-up--duotone",
-        label: t("screenshare on"),
+        label: t("screenshare-on.button"),
         onClick: () => call.turnScreenshareOn()
       }
     }
@@ -627,24 +616,24 @@ var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJ
     state: {
       on: {
         icon: "ph--hand-waving--regular",
-        label: t("lower hand"),
+        label: t("lower-hand.button"),
         onClick: () => call.setRaisedHand(false)
       },
       off: {
         icon: "ph--hand-palm--duotone",
-        label: t("raise hand"),
+        label: t("raise-hand.button"),
         onClick: () => call.setRaisedHand(true)
       }
     }
   })), joined ? /* @__PURE__ */ React8.createElement(IconButton2, {
     variant: "destructive",
     icon: "ph--phone-x--regular",
-    label: t("leave call"),
+    label: t("leave-call.button"),
     onClick: onLeave
   }) : /* @__PURE__ */ React8.createElement(IconButton2, {
     variant: "primary",
     icon: "ph--phone-incoming--regular",
-    label: t("join call"),
+    label: t("join-call.button"),
     onClick: onJoin
   })));
 };
@@ -666,12 +655,12 @@ var ToggleButton = ({ active, state }) => /* @__PURE__ */ React8.createElement(I
 // src/components/Call/Call.tsx
 var CallRoot = ({ children }) => {
   return /* @__PURE__ */ React9.createElement("div", {
-    className: "relative flex flex-col grow overflow-hidden"
+    className: "relative dx-container flex flex-col"
   }, children);
 };
 CallRoot.displayName = "CallRoot";
-var CallAudio = () => {
-  const call = useCapability3(ThreadCapabilities.CallManager);
+var CallAudio = (_props) => {
+  const call = useCapability3(ThreadCapabilities3.CallManager);
   const audioTracksToPlay = useAtomValue3(call.audioTracksToPlayAtom);
   return /* @__PURE__ */ React9.createElement(AudioStream, {
     tracks: audioTracksToPlay
@@ -680,7 +669,7 @@ var CallAudio = () => {
 CallAudio.displayName = "CallAudio";
 var CallGrid = ({ fullscreen }) => {
   const debug = useDebugMode();
-  const call = useCapability3(ThreadCapabilities.CallManager);
+  const call = useCapability3(ThreadCapabilities3.CallManager);
   const self = useAtomValue3(call.selfAtom);
   const users = useAtomValue3(call.usersAtom);
   return /* @__PURE__ */ React9.createElement("div", {
@@ -709,57 +698,20 @@ var Call = {
   Toolbar: CallToolbar
 };
 
-// src/components/CommentsContainer.tsx
-import React12, { useEffect as useEffect7 } from "react";
-import { Obj as Obj3, Relation as Relation2 } from "@dxos/echo";
-import { Icon as Icon3, Message, Trans, useTranslation as useTranslation5 } from "@dxos/react-ui";
-
-// src/components/CommentsThreadContainer.tsx
-import React11, { useCallback as useCallback3, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
-import { Obj as Obj2, Relation } from "@dxos/echo";
-import { useObject as useObject2 } from "@dxos/echo-react";
-import { getSpace, useMembers } from "@dxos/react-client/echo";
-import { useIdentity as useIdentity2 } from "@dxos/react-client/halo";
-import { IconButton as IconButton4, Tag, Tooltip, useThemeContext as useThemeContext2, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { MessageTextbox, Thread as ThreadComponent } from "@dxos/react-ui-thread";
+// src/components/Chat/Chat.tsx
+import React11, { useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
+import { ScrollArea, useThemeContext as useThemeContext2, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { MessageTextbox, Thread as ThreadComponent, threadLayout } from "@dxos/react-ui-thread";
 import { createBasicExtensions as createBasicExtensions2, createThemeExtensions as createThemeExtensions2, listener } from "@dxos/ui-editor";
-import { hoverableControlItem as hoverableControlItem2, hoverableControls as hoverableControls2, hoverableFocusedWithinControls as hoverableFocusedWithinControls2, mx as mx8 } from "@dxos/ui-theme";
+import { composable, composableProps, mx as mx7 } from "@dxos/ui-theme";
+import { isNonNullable } from "@dxos/util";
+import { meta as meta4 } from "#meta";
 
-// src/components/command-extension.ts
-import { HighlightStyle, StreamLanguage, syntaxHighlighting } from "@codemirror/language";
-import { tags } from "@dxos/ui-editor";
-import { mx as mx6 } 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";
-    }
-    stream.next();
-    return null;
-  }
-});
-var styles = HighlightStyle.define([
-  {
-    tag: tags.tagName,
-    class: mx6("dx-tag dx-tag--indigo text-base-surface-text font-medium")
-  }
-]);
-var command = [
-  parser,
-  syntaxHighlighting(styles)
-];
-
-// src/components/MessageContainer.tsx
+// src/components/MessagePanel/MessagePanel.tsx
 import { EditorView } from "@codemirror/view";
 import React10, { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect6, useRef as useRef3, useState as useState4 } from "react";
 import { Surface } from "@dxos/app-framework/ui";
+import { AppSurface } from "@dxos/app-toolkit/ui";
 import { Ref } from "@dxos/echo";
 import { useObject } from "@dxos/echo-react";
 import { PublicKey } from "@dxos/react-client";
@@ -769,11 +721,13 @@ import { Card } from "@dxos/react-ui";
 import { useTextEditor } from "@dxos/react-ui-editor";
 import { MessageHeading, MessageRoot } from "@dxos/react-ui-thread";
 import { createBasicExtensions, createThemeExtensions } from "@dxos/ui-editor";
-import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx as mx7 } from "@dxos/ui-theme";
+import { hoverableControlItem, hoverableControls, hoverableFocusedWithinControls, mx as mx6 } from "@dxos/ui-theme";
+import { useOnEditAnalytics } from "#hooks";
+import { meta as meta3 } from "#meta";
 var buttonGroupClassNames = "flex flex-row items-center gap-0.5 pe-2";
 var buttonClassNames = "p-1! transition-opacity";
-var MessageContainer = ({ message: messageOrRef, members, editable = false, onDelete, onAcceptProposal }) => {
-  const { t } = useTranslation3(meta.id);
+var MessagePanel = ({ message: messageOrRef, members, editable = false, onDelete, onAcceptProposal }) => {
+  const { t } = useTranslation3(meta3.id);
   const [message, updateMessage] = useObject(messageOrRef);
   const identity = useIdentity();
   const [editing, setEditing] = useState4(false);
@@ -804,7 +758,7 @@ var MessageContainer = ({ message: messageOrRef, members, editable = false, onDe
     return null;
   }
   const senderIdentity = members.find((member) => message.sender.identityDid && member.identity.did === message.sender.identityDid || message.sender.identityKey && PublicKey.equals(member.identity.identityKey, message.sender.identityKey))?.identity;
-  const messageMetadata = getMessageMetadata(message.id, senderIdentity);
+  const messageMetadata = getMessageMetadata(message.id, senderIdentity, message.sender);
   const userIsAuthor = identity?.did === messageMetadata.authorId;
   const proposalBlock = message.blocks.find((block) => block._tag === "proposal");
   const references = message.blocks.filter((block) => block._tag === "reference").map((block) => block.reference);
@@ -818,14 +772,13 @@ var MessageContainer = ({ message: messageOrRef, members, editable = false, onDe
     authorName: messageMetadata.authorName,
     timestamp: messageMetadata.timestamp
   }, /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
     className: buttonGroupClassNames
   }, userIsAuthor && editable && /* @__PURE__ */ React10.createElement(IconButton3, {
     "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"),
+    label: t(editing ? "save-message.label" : "edit-message.label"),
     classNames: [
       buttonClassNames,
       hoverableControlItem
@@ -836,7 +789,7 @@ var MessageContainer = ({ message: messageOrRef, members, editable = false, onDe
     variant: "ghost",
     icon: "ph--check--regular",
     iconOnly: true,
-    label: t("accept proposal label"),
+    label: t("accept-proposal.label"),
     classNames: [
       buttonClassNames,
       hoverableControlItem
@@ -847,7 +800,7 @@ var MessageContainer = ({ message: messageOrRef, members, editable = false, onDe
     variant: "ghost",
     icon: "ph--x--regular",
     iconOnly: true,
-    label: t("delete message label"),
+    label: t("delete-message.label"),
     classNames: [
       buttonClassNames,
       hoverableControlItem
@@ -912,7 +865,6 @@ var TextboxBlock = ({ block, isAuthor, editing, onSave }) => {
     view
   ]);
   return /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
     ref: parentRef,
     className: "me-4",
     ...focusAttributes
@@ -920,7 +872,6 @@ var TextboxBlock = ({ block, isAuthor, editing, onSave }) => {
 };
 var ProposalBlock = ({ block }) => {
   return /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
     className: "me-4 italic"
   }, block.text);
 };
@@ -930,10 +881,10 @@ var MessageBlockObjectTile = /* @__PURE__ */ forwardRef2(({ subject }, forwarded
     title = title?.content ?? "";
   }
   return /* @__PURE__ */ React10.createElement(Card.Root, {
-    className: mx7("grid col-span-3 py-1 pr-4", hoverableControls, hoverableFocusedWithinControls),
+    className: mx6("grid col-span-3 py-1 pr-4", hoverableControls, hoverableFocusedWithinControls),
     ref: forwardedRef
   }, /* @__PURE__ */ React10.createElement(Surface.Surface, {
-    role: "card--content",
+    type: AppSurface.Card,
     limit: 1,
     data: {
       subject
@@ -942,10 +893,162 @@ var MessageBlockObjectTile = /* @__PURE__ */ forwardRef2(({ subject }, forwarded
   }));
 });
 
-// src/components/CommentsThreadContainer.tsx
-var CommentsThreadContainer = ({ anchor, current, onAttend, onComment, onResolve, onMessageDelete, onThreadDelete, onAcceptProposal }) => {
+// src/components/Chat/Chat.tsx
+var Chat = composable(({ id, identity, members, messages, activity, onSend, autoFocusTextbox, current, orientation = "top", readOnly, ...props }, forwardedRef) => {
+  const { t } = useTranslation4(meta4.id);
   const { themeMode } = useThemeContext2();
-  const { t } = useTranslation4(meta.id);
+  const scrollRef = useRef4(null);
+  const sentinelRef = useRef4(null);
+  const [autoFocus, setAutoFocus] = useState5(autoFocusTextbox);
+  const [_count, _setCount] = useState5(0);
+  const textboxMetadata = getMessageMetadata(id, identity);
+  const messageRef = useRef4("");
+  const extensions = useMemo4(() => [
+    createBasicExtensions2({
+      placeholder: t("message.placeholder")
+    }),
+    createThemeExtensions2({
+      themeMode
+    }),
+    listener({
+      onChange: ({ text }) => messageRef.current = text
+    }),
+    command
+  ], [
+    themeMode,
+    _count
+  ]);
+  const scrollToEnd = (behavior) => setTimeout(() => sentinelRef.current?.scrollIntoView({
+    behavior,
+    block: "end"
+  }), 10);
+  useLayoutEffect2(() => {
+    scrollToEnd("instant");
+  }, []);
+  const handleSend = () => {
+    const text = messageRef.current;
+    if (!text?.length) {
+      return false;
+    }
+    const accepted = onSend(text);
+    if (!accepted) {
+      return false;
+    }
+    messageRef.current = "";
+    setAutoFocus(true);
+    scrollToEnd("smooth");
+    _setCount((count) => count + 1);
+    return true;
+  };
+  const filteredMessages = messages.filter(isNonNullable);
+  const renderState = {
+    messages: filteredMessages,
+    members,
+    activity,
+    extensions,
+    autoFocus,
+    handleSend,
+    textboxMetadata,
+    scrollRef,
+    sentinelRef,
+    readOnly
+  };
+  return orientation === "bottom" ? /* @__PURE__ */ React11.createElement(ChannelLayout, {
+    ...composableProps(props, {
+      classNames: "flex flex-col bs-full min-h-0"
+    }),
+    id,
+    ref: forwardedRef,
+    state: renderState
+  }) : /* @__PURE__ */ React11.createElement(ThreadLayout, {
+    ...composableProps(props, {
+      classNames: "dx-container grid-rows-[1fr_min-content_min-content]"
+    }),
+    id,
+    current,
+    ref: forwardedRef,
+    state: renderState
+  });
+});
+var ThreadLayout = /* @__PURE__ */ React11.forwardRef(({ id, current, state, ...props }, ref) => {
+  const { t } = useTranslation4(meta4.id);
+  const { messages, members, activity, extensions, autoFocus, handleSend, textboxMetadata, sentinelRef, readOnly } = state;
+  return /* @__PURE__ */ React11.createElement(ThreadComponent.Root, {
+    ...props,
+    id,
+    current,
+    ref
+  }, /* @__PURE__ */ React11.createElement(ScrollArea.Root, {
+    classNames: "col-span-2",
+    orientation: "vertical"
+  }, /* @__PURE__ */ React11.createElement(ScrollArea.Viewport, {
+    ref: sentinelRef
+  }, /* @__PURE__ */ React11.createElement("div", {
+    className: mx7(threadLayout, "place-self-end")
+  }, messages.map((message) => /* @__PURE__ */ React11.createElement(MessagePanel, {
+    key: message.id,
+    message,
+    members
+  }))))), !readOnly && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(MessageTextbox, {
+    extensions,
+    autoFocus,
+    onSend: handleSend,
+    ...textboxMetadata
+  }), /* @__PURE__ */ React11.createElement(ThreadComponent.Status, {
+    activity
+  }, t("activity.message"))));
+});
+var ChannelLayout = /* @__PURE__ */ React11.forwardRef(({ id, state, ...props }, ref) => {
+  const { t } = useTranslation4(meta4.id);
+  const { messages, members, activity, extensions, autoFocus, handleSend, textboxMetadata, scrollRef, sentinelRef, readOnly } = state;
+  return /* @__PURE__ */ React11.createElement("div", {
+    ...props,
+    id,
+    ref
+  }, /* @__PURE__ */ React11.createElement("div", {
+    ref: scrollRef,
+    className: "flex-1 min-h-0 overflow-y-auto"
+  }, messages.map((message) => /* @__PURE__ */ React11.createElement("div", {
+    key: message.id,
+    className: "grid grid-cols-[var(--dx-rail-size)_1fr] w-full"
+  }, /* @__PURE__ */ React11.createElement(MessagePanel, {
+    message,
+    members
+  }))), /* @__PURE__ */ React11.createElement("div", {
+    ref: sentinelRef
+  })), !readOnly && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("div", {
+    className: "shrink-0 grid grid-cols-[var(--dx-rail-size)_1fr]"
+  }, /* @__PURE__ */ React11.createElement(MessageTextbox, {
+    extensions,
+    autoFocus,
+    onSend: handleSend,
+    ...textboxMetadata
+  })), /* @__PURE__ */ React11.createElement("div", {
+    className: "shrink-0 px-2 pb-1 text-xs text-description"
+  }, activity ? t("activity.message") : null)));
+});
+
+// src/components/CommentsPanel/CommentsPanel.tsx
+import React13, { useEffect as useEffect7 } from "react";
+import { Obj as Obj3, Relation as Relation2 } from "@dxos/echo";
+import { Icon as Icon3, Message, Trans, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { meta as meta6 } from "#meta";
+
+// src/components/CommentsPanel/CommentsThread.tsx
+import React12, { useCallback as useCallback3, useMemo as useMemo5, useRef as useRef5, useState as useState6 } from "react";
+import { Obj as Obj2, Relation } from "@dxos/echo";
+import { useObject as useObject2 } from "@dxos/echo-react";
+import { getSpace, useMembers } from "@dxos/react-client/echo";
+import { useIdentity as useIdentity2 } from "@dxos/react-client/halo";
+import { IconButton as IconButton4, Tag, Tooltip, useThemeContext as useThemeContext3, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { MessageTextbox as MessageTextbox2, Thread as ThreadComponent2 } from "@dxos/react-ui-thread";
+import { createBasicExtensions as createBasicExtensions3, createThemeExtensions as createThemeExtensions3, listener as listener2 } from "@dxos/ui-editor";
+import { hoverableControlItem as hoverableControlItem2, hoverableControls as hoverableControls2, hoverableFocusedWithinControls as hoverableFocusedWithinControls2, mx as mx8 } from "@dxos/ui-theme";
+import { useStatus } from "#hooks";
+import { meta as meta5 } from "#meta";
+var CommentsThread = ({ anchor, current, onAttend, onComment, onResolve, onMessageDelete, onThreadDelete, onAcceptProposal }) => {
+  const { themeMode } = useThemeContext3();
+  const { t } = useTranslation5(meta5.id);
   const identity = useIdentity2();
   const space = getSpace(anchor);
   const members = useMembers(space?.id);
@@ -953,18 +1056,18 @@ var CommentsThreadContainer = ({ anchor, current, onAttend, onComment, onResolve
   const thread = Relation.getSource(anchor);
   const [messages] = useObject2(thread, "messages");
   const activity = useStatus(space, Obj2.getDXN(thread).toString());
-  const threadScrollRef = useRef4(null);
+  const threadScrollRef = useRef5(null);
   const textboxMetadata = getMessageMetadata(Obj2.getDXN(thread).toString(), identity);
-  const [state, setState] = useState5({});
-  const messageRef = useRef4("");
-  const extensions = useMemo4(() => [
-    createBasicExtensions2({
-      placeholder: t("message placeholder")
+  const [state, setState] = useState6({});
+  const messageRef = useRef5("");
+  const extensions = useMemo5(() => [
+    createBasicExtensions3({
+      placeholder: t("message.placeholder")
     }),
-    createThemeExtensions2({
+    createThemeExtensions3({
       themeMode
     }),
-    listener({
+    listener2({
       onChange: ({ text }) => messageRef.current = text
     }),
     command
@@ -1008,71 +1111,68 @@ var CommentsThreadContainer = ({ anchor, current, onAttend, onComment, onResolve
     anchor,
     identity
   ]);
-  return /* @__PURE__ */ React11.createElement(ThreadComponent.Root, {
+  return /* @__PURE__ */ React12.createElement(ThreadComponent2.Root, {
     id: Obj2.getDXN(thread).toString(),
     classNames: "pt-2 border-b border-subdued-separator last:border-none",
     current,
     onClickCapture: handleAttend,
     onFocusCapture: handleAttend
-  }, /* @__PURE__ */ React11.createElement("div", {
-    role: "none",
+  }, /* @__PURE__ */ React12.createElement("div", {
     className: mx8("col-span-2 grid grid-cols-[var(--dx-rail-size)_1fr_min-content]", hoverableControls2, hoverableFocusedWithinControls2)
-  }, detached ? /* @__PURE__ */ React11.createElement(Tooltip.Trigger, {
+  }, detached ? /* @__PURE__ */ React12.createElement(Tooltip.Trigger, {
     asChild: true,
-    content: t("detached thread label"),
+    content: t("detached-thread.label"),
     side: "top"
-  }, /* @__PURE__ */ React11.createElement(ThreadComponent.Header, {
+  }, /* @__PURE__ */ React12.createElement(ThreadComponent2.Header, {
     detached: true
-  }, thread.name)) : /* @__PURE__ */ React11.createElement(ThreadComponent.Header, null, thread.name), /* @__PURE__ */ React11.createElement("div", {
-    role: "none",
+  }, thread.name)) : /* @__PURE__ */ React12.createElement(ThreadComponent2.Header, null, thread.name), /* @__PURE__ */ React12.createElement("div", {
     className: buttonGroupClassNames
-  }, thread.status === "staged" && /* @__PURE__ */ React11.createElement(Tag, {
+  }, thread.status === "staged" && /* @__PURE__ */ React12.createElement(Tag, {
     palette: "neutral"
-  }, t("draft button")), onResolve && !(thread?.status === "staged") && /* @__PURE__ */ React11.createElement(IconButton4, {
+  }, t("draft.button")), onResolve && !(thread?.status === "staged") && /* @__PURE__ */ React12.createElement(IconButton4, {
     "data-testid": "thread.resolve",
     variant: "ghost",
     icon: thread?.status === "resolved" ? "ph--check--fill" : "ph--check--regular",
     iconOnly: true,
-    label: t("resolve thread label"),
+    label: t("resolve-thread.label"),
     classNames: [
       buttonClassNames,
       thread?.status !== "resolved" && hoverableControlItem2
     ],
     onClick: handleResolve
-  }), onThreadDelete && /* @__PURE__ */ React11.createElement(IconButton4, {
+  }), onThreadDelete && /* @__PURE__ */ React12.createElement(IconButton4, {
     "data-testid": "thread.delete",
     variant: "ghost",
     icon: "ph--x--regular",
     iconOnly: true,
-    label: t("delete thread label"),
+    label: t("delete-thread.label"),
     classNames: [
       buttonClassNames,
       hoverableControlItem2
     ],
     onClick: handleThreadDelete
-  }))), messages?.map((ref) => /* @__PURE__ */ React11.createElement(MessageContainer, {
+  }))), messages?.map((ref) => /* @__PURE__ */ React12.createElement(MessagePanel, {
     key: ref.dxn.toString(),
     editable: true,
     message: ref,
     members,
     onDelete: handleMessageDelete,
     onAcceptProposal: handleAcceptProposal
-  })), /* @__PURE__ */ React11.createElement(MessageTextbox, {
+  })), /* @__PURE__ */ React12.createElement(MessageTextbox2, {
     extensions,
     onSend: handleComment,
     ...textboxMetadata
-  }), /* @__PURE__ */ React11.createElement(ThreadComponent.Status, {
+  }), /* @__PURE__ */ React12.createElement(ThreadComponent2.Status, {
     activity
-  }, t("activity message")), /* @__PURE__ */ React11.createElement("div", {
-    role: "none",
+  }, t("activity.message")), /* @__PURE__ */ React12.createElement("div", {
     className: "h-px -mt-px",
     ref: threadScrollRef
   }));
 };
 
-// src/components/CommentsContainer.tsx
-var CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props }) => {
-  const { t } = useTranslation5(meta.id);
+// src/components/CommentsPanel/CommentsPanel.tsx
+var CommentsPanel = ({ anchors, currentId, showResolvedThreads, ...props }) => {
+  const { t } = useTranslation6(meta6.id);
   const filteredAnchors = showResolvedThreads ? anchors.filter((anchor) => !!Relation2.getSource(anchor)) : anchors.filter((anchor) => {
     const thread = Relation2.getSource(anchor);
     return thread && thread.status !== "resolved";
@@ -1088,25 +1188,24 @@ var CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props })
     currentId
   ]);
   if (filteredAnchors.length === 0) {
-    return /* @__PURE__ */ React12.createElement("div", {
-      role: "none",
+    return /* @__PURE__ */ React13.createElement("div", {
       className: "p-form-padding"
-    }, /* @__PURE__ */ React12.createElement(Message.Root, null, /* @__PURE__ */ React12.createElement(Message.Title, null, /* @__PURE__ */ React12.createElement(Trans, {
+    }, /* @__PURE__ */ React13.createElement(Message.Root, null, /* @__PURE__ */ React13.createElement(Message.Content, null, /* @__PURE__ */ React13.createElement(Trans, {
       t,
-      i18nKey: "no comments message",
+      i18nKey: "no-comments.message",
       components: {
-        commentIcon: /* @__PURE__ */ React12.createElement(Icon3, {
+        commentIcon: /* @__PURE__ */ React13.createElement(Icon3, {
           icon: "ph--chat-text--regular",
           size: 4,
-          classNames: "w-block"
+          classNames: "dx-icon-inline"
         })
       }
     }))));
   }
-  return /* @__PURE__ */ React12.createElement("div", null, filteredAnchors.map((anchor) => {
+  return /* @__PURE__ */ React13.createElement("div", null, filteredAnchors.map((anchor) => {
     const thread = Relation2.getSource(anchor);
     const threadId = Obj3.getDXN(thread).toString();
-    return /* @__PURE__ */ React12.createElement(CommentsThreadContainer, {
+    return /* @__PURE__ */ React13.createElement(CommentsThread, {
       key: threadId,
       anchor,
       current: currentId === threadId,
@@ -1115,10 +1214,17 @@ var CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props })
   }));
 };
 
+// src/components/index.ts
+var ThreadSettings = lazy(() => import("../ThreadSettings-5Z5XIHG3.mjs"));
 export {
   Call,
-  command,
-  MessageContainer,
-  CommentsContainer
+  Chat,
+  CommentsPanel,
+  CommentsThread,
+  MessagePanel,
+  ThreadSettings,
+  Toolbar,
+  buttonClassNames,
+  buttonGroupClassNames
 };
-//# sourceMappingURL=chunk-IQUV7DR6.mjs.map
+//# sourceMappingURL=index.mjs.map