@classytic/labs 0.1.0

package/dist/physics/circular-motion/preset.mjs

@@ -0,0 +1,293 @@
+'use client';
+
+import { clamp } from "../../core/util.mjs";
+import { CheckButton, Chip, Slider } from "../../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useFrameTick } from "../../kit/anim.mjs";
+import { PlayWrap, usePlayGate } from "../../kit/play.mjs";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Circle, Dot, Label, Segment, Stage, Vector } from "@classytic/stage";
+
+//#region src/physics/circular-motion/preset.tsx
+/**
+* CircularMotionLab — "Whirl & cut", where centripetal force points and where the
+* ball REALLY goes when you let go.
+*
+* A ball on a string whirls at constant speed. The velocity arrow is always
+* TANGENT; the tension (centripetal force F = mv²/r) always points to the centre —
+* it changes the direction of v, never its size. Then CUT THE STRING: the ball
+* flies off along the tangent in a straight line — NOT radially outward, the
+* single most common misconception. Tune v, r, m and read F live (hammer throw,
+* a car cornering, the spin cycle).
+*
+* Uses the ambient PlayWrap gate (pause to study the vectors). Tokenized SVG.
+*/
+function CircularMotionLab({ speed = 6, radius = 3, mass = 1, title = "Whirl & cut — where does it really go?", prompt = "The string’s tension is the centripetal force F = mv²/r — always toward the centre, bending the path without changing the speed. Cut the string and the ball leaves along the tangent, not outward.", objectives, controlConfig }) {
+	const [v, setV] = useState(speed);
+	const [r, setR] = useState(radius);
+	const [m, setM] = useState(mass);
+	const [cut, setCut] = useState(false);
+	const gate = usePlayGate();
+	const ang = useRef(0);
+	const fly = useRef(null);
+	const omega = v / r;
+	const F = m * v * v / r;
+	useFrameTick(gate.running, (f) => {
+		const dt = Math.min(.04, f.dtMs / 1e3);
+		if (!cut) ang.current = (ang.current + omega * dt) % (Math.PI * 2);
+		else if (fly.current) {
+			fly.current.x += fly.current.vx * dt;
+			fly.current.y += fly.current.vy * dt;
+			if (Math.hypot(fly.current.x, fly.current.y) > 8.5) gate.setPlaying(false);
+		}
+	});
+	const ballPos = () => ({
+		x: r * Math.cos(ang.current),
+		y: r * Math.sin(ang.current)
+	});
+	const tangent = () => ({
+		x: -Math.sin(ang.current),
+		y: Math.cos(ang.current)
+	});
+	function startFly() {
+		const p = ballPos();
+		const tg = tangent();
+		fly.current = {
+			x: p.x,
+			y: p.y,
+			vx: tg.x * v,
+			vy: tg.y * v
+		};
+	}
+	const doCut = () => {
+		startFly();
+		setCut(true);
+		gate.setPlaying(true);
+	};
+	const retie = () => {
+		setCut(false);
+		fly.current = null;
+	};
+	const onParam = (set) => (n) => {
+		set(n);
+		retie();
+	};
+	const VSCALE = .45;
+	const FSCALE = .1;
+	const p = cut && fly.current ? {
+		x: fly.current.x,
+		y: fly.current.y
+	} : ballPos();
+	const tg = tangent();
+	const span = Math.max(6, r + 3);
+	const figure = /* @__PURE__ */ jsx(PlayWrap, {
+		gate,
+		children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Stage, {
+			view: {
+				xMin: -span,
+				xMax: span,
+				yMin: -span,
+				yMax: span
+			},
+			height: 300,
+			ariaLabel: `Ball whirling at ${v} m/s on a ${r} m string, centripetal force ${F.toFixed(0)} newtons${cut ? "; string cut, flying off tangentially" : ""}`,
+			children: [
+				/* @__PURE__ */ jsx(Circle, {
+					center: {
+						x: 0,
+						y: 0
+					},
+					r,
+					color: "var(--stage-fg)",
+					opacity: .3,
+					weight: 1.2,
+					fill: "none"
+				}),
+				/* @__PURE__ */ jsx(Dot, {
+					x: 0,
+					y: 0,
+					r: 5,
+					color: "var(--stage-fg)",
+					opacity: .7
+				}),
+				!cut && /* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: 0,
+						y: 0
+					},
+					to: p,
+					color: "var(--stage-fg)",
+					opacity: .5,
+					weight: 1.5
+				}),
+				!cut && /* @__PURE__ */ jsx(Vector, {
+					tail: p,
+					tip: {
+						x: p.x - Math.cos(ang.current) * F * FSCALE,
+						y: p.y - Math.sin(ang.current) * F * FSCALE
+					},
+					color: "var(--stage-warn)",
+					weight: 3
+				}),
+				!cut && /* @__PURE__ */ jsx(Label, {
+					x: p.x - Math.cos(ang.current) * F * FSCALE,
+					y: p.y - Math.sin(ang.current) * F * FSCALE,
+					text: "F",
+					color: "var(--stage-warn)",
+					size: 12,
+					dy: -4
+				}),
+				/* @__PURE__ */ jsx(Vector, {
+					tail: p,
+					tip: {
+						x: p.x + tg.x * v * VSCALE,
+						y: p.y + tg.y * v * VSCALE
+					},
+					color: "var(--stage-good)",
+					weight: 3
+				}),
+				/* @__PURE__ */ jsx(Label, {
+					x: p.x + tg.x * v * VSCALE,
+					y: p.y + tg.y * v * VSCALE,
+					text: "v",
+					color: "var(--stage-good)",
+					size: 12,
+					dy: -4
+				}),
+				cut && fly.current && /* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: fly.current.x - tg.x * 12,
+						y: fly.current.y - tg.y * 12
+					},
+					to: {
+						x: fly.current.x + tg.x * 12,
+						y: fly.current.y + tg.y * 12
+					},
+					color: "var(--stage-good)",
+					opacity: .3,
+					weight: 1,
+					dashed: true
+				}),
+				/* @__PURE__ */ jsx(Circle, {
+					center: p,
+					r: .45,
+					color: "var(--stage-accent)",
+					fill: "var(--stage-accent)",
+					fillOpacity: .9,
+					weight: 1.5
+				})
+			]
+		}) })
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		aside: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 10
+			},
+			children: [
+				/* @__PURE__ */ jsx(Callout, {
+					tone: "result",
+					children: /* @__PURE__ */ jsxs("span", {
+						style: {
+							display: "grid",
+							gap: 4,
+							fontVariantNumeric: "tabular-nums"
+						},
+						children: [
+							/* @__PURE__ */ jsxs("span", { children: ["centripetal F = mv²/r = ", /* @__PURE__ */ jsxs("strong", { children: [F.toFixed(0), " N"] })] }),
+							/* @__PURE__ */ jsxs("span", { children: ["angular speed ω = v/r = ", /* @__PURE__ */ jsxs("strong", { children: [omega.toFixed(2), " rad/s"] })] }),
+							/* @__PURE__ */ jsxs("span", { children: ["period T = 2πr/v = ", /* @__PURE__ */ jsxs("strong", { children: [(2 * Math.PI * r / v).toFixed(2), " s"] })] })
+						]
+					})
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					style: {
+						fontSize: 12,
+						opacity: .75,
+						margin: 0
+					},
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							style: {
+								color: "var(--stage-good)",
+								fontWeight: 700
+							},
+							children: "v"
+						}),
+						" is tangent;",
+						/* @__PURE__ */ jsx("span", {
+							style: {
+								color: "var(--stage-warn)",
+								fontWeight: 700
+							},
+							children: " F"
+						}),
+						" points to the centre. Cut the string → no inward pull → straight-line tangent flight (Newton’s 1st law). Hammer throw, a car cornering, the spin cycle."
+					]
+				}),
+				/* @__PURE__ */ jsx(LiveRegion, { children: cut ? "String cut — the ball travels in a straight line along the tangent." : `Centripetal force ${F.toFixed(0)} newtons toward the centre.` })
+			]
+		}),
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			cut ? /* @__PURE__ */ jsx(CheckButton, {
+				onClick: retie,
+				children: "↺ Re-tie"
+			}) : /* @__PURE__ */ jsx(CheckButton, {
+				onClick: doCut,
+				children: "✂ Cut string"
+			}),
+			/* @__PURE__ */ jsx(Chip, {
+				selected: cut,
+				onClick: () => cut ? retie() : doCut(),
+				children: cut ? "flying free" : "on the string"
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "speed v",
+				value: `${v} m/s`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: v,
+					min: 2,
+					max: 12,
+					step: .5,
+					onChange: onParam(setV),
+					ariaLabel: "speed (m/s)"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "radius r",
+				value: `${r} m`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: r,
+					min: 1.5,
+					max: 5,
+					step: .5,
+					onChange: onParam((n) => setR(clamp(n, 1.5, 5))),
+					ariaLabel: "radius (m)"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "mass m",
+				value: `${m} kg`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: m,
+					min: .5,
+					max: 4,
+					step: .5,
+					onChange: onParam(setM),
+					ariaLabel: "mass (kg)"
+				})
+			})
+		] }),
+		controlConfig,
+		children: figure
+	});
+}
+
+//#endregion
+export { CircularMotionLab };

package/dist/physics/collision-track/index.d.mts

@@ -0,0 +1 @@
+import { CollisionTrackLab, CollisionTrackProps } from "./preset.mjs";

package/dist/physics/collision-track/preset.d.mts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+//#region src/physics/collision-track/preset.d.ts
+interface CollisionTrackProps {
+  m1?: number;
+  m2?: number;
+  u1?: number;
+  u2?: number;
+  elasticity?: number;
+  showCenterOfMass?: boolean;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+}
+declare function CollisionTrackLab({
+  m1,
+  m2,
+  u1,
+  u2,
+  elasticity,
+  showCenterOfMass,
+  title,
+  prompt,
+  objectives
+}: CollisionTrackProps): ReactNode;
+//#endregion
+export { CollisionTrackLab, CollisionTrackProps };

package/dist/physics/collision-track/preset.mjs

@@ -0,0 +1,352 @@
+'use client';
+
+import { CheckButton, Slider, StatusPill } from "../../kit/controls.mjs";
+import { ControlBar, Field, LabFrame, LiveRegion, MeterBar } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { useFrameTick, useReducedMotion } from "../../kit/anim.mjs";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Dot, Label, Polygon, Segment, Stage, Vector, useInView } from "@classytic/stage";
+
+//#region src/physics/collision-track/preset.tsx
+/**
+* CollisionTrackLab — "Sticky or Bouncy?", momentum always survives, KE doesn't.
+*
+* Two carts collide on a frictionless track. ONE elasticity slider morphs
+* continuously from perfectly inelastic (e=0, stick + KE drops) to perfectly
+* elastic (e=1, bounce, KE held). A momentum bar stays FULL through the collision
+* while the KE bar visibly leaks when e<1, and a constant-velocity centre-of-mass
+* marker sails dead-straight through the impact — the single-image proof that
+* momentum is conserved no matter what. Kills the "momentum is lost" misconception.
+*
+* Tokenized SVG; time-dependent so the integrator lives here; honours reduced-motion.
+*/
+const CART_W = 1.8, X0 = -9, X1 = 9;
+function CollisionTrackLab({ m1 = 1, m2 = 1, u1 = 4, u2 = -2, elasticity = 1, showCenterOfMass = true, title = "Sticky or Bouncy? — momentum always survives", prompt = "Set the elasticity, launch, and watch: the momentum bar stays full; the KE bar leaks when sticky.", objectives }) {
+	const [ma, setMa] = useState(m1);
+	const [mb, setMb] = useState(m2);
+	const [ua, setUa] = useState(u1);
+	const [ub, setUb] = useState(u2);
+	const [e, setE] = useState(elasticity);
+	const [running, setRunning] = useState(false);
+	const [collided, setCollided] = useState(false);
+	const [stopped, setStopped] = useState(false);
+	const xa = useRef(-6), xb = useRef(2);
+	const phase = useRef("approach");
+	const startedRef = useRef(false);
+	const reduce = useReducedMotion();
+	const { ref: viewRef, inView } = useInView();
+	useCheckpoint({
+		solved: stopped,
+		activity: "collision-track"
+	});
+	const M = ma + mb;
+	const va = (ma * ua + mb * ub + mb * e * (ub - ua)) / M;
+	const vb = (ma * ua + mb * ub + ma * e * (ua - ub)) / M;
+	(ma * ua + mb * ub) / M;
+	const pInit = ma * ua + mb * ub;
+	const keInit = .5 * ma * ua * ua + .5 * mb * ub * ub;
+	const after = collided;
+	const v1 = after ? va : ua, v2 = after ? vb : ub;
+	const pNow = ma * v1 + mb * v2;
+	const keNow = .5 * ma * v1 * v1 + .5 * mb * v2 * v2;
+	const keFrac = keInit > 1e-9 ? keNow / keInit : 1;
+	useFrameTick(running && inView, (f) => {
+		const dt = Math.min(.05, f.dtMs / 1e3);
+		if (phase.current === "approach") {
+			xa.current += ua * dt;
+			xb.current += ub * dt;
+			if (xb.current - xa.current <= CART_W) {
+				const overlap = CART_W - (xb.current - xa.current);
+				xa.current -= overlap / 2;
+				xb.current += overlap / 2;
+				phase.current = "after";
+				setCollided(true);
+			}
+		} else {
+			xa.current += va * dt;
+			xb.current += vb * dt;
+			if (e < .02) {
+				const mid = (xa.current + xb.current) / 2;
+				xa.current = mid - CART_W / 2;
+				xb.current = mid + CART_W / 2;
+			}
+		}
+		if (xa.current <= -8.1 || xb.current >= X1 - CART_W / 2 || phase.current === "after" && Math.abs(va) < .001 && Math.abs(vb) < .001) {
+			setRunning(false);
+			setStopped(true);
+		}
+	});
+	const reset = () => {
+		xa.current = -6;
+		xb.current = 2;
+		phase.current = "approach";
+		setCollided(false);
+		setStopped(false);
+	};
+	const launch = () => {
+		reset();
+		if (reduce) {
+			phase.current = "after";
+			setCollided(true);
+			return;
+		}
+		startedRef.current = true;
+		setRunning(true);
+	};
+	const onParam = (set) => (n) => {
+		set(n);
+		setRunning(false);
+		reset();
+	};
+	const xcom = (ma * xa.current + mb * xb.current) / M;
+	const view = {
+		xMin: X0,
+		xMax: X1,
+		yMin: -2,
+		yMax: 5
+	};
+	const Cart = (x, w, vel, tint, name) => {
+		const hw = CART_W / 2;
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Polygon, {
+				points: [
+					{
+						x: x - hw,
+						y: .15
+					},
+					{
+						x: x + hw,
+						y: .15
+					},
+					{
+						x: x + hw,
+						y: 1.3499999999999999
+					},
+					{
+						x: x - hw,
+						y: 1.3499999999999999
+					}
+				],
+				color: `color-mix(in oklab, ${tint} 60%, black)`,
+				fill: tint,
+				fillOpacity: .85,
+				weight: 1.5
+			}),
+			/* @__PURE__ */ jsx(Dot, {
+				x: x - hw * .55,
+				y: .15,
+				r: 4,
+				color: "var(--stage-metal)"
+			}),
+			/* @__PURE__ */ jsx(Dot, {
+				x: x + hw * .55,
+				y: .15,
+				r: 4,
+				color: "var(--stage-metal)"
+			}),
+			/* @__PURE__ */ jsx(Label, {
+				x,
+				y: .75,
+				text: `${w}kg`,
+				color: "var(--stage-bg)",
+				size: 12
+			}),
+			Math.abs(vel) > .05 && /* @__PURE__ */ jsx(Vector, {
+				tail: {
+					x,
+					y: 1.9499999999999997
+				},
+				tip: {
+					x: x + vel * .5,
+					y: 1.9499999999999997
+				},
+				color: tint,
+				weight: 3
+			})
+		] });
+	};
+	const figure = /* @__PURE__ */ jsx("div", {
+		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,
+			height: 210,
+			preserveAspect: false,
+			ariaLabel: `Two carts colliding, elasticity ${e.toFixed(2)}`,
+			children: [
+				/* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: X0,
+						y: 0
+					},
+					to: {
+						x: X1,
+						y: 0
+					},
+					color: "var(--stage-fg)",
+					opacity: .5,
+					weight: 2
+				}),
+				[
+					-8,
+					-4,
+					0,
+					4,
+					8
+				].map((mk) => /* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: mk,
+						y: -.2
+					},
+					to: {
+						x: mk,
+						y: 0
+					},
+					color: "var(--stage-fg)",
+					opacity: .3,
+					weight: 1
+				}, mk)),
+				Cart(xa.current, ma, v1, "var(--stage-accent)", "A"),
+				Cart(xb.current, mb, v2, "var(--stage-accent-2)", "B"),
+				showCenterOfMass && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: xcom,
+							y: -1.4
+						},
+						to: {
+							x: xcom,
+							y: 4.4
+						},
+						color: "var(--stage-good)",
+						weight: 1.5,
+						dashed: true,
+						opacity: .8
+					}),
+					/* @__PURE__ */ jsx(Dot, {
+						x: xcom,
+						y: 4.4,
+						r: 5,
+						color: "var(--stage-good)"
+					}),
+					/* @__PURE__ */ jsx(Label, {
+						x: xcom,
+						y: 4.4,
+						text: "COM",
+						color: "var(--stage-good)",
+						size: 10,
+						dy: -10
+					})
+				] })
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		aside: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 12
+			},
+			children: [
+				/* @__PURE__ */ jsx(MeterBar, {
+					label: "momentum p",
+					frac: pInit !== 0 ? pNow / pInit : Math.abs(pNow) < 1e-6 ? 1 : 0,
+					color: "var(--stage-good)",
+					value: `${pNow.toFixed(1)} kg·m/s`
+				}),
+				/* @__PURE__ */ jsx(MeterBar, {
+					label: "kinetic energy",
+					frac: keFrac,
+					color: keFrac > .99 ? "var(--stage-good)" : "var(--stage-warn)",
+					value: `${keNow.toFixed(1)} J${after && keFrac < .99 ? ` · ${Math.round((1 - keFrac) * 100)}% → heat 🔥` : ""}`
+				}),
+				/* @__PURE__ */ jsx(LiveRegion, { children: `Elasticity ${e.toFixed(2)}. Momentum ${pNow.toFixed(1)} conserved; kinetic energy ${after ? `${Math.round(keFrac * 100)} percent remaining` : "full before impact"}.` })
+			]
+		}),
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx(CheckButton, {
+				onClick: launch,
+				children: "▶ Launch"
+			}),
+			/* @__PURE__ */ jsx(StatusPill, {
+				ok: e > .98,
+				children: e > .98 ? "elastic · KE conserved" : e < .02 ? "perfectly inelastic · stick" : "inelastic · KE lost"
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "elasticity e",
+				value: e.toFixed(2),
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: e,
+					min: 0,
+					max: 1,
+					step: .05,
+					onChange: onParam(setE),
+					ariaLabel: "coefficient of restitution"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "m₁",
+				value: `${ma}kg`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: ma,
+					min: 1,
+					max: 6,
+					step: .5,
+					onChange: onParam(setMa),
+					ariaLabel: "mass of cart A (kg)"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "u₁",
+				value: `${ua}m/s`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: ua,
+					min: 0,
+					max: 8,
+					step: .5,
+					onChange: onParam(setUa),
+					ariaLabel: "initial velocity of cart A (m/s)"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "m₂",
+				value: `${mb}kg`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: mb,
+					min: 1,
+					max: 6,
+					step: .5,
+					onChange: onParam(setMb),
+					ariaLabel: "mass of cart B (kg)"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "u₂",
+				value: `${ub}m/s`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: ub,
+					min: -8,
+					max: 0,
+					step: .5,
+					onChange: onParam(setUb),
+					ariaLabel: "initial velocity of cart B (m/s)"
+				})
+			})
+		] }),
+		children: figure
+	});
+}
+
+//#endregion
+export { CollisionTrackLab };

package/dist/physics/efficiency/index.d.mts

@@ -0,0 +1 @@
+import { EffStream, EfficiencyLab, EfficiencyProps } from "./preset.mjs";

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

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+
+//#region src/physics/efficiency/preset.d.ts
+interface EffStream {
+  label: string;
+  /** Share of the input (any positive units; normalised). */
+  share: number;
+  kind: 'useful' | 'waste';
+  color?: string;
+}
+interface EfficiencyProps {
+  /** Built-in device preset (ignored if `streams` is given). */
+  device?: 'incandescent' | 'led' | 'petrol-engine' | 'electric-motor' | 'power-station' | 'human';
+  deviceName?: string;
+  /** Energy supplied, J (default 100 — so shares read as percentages). */
+  inputJoules?: number;
+  /** Author your own breakdown — overrides the preset entirely. */
+  streams?: EffStream[];
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+}
+declare function EfficiencyLab({
+  device: device0,
+  deviceName,
+  inputJoules,
+  streams: streamsProp,
+  title,
+  prompt,
+  objectives
+}?: EfficiencyProps): ReactNode;
+//#endregion
+export { EffStream, EfficiencyLab, EfficiencyProps };