dsh-hyperframes 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 [返回简介](README.md) · [使用说明](docs/USAGE.md) · [验证记录](docs/VALIDATION.md)
 
+## 0.8.0（2026-10-25）
+
+- 视频主工作台，内容、真实预览、素材和导出记录重新编排；明确区分已保存修订与尚未导出的修改。
+- 提供 DSH 原生侧栏入口，保留设置页；统一中英、深浅色、窄屏、键盘焦点与真实空/失败状态。
+- 浏览器源码移至 templates/client.js、templates/panels/ 与共享组件，独立构建为 lib/client.js；移除重复的首次引导。
+- 官方 DSH 0.2.1-rc.3 Web 逐项实际操作验收，账户模拟和未验收范围见 [工作台说明](docs/WORKBENCH.md)。
+
 ## 0.7.0（2026-10-17）
 
 - 设置面板顶部新增「首次使用」分步引导：一次只讲一步，支持上一步/下一步/跳过，看完记在本机不再出现。

package/README.en.md

@@ -10,6 +10,8 @@ Bring HyperFrames HTML video creation skills into DSH.
 
 Feedback and contributions are welcome: report [issues](https://github.com/STARDUSTLC666/dsh-hyperframes/issues) or submit [pull requests](https://github.com/STARDUSTLC666/dsh-hyperframes/pulls).
 
+Open the new native sidebar workbench after updating and restarting DSH. Settings remains available. See the [workbench guide and validation boundaries](docs/WORKBENCH.md).
+
 ## What it does
 
 - A settings workbench for templates, editable content, media uploads, official Studio preview and local MP4 export.
@@ -30,6 +32,8 @@ dsh plugin --profile desktop add dsh-hyperframes
 
 For the web version, replace `desktop` with `web`. Restart DSH after installation.
 
+For a marketplace `spawn … ENOENT` error, follow the [installation troubleshooting](docs/USAGE.en.md#marketplace-error-spawn--enoent). The npm package name is `dsh-hyperframes`.
+
 ## Start using it
 
 Open Settings → HyperFrames → New video. Save your content, then upload media. Prepare the render environment on first use, inspect the official Studio preview, stop it and export MP4.

package/README.md

@@ -10,6 +10,8 @@
 
 欢迎使用，遇到问题或有改进建议，请提交 [issues](https://github.com/STARDUSTLC666/dsh-hyperframes/issues) 和 [PR](https://github.com/STARDUSTLC666/dsh-hyperframes/pulls)。
 
+更新并重启 DSH 后，可从原生侧栏打开新版工作台，原设置入口继续保留。详见[工作台说明与验收范围](docs/WORKBENCH.md)。
+
 ## 功能
 
 - 设置页视频工作台：选模板、编辑内容、上传素材，在官方 Studio 预览并导出本机 MP4。
@@ -30,6 +32,8 @@ dsh plugin --profile desktop add dsh-hyperframes
 
 网页版把命令中的 `desktop` 改为 `web`。安装后重启 DSH。
 
+插件市场出现 `spawn … ENOENT` 时，按[安装排错](docs/USAGE.md#插件市场报-spawn--enoent)处理。npm 包名是 `dsh-hyperframes`。
+
 ## 开始使用
 
 打开「设置 → HyperFrames」→「新建视频」，填写内容并保存，再上传素材。首次点击「准备渲染环境」下载依赖，完成后启动官方预览，检查画面、停止预览，再导出 MP4。

package/docs/USAGE.en.md

@@ -14,6 +14,24 @@ dsh plugin --profile web add dsh-hyperframes
 
 After restarting, say "turn this website into a HyperFrames video" to trigger it.
 
+### Marketplace error `spawn … ENOENT`
+
+The `spawn … DSH Desktop.exe ENOENT` reported in [#2](https://github.com/STARDUSTLC666/dsh-hyperframes/issues/2) occurs while the installer launches the host CLI. A missing executable and a missing child working directory can both produce this error; that line alone does not distinguish them.
+
+Hub 1.6.5 uses the target profile directory as the working directory even when it does not exist. [Hub 1.6.12](https://github.com/dshplugin/dsh-plugin-hub/blob/v1.6.12/src/server/services/install/task-queue.ts) adds a directory fallback and a separate host launch failure hint. See the matching upstream report, [Hub #212](https://github.com/dshplugin/dsh-plugin-hub/issues/212).
+
+1. Fully exit DSH, including the tray application, then launch it from its actual installation location. Repair or reinstall Desktop if it was moved or executable files are missing after an update; retain your existing user data.
+2. Update Plugin Hub to **1.6.12 or newer**, preferably through the Plugins panel. Alternatively, run the following in DSH's built-in terminal. This example preserves the `web` profile from #2; manage a `desktop` profile through Desktop's own terminal or Plugins panel.
+
+   ```bash
+   dsh plugin --profile web add dsh-plugin@latest
+   dsh plugin --profile web add dsh-hyperframes
+   ```
+
+3. Restart DSH and check Settings → HyperFrames. Use the same `DSH_HOME`; a regular terminal's default `~/.dsh` may differ from Desktop's user directory. Compare it with `DSH Home` in the Hub report.
+
+The published npm package is **`dsh-hyperframes`**; `@stardustlc/dsh-hyperframes` is not published. Installing through `dsh plugin` also registers the plugin bundle, which a plain `pnpm add` does not replace. If it still fails, include the current Hub version, full `hub.log` and the command actually executed.
+
 ## Uninstall
 
 ```bash

package/docs/USAGE.md

@@ -14,6 +14,24 @@ dsh plugin --profile web add dsh-hyperframes
 
 重启后说「把这个网址做成 HyperFrames 视频」即可触发。
 
+### 插件市场报 `spawn … ENOENT`
+
+[#2](https://github.com/STARDUSTLC666/dsh-hyperframes/issues/2) 报告的 `spawn … DSH Desktop.exe ENOENT` 发生在安装器启动宿主 CLI 时。可执行文件不存在、子进程工作目录不存在都可能产生这个错误；仅凭这一行无法区分。
+
+Hub 1.6.5 在目标 profile 目录尚未创建时仍把它用作工作目录。[Hub 1.6.12](https://github.com/dshplugin/dsh-plugin-hub/blob/v1.6.12/src/server/services/install/task-queue.ts) 已增加目录回退，并为宿主启动失败提供单独提示。上游的同类报告见 [Hub #212](https://github.com/dshplugin/dsh-plugin-hub/issues/212)。
+
+1. 完全退出 DSH（包括托盘），从实际安装位置重新打开。若程序已被移动、升级后文件缺失，先修复或重新安装 Desktop，保留原有用户资料。
+2. 将 Plugin Hub 更新到 **1.6.12 或更新版本**。优先使用插件面板的更新功能；也可在 DSH 内置终端执行下面的命令。下例沿用 #2 的 `web` profile，桌面 profile 应使用 `desktop`，并通过 Desktop 自带的终端或插件面板管理。
+
+   ```bash
+   dsh plugin --profile web add dsh-plugin@latest
+   dsh plugin --profile web add dsh-hyperframes
+   ```
+
+3. 重启 DSH 后检查「设置 → HyperFrames」。命令必须使用同一个 `DSH_HOME`；普通终端默认的 `~/.dsh` 可能与 Desktop 使用的用户目录不同，可对照 Hub 报告中的 `DSH Home`。
+
+npm 包名是 **`dsh-hyperframes`**，`@stardustlc/dsh-hyperframes` 未发布。使用 `dsh plugin` 安装会同时登记插件 bundle，单独 `pnpm add` 不能代替这一步。若仍失败，请附上当前 Hub 版本、完整 `hub.log` 和实际执行的命令。
+
 ## 卸载
 
 ```bash

package/docs/VALIDATION.md

@@ -2,6 +2,8 @@
 
 [0.5.1 中英文界面验收](validation-language-2026-10-03.md)。
 
+[Windows 安装排错与真实安装验收（2026-10-18）](validation-install-2026-10-18.md)。
+
 本页整理原 README 的历史验证说明，保留当时的版本、日期与范围。自动测试、启动检查、浏览器操作和真实服务验收分别记录，不能相互替代。更详细的版本验收文件仍保留在仓库中。
 
 ## 0.5.0 视频工作台（2026-10-03）

package/docs/WORKBENCH.md

@@ -0,0 +1,29 @@
+# dsh-hyperframes 工作台 / Workbench
+
+视频主工作台，内容、真实预览、素材和导出记录重新编排；明确区分已保存修订与尚未导出的修改。
+
+Video workbench with content, real preview, media and exports; distinguishes saved revisions from changes not yet rendered.
+
+## 使用 / Use
+
+更新插件并重启 DSH，在原生左侧栏打开工作台；没有固定时可在“更多”中找到。原有“设置”入口继续可用。侧栏排序和固定由 DSH 管理。
+
+Update the plugin, restart DSH and open its native sidebar panel (or More if it is not pinned). The existing Settings entry remains available. DSH owns sidebar order and pinning.
+
+界面跟随宿主中英文和深浅色，保留用户内容原文。窄窗口中先显示列表，打开详情后可返回；编辑器按可用宽度分栏或顺序排列。危险操作需要明确确认，未保存内容不会因切页而静默丢失。
+
+The UI follows host language and theme without translating user content. Narrow master/detail views have a Back action; editors adapt their columns to available space. Destructive actions require confirmation and edits are protected.
+
+## 源码 / Source
+
+编辑 templates/client.js、templates/panels/*.js 与 templates/workbench-ui.js，运行 pnpm run build。lib/client.js 是确定性产物，请随源码提交。公共组件的规范源位于 dsh-suite/ui/workbench-ui.js，Suite 的同步脚本显式分发副本；单个仓库可独立构建和安装。
+
+Edit the template sources and run pnpm run build. Commit generated lib/client.js with source changes. The vendored UI has no Suite runtime dependency.
+
+## 验收范围 / Validation boundary
+
+2026-10-25：Windows、官方 DSH 0.2.1-rc.3 Web，后台 Chrome/Playwright 实际点击和输入；覆盖中英文、浅深色、1536px 与 390px、状态读回与控制台。Browser plugin 不可用，因此使用本地 Playwright。
+
+邮件使用受控 AgentMail HTTP 服务，日历使用受控 CalDAV 协议传输；插件处理器、存储、校验和原生宿主均实际运行。未使用真实邮箱、真实日历账号或付费模型。RSS 访问 Node.js 官方公开来源。PPT 实际生成并渲染 PPTX、下载 ZIP；两个视频插件实际运行官方引擎并播放 MP4。
+
+这些是 Web 共用界面的验收结果，不代表已验收 Electron 专属菜单、系统权限、真实账号、全部外部来源或所有可选模型/引擎。Docker、Slack、钉钉继续按用户约定搁置。

package/docs/validation-install-2026-10-18.md

@@ -0,0 +1,27 @@
+# Windows 安装排错验证（2026-10-18）
+
+[使用与排错](USAGE.md#插件市场报-spawn--enoent) · [Issue #2](https://github.com/STARDUSTLC666/dsh-hyperframes/issues/2)
+
+环境：Windows x64、Node 24.16.0、官方 npm `@deepseek-ai/dsh@0.2.0-rc.2`。安装使用公开 npm 包，独立 `DSH_HOME` 和含空格的路径。
+
+| 检查 | 结果 |
+| :-- | :-- |
+| npm 包名 | `dsh-hyperframes` 存在；原回复中的 `@stardustlc/dsh-hyperframes` 返回 404 |
+| Hub 1.6.5 worker，目标 profile 目录不存在 | 可执行文件存在，仍报 `spawn … ENOENT`，CLI 未启动 |
+| Hub 1.6.12 worker，同样的初始目录 | CLI 启动，自动创建 profile，安装退出码 0 |
+| Hub 完整 `startPluginMutation` 队列，宿主可执行文件不存在 | 任务失败，报 ENOENT，CLI 未启动 |
+| 同一完整队列恢复有效宿主入口后重试 | 任务完成，退出码 0，公开插件包安装成功 |
+| bundle 与分发物 | profile 登记 `dsh-hyperframes`，pnpm 锁文件 integrity 与官方 npm 对应版本一致 |
+| 实际宿主启动 | 官方 CLI 启动 Web，注册 3 个 HyperFrames 工具，21 个插件技能自检全部通过 |
+| HTTP 鉴权 | 启动 token 换取 cookie 返回 303；未登录访问返回 401；携 cookie 访问 HTML 返回 200 |
+
+本次默认安装实际解析到 **0.6.0**。npm 最新的 0.7.0 仅确认元数据存在，不计为本轮已安装验收版本。
+
+## 证据边界
+
+- worker 的目录对比直接调用真实 `runPluginMutation`，验证缺失工作目录的行为；正常队列的默认日志可能先创建 profile 目录，因此不能据此判定报告者命中了该路径。
+- 完整队列测试调用真实 `startPluginMutation`，包含日志、排队、子进程与终态处理。
+- Electron 的 asar 布局使用目录夹具，宿主启动器使用真实 Node 和官方 CLI 的 `runCli`。没有执行报告者电脑上的 Desktop，也没有做原生 Desktop 窗口验收。
+- 本轮验证安装、注册、自检和 Web 启动；未重复执行视频渲染验收。
+
+上游修复依据：[1.6.5 安装器源码](https://github.com/dshplugin/dsh-plugin-hub/blob/v1.6.5/src/server/services/install/task-queue.ts)、[1.6.12 安装器源码](https://github.com/dshplugin/dsh-plugin-hub/blob/v1.6.12/src/server/services/install/task-queue.ts)、[Hub #212 的维护者说明](https://github.com/dshplugin/dsh-plugin-hub/issues/212#issuecomment-6192085277)。

package/lib/client.js

@@ -1,111 +1,407 @@
-// Shared original browser source. build-client substitutes the engine identity.
-window.__ModuleLoader__.load({ id: 'dsh-hyperframes', factory: require => {
-  const React = require('react'), { useState, useEffect, useRef } = React, h = React.createElement;
-  const engine = 'hyperframes', title = engine === 'hyperframes' ? 'HyperFrames' : 'Remotion', route = 'api/dsh-' + engine + '/workbench';
-
-  function mediaError(error, en) {
-    const message = typeof error === 'string' ? error : error?.message || String(error || '');
-    if (!en || !/[\u3400-\u9fff]/.test(message)) return message;
-    if (error?.status === 401) return 'Your session expired. Reopen DSH and try again.';
-    if (/先归档|已达 30/.test(message)) return 'The 30 active project slots are full. Archive another project before creating or restoring one.';
-    if (/已有预览或渲染/.test(message)) return 'Stop the active preview or cancel the render before archiving or restoring a project.';
-    if (error?.status === 409 || /已.*更新|另一窗口|修订/.test(message)) return 'The project changed. Reopen the latest version and compare it with your preserved input.';
-    if (/标题/.test(message)) return 'Enter a title up to 72 characters.';
-    if (/时长/.test(message)) return 'Set a duration between 3 and 30 seconds.';
-    if (/正文/.test(message)) return 'Use body text up to 360 characters.';
-    if (/素材|PNG|JPEG|MP3|WAV|MP4/.test(message)) return 'Check the media format and file contents. Each asset must be ≤20 MB; a project supports 12 assets and 40 MB total, with one audio and one video background.';
-    if (/任务|官方|FFmpeg|Chrome|环境/.test(message)) return 'The official task did not finish. Open the job log and check the render environment, then retry. Your project is preserved.';
-    if (/工程记录|项目目录|文件/.test(message)) return 'The project files could not be read safely. Back them up and check their location and permissions before retrying.';
-    return 'The operation failed. Check the DSH logs and reload the project before retrying; your input is preserved.';
+// Generated from templates/client.js, templates/panels/ and templates/workbench-ui.js. Edit the sources.
+(function () {
+/* DSH workbench UI v1. MIT. Canonical source: dsh-suite/ui/workbench-ui.js.
+ * Vendored into each plugin: no Suite or extra runtime dependency is required.
+ * Styles are scoped to .dshw and never replace the host chrome or theme.
+ */
+function createWorkbenchUI(React) {
+  const h = React.createElement;
+  const { useEffect, useId, useRef } = React;
+  const cx = (...values) => values.filter(Boolean).join(' ');
+  const paths = {
+    book: ['M4 4h6a3 3 0 0 1 2 2v15a4 4 0 0 0-4-2H4z', 'M20 4h-6a3 3 0 0 0-2 2v15a4 4 0 0 1 4-2h4z'],
+    calendar: ['M5 5h14a2 2 0 0 1 2 2v13H3V7a2 2 0 0 1 2-2Z', 'M7 3v4M17 3v4M3 10h18'],
+    mail: ['M3 5h18v14H3z', 'm3 6 9 7 9-7'],
+    rss: ['M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16', 'M4 19h.01'],
+    slides: ['M3 4h18v13H3z', 'M12 17v4M8 21h8'],
+    shield: ['m12 3 8 3v6c0 4-4 7-8 9-4-2-8-5-8-9V6z', 'm8 12 3 3 5-6'],
+    layers: ['M5 3h16v16H5z', 'M2 7v15h15'],
+    play: ['m9 6 9 6-9 6Z'],
+    video: ['M3 5h12v14H3z', 'm15 10 6-4v12l-6-4'],
+    search: ['M10.5 18a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15Z', 'm16 16 5 5'],
+    plus: ['M12 5v14M5 12h14'],
+    refresh: ['M20 7a9 9 0 1 0 1 8', 'M20 2v5h-5'],
+    settings: ['m9 3-.7 2.4-2 .9L4 5.8 2.5 8.4l1.7 1.8v2.3L2.5 14 4 17l2.5-.4 1.9 1L9 20h3l.8-2.4 2-1 2.5.4 1.5-2.7-1.7-1.9v-2.2l1.7-1.8-1.5-2.6-2.5.4-2-1L12 3Z', 'M14 11.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z'],
+    close: ['m6 6 12 12M18 6 6 18'],
+    left: ['m14 5-7 7 7 7'],
+    right: ['m10 5 7 7-7 7'],
+    down: ['m5 9 7 7 7-7'],
+    filter: ['M4 5h16M7 12h10M10 19h4'],
+    download: ['M12 3v12m-5-5 5 5 5-5', 'M4 16v5h16v-5'],
+    upload: ['M12 16V4m-5 5 5-5 5 5', 'M4 16v5h16v-5'],
+    copy: ['M8 8h13v13H8z', 'M16 8V3H3v13h5'],
+    external: ['M14 3h7v7m0-7L10 14', 'M10 3H3v18h18v-7'],
+    file: ['M4 3h10l6 6v12H4z', 'M14 3v6h6M8 13h8M8 17h6'],
+    folder: ['M3 5h7l2 3h9v12H3z'],
+    edit: ['m15 4 5 5-10 10-6 1 1-6Z', 'm13 6 5 5'],
+    trash: ['M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7M14 10v7'],
+    more: ['M5 12h.01M12 12h.01M19 12h.01'],
+    info: ['M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z', 'M12 11v6M12 7h.01'],
+    check: ['m5 12 4 4L19 6'],
+    quote: ['M4 12h6v7H3v-7c0-4 2-6 5-7M15 12h6v7h-7v-7c0-4 2-6 5-7'],
+    star: ['m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2-5.6-3-5.6 3 1.1-6.2L3 9.6l6.2-.9Z'],
+    reply: ['m9 5-7 7 7 7v-5h6c3 0 5 2 6 5 0-8-4-11-12-11Z'],
+    link: ['m10 13 4-4M8 16l-2 2a4 4 0 0 1-6-6l4-4a4 4 0 0 1 6 0', 'm14 8 2-2a4 4 0 0 1 6 6l-4 4a4 4 0 0 1-6 0'],
+  };
+  function Icon({ name = 'file', size = 20, ...props }) {
+    return h('svg', { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.75, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true, focusable: false, ...props },
+      (paths[name] || paths.file).map((d, index) => h('path', { key: index, d })));
   }
-
-  let cache = { project: null, fields: null, dirty: false, job: null, creating: false };
-  const empty = () => ({ template: 'title', title: '', body: '', format: 'landscape', duration: 8 });
-  const fieldsOf = p => ({ template: p.template, title: p.title, body: p.body, format: p.format, duration: p.duration });
-  const css = `.dmw{font:14px/1.6 system-ui,sans-serif;color:var(--fg,#142D39);min-width:0;padding:8px}.dmw *{box-sizing:border-box}.dmw h2{margin:0;font-size:23px}.dmw h3{font-size:17px;margin:8px 0}.dmw .muted{color:var(--fg-muted,#677881);font-size:13px}.dmw .bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}.dmw button,.dmw .button{font:inherit;color:inherit;background:var(--bg-surface,#fff);border:1px solid var(--border,#c8d6d9);border-radius:9px;padding:8px 12px;cursor:pointer;white-space:normal;text-decoration:none}.dmw button.primary{background:#df5639;border-color:#df5639;color:white}.dmw button:disabled{opacity:.45;cursor:default}.dmw input:not([type=file]),.dmw textarea,.dmw select{font:inherit;color:inherit;width:100%;border:1px solid var(--border,#b9cccd);border-radius:8px;padding:9px;background:var(--bg,#fff)}.dmw label{display:block;margin:10px 0 4px}.dmw .card{border:1px solid var(--border,#ccd7d6);border-radius:12px;padding:14px;margin:12px 0;min-width:0;background:var(--bg-surface,#fff)}.dmw .notice{border-radius:8px;padding:10px;margin:10px 0;background:#eef5ed;color:#28573e;overflow-wrap:anywhere}.dmw .error{background:#fff0ec;color:#943b27}.dmw .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dmw .projects{display:grid;gap:8px}.dmw .projects button{text-align:left;width:100%}.dmw img{width:90px;height:70px;object-fit:contain}.dmw .assets{display:flex;flex-direction:column;gap:8px}.dmw .asset{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.dmw video{width:100%;max-height:400px;background:#142D39;border-radius:10px}.dmw pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;margin:8px 0;max-height:220px;overflow:auto}.dmw :focus-visible{outline:3px solid #79CDB4;outline-offset:2px}[role=dialog]:has(.dmw){width:min(1160px,calc(100vw - 40px))!important;max-width:1160px!important}@media(max-width:700px){.dmw{padding:3px}.dmw .row{grid-template-columns:1fr}[role=dialog]:has(.dmw){width:100%!important;max-width:100%!important;flex-direction:column!important}[role=dialog]:has(.dmw)>nav+div{min-width:0;width:100%}[role=dialog]:has(.dmw)>nav+div>div:has(.dmw){padding:12px!important;min-width:0}[role=dialog]:has(.dmw) nav{width:100%!important;flex-basis:auto!important;border-right:0;max-height:170px;overflow:auto}[role=dialog]:has(.dmw) nav>div:has(>button){display:flex;flex-direction:row!important;flex-wrap:wrap;gap:4px}}`;
-  async function api(body) {
-    const response = await fetch(new URL(route, document.baseURI), { method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/json', 'x-dsh-media': '1' }, body: JSON.stringify(body) });
-    let data; try { data = await response.json() } catch { throw new Error('无法读取插件响应，请检查是否已经重启 DSH。') }
-    if (!response.ok || !data.ok) { const error = new Error(data.message || '操作未完成'); error.status = response.status; throw error; } return data.value;
+  function Button({ children, icon, variant, className, ...props }) {
+    return h('button', { type: 'button', ...props, className: cx('w-button', variant && 'w-' + variant, className) }, icon ? h(Icon, { name: icon, size: 18 }) : null, children);
+  }
+  function IconButton({ label, icon, ...props }) {
+    return h(Button, { ...props, icon, className: cx('w-icon-button', props.className), 'aria-label': label, title: label });
+  }
+  function Page({ title, subtitle, actions, children, workbench = false, className, rootRef, ...props }) {
+    return h('section', { ...props, ref: rootRef, className: cx('dshw', 'w-page', className), 'data-main': workbench ? 'true' : 'false' },
+      h('style', null, styles),
+      h('header', { className: 'w-page-header' }, h('div', { className: 'w-heading' }, h('h1', null, title), subtitle ? h('p', { className: 'w-subtitle' }, subtitle) : null), actions ? h('div', { className: 'w-header-actions' }, actions) : null),
+      h('div', { className: 'w-body' }, children));
   }
-  function urlFor(project, kind, extra = {}) { const url = new URL(route, document.baseURI); url.search = new URLSearchParams({ id: project.id, kind, ...extra }); return url.href; }
-  function Workbench({ locale }) {
-    const [lang, setLang] = useState('zh'), [projects, setProjects] = useState([]), [archived, setArchived] = useState([]), [archiveReview, setArchiveReview] = useState(false), [environment, setEnvironment] = useState(null), [templates, setTemplates] = useState([]);
-    const [project, setProject] = useState(cache.project), [fields, setFields] = useState(cache.fields || empty()), [dirty, setDirty] = useState(cache.dirty), [creating, setCreating] = useState(cache.creating);
-    const [job, setJob] = useState(cache.job), [busy, setBusy] = useState(false), [error, setError] = useState(''), [notice, setNotice] = useState(''), [pending, setPending] = useState(null), [conflict, setConflict] = useState(false);
-    const busyRef = useRef(false), fileRef = useRef(null), latest = useRef({ project, fields, dirty }); latest.current = { project, fields, dirty };
-    const t = (zh, en) => lang === 'en' ? en : zh, activeJob = job?.state === 'running', running = busy || activeJob && job.kind !== 'prepare';
-    const stage = lang === 'en' ? ({ '下载环境': 'Preparing environment', '检查 FFmpeg': 'Checking FFmpeg', '下载官方依赖': 'Downloading official dependencies', '检查官方环境': 'Checking official CLI', '检查或下载 Chrome': 'Checking or downloading Chrome', '下载专用渲染浏览器': 'Downloading the official rendering browser', '准备修订快照': 'Preparing saved revision', '启动官方预览': 'Starting official preview', '官方预览已就绪': 'Official preview is ready', '检查合成': 'Checking composition', '渲染 MP4': 'Rendering MP4', '已完成': 'Completed', '已取消': 'Cancelled', '已取消；工程已保留': 'Cancelled; project preserved', '官方任务未完成，请展开运行记录后重试。工程已保留。': 'The official task failed. Open the job log and retry; your project is preserved.', '未找到 FFmpeg，请安装并加入 PATH，重启 DSH 后重试。工程已保留。': 'FFmpeg was not found. Install it, add it to PATH, then restart DSH and retry; your project is preserved.' }[job?.stage] || mediaError(job?.stage, true)) : job?.stage;
-    useEffect(() => { const update = () => setLang(String(locale?.getSnapshot?.().active || '').startsWith('en') ? 'en' : 'zh'); update(); return locale?.subscribe?.(update); }, [locale]);
-    useEffect(() => { cache = { project, fields, dirty, job, creating }; }, [project, fields, dirty, job, creating]);
-    useEffect(() => { const exit = e => { if (latest.current.dirty) { e.preventDefault(); e.returnValue = ''; } }; window.addEventListener('beforeunload', exit); return () => window.removeEventListener('beforeunload', exit); }, []);
-    async function refresh() {
-      const data = await api({ action: 'list' }); setProjects(data.projects); setArchived(data.archivedProjects || []); setEnvironment(data.environment); setTemplates(data.templates);
-      const current = latest.current, saved = !current.dirty && data.projects.find(row => row.id === current.project?.id);
-      if (saved) { setProject(saved); setFields(fieldsOf(saved)); }
-      setJob(previous => data.jobs.find(row => row.id === previous?.id) || data.jobs.filter(row => row.state === 'running').at(-1) || data.jobs.at(-1) || null);
+  function Tabs({ items, value, onChange, label, children }) {
+    const id = useId();
+    const active = items.some(item => item.id === value) ? value : items[0]?.id;
+    function keys(event, index) {
+      if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+      event.preventDefault();
+      const next = event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1 : (index + (event.key === 'ArrowRight' ? 1 : -1) + items.length) % items.length;
+      const node = event.currentTarget.parentElement?.querySelectorAll('[role=tab]')[next];
+      if (node) { onChange(items[next].id); node.focus(); }
     }
-    useEffect(() => { refresh().catch(e => setError(e)); }, []);
+    return h('div', { className: 'w-tabs-layout' },
+      h('div', { className: 'w-tabs', role: 'tablist', 'aria-label': label }, items.map((item, index) => h('button', {
+        type: 'button', role: 'tab', key: item.id, id: id + '-' + item.id, 'aria-controls': id + '-panel', 'aria-selected': active === item.id, tabIndex: active === item.id ? 0 : -1,
+        onClick: () => onChange(item.id), onKeyDown: event => keys(event, index),
+      }, item.label, item.count !== undefined ? h('span', { className: 'w-count' }, item.count) : null))),
+      h('div', { className: 'w-tab-panel', id: id + '-panel', role: 'tabpanel', 'aria-labelledby': id + '-' + active }, children));
+  }
+  function Status({ children, tone = 'info', className }) {
+    if (!children) return null;
+    return h('div', { className: cx('w-status', 'w-status-' + tone, className), role: tone === 'error' ? 'alert' : 'status', 'aria-live': tone === 'error' ? 'assertive' : 'polite' }, h(Icon, { name: tone === 'success' ? 'check' : 'info', size: 18 }), h('div', null, children));
+  }
+  function Empty({ title, children, action, icon = 'file' }) {
+    return h('div', { className: 'w-empty' }, h(Icon, { name: icon, size: 32 }), h('h2', null, title), children ? h('div', { className: 'w-muted' }, children) : null, action ? h('div', { className: 'w-toolbar' }, action) : null);
+  }
+  function Split({ list, detail, selected, onBack, backLabel, className, listWidth = 360 }) {
+    const ref = useRef(null);
+    useEffect(() => {
+      if (!selected || !ref.current || ref.current.clientWidth > 760) return;
+      const heading = ref.current.querySelector('.w-detail h2');
+      if (heading) { heading.tabIndex = -1; heading.focus({ preventScroll: true }); }
+    }, [selected]);
+    return h('div', { ref, className: cx('w-split', className), 'data-selected': selected ? 'true' : 'false', style: { '--w-list-width': listWidth + 'px' } },
+      h('div', { className: 'w-master' }, list),
+      h('div', { className: 'w-detail' }, selected ? h(Button, { className: 'w-back', icon: 'left', variant: 'ghost', onClick: onBack }, backLabel) : null, detail));
+  }
+  function Row({ title, meta, description, active, onClick, children, status, className, disabled }) {
+    return h('div', { className: cx('w-row', active && 'w-selected', className) },
+      children ? h('div', { className: 'w-row-select' }, children) : null,
+      h('button', { type: 'button', className: 'w-row-button', onClick, disabled, 'aria-pressed': !!active },
+        h('span', { className: 'w-row-head' }, h('strong', null, title), status ? h('span', { className: 'w-tag' }, status) : null),
+        meta ? h('span', { className: 'w-row-meta' }, meta) : null,
+        description ? h('span', { className: 'w-row-description' }, description) : null));
+  }
+  function Search({ label, value, onChange, ...props }) {
+    const id = useId();
+    return h('div', { className: 'w-search' }, h(Icon, { name: 'search', size: 18 }), h('input', { type: 'search', id, 'aria-label': label, placeholder: label, value, onChange, ...props }));
+  }
+  function Switch({ label, checked, onChange, disabled }) {
+    return h('label', { className: 'w-switch-label' }, h('span', null, label), h('input', { type: 'checkbox', role: 'switch', checked, disabled, onChange, 'aria-label': label }), h('span', { className: 'w-switch-track', 'aria-hidden': true }));
+  }
+  function Dialog({ title, children, onClose, closeLabel, className, busy = false }) {
+    const id = useId(), panel = useRef(null);
     useEffect(() => {
-      if (!job || job.state !== 'running') return;
-      let live = true, polling = false;
-      const timer = setInterval(async () => {
-        if (polling) return; polling = true;
-        try {
-          const next = await api({ action: 'job', job: job.id }); if (!live) return;
-          // Refresh output before the terminal state tears down this polling effect.
-          if (next.state !== 'running') await refresh();
-          else setJob(next);
-        } catch (e) { if (live) { setError(e); setJob(null); } } finally { polling = false; }
-      }, 1000);
-      return () => { live = false; clearInterval(timer); };
-    }, [job?.id, job?.state]);
-    async function perform(fn) { if (busyRef.current) return; busyRef.current = true; setBusy(true); setError(''); setNotice(''); try { return await fn(); } catch (e) { setError(e); setConflict(e.status === 409); } finally { busyRef.current = false; setBusy(false); } }
-    async function open(id) { const next = await api({ action: 'get', id }); setProject(next); setFields(fieldsOf(next)); setCreating(false); setDirty(false); setConflict(false); setPending(null); setArchiveReview(false); }
-    function navigate(target) { if (dirty) { setPending(target); return; } perform(() => move(target)); }
-    async function move(target) { if (target === 'new') { setProject(null); setFields(empty()); setCreating(true); } else if (target === 'list') { setProject(null); setCreating(false); await refresh(); } else await open(target); setDirty(false); setPending(null); }
-    async function save() { const next = await api(project ? { action: 'update', id: project.id, revision: project.revision, fields } : { action: 'create', fields }); setProject(next); setFields(fieldsOf(next)); setCreating(false); setDirty(false); setConflict(false); setNotice(t('工程已保存。', 'Project saved.')); await refresh(); return next; }
-    async function upload(event) { const file = event.target.files?.[0]; if (!file) return; await perform(async () => {
-      if (!project || dirty) throw new Error(t('请先保存工程，再上传素材。', 'Save your project before uploading media.'));
-      if (file.size > 20 * 1024 * 1024) throw new Error(t('单个素材不能超过 20 MB。', 'Each asset must be at most 20 MB.'));
-      const response = await fetch(new URL(route + '/upload', document.baseURI), { method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/octet-stream', 'x-dsh-media': '1', 'x-project-id': project.id, 'x-project-revision': String(project.revision), 'x-file-name': encodeURIComponent(file.name) }, body: file }); const result = await response.json(); if (!response.ok || !result.ok) { const e = new Error(result.message); e.status = response.status; throw e; } setProject(result.value); setNotice(t('素材副本已保存，原文件未改变。', 'A media copy was saved; your original is unchanged.'));
-    }); event.target.value = ''; }
-    async function start(action) { await perform(async () => { if (action !== 'prepare' && dirty) throw new Error(t('请先保存修改。', 'Save changes first.')); setJob(await api({ action, id: project?.id, revision: project?.revision })); }); }
-    async function archiveProject() { await api({action:'archive',id:project.id,revision:project.revision,confirmed:true}); setArchiveReview(false); setProject(null); setCreating(false); setDirty(false); await refresh(); setNotice(t('工程已归档，素材和成品均保留，可在下方恢复。','Project archived. Media and output are preserved; restore it below.')); }
-    const render = project?.renders?.[0], stale = render && render.revision !== project.revision;
-    if (!environment) return h('div', { className: 'dmw' }, h('style', null, css), h('h2', null, title + t(' 视频工作台', ' video workbench')),
-      error ? h(React.Fragment, null, h('p', { className: 'notice error', role: 'alert' }, mediaError(error, lang === 'en')), h('button', { disabled: busy, onClick: () => perform(refresh) }, t('重新读取项目', 'Reload projects'))) : h('p', { role: 'status' }, t('正在读取工程与渲染环境…', 'Loading projects and render environment…')));
-    return h('div', { className: 'dmw' }, h('style', null, css), h('h2', null, title + t(' 视频工作台', ' video workbench')),
-      h('p', { className: 'muted' }, t('模板 → 素材 → 官方预览 → 本机 MP4。工程与素材保存在 DSH 本地数据目录。', 'Template → media → official preview → local MP4. Projects stay in the local DSH data folder.')),
-      error && h('div', { className: 'notice error', role: 'alert' }, mediaError(error, lang === 'en')), notice && h('div', { className: 'notice', role: 'status' }, notice),
-      archived.length > 0 && h('details', { className: 'card' }, h('summary', null, t('已归档工程', 'Archived projects') + ' (' + archived.length + ')'), h('p', {className:'muted'}, t('归档保留素材与成品，不占当前 30 个工程名额。恢复后可以继续编辑。','Archives retain media and output, freeing an active project slot. Restore to edit again.')), archived.map(p => h('div',{className:'bar',key:p.id}, h('strong',null,p.title), h('button',{disabled:busy||dirty||activeJob,onClick:()=>perform(async()=>{await api({action:'restore',id:p.id,revision:p.revision,confirmed:true});await refresh();await open(p.id);setNotice(t('工程已恢复。','Project restored.'))})},t('恢复工程','Restore project'))))),
-      project && !creating && h('div',{className:'bar'},h('button',{disabled:busy||dirty||activeJob,onClick:()=>setArchiveReview(true)},t('归档此工程','Archive this project'))),
-      project && archiveReview && h('div',{className:'card',role:'alert'},h('p',null,t('归档后将从当前项目列表移走；工程、上传素材和已导出 MP4 全部保留，可随时恢复。未保存修改需先处理。','Archiving removes this project from the active list. The project, uploaded media and exported MP4s are preserved and can be restored. Save or discard pending edits first.')),h('div',{className:'bar'},h('button',{disabled:busy||dirty||activeJob,onClick:()=>perform(archiveProject)},t('确认归档','Confirm archive')),h('button',{disabled:busy,onClick:()=>setArchiveReview(false)},t('取消归档','Cancel archive')))),
-      pending && h('div', { className: 'card' }, h('p', null, t('有未保存内容，如何继续？', 'You have unsaved changes.')),
-        h('div', { className: 'bar' }, h('button', { disabled: running, onClick: () => perform(async () => { await save(); await move(pending); }) }, t('保存后继续', 'Save and continue')), h('button', { disabled: running, onClick: () => perform(() => move(pending)) }, t('放弃修改并继续', 'Discard and continue')), h('button', { onClick: () => setPending(null) }, t('留在当前', 'Stay here')))),
-      conflict && project && h('button', { disabled: running, onClick: () => { setPending(project.id); } }, t('重新打开最新版本（先处理当前输入）', 'Reopen latest version (review your current input first)')),
-      h('details', { className: 'card', open: !environment?.ready }, h('summary', null, t('渲染环境', 'Render environment') + (environment?.ready ? t(' · 已准备', ' · ready') : t(' · 首次需下载', ' · first download required'))),
-        h('p', { className: 'muted' }, t(environment?.hint, 'First use downloads the official CLI. ' + (engine === 'hyperframes' ? 'Windows uses the official rendering browser; other platforms reuse installed Chrome when available. FFmpeg must be in PATH.' : 'Installed Chrome is reused; a browser is downloaded when needed. Remotion retains its official license.'))), engine === 'remotion' && h('p', null, h('a', { href: 'https://www.remotion.dev/license', target: '_blank', rel: 'noreferrer' }, t('查看 Remotion 使用许可证', 'Read the Remotion license'))),
-        h('button', { disabled: busy || activeJob, onClick: () => start('prepare') }, environment?.ready ? t('重新检查 / 修复环境', 'Check / repair environment') : t('准备渲染环境', 'Prepare render environment'))),
-      job && h('div', { className: job.state === 'failed' ? 'card notice error' : 'card', role: job.state === 'failed' ? 'alert' : 'status' }, h('strong', null, t('任务状态：', 'Job status: ') + stage), job.url && h('p', null, h('a', { className: 'button', href: job.url, target: '_blank', rel: 'noreferrer' }, t('打开官方 Studio 预览', 'Open official Studio preview'))),
-        job.state === 'running' && h('button', { disabled: busy, onClick: () => perform(async () => { await api({ action: 'cancel', job: job.id }); setNotice(t('已请求停止；正在关闭本次任务。', 'Stopping this job.')); }) }, job.kind === 'preview' ? t('停止预览，返回编辑', 'Stop preview and return to editing') : t('取消任务', 'Cancel job')),
-        h('details', null, h('summary', null, t('查看运行记录', 'Show job log')), h('pre', null, job.lines.join('\n')))),
-      !project && !creating ? h(React.Fragment, null, h('div', { className: 'bar' }, h('button', { className: 'primary', disabled: running, onClick: () => navigate('new') }, t('新建视频', 'New video')), h('button', { disabled: running, onClick: () => perform(refresh) }, t('刷新项目', 'Refresh projects'))),
-        projects.length ? h('div', { className: 'projects' }, projects.map(p => h('button', { key: p.id, disabled: running, onClick: () => navigate(p.id) }, h('strong', null, p.title), h('div', { className: 'muted' }, p.duration + t(' 秒 · 修订 ', ' sec · revision ') + p.revision)))) : h('div', { className: 'card' }, h('h3', null, t('还没有视频工程', 'No video projects yet')), h('p', null, t('点击“新建视频”，先选模板并保存。环境准备可以稍后进行。', 'Choose New video, select a template and save. You can prepare the render environment later.')))) :
-      h(React.Fragment, null, h('div', { className: 'bar' }, h('button', { disabled: running, onClick: () => navigate('list') }, t('返回项目', 'Back to projects')), project && h('span', { className: 'muted' }, t('修订 ', 'Revision ') + project.revision), dirty && h('span', null, t('有未保存修改', 'Unsaved changes'))),
-        h('div', { className: 'card' }, h('h3', null, t('1. 模板与内容', '1. Template and content')),
-          h('label', { htmlFor: engine + '-template' }, t('模板', 'Template')), h('select', { id: engine + '-template', disabled: running, value: fields.template, onChange: e => { setFields({ ...fields, template: e.target.value }); setDirty(true); } }, templates.map(row => h('option', { key: row.id, value: row.id }, lang === 'en' ? row.en : row.zh))),
-          h('label', { htmlFor: engine + '-title' }, t('标题（最多 72 字符）', 'Title (up to 72 characters)')), h('input', { id: engine + '-title', value: fields.title, disabled: running, maxLength: 72, onChange: e => { setFields({ ...fields, title: e.target.value }); setDirty(true); } }),
-          h('label', { htmlFor: engine + '-body' }, t('正文（轮播时每行对应一页）', 'Body (one line per slideshow page)')), h('textarea', { id: engine + '-body', value: fields.body, disabled: running, maxLength: 360, rows: 4, onChange: e => { setFields({ ...fields, body: e.target.value }); setDirty(true); } }),
-          h('div', { className: 'row' }, h('div', null, h('label', { htmlFor: engine + '-format' }, t('画幅', 'Canvas')), h('select', { id: engine + '-format', value: fields.format, disabled: running, onChange: e => { setFields({ ...fields, format: e.target.value }); setDirty(true); } }, ['landscape','portrait','square'].map((key, i) => h('option', { key, value: key }, [t('横屏 16:9', 'Landscape 16:9'),t('竖屏 9:16', 'Portrait 9:16'),t('正方形', 'Square')][i])))), h('div', null, h('label', { htmlFor: engine + '-duration' }, t('时长（3–30 秒）', 'Duration (3–30 seconds)')), h('input', { id: engine + '-duration', type: 'number', min: 3, max: 30, value: fields.duration, disabled: running, onChange: e => { setFields({ ...fields, duration: Number(e.target.value) }); setDirty(true); } }))),
-          h('div', { className: 'bar' }, h('button', { className: 'primary', disabled: running || project && !dirty, onClick: () => perform(save) }, t('保存工程', 'Save project')), project && h('button', { disabled: running || !dirty, onClick: () => { setFields(fieldsOf(project)); setDirty(false); setError(''); } }, t('取消修改', 'Discard changes')))),
-        project && h('div', { className: 'card' }, h('h3', null, t('2. 素材', '2. Media')), h('p', { className: 'muted' }, t('PNG/JPEG 图片、一个背景音频和一个静音背景视频；每个 ≤20 MB，总共 ≤40 MB。轮播按上传顺序，每张至少两秒。', 'PNG/JPEG images, one background audio and one muted background video; each ≤20 MB, total ≤40 MB. Slideshow follows upload order, at least two seconds per image.')),
-          h('label', { htmlFor: engine + '-asset' }, t('上传素材副本', 'Upload a media copy')), h('input', { ref: fileRef, id: engine + '-asset', type: 'file', accept: '.png,.jpg,.jpeg,.mp3,.wav,.mp4', disabled: running || dirty, onChange: upload }),
-          h('div', { className: 'assets' }, project.assets.map(a => h('div', { className: 'asset', key: a.id }, a.kind === 'image' && h('img', { src: urlFor(project, 'asset', { asset: a.id }), alt: a.name }), h('span', null, a.name + ' · ' + Math.ceil(a.bytes / 1024) + ' KB'), h('button', { disabled: running || dirty, onClick: () => perform(async () => { setProject(await api({ action: 'removeAsset', id: project.id, revision: project.revision, asset: a.id })); }) }, t('移除上传副本', 'Remove uploaded copy')))))),
-        project && h('div', { className: 'card' }, h('h3', null, t('3. 预览与成品', '3. Preview and output')), h('p', { className: 'muted' }, t('保存后在官方 Studio 检查画面。关闭本次预览后再编辑或导出。MP4 按已保存修订生成；渲染不会占用前台窗口。', 'Check the saved project in official Studio. Stop this preview before editing or exporting. MP4 uses the saved revision and renders in the background.')),
-          h('div', { className: 'bar' }, h('button', { disabled: running || dirty || !environment?.ready, onClick: () => start('preview') }, t('启动官方预览', 'Start official preview')), h('button', { className: 'primary', disabled: running || dirty || !environment?.ready, onClick: () => start('render') }, t('导出 MP4', 'Export MP4')), h('a', { className: 'button', href: urlFor(project, 'source'), download: '' }, t('备份可编辑工程', 'Back up editable project'))),
-          render ? h(React.Fragment, null, h('p', { className: stale ? 'notice error' : 'muted' }, t('此 MP4 来自修订 ', 'This MP4 uses revision ') + render.revision + (stale ? t('，工程已有更新，请重新导出。', '; your project has newer changes. Export again.') : t('，请播放检查最终画面。', '. Play it to check the final output.'))), h('video', { controls: true, preload: 'metadata', src: urlFor(project, 'mp4', { render: render.id }) }), h('p', null, h('a', { className: 'button', href: urlFor(project, 'mp4', { render: render.id, download: '1' }), download: '' }, t('下载这份 MP4', 'Download this MP4')))) : h('p', { className: 'muted' }, t('尚无 MP4 成品。预览成功后点击“导出 MP4”。', 'No MP4 yet. Check the preview, then choose Export MP4.')))));
+      const previous = document.activeElement;
+      panel.current?.querySelector('button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex="0"]')?.focus();
+      return () => { if (previous?.isConnected) previous.focus({ preventScroll: true }); };
+    }, []);
+    function keydown(event) {
+      if (event.key === 'Escape' && !event.isComposing) { event.preventDefault(); event.stopPropagation(); if (!busy) onClose(); return; }
+      if (event.key !== 'Tab') return;
+      const controls = [...panel.current.querySelectorAll('button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), a[href], [tabindex="0"]')].filter(node => node.getClientRects().length);
+      const first = controls[0], last = controls.at(-1);
+      if (!controls.length) { event.preventDefault(); panel.current.focus(); }
+      else if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
+      else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
+    }
+    return h('div', { className: 'w-overlay', onClick: event => { if (!busy && event.target === event.currentTarget) onClose(); } },
+      h('section', { ref: panel, className: cx('w-dialog', className), role: 'dialog', 'aria-modal': true, 'aria-labelledby': id, tabIndex: -1, onKeyDown: keydown },
+        h('header', { className: 'w-dialog-header' }, h('h2', { id }, title), h(IconButton, { icon: 'close', label: closeLabel, disabled: busy, onClick: onClose })), h('div', { className: 'w-dialog-body' }, children)));
   }
-  function apply(ctx) { let locale; try { locale = ctx.get?.('locale') || ctx.locale; } catch {} ctx.slots.inject('settings.section', () => ctx.slots.register({ name: 'settings.section', id: 'dsh-' + engine, order: engine === 'hyperframes' ? 62 : 63, label: () => title, inject: () => ({ locale }) }, Workbench)); }
-  return { inject: ['slots','locale'], apply };
-} });
+  function register(ctx, { id, label, icon, component, inject, order = 50 }) {
+    // The two slots are optional. Existing settings and manual tools still load
+    // in hosts without a workbench, while RC.3 owns navigation/pinning itself.
+    ctx.slots.inject('main', () => ctx.slots.register({ name: 'main', key: id, inject: () => ({ ...(inject?.() || {}), workbench: true }) }, component));
+    ctx.slots.inject('sidebar.panellist', () => ctx.slots.register({ name: 'sidebar.panellist', id, order, label }, function WorkbenchIcon({ size }) { return h(Icon, { name: icon, size }); }));
+  }
+  const styles = `
+.dshw{--w-bg:var(--dsw-alias-bg-layer-1,#fff);--w-soft:var(--dsw-alias-bg-layer-2,#f7f8fa);--w-text:var(--dsw-alias-label-primary,#18202c);--w-muted:var(--dsw-alias-label-secondary,#667085);--w-border:var(--dsw-alias-border-l3,#e7e9ef);--w-accent:var(--dsh-plugin-workbench-accent,#4f6bdb);--w-selected:color-mix(in srgb,var(--w-accent) 10%,var(--w-bg));--w-primary:var(--w-text);--w-on-primary:var(--w-bg);container-type:inline-size;container-name:dsh-workbench;color:var(--w-text);background:var(--w-bg);font:14px/1.65 var(--dsh-font-family-content,system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif);min-width:0;max-width:100%;box-sizing:border-box;text-align:start;color-scheme:inherit}
+.dshw *,.dshw *:before,.dshw *:after{box-sizing:border-box}.dshw h1,.dshw h2,.dshw h3,.dshw h4,.dshw p{margin:0}.dshw h1{font-size:30px;line-height:1.25;letter-spacing:-.025em;font-weight:650}.dshw h2{font-size:24px;line-height:1.35;font-weight:650;letter-spacing:-.015em;overflow-wrap:anywhere}.dshw h3,.dshw h4{font-size:16px;line-height:1.4;font-weight:600}.dshw a{color:var(--w-accent);text-underline-offset:3px;overflow-wrap:anywhere}.dshw button,.dshw input,.dshw select,.dshw textarea{font:inherit;color:inherit;max-width:100%}.dshw input:not([type=checkbox]):not([type=radio]):not([type=file]),.dshw select,.dshw textarea{background:var(--w-bg);border:1px solid var(--w-border);border-radius:8px;padding:8px 11px;min-width:0;line-height:1.5}.dshw input:not([type=checkbox]):not([type=radio]):not([type=file]),.dshw select{min-height:38px}.dshw textarea{resize:vertical}.dshw input[type=checkbox],.dshw input[type=radio]{width:16px;height:16px;flex-shrink:0;accent-color:var(--w-accent)}.dshw :focus-visible{outline:2px solid var(--w-accent);outline-offset:3px}.dshw button:disabled,.dshw input:disabled,.dshw select:disabled,.dshw textarea:disabled{opacity:.5;cursor:not-allowed}.dshw label{font-size:13px}.dshw fieldset{min-width:0;border:1px solid var(--w-border);border-radius:8px}.dshw summary{cursor:pointer;font-weight:550;list-style:none;display:flex;align-items:center;gap:8px}.dshw summary::-webkit-details-marker{display:none}.dshw summary:after{content:'';display:block;margin-inline-start:auto;width:7px;height:7px;border-inline-end:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:rotate(45deg);flex-shrink:0}.dshw details[open]>summary:after{transform:rotate(225deg)}.dshw details>summary+*{margin-top:12px}.dshw pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;max-width:100%;background:var(--w-soft);border-radius:6px;padding:14px}.dshw img,.dshw video,.dshw iframe{max-width:100%}
+.w-page{display:flex;flex-direction:column;position:relative;padding:0;min-height:540px;gap:0}.w-page[data-main=true]{height:100%;min-height:0;padding:calc(24px + var(--dsh-frame-top-clearance,0px)) 28px 0 max(28px,var(--dsh-frame-leading-clearance,0px));overflow:auto}.w-page-header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding-bottom:22px;flex-shrink:0}.w-heading{min-width:0}.w-subtitle{margin-top:8px!important;font-size:14px;color:var(--w-muted);line-height:1.6}.w-header-actions,.w-toolbar,.w-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}.w-header-actions{justify-content:flex-end}.w-body,.w-tabs-layout{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}.w-body{overflow:auto}.w-tab-panel{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:auto}.w-tabs{display:flex;align-items:stretch;gap:20px;border-bottom:1px solid var(--w-border);flex-shrink:0;overflow-x:auto;scrollbar-width:thin}.dshw .w-tabs>button{border:0;border-bottom:2px solid transparent;background:transparent;padding:11px 8px 13px;white-space:nowrap;font-size:14px;font-weight:550;cursor:pointer;color:var(--w-muted);display:flex;align-items:center;gap:7px}.dshw .w-tabs>button[aria-selected=true]{border-bottom-color:var(--w-accent);color:var(--w-accent)}.w-count,.w-tag{font-size:12px;line-height:1.5;display:inline-flex;align-items:center;flex-shrink:0;background:var(--w-soft);border-radius:5px;padding:1px 6px;color:var(--w-muted)}.w-tabs [aria-selected=true] .w-count,.w-selected .w-tag{color:var(--w-accent);background:var(--w-selected)}
+.dshw .w-button{display:inline-flex;justify-content:center;align-items:center;gap:7px;background:var(--w-bg);border:1px solid var(--w-border);border-radius:8px;padding:8px 12px;min-height:36px;line-height:1.4;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;white-space:normal}.dshw .w-button:not(:disabled):hover{background:var(--w-soft)}.dshw .w-primary{background:var(--w-primary);border-color:var(--w-primary);color:var(--w-on-primary)}.dshw .w-primary:not(:disabled):hover{background:var(--w-primary);opacity:.9}.dshw .w-ghost{background:transparent;border-color:transparent}.dshw .w-danger{color:var(--dsw-alias-state-error-primary,#b43c3c)}.dshw .w-icon-button{width:36px;min-width:36px;padding:8px}.dshw .w-button svg{flex-shrink:0}.w-muted{color:var(--w-muted);font-size:12px;line-height:1.6}.w-section{padding:24px 0;border-bottom:1px solid var(--w-border);min-width:0}.w-section>h3{margin-bottom:12px}.w-section>p+p{margin-top:8px}.w-fields{display:grid;gap:16px;min-width:0}.w-field{display:grid;gap:6px;min-width:0}.w-field>input,.w-field>select,.w-field>textarea{width:100%}.w-status{display:flex;align-items:flex-start;gap:8px;padding:11px 13px;margin:12px 0;border:1px solid var(--w-border);border-radius:8px;background:var(--w-soft);font-size:13px;overflow-wrap:anywhere;flex-shrink:0}.w-status>svg{flex-shrink:0;margin-top:2px}.w-status-error{color:var(--dsw-alias-state-error-primary,#ad3636)}.w-status-success{color:var(--dsw-alias-state-success-primary,#24794a)}.w-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;max-width:580px;padding:48px 24px;margin:auto;min-height:280px;overflow-wrap:anywhere}.w-empty>svg{color:var(--w-muted)}.w-empty h2{font-size:20px}.w-empty .w-muted{font-size:14px}.w-empty .w-toolbar{justify-content:center}
+.w-split{display:grid;grid-template-columns:minmax(240px,var(--w-list-width)) minmax(0,1fr);min-height:460px;flex:1;min-width:0}.w-master{min-width:0;border-inline-end:1px solid var(--w-border);overflow:auto;padding-bottom:24px}.w-detail{min-width:0;padding:26px 28px;overflow:auto;overflow-wrap:anywhere;display:flex;flex-direction:column}.w-master-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:20px 16px}.w-search{display:flex;align-items:center;gap:8px;border:1px solid var(--w-border);border-radius:8px;padding:0 10px;min-width:0;flex:1;background:var(--w-bg)}.w-search>svg{color:var(--w-muted);flex-shrink:0}.dshw .w-search>input{border:0!important;background:transparent!important;padding:8px 0!important;width:100%;outline-offset:0}.w-row{display:flex;gap:0;min-width:0;position:relative;border-bottom:1px solid var(--w-border);border-inline-start:3px solid transparent}.w-row-select{display:flex;align-items:flex-start;padding:21px 0 0 14px}.dshw .w-row-button{display:flex;flex-direction:column;align-items:stretch;gap:7px;text-align:start;width:100%;padding:18px 18px 18px 16px;border:0;background:transparent;color:inherit;min-width:0;cursor:pointer;line-height:1.5}.dshw .w-row-button:hover{background:var(--w-soft)}.w-row-head{display:flex;align-items:flex-start;gap:10px;justify-content:space-between;min-width:0}.w-row-head>strong{font-size:14px;line-height:1.5;font-weight:600;overflow-wrap:anywhere}.w-row-meta,.w-row-description{color:var(--w-muted);font-size:12px;line-height:1.6;overflow-wrap:anywhere}.w-row-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.w-selected{background:var(--w-selected);border-inline-start-color:var(--w-accent)}.w-back{display:none!important}.w-detail-title{margin-bottom:12px!important}.w-detail-meta{color:var(--w-muted);font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.w-detail-footer{padding:24px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;border-top:1px solid var(--w-border)}.w-detail-footer .w-muted{flex:1;min-width:160px}.w-definition{display:grid;grid-template-columns:minmax(80px,120px) minmax(0,1fr);gap:8px 16px;font-size:14px;margin:20px 0}.w-definition dt{color:var(--w-muted)}.w-definition dd{margin:0;min-width:0;overflow-wrap:anywhere}
+.w-switch-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;position:relative;cursor:pointer}.w-switch-label>input{position:absolute;opacity:0;inset-inline-end:0;width:36px!important;height:22px!important;margin:0;cursor:pointer}.w-switch-track{width:36px;height:22px;border-radius:12px;display:block;background:var(--w-border);border:1px solid var(--w-border);pointer-events:none;padding:2px;transition:background .15s}.w-switch-track:before{content:'';display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0002;transition:transform .15s}.w-switch-label>input:checked+.w-switch-track{background:var(--w-accent);border-color:var(--w-accent)}.w-switch-label>input:checked+.w-switch-track:before{transform:translateX(14px)}.w-switch-label>input:focus-visible+.w-switch-track{outline:2px solid var(--w-accent);outline-offset:3px}.w-switch-label:has(>input:disabled){opacity:.5;cursor:not-allowed}
+.w-overlay{position:fixed;inset:0;background:#0005;display:flex;justify-content:flex-end;z-index:1000;padding:12px;overflow:auto}.w-dialog{width:min(620px,100%);max-height:100%;display:flex;flex-direction:column;min-height:0;background:var(--w-bg);color:var(--w-text);border:1px solid var(--w-border);border-radius:12px;box-shadow:0 18px 70px #0003}.w-dialog-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--w-border);flex-shrink:0}.w-dialog-header>h2{font-size:20px}.w-dialog-body{overflow:auto;padding:20px 24px;min-height:0}.w-editor-grid{display:grid;grid-template-columns:210px minmax(0,1fr) 300px;min-height:500px;flex:1}.w-editor-list{padding:20px 12px;border-inline-end:1px solid var(--w-border);min-width:0}.w-editor-canvas{background:var(--w-soft);padding:20px;min-width:0;display:flex;flex-direction:column;gap:14px}.w-editor-inspector{padding:24px;border-inline-start:1px solid var(--w-border);min-width:0;overflow:auto}.w-editor-inspector h3{margin-bottom:18px}.w-preview-empty{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px;aspect-ratio:16/9;min-height:180px;background:var(--w-soft);border:1px solid var(--w-border);border-radius:8px;padding:24px;color:var(--w-muted)}.w-content-pad{padding:24px 0}.w-stack{display:flex;flex-direction:column;gap:16px;min-width:0}.w-scroll-x{overflow:auto;max-width:100%}
+@container dsh-workbench (max-width:1000px){.w-editor-grid{grid-template-columns:160px minmax(0,1fr)}.w-editor-inspector{grid-column:1/-1;border-inline-start:0;border-top:1px solid var(--w-border)}.w-header-actions{max-width:60%}.w-split{grid-template-columns:minmax(240px,32%) minmax(0,1fr)}}
+@container dsh-workbench (max-width:760px){.w-page-header{gap:14px;flex-wrap:wrap;padding-bottom:18px}.w-heading{flex:1;min-width:170px}.dshw h1{font-size:24px}.w-header-actions{max-width:100%;justify-content:flex-start}.w-subtitle{font-size:13px}.w-tabs{gap:12px}.dshw .w-tabs>button{padding:10px 4px 12px}.w-split{display:block;min-height:360px}.w-split[data-selected=false]>.w-detail{display:none}.w-split[data-selected=true]>.w-master{display:none}.w-master{border-inline-end:0}.w-detail{padding:20px 0}.w-back{display:inline-flex!important;align-self:flex-start;margin:0 0 16px!important}.w-detail h2{font-size:22px}.w-master-toolbar{padding:16px 0}.dshw .w-row-button{padding:16px 10px}.w-detail-footer{position:static}.w-detail-footer .w-muted{flex-basis:100%}.w-editor-grid{display:flex;flex-direction:column}.w-editor-list{border-inline-end:0;border-bottom:1px solid var(--w-border);padding:16px 0}.w-editor-canvas{padding:16px 0;background:var(--w-bg)}.w-editor-inspector{padding:20px 0}.w-dialog-header,.w-dialog-body{padding:16px}.w-button{min-height:40px}.w-definition{grid-template-columns:80px minmax(0,1fr)}}
+@media(max-width:700px){.w-page[data-main=true]{padding:calc(16px + var(--dsh-frame-top-clearance,0px)) 16px 0 max(16px,var(--dsh-frame-leading-clearance,0px))}.w-overlay{padding:8px}.w-dialog{width:100%}}
+@media(prefers-reduced-motion:reduce){.dshw *,.dshw *:before{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
+`;
+  return { Icon, Button, IconButton, Page, Tabs, Status, Empty, Split, Row, Search, Switch, Dialog, register, styles };
+}
+
+// Editable browser entry. Build with node scripts/build-client.mjs.
+// Shared original browser source. build-client substitutes the engine identity.
+window.__ModuleLoader__.load({ id: 'dsh-hyperframes', factory: require => {
+        const React = require('react'), { useState, useEffect, useRef } = React, h = React.createElement;
+        const W = createWorkbenchUI(React);
+function MediaCanvas({ project, fields, render, dirty, stale, job, running, ready, busy, start, perform, setNotice, t }) {
+  const previewing = job?.kind === 'preview' && job.state === 'running';
+  const ratio = fields.format === 'portrait' ? '9 / 16' : fields.format === 'square' ? '1 / 1' : '16 / 9';
+  return h('div', { className: 'media-preview-workspace' },
+    h('div', { className: 'w-toolbar' }, h(W.Button, { icon: 'play', disabled: !project || running || dirty || !ready, title: !ready ? t('先在“环境”页准备渲染工具。', 'Prepare the renderer in Environment first.') : undefined, onClick: () => start('preview') }, t('启动 Studio 预览', 'Start Studio preview')),
+      h(W.Button, { disabled: busy || !previewing, onClick: () => perform(async () => { await api({ action: 'cancel', job: job.id }); setNotice(t('已请求停止；正在关闭本次任务。', 'Stopping this job.')); }) }, t('停止预览', 'Stop preview')),
+      previewing && job.url ? h('a', { className: 'w-button', href: job.url, target: '_blank', rel: 'noopener noreferrer' }, t('打开 Studio', 'Open Studio')) : null),
+    render ? h('div', { className: 'media-player-wrap' }, h('video', { key: render.id, controls: true, preload: 'metadata', src: urlFor(project, 'mp4', { render: render.id }), 'aria-label': t('已导出视频', 'Exported video') })) :
+      h('div', { className: 'w-preview-empty media-empty-preview', style: { aspectRatio: ratio, width: fields.format === 'portrait' ? 'min(100%, 240px)' : fields.format === 'square' ? 'min(100%, 440px)' : 'min(100%, 960px)', maxHeight: 'none', minHeight: '0px', alignSelf: 'center' } }, h(W.Icon, { name: 'video', size: 32 }), h('strong', null, t('导出 MP4 后可在这里播放', 'Play the MP4 here after exporting')), h('p', { className: 'w-muted' }, t('Studio 预览会在单独页面打开。', 'Studio preview opens in a separate page.'))),
+    h('p', { className: 'w-muted media-render-caption' }, render ? dirty ? t('此 MP4 反映已保存修订；当前编辑尚未保存。', 'This MP4 reflects a saved revision. Current edits are not saved.') : t('此 MP4 来自修订 ', 'This MP4 uses revision ') + render.revision + (stale ? t('，工程已有更新，请重新导出。', '; your project has newer changes. Export again.') : t('，请播放检查最终画面。', '. Play it to check the final output.')) : t('尚未导出本次修改。', 'No export for these changes yet.')),
+    render ? h('a', { className: 'w-button', href: urlFor(project, 'mp4', { render: render.id, download: '1' }), download: '' }, t('下载这份 MP4', 'Download this MP4')) : null);
+}
+
+function MediaAssets({ project, dirty, running, fileRef, upload, perform, setProject, t }) {
+  const [remove, setRemove] = useState(null);
+  if (!project) return h(W.Empty, { title: t('先保存工程，再添加素材', 'Save the project before adding media'), icon: 'video' }, t('填写标题并点击上方“保存工程”。', 'Enter a title and choose Save project above.'));
+  return h('section', { className: 'media-assets-view' },
+    h('div', { className: 'w-toolbar' }, h('h3', null, t('工程素材', 'Project media') + ' · ' + project.assets.length), h(W.Button, { icon: 'upload', disabled: running || dirty, onClick: () => fileRef.current?.click() }, t('上传素材', 'Upload media'))),
+    h('p', { className: 'w-muted' }, t('PNG/JPEG 图片、一个背景音频和一个静音背景视频；每个 ≤20 MB，总共 ≤40 MB。轮播按上传顺序，每张至少两秒。', 'PNG/JPEG images, one background audio and one muted background video; each ≤20 MB, total ≤40 MB. Slideshow follows upload order, at least two seconds per image.')),
+    dirty ? h(W.Status, null, t('请先保存修改，再上传或移除素材副本。', 'Save changes before uploading or removing media copies.')) : null,
+    h('input', { ref: fileRef, type: 'file', accept: '.png,.jpg,.jpeg,.mp3,.wav,.mp4', disabled: running || dirty, onChange: upload, 'aria-label': t('上传素材副本', 'Upload a media copy'), style: { display: 'none' } }),
+    project.assets.length ? h('ul', { className: 'media-asset-list' }, project.assets.map(asset => h('li', { key: asset.id }, asset.kind === 'image' ? h('img', { src: urlFor(project, 'asset', { asset: asset.id }), alt: asset.name }) : h(W.Icon, { name: asset.kind === 'video' ? 'video' : 'file', size: 28 }),
+      h('div', null, h('strong', null, asset.name), h('p', { className: 'w-muted' }, asset.kind + ' · ' + Math.ceil(asset.bytes / 1024) + ' KB')),
+      h(W.Button, { variant: 'ghost', icon: 'trash', disabled: running || dirty, onClick: () => setRemove(asset) }, t('移除上传副本', 'Remove uploaded copy'))))) : h(W.Empty, { title: t('还没有上传素材', 'No media uploaded yet'), icon: 'video' }, t('标题卡可以直接导出。需要图片或配乐时，再上传自己的素材。', 'Title cards can be exported as they are. Upload your own media when you need images or music.')),
+    remove ? h(W.Dialog, { title: t('移除素材副本', 'Remove media copy'), closeLabel: t('取消', 'Cancel'), busy: running, onClose: () => setRemove(null) }, h('p', null, remove.name), h('p', { className: 'w-muted' }, t('仅移除本工程中的上传副本，原文件保留。', 'Only the uploaded project copy is removed. Your original file is preserved.')), h('div', { className: 'w-toolbar' }, h(W.Button, { variant: 'danger', disabled: running || dirty, onClick: () => perform(async () => { setProject(await api({ action: 'removeAsset', id: project.id, revision: project.revision, asset: remove.id })); setRemove(null); }) }, t('确认移除副本', 'Confirm removal')), h(W.Button, { disabled: running, onClick: () => setRemove(null) }, t('取消', 'Cancel')))) : null);
+}
+
+function MediaExports({ project, dirty, running, activeJob, busy, setArchiveReview, t }) {
+  if (!project) return h(W.Empty, { title: t('工程尚未保存', 'Project not saved yet'), icon: 'video' }, t('保存后才能导出视频和可编辑工程。', 'Save the project to export video and editable source.'));
+  return h('section', { className: 'media-exports-view' },
+    h('h3', null, t('已导出成品', 'Exported videos')),
+    h('p', { className: 'w-muted' }, t('每份 MP4 对应已保存的工程修订。修改内容后，需要重新导出。', 'Each MP4 corresponds to a saved project revision. Export again after editing.')),
+    project.renders.length ? h('ul', { className: 'media-export-list' }, project.renders.map(render => h('li', { key: render.id },
+      h('div', null, h('strong', null, t('修订 ', 'Revision ') + render.revision), h('p', { className: 'w-muted' }, new Date(render.created).toLocaleString() + ' · ' + Math.ceil(render.bytes / 1024) + ' KB'), render.revision === project.revision && !dirty ? h('span', { className: 'w-tag' }, t('当前已保存版本', 'Current saved version')) : null),
+      h('a', { className: 'w-button', href: urlFor(project, 'mp4', { render: render.id, download: '1' }), download: '' }, t('下载 MP4', 'Download MP4'))))) : h(W.Empty, { title: t('尚无 MP4 成品', 'No MP4 yet'), icon: 'video' }, t('先准备环境、保存并预览工程，再点击“导出 MP4”。', 'Prepare the renderer, save and preview the project, then choose Export MP4.')),
+    h('section', { className: 'w-section' }, h('h3', null, t('工程备份', 'Editable project backup')), h('a', { className: 'w-button', href: urlFor(project, 'source'), download: '' }, t('下载可编辑工程', 'Download editable project'))),
+    h('section', { className: 'w-section' }, h('h3', null, t('归档', 'Archive')), h('p', { className: 'w-muted' }, t('归档保留素材与成品，不占当前 30 个工程名额。', 'Archiving preserves media and exports and frees an active project slot.')), h(W.Button, { disabled: busy || dirty || activeJob, onClick: () => setArchiveReview(true) }, t('归档此工程', 'Archive this project'))));
+}
+
+const MEDIA_WORKBENCH_CSS = `
+.media-workbench.dmw{--fg:var(--w-text);--fg-muted:var(--w-muted);--border:var(--w-border);--bg:var(--w-bg);--bg-surface:var(--w-bg);padding:0}.media-workbench.dmw[data-main=true]{padding:calc(24px + var(--dsh-frame-top-clearance,0px)) 28px 0 max(28px,var(--dsh-frame-leading-clearance,0px))}.media-workbench .media-editor{display:grid;grid-template-columns:260px minmax(0,1fr) 220px;min-height:500px;flex:1}.media-workbench .media-content-fields{border-inline-end:1px solid var(--w-border);padding:24px 20px 24px 0;min-width:0}.media-workbench .media-properties{border-inline-start:1px solid var(--w-border);padding:24px 0 24px 20px;min-width:0}.media-workbench .media-content-fields h3,.media-workbench .media-properties h3{margin-bottom:20px}.media-workbench .media-field{display:grid;gap:7px;margin:0 0 18px;font-size:13px}.media-workbench .media-field label{margin:0;color:var(--w-muted)}.media-workbench .media-field input,.media-workbench .media-field select,.media-workbench .media-field textarea{width:100%;font-size:14px}.media-workbench .media-field textarea{min-height:160px}.media-workbench .media-preview-workspace{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:24px;min-width:0}.media-workbench .media-preview-workspace>.w-toolbar{justify-content:flex-start}.media-workbench .media-empty-preview{margin:auto 0;max-height:600px;min-height:180px;width:100%;justify-content:center;background:var(--w-soft);border-radius:8px}.media-workbench .media-player-wrap{display:flex;justify-content:center;align-items:center;min-height:220px;flex:1;min-width:0}.media-workbench .media-player-wrap video{width:100%;height:auto;max-height:calc(100dvh - 360px);object-fit:contain;border-radius:8px;background:#14171c}.media-workbench .media-render-caption{margin-top:0}.media-workbench .media-preview-workspace>.w-button{align-self:flex-start}.media-workbench .media-properties .w-section{padding:20px 0}.media-workbench .media-properties .w-button{width:100%;margin-top:10px}.media-workbench .media-properties p{margin:12px 0}.media-workbench .media-job{border-bottom:1px solid var(--w-border);padding:14px 0;font-size:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.media-workbench .media-job details{width:100%}.media-workbench .media-job pre{font-size:12px;max-height:240px}.media-workbench .media-project-list{max-width:900px;padding:12px 0 24px}.media-workbench .media-project-list .w-row-button{padding:20px 16px;border:0;border-radius:0;background:transparent}.media-workbench .media-assets-view,.media-workbench .media-exports-view,.media-workbench .media-environment{padding:24px 0;width:min(900px,100%)}.media-workbench .media-assets-view>.w-muted,.media-workbench .media-exports-view>.w-muted{margin-top:12px}.media-workbench .media-asset-list,.media-workbench .media-export-list{list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column}.media-workbench .media-asset-list>li,.media-workbench .media-export-list>li{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0;padding:18px 0;border-bottom:1px solid var(--w-border)}.media-workbench .media-asset-list>li>div,.media-workbench .media-export-list>li>div{flex:1;min-width:180px;overflow-wrap:anywhere}.media-workbench .media-asset-list img{width:80px;height:60px;object-fit:contain;border-radius:6px;background:var(--w-soft)}.media-workbench .media-export-list p{margin-top:5px}.media-workbench .media-export-list .w-tag{margin-top:8px}.media-workbench .media-environment>p{margin:14px 0}.media-workbench .media-environment>button{margin-top:12px}.media-workbench.dmw button.primary{background:var(--w-primary);border-color:var(--w-primary);color:var(--w-on-primary)}.media-workbench .card{border:0;border-bottom:1px solid var(--w-border);border-radius:0;padding:20px 0;background:transparent;box-shadow:none}.media-workbench .notice{background:var(--w-soft);color:var(--w-text);border:1px solid var(--w-border)}.media-workbench .notice.error{color:var(--dsw-alias-state-error-primary,#ad3636)}.media-workbench .media-project-list .bar{justify-content:space-between;border-bottom:1px solid var(--w-border);padding:16px 0}.media-workbench .media-exports-view .w-section h3{margin-bottom:12px}.media-workbench .media-environment button{border:1px solid var(--w-border);border-radius:8px;background:var(--w-primary);color:var(--w-on-primary);padding:8px 12px;font-size:14px;min-height:36px}.media-workbench .media-properties a{font-size:12px}.media-workbench :focus-visible{outline:2px solid var(--w-accent);outline-offset:3px}
+@container dsh-workbench (max-width:1050px){.media-workbench .media-editor{grid-template-columns:240px minmax(0,1fr)}.media-workbench .media-properties{grid-column:1/-1;border-inline-start:0;border-top:1px solid var(--w-border);padding:20px 0;display:grid;grid-template-columns:1fr 1fr;gap:20px}.media-workbench .media-properties>h3{grid-column:1/-1;margin:0}.media-workbench .media-properties>.w-section{padding:0;border:0}.media-workbench .media-preview-workspace{padding-inline-end:0}}
+@container dsh-workbench (max-width:760px){.media-workbench .media-editor{display:flex;flex-direction:column}.media-workbench .media-content-fields{border-inline-end:0;padding:20px 0}.media-workbench .media-preview-workspace{order:-1;padding:20px 0}.media-workbench .media-properties{display:block}.media-workbench .media-properties>.w-section{padding:20px 0;border-top:1px solid var(--w-border)}.media-workbench .media-empty-preview{max-height:440px}.media-workbench .media-player-wrap video{max-height:480px}.media-workbench .media-asset-list>li>div{min-width:120px}}
+@media(max-width:700px){.media-workbench.dmw[data-main=true]{padding:calc(16px + var(--dsh-frame-top-clearance,0px)) 16px 0 max(16px,var(--dsh-frame-leading-clearance,0px))}}
+`;
+
+        const engine = 'hyperframes', title = engine === 'hyperframes' ? 'HyperFrames' : 'Remotion', route = 'api/dsh-' + engine + '/workbench';
+        function mediaError(error, en) {
+            const message = typeof error === 'string' ? error : error?.message || String(error || '');
+            if (!en || !/[\u3400-\u9fff]/.test(message))
+                return message;
+            if (error?.status === 401)
+                return 'Your session expired. Reopen DSH and try again.';
+            if (/先归档|已达 30/.test(message))
+                return 'The 30 active project slots are full. Archive another project before creating or restoring one.';
+            if (/已有预览或渲染/.test(message))
+                return 'Stop the active preview or cancel the render before archiving or restoring a project.';
+            if (error?.status === 409 || /已.*更新|另一窗口|修订/.test(message))
+                return 'The project changed. Reopen the latest version and compare it with your preserved input.';
+            if (/标题/.test(message))
+                return 'Enter a title up to 72 characters.';
+            if (/时长/.test(message))
+                return 'Set a duration between 3 and 30 seconds.';
+            if (/正文/.test(message))
+                return 'Use body text up to 360 characters.';
+            if (/素材|PNG|JPEG|MP3|WAV|MP4/.test(message))
+                return 'Check the media format and file contents. Each asset must be ≤20 MB; a project supports 12 assets and 40 MB total, with one audio and one video background.';
+            if (/任务|官方|FFmpeg|Chrome|环境/.test(message))
+                return 'The official task did not finish. Open the job log and check the render environment, then retry. Your project is preserved.';
+            if (/工程记录|项目目录|文件/.test(message))
+                return 'The project files could not be read safely. Back them up and check their location and permissions before retrying.';
+            return 'The operation failed. Check the DSH logs and reload the project before retrying; your input is preserved.';
+        }
+        let cache = { project: null, fields: null, dirty: false, job: null, creating: false };
+        const empty = () => ({ template: 'title', title: '', body: '', format: 'landscape', duration: 8 });
+        const fieldsOf = p => ({ template: p.template, title: p.title, body: p.body, format: p.format, duration: p.duration });
+        const css = `.dmw{font:14px/1.6 system-ui,sans-serif;color:var(--fg,#142D39);min-width:0;padding:8px}.dmw *{box-sizing:border-box}.dmw h2{margin:0;font-size:23px}.dmw h3{font-size:17px;margin:8px 0}.dmw .muted{color:var(--fg-muted,#677881);font-size:13px}.dmw .bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}.dmw button,.dmw .button{font:inherit;color:inherit;background:var(--bg-surface,#fff);border:1px solid var(--border,#c8d6d9);border-radius:9px;padding:8px 12px;cursor:pointer;white-space:normal;text-decoration:none}.dmw button.primary{background:#df5639;border-color:#df5639;color:white}.dmw button:disabled{opacity:.45;cursor:default}.dmw input:not([type=file]),.dmw textarea,.dmw select{font:inherit;color:inherit;width:100%;border:1px solid var(--border,#b9cccd);border-radius:8px;padding:9px;background:var(--bg,#fff)}.dmw label{display:block;margin:10px 0 4px}.dmw .card{border:1px solid var(--border,#ccd7d6);border-radius:12px;padding:14px;margin:12px 0;min-width:0;background:var(--bg-surface,#fff)}.dmw .notice{border-radius:8px;padding:10px;margin:10px 0;background:#eef5ed;color:#28573e;overflow-wrap:anywhere}.dmw .error{background:#fff0ec;color:#943b27}.dmw .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.dmw .projects{display:grid;gap:8px}.dmw .projects button{text-align:left;width:100%}.dmw img{width:90px;height:70px;object-fit:contain}.dmw .assets{display:flex;flex-direction:column;gap:8px}.dmw .asset{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.dmw video{width:100%;max-height:400px;background:#142D39;border-radius:10px}.dmw pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;margin:8px 0;max-height:220px;overflow:auto}.dmw :focus-visible{outline:3px solid #79CDB4;outline-offset:2px}[role=dialog]:has(.dmw){width:min(1160px,calc(100vw - 40px))!important;max-width:1160px!important}@media(max-width:700px){.dmw{padding:3px}.dmw .row{grid-template-columns:1fr}[role=dialog]:has(.dmw){width:100%!important;max-width:100%!important;flex-direction:column!important}[role=dialog]:has(.dmw)>nav+div{min-width:0;width:100%}[role=dialog]:has(.dmw)>nav+div>div:has(.dmw){padding:12px!important;min-width:0}[role=dialog]:has(.dmw) nav{width:100%!important;flex-basis:auto!important;border-right:0;max-height:170px;overflow:auto}[role=dialog]:has(.dmw) nav>div:has(>button){display:flex;flex-direction:row!important;flex-wrap:wrap;gap:4px}}`;
+        async function api(body) {
+            const response = await fetch(new URL(route, document.baseURI), { method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/json', 'x-dsh-media': '1' }, body: JSON.stringify(body) });
+            let data;
+            try {
+                data = await response.json();
+            }
+            catch {
+                throw new Error('无法读取插件响应，请检查是否已经重启 DSH。');
+            }
+            if (!response.ok || !data.ok) {
+                const error = new Error(data.message || '操作未完成');
+                error.status = response.status;
+                throw error;
+            }
+            return data.value;
+        }
+        function urlFor(project, kind, extra = {}) { const url = new URL(route, document.baseURI); url.search = new URLSearchParams({ id: project.id, kind, ...extra }); return url.href; }
+        function Workbench({locale,workbench=false}={}) {
+const [editorTab,setEditorTab]=useState('content'),[libraryTab,setLibraryTab]=useState('projects');const controlId=React.useId();
+            const [lang, setLang] = useState('zh'), [projects, setProjects] = useState([]), [archived, setArchived] = useState([]), [archiveReview, setArchiveReview] = useState(false), [environment, setEnvironment] = useState(null), [templates, setTemplates] = useState([]);
+            const [project, setProject] = useState(cache.project), [fields, setFields] = useState(cache.fields || empty()), [dirty, setDirty] = useState(cache.dirty), [creating, setCreating] = useState(cache.creating);
+            const [job, setJob] = useState(cache.job), [busy, setBusy] = useState(false), [error, setError] = useState(''), [notice, setNotice] = useState(''), [pending, setPending] = useState(null), [conflict, setConflict] = useState(false);
+            const busyRef = useRef(false), fileRef = useRef(null), latest = useRef({ project, fields, dirty });
+            latest.current = { project, fields, dirty };
+            const t = (zh, en) => lang === 'en' ? en : zh, activeJob = job?.state === 'running', running = busy || activeJob && job.kind !== 'prepare';
+            const stage = lang === 'en' ? ({ '下载环境': 'Preparing environment', '检查 FFmpeg': 'Checking FFmpeg', '下载官方依赖': 'Downloading official dependencies', '检查官方环境': 'Checking official CLI', '检查或下载 Chrome': 'Checking or downloading Chrome', '下载专用渲染浏览器': 'Downloading the official rendering browser', '准备修订快照': 'Preparing saved revision', '启动官方预览': 'Starting official preview', '官方预览已就绪': 'Official preview is ready', '检查合成': 'Checking composition', '渲染 MP4': 'Rendering MP4', '已完成': 'Completed', '已取消': 'Cancelled', '已取消；工程已保留': 'Cancelled; project preserved', '官方任务未完成，请展开运行记录后重试。工程已保留。': 'The official task failed. Open the job log and retry; your project is preserved.', '未找到 FFmpeg，请安装并加入 PATH，重启 DSH 后重试。工程已保留。': 'FFmpeg was not found. Install it, add it to PATH, then restart DSH and retry; your project is preserved.' }[job?.stage] || mediaError(job?.stage, true)) : job?.stage;
+            useEffect(() => { const update = () => setLang(String(locale?.getSnapshot?.().active || '').startsWith('en') ? 'en' : 'zh'); update(); return locale?.subscribe?.(update); }, [locale]);
+            useEffect(() => { cache = { project, fields, dirty, job, creating }; }, [project, fields, dirty, job, creating]);
+            useEffect(() => { const exit = e => { if (latest.current.dirty) {
+                e.preventDefault();
+                e.returnValue = '';
+            } }; window.addEventListener('beforeunload', exit); return () => window.removeEventListener('beforeunload', exit); }, []);
+            async function refresh() {
+                const data = await api({ action: 'list' });
+                setProjects(data.projects);
+                setArchived(data.archivedProjects || []);
+                setEnvironment(data.environment);
+                setTemplates(data.templates);
+                const current = latest.current, saved = !current.dirty && data.projects.find(row => row.id === current.project?.id);
+                if (saved) {
+                    setProject(saved);
+                    setFields(fieldsOf(saved));
+                }
+                setJob(previous => data.jobs.find(row => row.id === previous?.id) || data.jobs.filter(row => row.state === 'running').at(-1) || data.jobs.at(-1) || null);
+            }
+            useEffect(() => { refresh().catch(e => setError(e)); }, []);
+            useEffect(() => {
+                if (!job || job.state !== 'running')
+                    return;
+                let live = true, polling = false;
+                const timer = setInterval(async () => {
+                    if (polling)
+                        return;
+                    polling = true;
+                    try {
+                        const next = await api({ action: 'job', job: job.id });
+                        if (!live)
+                            return;
+                        // Refresh output before the terminal state tears down this polling effect.
+                        if (next.state !== 'running')
+                            await refresh();
+                        else
+                            setJob(next);
+                    }
+                    catch (e) {
+                        if (live) {
+                            setError(e);
+                            setJob(null);
+                        }
+                    }
+                    finally {
+                        polling = false;
+                    }
+                }, 1000);
+                return () => { live = false; clearInterval(timer); };
+            }, [job?.id, job?.state]);
+            async function perform(fn) { if (busyRef.current)
+                return; busyRef.current = true; setBusy(true); setError(''); setNotice(''); try {
+                return await fn();
+            }
+            catch (e) {
+                setError(e);
+                setConflict(e.status === 409);
+            }
+            finally {
+                busyRef.current = false;
+                setBusy(false);
+            } }
+            async function open(id) { const next = await api({ action: 'get', id }); setProject(next); setFields(fieldsOf(next)); setCreating(false); setDirty(false); setConflict(false); setPending(null); setArchiveReview(false); }
+            function navigate(target) { if (dirty) {
+                setPending(target);
+                return;
+            } perform(() => move(target)); }
+            async function move(target) { if (target === 'new') {
+                setProject(null);
+                setFields(empty());
+                setCreating(true);setEditorTab('content');
+            }
+            else if (target === 'list') {
+                setProject(null);
+                setCreating(false);
+                await refresh();
+            }
+            else
+                await open(target); setDirty(false); setPending(null); }
+            async function save() { const next = await api(project ? { action: 'update', id: project.id, revision: project.revision, fields } : { action: 'create', fields }); setProject(next); setFields(fieldsOf(next)); setCreating(false); setDirty(false); setConflict(false); setNotice(t('工程已保存。', 'Project saved.')); await refresh(); return next; }
+            async function upload(event) {
+                const file = event.target.files?.[0];
+                if (!file)
+                    return;
+                await perform(async () => {
+                    if (!project || dirty)
+                        throw new Error(t('请先保存工程，再上传素材。', 'Save your project before uploading media.'));
+                    if (file.size > 20 * 1024 * 1024)
+                        throw new Error(t('单个素材不能超过 20 MB。', 'Each asset must be at most 20 MB.'));
+                    const response = await fetch(new URL(route + '/upload', document.baseURI), { method: 'POST', credentials: 'same-origin', headers: { 'content-type': 'application/octet-stream', 'x-dsh-media': '1', 'x-project-id': project.id, 'x-project-revision': String(project.revision), 'x-file-name': encodeURIComponent(file.name) }, body: file });
+                    const result = await response.json();
+                    if (!response.ok || !result.ok) {
+                        const e = new Error(result.message);
+                        e.status = response.status;
+                        throw e;
+                    }
+                    setProject(result.value);
+                    setNotice(t('素材副本已保存，原文件未改变。', 'A media copy was saved; your original is unchanged.'));
+                });
+                event.target.value = '';
+            }
+            async function start(action) { await perform(async () => { if (action !== 'prepare' && dirty)
+                throw new Error(t('请先保存修改。', 'Save changes first.')); setJob(await api({ action, id: project?.id, revision: project?.revision })); }); }
+            async function archiveProject() { await api({ action: 'archive', id: project.id, revision: project.revision, confirmed: true }); setArchiveReview(false); setProject(null); setCreating(false); setDirty(false); await refresh(); setNotice(t('工程已归档，素材和成品均保留，可在下方恢复。', 'Project archived. Media and output are preserved; restore it below.')); }
+            const render=project?.renders?.[0],stale=render && (dirty || render.revision!==project.revision);
+const canSave=fields.title.trim().length>0 && fields.title.length<=72 && Number.isInteger(fields.duration) && fields.duration>=3 && fields.duration<=30;
+            if(!environment) return h(W.Page,{workbench,title,subtitle:t('编辑视频工程，预览并导出 MP4。','Edit video projects, preview and export MP4.'),className:'dmw media-workbench'},h('style',null,MEDIA_WORKBENCH_CSS),error?h(W.Empty,{title:t('暂时无法读取工程','Projects are unavailable'),action:h(W.Button,{disabled:busy,onClick:()=>perform(refresh)},t('重新读取项目','Reload projects'))},mediaError(error,lang==='en')):h(W.Empty,{title:t('正在读取工程与渲染环境…','Loading projects and render environment…'),icon:'video'}));
+            return h(W.Page,{workbench,title,subtitle:t('编辑视频工程，预览并导出 MP4。','Edit video projects, preview and export MP4.'),className:'dmw media-workbench',actions:h(React.Fragment,null,
+ project || creating ? h(W.Button,{icon:'left',disabled:running,onClick:()=>navigate('list')},t('返回项目','Back to projects')) : h(W.Button,{icon:'plus',variant:'primary',disabled:running,onClick:()=>navigate('new')},t('新建视频','New video')),
+ project || creating ? h(W.Button,{variant:'primary',disabled:running || !canSave || !!project && !dirty,onClick:()=>perform(save)},t('保存工程','Save project')) : h(W.IconButton,{icon:'refresh',label:t('刷新项目','Refresh projects'),disabled:running,onClick:()=>perform(refresh)}),
+ project ? h(W.Button,{icon:'download',disabled:running || dirty || !environment.ready,onClick:()=>start('render')},t('导出 MP4','Export MP4')) : null)},
+ h('style',null,css),h('style',null,MEDIA_WORKBENCH_CSS),h(W.Status,{tone:'error'},error && mediaError(error,lang==='en')),h(W.Status,{tone:'success'},notice),conflict && project && h('button', { disabled: running, onClick: () => { setPending(project.id); } }, t('重新打开最新版本（先处理当前输入）', 'Reopen latest version (review your current input first)')),
+ (project || creating) && !environment.ready ? h(W.Status,null,t('首次导出前需要准备本地渲染环境；内容可以先编辑和保存。','Prepare the local renderer before your first export. You can edit and save content now.'),h(W.Button,{variant:'ghost',onClick:()=>setEditorTab('environment')},t('查看环境','View environment'))) : null,
+ job ? h('div',{className:'media-job',role:job.state==='failed'?'alert':'status'},h('strong',null,t('任务状态：','Job status: ')+stage),job.url?h('a',{className:'w-button',href:job.url,target:'_blank',rel:'noopener noreferrer'},t('打开官方 Studio 预览','Open official Studio preview')):null,
+ job.state==='running'?h(W.Button,{disabled:busy,onClick:()=>perform(async()=>{await api({action:'cancel',job:job.id});setNotice(t('已请求停止；正在关闭本次任务。','Stopping this job.'));})},job.kind==='preview'?t('停止预览，返回编辑','Stop preview and return to editing'):t('取消任务','Cancel job')):null,
+ h('details',null,h('summary',null,t('查看运行记录','Show job log')),h('pre',null,job.lines.join('\n')))) : null,
+ h(W.Tabs,{label:t('视频工作台视图','Video workbench views'),value:project || creating ? editorTab : libraryTab,onChange:project || creating ? setEditorTab : setLibraryTab,items:project || creating ? [{id:'content',label:t('内容与预览','Content and preview')},{id:'assets',label:t('素材','Media')},{id:'exports',label:t('导出记录','Exports')},{id:'environment',label:t('环境','Environment')}] : [{id:'projects',label:t('当前工程','Projects'),count:projects.length},{id:'archives',label:t('已归档','Archived'),count:archived.length},{id:'environment',label:t('环境','Environment')}]},
+ !project && !creating ? libraryTab === 'environment' ? h('section',{className:'media-environment'},h('h3',null,t('渲染环境','Render environment')+(environment.ready?t(' · 已准备',' · ready'):t(' · 首次需下载',' · first download required'))),h('p', { className: 'muted' }, t(environment?.hint, 'First use downloads the official CLI. ' + (engine === 'hyperframes' ? 'Windows uses the official rendering browser; other platforms reuse installed Chrome when available. FFmpeg must be in PATH.' : 'Installed Chrome is reused; a browser is downloaded when needed. Remotion retains its official license.'))),
+engine === 'remotion' && h('p', null, h('a', { href: 'https://www.remotion.dev/license', target: '_blank', rel: 'noreferrer' }, t('查看 Remotion 使用许可证', 'Read the Remotion license'))),
+h('button', { disabled: busy || activeJob, onClick: () => start('prepare') }, environment?.ready ? t('重新检查 / 修复环境', 'Check / repair environment') : t('准备渲染环境', 'Prepare render environment'))) : libraryTab === 'archives' ? archived.length ? h('section',{className:'media-project-list'},h('p', { className: 'muted' }, t('归档保留素材与成品，不占当前 30 个工程名额。恢复后可以继续编辑。', 'Archives retain media and output, freeing an active project slot. Restore to edit again.')),
+archived.map(p => h('div', { className: 'bar', key: p.id }, h('strong', null, p.title), h('button', { disabled: busy || dirty || activeJob, onClick: () => perform(async () => { await api({ action: 'restore', id: p.id, revision: p.revision, confirmed: true }); await refresh(); await open(p.id); setNotice(t('工程已恢复。', 'Project restored.')); }) }, t('恢复工程', 'Restore project'))))) : h(W.Empty,{title:t('没有归档工程','No archived projects'),icon:'folder'}) : projects.length ? h('div',{className:'media-project-list'},projects.map(p=>h(W.Row,{key:p.id,title:p.title,disabled:running,meta:p.duration+t(' 秒 · 修订 ',' sec · revision ')+p.revision,description:(templates.find(row=>row.id===p.template)?.[lang==='en'?'en':'zh'] || p.template),onClick:()=>{setEditorTab('content');navigate(p.id);}}))) : h(W.Empty,{title:t('还没有视频工程','No video projects yet'),icon:'video'},t('点击“新建视频”，选择模板并保存。环境可以稍后准备。','Choose New video, select a template and save. The renderer can be prepared later.')) :
+ editorTab === 'environment' ? h('section',{className:'media-environment'},h('h3',null,t('渲染环境','Render environment')+(environment.ready?t(' · 已准备',' · ready'):t(' · 首次需下载',' · first download required'))),h('p', { className: 'muted' }, t(environment?.hint, 'First use downloads the official CLI. ' + (engine === 'hyperframes' ? 'Windows uses the official rendering browser; other platforms reuse installed Chrome when available. FFmpeg must be in PATH.' : 'Installed Chrome is reused; a browser is downloaded when needed. Remotion retains its official license.'))),
+engine === 'remotion' && h('p', null, h('a', { href: 'https://www.remotion.dev/license', target: '_blank', rel: 'noreferrer' }, t('查看 Remotion 使用许可证', 'Read the Remotion license'))),
+h('button', { disabled: busy || activeJob, onClick: () => start('prepare') }, environment?.ready ? t('重新检查 / 修复环境', 'Check / repair environment') : t('准备渲染环境', 'Prepare render environment'))) : editorTab === 'assets' ? h(MediaAssets,{project,dirty,running,fileRef,upload,perform,setProject,t}) : editorTab === 'exports' ? h(MediaExports,{project,dirty,running,activeJob,busy,setArchiveReview,t}) :
+ h('div',{className:'media-editor'},h('section',{className:'media-content-fields'},h('h3',null,t('模板与内容','Template and content')),h('div',{className:'media-field'},h('label', { htmlFor: controlId+'-template' }, t('模板', 'Template')),h('select', { id: controlId+'-template', disabled: running, value: fields.template, onChange: e => { setFields({ ...fields, template: e.target.value }); setDirty(true); } }, templates.map(row => h('option', { key: row.id, value: row.id }, lang === 'en' ? row.en : row.zh)))),
+h('div',{className:'media-field'},h('label', { htmlFor: controlId+'-title' }, t('标题（最多 72 字符）', 'Title (up to 72 characters)')),h('input', { id: controlId+'-title', value: fields.title, disabled: running, maxLength: 72, onChange: e => { setFields({ ...fields, title: e.target.value }); setDirty(true); } })),
+h('div',{className:'media-field'},h('label', { htmlFor: controlId+'-body' }, t('正文（轮播时每行对应一页）', 'Body (one line per slideshow page)')),h('textarea', { id: controlId+'-body', value: fields.body, disabled: running, maxLength: 360, rows: 4, onChange: e => { setFields({ ...fields, body: e.target.value }); setDirty(true); } })),dirty?h('p',{className:'w-muted'},t('有未保存修改；切换工程前会提醒。','Unsaved changes. You will be asked before switching projects.')):project?h('p',{className:'w-muted'},t('已保存 · 修订 ','Saved · revision ')+project.revision):null,project && h('button', { disabled: running || !dirty, onClick: () => { setFields(fieldsOf(project)); setDirty(false); setError(''); } }, t('取消修改', 'Discard changes'))),
+ h(MediaCanvas,{project,fields,render,dirty,stale,job,running,ready:environment.ready,busy,start,perform,setNotice,t}),
+ h('aside',{className:'media-properties'},h('h3',null,t('视频设置','Video settings')),h('div',{className:'media-field'},h('label', { htmlFor: controlId+'-format' }, t('画幅', 'Canvas')),h('select', { id: controlId+'-format', value: fields.format, disabled: running, onChange: e => { setFields({ ...fields, format: e.target.value }); setDirty(true); } }, ['landscape', 'portrait', 'square'].map((key, i) => h('option', { key, value: key }, [t('横屏 16:9', 'Landscape 16:9'), t('竖屏 9:16', 'Portrait 9:16'), t('正方形', 'Square')][i])))),
+h('div',{className:'media-field'},h('label', { htmlFor: controlId+'-duration' }, t('时长（3–30 秒）', 'Duration (3–30 seconds)')),h('input', { id: controlId+'-duration', type: 'number', min: 3, max: 30, value: fields.duration, disabled: running, onChange: e => { setFields({ ...fields, duration: Number(e.target.value) }); setDirty(true); } })),
+ h('section',{className:'w-section'},h('p',null,t('已上传素材 ','Uploaded media ')+(project?.assets.length || 0)),h(W.Button,{icon:'upload',disabled:!project || running || dirty,onClick:()=>setEditorTab('assets')},t('上传素材','Upload media')),project?h('a',{className:'w-button',href:urlFor(project,'source'),download:''},t('下载可编辑工程','Download editable project')):null),
+ h('p',{className:'w-muted'},t('导出使用本地 ','Exports use the local ')+title+t(' 引擎。',' engine.')),h('p',{className:'w-muted'},t('图片、音频和无声视频；单文件 20 MB，工程合计 40 MB。','Images, audio and muted video; 20 MB per file, 40 MB per project.')),engine==='remotion'?h('a',{href:'https://www.remotion.dev/license',target:'_blank',rel:'noopener noreferrer'},t('Remotion 许可说明','Remotion license')):null))),
+ pending ? h(W.Dialog,{title:t('有未保存的修改','Unsaved changes'),closeLabel:t('留在当前','Stay here'),busy:running,onClose:()=>setPending(null)},h('p', null, t('有未保存内容，如何继续？', 'You have unsaved changes.')),
+h('div', { className: 'bar' }, h('button', { disabled: running, onClick: () => perform(async () => { await save(); await move(pending); }) }, t('保存后继续', 'Save and continue')), h('button', { disabled: running, onClick: () => perform(() => move(pending)) }, t('放弃修改并继续', 'Discard and continue')), h('button', { onClick: () => setPending(null) }, t('留在当前', 'Stay here')))) : null,
+ project && archiveReview ? h(W.Dialog,{title:t('归档此工程','Archive this project'),closeLabel:t('取消归档','Cancel archive'),busy:busy || activeJob,onClose:()=>setArchiveReview(false)},h('p', null, t('归档后将从当前项目列表移走；工程、上传素材和已导出 MP4 全部保留，可随时恢复。未保存修改需先处理。', 'Archiving removes this project from the active list. The project, uploaded media and exported MP4s are preserved and can be restored. Save or discard pending edits first.')),
+h('div', { className: 'bar' }, h('button', { disabled: busy || dirty || activeJob, onClick: () => perform(archiveProject) }, t('确认归档', 'Confirm archive')), h('button', { disabled: busy, onClick: () => setArchiveReview(false) }, t('取消归档', 'Cancel archive')))) : null);
+        }
+        function apply(ctx) { let locale; try {
+            locale = ctx.get?.('locale') || ctx.locale;
+        }
+        catch { } W.register(ctx,{id:'dsh-'+engine+'.workbench',label:()=>title,icon:engine==='hyperframes'?'layers':'play',component:Workbench,inject:()=>({locale}),order:engine==='hyperframes'?65:66});
+ctx.slots.inject('settings.section', () => ctx.slots.register({ name: 'settings.section', id: 'dsh-' + engine, order: engine === 'hyperframes' ? 62 : 63, label: () => title, inject: () => ({ locale }) }, Workbench)); }
+        return { inject: ['slots', 'locale'], apply };
+    } });
+
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-hyperframes",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "DSH 视频插件：HyperFrames 技能、模板与素材工作台、官方预览和本地 MP4 导出。",
   "type": "module",
   "main": "lib/index.js",
@@ -36,7 +36,9 @@
     },
     "client": {
       "inject": [
-        "@deepseek-ai/dsh-client-ui-settings"
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-ui-layout",
+        "@deepseek-ai/dsh-client-ui-sidebar"
       ],
       "platform": "web"
     }