@classytic/labs 0.2.0 → 0.3.0

package/dist/discrete/venn/preset.mjs

@@ -1,12 +1,13 @@
 'use client';
 
-import { CheckButton, Chip, StatusPill } from "../../kit/controls.mjs";
-import { ControlBar, LabFrame } from "../../kit/frame.mjs";
-import { HintLadder, RevealSolution, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
+import { CheckButton, Chip, IconButton, StatusPill } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { ChallengeCard, HintLadder, RevealSolution, useChallenge, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
 import { inclusionExclusion } from "../core/inclusionExclusion.mjs";
 import { useId, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { compileLogic, useControlSurface, useLearner } from "@classytic/stage";
+import { RotateCcw } from "lucide-react";
 
 //#region src/discrete/venn/preset.tsx
 /**
@@ -177,6 +178,27 @@ function VennSetBoardLab({ sets, mode: mode0 = "explore", target, title = "Sets
 	const [peeked, setPeeked] = useState(false);
 	const hints = useHints(hintList);
 	const learner = useLearner();
+	const transferQuestions = useMemo(() => [{
+		id: "inclusion-exclusion-overlap",
+		prompt: "Why does inclusion–exclusion subtract the intersection after adding two set sizes?",
+		choices: [
+			{
+				value: "double-counted",
+				label: "members in both sets were counted twice"
+			},
+			{
+				value: "outside",
+				label: "members outside both sets must be removed"
+			},
+			{
+				value: "equal-size",
+				label: "the two sets must be made equal in size"
+			}
+		],
+		answer: "double-counted",
+		explain: "Adding |A| and |B| counts every shared member once through A and once through B, so one copy of the overlap must be subtracted."
+	}], []);
+	const challenge = useChallenge(transferQuestions);
 	const sigOf = (m) => sets.map((s) => s.members.includes(m) ? "1" : "0").join("");
 	const regions = useMemo(() => {
 		const counts = {};
@@ -199,9 +221,9 @@ function VennSetBoardLab({ sets, mode: mode0 = "explore", target, title = "Sets
 		geo
 	]);
 	const ie = useMemo(() => inclusionExclusion(sets.map((s) => s.members)), [sets]);
+	const targetExpr = target ?? names.join(" ∩ ");
 	const targetKeys = useMemo(() => {
-		if (!target) return /* @__PURE__ */ new Set();
-		const c = compileLogic(normalizeSetExpr(target));
+		const c = compileLogic(normalizeSetExpr(targetExpr));
 		if (!c.ok) return /* @__PURE__ */ new Set();
 		const out = /* @__PURE__ */ new Set();
 		regions.forEach(({ sig }) => {
@@ -213,13 +235,13 @@ function VennSetBoardLab({ sets, mode: mode0 = "explore", target, title = "Sets
 		});
 		return out;
 	}, [
-		target,
+		targetExpr,
 		regions,
 		names
 	]);
 	const correct = useMemo(() => shaded.size === targetKeys.size && [...shaded].every((k) => targetKeys.has(k)), [shaded, targetKeys]);
 	useCheckpoint({
-		solved: mode === "shade" && checked && correct && !peeked,
+		solved: mode === "shade" && checked && correct && !peeked && challenge.allCorrect,
 		activity: `venn:${title}`,
 		hintsUsed: hints.count
 	});
@@ -233,8 +255,11 @@ function VennSetBoardLab({ sets, mode: mode0 = "explore", target, title = "Sets
 	};
 	const check = () => setChecked(true);
 	const reset = () => {
+		setMode(mode0);
 		setShaded(/* @__PURE__ */ new Set());
 		setChecked(false);
+		setPeeked(false);
+		challenge.reset();
 	};
 	const reveal = () => {
 		setPeeked(true);
@@ -274,41 +299,22 @@ function VennSetBoardLab({ sets, mode: mode0 = "explore", target, title = "Sets
 			invoke: reset
 		}
 	});
-	if (n < 2 || n > 3) return /* @__PURE__ */ jsx(LabFrame, {
+	if (n < 2 || n > 3) return /* @__PURE__ */ jsxs(Activity.Root, { children: [/* @__PURE__ */ jsx(Activity.Header, { children: /* @__PURE__ */ jsx(Activity.Heading, {
+		eyebrow: "Set relationships",
 		title,
-		prompt,
-		children: /* @__PURE__ */ jsxs("p", {
-			className: "lab-misconception",
-			role: "status",
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					"aria-hidden": true,
-					children: "⚠"
-				}),
-				" The Venn lab supports 2 or 3 sets; you gave ",
-				n,
-				". Reduce the number of sets."
-			]
-		})
-	});
+		description: prompt
+	}) }), /* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Configuration" }), /* @__PURE__ */ jsxs("div", { children: [
+		"The Venn lab supports 2 or 3 sets; you gave ",
+		n,
+		". Reduce the number of sets."
+	] })] })] });
 	const [vx, vy, vw, vh] = geo.vb;
 	const showShade = mode === "shade";
 	const figure = /* @__PURE__ */ jsx("div", {
-		style: {
-			display: "flex",
-			justifyContent: "center",
-			borderRadius: 14,
-			background: "var(--stage-bg)",
-			border: "1px solid var(--stage-grid)",
-			padding: 12
-		},
+		className: "venn-scene",
 		children: /* @__PURE__ */ jsxs("svg", {
+			className: "venn-svg",
 			viewBox: `${vx} ${vy} ${vw} ${vh}`,
-			style: {
-				width: "100%",
-				maxWidth: 360,
-				height: "auto"
-			},
 			role: "img",
 			"aria-label": `Venn diagram of ${names.join(", ")}`,
 			children: [
@@ -330,21 +336,17 @@ function VennSetBoardLab({ sets, mode: mode0 = "explore", target, title = "Sets
 					strokeWidth: 2
 				}, i)),
 				geo.labels.map((l, i) => /* @__PURE__ */ jsx("text", {
+					className: "venn-svg-label",
 					x: l.x,
 					y: l.y,
 					fill: PALETTE[i],
 					fontSize: 15,
 					fontWeight: 800,
 					textAnchor: "middle",
-					style: {
-						paintOrder: "stroke",
-						stroke: "var(--stage-bg)",
-						strokeWidth: 4,
-						strokeLinejoin: "round"
-					},
 					children: names[i]
 				}, i)),
 				mode === "explore" && regions.filter((r) => r.count > 0 && r.sig !== "0".repeat(n)).map((r) => /* @__PURE__ */ jsx("text", {
+					className: "venn-svg-count",
 					x: r.centroid[0],
 					y: r.centroid[1],
 					fill: "var(--stage-fg)",
@@ -352,122 +354,79 @@ function VennSetBoardLab({ sets, mode: mode0 = "explore", target, title = "Sets
 					fontWeight: 700,
 					textAnchor: "middle",
 					dominantBaseline: "central",
-					style: {
-						paintOrder: "stroke",
-						stroke: "var(--stage-bg)",
-						strokeWidth: 4.5,
-						strokeLinejoin: "round"
-					},
 					children: r.count
 				}, r.sig))
 			]
 		})
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		objectives,
-		aside: mode === "explore" ? /* @__PURE__ */ jsxs("div", {
-			style: {
-				padding: "10px 14px",
-				borderRadius: 10,
-				border: "1px solid var(--stage-grid)",
-				display: "grid",
-				gap: 6
-			},
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					style: {
-						fontSize: 12,
-						color: "var(--stage-muted)"
-					},
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "lab-field-label",
-						children: "Inclusion–exclusion"
-					}), names.map((nm, i) => /* @__PURE__ */ jsxs("span", {
-						style: { marginRight: 12 },
-						children: [
-							/* @__PURE__ */ jsx("b", { children: IE_LETTERS[i] }),
-							" = ",
-							nm
-						]
-					}, i))]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "flex",
-						flexWrap: "wrap",
-						alignItems: "baseline",
-						gap: "4px 7px",
-						fontWeight: 600
-					},
-					children: [ie.terms.map((t, i) => /* @__PURE__ */ jsxs("span", {
-						style: { color: t.sign < 0 ? "var(--stage-danger)" : "var(--stage-fg)" },
-						children: [
-							i > 0 ? t.sign < 0 ? "− " : "+ " : "",
-							"|",
-							t.indices.map((j) => IE_LETTERS[j]).join("∩"),
-							"|"
-						]
-					}, i)), /* @__PURE__ */ jsxs("span", {
-						style: {
-							fontWeight: 800,
-							marginLeft: 4
-						},
-						children: [
-							"= |",
-							names.map((_, i) => IE_LETTERS[i]).join("∪"),
-							"|"
-						]
-					})]
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "flex",
-						flexWrap: "wrap",
-						alignItems: "baseline",
-						gap: "4px 7px",
-						fontVariantNumeric: "tabular-nums",
-						color: "var(--stage-muted)"
-					},
-					children: [ie.terms.map((t, i) => /* @__PURE__ */ jsxs("span", {
-						style: { color: t.sign < 0 ? "var(--stage-danger)" : "inherit" },
-						children: [i > 0 ? t.sign < 0 ? "− " : "+ " : "", t.size]
-					}, i)), /* @__PURE__ */ jsxs("span", {
-						style: {
-							fontWeight: 800,
-							marginLeft: 4,
-							color: "var(--stage-good)"
-						},
-						children: ["= ", ie.unionSize]
-					})]
-				})
-			]
-		}) : void 0,
-		controls: mode === "shade" ? /* @__PURE__ */ jsxs(ControlBar, { children: [
+	const aside = mode === "explore" ? /* @__PURE__ */ jsxs("div", {
+		className: "venn-inclusion-panel",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "venn-set-key",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "lab-field-label",
+					children: "Inclusion–exclusion"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "venn-set-key-list",
+					children: names.map((nm, i) => /* @__PURE__ */ jsxs("span", { children: [
+						/* @__PURE__ */ jsx("b", { children: IE_LETTERS[i] }),
+						" = ",
+						nm
+					] }, i))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "venn-equation",
+				children: [ie.terms.map((t, i) => /* @__PURE__ */ jsxs("span", {
+					"data-negative": t.sign < 0,
+					children: [
+						i > 0 ? t.sign < 0 ? "− " : "+ " : "",
+						"|",
+						t.indices.map((j) => IE_LETTERS[j]).join("∩"),
+						"|"
+					]
+				}, i)), /* @__PURE__ */ jsxs("span", {
+					className: "venn-equation-result",
+					children: [
+						"= |",
+						names.map((_, i) => IE_LETTERS[i]).join("∪"),
+						"|"
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "venn-equation venn-equation-numeric",
+				children: [ie.terms.map((t, i) => /* @__PURE__ */ jsxs("span", {
+					"data-negative": t.sign < 0,
+					children: [i > 0 ? t.sign < 0 ? "− " : "+ " : "", t.size]
+				}, i)), /* @__PURE__ */ jsxs("span", {
+					className: "venn-equation-total",
+					children: ["= ", ie.unionSize]
+				})]
+			})
+		]
+	}) : void 0;
+	const controls = mode === "shade" ? /* @__PURE__ */ jsxs("div", {
+		className: "lab-activity-fields",
+		children: [
 			/* @__PURE__ */ jsxs("span", {
-				style: {
-					fontWeight: 600,
-					marginRight: 4
-				},
-				children: ["Shade: ", target]
+				className: "venn-shade-target",
+				children: ["Shade: ", targetExpr]
 			}),
 			regions.map((r) => /* @__PURE__ */ jsx(Chip, {
 				selected: shaded.has(r.sig),
 				onClick: () => toggle(r.sig),
 				children: regionLabel(r.sig, names)
 			}, r.sig)),
-			/* @__PURE__ */ jsx(CheckButton, {
-				onClick: check,
-				disabled: shaded.size === 0,
-				children: "Check"
-			}),
 			checked && /* @__PURE__ */ jsx(StatusPill, {
 				ok: correct,
 				children: correct ? "✓ Exactly right" : "Not quite, adjust the regions"
 			})
-		] }) : void 0,
-		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [mode === "shade" && /* @__PURE__ */ jsx(RevealSolution, {
+		]
+	}) : void 0;
+	const footer = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		mode === "shade" && /* @__PURE__ */ jsx(RevealSolution, {
 			available: checked && !correct,
 			solution: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				"Shade: ",
@@ -475,8 +434,58 @@ function VennSetBoardLab({ sets, mode: mode0 = "explore", target, title = "Sets
 				"."
 			] }),
 			onReveal: reveal
-		}), /* @__PURE__ */ jsx(HintLadder, { hints })] }),
-		children: figure
+		}),
+		mode === "shade" && /* @__PURE__ */ jsx(ChallengeCard, {
+			questions: transferQuestions,
+			state: challenge,
+			title: "Explain the overlap correction"
+		}),
+		/* @__PURE__ */ jsx(HintLadder, { hints })
+	] });
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "discrete-venn-activity",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Set relationships",
+				title,
+				description: prompt ?? "Inspect membership regions or build the region described by a set expression."
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: mode === "shade" ? checked ? correct ? "Expression matched" : "Revise regions" : `Shade ${targetExpr}` : `Union ${ie.unionSize}` }),
+				/* @__PURE__ */ jsxs("span", { children: [n, " sets"] }),
+				/* @__PURE__ */ jsx("span", { children: mode === "shade" ? `${shaded.size} regions selected` : "inclusion–exclusion" })
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Venn set diagram",
+				children: figure
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: mode === "shade" ? "Set-expression regions" : "Inclusion–exclusion evidence",
+				children: mode === "shade" ? controls : aside
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: mode === "shade" ? checked && correct ? `The selected regions are exactly ${targetExpr}.` : "Set operations describe membership conditions; each visual region has one unique membership signature." : `Adding individual set sizes overcounts shared members; alternating intersection terms corrects the union to ${ie.unionSize}.` })] }),
+			/* @__PURE__ */ jsx("section", {
+				className: "lab-authored-task",
+				"aria-label": "Venn explanation and support",
+				children: footer
+			}),
+			mode === "shade" ? /* @__PURE__ */ jsx(Activity.LiveRegion, { children: checked ? correct ? "The selected regions match the target expression." : "The selected regions do not yet match the target expression." : `${shaded.size} of ${regions.length} regions selected for ${targetExpr}.` }) : null,
+			/* @__PURE__ */ jsxs(Activity.Transport, { children: [
+				/* @__PURE__ */ jsx(IconButton, {
+					label: "Reset Venn activity",
+					onClick: reset,
+					children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "lab-transport-state",
+					children: [/* @__PURE__ */ jsx("strong", { children: mode === "shade" ? "Build the expression" : "Inspect the overlap" }), /* @__PURE__ */ jsxs("span", { children: [n, " sets"] })]
+				}),
+				mode === "shade" ? /* @__PURE__ */ jsx(CheckButton, {
+					onClick: check,
+					disabled: shaded.size === 0,
+					children: "Check"
+				}) : null
+			] })
+		]
 	});
 }
 

package/dist/discrete/visuals/reasoning-scenes.mjs

@@ -0,0 +1,236 @@
+'use client';
+
+import { Figure, HUE, STROKE, figUrl, tint, useFigureId } from "../../kit/figure/figure.mjs";
+import { FigText } from "../../kit/figure/text.mjs";
+import { Particle } from "../../kit/figure/body.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/discrete/visuals/reasoning-scenes.tsx
+function DominoInductionScene({ first, last, reached, base, bridge }) {
+	const uid = useFigureId();
+	const values = Array.from({ length: last - first + 1 }, (_, index) => first + index);
+	const gap = 74;
+	const startX = 50;
+	const width = Math.max(620, startX * 2 + (values.length - 1) * gap + 50);
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: `0 0 ${width} 210`,
+		domain: "math",
+		className: "reasoning-figure",
+		label: `${values.length} induction dominoes; base case ${base ? "established" : "missing"}; inductive bridge ${bridge ? "established" : "missing"}; ${reached.size} cases reached`,
+		preserveAspectRatio: "xMidYMid meet",
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
+				id: `${uid}-induction-arrow`,
+				markerWidth: "8",
+				markerHeight: "8",
+				refX: "7",
+				refY: "4",
+				orient: "auto",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M 0 0 L 8 4 L 0 8 Z",
+					fill: bridge ? HUE.good : HUE.soft
+				})
+			}) }),
+			/* @__PURE__ */ jsx(FigText, {
+				x: startX,
+				y: 36,
+				size: "note",
+				tone: base ? "good" : "soft",
+				children: base ? "ANCHOR PROVED" : "START HERE"
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: width - 50,
+				y: 36,
+				anchor: "end",
+				size: "note",
+				tone: bridge ? "good" : "soft",
+				children: bridge ? "RULE CONNECTED" : "BRIDGE REQUIRED"
+			}),
+			values.slice(0, -1).map((value, index) => /* @__PURE__ */ jsx("path", {
+				d: `M ${startX + index * gap + 45} 112 H ${startX + (index + 1) * gap - 8}`,
+				fill: "none",
+				stroke: bridge ? HUE.good : HUE.soft,
+				strokeWidth: STROKE.edge,
+				strokeDasharray: bridge ? void 0 : "6 6",
+				markerEnd: figUrl(uid, "induction-arrow")
+			}, `link-${value}`)),
+			values.map((value, index) => {
+				const active = reached.has(value);
+				const x = startX + index * gap;
+				return /* @__PURE__ */ jsxs("g", { children: [
+					/* @__PURE__ */ jsx("circle", {
+						cx: x + 24,
+						cy: 112,
+						r: 24,
+						fill: active ? tint(HUE.good, 18) : tint(HUE.soft, 12),
+						stroke: active ? HUE.good : HUE.soft,
+						strokeWidth: active ? STROKE.bold : STROKE.edge
+					}),
+					/* @__PURE__ */ jsxs(FigText, {
+						x: x + 24,
+						y: 112,
+						anchor: "middle",
+						baseline: "middle",
+						tone: active ? "good" : "soft",
+						halo: false,
+						children: [
+							"P(",
+							value,
+							")"
+						]
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: x + 24,
+						y: 156,
+						anchor: "middle",
+						size: "note",
+						tone: active ? "good" : "soft",
+						children: active ? "justified" : value === first ? "base" : "waiting"
+					})
+				] }, value);
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: width / 2,
+				y: 192,
+				anchor: "middle",
+				tone: "soft",
+				children: "Base case starts the chain; the inductive step carries truth from k to k + 1."
+			})
+		]
+	});
+}
+function PigeonholePackingScene({ occupancy, target, labels }) {
+	const columns = occupancy.length;
+	const boxW = 112;
+	const width = Math.max(560, 48 + columns * 130);
+	const least = Math.min(...occupancy);
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: `0 0 ${width} 220`,
+		domain: "math",
+		className: "reasoning-figure",
+		label: `${occupancy.reduce((a, b) => a + b, 0)} items spread across ${columns} categories; target occupancy ${target}`,
+		preserveAspectRatio: "xMidYMid meet",
+		children: [/* @__PURE__ */ jsx(FigText, {
+			x: width / 2,
+			y: 28,
+			anchor: "middle",
+			size: "title",
+			children: "Spread evenly until one category must overflow"
+		}), occupancy.map((count, index) => {
+			const x = 28 + index * 130;
+			const forced = count >= target;
+			const next = count === least && !occupancy.some((value) => value >= target);
+			return /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx("rect", {
+					x,
+					y: 68,
+					width: boxW,
+					height: 112,
+					rx: 14,
+					fill: forced ? tint(HUE.good, 13) : next ? tint(HUE[1], 10) : tint(HUE.soft, 8),
+					stroke: forced ? HUE.good : next ? HUE[1] : HUE.soft,
+					strokeWidth: STROKE.edge
+				}),
+				/* @__PURE__ */ jsx(FigText, {
+					x: x + 12,
+					y: 90,
+					size: "note",
+					tone: forced ? "good" : "soft",
+					children: labels?.[index] ?? `category ${index + 1}`
+				}),
+				Array.from({ length: count }, (_, item) => /* @__PURE__ */ jsx(Particle, {
+					x: x + 24 + item % 4 * 22,
+					y: 154 - Math.floor(item / 4) * 24,
+					r: 7,
+					color: forced ? HUE.good : HUE[1]
+				}, item)),
+				/* @__PURE__ */ jsxs(FigText, {
+					x: x + boxW - 12,
+					y: 90,
+					anchor: "end",
+					size: "measure",
+					tone: forced ? "good" : "ink",
+					children: [
+						count,
+						"/",
+						target
+					]
+				}),
+				next ? /* @__PURE__ */ jsx(FigText, {
+					x: x + boxW / 2,
+					y: 204,
+					anchor: "middle",
+					size: "note",
+					tone: "hue-1",
+					children: "next emptiest"
+				}) : null
+			] }, index);
+		})]
+	});
+}
+function RecurrenceDependencyScene({ terms, revealed, active, dependencies }) {
+	const cellW = 68;
+	const width = Math.max(620, 52 + terms.length * 84);
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: `0 0 ${width} 220`,
+		domain: "math",
+		className: "reasoning-figure",
+		label: `${revealed} of ${terms.length} recurrence terms known; term ${active} depends on ${[...dependencies].join(" and ")}`,
+		preserveAspectRatio: "xMidYMid meet",
+		children: [
+			dependencies.has(active - 1) && dependencies.has(active - 2) ? /* @__PURE__ */ jsx("path", {
+				d: `M ${46 + (active - 2) * 84 + cellW / 2} 104 Q ${46 + active * 84} 24 ${46 + active * 84 + cellW / 2} 76 M ${46 + (active - 1) * 84 + cellW / 2} 104 Q ${46 + active * 84} 48 ${46 + active * 84 + cellW / 2} 76`,
+				fill: "none",
+				stroke: HUE.good,
+				strokeWidth: STROKE.edge
+			}) : null,
+			terms.map((term, index) => {
+				const x = 46 + index * 84;
+				const known = index < revealed;
+				const source = dependencies.has(index);
+				return /* @__PURE__ */ jsxs("g", { children: [
+					/* @__PURE__ */ jsx("rect", {
+						x,
+						y: 76,
+						width: cellW,
+						height: 76,
+						rx: 12,
+						fill: source ? tint(HUE.good, 16) : index === active ? tint(HUE[1], 16) : known ? tint(HUE[1], 8) : tint(HUE.soft, 7),
+						stroke: source ? HUE.good : index === active ? HUE[1] : HUE.soft,
+						strokeWidth: index === active ? STROKE.bold : STROKE.edge,
+						strokeDasharray: !known && index !== active ? "5 5" : void 0
+					}),
+					/* @__PURE__ */ jsxs(FigText, {
+						x: x + cellW / 2,
+						y: 98,
+						anchor: "middle",
+						size: "note",
+						tone: source ? "good" : index === active ? "hue-1" : "soft",
+						halo: false,
+						children: ["a", index]
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: x + cellW / 2,
+						y: 126,
+						anchor: "middle",
+						baseline: "middle",
+						size: "measure",
+						tone: source ? "good" : index === active ? "hue-1" : known ? "ink" : "soft",
+						halo: false,
+						children: known ? term : "?"
+					})
+				] }, index);
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: width / 2,
+				y: 188,
+				anchor: "middle",
+				tone: "soft",
+				children: "Green terms are the inputs; the outlined term is the result being built."
+			})
+		]
+	});
+}
+
+//#endregion
+export { DominoInductionScene, PigeonholePackingScene, RecurrenceDependencyScene };