@classytic/labs 0.2.0 → 0.4.0

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

@@ -1,13 +1,14 @@
 'use client';
 
 import { Slider } from "../../kit/controls.mjs";
-import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { Field, Stat, StatList } from "../../kit/frame.mjs";
 import { AskBox } from "../../kit/pedagogy.mjs";
-import { AngleArc, RightAngleMark } from "../../kit/diagram.mjs";
-import { checkAnswer } from "../../kit/answer-check.mjs";
+import { AngleArc, RightAngleMark } from "../../kit/diagram/annotations.mjs";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Label, Segment, Stage } from "@classytic/stage";
+import { checkAnswer } from "@classytic/stage/math";
 
 //#region src/math/triangle-trig/preset.tsx
 /**
@@ -25,8 +26,14 @@ import { Label, Segment, Stage } from "@classytic/stage";
 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" } = {}) {
+/** Default heading per framing, so `plain` does not inherit the depression wording. */
+const MODE_TITLE = {
+	elevation: "Angle of elevation: solve the right triangle",
+	depression: "Angle of depression: solve the right triangle",
+	plain: "A right triangle, and the ratios its angle fixes"
+};
+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", ratios = false, mode = "depression", labels, drive = ["angle"], legMin = 1, legMax, ask, title, 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 = {
@@ -162,48 +169,37 @@ function TriangleTrig({ angleDeg = 31, leg = 15, legKind = "opposite", mode = "d
 			}, lab.hypotenuse, H, C_HYP, false, hypOff)
 		]
 	});
-	const aside = /* @__PURE__ */ jsx(Callout, {
-		tone: "result",
-		children: /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				gap: 6,
-				fontVariantNumeric: "tabular-nums",
-				fontSize: 13
-			},
+	const aside = /* @__PURE__ */ jsxs(StatList, { children: [
+		/* @__PURE__ */ jsx(Stat, {
+			label: lab.angle,
+			value: `${deg}°`
+		}),
+		/* @__PURE__ */ jsx(Stat, {
+			label: lab.opposite,
+			value: fmt$1(O)
+		}),
+		/* @__PURE__ */ jsx(Stat, {
+			label: lab.adjacent,
+			value: fmt$1(A)
+		}),
+		/* @__PURE__ */ jsx(Stat, {
+			label: "hypotenuse",
+			value: fmt$1(H)
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "math-explain",
 			children: [
-				/* @__PURE__ */ jsxs("span", { children: [
-					lab.angle,
-					" = ",
-					/* @__PURE__ */ jsxs("strong", { children: [deg, "°"] })
-				] }),
-				/* @__PURE__ */ jsxs("span", { children: [
-					lab.opposite,
-					" = ",
-					/* @__PURE__ */ jsx("strong", { children: fmt$1(O) })
-				] }),
-				/* @__PURE__ */ jsxs("span", { children: [
-					lab.adjacent,
-					" = ",
-					/* @__PURE__ */ jsx("strong", { children: fmt$1(A) })
-				] }),
-				/* @__PURE__ */ jsxs("span", { children: ["hypotenuse = ", /* @__PURE__ */ jsx("strong", { children: fmt$1(H) })] }),
-				/* @__PURE__ */ jsxs("span", {
-					style: { color: "var(--stage-muted)" },
-					children: [
-						"tan ",
-						lab.angle,
-						" = ",
-						fmt$1(O),
-						"/",
-						fmt$1(A),
-						" = ",
-						fmt$1(O / A)
-					]
-				})
+				"tan ",
+				lab.angle,
+				" = ",
+				fmt$1(O),
+				"/",
+				fmt$1(A),
+				" = ",
+				fmt$1(O / A)
 			]
 		})
-	});
+	] });
 	const sliders = [];
 	if (drive.includes("angle")) sliders.push(/* @__PURE__ */ jsx(Field, {
 		label: lab.angle,
@@ -229,18 +225,64 @@ function TriangleTrig({ angleDeg = 31, leg = 15, legKind = "opposite", mode = "d
 			ariaLabel: `${legKind} length`
 		})
 	}, "l"));
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		aside,
-		controls: sliders.length ? /* @__PURE__ */ jsx(ControlBar, { children: sliders }) : void 0,
-		footer: ask ? /* @__PURE__ */ jsx(AskBox, {
-			prompt: ask.prompt,
-			placeholder: ask.placeholder,
-			activity,
-			check: (r) => checkAnswer(ask.answer, r)
-		}) : void 0,
-		children: figure
+	const controls = sliders.length ? /* @__PURE__ */ jsx("div", {
+		className: "lab-activity-fields",
+		children: sliders
+	}) : void 0;
+	const challenge = ask ? /* @__PURE__ */ jsx(AskBox, {
+		prompt: ask.prompt,
+		placeholder: ask.placeholder,
+		activity,
+		check: (r) => checkAnswer(ask.answer, r)
+	}) : void 0;
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "math-triangle-trig-activity",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Right-triangle trigonometry",
+				title: title ?? MODE_TITLE[mode],
+				description: prompt
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: mode === "depression" ? "Angle of depression" : mode === "elevation" ? "Angle of elevation" : "Right triangle" }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					"θ ",
+					deg,
+					"°"
+				] }),
+				/* @__PURE__ */ jsxs("span", { children: ["hypotenuse ", fmt$1(H)] }),
+				ratios && /* @__PURE__ */ jsxs("span", { children: ["sin θ ", fmt$1(O / H)] }),
+				ratios && /* @__PURE__ */ jsxs("span", { children: ["cos θ ", fmt$1(A / H)] }),
+				ratios && /* @__PURE__ */ jsxs("span", { children: ["tan θ ", fmt$1(O / A)] })
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Right-triangle model",
+				children: figure
+			}), /* @__PURE__ */ jsxs(Activity.Inspector, {
+				label: "Triangle measurements",
+				children: [aside, controls]
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: "The side opposite θ and the adjacent side determine tan θ; all three lengths remain linked as the inputs change." })] }),
+			challenge && /* @__PURE__ */ jsx("section", {
+				"aria-label": "Triangle question",
+				children: challenge
+			}),
+			/* @__PURE__ */ jsxs(Activity.LiveRegion, { children: [
+				"Angle ",
+				deg,
+				" degrees; opposite ",
+				fmt$1(O),
+				"; adjacent ",
+				fmt$1(A),
+				"; hypotenuse ",
+				fmt$1(H),
+				"."
+			] }),
+			/* @__PURE__ */ jsx(Activity.Transport, { children: /* @__PURE__ */ jsxs("div", {
+				className: "lab-transport-state",
+				children: [/* @__PURE__ */ jsx("strong", { children: drive.length ? "Explore the triangle" : "Authored scenario" }), /* @__PURE__ */ jsxs("span", { children: ["tan θ = ", fmt$1(O / A)] })]
+			}) })
+		]
 	});
 }
 

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

@@ -1,6 +1,4 @@
 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 };
 }
@@ -34,4 +32,4 @@ 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 };
+export { TRIG_FNS, TrigFn, castLetter, castPositive, core_d_exports, evalTrig, exactTex, isSpecial, normDeg, quadrant, radTex, referenceAngleDeg, sign, toDeg, toRad };

package/dist/math/trig/core.mjs

@@ -127,7 +127,8 @@ const isSpecial = (deg) => referenceAngleDeg(deg) in BASE;
 * exactTex('cos', 150) → "-\tfrac{\sqrt3}{2}".
 */
 function exactTex(fn, deg) {
-	const row = BASE[referenceAngleDeg(deg)];
+	const ref = referenceAngleDeg(deg);
+	const row = BASE[ref];
 	if (!row) return null;
 	const base = row[fn];
 	if (base === "\\text{undefined}") return base;
@@ -147,4 +148,4 @@ function radTex(deg) {
 }
 
 //#endregion
-export { castLetter, castPositive, core_exports, evalTrig, exactTex, isSpecial, normDeg, quadrant, radTex, referenceAngleDeg, sign };
+export { TRIG_FNS, castLetter, castPositive, core_exports, evalTrig, exactTex, isSpecial, normDeg, quadrant, radTex, referenceAngleDeg, sign, toDeg, toRad };

package/dist/math/trig/diagrams.mjs

@@ -2,9 +2,9 @@
 
 import { toRad } from "../../core/util.mjs";
 import { Tex as Tex$1 } from "../../core/tex.mjs";
-import { evalTrig, exactTex, quadrant, sign } from "./core.mjs";
+import { evalTrig, exactTex, normDeg, quadrant, sign } from "./core.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Axes, Circle, Dot, Label, Polyline, Segment, Stage, Vector } from "@classytic/stage";
+import { Axes, Circle, Dot, Label, Polygon, Polyline, Segment, Stage, Vector } from "@classytic/stage";
 
 //#region src/math/trig/diagrams.tsx
 const SIGN_COLOR = (s) => s > 0 ? "var(--stage-good)" : s < 0 ? "var(--stage-danger)" : "var(--stage-muted)";
@@ -54,6 +54,19 @@ function UnitCircleMini({ deg, showLegs = true, showValue = false, showCast = fa
 	const q = quadrant(deg);
 	const sCos = sign("cos", deg), sSin = sign("sin", deg);
 	const valOf = (fn) => exactTex(fn, deg) || (Math.round(evalTrig(fn, deg) * 100) / 100).toString().replace(/^-/, "−");
+	const angleArc = arc(rad, .34);
+	const sector = [
+		{
+			x: 0,
+			y: 0
+		},
+		...angleArc,
+		{
+			x: 0,
+			y: 0
+		}
+	];
+	const labelAngle = rad / 2;
 	return /* @__PURE__ */ jsxs("div", {
 		style: {
 			width: "100%",
@@ -89,10 +102,27 @@ function UnitCircleMini({ deg, showLegs = true, showValue = false, showCast = fa
 					weight: cq === q ? 800 : 600,
 					color: cq === q ? "var(--stage-accent)" : "var(--stage-muted)"
 				}, c)),
+				/* @__PURE__ */ jsx(Polygon, {
+					points: sector,
+					color: "var(--stage-accent)",
+					fill: "var(--stage-accent)",
+					fillOpacity: .08,
+					opacity: .35,
+					weight: .75
+				}),
 				/* @__PURE__ */ jsx(Polyline, {
-					points: arc(rad, .3),
-					color: "var(--stage-muted)",
-					weight: 1.4
+					points: angleArc,
+					color: "var(--stage-accent)",
+					opacity: .75,
+					weight: 2
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: .5 * Math.cos(labelAngle),
+					y: .5 * Math.sin(labelAngle),
+					text: `${normDeg(deg)}°`,
+					color: "var(--stage-accent)",
+					size: 10.5,
+					weight: 700
 				}),
 				showLegs && /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx(Segment, {
@@ -143,8 +173,8 @@ function UnitCircleMini({ deg, showLegs = true, showValue = false, showCast = fa
 						y: 0
 					},
 					tip: P,
-					color: "var(--stage-fg)",
-					weight: 2
+					color: "var(--stage-accent)",
+					weight: 2.25
 				}),
 				showHyp && /* @__PURE__ */ jsx(Label, {
 					x: P.x / 2,
@@ -158,22 +188,18 @@ function UnitCircleMini({ deg, showLegs = true, showValue = false, showCast = fa
 					x: P.x,
 					y: P.y,
 					r: 5,
-					color: "var(--stage-fg)"
+					color: "var(--stage-accent)"
 				})
 			]
 		}), showValue && /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				justifyContent: "center",
-				gap: 14,
-				marginTop: 2,
-				fontSize: 13
-			},
+			className: "math-trig-values",
 			children: [/* @__PURE__ */ jsxs("span", {
-				style: { color: SIGN_COLOR(sCos) },
+				className: "math-signed-value",
+				"data-sign": sCos > 0 ? "positive" : sCos < 0 ? "negative" : "zero",
 				children: ["cos = ", /* @__PURE__ */ jsx(Tex$1, { tex: valOf("cos") })]
 			}), /* @__PURE__ */ jsxs("span", {
-				style: { color: SIGN_COLOR(sSin) },
+				className: "math-signed-value",
+				"data-sign": sSin > 0 ? "positive" : sSin < 0 ? "negative" : "zero",
 				children: ["sin = ", /* @__PURE__ */ jsx(Tex$1, { tex: valOf("sin") })]
 			})]
 		})]
@@ -289,7 +315,7 @@ function SpecialTriangles({ size = 300 }) {
 					color: "var(--stage-muted)"
 				}),
 				/* @__PURE__ */ jsx(Label, {
-					x: 3.1799999999999997,
+					x: 2.4 + .78,
 					y: .82,
 					text: "2",
 					size: 12,
@@ -297,7 +323,7 @@ function SpecialTriangles({ size = 300 }) {
 					color: "var(--stage-fg)"
 				}),
 				/* @__PURE__ */ jsx(Label, {
-					x: 3.5999999999999996,
+					x: 2.4 + 1.2,
 					y: .04,
 					text: "30°",
 					size: 10,

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

@@ -1,3 +1,5 @@
 import { TrigSignsLab, TrigSignsProps } from "./preset.mjs";
 import { core_d_exports } from "./core.mjs";
-import { TRIG_RULES } from "./rules.mjs";
+import { TRIG_RULES } from "./rules.mjs";
+import "./diagrams.mjs";
+export { TRIG_RULES, TrigSignsLab, type TrigSignsProps, core_d_exports as trig };

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

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-
 //#region src/math/trig/preset.d.ts
 interface TrigSignsProps {
   startDeg?: number;
@@ -12,14 +11,6 @@ interface TrigSignsProps {
   prompt?: string;
   activity?: string;
 }
-declare function TrigSignsLab({
-  startDeg,
-  snapDeg,
-  targetDeg,
-  height,
-  title,
-  prompt,
-  activity
-}?: TrigSignsProps): ReactNode;
+declare function TrigSignsLab({ startDeg, snapDeg, targetDeg, height, title, prompt, activity }?: TrigSignsProps): ReactNode;
 //#endregion
 export { TrigSignsLab, TrigSignsProps };

package/dist/math/trig/preset.mjs

@@ -3,7 +3,7 @@
 import { toDeg, toRad } from "../../core/util.mjs";
 import { Tex as Tex$1 } from "../../core/tex.mjs";
 import { StatusPill } from "../../kit/controls.mjs";
-import { ControlBar, LabFrame } from "../../kit/frame.mjs";
+import { Activity } from "../../kit/activity.mjs";
 import { useCheckpoint } from "../../kit/pedagogy.mjs";
 import { castLetter, evalTrig, exactTex, isSpecial, normDeg, quadrant, radTex, referenceAngleDeg, sign } from "./core.mjs";
 import { useEffect, useState } from "react";
@@ -27,16 +27,9 @@ const signTxt = (s) => Number.isNaN(s) ? "∅" : s > 0 ? "+" : s < 0 ? "−" : "
 /** A small labelled sign badge, so the readout shows magnitude + a clear sign
 *  (not a loose "−" that reads as part of the value). */
 const SignChip = ({ s }) => /* @__PURE__ */ jsxs("span", {
+	className: "math-sign-chip",
+	"data-sign": s > 0 ? "positive" : s < 0 ? "negative" : "zero",
 	"aria-label": s > 0 ? "positive" : s < 0 ? "negative" : "zero",
-	style: {
-		fontSize: 11,
-		fontWeight: 800,
-		lineHeight: 1,
-		padding: "2px 6px",
-		borderRadius: 999,
-		color: SIGN_COLOR(s),
-		background: `color-mix(in oklab, ${SIGN_COLOR(s)} 16%, transparent)`
-	},
 	children: [signTxt(s), s > 0 ? " pos" : s < 0 ? " neg" : ""]
 });
 const CAST = [
@@ -76,7 +69,7 @@ function arc(thetaRad, r) {
 		};
 	});
 }
-function TrigSignsLab({ startDeg = 30, snapDeg = 15, targetDeg, height = 360, title = "Signs on the unit circle (CAST)", prompt = "Drag the angle. cos is the horizontal leg, sin the vertical — green where +, red where −. The CAST letter says which are positive.", activity = "trig-signs" } = {}) {
+function TrigSignsLab({ startDeg = 30, snapDeg = 15, targetDeg, height = 360, title = "Signs on the unit circle (CAST)", prompt = "Drag the angle. cos is the horizontal leg, sin the vertical, green where +, red where −. The CAST letter says which are positive.", activity = "trig-signs" } = {}) {
 	const snap = (d) => snapDeg > 0 ? Math.round(d / snapDeg) * snapDeg : d;
 	const [deg, setDeg] = useState(() => normDeg(snap(startDeg)));
 	useEffect(() => {
@@ -215,20 +208,15 @@ function TrigSignsLab({ startDeg = 30, snapDeg = 15, targetDeg, height = 360, ti
 		]
 	});
 	const Row = ({ fn, s }) => /* @__PURE__ */ jsxs("span", {
-		style: {
-			color: SIGN_COLOR(s),
-			display: "inline-flex",
-			alignItems: "center",
-			gap: 6
-		},
+		className: "lab-trig-value math-signed-value",
+		"data-sign": s > 0 ? "positive" : s < 0 ? "negative" : "zero",
 		children: [/* @__PURE__ */ jsx(Tex$1, { tex: `\\${fn}\\theta = ${magTex(fn)}` }), !Number.isNaN(s) && /* @__PURE__ */ jsx(SignChip, { s })]
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+	const controls = /* @__PURE__ */ jsxs("div", {
+		className: "lab-activity-fields",
+		children: [
 			/* @__PURE__ */ jsx("span", {
-				style: { fontVariantNumeric: "tabular-nums" },
+				className: "lab-tabular",
 				children: /* @__PURE__ */ jsx(Tex$1, { tex: `\\theta = ${deg}^\\circ = ${radTex(deg)}` })
 			}),
 			/* @__PURE__ */ jsx(Row, {
@@ -244,15 +232,57 @@ function TrigSignsLab({ startDeg = 30, snapDeg = 15, targetDeg, height = 360, ti
 				s: sTan
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				style: { opacity: .8 },
+				className: "lab-muted-copy",
 				children: [q ? `Q${q}: ${castLetter(deg)} positive` : "on an axis", isSpecial(deg) ? ` · ref ${referenceAngleDeg(deg)}°` : ""]
 			}),
 			targetDeg != null && /* @__PURE__ */ jsx(StatusPill, {
 				ok: solved,
 				children: solved ? `✓ ${targetDeg}°` : `target ${targetDeg}°`
 			})
-		] }),
-		children: figure
+		]
+	});
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "math-trig-signs-activity",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Trigonometric signs",
+				title,
+				description: prompt
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: q ? `Quadrant ${q}` : "On an axis" }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					"θ ",
+					deg,
+					"°"
+				] }),
+				/* @__PURE__ */ jsx("span", { children: q ? `${castLetter(deg)} positive` : "axis value" })
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Interactive CAST unit circle",
+				children: figure
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: "Angle and function signs",
+				children: controls
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: "Cosine follows the horizontal coordinate and sine the vertical coordinate, so their signs come directly from the point’s quadrant." })] }),
+			/* @__PURE__ */ jsxs(Activity.LiveRegion, { children: [
+				"Angle ",
+				deg,
+				" degrees. Sine ",
+				signTxt(sSin),
+				", cosine ",
+				signTxt(sCos),
+				", tangent ",
+				signTxt(sTan),
+				".",
+				solved ? " Target reached." : ""
+			] }),
+			/* @__PURE__ */ jsx(Activity.Transport, { children: /* @__PURE__ */ jsxs("div", {
+				className: "lab-transport-state",
+				children: [/* @__PURE__ */ jsx("strong", { children: solved ? "Target angle reached" : "Drag around the circle" }), /* @__PURE__ */ jsx("span", { children: isSpecial(deg) ? `reference angle ${referenceAngleDeg(deg)}°` : `θ ${deg}°` })]
+			}) })
+		]
 	});
 }
 

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

@@ -1,5 +1,5 @@
 import { RuleDef } from "../../kit/rule.mjs";
-
+import { Worked } from "@classytic/stage/core";
 //#region src/math/trig/rules.d.ts
 declare const TRIG_RULES: RuleDef[];
 //#endregion

package/dist/math/trig/rules.mjs

@@ -1,8 +1,8 @@
 import { toRad } from "../../core/util.mjs";
-import { calc } from "../../kit/calc.mjs";
 import { castLetter, castPositive, evalTrig, exactTex, isSpecial, normDeg, quadrant, radTex, referenceAngleDeg, sign } from "./core.mjs";
 import { SpecialTriangles, UnitCircleMini } from "./diagrams.mjs";
 import { Fragment, createElement } from "react";
+import { calc } from "@classytic/stage/core";
 
 //#region src/math/trig/rules.ts
 /**
@@ -51,6 +51,28 @@ const CAST_RULE = {
 		step: 15
 	}],
 	compute: (v) => explainCast(v.deg ?? 0),
+	challenge: [{
+		id: "cast-q3",
+		prompt: "At 210° in quadrant 3, which trig function is positive?",
+		choices: [
+			{
+				value: "sin",
+				label: "sin",
+				feedback: "The y-coordinate is negative in quadrant 3."
+			},
+			{
+				value: "cos",
+				label: "cos",
+				feedback: "The x-coordinate is negative in quadrant 3."
+			},
+			{
+				value: "tan",
+				label: "tan"
+			}
+		],
+		answer: "tan",
+		explain: "Both sin and cos are negative, so their ratio tan = sin ÷ cos is positive."
+	}],
 	derivation: [
 		{
 			tex: "\\cos\\theta = x, \\quad \\sin\\theta = y",
@@ -73,11 +95,7 @@ const EXACT_RULE = {
 	name: "Exact special-angle values",
 	formula: "\\sin 30^\\circ=\\tfrac12,\\; \\cos 30^\\circ=\\tfrac{\\sqrt3}{2},\\; \\sin 45^\\circ=\\tfrac{\\sqrt2}{2}",
 	analogy: "They all come from two triangles: the 45-45-90 (sides 1,1,√2) and the 30-60-90 (sides 1,√3,2).",
-	figure: (v) => createElement(Fragment, null, createElement("div", { style: {
-		display: "grid",
-		gap: 6,
-		justifyItems: "center"
-	} }, createElement(UnitCircleMini, {
+	figure: (v) => createElement(Fragment, null, createElement("div", { className: "trig-rule-figures" }, createElement(UnitCircleMini, {
 		deg: v.deg ?? 0,
 		showLegs: true,
 		showValue: true
@@ -91,6 +109,26 @@ const EXACT_RULE = {
 		step: 30
 	}],
 	compute: (v) => explainExact(v.deg ?? 0),
+	challenge: [{
+		id: "exact-150-reference",
+		prompt: "150° has the same reference triangle as which acute angle?",
+		choices: [
+			{
+				value: "30",
+				label: "30°"
+			},
+			{
+				value: "45",
+				label: "45°"
+			},
+			{
+				value: "60",
+				label: "60°"
+			}
+		],
+		answer: "30",
+		explain: "150° is 30° away from the 180° axis, so its reference angle is 30°."
+	}],
 	tricks: [
 		"Only the multiples of 30° and 45° are \"exact\".",
 		"Find the reference angle, look up its value, then apply the CAST sign.",
@@ -119,9 +157,10 @@ const PYTHAG_RULE = {
 		{ tex: "\\Rightarrow \\cos^2\\theta + \\sin^2\\theta = 1" }
 	],
 	tricks: [
-		"Divide by cos²θ → 1 + tan²θ = sec²θ.",
-		"Divide by sin²θ → 1 + cot²θ = csc²θ.",
-		"Lets you get cos from sin (up to sign): cosθ = ±√(1 − sin²θ)."
+		"Gets cos from sin, up to sign: cosθ = ±√(1 − sin²θ). The quadrant decides the sign, not the identity.",
+		"Recognise it hiding in an equation: replace sin²θ with 1 − cos²θ so a lone cosθ term survives.",
+		"Later (Paper 3): divide by cos²θ to get 1 + tan²θ = sec²θ.",
+		"Later (Paper 3): divide by sin²θ to get 1 + cot²θ = cosec²θ."
 	]
 };
 const DEG_RAD_RULE = {
@@ -142,6 +181,28 @@ const DEG_RAD_RULE = {
 		step: 15
 	}],
 	compute: (v) => explainDegRad(v.deg ?? 0),
+	challenge: [{
+		id: "degrees-radians-30",
+		prompt: "A 30° turn is what fraction of π radians?",
+		choices: [
+			{
+				value: "pi-3",
+				label: "π/3",
+				feedback: "π/3 is 60°."
+			},
+			{
+				value: "pi-6",
+				label: "π/6"
+			},
+			{
+				value: "pi-12",
+				label: "π/12",
+				feedback: "π/12 is 15°."
+			}
+		],
+		answer: "pi-6",
+		explain: "30/180 simplifies to 1/6, so 30° × π/180° = π/6."
+	}],
 	tricks: [
 		"× π/180 to go deg → rad; × 180/π to go back.",
 		"Memorise the anchors: 180°=π, 90°=π/2, 60°=π/3, 45°=π/4, 30°=π/6.",
@@ -156,4 +217,4 @@ const TRIG_RULES = [
 ];
 
 //#endregion
-export { TRIG_RULES };
+export { CAST_RULE, DEG_RAD_RULE, EXACT_RULE, PYTHAG_RULE, TRIG_RULES, explainCast, explainDegRad, explainExact };

package/dist/math/trig-explorer.d.mts

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-
 //#region src/math/trig-explorer.d.ts
 /** The two projections this widget visualizes. */
 type TrigFn = 'sin' | 'cos';
@@ -10,9 +9,6 @@ interface TrigExplorerProps {
   /** Initial angle in degrees. Default 30. */
   startDeg?: number;
 }
-declare function TrigExplorer({
-  functions,
-  startDeg
-}?: TrigExplorerProps): ReactNode;
+declare function TrigExplorer({ functions, startDeg }?: TrigExplorerProps): ReactNode;
 //#endregion
 export { TRIG_FNS, TrigExplorer, TrigFn };