cotutor 0.2.0 → 0.4.0

package/dist/ui/dictation/reel.js

@@ -0,0 +1,436 @@
+/** 停多久算空白(压成 1.5 秒,「跳过空白」关掉就照真实时间) */
+export const DR_GAP_MS = 4000;
+export const DR_SQUEEZE_MS = 1500;
+/** 「再念」那一遍之后、第二遍之前孩子端停 1.8 秒(page.ts 的 sayWord) */
+const DR_SAY_PAUSE_MS = 1800;
+const drSecs = (ms) => {
+    const s = Math.round(ms / 1000);
+    if (s < 60)
+        return Math.max(1, s) + ' 秒';
+    if (s < 3600)
+        return Math.floor(s / 60) + ' 分' + (s % 60 ? ' ' + (s % 60) + ' 秒' : '');
+    return Math.floor(s / 3600) + ' 小时 ' + Math.floor((s % 3600) / 60) + ' 分';
+};
+const drTenth = (ms) => (ms < 10000 ? Math.round(ms / 100) / 10 : Math.round(ms / 1000)) + ' 秒';
+/** 比对一个字的几句话(同家长页 parent-page.ts 的 charNotes,擦过几次另有「擦掉」那几条):只进录像栏的「经过」,孩子的屏幕上没有 */
+export function drCharNotes(ch, j) {
+    const nums = (xs) => xs.map((x) => x + 1).join('、');
+    const out = [];
+    if (!j.judged)
+        return out;
+    if (j.empty)
+        return ['「' + ch + '」空着'];
+    if (j.missing.length >= Math.ceil(j.std / 2))
+        out.push('「' + ch + '」和书上的字大半对不上(写了 ' + j.wrote + ' 笔,书上 ' + j.std + ' 笔),可能写成了别的字');
+    else if (j.missing.length)
+        out.push('「' + ch + '」少了第 ' + nums(j.missing) + ' 笔' + (j.extra.length ? ',有 ' + j.extra.length + ' 笔对不上' : ''));
+    else if (j.extra.length)
+        out.push('「' + ch + '」多了 ' + j.extra.length + ' 笔对不上的');
+    if (!j.order)
+        out.push('「' + ch + '」笔顺:写的先后是 ' + j.matched.filter((m) => m !== null).map((m) => m + 1).join(' ') + '(书上是 1 到 ' + j.std + ' 依次)');
+    if (j.backwards.length)
+        out.push('「' + ch + '」第 ' + nums(j.backwards) + ' 笔写反了方向');
+    const p = j.place;
+    if (p) {
+        const bits = [];
+        if (p.size < 0.7)
+            bits.push('偏小');
+        else if (p.size > 1.3)
+            bits.push('偏大');
+        const v = p.dy > 140 ? '上' : p.dy < -140 ? '下' : '', h = p.dx < -140 ? '左' : p.dx > 140 ? '右' : '';
+        if (v || h)
+            bits.push('偏' + h + v);
+        if (bits.length)
+            out.push('「' + ch + '」写得' + bits.join('、'));
+    }
+    return out;
+}
+/** 一次听写 → 轨道 */
+export function drBuild(s) {
+    const startAt = Date.parse(s.startedAt);
+    const lang = s.lang === 'en' ? 'en' : 'zh';
+    const chars = s.words.map((w) => (lang === 'en' ? [w.chars] : Array.from(w.chars)));
+    const says = s.words.map((w) => w.say ?? w.chars);
+    const tOf = (e) => (typeof e.t === 'number' ? e.t : Math.max(0, Date.parse(e.at) - startAt));
+    const wallT = (iso) => (iso ? Math.max(0, Date.parse(iso) - startAt) : null);
+    const evs = s.events.map((e) => ({ e, t: tOf(e) })).sort((a, b) => a.t - b.t);
+    // 笔:第一遍写的(留下的 + 擦掉的),再写的
+    const strokesOf = (word, cs) => {
+        const out = [];
+        cs.forEach((c, char) => {
+            for (const pts of c.strokes)
+                if (pts.length)
+                    out.push({ word, char, pts });
+            for (const g of c.gone ?? [])
+                if (g.pts.length)
+                    out.push({ word, char, pts: g.pts, gone: g.t });
+        });
+        return out;
+    };
+    const first = [];
+    s.first.forEach((a, word) => { if (a)
+        first.push(...strokesOf(word, a.chars)); });
+    first.sort((a, b) => a.pts[0][2] - b.pts[0][2]);
+    const checkedAt = wallT(s.checkedAt);
+    const doneAt = wallT(s.doneAt);
+    // 念:两遍之间隔「念的长度 + 1.8 秒」,倒推念多长;推不出的按字数估
+    const says_ = [];
+    const sayEvs = evs.filter((x) => x.e.kind === 'say');
+    sayEvs.forEach((x, k) => {
+        const next = sayEvs[k + 1];
+        const guess = 600 + Array.from(says[x.e.word] ?? '').length * 260;
+        const d = next && next.e.word === x.e.word && next.t - x.t < guess + DR_SAY_PAUSE_MS + 4000 ? Math.max(500, Math.min(8000, next.t - x.t - DR_SAY_PAUSE_MS)) : guess;
+        says_.push({ word: x.e.word, t: x.t, d, n: x.e.n ?? 1 });
+    });
+    // 状态的变化:事件 + 「这一笔写在哪一格」(老数据没有 open 事件,看笔落在哪一格)
+    const steps = [];
+    for (const { e, t } of evs) {
+        const c = e.char ?? 0;
+        if (e.kind === 'show')
+            steps.push({ t, k: 'show', word: e.word });
+        else if (e.kind === 'done')
+            steps.push({ t, k: 'done', word: e.word, char: c });
+        else if (e.kind === 'reveal' || e.kind === 'order' || e.kind === 'trace')
+            steps.push({ t, k: e.kind, word: e.word, char: c });
+        else if (e.kind === 'open')
+            steps.push({ t, k: 'char', word: e.word, char: c });
+        else if (e.kind === 'strokeOrder')
+            steps.push({ t, k: 'strokeOrder', word: e.word, char: c });
+        else if (e.kind === 'rewrite' || e.kind === 'self')
+            steps.push({ t, k: 'rewrite', word: e.word });
+        else if (e.kind === 'close')
+            steps.push({ t, k: 'close' });
+    }
+    for (const st of first)
+        if (checkedAt === null || st.pts[0][2] < checkedAt)
+            steps.push({ t: st.pts[0][2] - 1, k: 'char', word: st.word, char: st.char });
+    if (checkedAt !== null)
+        steps.push({ t: checkedAt, k: 'check' });
+    const rewrites = s.rewrites.map((r) => {
+        const strokes = strokesOf(r.word, r.attempt.chars);
+        const ts = strokes.map((x) => x.pts[0][2]);
+        const to = wallT(r.attempt.at) ?? (ts.length ? Math.max(...ts) : 0);
+        const opened = steps.filter((x) => x.k === 'rewrite' && x.word === r.word && x.t <= (ts.length ? Math.min(...ts) : to)).pop();
+        const from = opened ? opened.t : ts.length ? Math.min(...ts) - 1000 : to - 1000;
+        return { word: r.word, from, to, strokes };
+    });
+    // 交了再写的那一遍:交上去那一刻回到对一对
+    for (const r of rewrites) {
+        if (!steps.some((x) => x.k === 'rewrite' && x.t === r.from))
+            steps.push({ t: r.from, k: 'rewrite', word: r.word });
+        steps.push({ t: r.to, k: 'close' });
+    }
+    steps.sort((a, b) => a.t - b.t);
+    // 切到别处
+    const aways = [];
+    let awayAt = null;
+    for (const { e, t } of evs) {
+        if (e.kind === 'away' && awayAt === null)
+            awayAt = t;
+        else if (e.kind === 'back' && awayAt !== null) {
+            aways.push({ from: awayAt, to: t });
+            awayAt = null;
+        }
+    }
+    // 有动静的时刻:笔的起止、擦掉、事件、念完;两件事之间空了 4 秒以上就是空白
+    const busy = [0];
+    for (const st of first)
+        busy.push(st.pts[0][2], st.pts[st.pts.length - 1][2], ...(st.gone !== undefined ? [st.gone] : []));
+    for (const r of rewrites) {
+        busy.push(r.from, r.to);
+        for (const st of r.strokes)
+            busy.push(st.pts[0][2], st.pts[st.pts.length - 1][2]);
+    }
+    for (const { e, t } of evs)
+        if (e.kind !== 'view')
+            busy.push(t);
+    for (const x of says_)
+        busy.push(x.t + x.d);
+    // 看笔顺的动画一笔约 0.9 秒(英文给答案直接描红,没有动画)
+    if (lang === 'zh')
+        for (const x of steps)
+            if (x.k === 'reveal' || x.k === 'order')
+                busy.push(x.t + 8000);
+    if (checkedAt !== null)
+        busy.push(checkedAt);
+    if (doneAt !== null)
+        busy.push(doneAt);
+    busy.sort((a, b) => a - b);
+    const end = busy[busy.length - 1] + 1200;
+    const viewAt = (t) => drView(steps, t, chars.map((c) => c.length)).view;
+    const gaps = [];
+    for (let k = 1; k < busy.length; k++) {
+        const a = busy[k - 1], b = busy[k];
+        if (b - a <= DR_GAP_MS)
+            continue;
+        const away = aways.some((w) => w.from <= a + 1 && w.to >= b - 1);
+        gaps.push({ from: a, to: b, kind: away ? 'away' : 'gap', view: viewAt(a + 1) });
+    }
+    // 章:一个词一章(走开又回来的那个词再开一章「接着写」),交卷后「对一对」
+    const chapters = [];
+    const shown = new Set();
+    for (const x of steps) {
+        if (x.k === 'show') {
+            chapters.push({ t: x.t, title: '第 ' + (x.word + 1) + ' 个词 · ' + s.words[x.word].chars + (shown.has(x.word) ? ' · 接着写' : '') });
+            shown.add(x.word);
+        }
+        if (x.k === 'check')
+            chapters.push({ t: x.t, title: '对一对' });
+    }
+    // 第一章从头算起(出第一个词之前是开始屏)
+    if (chapters.length)
+        chapters[0] = { t: 0, title: chapters[0].title };
+    else
+        chapters.push({ t: 0, title: '开始' });
+    // 点与经过
+    const marks = [];
+    const notes = [];
+    const ch = (w, c) => (chars[w] && chars[w][c]) || '';
+    for (const x of steps) {
+        if (x.k === 'show')
+            notes.push({ t: x.t, kind: '', chip: '出词', text: '第 ' + (x.word + 1) + ' 个词「' + s.words[x.word].chars + '」' });
+        if (x.k === 'reveal') {
+            const cleared = first.filter((st) => st.word === x.word && st.char === x.char && st.gone !== undefined && Math.abs(st.gone - x.t) < 3000).length;
+            marks.push({ t: x.t, kind: 'rv', label: '给答案:' + ch(x.word, x.char) });
+            notes.push({ t: x.t, kind: 'err', chip: '给答案', text: '点了「不会写,给答案」:' + ch(x.word, x.char) + (cleared ? '(写了的 ' + cleared + ' 笔清掉了)' : '') });
+        }
+        if (x.k === 'order')
+            notes.push({ t: x.t, kind: '', chip: '看笔顺', text: '「' + ch(x.word, x.char) + '」一笔一笔写' });
+        if (x.k === 'trace')
+            notes.push({ t: x.t, kind: '', chip: '照着写', text: '照着灰色的「' + ch(x.word, x.char) + '」写' });
+        if (x.k === 'check')
+            notes.push({ t: x.t, kind: 'tail', chip: '交卷', text: '写完了,自己对一对' });
+        if (x.k === 'strokeOrder')
+            notes.push({ t: x.t, kind: 'card', chip: '看笔顺', text: '点开「' + ch(x.word, x.char) + '」一笔一笔看' });
+        if (x.k === 'rewrite')
+            notes.push({ t: x.t, kind: 'card', chip: '再写', text: '再写一遍「' + s.words[x.word].chars + '」' });
+    }
+    for (const x of says_)
+        notes.push({ t: x.t, kind: '', chip: '老师念', text: x.n > 1 ? '第 ' + x.n + ' 遍' : '「' + says[x.word] + '」' });
+    for (const { e, t } of evs)
+        if (e.kind === 'again')
+            notes.push({ t, kind: 'said', chip: '再念', text: '点了「再念」' });
+    // 一个格里写的:从第一笔到最后一笔;给答案之后的是照着写的
+    const cells = new Map();
+    for (const st of first) {
+        const key = st.word + ':' + st.char;
+        if (!cells.has(key))
+            cells.set(key, []);
+        cells.get(key).push(st);
+    }
+    for (const [key, list] of cells) {
+        const [w, c] = key.split(':').map(Number);
+        const kept = list.filter((st) => st.gone === undefined);
+        const rv = steps.find((x) => x.k === 'reveal' && x.word === w && x.char === c);
+        const after = rv ? kept.filter((st) => st.pts[0][2] > rv.t) : kept;
+        if (after.length) {
+            const a = after[0].pts[0][2], b = Math.max(...after.map((st) => st.pts[st.pts.length - 1][2]));
+            notes.push({ t: a, kind: 'said', chip: rv ? '照着写' : '写', text: '「' + ch(w, c) + '」· ' + after.length + ' 笔 · 用了 ' + drTenth(b - a) });
+        }
+        // 擦掉的(给答案时清掉的另算)
+        const byT = new Map();
+        for (const st of list)
+            if (st.gone !== undefined && !(rv && Math.abs(st.gone - rv.t) < 3000))
+                byT.set(st.gone, (byT.get(st.gone) ?? 0) + 1);
+        for (const [t, n] of byT) {
+            marks.push({ t, kind: 'erase', label: '「' + ch(w, c) + '」擦掉 ' + n + ' 笔' });
+            notes.push({ t, kind: 'miss', chip: '擦掉', text: '「' + ch(w, c) + '」' + (n === 1 ? '撤销了一笔' : '擦掉 ' + n + ' 笔重写') });
+        }
+        if (!kept.length && checkedAt !== null)
+            notes.push({ t: checkedAt - 1, kind: '', chip: '空着', text: '「' + ch(w, c) + '」一笔没写' });
+    }
+    for (const r of rewrites)
+        notes.push({ t: r.to, kind: 'tail', chip: '写好了', text: '再写的「' + s.words[r.word].chars + '」交了' });
+    // 比对:第一遍在这个词写好(交上去)的那一刻,再写的在交上去那一刻;家长页的逐字那几句,孩子的屏幕上没有
+    s.first.forEach((a, w) => {
+        if (!a)
+            return;
+        const lastDone = steps.filter((x) => x.k === 'done' && x.word === w).pop();
+        const t = lastDone ? lastDone.t : wallT(a.at) ?? 0;
+        a.judges.forEach((j, c) => { const xs = drCharNotes(ch(w, c), j); if (xs.length)
+            notes.push({ t: t + 1, kind: j.ask ? 'err' : '', chip: '比对', text: xs.join(';') }); });
+    });
+    s.rewrites.forEach((rw, k) => {
+        const t = rewrites[k] ? rewrites[k].to : 0;
+        rw.attempt.judges.forEach((j, c) => { const xs = drCharNotes(ch(rw.word, c), j); if (xs.length)
+            notes.push({ t: t + 1, kind: j.ask ? 'err' : '', chip: '重写比对', text: xs.join(';') }); });
+    });
+    for (const g of gaps) {
+        if (g.kind === 'away') {
+            marks.push({ t: g.from, kind: 'away', label: '切到别处 ' + drSecs(g.to - g.from) });
+            notes.push({ t: g.from, kind: 'miss', chip: '切到别处', text: drSecs(g.to - g.from) });
+        }
+        else
+            notes.push({ t: g.from, kind: '', chip: '停', text: '停了 ' + drSecs(g.to - g.from) + (g.view === 'listen' ? ',一笔没写' : '') });
+    }
+    if (doneAt !== null)
+        notes.push({ t: doneAt, kind: 'tail', chip: '对好了', text: '点了「对好了」' });
+    notes.sort((a, b) => a.t - b.t);
+    marks.sort((a, b) => a.t - b.t);
+    const views = evs.filter((x) => x.e.kind === 'view' && x.e.w && x.e.h).map((x) => ({ t: x.t, w: x.e.w, h: x.e.h, pad: x.e.pad ?? 'l' }));
+    return { startAt, end, lang, chars, says, first, rewrites, steps, says_, gaps, marks, notes, chapters, views, checkedAt, doneAt };
+}
+/** 到 t 为止:哪一屏、第几个词第几格、在写 / 看笔顺 / 描红 */
+function drView(steps, t, sizes) {
+    let view = 'listen', word = 0, char = 0, mode = 'write', orderAt = 0;
+    let open = null;
+    const revealed = new Set(), done = new Set();
+    for (const x of steps) {
+        if (x.t > t)
+            break;
+        if (x.k === 'show') {
+            view = 'listen';
+            word = x.word;
+            char = 0;
+            mode = revealed.has(word + ':0') ? 'trace' : 'write';
+        }
+        else if (x.k === 'char') {
+            if (view !== 'listen')
+                continue;
+            if (x.word !== word)
+                word = x.word;
+            if (x.char !== char || mode === 'order') {
+                char = x.char;
+                mode = revealed.has(word + ':' + char) ? 'trace' : 'write';
+            }
+        }
+        else if (x.k === 'reveal' || x.k === 'order') {
+            word = x.word;
+            char = x.char;
+            mode = 'order';
+            orderAt = x.t;
+            revealed.add(x.word + ':' + x.char);
+        }
+        else if (x.k === 'trace') {
+            mode = 'trace';
+        }
+        else if (x.k === 'done') {
+            // 写好了:换到这个词下一个还没写好的格(page.ts 的「写好了」);都写好了就停在这儿,等下一个词
+            done.add(x.word + ':' + x.char);
+            const n = sizes[x.word] ?? 1;
+            for (let k = 1; k <= n; k++) {
+                const c = (x.char + k) % n;
+                if (!done.has(x.word + ':' + c)) {
+                    word = x.word;
+                    char = c;
+                    mode = revealed.has(word + ':' + c) ? 'trace' : 'write';
+                    break;
+                }
+            }
+        }
+        else if (x.k === 'check') {
+            view = 'check';
+            open = null;
+        }
+        else if (x.k === 'strokeOrder') {
+            view = 'order';
+            open = { word: x.word, char: x.char };
+            orderAt = x.t;
+        }
+        else if (x.k === 'rewrite') {
+            view = 'rewrite';
+            open = { word: x.word, char: 0 };
+        }
+        else if (x.k === 'close') {
+            view = 'check';
+            open = null;
+        }
+    }
+    return { view, word, char, mode, orderAt, revealed, done, open };
+}
+const drCut = (pts, t) => { let k = 0; while (k < pts.length && pts[k][2] <= t)
+    k++; return k === pts.length ? pts : pts.slice(0, k); };
+export function drFrameAt(r, t) {
+    const v = drView(r.steps, t, r.chars.map((c) => c.length));
+    const ink = r.chars.map((cs) => cs.map(() => []));
+    let writing = null;
+    for (const st of r.first) {
+        if (st.pts[0][2] > t || (st.gone !== undefined && st.gone <= t))
+            continue;
+        ink[st.word][st.char].push(drCut(st.pts, t));
+        if (t <= st.pts[st.pts.length - 1][2] + 250)
+            writing = { word: st.word, char: st.char };
+    }
+    const latest = ink.map((w) => w.map((c) => c.slice()));
+    let rewrite = null;
+    for (const rw of r.rewrites) {
+        const live = r.chars[rw.word].map(() => []);
+        for (const st of rw.strokes)
+            if (st.pts[0][2] <= t && !(st.gone !== undefined && st.gone <= t))
+                live[st.char].push(drCut(st.pts, t));
+        if (rw.to <= t)
+            latest[rw.word] = live;
+        else if (rw.from <= t) {
+            rewrite = live;
+            for (const st of rw.strokes)
+                if (st.pts[0][2] <= t && t <= st.pts[st.pts.length - 1][2] + 250)
+                    writing = { word: rw.word, char: st.char };
+        }
+    }
+    let say = null, said = 0;
+    for (const x of r.says_) {
+        if (x.t > t || x.word !== v.word)
+            continue;
+        if (t < x.t + x.d)
+            say = { n: x.n, word: x.word, t: x.t };
+        else
+            said = Math.max(said, x.n);
+    }
+    const gap = r.gaps.find((g) => t > g.from && t < g.to) ?? null;
+    let size = null, pad = 'l';
+    for (const x of r.views)
+        if (x.t <= t || !size) {
+            size = [x.w, x.h];
+            pad = x.pad;
+        }
+    const allDone = r.chars.every((cs, w) => cs.every((_c, c) => v.done.has(w + ':' + c)));
+    return { view: v.view, word: v.word, char: v.char, mode: v.mode, orderAt: v.orderAt, open: v.open, allDone, ink, rewrite, latest, say, said, writing, gap, size, pad };
+}
+/** 这一刻录像栏上那一行字 */
+export function drCaption(r, f) {
+    const ch = (w, c) => (r.chars[w] && r.chars[w][c]) || '';
+    if (f.gap)
+        return { text: f.gap.kind === 'away' ? '📴 孩子切到别处了 · ' + drSecs(f.gap.to - f.gap.from) : '⏩ 停了 ' + drSecs(f.gap.to - f.gap.from) + (f.gap.view === 'listen' ? ',一笔没写' : ''), cls: 'gap' };
+    if (f.writing)
+        return { text: (f.view === 'rewrite' ? '✏️ 再写一遍「' : f.mode === 'trace' ? '✏️ 照着灰色的写「' : '✏️ 正在写「') + ch(f.writing.word, f.writing.char) + '」', cls: 'kid' };
+    if (f.view === 'listen' && f.mode === 'order')
+        return { text: r.lang === 'en' ? '💡 点了「不会写,给答案」· 照着灰色的单词写' : '💡 点了「不会写,给答案」· 在看「' + ch(f.word, f.char) + '」的笔顺', cls: 'miss' };
+    if (f.view === 'listen' && f.say)
+        return { text: '🔊 老师念「' + r.says[f.word] + '」' + (f.say.n > 1 ? ' · 第 ' + f.say.n + ' 遍' : ''), cls: '' };
+    if (f.view === 'check')
+        return { text: '自己对一对', cls: 'gap' };
+    if (f.view === 'order' && f.open)
+        return { text: '在看「' + ch(f.open.word, f.open.char) + '」一笔一笔写', cls: 'gap' };
+    if (f.view === 'rewrite' && f.open)
+        return { text: '再写一遍「' + r.chars[f.open.word].join('') + '」', cls: 'gap' };
+    return { text: '', cls: '' };
+}
+/** 播放的钟:跳过空白开着时空白压成 1.5 秒;p 是录像里的位置(毫秒) */
+export function drClock(r, real) {
+    const gs = real ? [] : r.gaps;
+    const toPlay = (t) => {
+        let cut = 0;
+        for (const g of gs) {
+            if (t >= g.to)
+                cut += g.to - g.from - DR_SQUEEZE_MS;
+            else if (t > g.from)
+                return g.from - cut + ((t - g.from) / (g.to - g.from)) * DR_SQUEEZE_MS;
+            else
+                break;
+        }
+        return t - cut;
+    };
+    const toWall = (p) => {
+        let cut = 0;
+        for (const g of gs) {
+            const pa = g.from - cut;
+            if (p < pa)
+                return p + cut;
+            if (p <= pa + DR_SQUEEZE_MS)
+                return g.from + ((p - pa) / DR_SQUEEZE_MS) * (g.to - g.from);
+            cut += g.to - g.from - DR_SQUEEZE_MS;
+        }
+        return p + cut;
+    };
+    return { total: toPlay(r.end), toPlay, toWall };
+}

package/dist/ui/dictation/ui.d.ts

@@ -0,0 +1,44 @@
+export declare const ICON: {
+    /** 再念:喇叭 */
+    readonly again: string;
+    /** 撤销 */
+    readonly undo: string;
+    /** 擦掉:橡皮 */
+    readonly clear: string;
+    /** 不会写,给答案:灯泡 */
+    readonly reveal: string;
+    /** 写好了、对好了:勾 */
+    readonly done: string;
+    /** 看笔顺:圈里一个播放 */
+    readonly order: string;
+    /** 再看一遍、从头写:转一圈 */
+    readonly replay: string;
+    /** 开始、接着写:播放(拍照屏「接着写」同一个) */
+    readonly start: string;
+    /** 再写一遍:笔 */
+    readonly write: string;
+    /** 拿开蓝字 / 叠上蓝字:两张叠着的纸,蓝的 */
+    readonly overlay: string;
+    /** 交上去:纸飞机 */
+    readonly send: string;
+    /** 看看写的:眼睛 */
+    readonly look: string;
+    /** 回首页 */
+    readonly home: string;
+    /** 加一个词 */
+    readonly add: string;
+    /** 上一笔 / 下一笔 */
+    readonly prev: string;
+    readonly next: string;
+    /** 重拍:老师页输入条那个相机 */
+    readonly camera: string;
+};
+export type IconName = keyof typeof ICON;
+/** 写字那排(两页一样):再念、撤销、擦掉、不会写,给答案、写好了 */
+export declare const WRITE_TOOLS: readonly ["再念", "撤销", "擦掉", "不会写,给答案", "写好了"];
+/** 页面里写死的按钮:图标在字前面;attrs 原样拼进标签(id、data-*、hidden……);label 空 = 只有图标,要写 aria-label */
+export declare const btn: (cls: string, icon: IconName, label: string, attrs?: string) => string;
+/** 脚本里现建的按钮:h('button', {...}, ico('write'), lbl('再写一遍'));换字用 setLbl(按钮, 字, 图标) */
+export declare const BTN_JS: string;
+/** 两页同一份:次按钮白底、主按钮老师的颜色(--sc),图标 22 / 24 px;页面要有 --sc、--line、--tutor-line、--tutor-ink */
+export declare const BTN_CSS = "\n  .tool { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:56px; padding:0 20px; border-radius:28px; border:1px solid var(--line); background:#fff; font-size:17px; }\n  .tool.sm { min-height:48px; font-size:15px; padding:0 16px; }\n  .tool:disabled { opacity:.4; }\n  .tool svg { width:22px; height:22px; flex:none; }\n  .tool.reveal { border:2px solid var(--tutor-line); background:#fff; color:var(--tutor-ink); font-weight:600; }\n  .main { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:64px; padding:0 40px; border-radius:32px; border:0; background:var(--sc); color:#fff; font-size:20px; font-weight:600; }\n  .main svg { width:24px; height:24px; flex:none; stroke-width:2.2; }\n  .main:disabled { opacity:.45; }\n  .main { transition:opacity .25s; }\n  .main.arm { opacity:.45; transition:none; }\n";

package/dist/ui/dictation/ui.js

@@ -0,0 +1,80 @@
+/**
+ * 听写两页(语文 page.ts、英文 en-page.ts)共用的按钮:同一套字、同一套图标、同一份样式。
+ * 起因:两页的按钮各抄一份,英文页第一版起就没有图标,字也各叫各的(擦掉 / 擦掉重写 / 擦掉这一格);修了几次都只修点名的那几颗,又漂开。
+ * 两页的按钮只从这里出:页面里写死的用 btn(),脚本里现建的用 ico() 与 lbl();按钮上的字在 <span> 里,换字只换 span。
+ * tests/dictation.test.ts 查两页每颗按钮都带图标、写字那排的字一样;再加一种按钮,先在 ICON 里加图标。
+ * 字符串里没有反斜杠与反引号:插进各页的模板字符串。
+ */
+import { cameraSvg, playSvg } from "../kid/photo-ui.js";
+const svg = (paths, stroke = 'currentColor') => `<svg viewBox="0 0 24 24" fill="none" stroke="${stroke}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+export const ICON = {
+    /** 再念:喇叭 */
+    again: svg('<path d="M11 5L6 9H3v6h3l5 4V5z"></path><path d="M15.5 8.5a5 5 0 0 1 0 7"></path><path d="M18.5 5.5a9 9 0 0 1 0 13"></path>'),
+    /** 撤销 */
+    undo: svg('<path d="M9 14L4 9l5-5"></path><path d="M4 9h11a5 5 0 0 1 0 10h-3"></path>'),
+    /** 擦掉:橡皮 */
+    clear: svg('<path d="M20 20H8l-4-4 10-10 6 6-6 6"></path>'),
+    /** 不会写,给答案:灯泡 */
+    reveal: svg('<path d="M9 18h6"></path><path d="M10 21h4"></path><path d="M12 3a6 6 0 0 0-4 10.5c.8.8 1 1.5 1 2.5h6c0-1 .2-1.7 1-2.5A6 6 0 0 0 12 3z"></path>'),
+    /** 写好了、对好了:勾 */
+    done: svg('<path d="M5 12.5l4.5 4.5L19 7.5"></path>'),
+    /** 看笔顺:圈里一个播放 */
+    order: svg('<circle cx="12" cy="12" r="9"></circle><path d="M10 8.5v7l5.5-3.5z"></path>'),
+    /** 再看一遍、从头写:转一圈 */
+    replay: svg('<path d="M3 12a9 9 0 1 0 3-6.7"></path><path d="M3 4v5h5"></path>'),
+    /** 开始、接着写:播放(拍照屏「接着写」同一个) */
+    start: playSvg(),
+    /** 再写一遍:笔 */
+    write: svg('<path d="M4 20h4L19 9l-4-4L4 16v4z"></path><path d="M13.5 6.5l4 4"></path>'),
+    /** 拿开蓝字 / 叠上蓝字:两张叠着的纸,蓝的 */
+    overlay: svg('<rect x="3" y="3" width="13" height="13" rx="2"></rect><rect x="8" y="8" width="13" height="13" rx="2"></rect>', '#4f86d1'),
+    /** 交上去:纸飞机 */
+    send: svg('<path d="M21 3L10 14"></path><path d="M21 3l-7 18-4-7-7-4z"></path>'),
+    /** 看看写的:眼睛 */
+    look: svg('<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"></path><circle cx="12" cy="12" r="3"></circle>'),
+    /** 回首页 */
+    home: svg('<path d="M3 11l9-8 9 8"></path><path d="M5 10v10h14V10"></path>'),
+    /** 加一个词 */
+    add: svg('<path d="M12 5v14"></path><path d="M5 12h14"></path>'),
+    /** 上一笔 / 下一笔 */
+    prev: svg('<path d="M15 18l-6-6 6-6"></path>'),
+    next: svg('<path d="M9 18l6-6-6-6"></path>'),
+    /** 重拍:老师页输入条那个相机 */
+    camera: cameraSvg(),
+};
+/** 写字那排(两页一样):再念、撤销、擦掉、不会写,给答案、写好了 */
+export const WRITE_TOOLS = ['再念', '撤销', '擦掉', '不会写,给答案', '写好了'];
+/** 页面里写死的按钮:图标在字前面;attrs 原样拼进标签(id、data-*、hidden……);label 空 = 只有图标,要写 aria-label */
+export const btn = (cls, icon, label, attrs = '') => `<button class="${cls}" type="button"${attrs ? ' ' + attrs : ''}>${ICON[icon]}${label ? `<span>${label}</span>` : ''}</button>`;
+/** 脚本里现建的按钮:h('button', {...}, ico('write'), lbl('再写一遍'));换字用 setLbl(按钮, 字, 图标) */
+export const BTN_JS = `
+  /**
+   * 主按钮换了意思之后半秒内点不动:换屏、换字、看笔顺换成照着写时调 guard();
+   * 连点、手快时第二下不落到新的意思上(10-18 孩子「我来写」原地变「写好了」)。样子是先淡着再亮,不出字;录像里不调
+   */
+  var guardUntil = 0, guardTimer = 0;
+  var guard = function () {
+    guardUntil = Date.now() + 500;
+    var ms = document.querySelectorAll('.main'); for (var i = 0; i < ms.length; i++) ms[i].classList.add('arm');
+    clearTimeout(guardTimer);
+    guardTimer = setTimeout(function () { var ms = document.querySelectorAll('.main.arm'); for (var i = 0; i < ms.length; i++) ms[i].classList.remove('arm'); }, 500);
+  };
+  document.addEventListener('click', function (e) { if (Date.now() < guardUntil && e.target.closest && e.target.closest('.main')) { e.stopPropagation(); e.preventDefault(); } }, true);
+  var ICON = { ${Object.entries(ICON).map(([k, v]) => `${k}: '${v}'`).join(', ')} };
+  var ico = function (n) { var t = document.createElement('template'); t.innerHTML = ICON[n]; return t.content.firstChild; };
+  var lbl = function (t) { var s = document.createElement('span'); s.textContent = t; return s; };
+  var setLbl = function (b, t, n) { b.replaceChildren(ico(n), lbl(t)); };
+`;
+/** 两页同一份:次按钮白底、主按钮老师的颜色(--sc),图标 22 / 24 px;页面要有 --sc、--line、--tutor-line、--tutor-ink */
+export const BTN_CSS = `
+  .tool { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:56px; padding:0 20px; border-radius:28px; border:1px solid var(--line); background:#fff; font-size:17px; }
+  .tool.sm { min-height:48px; font-size:15px; padding:0 16px; }
+  .tool:disabled { opacity:.4; }
+  .tool svg { width:22px; height:22px; flex:none; }
+  .tool.reveal { border:2px solid var(--tutor-line); background:#fff; color:var(--tutor-ink); font-weight:600; }
+  .main { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:64px; padding:0 40px; border-radius:32px; border:0; background:var(--sc); color:#fff; font-size:20px; font-weight:600; }
+  .main svg { width:24px; height:24px; flex:none; stroke-width:2.2; }
+  .main:disabled { opacity:.45; }
+  .main { transition:opacity .25s; }
+  .main.arm { opacity:.45; transition:none; }
+`;

package/dist/ui/dictation/unlock.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 第一声在点击里放开:iPad 的 Safari 只让手势里起的声音响,听写的第一声却常在请求回来之后才念
+ *(拍照的「开始听写」、接着写),就被拦了。所以孩子第一次点页面上任何地方,就在这一下里把 audio 元素放一段静音,
+ * 算解锁;同 kid-page.ts 的 unlock。插进中英两页的内联脚本,要求页面先有 audio。
+ * 脚本是 ES5、没有反斜杠与反引号。
+ */
+export declare const UNLOCK_JS = "\n  var unlocked = false;\n  var unlock = function () {\n    if (unlocked) return; unlocked = true;\n    try { if (!audio.src || audio.src.indexOf('data:') === 0) { audio.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAQB8AAIA+AAACABAAZGF0YQAAAAA='; var pr = audio.play(); if (pr && pr.catch) pr.catch(function () {}); } } catch (e) {}\n  };\n  document.addEventListener('pointerdown', unlock, true); document.addEventListener('click', unlock, true);\n  /** \u8FD8\u662F\u88AB\u62E6\u4E86(NotAllowedError \u4E0D\u662F\u97F3\u9891\u574F\u4E86):\u53EB\u5B69\u5B50\u70B9\u300C\u518D\u5FF5\u300D */\n  var blocked = function (e) { return Boolean(e && e.name === 'NotAllowedError'); };\n";

package/dist/ui/dictation/unlock.js

@@ -0,0 +1,16 @@
+/**
+ * 第一声在点击里放开:iPad 的 Safari 只让手势里起的声音响,听写的第一声却常在请求回来之后才念
+ *(拍照的「开始听写」、接着写),就被拦了。所以孩子第一次点页面上任何地方,就在这一下里把 audio 元素放一段静音,
+ * 算解锁;同 kid-page.ts 的 unlock。插进中英两页的内联脚本,要求页面先有 audio。
+ * 脚本是 ES5、没有反斜杠与反引号。
+ */
+export const UNLOCK_JS = `
+  var unlocked = false;
+  var unlock = function () {
+    if (unlocked) return; unlocked = true;
+    try { if (!audio.src || audio.src.indexOf('data:') === 0) { audio.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAQB8AAIA+AAACABAAZGF0YQAAAAA='; var pr = audio.play(); if (pr && pr.catch) pr.catch(function () {}); } } catch (e) {}
+  };
+  document.addEventListener('pointerdown', unlock, true); document.addEventListener('click', unlock, true);
+  /** 还是被拦了(NotAllowedError 不是音频坏了):叫孩子点「再念」 */
+  var blocked = function (e) { return Boolean(e && e.name === 'NotAllowedError'); };
+`;

package/dist/ui/kid/audio-client.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 孩子端的声音(口语课与实时老师共用,插进各页的内联脚本):getUserMedia → AudioWorklet 降到 16k PCM16,100 毫秒一块交给 onChunk(静音时不交);
+ * 下来的 24k PCM16 一块块排进 AudioContext 放(上一块放完或现在 + 60 毫秒,取晚的;录像的混音 src/runtime/journal/mix.ts 照这个排法)。
+ * makeAudio() 回一个对象:open()(要在一次点击里调,Safari 才给起 AudioContext 与麦)、play(ArrayBuffer)、playing()、flush()、close(),
+ * 回调 onChunk(ArrayBuffer) / onLevel(0–1),muted 缺省 true(连上了再放开)。没有 AudioWorklet 的退到 ScriptProcessor。
+ * duck(v):放出来的声音压到 v(0–1,一直听时孩子开口先压低嘴,1 恢复);放声都过一个总的 GainNode,后面一个 AnalyserNode,outLevel() 回放出去的音量(0–1 左右,压低之前的)。
+ * 页面自己开着麦克风的(孩子端老师页的常开那路)不用 open:点击里先 wake()(只起 AudioContext),拿到那路再 use(stream)——
+ * iPad 上再 getUserMedia 一次会把先开的那路弄哑;use 的那路不归它管,close 不停它,换了一路就换源。
+ * 脚本里不写反斜杠、反引号、美元加花括号(插进去的地方是模板字符串,见 AGENTS.md「坑」)。
+ */
+export declare const AUDIO_CLIENT_JS = "\n  const WORKLET = 'class P extends AudioWorkletProcessor { constructor() { super(); this.buf = []; this.n = 0; this.acc = 0; } process(inputs) { const ch = inputs[0] && inputs[0][0]; if (!ch) return true; const ratio = sampleRate / 16000; const out = []; for (let i = 0; i < ch.length; i++) { this.acc += 1; if (this.acc >= ratio) { this.acc -= ratio; out.push(ch[i]); } } for (const v of out) { this.buf.push(v); } if (this.buf.length >= 1600) { const n = 1600; const pcm = new Int16Array(n); let s = 0; for (let i = 0; i < n; i++) { const v = Math.max(-1, Math.min(1, this.buf[i])); pcm[i] = v < 0 ? v * 32768 : v * 32767; s += v * v; } this.buf = this.buf.slice(n); this.port.postMessage({ pcm: pcm.buffer, rms: Math.sqrt(s / n) }, [pcm.buffer]); } return true; } } registerProcessor(\"cotutor-pcm16\", P);';\n  function makeAudio() {\n    const A = { ctx: null, stream: null, own: false, src: null, node: null, nodeReady: null, playAt: 0, sources: [], onChunk: null, onLevel: null, muted: true, out: null, level: 1 };\n    const out = () => { if (!A.out || A.out.context !== A.ctx) { A.out = A.ctx.createGain(); A.out.gain.value = A.level; A.an = A.ctx.createAnalyser(); A.an.fftSize = 512; A.out.connect(A.an); A.an.connect(A.ctx.destination); } return A.out; };\n    // \u653E\u51FA\u53BB\u7684\u97F3\u91CF(\u8001\u5E08\u5728\u8BF4\u65F6\u6309\u94AE\u65C1\u90A3\u4E09\u9053\u5C0F\u5F27\u7684\u6DF1\u6D45,src/ui/kid/voice-ui.ts):\u603B GainNode \u540E\u9762\u63A5\u4E00\u4E2A AnalyserNode,\u53D6\u7684\u662F\u538B\u4F4E\u4E4B\u524D\u7684\n    A.outLevel = () => {\n      if (!A.an || !A.ctx || A.an.context !== A.ctx || !A.playing()) return 0;\n      const d = A.anBuf || (A.anBuf = new Uint8Array(A.an.fftSize));\n      A.an.getByteTimeDomainData(d);\n      let s = 0;\n      for (let i = 0; i < d.length; i++) { const v = (d[i] - 128) / 128; s += v * v; }\n      return Math.sqrt(s / d.length) / Math.max(0.05, A.level);\n    };\n    A.duck = (v) => { A.level = v; if (A.out && A.ctx && A.out.context === A.ctx) { try { A.out.gain.setTargetAtTime(v, A.ctx.currentTime, 0.05); } catch (e) { A.out.gain.value = v; } } };\n    A.wake = () => { if (!A.ctx) A.ctx = new (window.AudioContext || window.webkitAudioContext)(); return A.ctx.resume(); };\n    const node = () => A.nodeReady || (A.nodeReady = (async () => {\n      if (A.ctx.audioWorklet) {\n        const url = URL.createObjectURL(new Blob([WORKLET], { type: 'application/javascript' }));\n        await A.ctx.audioWorklet.addModule(url);\n        A.node = new AudioWorkletNode(A.ctx, 'cotutor-pcm16', { numberOfInputs: 1, numberOfOutputs: 1, channelCount: 1 });\n        A.node.port.onmessage = (e) => { if (A.onLevel) A.onLevel(e.data.rms); if (!A.muted && A.onChunk) A.onChunk(e.data.pcm); };\n        const sink = A.ctx.createGain(); sink.gain.value = 0; A.node.connect(sink); sink.connect(A.ctx.destination);\n      } else {\n        const sp = A.ctx.createScriptProcessor(4096, 1, 1);\n        let buf = [], acc = 0;\n        sp.onaudioprocess = (e) => {\n          const ch = e.inputBuffer.getChannelData(0); const ratio = A.ctx.sampleRate / 16000;\n          for (let i = 0; i < ch.length; i++) { acc += 1; if (acc >= ratio) { acc -= ratio; buf.push(ch[i]); } }\n          while (buf.length >= 1600) { const pcm = new Int16Array(1600); let s = 0; for (let i = 0; i < 1600; i++) { const v = Math.max(-1, Math.min(1, buf[i])); pcm[i] = v < 0 ? v * 32768 : v * 32767; s += v * v; } buf = buf.slice(1600); if (A.onLevel) A.onLevel(Math.sqrt(s / 1600)); if (!A.muted && A.onChunk) A.onChunk(pcm.buffer); }\n        };\n        const sink = A.ctx.createGain(); sink.gain.value = 0; sp.connect(sink); sink.connect(A.ctx.destination);\n        A.node = sp;\n      }\n    })());\n    A.use = async (stream) => {\n      await A.wake(); await node();\n      if (stream === A.stream) return;\n      if (A.src) { try { A.src.disconnect(); } catch (e) {} }\n      if (A.own && A.stream) for (const t of A.stream.getTracks()) t.stop();\n      A.stream = stream; A.own = false;\n      A.src = A.ctx.createMediaStreamSource(stream); A.src.connect(A.node);\n    };\n    A.open = async () => {\n      await A.wake();\n      const st = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true } });\n      await A.use(st); A.own = true;\n    };\n    A.play = (ab) => {\n      if (!A.ctx) return;\n      const i16 = new Int16Array(ab); const n = i16.length; if (!n) return;\n      const buf = A.ctx.createBuffer(1, n, 24000); const d = buf.getChannelData(0);\n      for (let i = 0; i < n; i++) d[i] = i16[i] / 32768;\n      const s = A.ctx.createBufferSource(); s.buffer = buf; s.connect(out());\n      const now = A.ctx.currentTime; if (A.playAt < now + 0.06) A.playAt = now + 0.06;\n      s.start(A.playAt); A.playAt += buf.duration; A.sources.push(s);\n      s.onended = () => { const k = A.sources.indexOf(s); if (k >= 0) A.sources.splice(k, 1); };\n    };\n    A.playing = () => Boolean(A.ctx) && A.playAt > A.ctx.currentTime + 0.02;\n    A.flush = () => { for (const s of A.sources) { try { s.stop(); } catch (e) {} } A.sources = []; A.playAt = 0; };\n    A.close = () => { A.flush(); if (A.own && A.stream) for (const t of A.stream.getTracks()) t.stop(); if (A.ctx) { try { A.ctx.close().catch(() => {}); } catch (e) {} } A.ctx = null; A.stream = null; A.src = null; A.node = null; A.nodeReady = null; A.out = null; A.an = null; };\n    return A;\n  }\n";