@classytic/labs 0.2.0 → 0.3.0

package/dist/chem/equilibrium/preset.mjs

@@ -1,13 +1,19 @@
 'use client';
 
 import { Tex } from "../../core/tex.mjs";
-import { Chip } from "../../kit/controls.mjs";
-import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
-import { ChallengeCard, useChallenge, useCheckpoint } from "../../kit/pedagogy.mjs";
+import { Chip, IconButton, Segmented } from "../../kit/controls.mjs";
+import { Field, Readout, SceneViewport } from "../../kit/frame.mjs";
+import { AuthoredActivityRuntime } from "../../kit/authored-activity-runtime.mjs";
+import { Figure, HUE, STROKE, tint } from "../../kit/figure/figure.mjs";
+import { FigText } from "../../kit/figure/text.mjs";
+import { Block, Particle } from "../../kit/figure/body.mjs";
+import { Glass, glassInner } from "../../kit/figure/container.mjs";
+import { Curve, Marker, PlotFrame } from "../../kit/figure/plot.mjs";
 import { useFrameTick } from "../../kit/anim.mjs";
 import { PlayWrap, usePlayGate } from "../../kit/play.mjs";
 import { useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Flame, Maximize2, Minimize2, RotateCcw, Snowflake } from "lucide-react";
 import { EquilibriumCore } from "@classytic/stage/sim";
 
 //#region src/chem/equilibrium/preset.tsx
@@ -27,61 +33,108 @@ import { EquilibriumCore } from "@classytic/stage/sim";
 * hardcoded, so it stays correct for whatever reaction the creator declares.
 * Hand-driven on EquilibriumCore, play-gated.
 */
-const W = 720, H = 360;
+const W = 720, H = 322;
 const T0 = 300, CAP = 200;
-/** Predict the shift the default N₂O₄ ⇌ 2NO₂ system makes: pressure favours fewer moles; heating the endothermic forward reaction makes more product. */
-const EQUILIBRIUM_CHALLENGE = [{
-	id: "compress",
-	prompt: "Compress the flask (raise pressure). N₂O₄ ⇌ 2NO₂ shifts toward…",
-	choices: [
+const FX = 30, FY = 44, FW = 200, FH = 236;
+const BAR_W = 34, BAR_X = [278, 328], BAR_TOP = 70, BAR_BOT = 250;
+const GX0 = 420, GX1 = 690, GY0 = 62, GY1 = 250;
+/** Deterministic molecule slots inside the flask body (no per-frame randomness). */
+const SLOTS = 32;
+const ACTIVITY = {
+	pattern: "investigation",
+	title: "Le Chatelier: equilibrium fights back",
+	objectives: ["Use Q and K to predict shift direction", "Predict pressure and temperature effects"],
+	steps: [
 		{
-			value: "reactant",
-			label: "N₂O₄ (paler)"
+			id: "predict",
+			phase: "predict",
+			title: "Predict a pressure stress",
+			lead: "Commit before changing the flask.",
+			success: "compress"
 		},
 		{
-			value: "product",
-			label: "NO₂ (browner)"
+			id: "act",
+			phase: "act",
+			title: "Stress the equilibrium",
+			lead: "Add species, change volume, and watch Q return toward K.",
+			controls: true,
+			reveal: ["model"]
 		},
 		{
-			value: "none",
-			label: "no change"
+			id: "explain",
+			phase: "explain",
+			title: "Explain temperature",
+			lead: "Connect the reaction enthalpy to the new equilibrium.",
+			success: "heat"
 		}
 	],
-	answer: "reactant",
-	explain: "Squeezing favours the side with fewer gas moles, 1 mol N₂O₄ beats 2 mol NO₂, so the mix goes paler."
-}, {
-	id: "heat",
-	prompt: "The forward reaction is endothermic. Heating the flask makes the mix…",
-	choices: [
-		{
-			value: "browner",
-			label: "browner, and K rises"
-		},
-		{
-			value: "paler",
-			label: "paler, and K falls"
-		},
-		{
-			value: "same",
-			label: "unchanged"
-		}
-	],
-	answer: "browner",
-	explain: "Heat is a reactant for an endothermic forward step, so it drives more NO₂ (browner) and raises K."
-}];
-function LeChatelierLab({ reactantName = "N₂O₄", productName = "NO₂", productCoeff = 2, productColor = "rgb(150,82,40)", reactantColor = "var(--stage-accent, #3b82f6)", K = .6, endothermic = true, title = "Le Chatelier: equilibrium fights back", prompt = "A reversible reaction sits at equilibrium (Q = K). Stress it, add a gas, squeeze it, heat it, and watch the reaction shift to oppose the change.", objectives = [
+	questions: [{
+		id: "compress",
+		prompt: "Compress the flask (raise pressure). N₂O₄ ⇌ 2NO₂ shifts toward…",
+		kind: "choice",
+		choices: [
+			{
+				value: "reactant",
+				label: "N₂O₄ (paler)"
+			},
+			{
+				value: "product",
+				label: "NO₂ (browner)"
+			},
+			{
+				value: "none",
+				label: "no change"
+			}
+		],
+		answer: "reactant",
+		explain: "Squeezing favours the side with fewer gas moles, 1 mol N₂O₄ beats 2 mol NO₂, so the mix goes paler."
+	}, {
+		id: "heat",
+		prompt: "The forward reaction is endothermic. Heating the flask makes the mix…",
+		kind: "choice",
+		choices: [
+			{
+				value: "browner",
+				label: "browner, and K rises"
+			},
+			{
+				value: "paler",
+				label: "paler, and K falls"
+			},
+			{
+				value: "same",
+				label: "unchanged"
+			}
+		],
+		answer: "browner",
+		explain: "Heat is a reactant for an endothermic forward step, so it drives more NO₂ (browner) and raises K."
+	}],
+	success: [{
+		id: "compress",
+		source: "answer",
+		key: "compress",
+		operator: "eq",
+		value: "reactant"
+	}, {
+		id: "heat",
+		source: "answer",
+		key: "heat",
+		operator: "eq",
+		value: "browner"
+	}]
+};
+function LeChatelierLab({ reactantName = "N₂O₄", productName = "NO₂", productCoeff = 2, productColor = HUE[2], reactantColor = HUE[1], K = .6, endothermic = true, title = "Le Chatelier: equilibrium fights back", prompt = "A reversible reaction sits at equilibrium (Q = K). Stress it, add a gas, squeeze it, heat it, and watch the reaction shift to oppose the change.", objectives = [
 	"Read equilibrium as Q = K (the reaction quotient meets the constant)",
 	"Predict the shift when you add/remove a species or change the volume",
 	"See heating favour the endothermic side and change K itself"
-] } = {}) {
+], activity = ACTIVITY } = {}) {
+	const runtimeActivity = activity === ACTIVITY ? {
+		...activity,
+		objectives
+	} : activity;
 	const [T, setT] = useState(T0);
 	const [resetN, setResetN] = useState(0);
 	const gate = usePlayGate();
-	const challenge = useChallenge(EQUILIBRIUM_CHALLENGE);
-	useCheckpoint({
-		solved: challenge.allCorrect,
-		activity: "le-chatelier"
-	});
 	const SPEC = [{
 		name: reactantName,
 		coeff: 1,
@@ -138,276 +191,276 @@ function LeChatelierLab({ reactantName = "N₂O₄", productName = "NO₂", prod
 	const maxC = Math.max(1.2, a, b, ...histRef.current.map((p) => Math.max(p.a, p.b)));
 	const ratio = st.K > 0 && isFinite(st.Q) ? st.Q / st.K : 1;
 	const status = ratio < .92 ? `shifting → (making ${productName})` : ratio > 1.08 ? `shifting ← (making ${reactantName})` : "at equilibrium · Q = K";
-	const tint = Math.min(.85, b / (a + b + 1e-6) * .95), fx = 70, fy = 60;
-	const gx0 = 320, gx1 = 695, gy0 = 60, gy1 = 300;
-	const line = (key) => histRef.current.map((p, i) => {
-		const x = gx0 + (histRef.current.length <= 1 ? 0 : i / (histRef.current.length - 1)) * (gx1 - gx0);
-		const y = gy1 - p[key] / maxC * (gy1 - gy0);
-		return `${x.toFixed(1)},${y.toFixed(1)}`;
-	}).join(" ");
+	const tintOp = Math.min(.85, b / (a + b + 1e-6) * .95);
+	const inner = glassInner(FX, FY, FW, FH, "flask");
+	const bodyTop = 162, bodyBot = inner.y + inner.h - 14, bodyL = 52, bodyR = 208;
+	const nMol = Math.max(4, Math.min(SLOTS, Math.round(SLOTS * (a + b) / 1.6)));
+	const nProd = Math.round(nMol * b / (a + b + 1e-6));
+	const molecules = Array.from({ length: nMol }, (_, i) => {
+		const hx = (i * .6180339887 + .07) % 1, hy = (i * .7548776 + .31) % 1;
+		return {
+			x: bodyL + hx * (bodyR - bodyL),
+			y: bodyTop + hy * (bodyBot - bodyTop),
+			product: i < nProd
+		};
+	});
+	const hist = histRef.current;
+	const px = (i, n) => GX0 + (n <= 1 ? 0 : i / (n - 1)) * (GX1 - GX0);
+	const py = (v) => GY1 - v / maxC * (GY1 - GY0);
+	const trace = (key) => hist.map((p, i) => [px(i, hist.length), py(p[key])]);
+	const nowX = px(Math.max(0, hist.length - 1), hist.length);
+	const barY = (v) => BAR_BOT - v / maxC * (BAR_BOT - BAR_TOP);
 	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": `${reactantName} to ${productName} equilibrium, Q ${st.Q.toFixed(2)}, K ${st.K.toFixed(2)}, ${status}`,
+		children: /* @__PURE__ */ jsx(SceneViewport, {
+			className: "chem-scene chem-equilibrium-scene",
+			size: "wide",
+			overflow: "scroll",
+			label: "Equilibrium vessel and concentration graph. Pan horizontally on a narrow screen.",
+			children: /* @__PURE__ */ jsxs(Figure, {
+				viewBox: [W, H],
+				domain: "chem",
+				label: `${reactantName} to ${productName} equilibrium, Q ${st.Q.toFixed(2)}, K ${st.K.toFixed(2)}, ${status}`,
 				children: [
-					/* @__PURE__ */ jsx("path", {
-						d: `M 140 ${fy} L 140 110 Q ${fx} 150 76 260 Q 90 290 170 290 Q 250 290 264 260 Q 270 150 200 110 L 200 ${fy}`,
-						fill: productColor,
-						fillOpacity: tint,
-						stroke: "var(--stage-metal)",
-						strokeWidth: 2.5,
-						strokeLinejoin: "round"
-					}),
-					/* @__PURE__ */ jsxs("text", {
-						x: 170,
-						y: 312,
-						textAnchor: "middle",
-						fontSize: 12,
-						fill: "var(--stage-muted)",
+					/* @__PURE__ */ jsxs(FigText, {
+						x: 130,
+						y: FY - 14,
+						anchor: "middle",
+						size: "title",
 						children: [
+							"sealed flask · ",
+							T,
+							" K"
+						]
+					}),
+					/* @__PURE__ */ jsxs(Glass, {
+						x: FX,
+						y: FY,
+						w: FW,
+						h: FH,
+						shape: "flask",
+						label: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 							"tint ∝ [",
 							productName,
 							"]"
-						]
+						] }),
+						children: [/* @__PURE__ */ jsx("rect", {
+							className: "fig-ease",
+							x: FX,
+							y: FY,
+							width: FW,
+							height: FH,
+							fill: productColor,
+							fillOpacity: tintOp,
+							style: { transition: "fill-opacity 0.45s ease" }
+						}), molecules.map((m, i) => /* @__PURE__ */ jsx(Particle, {
+							x: m.x,
+							y: m.y,
+							r: 5,
+							color: m.product ? productColor : reactantColor
+						}, i))]
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: (BAR_X[0] + BAR_X[1]) / 2 + BAR_W / 2,
+						y: FY - 14,
+						anchor: "middle",
+						size: "title",
+						children: "now"
 					}),
-					/* @__PURE__ */ jsx("g", { children: [[
+					[[
 						reactantName,
 						a,
 						reactantColor,
-						100
+						BAR_X[0]
 					], [
 						productName,
 						b,
 						productColor,
-						165
+						BAR_X[1]
 					]].map(([nm, v, col, bx]) => {
-						const bh = v / maxC * 150, by = 100 + (150 - bh);
+						const top = barY(v);
 						return /* @__PURE__ */ jsxs("g", { children: [
 							/* @__PURE__ */ jsx("rect", {
 								x: bx,
-								y: by,
-								width: 44,
-								height: bh,
-								rx: 3,
-								fill: col,
-								opacity: .55
+								y: BAR_TOP,
+								width: BAR_W,
+								height: BAR_BOT - BAR_TOP,
+								rx: 4,
+								fill: tint(col, 12)
 							}),
-							/* @__PURE__ */ jsx("text", {
-								x: bx + 22,
-								y: 265,
-								textAnchor: "middle",
-								fontSize: 11,
-								fill: "var(--stage-fg)",
-								children: nm
+							/* @__PURE__ */ jsx(Block, {
+								x: bx,
+								y: top,
+								w: BAR_W,
+								h: Math.max(2, BAR_BOT - top),
+								color: col
 							}),
-							/* @__PURE__ */ jsx("text", {
-								x: bx + 22,
-								y: by - 5,
-								textAnchor: "middle",
-								fontSize: 10,
-								fontWeight: 700,
-								fill: "var(--stage-fg)",
-								style: { fontVariantNumeric: "tabular-nums" },
+							/* @__PURE__ */ jsx(FigText, {
+								x: bx + BAR_W / 2,
+								y: top - 7,
+								anchor: "middle",
+								size: "note",
 								children: v.toFixed(2)
+							}),
+							/* @__PURE__ */ jsx(FigText, {
+								x: bx + BAR_W / 2,
+								y: 268,
+								anchor: "middle",
+								size: "note",
+								tone: "soft",
+								children: nm
 							})
 						] }, nm);
-					}) }),
-					/* @__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: 62,
-						textAnchor: "end",
-						fontSize: 10,
-						fill: "var(--stage-muted)",
-						children: "conc"
+						x1: BAR_X[0] - 6,
+						y1: BAR_BOT,
+						x2: BAR_X[1] + BAR_W + 6,
+						y2: BAR_BOT,
+						stroke: HUE.ink,
+						strokeWidth: STROKE.hair
 					}),
-					/* @__PURE__ */ jsx("text", {
-						x: gx1,
-						y: 318,
-						textAnchor: "end",
-						fontSize: 10,
-						fill: "var(--stage-muted)",
-						children: "time →"
-					}),
-					histRef.current.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("polyline", {
-						points: line("a"),
-						fill: "none",
-						stroke: reactantColor,
-						strokeWidth: 2.5
-					}), /* @__PURE__ */ jsx("polyline", {
-						points: line("b"),
-						fill: "none",
-						stroke: productColor,
-						strokeWidth: 2.5
-					})] }),
-					/* @__PURE__ */ jsx("text", {
-						x: 328,
-						y: 74,
-						fontSize: 11,
-						fill: reactantColor,
-						children: reactantName
-					}),
-					/* @__PURE__ */ jsx("text", {
-						x: 384,
-						y: 74,
-						fontSize: 11,
-						fill: productColor,
-						children: productName
+					/* @__PURE__ */ jsxs(PlotFrame, {
+						x: GX0,
+						y: GY0,
+						w: GX1 - GX0,
+						h: GY1 - GY0,
+						title: "concentration over time",
+						xLabel: "time",
+						yLabel: "concentration",
+						children: [
+							hist.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Curve, {
+								points: trace("a"),
+								color: reactantColor
+							}), /* @__PURE__ */ jsx(Curve, {
+								points: trace("b"),
+								color: productColor
+							})] }),
+							/* @__PURE__ */ jsx(Marker, {
+								x: nowX,
+								y: py(a),
+								color: reactantColor,
+								r: 4.5
+							}),
+							/* @__PURE__ */ jsx(Marker, {
+								x: nowX,
+								y: py(b),
+								color: productColor,
+								r: 4.5
+							})
+						]
 					})
 				]
 			})
 		})
 	});
 	const exp = productCoeff === 1 ? "" : `^${productCoeff}`;
-	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: 15
-					},
-					children: [
-						"Q = ",
-						isFinite(st.Q) ? st.Q.toFixed(2) : "∞",
-						" · K = ",
-						st.K.toFixed(2)
-					]
-				}), /* @__PURE__ */ jsx("span", {
-					style: {
-						fontSize: 13,
-						color: "var(--stage-muted)"
-					},
-					children: status
-				})]
-			})
-		}), /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				gap: 8,
-				padding: "8px 2px 0",
-				fontSize: 13
-			},
-			children: [/* @__PURE__ */ jsx(Tex, {
-				tex: `K = \\dfrac{[\\mathrm{${productName}}]${exp}}{[\\mathrm{${reactantName}}]}`,
-				block: true
-			}), /* @__PURE__ */ jsxs("span", {
-				style: { color: "var(--stage-muted)" },
-				children: [
-					"The system always moves to bring ",
-					/* @__PURE__ */ jsx("strong", {
-						style: { color: "var(--stage-fg)" },
-						children: "Q back to K"
-					}),
-					". Add a species and it’s consumed; compress and it shifts to fewer moles; ",
-					endothermic ? "heat and the endothermic forward reaction wins" : "heat and the exothermic reverse reaction wins",
-					", and K itself changes with temperature."
-				]
+	const aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Readout, {
+		value: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			"Q = ",
+			isFinite(st.Q) ? st.Q.toFixed(2) : "∞",
+			" · K = ",
+			st.K.toFixed(2)
+		] }),
+		sub: /* @__PURE__ */ jsx(Fragment$1, { children: status })
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "chem-explanation",
+		children: [/* @__PURE__ */ jsx(Tex, {
+			tex: `K = \\dfrac{[\\mathrm{${productName}}]${exp}}{[\\mathrm{${reactantName}}]}`,
+			block: true
+		}), /* @__PURE__ */ jsxs("span", { children: [
+			"The system always moves to bring ",
+			/* @__PURE__ */ jsx("strong", { children: "Q back to K" }),
+			". Add a species and it’s consumed; compress and it shifts to fewer moles;",
+			" ",
+			endothermic ? "heat and the endothermic forward reaction wins" : "heat and the exothermic reverse reaction wins",
+			", and K itself changes with temperature."
+		] })]
+	})] });
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Field, {
+		label: "add / remove",
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "lab-field-row",
+			children: [/* @__PURE__ */ jsxs(Chip, {
+				selected: false,
+				onClick: addA,
+				children: ["+ ", reactantName]
+			}), /* @__PURE__ */ jsxs(Chip, {
+				selected: false,
+				onClick: addB,
+				children: ["+ ", productName]
 			})]
-		})] }),
-		controls: /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				gap: 10
-			},
-			children: [/* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsx(Field, {
-				label: "add / remove",
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "lab-field-row",
-					children: [/* @__PURE__ */ jsxs(Chip, {
-						selected: false,
-						onClick: addA,
-						children: ["+ ", reactantName]
-					}), /* @__PURE__ */ jsxs(Chip, {
-						selected: false,
-						onClick: addB,
-						children: ["+ ", productName]
-					})]
-				})
-			}), /* @__PURE__ */ jsx(Field, {
-				label: "volume",
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "lab-field-row",
-					children: [/* @__PURE__ */ jsx(Chip, {
-						selected: false,
-						onClick: compress,
-						children: "⬇ compress"
-					}), /* @__PURE__ */ jsx(Chip, {
-						selected: false,
-						onClick: expand,
-						children: "⬆ expand"
-					})]
-				})
-			})] }), /* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsx(Field, {
-				label: "temperature",
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "lab-field-row",
-					children: [
-						/* @__PURE__ */ jsx(Chip, {
-							selected: T > T0,
-							onClick: () => setT(420),
-							children: "🔥 heat"
-						}),
-						/* @__PURE__ */ jsx(Chip, {
-							selected: T === T0,
-							onClick: () => setT(T0),
-							children: "room"
-						}),
-						/* @__PURE__ */ jsx(Chip, {
-							selected: T < T0,
-							onClick: () => setT(220),
-							children: "❄ cool"
-						})
-					]
-				})
-			}), /* @__PURE__ */ jsx(Field, {
-				label: " ",
-				children: /* @__PURE__ */ jsx(Chip, {
-					selected: false,
-					onClick: () => setResetN((n) => n + 1),
-					children: "↻ reset"
-				})
-			})] })]
-		}),
-		footer: /* @__PURE__ */ jsx(ChallengeCard, {
-			questions: EQUILIBRIUM_CHALLENGE,
-			state: challenge,
-			title: "Predict"
-		}),
+		})
+	}), /* @__PURE__ */ jsx(Field, {
+		label: "volume",
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "lab-field-row",
+			children: [/* @__PURE__ */ jsxs(Chip, {
+				selected: false,
+				onClick: compress,
+				children: [/* @__PURE__ */ jsx(Minimize2, { "aria-hidden": true }), " Compress"]
+			}), /* @__PURE__ */ jsxs(Chip, {
+				selected: false,
+				onClick: expand,
+				children: [/* @__PURE__ */ jsx(Maximize2, { "aria-hidden": true }), " Expand"]
+			})]
+		})
+	})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Field, {
+		label: "temperature",
+		children: /* @__PURE__ */ jsx(Segmented, {
+			ariaLabel: "temperature",
+			value: T > T0 ? "hot" : T < T0 ? "cold" : "room",
+			onChange: (band) => setT(band === "hot" ? 420 : band === "cold" ? 220 : T0),
+			options: [
+				{
+					value: "hot",
+					label: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Flame, { "aria-hidden": true }), " Heat"] })
+				},
+				{
+					value: "room",
+					label: "room"
+				},
+				{
+					value: "cold",
+					label: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Snowflake, { "aria-hidden": true }), " Cool"] })
+				}
+			]
+		})
+	}), /* @__PURE__ */ jsx(IconButton, {
+		label: "Reset equilibrium",
+		onClick: () => setResetN((n) => n + 1),
+		children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+	})] })] });
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		focusLayout: "immersive",
+		activity: runtimeActivity,
+		activityId: "le-chatelier",
+		eyebrow: "Chemical equilibrium",
+		title,
+		description: prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", { children: status }),
+			/* @__PURE__ */ jsxs("span", { children: ["Q ", isFinite(st.Q) ? st.Q.toFixed(2) : "∞"] }),
+			/* @__PURE__ */ jsxs("span", { children: ["K ", st.K.toFixed(2)] })
+		] }),
+		evidence: aside,
+		controls,
+		observation: /* @__PURE__ */ jsx(Fragment$1, { children: "The system shifts until its reaction quotient moves back toward the equilibrium constant." }),
+		transcript: /* @__PURE__ */ jsxs("p", { children: [
+			reactantName,
+			" concentration ",
+			a.toFixed(2),
+			"; ",
+			productName,
+			" concentration ",
+			b.toFixed(2),
+			". ",
+			status,
+			" at",
+			" ",
+			T,
+			" kelvin."
+		] }),
 		children: figure
 	});
 }