@classytic/labs 0.2.0 → 0.3.0

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

@@ -0,0 +1,37 @@
+import { AuthoredActivity } from "../../kit/activity-authoring.mjs";
+import { ReactNode } from "react";
+
+//#region src/physics/power/preset.d.ts
+type PowerMode = 'lift' | 'drive';
+interface PowerProps {
+  /** Which situation opens first. */
+  mode?: PowerMode;
+  /** Lift: mass raised, kg. */
+  massKg?: number;
+  /** Lift: height raised, m. */
+  heightM?: number;
+  /** Lift: pump power, W. */
+  powerW?: number;
+  /** Drive: steady driving force, N (equal to drag at constant speed). */
+  forceN?: number;
+  /** Drive: steady speed, m/s. */
+  speedMs?: number;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+  activity?: string | AuthoredActivity;
+}
+declare function PowerLab({
+  mode: mode0,
+  massKg,
+  heightM,
+  powerW,
+  forceN,
+  speedMs,
+  title,
+  prompt,
+  objectives,
+  activity
+}?: PowerProps): ReactNode;
+//#endregion
+export { PowerLab, PowerMode, PowerProps };

package/dist/physics/power/preset.mjs

@@ -0,0 +1,555 @@
+'use client';
+
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { ActivitySelect, Slider } from "../../kit/controls.mjs";
+import { Field } from "../../kit/frame.mjs";
+import { AuthoredActivityRuntime, AuthoredMetricGate } from "../../kit/authored-activity-runtime.mjs";
+import { SceneSurface } from "../mechanics/presentation.mjs";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Axes, Dot, Grid, Label, Polygon, Segment, Stage } from "@classytic/stage";
+
+//#region src/physics/power/preset.tsx
+/**
+* PowerLab, power as the GRADIENT of the energy–time graph.
+*
+* Its sibling `work-energy` teaches work as an AREA under force–distance. This is the other
+* half of the same picture: energy against time, where the slope of the line IS the power. The
+* symmetry is the point, and it is what makes P = W/t stop being a formula to memorise.
+*
+* Two situations on one figure, both drawn on the same axes:
+*   • LIFT  — a pump raising water to a rooftop tank. The job is a fixed W = mgh, so a bigger
+*             power is a steeper line that reaches the same target sooner. This is P = W/t.
+*   • DRIVE — a bus at steady speed on a level road. Drag balances the drive force, so no
+*             kinetic energy accumulates and every joule goes against drag. The line never
+*             ends and its gradient is P = Fv.
+*
+* The two modes are deliberately the same graph: a learner who sees that "reaches the target
+* sooner" and "climbs faster forever" are one gradient has understood power.
+*/
+const G = 9.81;
+const ACCENT = "var(--stage-accent)";
+const POWER_ACTIVITY = {
+	pattern: "investigation",
+	title: "Power is a gradient, not an amount",
+	objectives: [
+		"Read power as the gradient of an energy-time graph",
+		"Use P = W / t for a fixed job",
+		"Use P = Fv for a steady speed"
+	],
+	steps: [
+		{
+			id: "predict",
+			phase: "predict",
+			title: "Predict the effect of doubling power",
+			lead: "Commit before you move the slider.",
+			success: "halving-answer"
+		},
+		{
+			id: "act",
+			phase: "act",
+			title: "Change the power",
+			lead: "Watch the gradient of the line, not its end point.",
+			controls: true,
+			reveal: ["model"],
+			success: "power-changed"
+		},
+		{
+			id: "observe",
+			phase: "observe",
+			title: "Read the gradient",
+			lead: "The same energy arrives sooner. The job did not get smaller.",
+			controls: true,
+			reveal: ["model", "evidence"]
+		},
+		{
+			id: "explain",
+			phase: "explain",
+			title: "Explain why the target line does not move",
+			lead: "Separate the size of the job from the rate of doing it."
+		},
+		{
+			id: "transfer",
+			phase: "transfer",
+			title: "Switch to a steady speed",
+			lead: "At constant speed the drag force sets the power. Compare P = Fv with P = W / t.",
+			controls: true,
+			reveal: ["model", "evidence"],
+			success: "mode-changed"
+		}
+	],
+	questions: [{
+		id: "halving",
+		prompt: "A pump lifts the same tank of water, but you double its power. The time taken…",
+		choices: [
+			{
+				value: "half",
+				label: "halves"
+			},
+			{
+				value: "double",
+				label: "doubles"
+			},
+			{
+				value: "same",
+				label: "does not change"
+			}
+		],
+		answer: "half",
+		explain: "The job is a fixed W = mgh, so t = W / P. Doubling P halves t. The energy delivered is the same; only the rate changed."
+	}],
+	success: [
+		{
+			id: "halving-answer",
+			source: "answer",
+			key: "halving",
+			operator: "eq",
+			value: "half",
+			pendingLabel: "Predict what doubling the power does to the time."
+		},
+		{
+			id: "power-changed",
+			source: "metric",
+			key: "powerChanged",
+			operator: "eq",
+			value: true,
+			pendingLabel: "Change the power."
+		},
+		{
+			id: "mode-changed",
+			source: "metric",
+			key: "modeChanged",
+			operator: "eq",
+			value: true,
+			pendingLabel: "Switch to the steady-speed situation."
+		}
+	]
+};
+/** The situation itself: a pump filling a roof tank, or a bus held at steady speed by its engine. */
+function Picture({ mode, frac }) {
+	const W = 420;
+	const H = 78;
+	if (mode === "lift") {
+		const tankY = 10;
+		const tankH = 30;
+		const fill = Math.max(0, Math.min(1, frac));
+		return /* @__PURE__ */ jsxs("svg", {
+			width: "100%",
+			viewBox: `0 0 ${W} ${H}`,
+			role: "img",
+			"aria-label": "A pump raising water to a roof tank",
+			children: [
+				/* @__PURE__ */ jsx("rect", {
+					x: 302,
+					y: tankY,
+					width: 106,
+					height: tankH,
+					rx: 3,
+					fill: "none",
+					stroke: "var(--stage-metal)",
+					strokeWidth: 2
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: 304,
+					y: 38 - (tankH - 4) * fill,
+					width: 102,
+					height: (tankH - 4) * fill,
+					fill: "var(--stage-accent)",
+					opacity: .55
+				}),
+				/* @__PURE__ */ jsx("line", {
+					x1: 355,
+					y1: 40,
+					x2: 355,
+					y2: H - 20,
+					stroke: "var(--stage-metal)",
+					strokeWidth: 3
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: 24,
+					y: H - 32,
+					width: 60,
+					height: 22,
+					rx: 4,
+					fill: "var(--stage-accent)",
+					opacity: .35
+				}),
+				/* @__PURE__ */ jsx("line", {
+					x1: 84,
+					y1: H - 21,
+					x2: 355,
+					y2: H - 21,
+					stroke: "var(--stage-metal)",
+					strokeWidth: 3
+				}),
+				/* @__PURE__ */ jsx("text", {
+					x: 24,
+					y: H - 38,
+					fontSize: 11,
+					fontWeight: 700,
+					fill: "var(--stage-fg)",
+					children: "pump"
+				}),
+				/* @__PURE__ */ jsx("text", {
+					x: 302,
+					y: tankY - 3,
+					fontSize: 11,
+					fontWeight: 700,
+					fill: "var(--stage-fg)",
+					children: "roof tank"
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "100%",
+		viewBox: `0 0 ${W} ${H}`,
+		role: "img",
+		"aria-label": "A bus at steady speed, drive force balanced by drag",
+		children: [
+			/* @__PURE__ */ jsx("line", {
+				x1: 0,
+				y1: H - 10,
+				x2: W,
+				y2: H - 10,
+				stroke: "var(--stage-fg)",
+				strokeWidth: 2
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M148 26 Q148 16 160 16 H274 Q286 18 290 30 L294 56 H148 Z",
+				fill: "var(--stage-accent)",
+				opacity: .28,
+				stroke: "var(--stage-accent)",
+				strokeWidth: 2
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: 178,
+				cy: 58,
+				r: 9,
+				fill: "var(--stage-fg)"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: 268,
+				cy: 58,
+				r: 9,
+				fill: "var(--stage-fg)"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: 296,
+				y1: 36,
+				x2: 392,
+				y2: 36,
+				stroke: "var(--stage-good)",
+				strokeWidth: 3,
+				markerEnd: "url(#stage-arrow)"
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: 344,
+				y: 30,
+				textAnchor: "middle",
+				fontSize: 11,
+				fontWeight: 700,
+				fill: "var(--stage-good)",
+				children: "drive F"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: 146,
+				y1: 36,
+				x2: 50,
+				y2: 36,
+				stroke: "var(--stage-warn)",
+				strokeWidth: 3,
+				markerEnd: "url(#stage-arrow)"
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: 98,
+				y: 30,
+				textAnchor: "middle",
+				fontSize: 11,
+				fontWeight: 700,
+				fill: "var(--stage-warn)",
+				children: "drag"
+			})
+		]
+	});
+}
+function PowerLab({ mode: mode0 = "lift", massKg = 500, heightM = 20, powerW = 2450, forceN = 600, speedMs = 30, title = "Power: the gradient of the energy-time graph", prompt = "Work is an area under force against distance. Power is a gradient of energy against time. Raise the power and the same job finishes sooner.", objectives, activity = "power" } = {}) {
+	const activityId = typeof activity === "string" ? activity : "power";
+	const authoredActivity = typeof activity === "string" ? POWER_ACTIVITY : activity;
+	const [mode, setMode] = useState(mode0);
+	const [mass, setMass] = useState(massKg);
+	const [height, setHeight] = useState(heightM);
+	const [power, setPower] = useState(powerW);
+	const [force, setForce] = useState(forceN);
+	const [speed, setSpeed] = useState(speedMs);
+	const lift = mode === "lift";
+	const workJ = mass * G * height;
+	const tFinish = workJ / power;
+	const drivePower = force * speed;
+	const P = lift ? power : drivePower;
+	const workKJ = workJ / 1e3;
+	const powerKW = P / 1e3;
+	const tMax = lift ? Math.max(tFinish * 1.3, 4) : 60;
+	const eMax = lift ? workKJ * 1.3 : powerKW * 60 * 1.15;
+	const view = {
+		xMin: -tMax * .1,
+		xMax: tMax * 1.02,
+		yMin: -eMax * .13,
+		yMax: eMax
+	};
+	const eAt = (t) => Math.min(powerKW * t, lift ? workKJ : Infinity);
+	const tEnd = lift ? Math.min(tFinish, tMax) : tMax;
+	const under = [
+		{
+			x: 0,
+			y: 0
+		},
+		{
+			x: tEnd,
+			y: 0
+		},
+		{
+			x: tEnd,
+			y: eAt(tEnd)
+		}
+	];
+	const figure = /* @__PURE__ */ jsxs(SceneSurface, {
+		className: "physics-power-scene",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "physics-power-context",
+			children: [/* @__PURE__ */ jsx(Picture, {
+				mode,
+				frac: lift ? 1 : 0
+			}), /* @__PURE__ */ jsx("span", { children: lift ? "A fixed job: lift this water to that height" : "Steady speed: the drive force only has to balance drag" })]
+		}), /* @__PURE__ */ jsxs(Stage, {
+			view,
+			height: 300,
+			preserveAspect: false,
+			ariaLabel: "Energy transferred against time; the gradient of the line is the power",
+			children: [
+				/* @__PURE__ */ jsx(Grid, {}),
+				/* @__PURE__ */ jsx(Axes, {
+					ticks: true,
+					labels: true
+				}),
+				/* @__PURE__ */ jsx(Polygon, {
+					points: under,
+					fill: "color-mix(in oklab, var(--stage-accent) 14%, transparent)",
+					color: "transparent"
+				}),
+				/* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: 0,
+						y: 0
+					},
+					to: {
+						x: tEnd,
+						y: eAt(tEnd)
+					},
+					color: ACCENT,
+					weight: 3
+				}),
+				lift && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: 0,
+							y: workKJ
+						},
+						to: {
+							x: tMax,
+							y: workKJ
+						},
+						color: "var(--stage-warn)",
+						weight: 2,
+						dashed: true
+					}),
+					/* @__PURE__ */ jsx(Label, {
+						x: tMax * .03,
+						y: workKJ * 1.09,
+						text: `the job: mgh = ${workKJ.toFixed(1)} kJ`,
+						color: "var(--stage-warn)",
+						anchor: "start"
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: tFinish,
+							y: 0
+						},
+						to: {
+							x: tFinish,
+							y: workKJ
+						},
+						color: "var(--stage-grid)",
+						weight: 1,
+						dashed: true
+					}),
+					/* @__PURE__ */ jsx(Dot, {
+						x: tFinish,
+						y: workKJ,
+						r: 5,
+						color: ACCENT
+					})
+				] }),
+				!lift && /* @__PURE__ */ jsx(Dot, {
+					x: tEnd,
+					y: eAt(tEnd),
+					r: 5,
+					color: ACCENT
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: tMax / 2,
+					y: -eMax * .105,
+					text: "time t (s)",
+					color: "var(--stage-muted)"
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: tMax * .03,
+					y: eMax * .96,
+					text: "energy transferred (kJ)",
+					color: "var(--stage-muted)",
+					anchor: "start"
+				})
+			]
+		})]
+	});
+	const instruments = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "physics-probe",
+		children: [
+			/* @__PURE__ */ jsx("span", { children: "Power" }),
+			/* @__PURE__ */ jsx("strong", {
+				className: "physics-equation-result",
+				children: /* @__PURE__ */ jsx(Tex$1, { tex: lift ? `P=\\frac{W}{t}=\\frac{${(workJ / 1e3).toFixed(1)}\\,\\mathrm{kJ}}{${tFinish.toFixed(1)}\\,\\mathrm{s}}=${(P / 1e3).toFixed(2)}\\,\\mathrm{kW}` : `P=Fv=${force}\\times${speed}=${(P / 1e3).toFixed(2)}\\,\\mathrm{kW}` })
+			}),
+			/* @__PURE__ */ jsx("small", { children: lift ? "Gradient of the line: joules delivered per second" : "At steady speed there is no gain in kinetic energy, so every joule goes against drag" })
+		]
+	}), /* @__PURE__ */ jsx("p", {
+		className: "physics-explain",
+		children: lift ? /* @__PURE__ */ jsx(Fragment$1, { children: "The dashed target is the job. It does not move when you change the power. Only the gradient changes, so the line meets the target at a different time." }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			"The line has no end here. The bus is not gaining energy, it is spending it against drag at a steady rate. That rate is ",
+			/* @__PURE__ */ jsx(Tex$1, { tex: "P=Fv" }),
+			"."
+		] })
+	})] });
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
+		label: "situation",
+		children: /* @__PURE__ */ jsx(ActivitySelect, {
+			ariaLabel: "situation",
+			value: mode,
+			onChange: setMode,
+			options: [{
+				value: "lift",
+				label: "pump a roof tank"
+			}, {
+				value: "drive",
+				label: "bus at steady speed"
+			}]
+		})
+	}), lift ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Field, {
+			label: "power",
+			value: `${(power / 1e3).toFixed(2)} kW`,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: power,
+				min: 500,
+				max: 12e3,
+				step: 50,
+				onChange: setPower,
+				ariaLabel: "pump power"
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "mass of water",
+			value: `${mass} kg`,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: mass,
+				min: 100,
+				max: 2e3,
+				step: 50,
+				onChange: setMass,
+				ariaLabel: "mass lifted"
+			})
+		}),
+		/* @__PURE__ */ jsx(Field, {
+			label: "height",
+			value: `${height} m`,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: height,
+				min: 4,
+				max: 40,
+				step: 1,
+				onChange: setHeight,
+				ariaLabel: "height raised"
+			})
+		})
+	] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
+		label: "drive force",
+		value: `${force} N`,
+		children: /* @__PURE__ */ jsx(Slider, {
+			value: force,
+			min: 100,
+			max: 2e3,
+			step: 50,
+			onChange: setForce,
+			ariaLabel: "driving force"
+		})
+	}), /* @__PURE__ */ jsx(Field, {
+		label: "steady speed",
+		value: `${speed} m/s`,
+		children: /* @__PURE__ */ jsx(Slider, {
+			value: speed,
+			min: 5,
+			max: 40,
+			step: 1,
+			onChange: setSpeed,
+			ariaLabel: "steady speed"
+		})
+	})] })] });
+	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: lift ? "Fixed job" : "Steady speed" }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				"P ",
+				(P / 1e3).toFixed(2),
+				" kW"
+			] }),
+			lift ? /* @__PURE__ */ jsxs("span", { children: [
+				"t ",
+				tFinish.toFixed(1),
+				" s"
+			] }) : /* @__PURE__ */ jsxs("span", { children: [
+				"v ",
+				speed,
+				" m/s"
+			] })
+		] }),
+		evidence: instruments,
+		controls,
+		observation: lift ? "The target line stays where it is. A steeper line reaches the same energy sooner, which is all that more power buys you." : "At a steady speed the drive force equals the drag, so the power is force times speed and the energy line climbs at a constant rate.",
+		transcript: /* @__PURE__ */ jsx("p", { children: lift ? `Lifting ${mass} kilograms through ${height} metres needs ${(workJ / 1e3).toFixed(1)} kilojoules. At ${(power / 1e3).toFixed(2)} kilowatts it takes ${tFinish.toFixed(1)} seconds.` : `A drive force of ${force} newtons at ${speed} metres per second is a power of ${(P / 1e3).toFixed(2)} kilowatts.` }),
+		children: ({ complete }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(AuthoredMetricGate, {
+				conditionId: "power-changed",
+				met: power !== powerW,
+				complete
+			}),
+			/* @__PURE__ */ jsx(AuthoredMetricGate, {
+				conditionId: "mode-changed",
+				met: mode !== mode0,
+				complete
+			}),
+			figure
+		] })
+	});
+}
+
+//#endregion
+export { PowerLab };

package/dist/physics/projectiles/core.d.mts

@@ -0,0 +1,7 @@
+//#region src/physics/projectiles/core.d.ts
+interface Vec {
+  x: number;
+  y: number;
+}
+//#endregion
+export { Vec };