@dxos/plugin-thread 0.8.4-main.7ace549 → 0.8.4-main.937b3ca

package/dist/lib/browser/chunk-VZICDGBW.mjs

@@ -0,0 +1,1813 @@
+import {
+  useDebugMode,
+  useOnEditAnalytics,
+  useStatus
+} from "./chunk-DLO2G3DM.mjs";
+import {
+  getMessageMetadata
+} from "./chunk-CP7E2HRE.mjs";
+import {
+  ThreadCapabilities,
+  ThreadOperation,
+  meta
+} from "./chunk-TAWDJPMD.mjs";
+
+// 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/react";
+
+// src/components/Media/AudioStream.tsx
+import React, { useEffect, useRef } from "react";
+var AudioStream = ({ tracks }) => {
+  const mediaStreamRef = useRef(new MediaStream());
+  const ref = useRef(null);
+  useEffect(() => {
+    const audio = ref.current;
+    if (!audio) {
+      return;
+    }
+    const mediaStream = mediaStreamRef.current;
+    audio.srcObject = mediaStream;
+  }, []);
+  const resetSrcObject = () => {
+    const audio = ref.current;
+    const mediaStream = mediaStreamRef.current;
+    if (!audio || !mediaStream) {
+      return;
+    }
+    audio.addEventListener("canplay", () => audio.play(), {
+      once: true
+    });
+    audio.srcObject = mediaStream;
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("audio", {
+    ref,
+    autoPlay: true
+  }), tracks.map((track) => /* @__PURE__ */ React.createElement(AudioTrack, {
+    key: track.id,
+    track,
+    mediaStream: mediaStreamRef.current,
+    resetSrcObject
+  })));
+};
+var AudioTrack = ({ track, mediaStream, resetSrcObject }) => {
+  useEffect(() => {
+    const currentTrack = track;
+    mediaStream.addTrack(currentTrack);
+    resetSrcObject();
+    return () => {
+      mediaStream.removeTrack(currentTrack);
+      resetSrcObject();
+    };
+  }, [
+    track,
+    mediaStream
+  ]);
+  return null;
+};
+
+// src/components/Media/VideoObject.tsx
+import React2, { forwardRef, memo, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { mx } from "@dxos/ui-theme";
+var VideoObject = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ videoStream, classNames, flip, contain, ...rest }, ref) => {
+  const internalRef = useRef2(null);
+  useEffect2(() => {
+    const video = internalRef.current;
+    if (video && videoStream) {
+      video.srcObject = videoStream;
+      video.setAttribute("autoplay", "true");
+      video.setAttribute("playsinline", "true");
+    }
+  }, [
+    videoStream,
+    internalRef.current
+  ]);
+  return /* @__PURE__ */ React2.createElement("video", {
+    className: mx("is-full aspect-video", flip && "scale-x-[-1]", contain ? "object-contain" : "object-cover", classNames),
+    ref: (v) => {
+      internalRef.current = v;
+      if (ref === null) {
+        return;
+      }
+      if (typeof ref === "function") {
+        ref(v);
+      } else {
+        ref.current = v;
+      }
+    },
+    ...rest
+  });
+}));
+VideoObject.displayName = "VideoObject";
+
+// src/components/Participant/Participant.tsx
+import { useAtomValue } from "@effect-atom/atom-react";
+import React6, { memo as memo2, useMemo as useMemo2 } from "react";
+import { useCapability } from "@dxos/app-framework/react";
+
+// src/components/ResponsiveGrid/ResponsiveContainer.tsx
+import React3 from "react";
+import { mx as mx2 } from "@dxos/ui-theme";
+var ResponsiveContainer = ({ children }) => {
+  return (
+    // Outer container that takes full size of parent.
+    /* @__PURE__ */ React3.createElement("div", {
+      role: "none",
+      className: "relative flex is-full bs-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")
+    }, children)))
+  );
+};
+
+// src/components/ResponsiveGrid/ResponsiveGrid.tsx
+import React4, { useCallback, useEffect as useEffect3, useLayoutEffect, useMemo, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { invariant } from "@dxos/invariant";
+import { mx as mx3 } from "@dxos/ui-theme";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-thread/src/components/ResponsiveGrid/ResponsiveGrid.tsx";
+var ASPECT_RATIO = 16 / 9;
+var MIN_GALLERY_HEIGHT = 250;
+var DEFAULT_GAP = 8;
+var maxImageSize = "is-[2560px] bs-[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({
+    refreshRate: 100
+  });
+  const [dividerHeight, setDividerHeight] = useState(0);
+  useEffect3(() => {
+    if (containerWidth && containerHeight) {
+      const { height: height2 } = fitAspectRatio(containerWidth, containerHeight, ASPECT_RATIO);
+      setDividerHeight(Math.min(height2, containerHeight - MIN_GALLERY_HEIGHT));
+    }
+  }, [
+    containerWidth,
+    containerHeight
+  ]);
+  const pinnedItem = useMemo(() => items.find((item) => getId2(item) === pinned), [
+    items,
+    pinned
+  ]);
+  const mainItems = useMemo(() => items.filter((item) => getId2(item) !== pinned), [
+    items,
+    pinned
+  ]);
+  const hideGallery = autoHideGallery && pinnedItem !== void 0;
+  const [{ time, columns, cellWidth }, setLayout] = useState({
+    time: 0,
+    columns: 0,
+    cellWidth: 0
+  });
+  const { width = 0, height = 0, ref: gridContainerRef } = useResizeDetector({
+    refreshRate: 200
+  });
+  useEffect3(() => {
+    if (containerHeight && width && height) {
+      const layout = calculateLayout(width, height, mainItems.length, gap);
+      setLayout({
+        time: Date.now(),
+        ...layout
+      });
+    }
+  }, [
+    containerHeight,
+    width,
+    height,
+    mainItems.length,
+    gap,
+    pinned
+  ]);
+  const [bounds, setBounds] = useState([]);
+  useLayoutEffect(() => {
+    if (!hideGallery && !gridContainerRef.current || !containerHeight) {
+      return;
+    }
+    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",
+            ""
+          ]
+        });
+        const el = containerRef.current.querySelector(`[data-grid-item="${getId2(item)}"]`);
+        if (!el) {
+          return null;
+        }
+        const bounds2 = getRelativeBounds(containerRef.current, el);
+        return [
+          item,
+          bounds2
+        ];
+      }).filter((item) => item !== null));
+    });
+    return () => clearTimeout(t);
+  }, [
+    containerHeight,
+    items,
+    pinnedItem,
+    hideGallery,
+    time
+  ]);
+  const handleClick = useCallback((item) => onPinnedChange?.(getId2(item) === pinned ? void 0 : getId2(item)), [
+    pinned,
+    onPinnedChange
+  ]);
+  return /* @__PURE__ */ React4.createElement("div", {
+    ref: containerRef,
+    className: mx3("relative is-full bs-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"),
+    style: hideGallery ? {} : {
+      height: dividerHeight
+    }
+  }, /* @__PURE__ */ React4.createElement(SoloItem, {
+    id: getId2(pinnedItem),
+    debug
+  })), !hideGallery && /* @__PURE__ */ React4.createElement("div", {
+    ref: gridContainerRef,
+    className: "flex grow-[1] overflow-hidden justify-center items-center",
+    style: hideGallery ? {} : {
+      minHeight: MIN_GALLERY_HEIGHT
+    }
+  }, mainItems.length === 1 && /* @__PURE__ */ React4.createElement("div", {
+    style: {
+      width: cellWidth
+    },
+    className: "flex bs-full"
+  }, /* @__PURE__ */ React4.createElement(SoloItem, {
+    id: getId2(mainItems[0]),
+    debug
+  })), mainItems.length > 1 && columns > 0 && /* @__PURE__ */ React4.createElement("div", {
+    role: "grid",
+    style: {
+      display: "grid",
+      gridTemplateColumns: `repeat(${columns}, ${cellWidth}px)`,
+      gap: `${gap}px`
+    }
+  }, 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")
+  }))))), /* @__PURE__ */ React4.createElement("div", {
+    className: mx3(debug && "opacity-10")
+  }, bounds.map(([item, bounds2]) => /* @__PURE__ */ React4.createElement(Cell, {
+    key: getId2(item),
+    classNames: "absolute transition-all duration-500",
+    item,
+    style: bounds2,
+    pinned: getId2(item) === pinned,
+    onClick: items.length > 1 ? handleClick : void 0
+  }))));
+};
+var SoloItem = ({ debug, id }) => {
+  return /* @__PURE__ */ React4.createElement(ResponsiveContainer, 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", {
+    alt: "placeholder video",
+    className: mx3("opacity-0", maxImageSize)
+  })));
+};
+var getRelativeBounds = (container, el) => {
+  const containerRect = container.getBoundingClientRect();
+  const elementRect = el.getBoundingClientRect();
+  return {
+    top: elementRect.top - containerRect.top,
+    left: elementRect.left - containerRect.left,
+    width: elementRect.width,
+    height: elementRect.height
+  };
+};
+var calculateLayout = (containerWidth, containerHeight, count, gap, aspectRatio = ASPECT_RATIO) => {
+  if (count === 0) {
+    return {
+      columns: 1,
+      cellWidth: 1
+    };
+  }
+  let minWastedSpace = Infinity;
+  let bestColumns = 1;
+  let cellWidth = 0;
+  for (let rows = 1; rows <= count; rows++) {
+    const cols = Math.ceil(count / rows);
+    const { width: itemWidth, height: itemHeight } = fitItemsToGrid(containerWidth, containerHeight, cols, rows, aspectRatio, gap);
+    const usedWidth = itemWidth * cols + gap * cols - 1;
+    const usedHeight = itemHeight * rows + gap * rows - 1;
+    const wastedSpace = containerWidth * containerHeight - usedWidth * usedHeight;
+    if (wastedSpace < minWastedSpace) {
+      minWastedSpace = wastedSpace;
+      bestColumns = cols;
+      cellWidth = itemWidth;
+    }
+  }
+  return {
+    columns: bestColumns,
+    cellWidth
+  };
+};
+var fitItemsToGrid = (outerWidth, outerHeight, numCols, numRows, aspectRatio, gap) => {
+  const availableWidth = outerWidth - gap * (numCols - 1);
+  const availableHeight = outerHeight - gap * (numRows - 1);
+  const maxCellWidth = availableWidth / numCols;
+  const maxCellHeight = availableHeight / numRows;
+  return fitAspectRatio(maxCellWidth, maxCellHeight, aspectRatio);
+};
+var fitAspectRatio = (outerWidth, outerHeight, aspectRatio) => {
+  if (outerWidth <= 0 || outerHeight <= 0 || aspectRatio <= 0) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+  let width = outerWidth;
+  let height = width / aspectRatio;
+  if (height > outerHeight) {
+    height = outerHeight;
+    width = height * aspectRatio;
+  }
+  return {
+    width,
+    height
+  };
+};
+
+// src/components/ResponsiveGrid/ResponsiveGridItem.tsx
+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";
+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"),
+      classNames: "animate-pulse bg-orange-500"
+    },
+    mute: {
+      icon: "ph--microphone-slash--regular",
+      label: t("icon muted")
+    }
+  };
+  const props = wave && !pinned ? iconProps.wave : mute ? iconProps.mute : speaking ? iconProps.speaking : void 0;
+  const [speakingIndicator, setSpeakingIndicator] = useState2(speaking);
+  useEffect4(() => {
+    if (speaking) {
+      setSpeakingIndicator(true);
+    } else {
+      const timeout = setTimeout(() => {
+        setSpeakingIndicator(false);
+      }, 1e3);
+      return () => clearTimeout(timeout);
+    }
+  }, [
+    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),
+    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),
+    iconOnly: true,
+    icon: pinned ? "ph--x--regular" : "ph--arrows-out--regular",
+    size: pinned ? 5 : 4,
+    label: pinned ? t("icon unpin") : t("icon pin"),
+    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"
+  }, screenshare && /* @__PURE__ */ React5.createElement(Icon, {
+    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")
+  }, 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),
+    icon: props?.icon,
+    label: props?.label,
+    size: pinned ? 5 : 4,
+    iconOnly: true
+  })));
+};
+
+// src/components/Participant/Participant.tsx
+var SCREENSHARE_SUFFIX = "_screenshare";
+var Participant = /* @__PURE__ */ memo2(({ item: user, debug, ...props }) => {
+  const call = useCapability(ThreadCapabilities.CallManager);
+  const self = useAtomValue(call.selfAtom);
+  const media = useAtomValue(call.mediaAtom);
+  const isSelf = self.id !== void 0 && user.id !== void 0 && user.id.startsWith(self.id);
+  const isScreenshare = user.id?.endsWith(SCREENSHARE_SUFFIX);
+  const pulledVideoStream = useMemo2(() => {
+    if (isSelf) {
+      return void 0;
+    }
+    const trackName = isScreenshare && user.tracks?.screenshareEnabled ? user.tracks?.screenshare : !isScreenshare && user.tracks?.videoEnabled ? user.tracks?.video : void 0;
+    return trackName ? media.pulledVideoStreams[trackName]?.stream : void 0;
+  }, [
+    isSelf,
+    isScreenshare,
+    media.pulledVideoStreams,
+    user.tracks?.screenshare,
+    user.tracks?.video,
+    user.tracks?.screenshareEnabled,
+    user.tracks?.videoEnabled
+  ]);
+  const videoStream = useMemo2(() => {
+    if (isSelf) {
+      return isScreenshare ? media.screenshareVideoStream : media.videoStream;
+    }
+    return pulledVideoStream;
+  }, [
+    isSelf,
+    isScreenshare,
+    media.videoStream,
+    media.screenshareVideoStream,
+    pulledVideoStream
+  ]);
+  return /* @__PURE__ */ React6.createElement(ResponsiveGridItem, {
+    ...props,
+    item: user,
+    name: user.name,
+    self: isSelf,
+    screenshare: !!media.screenshareVideoStream,
+    video: media.videoEnabled,
+    mute: user ? !user.tracks?.audioEnabled : false,
+    wave: user.raisedHand,
+    speaking: user.speaking,
+    debug
+  }, /* @__PURE__ */ React6.createElement(VideoObject, {
+    videoStream,
+    flip: isSelf && !isScreenshare,
+    contain: !!isScreenshare,
+    classNames: "rounded-md"
+  }));
+});
+Participant.displayName = "Participant";
+
+// src/components/Participant/ParticipantGrid.tsx
+import React7, { useEffect as useEffect5, useMemo as useMemo3, useState as useState3 } from "react";
+var getId = (user) => user.id;
+var ParticipantGrid = ({ classNames, self, users, fullscreen, debug }) => {
+  const [pinned, setPinned] = useState3();
+  const allUsers = useMemo3(() => {
+    const allUsers2 = [];
+    users.forEach((user) => {
+      if (!user.joined) {
+        return;
+      }
+      allUsers2.push({
+        ...user,
+        isSelf: user.id === self.id
+      });
+      if (user.tracks?.screenshareEnabled) {
+        const screenshare = {
+          ...user,
+          id: user.id + SCREENSHARE_SUFFIX,
+          tracks: {
+            ...user.tracks,
+            video: user.tracks.screenshare,
+            videoEnabled: user.tracks.screenshareEnabled
+          }
+        };
+        allUsers2.push(screenshare);
+      }
+    });
+    return allUsers2;
+  }, [
+    self,
+    users
+  ]);
+  useEffect5(() => {
+    if (pinned) {
+      if (!allUsers.find((user) => user.id === pinned)) {
+        setPinned(void 0);
+      }
+    }
+  }, [
+    pinned,
+    allUsers
+  ]);
+  const sortedUsers = allUsers.sort((a, b) => {
+    if (a.isSelf) {
+      return 1;
+    } else if (b.isSelf) {
+      return -1;
+    } else if (a.tracks?.screenshareEnabled) {
+      return -1;
+    } else if (b.tracks?.screenshareEnabled) {
+      return 1;
+    } else {
+      return 0;
+    }
+  });
+  return /* @__PURE__ */ React7.createElement(ResponsiveGrid, {
+    classNames,
+    Cell: Participant,
+    debug,
+    getId,
+    items: sortedUsers,
+    pinned,
+    autoHideGallery: fullscreen,
+    onPinnedChange: setPinned
+  });
+};
+
+// src/components/Call/Toolbar.tsx
+import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
+import React8 from "react";
+import { useAppGraph, useCapability as useCapability2 } from "@dxos/app-framework/react";
+import { Obj } from "@dxos/echo";
+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";
+var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJoin, onLeave }) => {
+  const { t } = useTranslation2(meta.id);
+  const { graph } = useAppGraph();
+  const runAction = useActionRunner();
+  const call = useCapability2(ThreadCapabilities.CallManager);
+  const media = useAtomValue2(call.mediaAtom);
+  const joined = useAtomValue2(call.joinedAtom);
+  const raisedHand = useAtomValue2(call.raisedHandAtom);
+  const node = useNode(graph, channel && Obj.getDXN(channel).toString());
+  const actions = useActions(graph, node?.id).filter((action) => action.properties.disposition === "toolbar");
+  const isScreensharing = media.screenshareTrack !== void 0;
+  const canSharescreen = typeof navigator.mediaDevices !== "undefined" && navigator.mediaDevices.getDisplayMedia !== void 0;
+  return /* @__PURE__ */ React8.createElement("div", {
+    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",
+      classNames
+    ]
+  }, /* @__PURE__ */ React8.createElement(ToggleButton, {
+    active: media.audioEnabled,
+    state: {
+      on: {
+        icon: "ph--microphone--regular",
+        label: t("mic off"),
+        onClick: () => call.turnAudioOff(),
+        classNames: "bg-callActive"
+      },
+      off: {
+        icon: "ph--microphone-slash--duotone",
+        label: t("mic on"),
+        onClick: () => call.turnAudioOn(),
+        classNames: [
+          joined && "bg-callAlert"
+        ]
+      }
+    }
+  }), /* @__PURE__ */ React8.createElement(ToggleButton, {
+    active: media.videoEnabled,
+    state: {
+      on: {
+        icon: "ph--video-camera--regular",
+        label: t("camera off"),
+        onClick: () => call.turnVideoOff()
+      },
+      off: {
+        icon: "ph--video-camera-slash--duotone",
+        label: t("camera on"),
+        onClick: () => call.turnVideoOn()
+      }
+    }
+  }), participants !== void 0 && /* @__PURE__ */ React8.createElement("div", {
+    className: "flex justify-center items-center gap-2 is-[5rem] text-xs text-subdued"
+  }, /* @__PURE__ */ React8.createElement(Icon2, {
+    icon: "ph--users--regular",
+    size: 4
+  }), /* @__PURE__ */ React8.createElement("div", null, participants)) || /* @__PURE__ */ React8.createElement(NaturalToolbar.Separator, {
+    variant: "gap"
+  }), joined && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(ToggleButton, {
+    disabled: !canSharescreen,
+    active: isScreensharing,
+    state: {
+      on: {
+        icon: "ph--monitor--regular",
+        label: t("screenshare off"),
+        onClick: () => call.turnScreenshareOff()
+      },
+      off: {
+        icon: "ph--monitor-arrow-up--duotone",
+        label: t("screenshare on"),
+        onClick: () => call.turnScreenshareOn()
+      }
+    }
+  }), actions.filter((action) => Node.isAction(action)).map((action) => /* @__PURE__ */ React8.createElement(IconButton2, {
+    key: action.id,
+    ...defaultButtonProps,
+    icon: action.properties.icon,
+    label: toLocalizedString(action.properties.label, t),
+    classNames: action.properties.classNames,
+    onClick: () => node && void runAction(action, {
+      parent: node
+    })
+  })), /* @__PURE__ */ React8.createElement(ToggleButton, {
+    active: raisedHand,
+    state: {
+      on: {
+        icon: "ph--hand-waving--regular",
+        label: t("lower hand"),
+        onClick: () => call.setRaisedHand(false),
+        classNames: [
+          joined && "bg-callAlert"
+        ]
+      },
+      off: {
+        icon: "ph--hand-palm--duotone",
+        label: t("raise hand"),
+        onClick: () => call.setRaisedHand(true)
+      }
+    }
+  })), joined ? /* @__PURE__ */ React8.createElement(IconButton2, {
+    variant: "destructive",
+    icon: "ph--phone-x--regular",
+    label: t("leave call"),
+    onClick: onLeave
+  }) : /* @__PURE__ */ React8.createElement(IconButton2, {
+    variant: "primary",
+    icon: "ph--phone-incoming--regular",
+    label: t("join call"),
+    onClick: onJoin
+  })));
+};
+Toolbar.displayName = "MeetingToolbar";
+var defaultButtonProps = {
+  size: 5,
+  iconOnly: true
+};
+var ToggleButton = ({ active, state }) => /* @__PURE__ */ React8.createElement(IconButton2, {
+  ...defaultButtonProps,
+  classNames: [
+    active ? state.on.classNames ?? "bg-callActive" : state.off.classNames
+  ],
+  icon: active ? state.on.icon : state.off.icon,
+  label: active ? state.on.label : state.off.label,
+  onClick: active ? state.on.onClick : state.off.onClick
+});
+
+// src/components/Call/Call.tsx
+var CallRoot = ({ children }) => {
+  return /* @__PURE__ */ React9.createElement("div", {
+    className: "relative flex flex-col grow overflow-hidden"
+  }, children);
+};
+CallRoot.displayName = "CallRoot";
+var CallAudio = () => {
+  const call = useCapability3(ThreadCapabilities.CallManager);
+  const audioTracksToPlay = useAtomValue3(call.audioTracksToPlayAtom);
+  return /* @__PURE__ */ React9.createElement(AudioStream, {
+    tracks: audioTracksToPlay
+  });
+};
+CallAudio.displayName = "CallAudio";
+var CallGrid = ({ fullscreen }) => {
+  const debug = useDebugMode();
+  const call = useCapability3(ThreadCapabilities.CallManager);
+  const self = useAtomValue3(call.selfAtom);
+  const users = useAtomValue3(call.usersAtom);
+  return /* @__PURE__ */ React9.createElement("div", {
+    className: "grid grow p-4 dark:bg-neutral-900"
+  }, /* @__PURE__ */ React9.createElement(ParticipantGrid, {
+    self,
+    users,
+    debug,
+    fullscreen
+  }));
+};
+CallGrid.displayName = "CallGrid";
+var CallToolbar = (props) => {
+  return /* @__PURE__ */ React9.createElement("div", {
+    className: "absolute bottom-0 left-0 right-0 flex justify-center"
+  }, /* @__PURE__ */ React9.createElement(Toolbar, {
+    isInRoom: true,
+    ...props
+  }));
+};
+CallToolbar.displayName = "CallToolbar";
+var Call = {
+  Root: CallRoot,
+  Grid: CallGrid,
+  Audio: CallAudio,
+  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/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";
+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 { createBasicExtensions as createBasicExtensions2, createThemeExtensions as createThemeExtensions2, listener } from "@dxos/ui-editor";
+import { mx as mx8 } from "@dxos/ui-theme";
+import { isNonNullable } from "@dxos/util";
+
+// 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-baseText font-medium")
+  }
+]);
+var command = [
+  parser,
+  syntaxHighlighting(styles)
+];
+
+// 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 { Surface } from "@dxos/app-framework/react";
+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 { 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 MessageContainer = ({ message: messageOrRef, members, editable = false, onDelete, onAcceptProposal }) => {
+  const { t } = useTranslation4(meta.id);
+  const [message, updateMessage] = useObject(messageOrRef);
+  const identity = useIdentity();
+  const [editing, setEditing] = useState5(false);
+  const textBlockIndex = message?.blocks.findIndex((block) => block._tag === "text") ?? -1;
+  const handleEdit = useCallback2(() => setEditing((editing2) => !editing2), []);
+  const handleDelete = useCallback2(() => message && onDelete?.(message.id), [
+    message,
+    onDelete
+  ]);
+  const handleAcceptProposal = useCallback2(() => message && onAcceptProposal?.(message.id), [
+    message,
+    onAcceptProposal
+  ]);
+  const handleTextBlockChange = useCallback2((newText) => {
+    updateMessage((m) => {
+      const targetBlock = m.blocks[textBlockIndex];
+      if (targetBlock && targetBlock._tag === "text") {
+        targetBlock.text = newText;
+      }
+    });
+  }, [
+    updateMessage,
+    textBlockIndex
+  ]);
+  const textBlock = message && textBlockIndex !== -1 ? message.blocks[textBlockIndex] : void 0;
+  useOnEditAnalytics(message, textBlock, !!editing);
+  if (!message) {
+    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 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, {
+    ...messageMetadata,
+    classNames: [
+      hoverableControls,
+      hoverableFocusedWithinControls
+    ]
+  }, /* @__PURE__ */ React11.createElement(MessageHeading, {
+    authorName: messageMetadata.authorName,
+    timestamp: messageMetadata.timestamp
+  }, /* @__PURE__ */ React11.createElement("div", {
+    role: "none",
+    className: buttonGroupClassNames
+  }, userIsAuthor && editable && /* @__PURE__ */ React11.createElement(IconButton4, {
+    "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
+  }), proposalBlock && onAcceptProposal && /* @__PURE__ */ React11.createElement(IconButton4, {
+    "data-testid": "thread.message.accept",
+    variant: "ghost",
+    icon: "ph--check--regular",
+    iconOnly: true,
+    label: t("accept proposal label"),
+    classNames: [
+      buttonClassNames,
+      hoverableControlItem
+    ],
+    onClick: handleAcceptProposal
+  }), onDelete && /* @__PURE__ */ React11.createElement(IconButton4, {
+    "data-testid": "thread.message.delete",
+    variant: "ghost",
+    icon: "ph--x--regular",
+    iconOnly: true,
+    label: t("delete message label"),
+    classNames: [
+      buttonClassNames,
+      hoverableControlItem
+    ],
+    onClick: handleDelete
+  }))), textBlock && /* @__PURE__ */ React11.createElement(TextboxBlock, {
+    block: textBlock,
+    isAuthor: userIsAuthor,
+    editing,
+    onSave: handleTextBlockChange
+  }), proposalBlock && /* @__PURE__ */ React11.createElement(ProposalBlock, {
+    block: proposalBlock
+  }), Ref.Array.targets(references).map((reference, index) => /* @__PURE__ */ React11.createElement(MessagePart, {
+    key: index,
+    part: reference
+  })));
+};
+var MessagePart = ({ part }) => {
+  return /* @__PURE__ */ React11.createElement(MessageBlockObjectTile, {
+    subject: part
+  });
+};
+var TextboxBlock = ({ block, isAuthor, editing, onSave }) => {
+  const { themeMode } = useThemeContext();
+  const inMemoryContentRef = useRef3(block.text);
+  const handleDocumentChange = useCallback2((newState) => {
+    inMemoryContentRef.current = newState;
+  }, []);
+  const saveDocumentChange = useCallback2(() => {
+    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,
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          handleDocumentChange(update.state.doc.toString());
+        }
+      })
+    ]
+  }), [
+    block.text,
+    editing,
+    isAuthor,
+    themeMode,
+    handleDocumentChange
+  ]);
+  useEffect7(() => {
+    editing && view?.focus();
+  }, [
+    editing,
+    view
+  ]);
+  return /* @__PURE__ */ React11.createElement("div", {
+    role: "none",
+    ref: parentRef,
+    className: "mie-4",
+    ...focusAttributes
+  });
+};
+var ProposalBlock = ({ block }) => {
+  return /* @__PURE__ */ React11.createElement("div", {
+    role: "none",
+    className: "mie-4 italic"
+  }, block.text);
+};
+var MessageBlockObjectTile = /* @__PURE__ */ forwardRef2(({ subject }, forwardedRef) => {
+  let title = subject.name ?? subject.title ?? subject.type ?? "Object";
+  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),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React11.createElement(Surface, {
+    role: "card-content",
+    limit: 1,
+    data: {
+      subject
+    },
+    fallback: title
+  }));
+});
+
+// src/components/ChatContainer.tsx
+var ChatContainer = ({ classNames, space, thread, context, current, autoFocusTextbox }) => {
+  const { t } = useTranslation5(meta.id);
+  const id = Obj2.getDXN(thread).toString();
+  const identity = useIdentity2();
+  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 threadScrollRef = useRef4(null);
+  const { themeMode } = useThemeContext2();
+  const textboxMetadata = getMessageMetadata(id, identity);
+  const messageRef = useRef4("");
+  const extensions = useMemo5(() => [
+    createBasicExtensions2({
+      placeholder: t("message placeholder")
+    }),
+    createThemeExtensions2({
+      themeMode
+    }),
+    listener({
+      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;
+    }
+    thread.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, {
+    classNames: "col-span-2"
+  }, /* @__PURE__ */ React12.createElement(ScrollArea.Viewport, {
+    classNames: "overflow-anchored after:overflow-anchor after:block after:bs-px after:-mbs-px [&>div]:min-bs-full [&>div]:!grid [&>div]:grid-rows-[1fr_0]"
+  }, /* @__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(ScrollArea.Scrollbar, null, /* @__PURE__ */ React12.createElement(ScrollArea.Thumb, null))), /* @__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/react";
+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 { ControlGroup, ControlGroupButton, ControlItemInput } 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: 55
+    });
+    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: 99,
+        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: 111,
+        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(ControlGroup, {
+    classNames: "p-4 place-content-center"
+  }, /* @__PURE__ */ React13.createElement(ControlItemInput, {
+    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(ControlGroupButton, {
+    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/react";
+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 { Common } from "@dxos/app-framework";
+import { useCapabilities as useCapabilities2, useCapability as useCapability6, useOperationInvoker } from "@dxos/app-framework/react";
+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 { useAttended } from "@dxos/react-ui-attention";
+import { Layout } from "@dxos/react-ui-mosaic";
+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
+  ]);
+  const scrollToEnd = (behavior) => setTimeout(() => threadScrollRef.current?.scrollIntoView({
+    behavior,
+    block: "end"
+  }), 10);
+  const handleAttend = useCallback4(() => onAttend?.(anchor), [
+    onAttend,
+    anchor
+  ]);
+  const handleResolve = useCallback4(() => onResolve?.(anchor), [
+    onResolve,
+    anchor
+  ]);
+  const handleMessageDelete = useCallback4((id) => onMessageDelete?.(anchor, id), [
+    onMessageDelete,
+    anchor
+  ]);
+  const handleThreadDelete = useCallback4(() => onThreadDelete?.(anchor), [
+    onThreadDelete,
+    anchor
+  ]);
+  const handleAcceptProposal = useCallback4((id) => onAcceptProposal?.(anchor, id), [
+    onAcceptProposal,
+    anchor
+  ]);
+  const handleComment = useCallback4(() => {
+    if (!messageRef.current) {
+      return false;
+    }
+    onComment?.(anchor, messageRef.current);
+    messageRef.current = "";
+    scrollToEnd("instant");
+    setState({});
+    return true;
+  }, [
+    anchor,
+    identity
+  ]);
+  return /* @__PURE__ */ React15.createElement(ThreadComponent2.Root, {
+    id: Obj4.getDXN(thread).toString(),
+    classNames: "pbs-2 border-be border-subduedSeparator last:border-none",
+    current,
+    onClickCapture: handleAttend,
+    onFocusCapture: handleAttend
+  }, /* @__PURE__ */ React15.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, {
+    asChild: true,
+    content: t("detached thread label"),
+    side: "top"
+  }, /* @__PURE__ */ React15.createElement(ThreadComponent2.Header, {
+    detached: true
+  }, thread.name)) : /* @__PURE__ */ React15.createElement(ThreadComponent2.Header, null, thread.name), /* @__PURE__ */ React15.createElement("div", {
+    role: "none",
+    className: buttonGroupClassNames
+  }, thread.status === "staged" && /* @__PURE__ */ React15.createElement(Tag, {
+    palette: "neutral"
+  }, t("draft button")), onResolve && !(thread?.status === "staged") && /* @__PURE__ */ React15.createElement(IconButton5, {
+    "data-testid": "thread.resolve",
+    variant: "ghost",
+    icon: thread?.status === "resolved" ? "ph--check--fill" : "ph--check--regular",
+    iconOnly: true,
+    label: t("resolve thread label"),
+    classNames: [
+      buttonClassNames,
+      thread?.status !== "resolved" && hoverableControlItem2
+    ],
+    onClick: handleResolve
+  }), onThreadDelete && /* @__PURE__ */ React15.createElement(IconButton5, {
+    "data-testid": "thread.delete",
+    variant: "ghost",
+    icon: "ph--x--regular",
+    iconOnly: true,
+    label: t("delete thread label"),
+    classNames: [
+      buttonClassNames,
+      hoverableControlItem2
+    ],
+    onClick: handleThreadDelete
+  }))), messages?.map((ref) => /* @__PURE__ */ React15.createElement(MessageContainer, {
+    key: ref.dxn.toString(),
+    editable: true,
+    message: ref,
+    members,
+    onDelete: handleMessageDelete,
+    onAcceptProposal: handleAcceptProposal
+  })), /* @__PURE__ */ React15.createElement(MessageTextbox2, {
+    extensions,
+    onSend: handleComment,
+    ...textboxMetadata
+  }), /* @__PURE__ */ React15.createElement(ThreadComponent2.Status, {
+    activity
+  }, t("activity message")), /* @__PURE__ */ React15.createElement("div", {
+    role: "none",
+    className: "bs-px -mbs-px",
+    ref: threadScrollRef
+  }));
+};
+
+// src/components/CommentsContainer.tsx
+var CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props }) => {
+  const { t } = useTranslation8(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(() => {
+    if (currentId) {
+      document.getElementById(currentId)?.scrollIntoView({
+        behavior: "smooth",
+        block: "end"
+      });
+    }
+  }, [
+    currentId
+  ]);
+  if (filteredAnchors.length === 0) {
+    return /* @__PURE__ */ React16.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, {
+      t,
+      i18nKey: "no comments message",
+      components: {
+        commentIcon: /* @__PURE__ */ React16.createElement(Icon4, {
+          icon: "ph--chat-text--regular",
+          size: 4,
+          classNames: "inline-block"
+        })
+      }
+    }))));
+  }
+  return /* @__PURE__ */ React16.createElement("div", null, filteredAnchors.map((anchor) => {
+    const thread = Relation2.getSource(anchor);
+    const threadId = Obj5.getDXN(thread).toString();
+    return /* @__PURE__ */ React16.createElement(CommentsThreadContainer, {
+      key: threadId,
+      anchor,
+      current: currentId === threadId,
+      ...props
+    });
+  }));
+};
+
+// src/components/ThreadSettings.tsx
+import React17 from "react";
+import { useTranslation as useTranslation9 } from "@dxos/react-ui";
+import { ControlPage } from "@dxos/react-ui-form";
+var ThreadSettings = ({ settings: _settings }) => {
+  const { t: _t } = useTranslation9(meta.id);
+  return /* @__PURE__ */ React17.createElement(ControlPage, 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(Common.Capability.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(Common.Capability.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(Common.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(Common.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
+};
+//# sourceMappingURL=chunk-VZICDGBW.mjs.map