cotutor 0.2.0 → 0.3.0

package/dist/ui/shared/qr.js

@@ -0,0 +1,281 @@
+/**
+ * 二维码编码器:只做 serve 要的那一小块——字节模式、纠错 M、版本 1–10(够 200 来字节,一条局域网地址三十来字节落在版本 3)。
+ * 纯函数零依赖;装不下返回 null,不抛。矩阵 modules[y][x],true = 黑。不含静区,留白是画的人的事。
+ * 测试拿 node-qrcode 同一掩码的输出逐格对过(tests/qr.test.ts 里的样本)。
+ */
+/** 纠错 M:每块的纠错码字数、块数(下标 = 版本) */
+const ECC_PER_BLOCK = [0, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26];
+const NUM_BLOCKS = [0, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5];
+const ALIGN = [[], [], [6, 18], [6, 22], [6, 26], [6, 30], [6, 34], [6, 22, 38], [6, 24, 42], [6, 26, 46], [6, 28, 50]];
+const MAX_VERSION = 10;
+/** 这一版能放多少码字(数据 + 纠错) */
+function rawCodewords(ver) {
+    let bits = (16 * ver + 128) * ver + 64;
+    if (ver >= 2) {
+        const n = Math.floor(ver / 7) + 2;
+        bits -= (25 * n - 10) * n - 55;
+        if (ver >= 7)
+            bits -= 36;
+    }
+    return Math.floor(bits / 8);
+}
+function dataCodewords(ver) {
+    return rawCodewords(ver) - ECC_PER_BLOCK[ver] * NUM_BLOCKS[ver];
+}
+/* ---------- Reed-Solomon,GF(256) 模 0x11D ---------- */
+function gfMul(a, b) {
+    let z = 0;
+    for (let i = 7; i >= 0; i--) {
+        z = (z << 1) ^ ((z >>> 7) * 0x11d);
+        z ^= ((b >>> i) & 1) * a;
+    }
+    return z;
+}
+function rsDivisor(degree) {
+    const out = new Array(degree).fill(0);
+    out[degree - 1] = 1;
+    let root = 1;
+    for (let i = 0; i < degree; i++) {
+        for (let j = 0; j < degree; j++) {
+            out[j] = gfMul(out[j], root);
+            if (j + 1 < degree)
+                out[j] ^= out[j + 1];
+        }
+        root = gfMul(root, 2);
+    }
+    return out;
+}
+function rsRemainder(data, divisor) {
+    const out = divisor.map(() => 0);
+    for (const b of data) {
+        const factor = b ^ out.shift();
+        out.push(0);
+        divisor.forEach((c, i) => (out[i] ^= gfMul(c, factor)));
+    }
+    return out;
+}
+/* ---------- 数据 → 码字 ---------- */
+function encodeData(bytes, ver) {
+    const bits = [];
+    const push = (val, len) => {
+        for (let i = len - 1; i >= 0; i--)
+            bits.push((val >>> i) & 1);
+    };
+    push(0b0100, 4);
+    push(bytes.length, ver <= 9 ? 8 : 16);
+    for (const b of bytes)
+        push(b, 8);
+    const cap = dataCodewords(ver) * 8;
+    push(0, Math.min(4, cap - bits.length));
+    push(0, (8 - (bits.length % 8)) % 8);
+    for (let pad = 0xec; bits.length < cap; pad ^= 0xec ^ 0x11)
+        push(pad, 8);
+    const out = [];
+    for (let i = 0; i < bits.length; i += 8)
+        out.push(bits.slice(i, i + 8).reduce((a, b) => (a << 1) | b, 0));
+    return out;
+}
+/** 分块、各算纠错、交错 */
+function addEcc(data, ver) {
+    const nBlocks = NUM_BLOCKS[ver];
+    const eccLen = ECC_PER_BLOCK[ver];
+    const raw = rawCodewords(ver);
+    const nShort = nBlocks - (raw % nBlocks);
+    const shortLen = Math.floor(raw / nBlocks) - eccLen;
+    const divisor = rsDivisor(eccLen);
+    const blocks = [];
+    const eccs = [];
+    for (let i = 0, k = 0; i < nBlocks; i++) {
+        const len = shortLen + (i < nShort ? 0 : 1);
+        const block = data.slice(k, k + len);
+        k += len;
+        blocks.push(block);
+        eccs.push(rsRemainder(block, divisor));
+    }
+    const out = [];
+    for (let i = 0; i <= shortLen; i++)
+        for (const b of blocks)
+            if (i < b.length)
+                out.push(b[i]);
+    for (let i = 0; i < eccLen; i++)
+        for (const e of eccs)
+            out.push(e[i]);
+    return out;
+}
+function newGrid(ver) {
+    const size = ver * 4 + 17;
+    const blank = () => Array.from({ length: size }, () => new Array(size).fill(false));
+    return { size, modules: blank(), isFunction: blank() };
+}
+function setFn(g, x, y, dark) {
+    if (x < 0 || y < 0 || x >= g.size || y >= g.size)
+        return;
+    g.modules[y][x] = dark;
+    g.isFunction[y][x] = true;
+}
+function drawFunctionPatterns(g, ver) {
+    const { size } = g;
+    for (let i = 0; i < size; i++) {
+        setFn(g, 6, i, i % 2 === 0);
+        setFn(g, i, 6, i % 2 === 0);
+    }
+    // 三个定位图形,连同一圈分隔
+    for (const [cx, cy] of [[3, 3], [size - 4, 3], [3, size - 4]]) {
+        for (let dy = -4; dy <= 4; dy++) {
+            for (let dx = -4; dx <= 4; dx++) {
+                const d = Math.max(Math.abs(dx), Math.abs(dy));
+                setFn(g, cx + dx, cy + dy, d !== 2 && d !== 4);
+            }
+        }
+    }
+    const pos = ALIGN[ver];
+    for (const ax of pos) {
+        for (const ay of pos) {
+            // 撞上定位图形的三个角不画
+            if ((ax === 6 && ay === 6) || (ax === 6 && ay === size - 7) || (ax === size - 7 && ay === 6))
+                continue;
+            for (let dy = -2; dy <= 2; dy++)
+                for (let dx = -2; dx <= 2; dx++)
+                    setFn(g, ax + dx, ay + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+        }
+    }
+    drawFormat(g, 0); // 先占位,掩码定了再画真的
+    if (ver >= 7) {
+        let rem = ver;
+        for (let i = 0; i < 12; i++)
+            rem = (rem << 1) ^ ((rem >>> 11) * 0x1f25);
+        const bits = (ver << 12) | rem;
+        for (let i = 0; i < 18; i++) {
+            const dark = ((bits >>> i) & 1) === 1;
+            const a = size - 11 + (i % 3);
+            const b = Math.floor(i / 3);
+            setFn(g, a, b, dark);
+            setFn(g, b, a, dark);
+        }
+    }
+}
+function drawFormat(g, mask) {
+    const { size } = g;
+    const data = mask; // 纠错 M 的两位是 00
+    let rem = data;
+    for (let i = 0; i < 10; i++)
+        rem = (rem << 1) ^ ((rem >>> 9) * 0x537);
+    const bits = ((data << 10) | rem) ^ 0x5412;
+    const bit = (i) => ((bits >>> i) & 1) === 1;
+    for (let i = 0; i <= 5; i++)
+        setFn(g, 8, i, bit(i));
+    setFn(g, 8, 7, bit(6));
+    setFn(g, 8, 8, bit(7));
+    setFn(g, 7, 8, bit(8));
+    for (let i = 9; i < 15; i++)
+        setFn(g, 14 - i, 8, bit(i));
+    for (let i = 0; i < 8; i++)
+        setFn(g, size - 1 - i, 8, bit(i));
+    for (let i = 8; i < 15; i++)
+        setFn(g, 8, size - 15 + i, bit(i));
+    setFn(g, 8, size - 8, true);
+}
+function drawCodewords(g, data) {
+    const { size } = g;
+    let i = 0;
+    for (let right = size - 1; right >= 1; right -= 2) {
+        if (right === 6)
+            right = 5;
+        for (let vert = 0; vert < size; vert++) {
+            for (let j = 0; j < 2; j++) {
+                const x = right - j;
+                const upward = ((right + 1) & 2) === 0;
+                const y = upward ? size - 1 - vert : vert;
+                if (g.isFunction[y][x] || i >= data.length * 8)
+                    continue;
+                g.modules[y][x] = ((data[i >>> 3] >>> (7 - (i & 7))) & 1) === 1;
+                i++;
+            }
+        }
+    }
+}
+const MASKS = [
+    (x, y) => (x + y) % 2 === 0,
+    (_, y) => y % 2 === 0,
+    (x) => x % 3 === 0,
+    (x, y) => (x + y) % 3 === 0,
+    (x, y) => (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0,
+    (x, y) => ((x * y) % 2) + ((x * y) % 3) === 0,
+    (x, y) => (((x * y) % 2) + ((x * y) % 3)) % 2 === 0,
+    (x, y) => (((x + y) % 2) + ((x * y) % 3)) % 2 === 0,
+];
+/** 异或,再施一次即还原 */
+function applyMask(g, mask) {
+    for (let y = 0; y < g.size; y++)
+        for (let x = 0; x < g.size; x++)
+            if (!g.isFunction[y][x] && MASKS[mask](x, y))
+                g.modules[y][x] = !g.modules[y][x];
+}
+/** 规范的四条惩罚分,越低越好扫 */
+function penalty(g) {
+    const { size, modules: m } = g;
+    let score = 0;
+    let dark = 0;
+    const lines = [];
+    for (let i = 0; i < size; i++) {
+        lines.push(m[i]);
+        lines.push(m.map((row) => row[i]));
+    }
+    for (const line of lines) {
+        // 一:同色连续 5 格起
+        for (let i = 0, run = 1; i < size; i++, run++) {
+            if (i + 1 < size && line[i + 1] === line[i])
+                continue;
+            if (run >= 5)
+                score += run - 2;
+            run = 0;
+        }
+        // 三:像定位图形的 1011101,一侧带四格白
+        for (let i = 0; i + 11 <= size; i++) {
+            const s = line.slice(i, i + 11).map((b) => (b ? '1' : '0')).join('');
+            if (s === '10111010000' || s === '00001011101')
+                score += 40;
+        }
+    }
+    for (let y = 0; y < size; y++) {
+        for (let x = 0; x < size; x++) {
+            if (m[y][x])
+                dark++;
+            // 二:2×2 同色
+            if (x + 1 < size && y + 1 < size && m[y][x] === m[y][x + 1] && m[y][x] === m[y + 1][x] && m[y][x] === m[y + 1][x + 1])
+                score += 3;
+        }
+    }
+    // 四:黑白比偏离一半
+    score += Math.floor(Math.abs((dark * 100) / (size * size) - 50) / 5) * 10;
+    return score;
+}
+/** 编一条文本(UTF-8 字节模式)。forceMask 给测试对样本用;超过版本 10 的容量返回 null */
+export function encodeQR(text, forceMask) {
+    const bytes = new TextEncoder().encode(text);
+    let ver = 1;
+    while (ver <= MAX_VERSION && 4 + (ver <= 9 ? 8 : 16) + bytes.length * 8 > dataCodewords(ver) * 8)
+        ver++;
+    if (ver > MAX_VERSION)
+        return null;
+    const g = newGrid(ver);
+    drawFunctionPatterns(g, ver);
+    drawCodewords(g, addEcc(encodeData(bytes, ver), ver));
+    let mask = forceMask ?? -1;
+    if (!(Number.isInteger(mask) && mask >= 0 && mask <= 7)) {
+        let best = Infinity;
+        for (let k = 0; k < 8; k++) {
+            applyMask(g, k);
+            drawFormat(g, k);
+            const p = penalty(g);
+            if (p < best) {
+                best = p;
+                mask = k;
+            }
+            applyMask(g, k);
+        }
+    }
+    applyMask(g, mask);
+    drawFormat(g, mask);
+    return { version: ver, size: g.size, mask, modules: g.modules };
+}

package/dist/ui/shared/reel-dock.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 录像栏与孩子的屏幕:录像 = 上半孩子的屏幕(iframe 里孩子端页面的录像模式)+ 下半这一条录像栏。
+ * 录像栏不认场景,只经 iframe 交过来的把手说话;话题(kid-page.ts 的 /reel)、听写(dictation/ 的 /dictation?reel=)都用这一份。
+ *
+ * 把手(iframe 起来后 parent.cotutorReelReady(把手, {size}),同源直接调):
+ *   get()        → {p, total, wall, playing, speed, real, cap: {text, cls}, size?, stale?};p、total 是录像里的毫秒(跳过空白开着时是压过的),wall 是这一刻的墙钟
+ *   marks()      → [{kind, label, p, pTo?}] 进度条上的点(kind 当类名)
+ *   events()     → [{p, kind, chip, text}] 经过,一条一行
+ *   chapters?()  → [{p, title, end?}] 章(话题一轮、听写一个词);进度条上断开一点,说明那行左边写在哪一章;
+ *                  end = 章尾(上一章 / 下一章落在这里),没给就是下一章开头之前,最后一章是末尾
+ *   speeds?      → 倍速轮哪几档,缺省 1 / 1.5 / 2
+ *   play(on) / seek(p) / drag(p) / real(on) / speed(x) / stop()
+ * open(把手, {exit, toast, title}):title 写在左上角「退出录像」旁边(是谁的哪件事);开着时整页深底(html.rl-dark)。
+ *
+ * 时间和视频一样:左下角是放到哪 / 一共要放多久,下面一行小字是当时几点;经过里每条写录像里的位置。
+ * 上半占满宽度:按孩子屏幕的尺寸等比缩到铺满,窗口不够高才按高度缩;录像栏能收成一行(播放、细进度条、时间),顶上的小横条点或上下拉。
+ * 下面三段插进页面:CSS 进 <style>,HTML 进页面,JS 进内联脚本(页面要先有 --paper --ink --dim --line --accent --grey --purple --purple-ink --ok --ok-ink;
+ * 脚本里没有反斜杠与反引号,插进模板字符串也照样)。
+ */
+export declare const REEL_DOCK_CSS = "\n  /* \u5F55\u50CF:\u4E0A\u534A\u5B69\u5B50\u7684\u5C4F\u5E55(\u5360\u6EE1\u5BBD\u5EA6,\u4E0D\u753B\u8BBE\u5907\u6846),\u4E0B\u534A\u5F55\u50CF\u680F */\n  #rl-screen { position:relative; flex:1; min-height:0; overflow:hidden; background:var(--paper); }\n  #rl-screen[hidden] { display:none; }\n  #rl-frame { position:absolute; left:0; top:0; width:1180px; height:820px; border:0; transform-origin:0 0; background:var(--paper); }\n  #reel { position:relative; padding:14px 16px calc(env(safe-area-inset-bottom) + 12px); display:flex; flex-direction:column; gap:4px; border-top:1px solid var(--line); background:var(--paper); }\n  #reel[hidden] { display:none; }\n  #rl-grab { position:absolute; left:50%; top:0; width:72px; height:16px; margin-left:-36px; padding:0; border:0; background:transparent; touch-action:none; cursor:pointer; }\n  #rl-grab i { display:block; width:40px; height:5px; margin:5px auto 0; border-radius:3px; background:var(--line); }\n  .rl-caprow { display:flex; align-items:center; gap:8px; min-height:24px; touch-action:none; }\n  #rl-chap { flex:none; max-width:40%; font-size:12px; color:var(--dim); border:1px solid var(--line); border-radius:6px; padding:0 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }\n  #rl-chap[hidden] { display:none; }\n  #rl-cap { flex:1; min-width:0; min-height:22px; font-size:15px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }\n  #rl-cap.gap { color:var(--dim); font-weight:500; }\n  #rl-cap.kid { color:var(--accent); }\n  #rl-cap.miss { color:#b3541e; }\n  #rl-more { flex:none; font-size:13px; color:var(--dim); border:1px solid var(--line); border-radius:12px; padding:2px 10px; background:#fff; }\n  #rl-log { max-height:min(30vh, 260px); overflow-y:auto; border:1px solid var(--line); border-radius:12px; background:#fff; overscroll-behavior:contain; position:relative; }\n  #rl-log[hidden] { display:none; }\n  #rl-log ol { list-style:none; margin:0; padding:4px 0; }\n  #rl-log li { display:grid; grid-template-columns:62px 68px minmax(0,1fr); gap:8px; align-items:baseline; padding:5px 12px; font-size:14px; line-height:1.45; cursor:pointer; }\n  #rl-log li .rl-c { font-variant-numeric:tabular-nums; color:var(--dim); font-size:12px; }\n  #rl-log li .rl-k { font-size:12px; border-radius:6px; padding:0 6px; text-align:center; white-space:nowrap; background:var(--grey); color:var(--dim); }\n  #rl-log li .rl-k.said { background:#fde3d2; color:#9a4318; }\n  #rl-log li .rl-k.card { background:var(--purple); color:var(--purple-ink); }\n  #rl-log li .rl-k.miss, #rl-log li .rl-k.err { background:#fbe0d6; color:#b3541e; }\n  #rl-log li .rl-k.tail { background:var(--ok); color:var(--ok-ink); }\n  #rl-log li .rl-k.hint { background:#fff1c7; color:#7a5b12; }\n  #rl-log li .rl-t { min-width:0; overflow-wrap:anywhere; }\n  #rl-log li.fut { opacity:.45; }\n  #rl-log li.cur { background:#fdeee4; }\n  @media (max-width:600px) { #rl-log li { grid-template-columns:52px minmax(0,1fr); } #rl-log li .rl-k { display:none; } }\n  /* \u8FDB\u5EA6\u6761:\u4E0A\u9762\u4E00\u6392\u70B9,\u7AE0\u4E0E\u7AE0\u4E4B\u95F4\u65AD\u5F00\u4E00\u70B9 */\n  .rl-trow { display:flex; align-items:center; gap:10px; }\n  .rl-track { position:relative; flex:1; min-width:0; height:34px; }\n  #rl-seek { position:absolute; left:0; right:0; bottom:0; width:100%; height:24px; margin:0; accent-color:var(--accent); background:none; }\n  #rl-marks, #rl-chaps { position:absolute; left:8px; right:8px; top:0; height:10px; }\n  #rl-chaps { top:auto; bottom:7px; height:10px; pointer-events:none; z-index:1; }\n  #rl-chaps i { position:absolute; top:0; width:3px; height:10px; margin-left:-1.5px; background:var(--paper); }\n  #rl-marks i { position:absolute; top:0; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; cursor:pointer; background:var(--accent); }\n  #rl-marks i::before { content:\"\"; position:absolute; inset:-8px; }\n  #rl-marks i.said { background:var(--accent); }\n  #rl-marks i.card { background:#2fa36b; }\n  #rl-marks i.ask { background:#5b3d86; border-radius:2px; transform:scale(.8); }\n  #rl-marks i.error, #rl-marks i.rv { background:#b3541e; border-radius:2px; }\n  #rl-marks i.lecture { background:#c95a22; border-radius:2px; }\n  #rl-marks i.ink { background:#2f6fd6; }\n  #rl-marks i.hint { background:#d9a520; }\n  #rl-marks i.erase { background:#b9b4a8; width:7px; height:7px; margin-left:-3.5px; top:1px; }\n  /* \u6309\u4F4F\u8BF4\u8BDD\u6CA1\u53D1\u51FA\u53BB:\u6BCF\u6B21\u4E00\u4E2A\u6DE1\u70B9;\u8FDE\u7740\u51E0\u6B21\u7684\u4E00\u4E32\u662F\u4E00\u6761\u6A59\u8272\u7684\u5E26 */\n  #rl-marks i.miss { background:#b9b4a8; width:7px; height:7px; margin-left:-3.5px; top:1px; }\n  #rl-marks i.misses { background:#e8743b40; border:1px solid #e8743b; border-radius:5px; height:9px; margin-left:-3px; box-sizing:border-box; }\n  .rl-row { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--dim); }\n  .rl-when { flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:1px; line-height:1.2; }\n  #rl-play, #rl-mplay { flex:none; width:44px; height:44px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; border:0; }\n  #rl-clock, #rl-mclock { font-variant-numeric:tabular-nums; color:var(--ink); font-size:15px; white-space:nowrap; }\n  .rl-subrow { display:flex; align-items:center; gap:4px; }\n  #rl-sub { font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap; }\n  #rl-ver { font-size:11px; border:1px solid var(--line); border-radius:7px; padding:0 6px; background:#fff; white-space:nowrap; color:var(--dim); }\n  #rl-ver[hidden], #rl-x[hidden] { display:none; }\n  .rl-sp { flex:1; }\n  /* \u624B\u673A\u4E0A\u63A7\u5236\u884C\u653E\u4E0D\u4E0B\u4E00\u884C:\u5F00\u5173\u3001\u500D\u901F\u3001\u6536\u8D77\u3001\u9000\u51FA\u6298\u5230\u7B2C\u4E8C\u884C,\u9760\u53F3 */\n  @media (max-width:600px) { .rl-row { flex-wrap:wrap; row-gap:6px; } .rl-row .rl-sp { flex:1 0 100%; height:0; } .rl-row .rl-sw { margin-left:auto; } }\n  .rl-row .tx, .rl-trow .tx { flex:none; height:34px; padding:0 11px; border-radius:17px; white-space:nowrap; border:1px solid var(--line); background:#fff; font-size:14px; color:var(--ink); }\n  .rl-row .ic, .rl-trow .ic { flex:none; width:34px; height:34px; border-radius:17px; border:1px solid var(--line); background:#fff; color:var(--dim); display:grid; place-items:center; padding:0; }\n  /* \u300C\u8DF3\u8FC7\u7A7A\u767D\u300D\u662F\u4E2A\u5F00\u5173(\u4E3B\u6D41\u64AD\u653E\u5668\u7684\u300C\u8DF3\u8FC7\u9759\u97F3\u300D\u90FD\u8FD9\u6837):\u6ED1\u5757\u5728\u53F3\u3001\u5E95\u8272\u586B\u6EE1 = \u5F00\u7740 */\n  .rl-sw { flex:none; display:inline-flex; align-items:center; gap:6px; height:34px; font-size:14px; color:var(--ink); cursor:pointer; white-space:nowrap; }\n  .rl-sw input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }\n  .rl-sw i { position:relative; flex:none; width:36px; height:22px; border-radius:11px; background:var(--line); transition:background .15s; }\n  .rl-sw i::after { content:\"\"; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #00000033; transition:transform .15s; }\n  .rl-sw input:checked + i { background:var(--accent); }\n  .rl-sw input:checked + i::after { transform:translateX(14px); }\n  .rl-sw input:focus-visible + i { outline:2px solid var(--accent); outline-offset:2px; }\n  /* \u6536\u8D77:\u53EA\u5269\u4E00\u884C(\u64AD\u653E\u3001\u7EC6\u8FDB\u5EA6\u6761\u3001\u65F6\u95F4\u3001\u5C55\u5F00) */\n  .rl-mini { display:none !important; }\n  #reel.min { padding-top:12px; gap:0; }\n  #reel.min .rl-caprow, #reel.min #rl-log, #reel.min .rl-row { display:none; }\n  #reel.min .rl-mini { display:grid !important; }\n  #reel.min #rl-mclock.rl-mini { display:block !important; font-size:14px; }\n  #reel.min #rl-mplay { width:34px; height:34px; }\n  #reel.min #rl-marks i { width:6px; height:6px; margin-left:-3px; }\n  /* \u6DF1\u5E95:\u5F55\u50CF\u5F00\u7740\u65F6\u6574\u9875\u6DF1\u8272,\u5B69\u5B50\u7684\u5C4F\u5E55\u5706\u89D2\u5D4C\u5728\u4E2D\u95F4,\u5F55\u50CF\u680F\u5728\u6DF1\u5E95\u4E0A;\u300C\u9000\u51FA\u5F55\u50CF\u300D\u5728\u5DE6\u4E0A\u89D2,\u662F\u6574\u9875\u6700\u4EAE\u7684\u4E00\u9897 */\n  #rl-top { display:none; }\n  html.rl-dark, html.rl-dark body { background:#1c1c1c; }\n  html.rl-dark #rl-top { position:fixed; z-index:6; top:calc(env(safe-area-inset-top) + 10px); left:16px; right:16px; height:48px; display:flex; align-items:center; gap:12px; color:#f4f2ec; pointer-events:none; }\n  html.rl-dark #rl-top > * { pointer-events:auto; }\n  html.rl-dark #rl-x { flex:none; height:48px; padding:0 20px 0 16px; border:0; border-radius:24px; background:#fff; color:#1c1c1c; font-size:17px; font-weight:700; display:inline-flex; align-items:center; gap:8px; cursor:pointer; }\n  html.rl-dark #rl-x[hidden] { display:none; }\n  #rl-ttl { flex:1; min-width:0; font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }\n  #rl-only { flex:none; font-size:12px; color:#a8a49c; border:1px solid #4a4845; border-radius:6px; padding:2px 8px; white-space:nowrap; }\n  @media (max-width:600px) { #rl-only { display:none; } }\n  html.rl-dark #rl-screen { margin:calc(env(safe-area-inset-top) + 68px) 16px 0; border-radius:16px; box-shadow:0 0 0 1px #3a3835; }\n  html.rl-dark #reel { background:transparent; border-top:0; color:#f4f2ec; }\n  html.rl-dark #rl-grab i { background:#4a4845; }\n  html.rl-dark #rl-cap { color:#f4f2ec; }\n  html.rl-dark #rl-cap.gap { color:#c9c5bc; }\n  html.rl-dark #rl-cap.kid { color:#f0b48a; }\n  html.rl-dark #rl-cap.miss { color:#f0a080; }\n  html.rl-dark #rl-chap { color:#1c1c1c; background:#f0b48a; border-color:#f0b48a; font-weight:600; }\n  html.rl-dark #rl-more, html.rl-dark .rl-row .tx, html.rl-dark .rl-trow .tx, html.rl-dark .rl-row .ic, html.rl-dark .rl-trow .ic, html.rl-dark #rl-ver { background:transparent; border-color:#4a4845; color:#f4f2ec; }\n  html.rl-dark #rl-log { background:#262523; border-color:#3a3835; color:#f4f2ec; }\n  html.rl-dark #rl-log li .rl-c { color:#a8a49c; }\n  html.rl-dark #rl-log li.cur { background:#3a2c22; }\n  html.rl-dark #rl-play, html.rl-dark #rl-mplay { background:#fff; color:#1c1c1c; }\n  html.rl-dark #rl-clock, html.rl-dark #rl-mclock, html.rl-dark .rl-sw { color:#f4f2ec; }\n  html.rl-dark #rl-sub { color:#a8a49c; }\n  html.rl-dark .rl-sw i { background:#4a4845; }\n  html.rl-dark .rl-sw input:checked + i { background:var(--accent); }\n  html.rl-dark #rl-chaps i { background:#1c1c1c; }\n  /* \u4E0A\u4E00\u7AE0 / \u4E0B\u4E00\u7AE0:\u64AD\u653E\u952E\u4E24\u8FB9 */\n  .rl-row .rl-jb { width:40px; height:40px; border-radius:20px; color:var(--ink); }\n  .rl-row .rl-jb:disabled { opacity:.3; }\n  html.rl-dark .rl-row .rl-jb { color:#f4f2ec; }\n  #rl-keyb { flex:none; height:32px; padding:0 12px; border:1px solid #4a4845; border-radius:16px; background:transparent; color:#f4f2ec; font-size:13px; cursor:pointer; white-space:nowrap; }\n  #rl-keyb kbd, #rl-keys kbd { font-family:ui-monospace,Menlo,monospace; font-size:12px; border:1px solid #9b978e; border-radius:4px; padding:0 4px; }\n  @media (max-width:600px), (hover:none) and (pointer:coarse) { #rl-keyb { display:none; } }\n  /* \u5FEB\u6377\u952E\u90A3\u5F20\u8868 */\n  #rl-keys { position:fixed; inset:0; z-index:20; background:#000a; display:grid; place-items:center; }\n  #rl-keys[hidden] { display:none; }\n  #rl-keys .pn { width:min(860px, calc(100% - 32px)); max-height:calc(100% - 32px); overflow:auto; box-sizing:border-box; border-radius:20px; background:#f6f5f1; color:#2b2b2b; padding:22px 26px; display:flex; flex-direction:column; gap:16px; }\n  #rl-keys .hd { display:flex; align-items:center; }\n  #rl-keys .hd b { flex:1; font-size:19px; }\n  #rl-keys .hd button { width:36px; height:36px; border:0; border-radius:50%; background:#e9e6de; color:#2b2b2b; cursor:pointer; }\n  #rl-keys .cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:24px; }\n  #rl-keys dl { margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 16px; align-items:center; font-size:15px; }\n  #rl-keys dt { white-space:nowrap; font-size:13px; color:#6b675f; }\n  #rl-keys dd { margin:0; }\n  #rl-keys kbd { display:inline-block; min-width:18px; text-align:center; background:#fff; border-color:#d9d5cc; box-shadow:0 2px 0 #d9d5cc; padding:3px 6px; color:#2b2b2b; }\n  #rl-keys .mk { display:flex; flex-direction:column; gap:12px; font-size:13px; color:#6b675f; }\n  #rl-keys .mk b { color:#2b2b2b; font-size:14px; }\n  #rl-keys .mk p { margin:0; line-height:1.6; }\n  /* \u8FDB\u5EA6\u6761:\u6DF1\u8272\u7684\u8F68\u9053,\u8D70\u8FC7\u7684\u90A3\u6BB5\u6A59\u8272(--fill \u7531\u811A\u672C\u8DDF\u7740\u5199),\u767D\u8272\u5706\u5934 */\n  html.rl-dark #rl-seek { -webkit-appearance:none; appearance:none; }\n  html.rl-dark #rl-seek::-webkit-slider-runnable-track { height:6px; border-radius:3px; background:linear-gradient(to right, var(--accent) var(--fill, 0%), #3a3835 var(--fill, 0%)); }\n  html.rl-dark #rl-seek::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; margin-top:-6px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px #1c1c1c; }\n  html.rl-dark #rl-seek::-moz-range-track { height:6px; border-radius:3px; background:#3a3835; }\n  html.rl-dark #rl-seek::-moz-range-progress { height:6px; border-radius:3px; background:var(--accent); }\n  html.rl-dark #rl-seek::-moz-range-thumb { width:18px; height:18px; border:0; border-radius:50%; background:#fff; box-shadow:0 0 0 3px #1c1c1c; }\n";
+export declare const REEL_DOCK_HTML = "<div id=\"rl-top\"><button id=\"rl-x\" type=\"button\" hidden aria-label=\"\u9000\u51FA\u5F55\u50CF\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\"></path></svg>\u9000\u51FA\u5F55\u50CF</button><span id=\"rl-ttl\"></span><span id=\"rl-only\">\u5B69\u5B50\u7684\u5C4F\u5E55 \u00B7 \u53EA\u770B,\u70B9\u4E0D\u52A8</span><button id=\"rl-keyb\" type=\"button\" aria-haspopup=\"dialog\">\u5FEB\u6377\u952E <kbd>?</kbd></button></div>\n    <div id=\"rl-keys\" hidden role=\"dialog\" aria-label=\"\u5FEB\u6377\u952E\"><div class=\"pn\"><div class=\"hd\"><b>\u5FEB\u6377\u952E</b><button id=\"rl-keys-x\" type=\"button\" aria-label=\"\u5173\u4E0A\">\u2715</button></div><div class=\"cols\"><dl><dt><kbd>\u7A7A\u683C</kbd> \u6216 <kbd>K</kbd></dt><dd>\u653E / \u505C</dd><dt><kbd>\u21E7 \u2190</kbd> \u6216 <kbd>[</kbd></dt><dd>\u4E0A\u4E00\u7AE0,\u843D\u5728\u90A3\u4E00\u7AE0\u8BB2\u5B8C</dd><dt><kbd>\u21E7 \u2192</kbd> \u6216 <kbd>]</kbd></dt><dd>\u4E0B\u4E00\u7AE0,\u843D\u5728\u90A3\u4E00\u7AE0\u8BB2\u5B8C</dd><dt><kbd>\u2190</kbd> <kbd>\u2192</kbd></dt><dd>\u5F80\u56DE / \u5F80\u524D 5 \u79D2</dd><dt><kbd>Home</kbd> <kbd>End</kbd></dt><dd>\u5F00\u5934 / \u6700\u540E\u4E00\u5E27</dd><dt><kbd>S</kbd></dt><dd>\u8DF3\u8FC7\u7A7A\u767D \u5F00 / \u5173</dd><dt><kbd>\u21E7 ,</kbd> <kbd>\u21E7 .</kbd></dt><dd>\u6162\u4E00\u6863 / \u5FEB\u4E00\u6863</dd><dt><kbd>E</kbd></dt><dd>\u7ECF\u8FC7 \u5C55\u5F00 / \u6536\u8D77</dd><dt><kbd>Esc</kbd></dt><dd>\u9000\u51FA\u5F55\u50CF</dd><dt><kbd>?</kbd></dt><dd>\u8FD9\u4E00\u5F20</dd></dl><div class=\"mk\"><b>\u8033\u673A\u3001\u952E\u76D8\u4E0A\u7684\u5A92\u4F53\u952E\u3001iPad \u63A7\u5236\u4E2D\u5FC3</b><dl><dt><kbd>\u23EF</kbd></dt><dd>\u653E / \u505C</dd><dt><kbd>\u23EE</kbd></dt><dd>\u4E0A\u4E00\u7AE0(\u7AE0\u5C3E)</dd><dt><kbd>\u23ED</kbd></dt><dd>\u4E0B\u4E00\u7AE0(\u7AE0\u5C3E)</dd></dl><p>iPad \u53EA\u5728\u5F55\u50CF\u771F\u5728\u51FA\u58F0\u65F6\u624D\u628A\u8FD9\u51E0\u4E2A\u952E\u4EA4\u7ED9\u8FD9\u4E00\u9875,\u505C\u7740\u6216\u653E\u5230\u6CA1\u58F0\u97F3\u7684\u5730\u65B9\u65F6\u53EF\u80FD\u4E0D\u8BA4\u3002\u5728\u5B69\u5B50\u7684\u5C4F\u5E55\u91CC\u70B9\u8FC7\u4E5F\u7167\u6837\u8BA4;\u5728\u8F93\u5165\u6846\u91CC\u6253\u5B57\u65F6\u4E0D\u63A5\u7BA1\u3002</p></div></div></div></div>\n    <div id=\"reel\" hidden>\n      <button id=\"rl-grab\" type=\"button\" aria-label=\"\u6536\u8D77\u5F55\u50CF\u680F\" aria-expanded=\"true\"><i></i></button>\n      <div id=\"rl-log\" hidden><ol></ol></div>\n      <div class=\"rl-caprow\" id=\"rl-caprow\"><span id=\"rl-chap\" hidden></span><div id=\"rl-cap\"></div><button id=\"rl-more\" type=\"button\" aria-expanded=\"false\">\u7ECF\u8FC7 \u25B4</button></div>\n      <div class=\"rl-trow\"><button class=\"rl-mini\" id=\"rl-mplay\" type=\"button\" aria-label=\"\u64AD\u653E\"></button><div class=\"rl-track\"><div id=\"rl-marks\"></div><div id=\"rl-chaps\"></div><input id=\"rl-seek\" type=\"range\" min=\"0\" max=\"1000\" step=\"100\" value=\"0\" aria-label=\"\u5F55\u50CF\u8FDB\u5EA6\"></div><span class=\"rl-mini\" id=\"rl-mclock\"></span><button class=\"rl-mini ic\" id=\"rl-unfold\" type=\"button\" aria-label=\"\u5C55\u5F00\u5F55\u50CF\u680F\"></button></div>\n      <div class=\"rl-row\"><button class=\"ic rl-jb\" id=\"rl-prev\" type=\"button\" aria-label=\"\u4E0A\u4E00\u7AE0(\u843D\u5728\u90A3\u4E00\u7AE0\u8BB2\u5B8C)\" title=\"\u4E0A\u4E00\u7AE0 \u21E7\u2190\"></button><button id=\"rl-play\" type=\"button\" aria-label=\"\u64AD\u653E\"></button><button class=\"ic rl-jb\" id=\"rl-next\" type=\"button\" aria-label=\"\u4E0B\u4E00\u7AE0(\u843D\u5728\u90A3\u4E00\u7AE0\u8BB2\u5B8C)\" title=\"\u4E0B\u4E00\u7AE0 \u21E7\u2192\"></button><span class=\"rl-when\"><span id=\"rl-clock\"></span><span class=\"rl-subrow\"><span id=\"rl-sub\"></span><button id=\"rl-ver\" type=\"button\" hidden>\u753B\u6CD5\u5DF2\u66F4\u65B0</button></span></span><span class=\"rl-sp\"></span><label class=\"rl-sw\" title=\"\u5B69\u5B50\u60F3\u4E86\u5F88\u4E45\u3001\u7B49\u8001\u5E08\u5F88\u4E45\u7684\u5730\u65B9\u5404\u538B\u6210 1.5 \u79D2;\u5173\u6389\u5C31\u662F\u5B8C\u6574\u7248,\u6309\u771F\u5B9E\u65F6\u95F4\u653E\"><input type=\"checkbox\" id=\"rl-skip\" role=\"switch\" checked><i></i>\u8DF3\u8FC7\u7A7A\u767D</label><button class=\"tx\" id=\"rl-speed\" type=\"button\">1\u00D7</button><button class=\"ic\" id=\"rl-fold\" type=\"button\" aria-label=\"\u6536\u8D77\u5F55\u50CF\u680F\"></button></div>\n    </div>";
+export declare const REEL_DOCK_JS = "\n  // ---- \u5F55\u50CF\u680F(src/ui/shared/reel-dock.ts):\u4E0D\u8BA4\u573A\u666F,\u53EA\u7ECF\u628A\u624B\u8BF4\u8BDD;\u5BB6\u957F\u9875(\u9694\u7740 iframe)\u6216\u76F4\u63A5\u6253\u5F00\u5B69\u5B50\u5C4F\u5E55\u65F6\u5728\u5B83\u81EA\u5DF1\u8EAB\u4E0A ----\n  const reelDock = (() => {\n    const q = (s) => document.querySelector(s);\n    const SV = (p, sw) => '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"' + sw + '\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">' + p + '</svg>';\n    const PLAY = SV('<path d=\"M8 5l11 7-11 7z\" fill=\"currentColor\"></path>', 1.5), PAUSE = SV('<path d=\"M8 5v14M16 5v14\"></path>', 2.6);\n    const p2 = (n) => String(n).padStart(2, '0');\n    /** \u5F55\u50CF\u91CC\u7684\u4F4D\u7F6E(\u548C\u89C6\u9891\u4E00\u6837):m:ss,\u4E00\u5C0F\u65F6\u4EE5\u4E0A h:mm:ss */\n    const pos = (ms) => { const s = Math.max(0, Math.floor(ms / 1000)); const h = Math.floor(s / 3600), m = Math.floor(s % 3600 / 60), x = s % 60; return h ? h + ':' + p2(m) + ':' + p2(x) : m + ':' + p2(x); };\n    const hms = (t) => { const d = new Date(t); return p2(d.getHours()) + ':' + p2(d.getMinutes()) + ':' + p2(d.getSeconds()); };\n    const kept = (k) => { try { return localStorage.getItem(k); } catch (e) { return null; } };\n    const keep = (k, v) => { try { localStorage.setItem(k, v); } catch (e) {} };\n    const pct = (p, total) => (100 * p / Math.max(1, total)).toFixed(2) + '%';\n    const li = (cls, text) => { const e = document.createElement('span'); e.className = cls; e.textContent = text; return e; };\n    let RE = null, O = {}, timer = 0, real = null, playing = null, dragging = false, ev = [], cur = -2, chaps = [], lands = [], size = null, speeds = [1, 1.5, 2];\n    /** \u4E0A\u534A:\u5B69\u5B50\u7684\u5C4F\u5E55\u6309\u5B83\u7684\u5C3A\u5BF8\u7B49\u6BD4\u7F29\u5230\u94FA\u6EE1,\u7A97\u53E3\u4E0D\u591F\u9AD8\u624D\u6309\u9AD8\u5EA6\u7F29 */\n    const fit = () => {\n      const sc = q('#rl-screen'), fr = q('#rl-frame');\n      if (!sc || !fr || sc.hidden || !size) return;\n      const w = size[0], h = size[1], k = Math.min(sc.clientWidth / w, sc.clientHeight / h);\n      fr.style.width = w + 'px'; fr.style.height = h + 'px';\n      fr.style.transform = 'translate(' + Math.round((sc.clientWidth - w * k) / 2) + 'px,' + Math.round((sc.clientHeight - h * k) / 2) + 'px) scale(' + k + ')';\n    };\n    /** \u7ECF\u8FC7:\u8DDF\u7740\u5F55\u50CF\u7684\u949F\u4EAE\u5F53\u524D\u90A3\u6761;\u5C55\u5F00\u7740\u624D\u6EDA */\n    const log = (st) => {\n      if (st.real !== real || !ev.length) {\n        ev = RE.events(); cur = -2;\n        q('#rl-log ol').replaceChildren(...ev.map((e) => { const x = document.createElement('li'); x.append(li('rl-c', pos(e.p)), li('rl-k ' + e.kind, e.chip), li('rl-t', e.text)); x.addEventListener('click', () => { if (RE) RE.seek(e.p + 1); }); return x; }));\n      }\n      let c = -1; ev.forEach((e, i) => { if (e.p <= st.p + 1) c = i; });\n      if (c === cur) return;\n      cur = c;\n      const lis = q('#rl-log ol').children;\n      for (let i = 0; i < lis.length; i++) { lis[i].classList.toggle('cur', i === c); lis[i].classList.toggle('fut', i > c); }\n      const box = q('#rl-log'), x = lis[Math.max(0, c)];\n      if (!box.hidden && x) box.scrollTo({ top: Math.max(0, x.offsetTop - box.clientHeight / 2 + x.offsetHeight / 2), behavior: 'smooth' });\n    };\n    const more = (open) => {\n      q('#rl-log').hidden = !open; q('#rl-more').setAttribute('aria-expanded', String(open)); q('#rl-more').textContent = open ? '\u7ECF\u8FC7 \u25BE' : '\u7ECF\u8FC7 \u25B4';\n      keep('parent-reel-log', open ? '1' : '0');\n      cur = -2; const st = RE && RE.get(); if (st) log(st);\n    };\n    /** \u6536\u8D77\u6210\u4E00\u884C / \u5C55\u5F00,\u8FD9\u53F0\u8BBE\u5907\u8BB0\u4F4F */\n    const fold = (min) => {\n      q('#reel').classList.toggle('min', min);\n      q('#rl-grab').setAttribute('aria-expanded', String(!min)); q('#rl-grab').setAttribute('aria-label', min ? '\u5C55\u5F00\u5F55\u50CF\u680F' : '\u6536\u8D77\u5F55\u50CF\u680F');\n      keep('parent-reel-min', min ? '1' : '0');\n      cur = -2; fit();\n    };\n    const render = () => {\n      const st = RE && RE.get(); if (!st) return;\n      log(st);\n      if (st.real !== real) {\n        real = st.real;\n        q('#rl-seek').max = String(Math.max(1, Math.round(st.total)));\n        q('#rl-marks').replaceChildren(...RE.marks().map((m) => {\n          const i = document.createElement('i'); i.className = m.kind; i.title = pos(m.p) + ' ' + m.label;\n          i.style.left = pct(m.p, st.total); if (m.pTo !== undefined) i.style.width = 'calc(' + pct(m.pTo - m.p, st.total) + ' + 6px)';\n          i.addEventListener('click', () => { if (RE) RE.seek(m.p); });\n          return i;\n        }));\n        chaps = RE.chapters ? RE.chapters() : [];\n        // \u7AE0\u5C3E:\u4E0A\u4E00\u7AE0 / \u4E0B\u4E00\u7AE0\u843D\u5728\u8FD9\u91CC;\u6CA1\u7ED9\u5C31\u662F\u4E0B\u4E00\u7AE0\u5F00\u5934\u4E4B\u524D,\u6700\u540E\u4E00\u7AE0\u662F\u672B\u5C3E\n        lands = chaps.map((c, i) => (typeof c.end === 'number' ? c.end : i + 1 < chaps.length ? chaps[i + 1].p - 1 : st.total)).map((x) => Math.max(0, Math.min(st.total, x))).filter((x, i, a) => !i || x > a[i - 1]);\n        if (!lands.length) lands = [st.total];\n        q('#rl-chaps').replaceChildren(...chaps.slice(1).map((c) => { const i = document.createElement('i'); i.style.left = pct(c.p, st.total); return i; }));\n        q('#rl-skip').checked = !st.real;\n      }\n      if (!dragging) q('#rl-seek').value = String(Math.round(st.p));\n      q('#rl-seek').style.setProperty('--fill', pct(Number(q('#rl-seek').value), st.total));\n      q('#rl-prev').disabled = st.p <= JUMP_TOL; q('#rl-next').disabled = !lands.some((x) => x > st.p + JUMP_TOL);\n      const t = pos(st.p) + ' / ' + pos(st.total);\n      q('#rl-clock').textContent = t; q('#rl-mclock').textContent = t;\n      q('#rl-sub').textContent = '\u5F53\u65F6 ' + hms(st.wall);\n      let ch = null; chaps.forEach((c) => { if (c.p <= st.p + 0.5) ch = c; }); // \u7AE0\u5C3E\u5728\u4E0B\u4E00\u7AE0\u5F00\u5934\u524D 1 \u6BEB\u79D2:\u90A3\u4E00\u523B\u8FD8\u7B97\u8FD9\u4E00\u7AE0\n      q('#rl-chap').hidden = !ch; if (ch && q('#rl-chap').textContent !== ch.title) q('#rl-chap').textContent = ch.title;\n      if (st.playing !== playing) {\n        playing = st.playing;\n        for (const b of [q('#rl-play'), q('#rl-mplay')]) { b.innerHTML = st.playing ? PAUSE : PLAY; b.setAttribute('aria-label', st.playing ? '\u6682\u505C' : '\u64AD\u653E'); }\n      }\n      const cap = q('#rl-cap'); if (cap.textContent !== st.cap.text) { cap.textContent = st.cap.text; cap.className = st.cap.cls; }\n      q('#rl-ver').hidden = !st.stale;\n      // \u5B69\u5B50\u8F6C\u4E86\u5C4F\u3001\u6362\u4E86\u5C3A\u5BF8:\u4E0A\u534A\u7167\u8FD9\u4E00\u523B\u7684\u5C3A\u5BF8\u91CD\u7F29(\u5BB6\u957F\u9875\u90A3\u5934;\u76F4\u63A5\u6253\u5F00\u5B69\u5B50\u5C4F\u5E55\u65F6\u6CA1\u6709 size)\n      if (st.size && size && (st.size[0] !== size[0] || st.size[1] !== size[1])) { size = st.size; fit(); }\n    };\n    if (window.ResizeObserver && q('#rl-screen')) new ResizeObserver(fit).observe(q('#rl-screen')); else window.addEventListener('resize', fit);\n    q('#rl-fold').innerHTML = SV('<path d=\"M6 9l6 6 6-6\"></path>', 2.2);\n    q('#rl-prev').innerHTML = SV('<path d=\"M6 5v14\"></path><path d=\"M19 5L9 12l10 7z\" fill=\"currentColor\"></path>', 2.4);\n    q('#rl-next').innerHTML = SV('<path d=\"M18 5v14\"></path><path d=\"M5 5l10 7-10 7z\" fill=\"currentColor\"></path>', 2.4);\n    q('#rl-unfold').innerHTML = SV('<path d=\"M6 15l6-6 6 6\"></path>', 2.2);\n    const toggle = () => { if (RE) { const st = RE.get(); if (st) RE.play(!st.playing); } };\n    /** \u4E0A\u4E00\u7AE0 / \u4E0B\u4E00\u7AE0:\u843D\u5728\u7AE0\u5C3E,\u4E0D\u843D\u7AE0\u5934;\u79BB\u7AE0\u5C3E 1 \u79D2\u4EE5\u5185\u7B97\u5DF2\u7ECF\u5728\u90A3\u513F;\u518D\u5F80\u524D\u6CA1\u6709\u5C31\u56DE\u5F00\u5934\u3002\u8DF3\u8FC7\u53BB\u505C\u7740,\u770B\u90A3\u4E00\u7AE0\u8BB2\u5B8C\u7684\u6837\u5B50 */\n    const JUMP_TOL = 1000;\n    const jump = (dir) => {\n      if (!RE) return;\n      const st = RE.get(); if (!st) return;\n      let to;\n      if (dir > 0) { to = lands.find((x) => x > st.p + JUMP_TOL); if (to === undefined) return; }\n      else { const back = lands.filter((x) => x < st.p - JUMP_TOL); to = back.length ? back[back.length - 1] : 0; }\n      if (st.playing) RE.play(false);\n      RE.seek(to);\n    };\n    const seekBy = (ms) => { if (!RE) return; const st = RE.get(); if (st) RE.seek(Math.max(0, Math.min(st.total, st.p + ms))); };\n    const speedBy = (d) => { if (!RE) return; const st = RE.get(); const i = Math.max(0, Math.min(speeds.length - 1, speeds.indexOf(st.speed) + d)); RE.speed(speeds[i]); q('#rl-speed').textContent = speeds[i] + '\u00D7'; };\n    const keys = (open) => { q('#rl-keys').hidden = !open; };\n    /** \u5FEB\u6377\u952E:\u8FD9\u4E00\u9875\u7684\u3001\u5B69\u5B50\u5C4F\u5E55\u91CC\u8F6C\u4E0A\u6765\u7684(window.cotutorReelKey)\u8D70\u540C\u4E00\u4E2A;\u5728\u8F93\u5165\u6846\u91CC\u6253\u5B57\u65F6\u4E0D\u63A5\u7BA1 */\n    const onKey = (e) => {\n      if (!RE || e.metaKey || e.ctrlKey || e.altKey) return false;\n      const t = e.target;\n      if (t && t.tagName && (t.isContentEditable || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT' || (t.tagName === 'INPUT' && t.type !== 'range' && t.type !== 'checkbox'))) return false;\n      const k = e.key, open = !q('#rl-keys').hidden;\n      if (k === 'Escape') { if (open) keys(false); else if (O.exit) O.exit(); return true; }\n      if (k === '?') { keys(!open); return true; }\n      if (open) return false;\n      if (k === ' ' || k === 'k' || k === 'K') toggle();\n      else if ((k === 'ArrowLeft' && e.shiftKey) || k === '[') jump(-1);\n      else if ((k === 'ArrowRight' && e.shiftKey) || k === ']') jump(1);\n      else if (k === 'ArrowLeft') seekBy(-5000);\n      else if (k === 'ArrowRight') seekBy(5000);\n      else if (k === 'Home') RE.seek(0);\n      else if (k === 'End') { const st = RE.get(); if (st) RE.seek(st.total); }\n      else if (k === 's' || k === 'S') { const c = q('#rl-skip'); c.checked = !c.checked; RE.real(!c.checked); }\n      else if (k === '<') speedBy(-1);\n      else if (k === '>') speedBy(1);\n      else if (k === 'e' || k === 'E') more(q('#rl-log').hidden);\n      else return false;\n      return true;\n    };\n    document.addEventListener('keydown', (e) => {\n      if (!onKey(e)) return;\n      e.preventDefault();\n      // \u7A7A\u683C\u843D\u5728\u6309\u94AE\u4E0A\u677E\u624B\u65F6\u8FD8\u4F1A\u70B9\u4E00\u4E0B:\u5148\u628A\u7126\u70B9\u62FF\u8D70,\u514D\u5F97\u653E\u4E86\u53C8\u505C\n      if (document.activeElement && document.activeElement.tagName === 'BUTTON') document.activeElement.blur();\n    });\n    window.cotutorReelKey = (e) => onKey(e);\n    /** \u8033\u673A\u3001\u5A92\u4F53\u952E\u3001\u63A7\u5236\u4E2D\u5FC3(Media Session):\u653E\u505C\u3001\u4E0A\u4E00\u7AE0 / \u4E0B\u4E00\u7AE0;\u9501\u5C4F\u5199\u8FD9\u662F\u54EA\u4EF6\u4E8B\u3001\u7B2C\u51E0\u7AE0 */\n    const media = (on) => {\n      const ms = navigator.mediaSession; if (!ms) return;\n      const set = (a, f) => { try { ms.setActionHandler(a, on ? f : null); } catch (x) {} };\n      set('play', () => { if (RE) RE.play(true); });\n      set('pause', () => { if (RE) RE.play(false); });\n      set('previoustrack', () => jump(-1));\n      set('nexttrack', () => jump(1));\n      set('seekbackward', () => seekBy(-5000));\n      set('seekforward', () => seekBy(5000));\n      if (!on) { ms.metadata = null; return; }\n      try { if (window.MediaMetadata) ms.metadata = new MediaMetadata({ title: O.title || '\u5F55\u50CF', artist: '\u5F55\u50CF' }); } catch (x) {}\n    };\n    q('#rl-prev').addEventListener('click', () => jump(-1));\n    q('#rl-next').addEventListener('click', () => jump(1));\n    q('#rl-keyb').addEventListener('click', () => keys(true));\n    q('#rl-keys-x').addEventListener('click', () => keys(false));\n    q('#rl-keys').addEventListener('click', (e) => { if (e.target === q('#rl-keys')) keys(false); });\n    q('#rl-play').addEventListener('click', toggle);\n    q('#rl-mplay').addEventListener('click', toggle);\n    q('#rl-x').addEventListener('click', () => { if (O.exit) O.exit(); });\n    q('#rl-ver').addEventListener('click', () => { if (O.toast) O.toast('\u8FD9\u6BB5\u662F\u65E7\u7248\u5B69\u5B50\u7AEF\u5F55\u7684,\u73B0\u5728\u7528\u65B0\u7248\u7684\u6837\u5B50\u753B:\u5B69\u5B50\u505A\u4E86\u4EC0\u4E48\u7167\u65E7,\u6837\u5B50\u53EF\u80FD\u548C\u5B69\u5B50\u5F53\u65F6\u770B\u5230\u7684\u4E0D\u4E00\u6837'); });\n    q('#rl-more').addEventListener('click', () => more(q('#rl-log').hidden));\n    q('#rl-fold').addEventListener('click', () => fold(true));\n    q('#rl-unfold').addEventListener('click', () => fold(false));\n    // \u5C0F\u6A2A\u6761:\u70B9\u4E00\u4E0B\u5207\u6362;\u5F80\u4E0B\u62C9\u6536\u8D77\u3001\u5F80\u4E0A\u62C9\u5C55\u5F00\n    { let y0 = null, moved = false; const g = q('#rl-grab');\n      g.addEventListener('pointerdown', (e) => { y0 = e.clientY; moved = false; try { g.setPointerCapture(e.pointerId); } catch (x) {} });\n      g.addEventListener('pointermove', (e) => { if (y0 === null) return; const dy = e.clientY - y0, min = q('#reel').classList.contains('min'); if (dy > 20 && !min) { fold(true); moved = true; y0 = e.clientY; } else if (dy < -20 && min) { fold(false); moved = true; y0 = e.clientY; } });\n      g.addEventListener('pointerup', () => { if (y0 !== null && !moved) fold(!q('#reel').classList.contains('min')); y0 = null; });\n      g.addEventListener('pointercancel', () => { y0 = null; }); }\n    // \u5728\u8BF4\u660E\u90A3\u4E00\u884C\u4E0A\u5F80\u4E0A\u62C9\u5C55\u5F00\u7ECF\u8FC7\u3001\u5F80\u4E0B\u62C9\u6536\u8D77\n    { let y0 = null; const row = q('#rl-caprow');\n      row.addEventListener('pointerdown', (e) => { if (e.target.closest('#rl-more')) return; y0 = e.clientY; });\n      row.addEventListener('pointerup', (e) => { if (y0 === null) return; const dy = e.clientY - y0; y0 = null; if (dy < -24) more(true); else if (dy > 24) more(false); });\n      row.addEventListener('pointercancel', () => { y0 = null; }); }\n    q('#rl-skip').addEventListener('change', (e) => { if (RE) RE.real(!e.target.checked); });\n    q('#rl-speed').addEventListener('click', (e) => { if (!RE) return; const st = RE.get(); const x = speeds[(speeds.indexOf(st.speed) + 1) % speeds.length]; RE.speed(x); e.currentTarget.textContent = x + '\u00D7'; });\n    // \u62D6\u7684\u65F6\u5019\u4E0D\u51FA\u58F0,\u677E\u624B\u4ECE\u90A3\u4E00\u523B\u63A5\u7740\u653E\n    q('#rl-seek').addEventListener('input', (e) => { if (!RE) return; dragging = true; RE.drag(Number(e.target.value)); });\n    q('#rl-seek').addEventListener('change', (e) => { if (!RE) return; dragging = false; RE.seek(Number(e.target.value)); });\n    return {\n      /** \u63A5\u4E0A\u4E00\u4E2A\u628A\u624B:o.exit(\u6709\u5C31\u51FA\u300C\u9000\u51FA\u300D)\u3001o.toast */\n      open: (api, o) => {\n        RE = api; O = o || {}; real = null; playing = null; dragging = false; ev = []; chaps = [];\n        speeds = api.speeds && api.speeds.length ? api.speeds : [1, 1.5, 2];\n        const st = api.get();\n        q('#rl-speed').textContent = st.speed + '\u00D7';\n        q('#rl-x').hidden = !O.exit;\n        q('#rl-ttl').textContent = O.title || '';\n        document.documentElement.classList.add('rl-dark');\n        media(true);\n        q('#reel').hidden = false;\n        more(kept('parent-reel-log') === '1'); fold(kept('parent-reel-min') === '1');\n        clearInterval(timer); timer = setInterval(render, 100);\n        render();\n      },\n      close: () => { clearInterval(timer); RE = null; size = null; q('#reel').hidden = true; keys(false); media(false); document.documentElement.classList.remove('rl-dark'); },\n      /** \u5B69\u5B50\u5C4F\u5E55\u7684\u5C3A\u5BF8(CSS \u50CF\u7D20):\u4E0A\u534A\u7167\u5B83\u7F29 */\n      frame: (sz) => { size = sz; fit(); },\n    };\n  })();\n";