@classytic/labs 0.1.0 → 0.2.0

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

@@ -0,0 +1,313 @@
+'use client';
+
+import { clamp } from "../../core/util.mjs";
+import { Callout, LabFrame } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { LabAsk } from "../../kit/ask.mjs";
+import { CoordPlane, num } from "../../kit/coords.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";
+
+//#region src/math/domain-range/preset.tsx
+/**
+* DomainRangeLab, domain & range as SHADOWS. The big idea students miss is that
+* domain/range aren't formulas to memorise; they're what you SEE when you let the
+* curve cast two shadows:
+*
+*   • shine a light from ABOVE → the curve's shadow on the x-axis is the DOMAIN
+*     (every input the function actually accepts), and
+*   • shine a light from the SIDE → the shadow on the y-axis is the RANGE
+*     (every output it can produce).
+*
+* On top of that, a "feed the machine" game: drag the input probe along the
+* x-axis, it turns GREEN when the machine accepts the input (in the domain) and
+* RED "undefined" when it doesn't (a pole like 1/(x−2), a √ of a negative, or an
+* author-set restriction). So the SAME lab teaches every domain TYPE just by
+* changing the expression: x² (range ≥ 0), √x (x ≥ 0), 1/x (x ≠ 0), √(9−x²)
+* (the semicircle: domain [−3,3], range [0,3]), or a restricted interval.
+*
+* Built on the shared CoordPlane + the stage expr engine; authorable via props
+* (equation, an optional domain restriction, a checked question).
+*/
+const C_DOMAIN = "var(--stage-accent)";
+const C_RANGE = "var(--stage-accent-2)";
+const C_OK = "var(--stage-good)";
+const C_BAD = "var(--stage-danger)";
+const N = 1200;
+/** Contiguous covered intervals of a sorted value set (split where the gap exceeds `gap`). */
+function coveredIntervals(values, gap) {
+	const v = values.filter(Number.isFinite).sort((a, b) => a - b);
+	if (!v.length) return [];
+	const out = [];
+	let lo = v[0], prev = v[0];
+	for (let i = 1; i < v.length; i++) {
+		const x = v[i];
+		if (x - prev > gap) {
+			out.push([lo, prev]);
+			lo = x;
+		}
+		prev = x;
+	}
+	out.push([lo, prev]);
+	return out;
+}
+/** Sort + merge overlapping/adjacent intervals. */
+function mergeIntervals(iv) {
+	const v = iv.filter((x) => x != null).sort((a, b) => a[0] - b[0]);
+	const out = [];
+	for (const [a, b] of v) {
+		const last = out[out.length - 1];
+		if (last && a <= last[1] + 1e-6) last[1] = Math.max(last[1], b);
+		else out.push([a, b]);
+	}
+	return out;
+}
+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 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;
+	const pts = [];
+	for (let i = 0; i <= N; i++) {
+		const x = x0 + i * dx;
+		const y = f(x);
+		if (Number.isFinite(y)) pts.push([x, y]);
+	}
+	const [yMin, yMax] = (() => {
+		if (yRange !== "auto") return yRange;
+		if (!pts.length) return [-6, 6];
+		const s = pts.map((p) => p[1]).sort((a, b) => a - b);
+		const lo = Math.min(0, s[Math.floor(s.length * .02)] ?? -1);
+		const hi = Math.max(0, s[Math.floor(s.length * .98)] ?? 1);
+		const pad = Math.max(1, (hi - lo) * .12);
+		return [lo - pad, hi + pad];
+	})();
+	const yCap = Math.max(Math.abs(yMin), Math.abs(yMax)) * 3.5;
+	const domain = coveredIntervals(pts.filter(([, y]) => Math.abs(y) <= yCap).map(([x]) => x), dx * 2.5);
+	const range = mergeIntervals(domain.map(([a, b]) => {
+		let mn = Infinity, mx = -Infinity;
+		for (const [x, y] of pts) if (x >= a - 1e-9 && x <= b + 1e-9 && y >= yMin && y <= yMax) {
+			if (y < mn) mn = y;
+			if (y > mx) mx = y;
+		}
+		return Number.isFinite(mn) ? [mn, mx] : null;
+	}));
+	const [pxState, setPx] = useState(clamp(probe ?? (x0 + x1) / 2, x0, x1));
+	const pX = clamp(pxState, x0, x1);
+	const pY = f(pX);
+	const accepted = Number.isFinite(pY);
+	const visited = useRef({
+		min: pX,
+		max: pX
+	});
+	const [swept, setSwept] = useState(false);
+	useEffect(() => {
+		const v = visited.current;
+		if (pX < v.min) v.min = pX;
+		if (pX > v.max) v.max = pX;
+		if (!swept && v.max - v.min >= (x1 - x0) * .6) setSwept(true);
+	}, [
+		pX,
+		swept,
+		x0,
+		x1
+	]);
+	useCheckpoint({
+		solved: swept,
+		activity
+	});
+	const figure = /* @__PURE__ */ jsxs(CoordPlane, {
+		view: {
+			xMin: x0,
+			xMax: x1,
+			yMin,
+			yMax
+		},
+		height,
+		preserveAspect: false,
+		ariaLabel: `Domain and range of ${equation}`,
+		children: [
+			compiled && /* @__PURE__ */ jsx(Plot.OfX, {
+				y: f,
+				color: "var(--stage-fg)",
+				weight: 2.5
+			}),
+			domain.map(([a, b], i) => /* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: a,
+					y: 0
+				},
+				to: {
+					x: b,
+					y: 0
+				},
+				color: C_DOMAIN,
+				weight: 7
+			}, `d${i}`)),
+			domain.length > 0 && /* @__PURE__ */ jsx(Label, {
+				x: domain[0][0],
+				y: 0,
+				text: "domain",
+				color: C_DOMAIN,
+				size: 12,
+				dy: 18,
+				dx: 2,
+				anchor: "start"
+			}),
+			range.map(([a, b], i) => /* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: 0,
+					y: a
+				},
+				to: {
+					x: 0,
+					y: b
+				},
+				color: C_RANGE,
+				weight: 7
+			}, `r${i}`)),
+			range.length > 0 && /* @__PURE__ */ jsx(Label, {
+				x: 0,
+				y: range[range.length - 1][1],
+				text: "range",
+				color: C_RANGE,
+				size: 12,
+				dx: 10,
+				anchor: "start"
+			}),
+			accepted ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: pX,
+						y: 0
+					},
+					to: {
+						x: pX,
+						y: pY
+					},
+					color: C_OK,
+					weight: 1.5,
+					dashed: true
+				}),
+				/* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: pX,
+						y: pY
+					},
+					to: {
+						x: 0,
+						y: pY
+					},
+					color: C_OK,
+					weight: 1.5,
+					dashed: true
+				}),
+				/* @__PURE__ */ jsx(Dot, {
+					x: pX,
+					y: pY,
+					r: 5,
+					color: C_OK
+				}),
+				/* @__PURE__ */ jsx(Dot, {
+					x: 0,
+					y: pY,
+					r: 5,
+					color: C_RANGE
+				})
+			] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: pX,
+					y: yMin
+				},
+				to: {
+					x: pX,
+					y: yMax
+				},
+				color: C_BAD,
+				weight: 1.5,
+				dashed: true
+			}), /* @__PURE__ */ jsx(Label, {
+				x: pX,
+				y: (yMin + yMax) / 2,
+				text: "undefined",
+				color: C_BAD,
+				size: 12,
+				dx: 8,
+				anchor: "start"
+			})] }),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: {
+					x: pX,
+					y: 0
+				},
+				onMove: (p) => setPx(clamp(p.x, x0, x1)),
+				constrain: "horizontal",
+				color: accepted ? C_OK : C_BAD,
+				ariaLabel: "input probe, drag along the x-axis"
+			})
+		]
+	});
+	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
+	});
+}
+
+//#endregion
+export { DomainRangeLab };

package/dist/math/fraction-bar/index.d.mts

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

package/dist/math/fraction-bar/preset.d.mts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+//#region src/math/fraction-bar/preset.d.ts
+interface FractionBarProps {
+  /** Number of equal parts the whole is cut into. Default 4. */
+  denom?: number;
+  /** Starting shaded parts. Default 0. */
+  num?: number;
+  /** Goal numerator; solved when that many parts are shaded. Omit to explore. */
+  target?: number;
+  /** If set, also show the fraction OF this quantity (k/n × whole). */
+  whole?: number;
+  unit?: string;
+  /** Second strip cut into this many parts, to show the equivalent fraction. */
+  compareDenom?: number;
+  /** Show the decimal + percent equivalents. Default true. */
+  showEquiv?: boolean;
+  /** Optional concrete twin (any level scene): the part-whole as a pie / jar / etc. */
+  scene?: string;
+  height?: number;
+  title?: string;
+  prompt?: string;
+  activity?: string;
+}
+declare function FractionBarLab(props?: FractionBarProps): ReactNode;
+//#endregion
+export { FractionBarLab, FractionBarProps };

package/dist/math/fraction-bar/preset.mjs

@@ -0,0 +1,197 @@
+'use client';
+
+import { gcd, round } from "../../core/util.mjs";
+import { StatusPill } from "../../kit/controls.mjs";
+import { ControlBar, LabFrame } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { getScene } from "../../kit/scenes.mjs";
+import { BarStrip } from "../../kit/bar-strip.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MovableDot, Segment, Stage } from "@classytic/stage";
+
+//#region src/math/fraction-bar/preset.tsx
+/**
+* FractionBarLab, the authorable PART-WHOLE / fraction manipulative: a strip is
+* split into `denom` equal parts and the learner drags to shade `num` of them.
+* The same shaded amount reads as a fraction, a decimal, a percent, and (when a
+* `whole` is set) a concrete quantity, so k/n, 0.75, 75% and "15 of 20" are
+* visibly ONE thing. An optional second strip at a different denominator makes
+* EQUIVALENT fractions (¾ = 6⁄8) something you see by re-cutting the same length.
+*
+* One engine, many uses, all data: set denom, a target to shade, a whole+unit
+* for "fraction of a quantity", or a compare denominator for equivalence. Built
+* on the juiced <MovableDot> (snaps to the cell boundaries, live readout).
+*/
+function FractionBarLab(props = {}) {
+	const { denom = 4, target, whole, unit = "", compareDenom, showEquiv = true, scene, height = 240, title = "Fractions", prompt = target != null ? `Shade ${target}/${denom} of the strip.` : "Drag to shade the strip.", activity = "fraction-bar" } = props;
+	const n = Math.max(1, Math.round(denom));
+	const clampN = (k) => Math.max(0, Math.min(n, Math.round(k)));
+	const [num, setNum] = useState(clampN(props.num ?? 0));
+	useEffect(() => {
+		setNum(clampN(props.num ?? 0));
+	}, [props.num, n]);
+	const solved = target != null && num === target;
+	const frac = num / n;
+	const g = gcd(num, n);
+	const simp = num > 0 && g > 1 ? `${num / g}/${n / g}` : null;
+	const fillColor = solved ? "var(--stage-good)" : "var(--stage-accent)";
+	useCheckpoint({
+		solved,
+		activity,
+		response: `${num}/${n}`
+	});
+	const hasCompare = compareDenom != null && compareDenom > 0;
+	const cmpShaded = hasCompare ? Math.round(frac * compareDenom) : 0;
+	const cmpExact = hasCompare ? Math.abs(frac * compareDenom - cmpShaded) < 1e-9 : false;
+	const Y_MAIN = hasCompare ? .75 : 0;
+	const Y_CMP = -.95;
+	const yMin = hasCompare ? -2.1 : -1.5;
+	const yMax = hasCompare ? 1.9 : 1.2;
+	const figure = /* @__PURE__ */ jsxs(Stage, {
+		view: {
+			xMin: -.55,
+			xMax: n + .55,
+			yMin,
+			yMax
+		},
+		height,
+		preserveAspect: false,
+		pad: 14,
+		ariaLabel: `Fraction strip showing ${num} of ${n} parts shaded`,
+		children: [
+			/* @__PURE__ */ jsx(BarStrip, {
+				span: n,
+				cells: n,
+				shaded: num,
+				y: Y_MAIN,
+				color: fillColor
+			}),
+			target != null && !solved && /* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: target,
+					y: Y_MAIN - .85
+				},
+				to: {
+					x: target,
+					y: Y_MAIN + .85
+				},
+				color: "var(--stage-good)",
+				weight: 1.75,
+				opacity: .6,
+				dashed: true
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: {
+					x: num,
+					y: Y_MAIN
+				},
+				onMove: (p) => setNum(clampN(p.x)),
+				constrain: "horizontal",
+				range: {
+					min: 0,
+					max: n
+				},
+				snap: 1,
+				step: 1,
+				readout: () => `${num}/${n}`,
+				color: fillColor,
+				r: 9,
+				ariaLabel: "fraction boundary"
+			}),
+			hasCompare && /* @__PURE__ */ jsx(BarStrip, {
+				span: n,
+				cells: compareDenom,
+				shaded: cmpShaded,
+				y: Y_CMP,
+				color: "var(--stage-accent)",
+				weight: 26
+			})
+		]
+	});
+	const controls = /* @__PURE__ */ jsxs(ControlBar, { children: [
+		/* @__PURE__ */ jsxs("span", {
+			style: {
+				fontWeight: 700,
+				fontSize: 17,
+				fontVariantNumeric: "tabular-nums"
+			},
+			children: [
+				num,
+				"/",
+				n
+			]
+		}),
+		hasCompare && cmpShaded > 0 && /* @__PURE__ */ jsxs("span", {
+			style: {
+				opacity: .85,
+				fontVariantNumeric: "tabular-nums"
+			},
+			children: [
+				"= ",
+				cmpShaded,
+				"/",
+				compareDenom,
+				cmpExact ? "" : " (≈)"
+			]
+		}),
+		simp && /* @__PURE__ */ jsxs("span", {
+			style: { opacity: .75 },
+			children: ["= ", simp]
+		}),
+		showEquiv && /* @__PURE__ */ jsxs("span", {
+			style: {
+				opacity: .75,
+				fontVariantNumeric: "tabular-nums"
+			},
+			children: [
+				"= ",
+				round(frac),
+				" = ",
+				round(frac * 100),
+				"%"
+			]
+		}),
+		whole != null && /* @__PURE__ */ jsxs("span", {
+			style: {
+				opacity: .85,
+				fontVariantNumeric: "tabular-nums"
+			},
+			children: [
+				"= ",
+				round(frac * whole),
+				unit ? ` ${unit}` : "",
+				" of ",
+				whole
+			]
+		}),
+		target != null && /* @__PURE__ */ jsx(StatusPill, {
+			ok: solved,
+			children: solved ? `✓ ${target}/${n}` : `shade ${target}/${n}`
+		})
+	] });
+	const twin = scene && scene !== "none" ? getScene(scene)?.render({
+		frac,
+		guessTone: solved ? "ok" : "idle",
+		color: fillColor,
+		label: `${num}/${n}`,
+		width: 132,
+		height: 170
+	}) : null;
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		controls,
+		aside: twin ? /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "grid",
+				placeItems: "center"
+			},
+			children: twin
+		}) : void 0,
+		children: figure
+	});
+}
+
+//#endregion
+export { FractionBarLab };

package/dist/math/function-machine/preset.mjs

@@ -9,7 +9,7 @@ import { Label, Polygon, Segment, Stage } from "@classytic/stage";
 
 //#region src/math/function-machine/preset.tsx
 /**
-* Function machine — a "predict the rule" interactive (Brilliant-style), built
+* Function machine, a "predict the rule" interactive (Brilliant-style), built
 * on @classytic/stage: inputs → outputs with index-matched connectors, a rule
 * chip, multiple-choice rules, and a Check that reports to the learner seam. A
 * GENERAL tool: a creator passes any inputs/outputs/choices/answer.
@@ -165,7 +165,7 @@ function FunctionMachineLab({ prompt = "Which rule produces these outputs?", inp
 			}),
 			result === "wrong" && /* @__PURE__ */ jsx(StatusPill, {
 				ok: false,
-				children: "Not quite — try another rule"
+				children: "Not quite, try another rule"
 			})
 		] }),
 		footer: /* @__PURE__ */ jsx(LiveRegion, { children: result === "correct" ? "Correct." : result === "wrong" ? "Incorrect, try again." : "" }),

package/dist/math/gradient-descent.mjs

@@ -10,22 +10,22 @@ import { CanvasLayer, compileExpr, differentiate, evaluate, simplify, toLatex, u
 
 //#region src/math/gradient-descent.tsx
 /**
-* GradientDescent — the calculus that powers machine learning, made visible.
+* GradientDescent, the calculus that powers machine learning, made visible.
 *
 * Plots a 2-variable "loss surface" f(x, y) as a heatmap, then walks downhill by
 * the rule that trains every neural net: step opposite the gradient,
 *   (x, y) ← (x, y) − lr · ∇f,   ∇f = [∂f/∂x, ∂f/∂y].
 *
-* The gradient is the engine's EXACT symbolic differentiator —
-* `differentiate(ast, 'x')` and `differentiate(ast, 'y')` — proving the scalar
+* The gradient is the engine's EXACT symbolic differentiator , 
+* `differentiate(ast, 'x')` and `differentiate(ast, 'y')`, proving the scalar
 * expr engine already does multivariable partials (numerical fallback otherwise).
 *
 * This is a genuine HIGH-ELEMENT-COUNT figure (a per-pixel-cell heatmap), so it
 * renders on the engine's `<CanvasLayer>` (zero-dep raw Canvas2D, HiDPI, shares
-* the coordinate system + clock) instead of one SVG node per cell — and instead
+* the coordinate system + clock) instead of one SVG node per cell, and instead
 * of a heavy GPU dependency. Everything ELSE (controls, KaTeX, theming) is the
 * same kit every other lab uses. Drag the start point, tune the rate, watch it
-* converge — or diverge.
+* converge, or diverge.
 */
 const VIRIDIS = [
 	[
@@ -360,7 +360,7 @@ function GradientDescent({ equation = "x^2 + 2*y^2", range = [-3, 3], start = [2
 			children: [
 				"“",
 				equation,
-				"” — ",
+				"”, ",
 				model.error
 			]
 		})]

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

@@ -18,7 +18,7 @@ interface GrapherProps {
   params?: GraphParam[];
   xRange?: [number, number];
   yRange?: [number, number] | 'auto';
-  /** `log` plots log₁₀(y) with decade ticks — for exponentials/rates. */
+  /** `log` plots log₁₀(y) with decade ticks, for exponentials/rates. */
   yScale?: 'linear' | 'log';
   title?: string;
   subtitle?: string;

package/dist/math/grapher/preset.mjs

@@ -8,11 +8,11 @@ import { Label, Plot, Segment, Stage, compileExpr } from "@classytic/stage";
 
 //#region src/math/grapher/preset.tsx
 /**
-* Grapher — a creator-authored equation/function plotter on the @classytic/stage
+* Grapher, a creator-authored equation/function plotter on the @classytic/stage
 * engine. A creator types one or more formulas in `x` (and named params), optionally
 * exposes params as sliders, and gets a clean auto-scaled multi-curve plot.
 *
-* Framed, labelled axes (NOT through-origin) so it reads cleanly for ANY window —
+* Framed, labelled axes (NOT through-origin) so it reads cleanly for ANY window , 
 * including off-origin ranges like x∈[250,400] where a 0-axis would sit off-screen.
 * Supports a LOG y-scale: essential for exponentials (e.g. Arrhenius rate ∝ e^(−Eₐ/RT)),
 * where a linear axis collapses the curve onto the baseline but a log axis makes it a
@@ -40,7 +40,7 @@ function niceTicks(min, max, target = 6) {
 	for (let v = Math.ceil(min / step) * step; v <= max + step * 1e-6; v += step) out.push(Math.abs(v) < step * 1e-6 ? 0 : v);
 	return out;
 }
-/** Integer (decade) ticks for a log axis — falls back to nice ticks for a sub-decade window. */
+/** Integer (decade) ticks for a log axis, falls back to nice ticks for a sub-decade window. */
 function decadeTicks(min, max) {
 	const lo = Math.ceil(min - 1e-9), hi = Math.floor(max + 1e-9);
 	const out = [];
@@ -297,7 +297,7 @@ function Grapher({ equations, params = [], xRange = [-6.5, 6.5], yRange = "auto"
 		children: errors.map((e, i) => /* @__PURE__ */ jsxs("div", { children: [
 			"“",
 			e.expr,
-			"” — ",
+			"”, ",
 			e.error
 		] }, i))
 	})] });

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

@@ -11,19 +11,19 @@ import { Axes, Dot, Grid, Label, Plot, Segment, Stage, Vector } from "@classytic
 
 //#region src/math/harmonic-form/preset.tsx
 /**
-* HarmonicFormLab — "two waves are secretly one": a cos x + b sin x = R cos(x + α).
+* 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
+* 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
+* 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.
+* 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.
@@ -71,7 +71,7 @@ const HARMONIC_CHALLENGE = [{
 		}
 	],
 	answer: "up",
-	explain: "R = √(a² + b²) is the hypotenuse — growing either coefficient lengthens it."
+	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) {
@@ -369,7 +369,7 @@ function HarmonicFormLab({ a: a0 = 4, b: b0 = -3, title = "Express a cos x + b s
 					/* @__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."
+					", the phasor's length and angle."
 				]
 			}),
 			/* @__PURE__ */ jsx(ChallengeCard, {