@classytic/labs 0.1.0

package/dist/math/balance-algebra/preset.d.mts

@@ -0,0 +1,30 @@
+import { BALANCE_ALGEBRA_ASSET } from "./asset.mjs";
+import { ReactNode } from "react";
+import { SceneDoc } from "@classytic/stage";
+
+//#region src/math/balance-algebra/preset.d.ts
+interface BalanceEquation {
+  coef: number;
+  addend: number;
+  rhs: number;
+  answer: number;
+}
+declare function balanceAlgebraDoc(eq: BalanceEquation): SceneDoc;
+interface BalanceAlgebraProps {
+  coef?: number;
+  addend?: number;
+  rhs?: number;
+  answer?: number;
+  controlId?: string;
+  height?: number;
+}
+declare function BalanceAlgebraLab({
+  coef,
+  addend,
+  rhs,
+  answer,
+  controlId,
+  height
+}: BalanceAlgebraProps): ReactNode;
+//#endregion
+export { BalanceAlgebraLab, BalanceAlgebraProps, BalanceEquation, balanceAlgebraDoc };

package/dist/math/balance-algebra/preset.mjs

@@ -0,0 +1,228 @@
+'use client';
+
+import { LabStyles, Slider, StatusPill } from "../../kit/controls.mjs";
+import { ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { BALANCE_ALGEBRA_ASSET } from "./asset.mjs";
+import { useMemo } 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/balance-algebra/preset.tsx
+/**
+* Balance-scale algebra flagship — a SceneDoc FACTORY (a general tool for any
+* a·x + b = c), built on @classytic/stage. All "logic" is typed numeric
+* derivations that actually evaluate: L = a·x+b (linop), diff = L−R, tilt =
+* clamp(3·diff), balanced = (diff == 0). Solving the equation == balancing.
+*/
+registerAsset("balance-algebra", BALANCE_ALGEBRA_ASSET);
+function balanceAlgebraDoc(eq) {
+	const maxX = Math.max(8, eq.answer + 2);
+	return {
+		schemaVersion: 2,
+		type: "stage-scene",
+		view: {
+			xMin: -5,
+			xMax: 5,
+			yMin: -1.55,
+			yMax: 1.6
+		},
+		elements: [
+			{
+				id: "x",
+				kind: "scalar",
+				label: "x",
+				a11y: { label: "unknown x" },
+				free: {
+					value: Math.min(maxX, Math.max(0, Math.round(eq.answer / 2) || 1)),
+					min: 0,
+					max: maxX,
+					step: 1
+				}
+			},
+			{
+				id: "L",
+				kind: "scalar",
+				def: {
+					op: "linop",
+					terms: [{
+						coef: eq.coef,
+						in: { ref: "x" }
+					}],
+					const: eq.addend
+				}
+			},
+			{
+				id: "R",
+				kind: "scalar",
+				def: {
+					op: "linop",
+					terms: [],
+					const: eq.rhs
+				}
+			},
+			{
+				id: "diff",
+				kind: "scalar",
+				def: {
+					op: "linop",
+					terms: [{
+						coef: 1,
+						in: { ref: "L" }
+					}, {
+						coef: -1,
+						in: { ref: "R" }
+					}]
+				}
+			},
+			{
+				id: "tiltRaw",
+				kind: "scalar",
+				def: {
+					op: "linop",
+					terms: [{
+						coef: 3,
+						in: { ref: "diff" }
+					}]
+				}
+			},
+			{
+				id: "tilt",
+				kind: "scalar",
+				def: {
+					op: "clamp",
+					in: { ref: "tiltRaw" },
+					min: -14,
+					max: 14
+				}
+			},
+			{
+				id: "balanced",
+				kind: "boolean",
+				def: {
+					op: "compare",
+					a: { ref: "diff" },
+					b: 0,
+					cmp: "eq",
+					eps: .001
+				}
+			},
+			{
+				id: "scale",
+				kind: "asset",
+				def: {
+					op: "asset",
+					asset: "balance-algebra",
+					params: {
+						pivot: {
+							x: 0,
+							y: .4
+						},
+						arm: 3.3,
+						coef: eq.coef,
+						addend: eq.addend,
+						rhs: eq.rhs
+					},
+					bind: {
+						x: { ref: "x" },
+						tilt: { ref: "tilt" },
+						balanced: { ref: "balanced" }
+					}
+				}
+			}
+		],
+		bindings: [],
+		meta: { pedagogy: {
+			objectives: ["Solve a linear equation a·x + b = c by keeping a balance level"],
+			misconceptions: [{
+				trigger: "sets x so one side is heavier",
+				note: "doing a thing to one side only — both sides must stay equal"
+			}],
+			hints: ["What single value of x makes both pans weigh the same?", `Try x = ${eq.answer}.`],
+			difficulty: 2,
+			successCriteria: "The beam is level (left load = right load)."
+		} }
+	};
+}
+function BalanceAlgebraLab({ coef = 2, addend = 1, rhs = 7, answer = 3, controlId, height = 280 }) {
+	const { editor, doc } = useEditor(useMemo(() => balanceAlgebraDoc({
+		coef,
+		addend,
+		rhs,
+		answer
+	}), [
+		coef,
+		addend,
+		rhs,
+		answer
+	]));
+	const resolved = resolve(doc);
+	const x = Number(resolved.values.get("x") ?? 0);
+	const L = Number(resolved.values.get("L") ?? 0);
+	const R = Number(resolved.values.get("R") ?? 0);
+	const balanced = resolved.values.get("balanced") === true;
+	const maxX = Math.max(8, answer + 2);
+	useControlSurface(controlId, useMemo(() => controlsFromScene(editor, [{
+		id: "x",
+		name: "x",
+		min: 0,
+		max: maxX,
+		step: 1
+	}]), [editor, maxX]));
+	useCheckpoint({
+		solved: balanced,
+		activity: `solve-${coef}x+${addend}=${rhs}`,
+		response: String(x)
+	});
+	const setX = (v) => {
+		editor.dispatch({
+			op: "mutate",
+			id: "x",
+			patch: { free: { value: v } }
+		});
+	};
+	const eqLabel = `${coef === 1 ? "" : coef}x${addend ? ` + ${addend}` : ""} = ${rhs}`;
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LabStyles, {}), /* @__PURE__ */ jsx(Scene, {
+		doc,
+		interactive: false,
+		showGrid: false,
+		showAxes: false,
+		height,
+		ariaLabel: `Balance scale for ${eqLabel}`
+	})] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title: "Balance-scale algebra",
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx(Field, {
+				label: eqLabel,
+				value: /* @__PURE__ */ jsxs("strong", { children: ["x = ", x] }),
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: x,
+					min: 0,
+					max: maxX,
+					step: 1,
+					onChange: setX,
+					ariaLabel: "value of x"
+				})
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				style: { opacity: .75 },
+				children: [
+					"left ",
+					L,
+					" · right ",
+					R
+				]
+			}),
+			/* @__PURE__ */ jsx(StatusPill, {
+				ok: balanced,
+				children: balanced ? "✓ Balanced — solved!" : "Not balanced"
+			})
+		] }),
+		footer: /* @__PURE__ */ jsx(LiveRegion, { children: balanced ? `Balanced. x equals ${x}. Solved.` : `Left load ${L}, right load ${R}.` }),
+		children: figure
+	});
+}
+
+//#endregion
+export { BalanceAlgebraLab, balanceAlgebraDoc };

package/dist/math/derivation.d.mts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+
+//#region src/math/derivation.d.ts
+interface DerivationStep {
+  /** A LaTeX line, e.g. `\\frac{y - y_P}{x - x_P} = \\frac{y_Q - y_P}{x_Q - x_P}`. */
+  tex: string;
+  /** Why this step follows (shown beside the line). */
+  note?: string;
+}
+interface DerivationProps {
+  steps?: (DerivationStep | string)[];
+  title?: string;
+  /** Reveal all steps at once instead of stepping (e.g. for print/review). */
+  showAll?: boolean;
+}
+declare function Derivation({
+  steps,
+  title,
+  showAll
+}?: DerivationProps): ReactNode;
+//#endregion
+export { Derivation, DerivationProps, DerivationStep };

package/dist/math/derivation.mjs

@@ -0,0 +1,113 @@
+'use client';
+
+import { Tex } from "../core/tex.mjs";
+import { ControlBar, LabFrame } from "../kit/frame.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/math/derivation.tsx
+/**
+* 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
+* 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
+* generated/verified with the symbolic engine).
+*/
+function normalize(steps) {
+	const out = (Array.isArray(steps) ? steps : []).map((s) => typeof s === "string" ? { tex: s } : s).filter((s) => !!s && typeof s.tex === "string");
+	return out.length ? out : [{
+		tex: "a^2 + b^2 = c^2",
+		note: "add your steps"
+	}];
+}
+function Derivation({ steps, title = "Derivation", showAll = false } = {}) {
+	const all = normalize(steps);
+	const [step, setStep] = useState(showAll ? all.length - 1 : 0);
+	useEffect(() => {
+		setStep(showAll ? all.length - 1 : 0);
+	}, [showAll, all.length]);
+	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"
+			},
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					style: {
+						fontFamily: "ui-monospace, monospace",
+						fontSize: 12,
+						opacity: .55
+					},
+					children: i + 1
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: { fontSize: 15 },
+					children: /* @__PURE__ */ jsx(Tex, { tex: s.tex })
+				}),
+				s.note && /* @__PURE__ */ jsxs("span", {
+					style: {
+						fontSize: 13,
+						opacity: .65
+					},
+					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",
+				onClick: () => setStep((s) => Math.max(0, s - 1)),
+				disabled: step === 0,
+				children: "← Back"
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				style: {
+					fontVariantNumeric: "tabular-nums",
+					opacity: .75
+				},
+				children: [
+					"step ",
+					step + 1,
+					" / ",
+					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,
+				children: "Next →"
+			})
+		] }) : void 0,
+		children: figure
+	});
+}
+
+//#endregion
+export { Derivation };

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

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

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

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+
+//#region src/math/derivative-explorer/preset.d.ts
+interface DerivativeExplorerProps {
+  equation?: string;
+  xRange?: [number, number];
+  startX?: number;
+  title?: string;
+  height?: number;
+}
+declare function DerivativeExplorer({
+  equation,
+  xRange,
+  startX,
+  title,
+  height
+}?: DerivativeExplorerProps): ReactNode;
+//#endregion
+export { DerivativeExplorer, DerivativeExplorerProps };

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

@@ -0,0 +1,227 @@
+'use client';
+
+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 { 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
+* 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.
+*/
+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 [h, setH] = useState(1.2);
+	useEffect(() => {
+		setX0(clamp(startX, xMin, xMax));
+	}, [
+		startX,
+		xMin,
+		xMax
+	]);
+	const model = useMemo(() => {
+		const res = compileExpr(equation);
+		if (!res.ast) return {
+			ok: false,
+			error: res.error ?? "Invalid expression"
+		};
+		const ast = res.ast;
+		const f = (x) => evaluate(ast, { x });
+		let dNode = null;
+		try {
+			const d = differentiate(ast, "x");
+			dNode = d ? simplify(d) : null;
+		} catch {
+			dNode = null;
+		}
+		const slopeAt = dNode ? (x) => evaluate(dNode, { x }) : (x) => numericSlope(f, x);
+		return {
+			ok: true,
+			f,
+			fLatex: toLatex(ast),
+			dfLatex: dNode ? toLatex(dNode) : null,
+			slopeAt
+		};
+	}, [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, slopeAt, fLatex, dfLatex } = model;
+	const [yMin, yMax] = autoY(f, xMin, xMax);
+	const y0 = f(x0);
+	const x1 = x0 + h;
+	const y1 = f(x1);
+	const secant = (y1 - y0) / (x1 - x0);
+	const m = slopeAt(x0);
+	const lineY = (slope, atX) => y0 + slope * (atX - x0);
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LabStyles, {}), /* @__PURE__ */ jsxs(Stage, {
+		view: {
+			xMin,
+			xMax,
+			yMin,
+			yMax
+		},
+		height,
+		ariaLabel: `Tangent to ${equation} at x = ${x0.toFixed(2)}`,
+		children: [
+			/* @__PURE__ */ jsx(Grid, {}),
+			/* @__PURE__ */ jsx(Axes, {}),
+			/* @__PURE__ */ jsx(Plot.OfX, {
+				y: f,
+				domain: [xMin, xMax],
+				color: "var(--stage-accent)",
+				weight: 3
+			}),
+			Number.isFinite(y0) && Number.isFinite(y1) && /* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: xMin,
+					y: lineY(secant, xMin)
+				},
+				to: {
+					x: xMax,
+					y: lineY(secant, xMax)
+				},
+				color: "var(--stage-accent-2)",
+				weight: 2
+			}),
+			Number.isFinite(y0) && Number.isFinite(m) && /* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: xMin,
+					y: lineY(m, xMin)
+				},
+				to: {
+					x: xMax,
+					y: lineY(m, xMax)
+				},
+				color: "var(--stage-good)",
+				weight: 2,
+				dashed: true
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: {
+					x: x0,
+					y: y0
+				},
+				onMove: (p) => setX0(clamp(p.x, xMin, xMax)),
+				color: "var(--stage-fg)",
+				ariaLabel: "point on the curve"
+			})
+		]
+	})] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		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) : "—"]
+			})
+		] }),
+		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) ="
+					}),
+					" ",
+					/* @__PURE__ */ jsx(Tex$1, { tex: dfLatex })
+				]
+			})]
+		}),
+		children: figure
+	});
+}
+
+//#endregion
+export { DerivativeExplorer };

package/dist/math/function-machine/index.d.mts

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

package/dist/math/function-machine/preset.d.mts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+
+//#region src/math/function-machine/preset.d.ts
+interface FunctionMachineProps {
+  prompt?: string;
+  inputs: (string | number)[];
+  outputs: (string | number)[];
+  choices: string[];
+  answer: string;
+  height?: number;
+}
+declare function FunctionMachineLab({
+  prompt,
+  inputs,
+  outputs,
+  choices,
+  answer,
+  height
+}: FunctionMachineProps): ReactNode;
+//#endregion
+export { FunctionMachineLab, FunctionMachineProps };