@classytic/labs 0.1.0

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

@@ -0,0 +1,32 @@
+import { PATTERN_FIGURE_ASSET } from "./asset.mjs";
+import { ReactNode } from "react";
+import { SceneDoc } from "@classytic/stage";
+
+//#region src/math/pattern/preset.d.ts
+interface GrowingPatternProps {
+  a?: number;
+  b?: number;
+  steps?: number;
+  prompt?: string;
+  check?: 'steppers' | 'mcq';
+  choices?: string[];
+  controlId?: string;
+  height?: number;
+}
+declare function growingPatternDoc({
+  a,
+  b,
+  steps
+}: GrowingPatternProps): SceneDoc;
+declare function GrowingPatternLab({
+  a,
+  b,
+  steps,
+  prompt,
+  check,
+  choices,
+  controlId,
+  height
+}: GrowingPatternProps): ReactNode;
+//#endregion
+export { GrowingPatternLab, GrowingPatternProps, growingPatternDoc };

package/dist/math/pattern/preset.mjs

@@ -0,0 +1,294 @@
+'use client';
+
+import { CheckButton, Chip, LabStyles, StatusPill, Stepper } from "../../kit/controls.mjs";
+import { ControlBar, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { PATTERN_FIGURE_ASSET } from "./asset.mjs";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Scene, controlsFromScene, registerAsset, resolve, useControlSurface, useEditor } from "@classytic/stage";
+
+//#region src/math/pattern/preset.tsx
+/**
+* Growing pattern → formula — a SceneDoc FACTORY (Brilliant-style visual
+* algebra), built on @classytic/stage. A creator declares the linear rule
+* count(n) = a·n + b; the template GENERATES the figures for n = 1..k and asks
+* the learner to find the rule. A linear rule is fixed by any two points, so
+* agreement on the shown n PLUS a hidden "predict" row (n = k+1) forces the
+* learner to extrapolate the real rule, not memorise the visible counts.
+*/
+registerAsset("pattern-figure", PATTERN_FIGURE_ASSET);
+const CELL = .5;
+const ruleLabel = (a, b) => `${a === 1 ? "n" : `${a}n`}${b ? ` + ${b}` : ""}`;
+function growingPatternDoc({ a = 2, b = 3, steps = 4 }) {
+	const figW = Math.max(a, b, 1) * CELL;
+	const gap = CELL * 2;
+	const pitch = figW + gap;
+	const predictN = steps + 1;
+	const ns = Array.from({ length: steps }, (_, i) => i + 1);
+	const elements = [{
+		id: "aGuess",
+		kind: "scalar",
+		label: "a",
+		a11y: { label: "coefficient a" },
+		free: {
+			value: 1,
+			min: 0,
+			max: 9,
+			step: 1
+		}
+	}, {
+		id: "bGuess",
+		kind: "scalar",
+		label: "b",
+		a11y: { label: "constant b" },
+		free: {
+			value: 0,
+			min: 0,
+			max: 9,
+			step: 1
+		}
+	}];
+	for (const step of ns) elements.push({
+		id: `fig${step}`,
+		kind: "asset",
+		def: {
+			op: "asset",
+			asset: "pattern-figure",
+			params: {
+				n: step,
+				a,
+				b,
+				cell: CELL,
+				origin: {
+					x: (step - 1) * pitch,
+					y: 0
+				}
+			},
+			bind: {}
+		}
+	});
+	for (const step of [...ns, predictN]) elements.push({
+		id: `guess${step}`,
+		kind: "scalar",
+		def: {
+			op: "linop",
+			terms: [{
+				coef: step,
+				in: { ref: "aGuess" }
+			}, {
+				coef: 1,
+				in: { ref: "bGuess" }
+			}]
+		}
+	});
+	return {
+		schemaVersion: 2,
+		type: "stage-scene",
+		view: {
+			xMin: -.6,
+			xMax: steps * pitch - gap + .6,
+			yMin: -2.1,
+			yMax: steps * CELL + .8
+		},
+		elements,
+		bindings: []
+	};
+}
+function GrowingPatternLab({ a = 2, b = 3, steps = 4, prompt = "Find the rule for the number of tiles.", check = "steppers", choices, controlId, height = 320 }) {
+	const { editor, doc } = useEditor(useMemo(() => growingPatternDoc({
+		a,
+		b,
+		steps
+	}), [
+		a,
+		b,
+		steps
+	]));
+	const resolved = resolve(doc);
+	const aGuess = Number(resolved.values.get("aGuess") ?? 1);
+	const bGuess = Number(resolved.values.get("bGuess") ?? 0);
+	const predictN = steps + 1;
+	const ns = Array.from({ length: steps }, (_, i) => i + 1);
+	const truth = (k) => a * k + b;
+	useControlSurface(controlId, useMemo(() => controlsFromScene(editor, [{
+		id: "aGuess",
+		name: "a",
+		min: 0,
+		max: 9,
+		step: 1
+	}, {
+		id: "bGuess",
+		name: "b",
+		min: 0,
+		max: 9,
+		step: 1
+	}]), [editor]));
+	const setScalar = (id, v) => {
+		editor.dispatch({
+			op: "mutate",
+			id,
+			patch: { free: { value: Math.max(0, v) } }
+		});
+	};
+	const [sel, setSel] = useState(null);
+	const [result, setResult] = useState(null);
+	const answer = ruleLabel(a, b);
+	const steppersSolved = [...ns, predictN].every((k) => aGuess * k + bGuess === truth(k));
+	const matchRow = (k) => aGuess * k + bGuess === truth(k);
+	useCheckpoint({
+		solved: result === "correct",
+		activity: `pattern-${answer}`,
+		response: check === "mcq" ? sel ?? "" : `${aGuess}n+${bGuess}`
+	});
+	const check_ = () => {
+		setResult((check === "mcq" ? sel === answer : steppersSolved) ? "correct" : "wrong");
+	};
+	const cellStyle = (ok) => ({
+		padding: "4px 10px",
+		textAlign: "center",
+		color: ok === null ? "inherit" : ok ? "var(--stage-good)" : "var(--stage-warn)",
+		fontWeight: ok ? 700 : 400
+	});
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(LabStyles, {}),
+		/* @__PURE__ */ jsx(Scene, {
+			doc,
+			interactive: false,
+			showGrid: false,
+			showAxes: false,
+			height,
+			ariaLabel: prompt
+		}),
+		/* @__PURE__ */ jsxs("table", {
+			style: {
+				borderCollapse: "collapse",
+				margin: "8px 0",
+				fontSize: 14
+			},
+			children: [/* @__PURE__ */ jsx("caption", {
+				style: {
+					textAlign: "left",
+					opacity: .75,
+					marginBottom: 4
+				},
+				children: "step n → number of tiles"
+			}), /* @__PURE__ */ jsxs("tbody", { children: [/* @__PURE__ */ jsxs("tr", { children: [
+				/* @__PURE__ */ jsx("th", {
+					style: {
+						textAlign: "right",
+						padding: "4px 10px",
+						opacity: .7
+					},
+					children: "n"
+				}),
+				ns.map((k) => /* @__PURE__ */ jsx("td", {
+					style: cellStyle(check === "steppers" ? matchRow(k) : null),
+					children: k
+				}, k)),
+				/* @__PURE__ */ jsx("td", {
+					style: {
+						...cellStyle(null),
+						opacity: .7
+					},
+					children: predictN
+				})
+			] }), /* @__PURE__ */ jsxs("tr", { children: [
+				/* @__PURE__ */ jsx("th", {
+					style: {
+						textAlign: "right",
+						padding: "4px 10px",
+						opacity: .7
+					},
+					children: "tiles"
+				}),
+				ns.map((k) => /* @__PURE__ */ jsx("td", {
+					style: cellStyle(check === "steppers" ? matchRow(k) : null),
+					children: truth(k)
+				}, k)),
+				/* @__PURE__ */ jsx("td", {
+					style: {
+						...cellStyle(null),
+						opacity: .7
+					},
+					children: "?"
+				})
+			] })] })]
+		})
+	] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		prompt,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			check === "steppers" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx("span", {
+					style: { fontWeight: 600 },
+					children: "Your rule:"
+				}),
+				/* @__PURE__ */ jsx(Stepper, {
+					label: "a",
+					value: aGuess,
+					min: 0,
+					max: 9,
+					onChange: (v) => {
+						setScalar("aGuess", v);
+						setResult(null);
+					}
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sep",
+					children: "· n \xA0+"
+				}),
+				/* @__PURE__ */ jsx(Stepper, {
+					label: "b",
+					value: bGuess,
+					min: 0,
+					max: 9,
+					onChange: (v) => {
+						setScalar("bGuess", v);
+						setResult(null);
+					}
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					style: { opacity: .7 },
+					children: ["→ ", /* @__PURE__ */ jsx("strong", { children: ruleLabel(aGuess, bGuess) })]
+				})
+			] }) : /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "grid",
+					gridTemplateColumns: "1fr 1fr",
+					gap: 8
+				},
+				children: (choices ?? []).map((ch) => /* @__PURE__ */ jsx(Chip, {
+					selected: sel === ch,
+					onClick: () => {
+						setSel(ch);
+						setResult(null);
+					},
+					children: ch
+				}, ch))
+			}),
+			/* @__PURE__ */ jsx(CheckButton, {
+				onClick: check_,
+				disabled: check === "mcq" && !sel,
+				children: "Check"
+			}),
+			result === "correct" && /* @__PURE__ */ jsxs(StatusPill, {
+				ok: true,
+				children: [
+					"✓ Correct — predicts n = ",
+					predictN,
+					" too!"
+				]
+			}),
+			result === "wrong" && /* @__PURE__ */ jsx(StatusPill, {
+				ok: false,
+				children: "Not quite — match every step"
+			})
+		] }),
+		footer: /* @__PURE__ */ jsx(LiveRegion, { children: result === "correct" ? `Correct. The rule is ${answer}.` : "" }),
+		children: figure
+	});
+}
+
+//#endregion
+export { GrowingPatternLab, growingPatternDoc };

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

@@ -0,0 +1 @@
+import { TriangleTrig, TriangleTrigProps } from "./preset.mjs";

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

@@ -0,0 +1,47 @@
+import { ProblemAsk } from "../interactive/preset.mjs";
+import { ReactNode } from "react";
+
+//#region src/math/triangle-trig/preset.d.ts
+interface TriangleTrigProps {
+  /** Angle θ in degrees (0 < θ < 90). */
+  angleDeg?: number;
+  /** Length of the GIVEN leg. */
+  leg?: number;
+  /** Which leg `leg` is: the vertical 'opposite' or the horizontal 'adjacent'. */
+  legKind?: 'opposite' | 'adjacent';
+  /** Framing: elevation (look up from the base) / depression (look down from the top) / plain. */
+  mode?: 'elevation' | 'depression' | 'plain';
+  labels?: {
+    opposite?: string;
+    adjacent?: string;
+    hypotenuse?: string;
+    angle?: string;
+  };
+  /** Which knobs are draggable. Empty → a fixed (authored) scenario. Default: ['angle']. */
+  drive?: ('angle' | 'leg')[];
+  legMin?: number;
+  legMax?: number;
+  /** Optional graded question; the answer is checked symbolically/numerically. */
+  ask?: ProblemAsk;
+  title?: string;
+  prompt?: string;
+  height?: number;
+  activity?: string;
+}
+declare function TriangleTrig({
+  angleDeg,
+  leg,
+  legKind,
+  mode,
+  labels,
+  drive,
+  legMin,
+  legMax,
+  ask,
+  title,
+  prompt,
+  height,
+  activity
+}?: TriangleTrigProps): ReactNode;
+//#endregion
+export { TriangleTrig, TriangleTrigProps };

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

@@ -0,0 +1,245 @@
+'use client';
+
+import { Slider } from "../../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame } 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 { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+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
+* 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
+* 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`.
+*/
+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 [deg, setDeg] = useState(angleDeg);
+	const [len, setLen] = useState(leg);
+	const lab = {
+		opposite: "opposite",
+		adjacent: "adjacent",
+		hypotenuse: "hypotenuse",
+		angle: "θ",
+		...labels
+	};
+	const maxLeg = legMax ?? Math.max(20, Math.ceil(leg * 2));
+	const th = deg * Math.PI / 180;
+	const A = legKind === "adjacent" ? len : len / Math.tan(th);
+	const O = legKind === "adjacent" ? len * Math.tan(th) : len;
+	const H = Math.hypot(A, O);
+	const givenIsOpp = legKind === "opposite";
+	const Oc = {
+		x: 0,
+		y: 0
+	};
+	const B = {
+		x: A,
+		y: 0
+	};
+	const T = {
+		x: A,
+		y: O
+	};
+	const pad = Math.max(A, O, 1) * .18;
+	const view = {
+		xMin: -pad,
+		xMax: A + pad * 2.2,
+		yMin: -pad,
+		yMax: O + pad * 1.6
+	};
+	const horiz = {
+		x: A - Math.min(A * .55, O * .9 + 1),
+		y: O
+	};
+	const sideLabel = (mid, name, value, color, given, off) => /* @__PURE__ */ jsx(Label, {
+		x: mid.x,
+		y: mid.y,
+		text: `${name} = ${fmt$1(value)}`,
+		color,
+		size: 12,
+		dx: off.dx,
+		dy: off.dy
+	});
+	const figure = /* @__PURE__ */ jsxs(Stage, {
+		view,
+		height,
+		ariaLabel: `Right triangle: ${lab.angle} ${deg} degrees, ${lab.opposite} ${fmt$1(O)}, ${lab.adjacent} ${fmt$1(A)}, hypotenuse ${fmt$1(H)}`,
+		children: [
+			/* @__PURE__ */ jsx(Segment, {
+				from: Oc,
+				to: B,
+				color: !givenIsOpp ? C_GIVEN : C_CALC,
+				weight: !givenIsOpp ? 3 : 2,
+				opacity: !givenIsOpp ? 1 : .5
+			}),
+			/* @__PURE__ */ jsx(Segment, {
+				from: B,
+				to: T,
+				color: givenIsOpp ? C_GIVEN : C_CALC,
+				weight: givenIsOpp ? 3 : 2,
+				opacity: givenIsOpp ? 1 : .5
+			}),
+			/* @__PURE__ */ jsx(Segment, {
+				from: Oc,
+				to: T,
+				color: C_HYP,
+				weight: 2.5
+			}),
+			/* @__PURE__ */ jsx(RightAngleMark, {
+				at: B,
+				u: {
+					x: -1,
+					y: 0
+				},
+				v: {
+					x: 0,
+					y: 1
+				}
+			}),
+			mode === "depression" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Segment, {
+				from: T,
+				to: horiz,
+				color: "var(--stage-muted)",
+				weight: 1.2,
+				dashed: true,
+				opacity: .7
+			}), /* @__PURE__ */ jsx(AngleArc, {
+				at: T,
+				from: {
+					x: horiz.x - T.x,
+					y: 0
+				},
+				to: {
+					x: Oc.x - T.x,
+					y: Oc.y - T.y
+				},
+				rPx: 30,
+				label: `${lab.angle}=${deg}°`
+			})] }) : /* @__PURE__ */ jsx(AngleArc, {
+				at: Oc,
+				from: {
+					x: 1,
+					y: 0
+				},
+				to: {
+					x: A,
+					y: O
+				},
+				rPx: 30,
+				label: `${lab.angle}=${deg}°`
+			}),
+			sideLabel({
+				x: A / 2,
+				y: 0
+			}, lab.adjacent, A, !givenIsOpp ? C_GIVEN : C_CALC, !givenIsOpp, { dy: 16 }),
+			sideLabel({
+				x: A,
+				y: O / 2
+			}, lab.opposite, O, givenIsOpp ? C_GIVEN : C_CALC, givenIsOpp, { dx: 16 }),
+			sideLabel({
+				x: A / 2,
+				y: O / 2
+			}, lab.hypotenuse, H, C_HYP, false, {
+				dx: -10,
+				dy: -8
+			})
+		]
+	});
+	const aside = /* @__PURE__ */ jsx(Callout, {
+		tone: "result",
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "grid",
+				gap: 6,
+				fontVariantNumeric: "tabular-nums",
+				fontSize: 13
+			},
+			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)
+					]
+				})
+			]
+		})
+	});
+	const sliders = [];
+	if (drive.includes("angle")) sliders.push(/* @__PURE__ */ jsx(Field, {
+		label: lab.angle,
+		value: `${deg}°`,
+		children: /* @__PURE__ */ jsx(Slider, {
+			value: deg,
+			min: 5,
+			max: 85,
+			step: 1,
+			onChange: setDeg,
+			ariaLabel: "angle in degrees"
+		})
+	}, "a"));
+	if (drive.includes("leg")) sliders.push(/* @__PURE__ */ jsx(Field, {
+		label: legKind,
+		value: fmt$1(len),
+		children: /* @__PURE__ */ jsx(Slider, {
+			value: len,
+			min: legMin,
+			max: maxLeg,
+			step: 1,
+			onChange: setLen,
+			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
+	});
+}
+
+//#endregion
+export { TriangleTrig };

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

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+
+//#region src/math/trig-explorer.d.ts
+/** The two projections this widget visualizes. */
+type TrigFn = 'sin' | 'cos';
+declare const TRIG_FNS: readonly TrigFn[];
+interface TrigExplorerProps {
+  /** Which projections to show. Default `['sin','cos']`. */
+  functions?: TrigFn[] | string;
+  /** Initial angle in degrees. Default 30. */
+  startDeg?: number;
+}
+declare function TrigExplorer({
+  functions,
+  startDeg
+}?: TrigExplorerProps): ReactNode;
+//#endregion
+export { TRIG_FNS, TrigExplorer, TrigFn };