@classytic/labs 0.1.0

package/dist/discrete/expected-value/preset.mjs

@@ -0,0 +1,352 @@
+'use client';
+
+import { mulberry32 } from "../../core/rng.mjs";
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { Chip, Slider, Stepper } from "../../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
+import { HintLadder, useHints } from "../../kit/pedagogy.mjs";
+import { expectedValue } from "../core/probability.mjs";
+import { useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useControlSurface } from "@classytic/stage";
+
+//#region src/discrete/expected-value/preset.tsx
+/**
+* ExpectedValueLab — E[X] = Σ value·prob, made physical: each outcome is a WEIGHT
+* (heavier = more likely) sitting at its value on a number line, and the expected
+* value is exactly where they BALANCE (the long-run average payout). Framed as "is
+* this game worth it?": a cost marker shows the house edge when E[X] < cost. Then
+* SPIN it many times and watch the running average settle onto E[X] (the law of
+* large numbers — the average is the expectation, earned).
+*
+* Drag the probabilities/values; the fulcrum slides. Kernel = expectedValue; seeded
+* rng for replayable spins.
+*/
+const W = 520, H = 210, ML = 30, MR = 20, AXIS = 138;
+const PAL = [
+	"#1c7ed6",
+	"#2f9e44",
+	"#e8590c",
+	"#9c36b5",
+	"#0ca678",
+	"#e03131"
+];
+function ExpectedValueLab({ outcomes = [
+	{
+		label: "lose",
+		value: 0,
+		prob: .7
+	},
+	{
+		label: "small",
+		value: 5,
+		prob: .25
+	},
+	{
+		label: "jackpot",
+		value: 50,
+		prob: .05
+	}
+], cost = 5, title = "Expected value — is the game fair?", prompt, objectives, hints: hintList, controlId }) {
+	const [probs, setProbs] = useState(outcomes.map((o) => o.prob));
+	const [vals, setVals] = useState(outcomes.map((o) => o.value));
+	const [plays, setPlays] = useState(0);
+	const [total, setTotal] = useState(0);
+	const rng = useRef(mulberry32(99));
+	const hints = useHints(hintList);
+	const sumP = probs.reduce((a, b) => a + b, 0) || 1;
+	const pn = probs.map((p) => p / sumP);
+	const ev = useMemo(() => expectedValue(vals.map((v, i) => ({
+		value: v,
+		p: pn[i]
+	}))), [vals, probs]);
+	const lo = Math.min(0, ...vals), hi = Math.max(...vals, cost) * 1.12 || 1;
+	const xOf = (v) => ML + (v - lo) / (hi - lo) * (W - ML - MR);
+	const avg = plays ? total / plays : null;
+	const spin = (times) => {
+		let t = total, c = plays;
+		for (let s = 0; s < times; s++) {
+			let r = rng.current(), i = 0;
+			while (i < pn.length - 1 && r > pn[i]) {
+				r -= pn[i];
+				i++;
+			}
+			t += vals[i];
+			c++;
+		}
+		setTotal(t);
+		setPlays(c);
+	};
+	const reset = () => {
+		setProbs(outcomes.map((o) => o.prob));
+		setVals(outcomes.map((o) => o.value));
+		setPlays(0);
+		setTotal(0);
+		rng.current = mulberry32(99);
+	};
+	useControlSurface(controlId, {
+		...Object.fromEntries(outcomes.map((o, i) => [`p_${o.label ?? i}`, {
+			type: "number",
+			label: `prob ${o.label ?? i}`,
+			min: 0,
+			max: 1,
+			step: .05,
+			get: () => probs[i] ?? 0,
+			set: (v) => {
+				setProbs((a) => a.map((x, j) => j === i ? v : x));
+			}
+		}])),
+		spin: {
+			type: "action",
+			label: "spin 50",
+			invoke: () => spin(50)
+		},
+		reset: {
+			type: "action",
+			label: "reset",
+			invoke: reset
+		}
+	});
+	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 ${W} ${H}`,
+			style: {
+				width: "100%",
+				maxWidth: W,
+				height: "auto",
+				display: "block"
+			},
+			role: "img",
+			"aria-label": `expected value ${ev.toFixed(2)}`,
+			children: [
+				vals.map((v, i) => {
+					const r = 7 + 24 * pn[i];
+					return /* @__PURE__ */ jsxs("g", { children: [
+						/* @__PURE__ */ jsx("line", {
+							x1: xOf(v),
+							y1: AXIS,
+							x2: xOf(v),
+							y2: AXIS - 40 - r,
+							stroke: "var(--stage-grid)",
+							strokeWidth: 1
+						}),
+						/* @__PURE__ */ jsx("circle", {
+							cx: xOf(v),
+							cy: AXIS - 40 - r,
+							r,
+							fill: PAL[i % PAL.length],
+							opacity: .9
+						}),
+						/* @__PURE__ */ jsxs("text", {
+							x: xOf(v),
+							y: AXIS - 40 - r,
+							textAnchor: "middle",
+							dominantBaseline: "central",
+							fontSize: 11,
+							fontWeight: 700,
+							fill: "white",
+							children: [(pn[i] * 100).toFixed(0), "%"]
+						}),
+						/* @__PURE__ */ jsx("text", {
+							x: xOf(v),
+							y: 166,
+							textAnchor: "middle",
+							fontSize: 11,
+							fill: "var(--stage-fg)",
+							fontWeight: 600,
+							children: outcomes[i]?.label ?? v
+						})
+					] }, i);
+				}),
+				/* @__PURE__ */ jsx("line", {
+					x1: ML,
+					y1: AXIS,
+					x2: W - MR,
+					y2: AXIS,
+					stroke: "var(--stage-fg)",
+					strokeWidth: 2.5
+				}),
+				vals.map((v, i) => /* @__PURE__ */ jsx("text", {
+					x: xOf(v),
+					y: 152,
+					textAnchor: "middle",
+					fontSize: 10,
+					fill: "var(--stage-muted)",
+					style: { fontVariantNumeric: "tabular-nums" },
+					children: v
+				}, i)),
+				cost != null && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("line", {
+					x1: xOf(cost),
+					y1: AXIS - 70,
+					x2: xOf(cost),
+					y2: AXIS,
+					stroke: "var(--stage-danger, #e03131)",
+					strokeWidth: 1.5,
+					strokeDasharray: "3 3"
+				}), /* @__PURE__ */ jsxs("text", {
+					x: xOf(cost),
+					y: AXIS - 74,
+					textAnchor: "middle",
+					fontSize: 10,
+					fontWeight: 700,
+					fill: "var(--stage-danger, #e03131)",
+					children: ["cost ", cost]
+				})] }),
+				/* @__PURE__ */ jsxs("g", {
+					style: { transition: "transform .15s" },
+					children: [/* @__PURE__ */ jsx("path", {
+						d: `M${xOf(ev)},139 l-10,17 h20 Z`,
+						fill: "var(--stage-good)"
+					}), /* @__PURE__ */ jsxs("text", {
+						x: xOf(ev),
+						y: 170,
+						textAnchor: "middle",
+						fontSize: 11,
+						fontWeight: 800,
+						fill: "var(--stage-good)",
+						children: ["E[X]=", ev.toFixed(2)]
+					})]
+				}),
+				avg != null && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("circle", {
+					cx: xOf(avg),
+					cy: AXIS - 6,
+					r: 5,
+					fill: "var(--stage-accent)"
+				}), /* @__PURE__ */ jsxs("text", {
+					x: xOf(avg),
+					y: AXIS - 12,
+					textAnchor: "middle",
+					fontSize: 9,
+					fill: "var(--stage-accent)",
+					fontWeight: 700,
+					children: ["avg ", avg.toFixed(2)]
+				})] })
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		aside: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs(Callout, {
+				tone: "result",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: 12,
+							color: "var(--stage-muted)",
+							fontWeight: 600
+						},
+						children: "expected value"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "lab-callout-big",
+						children: ev.toFixed(2)
+					}),
+					cost != null && /* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: 12,
+							fontWeight: 700,
+							color: ev >= cost ? "var(--stage-good)" : "var(--stage-danger, #e03131)"
+						},
+						children: ev >= cost ? "fair / favours you" : `house edge ${(cost - ev).toFixed(2)}/play`
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					fontSize: 13,
+					display: "grid",
+					gap: 2
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						style: { color: "var(--stage-muted)" },
+						children: /* @__PURE__ */ jsx(Tex$1, { tex: "E[X] = \\sum \\text{value} \\cdot \\text{prob}" })
+					}),
+					/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Tex$1, { tex: "= " + vals.map((v, i) => `${v} \\cdot ${(pn[i] * 100).toFixed(0)}\\%`).join(" + ") }) }),
+					/* @__PURE__ */ jsxs("span", { children: ["= ", /* @__PURE__ */ jsx("b", {
+						style: { color: "var(--stage-good)" },
+						children: ev.toFixed(2)
+					})] })
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: "lab-prompt",
+				style: { fontSize: 13 },
+				children: "Play it for real — the average payout homes in on E[X]."
+			}), /* @__PURE__ */ jsxs(ControlBar, { children: [
+				/* @__PURE__ */ jsx(Chip, {
+					selected: false,
+					onClick: () => spin(1),
+					children: "spin 1"
+				}),
+				/* @__PURE__ */ jsx(Chip, {
+					selected: false,
+					onClick: () => spin(50),
+					children: "spin 50"
+				}),
+				/* @__PURE__ */ jsx(Chip, {
+					selected: false,
+					onClick: () => {
+						setPlays(0);
+						setTotal(0);
+						rng.current = mulberry32(99);
+					},
+					children: "clear"
+				}),
+				plays > 0 && /* @__PURE__ */ jsxs("span", {
+					style: {
+						fontSize: 12,
+						fontWeight: 700
+					},
+					children: [
+						plays,
+						" plays · avg ",
+						avg.toFixed(2)
+					]
+				})
+			] })] })
+		] }),
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			outcomes.map((o, i) => /* @__PURE__ */ jsx(Field, {
+				label: `${o.label ?? `out ${i}`} prob`,
+				value: `${(pn[i] * 100).toFixed(0)}%`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: probs[i] ?? 0,
+					min: 0,
+					max: 1,
+					step: .05,
+					onChange: (v) => setProbs((a) => a.map((x, j) => j === i ? v : x)),
+					ariaLabel: `prob ${o.label ?? i}`
+				})
+			}, i)),
+			/* @__PURE__ */ jsx(Field, {
+				label: "value (last)",
+				children: /* @__PURE__ */ jsx(Stepper, {
+					value: vals[vals.length - 1] ?? 0,
+					onChange: (v) => setVals((a) => a.map((x, j) => j === a.length - 1 ? v : x)),
+					min: 0,
+					max: 100
+				})
+			}),
+			/* @__PURE__ */ jsx(Chip, {
+				selected: false,
+				onClick: reset,
+				children: "reset"
+			})
+		] }),
+		footer: /* @__PURE__ */ jsx(HintLadder, { hints }),
+		children: figure
+	});
+}
+
+//#endregion
+export { ExpectedValueLab };

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

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+
+//#region src/discrete/hypergeometric/preset.d.ts
+interface HypergeometricProps {
+  N?: number;
+  K?: number;
+  n?: number;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+  hints?: string[];
+  controlId?: string;
+}
+declare function HypergeometricLab({
+  N: N0,
+  K: K0,
+  n: n0,
+  title,
+  prompt,
+  objectives,
+  hints: hintList,
+  controlId
+}: HypergeometricProps): ReactNode;
+//#endregion
+export { HypergeometricLab, HypergeometricProps };

package/dist/discrete/hypergeometric/preset.mjs

@@ -0,0 +1,330 @@
+'use client';
+
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { 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/hypergeometric/preset.tsx
+/**
+* HypergeometricLab — does it matter whether you put the ball back? Same urn (K
+* winners in N), draw n, and compare the two distributions of "how many winners":
+*   • WITH replacement  → binomial   C(n,k) pᵏ(1−p)ⁿ⁻ᵏ,  p = K/N  (draws independent)
+*   • WITHOUT            → hypergeometric  C(K,k)·C(N−K,n−k) / C(N,n)
+* Drawn as paired bars. The lesson lives in the difference: without replacement is
+* NARROWER (each draw shifts the odds — a finite-population correction (N−n)/(N−1)),
+* but as the population N grows huge the two distributions merge (taking one ball
+* barely changes the mix). Both share the same mean n·K/N.
+*
+* Card hands & quality-control are hypergeometric; coin/dice repeats are binomial.
+*/
+const W = 540, H = 300, ML = 30, MR = 14, MT = 16, MB = 34;
+const PW = W - ML - MR, PH = H - MT - MB;
+const BIN = "var(--stage-accent)", HYP = "var(--stage-warn)";
+const f3 = (x) => x < 5e-4 && x > 0 ? x.toExponential(1) : x.toFixed(3);
+function HypergeometricLab({ N: N0 = 10, K: K0 = 4, n: n0 = 3, title = "With vs without replacement", prompt, objectives, hints: hintList, controlId }) {
+	const [N, setN] = useState(N0);
+	const [K, setK] = useState(K0);
+	const [n, setN_] = useState(n0);
+	const [sel, setSel] = useState(null);
+	const hints = useHints(hintList);
+	const Kc = Math.min(K, N), nc = Math.min(n, N);
+	const p = Kc / N;
+	const bin = useMemo(() => Array.from({ length: nc + 1 }, (_, k) => nCr(nc, k) * p ** k * (1 - p) ** (nc - k)), [nc, p]);
+	const hyp = useMemo(() => Array.from({ length: nc + 1 }, (_, k) => k <= Kc && nc - k <= N - Kc ? nCr(Kc, k) * nCr(N - Kc, nc - k) / nCr(N, nc) : 0), [
+		N,
+		Kc,
+		nc
+	]);
+	const mean = nc * p;
+	const varBin = nc * p * (1 - p), varHyp = varBin * (N - nc) / (N - 1 || 1);
+	const yMax = Math.max(...bin, ...hyp) * 1.1 || 1;
+	const colW = PW / (nc + 1);
+	const xOf = (k) => ML + (k + .5) * colW;
+	const yOf = (v) => 266 - v / yMax * PH;
+	const bw = Math.min(20, colW * .36);
+	useControlSurface(controlId, {
+		N: {
+			type: "number",
+			label: "population N",
+			min: 2,
+			max: 60,
+			step: 1,
+			get: () => N,
+			set: (v) => setN(Math.round(v))
+		},
+		K: {
+			type: "number",
+			label: "winners K",
+			min: 0,
+			max: N,
+			step: 1,
+			get: () => K,
+			set: (v) => setK(Math.round(v))
+		},
+		n: {
+			type: "number",
+			label: "draw n",
+			min: 1,
+			max: N,
+			step: 1,
+			get: () => n,
+			set: (v) => setN_(Math.round(v))
+		},
+		inspect: {
+			type: "number",
+			label: "inspect k",
+			min: -1,
+			max: nc,
+			step: 1,
+			get: () => sel ?? -1,
+			set: (v) => setSel(v < 0 ? null : Math.round(v))
+		}
+	});
+	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 ${W} ${H}`,
+			style: {
+				width: "100%",
+				maxWidth: W,
+				height: "auto",
+				display: "block"
+			},
+			role: "img",
+			"aria-label": `binomial vs hypergeometric, N${N} K${Kc} n${nc}`,
+			children: [
+				bin.map((_, k) => /* @__PURE__ */ jsxs("g", {
+					onClick: () => setSel(sel === k ? null : k),
+					style: { cursor: "pointer" },
+					children: [
+						/* @__PURE__ */ jsx("rect", {
+							x: xOf(k) - colW / 2,
+							y: MT,
+							width: colW,
+							height: PH,
+							fill: sel === k ? "color-mix(in oklab, var(--stage-fg) 6%, transparent)" : "transparent"
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x: xOf(k) - bw - 1,
+							y: yOf(bin[k]),
+							width: bw,
+							height: Math.max(0, 266 - yOf(bin[k])),
+							rx: 2,
+							fill: BIN,
+							opacity: .85
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x: xOf(k) + 1,
+							y: yOf(hyp[k]),
+							width: bw,
+							height: Math.max(0, 266 - yOf(hyp[k])),
+							rx: 2,
+							fill: HYP,
+							opacity: .9
+						})
+					]
+				}, k)),
+				/* @__PURE__ */ jsx("line", {
+					x1: ML,
+					y1: 266,
+					x2: W - MR,
+					y2: 266,
+					stroke: "var(--stage-fg)",
+					strokeWidth: 1.5
+				}),
+				bin.map((_, k) => /* @__PURE__ */ jsx("text", {
+					x: xOf(k),
+					y: 280,
+					textAnchor: "middle",
+					fontSize: 10,
+					fill: "var(--stage-muted)",
+					children: k
+				}, k)),
+				/* @__PURE__ */ jsx("line", {
+					x1: xOf(mean),
+					y1: MT,
+					x2: xOf(mean),
+					y2: 266,
+					stroke: "var(--stage-good)",
+					strokeWidth: 1.5,
+					strokeDasharray: "4 3"
+				}),
+				/* @__PURE__ */ jsxs("text", {
+					x: xOf(mean),
+					y: 25,
+					textAnchor: "middle",
+					fontSize: 10,
+					fontWeight: 700,
+					fill: "var(--stage-good)",
+					children: ["μ=", mean.toFixed(1)]
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: W - 150,
+					y: 18,
+					width: 10,
+					height: 10,
+					fill: BIN
+				}),
+				/* @__PURE__ */ jsx("text", {
+					x: W - 136,
+					y: 27,
+					fontSize: 10,
+					fill: "var(--stage-fg)",
+					children: "with (binomial)"
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: W - 150,
+					y: 32,
+					width: 10,
+					height: 10,
+					fill: HYP
+				}),
+				/* @__PURE__ */ jsx("text", {
+					x: W - 136,
+					y: 41,
+					fontSize: 10,
+					fill: "var(--stage-fg)",
+					children: "without (hyper)"
+				})
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		aside: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Callout, {
+			tone: "result",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: 12,
+						color: "var(--stage-muted)",
+						fontWeight: 600
+					},
+					children: "spread (variance)"
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					style: {
+						fontSize: 15,
+						fontWeight: 800
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							style: { color: BIN },
+							children: varBin.toFixed(2)
+						}),
+						" vs ",
+						/* @__PURE__ */ jsx("span", {
+							style: { color: HYP },
+							children: varHyp.toFixed(2)
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					style: {
+						fontSize: 12,
+						color: "var(--stage-muted)"
+					},
+					children: ["same ", /* @__PURE__ */ jsx(Tex$1, { tex: `\\mu = n \\cdot K / N = ${mean.toFixed(2)}` })]
+				})
+			]
+		}), sel != null ? /* @__PURE__ */ jsxs("div", {
+			style: {
+				fontSize: 13,
+				padding: "8px 10px",
+				borderRadius: 9,
+				background: "color-mix(in oklab, var(--stage-fg) 5%, transparent)",
+				display: "grid",
+				gap: 4
+			},
+			children: [
+				/* @__PURE__ */ jsxs("b", { children: [
+					"P(exactly ",
+					sel,
+					" winners)"
+				] }),
+				/* @__PURE__ */ jsxs("span", {
+					style: { color: BIN },
+					children: ["with: ", /* @__PURE__ */ jsx(Tex$1, { tex: `C(${nc},${sel}) \\cdot ${p.toFixed(2)}^{${sel}} \\cdot ${(1 - p).toFixed(2)}^{${nc - sel}} = ${f3(bin[sel])}` })]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					style: { color: HYP },
+					children: ["without: ", /* @__PURE__ */ jsx(Tex$1, { tex: `C(${Kc},${sel}) \\cdot C(${N - Kc},${nc - sel}) / C(${N},${nc}) = ${f3(hyp[sel])}` })]
+				})
+			]
+		}) : /* @__PURE__ */ jsx("p", {
+			className: "lab-prompt",
+			style: { fontSize: 13 },
+			children: "Click a bar to compare the two probabilities. The blue (with replacement) is always a touch wider than the orange (without)."
+		})] }),
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx(Field, {
+				label: "population N",
+				value: N,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: N,
+					min: 2,
+					max: 60,
+					step: 1,
+					onChange: (v) => {
+						setN(v);
+						if (K > v) setK(v);
+						if (n > v) setN_(v);
+					},
+					ariaLabel: "population"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "winners K",
+				value: Kc,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: Kc,
+					min: 0,
+					max: N,
+					step: 1,
+					onChange: setK,
+					ariaLabel: "winners"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "draw n",
+				value: nc,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: nc,
+					min: 1,
+					max: N,
+					step: 1,
+					onChange: setN_,
+					ariaLabel: "draw size"
+				})
+			})
+		] }),
+		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("p", {
+			className: "lab-prompt",
+			style: {
+				fontSize: 12.5,
+				color: "var(--stage-muted)"
+			},
+			children: [
+				"Without replacement is narrower by the factor (N−n)/(N−1) = ",
+				((N - nc) / (N - 1 || 1)).toFixed(2),
+				". Push N up (with K/N fixed) and the bars converge — for a huge population, taking one out barely changes the odds."
+			]
+		}), /* @__PURE__ */ jsx(HintLadder, { hints })] }),
+		children: figure
+	});
+}
+
+//#endregion
+export { HypergeometricLab };