@classytic/labs 0.1.0 → 0.3.0

package/dist/discrete/statement-logic/preset.mjs

@@ -0,0 +1,245 @@
+'use client';
+
+import { ActionButton, AssessedChoiceGroup, IconButton } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { answerOptions, expectedAnswer, validateStatementRounds } from "./core.mjs";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronLeft, ChevronRight, RotateCcw, X } from "lucide-react";
+
+//#region src/discrete/statement-logic/preset.tsx
+const DEFAULT_MESSAGES = {
+	eyebrow: "Reasoning puzzle",
+	title: "Can you test the claim?",
+	description: "Read the situation, commit to an answer, then inspect the reason.",
+	chooseAnswer: "Choose one answer",
+	check: "Check reasoning",
+	next: "Next puzzle",
+	previous: "Previous puzzle",
+	reset: "Start again",
+	context: "What we know",
+	premise: "If",
+	conclusion: "then",
+	counterexampleHint: "Find the one case where the “if” part is true but the “then” part is false.",
+	correct: "Reason confirmed",
+	tryAgain: "Look at the evidence and try another choice",
+	proposition: "A statement with a truth value",
+	openSentence: "It depends on an unknown",
+	nonStatement: "A question or command",
+	trueLabel: "True",
+	falseLabel: "False"
+};
+const DEFAULT_STATEMENT_ROUNDS = [
+	{
+		id: "classify-open",
+		kind: "classify",
+		statement: "The hidden number is greater than 8.",
+		answer: "open-sentence",
+		explanation: "Its truth depends on the hidden number, so it does not yet have one fixed truth value."
+	},
+	{
+		id: "truth-context",
+		kind: "truth",
+		context: "A box contains 3 red counters and 2 blue counters.",
+		statement: "More than half of the counters are red.",
+		answer: true,
+		explanation: "Three of the five counters are red, and 3/5 is more than one half."
+	},
+	{
+		id: "negate-all",
+		kind: "negate",
+		statement: "Every lantern is lit.",
+		choices: [
+			{
+				value: "none",
+				label: "No lantern is lit."
+			},
+			{
+				value: "one-dark",
+				label: "At least one lantern is not lit."
+			},
+			{
+				value: "one-lit",
+				label: "At least one lantern is lit."
+			}
+		],
+		answer: "one-dark",
+		explanation: "To disprove “every,” one counterexample is enough: at least one lantern must be unlit."
+	},
+	{
+		id: "implication-counterexample",
+		kind: "implication",
+		statement: "A card is blue.",
+		conclusion: "The card has a star.",
+		worlds: [
+			{
+				id: "blue-star",
+				label: "Blue card with a star",
+				premiseTrue: true,
+				conclusionTrue: true
+			},
+			{
+				id: "blue-circle",
+				label: "Blue card with a circle",
+				premiseTrue: true,
+				conclusionTrue: false
+			},
+			{
+				id: "red-circle",
+				label: "Red card with a circle",
+				premiseTrue: false,
+				conclusionTrue: false
+			}
+		],
+		answer: "blue-circle",
+		explanation: "The blue circle satisfies the premise but not the conclusion, so it is the counterexample."
+	}
+];
+function StatementLogicLab({ rounds = DEFAULT_STATEMENT_ROUNDS, startAt = 0, title, prompt, messages }) {
+	const copy = {
+		...DEFAULT_MESSAGES,
+		...messages
+	};
+	const issues = useMemo(() => validateStatementRounds(rounds), [rounds]);
+	const safeStart = Math.max(0, Math.min(rounds.length - 1, startAt));
+	const [index, setIndex] = useState(safeStart);
+	const [answers, setAnswers] = useState({});
+	const [checked, setChecked] = useState({});
+	const round = rounds[index];
+	if (!round || issues.length > 0) return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "statement-logic-activity",
+		children: [/* @__PURE__ */ jsx(Activity.Header, { children: /* @__PURE__ */ jsx(Activity.Heading, {
+			eyebrow: copy.eyebrow,
+			title: title ?? copy.title
+		}) }), /* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("strong", { children: "Activity configuration needs attention." }), /* @__PURE__ */ jsx("span", { children: issues[0] ?? "Add at least one round." })] })]
+	});
+	const selected = answers[round.id] ?? "";
+	const revealed = checked[round.id] === true;
+	const correct = selected === expectedAnswer(round);
+	const options = (round.kind === "classify" ? [
+		{
+			value: "proposition",
+			label: copy.proposition
+		},
+		{
+			value: "open-sentence",
+			label: copy.openSentence
+		},
+		{
+			value: "non-statement",
+			label: copy.nonStatement
+		}
+	] : round.kind === "truth" ? [{
+		value: "true",
+		label: copy.trueLabel
+	}, {
+		value: "false",
+		label: copy.falseLabel
+	}] : answerOptions(round)).map((choice) => ({
+		...choice,
+		tone: revealed && choice.value === selected ? correct ? "correct" : "wrong" : void 0
+	}));
+	const choose = (value) => {
+		setAnswers((current) => ({
+			...current,
+			[round.id]: value
+		}));
+		setChecked((current) => ({
+			...current,
+			[round.id]: false
+		}));
+	};
+	const reset = () => {
+		setIndex(safeStart);
+		setAnswers({});
+		setChecked({});
+	};
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "statement-logic-activity",
+		focusLayout: "compact",
+		dir: "auto",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: copy.eyebrow,
+				title: title ?? copy.title,
+				description: prompt ?? copy.description
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [/* @__PURE__ */ jsx(Activity.ItemProgress, {
+				done: index,
+				total: rounds.length,
+				label: "Complete"
+			}), /* @__PURE__ */ jsx("span", { children: round.kind.replace("-", " ") })] }),
+			/* @__PURE__ */ jsx(Activity.Workspace, { children: /* @__PURE__ */ jsx(Activity.Canvas, {
+				label: `Reasoning puzzle ${index + 1}`,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "statement-logic-scene",
+					children: [
+						round.kind === "truth" && round.context ? /* @__PURE__ */ jsxs("section", {
+							className: "statement-logic-context",
+							children: [/* @__PURE__ */ jsx("span", { children: copy.context }), /* @__PURE__ */ jsx("p", { children: round.context })]
+						}) : null,
+						round.kind === "implication" ? /* @__PURE__ */ jsxs("div", {
+							className: "statement-logic-implication",
+							"aria-label": `${copy.premise} ${round.statement}, ${copy.conclusion} ${round.conclusion}`,
+							children: [
+								/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("small", { children: copy.premise }), round.statement] }),
+								/* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }),
+								/* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsx("small", { children: copy.conclusion }), round.conclusion] })
+							]
+						}) : /* @__PURE__ */ jsx("blockquote", { children: round.statement }),
+						/* @__PURE__ */ jsx("div", {
+							className: "statement-logic-response",
+							children: /* @__PURE__ */ jsx(AssessedChoiceGroup, {
+								value: selected,
+								onChange: choose,
+								options,
+								ariaLabel: copy.chooseAnswer
+							})
+						})
+					]
+				})
+			}) }),
+			revealed ? /* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsxs("span", {
+				className: "statement-logic-verdict",
+				"data-correct": correct || void 0,
+				children: [correct ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }), correct ? copy.correct : copy.tryAgain]
+			}), /* @__PURE__ */ jsx("p", { children: round.explanation })] }) : round.kind === "implication" ? /* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Hint" }), /* @__PURE__ */ jsx("p", { children: copy.counterexampleHint })] }) : null,
+			/* @__PURE__ */ jsxs(Activity.Transport, { children: [
+				/* @__PURE__ */ jsx(IconButton, {
+					label: copy.reset,
+					onClick: reset,
+					children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					label: copy.previous,
+					onClick: () => setIndex((value) => Math.max(0, value - 1)),
+					disabled: index === 0,
+					children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "lab-transport-state",
+					children: /* @__PURE__ */ jsxs("strong", { children: [
+						index + 1,
+						" / ",
+						rounds.length
+					] })
+				}),
+				revealed && correct && index < rounds.length - 1 ? /* @__PURE__ */ jsxs(ActionButton, {
+					onClick: () => setIndex((value) => value + 1),
+					children: [copy.next, /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })]
+				}) : /* @__PURE__ */ jsxs(ActionButton, {
+					onClick: () => setChecked((current) => ({
+						...current,
+						[round.id]: true
+					})),
+					disabled: !selected,
+					children: [/* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }), copy.check]
+				})
+			] }),
+			/* @__PURE__ */ jsx(Activity.LiveRegion, { children: revealed ? `${correct ? copy.correct : copy.tryAgain}. ${round.explanation}` : "" })
+		]
+	});
+}
+
+//#endregion
+export { DEFAULT_STATEMENT_ROUNDS, StatementLogicLab };

package/dist/discrete/truth-table/preset.mjs

@@ -2,27 +2,28 @@
 
 import { Tex as Tex$1 } from "../../core/tex.mjs";
 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 { Lamp, ToggleSwitch } from "../../kit/logic-gates.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { ChallengeCard, HintLadder, RevealSolution, useChallenge, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
+import { Lamp, ToggleSwitch } from "../../kit/logic-gates/display.mjs";
 import { classify, compileLogic as compileLogic$1, equivalent, evalBool, logicToLatex as logicToLatex$1 } from "../index.mjs";
 import { useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useControlSurface, useLearner } from "@classytic/stage";
+import { Button } from "@/components/ui/button";
 
 //#region src/discrete/truth-table/preset.tsx
 /**
-* TruthTableEngine — the GENERAL authorable truth-table tool. A creator declares
+* TruthTableEngine, the GENERAL authorable truth-table tool. A creator declares
 * any propositional formula (¬ ∧ ∨ ⊕ → ↔, unicode or ASCII) and a mode; the lab
 * derives EVERYTHING from the stage logic kernel (parse → truth table → classify
-* → equivalence). No per-problem widget — one tool covers all of propositional
+* → equivalence). No per-problem widget, one tool covers all of propositional
 * logic, from "fill the implication table" to "are these two equivalent?".
 *
 * Modes:
-*   • show     — full reference table with sub-expression columns built up
+*   • show    , full reference table with sub-expression columns built up
 *                textbook-style (vars → ¬p → q∧r → … → the whole formula).
-*   • fill     — learner toggles each output cell, then Check (graded per cell).
-*   • classify — learner judges tautology / contradiction / contingency.
+*   • fill    , learner toggles each output cell, then Check (graded per cell).
+*   • classify, learner judges tautology / contradiction / contingency.
 * Pass `compare` to put a second formula beside the first + an equivalence verdict
 * (De Morgan, contrapositive, p→q ≡ ¬p∨q …). Agent-drivable via `controlId`.
 */
@@ -31,6 +32,8 @@ const CLASSES = [
 	"contradiction",
 	"contingency"
 ];
+/** 2^n rows: past this a truth table is impractical to render and unsafe for 32-bit shifts. */
+const MAX_VARS = 12;
 /** Sub-expressions in build-up (post-order) order, deduped, vars/consts excluded;
 *  the root formula is last. */
 function subformulas(n) {
@@ -53,10 +56,8 @@ function subformulas(n) {
 	return out;
 }
 const TF = (v) => /* @__PURE__ */ jsx("span", {
-	style: {
-		fontWeight: 700,
-		color: v ? "var(--stage-good)" : "var(--stage-muted)"
-	},
+	className: "logic-truth-value",
+	"data-value": v,
 	children: v ? "T" : "F"
 });
 function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = true, title = "Truth table", prompt, objectives, hints: hintList, controlId }) {
@@ -70,6 +71,27 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 	const [peeked, setPeeked] = useState(false);
 	const [live, setLive] = useState({});
 	const hints = useHints(hintList);
+	const transferQuestions = useMemo(() => [{
+		id: "classification-transfer",
+		prompt: "A formula’s final column contains at least one T and at least one F. How is it classified?",
+		choices: [
+			{
+				value: "contingency",
+				label: "contingency"
+			},
+			{
+				value: "tautology",
+				label: "tautology"
+			},
+			{
+				value: "contradiction",
+				label: "contradiction"
+			}
+		],
+		answer: "contingency",
+		explain: "A contingency is true for some assignments and false for others; tautologies and contradictions have uniform final columns."
+	}], []);
+	const challenge = useChallenge(transferQuestions);
 	const learner = useLearner();
 	const ast = compiled.ok ? compiled.ast : null;
 	const vars = useMemo(() => {
@@ -83,8 +105,9 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 		cmp
 	]);
 	const envs = useMemo(() => {
+		if (vars.length > MAX_VARS) return [];
 		const rows = [];
-		for (let m = 0; m < 1 << vars.length; m++) {
+		for (let m = 0; m < 2 ** vars.length; m++) {
 			const env = {};
 			vars.forEach((v, i) => {
 				env[v] = (m & 1 << vars.length - 1 - i) !== 0;
@@ -107,7 +130,7 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 	const cls = useMemo(() => ast ? classify(ast) : "contingency", [ast]);
 	const equiv = ast && cmp?.ok ? equivalent(ast, cmp.ast) : null;
 	const allFilledCorrect = mode === "fill" && envs.length > 0 && envs.every((_, i) => filled[i] === truth(i));
-	const solved = mode === "classify" ? guess === cls && checked : allFilledCorrect && checked;
+	const solved = (mode === "classify" ? guess === cls && checked : allFilledCorrect && checked) && challenge.allCorrect;
 	useCheckpoint({
 		solved: solved && !peeked,
 		activity: `truth-table:${formula}`,
@@ -127,6 +150,8 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 		setFilled([]);
 		setGuess(null);
 		setChecked(false);
+		setPeeked(false);
+		challenge.reset();
 	};
 	const revealAll = () => {
 		setPeeked(true);
@@ -184,35 +209,27 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 			invoke: reset
 		}
 	});
-	if (!compiled.ok) return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		children: /* @__PURE__ */ jsxs("p", {
-			className: "lab-misconception",
-			role: "status",
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					"aria-hidden": true,
-					children: "⚠"
-				}),
-				" Couldn’t parse ",
-				/* @__PURE__ */ jsx("code", { children: formula }),
-				": ",
-				compiled.error
-			]
-		})
-	});
-	const th = {
-		padding: "6px 12px",
-		fontWeight: 700,
-		borderBottom: "2px solid var(--stage-grid)",
-		textAlign: "center",
-		whiteSpace: "nowrap"
-	};
-	const td = {
-		padding: "4px 12px",
-		textAlign: "center",
-		borderBottom: "1px solid var(--stage-grid)"
-	};
+	if (!compiled.ok) return /* @__PURE__ */ jsxs(Activity.Root, { children: [/* @__PURE__ */ jsx(Activity.Header, { children: /* @__PURE__ */ jsx(Activity.Heading, {
+		eyebrow: "Propositional logic",
+		title
+	}) }), /* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Formula error" }), /* @__PURE__ */ jsxs("div", { children: [
+		"Couldn’t parse ",
+		/* @__PURE__ */ jsx("code", { children: formula }),
+		": ",
+		compiled.error
+	] })] })] });
+	if (vars.length > MAX_VARS) return /* @__PURE__ */ jsxs(Activity.Root, { children: [/* @__PURE__ */ jsx(Activity.Header, { children: /* @__PURE__ */ jsx(Activity.Heading, {
+		eyebrow: "Propositional logic",
+		title
+	}) }), /* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Table limit" }), /* @__PURE__ */ jsxs("div", { children: [
+		"This truth table has ",
+		vars.length,
+		" variables (",
+		2 ** vars.length,
+		" rows). Keep it to ",
+		MAX_VARS,
+		" or fewer."
+	] })] })] });
 	const finalIdx = cols.length - 1;
 	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		!compare && ast && vars.length >= 1 && vars.length <= 4 && (() => {
@@ -227,40 +244,31 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 			});
 			const sw = 54, lampX = vars.length * sw + 56;
 			return /* @__PURE__ */ jsxs("div", {
-				style: {
-					display: "flex",
-					alignItems: "center",
-					gap: 12,
-					flexWrap: "wrap",
-					margin: "8px 0",
-					padding: "6px 12px",
-					borderRadius: 10,
-					background: "color-mix(in oklab, var(--stage-accent) 5%, var(--stage-bg))",
-					border: "1px solid var(--stage-grid)"
-				},
+				className: "logic-live-evaluator",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						style: {
-							fontSize: 12.5,
-							fontWeight: 600,
-							color: "var(--stage-muted)"
-						},
+						className: "logic-live-label",
 						children: "try it:"
 					}),
 					/* @__PURE__ */ jsxs("svg", {
+						className: "logic-live-svg",
 						viewBox: `0 0 ${lampX + 56} 56`,
-						style: {
-							height: 52,
-							maxWidth: lampX + 56
-						},
 						role: "img",
 						"aria-label": `inputs ${vars.map((v) => `${v}=${live[v] ? "T" : "F"}`).join(", ")}, output ${liveOut ? "true" : "false"}`,
 						children: [
 							vars.map((v, i) => /* @__PURE__ */ jsxs("g", {
+								className: "logic-live-toggle",
 								onClick: () => flip(v),
-								style: { cursor: "pointer" },
+								onKeyDown: (event) => {
+									if (event.key === "Enter" || event.key === " ") {
+										event.preventDefault();
+										flip(v);
+									}
+								},
+								tabIndex: 0,
 								role: "button",
 								"aria-pressed": !!live[v],
+								"aria-label": `toggle ${v}, currently ${live[v] ? "true" : "false"}`,
 								children: [/* @__PURE__ */ jsx("rect", {
 									x: i * sw,
 									y: 6,
@@ -294,48 +302,28 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 						]
 					}),
 					/* @__PURE__ */ jsx("span", {
-						style: {
-							fontWeight: 800,
-							color: liveOut ? "var(--stage-good)" : "var(--stage-muted)"
-						},
+						className: "logic-live-output",
+						"data-value": liveOut,
 						children: liveOut ? "TRUE" : "FALSE"
 					})
 				]
 			});
 		})(),
 		/* @__PURE__ */ jsx("div", {
-			style: {
-				overflowX: "auto",
-				borderRadius: 12,
-				border: "1px solid var(--stage-grid)",
-				margin: "10px 0"
-			},
+			className: "logic-table-scroll",
 			children: /* @__PURE__ */ jsxs("table", {
-				style: {
-					borderCollapse: "collapse",
-					width: "100%",
-					fontVariantNumeric: "tabular-nums"
-				},
+				className: "logic-truth-table",
 				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [vars.map((v) => /* @__PURE__ */ jsx("th", {
-					style: {
-						...th,
-						color: "var(--stage-accent)"
-					},
+					"data-variable": true,
 					children: v
 				}, v)), cols.map((c, ci) => /* @__PURE__ */ jsx("th", {
-					style: {
-						...th,
-						borderLeft: ci === 0 ? "2px solid var(--stage-grid)" : void 0,
-						background: ci === finalIdx ? "color-mix(in oklab, var(--stage-accent) 8%, transparent)" : void 0
-					},
+					"data-expression-start": ci === 0,
+					"data-final": ci === finalIdx,
 					children: /* @__PURE__ */ jsx(Tex$1, { tex: logicToLatex$1(c) })
 				}, ci))] }) }), /* @__PURE__ */ jsx("tbody", { children: envs.map((env, i) => /* @__PURE__ */ jsxs("tr", {
 					onMouseEnter: () => setHighlight(i),
-					style: { background: highlight === i ? "color-mix(in oklab, var(--stage-accent) 12%, transparent)" : void 0 },
-					children: [vars.map((v) => /* @__PURE__ */ jsx("td", {
-						style: td,
-						children: TF(env[v])
-					}, v)), cols.map((c, ci) => {
+					"data-highlighted": highlight === i,
+					children: [vars.map((v) => /* @__PURE__ */ jsx("td", { children: TF(env[v]) }, v)), cols.map((c, ci) => {
 						const val = evalBool(c, env);
 						const isFinal = ci === finalIdx && !compare;
 						if (mode === "fill" && isFinal) {
@@ -343,34 +331,23 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 							const right = checked && f === val;
 							const wrong = checked && f != null && f !== val;
 							return /* @__PURE__ */ jsx("td", {
-								style: {
-									...td,
-									borderLeft: ci === 0 ? "2px solid var(--stage-grid)" : void 0
-								},
-								children: /* @__PURE__ */ jsx("button", {
+								"data-expression-start": ci === 0,
+								children: /* @__PURE__ */ jsx(Button, {
 									type: "button",
+									variant: "outline",
+									size: "icon-sm",
 									onClick: () => cycle(i),
 									"aria-label": `row ${i + 1} output`,
-									style: {
-										minWidth: 30,
-										padding: "2px 8px",
-										borderRadius: 7,
-										fontWeight: 700,
-										cursor: peeked ? "default" : "pointer",
-										border: `1.5px solid ${right ? "var(--stage-good)" : wrong ? "var(--stage-danger)" : "var(--stage-grid)"}`,
-										background: right ? "color-mix(in oklab, var(--stage-good) 16%, transparent)" : wrong ? "color-mix(in oklab, var(--stage-danger) 14%, transparent)" : "transparent",
-										color: f == null ? "var(--stage-muted)" : f ? "var(--stage-good)" : "var(--stage-fg)"
-									},
+									className: "logic-answer-cell",
+									"data-state": right ? "correct" : wrong ? "wrong" : f == null ? "empty" : f ? "true" : "false",
+									disabled: peeked,
 									children: f == null ? "?" : f ? "T" : "F"
 								})
 							}, ci);
 						}
 						return /* @__PURE__ */ jsx("td", {
-							style: {
-								...td,
-								borderLeft: ci === 0 ? "2px solid var(--stage-grid)" : void 0,
-								background: isFinal ? "color-mix(in oklab, var(--stage-accent) 5%, transparent)" : void 0
-							},
+							"data-expression-start": ci === 0,
+							"data-final": isFinal,
 							children: TF(val)
 						}, ci);
 					})]
@@ -381,15 +358,13 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 			className: "lab-bar",
 			children: /* @__PURE__ */ jsx(StatusPill, {
 				ok: equiv,
-				children: equiv ? "Equivalent ✓ — identical columns" : "NOT equivalent — columns differ"
+				children: equiv ? "Equivalent ✓, identical columns" : "NOT equivalent, columns differ"
 			})
 		})
 	] });
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		objectives,
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+	const controls = /* @__PURE__ */ jsxs("div", {
+		className: "lab-activity-fields",
+		children: [
 			!compare && /* @__PURE__ */ jsx(Fragment$1, { children: [
 				"show",
 				"fill",
@@ -399,7 +374,6 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 				onClick: () => {
 					setMode(m);
 					reset();
-					setPeeked(false);
 				},
 				children: m
 			}, m)) }),
@@ -419,19 +393,21 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 				}),
 				checked && /* @__PURE__ */ jsx(StatusPill, {
 					ok: guess === cls,
-					children: guess === cls ? `✓ ${cls}` : `Not quite — it’s a ${cls}`
+					children: guess === cls ? `✓ ${cls}` : `Not quite, it’s a ${cls}`
 				})
 			] }),
 			!compare && mode === "fill" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CheckButton, {
 				onClick: check,
-				disabled: filled.filter((x) => x != null).length === 0,
+				disabled: filled.filter((x) => x != null).length !== envs.length,
 				children: "Check"
 			}), checked && /* @__PURE__ */ jsx(StatusPill, {
 				ok: allFilledCorrect,
-				children: allFilledCorrect ? "All correct ✓" : "Some cells are off — fix the red ones"
+				children: allFilledCorrect ? "All correct ✓" : "Some cells are off, fix the red ones"
 			})] })
-		] }),
-		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [!compare && mode !== "show" && /* @__PURE__ */ jsx(RevealSolution, {
+		]
+	});
+	const footer = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		!compare && mode !== "show" && /* @__PURE__ */ jsx(RevealSolution, {
 			available: checked && !solved,
 			solution: mode === "classify" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				"This formula is a ",
@@ -447,8 +423,51 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 				" when p is true and q is false."
 			] }),
 			onReveal: revealAll
-		}), /* @__PURE__ */ jsx(HintLadder, { hints })] }),
-		children: figure
+		}),
+		!compare && mode !== "show" && /* @__PURE__ */ jsx(ChallengeCard, {
+			questions: transferQuestions,
+			state: challenge,
+			title: "Transfer the classification rule"
+		}),
+		/* @__PURE__ */ jsx(HintLadder, { hints })
+	] });
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "discrete-truth-table-activity",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Propositional logic",
+				title,
+				description: prompt ?? "Change inputs, complete or inspect the output column, and connect its pattern to logical classification."
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: compare ? equiv ? "Equivalent" : "Not equivalent" : mode === "classify" && checked ? cls : mode }),
+				/* @__PURE__ */ jsxs("span", { children: [vars.length, " variables"] }),
+				/* @__PURE__ */ jsxs("span", { children: [envs.length, " rows"] })
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Truth table and live evaluator",
+				children: figure
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: "Truth-table mode and grading",
+				children: controls
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: compare ? "Equivalent formulas produce identical final columns for every assignment." : mode === "fill" ? "Each row is one complete input assignment; the final column records the formula’s result." : "Classification depends on whether the final column is always true, always false, or mixed." })] }),
+			/* @__PURE__ */ jsx("section", {
+				className: "lab-authored-task",
+				"aria-label": "Truth-table explanation and support",
+				children: footer
+			}),
+			!compare && mode !== "show" ? /* @__PURE__ */ jsx(Activity.LiveRegion, { children: mode === "fill" ? `${filled.filter((value) => value != null).length} of ${envs.length} output cells completed.` : guess ? `${guess} selected for classification.` : "Choose a classification." }) : null,
+			/* @__PURE__ */ jsx(Activity.Transport, { children: /* @__PURE__ */ jsxs("div", {
+				className: "lab-transport-state",
+				children: [/* @__PURE__ */ jsx("strong", { children: checked ? "Attempt checked" : "Evaluate every assignment" }), /* @__PURE__ */ jsxs("span", { children: [
+					filled.filter((value) => value != null).length,
+					" of ",
+					envs.length,
+					" outputs"
+				] })]
+			}) })
+		]
 	});
 }