@dxos/plugin-thread 0.8.1 → 0.8.2-main.10c050d

package/dist/lib/browser/chunk-5PGLGDIP.mjs

@@ -0,0 +1,983 @@
+import {
+  ThreadCapabilities
+} from "./chunk-R5MDLUPC.mjs";
+import {
+  ChatContainer_default
+} from "./chunk-G3TS64FP.mjs";
+import {
+  useDebugMode
+} from "./chunk-5P5BH5GE.mjs";
+import {
+  THREAD_PLUGIN
+} from "./chunk-IIUTBDVB.mjs";
+
+// packages/plugins/plugin-thread/src/components/ChannelContainer.tsx
+import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
+import { Rx } from "@effect-rx/rx-react";
+import React10, { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo4, useState as useState4 } from "react";
+import { useCapabilities, useCapability as useCapability4 } from "@dxos/app-framework";
+import { Context } from "@dxos/context";
+import { log } from "@dxos/log";
+import { useClient } from "@dxos/react-client";
+import { fullyQualifiedId as fullyQualifiedId2, getSpace } from "@dxos/react-client/echo";
+import { useIdentity } from "@dxos/react-client/halo";
+import { useTranslation as useTranslation3, Input, ElevationProvider } from "@dxos/react-ui";
+import { ControlGroup, ControlItemInput, ControlGroupButton } from "@dxos/react-ui-form";
+import { ToolbarMenu, MenuProvider, createMenuAction, useMenuActions, createMenuItemGroup } from "@dxos/react-ui-menu";
+import { useSoundEffect } from "@dxos/react-ui-sfx";
+import { StackItem } from "@dxos/react-ui-stack";
+
+// packages/plugins/plugin-thread/src/components/Call/Call.tsx
+import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
+import React9 from "react";
+import { useCapability as useCapability3 } from "@dxos/app-framework";
+
+// packages/plugins/plugin-thread/src/components/Call/Toolbar.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import React from "react";
+import { useAppGraph, useCapability } from "@dxos/app-framework";
+import { useNode, useActions } from "@dxos/plugin-graph";
+import { fullyQualifiedId } from "@dxos/react-client/echo";
+import { Icon, IconButton, Toolbar as NativeToolbar, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { hoverableHidden, mx } from "@dxos/react-ui-theme";
+var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJoin, onLeave }) => {
+  var _effect = _useSignals();
+  try {
+    const { t } = useTranslation(THREAD_PLUGIN);
+    const { graph } = useAppGraph();
+    const call = useCapability(ThreadCapabilities.CallManager);
+    const node = useNode(graph, channel && fullyQualifiedId(channel));
+    const actions = useActions(graph, node?.id).filter((action) => action.properties.disposition === "toolbar");
+    const isScreensharing = call.media.screenshareTrack !== void 0;
+    const canSharescreen = typeof navigator.mediaDevices !== "undefined" && navigator.mediaDevices.getDisplayMedia !== void 0;
+    return /* @__PURE__ */ React.createElement("div", {
+      className: mx("z-20 flex justify-center m-8", autoHideControls && hoverableHidden)
+    }, /* @__PURE__ */ React.createElement(NativeToolbar.Root, {
+      classNames: [
+        "p-2 bg-modalSurface rounded-lg shadow-lg",
+        classNames
+      ]
+    }, /* @__PURE__ */ React.createElement(ToggleButton, {
+      active: call.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: [
+            call.joined && "bg-callAlert"
+          ]
+        }
+      }
+    }), /* @__PURE__ */ React.createElement(ToggleButton, {
+      active: call.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__ */ React.createElement("div", {
+      className: "flex justify-center items-center gap-2 is-[5rem] text-xs text-subdued"
+    }, /* @__PURE__ */ React.createElement(Icon, {
+      icon: "ph--users--regular",
+      size: 4
+    }), /* @__PURE__ */ React.createElement("div", null, participants)) || /* @__PURE__ */ React.createElement(NativeToolbar.Separator, {
+      variant: "gap"
+    }), call.joined && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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.map((action) => /* @__PURE__ */ React.createElement(IconButton, {
+      key: action.id,
+      ...defaultButtonProps,
+      icon: action.properties.icon,
+      label: toLocalizedString(action.properties.label, t),
+      classNames: action.properties.classNames,
+      onClick: () => action.data({
+        node
+      })
+    })), /* @__PURE__ */ React.createElement(ToggleButton, {
+      active: call.raisedHand,
+      state: {
+        on: {
+          icon: "ph--hand-waving--regular",
+          label: t("lower hand"),
+          onClick: () => call.setRaisedHand(false),
+          classNames: [
+            call.joined && "bg-callAlert"
+          ]
+        },
+        off: {
+          icon: "ph--hand-palm--duotone",
+          label: t("raise hand"),
+          onClick: () => call.setRaisedHand(true)
+        }
+      }
+    })), call.joined ? /* @__PURE__ */ React.createElement(IconButton, {
+      variant: "destructive",
+      icon: "ph--phone-x--regular",
+      label: t("leave call"),
+      onClick: onLeave
+    }) : /* @__PURE__ */ React.createElement(IconButton, {
+      variant: "primary",
+      icon: "ph--phone-incoming--regular",
+      label: t("join call"),
+      onClick: onJoin
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+Toolbar.displayName = "MeetingToolbar";
+var defaultButtonProps = {
+  size: 5,
+  iconOnly: true
+};
+var ToggleButton = ({ active, state }) => {
+  var _effect = _useSignals();
+  try {
+    return /* @__PURE__ */ React.createElement(IconButton, {
+      ...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
+    });
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/plugins/plugin-thread/src/components/Media/AudioStream.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import React2, { useEffect, useRef } from "react";
+var AudioStream = ({ tracks }) => {
+  var _effect = _useSignals2();
+  try {
+    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__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("audio", {
+      ref,
+      autoPlay: true
+    }), tracks.map((track) => /* @__PURE__ */ React2.createElement(AudioTrack, {
+      key: track.id,
+      track,
+      mediaStream: mediaStreamRef.current,
+      resetSrcObject
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+var AudioTrack = ({ track, mediaStream, resetSrcObject }) => {
+  useEffect(() => {
+    const currentTrack = track;
+    mediaStream.addTrack(currentTrack);
+    resetSrcObject();
+    return () => {
+      mediaStream.removeTrack(currentTrack);
+      resetSrcObject();
+    };
+  }, [
+    track,
+    mediaStream
+  ]);
+  return null;
+};
+
+// packages/plugins/plugin-thread/src/components/Media/VideoObject.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React3, { forwardRef, memo, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { mx as mx2 } from "@dxos/react-ui-theme";
+var VideoObject = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ videoStream, classNames, flip, contain, ...rest }, ref) => {
+  var _effect = _useSignals3();
+  try {
+    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__ */ React3.createElement("video", {
+      className: mx2("w-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
+    });
+  } finally {
+    _effect.f();
+  }
+}));
+VideoObject.displayName = "VideoObject";
+
+// packages/plugins/plugin-thread/src/components/Participant/Participant.tsx
+import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
+import React7, { memo as memo2, useMemo as useMemo2 } from "react";
+import { useCapability as useCapability2 } from "@dxos/app-framework";
+
+// packages/plugins/plugin-thread/src/components/ResponsiveGrid/ResponsiveContainer.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+import React4 from "react";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var ResponsiveContainer = ({ children }) => {
+  var _effect = _useSignals4();
+  try {
+    return (
+      // Outer container that takes full size of parent.
+      /* @__PURE__ */ React4.createElement("div", {
+        role: "none",
+        className: "relative flex w-full h-full"
+      }, /* @__PURE__ */ React4.createElement("div", {
+        role: "none",
+        className: "absolute inset-0 flex justify-center items-center"
+      }, /* @__PURE__ */ React4.createElement("div", {
+        role: "none",
+        className: mx3("max-h-full max-w-full w-auto h-auto aspect-video")
+      }, children)))
+    );
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/plugins/plugin-thread/src/components/ResponsiveGrid/ResponsiveGrid.tsx
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
+import React5, { useLayoutEffect, useState, useEffect as useEffect3, useMemo, useCallback } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { invariant } from "@dxos/invariant";
+import { mx as mx4 } from "@dxos/react-ui-theme";
+var __dxlog_file = "/home/runner/work/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 = "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 }) => {
+  var _effect = _useSignals5();
+  try {
+    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__ */ React5.createElement("div", {
+      ref: containerRef,
+      className: mx4("relative w-full h-full", classNames)
+    }, /* @__PURE__ */ React5.createElement("div", {
+      className: "absolute inset-0 flex flex-col grow gap-2"
+    }, pinnedItem && /* @__PURE__ */ React5.createElement("div", {
+      className: mx4("flex grow-[2] shrink overflow-hidden justify-center items-center", hideGallery && "h-full"),
+      style: hideGallery ? {} : {
+        height: dividerHeight
+      }
+    }, /* @__PURE__ */ React5.createElement(SoloItem, {
+      id: getId2(pinnedItem),
+      debug
+    })), !hideGallery && /* @__PURE__ */ React5.createElement("div", {
+      ref: gridContainerRef,
+      className: "flex grow-[1] overflow-hidden justify-center items-center",
+      style: hideGallery ? {} : {
+        minHeight: MIN_GALLERY_HEIGHT
+      }
+    }, mainItems.length === 1 && /* @__PURE__ */ React5.createElement("div", {
+      style: {
+        width: cellWidth
+      },
+      className: "flex h-full"
+    }, /* @__PURE__ */ React5.createElement(SoloItem, {
+      id: getId2(mainItems[0]),
+      debug
+    })), mainItems.length > 1 && columns > 0 && /* @__PURE__ */ React5.createElement("div", {
+      role: "grid",
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns}, ${cellWidth}px)`,
+        gap: `${gap}px`
+      }
+    }, mainItems.map((item) => /* @__PURE__ */ React5.createElement("div", {
+      key: getId2(item),
+      "data-grid-item": getId2(item),
+      className: mx4("aspect-video max-h-full max-w-full w-auto h-auto", debug && "border border-primary-500")
+    }))))), /* @__PURE__ */ React5.createElement("div", {
+      className: mx4(debug && "opacity-10")
+    }, bounds.map(([item, bounds2]) => /* @__PURE__ */ React5.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
+    }))));
+  } finally {
+    _effect.f();
+  }
+};
+var SoloItem = ({ debug, id }) => {
+  var _effect = _useSignals5();
+  try {
+    return /* @__PURE__ */ React5.createElement(ResponsiveContainer, null, /* @__PURE__ */ React5.createElement("div", {
+      "data-grid-item": id,
+      className: mx4("aspect-video overflow-hidden", debug && "z-20 border-2 border-primary-500")
+    }, /* @__PURE__ */ React5.createElement("img", {
+      alt: "placeholder video",
+      className: mx4("opacity-0", maxImageSize)
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+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
+  };
+};
+
+// packages/plugins/plugin-thread/src/components/ResponsiveGrid/ResponsiveGridItem.tsx
+import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
+import React6, { useEffect as useEffect4, useState as useState2 } from "react";
+import { Icon as Icon2, IconButton as IconButton2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Waveform } from "@dxos/react-ui-sfx";
+import { hoverableHidden as hoverableHidden2, mx as mx5 } from "@dxos/react-ui-theme";
+var ResponsiveGridItem = ({ children, classNames, item, style, name, self, pinned, screenshare, video, mute, wave, speaking, onClick }) => {
+  var _effect = _useSignals6();
+  try {
+    const { t } = useTranslation2(THREAD_PLUGIN);
+    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__ */ React6.createElement("div", {
+      className: mx5("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__ */ React6.createElement("div", {
+      className: "z-10 absolute top-1 right-1 flex"
+    }, /* @__PURE__ */ React6.createElement(IconButton2, {
+      classNames: mx5("p-1 min-bs-1 rounded", hoverableHidden2),
+      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__ */ React6.createElement("div", {
+      className: "z-10 absolute bottom-1 left-8 right-1 flex justify-end gap-1 items-center"
+    }, screenshare && /* @__PURE__ */ React6.createElement(Icon2, {
+      icon: "ph--broadcast--regular",
+      size: pinned ? 5 : 4
+    }), /* @__PURE__ */ React6.createElement("div", {
+      className: mx5("bg-neutral-800 text-neutral-100 py-0.5 truncate rounded", pinned ? "px-2" : "px-1 text-xs")
+    }, name)), /* @__PURE__ */ React6.createElement("div", {
+      className: "z-10 absolute bottom-1 left-1 flex"
+    }, speaking && /* @__PURE__ */ React6.createElement(Waveform, {
+      active: true,
+      size: pinned ? 5 : 4
+    }) || props && /* @__PURE__ */ React6.createElement(IconButton2, {
+      classNames: mx5("p-1 min-bs-1 rounded", props?.classNames),
+      icon: props?.icon,
+      label: props?.label,
+      size: pinned ? 5 : 4,
+      iconOnly: true
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/plugins/plugin-thread/src/components/Participant/Participant.tsx
+var SCREENSHARE_SUFFIX = "_screenshare";
+var Participant = /* @__PURE__ */ memo2(({ item: user, debug, ...props }) => {
+  var _effect = _useSignals7();
+  try {
+    const call = useCapability2(ThreadCapabilities.CallManager);
+    const isSelf = call.self.id !== void 0 && user.id !== void 0 && user.id.startsWith(call.self.id);
+    const isScreenshare = user.id?.endsWith(SCREENSHARE_SUFFIX);
+    const pulledVideoStream = call.getVideoStream(isScreenshare || !isSelf ? user.tracks?.video : void 0);
+    const videoStream = useMemo2(() => {
+      if (isSelf && !isScreenshare) {
+        return call.media.videoStream;
+      } else if (isSelf && isScreenshare) {
+        return call.media.screenshareVideoStream;
+      } else if (!isSelf) {
+        return pulledVideoStream;
+      }
+    }, [
+      isSelf,
+      isScreenshare,
+      call.media.videoStream,
+      call.media.screenshareVideoStream,
+      pulledVideoStream
+    ]);
+    return /* @__PURE__ */ React7.createElement(ResponsiveGridItem, {
+      ...props,
+      item: user,
+      name: user.name,
+      self: isSelf,
+      screenshare: !!call.media.screenshareVideoStream,
+      video: call.media.videoEnabled,
+      mute: user ? !user.tracks?.audioEnabled : false,
+      wave: user.raisedHand,
+      speaking: user.speaking,
+      debug
+    }, /* @__PURE__ */ React7.createElement(VideoObject, {
+      videoStream,
+      flip: isSelf && !isScreenshare,
+      contain: !!isScreenshare,
+      classNames: "rounded-md"
+    }));
+  } finally {
+    _effect.f();
+  }
+});
+Participant.displayName = "Participant";
+
+// packages/plugins/plugin-thread/src/components/Participant/ParticipantGrid.tsx
+import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
+import React8, { useEffect as useEffect5, useMemo as useMemo3, useState as useState3 } from "react";
+var getId = (user) => user.id;
+var ParticipantGrid = ({ classNames, self, users, fullscreen, debug }) => {
+  var _effect = _useSignals8();
+  try {
+    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__ */ React8.createElement(ResponsiveGrid, {
+      classNames,
+      Cell: Participant,
+      debug,
+      getId,
+      items: sortedUsers,
+      pinned,
+      autoHideGallery: fullscreen,
+      onPinnedChange: setPinned
+    });
+  } finally {
+    _effect.f();
+  }
+};
+
+// packages/plugins/plugin-thread/src/components/Call/Call.tsx
+var CallRoot = ({ children }) => {
+  var _effect = _useSignals9();
+  try {
+    return /* @__PURE__ */ React9.createElement("div", {
+      className: "relative flex flex-col grow overflow-hidden"
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+CallRoot.displayName = "CallRoot";
+var CallAudio = () => {
+  var _effect = _useSignals9();
+  try {
+    const call = useCapability3(ThreadCapabilities.CallManager);
+    return /* @__PURE__ */ React9.createElement(AudioStream, {
+      tracks: call.pulledAudioTracks
+    });
+  } finally {
+    _effect.f();
+  }
+};
+CallAudio.displayName = "CallAudio";
+var CallGrid = ({ fullscreen }) => {
+  var _effect = _useSignals9();
+  try {
+    const debug = useDebugMode();
+    const call = useCapability3(ThreadCapabilities.CallManager);
+    return /* @__PURE__ */ React9.createElement("div", {
+      className: "grid grow p-4 dark:bg-neutral-900"
+    }, /* @__PURE__ */ React9.createElement(ParticipantGrid, {
+      self: call.self,
+      users: call.users,
+      debug,
+      fullscreen
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+CallGrid.displayName = "CallGrid";
+var CallToolbar = (props) => {
+  var _effect = _useSignals9();
+  try {
+    return /* @__PURE__ */ React9.createElement("div", {
+      className: "absolute bottom-0 left-0 right-0 flex justify-center"
+    }, /* @__PURE__ */ React9.createElement(Toolbar, {
+      isInRoom: true,
+      ...props
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+CallToolbar.displayName = "CallToolbar";
+var Call = {
+  Root: CallRoot,
+  Grid: CallGrid,
+  Audio: CallAudio,
+  Toolbar: CallToolbar
+};
+
+// packages/plugins/plugin-thread/src/components/ChannelContainer.tsx
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/plugins/plugin-thread/src/components/ChannelContainer.tsx";
+var ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }) => {
+  var _effect = _useSignals10();
+  try {
+    const space = getSpace(channel);
+    const callManager = useCapability4(ThreadCapabilities.CallManager);
+    const roomId = channel ? fullyQualifiedId2(channel) : _roomId;
+    const identity = useIdentity();
+    const isNamed = !!identity?.profile?.displayName;
+    const joinSound = useSoundEffect("JoinCall");
+    const leaveSound = useSoundEffect("LeaveCall");
+    const extensions = useCapabilities(ThreadCapabilities.CallExtension);
+    useEffect6(() => {
+      const ctx = new Context(void 0, {
+        F: __dxlog_file2,
+        L: 47
+      });
+      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 = useCallback2(async () => {
+      if (!roomId || !channel) {
+        return;
+      }
+      if (callManager.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) {
+        log.catch(err, void 0, {
+          F: __dxlog_file2,
+          L: 91,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+      }
+    }, [
+      extensions,
+      channel,
+      roomId
+    ]);
+    const handleLeave = useCallback2(async () => {
+      try {
+        void leaveSound.play();
+      } catch (err) {
+        log.catch(err, void 0, {
+          F: __dxlog_file2,
+          L: 103,
+          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 = callManager.joined && callManager.roomId === roomId;
+    return /* @__PURE__ */ React10.createElement(StackItem.Content, {
+      toolbar: !isJoined,
+      classNames: isJoined && "h-full"
+    }, isJoined && !isNamed && /* @__PURE__ */ React10.createElement(DisplayNameMissing, null), isJoined && isNamed && /* @__PURE__ */ React10.createElement(Call.Root, null, /* @__PURE__ */ React10.createElement(Call.Grid, {
+      fullscreen
+    }), /* @__PURE__ */ React10.createElement(Call.Toolbar, {
+      channel,
+      onLeave: handleLeave
+    })), !isJoined && channel && channel.defaultThread.target && space && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(ChannelToolbar, {
+      attendableId: fullyQualifiedId2(channel),
+      role,
+      onJoinCall: handleJoin
+    }), /* @__PURE__ */ React10.createElement(ChatContainer_default, {
+      space,
+      thread: channel.defaultThread.target
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+var ChannelContainer_default = ChannelContainer;
+var DisplayNameMissing = () => {
+  var _effect = _useSignals10();
+  try {
+    const { t } = useTranslation3(THREAD_PLUGIN);
+    const client = useClient();
+    const [displayName, setDisplayName] = useState4("");
+    const handleChange = useCallback2((event) => setDisplayName(event.target.value), []);
+    const handleSave = useCallback2(() => client.halo.updateProfile({
+      displayName
+    }), [
+      client,
+      displayName
+    ]);
+    return /* @__PURE__ */ React10.createElement(ControlGroup, {
+      classNames: "p-4 place-content-center"
+    }, /* @__PURE__ */ React10.createElement(ControlItemInput, {
+      title: t("display name label"),
+      description: t("display name description")
+    }, /* @__PURE__ */ React10.createElement(Input.TextInput, {
+      value: displayName,
+      onChange: handleChange,
+      placeholder: t("display name input placeholder"),
+      classNames: "md:min-is-64"
+    })), /* @__PURE__ */ React10.createElement(ControlGroupButton, {
+      disabled: !displayName,
+      onClick: handleSave
+    }, t("set display name label")));
+  } finally {
+    _effect.f();
+  }
+};
+var useChannelToolbarActions = (onJoinCall) => {
+  const creator = useMemo4(() => Rx.make(() => {
+    const nodes = [];
+    const edges = [];
+    const rootGroup = createMenuItemGroup("root", {
+      label: [
+        "channel toolbar title",
+        {
+          ns: THREAD_PLUGIN
+        }
+      ]
+    });
+    nodes.push(rootGroup);
+    const sortAction = createMenuAction("video-call", () => onJoinCall?.(), {
+      label: [
+        "start video call label",
+        {
+          ns: THREAD_PLUGIN
+        }
+      ],
+      icon: "ph--video-camera--regular",
+      type: "video-call"
+    });
+    nodes.push(sortAction);
+    edges.push({
+      source: "root",
+      target: sortAction.id
+    });
+    return {
+      nodes,
+      edges
+    };
+  }), []);
+  return useMenuActions(creator);
+};
+var ChannelToolbar = ({ attendableId, role, onJoinCall }) => {
+  var _effect = _useSignals10();
+  try {
+    const menuProps = useChannelToolbarActions(onJoinCall);
+    return /* @__PURE__ */ React10.createElement(ElevationProvider, {
+      elevation: role === "section" ? "positioned" : "base"
+    }, /* @__PURE__ */ React10.createElement(MenuProvider, {
+      ...menuProps,
+      attendableId
+    }, /* @__PURE__ */ React10.createElement(ToolbarMenu, null)));
+  } finally {
+    _effect.f();
+  }
+};
+
+export {
+  Call,
+  ChannelContainer,
+  ChannelContainer_default
+};
+//# sourceMappingURL=chunk-5PGLGDIP.mjs.map