@classytic/labs 0.2.0 → 0.3.0

package/dist/discrete/arrangements/preset.mjs

@@ -1,14 +1,17 @@
 'use client';
 
 import { Tex as Tex$1 } from "../../core/tex.mjs";
-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 { IconButton, Stepper } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { Field, Readout } from "../../kit/frame.mjs";
+import { ChallengeCard, HintLadder, RevealSolution, useChallenge, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
+import { AuthoredResponse } from "../../kit/authored-response.mjs";
 import { factorial, multinomial } 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";
+import { RotateCcw } from "lucide-react";
 
 //#region src/discrete/arrangements/preset.tsx
 /**
@@ -39,10 +42,31 @@ function fromWord(w) {
 function ArrangementsLab({ word, items, title = "Arrange with repeats", prompt, objectives, hints: hintList, controlId }) {
 	const base = useMemo(() => items ?? (word ? fromWord(word) : fromWord("MISSISSIPPI")), [items, word]);
 	const [counts, setCounts] = useState(base.map((g) => g.count));
-	const [guess, setGuess] = useState(0);
+	const [guess, setGuess] = useState(null);
 	const [checked, setChecked] = useState(false);
 	const [peeked, setPeeked] = useState(false);
 	const hints = useHints(hintList);
+	const transferQuestions = useMemo(() => [{
+		id: "identical-overcount",
+		prompt: "Why do repeated-item arrangements divide by each repeated group’s factorial?",
+		choices: [
+			{
+				value: "same",
+				label: "swapping identical copies does not create a new arrangement"
+			},
+			{
+				value: "smaller",
+				label: "identical items are physically smaller"
+			},
+			{
+				value: "alphabetical",
+				label: "the items must stay in alphabetical order"
+			}
+		],
+		answer: "same",
+		explain: "The all-distinct count labels copies that are actually indistinguishable, so each visible row was counted once per internal swap."
+	}], []);
+	const challenge = useChallenge(transferQuestions);
 	const live = base.map((g, i) => ({
 		...g,
 		count: counts[i],
@@ -56,15 +80,17 @@ function ArrangementsLab({ word, items, title = "Arrange with repeats", prompt,
 	const swapGroup = repeats.slice().sort((a, b) => b.count - a.count)[0];
 	const setI = (i, v) => {
 		setChecked(false);
+		setGuess(null);
 		setCounts((c) => c.map((x, j) => j === i ? Math.max(0, Math.min(8, v)) : x));
 	};
 	const reset = () => {
 		setChecked(false);
 		setPeeked(false);
-		setGuess(0);
+		setGuess(null);
 		setCounts(base.map((g) => g.count));
+		challenge.reset();
 	};
-	const solved = checked && guess === total && !peeked;
+	const solved = checked && guess === total && !peeked && challenge.allCorrect;
 	useCheckpoint({
 		solved,
 		activity: `arrangements:${title}`,
@@ -96,51 +122,36 @@ function ArrangementsLab({ word, items, title = "Arrange with repeats", prompt,
 		}
 	});
 	const figure = /* @__PURE__ */ jsxs("div", {
-		style: {
-			display: "grid",
-			gap: 16
-		},
+		className: "discrete-counting-scene",
 		children: [
 			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("p", {
 				className: "lab-field-label",
 				children: [n, " items in a row, identical ones share a colour"]
 			}), /* @__PURE__ */ jsx("div", {
-				style: {
-					display: "flex",
-					gap: 4,
-					flexWrap: "wrap"
-				},
+				className: "discrete-token-row arrangement-token-row",
+				"aria-label": "Current repeated arrangement",
 				children: tiles.map((g, i) => {
 					const isSwap = swapGroup && g.label === swapGroup.label;
 					const swapIdx = isSwap ? tiles.filter((t, j) => j < i && t.label === g.label).length : -1;
-					const flag = isSwap && swapIdx < 2;
 					return /* @__PURE__ */ jsx("span", {
-						style: {
-							display: "inline-flex",
-							alignItems: "center",
-							justifyContent: "center",
-							width: 30,
-							height: 30,
-							borderRadius: 8,
-							fontWeight: 800,
-							fontSize: 15,
-							color: "white",
-							background: g.color,
-							boxShadow: flag ? "0 0 0 2px var(--stage-fg)" : "none"
-						},
+						className: "arrangement-tile",
+						"data-ringed": isSwap && swapIdx < 2,
+						style: { "--arrangement-color": g.color },
 						children: g.label
 					}, i);
 				})
 			})] }),
 			swapGroup && /* @__PURE__ */ jsxs("p", {
 				className: "lab-prompt",
+				style: { "--arrangement-color": swapGroup.color },
 				children: [
 					"Swap the two ringed ",
 					/* @__PURE__ */ jsx("b", {
-						style: { color: swapGroup.color },
+						className: "arrangement-emphasis",
 						children: swapGroup.label
 					}),
-					"'s ⇄, it's the ",
+					"'s ⇄, it's the",
+					" ",
 					/* @__PURE__ */ jsx("b", { children: "same row" }),
 					". So every arrangement is counted ",
 					swapGroup.count,
@@ -152,39 +163,30 @@ function ArrangementsLab({ word, items, title = "Arrange with repeats", prompt,
 				]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				style: {
-					padding: "10px 12px",
-					borderRadius: 10,
-					border: "1px dashed var(--stage-grid)",
-					fontSize: 15,
-					fontVariantNumeric: "tabular-nums",
-					display: "grid",
-					gap: 4
-				},
+				className: "discrete-formula-panel arrangement-formula",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						style: {
-							fontSize: 11,
-							fontWeight: 700,
-							color: "var(--stage-muted)"
-						},
-						children: "📐 WHY THE FORMULA"
+						className: "discrete-formula-label",
+						children: "Why the division is necessary"
 					}),
 					/* @__PURE__ */ jsxs("span", { children: [
 						"if all ",
 						n,
 						" were different: ",
 						/* @__PURE__ */ jsxs("b", { children: [n, "!"] }),
-						" = ",
-						nFact.toLocaleString(),
-						" orders"
+						checked ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							" = ",
+							nFact.toLocaleString(),
+							" orders"
+						] }) : /* @__PURE__ */ jsx(Fragment$1, { children: " possible labelled orders" })
 					] }),
 					repeats.length > 0 && /* @__PURE__ */ jsxs("span", { children: [
-						"but identical copies repeat: ",
+						"but identical copies repeat:",
+						" ",
 						/* @__PURE__ */ jsx(Tex$1, { tex: `\\div\\ ${repeats.map((g) => `${g.count}!`).join(" \\cdot ")}` }),
 						" ",
 						/* @__PURE__ */ jsxs("span", {
-							style: { color: "var(--stage-muted)" },
+							className: "discrete-muted",
 							children: [
 								"(",
 								repeats.map((g) => `the ${g.count} ${g.label}'s`).join(", "),
@@ -193,74 +195,39 @@ function ArrangementsLab({ word, items, title = "Arrange with repeats", prompt,
 						})
 					] }),
 					/* @__PURE__ */ jsxs("span", {
-						style: { fontWeight: 800 },
+						className: "discrete-running-product",
 						children: [
-							/* @__PURE__ */ jsx(Tex$1, { tex: `${n}! / (${live.map((g) => `${g.count}!`).join(" \\cdot ")}) = ${nFact.toLocaleString().replace(/,/g, "{,}")} / ${live.reduce((a, g) => a * factorial(g.count), 1).toLocaleString().replace(/,/g, "{,}")} =` }),
+							/* @__PURE__ */ jsx(Tex$1, { tex: `${n}! / (${live.map((g) => `${g.count}!`).join(" \\cdot ")})${checked ? ` = ${nFact.toLocaleString().replace(/,/g, "{,}")} / ${live.reduce((a, g) => a * factorial(g.count), 1).toLocaleString().replace(/,/g, "{,}")} = ${total.toLocaleString().replace(/,/g, "{,}")}` : ""}` }),
 							" ",
-							/* @__PURE__ */ jsx("span", {
-								style: { color: "var(--stage-good)" },
-								children: total.toLocaleString()
-							}),
-							" distinct arrangements"
+							checked && /* @__PURE__ */ jsx(Fragment$1, { children: "distinct arrangements" })
 						]
 					})
 				]
 			})
 		]
 	});
-	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: "distinct arrangements"
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "lab-callout-big",
-					children: total.toLocaleString()
-				}),
-				/* @__PURE__ */ jsx("span", {
-					style: {
-						fontSize: 12,
-						color: "var(--stage-muted)"
-					},
-					children: /* @__PURE__ */ jsx(Tex$1, { tex: `${n}! / ${live.map((g) => `${g.count}!`).join(" \\cdot ")}` })
-				})
-			]
-		}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-			className: "lab-prompt",
-			children: "🎯 How many distinct rows? Guess, then check."
-		}), /* @__PURE__ */ jsxs(ControlBar, { children: [
-			/* @__PURE__ */ jsx(Field, {
-				label: "your answer",
-				children: /* @__PURE__ */ jsx(Stepper, {
-					value: guess,
-					onChange: (v) => {
-						setGuess(v);
-						setChecked(false);
-					},
-					min: 0,
-					max: Math.max(100, total)
-				})
-			}),
-			/* @__PURE__ */ jsx(CheckButton, {
-				onClick: () => setChecked(true),
-				children: "Check"
-			}),
-			checked && /* @__PURE__ */ jsx(StatusPill, {
-				ok: guess === total,
-				children: guess === total ? "✓ right!" : "not yet"
-			})
-		] })] })] }),
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [base.map((g, i) => /* @__PURE__ */ jsx(Field, {
+	const aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Readout, {
+		label: "distinct arrangements",
+		value: checked ? total.toLocaleString() : "Commit an estimate",
+		sub: /* @__PURE__ */ jsx(Tex$1, { tex: `${n}! / ${live.map((g) => `${g.count}!`).join(" \\cdot ")}` })
+	}), /* @__PURE__ */ jsx(AuthoredResponse, {
+		question: {
+			id: "arrangement-count",
+			kind: "numeric",
+			prompt: "How many distinct rows are possible?",
+			answer: total,
+			tolerance: 0,
+			explain: `Correct: ${total.toLocaleString()} distinct arrangements.`,
+			tryAgain: "Account for every swap among identical copies."
+		},
+		onRespond: (result) => {
+			setGuess(typeof result.response === "number" ? result.response : null);
+			setChecked(true);
+		}
+	}, counts.join(":"))] });
+	const controls = /* @__PURE__ */ jsx("div", {
+		className: "lab-activity-fields",
+		children: base.map((g, i) => /* @__PURE__ */ jsx(Field, {
 			label: `# ${g.label}`,
 			children: /* @__PURE__ */ jsx(Stepper, {
 				value: counts[i] ?? 0,
@@ -268,12 +235,10 @@ function ArrangementsLab({ word, items, title = "Arrange with repeats", prompt,
 				min: 0,
 				max: 8
 			})
-		}, g.label)), /* @__PURE__ */ jsx(Chip, {
-			selected: false,
-			onClick: reset,
-			children: "reset"
-		})] }),
-		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RevealSolution, {
+		}, g.label))
+	});
+	const footer = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(RevealSolution, {
 			available: !solved,
 			buttonLabel: "Show the count",
 			solution: /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -287,8 +252,59 @@ function ArrangementsLab({ word, items, title = "Arrange with repeats", prompt,
 				setGuess(total);
 				setChecked(true);
 			}
-		}), /* @__PURE__ */ jsx(HintLadder, { hints })] }),
-		children: figure
+		}),
+		/* @__PURE__ */ jsx(ChallengeCard, {
+			questions: transferQuestions,
+			state: challenge,
+			title: "Explain the overcount"
+		}),
+		/* @__PURE__ */ jsx(HintLadder, { hints })
+	] });
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "discrete-arrangements-activity",
+		focusLayout: "compact",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Repeated arrangements",
+				title,
+				description: prompt ?? "Arrange visible groups, predict the distinct count, and identify why identical copies create an overcount."
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: checked ? `${total.toLocaleString()} distinct` : "Predict first" }),
+				/* @__PURE__ */ jsxs("span", { children: [n, " items"] }),
+				/* @__PURE__ */ jsxs("span", { children: [live.length, " groups"] })
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Repeated-item arrangement model",
+				children: figure
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: "Group counts and estimate",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "lab-activity-fields",
+					children: [aside, controls]
+				})
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: checked ? `${n}! labelled orders collapse to ${total.toLocaleString()} visible arrangements after identical-copy swaps are removed.` : "The ringed copies can swap without changing the visible row, revealing the source of the factorial divisor." })] }),
+			/* @__PURE__ */ jsx("section", {
+				className: "lab-authored-task",
+				"aria-label": "Arrangement explanation and support",
+				children: footer
+			}),
+			/* @__PURE__ */ jsx(Activity.LiveRegion, { children: checked ? `The distinct arrangement count is ${total}. Your estimate was ${guess ?? "blank"}.` : `There are ${n} items across ${live.length} repeated groups. Commit an estimate before revealing the count.` }),
+			/* @__PURE__ */ jsxs(Activity.Transport, { children: [/* @__PURE__ */ jsx(IconButton, {
+				label: "Reset arrangements",
+				onClick: reset,
+				children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "lab-transport-state",
+				children: [/* @__PURE__ */ jsx("strong", { children: checked ? "Estimate checked" : "Awaiting prediction" }), /* @__PURE__ */ jsxs("span", { children: [
+					n,
+					" items · ",
+					live.length,
+					" groups"
+				] })]
+			})] })
+		]
 	});
 }