@classytic/labs 0.1.0 → 0.3.0

package/dist/math/harmonic-form/preset.mjs

@@ -2,28 +2,30 @@
 
 import { Tex as Tex$1 } from "../../core/tex.mjs";
 import { Chip, Slider } from "../../kit/controls.mjs";
-import { Callout, ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { Field, LiveRegion, Stat, StatList } from "../../kit/frame.mjs";
 import { ChallengeCard, useChallenge, useCheckpoint } from "../../kit/pedagogy.mjs";
-import { AngleArc, RightAngleMark } from "../../kit/diagram.mjs";
+import { AngleArc, RightAngleMark } from "../../kit/diagram/annotations.mjs";
+import { PlaneAxes, clearOfLabel } from "../../kit/coords.mjs";
+import { MathActivity, MathResetTransport } from "../activity.mjs";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Axes, Dot, Grid, Label, Plot, Segment, Stage, Vector } from "@classytic/stage";
+import { Dot, Grid, Label, Plot, Segment, Stage, Vector } from "@classytic/stage";
 
 //#region src/math/harmonic-form/preset.tsx
 /**
-* HarmonicFormLab — "two waves are secretly one": a cos x + b sin x = R cos(x + α).
+* HarmonicFormLab, "two waves are secretly one": a cos x + b sin x = R cos(x + α).
 *
 * The whole insight is that adding a cosine and a sine of the SAME frequency gives
-* a SINGLE shifted cosine — and you can SEE why with phasors. The cos term is a
+* a SINGLE shifted cosine, and you can SEE why with phasors. The cos term is a
 * vector of length a along the axis; the sin term is a vector of length b at a
 * right angle to it (sin lags cos by 90°). Add them tip-to-tail and the resultant
-* has length R = √(a²+b²) at angle α — exactly the amplitude and phase of the one
+* has length R = √(a²+b²) at angle α, exactly the amplitude and phase of the one
 * combined wave. Drag a and b: the phasor triangle and the three waves update live,
 * and the messy two-wave sum visibly collapses onto one clean R cos(x + α).
 *
 * This builds the INTUITION for the auxiliary-angle form (Edexcel "express in the
 * form R cos(x+α)"). The exact R and α arithmetic is left to written working / a
-* paired derivation — the lab is the picture, not the algebra.
+* paired derivation, the lab is the picture, not the algebra.
 *
 * Convention: a cos x + b sin x = R cos(x + α) ⇒ a = R cos α, b = −R sin α, so
 * α = atan2(−b, a) and the resultant phasor is (a, −b). Tokenized SVG; accessible.
@@ -71,7 +73,7 @@ const HARMONIC_CHALLENGE = [{
 		}
 	],
 	answer: "up",
-	explain: "R = √(a² + b²) is the hypotenuse — growing either coefficient lengthens it."
+	explain: "R = √(a² + b²) is the hypotenuse, growing either coefficient lengthens it."
 }];
 /** LaTeX for "a cos x ± b sin x", tidy for ±1 / 0 coefficients. */
 function lhsTex(a, b) {
@@ -116,7 +118,13 @@ function HarmonicFormLab({ a: a0 = 4, b: b0 = -3, title = "Express a cos x + b s
 		ariaLabel: `Phasor diagram: cosine component ${a}, sine component ${b}, resultant length ${R.toFixed(2)}`,
 		children: [
 			/* @__PURE__ */ jsx(Grid, { step: 3 }),
-			/* @__PURE__ */ jsx(Axes, {}),
+			/* @__PURE__ */ jsx(PlaneAxes, {
+				labels: true,
+				keepClear: showComp && a !== 0 ? [clearOfLabel(a / 2, 0, "a", {
+					size: 13,
+					dy: 16
+				})] : []
+			}),
 			showComp && a !== 0 && /* @__PURE__ */ jsx(Vector, {
 				tail: O,
 				tip: corner,
@@ -195,7 +203,13 @@ function HarmonicFormLab({ a: a0 = 4, b: b0 = -3, title = "Express a cos x + b s
 		ariaLabel: "The cosine term, the sine term, and their combined single wave",
 		children: [
 			/* @__PURE__ */ jsx(Grid, {}),
-			/* @__PURE__ */ jsx(Axes, {}),
+			/* @__PURE__ */ jsx(PlaneAxes, {
+				labels: true,
+				keepClear: [clearOfLabel(peakX, 0, "x = −α", {
+					size: 11,
+					dy: 16
+				})]
+			}),
 			/* @__PURE__ */ jsx(Segment, {
 				from: {
 					x: -Math.PI,
@@ -278,108 +292,100 @@ function HarmonicFormLab({ a: a0 = 4, b: b0 = -3, title = "Express a cos x + b s
 		]
 	});
 	const figure = /* @__PURE__ */ jsxs("div", {
-		style: {
-			display: "flex",
-			flexWrap: "wrap",
-			gap: 12,
-			alignItems: "stretch"
-		},
+		className: "math-harmonic-layout",
 		children: [/* @__PURE__ */ jsx("div", {
-			style: {
-				flex: "1 1 240px",
-				minWidth: 240
-			},
+			className: "math-harmonic-phasor",
 			children: phasor
 		}), /* @__PURE__ */ jsx("div", {
-			style: {
-				flex: "2 1 320px",
-				minWidth: 300
-			},
+			className: "math-harmonic-waves",
 			children: waves
 		})]
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		objectives,
-		aside: /* @__PURE__ */ jsx(Callout, {
-			tone: "result",
-			children: /* @__PURE__ */ jsxs("div", {
-				style: {
-					display: "grid",
-					gap: 8,
-					fontVariantNumeric: "tabular-nums"
-				},
-				children: [
-					/* @__PURE__ */ jsx(Tex$1, { tex: lhsTex(a, b) }),
-					/* @__PURE__ */ jsx(Tex$1, { tex: `= ${R.toFixed(2)}\\cos(x ${alpha < 0 ? "-" : "+"} ${Math.abs(alpha).toFixed(3)})` }),
-					/* @__PURE__ */ jsxs("span", {
-						style: { fontSize: 13 },
-						children: ["R = √(a² + b²) = ", /* @__PURE__ */ jsx("strong", { children: R.toFixed(3) })]
-					}),
-					/* @__PURE__ */ jsxs("span", {
-						style: { fontSize: 13 },
-						children: [
-							"α = ",
-							/* @__PURE__ */ jsx("strong", { children: alpha.toFixed(3) }),
-							" rad = ",
-							(alpha * 180 / Math.PI).toFixed(1),
-							"°"
-						]
-					})
-				]
-			})
+	const aside = /* @__PURE__ */ jsxs(StatList, { children: [
+		/* @__PURE__ */ jsx(Tex$1, { tex: lhsTex(a, b) }),
+		/* @__PURE__ */ jsx(Tex$1, { tex: `= ${R.toFixed(2)}\\cos(x ${alpha < 0 ? "-" : "+"} ${Math.abs(alpha).toFixed(3)})` }),
+		/* @__PURE__ */ jsx(Stat, {
+			label: "R = √(a² + b²)",
+			value: R.toFixed(3)
 		}),
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
-			/* @__PURE__ */ jsx(Field, {
-				label: "a (cos x)",
+		/* @__PURE__ */ jsx(Stat, {
+			label: "α",
+			value: `${alpha.toFixed(3)} rad = ${(alpha * 180 / Math.PI).toFixed(1)}°`
+		})
+	] });
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Field, {
+			label: "a (cos x)",
+			value: a,
+			children: /* @__PURE__ */ jsx(Slider, {
 				value: a,
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: a,
-					min: -8,
-					max: LIM,
-					step: 1,
-					onChange: setA,
-					ariaLabel: "coefficient of cosine"
-				})
-			}),
-			/* @__PURE__ */ jsx(Field, {
-				label: "b (sin x)",
+				min: -8,
+				max: LIM,
+				step: 1,
+				onChange: setA,
+				ariaLabel: "coefficient of cosine"
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "b (sin x)",
+			value: b,
+			children: /* @__PURE__ */ jsx(Slider, {
 				value: b,
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: b,
-					min: -8,
-					max: LIM,
-					step: 1,
-					onChange: setB,
-					ariaLabel: "coefficient of sine"
-				})
-			}),
-			/* @__PURE__ */ jsx(Chip, {
-				selected: showComp,
-				onClick: () => setShowComp((v) => !v),
-				children: "show components"
+				min: -8,
+				max: LIM,
+				step: 1,
+				onChange: setB,
+				ariaLabel: "coefficient of sine"
 			})
+		}),
+		/* @__PURE__ */ jsx(Chip, {
+			selected: showComp,
+			onClick: () => setShowComp((v) => !v),
+			children: "show components"
+		})
+	] });
+	const details = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChallengeCard, {
+		questions: HARMONIC_CHALLENGE,
+		state: challenge,
+		title: "Predict"
+	}), /* @__PURE__ */ jsx(LiveRegion, { children: `${a} cos x ${b < 0 ? "minus" : "plus"} ${Math.abs(b)} sin x equals ${R.toFixed(2)} cos(x ${alpha < 0 ? "minus" : "plus"} ${Math.abs(alpha).toFixed(3)}).` })] });
+	return /* @__PURE__ */ jsx(MathActivity, {
+		className: "math-harmonic-form",
+		focusLayout: "compact",
+		eyebrow: "Trigonometry · harmonic form",
+		title,
+		description: prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("strong", { children: "One resultant wave" }),
+			/* @__PURE__ */ jsxs("span", { children: ["R ", R.toFixed(3)] }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				"α ",
+				(alpha * 180 / Math.PI).toFixed(1),
+				"°"
+			] })
 		] }),
-		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsxs("p", {
-				className: "lab-prompt",
-				children: [
-					"The two coloured waves add to the bold one. Its height is ",
-					/* @__PURE__ */ jsx(Tex$1, { tex: "R=\\sqrt{a^2+b^2}" }),
-					" and it peaks at ",
-					/* @__PURE__ */ jsx(Tex$1, { tex: "x=-\\alpha" }),
-					" — the phasor's length and angle."
-				]
-			}),
-			/* @__PURE__ */ jsx(ChallengeCard, {
-				questions: HARMONIC_CHALLENGE,
-				state: challenge,
-				title: "Predict"
-			}),
-			/* @__PURE__ */ jsx(LiveRegion, { children: `${a} cos x ${b < 0 ? "minus" : "plus"} ${Math.abs(b)} sin x equals ${R.toFixed(2)} cos(x ${alpha < 0 ? "minus" : "plus"} ${Math.abs(alpha).toFixed(3)}).` })
+		figure,
+		measurements: aside,
+		controls,
+		conclusion: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			"The two component waves combine into one wave with amplitude ",
+			/* @__PURE__ */ jsx(Tex$1, { tex: "R=\\sqrt{a^2+b^2}" }),
+			" and phase shift ",
+			/* @__PURE__ */ jsx(Tex$1, { tex: "-\\alpha" }),
+			"."
 		] }),
-		children: figure
+		transport: /* @__PURE__ */ jsx(MathResetTransport, {
+			onReset: () => {
+				setA(a0);
+				setB(b0);
+				setShowComp(true);
+			},
+			state: "Drag either coefficient",
+			detail: `R ${R.toFixed(3)} · α ${(alpha * 180 / Math.PI).toFixed(1)}°`
+		}),
+		details,
+		graphLabel: "Linked phasor and component wave diagrams",
+		inspectorLabel: "Resultant amplitude and phase"
 	});
 }
 

package/dist/math/identity-proof/core.d.mts

@@ -0,0 +1,86 @@
+//#region src/math/identity-proof/core.d.ts
+/**
+ * Proving a trigonometric identity, where the difficulty is CHOOSING the move.
+ *
+ * Our whole library teaches derivations with `Derivation`, which shows the next line and explains
+ * it. That is the right shape for a formula with one route. It is the wrong shape for proving an
+ * identity, because an identity can be proved several ways and the examinable skill is not
+ * executing a step, it is deciding which step to reach for. A learner who watches five worked
+ * proofs still freezes at "prove that ...", and they freeze at line one.
+ *
+ * So here the next line is not shown. The learner picks a move from a menu, and the menu contains
+ * moves that are perfectly legal algebra and simply do not get anywhere. Choosing one is not
+ * punished with "wrong"; it is answered with the reason it leads nowhere, which is the thing nobody
+ * writes down. That is the difference between knowing the identities and being able to use them.
+ *
+ * TWO RULES OF THE GAME, both examinable and both encoded here:
+ *
+ *   Work ONE SIDE ONLY. A proof that operates on both sides at once assumes the thing being proved.
+ *   That is why `Proof` names a starting side and the chain has a single direction.
+ *
+ *   Start from the MESSIER side. There is more to cancel, and the target is a fixed thing to aim
+ *   at. Starting from the simple side means inventing complexity with nothing to guide you.
+ *
+ * The author supplies the chain. This module's job is to serve the menu, judge a choice, and refuse
+ * to ship a broken chain (see `proofProblems`).
+ */
+/** One move that can appear in the menu. */
+interface Move {
+  id: string;
+  /** How it reads in the menu, e.g. "Replace 1 + tan²θ with sec²θ". */
+  label: string;
+}
+/** A move that is legal here but does not advance the proof, and why. */
+interface Detour {
+  move: string;
+  why: string;
+}
+interface ProofStep {
+  /** The expression before this step, as LaTeX. */
+  from: string;
+  /** Id of the move that advances the proof. */
+  move: string;
+  /** The expression after it. */
+  to: string;
+  /** Why this was the move to reach for. Shown only once it has been chosen. */
+  why: string;
+  /** Legal moves that go nowhere from here. The menu is built from these plus the real one. */
+  detours?: Detour[];
+}
+interface Proof {
+  /** The identity being proved, as LaTeX. */
+  claim: string;
+  /** Which side the working starts from, and therefore which side is the target. */
+  start: 'lhs' | 'rhs';
+  /** The target the chain must arrive at. */
+  target: string;
+  steps: ProofStep[];
+}
+/** The choices to offer at one step: the move that works, plus the ones that do not. */
+declare function menuFor(step: ProofStep, index: number): string[];
+type Verdict = {
+  kind: 'advance';
+  to: string;
+  why: string;
+} | {
+  kind: 'detour';
+  why: string;
+} | {
+  kind: 'unavailable';
+};
+/** Judge one choice at one step. */
+declare function judge(step: ProofStep, moveId: string): Verdict;
+/** The lines of working produced so far, starting from the opening expression. */
+declare function workingAfter(proof: Proof, completed: number): string[];
+declare const isComplete: (proof: Proof, completed: number) => boolean;
+/**
+ * Authoring mistakes that would ship a proof which does not prove anything.
+ *
+ * The connectedness check is the one that earns its keep. An author who improves the wording of one
+ * line and forgets the next line's `from` produces a proof that silently jumps: every step still
+ * looks reasonable on its own, the learner is graded correct throughout, and the chain proves
+ * nothing. That failure is invisible in review and impossible to see in a screenshot.
+ */
+declare function proofProblems(proof: Proof, moves: readonly Move[]): string[];
+//#endregion
+export { Detour, Move, Proof, ProofStep, Verdict, isComplete, judge, menuFor, proofProblems, workingAfter };

package/dist/math/identity-proof/core.mjs

@@ -0,0 +1,70 @@
+//#region src/math/identity-proof/core.ts
+/**
+* A tiny deterministic shuffle.
+*
+* The menu order must not give the answer away by always listing the right move first, and it must
+* be IDENTICAL on the server and in the browser or React discards the markup and the lab flickers
+* on load. So no Math.random: the order is a pure function of the step index and the move ids.
+*/
+function stableOrder(items, keyOf, salt) {
+	const score = (key) => {
+		let h = salt * 2654435761;
+		for (let i = 0; i < key.length; i++) h = (h ^ key.charCodeAt(i)) * 16777619;
+		return h >>> 0;
+	};
+	return [...items].sort((a, b) => score(keyOf(a)) - score(keyOf(b)));
+}
+/** The choices to offer at one step: the move that works, plus the ones that do not. */
+function menuFor(step, index) {
+	return stableOrder([step.move, ...(step.detours ?? []).map((d) => d.move)], (id) => id, index + 1);
+}
+/** Judge one choice at one step. */
+function judge(step, moveId) {
+	if (moveId === step.move) return {
+		kind: "advance",
+		to: step.to,
+		why: step.why
+	};
+	const detour = step.detours?.find((d) => d.move === moveId);
+	return detour ? {
+		kind: "detour",
+		why: detour.why
+	} : { kind: "unavailable" };
+}
+/** The lines of working produced so far, starting from the opening expression. */
+function workingAfter(proof, completed) {
+	const lines = [proof.steps[0]?.from ?? proof.target];
+	for (let i = 0; i < Math.min(completed, proof.steps.length); i++) lines.push(proof.steps[i].to);
+	return lines;
+}
+const isComplete = (proof, completed) => completed >= proof.steps.length;
+/**
+* Authoring mistakes that would ship a proof which does not prove anything.
+*
+* The connectedness check is the one that earns its keep. An author who improves the wording of one
+* line and forgets the next line's `from` produces a proof that silently jumps: every step still
+* looks reasonable on its own, the learner is graded correct throughout, and the chain proves
+* nothing. That failure is invisible in review and impossible to see in a screenshot.
+*/
+function proofProblems(proof, moves) {
+	const problems = [];
+	const known = new Set(moves.map((m) => m.id));
+	if (!proof.steps.length) problems.push("a proof needs at least one step");
+	for (const [i, step] of proof.steps.entries()) {
+		if (!known.has(step.move)) problems.push(`step ${i + 1} uses the unknown move "${step.move}"`);
+		for (const detour of step.detours ?? []) {
+			if (!known.has(detour.move)) problems.push(`step ${i + 1} offers the unknown move "${detour.move}"`);
+			if (detour.move === step.move) problems.push(`step ${i + 1} lists its own correct move as a detour`);
+		}
+		const next = proof.steps[i + 1];
+		if (next && next.from !== step.to) problems.push(`step ${i + 1} ends at "${step.to}" but step ${i + 2} starts at "${next.from}"`);
+	}
+	const last = proof.steps.at(-1);
+	if (last && last.to !== proof.target) problems.push(`the last step ends at "${last.to}", which is not the target "${proof.target}"`);
+	const noChoice = proof.steps.filter((s) => !s.detours?.length).length;
+	if (noChoice) problems.push(`${noChoice} step(s) offer no alternative move, so there is nothing to decide`);
+	return problems;
+}
+
+//#endregion
+export { isComplete, judge, menuFor, proofProblems, workingAfter };

package/dist/math/identity-proof/default-proof.d.mts

@@ -0,0 +1,14 @@
+import { Move, Proof } from "./core.mjs";
+
+//#region src/math/identity-proof/default-proof.d.ts
+/**
+ * The move vocabulary.
+ *
+ * Phrased as ACTIONS rather than identity names. "Use the Pythagorean identity" is a label a
+ * learner can pick without understanding; "Replace 1 - cos²θ with sin²θ" states what will happen
+ * to the expression, which is the level at which the choice is actually made.
+ */
+declare const DEFAULT_MOVES: Move[];
+declare const DEFAULT_PROOF: Proof;
+//#endregion
+export { DEFAULT_MOVES, DEFAULT_PROOF };

package/dist/math/identity-proof/default-proof.mjs

@@ -0,0 +1,56 @@
+//#region src/math/identity-proof/default-proof.ts
+/**
+* The move vocabulary.
+*
+* Phrased as ACTIONS rather than identity names. "Use the Pythagorean identity" is a label a
+* learner can pick without understanding; "Replace 1 - cos²θ with sin²θ" states what will happen
+* to the expression, which is the level at which the choice is actually made.
+*/
+const DEFAULT_MOVES = [
+	{
+		id: "to-sin-cos",
+		label: "Write every function in terms of sin θ and cos θ"
+	},
+	{
+		id: "cancel",
+		label: "Cancel a common factor"
+	},
+	{
+		id: "square-both",
+		label: "Square both sides"
+	},
+	{
+		id: "pythagoras",
+		label: "Replace 1 − cos²θ with sin²θ"
+	}
+];
+const DEFAULT_PROOF = {
+	claim: "\\tan\\theta\\cos\\theta \\equiv \\sin\\theta",
+	start: "lhs",
+	target: "\\sin\\theta",
+	steps: [{
+		from: "\\tan\\theta\\cos\\theta",
+		move: "to-sin-cos",
+		to: "\\frac{\\sin\\theta}{\\cos\\theta} \\times \\cos\\theta",
+		why: "tan θ is a definition, so rewriting it leaves one expression in two functions.",
+		detours: [{
+			move: "square-both",
+			why: "Squaring acts on both sides at once, which assumes the identity being proved."
+		}, {
+			move: "pythagoras",
+			why: "There is no 1 − cos²θ here to replace."
+		}]
+	}, {
+		from: "\\frac{\\sin\\theta}{\\cos\\theta} \\times \\cos\\theta",
+		move: "cancel",
+		to: "\\sin\\theta",
+		why: "cos θ divides out top and bottom, leaving the right-hand side.",
+		detours: [{
+			move: "to-sin-cos",
+			why: "Everything is already in sin θ and cos θ."
+		}]
+	}]
+};
+
+//#endregion
+export { DEFAULT_MOVES, DEFAULT_PROOF };

package/dist/math/identity-proof/index.d.mts

@@ -0,0 +1,3 @@
+import { Detour, Move, Proof, ProofStep, Verdict, isComplete, judge, menuFor, proofProblems, workingAfter } from "./core.mjs";
+import { IdentityProof, IdentityProofProps } from "./preset.mjs";
+import { DEFAULT_MOVES, DEFAULT_PROOF } from "./default-proof.mjs";

package/dist/math/identity-proof/preset.d.mts

@@ -0,0 +1,20 @@
+import { Move, Proof } from "./core.mjs";
+import { ReactNode } from "react";
+
+//#region src/math/identity-proof/preset.d.ts
+interface IdentityProofProps {
+  proof?: Proof;
+  moves?: Move[];
+  title?: string;
+  prompt?: string;
+  activity?: string;
+}
+declare function IdentityProof({
+  proof,
+  moves,
+  title,
+  prompt,
+  activity
+}?: IdentityProofProps): ReactNode;
+//#endregion
+export { IdentityProof, IdentityProofProps };

package/dist/math/identity-proof/preset.mjs

@@ -0,0 +1,147 @@
+'use client';
+
+import { Tex } from "../../core/tex.mjs";
+import { Chip } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { LiveRegion, Readout } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { isComplete, judge, menuFor, proofProblems, workingAfter } from "./core.mjs";
+import { DEFAULT_MOVES, DEFAULT_PROOF } from "./default-proof.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/math/identity-proof/preset.tsx
+/**
+* IdentityProof, where the learner picks the MOVE instead of watching it.
+*
+* `Derivation` shows the next line and justifies it. That is right for a formula with one route and
+* wrong for proving an identity, where the examinable difficulty is not executing a step but
+* deciding which step to reach for. A learner who has watched five proofs still freezes at line
+* one, because nothing they watched was a decision.
+*
+* So the menu here mixes the move that works with moves that are legal algebra and go nowhere, and
+* a detour is answered with the REASON it goes nowhere rather than a buzzer. "Squaring both sides
+* assumes the thing you are proving" and "the right idea one step too early" are the sentences that
+* actually transfer, and no worked example contains them, because a worked example never takes the
+* wrong turning.
+*
+* The two rules of the game sit permanently on screen rather than in the feedback, because they are
+* what a learner forgets under pressure: work one side only, and start from the messier side.
+* See ./core.ts for why the chain is checked for connectedness at author time.
+*/
+function IdentityProof({ proof = DEFAULT_PROOF, moves = DEFAULT_MOVES, title = "Prove the identity: choosing the move is the skill", prompt = "Every move below is legal algebra. Only one gets closer to the other side, and the rest are answered with the reason they lead nowhere.", activity = "identity-proof" } = {}) {
+	const [done, setDone] = useState(0);
+	const [verdict, setVerdict] = useState(null);
+	const [detours, setDetours] = useState(0);
+	const labelOf = (id) => moves.find((m) => m.id === id)?.label ?? id;
+	const finished = isComplete(proof, done);
+	const step = proof.steps[done];
+	const lines = workingAfter(proof, done);
+	useCheckpoint({
+		solved: finished,
+		activity
+	});
+	const choose = (moveId) => {
+		if (!step) return;
+		const result = judge(step, moveId);
+		setVerdict(result);
+		if (result.kind === "advance") setDone((n) => n + 1);
+		else if (result.kind === "detour") setDetours((n) => n + 1);
+	};
+	const problems = proofProblems(proof, moves);
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "math-identity-proof",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Trigonometry",
+				title,
+				description: prompt
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsxs("strong", { children: [
+					"step ",
+					Math.min(done + 1, proof.steps.length),
+					" of ",
+					proof.steps.length
+				] }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					"working the ",
+					proof.start === "lhs" ? "left" : "right",
+					" side"
+				] }),
+				/* @__PURE__ */ jsx("span", { children: detours === 0 ? "no detours yet" : `${detours} detour${detours === 1 ? "" : "s"} explained` })
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [
+				/* @__PURE__ */ jsxs(Activity.Canvas, {
+					label: "The identity and the working so far",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "lab-proof-claim",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "lab-eyebrow",
+								children: "Prove that"
+							}), /* @__PURE__ */ jsx(Tex, {
+								tex: proof.claim,
+								block: true
+							})]
+						}),
+						/* @__PURE__ */ jsx("ol", {
+							className: "lab-proof-working",
+							children: lines.map((line, i) => /* @__PURE__ */ jsxs("li", {
+								"data-latest": i === lines.length - 1,
+								children: [/* @__PURE__ */ jsx(Tex, {
+									tex: line,
+									block: true
+								}), i > 0 ? /* @__PURE__ */ jsx("span", {
+									className: "lab-proof-move",
+									children: labelOf(proof.steps[i - 1].move)
+								}) : null]
+							}, i))
+						}),
+						finished ? /* @__PURE__ */ jsxs("p", {
+							className: "lab-proof-qed",
+							children: [
+								"This is the right-hand side, so the identity is proved. Write ",
+								/* @__PURE__ */ jsx("strong", { children: "as required" }),
+								"."
+							]
+						}) : null
+					]
+				}),
+				/* @__PURE__ */ jsx(Activity.Dock, { children: step ? /* @__PURE__ */ jsxs("div", {
+					className: "lab-proof-choice",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "lab-field-label",
+						children: "What do you do next?"
+					}), /* @__PURE__ */ jsx("div", {
+						className: "lab-proof-menu",
+						children: menuFor(step, done).map((id) => /* @__PURE__ */ jsx(Chip, {
+							selected: false,
+							onClick: () => choose(id),
+							children: labelOf(id)
+						}, id))
+					})]
+				}) : null }),
+				verdict ? /* @__PURE__ */ jsx(Readout, {
+					value: verdict.kind === "advance" ? "That is the move" : "Legal, but it goes nowhere",
+					sub: verdict.kind === "unavailable" ? "That move is not on this menu." : verdict.why
+				}) : /* @__PURE__ */ jsx(Readout, {
+					value: `Start from the ${proof.start === "lhs" ? "left" : "right"}-hand side`,
+					sub: "It is the messier one, so there is something to cancel and a fixed target to aim at."
+				})
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "The two rules" }), /* @__PURE__ */ jsxs("div", { children: [
+				"Work on ",
+				/* @__PURE__ */ jsx("strong", { children: "one side only" }),
+				". Anything done to both sides at once, such as squaring or cross-multiplying, assumes the identity you are trying to prove and scores nothing. And start from the ",
+				/* @__PURE__ */ jsx("strong", { children: "messier side" }),
+				": it has terms to cancel, and the simpler side sits there as the target you are aiming at.",
+				problems.length ? ` Authoring note: ${problems.join("; ")}.` : ""
+			] })] }),
+			/* @__PURE__ */ jsx(LiveRegion, { children: finished ? "Proof complete." : `Step ${done + 1} of ${proof.steps.length}. ${verdict?.kind === "detour" ? "That move does not advance the proof." : ""}` })
+		]
+	});
+}
+
+//#endregion
+export { IdentityProof };