feat(web): add an interactive Compositor node canvas

Author Compositor graphs in the web UI with React Flow and execute
them locally. The native writer materializes RGB/Exposure/Invert/Blur/
Mix/Alpha Over/Transform/Viewer/Composite nodes into a real
CompositorNodeTree, the reader returns node locations and more node
types, and save/reopen keeps nodes, links, positions and properties.

Co-Authored-By: Claude Code <noreply@anthropic.com>

docs/status/WEB_BLENDER_FULL_COURSE_20261113.md

@@ -1,7 +1,7 @@
 # Web Blender 全站功能补齐与入门课程 — 实施进度
 
 日期：2026-11-13
-状态：**进行中（UV、Texture Paint、Geometry Nodes、Spreadsheet 完成；Compositor 与课程待实现）**
+状态：**进行中（UV、Texture Paint、Geometry Nodes、Spreadsheet、Compositor 完成；课程/视频与其余缺口待实现）**
 
 ## 本轮铁律
 
@@ -94,12 +94,32 @@
   - 对象 7 行 → 顶点表过滤/分页/列隐藏与重排/选择/CSV 下载，revision 不变；
   - 属性表含 position，UV/面/边可切换，切换网格后 OPFS 保存 → reload → 最近项目恢复 → 顶点表仍可用。
 
+### 7. Compositor 节点画布
+
+- 新 `web/app/src/app/ui/CompositorCanvas.tsx`：React Flow 画布，替换 Compositing 工作区的只读节点表。
+  支持添加/移除节点、端口拖拽连线、节点拖拽位置、属性编辑、设为合成输出、执行合成与 Viewer 结果预览。
+- 节点集：RGB 颜色、Exposure、Invert、Blur、Mix、Alpha Over、Transform、Viewer、Composite（含默认输出节点）。
+  执行复用 `protocol/compositor.ts` 的本地 CPU 求值器（320×320，Viewer 或 Composite 输出）。
+- 协议：`CompositorNodeIR` 增加可选 `location`（解析/校验 ±1e6）；`compositor-commands.ts` 增加
+  `createGraph/addNode/removeNode/moveNode/connect/disconnect/setProperty/setOutput`。
+- 原生（WASM 增量重建）：
+  - 实现 `web_engine_blend_main_set_compositor_node_graph`（此前只有声明）：
+    创建/复用 `CompositorNodeTree` 并挂到 `Scene.compositing_node_group`，清空后按 IR 建节点/连线/属性/位置，
+    设置 `NODE_DO_OUTPUT`、`R_DOCOMP` 与 ntree 更新标记；`NodeShaderMix` 以 RGBA/Mix 模式物化 Mix 节点。
+  - `web_engine_api.cpp` 补 `setCompositorNodeGraph` dispatch。
+  - reader 增加节点 `location`，并映射 Blur / AlphaOver / Transform / ShaderNodeMix 回 IR；
+    连线 socket 名做 RGB(Color→Image) 与 Mix(A_Color/B_Color/Result_Color) 的转换。
+- 验证：
+  `DISPLAY=:1 CHROME_PATH=/usr/bin/google-chrome GPU_MODE=hardware npx playwright test --config playwright.config.ts tests/e2e/web-compositor-canvas.spec.ts --workers=1`
+  → **2/2 PASS（17.8s）**：
+  - RGB → Exposure → Composite 建图、执行（结果像素可见）、提交后 revision 增长；
+  - OPFS 保存 → reload → 最近项目恢复 → 3 节点/2 连线/位置与 exposure=1.5 保留。
+- 回归：Geometry Nodes、Spreadsheet、UV、Texture Paint 共 8 个用例复跑 **8/8 PASS（2.1m）**。
+
 ## 待实现（按计划顺序）
 
-1. **Compositor 节点画布**：协议+React Flow+执行/Viewer；原生 writer/reader 缺失，需要最大的一次
-   WASM 工作。
-2. 其余缺口：Area 编辑器选择/⋮、Camera Perspective、Preferences、Outliner、Graph Editor。
-3. 15 模块课程、15 个短视频、OPFS 保存重开流程、增量发布到 `https://49.232.250.35:58014/`。
+1. 其余缺口：Area 编辑器选择/⋮、Camera Perspective、Preferences、Outliner、Graph Editor。
+2. 15 模块课程、15 个短视频、OPFS 保存重开流程、增量发布到 `https://49.232.250.35:58014/`。
 
 ## 已知限制 / 未验证
 
@@ -110,7 +130,10 @@
   `locx/locy`，保存重开保留节点/连线但不保留布局。Properties 表单与画布各自持有 draft，未完全共享。
 - Spreadsheet 只读当前网格缓冲，不读取 GN 修改器求值后的属性域（桌面 5.2 也无可编辑单元格）；
   单表上限 50,000 行，超出部分截断提示。
-- Compositor 画布尚未实现；课程/视频尚未开始。
+- Compositor：IMAGE / RENDER_LAYER 节点可在本地求值器中执行，但不写入 Main（无资源持久化入口）；
+  Transform 的 scaleY 以 scaleX 统一写入；Alpha Over 的 Factor 不持久化；保存重开后节点 id 由原生
+  identifier 重新生成（节点名、类型、位置、连线与属性保留）。MIX 仅持久化 RGBA/Mix 模式。
+- 课程/视频尚未开始。
 - 本轮只验证 Chromium + RTX 4060；未验证其他浏览器。
 - 既有保存下载型 spec 尚未迁移；在迁移完成前不要把这些旧 spec 的失败当作产品回归。
 - 远端首次 wasm 加载 154–193 秒；课程录制只做本地，页面需提示首载时间。