@biunow/agent-biuart 0.0.0-stage → 0.1.0

package/engine/clips/t2_keynote_ui.js

@@ -0,0 +1,347 @@
+// 片段 · 发布会式界面（t2），做教程、功能、参数最顺手：一屏一件事。有截图就让截图当主画面：满幅铺开，口播点到要看的那块就推过去。
+// 镜头：spec 级 data.camera 'smooth'（默认，缓推 0.9s、换块 0.7s、拉回 0.6s，sineInOut）| 'snap'（重音：快推 0.28s、横移 0.30s、进屏轻砸）。
+//   一支片里 snap 只给需要重音的那几段，见 references/镜头语言.md。
+// data: { eyebrow?（标题上方小字）, title?, subtitle?, accent?:'#3d6bff', frame?: 'full'（默认）| 'glass' }
+// cues：title（at 这一帧标题开始从模糊里浮出；text/sub 覆盖 data）
+//       card | step | image（一张卡：text 卡标题，sub 说明，image 截图路径（或 frames 录屏帧序列）；at 这一帧出现；步骤号按出现顺序 01、02…，data.step 可指定）
+//         · 有 image，默认 frame 'full'：截图满幅（等比放进内容框、不裁；data.fit:'cover' 才按焦点 data.focus=[fx,fy] 裁满），
+//           四周垫一层同图的压暗模糊放大版，不留死背景；text / sub 是左下角的黑底撕边标签（12fps 打字）。at 这一帧硬切进来（0.17s 轻砸），
+//           上一屏也是满幅截图时改成同倍率横移换过去。highlight 这一刻推到那块（推到框占画面约 42%，至少推近 18%、最多 2.6 倍），连着的 highlight 移过去；时长按 data.camera。
+//         · data.frame:'glass'（或 spec 级 data.frame）：旧版毛玻璃卡——截图等比放进卡里，横图横卡；竖图在横屏里是「左字右图」。光斑、玻璃是可选包装，慎用
+//         · 没有 image：功能卡。连着的几张（最多 3 张）并排站在一屏里，新卡进来时旧卡让位（像示范片的三卡并列）；
+//           卡上有图标（data.icon：wave memory agent clock phone layers chart code check play bolt lock，不写就画步骤号）、
+//           大标题、说明，可选一个大数字（data.value / prefix / suffix / decimals ＋ data.label，卡片落定后计数）
+//       highlight（框出当前截图里的一块：data.rect = [x, y, w, h]，相对截图的 0..1；text 可选标签；满幅模式下镜头同时推过去，data.fill 改推近后框占画面的比例）
+//       number（大数字单独一屏：data {value, prefix, suffix, decimals, label?（数字上方小字）}；at = 数字落定时刻，提前 0.9s 开始计数，
+//               上一屏这时开始退场，不叠在卡片上；说明写 text 或 sub 都认）
+//               · data.over: true 且上一屏是满幅截图：不另起一屏，留在截图的世界里——镜头拉回整张截图，截图压暗，数字砸在它上面计数，
+//                 说明是黑底撕边标签。数字讲的就是这张截图里的事（两次计时之比、这一页的结论）时用它；和截图无关的数字照旧单独一屏
+// 竖屏：第一张卡进来时标题缩成页眉留在顶上（不让上下大片空着）；卡片按剩余高度放大。safe：版面只排在 top..H−bottom 之间。
+// alpha：不画光斑底；卡片垫一层深色、字带投影，压在亮画面上也看得清。
+// 不写 theme：近黑底上琥珀/青绿/浅青/珊瑚四团慢飘的光斑（不再有蓝紫光斑）。
+// spec.theme（全片色板 ctx.pal）：平涂 bg 底（只有极轻的暗角，不画光斑、不画毛玻璃和扫光），卡片 surface 实色，标题与卡标题 ink、说明 sub，
+//   强调色（步骤号、框、副标签）accent（data.accent 写了照用），框不发光；满幅截图四周的模糊底压一层 bg，撕边标签 ink 底 bg 字。
+CLIPS.t2_keynote_ui = (() => {
+const { clamp, lerp } = U;
+const SANS = '"Inter", "PuHui-Medium"', SANSB = '"Inter", "PuHui-Bold"', ZH = '"PuHui-Medium"', ZHB = '"PuHui-Bold"';
+let BL, slides, scr = {}, G, T;
+// 文字与小件的颜色：默认（深色光斑底上的白字）一套，全片色板时从 6 个键派生一套
+const T0 = { title: '#f5f3ff', eyebrow: '#a7a7b4', subtitle: '#c9c9d4', head: '#f5f5f7', body: 'rgba(235,235,245,0.66)', body2: 'rgba(235,235,245,0.62)', tile: 'rgba(255,255,255,0.10)', icon: '#f2f2f7',
+  num: '#fff', numLabel: 'rgba(235,235,245,0.6)', rule: 'rgba(255,255,255,0.12)', frame: 'rgba(255,255,255,0.22)', bigLabel: '#a7a7b4', bigCap: 'rgba(235,235,245,0.78)', fullBg: '#0b0b0f', accent: '#3d6bff' };
+const fromPal = p => ({ pal: p, title: p.ink, eyebrow: p.sub, subtitle: p.sub, head: p.ink, body: p.sub, body2: p.sub, tile: PAL.alpha(p.ink, 0.07), icon: p.ink,
+  num: p.ink, numLabel: p.sub, rule: PAL.alpha(p.ink, 0.14), frame: PAL.alpha(p.sub, 0.35), bigLabel: p.sub, bigCap: PAL.alpha(p.ink, 0.78), fullBg: p.bg, accent: p.accent,
+  labBg: p.ink, labFg: p.bg, vig: PAL.dark(p) ? '0,0,0' : PAL.rgb(p.ink).join(',') });
+const onAcc = acc => T.pal ? PAL.on(acc, [T.pal.surface, T.pal.ink, T.pal.bg]) : '#fff';
+const track = (c, size, em = -0.02) => { c.letterSpacing = (size * em).toFixed(2) + 'px'; };
+// 本语法自带的几个线性图标（UI.icon 只有 wave/memory/agent）：单位框 ±0.5，圆头等线宽
+const ICON = {
+  clock: c => { c.beginPath(); c.arc(0, 0, 0.42, 0, 7); c.stroke(); c.beginPath(); c.moveTo(0, -0.24); c.lineTo(0, 0); c.lineTo(0.18, 0.1); c.stroke(); },
+  phone: c => { c.beginPath(); c.roundRect(-0.25, -0.45, 0.5, 0.9, 0.1); c.stroke(); c.beginPath(); c.moveTo(-0.08, 0.32); c.lineTo(0.08, 0.32); c.stroke(); },
+  layers: c => { for (let k = 0; k < 3; k++) { const y = -0.22 + k * 0.22; c.globalAlpha = k ? 0.6 : 1; c.beginPath(); c.moveTo(-0.45, y); c.lineTo(0, y - 0.18); c.lineTo(0.45, y); c.lineTo(0, y + 0.18); c.closePath(); c.stroke(); } c.globalAlpha = 1; },
+  chart: c => { c.beginPath(); c.moveTo(-0.42, -0.42); c.lineTo(-0.42, 0.4); c.lineTo(0.44, 0.4); c.stroke(); c.beginPath(); c.moveTo(-0.28, 0.18); c.lineTo(-0.06, -0.04); c.lineTo(0.1, 0.06); c.lineTo(0.36, -0.26); c.stroke(); },
+  code: c => { c.beginPath(); c.moveTo(-0.18, -0.28); c.lineTo(-0.42, 0); c.lineTo(-0.18, 0.28); c.moveTo(0.18, -0.28); c.lineTo(0.42, 0); c.lineTo(0.18, 0.28); c.moveTo(0.08, -0.38); c.lineTo(-0.08, 0.38); c.stroke(); },
+  check: c => { c.beginPath(); c.arc(0, 0, 0.42, 0, 7); c.stroke(); c.beginPath(); c.moveTo(-0.2, 0); c.lineTo(-0.05, 0.16); c.lineTo(0.22, -0.16); c.stroke(); },
+  play: c => { c.beginPath(); c.moveTo(-0.22, -0.34); c.lineTo(0.34, 0); c.lineTo(-0.22, 0.34); c.closePath(); c.fill(); },
+  bolt: c => { c.beginPath(); c.moveTo(0.08, -0.46); c.lineTo(-0.28, 0.06); c.lineTo(0, 0.06); c.lineTo(-0.08, 0.46); c.lineTo(0.28, -0.06); c.lineTo(0, -0.06); c.closePath(); c.fill(); },
+  lock: c => { c.beginPath(); c.roundRect(-0.32, -0.04, 0.64, 0.46, 0.08); c.stroke(); c.beginPath(); c.arc(0, -0.04, 0.2, Math.PI, 0); c.stroke(); },
+};
+const icon = (g, kind, x, y, s, col, t) => {
+  if (['wave', 'memory', 'agent'].includes(kind)) return UI.icon(g, kind, x, y, s, col, t);
+  const f = ICON[kind]; if (!f) return false;
+  g.save(); g.translate(x, y); g.scale(s, s); g.strokeStyle = col; g.fillStyle = col; g.lineWidth = 0.075; g.lineCap = 'round'; g.lineJoin = 'round'; f(g); g.restore();
+};
+// 放得下才算：TY.fit 量每行宽度，多行折成等长（说明文字不留一个字挂在下一行）
+const fitB = (g, text, maxW, size, fam, o = {}) => TY.fit(g, text, maxW, size, fam, { ...o, balance: true });
+const fmtNum = (d, k) => (d.prefix || '') + TY.fmt((+d.value || 0) * k, d.decimals ?? 0) + (d.suffix || '');
+return {
+  fonts: ['PuHui-Medium', 'PuHui-Bold'],
+  safe: true,
+  init(ctx) {
+    const { W, H, u, safe } = ctx;
+    T = ctx.pal ? fromPal(ctx.pal) : T0;
+    BL = [{ x: .22 * W, y: .28 * H, r: .4 * Math.max(W, H), col: [214, 140, 52], a: .7, ax: .11 * W, ay: .11 * H, period: 11, ph: 0 },
+      { x: .79 * W, y: .24 * H, r: .37 * Math.max(W, H), col: [38, 150, 136], a: .7, ax: .1 * W, ay: .15 * H, period: 13, ph: 2.1 },
+      { x: .69 * W, y: .86 * H, r: .3 * Math.max(W, H), col: [120, 214, 255], a: .5, ax: .13 * W, ay: .09 * H, period: 9.5, ph: 4 },
+      { x: .27 * W, y: .89 * H, r: .27 * Math.max(W, H), col: [255, 96, 84], a: .42, ax: .09 * W, ay: .08 * H, period: 12, ph: 1.3 }];
+    const hasTitle = ctx.of('title').length > 0, hdr = ctx.portrait && hasTitle;
+    G = { y0: safe.top + (hdr ? 250 * u : 40 * u), y1: H - safe.bottom - 40 * u, hdrY: safe.top + 150 * u, hdr };
+    G.cy = (G.y0 + G.y1) / 2; G.bh = G.y1 - G.y0;
+    // 分屏：截图卡一张一屏；连着的无图卡最多 3 张一屏；number 单独一屏
+    slides = []; let k = 0;
+    for (const q of ctx.cues) {
+      if (['card', 'step', 'image'].includes(q.kind)) {
+        const n = q.data && q.data.step != null ? q.data.step : ++k, im = ctx.still(q), cd = { q, n, im };
+        const last = slides[slides.length - 1], full = im && ((q.data && q.data.frame) || ctx.data.frame || 'full') !== 'glass';
+        if (!im && last && last.type === 'cards' && last.cards.length < 3) last.cards.push(cd);
+        else slides.push({ type: im ? 'img' : 'cards', cards: [cd], start: q.at, full });
+      } else if (q.kind === 'number') {
+        const last = slides[slides.length - 1];
+        if (q.data && q.data.over && last && last.full) (last.nums = last.nums || []).push(q);   // 砸在当前截图上，不另起一屏
+        else slides.push({ type: 'num', q, start: q.at - 0.9 });
+      }
+    }
+    slides.forEach((s, i) => { s.next = slides[i + 1] ? slides[i + 1].start : 1e9; s.panIn = s.full && i > 0 && slides[i - 1].full; s.panOut = s.full && !!slides[i + 1] && slides[i + 1].full; });
+    // 满幅截图：内容框（让开 safe，四边留一点）、截图的几何、这一屏的镜头（highlight 推近 / 换块；snap 用重音时长）
+    const snap = (ctx.data && ctx.data.camera) === 'snap', MV = snap ? { in: MO.PULSE.punch, next: MO.PULSE.pan, back: MO.PULSE.punch, ease: MO.cubicInOut } : { in: MO.PULSE.push, next: MO.PULSE.glide, back: 0.6, ease: MO.sineInOut };
+    slides.forEach(s => { s.snap = snap; s.panDur = snap ? MO.PULSE.pan : MO.PULSE.glide; });
+    for (const s of slides) if (s.full) {
+      const cd = s.cards[0], q = cd.q, m = 24 * u, bx = { x: ctx.box.x + m, y: ctx.box.y + m, w: ctx.box.w - 2 * m, h: ctx.box.h - 2 * m };
+      const fit = (q.data && q.data.fit) === 'cover' ? 'cover' : 'contain', fo = (q.data && q.data.focus) || [0.5, 0.5];
+      s.geo = { box: bx, fit, fx: fo[0], fy: fo[1] };
+      const [iw, ih] = MD.size(cd.im), s0 = (fit === 'cover' ? Math.max : Math.min)(bx.w / iw, bx.h / ih), dw = iw * s0, dh = ih * s0;
+      const ix = fit === 'cover' ? clamp(bx.x + bx.w * fo[0] - dw * fo[0], bx.x + bx.w - dw, bx.x) : bx.x + (bx.w - dw) / 2, iy = fit === 'cover' ? clamp(bx.y + bx.h * fo[1] - dh * fo[1], bx.y + bx.h - dh, bx.y) : bx.y + (bx.h - dh) / 2;
+      s.f = { x: ix, y: iy, w: dw, h: dh };
+      const bcx = bx.x + bx.w / 2, bcy = bx.y + bx.h / 2; s.base = { x: W / 2, y: H / 2, z: 1 }; s.events = []; let zoomed = false;
+      for (const qh of ctx.of('highlight')) {
+        if (qh.at < s.start || qh.at >= s.next || !qh.data || !qh.data.rect) continue;
+        const R = CLIP.sub(qh.data.rect, s.f), fill = qh.data.fill || 0.42, z = clamp(Math.min(bx.w * fill / R.w, bx.h * fill / R.h), 1.18, 2.6);   // 下限 18%；框太小时最多推到 2.6 倍
+        const tx = R.x + R.w / 2 - (bcx - W / 2) / z, ty = R.y + R.h / 2 - (bcy - H / 2) / z;   // 框中心落到内容框中心（让开 safe）
+        s.events.push({ at: qh.at, kind: 'to', x: tx, y: ty, z, dur: Math.min(zoomed ? MV.next : MV.in, Math.max(MO.PULSE.punch, s.next - qh.at - 0.05)), ease: MV.ease });   // 离下一屏太近就推快一点，别被硬切砍在半路
+        zoomed = true;
+      }
+      for (const qn of s.nums || []) {                                       // 推近过就先拉回整张截图，拉到位数字再砸下来
+        qn.t1 = qn.at - 0.9 + (zoomed ? MV.back : 0);
+        if (zoomed) s.events.push({ at: qn.at - 0.9, kind: 'to', ...s.base, dur: MV.back, ease: MV.ease });
+      }
+    }
+    // 截图卡的版式：标题行 ＋ 截图区；截图区按截图比例定。竖图在横屏里改成「左字右图」
+    const maxW = W * (ctx.portrait ? 0.9 : 0.8), maxH = G.bh * (ctx.portrait ? 0.92 : 0.86), head = (ctx.portrait ? 230 : 130) * u, pad = 36 * u;
+    for (const s of slides) if (s.type === 'img' && !s.full) {
+      const cd = s.cards[0], [iw0, ih0] = MD.size(cd.im), ar = iw0 / ih0;
+      if (!ctx.portrait && ar < 0.9) {                                         // 横屏放竖图：左字右图，图撑满卡高
+        const ih = maxH - 2 * pad, iw = ih * ar, tw = 560 * u;
+        cd.box = { w: tw + iw + 3 * pad, h: maxH, img: { x: tw + 2 * pad, y: pad, w: iw, h: ih }, side: tw };
+      } else {
+        let iw = maxW - 2 * pad, ih = iw / ar; if (ih > maxH - head - 2 * pad) { ih = maxH - head - 2 * pad; iw = ih * ar; }
+        const cw = Math.max(iw + 2 * pad, Math.min(maxW, 760 * u)), ch = ih + head + 2 * pad;
+        cd.box = { w: cw, h: ch, img: { x: (cw - iw) / 2, y: head + pad, w: iw, h: ih } };
+      }
+    }
+  },
+  draw(c, t, ctx) {
+    const { W, H, u, data: d } = ctx, acc = d.accent || T.accent;
+    // ---- 底：光斑（只依赖片段时间，连续） ----
+    let bd = null;
+    const covered = slides.some(s => s.full && t >= s.start + (s.panIn ? s.panDur || MO.PULSE.pan : 0) - 1e-6 && t < s.next - 1e-6);   // 满幅截图整屏盖住时不画光斑底（省 2/3 的渲染时间）
+    if (!ctx.alpha && !covered && T.pal) {                              // 全片色板：平涂底＋极轻暗角
+      c.drawImage(PAINT.cached('clip_t2flat_' + T.pal.bg + W + 'x' + H, W, H, g => { g.fillStyle = T.pal.bg; g.fillRect(0, 0, W, H);
+        const vg = g.createRadialGradient(W / 2, H / 2, Math.min(W, H) * 0.45, W / 2, H / 2, Math.max(W, H) * 0.7); vg.addColorStop(0, `rgba(${T.vig},0)`); vg.addColorStop(1, `rgba(${T.vig},0.08)`); g.fillStyle = vg; g.fillRect(0, 0, W, H); }), 0, 0);
+    } else if (!ctx.alpha && !covered) {
+      const bgc = UI.scratch('clip_t2bg', W, H), g = bgc.getContext('2d'); g.clearRect(0, 0, W, H);   // 先清空：不清的话上一帧的残留会透过半透明边缘，同一时刻先后渲出来差 1 个色阶（qa 确定性 ✗）
+      UI.mesh(g, t, { base: '#050508', blobs: BL, blur: 90, scale: 0.25, grain: 0.035, key: 'clip_t2mesh' });
+      const vg = g.createRadialGradient(W / 2, H / 2, 100 * u, W / 2, H / 2, Math.max(W, H) * 0.55); vg.addColorStop(0, 'rgba(0,0,0,0.38)'); vg.addColorStop(1, 'rgba(0,0,0,0.1)');
+      g.fillStyle = vg; g.fillRect(0, 0, W, H); c.drawImage(bgc, 0, 0); bd = UI.backdrop(bgc, { blur: 40, key: 'clip_t2bd' });
+    }
+    const shadowText = g => { if (ctx.alpha) { g.shadowColor = 'rgba(0,0,0,0.75)'; g.shadowBlur = 18 * u; g.shadowOffsetY = 3 * u; } };
+    // ---- 标题：眉题 → 主标题（模糊→清晰＋上移）→ 副标题；第一屏进来时：横屏退到后面，竖屏缩成页眉留在顶上 ----
+    const qt = ctx.of('title')[0], first = slides[0] ? slides[0].start : 1e9;
+    if (qt) {
+      const out = MO.appleOut(MO.seg(t, first - 0.15, first + 0.5));
+      const keep = G.hdr, title = qt.text ?? d.title ?? '', eb = (qt.data && qt.data.eyebrow) ?? d.eyebrow, sub = qt.sub ?? d.subtitle;
+      if (out < 1 || keep) {
+        c.save(); c.textAlign = 'center'; c.textBaseline = 'alphabetic'; shadowText(c);
+        let sz = TY.fit(c, title, W * 0.86, (ctx.portrait ? 150 : 190) * u, 'Inter', { maxLines: 1, min: 0.55, weight: '600 ', soft: true });   // 先缩字号放一行，放不下再折两行
+        if (!sz.ok) sz = fitB(c, title, W * 0.86, (ctx.portrait ? 150 : 190) * u, 'Inter', { maxLines: 2, weight: '600 ' });
+        const cy = G.cy - (sz.lines.length - 1) * sz.size * 0.55;
+        // 竖屏：整块缩到页眉（主标题 → 约 64px），眉题和副标题淡出
+        const hs = keep ? Math.min(1, 68 * u / sz.size) : 1, sc = keep ? lerp(1, hs, out) : lerp(1, 0.92, out), ty = keep ? lerp(0, G.hdrY - cy, out) : 0;
+        c.translate(W / 2, cy + ty); c.scale(sc, sc); c.translate(-W / 2, -cy);
+        const aSide = 1 - out;
+        if (!keep) { c.globalAlpha = 1 - out; if (out > 0) c.filter = `blur(${(20 * out * u).toFixed(1)}px)`; }
+        if (eb && aSide > 0) { c.save(); c.globalAlpha *= keep ? aSide : 1; c.font = `500 ${34 * u}px ${ZH}`; c.fillStyle = T.eyebrow; c.letterSpacing = `${6 * u}px`; TY.blurIn(c, eb, W / 2, cy - sz.size * 0.95, MO.appleOut(ctx.p(t, qt.at, 0.7)), { blur: 10 * u, dy: 16 * u }); c.restore(); }
+        c.font = `600 ${sz.size}px ${SANSB}`; track(c, sz.size); c.fillStyle = T.title;
+        sz.lines.forEach((ln, i) => TY.blurIn(c, ln, W / 2, cy + i * sz.size * 1.1, MO.appleOut(ctx.p(t, qt.at + 0.15 + i * 0.12, 1.0)), { blur: 26 * u, dy: 40 * u }));
+        if (sub && aSide > 0) { c.save(); c.globalAlpha *= keep ? aSide : 1; c.letterSpacing = '0px'; c.font = `400 ${46 * u}px ${ZH}`; c.fillStyle = T.subtitle;
+          TY.wrap(c, sub, W * 0.84).forEach((ln, i) => TY.blurIn(c, ln, W / 2, cy + (sz.lines.length - 1) * sz.size * 1.1 + 110 * u + i * 62 * u, MO.appleOut(ctx.p(t, qt.at + 0.5, 0.9)), { blur: 12 * u, dy: 22 * u })); c.restore(); }
+        c.restore();
+      }
+    }
+    // ---- 每一屏：下一屏开始时往左后方退走（0.65s），不和下一屏的内容叠着 ----
+    slides.forEach((s, si) => {
+      if (t < s.start - 1e-6) return;
+      const nx = slides[si + 1], leave = MO.appleOut(MO.seg(t, s.next - 0.15, s.next + (nx && nx.type === 'num' ? 0.3 : Math.max(0.5, s.panOut ? s.panDur || 0 : 0)))); if (leave >= 1) return;   // 满幅横移出场要等横移走完
+      if (s.full) return drawFull(c, s, t, ctx, acc);
+      if (s.type === 'num') return drawNumber(c, s, t, leave, ctx, shadowText);
+      if (s.type === 'img') return drawCard(c, s.cards[0], 0, t, leave, ctx, bd, cardGeoImg(s.cards[0], ctx), 'i' + si);
+      // 无图卡并排：n 张时的位置；新卡进来时旧卡按弹簧挪到新位置
+      const vis = s.cards.filter(cd => t >= cd.q.at - 1e-6), n = vis.length, last = vis[n - 1]; ctx._stat = s.cards.some(cd => cd.q.data && cd.q.data.value != null);
+      const rf = n > 1 ? MO.spring(t - last.q.at, { duration: 0.7, bounce: 0.12 }) : 1;
+      vis.forEach((cd, j) => { const A = rowGeo(j, n, ctx, s.cards.length), Bp = j < n - 1 ? rowGeo(j, n - 1, ctx, s.cards.length) : A;
+        const geo = { cx: lerp(Bp.cx, A.cx, rf), cy: lerp(Bp.cy, A.cy, rf), w: lerp(Bp.w, A.w, rf), h: lerp(Bp.h, A.h, rf), focus: j === n - 1 ? 1 : 1 - 0.25 * rf };
+        drawCard(c, cd, j, t, leave, ctx, bd, geo, 'c' + si + '_' + j); });
+    });
+  },
+};
+// 满幅截图一屏：底是同图的压暗模糊放大版（缓存一次），截图等比铺满内容框，镜头按 s.events 脉冲；左上角黑底撕边标签。
+// 进场：上一屏也是满幅截图 → 同倍率横移（默认 0.7s，snap 0.30s；at 这一帧露出第一条边）；否则硬切（snap 加 0.17s 轻砸）。离场：下一屏是满幅截图就让它横移盖过来，否则在下一屏开始时硬切掉
+function drawFull(c, s, t, ctx, acc) {
+  const { W, H, u } = ctx, cd = s.cards[0], q = cd.q;
+  if (t < s.start - 1e-6) return;
+  const nx = slides[slides.indexOf(s) + 1], P = MO.PULSE;
+  if (nx && t >= s.next + (s.panOut ? s.panDur || P.pan : 0) - 1e-6) return;
+  const pd = s.panDur || P.pan, pe = s.snap ? MO.cubicInOut : MO.sineInOut;
+  const panIn = s.panIn ? MO.pulse(ctx.lt(t, s.start), 0, pd, pe) : 1, panOut = s.panOut ? MO.pulse(ctx.lt(t, s.next), 0, pd, pe) : 0;
+  const dx = (1 - panIn) * W - panOut * W;
+  const slam = s.panIn || !s.snap ? 1 : MO.slamK(ctx.lt(t, s.start) / P.slam, 1.06, 0.985);   // 进屏轻砸只在 snap；默认硬切进来不缩放
+  const cam = CAM.track(s.base, s.events, t), im = ctx.frame(q, t);
+  c.save(); c.translate(dx, 0); c.beginPath(); c.rect(0, 0, W, H); c.clip();   // 只画在自己这一屏里：模糊底是 2 倍大的，不裁会在横移时压到邻屏
+  if (!ctx.alpha) { c.fillStyle = T.fullBg; c.fillRect(0, 0, W, H); }
+  CAM.with(c, { x: cam.x, y: cam.y, z: cam.z * slam }, g => {
+    if (!ctx.alpha) { const bg = PAINT.cached('t2full_bg_' + slides.indexOf(s) + '_' + W + 'x' + H + (T.pal ? T.pal.bg : ''), W, H, gg => { gg.filter = T.pal ? 'blur(48px) saturate(0.5)' : 'blur(48px) brightness(0.42) saturate(0.8)'; MD.cover(gg, cd.im, { x: -80, y: -80, w: W + 160, h: H + 160, clip: false }); gg.filter = 'none';
+        if (T.pal) { gg.fillStyle = PAL.alpha(T.pal.bg, 0.8); gg.fillRect(0, 0, W, H); } });   // 全片色板：模糊底上再压八成底色，四周和前后镜头同色、只透一点截图的影子
+      g.drawImage(bg, -W * 0.5, -H * 0.5, W * 2, H * 2); }
+    const f = s.f;
+    g.save(); g.shadowColor = 'rgba(0,0,0,.5)'; g.shadowBlur = 40 * u; g.shadowOffsetY = 14 * u; g.fillStyle = '#000'; g.fillRect(f.x, f.y, f.w, f.h); g.restore();
+    if (s.geo.fit === 'cover') MD.cover(g, im, { ...s.geo.box, fx: s.geo.fx, fy: s.geo.fy });
+    else g.drawImage(im, f.x, f.y, f.w, f.h);
+    hlOn(g, cd, f, t, ctx, acc, u, s.next, cam.z * slam);
+  });
+  // 标签：屏幕层，不跟镜头；压在内容框左下角（截图自己的标题多在上面，不挡它），at 这一帧出现、12fps 打字
+  const size = (ctx.portrait ? 54 : 46) * u, ss = size * 0.66, lx = ctx.box.x + 56 * u, yb = ctx.box.y + ctx.box.h - (ctx.portrait ? 110 : 60) * u;
+  const ySub = yb - ss * 0.75, yMain = q.sub ? ySub - ss * 0.75 - 12 * u - size * 0.75 : yb - size * 0.75;
+  if (q.text) MD.label(c, q.text, lx, yMain, { t, at: q.at, size, maxW: ctx.box.w - 112 * u, bg: T.labBg, fg: T.labFg });
+  if (q.sub) MD.label(c, q.sub, lx, q.text ? ySub : yb - ss * 0.75, { t, at: q.at + (q.text ? 0.25 : 0), size: ss, maxW: ctx.box.w - 112 * u, fam: 'PuHui-Bold', bg: acc, fg: onAcc(acc) });
+  for (const qn of s.nums || []) overNumber(c, qn, t, ctx);
+  c.restore();
+}
+// data.over 的大数字：（拉回整张截图后）截图压暗 → 数字 0.17s 砸入并计数到 at 落定 → 说明是黑底撕边标签。画在屏幕层，不跟镜头
+function overNumber(c, q, t, ctx) {
+  const { W, u } = ctx, t0 = q.t1; if (t < t0 - 1e-6) return;
+  const nd = q.data || {}, k = MO.expoOut(clamp((t - t0) / Math.max(0.3, q.at - t0))), cap = q.text ?? q.sub, bx = ctx.box;
+  c.save(); c.fillStyle = `rgba(0,0,0,${(0.62 * clamp(ctx.lt(t, t0) / 0.17)).toFixed(3)})`; c.fillRect(0, 0, W, ctx.H); c.restore();
+  let size = (ctx.portrait ? 200 : 240) * u; c.font = `600 ${size}px ${SANSB}`; track(c, size, -0.03);
+  const fw = c.measureText(fmtNum(nd, 1)).width; if (fw > bx.w * 0.86) size *= bx.w * 0.86 / fw;
+  const cx = bx.x + bx.w / 2, cy = bx.y + bx.h / 2 + size * 0.3 - (cap ? 40 * u : 0), my = cy - size * 0.3, z = MO.slamK(ctx.lt(t, t0) / MO.PULSE.slam, 1.35, 0.96);
+  c.save(); c.translate(cx, my); c.scale(z, z); c.translate(-cx, -my);
+  c.font = `600 ${size}px ${SANSB}`; track(c, size, -0.03); c.fillStyle = T.pal ? (PAL.dark(T.pal) ? T.pal.ink : T.pal.surface) : '#ffffff'; c.shadowColor = 'rgba(0,0,0,0.6)'; c.shadowBlur = 30 * u;
+  TY.tabular(c, fmtNum(nd, k), cx, cy, { align: 'center' }); c.restore();
+  if (cap) MD.label(c, cap, cx, cy + 110 * u, { t, at: t0 + 0.2, size: (ctx.portrait ? 54 : 48) * u, maxW: bx.w * 0.92, align: 'center', bg: T.labBg, fg: T.labFg });
+}
+// 截图上的 highlight：at 这一帧框开始弹出，其余压暗，一道光扫过框内；只认落在这一屏在屏期间的 highlight
+function hlOn(g, cd, f, t, ctx, acc, u, until, z = 1) {   // z：这一刻相机的放大倍数（满幅模式画在被放大的世界里，标签要按它反算，不然长标签被放大出画）
+  const q = cd.q;
+  for (const qh of ctx.of('highlight')) {
+    if (qh.at < q.at || qh.at >= until || !qh.data || !qh.data.rect) continue;
+    const hl = ctx.lt(t, qh.at); if (hl <= 0) continue;
+    const R = CLIP.sub(qh.data.rect, f), s = MO.spring(hl, { duration: 0.45, bounce: 0.25 }), e = 8 * u * (1 - s);
+    g.save(); g.fillStyle = 'rgba(0,0,0,0.38)'; g.beginPath(); g.rect(f.x, f.y, f.w, f.h); g.roundRect(R.x - e, R.y - e, R.w + 2 * e, R.h + 2 * e, 10 * u); g.globalAlpha = clamp(hl / 0.3); g.fill('evenodd'); g.restore();
+    g.save(); g.strokeStyle = acc; g.lineWidth = 5 * u; if (!T.pal) { g.shadowColor = acc; g.shadowBlur = 18 * u * 0.85; } g.globalAlpha = clamp(hl / 0.15);   // 全片色板：框不发光
+    g.beginPath(); g.roundRect(R.x - e, R.y - e, R.w + 2 * e, R.h + 2 * e, 10 * u); g.stroke(); g.restore();
+    UI.sheen(g, UI.rrPath(R.x, R.y, R.w, R.h, 10 * u), MO.seg(hl, 0.25, 1.0), { x0: R.x, x1: R.x + R.w, width: Math.max(60 * u, R.w * 0.2), alpha: 0.35 });
+    if (qh.text) {
+      const k = clamp(30 * u * z, 30 * u, 52 * u) / z, sz = k, lh = 48 * u * k / (30 * u), pd = 18 * u * k / (30 * u);   // 屏幕上的字大小夹在 30–52u：推近后也不会越放越大
+      const fl = TY.fitFloor(g, qh.text, Math.min(f.w * 0.9, ctx.W * 0.84 / z) - 2 * pd, sz, 'PuHui-Bold', { maxLines: 1, floor: sz * 0.62 }), txt = fl.lines[0] || '';
+      g.font = `600 ${fl.size}px ${ZHB}`; const lw = g.measureText(txt).width + 2 * pd, ly = R.y + R.h + 16 * u / z + lh > f.y + f.h ? R.y - lh - 16 * u / z : R.y + R.h + 16 * u / z, lx = clamp(R.x, f.x, Math.max(f.x, f.x + f.w - lw));
+      g.save(); g.globalAlpha = clamp((hl - 0.15) / 0.25); g.fillStyle = acc; g.beginPath(); g.roundRect(lx, ly, lw, lh, lh / 2); g.fill(); g.fillStyle = onAcc(acc); g.textBaseline = 'middle'; g.fillText(txt, lx + pd, ly + lh / 2 + 1); g.restore(); }
+  }
+}
+// 截图卡的屏幕几何
+function cardGeoImg(cd, ctx) { return { cx: ctx.W / 2, cy: G.cy, w: cd.box.w, h: cd.box.h, focus: 1 }; }
+// 无图卡：横屏排一行（1 张时宽一点），竖屏叠成一列；total = 这一屏最终有几张（排版按当前张数，但尺寸上限按最终张数，挪位时不忽大忽小）
+function rowGeo(j, n, ctx, total) {
+  const { W, u } = ctx, gap = 44 * u;
+  if (ctx.portrait) { const w = W * 0.86, h = Math.min(400 * u, (G.bh - (total - 1) * gap) / total), y0 = G.cy - (n * h + (n - 1) * gap) / 2; return { cx: W / 2, cy: y0 + j * (h + gap) + h / 2, w, h }; }
+  const w = total === 1 ? 760 * u : Math.min(540 * u, (W * 0.9 - (total - 1) * gap) / total), h = Math.min((ctx._stat ? 660 : 540) * u, G.bh * 0.9), x0 = W / 2 - (n * w + (n - 1) * gap) / 2;
+  return { cx: x0 + j * (w + gap) + w / 2, cy: G.cy, w, h };
+}
+// 一张卡：弹簧从下方升起＋绕 Y 轴转正；内容画进离屏纹理（毛玻璃按卡片的屏幕位置取样），再伪 3D 贴回
+function drawCard(c, cd, i, t, leave, ctx, bd, geo, key) {
+  const { u, data: d } = ctx, q = cd.q, lt = ctx.lt(t, q.at); if (lt <= 0) return;
+  const sp = MO.spring(lt, { duration: 0.7, bounce: 0.15 }), acc = d.accent || T.accent;
+  const Bw = geo.w, Bh = geo.h, cx = geo.cx - leave * ctx.W * 0.35, cy = geo.cy + (1 - sp) * 170 * u;   // 落定后停住：不漂浮、不摇
+  const sc = (0.9 + 0.1 * sp) * (1 - 0.12 * leave) * lerp(0.97, 1, geo.focus), ry = (1 - sp) * -0.45 - 0.35 * leave, a = clamp(lt / 0.2) * (1 - leave) * lerp(0.6, 1, geo.focus);
+  const pad = 60, tex = scr[key] || (scr[key] = document.createElement('canvas')); tex.width = Math.ceil(Bw + 2 * pad); tex.height = Math.ceil(Bh + 2 * pad);
+  const g = tex.getContext('2d'); g.reset();
+  const sw = Bw * sc, sh = Bh * sc;
+  if (ctx.alpha) { g.fillStyle = 'rgba(12,12,22,0.62)'; g.beginPath(); g.roundRect(pad, pad, Bw, Bh, 34 * u); g.fill(); }
+  if (T.pal && !ctx.alpha) { g.fillStyle = T.pal.surface; g.beginPath(); g.roundRect(pad, pad, Bw, Bh, 34 * u); g.fill(); g.strokeStyle = PAL.alpha(T.pal.sub, 0.3); g.lineWidth = 1.5; g.stroke(); }   // 全片色板：实色卡片，不是毛玻璃
+  else UI.glass(g, { x: pad, y: pad, w: Bw, h: Bh, r: 34 * u, bd, sample: { x: cx - sw / 2, y: cy - sh / 2, w: sw, h: sh }, tint: ctx.alpha ? 0.08 : 0.075, stroke: 0.22, light: 0.14, shadow: false });
+  g.save(); g.translate(pad, pad);
+  if (cd.im) imgContent(g, cd, Bw, Bh, t, ctx, acc); else featContent(g, cd, Bw, Bh, lt, t, ctx, acc);
+  if (!T.pal) UI.sheen(g, UI.rrPath(0, 0, Bw, Bh, 34 * u), MO.seg(lt, 0.4, 1.2), { x0: 0, x1: Bw, width: 120 * u, angle: -0.35, alpha: 0.16 });   // 光扫过整张卡（入场后 0.4s）
+  g.restore();
+  c.save(); c.globalAlpha = a;
+  UI.shadow(c, cx - sw / 2 + 10 * u, cy - sh / 2 + 20 * u, sw - 20 * u, sh - 20 * u, 34 * u, { blur: 80 * u, oy: 40 * u, alpha: T.pal && !PAL.dark(T.pal) ? 0.16 : 0.55 });
+  UI.persp(c, tex, { cx, cy, w: tex.width * sc, h: tex.height * sc, ry, persp: 1800 * u, strip: 3, shade: 0.35 });
+  c.restore();
+}
+// 步骤号徽章
+function badge(g, x, y, s, n, acc, u) { g.fillStyle = acc; g.beginPath(); g.roundRect(x, y, s, s, s * 0.28); g.fill();
+  g.fillStyle = onAcc(acc); g.font = `700 ${s * 0.5}px ${SANSB}`; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(String(n).padStart(2, '0'), x + s / 2, y + s / 2 + 2 * u); g.textAlign = 'left'; g.textBaseline = 'alphabetic'; }
+// 截图卡的内容：步骤号＋标题＋说明，截图 contain；highlight 框出一块
+function imgContent(g, cd, Bw, Bh, t, ctx, acc) {
+  const { u } = ctx, q = cd.q, B = cd.box, I = B.img, hp = 40 * u, bs = 70 * u;
+  badge(g, hp, hp, bs, cd.n, acc, u);
+  if (B.side) {                                                           // 左字右图：标题、说明在左栏往下排
+    const tw = B.side - hp, tl = fitB(g, q.text || '', tw, 58 * u, 'PuHui-Bold', { maxLines: 3, weight: '600 ' });
+    g.font = `600 ${tl.size}px ${ZHB}`; g.fillStyle = T.head; tl.lines.forEach((ln, k) => g.fillText(ln, hp, hp + bs + 70 * u + k * tl.size * 1.25));
+    if (q.sub) { const sl = fitB(g, q.sub, tw, 34 * u, 'PuHui-Medium', { maxLines: 5 }); g.font = `400 ${sl.size}px ${ZH}`; g.fillStyle = T.body;
+      sl.lines.forEach((ln, k) => g.fillText(ln, hp, hp + bs + 70 * u + tl.lines.length * tl.size * 1.25 + 30 * u + k * sl.size * 1.4)); }
+  } else {
+    const tx = hp + bs + 26 * u, tw = Bw - tx - hp;
+    if (ctx.portrait) {                                                    // 竖屏：卡头高一些，标题、说明字大一号
+      const tl = fitB(g, q.text || '', tw, 56 * u, 'PuHui-Bold', { maxLines: 2, weight: '600 ', min: 0.7 }); g.font = `600 ${tl.size}px ${ZHB}`; g.fillStyle = T.head;
+      tl.lines.forEach((ln, k) => g.fillText(ln, tx, hp + tl.size * 0.85 + k * tl.size * 1.2));
+      // 标题占两行时说明只留一行，卡头放得下
+      if (q.sub) { const sl = fitB(g, q.sub, tw, 34 * u, 'PuHui-Medium', { maxLines: tl.lines.length > 1 ? 1 : 2, min: 0.75 }); g.font = `400 ${sl.size}px ${ZH}`; g.fillStyle = T.body;
+        sl.lines.forEach((ln, k) => g.fillText(ln, tx, hp + tl.size * 0.85 + (tl.lines.length - 1) * tl.size * 1.2 + 24 * u + sl.size + k * sl.size * 1.35)); }
+    } else {
+    const tl = TY.fitFloor(g, q.text || '', tw, 46 * u, 'PuHui-Bold', { maxLines: 1, weight: '600 ', floor: 30 * u });
+    g.font = `600 ${tl.size}px ${ZHB}`; g.fillStyle = T.head; g.fillText(tl.lines[0] || '', tx, hp + (q.sub ? 32 * u : 48 * u));
+    if (q.sub) { const sl = TY.fitFloor(g, q.sub, tw, 28 * u, 'PuHui-Medium', { maxLines: 1, floor: 20 * u }); g.font = `400 ${sl.size}px ${ZH}`; g.fillStyle = T.body2; g.fillText(sl.lines[0] || '', tx, hp + 74 * u); }
+    }
+  }
+  const [iw, ih] = MD.size(cd.im), f = CLIP.fit(iw, ih, I.x, I.y, I.w, I.h);
+  g.save(); g.shadowColor = 'rgba(0,0,0,.45)'; g.shadowBlur = 30 * u; g.shadowOffsetY = 12 * u; g.fillStyle = '#000'; g.beginPath(); g.roundRect(f.x, f.y, f.w, f.h, 10 * u); g.fill(); g.restore();
+  g.save(); g.beginPath(); g.roundRect(f.x, f.y, f.w, f.h, 10 * u); g.clip(); g.drawImage(ctx.frame(q, t), f.x, f.y, f.w, f.h); g.restore();
+  g.strokeStyle = T.frame; g.lineWidth = 1.5; g.beginPath(); g.roundRect(f.x + .75, f.y + .75, f.w - 1.5, f.h - 1.5, 10 * u); g.stroke();
+  // 框出重点（和满幅模式同一套）：只认落在这张卡在屏期间的 highlight
+  const nxAt = (() => { const i = ctx.cues.indexOf(q); const n = ctx.cues.slice(i + 1).find(z => ['card', 'step', 'image', 'number'].includes(z.kind)); return n ? (n.kind === 'number' ? n.at - 0.9 : n.at) : 1e9; })();
+  hlOn(g, cd, f, t, ctx, acc, u, nxAt);
+}
+// 无图功能卡的内容：图标（或步骤号）→ 大标题 → 说明 →（可选）大数字计数。横屏竖卡上下排，竖屏横卡左右排
+function featContent(g, cd, Bw, Bh, lt, t, ctx, acc) {
+  const { u } = ctx, q = cd.q, dd = q.data || {}, hasNum = dd.value != null, pad = 48 * u, tile = (ctx.portrait ? 110 : 120) * u;
+  const drawTile = (x, y) => { g.fillStyle = T.tile; g.beginPath(); g.roundRect(x, y, tile, tile, 26 * u); g.fill();
+    if (!dd.icon || icon(g, dd.icon, x + tile / 2, y + tile / 2, tile * 0.6, T.icon, t) === false) {
+      g.fillStyle = acc; g.beginPath(); g.roundRect(x, y, tile, tile, 26 * u); g.fill(); g.fillStyle = onAcc(acc); g.font = `700 ${tile * 0.46}px ${SANSB}`; g.textAlign = 'center'; g.textBaseline = 'middle';
+      g.fillText(String(cd.n).padStart(2, '0'), x + tile / 2, y + tile / 2 + 3 * u); g.textAlign = 'left'; g.textBaseline = 'alphabetic'; } };
+  const num = (x, y, size, align) => { const v = MO.expoOut(clamp((lt - 0.35) / 0.9)); g.save(); g.font = `600 ${size}px ${SANSB}`; track(g, size, -0.03); g.fillStyle = T.num;
+    TY.tabular(g, fmtNum(dd, v), x, y, { align }); g.restore(); if (dd.label) { g.font = `400 ${28 * u}px ${ZH}`; g.fillStyle = T.numLabel; g.textAlign = align; g.fillText(dd.label, x, y + 46 * u); g.textAlign = 'left'; } };
+  g.textAlign = 'left'; g.textBaseline = 'alphabetic';
+  if (!ctx.portrait) {
+    drawTile(pad, pad);
+    const tl = fitB(g, q.text || '', Bw - 2 * pad, 64 * u, 'PuHui-Bold', { maxLines: 2, weight: '600 ', min: 0.6 });
+    let y = pad + tile + 40 * u + tl.size; g.font = `600 ${tl.size}px ${ZHB}`; g.fillStyle = T.head; tl.lines.forEach((ln, k) => g.fillText(ln, pad, y + k * tl.size * 1.2)); y += (tl.lines.length - 1) * tl.size * 1.2;
+    if (q.sub) { const sl = fitB(g, q.sub, Bw - 2 * pad, (hasNum ? 32 : 38) * u, 'PuHui-Medium', { maxLines: hasNum ? 2 : 4, min: 0.75 }); g.font = `400 ${sl.size}px ${ZH}`; g.fillStyle = T.body;
+      sl.lines.forEach((ln, k) => g.fillText(ln, pad, y + 26 * u + sl.size + k * sl.size * 1.45)); }
+    if (hasNum) { g.fillStyle = T.rule; g.fillRect(pad, Bh - pad - 200 * u, Bw - 2 * pad, 1.5); num(pad, Bh - pad - 66 * u, Math.min(128 * u, (Bw - 2 * pad) / Math.max(3, fmtNum(dd, 1).length) * 1.6), 'left'); }
+  } else {
+    drawTile(pad, (Bh - tile) / 2);
+    const tx = pad + tile + 34 * u, nw = hasNum ? Math.min(340 * u, Bw * 0.36) : 0, tw = Bw - tx - pad - nw;
+    const tl = fitB(g, q.text || '', tw, 62 * u, 'PuHui-Bold', { maxLines: 2, weight: '600 ', min: 0.6 });   // 标题放不下就折两行，不再截掉后半句
+    const sl = q.sub ? fitB(g, q.sub, tw, 38 * u, 'PuHui-Medium', { maxLines: tl.lines.length > 1 ? 1 : 2, min: 0.75 }) : { lines: [], size: 0 };
+    const tH = tl.size + (tl.lines.length - 1) * tl.size * 1.15, blk = tH + (sl.lines.length ? 22 * u + sl.lines.length * sl.size * 1.4 : 0), y0 = (Bh - blk) / 2 + tl.size * 0.85;
+    g.font = `600 ${tl.size}px ${ZHB}`; g.fillStyle = T.head; tl.lines.forEach((ln, k) => g.fillText(ln, tx, y0 + k * tl.size * 1.15));
+    const ys = y0 + (tl.lines.length - 1) * tl.size * 1.15;
+    g.font = `400 ${sl.size}px ${ZH}`; g.fillStyle = T.body; sl.lines.forEach((ln, k) => g.fillText(ln, tx, ys + 22 * u + sl.size + k * sl.size * 1.4));
+    if (hasNum) num(Bw - pad, Bh / 2 + 20 * u, Math.min(96 * u, nw / Math.max(3, fmtNum(dd, 1).length) * 1.7), 'right');
+  }
+}
+// 大数字一屏：at 落定（提前 0.9s 开始滚）；数字上方可有小字 label，下方说明（text 或 sub）
+function drawNumber(c, s, t, leave, ctx, shadowText) {
+  const { W, u } = ctx, q = s.q, nd = q.data || {}, k = MO.expoOut(clamp((t - s.start) / 0.9)), a = MO.appleOut(clamp((t - s.start - 0.12) / 0.3)) * (1 - leave);
+  const cap = q.text ?? q.sub;
+  c.save(); c.globalAlpha = a; shadowText(c); c.textAlign = 'center'; c.textBaseline = 'alphabetic';
+  if (leave > 0) { c.filter = `blur(${(16 * leave * u).toFixed(1)}px)`; }
+  const str = fmtNum(nd, k), full = fmtNum(nd, 1);
+  c.font = `600 ${220 * u}px ${SANSB}`; track(c, 220 * u, -0.03); let size = 220 * u; const fw = c.measureText(full).width; if (fw > W * 0.88) size *= W * 0.88 / fw;
+  c.font = `600 ${size}px ${SANSB}`; track(c, size, -0.03); c.fillStyle = T.num;
+  const y = G.cy + size * 0.32 - (cap ? 30 * u : 0);
+  TY.tabular(c, str, W / 2, y, { align: 'center' });
+  c.letterSpacing = '0px';
+  if (nd.label) { c.font = `500 ${34 * u}px ${ZH}`; c.fillStyle = T.bigLabel; c.fillText(nd.label, W / 2, y - size * 0.85); }
+  if (cap) { c.font = `400 ${(ctx.portrait ? 46 : 44) * u}px ${ZH}`; c.fillStyle = T.bigCap; TY.wrap(c, cap, W * 0.84).forEach((ln, i) => c.fillText(ln, W / 2, y + 100 * u + i * 60 * u)); }
+  c.restore();
+}
+})();

package/engine/clips/t3_finance_chart.js

@@ -0,0 +1,206 @@
+// 片段 · 财经图表（t3）：版式先出 → 坐标系 → 数据长出 → 只标一件事。真实数据驱动，单位/来源/角标全从 data 读。
+// data: { title, unit（副标题：指标与单位）, source（来源，左下）, badge?（只有写了才画右下角标，如 "示意数据"），
+//         chart: 'bar'|'line'|'candle', series: [{label, value}] 或 K 线 [{label, o, h, l, c}], decimals=1, prefix='', suffix='',
+//         highlight?: {index, text, sub}, colors?: {main, accent, dim}, upDown?: 'cn'（红涨绿跌，默认）|'us', theme? }
+// 主题（图表镜头要留在片子的世界里，底和前后镜头同色系）：spec.theme 或 data.theme，
+//   全片色板名（paper / poster / ink / navy / bauhaus / snow / wood / chalk，见 lib/palettes.js）→ 按 ctx.pal 上色：底 bg、字 ink、次要字和刻度 sub、
+//     折线/标注/大数字 accent、柱子 accent2；K 线涨跌仍按 upDown 用红绿（语义色）。
+//   旧写法照旧：'light'（白底，默认）| 'dark'（深底浅字）| 对象 {bg, ink, sub, src, tick, xlab, grid, red, bar, dim}（写了 bg 按它的明暗选浅/深一套，再逐项覆盖）。
+//   'paper' 现在是全片色板「纸本」（以前是 FT 三文鱼粉）。
+//   没写主题但 spec.safe.fill 写了片子的底色：图表底就用它，深色底自动换深底浅字——不再在深色片里冒出一张白卡。
+// cues（at 秒）：title（版式）· bar|line|candle（数据从 at 开始长出，dur 默认按根数；柱状图可写多个 bar cue，各带 data.index（数或数组）＝这几根在这一刻才长，让每根柱子踩自己的那个词）
+//         series 每项可写 color（柱子自己的颜色，和片里别处同一个量的配色对上）· highlight（at 这一帧标注圆点弹出；text/sub 覆盖 data.highlight，data.index 指定第几根）
+//         number（大数字：data {value, prefix, suffix, decimals}，at = 数字落定的时刻，提前 0.9s 开始滚）
+// 规矩：柱一律从 0 起；折线/K 线纵轴不从 0 起时自动在副标题后加「纵轴未从 0 开始」。
+CLIPS.t3_finance_chart = (() => {
+const { clamp, lerp } = U;
+const THEMES = {
+  light: { bg: '#FFFFFF', ink: '#0C0C0C', sub: '#4F5B61', src: '#7c868b', tick: '#5b666b', xlab: '#3a4246', grid: 'rgba(12,12,12,0.13)', red: '#E3120B', bar: '#006BA2', dim: '#C6D2D8' },
+  dark:  { bg: '#0E1116', ink: '#F2F4F5', sub: '#A7B2B8', src: '#848F95', tick: '#9AA5AB', xlab: '#C3CBD0', grid: 'rgba(255,255,255,0.14)', red: '#FF4B3E', bar: '#3EBCD2', dim: '#3A4650' },
+};
+const lum = col => { const m = String(col).trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i); if (!m) return 1;
+  const h = m[1].length === 3 ? [...m[1]].map(x => x + x).join('') : m[1], [r, g, b] = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b; };
+// 旧主题写法（'light' / 'dark' / 不带色板键的对象）不当全片色板解析（clip.js 认这个钩子）
+const legacy = th => th === 'light' || th === 'dark' || (!!th && typeof th === 'object' && !Array.isArray(th) && th.name == null && !['surface', 'accent', 'accent2'].some(k => k in th));
+// 全片色板 → 图表的一整套色：辅助色都从 6 个键派生
+const fromPal = p => ({ bg: p.bg, ink: p.ink, sub: p.sub, src: PAL.mix(p.sub, p.bg, 0.2), tick: p.sub, xlab: PAL.mix(p.ink, p.sub, 0.45), grid: PAL.alpha(p.ink, 0.13),
+  red: p.accent, bar: p.accent2, dim: PAL.mix(p.bg, p.sub, 0.3), dark: PAL.dark(p) });
+function palette(ctx) {
+  if (ctx.pal) return fromPal(ctx.pal);
+  const T = (typeof ctx.theme === 'string' || (ctx.theme && Object.keys(ctx.theme).length)) ? ctx.theme : ctx.data.theme;
+  if (typeof T === 'string' && !legacy(T) && window.PALETTES[T]) return fromPal(PAL.resolve(T));   // data.theme 写了色板名
+  if (typeof T === 'string') return { ...(THEMES[T] || THEMES.light) };
+  const bg = (T && T.bg) || (ctx.safe && ctx.safe.fill) || null;
+  const base = bg ? (lum(bg) < 0.45 ? THEMES.dark : THEMES.light) : THEMES.light;
+  return { ...base, ...(bg ? { bg } : {}), ...(T || {}) };
+}
+let RED, INK, SUB, GRID, P;
+const CN = '"PuHui-Medium"', CNB = '"PuHui-Bold"', NUM = '"RobotoCondensed", "PuHui-Medium"';
+let L, BUF;
+const fmtv = (d, v) => (d.prefix || '') + TY.fmt(v, d.decimals ?? 1) + (d.suffix || '');
+return {
+  fonts: ['PuHui-Medium', 'PuHui-Bold'],
+  safe: true,
+  legacyTheme: legacy,
+  init(ctx) {
+    P = palette(ctx); RED = P.red; INK = P.ink; SUB = P.sub; GRID = P.grid;
+    const { W, H, u, data: d } = ctx, m = (ctx.portrait ? 70 : 90) * u, c = document.createElement('canvas').getContext('2d');
+    const kind = (ctx.of('bar', 'line', 'candle')[0] || {}).kind || d.chart || 'bar';
+    const S = d.series || [];
+    const vals = kind === 'candle' ? S.flatMap(r => [r.h, r.l]) : S.map(r => r.value);
+    let lo = Math.min(...vals), hi = Math.max(...vals);
+    let zeroBased = kind === 'bar' || lo <= 0 || (hi - lo) / hi > 0.6;
+    if (zeroBased) lo = Math.min(0, lo);
+    const pad = (hi - lo) * 0.08, ticks = CH.ticks(zeroBased ? lo : lo - pad, hi + pad, ctx.portrait ? 5 : 4);
+    const step = ticks[1] - ticks[0];                                     // 刻度要把数据整个包住（CH.ticks 只给区间内的整刻度）
+    while (ticks[ticks.length - 1] < hi + pad * 0.5) ticks.push(+(ticks[ticks.length - 1] + step).toFixed(10));
+    while (ticks[0] > (zeroBased ? lo : lo - pad * 0.5)) ticks.unshift(+(ticks[0] - step).toFixed(10));
+    const titleSz = (ctx.portrait ? 64 : 58) * u, t = TY.fit(c, d.title || '', W - 2 * m, titleSz, 'PuHui-Bold', { maxLines: ctx.portrait ? 3 : 2, weight: '700 ' });
+    const sub = (d.unit || '') + (!zeroBased ? (d.unit ? '　' : '') + '纵轴未从 0 开始' : '');
+    // 副标题、来源行：放不下先缩一点，再折两行（竖屏长口径会出画）；来源行要让开右下角标
+    const fsz = ctx.portrait ? 1.2 : 1, subF = TY.fit(c, sub, W - 2 * m, 32 * u * fsz, 'PuHui-Medium', { maxLines: 2, min: 0.8 });
+    c.font = `700 ${28 * u}px "PuHui-Medium"`; const badgeW = d.badge ? c.measureText(d.badge).width + 28 + 30 * u : 0;
+    const srcF = TY.fit(c, d.source || '', W - 2 * m - badgeW, 26 * u * fsz, 'PuHui-Medium', { maxLines: 2, min: 0.8 });
+    const top = ctx.safe.top + 80 * u + t.lines.length * t.size * 1.25 + 60 * u + (subF.lines.length - 1) * subF.size * 1.3;
+    const band = ctx.of('number').length ? 150 * u : 0;                 // 有 number：给大数字单独留一条，不压在图区里（折线一上涨，右上角正好是线头）
+    const F = { x: m + 20 * u, y: top + 40 * u + band, w: W - 2 * m - 40 * u, h: H - top - 40 * u - band - (ctx.portrait ? 260 : 190) * u - ctx.safe.bottom - (srcF.lines.length - 1) * srcF.size * 1.3 };   // safe.bottom：字幕带整条让出来，来源行落在它上面
+    const n = S.length, slot = (F.w - 80 * u) / n, xs = S.map((_, i) => F.x + slot * (i + 0.5));   // 右边留 80px 给刻度值，别压在最后一根柱上
+    // x 轴：时间序列（折线/K 线，或 data.xAxis:'time'）按间隔抽稀；类目（柱状图默认）每根都要有名字，放不下就缩字、再放不下错成两行
+    const category = (d.xAxis || (kind === 'bar' ? 'category' : 'time')) === 'category';
+    const fs0 = ctx.portrait ? 1.2 : 1, xf = 30 * u * fs0;
+    c.font = `400 ${xf}px "RobotoCondensed", "PuHui-Medium"`;
+    const maxW = Math.max(1, ...S.map(r => c.measureText(String(r.label ?? '')).width));
+    const xScale = category ? clamp(slot * 0.94 / maxW, 0.7, 1) : 1, stagger = category && slot * 0.94 < maxW * 0.7;
+    // 刻度标签按步长定小数位：步长 2.5 就要 1 位，不然 −2.5/2.5/7.5 会被四舍五入印成 −3/3/8（刻度撒谎）
+    let tdec = 0; while (tdec < 4 && Math.abs(step * 10 ** tdec - Math.round(step * 10 ** tdec)) > 1e-6) tdec++;
+    if (kind === 'bar' && Math.min(...vals) < 0) {                       // 负数柱的数值写在柱底下方：最低那根下面留出一行，不然压到类目名
+      const vmin = Math.min(...vals), need = 56 * u * fs0;
+      while ((vmin - ticks[0]) / (ticks[ticks.length - 1] - ticks[0]) * F.h < need) ticks.unshift(+(ticks[0] - step).toFixed(10));
+    }
+    const qh1 = ctx.of('highlight')[0], H1 = d.highlight || {}, hiI = qh1 ? (qh1.data && qh1.data.index != null ? qh1.data.index : (H1.index != null ? H1.index : S.length - 1)) : -1;
+    if (kind === 'bar' && hiI >= 0 && S[hiI] && S[hiI].value >= 0 && S.some((r, j) => j !== hiI && r.value >= S[hiI].value)) {   // 标注的不是最高那根：文字块要抬到邻柱之上，顶上留够一块（不够就加一档刻度）
+      const nL = [C(qh1.text, H1.text), C(qh1.sub, H1.sub)].filter(Boolean).length, need = (52 * nL + 44 + 30) * u * fs0, vmax = Math.max(...vals);
+      while ((ticks[ticks.length - 1] - vmax) / (ticks[ticks.length - 1] - ticks[0]) * F.h < need) ticks.push(+(ticks[ticks.length - 1] + step).toFixed(10));
+    }
+    L = { subF, srcF, m, kind, S, zeroBased, ticks, tdec, yS: CH.lin(ticks[0], ticks[ticks.length - 1], F.y + F.h, F.y), F, xs, slot, t, sub, band, category, xFont: xf * xScale, stagger,
+      every: category ? 1 : Math.max(1, Math.ceil(n / (ctx.portrait ? 6 : 10))) };
+    const main = (d.colors && d.colors.main) || (kind === 'bar' ? P.bar : RED);
+    L.col = { main, accent: (d.colors && d.colors.accent) || main, dim: (d.colors && d.colors.dim) || P.dim };
+    const up = P.dark != null ? (P.dark ? '#FF4B3E' : '#E3120B') : RED;   // 涨跌是语义色：用了全片色板（accent 未必是红）也照旧红绿
+    L.updown = d.upDown === 'us' ? ['#1B9E5A', up] : [up, '#1B9E5A'];
+  },
+  draw(c0, t, ctx) {
+    // alpha：字和线叠在别的画面上可能看不见。先画进缓冲，再带一圈主题底色的光晕合成（和 t1 同一招；默认白纸黑字＝白光晕）
+    const c = ctx.alpha ? (BUF = BUF || document.createElement('canvas'), BUF.width = ctx.W, BUF.height = ctx.H, BUF.getContext('2d')) : c0;
+    const { W, H, u, data: d } = ctx, { m, F, yS, xs, S, kind } = L, fs = ctx.portrait ? 1.2 : 1;   // 竖屏在手机上看：小字放大两成
+    const qt = ctx.of('title')[0] || { at: 0 }, lt = ctx.lt(t, qt.at);
+    if (!ctx.alpha) { c.fillStyle = P.bg; c.fillRect(0, 0, W, H); }
+    // ---- 版式：顶红线 → 小旗 → 标题 → 副标题（单位/口径）→ 来源 → 角标 ----
+    if (lt > 0) {
+      const p = MO.quintOut(MO.seg(lt, 0, 0.45));
+      c.fillStyle = RED; c.fillRect(0, 0, W * p, 8 * u); CH.tag(c, m, ctx.safe.top + 52 * u, 96 * p * u, 22 * u, RED);
+      c.save(); c.textBaseline = 'alphabetic'; c.textAlign = 'left';
+      const tp = MO.quintOut(MO.seg(lt, 0.05, 0.5)); c.globalAlpha = tp; c.fillStyle = INK; c.font = `700 ${L.t.size}px ${CNB}`;
+      L.t.lines.forEach((ln, i) => c.fillText(ln, m, ctx.safe.top + 80 * u + (i + 1) * L.t.size * 1.2 + (1 - tp) * 18 * u));
+      const sp = MO.quintOut(MO.seg(lt, 0.15, 0.6)), sy = ctx.safe.top + 80 * u + L.t.lines.length * L.t.size * 1.2 + 54 * u;
+      c.globalAlpha = sp; c.font = `400 ${L.subF.size}px ${CN}`; c.fillStyle = SUB; L.subF.lines.forEach((ln, k) => c.fillText(ln, m, sy + k * L.subF.size * 1.3 + (1 - sp) * 14 * u));
+      c.globalAlpha = MO.seg(lt, 0.2, 0.6); c.font = `400 ${L.srcF.size}px ${CN}`; c.fillStyle = P.src;
+      L.srcF.lines.forEach((ln, k, a) => c.fillText(ln, m, H - 40 * u - ctx.safe.bottom - (a.length - 1 - k) * L.srcF.size * 1.3));
+      c.restore();
+      if (d.badge) { c.save(); c.globalAlpha = MO.seg(lt, 0.2, 0.6); CH.demoBadge(c, d.badge, { x: W - m, y: H - 50 * u - ctx.safe.bottom, font: `700 ${28 * u}px ${CN}`, col: RED, box: tint(RED, 0.06) }); c.restore(); }
+    }
+    // ---- 坐标系（版式之后 0.25s） ----
+    const qd = ctx.of('bar', 'line', 'candle')[0] || { at: qt.at + 0.75 }, gStart = Math.min(qt.at + 0.25, qd.at - 0.4);
+    const gp = MO.seg(ctx.lt(t, gStart), 0, 0.6);
+    const fmtTick = v => TY.fmt(v, L.tdec);
+    CH.grid(c, F, L.ticks, yS, gp, { col: GRID, zeroCol: L.zeroBased ? INK : GRID, font: `400 ${28 * u * fs}px ${NUM}`, labelCol: P.tick, side: 'right', lw: 1.5 * u, zeroLw: 3 * u, fmt: fmtTick, labelDy: -10 * u });
+    const qh0 = ctx.of('highlight')[0], hi0 = qh0 ? (qh0.data && qh0.data.index != null ? qh0.data.index : (d.highlight && d.highlight.index != null ? d.highlight.index : S.length - 1)) : -1;
+    const keep = i => i % L.every === 0 || i === hi0 || (i === S.length - 1 && (S.length - 1) % L.every >= L.every / 2);   // 被标注的那根永远有名字；末尾标签离上一个太近就不硬塞
+    const xp = MO.seg(ctx.lt(t, gStart + 0.15), 0, 0.5), xy = F.y + F.h + 46 * u, xo = { font: `400 ${L.xFont}px ${NUM}`, col: P.xlab };
+    if (!L.stagger) CH.xLabels(c, S.map((r, i) => ({ x: xs[i], label: keep(i) ? String(r.label ?? '') : '' })), xy, xp, xo);
+    else { CH.xLabels(c, S.map((r, i) => ({ x: xs[i], label: i % 2 ? '' : String(r.label ?? '') })), xy, xp, xo); CH.xLabels(c, S.map((r, i) => ({ x: xs[i], label: i % 2 ? String(r.label ?? '') : '' })), xy + L.xFont * 1.15, xp, xo); }
+    // ---- 数据 ----
+    const n = S.length, ddur = qd.dur || Math.min(2.2, Math.max(0.9, n * (kind === 'bar' ? 0.22 : 0.06)));
+    const dp = ctx.p(t, qd.at, ddur);
+    const qh = ctx.of('highlight')[0], hi = qh ? (qh.data && qh.data.index != null ? qh.data.index : (d.highlight && d.highlight.index != null ? d.highlight.index : n - 1)) : -1;
+    const hiP = qh ? MO.smooth(ctx.p(t, qh.at, 0.4)) : 0;
+    let anchor = null;
+    if (kind === 'bar') {
+      const bw = Math.min(150 * u, L.slot * 0.62);
+      const on = qh && ctx.lt(t, qh.at) > 0, opt = { col: L.col.main, hiP, hiCol: L.col.accent, dimCol: L.col.dim,
+        fmt: v => fmtv(d, v), font: `600 ${Math.max(24 * u * fs, Math.min(34 * u * fs, L.slot * 0.3))}px ${NUM}`, labelCol: INK, label: n <= 14 };
+      const own = {};                                                      // 带 data.index 的 bar cue：这几根柱子从它的 at 起单独长
+      for (const q of ctx.of('bar')) if (q.data && q.data.index != null) [].concat(q.data.index).forEach(i => { own[i] = q; });
+      let tops;
+      if (!Object.keys(own).length && !S.some(r => r.color)) tops = CH.bars(c, S.map((r, i) => ({ x: xs[i], v: r.value })), yS, bw, dp, { ...opt, lag: Math.min(0.22, 2 / n), hi: on ? hi : -1 });
+      else tops = S.map((r, i) => {
+        const q = own[i], p = q ? ctx.p(t, q.at, q.dur || 0.7) : MO.lagged(i, n, dp, Math.min(0.22, 2 / n));
+        const col = r.color || L.col.main;
+        return CH.bars(c, [{ x: xs[i], v: r.value }], yS, bw, p, { ...opt, lag: 0, col, hiCol: col, hi: on ? (i === hi ? 0 : 1) : -1 })[0];
+      });
+      if (hi >= 0) anchor = [xs[hi], tops[hi][1]];
+      L.neg = hi >= 0 && S[hi].value < 0; L.tops = tops;
+      L.barAbove = hi >= 0 && S[hi].value >= 0 && S.some((r, j) => j !== hi && r.value > S[hi].value * 1.5);   // 有更高的柱子挡在旁边：标注放在这根柱子正上方，别压进别的柱子
+    } else if (kind === 'line') {
+      const pts = S.map((r, i) => [xs[i], yS(r.value)]);
+      const lp = MO.smooth(dp);
+      const hp = CH.line(c, pts, lp, { col: L.col.main, lw: 5 * u, headR: 9 * u, area: { top: F.y, base: F.y + F.h, c0: tint(RED, 0.12), c1: tint(RED, 0) } });
+      if (hp && lp < 1) { const v = yS.inv(hp[1]); c.save(); c.font = `700 ${36 * u}px ${NUM}`; c.fillStyle = L.col.main; c.textAlign = 'left'; c.textBaseline = 'middle'; TY.tabular(c, fmtv(d, v), hp[0] + 20 * u, hp[1] - 4 * u); c.restore(); }
+      else if (lp >= 1) { const v = S[n - 1].value; c.save(); c.font = `700 ${36 * u}px ${NUM}`; c.fillStyle = L.col.main; c.textAlign = 'right'; c.textBaseline = 'alphabetic'; TY.tabular(c, fmtv(d, v), pts[n - 1][0], pts[n - 1][1] - 24 * u, { align: 'right' }); c.restore(); }
+      if (hi >= 0) anchor = pts[hi];
+    } else {
+      const cw = Math.min(30 * u, L.slot * 0.6);
+      CH.candles(c, S, xs, yS, cw, dp, { up: L.updown[0], down: L.updown[1], lag: Math.min(0.06, 1.5 / n) });
+      if (hi >= 0) anchor = [xs[hi], yS(S[hi].c)];
+    }
+    // ---- 标注：一镜只标一件事 ----
+    let above = L.barAbove;
+    if (qh && anchor && kind === 'bar' && !above && !L.neg) {             // 预演斜向标注的文字框：压到别的柱子或它的数值，就改放这根柱子正上方
+      const H0 = d.highlight || {}, ls = [C(qh.text, H0.text), C(qh.sub, H0.sub)].filter(Boolean);
+      const ax = anchor[0] - Math.min(150 * u, L.slot * 0.62) / 2, right = ax > F.x + F.w * 0.55, tx = right ? ax - 60 * u : ax + 60 * u, ty = Math.max(F.y + 60 * u, anchor[1] - 140 * u);
+      c.save(); c.font = `700 ${50 * u}px ${NUM}`; let tw = c.measureText(ls[0] || '').width; c.font = `400 ${28 * u * fs}px ${CN}`; if (ls[1]) tw = Math.max(tw, c.measureText(ls[1]).width); c.restore();
+      const bx0 = right ? tx - 12 - tw : tx + 12, bx1 = bx0 + tw, by1 = ty + (ls.length > 1 ? 56 : 16) * u;
+      above = L.tops.some(([bx, by], j) => j !== hi && bx + L.slot * 0.45 > bx0 && bx - L.slot * 0.45 < bx1 && by - 44 * u * fs < by1);
+    }
+    if (qh && anchor && kind === 'bar' && above) {
+      const H0 = d.highlight || {}, lines = [C(qh.text, H0.text), C(qh.sub, H0.sub)].filter(Boolean), k = ctx.lt(t, qh.at);
+      if (k > 0) {
+        const s = MO.spring(k, { duration: 0.45, bounce: 0.25 }), lp = MO.quintOut(MO.seg(k, 0.12, 0.45)), fp = MO.quintOut(MO.seg(k, 0.3, 0.7));
+        // 文字块放在这根柱子正上方：先量宽，横向夹在图区里；再抬到它横跨的所有柱子（含数值标签）之上，引线从本柱数值标签上沿连上去
+        const [x, y] = anchor, lh = 52 * u * fs, vlab = 44 * u * fs;
+        c.save(); c.font = `700 ${50 * u * fs}px ${NUM}`; let tw = c.measureText(lines[0]).width; c.font = `400 ${28 * u * fs}px ${CN}`; if (lines[1]) tw = Math.max(tw, c.measureText(lines[1]).width);
+        const cx = clamp(x, F.x + tw / 2, F.x + F.w - 80 * u - tw / 2);
+        const cover = L.tops.filter(([bx]) => bx > cx - tw / 2 - L.slot / 2 && bx < cx + tw / 2 + L.slot / 2).map(([, by]) => by);
+        const bottom = Math.max(F.y + lh * lines.length, Math.min(y, ...cover) - vlab - 18 * u);   // 文字块底边
+        c.fillStyle = RED; c.beginPath(); c.arc(x, y - 4 * u, 9 * u * Math.max(0, s), 0, 7); c.fill();
+        const y0 = y - vlab, y1 = bottom + 8 * u;
+        if (y0 - y1 > 6 * u) { c.strokeStyle = INK; c.lineWidth = 2 * u; c.beginPath(); c.moveTo(x, y0); c.lineTo(lerp(x, cx, lp), lerp(y0, y1, lp)); c.stroke(); }
+        c.globalAlpha = fp; c.fillStyle = INK; c.textAlign = 'center'; c.textBaseline = 'alphabetic';
+        lines.forEach((ln, i) => { c.font = i === 0 ? `700 ${50 * u * fs}px ${NUM}` : `400 ${28 * u * fs}px ${CN}`; c.fillText(ln, cx, bottom - (lines.length - 1 - i) * lh * (i === 0 ? 1 : 0.62) + (1 - fp) * 12 * u); });
+        c.restore();
+      }
+    } else if (qh && anchor) {
+      if (kind === 'bar') anchor = [anchor[0] - Math.min(150 * u, L.slot * 0.62) / 2, anchor[1]];
+      const H0 = d.highlight || {}, lines = [C(qh.text, H0.text), C(qh.sub, H0.sub)].filter(Boolean);
+      const right = anchor[0] > F.x + F.w * 0.55, tx = right ? anchor[0] - 60 * u : anchor[0] + 60 * u;
+      const ty = L.neg ? Math.min(F.y + F.h - 90 * u, anchor[1] + 70 * u) : Math.max(F.y + 60 * u, anchor[1] - 140 * u);   // 负数柱：标注往下走，别压回零线上方的柱子
+      CH.callout(c, ctx.lt(t, qh.at), 0, { x: anchor[0], y: anchor[1], tx, ty, lines, col: INK, dotCol: RED, font: `700 ${50 * u}px ${NUM}`, font2: `400 ${28 * u * fs}px ${CN}`, align: right ? 'right' : 'left', r: 9 * u });
+    }
+    // ---- 大数字（number cue：at = 落定时刻） ----
+    for (const q of ctx.of('number')) {
+      const nd = q.data || {}, k = MO.expoOut(clamp((t - (q.at - 0.9)) / 0.9)); if (t < q.at - 0.9) continue;
+      c.save(); c.globalAlpha = clamp((t - (q.at - 0.9)) / 0.2); c.font = `700 ${120 * u}px ${NUM}`; c.fillStyle = RED; c.textAlign = 'right'; c.textBaseline = 'alphabetic';
+      const numStr = (nd.prefix || '') + TY.fmt((nd.value || 0) * k, nd.decimals ?? 0) + (nd.suffix || ''), by = F.y - 62 * u;   // 落在图区上方专留的那一条（让开顶格刻度值）
+      const nw = c.measureText((nd.prefix || '') + TY.fmt(nd.value || 0, nd.decimals ?? 0) + (nd.suffix || '')).width;
+      TY.tabular(c, numStr, W - m, by, { align: 'right' });
+      const cap = q.text ?? q.sub; if (cap) { c.font = `400 ${30 * u * fs}px ${CN}`; c.fillStyle = SUB; c.textAlign = 'right'; c.fillText(cap, W - m - nw - 24 * u, by - 10 * u); }
+      c.restore();
+    }
+    if (ctx.alpha) { c0.save(); c0.shadowColor = P.bg; for (const b of [8, 3, 1.5]) { c0.shadowBlur = b * ctx.u; c0.drawImage(BUF, 0, 0); } c0.restore(); }   // 三遍由宽到窄：外圈柔光＋贴字的实边
+  },
+};
+function C(...a) { return a.find(v => v != null && v !== ''); }
+function tint(col, a) { const m = String(col).trim().match(/^#([0-9a-f]{6})$/i); if (!m) return a ? 'rgba(227,18,11,' + a + ')' : 'rgba(227,18,11,0)';
+  const n = parseInt(m[1], 16); return `rgba(${n >> 16},${(n >> 8) & 255},${n & 255},${a})`; }
+})();