@classytic/labs 0.4.0 → 0.5.0

package/dist/math/functions/modulus-function.mjs

@@ -0,0 +1,426 @@
+'use client';
+
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { Stat } from "../../kit/frame.mjs";
+import { ChallengeCard, useChallenge, useCheckpoint } from "../../kit/pedagogy.mjs";
+import { CoordPlane, num } from "../../kit/coords.mjs";
+import { useMemo } from "react";
+import { Dot, Label, Polyline, Segment } from "@classytic/stage";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { compileExpr, roots, toLatex } from "@classytic/stage/math";
+import { evaluatePiecewise, intervalsContain, piecewiseContinuity, piecewiseDomain } from "@classytic/stage/math/functions";
+
+//#region src/math/functions/modulus-function.tsx
+/**
+* ModulusFunctionLab — y = |f(x)| as the kernel's 2-branch `PiecewiseFn`, and the
+* misconception it attacks: taking the modulus does NOT distort the whole curve. It
+* reflects ONLY the part where f(x) < 0; wherever f is already non-negative, |f(x)| IS
+* f(x), the same curve, unchanged.
+*
+* BUILDING THE PIECEWISE STRUCTURE
+* ---------------------------------
+* The kernel's `PiecewiseFn` needs an author to SUPPLY the branch conditions — it has no
+* "sign intervals of an arbitrary expression" API, so this file finds where f changes sign
+* (via `stage.roots`, a numeric root-finder, same one `analysis.ts` exports for any lab that
+* needs zero-crossings) and buckets the domain into sign-runs. That construction step is
+* unavoidable authoring work, not a re-derivation of anything piecewise.ts already does.
+* Once the two-branch structure exists — `f(x)` on the non-negative runs, `-(f(x))` on the
+* negative runs — EVERY displayed number comes from the kernel directly:
+*   - the g = |f| curve is sampled via `evaluatePiecewise`, not `Math.abs(f(x))`;
+*   - which branch "fired" at a marked point is read via `intervalsContain` against the
+*     branch's own condition, the same interval-membership test the kernel exports;
+*   - the continuity verdict at each kink (does the corner hide a jump?) comes straight from
+*     `piecewiseContinuity`'s left/right-limit comparison — this file never computes a jump.
+*
+* PREDICT, THEN REVEAL
+* ----------------------
+* The figure is visible from the start (an intelligible starting state, not a blank plane):
+* f draws faint and dashed, g draws solid and two-toned — unchanged where it tracks f,
+* highlighted where it has been reflected. That shape IS the hook. What stays gated behind
+* the predict questions is the kernel's own confirmation: the exact branch equation at two
+* marked points, and the exact (near-zero) jump size at the kink — proof, not just a picture,
+* that the sharp-looking corner is continuous. Continuity is the strict claim here; this lab
+* never claims the kink is SMOOTH (it isn't — see piecewise.ts's own docblock).
+*/
+const C_F = "var(--stage-muted)";
+const C_UNCHANGED = "var(--stage-fg)";
+const C_REFLECTED = "var(--stage-accent)";
+const C_OK = "var(--stage-good)";
+const N = 400;
+/** Sign-runs of f across [d0, d1]: buckets between consecutive zero-crossings, merging any
+*  run that borders an equal-sign neighbour (a touch-not-cross zero, e.g. f = x² at x = 0,
+*  changes nothing about which branch applies either side of it). */
+function signRuns(fFn, d0, d1, zeros) {
+	const eps = Math.max(1e-9, (d1 - d0) * 1e-6);
+	const inside = zeros.filter((z) => Number.isFinite(z) && z > d0 + eps && z < d1 - eps).sort((a, b) => a - b);
+	const bp = [d0];
+	for (const z of inside) if (z - bp[bp.length - 1] > eps) bp.push(z);
+	if (d1 - bp[bp.length - 1] > eps) bp.push(d1);
+	const runs = [];
+	for (let i = 0; i < bp.length - 1; i++) {
+		const lo = bp[i];
+		const hi = bp[i + 1];
+		const sign = fFn((lo + hi) / 2) >= 0 ? "pos" : "neg";
+		const last = runs[runs.length - 1];
+		if (last && last.sign === sign) last.hi = hi;
+		else runs.push({
+			lo,
+			hi,
+			sign
+		});
+	}
+	return runs;
+}
+function branchQuestion(id, x, sign, value) {
+	const xs = num(x);
+	return {
+		id,
+		prompt: `At x = ${xs}, does |f(x)| equal f(x) or −f(x)?`,
+		choices: [{
+			value: "pos",
+			label: `|f(x)| = f(x) — f is already ≥ 0 here`
+		}, {
+			value: "neg",
+			label: `|f(x)| = −f(x) — f is negative here, so it gets reflected`
+		}],
+		answer: sign,
+		explain: sign === "pos" ? `f(${xs}) ≥ 0, so the kernel's own branch selection picks the f(x) branch directly: |f(${xs})| = f(${xs}) = ${num(value)}.` : `f(${xs}) < 0, so the kernel's own branch selection picks the −f(x) branch: |f(${xs})| = −f(${xs}) = ${num(value)}. This is the reflection, and only this x-region gets it.`,
+		tryAgain: "Look at whether the dashed reference curve f is above or below the x-axis at that x."
+	};
+}
+function continuityQuestion(at) {
+	const xs = num(at);
+	return {
+		id: `kink-${at}`,
+		prompt: `The graph looks like it has a sharp corner at x = ${xs}. Is |f(x)| actually continuous there?`,
+		choices: [{
+			value: "yes",
+			label: "Yes — continuous, just not smooth (a corner, not a break)"
+		}, {
+			value: "no",
+			label: "No — there is a jump in the graph at that corner"
+		}],
+		answer: "yes",
+		explain: "The kernel compares the left branch’s limit and the right branch’s limit at the boundary: both land on the same value, so the jump is zero. The curve is continuous through the corner — it just stops being smooth there (the two branches meet at different slopes).",
+		tryAgain: "The two branches meet at f(x) = 0 from both sides — evaluate each branch just either side of the corner."
+	};
+}
+function ModulusFunctionLab({ f = "x^2-4", domain = [-4, 4], probeA, probeB, revealed = false, height = 380, title = "The graph of |f(x)|", prompt = "f is drawn faint and dashed. |f(x)| is drawn solid. Predict which branch fires at each marked point, then let the kernel reveal its own evidence — including whether the sharp-looking corner is actually continuous." } = {}) {
+	const [d0, d1] = domain;
+	const compiled = (() => {
+		const c = compileExpr(f);
+		return c.error !== void 0 ? null : c;
+	})();
+	const negCompiled = (() => {
+		const c = compileExpr(`-(${f})`);
+		return c.error !== void 0 ? null : c;
+	})();
+	const fFn = useMemo(() => compiled ? (x) => compiled.fn({ x }) : null, [compiled]);
+	const zeros = useMemo(() => {
+		if (!fFn) return [];
+		return roots(fFn, d0, d1);
+	}, [
+		fFn,
+		d0,
+		d1
+	]);
+	const runs = useMemo(() => {
+		if (!fFn) return [];
+		return signRuns(fFn, d0, d1, zeros);
+	}, [
+		fFn,
+		d0,
+		d1,
+		zeros
+	]);
+	const pieces = useMemo(() => {
+		if (!compiled || !negCompiled) return [];
+		return runs.map((r) => ({
+			condition: {
+				lo: r.lo,
+				hi: r.hi,
+				closedLo: true,
+				closedHi: true
+			},
+			expr: r.sign === "pos" ? compiled.ast : negCompiled.ast,
+			sign: r.sign
+		}));
+	}, [
+		runs,
+		compiled,
+		negCompiled
+	]);
+	const domainInfo = useMemo(() => pieces.length ? piecewiseDomain(pieces, [d0, d1]) : null, [
+		pieces,
+		d0,
+		d1
+	]);
+	const continuity = useMemo(() => pieces.length ? piecewiseContinuity(pieces) : [], [pieces]);
+	const kink = continuity[0] ?? null;
+	const branchAt = (x) => pieces.find((p) => intervalsContain([p.condition], x)) ?? null;
+	const fPoints = useMemo(() => {
+		if (!fFn) return [];
+		const dx = (d1 - d0) / N;
+		const out = [];
+		for (let i = 0; i <= N; i++) {
+			const x = d0 + dx * i;
+			const y = fFn(x);
+			if (Number.isFinite(y)) out.push({
+				x,
+				y
+			});
+		}
+		return out;
+	}, [
+		fFn,
+		d0,
+		d1
+	]);
+	/** g = |f|, sampled via the kernel's own evaluatePiecewise — one Polyline per sign-run so
+	*  the reflected runs can be drawn in a visually distinct colour from the untouched runs. */
+	const gRuns = useMemo(() => {
+		if (!pieces.length) return [];
+		return runs.map((r) => {
+			const steps = Math.max(2, Math.round(N * (r.hi - r.lo) / Math.max(1e-9, d1 - d0)));
+			const pts = [];
+			for (let i = 0; i <= steps; i++) {
+				const x = r.lo + (r.hi - r.lo) * i / steps;
+				const y = evaluatePiecewise(pieces, x);
+				if (Number.isFinite(y)) pts.push({
+					x,
+					y
+				});
+			}
+			return {
+				sign: r.sign,
+				points: pts
+			};
+		});
+	}, [
+		runs,
+		pieces,
+		d0,
+		d1
+	]);
+	const yLo = fPoints.length ? Math.min(0, ...fPoints.map((p) => p.y)) : d0;
+	const yHiF = fPoints.length ? Math.max(...fPoints.map((p) => p.y)) : d1;
+	const yHiG = gRuns.length ? Math.max(...gRuns.flatMap((r) => r.points.map((p) => p.y))) : yHiF;
+	const yHi = Math.max(yHiF, yHiG);
+	const yPad = Math.max(1, (yHi - yLo) * .18);
+	const vMin = yLo - yPad;
+	const vMax = yHi + yPad;
+	const defaultProbeA = d0 + (d1 - d0) * .15;
+	const defaultProbeB = (d0 + d1) / 2;
+	const pA = probeA ?? defaultProbeA;
+	const pB = probeB ?? defaultProbeB;
+	const branchA = branchAt(pA);
+	const branchB = branchAt(pB);
+	const valueA = pieces.length ? evaluatePiecewise(pieces, pA) : NaN;
+	const valueB = pieces.length ? evaluatePiecewise(pieces, pB) : NaN;
+	const questions = useMemo(() => {
+		const qs = [];
+		if (branchA) qs.push(branchQuestion(`probe-a-${pA}`, pA, branchA.sign, valueA));
+		if (branchB) qs.push(branchQuestion(`probe-b-${pB}`, pB, branchB.sign, valueB));
+		if (kink) qs.push(continuityQuestion(kink.at));
+		return qs;
+	}, [
+		branchA,
+		branchB,
+		kink,
+		pA,
+		pB,
+		valueA,
+		valueB
+	]);
+	const predict = useChallenge(questions);
+	const locked = revealed ? false : !predict.answeredAll;
+	useCheckpoint({
+		solved: predict.allCorrect,
+		activity: "modulus-function.predict",
+		attemptKey: `${f}|${d0}|${d1}`
+	});
+	const fLatex = compiled ? toLatex(compiled.ast) : f;
+	const gLatex = compiled ? `|f(x)| = \\begin{cases} ${toLatex(compiled.ast)} & f(x) \\ge 0 \\\\ -\\left(${toLatex(compiled.ast)}\\right) & f(x) < 0 \\end{cases}` : "";
+	const figure = /* @__PURE__ */ jsxs(CoordPlane, {
+		view: {
+			xMin: d0 - (d1 - d0) * .08,
+			xMax: d1 + (d1 - d0) * .08,
+			yMin: vMin,
+			yMax: vMax
+		},
+		height,
+		preserveAspect: false,
+		ariaLabel: `Graph of f as a faint dashed curve, and |f(x)| as a solid curve coloured by whether it has been reflected, for f(x) = ${f}`,
+		children: [
+			/* @__PURE__ */ jsx(Polyline, {
+				points: fPoints,
+				color: C_F,
+				weight: 2,
+				dashed: true
+			}),
+			gRuns.map((r, i) => /* @__PURE__ */ jsx(Polyline, {
+				points: r.points,
+				color: r.sign === "pos" ? C_UNCHANGED : C_REFLECTED,
+				weight: 3
+			}, i)),
+			continuity.map((b, i) => /* @__PURE__ */ jsx(Dot, {
+				x: b.at,
+				y: 0,
+				r: locked ? 5 : 7,
+				color: locked ? C_F : C_OK
+			}, i)),
+			!locked && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(Dot, {
+					x: pA,
+					y: valueA,
+					r: 7,
+					color: branchA?.sign === "pos" ? C_UNCHANGED : C_REFLECTED
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: pA,
+					y: valueA,
+					text: `x=${num(pA)}`,
+					size: 11,
+					dy: valueA >= 0 ? -14 : 16
+				}),
+				/* @__PURE__ */ jsx(Dot, {
+					x: pB,
+					y: valueB,
+					r: 7,
+					color: branchB?.sign === "pos" ? C_UNCHANGED : C_REFLECTED
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: pB,
+					y: valueB,
+					text: `x=${num(pB)}`,
+					size: 11,
+					dy: valueB >= 0 ? -14 : 16
+				}),
+				kink && /* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: kink.at,
+						y: vMin
+					},
+					to: {
+						x: kink.at,
+						y: vMax
+					},
+					color: C_OK,
+					weight: 1,
+					dashed: true
+				})
+			] })
+		]
+	});
+	const aside = /* @__PURE__ */ jsxs("div", {
+		className: "math-aside-stack",
+		children: [
+			/* @__PURE__ */ jsx(Stat, {
+				label: "f(x)",
+				value: /* @__PURE__ */ jsx(Tex$1, { tex: fLatex })
+			}),
+			/* @__PURE__ */ jsx(Stat, {
+				label: "domain",
+				value: `[${num(d0)}, ${num(d1)}]`
+			}),
+			domainInfo && /* @__PURE__ */ jsx(Stat, {
+				label: "dom(|f|)",
+				value: domainInfo.gaps.length === 0 ? "the whole domain — no gaps" : `${domainInfo.gaps.length} gap(s)`,
+				tone: domainInfo.gaps.length === 0 ? "good" : "warn"
+			}),
+			!locked && branchA && /* @__PURE__ */ jsxs("span", {
+				className: "lab-explain",
+				role: "status",
+				children: [
+					"At x = ",
+					num(pA),
+					": |f(x)| = ",
+					branchA.sign === "pos" ? "f(x)" : "−f(x)",
+					" = ",
+					num(valueA),
+					"."
+				]
+			}),
+			!locked && branchB && /* @__PURE__ */ jsxs("span", {
+				className: "lab-explain",
+				role: "status",
+				children: [
+					"At x = ",
+					num(pB),
+					": |f(x)| = ",
+					branchB.sign === "pos" ? "f(x)" : "−f(x)",
+					" = ",
+					num(valueB),
+					"."
+				]
+			}),
+			!locked && kink && /* @__PURE__ */ jsxs("span", {
+				className: "lab-explain",
+				"data-state": kink.continuous ? void 0 : "no",
+				role: "status",
+				children: [
+					"Boundary check at x = ",
+					num(kink.at),
+					": left branch → ",
+					num(kink.leftValue),
+					", right branch → ",
+					num(kink.rightValue),
+					", jump =",
+					" ",
+					num(kink.jump, 6),
+					". ",
+					kink.continuous ? "Continuous — the corner is real, but it is not a break." : "Discontinuous here."
+				]
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "math-modulus-function-activity",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Functions",
+				title,
+				description: prompt
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [/* @__PURE__ */ jsx("strong", { children: "g(x) = |f(x)|" }), /* @__PURE__ */ jsxs("span", { children: [
+				continuity.length,
+				" corner",
+				continuity.length === 1 ? "" : "s",
+				" in this domain"
+			] })] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "f and |f(x)| on one plane",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "lab-predict-gate",
+					children: [!revealed && questions.length > 0 && /* @__PURE__ */ jsx(ChallengeCard, {
+						questions,
+						state: predict,
+						title: "Predict, then reveal the kernel's evidence"
+					}), figure]
+				})
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: "Piecewise evidence",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "trig-lab-stack",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "lab-field-label",
+							children: "g(x) = |f(x)|"
+						}),
+						/* @__PURE__ */ jsx(Tex$1, {
+							tex: gLatex,
+							block: true
+						}),
+						aside
+					]
+				})
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: locked ? "Predict" : "Verdict" }), /* @__PURE__ */ jsx("div", { children: locked ? "The reflected part of the curve is only where f(x) is negative — everywhere else, |f(x)| is exactly f(x). Predict the two marked points, and whether the corner is continuous, to reveal the kernel’s evidence." : "The reflection only happens where f(x) < 0. Every corner in |f(x)| is continuous — the two branches always meet at the same value — it just stops being smooth there." })] }),
+			/* @__PURE__ */ jsx(Activity.LiveRegion, { children: locked ? "Answer the predictions to reveal which branch fires at each marked point, and whether the corner is continuous." : `At x = ${num(pA)}, the branch is ${branchA?.sign === "pos" ? "f of x" : "minus f of x"}. At x = ${num(pB)}, the branch is ${branchB?.sign === "pos" ? "f of x" : "minus f of x"}. ${kink ? kink.continuous ? "The corner is continuous, with zero jump." : "The corner is discontinuous." : ""}` })
+		]
+	});
+}
+
+//#endregion
+export { ModulusFunctionLab };

package/dist/math/fundamental-theorem/preset.mjs

@@ -5,8 +5,8 @@ import { Tex as Tex$1 } from "../../core/tex.mjs";
 import { accumulationAt, derivativeAt, functionViewport, normalizeRange, riemannSlices, valueInRange } from "../calculus/core.mjs";
 import { MathActivity, MathExpressionError, MathResetTransport } from "../activity.mjs";
 import { useEffect, useMemo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Axes, Grid, MovableDot, Plot, Polygon, Segment, Stage } from "@classytic/stage";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { compileExpr, evaluate, toLatex } from "@classytic/stage/math";
 
 //#region src/math/fundamental-theorem/preset.tsx

package/dist/math/geometry-foundations/activity.mjs

@@ -20,7 +20,8 @@ const geometryFoundationsActivity = defineAuthoredActivity({
 			id: "predict",
 			phase: "predict",
 			title: "Predict the invariant",
-			lead: "Commit before changing the shape."
+			lead: "Commit before changing the shape.",
+			success: "decomposition"
 		},
 		{
 			id: "manipulate",
@@ -58,11 +59,13 @@ const geometryFoundationsActivity = defineAuthoredActivity({
 			},
 			{
 				value: "appearance",
-				label: "A visually convincing picture is always a proof"
+				label: "A visually convincing picture is always a proof",
+				feedback: "A picture that merely LOOKS right can still hide a gap or overlap, especially for one specific case that happens to look tidy. What makes a dissection an actual proof is that every piece is accounted for, with no overlap or gap, for every value of the parameters, not just the one drawn."
 			},
 			{
 				value: "measure",
-				label: "Measurement alone proves every possible case"
+				label: "Measurement alone proves every possible case",
+				feedback: "Measuring one construction can confirm a formula for the numbers you happened to pick, but it cannot rule out every other case. The dissection proves it in general, because the same four pieces (or n-2 triangles) exist for any a, b, or number of sides."
 			}
 		],
 		answer: "preserves",

package/dist/math/geometry-foundations/core.mjs

@@ -8,7 +8,7 @@ function geometryFoundationState(input) {
 	if (input.mode === "pythagorean") {
 		const c = Math.hypot(input.sideA, input.sideB);
 		return {
-			headline: `${input.sideA ** 2} + ${input.sideB ** 2} = ${Number(c.toFixed(4)) ** 2}`,
+			headline: `${input.sideA ** 2} + ${input.sideB ** 2} = ${input.sideA ** 2 + input.sideB ** 2}`,
 			formula: "a² + b² = c²",
 			values: [{
 				label: "leg squares",

package/dist/math/geometry-foundations/preset.d.mts

@@ -3,7 +3,14 @@ import { GeometryFoundationMode } from "./core.mjs";
 import { ReactNode } from "react";
 //#region src/math/geometry-foundations/preset.d.ts
 interface GeometryFoundationsLabProps {
+  /** The construction to open on. Passed without `modes`, it LOCKS the lab to that construction. */
   mode?: GeometryFoundationMode;
+  /**
+   * The constructions the menu offers. One entry hides the menu entirely. Omitted: every
+   * construction when no `mode` is passed, only `mode` when one is (a lesson about Pythagoras
+   * should not let the learner wander off to circle theorems).
+   */
+  modes?: GeometryFoundationMode[];
   sideA?: number;
   sideB?: number;
   centralAngle?: number;
@@ -13,6 +20,6 @@ interface GeometryFoundationsLabProps {
   objectives?: string[];
   activity?: AuthoredActivity;
 }
-declare function GeometryFoundationsLab({ mode: initialMode, sideA: initialA, sideB: initialB, centralAngle: initialAngle, sides: initialSides, title, prompt, objectives, activity }?: GeometryFoundationsLabProps): ReactNode;
+declare function GeometryFoundationsLab({ mode: modeProp, modes: modesProp, sideA: initialA, sideB: initialB, centralAngle: initialAngle, sides: initialSides, title, prompt, objectives, activity }?: GeometryFoundationsLabProps): ReactNode;
 //#endregion
 export { GeometryFoundationsLab, GeometryFoundationsLabProps };