@dxos/plugin-thread 0.8.4-main.f9ba587 → 0.8.4-main.fcc0d83b33

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

@@ -1,984 +0,0 @@
-import {
-  ThreadCapabilities
-} from "./chunk-LGSDKXPF.mjs";
-import {
-  ChatContainer_default
-} from "./chunk-NCSFNWBZ.mjs";
-import {
-  useDebugMode
-} from "./chunk-ERWASUQK.mjs";
-import {
-  meta
-} from "./chunk-EV4JWI7L.mjs";
-
-// 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 { failUndefined } from "@dxos/debug";
-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";
-
-// 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";
-
-// 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 { groupHoverControlItemWithTransition, mx } from "@dxos/react-ui-theme";
-var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJoin, onLeave }) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation(meta.id);
-    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 && groupHoverControlItemWithTransition)
-    }, /* @__PURE__ */ React.createElement(NativeToolbar.Root, {
-      classNames: [
-        "p-2 bg-modalSurface rounded-md shadow-md",
-        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();
-  }
-};
-
-// 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;
-};
-
-// 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";
-
-// 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";
-
-// 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();
-  }
-};
-
-// 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 = "/__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 = "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
-  };
-};
-
-// 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 { groupHoverControlItemWithTransition as groupHoverControlItemWithTransition2, 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(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__ */ 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", groupHoverControlItemWithTransition2),
-      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();
-  }
-};
-
-// 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";
-
-// 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();
-  }
-};
-
-// 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.audioTracksToPlay
-    });
-  } 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
-};
-
-// src/components/ChannelContainer.tsx
-var __dxlog_file2 = "/__w/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 = _roomId ?? (channel ? fullyQualifiedId2(channel) : failUndefined());
-    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: 48
-      });
-      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: 92,
-          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: 104,
-          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(meta.id);
-    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(() => {
-    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, classNames }) => {
-  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, {
-      classNames
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-
-export {
-  Call,
-  ChannelContainer,
-  ChannelContainer_default
-};
-//# sourceMappingURL=chunk-LCJD3NOB.mjs.map