cotutor 0.2.0 → 0.4.0

package/dist/ui/kid/tianzige.js

@@ -0,0 +1,45 @@
+/**
+ * 田字格卡的笔顺数据:`GET /api/kid/tianzige/<字>` 从 node_modules 的 hanzi-writer-data(makemeatianzige 的衍生,Arphic 许可)现读一个字的 JSON——
+ * strokes 是每一笔的 SVG 轮廓、medians 是每一笔的中线,坐标 1024 见方、y 向上(页面用 scale(1,-1) translate(0,-900) 摆正)。
+ * 数据是确定性资源,不经模型;iPad 不碰外网。字不在数据里(生僻字)→ null,页面只显示字形不动。
+ */
+import { readFile } from 'node:fs/promises';
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
+import { HAN } from "../../board/cards/index.js";
+let dataDir;
+/** hanzi-writer-data 的目录;没装 → null(doctor 不点名:它是 dependencies 里的,装 cotutor 就有) */
+export function tianzigeDataDir() {
+    if (dataDir !== undefined)
+        return dataDir;
+    try {
+        dataDir = dirname(createRequire(import.meta.url).resolve('hanzi-writer-data/package.json'));
+    }
+    catch {
+        dataDir = null;
+    }
+    return dataDir;
+}
+const cache = new Map();
+/** 一个汉字的笔顺;不是单个汉字、数据里没有、文件坏了都 → null */
+export async function tianzigeData(ch) {
+    if (!HAN.test(ch))
+        return null;
+    const hit = cache.get(ch);
+    if (hit !== undefined)
+        return hit;
+    const dir = tianzigeDataDir();
+    let out = null;
+    if (dir) {
+        try {
+            const raw = JSON.parse(await readFile(join(dir, `${ch}.json`), 'utf8'));
+            if (Array.isArray(raw.strokes) && Array.isArray(raw.medians) && raw.strokes.length === raw.medians.length && raw.strokes.length > 0)
+                out = { strokes: raw.strokes, medians: raw.medians };
+        }
+        catch {
+            out = null;
+        }
+    }
+    cache.set(ch, out);
+    return out;
+}

package/dist/ui/kid/tutor-face.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 老师的脸:学科色 + C 形开口环 + 白底圆里的图或字。学科色服务端定好随老师下发(t.color,src/ui/shared/tutor-color.ts)。
+ * 听写页、口语课用这里的「‹ logo」胶囊回首页(放 logo、不放老师头像),
+ * 样子照 kid-page.ts 的 #back,两处改要一起改(logo 是 brand.ts 的 BACK_LOGO,两处同一份)。
+ * 脚本是 ES5、没有反斜杠与反引号(插进各页的模板字符串)。
+ */
+/**
+ * 回首页胶囊带上老师:整颗填这位老师的颜色(同首页牌上那块首字小牌),logo 后面接名字的首字,箭头、logo、首字白色;
+ * 还不知道是哪位老师时浅底只放 logo。老师页(kid-page.ts)、听写中英文与口语课(下面的 backCapsule)用这一份;小课堂舞台在 React 里照它画(src/ui/stage/lecture.tsx)。
+ * 首字的取法同首页牌上的 .fc:名字(display)的第一个字。tests/brand.test.ts 盯着几处一个样子。
+ */
+export declare const BACK_TINT_JS = "\n  var tutorInitial = function (t) { return t ? (Array.from(t.display || '')[0] || '') : ''; };\n  var backTint = function (el, t) {\n    if (!el) return;\n    var c = (t && t.color) || '';\n    var ini = el.querySelector('.bk-ini');\n    if (!ini) { ini = document.createElement('span'); ini.className = 'bk-ini'; ini.setAttribute('aria-hidden', 'true'); el.appendChild(ini); }\n    var ch = c ? (t.initial || tutorInitial(t)) : '';\n    ini.textContent = ch;\n    el.classList.toggle('tinted', Boolean(c && ch));\n    if (c && ch) el.style.setProperty('--bk', c); else el.style.removeProperty('--bk');\n    el.setAttribute('aria-label', c && ch && t.display ? '\u56DE\u9996\u9875(' + t.display + ')' : '\u56DE\u9996\u9875');\n  };\n";
+/** 着色的胶囊(#back 上加 .tinted、--bk 是老师的颜色);两处的箭头类名不同(老师页 #back-ic、听写与口语课 .bk-ic) */
+export declare const BACK_TINT_CSS = "\n  #back.tinted { background:var(--bk); border-color:var(--bk); color:#fff; }\n  #back.tinted .ct-logo { color:#fff; }\n  #back.tinted #back-ic, #back.tinted .bk-ic { color:#ffffffd9; }\n  #back .bk-ini { display:none; }\n  #back.tinted .bk-ini { display:block; flex:none; margin:0 12px 0 -2px; font-size:23px; font-weight:800; line-height:1; color:#fff; }\n";
+/** 服务端出页面时就知道是哪位老师(听写的念的老师、口语课链接带的 ?tutor=):把颜色、首字、名字插进页面,胶囊打开就是对的颜色;不知道 → null(浅底只放 logo) */
+export declare function backTutorOf(tutors: Readonly<Record<string, {
+    display?: string;
+    subject?: string;
+    color?: string;
+}>>, name: string | null | undefined): {
+    color: string;
+    initial: string;
+    display: string;
+} | null;
+/** 插进页面脚本的那一段 JSON(< 换掉,免得关掉 script) */
+export declare const backTutorJson: (b: {
+    color: string;
+    initial: string;
+    display: string;
+} | null) => string;
+/** 听写页、口语课用:tutorAvatar(t) → 一个 .tfav(大小由所在处的样式定);backCapsule(onClick) → { el, set(t) }(「‹ logo 首字」,set(t) 填这位老师的颜色,t 为空浅底只放 logo);t = /api/kid/home 里 tutors 的一项(name、display、avatar、color) */
+export declare const TUTOR_FACE_JS: string;
+export declare const TUTOR_FACE_CSS = "\n  #back { position:fixed; top:calc(env(safe-area-inset-top) + 10px); left:calc(env(safe-area-inset-left) + 12px); z-index:20; display:flex; align-items:center; gap:2px; height:48px; min-width:48px; padding:0 4px 0 8px; border-radius:24px; background:#fffffff0; border:1px solid var(--line); box-shadow:0 2px 10px #00000018; color:inherit; cursor:pointer; transition:transform .12s; }\n  #back[hidden] { display:none; }\n  #back:active { transform:scale(.94); filter:brightness(.92); transition-duration:.06s; }\n  #back .bk-ic { width:24px; height:24px; color:var(--dim); display:grid; place-items:center; }\n  #back .ct-logo { display:block; flex:none; overflow:visible; color:var(--ink); margin:0 8px 0 4px; }\n  @media (hover:hover) { #back:hover { filter:brightness(.97); } }\n  \n  #back.tinted { background:var(--bk); border-color:var(--bk); color:#fff; }\n  #back.tinted .ct-logo { color:#fff; }\n  #back.tinted #back-ic, #back.tinted .bk-ic { color:#ffffffd9; }\n  #back .bk-ini { display:none; }\n  #back.tinted .bk-ini { display:block; flex:none; margin:0 12px 0 -2px; font-size:23px; font-weight:800; line-height:1; color:#fff; }\n\n  .tfav { position:relative; font-weight:700; display:grid; place-items:center; flex:none; }\n  .tfav .ring { position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; }\n  .tfav .ring circle { fill:none; stroke:currentColor; stroke-width:8; stroke-linecap:round; stroke-dasharray:221.17 55.29; transform-origin:50px 50px; transform:rotate(36deg); }\n  .tfav .face { position:absolute; left:15%; top:15%; width:70%; height:70%; border-radius:50%; background:#fff; overflow:hidden; display:grid; place-items:center; font-size:.76em; line-height:1; color:inherit; }\n  .tfav img { width:100%; height:100%; object-fit:cover; }\n  .bk-slot { width:100px; height:48px; flex:none; }\n  .layer-x { width:48px; height:48px; border-radius:50%; background:#fffffff0; border:1px solid var(--line); box-shadow:0 2px 10px #00000018; display:grid; place-items:center; color:var(--dim); flex:none; cursor:pointer; }\n  .layer-x svg { width:24px; height:24px; }\n";
+/** 叠上来的一层(逐笔看、再写一遍)右上角的 ×,照老师页舞台的关 */
+export declare const LAYER_X = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\"></path></svg>";

package/dist/ui/kid/tutor-face.js

@@ -0,0 +1,84 @@
+/**
+ * 老师的脸:学科色 + C 形开口环 + 白底圆里的图或字。学科色服务端定好随老师下发(t.color,src/ui/shared/tutor-color.ts)。
+ * 听写页、口语课用这里的「‹ logo」胶囊回首页(放 logo、不放老师头像),
+ * 样子照 kid-page.ts 的 #back,两处改要一起改(logo 是 brand.ts 的 BACK_LOGO,两处同一份)。
+ * 脚本是 ES5、没有反斜杠与反引号(插进各页的模板字符串)。
+ */
+import { BACK_LOGO } from "../shared/brand.js";
+import { tutorColors } from "../shared/tutor-color.js";
+/**
+ * 回首页胶囊带上老师:整颗填这位老师的颜色(同首页牌上那块首字小牌),logo 后面接名字的首字,箭头、logo、首字白色;
+ * 还不知道是哪位老师时浅底只放 logo。老师页(kid-page.ts)、听写中英文与口语课(下面的 backCapsule)用这一份;小课堂舞台在 React 里照它画(src/ui/stage/lecture.tsx)。
+ * 首字的取法同首页牌上的 .fc:名字(display)的第一个字。tests/brand.test.ts 盯着几处一个样子。
+ */
+export const BACK_TINT_JS = `
+  var tutorInitial = function (t) { return t ? (Array.from(t.display || '')[0] || '') : ''; };
+  var backTint = function (el, t) {
+    if (!el) return;
+    var c = (t && t.color) || '';
+    var ini = el.querySelector('.bk-ini');
+    if (!ini) { ini = document.createElement('span'); ini.className = 'bk-ini'; ini.setAttribute('aria-hidden', 'true'); el.appendChild(ini); }
+    var ch = c ? (t.initial || tutorInitial(t)) : '';
+    ini.textContent = ch;
+    el.classList.toggle('tinted', Boolean(c && ch));
+    if (c && ch) el.style.setProperty('--bk', c); else el.style.removeProperty('--bk');
+    el.setAttribute('aria-label', c && ch && t.display ? '回首页(' + t.display + ')' : '回首页');
+  };
+`;
+/** 着色的胶囊(#back 上加 .tinted、--bk 是老师的颜色);两处的箭头类名不同(老师页 #back-ic、听写与口语课 .bk-ic) */
+export const BACK_TINT_CSS = `
+  #back.tinted { background:var(--bk); border-color:var(--bk); color:#fff; }
+  #back.tinted .ct-logo { color:#fff; }
+  #back.tinted #back-ic, #back.tinted .bk-ic { color:#ffffffd9; }
+  #back .bk-ini { display:none; }
+  #back.tinted .bk-ini { display:block; flex:none; margin:0 12px 0 -2px; font-size:23px; font-weight:800; line-height:1; color:#fff; }
+`;
+/** 服务端出页面时就知道是哪位老师(听写的念的老师、口语课链接带的 ?tutor=):把颜色、首字、名字插进页面,胶囊打开就是对的颜色;不知道 → null(浅底只放 logo) */
+export function backTutorOf(tutors, name) {
+    if (!name || !tutors[name])
+        return null;
+    const color = tutorColors(tutors)[name];
+    const display = tutors[name].display ?? name;
+    const initial = Array.from(display)[0] ?? '';
+    return color && initial ? { color, initial, display } : null;
+}
+/** 插进页面脚本的那一段 JSON(< 换掉,免得关掉 script) */
+export const backTutorJson = (b) => JSON.stringify(b).replace(/</g, '\\u003c');
+/** 听写页、口语课用:tutorAvatar(t) → 一个 .tfav(大小由所在处的样式定);backCapsule(onClick) → { el, set(t) }(「‹ logo 首字」,set(t) 填这位老师的颜色,t 为空浅底只放 logo);t = /api/kid/home 里 tutors 的一项(name、display、avatar、color) */
+export const TUTOR_FACE_JS = `
+  var tutorAvatar = function (t) {
+    var av = document.createElement('span'); av.className = 'tfav'; av.style.color = t.color;
+    av.innerHTML = '<svg class="ring" viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="50" r="44"></circle></svg>';
+    var face = document.createElement('span'); face.className = 'face';
+    if (t.avatar && /[.](png|jpe?g|webp|svg)$/i.test(t.avatar)) { var img = document.createElement('img'); img.src = '/api/kid/avatar/' + encodeURIComponent(t.name); img.alt = ''; face.append(img); }
+    else face.textContent = t.avatar || (t.subject || t.display || '?').slice(0, 1);
+    av.append(face);
+    return av;
+  };
+  ${BACK_TINT_JS}
+  var backCapsule = function (onClick) {
+    var el = document.createElement('button'); el.type = 'button'; el.id = 'back'; el.setAttribute('aria-label', '回首页');
+    el.innerHTML = '<i class="bk-ic"><svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 5l-7 7 7 7"></path></svg></i>${BACK_LOGO}';
+    el.addEventListener('click', onClick);
+    return { el: el, set: function (t) { backTint(el, t); } };
+  };
+`;
+export const TUTOR_FACE_CSS = `
+  #back { position:fixed; top:calc(env(safe-area-inset-top) + 10px); left:calc(env(safe-area-inset-left) + 12px); z-index:20; display:flex; align-items:center; gap:2px; height:48px; min-width:48px; padding:0 4px 0 8px; border-radius:24px; background:#fffffff0; border:1px solid var(--line); box-shadow:0 2px 10px #00000018; color:inherit; cursor:pointer; transition:transform .12s; }
+  #back[hidden] { display:none; }
+  #back:active { transform:scale(.94); filter:brightness(.92); transition-duration:.06s; }
+  #back .bk-ic { width:24px; height:24px; color:var(--dim); display:grid; place-items:center; }
+  #back .ct-logo { display:block; flex:none; overflow:visible; color:var(--ink); margin:0 8px 0 4px; }
+  @media (hover:hover) { #back:hover { filter:brightness(.97); } }
+  ${BACK_TINT_CSS}
+  .tfav { position:relative; font-weight:700; display:grid; place-items:center; flex:none; }
+  .tfav .ring { position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
+  .tfav .ring circle { fill:none; stroke:currentColor; stroke-width:8; stroke-linecap:round; stroke-dasharray:221.17 55.29; transform-origin:50px 50px; transform:rotate(36deg); }
+  .tfav .face { position:absolute; left:15%; top:15%; width:70%; height:70%; border-radius:50%; background:#fff; overflow:hidden; display:grid; place-items:center; font-size:.76em; line-height:1; color:inherit; }
+  .tfav img { width:100%; height:100%; object-fit:cover; }
+  .bk-slot { width:100px; height:48px; flex:none; }
+  .layer-x { width:48px; height:48px; border-radius:50%; background:#fffffff0; border:1px solid var(--line); box-shadow:0 2px 10px #00000018; display:grid; place-items:center; color:var(--dim); flex:none; cursor:pointer; }
+  .layer-x svg { width:24px; height:24px; }
+`;
+/** 叠上来的一层(逐笔看、再写一遍)右上角的 ×,照老师页舞台的关 */
+export const LAYER_X = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"></path></svg>';

package/dist/ui/kid/voice-ui.d.ts

@@ -0,0 +1,70 @@
+/**
+ * 实时老师页那颗「头像 + 按住说话」按钮的画法,动画只写这一处。
+ * 页面只做两件事:把状态凑好交给 src/ui/kid/voice-view.ts 的 voiceView,拿到样子交给这里的按钮(set);把音量喂进来(老师的给一个取音量的口子,孩子的随时 level)。
+ * 孩子端老师页(平板横屏左栏、手机字幕行那颗头像的动作)和工作台 /dev/voice 样张都引用这里。
+ *
+ * 两种声音:
+ * - 老师的:头像旁紧挨着三道小弧「)))」,老师的颜色,不走、不放大,只有深浅跟老师的音量(平滑、三道依次错开一点);没声音淡到最低。
+ *   10-21 Jack:有字幕在变、有声音,老师这边动画太强会把孩子的注意力从内容上拉走——所以只留这么一点,头像也不再一圈圈放大。
+ * - 孩子的:竖条从按钮另一头往头像里走,高低跟麦克风音量,走到头像收进去、头像外圈亮一下;按着没声音是小点慢慢走。
+ * 插话(一直听时孩子开口而老师还在说)两样都在,老师的淡到三成。镜像(按住说话在右边,kid.hand: left)时方向反过来。系统「减弱动态效果」时竖条不走,只按音量变高低。
+ *
+ * 要改动画:先改下面的 VOICE_TUNE(快慢、深浅、大小、颜色都在这里);样子的种类在 voice-view.ts;打开 /dev/voice 一页看全部。
+ * VOICE_JS 插进页面的模板字符串:不写反斜杠、反引号、美元加花括号(AGENTS.md「坑」)。
+ */
+/** 调参表:以后要再弱、再强、再快、再慢,只改这里 */
+export declare const VOICE_TUNE: {
+    /** 三道弧的半径(像素,从头像边量起;最外一道离头像边不超过 ~36) */
+    arcR: number[];
+    /** 线宽(像素) */
+    arcW: number;
+    /** 弧张开多少度 */
+    arcSpan: number;
+    /** 不透明度:最低(有声音也最轻)/ 最高(最响) */
+    arcMin: number;
+    arcMax: number;
+    /** 没声音时:'min' 淡到最低还留着 / 'hide' 消失 */
+    arcQuiet: "min" | "hide";
+    /** 平滑后的音量低于这个算没声音 */
+    arcFloor: number;
+    /** 音量平滑(毫秒) */
+    arcSmooth: number;
+    /** 三道依次错开(毫秒):里面那道先亮 */
+    arcLag: number;
+    /** 老师的音量(放出去那条链上的 RMS)乘这个到 0–1 */
+    arcGain: number;
+    /** 嘴停、孩子按下时三道弧收掉的时长;往上滑取消时路上的竖条原地淡掉也是这么久(毫秒) */
+    arcFade: number;
+    /** 插话时老师的弧淡到几成 */
+    duck: number;
+    /** 老师在说时头像外圈:'static' 一道淡淡的静止外圈 / 'breath' 很慢地明暗 / 'none' 什么都不加 */
+    talkHalo: "static" | "breath" | "none";
+    talkHaloOpacity: number;
+    /** 'breath' 时一明一暗多久(毫秒) */
+    talkHaloBreathMs: number;
+    /** 多久出一根竖条(毫秒;一根 6 像素宽,100 毫秒一根走 1.5 秒,一条上约 15 根) */
+    barEvery: number;
+    /** 一根竖条从另一头走到头像要多久(毫秒) */
+    barTravel: number;
+    /** 竖条宽、最矮、最高(像素) */
+    barW: number;
+    barMin: number;
+    barMax: number;
+    /** 孩子的音量(0–1)低于这个算没声音,画小点 */
+    kidQuiet: number;
+    /** 音量多久没更新就当没声音(毫秒) */
+    kidStale: number;
+    /** 小点:多久一个、走多久、多大(像素) */
+    dotEvery: number;
+    dotTravel: number;
+    dotH: number;
+    /** 松手时路上剩下的竖条走进头像要多久(毫秒) */
+    rush: number;
+    /** 竖条走到头像时头像外圈亮一下多久(毫秒) */
+    recvMs: number;
+    /** 竖条的颜色:蓝底上白的,别的底上蓝的 */
+    kidOnBlue: string;
+    kidColor: string;
+};
+export declare const VOICE_CSS = "\n  /* ---- \u6309\u4F4F\u8BF4\u8BDD\u90A3\u9897\u6309\u94AE(\u5934\u50CF + \u58F0\u97F3,src/ui/kid/voice-ui.ts):\u5E95\u8272\u5728 data-tone,\u54EA\u79CD\u6837\u5B50\u5728 data-voice,\u5934\u50CF\u7684\u52A8\u4F5C\u662F .vb-face \u4E0A\u7684 .vb-<face> ---- */\n  .vb { position:relative; display:flex; align-items:center; gap:10px; width:312px; height:120px; box-sizing:border-box; padding:0 18px 0 12px; border-radius:32px; border:1.5px solid #e2dfd6; background:#fff; box-shadow:0 4px 16px #00000012; color:#2b2b2b; font:inherit; text-align:left; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; transition:background-color .15s, border-color .15s, box-shadow .15s, color .15s, opacity .15s, transform .2s ease-out, filter .2s ease-out; }\n  .vb.vb-right { flex-direction:row-reverse; padding:0 12px 0 18px; text-align:right; }\n  .vb[data-tone=blue] { background:#3d7fd9; border-color:#3d7fd9; color:#fff; box-shadow:0 8px 22px #3d7fd961; }\n  .vb[data-tone=grey] { background:#f7f6f2; border-color:#ebe8df; color:#8a8781; box-shadow:none; }\n  .vb[data-tone=cancel] { background:#e9ecf1; border-color:#d5dbe4; color:#4d5563; box-shadow:none; }\n  .vb[data-tone=light] { background:#eaf2fd; border-color:#bcd6f5; color:#2a5ea8; box-shadow:none; }\n  /* \u6309\u4E0B\u53CD\u9988,\u540C\u5B69\u5B50\u7AEF\u5927\u5757\u9762\u90A3\u4E00\u6863(\u7F29\u5230 98.5% + \u6697\u4E00\u70B9):\u6309\u4E0A\u53BB\u9A6C\u4E0A\u6709\u624B\u611F;\u6EE1 150 \u6BEB\u79D2\u624D\u7B97\u6309\u4F4F\u8BF4\u8BDD\u3001\u53D8\u84DD(\u8F7B\u78B0\u4E0D\u6253\u65AD\u8001\u5E08) */\n  .vb:active { transform:scale(.985); filter:brightness(.97); transition-duration:.06s; }\n  @media (hover:hover) { .vb:hover { filter:brightness(.98); } }\n  .vb-av { position:relative; flex:none; width:96px; height:96px; display:grid; place-items:center; border-radius:50%; --vb-h1:6px; --vb-h2:-2px; transition:box-shadow .2s; }\n  .vb-av > .av { width:72px; height:72px; font-size:34px; }\n  .vb-side { position:relative; z-index:1; flex:1; align-self:stretch; min-width:0; }\n  .vb-big { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:8px; font-size:20px; font-weight:600; line-height:1.3; }\n  .vb-big[hidden], .vb-small[hidden] { display:none; }\n  .vb-right .vb-big { justify-content:flex-end; }\n  .vb-ic { display:inline-flex; flex:none; }\n  .vb-ic:empty { display:none; }\n  .vb-ic svg { display:block; }\n  .vb-dots { display:none; gap:3px; align-items:center; }\n  .vb-wait .vb-dots { display:inline-flex; }\n  .vb-dots i { width:5px; height:5px; border-radius:50%; background:currentColor; animation:vb-dot 1.2s ease-in-out infinite; }\n  .vb-dots i:nth-child(2) { animation-delay:.2s; }\n  .vb-dots i:nth-child(3) { animation-delay:.4s; }\n  .vb-small { position:absolute; left:0; right:0; bottom:12px; font-size:14px; line-height:1.3; color:#8a8781; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }\n  .vb[data-tone=blue] .vb-small { color:#ffffffe6; }\n  .vb[data-tone=light] .vb-small { color:#4d74a8; }\n  .vb[data-tone=cancel] .vb-small { color:#4d5563; }\n  .vb-track { position:absolute; z-index:0; left:96px; right:18px; top:50%; height:56px; margin-top:-28px; pointer-events:none; }\n  .vb-right .vb-track { left:18px; right:96px; }\n  /* \u753B\u677F\u94FA\u6EE1\u65F6\u5DE5\u5177\u5217\u6700\u5E95\u4E0B\u90A3\u9897:\u53EA\u6709\u5934\u50CF;\u5E95\u8272\u3001\u5934\u50CF\u7684\u52A8\u4F5C\u540C\u5927\u7684\u90A3\u9897(\u4E24\u9897\u4E00\u8D77\u53D8),\u58F0\u97F3\u7684\u5F27\u548C\u7AD6\u6761\u4E0D\u753B */\n  .vb.vb-mini { width:64px; height:64px; padding:0; border-radius:50%; justify-content:center; gap:0; }\n  .vb.vb-mini .vb-side, .vb.vb-mini .vb-track { display:none; }\n  .vb.vb-mini .vb-av { width:56px; height:56px; --vb-h1:-3px; --vb-h2:-9px; }\n  .vb.vb-mini .vb-av > .av { width:46px; height:46px; font-size:22px; }\n  .vb.vb-shake { animation:vb-shake .5s ease-in-out; }\n  .vb.vb-breathe { animation:vb-glow 2.4s ease-in-out infinite; }\n  /* \u5934\u50CF\u7684\u52A8\u4F5C(\u6309\u94AE\u91CC\u90A3\u9897\u3001\u624B\u673A\u5B57\u5E55\u884C\u90A3\u9897\u90FD\u7528\u8FD9\u4E00\u5957) */\n  .vb-halo::before, .vb-halo::after { content:\"\"; position:absolute; border-radius:50%; border:3px solid var(--tc, currentColor); opacity:0; pointer-events:none; transition:opacity .3s, border-color .2s; }\n  .vb-halo::before { inset:var(--vb-h1, -12%); }\n  .vb-halo::after { inset:var(--vb-h2, -26%); }\n  .vb-halo-static .vb-talk.vb-halo::before { opacity:var(--vb-halo-op, .16); }\n  .vb-halo-breath .vb-talk.vb-halo::before { opacity:var(--vb-halo-op, .16); animation:vb-halo var(--vb-halo-ms, 2.6s) ease-in-out infinite; }\n  .vb-listen.vb-halo::before, .vb-listen.vb-halo::after { border-color:#3d7fd9; }\n  .vb-listen.vb-halo::before { opacity:.36; }\n  .vb-listen.vb-halo::after { opacity:.16; }\n  .vb[data-tone=blue] .vb-listen.vb-halo::before, .vb[data-tone=blue] .vb-listen.vb-halo::after { border-color:#fff; }\n  .vb[data-tone=blue] .vb-listen.vb-halo::before { opacity:.6; }\n  .vb[data-tone=blue] .vb-listen.vb-halo::after { opacity:.3; }\n  .vb-av.vb-recv { box-shadow:0 0 0 7px #3d7fd940; }\n  .vb[data-tone=blue] .vb-av.vb-recv { box-shadow:0 0 0 7px #ffffff66; }\n  .vb-think .ring circle { animation:vb-spin 2.4s linear infinite, vb-breathe 1.2s ease-in-out infinite; }\n  .vb-listen:not(.vb-av) .ring circle { animation:vb-turn .35s ease-out both, vb-listen 1.6s ease-in-out .35s infinite; }\n  .vb-nod .ring circle { animation:vb-nod .9s ease-in-out; }\n  .vb-ring { animation:vb-phone 1.2s ease-in-out infinite; }\n  .vb-dim { opacity:.6; }\n  @keyframes vb-spin { from { transform:rotate(36deg); } to { transform:rotate(396deg); } }\n  @keyframes vb-breathe { 0%,100% { stroke-dasharray:221.17 55.29; } 50% { stroke-dasharray:204.58 71.88; } }\n  @keyframes vb-turn { to { transform:rotate(126deg); } }\n  @keyframes vb-listen { 0%,100% { stroke-dasharray:221.17 55.29; transform:rotate(126deg); } 50% { stroke-dasharray:204.58 71.88; transform:rotate(136.8deg); } }\n  @keyframes vb-nod { 0%,100% { transform:rotate(36deg); } 30% { transform:rotate(60deg); } 60% { transform:rotate(26deg); } 80% { transform:rotate(41deg); } }\n  @keyframes vb-phone { 0%,70%,100% { transform:rotate(0); } 10% { transform:rotate(-10deg); } 25% { transform:rotate(9deg); } 40% { transform:rotate(-6deg); } 55% { transform:rotate(3deg); } }\n  @keyframes vb-halo { 0%,100% { opacity:var(--vb-halo-op, .16); } 50% { opacity:calc(var(--vb-halo-op, .16) * .45); } }\n  @keyframes vb-shake { 0%,100% { transform:translateX(0); } 18% { transform:translateX(-6px); } 36% { transform:translateX(6px); } 54% { transform:translateX(-4px); } 72% { transform:translateX(4px); } }\n  @keyframes vb-glow { 0%,100% { box-shadow:0 0 0 3px #3d7fd940, 0 0 0 10px #3d7fd90f; } 50% { box-shadow:0 0 0 6px #3d7fd973, 0 0 0 18px #3d7fd914; } }\n  @keyframes vb-dot { 0%,100% { opacity:.25; } 50% { opacity:1; } }\n  @media (prefers-reduced-motion:reduce) { .vb, .vb *, .vb-face, .vb-face *, .vb-face::before, .vb-face::after { animation:none !important; transition:none !important; } }\n";
+export declare const VOICE_JS: string;

package/dist/ui/kid/voice-ui.js

@@ -0,0 +1,316 @@
+/**
+ * 实时老师页那颗「头像 + 按住说话」按钮的画法,动画只写这一处。
+ * 页面只做两件事:把状态凑好交给 src/ui/kid/voice-view.ts 的 voiceView,拿到样子交给这里的按钮(set);把音量喂进来(老师的给一个取音量的口子,孩子的随时 level)。
+ * 孩子端老师页(平板横屏左栏、手机字幕行那颗头像的动作)和工作台 /dev/voice 样张都引用这里。
+ *
+ * 两种声音:
+ * - 老师的:头像旁紧挨着三道小弧「)))」,老师的颜色,不走、不放大,只有深浅跟老师的音量(平滑、三道依次错开一点);没声音淡到最低。
+ *   10-21 Jack:有字幕在变、有声音,老师这边动画太强会把孩子的注意力从内容上拉走——所以只留这么一点,头像也不再一圈圈放大。
+ * - 孩子的:竖条从按钮另一头往头像里走,高低跟麦克风音量,走到头像收进去、头像外圈亮一下;按着没声音是小点慢慢走。
+ * 插话(一直听时孩子开口而老师还在说)两样都在,老师的淡到三成。镜像(按住说话在右边,kid.hand: left)时方向反过来。系统「减弱动态效果」时竖条不走,只按音量变高低。
+ *
+ * 要改动画:先改下面的 VOICE_TUNE(快慢、深浅、大小、颜色都在这里);样子的种类在 voice-view.ts;打开 /dev/voice 一页看全部。
+ * VOICE_JS 插进页面的模板字符串:不写反斜杠、反引号、美元加花括号(AGENTS.md「坑」)。
+ */
+/** 调参表:以后要再弱、再强、再快、再慢,只改这里 */
+export const VOICE_TUNE = {
+    // —— 老师的声音:头像旁三道小弧 ——
+    /** 三道弧的半径(像素,从头像边量起;最外一道离头像边不超过 ~36) */
+    arcR: [9, 17, 25],
+    /** 线宽(像素) */
+    arcW: 2.75,
+    /** 弧张开多少度 */
+    arcSpan: 96,
+    /** 不透明度:最低(有声音也最轻)/ 最高(最响) */
+    arcMin: 0.12,
+    arcMax: 0.45,
+    /** 没声音时:'min' 淡到最低还留着 / 'hide' 消失 */
+    arcQuiet: 'min',
+    /** 平滑后的音量低于这个算没声音 */
+    arcFloor: 0.04,
+    /** 音量平滑(毫秒) */
+    arcSmooth: 200,
+    /** 三道依次错开(毫秒):里面那道先亮 */
+    arcLag: 80,
+    /** 老师的音量(放出去那条链上的 RMS)乘这个到 0–1 */
+    arcGain: 5,
+    /** 嘴停、孩子按下时三道弧收掉的时长;往上滑取消时路上的竖条原地淡掉也是这么久(毫秒) */
+    arcFade: 150,
+    /** 插话时老师的弧淡到几成 */
+    duck: 0.3,
+    /** 老师在说时头像外圈:'static' 一道淡淡的静止外圈 / 'breath' 很慢地明暗 / 'none' 什么都不加 */
+    talkHalo: 'static',
+    talkHaloOpacity: 0.16,
+    /** 'breath' 时一明一暗多久(毫秒) */
+    talkHaloBreathMs: 2600,
+    // —— 孩子的声音:竖条往头像里走 ——
+    /** 多久出一根竖条(毫秒;一根 6 像素宽,100 毫秒一根走 1.5 秒,一条上约 15 根) */
+    barEvery: 100,
+    /** 一根竖条从另一头走到头像要多久(毫秒) */
+    barTravel: 1500,
+    /** 竖条宽、最矮、最高(像素) */
+    barW: 6,
+    barMin: 4,
+    barMax: 44,
+    /** 孩子的音量(0–1)低于这个算没声音,画小点 */
+    kidQuiet: 0.08,
+    /** 音量多久没更新就当没声音(毫秒) */
+    kidStale: 300,
+    /** 小点:多久一个、走多久、多大(像素) */
+    dotEvery: 400,
+    dotTravel: 2400,
+    dotH: 5,
+    /** 松手时路上剩下的竖条走进头像要多久(毫秒) */
+    rush: 400,
+    /** 竖条走到头像时头像外圈亮一下多久(毫秒) */
+    recvMs: 260,
+    /** 竖条的颜色:蓝底上白的,别的底上蓝的 */
+    kidOnBlue: '#ffffff',
+    kidColor: '#3d7fd9',
+};
+const ICONS = {
+    mic: '<svg width="24" height="24" viewBox="0 0 22 22" aria-hidden="true"><rect x="8" y="3" width="6" height="11" rx="3" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M5 10.5 a6 6 0 0 0 12 0 M11 16.5 v3" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>',
+    micOff: '<svg width="22" height="22" viewBox="0 0 22 22" aria-hidden="true"><rect x="8" y="3" width="6" height="11" rx="3" fill="none" stroke="currentColor" stroke-width="1.7"/><path d="M5 10.5 a6 6 0 0 0 12 0 M11 16.5 v3 M4 3 L18 19" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>',
+    photo: '<svg width="22" height="22" viewBox="0 0 26 26" aria-hidden="true"><rect x="4" y="5" width="18" height="16" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M4 17 l5-5 4 4 3-3 6 6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>',
+    up: '<svg width="22" height="22" viewBox="0 0 22 22" aria-hidden="true"><path d="M11 18 V5 M5 10.5 L11 4.5 L17 10.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    phone: '<svg width="22" height="22" viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 3.5 l3 3 -2 2.5 a12 12 0 0 0 7.5 7.5 l2.5 -2 3 3 -2.5 3 a15 15 0 0 1 -14.5 -14.5 z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>',
+};
+export const VOICE_CSS = `
+  /* ---- 按住说话那颗按钮(头像 + 声音,src/ui/kid/voice-ui.ts):底色在 data-tone,哪种样子在 data-voice,头像的动作是 .vb-face 上的 .vb-<face> ---- */
+  .vb { position:relative; display:flex; align-items:center; gap:10px; width:312px; height:120px; box-sizing:border-box; padding:0 18px 0 12px; border-radius:32px; border:1.5px solid #e2dfd6; background:#fff; box-shadow:0 4px 16px #00000012; color:#2b2b2b; font:inherit; text-align:left; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; transition:background-color .15s, border-color .15s, box-shadow .15s, color .15s, opacity .15s, transform .2s ease-out, filter .2s ease-out; }
+  .vb.vb-right { flex-direction:row-reverse; padding:0 12px 0 18px; text-align:right; }
+  .vb[data-tone=blue] { background:#3d7fd9; border-color:#3d7fd9; color:#fff; box-shadow:0 8px 22px #3d7fd961; }
+  .vb[data-tone=grey] { background:#f7f6f2; border-color:#ebe8df; color:#8a8781; box-shadow:none; }
+  .vb[data-tone=cancel] { background:#e9ecf1; border-color:#d5dbe4; color:#4d5563; box-shadow:none; }
+  .vb[data-tone=light] { background:#eaf2fd; border-color:#bcd6f5; color:#2a5ea8; box-shadow:none; }
+  /* 按下反馈,同孩子端大块面那一档(缩到 98.5% + 暗一点):按上去马上有手感;满 150 毫秒才算按住说话、变蓝(轻碰不打断老师) */
+  .vb:active { transform:scale(.985); filter:brightness(.97); transition-duration:.06s; }
+  @media (hover:hover) { .vb:hover { filter:brightness(.98); } }
+  .vb-av { position:relative; flex:none; width:96px; height:96px; display:grid; place-items:center; border-radius:50%; --vb-h1:6px; --vb-h2:-2px; transition:box-shadow .2s; }
+  .vb-av > .av { width:72px; height:72px; font-size:34px; }
+  .vb-side { position:relative; z-index:1; flex:1; align-self:stretch; min-width:0; }
+  .vb-big { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:8px; font-size:20px; font-weight:600; line-height:1.3; }
+  .vb-big[hidden], .vb-small[hidden] { display:none; }
+  .vb-right .vb-big { justify-content:flex-end; }
+  .vb-ic { display:inline-flex; flex:none; }
+  .vb-ic:empty { display:none; }
+  .vb-ic svg { display:block; }
+  .vb-dots { display:none; gap:3px; align-items:center; }
+  .vb-wait .vb-dots { display:inline-flex; }
+  .vb-dots i { width:5px; height:5px; border-radius:50%; background:currentColor; animation:vb-dot 1.2s ease-in-out infinite; }
+  .vb-dots i:nth-child(2) { animation-delay:.2s; }
+  .vb-dots i:nth-child(3) { animation-delay:.4s; }
+  .vb-small { position:absolute; left:0; right:0; bottom:12px; font-size:14px; line-height:1.3; color:#8a8781; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .vb[data-tone=blue] .vb-small { color:#ffffffe6; }
+  .vb[data-tone=light] .vb-small { color:#4d74a8; }
+  .vb[data-tone=cancel] .vb-small { color:#4d5563; }
+  .vb-track { position:absolute; z-index:0; left:96px; right:18px; top:50%; height:56px; margin-top:-28px; pointer-events:none; }
+  .vb-right .vb-track { left:18px; right:96px; }
+  /* 画板铺满时工具列最底下那颗:只有头像;底色、头像的动作同大的那颗(两颗一起变),声音的弧和竖条不画 */
+  .vb.vb-mini { width:64px; height:64px; padding:0; border-radius:50%; justify-content:center; gap:0; }
+  .vb.vb-mini .vb-side, .vb.vb-mini .vb-track { display:none; }
+  .vb.vb-mini .vb-av { width:56px; height:56px; --vb-h1:-3px; --vb-h2:-9px; }
+  .vb.vb-mini .vb-av > .av { width:46px; height:46px; font-size:22px; }
+  .vb.vb-shake { animation:vb-shake .5s ease-in-out; }
+  .vb.vb-breathe { animation:vb-glow 2.4s ease-in-out infinite; }
+  /* 头像的动作(按钮里那颗、手机字幕行那颗都用这一套) */
+  .vb-halo::before, .vb-halo::after { content:""; position:absolute; border-radius:50%; border:3px solid var(--tc, currentColor); opacity:0; pointer-events:none; transition:opacity .3s, border-color .2s; }
+  .vb-halo::before { inset:var(--vb-h1, -12%); }
+  .vb-halo::after { inset:var(--vb-h2, -26%); }
+  .vb-halo-static .vb-talk.vb-halo::before { opacity:var(--vb-halo-op, .16); }
+  .vb-halo-breath .vb-talk.vb-halo::before { opacity:var(--vb-halo-op, .16); animation:vb-halo var(--vb-halo-ms, 2.6s) ease-in-out infinite; }
+  .vb-listen.vb-halo::before, .vb-listen.vb-halo::after { border-color:#3d7fd9; }
+  .vb-listen.vb-halo::before { opacity:.36; }
+  .vb-listen.vb-halo::after { opacity:.16; }
+  .vb[data-tone=blue] .vb-listen.vb-halo::before, .vb[data-tone=blue] .vb-listen.vb-halo::after { border-color:#fff; }
+  .vb[data-tone=blue] .vb-listen.vb-halo::before { opacity:.6; }
+  .vb[data-tone=blue] .vb-listen.vb-halo::after { opacity:.3; }
+  .vb-av.vb-recv { box-shadow:0 0 0 7px #3d7fd940; }
+  .vb[data-tone=blue] .vb-av.vb-recv { box-shadow:0 0 0 7px #ffffff66; }
+  .vb-think .ring circle { animation:vb-spin 2.4s linear infinite, vb-breathe 1.2s ease-in-out infinite; }
+  .vb-listen:not(.vb-av) .ring circle { animation:vb-turn .35s ease-out both, vb-listen 1.6s ease-in-out .35s infinite; }
+  .vb-nod .ring circle { animation:vb-nod .9s ease-in-out; }
+  .vb-ring { animation:vb-phone 1.2s ease-in-out infinite; }
+  .vb-dim { opacity:.6; }
+  @keyframes vb-spin { from { transform:rotate(36deg); } to { transform:rotate(396deg); } }
+  @keyframes vb-breathe { 0%,100% { stroke-dasharray:221.17 55.29; } 50% { stroke-dasharray:204.58 71.88; } }
+  @keyframes vb-turn { to { transform:rotate(126deg); } }
+  @keyframes vb-listen { 0%,100% { stroke-dasharray:221.17 55.29; transform:rotate(126deg); } 50% { stroke-dasharray:204.58 71.88; transform:rotate(136.8deg); } }
+  @keyframes vb-nod { 0%,100% { transform:rotate(36deg); } 30% { transform:rotate(60deg); } 60% { transform:rotate(26deg); } 80% { transform:rotate(41deg); } }
+  @keyframes vb-phone { 0%,70%,100% { transform:rotate(0); } 10% { transform:rotate(-10deg); } 25% { transform:rotate(9deg); } 40% { transform:rotate(-6deg); } 55% { transform:rotate(3deg); } }
+  @keyframes vb-halo { 0%,100% { opacity:var(--vb-halo-op, .16); } 50% { opacity:calc(var(--vb-halo-op, .16) * .45); } }
+  @keyframes vb-shake { 0%,100% { transform:translateX(0); } 18% { transform:translateX(-6px); } 36% { transform:translateX(6px); } 54% { transform:translateX(-4px); } 72% { transform:translateX(4px); } }
+  @keyframes vb-glow { 0%,100% { box-shadow:0 0 0 3px #3d7fd940, 0 0 0 10px #3d7fd90f; } 50% { box-shadow:0 0 0 6px #3d7fd973, 0 0 0 18px #3d7fd914; } }
+  @keyframes vb-dot { 0%,100% { opacity:.25; } 50% { opacity:1; } }
+  @media (prefers-reduced-motion:reduce) { .vb, .vb *, .vb-face, .vb-face *, .vb-face::before, .vb-face::after { animation:none !important; transition:none !important; } }
+`;
+export const VOICE_JS = `
+  /* ---- 按住说话那颗按钮的画法(src/ui/kid/voice-ui.ts;样子是 voice-view.ts 的 voiceView 给的)---- */
+  var VOICE_TUNE = ${JSON.stringify(VOICE_TUNE)};
+  var VOICE_ICONS = ${JSON.stringify(ICONS)};
+  var VOICE_FACES = ['still', 'talk', 'listen', 'think', 'ring', 'dim'];
+  try {
+    var vbRoot = document.documentElement;
+    vbRoot.classList.add('vb-halo-' + VOICE_TUNE.talkHalo);
+    vbRoot.style.setProperty('--vb-halo-op', String(VOICE_TUNE.talkHaloOpacity));
+    vbRoot.style.setProperty('--vb-halo-ms', VOICE_TUNE.talkHaloBreathMs + 'ms');
+  } catch (e) {}
+  /** 头像的动作:el 是装着 .av 的那一格(或 .av 本身);face 是 voiceView 的 face(底部字幕行那颗「开口一张一合」的 mouth 10-28 跟着删了) */
+  function voiceFace(el, face) {
+    if (!el) return;
+    for (var i = 0; i < VOICE_FACES.length; i++) el.classList.remove('vb-' + VOICE_FACES[i]);
+    el.classList.add('vb-face', 'vb-' + (face || 'still'));
+  }
+  /** 一颗按钮:el 是空的 button;opts.side = 'left'(头像在左)/ 'right'(镜像);回一个把手 */
+  function voiceButton(el, opts) {
+    var T = VOICE_TUNE;
+    opts = opts || {};
+    el.classList.add('vb');
+    el.innerHTML = '<span class="vb-av vb-halo"></span><span class="vb-side"><span class="vb-big"><i class="vb-ic"></i><b></b><span class="vb-dots"><i></i><i></i><i></i></span></span><span class="vb-small"></span></span><canvas class="vb-track" aria-hidden="true"></canvas>';
+    var av = el.querySelector('.vb-av'), cv = el.querySelector('.vb-track'), bigEl = el.querySelector('.vb-big'), bEl = el.querySelector('.vb-big b'), icEl = el.querySelector('.vb-ic'), smEl = el.querySelector('.vb-small');
+    var reduce = false;
+    try { reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) {}
+    var S = { view: null, side: 'left', color: opts.color || '#c43c74', src: null, tl: 0, hist: [], arcVis: 0, kid: 0, kidAt: -1e9, bars: [], lastBar: 0, lastDot: 0, raf: 0, last: 0, recvAt: 0, meter: [], drawn: { arcs: [], bars: 0 } };
+    var kick = function () { if (!S.raf) { S.last = 0; S.raf = requestAnimationFrame(frame); } };
+    var travelOf = function () { return Math.max(1, cv.clientWidth - 4); };
+    var barX = function (b, now) {
+      if (b.fade) return b.fade[0];
+      if (b.rush) return b.rush[0] * (1 - Math.min(1, (now - b.rush[1]) / T.rush));
+      return travelOf() * (1 - Math.min(1, (now - b.t0) / b.dur));
+    };
+    var shake = function () { el.classList.remove('vb-shake'); void el.offsetWidth; el.classList.add('vb-shake'); };
+    var recv = function (now) {
+      if (now - S.recvAt < T.recvMs) return;
+      S.recvAt = now;
+      av.classList.add('vb-recv');
+      setTimeout(function () { av.classList.remove('vb-recv'); }, T.recvMs);
+    };
+    /** 老师的音量在 t 那一刻(平滑后的;三道弧依次往回看一点) */
+    var tlAt = function (t) {
+      var h = S.hist, v = h.length ? h[0][1] : 0;
+      for (var i = 0; i < h.length; i++) { if (h[i][0] <= t) v = h[i][1]; else break; }
+      return v;
+    };
+    var bar = function (g, x, cy, hh) {
+      var w = T.barW, r = w / 2, y = cy - hh / 2;
+      g.beginPath(); g.moveTo(x - r, y + r); g.arc(x, y + r, r, Math.PI, 0); g.lineTo(x + r, y + hh - r); g.arc(x, y + hh - r, r, 0, Math.PI); g.closePath(); g.fill();
+    };
+    var frame = function (now) {
+      S.raf = 0;
+      var v = S.view;
+      if (!v) return;
+      var dt = S.last ? Math.min(100, now - S.last) : 16;
+      S.last = now;
+      var dpr = window.devicePixelRatio || 1, w = cv.clientWidth, hh = cv.clientHeight;
+      if (!w || !hh) { S.last = 0; return; }
+      if (cv.width !== Math.round(w * dpr) || cv.height !== Math.round(hh * dpr)) { cv.width = Math.round(w * dpr); cv.height = Math.round(hh * dpr); }
+      var g = cv.getContext('2d');
+      g.setTransform(dpr, 0, 0, dpr, 0, 0);
+      g.clearRect(0, 0, w, hh);
+      if (S.side === 'right') { g.translate(w, 0); g.scale(-1, 1); }
+      var cy = hh / 2, out = v.flow === 'out' || v.flow === 'both', inn = v.flow === 'in' || v.flow === 'both';
+      // 老师:三道小弧,不走、不放大,深浅跟平滑后的音量
+      var raw = out && S.src ? Math.max(0, Math.min(1, S.src() * T.arcGain)) : 0;
+      S.tl += (raw - S.tl) * (1 - Math.exp(-dt / T.arcSmooth));
+      S.hist.push([now, S.tl]);
+      while (S.hist.length > 2 && now - S.hist[1][0] > T.arcLag * T.arcR.length + 120) S.hist.shift();
+      S.arcVis = out ? Math.min(1, S.arcVis + dt / T.arcFade) : Math.max(0, S.arcVis - dt / T.arcFade);
+      S.drawn.arcs = [];
+      if (S.arcVis > 0) {
+        var span = T.arcSpan * Math.PI / 360;
+        g.lineWidth = T.arcW; g.lineCap = 'round'; g.strokeStyle = S.color;
+        for (var i = 0; i < T.arcR.length; i++) {
+          var l = tlAt(now - i * T.arcLag);
+          var a = l < T.arcFloor ? (T.arcQuiet === 'hide' ? 0 : T.arcMin) : T.arcMin + (T.arcMax - T.arcMin) * Math.min(1, l);
+          if (v.flow === 'both') a *= T.duck;
+          a *= S.arcVis;
+          S.drawn.arcs.push({ r: T.arcR[i], a: Math.round(a * 1000) / 1000 });
+          if (a <= 0.003) continue;
+          g.globalAlpha = a;
+          g.beginPath(); g.arc(0, cy, T.arcR[i], -span, span); g.stroke();
+        }
+        g.globalAlpha = 1;
+      }
+      // 孩子:竖条往头像里走(减弱动态效果时不走,按最近的音量排一排)
+      var fresh = now - S.kidAt < T.kidStale ? S.kid : 0;
+      var dot = v.dots || fresh < T.kidQuiet;
+      g.fillStyle = v.tone === 'blue' ? T.kidOnBlue : T.kidColor;
+      if (reduce) {
+        if (inn && now - S.lastBar >= T.barEvery) { S.lastBar = now; S.meter.unshift(dot ? T.dotH : T.barMin + (T.barMax - T.barMin) * Math.min(1, fresh)); if (S.meter.length > 18) S.meter.pop(); }
+        if (!inn) S.meter = [];
+        for (var m = 0; m < S.meter.length; m++) { g.globalAlpha = 1 - m / 22; bar(g, 8 + m * 10, cy, S.meter[m]); }
+        g.globalAlpha = 1;
+        S.drawn.bars = S.meter.length;
+      } else {
+        if (inn && !dot && now - S.lastBar >= T.barEvery) { S.lastBar = now; S.bars.push({ t0: now, dur: T.barTravel, h: T.barMin + (T.barMax - T.barMin) * Math.min(1, fresh), dot: false }); }
+        if (inn && dot && now - S.lastDot >= T.dotEvery) { S.lastDot = now; S.bars.push({ t0: now, dur: T.dotTravel, h: T.dotH, dot: true }); }
+        var trav = travelOf(), keep = [];
+        for (var j = 0; j < S.bars.length; j++) {
+          var b = S.bars[j], x = barX(b, now), p = 1 - x / trav;
+          var fx = b.fade ? (now - b.fade[1]) / T.arcFade : 0;
+          if (fx >= 1) continue;
+          if (x <= 0.5) { if (!b.dot) recv(now); continue; }
+          keep.push(b);
+          var al = (p < 0.12 ? p / 0.12 : p < 0.8 ? 1 : Math.max(0, 1 - (p - 0.8) / 0.2)) * (1 - fx);
+          var sy = p > 0.8 ? 1 - (p - 0.8) / 0.2 * 0.8 : 1;
+          g.globalAlpha = Math.max(0, Math.min(1, al));
+          bar(g, x, cy, Math.max(b.dot ? T.dotH : 3, b.h * sy));
+        }
+        g.globalAlpha = 1;
+        S.bars = keep;
+        S.drawn.bars = keep.length;
+      }
+      if (out || inn || S.bars.length || S.arcVis > 0 || S.meter.length) S.raf = requestAnimationFrame(frame);
+      else S.last = 0;
+    };
+    var api = {
+      el: el,
+      /** 换样子(voiceView 给的) */
+      set: function (v) {
+        var prev = S.view;
+        S.view = v;
+        if (!prev || prev.key !== v.key) {
+          el.dataset.voice = v.key;
+          el.dataset.tone = v.tone;
+          bEl.textContent = v.big;
+          icEl.innerHTML = VOICE_ICONS[v.icon] || '';
+          bigEl.hidden = !v.big && !v.icon;
+          smEl.textContent = v.small;
+          smEl.hidden = !v.small;
+          el.classList.toggle('vb-wait', v.wait);
+          el.classList.toggle('vb-breathe', v.breathe);
+          el.setAttribute('aria-label', v.big || v.small || '按住说话');
+          voiceFace(av, v.face);
+          if (v.shake) shake();
+          var hadIn = prev && (prev.flow === 'in' || prev.flow === 'both'), hasIn = v.flow === 'in' || v.flow === 'both';
+          // 松手:路上剩下的竖条加快走进头像;往上滑要取消:原地淡掉(没交给老师,不进头像)
+          if (hadIn && !hasIn) {
+            var now = performance.now(), drop = v.key === 'cancel';
+            for (var i = 0; i < S.bars.length; i++) { var bb = S.bars[i]; if (bb.rush || bb.fade) continue; if (drop) bb.fade = [barX(bb, now), now]; else bb.rush = [barX(bb, now), now]; }
+          }
+        }
+        kick();
+      },
+      /** 再晃一下(同一种提示又按了一次) */
+      shake: shake,
+      /** 点一下头(老师说完这一轮) */
+      nod: function () { av.classList.remove('vb-nod'); void av.offsetWidth; av.classList.add('vb-nod'); setTimeout(function () { av.classList.remove('vb-nod'); }, 950); },
+      /** 头像那一格放什么(页面的 .av) */
+      avatar: function (node) { av.replaceChildren(node); },
+      /** 镜像:'right' = 头像在右头,声音方向反过来 */
+      side: function (s) { S.side = s === 'right' ? 'right' : 'left'; el.classList.toggle('vb-right', S.side === 'right'); kick(); },
+      /** 老师的颜色(三道小弧、外圈) */
+      color: function (c) { S.color = c; el.style.setProperty('--tc', c); },
+      /** 孩子的音量(0–1),随时喂 */
+      level: function (who, v) { if (who === 'kid') { S.kid = v; S.kidAt = performance.now(); kick(); } },
+      /** 老师的音量从哪取:一个回 0–1 的函数(放嘴的那条链上的 RMS);每一帧问一次 */
+      tutorSource: function (fn) { S.src = fn; },
+      /** 探针、样张看:这一帧画了几道弧(各自的半径与深浅)、几根竖条 */
+      drawn: function () { return { arcs: S.drawn.arcs.slice(), bars: S.drawn.bars, key: S.view ? S.view.key : '' }; },
+    };
+    el.vb = api;
+    api.side(opts.side);
+    api.color(S.color);
+    return api;
+  }
+`;