@classytic/labs 0.2.0 → 0.3.0

package/dist/physics/waves/preset.mjs

@@ -1,11 +1,12 @@
 'use client';
 
 import { Tex as Tex$1 } from "../../core/tex.mjs";
-import { Chip, Slider } from "../../kit/controls.mjs";
-import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
-import { ChallengeCard, HintLadder, useChallenge, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
-import { PlayWrap, usePlayGate } from "../../kit/play.mjs";
+import { ActivitySelect, Chip, Slider } from "../../kit/controls.mjs";
+import { Field } from "../../kit/frame.mjs";
+import { HintLadder, useHints } from "../../kit/pedagogy.mjs";
+import { usePlayGate } from "../../kit/play.mjs";
 import { antinodes, beatFreq, harmonicWavelength, nodes, period, speed, standingY, sumY, waveOmega, waveY } from "./core.mjs";
+import { WaveActivity } from "./wave-activity.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CanvasLayer, useControlSurface, useFrameLoop } from "@classytic/stage";
@@ -30,46 +31,7 @@ const view = {
 	yMax: 6
 };
 const ACC = "--stage-accent", GOOD = "--stage-good", WARN = "--stage-warn", MUT = "--stage-muted", FG = "--stage-fg";
-const WAVES_CHALLENGE = [{
-	id: "speed",
-	prompt: "Double the frequency f while keeping the wavelength λ fixed. The wave speed v…",
-	choices: [
-		{
-			value: "double",
-			label: "doubles"
-		},
-		{
-			value: "same",
-			label: "is unchanged"
-		},
-		{
-			value: "half",
-			label: "halves"
-		}
-	],
-	answer: "double",
-	explain: "v = fλ, so at fixed λ doubling f doubles the speed."
-}, {
-	id: "destructive",
-	prompt: "Two equal waves exactly out of phase (offset ½λ) add up to…",
-	choices: [
-		{
-			value: "cancel",
-			label: "a flat line (cancel)"
-		},
-		{
-			value: "double",
-			label: "double the amplitude"
-		},
-		{
-			value: "same",
-			label: "one unchanged wave"
-		}
-	],
-	answer: "cancel",
-	explain: "Crest meets trough everywhere → destructive interference, so they cancel to flat."
-}];
-function WaveLab({ mode: mode0 = "travelling", amplitude = 2, wavelength = 4, frequency = 1, title = "Waves", prompt, objectives, hints: hintList, controlId, height = 300 }) {
+function WaveLab({ mode: mode0 = "travelling", amplitude = 2, wavelength = 4, frequency = 1, title = "Waves", prompt, objectives, hints: hintList, controlId, height = 300, activity = "wave-lab" }) {
 	const [mode, setMode] = useState(mode0);
 	const [A, setA] = useState(amplitude);
 	const [lam, setLam] = useState(wavelength);
@@ -83,11 +45,6 @@ function WaveLab({ mode: mode0 = "travelling", amplitude = 2, wavelength = 4, fr
 	const t = useRef(0);
 	const hints = useHints(hintList);
 	const gate = usePlayGate();
-	const challenge = useChallenge(WAVES_CHALLENGE);
-	useCheckpoint({
-		solved: challenge.allCorrect,
-		activity: "waves"
-	});
 	useEffect(() => {
 		setMounted(true);
 	}, []);
@@ -155,11 +112,18 @@ function WaveLab({ mode: mode0 = "travelling", amplitude = 2, wavelength = 4, fr
 	const draw = useCallback((ctx, c) => {
 		const css = getComputedStyle(ctx.canvas);
 		const tok = (n, fb) => css.getPropertyValue(n).trim() || fb;
-		tok(FG, "#222");
-		const acc = tok(ACC, "#1c7ed6"), good = tok(GOOD, "#2f9e44"), warn = tok(WARN, "#e8a020"), mut = tok(MUT, "#888");
+		const fg = tok(FG, "#222"), acc = tok(ACC, "#1c7ed6"), good = tok(GOOD, "#2f9e44"), warn = tok(WARN, "#e8a020"), mut = tok(MUT, "#888");
 		const W = ctx.canvas.clientWidth || 640, Hh = height;
 		ctx.clearRect(0, 0, W, Hh);
 		const [, y0] = c.toPx(0, 0);
+		const [plotLeft] = c.toPx(0, 0);
+		const [plotRight] = c.toPx(L, 0);
+		const amplitudeTop = c.toPx(0, A)[1];
+		const amplitudeBottom = c.toPx(0, -A)[1];
+		ctx.fillStyle = acc;
+		ctx.globalAlpha = .035;
+		ctx.fillRect(plotLeft, amplitudeTop, plotRight - plotLeft, amplitudeBottom - amplitudeTop);
+		ctx.globalAlpha = 1;
 		ctx.strokeStyle = mut;
 		ctx.globalAlpha = .5;
 		ctx.lineWidth = 1;
@@ -168,6 +132,10 @@ function WaveLab({ mode: mode0 = "travelling", amplitude = 2, wavelength = 4, fr
 		ctx.lineTo(c.toPx(L, 0)[0], y0);
 		ctx.stroke();
 		ctx.globalAlpha = 1;
+		ctx.fillStyle = mut;
+		ctx.font = "11px ui-sans-serif";
+		ctx.textAlign = "left";
+		ctx.fillText("equilibrium", plotLeft + 8, y0 - 8);
 		const tnow = t.current;
 		const curve = (fn, color, width, alpha = 1) => {
 			ctx.strokeStyle = color;
@@ -191,10 +159,18 @@ function WaveLab({ mode: mode0 = "travelling", amplitude = 2, wavelength = 4, fr
 				const yTop = c.toPx(0, A + .8)[1];
 				ctx.strokeStyle = warn;
 				ctx.lineWidth = 1.5;
+				ctx.setLineDash([5, 4]);
 				ctx.beginPath();
 				ctx.moveTo(c.toPx(x0, 0)[0], yTop);
 				ctx.lineTo(c.toPx(x1, 0)[0], yTop);
 				ctx.stroke();
+				ctx.setLineDash([]);
+				for (const xx of [x0, x1]) {
+					ctx.beginPath();
+					ctx.moveTo(c.toPx(xx, 0)[0], yTop - 5);
+					ctx.lineTo(c.toPx(xx, 0)[0], yTop + 5);
+					ctx.stroke();
+				}
 				ctx.fillStyle = warn;
 				ctx.font = "bold 12px ui-sans-serif";
 				ctx.textAlign = "center";
@@ -210,6 +186,15 @@ function WaveLab({ mode: mode0 = "travelling", amplitude = 2, wavelength = 4, fr
 			ctx.fillStyle = good;
 			ctx.textAlign = "left";
 			ctx.fillText("A", c.toPx(ax, A / 2)[0] + 4, c.toPx(ax, A / 2)[1]);
+			const phaseX = Math.max(0, Math.min(L, x0));
+			const [phasePx, phasePy] = c.toPx(phaseX, waveY(primary, phaseX, tnow));
+			ctx.fillStyle = acc;
+			ctx.beginPath();
+			ctx.arc(phasePx, phasePy, 5, 0, Math.PI * 2);
+			ctx.fill();
+			ctx.fillStyle = fg;
+			ctx.textAlign = "left";
+			ctx.fillText("tracked crest", phasePx + 9, phasePy - 8);
 		} else if (mode === "superpose") {
 			const w1 = primary, w2 = {
 				amp: A,
@@ -217,9 +202,17 @@ function WaveLab({ mode: mode0 = "travelling", amplitude = 2, wavelength = 4, fr
 				freq: f2,
 				phase: phase * Math.PI
 			};
-			curve((x) => waveY(w1, x, tnow), acc, 1.5, .45);
-			curve((x) => waveY(w2, x, tnow), warn, 1.5, .45);
+			curve((x) => waveY(w1, x, tnow), acc, 1.5, .62);
+			curve((x) => waveY(w2, x, tnow), warn, 1.5, .62);
 			curve((x) => sumY([w1, w2], x, tnow), good, 3);
+			ctx.font = "11px ui-sans-serif";
+			ctx.textAlign = "right";
+			ctx.fillStyle = acc;
+			ctx.fillText("wave 1", plotRight - 8, 18);
+			ctx.fillStyle = warn;
+			ctx.fillText("wave 2", plotRight - 8, 34);
+			ctx.fillStyle = good;
+			ctx.fillText("result", plotRight - 8, 50);
 		} else {
 			const kk = nH * Math.PI / L;
 			const env = (x) => 2 * A * Math.sin(kk * x);
@@ -236,7 +229,12 @@ function WaveLab({ mode: mode0 = "travelling", amplitude = 2, wavelength = 4, fr
 			ctx.fillStyle = good;
 			ctx.font = "10px ui-sans-serif";
 			ctx.textAlign = "center";
-			for (const xa of antinodes(L, nH)) ctx.fillText("●", c.toPx(xa, 0)[0], y0);
+			for (const xa of antinodes(L, nH)) {
+				const [px] = c.toPx(xa, 0);
+				ctx.beginPath();
+				ctx.arc(px, y0, 3, 0, Math.PI * 2);
+				ctx.fill();
+			}
 			ctx.fillStyle = warn;
 			ctx.font = "11px ui-sans-serif";
 			ctx.fillText("nodes ▼", c.toPx(nodes(L, nH)[1] ?? 1, 0)[0], y0 + 18);
@@ -303,184 +301,180 @@ function WaveLab({ mode: mode0 = "travelling", amplitude = 2, wavelength = 4, fr
 			set: setSound
 		}
 	});
-	const figure = /* @__PURE__ */ jsx(PlayWrap, {
-		gate,
-		children: /* @__PURE__ */ jsx("div", {
-			style: {
-				borderRadius: 14,
-				overflow: "hidden",
-				background: "var(--stage-bg)",
-				border: "1px solid var(--stage-grid)"
-			},
-			children: /* @__PURE__ */ jsx(CanvasLayer, {
-				view,
-				height,
-				draw,
-				ariaLabel: `${mode} wave, v=fλ=${v.toFixed(2)}`
+	const figure = /* @__PURE__ */ jsx(CanvasLayer, {
+		view,
+		height,
+		draw,
+		ariaLabel: `${mode} wave, v=fλ=${v.toFixed(2)}`
+	});
+	const aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "physics-probe",
+			children: [
+				/* @__PURE__ */ jsxs("span", { children: ["wave speed · ", /* @__PURE__ */ jsx(Tex$1, { tex: "v = f\\lambda" })] }),
+				/* @__PURE__ */ jsx("strong", { children: v.toFixed(2) }),
+				/* @__PURE__ */ jsx("small", { children: mode === "standing" ? `${f.toFixed(1)} · ${lamStanding.toFixed(2)} · T=${period(f).toFixed(2)}` : `${f.toFixed(1)} · ${lam.toFixed(1)} · T=${period(f).toFixed(2)}` })
+			]
+		}),
+		mode === "superpose" && /* @__PURE__ */ jsx("p", {
+			className: "physics-explain",
+			children: Math.abs(f - f2) < .05 ? Math.abs(phase % 2) < .05 ? "In phase → constructive (amplitude doubles)." : Math.abs(Math.abs(phase % 2) - 1) < .05 ? "Opposite phase → destructive (they cancel)." : "Partly in phase." : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				"Detuned → ",
+				/* @__PURE__ */ jsx("b", { children: "beats" }),
+				" at ",
+				/* @__PURE__ */ jsx(Tex$1, { tex: "|f_1 - f_2|" }),
+				" = ",
+				beatFreq(f, f2).toFixed(2),
+				" (the throbbing envelope)."
+			] })
+		}),
+		mode === "standing" && /* @__PURE__ */ jsxs("p", {
+			className: "physics-explain",
+			children: [
+				"Harmonic n=",
+				nH,
+				": ",
+				nH,
+				" antinode",
+				nH === 1 ? "" : "s",
+				", ",
+				nH + 1,
+				" nodes,",
+				" ",
+				/* @__PURE__ */ jsx(Tex$1, { tex: "\\lambda = \\tfrac{2L}{n}" }),
+				" = ",
+				lamStanding.toFixed(2),
+				". Nodes never move; antinodes swing hardest."
+			]
+		})
+	] });
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Field, {
+			label: "view",
+			children: /* @__PURE__ */ jsx(ActivitySelect, {
+				ariaLabel: "view",
+				className: "physics-wave-mode-select",
+				value: mode,
+				onChange: setMode,
+				options: [
+					"travelling",
+					"superpose",
+					"standing"
+				].map((m) => ({
+					value: m,
+					label: m
+				}))
 			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "amplitude",
+			value: A.toFixed(1),
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: A,
+				min: .5,
+				max: 2.5,
+				step: .1,
+				onChange: setA,
+				ariaLabel: "amplitude"
+			})
+		}),
+		mode !== "standing" && /* @__PURE__ */ jsx(Field, {
+			label: "wavelength",
+			value: lam.toFixed(1),
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: lam,
+				min: 1,
+				max: 8,
+				step: .1,
+				onChange: setLam,
+				ariaLabel: "wavelength"
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "frequency",
+			value: f.toFixed(1),
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: f,
+				min: .2,
+				max: 3,
+				step: .1,
+				onChange: setF,
+				ariaLabel: "frequency"
+			})
+		}),
+		mode === "superpose" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
+			label: "wave 2 freq",
+			value: f2.toFixed(1),
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: f2,
+				min: .2,
+				max: 3,
+				step: .1,
+				onChange: setF2,
+				ariaLabel: "second frequency"
+			})
+		}), /* @__PURE__ */ jsx(Field, {
+			label: "wave 2 phase",
+			value: `${phase.toFixed(1)}π`,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: phase,
+				min: 0,
+				max: 2,
+				step: .1,
+				onChange: setPhase,
+				ariaLabel: "phase"
+			})
+		})] }),
+		mode === "standing" && /* @__PURE__ */ jsx(Field, {
+			label: "harmonic n",
+			value: nH,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: nH,
+				min: 1,
+				max: 6,
+				step: 1,
+				onChange: setNH,
+				ariaLabel: "harmonic"
+			})
+		}),
+		/* @__PURE__ */ jsx(Chip, {
+			selected: sound,
+			onClick: () => setSound((s) => !s),
+			"aria-label": sound ? "Mute wave sound" : "Hear wave sound",
+			children: sound ? "Sound on" : "Sound off"
 		})
-	});
-	return /* @__PURE__ */ jsx(LabFrame, {
+	] });
+	const observation = mode === "travelling" ? "A complete shape advances one wavelength every period, so v = fλ." : mode === "superpose" ? Math.abs(f - f2) < .05 ? "The two displacements add point by point; phase decides reinforcement or cancellation." : `Nearby frequencies produce ${beatFreq(f, f2).toFixed(2)} beats per second.` : `Harmonic ${nH} keeps ${nH + 1} nodes fixed while the antinodes oscillate.`;
+	const reset = () => {
+		t.current = 0;
+		gate.setPlaying(false);
+		setTick((x) => x + 1);
+	};
+	return /* @__PURE__ */ jsx(WaveActivity, {
+		activity,
+		activityId: "wave-lab",
 		title,
 		prompt,
+		mode,
+		figure,
+		instruments: aside,
+		controls,
 		objectives,
-		aside: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsxs(Callout, {
-				tone: "result",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "lab-field-label",
-						children: ["wave speed ", /* @__PURE__ */ jsx(Tex$1, { tex: "v = f\\lambda" })]
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "lab-callout-big",
-						children: v.toFixed(2)
-					}),
-					/* @__PURE__ */ jsx("span", {
-						style: {
-							fontSize: 12,
-							color: "var(--stage-muted)"
-						},
-						children: mode === "standing" ? `${f.toFixed(1)} · ${lamStanding.toFixed(2)} · T=${period(f).toFixed(2)}` : `${f.toFixed(1)} · ${lam.toFixed(1)} · T=${period(f).toFixed(2)}`
-					})
-				]
-			}),
-			mode === "superpose" && /* @__PURE__ */ jsx("p", {
-				className: "lab-prompt",
-				style: { fontSize: 13 },
-				children: Math.abs(f - f2) < .05 ? Math.abs(phase % 2) < .05 ? "In phase → constructive (amplitude doubles)." : Math.abs(Math.abs(phase % 2) - 1) < .05 ? "Opposite phase → destructive (they cancel)." : "Partly in phase." : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					"Detuned → ",
-					/* @__PURE__ */ jsx("b", { children: "beats" }),
-					" at ",
-					/* @__PURE__ */ jsx(Tex$1, { tex: "|f_1 - f_2|" }),
-					" = ",
-					beatFreq(f, f2).toFixed(2),
-					" (the throbbing envelope)."
-				] })
-			}),
-			mode === "standing" && /* @__PURE__ */ jsxs("p", {
-				className: "lab-prompt",
-				style: { fontSize: 13 },
-				children: [
-					"Harmonic n=",
-					nH,
-					": ",
-					nH,
-					" antinode",
-					nH === 1 ? "" : "s",
-					", ",
-					nH + 1,
-					" nodes, ",
-					/* @__PURE__ */ jsx(Tex$1, { tex: "\\lambda = \\tfrac{2L}{n}" }),
-					" = ",
-					lamStanding.toFixed(2),
-					". Nodes never move; antinodes swing hardest."
-				]
-			})
+		footer: /* @__PURE__ */ jsx(HintLadder, { hints }),
+		visibleRef: gate.ref,
+		playing: gate.playing,
+		setPlaying: gate.setPlaying,
+		reset,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("span", { children: ["v ", v.toFixed(2)] }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				"f ",
+				f.toFixed(1),
+				" Hz"
+			] }),
+			/* @__PURE__ */ jsxs("span", { children: ["λ ", (mode === "standing" ? lamStanding : lam).toFixed(2)] })
 		] }),
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
-			/* @__PURE__ */ jsx(Field, {
-				label: "view",
-				children: /* @__PURE__ */ jsx("span", {
-					style: {
-						display: "flex",
-						gap: 6,
-						flexWrap: "wrap"
-					},
-					children: [
-						"travelling",
-						"superpose",
-						"standing"
-					].map((m) => /* @__PURE__ */ jsx(Chip, {
-						selected: mode === m,
-						onClick: () => setMode(m),
-						children: m
-					}, m))
-				})
-			}),
-			/* @__PURE__ */ jsx(Field, {
-				label: "amplitude",
-				value: A.toFixed(1),
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: A,
-					min: .5,
-					max: 2.5,
-					step: .1,
-					onChange: setA,
-					ariaLabel: "amplitude"
-				})
-			}),
-			mode !== "standing" && /* @__PURE__ */ jsx(Field, {
-				label: "wavelength",
-				value: lam.toFixed(1),
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: lam,
-					min: 1,
-					max: 8,
-					step: .1,
-					onChange: setLam,
-					ariaLabel: "wavelength"
-				})
-			}),
-			/* @__PURE__ */ jsx(Field, {
-				label: "frequency",
-				value: f.toFixed(1),
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: f,
-					min: .2,
-					max: 3,
-					step: .1,
-					onChange: setF,
-					ariaLabel: "frequency"
-				})
-			}),
-			mode === "superpose" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
-				label: "wave 2 freq",
-				value: f2.toFixed(1),
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: f2,
-					min: .2,
-					max: 3,
-					step: .1,
-					onChange: setF2,
-					ariaLabel: "second frequency"
-				})
-			}), /* @__PURE__ */ jsx(Field, {
-				label: "wave 2 phase",
-				value: `${phase.toFixed(1)}π`,
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: phase,
-					min: 0,
-					max: 2,
-					step: .1,
-					onChange: setPhase,
-					ariaLabel: "phase"
-				})
-			})] }),
-			mode === "standing" && /* @__PURE__ */ jsx(Field, {
-				label: "harmonic n",
-				value: nH,
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: nH,
-					min: 1,
-					max: 6,
-					step: 1,
-					onChange: setNH,
-					ariaLabel: "harmonic"
-				})
-			}),
-			/* @__PURE__ */ jsx(Chip, {
-				selected: sound,
-				onClick: () => setSound((s) => !s),
-				children: "🔊 sound"
-			})
-		] }),
-		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HintLadder, { hints }), /* @__PURE__ */ jsx(ChallengeCard, {
-			questions: WAVES_CHALLENGE,
-			state: challenge,
-			title: "Predict"
-		})] }),
-		children: figure
+		observation
 	});
 }
 

package/dist/physics/waves/ripple.d.mts

@@ -1,3 +1,4 @@
+import { AuthoredActivity } from "../../kit/activity-authoring.mjs";
 import { ReactNode } from "react";
 
 //#region src/physics/waves/ripple.d.ts
@@ -11,6 +12,7 @@ interface RippleTankProps {
   hints?: string[];
   controlId?: string;
   height?: number;
+  activity?: string | AuthoredActivity;
 }
 declare function RippleTankLab({
   wavelength,
@@ -20,7 +22,8 @@ declare function RippleTankLab({
   objectives,
   hints: hintList,
   controlId,
-  height
+  height,
+  activity
 }: RippleTankProps): ReactNode;
 //#endregion
 export { RippleTankLab, RippleTankProps, RippleView };