@classytic/labs 0.2.0 → 0.3.0

package/dist/physics/kepler/preset.mjs

@@ -2,12 +2,15 @@
 
 import { clamp } from "../../core/util.mjs";
 import { Chip, Slider } from "../../kit/controls.mjs";
-import { Callout, Control, ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { Control, Field, LiveRegion } from "../../kit/frame.mjs";
+import { AuthoredActivityRuntime, AuthoredMetricGate } from "../../kit/authored-activity-runtime.mjs";
+import { MechanicsVector, SceneSurface, SimulationTransport } from "../mechanics/presentation.mjs";
 import { useFrameTick } from "../../kit/anim.mjs";
-import { PlayWrap, usePlayGate } from "../../kit/play.mjs";
+import { usePlayGate } from "../../kit/play.mjs";
 import { EarthGlyph, SunGlyph } from "../../kit/space.mjs";
+import { ellipseStateAtMeanAnomaly, keplerPeriod } from "../orbital/core.mjs";
 import { useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Dot, Label, Polygon, Polyline, Segment, Stage } from "@classytic/stage";
 
 //#region src/physics/kepler/preset.tsx
@@ -24,33 +27,132 @@ import { Dot, Label, Polygon, Polyline, Segment, Stage } from "@classytic/stage"
 * Drag eccentricity from a circle to a stretched ellipse; drag the semi-major
 * axis and watch the period balloon. Ambient PlayWrap. Tokenized SVG.
 */
+const KEPLER_ACTIVITY = {
+	pattern: "investigation",
+	title: "Equal areas, unequal speeds",
+	objectives: [
+		"Locate a star at an ellipse focus",
+		"Explain equal areas in equal times",
+		"Relate semi-major axis to orbital period"
+	],
+	steps: [
+		{
+			id: "predict",
+			phase: "predict",
+			title: "Predict the fastest point",
+			lead: "Commit before playing the orbit.",
+			success: "speed-answer"
+		},
+		{
+			id: "act",
+			phase: "act",
+			title: "Play one orbit",
+			lead: "Watch the planet change speed around the ellipse.",
+			controls: true,
+			reveal: ["model"],
+			success: "played"
+		},
+		{
+			id: "observe",
+			phase: "observe",
+			title: "Compare equal-time wedges",
+			lead: "Compare wedge shapes while their areas remain equal.",
+			controls: true,
+			reveal: ["model", "evidence"]
+		},
+		{
+			id: "explain",
+			phase: "explain",
+			title: "Explain the speed change",
+			lead: "Use equal swept area to explain fast perihelion motion."
+		},
+		{
+			id: "transfer",
+			phase: "transfer",
+			title: "Stretch the orbit",
+			lead: "Change eccentricity or semi-major axis and compare period.",
+			controls: true,
+			reveal: ["model", "evidence"],
+			success: "orbit-changed"
+		}
+	],
+	questions: [{
+		id: "speed",
+		prompt: "Where does a planet move fastest in an elliptical orbit?",
+		choices: [
+			{
+				value: "perihelion",
+				label: "At perihelion, nearest the star"
+			},
+			{
+				value: "aphelion",
+				label: "At aphelion, farthest away"
+			},
+			{
+				value: "constant",
+				label: "Its speed is constant"
+			}
+		],
+		answer: "perihelion",
+		explain: "The radius is shorter near perihelion, so sweeping equal area in equal time requires a longer arc and greater speed."
+	}],
+	success: [
+		{
+			id: "speed-answer",
+			source: "answer",
+			key: "speed",
+			operator: "eq",
+			value: "perihelion",
+			pendingLabel: "Choose where orbital speed is greatest."
+		},
+		{
+			id: "played",
+			source: "metric",
+			key: "played",
+			operator: "eq",
+			value: true,
+			pendingLabel: "Play the orbit."
+		},
+		{
+			id: "orbit-changed",
+			source: "metric",
+			key: "orbitChanged",
+			operator: "eq",
+			value: true,
+			pendingLabel: "Change the orbit shape or size."
+		}
+	]
+};
 const N_WEDGE = 12;
-/** Solve Kepler's equation M = E − e·sinE for the eccentric anomaly E. */
-function solveE(M, e) {
-	let E = M;
-	for (let i = 0; i < 6; i++) E = E - (E - e * Math.sin(E) - M) / (1 - e * Math.cos(E));
-	return E;
-}
-function KeplerLab({ semiMajor = 4, eccentricity = .5, wedges = true, title = "Kepler: equal areas in equal time", prompt = "The planet rides a true ellipse with the star at a focus. It speeds up near the star and slows far away, yet the wedge it sweeps in each equal time-slice has the SAME area (Kepler’s 2nd law). Stretch the orbit, and the period grows as T² ∝ a³.", objectives, controlConfig }) {
-	const [a, setA] = useState(semiMajor);
-	const [e, setE] = useState(eccentricity);
+function KeplerLab({ semiMajor = 4, eccentricity = .5, wedges = true, title = "Kepler: equal areas in equal time", prompt = "The planet rides a true ellipse with the star at a focus. It speeds up near the star and slows far away, yet the wedge it sweeps in each equal time-slice has the same area (Kepler’s 2nd law). Stretch the orbit, and the period grows as T² ∝ a³.", objectives, controlConfig, activity = "kepler" }) {
+	const activityId = typeof activity === "string" ? activity : "kepler";
+	const authoredActivity = typeof activity === "string" ? KEPLER_ACTIVITY : activity;
+	const [a, setA] = useState(clamp(semiMajor, 2.5, 5));
+	const [e, setE] = useState(clamp(eccentricity, 0, .85));
 	const [showWedge, setShowWedge] = useState(wedges);
 	const gate = usePlayGate();
 	const tRef = useRef(0);
 	const c = a * e;
 	const b = a * Math.sqrt(1 - e * e);
-	const T = Math.pow(a, 1.5) * 1.6;
+	const T = keplerPeriod(a, 1.6);
 	useFrameTick(gate.running, (f) => {
 		tRef.current += Math.min(.05, f.dtMs / 1e3);
 	});
 	const pos = (M) => {
-		const E = solveE(M, e);
+		const state = ellipseStateAtMeanAnomaly(a, e, M);
 		return {
-			x: -c + a * Math.cos(E),
-			y: b * Math.sin(E)
+			x: state.x,
+			y: state.y
 		};
 	};
-	const planet = pos(2 * Math.PI * (tRef.current / T) % (2 * Math.PI));
+	const M0 = 2 * Math.PI * (tRef.current / T) % (2 * Math.PI);
+	const planet = pos(M0);
+	const nextPlanet = pos(M0 + .035);
+	const velocityScale = 4.5;
+	const velocityTip = {
+		x: planet.x + (nextPlanet.x - planet.x) * velocityScale,
+		y: planet.y + (nextPlanet.y - planet.y) * velocityScale
+	};
 	const outline = [];
 	for (let i = 0; i <= 96; i++) {
 		const E = i / 96 * 2 * Math.PI;
@@ -59,41 +161,75 @@ function KeplerLab({ semiMajor = 4, eccentricity = .5, wedges = true, title = "K
 			y: b * Math.sin(E)
 		});
 	}
-	const wedgePts = [];
-	for (let i = 0; i <= N_WEDGE; i++) wedgePts.push(pos(2 * Math.PI * i / N_WEDGE));
+	/**
+	* One equal-time wedge, bounded by the ORBIT rather than by a straight chord.
+	*
+	* This used to draw a triangle from the focus to the two end points. A triangle is not the
+	* region the planet sweeps: the far edge is the curved path, and the curvature differs between
+	* perihelion and aphelion. Measured across twelve slices the triangles varied by 29.6% in area
+	* while the true sectors agree to 0.1%, and the perihelion wedge came out the SMALLEST. So the
+	* picture showed the opposite of the law printed beside it. Following the arc costs a handful
+	* of points and makes the equality something a learner can actually see.
+	*/
+	const wedge = (index) => {
+		const from = 2 * Math.PI * index / N_WEDGE;
+		const to = 2 * Math.PI * (index + 1) / N_WEDGE;
+		const arc = [{
+			x: 0,
+			y: 0
+		}];
+		for (let k = 0; k <= 14; k++) arc.push(pos(from + (to - from) * k / 14));
+		return arc;
+	};
+	const polygonArea = (pts) => {
+		let sum = 0;
+		for (let i = 0; i < pts.length; i++) {
+			const p = pts[i];
+			const q = pts[(i + 1) % pts.length];
+			sum += p.x * q.y - q.x * p.y;
+		}
+		return Math.abs(sum) / 2;
+	};
+	const nearIndex = 0;
+	const farIndex = Math.floor(N_WEDGE / 2);
+	const nearWedge = wedge(nearIndex);
+	const farWedge = wedge(farIndex);
+	const nearArea = polygonArea(nearWedge);
+	const farArea = polygonArea(farWedge);
 	const peri = a * (1 - e), apo = a * (1 + e);
-	const figure = /* @__PURE__ */ jsx(PlayWrap, {
-		gate,
-		children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Stage, {
-			view: {
-				xMin: -(a + c) - 1,
-				xMax: a - c + 1,
-				yMin: -b - 1,
-				yMax: b + 1
-			},
+	const view = {
+		xMin: -(a + c) - 1,
+		xMax: a - c + 1,
+		yMin: -b - 1,
+		yMax: b + 1
+	};
+	const figure = /* @__PURE__ */ jsx(SceneSurface, {
+		ref: gate.ref,
+		tone: "space",
+		children: /* @__PURE__ */ jsxs(Stage, {
+			view,
 			height: 300,
 			preserveAspect: true,
 			ariaLabel: `Elliptical orbit, eccentricity ${e.toFixed(2)}, star at a focus`,
 			children: [
-				showWedge && wedgePts.slice(0, N_WEDGE).map((p, i) => /* @__PURE__ */ jsx(Polygon, {
-					points: [
-						{
-							x: 0,
-							y: 0
-						},
-						p,
-						wedgePts[i + 1]
-					],
-					color: "none",
-					fill: i % 2 === 0 ? "var(--stage-accent)" : "var(--stage-accent-2)",
-					fillOpacity: .22,
-					weight: 0
-				}, i)),
+				showWedge && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Polygon, {
+					points: nearWedge,
+					color: "var(--stage-warn)",
+					fill: "var(--stage-warn)",
+					fillOpacity: .45,
+					weight: 1.4
+				}), /* @__PURE__ */ jsx(Polygon, {
+					points: farWedge,
+					color: "var(--stage-good)",
+					fill: "var(--stage-good)",
+					fillOpacity: .45,
+					weight: 1.4
+				})] }),
 				/* @__PURE__ */ jsx(Polyline, {
 					points: outline,
-					color: "var(--stage-fg)",
-					opacity: .45,
-					weight: 1.5
+					color: "var(--stage-accent)",
+					opacity: .72,
+					weight: 2.2
 				}),
 				/* @__PURE__ */ jsx(Segment, {
 					from: {
@@ -128,7 +264,7 @@ function KeplerLab({ semiMajor = 4, eccentricity = .5, wedges = true, title = "K
 					text: "perihelion",
 					color: "var(--stage-muted)",
 					size: 9,
-					dy: -6,
+					dy: 14,
 					anchor: "end"
 				}),
 				/* @__PURE__ */ jsx(Label, {
@@ -154,102 +290,130 @@ function KeplerLab({ semiMajor = 4, eccentricity = .5, wedges = true, title = "K
 					center: planet,
 					r: .34,
 					atmosphere: false
+				}),
+				/* @__PURE__ */ jsx(MechanicsVector, {
+					tail: planet,
+					tip: velocityTip,
+					color: "var(--stage-good)",
+					label: "v",
+					labelDy: -7,
+					labelSize: 11,
+					active: true
 				})
 			]
-		}) })
+		})
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		objectives,
-		aside: /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				flexDirection: "column",
-				gap: 10
-			},
+	const aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "physics-orbital-ledger",
 			children: [
-				/* @__PURE__ */ jsx(Callout, {
-					tone: "result",
-					children: /* @__PURE__ */ jsxs("span", {
-						style: {
-							display: "grid",
-							gap: 4,
-							fontVariantNumeric: "tabular-nums"
-						},
-						children: [
-							/* @__PURE__ */ jsxs("span", { children: [
-								"eccentricity e = ",
-								/* @__PURE__ */ jsx("strong", { children: e.toFixed(2) }),
-								" ",
-								e < .02 ? "(circle)" : ""
-							] }),
-							/* @__PURE__ */ jsxs("span", { children: [
-								"perihelion ",
-								peri.toFixed(1),
-								" · aphelion ",
-								apo.toFixed(1)
-							] }),
-							/* @__PURE__ */ jsxs("span", { children: [
-								"period T ∝ a^1.5 = ",
-								/* @__PURE__ */ jsx("strong", { children: T.toFixed(1) }),
-								" · T²/a³ = ",
-								/* @__PURE__ */ jsx("strong", { children: (T * T / (a * a * a)).toFixed(2) })
-							] })
-						]
-					})
-				}),
-				/* @__PURE__ */ jsxs("p", {
-					style: {
-						fontSize: 12,
-						opacity: .75,
-						margin: 0
-					},
-					children: [
-						"Each shaded wedge is one equal time-slice, they look different but enclose the ",
-						/* @__PURE__ */ jsx("strong", { children: "same area" }),
-						"(Kepler’s 2nd law), so the planet must move fastest at perihelion. T²/a³ stays constant as you widen the orbit (Kepler’s 3rd law)."
-					]
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Eccentricity · e" }), /* @__PURE__ */ jsxs("strong", { children: [e.toFixed(2), e < .02 ? " · circle" : ""] })] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Perihelion · aphelion" }), /* @__PURE__ */ jsxs("strong", { children: [
+					peri.toFixed(1),
+					" · ",
+					apo.toFixed(1)
+				] })] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Period · T ∝ a¹·⁵" }), /* @__PURE__ */ jsx("strong", { children: T.toFixed(1) })] }),
+				/* @__PURE__ */ jsxs("div", {
+					"data-highlight": true,
+					children: [/* @__PURE__ */ jsx("span", { children: "Kepler invariant · T²/a³" }), /* @__PURE__ */ jsx("strong", { children: (T * T / (a * a * a)).toFixed(2) })]
 				}),
-				/* @__PURE__ */ jsx(LiveRegion, { children: `Eccentricity ${e.toFixed(2)}, period ${T.toFixed(1)}. Equal-time wedges have equal area.` })
+				/* @__PURE__ */ jsxs("div", {
+					"data-highlight": true,
+					children: [/* @__PURE__ */ jsx("span", { children: "Wedge area · near · far" }), /* @__PURE__ */ jsxs("strong", { children: [
+						nearArea.toFixed(2),
+						" · ",
+						farArea.toFixed(2)
+					] })]
+				})
 			]
 		}),
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
-			/* @__PURE__ */ jsx(Control, {
-				name: "equal-area wedges",
-				children: /* @__PURE__ */ jsx(Chip, {
-					selected: showWedge,
-					onClick: () => setShowWedge((w) => !w),
-					children: "equal-area wedges"
-				})
-			}),
-			/* @__PURE__ */ jsx(Field, {
-				label: "eccentricity",
-				value: e.toFixed(2),
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: e,
-					min: 0,
-					max: .7,
-					step: .05,
-					onChange: setE,
-					ariaLabel: "eccentricity"
-				})
-			}),
-			/* @__PURE__ */ jsx(Field, {
-				label: "semi-major a",
-				value: a.toFixed(1),
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: a,
-					min: 2.5,
-					max: 5,
-					step: .5,
-					onChange: (n) => setA(clamp(n, 2.5, 5)),
-					ariaLabel: "semi-major axis"
-				})
+		/* @__PURE__ */ jsx("p", {
+			className: "physics-explain",
+			children: "The two bright wedges are equal time-slices. One is short and fat near the star, the other long and thin far from it, and the measured areas above agree (Kepler’s 2nd law). Equal area in equal time is only possible if the planet moves fastest at perihelion. T²/a³ stays constant as you widen the orbit (Kepler’s 3rd law)."
+		}),
+		/* @__PURE__ */ jsx(LiveRegion, { children: `Eccentricity ${e.toFixed(2)}, period ${T.toFixed(1)}. Equal-time wedges have equal area.` })
+	] });
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Control, {
+			name: "equal-area wedges",
+			children: /* @__PURE__ */ jsx(Chip, {
+				selected: showWedge,
+				onClick: () => setShowWedge((w) => !w),
+				children: "equal-area wedges"
 			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "eccentricity",
+			value: e.toFixed(2),
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: e,
+				min: 0,
+				max: .7,
+				step: .05,
+				onChange: setE,
+				ariaLabel: "eccentricity"
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "semi-major a",
+			value: a.toFixed(1),
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: a,
+				min: 2.5,
+				max: 5,
+				step: .5,
+				onChange: (n) => setA(clamp(n, 2.5, 5)),
+				ariaLabel: "semi-major axis"
+			})
+		}),
+		/* @__PURE__ */ jsx(SimulationTransport, {
+			running: gate.playing,
+			onReset: () => {
+				gate.setPlaying(false);
+				tRef.current = 0;
+			},
+			onToggle: () => gate.setPlaying(!gate.playing),
+			state: gate.playing ? "Orbiting" : "Paused",
+			detail: `period ${T.toFixed(1)} · e ${e.toFixed(2)}`,
+			startLabel: "Play orbit",
+			pauseLabel: "Pause orbit",
+			resetLabel: "Reset orbit"
+		})
+	] });
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		focusLayout: "immersive",
+		activity: {
+			...authoredActivity,
+			objectives: objectives ?? authoredActivity.objectives
+		},
+		activityId,
+		eyebrow: "Orbital mechanics",
+		title,
+		description: prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", { children: e < .02 ? "Circular orbit" : "Elliptical orbit" }),
+			/* @__PURE__ */ jsxs("span", { children: ["e ", e.toFixed(2)] }),
+			/* @__PURE__ */ jsxs("span", { children: ["T ", T.toFixed(1)] })
 		] }),
+		evidence: aside,
+		controls,
+		observation: "Equal changes in mean anomaly represent equal time intervals. The focus-to-orbit wedges therefore sweep equal areas even though their shapes differ.",
+		transcript: /* @__PURE__ */ jsx("p", { children: `The orbit has eccentricity ${e.toFixed(2)}, perihelion ${peri.toFixed(1)}, aphelion ${apo.toFixed(1)}, and period ${T.toFixed(1)}. Equal-time wedges have equal area.` }),
 		controlConfig,
-		children: figure
+		children: ({ complete }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(AuthoredMetricGate, {
+				conditionId: "played",
+				met: gate.playing || tRef.current > 0,
+				complete
+			}),
+			/* @__PURE__ */ jsx(AuthoredMetricGate, {
+				conditionId: "orbit-changed",
+				met: Math.abs(a - semiMajor) > .01 || Math.abs(e - eccentricity) > .01,
+				complete
+			}),
+			figure
+		] })
 	});
 }
 

package/dist/physics/lever/preset.d.mts

@@ -1,3 +1,4 @@
+import { AuthoredActivity } from "../../kit/activity-authoring.mjs";
 import { BALANCE_LEVER_ASSET } from "./asset.mjs";
 import { ReactNode } from "react";
 import { SceneDoc } from "@classytic/stage";
@@ -14,6 +15,10 @@ interface LeverBalanceProps {
   maxWeight?: number;
   controlId?: string;
   height?: number;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+  activity?: string | AuthoredActivity;
 }
 declare function leverBalanceDoc({
   items,
@@ -25,7 +30,11 @@ declare function LeverBalanceLab({
   start,
   maxWeight,
   controlId,
-  height
+  height,
+  title,
+  prompt,
+  objectives,
+  activity
 }: LeverBalanceProps): ReactNode;
 //#endregion
 export { LeverBalanceLab, LeverBalanceProps, LeverItemSpec, leverBalanceDoc };

package/dist/physics/lever/preset.mjs

@@ -1,9 +1,11 @@
 'use client';
 
 import { BALANCE_LEVER_ASSET } from "./asset.mjs";
-import { LabStyles, Slider, StatusPill } from "../../kit/controls.mjs";
-import { Callout, ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { Slider } from "../../kit/controls.mjs";
+import { Field, LiveRegion } from "../../kit/frame.mjs";
 import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { MechanicsActivity } from "../mechanics/activity.mjs";
+import { ResetTransport, SceneSurface } from "../mechanics/presentation.mjs";
 import { useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Scene, controlsFromScene, registerAsset, resolve, useControlSurface, useEditor } from "@classytic/stage";
@@ -178,7 +180,7 @@ function leverBalanceDoc({ items = DEFAULT_ITEMS, start = 1, maxWeight = 12 }) {
 		bindings: []
 	};
 }
-function LeverBalanceLab({ items = DEFAULT_ITEMS, start = 1, maxWeight = 12, controlId, height = 280 }) {
+function LeverBalanceLab({ items = DEFAULT_ITEMS, start = 1, maxWeight = 12, controlId, height = 320, title = "Balance the lever", prompt = "Adjust the unknown weight until clockwise and anticlockwise turning effects match.", objectives = ["Connect force and distance to turning effect", "Balance a lever by making the net torque zero"], activity }) {
 	const { editor, doc } = useEditor(useMemo(() => leverBalanceDoc({
 		items,
 		start,
@@ -212,19 +214,18 @@ function LeverBalanceLab({ items = DEFAULT_ITEMS, start = 1, maxWeight = 12, con
 		activity: "balance-lever",
 		response: String(w)
 	});
-	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx(LabStyles, {}),
-		/* @__PURE__ */ jsx(Scene, {
+	const figure = /* @__PURE__ */ jsxs(SceneSurface, {
+		className: "physics-lever-scene",
+		children: [/* @__PURE__ */ jsx(Scene, {
 			doc,
 			interactive: false,
 			showGrid: false,
 			showAxes: false,
 			height,
 			ariaLabel: "Balance the lever by setting the unknown weight"
-		}),
-		/* @__PURE__ */ jsx(LiveRegion, { children: balanced ? `Balanced. The unknown weight is ${w}.` : `Left turning effect ${leftSum.toFixed(1)}, right ${rightSum.toFixed(1)}.` })
-	] });
-	const controlsUi = /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
+		}), /* @__PURE__ */ jsx(LiveRegion, { children: balanced ? `Balanced. The unknown weight is ${w}.` : `Left turning effect ${leftSum.toFixed(1)}, right ${rightSum.toFixed(1)}.` })]
+	});
+	const controlsUi = /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Field, {
 		label: "unknown weight",
 		value: `x = ${w}`,
 		children: /* @__PURE__ */ jsx(Slider, {
@@ -234,26 +235,44 @@ function LeverBalanceLab({ items = DEFAULT_ITEMS, start = 1, maxWeight = 12, con
 			step: 1,
 			onChange: setW,
 			ariaLabel: "unknown weight",
-			style: { flex: "1 1 160px" }
+			className: "physics-lever-slider"
 		})
 	}) });
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title: "Balance the lever",
-		prompt: "Set the unknown weight so the lever balances (net turning effect zero).",
-		aside: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StatusPill, {
-			ok: balanced,
-			children: balanced ? "✓ Balanced!" : "Not balanced"
-		}), /* @__PURE__ */ jsxs(Callout, {
-			tone: "result",
-			children: [
-				"turning effect, left ",
-				leftSum.toFixed(1),
-				" · right ",
-				rightSum.toFixed(1)
-			]
-		})] }),
+	const instruments = /* @__PURE__ */ jsxs("div", {
+		className: "physics-torque-ledger",
+		children: [
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Anticlockwise" }), /* @__PURE__ */ jsx("strong", { children: leftSum.toFixed(1) })] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Clockwise" }), /* @__PURE__ */ jsx("strong", { children: rightSum.toFixed(1) })] }),
+			/* @__PURE__ */ jsxs("div", {
+				"data-balanced": balanced || void 0,
+				children: [/* @__PURE__ */ jsx("span", { children: "Difference" }), /* @__PURE__ */ jsx("strong", { children: Math.abs(leftSum - rightSum).toFixed(1) })]
+			})
+		]
+	});
+	const reset = () => setW(start);
+	return /* @__PURE__ */ jsx(MechanicsActivity, {
+		activity,
+		className: "physics-lever",
+		title,
+		prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("strong", { children: balanced ? "Balanced" : "Adjust the weight" }),
+			/* @__PURE__ */ jsxs("span", { children: ["left ", leftSum.toFixed(1)] }),
+			/* @__PURE__ */ jsxs("span", { children: ["right ", rightSum.toFixed(1)] })
+		] }),
+		figure,
+		instruments,
 		controls: controlsUi,
-		children: figure
+		feedback: balanced ? "Both sides produce the same turning effect, so the net torque is zero." : "A weight farther from the pivot produces more turning effect. Match force × perpendicular distance on both sides.",
+		objectives,
+		transport: /* @__PURE__ */ jsx(ResetTransport, {
+			onReset: reset,
+			state: balanced ? "Torque balanced" : `${Math.abs(leftSum - rightSum).toFixed(1)} from balance`,
+			detail: `unknown weight ${w}`,
+			resetLabel: "Reset lever"
+		}),
+		canvasLabel: "Interactive balance lever",
+		inspectorLabel: "Torque comparison and unknown weight"
 	});
 }
 

package/dist/physics/linear-pursuit/core.d.mts

@@ -0,0 +1,16 @@
+//#region src/physics/linear-pursuit/core.d.ts
+interface LinearBody {
+  position: number;
+  speed: number;
+  acceleration?: number;
+  startTime?: number;
+}
+interface LinearPursuitState {
+  leader: LinearBody;
+  chaser: LinearBody;
+}
+declare const linearPositionAt: (body: LinearBody, time: number) => number;
+/** First meeting at or after the chaser starts. Null means no meeting within the authored horizon. */
+declare function firstLinearMeeting(state: LinearPursuitState, horizon?: number): number | null;
+//#endregion
+export { LinearBody, LinearPursuitState, firstLinearMeeting, linearPositionAt };