@classytic/labs 0.1.0 → 0.3.0

package/dist/math/derivation.d.mts

@@ -1,3 +1,4 @@
+import { AnswerSpec } from "../kit/answer-check.mjs";
 import { ReactNode } from "react";
 
 //#region src/math/derivation.d.ts
@@ -12,11 +13,25 @@ interface DerivationProps {
   title?: string;
   /** Reveal all steps at once instead of stepping (e.g. for print/review). */
   showAll?: boolean;
+  /**
+   * Withhold the LAST line and make the learner produce it.
+   *
+   * Without this the learner clicks Next until the answer appears, which is reading a solution,
+   * not writing one. With it the stepping stops one line short and the final line is theirs to
+   * find. That single difference is what a printed worked example cannot do, and it is the only
+   * reason this block needs to know about answers at all: the problem statement, the given
+   * quantities and any second method are prose, and belong in the MDX around it.
+   */
+  answer?: AnswerSpec;
+  /** Unit shown beside the answer box. */
+  unit?: string;
 }
 declare function Derivation({
   steps,
   title,
-  showAll
+  showAll,
+  answer,
+  unit
 }?: DerivationProps): ReactNode;
 //#endregion
 export { Derivation, DerivationProps, DerivationStep };

package/dist/math/derivation.mjs

@@ -1,21 +1,25 @@
 'use client';
 
 import { Tex } from "../core/tex.mjs";
-import { ControlBar, LabFrame } from "../kit/frame.mjs";
+import { Chip } from "../kit/controls.mjs";
+import { Activity } from "../kit/activity.mjs";
+import { checkAnswer } from "../kit/answer-check.mjs";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 //#region src/math/derivation.tsx
 /**
-* Derivation — a step-by-step algebra/equation derivation, revealed one line at a
+* Derivation, a step-by-step algebra/equation derivation, revealed one line at a
 * time. Each step is a LaTeX expression (rendered with KaTeX) plus an optional
 * justification ("subtract yₚ", "cross-multiply"). The learner clicks through;
-* the latest line is emphasized. This is how you teach a *derivation* — the
-* two-point line form, the quadratic formula, a chord-length proof — as a guided
+* the latest line is emphasized. This is how you teach a *derivation*, the
+* two-point line form, the quadratic formula, a chord-length proof, as a guided
 * sequence rather than a wall of algebra.
 *
 * Pure presentation over the engine's `<Tex>` + the shared control kit (no canvas,
-* no equation solving implied — the author supplies the steps, optionally
+* no equation solving implied, the author supplies the steps, optionally
 * generated/verified with the symbolic engine).
 */
 function normalize(steps) {
@@ -25,87 +29,148 @@ function normalize(steps) {
 		note: "add your steps"
 	}];
 }
-function Derivation({ steps, title = "Derivation", showAll = false } = {}) {
+function Derivation({ steps, title = "Derivation", showAll = false, answer, unit } = {}) {
 	const all = normalize(steps);
 	const [step, setStep] = useState(showAll ? all.length - 1 : 0);
+	const [solved, setSolved] = useState(false);
+	const [raw, setRaw] = useState("");
+	const [missed, setMissed] = useState(0);
+	const [revealed, setRevealed] = useState(false);
 	useEffect(() => {
 		setStep(showAll ? all.length - 1 : 0);
+		setSolved(false);
+		setRevealed(false);
 	}, [showAll, all.length]);
+	const graded = !!answer && !showAll && all.length >= 2;
+	const last = all.length - 1;
+	const ceiling = graded && !solved ? last - 1 : last;
+	const atCeiling = step >= ceiling;
+	const shown = all.slice(0, Math.min(step, ceiling) + 1);
 	const figure = /* @__PURE__ */ jsx("ol", {
-		style: {
-			listStyle: "none",
-			margin: 0,
-			padding: 0,
-			display: "flex",
-			flexDirection: "column",
-			gap: 10
-		},
-		children: all.slice(0, step + 1).map((s, i) => /* @__PURE__ */ jsxs("li", {
-			style: {
-				display: "flex",
-				flexWrap: "wrap",
-				alignItems: "baseline",
-				gap: "4px 16px",
-				borderRadius: 8,
-				padding: "8px 12px",
-				transition: "background 120ms",
-				background: i === step && !showAll ? "color-mix(in oklab, var(--primary, var(--stage-accent)) 12%, transparent)" : "transparent"
-			},
+		className: "math-derivation-list",
+		children: shown.map((s, i) => /* @__PURE__ */ jsxs("li", {
+			className: "math-derivation-step",
+			"data-current": i === step && !showAll || void 0,
 			children: [
 				/* @__PURE__ */ jsx("span", {
-					style: {
-						fontFamily: "ui-monospace, monospace",
-						fontSize: 12,
-						opacity: .55
-					},
+					className: "math-derivation-index",
 					children: i + 1
 				}),
 				/* @__PURE__ */ jsx("span", {
-					style: { fontSize: 15 },
+					className: "math-derivation-equation",
 					children: /* @__PURE__ */ jsx(Tex, { tex: s.tex })
 				}),
-				s.note && /* @__PURE__ */ jsxs("span", {
-					style: {
-						fontSize: 13,
-						opacity: .65
-					},
-					children: ["— ", s.note]
+				s.note && /* @__PURE__ */ jsx("span", {
+					className: "math-derivation-note",
+					children: s.note
 				})
 			]
 		}, i))
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt: "Work through the derivation one line at a time.",
-		controls: !showAll ? /* @__PURE__ */ jsxs(ControlBar, { children: [
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "lab-chip",
+	const controls = !showAll ? /* @__PURE__ */ jsxs("div", {
+		className: "lab-activity-fields",
+		children: [
+			/* @__PURE__ */ jsx(Chip, {
+				selected: false,
 				onClick: () => setStep((s) => Math.max(0, s - 1)),
 				disabled: step === 0,
 				children: "← Back"
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				style: {
-					fontVariantNumeric: "tabular-nums",
-					opacity: .75
-				},
+				className: "math-derivation-progress",
 				children: [
 					"step ",
-					step + 1,
+					shown.length,
 					" / ",
 					all.length
 				]
 			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "lab-chip",
-				onClick: () => setStep((s) => Math.min(all.length - 1, s + 1)),
-				disabled: step >= all.length - 1,
+			/* @__PURE__ */ jsx(Chip, {
+				selected: false,
+				onClick: () => setStep((s) => Math.min(ceiling, s + 1)),
+				disabled: atCeiling,
 				children: "Next →"
 			})
-		] }) : void 0,
-		children: figure
+		]
+	}) : void 0;
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "math-derivation-activity",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Mathematical reasoning",
+				title,
+				description: "Work through the derivation one line at a time."
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: showAll ? "Complete derivation" : `Step ${shown.length}` }),
+				/* @__PURE__ */ jsxs("span", { children: [all.length, " lines"] }),
+				graded ? /* @__PURE__ */ jsx("span", { children: !solved ? "last line is yours" : revealed ? "last line shown" : "you finished it" }) : null
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Derivation steps",
+				children: figure
+			}), graded && !solved && atCeiling ? /* @__PURE__ */ jsxs("div", {
+				className: "math-derivation-finish",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "math-derivation-ask",
+						children: missed >= 2 ? "Still not it. Type the last line, or show it and study what you missed." : "The last line is yours. What does it come to? Show it if you are stuck."
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "lab-field-row",
+						children: [
+							/* @__PURE__ */ jsx(Input, {
+								value: raw,
+								placeholder: "last line",
+								"aria-label": "Final line",
+								onChange: (e) => setRaw(e.target.value)
+							}),
+							unit ? /* @__PURE__ */ jsx("span", {
+								className: "math-derivation-unit",
+								children: unit
+							}) : null,
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								size: "sm",
+								disabled: !raw.trim(),
+								onClick: () => {
+									if (checkAnswer(answer, raw)) {
+										setSolved(true);
+										setStep(last);
+									} else setMissed((n) => n + 1);
+								},
+								children: "Check"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								type: "button",
+								size: "sm",
+								variant: "ghost",
+								onClick: () => {
+									setRevealed(true);
+									setSolved(true);
+									setStep(last);
+								},
+								children: "Show the last line"
+							})
+						]
+					}),
+					missed > 0 ? /* @__PURE__ */ jsx("p", {
+						className: "math-derivation-verdict",
+						children: "Not that. Read the line above again and carry it through."
+					}) : null
+				]
+			}) : null] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "How to read this" }), /* @__PURE__ */ jsx("div", { children: "Compare each line with the one before it and name the step that got you there." })] }),
+			/* @__PURE__ */ jsxs(Activity.LiveRegion, { children: [
+				"Showing derivation step ",
+				shown.length,
+				" of ",
+				all.length,
+				".",
+				shown.at(-1)?.note ? ` ${shown.at(-1)?.note}` : ""
+			] }),
+			!showAll && /* @__PURE__ */ jsx(Activity.Transport, { children: controls })
+		]
 	});
 }
 

package/dist/math/derivative-explorer/index.d.mts

@@ -1 +1,2 @@
-import { DerivativeExplorer, DerivativeExplorerProps } from "./preset.mjs";
+import { DerivativeExplorer, DerivativeExplorerProps } from "./preset.mjs";
+export { DerivativeExplorer, type DerivativeExplorerProps };

package/dist/math/derivative-explorer/index.mjs

@@ -0,0 +1,3 @@
+import { DerivativeExplorer } from "./preset.mjs";
+
+export { DerivativeExplorer };

package/dist/math/derivative-explorer/preset.mjs

@@ -2,49 +2,30 @@
 
 import { clamp } from "../../core/util.mjs";
 import { Tex as Tex$1 } from "../../core/tex.mjs";
-import { LabStyles, Slider } from "../../kit/controls.mjs";
-import { ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
+import { Slider } from "../../kit/controls.mjs";
+import { Field } from "../../kit/frame.mjs";
+import { derivativeAt, functionViewport, normalizeRange, secantSlope, 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, Segment, Stage, compileExpr, differentiate, evaluate, simplify, toLatex } from "@classytic/stage";
 
 //#region src/math/derivative-explorer/preset.tsx
 /**
-* DerivativeExplorer — "the derivative is a slope," on the @classytic/stage
+* DerivativeExplorer, "the derivative is a slope," on the @classytic/stage
 * engine. Plot f(x); drag the point along the curve and shrink the gap h to
 * watch the SECANT collapse onto the TANGENT (exact f'(x) from the shared expr
 * engine's symbolic `differentiate`, numerical fallback). Replaces the canvas
-* version — now SVG, accessible, themed, KaTeX formulas via the Tex primitive.
+* version, now SVG, accessible, themed, KaTeX formulas via the Tex primitive.
 */
-const numericSlope = (f, x) => (f(x + 1e-4) - f(x - 1e-4)) / 2e-4;
-function autoY(f, xMin, xMax) {
-	const ys = [];
-	for (let i = 0; i <= 200; i++) {
-		const y = f(xMin + (xMax - xMin) * i / 200);
-		if (Number.isFinite(y)) ys.push(y);
-	}
-	if (!ys.length) return [-1, 1];
-	ys.sort((a, b) => a - b);
-	let lo = Math.min(ys[Math.floor(ys.length * .02)] ?? -1, 0);
-	let hi = Math.max(ys[Math.floor(ys.length * .98)] ?? 1, 0);
-	if (lo === hi) {
-		lo -= 1;
-		hi += 1;
-	}
-	const pad = (hi - lo) * .15;
-	return [lo - pad, hi + pad];
-}
 function DerivativeExplorer({ equation = "0.15*x^3 - x", xRange = [-4, 4], startX = 1, title = "The derivative is a slope", height = 340 } = {}) {
-	const [xMin, xMax] = xRange;
-	const [x0, setX0] = useState(clamp(startX, xMin, xMax));
+	const [xMin, xMax] = normalizeRange(xRange, [-4, 4]);
+	const initialX = valueInRange(startX, [xMin, xMax], 1);
+	const [x0, setX0] = useState(initialX);
 	const [h, setH] = useState(1.2);
 	useEffect(() => {
-		setX0(clamp(startX, xMin, xMax));
-	}, [
-		startX,
-		xMin,
-		xMax
-	]);
+		setX0(initialX);
+	}, [initialX]);
 	const model = useMemo(() => {
 		const res = compileExpr(equation);
 		if (!res.ast) return {
@@ -60,43 +41,34 @@ function DerivativeExplorer({ equation = "0.15*x^3 - x", xRange = [-4, 4], start
 		} catch {
 			dNode = null;
 		}
-		const slopeAt = dNode ? (x) => evaluate(dNode, { x }) : (x) => numericSlope(f, x);
+		const slopeAt = dNode ? (x) => evaluate(dNode, { x }) : (x) => derivativeAt(f, x);
 		return {
 			ok: true,
 			f,
 			fLatex: toLatex(ast),
 			dfLatex: dNode ? toLatex(dNode) : null,
-			slopeAt
+			slopeAt,
+			symbolic: dNode !== null
 		};
 	}, [equation]);
-	if (!model.ok) return /* @__PURE__ */ jsxs("div", {
-		className: "not-prose",
-		children: [/* @__PURE__ */ jsx("p", {
-			style: { fontWeight: 600 },
-			children: title
-		}), /* @__PURE__ */ jsxs("div", {
-			style: {
-				padding: 12,
-				fontSize: 13,
-				color: "var(--stage-danger)"
-			},
-			children: [
-				"“",
-				equation,
-				"” — ",
-				model.error
-			]
-		})]
+	if (!model.ok) return /* @__PURE__ */ jsx(MathExpressionError, {
+		title,
+		expression: equation,
+		error: model.error
 	});
-	const { f, slopeAt, fLatex, dfLatex } = model;
-	const [yMin, yMax] = autoY(f, xMin, xMax);
+	const { f, slopeAt, fLatex, dfLatex, symbolic } = model;
+	const { yMin, yMax } = functionViewport(f, [xMin, xMax]);
 	const y0 = f(x0);
-	const x1 = x0 + h;
-	const y1 = f(x1);
-	const secant = (y1 - y0) / (x1 - x0);
+	const roomRight = xMax - x0;
+	const direction = roomRight >= Math.min(h, (xMax - xMin) / 20) ? 1 : -1;
+	const available = direction > 0 ? roomRight : x0 - xMin;
+	const effectiveH = direction * Math.min(h, Math.max(.001, available));
+	const y1 = f(x0 + effectiveH);
+	const secant = secantSlope(f, x0, effectiveH);
 	const m = slopeAt(x0);
+	const error = Math.abs(secant - m);
 	const lineY = (slope, atX) => y0 + slope * (atX - x0);
-	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LabStyles, {}), /* @__PURE__ */ jsxs(Stage, {
+	const figure = /* @__PURE__ */ jsxs(Stage, {
 		view: {
 			xMin,
 			xMax,
@@ -104,10 +76,11 @@ function DerivativeExplorer({ equation = "0.15*x^3 - x", xRange = [-4, 4], start
 			yMax
 		},
 		height,
+		preserveAspect: false,
 		ariaLabel: `Tangent to ${equation} at x = ${x0.toFixed(2)}`,
 		children: [
 			/* @__PURE__ */ jsx(Grid, {}),
-			/* @__PURE__ */ jsx(Axes, {}),
+			/* @__PURE__ */ jsx(Axes, { labels: true }),
 			/* @__PURE__ */ jsx(Plot.OfX, {
 				y: f,
 				domain: [xMin, xMax],
@@ -149,77 +122,92 @@ function DerivativeExplorer({ equation = "0.15*x^3 - x", xRange = [-4, 4], start
 				ariaLabel: "point on the curve"
 			})
 		]
-	})] });
-	return /* @__PURE__ */ jsx(LabFrame, {
+	});
+	const controls = /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Field, {
+		label: "Secant gap h",
+		value: Math.abs(effectiveH).toFixed(2),
+		children: /* @__PURE__ */ jsx(Slider, {
+			value: h,
+			min: .05,
+			max: 3,
+			step: .05,
+			onChange: setH,
+			ariaLabel: "secant gap h"
+		})
+	}) });
+	const details = /* @__PURE__ */ jsxs("div", {
+		className: "math-equation-detail",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "math-equation-line",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "math-equation-label",
+					children: "f(x) ="
+				}),
+				" ",
+				/* @__PURE__ */ jsx(Tex$1, { tex: fLatex })
+			]
+		}), dfLatex && /* @__PURE__ */ jsxs("span", {
+			className: "math-equation-line math-equation-derivative",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "math-equation-label",
+					children: "f′(x) ="
+				}),
+				" ",
+				/* @__PURE__ */ jsx(Tex$1, { tex: dfLatex })
+			]
+		})]
+	});
+	const reset = () => {
+		setX0(initialX);
+		setH(1.2);
+	};
+	return /* @__PURE__ */ jsx(MathActivity, {
+		className: "math-derivative-explorer",
+		eyebrow: "Calculus · derivatives",
 		title,
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
-			/* @__PURE__ */ jsx(Field, {
-				label: "gap h",
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: h,
-					min: .05,
-					max: 3,
-					step: .05,
-					onChange: setH,
-					ariaLabel: "secant gap h"
-				})
-			}),
-			/* @__PURE__ */ jsxs("span", {
-				style: { opacity: .8 },
-				children: ["x = ", /* @__PURE__ */ jsx("strong", { children: x0.toFixed(2) })]
-			}),
-			/* @__PURE__ */ jsxs("span", {
-				style: { opacity: .8 },
-				children: ["secant slope ", /* @__PURE__ */ jsx("strong", { children: Number.isFinite(secant) ? secant.toFixed(2) : "—" })]
-			}),
-			/* @__PURE__ */ jsxs("span", {
-				style: {
-					color: "var(--stage-good)",
-					fontWeight: 600
-				},
-				children: ["f′(x) = ", Number.isFinite(m) ? m.toFixed(2) : "—"]
-			})
+		description: "Move the point, then shrink h. The secant line approaches the tangent and its slope approaches the derivative.",
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("strong", { children: error < .02 ? "Tangent resolved" : "Secant approaching" }),
+			/* @__PURE__ */ jsxs("span", { children: ["x ", x0.toFixed(2)] }),
+			/* @__PURE__ */ jsxs("span", { children: ["h ", Math.abs(effectiveH).toFixed(2)] }),
+			/* @__PURE__ */ jsx("span", { children: symbolic ? "symbolic derivative" : "numerical derivative" })
 		] }),
-		footer: /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				flexWrap: "wrap",
-				gap: "4px 18px",
-				padding: "8px 2px 0",
-				fontSize: 14
-			},
-			children: [/* @__PURE__ */ jsxs("span", {
-				style: {
-					display: "inline-flex",
-					alignItems: "center",
-					gap: 6
-				},
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						style: { opacity: .6 },
-						children: "f(x) ="
-					}),
-					" ",
-					/* @__PURE__ */ jsx(Tex$1, { tex: fLatex })
-				]
-			}), dfLatex && /* @__PURE__ */ jsxs("span", {
-				style: {
-					display: "inline-flex",
-					alignItems: "center",
-					gap: 6,
-					color: "var(--stage-good)"
-				},
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						style: { opacity: .7 },
-						children: "f′(x) ="
-					}),
+		figure,
+		measurements: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "math-result-probe",
+			children: [
+				/* @__PURE__ */ jsx("span", { children: "Instantaneous rate" }),
+				/* @__PURE__ */ jsxs("strong", { children: ["f′(x) = ", Number.isFinite(m) ? m.toFixed(3) : "—"] }),
+				/* @__PURE__ */ jsxs("small", { children: [
+					"secant ",
+					Number.isFinite(secant) ? secant.toFixed(3) : "—",
+					" · error",
 					" ",
-					/* @__PURE__ */ jsx(Tex$1, { tex: dfLatex })
-				]
+					Number.isFinite(error) ? error.toFixed(3) : "—"
+				] })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "math-slope-legend",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-line": "secant",
+				children: "Secant"
+			}), /* @__PURE__ */ jsx("span", {
+				"data-line": "tangent",
+				children: "Tangent"
 			})]
+		})] }),
+		controls,
+		conclusion: error < .02 ? "The secant and tangent slopes now nearly agree: this is the derivative as a limit." : "Reduce h to make the secant slope converge toward the instantaneous tangent slope.",
+		transport: /* @__PURE__ */ jsx(MathResetTransport, {
+			onReset: reset,
+			state: "Drag the point or refine h",
+			detail: `slope ${Number.isFinite(m) ? m.toFixed(3) : "—"}`
 		}),
-		children: figure
+		details,
+		graphLabel: "Function, secant, and tangent graph",
+		inspectorLabel: "Slope convergence"
 	});
 }
 

package/dist/math/differential-equation/index.d.mts

@@ -0,0 +1,2 @@
+import { DifferentialEquationExplorer, DifferentialEquationExplorerProps } from "./preset.mjs";
+export { DifferentialEquationExplorer, type DifferentialEquationExplorerProps };

package/dist/math/differential-equation/index.mjs

@@ -0,0 +1,3 @@
+import { DifferentialEquationExplorer } from "./preset.mjs";
+
+export { DifferentialEquationExplorer };

package/dist/math/differential-equation/preset.d.mts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+
+//#region src/math/differential-equation/preset.d.ts
+interface DifferentialEquationExplorerProps {
+  equation?: string;
+  xRange?: [number, number];
+  yRange?: [number, number];
+  initial?: [number, number];
+  stepSize?: number;
+  probe?: number;
+  title?: string;
+  height?: number;
+}
+declare function DifferentialEquationExplorer({
+  equation,
+  xRange,
+  yRange,
+  initial: initialProp,
+  stepSize: stepProp,
+  probe: probeProp,
+  title,
+  height
+}?: DifferentialEquationExplorerProps): ReactNode;
+//#endregion
+export { DifferentialEquationExplorer, DifferentialEquationExplorerProps };