@classytic/labs 0.3.0 → 0.4.0

package/dist/domains/chem/arene-evidence/scene.mjs

@@ -0,0 +1,208 @@
+import { Figure, HUE, STROKE, alpha, tint } from "../../../kit/figure/figure.mjs";
+import { FigText, wrapText } from "../../../kit/figure/text.mjs";
+import { Molecule } from "../../../kit/chemistry/molecule.mjs";
+import { SPECIES } from "../../../kit/chemistry/species.mjs";
+import { ARENE_PIECES, pieceById } from "./model.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/domains/chem/arene-evidence/scene.tsx
+/**
+* Two candidate structures, one column each, and the evidence written under whichever it belongs to.
+*
+* The layout carries the argument. A single structure with annotations around it would make the
+* delocalised model the subject and Kekulé's a footnote, and the learner's job here is to CHOOSE
+* between them: they have to be the same size, in the same place, drawn by the same engine, with
+* their predictions in the same typeface. The only difference between the two columns is what the
+* instrument said.
+*
+* `benzene-kekule` and `benzene` differ by one field in `species.ts` (`ring: {}` with alternating
+* `next: 2` against `ring: { aromatic: true }`), which is exactly the claim under test, so neither
+* drawing can drift from the other.
+*
+* The scene carries no prose of its own beyond the column headers and the evidence rows. The shell
+* owns the question, the hint and the rule; this used to be the commonest defect in the chemistry
+* labs, where a figure restated the sentence already printed above it.
+*/
+const W = 560;
+const COL = W / 2;
+/** Height of one wrapped line of evidence text. */
+const LINE = 17;
+function AreneEvidenceScene({ state }) {
+	const gathered = ARENE_PIECES.filter((piece) => state.run.includes(piece.id));
+	const bars = gathered.find((piece) => piece.bars)?.bars;
+	const headY = 26;
+	const structY = 44;
+	const evidenceTop = 150;
+	const rows = gathered.map((piece) => ({
+		piece,
+		predicts: wrapText(piece.predicts, 236),
+		observed: wrapText(piece.observed, 236)
+	}));
+	const rowHeights = rows.map((row) => 18 + Math.max(row.predicts.length, row.observed.length) * LINE + 10);
+	const rowTops = [];
+	let cursor = evidenceTop;
+	for (const height of rowHeights) {
+		rowTops.push(cursor);
+		cursor += height;
+	}
+	const barsTop = cursor + 6;
+	const H = bars ? barsTop + (bars ? 74 : 0) + 10 : rows.length ? cursor + 8 : 160;
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, H],
+		domain: "chem",
+		label: state.run.length ? `Two candidate structures for benzene. ${gathered.map((piece) => `${piece.method}: Kekulé predicts ${piece.predicts}, measured ${piece.observed}`).join(". ")}.` : "Two candidate structures for benzene, Kekulé’s alternating double bonds and a delocalised ring, with no evidence gathered yet.",
+		children: [
+			state.resolved ? /* @__PURE__ */ jsx("rect", {
+				x: 284,
+				y: 8,
+				width: 268,
+				height: barsTop - 20,
+				rx: 10,
+				fill: tint(HUE.good, 10)
+			}) : null,
+			/* @__PURE__ */ jsx(FigText, {
+				x: COL / 2,
+				y: headY,
+				size: "eyebrow",
+				anchor: "middle",
+				tone: "soft",
+				children: "KEKULÉ PREDICTS"
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: 420,
+				y: headY,
+				size: "eyebrow",
+				anchor: "middle",
+				tone: state.resolved ? "good" : "soft",
+				children: "MEASURED"
+			}),
+			/* @__PURE__ */ jsx(Molecule, {
+				spec: SPECIES["benzene-kekule"],
+				x: COL / 2,
+				y: structY
+			}),
+			/* @__PURE__ */ jsx(Molecule, {
+				spec: SPECIES.benzene,
+				x: 420,
+				y: structY
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: `M${COL} 14V${H - 14}`,
+				stroke: alpha(HUE.ink, 22),
+				strokeWidth: STROKE.hair,
+				strokeDasharray: "3 5",
+				fill: "none"
+			}),
+			rows.map((row, i) => {
+				const top = rowTops[i];
+				return /* @__PURE__ */ jsxs("g", { children: [
+					/* @__PURE__ */ jsx("path", {
+						d: `M14 ${top - 8}H546`,
+						stroke: alpha(HUE.ink, 14),
+						strokeWidth: STROKE.hair,
+						fill: "none"
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: W / 2,
+						y: top + 6,
+						size: "eyebrow",
+						anchor: "middle",
+						tone: "soft",
+						caps: false,
+						children: row.piece.method
+					}),
+					row.predicts.map((line, j) => /* @__PURE__ */ jsx(FigText, {
+						x: COL / 2,
+						y: top + 26 + j * LINE,
+						size: "note",
+						anchor: "middle",
+						tone: "ink",
+						children: line
+					}, line)),
+					row.observed.map((line, j) => /* @__PURE__ */ jsx(FigText, {
+						x: 420,
+						y: top + 26 + j * LINE,
+						size: "note",
+						anchor: "middle",
+						tone: "good",
+						children: line
+					}, line))
+				] }, row.piece.id);
+			}),
+			bars ? /* @__PURE__ */ jsx("g", { children: (() => {
+				const scale = 370 / bars.predicted;
+				const x0 = 96;
+				const predictedW = bars.predicted * scale;
+				const observedW = bars.observed * scale;
+				const barY = barsTop + 14;
+				return /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(FigText, {
+						x: 86,
+						y: barY + 7,
+						size: "note",
+						anchor: "end",
+						tone: "soft",
+						children: "Kekulé"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: x0,
+						y: barY,
+						width: predictedW,
+						height: 13,
+						rx: 2,
+						fill: alpha(HUE.ink, 30)
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: x0 + predictedW + 8,
+						y: barY + 7,
+						size: "note",
+						baseline: "middle",
+						tone: "ink",
+						children: `−${bars.predicted}`
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: 86,
+						y: barY + 33,
+						size: "note",
+						anchor: "end",
+						tone: "soft",
+						children: "measured"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: x0,
+						y: barY + 26,
+						width: observedW,
+						height: 13,
+						rx: 2,
+						fill: HUE.good
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: x0 + observedW + 8,
+						y: barY + 33,
+						size: "note",
+						baseline: "middle",
+						tone: "good",
+						children: `−${bars.observed} ${bars.unit}`
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: `M${x0 + observedW} ${barY + 47}V${barY + 54}H${x0 + predictedW}V${barY + 47}`,
+						fill: "none",
+						stroke: alpha(HUE.good, 60),
+						strokeWidth: STROKE.hair
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: (x0 + observedW + x0 + predictedW) / 2,
+						y: barY + 68,
+						size: "note",
+						anchor: "middle",
+						tone: "good",
+						children: bars.gap
+					})
+				] });
+			})() }) : null
+		]
+	});
+}
+
+//#endregion
+export { AreneEvidenceScene, pieceById };

package/dist/domains/chem/battery/manifest.mjs

@@ -9,6 +9,7 @@ var manifest_default = defineLab({
 	title: "Battery (galvanic cell)",
 	description: "Trace electrons through the load and ions through the salt bridge; connect half-reactions, EMF, and ideal load current.",
 	schema: z.object({
+		prompt: z.string().optional(),
 		emf: z.number().optional(),
 		title: z.string().optional()
 	}),

package/dist/domains/chem/bohr-atom/manifest.mjs

@@ -9,6 +9,7 @@ var manifest_default = defineLab({
 	title: "Bohr atom",
 	description: "Animated shell model, drag Z to walk the first 20 elements; shells fill 2, 8, 8.",
 	schema: z.object({
+		prompt: z.string().optional(),
 		protons: z.number().optional(),
 		title: z.string().optional()
 	}),

package/dist/domains/chem/catalytic-cycle/activity.mjs

@@ -0,0 +1,36 @@
+import { defineAuthoredActivity } from "../../../kit/activity-authoring.mjs";
+
+//#region src/domains/chem/catalytic-cycle/activity.ts
+const activity = defineAuthoredActivity({
+	pattern: "investigation",
+	title: "Catalytic cycle",
+	objectives: [
+		"Identify the species that is regenerated, which is what makes it a catalyst.",
+		"Explain why a trace of catalyst can convert a large amount of reactant.",
+		"Read the overall equation off a cycle and see that the catalyst is absent from it."
+	],
+	success: [{
+		id: "closed",
+		source: "metric",
+		key: "closed",
+		pendingLabel: "Name the species that comes back."
+	}],
+	steps: [{
+		id: "close",
+		phase: "predict",
+		title: "Close the loop",
+		lead: "The cycle is drawn open. Say what happens next and it will close.",
+		controls: true,
+		reveal: ["model"],
+		success: "closed"
+	}, {
+		id: "read",
+		phase: "explain",
+		title: "Read the overall reaction",
+		lead: "The catalyst is at every step of the ring and in none of the net equation.",
+		reveal: ["model", "evidence"]
+	}]
+});
+
+//#endregion
+export { activity };

package/dist/domains/chem/catalytic-cycle/manifest.mjs

@@ -0,0 +1,44 @@
+import { defineLab } from "../../../lab-def/define-lab.mjs";
+import { z } from "zod";
+
+//#region src/domains/chem/catalytic-cycle/manifest.ts
+var manifest_default = defineLab({
+	id: "catalytic-cycle",
+	tag: "CatalyticCycle",
+	domain: "chem",
+	group: "Chemistry",
+	title: "Catalytic Cycle",
+	description: "Close a catalytic cycle and read the overall reaction the catalyst is absent from.",
+	schema: z.object({
+		title: z.string().optional(),
+		prompt: z.string().optional(),
+		/** Which cycle. One for now: see `model.ts` for why the converter is not one of these. */
+		case: z.enum(["nox-acid-rain"]).optional()
+	}),
+	taxonomy: {
+		grades: ["11", "12"],
+		outcomes: [
+			"chemistry",
+			"catalysis",
+			"nitrogen-oxides",
+			"acid-rain"
+		],
+		durationMinutes: 5,
+		interaction: "guided",
+		authorability: "simple"
+	},
+	experience: {
+		objectives: ["Identify the regenerated species in a catalytic cycle.", "Explain why a catalyst does not appear in the overall equation."],
+		phases: ["predict", "explain"],
+		responses: ["choice"],
+		accessibility: {
+			keyboard: true,
+			textAlternative: true,
+			reducedMotion: true
+		}
+	},
+	loadRuntime: () => import("./runtime.mjs")
+});
+
+//#endregion
+export { manifest_default as default };

package/dist/domains/chem/catalytic-cycle/model.mjs

@@ -0,0 +1,61 @@
+//#region src/domains/chem/catalytic-cycle/model.ts
+const CYCLE_CASES = [{
+	id: "nox-acid-rain",
+	title: "The ferryman in the air",
+	spec: {
+		start: "NO₂",
+		steps: [{
+			to: "NO",
+			consumes: "SO₂",
+			produces: "SO₃",
+			note: "NO₂ hands an oxygen atom to sulfur dioxide, so SO₂ becomes SO₃ and NO₂ becomes NO."
+		}, {
+			to: "NO₂",
+			consumes: "½O₂",
+			produces: "",
+			note: "Oxygen from the air re-oxidises NO back to NO₂, so the carrier is ready to go again."
+		}],
+		overall: "2SO₂ + O₂ → 2SO₃"
+	},
+	question: {
+		prompt: "NO₂ turns into NO at the first step. What happens to it after that?",
+		choices: [
+			{
+				value: "back",
+				label: "oxygen in the air turns it back into NO₂"
+			},
+			{
+				value: "rain",
+				label: "it dissolves in rainwater and is gone"
+			},
+			{
+				value: "used",
+				label: "it is used up, so the reaction slowly stops"
+			}
+		],
+		answer: "back",
+		wrong: {
+			rain: "NO₂ does dissolve to give nitric acid, and that is a real part of acid rain. But dissolving is a one-way trip, and a catalyst has to come back, so that cannot be the step being asked about.",
+			used: "Then a trace of NO₂ could only ever oxidise a trace of SO₂. A small amount goes on working on a large amount, which only happens if it returns."
+		}
+	},
+	rule: "NO₂ is regenerated at the end, so it appears at every step of the cycle and nowhere in the overall equation. That is what makes it a catalyst rather than a reactant, and it is why a trace of NOx can turn a great deal of SO₂ into acid rain.",
+	use: "It is the reason NOx and sulfur limits are set together: cutting one reduces the damage the other can do."
+}];
+const cycleCase = (id) => CYCLE_CASES.find((item) => item.id === id);
+const createCycleState = (caseId) => ({
+	caseId,
+	closed: false
+});
+function transitionCycle(state, event) {
+	if (event.type === "RESET") return createCycleState(state.caseId);
+	const item = cycleCase(state.caseId);
+	if (!item || event.choice !== item.question.answer) return state;
+	return {
+		...state,
+		closed: true
+	};
+}
+
+//#endregion
+export { CYCLE_CASES, createCycleState, cycleCase, transitionCycle };

package/dist/domains/chem/catalytic-cycle/runtime.mjs

@@ -0,0 +1,61 @@
+'use client';
+
+import { AssessedChoiceGroup } from "../../../kit/controls.mjs";
+import { LiveRegion, Readout } from "../../../kit/frame.mjs";
+import { AuthoredActivityRuntime } from "../../../kit/authored-activity-runtime.mjs";
+import { activity } from "./activity.mjs";
+import { CYCLE_CASES, createCycleState, cycleCase, transitionCycle } from "./model.mjs";
+import { CatalyticCycleScene } from "./scene.mjs";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/domains/chem/catalytic-cycle/runtime.tsx
+function CatalyticCycle({ title, prompt, case: caseId = "nox-acid-rain" }) {
+	const item = cycleCase(caseId) ?? CYCLE_CASES[0];
+	const [state, setState] = useState(() => createCycleState(item.id));
+	const [hint, setHint] = useState();
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		activity,
+		activityId: `catalytic-cycle-${item.id}`,
+		eyebrow: "Catalysis",
+		title: title ?? item.title,
+		description: prompt ?? item.question.prompt,
+		presentation: "investigation",
+		focusLayout: "immersive",
+		transcriptMode: "sr-only",
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: state.closed ? "cycle closed" : "cycle open" }), /* @__PURE__ */ jsx("span", { children: state.closed ? item.spec.overall : "decision required" })] }),
+		controls: ({ sequence, complete }) => {
+			if (sequence.current.id !== "close") return null;
+			return /* @__PURE__ */ jsx(AssessedChoiceGroup, {
+				ariaLabel: item.question.prompt,
+				options: item.question.choices.map((choice) => ({
+					value: choice.value,
+					label: choice.label
+				})),
+				onChange: (choice) => {
+					const after = transitionCycle(state, {
+						type: "COMMIT",
+						choice
+					});
+					if (after === state) {
+						setHint(item.question.wrong[choice] ?? "Not that. A catalyst has to come back.");
+						return;
+					}
+					setHint(void 0);
+					setState(after);
+					complete("closed", choice);
+				}
+			});
+		},
+		evidence: /* @__PURE__ */ jsx(Readout, {
+			value: hint ?? (state.closed ? item.spec.overall : item.question.prompt),
+			sub: hint ? "not that" : state.closed ? "overall, with no catalyst in it" : "the question"
+		}),
+		observation: state.closed ? `${item.rule} ${item.use}` : void 0,
+		transcript: /* @__PURE__ */ jsx(LiveRegion, { children: state.closed ? `The cycle is closed. ${item.rule}` : `A catalytic cycle starting from ${item.spec.start}, not yet closed.` }),
+		children: /* @__PURE__ */ jsx(CatalyticCycleScene, { state })
+	});
+}
+
+//#endregion
+export { CatalyticCycle as default };

package/dist/domains/chem/catalytic-cycle/scene.mjs

@@ -0,0 +1,27 @@
+import { cycleCase } from "./model.mjs";
+import { CatalyticCycle } from "../../../kit/chemistry/cycle.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/domains/chem/catalytic-cycle/scene.tsx
+/**
+* One figure, two states: the loop open, then closed.
+*
+* The drawing IS the answer, so it is withheld. Before the learner commits, the arrows are drawn
+* thin and in ink and the middle of the ring is empty; once they have named the species that
+* returns, the arrows light, the starting state lights with them, and the overall equation appears
+* inside the ring with the catalyst absent from it. That last detail is the payoff: the catalyst is
+* at every step and in none of the net equation.
+*/
+function CatalyticCycleScene({ state }) {
+	const item = cycleCase(state.caseId);
+	if (!item) return null;
+	const steps = item.spec.steps.map((step) => step.note).join(" ");
+	return /* @__PURE__ */ jsx(CatalyticCycle, {
+		spec: item.spec,
+		closed: state.closed,
+		label: state.closed ? `A closed catalytic cycle. ${steps} The overall reaction is ${item.spec.overall}, in which the catalyst does not appear.` : `A catalytic cycle starting from ${item.spec.start}. ${steps}`
+	});
+}
+
+//#endregion
+export { CatalyticCycleScene };

package/dist/domains/chem/change-detective/activity.mjs

@@ -0,0 +1,81 @@
+import { defineAuthoredActivity } from "../../../kit/activity-authoring.mjs";
+
+//#region src/domains/chem/change-detective/activity.ts
+const activity = defineAuthoredActivity({
+	pattern: "investigation",
+	title: "Change Detective",
+	objectives: ["Classify physical and chemical changes from particle evidence.", "Use new-substance formation as the deciding test."],
+	success: [
+		{
+			id: "ice-solved",
+			source: "metric",
+			key: "ice",
+			pendingLabel: "Solve the ice case."
+		},
+		{
+			id: "copper-solved",
+			source: "metric",
+			key: "copper",
+			pendingLabel: "Solve the copper case."
+		},
+		{
+			id: "magnesium-solved",
+			source: "metric",
+			key: "magnesium",
+			pendingLabel: "Solve the magnesium case."
+		},
+		{
+			id: "carbonate-solved",
+			source: "metric",
+			key: "carbonate",
+			pendingLabel: "Solve the fizzing case."
+		}
+	],
+	steps: [
+		{
+			id: "ice",
+			phase: "predict",
+			title: "Case 1 · The melted ice",
+			lead: "The solid becomes liquid. Did a new substance form?",
+			controls: true,
+			success: "ice-solved"
+		},
+		{
+			id: "copper",
+			phase: "act",
+			title: "Case 2 · The cut wire",
+			lead: "The wire changes shape. Did its substance change?",
+			controls: true,
+			reveal: ["model"],
+			success: "copper-solved"
+		},
+		{
+			id: "magnesium",
+			phase: "explain",
+			title: "Case 3 · The bright ribbon",
+			lead: "Magnesium burns and leaves a white solid. What does that evidence show?",
+			controls: true,
+			reveal: ["model"],
+			success: "magnesium-solved"
+		},
+		{
+			id: "carbonate",
+			phase: "transfer",
+			title: "Case 4 · The fizzing flask",
+			lead: "A gas appears when two substances mix. Classify the change.",
+			controls: true,
+			reveal: ["model"],
+			success: "carbonate-solved"
+		},
+		{
+			id: "complete",
+			phase: "transfer",
+			title: "Case file complete",
+			lead: "You found the reliable test: ask whether new substances formed.",
+			reveal: ["model", "evidence"]
+		}
+	]
+});
+
+//#endregion
+export { activity };

package/dist/domains/chem/change-detective/manifest.mjs

@@ -0,0 +1,46 @@
+import { defineLab } from "../../../lab-def/define-lab.mjs";
+import { z } from "zod";
+
+//#region src/domains/chem/change-detective/manifest.ts
+var manifest_default = defineLab({
+	id: "change-detective",
+	tag: "ChangeDetective",
+	domain: "chem",
+	group: "Chemistry",
+	title: "Change Detective",
+	description: "Solve short visual cases and classify changes using new-substance evidence.",
+	schema: z.object({
+		title: z.string().optional(),
+		prompt: z.string().optional()
+	}),
+	taxonomy: {
+		grades: ["8", "9"],
+		outcomes: [
+			"chemistry",
+			"physical-change",
+			"chemical-change"
+		],
+		durationMinutes: 6,
+		interaction: "guided",
+		authorability: "moderate"
+	},
+	experience: {
+		objectives: ["Classify physical and chemical changes.", "Use new-substance formation as evidence."],
+		phases: [
+			"predict",
+			"act",
+			"explain",
+			"transfer"
+		],
+		responses: ["choice"],
+		accessibility: {
+			keyboard: true,
+			textAlternative: true,
+			reducedMotion: true
+		}
+	},
+	loadRuntime: () => import("./runtime.mjs")
+});
+
+//#endregion
+export { manifest_default as default };

package/dist/domains/chem/change-detective/model.mjs

@@ -0,0 +1,65 @@
+//#region src/domains/chem/change-detective/model.ts
+const CHANGE_CASES = [
+	{
+		id: "melting-ice",
+		title: "The melted ice",
+		action: "Warm the ice",
+		kind: "physical",
+		before: "solid water",
+		after: "liquid water",
+		clue: "The particles are still H₂O. Only their arrangement changes.",
+		retryHint: "Changing state does not create a different substance. Look for the same H₂O."
+	},
+	{
+		id: "cutting-copper",
+		title: "The copper wire",
+		action: "Cut the wire",
+		kind: "physical",
+		before: "one copper wire",
+		after: "two copper pieces",
+		clue: "Both pieces are still copper. Only size and shape change.",
+		retryHint: "Shape is not identity. Ask what each cut piece is made of."
+	},
+	{
+		id: "burning-magnesium",
+		title: "The bright ribbon",
+		action: "Burn magnesium",
+		kind: "chemical",
+		before: "magnesium + oxygen",
+		after: "magnesium oxide",
+		clue: "The atoms join in a new arrangement. A new substance forms.",
+		retryHint: "Compare the silver metal before with the white solid after."
+	},
+	{
+		id: "acid-carbonate",
+		title: "The fizzing flask",
+		action: "Mix acid + carbonate",
+		kind: "chemical",
+		before: "acid + carbonate",
+		after: "salt + water + CO₂",
+		clue: "Gas and other new substances form.",
+		retryHint: "The bubbles are a new gas made by the reaction, not trapped air."
+	}
+];
+const createChangeDetectiveState = () => ({
+	round: 0,
+	revealed: false,
+	solved: 0
+});
+function answerChange(state, answer) {
+	const current = CHANGE_CASES[state.round];
+	if (!current || state.revealed) return state;
+	if (answer !== current.kind) return {
+		...state,
+		lastAnswer: answer
+	};
+	return {
+		...state,
+		revealed: true,
+		solved: state.solved + 1,
+		lastAnswer: answer
+	};
+}
+
+//#endregion
+export { CHANGE_CASES, answerChange, createChangeDetectiveState };