cotutor 0.2.0 → 0.4.0

package/dist/ui/dev/dev-theme.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 工作台的设计语言「纸面控制台」:/dev 用的一份色板与几样基本件。
+ * 纸、墨、橙与家长端同源;状态色取自孩子端主题的 tints(moss / sand / sky)外加一个砖红;数字一律等宽。
+ * 各页把 DEV_CSS 放进自己 <style> 的最前面,页面自己的样式只用这里的变量,不再写死颜色。
+ */
+export declare const DEV_CSS: string;

package/dist/ui/dev/dev-theme.js

@@ -0,0 +1,67 @@
+/**
+ * 工作台的设计语言「纸面控制台」:/dev 用的一份色板与几样基本件。
+ * 纸、墨、橙与家长端同源;状态色取自孩子端主题的 tints(moss / sand / sky)外加一个砖红;数字一律等宽。
+ * 各页把 DEV_CSS 放进自己 <style> 的最前面,页面自己的样式只用这里的变量,不再写死颜色。
+ */
+/** 色板、字、圆角:名字是给页面样式用的,值改这里一处 */
+const TOKENS = `
+  :root {
+    --ground:#F5F3EE; --surface:#FFFFFF; --surface-2:#FAF9F6; --sunk:#EDEAE3;
+    --line:#E5E1D8; --line-soft:#EFECE6;
+    --ink:#2B2B2B; --ink-2:#4A4740; --muted:#6B675F; --faint:#8A8781; --off:#C9C3B6;
+    --accent:#B4531F; --accent-hover:#9A4519; --accent-soft:#F7E8DE; --accent-line:#D7A386;
+    --ok:#1F7A44; --ok-soft:#E5F4EA;
+    --warn:#8A5A12; --warn-soft:#F9F1DE; --warn-dot:#C08A2E;
+    --info:#2F5E9E; --info-soft:#E9F1FB;
+    --err:#B03A2E; --err-soft:#FBEAE6; --err-line:#F0C9C1;
+    --kid:var(--info); --kid-soft:var(--info-soft);
+    --parent:var(--warn); --parent-soft:var(--warn-soft);
+    --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
+    --mono:"SF Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
+    --serif:"Songti SC","Times New Roman",serif;
+    --r-card:18px; --r-turn:14px; --r-item:12px; --r-ctl:10px; --r-tag:6px;
+    --lift:0 1px 2px rgba(43,43,43,.06);
+  }`;
+/** 基本件:按钮、数据片、状态签、输入、白卡、分段、开关 */
+const BASE = `
+  * { box-sizing:border-box; }
+  body { margin:0; background:var(--ground); color:var(--ink); font:14px/1.55 var(--sans); }
+  button, input, select, textarea { font:inherit; color:inherit; }
+  a { color:var(--accent); text-decoration:none; }
+  a:hover { color:var(--accent-hover); }
+  .num { font-family:var(--mono); font-variant-numeric:tabular-nums; }
+
+  .btn { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border:0; border-radius:var(--r-ctl); background:var(--surface); box-shadow:0 0 0 1px var(--line); color:var(--ink); font-size:13.5px; cursor:pointer; white-space:nowrap; text-decoration:none; }
+  .btn:hover { box-shadow:0 0 0 1px var(--accent-line); color:var(--ink); }
+  .btn:disabled { opacity:.45; cursor:default; }
+  .btn.primary { background:var(--accent); color:#fff; box-shadow:none; font-weight:600; }
+  .btn.primary:hover { background:var(--accent-hover); color:#fff; }
+  .btn.ink { background:var(--ink); color:#fff; box-shadow:none; font-weight:500; }
+  .btn.ink:hover { background:#000; color:#fff; }
+  .btn.soft { background:var(--accent-soft); color:var(--accent); box-shadow:none; font-weight:500; }
+  .btn.soft:hover { color:var(--accent-hover); }
+  .btn.danger { background:none; box-shadow:none; color:var(--err); }
+  .btn.danger:hover { background:var(--err-soft); color:var(--err); }
+  .btn.small { height:28px; padding:0 10px; font-size:12.5px; border-radius:8px; }
+
+  .chip { display:inline-flex; align-items:center; gap:4px; font:500 12px/1 var(--mono); color:var(--muted); background:var(--surface); box-shadow:0 0 0 1px var(--line); border-radius:var(--r-tag); padding:5px 8px; font-variant-numeric:tabular-nums; white-space:nowrap; }
+  .chip b { color:var(--ink); font-weight:600; }
+  .chip.slow { background:var(--warn-soft); box-shadow:none; color:var(--warn); }
+  .chip.slow b { color:var(--warn); }
+  .tag { display:inline-flex; align-items:center; font:500 12px/1 var(--mono); color:var(--ink-2); background:var(--sunk); border-radius:var(--r-tag); padding:4px 8px; white-space:nowrap; }
+  .st { display:inline-flex; align-items:center; font:600 12px/20px var(--sans); border-radius:var(--r-tag); padding:0 8px; white-space:nowrap; background:var(--sunk); color:var(--muted); }
+  .st.ok { background:var(--ok-soft); color:var(--ok); }
+  .st.warn { background:var(--warn-soft); color:var(--warn); }
+  .st.info { background:var(--info-soft); color:var(--info); }
+  .st.err { background:var(--err-soft); color:var(--err); }
+  .st.accent { background:var(--accent-soft); color:var(--accent); }
+  .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; display:inline-block; }
+  .dot.warn { background:var(--warn-dot); } .dot.err { background:var(--err); } .dot.off { background:var(--off); }
+
+  .card-w { background:var(--surface); border-radius:var(--r-card); }
+  .seg { display:inline-flex; padding:3px; border-radius:var(--r-ctl); background:var(--sunk); gap:2px; }
+  .seg > * { height:28px; padding:0 12px; border:0; border-radius:8px; background:transparent; color:var(--ink-2); font-size:12.5px; cursor:pointer; display:inline-flex; align-items:center; text-decoration:none; }
+  .seg > .on { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(43,43,43,.08); }
+  input[type=checkbox] { accent-color:var(--accent); width:16px; height:16px; }
+  :focus-visible { outline:2px solid var(--accent-line); outline-offset:1px; }`;
+export const DEV_CSS = TOKENS + BASE;

package/dist/ui/dev/voice-gallery-page.d.ts

@@ -0,0 +1 @@
+export declare const VOICE_GALLERY_PAGE: string;

package/dist/ui/dev/voice-gallery-page.js

@@ -0,0 +1,121 @@
+/**
+ * 工作台 /dev/voice:按钮样张。孩子端老师页那颗「头像 + 按住说话」按钮的每一种样子摆在一页上,
+ * 用的是真的按钮(src/ui/kid/voice-ui.ts)和真的状态 → 样子(src/ui/kid/voice-view.ts),场景表是 src/ui/dev/voice-scenes.ts;声音是模拟的
+ *(老师一段一段说、孩子说说停停、按着没声音)。孩子用几天要改动画:改 voice-ui.ts 开头的调参表,开这一页看全部。
+ * 最上面一颗自己循环「打断的那一下」:老师在说 → 孩子按下 → 孩子在说 → 松手(老师在想)。有镜像开关。样子用工作台的色板(dev-theme.ts),按钮自己的颜色是孩子端的。
+ */
+import { inlineScript } from "../shared/inline-lib.js";
+import { DEV_CSS } from "./dev-theme.js";
+import { VOICE_CSS, VOICE_JS } from "../kid/voice-ui.js";
+import { faviconLinks } from "../shared/favicon.js";
+const PAGE = `<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+${faviconLinks()}
+<title>按钮样张 · 工作台</title>
+<style>
+__DEV_CSS__
+  body { padding:28px 32px 48px; }
+  header { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:8px; }
+  h1 { margin:0; font-size:22px; font-weight:650; }
+  header p { margin:0; color:var(--muted); font-size:13px; flex:1 1 360px; }
+  label.sw { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-2); }
+  h2 { margin:28px 0 12px; font-size:15px; font-weight:650; color:var(--ink-2); }
+  .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:16px; }
+  .cell { background:var(--surface); border-radius:var(--r-card); box-shadow:var(--lift),0 0 0 1px var(--line); padding:14px 14px 12px; display:flex; flex-direction:column; gap:10px; }
+  .cell b { font-size:14px; }
+  .cell .k { font:500 11.5px/1 var(--mono); color:var(--faint); margin-left:6px; }
+  .cell small { font-size:12.5px; color:var(--muted); line-height:1.5; }
+  .stage { background:var(--surface-2); border-radius:var(--r-item); padding:14px 0; display:flex; justify-content:center; }
+  .demo .stage { padding:22px 0; }
+  .demo small b { font-weight:600; color:var(--ink); }
+  /* 孩子端头像的样子(同 kid-page.ts 的 .av):学科色的 C 形开口环 + 白底圆里的字 */
+  .av { position:relative; display:grid; place-items:center; font-weight:700; flex:0 0 auto; }
+  .av .ring { position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
+  .av .ring circle { fill:none; stroke:currentColor; stroke-width:7; stroke-linecap:round; stroke-dasharray:221.17 55.29; transform-origin:50px 50px; transform:rotate(36deg); }
+  .av .face { position:absolute; left:15%; top:15%; width:70%; height:70%; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:.76em; line-height:1; }
+__VOICE_CSS__
+</style>
+</head>
+<body>
+<header>
+  <h1>按钮样张</h1>
+  <p>孩子端老师页那颗「头像 + 按住说话」的每一种样子,声音是模拟的。要改动画:改 src/ui/kid/voice-ui.ts 开头的调参表;样子的种类在 src/ui/kid/voice-view.ts,场景表在 src/ui/dev/voice-scenes.ts。</p>
+  <label class="sw"><input type="checkbox" id="mirror">按住说话在右边</label>
+</header>
+<main id="main"></main>
+<script>
+(() => {
+__VOICE_VIEW_JS__
+__VOICE_SCENES_JS__
+__VOICE_JS__
+  const TUTORS = { chinese: { color: '#c43c74', text: '语' }, english: { color: '#2f8a7a', text: '英' } };
+  const el = (tag, cls, text) => { const e = document.createElement(tag); if (cls) e.className = cls; if (text) e.textContent = text; return e; };
+  const avatar = (t) => { const a = el('span', 'av'); a.style.color = t.color; a.innerHTML = '<svg class="ring" viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="50" r="44"></circle></svg><span class="face">' + t.text + '</span>'; return a; };
+  const t0 = performance.now();
+  /** 模拟的老师:一句 2.5 秒、停 0.6 秒,一个字 180 毫秒一起一落(放出去那条链上的 RMS 大约这么大) */
+  const tutorLv = () => { const t = performance.now() - t0; if (t % 3100 > 2500) return 0; return 0.03 + 0.09 * Math.sin((t % 180) / 180 * Math.PI) * (0.6 + 0.4 * Math.sin(t / 700)); };
+  /** 模拟的孩子:说 3 秒、停 1.2 秒,高高低低 */
+  const kidLv = () => { const t = performance.now() - t0; if (t % 4200 > 3000) return 0; return Math.max(0, 0.2 + 0.6 * Math.abs(Math.sin(t / 130)) * (0.5 + 0.5 * Math.sin(t / 900))); };
+  const all = [];
+  const mount = (stage, tutor, sound) => {
+    const b = el('button'); b.type = 'button';
+    stage.append(b);
+    const vb = voiceButton(b, { side: 'left', color: TUTORS[tutor].color });
+    vb.avatar(avatar(TUTORS[tutor]));
+    if (sound === 'tutor' || sound === 'both') vb.tutorSource(tutorLv);
+    all.push({ vb, sound });
+    return vb;
+  };
+  // 打断的那一下:自己循环
+  const demo = el('section', 'cell demo');
+  demo.append(el('b', '', '打断的那一下(自己循环)'));
+  const ds = el('div', 'stage'); demo.append(ds);
+  const dnote = el('small'); demo.append(dnote);
+  const dvb = mount(ds, 'chinese', 'none');
+  dvb.tutorSource(tutorLv);
+  const steps = [
+    { ms: 3200, input: { status: 'mouth' }, kid: false, say: '老师在说:头像旁三道小弧,深浅跟老师的音量' },
+    { ms: 3600, input: { status: 'holding', holdAudio: true }, kid: true, say: '孩子按满 150 毫秒:老师的弧 0.15 秒收掉,整块变蓝,竖条往头像里走' },
+    { ms: 2600, input: { pending: true }, kid: false, say: '松手:路上剩下的竖条 0.4 秒走进头像,按钮回灰白,头像转圈(老师在想)' },
+  ];
+  let si = 0;
+  const step = () => { const s = steps[si % steps.length]; si++; dvb.set(voiceView(voiceIn(s.input))); dnote.replaceChildren(el('b', '', (si - 1) % steps.length + 1 + ' / ' + steps.length + ' '), document.createTextNode(s.say)); demo.dataset.kid = s.kid ? '1' : ''; setTimeout(step, s.ms); };
+  step();
+  const main = document.getElementById('main');
+  main.append(demo);
+  const groups = [];
+  for (const s of VOICE_SCENES) if (!groups.includes(s.group)) groups.push(s.group);
+  for (const g of groups) {
+    main.append(el('h2', '', g));
+    const grid = el('div', 'grid'); main.append(grid);
+    for (const s of VOICE_SCENES.filter((x) => x.group === g)) {
+      const c = el('section', 'cell');
+      const t = el('b', '', s.name); t.append(el('span', 'k', s.expect));
+      const st = el('div', 'stage');
+      c.append(t, st, el('small', '', s.note));
+      grid.append(c);
+      const vb = mount(st, s.tutor, s.sound);
+      vb.set(voiceView(voiceIn(s.input)));
+      // 提示类的样子只晃一下;样张上每 3 秒再晃一次,看得见
+      if (s.input.hint) setInterval(() => vb.shake(), 3000);
+    }
+  }
+  setInterval(() => {
+    for (const x of all) if (x.sound === 'kid' || x.sound === 'both') x.vb.level('kid', kidLv()); else if (x.sound === 'kidQuiet') x.vb.level('kid', 0);
+    if (demo.dataset.kid) dvb.level('kid', kidLv());
+  }, 60);
+  document.getElementById('mirror').addEventListener('change', (e) => { for (const x of all) x.vb.side(e.target.checked ? 'right' : 'left'); });
+})();
+</script>
+</body>
+</html>
+`;
+export const VOICE_GALLERY_PAGE = PAGE
+    .replace('__DEV_CSS__', () => DEV_CSS)
+    .replace('__VOICE_CSS__', () => VOICE_CSS)
+    .replace('__VOICE_VIEW_JS__', () => inlineScript(new URL('../kid/voice-view.ts', import.meta.url)))
+    .replace('__VOICE_SCENES_JS__', () => inlineScript(new URL('./voice-scenes.ts', import.meta.url)))
+    .replace('__VOICE_JS__', () => VOICE_JS);

package/dist/ui/dev/voice-scenes.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 按钮的各个场景:一格 = 一种状态、它该是哪种样子(voice-view.ts)、样张里放什么声音。
+ * 例子即测试:tests/voice-view.test.ts 逐格查 voiceView 给的 key;工作台 /dev/voice 照这张表把每格用真的按钮摆出来,声音是模拟的。
+ * 加一种场景:这里加一格 → 测试跟着过 → /dev/voice 自己就有。不进孩子端页面(那边只要 voice-view)。
+ */
+import type { VoiceIn } from '../kid/voice-view.ts';
+export interface VoiceScene {
+    /** 样张上的分组 */
+    group: string;
+    name: string;
+    /** 什么时候是它(一句) */
+    note: string;
+    input: Partial<VoiceIn>;
+    /** 样张里模拟的声音:tutor 老师一段一段说 · kid 孩子说说停停 · kidQuiet 按着没声音 · both 插话(两个人同时)· none 没声音 */
+    sound: 'tutor' | 'kid' | 'kidQuiet' | 'both' | 'none';
+    /** 样张里用哪位老师的样子:语文(按住说)/ 英语(口语课一直听) */
+    tutor: 'chinese' | 'english';
+    /** voiceView 该给的 key */
+    expect: string;
+}
+export declare const VOICE_SCENES: VoiceScene[];

package/dist/ui/dev/voice-scenes.js

@@ -0,0 +1,30 @@
+export const VOICE_SCENES = [
+    { group: '老师这边', name: '安静 · 等你说', note: '老师讲完、孩子还没开口', input: {}, sound: 'none', tutor: 'chinese', expect: 'idle' },
+    { group: '老师这边', name: '正在叫老师', note: '刚进老师页、换连接,嘴还没连上(一两秒);按了晃一下', input: { ready: false }, sound: 'none', tutor: 'chinese', expect: 'connecting' },
+    { group: '老师这边', name: '以前的话题 · 只能看', note: '看以前的话题:灰着、不接(按了晃一下),底下一行「回到今天」', input: { readonly: true }, sound: 'none', tutor: 'chinese', expect: 'readonly' },
+    { group: '老师这边', name: '今天点过 · 点上面开始', note: '今天点过同一个按钮:左栏先问「接着那个 / 重新开始」,点之前按钮灰着、不接', input: { choose: true }, sound: 'none', tutor: 'chinese', expect: 'choose' },
+    { group: '老师这边', name: '老师在说', note: '头像旁三道小弧,深浅跟嘴的音量;不走、不放大', input: { status: 'mouth' }, sound: 'tutor', tutor: 'chinese', expect: 'tutor' },
+    { group: '老师这边', name: '老师两句之间', note: '还在说这一轮,但这会儿没声音:三道弧淡到最低', input: { status: 'mouth' }, sound: 'none', tutor: 'chinese', expect: 'tutor' },
+    { group: '老师这边', name: '老师在想', note: '脑在写、嘴没出声;按了晃一下「老师在想,等一下再说」', input: { pending: true }, sound: 'none', tutor: 'chinese', expect: 'think' },
+    { group: '老师这边', name: '在看你的图片', note: '发了照片:「我看一看图片」之后到读完图', input: { pending: true, photo: true }, sound: 'none', tutor: 'chinese', expect: 'photo' },
+    { group: '孩子这边', name: '按着在说', note: '整块变蓝,竖条从另一头往头像里走,高低跟麦克风', input: { status: 'holding', holdAudio: true }, sound: 'kid', tutor: 'chinese', expect: 'hold' },
+    { group: '孩子这边', name: '话筒还没开', note: '刚按下,麦克风还在开(这时说的进不去)', input: { status: 'holding' }, sound: 'kidQuiet', tutor: 'chinese', expect: 'hold-wait' },
+    { group: '孩子这边', name: '按着、没出声', note: '小点慢慢走;3 秒还没声音换成「我还没听到声音」', input: { status: 'holding', holdAudio: true, silentMs: 3200 }, sound: 'kidQuiet', tutor: 'chinese', expect: 'hold-silent' },
+    { group: '孩子这边', name: '往上滑 · 松手取消', note: '手指往上滑过一个按钮高', input: { status: 'holding', holdAudio: true, cancel: true }, sound: 'none', tutor: 'chinese', expect: 'cancel' },
+    { group: '孩子这边', name: '太短 / 没听清', note: '按不到 0.4 秒、麦克风没开上:晃一下,字留 2 秒', input: { hint: 'unclear' }, sound: 'none', tutor: 'chinese', expect: 'unclear' },
+    { group: '孩子这边', name: '点一下没按住', note: '不到 150 毫秒就松手', input: { hint: 'tap' }, sound: 'none', tutor: 'chinese', expect: 'tap' },
+    { group: '孩子这边', name: '老师在想时按了', note: '不接,晃一下', input: { pending: true, hint: 'busy' }, sound: 'none', tutor: 'chinese', expect: 'busy' },
+    { group: '别的声音', name: '卡在念', note: '点读、单词卡、田字格的声音:不是老师,不画声音', input: { status: 'card' }, sound: 'none', tutor: 'chinese', expect: 'card' },
+    { group: '别的声音', name: '再听一遍', note: '放的是刚才录下的老师,不是老师在说', input: { status: 'replay' }, sound: 'none', tutor: 'chinese', expect: 'replay' },
+    { group: '别的声音', name: '小课堂在放', note: '课里原来的声音在舞台上放', input: { status: 'lecture' }, sound: 'none', tutor: 'chinese', expect: 'lecture' },
+    { group: '口语课一直听', name: '口语单拍好 · 点上面开始', note: '左栏「先热身,再打电话」点之前:灰着、不接,麦也不开', input: { open: true, choose: true }, sound: 'none', tutor: 'english', expect: 'choose' },
+    { group: '口语课一直听', name: '在听', note: '不用按,这颗是麦克风开关', input: { open: true }, sound: 'none', tutor: 'english', expect: 'open' },
+    { group: '口语课一直听', name: '孩子在说', note: '服务端判出孩子开口', input: { open: true, hearing: true }, sound: 'kid', tutor: 'english', expect: 'open-kid' },
+    { group: '口语课一直听', name: '老师在说', note: '同上面「老师在说」,底是淡蓝的', input: { open: true, status: 'mouth' }, sound: 'tutor', tutor: 'english', expect: 'open-tutor' },
+    { group: '口语课一直听', name: '孩子插话', note: '老师的弧淡到三成,孩子的竖条照走', input: { open: true, status: 'mouth', hearing: true, ducked: true }, sound: 'both', tutor: 'english', expect: 'interrupt' },
+    { group: '口语课一直听', name: '老师在想', note: '脑在写', input: { open: true, pending: true }, sound: 'none', tutor: 'english', expect: 'open-think' },
+    { group: '口语课一直听', name: '麦关了', note: '孩子说话不出竖条(没在收)', input: { open: true, muted: true }, sound: 'none', tutor: 'english', expect: 'muted' },
+    { group: '口语课一直听', name: '麦关了、老师在说', note: '老师的弧照出', input: { open: true, muted: true, status: 'mouth' }, sound: 'tutor', tutor: 'english', expect: 'muted-tutor' },
+    { group: '口语课一直听', name: '轮到你(跟读)', note: '热身那句念完等孩子跟:按钮和那张单词卡一起慢慢呼吸', input: { open: true, turn: true }, sound: 'none', tutor: 'english', expect: 'turn' },
+    { group: '口语课一直听', name: '打电话 · 响铃', note: '[[call]] 那句念完:头像晃;嘴一出声铃停', input: { open: true, status: 'ring' }, sound: 'none', tutor: 'english', expect: 'ring' },
+];

package/dist/ui/dictation/en-box.d.ts

@@ -0,0 +1,2 @@
+export declare const EN_BOX_JS: string;
+export declare const EN_BOX_CSS = "\n  .enl line { stroke:#cfd8e3; stroke-width:6; }\n  .enl line.base { stroke:#e7a3a3; }\n  .enw { opacity:.3; }\n  .enw path { fill:none; stroke:#2f6fd6; stroke-width:30; stroke-linecap:round; stroke-linejoin:round; }\n  .enw.trace { opacity:.4; }\n  .enw.trace path { stroke:#9b978e; }\n  .enw.solid { opacity:1; }\n  .enw.font { font-size:240px; font-family:\"Chalkboard SE\",\"Comic Sans MS\",\"Marker Felt\",sans-serif; fill:#2f6fd6; }\n  .enw.font.trace { fill:#9b978e; }\n  .eni path { fill:none; stroke:#2b2b2b; stroke-width:22; stroke-linecap:round; stroke-linejoin:round; }\n";

package/dist/ui/dictation/en-box.js

@@ -0,0 +1,86 @@
+/**
+ * 英文单词听写的四线三格:孩子写字页、家长页、录像页共用一份画法,插进各页的内联脚本与样式。
+ * 一格 = 一个单词,坐标 2048 × 512(笔迹的点也记在这个尺子上,y 朝下);四条线在 80 / 200 / 320 / 440,第三条是基线(红)。
+ * 写字屏的格子铺满、按屏幕大小只露尺子的一段(en-page.ts 的 fitPad);对一对、录像、家长页照 EN_VIEW。
+ * 格子上下各多露一截:画的视窗是 EN_VIEW(0 -192 2048 896,16 : 7),四条线在中间,写出格的笔画照样看得见;尺子不变,出格的点 y 为负或大于 512。
+ * 单词的样子用单词卡那套字形画(src/chalk/glyphs:52 个字母的印刷体笔顺,按四线三格归一化):x 高 = 中格 120,
+ * b d h k l 与大写顶第一线、g j p q y 到第四线、t 的头在上格中间。原来用字体(Chalkboard SE),升部只到上格六成、降部只到下格一半,孩子照着描也矮。
+ * 不逐字母比,只叠着给孩子自己对:长单词横着压(坐标压,笔画粗细不变);有字形包里没有的字(数字、标点)整个词退回字体。
+ * 脚本是 ES5、没有反斜杠与反引号。
+ */
+import { GLYPHS, SPACE_ADVANCE } from "../../chalk/glyphs/index.js";
+import { EXTRA, GAP } from "../kid/letters.js";
+const r = (v) => Math.round(v * 1000) / 1000;
+/** 字形压成一张表:{ 字: [宽, [一笔: 起点 x, 起点 y, 段…]…] },段 = 'L' x y | 'A' cx cy rx ry a0 a1 | 'C' x1 y1 x2 y2 x y;x 高为 1,基线 y = 0,y 朝下 */
+function glyphTable() {
+    const out = {};
+    for (const [ch, g] of GLYPHS) {
+        out[ch] = [r(g.advance), g.strokes.map((st) => [r(st.start[0]), r(st.start[1]), ...st.segs.flatMap((s) => s.k === 'L' ? ['L', r(s.to[0]), r(s.to[1])]
+                    : s.k === 'A' ? ['A', r(s.cx), r(s.cy), r(s.rx), r(s.ry), s.a0, s.a1]
+                        : ['C', r(s.c1[0]), r(s.c1[1]), r(s.c2[0]), r(s.c2[1]), r(s.to[0]), r(s.to[1])])])];
+    }
+    for (const [ch, g] of Object.entries(EXTRA))
+        out[ch] = [g.advance, g.strokes.map((pts) => [pts[0][0], pts[0][1], ...pts.slice(1).flatMap(([x, y]) => ['L', x, y])])];
+    return out;
+}
+export const EN_BOX_JS = `
+  var EN_W = 2048, EN_H = 512, EN_LINES = [80, 200, 320, 440], EN_TOP = -192, EN_VH = 896, EN_VIEW = '0 -192 2048 896';
+  var enLines = function (sv) { var g = sv('g', { 'class': 'enl' }); for (var k = 0; k < EN_LINES.length; k++) g.append(sv('line', { x1: -EN_W, y1: EN_LINES[k], x2: 2 * EN_W, y2: EN_LINES[k], 'class': k === 2 ? 'base' : 'ln' })); return g; };
+  /** 字形(单词卡同一套):x 高 = 中格 120,基线在第三条线 */
+  var EN_GL = ${JSON.stringify(glyphTable())}, EN_GAP = ${GAP}, EN_SPACE = ${SPACE_ADVANCE}, EN_U = 120, EN_BASE = 320;
+  /** 一笔 → path 的 d(尺子坐标);x0 是这个字母的左边,sx 横着压(弧的 rx 跟着压,笔画粗细不变);弧一段不超过 90 度,省得大弧小弧分不清 */
+  var enStrokeD = function (st, x0, sx) {
+    var X = function (x) { return Math.round((x0 + x * EN_U * sx) * 10) / 10; }, Y = function (y) { return Math.round((EN_BASE + y * EN_U) * 10) / 10; };
+    var d = 'M' + X(st[0]) + ' ' + Y(st[1]), i = 2;
+    while (i < st.length) {
+      if (st[i] === 'L') { d += ' L' + X(st[i + 1]) + ' ' + Y(st[i + 2]); i += 3; continue; }
+      if (st[i] === 'C') { d += ' C' + X(st[i + 1]) + ' ' + Y(st[i + 2]) + ' ' + X(st[i + 3]) + ' ' + Y(st[i + 4]) + ' ' + X(st[i + 5]) + ' ' + Y(st[i + 6]); i += 7; continue; }
+      var cx = st[i + 1], cy = st[i + 2], rx = st[i + 3], ry = st[i + 4], a0 = st[i + 5], a1 = st[i + 6], n = Math.max(1, Math.ceil(Math.abs(a1 - a0) / 90));
+      for (var j = 1; j <= n; j++) { var a = (a0 + (a1 - a0) * j / n) * Math.PI / 180; d += ' A' + Math.round(rx * EN_U * sx * 10) / 10 + ' ' + Math.round(ry * EN_U * 10) / 10 + ' 0 0 ' + (a1 > a0 ? 1 : 0) + ' ' + X(cx + rx * Math.cos(a)) + ' ' + Y(cy + ry * Math.sin(a)); }
+      i += 7;
+    }
+    return d;
+  };
+  /** 一个单词多宽(x 高为 1,字间距同单词卡);有写不出的字 → -1 */
+  var enWidth = function (word) {
+    var x = 0, last = false;
+    for (var i = 0; i < word.length; i++) { var ch = word.charAt(i); if (ch === ' ') { x += EN_SPACE; last = false; continue; } var g = EN_GL[ch]; if (!g) return -1; x += g[0] + EN_GAP; last = true; }
+    return last ? x - EN_GAP : x;
+  };
+  /** 写不出的字(数字、标点):整个词用字体,长了压窄 */
+  var enWordFont = function (sv, word, cls, room) { var t = sv('text', { x: EN_W / 2, y: EN_BASE, 'text-anchor': 'middle', 'class': (cls || 'enw') + ' font', 'data-word': word }); if (word.length > 12 || word.length * 132 > room) { t.setAttribute('textLength', String(Math.round(Math.min(room, word.length * 132)))); t.setAttribute('lengthAdjust', 'spacingAndGlyphs'); } t.textContent = word; return t; };
+  /** 单词的样子(一个 g,一笔一条 path,居中);maxW = 最多多宽(写字屏只看得到尺子的一段),放不下就横着压 */
+  var enWord = function (sv, word, cls, maxW) {
+    var room = Math.min(EN_W - 160, maxW || EN_W), w = enWidth(word);
+    if (w < 0) return enWordFont(sv, word, cls, room);
+    var full = w * EN_U, sx = full > room ? room / full : 1, x = EN_W / 2 - full * sx / 2;
+    var g = sv('g', { 'class': cls || 'enw', 'data-word': word, 'data-x': String(Math.round(x)), 'data-w': String(Math.round(full * sx)) });
+    for (var i = 0; i < word.length; i++) {
+      var ch = word.charAt(i);
+      if (ch === ' ') { x += EN_SPACE * EN_U * sx; continue; }
+      var gl = EN_GL[ch];
+      for (var k = 0; k < gl[1].length; k++) g.append(sv('path', { d: enStrokeD(gl[1][k], x, sx) }));
+      x += (gl[0] + EN_GAP) * EN_U * sx;
+    }
+    return g;
+  };
+  /** 一小条四线格里的单词(再写一遍时上面照着看的那个):视窗只框住单词左右,四条线上下各留一点 */
+  var enModel = function (sv, word) {
+    var g = enWord(sv, word, 'enw solid'), x = Number(g.getAttribute('data-x') || 160), w = Number(g.getAttribute('data-w') || EN_W - 320);
+    var svg = sv('svg', { viewBox: (x - 60) + ' 40 ' + (w + 120) + ' 440', 'class': 'enm', 'aria-label': word, role: 'img' });
+    svg.append(enLines(sv), g);
+    return svg;
+  };
+`;
+export const EN_BOX_CSS = `
+  .enl line { stroke:#cfd8e3; stroke-width:6; }
+  .enl line.base { stroke:#e7a3a3; }
+  .enw { opacity:.3; }
+  .enw path { fill:none; stroke:#2f6fd6; stroke-width:30; stroke-linecap:round; stroke-linejoin:round; }
+  .enw.trace { opacity:.4; }
+  .enw.trace path { stroke:#9b978e; }
+  .enw.solid { opacity:1; }
+  .enw.font { font-size:240px; font-family:"Chalkboard SE","Comic Sans MS","Marker Felt",sans-serif; fill:#2f6fd6; }
+  .enw.font.trace { fill:#9b978e; }
+  .eni path { fill:none; stroke:#2b2b2b; stroke-width:22; stroke-linecap:round; stroke-linejoin:round; }
+`;

package/dist/ui/dictation/en-page.d.ts

@@ -0,0 +1 @@
+export declare const DICTATION_EN_PAGE: string;