@classytic/labs 0.4.0 → 0.5.0

package/dist/algorithms/TreeQuestLab.mjs

@@ -2,13 +2,16 @@
 
 import { AssessedChoiceGroup } from "../kit/controls.mjs";
 import { Activity } from "../kit/activity.mjs";
-import { insertAVL, insertBST, searchBST, traverseTree } from "./tree.mjs";
+import { choiceDisplayOrder } from "../kit/choice-order.mjs";
+import { useCheckpoint } from "../kit/pedagogy.mjs";
+import { deleteBST, insertAVL, insertBST, searchBST, traverseTree, treeNodeName } from "./tree.mjs";
 import { buildTeachingTree } from "./tree-builder.mjs";
 import { CLASSIC_BST } from "./tree-presets.mjs";
+import { resolveDataset } from "./worlds/index.mjs";
 import { TraceTransport } from "./TraceTransport.mjs";
 import { BinaryTransferCheck } from "./LearningChecks.mjs";
 import { TreeScene } from "./TreeScene.mjs";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 
@@ -25,80 +28,245 @@ const DEFAULT_TREE_VALUES = [
 	7,
 	13
 ];
-function TreeQuestLab({ operation = "traversal", order = "inorder", target = 13, tree, values = DEFAULT_TREE_VALUES, strategy = "insertion-order", title, prompt, predict = true }) {
-	const lessonTree = useMemo(() => tree ?? buildTeachingTree(values, strategy), [
+const ROTATIONS = [
+	{
+		value: "LL",
+		label: "Left, left",
+		path: "left → left"
+	},
+	{
+		value: "RR",
+		label: "Right, right",
+		path: "right → right"
+	},
+	{
+		value: "LR",
+		label: "Left, right",
+		path: "left → right"
+	},
+	{
+		value: "RL",
+		label: "Right, left",
+		path: "right → left"
+	}
+];
+const CASES = [
+	{
+		value: "leaf",
+		label: "Case 1 · a leaf"
+	},
+	{
+		value: "one-child",
+		label: "Case 2 · one child"
+	},
+	{
+		value: "two-children",
+		label: "Case 3 · two children"
+	}
+];
+/** Tree snapshot the learner sees at a step (structural operations change the tree mid-trace). */
+function treeAt(trace, base, step) {
+	if (trace.operation !== "insert" && trace.operation !== "avl-insert" && trace.operation !== "delete") return base;
+	if (trace.events[step]?.type === "complete") return trace.tree;
+	for (let index = step; index >= 0; index--) {
+		const event = trace.events[index];
+		if ((event.type === "insert" || event.type === "rotate" || event.type === "remove") && event.tree) return event.tree;
+	}
+	return base;
+}
+/** The prediction the learner commits to at this step, or undefined when the step just plays. */
+function treeQuestionAt(trace, base, step) {
+	const event = trace.events[step];
+	if (!event) return void 0;
+	const shown = treeAt(trace, base, step);
+	const nodes = new Map([...base.nodes, ...shown.nodes].map((node) => [node.id, node]));
+	const name = (id) => treeNodeName(id ? nodes.get(id) : void 0) || "?";
+	if (event.type === "compare") {
+		const answer = event.relation === "less" ? "left" : event.relation === "greater" ? "right" : "equal";
+		return {
+			prompt: `Which way should ${event.target} go at ${name(event.nodeId)}?`,
+			answer,
+			options: [
+				{
+					value: "left",
+					label: "Left"
+				},
+				{
+					value: "equal",
+					label: "Found"
+				},
+				{
+					value: "right",
+					label: "Right"
+				}
+			],
+			retry: `Not this branch. Compare ${event.target} with ${nodes.get(event.nodeId)?.value ?? ""} again.`,
+			aria: `Predict where ${event.target} belongs`
+		};
+	}
+	if (event.type === "balance" && event.rotation) return {
+		prompt: `Follow the heavy path from ${name(event.nodeId)}. Which case is it?`,
+		answer: event.rotation,
+		options: ROTATIONS.map((choice) => ({
+			value: choice.value,
+			label: `${choice.value} · ${choice.path}`
+		})),
+		retry: `Trace the child directions from ${nodes.get(event.nodeId)?.value}; name those two turns in order.`,
+		aria: "Predict the AVL rotation case"
+	};
+	if (event.type === "delete-case") return {
+		prompt: `${name(event.nodeId)} is found. Which delete case applies?`,
+		answer: event.deleteCase,
+		options: CASES,
+		retry: "Count the children of the node you found: none, one, or two.",
+		aria: "Predict the delete case"
+	};
+	if (event.type === "successor" && event.candidates.length >= 2) {
+		const options = event.candidates.map((id) => ({
+			value: id,
+			label: name(id)
+		}));
+		return {
+			prompt: `Which node takes ${name(event.targetId)}'s place?`,
+			answer: event.nodeId,
+			options: choiceDisplayOrder(options, event.nodeId, `tree-successor-${step}`),
+			retry: "The in-order successor is the SMALLEST key in the right subtree: step right once, then left as far as you can.",
+			aria: "Predict the replacement node"
+		};
+	}
+	const next = trace.events[step + 1];
+	if (trace.operation === "traversal" && next?.type === "visit") {
+		const visited = new Set(trace.events.slice(0, step + 1).flatMap((item) => item.type === "visit" ? [item.nodeId] : []));
+		const answer = next.nodeId;
+		const here = "nodeId" in event ? event.nodeId : event.type === "base-case" ? event.parentId : void 0;
+		const node = here ? nodes.get(here) : void 0;
+		const parent = here ? shown.nodes.find((item) => item.left === here || item.right === here)?.id : void 0;
+		const nearby = [
+			...event.type === "enqueue" ? event.queue : [],
+			here,
+			node?.left,
+			node?.right,
+			parent,
+			...shown.nodes.map((item) => item.id)
+		];
+		const distractors = [...new Set(nearby.filter((id) => Boolean(id) && id !== answer && !visited.has(id) && nodes.has(id)))].slice(0, 3);
+		if (!distractors.length) return void 0;
+		const options = [answer, ...distractors].map((id) => ({
+			value: id,
+			label: name(id)
+		}));
+		return {
+			prompt: "Which node is visited next?",
+			answer,
+			options: choiceDisplayOrder(options, answer, `tree-visit-${step}`),
+			retry: trace.events.some((item) => item.type === "enqueue") ? "Level-order always visits the node at the FRONT of the queue." : "Say the rule for this order out loud (node, left, right and so on) at the current call.",
+			aria: "Predict the next node visited"
+		};
+	}
+}
+function TreeQuestLab({ operation = "traversal", order = "inorder", target = 13, label, tree, values, items, dataset, strategy = "insertion-order", title, prompt, predict = true }) {
+	const resolved = resolveDataset(dataset, "items");
+	const keys = items?.length ? items : values?.length ? values : resolved?.items ?? DEFAULT_TREE_VALUES;
+	const keysKey = keys.map((entry) => typeof entry === "number" ? entry : `${entry.value}:${entry.label ?? ""}`).join(",");
+	const lessonTree = useMemo(() => tree ?? buildTeachingTree(keys, strategy), [
 		strategy,
 		tree,
-		values
+		keysKey
 	]);
 	const safeTree = lessonTree.rootId ? lessonTree : CLASSIC_BST;
-	const trace = useMemo(() => operation === "traversal" ? traverseTree(safeTree, order) : operation === "search" ? searchBST(safeTree, target) : operation === "avl-insert" ? insertAVL(safeTree, target) : insertBST(safeTree, target), [
+	const trace = useMemo(() => operation === "traversal" ? traverseTree(safeTree, order) : operation === "search" ? searchBST(safeTree, target) : operation === "avl-insert" ? insertAVL(safeTree, target, label) : operation === "delete" ? deleteBST(safeTree, target) : insertBST(safeTree, target, label), [
 		operation,
 		order,
 		target,
+		label,
 		safeTree
 	]);
 	const [step, setStep] = useState(0);
 	const [guess, setGuess] = useState();
-	const [rotationGuess, setRotationGuess] = useState();
+	const [firstTry, setFirstTry] = useState({});
 	const [transferAnswer, setTransferAnswer] = useState();
+	const attempt = useRef(0);
+	const [attemptKey, setAttemptKey] = useState(0);
 	useEffect(() => {
 		setStep(0);
 		setGuess(void 0);
-		setRotationGuess(void 0);
+		setFirstTry({});
 		setTransferAnswer(void 0);
+		attempt.current += 1;
+		setAttemptKey(attempt.current);
 	}, [trace]);
-	useEffect(() => {
-		setGuess(void 0);
-		setRotationGuess(void 0);
-	}, [step]);
+	useEffect(() => setGuess(void 0), [step]);
 	const event = trace.events[step];
 	const visible = trace.events.slice(0, step + 1);
 	const visited = new Set(visible.flatMap((item) => item.type === "visit" ? [item.nodeId] : []));
 	const output = [...visible].reverse().find((item) => item.type === "visit" || item.type === "complete")?.output ?? [];
-	const snapshot = [...visible].reverse().find((item) => (item.type === "insert" || item.type === "rotate") && Boolean(item.tree));
-	const structural = operation === "insert" || operation === "avl-insert";
-	const showComplete = event.type === "complete";
-	const visibleTree = structural ? showComplete ? trace.tree : snapshot?.tree ?? safeTree : safeTree;
-	const nodeMap = new Map(visibleTree.nodes.map((node) => [node.id, node]));
+	const levelOrder = operation === "traversal" && order === "level-order";
+	const queue = [...visible].reverse().map((item) => item.type === "enqueue" ? item.queue : item.type === "visit" ? item.queue : void 0).find((item) => Array.isArray(item)) ?? [];
+	const visibleTree = treeAt(trace, safeTree, step);
+	const nodeMap = new Map([...safeTree.nodes, ...visibleTree.nodes].map((node) => [node.id, node]));
 	const stack = eventStack(event);
-	const heightOf = (id) => {
-		const found = id ? nodeMap.get(id) : void 0;
-		return found ? 1 + Math.max(heightOf(found.left), heightOf(found.right)) : 0;
+	const questions = useMemo(() => predict ? trace.events.map((_event, index) => treeQuestionAt(trace, safeTree, index)) : [], [
+		predict,
+		trace,
+		safeTree
+	]);
+	const question = questions[step];
+	const questionCount = questions.filter(Boolean).length;
+	const pending = Boolean(question && guess !== question.answer);
+	const pick = (next) => {
+		setGuess(next);
+		if (question && firstTry[step] === void 0) setFirstTry((current) => ({
+			...current,
+			[step]: next === question.answer
+		}));
+	};
+	const complete = step === trace.events.length - 1;
+	const firstTryRight = Object.values(firstTry).filter(Boolean).length;
+	const finalEvent = trace.events.at(-1);
+	useCheckpoint({
+		solved: complete,
+		activity: `tree-quest:${operation}:${operation === "traversal" ? order : target}:${items?.length || values?.length || tree ? "custom" : resolved?.id ?? "default"}`,
+		score: questionCount ? {
+			raw: firstTryRight,
+			max: questionCount
+		} : void 0,
+		response: `${finalEvent?.message ?? ""} ${firstTryRight} of ${questionCount} predictions right first time.`.trim(),
+		attemptKey
+	});
+	const heightOf = (id, guard = 0) => {
+		const found = id ? visibleTree.nodes.find((node) => node.id === id) : void 0;
+		return found && guard <= visibleTree.nodes.length ? 1 + Math.max(heightOf(found.left, guard + 1), heightOf(found.right, guard + 1)) : 0;
 	};
 	const nodeCount = visibleTree.nodes.length;
 	const levels = heightOf(visibleTree.rootId);
 	const balancedLevels = nodeCount ? Math.ceil(Math.log2(nodeCount + 1)) : 0;
 	const shapeBalanced = nodeCount === 0 || Math.abs(levels - balancedLevels) <= Math.abs(levels - nodeCount);
-	const prediction = predict && event.type === "compare";
-	const correct = event.type === "compare" ? event.relation === "less" ? "left" : event.relation === "greater" ? "right" : "equal" : void 0;
-	const rotationPrediction = predict && event.type === "balance" && Boolean(event.rotation);
-	const correctRotation = event.type === "balance" ? event.rotation : void 0;
-	const rotationChoices = [
-		{
-			value: "LL",
-			label: "Left–left",
-			path: "left → left"
-		},
-		{
-			value: "RR",
-			label: "Right–right",
-			path: "right → right"
-		},
-		{
-			value: "LR",
-			label: "Left–right",
-			path: "left → right"
-		},
-		{
-			value: "RL",
-			label: "Right–left",
-			path: "right → left"
-		}
-	];
-	const heading = operation === "traversal" ? `${order[0].toUpperCase()}${order.slice(1)} traversal` : operation === "search" ? `Find ${target} in a BST` : operation === "avl-insert" ? `Balance the tree after inserting ${target}` : `Insert ${target} into a BST`;
-	const inspectorLabel = event.type === "balance" ? `AVL evidence · balance ${event.factor > 0 ? "+" : ""}${event.factor}${event.rotation ? ` · ${event.rotation}` : ""}` : operation === "traversal" ? "Recursion and output" : operation === "avl-insert" ? "AVL evidence" : "Decision evidence";
-	const transferPrompt = operation === "avl-insert" ? "After an AVL rotation, must the binary-search ordering still hold?" : "Can inserting sorted values into an unbalanced BST make lookup degrade to O(n)?";
+	const targetNode = safeTree.nodes.find((node) => node.value === target);
+	const targetName = targetNode ? treeNodeName(targetNode) : String(target);
+	const heading = operation === "traversal" ? levelOrder ? "Level-order traversal" : `${order[0].toUpperCase()}${order.slice(1)} traversal` : operation === "search" ? `Find ${targetName} in a BST` : operation === "avl-insert" ? `Balance the tree after inserting ${target}` : operation === "delete" ? `Delete ${targetName} from a BST` : `Insert ${target} into a BST`;
+	const inspectorLabel = event.type === "balance" ? `AVL evidence · balance ${event.factor > 0 ? "+" : ""}${event.factor}${event.rotation ? ` · ${event.rotation}` : ""}` : operation === "traversal" ? levelOrder ? "Queue and output" : "Recursion and output" : operation === "avl-insert" ? "AVL evidence" : "Decision evidence";
+	const transfer = operation === "avl-insert" ? {
+		prompt: "After an AVL rotation, must the binary-search ordering still hold?",
+		correct: "yes",
+		right: "Exactly. Rotation repairs height while preserving in-order key order.",
+		retry: "Rotation may change the root, but it cannot violate the BST invariant."
+	} : operation === "delete" ? {
+		prompt: "For a node with two children, would its in-order PREDECESSOR (largest key on the left) also keep the tree a valid BST?",
+		correct: "yes",
+		right: "Exactly. The predecessor is larger than everything else on the left and smaller than everything on the right, so either neighbour works; this lab always uses the successor.",
+		retry: "List the keys in order: the predecessor and the successor sit on either side of the deleted key."
+	} : levelOrder ? {
+		prompt: "Does level-order need a call stack the way preorder does?",
+		correct: "no",
+		right: "Exactly. A first-in first-out queue replaces the call stack, so the walk goes level by level.",
+		retry: "Watch the inspector: level-order only ever used the queue."
+	} : {
+		prompt: "Can inserting sorted values into an unbalanced BST make lookup degrade to O(n)?",
+		correct: "yes",
+		right: "Exactly. A sorted insertion sequence can create a chain, so depth and lookup become linear.",
+		retry: "Compare a chain-shaped tree with a balanced tree containing the same keys."
+	};
+	const message = pending && question ? `Predict first: ${question.prompt}` : event.message;
 	return /* @__PURE__ */ jsxs(Activity.Root, {
 		className: "tree-quest algorithm-activity",
 		focusLayout: "immersive",
@@ -106,90 +274,72 @@ function TreeQuestLab({ operation = "traversal", order = "inorder", target = 13,
 			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
 				eyebrow: "Tree quest",
 				title: title ?? heading,
-				description: prompt ?? (operation === "traversal" ? "Follow the recursive calls and collect each node in the correct order." : "Use the BST invariant to choose a branch at every comparison.")
+				description: prompt ?? resolved?.note ?? (operation === "traversal" ? levelOrder ? "Take nodes from the front of the queue and add their children to the back." : "Follow the recursive calls and collect each node in the correct order." : "Use the BST invariant to choose a branch at every comparison.")
 			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
-			/* @__PURE__ */ jsxs(Activity.Status, { children: [/* @__PURE__ */ jsxs("span", {
-				className: "lab-chip",
-				children: ["Mission ", /* @__PURE__ */ jsx("strong", { children: operation })]
-			}), operation === "traversal" ? /* @__PURE__ */ jsxs("span", {
-				className: "lab-chip",
-				children: ["Order ", /* @__PURE__ */ jsx("strong", { children: order })]
-			}) : /* @__PURE__ */ jsxs("span", {
-				className: "lab-chip",
-				children: ["Target ", /* @__PURE__ */ jsx("strong", { children: target })]
-			})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "lab-chip",
+					children: ["Mission ", /* @__PURE__ */ jsx("strong", { children: operation })]
+				}),
+				operation === "traversal" ? /* @__PURE__ */ jsxs("span", {
+					className: "lab-chip",
+					children: ["Order ", /* @__PURE__ */ jsx("strong", { children: order })]
+				}) : /* @__PURE__ */ jsxs("span", {
+					className: "lab-chip",
+					children: [
+						operation === "delete" ? "Delete" : "Target",
+						" ",
+						/* @__PURE__ */ jsx("strong", { children: target })
+					]
+				}),
+				questionCount > 0 && /* @__PURE__ */ jsxs("span", {
+					className: "lab-chip",
+					children: ["First try ", /* @__PURE__ */ jsxs("strong", { children: [
+						firstTryRight,
+						"/",
+						questionCount
+					] })]
+				})
+			] }),
 			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsxs(Activity.Canvas, {
 				label: "Binary tree quest",
-				children: [
-					/* @__PURE__ */ jsx(TreeScene, {
-						tree: visibleTree,
-						event,
-						visited
-					}),
-					prediction && /* @__PURE__ */ jsxs("div", {
-						className: "tree-prediction",
-						children: [
-							/* @__PURE__ */ jsxs("span", { children: [
-								"Which way should ",
-								target,
-								" go?"
-							] }),
-							/* @__PURE__ */ jsx(AssessedChoiceGroup, {
-								value: guess,
-								onChange: setGuess,
-								ariaLabel: `Predict where ${target} belongs`,
-								options: [
-									"left",
-									"equal",
-									"right"
-								].map((choice) => ({
-									value: choice,
-									label: choice === "equal" ? "Found" : choice[0].toUpperCase() + choice.slice(1),
-									tone: guess === choice ? choice === correct ? "correct" : "wrong" : void 0
-								}))
-							}),
-							guess && /* @__PURE__ */ jsx("small", {
-								"aria-live": "polite",
-								children: guess === correct ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }), " Exactly—now watch that decision happen."] }) : `Not this branch. Compare ${target} with ${event.nodeId ? nodeMap.get(event.nodeId)?.value : ""} again.`
-							})
-						]
-					}),
-					rotationPrediction && /* @__PURE__ */ jsxs("div", {
-						className: "tree-prediction tree-rotation-prediction",
-						children: [
-							/* @__PURE__ */ jsxs("span", { children: [
-								"Follow the heavy path from ",
-								nodeMap.get(event.nodeId)?.value,
-								". Which case is it?"
-							] }),
-							/* @__PURE__ */ jsx(AssessedChoiceGroup, {
-								value: rotationGuess,
-								onChange: setRotationGuess,
-								ariaLabel: "Predict the AVL rotation case",
-								options: rotationChoices.map((choice) => ({
-									value: choice.value,
-									label: `${choice.value} · ${choice.path}`,
-									tone: rotationGuess === choice.value ? choice.value === correctRotation ? "correct" : "wrong" : void 0
-								}))
-							}),
-							rotationGuess && /* @__PURE__ */ jsx("small", {
-								"aria-live": "polite",
-								children: rotationGuess === correctRotation ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-									/* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }),
-									" Correct—",
-									rotationChoices.find((choice) => choice.value === correctRotation)?.label,
-									". Advance to watch the repair."
-								] }) : `Trace the child directions from ${nodeMap.get(event.nodeId)?.value}; name those two turns in order.`
-							})
-						]
-					})
-				]
+				children: [/* @__PURE__ */ jsx(TreeScene, {
+					tree: visibleTree,
+					event,
+					visited,
+					queued: levelOrder ? new Set(queue) : void 0
+				}), question && /* @__PURE__ */ jsxs("div", {
+					className: "tree-prediction",
+					children: [
+						/* @__PURE__ */ jsx("span", { children: question.prompt }),
+						/* @__PURE__ */ jsx(AssessedChoiceGroup, {
+							value: guess,
+							onChange: pick,
+							ariaLabel: question.aria,
+							options: question.options.map((choice) => ({
+								value: choice.value,
+								label: choice.label,
+								tone: guess === choice.value ? choice.value === question.answer ? "correct" : "wrong" : void 0
+							}))
+						}),
+						guess && /* @__PURE__ */ jsx("small", {
+							"aria-live": "polite",
+							children: guess === question.answer ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }), " Exactly. Now watch that decision happen."] }) : question.retry
+						})
+					]
+				})]
 			}), /* @__PURE__ */ jsx(Activity.Inspector, {
 				label: inspectorLabel,
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "tree-inspector",
 					children: [
-						/* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h4", { children: operation === "traversal" ? "Call stack" : "Decision path" }), /* @__PURE__ */ jsx("div", {
+						levelOrder ? /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h4", { children: "Queue (front first)" }), /* @__PURE__ */ jsx("div", {
+							className: "tree-stack tree-queue",
+							children: queue.length ? queue.map((id, index) => /* @__PURE__ */ jsx("span", {
+								"data-top": index === 0 || void 0,
+								children: treeNodeName(nodeMap.get(id)) || id
+							}, id)) : /* @__PURE__ */ jsx("em", { children: "queue empty" })
+						})] }) : /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h4", { children: operation === "traversal" ? "Call stack" : "Decision path" }), /* @__PURE__ */ jsx("div", {
 							className: "tree-stack",
 							children: stack.length ? [...stack].reverse().map((id, index) => /* @__PURE__ */ jsxs("span", {
 								"data-top": index === 0 || void 0,
@@ -216,15 +366,22 @@ function TreeQuestLab({ operation = "traversal", order = "inorder", target = 13,
 								/* @__PURE__ */ jsx("small", { children: event.rotation ? `${event.rotation}: follow the two heavy-child directions shown in the tree.` : "−1, 0, or 1 means this node is still AVL-balanced." })
 							]
 						}),
+						operation === "delete" && /* @__PURE__ */ jsxs("section", {
+							className: "tree-delete-cases",
+							children: [/* @__PURE__ */ jsx("h4", { children: "Three delete cases" }), /* @__PURE__ */ jsx("ol", { children: CASES.map((item) => /* @__PURE__ */ jsx("li", {
+								"data-here": visible.some((seen) => seen.type === "delete-case" && seen.deleteCase === item.value) && !pending ? true : void 0,
+								children: item.label
+							}, item.value)) })]
+						}),
 						operation === "traversal" && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h4", { children: "Visited output" }), /* @__PURE__ */ jsx("div", {
 							className: "tree-output",
-							children: output.length ? output.map((id) => /* @__PURE__ */ jsx("span", { children: nodeMap.get(id)?.value ?? id }, id)) : /* @__PURE__ */ jsx("em", { children: "no node visited yet" })
+							children: output.length ? output.map((id) => /* @__PURE__ */ jsx("span", { children: treeNodeName(nodeMap.get(id)) || id }, id)) : /* @__PURE__ */ jsx("em", { children: "no node visited yet" })
 						})] }),
 						/* @__PURE__ */ jsxs("section", {
 							className: "tree-invariant",
-							children: [/* @__PURE__ */ jsx("h4", { children: "Rule to preserve" }), /* @__PURE__ */ jsx("p", { children: operation === "traversal" ? `${order}: ${order === "preorder" ? "node, left, right" : order === "inorder" ? "left, node, right" : "left, right, node"}` : operation === "avl-insert" ? "BST order, and every node has |left height − right height| ≤ 1" : "every left value is smaller; every right value is larger" })]
+							children: [/* @__PURE__ */ jsx("h4", { children: "Rule to preserve" }), /* @__PURE__ */ jsx("p", { children: operation === "traversal" ? `${order}: ${order === "preorder" ? "node, left, right" : order === "inorder" ? "left, node, right" : order === "postorder" ? "left, right, node" : "visit the front of the queue, then enqueue its left and right children"}` : operation === "avl-insert" ? "BST order, and every node has |left height − right height| ≤ 1" : operation === "delete" ? "after the delete, every left key is still smaller and every right key larger" : "every left value is smaller; every right value is larger" })]
 						}),
-						(showComplete || event.type === "start") && /* @__PURE__ */ jsxs("section", {
+						(complete || event.type === "start") && /* @__PURE__ */ jsxs("section", {
 							className: "tree-complexity",
 							children: [
 								/* @__PURE__ */ jsx("h4", { children: operation === "traversal" ? "Tree depth" : "Why balance matters" }),
@@ -255,35 +412,35 @@ function TreeQuestLab({ operation = "traversal", order = "inorder", target = 13,
 					]
 				})
 			})] }),
-			showComplete && /* @__PURE__ */ jsx(BinaryTransferCheck, {
+			complete && /* @__PURE__ */ jsx(BinaryTransferCheck, {
 				id: "tree-transfer-title",
-				prompt: transferPrompt,
+				prompt: transfer.prompt,
 				answer: transferAnswer,
-				correct: "yes",
+				correct: transfer.correct,
 				onAnswer: setTransferAnswer,
-				correctFeedback: operation === "avl-insert" ? "Exactly. Rotation repairs height while preserving in-order key order." : "Exactly. A sorted insertion sequence can create a chain, so depth and lookup become linear.",
-				retryFeedback: operation === "avl-insert" ? "Rotation may change the root, but it cannot violate the BST invariant." : "Compare a chain-shaped tree with a balanced tree containing the same keys."
+				correctFeedback: transfer.right,
+				retryFeedback: transfer.retry
 			}),
-			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("strong", { children: event.type === "balance" ? "Balance" : event.type === "compare" ? "Compare" : event.type === "rotate" ? "Repair" : event.type === "complete" ? "Result" : "Observe" }), /* @__PURE__ */ jsx("span", { children: event.message })] }),
-			/* @__PURE__ */ jsx(Activity.Transcript, { children: /* @__PURE__ */ jsxs("ol", { children: [trace.events.map((item, index) => /* @__PURE__ */ jsx("li", {
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("strong", { children: pending ? "Predict" : event.type === "balance" ? "Balance" : event.type === "compare" ? "Compare" : event.type === "rotate" || event.type === "remove" ? "Repair" : event.type === "complete" ? "Result" : "Observe" }), /* @__PURE__ */ jsx("span", { children: message })] }),
+			/* @__PURE__ */ jsx(Activity.Transcript, { children: /* @__PURE__ */ jsxs("ol", { children: [visible.map((item, index) => /* @__PURE__ */ jsx("li", {
 				"data-current": index === step || void 0,
-				children: item.message
+				children: index === step ? message : item.message
 			}, index)), transferAnswer && /* @__PURE__ */ jsxs("li", { children: [
 				"Transfer answer:",
 				" ",
-				transferAnswer === "yes" ? "the invariant applies in the changed case" : "reconsider the changed case",
+				transferAnswer === transfer.correct ? "the invariant applies in the changed case" : "reconsider the changed case",
 				"."
 			] })] }) }),
 			/* @__PURE__ */ jsx(TraceTransport, {
 				step,
 				count: trace.events.length,
-				message: event.message,
+				message,
 				setStep,
-				canAdvance: (!prediction || Boolean(guess)) && (!rotationPrediction || Boolean(rotationGuess))
+				canAdvance: !pending
 			})
 		]
 	});
 }
 
 //#endregion
-export { TreeQuestLab };
+export { TreeQuestLab, treeQuestionAt };

package/dist/algorithms/TreeScene.d.mts

@@ -4,8 +4,10 @@ interface TreeSceneProps {
   tree: BinaryTree;
   event: TreeEvent;
   visited?: ReadonlySet<string>;
+  /** Level-order: nodes waiting in the queue. */
+  queued?: ReadonlySet<string>;
   onNodeSelect?: (id: string) => void;
 }
-declare function TreeScene({ tree, event, visited, onNodeSelect }: TreeSceneProps): import("react").JSX.Element;
+declare function TreeScene({ tree, event, visited, queued, onNodeSelect }: TreeSceneProps): import("react").JSX.Element;
 //#endregion
 export { TreeScene, TreeSceneProps };

package/dist/algorithms/TreeScene.mjs

@@ -1,5 +1,6 @@
 'use client';
 
+import { FigText } from "../kit/figure/text.mjs";
 import { layoutBinaryTree } from "./tree-layout.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -9,15 +10,18 @@ import { Maximize2 } from "lucide-react";
 //#region src/algorithms/TreeScene.tsx
 const R_HALO = 22;
 const R_FACE = 16;
-const FONT = 10;
 const PAD = 34;
 const READABLE_W = 760;
 const READABLE_H = 620;
-function TreeScene({ tree, event, visited = /* @__PURE__ */ new Set(), onNodeSelect }) {
+const NO_IDS = /* @__PURE__ */ new Set();
+const LABEL_CHARS = 10;
+const treeLabel = (label) => !label ? void 0 : label.length > LABEL_CHARS ? `${label.slice(0, 9)}…` : label;
+function TreeScene({ tree, event, visited = NO_IDS, queued = NO_IDS, onNodeSelect }) {
 	const positions = layoutBinaryTree(tree);
 	const at = new Map(positions.map((item) => [item.id, item]));
 	const nodes = new Map(tree.nodes.map((node) => [node.id, node]));
-	const current = "nodeId" in event ? event.nodeId : event.type === "descend" ? event.to ?? event.from : void 0;
+	const current = event.type === "remove" ? event.replacementId : "nodeId" in event ? event.nodeId : event.type === "descend" ? event.to ?? event.from : void 0;
+	const marked = event.type === "successor" ? event.targetId : event.type === "delete-case" ? event.nodeId : void 0;
 	const active = event.type === "descend" ? `${event.from}:${event.to}` : void 0;
 	const xs = positions.length ? positions.map((p) => p.x) : [0];
 	const ys = positions.length ? positions.map((p) => p.y) : [0];
@@ -157,9 +161,11 @@ function TreeScene({ tree, event, visited = /* @__PURE__ */ new Set(), onNodeSel
 					transform: `translate(${position.x} ${position.y})`,
 					"data-current": node.id === current || void 0,
 					"data-visited": visited.has(node.id) || void 0,
+					"data-queued": queued.has(node.id) || void 0,
+					"data-marked": node.id === marked || void 0,
 					role: onNodeSelect ? "treeitem" : void 0,
 					"aria-level": onNodeSelect ? position.depth + 1 : void 0,
-					"aria-label": `Node ${node.value}, depth ${position.depth}`,
+					"aria-label": `Node ${node.value}${node.label ? `, ${node.label}` : ""}, depth ${position.depth}`,
 					tabIndex: onNodeSelect ? node.id === focusId ? 0 : -1 : void 0,
 					onFocus: onNodeSelect ? () => setFocusId(node.id) : void 0,
 					onClick: onNodeSelect ? () => {
@@ -176,12 +182,23 @@ function TreeScene({ tree, event, visited = /* @__PURE__ */ new Set(), onNodeSel
 							className: "tree-node-face",
 							r: R_FACE
 						}),
-						/* @__PURE__ */ jsx("text", {
-							textAnchor: "middle",
-							dominantBaseline: "central",
-							fontSize: FONT,
-							fontWeight: 800,
+						/* @__PURE__ */ jsx(FigText, {
+							x: 0,
+							y: 0,
+							anchor: "middle",
+							baseline: "middle",
+							size: "label",
+							caps: false,
 							children: node.value
+						}),
+						node.label && /* @__PURE__ */ jsxs(FigText, {
+							x: 0,
+							y: 31,
+							className: "tree-node-label",
+							anchor: "middle",
+							size: "note",
+							caps: false,
+							children: [/* @__PURE__ */ jsx("title", { children: node.label }), treeLabel(node.label)]
 						})
 					]
 				}, node.id);