@classytic/labs 0.2.0 → 0.3.0

package/dist/geography/cycle-lab/preset.mjs

@@ -1,12 +1,14 @@
 'use client';
 
-import { Chip, StatusPill } from "../../kit/controls.mjs";
-import { ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
-import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { Chip, IconButton, StatusPill } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { Field } from "../../kit/frame.mjs";
+import { ChallengeCard, useChallenge, useCheckpoint } from "../../kit/pedagogy.mjs";
 import { CycleDiagram, edgeKey } from "../../kit/cycle.mjs";
 import { WATER_CYCLE } from "../cycles.mjs";
 import { useMemo, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RotateCcw } from "lucide-react";
 
 //#region src/geography/cycle-lab/preset.tsx
 /**
@@ -53,9 +55,25 @@ function CycleLab({ nodes = WATER_CYCLE.nodes, edges = WATER_CYCLE.edges, challe
 function TraceCycle({ nodes, edges, size, title, prompt, objectives, activity }) {
 	const [active, setActive] = useState(null);
 	const [seen, setSeen] = useState(/* @__PURE__ */ new Set());
-	const [reported, setReported] = useState(false);
+	const firstEdge = edges[0];
+	const processChoices = [...new Set(edges.map((edge) => edge.label).filter((label) => !!label))];
+	const transfer = firstEdge ? [{
+		id: "direct-process",
+		prompt: `Which process directly moves ${nodes.find((node) => node.id === firstEdge.from)?.label ?? firstEdge.from} to ${nodes.find((node) => node.id === firstEdge.to)?.label ?? firstEdge.to}?`,
+		choices: [...new Set([
+			firstEdge.label ?? "an unlabelled transition",
+			...processChoices.filter((label) => label !== firstEdge.label),
+			"a process not shown"
+		])].slice(0, 4).map((label) => ({
+			value: label,
+			label
+		})),
+		answer: firstEdge.label ?? "an unlabelled transition",
+		explain: "A cycle is a directed system: the arrow identifies the destination and its label identifies the process causing that transfer."
+	}] : [];
+	const challenge = useChallenge(transfer);
 	useCheckpoint({
-		solved: reported,
+		solved: seen.size >= nodes.length && challenge.allCorrect,
 		activity
 	});
 	const labelOf = (id) => nodes.find((n) => n.id === id)?.label ?? "";
@@ -63,18 +81,16 @@ function TraceCycle({ nodes, edges, size, title, prompt, objectives, activity })
 	const click = (id) => {
 		setActive(id);
 		setSeen((s) => {
-			const next = new Set(s).add(id);
-			if (next.size >= nodes.length) setReported(true);
-			return next;
+			return new Set(s).add(id);
 		});
 	};
-	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		style: {
-			borderRadius: 14,
-			background: "var(--stage-bg)",
-			border: "1px solid var(--stage-grid)",
-			padding: 8
-		},
+	const reset = () => {
+		setActive(null);
+		setSeen(/* @__PURE__ */ new Set());
+		challenge.reset();
+	};
+	const figure = /* @__PURE__ */ jsx("div", {
+		className: "geography-cycle-scene",
 		children: /* @__PURE__ */ jsx(CycleDiagram, {
 			nodes,
 			edges,
@@ -83,38 +99,18 @@ function TraceCycle({ nodes, edges, size, title, prompt, objectives, activity })
 			onNodeClick: click,
 			ariaLabel: `${title}: a cycle diagram with ${nodes.length} stages (${nodes.map((nd) => nd.label).join(", ")}) connected by labelled process arrows. Activate a stage to trace its outgoing transitions and the processes that drive them.`
 		})
-	}), /* @__PURE__ */ jsx(LiveRegion, { children: active ? `${labelOf(active)} leads to ${out.map((e) => `${labelOf(e.to)} by ${e.label}`).join(", ") || "nothing further"}.` : "" })] });
-	const footer = /* @__PURE__ */ jsxs("div", {
-		className: "lab-bar",
-		style: {
-			flexWrap: "wrap",
-			gap: 10,
-			minHeight: 30
-		},
-		children: [active ? out.length ? out.map((e) => /* @__PURE__ */ jsxs("span", {
-			style: { fontSize: 13 },
-			children: [
-				/* @__PURE__ */ jsx("b", {
-					style: { color: "var(--stage-accent)" },
-					children: labelOf(active)
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					style: { color: "var(--stage-muted)" },
-					children: [
-						" , ",
-						e.label,
-						"→ "
-					]
-				}),
-				/* @__PURE__ */ jsx("b", { children: labelOf(e.to) })
-			]
-		}, edgeKey(e))) : /* @__PURE__ */ jsxs("span", {
-			style: { color: "var(--stage-muted)" },
-			children: [labelOf(active), " is an end of this path here."]
-		}) : /* @__PURE__ */ jsx("span", {
-			style: { color: "var(--stage-muted)" },
-			children: "Tap a stage to begin."
-		}), /* @__PURE__ */ jsxs(StatusPill, {
+	});
+	const evidence = /* @__PURE__ */ jsxs("div", {
+		className: "lab-activity-fields geography-cycle-trace",
+		children: [active ? out.length ? out.map((e) => /* @__PURE__ */ jsxs("span", { children: [
+			/* @__PURE__ */ jsx("b", { children: labelOf(active) }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				" — ",
+				e.label,
+				" → "
+			] }),
+			/* @__PURE__ */ jsx("b", { children: labelOf(e.to) })
+		] }, edgeKey(e))) : /* @__PURE__ */ jsxs("span", { children: [labelOf(active), " is an end of this path here."] }) : /* @__PURE__ */ jsx("span", { children: "Tap a stage to begin." }), /* @__PURE__ */ jsxs(StatusPill, {
 			ok: seen.size >= nodes.length,
 			children: [
 				seen.size,
@@ -124,27 +120,99 @@ function TraceCycle({ nodes, edges, size, title, prompt, objectives, activity })
 			]
 		})]
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt: prompt ?? "Click each stage to trace where it goes, and which process drives the change.",
-		objectives,
-		footer,
-		children: figure
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "geography-cycle-activity",
+		focusLayout: "immersive",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Earth systems",
+				title,
+				description: prompt ?? "Click each stage to trace where it goes, and which process drives the change."
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: active ? labelOf(active) : "choose a stage" }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					seen.size,
+					" of ",
+					nodes.length,
+					" traced"
+				] }),
+				/* @__PURE__ */ jsx("span", { children: out.length ? `${out.length} outgoing path${out.length === 1 ? "" : "s"}` : active ? "path ends here" : "trace mode" })
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: `${title} directed-cycle diagram`,
+				children: figure
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: "Cycle path evidence",
+				children: evidence
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: active ? `${labelOf(active)} ${out.length ? `moves to ${out.map((edge) => `${labelOf(edge.to)} by ${edge.label}`).join(" or ")}` : "has no outgoing transition in this model"}.` : "Select a store or stage to expose only the transfers that leave it." })] }),
+			/* @__PURE__ */ jsx("section", {
+				className: "lab-authored-task",
+				"aria-label": "Transfer the cycle model",
+				children: /* @__PURE__ */ jsx(ChallengeCard, {
+					questions: transfer,
+					state: challenge,
+					title: "Transfer the cycle model"
+				})
+			}),
+			/* @__PURE__ */ jsx(Activity.LiveRegion, { children: active ? `${labelOf(active)} leads to ${out.map((e) => `${labelOf(e.to)} by ${e.label}`).join(", ") || "nothing further"}.` : "" }),
+			/* @__PURE__ */ jsxs(Activity.Transport, { children: [/* @__PURE__ */ jsx(IconButton, {
+				label: "Reset cycle trace",
+				onClick: reset,
+				children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "lab-transport-state",
+				"aria-live": "polite",
+				children: [/* @__PURE__ */ jsx("strong", { children: seen.size >= nodes.length ? "Trace complete" : "Trace every stage" }), /* @__PURE__ */ jsxs("span", { children: [
+					seen.size,
+					" / ",
+					nodes.length,
+					" visited"
+				] })]
+			})] })
+		]
 	});
 }
 function LabelProcess({ nodes, edges, size, title, prompt, objectives, hash: h, activity }) {
 	const labelEdges = useMemo(() => edges.filter((e) => e.label), [edges]);
 	const trueLabel = useMemo(() => Object.fromEntries(labelEdges.map((e) => [edgeKey(e), e.label])), [labelEdges]);
-	const allLabels = useMemo(() => [...new Set(labelEdges.map((e) => e.label))].sort((a, b) => h(a) - h(b)), [labelEdges, h]);
+	const allLabels = useMemo(() => labelEdges.map((e) => e.label).sort((a, b) => h(a) - h(b)), [labelEdges, h]);
 	const [assign, setAssign] = useState({});
 	const [sel, setSel] = useState(null);
 	const correct = (k) => assign[k] === trueLabel[k];
-	const placed = labelEdges.filter((e) => correct(edgeKey(e))).map((e) => assign[edgeKey(e)]);
-	const pool = allLabels.filter((l) => !placed.includes(l));
+	const remainingPlaced = [...labelEdges.filter((e) => correct(edgeKey(e))).map((e) => assign[edgeKey(e)])];
+	const pool = allLabels.filter((label) => {
+		const index = remainingPlaced.indexOf(label);
+		if (index < 0) return true;
+		remainingPlaced.splice(index, 1);
+		return false;
+	});
 	const solvedCount = labelEdges.filter((e) => correct(edgeKey(e))).length;
 	const solved = solvedCount === labelEdges.length;
+	const branched = nodes.some((node) => edges.filter((edge) => edge.from === node.id).length > 1);
+	const transfer = [{
+		id: "system-transfer",
+		prompt: branched ? "What does a branch in this cycle model mean?" : "What can happen if one process in this cycle stops?",
+		choices: branched ? [{
+			value: "routes",
+			label: "material can move along more than one direct route"
+		}, {
+			value: "simultaneous",
+			label: "every particle must follow every branch simultaneously"
+		}] : [{
+			value: "interrupt",
+			label: "the connected transfer can be interrupted"
+		}, {
+			value: "decorative",
+			label: "nothing, because process labels are decorative"
+		}],
+		answer: branched ? "routes" : "interrupt",
+		explain: branched ? "Branches encode alternative direct transfers from the same store; they are not a single compulsory ring." : "Each arrow represents a causal transfer, so removing its process breaks that connection in the system."
+	}];
+	const transferChallenge = useChallenge(transfer);
 	useCheckpoint({
-		solved: solved && pool.length === 0,
+		solved: solved && pool.length === 0 && transferChallenge.allCorrect,
 		activity
 	});
 	const onSlot = (key) => {
@@ -162,6 +230,11 @@ function LabelProcess({ nodes, edges, size, title, prompt, objectives, hash: h,
 		}));
 		setSel(null);
 	};
+	const reset = () => {
+		setAssign({});
+		setSel(null);
+		transferChallenge.reset();
+	};
 	const edgeSlot = (_e, key, mid) => {
 		const val = assign[key];
 		const ok = val != null && val === trueLabel[key];
@@ -177,7 +250,7 @@ function LabelProcess({ nodes, edges, size, title, prompt, objectives, hash: h,
 					onSlot(key);
 				}
 			},
-			style: { cursor: "pointer" },
+			className: "geography-cycle-slot",
 			role: "button",
 			tabIndex: 0,
 			"aria-label": val ? `${val}, ${ok ? "correctly matched, activate to take it back" : "incorrect, activate to clear"}` : sel ? `Empty process slot, activate to place ${sel} here` : "Empty process slot, pick a process first, then activate to place it here",
@@ -202,13 +275,8 @@ function LabelProcess({ nodes, edges, size, title, prompt, objectives, hash: h,
 			})]
 		});
 	};
-	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-		style: {
-			borderRadius: 14,
-			background: "var(--stage-bg)",
-			border: "1px solid var(--stage-grid)",
-			padding: 8
-		},
+	const figure = /* @__PURE__ */ jsx("div", {
+		className: "geography-cycle-scene",
 		children: /* @__PURE__ */ jsx(CycleDiagram, {
 			nodes,
 			edges,
@@ -216,44 +284,91 @@ function LabelProcess({ nodes, edges, size, title, prompt, objectives, hash: h,
 			edgeSlot,
 			ariaLabel: `${title}: a cycle diagram with ${nodes.length} stages (${nodes.map((nd) => nd.label).join(", ")}) and ${labelEdges.length} arrows whose process labels have been removed. Pick a process from the tray, then activate the arrow slot it drives to match it.`
 		})
-	}), /* @__PURE__ */ jsx(LiveRegion, { children: solved ? "All processes matched correctly." : `${solvedCount} of ${labelEdges.length} processes matched.` })] });
-	const controls = /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
-		label: "processes",
-		children: /* @__PURE__ */ jsx("span", {
-			style: {
-				display: "flex",
-				flexWrap: "wrap",
-				gap: 8
-			},
-			children: pool.length ? pool.map((l) => /* @__PURE__ */ jsx(Chip, {
-				selected: sel === l,
-				onClick: () => setSel((s) => s === l ? null : l),
-				children: l
-			}, l)) : /* @__PURE__ */ jsx("span", {
-				style: {
-					color: "var(--stage-good)",
-					fontWeight: 700
-				},
-				children: "All processes placed ✓"
-			})
-		})
-	}) });
-	const footer = /* @__PURE__ */ jsxs(StatusPill, {
-		ok: solved,
+	});
+	const controls = /* @__PURE__ */ jsxs("div", {
+		className: "lab-activity-fields",
 		children: [
-			solvedCount,
-			"/",
-			labelEdges.length,
-			" correct"
+			/* @__PURE__ */ jsx(Field, {
+				label: "processes",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "geography-process-tray",
+					children: pool.length ? pool.map((l, index) => /* @__PURE__ */ jsx(Chip, {
+						selected: sel === l,
+						onClick: () => setSel((s) => s === l ? null : l),
+						children: l
+					}, `${l}-${index}`)) : /* @__PURE__ */ jsx("span", {
+						className: "geography-process-complete",
+						children: "All processes placed ✓"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs(StatusPill, {
+				ok: solved,
+				children: [
+					solvedCount,
+					"/",
+					labelEdges.length,
+					" correct"
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "lab-muted-copy",
+				children: "Choose one process, then place it on the arrow whose transfer it causes."
+			})
 		]
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt: prompt ?? "Pick a process, then tap the arrow it drives. Green locks it in; tap a locked one to take it back.",
-		objectives,
-		controls,
-		footer,
-		children: figure
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "geography-cycle-activity",
+		focusLayout: "immersive",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Earth systems",
+				title,
+				description: prompt ?? "Pick a process, then tap the arrow it drives. Green locks it in; tap a locked one to take it back."
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: solved ? "cycle complete" : sel ? `${sel} selected` : "choose a process" }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					solvedCount,
+					" of ",
+					labelEdges.length,
+					" matched"
+				] }),
+				/* @__PURE__ */ jsxs("span", { children: [nodes.length, " stages"] })
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: `${title} process-matching diagram`,
+				children: figure
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: "Process palette and matching evidence",
+				children: controls
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: solved ? "Every arrow now names the causal process that transfers material between stores." : sel ? `Place ${sel} on the transition it drives.` : "Read an arrow’s direction first, then choose the process that can cause that transfer." })] }),
+			/* @__PURE__ */ jsx("section", {
+				className: "lab-authored-task",
+				"aria-label": "Transfer the cycle model",
+				children: /* @__PURE__ */ jsx(ChallengeCard, {
+					questions: transfer,
+					state: transferChallenge,
+					title: "Transfer the cycle model"
+				})
+			}),
+			/* @__PURE__ */ jsx(Activity.LiveRegion, { children: solved ? "All processes matched correctly." : `${solvedCount} of ${labelEdges.length} processes matched.` }),
+			/* @__PURE__ */ jsxs(Activity.Transport, { children: [/* @__PURE__ */ jsx(IconButton, {
+				label: "Reset process labels",
+				onClick: reset,
+				children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "lab-transport-state",
+				"aria-live": "polite",
+				children: [/* @__PURE__ */ jsx("strong", { children: solved ? "Matching complete" : "Match every process" }), /* @__PURE__ */ jsxs("span", { children: [
+					solvedCount,
+					" / ",
+					labelEdges.length,
+					" correct"
+				] })]
+			})] })
+		]
 	});
 }
 

package/dist/geometry/board/preset.d.mts

@@ -11,6 +11,7 @@ type GeoElement = {
   draggable?: boolean;
   label?: string;
   color?: string;
+  hidden?: boolean;
 } | {
   type: 'circle';
   id: string;
@@ -18,12 +19,14 @@ type GeoElement = {
   radius?: number;
   through?: string;
   color?: string;
+  hidden?: boolean;
 } | {
   type: 'line';
   id?: string;
   through: [string, string];
   color?: string;
   dashed?: boolean;
+  hidden?: boolean;
 } | {
   type: 'segment';
   id?: string;
@@ -32,6 +35,7 @@ type GeoElement = {
   color?: string;
   label?: string;
   dashed?: boolean;
+  hidden?: boolean;
 } | {
   type: 'intersect';
   id: string;
@@ -39,17 +43,24 @@ type GeoElement = {
   pick?: 0 | 1;
   label?: string;
   color?: string;
+  hidden?: boolean;
 } | {
   type: 'midpoint';
   id: string;
   of: [string, string];
   label?: string;
   color?: string;
+  hidden?: boolean;
 } | {
   type: 'measure';
   kind: 'distance';
   of: [string, string];
   label?: string;
+} | {
+  type: 'measure';
+  kind: 'angle';
+  of: [string, string, string];
+  label?: string;
 };
 interface GeometryBoardProps {
   scene?: GeoElement[];

package/dist/geometry/board/preset.mjs

@@ -1,8 +1,8 @@
 'use client';
 
-import { LabFrame } from "../../kit/frame.mjs";
+import { Activity } from "../../kit/activity.mjs";
 import { useEffect, useMemo, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Scene } from "@classytic/stage";
 
 //#region src/geometry/board/preset.tsx
@@ -38,7 +38,10 @@ function geoSceneToDoc(scene, view) {
 					id: el.id,
 					kind: "point",
 					label: el.label,
-					style: { color: el.color },
+					style: {
+						color: el.color,
+						hidden: el.hidden
+					},
 					free: {
 						at: {
 							x: el.x,
@@ -50,7 +53,10 @@ function geoSceneToDoc(scene, view) {
 				case "circle": return {
 					id: el.id,
 					kind: "circle",
-					style: { color: el.color },
+					style: {
+						color: el.color,
+						hidden: el.hidden
+					},
 					def: {
 						op: "circle",
 						center: { ref: el.center },
@@ -63,7 +69,8 @@ function geoSceneToDoc(scene, view) {
 					kind: "line",
 					style: {
 						color: el.color,
-						dashed: el.dashed
+						dashed: el.dashed,
+						hidden: el.hidden
 					},
 					def: {
 						op: "line",
@@ -76,7 +83,8 @@ function geoSceneToDoc(scene, view) {
 					label: el.label,
 					style: {
 						color: el.color,
-						dashed: el.dashed
+						dashed: el.dashed,
+						hidden: el.hidden
 					},
 					def: {
 						op: "segment",
@@ -88,7 +96,10 @@ function geoSceneToDoc(scene, view) {
 					id: el.id,
 					kind: "point",
 					label: el.label,
-					style: { color: el.color },
+					style: {
+						color: el.color,
+						hidden: el.hidden
+					},
 					def: {
 						op: "intersect",
 						of: [{ ref: el.of[0] }, { ref: el.of[1] }],
@@ -99,7 +110,10 @@ function geoSceneToDoc(scene, view) {
 					id: el.id,
 					kind: "point",
 					label: el.label,
-					style: { color: el.color },
+					style: {
+						color: el.color,
+						hidden: el.hidden
+					},
 					def: {
 						op: "midpoint",
 						of: [{ ref: el.of[0] }, { ref: el.of[1] }]
@@ -109,7 +123,14 @@ function geoSceneToDoc(scene, view) {
 					id: `d${i}`,
 					kind: "measure",
 					label: el.label,
-					def: {
+					def: el.kind === "angle" ? {
+						op: "angle",
+						of: [
+							{ ref: el.of[0] },
+							{ ref: el.of[1] },
+							{ ref: el.of[2] }
+						]
+					} : {
 						op: "distance",
 						of: [{ ref: el.of[0] }, { ref: el.of[1] }]
 					}
@@ -122,21 +143,44 @@ function geoSceneToDoc(scene, view) {
 function GeometryBoard({ scene = [], view = DEFAULT_VIEW, title = "Geometry construction", prompt = "Drag the points to explore the construction.", height = 360 }) {
 	const initial = useMemo(() => geoSceneToDoc(scene, view), [scene, view]);
 	const [doc, setDoc] = useState(initial);
+	const shown = scene.filter((el) => !("hidden" in el && el.hidden)).length;
 	useEffect(() => {
 		setDoc(initial);
 	}, [initial]);
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		children: /* @__PURE__ */ jsx(Scene, {
-			doc,
-			onChange: setDoc,
-			interactive: true,
-			showGrid: true,
-			showAxes: true,
-			height,
-			ariaLabel: title
-		})
+	const figure = /* @__PURE__ */ jsx(Scene, {
+		doc,
+		onChange: setDoc,
+		interactive: true,
+		showGrid: true,
+		showAxes: true,
+		height,
+		ariaLabel: title
+	});
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "geometry-board-activity",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Interactive geometry",
+				title,
+				description: prompt
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [/* @__PURE__ */ jsxs("strong", { children: [shown, " construction elements"] }), /* @__PURE__ */ jsx("span", { children: "drag enabled points" })] }),
+			/* @__PURE__ */ jsx(Activity.Workspace, { children: /* @__PURE__ */ jsx(Activity.Canvas, {
+				label: title,
+				children: figure
+			}) }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Explore" }), /* @__PURE__ */ jsx("div", { children: "Move a free point and observe which dependent lines, circles, intersections, and measurements remain invariant." })] }),
+			/* @__PURE__ */ jsxs(Activity.LiveRegion, { children: [
+				title,
+				". ",
+				shown,
+				" authored construction elements."
+			] }),
+			/* @__PURE__ */ jsx(Activity.Transport, { children: /* @__PURE__ */ jsxs("div", {
+				className: "lab-transport-state",
+				children: [/* @__PURE__ */ jsx("strong", { children: "Direct manipulation" }), /* @__PURE__ */ jsx("span", { children: "Drag or keyboard-adjust enabled points" })]
+			}) })
+		]
 	});
 }
 

package/dist/geometry/builder.mjs

@@ -4,6 +4,7 @@ import { geoSceneToDoc } from "./board/preset.mjs";
 import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Axes, Dot, Grid, Stage, ToolIcon, isCircleVal, isLineVal, isVec2, renderElements, resolve } from "@classytic/stage";
+import { Button } from "@/components/ui/button";
 
 //#region src/geometry/builder.tsx
 /**
@@ -269,34 +270,43 @@ function GeometryBuilder({ scene = [], onChange, title = "Build a construction",
 	};
 	const hint = TOOLS.find((t) => t.id === tool)?.hint ?? "";
 	return /* @__PURE__ */ jsxs("div", {
-		className: "not-prose my-4 overflow-hidden rounded-xl border border-border/70 bg-card",
+		className: "not-prose geometry-builder",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-wrap items-center gap-1.5 border-b border-border/60 bg-muted/30 px-3 py-2",
+				className: "geometry-builder-toolbar",
+				role: "toolbar",
+				"aria-label": "Geometry construction tools",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "mr-1 text-sm font-semibold",
+						className: "geometry-builder-title",
 						children: title
 					}),
-					TOOLS.map((t) => /* @__PURE__ */ jsxs("button", {
+					TOOLS.map((t) => /* @__PURE__ */ jsxs(Button, {
 						type: "button",
 						onClick: () => {
 							setTool(t.id);
 							setPending([]);
 						},
-						className: ["inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition", tool === t.id ? "bg-primary text-primary-foreground" : "border border-border/60 bg-background text-foreground hover:bg-muted"].join(" "),
+						size: "sm",
+						variant: tool === t.id ? "secondary" : "ghost",
+						className: "geometry-builder-tool",
+						"aria-pressed": tool === t.id,
+						"data-selected": tool === t.id || void 0,
 						children: [/* @__PURE__ */ jsx(ToolIcon, { name: t.icon }), t.label]
 					}, t.id)),
-					/* @__PURE__ */ jsx("button", {
+					/* @__PURE__ */ jsx(Button, {
 						type: "button",
+						size: "sm",
+						variant: "outline",
 						onClick: () => set([]),
-						className: "ml-auto rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-destructive",
-						children: "clear"
+						className: "geometry-builder-clear",
+						children: "Clear"
 					})
 				]
 			}),
 			/* @__PURE__ */ jsxs("p", {
-				className: "px-3 pt-1.5 text-xs text-muted-foreground",
+				className: "geometry-builder-hint",
+				"aria-live": "polite",
 				children: [hint, pending.length ? ` · ${pending.length} selected` : ""]
 			}),
 			/* @__PURE__ */ jsxs(Stage, {
@@ -304,7 +314,7 @@ function GeometryBuilder({ scene = [], onChange, title = "Build a construction",
 				height,
 				onPointerMath: onBuild,
 				ariaLabel: `Geometry construction editor, ${tool} tool`,
-				className: "cursor-crosshair",
+				className: "geometry-builder-stage",
 				children: [
 					/* @__PURE__ */ jsx(Grid, {}),
 					/* @__PURE__ */ jsx(Axes, {}),