@classytic/labs 0.2.0 → 0.3.0

package/dist/math/linear-model/preset.mjs

@@ -1,7 +1,8 @@
 'use client';
 
-import { Callout, LabFrame } from "../../kit/frame.mjs";
-import { Feedback, useCheckpoint } from "../../kit/pedagogy.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { LinkedViews } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
 import { useReducedMotion } from "../../kit/anim.mjs";
 import { LabAsk } from "../../kit/ask.mjs";
 import { PredictPlot } from "../../kit/predict.mjs";
@@ -69,43 +70,27 @@ function LinearModelLab(props = {}) {
 			intercept
 		} : null
 	});
-	const readout = /* @__PURE__ */ jsx(Callout, {
-		tone: "result",
-		children: /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				gap: 6,
-				fontSize: 13,
-				fontVariantNumeric: "tabular-nums"
-			},
-			children: [
-				/* @__PURE__ */ jsxs("span", { children: ["Your reading: ", /* @__PURE__ */ jsxs("strong", {
-					style: { color: `var(--stage-${solved ? "good" : moved ? "warn" : "fg"})` },
-					children: [
-						num(guess.y),
-						" ",
-						unit
-					]
-				})] }),
-				/* @__PURE__ */ jsx(Feedback, {
-					ok: solved,
-					okText: `Spot on, ${num(target)} ${unit}.`,
-					tryText: "Read the pattern off the given points."
-				}),
-				solved && /* @__PURE__ */ jsxs("span", { children: [
-					"Rule: ",
-					/* @__PURE__ */ jsxs("strong", { children: [
-						"+",
-						num(slope),
-						" ",
-						unit
-					] }),
-					" per ",
-					(objectLabel ?? xLabel).toLowerCase().replace(/s$/, ""),
-					"."
-				] })
-			]
-		})
+	const readout = /* @__PURE__ */ jsxs("div", {
+		className: "math-linear-readout",
+		"data-state": solved ? "correct" : moved ? "moved" : "idle",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "math-linear-readout-label",
+				children: "Your reading"
+			}),
+			/* @__PURE__ */ jsxs("strong", {
+				className: "math-reading-value",
+				children: [
+					num(guess.y),
+					" ",
+					unit
+				]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "math-linear-readout-guidance",
+				children: solved ? `Pattern found: +${num(slope)} ${unit} per ${(objectLabel ?? xLabel).toLowerCase().replace(/s$/, "")}.` : "Use the given points to estimate the next value."
+			})
+		]
 	});
 	const sceneLabel = `${predictX} ${(objectLabel ?? xLabel).toLowerCase()}`;
 	const truthFrac = (filled ? target : 0) / yMax;
@@ -116,47 +101,108 @@ function LinearModelLab(props = {}) {
 	const levelColor = solved ? "var(--stage-good)" : liquidColor;
 	const names = scene === "none" ? [] : [scene, ...extraScenes];
 	const multi = names.length > 1;
-	const dim = multi ? Math.round((height - 8) / names.length) - 6 : height - 8;
+	const dim = multi ? 150 : Math.min(230, Math.max(180, height * .58));
 	const twins = names.map((name, i) => {
-		return /* @__PURE__ */ jsx("div", { children: name === "vessel" ? /* @__PURE__ */ jsx(Vessel, {
-			width: multi ? 110 : 132,
-			height: dim,
-			fillFrac: levelFrac,
-			guessFrac: readingFrac,
-			guessTone: tone,
-			objects: vesselObjects ? predictX : 0,
-			liquidColor: levelColor,
-			objectColor,
-			label: multi ? void 0 : sceneLabel,
-			scaleMax: multi ? void 0 : yMax,
-			scaleStep: yStep * 2,
-			unit
-		}) : getScene(name)?.render({
-			frac: levelFrac,
-			guessFrac: readingFrac,
-			guessTone: tone,
-			color: levelColor,
-			label: multi ? void 0 : sceneLabel,
-			width: multi ? 118 : 138,
-			height: dim
-		}) }, i);
+		return /* @__PURE__ */ jsxs("div", {
+			className: "lab-rep",
+			children: [name === "vessel" ? /* @__PURE__ */ jsx(Vessel, {
+				width: multi ? 104 : 132,
+				height: dim,
+				fillFrac: levelFrac,
+				guessFrac: readingFrac,
+				guessTone: tone,
+				objects: vesselObjects ? predictX : 0,
+				liquidColor: levelColor,
+				objectColor,
+				label: multi ? void 0 : sceneLabel,
+				scaleMax: multi ? void 0 : yMax,
+				scaleStep: yStep * 2,
+				unit
+			}) : getScene(name)?.render({
+				frac: levelFrac,
+				guessFrac: readingFrac,
+				guessTone: tone,
+				color: levelColor,
+				label: multi ? void 0 : sceneLabel,
+				width: multi ? 108 : 138,
+				height: dim
+			}), multi && /* @__PURE__ */ jsx("span", {
+				className: "lab-rep-cap",
+				children: getScene(name)?.label ?? name
+			})]
+		}, i);
 	}).filter((t) => t.props.children);
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		aside: twins.length ? /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				gap: 10,
-				justifyItems: "center"
-			},
-			children: [twins, readout]
-		}) : readout,
-		footer: ask ? /* @__PURE__ */ jsx(LabAsk, {
-			ask,
-			activity: `${activity}-followup`
-		}) : void 0,
-		children: figure
+	const footer = ask ? /* @__PURE__ */ jsx(LabAsk, {
+		ask,
+		activity: `${activity}-followup`
+	}) : void 0;
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "math-linear-model-activity",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Linear relationships",
+				title,
+				description: prompt
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: solved ? "Reading matched" : "Predict the value" }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					xLabel,
+					" ",
+					predictX
+				] }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					num(guess.y),
+					" ",
+					unit
+				] })
+			] }),
+			/* @__PURE__ */ jsx(Activity.Workspace, { children: /* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Linked graph and concrete model",
+				children: /* @__PURE__ */ jsx(LinkedViews, {
+					primary: figure,
+					representations: twins.length ? twins : void 0,
+					readout
+				})
+			}) }),
+			solved ? /* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Pattern" }), /* @__PURE__ */ jsxs("div", { children: [
+				"Equal changes in ",
+				xLabel.toLowerCase(),
+				" produce equal changes of ",
+				num(slope),
+				" ",
+				unit,
+				" in",
+				" ",
+				yLabel.toLowerCase(),
+				"."
+			] })] }) : null,
+			footer ? /* @__PURE__ */ jsx("section", {
+				className: "lab-authored-task",
+				"aria-label": "Follow-up question",
+				children: footer
+			}) : null,
+			/* @__PURE__ */ jsxs(Activity.LiveRegion, { children: [
+				"Your reading is ",
+				num(guess.y),
+				" ",
+				unit,
+				".",
+				solved ? " It matches the pattern." : ""
+			] }),
+			/* @__PURE__ */ jsx(Activity.Transport, { children: /* @__PURE__ */ jsxs("div", {
+				className: "lab-transport-state",
+				children: [/* @__PURE__ */ jsx("strong", { children: solved ? "Prediction confirmed" : "Drag the graph point" }), /* @__PURE__ */ jsxs("span", { children: [
+					predictX,
+					" ",
+					xLabel.toLowerCase(),
+					" → ",
+					num(guess.y),
+					" ",
+					unit
+				] })]
+			}) })
+		]
 	});
 }
 

package/dist/math/linear-system/preset.mjs

@@ -2,7 +2,7 @@
 
 import { clamp } from "../../core/util.mjs";
 import { StatusPill } from "../../kit/controls.mjs";
-import { ControlBar, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { Activity } from "../../kit/activity.mjs";
 import { useCheckpoint } from "../../kit/pedagogy.mjs";
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -32,7 +32,7 @@ const DEFAULT_LINES = [{
 	label: "clue B",
 	color: "var(--stage-accent-2)"
 }];
-function LinearSystemLab({ lines = DEFAULT_LINES, xRange = [-1, 7], yRange = [-1, 7], title = "Two unknowns, one answer", prompt = "Drag the point to where BOTH lines cross, that (x, y) obeys both clues.", height = 360 } = {}) {
+function LinearSystemLab({ lines = DEFAULT_LINES, xRange = [-1, 7], yRange = [-1, 7], title = "Two unknowns, one answer", prompt = "Drag the point to where the two lines cross: that (x, y) obeys both clues at once.", height = 360 } = {}) {
 	const [l1, l2] = lines;
 	const sol = useMemo(() => {
 		const dm = l1.m - l2.m;
@@ -117,15 +117,11 @@ function LinearSystemLab({ lines = DEFAULT_LINES, xRange = [-1, 7], yRange = [-1
 			})
 		]
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+	const controls = /* @__PURE__ */ jsxs("div", {
+		className: "lab-activity-fields",
+		children: [
 			/* @__PURE__ */ jsxs("span", {
-				style: {
-					fontVariantNumeric: "tabular-nums",
-					fontWeight: 600
-				},
+				className: "math-coordinate-readout",
 				children: [
 					"(x, y) = (",
 					guess.x,
@@ -135,7 +131,8 @@ function LinearSystemLab({ lines = DEFAULT_LINES, xRange = [-1, 7], yRange = [-1
 				]
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				style: { color: onA ? "var(--stage-good)" : "var(--stage-muted)" },
+				className: "math-condition",
+				"data-met": onA,
 				children: [
 					onA ? "✓" : "○",
 					" ",
@@ -143,7 +140,8 @@ function LinearSystemLab({ lines = DEFAULT_LINES, xRange = [-1, 7], yRange = [-1
 				]
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				style: { color: onB ? "var(--stage-good)" : "var(--stage-muted)" },
+				className: "math-condition",
+				"data-met": onB,
 				children: [
 					onB ? "✓" : "○",
 					" ",
@@ -154,9 +152,41 @@ function LinearSystemLab({ lines = DEFAULT_LINES, xRange = [-1, 7], yRange = [-1
 				ok: solved,
 				children: solved ? `✓ Solved: x=${guess.x}, y=${guess.y}` : "Not the crossing yet"
 			})
-		] }),
-		footer: /* @__PURE__ */ jsx(LiveRegion, { children: solved ? `Solved: x ${guess.x}, y ${guess.y}` : `Point at ${guess.x}, ${guess.y}; on ${l1.label ?? "A"}: ${onA}; on ${l2.label ?? "B"}: ${onB}` }),
-		children: figure
+		]
+	});
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "math-linear-system-activity",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Simultaneous equations",
+				title,
+				description: prompt
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: solved ? "Both clues satisfied" : "Find the intersection" }),
+				/* @__PURE__ */ jsxs("span", { children: ["x ", guess.x] }),
+				/* @__PURE__ */ jsxs("span", { children: ["y ", guess.y] })
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Two-line system graph",
+				children: figure
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: "Coordinate and clue evidence",
+				children: controls
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: "The intersection is the only coordinate pair that satisfies both equations at once." })] }),
+			/* @__PURE__ */ jsx(Activity.LiveRegion, { children: solved ? `Solved: x ${guess.x}, y ${guess.y}` : `Point at ${guess.x}, ${guess.y}; on ${l1.label ?? "A"}: ${onA}; on ${l2.label ?? "B"}: ${onB}` }),
+			/* @__PURE__ */ jsx(Activity.Transport, { children: /* @__PURE__ */ jsxs("div", {
+				className: "lab-transport-state",
+				children: [/* @__PURE__ */ jsx("strong", { children: solved ? "System solved" : "Move the point" }), /* @__PURE__ */ jsxs("span", { children: [
+					"(",
+					guess.x,
+					", ",
+					guess.y,
+					")"
+				] })]
+			}) })
+		]
 	});
 }
 

package/dist/math/lines-in-space/core.d.mts

@@ -0,0 +1,71 @@
+//#region src/math/lines-in-space/core.d.ts
+/**
+ * Lines in space: the vector algebra behind Cambridge 9709 Pure Mathematics 3, topic 3.7.
+ *
+ * Everything a learner meets in two dimensions has a trap waiting in three. Two lines in a plane
+ * that are not parallel must meet; two lines in space usually do not. A drawing on paper cannot
+ * show the difference, because the projection of two skew lines crosses exactly as two meeting
+ * lines do. The lab exists to make that difference visible, and this file is the arithmetic that
+ * decides it, kept free of React so every claim a lesson makes about it can be tested.
+ *
+ * Conventions follow the syllabus: z is up, a line is r = a + t b with a a position vector on the
+ * line and b its direction, and angles are in degrees.
+ */
+type V3 = readonly [number, number, number];
+interface Line3 {
+  /** A position vector of one point on the line (the syllabus's a). */
+  point: V3;
+  /** The direction vector (the syllabus's b). Must not be the zero vector. */
+  direction: V3;
+}
+type Relation = 'intersect' | 'skew' | 'parallel' | 'same';
+interface LinePair {
+  relation: Relation;
+  /** The acute angle between the two directions, in degrees. 0 for parallel lines. */
+  angle: number;
+  /** The shortest distance between the lines. 0 when they meet or coincide. */
+  distance: number;
+  /** The parameters of the closest points: l1 at s, l2 at t. For parallel lines, s = 0. */
+  s: number;
+  t: number;
+  /** The closest pair of points, one on each line. They coincide when the lines meet. */
+  closest: [V3, V3];
+  /** The point of intersection, only when the lines meet at a single point. */
+  point: V3 | null;
+}
+/**
+ * How two lines stand relative to each other.
+ *
+ * The exam method solves two of the three component equations for s and t and then tests the
+ * third: if it holds, the lines meet, and if not, they are skew. That test is exact on exam
+ * numbers and fragile on anything else, so the classification here uses the closest approach
+ * instead, which gives the same verdict and also says HOW FAR apart skew lines are, the quantity
+ * the lab draws. With w = a₁ − a₂, the closest points solve the two conditions that the joining
+ * segment is perpendicular to both directions.
+ */
+declare function relate(l1: Line3, l2: Line3): LinePair;
+interface Foot {
+  /** The parameter of the foot of the perpendicular. */
+  t: number;
+  foot: V3;
+  /** The perpendicular distance from the point to the line. */
+  distance: number;
+}
+/**
+ * The foot of the perpendicular from a point P to a line, and the distance to it.
+ *
+ * The foot F is the point on the line where PF is perpendicular to the direction, so
+ * (a + t b − p) · b = 0, which gives t = (p − a) · b ÷ (b · b). That one scalar-product condition
+ * is the whole method; the lab lets a learner slide along the line and watch PF · b pass through
+ * zero exactly where |PF| is smallest.
+ */
+declare function footOfPerpendicular(p: V3, line: Line3): Foot;
+/**
+ * What an author can get wrong that would leave the lab drawing nonsense.
+ *
+ * A zero direction vector is not a line at all, and a line that never enters the drawing sphere
+ * would leave the learner staring at an empty frame while the readout describes something unseen.
+ */
+declare function lineProblems(lines: readonly Line3[], R: number): string[];
+//#endregion
+export { Foot, Line3, LinePair, Relation, V3, footOfPerpendicular, lineProblems, relate };

package/dist/math/lines-in-space/core.mjs

@@ -0,0 +1,185 @@
+//#region src/math/lines-in-space/core.ts
+const add = (u, v) => [
+	u[0] + v[0],
+	u[1] + v[1],
+	u[2] + v[2]
+];
+const sub = (u, v) => [
+	u[0] - v[0],
+	u[1] - v[1],
+	u[2] - v[2]
+];
+const scale = (u, k) => [
+	u[0] * k,
+	u[1] * k,
+	u[2] * k
+];
+const dot = (u, v) => u[0] * v[0] + u[1] * v[1] + u[2] * v[2];
+const cross = (u, v) => [
+	u[1] * v[2] - u[2] * v[1],
+	u[2] * v[0] - u[0] * v[2],
+	u[0] * v[1] - u[1] * v[0]
+];
+const norm = (u) => Math.hypot(u[0], u[1], u[2]);
+const unit = (u) => {
+	const n = norm(u);
+	return n === 0 ? [
+		0,
+		0,
+		0
+	] : scale(u, 1 / n);
+};
+/** The point on the line at parameter t. */
+const pointAt = (line, t) => add(line.point, scale(line.direction, t));
+/**
+* The angle between two directions, from a · b = |a| |b| cos θ.
+*
+* `acute` gives the angle between two LINES, which the syllabus always wants acute: reversing a
+* direction vector describes the same line but turns θ into 180° − θ, so a line has no preferred
+* sense and the smaller angle is the answer.
+*/
+function angleBetween(u, v, acute = false) {
+	const d = norm(u) * norm(v);
+	if (d === 0) return NaN;
+	const c = Math.max(-1, Math.min(1, dot(u, v) / d));
+	const deg = Math.acos(c) * 180 / Math.PI;
+	return acute && deg > 90 ? 180 - deg : deg;
+}
+/**
+* How two lines stand relative to each other.
+*
+* The exam method solves two of the three component equations for s and t and then tests the
+* third: if it holds, the lines meet, and if not, they are skew. That test is exact on exam
+* numbers and fragile on anything else, so the classification here uses the closest approach
+* instead, which gives the same verdict and also says HOW FAR apart skew lines are, the quantity
+* the lab draws. With w = a₁ − a₂, the closest points solve the two conditions that the joining
+* segment is perpendicular to both directions.
+*/
+function relate(l1, l2) {
+	const u = l1.direction, v = l2.direction, w = sub(l1.point, l2.point);
+	const A = dot(u, u), B = dot(u, v), C = dot(v, v), D = dot(u, w), E = dot(v, w);
+	const size = Math.max(1, norm(l1.point), norm(l2.point));
+	if (norm(cross(u, v)) <= 1e-9 * Math.sqrt(A * C)) {
+		const gap = norm(cross(w, u)) / Math.sqrt(A);
+		const t = E / C;
+		return {
+			relation: gap <= 1e-9 * size ? "same" : "parallel",
+			angle: 0,
+			distance: gap,
+			s: 0,
+			t,
+			closest: [l1.point, pointAt(l2, t)],
+			point: null
+		};
+	}
+	const denom = A * C - B * B;
+	const s = (B * E - C * D) / denom;
+	const t = (A * E - B * D) / denom;
+	const p = pointAt(l1, s), q = pointAt(l2, t);
+	const distance = norm(sub(p, q));
+	const meets = distance <= 1e-9 * size;
+	return {
+		relation: meets ? "intersect" : "skew",
+		angle: angleBetween(u, v, true),
+		distance: meets ? 0 : distance,
+		s,
+		t,
+		closest: [p, q],
+		point: meets ? p : null
+	};
+}
+/**
+* The foot of the perpendicular from a point P to a line, and the distance to it.
+*
+* The foot F is the point on the line where PF is perpendicular to the direction, so
+* (a + t b − p) · b = 0, which gives t = (p − a) · b ÷ (b · b). That one scalar-product condition
+* is the whole method; the lab lets a learner slide along the line and watch PF · b pass through
+* zero exactly where |PF| is smallest.
+*/
+function footOfPerpendicular(p, line) {
+	const b = line.direction;
+	const t = dot(sub(p, line.point), b) / dot(b, b);
+	const foot = pointAt(line, t);
+	return {
+		t,
+		foot,
+		distance: norm(sub(p, foot))
+	};
+}
+/**
+* The parameter range for which the line lies inside a sphere of radius R about the origin.
+*
+* The drawing shows a line as a finite segment, and a sphere keeps its reach the same from every
+* viewing angle, so the picture does not change size as it is turned. Returns null when the line
+* passes entirely outside the sphere.
+*/
+function clipToSphere(line, R) {
+	const a = line.point, b = line.direction;
+	const A = dot(b, b), B = 2 * dot(a, b), C = dot(a, a) - R * R;
+	const disc = B * B - 4 * A * C;
+	if (A === 0 || disc <= 0) return null;
+	const root = Math.sqrt(disc);
+	return [(-B - root) / (2 * A), (-B + root) / (2 * A)];
+}
+/**
+* An orthographic view with z up.
+*
+* `yaw` turns the scene about the vertical axis and `pitch` tilts the viewer up above the ground,
+* both in degrees. At yaw 0 and pitch 0 the viewer looks along +y, so x runs to the right and z up;
+* a positive pitch looks down from above, which is what makes the ground plane visible at all.
+*/
+function project(p, yawDeg, pitchDeg) {
+	const yaw = yawDeg * Math.PI / 180, pitch = pitchDeg * Math.PI / 180;
+	const x1 = p[0] * Math.cos(yaw) - p[1] * Math.sin(yaw);
+	const y1 = p[0] * Math.sin(yaw) + p[1] * Math.cos(yaw);
+	const z1 = p[2];
+	return {
+		x: x1,
+		y: y1 * Math.sin(pitch) + z1 * Math.cos(pitch),
+		depth: y1 * Math.cos(pitch) - z1 * Math.sin(pitch)
+	};
+}
+/**
+* Where two drawn segments cross ON SCREEN, with the parameter along each. Null if they do not.
+*
+* This is not a 3D intersection: skew lines cross on screen all the time. It is what the picture
+* needs in order to draw the nearer line over the further one at that crossing, which is how a
+* flat drawing shows that two lines pass one another without meeting.
+*/
+function screenCrossing(p1, p2, q1, q2) {
+	const rx = p2[0] - p1[0], ry = p2[1] - p1[1], sx = q2[0] - q1[0], sy = q2[1] - q1[1];
+	const den = rx * sy - ry * sx;
+	if (Math.abs(den) < 1e-12) return null;
+	const u = ((q1[0] - p1[0]) * sy - (q1[1] - p1[1]) * sx) / den;
+	const v = ((q1[0] - p1[0]) * ry - (q1[1] - p1[1]) * rx) / den;
+	if (u < 0 || u > 1 || v < 0 || v > 1) return null;
+	return {
+		u,
+		v,
+		at: [p1[0] + u * rx, p1[1] + u * ry]
+	};
+}
+/** Round for display, dropping a spurious −0 and trailing zeros. */
+function fmt(n, digits = 2) {
+	const r = Number(n.toFixed(digits));
+	return (Object.is(r, -0) ? 0 : r).toString();
+}
+const fmtVec = (u, digits = 2) => `(${u.map((c) => fmt(c, digits)).join(", ")})`;
+/**
+* What an author can get wrong that would leave the lab drawing nonsense.
+*
+* A zero direction vector is not a line at all, and a line that never enters the drawing sphere
+* would leave the learner staring at an empty frame while the readout describes something unseen.
+*/
+function lineProblems(lines, R) {
+	const out = [];
+	lines.forEach((line, i) => {
+		const name = `line ${i + 1}`;
+		if (norm(line.direction) === 0) out.push(`${name} has a zero direction vector`);
+		else if (!clipToSphere(line, R)) out.push(`${name} does not pass within ${R} of the origin`);
+	});
+	return out;
+}
+
+//#endregion
+export { add, angleBetween, clipToSphere, dot, fmt, fmtVec, footOfPerpendicular, lineProblems, norm, pointAt, project, relate, scale, screenCrossing, sub, unit };

package/dist/math/lines-in-space/index.d.mts

@@ -0,0 +1,2 @@
+import { Foot, Line3, LinePair, Relation, V3, footOfPerpendicular, lineProblems, relate } from "./core.mjs";
+import { LinesInSpaceLab, LinesInSpaceProps, LinesMode } from "./preset.mjs";

package/dist/math/lines-in-space/preset.d.mts

@@ -0,0 +1,49 @@
+import { V3 } from "./core.mjs";
+import { ReactNode } from "react";
+
+//#region src/math/lines-in-space/preset.d.ts
+type LinesMode = 'vectors' | 'line' | 'two-lines' | 'perpendicular';
+interface LinesInSpaceProps {
+  /** Which part of the topic the lab shows. */
+  mode?: LinesMode;
+  /** vectors: the first vector. line, two-lines, perpendicular: a point on the (first) line. */
+  a?: V3;
+  /** vectors: the second vector, which the learner can edit. Otherwise the (first) direction. */
+  b?: V3;
+  /** two-lines: a point on the second line. */
+  c?: V3;
+  /** two-lines: the direction of the second line. */
+  d?: V3;
+  /** perpendicular: the point off the line. */
+  p?: V3;
+  /** vectors: make the checkpoint "make a · b zero" instead of "explore". */
+  goal?: 'perpendicular';
+  /** two-lines: ask for a verdict before revealing the closest approach. */
+  predict?: boolean;
+  /** Starting view, in degrees: turn about the vertical, and tilt above the ground. */
+  yaw?: number;
+  pitch?: number;
+  /** Radius of the drawn region around the origin. */
+  range?: number;
+  title?: string;
+  prompt?: string;
+  activity?: string;
+}
+declare function LinesInSpaceLab({
+  mode,
+  a,
+  b,
+  c,
+  d,
+  p,
+  goal,
+  predict,
+  yaw: initialYaw,
+  pitch,
+  range,
+  title,
+  prompt,
+  activity
+}?: LinesInSpaceProps): ReactNode;
+//#endregion
+export { LinesInSpaceLab, LinesInSpaceProps, LinesMode };