cotutor 0.2.0 → 0.3.0

package/dist/ui/shared/favicon.js

@@ -0,0 +1,96 @@
+/**
+ * 网页图标(浏览器标签上那枚)与主屏幕图标:所有页面都是 cotutor 的 logo「一起教」双 C(几何在 logo.ts),
+ * 不跟着老师换(老师的头像缩到 16 px 认不出)。
+ * 网页图标:纸色圆底上墨色大 C、陶土色小 C(24 px 以下那一档),深色的标签栏上也看得见;SVG 给认 SVG 的浏览器,PNG 给 Safari 这些。
+ * 主屏幕图标(icon.ts):陶土色底、白线,同工作台页头那块;大号那一档,小 C 侧头;不透明(iOS 的图标不该有透明)。
+ */
+import { encodePng } from "./png.js";
+import { LOGO_BIG, LOGO_CLAY, LOGO_INK, LOGO_PAPER, LOGO_SMALL, logoBody, logoHit } from "./logo.js";
+/** 网页上引图标的两行。PNG 带 sizes 写在前面,Chrome 才不会放着 SVG 不用 */
+export function faviconLinks() {
+    return '<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">\n<link rel="icon" href="/favicon.svg" type="image/svg+xml">';
+}
+/** /favicon.svg、/favicon-32.png(/favicon.ico 给同一张 PNG);不是这几条路由 null */
+export function faviconResponse(path) {
+    if (path === '/favicon.svg')
+        return { body: Buffer.from(faviconSvg()), contentType: 'image/svg+xml; charset=utf-8' };
+    if (path === '/favicon-32.png' || path === '/favicon.ico')
+        return { body: faviconPng(), contentType: 'image/png' };
+    return null;
+}
+/** 两个 C 在纸色圆底里占多大(圆底半径 50,大 C 外沿 46.5 × 0.86 ≈ 40,四周留一圈纸色) */
+const TAB_MARK = 0.86;
+/** 主屏幕图标里两个 C 占多大:iOS 切圆角、安卓切圆都切不到 */
+const HOME_MARK = 0.62;
+/** 主屏幕图标上小 C 的白线淡一档 */
+const HOME_INNER = 0.75;
+export function faviconSvg() {
+    const k = TAB_MARK;
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="64" height="64"><circle cx="50" cy="50" r="50" fill="${LOGO_PAPER}"/>`
+        + `<g transform="translate(50 50) scale(${k}) translate(-50 -50)">${logoBody(LOGO_SMALL, { outer: LOGO_INK, inner: LOGO_CLAY })}</g></svg>`;
+}
+const rgb = (hex) => {
+    const v = parseInt(hex.slice(1), 16);
+    return [(v >> 16) & 0xff, (v >> 8) & 0xff, v & 0xff];
+};
+const mix = (a, b, t) => [0, 1, 2].map((i) => a[i] + (b[i] - a[i]) * t);
+const SS = 4;
+const pngCache = new Map();
+/** 网页图标的 PNG:纸色圆底,圆外透明 */
+export function faviconPng(size = 32) {
+    const n = Math.min(256, Math.max(16, Math.round(size)));
+    const hit = pngCache.get(n);
+    if (hit)
+        return hit;
+    const out = logoPng(n, { g: LOGO_SMALL, mark: TAB_MARK, outer: rgb(LOGO_INK), inner: rgb(LOGO_CLAY), disc: rgb(LOGO_PAPER), bg: null });
+    pngCache.set(n, out);
+    return out;
+}
+/** 主屏幕图标:陶土色底、白线,不透明;缓存在 icon.ts */
+export function homeScreenPng(n) {
+    const clay = rgb(LOGO_CLAY);
+    const white = [255, 255, 255];
+    return logoPng(n, { g: LOGO_BIG, mark: HOME_MARK, outer: white, inner: mix(clay, white, HOME_INNER), disc: null, bg: clay });
+}
+/** 100 见方的画布铺满 n×n;两个 C 按 mark 缩在中间;disc 给了就在半径 50 的圆里铺它;bg 给了就是不透明 RGB,不给是透明 RGBA */
+function logoPng(n, o) {
+    const colorAt = (u, v) => {
+        const hit = logoHit(50 + (u - 50) / o.mark, 50 + (v - 50) / o.mark, o.g);
+        if (hit)
+            return hit === 'out' ? o.outer : o.inner;
+        if (o.disc && Math.hypot(u - 50, v - 50) <= 50)
+            return o.disc;
+        return o.bg;
+    };
+    const ch = o.bg ? 3 : 4;
+    const unit = 100 / n;
+    const px = Buffer.alloc(n * n * ch);
+    for (let y = 0; y < n; y++) {
+        for (let x = 0; x < n; x++) {
+            let r = 0;
+            let g = 0;
+            let b = 0;
+            let k = 0;
+            for (let sy = 0; sy < SS; sy++) {
+                for (let sx = 0; sx < SS; sx++) {
+                    const c = colorAt((x + (sx + 0.5) / SS) * unit, (y + (sy + 0.5) / SS) * unit);
+                    if (!c)
+                        continue;
+                    r += c[0];
+                    g += c[1];
+                    b += c[2];
+                    k++;
+                }
+            }
+            const off = (y * n + x) * ch;
+            if (k) {
+                px[off] = Math.round(r / k);
+                px[off + 1] = Math.round(g / k);
+                px[off + 2] = Math.round(b / k);
+            }
+            if (!o.bg)
+                px[off + 3] = Math.round((255 * k) / (SS * SS));
+        }
+    }
+    return encodePng(n, px, ch);
+}

package/dist/ui/shared/icon.d.ts

@@ -0,0 +1,9 @@
+/** 给得出的尺寸:192 / 512 进 manifest;180 是 apple-touch-icon 的尺寸,页面不再引,路由留着给老的主屏幕快捷方式 */
+export declare const ICON_SIZES: readonly [180, 192, 512];
+/** 画一张 size×size 的图标 PNG(不透明) */
+export declare function appIconPng(size: number): Buffer;
+/** manifest:iOS 16.4+ 与安卓都按它装;apple-* meta 留着给老系统。家长板书页有自己的一份(start_url / scope 不同,加到主屏幕才分得开) */
+export declare function webManifest(title: string, opts?: {
+    startUrl?: string;
+    scope?: string;
+}): Record<string, unknown>;

package/dist/ui/shared/icon.js

@@ -0,0 +1,35 @@
+/**
+ * 主屏幕图标与 web app manifest:iPad / iPhone「添加到主屏幕」用(主屏幕从 manifest 取图标,页面不写 apple-touch-icon)。
+ * 图标是 cotutor 的双 C:陶土色底、白线,同工作台页头那块;不透明(iOS 的图标不该有透明)。
+ * 按尺寸现画(src/ui/shared/favicon.ts),同一尺寸只画一次,之后走缓存。
+ */
+import { homeScreenPng } from "./favicon.js";
+/** 给得出的尺寸:192 / 512 进 manifest;180 是 apple-touch-icon 的尺寸,页面不再引,路由留着给老的主屏幕快捷方式 */
+export const ICON_SIZES = [180, 192, 512];
+const cache = new Map();
+/** 画一张 size×size 的图标 PNG(不透明) */
+export function appIconPng(size) {
+    const n = Math.min(1024, Math.max(16, Math.round(size)));
+    const hit = cache.get(n);
+    if (hit)
+        return hit;
+    const out = homeScreenPng(n);
+    cache.set(n, out);
+    return out;
+}
+/** manifest:iOS 16.4+ 与安卓都按它装;apple-* meta 留着给老系统。家长板书页有自己的一份(start_url / scope 不同,加到主屏幕才分得开) */
+export function webManifest(title, opts = {}) {
+    const name = title.trim() || 'cotutor';
+    return {
+        name,
+        short_name: name,
+        start_url: opts.startUrl ?? '/',
+        scope: opts.scope ?? '/',
+        display: 'standalone',
+        orientation: 'any',
+        background_color: '#f6f4ee',
+        theme_color: '#f6f4ee',
+        lang: 'zh-CN',
+        icons: ICON_SIZES.filter((s) => s !== 180).map((s) => ({ src: `/icon-${s}.png`, sizes: `${s}x${s}`, type: 'image/png' })),
+    };
+}

package/dist/ui/shared/inline-lib.d.ts

@@ -0,0 +1 @@
+export declare function inlineScript(ts: URL): string;

package/dist/ui/shared/inline-lib.js

@@ -0,0 +1,28 @@
+/**
+ * 把一个纯函数文件内联进页面的脚本:仓库里是 .ts(剥类型),npm 包里是 dist 的 .js;去掉 export 与 import 行。
+ * kid-page 的板书(board/presentation.ts)、声音(runtime/delivery/player.ts)、photo-edit、reel,听写页的录像都走这里。
+ */
+import { readFileSync } from 'node:fs';
+import { stripTypeScriptTypes } from 'node:module';
+export function inlineScript(ts) {
+    let src;
+    try {
+        const text = readFileSync(ts, 'utf8');
+        // stripTypeScriptTypes 会发一条 ExperimentalWarning;这里只剥自己的文件,警告对用户没有信息量,压掉
+        const warn = process.emitWarning;
+        process.emitWarning = () => { };
+        try {
+            src = stripTypeScriptTypes(text);
+        }
+        finally {
+            process.emitWarning = warn;
+        }
+    }
+    catch {
+        src = readFileSync(new URL(ts.href.replace(/\.ts$/, '.js')), 'utf8');
+    }
+    return src
+        .replace(/^export (?=(?:async )?(?:function|const|let|class) )/gm, '')
+        .replace(/^export \{[^}]*\};?[ \t]*$/gm, '')
+        .replace(/^import [^\n]*$/gm, '');
+}

package/dist/ui/shared/logo.d.ts

@@ -0,0 +1,31 @@
+/**
+ * cotutor 的 logo「一起教」双 C的几何,只在这里定义一份:页面里的 SVG(src/ui/shared/brand.ts)、
+ * 网页图标与主屏幕图标(favicon.ts)都从这里画。100 见方:大 C 是家长、小 C 是老师,圆心都在 (50,50),开口都朝右 72°、圆头,
+ * 同老师头像的 C 形开口环。大号时小 C 侧头 28°;24 px 以下两圈加粗、小 C 半径收一点、摆正。
+ */
+export declare const LOGO_INK = "#2B2B2B";
+export declare const LOGO_CLAY = "#B4531F";
+export declare const LOGO_PAPER = "#FAF9F4";
+export interface LogoGeom {
+    outW: number;
+    inR: number;
+    inW: number;
+    tilt: number;
+}
+export declare const LOGO_BIG: LogoGeom;
+export declare const LOGO_SMALL: LogoGeom;
+export declare const OUT_R = 40;
+/** 画多大用哪一档 */
+export declare const logoGeom: (size: number) => LogoGeom;
+/** 描 80%、留 20% 的 dasharray */
+export declare const ringDash: (r: number) => string;
+export interface LogoColors {
+    outer: string;
+    inner: string;
+    /** 小 C 的不透明度(色块上白线时小 C 淡一档) */
+    innerOpacity?: number;
+}
+/** 两个 C(100 见方坐标):外层 g.ct-go / g.ct-gi 给页面里的动作挂,侧头在里面一层,动的时候不丢 */
+export declare function logoBody(g: LogoGeom, c: LogoColors): string;
+/** (u, v) 落在哪个 C 上(PNG 逐点画用):环身在弧里、或在两个圆头里 */
+export declare function logoHit(u: number, v: number, g: LogoGeom): 'out' | 'in' | null;

package/dist/ui/shared/logo.js

@@ -0,0 +1,43 @@
+/**
+ * cotutor 的 logo「一起教」双 C的几何,只在这里定义一份:页面里的 SVG(src/ui/shared/brand.ts)、
+ * 网页图标与主屏幕图标(favicon.ts)都从这里画。100 见方:大 C 是家长、小 C 是老师,圆心都在 (50,50),开口都朝右 72°、圆头,
+ * 同老师头像的 C 形开口环。大号时小 C 侧头 28°;24 px 以下两圈加粗、小 C 半径收一点、摆正。
+ */
+export const LOGO_INK = '#2B2B2B';
+export const LOGO_CLAY = '#B4531F';
+export const LOGO_PAPER = '#FAF9F4';
+export const LOGO_BIG = { outW: 10, inR: 19, inW: 9, tilt: 28 };
+export const LOGO_SMALL = { outW: 13, inR: 17, inW: 12, tilt: 0 };
+export const OUT_R = 40;
+/** 环从 36° 顺时针画 288°(SVG 角度,0 = 右、90 = 下),开口 72° 居中在右 */
+const A0 = 36;
+const SPAN = 288;
+/** 画多大用哪一档 */
+export const logoGeom = (size) => (size > 24 ? LOGO_BIG : LOGO_SMALL);
+/** 描 80%、留 20% 的 dasharray */
+export const ringDash = (r) => {
+    const c = 2 * Math.PI * r;
+    return `${((c * SPAN) / 360).toFixed(2)} ${c.toFixed(2)}`;
+};
+/** 两个 C(100 见方坐标):外层 g.ct-go / g.ct-gi 给页面里的动作挂,侧头在里面一层,动的时候不丢 */
+export function logoBody(g, c) {
+    const op = c.innerOpacity !== undefined && c.innerOpacity < 1 ? ` opacity="${c.innerOpacity}"` : '';
+    return `<g class="ct-go"><circle class="ct-out" cx="50" cy="50" r="${OUT_R}" fill="none" stroke="${c.outer}" stroke-width="${g.outW}" stroke-linecap="round" stroke-dasharray="${ringDash(OUT_R)}" transform="rotate(${A0} 50 50)"/></g>`
+        + `<g class="ct-gi"><g transform="rotate(${g.tilt} 50 50)"><circle class="ct-in" cx="50" cy="50" r="${g.inR}" fill="none" stroke="${c.inner}" stroke-width="${g.inW}" stroke-linecap="round" stroke-dasharray="${ringDash(g.inR)}" transform="rotate(${A0} 50 50)"${op}/></g></g>`;
+}
+/** (u, v) 落在哪个 C 上(PNG 逐点画用):环身在弧里、或在两个圆头里 */
+export function logoHit(u, v, g) {
+    const d = Math.hypot(u - 50, v - 50);
+    const deg = ((Math.atan2(v - 50, u - 50) * 180) / Math.PI + 360) % 360;
+    const on = (r, w, a0) => {
+        const half = w / 2;
+        if (Math.abs(d - r) <= half && (((deg - a0) % 360) + 360) % 360 <= SPAN)
+            return true;
+        return [a0, a0 + SPAN].some((a) => Math.hypot(u - 50 - r * Math.cos((a * Math.PI) / 180), v - 50 - r * Math.sin((a * Math.PI) / 180)) <= half);
+    };
+    if (on(OUT_R, g.outW, A0))
+        return 'out';
+    if (on(g.inR, g.inW, A0 + g.tilt))
+        return 'in';
+    return null;
+}

package/dist/ui/shared/page-dom.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 页面内联脚本共用的几样小工具:孩子端老师页(kid-page,家长端 / 录像 / 预览也是它)、工作台、家长端首页、口语课、听写的录像外壳,插在各页脚本里原来定义它们的地方。
+ * - $(选择器, 根):取一个元素。
+ * - h(tag, attrs, ...kids):建元素。attrs 里 class / html / on 特别处理,别的值是 null、undefined、false 不写,true 写成空串(布尔属性);
+ *   kids 摊平一层,null、undefined、false 跳过,不是节点的转成文字。
+ * - toast(字):#toast 底部提示,过 toastMs 收起;页面没有 #toast 就不做(工作台没有)。
+ * - api(方法, 路径, 体):JSON 进出、不走缓存;回的不是 JSON 给 null;不是 2xx 抛错,错带 status 与 body,信息取 body 的 message / error。
+ *   页面给了 apiSeen 就每个响应先给它看一眼(孩子端拿启动号判断服务重起过,见 kid-page 的 staleReload)。
+ * 听写那三页(dictation/page、en-page、parent-page)是 var 写法、h 认 text 不认 html、回的不是 JSON 给 {},自成一套,没并进来。
+ * 插进去的地方是模板字符串:这里不写反斜杠、反引号、美元加花括号。
+ */
+export declare function pageDomJs(toastMs: number): string;

package/dist/ui/shared/page-dom.js

@@ -0,0 +1,36 @@
+/**
+ * 页面内联脚本共用的几样小工具:孩子端老师页(kid-page,家长端 / 录像 / 预览也是它)、工作台、家长端首页、口语课、听写的录像外壳,插在各页脚本里原来定义它们的地方。
+ * - $(选择器, 根):取一个元素。
+ * - h(tag, attrs, ...kids):建元素。attrs 里 class / html / on 特别处理,别的值是 null、undefined、false 不写,true 写成空串(布尔属性);
+ *   kids 摊平一层,null、undefined、false 跳过,不是节点的转成文字。
+ * - toast(字):#toast 底部提示,过 toastMs 收起;页面没有 #toast 就不做(工作台没有)。
+ * - api(方法, 路径, 体):JSON 进出、不走缓存;回的不是 JSON 给 null;不是 2xx 抛错,错带 status 与 body,信息取 body 的 message / error。
+ *   页面给了 apiSeen 就每个响应先给它看一眼(孩子端拿启动号判断服务重起过,见 kid-page 的 staleReload)。
+ * 听写那三页(dictation/page、en-page、parent-page)是 var 写法、h 认 text 不认 html、回的不是 JSON 给 {},自成一套,没并进来。
+ * 插进去的地方是模板字符串:这里不写反斜杠、反引号、美元加花括号。
+ */
+export function pageDomJs(toastMs) {
+    return `  const $ = (s, root = document) => root.querySelector(s);
+  const h = (tag, attrs, ...kids) => {
+    const el = document.createElement(tag);
+    for (const [k, v] of Object.entries(attrs || {})) {
+      if (k === 'class') el.className = v;
+      else if (k === 'html') el.innerHTML = v;
+      else if (k === 'on') for (const [e, f] of Object.entries(v)) el.addEventListener(e, f);
+      else if (v !== undefined && v !== null && v !== false) el.setAttribute(k, v === true ? '' : v);
+    }
+    for (const k of kids.flat()) if (k !== null && k !== undefined && k !== false) el.append(k.nodeType ? k : document.createTextNode(String(k)));
+    return el;
+  };
+  let toastTimer = 0;
+  const toast = (text) => { const t = $('#toast'); if (!t) return; t.textContent = text; t.classList.add('on'); clearTimeout(toastTimer); toastTimer = setTimeout(() => t.classList.remove('on'), ${toastMs}); };
+  let apiSeen = null;
+  const api = async (method, path, body) => {
+    const r = await fetch(path, { method, headers: body ? { 'content-type': 'application/json' } : {}, body: body ? JSON.stringify(body) : undefined, cache: 'no-store' });
+    if (apiSeen) apiSeen(r);
+    const j = await r.json().catch(() => null);
+    if (!r.ok) { const e = new Error((j && (j.message || j.error)) || 'HTTP ' + r.status); e.status = r.status; e.body = j; throw e; }
+    return j;
+  };
+`;
+}

package/dist/ui/shared/png.d.ts

@@ -0,0 +1 @@
+export declare function encodePng(n: number, px: Buffer, channels?: 3 | 4): Buffer;

package/dist/ui/shared/png.js

@@ -0,0 +1,45 @@
+/** 最小 PNG 编码器(8 位真彩,可带 alpha;每行 filter 0,只用 node:zlib):主屏幕图标与网页图标现画用,不往仓里塞图片文件。 */
+import { deflateSync } from 'node:zlib';
+const CRC_TABLE = (() => {
+    const t = new Int32Array(256);
+    for (let i = 0; i < 256; i++) {
+        let c = i;
+        for (let k = 0; k < 8; k++)
+            c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+        t[i] = c;
+    }
+    return t;
+})();
+function crc32(buf) {
+    let c = -1;
+    for (let i = 0; i < buf.length; i++)
+        c = CRC_TABLE[(c ^ buf[i]) & 0xff] ^ (c >>> 8);
+    return (c ^ -1) >>> 0;
+}
+function chunk(type, data) {
+    const out = Buffer.alloc(data.length + 12);
+    out.writeUInt32BE(data.length, 0);
+    out.write(type, 4, 'ascii');
+    data.copy(out, 8);
+    out.writeUInt32BE(crc32(out.subarray(4, 8 + data.length)), 8 + data.length);
+    return out;
+}
+export function encodePng(n, px, channels = 3) {
+    const stride = n * channels;
+    const raw = Buffer.alloc(n * (stride + 1));
+    for (let y = 0; y < n; y++) {
+        raw[y * (stride + 1)] = 0;
+        px.copy(raw, y * (stride + 1) + 1, y * stride, (y + 1) * stride);
+    }
+    const ihdr = Buffer.alloc(13);
+    ihdr.writeUInt32BE(n, 0);
+    ihdr.writeUInt32BE(n, 4);
+    ihdr[8] = 8; // 位深
+    ihdr[9] = channels === 4 ? 6 : 2; // 真彩,6 = 带 alpha
+    return Buffer.concat([
+        Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+        chunk('IHDR', ihdr),
+        chunk('IDAT', deflateSync(raw, { level: 9 })),
+        chunk('IEND', Buffer.alloc(0)),
+    ]);
+}

package/dist/ui/shared/qr-svg.d.ts

@@ -0,0 +1,3 @@
+/** 二维码本身(连四格静区,白底黑格);装不下(地址长得离谱)返回 null */
+export declare function qrSvg(text: string): string | null;
+export declare function qrNotes(https: boolean): string[];

package/dist/ui/shared/qr-svg.js

@@ -0,0 +1,32 @@
+/**
+ * 扫码页(/qr)用的两样:二维码的内联 SVG,与码下面那几行说明(同一个 Wi-Fi、证书)。纯函数,字符串进字符串出。
+ * 不落文件:页面每次现画,标题、端口、HTTP / HTTPS 永远是当下的。
+ */
+import { encodeQR } from "./qr.js";
+/** 二维码本身(连四格静区,白底黑格);装不下(地址长得离谱)返回 null */
+export function qrSvg(text) {
+    const qr = encodeQR(text);
+    if (!qr)
+        return null;
+    const n = qr.size + 8;
+    let path = '';
+    for (let y = 0; y < qr.size; y++) {
+        for (let x = 0; x < qr.size; x++) {
+            if (!qr.modules[y][x])
+                continue;
+            // 同一行连着的黑格并成一段
+            let run = 1;
+            while (x + run < qr.size && qr.modules[y][x + run])
+                run++;
+            path += `M${x + 4} ${y + 4}h${run}v1h-${run}z`;
+            x += run - 1;
+        }
+    }
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${n} ${n}" shape-rendering="crispEdges" role="img" aria-label="二维码"><rect width="${n}" height="${n}" fill="#fff"/><path d="${path}" fill="#000"/></svg>`;
+}
+export function qrNotes(https) {
+    const wifi = 'iPad / iPhone 和这台电脑连同一个 Wi-Fi,用相机扫';
+    if (!https)
+        return [wifi, '现在是 HTTP:能看板书,按住说话用不了;要用就在电脑上跑 cotutor cert,再重启服务'];
+    return [wifi, '第一次用的设备先信任根证书:设置 › 通用 › 关于本机 › 证书信任设置(docs/iPad与iPhone.md)', '提示「不安全」:在电脑上重跑 cotutor cert,再重启服务'];
+}

package/dist/ui/shared/qr.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 二维码编码器:只做 serve 要的那一小块——字节模式、纠错 M、版本 1–10(够 200 来字节,一条局域网地址三十来字节落在版本 3)。
+ * 纯函数零依赖;装不下返回 null,不抛。矩阵 modules[y][x],true = 黑。不含静区,留白是画的人的事。
+ * 测试拿 node-qrcode 同一掩码的输出逐格对过(tests/qr.test.ts 里的样本)。
+ */
+export interface QrCode {
+    version: number;
+    size: number;
+    /** 选中的掩码 0–7 */
+    mask: number;
+    modules: boolean[][];
+}
+/** 编一条文本(UTF-8 字节模式)。forceMask 给测试对样本用;超过版本 10 的容量返回 null */
+export declare function encodeQR(text: string, forceMask?: number): QrCode | null;