@classytic/labs 0.6.0 → 0.7.0

package/dist/domains/math/coordinate-geometry/point-line-distance/scene.mjs

@@ -2,12 +2,14 @@
 
 import { useControl } from "../../../../runtime/use-control.mjs";
 import { useLabView } from "../../../../runtime/use-lab-view.mjs";
+import { placeLabelBox, stageLabelBox } from "../../../../kit/diagram/label-placement.mjs";
 import { PlaneGrip } from "../../../../kit/plane-grip.mjs";
 import { CoordPlane, dotZone, num } from "../../../../kit/coords.mjs";
 import { RightAngleMark } from "../../../../kit/diagram/annotations.mjs";
 import { pointLineDistanceModel } from "./model.mjs";
-import { Dot, Label, Line, Segment } from "@classytic/stage";
+import { useCoords } from "@classytic/stage/core";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Dot, Label, Line, Segment } from "@classytic/stage/primitives";
 
 //#region src/domains/math/coordinate-geometry/point-line-distance/scene.tsx
 const VIEW = {
@@ -21,6 +23,79 @@ const C_P = "var(--stage-warn)";
 const C_PERP = "var(--stage-good)";
 const C_DROP = "var(--stage-danger)";
 const C_TOA = "var(--stage-muted)";
+/** Names share measured pixel space, including when P lies on the line near an endpoint. */
+function PointNames({ points, foot }) {
+	const coords = useCoords();
+	const pixels = points.map((point) => {
+		const [x, y] = coords.toPx(point.x, point.y);
+		return {
+			x,
+			y
+		};
+	});
+	const [fx, fy] = coords.toPx(foot.x, foot.y);
+	const occupied = [...pixels.map((point) => ({
+		...point,
+		halfWidth: 22,
+		halfHeight: 22
+	})), {
+		x: fx,
+		y: fy,
+		halfWidth: 8,
+		halfHeight: 8
+	}];
+	const names = [
+		"A",
+		"B",
+		"P"
+	];
+	return points.map((point, i) => {
+		const anchor = i === 0 ? "end" : "start";
+		const pointPx = pixels[i];
+		const dx = i === 0 ? -30 : 30;
+		const preferred = stageLabelBox(names[i], pointPx, {
+			size: 12,
+			weight: 700,
+			dx,
+			anchor
+		});
+		const candidates = [preferred, ...occupied.flatMap((box) => [
+			{
+				...preferred,
+				x: box.x - box.halfWidth - preferred.halfWidth - 8
+			},
+			{
+				...preferred,
+				x: box.x + box.halfWidth + preferred.halfWidth + 8
+			},
+			{
+				...preferred,
+				y: box.y - box.halfHeight - preferred.halfHeight - 8
+			},
+			{
+				...preferred,
+				y: box.y + box.halfHeight + preferred.halfHeight + 8
+			}
+		])].map((box) => placeLabelBox(box, {
+			width: coords.width,
+			height: coords.height
+		}, occupied));
+		const clear = candidates.filter((at) => occupied.every((box) => Math.abs(at.x - box.x) >= at.halfWidth + box.halfWidth + 6 || Math.abs(at.y - box.y) >= at.halfHeight + box.halfHeight + 6));
+		const placed = (clear.length ? clear : candidates).sort((a, b) => Math.hypot(a.x - pointPx.x, a.y - pointPx.y) - Math.hypot(b.x - pointPx.x, b.y - pointPx.y))[0];
+		occupied.push(placed);
+		return /* @__PURE__ */ jsx(Label, {
+			x: point.x,
+			y: point.y,
+			text: names[i],
+			color: C_LINE,
+			size: 12,
+			weight: 700,
+			dx: dx + placed.x - preferred.x,
+			dy: placed.y - preferred.y,
+			anchor
+		}, i);
+	});
+}
 function PointLineDistanceScene() {
 	const { reading: r } = useLabView(pointLineDistanceModel);
 	const aCtrl = useControl(pointLineDistanceModel, "pointA");
@@ -114,38 +189,13 @@ function PointLineDistanceScene() {
 				variant: "point",
 				ariaLabel: "point P, drag it"
 			}),
-			/* @__PURE__ */ jsx(Label, {
-				x: A.x,
-				y: A.y,
-				text: "A",
-				color: "var(--stage-accent-2)",
-				size: 12,
-				weight: 700,
-				dx: -14,
-				dy: 4,
-				anchor: "end"
-			}),
-			/* @__PURE__ */ jsx(Label, {
-				x: B.x,
-				y: B.y,
-				text: "B",
-				color: "var(--stage-accent)",
-				size: 12,
-				weight: 700,
-				dx: 10,
-				dy: 4,
-				anchor: "start"
-			}),
-			/* @__PURE__ */ jsx(Label, {
-				x: P.x,
-				y: P.y,
-				text: "P",
-				color: C_P,
-				size: 12,
-				weight: 700,
-				dx: 10,
-				dy: -8,
-				anchor: "start"
+			/* @__PURE__ */ jsx(PointNames, {
+				points: [
+					A,
+					B,
+					P
+				],
+				foot: r.foot
 			})
 		]
 	});

package/dist/domains/math/coordinate-geometry/point-reflection/activity.mjs

@@ -5,7 +5,7 @@ import { pointReflectionModel } from "./model.mjs";
 //#region src/domains/math/coordinate-geometry/point-reflection/activity.ts
 const PREDICT_QUESTIONS = [{
 	id: "image-location",
-	prompt: "P is reflected across the line to give its image P'. Where does P' actually end up?",
+	prompt: "P is off the mirror line and is reflected to give its image P'. Where does P' end up?",
 	choices: [
 		{
 			value: "opposite-equal",
@@ -14,7 +14,7 @@ const PREDICT_QUESTIONS = [{
 		{
 			value: "same-side-double",
 			label: "Same side, twice as far",
-			feedback: "Reflecting always crosses the line, it never stays on P's side. The image is on the OPPOSITE side, at the SAME distance, not double it on the same side."
+			feedback: "For a point off the mirror, the image is on the opposite side, at the same perpendicular distance. It is not twice as far on the same side."
 		},
 		{
 			value: "vertical-mirror",
@@ -23,7 +23,7 @@ const PREDICT_QUESTIONS = [{
 		}
 	],
 	answer: "opposite-equal",
-	explain: "The foot of the perpendicular from P is the midpoint of P and P'. That single fact forces both things at once: P' is on the far side of the line, and it is exactly as far from the line as P is."
+	explain: "The foot of the perpendicular is the midpoint of P and P'. A point off the mirror has its image on the opposite side, at the same distance. A point on the mirror is its own image."
 }];
 /** Predict where the image lands, then drag the line and point to test the rule. */
 const pointReflectionActivity = defineActivity(pointReflectionModel, () => labActivity({

package/dist/domains/math/coordinate-geometry/point-reflection/runtime.mjs

@@ -34,7 +34,7 @@ function PointReflection(props) {
 		scene: "direct",
 		sceneLabel: "Point P, the mirror line, and the reflected image P'",
 		status: ({ reading }) => /* @__PURE__ */ jsx(Status, { reading }),
-		observation: "P and P' sit the same distance from the line, on opposite sides, because the line is the perpendicular bisector of the segment joining them.",
+		observation: ({ reading }) => reading.dP < 1e-9 ? "P lies on the mirror line, so P' is the same point. Its perpendicular distance is 0, and reflection leaves it fixed." : "P and P' sit the same distance from the line, on opposite sides, because the line is the perpendicular bisector of the segment joining them.",
 		evidence: ({ reading }) => /* @__PURE__ */ jsxs("div", {
 			className: "math-equation-detail",
 			children: [

package/dist/domains/math/coordinate-geometry/point-reflection/scene.mjs

@@ -2,13 +2,15 @@
 
 import { useControl } from "../../../../runtime/use-control.mjs";
 import { useLabView } from "../../../../runtime/use-lab-view.mjs";
+import { placeDiagramLabel } from "../../../../kit/diagram/label-placement.mjs";
 import { PlaneGrip } from "../../../../kit/plane-grip.mjs";
 import { CoordPlane, dotZone, num } from "../../../../kit/coords.mjs";
 import { RightAngleMark } from "../../../../kit/diagram/annotations.mjs";
 import { useAsking } from "../../../../kit/shell/earned.mjs";
 import { pointReflectionModel } from "./model.mjs";
-import { Dot, Label, Line, Segment } from "@classytic/stage";
+import { useCoords } from "@classytic/stage/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Dot, Label, Line, Segment } from "@classytic/stage/primitives";
 
 //#region src/domains/math/coordinate-geometry/point-reflection/scene.tsx
 const VIEW = {
@@ -20,6 +22,124 @@ const VIEW = {
 const C_LINE = "var(--stage-fg)";
 const C_P = "var(--stage-warn)";
 const C_IMAGE = "var(--stage-good)";
+/** Names share measured screen space; a point on the mirror has one object/image name. */
+function PointNames({ points }) {
+	const coords = useCoords();
+	const pixels = points.map(({ at }) => {
+		const [x, y] = coords.toPx(at.x, at.y);
+		return {
+			x,
+			y
+		};
+	});
+	const [axisX, axisY] = coords.toPx(0, 0);
+	const occupied = [
+		...pixels.map((point) => ({
+			...point,
+			halfWidth: 22,
+			halfHeight: 22
+		})),
+		{
+			x: axisX - 12,
+			y: coords.height / 2,
+			halfWidth: 12,
+			halfHeight: coords.height / 2
+		},
+		{
+			x: coords.width / 2,
+			y: axisY + 12,
+			halfWidth: coords.width / 2,
+			halfHeight: 12
+		}
+	];
+	return points.map(({ at, text, color }, i) => {
+		const point = pixels[i];
+		const near = [...occupied].sort((a, b) => Math.hypot(a.x - point.x, a.y - point.y) - Math.hypot(b.x - point.x, b.y - point.y));
+		const sides = [
+			{
+				anchor: "end",
+				dx: -30,
+				dy: 0
+			},
+			{
+				anchor: "start",
+				dx: 30,
+				dy: 0
+			},
+			{
+				anchor: "middle",
+				dx: 0,
+				dy: -36
+			},
+			{
+				anchor: "middle",
+				dx: 0,
+				dy: 36
+			},
+			{
+				anchor: "start",
+				dx: 36,
+				dy: -24
+			},
+			{
+				anchor: "end",
+				dx: -36,
+				dy: -24
+			},
+			{
+				anchor: "start",
+				dx: 36,
+				dy: 24
+			},
+			{
+				anchor: "end",
+				dx: -36,
+				dy: 24
+			}
+		];
+		if (i !== 0) [sides[0], sides[1]] = [sides[1], sides[0]];
+		const candidates = sides.map((side) => ({
+			...side,
+			placed: placeDiagramLabel({
+				...point,
+				text,
+				size: 12,
+				weight: 700,
+				...side
+			}, {
+				width: coords.width,
+				height: coords.height
+			}, near)
+		}));
+		const clear = candidates.filter(({ placed: label }) => occupied.every((box) => Math.abs(label.x - box.x) >= label.halfWidth + box.halfWidth + 6 || Math.abs(label.y - box.y) >= label.halfHeight + box.halfHeight + 6));
+		const associated = clear.filter(({ placed }) => pixels.every((other) => Math.hypot(placed.x - point.x, placed.y - point.y) <= Math.hypot(placed.x - other.x, placed.y - other.y) + 1e-9));
+		const { anchor, placed } = (associated.length ? associated : clear.length ? clear : candidates).sort((a, b) => Math.hypot(a.placed.x - point.x, a.placed.y - point.y) - Math.hypot(b.placed.x - point.x, b.placed.y - point.y))[0];
+		occupied.push(placed);
+		const [lx, ly] = coords.toMath(Math.max(placed.x - placed.halfWidth, Math.min(placed.x + placed.halfWidth, point.x)), Math.max(placed.y - placed.halfHeight, Math.min(placed.y + placed.halfHeight, point.y)));
+		return /* @__PURE__ */ jsxs("g", {
+			pointerEvents: "none",
+			children: [Math.hypot(placed.x - point.x, placed.y - point.y) > 50 ? /* @__PURE__ */ jsx(Segment, {
+				from: at,
+				to: {
+					x: lx,
+					y: ly
+				},
+				color: "var(--stage-muted)",
+				weight: 1,
+				opacity: .5
+			}) : null, /* @__PURE__ */ jsx(Label, {
+				...at,
+				text,
+				color,
+				size: 12,
+				weight: 700,
+				anchor,
+				dx: placed.dx,
+				dy: placed.dy
+			})]
+		}, text);
+	});
+}
 function PointReflectionScene() {
 	const { reading: r } = useLabView(pointReflectionModel);
 	const aCtrl = useControl(pointReflectionModel, "pointA");
@@ -29,6 +149,7 @@ function PointReflectionScene() {
 	const A = aCtrl.value;
 	const B = bCtrl.value;
 	const P = pCtrl.value;
+	const onMirror = r.dP < 1e-9;
 	const equation = `${num(r.line.a)}x ${r.line.b >= 0 ? "+" : "-"} ${num(Math.abs(r.line.b))}y ${r.line.c >= 0 ? "+" : "-"} ${num(Math.abs(r.line.c))} = 0`;
 	return /* @__PURE__ */ jsxs(CoordPlane, {
 		view: VIEW,
@@ -47,6 +168,21 @@ function PointReflectionScene() {
 				color: C_LINE,
 				weight: 2.5
 			}),
+			aCtrl.hidden ? /* @__PURE__ */ jsx(Dot, {
+				...A,
+				r: 5,
+				color: "var(--stage-accent-2)"
+			}) : null,
+			bCtrl.hidden ? /* @__PURE__ */ jsx(Dot, {
+				...B,
+				r: 5,
+				color: "var(--stage-accent)"
+			}) : null,
+			pCtrl.hidden ? /* @__PURE__ */ jsx(Dot, {
+				...P,
+				r: 5,
+				color: C_P
+			}) : null,
 			showImage ? /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx(Segment, {
 					from: P,
@@ -103,56 +239,34 @@ function PointReflectionScene() {
 				variant: "point",
 				ariaLabel: "point P, drag it"
 			}),
-			showImage ? /* @__PURE__ */ jsx(Dot, {
+			showImage && !onMirror ? /* @__PURE__ */ jsx(Dot, {
 				x: r.image.x,
 				y: r.image.y,
 				r: 6,
 				color: C_IMAGE
 			}) : null,
-			/* @__PURE__ */ jsx(Label, {
-				x: A.x,
-				y: A.y,
-				text: "A",
-				color: "var(--stage-accent-2)",
-				size: 12,
-				weight: 700,
-				dx: -14,
-				dy: 4,
-				anchor: "end"
-			}),
-			/* @__PURE__ */ jsx(Label, {
-				x: B.x,
-				y: B.y,
-				text: "B",
-				color: "var(--stage-accent)",
-				size: 12,
-				weight: 700,
-				dx: 10,
-				dy: 4,
-				anchor: "start"
-			}),
-			/* @__PURE__ */ jsx(Label, {
-				x: P.x,
-				y: P.y,
-				text: "P",
-				color: C_P,
-				size: 12,
-				weight: 700,
-				dx: 10,
-				dy: -8,
-				anchor: "start"
-			}),
-			showImage ? /* @__PURE__ */ jsx(Label, {
-				x: r.image.x,
-				y: r.image.y,
-				text: "P'",
-				color: C_IMAGE,
-				size: 12,
-				weight: 700,
-				dx: 10,
-				dy: -8,
-				anchor: "start"
-			}) : null
+			/* @__PURE__ */ jsx(PointNames, { points: [
+				{
+					at: A,
+					text: "A",
+					color: C_LINE
+				},
+				{
+					at: B,
+					text: "B",
+					color: "var(--stage-accent)"
+				},
+				{
+					at: P,
+					text: showImage && onMirror ? "P = P′" : "P",
+					color: C_LINE
+				},
+				...showImage && !onMirror ? [{
+					at: r.image,
+					text: "P'",
+					color: C_LINE
+				}] : []
+			] })
 		]
 	});
 }

package/dist/domains/math/coordinate-geometry/polar-cartesian/model.mjs

@@ -56,7 +56,7 @@ const polarCartesianModel = defineLabModel({
 	},
 	initial: (s) => ({
 		P: s.pointP,
-		visitedPositiveX: s.pointP.x >= 0,
+		visitedPositiveX: s.pointP.x > 0,
 		visitedNegativeX: s.pointP.x < 0
 	}),
 	controls: (c) => ({ point: c.point({
@@ -78,7 +78,7 @@ const polarCartesianModel = defineLabModel({
 		get: (st) => st.P,
 		set: (st, v) => ({
 			P: v,
-			visitedPositiveX: st.visitedPositiveX || v.x >= 0,
+			visitedPositiveX: st.visitedPositiveX || v.x > 0,
 			visitedNegativeX: st.visitedNegativeX || v.x < 0
 		})
 	}) }),
@@ -88,17 +88,21 @@ const polarCartesianModel = defineLabModel({
 			re: x,
 			im: y
 		};
-		const { r, theta } = complex.toPolar(z);
-		const thetaDeg = complex.argDeg(z);
-		const naive = Math.atan(y / x);
-		const naiveDeg = naive * 180 / Math.PI;
+		const r = complex.abs(z);
+		const argument = complex.principalArgument(z);
+		const theta = argument?.radians ?? null;
+		const thetaDeg = argument?.degrees ?? null;
+		const naive = x === 0 ? null : Math.atan(y / x);
+		const naiveDeg = naive === null ? null : naive * 180 / Math.PI;
 		const wrong = x < 0;
-		const ghost = {
+		const ghost = naive === null ? null : {
 			x: r * Math.cos(naive),
 			y: r * Math.sin(naive)
 		};
+		const comparison = argument === null ? "undefined-angle" : naive === null ? "undefined-shortcut" : wrong ? "wrong-quadrant" : "agrees";
 		return {
 			P: st.P,
+			comparison,
 			r,
 			theta,
 			thetaDeg,
@@ -115,7 +119,7 @@ const polarCartesianModel = defineLabModel({
 		visitedPositiveX: true,
 		visitedNegativeX: true
 	}),
-	describe: (s, st, r) => r.wrong ? `P is at ${st.P.x.toFixed(1)}, ${st.P.y.toFixed(1)}. r is ${r.r.toFixed(1)}, theta is ${r.thetaDeg.toFixed(1)} degrees. The naive atan of y over x alone gives ${r.naiveDeg.toFixed(1)} degrees, the wrong quadrant.` : `P is at ${st.P.x.toFixed(1)}, ${st.P.y.toFixed(1)}. r is ${r.r.toFixed(1)}, theta is ${r.thetaDeg.toFixed(1)} degrees. The naive shortcut agrees here.`
+	describe: (s, st, r) => r.thetaDeg === null ? `P is at the origin. r is 0; its argument is undefined. The atan(y/x) shortcut is also undefined, so no angle comparison is available.` : r.naiveDeg === null ? `P is on the y-axis. r is ${r.r.toFixed(1)}, theta is ${r.thetaDeg.toFixed(1)} degrees. The atan(y/x) shortcut is undefined because x is zero.` : r.wrong ? `P is at ${st.P.x.toFixed(1)}, ${st.P.y.toFixed(1)}. r is ${r.r.toFixed(1)}, theta is ${r.thetaDeg.toFixed(1)} degrees. The naive atan of y over x alone gives ${r.naiveDeg.toFixed(1)} degrees, the wrong quadrant.` : `P is at ${st.P.x.toFixed(1)}, ${st.P.y.toFixed(1)}. r is ${r.r.toFixed(1)}, theta is ${r.thetaDeg.toFixed(1)} degrees. The naive shortcut agrees here.`
 });
 
 //#endregion

package/dist/domains/math/coordinate-geometry/polar-cartesian/runtime.mjs

@@ -16,12 +16,12 @@ function PolarCartesian(props) {
 		className: "math-polar-cartesian",
 		layout: "stack",
 		sceneLabel: "P, its true ray, and the naive shortcut's ghost ray",
-		status: ({ reading, sequence }) => !sequence.shows("angle") ? null : reading.wrong ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("strong", { children: ["r ", reading.r.toFixed(1)] }), /* @__PURE__ */ jsxs("span", { children: [
+		status: ({ reading, sequence }) => !sequence.shows("angle") ? null : reading.comparison === "undefined-angle" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("strong", { children: "r 0" }), /* @__PURE__ */ jsx("span", { children: "Argument undefined at the origin" })] }) : reading.comparison === "undefined-shortcut" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("strong", { children: ["r ", reading.r.toFixed(1)] }), /* @__PURE__ */ jsx("span", { children: "atan(y/x) undefined: x is zero" })] }) : reading.wrong ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("strong", { children: ["r ", reading.r.toFixed(1)] }), /* @__PURE__ */ jsxs("span", { children: [
 			"atan(y/x) gives ",
-			reading.naiveDeg.toFixed(1),
+			reading.naiveDeg?.toFixed(1),
 			"°: wrong quadrant"
 		] })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("strong", { children: ["r ", reading.r.toFixed(1)] }), /* @__PURE__ */ jsx("span", { children: "atan(y/x) agrees here" })] }),
-		observation: ({ reading, sequence }) => !sequence.shows("angle") ? undefined : reading.wrong ? "P has a negative x, so atan(y/x) alone points into the OPPOSITE quadrant, mirrored through the origin. Add 180° to correct it to the true angle." : "P has a positive x, so atan(y/x) alone already agrees with the robust angle.",
+		observation: ({ reading, sequence }) => !sequence.shows("angle") ? undefined : reading.comparison === "undefined-angle" ? "The origin has no direction, so its argument is undefined. The expression y/x is 0/0 here; the methods cannot be compared." : reading.comparison === "undefined-shortcut" ? "The robust argument is defined on the y-axis, but y/x divides by zero. The naive shortcut cannot be compared here." : reading.wrong ? "P has a negative x, so atan(y/x) alone points into the OPPOSITE quadrant, mirrored through the origin. A half-turn corrects its direction; write the result in the chosen principal-angle range." : "P has a positive x, so atan(y/x) alone already agrees with the robust angle.",
 		children: /* @__PURE__ */ jsx(PolarCartesianScene, {})
 	});
 }

package/dist/domains/math/coordinate-geometry/polar-cartesian/scene.mjs

@@ -3,13 +3,13 @@
 import { Tex } from "../../../../core/tex.mjs";
 import { useControl } from "../../../../runtime/use-control.mjs";
 import { useLabView } from "../../../../runtime/use-lab-view.mjs";
-import { useReveal } from "../../../../runtime/use-reveal.mjs";
 import { PlaneGrip } from "../../../../kit/plane-grip.mjs";
 import { CoordPlane, num } from "../../../../kit/coords.mjs";
 import { AngleArc } from "../../../../kit/diagram/annotations.mjs";
+import { useReveal } from "../../../../runtime/use-reveal.mjs";
 import { polarCartesianModel } from "./model.mjs";
-import { Dot, Label, Segment } from "@classytic/stage";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Dot, Label, Segment } from "@classytic/stage/primitives";
 
 //#region src/domains/math/coordinate-geometry/polar-cartesian/scene.tsx
 const C_TRUE = "var(--stage-good)";
@@ -22,9 +22,9 @@ function PolarCartesianScene() {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(CoordPlane, {
 		view: s.view,
 		height: 380,
-		ariaLabel: showAngle ? `P at ${num(P.x)}, ${num(P.y)}: r ${num(r)}, theta ${num(thetaDeg, 1)} degrees` : `P at ${num(P.x)}, ${num(P.y)}, with its ray from the origin`,
+		ariaLabel: showAngle ? `P at ${num(P.x)}, ${num(P.y)}: r ${num(r)}, theta ${thetaDeg === null ? "undefined" : num(thetaDeg, 1)} degrees` : `P at ${num(P.x)}, ${num(P.y)}, with its ray from the origin`,
 		children: [
-			wrong && showAngle && /* @__PURE__ */ jsx(Segment, {
+			wrong && ghost && showAngle && /* @__PURE__ */ jsx(Segment, {
 				from: {
 					x: 0,
 					y: 0
@@ -43,7 +43,7 @@ function PolarCartesianScene() {
 				color: C_TRUE,
 				weight: 3
 			}),
-			/* @__PURE__ */ jsx(AngleArc, {
+			thetaDeg !== null && /* @__PURE__ */ jsx(AngleArc, {
 				at: {
 					x: 0,
 					y: 0
@@ -54,7 +54,7 @@ function PolarCartesianScene() {
 				},
 				to: P,
 				color: C_TRUE,
-				...showAngle ? { label: `${num(thetaDeg, 1)}°` } : {}
+				...showAngle ? { label: `${thetaDeg === null ? "undefined" : num(thetaDeg, 1)}°` } : {}
 			}),
 			/* @__PURE__ */ jsx(Dot, {
 				x: 0,
@@ -62,7 +62,7 @@ function PolarCartesianScene() {
 				r: 3,
 				color: "var(--stage-fg)"
 			}),
-			wrong && showAngle && /* @__PURE__ */ jsx(Dot, {
+			wrong && ghost && showAngle && /* @__PURE__ */ jsx(Dot, {
 				x: ghost.x,
 				y: ghost.y,
 				r: 5,
@@ -89,7 +89,7 @@ function PolarCartesianScene() {
 				dy: -8,
 				anchor: "start"
 			}),
-			wrong && showAngle && /* @__PURE__ */ jsx(Label, {
+			wrong && ghost && showAngle && /* @__PURE__ */ jsx(Label, {
 				x: ghost.x,
 				y: ghost.y,
 				text: "atan(y/x)",
@@ -111,7 +111,7 @@ function PolarCartesianScene() {
 						children: "robust:"
 					}),
 					" ",
-					/* @__PURE__ */ jsx(Tex, { tex: `\\theta = \\operatorname{atan2}(${num(P.y)}, ${num(P.x)}) = ${num(thetaDeg, 1)}°` })
+					thetaDeg === null ? /* @__PURE__ */ jsx("span", { children: "argument undefined at the origin" }) : /* @__PURE__ */ jsx(Tex, { tex: `\\theta = \\operatorname{atan2}(${num(P.y)}, ${num(P.x)}) = ${thetaDeg === null ? "undefined" : num(thetaDeg, 1)}°` })
 				]
 			}),
 			/* @__PURE__ */ jsxs("span", {
@@ -122,10 +122,10 @@ function PolarCartesianScene() {
 						children: "naive shortcut:"
 					}),
 					" ",
-					/* @__PURE__ */ jsx(Tex, { tex: `\\theta = \\operatorname{atan}\\!\\left(\\dfrac{${num(P.y)}}{${num(P.x)}}\\right) = ${num(naiveDeg, 1)}°` })
+					naiveDeg === null ? /* @__PURE__ */ jsx("span", { children: "undefined because x is zero" }) : /* @__PURE__ */ jsx(Tex, { tex: `\\theta = \\operatorname{atan}\\!\\left(\\dfrac{${num(P.y)}}{${num(P.x)}}\\right) = ${naiveDeg === null ? "undefined" : num(naiveDeg, 1)}°` })
 				]
 			}),
-			wrong && /* @__PURE__ */ jsxs("span", {
+			wrong && naiveDeg !== null && thetaDeg !== null && /* @__PURE__ */ jsxs("span", {
 				className: "math-equation-line",
 				children: [
 					/* @__PURE__ */ jsx("span", {
@@ -133,7 +133,7 @@ function PolarCartesianScene() {
 						children: "correction needed:"
 					}),
 					" ",
-					/* @__PURE__ */ jsx(Tex, { tex: `${num(naiveDeg, 1)}° + 180° = ${num(naiveDeg + 180, 1)}°` })
+					/* @__PURE__ */ jsx(Tex, { tex: `\\theta = ${num(thetaDeg, 1)}° \\pmod{360°}` })
 				]
 			})
 		]

package/dist/domains/math/coordinate-geometry/radical-axis/scene.mjs

@@ -7,8 +7,8 @@ import { CoordPlane, dotZone } from "../../../../kit/coords.mjs";
 import { RightAngleMark } from "../../../../kit/diagram/annotations.mjs";
 import { useAsking } from "../../../../kit/shell/earned.mjs";
 import { radicalAxisModel } from "./model.mjs";
-import { Circle, Dot, Label, Line, Segment } from "@classytic/stage";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Circle, Dot, Label, Line, Segment } from "@classytic/stage/primitives";
 
 //#region src/domains/math/coordinate-geometry/radical-axis/scene.tsx
 const VIEW = {

package/dist/domains/math/coordinate-geometry/section-formula/scene.mjs

@@ -8,8 +8,8 @@ import { PlaneGrip } from "../../../../kit/plane-grip.mjs";
 import { CoordPlane, dotZone, num } from "../../../../kit/coords.mjs";
 import { useEarned } from "../../../../kit/shell/earned.mjs";
 import { sectionFormulaModel } from "./model.mjs";
-import { Dot, Label, Line, Segment } from "@classytic/stage";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Dot, Label, Line, Segment } from "@classytic/stage/primitives";
 
 //#region src/domains/math/coordinate-geometry/section-formula/scene.tsx
 const C_A = "var(--stage-good)";

package/dist/domains/math/coordinate-geometry/straight-line/scene.mjs

@@ -4,11 +4,11 @@ import { Stat, StatList } from "../../../../kit/frame.mjs";
 import { useControl } from "../../../../runtime/use-control.mjs";
 import { useLabView } from "../../../../runtime/use-lab-view.mjs";
 import { PlaneGrip } from "../../../../kit/plane-grip.mjs";
-import { CoordPlane, GradientTriangle, clearOfLabel as clearOfLabel$1, dotZone, interceptTex, lineTex, num } from "../../../../kit/coords.mjs";
+import { CoordPlane, GradientTriangle, clearOfLabel as clearOfLabel$1, dotZone, gradientTriangleLabels, interceptTex, lineTex, num } from "../../../../kit/coords.mjs";
 import { RightAngleMark } from "../../../../kit/diagram/annotations.mjs";
 import { straightLineModel } from "./model.mjs";
-import { Dot, Label, Line } from "@classytic/stage";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Dot, Label, Line } from "@classytic/stage/primitives";
 
 //#region src/domains/math/coordinate-geometry/straight-line/scene.tsx
 const C_LINE = "var(--stage-accent)";
@@ -208,13 +208,16 @@ function StraightLineScene() {
 		const triangleB = A.x <= B.x ? B : A;
 		const rise = triangleB.y - triangleA.y;
 		const run = triangleB.x - triangleA.x;
+		const labels = gradientTriangleLabels(triangleA, triangleB, scenario.view);
 		clear.push(clearOfLabel$1((triangleA.x + triangleB.x) / 2, triangleA.y, `Δx = ${num(run)}`, {
-			size: 11,
-			dy: rise >= 0 ? 14 : -8
+			size: labels.run.size,
+			dx: labels.run.dx,
+			dy: labels.run.dy
 		}), clearOfLabel$1(triangleB.x, (triangleA.y + triangleB.y) / 2, `Δy = ${num(rise)}`, {
-			size: 11,
-			dx: run >= 0 ? 8 : -8,
-			anchor: run >= 0 ? "start" : "end"
+			size: labels.rise.size,
+			dx: run >= 0 ? labels.rise.offset : -labels.rise.offset,
+			dy: labels.rise.dy,
+			anchor: labels.rise.centered ? "middle" : run >= 0 ? "start" : "end"
 		}));
 		figure = /* @__PURE__ */ jsxs(Fragment, { children: [
 			/* @__PURE__ */ jsx(Line, {

package/dist/domains/math/coordinate-geometry/tangent-length-power-of-point/scene.mjs

@@ -6,8 +6,8 @@ import { PlaneGrip } from "../../../../kit/plane-grip.mjs";
 import { CoordPlane, circleTex, dotZone } from "../../../../kit/coords.mjs";
 import { RightAngleMark } from "../../../../kit/diagram/annotations.mjs";
 import { tangentLengthPowerOfPointModel } from "./model.mjs";
-import { Circle, Dot, Label, Segment } from "@classytic/stage";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Circle, Dot, Label, Segment } from "@classytic/stage/primitives";
 
 //#region src/domains/math/coordinate-geometry/tangent-length-power-of-point/scene.tsx
 const VIEW = {