dsh-plugin-lookatstudy 0.25.2 → 0.25.3

package/lib/client.js

@@ -391,7 +391,16 @@ window.__ModuleLoader__.load({
 .lks-ui .lks14-emptycard-title{font-size:1rem;font-weight:800;color:var(--ink-strong)}
 .lks-ui .lks14-emptycard-hint{font-size:.825rem;color:var(--ink-muted);line-height:1.6}
 /* B5: notebook tab capsule + 960px reading column */
-.lks-ui .lks14-notebody{margin:0 auto;max-width:960px;width:100%;padding:12px 20px 24px;box-sizing:border-box}
+.lks-ui .lks14-notebody{margin:0;width:100%;padding:12px 20px 24px;box-sizing:border-box}
+/* 0.25.3 (owner): the view tabs pin to the note column's top — full-bleed
+   negative margins cancel the notebody padding so the bar covers the whole
+   column width while content scrolls underneath */
+.lks-ui .lks14-viewtabs{position:sticky;top:0;z-index:20;margin:0 -20px 12px;padding:8px 20px 6px;background:var(--surface-2);border-bottom:1px solid var(--border-faint)}
+.lks-ui .lks14-viewtab{display:inline-flex;align-items:center;gap:5px}
+/* 0.25.3 karaoke: the speaking sentence highlight (CSS Custom Highlight API
+   registration; the span class is the no-Highlight-API fallback) */
+::highlight(lks-reading){background:rgb(var(--brand-rgb)/0.28);color:var(--ink-strong)}
+.lks-ui .lks14-reading-mark{background:rgb(var(--brand-rgb)/0.28);color:var(--ink-strong);border-radius:3px}
 /* #10-followup: the reading column is height:auto (the note col scrolls), so
    .lks14-board's height:100% resolved against a content-sized parent and the
    stage collapsed to a ~90px sliver — the never-upscale contain fit then
@@ -1418,6 +1427,38 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				fill: "currentColor"
 			}));
 		}
+		/** IconBookOutline16 — plugin-original learning-domain companion (teach tab). */
+		function IconBookOutline16({ size = 16, className }) {
+			return (0, react.createElement)("svg", {
+				width: size,
+				height: size,
+				className,
+				viewBox: "0 0 16 16",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg"
+			}, (0, react.createElement)("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M2 2.5C2 1.67157 2.67157 1 3.5 1H12.5C13.3284 1 14 1.67157 14 2.5V12.5C14 13.3284 13.3284 14 12.5 14H3.5C2.67157 14 2 13.3284 2 12.5V2.5ZM3.5 2C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H4V3H3.5ZM5 3V13H12.5C12.7761 13 13 12.7761 13 12.5V2.5C13 2.22386 12.7761 2 12.5 2H5ZM6 4.5H11.5V5.5H6V4.5ZM6 7H11.5V8H6V7ZM6 9.5H10V10.5H6V9.5Z",
+				fill: "currentColor"
+			}));
+		}
+		/** IconPenOutline16 — plugin-original learning-domain companion (notes tab). */
+		function IconPenOutline16({ size = 16, className }) {
+			return (0, react.createElement)("svg", {
+				width: size,
+				height: size,
+				className,
+				viewBox: "0 0 16 16",
+				fill: "none",
+				xmlns: "http://www.w3.org/2000/svg"
+			}, (0, react.createElement)("path", {
+				fillRule: "evenodd",
+				clipRule: "evenodd",
+				d: "M11.4503 1.65669C12.0849 1.02209 13.1145 1.02209 13.7491 1.65669L14.3433 2.25091C14.9779 2.88551 14.9779 3.91507 14.3433 4.54967L6.13604 12.7569L2.33156 13.7212C1.92166 13.8248 1.54569 13.4488 1.64934 13.0389L2.61359 9.23442L10.8208 1.02719L11.4503 1.65669ZM11.5317 2.66034L3.61621 10.5758L3.04325 12.8379L4.3433 12.5094L12.2987 4.55397L11.5317 2.78695V2.66034Z",
+				fill: "currentColor"
+			}));
+		}
 		/** IconGoalOutline16 */
 		function IconGoalOutline16({ size = 16, className }) {
 			return (0, react.createElement)("svg", {
@@ -4506,6 +4547,21 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			s = s.replace(/`[^`\n]*`/g, "");
 			s = s.replace(/!\[[^\]]*\]\([^)\n]*\)/g, "");
 			s = s.replace(/\[([^\]]+)\]\([^)\n]*\)/g, "$1");
+			s = s.replace(/\[\]\([^)\n]*\)/g, "");
+			s = s.replace(/<br\s*\/?>/gi, "\n");
+			s = s.replace(/<https?:\/\/[^>\s]+>/g, "");
+			s = s.replace(/https?:\/\/[^\s)\]]+/g, "");
+			s = s.replace(/<(script|style)\b[^>]*>[\s\S]*?<\/\1>/gi, "\n");
+			s = s.replace(/<[^>\n]+>/g, "");
+			s = s.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&#0?39;/g, "'").replace(/&nbsp;/g, " ").replace(/&#(\d+);/g, (_m, d) => {
+				try {
+					return String.fromCodePoint(Number(d));
+				} catch {
+					return "";
+				}
+			}).replace(/&[a-z]+;/gi, "");
+			s = s.replace(/\[([^\]]+)\]\[[^\]]*\]/g, "$1");
+			s = s.replace(/\[\^[^\]]*\]/g, "");
 			s = s.replace(/^[ \t]{0,3}#{1,6}[ \t]+/gm, "");
 			s = s.replace(/^[ \t]*(?:[-*+]|\d+\.)[ \t]+/gm, "");
 			s = s.replace(/^[ \t]*>[ \t]?/gm, "");
@@ -4605,6 +4661,203 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			};
 		}
 		//#endregion
+		//#region src/client/reading-mark.ts
+		/**
+		* Reading karaoke — the sentence highlight + follow for the teach prose's
+		* read-aloud. Ported subset of upstream LookatStudy src/renderer/lib/
+		* highlightText.ts (MIT License, https://github.com/Kaiji-Z/LookatStudy):
+		* the v9 canonical whole-sentence alignment (punctuation/full-width
+		* differences collapse; edge extension swallows opening quotes and sentence
+		* punctuation so the highlight always covers the visible sentence), the v8
+		* CSS Custom Highlight API registration (zero DOM mutation — span wrapping
+		* fights React's reconciliation on every sentence tick; the span stays only
+		* as a fallback), and the v0.18.1 line-box centering follow (a 13k-char
+		* paragraph renders 3000px tall — element-box scrollIntoView pins at the
+		* paragraph head while the highlight walks on; the sentence's own first-line
+		* rect is what must stay in view). Not ported: companion avoidance, played
+		* -prefix splitting, display-group spans (companion is retired in this
+		* plugin; the controller's sentence index is already authoritative).
+		* @module dsh-plugin-lookatstudy/client/reading-mark
+		*/
+		const WORD_CHAR_RE = /[0-9A-Za-z\u00C0-\u024F\u0370-\u03FF\u0400-\u04FF\u4E00-\u9FFF\u3040-\u30FF\uAC00-\uD7AF]/;
+		const OPEN_EDGE = "「『(（[【<《\"'“‘";
+		const CLOSE_EDGE = "。』」)）]】>》\"'”’!！?？…,，、;；:：";
+		/** One char → canonical form (full-width→half-width, lowercase) or null when
+		* the char is punctuation/space/symbol (all filtered). Pure (upstream). */
+		function canonChar(ch) {
+			const c = ch.codePointAt(0);
+			let s = ch;
+			if (c >= 65281 && c <= 65374) s = String.fromCharCode(c - 65248);
+			return WORD_CHAR_RE.test(s) ? s.toLowerCase() : null;
+		}
+		/** Text → canonical string + canonical→original offset map. Pure (upstream). */
+		function canonicalSpeechIndex(text) {
+			let canon = "";
+			const map = [];
+			for (let i = 0; i < text.length; i++) {
+				const c = canonChar(text[i]);
+				if (c !== null) {
+					canon += c;
+					map.push(i);
+				}
+			}
+			return {
+				canon,
+				map
+			};
+		}
+		/**
+		* Align one speech sentence against the prose's full text (pure). Whole
+		* canonical indexOf first (the common case — punctuation/width differences
+		* vanish); on failure a token-interval match lets displayed-but-unspoken
+		* runs (inline code, table pipes) sit inside the match as gaps; the matched
+		* span then extends over opening quotes before and sentence punctuation
+		* after, so the highlight covers the complete visible sentence.
+		* @returns [start, end) offsets into `text`, or null.
+		*/
+		function matchSentenceAligned(text, sentence, from = 0) {
+			const { canon, map } = canonicalSpeechIndex(text);
+			const sen = canonicalSpeechIndex(sentence).canon;
+			if (sen === "" || canon === "") return null;
+			let hit = canon.indexOf(sen, Math.min(from, canon.length));
+			if (hit === -1) hit = canon.indexOf(sen);
+			let start;
+			let end;
+			if (hit !== -1) {
+				start = map[hit];
+				end = (map[hit + sen.length - 1] ?? map[map.length - 1]) + 1;
+			} else {
+				const head = sen.slice(0, Math.min(2, sen.length));
+				const tail = sen.slice(-Math.min(2, sen.length));
+				const h = canon.indexOf(head, Math.min(from, canon.length));
+				if (h === -1) return null;
+				const t = tail === "" ? h + head.length - 1 : canon.lastIndexOf(tail, Math.min(canon.length - 1, h + sen.length + 128));
+				if (t < h + head.length - 1) return null;
+				start = map[h];
+				end = (map[t + tail.length - 1] ?? map[map.length - 1]) + 1;
+			}
+			while (start > 0 && OPEN_EDGE.includes(text[start - 1])) start--;
+			while (end < text.length && CLOSE_EDGE.includes(text[end])) end++;
+			return [start, end];
+		}
+		function buildTextModel(container) {
+			const nodes = [];
+			let text = "";
+			const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, { acceptNode(node) {
+				let p = node.parentNode;
+				while (p !== null && p !== container) {
+					if (p instanceof HTMLElement && (p.tagName === "SCRIPT" || p.tagName === "STYLE" || p.classList.contains("lks14-reading-mark"))) return NodeFilter.FILTER_REJECT;
+					p = p.parentNode;
+				}
+				return NodeFilter.FILTER_ACCEPT;
+			} });
+			for (let n = walker.nextNode(); n !== null; n = walker.nextNode()) {
+				const t = n;
+				nodes.push({
+					node: t,
+					start: text.length
+				});
+				text += t.data;
+			}
+			return {
+				text,
+				nodes
+			};
+		}
+		function offsetsToRange(model, start, end) {
+			const range = document.createRange();
+			let setStart = false;
+			let setEnd = false;
+			for (const { node, start: ns } of model.nodes) {
+				const len = node.data.length;
+				if (!setStart && start >= ns && start <= ns + len) {
+					range.setStart(node, start - ns);
+					setStart = true;
+				}
+				if (!setEnd && end >= ns && end <= ns + len) {
+					range.setEnd(node, end - ns);
+					setEnd = true;
+					break;
+				}
+			}
+			return setStart && setEnd ? range : null;
+		}
+		const READING_HIGHLIGHT_NAME = "lks-reading";
+		const READING_MARK_CLASS = "lks14-reading-mark";
+		const readingCursors = /* @__PURE__ */ new WeakMap();
+		/** Drop the registry highlight outright (unmount/stop; DOM may be gone). */
+		function clearReadingHighlightRegistry() {
+			const cssLike = CSS;
+			try {
+				cssLike.highlights?.delete(READING_HIGHLIGHT_NAME);
+			} catch {}
+		}
+		/** Remove the reading mark (registry + fallback spans) from one container. */
+		function clearReadingMark(container) {
+			clearReadingHighlightRegistry();
+			container.querySelectorAll(`.${READING_MARK_CLASS}`).forEach((m) => {
+				const parent = m.parentNode;
+				if (parent !== null) {
+					while (m.firstChild !== null) parent.insertBefore(m.firstChild, m);
+					parent.removeChild(m);
+				}
+			});
+			container.normalize();
+		}
+		/** A fresh read restarts the monotonic cursor. */
+		function resetReadingCursor(container) {
+			readingCursors.set(container, 0);
+		}
+		/**
+		* Highlight the currently spoken sentence in the prose. Returns the marked
+		* Range (null when the sentence cannot be aligned — the read keeps going,
+		* only the highlight skips).
+		*/
+		function markReadingSentence(container, sentence) {
+			clearReadingMark(container);
+			const trimmed = sentence.trim();
+			if (trimmed === "") return null;
+			const model = buildTextModel(container);
+			const from = readingCursors.get(container) ?? 0;
+			let m = matchSentenceAligned(model.text, trimmed, from);
+			if (m === null && from > 0) m = matchSentenceAligned(model.text, trimmed, 0);
+			if (m === null) return null;
+			readingCursors.set(container, m[1]);
+			const range = offsetsToRange(model, m[0], m[1]);
+			if (range === null) return null;
+			const cssLike = CSS;
+			if (typeof Highlight !== "undefined" && cssLike.highlights !== void 0) try {
+				cssLike.highlights.set(READING_HIGHLIGHT_NAME, new Highlight(range));
+				return range;
+			} catch {}
+			const mark = document.createElement("span");
+			mark.className = READING_MARK_CLASS;
+			try {
+				range.surroundContents(mark);
+				return range;
+			} catch {
+				return range;
+			}
+		}
+		/**
+		* Keep the marked sentence's FIRST-LINE rect inside the scroll viewport
+		* (upstream v0.18.1): element-box centering pins on 3000px paragraphs; the
+		* sentence's own line box is what the eye follows. Smooth-centers only when
+		* the line leaves a 48px band.
+		*/
+		function centerReadingRangeInView(range, scroller) {
+			const rects = range.getClientRects();
+			const line = rects.length > 0 && rects[0].height > 0 ? rects[0] : null;
+			if (line === null) return;
+			if (scroller === null) return;
+			const sTop = scroller.getBoundingClientRect().top;
+			const rel = line.top - sTop;
+			if (rel < 48 || rel > scroller.clientHeight - 48) scroller.scrollTo({
+				top: scroller.scrollTop + rel - scroller.clientHeight / 2,
+				behavior: "smooth"
+			});
+		}
+		//#endregion
 		//#region src/vendor/math-speech.ts
 		/**
 		* Vendored from LookatStudy shared/math-speech.ts (MIT License,
@@ -10121,10 +10374,11 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			}, []);
 			const [enhanceTick, setEnhanceTick] = (0, react.useState)(0);
 			const [rateBusy, setRateBusy] = (0, react.useState)(false);
+			const speakText = lesson !== null && langView === "translation" && lesson.translationSpeechText !== void 0 ? lesson.translationSpeechText : lesson?.speechText ?? "";
 			const startReading = () => {
-				if (lesson === null || lesson.speechText.trim() === "") return;
+				if (lesson === null || speakText.trim() === "") return;
 				readCtl.current?.stop();
-				const sentences = speechSentencesOf(lesson.speechText);
+				const sentences = speechSentencesOf(speakText);
 				const voice = storedTtsVoice();
 				const prefetch = /* @__PURE__ */ new Map();
 				let currentAudio = null;
@@ -10206,6 +10460,38 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				readCtl.current?.stop();
 				setRead(null);
 			};
+			(0, react.useEffect)(() => {
+				const prose = proseRef.current;
+				if (prose === null) return;
+				if (read === null || read.state !== "speaking" || tab !== "teach") {
+					clearReadingMark(prose);
+					return;
+				}
+				if (read.index === 0) resetReadingCursor(prose);
+				const sentence = speechSentencesOf(speakText)[read.index];
+				if (sentence === void 0) return;
+				const timer = setTimeout(() => {
+					const rg = markReadingSentence(prose, sentence);
+					if (rg !== null) centerReadingRangeInView(rg, prose.closest(".lks14-note"));
+				}, 30);
+				return () => {
+					clearTimeout(timer);
+				};
+			}, [
+				read?.index,
+				read?.state,
+				tab,
+				teachHtml
+			]);
+			(0, react.useEffect)(() => {
+				if (read === null && proseRef.current !== null) clearReadingMark(proseRef.current);
+			}, [lesson?.lessonId]);
+			(0, react.useEffect)(() => () => {
+				clearReadingHighlightRegistry();
+			}, []);
+			(0, react.useEffect)(() => {
+				if (read !== null) stopReading();
+			}, [langView]);
 			(0, react.useEffect)(() => {
 				if (tab !== "cmap" || diagRef.current === null || lesson === null) return;
 				const el = diagRef.current;
@@ -10239,7 +10525,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				onClick: () => {
 					setTab("teach");
 				}
-			}, tr("viewtab.teach")), (0, react.createElement)("button", {
+			}, (0, react.createElement)(IconBookOutline16, { size: 13 }), tr("viewtab.teach")), (0, react.createElement)("button", {
 				className: `lks14-viewtab${tab === "cmap" ? " on" : ""}`,
 				"aria-pressed": String(tab === "cmap"),
 				"data-tooltip": tr("viewtab.cmap.title"),
@@ -10256,7 +10542,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 						setUnseenTick(Date.now());
 					}
 				}
-			}, tr("bb.notes"), unseen.length > 0 ? (0, react.createElement)("span", { className: "lks-viewtab-badge" }, String(unseen.length)) : null), (0, react.createElement)("button", {
+			}, (0, react.createElement)(IconPenOutline16, { size: 13 }), tr("bb.notes"), unseen.length > 0 ? (0, react.createElement)("span", { className: "lks-viewtab-badge" }, String(unseen.length)) : null), (0, react.createElement)("button", {
 				className: `lks14-viewtab${tab === "board" ? " on" : ""}`,
 				"aria-pressed": String(tab === "board"),
 				"data-tooltip": tr("bb.board.empty"),
@@ -10331,7 +10617,7 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				},
 				"data-tooltip": tr("read.stop"),
 				onClick: stopReading
-			}, tr("read.stop")) : null, read !== null && read.state !== "idle" && lesson !== null ? (0, react.createElement)("span", { className: "lks-readbar-cur" }, (speechSentencesOf(lesson.speechText)[read.index] ?? "").slice(0, 80)) : null, readError !== null ? (0, react.createElement)("span", { className: "lks-readbar-notice" }, readError) : null, read !== null && read.degraded ? (0, react.createElement)("span", { className: "lks-readbar-notice" }, tr("read.engine.system")) : null), (0, react.createElement)("div", { className: "lks14-prosewrap" }, (0, react.createElement)(ContentBoundary, {
+			}, tr("read.stop")) : null, read !== null && read.state !== "idle" && lesson !== null ? (0, react.createElement)("span", { className: "lks-readbar-cur" }, (speechSentencesOf(speakText)[read.index] ?? "").slice(0, 80)) : null, readError !== null ? (0, react.createElement)("span", { className: "lks-readbar-notice" }, readError) : null, read !== null && read.degraded ? (0, react.createElement)("span", { className: "lks-readbar-notice" }, tr("read.engine.system")) : null), (0, react.createElement)("div", { className: "lks14-prosewrap" }, (0, react.createElement)(ContentBoundary, {
 				content: lesson.markdown ?? "",
 				boundaryKey: `prose-${lesson.lessonId}`
 			}, (0, react.createElement)("div", {