@classytic/labs 0.3.0 → 0.4.0

package/dist/domains/chem/specimen-row/scene.mjs

@@ -0,0 +1,230 @@
+import { Figure, HUE, STROKE, alpha } from "../../../kit/figure/figure.mjs";
+import { FigText, wrapText } from "../../../kit/figure/text.mjs";
+import { Glass } from "../../../kit/figure/container.mjs";
+import { OBSERVED, Precipitate } from "../../../kit/chemistry/observation.mjs";
+import { currentSpecimenSet, trendVisible } from "./model.mjs";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/domains/chem/specimen-row/scene.tsx
+/**
+* Specimens in a row, each drawn in its own state, over the number that trends.
+*
+* Layout follows the discipline the other chem scenes now share: one margin, one bench everything
+* rests on, bands measured down from it, hairlines instead of cards, and no floating apparatus.
+*
+* The three states are drawn differently ON PURPOSE. A gas fills its jar, a liquid has a level and
+* a meniscus with vapour above it, a solid sits as a bed on the floor. The lesson's whole first
+* sentence is "fluorine and chlorine are gases, bromine is a dense liquid, iodine is a shiny dark
+* solid", and a row of identically-filled jars would contradict it.
+*/
+const M = 40;
+const W = 620;
+const BENCH = 236;
+const JAR = {
+	w: 84,
+	h: 132
+};
+const BAND = {
+	formula: 262,
+	note: 284,
+	value: 314,
+	axis: 332,
+	height: 382
+};
+function Rule({ y }) {
+	return /* @__PURE__ */ jsx("path", {
+		d: `M${M} ${y}H580`,
+		stroke: alpha(HUE.soft, 30),
+		strokeWidth: STROKE.hair
+	});
+}
+/**
+* One jar, with the contents drawn according to the specimen's state.
+*
+* The first version filled a gas jar with a flat hard-edged RECTANGLE of colour, so the halogens
+* read as sheets of coloured paper rather than gas: a uniform block with a straight top edge is
+* the one thing a gas never looks like. Three changes fix it.
+*
+*   A GRADIENT, denser at the bottom. Gas settles, and the fade is what stops the fill reading as
+*   a card. Fluorine is also genuinely PALE, and at a uniform 34% it came out beige.
+*   A MENISCUS AND FUMES on the liquid. Bromine is the fuming one, and drawing the liquid with a
+*   flat opaque top and nothing above it lost the observation people remember.
+*   NO HARD TOP EDGE. The gas reaches the top of the jar, because it fills its container.
+*/
+function Jar({ cx, item }) {
+	const uid = useId().replace(/:/g, "");
+	const gasId = `${uid}-gas`;
+	const fumeId = `${uid}-fume`;
+	const top = BENCH - JAR.h + STROKE.edge - 4;
+	const colour = OBSERVED[item.colour];
+	const vapour = item.vapour ? OBSERVED[item.vapour] : colour;
+	const liquidTop = top + JAR.h * .62;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("linearGradient", {
+		id: gasId,
+		x1: "0",
+		y1: "0",
+		x2: "0",
+		y2: "1",
+		children: [/* @__PURE__ */ jsx("stop", {
+			offset: "0%",
+			stopColor: vapour,
+			stopOpacity: "0.08"
+		}), /* @__PURE__ */ jsx("stop", {
+			offset: "100%",
+			stopColor: vapour,
+			stopOpacity: "0.4"
+		})]
+	}), /* @__PURE__ */ jsxs("linearGradient", {
+		id: fumeId,
+		x1: "0",
+		y1: "0",
+		x2: "0",
+		y2: "1",
+		children: [/* @__PURE__ */ jsx("stop", {
+			offset: "0%",
+			stopColor: colour,
+			stopOpacity: "0.04"
+		}), /* @__PURE__ */ jsx("stop", {
+			offset: "100%",
+			stopColor: colour,
+			stopOpacity: "0.34"
+		})]
+	})] }), /* @__PURE__ */ jsxs(Glass, {
+		x: cx - JAR.w / 2,
+		y: top,
+		w: JAR.w,
+		h: JAR.h,
+		shape: "cylinder",
+		fill: item.state === "liquid" ? .34 : 0,
+		liquid: colour,
+		liquidOpacity: .82,
+		children: [
+			item.state === "gas" ? /* @__PURE__ */ jsx("rect", {
+				x: cx - JAR.w / 2,
+				y: top,
+				width: JAR.w,
+				height: JAR.h,
+				fill: `url(#${gasId})`
+			}) : null,
+			item.state === "liquid" ? /* @__PURE__ */ jsx("rect", {
+				x: cx - JAR.w / 2,
+				y: top,
+				width: JAR.w,
+				height: liquidTop - top,
+				fill: `url(#${fumeId})`
+			}) : null,
+			item.state === "solid" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [item.vapour ? /* @__PURE__ */ jsx("rect", {
+				x: cx - JAR.w / 2,
+				y: top,
+				width: JAR.w,
+				height: JAR.h * .78,
+				fill: `url(#${gasId})`
+			}) : null, /* @__PURE__ */ jsx(Precipitate, {
+				cx,
+				bottom: 226,
+				colour,
+				w: JAR.w - 16
+			})] }) : null
+		]
+	})] });
+}
+function SpecimenRowScene({ state }) {
+	const set = currentSpecimenSet(state);
+	const slot = 540 / set.specimens.length;
+	const done = trendVisible(state);
+	const label = `${set.title}. ${set.specimens.map((item, i) => `${item.name} is a ${item.note}${i < state.revealed ? `, ${set.quantity} ${item.value} ${set.unit}` : ""}`).join(". ")}. ${done ? set.rule : ""}`;
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, BAND.height],
+		domain: "chem",
+		label,
+		children: [
+			/* @__PURE__ */ jsx(FigText, {
+				x: M,
+				y: 30,
+				size: "eyebrow",
+				tone: "soft",
+				children: state.committed ? `${set.quantity.toUpperCase()} ACROSS THE ROW` : "PREDICT THE DIRECTION FIRST"
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: M,
+				y: 62,
+				size: "title",
+				children: set.title
+			}),
+			/* @__PURE__ */ jsx(Rule, { y: 84 }),
+			set.specimens.map((item, index) => {
+				const cx = M + slot * (index + .5);
+				const shown = index < state.revealed;
+				return /* @__PURE__ */ jsxs("g", { children: [
+					/* @__PURE__ */ jsx(Jar, {
+						cx,
+						item
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: cx,
+						y: BAND.formula,
+						size: "measure",
+						anchor: "middle",
+						children: item.formula
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: cx,
+						y: BAND.note,
+						size: "note",
+						anchor: "middle",
+						tone: "soft",
+						children: item.state
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: cx,
+						y: BAND.value,
+						size: "measure",
+						anchor: "middle",
+						tone: shown ? "ink" : "soft",
+						children: shown ? `${item.value} ${set.unit}` : `— ${set.unit}`
+					})
+				] }, item.id);
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: `M${M} ${BENCH}H580`,
+				stroke: HUE.wood,
+				strokeWidth: STROKE.line,
+				strokeLinecap: "round"
+			}),
+			/* @__PURE__ */ jsx(Rule, { y: BAND.value + 14 }),
+			done ? /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx("path", {
+					d: `M${M} ${BAND.axis}H568`,
+					stroke: HUE[2],
+					strokeWidth: STROKE.line,
+					strokeLinecap: "round"
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: `M560 ${BAND.axis - 6}L572 ${BAND.axis}L560 ${BAND.axis + 6}`,
+					fill: "none",
+					stroke: HUE[2],
+					strokeWidth: STROKE.line,
+					strokeLinejoin: "round",
+					strokeLinecap: "round"
+				}),
+				wrapText(set.cause, 540).map((line, i) => /* @__PURE__ */ jsx(FigText, {
+					x: M,
+					y: BAND.axis + 24 + i * 19,
+					size: "note",
+					tone: "soft",
+					children: line
+				}, line))
+			] }) : /* @__PURE__ */ jsx(FigText, {
+				x: M,
+				y: BAND.axis + 6,
+				size: "note",
+				tone: "soft",
+				children: state.committed ? "Reveal each specimen and watch which way the number moves." : "Commit to a direction before any number appears."
+			})
+		]
+	});
+}
+
+//#endregion
+export { SpecimenRowScene };

package/dist/domains/chem/spectrum-reader/activity.mjs

@@ -0,0 +1,36 @@
+import { defineAuthoredActivity } from "../../../kit/activity-authoring.mjs";
+
+//#region src/domains/chem/spectrum-reader/activity.ts
+const activity = defineAuthoredActivity({
+	pattern: "investigation",
+	title: "Read the spectrum",
+	objectives: [
+		"Read a value off a spectrum axis, including one that runs backwards.",
+		"Identify the molecular ion, and explain why it is not the tallest peak.",
+		"Say what the ABSENCE of an absorption proves, as well as its presence."
+	],
+	success: [{
+		id: "read",
+		source: "metric",
+		key: "read",
+		pendingLabel: "Say what the spectrum shows."
+	}],
+	steps: [{
+		id: "interpret",
+		phase: "observe",
+		title: "What does it show?",
+		lead: "Every feature is labelled with its position. Work out what the positions mean.",
+		controls: true,
+		reveal: ["model"],
+		success: "read"
+	}, {
+		id: "assign",
+		phase: "explain",
+		title: "Assign every feature",
+		lead: "The peaks are assigned now. Read them back as evidence for one compound.",
+		reveal: ["model", "evidence"]
+	}]
+});
+
+//#endregion
+export { activity };

package/dist/domains/chem/spectrum-reader/manifest.mjs

@@ -0,0 +1,47 @@
+import { defineLab } from "../../../lab-def/define-lab.mjs";
+import { z } from "zod";
+
+//#region src/domains/chem/spectrum-reader/manifest.ts
+var manifest_default = defineLab({
+	id: "spectrum-reader",
+	tag: "SpectrumReader",
+	domain: "chem",
+	group: "Chemistry",
+	title: "Spectrum Reader",
+	description: "Identify an unknown from a mass spectrum or an infrared trace, including the isotope pattern that reveals a halogen.",
+	schema: z.object({
+		title: z.string().optional(),
+		prompt: z.string().optional(),
+		case: z.enum([
+			"ethanol-mass",
+			"chlorine-isotopes",
+			"carbonyl-infrared"
+		]).optional()
+	}),
+	taxonomy: {
+		grades: ["11", "12"],
+		outcomes: [
+			"chemistry",
+			"analytical-techniques",
+			"mass-spectrometry",
+			"infrared"
+		],
+		durationMinutes: 6,
+		interaction: "guided",
+		authorability: "simple"
+	},
+	experience: {
+		objectives: ["Identify the molecular ion peak and read a relative molecular mass from it.", "Assign an infrared absorption to a bond, and say what an absence proves."],
+		phases: ["observe", "explain"],
+		responses: ["choice"],
+		accessibility: {
+			keyboard: true,
+			textAlternative: true,
+			reducedMotion: true
+		}
+	},
+	loadRuntime: () => import("./runtime.mjs")
+});
+
+//#endregion
+export { manifest_default as default };

package/dist/domains/chem/spectrum-reader/model.mjs

@@ -0,0 +1,244 @@
+//#region src/domains/chem/spectrum-reader/model.ts
+const SPECTRUM_CASES = [
+	{
+		id: "ethanol-mass",
+		title: "Which peak is the whole molecule?",
+		kind: "mass",
+		compound: "ethanol",
+		axis: {
+			min: 0,
+			max: 60,
+			label: "mass / charge ratio (m/z)",
+			ticks: [
+				0,
+				15,
+				30,
+				45,
+				60
+			]
+		},
+		features: [
+			{
+				at: 15,
+				size: .42,
+				label: "15",
+				assign: "CH₃⁺"
+			},
+			{
+				at: 29,
+				size: .58,
+				label: "29",
+				assign: "C₂H₅⁺"
+			},
+			{
+				at: 31,
+				size: 1,
+				label: "31",
+				assign: "CH₂OH⁺"
+			},
+			{
+				at: 45,
+				size: .3,
+				label: "45",
+				assign: "loss of one H"
+			},
+			{
+				at: 46,
+				size: .24,
+				label: "46",
+				assign: "M⁺, the whole molecule"
+			}
+		],
+		caption: "Five peaks. Only one of them is the intact molecule.",
+		question: {
+			prompt: "Which peak gives the relative molecular mass of this compound?",
+			choices: [
+				{
+					value: "46",
+					label: "the peak at 46, the one furthest right"
+				},
+				{
+					value: "31",
+					label: "the peak at 31, the tallest one"
+				},
+				{
+					value: "sum",
+					label: "the sum of all the peaks"
+				}
+			],
+			answer: "46",
+			wrong: {
+				"31": "The tallest peak is the most stable fragment, not the biggest one. Here it is CH₂OH⁺ at 31, a piece of the molecule. Height tells you stability; position tells you mass.",
+				sum: "Each peak is one fragment of one molecule, detected separately. Adding them counts the same atoms many times over."
+			}
+		},
+		rule: "The molecular ion peak is the one at the highest m/z, and it gives the relative molecular mass directly. The peaks below it are fragments, and the difference between two peaks tells you what was lost.",
+		use: "It is how an unknown organic compound is identified in a forensic or pharmaceutical laboratory, before any chemical test is done."
+	},
+	{
+		id: "chlorine-isotopes",
+		title: "Two peaks, one compound",
+		kind: "mass",
+		compound: "chloroethane",
+		axis: {
+			min: 20,
+			max: 70,
+			label: "mass / charge ratio (m/z)",
+			ticks: [
+				20,
+				30,
+				40,
+				50,
+				60,
+				70
+			]
+		},
+		features: [
+			{
+				at: 29,
+				size: 1,
+				label: "29",
+				assign: "C₂H₅⁺, chlorine lost"
+			},
+			{
+				at: 64,
+				size: .75,
+				label: "64",
+				assign: "M⁺ with ³⁵Cl"
+			},
+			{
+				at: 66,
+				size: .25,
+				label: "66",
+				assign: "³⁷Cl"
+			}
+		],
+		spans: [{
+			from: 64,
+			to: 66,
+			note: "two apart, about 3 : 1",
+			means: "a pair two apart in a 3 : 1 ratio is one chlorine atom"
+		}],
+		caption: "Three peaks, and only one compound in the sample.",
+		question: {
+			prompt: "Why are there two molecular ion peaks, two apart, in a three-to-one ratio?",
+			choices: [
+				{
+					value: "isotopes",
+					label: "chlorine has two isotopes, ³⁵Cl and ³⁷Cl, in about a 3:1 natural abundance"
+				},
+				{
+					value: "two",
+					label: "the sample contains two different compounds"
+				},
+				{
+					value: "fragment",
+					label: "the peak at 66 is a fragment that has gained two hydrogens"
+				}
+			],
+			answer: "isotopes",
+			wrong: {
+				two: "Two compounds would be very unlikely to differ by exactly two mass units in exactly a 3:1 ratio. That ratio is the fingerprint of an element, not of a mixture.",
+				fragment: "A fragment is always LIGHTER than the molecular ion, because fragmentation breaks pieces off. Nothing is gained."
+			}
+		},
+		rule: "A pair of peaks two apart in a 3:1 ratio means one chlorine atom. Bromine gives a pair two apart in a 1:1 ratio, because its two isotopes are almost equally abundant. The pattern identifies the halogen without any chemical test.",
+		use: "It is how a mass spectrum announces a halogen at a glance, and it is why the M+2 peak is worth looking for before anything else."
+	},
+	{
+		id: "carbonyl-infrared",
+		title: "The band that proves a carbonyl",
+		kind: "infrared",
+		compound: "propanone",
+		axis: {
+			min: 400,
+			max: 4e3,
+			label: "wavenumber / cm⁻¹",
+			reversed: true,
+			ticks: [
+				4e3,
+				3e3,
+				2e3,
+				1500,
+				1e3,
+				400
+			]
+		},
+		features: [
+			{
+				at: 2950,
+				size: .45,
+				label: "2950",
+				assign: "C–H",
+				width: 220
+			},
+			{
+				at: 1715,
+				size: .95,
+				label: "1715",
+				assign: "C=O",
+				width: 130
+			},
+			{
+				at: 1200,
+				size: .4,
+				label: "1200",
+				assign: "C–C",
+				width: 200
+			}
+		],
+		spans: [{
+			from: 3200,
+			to: 3600,
+			note: "flat here",
+			means: "no absorption between 3200 and 3600, so there is no O-H group"
+		}],
+		caption: "One very strong absorption, and the axis runs from 4000 down to 400.",
+		question: {
+			prompt: "This compound absorbs strongly at 1715 cm⁻¹ and shows nothing between 3200 and 3600. What is it?",
+			choices: [
+				{
+					value: "ketone",
+					label: "a ketone or an aldehyde: a C=O with no O–H"
+				},
+				{
+					value: "alcohol",
+					label: "an alcohol, because 1715 is the O–H band"
+				},
+				{
+					value: "acid",
+					label: "a carboxylic acid, which has both C=O and O–H"
+				}
+			],
+			answer: "ketone",
+			wrong: {
+				alcohol: "The O–H band of an alcohol is broad and sits between 3200 and 3600, which is exactly where this spectrum is flat. 1715 is the C=O band.",
+				acid: "A carboxylic acid would show the C=O near 1700 AND a very broad O–H absorption. The flat region above 3000 rules the acid out."
+			}
+		},
+		rule: "A strong absorption near 1700 cm⁻¹ means C=O. What is ABSENT matters as much: no broad band between 3200 and 3600 means no O–H, which separates a ketone from an alcohol or an acid.",
+		use: "It is how a chemist checks in seconds whether an oxidation has worked, and it is the principle behind the roadside breathalyser, which measures the C–H absorption of ethanol."
+	}
+];
+const spectrumCase = (id) => SPECTRUM_CASES.find((item) => item.id === id);
+const createSpectrumState = (caseId) => ({
+	caseId,
+	revealed: false
+});
+function transitionSpectrum(state, event) {
+	if (event.type === "RESET") return createSpectrumState(state.caseId);
+	const item = spectrumCase(state.caseId);
+	if (!item || event.choice !== item.question.answer) return state;
+	return {
+		...state,
+		revealed: true
+	};
+}
+/** The peak at the highest m/z, which is the molecular ion. */
+function molecularIon(item) {
+	if (item.kind !== "mass") return void 0;
+	return item.features.reduce((best, feature) => best === void 0 || feature.at > best.at ? feature : best, void 0);
+}
+
+//#endregion
+export { SPECTRUM_CASES, createSpectrumState, molecularIon, spectrumCase, transitionSpectrum };

package/dist/domains/chem/spectrum-reader/runtime.mjs

@@ -0,0 +1,62 @@
+'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 { SPECTRUM_CASES, createSpectrumState, molecularIon, spectrumCase, transitionSpectrum } from "./model.mjs";
+import { SpectrumReaderScene } from "./scene.mjs";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/domains/chem/spectrum-reader/runtime.tsx
+function SpectrumReader({ title, prompt, case: caseId = "ethanol-mass" }) {
+	const item = spectrumCase(caseId) ?? SPECTRUM_CASES[0];
+	const [state, setState] = useState(() => createSpectrumState(item.id));
+	const [hint, setHint] = useState();
+	const ion = molecularIon(item);
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		activity,
+		activityId: `spectrum-reader-${item.id}`,
+		eyebrow: item.kind === "mass" ? "Mass spectrometry" : "Infrared spectroscopy",
+		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.revealed ? item.compound : "unknown compound" }), /* @__PURE__ */ jsx("span", { children: state.revealed && ion ? `Mr = ${ion.at}` : state.revealed ? "assigned" : `${item.features.length} features` })] }),
+		controls: ({ sequence, complete }) => {
+			if (sequence.current.id !== "interpret") 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 = transitionSpectrum(state, {
+						type: "COMMIT",
+						choice
+					});
+					if (after === state) {
+						setHint(item.question.wrong[choice] ?? "Not that. Read the positions again.");
+						return;
+					}
+					setHint(void 0);
+					setState(after);
+					complete("read", choice);
+				}
+			});
+		},
+		evidence: /* @__PURE__ */ jsx(Readout, {
+			value: hint ?? (state.revealed ? item.rule : item.caption),
+			sub: hint ? "not that" : state.revealed ? item.compound : "read the axis"
+		}),
+		observation: state.revealed ? `${item.rule} ${item.use}` : void 0,
+		transcript: /* @__PURE__ */ jsx(LiveRegion, { children: state.revealed ? `${item.compound}. ${item.rule}` : `An unknown compound with ${item.features.length} features on its ${item.kind === "mass" ? "mass spectrum" : "infrared spectrum"}.` }),
+		children: /* @__PURE__ */ jsx(SpectrumReaderScene, { state })
+	});
+}
+
+//#endregion
+export { SpectrumReader as default };

package/dist/domains/chem/spectrum-reader/scene.mjs

@@ -0,0 +1,37 @@
+import { SpectrumFigure } from "../../../kit/chemistry/spectrum.mjs";
+import { spectrumCase } from "./model.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/domains/chem/spectrum-reader/scene.tsx
+/**
+* The spectrum, with its assignments withheld.
+*
+* Every peak's POSITION is labelled from the start, because reading a value off an axis is the
+* skill being practised and hiding it would just make the axis unreadable. What is withheld is what
+* each peak MEANS, because that is the answer.
+*
+* The figure composes its own key. This scene used to build one here, listing every assignment, and
+* pass it down as the caption: the result was that a lone peak's assignment was printed twice on the
+* same picture, once over its own bar and once in the caption underneath. Only the figure knows
+* which assignments it had room to draw, so only the figure can say what is left to explain. The
+* accessible description below still names every assignment, because a screen reader gets no
+* picture and nothing there is duplicated.
+*/
+function SpectrumReaderScene({ state }) {
+	const item = spectrumCase(state.caseId);
+	if (!item) return null;
+	const spoken = [item.features.filter((feature) => feature.assign).map((feature) => `${feature.at} is ${feature.assign}`).join(", "), ...(item.spans ?? []).flatMap((span) => span.means ? [span.means] : [])].join(". ");
+	return /* @__PURE__ */ jsx(SpectrumFigure, {
+		kind: item.kind,
+		axis: item.axis,
+		features: item.features,
+		spans: item.spans,
+		revealed: state.revealed,
+		caption: item.caption,
+		compound: item.compound,
+		label: state.revealed ? `A ${item.kind === "mass" ? "mass spectrum" : "infrared spectrum"} of ${item.compound}, with every feature assigned: ${spoken}.` : `A ${item.kind === "mass" ? "mass spectrum" : "infrared spectrum"} of an unknown compound. ${item.caption}`
+	});
+}
+
+//#endregion
+export { SpectrumReaderScene };