@classytic/labs 0.2.0 → 0.4.0

package/dist/physics/vector-board/preset.mjs

@@ -1,13 +1,16 @@
 'use client';
 
 import { toDeg } from "../../core/util.mjs";
-import { RichText } from "../../kit/rich.mjs";
-import { Callout, LabFrame, LiveRegion } from "../../kit/frame.mjs";
-import { Feedback, HintLadder, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
-import { AngleArc, LabeledVector, RightAngleMark } from "../../kit/diagram.mjs";
-import { Fragment, useEffect, useMemo, useState } from "react";
+import { Chip } from "../../kit/controls.mjs";
+import { LiveRegion } from "../../kit/frame.mjs";
+import { HintLadder, useHints } from "../../kit/pedagogy.mjs";
+import { AuthoredActivityRuntime, AuthoredMetricGate } from "../../kit/authored-activity-runtime.mjs";
+import { SceneSurface } from "../mechanics/presentation.mjs";
+import { AngleArc, LabeledVector, RightAngleMark } from "../../kit/diagram/annotations.mjs";
+import { PlaneAxes, clearOfLabel, dotZone } from "../../kit/coords.mjs";
+import { useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Axes, Label, MovableDot, Segment, Stage, Vector, vec } from "@classytic/stage";
+import { Label, MovableDot, Segment, Stage, Vector, vec } from "@classytic/stage";
 
 //#region src/physics/vector-board/preset.tsx
 /**
@@ -24,6 +27,37 @@ import { Axes, Label, MovableDot, Segment, Stage, Vector, vec } from "@classytic
 * reinvented. Drag a head, watch the resultant + angle update; land it on the
 * target to solve.
 */
+/**
+* Where a dragged head lands, as components from its tail.
+*
+* Split out of the drag callback so the rule is testable without a pointer: a
+* constant-speed vector must come back with its authored length whatever the learner
+* does with it, and that is the sort of claim worth pinning.
+*
+* `lock` keeps the authored magnitude and takes only the DIRECTION from the pointer.
+* Snapping is deliberately skipped in that mode: snapping to the grid would pull the
+* head off the circle and change the very length being held.
+*/
+function dragTo(pointer, tail, authored, opts = {}) {
+	const want = {
+		x: pointer.x - tail.x,
+		y: pointer.y - tail.y
+	};
+	if (!opts.lock) {
+		const snap = opts.snap ?? ((n) => n);
+		return {
+			x: snap(pointer.x) - tail.x,
+			y: snap(pointer.y) - tail.y
+		};
+	}
+	const len = Math.hypot(want.x, want.y);
+	const fixed = Math.hypot(authored.x, authored.y);
+	if (len < 1e-6 || fixed < 1e-6) return authored;
+	return {
+		x: want.x / len * fixed,
+		y: want.y / len * fixed
+	};
+}
 const ORIGIN = {
 	x: 0,
 	y: 0
@@ -33,6 +67,62 @@ const PALETTE = [
 	"var(--stage-accent-2)",
 	"var(--stage-good)"
 ];
+const VECTOR_BOARD_ACTIVITY = {
+	pattern: "construction",
+	title: "Build and read a resultant",
+	objectives: [
+		"Resolve vectors into components",
+		"Construct a vector sum or difference",
+		"Interpret resultant magnitude and direction"
+	],
+	steps: [
+		{
+			id: "predict",
+			phase: "predict",
+			title: "Predict the resultant",
+			lead: "Estimate its quadrant and size before dragging."
+		},
+		{
+			id: "act",
+			phase: "act",
+			title: "Move a vector",
+			lead: "Drag an authored vector head and watch the resultant respond.",
+			controls: true,
+			reveal: ["model"],
+			success: "interacted"
+		},
+		{
+			id: "observe",
+			phase: "observe",
+			title: "Read magnitude and direction",
+			lead: "Compare the arrows, components, and live measurement.",
+			controls: true,
+			reveal: ["model", "evidence"]
+		},
+		{
+			id: "explain",
+			phase: "explain",
+			title: "Explain the construction",
+			lead: "Use tip-to-tail addition or subtraction to justify the resultant."
+		},
+		{
+			id: "transfer",
+			phase: "transfer",
+			title: "Make a contrasting vector",
+			lead: "Change direction as well as magnitude and compare the outcome.",
+			controls: true,
+			reveal: ["model", "evidence"]
+		}
+	],
+	success: [{
+		id: "interacted",
+		source: "metric",
+		key: "interacted",
+		operator: "eq",
+		value: true,
+		pendingLabel: "Drag a vector head."
+	}]
+};
 /**
 * Frame the board to everything that matters, origin, every arrow tip, the
 * resultant, and the goal, with padding, snapped to integers for clean axes.
@@ -42,13 +132,28 @@ const PALETTE = [
 function autoView(vectors, combine, goal) {
 	const comps = vectors.map((v) => v.comp);
 	const pts = [ORIGIN];
-	vectors.forEach((v, i) => pts.push(vec.add(v.tail ?? ORIGIN, comps[i] ?? ORIGIN)));
+	let walk = ORIGIN;
+	vectors.forEach((v, i) => {
+		const tail = v.tail ?? (combine === "chain" ? walk : ORIGIN);
+		const tip = vec.add(tail, comps[i] ?? ORIGIN);
+		pts.push(tail, tip);
+		walk = tip;
+	});
 	if (combine === "diff") pts.push(vec.sub(comps[0] ?? ORIGIN, comps[1] ?? ORIGIN));
 	else if (combine !== "none") pts.push(comps.reduce((a, c) => vec.add(a, c), ORIGIN));
 	if (goal) pts.push(goal.match);
 	const xs = pts.map((p) => p.x);
 	const ys = pts.map((p) => p.y);
-	const pad = 1.6;
+	/**
+	* Padding proportional to the figure, with a floor.
+	*
+	* It was a flat 1.6 units. On a board of forces spanning 40 units that is 4%, and the magnitude
+	* labels sit OUTSIDE the geometry in pixels, so "|S| = 30.0" was cut off by the bottom edge.
+	* A vector that reaches the frame always loses its label; it only became obvious with chain
+	* mode, which pushes arrows out to the edge instead of fanning them around the origin.
+	*/
+	const span = Math.max(Math.max(...xs) - Math.min(...xs), Math.max(...ys) - Math.min(...ys), 1);
+	const pad = Math.max(1.6, span * .12);
 	return {
 		xMin: Math.floor(Math.min(0, ...xs) - pad),
 		xMax: Math.ceil(Math.max(0, ...xs) + pad),
@@ -59,8 +164,11 @@ function autoView(vectors, combine, goal) {
 function VectorBoardLab({ view: viewProp, vectors, combine = "sum", resultantLabel = "R", resultantColor = "var(--stage-warn)", show = {
 	angle: true,
 	magnitude: true
-}, goal, snap = 1, objectives, hints: hintList, title = "Vectors", prompt = "Drag the arrow heads.", height = 320 }) {
+}, goal, snap = 1, objectives, hints: hintList, title = "Vectors", prompt = "Drag the arrow heads.", height = 320, activity = "vector-board" }) {
+	const activityId = typeof activity === "string" ? activity : "vector-board";
+	const authoredActivity = typeof activity === "string" ? VECTOR_BOARD_ACTIVITY : activity;
 	const [comps, setComps] = useState(() => vectors.map((v) => v.comp));
+	const [interacted, setInteracted] = useState(false);
 	useEffect(() => {
 		setComps(vectors.map((v) => v.comp));
 	}, [vectors]);
@@ -70,7 +178,25 @@ function VectorBoardLab({ view: viewProp, vectors, combine = "sum", resultantLab
 		combine,
 		goal
 	]);
-	const tailOf = (i) => vectors[i]?.tail ?? ORIGIN;
+	/**
+	* Where each arrow starts.
+	*
+	* In `chain` mode every arrow begins where the previous one ended, which is what "head to tail"
+	* means and what a triangle of forces IS. Drawn from a common origin instead, three forces in
+	* equilibrium look like a star and no triangle appears anywhere, so a lesson whose whole point
+	* is "the last arrow lands on the tail of the first" showed the learner something else entirely.
+	*
+	* An explicit authored `tail` still wins, so a chain can be anchored somewhere other than the
+	* origin.
+	*/
+	const tailOf = (i) => {
+		const authored = vectors[i]?.tail;
+		if (authored) return authored;
+		if (combine !== "chain") return ORIGIN;
+		let acc = ORIGIN;
+		for (let k = 0; k < i; k += 1) acc = vec.add(acc, comps[k] ?? ORIGIN);
+		return acc;
+	};
 	const tipOf = (i) => vec.add(tailOf(i), comps[i] ?? ORIGIN);
 	const snapV = (v) => snap ? Math.round(v / snap) * snap : v;
 	const resultant = useMemo(() => {
@@ -81,194 +207,283 @@ function VectorBoardLab({ view: viewProp, vectors, combine = "sum", resultantLab
 	const tol = goal?.tol ?? .45;
 	const solved = !!(goal && resultant && vec.dist(resultant, goal.match) <= tol);
 	const hints = useHints(hintList);
-	useCheckpoint({
-		solved,
-		activity: "vector-board",
-		hintsUsed: hints.count
-	});
 	const resMag = resultant ? vec.mag(resultant) : 0;
 	const resDeg = resultant ? Math.round(toDeg(vec.angle(resultant))) : 0;
 	const resColor = solved ? "var(--stage-good)" : resultantColor;
 	const showResultant = !!resultant && !(combine === "sum" && vectors.length === 1);
+	const LABEL_SIZE = 12;
+	/**
+	* Where each magnitude label sits, resolved BEFORE anything is drawn.
+	*
+	* Two things went wrong when the offset was a flat 26px perpendicular. A wide label on a
+	* diagonal shaft still straddled the arrow, because 26px clears the line at the label's
+	* CENTRE and says nothing about its ends: "|(2/5)AB| = 5.7" is ~110px of text pushed off a
+	* 45° arrow, so both ends came back over it. And the flip that pushes a label away from the
+	* resultant reads a dot product that is exactly ZERO when the vector is parallel to the
+	* resultant, which is the normal case in chain mode, so the coin landed on the arrow.
+	*
+	* The offset is now the label box's own support in the perpendicular direction (half-width
+	* and half-height, each weighted by how much of that axis the perpendicular points along)
+	* plus a margin, so a long label moves further than a short one and no label can reach back
+	* across its shaft. The degenerate flip falls back to the side away from the origin, which is
+	* the empty half of the frame in a chain.
+	*/
+	const vectorLabels = vectors.flatMap((v, i) => {
+		const c = comps[i];
+		if (!c) return [];
+		const t = tailOf(i);
+		const magStr = vec.mag(c).toFixed(1);
+		const text = v.label ? show.magnitude ? `|${v.label}| = ${magStr}` : v.label : show.magnitude ? magStr : "";
+		if (!text) return [];
+		const at = {
+			x: t.x + c.x * .62,
+			y: t.y + c.y * .62
+		};
+		const L = Math.hypot(c.x, c.y) || 1;
+		let pmx = -c.y / L;
+		let pmy = c.x / L;
+		const ref = resultant ?? {
+			x: c.x,
+			y: c.y
+		};
+		const awayFrom = pmx * (ref.x - at.x) + pmy * (ref.y - at.y);
+		const towardsOrigin = pmx * -at.x + pmy * -at.y;
+		if (awayFrom > 1e-6 || Math.abs(awayFrom) <= 1e-6 && towardsOrigin > 0) {
+			pmx = -pmx;
+			pmy = -pmy;
+		}
+		const halfW = text.length * LABEL_SIZE * .58 / 2 + 3;
+		const push = Math.abs(pmx) * halfW + Math.abs(pmy) * 8 + 6;
+		return [{
+			key: v.id ?? i,
+			tail: t,
+			comp: c,
+			color: v.color ?? PALETTE[i % PALETTE.length],
+			text,
+			at,
+			dx: pmx * push,
+			dy: -pmy * push
+		}];
+	});
+	/**
+	* Everything the axis numbers must print around: the drag handles, and every label the board
+	* draws. A magnitude label pushed clear of its own shaft can still land on a tick number, and
+	* "|a| = 3.2" printed over the x axis "4" is unreadable twice over.
+	*/
+	const keepClear = [
+		...comps.map((c, i) => dotZone({
+			x: tailOf(i).x + c.x,
+			y: tailOf(i).y + c.y
+		})),
+		...resultant ? [dotZone(resultant)] : [],
+		...vectorLabels.map((l) => clearOfLabel(l.at.x, l.at.y, l.text, {
+			size: LABEL_SIZE,
+			dx: l.dx,
+			dy: l.dy
+		})),
+		...resultant && showResultant ? [clearOfLabel(resultant.x, resultant.y, resultantLabel, {
+			size: 13,
+			dx: 12,
+			dy: -10
+		})] : []
+	];
 	const misconception = goal && !solved && resultant && Math.abs(vec.mag(resultant) - vec.mag(goal.match)) < tol ? "Right length, now fix the direction (rotate it onto the target)." : void 0;
-	const figure = /* @__PURE__ */ jsxs(Stage, {
-		view,
-		height,
-		preserveAspect: true,
-		ariaLabel: `${title}; resultant magnitude ${resMag.toFixed(1)} at ${resDeg} degrees`,
-		children: [
-			/* @__PURE__ */ jsx(Axes, { labels: true }),
-			goal && /* @__PURE__ */ jsx(Vector, {
-				tail: ORIGIN,
-				tip: goal.match,
-				color: "var(--stage-good)",
-				weight: 2,
-				opacity: .28
-			}),
-			show.parallelogram && combine === "sum" && resultant && comps.length === 2 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Segment, {
-				from: comps[0] ?? ORIGIN,
-				to: resultant,
-				color: "var(--stage-muted)",
-				dashed: true,
-				weight: 1.2,
-				opacity: .6
-			}), /* @__PURE__ */ jsx(Segment, {
-				from: comps[1] ?? ORIGIN,
-				to: resultant,
-				color: "var(--stage-muted)",
-				dashed: true,
-				weight: 1.2,
-				opacity: .6
-			})] }),
-			vectors.map((v, i) => {
-				const col = v.color ?? PALETTE[i % PALETTE.length];
-				const c = comps[i];
-				if (!c) return null;
-				const t = tailOf(i);
-				const magStr = vec.mag(c).toFixed(1);
-				const text = v.label ? show.magnitude ? `|${v.label}| = ${magStr}` : v.label : show.magnitude ? magStr : "";
-				const at = {
-					x: t.x + c.x * .62,
-					y: t.y + c.y * .62
-				};
-				const L = Math.hypot(c.x, c.y) || 1;
-				let pmx = -c.y / L, pmy = c.x / L;
-				const ref = resultant ?? {
-					x: c.x,
-					y: c.y
-				};
-				if (pmx * (ref.x - at.x) + pmy * (ref.y - at.y) > 0) {
-					pmx = -pmx;
-					pmy = -pmy;
-				}
-				const dx = pmx * 26;
-				const dy = -pmy * 26;
-				return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(LabeledVector, {
-					tail: t,
-					comp: c,
-					color: col
-				}), text && /* @__PURE__ */ jsx(Label, {
-					x: at.x,
-					y: at.y,
-					text,
-					color: col,
-					dx,
-					dy,
-					size: 12
-				})] }, v.id ?? i);
-			}),
-			resultant && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				show.components && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx(Segment, {
-						from: ORIGIN,
-						to: {
-							x: resultant.x,
-							y: 0
-						},
-						color: "var(--stage-muted)",
-						dashed: true,
-						weight: 1.2,
-						opacity: .7
-					}),
-					/* @__PURE__ */ jsx(Segment, {
+	const figure = /* @__PURE__ */ jsx(SceneSurface, {
+		className: "physics-vector-board-scene",
+		tone: "grid",
+		children: /* @__PURE__ */ jsxs(Stage, {
+			view,
+			height,
+			preserveAspect: true,
+			ariaLabel: `${title}; resultant magnitude ${resMag.toFixed(1)} at ${resDeg} degrees`,
+			children: [
+				/* @__PURE__ */ jsx(PlaneAxes, {
+					labels: true,
+					keepClear
+				}),
+				goal && /* @__PURE__ */ jsx(Vector, {
+					tail: ORIGIN,
+					tip: goal.match,
+					color: "var(--stage-good)",
+					weight: 2,
+					opacity: .28
+				}),
+				show.parallelogram && combine === "sum" && resultant && comps.length === 2 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Segment, {
+					from: comps[0] ?? ORIGIN,
+					to: resultant,
+					color: "var(--stage-muted)",
+					dashed: true,
+					weight: 1.2,
+					opacity: .6
+				}), /* @__PURE__ */ jsx(Segment, {
+					from: comps[1] ?? ORIGIN,
+					to: resultant,
+					color: "var(--stage-muted)",
+					dashed: true,
+					weight: 1.2,
+					opacity: .6
+				})] }),
+				vectors.map((v, i) => {
+					const c = comps[i];
+					if (!c) return null;
+					return /* @__PURE__ */ jsx(LabeledVector, {
+						tail: tailOf(i),
+						comp: c,
+						color: v.color ?? PALETTE[i % PALETTE.length]
+					}, v.id ?? i);
+				}),
+				vectorLabels.map((l) => /* @__PURE__ */ jsx(Label, {
+					x: l.at.x,
+					y: l.at.y,
+					text: l.text,
+					color: l.color,
+					dx: l.dx,
+					dy: l.dy,
+					size: LABEL_SIZE
+				}, `l${l.key}`)),
+				resultant && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					show.components && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(Segment, {
+							from: ORIGIN,
+							to: {
+								x: resultant.x,
+								y: 0
+							},
+							color: "var(--stage-muted)",
+							dashed: true,
+							weight: 1.2,
+							opacity: .7
+						}),
+						/* @__PURE__ */ jsx(Segment, {
+							from: {
+								x: resultant.x,
+								y: 0
+							},
+							to: resultant,
+							color: "var(--stage-muted)",
+							dashed: true,
+							weight: 1.2,
+							opacity: .7
+						}),
+						/* @__PURE__ */ jsx(RightAngleMark, {
+							at: {
+								x: resultant.x,
+								y: 0
+							},
+							u: {
+								x: -Math.sign(resultant.x || 1),
+								y: 0
+							},
+							v: {
+								x: 0,
+								y: Math.sign(resultant.y || 1)
+							}
+						})
+					] }),
+					showResultant && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LabeledVector, {
+						tail: ORIGIN,
+						comp: resultant,
+						color: resColor,
+						weight: 3.5
+					}), /* @__PURE__ */ jsx(Label, {
+						x: resultant.x,
+						y: resultant.y,
+						text: resultantLabel,
+						color: resColor,
+						dx: 12,
+						dy: -10,
+						size: 13
+					})] }),
+					show.angle && /* @__PURE__ */ jsx(AngleArc, {
+						at: ORIGIN,
 						from: {
-							x: resultant.x,
+							x: 1,
 							y: 0
 						},
 						to: resultant,
-						color: "var(--stage-muted)",
-						dashed: true,
-						weight: 1.2,
-						opacity: .7
-					}),
-					/* @__PURE__ */ jsx(RightAngleMark, {
-						at: {
-							x: resultant.x,
-							y: 0
-						},
-						u: {
-							x: -Math.sign(resultant.x || 1),
-							y: 0
-						},
-						v: {
-							x: 0,
-							y: Math.sign(resultant.y || 1)
-						}
+						label: `${Math.abs(resDeg)}°`
 					})
 				] }),
-				showResultant && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LabeledVector, {
-					tail: ORIGIN,
-					comp: resultant,
-					color: resColor,
-					weight: 3.5
-				}), /* @__PURE__ */ jsx(Label, {
-					x: resultant.x,
-					y: resultant.y,
-					text: resultantLabel,
-					color: resColor,
-					dx: 12,
-					dy: -10,
-					size: 13
-				})] }),
-				show.angle && /* @__PURE__ */ jsx(AngleArc, {
-					at: ORIGIN,
-					from: {
-						x: 1,
-						y: 0
+				vectors.map((v, i) => v.drag ? /* @__PURE__ */ jsx(MovableDot, {
+					value: tipOf(i),
+					onMove: (p) => {
+						setInteracted(true);
+						setComps((cs) => cs.map((c, j) => j === i ? dragTo(p, tailOf(i), c, {
+							lock: v.lockMagnitude,
+							snap: snapV
+						}) : c));
 					},
-					to: resultant,
-					label: `${Math.abs(resDeg)}°`
-				})
+					range: {
+						min: Math.min(view.xMin, view.yMin),
+						max: Math.max(view.xMax, view.yMax)
+					},
+					snap: snap || 1,
+					color: v.color ?? PALETTE[i % PALETTE.length],
+					ariaLabel: `${v.label ?? "vector"} head`
+				}, `d${v.id ?? i}`) : null)
+			]
+		})
+	});
+	const footer = /* @__PURE__ */ jsxs(Fragment$1, { children: [goal && /* @__PURE__ */ jsx(HintLadder, { hints }), /* @__PURE__ */ jsx(LiveRegion, { children: goal ? solved ? "On target" : misconception ?? `Resultant ${resMag.toFixed(1)} at ${resDeg} degrees` : "" })] });
+	const reset = () => {
+		setComps(vectors.map((vector) => vector.comp));
+		setInteracted(false);
+		hints.reset();
+	};
+	const instruments = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "physics-probe",
+		children: [
+			/* @__PURE__ */ jsxs("span", { children: [resultantLabel, " resultant"] }),
+			/* @__PURE__ */ jsxs("strong", { children: [
+				resMag.toFixed(1),
+				" ∠ ",
+				resDeg,
+				"°"
 			] }),
-			vectors.map((v, i) => v.drag ? /* @__PURE__ */ jsx(MovableDot, {
-				value: tipOf(i),
-				onMove: (p) => setComps((cs) => cs.map((c, j) => j === i ? {
-					x: snapV(p.x) - tailOf(i).x,
-					y: snapV(p.y) - tailOf(i).y
-				} : c)),
-				range: {
-					min: Math.min(view.xMin, view.yMin),
-					max: Math.max(view.xMax, view.yMax)
-				},
-				snap: snap || 1,
-				color: v.color ?? PALETTE[i % PALETTE.length],
-				ariaLabel: `${v.label ?? "vector"} head`
-			}, `d${v.id ?? i}`) : null)
+			/* @__PURE__ */ jsx("small", { children: goal ? solved ? "On target" : "Drag to match the target" : `${vectors.length} input vector${vectors.length === 1 ? "" : "s"}` })
 		]
-	});
-	return /* @__PURE__ */ jsx(LabFrame, {
+	}), misconception ? /* @__PURE__ */ jsx("p", {
+		className: "physics-explain",
+		children: misconception
+	}) : null] });
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		focusLayout: "immersive",
+		activity: {
+			...authoredActivity,
+			objectives: objectives ?? authoredActivity.objectives
+		},
+		activityId,
+		eyebrow: "Vectors and motion",
 		title,
-		prompt,
-		objectives,
-		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsxs(Callout, {
-				tone: solved ? "result" : "info",
-				children: [/* @__PURE__ */ jsxs("span", {
-					style: {
-						fontWeight: 600,
-						fontVariantNumeric: "tabular-nums"
-					},
-					children: [
-						/* @__PURE__ */ jsx(RichText, { children: resultantLabel }),
-						" = ",
-						resMag.toFixed(1),
-						" @ ",
-						resDeg,
-						"°"
-					]
-				}), goal && /* @__PURE__ */ jsx(Feedback, {
-					ok: solved,
-					misconception,
-					okText: "On target",
-					tryText: "Match the target"
-				})]
-			}),
-			goal && /* @__PURE__ */ jsx(HintLadder, { hints }),
-			/* @__PURE__ */ jsx(LiveRegion, { children: goal ? solved ? "On target" : misconception ?? `Resultant ${resMag.toFixed(1)} at ${resDeg} degrees` : "" })
+		description: prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", { children: solved ? "Target matched" : combine === "diff" ? "Vector difference" : combine === "none" ? "Vector components" : "Vector sum" }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				resultantLabel,
+				" ",
+				resMag.toFixed(1)
+			] }),
+			/* @__PURE__ */ jsxs("span", { children: [resDeg, "°"] })
 		] }),
-		children: figure
+		evidence: instruments,
+		controls: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Chip, {
+			selected: false,
+			onClick: reset,
+			children: "Reset"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "physics-explain",
+			children: "Drag a colored vector head. The resultant and components update together."
+		})] }),
+		observation: solved ? "The resultant lands on the authored target." : misconception ?? (combine === "diff" ? "Vector subtraction gives the relative vector from the second motion to the first." : "The resultant combines every authored vector while preserving direction and scale."),
+		transcript: /* @__PURE__ */ jsx("p", { children: `${vectors.length} input vectors produce ${resultantLabel} magnitude ${resMag.toFixed(1)} at ${resDeg} degrees.` }),
+		support: footer,
+		children: ({ complete }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AuthoredMetricGate, {
+			conditionId: "interacted",
+			met: interacted,
+			complete
+		}), figure] })
 	});
 }
 
 //#endregion
-export { VectorBoardLab };
+export { VectorBoardLab, dragTo };