@dxos/plugin-thread 0.8.4-main.67995b8 → 0.8.4-main.c4373fc

package/dist/lib/node-esm/{chunk-C3XFMUAY.mjs → chunk-2KZ4ODHU.mjs}

@@ -1,16 +1,16 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 import {
   ThreadCapabilities
-} from "./chunk-75RJ5DJI.mjs";
+} from "./chunk-LCHTNRK7.mjs";
 import {
   ChatContainer_default
-} from "./chunk-2MFNK53T.mjs";
+} from "./chunk-BTGKI5IK.mjs";
 import {
   useDebugMode
-} from "./chunk-25ABSYP2.mjs";
+} from "./chunk-2MMJF7DW.mjs";
 import {
   meta
-} from "./chunk-GRLRWTRU.mjs";
+} from "./chunk-OBVAURUU.mjs";
 
 // src/components/ChannelContainer.tsx
 import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
@@ -23,9 +23,9 @@ 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 { ElevationProvider, Input, useTranslation as useTranslation3 } 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 } from "@dxos/react-ui-stack";
 
@@ -34,153 +34,11 @@ 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";
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+import React, { useEffect, useRef } from "react";
 var AudioStream = ({ tracks }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
     const mediaStreamRef = useRef(new MediaStream());
     const ref = useRef(null);
@@ -203,10 +61,10 @@ var AudioStream = ({ tracks }) => {
       });
       audio.srcObject = mediaStream;
     };
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("audio", {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("audio", {
       ref,
       autoPlay: true
-    }), tracks.map((track) => /* @__PURE__ */ React2.createElement(AudioTrack, {
+    }), tracks.map((track) => /* @__PURE__ */ React.createElement(AudioTrack, {
       key: track.id,
       track,
       mediaStream: mediaStreamRef.current,
@@ -233,11 +91,11 @@ var AudioTrack = ({ track, mediaStream, resetSrcObject }) => {
 };
 
 // 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";
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import React2, { forwardRef, memo, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { mx } from "@dxos/react-ui-theme";
 var VideoObject = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ videoStream, classNames, flip, contain, ...rest }, ref) => {
-  var _effect = _useSignals3();
+  var _effect = _useSignals2();
   try {
     const internalRef = useRef2(null);
     useEffect2(() => {
@@ -251,8 +109,8 @@ var VideoObject = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ videoStream
       videoStream,
       internalRef.current
     ]);
-    return /* @__PURE__ */ React3.createElement("video", {
-      className: mx2("w-full aspect-video", flip && "scale-x-[-1]", contain ? "object-contain" : "object-cover", classNames),
+    return /* @__PURE__ */ React2.createElement("video", {
+      className: mx("w-full aspect-video", flip && "scale-x-[-1]", contain ? "object-contain" : "object-cover", classNames),
       ref: (v) => {
         internalRef.current = v;
         if (ref === null) {
@@ -273,28 +131,28 @@ var VideoObject = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ videoStream
 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";
+import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
+import React6, { memo as memo2, useMemo as useMemo2 } from "react";
+import { useCapability } 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";
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React3 from "react";
+import { mx as mx2 } from "@dxos/react-ui-theme";
 var ResponsiveContainer = ({ children }) => {
-  var _effect = _useSignals4();
+  var _effect = _useSignals3();
   try {
     return (
       // Outer container that takes full size of parent.
-      /* @__PURE__ */ React4.createElement("div", {
+      /* @__PURE__ */ React3.createElement("div", {
         role: "none",
         className: "relative flex w-full h-full"
-      }, /* @__PURE__ */ React4.createElement("div", {
+      }, /* @__PURE__ */ React3.createElement("div", {
         role: "none",
         className: "absolute inset-0 flex justify-center items-center"
-      }, /* @__PURE__ */ React4.createElement("div", {
+      }, /* @__PURE__ */ React3.createElement("div", {
         role: "none",
-        className: mx3("max-h-full max-w-full w-auto h-auto aspect-video")
+        className: mx2("max-h-full max-w-full w-auto h-auto aspect-video")
       }, children)))
     );
   } finally {
@@ -303,11 +161,11 @@ var ResponsiveContainer = ({ children }) => {
 };
 
 // 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 { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+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 mx4 } from "@dxos/react-ui-theme";
+import { mx as mx3 } 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;
@@ -315,7 +173,7 @@ 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();
+  var _effect = _useSignals4();
   try {
     const { width: containerWidth = 0, height: containerHeight = 0, ref: containerRef } = useResizeDetector({
       refreshRate: 100
@@ -402,47 +260,47 @@ var ResponsiveGrid = ({ classNames, Cell, gap = DEFAULT_GAP, getId: getId2 = def
       pinned,
       onPinnedChange
     ]);
-    return /* @__PURE__ */ React5.createElement("div", {
+    return /* @__PURE__ */ React4.createElement("div", {
       ref: containerRef,
-      className: mx4("relative w-full h-full", classNames)
-    }, /* @__PURE__ */ React5.createElement("div", {
+      className: mx3("relative w-full h-full", classNames)
+    }, /* @__PURE__ */ React4.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"),
+    }, pinnedItem && /* @__PURE__ */ React4.createElement("div", {
+      className: mx3("flex grow-[2] shrink overflow-hidden justify-center items-center", hideGallery && "h-full"),
       style: hideGallery ? {} : {
         height: dividerHeight
       }
-    }, /* @__PURE__ */ React5.createElement(SoloItem, {
+    }, /* @__PURE__ */ React4.createElement(SoloItem, {
       id: getId2(pinnedItem),
       debug
-    })), !hideGallery && /* @__PURE__ */ React5.createElement("div", {
+    })), !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__ */ React5.createElement("div", {
+    }, mainItems.length === 1 && /* @__PURE__ */ React4.createElement("div", {
       style: {
         width: cellWidth
       },
       className: "flex h-full"
-    }, /* @__PURE__ */ React5.createElement(SoloItem, {
+    }, /* @__PURE__ */ React4.createElement(SoloItem, {
       id: getId2(mainItems[0]),
       debug
-    })), mainItems.length > 1 && columns > 0 && /* @__PURE__ */ React5.createElement("div", {
+    })), 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__ */ React5.createElement("div", {
+    }, mainItems.map((item) => /* @__PURE__ */ React4.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, {
+      className: mx3("aspect-video max-h-full max-w-full w-auto h-auto", debug && "border border-primary-500")
+    }))))), /* @__PURE__ */ React4.createElement("div", {
+      className: mx3(debug && "opacity-10")
+    }, bounds.map(([item, bounds2]) => /* @__PURE__ */ React4.createElement(Cell, {
       key: getId2(item),
       classNames: "absolute transition-all duration-500",
       item,
@@ -455,14 +313,14 @@ var ResponsiveGrid = ({ classNames, Cell, gap = DEFAULT_GAP, getId: getId2 = def
   }
 };
 var SoloItem = ({ debug, id }) => {
-  var _effect = _useSignals5();
+  var _effect = _useSignals4();
   try {
-    return /* @__PURE__ */ React5.createElement(ResponsiveContainer, null, /* @__PURE__ */ React5.createElement("div", {
+    return /* @__PURE__ */ React4.createElement(ResponsiveContainer, null, /* @__PURE__ */ React4.createElement("div", {
       "data-grid-item": id,
-      className: mx4("aspect-video overflow-hidden", debug && "z-20 border-2 border-primary-500")
-    }, /* @__PURE__ */ React5.createElement("img", {
+      className: mx3("aspect-video overflow-hidden", debug && "z-20 border-2 border-primary-500")
+    }, /* @__PURE__ */ React4.createElement("img", {
       alt: "placeholder video",
-      className: mx4("opacity-0", maxImageSize)
+      className: mx3("opacity-0", maxImageSize)
     })));
   } finally {
     _effect.f();
@@ -532,15 +390,15 @@ var fitAspectRatio = (outerWidth, outerHeight, aspectRatio) => {
 };
 
 // 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 { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
+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 as groupHoverControlItemWithTransition2, mx as mx5 } from "@dxos/react-ui-theme";
+import { groupHoverControlItemWithTransition, mx as mx4 } from "@dxos/react-ui-theme";
 var ResponsiveGridItem = ({ children, classNames, item, style, name, self, pinned, screenshare, video, mute, wave, speaking, onClick }) => {
-  var _effect = _useSignals6();
+  var _effect = _useSignals5();
   try {
-    const { t } = useTranslation2(meta.id);
+    const { t } = useTranslation(meta.id);
     const iconProps = {
       wave: {
         icon: "ph--hand-waving--duotone",
@@ -566,32 +424,32 @@ var ResponsiveGridItem = ({ children, classNames, item, style, name, self, pinne
     }, [
       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),
+    return /* @__PURE__ */ React5.createElement("div", {
+      className: mx4("relative w-full h-full group", "rounded-md outline outline-2 outline-neutral-900 transition-[outline-color] duration-500", speakingIndicator ? "outline-green-500" : !video && "outline-separator", classNames),
       style
-    }, children, onClick && /* @__PURE__ */ React6.createElement("div", {
+    }, children, onClick && /* @__PURE__ */ React5.createElement("div", {
       className: "z-10 absolute top-1 right-1 flex"
-    }, /* @__PURE__ */ React6.createElement(IconButton2, {
-      classNames: mx5("p-1 min-bs-1 rounded", groupHoverControlItemWithTransition2),
+    }, /* @__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__ */ React6.createElement("div", {
+    })), name && /* @__PURE__ */ React5.createElement("div", {
       className: "z-10 absolute bottom-1 left-8 right-1 flex justify-end gap-1 items-center"
-    }, screenshare && /* @__PURE__ */ React6.createElement(Icon2, {
+    }, screenshare && /* @__PURE__ */ React5.createElement(Icon, {
       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", {
+    }), /* @__PURE__ */ React5.createElement("div", {
+      className: mx4("bg-neutral-800 text-neutral-100 py-0.5 truncate rounded", pinned ? "px-2" : "px-1 text-xs")
+    }, name)), /* @__PURE__ */ React5.createElement("div", {
       className: "z-10 absolute bottom-1 left-1 flex"
-    }, speaking && /* @__PURE__ */ React6.createElement(Waveform, {
+    }, speaking && /* @__PURE__ */ React5.createElement(Waveform, {
       active: true,
       size: pinned ? 5 : 4
-    }) || props && /* @__PURE__ */ React6.createElement(IconButton2, {
-      classNames: mx5("p-1 min-bs-1 rounded", props?.classNames),
+    }) || 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,
@@ -605,17 +463,19 @@ var ResponsiveGridItem = ({ children, classNames, item, style, name, self, pinne
 // src/components/Participant/Participant.tsx
 var SCREENSHARE_SUFFIX = "_screenshare";
 var Participant = /* @__PURE__ */ memo2(({ item: user, debug, ...props }) => {
-  var _effect = _useSignals7();
+  var _effect = _useSignals6();
   try {
-    const call = useCapability2(ThreadCapabilities.CallManager);
+    const call = useCapability(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 pulledVideoStream = !isSelf && isScreenshare && user.tracks?.screenshareEnabled ? call.getVideoStream(user.tracks?.screenshare) : !isSelf && !isScreenshare && user.tracks?.videoEnabled ? call.getVideoStream(user.tracks?.video) : void 0;
     const videoStream = useMemo2(() => {
-      if (isSelf && !isScreenshare) {
-        return call.media.videoStream;
-      } else if (isSelf && isScreenshare) {
-        return call.media.screenshareVideoStream;
+      if (isSelf) {
+        if (isScreenshare) {
+          return call.media.screenshareVideoStream;
+        } else if (!isScreenshare) {
+          return call.media.videoStream;
+        }
       } else if (!isSelf) {
         return pulledVideoStream;
       }
@@ -626,7 +486,7 @@ var Participant = /* @__PURE__ */ memo2(({ item: user, debug, ...props }) => {
       call.media.screenshareVideoStream,
       pulledVideoStream
     ]);
-    return /* @__PURE__ */ React7.createElement(ResponsiveGridItem, {
+    return /* @__PURE__ */ React6.createElement(ResponsiveGridItem, {
       ...props,
       item: user,
       name: user.name,
@@ -637,7 +497,7 @@ var Participant = /* @__PURE__ */ memo2(({ item: user, debug, ...props }) => {
       wave: user.raisedHand,
       speaking: user.speaking,
       debug
-    }, /* @__PURE__ */ React7.createElement(VideoObject, {
+    }, /* @__PURE__ */ React6.createElement(VideoObject, {
       videoStream,
       flip: isSelf && !isScreenshare,
       contain: !!isScreenshare,
@@ -650,11 +510,11 @@ var Participant = /* @__PURE__ */ memo2(({ item: user, debug, ...props }) => {
 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";
+import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
+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 }) => {
-  var _effect = _useSignals8();
+  var _effect = _useSignals7();
   try {
     const [pinned, setPinned] = useState3();
     const allUsers = useMemo3(() => {
@@ -708,7 +568,7 @@ var ParticipantGrid = ({ classNames, self, users, fullscreen, debug }) => {
         return 0;
       }
     });
-    return /* @__PURE__ */ React8.createElement(ResponsiveGrid, {
+    return /* @__PURE__ */ React7.createElement(ResponsiveGrid, {
       classNames,
       Cell: Participant,
       debug,
@@ -723,6 +583,148 @@ var ParticipantGrid = ({ classNames, self, users, fullscreen, debug }) => {
   }
 };
 
+// src/components/Call/Toolbar.tsx
+import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
+import React8 from "react";
+import { useAppGraph, useCapability as useCapability2 } from "@dxos/app-framework";
+import { useActions, useNode } from "@dxos/plugin-graph";
+import { fullyQualifiedId } from "@dxos/react-client/echo";
+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/react-ui-theme";
+var Toolbar = ({ classNames, channel, participants, autoHideControls = true, onJoin, onLeave }) => {
+  var _effect = _useSignals8();
+  try {
+    const { t } = useTranslation2(meta.id);
+    const { graph } = useAppGraph();
+    const call = useCapability2(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__ */ 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: 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__ */ React8.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__ */ 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"
+    }), call.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.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: () => action.data({
+        node
+      })
+    })), /* @__PURE__ */ React8.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__ */ 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
+    })));
+  } finally {
+    _effect.f();
+  }
+};
+Toolbar.displayName = "MeetingToolbar";
+var defaultButtonProps = {
+  size: 5,
+  iconOnly: true
+};
+var ToggleButton = ({ active, state }) => {
+  var _effect = _useSignals8();
+  try {
+    return /* @__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
+    });
+  } finally {
+    _effect.f();
+  }
+};
+
 // src/components/Call/Call.tsx
 var CallRoot = ({ children }) => {
   var _effect = _useSignals9();
@@ -802,7 +804,7 @@ var ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }) => {
     useEffect6(() => {
       const ctx = new Context(void 0, {
         F: __dxlog_file2,
-        L: 48
+        L: 49
       });
       callManager.left.on(ctx, (roomId2) => {
         extensions.forEach((extension) => {
@@ -844,7 +846,7 @@ var ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }) => {
       } catch (err) {
         log.catch(err, void 0, {
           F: __dxlog_file2,
-          L: 92,
+          L: 93,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -860,7 +862,7 @@ var ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }) => {
       } catch (err) {
         log.catch(err, void 0, {
           F: __dxlog_file2,
-          L: 104,
+          L: 105,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -876,8 +878,8 @@ var ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }) => {
     ]);
     const isJoined = callManager.joined && callManager.roomId === roomId;
     return /* @__PURE__ */ React10.createElement(StackItem.Content, {
-      toolbar: !isJoined,
-      classNames: isJoined && "h-full"
+      classNames: isJoined && "bs-full",
+      toolbar: !isJoined
     }, 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, {
@@ -982,4 +984,4 @@ export {
   ChannelContainer,
   ChannelContainer_default
 };
-//# sourceMappingURL=chunk-C3XFMUAY.mjs.map
+//# sourceMappingURL=chunk-2KZ4ODHU.mjs.map