@classytic/labs 0.2.0 → 0.4.0

package/dist/physics/thermal/preset.mjs

@@ -1,14 +1,20 @@
 'use client';
 
 import { Tex } from "../../core/tex.mjs";
-import { Chip, Slider } from "../../kit/controls.mjs";
-import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
-import { useFrameTick } from "../../kit/anim.mjs";
-import { PlayWrap, usePlayGate } from "../../kit/play.mjs";
+import { Segmented, Slider } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { Field } from "../../kit/frame.mjs";
+import { AuthoredActivityRuntime } from "../../kit/authored-activity-runtime.mjs";
+import { SceneSurface, SimulationTransport } from "../mechanics/presentation.mjs";
+import { DiagramLabel } from "../../kit/annotate.mjs";
+import { useReducedMotionDeferred } from "../../kit/anim.mjs";
+import { useSimulation } from "../../kit/simulation/use-simulation.mjs";
+import { usePlayGate } from "../../kit/play.mjs";
+import { advanceThermal, thermalRun } from "./model.mjs";
 import { BeakerGlyph, BurnerGlyph, ThermometerGlyph } from "../../kit/thermal.mjs";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ETHANOL, ThermalCore, WATER } from "@classytic/stage/sim";
+import { ETHANOL, WATER } from "@classytic/stage/sim";
 
 //#region src/physics/thermal/preset.tsx
 /**
@@ -21,12 +27,134 @@ import { ETHANOL, ThermalCore, WATER } from "@classytic/stage/sim";
 * stuck while the latent heat goes in). The width of each part IS the heat it needs,
 * so water's huge boiling plateau (latent vaporisation ≫ everything) is impossible
 * to miss. Slide the power to heat faster, the mass for a bigger sample, or flip the
-* substance; pull power negative to cool back down. Hand-driven on ThermalCore.
+* substance; pull power negative to cool back down. Physics from ThermalCore, loop from the
+* shared simulation harness (see ./model.ts).
 */
-const W = 760, H = 440;
-const GX0 = 330, GX1 = 736, GY0 = 38, GY1 = 396;
+const W = 760;
+const H = 440;
+const GX0 = 330;
+const GX1 = 736;
+const GY0 = 38;
+const GY1 = 396;
 const kJ = (j) => `${(j / 1e3).toFixed(j < 1e4 ? 1 : 0)} kJ`;
-function HeatingCurveLab({ substance: sub0 = "water", title = "Heating curve: pour in heat, watch it climb in steps", prompt = "Heat ice until it melts, warms, and boils. Temperature RISES while one phase warms (q = mcΔθ) but stays FLAT during a phase change (q = mL).", objectives = [
+const heatingActivity = (objectives) => ({
+	pattern: "investigation",
+	title: "Heating curve investigation",
+	objectives,
+	success: [
+		{
+			id: "plateau-prediction",
+			source: "answer",
+			key: "plateau",
+			pendingLabel: "Predict what happens on a phase-change plateau."
+		},
+		{
+			id: "experiment-started",
+			source: "action",
+			key: "play",
+			pendingLabel: "Start the heating experiment."
+		},
+		{
+			id: "law-selected",
+			source: "answer",
+			key: "law",
+			pendingLabel: "Choose the model for a phase change."
+		},
+		{
+			id: "transfer-explanation",
+			source: "reflection",
+			key: "transfer",
+			pendingLabel: "Explain how a larger mass changes the curve."
+		}
+	],
+	questions: [
+		{
+			id: "plateau",
+			prompt: "While a pure substance changes phase at constant pressure, its temperature…",
+			choices: [
+				{
+					value: "rises",
+					label: "keeps rising"
+				},
+				{
+					value: "constant",
+					label: "stays constant while energy changes the phase"
+				},
+				{
+					value: "falls",
+					label: "falls"
+				}
+			],
+			answer: "constant",
+			explain: "Energy changes intermolecular arrangement instead of raising temperature during the plateau."
+		},
+		{
+			id: "law",
+			prompt: "Which relation models the energy transferred during a phase change?",
+			choices: [
+				{
+					value: "mc",
+					label: "q = mcΔθ"
+				},
+				{
+					value: "ml",
+					label: "q = mL"
+				},
+				{
+					value: "iv",
+					label: "P = IV"
+				}
+			],
+			answer: "ml",
+			explain: "Latent heat q = mL applies while phase changes at constant temperature."
+		},
+		{
+			kind: "reflection",
+			id: "transfer",
+			prompt: "If the sample mass doubles at the same power, how do the segment widths and heating time change?",
+			rubric: ["States that required energy doubles", "Connects doubled energy to doubled time at fixed power"]
+		}
+	],
+	steps: [
+		{
+			id: "predict",
+			phase: "predict",
+			title: "Predict the plateau",
+			lead: "Commit to what temperature does before adding heat.",
+			success: "plateau-prediction"
+		},
+		{
+			id: "act",
+			phase: "act",
+			title: "Run the experiment",
+			lead: "Start heating and compare the apparatus with the moving graph marker.",
+			controls: true,
+			success: "experiment-started"
+		},
+		{
+			id: "observe",
+			phase: "observe",
+			title: "Read linked evidence",
+			lead: "Slopes show warming; plateaus show energy entering without a temperature rise.",
+			controls: true
+		},
+		{
+			id: "explain",
+			phase: "explain",
+			title: "Choose the physical model",
+			lead: "Distinguish sensible heating from latent heating.",
+			success: "law-selected"
+		},
+		{
+			id: "transfer",
+			phase: "transfer",
+			title: "Scale the sample",
+			lead: "Transfer the energy model to a different mass.",
+			success: "transfer-explanation"
+		}
+	]
+});
+function HeatingCurveLab({ substance: sub0 = "water", title = "Heating curve: pour in heat, watch it climb in steps", prompt = "Heat ice until it melts, warms, and boils. Temperature rises while one phase warms (q = mcΔθ) but holds steady during a phase change (q = mL).", objectives = [
 	"Read a heating curve: sloped = warming, flat = changing phase",
 	"Use q = mcΔθ for a temperature change and q = mL for a phase change",
 	"See why water’s boiling plateau is so wide (latent heat ≫ specific heat)"
@@ -36,6 +164,7 @@ function HeatingCurveLab({ substance: sub0 = "water", title = "Heating curve: po
 	const [mass, setMass] = useState(mass0);
 	const [resetN, setResetN] = useState(0);
 	const gate = usePlayGate();
+	const reduceMotion = useReducedMotionDeferred();
 	const base = substance === "water" ? WATER : ETHANOL;
 	const sub = {
 		...base,
@@ -51,35 +180,27 @@ function HeatingCurveLab({ substance: sub0 = "water", title = "Heating curve: po
 	const tStart = sub.tMelt - 20;
 	const tMax = sub.tBoil + 40;
 	const sig = `${substance}:${mass}:${resetN}:${sub.tMelt}:${sub.tBoil}:${sub.lFusion}:${sub.lVapor}:${sub.cLiquid}`;
-	const sigRef = useRef("");
-	const stateRef = useRef(ThermalCore.reset({
+	const sim = useSimulation(thermalRun, {
 		substance: sub,
 		mass,
 		tStart,
 		tMax,
 		powerW: power
-	}));
-	if (sigRef.current !== sig) {
-		sigRef.current = sig;
-		stateRef.current = ThermalCore.reset({
-			substance: sub,
-			mass,
-			tStart,
-			tMax,
-			powerW: power
-		});
-	}
-	useFrameTick(gate.running, (f) => {
-		const dt = Math.min(.05, f.dtMs / 1e3);
-		stateRef.current = ThermalCore.step({
-			...stateRef.current,
-			powerW: power
-		}, dt * 12);
+	}, {
+		running: gate.running && !reduceMotion,
+		active: gate.inView
 	});
-	const st = stateRef.current;
+	const sigRef = useRef(sig);
+	useEffect(() => {
+		if (sigRef.current === sig) return;
+		sigRef.current = sig;
+		sim.reset();
+	}, [sig, sim]);
+	const st = sim.state;
 	const { segs, totalJ, energyJ, tempC, phase, fracMelt } = st;
-	const QX = (q) => GX0 + (totalJ > 0 ? q / totalJ : 0) * (GX1 - GX0);
-	const TY = (t) => GY1 - (t - tStart) / (tMax - tStart) * (GY1 - GY0);
+	const QX = (q) => GX0 + (totalJ > 0 ? q / totalJ : 0) * 406;
+	const tTop = tMax + (tMax - tStart) * .08;
+	const TY = (t) => GY1 - (t - tStart) / (tTop - tStart) * 358;
 	const iceFrac = phase === "solid" ? 1 : phase === "melting" ? 1 - fracMelt : 0;
 	const fracBoil = st.fracBoil;
 	const boiling = phase === "boiling" ? 1 : phase === "liquid" ? Math.max(0, (tempC - sub.tBoil + 25) / 25) * .5 : 0;
@@ -90,280 +211,349 @@ function HeatingCurveLab({ substance: sub0 = "water", title = "Heating curve: po
 	const cName = cur.phase === "solid" ? sub.solidName : cur.phase === "gas" ? sub.gasName : sub.liquidName;
 	const cVal = cur.phase === "solid" ? sub.cSolid : cur.phase === "gas" ? sub.cGas : sub.cLiquid;
 	const pct = totalJ > 0 ? Math.round(energyJ / totalJ * 100) : 0;
-	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__ */ jsxs("svg", {
-				viewBox: `0 0 ${W} ${H}`,
-				width: "100%",
-				role: "img",
-				"aria-label": `${sub.name} at ${Math.round(tempC)} degrees, ${phase}, ${pct} percent of the way through heating`,
-				children: [
-					/* @__PURE__ */ jsx(BurnerGlyph, {
-						cx: 150,
-						baseY: 300,
-						w: 84,
-						level: power > 0 ? Math.min(1, power / 200) : Math.max(-1, power / 200),
-						phase: st.tSec
-					}),
-					/* @__PURE__ */ jsx(BeakerGlyph, {
-						x: 92,
-						y: 132,
-						w: 116,
-						h: 140,
-						fillFrac,
-						color: sub.color,
-						boiling,
-						steam,
-						iceFrac,
-						phase: st.tSec,
-						label: `${mass} g ${sub.name.toLowerCase()}`
-					}),
-					/* @__PURE__ */ jsx(ThermometerGlyph, {
-						cx: 252,
-						top: 104,
-						h: 196,
-						frac: tFrac,
-						label: `${tempC >= 0 ? "" : "−"}${Math.abs(tempC).toFixed(0)}°C`
-					}),
-					/* @__PURE__ */ jsx("line", {
-						x1: GX0,
-						y1: GY0,
-						x2: GX0,
-						y2: GY1,
-						stroke: "var(--stage-fg)",
-						strokeWidth: 1.5
-					}),
-					/* @__PURE__ */ jsx("line", {
-						x1: GX0,
-						y1: GY1,
-						x2: GX1,
-						y2: GY1,
-						stroke: "var(--stage-fg)",
-						strokeWidth: 1.5
-					}),
-					/* @__PURE__ */ jsx("text", {
-						x: GX0 - 6,
-						y: 42,
-						textAnchor: "end",
-						fontSize: 11,
-						fill: "var(--stage-muted)",
-						children: "°C"
-					}),
-					/* @__PURE__ */ jsx("text", {
-						x: GX1,
-						y: 418,
-						textAnchor: "end",
-						fontSize: 11,
-						fill: "var(--stage-muted)",
-						children: "heat added →"
-					}),
-					[{
-						t: sub.tMelt,
-						l: `${sub.tMelt}° melt`
-					}, {
-						t: sub.tBoil,
-						l: `${sub.tBoil}° boil`
-					}].map((g) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
-						x1: GX0,
-						y1: TY(g.t),
-						x2: GX1,
-						y2: TY(g.t),
-						stroke: "var(--stage-grid)",
-						strokeWidth: 1,
-						strokeDasharray: "4 4"
-					}), /* @__PURE__ */ jsx("text", {
-						x: GX1 - 4,
-						y: TY(g.t) - 3,
-						textAnchor: "end",
-						fontSize: 10,
-						fill: "var(--stage-muted)",
-						children: g.l
-					})] }, g.l)),
-					segs.map((s, i) => {
-						const x0 = QX(s.qStart), x1 = QX(s.qStart + s.q), y0 = TY(s.t0), y1 = TY(s.t1);
-						const isChange = s.kind === "change";
-						const col = isChange ? "var(--stage-warn, #e0a020)" : "var(--stage-accent, #3b82f6)";
-						const big = s.q / totalJ > .04;
-						return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+	const figure = /* @__PURE__ */ jsx(SceneSurface, {
+		className: "physics-heating-scene",
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: `0 0 ${W} ${H}`,
+			width: "100%",
+			role: "img",
+			"aria-label": `${sub.name} at ${Math.round(tempC)} degrees, ${phase}, ${pct} percent of the way through heating`,
+			children: [
+				/* @__PURE__ */ jsx(BurnerGlyph, {
+					cx: 150,
+					baseY: 300,
+					w: 84,
+					level: power > 0 ? Math.min(1, power / 200) : Math.max(-1, power / 200),
+					phase: st.tSec
+				}),
+				/* @__PURE__ */ jsx(BeakerGlyph, {
+					x: 92,
+					y: 132,
+					w: 116,
+					h: 140,
+					fillFrac,
+					color: sub.color,
+					boiling,
+					steam,
+					iceFrac,
+					phase: st.tSec,
+					label: `${mass} g ${sub.name.toLowerCase()}`
+				}),
+				/* @__PURE__ */ jsx(ThermometerGlyph, {
+					cx: 252,
+					top: 104,
+					h: 196,
+					frac: tFrac,
+					label: `${tempC >= 0 ? "" : "−"}${Math.abs(tempC).toFixed(0)}°C`
+				}),
+				segs.map((s, i) => {
+					const x0 = QX(s.qStart), x1 = QX(s.qStart + s.q);
+					const isChange = s.kind === "change";
+					const tint = isChange ? "var(--stage-warn)" : "var(--stage-accent)";
+					const showName = x1 - x0 >= 64;
+					const name = isChange ? s.which === "melt" ? "melting" : "boiling" : s.phase === "solid" ? sub.solidName : s.phase === "gas" ? sub.gasName : sub.liquidName;
+					return /* @__PURE__ */ jsxs("g", { children: [
+						/* @__PURE__ */ jsx("rect", {
+							x: x0,
+							y: GY0,
+							width: Math.max(0, x1 - x0),
+							height: 358,
+							fill: tint,
+							opacity: isChange ? .06 : .04
+						}),
+						i > 0 && /* @__PURE__ */ jsx("line", {
 							x1: x0,
-							y1: y0,
-							x2: x1,
-							y2: y1,
-							stroke: col,
-							strokeWidth: isChange ? 4 : 3,
-							strokeLinecap: "round"
-						}), big && /* @__PURE__ */ jsx("text", {
+							y1: GY0,
+							x2: x0,
+							y2: GY1,
+							stroke: "var(--stage-grid)",
+							strokeWidth: 1
+						}),
+						showName && /* @__PURE__ */ jsx(DiagramLabel, {
 							x: (x0 + x1) / 2,
-							y: isChange ? (y0 + y1) / 2 - 7 : (y0 + y1) / 2 - 5,
-							textAnchor: "middle",
-							fontSize: 10,
-							fontWeight: 700,
-							fill: col,
-							style: { fontVariantNumeric: "tabular-nums" },
-							children: kJ(s.q)
-						})] }, i);
+							y: 388,
+							text: name.toLowerCase(),
+							tone: "muted",
+							fontSize: 11,
+							fontWeight: 650,
+							maxChars: 14,
+							bounds: {
+								left: 334,
+								right: 732,
+								top: GY0,
+								bottom: 392
+							}
+						})
+					] }, `band${i}`);
+				}),
+				/* @__PURE__ */ jsx("line", {
+					x1: GX0,
+					y1: GY0,
+					x2: GX0,
+					y2: GY1,
+					stroke: "var(--stage-fg)",
+					strokeWidth: 1.5
+				}),
+				/* @__PURE__ */ jsx("line", {
+					x1: GX0,
+					y1: GY1,
+					x2: GX1,
+					y2: GY1,
+					stroke: "var(--stage-fg)",
+					strokeWidth: 1.5
+				}),
+				/* @__PURE__ */ jsx("text", {
+					x: 324,
+					y: 42,
+					textAnchor: "end",
+					fontSize: 13,
+					fill: "var(--stage-muted)",
+					children: "°C"
+				}),
+				/* @__PURE__ */ jsx("text", {
+					x: GX1,
+					y: 418,
+					textAnchor: "end",
+					fontSize: 13,
+					fill: "var(--stage-muted)",
+					children: "heat added →"
+				}),
+				[{
+					t: sub.tMelt,
+					l: `${sub.tMelt}° melt`
+				}, {
+					t: sub.tBoil,
+					l: `${sub.tBoil}° boil`
+				}].map((g) => /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("line", {
+					x1: GX0,
+					y1: TY(g.t),
+					x2: GX1,
+					y2: TY(g.t),
+					stroke: "var(--stage-grid)",
+					strokeWidth: 1,
+					strokeDasharray: "4 4"
+				}) }, g.l)),
+				segs.map((s, i) => {
+					const x0 = QX(s.qStart), x1 = QX(s.qStart + s.q), y0 = TY(s.t0), y1 = TY(s.t1);
+					const isChange = s.kind === "change";
+					const col = isChange ? "var(--stage-warn, #e0a020)" : "var(--stage-accent, #3b82f6)";
+					const showEnergy = x1 - x0 >= 48;
+					return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+						x1: x0,
+						y1: y0,
+						x2: x1,
+						y2: y1,
+						stroke: col,
+						strokeWidth: isChange ? 4 : 3,
+						strokeLinecap: "round"
+					}), showEnergy && /* @__PURE__ */ jsx(DiagramLabel, {
+						className: "physics-svg-numeric",
+						x: (x0 + x1) / 2,
+						y: isChange ? (y0 + y1) / 2 - 8 : (y0 + y1) / 2 - 7,
+						text: kJ(s.q),
+						tone: isChange ? "warn" : "info",
+						fontSize: 11.5,
+						fontWeight: 700,
+						bounds: {
+							left: 334,
+							right: 732,
+							top: 42,
+							bottom: 392
+						}
+					})] }, i);
+				}),
+				[{
+					t: sub.tMelt,
+					l: `${sub.tMelt}° melt`
+				}, {
+					t: sub.tBoil,
+					l: `${sub.tBoil}° boil`
+				}].map((g) => /* @__PURE__ */ jsx(DiagramLabel, {
+					x: 338,
+					y: TY(g.t) - 6,
+					text: g.l,
+					tone: "muted",
+					anchor: "start",
+					fontSize: 13,
+					fontWeight: 650,
+					bounds: {
+						left: 334,
+						right: 732,
+						top: 42,
+						bottom: 392
+					}
+				}, g.l)),
+				/* @__PURE__ */ jsx("circle", {
+					cx: QX(energyJ),
+					cy: TY(tempC),
+					r: 6,
+					fill: "var(--stage-good, #16a34a)",
+					stroke: "var(--stage-bg)",
+					strokeWidth: 2
+				}),
+				/* @__PURE__ */ jsx("line", {
+					x1: QX(energyJ),
+					y1: TY(tempC),
+					x2: QX(energyJ),
+					y2: GY1,
+					stroke: "var(--stage-good, #16a34a)",
+					strokeWidth: 1,
+					strokeDasharray: "3 3",
+					opacity: .5
+				})
+			]
+		})
+	});
+	const instruments = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "physics-probe",
+		children: [
+			/* @__PURE__ */ jsx("span", { children: "Current state" }),
+			/* @__PURE__ */ jsx("strong", { children: `${tempC >= 0 ? "" : "−"}${Math.abs(tempC).toFixed(0)} °C · ${phase}` }),
+			/* @__PURE__ */ jsxs("small", { children: [
+				kJ(energyJ),
+				" of ",
+				kJ(totalJ),
+				" added (",
+				pct,
+				"%)"
+			] })
+		]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "physics-thermal-model",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "physics-thermal-laws",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "physics-thermal-sensible",
+						children: "sloped"
 					}),
-					/* @__PURE__ */ jsx("circle", {
-						cx: QX(energyJ),
-						cy: TY(tempC),
-						r: 6,
-						fill: "var(--stage-good, #16a34a)",
-						stroke: "var(--stage-bg)",
-						strokeWidth: 2
+					", warming one phase:",
+					" ",
+					/* @__PURE__ */ jsx(Tex, { tex: "q = mc\\,\\Delta\\theta" })
+				] }), /* @__PURE__ */ jsxs("span", { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "physics-thermal-latent",
+						children: "flat"
 					}),
-					/* @__PURE__ */ jsx("line", {
-						x1: QX(energyJ),
-						y1: TY(tempC),
-						x2: QX(energyJ),
-						y2: GY1,
-						stroke: "var(--stage-good, #16a34a)",
-						strokeWidth: 1,
-						strokeDasharray: "3 3",
-						opacity: .5
+					", phase change: ",
+					/* @__PURE__ */ jsx(Tex, { tex: "q = mL" })
+				] })]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "physics-explain",
+				children: [
+					"Now:",
+					" ",
+					/* @__PURE__ */ jsx("strong", {
+						className: "physics-emphasis",
+						children: cur.kind === "change" ? cur.which === "melt" ? `melting ${sub.solidName}` : `boiling ${sub.liquidName}` : `warming ${cName}`
 					})
 				]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "physics-thermal-equation",
+				children: cur.kind === "change" ? /* @__PURE__ */ jsx(Tex, { tex: `q = mL = ${mass}\\times ${cur.which === "melt" ? sub.lFusion : sub.lVapor} = ${kJ(cur.q).replace(" kJ", "")}\\,\\text{kJ}` }) : /* @__PURE__ */ jsx(Tex, { tex: `q = mc\\,\\Delta\\theta = ${mass}\\times ${cVal}\\times\\Delta\\theta` })
+			})
+		]
+	})] });
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Field, {
+			label: "substance",
+			children: /* @__PURE__ */ jsx(Segmented, {
+				ariaLabel: "substance",
+				value: substance,
+				onChange: setSubstance,
+				options: [{
+					value: "water",
+					label: "Water"
+				}, {
+					value: "ethanol",
+					label: "Ethanol"
+				}]
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "power",
+			value: `${power} W`,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: power,
+				min: -150,
+				max: 300,
+				step: 10,
+				onChange: setPower,
+				ariaLabel: "heating power (watts; negative cools)"
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "mass",
+			value: `${mass} g`,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: mass,
+				min: 10,
+				max: 200,
+				step: 10,
+				onChange: setMass,
+				ariaLabel: "mass (grams)"
 			})
 		})
-	});
-	return /* @__PURE__ */ jsx(LabFrame, {
+	] });
+	const reset = () => {
+		gate.setPlaying(false);
+		setResetN((n) => n + 1);
+	};
+	const runtimeActivity = heatingActivity(objectives);
+	const experimentControls = (context) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SimulationTransport, {
+		running: gate.playing && !reduceMotion,
+		onReset: reset,
+		onToggle: () => {
+			context.complete("experiment-started");
+			if (reduceMotion) {
+				sim.set(advanceThermal(sim.state, 30, power));
+				gate.setPlaying(false);
+			} else gate.setPlaying(!gate.playing);
+		},
+		state: reduceMotion ? "Step mode" : gate.playing ? power >= 0 ? "Heating" : "Cooling" : "Paused",
+		detail: `${Math.round(tempC)} °C · ${pct}%`,
+		resetLabel: "Reset heating curve"
+	}), controls] });
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		focusLayout: "immersive",
+		activity: runtimeActivity,
+		activityId: "heating-curve",
+		eyebrow: "Thermal physics",
 		title,
-		prompt,
-		objectives,
-		aside: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Callout, {
-			tone: "result",
-			children: /* @__PURE__ */ jsxs("span", {
-				style: {
-					display: "grid",
-					gap: 3,
-					fontVariantNumeric: "tabular-nums"
-				},
-				children: [/* @__PURE__ */ jsxs("span", {
-					style: {
-						fontWeight: 800,
-						fontSize: 16
-					},
-					children: [
-						tempC >= 0 ? "" : "−",
-						Math.abs(tempC).toFixed(0),
-						" °C · ",
-						phase
-					]
-				}), /* @__PURE__ */ jsxs("span", { children: [
-					"heat added: ",
-					kJ(energyJ),
-					" of ",
-					kJ(totalJ),
-					" (",
-					pct,
-					"%)"
-				] })]
-			})
-		}), /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				gap: 8,
-				padding: "8px 2px 0",
-				fontSize: 13
-			},
-			children: [
-				/* @__PURE__ */ jsx(Callout, {
-					tone: "info",
-					children: /* @__PURE__ */ jsxs("span", {
-						style: {
-							display: "grid",
-							gap: 6
-						},
-						children: [/* @__PURE__ */ jsxs("span", { children: [
-							/* @__PURE__ */ jsx("span", {
-								style: {
-									color: "var(--stage-accent)",
-									fontWeight: 800
-								},
-								children: "sloped"
-							}),
-							", warming one phase: ",
-							/* @__PURE__ */ jsx(Tex, { tex: "q = mc\\,\\Delta\\theta" })
-						] }), /* @__PURE__ */ jsxs("span", { children: [
-							/* @__PURE__ */ jsx("span", {
-								style: {
-									color: "var(--stage-warn)",
-									fontWeight: 800
-								},
-								children: "flat"
-							}),
-							", phase change: ",
-							/* @__PURE__ */ jsx(Tex, { tex: "q = mL" })
-						] })]
-					})
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					style: { color: "var(--stage-muted)" },
-					children: ["now: ", /* @__PURE__ */ jsx("strong", {
-						style: { color: "var(--stage-fg)" },
-						children: cur.kind === "change" ? cur.which === "melt" ? `melting ${sub.solidName}` : `boiling ${sub.liquidName}` : `warming ${cName}`
-					})]
-				}),
-				/* @__PURE__ */ jsx("span", {
-					style: { fontSize: 13 },
-					children: cur.kind === "change" ? /* @__PURE__ */ jsx(Tex, { tex: `q = mL = ${mass}\\times ${cur.which === "melt" ? sub.lFusion : sub.lVapor} = ${kJ(cur.q).replace(" kJ", "")}\\,\\text{kJ}` }) : /* @__PURE__ */ jsx(Tex, { tex: `q = mc\\,\\Delta\\theta = ${mass}\\times ${cVal}\\times\\Delta\\theta` })
-				})
-			]
-		})] }),
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
-			/* @__PURE__ */ jsx(Field, {
-				label: "substance",
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "lab-field-row",
-					children: [/* @__PURE__ */ jsx(Chip, {
-						selected: substance === "water",
-						onClick: () => setSubstance("water"),
-						children: "💧 water"
-					}), /* @__PURE__ */ jsx(Chip, {
-						selected: substance === "ethanol",
-						onClick: () => setSubstance("ethanol"),
-						children: "🧪 ethanol"
-					})]
-				})
+		description: prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", { children: phase }),
+			/* @__PURE__ */ jsxs(Activity.Measured, {
+				label: "temperature, measured after you predict",
+				children: [Math.round(tempC), " °C"]
 			}),
-			/* @__PURE__ */ jsx(Field, {
-				label: "power",
-				value: `${power} W`,
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: power,
-					min: -150,
-					max: 300,
-					step: 10,
-					onChange: setPower,
-					ariaLabel: "heating power (watts; negative cools)"
-				})
-			}),
-			/* @__PURE__ */ jsx(Field, {
-				label: "mass",
-				value: `${mass} g`,
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: mass,
-					min: 10,
-					max: 200,
-					step: 10,
-					onChange: setMass,
-					ariaLabel: "mass (grams)"
-				})
+			/* @__PURE__ */ jsxs(Activity.Measured, {
+				label: "progress, measured after you predict",
+				children: [pct, "% heated"]
 			}),
-			/* @__PURE__ */ jsx(Field, {
-				label: " ",
-				children: /* @__PURE__ */ jsx(Chip, {
-					selected: false,
-					onClick: () => setResetN((n) => n + 1),
-					children: "↻ reset"
-				})
-			})
+			/* @__PURE__ */ jsxs("span", { children: [power, " W"] })
+		] }),
+		inspector: (context) => /* @__PURE__ */ jsxs(Fragment$1, { children: [instruments, experimentControls(context)] }),
+		transcript: /* @__PURE__ */ jsxs("p", { children: [
+			sub.name,
+			", ",
+			mass,
+			" grams, is currently ",
+			phase,
+			" at ",
+			tempC.toFixed(1),
+			" degrees Celsius. ",
+			kJ(energyJ),
+			" ",
+			"of ",
+			kJ(totalJ),
+			" has been transferred. The active segment uses",
+			" ",
+			cur.kind === "change" ? "q equals m L" : "q equals m c delta theta",
+			"."
 		] }),
 		children: figure
 	});