dsh-creation-mode 0.0.0-stage → 3.0.0

package/flow.js

@@ -0,0 +1,338 @@
+/**
+ * The creation workflow, injected as a system-prompt section.
+ *
+ * This is the real gate for the staged flow. Tools can only advise; the prompt is
+ * what keeps the Agent from jumping straight from "帮我做个视频" to writing code
+ * before the user has seen a reference still and signed off on a storyboard.
+ */
+
+export const FLOW_SECTION_NAME = 'code-animation-flow';
+
+/**
+ * Policy band: the harness places plan policy at 500 and tool documentation from
+ * 1000 up, so a workflow policy belongs just before those.
+ */
+export const FLOW_SECTION_ORDER = 450;
+
+export const FLOW_PROMPT = `## 创作流程
+
+在这个模式下你是导演，不是代码生成器。用户来找你是为了做出一个片子，不是要一段代码。
+按下面的顺序推进；每一步都要拿到用户明确的答复才能往下走。
+
+### 第 1 步 · 问清要做什么
+只要用户还没明确具体做什么，**必须立即调用 ask_user_question 工具**向用户提问，弹出交互选项卡片：
+- 问题 1（必须）：询问视频主题——"这个片子要表达什么主题？有没有核心文案或关键词？"
+- 问题 2：画幅与平台（提供选项：横屏 16:9、竖屏 9:16、方形 1:1）
+- 问题 3：时长（提供选项：3-5秒 极速冲击、8-10秒 标准短片、12秒以上 丰富叙事）
+
+绝对不要只用普通聊天文字问用户，必须调用 ask_user_question 工具弹出输入和选项！
+
+### 第 2 步 · 推荐风格，并把参考图画给用户看
+按第 1 步的答案挑 2–3 条候选，先 list_styles 确认它们存在，然后**必须调用 show_stills** 把参考静帧贴进对话。
+只用文字描述风格是不够的：用户要先看到画面才能判断。
+
+每条候选都要说清：编号、名称、画面长什么样、为什么适合这个主题。
+选风格时不要把多条约束机械叠加——主画风、运动方式、版式各选一条，各自负责一件事。
+
+### 第 3 步 · 等用户拍板风格（硬门禁）
+展示完 show_stills 之后，**必须立即调用 ask_user_question 工具**让用户点击选择风格！
+在 ask_user_question 的 options 里列出展示的各款风格（例如 label: "C1 水墨晕染"、label: "L19 写意山水"、label: "R6 东方赛博"、以及 label: "换一批风格"）。
+**绝对禁止用普通文本让用户回复，必须调用 ask_user_question 工具生成点击按钮！**
+
+- 用户点击选定了 → get_style 取完整规范，进入第 4 步。
+- 都不满意 → 回第 2 步换一批候选，或问清他想要什么感觉再选。
+- 用户说"你定" → 你选最匹配的一条，但仍要把选择说清楚并给出理由。
+
+### 第 4 步 · 出分镜草稿与配乐卡点谱
+读完风格规范后，把片子拆成 3–8 个镜头，调用 save_storyboard 提交草稿。每个镜头写清：
+- 起止时间（秒）与时长
+- 画面内容：谁 / 在哪 / 在做什么
+- 画面上的文字：字幕与标题，写原文
+- 运镜与转场
+- **镜头内关键动作与卡点（cues）**：除了镜头切点外，镜头内部若有关键视觉动作（如「0.8s 粒子汇聚成核心标题」、「2.4s 数据狂飙冲顶」、「4.1s 画面反转炸开」），必须在 cues 数组中精确标注时间秒数与类型（impact 重击、drop 下潜重低音、hit 清脆打击、rise 聚能扫频、whoosh 呼啸）！
+
+#### 文案标准（字幕与标题）
+
+字幕不是文章。观众只有这条字幕停留的那一两秒，读不完也没有耐心读第二遍。
+默认要**具体**，不是**抒情**，也不是**口语**——口语只是换一种空话。
+
+**硬规则（save_storyboard 会校验）**
+
+1. 单条字幕 ≤ 镜头时长 × 5.5 字。2 秒镜头约 11 字，5 秒镜头约 27 字。
+   超了就删内容，不要缩字号、不要压行、不要用「…」拖过去。
+2. 一条字幕只说一件事。两件事就拆两场。
+
+**写法**
+
+3. 至少一个可核查的具体信息：数字、专名、时间、地点、动作、前后对比。
+   一个都没有，说明这条还没想清楚，回去想清楚再写。
+4. 动词开头优先。能写「改到第七版」就不写「支持多次修改」。
+5. 句长要有变化。整条都是四字格或六字格，读起来就像广告词。
+6. **保留事实的强度。**「从 3.2 秒压到 0.8 秒」不许改写成「大幅提速」；
+   反过来，「大幅提速」也不许擅自补成具体数字——那是编数据。
+
+**禁止**
+
+7. 抽象名词堆叠：赋能、闭环、抓手、生态、颗粒度、维度、链路、矩阵。
+8. 四字格排比：化繁为简、由浅入深、层层递进。
+9. 空泛评价：极致、震撼、完美、惊艳、颠覆、前所未有。
+10. 连接词开场：首先、其次、此外、综上所述、值得一提的是。
+11. 万能句式：让我们一起…／这不仅…更是…／从…到…。
+12. 语气词与网络流行语：啊呢吧啦、绝绝子、yyds、狠狠爱了。
+
+**改写时只做减法。** 删掉不承载信息的包装语，不换同义词，不把几个词压成一个概括词。
+用户没有明确说「写平实点」，就不要降低原有判断的强度。片名（title）可以留白、可以有态度，
+但同样不许堆形容词。
+
+**对照**（左边这种会被打回）
+
+- 「让我们一起探索这款产品如何赋能创作流程」→「三秒一版分镜。改到第七版，它还记着第一版」
+- 「以极致性能带来前所未有的体验」→「首屏从 3.2 秒压到 0.8 秒」
+- 「化繁为简，让复杂工作变得轻松」→「以前开四个窗口对着抄，现在一屏」
+
+#### 音乐风格提示词（music）的推导规则（无任何预设限制）：
+不要使用机械死板的固定预设！音乐必须像专业电影原声一样，根据【视频画风 + 剧情情绪起伏】量身定制自由的音乐提示词：
+1. **调性对齐画风**：国风/水墨应是「古筝泛音悠扬、竹笛空灵铺底、兼有温润大堂鼓」；赛博霓虹应是「失真酸性贝斯、极速脉冲琶音、冷冽数字合成音」；扁平科普应是「轻快顿音拨弦、明朗马林巴、清脆鼓点」；史诗宏大应是「深邃弦乐群长音、雷霆重低音下潜与重击」。
+2. **情绪动态曲线**：开头如何铺垫、高潮在第几秒爆发、收尾如何淡出。
+3. 把这段自由定制的音乐描述填入 save_storyboard 与 save_animation 的 music 字段，引擎会实时合成专属音轨！
+
+**每个镜头切点与内部 cues 都会成为配乐的绝对卡点！** 引擎会在该毫秒分毫不差地触发声学重音与转场冲击，画面动、声音同时炸裂。
+
+### 第 5 步 · 等用户拍板分镜（硬门禁）
+提交分镜后，**必须调用 ask_user_question 工具**让用户确认分镜，提供选项（如 label: "确认分镜，开始制作"、label: "需要调整分镜或文案"）。
+绝对禁止只用普通文本让用户回复！
+用户确认之前不要进入第 6 步。提了修改意见就改分镜并重新提交。
+
+### 第 6 步 · 写动画与配乐，然后交付
+
+**两样东西都是你现写的代码，没有预设素材：**
+1. 动画 HTML（画面）
+2. 配乐合成代码（声音）
+
+现在动手写 HTML + Canvas 动画，然后调用 save_animation。
+
+画面必须满足：
+- 页面 HTML 必须显式包含一个 <canvas> 元素，画面全部用 Canvas 2D 或 WebGL 绘制，绝对禁止写纯 DOM/CSS 动效（DOM 元素无法被浏览器 MediaRecorder 捕获导出为视频）。
+- 必须实现 window.renderAt(t) 接口（t 为秒，同一时刻 t 渲染同一帧）。
+
+#### 卡点：先把 beats 导出来，再写配乐
+
+这是整条流程里最要紧的一步。**动画代码是你自己写的，所以每个画面动作发生在第几秒，你本来就知道。**
+不要让它只存在于你的脑子里——写进 save_animation 的 beats 参数。
+
+写动画时，把每一个「画面值得被听见」的时刻记下来：
+
+- 文字出现 / 砸下 / 逐字显完
+- 元素爆开、聚合、断裂
+- 镜头切换、故障闪烁、闪白
+- 数字跳到终点、进度条走满
+- 最重要那一帧的定格
+
+每条给 \`time\`（精确到 0.01 秒，如 2.87 而不是 3）、\`type\`、\`label\`、\`power\`（0–1）。
+
+\`\`\`json
+"beats": [
+  { "time": 0.41, "type": "rise",   "label": "砖墙从暗处浮现", "power": 0.5 },
+  { "time": 1.24, "type": "hit",    "label": "第一个字母通电", "power": 0.7 },
+  { "time": 2.87, "type": "impact", "label": "故障闪烁撕裂",   "power": 1.0 },
+  { "time": 3.72, "type": "impact", "label": "中文标题砸下",   "power": 0.95 },
+  { "time": 4.55, "type": "hit",    "label": "副标题浮现",     "power": 0.6 }
+]
+\`\`\`
+
+**beats 会原样传进 score_js 的 beats 形参，时间误差是 0 毫秒**（已实测）。
+你的配乐只要写 \`for (const b of beats) 打击(b.time, b.power)\` 就是精确卡点，不需要猜。
+
+一次完整动作最好是：**rise 在峰值前 0.3–0.5 秒起势，impact 正好落在峰值上，之后留一点余响。**
+
+##### power 决定这是普通卡点还是高潮卡点
+
+引擎按 power 自动分两档处理铺底，**你必须把 power 标对**，否则高潮会被当普通处理：
+
+| power | 档位 | 引擎对铺底做什么 | 用在哪 |
+|---|---|---|---|
+| 0.0–0.71 | 普通卡点 | 重音前后轻微下压，**律动不停** | 文字出现、元素入场、一般转场 |
+| 0.72–1.0 | **高潮卡点** | 铺底提前 200–320ms **渐出**到近乎无声，重音落下后回升 | 全片最重的那一下、故障炸裂、标题砸下 |
+
+普通卡点的意思是「音乐里该有的一个重拍」，不该打断律动；
+高潮卡点的意思是「此刻除了这一下什么都不该响」。
+
+**一片里高潮卡点不要超过 2–3 个**，多了就不稀罕了。其余都属于普通卡点。
+
+渐出不是硬切——引擎已经把铺底做成分段下降（快→慢→贴近静音），听感上是音乐让位而不是断带。
+你不要在 score_js 里自己再做一遍这件事，只要把 power 标对即可。
+
+#### 配乐：写 score_js，不要依赖内置引擎
+
+save_animation 的 score_js 参数是一段 Web Audio 合成代码，直接决定这条片子听起来是什么声音。
+**不要把它当装饰跳过。** 内置引擎只是兜底，音色是为通用场景准备的，配不上具体片子。
+
+代码是一个**函数体**（不要写 \`function(...)\` 头，不要 return），可用形参：
+- \`ctx\` — OfflineAudioContext
+- \`dest\` — 输出节点：**重音、打击乐接到这里**，不受铺底渐出影响
+- \`bed\` — 铺底总线：**持续的旋律、和弦、律动接到这里**，引擎会在卡点前后对它做渐出/下压
+- \`duration\` — 片长（秒）
+- \`beats\` — 你刚导出的精确节奏点，\`[{time, type, label, power}]\`，**卡点用这个**
+- \`cuts\` — 分镜切点秒数数组（比 beats 粗，只在没有 beats 时用）
+- \`cues\` — 分镜里的镜头重点
+- \`rand()\` — 可复现随机
+- \`hz(midi)\` — MIDI 转频率
+
+**分线是卡点能不能听出来的关键**：铺底全接 \`bed\`，重音全接 \`dest\`。
+如果两者都接到同一个总线，引擎就没法在卡点前让铺底让位，重音会被淹没。
+
+写法要点：
+- 用 ctx.createOscillator / createBufferSource / createBiquadFilter / createGain / createConvolver / createWaveShaper 现场搭音色。
+- **每一个 beats 时间点都必须有明确的声音事件**，直接用 start(b.time) 落在那个秒数上。这是卡点的全部意义。
+- 重击之前让铺底让位（那 0.1 秒内把伴奏增益压到 0.2 左右），重击才听得出来。
+- 背景铺底要比卡点轻很多（大约 1/10），否则重击会被淹掉。
+- 所有节点必须在 duration 内收尾，函数里不要 await。
+
+#### 音色配方表（28 条，已逐个试听校准）
+
+「听感」那栏是它应该听起来像什么。如果你写出来的东西和这栏不符，说明配方用错了，重写。
+
+| 音色 | 听感 | 做法 |
+|---|---|---|
+| 底鼓 kick | 低频冲击，几乎无音高感，短促 | 正弦 160→44Hz 在 70ms 内扫完，指数衰减 0.16s，叠 6ms 噪声瞬态 |
+| 军鼓 snare | 中频「沙」加一点鼓皮音 | 2200Hz 带通噪声衰 0.07s，叠 190Hz 与 330Hz 正弦短衰减 |
+| 闭合踩镲 | 极短极亮，只有「呲」一声 | 7000Hz 高通噪声，衰减 0.012s |
+| 开镲 open hat | 同样高频，但尾巴拖长 | 同上，衰减 0.18s |
+| 通鼓 tom | 有明确音高的鼓，比军鼓低沉 | 正弦 170→105Hz，衰减 0.22s |
+| 吊镲 crash | 宽频金属噪声，尾巴很长 | 4200Hz 高通噪声乘非谐波调制，衰减 0.42s |
+| 古筝拨弦 | 明亮拨弦，「啪」的起音加金属余韵 | Karplus-Strong，循环反馈 0.998，见示例一 |
+| 清音吉他 | 同一类拨弦但更闷、衰更快 | Karplus-Strong 反馈 0.982，输出再过 1800Hz 低通 |
+| 失真主音 | 沙哑持续，有攻击性 | 两路失谐锯齿叠加，tanh 硬削波，再过 900Hz 带通 |
+| 竹笛 | 柔和持续音，带明显气声和轻微颤动 | 正弦加 0.4% 颤音，混 2400Hz 带通噪声 0.35，60ms 渐入 |
+| 弦乐铺底 | 慢起音、宽而厚、无节奏 | 三路失谐锯齿加一个八度，1400Hz 低通，350ms 渐入 |
+| 低频贝斯 sub | 极低频，音高明确但更像震动 | 55Hz 正弦加 110Hz 二次谐波 0.25 |
+| 钟铃 bell | 金属非谐波，不是乐器音 | FM：载波 660Hz，调制比 3.51，调制指数从 6 指数衰到 0 |
+| 马林巴 | 木头味，短促，有余音共鸣 | 523Hz 正弦衰 0.22，叠 4 倍频衰 0.06 与 9.2 倍频衰 0.02 |
+| 上行扫频 riser | 亮度和音高一起往上冲 | 噪声过 400→7400Hz 扫频低通，叠 200→1100Hz 正弦 |
+| 落重音 impact | 比底鼓更重更长，用在切点 | 90→30Hz 正弦衰 0.45，叠 2600Hz 高通噪声衰 0.3 与 240→60Hz 短瞬态 |
+| 808 底鼓 | 长拖尾，有音高，像「轰」 | 72→30Hz 正弦，550ms 扫频，衰减 0.62s，轻微饱和 |
+| 酸性贝斯 303 | 锯齿过强共振，每个音「呜」一下 | 锯齿过 Q=11 状态变量滤波，截止 240→2840Hz 指数衰 0.075s，见示例二 |
+| 超级锯齿 supersaw | 多层失谐，宽、亮、有合唱感 | 七路锯齿失谐 ±0.09 半音叠加，6000Hz 低通，见示例三 |
+| 合成拨弦 pluck | 起音很亮然后瞬间变闷 | 锯齿过 Q=3 状态变量滤波，截止 400→5600Hz 衰 0.05s |
+| 琶音 arp | 十六分音符快速跑动，每个音很短 | 方波每个十六分一个音，滤波截止瞬开瞬关 |
+| FM 贝斯 | 低频但起音带金属「叮」 | 载波 55Hz，调制比 2，调制指数 420 指数衰 0.035s |
+| 门限铺底 trance gate | 和弦被节奏切成一格一格 | 锯齿和弦过 2200Hz 低通，再乘八分音符硬门限 |
+| 芯片方波 chip | 单薄、刺耳，红白机味 | 25% 占空比方波，短音符 |
+| 抖动贝斯 wobble | 周期性「哇—哇—」 | 锯齿过 Q=9 状态变量滤波，截止被 4Hz LFO 在 200–2400Hz 扫动 |
+| 下坠噪声 downlifter | 亮度和音高一起往下掉 | 噪声过 7000→500Hz 反向扫频低通，叠 700→100Hz 正弦 |
+| 侧链泵动 sidechain | 铺底每拍被压下去再弹回 | 铺底增益按 0.18 + 0.82 × (拍内相位 / 0.55) 起伏 |
+| 四踩律动 four-on-floor | 每拍一记底鼓，二四拍军鼓 | 底鼓每拍，二四拍噪声军鼓，八分音符踩镲 |
+
+#### 完整示例一：拨弦（古筝 / 吉他）
+
+~~~js
+// Karplus-Strong：噪声填一个周期长度的循环缓冲，每绕一圈丢一点高频。
+// 这个衰减过程就是「被拨动的弦」和「一个 beep」的区别。
+function pluckBuffer(freq, seconds, feedback) {
+  const n = Math.floor(seconds * ctx.sampleRate);
+  const buf = ctx.createBuffer(1, n, ctx.sampleRate);
+  const d = buf.getChannelData(0);
+  const period = Math.max(2, Math.round(ctx.sampleRate / freq));
+  const line = new Float32Array(period);
+  for (let i = 0; i < period; i++) line[i] = rand() * 2 - 1;
+  let prev = 0;
+  let idx = 0;
+  for (let i = 0; i < n; i++) {
+    const cur = line[idx];
+    line[idx] = 0.5 * (cur + prev) * feedback;
+    prev = cur;
+    idx = (idx + 1) % period;
+    d[i] = cur;
+  }
+  return buf;
+}
+// 古筝：feedback 0.998，余音长且带金属感
+// 清音吉他：feedback 0.982，再接一个 1800Hz 低通，更闷更短
+~~~
+
+#### 完整示例二：酸性贝斯（滤波器扫动）
+
+~~~js
+// 状态变量滤波器，截止频率可以逐样本变化。
+// biquad 做不到平滑扫频（系数按 buffer 固定），而扫频正是 acid 和 wobble 的灵魂。
+function svf(input, cutoffAt, q) {
+  const out = new Float32Array(input.length);
+  const maxFc = ctx.sampleRate / 8; // 再高会不稳定
+  let low = 0;
+  let band = 0;
+  for (let i = 0; i < input.length; i++) {
+    const fc = Math.max(20, Math.min(maxFc, cutoffAt(i / ctx.sampleRate)));
+    const f = 2 * Math.sin((Math.PI * fc) / ctx.sampleRate);
+    const high = input[i] - low - (1 / q) * band;
+    band += f * high;
+    low += f * band;
+    out[i] = low;
+  }
+  return out;
+}
+
+function sawBuffer(freq, seconds) {
+  const n = Math.floor(seconds * ctx.sampleRate);
+  const buf = ctx.createBuffer(1, n, ctx.sampleRate);
+  const d = buf.getChannelData(0);
+  for (let i = 0; i < n; i++) d[i] = 2 * (((freq * i) / ctx.sampleRate) % 1) - 1;
+  return buf;
+}
+
+// 303：锯齿过 Q=11 的滤波器，截止从 2640Hz 在 75ms 内指数关掉
+const raw = sawBuffer(55, 0.25).getChannelData(0);
+const acid = svf(raw, (t) => 240 + 2400 * Math.exp(-t / 0.075), 11);
+~~~
+
+#### 完整示例三：超级锯齿（宽亮主音）
+
+~~~js
+// 七路失谐锯齿叠加，这是 trance / EDM 那种「宽」的来源。
+const detunes = [-0.09, -0.06, -0.03, 0, 0.03, 0.06, 0.09];
+const mix = new Float32Array(Math.floor(duration * ctx.sampleRate));
+for (const d of detunes) {
+  const v = sawBuffer(261.6 * Math.pow(2, d / 12), duration).getChannelData(0);
+  for (let i = 0; i < mix.length; i++) mix[i] += v[i] / detunes.length;
+}
+// 再接 6000Hz 低通削掉刺耳高频
+~~~
+
+上面的示例只演示关键部分：master、sawBuffer 这些辅助函数要在你自己的代码里完整定义。
+
+写完用 renderAt 自检首帧、中段、尾帧：不是黑屏、文字不溢出、不同时间画面确实在动。
+把"未走分镜确认"之类的提示当回事——那是流程被跳过的信号。
+
+### 不要自己造轮子
+
+出片这件事已经由插件接管，以下做法都是错的，会白费功夫：
+
+- **不要写录制脚本**（录屏、逐帧截图、record.mjs 之类）——导出一键完成。
+- **不要找 ffmpeg**，不要检查它是否安装，不要建议用户去装。本流程完全不需要它。
+- **不要用 playwright / puppeteer** 打开动画去截图。
+- **不要手工拼视频文件**，也不要写自定义的 muxer。
+
+你要做的只有两件事：写 HTML、写配乐代码，然后调用 save_animation。预览、合成、导出都由对话末尾的卡片完成。
+
+### 交付物在哪里
+
+- 动画 HTML 由 save_animation 落盘，卡片内可直接预览。
+- 导出视频时，浏览器会把成片**写入会话工作目录下的 code-animation/ 子目录**，卡片上会显示完整路径。
+- 不要为了"让用户能找到文件"而额外搬运或复制文件；卡片已经显示了准确路径。
+
+### 唯一可以跳步的情况
+用户在一句话里已经把风格编号和内容都给全了（"用 B3 做一个 3 秒的粒子聚形，内容是 XXX"）。
+这时可以跳过第 1–3 步，但**第 4、5 步的分镜确认不能跳过**。`;
+
+/**
+ * Register the workflow section.
+ * @param systemPrompt - the \`ctx.systemPrompt\` registry of the realm that should own it.
+ * @returns a disposer, or undefined when the registry is unavailable.
+ */
+export function registerFlowSection(systemPrompt) {
+  if (!systemPrompt) return undefined;
+  return systemPrompt.section({
+    name: FLOW_SECTION_NAME,
+    order: FLOW_SECTION_ORDER,
+    text: FLOW_PROMPT,
+  });
+}

package/icon.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="Code Animation Studio">
+  <defs>
+    <linearGradient id="cas-g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#ff8a3d"/>
+      <stop offset="1" stop-color="#e0457b"/>
+    </linearGradient>
+  </defs>
+  <rect x="6" y="10" width="52" height="44" rx="9" fill="url(#cas-g)"/>
+  <path d="M6 24h52" stroke="#12121a" stroke-opacity=".28" stroke-width="2"/>
+  <path d="M17 10l7 12M30 10l7 12M43 10l7 12" stroke="#12121a" stroke-opacity=".28" stroke-width="2" stroke-linecap="round"/>
+  <path d="M26 34.5v11.5l9.5-5.75z" fill="#fff"/>
+  <circle cx="47" cy="43" r="3.2" fill="#fff" fill-opacity=".9"/>
+</svg>

package/index.js

@@ -0,0 +1,234 @@
+/**
+ * Host half of the Code Animation Studio bundle.
+ *
+ * The bundle is used twice, on purpose, with different configs:
+ *   - once at the profile root (`tools: false`) to serve catalog assets and the
+ *     animations the Agent wrote;
+ *   - once inside the 创作模式 preset (`tools: true`) to mount the creation tools
+ *     in the sessions created under that mode.
+ *
+ * Routes are profile-wide, so only the root row registers them; the preset row is
+ * mounted per preset and would otherwise collide on the same prefix.
+ */
+import { appendFileSync, existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
+import { isAbsolute, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { BUILD_REV, EXPORT_DIR_NAME, OUTPUT_DIR, STILLS_DIR, TOOL_NAMES, catalog, isApproved } from './data.js';
+import { registerFlowSection } from './flow.js';
+import { registerCreationTools } from './tools.js';
+
+const PREFIX = '/code-animation-api';
+const LOG_FILE = fileURLToPath(new URL('./api.log', import.meta.url));
+/** Rendered clips reach the host as one body; 8s of 1080p is tens of megabytes. */
+const EXPORT_MAX_BYTES = 512 * 1024 * 1024;
+
+function trace(line) {
+  try {
+    appendFileSync(LOG_FILE, `${new Date().toISOString()} ${line}\n`);
+  } catch {
+    /* diagnostics must never break a request */
+  }
+}
+
+function send(res, status, body, type) {
+  res.writeHead(status, {
+    'content-type': type || 'text/plain; charset=utf-8',
+    'cache-control': 'no-store',
+    'content-length': Buffer.byteLength(body),
+  });
+  res.end(body);
+}
+
+/** One exact id, no traversal: the id grammar is the allowlist. */
+function safeId(raw) {
+  const id = String(raw || '').split('?')[0];
+  return /^[A-Za-z0-9_-]{1,80}$/.test(id) ? id : '';
+}
+
+/** Keep a client-supplied name to a single safe path segment. */
+function safeFileName(raw, fallback) {
+  const base = String(raw || '').split(/[\\/]/).pop() || '';
+  const cleaned = base.replace(/[^\w.\-\u4e00-\u9fa5]+/g, '_').replace(/^[._]+/, '').slice(0, 120);
+  return cleaned || fallback;
+}
+
+/**
+ * Resolve where an export lands.
+ *
+ * The session directory is used when the caller supplies one, so the clip appears
+ * beside the user's other files rather than inside the plugin package. A supplied
+ * path is accepted only when it is absolute, already a directory, and the final
+ * target stays inside it.
+ */
+function resolveExportDir(requested, fallbackRoot) {
+  // If user explicitly picked a directory, honor it directly
+  if (typeof requested === 'string' && requested.trim()) {
+    const chosen = resolve(requested.trim());
+    if (isAbsolute(chosen) && existsSync(chosen)) {
+      try {
+        if (statSync(chosen).isDirectory()) return chosen;
+      } catch {}
+    }
+  }
+
+  // Fallback to session working directory / code-animation
+  if (typeof fallbackRoot === 'string' && fallbackRoot.trim()) {
+    const root = resolve(fallbackRoot.trim());
+    if (isAbsolute(root) && existsSync(root)) {
+      try {
+        if (statSync(root).isDirectory()) return join(root, EXPORT_DIR_NAME);
+      } catch {}
+    }
+  }
+
+  return join(OUTPUT_DIR, 'exports');
+}
+
+function readBody(req, limit) {
+  return new Promise((resolvePromise, reject) => {
+    const chunks = [];
+    let size = 0;
+    req.on('data', (chunk) => {
+      size += chunk.length;
+      if (size > limit) {
+        reject(new Error(`请求体超过上限 ${Math.round(limit / 1048576)} MB`));
+        req.destroy();
+        return;
+      }
+      chunks.push(chunk);
+    });
+    req.on('end', () => resolvePromise(Buffer.concat(chunks)));
+    req.on('error', reject);
+  });
+}
+
+/**
+ * No `inject` declaration: the same module is mounted twice with different configs,
+ * and each placement only owns one half. Declaring either service would leave the
+ * other placement waiting forever, so both are read lazily and each half no-ops
+ * when its service is absent.
+ */
+export function apply(ctx, config = {}) {
+  const withTools = config.tools !== false;
+  const withRoutes = config.routes !== false;
+
+  if (withTools) {
+    // `ctx.inject` runs the callback once the service is present, and again if it is
+    // replaced. Reading `ctx.get('tools')` directly races plugin activation order and
+    // silently skips registration when the service is not ready yet.
+    ctx.inject(['tools'], (scoped) => {
+      scoped.effect(() => registerCreationTools({
+        tools: scoped.tools,
+        getAttachments: () => scoped.get('attachments'),
+      }), 'code-animation-studio:tools');
+    });
+
+    // The staged flow is a policy, so it lives in the prompt rather than in a tool.
+    ctx.inject(['systemPrompt'], (scoped) => {
+      scoped.effect(() => registerFlowSection(scoped.systemPrompt), 'code-animation-studio:flow');
+    });
+  }
+
+  if (withRoutes) {
+    ctx.inject(['webServer'], (scoped) => {
+      const handler = async (req, res) => {
+        const url = req.url || '';
+        try {
+          if (url.startsWith(`${PREFIX}/health`) && req.method === 'GET') {
+            return send(res, 200, JSON.stringify({
+              ok: true,
+              rev: BUILD_REV,
+              tools: TOOL_NAMES,
+              styles: catalog().styles.length,
+              stills: catalog().styles.filter((s) => s.still).length,
+            }), 'application/json; charset=utf-8');
+          }
+
+          // Rendered clips land where the user can find them, and the absolute path
+          // is echoed back so the card can show exactly where the file went.
+          if (url.startsWith(`${PREFIX}/export`) && req.method === 'POST') {
+            const query = new URL(url, 'http://localhost').searchParams;
+            const body = await readBody(req, EXPORT_MAX_BYTES);
+            if (!body.length) {
+              return send(res, 400, JSON.stringify({ error: '空文件' }), 'application/json; charset=utf-8');
+            }
+
+            const fallbackRoot = scoped.get('workingDirectory')?.defaultDirectory;
+            const dir = resolveExportDir(query.get('dir'), fallbackRoot);
+            const name = safeFileName(query.get('name'), `animation-${Date.now()}.mp4`);
+            mkdirSync(dir, { recursive: true });
+            const file = join(dir, name);
+            writeFileSync(file, body);
+            trace(`export ${name} ${body.length}B -> ${file}`);
+            return send(res, 200, JSON.stringify({
+              path: file,
+              dir,
+              bytes: body.length,
+            }), 'application/json; charset=utf-8');
+          }
+
+          if (url.startsWith(`${PREFIX}/export-dir`) && req.method === 'GET') {
+            const query = new URL(url, 'http://localhost').searchParams;
+            const fallbackRoot = scoped.get('workingDirectory')?.defaultDirectory;
+            return send(res, 200, JSON.stringify({
+              dir: resolveExportDir(query.get('dir'), fallbackRoot),
+            }), 'application/json; charset=utf-8');
+          }
+
+          // The model-written score is served as script text; the client compiles it
+          // into a function and runs it against an OfflineAudioContext.
+          if (url.startsWith(`${PREFIX}/score/`)) {
+            const id = safeId(url.slice(`${PREFIX}/score/`.length));
+            const file = id ? join(OUTPUT_DIR, `${id}.score.js`) : '';
+            if (!file || !existsSync(file)) return send(res, 404, 'not found');
+            const body = readFileSync(file, 'utf8');
+            res.writeHead(200, {
+              'content-type': 'text/javascript; charset=utf-8',
+              'content-length': Buffer.byteLength(body),
+              'cache-control': 'no-store',
+            });
+            return res.end(body);
+          }
+
+          if (url.startsWith(`${PREFIX}/still/`)) {
+            const id = safeId(url.slice(`${PREFIX}/still/`.length));
+            // Unpublished stills keep their file but are not served: a style the user
+            // has not cleared must not leak through a hand-typed URL either.
+            const file = id && isApproved({ id }) ? join(STILLS_DIR, `${id}.jpg`) : '';
+            if (!file || !existsSync(file)) return send(res, 404, 'not found');
+            const buf = readFileSync(file);
+            res.writeHead(200, {
+              'content-type': 'image/jpeg',
+              'content-length': buf.length,
+              'cache-control': 'public, max-age=86400, immutable',
+            });
+            return res.end(buf);
+          }
+
+          if (url.startsWith(`${PREFIX}/animation/`)) {
+            const id = safeId(url.slice(`${PREFIX}/animation/`.length));
+            const file = id ? join(OUTPUT_DIR, `${id}.html`) : '';
+            if (!file || !existsSync(file)) return send(res, 404, 'not found');
+            const html = readFileSync(file, 'utf8');
+            res.writeHead(200, {
+              'content-type': 'text/html; charset=utf-8',
+              'content-length': Buffer.byteLength(html),
+              'cache-control': 'no-store',
+            });
+            return res.end(html);
+          }
+
+          return send(res, 404, 'not found');
+        } catch (error) {
+          trace(`error ${req.method} ${url} :: ${error?.message || error}`);
+          if (!res.headersSent) send(res, 500, error?.message || 'internal error');
+          else res.end();
+        }
+      };
+
+      scoped.effect(() => scoped.webServer.register({ kind: 'prefix', path: PREFIX, handler }),
+        'code-animation-studio:routes');
+    });
+  }
+}

package/locale/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Creation Mode",
+    "description": "193 code-animation style prompts: pick a style, fill in your content, generate an HTML animation and export it as video."
+  }
+}

package/locale/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "创作模式",
+    "description": "193 种代码动画风格提示词：选风格、填内容、生成 HTML 动画并导出视频。"
+  }
+}

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "dsh-creation-mode",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "3.0.0",
+  "type": "module",
+  "description": "创作模式 / Creation Mode：193 种代码动画风格，在 DeepSeek Harness 对话里直接出片。",
+  "license": "MIT",
+  "keywords": [
+    "dsh",
+    "dsh-plugin",
+    "deepseek-harness",
+    "code-animation",
+    "video",
+    "animation"
+  ],
+  "homepage": "https://github.com/wyf-yfw/dsh-creation-mode#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wyf-yfw/dsh-creation-mode.git",
+    "directory": "plugin"
+  },
+  "engines": {
+    "dsh": ">=0.2.1-0"
+  },
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./locale/*.json": "./locale/*.json",
+    "./icon": "./icon.svg"
+  },
+  "files": [
+    "index.js",
+    "data.js",
+    "tools.js",
+    "flow.js",
+    "client.js",
+    "cordis.patch.yml",
+    "styles.json",
+    "stills",
+    "locale/*.json",
+    "icon.svg"
+  ],
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "immediately": true,
+      "inject": ["@deepseek-ai/dsh-client-ui-conversation"]
+    }
+  }
+}