@classytic/labs 0.2.0 → 0.3.0

package/dist/chem/titration/preset.mjs

@@ -1,9 +1,14 @@
 '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 { ChallengeCard, useChallenge, useCheckpoint } from "../../kit/pedagogy.mjs";
+import { ActivitySelect, Slider } from "../../kit/controls.mjs";
+import { Field, Readout, SceneViewport } from "../../kit/frame.mjs";
+import { AuthoredActivityRuntime, AuthoredMetricGate } from "../../kit/authored-activity-runtime.mjs";
+import { Figure, HUE, STROKE } from "../../kit/figure/figure.mjs";
+import { FigText } from "../../kit/figure/text.mjs";
+import { Ball } from "../../kit/figure/body.mjs";
+import { Glass, Region, glassInner } from "../../kit/figure/container.mjs";
+import { Curve, Guide, Marker, PlotFrame } from "../../kit/figure/plot.mjs";
 import { useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { pHAt, titrationCurve } from "@classytic/stage/chem";
@@ -22,12 +27,69 @@ import { pHAt, titrationCurve } from "@classytic/stage/chem";
 * equivalence; a weak acid's equivalence point is basic (pH > 7). Interactive, drag
 * the volume, no simulation loop.
 */
-const W = 720, H = 400;
-const PINK = "rgb(214,51,132)";
+/** The four volumes worth naming on the curve, each a multiple of the equivalence volume. */
+const LANDMARKS = [
+	{
+		id: "start",
+		label: "start",
+		at: () => 0
+	},
+	{
+		id: "half",
+		label: "½ equivalence",
+		at: (vEq) => vEq / 2
+	},
+	{
+		id: "equivalence",
+		label: "equivalence",
+		at: (vEq) => vEq
+	},
+	{
+		id: "excess",
+		label: "excess base",
+		at: (vEq) => vEq * 1.5
+	}
+];
+/** Indicator colours are chemistry data (what the dye really looks like), not palette picks;
+*  phenolphthalein's acid form is colourless, so it shows the plain water role. */
+const INDICATORS = {
+	phenolphthalein: {
+		label: "phenolphthalein",
+		lowPH: 8.2,
+		highPH: 10,
+		acid: HUE.liquid,
+		base: "rgb(214,51,132)"
+	},
+	"bromothymol-blue": {
+		label: "bromothymol blue",
+		lowPH: 6,
+		highPH: 7.6,
+		acid: "rgb(244,205,58)",
+		base: "rgb(42,111,219)"
+	},
+	"methyl-orange": {
+		label: "methyl orange",
+		lowPH: 3.1,
+		highPH: 4.4,
+		acid: "rgb(218,55,49)",
+		base: "rgb(244,188,44)"
+	}
+};
+const W = 700, H = 404;
+function indicatorState(key, pH) {
+	const item = INDICATORS[key];
+	const mix = Math.max(0, Math.min(1, (pH - item.lowPH) / (item.highPH - item.lowPH)));
+	const description = mix < .08 ? "acid colour" : mix > .92 ? "base colour" : "transition colour";
+	return {
+		mix,
+		color: `color-mix(in oklab, ${item.base} ${(mix * 100).toFixed(0)}%, ${item.acid})`,
+		description
+	};
+}
 /** Predict the two facts the curve hides: pKa lives at the half-equivalence point, and a weak acid's equivalence point is basic. */
 const TITRATION_CHALLENGE = [{
 	id: "half-eq",
-	prompt: "At the half-equivalence point of a WEAK acid, the pH equals…",
+	prompt: "At the half-equivalence point of a weak acid, the pH equals…",
 	choices: [
 		{
 			value: "pka",
@@ -46,7 +108,7 @@ const TITRATION_CHALLENGE = [{
 	explain: "Half-neutralised means [A⁻] = [HA], so the Henderson–Hasselbalch log term is zero and pH = pKa."
 }, {
 	id: "equiv",
-	prompt: "The equivalence point of a WEAK acid titrated with strong base is…",
+	prompt: "The equivalence point of a weak acid titrated with strong base is…",
 	choices: [
 		{
 			value: "acidic",
@@ -64,20 +126,57 @@ const TITRATION_CHALLENGE = [{
 	answer: "basic",
 	explain: "All acid is now its conjugate base, which hydrolyses water to give pH > 7. (A strong acid would cross pH 7.)"
 }];
-function TitrationLab({ analyte: analyte0 = "weak-acid", concAcid = .1, volAcidMl = 25, concBase = .1, pKa: pKa0 = 4.76, title = "Acid–base titration: build the pH curve", prompt = "Drip strong base into the acid and track the pH. Watch the buffer region, the steep jump at the equivalence point, and the indicator flip pink.", objectives = [
+const STEPS = [
+	{
+		id: "predict",
+		phase: "predict",
+		title: "Predict half-equivalence",
+		lead: "Commit before revealing the titration curve.",
+		success: "half-equivalence"
+	},
+	{
+		id: "act",
+		phase: "act",
+		title: "Build the curve",
+		lead: "Add base until the marker reaches the equivalence region.",
+		reveal: ["model", "evidence"],
+		controls: true,
+		success: "equivalence-reached"
+	},
+	{
+		id: "observe",
+		phase: "observe",
+		title: "Read the chemical evidence",
+		lead: "Compare pH, indicator colour, and position on the curve.",
+		reveal: ["model", "evidence"]
+	},
+	{
+		id: "explain",
+		phase: "explain",
+		title: "Explain weak-acid equivalence",
+		lead: "Use conjugate-base hydrolysis to classify the equivalence pH.",
+		success: "equivalence-explanation"
+	},
+	{
+		id: "transfer",
+		phase: "transfer",
+		title: "Compare acid strength",
+		lead: "Switch acid type and compare the curve and equivalence pH.",
+		reveal: ["model", "evidence"],
+		controls: true,
+		success: "acid-compared"
+	}
+];
+function TitrationLab({ analyte: analyte0 = "weak-acid", concAcid = .1, volAcidMl = 25, concBase = .1, pKa: pKa0 = 4.76, indicator: indicator0 = "phenolphthalein", title = "Acid–base titration: build the pH curve", prompt = "Drip strong base into the acid and track the pH. Watch the buffer region, the steep jump at the equivalence point, and the indicator flip pink.", objectives = [
 	"Read a titration curve: start, buffer, equivalence jump, excess base",
 	"For a weak acid, see the half-equivalence pH equals the pKa",
 	"See the equivalence pH is 7 for a strong acid but >7 for a weak acid"
-] } = {}) {
-	const Ca = concAcid, Va = volAcidMl / 1e3, Cb = concBase;
+], activity } = {}) {
+	const Ca = Math.max(.001, concAcid), Va = Math.max(1, volAcidMl) / 1e3, Cb = Math.max(.001, concBase);
 	const [analyte, setAnalyte] = useState(analyte0);
 	const [pKa, setPKa] = useState(pKa0);
+	const [indicator, setIndicator] = useState(indicator0);
 	const [vAddedMl, setVAddedMl] = useState(12);
-	const challenge = useChallenge(TITRATION_CHALLENGE);
-	useCheckpoint({
-		solved: challenge.allCorrect,
-		activity: "titration"
-	});
 	const spec = useMemo(() => ({
 		analyte,
 		Ca,
@@ -96,339 +195,383 @@ function TitrationLab({ analyte: analyte0 = "weak-acid", concAcid = .1, volAcidM
 	const vEqMl = curve.vEq * 1e3;
 	const vMaxMl = vEqMl * 2;
 	const pH = pHAt(spec, Math.min(vAddedMl, vMaxMl) / 1e3);
-	const GX0 = 360, GX1 = 700, GY0 = 30, GY1 = 330;
+	const GX0 = 330, GX1 = 670, GY0 = 40, GY1 = 330;
 	const PXv = (ml) => GX0 + ml / vMaxMl * (GX1 - GX0);
 	const PYp = (p) => GY1 - p / 14 * (GY1 - GY0);
-	const path = curve.points.map((pt) => `${PXv(pt.v * 1e3).toFixed(1)},${PYp(pt.pH).toFixed(1)}`).join(" ");
-	const pink = Math.max(0, Math.min(1, (pH - 8.3) / 1.7));
-	vAddedMl / vEqMl;
+	const curvePts = curve.points.map((pt) => [PXv(pt.v * 1e3), PYp(pt.pH)]);
+	const indicatorVisual = indicatorState(indicator, pH);
+	const indicatorSpec = INDICATORS[indicator];
+	const indicatorFits = curve.pHEq >= indicatorSpec.lowPH && curve.pHEq <= indicatorSpec.highPH;
 	const region = vAddedMl < vEqMl * .04 ? "initial acid" : Math.abs(vAddedMl - vEqMl) < vEqMl * .04 ? "equivalence point" : vAddedMl > vEqMl ? "excess base" : weak ? "buffer region" : "before equivalence";
-	const burX = 120, burTop = 40, burH = 150, burW = 26;
-	const titTop = burTop + Math.min(1, vAddedMl / vMaxMl) * (burH - 20);
-	const flaskCx = burX, flaskTop = 250, flaskBot = 348;
-	const figure = /* @__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": `Titration, ${vAddedMl.toFixed(1)} millilitres added, pH ${pH.toFixed(2)}, ${region}`,
+	const burX = 130, burTop = 30, burH = 176, burW = 30;
+	const burInner = glassInner(burX - burW / 2, burTop, burW, burH, "tube");
+	const titFrac = Math.min(1, vAddedMl / vMaxMl);
+	const burReading = (ml) => burInner.y + ml / vMaxMl * burInner.h;
+	const tipY = 206 - STROKE.edge;
+	const flaskX = 65, flaskW = 130, flaskTop = 242, flaskH = 134;
+	const flaskFill = .3 + .28 * titFrac;
+	const scaleTicks = [
+		[0, "0"],
+		[vMaxMl / 2, (vMaxMl / 2).toFixed(0)],
+		[vMaxMl, vMaxMl.toFixed(0)]
+	];
+	const figure = /* @__PURE__ */ jsx(SceneViewport, {
+		className: "chem-scene chem-titration-scene",
+		size: "wide",
+		overflow: "scroll",
+		label: "Titration apparatus and pH curve. Pan horizontally on a narrow screen.",
+		children: /* @__PURE__ */ jsxs(Figure, {
+			viewBox: [W, H],
+			domain: "chem",
+			label: `Titration, ${vAddedMl.toFixed(1)} millilitres added, pH ${pH.toFixed(2)}, ${region}`,
 			children: [
-				/* @__PURE__ */ jsx("rect", {
+				/* @__PURE__ */ jsxs(FigText, {
+					x: burX,
+					y: 20,
+					anchor: "middle",
+					size: "title",
+					children: [
+						"NaOH ",
+						Cb,
+						" M"
+					]
+				}),
+				/* @__PURE__ */ jsx(Glass, {
 					x: burX - burW / 2,
 					y: burTop,
-					width: burW,
-					height: burH,
-					rx: 4,
-					fill: "var(--stage-bg)",
-					stroke: "var(--stage-metal)",
-					strokeWidth: 2
-				}),
-				/* @__PURE__ */ jsx("rect", {
-					x: 109,
-					y: titTop,
-					width: burW - 4,
-					height: 190 - titTop - 2,
-					fill: "color-mix(in oklab, var(--stage-accent) 30%, transparent)"
-				}),
-				[
-					.25,
-					.5,
-					.75
-				].map((t) => /* @__PURE__ */ jsx("line", {
-					x1: 133,
-					y1: burTop + t * burH,
-					x2: 138,
-					y2: burTop + t * burH,
-					stroke: "var(--stage-muted)",
-					strokeWidth: 1
-				}, t)),
-				/* @__PURE__ */ jsx("text", {
-					x: 141,
-					y: 50,
-					fontSize: 10,
-					fill: "var(--stage-muted)",
-					children: "NaOH"
+					w: burW,
+					h: burH,
+					shape: "tube",
+					fill: 1 - titFrac,
+					liquid: HUE[1],
+					liquidOpacity: .7,
+					shadow: false
 				}),
+				scaleTicks.map(([ml, text]) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+					x1: 145,
+					y1: burReading(ml),
+					x2: 151,
+					y2: burReading(ml),
+					stroke: HUE.soft,
+					strokeWidth: STROKE.hair
+				}), /* @__PURE__ */ jsx(FigText, {
+					x: 155,
+					y: burReading(ml),
+					baseline: "middle",
+					size: "note",
+					tone: "soft",
+					children: text
+				})] }, text)),
 				/* @__PURE__ */ jsx("path", {
-					d: `M ${burX - 4} 190 L 124 190 L ${burX} 200 Z`,
-					fill: "var(--stage-metal)"
+					d: `M ${burX - 5} ${tipY} H 135 L ${burX} ${tipY + 12} Z`,
+					fill: HUE.metal
 				}),
-				vAddedMl < vMaxMl && /* @__PURE__ */ jsx("circle", {
+				vAddedMl < vMaxMl && /* @__PURE__ */ jsx(Ball, {
 					cx: burX,
-					cy: 214,
-					r: 3,
-					fill: "color-mix(in oklab, var(--stage-accent) 40%, transparent)"
-				}),
-				/* @__PURE__ */ jsx("path", {
-					d: `M ${flaskCx - 10} ${flaskTop} L ${flaskCx - 10} 264 L ${flaskCx - 44} ${flaskBot - 6} Q ${flaskCx - 46} ${flaskBot} ${flaskCx - 40} ${flaskBot} L 160 ${flaskBot} Q 166 ${flaskBot} 164 ${flaskBot - 6} L 130 264 L 130 ${flaskTop} Z`,
-					fill: `color-mix(in oklab, ${PINK} ${(pink * 70).toFixed(0)}%, color-mix(in oklab, var(--stage-accent) 8%, var(--stage-bg)))`,
-					stroke: "var(--stage-metal)",
-					strokeWidth: 2,
-					strokeLinejoin: "round"
-				}),
-				/* @__PURE__ */ jsx("text", {
-					x: flaskCx,
-					y: 364,
-					textAnchor: "middle",
-					fontSize: 11,
-					fill: "var(--stage-muted)",
-					children: pink > .5 ? "pink, past end point" : "colourless"
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: GX0,
-					y1: GY0,
-					x2: GX0,
-					y2: GY1,
-					stroke: "var(--stage-fg)",
-					strokeWidth: 1.5
+					cy: tipY + 26,
+					r: 3.5,
+					color: HUE[1]
 				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: GX0,
-					y1: GY1,
-					x2: GX1,
-					y2: GY1,
-					stroke: "var(--stage-fg)",
-					strokeWidth: 1.5
+				/* @__PURE__ */ jsx(Glass, {
+					x: flaskX,
+					y: flaskTop,
+					w: flaskW,
+					h: flaskH,
+					shape: "flask",
+					fill: flaskFill,
+					liquid: indicatorVisual.color,
+					liquidOpacity: .85
 				}),
-				[
-					0,
-					7,
-					14
-				].map((p) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
-					x1: GX0 - 4,
-					y1: PYp(p),
-					x2: GX0,
-					y2: PYp(p),
-					stroke: "var(--stage-muted)",
-					strokeWidth: 1
-				}), /* @__PURE__ */ jsx("text", {
-					x: GX0 - 7,
-					y: PYp(p) + 3,
-					textAnchor: "end",
-					fontSize: 10,
-					fill: "var(--stage-muted)",
-					children: p
-				})] }, p)),
-				/* @__PURE__ */ jsx("text", {
-					x: GX0 - 7,
-					y: GY0 - 4,
-					textAnchor: "end",
-					fontSize: 10,
-					fill: "var(--stage-muted)",
-					children: "pH"
-				}),
-				/* @__PURE__ */ jsx("text", {
-					x: GX1,
-					y: 348,
-					textAnchor: "end",
-					fontSize: 10,
-					fill: "var(--stage-muted)",
-					children: "base added (mL) →"
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: GX0,
-					y1: PYp(7),
-					x2: GX1,
-					y2: PYp(7),
-					stroke: "var(--stage-grid)",
-					strokeWidth: 1,
-					strokeDasharray: "3 4"
-				}),
-				weak && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx("rect", {
-						x: PXv(vEqMl * .15),
-						y: GY0,
-						width: PXv(vEqMl * .85) - PXv(vEqMl * .15),
-						height: GY1 - GY0,
-						fill: "var(--stage-good)",
-						opacity: .08
-					}),
-					/* @__PURE__ */ jsx("line", {
-						x1: PXv(vEqMl / 2),
-						y1: PYp(curve.pHHalf),
-						x2: PXv(vEqMl / 2),
-						y2: GY1,
-						stroke: "var(--stage-good)",
-						strokeWidth: 1,
-						strokeDasharray: "3 3"
-					}),
-					/* @__PURE__ */ jsx("text", {
-						x: PXv(vEqMl / 2),
-						y: PYp(curve.pHHalf) - 6,
-						textAnchor: "middle",
-						fontSize: 9.5,
-						fontWeight: 700,
-						fill: "var(--stage-good)",
-						children: "½eq · pH=pKa"
-					})
-				] }),
-				/* @__PURE__ */ jsx("circle", {
-					cx: PXv(vEqMl),
-					cy: PYp(curve.pHEq),
-					r: 4,
-					fill: "var(--stage-warn)"
+				/* @__PURE__ */ jsxs(FigText, {
+					x: burX,
+					y: 366,
+					anchor: "middle",
+					size: "note",
+					children: ["pH ", pH.toFixed(2)]
 				}),
-				/* @__PURE__ */ jsxs("text", {
-					x: PXv(vEqMl),
-					y: PYp(curve.pHEq) - 8,
-					textAnchor: "middle",
-					fontSize: 9.5,
-					fontWeight: 700,
-					fill: "var(--stage-warn)",
+				/* @__PURE__ */ jsxs(PlotFrame, {
+					x: GX0,
+					y: GY0,
+					w: GX1 - GX0,
+					h: GY1 - GY0,
+					title: "pH curve",
+					xLabel: "base added (mL)",
+					yLabel: "pH",
+					arrows: false,
+					xTicks: [
+						{
+							at: PXv(0),
+							label: "0"
+						},
+						{
+							at: PXv(vEqMl),
+							label: vEqMl.toFixed(0)
+						},
+						{
+							at: PXv(vMaxMl),
+							label: vMaxMl.toFixed(0)
+						}
+					],
+					yTicks: [
+						0,
+						7,
+						14
+					].map((p) => ({
+						at: PYp(p),
+						label: String(p)
+					})),
 					children: [
-						"equiv. ",
-						vEqMl.toFixed(0),
-						" mL"
+						/* @__PURE__ */ jsx(Guide, {
+							x1: GX1,
+							y1: PYp(7),
+							x2: GX0,
+							y2: PYp(7),
+							color: HUE.soft
+						}),
+						weak && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Region, {
+							x: PXv(vEqMl * .15),
+							y: 44,
+							w: PXv(vEqMl * .85) - PXv(vEqMl * .15),
+							h: GY1 - GY0 - 4,
+							color: HUE[3],
+							label: "buffer"
+						}), /* @__PURE__ */ jsx(Guide, {
+							x1: PXv(vEqMl / 2),
+							y1: GY1,
+							x2: PXv(vEqMl / 2),
+							y2: PYp(curve.pHHalf),
+							color: HUE[3],
+							label: "½ eq · pH = pKa",
+							labelDy: -10
+						})] }),
+						/* @__PURE__ */ jsx(Curve, {
+							points: curvePts,
+							color: HUE[1]
+						}),
+						/* @__PURE__ */ jsx(Marker, {
+							x: PXv(vEqMl),
+							y: PYp(curve.pHEq),
+							color: HUE[2],
+							label: "equivalence"
+						}),
+						/* @__PURE__ */ jsx(Ball, {
+							cx: PXv(vAddedMl),
+							cy: PYp(pH),
+							r: 7,
+							color: indicatorVisual.color,
+							active: true
+						})
 					]
-				}),
-				/* @__PURE__ */ jsx("polyline", {
-					points: path,
-					fill: "none",
-					stroke: "var(--stage-accent)",
-					strokeWidth: 3,
-					strokeLinejoin: "round",
-					strokeLinecap: "round"
-				}),
-				/* @__PURE__ */ jsx("circle", {
-					cx: PXv(vAddedMl),
-					cy: PYp(pH),
-					r: 6,
-					fill: pink > .5 ? PINK : "var(--stage-fg)",
-					stroke: "var(--stage-bg)",
-					strokeWidth: 2
 				})
 			]
 		})
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		objectives,
-		aside: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Callout, {
-			tone: "result",
-			children: /* @__PURE__ */ jsxs("span", {
-				style: {
-					display: "grid",
-					gap: 2,
-					fontVariantNumeric: "tabular-nums"
-				},
-				children: [/* @__PURE__ */ jsxs("span", {
-					style: {
-						fontWeight: 800,
-						fontSize: 18
-					},
-					children: ["pH ", pH.toFixed(2)]
-				}), /* @__PURE__ */ jsxs("span", {
-					style: {
-						fontSize: 13,
-						color: "var(--stage-muted)"
-					},
-					children: [
-						vAddedMl.toFixed(1),
-						" mL added · ",
-						region
-					]
-				})]
-			})
-		}), /* @__PURE__ */ jsx("div", {
-			style: {
-				display: "grid",
-				gap: 8,
-				padding: "8px 2px 0",
-				fontSize: 13
-			},
+	const evidence = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Readout, {
+			value: /* @__PURE__ */ jsxs(Fragment$1, { children: ["pH ", pH.toFixed(2)] }),
+			sub: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				vAddedMl.toFixed(1),
+				" mL added · ",
+				region
+			] })
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "lab-metric-list",
+			children: [
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "indicator" }), /* @__PURE__ */ jsx("strong", { children: indicatorSpec.label })] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "transition interval" }), /* @__PURE__ */ jsxs("strong", { children: [
+					"pH ",
+					indicatorSpec.lowPH,
+					"–",
+					indicatorSpec.highPH
+				] })] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "fit for this equivalence" }), /* @__PURE__ */ jsx("strong", { children: indicatorFits ? "yes" : "poor fit" })] })
+			]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "chem-explanation",
 			children: weak ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tex, {
 				tex: "\\text{pH} = \\text{p}K_a + \\log\\dfrac{[\\mathrm{A^-}]}{[\\mathrm{HA}]}",
 				block: true
-			}), /* @__PURE__ */ jsxs("span", {
-				style: { color: "var(--stage-muted)" },
-				children: [
-					"In the buffer region the pH barely moves, at the half-equivalence point [A⁻] = [HA] so ",
-					/* @__PURE__ */ jsxs("strong", {
-						style: { color: "var(--stage-fg)" },
-						children: ["pH = pKa = ", pKa.toFixed(2)]
-					}),
-					". The equivalence point is ",
-					/* @__PURE__ */ jsxs("strong", {
-						style: { color: "var(--stage-fg)" },
-						children: [
-							"basic (pH ",
-							curve.pHEq.toFixed(1),
-							")"
-						]
-					}),
-					" because the conjugate base hydrolyses."
-				]
-			})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tex, {
+			}), /* @__PURE__ */ jsxs("span", { children: [
+				"In the buffer region the pH barely moves, at the half-equivalence point [A⁻] = [HA] so",
+				" ",
+				/* @__PURE__ */ jsxs("strong", { children: ["pH = pKa = ", pKa.toFixed(2)] }),
+				". The equivalence point is",
+				" ",
+				/* @__PURE__ */ jsxs("strong", { children: [
+					"basic (pH ",
+					curve.pHEq.toFixed(1),
+					")"
+				] }),
+				" because the conjugate base hydrolyses."
+			] })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Tex, {
 				tex: "\\text{pH} = -\\log[\\mathrm{H^+}]",
 				block: true
-			}), /* @__PURE__ */ jsxs("span", {
-				style: { color: "var(--stage-muted)" },
-				children: [
-					"A strong acid is fully dissociated, so the pH climbs slowly then leaps through ",
-					/* @__PURE__ */ jsx("strong", {
-						style: { color: "var(--stage-fg)" },
-						children: "pH 7"
-					}),
-					" at the equivalence point and levels off in excess base."
-				]
-			})] })
-		})] }),
-		controls: /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				gap: 10
-			},
-			children: [/* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsx(Field, {
-				label: "acid in the flask",
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "lab-field-row",
-					children: [/* @__PURE__ */ jsx(Chip, {
-						selected: !weak,
-						onClick: () => setAnalyte("strong-acid"),
-						children: "strong acid (HCl)"
-					}), /* @__PURE__ */ jsx(Chip, {
-						selected: weak,
-						onClick: () => setAnalyte("weak-acid"),
-						children: "weak acid (CH₃COOH)"
-					})]
-				})
-			}), weak && /* @__PURE__ */ jsx(Field, {
-				label: "pKa",
-				value: pKa.toFixed(2),
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: pKa,
-					min: 3,
-					max: 6,
-					step: .1,
-					onChange: setPKa,
-					ariaLabel: "acid pKa"
-				})
-			})] }), /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
-				label: "base added",
-				value: `${vAddedMl.toFixed(1)} mL`,
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: vAddedMl,
-					min: 0,
-					max: vMaxMl,
-					step: .5,
-					onChange: setVAddedMl,
-					ariaLabel: "volume of base added (mL)"
-				})
-			}) })]
+			}), /* @__PURE__ */ jsxs("span", { children: [
+				"A strong acid is fully dissociated, so the pH climbs slowly then leaps through",
+				" ",
+				/* @__PURE__ */ jsx("strong", { children: "pH 7" }),
+				" at the equivalence point and levels off in excess base."
+			] })] })
+		})
+	] });
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Field, {
+			label: "acid in the flask",
+			children: /* @__PURE__ */ jsx(ActivitySelect, {
+				ariaLabel: "acid in the flask",
+				value: analyte,
+				onChange: setAnalyte,
+				options: [{
+					value: "strong-acid",
+					label: "strong acid (HCl)"
+				}, {
+					value: "weak-acid",
+					label: "weak acid (CH₃COOH)"
+				}]
+			})
 		}),
-		footer: /* @__PURE__ */ jsx(ChallengeCard, {
-			questions: TITRATION_CHALLENGE,
-			state: challenge,
-			title: "Predict"
+		weak && /* @__PURE__ */ jsx(Field, {
+			label: "pKa",
+			value: pKa.toFixed(2),
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: pKa,
+				min: 3,
+				max: 6,
+				step: .1,
+				onChange: setPKa,
+				ariaLabel: "acid pKa"
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "indicator",
+			children: /* @__PURE__ */ jsx(ActivitySelect, {
+				ariaLabel: "indicator",
+				value: indicator,
+				onChange: setIndicator,
+				options: Object.keys(INDICATORS).map((item) => ({
+					value: item,
+					label: INDICATORS[item].label
+				}))
+			})
 		}),
-		children: figure
+		/* @__PURE__ */ jsxs(Field, {
+			label: "base added",
+			value: `${vAddedMl.toFixed(1)} mL`,
+			children: [/* @__PURE__ */ jsx(Slider, {
+				value: vAddedMl,
+				min: 0,
+				max: vMaxMl,
+				step: .5,
+				onChange: setVAddedMl,
+				ariaLabel: "volume of base added (mL)"
+			}), /* @__PURE__ */ jsx(ActivitySelect, {
+				ariaLabel: "titration landmarks",
+				value: LANDMARKS.find((l) => Math.abs(vAddedMl - l.at(vEqMl)) < .1)?.id ?? "",
+				onChange: (id) => {
+					const landmark = LANDMARKS.find((l) => l.id === id);
+					if (landmark) setVAddedMl(landmark.at(vEqMl));
+				},
+				options: LANDMARKS.map((l) => ({
+					value: l.id,
+					label: l.label
+				}))
+			})]
+		})
+	] });
+	const equivalenceReached = Math.abs(vAddedMl - vEqMl) <= Math.max(.5, vEqMl * .04);
+	const acidCompared = analyte !== analyte0;
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		focusLayout: "immersive",
+		activity: activity ?? {
+			pattern: "investigation",
+			title,
+			objectives,
+			steps: STEPS,
+			questions: TITRATION_CHALLENGE,
+			success: [
+				{
+					id: "half-equivalence",
+					source: "answer",
+					key: "half-eq",
+					pendingLabel: "Identify the pH at half-equivalence."
+				},
+				{
+					id: "equivalence-reached",
+					source: "metric",
+					key: "equivalenceDistance",
+					operator: "between",
+					min: -1,
+					max: 1,
+					pendingLabel: "Move the base volume to the equivalence region."
+				},
+				{
+					id: "equivalence-explanation",
+					source: "answer",
+					key: "equiv",
+					pendingLabel: "Classify a weak acid’s equivalence point."
+				},
+				{
+					id: "acid-compared",
+					source: "metric",
+					key: "acidTypeChanged",
+					operator: "eq",
+					value: true,
+					pendingLabel: "Switch acid type."
+				}
+			]
+		},
+		activityId: "titration",
+		eyebrow: "Acid-base chemistry",
+		title,
+		description: prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("span", { children: ["pH ", pH.toFixed(2)] }),
+			/* @__PURE__ */ jsxs("span", { children: [vAddedMl.toFixed(1), " mL"] }),
+			/* @__PURE__ */ jsx("span", { children: region })
+		] }),
+		evidence: ({ sequence }) => sequence.shows("evidence") ? evidence : null,
+		controls: ({ sequence }) => sequence.current.controls ? controls : null,
+		observation: ({ sequence }) => sequence.shows("model") ? region === "buffer region" ? "In the buffer region each addition barely moves the pH: the weak acid and its conjugate base absorb the change." : region === "equivalence point" ? "At equivalence the acid is exactly consumed, so one more drop swings the pH sharply." : region === "excess base" ? "Past equivalence the pH is set by the excess base, so the curve flattens again." : "Before equivalence the acid still dominates; the pH climbs slowly as base is added." : null,
+		transcript: /* @__PURE__ */ jsxs("p", { children: [
+			analyte === "weak-acid" ? "Weak acid" : "Strong acid",
+			" titrated with strong base.",
+			" ",
+			vAddedMl.toFixed(1),
+			" millilitres has been added, the pH is ",
+			pH.toFixed(2),
+			", and the experiment is in the ",
+			region,
+			". Equivalence occurs at ",
+			vEqMl.toFixed(1),
+			" millilitres with pH",
+			" ",
+			curve.pHEq.toFixed(2),
+			". ",
+			indicatorSpec.label,
+			" changes across pH ",
+			indicatorSpec.lowPH,
+			" to",
+			" ",
+			indicatorSpec.highPH,
+			" and is ",
+			indicatorFits ? "a suitable" : "a poor",
+			" indicator for this curve."
+		] }),
+		children: ({ sequence, complete }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(AuthoredMetricGate, {
+				conditionId: "equivalence-reached",
+				met: sequence.current.id === "act" && equivalenceReached,
+				complete
+			}),
+			/* @__PURE__ */ jsx(AuthoredMetricGate, {
+				conditionId: "acid-compared",
+				met: sequence.current.id === "transfer" && acidCompared,
+				complete
+			}),
+			sequence.shows("model") ? figure : /* @__PURE__ */ jsx("p", { children: "Answer the prediction to reveal the titration apparatus and curve." })
+		] })
 	});
 }