@classytic/labs 0.2.0 → 0.3.0

package/dist/physics/ramp-forces/preset.mjs

@@ -1,14 +1,17 @@
 'use client';
 
 import { toRad } from "../../core/util.mjs";
-import { CheckButton, Chip, Slider, StatusPill } from "../../kit/controls.mjs";
-import { Control, ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
-import { useCheckpoint } from "../../kit/pedagogy.mjs";
-import { AngleArc, RightAngleMark } from "../../kit/diagram.mjs";
+import { Chip, Slider, StatusPill } from "../../kit/controls.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 { AngleArc, RightAngleMark } from "../../kit/diagram/annotations.mjs";
 import { useReducedMotion } from "../../kit/anim.mjs";
+import { rampForceState } from "../mechanics/core.mjs";
+import { MechanicsCrateGlyph } from "../mechanics/glyphs.mjs";
 import { useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Label, Polygon, Segment, Stage, Vector, useFrameLoop, useInView } from "@classytic/stage";
+import { Polygon, Segment, Stage, useFrameLoop, useInView } from "@classytic/stage";
 
 //#region src/physics/ramp-forces/preset.tsx
 /**
@@ -26,12 +29,109 @@ import { Label, Polygon, Segment, Stage, Vector, useFrameLoop, useInView } from
 * Up-slope is the POSITIVE axis throughout. Tokenized SVG; reuses the diagram kit;
 * honours prefers-reduced-motion.
 */
+const RAMP_ACTIVITY = {
+	pattern: "investigation",
+	title: "Tilt the ramp: when does friction lose?",
+	objectives: [
+		"Resolve weight into ramp-aligned components",
+		"Distinguish static and kinetic friction",
+		"Use the force sum to predict acceleration"
+	],
+	steps: [
+		{
+			id: "predict",
+			phase: "predict",
+			title: "Predict the threshold",
+			lead: "Decide how static friction behaves before the crate slips.",
+			success: "friction-answer"
+		},
+		{
+			id: "act",
+			phase: "act",
+			title: "Break static grip",
+			lead: "Change the angle or push until the crate can move, then release it.",
+			controls: true,
+			reveal: ["model"],
+			success: "released"
+		},
+		{
+			id: "observe",
+			phase: "observe",
+			title: "Read the force ledger",
+			lead: "Compare gravity, applied force, friction, and the net.",
+			controls: true,
+			reveal: ["model", "evidence"]
+		},
+		{
+			id: "explain",
+			phase: "explain",
+			title: "Explain the transition",
+			lead: "Explain why static friction adjusts but kinetic friction has a fixed magnitude."
+		},
+		{
+			id: "transfer",
+			phase: "transfer",
+			title: "Reverse the motion",
+			lead: "Use an applied force to change the net-force direction.",
+			controls: true,
+			reveal: ["model", "evidence"],
+			success: "direction-changed"
+		}
+	],
+	questions: [{
+		id: "friction",
+		prompt: "Before an object slips, static friction…",
+		choices: [
+			{
+				value: "adjusts",
+				label: "adjusts up to a maximum"
+			},
+			{
+				value: "maximum",
+				label: "is always at its maximum"
+			},
+			{
+				value: "zero",
+				label: "is always zero"
+			}
+		],
+		answer: "adjusts",
+		explain: "Static friction matches the required opposing force until the maximum μₛN is exceeded."
+	}],
+	success: [
+		{
+			id: "friction-answer",
+			source: "answer",
+			key: "friction",
+			operator: "eq",
+			value: "adjusts",
+			pendingLabel: "Choose how static friction behaves."
+		},
+		{
+			id: "released",
+			source: "metric",
+			key: "released",
+			operator: "eq",
+			value: true,
+			pendingLabel: "Create a nonzero net force and release the crate."
+		},
+		{
+			id: "direction-changed",
+			source: "metric",
+			key: "directionChanged",
+			operator: "eq",
+			value: true,
+			pendingLabel: "Reverse the initial net-force direction."
+		}
+	]
+};
 const L = 4.2;
 const HS = .52;
-const WLEN = 2.4;
+const WLEN = 1.55;
 const LANE = .17;
+const CRATE_EDGE = .43;
 const C_MG = "var(--stage-fg)";
-const C_N = "var(--stage-accent-2)";
+const C_N = "var(--stage-primary)";
 const C_FRIC = "var(--stage-warn)";
 const C_GRAV = "color-mix(in oklab, var(--stage-fg) 50%, transparent)";
 const C_APPLIED = "var(--stage-accent)";
@@ -41,52 +141,26 @@ function LedgerBar({ label, v, max, color, bold }) {
 	const pct = Math.min(50, Math.abs(v) / (max || 1) * 50);
 	const up = v >= 0;
 	return /* @__PURE__ */ jsxs("div", {
-		style: {
-			display: "flex",
-			alignItems: "center",
-			gap: 8,
-			fontSize: 12
-		},
+		className: "physics-force-row",
+		"data-bold": bold || void 0,
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				style: {
-					width: 78,
-					color: "var(--stage-muted)",
-					fontWeight: bold ? 700 : 500
-				},
+				className: "physics-force-label",
 				children: label
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				style: {
-					position: "relative",
-					flex: 1,
-					height: bold ? 16 : 12
-				},
-				children: [/* @__PURE__ */ jsx("div", { style: {
-					position: "absolute",
-					left: "50%",
-					top: -2,
-					bottom: -2,
-					width: 1,
-					background: "var(--stage-grid)"
-				} }), /* @__PURE__ */ jsx("div", { style: {
-					position: "absolute",
-					top: 1,
-					bottom: 1,
-					[up ? "left" : "right"]: "50%",
-					width: `${pct}%`,
-					background: color,
-					borderRadius: 3,
-					opacity: bold ? 1 : .85
-				} })]
+				className: "physics-force-track",
+				children: [/* @__PURE__ */ jsx("div", { className: "physics-force-zero" }), /* @__PURE__ */ jsx("div", {
+					className: "physics-force-fill",
+					"data-direction": up ? "up" : "down",
+					style: {
+						"--force-width": `${pct}%`,
+						"--force-color": color
+					}
+				})]
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				style: {
-					width: 60,
-					textAlign: "right",
-					fontVariantNumeric: "tabular-nums",
-					fontWeight: bold ? 700 : 600
-				},
+				className: "physics-force-value",
 				children: [
 					Math.abs(v) < .5 ? "0" : Math.abs(v).toFixed(0),
 					"N",
@@ -96,7 +170,9 @@ function LedgerBar({ label, v, max, color, bold }) {
 		]
 	});
 }
-function RampForcesLab({ angleDeg = 25, mass = 2, friction = .4, frictionKinetic = .3, appliedN = 0, g = 9.8, showComponents = false, title = "Tilt the Ramp: split the weight, add a push, sum the forces", prompt = "Tilt it, then push or pull: static friction holds until the forces win, then it slides at a = net/m.", objectives, controlConfig }) {
+function RampForcesLab({ angleDeg = 25, mass = 2, friction = .4, frictionKinetic = .3, appliedN = 0, g = 9.8, showComponents = false, title = "Tilt the Ramp: split the weight, add a push, sum the forces", prompt = "Tilt it, then push or pull: static friction holds until the forces win, then it slides at a = net/m.", objectives, controlConfig, activity = "ramp-forces" }) {
+	const activityId = typeof activity === "string" ? activity : "ramp-forces";
+	const authoredActivity = typeof activity === "string" ? RAMP_ACTIVITY : activity;
 	const [deg, setDeg] = useState(angleDeg);
 	const [mus, setMus] = useState(friction);
 	const [mukRaw, setMuk] = useState(frictionKinetic);
@@ -110,22 +186,19 @@ function RampForcesLab({ angleDeg = 25, mass = 2, friction = .4, frictionKinetic
 	const p0 = useRef(.55);
 	const reduce = useReducedMotion();
 	const { ref: viewRef, inView } = useInView();
-	useCheckpoint({
-		solved: landed,
-		activity: "ramp-forces"
-	});
 	const th = toRad(deg);
 	const cos = Math.cos(th), sin = Math.sin(th);
 	const muk = Math.min(mukRaw, mus);
-	const W = m * g, N = m * g * cos;
-	const gravAlong = m * g * sin;
-	const drive = applied - gravAlong;
-	const fsMax = mus * N;
-	const held = Math.abs(drive) <= fsMax + 1e-9;
-	const fk = muk * N;
-	const frictionUp = held ? -drive : drive > 0 ? -fk : fk;
-	const net = drive + frictionUp;
-	const aSigned = net / m;
+	const W = m * g;
+	const forceState = rampForceState(m, g, th, applied, mus, muk);
+	const N = forceState.normal;
+	const gravAlong = forceState.gravityAlong;
+	const fsMax = forceState.staticLimit;
+	const held = forceState.held;
+	const frictionUp = forceState.friction;
+	const net = forceState.net;
+	const initialNet = rampForceState(mass, g, toRad(angleDeg), appliedN, friction, Math.min(frictionKinetic, friction)).net;
+	const aSigned = forceState.acceleration;
 	const a = Math.abs(aSigned);
 	const slidesUp = net > 0;
 	const ledgerMax = Math.max(gravAlong, Math.abs(applied), Math.abs(frictionUp), Math.abs(net), 1);
@@ -179,36 +252,36 @@ function RampForcesLab({ angleDeg = 25, mass = 2, friction = .4, frictionKinetic
 			dy: -dir.y / d * off
 		};
 	};
-	const crate = [
-		{
-			x: O.x - HS * u.x - HS * nrm.x,
-			y: O.y - HS * u.y - HS * nrm.y
-		},
-		{
-			x: O.x + HS * u.x - HS * nrm.x,
-			y: O.y + HS * u.y - HS * nrm.y
-		},
-		{
-			x: O.x + HS * u.x + HS * nrm.x,
-			y: O.y + HS * u.y + HS * nrm.y
-		},
-		{
-			x: O.x - HS * u.x + HS * nrm.x,
-			y: O.y - HS * u.y + HS * nrm.y
-		}
-	];
-	const mgTip = {
+	const mgTail = {
 		x: O.x,
-		y: O.y - WLEN
+		y: O.y - CRATE_EDGE
 	};
-	const nTip = add(surf, arrow(nrm, N));
+	const mgTip = {
+		x: mgTail.x,
+		y: mgTail.y - WLEN
+	};
+	const nTail = add(O, {
+		x: nrm.x * CRATE_EDGE,
+		y: nrm.y * CRATE_EDGE
+	});
+	const nTip = add(nTail, arrow(nrm, N));
 	const appDir = applied >= 0 ? u : dn;
-	const appTail = lane(1);
+	const appTail = add(lane(1), {
+		x: appDir.x * CRATE_EDGE,
+		y: appDir.y * CRATE_EDGE
+	});
 	const appTip = add(appTail, arrow(appDir, Math.abs(applied)));
 	const fricDir = frictionUp >= 0 ? u : dn;
-	const fricTail = lane(-1);
+	const fricTail = add(lane(-1), {
+		x: fricDir.x * CRATE_EDGE,
+		y: fricDir.y * CRATE_EDGE
+	});
 	const fricTip = add(fricTail, arrow(fricDir, Math.abs(frictionUp)));
-	const gravTip = add(O, arrow(dn, gravAlong));
+	const gravTail = add(O, {
+		x: dn.x * CRATE_EDGE,
+		y: dn.y * CRATE_EDGE
+	});
+	const gravTip = add(gravTail, arrow(dn, gravAlong));
 	useFrameLoop((f) => {
 		if (startRef.current === null) startRef.current = f.timeMs;
 		const t = (f.timeMs - startRef.current) / 1e3;
@@ -237,23 +310,16 @@ function RampForcesLab({ angleDeg = 25, mass = 2, friction = .4, frictionKinetic
 		p0.current = .55;
 		setLanded(false);
 	};
-	const figure = /* @__PURE__ */ jsx("div", {
+	const figure = /* @__PURE__ */ jsx(SceneSurface, {
 		ref: viewRef,
-		className: "lab-playwrap",
-		style: {
-			borderRadius: 14,
-			overflow: "hidden",
-			background: "var(--stage-bg)",
-			border: "1px solid var(--stage-grid)"
-		},
 		children: /* @__PURE__ */ jsxs(Stage, {
 			view: {
-				xMin: -2,
-				xMax: 8.1,
-				yMin: -3.2,
-				yMax: 5.2
+				xMin: -1.15,
+				xMax: 5.65,
+				yMin: -1.55,
+				yMax: 3.8
 			},
-			height: 300,
+			height: 280,
 			preserveAspect: true,
 			ariaLabel: `Ramp at ${deg} degrees, applied force ${applied} newtons; ${held ? "held by friction" : `sliding ${slidesUp ? "up" : "down"} at ${a.toFixed(1)} metres per second squared`}`,
 			children: [
@@ -298,251 +364,242 @@ function RampForcesLab({ angleDeg = 25, mass = 2, friction = .4, frictionKinetic
 					label: `${deg}°`,
 					color: "var(--stage-fg)"
 				}),
-				/* @__PURE__ */ jsx(Polygon, {
-					points: crate,
-					color: "color-mix(in oklab, var(--stage-accent-2) 60%, black)",
-					fill: "var(--stage-accent-2)",
-					fillOpacity: .9,
-					weight: 1.5
+				/* @__PURE__ */ jsx(MechanicsCrateGlyph, {
+					at: O,
+					angleDeg: deg
 				}),
-				/* @__PURE__ */ jsx(Vector, {
-					tail: O,
+				/* @__PURE__ */ jsx(MechanicsVector, {
+					tail: mgTail,
 					tip: mgTip,
-					color: C_MG,
-					weight: 2.5
-				}),
-				/* @__PURE__ */ jsx(Label, {
-					...beyond(mgTip, {
+					labelAt: beyond(mgTip, {
 						x: 0,
 						y: -1
 					}),
-					text: `mg ${W.toFixed(0)}N`,
-					color: C_MG,
-					size: 11
+					label: "mg",
+					color: C_MG
 				}),
-				/* @__PURE__ */ jsx(Vector, {
-					tail: surf,
+				/* @__PURE__ */ jsx(MechanicsVector, {
+					tail: nTail,
 					tip: nTip,
+					labelAt: nTip,
+					labelDx: 8,
+					labelDy: -18,
+					label: comps ? "N = mg cosθ" : "N",
 					color: C_N,
-					weight: 2.5
-				}),
-				/* @__PURE__ */ jsx(Label, {
-					...beyond(nTip, nrm),
-					text: comps ? `N = mg cosθ ${N.toFixed(0)}N` : `N ${N.toFixed(0)}N`,
-					color: C_N,
-					size: 11
+					active: comps
 				}),
-				comps && gravAlong > .5 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx(Vector, {
-						tail: O,
-						tip: gravTip,
-						color: C_GRAV,
-						weight: 2.5
-					}),
-					/* @__PURE__ */ jsx(Label, {
-						...beyond(gravTip, dn),
-						text: `mg sinθ ${gravAlong.toFixed(0)}N`,
-						color: C_GRAV,
-						size: 11
-					}),
-					/* @__PURE__ */ jsx(RightAngleMark, {
-						at: surf,
-						u,
-						v: nrm
-					})
-				] }),
-				Math.abs(frictionUp) > .5 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Vector, {
+				comps && gravAlong > .5 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MechanicsVector, {
+					tail: gravTail,
+					tip: gravTip,
+					labelAt: gravTip,
+					labelDx: -44,
+					labelDy: -10,
+					label: "mg sinθ",
+					color: C_GRAV,
+					active: true
+				}), /* @__PURE__ */ jsx(RightAngleMark, {
+					at: surf,
+					u,
+					v: nrm
+				})] }),
+				Math.abs(frictionUp) > .5 && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(MechanicsVector, {
 					tail: fricTail,
 					tip: fricTip,
+					labelAt: fricTip,
+					labelDx: 16,
+					labelDy: -16,
+					label: held ? "fₛ" : "fₖ",
 					color: C_FRIC,
-					weight: 2.5
-				}), /* @__PURE__ */ jsx(Label, {
-					...beyond(fricTip, fricDir),
-					text: `${held ? "fₛ" : "fₖ"} ${Math.abs(frictionUp).toFixed(0)}N`,
-					color: C_FRIC,
-					size: 11
-				})] }),
-				Math.abs(applied) > .5 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Vector, {
+					active: !held
+				}) }),
+				Math.abs(applied) > .5 && /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(MechanicsVector, {
 					tail: appTail,
 					tip: appTip,
+					labelAt: beyond(appTip, appDir),
+					label: "Fₐ",
 					color: C_APPLIED,
-					weight: 3
-				}), /* @__PURE__ */ jsx(Label, {
-					...beyond(appTip, appDir),
-					text: `push ${Math.abs(applied).toFixed(0)}N`,
-					color: C_APPLIED,
-					size: 11
-				})] })
+					weight: 3,
+					active: true
+				}) })
 			]
 		})
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		objectives,
-		aside: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
-			style: {
-				padding: "10px 12px",
-				borderRadius: 12,
-				border: "1px solid var(--stage-grid)",
-				background: "color-mix(in oklab, var(--stage-fg) 3%, transparent)"
-			},
-			children: [/* @__PURE__ */ jsxs("div", {
-				style: {
-					display: "flex",
-					justifyContent: "space-between",
-					fontSize: 11,
-					color: "var(--stage-muted)",
-					marginBottom: 6
-				},
-				children: [
-					/* @__PURE__ */ jsx("span", { children: "← down-slope" }),
-					/* @__PURE__ */ jsx("span", { children: "sum of forces along the ramp" }),
-					/* @__PURE__ */ jsx("span", { children: "up-slope →" })
-				]
-			}), /* @__PURE__ */ jsxs("div", {
-				style: {
-					display: "flex",
-					flexDirection: "column",
-					gap: 5
-				},
-				children: [
-					/* @__PURE__ */ jsx(LedgerBar, {
-						label: "gravity",
-						v: -gravAlong,
-						max: ledgerMax,
-						color: C_GRAV
-					}),
-					/* @__PURE__ */ jsx(LedgerBar, {
-						label: "applied",
-						v: applied,
-						max: ledgerMax,
-						color: C_APPLIED
-					}),
-					/* @__PURE__ */ jsx(LedgerBar, {
-						label: held ? "friction (static)" : "friction (kinetic)",
-						v: frictionUp,
-						max: ledgerMax,
-						color: C_FRIC
-					}),
-					/* @__PURE__ */ jsx(LedgerBar, {
-						label: "= net",
-						v: held ? 0 : net,
-						max: ledgerMax,
-						color: held ? "var(--stage-good)" : C_NET,
-						bold: true
-					})
-				]
-			})]
-		}), /* @__PURE__ */ jsx(LiveRegion, { children: `At ${deg} degrees with ${applied} newtons applied: net ${held ? 0 : net.toFixed(0)} newtons, ${held ? "held by friction" : `slides ${slidesUp ? "up" : "down"} at ${a.toFixed(1)} metres per second squared`}.` })] }),
-		controls: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsxs(ControlBar, { children: [
-				/* @__PURE__ */ jsx(Control, {
-					name: "release",
-					children: /* @__PURE__ */ jsx(CheckButton, {
-						onClick: release,
-						disabled: held,
-						children: "▶ Release"
-					})
-				}),
-				/* @__PURE__ */ jsx(Control, {
-					name: "components",
-					children: /* @__PURE__ */ jsx(Chip, {
-						selected: comps,
-						onClick: () => setComps((c) => !c),
-						children: "components"
-					})
-				}),
-				/* @__PURE__ */ jsx(StatusPill, {
-					ok: !held,
-					children: held ? "balanced, friction holds it" : `slides ${slidesUp ? "up" : "down"} · a = ${a.toFixed(1)} m/s²`
+	const aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "physics-force-ledger",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "physics-force-ledger-head",
+			children: [
+				/* @__PURE__ */ jsx("span", { children: "← down-slope" }),
+				/* @__PURE__ */ jsx("span", { children: "sum of forces along the ramp" }),
+				/* @__PURE__ */ jsx("span", { children: "up-slope →" })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "physics-force-ledger-rows",
+			children: [
+				/* @__PURE__ */ jsx(LedgerBar, {
+					label: "gravity",
+					v: -gravAlong,
+					max: ledgerMax,
+					color: C_GRAV
 				}),
-				/* @__PURE__ */ jsxs("span", {
-					style: {
-						marginLeft: "auto",
-						display: "inline-flex",
-						gap: 14,
-						fontVariantNumeric: "tabular-nums",
-						fontWeight: 600
-					},
-					children: [/* @__PURE__ */ jsxs("span", {
-						style: { color: C_N },
-						children: ["N ", N.toFixed(0)]
-					}), /* @__PURE__ */ jsxs("span", {
-						style: { color: C_FRIC },
-						children: ["fₛ max ", fsMax.toFixed(0)]
-					})]
-				})
-			] }),
-			/* @__PURE__ */ jsxs(ControlBar, { children: [
-				/* @__PURE__ */ jsx(Field, {
-					label: "angle",
-					name: "angle",
-					value: `${deg}°`,
-					children: /* @__PURE__ */ jsx(Slider, {
-						value: deg,
-						min: 0,
-						max: 75,
-						step: 1,
-						onChange: reset(setDeg),
-						ariaLabel: "incline angle (degrees)"
-					})
+				/* @__PURE__ */ jsx(LedgerBar, {
+					label: "applied",
+					v: applied,
+					max: ledgerMax,
+					color: C_APPLIED
 				}),
-				/* @__PURE__ */ jsx(Field, {
-					label: "push",
-					name: "push",
-					value: applied === 0 ? "0" : `${Math.abs(applied)}N ${applied > 0 ? "↑" : "↓"}`,
-					children: /* @__PURE__ */ jsx(Slider, {
-						value: applied,
-						min: -30,
-						max: 30,
-						step: 1,
-						onChange: reset(setApplied),
-						ariaLabel: "applied force along the slope (newtons; positive up)"
-					})
+				/* @__PURE__ */ jsx(LedgerBar, {
+					label: held ? "friction (static)" : "friction (kinetic)",
+					v: frictionUp,
+					max: ledgerMax,
+					color: C_FRIC
 				}),
-				/* @__PURE__ */ jsx(Field, {
-					label: "mass",
-					name: "mass",
-					value: `${m} kg`,
-					children: /* @__PURE__ */ jsx(Slider, {
-						value: m,
-						min: 1,
-						max: 10,
-						step: .5,
-						onChange: reset(setM),
-						ariaLabel: "crate mass (kg)"
-					})
+				/* @__PURE__ */ jsx(LedgerBar, {
+					label: "= net",
+					v: held ? 0 : net,
+					max: ledgerMax,
+					color: held ? "var(--stage-good)" : C_NET,
+					bold: true
 				})
+			]
+		})]
+	}), /* @__PURE__ */ jsx(LiveRegion, { children: `At ${deg} degrees with ${applied} newtons applied: net ${held ? 0 : net.toFixed(0)} newtons, ${held ? "held by friction" : `slides ${slidesUp ? "up" : "down"} at ${a.toFixed(1)} metres per second squared`}.` })] });
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Control, {
+			name: "components",
+			children: /* @__PURE__ */ jsx(Chip, {
+				selected: comps,
+				onClick: () => setComps((c) => !c),
+				children: "components"
+			})
+		}),
+		/* @__PURE__ */ jsx(StatusPill, {
+			ok: !held,
+			children: held ? "friction holds" : `slides ${slidesUp ? "up" : "down"}`
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "angle",
+			name: "angle",
+			value: `${deg}°`,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: deg,
+				min: 0,
+				max: 75,
+				step: 1,
+				onChange: reset(setDeg),
+				ariaLabel: "incline angle (degrees)"
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "push",
+			name: "push",
+			value: applied === 0 ? "0" : `${Math.abs(applied)}N ${applied > 0 ? "↑" : "↓"}`,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: applied,
+				min: -30,
+				max: 30,
+				step: 1,
+				onChange: reset(setApplied),
+				ariaLabel: "applied force along the slope (newtons; positive up)"
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "mass",
+			name: "mass",
+			value: `${m} kg`,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: m,
+				min: 1,
+				max: 10,
+				step: .5,
+				onChange: reset(setM),
+				ariaLabel: "crate mass (kg)"
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "μₛ static",
+			name: "frictionStatic",
+			value: mus.toFixed(2),
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: mus,
+				min: 0,
+				max: 1,
+				step: .05,
+				onChange: reset(setMus),
+				ariaLabel: "static friction coefficient"
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "μₖ kinetic",
+			name: "frictionKinetic",
+			value: muk.toFixed(2),
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: mukRaw,
+				min: 0,
+				max: 1,
+				step: .05,
+				onChange: reset(setMuk),
+				ariaLabel: "kinetic friction coefficient"
+			})
+		}),
+		/* @__PURE__ */ jsx(SimulationTransport, {
+			running: sliding,
+			onReset: () => {
+				setSliding(false);
+				setP(.55);
+				p0.current = .55;
+				setLanded(false);
+				startRef.current = null;
+			},
+			onToggle: sliding ? () => setSliding(false) : release,
+			state: held ? "Held by friction" : sliding ? "Sliding" : landed ? "Complete" : "Ready",
+			detail: held ? "increase the slope or push" : `net ${Math.abs(net).toFixed(1)} N`,
+			startLabel: landed ? "Release again" : "Release",
+			disabled: held,
+			resetLabel: "Reset ramp"
+		})
+	] });
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		focusLayout: "immersive",
+		activity: {
+			...authoredActivity,
+			objectives: objectives ?? authoredActivity.objectives
+		},
+		activityId,
+		eyebrow: "Mechanics",
+		title,
+		description: prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", { children: held ? "Static equilibrium" : sliding ? "Sliding" : landed ? "Complete" : "Ready" }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				"net ",
+				net.toFixed(0),
+				" N"
 			] }),
-			/* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsx(Field, {
-				label: "μₛ static",
-				name: "frictionStatic",
-				value: mus.toFixed(2),
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: mus,
-					min: 0,
-					max: 1,
-					step: .05,
-					onChange: reset(setMus),
-					ariaLabel: "static friction coefficient"
-				})
-			}), /* @__PURE__ */ jsx(Field, {
-				label: "μₖ kinetic",
-				name: "frictionKinetic",
-				value: muk.toFixed(2),
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: mukRaw,
-					min: 0,
-					max: 1,
-					step: .05,
-					onChange: reset(setMuk),
-					ariaLabel: "kinetic friction coefficient"
-				})
-			})] })
+			/* @__PURE__ */ jsxs("span", { children: [
+				"a ",
+				a.toFixed(1),
+				" m/s²"
+			] })
 		] }),
+		evidence: aside,
+		controls,
+		observation: held ? `Static friction supplies ${Math.abs(frictionUp).toFixed(1)} N, below its ${fsMax.toFixed(1)} N limit, so the net force is zero.` : `The driving force exceeded static grip; kinetic friction now opposes motion and the remaining ${Math.abs(net).toFixed(1)} N accelerates the crate.`,
+		transcript: /* @__PURE__ */ jsx("p", { children: `At ${deg} degrees, gravity contributes ${gravAlong.toFixed(1)} newtons down the ramp. The applied force is ${applied.toFixed(1)} newtons and friction is ${Math.abs(frictionUp).toFixed(1)} newtons, giving ${held ? "zero net force" : `a net force of ${net.toFixed(1)} newtons ${slidesUp ? "up" : "down"} the ramp`}.` }),
 		controlConfig,
-		children: figure
+		children: ({ complete }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(AuthoredMetricGate, {
+				conditionId: "released",
+				met: sliding || landed,
+				complete
+			}),
+			/* @__PURE__ */ jsx(AuthoredMetricGate, {
+				conditionId: "direction-changed",
+				met: Math.sign(net) !== 0 && Math.sign(net) !== Math.sign(initialNet),
+				complete
+			}),
+			figure
+		] })
 	});
 }