dsh-plugin-lookatstudy 0.26.1 → 0.26.3

package/lib/client.js

@@ -5900,233 +5900,628 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			return toastStore.show(message, opts);
 		}
 		//#endregion
-		//#region src/client/celebration.ts
-		const listeners = /* @__PURE__ */ new Set();
-		/** 触发一次庆祝(任何组件都可调)。渲染由 <CelebrationLayer> 统一处理。 */
-		function celebrate(kind, opts) {
-			const e = {
-				kind,
-				intensity: opts?.intensity,
-				origin: opts?.origin,
-				ts: typeof performance !== "undefined" ? performance.now() : Date.now()
-			};
-			for (const l of listeners) l(e);
+		//#region src/vendor/panzoom.ts
+		/** 适屏(contain)缩放:内容完整装进视口(留 padding 边距),不超出 1。 */
+		function fitScale(contentW, contentH, viewW, viewH, padding = 24) {
+			if (contentW <= 0 || contentH <= 0 || viewW <= 0 || viewH <= 0) return 1;
+			const s = Math.min((viewW - padding * 2) / contentW, (viewH - padding * 2) / contentH, 1);
+			return Math.max(.02, s);
 		}
-		/** 订阅庆祝事件(<CelebrationLayer> 用)。返回取消订阅。 */
-		function onCelebration(l) {
-			listeners.add(l);
-			return () => {
-				listeners.delete(l);
+		/** 适屏位姿:居中。 */
+		function fitTransform(contentW, contentH, viewW, viewH, padding = 24) {
+			const scale = fitScale(contentW, contentH, viewW, viewH, padding);
+			return {
+				scale,
+				x: (viewW - contentW * scale) / 2,
+				y: (viewH - contentH * scale) / 2
 			};
 		}
-		/** 按 kind 推断默认粒子数/持续时长/配色(upstream verbatim)。 */
-		function celebrationDefaults(kind) {
-			switch (kind) {
-				case "correct": return {
-					particles: 28,
-					durationMs: 700,
-					colors: [
-						"#58cc02",
-						"#7ed957",
-						"#ffc800"
-					]
-				};
-				case "mastery":
-				case "level-up": return {
-					particles: 48,
-					durationMs: 1100,
-					colors: [
-						"#ffc800",
-						"#ffe680",
-						"#fff7c2"
-					]
-				};
-				case "unlock": return {
-					particles: 32,
-					durationMs: 800,
-					colors: [
-						"#58cc02",
-						"#1cb0f6",
-						"#ffffff"
-					]
-				};
-				case "exam-pass": return {
-					particles: 56,
-					durationMs: 1200,
-					colors: [
-						"#a855f7",
-						"#c084fc",
-						"#ffc800"
-					]
-				};
-				case "lesson-complete": return {
-					particles: 40,
-					durationMs: 1e3,
-					colors: [
-						"#58cc02",
-						"#ffc800",
-						"#1cb0f6"
-					]
-				};
-				case "energy-full": return {
-					particles: 36,
-					durationMs: 900,
-					colors: [
-						"#58cc02",
-						"#7ed957",
-						"#ffffff"
-					]
-				};
-				case "streak": return {
-					particles: 24,
-					durationMs: 700,
-					colors: [
-						"#ff7a1a",
-						"#ffc800",
-						"#ffffff"
-					]
-				};
-				case "wrong": return {
-					particles: 12,
-					durationMs: 450,
-					colors: ["#ff4b4b", "#ff7a7a"]
-				};
-				default: return {
-					particles: 20,
-					durationMs: 600,
-					colors: ["#58cc02", "#ffffff"]
-				};
-			}
-		}
-		/** The reduced-motion fallback glyph per kind (semantic color, drawn statically). */
-		function iconFor(kind) {
-			switch (kind) {
-				case "correct": return {
-					icon: "✓",
-					color: "var(--brand)"
-				};
-				case "wrong": return {
-					icon: "✕",
-					color: "var(--warning)"
-				};
-				case "mastery":
-				case "level-up": return {
-					icon: "♛",
-					color: "var(--gold)"
-				};
-				case "unlock": return {
-					icon: "✦",
-					color: "var(--brand)"
-				};
-				case "streak": return {
-					icon: "▲",
-					color: "var(--review)"
-				};
-				case "energy-full": return {
-					icon: "⚡",
-					color: "var(--brand)"
-				};
-				case "exam-pass": return {
-					icon: "✪",
-					color: "var(--exam)"
-				};
-				case "lesson-complete": return {
-					icon: "☆",
-					color: "var(--gold)"
-				};
-				default: return {
-					icon: "✦",
-					color: "var(--brand)"
-				};
-			}
-		}
 		/**
-		* Diff two poll snapshots into the celebrations to fire (pure — the panel
-		* maps unlock ids to on-screen bubble anchors). First sight (prev null)
-		* seeds every baseline silently — upstream seeds its refs from the initial
-		* fetch BEFORE subscribing, so a page opened mid-fulfilled-day never
-		* celebrates; streak fires only on an INCREASE; energy-full on the first
-		* goal crossing (prev < goal ≤ now).
+		* 锚点缩放:factor>1 放大。锚点 (ax,ay) 是视口坐标 —— 缩放后锚点对准的内容点
+		* 保持不动(标准图像查看器数学:new = anchor - (anchor - old) * factor)。
 		*/
-		function celebrationDiff(prev, next) {
-			const out = [];
-			if (prev !== null) {
-				const was = new Map(prev.lessons.map((l) => [l.id, l.status]));
-				for (const l of next.lessons) {
-					const before = was.get(l.id);
-					if (before === void 0 || before === l.status) continue;
-					if (before === "locked" && l.status === "available") out.push({
-						kind: "unlock",
-						lessonId: l.id
-					});
-					else if (l.status === "mastered") out.push({
-						kind: "mastery",
-						lessonId: l.id
-					});
-				}
-				if (next.streak > prev.streak) out.push({ kind: "streak" });
-			}
-			if (prev === null) return [];
-			const full = next.dailyGoal > 0 && next.todayXp >= next.dailyGoal;
-			const wasFull = prev.dailyGoal > 0 && prev.todayXp >= prev.dailyGoal;
-			if (full && !wasFull) out.push({ kind: "energy-full" });
-			return out;
+		function zoomAt(t, factor, ax, ay) {
+			return {
+				scale: t.scale * factor,
+				x: ax - (ax - t.x) * factor,
+				y: ay - (ay - t.y) * factor
+			};
 		}
 		/**
-		* Seed one burst's particles (pure; upstream burst() extracted for tests).
-		* `rand` injects randomness so tests can freeze the spread.
+		* 平移钳制:内容不会被拖到完全离屏 —— 至少留 `keep`(默认 64px)可见,
+		* 且内容小于视口时不允许拖走(保持居中观感)。
 		*/
-		function seedBurst(event, viewport, rand = Math.random) {
-			const def = celebrationDefaults(event.kind);
-			const n = Math.round(def.particles * (event.intensity ?? 1));
-			const ox = event.origin?.x ?? viewport.w / 2;
-			const oy = event.origin?.y ?? viewport.h / 2;
-			const out = [];
-			for (let i = 0; i < n; i++) {
-				const angle = Math.PI * 2 * i / n + rand() * .3;
-				const speed = 3 + rand() * 6;
-				const maxLife = def.durationMs / 16 * (.7 + rand() * .5);
-				out.push({
-					x: ox,
-					y: oy,
-					vx: Math.cos(angle) * speed,
-					vy: Math.sin(angle) * speed - 2,
-					life: maxLife,
-					maxLife,
-					color: def.colors[i % def.colors.length],
-					size: 4 + rand() * 5,
-					rot: rand() * Math.PI,
-					vr: (rand() - .5) * .3,
-					shape: rand() < .5 ? "rect" : "circle"
-				});
-			}
-			return out;
-		}
-		/** Advance one particle one frame (pure; gravity + drag + spin). Dead ⇒ null. */
-		function stepParticle(p) {
-			const life = p.life - 1;
-			if (life <= 0) return null;
+		function clampPan(t, contentW, contentH, viewW, viewH, keep = 64) {
+			const w = contentW * t.scale;
+			const h = contentH * t.scale;
+			let { x, y } = t;
+			if (w <= viewW) x = (viewW - w) / 2;
+			else x = Math.min(Math.max(x, viewW - w - keep), keep);
+			if (h <= viewH) y = (viewH - h) / 2;
+			else y = Math.min(Math.max(y, viewH - h - keep), keep);
 			return {
-				...p,
-				x: p.x + p.vx,
-				y: p.y + p.vy,
-				vy: p.vy + .25,
-				vx: p.vx * .99,
-				rot: p.rot + p.vr,
-				life
+				x,
+				y,
+				scale: t.scale
 			};
 		}
-		/** Fading alpha 1 → 0 across the particle's life (pure). */
-		function particleAlpha(p) {
-			return Math.min(1, p.life / p.maxLife);
+		/** 钳制缩放(先算锚点缩放,再夹 scale 到 [min,max],再钳平移)。 */
+		function zoomAtClamped(t, factor, ax, ay, bounds) {
+			const target = t.scale * factor;
+			const clampedFactor = Math.min(Math.max(target, bounds.min), bounds.max) / t.scale;
+			if (clampedFactor === 1) return t;
+			return clampPan(zoomAt(t, clampedFactor, ax, ay), bounds.contentW, bounds.contentH, bounds.viewW, bounds.viewH);
 		}
+		//#endregion
+		//#region src/client/canvasstage.tsx
 		/**
-		* The exits after one finished card — never fewer than two (the anti-dead-end
-		* promise). Wrong answers → patch the hole first; perfect + near-mastered →
-		* offer the mastery exit; perfect + already graduated → move on.
-		* Pure port of upstream getPostQuizActions.
-		*/
-		function getPostQuizActions(score, mastery) {
+		* CanvasStage (P14, upstream CanvasStage.tsx port): the canvas-style artifact
+		* stage — content keeps its natural size and one transform (translate+scale)
+		* does everything. Gestures: single-pointer drag pan, two-pointer pinch
+		* anchored at the midpoint, wheel zoom anchored at the cursor, double
+		* click/tap toggles fit↔100%. ResizeObserver refits on content/stage size
+		* changes (mermaid's async svg) — through the #12 gates: value-equality on
+		* setSize, a bounds-differ short-circuit on refit, rAF coalescing, and a
+		* recurrence-tripping oscillation breaker (see makeRefitBreaker). A floating
+		* −/%/fit/+ toolbar stays mounted. Shared by the notebook's board tab and
+		* the diagram modals.
+		* (lucide glyphs collapse to text/plugin icons; the client stays dependency-
+		* free.)
+		* @module dsh-plugin-lookatstudy/client/canvasstage
+		*/
+		const MIN_SCALE = .05;
+		const MAX_SCALE = 4;
+		/** 工具条步进(手势/滚轮连续,按钮给干脆的一档)。 */
+		const STEP = 1.25;
+		/** True when the two bounds readings differ in ANY field — the auto-refit
+		* short-circuit. The pre-fix refit ran fitTransform on every RO callback with
+		* zero hysteresis, so any feedback touching a size re-fired it forever. */
+		function stageBoundsDiffer(a, b) {
+			if (a === null) return true;
+			return a.contentW !== b.contentW || a.contentH !== b.contentH || a.viewW !== b.viewW || a.viewH !== b.viewH;
+		}
+		function makeRefitBreaker(opts = {}) {
+			const windowMs = opts.windowMs ?? 2e3;
+			const now = opts.now ?? (() => performance.now());
+			let seen = [];
+			let tripped = false;
+			return {
+				allow(key) {
+					const t = now();
+					seen = seen.filter((s) => t - s.t < windowMs);
+					if (tripped) return false;
+					if (seen.some((s) => s.key === key)) {
+						tripped = true;
+						return false;
+					}
+					seen.push({
+						t,
+						key
+					});
+					return true;
+				},
+				reset() {
+					seen = [];
+					tripped = false;
+				},
+				tripped() {
+					return tripped;
+				}
+			};
+		}
+		const boundsKey = (b) => `${String(b.contentW)}x${String(b.contentH)}@${String(b.viewW)}x${String(b.viewH)}`;
+		function CanvasStage({ children, grid = true, testid }) {
+			const stageRef = (0, react.useRef)(null);
+			const contentRef = (0, react.useRef)(null);
+			const [tf, setTf] = (0, react.useState)({
+				x: 0,
+				y: 0,
+				scale: 1
+			});
+			const [size, setSize] = (0, react.useState)(null);
+			/** 活跃手势中禁用过渡(跟手必须即时;按钮缩放才享受平滑)。 */
+			const [gesturing, setGesturing] = (0, react.useState)(false);
+			const lastPointerTypeRef = (0, react.useRef)("mouse");
+			const atFitRef = (0, react.useRef)(true);
+			const gesture = (0, react.useRef)({
+				pointers: /* @__PURE__ */ new Map(),
+				pinchBase: null,
+				lastMid: null,
+				panning: false,
+				moved: false
+			});
+			const lastTapRef = (0, react.useRef)(null);
+			const lastBoundsRef = (0, react.useRef)(null);
+			const breakerRef = (0, react.useRef)(null);
+			if (breakerRef.current === null) breakerRef.current = makeRefitBreaker();
+			const bounds = (0, react.useCallback)(() => {
+				const stage = stageRef.current;
+				const content = contentRef.current;
+				return {
+					min: MIN_SCALE,
+					max: MAX_SCALE,
+					contentW: content?.offsetWidth ?? 0,
+					contentH: content?.offsetHeight ?? 0,
+					viewW: stage?.clientWidth ?? 0,
+					viewH: stage?.clientHeight ?? 0
+				};
+			}, []);
+			const currentBounds = (0, react.useCallback)(() => ({
+				contentW: contentRef.current?.offsetWidth ?? 0,
+				contentH: contentRef.current?.offsetHeight ?? 0,
+				viewW: stageRef.current?.clientWidth ?? 0,
+				viewH: stageRef.current?.clientHeight ?? 0
+			}), []);
+			const applyFit = (0, react.useCallback)((b) => {
+				setTf(fitTransform(b.contentW, b.contentH, b.viewW, b.viewH));
+				atFitRef.current = true;
+			}, []);
+			const refit = (0, react.useCallback)(() => {
+				breakerRef.current?.reset();
+				const b = currentBounds();
+				if (b.contentW === 0 || b.viewW === 0) return;
+				lastBoundsRef.current = b;
+				applyFit(b);
+			}, [currentBounds, applyFit]);
+			const measureNow = (0, react.useCallback)(() => {
+				const content = contentRef.current;
+				if (content === null) return;
+				const w = content.offsetWidth;
+				const h = content.offsetHeight;
+				setSize((prev) => prev !== null && prev.w === w && prev.h === h ? prev : {
+					w,
+					h
+				});
+				const b = currentBounds();
+				if (!stageBoundsDiffer(lastBoundsRef.current, b)) return;
+				lastBoundsRef.current = b;
+				if (b.contentW === 0 || b.viewW === 0) return;
+				if (b.contentW < 120) return;
+				if ((breakerRef.current ?? makeRefitBreaker()).allow(boundsKey(b))) applyFit(b);
+			}, [currentBounds, applyFit]);
+			(0, react.useEffect)(() => {
+				const stage = stageRef.current;
+				const content = contentRef.current;
+				if (stage === null || content === null) return;
+				measureNow();
+				let raf = 0;
+				const onRo = () => {
+					if (raf !== 0) return;
+					raf = requestAnimationFrame(() => {
+						raf = 0;
+						measureNow();
+					});
+				};
+				const ro = new ResizeObserver(onRo);
+				ro.observe(content);
+				ro.observe(stage);
+				return () => {
+					ro.disconnect();
+					if (raf !== 0) cancelAnimationFrame(raf);
+				};
+			}, [measureNow]);
+			const zoomBy = (0, react.useCallback)((factor, ax, ay) => {
+				breakerRef.current?.reset();
+				const b = bounds();
+				const cx = ax ?? b.viewW / 2;
+				const cy = ay ?? b.viewH / 2;
+				setTf((cur) => zoomAtClamped(cur, factor, cx, cy, b));
+				atFitRef.current = false;
+			}, [bounds]);
+			const onPointerDown = (0, react.useCallback)((e) => {
+				if (e.target.closest?.("[data-testid=\"canvas-zoom-controls\"]") !== null) return;
+				const el = e.currentTarget;
+				try {
+					el.setPointerCapture(e.pointerId);
+				} catch {}
+				const g = gesture.current;
+				lastPointerTypeRef.current = e.pointerType;
+				if (g.pointers.size === 0) setGesturing(true);
+				g.pointers.set(e.pointerId, {
+					x: e.clientX,
+					y: e.clientY
+				});
+				if (g.pointers.size === 2) {
+					const [p1, p2] = [...g.pointers.values()];
+					g.pinchBase = {
+						dist: Math.hypot(p1.x - p2.x, p1.y - p2.y),
+						factorAcc: 1
+					};
+					g.lastMid = {
+						x: (p1.x + p2.x) / 2,
+						y: (p1.y + p2.y) / 2
+					};
+					g.panning = false;
+				} else if (g.pointers.size === 1) {
+					g.panning = true;
+					g.moved = false;
+					g.lastMid = {
+						x: e.clientX,
+						y: e.clientY
+					};
+				}
+			}, []);
+			const onPointerMove = (0, react.useCallback)((e) => {
+				const g = gesture.current;
+				if (!g.pointers.has(e.pointerId)) return;
+				g.pointers.set(e.pointerId, {
+					x: e.clientX,
+					y: e.clientY
+				});
+				const stage = stageRef.current;
+				if (stage === null) return;
+				const rect = stage.getBoundingClientRect();
+				if (g.pointers.size >= 2 && g.pinchBase !== null) {
+					const [p1, p2] = [...g.pointers.values()];
+					const dist = Math.hypot(p1.x - p2.x, p1.y - p2.y);
+					const mid = {
+						x: (p1.x + p2.x) / 2,
+						y: (p1.y + p2.y) / 2
+					};
+					if (g.pinchBase.dist > 0) {
+						const factor = dist / g.pinchBase.dist / g.pinchBase.factorAcc;
+						g.pinchBase.factorAcc *= factor;
+						zoomBy(factor, mid.x - rect.left, mid.y - rect.top);
+					}
+					if (g.lastMid !== null) {
+						const dx = mid.x - g.lastMid.x;
+						const dy = mid.y - g.lastMid.y;
+						const b = bounds();
+						setTf((cur) => clampPan({
+							...cur,
+							x: cur.x + dx,
+							y: cur.y + dy
+						}, b.contentW, b.contentH, b.viewW, b.viewH));
+					}
+					g.lastMid = mid;
+					return;
+				}
+				if (g.panning && g.lastMid !== null) {
+					const dx = e.clientX - g.lastMid.x;
+					const dy = e.clientY - g.lastMid.y;
+					if (Math.abs(dx) + Math.abs(dy) > 2) g.moved = true;
+					const b = bounds();
+					setTf((cur) => clampPan({
+						...cur,
+						x: cur.x + dx,
+						y: cur.y + dy
+					}, b.contentW, b.contentH, b.viewW, b.viewH));
+					g.lastMid = {
+						x: e.clientX,
+						y: e.clientY
+					};
+				}
+			}, [bounds, zoomBy]);
+			const onPointerUp = (0, react.useCallback)((e) => {
+				const g = gesture.current;
+				const wasSingle = g.pointers.size === 1;
+				g.pointers.delete(e.pointerId);
+				if (g.pointers.size < 2) g.pinchBase = null;
+				if (g.pointers.size === 0) {
+					g.panning = false;
+					g.lastMid = null;
+					setGesturing(false);
+					if (wasSingle && !g.moved && e.pointerType !== "mouse") {
+						const now = performance.now();
+						const last = lastTapRef.current;
+						if (last !== null && now - last.t < 320 && Math.hypot(e.clientX - last.x, e.clientY - last.y) < 32) {
+							const b = bounds();
+							if (atFitRef.current) {
+								setTf(clampPan({
+									x: (b.viewW - b.contentW) / 2,
+									y: Math.max(24, (b.viewH - b.contentH) / 2),
+									scale: 1
+								}, b.contentW, b.contentH, b.viewW, b.viewH));
+								atFitRef.current = false;
+							} else refit();
+							lastTapRef.current = null;
+						} else lastTapRef.current = {
+							t: now,
+							x: e.clientX,
+							y: e.clientY
+						};
+					}
+				} else if (g.pointers.size === 1) {
+					const only = [...g.pointers.values()][0];
+					g.lastMid = {
+						x: only.x,
+						y: only.y
+					};
+					g.panning = true;
+				}
+			}, [bounds, refit]);
+			const onWheel = (0, react.useCallback)((e) => {
+				e.preventDefault();
+				const rect = stageRef.current?.getBoundingClientRect();
+				if (rect === void 0) return;
+				zoomBy(e.deltaY < 0 ? STEP : 1 / STEP, e.clientX - rect.left, e.clientY - rect.top);
+			}, [zoomBy]);
+			const onDoubleClick = (0, react.useCallback)(() => {
+				if (lastPointerTypeRef.current !== "mouse") return;
+				const b = bounds();
+				if (atFitRef.current) {
+					setTf(clampPan({
+						x: (b.viewW - b.contentW) / 2,
+						y: Math.max(24, (b.viewH - b.contentH) / 2),
+						scale: 1
+					}, b.contentW, b.contentH, b.viewW, b.viewH));
+					atFitRef.current = false;
+				} else refit();
+			}, [bounds, refit]);
+			return (0, react.createElement)("div", {
+				ref: stageRef,
+				"data-testid": testid,
+				"data-noswipe": "",
+				className: `lks14-stage${grid ? " grid" : ""}`,
+				onPointerDown,
+				onPointerMove,
+				onPointerUp,
+				onPointerCancel: onPointerUp,
+				onWheel,
+				onDoubleClick
+			}, (0, react.createElement)("div", {
+				ref: contentRef,
+				className: `lks14-stage-content${gesturing ? "" : " glide"}`,
+				style: {
+					transform: `translate(${String(tf.x)}px, ${String(tf.y)}px) scale(${String(tf.scale)})`,
+					transformOrigin: "0 0"
+				}
+			}, children), (0, react.createElement)("div", {
+				className: "lks14-stage-tools",
+				"data-testid": "canvas-zoom-controls"
+			}, (0, react.createElement)("button", {
+				onClick: () => {
+					zoomBy(1 / STEP);
+				},
+				disabled: tf.scale <= .050001000000000004,
+				"aria-label": tr("artifact.zoomOut"),
+				"data-testid": "canvas-zoom-out"
+			}, "−"), (0, react.createElement)("span", { "data-testid": "canvas-zoom-pct" }, `${String(Math.round(tf.scale * 100))}%`), (0, react.createElement)("button", {
+				onClick: () => {
+					zoomBy(STEP);
+				},
+				disabled: tf.scale >= 3.999999,
+				"aria-label": tr("artifact.zoomIn"),
+				"data-testid": "canvas-zoom-in"
+			}, (0, react.createElement)(IconPlusOutline16, { size: 14 })), (0, react.createElement)("button", {
+				onClick: () => {
+					refit();
+				},
+				"aria-label": tr("artifact.canvas.fit"),
+				"data-testid": "canvas-zoom-fit"
+			}, (0, react.createElement)(IconMaximizeOutline16, { size: 14 }))), (0, react.createElement)("span", {
+				"data-testid": "canvas-natural-size",
+				className: "lks14-stage-probe"
+			}, size === null ? "" : `${String(size.w)}x${String(size.h)}`));
+		}
+		//#endregion
+		//#region src/client/celebration.ts
+		const listeners = /* @__PURE__ */ new Set();
+		/** 触发一次庆祝(任何组件都可调)。渲染由 <CelebrationLayer> 统一处理。 */
+		function celebrate(kind, opts) {
+			const e = {
+				kind,
+				intensity: opts?.intensity,
+				origin: opts?.origin,
+				ts: typeof performance !== "undefined" ? performance.now() : Date.now()
+			};
+			for (const l of listeners) l(e);
+		}
+		/** 订阅庆祝事件(<CelebrationLayer> 用)。返回取消订阅。 */
+		function onCelebration(l) {
+			listeners.add(l);
+			return () => {
+				listeners.delete(l);
+			};
+		}
+		/** 按 kind 推断默认粒子数/持续时长/配色(upstream verbatim)。 */
+		function celebrationDefaults(kind) {
+			switch (kind) {
+				case "correct": return {
+					particles: 28,
+					durationMs: 700,
+					colors: [
+						"#58cc02",
+						"#7ed957",
+						"#ffc800"
+					]
+				};
+				case "mastery":
+				case "level-up": return {
+					particles: 48,
+					durationMs: 1100,
+					colors: [
+						"#ffc800",
+						"#ffe680",
+						"#fff7c2"
+					]
+				};
+				case "unlock": return {
+					particles: 32,
+					durationMs: 800,
+					colors: [
+						"#58cc02",
+						"#1cb0f6",
+						"#ffffff"
+					]
+				};
+				case "exam-pass": return {
+					particles: 56,
+					durationMs: 1200,
+					colors: [
+						"#a855f7",
+						"#c084fc",
+						"#ffc800"
+					]
+				};
+				case "lesson-complete": return {
+					particles: 40,
+					durationMs: 1e3,
+					colors: [
+						"#58cc02",
+						"#ffc800",
+						"#1cb0f6"
+					]
+				};
+				case "energy-full": return {
+					particles: 36,
+					durationMs: 900,
+					colors: [
+						"#58cc02",
+						"#7ed957",
+						"#ffffff"
+					]
+				};
+				case "streak": return {
+					particles: 24,
+					durationMs: 700,
+					colors: [
+						"#ff7a1a",
+						"#ffc800",
+						"#ffffff"
+					]
+				};
+				case "wrong": return {
+					particles: 12,
+					durationMs: 450,
+					colors: ["#ff4b4b", "#ff7a7a"]
+				};
+				default: return {
+					particles: 20,
+					durationMs: 600,
+					colors: ["#58cc02", "#ffffff"]
+				};
+			}
+		}
+		/** The reduced-motion fallback glyph per kind (semantic color, drawn statically). */
+		function iconFor(kind) {
+			switch (kind) {
+				case "correct": return {
+					icon: "✓",
+					color: "var(--brand)"
+				};
+				case "wrong": return {
+					icon: "✕",
+					color: "var(--warning)"
+				};
+				case "mastery":
+				case "level-up": return {
+					icon: "♛",
+					color: "var(--gold)"
+				};
+				case "unlock": return {
+					icon: "✦",
+					color: "var(--brand)"
+				};
+				case "streak": return {
+					icon: "▲",
+					color: "var(--review)"
+				};
+				case "energy-full": return {
+					icon: "⚡",
+					color: "var(--brand)"
+				};
+				case "exam-pass": return {
+					icon: "✪",
+					color: "var(--exam)"
+				};
+				case "lesson-complete": return {
+					icon: "☆",
+					color: "var(--gold)"
+				};
+				default: return {
+					icon: "✦",
+					color: "var(--brand)"
+				};
+			}
+		}
+		/**
+		* Diff two poll snapshots into the celebrations to fire (pure — the panel
+		* maps unlock ids to on-screen bubble anchors). First sight (prev null)
+		* seeds every baseline silently — upstream seeds its refs from the initial
+		* fetch BEFORE subscribing, so a page opened mid-fulfilled-day never
+		* celebrates; streak fires only on an INCREASE; energy-full on the first
+		* goal crossing (prev < goal ≤ now).
+		*/
+		function celebrationDiff(prev, next) {
+			const out = [];
+			if (prev !== null) {
+				const was = new Map(prev.lessons.map((l) => [l.id, l.status]));
+				for (const l of next.lessons) {
+					const before = was.get(l.id);
+					if (before === void 0 || before === l.status) continue;
+					if (before === "locked" && l.status === "available") out.push({
+						kind: "unlock",
+						lessonId: l.id
+					});
+					else if (l.status === "mastered") out.push({
+						kind: "mastery",
+						lessonId: l.id
+					});
+				}
+				if (next.streak > prev.streak) out.push({ kind: "streak" });
+			}
+			if (prev === null) return [];
+			const full = next.dailyGoal > 0 && next.todayXp >= next.dailyGoal;
+			const wasFull = prev.dailyGoal > 0 && prev.todayXp >= prev.dailyGoal;
+			if (full && !wasFull) out.push({ kind: "energy-full" });
+			return out;
+		}
+		/**
+		* Seed one burst's particles (pure; upstream burst() extracted for tests).
+		* `rand` injects randomness so tests can freeze the spread.
+		*/
+		function seedBurst(event, viewport, rand = Math.random) {
+			const def = celebrationDefaults(event.kind);
+			const n = Math.round(def.particles * (event.intensity ?? 1));
+			const ox = event.origin?.x ?? viewport.w / 2;
+			const oy = event.origin?.y ?? viewport.h / 2;
+			const out = [];
+			for (let i = 0; i < n; i++) {
+				const angle = Math.PI * 2 * i / n + rand() * .3;
+				const speed = 3 + rand() * 6;
+				const maxLife = def.durationMs / 16 * (.7 + rand() * .5);
+				out.push({
+					x: ox,
+					y: oy,
+					vx: Math.cos(angle) * speed,
+					vy: Math.sin(angle) * speed - 2,
+					life: maxLife,
+					maxLife,
+					color: def.colors[i % def.colors.length],
+					size: 4 + rand() * 5,
+					rot: rand() * Math.PI,
+					vr: (rand() - .5) * .3,
+					shape: rand() < .5 ? "rect" : "circle"
+				});
+			}
+			return out;
+		}
+		/** Advance one particle one frame (pure; gravity + drag + spin). Dead ⇒ null. */
+		function stepParticle(p) {
+			const life = p.life - 1;
+			if (life <= 0) return null;
+			return {
+				...p,
+				x: p.x + p.vx,
+				y: p.y + p.vy,
+				vy: p.vy + .25,
+				vx: p.vx * .99,
+				rot: p.rot + p.vr,
+				life
+			};
+		}
+		/** Fading alpha 1 → 0 across the particle's life (pure). */
+		function particleAlpha(p) {
+			return Math.min(1, p.life / p.maxLife);
+		}
+		/**
+		* The exits after one finished card — never fewer than two (the anti-dead-end
+		* promise). Wrong answers → patch the hole first; perfect + near-mastered →
+		* offer the mastery exit; perfect + already graduated → move on.
+		* Pure port of upstream getPostQuizActions.
+		*/
+		function getPostQuizActions(score, mastery) {
 			const { correct, total } = score;
 			const allCorrect = total > 0 && correct === total;
 			const hasWrong = total > 0 && correct < total;
@@ -6177,7 +6572,8 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				const raw = storage.getItem(quizProgressKey(lessonId, artifactId));
 				if (raw === null) return {
 					answers: Array(questionCount).fill(-1),
-					done: false
+					done: false,
+					hooked: false
 				};
 				const parsed = JSON.parse(raw);
 				const answers = Array.isArray(parsed.answers) ? parsed.answers.map((a) => typeof a === "number" ? a : -1) : [];
@@ -6185,12 +6581,14 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				for (let i = 0; i < Math.min(answers.length, questionCount); i += 1) padded[i] = answers[i];
 				return {
 					answers: padded,
-					done: parsed.done === true
+					done: parsed.done === true,
+					hooked: parsed.hooked === true || parsed.done === true
 				};
 			} catch {
 				return {
 					answers: Array(questionCount).fill(-1),
-					done: false
+					done: false,
+					hooked: false
 				};
 			}
 		}
@@ -6209,555 +6607,163 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				total += 1;
 				if (choice === q.answer) correct += 1;
 			});
-			return {
-				correct,
-				total
-			};
-		}
-		/**
-		* C5 option tone under select-then-submit: before the commit the tone NEVER
-		* leaks correctness (only the pick highlight); after it, the judged pair
-		* (right/wrong/dim) shows. Pure.
-		*/
-		function optionTone(chosen, pending, i, isRight) {
-			if (chosen >= 0) return chosen === i ? isRight ? " right" : " wrong" : isRight ? " right dim" : "";
-			return pending === i ? " picked" : "";
-		}
-		const ACTION_ICONS = {
-			"explain-wrong": IconBookFill16,
-			"retry": IconRefreshOutline16,
-			"go-deeper": IconBoltFill16,
-			"mark-mastered": IconCrownFill16,
-			"next-topic": IconStarFill16
-		};
-		/**
-		* The card: one question at a time, click-to-answer (instant local judge +
-		* explanation reveal — the cursor is explicit, so the reveal is never skipped),
-		* progress persisted per artifact; the score screen is an explicit step, and
-		* on first arrival its completion hook goes to the tutor exactly once.
-		*/
-		function QuizCard({ lessonId, artifactId, data, masteryPct, send, onFinished }) {
-			const questions = data.questions;
-			const [progress, setProgress] = (0, react.useState)(() => loadQuizProgress(lessonId, artifactId, questions.length));
-			const [cursor, setCursor] = (0, react.useState)(0);
-			const [showScore, setShowScore] = (0, react.useState)(false);
-			const [hookSent, setHookSent] = (0, react.useState)(false);
-			const [pending, setPending] = (0, react.useState)(null);
-			const rootRef = (0, react.useRef)(null);
-			(0, react.useEffect)(() => {
-				const next = loadQuizProgress(lessonId, artifactId, questions.length);
-				setProgress(next);
-				setShowScore(next.done);
-				const firstUnanswered = next.answers.findIndex((a) => a < 0);
-				setCursor(firstUnanswered === -1 ? questions.length - 1 : firstUnanswered);
-				setHookSent(false);
-				setPending(null);
-			}, [
-				lessonId,
-				artifactId,
-				questions.length
-			]);
-			const allAnswered = progress.answers.every((a) => a >= 0);
-			const score = quizScore(data, progress.answers);
-			const mastery = masteryPct === null ? null : masteryPct / 100;
-			(0, react.useEffect)(() => {
-				if (!showScore || !allAnswered || hookSent) return;
-				setHookSent(true);
-				onFinished?.(score.correct === score.total);
-				studyStore.reportPracticeGraded(lessonId);
-				const next = {
-					answers: [...progress.answers],
-					done: true
-				};
-				setProgress(next);
-				saveQuizProgress(lessonId, artifactId, next);
-				send(tr("quiz.hook", {
-					correct: score.correct,
-					total: score.total
-				}));
-			}, [
-				showScore,
-				allAnswered,
-				hookSent,
-				lessonId,
-				artifactId,
-				progress.answers,
-				score.correct,
-				score.total,
-				send
-			]);
-			const answer = (choice) => {
-				const next = {
-					answers: [...progress.answers],
-					done: progress.done
-				};
-				next.answers[cursor] = choice;
-				setProgress(next);
-				saveQuizProgress(lessonId, artifactId, next);
-				const correct = choice === questions[cursor].answer;
-				const el = rootRef.current;
-				const r = correct && el !== null ? el.getBoundingClientRect() : null;
-				celebrate(correct ? "correct" : "wrong", r !== null ? { origin: {
-					x: r.right - 48,
-					y: r.top + 24
-				} } : void 0);
-			};
-			if (showScore && allAnswered) {
-				const actions = getPostQuizActions(score, mastery);
-				return (0, react.createElement)("div", {
-					className: "lks-qcard",
-					"data-lks-quiz": artifactId,
-					ref: rootRef
-				}, (0, react.createElement)("div", { className: "lks-qcard-head" }, (0, react.createElement)(IconStarFill16, { size: 14 }), tr("quiz.score", {
-					correct: score.correct,
-					total: score.total
-				})), (0, react.createElement)("div", { className: "lks-qcard-review" }, ...questions.map((q, i) => {
-					const choice = progress.answers[i] ?? -1;
-					const right = choice === q.answer;
-					return (0, react.createElement)("div", {
-						key: i,
-						className: `lks-qcard-q review${right ? "" : " wrong"}`
-					}, (0, react.createElement)("div", { className: "lks-qcard-prompt" }, `${i + 1}. ${q.prompt}`), (0, react.createElement)("div", { className: "lks-qcard-ans" }, right ? "" : `${tr("quiz.youChose")}：${q.options[choice] ?? "—"} · `, `${tr("quiz.answer")}：${q.options[q.answer] ?? "—"}`), (0, react.createElement)("div", { className: "lks-qcard-expl" }, q.explanation));
-				})), (0, react.createElement)("div", { className: "lks-qcard-actions" }, ...actions.map((a) => (0, react.createElement)("button", {
-					key: a.id,
-					className: "lks-qcard-action",
-					"data-tooltip": a.advancesMastery ? tr("quiz.action.markMastered.hint") : void 0,
-					onClick: () => {
-						send(tr(`quiz.msg.${a.id}`));
-					}
-				}, (0, react.createElement)(ACTION_ICONS[a.id], { size: 13 }), tr(`quiz.action.${a.id}`)))));
-			}
-			const q = questions[cursor];
-			const chosen = progress.answers[cursor] ?? -1;
-			const options = q.options.map((opt, i) => {
-				const tone = optionTone(chosen, pending, i, i === q.answer);
-				return (0, react.createElement)("button", {
-					key: i,
-					className: `lks-qcard-opt${tone}`,
-					disabled: chosen >= 0,
-					onClick: () => {
-						setPending(i);
-					}
-				}, opt);
-			});
-			const submitRow = chosen < 0 && pending !== null ? (0, react.createElement)("div", { style: { marginTop: "6px" } }, (0, react.createElement)("button", {
-				className: "lks-qcard-next",
-				onClick: () => {
-					answer(pending);
-					setPending(null);
-				}
-			}, tr("quiz.submit"))) : null;
-			const explanation = chosen < 0 ? submitRow : (0, react.createElement)("div", { className: "lks-qcard-expl" }, `${chosen === q.answer ? tr("quiz.right") : tr("quiz.wrong")} — ${q.explanation}`, (0, react.createElement)("div", { style: { marginTop: "6px" } }, (0, react.createElement)("button", {
-				className: "lks-qcard-next",
-				onClick: () => {
-					setPending(null);
-					if (cursor + 1 < questions.length) setCursor(cursor + 1);
-					else setShowScore(true);
-				}
-			}, cursor + 1 < questions.length ? tr("quiz.next") : tr("quiz.finish"))));
-			return (0, react.createElement)("div", {
-				className: "lks-qcard",
-				"data-lks-quiz": artifactId,
-				ref: rootRef
-			}, (0, react.createElement)("div", { className: "lks-qcard-head" }, (0, react.createElement)(IconBookFill16, { size: 14 }), data.title ?? tr("quiz.card.title"), (0, react.createElement)("span", { className: "lks-qcard-count" }, tr("quiz.progress", {
-				cur: cursor + 1,
-				total: questions.length
-			}))), (0, react.createElement)("div", { className: "lks-qcard-q" }, (0, react.createElement)("div", { className: "lks-qcard-prompt" }, q.prompt), (0, react.createElement)("div", { className: "lks-qcard-opts" }, ...options), explanation));
-		}
-		//#endregion
-		//#region src/vendor/panzoom.ts
-		/** 适屏(contain)缩放:内容完整装进视口(留 padding 边距),不超出 1。 */
-		function fitScale(contentW, contentH, viewW, viewH, padding = 24) {
-			if (contentW <= 0 || contentH <= 0 || viewW <= 0 || viewH <= 0) return 1;
-			const s = Math.min((viewW - padding * 2) / contentW, (viewH - padding * 2) / contentH, 1);
-			return Math.max(.02, s);
-		}
-		/** 适屏位姿:居中。 */
-		function fitTransform(contentW, contentH, viewW, viewH, padding = 24) {
-			const scale = fitScale(contentW, contentH, viewW, viewH, padding);
-			return {
-				scale,
-				x: (viewW - contentW * scale) / 2,
-				y: (viewH - contentH * scale) / 2
-			};
-		}
-		/**
-		* 锚点缩放:factor>1 放大。锚点 (ax,ay) 是视口坐标 —— 缩放后锚点对准的内容点
-		* 保持不动(标准图像查看器数学:new = anchor - (anchor - old) * factor)。
-		*/
-		function zoomAt(t, factor, ax, ay) {
-			return {
-				scale: t.scale * factor,
-				x: ax - (ax - t.x) * factor,
-				y: ay - (ay - t.y) * factor
+			return {
+				correct,
+				total
 			};
 		}
 		/**
-		* 平移钳制:内容不会被拖到完全离屏 —— 至少留 `keep`(默认 64px)可见,
-		* 且内容小于视口时不允许拖走(保持居中观感)。
+		* C5 option tone under select-then-submit: before the commit the tone NEVER
+		* leaks correctness (only the pick highlight); after it, the judged pair
+		* (right/wrong/dim) shows. Pure.
 		*/
-		function clampPan(t, contentW, contentH, viewW, viewH, keep = 64) {
-			const w = contentW * t.scale;
-			const h = contentH * t.scale;
-			let { x, y } = t;
-			if (w <= viewW) x = (viewW - w) / 2;
-			else x = Math.min(Math.max(x, viewW - w - keep), keep);
-			if (h <= viewH) y = (viewH - h) / 2;
-			else y = Math.min(Math.max(y, viewH - h - keep), keep);
-			return {
-				x,
-				y,
-				scale: t.scale
-			};
-		}
-		/** 钳制缩放(先算锚点缩放,再夹 scale 到 [min,max],再钳平移)。 */
-		function zoomAtClamped(t, factor, ax, ay, bounds) {
-			const target = t.scale * factor;
-			const clampedFactor = Math.min(Math.max(target, bounds.min), bounds.max) / t.scale;
-			if (clampedFactor === 1) return t;
-			return clampPan(zoomAt(t, clampedFactor, ax, ay), bounds.contentW, bounds.contentH, bounds.viewW, bounds.viewH);
+		function optionTone(chosen, pending, i, isRight) {
+			if (chosen >= 0) return chosen === i ? isRight ? " right" : " wrong" : isRight ? " right dim" : "";
+			return pending === i ? " picked" : "";
 		}
-		//#endregion
-		//#region src/client/canvasstage.tsx
+		const ACTION_ICONS = {
+			"explain-wrong": IconBookFill16,
+			"retry": IconRefreshOutline16,
+			"go-deeper": IconBoltFill16,
+			"mark-mastered": IconCrownFill16,
+			"next-topic": IconStarFill16
+		};
 		/**
-		* CanvasStage (P14, upstream CanvasStage.tsx port): the canvas-style artifact
-		* stage — content keeps its natural size and one transform (translate+scale)
-		* does everything. Gestures: single-pointer drag pan, two-pointer pinch
-		* anchored at the midpoint, wheel zoom anchored at the cursor, double
-		* click/tap toggles fit↔100%. ResizeObserver refits on content/stage size
-		* changes (mermaid's async svg) — through the #12 gates: value-equality on
-		* setSize, a bounds-differ short-circuit on refit, rAF coalescing, and a
-		* recurrence-tripping oscillation breaker (see makeRefitBreaker). A floating
-		* −/%/fit/+ toolbar stays mounted. Shared by the notebook's board tab and
-		* the diagram modals.
-		* (lucide glyphs collapse to text/plugin icons; the client stays dependency-
-		* free.)
-		* @module dsh-plugin-lookatstudy/client/canvasstage
+		* The card: one question at a time, click-to-answer (instant local judge +
+		* explanation reveal — the cursor is explicit, so the reveal is never skipped),
+		* progress persisted per artifact; the score screen is an explicit step, and
+		* its completion hook goes to the tutor exactly once per card — the receipt
+		* persists beside the progress (issue #14).
 		*/
-		const MIN_SCALE = .05;
-		const MAX_SCALE = 4;
-		/** 工具条步进(手势/滚轮连续,按钮给干脆的一档)。 */
-		const STEP = 1.25;
-		/** True when the two bounds readings differ in ANY field — the auto-refit
-		* short-circuit. The pre-fix refit ran fitTransform on every RO callback with
-		* zero hysteresis, so any feedback touching a size re-fired it forever. */
-		function stageBoundsDiffer(a, b) {
-			if (a === null) return true;
-			return a.contentW !== b.contentW || a.contentH !== b.contentH || a.viewW !== b.viewW || a.viewH !== b.viewH;
-		}
-		function makeRefitBreaker(opts = {}) {
-			const windowMs = opts.windowMs ?? 2e3;
-			const now = opts.now ?? (() => performance.now());
-			let seen = [];
-			let tripped = false;
-			return {
-				allow(key) {
-					const t = now();
-					seen = seen.filter((s) => t - s.t < windowMs);
-					if (tripped) return false;
-					if (seen.some((s) => s.key === key)) {
-						tripped = true;
-						return false;
-					}
-					seen.push({
-						t,
-						key
-					});
-					return true;
-				},
-				reset() {
-					seen = [];
-					tripped = false;
-				},
-				tripped() {
-					return tripped;
-				}
-			};
-		}
-		const boundsKey = (b) => `${String(b.contentW)}x${String(b.contentH)}@${String(b.viewW)}x${String(b.viewH)}`;
-		function CanvasStage({ children, grid = true, testid }) {
-			const stageRef = (0, react.useRef)(null);
-			const contentRef = (0, react.useRef)(null);
-			const [tf, setTf] = (0, react.useState)({
-				x: 0,
-				y: 0,
-				scale: 1
-			});
-			const [size, setSize] = (0, react.useState)(null);
-			/** 活跃手势中禁用过渡(跟手必须即时;按钮缩放才享受平滑)。 */
-			const [gesturing, setGesturing] = (0, react.useState)(false);
-			const lastPointerTypeRef = (0, react.useRef)("mouse");
-			const atFitRef = (0, react.useRef)(true);
-			const gesture = (0, react.useRef)({
-				pointers: /* @__PURE__ */ new Map(),
-				pinchBase: null,
-				lastMid: null,
-				panning: false,
-				moved: false
-			});
-			const lastTapRef = (0, react.useRef)(null);
-			const lastBoundsRef = (0, react.useRef)(null);
-			const breakerRef = (0, react.useRef)(null);
-			if (breakerRef.current === null) breakerRef.current = makeRefitBreaker();
-			const bounds = (0, react.useCallback)(() => {
-				const stage = stageRef.current;
-				const content = contentRef.current;
-				return {
-					min: MIN_SCALE,
-					max: MAX_SCALE,
-					contentW: content?.offsetWidth ?? 0,
-					contentH: content?.offsetHeight ?? 0,
-					viewW: stage?.clientWidth ?? 0,
-					viewH: stage?.clientHeight ?? 0
-				};
-			}, []);
-			const currentBounds = (0, react.useCallback)(() => ({
-				contentW: contentRef.current?.offsetWidth ?? 0,
-				contentH: contentRef.current?.offsetHeight ?? 0,
-				viewW: stageRef.current?.clientWidth ?? 0,
-				viewH: stageRef.current?.clientHeight ?? 0
-			}), []);
-			const applyFit = (0, react.useCallback)((b) => {
-				setTf(fitTransform(b.contentW, b.contentH, b.viewW, b.viewH));
-				atFitRef.current = true;
-			}, []);
-			const refit = (0, react.useCallback)(() => {
-				breakerRef.current?.reset();
-				const b = currentBounds();
-				if (b.contentW === 0 || b.viewW === 0) return;
-				lastBoundsRef.current = b;
-				applyFit(b);
-			}, [currentBounds, applyFit]);
-			const measureNow = (0, react.useCallback)(() => {
-				const content = contentRef.current;
-				if (content === null) return;
-				const w = content.offsetWidth;
-				const h = content.offsetHeight;
-				setSize((prev) => prev !== null && prev.w === w && prev.h === h ? prev : {
-					w,
-					h
-				});
-				const b = currentBounds();
-				if (!stageBoundsDiffer(lastBoundsRef.current, b)) return;
-				lastBoundsRef.current = b;
-				if (b.contentW === 0 || b.viewW === 0) return;
-				if (b.contentW < 120) return;
-				if ((breakerRef.current ?? makeRefitBreaker()).allow(boundsKey(b))) applyFit(b);
-			}, [currentBounds, applyFit]);
-			(0, react.useEffect)(() => {
-				const stage = stageRef.current;
-				const content = contentRef.current;
-				if (stage === null || content === null) return;
-				measureNow();
-				let raf = 0;
-				const onRo = () => {
-					if (raf !== 0) return;
-					raf = requestAnimationFrame(() => {
-						raf = 0;
-						measureNow();
-					});
-				};
-				const ro = new ResizeObserver(onRo);
-				ro.observe(content);
-				ro.observe(stage);
-				return () => {
-					ro.disconnect();
-					if (raf !== 0) cancelAnimationFrame(raf);
-				};
-			}, [measureNow]);
-			const zoomBy = (0, react.useCallback)((factor, ax, ay) => {
-				breakerRef.current?.reset();
-				const b = bounds();
-				const cx = ax ?? b.viewW / 2;
-				const cy = ay ?? b.viewH / 2;
-				setTf((cur) => zoomAtClamped(cur, factor, cx, cy, b));
-				atFitRef.current = false;
-			}, [bounds]);
-			const onPointerDown = (0, react.useCallback)((e) => {
-				if (e.target.closest?.("[data-testid=\"canvas-zoom-controls\"]") !== null) return;
-				const el = e.currentTarget;
-				try {
-					el.setPointerCapture(e.pointerId);
-				} catch {}
-				const g = gesture.current;
-				lastPointerTypeRef.current = e.pointerType;
-				if (g.pointers.size === 0) setGesturing(true);
-				g.pointers.set(e.pointerId, {
-					x: e.clientX,
-					y: e.clientY
-				});
-				if (g.pointers.size === 2) {
-					const [p1, p2] = [...g.pointers.values()];
-					g.pinchBase = {
-						dist: Math.hypot(p1.x - p2.x, p1.y - p2.y),
-						factorAcc: 1
-					};
-					g.lastMid = {
-						x: (p1.x + p2.x) / 2,
-						y: (p1.y + p2.y) / 2
-					};
-					g.panning = false;
-				} else if (g.pointers.size === 1) {
-					g.panning = true;
-					g.moved = false;
-					g.lastMid = {
-						x: e.clientX,
-						y: e.clientY
-					};
-				}
-			}, []);
-			const onPointerMove = (0, react.useCallback)((e) => {
-				const g = gesture.current;
-				if (!g.pointers.has(e.pointerId)) return;
-				g.pointers.set(e.pointerId, {
-					x: e.clientX,
-					y: e.clientY
-				});
-				const stage = stageRef.current;
-				if (stage === null) return;
-				const rect = stage.getBoundingClientRect();
-				if (g.pointers.size >= 2 && g.pinchBase !== null) {
-					const [p1, p2] = [...g.pointers.values()];
-					const dist = Math.hypot(p1.x - p2.x, p1.y - p2.y);
-					const mid = {
-						x: (p1.x + p2.x) / 2,
-						y: (p1.y + p2.y) / 2
-					};
-					if (g.pinchBase.dist > 0) {
-						const factor = dist / g.pinchBase.dist / g.pinchBase.factorAcc;
-						g.pinchBase.factorAcc *= factor;
-						zoomBy(factor, mid.x - rect.left, mid.y - rect.top);
+		function QuizCard({ lessonId, artifactId, data, masteryPct, send, onFinished }) {
+			const questions = data.questions;
+			const [progress, setProgress] = (0, react.useState)(() => loadQuizProgress(lessonId, artifactId, questions.length));
+			const [cursor, setCursor] = (0, react.useState)(0);
+			const [showScore, setShowScore] = (0, react.useState)(false);
+			const [hookSent, setHookSent] = (0, react.useState)(false);
+			const [pending, setPending] = (0, react.useState)(null);
+			const rootRef = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				const next = loadQuizProgress(lessonId, artifactId, questions.length);
+				setProgress(next);
+				setShowScore(next.done);
+				const firstUnanswered = next.answers.findIndex((a) => a < 0);
+				setCursor(firstUnanswered === -1 ? questions.length - 1 : firstUnanswered);
+				setHookSent(next.hooked);
+				setPending(null);
+			}, [
+				lessonId,
+				artifactId,
+				questions.length
+			]);
+			const allAnswered = progress.answers.every((a) => a >= 0);
+			const score = quizScore(data, progress.answers);
+			const mastery = masteryPct === null ? null : masteryPct / 100;
+			(0, react.useEffect)(() => {
+				if (!showScore || !allAnswered || hookSent) return;
+				setHookSent(true);
+				onFinished?.(score.correct === score.total);
+				studyStore.reportPracticeGraded(lessonId);
+				const next = {
+					answers: [...progress.answers],
+					done: true,
+					hooked: true
+				};
+				setProgress(next);
+				saveQuizProgress(lessonId, artifactId, next);
+				send(tr("quiz.hook", {
+					correct: score.correct,
+					total: score.total
+				}));
+			}, [
+				showScore,
+				allAnswered,
+				hookSent,
+				lessonId,
+				artifactId,
+				progress.answers,
+				score.correct,
+				score.total,
+				send
+			]);
+			const answer = (choice) => {
+				const next = {
+					answers: [...progress.answers],
+					done: progress.done,
+					hooked: progress.hooked
+				};
+				next.answers[cursor] = choice;
+				setProgress(next);
+				saveQuizProgress(lessonId, artifactId, next);
+				const correct = choice === questions[cursor].answer;
+				const el = rootRef.current;
+				const r = correct && el !== null ? el.getBoundingClientRect() : null;
+				celebrate(correct ? "correct" : "wrong", r !== null ? { origin: {
+					x: r.right - 48,
+					y: r.top + 24
+				} } : void 0);
+			};
+			if (showScore && allAnswered) {
+				const actions = getPostQuizActions(score, mastery);
+				return (0, react.createElement)("div", {
+					className: "lks-qcard",
+					"data-lks-quiz": artifactId,
+					ref: rootRef
+				}, (0, react.createElement)("div", { className: "lks-qcard-head" }, (0, react.createElement)(IconStarFill16, { size: 14 }), tr("quiz.score", {
+					correct: score.correct,
+					total: score.total
+				})), (0, react.createElement)("div", { className: "lks-qcard-review" }, ...questions.map((q, i) => {
+					const choice = progress.answers[i] ?? -1;
+					const right = choice === q.answer;
+					return (0, react.createElement)("div", {
+						key: i,
+						className: `lks-qcard-q review${right ? "" : " wrong"}`
+					}, (0, react.createElement)("div", { className: "lks-qcard-prompt" }, `${i + 1}. ${q.prompt}`), (0, react.createElement)("div", { className: "lks-qcard-ans" }, right ? "" : `${tr("quiz.youChose")}：${q.options[choice] ?? "—"} · `, `${tr("quiz.answer")}：${q.options[q.answer] ?? "—"}`), (0, react.createElement)("div", { className: "lks-qcard-expl" }, q.explanation));
+				})), (0, react.createElement)("div", { className: "lks-qcard-actions" }, ...actions.map((a) => (0, react.createElement)("button", {
+					key: a.id,
+					className: "lks-qcard-action",
+					"data-tooltip": a.advancesMastery ? tr("quiz.action.markMastered.hint") : void 0,
+					onClick: () => {
+						send(tr(`quiz.msg.${a.id}`));
 					}
-					if (g.lastMid !== null) {
-						const dx = mid.x - g.lastMid.x;
-						const dy = mid.y - g.lastMid.y;
-						const b = bounds();
-						setTf((cur) => clampPan({
-							...cur,
-							x: cur.x + dx,
-							y: cur.y + dy
-						}, b.contentW, b.contentH, b.viewW, b.viewH));
+				}, (0, react.createElement)(ACTION_ICONS[a.id], { size: 13 }), tr(`quiz.action.${a.id}`)))));
+			}
+			const q = questions[cursor];
+			const chosen = progress.answers[cursor] ?? -1;
+			const options = q.options.map((opt, i) => {
+				const tone = optionTone(chosen, pending, i, i === q.answer);
+				return (0, react.createElement)("button", {
+					key: i,
+					className: `lks-qcard-opt${tone}`,
+					disabled: chosen >= 0,
+					onClick: () => {
+						setPending(i);
 					}
-					g.lastMid = mid;
-					return;
-				}
-				if (g.panning && g.lastMid !== null) {
-					const dx = e.clientX - g.lastMid.x;
-					const dy = e.clientY - g.lastMid.y;
-					if (Math.abs(dx) + Math.abs(dy) > 2) g.moved = true;
-					const b = bounds();
-					setTf((cur) => clampPan({
-						...cur,
-						x: cur.x + dx,
-						y: cur.y + dy
-					}, b.contentW, b.contentH, b.viewW, b.viewH));
-					g.lastMid = {
-						x: e.clientX,
-						y: e.clientY
-					};
+				}, opt);
+			});
+			const submitRow = chosen < 0 && pending !== null ? (0, react.createElement)("div", { style: { marginTop: "6px" } }, (0, react.createElement)("button", {
+				className: "lks-qcard-next",
+				onClick: () => {
+					answer(pending);
+					setPending(null);
 				}
-			}, [bounds, zoomBy]);
-			const onPointerUp = (0, react.useCallback)((e) => {
-				const g = gesture.current;
-				const wasSingle = g.pointers.size === 1;
-				g.pointers.delete(e.pointerId);
-				if (g.pointers.size < 2) g.pinchBase = null;
-				if (g.pointers.size === 0) {
-					g.panning = false;
-					g.lastMid = null;
-					setGesturing(false);
-					if (wasSingle && !g.moved && e.pointerType !== "mouse") {
-						const now = performance.now();
-						const last = lastTapRef.current;
-						if (last !== null && now - last.t < 320 && Math.hypot(e.clientX - last.x, e.clientY - last.y) < 32) {
-							const b = bounds();
-							if (atFitRef.current) {
-								setTf(clampPan({
-									x: (b.viewW - b.contentW) / 2,
-									y: Math.max(24, (b.viewH - b.contentH) / 2),
-									scale: 1
-								}, b.contentW, b.contentH, b.viewW, b.viewH));
-								atFitRef.current = false;
-							} else refit();
-							lastTapRef.current = null;
-						} else lastTapRef.current = {
-							t: now,
-							x: e.clientX,
-							y: e.clientY
-						};
-					}
-				} else if (g.pointers.size === 1) {
-					const only = [...g.pointers.values()][0];
-					g.lastMid = {
-						x: only.x,
-						y: only.y
-					};
-					g.panning = true;
+			}, tr("quiz.submit"))) : null;
+			const explanation = chosen < 0 ? submitRow : (0, react.createElement)("div", { className: "lks-qcard-expl" }, `${chosen === q.answer ? tr("quiz.right") : tr("quiz.wrong")} — ${q.explanation}`, (0, react.createElement)("div", { style: { marginTop: "6px" } }, (0, react.createElement)("button", {
+				className: "lks-qcard-next",
+				onClick: () => {
+					setPending(null);
+					if (cursor + 1 < questions.length) setCursor(cursor + 1);
+					else setShowScore(true);
 				}
-			}, [bounds, refit]);
-			const onWheel = (0, react.useCallback)((e) => {
-				e.preventDefault();
-				const rect = stageRef.current?.getBoundingClientRect();
-				if (rect === void 0) return;
-				zoomBy(e.deltaY < 0 ? STEP : 1 / STEP, e.clientX - rect.left, e.clientY - rect.top);
-			}, [zoomBy]);
-			const onDoubleClick = (0, react.useCallback)(() => {
-				if (lastPointerTypeRef.current !== "mouse") return;
-				const b = bounds();
-				if (atFitRef.current) {
-					setTf(clampPan({
-						x: (b.viewW - b.contentW) / 2,
-						y: Math.max(24, (b.viewH - b.contentH) / 2),
-						scale: 1
-					}, b.contentW, b.contentH, b.viewW, b.viewH));
-					atFitRef.current = false;
-				} else refit();
-			}, [bounds, refit]);
+			}, cursor + 1 < questions.length ? tr("quiz.next") : tr("quiz.finish"))));
 			return (0, react.createElement)("div", {
-				ref: stageRef,
-				"data-testid": testid,
-				"data-noswipe": "",
-				className: `lks14-stage${grid ? " grid" : ""}`,
-				onPointerDown,
-				onPointerMove,
-				onPointerUp,
-				onPointerCancel: onPointerUp,
-				onWheel,
-				onDoubleClick
-			}, (0, react.createElement)("div", {
-				ref: contentRef,
-				className: `lks14-stage-content${gesturing ? "" : " glide"}`,
-				style: {
-					transform: `translate(${String(tf.x)}px, ${String(tf.y)}px) scale(${String(tf.scale)})`,
-					transformOrigin: "0 0"
-				}
-			}, children), (0, react.createElement)("div", {
-				className: "lks14-stage-tools",
-				"data-testid": "canvas-zoom-controls"
-			}, (0, react.createElement)("button", {
-				onClick: () => {
-					zoomBy(1 / STEP);
-				},
-				disabled: tf.scale <= .050001000000000004,
-				"aria-label": tr("artifact.zoomOut"),
-				"data-testid": "canvas-zoom-out"
-			}, "−"), (0, react.createElement)("span", { "data-testid": "canvas-zoom-pct" }, `${String(Math.round(tf.scale * 100))}%`), (0, react.createElement)("button", {
-				onClick: () => {
-					zoomBy(STEP);
-				},
-				disabled: tf.scale >= 3.999999,
-				"aria-label": tr("artifact.zoomIn"),
-				"data-testid": "canvas-zoom-in"
-			}, (0, react.createElement)(IconPlusOutline16, { size: 14 })), (0, react.createElement)("button", {
-				onClick: () => {
-					refit();
-				},
-				"aria-label": tr("artifact.canvas.fit"),
-				"data-testid": "canvas-zoom-fit"
-			}, (0, react.createElement)(IconMaximizeOutline16, { size: 14 }))), (0, react.createElement)("span", {
-				"data-testid": "canvas-natural-size",
-				className: "lks14-stage-probe"
-			}, size === null ? "" : `${String(size.w)}x${String(size.h)}`));
+				className: "lks-qcard",
+				"data-lks-quiz": artifactId,
+				ref: rootRef
+			}, (0, react.createElement)("div", { className: "lks-qcard-head" }, (0, react.createElement)(IconBookFill16, { size: 14 }), data.title ?? tr("quiz.card.title"), (0, react.createElement)("span", { className: "lks-qcard-count" }, tr("quiz.progress", {
+				cur: cursor + 1,
+				total: questions.length
+			}))), (0, react.createElement)("div", { className: "lks-qcard-q" }, (0, react.createElement)("div", { className: "lks-qcard-prompt" }, q.prompt), (0, react.createElement)("div", { className: "lks-qcard-opts" }, ...options), explanation));
 		}
 		//#endregion
 		//#region src/client/artifact-cards.tsx
@@ -7008,7 +7014,8 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			compare_table: "artifact.kind.compare_table",
 			code_walkthrough: "artifact.kind.code_walkthrough",
 			diagram: "artifact.kind.diagram",
-			guess: "artifact.guess.title"
+			guess: "artifact.guess.title",
+			quiz: "quiz.card.title"
 		};
 		/**
 		* Issue #8: every artifact card wears a fold bar — cards sediment into the
@@ -7018,19 +7025,21 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 		* the teach-stage and backlog surfaces start folded — the lesson prose owns
 		* the first screen, issue #10).
 		*/
-		function FoldableArtifactCard({ artifact, send, defaultFolded = false, revealed = false }) {
-			const [folded, setFolded] = (0, react.useState)(() => acardFoldStoredOf(artifact.id) ?? defaultFolded);
+		function FoldShell({ artifactId, title, defaultFolded, children }) {
+			const [folded, setFolded] = (0, react.useState)(() => acardFoldStoredOf(artifactId) ?? defaultFolded);
+			(0, react.useEffect)(() => {
+				setFolded(acardFoldStoredOf(artifactId) ?? defaultFolded);
+			}, [artifactId, defaultFolded]);
 			const toggle = () => {
 				setFolded((cur) => {
 					const next = !cur;
-					markAcardFoldStored(artifact.id, next);
+					markAcardFoldStored(artifactId, next);
 					return next;
 				});
 			};
-			const title = artifact.title.trim() !== "" ? artifact.title : tr(KIND_LABEL_KEY[artifact.artifactType] ?? "artifact.fold");
 			return (0, react.createElement)("div", {
 				className: `lks-acard-foldwrap${folded ? " folded" : ""}`,
-				"data-lks-artifact": artifact.id
+				"data-lks-artifact": artifactId
 			}, (0, react.createElement)("button", {
 				className: "lks-acard-fold",
 				"aria-expanded": String(!folded),
@@ -7039,12 +7048,43 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 			}, (0, react.createElement)("span", {
 				className: "lks-acard-fold-caret",
 				"aria-hidden": "true"
-			}, folded ? "▸" : "▾"), (0, react.createElement)("span", { className: "lks-acard-fold-title" }, title)), folded ? null : (0, react.createElement)(ArtifactCard, {
+			}, folded ? "▸" : "▾"), (0, react.createElement)("span", { className: "lks-acard-fold-title" }, title)), folded ? null : children);
+		}
+		function FoldableArtifactCard({ artifact, send, defaultFolded = false, revealed = false }) {
+			const title = artifact.title.trim() !== "" ? artifact.title : tr(KIND_LABEL_KEY[artifact.artifactType] ?? "artifact.fold");
+			return (0, react.createElement)(FoldShell, {
+				artifactId: artifact.id,
+				title,
+				defaultFolded
+			}, (0, react.createElement)(ArtifactCard, {
 				artifact,
 				send,
 				revealed
 			}));
 		}
+		/**
+		* Issue #14: quiz cards wear the same fold bar — a finished card's review
+		* screen (every prompt + pick + answer + explanation) otherwise stacks open
+		* forever, and the sediment backlog grows unbounded. Folding UNMOUNTS the
+		* QuizCard: safe, because the answers AND the completion-hook receipt both
+		* persist per artifact — unfolding neither loses progress nor re-fires the
+		* 练习卡完成 hook.
+		*/
+		function FoldableQuizCard({ lessonId, artifact, masteryPct, send, defaultFolded = false, onFinished }) {
+			const title = artifact.title.trim() !== "" ? artifact.title : tr(KIND_LABEL_KEY.quiz);
+			return (0, react.createElement)(FoldShell, {
+				artifactId: artifact.id,
+				title,
+				defaultFolded
+			}, (0, react.createElement)(QuizCard, {
+				lessonId,
+				artifactId: artifact.id,
+				data: artifact.data,
+				masteryPct,
+				send,
+				onFinished
+			}));
+		}
 		//#endregion
 		//#region src/client/highlights.ts
 		/**
@@ -10172,13 +10212,14 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 					role: "tool",
 					toolState: "done"
 				});
-				return (0, react.createElement)("div", { className: "lks14-inline-artifact" }, artifact.artifactType === "quiz" ? (0, react.createElement)(QuizCard, {
+				return (0, react.createElement)("div", {
+					className: "lks14-inline-artifact",
+					key: row.artifactId
+				}, artifact.artifactType === "quiz" ? (0, react.createElement)(FoldableQuizCard, {
 					lessonId: lesson.lessonId,
-					artifactId: artifact.id,
-					data: artifact.data,
+					artifact,
 					masteryPct: lesson.masteryPct,
-					send,
-					onFinished: () => {}
+					send
 				}) : (0, react.createElement)(FoldableArtifactCard, {
 					artifact,
 					send,
@@ -10445,14 +10486,13 @@ mark.lks-hl{background:var(--dsw-alias-state-warn-tertiary);color:inherit;border
 				total: msgAudio?.total ?? 0,
 				onPlay: playMessage,
 				onStop: stopMessage
-			} : void 0)), rowsView.length > 0 && rowsView[rowsView.length - 1].role === "user" && busy ? (0, react.createElement)("div", { className: "lks14-thinking" }, (0, react.createElement)("i", null), (0, react.createElement)("i", null), (0, react.createElement)("i", null)) : null), ...backlog.filter((a) => a.artifactType === "quiz").map((a) => (0, react.createElement)(QuizCard, {
+			} : void 0)), rowsView.length > 0 && rowsView[rowsView.length - 1].role === "user" && busy ? (0, react.createElement)("div", { className: "lks14-thinking" }, (0, react.createElement)("i", null), (0, react.createElement)("i", null), (0, react.createElement)("i", null)) : null), ...backlog.filter((a) => a.artifactType === "quiz").map((a) => (0, react.createElement)(FoldableQuizCard, {
 				key: a.id,
 				lessonId: lesson.lessonId,
-				artifactId: a.id,
-				data: a.data,
+				artifact: a,
 				masteryPct: lesson.masteryPct,
 				send,
-				onFinished: () => {}
+				defaultFolded: true
 			})), ...backlog.filter((a) => a.artifactType !== "quiz").map((a) => (0, react.createElement)(FoldableArtifactCard, {
 				key: a.id,
 				artifact: a,