@classytic/labs 0.2.0 → 0.3.0

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

@@ -1,12 +1,14 @@
 'use client';
 
 import { mulberry32, randInt } from "../../core/rng.mjs";
-import { Callout, ControlBar, LabFrame } from "../../kit/frame.mjs";
-import { HintLadder, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
+import { ActionButton, IconButton } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { ChallengeCard, HintLadder, useChallenge, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
 import { CarGlyph, DoorGlyph, GoatGlyph } from "../../kit/gameshow.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useControlSurface, useFrameLoop, useInView } from "@classytic/stage";
+import { RotateCcw } from "lucide-react";
 
 //#region src/discrete/monty-hall/preset.tsx
 /**
@@ -22,11 +24,32 @@ import { useControlSurface, useFrameLoop, useInView } from "@classytic/stage";
 * bars are HTML around the SVG so nothing overlaps. Generalises to N doors (Monty
 * opens all goats but one, so switching wins (N−1)/N).
 */
+const MONTY_CHALLENGE = [{
+	id: "best-strategy",
+	prompt: "With three doors, which strategy wins more often in the long run?",
+	choices: [
+		{
+			value: "switch",
+			label: "switch doors"
+		},
+		{
+			value: "stay",
+			label: "stay with the first pick"
+		},
+		{
+			value: "equal",
+			label: "both are equally likely"
+		}
+	],
+	answer: "switch",
+	explain: "The first pick is wrong two-thirds of the time. Monty’s reveal concentrates that two-thirds chance on the one remaining door."
+}];
 const DW = 116, DH = 188, GAP = 26, PAD = 16;
 function MontyHallLab({ doors = 3, seed = 7, title = "The Monty Hall game", prompt, objectives, hints: hintList, controlId }) {
 	const n = Math.max(3, Math.min(6, doors));
 	const rng = useRef(mulberry32(seed));
 	const hints = useHints(hintList);
+	const challenge = useChallenge(MONTY_CHALLENGE);
 	const timers = useRef([]);
 	const [mounted, setMounted] = useState(false);
 	const { ref: viewRef, inView } = useInView();
@@ -122,7 +145,12 @@ function MontyHallLab({ doors = 3, seed = 7, title = "The Monty Hall game", prom
 		});
 		rng.current = mulberry32(seed);
 		newGame();
-	}, [seed, newGame]);
+		challenge.reset();
+	}, [
+		seed,
+		newGame,
+		challenge
+	]);
 	useFrameLoop(() => {
 		if (autoLeft.current <= 0) {
 			if (autoRunning) setAutoRunning(false);
@@ -146,7 +174,7 @@ function MontyHallLab({ doors = 3, seed = 7, title = "The Monty Hall game", prom
 	}, { running: autoRunning && mounted && inView });
 	const won = finalPick != null && finalPick === car;
 	useCheckpoint({
-		solved: tally.switchGames >= 1 && tally.stayGames >= 1,
+		solved: challenge.allCorrect && tally.switchGames >= 100 && tally.stayGames >= 100,
 		activity: `monty-hall:${title}`,
 		hintsUsed: hints.count
 	});
@@ -200,20 +228,20 @@ 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 ",
+			"; the others hide ",
 			/* @__PURE__ */ jsx("b", { children: "goats" }),
 			"."
 		] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			"You chose ",
 			/* @__PURE__ */ jsxs("b", { children: ["Door ", pick + 1] }),
-			". Monty is opening a goat…"
+			". Monty is opening a goat door…"
 		] });
 		if (phase === "revealed") return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			"Monty opened ",
 			opened.map((d) => `Door ${d + 1}`).join(", "),
-			", a goat! 🐐 Now: ",
+			", revealing a goat. Now ",
 			/* @__PURE__ */ jsx("b", { children: "stay" }),
 			" with Door ",
 			pick + 1,
@@ -221,81 +249,59 @@ function MontyHallLab({ doors = 3, seed = 7, title = "The Monty Hall game", prom
 			/* @__PURE__ */ jsx("b", { children: "switch" }),
 			" to Door ",
 			switchTo + 1,
-			"?"
+			"."
 		] });
 		return won ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx("b", {
-				style: { color: "var(--stage-good)" },
-				children: "🎉 You win the car!"
+				className: "discrete-success",
+				children: "You win the car."
 			}),
-			" You ",
+			" You",
+			" ",
 			strategy === "switch" ? "switched" : "stayed",
 			"."
 		] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx("b", {
-				style: { color: "var(--stage-bad)" },
-				children: "🐐 A goat."
+				className: "discrete-loss",
+				children: "You found a goat."
 			}),
 			" You ",
 			strategy === "switch" ? "switched" : "stayed",
-			", the car was behind Door ",
+			"; the car was behind Door ",
 			car + 1,
 			"."
 		] });
 	};
-	const btn = {
-		padding: "9px 18px",
-		borderRadius: 999,
-		border: "1.5px solid var(--stage-grid)",
-		background: "var(--stage-bg)",
-		color: "var(--stage-fg)",
-		fontWeight: 700,
-		fontSize: 14,
-		cursor: "pointer"
-	};
-	const btnHot = {
-		...btn,
-		borderColor: "var(--stage-good)",
-		background: "color-mix(in oklab, var(--stage-good) 16%, transparent)"
+	const activateDoor = (event, index) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			pickDoor(index);
+		}
 	};
 	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		style: {
-			minHeight: 24,
-			fontSize: 15,
-			fontWeight: 500,
-			margin: "4px 0 8px",
-			textAlign: "center"
-		},
+		className: "monty-narration",
 		"aria-live": "polite",
 		children: narration()
 	}), /* @__PURE__ */ jsx("div", {
 		ref: viewRef,
-		className: "lab-playwrap",
-		style: {
-			borderRadius: 16,
-			background: "color-mix(in oklab, var(--stage-accent) 6%, var(--stage-bg))",
-			border: "1px solid var(--stage-grid)",
-			padding: 8
-		},
+		className: "lab-playwrap monty-stage",
 		children: /* @__PURE__ */ jsx("svg", {
+			className: "monty-door-svg",
 			viewBox: `0 0 ${W} ${H}`,
-			style: {
-				width: "100%",
-				maxWidth: W,
-				height: "auto",
-				display: "block",
-				margin: "0 auto"
-			},
 			role: "img",
 			"aria-label": `${n} doors; ${phase}`,
 			children: Array.from({ length: n }, (_, i) => {
 				const isOpen = revealAll || opened.includes(i) || finalPick === i ? 1 : 0;
 				const cb = contentBox(i);
 				return /* @__PURE__ */ jsx("g", {
+					className: "monty-door-target",
+					"data-interactive": phase === "pick" && !autoRunning,
 					onClick: () => pickDoor(i),
-					style: { cursor: phase === "pick" && !autoRunning ? "pointer" : "default" },
+					onKeyDown: (event) => activateDoor(event, i),
+					tabIndex: phase === "pick" && !autoRunning ? 0 : -1,
 					role: "button",
 					"aria-label": `door ${i + 1}`,
+					"aria-disabled": phase !== "pick" || autoRunning,
 					children: /* @__PURE__ */ jsx(DoorGlyph, {
 						x: doorX(i),
 						y: PAD,
@@ -311,179 +317,153 @@ function MontyHallLab({ doors = 3, seed = 7, title = "The Monty Hall game", prom
 			})
 		})
 	})] });
-	const controls = /* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsxs("div", {
-		style: {
-			display: "flex",
-			gap: 10,
-			justifyContent: "center",
-			flexWrap: "wrap"
-		},
-		children: [
-			phase === "revealed" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
-				style: btn,
-				onClick: () => decide("stay"),
-				children: [
-					"🛑 Stay (Door ",
-					pick + 1,
-					")"
-				]
-			}), /* @__PURE__ */ jsxs("button", {
-				style: btnHot,
-				onClick: () => decide("switch"),
-				children: [
-					"🔄 Switch (Door ",
-					switchTo + 1,
-					")"
-				]
-			})] }),
-			phase === "result" && /* @__PURE__ */ jsx("button", {
-				style: btnHot,
-				onClick: newGame,
-				children: "▶ Play again"
-			}),
-			phase === "pick" && pick == null && /* @__PURE__ */ jsx("span", {
+	const controls = /* @__PURE__ */ jsx("div", {
+		className: "lab-activity-fields",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "monty-auto-row",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "monty-auto-label",
+					children: "Let the robot test the odds:"
+				}),
+				/* @__PURE__ */ jsx(ActionButton, {
+					disabled: autoRunning,
+					onClick: () => startAuto(100),
+					children: "Run 100"
+				}),
+				/* @__PURE__ */ jsx(ActionButton, {
+					disabled: autoRunning,
+					onClick: () => startAuto(1e3),
+					children: "Run 1,000"
+				}),
+				autoRunning && /* @__PURE__ */ jsx("span", {
+					className: "discrete-success",
+					role: "status",
+					children: "playing…"
+				})
+			]
+		})
+	});
+	const evidence = /* @__PURE__ */ jsxs("div", {
+		className: "monty-evidence",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "monty-tally",
+			children: [[
+				"switch",
+				swRate,
+				swTarget,
+				tally.switchWins,
+				tally.switchGames
+			], [
+				"stay",
+				stRate,
+				stTarget,
+				tally.stayWins,
+				tally.stayGames
+			]].map(([name, rate, target, wins, games]) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+				className: "monty-tally-heading",
+				children: [/* @__PURE__ */ jsxs("span", {
+					"data-strategy": name,
+					children: [name, " wins"]
+				}), /* @__PURE__ */ jsxs("span", { children: [
+					games ? `${(rate * 100).toFixed(1)}%` : "-",
+					" · ",
+					wins,
+					"/",
+					games,
+					" ",
+					/* @__PURE__ */ jsxs("span", {
+						className: "monty-target-copy",
+						children: [
+							"(→ ",
+							(target * 100).toFixed(0),
+							"%)"
+						]
+					})
+				] })]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "monty-rate-track",
+				"data-strategy": name,
 				style: {
-					fontSize: 13,
-					color: "var(--stage-muted)"
+					"--rate": `${rate * 100}%`,
+					"--target": `${target * 100}%`
 				},
-				children: "↑ tap a door to start"
-			})
-		]
-	}), /* @__PURE__ */ jsxs("div", {
-		style: {
-			display: "flex",
-			gap: 10,
-			alignItems: "center",
-			flexWrap: "wrap"
-		},
+				children: [/* @__PURE__ */ jsx("div", { className: "monty-rate-fill" }), /* @__PURE__ */ jsx("div", {
+					className: "monty-rate-target",
+					title: `target ${(target * 100).toFixed(0)}%`
+				})]
+			})] }, name))
+		}), controls]
+	});
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "discrete-monty-activity",
 		children: [
-			/* @__PURE__ */ jsx("span", {
-				style: {
-					fontSize: 13,
-					fontWeight: 600,
-					color: "var(--stage-muted)"
-				},
-				children: "Too slow? Let the robot play:"
-			}),
-			/* @__PURE__ */ jsx("button", {
-				style: btn,
-				disabled: autoRunning,
-				onClick: () => startAuto(100),
-				children: "⚡ 100 games"
-			}),
-			/* @__PURE__ */ jsx("button", {
-				style: btn,
-				disabled: autoRunning,
-				onClick: () => startAuto(1e3),
-				children: "⚡ 1000 games"
-			}),
-			/* @__PURE__ */ jsx("button", {
-				style: btn,
-				onClick: resetAll,
-				children: "↺ reset"
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Conditional probability",
+				title,
+				description: prompt ?? `Pick one of ${n} doors, observe the host's informed reveal, then compare staying with switching.`
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: autoRunning ? "simulating" : phase }),
+				/* @__PURE__ */ jsxs("span", { children: [n, " doors"] }),
+				/* @__PURE__ */ jsxs("span", { children: [tally.switchGames + tally.stayGames, " trials compared"] })
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Monty Hall doors and current round",
+				children: figure
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: "Strategy evidence and simulation controls",
+				children: evidence
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: phase === "result" ? won ? `This ${strategy} decision won, but one round is not enough evidence. Compare many trials.` : `This ${strategy} decision lost; aggregate trials reveal the long-run advantage.` : tally.switchGames >= 100 ? `Switching is approaching ${((n - 1) / n * 100).toFixed(0)}% because the host concentrates the chance that your first pick was wrong.` : "The host never opens the car and never opens your chosen door, so the reveal carries information." })] }),
+			/* @__PURE__ */ jsxs("section", {
+				className: "lab-authored-task",
+				"aria-label": "Predict and explain the Monty Hall strategy",
+				children: [/* @__PURE__ */ jsx(ChallengeCard, {
+					questions: MONTY_CHALLENGE,
+					state: challenge,
+					title: "Predict, then test"
+				}), /* @__PURE__ */ jsx(HintLadder, { hints })]
 			}),
-			autoRunning && /* @__PURE__ */ jsx("span", {
-				style: {
-					fontSize: 13,
-					color: "var(--stage-good)"
-				},
-				children: "playing…"
-			})
+			/* @__PURE__ */ jsxs(Activity.LiveRegion, { children: [
+				"Switch wins ",
+				tally.switchWins,
+				" of ",
+				tally.switchGames,
+				"; stay wins ",
+				tally.stayWins,
+				" of ",
+				tally.stayGames,
+				"."
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Transport, { children: [
+				/* @__PURE__ */ jsx(IconButton, {
+					label: "Reset Monty Hall results",
+					onClick: resetAll,
+					children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "lab-transport-state",
+					"aria-live": "polite",
+					children: [/* @__PURE__ */ jsx("strong", { children: autoRunning ? "Robot testing strategies" : phase === "pick" ? "Choose a door" : phase === "revealed" ? "Stay or switch" : won ? "Car won" : "Goat revealed" }), /* @__PURE__ */ jsxs("span", { children: [tally.switchGames + tally.stayGames, " recorded trials"] })]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "monty-action-row",
+					children: [phase === "revealed" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ActionButton, {
+						onClick: () => decide("stay"),
+						children: "Stay"
+					}), /* @__PURE__ */ jsx(ActionButton, {
+						className: "lab-primary-action",
+						onClick: () => decide("switch"),
+						children: "Switch"
+					})] }) : null, phase === "result" ? /* @__PURE__ */ jsx(ActionButton, {
+						className: "lab-primary-action",
+						onClick: newGame,
+						children: "Play again"
+					}) : null]
+				})
+			] })
 		]
-	})] });
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		objectives,
-		aside: /* @__PURE__ */ jsx(Callout, {
-			tone: "result",
-			children: /* @__PURE__ */ jsx("div", {
-				style: {
-					display: "grid",
-					gap: 10
-				},
-				children: [[
-					"switch",
-					swRate,
-					swTarget,
-					tally.switchWins,
-					tally.switchGames,
-					"var(--stage-good)"
-				], [
-					"stay",
-					stRate,
-					stTarget,
-					tally.stayWins,
-					tally.stayGames,
-					"var(--stage-muted)"
-				]].map(([name, rate, target, wins, games, color]) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "flex",
-						justifyContent: "space-between",
-						fontSize: 13,
-						fontWeight: 700,
-						marginBottom: 3
-					},
-					children: [/* @__PURE__ */ jsxs("span", {
-						style: {
-							color,
-							textTransform: "capitalize"
-						},
-						children: [name, " wins"]
-					}), /* @__PURE__ */ jsxs("span", {
-						style: {
-							fontVariantNumeric: "tabular-nums",
-							color: "var(--stage-muted)"
-						},
-						children: [
-							games ? `${(rate * 100).toFixed(1)}%` : ", ",
-							" · ",
-							wins,
-							"/",
-							games,
-							" ",
-							/* @__PURE__ */ jsxs("span", {
-								style: { opacity: .7 },
-								children: [
-									"(→ ",
-									(target * 100).toFixed(0),
-									"%)"
-								]
-							})
-						]
-					})]
-				}), /* @__PURE__ */ jsxs("div", {
-					style: {
-						position: "relative",
-						height: 16,
-						borderRadius: 8,
-						background: "color-mix(in oklab, var(--stage-grid) 60%, transparent)",
-						overflow: "hidden"
-					},
-					children: [/* @__PURE__ */ jsx("div", { style: {
-						width: `${rate * 100}%`,
-						height: "100%",
-						background: color,
-						borderRadius: 8,
-						transition: "width .12s linear"
-					} }), /* @__PURE__ */ jsx("div", {
-						style: {
-							position: "absolute",
-							top: -2,
-							bottom: -2,
-							left: `${target * 100}%`,
-							width: 2,
-							background: "var(--stage-fg)",
-							opacity: .5
-						},
-						title: `target ${(target * 100).toFixed(0)}%`
-					})]
-				})] }, name))
-			})
-		}),
-		controls,
-		footer: /* @__PURE__ */ jsx(HintLadder, { hints }),
-		children: figure
 	});
 }