@classytic/labs 0.4.0 → 0.5.0

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

@@ -0,0 +1,36 @@
+import { defineAuthoredActivity } from "../../../../kit/activity-authoring.mjs";
+
+//#region src/domains/chem/organic/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/organic/spectrum-reader/manifest.mjs

@@ -0,0 +1,47 @@
+import { defineLab } from "../../../../lab-def/define-lab.mjs";
+import { z } from "zod";
+
+//#region src/domains/chem/organic/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/organic/spectrum-reader/model.mjs

@@ -0,0 +1,244 @@
+//#region src/domains/chem/organic/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/organic/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/organic/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/organic/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/organic/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 };

package/dist/domains/chem/organic/stereochemistry/activity.mjs

@@ -0,0 +1,3 @@
+import { stereochemistryActivity } from "../../../../chem/stereochemistry/activity.mjs";
+
+export { stereochemistryActivity as activity };

package/dist/domains/chem/organic/stereochemistry/manifest.mjs

@@ -0,0 +1,65 @@
+import { defineLab } from "../../../../lab-def/define-lab.mjs";
+import { commonLabProps } from "../../../../blocks/lab-block.mjs";
+import { z } from "zod";
+
+//#region src/domains/chem/organic/stereochemistry/manifest.ts
+var manifest_default = defineLab({
+	id: "stereochemistry",
+	tag: "StereochemistryLab",
+	domain: "chem",
+	group: "Chemistry",
+	title: "Chirality and enantiomers",
+	description: "Rotate a tetrahedral stereogenic centre, compare its mirror image, and use CIP priorities to distinguish R and S configurations.",
+	schema: z.object({
+		molecule: z.enum([
+			"lactic-acid",
+			"alanine",
+			"bromochlorofluoromethane"
+		]).default("lactic-acid"),
+		enantiomer: z.enum(["R", "S"]).default("R"),
+		yaw: z.number().min(-180).max(180).default(24),
+		pitch: z.number().min(-70).max(70).default(-14),
+		compareMirror: z.boolean().default(true),
+		showPriorities: z.boolean().default(true),
+		...commonLabProps
+	}),
+	taxonomy: {
+		grades: ["11", "12"],
+		outcomes: [
+			"chemistry",
+			"organic-chemistry",
+			"stereochemistry",
+			"chirality",
+			"enantiomers"
+		],
+		durationMinutes: 16,
+		interaction: "explorer",
+		authorability: "moderate",
+		prerequisites: ["molecular-geometry"],
+		related: ["molecular-geometry"]
+	},
+	experience: {
+		objectives: [
+			"Recognize a tetrahedral stereogenic centre",
+			"Apply CIP priority order",
+			"Distinguish enantiomers from conformations"
+		],
+		phases: [
+			"predict",
+			"act",
+			"observe",
+			"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/organic/stereochemistry/runtime.mjs

@@ -0,0 +1,21 @@
+'use client';
+
+import { StereochemistryLab } from "../../../../chem/stereochemistry/preset.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/domains/chem/organic/stereochemistry/runtime.tsx
+function StereochemistryRuntime(props) {
+	return /* @__PURE__ */ jsx(StereochemistryLab, {
+		molecule: props.molecule ?? "lactic-acid",
+		enantiomer: props.enantiomer ?? "R",
+		yaw: typeof props.yaw === "number" ? props.yaw : void 0,
+		pitch: typeof props.pitch === "number" ? props.pitch : void 0,
+		compareMirror: props.compareMirror !== false,
+		showPriorities: props.showPriorities !== false,
+		title: typeof props.title === "string" ? props.title : void 0,
+		prompt: typeof props.prompt === "string" ? props.prompt : void 0
+	});
+}
+
+//#endregion
+export { StereochemistryRuntime as default };

package/dist/domains/chem/organic/synthesis-route/activity.mjs

@@ -0,0 +1,36 @@
+import { defineAuthoredActivity } from "../../../../kit/activity-authoring.mjs";
+
+//#region src/domains/chem/organic/synthesis-route/activity.ts
+const activity = defineAuthoredActivity({
+	pattern: "investigation",
+	title: "Plan the synthesis",
+	objectives: [
+		"Find a route between two functional groups on the reaction map.",
+		"Give the reagent and the conditions for every step, not just the products.",
+		"Recognise that only two reactions change the number of carbon atoms."
+	],
+	success: [{
+		id: "arrived",
+		source: "metric",
+		key: "arrived",
+		pendingLabel: "Reach the target group."
+	}],
+	steps: [{
+		id: "plan",
+		phase: "act",
+		lead: "Pick a reagent to take one step. Every road on the map is a real reaction.",
+		title: "Walk the map",
+		controls: true,
+		reveal: ["model"],
+		success: "arrived"
+	}, {
+		id: "read",
+		phase: "explain",
+		title: "Read the route back",
+		lead: "A route is only worth marks with the reagents and the conditions written out.",
+		reveal: ["model", "evidence"]
+	}]
+});
+
+//#endregion
+export { activity };

package/dist/domains/chem/organic/synthesis-route/manifest.mjs

@@ -0,0 +1,45 @@
+import { defineLab } from "../../../../lab-def/define-lab.mjs";
+import { ROUTE_CASES } from "./model.mjs";
+import { z } from "zod";
+
+//#region src/domains/chem/organic/synthesis-route/manifest.ts
+const caseIds = ROUTE_CASES.map((item) => item.id);
+var manifest_default = defineLab({
+	id: "synthesis-route",
+	tag: "SynthesisRoute",
+	domain: "chem",
+	group: "Chemistry",
+	title: "Synthesis Route",
+	description: "Walk the functional-group map from a starting compound to a target, and read the route back with reagents and conditions.",
+	schema: z.object({
+		title: z.string().optional(),
+		prompt: z.string().optional(),
+		case: z.enum(caseIds).optional().describe("which synthesis to plan")
+	}),
+	taxonomy: {
+		grades: ["11", "12"],
+		outcomes: [
+			"chemistry",
+			"organic-chemistry",
+			"synthesis",
+			"reagents-and-conditions"
+		],
+		durationMinutes: 7,
+		interaction: "build",
+		authorability: "simple"
+	},
+	experience: {
+		objectives: ["Find a multi-step route between two functional groups.", "State the reagent and conditions for each step."],
+		phases: ["act", "explain"],
+		responses: ["choice"],
+		accessibility: {
+			keyboard: true,
+			textAlternative: true,
+			reducedMotion: true
+		}
+	},
+	loadRuntime: () => import("./runtime.mjs")
+});
+
+//#endregion
+export { manifest_default as default };