@classytic/labs 0.1.0

package/dist/chem/gas-box/preset.mjs

@@ -0,0 +1,395 @@
+'use client';
+
+import { clamp } from "../../core/util.mjs";
+import { Chip, Slider } from "../../kit/controls.mjs";
+import { ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { ChallengeCard, useChallenge, useCheckpoint } from "../../kit/pedagogy.mjs";
+import { useFrameTick, useReducedMotionDeferred } from "../../kit/anim.mjs";
+import { PlayWrap, usePlayGate } from "../../kit/play.mjs";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CanvasLayer, fmt } from "@classytic/stage";
+
+//#region src/chem/gas-box/preset.tsx
+/**
+* GasBoxLab — gas in a box: pressure you can watch being MADE.
+*
+* Hundreds of molecules bounce in a box on <CanvasLayer>; drag the piston to set
+* volume, slide temperature (every molecule speeds up, cool→hot colour) and amount
+* n (dots appear/vanish). Pressure is NOT a control — it is MEASURED from how often
+* + how hard the molecules drum the walls (each wall strike flashes), so PV=nRT
+* emerges from the mechanism instead of being plugged in. A "hold constant" lock
+* yields Boyle (lock T), Gay-Lussac (lock V), Charles (lock P → piston floats).
+*
+* The kinetic-theory algebra (P = ⅓(N/V)m⟨v²⟩ → PV=nRT) lives in a PAIRED
+* MathDerivation block, not here — the sim makes it felt, the derivation proves it.
+* SVG gauge/readouts overlay the canvas; honours prefers-reduced-motion.
+*/
+const GASBOX_CHALLENGE = [{
+	id: "boyle",
+	prompt: "Hold the temperature fixed and HALVE the volume. The pressure…",
+	choices: [
+		{
+			value: "double",
+			label: "doubles"
+		},
+		{
+			value: "half",
+			label: "halves"
+		},
+		{
+			value: "same",
+			label: "is unchanged"
+		}
+	],
+	answer: "double",
+	explain: "Same molecules strike half the space twice as often — Boyle’s law, P ∝ 1/V."
+}, {
+	id: "gaylussac",
+	prompt: "Hold the volume fixed and HEAT the gas. The pressure…",
+	choices: [
+		{
+			value: "rise",
+			label: "rises"
+		},
+		{
+			value: "fall",
+			label: "falls"
+		},
+		{
+			value: "same",
+			label: "is unchanged"
+		}
+	],
+	answer: "rise",
+	explain: "Hotter molecules move faster and hit the walls harder and more often — Gay-Lussac, P ∝ T."
+}];
+const H = 6, MAXV = 10, MINV = 2.5, R = .13, MAXN = 320;
+const T0 = 300, SPEED0 = 5.5, TMIN = 80, TMAX = 600;
+const PDISP = 1.5;
+function GasBoxLab({ holdConstant = "none", particleCount = 180, temperature = 300, volume = 7, showGauge = true, title = "Gas in a box — watch pressure being made", prompt = "Drag the piston, heat it up, add molecules. Pressure is the drumbeat of hits on the walls.", height = 300, objectives }) {
+	const [mode, setMode] = useState(holdConstant);
+	const [vol, setVol] = useState(clamp(volume, MINV, MAXV));
+	const [temp, setTemp] = useState(clamp(temperature, TMIN, TMAX));
+	const [n, setN] = useState(clamp(Math.round(particleCount), 10, MAXN));
+	const challenge = useChallenge(GASBOX_CHALLENGE);
+	useCheckpoint({
+		solved: challenge.allCorrect,
+		activity: "gas-box"
+	});
+	const particles = useRef([]);
+	useRef(0);
+	const pressure = useRef(40);
+	const flashes = useRef([]);
+	const pTarget = useRef(0);
+	const reduce = useReducedMotionDeferred();
+	const gate = usePlayGate();
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	if (particles.current.length === 0) {
+		const pool = [];
+		for (let i = 0; i < MAXN; i++) {
+			const a = i * 2.39996 % (Math.PI * 2);
+			pool.push({
+				x: R + i * .211 % 1 * (MINV - 2 * R) + .5,
+				y: R + i * .137 % 1 * (H - 2 * R),
+				vx: Math.cos(a) * SPEED0,
+				vy: Math.sin(a) * SPEED0
+			});
+		}
+		particles.current = pool;
+	}
+	const targetSpeed = SPEED0 * Math.sqrt(temp / T0);
+	useFrameTick(gate.running && !reduce, (f) => {
+		const dt = Math.min(.032, f.dtMs / 1e3);
+		const right = vol;
+		let imp = 0;
+		const ps = particles.current;
+		for (let i = 0; i < n; i++) {
+			const p = ps[i];
+			const k = targetSpeed / (Math.hypot(p.vx, p.vy) || 1);
+			p.vx *= k;
+			p.vy *= k;
+			p.x += p.vx * dt;
+			p.y += p.vy * dt;
+			if (p.x < R) {
+				p.x = R;
+				p.vx = Math.abs(p.vx);
+				imp += 2 * Math.abs(p.vx);
+				flashes.current.push({
+					along: p.y / H,
+					side: 0,
+					life: 1
+				});
+			} else if (p.x > right - R) {
+				p.x = right - R;
+				p.vx = -Math.abs(p.vx);
+				imp += 2 * Math.abs(p.vx);
+				flashes.current.push({
+					along: p.y / H,
+					side: 1,
+					life: 1
+				});
+			}
+			if (p.y < R) {
+				p.y = R;
+				p.vy = Math.abs(p.vy);
+				imp += 2 * Math.abs(p.vy);
+				flashes.current.push({
+					along: p.x / right,
+					side: 2,
+					life: 1
+				});
+			} else if (p.y > H - R) {
+				p.y = H - R;
+				p.vy = -Math.abs(p.vy);
+				imp += 2 * Math.abs(p.vy);
+				flashes.current.push({
+					along: p.x / right,
+					side: 3,
+					life: 1
+				});
+			}
+		}
+		const perim = 2 * (right + H);
+		const pInst = imp / (dt * perim);
+		pressure.current = pressure.current * .9 + pInst * .1;
+		if (mode === "pressure" && pTarget.current > 0) setVol((v) => clamp(v + clamp((pressure.current - pTarget.current) * .04, -3, 3) * dt, MINV, MAXV));
+		if (flashes.current.length > 60) flashes.current.splice(0, flashes.current.length - 60);
+		for (const fl of flashes.current) fl.life -= dt * 3.5;
+		flashes.current = flashes.current.filter((fl) => fl.life > 0);
+	});
+	const pShow = mounted && reduce ? .0117 * n * temp / vol : pressure.current * PDISP;
+	const draw = (ctx, c) => {
+		const cs = getComputedStyle(document.documentElement);
+		const tok = (name, fb) => cs.getPropertyValue(name).trim() || fb;
+		const fg = tok("--stage-fg", "#222"), grid = tok("--stage-grid", "rgba(0,0,0,.1)"), warn = tok("--stage-warn", "#e0a020"), metal = tok("--stage-metal", "#8a8a8a");
+		const right = vol;
+		const [x0, y0] = c.toPx(0, H);
+		const [x1, y1] = c.toPx(right, 0);
+		const [bx] = c.toPx(MAXV, 0);
+		ctx.clearRect(0, 0, bx + 40, y1 + 40);
+		ctx.fillStyle = grid;
+		ctx.globalAlpha = .35;
+		ctx.fillRect(x0, y0, x1 - x0, y1 - y0);
+		ctx.globalAlpha = 1;
+		ctx.strokeStyle = fg;
+		ctx.lineWidth = 2;
+		ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
+		ctx.fillStyle = `hsl(${(232 - clamp((temp - TMIN) / (TMAX - TMIN), 0, 1) * 210).toFixed(0)} 78% 55%)`;
+		const rpx = Math.max(2.4, c.sx(R) * 1.4);
+		for (let i = 0; i < n; i++) {
+			const p = particles.current[i];
+			const [px, py] = c.toPx(Math.min(p.x, right - R), p.y);
+			ctx.beginPath();
+			ctx.arc(px, py, rpx, 0, Math.PI * 2);
+			ctx.fill();
+		}
+		ctx.strokeStyle = warn;
+		ctx.lineWidth = 3;
+		for (const fl of flashes.current) {
+			ctx.globalAlpha = clamp(fl.life, 0, 1);
+			ctx.beginPath();
+			if (fl.side === 0) {
+				const [fx, fy] = c.toPx(0, fl.along * H);
+				ctx.moveTo(fx, fy);
+				ctx.lineTo(fx + 9, fy);
+			} else if (fl.side === 1) {
+				const [fx, fy] = c.toPx(right, fl.along * H);
+				ctx.moveTo(fx, fy);
+				ctx.lineTo(fx - 9, fy);
+			} else if (fl.side === 2) {
+				const [fx, fy] = c.toPx(fl.along * right, 0);
+				ctx.moveTo(fx, fy);
+				ctx.lineTo(fx, fy - 9);
+			} else {
+				const [fx, fy] = c.toPx(fl.along * right, H);
+				ctx.moveTo(fx, fy);
+				ctx.lineTo(fx, fy + 9);
+			}
+			ctx.stroke();
+		}
+		ctx.globalAlpha = 1;
+		const [pxr, pyt] = c.toPx(right, H);
+		const [, pyb] = c.toPx(right, 0);
+		ctx.fillStyle = metal;
+		ctx.fillRect(pxr - 4, pyt, 8, pyb - pyt);
+		ctx.fillRect(pxr - 2, (pyt + pyb) / 2 - 14, 14, 28);
+	};
+	const onPiston = useMemo(() => mode === "none" || mode === "temperature" ? (m) => setVol(clamp(m[0], MINV, MAXV)) : void 0, [mode]);
+	const pickMode = (next) => {
+		if (next === "pressure") pTarget.current = pShow / PDISP;
+		setMode(next);
+	};
+	const view = useMemo(() => ({
+		xMin: -.3,
+		xMax: 10.6,
+		yMin: -.4,
+		yMax: 6.4
+	}), []);
+	const pvnt = pShow * vol / (n * temp);
+	const figure = /* @__PURE__ */ jsx(PlayWrap, {
+		gate,
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "relative",
+				borderRadius: 14,
+				overflow: "hidden",
+				background: "var(--stage-bg)",
+				border: "1px solid var(--stage-grid)"
+			},
+			children: [
+				/* @__PURE__ */ jsx(CanvasLayer, {
+					view,
+					height,
+					draw,
+					onPointerMath: onPiston,
+					ariaLabel: `gas box: ${n} molecules at ${Math.round(temp)} kelvin, pressure ${pShow.toFixed(0)}`
+				}),
+				showGauge && /* @__PURE__ */ jsxs("div", {
+					style: {
+						position: "absolute",
+						top: 10,
+						right: 12,
+						textAlign: "center",
+						background: "color-mix(in oklab, var(--stage-bg) 80%, transparent)",
+						borderRadius: 10,
+						padding: "6px 10px",
+						border: "1px solid var(--stage-grid)"
+					},
+					children: [/* @__PURE__ */ jsxs("svg", {
+						width: 84,
+						height: 50,
+						viewBox: "0 0 84 50",
+						"aria-hidden": true,
+						children: [
+							/* @__PURE__ */ jsx("path", {
+								d: "M 8 46 A 34 34 0 0 1 76 46",
+								fill: "none",
+								stroke: "var(--stage-grid)",
+								strokeWidth: 6,
+								strokeLinecap: "round"
+							}),
+							(() => {
+								const a = Math.PI - clamp(pShow / 220, 0, 1) * Math.PI;
+								return /* @__PURE__ */ jsx("line", {
+									x1: 42,
+									y1: 46,
+									x2: fmt(42 + Math.cos(a) * 30),
+									y2: fmt(46 - Math.sin(a) * 30),
+									stroke: "var(--stage-warn)",
+									strokeWidth: 3,
+									strokeLinecap: "round"
+								});
+							})(),
+							/* @__PURE__ */ jsx("circle", {
+								cx: 42,
+								cy: 46,
+								r: 3,
+								fill: "var(--stage-fg)"
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						style: {
+							fontWeight: 800,
+							fontVariantNumeric: "tabular-nums",
+							fontSize: 14
+						},
+						children: ["P ", pShow.toFixed(0)]
+					})]
+				}),
+				/* @__PURE__ */ jsx(LiveRegion, { children: `Pressure ${pShow.toFixed(0)}, volume ${vol.toFixed(1)}, temperature ${Math.round(temp)} kelvin, ${n} molecules.` })
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx(Field, {
+				label: "hold constant",
+				children: /* @__PURE__ */ jsxs("span", {
+					style: {
+						display: "flex",
+						flexWrap: "wrap",
+						gap: 8
+					},
+					children: [
+						/* @__PURE__ */ jsx(Chip, {
+							selected: mode === "none",
+							onClick: () => pickMode("none"),
+							children: "free"
+						}),
+						/* @__PURE__ */ jsx(Chip, {
+							selected: mode === "temperature",
+							onClick: () => pickMode("temperature"),
+							children: "T (Boyle)"
+						}),
+						/* @__PURE__ */ jsx(Chip, {
+							selected: mode === "volume",
+							onClick: () => pickMode("volume"),
+							children: "V (Gay-Lussac)"
+						}),
+						/* @__PURE__ */ jsx(Chip, {
+							selected: mode === "pressure",
+							onClick: () => pickMode("pressure"),
+							children: "P (Charles)"
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "temperature",
+				value: `${Math.round(temp)} K`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: temp,
+					min: TMIN,
+					max: TMAX,
+					step: 5,
+					onChange: mode === "temperature" ? () => {} : setTemp,
+					ariaLabel: "temperature (kelvin)"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "amount n",
+				value: n,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: n,
+					min: 10,
+					max: MAXN,
+					step: 10,
+					onChange: setN,
+					ariaLabel: "number of molecules"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "V",
+				value: `${vol.toFixed(1)} L`,
+				children: /* @__PURE__ */ jsx("span", {})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "PV/nT",
+				value: /* @__PURE__ */ jsxs("span", {
+					style: { color: "var(--stage-good)" },
+					children: ["≈ ", pvnt.toFixed(2)]
+				}),
+				children: /* @__PURE__ */ jsx("span", {})
+			})
+		] }),
+		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
+			className: "lab-prompt",
+			children: mode === "volume" ? "piston locked" : mode === "pressure" ? "piston floats to hold P" : "drag the piston to set V"
+		}), /* @__PURE__ */ jsx(ChallengeCard, {
+			questions: GASBOX_CHALLENGE,
+			state: challenge,
+			title: "Predict the gas laws"
+		})] }),
+		children: figure
+	});
+}
+
+//#endregion
+export { GasBoxLab };

package/dist/chem/index.d.mts

@@ -0,0 +1,16 @@
+import { GasBoxLab, GasBoxProps } from "./gas-box/preset.mjs";
+import { SolutionField, SolutionFieldProps } from "./solution/field.mjs";
+import { SolutionBoxLab, SolutionBoxProps } from "./solution/solution-box.mjs";
+import { DilutionLab, DilutionProps } from "./solution/dilution.mjs";
+import { BohrAtom, BohrAtomProps } from "./bohr-atom.mjs";
+import { ReactionProfile, ReactionProfileProps } from "./reaction-profile.mjs";
+import { ReactionLab, ReactionLabProps } from "./reaction-lab.mjs";
+import { Battery, BatteryProps } from "./battery.mjs";
+import { DiffusionLab, DiffusionProps } from "./diffusion/preset.mjs";
+import { LeChatelierLab, LeChatelierProps } from "./equilibrium/preset.mjs";
+import { TitrationLab, TitrationProps } from "./titration/preset.mjs";
+import { ElectrochemLab, ElectrochemProps } from "./electrochem/preset.mjs";
+import { KineticsLab, KineticsProps } from "./kinetics/preset.mjs";
+import { StoichiometryLab, StoichiometryProps } from "./stoichiometry/preset.mjs";
+import { PeriodicTrendsLab, PeriodicTrendsProps } from "./periodic-trends/preset.mjs";
+export { Battery, type BatteryProps, BohrAtom, type BohrAtomProps, DiffusionLab, type DiffusionProps, DilutionLab, type DilutionProps, ElectrochemLab, type ElectrochemProps, GasBoxLab, type GasBoxProps, KineticsLab, type KineticsProps, LeChatelierLab, type LeChatelierProps, PeriodicTrendsLab, type PeriodicTrendsProps, ReactionLab, type ReactionLabProps, ReactionProfile, type ReactionProfileProps, SolutionBoxLab, type SolutionBoxProps, SolutionField, type SolutionFieldProps, StoichiometryLab, type StoichiometryProps, TitrationLab, type TitrationProps };

package/dist/chem/index.mjs

@@ -0,0 +1,17 @@
+import { GasBoxLab } from "./gas-box/preset.mjs";
+import { SolutionField } from "./solution/field.mjs";
+import { SolutionBoxLab } from "./solution/solution-box.mjs";
+import { DilutionLab } from "./solution/dilution.mjs";
+import { BohrAtom } from "./bohr-atom.mjs";
+import { ReactionProfile } from "./reaction-profile.mjs";
+import { ReactionLab } from "./reaction-lab.mjs";
+import { Battery } from "./battery.mjs";
+import { DiffusionLab } from "./diffusion/preset.mjs";
+import { LeChatelierLab } from "./equilibrium/preset.mjs";
+import { TitrationLab } from "./titration/preset.mjs";
+import { ElectrochemLab } from "./electrochem/preset.mjs";
+import { KineticsLab } from "./kinetics/preset.mjs";
+import { StoichiometryLab } from "./stoichiometry/preset.mjs";
+import { PeriodicTrendsLab } from "./periodic-trends/preset.mjs";
+
+export { Battery, BohrAtom, DiffusionLab, DilutionLab, ElectrochemLab, GasBoxLab, KineticsLab, LeChatelierLab, PeriodicTrendsLab, ReactionLab, ReactionProfile, SolutionBoxLab, SolutionField, StoichiometryLab, TitrationLab };

package/dist/chem/kinetics/index.d.mts

@@ -0,0 +1 @@
+import { KineticsLab, KineticsProps } from "./preset.mjs";

package/dist/chem/kinetics/preset.d.mts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+import { RateOrder } from "@classytic/stage/chem";
+
+//#region src/chem/kinetics/preset.d.ts
+interface KineticsProps {
+  /** Activation energy, kJ/mol (default 50). */
+  EaKJ?: number;
+  /** Rate constant at 300 K that sets the conversion pace (default 0.6). */
+  kRef?: number;
+  /** Reaction order for the half-life readout (default 1). */
+  order?: RateOrder;
+  /** Number of molecules in the vessel (default 30). */
+  molecules?: number;
+  /** Initial temperature, K (default 300). */
+  T0?: number;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+}
+declare function KineticsLab({
+  EaKJ,
+  kRef,
+  order,
+  molecules,
+  T0,
+  title,
+  prompt,
+  objectives
+}?: KineticsProps): ReactNode;
+//#endregion
+export { KineticsLab, KineticsProps };