@biunow/agent-biuart 0.0.0-stage → 0.1.1

package/engine/clip.js

@@ -0,0 +1,104 @@
+// 参数化片段运行时：一份 spec（JSON）→ 一段时长严格等于 spec.duration 的动画。给口播视频管线当「动画段」用。
+// 契约见 references/09-视频动画语法.md「片段契约」。和 engine.js 的区别：没有段落表/转场，一个语法一个 draw(c, t, ctx)，画布尺寸从 spec 读（竖屏也行）。
+//
+// spec.finish（可选）：成片质感层，预设 soft / film / punch / clean 或对象，见 lib/finish.js；alpha 模式忽略。
+// spec = { grammar, duration, fps=30, width=1920, height=1080, safe?: {top,bottom,left,right（px，留给字幕/平台 UI）, fill?（让开的边涂这个色）}, theme?, alpha?, data?, cues: [{at, kind, text?, sub?, data?, image?, frames?, fps?, dur?}] }
+// spec.theme：全片共用的色板（lib/palettes.js）——名字（paper poster ink navy bauhaus snow wood chalk）、{name, 要覆盖的键}、或完整 6 键 {bg, surface, ink, sub, accent, accent2}。
+//   解析成 ctx.pal（完整 6 键＋name），各语法按它上色；名字写错 / 缺键 → 启动失败。不写 → ctx.pal = null，各语法用自己的默认配色。
+//   语法可以声明 legacyTheme(theme) → true：这个 theme 是它自己的旧写法（t3 的 'light' / 'dark' / 旧主题对象），不当色板解析，语法照旧读 ctx.theme。
+// 素材路径（render.py 用 spec_assets.py 核存在并改写）：cue.image、cue.frames（帧序列：目录或路径数组）、data.image、data.character.frames（y4 帧库）。
+// 任何一张加载失败 → 启动失败、拒绝渲染（不出空白帧）。语法里取素材：ctx.still(q) = 这条 cue 的静态图（有 frames 时是第一帧），ctx.frame(q, t) = t 时刻该画的那一帧。
+// 语法文件 clips/<grammar>.js 注册 CLIPS[grammar] = { init?(ctx), draw(c, t, ctx), safe?: true（按 ctx.safe / ctx.box 排版了才写，否则 spec.safe 会告警） }。
+// 对齐约定（CLIP.lt）：cue 的「揭开那一帧」= at 所在的那一帧——元素在 t = at 这一帧第一次可见，动画内部时间从 at − 1 帧起算。
+(() => {
+const cv = document.getElementById('c'), c = cv.getContext('2d');
+window.__canvas = cv;
+window.CLIPS = window.CLIPS || {};
+const C = window.CLIP = {};
+const fail = msg => { window.__bootFailed = msg; console.error('CLIP BOOT FAILED\n' + msg); };
+
+// ---------- 给语法文件用的小工具 ----------
+// 片内时间：cue 在 at 这一帧第一次可见
+C.lt = (t, at, fps) => t - at + 1 / fps;
+// 进度：从 at 起 dur 秒走完 0→1（at 这一帧已经 >0）
+C.p = (t, at, dur, fps) => U.clamp(C.lt(t, at, fps) / dur);
+// 等比放进框里（contain，不裁）：返回 {x, y, w, h}
+C.fit = (iw, ih, bx, by, bw, bh) => { const s = Math.min(bw / iw, bh / ih); const w = iw * s, h = ih * s; return { x: bx + (bw - w) / 2, y: by + (bh - h) / 2, w, h, s }; };
+// 归一化矩形 [x,y,w,h]（0..1，相对图片）→ 画面矩形
+C.sub = (r, box) => ({ x: box.x + r[0] * box.w, y: box.y + r[1] * box.h, w: r[2] * box.w, h: r[3] * box.h });
+C.text = (cue, ...fallback) => (cue && (cue.text ?? cue.data?.text)) ?? fallback.find(v => v != null) ?? '';
+
+async function boot() {
+  let spec = window.CLIP_SPEC;
+  if (!spec) {                                                           // 预览：?spec=<相对 engine 的路径>
+    const u = new URLSearchParams(location.search).get('spec');
+    if (!u) return fail('没有 spec：render.py --spec 会注入 window.CLIP_SPEC；预览用 clip.html?spec=examples/<名>.json');
+    spec = await (await fetch(u)).json();
+    const base = u.replace(/[^/]*$/, '');
+    const fix = p => p && !/^(data:|https?:|\/)/.test(p) ? base + p : p;   // 预览模式：frames 要写成路径数组（浏览器列不了目录），帧库要写 {frames: {姿势: 路径}}
+    (spec.cues || []).forEach(q => { if (q.image) q.image = fix(q.image); if (Array.isArray(q.frames)) q.frames = q.frames.map(fix); });
+    if (spec.data && spec.data.image) spec.data.image = fix(spec.data.image);
+    const ch = spec.data && spec.data.character; if (ch && typeof ch === 'object' && ch.frames && typeof ch.frames === 'object') for (const k in ch.frames) ch.frames[k] = fix(ch.frames[k]);
+  }
+  if (location.search.includes('render=1')) document.body.classList.add('render');
+  const W = spec.width || 1920, H = spec.height || 1080, FPS = spec.fps || 30;
+  if (!spec.grammar) return fail('spec 缺 grammar');
+  if (!(spec.duration > 0)) return fail('spec.duration 必须 > 0');
+  cv.width = W; cv.height = H; U.setStage(W, H);
+  // 语法文件（同步 XHR + eval，带 sourceURL，报错能定位）
+  const x = new XMLHttpRequest(); x.open('GET', `clips/${spec.grammar}.js`, false);
+  try { x.send(); } catch (e) { return fail('请求语法文件失败 ' + e); }
+  if (x.status !== 200) return fail(`没有这个语法：clips/${spec.grammar}.js（HTTP ${x.status}）`);
+  try { (0, eval)(x.responseText + `\n//# sourceURL=clips/${spec.grammar}.js`); } catch (e) { return fail(`clips/${spec.grammar}.js 执行出错 ${e.stack || e}`); }
+  const G = CLIPS[spec.grammar]; if (!G || typeof G.draw !== 'function') return fail(`clips/${spec.grammar}.js 没注册 CLIPS['${spec.grammar}'] = { draw }`);
+  // 主题色板：在加载素材之前核，写错就别白等图片
+  let pal = null;
+  if (!(G.legacyTheme && G.legacyTheme(spec.theme))) { try { pal = PAL.resolve(spec.theme); } catch (e) { return fail(e.message); } }
+  // 成片质感层（spec.finish）：写错预设名就别白等图片
+  let fin = null; try { fin = FINISH.resolve(spec.finish); } catch (e) { return fail(e.message); }
+  // 图片
+  const IMG = {}, urls = new Set();
+  for (const q of (spec.cues || [])) {
+    if (q.image) urls.add(q.image);
+    if (q.frames != null) { if (!Array.isArray(q.frames) || !q.frames.length) return fail(`cue ${q.kind} at=${q.at} 的 frames 要是非空的路径数组（render.py 会把目录展开成数组；预览模式只认数组）`); q.frames.forEach(f => urls.add(f)); }
+  }
+  if (spec.data && spec.data.image) urls.add(spec.data.image);
+  const chr = spec.data && spec.data.character;
+  if (chr && typeof chr === 'object') { if (!chr.frames || typeof chr.frames !== 'object' || Array.isArray(chr.frames)) return fail('data.character 写成对象时要有 frames: {姿势名: 图片路径}（或在 render.py 里给一个帧库目录）');
+    Object.values(chr.frames).forEach(f => urls.add(f)); }
+  try { await Promise.all([...urls].map(u => new Promise((res, rej) => { const im = new Image(); im.onload = () => { IMG[u] = im; res(); }; im.onerror = () => rej(u); im.src = u; }))); }
+  catch (u) { return fail('图片加载失败：' + u); }
+  // 字体＋字形检查（spec 里的字缺字形只警告：回退系统字体照样能渲，但换台机器会变样）
+  for (const f of (window.FONT_FACES || [])) { const ff = new FontFace(f.family, `url(${f.url})`, f.desc || {}); await ff.load(); document.fonts.add(ff); }
+  await document.fonts.ready; await U.loadCmaps();
+  const cues0 = (spec.cues || []).map((q, i) => ({ ...q, i, at: +q.at || 0 })).sort((a, b) => a.at - b.at || a.i - b.i);
+  for (const q of cues0) if (q.at > spec.duration + 1e-9) console.warn(`cue ${q.kind} at=${q.at} 超出片段时长 ${spec.duration}s，看不到，已丢掉（不占版面）`);
+  const cues = cues0.filter(q => q.at <= spec.duration + 1e-9);   // 看不到的 cue 不进语法：否则照样占排版位置、进度轨照样数它
+  // number 的说明字段各语法以前各认各的（t2/t3 认 text，y5 认 sub），写错了不报错只是没字。统一：text 与 sub 互为别名，data.text 也算
+  for (const q of cues) if (q.kind === 'number') { const cap = q.text ?? q.sub ?? (q.data && q.data.text); if (cap != null) { q.text = cap; q.sub = cap; } }
+  const safe = { top: 0, bottom: 0, left: 0, right: 0, ...(spec.safe || {}) };   // 让开的边（px）：管线烧录字幕、平台 UI 压在这里，带字的语法不往里排
+  const box = { x: safe.left, y: safe.top, w: W - safe.left - safe.right, h: H - safe.top - safe.bottom };   // 让开之后的内容框，语法排版用它（ctx.box）
+  const ctx = { spec, data: spec.data || {}, theme: spec.theme || {}, pal, cues, W, H, FPS, u: Math.min(W, H) / 1080, portrait: H > W, alpha: !!spec.alpha, IMG, dur: spec.duration, safe, box,
+    of: (...kinds) => cues.filter(q => kinds.includes(q.kind)), lt: (t, at) => C.lt(t, at, FPS), p: (t, at, d) => C.p(t, at, d, FPS),
+    // 素材：still = 定版式用的那张（image，或 frames 的第一帧）；frame = t 时刻画哪一帧（frames 从 at 起按 q.fps（默认 30）播，播完停在最后一帧，q.loop 循环）
+    still: q => q && (q.image ? IMG[q.image] : q.frames ? IMG[q.frames[0]] : null),
+    frame: (q, t) => !q ? null : q.frames ? MD.frameAt(q.frames.map(f => IMG[f]), t - q.at, q.fps || 30, !!q.loop) : q.image ? IMG[q.image] : null };
+  if (G.fonts) { const txt = cues.map(q => [q.text, q.sub, q.data && q.data.text].filter(Boolean).join('')).join('') + JSON.stringify(spec.data || {});
+    for (const fam of G.fonts) { const miss = U.missingGlyphs(fam, [...txt].filter(ch => ch.codePointAt(0) >= 0x2E80).join(''));   /* 只查汉字与全角符号：拉丁/希腊/数学符号各语法另有字体 */ if (miss.length) console.warn(`字体「${fam}」缺字：${miss.join('')}（会回退系统字体；常用字已在 GB2312 子集里，生僻字用 scripts/font_subset.py --text 补）`); } }
+  if (spec.safe && (safe.top || safe.bottom || safe.left || safe.right) && !G.safe)
+    console.warn(`语法 ${spec.grammar} 还没接 safe（语法对象里没有 safe: true），spec.safe 被忽略：字幕带可能压在字上`);
+  if (G.init) G.init(ctx);
+  window.CLIP_CTX = ctx;
+  window.__total = spec.duration; window.__fps = FPS; window.__size = [W, H];
+  // safe.fill：让开的边涂成这个颜色（竖屏片把图表做成和相邻 contain 素材同一块「卡片」，外面是片子的底色）；透明模式下不涂
+  const band = (safe.fill && !spec.alpha) ? (cc => { cc.fillStyle = safe.fill; const { top: t0, bottom: b0, left: l0, right: r0 } = safe;
+    if (t0) cc.fillRect(0, 0, W, t0); if (b0) cc.fillRect(0, H - b0, W, b0); if (l0) cc.fillRect(0, 0, l0, H); if (r0) cc.fillRect(W - r0, 0, r0, H); }) : null;
+  window.renderFrame = t => { c.setTransform(1, 0, 0, 1, 0, 0); c.clearRect(0, 0, W, H); c.save(); G.draw(c, t, ctx); c.restore(); if (fin && !spec.alpha) FINISH.apply(c, t, fin, W, H, FPS); if (band) band(c); };
+  window.prepare = async () => {};
+  window.__ready = true;
+  window.renderFrame(0);
+  const sc = document.getElementById('scrub'), tt = document.getElementById('tt'); sc.max = spec.duration; sc.step = 1 / FPS;
+  sc.oninput = () => { window.renderFrame(+sc.value); tt.textContent = (+sc.value).toFixed(3); };
+}
+boot().catch(e => fail(String(e && e.stack || e)));
+})();

package/engine/clip_schema.json

@@ -0,0 +1,19 @@
+{
+  "_说明": "参数化片段 spec 的字段表，clip_lint.py 读它。来源是各 clips/<语法>.js 头注释；改语法时同步改这里。cue.data 里写了表外的键只是告警（语法可能认得更多）。",
+  "common": {
+    "spec": ["grammar", "duration", "fps", "width", "height", "safe", "theme", "alpha", "data", "cues", "finish"],
+    "cue": ["at", "kind", "text", "sub", "data", "image", "frames", "fps", "loop", "dur"],
+    "themes": ["paper", "poster", "ink", "navy", "bauhaus", "snow", "wood", "chalk"],
+    "finish": ["clean", "soft", "film", "punch"]
+  },
+  "grammars": {
+    "t1_3b1b": { "kinds": ["title", "equation", "point", "line", "highlight"], "specData": ["camera"], "cueData": ["tokens", "col", "color", "values", "points", "target", "index", "dur"], "needs": { "equation": ["text|data.tokens"], "point": ["text"], "title": ["text"], "line": ["data.values|data.points"] } },
+    "t2_keynote_ui": { "kinds": ["title", "card", "step", "image", "highlight", "number"], "specData": ["eyebrow", "title", "subtitle", "accent", "frame", "camera"], "cueData": ["step", "fit", "focus", "icon", "value", "prefix", "suffix", "decimals", "label", "rect", "fill", "over", "frame", "text"], "needs": { "number": ["data.value"], "highlight": ["data.rect"] } },
+    "t3_finance_chart": { "kinds": ["title", "bar", "line", "candle", "highlight", "number"], "specData": ["title", "unit", "source", "badge", "chart", "series", "decimals", "prefix", "suffix", "highlight", "colors", "upDown", "theme", "camera"], "cueData": ["index", "value", "prefix", "suffix", "decimals", "text", "sub"], "needs": {}, "specNeeds": ["data.series"] },
+    "y1_kurzgesagt": { "kinds": ["title", "point", "highlight", "enter"], "specData": ["center", "center_style", "image", "flow", "camera"], "cueData": ["color", "index", "style"], "needs": { "point": ["text"], "title": ["text"] } },
+    "y2_vox": { "kinds": ["image", "clip", "title", "point", "highlight"], "specData": ["camera"], "cueData": ["halftone", "fit", "focus", "aspect", "rect"], "needs": { "highlight": ["data.rect"], "title": ["text"], "point": ["text"] } },
+    "y3_whiteboard": { "kinds": ["title", "point", "draw", "image", "highlight"], "specData": ["camera"], "cueData": ["icon", "arrow", "index", "target", "style"], "needs": { "draw": ["data.icon"], "point": ["text"], "title": ["text"] } },
+    "y4_storytime": { "kinds": ["title", "point", "highlight", "react", "insert"], "specData": ["character", "camera"], "cueData": ["pose", "mark", "hit", "count", "unit"], "needs": {}, "specNeeds": ["data.character"] },
+    "y5_kinetic_type": { "kinds": ["title", "point", "number", "highlight"], "specData": ["palette", "camera"], "cueData": ["label", "key", "word", "value", "prefix", "suffix", "decimals", "num"], "needs": { "number": ["data.value"], "point": ["text"], "title": ["text"] } }
+  }
+}

package/engine/clips/t1_3b1b.js

@@ -0,0 +1,203 @@
+// 片段 · 3b1b / manim 式讲解（t1）：纯黑底，一次只放正在讲的那一个东西；字和公式都是 Write（先描边后填色），缓动一律 smooth。
+// 招牌是 Transform：上一个概念直接变成下一个，不切、不淡出重来。
+// cues：title（at 这一帧开始 Write；再来一个 title 时旧标题 FadeOut 上移；太长先缩字号、再折两行）
+//       equation（data.tokens = DG.math 的 token 数组，或只给 text；颜色＝概念名：col 写 'BLUE_C' 等 manim 色名或 #hex）
+//                 第二个起的 equation 不重新 Write，而是从上一个 Transform 过来（TransformMatchingTex：同名符号移到新位置，对不上的淡出/淡入；默认 1.5s）
+//       point（要点一句一行，Write；新要点出来时旧的变灰）
+//       line（坐标系先 Create，再画曲线：data.values = [y...]（等距）或 data.points = [[x,y]...]；text = 曲线标签；data.color）
+//            第二个起的 line 是 Transform：上一条曲线逐点（按弧长对齐重采样）形变成这一条，颜色和标签一起换，坐标系不动
+//       highlight（Indicate＋黄色框住并留住：data.index = 第几个要点（只数 point，从 0 起；默认最新）；data.target = 'equation' 时框公式）
+// 布局：有 line 时横屏左文右图、竖屏上图下文；要点块在剩下的高度里竖直居中。safe：内容只排在 top..H−bottom 之间。
+// 公式太宽就整体缩字号（所有公式同一字号，Transform 时不跳），竖屏长公式不出画。
+// 字形：CMU 斜体把 θ 画成 ϑ，θ 改用 EB Garamond 斜体（闭合的 θ）；连续两个以上的字母（softmax、ReLU）按正体单词排，单个字母才是斜体变量。
+// alpha：透明底时字外面描一圈深色边，压在亮画面上也看得见。
+// spec.theme（全片色板 ctx.pal）：底 bg、字 ink、变灰的旧要点和坐标轴 sub、强调框与 Indicate accent、默认曲线色 accent2；
+//   cue 里写的 manim 色名也映射进色板（YELLOW/GOLD/ORANGE/RED/MAROON/PINK → accent，BLUE/TEAL/GREEN/PURPLE → accent2，GREY → sub，WHITE → ink），#hex 照写的用。
+CLIPS.t1_3b1b = (() => {
+const { clamp, lerp } = U;
+let M, L, INK = '#fff';
+const col = v => !v ? null : M[v] || v;
+// 全片色板时 manim 色名 → 色板里的色（只认 DG.MANIM 里有的名字；#hex 原样）
+const palMap = p => { const m = { ...DG.MANIM };
+  for (const k in m) m[k] = /^(YELLOW|GOLD|ORANGE|RED|MAROON|PINK)/.test(k) ? p.accent : /^(BLUE|TEAL|GREEN|PURPLE)/.test(k) ? p.accent2 : /^GRE[YA]_[AB]$/.test(k) ? PAL.mix(p.sub, p.ink, 0.4) : /^GRE[YA]/.test(k) ? p.sub : k === 'WHITE' ? p.ink : k === 'BLACK' ? p.bg : m[k];
+  return m; };
+const isZh = ch => ch.codePointAt(0) >= 0x2E80;
+// 一段字 → token：汉字/全角走普惠体；连续 ≥2 个字母是单词（正体）；单个字母斜体；其余（数字、符号、希腊字母）正体
+const toks = text => (String(text).match(/[A-Za-z]{2,}|./gu) || []).flatMap(s => s.length > 1 && !/[a-z]/.test(s) ? [...s] : [s])   // 全大写的一串（QK）是几个变量，拆开
+  .map(s => ({ s, zh: isZh(s), it: /^[a-zA-Z]$/.test(s), gap: 0 }));
+// θ 用 EB Garamond 斜体画（CMU 的 θ 是 ϑ 字形）。只换这一个 token 的字体：逐 token 调 DG.math，期间临时改 DG.FONT
+const THETA = /[θΘ]/;
+const withFont = (tk, fn) => { if (!THETA.test(tk.s)) return fn(tk); const o = { ...DG.FONT }; DG.FONT.it = DG.FONT.rm = 'EBGaramond-400i';
+  try { return fn({ ...tk, zh: false, it: true }); } finally { Object.assign(DG.FONT, o); } };
+const layoutT = (c, tokens, size) => { let x = 0; return tokens.map(tk => { const w = withFont(tk, t2 => DG.layout(c, [{ ...t2, gap: 0 }], size)[0].w), sz = (tk.size || 1) * size;
+  const r = { x, w }; x += w + (tk.gap != null ? tk.gap : sz * 0.06); return r; }); };
+const widthT = (c, tokens, size) => { const l = layoutT(c, tokens, size); return l.length ? l[l.length - 1].x + l[l.length - 1].w : 0; };
+// Write 一串 token（等价于 DG.math 整串调用：token 间按 manim LaggedStart 错开），返回每个 token 的屏幕 {x, w}
+const writeT = (c, tokens, x, y, size, p, { align = 'center', col: cl = '#fff' } = {}) => {
+  const Lt = layoutT(c, tokens, size), tot = Lt.length ? Lt[Lt.length - 1].x + Lt[Lt.length - 1].w : 0, x0 = align === 'center' ? x - tot / 2 : align === 'right' ? x - tot : x;
+  const n = tokens.length, r = Math.min(4 / (n + 1), 0.2);
+  tokens.forEach((tk, i) => { const q = MO.lagged(i, n, clamp(p), r); if (q > 0) withFont(tk, t2 => DG.math(c, [t2], x0 + Lt[i].x, y, size, { p: q, align: 'left', col: cl })); });
+  return Lt.map(l => ({ x: x0 + l.x, w: l.w }));
+};
+// 按弧长等分重采样成 n 个点（Transform 前两条曲线要点数相同、起点对齐）
+const resample = (pts, n) => { const cum = DG.cum(pts), T = cum[cum.length - 1]; return Array.from({ length: n }, (_, i) => DG.pointAt(pts, cum, T * i / (n - 1))); };
+// 折行但各行等长（不让一个字母/单词孤零零挂到下一行）
+const balance = (g, text, maxW, font) => { const n = TY.wrap(g, text, maxW, font).length; if (n < 2) return [text];
+  let lo = maxW * 0.4, hi = maxW; for (let k = 0; k < 14; k++) { const m = (lo + hi) / 2; if (TY.wrap(g, text, m, font).length > n) lo = m; else hi = m; } return TY.wrap(g, text, hi, font); };
+// 标题：先缩字号放一行（最小 0.75），放不下就等长折行（竖屏最多 3 行、横屏 2 行），再缩到每行放得下
+const titleLines = (c, text, maxW, size, maxLines) => {
+  let s = size; while (s > size * 0.75 && widthT(c, toks(text), s) > maxW) s *= 0.95;
+  if (widthT(c, toks(text), s) <= maxW) return { size: s, lines: [text] };
+  s = size * 0.9; let lines = balance(c, text, maxW, `${s}px "PuHui-Medium"`);
+  while (lines.length > maxLines) { s *= 0.94; lines = balance(c, text, maxW, `${s}px "PuHui-Medium"`); }
+  while (s > size * 0.45 && Math.max(...lines.map(l => widthT(c, toks(l), s))) > maxW) s *= 0.95;
+  return { size: s, lines };
+};
+let BUF;
+return {
+  fonts: ['PuHui-Medium'],
+  safe: true,
+  init(ctx) {
+    M = ctx.pal ? palMap(ctx.pal) : DG.MANIM; INK = ctx.pal ? ctx.pal.ink : '#fff'; DG.FONT.zh = 'PuHui-Medium';                         // 任意中文：普惠体（思源宋子集只有示范片用到的字）
+    const { W, H, u, safe } = ctx, g = document.createElement('canvas').getContext('2d');
+    const pad = (ctx.portrait ? 70 : 140) * u, yTop = safe.top, yBot = H - safe.bottom - (ctx.portrait ? 90 : 70) * u;
+    const hasLine = ctx.of('line').length > 0, hasEq = ctx.of('equation').length > 0;
+    // 标题
+    const titles = ctx.of('title').map(q => ({ q, ...titleLines(g, q.text || '', W - 2 * pad, (ctx.portrait ? 72 : 62) * u, ctx.portrait ? 3 : 2) }));
+    const tH = titles.length ? Math.max(...titles.map(z => z.lines.length * z.size * 1.25)) : 0;
+    const titleY = yTop + (ctx.portrait ? 170 : 130) * u;
+    let y = titles.length ? titleY + tH : yTop + 90 * u;
+    let eqSz = (ctx.portrait ? 72 : 66) * u;
+    for (const q of ctx.of('equation')) { const tk = q.data && q.data.tokens ? q.data.tokens : toks(q.text || ''), w = widthT(g, tk, eqSz) + 60 * u; if (w > W - 2 * pad) eqSz *= (W - 2 * pad) / w; }
+    const eqY = y + eqSz * (titles.length ? 1.15 : 0.9);
+    if (hasEq) y = eqY + eqSz * 0.6;
+    y += 30 * u;
+    // 要点：预先折行（每条可能多行）
+    const size0 = (hasLine ? (ctx.portrait ? 56 : 50) : (ctx.portrait ? 62 : 58)) * u;
+    let text, plot = null;
+    if (hasLine && ctx.portrait) { plot = { x: pad + 20 * u, y: y + 20 * u, w: W - 2 * pad - 20 * u, h: (yBot - y) * 0.5 }; text = { x: pad, y0: plot.y + plot.h + 70 * u, y1: yBot, w: W - 2 * pad }; }
+    else if (hasLine) { plot = { x: W * 0.52, y: y + 20 * u, w: W * 0.48 - pad, h: yBot - y - 40 * u }; text = { x: pad, y0: y, y1: yBot, w: W * 0.47 - pad }; }
+    else text = { x: pad, y0: y, y1: yBot, w: W - 2 * pad };
+    // 要点放不下（竖屏有曲线、要点多）：先让曲线让位（竖屏 50% → 最少 30%），再缩字号（最小 0.6 倍），不压进 safe.bottom
+    let points, blockH, size = size0; const gapP = 36 * u, room = yBot - y;
+    for (let k = 1; ; k *= 0.94) {
+      size = size0 * k;
+      points = ctx.of('point').map(q => { const lines = balance(g, q.text || '', text.w - 50 * u, `${size}px "PuHui-Medium"`); return { q, lines, h: lines.length * size * 1.35 }; });
+      blockH = points.reduce((s, p) => s + p.h + gapP, 0) - gapP;
+      if (plot && ctx.portrait) { plot.h = Math.max(room * 0.3, Math.min(room * 0.5, room - 110 * u - blockH)); text.y0 = plot.y + plot.h + 70 * u; }
+      if (blockH <= text.y1 - text.y0 || k < 0.6) break;
+    }
+    if (blockH > text.y1 - text.y0 + 1) console.warn(`t1：${points.length} 条要点缩到 0.6 倍字号仍放不下（超出 ${Math.round(blockH - (text.y1 - text.y0))}px）：新要点出来时整块上卷、最早的淡出；想全留在屏上就删几条或拆成两段`);
+    let py = text.y0 + Math.max(0, (text.y1 - text.y0 - blockH) / 2) * (hasLine && !ctx.portrait ? 1 : 0.6);   // 要点块竖直居中（竖屏略偏上）
+    for (const p of points) { p.y = py + size; py += p.h + gapP; p.need = Math.max(0, py - gapP - text.y1); }   // need：这一条出来时整块要上卷多少才不越过 y1
+    // 曲线：坐标统一用所有 line 的数据范围（Transform 时坐标系不动）
+    const lines = ctx.of('line').map(q => { const d = q.data || {}; return { q, d, pts0: d.points || (d.values || []).map((v, i) => [i, v]) }; }).filter(l => l.pts0.length >= 2);
+    if (plot && lines.length) {
+      const all = lines.flatMap(l => l.pts0), xs = all.map(p => p[0]), ys = all.map(p => p[1]);
+      const x0 = Math.min(...xs), x1 = Math.max(...xs), y0 = Math.min(0, ...ys); let y1 = Math.max(...ys); if (y1 === y0) y1 = y0 + 1;
+      plot.X = v => plot.x + (v - x0) / ((x1 - x0) || 1) * plot.w; plot.Y = v => plot.y + plot.h - (v - y0) / (y1 - y0) * plot.h * 0.9;
+      for (const l of lines) { const [lx0, lx1] = [Math.min(...l.pts0.map(p => p[0])), Math.max(...l.pts0.map(p => p[0]))];
+        // 每条曲线横向铺满坐标系（不同 line 的 x 量纲可以不同：损失-参数 → 损失-步数）
+        l.scr = l.pts0.map(([px, py]) => [plot.x + (px - lx0) / ((lx1 - lx0) || 1) * plot.w, plot.Y(py)]); l.rs = resample(l.scr, 160); }
+    }
+    L = { titleY, titles, eqY, eqSz, text, plot, points, size, lines };
+  },
+  draw(c0, t, ctx) {
+    const { W, H, u } = ctx;
+    const c = ctx.alpha ? (BUF = BUF || document.createElement('canvas'), BUF.width = W, BUF.height = H, BUF.getContext('2d')) : c0;
+    if (!ctx.alpha) { c.fillStyle = ctx.pal ? ctx.pal.bg : '#000'; c.fillRect(0, 0, W, H); }
+    // ---- 标题（同一时间只有一个，换标题 = 旧的上移淡出、新的 Write） ----
+    L.titles.forEach((z, i) => {
+      const q = z.q, nx = L.titles[i + 1], out = nx ? MO.smooth(MO.seg(t, nx.q.at - 0.45, nx.q.at)) : 0; if (out >= 1 || ctx.lt(t, q.at) <= 0) return;
+      const n = [...(q.text || '')].length, dur = q.dur || clamp(n / 14, 0.6, 1.6);
+      c.save(); c.globalAlpha = 1 - out; c.translate(0, -50 * u * out);
+      z.lines.forEach((ln, k) => writeT(c, toks(ln), W / 2, L.titleY + k * z.size * 1.25, z.size, ctx.p(t, q.at + k * dur / z.lines.length, dur / z.lines.length), { col: col(q.data && q.data.color) || INK }));
+      c.restore();
+    });
+    // ---- 公式：第一个 Write，之后每个从上一个 TransformMatchingTex 过来 ----
+    let eqBox = null;
+    const eqs = ctx.of('equation').map(q => (q.data && q.data.tokens ? q.data.tokens : toks(q.text || '')).map(k => ({ ...k, col: col(k.col) })));
+    const eqCues = ctx.of('equation'), sz = L.eqSz;
+    let k = -1; eqCues.forEach((q, i) => { if (ctx.lt(t, q.at) > 0) k = i; });
+    if (k >= 0) {
+      const q = eqCues[k], tk = eqs[k], Ln = layoutT(c, tk, sz), tot = Ln.length ? Ln[Ln.length - 1].x + Ln[Ln.length - 1].w : 0, x0 = W / 2 - tot / 2;
+      if (k === 0) writeT(c, tk, W / 2, L.eqY, sz, ctx.p(t, q.at, q.dur || 1.2), { col: INK });
+      else {
+        const p = MO.smooth(ctx.p(t, q.at, q.dur || 1.5)), old = eqs[k - 1], Lo = layoutT(c, old, sz), toto = Lo.length ? Lo[Lo.length - 1].x + Lo[Lo.length - 1].w : 0, xo = W / 2 - toto / 2;
+        const used = new Set(), from = tk.map(nt => { const j = old.findIndex((ot, jj) => !used.has(jj) && ot.s === nt.s && (ot.sub || '') === (nt.sub || '') && (ot.sup || '') === (nt.sup || '')); if (j >= 0) used.add(j); return j; });
+        const one = (tok, x, a, cl) => { if (a <= 0) return; c.save(); c.globalAlpha *= a; withFont(tok, t2 => DG.math(c, [{ ...t2, col: cl }], x, L.eqY, sz, { p: 1, align: 'left' })); c.restore(); };
+        old.forEach((ot, j) => { if (!used.has(j)) { c.save(); c.translate(0, -30 * u * p); one(ot, xo + Lo[j].x, 1 - clamp(p * 1.6), ot.col || INK); c.restore(); } });   // 对不上的旧符号：淡出上移
+        tk.forEach((nt, i) => { const j = from[i];
+          if (j >= 0) one(nt, lerp(xo + Lo[j].x, x0 + Ln[i].x, p), 1, DG.mix(old[j].col || INK, nt.col || INK, p));    // 同名符号：移到新位置，颜色插值
+          else { c.save(); c.translate(0, 30 * u * (1 - p)); one(nt, x0 + Ln[i].x, clamp((p - 0.35) / 0.65), nt.col || INK); c.restore(); } });   // 新符号：淡入
+      }
+      if (Ln.length) eqBox = { x: x0 - 20 * u, y: L.eqY - sz * 0.95, w: tot + 40 * u, h: sz * 1.35 };
+    }
+    // ---- 坐标系＋曲线：第一条 Create，之后每条从上一条逐点形变过来 ----
+    const P = L.plot;
+    if (P && L.lines.length) {
+      const l0 = L.lines[0];
+      if (ctx.lt(t, l0.q.at) > 0) {
+        const ap = MO.smooth(ctx.p(t, l0.q.at, 0.6)), lw = 3 * u;
+        c.save(); c.strokeStyle = M.GREY_B; c.lineWidth = lw; c.lineCap = 'round';
+        c.beginPath(); c.moveTo(P.x, P.Y(0)); c.lineTo(P.x + P.w * ap, P.Y(0)); c.moveTo(P.x, P.y + P.h); c.lineTo(P.x, P.y + P.h - P.h * ap); c.stroke();
+        c.globalAlpha = ap; for (let kk = 1; kk <= 4; kk++) { const xx = P.x + P.w * kk / 4; c.beginPath(); c.moveTo(xx, P.Y(0) - 8 * u); c.lineTo(xx, P.Y(0) + 8 * u); c.stroke(); }
+        c.restore();
+        let j = 0; L.lines.forEach((l, i) => { if (ctx.lt(t, l.q.at) > 0) j = i; });
+        const l = L.lines[j], lc = col(l.d.color) || M.BLUE_C;
+        c.save(); c.lineWidth = 5 * u; c.lineJoin = 'round'; c.lineCap = 'round';
+        if (j === 0) {
+          const cp = MO.smooth(ctx.p(t, l.q.at + 0.5, l.q.dur || 1.4));
+          if (cp > 0) { const cum = DG.cum(l.scr); c.strokeStyle = lc; const tip = DG.drawPartial(c, l.scr, cum, cum[cum.length - 1] * cp);
+            if (cp < 1) DG.neuron(c, tip[0], tip[1], 10 * u, 1, { fill: lc, stroke: INK, lw: 2 * u }); }
+          label(c, l, MO.smooth(MO.seg(cp, 0.8, 1)), lc, u);
+        } else {
+          const pv = L.lines[j - 1], p = MO.smooth(ctx.p(t, l.q.at, l.q.dur || 1.5)), pc = col(pv.d.color) || M.BLUE_C;
+          const pts = DG.morph(pv.rs, l.rs, p); c.strokeStyle = DG.mix(pc, lc, p); c.beginPath(); pts.forEach((q, i) => i ? c.lineTo(q[0], q[1]) : c.moveTo(q[0], q[1])); c.stroke();
+          label(c, pv, 1 - clamp(p * 2), pc, u); label(c, l, clamp(p * 2 - 1), lc, u);
+        }
+        c.restore();
+      }
+    }
+    // ---- 要点 ----
+    const hl = ctx.of('highlight'), size = L.size;
+    const target = h => h.data && h.data.target === 'equation' ? -2 : h.data && h.data.index != null ? h.data.index : L.points.filter(p => p.q.at <= h.at).length - 1;
+    const roll = Math.max(0, ...L.points.map(p => p.need * MO.smooth(ctx.p(t, p.q.at - 0.3, 0.4))));   // 放不下时：新要点出来前 0.3s 整块上卷，越过顶的淡出
+    L.points.forEach((it0, i) => {
+      const q = it0.q; if (ctx.lt(t, q.at) <= 0) return;
+      const it = roll ? { ...it0, y: it0.y - roll } : it0, over = L.text.y0 - (it.y - size);
+      if (over > 0 && clamp(1 - over / (size * 1.2)) <= 0) return;
+      c.save(); if (over > 0) c.globalAlpha *= clamp(1 - over / (size * 1.2));
+      const nx = L.points[i + 1], h = [...hl].reverse().find(z => target(z) === i && t >= z.at - 1e-6) || null, hOther = hl.some(z => t >= z.at && target(z) !== i && z.at > (h ? h.at : -1));
+      const dimN = nx ? MO.smooth(ctx.p(t, nx.q.at, 0.4)) : 0;
+      const n = [...(q.text || '')].length, dur = q.dur || clamp(n / 16, 0.6, 1.8);
+      // Indicate：放大 1.2、染黄、回来；之后这一条保持黄色（被强调的留住），其余变灰
+      const ip = h && !hOther ? ctx.p(t, h.at, 0.8) : 0, ind = DG.indicate(ip), keep = h && !hOther ? MO.smooth(clamp(ip * 2)) : 0;
+      const dim = keep > 0 ? 0 : dimN;
+      const base = DG.mixA(DG.mixA(INK, M.GREY_C, dim), M.YELLOW, Math.max(keep, ind.k)), colr = DG.rgba(base);
+      const bx = L.text.x + 14 * u, by = it.y - size * 0.36;
+      c.save(); c.translate(bx, by); c.scale(ind.s, ind.s); c.translate(-bx, -by);
+      DG.neuron(c, bx, by, 12 * u, 1 - dim * 0.6, { lw: 2 * u, stroke: colr, fill: col(q.data && q.data.color) || M.BLUE_C, sa: MO.smooth(ctx.p(t, q.at, 0.3)) });
+      let wMax = 0;
+      it.lines.forEach((ln, kk) => { const r = writeT(c, toks(ln), L.text.x + 50 * u, it.y + kk * size * 1.35, size, ctx.p(t, q.at + kk * dur / it.lines.length, dur / it.lines.length), { align: 'left', col: colr });
+        if (r.length) wMax = Math.max(wMax, r[r.length - 1].x + r[r.length - 1].w - (L.text.x + 50 * u)); });
+      c.restore();
+      if (h && !hOther) box(c, L.text.x - 16 * u, it.y - size * 1.05, wMax + 90 * u, it.lines.length * size * 1.35 + 18 * u, ctx.lt(t, h.at), u);
+      c.restore();
+    });
+    const he = [...hl].reverse().find(z => target(z) === -2 && t >= z.at);
+    if (he && eqBox && !hl.some(z => t >= z.at && z.at > he.at)) box(c, eqBox.x, eqBox.y, eqBox.w, eqBox.h, ctx.lt(t, he.at), u);
+    if (ctx.alpha) { c0.save(); c0.shadowColor = 'rgba(0,0,0,0.9)'; c0.shadowBlur = 10 * u; c0.drawImage(BUF, 0, 0); c0.shadowBlur = 3 * u; c0.drawImage(BUF, 0, 0); c0.restore(); }
+  },
+};
+// 曲线标签：放在曲线末端上方
+function label(c, l, a, colr, u) { if (!l.q.text || a <= 0) return; const e = l.scr[l.scr.length - 1];
+  c.save(); c.globalAlpha *= a; c.font = `${40 * u}px "PuHui-Medium"`; c.fillStyle = colr; c.textAlign = 'right'; c.fillText(l.q.text, e[0], e[1] - 30 * u); c.restore(); }
+// 强调框：Circumscribe 先绕一圈（1s），同时 SurroundingRectangle 画出来并留住（末帧有焦点）
+function box(c, x, y, w, h, lt, u) {
+  if (lt <= 0) return; DG.circumscribe(c, x - 8 * u, y - 8 * u, w + 16 * u, h + 16 * u, MO.seg(lt, 0, 1.0), { lw: 4 * u, col: M.YELLOW });
+  const p = MO.smooth(MO.seg(lt, 0.3, 1.0)); if (p <= 0) return;
+  const pts = DG.rectPts(x + w / 2, y + h / 2, w, h, 120); c.save(); c.strokeStyle = M.YELLOW; c.lineWidth = 3 * u; c.lineJoin = 'round';
+  DG.drawPartial(c, [...pts, pts[0]], DG.cum([...pts, pts[0]]), DG.len([...pts, pts[0]]) * p); c.restore();
+}
+})();