@classytic/labs 0.1.0

package/dist/discrete/outcome-builder/preset.mjs

@@ -0,0 +1,283 @@
+'use client';
+
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { Chip } from "../../kit/controls.mjs";
+import { Callout, ControlBar, LabFrame } from "../../kit/frame.mjs";
+import { HintLadder, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
+import { gcd } from "../core/combinatorics.mjs";
+import { CoinGlyph, DiceGlyph } from "../../kit/probability.mjs";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useControlSurface } from "@classytic/stage";
+
+//#region src/discrete/outcome-builder/preset.tsx
+/**
+* OutcomeBuilderLab — "where do the possibilities come from?" Build a sample space
+* one stage at a time: add a coin or a die and watch the list of ALL outcomes
+* fan out, with the counting principle spelled out (2 × 2 × 6 = 24). Each outcome
+* is drawn with the real coin/dice glyphs, so the abstract "sample space" is a
+* concrete board you can point at. Click outcomes to mark an EVENT and read its
+* probability as favourable ÷ total — the definition, built by hand.
+*
+* Pure enumeration (cartesian product of the per-stage option lists); P uses the
+* gcd from the discrete kernel for a reduced fraction.
+*/
+const OPTIONS = {
+	coin: ["H", "T"],
+	die: [
+		1,
+		2,
+		3,
+		4,
+		5,
+		6
+	]
+};
+const ItemGlyph = ({ it, size = 26 }) => /* @__PURE__ */ jsx("svg", {
+	width: size,
+	height: size,
+	viewBox: `0 0 ${size} ${size}`,
+	style: { display: "block" },
+	"aria-hidden": true,
+	children: it.kind === "coin" ? /* @__PURE__ */ jsx(CoinGlyph, {
+		cx: size / 2,
+		cy: size / 2,
+		r: size * .42,
+		face: String(it.val)
+	}) : /* @__PURE__ */ jsx(DiceGlyph, {
+		x: size * .1,
+		y: size * .1,
+		size: size * .8,
+		value: Number(it.val)
+	})
+});
+function OutcomeBuilderLab({ stages: stages0 = ["coin", "coin"], maxOutcomes = 72, title = "Build the sample space", prompt, objectives, hints: hintList, controlId }) {
+	const [stages, setStages] = useState(stages0);
+	const [fav, setFav] = useState(/* @__PURE__ */ new Set());
+	const hints = useHints(hintList);
+	const outcomes = useMemo(() => {
+		let acc = [[]];
+		for (const s of stages) acc = acc.flatMap((row) => OPTIONS[s].map((v) => [...row, {
+			kind: s,
+			val: v
+		}]));
+		return acc;
+	}, [stages]);
+	const total = stages.reduce((a, s) => a * OPTIONS[s].length, 1);
+	const tooMany = total > maxOutcomes;
+	const key = (o) => o.map((it) => `${it.kind[0]}${it.val}`).join("");
+	const add = (k) => {
+		if (total * OPTIONS[k].length <= maxOutcomes * 4) {
+			setStages((s) => [...s, k]);
+			setFav(/* @__PURE__ */ new Set());
+		}
+	};
+	const removeStage = () => {
+		setStages((s) => s.slice(0, -1));
+		setFav(/* @__PURE__ */ new Set());
+	};
+	const reset = () => {
+		setStages(stages0);
+		setFav(/* @__PURE__ */ new Set());
+	};
+	const toggle = (k) => setFav((f) => {
+		const n = new Set(f);
+		n.has(k) ? n.delete(k) : n.add(k);
+		return n;
+	});
+	const favCount = fav.size;
+	const g = favCount > 0 ? gcd(favCount, total) : 1;
+	useCheckpoint({
+		solved: favCount > 0,
+		activity: `outcome-builder:${title}`,
+		hintsUsed: hints.count
+	});
+	useControlSurface(controlId, {
+		addCoin: {
+			type: "action",
+			label: "add a coin",
+			invoke: () => add("coin")
+		},
+		addDie: {
+			type: "action",
+			label: "add a die",
+			invoke: () => add("die")
+		},
+		remove: {
+			type: "action",
+			label: "remove last stage",
+			invoke: removeStage
+		},
+		reset: {
+			type: "action",
+			label: "reset",
+			invoke: reset
+		}
+	});
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			gap: 8,
+			alignItems: "center",
+			flexWrap: "wrap",
+			fontSize: 16,
+			fontWeight: 700,
+			margin: "6px 0"
+		},
+		children: [stages.map((s, i) => /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: 4
+			},
+			children: [
+				i > 0 && /* @__PURE__ */ jsx("span", {
+					style: { color: "var(--stage-muted)" },
+					children: "×"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: { color: "var(--stage-accent)" },
+					children: OPTIONS[s].length
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					style: {
+						fontSize: 11,
+						color: "var(--stage-muted)",
+						fontWeight: 500
+					},
+					children: [
+						"(",
+						s,
+						")"
+					]
+				})
+			]
+		}, i)), stages.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", {
+				style: { color: "var(--stage-muted)" },
+				children: "="
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: { color: "var(--stage-good)" },
+				children: total
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: 13,
+					color: "var(--stage-muted)",
+					fontWeight: 500
+				},
+				children: "outcomes"
+			})
+		] })]
+	}), tooMany ? /* @__PURE__ */ jsxs("p", {
+		style: {
+			margin: "12px 0",
+			padding: 12,
+			borderRadius: 10,
+			border: "1px dashed var(--stage-grid)",
+			color: "var(--stage-muted)"
+		},
+		children: [
+			"That's ",
+			/* @__PURE__ */ jsx("b", { children: total }),
+			" equally-likely outcomes — too many to draw. The counting principle still gives the count without listing them all."
+		]
+	}) : /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: 6,
+			margin: "12px 0",
+			padding: 10,
+			borderRadius: 12,
+			background: "var(--stage-bg)",
+			border: "1px solid var(--stage-grid)"
+		},
+		children: outcomes.map((o) => {
+			const k = key(o);
+			const on = fav.has(k);
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => toggle(k),
+				"aria-pressed": on,
+				style: {
+					display: "inline-flex",
+					gap: 2,
+					padding: "4px 6px",
+					borderRadius: 8,
+					cursor: "pointer",
+					border: `1.5px solid ${on ? "var(--stage-good)" : "var(--stage-grid)"}`,
+					background: on ? "color-mix(in oklab, var(--stage-good) 16%, transparent)" : "transparent"
+				},
+				children: o.map((it, i) => /* @__PURE__ */ jsx(ItemGlyph, {
+					it,
+					size: 24
+				}, i))
+			}, k);
+		})
+	})] });
+	const controls = /* @__PURE__ */ jsxs(ControlBar, { children: [
+		/* @__PURE__ */ jsx(Chip, {
+			selected: false,
+			onClick: () => add("coin"),
+			children: "+ coin"
+		}),
+		/* @__PURE__ */ jsx(Chip, {
+			selected: false,
+			onClick: () => add("die"),
+			children: "+ die"
+		}),
+		/* @__PURE__ */ jsx(Chip, {
+			selected: false,
+			onClick: removeStage,
+			children: "− stage"
+		}),
+		/* @__PURE__ */ jsx(Chip, {
+			selected: false,
+			onClick: reset,
+			children: "reset"
+		}),
+		/* @__PURE__ */ jsx(Chip, {
+			selected: false,
+			onClick: () => setFav(/* @__PURE__ */ new Set()),
+			children: "clear event"
+		})
+	] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		aside: /* @__PURE__ */ jsx(Callout, {
+			tone: favCount > 0 ? "result" : "info",
+			children: favCount > 0 ? /* @__PURE__ */ jsxs("span", {
+				style: {
+					color: "var(--stage-good)",
+					fontWeight: 700
+				},
+				children: [
+					/* @__PURE__ */ jsx(Tex$1, { tex: `P(\\text{event}) = ${favCount}/${total}` }),
+					g > 1 && /* @__PURE__ */ jsxs("span", {
+						style: { color: "var(--stage-muted)" },
+						children: [" ", /* @__PURE__ */ jsx(Tex$1, { tex: `= ${favCount / g}/${total / g}` })]
+					}),
+					" ",
+					/* @__PURE__ */ jsx(Tex$1, { tex: `= ${(favCount / total).toFixed(3)}` })
+				]
+			}) : /* @__PURE__ */ jsxs("span", {
+				style: { color: "var(--stage-muted)" },
+				children: [
+					"Click outcomes to mark an event → its probability is favourable ÷ ",
+					total,
+					"."
+				]
+			})
+		}),
+		controls,
+		footer: /* @__PURE__ */ jsx(HintLadder, { hints }),
+		children: figure
+	});
+}
+
+//#endregion
+export { OutcomeBuilderLab };

package/dist/discrete/pascal/preset.d.mts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+//#region src/discrete/pascal/preset.d.ts
+type PascalView = 'build' | 'binomial' | 'parity';
+interface PascalProps {
+  rows?: number;
+  view?: PascalView;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+  hints?: string[];
+  controlId?: string;
+}
+declare function PascalTriangleLab({
+  rows,
+  view: view0,
+  title,
+  prompt,
+  objectives,
+  hints: hintList,
+  controlId
+}: PascalProps): ReactNode;
+//#endregion
+export { PascalProps, PascalTriangleLab, PascalView };

package/dist/discrete/pascal/preset.mjs

@@ -0,0 +1,372 @@
+'use client';
+
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { Chip, Slider } from "../../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
+import { HintLadder, useHints } from "../../kit/pedagogy.mjs";
+import { nCr } from "../core/combinatorics.mjs";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useControlSurface } from "@classytic/stage";
+
+//#region src/discrete/pascal/preset.tsx
+/**
+* PascalTriangleLab — where counting, the binomial theorem, and a fractal meet. The
+* triangle is built live by the one rule that defines it — each cell is the SUM of
+* the two above — and every cell is also C(n,k): the number of ways to choose k of
+* n (so the counting labs and this are the same numbers). Click a cell to see the
+* two parents add into it AND its three identities (combination · path count ·
+* binomial coefficient). Pick the binomial view and a whole ROW becomes the
+* expansion (a+b)ⁿ. Flip "odd/even" and the triangle blooms into the Sierpiński
+* triangle — the wow that shows structure hides in plain arithmetic.
+*
+* Values come from nCr (kernel), but the recurrence is what's shown — the formula
+* is derived by the picture, not stated.
+*/
+const CW = 46, RH = 42, R = 18, PAD = 22;
+const ACC = "var(--stage-accent)", GOOD = "var(--stage-good)", WARN = "var(--stage-warn)";
+function expansionTex(n) {
+	const terms = [];
+	for (let k = 0; k <= n; k++) {
+		const c = nCr(n, k), ai = n - k, bi = k;
+		let t = c === 1 ? "" : String(c);
+		if (ai > 0) t += ai === 1 ? "a" : `a^{${ai}}`;
+		if (bi > 0) t += bi === 1 ? "b" : `b^{${bi}}`;
+		terms.push(t || "1");
+	}
+	return `(a+b)^{${n}} = ${terms.join(" + ")}`;
+}
+function PascalTriangleLab({ rows = 7, view: view0 = "build", title = "Pascal's triangle", prompt, objectives, hints: hintList, controlId }) {
+	const [N, setN] = useState(rows);
+	const [view, setView] = useState(view0);
+	const [sel, setSel] = useState({
+		n: 4,
+		k: 2
+	});
+	const hints = useHints(hintList);
+	const vbW = N * CW + 2 * R + 40, vbH = PAD + (N + 1) * RH + 10;
+	const cx = (n, k) => vbW / 2 + (k - n / 2) * CW;
+	const cy = (n) => 40 + n * RH;
+	const selRow = sel?.n ?? -1;
+	const parents = useMemo(() => {
+		if (!sel || sel.n === 0) return null;
+		return {
+			l: sel.k - 1 >= 0 && sel.k - 1 <= sel.n - 1 ? {
+				n: sel.n - 1,
+				k: sel.k - 1
+			} : null,
+			r: sel.k <= sel.n - 1 ? {
+				n: sel.n - 1,
+				k: sel.k
+			} : null
+		};
+	}, [sel]);
+	useControlSurface(controlId, {
+		rows: {
+			type: "number",
+			label: "rows",
+			min: 3,
+			max: 14,
+			step: 1,
+			get: () => N,
+			set: (v) => setN(Math.round(v))
+		},
+		view: {
+			type: "enum",
+			label: "view",
+			options: [
+				"build",
+				"binomial",
+				"parity"
+			],
+			get: () => view,
+			set: (v) => setView(v)
+		}
+	});
+	const cells = [];
+	for (let n = 0; n <= N; n++) for (let k = 0; k <= n; k++) {
+		const v = nCr(n, k);
+		const odd = v % 2 === 1;
+		const isSel = sel?.n === n && sel?.k === k;
+		const isParent = parents && (parents.l?.n === n && parents.l?.k === k || parents.r?.n === n && parents.r?.k === k);
+		const inRow = view === "binomial" && n === selRow;
+		let fill = "var(--stage-bg)", stroke = "var(--stage-grid)", txt = "var(--stage-fg)";
+		if (view === "parity") {
+			fill = odd ? ACC : "transparent";
+			stroke = odd ? ACC : "color-mix(in oklab, var(--stage-grid) 50%, transparent)";
+			txt = odd ? "white" : "var(--stage-muted)";
+		}
+		if (isParent) {
+			fill = `color-mix(in oklab, ${WARN} 22%, var(--stage-bg))`;
+			stroke = WARN;
+		}
+		if (inRow) {
+			fill = `color-mix(in oklab, ${ACC} 14%, var(--stage-bg))`;
+			stroke = ACC;
+		}
+		if (isSel) {
+			fill = GOOD;
+			stroke = GOOD;
+			txt = "white";
+		}
+		const digits = String(v).length;
+		cells.push(/* @__PURE__ */ jsxs("g", {
+			onClick: () => setSel({
+				n,
+				k
+			}),
+			style: { cursor: "pointer" },
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: cx(n, k),
+				cy: cy(n),
+				r: R,
+				fill,
+				stroke,
+				strokeWidth: isSel || isParent ? 2.5 : 1.3
+			}), (view !== "parity" || odd) && /* @__PURE__ */ jsx("text", {
+				x: cx(n, k),
+				y: cy(n),
+				textAnchor: "middle",
+				dominantBaseline: "central",
+				fontSize: Math.max(9, 15 - (digits - 1) * 2),
+				fontWeight: isSel ? 800 : 600,
+				fill: txt,
+				style: { pointerEvents: "none" },
+				children: v
+			})]
+		}, `${n}-${k}`));
+	}
+	const arrows = [];
+	if (parents && sel) {
+		for (const p of [parents.l, parents.r]) if (p) arrows.push(/* @__PURE__ */ jsx("line", {
+			x1: cx(p.n, p.k),
+			y1: cy(p.n) + R,
+			x2: cx(sel.n, sel.k),
+			y2: cy(sel.n) - R,
+			stroke: WARN,
+			strokeWidth: 2,
+			markerEnd: "url(#stage-arrow)"
+		}, `a${p.k}`));
+	}
+	const figure = /* @__PURE__ */ jsx("div", {
+		style: {
+			borderRadius: 14,
+			background: "var(--stage-bg)",
+			border: "1px solid var(--stage-grid)",
+			padding: 8
+		},
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: `0 0 ${vbW} ${vbH}`,
+			style: {
+				width: "100%",
+				maxWidth: vbW,
+				height: "auto",
+				display: "block"
+			},
+			role: "img",
+			"aria-label": `Pascal's triangle, ${N + 1} rows`,
+			children: [
+				/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
+					id: "stage-arrow",
+					viewBox: "0 0 10 10",
+					refX: "8",
+					refY: "5",
+					markerWidth: "6",
+					markerHeight: "6",
+					orient: "auto-start-reverse",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M0,0 L10,5 L0,10 z",
+						fill: WARN
+					})
+				}) }),
+				arrows,
+				cells
+			]
+		})
+	});
+	const aside = sel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Callout, {
+		tone: "result",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				style: {
+					fontSize: 12,
+					color: "var(--stage-muted)",
+					fontWeight: 600
+				},
+				children: [
+					"cell (row ",
+					sel.n,
+					", position ",
+					sel.k,
+					")"
+				]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "lab-callout-big",
+				children: nCr(sel.n, sel.k)
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				style: {
+					fontSize: 12,
+					color: "var(--stage-muted)"
+				},
+				children: [
+					"C(",
+					sel.n,
+					",",
+					sel.k,
+					")"
+				]
+			})
+		]
+	}), /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "grid",
+			gap: 6,
+			fontSize: 13.5
+		},
+		children: [
+			parents && (parents.l || parents.r) ? /* @__PURE__ */ jsxs("p", {
+				style: { margin: 0 },
+				children: ["📐 sum of the two above: ", /* @__PURE__ */ jsxs("b", { children: [
+					parents.l ? nCr(parents.l.n, parents.l.k) : 0,
+					" + ",
+					parents.r ? nCr(parents.r.n, parents.r.k) : 0,
+					" = ",
+					nCr(sel.n, sel.k)
+				] })]
+			}) : /* @__PURE__ */ jsxs("p", {
+				style: { margin: 0 },
+				children: [
+					"📐 an edge — always ",
+					/* @__PURE__ */ jsx("b", { children: "1" }),
+					" (one way)."
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				style: { margin: 0 },
+				children: [
+					"🎯 = ways to ",
+					/* @__PURE__ */ jsxs("b", { children: [
+						"choose ",
+						sel.k,
+						" of ",
+						sel.n
+					] }),
+					" (C(",
+					sel.n,
+					",",
+					sel.k,
+					"))"
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				style: { margin: 0 },
+				children: [
+					"➕ = coefficient of ",
+					/* @__PURE__ */ jsx(Tex$1, { tex: `a^{${sel.n - sel.k}}b^{${sel.k}}` }),
+					" in (a+b)",
+					/* @__PURE__ */ jsx("sup", { children: sel.n })
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				style: {
+					margin: 0,
+					color: "var(--stage-muted)"
+				},
+				children: [
+					"row ",
+					sel.n,
+					" sums to 2",
+					/* @__PURE__ */ jsx("sup", { children: sel.n }),
+					" = ",
+					2 ** sel.n
+				]
+			})
+		]
+	})] }) : /* @__PURE__ */ jsx(Callout, { children: "Click any cell." });
+	const footer = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		view === "binomial" && selRow >= 0 && /* @__PURE__ */ jsxs("div", {
+			style: {
+				padding: "8px 12px",
+				borderRadius: 10,
+				background: "color-mix(in oklab, var(--stage-accent) 8%, transparent)",
+				overflowX: "auto"
+			},
+			children: [
+				/* @__PURE__ */ jsx(Tex$1, { tex: expansionTex(selRow) }),
+				" ",
+				/* @__PURE__ */ jsxs("span", {
+					style: {
+						color: "var(--stage-muted)",
+						fontSize: 12
+					},
+					children: [
+						"← row ",
+						selRow,
+						" of the triangle is the coefficients"
+					]
+				})
+			]
+		}),
+		view === "parity" && /* @__PURE__ */ jsxs("p", {
+			className: "lab-prompt",
+			children: [
+				"Colour only the ",
+				/* @__PURE__ */ jsx("b", { children: "odd" }),
+				" numbers → the ",
+				/* @__PURE__ */ jsx("b", { children: "Sierpiński triangle" }),
+				" appears. Structure hiding inside plain addition."
+			]
+		}),
+		/* @__PURE__ */ jsx(HintLadder, { hints })
+	] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		aside,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsx(Field, {
+			label: "view",
+			children: /* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "flex",
+					gap: 6
+				},
+				children: [
+					/* @__PURE__ */ jsx(Chip, {
+						selected: view === "build",
+						onClick: () => setView("build"),
+						children: "build (sum above)"
+					}),
+					/* @__PURE__ */ jsx(Chip, {
+						selected: view === "binomial",
+						onClick: () => setView("binomial"),
+						children: "(a+b)ⁿ"
+					}),
+					/* @__PURE__ */ jsx(Chip, {
+						selected: view === "parity",
+						onClick: () => setView("parity"),
+						children: "odd/even"
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx(Field, {
+			label: "rows",
+			value: N,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: N,
+				min: 3,
+				max: 14,
+				step: 1,
+				onChange: setN,
+				ariaLabel: "rows"
+			})
+		})] }),
+		footer,
+		children: figure
+	});
+}
+
+//#endregion
+export { PascalTriangleLab };

package/dist/discrete/sample-space/index.d.mts

@@ -0,0 +1 @@
+import { Cmp, Reduce, SampleEvent, SampleSpaceBoardLab, SampleSpaceProps } from "./preset.mjs";