@classytic/labs 0.1.0 → 0.2.0

package/dist/discrete/monte-carlo/preset.mjs

@@ -3,18 +3,19 @@
 import { mulberry32, randInt } from "../../core/rng.mjs";
 import { Chip, Slider } from "../../kit/controls.mjs";
 import { Callout, ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
-import { HintLadder, useHints } from "../../kit/pedagogy.mjs";
+import { HintLadder, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
 import { useReducedMotionDeferred } from "../../kit/anim.mjs";
+import { catColor, catToken } from "../../kit/palette.mjs";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CanvasLayer, useControlSurface, useFrameLoop, useInView } from "@classytic/stage";
 
 //#region src/discrete/monte-carlo/preset.tsx
 /**
-* MonteCarloLab — the GENERAL "estimate a probability by running it many times"
+* MonteCarloLab, the GENERAL "estimate a probability by running it many times"
 * engine. The whole of statistical ML rests on one idea this lab makes visible:
 * the empirical frequency of an event converges to its true probability as trials
-* pile up (the law of large numbers). You don't compute the answer — you SAMPLE
+* pile up (the law of large numbers). You don't compute the answer, you SAMPLE
 * it, and watch the estimate settle onto the truth.
 *
 * It is general by construction: a creator supplies one or more SERIES, each just
@@ -22,19 +23,13 @@ import { CanvasLayer, useControlSurface, useFrameLoop, useInView } from "@classy
 * estimates like π). The lab runs seeded batches per frame, tracks hits/total,
 * and draws either a convergence run-chart (empirical line homing onto the dashed
 * theoretical) or a dart scatter. Randomness is a SEEDED PRNG (mulberry32), so a
-* run is replayable — an agent can pin a seed and reproduce a lesson exactly.
+* run is replayable, an agent can pin a seed and reproduce a lesson exactly.
 *
 * Ships a small library of named experiments (`montyHall`, `piDarts`, `diceSum`,
-* `bernoulli`) that expand to series — the Monty Hall paradox (switch ⇒ ⅔, stay
+* `bernoulli`) that expand to series, the Monty Hall paradox (switch ⇒ ⅔, stay
 * ⇒ ⅓, two lines splitting apart) is the headline. Add an experiment by writing a
 * factory that returns series; the engine never changes.
 */
-const COLORS = [
-	"#1c7ed6",
-	"#e8590c",
-	"#2f9e44",
-	"#9c36b5"
-];
 function montyTrial(rng, doSwitch, doors) {
 	const car = randInt(rng, 0, doors - 1);
 	const pick = randInt(rng, 0, doors - 1);
@@ -206,7 +201,7 @@ function MonteCarloLab({ series: seriesIn, experiment, viz: vizIn, seed = 12345,
 		const tok = (n, fb) => css.getPropertyValue(n).trim() || fb;
 		tok("--stage-fg", "#222");
 		const grid = tok("--stage-grid", "rgba(125,125,125,.25)"), muted = tok("--stage-muted", "#888"), good = tok("--stage-good", "#2f9e44");
-		const seriesColor = (i) => series[i].color ?? COLORS[i % COLORS.length];
+		const seriesColor = (i) => series[i].color ?? tok(catToken(i), `hsl(${i * 47 % 360} 70% 50%)`);
 		const W = ctx.canvas.clientWidth || 640, Hh = height;
 		ctx.clearRect(0, 0, W, Hh);
 		if (viz === "scatter") {
@@ -315,13 +310,18 @@ function MonteCarloLab({ series: seriesIn, experiment, viz: vizIn, seed = 12345,
 		const frac = total ? st.hits / total : 0;
 		return {
 			label: s.label,
-			color: s.color ?? COLORS[i % COLORS.length],
+			color: s.color ?? catColor(i),
 			est: s.estimate ? s.estimate(frac) : frac,
 			theoretical: s.theoretical,
 			total
 		};
 	});
 	const totalTrials = stats.reduce((a, b) => Math.max(a, b.total), 0);
+	useCheckpoint({
+		solved: stats.length > 0 && totalTrials >= 300 && stats.every((s) => s.theoretical == null || Math.abs(s.est - s.theoretical) <= (viz === "scatter" ? .05 : .02)),
+		activity: `monte-carlo:${title}`,
+		hintsUsed: hints.count
+	});
 	useControlSurface(controlId, {
 		run: {
 			type: "action",
@@ -389,7 +389,7 @@ function MonteCarloLab({ series: seriesIn, experiment, viz: vizIn, seed = 12345,
 					children: [
 						s.label,
 						": ",
-						s.total ? s.est.toFixed(viz === "scatter" ? 4 : 3) : "—",
+						s.total ? s.est.toFixed(viz === "scatter" ? 4 : 3) : ", ",
 						s.theoretical != null && /* @__PURE__ */ jsxs("span", {
 							style: {
 								color: "var(--stage-muted)",

package/dist/discrete/monty-hall/preset.mjs

@@ -10,11 +10,11 @@ import { useControlSurface, useFrameLoop, useInView } from "@classytic/stage";
 
 //#region src/discrete/monty-hall/preset.tsx
 /**
-* MontyHallLab — the paradox as a GAME you play, not a chart you stare at. Three
+* MontyHallLab, the paradox as a GAME you play, not a chart you stare at. Three
 * doors (one hides a car, the rest goats); you pick, Monty throws open a goat, and
 * you choose to STAY or SWITCH and watch the door swing open on your fate. Every
 * game you (and the auto-player) finish feeds two growing win-rate bars, so the
-* shocking truth — switch ≈ 2/3, stay ≈ 1/3 — is something you EARN by watching it
+* shocking truth, switch ≈ 2/3, stay ≈ 1/3, is something you EARN by watching it
 * happen, the law of large numbers built from felt experience.
 *
 * Doors/car/goat are stage glyphs (DoorGlyph swings open via CSS); the round logic
@@ -200,7 +200,7 @@ function MontyHallLab({ doors = 3, seed = 7, title = "The Monty Hall game", prom
 	const swTarget = (n - 1) / n, stTarget = 1 / n;
 	const narration = () => {
 		if (phase === "pick") return pick == null ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			"🎬 Pick a door — one hides the ",
+			"🎬 Pick a door, one hides the ",
 			/* @__PURE__ */ jsx("b", { children: "car" }),
 			", the others ",
 			/* @__PURE__ */ jsx("b", { children: "goats" }),
@@ -213,7 +213,7 @@ function MontyHallLab({ doors = 3, seed = 7, title = "The Monty Hall game", prom
 		if (phase === "revealed") return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			"Monty opened ",
 			opened.map((d) => `Door ${d + 1}`).join(", "),
-			" — a goat! 🐐 Now: ",
+			", a goat! 🐐 Now: ",
 			/* @__PURE__ */ jsx("b", { children: "stay" }),
 			" with Door ",
 			pick + 1,
@@ -238,7 +238,7 @@ function MontyHallLab({ doors = 3, seed = 7, title = "The Monty Hall game", prom
 			}),
 			" You ",
 			strategy === "switch" ? "switched" : "stayed",
-			" — the car was behind Door ",
+			", the car was behind Door ",
 			car + 1,
 			"."
 		] });
@@ -436,7 +436,7 @@ function MontyHallLab({ doors = 3, seed = 7, title = "The Monty Hall game", prom
 							color: "var(--stage-muted)"
 						},
 						children: [
-							games ? `${(rate * 100).toFixed(1)}%` : "—",
+							games ? `${(rate * 100).toFixed(1)}%` : ", ",
 							" · ",
 							wins,
 							"/",

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

@@ -12,12 +12,12 @@ import { useControlSurface } from "@classytic/stage";
 
 //#region src/discrete/outcome-builder/preset.tsx
 /**
-* OutcomeBuilderLab — "where do the possibilities come from?" Build a sample space
+* 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.
+* 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.
@@ -181,7 +181,7 @@ function OutcomeBuilderLab({ stages: stages0 = ["coin", "coin"], maxOutcomes = 7
 		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."
+			" equally-likely outcomes, too many to draw. The counting principle still gives the count without listing them all."
 		]
 	}) : /* @__PURE__ */ jsx("div", {
 		style: {

package/dist/discrete/pascal/preset.mjs

@@ -3,7 +3,7 @@
 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 { ChallengeCard, HintLadder, useChallenge, useCheckpoint, 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";
@@ -11,16 +11,16 @@ 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
+* 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.
+* triangle, the wow that shows structure hides in plain arithmetic.
 *
-* Values come from nCr (kernel), but the recurrence is what's shown — the formula
+* 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;
@@ -44,6 +44,31 @@ function PascalTriangleLab({ rows = 7, view: view0 = "build", title = "Pascal's
 		k: 2
 	});
 	const hints = useHints(hintList);
+	const Q = useMemo(() => [{
+		id: "pascal-C52",
+		prompt: "Row 5 of Pascal’s triangle is 1, 5, 10, 10, 5, 1. What is C(5,2) — the number of ways to choose 2 from 5?",
+		choices: [
+			{
+				value: "20",
+				label: "20"
+			},
+			{
+				value: "10",
+				label: "10"
+			},
+			{
+				value: "7",
+				label: "7"
+			}
+		],
+		answer: "10",
+		explain: "Each cell is the sum of the two above it, and equals C(n,k); C(5,2)=10, while 5×4=20 counts ORDERED pairs."
+	}], []);
+	const ch = useChallenge(Q);
+	useCheckpoint({
+		solved: ch.allCorrect,
+		activity: "pascal:predict"
+	});
 	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;
@@ -238,7 +263,7 @@ function PascalTriangleLab({ rows = 7, view: view0 = "build", title = "Pascal's
 			}) : /* @__PURE__ */ jsxs("p", {
 				style: { margin: 0 },
 				children: [
-					"📐 an edge — always ",
+					"📐 an edge, always ",
 					/* @__PURE__ */ jsx("b", { children: "1" }),
 					" (one way)."
 				]
@@ -286,6 +311,11 @@ function PascalTriangleLab({ rows = 7, view: view0 = "build", title = "Pascal's
 		]
 	})] }) : /* @__PURE__ */ jsx(Callout, { children: "Click any cell." });
 	const footer = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(ChallengeCard, {
+			questions: Q,
+			state: ch,
+			title: "Predict first"
+		}),
 		view === "binomial" && selRow >= 0 && /* @__PURE__ */ jsxs("div", {
 			style: {
 				padding: "8px 12px",

package/dist/discrete/rules.d.mts

@@ -0,0 +1,20 @@
+import { Worked } from "../kit/calc.mjs";
+import { RuleDef } from "../kit/rule.mjs";
+
+//#region src/discrete/rules.d.ts
+declare function explainFactorial(n: number): Worked;
+declare function explainNPr(n: number, r: number): Worked;
+declare function explainNCr(n: number, r: number): Worked;
+declare function explainProduct(stages: number[]): Worked;
+declare function explainSum(cases: number[]): Worked;
+declare function explainPermWithRep(n: number, r: number): Worked;
+declare const PRODUCT_RULE: RuleDef;
+declare const SUM_RULE: RuleDef;
+declare const FACTORIAL_RULE: RuleDef;
+declare const PERMUTATION_RULE: RuleDef;
+declare const COMBINATION_RULE: RuleDef;
+declare const PERM_REP_RULE: RuleDef;
+/** The full counting rulebook, in teaching order, for a gallery / rulebook lab. */
+declare const COUNTING_RULES: RuleDef[];
+//#endregion
+export { COMBINATION_RULE, COUNTING_RULES, FACTORIAL_RULE, PERMUTATION_RULE, PERM_REP_RULE, PRODUCT_RULE, SUM_RULE, explainFactorial, explainNCr, explainNPr, explainPermWithRep, explainProduct, explainSum };

package/dist/discrete/rules.mjs

@@ -0,0 +1,264 @@
+import { calc, texNum } from "../kit/calc.mjs";
+import { factorial, nCr, nPr, permutationsWithRepetition, ruleOfProduct, ruleOfSum } from "./core/combinatorics.mjs";
+
+//#region src/discrete/rules.ts
+/**
+* The counting RULEBOOK, as data. Each rule is a {@link RuleDef} an author drops
+* into a lab/lesson (formula + analogy + a live calculator that shows its working
+* + a derivation/proof + tricks). The calculators COMPUTE through the
+* combinatorics kernel (single source of truth) and NARRATE the working in LaTeX,
+* so a lab teaches HOW the rule computes, not just the answer.
+*/
+function explainFactorial(n) {
+	const v = factorial(n);
+	const chain = n <= 1 ? "1" : Array.from({ length: n }, (_, i) => n - i).join(" \\times ");
+	return calc().step(`${n}! = ${chain}`, "multiply every whole number down to 1").step(`= ${texNum(v)}`).done(v);
+}
+function explainNPr(n, r) {
+	const v = nPr(n, r);
+	const chain = r <= 0 ? "1" : Array.from({ length: r }, (_, i) => n - i).join(" \\times ");
+	return calc().step(`P(${n},${r}) = \\frac{${n}!}{(${n}-${r})!} = \\frac{${n}!}{${n - r}!}`, "cancel the unused tail").step(`= ${chain}`, `${r} falling factor${r === 1 ? "" : "s"}`).step(`= ${texNum(v)}`).done(v);
+}
+function explainNCr(n, r) {
+	const v = nCr(n, r);
+	const p = nPr(n, r), kf = factorial(r);
+	return calc().step(`C(${n},${r}) = \\frac{P(${n},${r})}{${r}!} = \\frac{${n}!}{${r}!\\,(${n}-${r})!}`, "order ignored: divide out the r! re-orderings").step(`= \\frac{${texNum(p)}}{${texNum(kf)}}`, `P(${n},${r})=${texNum(p)},\\; ${r}!=${texNum(kf)}`).step(`= ${texNum(v)}`).done(v);
+}
+function explainProduct(stages) {
+	const v = ruleOfProduct(...stages);
+	return calc().step(stages.map(texNum).join(" \\times "), "multiply the choices at each independent stage (AND)").step(`= ${texNum(v)}`).done(v);
+}
+function explainSum(cases) {
+	const v = ruleOfSum(...cases);
+	return calc().step(cases.map(texNum).join(" + "), "add the mutually-exclusive cases (OR)").step(`= ${texNum(v)}`).done(v);
+}
+function explainPermWithRep(n, r) {
+	const v = permutationsWithRepetition(n, r);
+	const chain = Array.from({ length: Math.max(1, r) }, () => texNum(n)).join(" \\times ");
+	return calc().step(`${n}^{${r}} = ${chain}`, `each of ${r} positions has all ${n} options`).step(`= ${texNum(v)}`).done(v);
+}
+const PRODUCT_RULE = {
+	id: "rule-of-product",
+	name: "Rule of product (AND → multiply)",
+	formula: "\\#(A \\text{ then } B) = \\#A \\times \\#B",
+	analogy: "An outfit = pick a shirt AND pick trousers: 4 shirts × 3 trousers = 12 outfits.",
+	inputs: [
+		{
+			key: "a",
+			label: "stage 1",
+			default: 4,
+			min: 1,
+			max: 20
+		},
+		{
+			key: "b",
+			label: "stage 2",
+			default: 3,
+			min: 1,
+			max: 20
+		},
+		{
+			key: "c",
+			label: "stage 3",
+			default: 2,
+			min: 1,
+			max: 20
+		}
+	],
+	compute: (v) => explainProduct([
+		v.a ?? 1,
+		v.b ?? 1,
+		v.c ?? 1
+	]),
+	derivation: [
+		{ tex: "\\text{Each of the } \\#A \\text{ first choices}" },
+		{
+			tex: "\\text{pairs with all } \\#B \\text{ second choices}",
+			note: "independent"
+		},
+		{
+			tex: "\\Rightarrow \\#A \\times \\#B \\text{ outcomes}",
+			note: "an A × B grid"
+		}
+	],
+	tricks: [
+		"Use it when steps happen in SEQUENCE (\"and then\"), independently.",
+		"Repetition allowed ⇒ same count each stage ⇒ nʳ.",
+		"No repetition ⇒ the pool shrinks (n, n−1, …) ⇒ P(n,r)."
+	]
+};
+const SUM_RULE = {
+	id: "rule-of-sum",
+	name: "Rule of sum (OR → add)",
+	formula: "\\#(A \\text{ or } B) = \\#A + \\#B \\quad (A \\cap B = \\varnothing)",
+	analogy: "A drink = a tea OR a coffee: 3 teas + 5 coffees = 8 choices.",
+	inputs: [{
+		key: "a",
+		label: "case A",
+		default: 3,
+		min: 0,
+		max: 50
+	}, {
+		key: "b",
+		label: "case B",
+		default: 5,
+		min: 0,
+		max: 50
+	}],
+	compute: (v) => explainSum([v.a ?? 0, v.b ?? 0]),
+	tricks: [
+		"Use it for a choice BETWEEN exclusive cases (\"either … or\").",
+		"If the cases OVERLAP, subtract the double-count: |A∪B| = |A|+|B|−|A∩B|.",
+		"The exam trap in one line: \"and\" → ×, \"or\" → +."
+	]
+};
+const FACTORIAL_RULE = {
+	id: "factorial",
+	name: "Factorial: n!",
+	formula: "n! = n \\times (n-1) \\times \\cdots \\times 2 \\times 1",
+	analogy: "The ways to line up n distinct books on a shelf.",
+	inputs: [{
+		key: "n",
+		label: "n",
+		default: 5,
+		min: 0,
+		max: 12
+	}],
+	compute: (v) => explainFactorial(v.n ?? 0),
+	derivation: [
+		{
+			tex: "\\text{Slot 1: } n \\text{ choices}",
+			note: "any book first"
+		},
+		{
+			tex: "\\text{Slot 2: } (n-1) \\text{ choices}",
+			note: "one is used"
+		},
+		{
+			tex: "\\cdots \\text{ last slot: } 1",
+			note: "no choice left"
+		},
+		{
+			tex: "n \\times (n-1) \\times \\cdots \\times 1 = n!",
+			note: "rule of product"
+		}
+	],
+	tricks: [
+		"0! = 1 (one way to arrange nothing).",
+		"Grows explosively: 13! > 6 billion.",
+		"The engine under both P(n,r) and C(n,r)."
+	]
+};
+const PERMUTATION_RULE = {
+	id: "permutation",
+	name: "Permutations: P(n, r)",
+	formula: "P(n,r) = \\frac{n!}{(n-r)!}",
+	analogy: "Gold / silver / bronze to r of n runners: ORDER matters.",
+	inputs: [{
+		key: "n",
+		label: "n",
+		default: 5,
+		min: 0,
+		max: 12
+	}, {
+		key: "r",
+		label: "r",
+		default: 3,
+		min: 0,
+		max: 12
+	}],
+	compute: (v) => explainNPr(v.n ?? 0, v.r ?? 0),
+	derivation: [
+		{ tex: "\\text{Fill } r \\text{ ordered slots from } n" },
+		{
+			tex: "n \\times (n-1) \\times \\cdots \\times (n-r+1)",
+			note: "pool shrinks each slot"
+		},
+		{
+			tex: "= \\frac{n!}{(n-r)!}",
+			note: "the tail (n−r)! cancels"
+		}
+	],
+	tricks: [
+		"Order MATTERS → permutation; AB ≠ BA.",
+		"P(n,n) = n! (arrange everyone).",
+		"P(n,r) = C(n,r) × r! (choose, then order)."
+	]
+};
+const COMBINATION_RULE = {
+	id: "combination",
+	name: "Combinations: C(n, r)",
+	formula: "C(n,r) = \\binom{n}{r} = \\frac{n!}{r!\\,(n-r)!}",
+	analogy: "Picking a team of r from n: ORDER does NOT matter.",
+	inputs: [{
+		key: "n",
+		label: "n",
+		default: 5,
+		min: 0,
+		max: 20
+	}, {
+		key: "r",
+		label: "r",
+		default: 3,
+		min: 0,
+		max: 20
+	}],
+	compute: (v) => explainNCr(v.n ?? 0, v.r ?? 0),
+	derivation: [
+		{
+			tex: "\\text{Order them first: } P(n,r) = \\frac{n!}{(n-r)!}",
+			note: "the ordered count"
+		},
+		{
+			tex: "\\text{Each team was counted } r! \\text{ times}",
+			note: "its r! orderings"
+		},
+		{
+			tex: "C(n,r) = \\frac{P(n,r)}{r!} = \\frac{n!}{r!\\,(n-r)!}",
+			note: "divide out the over-count"
+		}
+	],
+	tricks: [
+		"Order does NOT matter → combination; {A,B} = {B,A}.",
+		"Symmetry: C(n,r) = C(n, n−r) (choose who is OUT).",
+		"Row n of Pascal’s triangle IS C(n,0) … C(n,n).",
+		"\"Overcount by order, then divide it out\": C = P ÷ r!."
+	]
+};
+const PERM_REP_RULE = {
+	id: "perm-with-rep",
+	name: "Permutations with repetition: nʳ",
+	formula: "\\#\\text{strings} = n^{r}",
+	analogy: "A 4-digit PIN from 10 digits: each slot independently has all 10 → 10⁴.",
+	inputs: [{
+		key: "n",
+		label: "options n",
+		default: 10,
+		min: 1,
+		max: 26
+	}, {
+		key: "r",
+		label: "positions r",
+		default: 4,
+		min: 0,
+		max: 10
+	}],
+	compute: (v) => explainPermWithRep(v.n ?? 1, v.r ?? 0),
+	tricks: [
+		"Repetition ALLOWED and order matters → nʳ.",
+		"It is the rule of product with the SAME n each stage.",
+		"Counts functions A→B, binary strings (2ⁿ), dice-roll sequences."
+	]
+};
+/** The full counting rulebook, in teaching order, for a gallery / rulebook lab. */
+const COUNTING_RULES = [
+	PRODUCT_RULE,
+	SUM_RULE,
+	FACTORIAL_RULE,
+	PERMUTATION_RULE,
+	COMBINATION_RULE,
+	PERM_REP_RULE
+];
+
+//#endregion
+export { COMBINATION_RULE, COUNTING_RULES, FACTORIAL_RULE, PERMUTATION_RULE, PERM_REP_RULE, PRODUCT_RULE, SUM_RULE, explainFactorial, explainNCr, explainNPr, explainPermWithRep, explainProduct, explainSum };

package/dist/discrete/sample-space/preset.mjs

@@ -11,17 +11,17 @@ import { useControlSurface, useLearner } from "@classytic/stage";
 
 //#region src/discrete/sample-space/preset.tsx
 /**
-* SampleSpaceBoard — the GENERAL equally-likely-outcomes tool. Probability =
+* SampleSpaceBoard, the GENERAL equally-likely-outcomes tool. Probability =
 * count the favourable slice of all equally-likely outcomes; this makes that
 * literal: every outcome is a cell, the learner SELECTS an event, and reads
 * favourable / total → P. The two-dice 6×6 grid is the star (you SEE P(sum=7)
 * as a diagonal of 6 cells = 1/6).
 *
 * Two authoring forms:
-*   • `dims` — a 1- or 2-D product space (one die [6], two dice [6,6], cards
+*   • `dims`, a 1- or 2-D product space (one die [6], two dice [6,6], cards
 *     [4,13]); cells are coordinate pairs, events are reduce-based (sum/diff/
 *     max/min/product/doubles) so they stay DATA, not code.
-*   • `outcomes` — an explicit 1-D list (coins HHT…, custom); event = a named
+*   • `outcomes`, an explicit 1-D list (coins HHT…, custom); event = a named
 *     favourable set.
 * Counts/P come from `@classytic/labs/discrete/core`; an agent narrates them.
 */
@@ -361,7 +361,7 @@ function SampleSpaceBoardLab({ dims, faces, dice, outcomes, event, mode: mode0,
 				children: "Check"
 			}), checked && /* @__PURE__ */ jsx(StatusPill, {
 				ok: correct,
-				children: correct ? "✓ Exactly the event" : "Not quite — green outlines are the ones you missed"
+				children: correct ? "✓ Exactly the event" : "Not quite, green outlines are the ones you missed"
 			})] }),
 			!isTarget && sel.size > 0 && /* @__PURE__ */ jsx(Chip, {
 				selected: true,

package/dist/discrete/selection/preset.mjs

@@ -5,13 +5,14 @@ import { CheckButton, Chip, StatusPill, Stepper } from "../../kit/controls.mjs";
 import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
 import { HintLadder, RevealSolution, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
 import { nCr } from "../core/combinatorics.mjs";
+import { CATEGORICAL } from "../../kit/palette.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/selection/preset.tsx
 /**
-* SelectionLab — "draw from the bag": counting (and probability) when you SELECT a
+* SelectionLab, "draw from the bag": counting (and probability) when you SELECT a
 * handful from groups, the pattern behind colored-ball urns and card hands. Pick how
 * many of each colour you want in the draw; the lab counts the favourable selections
 * as a product of per-group choices and divides by the total selections:
@@ -22,14 +23,7 @@ import { useControlSurface } from "@classytic/stage";
 * hands (13 hearts of 52, draw 5 → P(2 hearts)). Concrete: the bag is drawn as real
 * balls. Predict the count, then check. Kernel = nCr (the combination is the engine).
 */
-const PALETTE = [
-	"#e03131",
-	"#1c7ed6",
-	"#2f9e44",
-	"#f59f00",
-	"#9c36b5",
-	"#0ca678"
-];
+const PALETTE = CATEGORICAL;
 const NAMED = {
 	red: "#e03131",
 	blue: "#1c7ed6",
@@ -145,7 +139,7 @@ function SelectionLab({ groups = [
 			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("p", {
 				className: "lab-field-label",
 				children: [
-					"the bag — ",
+					"the bag, ",
 					N,
 					" total"
 				]
@@ -200,7 +194,7 @@ function SelectionLab({ groups = [
 				children: [
 					"draw ",
 					k,
-					" — you want: ",
+					", you want: ",
 					groups.map((g, i) => `${pick[i] ?? 0} ${g.label}`).join(" + ")
 				]
 			}), /* @__PURE__ */ jsxs("div", {
@@ -263,7 +257,7 @@ function SelectionLab({ groups = [
 						fontSize: 14
 					},
 					children: [
-						"Set how many of each colour to draw — they must add up to ",
+						"Set how many of each colour to draw, they must add up to ",
 						k,
 						"."
 					]
@@ -288,7 +282,7 @@ function SelectionLab({ groups = [
 				}),
 				/* @__PURE__ */ jsx("span", {
 					className: "lab-callout-big",
-					children: mode === "probability" ? valid ? frac(prob) : "—" : ways.toLocaleString()
+					children: mode === "probability" ? valid ? frac(prob) : ", " : ways.toLocaleString()
 				}),
 				/* @__PURE__ */ jsxs("span", {
 					style: {