@classytic/labs 0.1.0

package/dist/statistics/core/sequences.mjs

@@ -0,0 +1,35 @@
+//#region src/statistics/core/sequences.ts
+/** The nth term (1-indexed): aₙ = a₁+(n−1)d  |  aₙ = a₁·r^(n−1). */
+function nthTerm(spec, n) {
+	return spec.kind === "arithmetic" ? spec.first + (n - 1) * spec.step : spec.first * spec.step ** (n - 1);
+}
+/** The first `count` terms (1-indexed). */
+function terms(spec, count) {
+	return Array.from({ length: Math.max(0, count) }, (_, i) => nthTerm(spec, i + 1));
+}
+/** Partial sum of the first n terms, closed form.
+*  arithmetic: n/2·(2a₁+(n−1)d).  geometric: a₁·(1−rⁿ)/(1−r)  (n·a₁ when r=1). */
+function partialSum(spec, n) {
+	if (n <= 0) return 0;
+	if (spec.kind === "arithmetic") return n / 2 * (2 * spec.first + (n - 1) * spec.step);
+	const r = spec.step;
+	return r === 1 ? n * spec.first : spec.first * (1 - r ** n) / (1 - r);
+}
+/** Running partial sums S₁…S_count (for the convergence/area visual). */
+function partialSums(spec, count) {
+	const out = [];
+	let acc = 0;
+	for (let i = 1; i <= count; i++) {
+		acc += nthTerm(spec, i);
+		out.push(acc);
+	}
+	return out;
+}
+/** Sum to infinity of a geometric series, or null if it diverges (|r| ≥ 1). */
+function infiniteSum(spec) {
+	if (spec.kind !== "geometric") return null;
+	return Math.abs(spec.step) < 1 ? spec.first / (1 - spec.step) : null;
+}
+
+//#endregion
+export { infiniteSum, nthTerm, partialSum, partialSums, terms };

package/dist/statistics/galton/preset.d.mts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+//#region src/statistics/galton/preset.d.ts
+interface GaltonBoardProps {
+  rows?: number;
+  seed?: number;
+  showCurve?: boolean;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+  hints?: string[];
+  controlId?: string;
+  height?: number;
+}
+declare function GaltonBoardLab({
+  rows,
+  seed,
+  showCurve,
+  title,
+  prompt,
+  objectives,
+  hints: hintList,
+  controlId,
+  height
+}: GaltonBoardProps): ReactNode;
+//#endregion
+export { GaltonBoardLab, GaltonBoardProps };

package/dist/statistics/galton/preset.mjs

@@ -0,0 +1,331 @@
+'use client';
+
+import { mulberry32 } from "../../core/rng.mjs";
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { Chip, Slider } from "../../kit/controls.mjs";
+import { ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
+import { HintLadder, useHints } from "../../kit/pedagogy.mjs";
+import { useReducedMotion } from "../../kit/anim.mjs";
+import { mean, stddev } from "../core/descriptive.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CanvasLayer, useControlSurface, useFrameLoop, useInView } from "@classytic/stage";
+
+//#region src/statistics/galton/preset.tsx
+/**
+* GaltonBoardLab — the bean machine: balls rain down through a triangle of pegs,
+* bouncing left or right by pure chance, and pile up into a BELL CURVE. It is the
+* Central Limit Theorem you can watch happen — each ball is a sum of coin-flips
+* (a binomial), and a pile of them traces the normal distribution. The bridge from
+* "coin flips / law of large numbers" into the curve all of statistics & ML runs on.
+*
+* Animated on <CanvasLayer>: a few dozen balls fall at once (watchable), each path
+* a seeded sequence of L/R hops, landing in a bin whose count grows a bar. The
+* theoretical binomial/normal envelope overlays as a dashed curve the bars chase.
+* Seeded (mulberry32) so a run is replayable; honours prefers-reduced-motion.
+*/
+const MAX_FLIGHT = 28;
+function GaltonBoardLab({ rows = 12, seed = 7, showCurve = true, title = "Galton board", prompt, objectives, hints: hintList, controlId, height = 360 }) {
+	const R = Math.max(4, Math.min(16, rows));
+	const hints = useHints(hintList);
+	const rng = useRef(mulberry32(seed));
+	const counts = useRef(new Array(R + 1).fill(0));
+	const balls = useRef([]);
+	const target = useRef(0);
+	const [curve, setCurve] = useState(showCurve);
+	const [speed, setSpeed] = useState(40);
+	const [running, setRunning] = useState(false);
+	const [mounted, setMounted] = useState(false);
+	const [tick, setTick] = useState(0);
+	const reduce = useReducedMotion();
+	const spawnAcc = useRef(0);
+	const { ref: viewRef, inView } = useInView();
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	const pmf = useMemo(() => {
+		const row = [1];
+		for (let i = 0; i < R; i++) {
+			const next = [1];
+			for (let k = 0; k < row.length - 1; k++) next.push(row[k] + row[k + 1]);
+			next.push(1);
+			row.length = 0;
+			row.push(...next);
+		}
+		const denom = 2 ** R;
+		return row.map((c) => c / denom);
+	}, [R]);
+	const newBall = () => {
+		const cum = [0];
+		let rights = 0;
+		for (let i = 0; i < R; i++) {
+			if (rng.current() < .5) rights++;
+			cum.push(rights);
+		}
+		return {
+			f: 0,
+			cum,
+			bin: rights
+		};
+	};
+	const reset = useCallback(() => {
+		counts.current = new Array(R + 1).fill(0);
+		balls.current = [];
+		target.current = 0;
+		rng.current = mulberry32(seed);
+		setRunning(false);
+		setTick((t) => t + 1);
+	}, [R, seed]);
+	const drop = useCallback((n) => {
+		target.current = landed() + balls.current.length + n;
+		setRunning(true);
+	}, []);
+	const landed = () => counts.current.reduce((a, b) => a + b, 0);
+	useFrameLoop((frame) => {
+		const dt = Math.min(.05, frame.dtMs / 1e3);
+		const have = landed() + balls.current.length;
+		spawnAcc.current += speed * dt;
+		while (spawnAcc.current >= 1 && have + 0 < target.current && balls.current.length < MAX_FLIGHT && landed() + balls.current.length < target.current) {
+			balls.current.push(newBall());
+			spawnAcc.current -= 1;
+		}
+		const fall = R / .75 * dt;
+		const next = [];
+		for (const b of balls.current) {
+			b.f += fall;
+			if (b.f >= R) counts.current[b.bin]++;
+			else next.push(b);
+		}
+		balls.current = next;
+		if (balls.current.length === 0 && landed() >= target.current) setRunning(false);
+		setTick((t) => t + 1 & 16777215);
+	}, { running: running && mounted && !reduce && inView });
+	const draw = useCallback((ctx, _c) => {
+		const css = getComputedStyle(ctx.canvas);
+		const tok = (n, fb) => css.getPropertyValue(n).trim() || fb;
+		tok("--stage-fg", "#222");
+		const grid = tok("--stage-grid", "rgba(125,125,125,.3)"), muted = tok("--stage-muted", "#888"), accent = tok("--stage-accent", "#1c7ed6"), good = tok("--stage-good", "#2f9e44"), gold = tok("--stage-warn", "#e8a020");
+		const W = ctx.canvas.clientWidth || 640, H = height;
+		ctx.clearRect(0, 0, W, H);
+		const dx = Math.min((W - 48) / (R + 1), 28);
+		const cxC = W / 2;
+		const pegTop = 26, binsTop = pegTop + H * .42, binsBottom = H - 22;
+		const slotX = (r, slot) => cxC + (slot - r / 2) * dx;
+		const yOf = (f) => pegTop + f / R * (binsTop - pegTop);
+		ctx.fillStyle = muted;
+		for (let r = 0; r < R; r++) for (let s = 0; s <= r; s++) {
+			ctx.beginPath();
+			ctx.arc(slotX(r, s) + dx / 2 * 0, pegTop + (r + .5) / R * (binsTop - pegTop), 1.8, 0, Math.PI * 2);
+			ctx.fill();
+		}
+		const total = counts.current.reduce((a, b) => a + b, 0);
+		const maxExpected = total * Math.max(...pmf);
+		const maxCount = Math.max(1, ...counts.current, maxExpected);
+		const binH = binsBottom - binsTop;
+		const barW = Math.max(4, dx * .78);
+		for (let b = 0; b <= R; b++) {
+			const h = counts.current[b] / maxCount * binH;
+			const x = slotX(R, b) - barW / 2;
+			ctx.fillStyle = accent;
+			ctx.globalAlpha = .85;
+			ctx.fillRect(x, binsBottom - h, barW, h);
+		}
+		ctx.globalAlpha = 1;
+		ctx.strokeStyle = grid;
+		ctx.lineWidth = 1;
+		ctx.beginPath();
+		ctx.moveTo(slotX(R, 0) - barW, binsBottom + .5);
+		ctx.lineTo(slotX(R, R) + barW, binsBottom + .5);
+		ctx.stroke();
+		if (curve && total > 0) {
+			ctx.strokeStyle = good;
+			ctx.lineWidth = 2;
+			ctx.setLineDash([6, 4]);
+			ctx.beginPath();
+			for (let b = 0; b <= R; b++) {
+				const h = total * pmf[b] / maxCount * binH;
+				const x = slotX(R, b), y = binsBottom - h;
+				if (b === 0) ctx.moveTo(x, y);
+				else ctx.lineTo(x, y);
+			}
+			ctx.stroke();
+			ctx.setLineDash([]);
+		}
+		ctx.fillStyle = gold;
+		for (const ball of balls.current) {
+			const r = Math.min(R - 1, Math.floor(ball.f));
+			const frac = ball.f - Math.floor(ball.f);
+			const x0 = slotX(r, ball.cum[r]);
+			const x = x0 + (slotX(r + 1, ball.cum[r + 1]) - x0) * frac, y = yOf(ball.f);
+			ctx.beginPath();
+			ctx.arc(x, y, 3.5, 0, Math.PI * 2);
+			ctx.fill();
+		}
+	}, [
+		R,
+		height,
+		curve,
+		pmf,
+		tick
+	]);
+	const samples = useMemo(() => counts.current.flatMap((c, b) => new Array(c).fill(b)), [counts.current.reduce((a, b) => a + b, 0)]);
+	const total = counts.current.reduce((a, b) => a + b, 0);
+	const mu = total ? mean(samples) : R / 2;
+	const sd = total ? stddev(samples) : Math.sqrt(R) / 2;
+	useControlSurface(controlId, {
+		drop100: {
+			type: "action",
+			label: "drop 100 balls",
+			invoke: () => drop(100)
+		},
+		drop1000: {
+			type: "action",
+			label: "drop 1000 balls",
+			invoke: () => drop(1e3)
+		},
+		reset: {
+			type: "action",
+			label: "reset",
+			invoke: reset
+		},
+		speed: {
+			type: "number",
+			label: "balls/sec",
+			min: 10,
+			max: 200,
+			step: 10,
+			get: () => speed,
+			set: setSpeed
+		}
+	});
+	const figure = /* @__PURE__ */ jsxs("div", {
+		ref: viewRef,
+		className: "lab-playwrap",
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				borderRadius: 14,
+				overflow: "hidden",
+				background: "var(--stage-bg)",
+				border: "1px solid var(--stage-grid)"
+			},
+			children: /* @__PURE__ */ jsx(CanvasLayer, {
+				view: useMemo(() => ({
+					xMin: 0,
+					xMax: 1,
+					yMin: 0,
+					yMax: 1
+				}), []),
+				height,
+				draw,
+				ariaLabel: `Galton board, ${total} balls dropped, mean bin ${mu.toFixed(1)}`
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "lab-bar",
+			style: {
+				flexWrap: "wrap",
+				gap: 16,
+				fontVariantNumeric: "tabular-nums",
+				marginTop: 6
+			},
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					style: { fontWeight: 700 },
+					children: ["balls: ", total.toLocaleString()]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					style: {
+						color: "var(--stage-good)",
+						fontWeight: 700
+					},
+					children: [
+						"mean ",
+						/* @__PURE__ */ jsx(Tex$1, { tex: `\\approx ${mu.toFixed(2)}` }),
+						" ",
+						/* @__PURE__ */ jsxs("span", {
+							style: {
+								color: "var(--stage-muted)",
+								fontWeight: 500
+							},
+							children: [
+								"(",
+								/* @__PURE__ */ jsx(Tex$1, { tex: `\\to ${(R / 2).toFixed(1)}` }),
+								")"
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					style: {
+						color: "var(--stage-accent)",
+						fontWeight: 700
+					},
+					children: [
+						/* @__PURE__ */ jsx(Tex$1, { tex: `\\sigma \\approx ${sd.toFixed(2)}` }),
+						" ",
+						/* @__PURE__ */ jsxs("span", {
+							style: {
+								color: "var(--stage-muted)",
+								fontWeight: 500
+							},
+							children: [
+								"(",
+								/* @__PURE__ */ jsx(Tex$1, { tex: `\\to ${(Math.sqrt(R) / 2).toFixed(2)}` }),
+								")"
+							]
+						})
+					]
+				})
+			]
+		})]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx(Chip, {
+				selected: false,
+				onClick: () => drop(100),
+				children: "▼ drop 100"
+			}),
+			/* @__PURE__ */ jsx(Chip, {
+				selected: false,
+				onClick: () => drop(1e3),
+				children: "▼ drop 1000"
+			}),
+			/* @__PURE__ */ jsx(Chip, {
+				selected: false,
+				onClick: reset,
+				children: "↺ reset"
+			}),
+			/* @__PURE__ */ jsx(Chip, {
+				selected: curve,
+				onClick: () => setCurve((v) => !v),
+				children: "bell curve"
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "speed",
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: speed,
+					min: 10,
+					max: 200,
+					step: 10,
+					onChange: setSpeed,
+					ariaLabel: "balls per second"
+				})
+			}),
+			running && /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: 13,
+					color: "var(--stage-good)"
+				},
+				children: "raining…"
+			})
+		] }),
+		footer: /* @__PURE__ */ jsx(HintLadder, { hints }),
+		children: figure
+	});
+}
+
+//#endregion
+export { GaltonBoardLab };

package/dist/statistics/histogram/preset.d.mts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+//#region src/statistics/histogram/preset.d.ts
+interface HistogramBoxProps {
+  data?: number[];
+  bins?: number;
+  min?: number;
+  max?: number;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+  hints?: string[];
+  controlId?: string;
+}
+declare function HistogramBoxLab({
+  data,
+  bins,
+  min,
+  max,
+  title,
+  prompt,
+  objectives,
+  hints: hintList,
+  controlId
+}: HistogramBoxProps): ReactNode;
+//#endregion
+export { HistogramBoxLab, HistogramBoxProps };