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

package/dist/lib/browser/{chunk-4EUEMHNI.mjs → chunk-G6FJBSXX.mjs}

@@ -2,15 +2,16 @@ import {
   useDebugMode,
   useOnEditAnalytics,
   useStatus
-} from "./chunk-JBB73URQ.mjs";
+} from "./chunk-HDLDMR54.mjs";
 import {
   getMessageMetadata
 } from "./chunk-CP7E2HRE.mjs";
 import {
-  ThreadCapabilities,
-  ThreadOperation,
+  ThreadCapabilities
+} from "./chunk-U32R23JO.mjs";
+import {
   meta
-} from "./chunk-2FIHSX35.mjs";
+} from "./chunk-LUK4UNFA.mjs";
 
 // src/components/Call/Call.tsx
 import { useAtomValue as useAtomValue3 } from "@effect-atom/atom-react";
@@ -84,7 +85,7 @@ var VideoObject = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ videoStream
     internalRef.current
   ]);
   return /* @__PURE__ */ React2.createElement("video", {
-    className: mx("is-full aspect-video", flip && "scale-x-[-1]", contain ? "object-contain" : "object-cover", classNames),
+    className: mx("w-full aspect-video", flip && "scale-x-[-1]", contain ? "object-contain" : "object-cover", classNames),
     ref: (v) => {
       internalRef.current = v;
       if (ref === null) {
@@ -114,13 +115,13 @@ var ResponsiveContainer = ({ children }) => {
     // Outer container that takes full size of parent.
     /* @__PURE__ */ React3.createElement("div", {
       role: "none",
-      className: "relative flex is-full bs-full"
+      className: "relative flex w-full h-full"
     }, /* @__PURE__ */ React3.createElement("div", {
       role: "none",
       className: "absolute inset-0 flex justify-center items-center"
     }, /* @__PURE__ */ React3.createElement("div", {
       role: "none",
-      className: mx2("max-bs-full max-is-full is-auto bs-auto aspect-video")
+      className: mx2("max-h-full max-w-full w-auto h-auto aspect-video")
     }, children)))
   );
 };
@@ -134,7 +135,7 @@ var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-thread/src/components
 var ASPECT_RATIO = 16 / 9;
 var MIN_GALLERY_HEIGHT = 250;
 var DEFAULT_GAP = 8;
-var maxImageSize = "is-[2560px] bs-[1440px]";
+var maxImageSize = "w-[2560px] h-[1440px]";
 var defaultGetId = (item) => item.id;
 var ResponsiveGrid = ({ classNames, Cell, gap = DEFAULT_GAP, getId: getId2 = defaultGetId, items, pinned, autoHideGallery = false, debug, onPinnedChange }) => {
   const { width: containerWidth = 0, height: containerHeight = 0, ref: containerRef } = useResizeDetector({
@@ -224,11 +225,11 @@ var ResponsiveGrid = ({ classNames, Cell, gap = DEFAULT_GAP, getId: getId2 = def
   ]);
   return /* @__PURE__ */ React4.createElement("div", {
     ref: containerRef,
-    className: mx3("relative is-full bs-full", classNames)
+    className: mx3("relative w-full h-full", classNames)
   }, /* @__PURE__ */ React4.createElement("div", {
     className: "absolute inset-0 flex flex-col grow gap-2"
   }, pinnedItem && /* @__PURE__ */ React4.createElement("div", {
-    className: mx3("flex grow-[2] shrink overflow-hidden justify-center items-center", hideGallery && "bs-full"),
+    className: mx3("flex grow-[2] shrink overflow-hidden justify-center items-center", hideGallery && "h-full"),
     style: hideGallery ? {} : {
       height: dividerHeight
     }
@@ -245,7 +246,7 @@ var ResponsiveGrid = ({ classNames, Cell, gap = DEFAULT_GAP, getId: getId2 = def
     style: {
       width: cellWidth
     },
-    className: "flex bs-full"
+    className: "flex h-full"
   }, /* @__PURE__ */ React4.createElement(SoloItem, {
     id: getId2(mainItems[0]),
     debug
@@ -259,7 +260,7 @@ var ResponsiveGrid = ({ classNames, Cell, gap = DEFAULT_GAP, getId: getId2 = def
   }, mainItems.map((item) => /* @__PURE__ */ React4.createElement("div", {
     key: getId2(item),
     "data-grid-item": getId2(item),
-    className: mx3("aspect-video max-bs-full max-is-full is-auto bs-auto", debug && "border border-primary-500")
+    className: mx3("aspect-video max-h-full max-w-full w-auto h-auto", debug && "border border-primary-500")
   }))))), /* @__PURE__ */ React4.createElement("div", {
     className: mx3(debug && "opacity-10")
   }, bounds.map(([item, bounds2]) => /* @__PURE__ */ React4.createElement(Cell, {
@@ -376,12 +377,12 @@ var ResponsiveGridItem = ({ children, classNames, item, style, name, self, pinne
     speaking
   ]);
   return /* @__PURE__ */ React5.createElement("div", {
-    className: mx4("relative is-full bs-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("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),
     style
   }, children, onClick && /* @__PURE__ */ React5.createElement("div", {
     className: "z-10 absolute top-1 right-1 flex"
   }, /* @__PURE__ */ React5.createElement(IconButton, {
-    classNames: mx4("p-1 min-bs-1 rounded", groupHoverControlItemWithTransition),
+    classNames: mx4("p-1 min-h-1 rounded-sm", groupHoverControlItemWithTransition),
     iconOnly: true,
     icon: pinned ? "ph--x--regular" : "ph--arrows-out--regular",
     size: pinned ? 5 : 4,
@@ -393,14 +394,14 @@ var ResponsiveGridItem = ({ children, classNames, item, style, name, self, pinne
     icon: "ph--broadcast--regular",
     size: pinned ? 5 : 4
   }), /* @__PURE__ */ React5.createElement("div", {
-    className: mx4("bg-neutral-800 text-neutral-100 plb-0.5 truncate rounded", pinned ? "pli-2" : "pli-1 text-xs")
+    className: mx4("bg-neutral-800 text-neutral-100 py-0.5 truncate rounded-sm", pinned ? "px-2" : "px-1 text-xs")
   }, name)), /* @__PURE__ */ React5.createElement("div", {
     className: "z-10 absolute bottom-1 left-1 flex"
   }, speaking && /* @__PURE__ */ React5.createElement(Waveform, {
     active: true,
     size: pinned ? 5 : 4
   }) || props && /* @__PURE__ */ React5.createElement(IconButton, {
-    classNames: mx4("p-1 min-bs-1 rounded", props?.classNames),
+    classNames: mx4("p-1 min-h-1 rounded-sm", props?.classNames),
     icon: props?.icon,
     label: props?.label,
     size: pinned ? 5 : 4,
@@ -557,7 +558,7 @@ var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJ
     className: mx5("z-20 flex justify-center m-8", autoHideControls && groupHoverControlItemWithTransition2)
   }, /* @__PURE__ */ React8.createElement(NaturalToolbar.Root, {
     classNames: [
-      "p-2 bg-modalSurface rounded-md shadow-md",
+      "p-2 bg-modal-surface rounded-md shadow-md",
       classNames
     ]
   }, /* @__PURE__ */ React8.createElement(ToggleButton, {
@@ -567,15 +568,12 @@ var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJ
         icon: "ph--microphone--regular",
         label: t("mic off"),
         onClick: () => call.turnAudioOff(),
-        classNames: "bg-callActive"
+        classNames: "bg-call-active"
       },
       off: {
         icon: "ph--microphone-slash--duotone",
         label: t("mic on"),
-        onClick: () => call.turnAudioOn(),
-        classNames: [
-          joined && "bg-callAlert"
-        ]
+        onClick: () => call.turnAudioOn()
       }
     }
   }), /* @__PURE__ */ React8.createElement(ToggleButton, {
@@ -593,7 +591,7 @@ var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJ
       }
     }
   }), participants !== void 0 && /* @__PURE__ */ React8.createElement("div", {
-    className: "flex justify-center items-center gap-2 is-[5rem] text-xs text-subdued"
+    className: "flex justify-center items-center gap-2 w-[5rem] text-xs text-subdued"
   }, /* @__PURE__ */ React8.createElement(Icon2, {
     icon: "ph--users--regular",
     size: 4
@@ -629,10 +627,7 @@ var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJ
       on: {
         icon: "ph--hand-waving--regular",
         label: t("lower hand"),
-        onClick: () => call.setRaisedHand(false),
-        classNames: [
-          joined && "bg-callAlert"
-        ]
+        onClick: () => call.setRaisedHand(false)
       },
       off: {
         icon: "ph--hand-palm--duotone",
@@ -660,7 +655,7 @@ var defaultButtonProps = {
 var ToggleButton = ({ active, state }) => /* @__PURE__ */ React8.createElement(IconButton2, {
   ...defaultButtonProps,
   classNames: [
-    active ? state.on.classNames ?? "bg-callActive" : state.off.classNames
+    active ? state.on.classNames ?? "bg-call-active" : state.off.classNames
   ],
   icon: active ? state.on.icon : state.off.icon,
   label: active ? state.on.label : state.off.label,
@@ -713,189 +708,21 @@ var Call = {
   Toolbar: CallToolbar
 };
 
-// src/components/CallDebugPanel.tsx
-import { WebRTCStats } from "@peermetrics/webrtc-stats";
-import React10, { useEffect as useEffect6, useMemo as useMemo4, useState as useState4 } from "react";
-import { truncateKey } from "@dxos/debug";
-import { JsonView, Panel } from "@dxos/devtools";
-import { log } from "@dxos/log";
-import { IconButton as IconButton3, Input, useTranslation as useTranslation3 } from "@dxos/react-ui";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-thread/src/components/CallDebugPanel.tsx";
-var CallDebugPanel = ({ state }) => {
-  const { t } = useTranslation3(meta.id);
-  const [open, setOpen] = useState4(false);
-  const handleToggle = () => setOpen(!open);
-  const [showServiceHistory, setShowServiceHistory] = useState4(false);
-  const handleToggleServiceHistory = () => setShowServiceHistory(!showServiceHistory);
-  const handleCopyRaw = async () => {
-    await navigator.clipboard.writeText(JSON.stringify({
-      users: state?.call?.users,
-      stats
-    }, null, 2));
-  };
-  const [showDetailedWebRTCStats, setShowDetailedWebRTCStats] = useState4(false);
-  const handleShowDetailedWebRTCStats = () => setShowDetailedWebRTCStats(!showDetailedWebRTCStats);
-  const webrtcStats = useMemo4(() => new WebRTCStats({
-    getStatsInterval: 1e3
-  }), []);
-  const [stats, setStats] = useState4();
-  useEffect6(() => {
-    const pc = state?.media.peer?.session?.peerConnection;
-    const handleStats = (stats2) => {
-      setStats(stats2.data);
-    };
-    let added = false;
-    if (pc && showDetailedWebRTCStats) {
-      webrtcStats.addConnection({
-        pc,
-        peerId: 1,
-        connectionId: "1"
-      });
-      webrtcStats.on("stats", handleStats);
-      added = true;
-    }
-    return () => {
-      try {
-        if (pc && added) {
-          webrtcStats.removeConnection({
-            pc
-          });
-          webrtcStats.removeListener("stats", handleStats);
-        }
-      } catch (error) {
-        log.error("error removing webrtc stats", {
-          error,
-          pc,
-          peerId: 1,
-          connectionId: "1"
-        }, {
-          F: __dxlog_file2,
-          L: 60,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-      }
-    };
-  }, [
-    state?.media.peer?.session?.peerConnection,
-    showDetailedWebRTCStats
-  ]);
-  const rows = useMemo4(() => getCallStatusTable(state), [
-    state?.call.users,
-    state?.media.pulledAudioTracks
-  ]);
-  return /* @__PURE__ */ React10.createElement(Panel, {
-    id: "meeting-status",
-    icon: "ph--video-conference--regular",
-    open,
-    onToggle: handleToggle,
-    title: t("meeting status title"),
-    info: /* @__PURE__ */ React10.createElement("div", {
-      className: "flex items-center gap-2"
-    }, " ", state?.call.joined ? "Active" : "Inactive"),
-    maxHeight: 0
-  }, /* @__PURE__ */ React10.createElement("div", {
-    className: "flex flex-col is-full text-xs"
-  }, /* @__PURE__ */ React10.createElement("div", {
-    className: "flex items-center gap-2 items-center"
-  }, /* @__PURE__ */ React10.createElement(Input.Root, null, /* @__PURE__ */ React10.createElement(Input.Switch, {
-    checked: showDetailedWebRTCStats,
-    onCheckedChange: handleShowDetailedWebRTCStats
-  }), /* @__PURE__ */ React10.createElement(Input.Label, null, t("show webrtc stats title")))), /* @__PURE__ */ React10.createElement("div", {
-    className: "flex items-center gap-2 items-center"
-  }, /* @__PURE__ */ React10.createElement(Input.Root, null, /* @__PURE__ */ React10.createElement(Input.Switch, {
-    checked: showServiceHistory,
-    onCheckedChange: handleToggleServiceHistory
-  }), /* @__PURE__ */ React10.createElement(Input.Label, null, t("show calls history title")))), /* @__PURE__ */ React10.createElement("div", {
-    className: "flex items-center gap-2 items-center"
-  }, /* @__PURE__ */ React10.createElement(IconButton3, {
-    icon: "ph--copy--regular",
-    label: "copy raw",
-    onClick: handleCopyRaw
-  })), /* @__PURE__ */ React10.createElement(Table, {
-    rows
-  }), showDetailedWebRTCStats && /* @__PURE__ */ React10.createElement(JsonView, {
-    data: {
-      stats
-    }
-  }), showServiceHistory && /* @__PURE__ */ React10.createElement(JsonView, {
-    data: {
-      history: state?.media.peer?.history.get()
-    }
-  })));
-};
-var getCallStatusTable = (state) => {
-  if (!state || !state.call?.users) {
-    return [];
-  }
-  const self = state.call.self;
-  const users = state.call.users.filter((user) => user.id !== self.id).map((user) => {
-    const isOk = {
-      audio: user.tracks?.audio && state.media.pulledAudioTracks[user.tracks?.audio]?.ctx.disposed === false,
-      video: user.tracks?.video && state.media.pulledVideoStreams[user.tracks?.video]?.ctx.disposed === false,
-      screenshare: user.tracks?.screenshare && state.media.pulledVideoStreams[user.tracks?.screenshare]?.ctx.disposed === false
-    };
-    return {
-      ...user,
-      isOk
-    };
-  });
-  return [
-    [
-      "users",
-      state.call.users.length ?? 0
-    ],
-    [
-      "*self* " + (self?.name ?? truncateKey(self.id, 8)),
-      self?.tracks?.audio && state.media.pushedAudioTrack ? "AUD \u2705" : "AUD \u274C",
-      self?.tracks?.video && state.media.pushedVideoTrack ? "VID \u2705" : "VID \u274C",
-      self?.tracks?.screenshareEnabled ? self.tracks.screenshareEnabled && state.media.pushedScreenshareTrack ? "SCR \u2705" : "SCR \u274C" : void 0
-    ],
-    ...users.map((user) => [
-      user.name ?? truncateKey(user.id, 8),
-      user.isOk.audio ? "AUD \u2705" : "AUD \u274C",
-      user.isOk.video ? "VID \u2705" : "VID \u274C",
-      user.tracks?.screenshareEnabled ? user.isOk.screenshare ? "SCR \u2705" : "SCR \u274C" : void 0
-    ]),
-    [
-      "ICE",
-      state.media.peer?.session?.peerConnection.iceConnectionState ?? "no connection"
-    ]
-  ];
-};
-(function(Unit2) {
-  Unit2.KB = (n) => ((n ?? 0) / 1e3).toFixed(2);
-})(Unit || (Unit = {}));
-var Table = ({ rows }) => {
-  return /* @__PURE__ */ React10.createElement("div", {
-    className: "is-full text-xs font-mono"
-  }, rows.map(([prefix, label, value, unit], i) => /* @__PURE__ */ React10.createElement("div", {
-    key: i,
-    className: "grid grid-cols-[3fr_1fr_1fr_1fr]"
-  }, /* @__PURE__ */ React10.createElement("div", {
-    className: "p-1"
-  }, prefix), /* @__PURE__ */ React10.createElement("div", {
-    className: "p-1"
-  }, label), /* @__PURE__ */ React10.createElement("div", {
-    className: "p-1"
-  }, value), /* @__PURE__ */ React10.createElement("div", {
-    className: "p-1"
-  }, unit))));
-};
-var Unit;
+// 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/ChatContainer.tsx
-import React12, { useLayoutEffect as useLayoutEffect2, useMemo as useMemo5, useRef as useRef4, useState as useState6 } from "react";
-import { Obj as Obj2, Ref as Ref2 } from "@dxos/echo";
-import { useMembers } from "@dxos/react-client/echo";
+// 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 { Icon as Icon3, ScrollArea, useThemeContext as useThemeContext2, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { StackItem } from "@dxos/react-ui-stack";
-import { MessageTextbox, Thread as ThreadComponent, threadLayout } from "@dxos/react-ui-thread";
-import { Message } from "@dxos/types";
+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";
 import { createBasicExtensions as createBasicExtensions2, createThemeExtensions as createThemeExtensions2, listener } from "@dxos/ui-editor";
-import { mx as mx8 } from "@dxos/ui-theme";
-import { isNonNullable } from "@dxos/util";
+import { hoverableControlItem as hoverableControlItem2, hoverableControls as hoverableControls2, hoverableFocusedWithinControls as hoverableFocusedWithinControls2, mx as mx8 } from "@dxos/ui-theme";
 
 // src/components/command-extension.ts
 import { HighlightStyle, StreamLanguage, syntaxHighlighting } from "@codemirror/language";
@@ -920,7 +747,7 @@ var parser = StreamLanguage.define({
 var styles = HighlightStyle.define([
   {
     tag: tags.tagName,
-    class: mx6("dx-tag dx-tag--indigo text-baseText font-medium")
+    class: mx6("dx-tag dx-tag--indigo text-base-surface-text font-medium")
   }
 ]);
 var command = [
@@ -930,25 +757,25 @@ var command = [
 
 // src/components/MessageContainer.tsx
 import { EditorView } from "@codemirror/view";
-import React11, { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect7, useRef as useRef3, useState as useState5 } from "react";
+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 { Ref } from "@dxos/echo";
 import { useObject } from "@dxos/echo-react";
 import { PublicKey } from "@dxos/react-client";
 import { useIdentity } from "@dxos/react-client/halo";
-import { IconButton as IconButton4, useOnTransition, useThemeContext, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { IconButton as IconButton3, useOnTransition, useThemeContext, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { Card } from "@dxos/react-ui";
 import { useTextEditor } from "@dxos/react-ui-editor";
-import { Card } from "@dxos/react-ui-mosaic";
 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";
-var buttonGroupClassNames = "flex flex-row items-center gap-0.5 pie-2";
-var buttonClassNames = "!p-1 transition-opacity";
+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 } = useTranslation4(meta.id);
+  const { t } = useTranslation3(meta.id);
   const [message, updateMessage] = useObject(messageOrRef);
   const identity = useIdentity();
-  const [editing, setEditing] = useState5(false);
+  const [editing, setEditing] = useState4(false);
   const textBlockIndex = message?.blocks.findIndex((block) => block._tag === "text") ?? -1;
   const handleEdit = useCallback2(() => setEditing((editing2) => !editing2), []);
   const handleDelete = useCallback2(() => message && onDelete?.(message.id), [
@@ -980,19 +807,19 @@ var MessageContainer = ({ message: messageOrRef, members, editable = false, onDe
   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);
-  return /* @__PURE__ */ React11.createElement(MessageRoot, {
+  return /* @__PURE__ */ React10.createElement(MessageRoot, {
     ...messageMetadata,
     classNames: [
       hoverableControls,
       hoverableFocusedWithinControls
     ]
-  }, /* @__PURE__ */ React11.createElement(MessageHeading, {
+  }, /* @__PURE__ */ React10.createElement(MessageHeading, {
     authorName: messageMetadata.authorName,
     timestamp: messageMetadata.timestamp
-  }, /* @__PURE__ */ React11.createElement("div", {
+  }, /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     className: buttonGroupClassNames
-  }, userIsAuthor && editable && /* @__PURE__ */ React11.createElement(IconButton4, {
+  }, 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",
@@ -1003,7 +830,7 @@ var MessageContainer = ({ message: messageOrRef, members, editable = false, onDe
       hoverableControlItem
     ],
     onClick: handleEdit
-  }), proposalBlock && onAcceptProposal && /* @__PURE__ */ React11.createElement(IconButton4, {
+  }), proposalBlock && onAcceptProposal && /* @__PURE__ */ React10.createElement(IconButton3, {
     "data-testid": "thread.message.accept",
     variant: "ghost",
     icon: "ph--check--regular",
@@ -1014,7 +841,7 @@ var MessageContainer = ({ message: messageOrRef, members, editable = false, onDe
       hoverableControlItem
     ],
     onClick: handleAcceptProposal
-  }), onDelete && /* @__PURE__ */ React11.createElement(IconButton4, {
+  }), onDelete && /* @__PURE__ */ React10.createElement(IconButton3, {
     "data-testid": "thread.message.delete",
     variant: "ghost",
     icon: "ph--x--regular",
@@ -1025,20 +852,20 @@ var MessageContainer = ({ message: messageOrRef, members, editable = false, onDe
       hoverableControlItem
     ],
     onClick: handleDelete
-  }))), textBlock && /* @__PURE__ */ React11.createElement(TextboxBlock, {
+  }))), textBlock && /* @__PURE__ */ React10.createElement(TextboxBlock, {
     block: textBlock,
     isAuthor: userIsAuthor,
     editing,
     onSave: handleTextBlockChange
-  }), proposalBlock && /* @__PURE__ */ React11.createElement(ProposalBlock, {
+  }), proposalBlock && /* @__PURE__ */ React10.createElement(ProposalBlock, {
     block: proposalBlock
-  }), Ref.Array.targets(references).map((reference, index) => /* @__PURE__ */ React11.createElement(MessagePart, {
+  }), Ref.Array.targets(references).map((reference, index) => /* @__PURE__ */ React10.createElement(MessagePart, {
     key: index,
     part: reference
   })));
 };
 var MessagePart = ({ part }) => {
-  return /* @__PURE__ */ React11.createElement(MessageBlockObjectTile, {
+  return /* @__PURE__ */ React10.createElement(MessageBlockObjectTile, {
     subject: part
   });
 };
@@ -1077,23 +904,23 @@ var TextboxBlock = ({ block, isAuthor, editing, onSave }) => {
     themeMode,
     handleDocumentChange
   ]);
-  useEffect7(() => {
+  useEffect6(() => {
     editing && view?.focus();
   }, [
     editing,
     view
   ]);
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     ref: parentRef,
-    className: "mie-4",
+    className: "me-4",
     ...focusAttributes
   });
 };
 var ProposalBlock = ({ block }) => {
-  return /* @__PURE__ */ React11.createElement("div", {
+  return /* @__PURE__ */ React10.createElement("div", {
     role: "none",
-    className: "mie-4 italic"
+    className: "me-4 italic"
   }, block.text);
 };
 var MessageBlockObjectTile = /* @__PURE__ */ forwardRef2(({ subject }, forwardedRef) => {
@@ -1101,11 +928,11 @@ var MessageBlockObjectTile = /* @__PURE__ */ forwardRef2(({ subject }, forwarded
   if (typeof title !== "string") {
     title = title?.content ?? "";
   }
-  return /* @__PURE__ */ React11.createElement(Card.Root, {
-    className: mx7("grid col-span-3 plb-1 pr-4", hoverableControls, hoverableFocusedWithinControls),
+  return /* @__PURE__ */ React10.createElement(Card.Root, {
+    className: mx7("grid col-span-3 py-1 pr-4", hoverableControls, hoverableFocusedWithinControls),
     ref: forwardedRef
-  }, /* @__PURE__ */ React11.createElement(Surface.Surface, {
-    role: "card-content",
+  }, /* @__PURE__ */ React10.createElement(Surface.Surface, {
+    role: "card--content",
     limit: 1,
     data: {
       subject
@@ -1114,21 +941,22 @@ var MessageBlockObjectTile = /* @__PURE__ */ forwardRef2(({ subject }, forwarded
   }));
 });
 
-// src/components/ChatContainer.tsx
-var ChatContainer = ({ classNames, space, thread, context, current, autoFocusTextbox }) => {
-  const { t } = useTranslation5(meta.id);
-  const id = Obj2.getDXN(thread).toString();
+// src/components/CommentsThreadContainer.tsx
+var CommentsThreadContainer = ({ anchor, current, onAttend, onComment, onResolve, onMessageDelete, onThreadDelete, onAcceptProposal }) => {
+  const { themeMode } = useThemeContext2();
+  const { t } = useTranslation4(meta.id);
   const identity = useIdentity2();
+  const space = getSpace(anchor);
   const members = useMembers(space?.id);
-  const activity = useStatus(space, id);
-  const [_count, _setCount] = useState6(0);
-  const rerenderEditor = () => _setCount((count) => count + 1);
-  const [autoFocus, setAutoFocus] = useState6(autoFocusTextbox);
+  const detached = !anchor.anchor;
+  const thread = Relation.getSource(anchor);
+  const [messages] = useObject2(thread, "messages");
+  const activity = useStatus(space, Obj2.getDXN(thread).toString());
   const threadScrollRef = useRef4(null);
-  const { themeMode } = useThemeContext2();
-  const textboxMetadata = getMessageMetadata(id, identity);
+  const textboxMetadata = getMessageMetadata(Obj2.getDXN(thread).toString(), identity);
+  const [state, setState] = useState5({});
   const messageRef = useRef4("");
-  const extensions = useMemo5(() => [
+  const extensions = useMemo4(() => [
     createBasicExtensions2({
       placeholder: t("message placeholder")
     }),
@@ -1139,342 +967,6 @@ var ChatContainer = ({ classNames, space, thread, context, current, autoFocusTex
       onChange: ({ text }) => messageRef.current = text
     }),
     command
-  ], [
-    themeMode,
-    _count
-  ]);
-  const scrollToEnd = (behavior) => setTimeout(() => threadScrollRef.current?.scrollIntoView({
-    behavior,
-    block: "end"
-  }), 10);
-  useLayoutEffect2(() => {
-    scrollToEnd("instant");
-  }, []);
-  const handleCreate = () => {
-    if (!messageRef.current?.length) {
-      return false;
-    }
-    Obj2.change(thread, (t2) => {
-      t2.messages.push(Ref2.make(Obj2.make(Message.Message, {
-        created: (/* @__PURE__ */ new Date()).toISOString(),
-        sender: {
-          identityDid: identity.did
-        },
-        blocks: [
-          {
-            _tag: "text",
-            text: messageRef.current
-          }
-        ],
-        properties: context ? {
-          context: Ref2.make(context)
-        } : void 0
-      })));
-    });
-    messageRef.current = "";
-    setAutoFocus(true);
-    scrollToEnd("smooth");
-    rerenderEditor();
-    return true;
-  };
-  return /* @__PURE__ */ React12.createElement(ThreadComponent.Root, {
-    current,
-    id,
-    classNames: [
-      "bs-full grid-rows-[1fr_min-content_min-content] overflow-hidden",
-      "transition-[padding-block-end] [[data-sidebar-inline-start-state=open]_&]:lg:pbe-0",
-      classNames
-    ]
-  }, /* @__PURE__ */ React12.createElement(ScrollArea.Root, {
-    orientation: "vertical"
-  }, /* @__PURE__ */ React12.createElement(ScrollArea.Viewport, {
-    classNames: "col-span-2"
-  }, /* @__PURE__ */ React12.createElement("div", {
-    role: "none",
-    className: mx8(threadLayout, "place-self-end")
-  }, thread.messages.map((message) => message.target).filter(isNonNullable).map((message) => /* @__PURE__ */ React12.createElement(MessageContainer, {
-    key: message.id,
-    message,
-    members
-  }))), /* @__PURE__ */ React12.createElement("div", {
-    role: "none",
-    className: "bs-px -mbs-px",
-    ref: threadScrollRef
-  }))), /* @__PURE__ */ React12.createElement(MessageTextbox, {
-    extensions,
-    autoFocus,
-    onSend: handleCreate,
-    ...textboxMetadata
-  }), /* @__PURE__ */ React12.createElement(ThreadComponent.Status, {
-    activity
-  }, t("activity message")));
-};
-var ChatContainer_default = ChatContainer;
-
-// src/components/ChannelContainer.tsx
-import { Atom, useAtomValue as useAtomValue4 } from "@effect-atom/atom-react";
-import React13, { useCallback as useCallback3, useEffect as useEffect8, useMemo as useMemo6, useState as useState7 } from "react";
-import { useCapabilities, useCapability as useCapability4 } from "@dxos/app-framework/ui";
-import { Context } from "@dxos/context";
-import { failUndefined } from "@dxos/debug";
-import { Obj as Obj3 } from "@dxos/echo";
-import { log as log2 } from "@dxos/log";
-import { useClient } from "@dxos/react-client";
-import { getSpace } from "@dxos/react-client/echo";
-import { useIdentity as useIdentity3 } from "@dxos/react-client/halo";
-import { ElevationProvider, Input as Input2, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { Settings } from "@dxos/react-ui-form";
-import { MenuProvider, ToolbarMenu, createMenuAction, createMenuItemGroup, useMenuActions } from "@dxos/react-ui-menu";
-import { useSoundEffect } from "@dxos/react-ui-sfx";
-import { StackItem as StackItem2 } from "@dxos/react-ui-stack";
-var __dxlog_file3 = "/__w/dxos/dxos/packages/plugins/plugin-thread/src/components/ChannelContainer.tsx";
-var ChannelContainer = ({ role, subject: channel, roomId: roomIdProp, fullscreen }) => {
-  const space = getSpace(channel);
-  const callManager = useCapability4(ThreadCapabilities.CallManager);
-  const joined = useAtomValue4(callManager.joinedAtom);
-  const currentRoomId = useAtomValue4(callManager.roomIdAtom);
-  const attendableId = channel ? Obj3.getDXN(channel).toString() : void 0;
-  const roomId = roomIdProp ?? attendableId ?? failUndefined();
-  const identity = useIdentity3();
-  const isNamed = !!identity?.profile?.displayName;
-  const joinSound = useSoundEffect("JoinCall");
-  const leaveSound = useSoundEffect("LeaveCall");
-  const extensions = useCapabilities(ThreadCapabilities.CallExtension);
-  useEffect8(() => {
-    const ctx = new Context(void 0, {
-      F: __dxlog_file3,
-      L: 56
-    });
-    callManager.left.on(ctx, (roomId2) => {
-      extensions.forEach((extension) => {
-        void extension.onLeave?.(roomId2);
-      });
-    });
-    callManager.callStateUpdated.on(ctx, (state) => {
-      extensions.forEach((extension) => {
-        void extension.onCallStateUpdated?.(state);
-      });
-    });
-    callManager.mediaStateUpdated.on(ctx, (state) => {
-      extensions.forEach((extension) => {
-        void extension.onMediaStateUpdated?.(state);
-      });
-    });
-    return () => {
-      void ctx.dispose();
-    };
-  }, [
-    callManager,
-    extensions
-  ]);
-  const handleJoin = useCallback3(async () => {
-    if (!roomId || !channel) {
-      return;
-    }
-    if (joined) {
-      await callManager.leave();
-    }
-    try {
-      void joinSound.play();
-      callManager.setRoomId(roomId);
-      await callManager.join();
-      await Promise.all(extensions.map((extension) => extension.onJoin?.({
-        channel,
-        roomId
-      })));
-    } catch (err) {
-      log2.catch(err, void 0, {
-        F: __dxlog_file3,
-        L: 100,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    }
-  }, [
-    extensions,
-    channel,
-    roomId,
-    joined
-  ]);
-  const handleLeave = useCallback3(async () => {
-    try {
-      void leaveSound.play();
-    } catch (err) {
-      log2.catch(err, void 0, {
-        F: __dxlog_file3,
-        L: 112,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-    } finally {
-      void callManager.turnAudioOff();
-      void callManager.turnVideoOff();
-      void callManager.turnScreenshareOff();
-      void callManager.leave();
-    }
-  }, [
-    extensions,
-    roomId
-  ]);
-  const isJoined = joined && currentRoomId === roomId;
-  return /* @__PURE__ */ React13.createElement(StackItem2.Content, {
-    classNames: isJoined && "bs-full",
-    toolbar: !isJoined
-  }, isJoined && !isNamed && /* @__PURE__ */ React13.createElement(DisplayNameMissing, null), isJoined && isNamed && /* @__PURE__ */ React13.createElement(Call.Root, null, /* @__PURE__ */ React13.createElement(Call.Grid, {
-    fullscreen
-  }), /* @__PURE__ */ React13.createElement(Call.Toolbar, {
-    channel,
-    onLeave: handleLeave
-  })), !isJoined && channel && channel.defaultThread.target && space && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(ChannelToolbar, {
-    attendableId,
-    role,
-    onJoinCall: handleJoin
-  }), /* @__PURE__ */ React13.createElement(ChatContainer_default, {
-    space,
-    thread: channel.defaultThread.target,
-    classNames: "container-max-width"
-  })));
-};
-var DisplayNameMissing = () => {
-  const { t } = useTranslation6(meta.id);
-  const client = useClient();
-  const [displayName, setDisplayName] = useState7("");
-  const handleChange = useCallback3((event) => setDisplayName(event.target.value), []);
-  const handleSave = useCallback3(() => client.halo.updateProfile({
-    displayName
-  }), [
-    client,
-    displayName
-  ]);
-  return /* @__PURE__ */ React13.createElement(Settings.Group, {
-    classNames: "p-4 place-content-center"
-  }, /* @__PURE__ */ React13.createElement(Settings.ItemInput, {
-    title: t("display name label"),
-    description: t("display name description")
-  }, /* @__PURE__ */ React13.createElement(Input2.TextInput, {
-    value: displayName,
-    onChange: handleChange,
-    placeholder: t("display name input placeholder"),
-    classNames: "md:min-is-64"
-  })), /* @__PURE__ */ React13.createElement(Settings.GroupButton, {
-    disabled: !displayName,
-    onClick: handleSave
-  }, t("set display name label")));
-};
-var useChannelToolbarActions = (onJoinCall) => {
-  const creator = useMemo6(() => Atom.make(() => {
-    return {
-      nodes: [
-        createMenuItemGroup("root", {
-          label: [
-            "channel toolbar title",
-            {
-              ns: meta.id
-            }
-          ]
-        }),
-        createMenuAction("video-call", () => onJoinCall?.(), {
-          label: [
-            "start video call label",
-            {
-              ns: meta.id
-            }
-          ],
-          icon: "ph--video-camera--regular",
-          type: "video-call"
-        })
-      ],
-      edges: [
-        {
-          source: "root",
-          target: "video-call"
-        }
-      ]
-    };
-  }), []);
-  return useMenuActions(creator);
-};
-var ChannelToolbar = ({ attendableId, role, onJoinCall }) => {
-  const menuProps = useChannelToolbarActions(onJoinCall);
-  return /* @__PURE__ */ React13.createElement(ElevationProvider, {
-    elevation: role === "section" ? "positioned" : "base"
-  }, /* @__PURE__ */ React13.createElement(MenuProvider, {
-    ...menuProps,
-    attendableId
-  }, /* @__PURE__ */ React13.createElement(ToolbarMenu, {
-    textBlockWidth: true
-  })));
-};
-
-// src/components/CallSidebar.tsx
-import { useAtomValue as useAtomValue5 } from "@effect-atom/atom-react";
-import React14 from "react";
-import { useCapability as useCapability5 } from "@dxos/app-framework/ui";
-var CallSidebar = () => {
-  const call = useCapability5(ThreadCapabilities.CallManager);
-  const roomId = useAtomValue5(call.roomIdAtom);
-  return /* @__PURE__ */ React14.createElement(ChannelContainer, {
-    subject: void 0,
-    roomId
-  });
-};
-
-// src/components/ThreadCompanion.tsx
-import { useAtomValue as useAtomValue6 } from "@effect-atom/atom-react";
-import React18, { useCallback as useCallback5, useMemo as useMemo8 } from "react";
-import { Capabilities } from "@dxos/app-framework";
-import { useCapabilities as useCapabilities2, useCapability as useCapability6, useOperationInvoker } from "@dxos/app-framework/ui";
-import { AppCapabilities, CollaborationOperation, LayoutOperation } from "@dxos/app-toolkit";
-import { Filter, Obj as Obj6, Query, Relation as Relation3 } from "@dxos/echo";
-import { Ref as Ref3, useQuery } from "@dxos/react-client/echo";
-import { useIdentity as useIdentity5 } from "@dxos/react-client/halo";
-import { useTranslation as useTranslation10 } from "@dxos/react-ui";
-import { Layout } from "@dxos/react-ui";
-import { useAttended } from "@dxos/react-ui-attention";
-import { Tabs } from "@dxos/react-ui-tabs";
-import { AnchoredTo, Thread } from "@dxos/types";
-import { mx as mx10 } from "@dxos/ui-theme";
-
-// src/components/CommentsContainer.tsx
-import React16, { useEffect as useEffect9 } from "react";
-import { Obj as Obj5, Relation as Relation2 } from "@dxos/echo";
-import { Callout, Icon as Icon4, Trans, useTranslation as useTranslation8 } from "@dxos/react-ui";
-
-// src/components/CommentsThreadContainer.tsx
-import React15, { useCallback as useCallback4, useMemo as useMemo7, useRef as useRef5, useState as useState8 } from "react";
-import { Obj as Obj4, Relation } from "@dxos/echo";
-import { useObject as useObject2 } from "@dxos/echo-react";
-import { getSpace as getSpace2, useMembers as useMembers2 } from "@dxos/react-client/echo";
-import { useIdentity as useIdentity4 } from "@dxos/react-client/halo";
-import { IconButton as IconButton5, Tag, Tooltip, useThemeContext as useThemeContext3, useTranslation as useTranslation7 } 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 mx9 } from "@dxos/ui-theme";
-var CommentsThreadContainer = ({ anchor, current, onAttend, onComment, onResolve, onMessageDelete, onThreadDelete, onAcceptProposal }) => {
-  const { themeMode } = useThemeContext3();
-  const { t } = useTranslation7(meta.id);
-  const identity = useIdentity4();
-  const space = getSpace2(anchor);
-  const members = useMembers2(space?.id);
-  const detached = !anchor.anchor;
-  const thread = Relation.getSource(anchor);
-  const [messages] = useObject2(thread, "messages");
-  const activity = useStatus(space, Obj4.getDXN(thread).toString());
-  const threadScrollRef = useRef5(null);
-  const textboxMetadata = getMessageMetadata(Obj4.getDXN(thread).toString(), identity);
-  const [state, setState] = useState8({});
-  const messageRef = useRef5("");
-  const extensions = useMemo7(() => [
-    createBasicExtensions3({
-      placeholder: t("message placeholder")
-    }),
-    createThemeExtensions3({
-      themeMode
-    }),
-    listener2({
-      onChange: ({ text }) => messageRef.current = text
-    }),
-    command
   ], [
     state
   ]);
@@ -1482,27 +974,27 @@ var CommentsThreadContainer = ({ anchor, current, onAttend, onComment, onResolve
     behavior,
     block: "end"
   }), 10);
-  const handleAttend = useCallback4(() => onAttend?.(anchor), [
+  const handleAttend = useCallback3(() => onAttend?.(anchor), [
     onAttend,
     anchor
   ]);
-  const handleResolve = useCallback4(() => onResolve?.(anchor), [
+  const handleResolve = useCallback3(() => onResolve?.(anchor), [
     onResolve,
     anchor
   ]);
-  const handleMessageDelete = useCallback4((id) => onMessageDelete?.(anchor, id), [
+  const handleMessageDelete = useCallback3((id) => onMessageDelete?.(anchor, id), [
     onMessageDelete,
     anchor
   ]);
-  const handleThreadDelete = useCallback4(() => onThreadDelete?.(anchor), [
+  const handleThreadDelete = useCallback3(() => onThreadDelete?.(anchor), [
     onThreadDelete,
     anchor
   ]);
-  const handleAcceptProposal = useCallback4((id) => onAcceptProposal?.(anchor, id), [
+  const handleAcceptProposal = useCallback3((id) => onAcceptProposal?.(anchor, id), [
     onAcceptProposal,
     anchor
   ]);
-  const handleComment = useCallback4(() => {
+  const handleComment = useCallback3(() => {
     if (!messageRef.current) {
       return false;
     }
@@ -1515,27 +1007,27 @@ var CommentsThreadContainer = ({ anchor, current, onAttend, onComment, onResolve
     anchor,
     identity
   ]);
-  return /* @__PURE__ */ React15.createElement(ThreadComponent2.Root, {
-    id: Obj4.getDXN(thread).toString(),
-    classNames: "pbs-2 border-be border-subduedSeparator last:border-none",
+  return /* @__PURE__ */ React11.createElement(ThreadComponent.Root, {
+    id: Obj2.getDXN(thread).toString(),
+    classNames: "pt-2 border-b border-subdued-separator last:border-none",
     current,
     onClickCapture: handleAttend,
     onFocusCapture: handleAttend
-  }, /* @__PURE__ */ React15.createElement("div", {
+  }, /* @__PURE__ */ React11.createElement("div", {
     role: "none",
-    className: mx9("col-span-2 grid grid-cols-[var(--rail-size)_1fr_min-content]", hoverableControls2, hoverableFocusedWithinControls2)
-  }, detached ? /* @__PURE__ */ React15.createElement(Tooltip.Trigger, {
+    className: mx8("col-span-2 grid grid-cols-[var(--dx-rail-size)_1fr_min-content]", hoverableControls2, hoverableFocusedWithinControls2)
+  }, detached ? /* @__PURE__ */ React11.createElement(Tooltip.Trigger, {
     asChild: true,
     content: t("detached thread label"),
     side: "top"
-  }, /* @__PURE__ */ React15.createElement(ThreadComponent2.Header, {
+  }, /* @__PURE__ */ React11.createElement(ThreadComponent.Header, {
     detached: true
-  }, thread.name)) : /* @__PURE__ */ React15.createElement(ThreadComponent2.Header, null, thread.name), /* @__PURE__ */ React15.createElement("div", {
+  }, thread.name)) : /* @__PURE__ */ React11.createElement(ThreadComponent.Header, null, thread.name), /* @__PURE__ */ React11.createElement("div", {
     role: "none",
     className: buttonGroupClassNames
-  }, thread.status === "staged" && /* @__PURE__ */ React15.createElement(Tag, {
+  }, thread.status === "staged" && /* @__PURE__ */ React11.createElement(Tag, {
     palette: "neutral"
-  }, t("draft button")), onResolve && !(thread?.status === "staged") && /* @__PURE__ */ React15.createElement(IconButton5, {
+  }, t("draft button")), onResolve && !(thread?.status === "staged") && /* @__PURE__ */ React11.createElement(IconButton4, {
     "data-testid": "thread.resolve",
     variant: "ghost",
     icon: thread?.status === "resolved" ? "ph--check--fill" : "ph--check--regular",
@@ -1546,7 +1038,7 @@ var CommentsThreadContainer = ({ anchor, current, onAttend, onComment, onResolve
       thread?.status !== "resolved" && hoverableControlItem2
     ],
     onClick: handleResolve
-  }), onThreadDelete && /* @__PURE__ */ React15.createElement(IconButton5, {
+  }), onThreadDelete && /* @__PURE__ */ React11.createElement(IconButton4, {
     "data-testid": "thread.delete",
     variant: "ghost",
     icon: "ph--x--regular",
@@ -1557,34 +1049,34 @@ var CommentsThreadContainer = ({ anchor, current, onAttend, onComment, onResolve
       hoverableControlItem2
     ],
     onClick: handleThreadDelete
-  }))), messages?.map((ref) => /* @__PURE__ */ React15.createElement(MessageContainer, {
+  }))), messages?.map((ref) => /* @__PURE__ */ React11.createElement(MessageContainer, {
     key: ref.dxn.toString(),
     editable: true,
     message: ref,
     members,
     onDelete: handleMessageDelete,
     onAcceptProposal: handleAcceptProposal
-  })), /* @__PURE__ */ React15.createElement(MessageTextbox2, {
+  })), /* @__PURE__ */ React11.createElement(MessageTextbox, {
     extensions,
     onSend: handleComment,
     ...textboxMetadata
-  }), /* @__PURE__ */ React15.createElement(ThreadComponent2.Status, {
+  }), /* @__PURE__ */ React11.createElement(ThreadComponent.Status, {
     activity
-  }, t("activity message")), /* @__PURE__ */ React15.createElement("div", {
+  }, t("activity message")), /* @__PURE__ */ React11.createElement("div", {
     role: "none",
-    className: "bs-px -mbs-px",
+    className: "h-px -mt-px",
     ref: threadScrollRef
   }));
 };
 
 // src/components/CommentsContainer.tsx
 var CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props }) => {
-  const { t } = useTranslation8(meta.id);
+  const { t } = useTranslation5(meta.id);
   const filteredAnchors = showResolvedThreads ? anchors.filter((anchor) => !!Relation2.getSource(anchor)) : anchors.filter((anchor) => {
     const thread = Relation2.getSource(anchor);
     return thread && thread.status !== "resolved";
   });
-  useEffect9(() => {
+  useEffect7(() => {
     if (currentId) {
       document.getElementById(currentId)?.scrollIntoView({
         behavior: "smooth",
@@ -1595,25 +1087,25 @@ var CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props })
     currentId
   ]);
   if (filteredAnchors.length === 0) {
-    return /* @__PURE__ */ React16.createElement("div", {
+    return /* @__PURE__ */ React12.createElement("div", {
       role: "none",
-      className: "plb-cardSpacingBlock pli-cardSpacingInline"
-    }, /* @__PURE__ */ React16.createElement(Callout.Root, null, /* @__PURE__ */ React16.createElement(Callout.Title, null, /* @__PURE__ */ React16.createElement(Trans, {
+      className: "p-form-padding"
+    }, /* @__PURE__ */ React12.createElement(Message.Root, null, /* @__PURE__ */ React12.createElement(Message.Title, null, /* @__PURE__ */ React12.createElement(Trans, {
       t,
       i18nKey: "no comments message",
       components: {
-        commentIcon: /* @__PURE__ */ React16.createElement(Icon4, {
+        commentIcon: /* @__PURE__ */ React12.createElement(Icon3, {
           icon: "ph--chat-text--regular",
           size: 4,
-          classNames: "inline-block"
+          classNames: "w-block"
         })
       }
     }))));
   }
-  return /* @__PURE__ */ React16.createElement("div", null, filteredAnchors.map((anchor) => {
+  return /* @__PURE__ */ React12.createElement("div", null, filteredAnchors.map((anchor) => {
     const thread = Relation2.getSource(anchor);
-    const threadId = Obj5.getDXN(thread).toString();
-    return /* @__PURE__ */ React16.createElement(CommentsThreadContainer, {
+    const threadId = Obj3.getDXN(thread).toString();
+    return /* @__PURE__ */ React12.createElement(CommentsThreadContainer, {
       key: threadId,
       anchor,
       current: currentId === threadId,
@@ -1622,196 +1114,10 @@ var CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props })
   }));
 };
 
-// src/components/ThreadSettings.tsx
-import React17 from "react";
-import { useTranslation as useTranslation9 } from "@dxos/react-ui";
-import { Settings as Settings2 } from "@dxos/react-ui-form";
-var ThreadSettings = ({ settings: _settings }) => {
-  const { t: _t } = useTranslation9(meta.id);
-  return /* @__PURE__ */ React17.createElement(Settings2.Root, null);
-};
-
-// src/components/ThreadCompanion.tsx
-var initialViewState = {
-  showResolvedThreads: false
-};
-var ThreadCompanion = ({ subject }) => {
-  const { t } = useTranslation10(meta.id);
-  const { invokePromise } = useOperationInvoker();
-  const identity = useIdentity5();
-  const subjectId = Obj6.getDXN(subject).toString();
-  const registry = useCapability6(Capabilities.AtomRegistry);
-  const stateAtom = useCapability6(ThreadCapabilities.State);
-  const viewStoreAtom = useCapability6(ThreadCapabilities.ViewState);
-  const state = useAtomValue6(stateAtom);
-  const viewStore = useAtomValue6(viewStoreAtom);
-  const drafts = state.drafts[subjectId];
-  const viewState = useMemo8(() => {
-    if (!viewStore[subjectId]) {
-      registry.set(viewStoreAtom, {
-        ...viewStore,
-        [subjectId]: {
-          ...initialViewState
-        }
-      });
-      return initialViewState;
-    }
-    return viewStore[subjectId];
-  }, [
-    viewStore,
-    subjectId,
-    registry,
-    viewStoreAtom
-  ]);
-  const { showResolvedThreads } = viewState;
-  const onChangeViewState = useCallback5((nextValue) => {
-    registry.set(viewStoreAtom, {
-      ...registry.get(viewStoreAtom),
-      [subjectId]: {
-        ...registry.get(viewStoreAtom)[subjectId],
-        showResolvedThreads: nextValue === "all"
-      }
-    });
-  }, [
-    registry,
-    viewStoreAtom,
-    subjectId
-  ]);
-  const anchorSorts = useCapabilities2(AppCapabilities.AnchorSort);
-  const sort = useMemo8(() => anchorSorts.find(({ key }) => key === Obj6.getTypename(subject))?.sort, [
-    anchorSorts,
-    subject
-  ]);
-  const db = Obj6.getDatabase(subject);
-  const objectsAnchoredTo = useQuery(db, Query.select(Filter.id(subject.id)).targetOf(AnchoredTo.AnchoredTo));
-  const anchors = objectsAnchoredTo.toSorted((a, b) => sort?.(a, b) ?? 0).filter((anchor) => Obj6.instanceOf(Thread.Thread, Relation3.getSource(anchor))).concat(drafts ?? []);
-  const attended = useAttended();
-  const handleAttend = useCallback5((anchor) => {
-    const thread = Relation3.getSource(anchor);
-    const threadId = Obj6.getDXN(thread).toString();
-    if (state.current !== threadId) {
-      registry.set(stateAtom, {
-        ...registry.get(stateAtom),
-        current: threadId
-      });
-      void invokePromise(LayoutOperation.ScrollIntoView, {
-        subject: Obj6.getDXN(subject).toString(),
-        cursor: anchor.anchor,
-        ref: threadId
-      });
-    }
-  }, [
-    state.current,
-    invokePromise,
-    subject,
-    registry,
-    stateAtom
-  ]);
-  const handleComment = useCallback5(async (anchor, text) => {
-    await invokePromise(ThreadOperation.AddMessage, {
-      anchor,
-      subject,
-      sender: {
-        identityDid: identity?.did
-      },
-      text
-    });
-    const thread = Relation3.getSource(anchor);
-    registry.set(stateAtom, {
-      ...registry.get(stateAtom),
-      current: Obj6.getDXN(thread).toString()
-    });
-  }, [
-    invokePromise,
-    identity,
-    subject,
-    registry,
-    stateAtom
-  ]);
-  const handleResolve = useCallback5((anchor) => invokePromise(ThreadOperation.ToggleResolved, {
-    thread: Relation3.getSource(anchor)
-  }), [
-    invokePromise
-  ]);
-  const handleThreadDelete = useCallback5((anchor) => invokePromise(ThreadOperation.Delete, {
-    anchor,
-    subject
-  }), [
-    invokePromise,
-    subject
-  ]);
-  const handleMessageDelete = useCallback5((anchor, messageId) => invokePromise(ThreadOperation.DeleteMessage, {
-    anchor,
-    subject,
-    messageId
-  }), [
-    invokePromise,
-    subject
-  ]);
-  const handleAcceptProposal = useCallback5(async (anchor, messageId) => {
-    const thread = Relation3.getSource(anchor);
-    const messageIndex = thread.messages.findIndex(Ref3.hasObjectId(messageId));
-    const message = thread.messages[messageIndex]?.target;
-    const proposal = message?.blocks.find((block) => block._tag === "proposal");
-    if (!proposal || !anchor.anchor) {
-      return;
-    }
-    await invokePromise(CollaborationOperation.AcceptProposal, {
-      subject,
-      anchor: anchor.anchor,
-      proposal
-    });
-    await invokePromise(ThreadOperation.ToggleResolved, {
-      thread
-    });
-  }, [
-    invokePromise,
-    subject
-  ]);
-  const comments = /* @__PURE__ */ React18.createElement(CommentsContainer, {
-    anchors,
-    currentId: attended.includes(subjectId) ? state.current : void 0,
-    showResolvedThreads,
-    onAttend: handleAttend,
-    onComment: handleComment,
-    onResolve: handleResolve,
-    onMessageDelete: handleMessageDelete,
-    onThreadDelete: handleThreadDelete,
-    onAcceptProposal: handleAcceptProposal
-  });
-  return /* @__PURE__ */ React18.createElement(Layout.Main, {
-    toolbar: true
-  }, /* @__PURE__ */ React18.createElement(Tabs.Root, {
-    value: showResolvedThreads ? "all" : "unresolved",
-    orientation: "horizontal",
-    classNames: [
-      'contents [&_[role="tabpanel"]]:min-bs-0 [&_[role="tabpanel"]]:overflow-y-auto [&_[role="tabpanel"]]:scrollbar-thin'
-    ],
-    onValueChange: onChangeViewState
-  }, /* @__PURE__ */ React18.createElement(Tabs.Tablist, {
-    classNames: mx10("bg-toolbarSurface border-be border-subduedSeparator")
-  }, /* @__PURE__ */ React18.createElement(Tabs.Tab, {
-    value: "unresolved",
-    classNames: "text-sm"
-  }, t("show unresolved label")), /* @__PURE__ */ React18.createElement(Tabs.Tab, {
-    value: "all",
-    classNames: "text-sm"
-  }, t("show all label"))), /* @__PURE__ */ React18.createElement("div", {
-    className: "overflow-y-auto"
-  }, /* @__PURE__ */ React18.createElement(Tabs.Tabpanel, {
-    value: "all"
-  }, showResolvedThreads && comments), /* @__PURE__ */ React18.createElement(Tabs.Tabpanel, {
-    value: "unresolved"
-  }, !showResolvedThreads && comments))));
-};
-
 export {
   Call,
-  CallDebugPanel,
-  ChatContainer,
-  ChannelContainer,
-  CallSidebar,
-  ThreadCompanion,
-  ThreadSettings
+  command,
+  MessageContainer,
+  CommentsContainer
 };
-//# sourceMappingURL=chunk-4EUEMHNI.mjs.map
+//# sourceMappingURL=chunk-G6FJBSXX.mjs.map