@classytic/labs 0.2.0 → 0.3.0

package/dist/discrete/counting-slots/preset.mjs

@@ -1,19 +1,22 @@
 '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 { ActionButton, Chip, 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, nCr, nPr } 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";
+import { RotateCcw } from "lucide-react";
 
 //#region src/discrete/counting-slots/preset.tsx
 /**
 * CountingSlotsLab, counting made concrete, the FUN way (the tree drowns past ~8
 * leaves; this scales and reads friendly). The multiplication principle as filling
-* a row of POSITIONS: fill slot 1 from the whole pool, slot 2 from what's left, … , 
+* a row of POSITIONS: fill slot 1 from the whole pool, slot 2 from what's left, … ,
 * the pool shrinks, the product builds (4 × 3 × 2). It covers the whole family from
 * one model:
 *   • arrange (order matters)      → permutations nPr  (k = n ⇒ factorial n!)
@@ -35,10 +38,31 @@ function CountingSlotsLab({ items = [
 	const [repl, setRepl] = useState(repl0);
 	const [k, setK] = useState(Math.min(slots, repl0 ? slots : n));
 	const [step, setStep] = useState(0);
-	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: "unordered-overcount",
+		prompt: "Why do we divide ordered selections by k! when order does not matter?",
+		choices: [
+			{
+				value: "same-group",
+				label: "the k! orders describe the same selected group"
+			},
+			{
+				value: "smaller-pool",
+				label: "the item pool becomes k! times smaller"
+			},
+			{
+				value: "allow-repeats",
+				label: "division allows items to repeat"
+			}
+		],
+		answer: "same-group",
+		explain: "Each unordered group appears once for every ordering of its k members, so the ordered count overcounts it k! times."
+	}], []);
+	const challenge = useChallenge(transferQuestions);
 	const choices = (i) => repl ? n : n - i;
 	const arrangeTotal = useMemo(() => repl ? n ** k : nPr(n, k), [
 		repl,
@@ -61,14 +85,24 @@ function CountingSlotsLab({ items = [
 		repl,
 		n
 	]);
-	const reset = () => {
+	const filled = step >= k;
+	const clearAttempt = () => {
 		setStep(0);
-		setGuess(0);
+		setGuess(null);
 		setChecked(false);
 		setPeeked(false);
 	};
-	const fillNext = () => setStep((s) => Math.min(k, s + 1));
-	const solved = checked && guess === total && !peeked;
+	const reset = () => {
+		setMode(mode0);
+		setRepl(repl0);
+		setK(Math.min(slots, repl0 ? slots : n));
+		clearAttempt();
+		challenge.reset();
+	};
+	const fillNext = () => {
+		if (checked) setStep((s) => Math.min(k, s + 1));
+	};
+	const solved = checked && guess === total && filled && !peeked && challenge.allCorrect;
 	useCheckpoint({
 		solved,
 		activity: `counting-slots:${title}`,
@@ -82,7 +116,7 @@ function CountingSlotsLab({ items = [
 			get: () => mode,
 			set: (v) => {
 				setMode(v);
-				reset();
+				clearAttempt();
 			}
 		},
 		replacement: {
@@ -91,7 +125,7 @@ function CountingSlotsLab({ items = [
 			get: () => repl,
 			set: (v) => {
 				setRepl(v);
-				reset();
+				clearAttempt();
 			}
 		},
 		slots: {
@@ -102,8 +136,8 @@ function CountingSlotsLab({ items = [
 			step: 1,
 			get: () => k,
 			set: (v) => {
-				setK(Math.round(v));
-				reset();
+				setK(Math.max(1, Math.min(repl ? 6 : n, Math.round(v))));
+				clearAttempt();
 			}
 		},
 		fill: {
@@ -123,18 +157,14 @@ function CountingSlotsLab({ items = [
 		},
 		reset: {
 			type: "action",
-			label: "reset",
+			label: "restore authored setup",
 			invoke: reset
 		}
 	});
 	const used = new Set(repl ? [] : sample.slice(0, step));
-	const filled = step >= k;
 	const collapse = mode === "choose" && filled;
 	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",
@@ -145,27 +175,10 @@ function CountingSlotsLab({ items = [
 					!repl && ", each used once"
 				]
 			}), /* @__PURE__ */ jsx("div", {
-				style: {
-					display: "flex",
-					gap: 6,
-					flexWrap: "wrap"
-				},
+				className: "discrete-token-row",
 				children: items.map((it, i) => /* @__PURE__ */ jsx("span", {
-					style: {
-						display: "inline-flex",
-						alignItems: "center",
-						justifyContent: "center",
-						minWidth: 34,
-						height: 34,
-						padding: "0 8px",
-						borderRadius: 9,
-						fontSize: 17,
-						fontWeight: 700,
-						border: "1.5px solid var(--stage-grid)",
-						background: used.has(it) ? "transparent" : "color-mix(in oklab, var(--stage-accent) 12%, transparent)",
-						opacity: used.has(it) ? .3 : 1,
-						textDecoration: used.has(it) ? "line-through" : "none"
-					},
+					className: "discrete-pool-token",
+					"data-used": used.has(it),
 					children: it
 				}, i))
 			})] }),
@@ -175,86 +188,51 @@ function CountingSlotsLab({ items = [
 					k,
 					" position",
 					k === 1 ? "" : "s",
-					" to fill ",
+					" to fill",
+					" ",
 					mode === "choose" ? "(a group, order won't matter)" : "(in order)"
 				]
 			}), /* @__PURE__ */ jsx("div", {
-				style: {
-					display: "flex",
-					gap: 10,
-					flexWrap: "wrap",
-					alignItems: "flex-end"
-				},
+				className: "discrete-slot-row",
 				children: Array.from({ length: k }, (_, i) => {
 					const done = i < step, here = i === step;
 					return /* @__PURE__ */ jsxs("div", {
-						style: {
-							display: "grid",
-							justifyItems: "center",
-							gap: 3
-						},
+						className: "discrete-slot-stack",
 						children: [
 							positions?.[i] && /* @__PURE__ */ jsx("span", {
-								style: { fontSize: 15 },
+								className: "discrete-slot-label",
 								children: positions[i]
 							}),
 							/* @__PURE__ */ jsx("span", {
-								style: {
-									display: "inline-flex",
-									alignItems: "center",
-									justifyContent: "center",
-									width: 46,
-									height: 46,
-									borderRadius: 11,
-									fontSize: 20,
-									fontWeight: 800,
-									border: `2px ${done ? "solid" : "dashed"} ${here ? "var(--stage-good)" : done ? "var(--stage-accent)" : "var(--stage-grid)"}`,
-									background: done ? "color-mix(in oklab, var(--stage-accent) 16%, transparent)" : "transparent",
-									color: done ? "var(--stage-fg)" : "var(--stage-muted)"
-								},
+								className: "discrete-slot",
+								"data-state": done ? "done" : here ? "current" : "empty",
 								children: done ? sample[i] : here ? "?" : ""
 							}),
 							/* @__PURE__ */ jsxs("span", {
-								style: {
-									fontSize: 12,
-									fontWeight: 700,
-									color: done ? "var(--stage-accent)" : "var(--stage-muted)"
-								},
-								children: [done || here ? `${choices(i)}` : "·", /* @__PURE__ */ jsxs("span", {
-									style: {
-										fontWeight: 500,
-										fontSize: 10
-									},
-									children: [" ", done || here ? "choices" : ""]
-								})]
+								className: "discrete-choice-count",
+								"data-done": done,
+								children: [done || here ? `${choices(i)}` : "·", /* @__PURE__ */ jsxs("span", { children: [" ", done || here ? "choices" : ""] })]
 							})
 						]
 					}, i);
 				})
 			})] }),
 			/* @__PURE__ */ jsx("div", {
-				style: {
-					fontSize: 18,
-					fontWeight: 800,
-					fontVariantNumeric: "tabular-nums"
-				},
+				className: "discrete-running-product",
 				children: step === 0 ? /* @__PURE__ */ jsx("span", {
-					style: {
-						color: "var(--stage-muted)",
-						fontWeight: 500,
-						fontSize: 14
-					},
+					className: "discrete-prompt-muted",
 					children: "Fill the first slot, how many choices?"
 				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(Tex$1, { tex: Array.from({ length: step }, (_, i) => choices(i)).join(" \\times ") }),
 					step < k && /* @__PURE__ */ jsxs("span", {
-						style: { color: "var(--stage-muted)" },
+						className: "discrete-muted",
 						children: [" ", /* @__PURE__ */ jsx(Tex$1, { tex: "\\times \\ldots" })]
 					}),
 					filled && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-						" = ",
+						" ",
+						"= ",
 						/* @__PURE__ */ jsx("span", {
-							style: { color: "var(--stage-good)" },
+							className: "discrete-answer",
 							children: arrangeTotal
 						}),
 						" ",
@@ -268,55 +246,30 @@ function CountingSlotsLab({ items = [
 				] })
 			}),
 			collapse && /* @__PURE__ */ jsxs("div", {
-				style: {
-					padding: "10px 12px",
-					borderRadius: 10,
-					background: "color-mix(in oklab, var(--stage-warn) 10%, transparent)",
-					border: "1px solid var(--stage-grid)"
-				},
+				className: "discrete-collapse-panel",
 				children: [
 					/* @__PURE__ */ jsx("p", {
 						className: "lab-field-label",
 						children: "order doesn't matter, these are all the SAME group"
 					}),
 					factorial(k) <= 8 ? /* @__PURE__ */ jsxs("div", {
-						style: {
-							display: "flex",
-							gap: 6,
-							flexWrap: "wrap",
-							alignItems: "center"
-						},
+						className: "discrete-permutation-row",
 						children: [
 							allPerms(sample).map((p, i) => /* @__PURE__ */ jsx("span", {
-								style: {
-									fontWeight: 700,
-									fontSize: 13,
-									padding: "2px 7px",
-									borderRadius: 7,
-									background: "color-mix(in oklab, var(--stage-muted) 14%, transparent)"
-								},
+								className: "discrete-permutation-token",
 								children: p.join("")
 							}, i)),
 							/* @__PURE__ */ jsx("span", {
-								style: {
-									margin: "0 4px",
-									color: "var(--stage-muted)"
-								},
+								className: "discrete-collapse-arrow",
 								children: "→"
 							}),
 							/* @__PURE__ */ jsxs("span", {
-								style: {
-									fontWeight: 800,
-									padding: "2px 9px",
-									borderRadius: 7,
-									background: "color-mix(in oklab, var(--stage-good) 18%, transparent)",
-									color: "var(--stage-good)"
-								},
+								className: "discrete-collapsed-token",
 								children: [`{${sample.join(", ")}}`, " = 1"]
 							})
 						]
 					}) : /* @__PURE__ */ jsxs("p", {
-						style: { fontSize: 13 },
+						className: "discrete-collapse-copy",
 						children: [
 							"Each group of ",
 							k,
@@ -328,17 +281,12 @@ function CountingSlotsLab({ items = [
 						]
 					}),
 					/* @__PURE__ */ jsxs("p", {
-						style: {
-							marginTop: 8,
-							fontSize: 16,
-							fontWeight: 800,
-							fontVariantNumeric: "tabular-nums"
-						},
+						className: "discrete-collapse-equation",
 						children: [
 							/* @__PURE__ */ jsx(Tex$1, { tex: `${arrangeTotal} \\div ${k}! = ${arrangeTotal} \\div ${factorial(k)} =` }),
 							" ",
 							/* @__PURE__ */ jsx("span", {
-								style: { color: "var(--stage-good)" },
+								className: "discrete-answer",
 								children: total
 							}),
 							" groups"
@@ -347,21 +295,10 @@ function CountingSlotsLab({ items = [
 				]
 			}),
 			filled && /* @__PURE__ */ jsxs("div", {
-				style: {
-					padding: "8px 12px",
-					borderRadius: 10,
-					border: "1px dashed var(--stage-grid)",
-					fontSize: 14.5,
-					fontVariantNumeric: "tabular-nums"
-				},
+				className: "discrete-formula-panel",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						style: {
-							fontSize: 11,
-							fontWeight: 700,
-							letterSpacing: ".03em",
-							color: "var(--stage-muted)"
-						},
+						className: "discrete-formula-label",
 						children: "📐 SO THE FORMULA IS "
 					}),
 					/* @__PURE__ */ jsx("br", {}),
@@ -369,12 +306,12 @@ function CountingSlotsLab({ items = [
 						/* @__PURE__ */ jsx(Tex$1, { tex: `n^{k} = ${n}^{${k}} =` }),
 						" ",
 						/* @__PURE__ */ jsx("b", {
-							style: { color: "var(--stage-good)" },
+							className: "discrete-answer",
 							children: arrangeTotal
 						}),
 						" ",
 						/* @__PURE__ */ jsxs("span", {
-							style: { color: "var(--stage-muted)" },
+							className: "discrete-muted",
 							children: [
 								"(each slot has all ",
 								n,
@@ -385,12 +322,12 @@ function CountingSlotsLab({ items = [
 						/* @__PURE__ */ jsx(Tex$1, { tex: k === n ? `n! = ${n}! =` : `P(${n},${k}) = ${n} \\times \\ldots \\times ${n - k + 1} = ${n}! / (${n}-${k})! =` }),
 						" ",
 						/* @__PURE__ */ jsx("b", {
-							style: { color: "var(--stage-good)" },
+							className: "discrete-answer",
 							children: arrangeTotal
 						}),
 						" ",
 						/* @__PURE__ */ jsxs("span", {
-							style: { color: "var(--stage-muted)" },
+							className: "discrete-muted",
 							children: [
 								"(the ",
 								k === n ? "" : "unfilled ",
@@ -403,7 +340,7 @@ function CountingSlotsLab({ items = [
 						/* @__PURE__ */ jsx(Tex$1, { tex: `C(${n},${k}) = P(${n},${k}) / ${k}! = ${n}! / (${k}! \\cdot (${n}-${k})!) =` }),
 						" ",
 						/* @__PURE__ */ jsx("b", {
-							style: { color: "var(--stage-good)" },
+							className: "discrete-answer",
 							children: total
 						})
 					] })
@@ -411,78 +348,45 @@ function CountingSlotsLab({ items = [
 			})
 		]
 	});
-	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: mode === "choose" ? `choose ${k} of ${n}` : repl ? `${k} from ${n} (repeats ok)` : k === n ? `arrange all ${n}` : `arrange ${k} of ${n}`
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "lab-callout-big",
-					children: total.toLocaleString()
-				}),
-				/* @__PURE__ */ jsx("span", {
-					style: {
-						fontSize: 12,
-						color: "var(--stage-muted)"
-					},
-					children: mode === "choose" ? `${n}C${k}` : repl ? `${n}^${k}` : k === n ? `${n}!` : `${n}P${k}`
-				})
-			]
-		}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
-			className: "lab-prompt",
-			children: "🎯 How many ways? Guess, then fill the slots to 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(50, total * 2)
-				})
-			}),
-			/* @__PURE__ */ jsx(CheckButton, {
-				onClick: () => setChecked(true),
-				children: "Check"
-			}),
-			checked && /* @__PURE__ */ jsx(StatusPill, {
-				ok: guess === total,
-				children: guess === total ? "✓ right!" : "not yet, fill the slots"
-			})
-		] })] })] }),
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+	const aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Readout, {
+		label: mode === "choose" ? `choose ${k} of ${n}` : repl ? `${k} from ${n} (repeats ok)` : k === n ? `arrange all ${n}` : `arrange ${k} of ${n}`,
+		value: checked ? total.toLocaleString() : "Commit an estimate",
+		sub: mode === "choose" ? `${n}C${k}` : repl ? `${n}^${k}` : k === n ? `${n}!` : `${n}P${k}`
+	}), /* @__PURE__ */ jsx(AuthoredResponse, {
+		question: {
+			id: "counting-estimate",
+			kind: "numeric",
+			prompt: "How many ways are possible?",
+			answer: total,
+			tolerance: 0,
+			explain: `Correct: ${total.toLocaleString()} ways. Now build the product slot by slot.`,
+			tryAgain: "Commit the estimate, then use the shrinking number of choices in each slot as evidence."
+		},
+		onRespond: (result) => {
+			setGuess(typeof result.response === "number" ? result.response : null);
+			setChecked(true);
+		}
+	}, `${mode}:${repl}:${k}`)] });
+	const controls = /* @__PURE__ */ jsxs("div", {
+		className: "lab-activity-fields",
+		children: [
 			/* @__PURE__ */ jsx(Field, {
 				label: "order",
 				children: /* @__PURE__ */ jsxs("span", {
-					style: {
-						display: "flex",
-						gap: 6
-					},
+					className: "discrete-choice-row",
 					children: [/* @__PURE__ */ jsx(Chip, {
 						selected: mode === "arrange",
 						onClick: () => {
 							setMode("arrange");
-							reset();
+							clearAttempt();
 						},
 						children: "matters (arrange)"
 					}), /* @__PURE__ */ jsx(Chip, {
 						selected: mode === "choose",
 						onClick: () => {
 							setMode("choose");
-							reset();
+							setRepl(false);
+							clearAttempt();
 						},
 						children: "doesn't (choose)"
 					})]
@@ -494,7 +398,7 @@ function CountingSlotsLab({ items = [
 					selected: repl,
 					onClick: () => {
 						setRepl((r) => !r);
-						reset();
+						clearAttempt();
 					},
 					children: repl ? "allowed (nᵏ)" : "each once"
 				})
@@ -502,35 +406,30 @@ function CountingSlotsLab({ items = [
 			/* @__PURE__ */ jsx(Field, {
 				label: "positions k",
 				children: /* @__PURE__ */ jsx(Stepper, {
+					label: "positions",
 					value: k,
 					onChange: (v) => {
 						setK(Math.max(1, Math.min(repl ? 6 : n, v)));
-						reset();
+						clearAttempt();
 					},
 					min: 1,
 					max: repl ? 6 : n
 				})
-			}),
-			/* @__PURE__ */ jsx(Chip, {
-				selected: false,
-				onClick: fillNext,
-				children: filled ? "✓ filled" : "▶ fill next slot"
-			}),
-			/* @__PURE__ */ jsx(Chip, {
-				selected: false,
-				onClick: reset,
-				children: "reset"
 			})
-		] }),
-		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(RevealSolution, {
+		]
+	});
+	const footer = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(RevealSolution, {
 			available: !filled || checked && !solved,
 			buttonLabel: "Show the count",
 			solution: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				mode === "choose" ? `${n}C${k}` : repl ? `${n}^${k}` : k === n ? `${n}!` : `${n}P${k}`,
-				" = ",
+				" =",
+				" ",
 				/* @__PURE__ */ jsx("b", { children: total }),
 				mode === "choose" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					" (=",
+					" ",
+					"(=",
 					arrangeTotal,
 					" ÷ ",
 					k,
@@ -544,8 +443,71 @@ function CountingSlotsLab({ items = [
 				setGuess(total);
 				setChecked(true);
 			}
-		}), /* @__PURE__ */ jsx(HintLadder, { hints })] }),
-		children: figure
+		}),
+		/* @__PURE__ */ jsx(ChallengeCard, {
+			questions: transferQuestions,
+			state: challenge,
+			title: "Explain the correction"
+		}),
+		/* @__PURE__ */ jsx(HintLadder, { hints })
+	] });
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "discrete-counting-slots-activity",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Permutations and combinations",
+				title,
+				description: prompt ?? "Commit a count, then fill each position to expose the product and any overcount correction."
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: checked ? `${total.toLocaleString()} ways` : "Predict first" }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					step,
+					"/",
+					k,
+					" slots"
+				] }),
+				/* @__PURE__ */ jsx("span", { children: mode === "choose" ? "order ignored" : repl ? "repeats allowed" : "no repeats" })
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Counting slots",
+				children: figure
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: "Estimate and counting setup",
+				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: filled ? mode === "choose" ? `The ${arrangeTotal} ordered fillings collapse in groups of ${k}!, leaving ${total} selections.` : `The slot-by-slot product gives ${total} arrangements.` : "Each filled slot exposes the number of choices still available at that position." })] }),
+			/* @__PURE__ */ jsx("section", {
+				className: "lab-authored-task",
+				"aria-label": "Counting-slots explanation and support",
+				children: footer
+			}),
+			/* @__PURE__ */ jsx(Activity.LiveRegion, { children: checked ? `${guess ?? "Blank"} was committed. ${step} of ${k} slots are filled.` : `Estimate the number of ways before filling the ${k} slots.` }),
+			/* @__PURE__ */ jsxs(Activity.Transport, { children: [
+				/* @__PURE__ */ jsx(IconButton, {
+					label: "Reset counting slots",
+					onClick: reset,
+					children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "lab-transport-state",
+					children: [/* @__PURE__ */ jsx("strong", { children: checked ? "Estimate committed" : "Awaiting prediction" }), /* @__PURE__ */ jsxs("span", { children: [
+						step,
+						" of ",
+						k,
+						" slots"
+					] })]
+				}),
+				/* @__PURE__ */ jsx(ActionButton, {
+					onClick: fillNext,
+					disabled: !checked || filled,
+					children: filled ? "Slots filled" : "Fill next slot"
+				})
+			] })
+		]
 	});
 }