@classytic/labs 0.1.0 → 0.2.0

package/dist/math/transform/preset.mjs

@@ -0,0 +1,343 @@
+'use client';
+
+import { LabFrame } from "../../kit/frame.mjs";
+import { useReducedMotion } from "../../kit/anim.mjs";
+import { CoordPlane } from "../../kit/coords.mjs";
+import { Blank, SlotTray, useSlotFill } from "../../kit/slot-fill.mjs";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Circle, Label, Point, Polygon, Polyline, Vector, vec } from "@classytic/stage";
+
+//#region src/math/transform/preset.tsx
+/**
+* TransformLab, the geometry-transformation lab that was missing entirely: translate,
+* reflect, rotate, enlarge, one authorable lab switched by `kind` (the same one-lab-many-
+* modes shape as StraightLineLab). The learner reads the move, fills its parameters from a
+* tile tray ("translate by (▢,▢)", "rotate ▢ about O"), and on a correct fill the shape
+* FLIES to the ghost targets, the reward that makes "send the points to the targets" land.
+*
+* Almost no new engine code: the math is stage core (`vec.rotateAbout` / `vec.lerp` + a
+* 6-line applyTf), the drawing is `Polygon`/`Point`/`Circle`/`Vector`, and the answer UI is
+* the shared inline slot engine (`useSlotFill` + `Blank` + `SlotTray`). A creator sets the
+* shape, the transform, and the distractor tiles, no code.
+*/
+const C_SRC = "var(--stage-accent)";
+const C_IMG = "var(--stage-good)";
+const C_GHOST = "var(--stage-muted)";
+/** Apply a transform to a point. Pure, all from stage core math. */
+function applyTf(p, t) {
+	const o = t.about ?? {
+		x: 0,
+		y: 0
+	};
+	switch (t.kind) {
+		case "translate": return {
+			x: p.x + (t.by?.x ?? 0),
+			y: p.y + (t.by?.y ?? 0)
+		};
+		case "reflect":
+			switch (t.axis ?? "y") {
+				case "x": return {
+					x: p.x,
+					y: -p.y
+				};
+				case "y": return {
+					x: -p.x,
+					y: p.y
+				};
+				case "y=x": return {
+					x: p.y,
+					y: p.x
+				};
+				case "y=-x": return {
+					x: -p.y,
+					y: -p.x
+				};
+			}
+			return p;
+		case "rotate": return vec.rotateAbout(p, o, (t.deg ?? 0) * Math.PI / 180);
+		case "enlarge": return {
+			x: o.x + (p.x - o.x) * (t.k ?? 1),
+			y: o.y + (p.y - o.y) * (t.k ?? 1)
+		};
+	}
+}
+const AXIS_LABEL = {
+	x: "x-axis",
+	y: "y-axis",
+	"y=x": "y = x",
+	"y=-x": "y = −x"
+};
+const easeOut = (t) => 1 - (1 - t) ** 3;
+const DEFAULTS = {
+	translate: {
+		kind: "translate",
+		by: {
+			x: 5,
+			y: 1
+		}
+	},
+	reflect: {
+		kind: "reflect",
+		axis: "y"
+	},
+	rotate: {
+		kind: "rotate",
+		deg: 90,
+		about: {
+			x: 0,
+			y: 0
+		}
+	},
+	enlarge: {
+		kind: "enlarge",
+		k: 2,
+		about: {
+			x: 0,
+			y: 0
+		}
+	}
+};
+const PROMPTS = {
+	translate: "Complete the translation to send the shape onto the targets.",
+	reflect: "Pick the mirror line that lands the shape on the targets.",
+	rotate: "Pick the turn (about O) that lands the shape on the targets.",
+	enlarge: "Pick the scale factor (centre O) that lands the shape on the targets."
+};
+function TransformLab(props = {}) {
+	const kind = props.transform?.kind ?? "translate";
+	const tf = props.transform ?? DEFAULTS[kind];
+	const { shape = [
+		{
+			x: -4,
+			y: 0
+		},
+		{
+			x: -2,
+			y: 0
+		},
+		{
+			x: -2,
+			y: 2
+		}
+	], view = {
+		xMin: -6,
+		xMax: 6,
+		yMin: -4,
+		yMax: 6
+	}, height = 380, title = "Transformations", prompt = PROMPTS[kind], activity = `transform-${kind}` } = props;
+	const targets = shape.map((p) => applyTf(p, tf));
+	let slots;
+	let tiles;
+	if (kind === "translate") {
+		const bx = tf.by?.x ?? 0, by = tf.by?.y ?? 0;
+		slots = [{
+			id: "dx",
+			answer: bx
+		}, {
+			id: "dy",
+			answer: by
+		}];
+		const lo = Math.min(-3, bx - 2, by - 2), hi = Math.max(3, bx + 2, by + 2);
+		const pool = new Set([
+			bx,
+			by,
+			...props.distractors ?? []
+		]);
+		for (let v = lo; v <= hi; v++) pool.add(v);
+		tiles = [...pool].sort((a, b) => a - b);
+	} else if (kind === "reflect") {
+		slots = [{
+			id: "axis",
+			answer: AXIS_LABEL[tf.axis ?? "y"]
+		}];
+		tiles = [
+			"x-axis",
+			"y-axis",
+			"y = x",
+			"y = −x"
+		];
+	} else if (kind === "rotate") {
+		slots = [{
+			id: "deg",
+			answer: `${tf.deg ?? 90}°`
+		}];
+		tiles = [
+			"90°",
+			"180°",
+			"270°"
+		];
+	} else {
+		const k = tf.k ?? 2;
+		slots = [{
+			id: "k",
+			answer: String(k)
+		}];
+		tiles = [
+			"2",
+			"3",
+			"4"
+		];
+	}
+	const reduce = useReducedMotion();
+	const [prog, setProg] = useState(0);
+	const fill = useSlotFill(slots, tiles, activity);
+	const solved = fill.solved;
+	useEffect(() => {
+		if (!solved) {
+			setProg(0);
+			return;
+		}
+		if (reduce) {
+			setProg(1);
+			return;
+		}
+		let raf = 0;
+		let start = 0;
+		const tick = (now) => {
+			if (!start) start = now;
+			const e = Math.min(1, (now - start) / 700);
+			setProg(easeOut(e));
+			if (e < 1) raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(raf);
+	}, [solved, reduce]);
+	const current = shape.map((p, i) => vec.lerp(p, targets[i], prog));
+	const isPoly = shape.length >= 3;
+	const about = tf.about ?? {
+		x: 0,
+		y: 0
+	};
+	const figure = /* @__PURE__ */ jsxs(CoordPlane, {
+		view,
+		height,
+		stepX: 1,
+		stepY: 1,
+		ariaLabel: `${title}: ${kind}`,
+		children: [
+			isPoly ? /* @__PURE__ */ jsx(Polyline, {
+				points: [...targets, targets[0]],
+				color: C_GHOST,
+				weight: 1.5,
+				dashed: true,
+				opacity: .7
+			}) : null,
+			targets.map((t, i) => /* @__PURE__ */ jsx(Circle, {
+				center: t,
+				r: .26,
+				color: C_GHOST,
+				weight: 2,
+				fill: "none"
+			}, `t${i}`)),
+			(kind === "rotate" || kind === "enlarge") && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Point, {
+				x: about.x,
+				y: about.y,
+				r: 4,
+				color: C_GHOST
+			}), /* @__PURE__ */ jsx(Label, {
+				x: about.x,
+				y: about.y,
+				text: "O",
+				dx: -10,
+				dy: -8,
+				size: 12,
+				color: C_GHOST
+			})] }),
+			isPoly && /* @__PURE__ */ jsx(Polygon, {
+				points: current,
+				color: solved ? C_IMG : C_SRC,
+				fill: solved ? C_IMG : C_SRC,
+				fillOpacity: .18,
+				weight: 2.5
+			}),
+			current.map((p, i) => /* @__PURE__ */ jsx(Point, {
+				x: p.x,
+				y: p.y,
+				r: 6,
+				color: solved ? C_IMG : C_SRC
+			}, `p${i}`)),
+			kind === "translate" && prog < .05 && shape.map((p, i) => /* @__PURE__ */ jsx(Vector, {
+				tail: p,
+				tip: targets[i],
+				color: C_GHOST,
+				weight: 1.5,
+				opacity: .5
+			}, `v${i}`))
+		]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		footer: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "grid",
+				gap: 12,
+				justifyItems: "center",
+				marginTop: 4
+			},
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					style: {
+						display: "inline-flex",
+						alignItems: "center",
+						gap: 8,
+						flexWrap: "wrap",
+						fontWeight: 700,
+						fontSize: 16
+					},
+					children: [
+						kind === "translate" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							"translate by ( ",
+							/* @__PURE__ */ jsx(Blank, {
+								fill,
+								id: "dx"
+							}),
+							" , ",
+							/* @__PURE__ */ jsx(Blank, {
+								fill,
+								id: "dy"
+							}),
+							" )"
+						] }),
+						kind === "reflect" && /* @__PURE__ */ jsxs(Fragment$1, { children: ["reflect in the ", /* @__PURE__ */ jsx(Blank, {
+							fill,
+							id: "axis",
+							width: 72
+						})] }),
+						kind === "rotate" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							"rotate ",
+							/* @__PURE__ */ jsx(Blank, {
+								fill,
+								id: "deg"
+							}),
+							" anticlockwise about O"
+						] }),
+						kind === "enlarge" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							"enlarge by scale factor ",
+							/* @__PURE__ */ jsx(Blank, {
+								fill,
+								id: "k"
+							}),
+							" , centre O"
+						] })
+					]
+				}),
+				/* @__PURE__ */ jsx(SlotTray, { fill }),
+				solved && /* @__PURE__ */ jsx("p", {
+					role: "status",
+					style: {
+						margin: 0,
+						color: "var(--stage-good)",
+						fontWeight: 700
+					},
+					children: "✓ Landed on the targets."
+				})
+			]
+		}),
+		children: figure
+	});
+}
+
+//#endregion
+export { TransformLab, applyTf };

package/dist/math/triangle-trig/preset.mjs

@@ -11,22 +11,22 @@ import { Label, Segment, Stage } from "@classytic/stage";
 
 //#region src/math/triangle-trig/preset.tsx
 /**
-* TriangleTrig — the first REPRESENTATION plug-in: a thing the graph engine can't
+* TriangleTrig, the first REPRESENTATION plug-in: a thing the graph engine can't
 * draw (a labelled right triangle), authored by config and reusing the shared
-* answer-check seam. Built for the angle-of-elevation/depression family — "from the
+* answer-check seam. Built for the angle-of-elevation/depression family, "from the
 * top of a 15 m tower the angle of depression to a point is 31°, find the distance"
 * (the user's "see the angle and the tree/pole distances"). A 2-D split is clearer
 * (and cheaper) than pseudo-3-D.
 *
 * The creator gives an angle + ONE leg; the engine solves the rest (tan/sin/cos),
 * draws the triangle with every side + the angle labelled, exposes chosen knobs as
-* sliders for intuition, and — with `ask` — grades a typed answer via `checkAnswer`.
+* sliders for intuition, and, with `ask`, grades a typed answer via `checkAnswer`.
 */
 const C_GIVEN = "var(--stage-accent)";
 const C_HYP = "var(--stage-accent-2)";
 const C_CALC = "var(--stage-fg)";
-const fmt$1 = (n) => Number.isFinite(n) ? Math.abs(n) >= 100 ? n.toFixed(0) : n.toFixed(2) : "—";
-function TriangleTrig({ angleDeg = 31, leg = 15, legKind = "opposite", mode = "depression", labels, drive = ["angle"], legMin = 1, legMax, ask, title = "Angle of depression — solve the right triangle", prompt = "The angle, the height and the ground distance are one right triangle: tan θ = opposite / adjacent.", height = 320, activity = "triangle-trig" } = {}) {
+const fmt$1 = (n) => Number.isFinite(n) ? Math.abs(n) >= 100 ? n.toFixed(0) : n.toFixed(2) : ", ";
+function TriangleTrig({ angleDeg = 31, leg = 15, legKind = "opposite", mode = "depression", labels, drive = ["angle"], legMin = 1, legMax, ask, title = "Angle of depression: solve the right triangle", prompt = "The angle, the height and the ground distance are one right triangle: tan θ = opposite / adjacent.", height = 320, activity = "triangle-trig" } = {}) {
 	const [deg, setDeg] = useState(angleDeg);
 	const [len, setLen] = useState(leg);
 	const lab = {
@@ -71,9 +71,15 @@ function TriangleTrig({ angleDeg = 31, leg = 15, legKind = "opposite", mode = "d
 		text: `${name} = ${fmt$1(value)}`,
 		color,
 		size: 12,
+		weight: given ? 700 : 600,
 		dx: off.dx,
 		dy: off.dy
 	});
+	const hyLen = H || 1;
+	const hypOff = {
+		dx: -O / hyLen * 18,
+		dy: -A / hyLen * 18
+	};
 	const figure = /* @__PURE__ */ jsxs(Stage, {
 		view,
 		height,
@@ -153,10 +159,7 @@ function TriangleTrig({ angleDeg = 31, leg = 15, legKind = "opposite", mode = "d
 			sideLabel({
 				x: A / 2,
 				y: O / 2
-			}, lab.hypotenuse, H, C_HYP, false, {
-				dx: -10,
-				dy: -8
-			})
+			}, lab.hypotenuse, H, C_HYP, false, hypOff)
 		]
 	});
 	const aside = /* @__PURE__ */ jsx(Callout, {

package/dist/math/trig/core.d.mts

@@ -0,0 +1,37 @@
+import { toDeg, toRad } from "../../core/util.mjs";
+
+//#region src/math/trig/core.d.ts
+declare namespace core_d_exports {
+  export { TRIG_FNS, TrigFn, castLetter, castPositive, evalTrig, exactTex, isSpecial, normDeg, quadrant, radTex, referenceAngleDeg, sign, toDeg, toRad };
+}
+type TrigFn = 'sin' | 'cos' | 'tan';
+declare const TRIG_FNS: readonly TrigFn[];
+/** Coterminal angle folded into [0, 360). */
+declare const normDeg: (deg: number) => number;
+/** Numeric value (degrees in). tan where cos = 0 → NaN (undefined), not ±∞. */
+declare function evalTrig(fn: TrigFn, deg: number): number;
+/** Quadrant 1..4 of the terminal ray; 0 when it lies ON an axis (0/90/180/270). */
+declare function quadrant(deg: number): 0 | 1 | 2 | 3 | 4;
+/** Reference angle: the acute angle (0..90°) between the terminal ray and the
+ *  x-axis — the angle whose exact value you actually look up. */
+declare function referenceAngleDeg(deg: number): number;
+/** Sign of a trig function at an angle: 1, −1, 0, or NaN (undefined). The CAST
+ *  rule made literal (it is just the sign of x = cos, y = sin in each quadrant). */
+declare function sign(fn: TrigFn, deg: number): number;
+/** The CAST mnemonic: which of sin/cos/tan are POSITIVE in this quadrant.
+ *  Q1 All · Q2 Sin · Q3 Tan · Q4 Cos. (On an axis, falls back to actual signs.) */
+declare function castPositive(deg: number): TrigFn[];
+/** The CAST letter shown in a quadrant: A (all), S (sin), T (tan), C (cos). */
+declare const castLetter: (deg: number) => string;
+/** Is `deg` one of the standard special angles (a multiple of 30° or 45°)? */
+declare const isSpecial: (deg: number) => boolean;
+/**
+ * Exact value of a trig function at a SPECIAL angle, as a LaTeX string (with the
+ * correct quadrant sign), or null if the angle isn't special. e.g.
+ * exactTex('cos', 150) → "-\tfrac{\sqrt3}{2}".
+ */
+declare function exactTex(fn: TrigFn, deg: number): string | null;
+/** A degree angle as an exact radian (LaTeX multiple of π), e.g. 30 → "\tfrac{\pi}{6}". */
+declare function radTex(deg: number): string;
+//#endregion
+export { core_d_exports };

package/dist/math/trig/core.mjs

@@ -0,0 +1,150 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.mjs";
+import { approxEq, gcd, toDeg, toRad } from "../../core/util.mjs";
+
+//#region src/math/trig/core.ts
+/**
+* Trig TEACHING kernel. Stage's expr engine already EVALUATES sin/cos/tan
+* numerically (and plots / differentiates / LaTeX-renders them) — so this layer
+* adds only the things that engine has no notion of, the parts a learner actually
+* struggles with:
+*   • exact special-angle values (sin30 = ½, not 0.4999…),
+*   • the QUADRANT + CAST sign rule (where sin/cos/tan are + / −),
+*   • the reference angle (the acute angle to the x-axis),
+*   • a degree → exact-radian multiple of π.
+*
+* Pure, reuses core/util's toRad/toDeg/gcd/approxEq. Numerically safe: tan at 90°
+* / 270° is reported as "undefined", never ±∞.
+*/
+var core_exports = /* @__PURE__ */ __exportAll({
+	TRIG_FNS: () => TRIG_FNS,
+	castLetter: () => castLetter,
+	castPositive: () => castPositive,
+	evalTrig: () => evalTrig,
+	exactTex: () => exactTex,
+	isSpecial: () => isSpecial,
+	normDeg: () => normDeg,
+	quadrant: () => quadrant,
+	radTex: () => radTex,
+	referenceAngleDeg: () => referenceAngleDeg,
+	sign: () => sign,
+	toDeg: () => toDeg,
+	toRad: () => toRad
+});
+const TRIG_FNS = [
+	"sin",
+	"cos",
+	"tan"
+];
+/** Coterminal angle folded into [0, 360). */
+const normDeg = (deg) => (deg % 360 + 360) % 360;
+/** Numeric value (degrees in). tan where cos = 0 → NaN (undefined), not ±∞. */
+function evalTrig(fn, deg) {
+	const r = toRad(normDeg(deg));
+	if (fn === "sin") return Math.sin(r);
+	if (fn === "cos") return Math.cos(r);
+	return approxEq(Math.cos(r), 0) ? NaN : Math.tan(r);
+}
+/** Quadrant 1..4 of the terminal ray; 0 when it lies ON an axis (0/90/180/270). */
+function quadrant(deg) {
+	const a = normDeg(deg);
+	if (a === 0 || a === 90 || a === 180 || a === 270) return 0;
+	if (a < 90) return 1;
+	if (a < 180) return 2;
+	if (a < 270) return 3;
+	return 4;
+}
+/** Reference angle: the acute angle (0..90°) between the terminal ray and the
+*  x-axis — the angle whose exact value you actually look up. */
+function referenceAngleDeg(deg) {
+	const a = normDeg(deg);
+	if (a <= 90) return a;
+	if (a <= 180) return 180 - a;
+	if (a <= 270) return a - 180;
+	return 360 - a;
+}
+/** Sign of a trig function at an angle: 1, −1, 0, or NaN (undefined). The CAST
+*  rule made literal (it is just the sign of x = cos, y = sin in each quadrant). */
+function sign(fn, deg) {
+	const v = evalTrig(fn, deg);
+	if (!Number.isFinite(v)) return NaN;
+	return approxEq(v, 0) ? 0 : Math.sign(v);
+}
+/** The CAST mnemonic: which of sin/cos/tan are POSITIVE in this quadrant.
+*  Q1 All · Q2 Sin · Q3 Tan · Q4 Cos. (On an axis, falls back to actual signs.) */
+function castPositive(deg) {
+	const q = quadrant(deg);
+	if (q === 1) return [
+		"sin",
+		"cos",
+		"tan"
+	];
+	if (q === 2) return ["sin"];
+	if (q === 3) return ["tan"];
+	if (q === 4) return ["cos"];
+	return TRIG_FNS.filter((fn) => sign(fn, deg) > 0);
+}
+/** The CAST letter shown in a quadrant: A (all), S (sin), T (tan), C (cos). */
+const castLetter = (deg) => ({
+	1: "A",
+	2: "S",
+	3: "T",
+	4: "C",
+	0: "·"
+})[quadrant(deg)];
+/** Magnitudes at the base reference angles; sign is applied per quadrant. */
+const BASE = {
+	0: {
+		sin: "0",
+		cos: "1",
+		tan: "0"
+	},
+	30: {
+		sin: "\\tfrac12",
+		cos: "\\tfrac{\\sqrt3}{2}",
+		tan: "\\tfrac{1}{\\sqrt3}"
+	},
+	45: {
+		sin: "\\tfrac{\\sqrt2}{2}",
+		cos: "\\tfrac{\\sqrt2}{2}",
+		tan: "1"
+	},
+	60: {
+		sin: "\\tfrac{\\sqrt3}{2}",
+		cos: "\\tfrac12",
+		tan: "\\sqrt3"
+	},
+	90: {
+		sin: "1",
+		cos: "0",
+		tan: "\\text{undefined}"
+	}
+};
+/** Is `deg` one of the standard special angles (a multiple of 30° or 45°)? */
+const isSpecial = (deg) => referenceAngleDeg(deg) in BASE;
+/**
+* Exact value of a trig function at a SPECIAL angle, as a LaTeX string (with the
+* correct quadrant sign), or null if the angle isn't special. e.g.
+* exactTex('cos', 150) → "-\tfrac{\sqrt3}{2}".
+*/
+function exactTex(fn, deg) {
+	const row = BASE[referenceAngleDeg(deg)];
+	if (!row) return null;
+	const base = row[fn];
+	if (base === "\\text{undefined}") return base;
+	const s = sign(fn, deg);
+	if (Number.isNaN(s)) return "\\text{undefined}";
+	if (s === 0) return "0";
+	return s < 0 && base !== "0" ? `-${base}` : base;
+}
+/** A degree angle as an exact radian (LaTeX multiple of π), e.g. 30 → "\tfrac{\pi}{6}". */
+function radTex(deg) {
+	const a = normDeg(deg);
+	if (a === 0) return "0";
+	const g = gcd(a, 180);
+	const p = a / g, q = 180 / g;
+	const top = p === 1 ? "\\pi" : `${p}\\pi`;
+	return q === 1 ? top : `\\tfrac{${top}}{${q}}`;
+}
+
+//#endregion
+export { castLetter, castPositive, core_exports, evalTrig, exactTex, isSpecial, normDeg, quadrant, radTex, referenceAngleDeg, sign };

package/dist/math/trig/diagrams.d.mts

@@ -0,0 +1 @@
+import { ReactNode } from "react";