@classytic/stage 0.2.0 → 0.4.0

package/dist/builder/Palette.mjs

@@ -4,96 +4,57 @@ import { ToolIcon } from "./icons.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/builder/Palette.tsx
-const btn = (active) => ({
-	display: "inline-flex",
-	alignItems: "center",
-	gap: 6,
-	padding: "6px 10px",
-	borderRadius: 8,
-	fontSize: 13,
-	fontWeight: 600,
-	cursor: "pointer",
-	color: active ? "var(--stage-bg)" : "var(--stage-fg)",
-	background: active ? "var(--stage-accent)" : "transparent",
-	border: `1px solid ${active ? "var(--stage-accent)" : "var(--stage-muted)"}`
-});
-const iconBtn = (disabled) => ({
-	display: "inline-flex",
-	alignItems: "center",
-	gap: 6,
-	padding: "6px 10px",
-	borderRadius: 8,
-	fontSize: 13,
-	fontWeight: 600,
-	cursor: disabled ? "not-allowed" : "pointer",
-	opacity: disabled ? .4 : 1,
-	color: "var(--stage-fg)",
-	background: "transparent",
-	border: "1px solid var(--stage-muted)"
-});
 function Palette({ tools, activeTool, onSelect, onUndo, onRedo, canUndo, canRedo, onClear, onSave, hint }) {
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-		role: "toolbar",
-		"aria-label": "construction tools",
-		style: {
-			display: "flex",
-			flexWrap: "wrap",
-			gap: 6,
-			alignItems: "center"
-		},
-		children: [
-			tools.map((t) => /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				"aria-pressed": activeTool === t.id,
-				onClick: () => onSelect(t.id),
-				style: btn(activeTool === t.id),
-				children: [/* @__PURE__ */ jsx(ToolIcon, { name: t.icon }), t.label]
-			}, t.id)),
-			/* @__PURE__ */ jsx("span", { style: {
-				width: 1,
-				alignSelf: "stretch",
-				background: "var(--stage-muted)",
-				margin: "0 4px"
-			} }),
-			/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				onClick: onUndo,
-				disabled: !canUndo,
-				style: iconBtn(!canUndo),
-				children: [/* @__PURE__ */ jsx(ToolIcon, { name: "undo" }), "Undo"]
-			}),
-			/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				onClick: onRedo,
-				disabled: !canRedo,
-				style: iconBtn(!canRedo),
-				children: [/* @__PURE__ */ jsx(ToolIcon, { name: "redo" }), "Redo"]
-			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onClear,
-				style: iconBtn(false),
-				children: "Clear"
-			}),
-			onSave && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onSave,
-				style: {
-					...iconBtn(false),
-					color: "var(--stage-good)",
-					borderColor: "var(--stage-good)"
-				},
-				children: "Save"
-			})
-		]
-	}), /* @__PURE__ */ jsx("p", {
-		style: {
-			fontSize: 12,
-			opacity: .7,
-			margin: "6px 2px 0"
-		},
-		children: hint
-	})] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "stage-palette",
+		children: [/* @__PURE__ */ jsxs("div", {
+			role: "toolbar",
+			"aria-label": "construction tools",
+			className: "stage-palette__toolbar",
+			children: [
+				tools.map((t) => /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-pressed": activeTool === t.id,
+					onClick: () => onSelect(t.id),
+					className: "stage-tool-button",
+					children: [/* @__PURE__ */ jsx(ToolIcon, { name: t.icon }), t.label]
+				}, t.id)),
+				/* @__PURE__ */ jsx("span", {
+					className: "stage-palette__divider",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: onUndo,
+					disabled: !canUndo,
+					className: "stage-tool-button",
+					children: [/* @__PURE__ */ jsx(ToolIcon, { name: "undo" }), "Undo"]
+				}),
+				/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: onRedo,
+					disabled: !canRedo,
+					className: "stage-tool-button",
+					children: [/* @__PURE__ */ jsx(ToolIcon, { name: "redo" }), "Redo"]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onClear,
+					className: "stage-tool-button",
+					children: "Clear"
+				}),
+				onSave && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onSave,
+					className: "stage-tool-button stage-tool-button--save",
+					children: "Save"
+				})
+			]
+		}), /* @__PURE__ */ jsx("p", {
+			className: "stage-palette__hint",
+			children: hint
+		})]
+	});
 }
 
 //#endregion

package/dist/builder/SceneBuilder.mjs

@@ -149,12 +149,7 @@ function SceneBuilder({ initial, onSave, view, height = 440, tools, authoring =
 		}, `pend-${id}`) : null;
 	}), [pending, resolved]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "not-prose",
-		style: {
-			display: "flex",
-			flexDirection: "column",
-			gap: 10
-		},
+		className: "not-prose stage-builder",
 		children: [
 			/* @__PURE__ */ jsx(Palette, {
 				tools: toolSet,
@@ -184,21 +179,11 @@ function SceneBuilder({ initial, onSave, view, height = 440, tools, authoring =
 				]
 			}),
 			authoring && scalars.length > 0 && /* @__PURE__ */ jsx("div", {
-				style: {
-					display: "flex",
-					flexWrap: "wrap",
-					gap: 14,
-					padding: "2px",
-					fontSize: 13
-				},
+				className: "stage-builder__scalars",
 				children: scalars.map((el) => {
 					const f = el.free;
 					return /* @__PURE__ */ jsxs("label", {
-						style: {
-							display: "inline-flex",
-							alignItems: "center",
-							gap: 6
-						},
+						className: "stage-builder__scalar",
 						children: [
 							/* @__PURE__ */ jsx("strong", { children: el.label ?? el.id }),
 							/* @__PURE__ */ jsx("input", {
@@ -214,10 +199,7 @@ function SceneBuilder({ initial, onSave, view, height = 440, tools, authoring =
 								})
 							}),
 							/* @__PURE__ */ jsx("span", {
-								style: {
-									fontVariantNumeric: "tabular-nums",
-									minWidth: 24
-								},
+								className: "stage-builder__scalar-value",
 								children: f.value
 							})
 						]
@@ -225,30 +207,12 @@ function SceneBuilder({ initial, onSave, view, height = 440, tools, authoring =
 				})
 			}),
 			authoring && /* @__PURE__ */ jsxs("details", {
-				style: {
-					fontSize: 13,
-					border: "1px solid var(--stage-muted)",
-					borderRadius: 8,
-					padding: "6px 10px"
-				},
-				children: [/* @__PURE__ */ jsx("summary", {
-					style: {
-						cursor: "pointer",
-						fontWeight: 600
-					},
-					children: "Pedagogy, objectives · hints · difficulty"
-				}), /* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "grid",
-						gap: 8,
-						marginTop: 8
-					},
+				className: "stage-builder__pedagogy",
+				children: [/* @__PURE__ */ jsx("summary", { children: "Pedagogy, objectives · hints · difficulty" }), /* @__PURE__ */ jsxs("div", {
+					className: "stage-builder__pedagogy-fields",
 					children: [
 						/* @__PURE__ */ jsxs("label", {
-							style: {
-								display: "grid",
-								gap: 3
-							},
+							className: "stage-builder__field-label",
 							children: ["Objectives (one per line)", /* @__PURE__ */ jsx("textarea", {
 								rows: 2,
 								value: (pedagogy.objectives ?? []).join("\n"),
@@ -256,14 +220,11 @@ function SceneBuilder({ initial, onSave, view, height = 440, tools, authoring =
 									...p,
 									objectives: splitLines(e.currentTarget.value)
 								})),
-								style: FIELD
+								className: "stage-builder__field"
 							})]
 						}),
 						/* @__PURE__ */ jsxs("label", {
-							style: {
-								display: "grid",
-								gap: 3
-							},
+							className: "stage-builder__field-label",
 							children: ["Hints (one per line)", /* @__PURE__ */ jsx("textarea", {
 								rows: 2,
 								value: (pedagogy.hints ?? []).join("\n"),
@@ -271,39 +232,29 @@ function SceneBuilder({ initial, onSave, view, height = 440, tools, authoring =
 									...p,
 									hints: splitLines(e.currentTarget.value)
 								})),
-								style: FIELD
+								className: "stage-builder__field"
 							})]
 						}),
 						/* @__PURE__ */ jsxs("label", {
-							style: {
-								display: "grid",
-								gap: 3
-							},
+							className: "stage-builder__field-label",
 							children: ["Success criteria", /* @__PURE__ */ jsx("input", {
 								value: pedagogy.successCriteria ?? "",
 								onChange: (e) => setPedagogy((p) => ({
 									...p,
 									successCriteria: e.currentTarget.value || void 0
 								})),
-								style: FIELD
+								className: "stage-builder__field"
 							})]
 						}),
 						/* @__PURE__ */ jsxs("label", {
-							style: {
-								display: "inline-flex",
-								alignItems: "center",
-								gap: 8
-							},
+							className: "stage-builder__difficulty",
 							children: ["Difficulty", /* @__PURE__ */ jsxs("select", {
 								value: pedagogy.difficulty ?? "",
 								onChange: (e) => setPedagogy((p) => ({
 									...p,
 									difficulty: e.currentTarget.value ? Number(e.currentTarget.value) : void 0
 								})),
-								style: {
-									...FIELD,
-									width: "auto"
-								},
+								className: "stage-builder__field stage-builder__field--select",
 								children: [/* @__PURE__ */ jsx("option", {
 									value: "",
 									children: ", "
@@ -325,15 +276,6 @@ function SceneBuilder({ initial, onSave, view, height = 440, tools, authoring =
 		]
 	});
 }
-const FIELD = {
-	width: "100%",
-	border: "1px solid var(--stage-muted)",
-	borderRadius: 6,
-	padding: "4px 8px",
-	background: "transparent",
-	color: "inherit",
-	font: "inherit"
-};
 const splitLines = (s) => s.split("\n").map((x) => x.trim()).filter(Boolean);
 
 //#endregion

package/dist/chem/chromatography.d.mts

@@ -0,0 +1,66 @@
+//#region src/chem/chromatography.d.ts
+/**
+ * chromatography, identifying a component by where it stops.
+ *
+ * WHAT THIS IS FOR. The arithmetic of a retention factor is one division, and one division is not an
+ * engine. What is worth computing is the IDENTIFICATION: given a set of reference values and a spot,
+ * which references does it match, and is that match unique?
+ *
+ * The answer is often "not unique", and that is the whole reason a second solvent exists. A learner
+ * told to run two solvents without being shown a case where one fails has been given a ritual. So
+ * {@link identify} reports ambiguity as a result rather than hiding it, and {@link resolvedBy} finds
+ * the solvent that breaks a tie.
+ *
+ * ## Why a tolerance, and why it is not optional
+ *
+ * An Rf is reproducible to about ±0.02 in practice, and less than that if the tank was not saturated
+ * or the temperature drifted. Matching on exact equality would make every real measurement fail and
+ * would teach that chromatography is more precise than it is. The tolerance is a parameter because
+ * it is a property of the experiment, not of the chemistry.
+ *
+ * Pure: no React, no pixels.
+ */
+/** A substance and where it stops in each solvent the lab offers. */
+interface Component {
+  readonly id: string;
+  readonly name: string;
+  /** Retention factor in each solvent, keyed by solvent id. Always between 0 and 1. */
+  readonly rf: Readonly<Record<string, number>>;
+}
+/**
+ * The retention factor: how far the spot went as a fraction of how far the solvent went.
+ *
+ * Both distances are measured from the pencil baseline. Refuses a spot that has overtaken the
+ * solvent front, which is not a measurement error to round away: it means the distances were
+ * measured from different places, usually the bottom of the plate rather than the baseline.
+ */
+declare function retentionFactor(spotCm: number, frontCm: number): number;
+/** Where a component's spot sits, given how far the solvent has run. */
+declare const spotDistance: (component: Component, solvent: string, frontCm: number) => number;
+/** What an identification attempt produced. */
+interface Identification {
+  /** Every reference within tolerance, best match first. */
+  readonly matches: readonly Component[];
+  /** True when exactly one reference matches, so the spot is named. */
+  readonly unique: boolean;
+}
+/**
+ * Which references a measured Rf could be.
+ *
+ * Returns every candidate rather than the closest one. A spot that sits between two references has
+ * not identified anything, and reporting the nearest would turn a failed experiment into a confident
+ * wrong answer.
+ */
+declare function identify(rf: number, references: readonly Component[], solvent: string, tolerance?: number): Identification;
+/**
+ * A solvent in which two components can be told apart, or `undefined` if none can.
+ *
+ * This is the argument for running a second solvent, made as a computation. Two components that sit
+ * on top of each other in one solvent will usually separate in another, because the competition
+ * between the phases depends on the solvent as much as on the substance.
+ */
+declare function resolvedBy(a: Component, b: Component, solvents: readonly string[], tolerance?: number): string | undefined;
+/** Pairs that cannot be told apart in a given solvent, which is what makes a mixture ambiguous. */
+declare function unresolvedPairs(components: readonly Component[], solvent: string, tolerance?: number): [Component, Component][];
+//#endregion
+export { Component, Identification, identify, resolvedBy, retentionFactor, spotDistance, unresolvedPairs };

package/dist/chem/chromatography.mjs

@@ -0,0 +1,63 @@
+//#region src/chem/chromatography.ts
+/**
+* The retention factor: how far the spot went as a fraction of how far the solvent went.
+*
+* Both distances are measured from the pencil baseline. Refuses a spot that has overtaken the
+* solvent front, which is not a measurement error to round away: it means the distances were
+* measured from different places, usually the bottom of the plate rather than the baseline.
+*/
+function retentionFactor(spotCm, frontCm) {
+	if (frontCm <= 0) throw new Error("The solvent front has not moved, so there is no Rf to report.");
+	if (spotCm < 0) throw new Error("A spot cannot move backwards from the baseline.");
+	if (spotCm > frontCm) throw new Error(`A spot at ${spotCm} cm cannot be past a front at ${frontCm} cm: the solvent carries it, so Rf is at most 1. Measure both from the pencil baseline.`);
+	return spotCm / frontCm;
+}
+/** Where a component's spot sits, given how far the solvent has run. */
+const spotDistance = (component, solvent, frontCm) => {
+	const rf = component.rf[solvent];
+	if (rf === void 0) throw new Error(`${component.name} has no measured Rf in ${solvent}.`);
+	return rf * frontCm;
+};
+/**
+* Which references a measured Rf could be.
+*
+* Returns every candidate rather than the closest one. A spot that sits between two references has
+* not identified anything, and reporting the nearest would turn a failed experiment into a confident
+* wrong answer.
+*/
+function identify(rf, references, solvent, tolerance = .03) {
+	const matches = references.filter((c) => c.rf[solvent] !== void 0 && Math.abs(c.rf[solvent] - rf) <= tolerance).sort((a, b) => Math.abs(a.rf[solvent] - rf) - Math.abs(b.rf[solvent] - rf));
+	return {
+		matches,
+		unique: matches.length === 1
+	};
+}
+/**
+* A solvent in which two components can be told apart, or `undefined` if none can.
+*
+* This is the argument for running a second solvent, made as a computation. Two components that sit
+* on top of each other in one solvent will usually separate in another, because the competition
+* between the phases depends on the solvent as much as on the substance.
+*/
+function resolvedBy(a, b, solvents, tolerance = .03) {
+	return solvents.find((s) => {
+		const ra = a.rf[s];
+		const rb = b.rf[s];
+		return ra !== void 0 && rb !== void 0 && Math.abs(ra - rb) > tolerance;
+	});
+}
+/** Pairs that cannot be told apart in a given solvent, which is what makes a mixture ambiguous. */
+function unresolvedPairs(components, solvent, tolerance = .03) {
+	const out = [];
+	for (let i = 0; i < components.length; i += 1) for (let j = i + 1; j < components.length; j += 1) {
+		const a = components[i];
+		const b = components[j];
+		const ra = a.rf[solvent];
+		const rb = b.rf[solvent];
+		if (ra !== void 0 && rb !== void 0 && Math.abs(ra - rb) <= tolerance) out.push([a, b]);
+	}
+	return out;
+}
+
+//#endregion
+export { identify, resolvedBy, retentionFactor, spotDistance, unresolvedPairs };

package/dist/chem/complex.d.mts

@@ -0,0 +1,114 @@
+//#region src/chem/complex.d.ts
+/**
+ * complex, the geometry and colour of a transition-metal complex ion.
+ *
+ * Three questions the syllabus asks about every complex, and they are all answered from the same
+ * declaration: what shape is it, how many isomers has it, and why is it that colour.
+ *
+ * ## Coordination number is not the number of ligands
+ *
+ * It is the number of COORDINATE BONDS, so a bidentate ligand counts twice. That single sentence
+ * settles a question learners routinely get wrong: [Cu(en)₂]²⁺ has two ligands and a coordination
+ * number of four, and [Cr(C₂O₄)₃]³⁻ has three ligands and a coordination number of six.
+ *
+ * ## Why shape follows from the number and not from the metal, except when it does not
+ *
+ * Six is octahedral and two is linear, with no exceptions worth teaching. Four is the interesting
+ * one: usually tetrahedral, but square planar for platinum and palladium. That is not a detail. A
+ * square-planar complex shows cis-trans isomerism and a tetrahedral one CANNOT, because in a
+ * tetrahedron every position is adjacent to every other, so there is no "opposite" to be trans to.
+ *
+ * Cisplatin is the case that matters: it is the cis isomer of a square-planar platinum complex and
+ * it is a cancer drug, while the trans isomer is not. Had the geometry been tetrahedral there would
+ * have been no two isomers to tell apart.
+ *
+ * ## Colour is what is NOT absorbed
+ *
+ * A d-block ion's d orbitals split, and the gap ΔE corresponds to a wavelength in the visible
+ * range. The ion absorbs that wavelength and what reaches the eye is the rest, which is why copper
+ * sulfate is blue BECAUSE it absorbs orange. Stating it the other way round, that it is blue
+ * because it absorbs blue, is the commonest sentence in a wrong answer.
+ *
+ * Pure: no React, no pixels.
+ */
+/** Planck constant, J s. */
+declare const PLANCK = 6.626e-34;
+/** Speed of light, m/s. */
+declare const LIGHT_SPEED = 299800000;
+/** Avogadro constant, per mole. */
+declare const AVOGADRO = 6.022e+23;
+type Geometry = 'linear' | 'tetrahedral' | 'square-planar' | 'octahedral';
+interface Ligand {
+  readonly name: string;
+  /** As it appears inside the square brackets. */
+  readonly formula: string;
+  /** Charge on the ligand itself. 0 for a neutral one. */
+  readonly charge: number;
+  /** Coordinate bonds it forms. 2 for a bidentate ligand. */
+  readonly denticity: number;
+}
+/** The ligands the syllabus actually uses. */
+declare const LIGANDS: Readonly<Record<string, Ligand>>;
+interface ComplexSpec {
+  /** Symbol of the central metal, e.g. 'Cu'. */
+  readonly metal: string;
+  /** Its oxidation number. */
+  readonly oxidation: number;
+  readonly ligands: readonly {
+    readonly ligand: Ligand;
+    readonly count: number;
+  }[];
+  /**
+   * Force a geometry the coordination number would not give.
+   *
+   * Only ever needed at four, where platinum and palladium are square planar and everything else is
+   * tetrahedral. Provided as an override rather than a longer metal table, because the exceptions
+   * are a syllabus fact rather than a rule anyone can derive.
+   */
+  readonly geometry?: Geometry;
+}
+/** Coordinate bonds, NOT the number of ligands. A bidentate ligand counts twice. */
+declare const coordinationNumber: (spec: ComplexSpec) => number;
+/** Overall charge: the metal's oxidation number plus every ligand's own charge. */
+declare const complexCharge: (spec: ComplexSpec) => number;
+declare function geometryOf(spec: ComplexSpec): Geometry;
+/** The bond angle a shape gives, in degrees. */
+declare function bondAngle(geometry: Geometry): number;
+/** `[Cu(H2O)6]2+`, with the charge written the way a data book writes it. */
+declare function complexFormula(spec: ComplexSpec): string;
+interface StereoResult {
+  readonly count: number;
+  /** 'cis', 'trans', 'fac', 'mer', 'optical pair'. */
+  readonly kinds: readonly string[];
+  /** Why there are that many, in a sentence a mark scheme would accept. */
+  readonly reason: string;
+}
+/**
+ * How many stereoisomers a complex has, and what kind.
+ *
+ * Covers the shapes the syllabus sets and refuses to guess beyond them. The important NEGATIVE
+ * result is the tetrahedral one: no cis-trans isomerism at any composition, because a tetrahedron
+ * has no two positions opposite each other.
+ */
+declare function stereoisomers(spec: ComplexSpec): StereoResult;
+/** The splitting energy ΔE for light of this wavelength, in joules per photon. */
+declare const splittingEnergy: (wavelengthNm: number) => number;
+/** The same energy per mole, in kJ/mol, which is the form a question asks for. */
+declare const splittingEnergyPerMole: (wavelengthNm: number) => number;
+/** The wavelength whose photon energy is ΔE joules. */
+declare const wavelengthFor: (joules: number) => number;
+interface ColourResult {
+  readonly absorbed: string;
+  readonly seen: string;
+  readonly wavelengthNm: number;
+}
+/**
+ * What colour a solution looks, given the wavelength it absorbs.
+ *
+ * The answer is the COMPLEMENTARY colour, never the absorbed one. Copper sulfate absorbs orange
+ * light at about 600 nm and therefore looks blue, and a learner who says it looks blue because it
+ * absorbs blue has the physics exactly backwards.
+ */
+declare function observedColour(wavelengthNm: number): ColourResult;
+//#endregion
+export { AVOGADRO, ColourResult, ComplexSpec, Geometry, LIGANDS, LIGHT_SPEED, Ligand, PLANCK, StereoResult, bondAngle, complexCharge, complexFormula, coordinationNumber, geometryOf, observedColour, splittingEnergy, splittingEnergyPerMole, stereoisomers, wavelengthFor };