@classytic/labs 0.4.0 → 0.5.0

package/dist/algorithms/GraphAlgorithmLab.mjs

@@ -1,138 +1,341 @@
 'use client';
 
-import { AssessedChoiceGroup } from "../kit/controls.mjs";
+import { ActionButton, AssessedChoiceGroup } from "../kit/controls.mjs";
 import { Activity } from "../kit/activity.mjs";
-import { bfs, dfs, dijkstra, reconstructPath } from "./graph.mjs";
+import { useCheckpoint } from "../kit/pedagogy.mjs";
 import { teachingGraph } from "./presets.mjs";
-import { normalizeGraph } from "./normalize.mjs";
-import { GraphView } from "./GraphView.mjs";
+import { adjacencyList, adjacencyMatrix, compareShortest, formatWeight, graphStateAt, hasNegativeEdge, isWeighted, pathWeight, prepareGraph, runGraphAlgorithm } from "./graph.mjs";
+import { ROAD_ROUTES } from "./worlds/delivery/roads.mjs";
+import { resolveDataset } from "./worlds/index.mjs";
+import { GraphView, layoutGraph } from "./GraphView.mjs";
 import { TraceTransport } from "./TraceTransport.mjs";
 import { BinaryTransferCheck } from "./LearningChecks.mjs";
 import { useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/algorithms/GraphAlgorithmLab.tsx
-function GraphAlgorithmLab({ algorithm = "dijkstra", graph = teachingGraph, source = "A", target = "F", title, prompt }) {
-	const safeGraph = useMemo(() => normalizeGraph(graph), [graph]);
-	const safeSource = safeGraph.nodes.some((node) => node.id === source) ? source : safeGraph.nodes[0].id;
-	const safeTarget = safeGraph.nodes.some((node) => node.id === target) ? target : safeGraph.nodes.at(-1).id;
-	const trace = useMemo(() => algorithm === "bfs" ? bfs(safeGraph, safeSource) : algorithm === "dfs" ? dfs(safeGraph, safeSource) : dijkstra(safeGraph, safeSource, safeTarget), [
+const NAMES = {
+	bfs: {
+		short: "BFS",
+		title: "BFS graph traversal"
+	},
+	dfs: {
+		short: "DFS",
+		title: "DFS graph traversal"
+	},
+	dijkstra: {
+		short: "Dijkstra",
+		title: "Dijkstra's shortest path"
+	},
+	"bellman-ford": {
+		short: "Bellman-Ford",
+		title: "Bellman-Ford shortest path"
+	},
+	prim: {
+		short: "Prim",
+		title: "Prim's minimum spanning tree"
+	},
+	kruskal: {
+		short: "Kruskal",
+		title: "Kruskal's minimum spanning tree"
+	},
+	topo: {
+		short: "topological sort",
+		title: "Topological sort"
+	},
+	cycle: {
+		short: "cycle search",
+		title: "Cycle detection"
+	}
+};
+const FRONTIER_LABEL = {
+	bfs: "Queue",
+	dfs: "Stack",
+	dijkstra: "Priority frontier",
+	prim: "Fringe",
+	topo: "Ready queue",
+	cycle: "Grey path"
+};
+const ORDER_HEADING = {
+	bfs: "Visited order",
+	dfs: "Visited order",
+	dijkstra: "Settled order",
+	"bellman-ford": "Reached",
+	prim: "Join order",
+	kruskal: "Joined hubs",
+	topo: "Task order",
+	cycle: "Grey order"
+};
+function transferFor(algorithm, negative) {
+	const retryFeedback = "Try changing the weights or neighbour order and compare the trace.";
+	switch (algorithm) {
+		case "bfs":
+		case "dfs": return {
+			prompt: `If the neighbour order changes, can ${algorithm.toUpperCase()}'s visit order change?`,
+			correct: "yes",
+			correctFeedback: "Exactly. The structure is unchanged, but traversal order depends on neighbour order.",
+			retryFeedback
+		};
+		case "dijkstra": return negative ? {
+			prompt: "Would Dijkstra be right here if it could reopen a settled node?",
+			correct: "yes",
+			correctFeedback: "Yes. Reopening nodes whenever a cheaper route appears is what Bellman-Ford does; Dijkstra saves time by never looking back, which is only safe without negative edges.",
+			retryFeedback: "Look at the edge Dijkstra ignored because its end was already settled."
+		} : {
+			prompt: "If an edge on this route becomes more expensive, can the shortest route change?",
+			correct: "yes",
+			correctFeedback: "Exactly. New weights can make another route cheaper.",
+			retryFeedback
+		};
+		case "bellman-ford": return {
+			prompt: "If a loop of roads had a negative total, would the rounds ever stop lowering distances?",
+			correct: "no",
+			correctFeedback: "Right. Every trip round the loop is cheaper again, so the check round still improves something and Bellman-Ford reports a negative cycle.",
+			retryFeedback: "Add up the weights round the loop: what does one more lap do to the cost?"
+		};
+		case "prim":
+		case "kruskal": return {
+			prompt: "If every link cost 1 more, could the cheapest network use different links?",
+			correct: "no",
+			correctFeedback: "Right. Every spanning tree has one fewer edge than there are nodes, so all totals rise by the same amount and the cheapest stays cheapest.",
+			retryFeedback: "Count the edges in any spanning tree of this graph. Does that number change?"
+		};
+		case "topo": return {
+			prompt: "Can a task list whose prerequisites form a loop ever be put in order?",
+			correct: "no",
+			correctFeedback: "Right. Every task on the loop waits for another one on it, so none can go first.",
+			retryFeedback: "Pick any task on the loop and ask which task it waits for."
+		};
+		default: return {
+			prompt: "If DFS finishes without ever meeting a grey task, is the graph free of cycles?",
+			correct: "yes",
+			correctFeedback: "Yes. On any cycle, DFS must follow some edge into a task that is still grey.",
+			retryFeedback: "Think about the first task of a cycle that DFS turns grey."
+		};
+	}
+}
+/** Three-letter codes for matrix headers, unique within the graph. */
+function shortCodes(graph) {
+	const codes = {};
+	const used = /* @__PURE__ */ new Set();
+	for (const node of graph.nodes) {
+		const label = (node.label ?? node.id).replace(/[^A-Za-z0-9]/g, "");
+		let code = label.slice(0, 3) || node.id.slice(0, 3);
+		for (let extra = 1; used.has(code); extra++) code = `${label.slice(0, 2)}${extra}`;
+		used.add(code);
+		codes[node.id] = code;
+	}
+	return codes;
+}
+function GraphAlgorithmLab({ algorithm = "dijkstra", dataset, graph, source, target, predict = true, representation = "drawing", dfsOrder = "stack", title, prompt }) {
+	const story = resolveDataset(dataset, "graph");
+	const safeGraph = useMemo(() => prepareGraph(graph ?? story?.graph ?? teachingGraph), [graph, story]);
+	const route = dataset ? ROAD_ROUTES[dataset] : void 0;
+	const has = (id) => Boolean(id) && safeGraph.nodes.some((node) => node.id === id);
+	const safeSource = [
+		source,
+		route?.source,
+		"A"
+	].find(has) ?? safeGraph.nodes[0].id;
+	const safeTarget = [
+		target,
+		route?.target,
+		"F"
+	].find(has) ?? safeGraph.nodes.at(-1).id;
+	const trace = useMemo(() => runGraphAlgorithm(algorithm, safeGraph, safeSource, safeTarget, { dfsOrder }), [
 		algorithm,
 		safeGraph,
 		safeSource,
-		safeTarget
+		safeTarget,
+		dfsOrder
 	]);
+	const names = useMemo(() => new Map(safeGraph.nodes.map((node) => [node.id, node.label ?? node.id])), [safeGraph]);
+	const name = (id) => id ? names.get(id) ?? id : "none";
 	const [step, setStep] = useState(0);
-	const [prediction, setPrediction] = useState();
+	/** Picks per decision index, in the order the learner made them. */
+	const [picks, setPicks] = useState({});
 	const [transferAnswer, setTransferAnswer] = useState();
-	useEffect(() => setStep(0), [trace]);
-	useEffect(() => setPrediction(void 0), [step, trace]);
-	useEffect(() => setTransferAnswer(void 0), [trace]);
-	const visible = trace.events.slice(0, step + 1);
-	const visited = /* @__PURE__ */ new Set();
-	const discovered = /* @__PURE__ */ new Set([safeSource]);
-	const distances = Object.fromEntries(safeGraph.nodes.map((n) => [n.id, n.id === safeSource ? 0 : Infinity]));
-	let current = safeSource;
-	let activeEdge;
-	let frontier = [safeSource];
-	for (const event of visible) {
-		if (event.type === "visit-node") {
-			current = event.nodeId;
-			visited.add(event.nodeId);
-			frontier = event.frontier;
-		}
-		if (event.type === "inspect-edge") activeEdge = event.edgeId;
-		if (event.type === "discover-node") {
-			discovered.add(event.nodeId);
-			frontier = event.frontier;
-		}
-		if (event.type === "relax-edge") {
-			distances[event.nodeId] = event.next;
-			activeEdge = event.edgeId;
-			frontier = safeGraph.nodes.map((node) => node.id).filter((id) => !visited.has(id) && Number.isFinite(distances[id])).sort((a, b) => distances[a] - distances[b] || a.localeCompare(b));
-		}
-	}
+	const [attempt, setAttempt] = useState(0);
+	useEffect(() => {
+		setStep(0);
+		setPicks({});
+		setTransferAnswer(void 0);
+	}, [trace]);
+	const decisions = predict ? trace.decisions : [];
+	const decisionIndex = decisions.findIndex((decision) => decision.step === step);
+	const decision = decisions[decisionIndex];
+	const myPicks = decisionIndex >= 0 ? picks[decisionIndex] ?? [] : [];
+	const picked = myPicks.at(-1);
+	const answered = Boolean(decision && myPicks.includes(decision.answer));
+	const pending = Boolean(decision && !answered);
+	const pick = (value) => {
+		if (!decision || answered) return;
+		setPicks((all) => ({
+			...all,
+			[decisionIndex]: [...all[decisionIndex] ?? [], value]
+		}));
+	};
+	const state = graphStateAt(trace, safeGraph, step);
 	const event = trace.events[step];
-	const nextEvent = trace.events[step + 1];
-	const nextVisit = nextEvent?.type === "visit-node" ? nextEvent.nodeId : void 0;
-	const candidates = [...new Set(frontier)].filter((id) => !visited.has(id));
-	const asksNext = Boolean(nextVisit && candidates.length > 1);
-	const predictionCorrect = prediction === nextVisit;
-	const path = event.type === "complete" && algorithm === "dijkstra" ? reconstructPath(trace.previous, safeSource, safeTarget) : [];
-	const label = algorithm === "dijkstra" ? "Dijkstra's shortest path" : `${algorithm.toUpperCase()} graph traversal`;
-	const frontierLabel = algorithm === "bfs" ? "Queue" : algorithm === "dfs" ? "Stack" : "Priority frontier";
 	const complete = event.type === "complete";
-	const transferPrompt = algorithm === "dijkstra" ? "If an edge on this route becomes more expensive, can the shortest route change?" : `If the neighbour order changes, can ${algorithm.toUpperCase()}'s visit order change?`;
+	const weighted = isWeighted(safeGraph);
+	const negative = hasNegativeEdge(safeGraph);
+	const layoutMode = useMemo(() => layoutGraph(safeGraph).mode, [safeGraph]);
+	const label = NAMES[algorithm];
+	const firstTry = decisions.filter((item, index) => picks[index]?.[0] === item.answer).length;
+	const solved = predict && complete && decisions.every((item, index) => picks[index]?.includes(item.answer));
+	const response = decisions.length ? `Predicted ${firstTry} of ${decisions.length} ${label.short} steps first try` : `Traced ${label.short} to the end`;
+	useCheckpoint({
+		solved,
+		activity: `graph-algorithm:${algorithm}${dataset ? `:${dataset}` : ""}`,
+		score: decisions.length ? {
+			raw: firstTry,
+			max: decisions.length
+		} : void 0,
+		response,
+		attemptKey: `${algorithm}${algorithm === "dfs" ? `-${dfsOrder}` : ""}:${safeSource}:${safeTarget}:${dataset ?? ""}:${attempt}`
+	});
+	const restart = () => {
+		setStep(0);
+		setPicks({});
+		setTransferAnswer(void 0);
+		setAttempt((value) => value + 1);
+	};
+	const path = complete && (algorithm === "dijkstra" || algorithm === "bellman-ford" || algorithm === "bfs") ? trace.path ?? [] : [];
+	const comparison = useMemo(() => negative && (algorithm === "dijkstra" || algorithm === "bellman-ford") ? compareShortest(safeGraph, safeSource, safeTarget) : void 0, [
+		algorithm,
+		negative,
+		safeGraph,
+		safeSource,
+		safeTarget
+	]);
+	const transfer = transferFor(algorithm, negative);
+	const showsDistance = algorithm === "dijkstra" || algorithm === "bellman-ford" || algorithm === "prim";
+	const badges = algorithm === "topo" && state.inDegree ? Object.fromEntries(safeGraph.nodes.filter((node) => !state.visited.includes(node.id)).map((node) => [node.id, `in ${state.inDegree[node.id] ?? 0}`])) : void 0;
+	const frontierText = algorithm === "bellman-ford" ? `Round ${state.round ?? 0}` : algorithm === "kruskal" ? `Tree cost ${formatWeight(state.total ?? 0)}` : state.frontier.map(name).join(", ") || "empty";
+	const frontierLabel = algorithm === "bellman-ford" ? "Pass" : algorithm === "kruskal" ? "MST" : algorithm === "dfs" && dfsOrder === "recursive" ? "Call stack" : FRONTIER_LABEL[algorithm];
+	const decisionLabel = decision?.kind === "node" ? "Predict the next node" : decision?.kind === "edge" ? "Predict the next edge" : "Predict the outcome";
+	const optionLabel = (value) => decision?.options.find((option) => option.value === value)?.label ?? value;
+	const listMode = algorithm === "topo" || algorithm === "cycle" ? "directed" : "as-drawn";
+	const showList = representation === "adj-list" || representation === "both";
+	const showMatrix = representation === "matrix" || representation === "both";
+	const codes = shortCodes(safeGraph);
+	const orderItems = algorithm === "bellman-ford" ? safeGraph.nodes.map((node) => node.id).filter((id) => Number.isFinite(state.distances?.[id] ?? Infinity)) : state.visited;
 	return /* @__PURE__ */ jsxs(Activity.Root, {
-		className: "algorithm-activity",
+		className: "algorithm-activity graph-algorithm",
 		focusLayout: "immersive",
 		children: [
 			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
 				eyebrow: "Algorithms",
-				title: title ?? label,
-				description: prompt ?? "Step through the decisions. The visualization exposes algorithm state, not just the final answer."
+				title: title ?? label.title,
+				description: prompt ?? story?.note ?? "Step through the decisions. The visualization exposes algorithm state, not just the final answer."
 			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
-			/* @__PURE__ */ jsxs(Activity.Status, { children: [/* @__PURE__ */ jsxs("span", {
-				className: "lab-chip",
-				children: ["Current ", /* @__PURE__ */ jsx("strong", { children: current })]
-			}), /* @__PURE__ */ jsxs("span", {
-				className: "lab-chip",
-				children: [
-					frontierLabel,
-					" ",
-					/* @__PURE__ */ jsx("strong", { children: frontier.join(", ") || "empty" })
-				]
-			})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "lab-chip",
+					children: ["Current ", /* @__PURE__ */ jsx("strong", { children: algorithm === "kruskal" ? "edge list" : name(state.current) })]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "lab-chip",
+					children: [
+						frontierLabel,
+						" ",
+						/* @__PURE__ */ jsx("strong", { children: frontierText })
+					]
+				}),
+				decisions.length > 0 && /* @__PURE__ */ jsxs("span", {
+					className: "lab-chip",
+					children: ["First try ", /* @__PURE__ */ jsx("strong", { children: `${firstTry}/${decisions.length}` })]
+				})
+			] }),
 			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsxs(Activity.Canvas, {
 				label: "Graph visualization",
 				children: [
 					/* @__PURE__ */ jsx(GraphView, {
 						graph: safeGraph,
-						current,
-						activeEdge,
-						visited,
-						discovered,
+						current: state.current,
+						activeEdge: state.activeEdge,
+						visited: new Set(state.visited),
+						discovered: new Set(state.discovered),
 						path,
-						distances: algorithm === "dijkstra" ? distances : void 0
+						distances: showsDistance ? state.distances : void 0,
+						badges,
+						tree: new Set(state.tree),
+						rejected: new Set(state.rejected),
+						cycleEdges: new Set(state.cycleEdges),
+						ignored: new Set(state.ignored),
+						colour: state.colour,
+						pick: decision && !answered && decision.kind !== "yes-no" ? {
+							kind: decision.kind,
+							options: decision.options,
+							picked,
+							onPick: pick
+						} : void 0
 					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "algorithm-legend",
-						"aria-label": "Graph state legend",
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								"data-tone": "current",
-								children: "current"
-							}),
-							/* @__PURE__ */ jsx("span", {
-								"data-tone": "frontier",
-								children: "frontier"
-							}),
-							/* @__PURE__ */ jsx("span", {
-								"data-tone": "visited",
-								children: "settled"
-							})
-						]
+					/* @__PURE__ */ jsx(GraphLegend, {
+						algorithm,
+						loop: state.cycleEdges.length > 0
 					}),
-					asksNext && /* @__PURE__ */ jsxs("section", {
+					decision && /* @__PURE__ */ jsxs("section", {
 						className: "algorithm-decision",
-						"aria-label": "Predict the next node",
+						"aria-label": decisionLabel,
 						children: [
-							/* @__PURE__ */ jsx("strong", { children: algorithm === "dijkstra" ? "Which tentative distance is smallest?" : algorithm === "bfs" ? "Which node leaves the queue next?" : "Which node leaves the stack next?" }),
+							/* @__PURE__ */ jsx("strong", { children: decision.prompt }),
 							/* @__PURE__ */ jsx(AssessedChoiceGroup, {
-								value: prediction,
-								onChange: setPrediction,
-								ariaLabel: "Predict the next graph node",
-								options: candidates.map((id) => ({
-									value: id,
-									label: `${id}${algorithm === "dijkstra" ? ` · ${distances[id]}` : ""}`,
-									tone: prediction === id ? id === nextVisit ? "correct" : "wrong" : void 0
+								value: picked,
+								onChange: pick,
+								ariaLabel: decision.kind === "node" ? "Predict the next graph node" : decision.prompt,
+								options: decision.options.map((option) => ({
+									value: option.value,
+									label: option.label,
+									tone: picked === option.value ? option.value === decision.answer ? "correct" : "wrong" : void 0
 								}))
 							}),
-							prediction && /* @__PURE__ */ jsx("small", {
+							picked && /* @__PURE__ */ jsx("small", {
 								"aria-live": "polite",
-								children: predictionCorrect ? `Correct—${nextVisit} is selected next.` : `Compare the ${algorithm === "bfs" ? "queue order" : algorithm === "dfs" ? "stack top" : "tentative distances"} again.`
+								children: picked === decision.answer ? decision.kind === "node" ? `Correct: ${name(decision.answer)} is selected next. ${decision.correct}` : `Correct: ${decision.kind === "edge" ? `${optionLabel(decision.answer)}. ` : ""}${decision.correct}` : decision.reasons[picked] ?? "Not yet. Compare the options again."
 							})
 						]
+					}),
+					complete && comparison && /* @__PURE__ */ jsx("p", {
+						className: "algorithm-note",
+						role: "note",
+						children: comparison.truth ? comparison.agree ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							"Dijkstra and Bellman-Ford agree here: ",
+							name(safeTarget),
+							" costs",
+							" ",
+							formatWeight(comparison.truth.cost),
+							"."
+						] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							"Dijkstra says ",
+							name(safeTarget),
+							" costs ",
+							/* @__PURE__ */ jsx("strong", { children: formatWeight(comparison.dijkstra.cost) }),
+							" ",
+							"(",
+							comparison.dijkstra.path.map(name).join(" → "),
+							"); the true cheapest is",
+							" ",
+							/* @__PURE__ */ jsx("strong", { children: formatWeight(comparison.truth.cost) }),
+							" (",
+							comparison.truth.path.map(name).join(" → "),
+							"). Dijkstra settled a node before the negative edge into it was seen, and never reopens a settled node."
+						] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							"A negative cycle means no route is cheapest: Dijkstra's ",
+							formatWeight(comparison.dijkstra.cost),
+							" is just where its greedy order happened to stop."
+						] })
+					}),
+					complete && algorithm === "bfs" && weighted && path.length > 1 && /* @__PURE__ */ jsxs("p", {
+						className: "algorithm-note",
+						role: "note",
+						children: [
+							"Fewest hops is not cheapest: this route's edge weights add up to",
+							" ",
+							formatWeight(pathWeight(safeGraph, path)),
+							"."
+						]
 					})
 				]
 			}), /* @__PURE__ */ jsx(Activity.Inspector, {
@@ -140,44 +343,208 @@ function GraphAlgorithmLab({ algorithm = "dijkstra", graph = teachingGraph, sour
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "algorithm-inspector",
 					children: [
-						/* @__PURE__ */ jsx("h4", { children: "Visited order" }),
-						/* @__PURE__ */ jsx("div", {
+						/* @__PURE__ */ jsx("h4", { children: ORDER_HEADING[algorithm] }),
+						layoutMode === "compact" && algorithm !== "topo" ? /* @__PURE__ */ jsx("div", {
 							className: "algorithm-order",
-							children: visited.size ? [...visited].map((id) => /* @__PURE__ */ jsx("span", { children: id }, id)) : /* @__PURE__ */ jsx("em", { children: "none yet" })
+							children: orderItems.length ? orderItems.map((id) => /* @__PURE__ */ jsx("span", { children: name(id) }, id)) : /* @__PURE__ */ jsx("em", { children: "none yet" })
+						}) : /* @__PURE__ */ jsx("ol", {
+							className: "algorithm-order-strip",
+							"aria-label": ORDER_HEADING[algorithm],
+							children: orderItems.length ? orderItems.map((id, index) => /* @__PURE__ */ jsxs("li", { children: [
+								/* @__PURE__ */ jsx("b", { children: index + 1 }),
+								" ",
+								name(id)
+							] }, id)) : /* @__PURE__ */ jsx("li", {
+								className: "algorithm-order-empty",
+								children: "none yet"
+							})
+						}),
+						showsDistance && state.distances && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("h4", { children: algorithm === "prim" ? "Cheapest link into the tree" : "Tentative distances" }), /* @__PURE__ */ jsx("dl", { children: safeGraph.nodes.map((node) => /* @__PURE__ */ jsxs("div", {
+							"data-current": node.id === state.current || void 0,
+							children: [/* @__PURE__ */ jsx("dt", { children: node.label ?? node.id }), /* @__PURE__ */ jsx("dd", { children: formatWeight(state.distances[node.id] ?? Infinity) })]
+						}, node.id)) })] }),
+						algorithm === "prim" && /* @__PURE__ */ jsxs("p", { children: ["Tree cost ", /* @__PURE__ */ jsx("strong", { children: formatWeight(state.total ?? 0) })] }),
+						algorithm === "kruskal" && /* @__PURE__ */ jsx(KruskalPanel, {
+							graph: safeGraph,
+							tree: state.tree,
+							rejected: state.rejected,
+							sets: state.sets,
+							name
+						}),
+						algorithm === "topo" && state.inDegree && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("h4", { children: "Prerequisites left" }), /* @__PURE__ */ jsx("dl", { children: safeGraph.nodes.map((node) => /* @__PURE__ */ jsxs("div", {
+							"data-done": state.visited.includes(node.id) || void 0,
+							children: [/* @__PURE__ */ jsx("dt", { children: node.label ?? node.id }), /* @__PURE__ */ jsx("dd", { children: state.visited.includes(node.id) ? "done" : state.inDegree[node.id] })]
+						}, node.id)) })] }),
+						algorithm === "cycle" && state.colour && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("h4", { children: "Colours" }), /* @__PURE__ */ jsx("dl", { children: [
+							"grey",
+							"black",
+							"white"
+						].map((tone) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: tone === "grey" ? "Grey (on path)" : tone === "black" ? "Black (finished)" : "White (unseen)" }), /* @__PURE__ */ jsx("dd", { children: safeGraph.nodes.filter((node) => state.colour[node.id] === tone).map((node) => node.label ?? node.id).join(", ") || "none" })] }, tone)) })] }),
+						showList && /* @__PURE__ */ jsx(AdjacencyListPanel, {
+							graph: safeGraph,
+							mode: listMode,
+							scanning: state.scanning,
+							activeEdge: state.activeEdge,
+							name,
+							weighted
 						}),
-						algorithm === "dijkstra" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("h4", { children: "Tentative distances" }), /* @__PURE__ */ jsx("dl", { children: safeGraph.nodes.map((node) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: node.id }), /* @__PURE__ */ jsx("dd", { children: Number.isFinite(distances[node.id]) ? distances[node.id] : "∞" })] }, node.id)) })] })
+						showMatrix && /* @__PURE__ */ jsx(AdjacencyMatrixPanel, {
+							graph: safeGraph,
+							mode: listMode,
+							scanning: state.scanning,
+							activeEdge: state.activeEdge,
+							codes,
+							weighted,
+							name
+						})
 					]
 				})
 			})] }),
 			complete && /* @__PURE__ */ jsx(BinaryTransferCheck, {
 				id: "algorithm-transfer-title",
-				prompt: transferPrompt,
+				prompt: transfer.prompt,
 				answer: transferAnswer,
-				correct: "yes",
+				correct: transfer.correct,
 				onAnswer: setTransferAnswer,
-				correctFeedback: algorithm === "dijkstra" ? "Exactly. New weights can make another route cheaper." : "Exactly. The structure is unchanged, but traversal order depends on neighbour order.",
-				retryFeedback: "Try changing the weights or neighbour order and compare the trace."
+				correctFeedback: transfer.correctFeedback,
+				retryFeedback: transfer.retryFeedback
 			}),
-			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("strong", { children: event.type === "complete" ? "Result" : event.type === "relax-edge" ? "Relax" : event.type === "visit-node" ? "Choose" : "Observe" }), /* @__PURE__ */ jsx("span", { children: event.message })] }),
+			complete && predict && /* @__PURE__ */ jsxs("div", {
+				className: "algorithm-score",
+				role: "status",
+				children: [/* @__PURE__ */ jsx("span", { children: `${response}.` }), /* @__PURE__ */ jsx(ActionButton, {
+					className: "lab-btn-ghost",
+					onClick: restart,
+					children: "Start over"
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("strong", { children: complete ? "Result" : event.type === "relax-edge" ? "Relax" : event.type === "visit-node" || event.type === "emit-node" || event.type === "accept-edge" ? "Choose" : event.type === "reject-edge" || event.type === "skip-settled" ? "Skip" : event.type === "back-edge" || event.type === "negative-cycle" ? "Cycle" : "Observe" }), /* @__PURE__ */ jsx("span", { children: event.message })] }),
 			/* @__PURE__ */ jsx(Activity.Transcript, { children: /* @__PURE__ */ jsxs("ol", { children: [trace.events.map((item, index) => /* @__PURE__ */ jsx("li", {
 				"data-current": index === step || void 0,
 				children: item.message
 			}, index)), transferAnswer && /* @__PURE__ */ jsxs("li", { children: [
-				"Transfer answer:",
-				" ",
-				transferAnswer === "yes" ? "the result order or route can change" : "no change",
+				"Transfer answer: ",
+				transferAnswer === "yes" ? "yes" : "no",
+				transferAnswer === transfer.correct ? " (correct)" : "",
 				"."
 			] })] }) }),
 			/* @__PURE__ */ jsx(TraceTransport, {
 				step,
 				count: trace.events.length,
-				message: asksNext && !prediction ? "Predict the next node to continue." : event.message,
+				message: pending ? decision.kind === "node" ? "Predict the next node to continue." : decision.kind === "edge" ? "Predict the next edge to continue." : "Predict the outcome to continue." : event.message,
 				setStep,
-				canAdvance: !asksNext || Boolean(prediction)
+				canAdvance: !pending
 			})
 		]
 	});
 }
+function GraphLegend({ algorithm, loop }) {
+	const items = algorithm === "prim" || algorithm === "kruskal" ? [
+		["tree", "in the tree"],
+		["rejected", "would make a cycle"],
+		["current", "just added"]
+	] : algorithm === "cycle" ? [
+		["grey", "grey: on the path"],
+		["visited", "black: finished"],
+		["cycle", "cycle"]
+	] : algorithm === "topo" ? [
+		["current", "just done"],
+		["visited", "done"],
+		...loop ? [["cycle", "the loop"]] : []
+	] : [
+		["current", "current"],
+		["frontier", "frontier"],
+		["visited", "settled"]
+	];
+	return /* @__PURE__ */ jsx("div", {
+		className: "algorithm-legend",
+		"aria-label": "Graph state legend",
+		children: items.map(([tone, text]) => /* @__PURE__ */ jsx("span", {
+			"data-tone": tone,
+			children: text
+		}, tone))
+	});
+}
+function KruskalPanel({ graph, tree, rejected, sets, name }) {
+	const sorted = [...graph.edges].sort((a, b) => (a.weight ?? 1) - (b.weight ?? 1) || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+	const nextIndex = sorted.findIndex((edge) => !tree.includes(edge.id) && !rejected.includes(edge.id));
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("h4", { children: "Edges by cost" }),
+		/* @__PURE__ */ jsx("ol", {
+			className: "algorithm-edge-list",
+			children: sorted.map((edge, index) => {
+				const status = tree.includes(edge.id) ? "taken" : rejected.includes(edge.id) ? "skipped" : index === nextIndex ? "next" : "waiting";
+				return /* @__PURE__ */ jsxs("li", {
+					"data-status": status,
+					children: [
+						/* @__PURE__ */ jsxs("span", { children: [
+							name(edge.from),
+							"–",
+							name(edge.to)
+						] }),
+						/* @__PURE__ */ jsx("b", { children: formatWeight(edge.weight ?? 1) }),
+						/* @__PURE__ */ jsx("em", { children: status === "taken" ? "taken" : status === "skipped" ? "would make a cycle" : "" })
+					]
+				}, edge.id);
+			})
+		}),
+		sets && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("h4", { children: "Union-find sets" }), /* @__PURE__ */ jsx("ul", {
+			className: "algorithm-sets",
+			"aria-label": "Union-find sets",
+			children: sets.map((set) => /* @__PURE__ */ jsx("li", { children: `{${set.map(name).join(", ")}}` }, set.join("|")))
+		})] })
+	] });
+}
+function AdjacencyListPanel({ graph, mode, scanning, activeEdge, name, weighted }) {
+	const rows = adjacencyList(graph, mode);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("h4", { children: "Adjacency list" }), /* @__PURE__ */ jsx("ul", {
+		className: "algorithm-adjacency",
+		"aria-label": "Adjacency list",
+		children: rows.map((row) => /* @__PURE__ */ jsxs("li", {
+			"data-scanning": row.id === scanning || void 0,
+			children: [/* @__PURE__ */ jsx("b", { children: name(row.id) }), /* @__PURE__ */ jsx("span", { children: row.neighbours.length ? row.neighbours.map((cell, index) => /* @__PURE__ */ jsxs("span", {
+				"data-active": row.id === scanning && cell.edgeId === activeEdge || void 0,
+				children: [
+					index > 0 ? ", " : "",
+					name(cell.id),
+					weighted ? ` (${formatWeight(cell.weight ?? 1)})` : ""
+				]
+			}, cell.edgeId)) : "nothing" })]
+		}, row.id))
+	})] });
+}
+function AdjacencyMatrixPanel({ graph, mode, scanning, activeEdge, codes, weighted, name }) {
+	const matrix = adjacencyMatrix(graph, mode);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("h4", { children: "Adjacency matrix" }), /* @__PURE__ */ jsx("div", {
+		className: "algorithm-matrix-scroll",
+		children: /* @__PURE__ */ jsxs("table", {
+			className: "algorithm-matrix",
+			"aria-label": "Adjacency matrix: row is from, column is to",
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+				scope: "col",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "from / to"
+				})
+			}), graph.nodes.map((node) => /* @__PURE__ */ jsx("th", {
+				scope: "col",
+				title: name(node.id),
+				children: codes[node.id]
+			}, node.id))] }) }), /* @__PURE__ */ jsx("tbody", { children: graph.nodes.map((node, row) => /* @__PURE__ */ jsxs("tr", {
+				"data-scanning": node.id === scanning || void 0,
+				children: [/* @__PURE__ */ jsx("th", {
+					scope: "row",
+					title: name(node.id),
+					children: codes[node.id]
+				}), matrix[row].map((cell, col) => /* @__PURE__ */ jsx("td", {
+					"data-edge": cell ? true : void 0,
+					"data-active": cell && node.id === scanning && cell.edgeId === activeEdge || void 0,
+					children: cell ? weighted ? formatWeight(cell.weight ?? 1) : "1" : "·"
+				}, graph.nodes[col].id))]
+			}, node.id)) })]
+		})
+	})] });
+}
 
 //#endregion
 export { GraphAlgorithmLab };