@classytic/labs 0.1.0

package/dist/chem/reaction-lab.d.mts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+
+//#region src/chem/reaction-lab.d.ts
+interface ReactionLabProps {
+  /** Labels for the two reactant atoms. */
+  a?: string;
+  b?: string;
+  title?: string;
+  height?: number;
+}
+declare function ReactionLab({
+  a,
+  b,
+  title,
+  height
+}?: ReactionLabProps): ReactNode;
+//#endregion
+export { ReactionLab, ReactionLabProps };

package/dist/chem/reaction-lab.mjs

@@ -0,0 +1,165 @@
+'use client';
+
+import { clamp } from "../core/util.mjs";
+import { CheckButton, Chip, Slider } from "../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame } from "../kit/frame.mjs";
+import { ReactionFlow } from "../kit/reaction.mjs";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Circle, Label, Segment, Stage, useFrameLoop, useInView } from "@classytic/stage";
+
+//#region src/chem/reaction-lab.tsx
+/**
+* ReactionLab — a synthesis reaction as moving atoms: A + B collide and bond into
+* A–B. Raise the temperature and they collide harder/more often (kinetics); press
+* React to run it. Atoms are conserved — none created or destroyed, just
+* rearranged.
+*
+* Now on the @classytic/stage engine (SVG, accessible, themed).
+*/
+const VIEW = {
+	xMin: -10,
+	xMax: 10,
+	yMin: -6,
+	yMax: 6
+};
+const R = 1.7;
+function ReactionLab({ a = "A", b = "B", title = "A + B → A–B", height = 300 } = {}) {
+	const [temp, setTemp] = useState(1);
+	const [playing, setPlaying] = useState(false);
+	const [bonded, setBonded] = useState(false);
+	const [p, setP] = useState(0);
+	const { ref: viewRef, inView } = useInView();
+	useFrameLoop((f) => {
+		setP((prev) => {
+			const next = clamp(prev + f.dtMs / 1e3 * .35 * temp, 0, 1);
+			if (next >= 1 && !bonded) {
+				setBonded(true);
+				setPlaying(false);
+			}
+			return next;
+		});
+	}, { running: playing && !bonded && inView });
+	const reset = () => {
+		setP(0);
+		setBonded(false);
+		setPlaying(false);
+	};
+	const jit = (1 - p) * 1.2 * temp;
+	const apartGap = 5.2;
+	const cxA = -5.2 * (1 - p) - R * p * .9;
+	const cxB = apartGap * (1 - p) + R * p * .9;
+	const yA = Math.sin(p * 9) * jit;
+	const yB = -Math.sin(p * 9) * jit;
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ReactionFlow, {
+		reactants: [{ kind: "A" }, { kind: "B" }],
+		products: [{ kind: "AB" }],
+		height: 60,
+		molSize: 24,
+		ariaLabel: `${a} + ${b} react to form ${a}${b}`
+	}), /* @__PURE__ */ jsx("div", {
+		ref: viewRef,
+		children: /* @__PURE__ */ jsxs(Stage, {
+			view: VIEW,
+			height,
+			ariaLabel: `${a} and ${b} ${p > .95 ? "bonded into a product" : "as reactants"}`,
+			children: [
+				p > .8 && /* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: cxA + R,
+						y: yA
+					},
+					to: {
+						x: cxB - R,
+						y: yB
+					},
+					color: "var(--stage-fg)",
+					weight: 3
+				}),
+				/* @__PURE__ */ jsx(Circle, {
+					center: {
+						x: cxA,
+						y: yA
+					},
+					r: R,
+					color: "var(--stage-accent)",
+					fill: "var(--stage-accent)",
+					fillOpacity: 1,
+					weight: 0
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: cxA,
+					y: yA,
+					text: a,
+					color: "var(--stage-bg)",
+					size: 18,
+					weight: 700
+				}),
+				/* @__PURE__ */ jsx(Circle, {
+					center: {
+						x: cxB,
+						y: yB
+					},
+					r: R,
+					color: "var(--stage-accent-2)",
+					fill: "var(--stage-accent-2)",
+					fillOpacity: 1,
+					weight: 0
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: cxB,
+					y: yB,
+					text: b,
+					color: "var(--stage-bg)",
+					size: 18,
+					weight: 700
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: 0,
+					y: VIEW.yMin + .8,
+					text: p > .95 ? `${a}–${b} (product)` : `${a} + ${b} (reactants)`,
+					color: "var(--stage-fg)",
+					size: 13
+				})
+			]
+		})
+	})] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt: "Atoms rearrange — none are created or destroyed. Raise the temperature to react faster.",
+		aside: /* @__PURE__ */ jsx(Callout, {
+			tone: "result",
+			children: bonded ? "product" : playing ? "reacting…" : "reactants"
+		}),
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx(CheckButton, {
+				onClick: () => {
+					if (bonded) reset();
+					setPlaying(true);
+				},
+				children: bonded ? "Run again" : "React"
+			}),
+			/* @__PURE__ */ jsx(Chip, {
+				selected: false,
+				onClick: reset,
+				children: "Reset"
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "temperature",
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: temp,
+					min: .3,
+					max: 3,
+					step: .1,
+					onChange: setTemp,
+					ariaLabel: "temperature",
+					style: { width: 120 }
+				})
+			})
+		] }),
+		children: figure
+	});
+}
+
+//#endregion
+export { ReactionLab };

package/dist/chem/reaction-profile.d.mts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+
+//#region src/chem/reaction-profile.d.ts
+interface ReactionProfileProps {
+  /** Products − reactants energy. Negative = exothermic. */
+  deltaH?: number | string;
+  /** Activation energy (hump height above reactants). */
+  activationEnergy?: number | string;
+  catalyst?: boolean;
+  title?: string;
+  height?: number;
+}
+declare function ReactionProfile({
+  deltaH,
+  activationEnergy,
+  catalyst: catalystInit,
+  title,
+  height
+}?: ReactionProfileProps): ReactNode;
+//#endregion
+export { ReactionProfile, ReactionProfileProps };

package/dist/chem/reaction-profile.mjs

@@ -0,0 +1,287 @@
+'use client';
+
+import { clamp, num } from "../core/util.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 { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, Polyline, Segment, Stage } from "@classytic/stage";
+
+//#region src/chem/reaction-profile.tsx
+/**
+* ReactionProfile — an energy vs. reaction-coordinate diagram.
+*
+* Reactants plateau → activation-energy hump (transition state) → products
+* plateau. Tune ΔH (exothermic vs endothermic) and the activation energy Eₐ; flip
+* the catalyst to lower the hump (a faster route, same ΔH).
+*
+* Now on the @classytic/stage engine (SVG curves + labels, accessible, themed).
+*/
+/** y(t) for t∈[0,1]: flat reactants → peak → flat products. */
+function profile(reactE, prodE, peakE) {
+	return (t) => {
+		if (t < .25) return reactE;
+		if (t > .75) return prodE;
+		const u = (t - .25) / .5;
+		return reactE + (prodE - reactE) * u + (peakE - Math.max(reactE, prodE)) * Math.sin(u * Math.PI);
+	};
+}
+function sample(f) {
+	const pts = [];
+	for (let i = 0; i <= 120; i++) {
+		const t = i / 120;
+		pts.push({
+			x: t,
+			y: f(t)
+		});
+	}
+	return pts;
+}
+/** The predict/classify activity — read straight off the diagram the learner just tuned. */
+const CHALLENGE = [{
+	id: "type",
+	prompt: "When the products end up LOWER in energy than the reactants, the reaction is…",
+	choices: [{
+		value: "exo",
+		label: "exothermic"
+	}, {
+		value: "endo",
+		label: "endothermic"
+	}],
+	answer: "exo",
+	explain: "Energy is released to the surroundings, so ΔH is negative."
+}, {
+	id: "catalyst",
+	prompt: "A catalyst opens the lower (green) path. What does it actually change?",
+	choices: [
+		{
+			value: "ea",
+			label: "lowers Eₐ only"
+		},
+		{
+			value: "dh",
+			label: "lowers ΔH"
+		},
+		{
+			value: "both",
+			label: "both"
+		}
+	],
+	answer: "ea",
+	explain: "The reactant and product levels are unchanged — only the hump (Eₐ) drops, so ΔH is the same."
+}];
+function ReactionProfile({ deltaH, activationEnergy, catalyst: catalystInit = false, title = "Reaction energy profile", height = 320 } = {}) {
+	const [dH, setDH] = useState(clamp(num(deltaH, -40), -80, 80));
+	const [ea, setEa] = useState(clamp(num(activationEnergy, 60), 5, 120));
+	const [catalyst, setCatalyst] = useState(catalystInit);
+	useEffect(() => {
+		setDH(clamp(num(deltaH, -40), -80, 80));
+	}, [deltaH]);
+	useEffect(() => {
+		setEa(clamp(num(activationEnergy, 60), 5, 120));
+	}, [activationEnergy]);
+	useEffect(() => {
+		setCatalyst(catalystInit);
+	}, [catalystInit]);
+	const challenge = useChallenge(CHALLENGE);
+	useCheckpoint({
+		solved: challenge.allCorrect,
+		activity: "reaction-profile"
+	});
+	const reactE = 0, prodE = dH;
+	const peakE = Math.max(reactE, prodE) + ea;
+	const peakCat = Math.max(reactE, prodE) + ea * .45;
+	const lo = Math.min(reactE, prodE) - 15;
+	const hi = peakE + 15;
+	const view = {
+		xMin: 0,
+		xMax: 1,
+		yMin: lo,
+		yMax: hi
+	};
+	const exo = dH < 0;
+	const figure = /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			alignItems: "stretch",
+			gap: 4
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			style: {
+				writingMode: "vertical-rl",
+				transform: "rotate(180deg)",
+				fontSize: 11,
+				opacity: .6,
+				padding: "4px 0"
+			},
+			children: "energy →"
+		}), /* @__PURE__ */ jsxs("div", {
+			style: { flex: 1 },
+			children: [/* @__PURE__ */ jsxs(Stage, {
+				view,
+				height,
+				preserveAspect: false,
+				ariaLabel: `Energy profile, ΔH ${dH} kJ, activation ${ea} kJ${catalyst ? ", catalysed" : ""}`,
+				children: [
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: 0,
+							y: lo
+						},
+						to: {
+							x: 0,
+							y: hi
+						},
+						color: "var(--stage-fg)",
+						opacity: .4,
+						weight: 1.5
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: 0,
+							y: lo
+						},
+						to: {
+							x: 1,
+							y: lo
+						},
+						color: "var(--stage-fg)",
+						opacity: .4,
+						weight: 1.5
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: .25,
+							y: reactE
+						},
+						to: {
+							x: 1,
+							y: reactE
+						},
+						color: "var(--stage-fg)",
+						opacity: .35,
+						weight: 1,
+						dashed: true
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: .75,
+							y: prodE
+						},
+						to: {
+							x: 1,
+							y: prodE
+						},
+						color: "var(--stage-fg)",
+						opacity: .35,
+						weight: 1,
+						dashed: true
+					}),
+					catalyst && /* @__PURE__ */ jsx(Polyline, {
+						points: sample(profile(reactE, prodE, peakCat)),
+						color: "var(--stage-good)",
+						weight: 2.5,
+						dashed: true
+					}),
+					/* @__PURE__ */ jsx(Polyline, {
+						points: sample(profile(reactE, prodE, peakE)),
+						color: "var(--stage-accent)",
+						weight: 2.5
+					}),
+					/* @__PURE__ */ jsx(Label, {
+						x: .02,
+						y: reactE,
+						text: "reactants",
+						color: "var(--stage-fg)",
+						anchor: "start",
+						dy: -8,
+						size: 11
+					}),
+					/* @__PURE__ */ jsx(Label, {
+						x: .78,
+						y: prodE,
+						text: "products",
+						color: "var(--stage-fg)",
+						anchor: "start",
+						dy: -8,
+						size: 11
+					})
+				]
+			}), /* @__PURE__ */ jsx("p", {
+				style: {
+					textAlign: "center",
+					fontSize: 11,
+					opacity: .6,
+					margin: "2px 0 0"
+				},
+				children: "reaction coordinate →"
+			})]
+		})]
+	});
+	const controls = /* @__PURE__ */ jsxs(ControlBar, { children: [
+		/* @__PURE__ */ jsx(Field, {
+			label: "ΔH",
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: dH,
+				min: -80,
+				max: 80,
+				step: 1,
+				onChange: setDH,
+				ariaLabel: "enthalpy change",
+				style: { width: 110 }
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "Eₐ",
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: ea,
+				min: 5,
+				max: 120,
+				step: 1,
+				onChange: setEa,
+				ariaLabel: "activation energy",
+				style: { width: 110 }
+			})
+		}),
+		/* @__PURE__ */ jsx(Chip, {
+			selected: catalyst,
+			onClick: () => setCatalyst((c) => !c),
+			children: "catalyst"
+		})
+	] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt: "Tune ΔH and the activation energy. A catalyst lowers the hump (green) — a faster path, same ΔH.",
+		aside: /* @__PURE__ */ jsx(Callout, {
+			tone: "result",
+			children: /* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "grid",
+					gap: 4,
+					fontVariantNumeric: "tabular-nums",
+					fontWeight: 600
+				},
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					"ΔH ",
+					dH > 0 ? "+" : "",
+					dH.toFixed(0),
+					" kJ"
+				] }), /* @__PURE__ */ jsx("span", {
+					style: { color: exo ? "var(--stage-good)" : "var(--stage-warn)" },
+					children: exo ? "exothermic" : "endothermic"
+				})]
+			})
+		}),
+		controls,
+		footer: /* @__PURE__ */ jsx(ChallengeCard, {
+			questions: CHALLENGE,
+			state: challenge,
+			title: "Predict"
+		}),
+		children: figure
+	});
+}
+
+//#endregion
+export { ReactionProfile };

package/dist/chem/solution/dilution.d.mts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+//#region src/chem/solution/dilution.d.ts
+interface DilutionProps {
+  stockConcentration?: number;
+  aliquotVolume?: number;
+  finalVolume?: number;
+  maxMolarity?: number;
+  hue?: number;
+  title?: string;
+  prompt?: string;
+  height?: number;
+  objectives?: string[];
+}
+declare function DilutionLab({
+  stockConcentration,
+  aliquotVolume,
+  finalVolume,
+  maxMolarity,
+  hue,
+  title,
+  prompt,
+  height,
+  objectives
+}: DilutionProps): ReactNode;
+//#endregion
+export { DilutionLab, DilutionProps };