@classytic/labs 0.1.0

package/dist/math/harmonic-form/preset.mjs

@@ -0,0 +1,387 @@
+'use client';
+
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { Chip, Slider } from "../../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { ChallengeCard, useChallenge, useCheckpoint } from "../../kit/pedagogy.mjs";
+import { AngleArc, RightAngleMark } from "../../kit/diagram.mjs";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Axes, Dot, Grid, Label, Plot, Segment, Stage, Vector } from "@classytic/stage";
+
+//#region src/math/harmonic-form/preset.tsx
+/**
+* HarmonicFormLab — "two waves are secretly one": a cos x + b sin x = R cos(x + α).
+*
+* The whole insight is that adding a cosine and a sine of the SAME frequency gives
+* a SINGLE shifted cosine — and you can SEE why with phasors. The cos term is a
+* vector of length a along the axis; the sin term is a vector of length b at a
+* right angle to it (sin lags cos by 90°). Add them tip-to-tail and the resultant
+* has length R = √(a²+b²) at angle α — exactly the amplitude and phase of the one
+* combined wave. Drag a and b: the phasor triangle and the three waves update live,
+* and the messy two-wave sum visibly collapses onto one clean R cos(x + α).
+*
+* This builds the INTUITION for the auxiliary-angle form (Edexcel "express in the
+* form R cos(x+α)"). The exact R and α arithmetic is left to written working / a
+* paired derivation — the lab is the picture, not the algebra.
+*
+* Convention: a cos x + b sin x = R cos(x + α) ⇒ a = R cos α, b = −R sin α, so
+* α = atan2(−b, a) and the resultant phasor is (a, −b). Tokenized SVG; accessible.
+*/
+const LIM = 8;
+const PHV = 9;
+const WAV = 12;
+const C_COS = "var(--stage-accent-2)";
+const C_SIN = "var(--stage-warn)";
+const C_R = "var(--stage-good)";
+const HARMONIC_CHALLENGE = [{
+	id: "shape",
+	prompt: "a cos x + b sin x (same frequency) always combines into…",
+	choices: [
+		{
+			value: "one",
+			label: "one shifted cosine wave"
+		},
+		{
+			value: "two",
+			label: "two separate waves"
+		},
+		{
+			value: "double",
+			label: "a wave of double the frequency"
+		}
+	],
+	answer: "one",
+	explain: "Same frequency in → same frequency out: only the amplitude (R) and the phase (α) change."
+}, {
+	id: "amp",
+	prompt: "Keep a fixed and increase |b|. The amplitude R of the combined wave…",
+	choices: [
+		{
+			value: "up",
+			label: "increases"
+		},
+		{
+			value: "down",
+			label: "decreases"
+		},
+		{
+			value: "same",
+			label: "stays the same"
+		}
+	],
+	answer: "up",
+	explain: "R = √(a² + b²) is the hypotenuse — growing either coefficient lengthens it."
+}];
+/** LaTeX for "a cos x ± b sin x", tidy for ±1 / 0 coefficients. */
+function lhsTex(a, b) {
+	const cosPart = `${a === 1 ? "" : a === -1 ? "-" : a}\\cos x`;
+	const bAbs = Math.abs(b);
+	const sinPart = `${bAbs === 1 ? "" : bAbs}\\sin x`;
+	return `${cosPart} ${b < 0 ? "-" : "+"} ${sinPart}`;
+}
+function HarmonicFormLab({ a: a0 = 4, b: b0 = -3, title = "Express a cos x + b sin x as one wave R cos(x + α)", prompt = "A cosine plus a sine of the same frequency is secretly a single shifted cosine. Drag a and b and watch the phasors add up.", objectives } = {}) {
+	const [a, setA] = useState(a0);
+	const [b, setB] = useState(b0);
+	const [showComp, setShowComp] = useState(true);
+	const challenge = useChallenge(HARMONIC_CHALLENGE);
+	useCheckpoint({
+		solved: challenge.allCorrect,
+		activity: "harmonic-form"
+	});
+	const R = Math.hypot(a, b);
+	const alpha = Math.atan2(-b, a);
+	const sum = (x) => a * Math.cos(x) + b * Math.sin(x);
+	const O = {
+		x: 0,
+		y: 0
+	};
+	const corner = {
+		x: a,
+		y: 0
+	};
+	const tip = {
+		x: a,
+		y: -b
+	};
+	const peakX = -alpha;
+	const phasor = /* @__PURE__ */ jsxs(Stage, {
+		view: {
+			xMin: -9,
+			xMax: PHV,
+			yMin: -9,
+			yMax: PHV
+		},
+		height: 280,
+		ariaLabel: `Phasor diagram: cosine component ${a}, sine component ${b}, resultant length ${R.toFixed(2)}`,
+		children: [
+			/* @__PURE__ */ jsx(Grid, { step: 3 }),
+			/* @__PURE__ */ jsx(Axes, {}),
+			showComp && a !== 0 && /* @__PURE__ */ jsx(Vector, {
+				tail: O,
+				tip: corner,
+				color: C_COS,
+				weight: 2.5
+			}),
+			showComp && b !== 0 && /* @__PURE__ */ jsx(Vector, {
+				tail: corner,
+				tip,
+				color: C_SIN,
+				weight: 2.5
+			}),
+			/* @__PURE__ */ jsx(Vector, {
+				tail: O,
+				tip,
+				color: C_R,
+				weight: 3.5
+			}),
+			a !== 0 && b !== 0 && /* @__PURE__ */ jsx(RightAngleMark, {
+				at: corner,
+				u: {
+					x: -1,
+					y: 0
+				},
+				v: {
+					x: 0,
+					y: -b
+				}
+			}),
+			R > .5 && /* @__PURE__ */ jsx(AngleArc, {
+				at: O,
+				from: {
+					x: 1,
+					y: 0
+				},
+				to: tip,
+				rPx: 28,
+				label: "α"
+			}),
+			showComp && a !== 0 && /* @__PURE__ */ jsx(Label, {
+				x: a / 2,
+				y: 0,
+				text: "a",
+				color: C_COS,
+				size: 13,
+				dy: 16
+			}),
+			showComp && b !== 0 && /* @__PURE__ */ jsx(Label, {
+				x: a,
+				y: -b / 2,
+				text: "b",
+				color: C_SIN,
+				size: 13,
+				dx: 14
+			}),
+			/* @__PURE__ */ jsx(Label, {
+				x: tip.x / 2,
+				y: tip.y / 2,
+				text: "R",
+				color: C_R,
+				size: 14,
+				dx: -12,
+				dy: -6
+			})
+		]
+	});
+	const waves = /* @__PURE__ */ jsxs(Stage, {
+		view: {
+			xMin: -Math.PI,
+			xMax: 2 * Math.PI,
+			yMin: -12,
+			yMax: WAV
+		},
+		height: 280,
+		preserveAspect: false,
+		ariaLabel: "The cosine term, the sine term, and their combined single wave",
+		children: [
+			/* @__PURE__ */ jsx(Grid, {}),
+			/* @__PURE__ */ jsx(Axes, {}),
+			/* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: -Math.PI,
+					y: R
+				},
+				to: {
+					x: 2 * Math.PI,
+					y: R
+				},
+				color: C_R,
+				weight: 1,
+				dashed: true,
+				opacity: .4
+			}),
+			/* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: -Math.PI,
+					y: -R
+				},
+				to: {
+					x: 2 * Math.PI,
+					y: -R
+				},
+				color: C_R,
+				weight: 1,
+				dashed: true,
+				opacity: .4
+			}),
+			showComp && /* @__PURE__ */ jsx(Plot.OfX, {
+				y: (x) => a * Math.cos(x),
+				color: C_COS,
+				weight: 1.5
+			}),
+			showComp && /* @__PURE__ */ jsx(Plot.OfX, {
+				y: (x) => b * Math.sin(x),
+				color: C_SIN,
+				weight: 1.5
+			}),
+			/* @__PURE__ */ jsx(Plot.OfX, {
+				y: sum,
+				color: C_R,
+				weight: 3
+			}),
+			/* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: peakX,
+					y: 0
+				},
+				to: {
+					x: peakX,
+					y: R
+				},
+				color: "var(--stage-fg)",
+				weight: 1,
+				dashed: true,
+				opacity: .4
+			}),
+			/* @__PURE__ */ jsx(Dot, {
+				x: peakX,
+				y: R,
+				r: 5,
+				color: C_R
+			}),
+			/* @__PURE__ */ jsx(Label, {
+				x: peakX,
+				y: R,
+				text: "R",
+				color: C_R,
+				size: 13,
+				dy: -10
+			}),
+			/* @__PURE__ */ jsx(Label, {
+				x: peakX,
+				y: 0,
+				text: "x = −α",
+				color: "var(--stage-muted)",
+				size: 11,
+				dy: 16
+			})
+		]
+	});
+	const figure = /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: 12,
+			alignItems: "stretch"
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				flex: "1 1 240px",
+				minWidth: 240
+			},
+			children: phasor
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				flex: "2 1 320px",
+				minWidth: 300
+			},
+			children: waves
+		})]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		aside: /* @__PURE__ */ jsx(Callout, {
+			tone: "result",
+			children: /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "grid",
+					gap: 8,
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: [
+					/* @__PURE__ */ jsx(Tex$1, { tex: lhsTex(a, b) }),
+					/* @__PURE__ */ jsx(Tex$1, { tex: `= ${R.toFixed(2)}\\cos(x ${alpha < 0 ? "-" : "+"} ${Math.abs(alpha).toFixed(3)})` }),
+					/* @__PURE__ */ jsxs("span", {
+						style: { fontSize: 13 },
+						children: ["R = √(a² + b²) = ", /* @__PURE__ */ jsx("strong", { children: R.toFixed(3) })]
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						style: { fontSize: 13 },
+						children: [
+							"α = ",
+							/* @__PURE__ */ jsx("strong", { children: alpha.toFixed(3) }),
+							" rad = ",
+							(alpha * 180 / Math.PI).toFixed(1),
+							"°"
+						]
+					})
+				]
+			})
+		}),
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx(Field, {
+				label: "a (cos x)",
+				value: a,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: a,
+					min: -8,
+					max: LIM,
+					step: 1,
+					onChange: setA,
+					ariaLabel: "coefficient of cosine"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "b (sin x)",
+				value: b,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: b,
+					min: -8,
+					max: LIM,
+					step: 1,
+					onChange: setB,
+					ariaLabel: "coefficient of sine"
+				})
+			}),
+			/* @__PURE__ */ jsx(Chip, {
+				selected: showComp,
+				onClick: () => setShowComp((v) => !v),
+				children: "show components"
+			})
+		] }),
+		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("p", {
+				className: "lab-prompt",
+				children: [
+					"The two coloured waves add to the bold one. Its height is ",
+					/* @__PURE__ */ jsx(Tex$1, { tex: "R=\\sqrt{a^2+b^2}" }),
+					" and it peaks at ",
+					/* @__PURE__ */ jsx(Tex$1, { tex: "x=-\\alpha" }),
+					" — the phasor's length and angle."
+				]
+			}),
+			/* @__PURE__ */ jsx(ChallengeCard, {
+				questions: HARMONIC_CHALLENGE,
+				state: challenge,
+				title: "Predict"
+			}),
+			/* @__PURE__ */ jsx(LiveRegion, { children: `${a} cos x ${b < 0 ? "minus" : "plus"} ${Math.abs(b)} sin x equals ${R.toFixed(2)} cos(x ${alpha < 0 ? "minus" : "plus"} ${Math.abs(alpha).toFixed(3)}).` })
+		] }),
+		children: figure
+	});
+}
+
+//#endregion
+export { HarmonicFormLab };

package/dist/math/index.d.mts

@@ -0,0 +1,25 @@
+import { GraphEquation, GraphParam, Grapher, GrapherProps } from "./grapher/preset.mjs";
+import { DerivativeExplorer, DerivativeExplorerProps } from "./derivative-explorer/preset.mjs";
+import { IntegralExplorer, IntegralExplorerProps } from "./integral-explorer/preset.mjs";
+import { LimitExplorer, LimitExplorerProps } from "./limit-explorer/preset.mjs";
+import { LinearSystemLab, LinearSystemProps, SystemLine } from "./linear-system/preset.mjs";
+import { NumberLineLab, NumberLineProps } from "./number-line/preset.mjs";
+import { AREA_MODEL_ASSET } from "./area-model/asset.mjs";
+import { AreaModelLab, AreaModelProps, areaModelDoc } from "./area-model/preset.mjs";
+import { PATTERN_FIGURE_ASSET } from "./pattern/asset.mjs";
+import { GrowingPatternLab, GrowingPatternProps, growingPatternDoc } from "./pattern/preset.mjs";
+import { MYSTERY_BUCKET_ASSET } from "./mystery-bucket/asset.mjs";
+import { MysteryBucketLab, MysteryBucketProps, mysteryBucketDoc } from "./mystery-bucket/preset.mjs";
+import { BALANCE_ALGEBRA_ASSET } from "./balance-algebra/asset.mjs";
+import { BalanceAlgebraLab, BalanceAlgebraProps, BalanceEquation, balanceAlgebraDoc } from "./balance-algebra/preset.mjs";
+import { ParabolaProps, VertexParabolaLab } from "./parabola/preset.mjs";
+import { HarmonicFormLab, HarmonicFormProps } from "./harmonic-form/preset.mjs";
+import { FunctionMachineLab, FunctionMachineProps } from "./function-machine/preset.mjs";
+import { TRIG_FNS, TrigExplorer, TrigFn } from "./trig-explorer.mjs";
+import { Derivation, DerivationProps, DerivationStep } from "./derivation.mjs";
+import { GradientDescent, GradientDescentProps } from "./gradient-descent.mjs";
+import { AnswerSpec, ExprCheckOpts, checkAnswer, checkExpression, checkNumber, parseValue } from "../kit/answer-check.mjs";
+import { Derived, InteractiveProblem, InteractiveProblemProps, ProblemAsk, ProblemEquation, ProblemParam } from "./interactive/preset.mjs";
+import { TriangleTrig, TriangleTrigProps } from "./triangle-trig/preset.mjs";
+import { Fn1, Line, areaBetween, integrate, intersections, normalAt, roots, tangentAt } from "../kit/expr-analysis.mjs";
+export { AREA_MODEL_ASSET, type AnswerSpec, AreaModelLab, type AreaModelProps, BALANCE_ALGEBRA_ASSET, BalanceAlgebraLab, type BalanceAlgebraProps, type BalanceEquation, Derivation, type DerivationProps, type DerivationStep, DerivativeExplorer, type DerivativeExplorerProps, type Derived, type ExprCheckOpts, type Fn1, FunctionMachineLab, type FunctionMachineProps, GradientDescent, type GradientDescentProps, type GraphEquation, type GraphParam, Grapher, type GrapherProps, GrowingPatternLab, type GrowingPatternProps, HarmonicFormLab, type HarmonicFormProps, IntegralExplorer, type IntegralExplorerProps, InteractiveProblem, type InteractiveProblemProps, LimitExplorer, type LimitExplorerProps, type Line, LinearSystemLab, type LinearSystemProps, MYSTERY_BUCKET_ASSET, MysteryBucketLab, type MysteryBucketProps, NumberLineLab, type NumberLineProps, PATTERN_FIGURE_ASSET, type ParabolaProps, type ProblemAsk, type ProblemEquation, type ProblemParam, type SystemLine, TRIG_FNS, TriangleTrig, type TriangleTrigProps, TrigExplorer, type TrigFn, VertexParabolaLab, areaBetween, areaModelDoc, balanceAlgebraDoc, checkAnswer, checkExpression, checkNumber, growingPatternDoc, integrate, intersections, mysteryBucketDoc, normalAt, parseValue, roots, tangentAt };

package/dist/math/index.mjs

@@ -0,0 +1,26 @@
+import { Grapher } from "./grapher/preset.mjs";
+import { DerivativeExplorer } from "./derivative-explorer/preset.mjs";
+import { IntegralExplorer } from "./integral-explorer/preset.mjs";
+import { LimitExplorer } from "./limit-explorer/preset.mjs";
+import { LinearSystemLab } from "./linear-system/preset.mjs";
+import { NumberLineLab } from "./number-line/preset.mjs";
+import { AREA_MODEL_ASSET } from "./area-model/asset.mjs";
+import { AreaModelLab, areaModelDoc } from "./area-model/preset.mjs";
+import { PATTERN_FIGURE_ASSET } from "./pattern/asset.mjs";
+import { GrowingPatternLab, growingPatternDoc } from "./pattern/preset.mjs";
+import { MYSTERY_BUCKET_ASSET } from "./mystery-bucket/asset.mjs";
+import { MysteryBucketLab, mysteryBucketDoc } from "./mystery-bucket/preset.mjs";
+import { BALANCE_ALGEBRA_ASSET } from "./balance-algebra/asset.mjs";
+import { BalanceAlgebraLab, balanceAlgebraDoc } from "./balance-algebra/preset.mjs";
+import { VertexParabolaLab } from "./parabola/preset.mjs";
+import { HarmonicFormLab } from "./harmonic-form/preset.mjs";
+import { FunctionMachineLab } from "./function-machine/preset.mjs";
+import { TRIG_FNS, TrigExplorer } from "./trig-explorer.mjs";
+import { Derivation } from "./derivation.mjs";
+import { GradientDescent } from "./gradient-descent.mjs";
+import { areaBetween, integrate, intersections, normalAt, roots, tangentAt } from "../kit/expr-analysis.mjs";
+import { checkAnswer, checkExpression, checkNumber, parseValue } from "../kit/answer-check.mjs";
+import { InteractiveProblem } from "./interactive/preset.mjs";
+import { TriangleTrig } from "./triangle-trig/preset.mjs";
+
+export { AREA_MODEL_ASSET, AreaModelLab, BALANCE_ALGEBRA_ASSET, BalanceAlgebraLab, Derivation, DerivativeExplorer, FunctionMachineLab, GradientDescent, Grapher, GrowingPatternLab, HarmonicFormLab, IntegralExplorer, InteractiveProblem, LimitExplorer, LinearSystemLab, MYSTERY_BUCKET_ASSET, MysteryBucketLab, NumberLineLab, PATTERN_FIGURE_ASSET, TRIG_FNS, TriangleTrig, TrigExplorer, VertexParabolaLab, areaBetween, areaModelDoc, balanceAlgebraDoc, checkAnswer, checkExpression, checkNumber, growingPatternDoc, integrate, intersections, mysteryBucketDoc, normalAt, parseValue, roots, tangentAt };

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

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

package/dist/math/integral-explorer/preset.d.mts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+
+//#region src/math/integral-explorer/preset.d.ts
+interface IntegralExplorerProps {
+  equation?: string;
+  xRange?: [number, number];
+  a?: number;
+  b?: number;
+  n?: number;
+  title?: string;
+  height?: number;
+}
+declare function IntegralExplorer({
+  equation,
+  xRange,
+  a: aInit,
+  b: bInit,
+  n: nInit,
+  title,
+  height
+}?: IntegralExplorerProps): ReactNode;
+//#endregion
+export { IntegralExplorer, IntegralExplorerProps };

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

@@ -0,0 +1,217 @@
+'use client';
+
+import { clamp } from "../../core/util.mjs";
+import { integrate, riemannSum } from "../../core/numeric.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 { useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Axes, Grid, MovableDot, Plot, Polygon, Stage, compileExpr, evaluate, toLatex } from "@classytic/stage";
+
+//#region src/math/integral-explorer/preset.tsx
+/**
+* IntegralExplorer — the integral as "area under the curve," on @classytic/stage.
+* Shades f(x) over [a,b] with n Riemann rectangles (SVG Polygons); drag the
+* endpoints, crank n, switch left/mid/right, and watch the estimate converge to
+* the Simpson reference. Reuses the pure `riemannSum`/`integrate` helpers.
+*/
+const MODES = [
+	"left",
+	"mid",
+	"right"
+];
+function IntegralExplorer({ equation = "0.4*x^2 + 0.5", xRange = [-1, 4], a: aInit = 0, b: bInit = 3, n: nInit = 8, title = "The integral is an area", height = 340 } = {}) {
+	const [xMin, xMax] = xRange;
+	const [a, setA] = useState(clamp(aInit, xMin, xMax));
+	const [b, setB] = useState(clamp(bInit, xMin, xMax));
+	const [n, setN] = useState(nInit);
+	const [mode, setMode] = useState("mid");
+	useEffect(() => {
+		setA(clamp(aInit, xMin, xMax));
+	}, [
+		aInit,
+		xMin,
+		xMax
+	]);
+	useEffect(() => {
+		setB(clamp(bInit, xMin, xMax));
+	}, [
+		bInit,
+		xMin,
+		xMax
+	]);
+	useEffect(() => {
+		setN(nInit);
+	}, [nInit]);
+	const model = useMemo(() => {
+		const res = compileExpr(equation);
+		if (!res.ast) return {
+			ok: false,
+			error: res.error ?? "Invalid expression"
+		};
+		const ast = res.ast;
+		return {
+			ok: true,
+			f: (x) => evaluate(ast, { x }),
+			fLatex: toLatex(ast)
+		};
+	}, [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
+			]
+		})]
+	});
+	const { f, fLatex } = model;
+	const ys = [];
+	for (let i = 0; i <= 200; i++) {
+		const y = f(xMin + (xMax - xMin) * i / 200);
+		if (Number.isFinite(y)) ys.push(y);
+	}
+	ys.sort((p, q) => p - q);
+	let yMin = Math.min(ys[Math.floor(ys.length * .02)] ?? -1, 0);
+	let yMax = Math.max(ys[Math.floor(ys.length * .98)] ?? 1, 0);
+	if (yMin === yMax) {
+		yMin -= 1;
+		yMax += 1;
+	}
+	const pad = (yMax - yMin) * .12;
+	[yMin, yMax] = [yMin - pad, yMax + pad];
+	const lo = Math.min(a, b), hi = Math.max(a, b);
+	const dx = n > 0 ? (hi - lo) / n : 0;
+	const rects = [];
+	for (let i = 0; i < n; i++) {
+		const xl = lo + i * dx;
+		const fy = f(mode === "left" ? xl : mode === "right" ? xl + dx : xl + dx / 2);
+		if (!Number.isFinite(fy)) continue;
+		rects.push({
+			pts: [
+				{
+					x: xl,
+					y: 0
+				},
+				{
+					x: xl + dx,
+					y: 0
+				},
+				{
+					x: xl + dx,
+					y: fy
+				},
+				{
+					x: xl,
+					y: fy
+				}
+			],
+			pos: fy >= 0
+		});
+	}
+	const approx = riemannSum(f, [lo, hi], n, mode);
+	const reference = integrate(f, [lo, hi], 1e3);
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LabStyles, {}), /* @__PURE__ */ jsxs(Stage, {
+		view: {
+			xMin,
+			xMax,
+			yMin,
+			yMax
+		},
+		height,
+		ariaLabel: `Riemann sum of ${equation} over [${lo.toFixed(1)}, ${hi.toFixed(1)}]`,
+		children: [
+			/* @__PURE__ */ jsx(Grid, {}),
+			rects.map((r, i) => /* @__PURE__ */ jsx(Polygon, {
+				points: r.pts,
+				color: r.pos ? "var(--stage-accent)" : "var(--stage-danger)",
+				fill: r.pos ? "var(--stage-accent)" : "var(--stage-danger)",
+				fillOpacity: .26,
+				weight: 1
+			}, i)),
+			/* @__PURE__ */ jsx(Axes, {}),
+			/* @__PURE__ */ jsx(Plot.OfX, {
+				y: f,
+				domain: [xMin, xMax],
+				color: "var(--stage-fg)",
+				weight: 2.5
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: {
+					x: a,
+					y: 0
+				},
+				onMove: (p) => setA(clamp(p.x, xMin, xMax)),
+				constrain: "horizontal",
+				color: "var(--stage-good)",
+				ariaLabel: "left endpoint a"
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: {
+					x: b,
+					y: 0
+				},
+				onMove: (p) => setB(clamp(p.x, xMin, xMax)),
+				constrain: "horizontal",
+				color: "var(--stage-good)",
+				ariaLabel: "right endpoint b"
+			})
+		]
+	})] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx(Field, {
+				label: "rectangles n",
+				value: /* @__PURE__ */ jsx("strong", { children: n }),
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: n,
+					min: 1,
+					max: 80,
+					step: 1,
+					onChange: (v) => setN(Math.round(v)),
+					ariaLabel: "number of rectangles"
+				})
+			}),
+			/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "lab-chip",
+				onClick: () => setMode((mm) => MODES[(MODES.indexOf(mm) + 1) % 3]),
+				children: [mode, " sum"]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				style: { opacity: .8 },
+				children: ["sum ", /* @__PURE__ */ jsx("strong", { children: approx.toFixed(3) })]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					color: "var(--stage-good)",
+					fontWeight: 600
+				},
+				children: /* @__PURE__ */ jsx(Tex$1, { tex: `\\int \\approx ${reference.toFixed(3)}` })
+			})
+		] }),
+		footer: /* @__PURE__ */ jsx("div", {
+			style: {
+				padding: "8px 2px 0",
+				fontSize: 14
+			},
+			children: /* @__PURE__ */ jsx(Tex$1, { tex: `\\int_{${lo.toFixed(1)}}^{${hi.toFixed(1)}}\\left(${fLatex}\\right)\\,dx \\approx ${approx.toFixed(3)}` })
+		}),
+		children: figure
+	});
+}
+
+//#endregion
+export { IntegralExplorer };

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

@@ -0,0 +1 @@
+import { Derived, InteractiveProblem, InteractiveProblemProps, ProblemAsk, ProblemEquation, ProblemParam } from "./preset.mjs";