@classytic/labs 0.2.0 → 0.3.0

package/dist/math/domain-range/preset.mjs

@@ -1,13 +1,16 @@
 'use client';
 
 import { clamp } from "../../core/util.mjs";
-import { Callout, LabFrame } from "../../kit/frame.mjs";
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { StatusPill } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { Stat, StatList } from "../../kit/frame.mjs";
 import { useCheckpoint } from "../../kit/pedagogy.mjs";
-import { LabAsk } from "../../kit/ask.mjs";
 import { CoordPlane, num } from "../../kit/coords.mjs";
+import { LabAsk } from "../../kit/ask.mjs";
 import { useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Dot, Label, MovableDot, Plot, Segment, compileExpr } from "@classytic/stage";
+import { Dot, Label, MovableDot, Plot, Segment, compileExpr, toLatex } from "@classytic/stage";
 
 //#region src/math/domain-range/preset.tsx
 /**
@@ -63,13 +66,14 @@ function mergeIntervals(iv) {
 	}
 	return out;
 }
-const fmtIntervals = (rs, eps) => rs.length ? rs.map(([a, b]) => b - a < eps ? `{${num(a)}}` : `[${num(a)}, ${num(b)}]`).join(" ∪ ") : ", ";
+const fmtIntervals = (rs, eps) => rs.length ? rs.map(([a, b]) => b - a < eps ? `{${num(a)}}` : `[${num(a)}, ${num(b)}]`).join(" ∪ ") : "-";
 function DomainRangeLab({ equation = "sqrt(9 - x^2)", xRange = [-6, 6], yRange = "auto", restrict, probe, title = "Domain and range: the two shadows", prompt = "Drag the input probe: green = the machine accepts it (in the domain), red = undefined. The blue strip is every allowed input; the orange strip is every output.", ask, height = 400, activity = "domain-range" } = {}) {
 	const [x0, x1] = xRange;
 	const compiled = (() => {
 		const c = compileExpr(equation);
 		return c.error !== void 0 ? null : c;
 	})();
+	const equationLatex = compiled ? toLatex(compiled.ast) : equation;
 	const inRestrict = (x) => !restrict || x >= restrict[0] - 1e-9 && x <= restrict[1] + 1e-9;
 	const f = (x) => compiled && inRestrict(x) ? compiled.fn({ x }) : NaN;
 	const dx = (x1 - x0) / N;
@@ -253,60 +257,82 @@ function DomainRangeLab({ equation = "sqrt(9 - x^2)", xRange = [-6, 6], yRange =
 			})
 		]
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		aside: /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				flexDirection: "column",
-				gap: 10
-			},
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "lab-pill",
-				"data-state": accepted ? "ok" : "no",
-				role: "status",
-				style: { alignSelf: "flex-start" },
-				children: accepted ? `✓ f(${num(pX)}) = ${num(pY)}, accepted` : `✗ x = ${num(pX)} is not in the domain`
-			}), /* @__PURE__ */ jsx(Callout, {
-				tone: "result",
-				children: /* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "grid",
-						gap: 6,
-						fontVariantNumeric: "tabular-nums",
-						fontSize: 13
-					},
-					children: [
-						/* @__PURE__ */ jsxs("span", { children: ["f(x) = ", /* @__PURE__ */ jsx("strong", { children: equation })] }),
-						/* @__PURE__ */ jsxs("span", {
-							style: { color: C_DOMAIN },
-							children: ["domain: ", /* @__PURE__ */ jsx("strong", { children: fmtIntervals(domain, dx * 3) })]
-						}),
-						/* @__PURE__ */ jsxs("span", {
-							style: { color: C_RANGE },
-							children: ["range: ", /* @__PURE__ */ jsx("strong", { children: fmtIntervals(range, (yMax - yMin) * .05) })]
-						}),
-						restrict && /* @__PURE__ */ jsxs("span", {
-							style: { color: "var(--stage-muted)" },
-							children: [
-								"restricted to [",
-								num(restrict[0]),
-								", ",
-								num(restrict[1]),
-								"]"
-							]
-						})
-					]
-				})
-			})]
-		}),
-		footer: ask ? /* @__PURE__ */ jsx(LabAsk, {
-			ask,
-			activity
-		}) : void 0,
-		children: figure
+	const aside = /* @__PURE__ */ jsxs("div", {
+		className: "math-aside-stack",
+		children: [/* @__PURE__ */ jsx(StatusPill, {
+			ok: accepted,
+			className: "math-status-start",
+			role: "status",
+			children: accepted ? `✓ f(${num(pX)}) = ${num(pY)}, accepted` : `✗ x = ${num(pX)} is not in the domain`
+		}), /* @__PURE__ */ jsxs(StatList, { children: [
+			/* @__PURE__ */ jsx(Stat, {
+				label: "f(x)",
+				value: /* @__PURE__ */ jsx(Tex$1, { tex: equationLatex })
+			}),
+			/* @__PURE__ */ jsx(Stat, {
+				label: /* @__PURE__ */ jsx("span", {
+					className: "math-domain-label",
+					children: "domain"
+				}),
+				value: fmtIntervals(domain, dx * 3)
+			}),
+			/* @__PURE__ */ jsx(Stat, {
+				label: /* @__PURE__ */ jsx("span", {
+					className: "math-range-label",
+					children: "range"
+				}),
+				value: fmtIntervals(range, (yMax - yMin) * .05)
+			}),
+			restrict && /* @__PURE__ */ jsxs("span", {
+				className: "math-explain",
+				children: [
+					"restricted to [",
+					num(restrict[0]),
+					", ",
+					num(restrict[1]),
+					"]"
+				]
+			})
+		] })]
 	});
+	const footer = ask ? /* @__PURE__ */ jsx(LabAsk, {
+		ask,
+		activity
+	}) : void 0;
+	const probeState = accepted ? `f(${num(pX)}) = ${num(pY)}` : `x = ${num(pX)} is undefined`;
+	return /* @__PURE__ */ jsxs(Activity.Root, { 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: accepted ? "Input accepted" : "Undefined input" }), /* @__PURE__ */ jsx("span", { children: probeState })] }),
+		/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+			label: "Domain and range graph",
+			children: figure
+		}), /* @__PURE__ */ jsx(Activity.Inspector, {
+			label: "Function evidence",
+			children: aside
+		})] }),
+		/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: "The horizontal shadow records accepted inputs; the vertical shadow records their outputs." })] }),
+		footer ? /* @__PURE__ */ jsx("section", {
+			className: "lab-authored-task",
+			"aria-label": "Domain and range question",
+			children: footer
+		}) : null,
+		/* @__PURE__ */ jsxs(Activity.LiveRegion, { children: [
+			probeState,
+			". Domain ",
+			fmtIntervals(domain, dx * 3),
+			". Range ",
+			fmtIntervals(range, (yMax - yMin) * .05),
+			"."
+		] }),
+		/* @__PURE__ */ jsx(Activity.Transport, { children: /* @__PURE__ */ jsxs("div", {
+			className: "lab-transport-state",
+			children: [/* @__PURE__ */ jsx("strong", { children: swept ? "Range explored" : "Sweep the input" }), /* @__PURE__ */ jsx("span", { children: probeState })]
+		}) })
+	] });
 }
 
 //#endregion

package/dist/math/expression-order/core.d.mts

@@ -0,0 +1,23 @@
+//#region src/math/expression-order/core.d.ts
+interface ExpressionOrderChoice {
+  value: string;
+  label: string;
+}
+interface ExpressionOrderStep {
+  expression: string;
+  rule: string;
+}
+interface ExpressionOrderRound {
+  id: string;
+  expression: string;
+  prompt: string;
+  choices: ExpressionOrderChoice[];
+  answer: string;
+  steps: ExpressionOrderStep[];
+}
+declare function expressionValue(expression: string): number;
+declare function expressionLatex(expression: string): string;
+declare function validateExpressionOrderRounds(rounds: ExpressionOrderRound[]): string[];
+declare const DEFAULT_EXPRESSION_ORDER_ROUNDS: ExpressionOrderRound[];
+//#endregion
+export { DEFAULT_EXPRESSION_ORDER_ROUNDS, ExpressionOrderChoice, ExpressionOrderRound, ExpressionOrderStep, expressionLatex, expressionValue, validateExpressionOrderRounds };

package/dist/math/expression-order/core.mjs

@@ -0,0 +1,130 @@
+import { compileExpr, toLatex } from "@classytic/stage";
+
+//#region src/math/expression-order/core.ts
+function expressionValue(expression) {
+	const compiled = compileExpr(expression);
+	return compiled.error === void 0 ? compiled.fn({}) : NaN;
+}
+function expressionLatex(expression) {
+	const compiled = compileExpr(expression);
+	return compiled.error === void 0 && compiled.ast ? toLatex(compiled.ast) : expression;
+}
+function validateExpressionOrderRounds(rounds) {
+	const issues = [];
+	const ids = /* @__PURE__ */ new Set();
+	rounds.forEach((round, index) => {
+		const at = `Round ${index + 1}`;
+		if (!round.id || ids.has(round.id)) issues.push(`${at} needs a unique id.`);
+		ids.add(round.id);
+		if (round.choices.length < 2 || round.choices.length > 4) issues.push(`${at} needs two to four choices.`);
+		if (!round.choices.some((choice) => choice.value === round.answer)) issues.push(`${at} answer is not one of its choices.`);
+		const startValue = expressionValue(round.expression);
+		if (!Number.isFinite(startValue)) issues.push(`${at} has an invalid starting expression.`);
+		if (round.steps.length === 0) issues.push(`${at} needs at least one reduction step.`);
+		round.steps.forEach((step, stepIndex) => {
+			const value = expressionValue(step.expression);
+			if (!Number.isFinite(value)) issues.push(`${at}, step ${stepIndex + 1}, has an invalid expression.`);
+			if (Number.isFinite(startValue) && Number.isFinite(value) && Math.abs(value - startValue) > 1e-9) issues.push(`${at}, step ${stepIndex + 1}, changes the expression's value.`);
+		});
+	});
+	return issues;
+}
+const DEFAULT_EXPRESSION_ORDER_ROUNDS = [
+	{
+		id: "multiply-divide-left",
+		expression: "24/6*2",
+		prompt: "Which operation must happen first?",
+		choices: [{
+			value: "divide",
+			label: "24 ÷ 6"
+		}, {
+			value: "multiply",
+			label: "6 × 2"
+		}],
+		answer: "divide",
+		steps: [{
+			expression: "4*2",
+			rule: "Multiplication and division share a level, so work left to right."
+		}, {
+			expression: "8",
+			rule: "Multiply the remaining factors."
+		}]
+	},
+	{
+		id: "add-subtract-left",
+		expression: "10-3+2",
+		prompt: "Which operation must happen first?",
+		choices: [{
+			value: "subtract",
+			label: "10 − 3"
+		}, {
+			value: "add",
+			label: "3 + 2"
+		}],
+		answer: "subtract",
+		steps: [{
+			expression: "7+2",
+			rule: "Addition and subtraction share a level, so work left to right."
+		}, {
+			expression: "9",
+			rule: "Add the remaining terms."
+		}]
+	},
+	{
+		id: "power-association",
+		expression: "2^(3^2)",
+		prompt: "Which power is evaluated first?",
+		choices: [{
+			value: "inner",
+			label: "3²"
+		}, {
+			value: "outer",
+			label: "2³"
+		}],
+		answer: "inner",
+		steps: [{
+			expression: "2^9",
+			rule: "A power in the exponent is resolved before the outer power."
+		}, {
+			expression: "512",
+			rule: "Now evaluate the remaining power."
+		}]
+	},
+	{
+		id: "negative-power",
+		expression: "-(2^2)",
+		prompt: "What is squared here?",
+		choices: [{
+			value: "two",
+			label: "Only 2"
+		}, {
+			value: "negative-two",
+			label: "The whole −2"
+		}],
+		answer: "two",
+		steps: [{
+			expression: "-4",
+			rule: "The exponent applies before the leading negative sign."
+		}]
+	},
+	{
+		id: "grouped-negative",
+		expression: "(-2)^2",
+		prompt: "What is squared here?",
+		choices: [{
+			value: "group",
+			label: "The grouped −2"
+		}, {
+			value: "two",
+			label: "Only 2"
+		}],
+		answer: "group",
+		steps: [{
+			expression: "4",
+			rule: "Parentheses make −2 the complete base of the power."
+		}]
+	}
+];
+
+//#endregion
+export { DEFAULT_EXPRESSION_ORDER_ROUNDS, expressionLatex, expressionValue, validateExpressionOrderRounds };

package/dist/math/expression-order/index.d.mts

@@ -0,0 +1,2 @@
+import { DEFAULT_EXPRESSION_ORDER_ROUNDS, ExpressionOrderChoice, ExpressionOrderRound, ExpressionOrderStep, expressionLatex, expressionValue, validateExpressionOrderRounds } from "./core.mjs";
+import { ExpressionOrderLab, ExpressionOrderMessages, ExpressionOrderProps } from "./preset.mjs";

package/dist/math/expression-order/preset.d.mts

@@ -0,0 +1,35 @@
+import { ExpressionOrderRound } from "./core.mjs";
+import { ReactNode } from "react";
+
+//#region src/math/expression-order/preset.d.ts
+interface ExpressionOrderMessages {
+  eyebrow: string;
+  title: string;
+  description: string;
+  choose: string;
+  check: string;
+  nextStep: string;
+  nextPuzzle: string;
+  previous: string;
+  reset: string;
+  correct: string;
+  tryAgain: string;
+  start: string;
+  result: string;
+}
+interface ExpressionOrderProps {
+  rounds?: ExpressionOrderRound[];
+  startAt?: number;
+  title?: string;
+  prompt?: string;
+  messages?: Partial<ExpressionOrderMessages>;
+}
+declare function ExpressionOrderLab({
+  rounds,
+  startAt,
+  title,
+  prompt,
+  messages
+}?: ExpressionOrderProps): ReactNode;
+//#endregion
+export { ExpressionOrderLab, ExpressionOrderMessages, ExpressionOrderProps };

package/dist/math/expression-order/preset.mjs

@@ -0,0 +1,140 @@
+'use client';
+
+import { Tex } from "../../core/tex.mjs";
+import { ActionButton, AssessedChoiceGroup, IconButton } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { DEFAULT_EXPRESSION_ORDER_ROUNDS, expressionLatex, validateExpressionOrderRounds } from "./core.mjs";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronLeft, ChevronRight, RotateCcw } from "lucide-react";
+
+//#region src/math/expression-order/preset.tsx
+const DEFAULT_MESSAGES = {
+	eyebrow: "Order of operations",
+	title: "Make every operation wait its turn",
+	description: "Predict the first move, then reduce one valid step at a time.",
+	choose: "Choose the first operation",
+	check: "Check",
+	nextStep: "Show next step",
+	nextPuzzle: "Next puzzle",
+	previous: "Previous puzzle",
+	reset: "Start again",
+	correct: "Good first move",
+	tryAgain: "That operation must wait",
+	start: "Start",
+	result: "Result"
+};
+function ExpressionOrderLab({ rounds = DEFAULT_EXPRESSION_ORDER_ROUNDS, startAt = 0, title, prompt, messages } = {}) {
+	const copy = {
+		...DEFAULT_MESSAGES,
+		...messages
+	};
+	const issues = useMemo(() => validateExpressionOrderRounds(rounds), [rounds]);
+	const safeStart = Math.max(0, Math.min(rounds.length - 1, startAt));
+	const [index, setIndex] = useState(safeStart);
+	const [selected, setSelected] = useState("");
+	const [checked, setChecked] = useState(false);
+	const [step, setStep] = useState(0);
+	const round = rounds[index];
+	if (!round || issues.length > 0) return /* @__PURE__ */ jsx(Activity.Root, { children: /* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("strong", { children: "Activity configuration needs attention." }), /* @__PURE__ */ jsx("span", { children: issues[0] ?? "Add a round." })] }) });
+	const correct = selected === round.answer;
+	const fullyReduced = checked && correct && step === round.steps.length;
+	const shownExpression = step === 0 ? round.expression : round.steps[step - 1].expression;
+	const changeRound = (next) => {
+		setIndex(next);
+		setSelected("");
+		setChecked(false);
+		setStep(0);
+	};
+	const reset = () => changeRound(safeStart);
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "expression-order-activity",
+		focusLayout: "compact",
+		dir: "auto",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: copy.eyebrow,
+				title: title ?? copy.title,
+				description: prompt ?? copy.description
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [/* @__PURE__ */ jsxs("span", { children: [
+				"Puzzle ",
+				index + 1,
+				" of ",
+				rounds.length
+			] }), /* @__PURE__ */ jsx("span", { children: step === 0 ? copy.start : `Step ${step} of ${round.steps.length}` })] }),
+			/* @__PURE__ */ jsx(Activity.Workspace, { children: /* @__PURE__ */ jsx(Activity.Canvas, {
+				label: `Expression-order puzzle ${index + 1}`,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "expression-order-scene",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "expression-order-formula",
+							"aria-label": shownExpression,
+							children: /* @__PURE__ */ jsx(Tex, { tex: expressionLatex(shownExpression) })
+						}),
+						step === 0 ? /* @__PURE__ */ jsxs("section", {
+							className: "expression-order-question",
+							children: [/* @__PURE__ */ jsx("strong", { children: round.prompt }), /* @__PURE__ */ jsx(AssessedChoiceGroup, {
+								value: selected,
+								onChange: (value) => {
+									setSelected(value);
+									setChecked(false);
+								},
+								options: round.choices.map((choice) => ({
+									...choice,
+									tone: checked && choice.value === selected ? correct ? "correct" : "wrong" : void 0
+								})),
+								ariaLabel: copy.choose
+							})]
+						}) : null,
+						step > 0 ? /* @__PURE__ */ jsxs("div", {
+							className: "expression-order-rule",
+							children: [/* @__PURE__ */ jsx("span", { children: step }), /* @__PURE__ */ jsx("p", { children: round.steps[step - 1].rule })]
+						}) : null,
+						/* @__PURE__ */ jsxs("ol", {
+							className: "expression-order-trail",
+							"aria-label": "Revealed evaluation steps",
+							children: [/* @__PURE__ */ jsxs("li", {
+								"data-current": step === 0 || void 0,
+								children: [/* @__PURE__ */ jsx("span", { children: copy.start }), /* @__PURE__ */ jsx(Tex, { tex: expressionLatex(round.expression) })]
+							}), round.steps.slice(0, step).map((item, itemIndex) => /* @__PURE__ */ jsxs("li", {
+								"data-visible": "true",
+								"data-current": itemIndex + 1 === step || void 0,
+								children: [/* @__PURE__ */ jsx("span", { children: itemIndex + 1 === round.steps.length ? copy.result : `Step ${itemIndex + 1}` }), /* @__PURE__ */ jsx(Tex, { tex: expressionLatex(item.expression) })]
+							}, `${round.id}-${itemIndex}`))]
+						})
+					]
+				})
+			}) }),
+			checked ? /* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: correct ? copy.correct : copy.tryAgain }), /* @__PURE__ */ jsx("p", { children: correct ? round.steps[0]?.rule : "Compare operations at the same precedence level from left to right." })] }) : null,
+			/* @__PURE__ */ jsxs(Activity.Transport, { children: [
+				/* @__PURE__ */ jsx(IconButton, {
+					label: copy.reset,
+					onClick: reset,
+					children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					label: copy.previous,
+					onClick: () => changeRound(Math.max(0, index - 1)),
+					disabled: index === 0,
+					children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
+				}),
+				!checked || !correct ? /* @__PURE__ */ jsxs(ActionButton, {
+					onClick: () => setChecked(true),
+					disabled: !selected,
+					children: [/* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }), copy.check]
+				}) : !fullyReduced ? /* @__PURE__ */ jsxs(ActionButton, {
+					onClick: () => setStep((value) => Math.min(round.steps.length, value + 1)),
+					children: [copy.nextStep, /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })]
+				}) : index < rounds.length - 1 ? /* @__PURE__ */ jsxs(ActionButton, {
+					onClick: () => changeRound(index + 1),
+					children: [copy.nextPuzzle, /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })]
+				}) : /* @__PURE__ */ jsx("strong", { children: copy.result })
+			] })
+		]
+	});
+}
+
+//#endregion
+export { ExpressionOrderLab };