用途
Helios Studio 是 Helios 项目的 Vite 开发服务器与预览环境，为构建合成（composition）提供热重载环境，并作为 Helios 项目的“编辑器”界面。适用于需要启动交互式开发环境或管理资产的场景。
启动方式
在项目根目录运行：
npx @helios-project/cli studio
启动后会在本地运行服务器（通常为 http://localhost:5173），可在其中查看和调试合成。可通过环境变量 HELIOS_PROJECT_ROOT 覆盖根目录扫描路径，例如：
HELIOS_PROJECT_ROOT=./my-project npx @helios-project/cli studio
播放与预览
- 交互式时间轴：可逐帧拖动浏览动画。
- 热重载：编辑代码时保留时间轴状态（当前帧）。
- 音频控制：音量滑块与静音开关。
- 安全区参考线：可切换动作/标题安全区参考线与十字准线。
- 键盘快捷键：空格播放/暂停；左右方向键步进 1 帧；Shift+方向键步进 10 帧；Home 跳到起点；I/O 设置入点/出点（播放范围）；L 切换循环。
Props Editor
Props Editor 根据 HeliosSchema 生成编辑界面。
- 分组：通过 group 模式属性将 props 组织为可折叠区块。
- 感知模式的输入控件：number 在设置 min/max 时为滑块，设置 step 时为步进滑块；color 为颜色选择器；boolean 为开关；string 为文本输入或枚举下拉框；image、video、audio、font 为带预览的资产选择器；model 为 3D 模型选择器（.glb、.gltf）；json 为 JSON 文件选择器；shader 为着色器文件选择器（.glsl）。
- 递归支持：为 object 与 array 类型生成嵌套界面。
- 拖放：可将 Assets 面板中的资产直接拖入兼容输入框。
- 元数据编辑：点击“Edit Composition”可修改宽度、高度、FPS 和时长。
资产管理
Assets 面板用于查看和管理 assets/ 目录中的文件。可将文件拖放到面板上传；视频（悬停播放）、音频、字体和图片提供丰富预览。支持类型：图片 jpg、png、svg、webp；音频 mp3、wav、ogg；视频 mp4、webm；3D glb、gltf；数据 json；着色器 glsl、vert、frag。
渲染管理
Renders 面板可直接从界面触发服务端渲染。可选择格式（MP4/WebM）、分辨率和编解码器；可追踪渲染进度并在需要时取消任务；渲染历史在服务器重启后仍保留。还支持使用 WebCodecs 在浏览器端直接导出。
MCP 服务器
Studio 运行一个 Model Context Protocol（MCP）服务器，允许 AI 智能体：检查合成模式；更新输入属性；触发渲染；创建新合成。
常见问题
- 端口被占用：若 5173 已被占用，Vite 会尝试下一个可用端口，请查看终端输出。
- 文件未找到：确保合成 HTML 文件存在于根目录或其子目录中。
源码位置
- CLI 命令：packages/cli/src/commands/studio.ts
- Studio 应用：packages/studio/