@classytic/labs 0.1.0

package/dist/physics/efficiency/preset.mjs

@@ -0,0 +1,343 @@
+'use client';
+
+import { Tex } from "../../core/tex.mjs";
+import { Chip } from "../../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
+import { useFrameTick } from "../../kit/anim.mjs";
+import { PlayWrap, usePlayGate } from "../../kit/play.mjs";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/physics/efficiency/preset.tsx
+/**
+* EfficiencyLab — efficiency as the input→output RATIO you can see. Energy flows in
+* on the left and splits into a USEFUL output stream and WASTED streams (usually
+* heat), drawn as a Sankey: each ribbon's thickness is its share of the energy, so
+* efficiency η = useful / input is literally the fraction of the flow that stays
+* green. Compare an incandescent bulb (≈5%) with an LED (≈45%), a petrol engine
+* (≈25%) with an electric motor (≈90%) — and feel why "wasted as heat" matters.
+*
+* The device is AUTHORABLE: a creator declares the streams (label, share, useful or
+* waste) so the same lab draws any energy-flow / efficiency diagram. Interactive
+* resize on every change; press Play to watch the energy actually stream. Pure SVG.
+*/
+const W = 720, H = 340;
+const GREEN = "var(--stage-good, #16a34a)";
+const HEAT = "rgb(214,90,60)";
+const PRESETS = {
+	incandescent: {
+		name: "Incandescent bulb",
+		streams: [{
+			label: "Light",
+			share: 5,
+			kind: "useful"
+		}, {
+			label: "Heat",
+			share: 95,
+			kind: "waste"
+		}]
+	},
+	led: {
+		name: "LED bulb",
+		streams: [{
+			label: "Light",
+			share: 45,
+			kind: "useful"
+		}, {
+			label: "Heat",
+			share: 55,
+			kind: "waste"
+		}]
+	},
+	"petrol-engine": {
+		name: "Petrol engine",
+		streams: [{
+			label: "Motion",
+			share: 25,
+			kind: "useful"
+		}, {
+			label: "Heat (exhaust + cooling)",
+			share: 75,
+			kind: "waste"
+		}]
+	},
+	"electric-motor": {
+		name: "Electric motor",
+		streams: [{
+			label: "Motion",
+			share: 90,
+			kind: "useful"
+		}, {
+			label: "Heat",
+			share: 10,
+			kind: "waste"
+		}]
+	},
+	"power-station": {
+		name: "Thermal power station",
+		streams: [{
+			label: "Electricity",
+			share: 40,
+			kind: "useful"
+		}, {
+			label: "Heat (cooling towers)",
+			share: 60,
+			kind: "waste"
+		}]
+	},
+	human: {
+		name: "Human body",
+		streams: [{
+			label: "Useful work",
+			share: 25,
+			kind: "useful"
+		}, {
+			label: "Heat",
+			share: 75,
+			kind: "waste"
+		}]
+	}
+};
+const ORDER = [
+	"incandescent",
+	"led",
+	"petrol-engine",
+	"electric-motor",
+	"power-station",
+	"human"
+];
+function EfficiencyLab({ device: device0 = "incandescent", deviceName, inputJoules = 100, streams: streamsProp, title = "Efficiency — how much of the energy is useful?", prompt = "Energy in splits into useful output and wasted energy (mostly heat). Efficiency is the fraction that comes out useful: η = useful ÷ input. Compare the devices.", objectives = [
+	"Define efficiency as the input→output ratio η = useful energy ÷ total input",
+	"Read a Sankey diagram — ribbon thickness is energy share",
+	"Compare real devices and see where energy is wasted (heat)"
+] } = {}) {
+	const [device, setDevice] = useState(device0);
+	const tRef = useRef(0);
+	const gate = usePlayGate();
+	useFrameTick(gate.running, (f) => {
+		tRef.current += Math.min(.05, f.dtMs / 1e3);
+	});
+	const t = tRef.current;
+	const preset = PRESETS[device];
+	const streams = streamsProp && streamsProp.length ? streamsProp : preset.streams;
+	const name = deviceName ?? (streamsProp ? "Device" : preset.name);
+	const total = streams.reduce((a, s) => a + Math.max(0, s.share), 0) || 1;
+	const usefulFrac = streams.filter((s) => s.kind === "useful").reduce((a, s) => a + s.share, 0) / total;
+	const colorOf = (s) => s.color ?? (s.kind === "useful" ? GREEN : HEAT);
+	const INX1 = 150, OUTX = 520, TOP = 80, bandH = 300 - TOP;
+	const ordered = [...streams].sort((a, b) => a.kind === b.kind ? 0 : a.kind === "useful" ? -1 : 1);
+	let yi = TOP;
+	const inSeg = ordered.map((s) => {
+		const h = s.share / total * bandH;
+		const seg = {
+			s,
+			y0: yi,
+			y1: yi + h
+		};
+		yi += h;
+		return seg;
+	});
+	const usefulH = ordered.filter((s) => s.kind === "useful").reduce((a, s) => a + s.share / total * bandH, 0);
+	const GAP = 26;
+	let yo = TOP, started = false;
+	const outSeg = ordered.map((s) => {
+		if (s.kind === "waste" && !started) {
+			started = true;
+			yo = TOP + usefulH + GAP;
+		}
+		const h = s.share / total * (bandH - GAP * 0);
+		const seg = {
+			s,
+			y0: yo,
+			y1: yo + h
+		};
+		yo += h;
+		return seg;
+	});
+	const ribbon = (a, b, color) => {
+		const mx = 670 / 2;
+		return /* @__PURE__ */ jsx("path", {
+			d: `M ${INX1} ${a.y0} C ${mx} ${a.y0}, ${mx} ${b.y0}, ${OUTX} ${b.y0} L ${OUTX} ${b.y1} C ${mx} ${b.y1}, ${mx} ${a.y1}, ${INX1} ${a.y1} Z`,
+			fill: color,
+			fillOpacity: .5
+		});
+	};
+	const flow = [];
+	if (gate.playing) inSeg.forEach((seg, k) => {
+		const o = outSeg[k];
+		const yMidA = (seg.y0 + seg.y1) / 2, yMidB = (o.y0 + o.y1) / 2;
+		const n = Math.max(1, Math.round(seg.s.share / total * 14));
+		for (let i = 0; i < n; i++) {
+			const u = (t * .5 + i / n) % 1;
+			const x = INX1 + u * (OUTX - INX1);
+			const e = u * u * (3 - 2 * u);
+			const y = yMidA + (yMidB - yMidA) * e;
+			flow.push(/* @__PURE__ */ jsx("circle", {
+				cx: x,
+				cy: y,
+				r: 2.6,
+				fill: colorOf(seg.s),
+				opacity: .9
+			}, `${k}-${i}`));
+		}
+	});
+	const figure = /* @__PURE__ */ jsx(PlayWrap, {
+		gate,
+		children: /* @__PURE__ */ jsx("div", {
+			style: {
+				borderRadius: 14,
+				overflow: "hidden",
+				background: "var(--stage-bg)",
+				border: "1px solid var(--stage-grid)"
+			},
+			children: /* @__PURE__ */ jsxs("svg", {
+				viewBox: `0 0 ${W} ${H}`,
+				width: "100%",
+				role: "img",
+				"aria-label": `${name}, efficiency ${Math.round(usefulFrac * 100)} percent`,
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						x: 90,
+						y: TOP,
+						width: INX1 - 90,
+						height: bandH,
+						rx: 3,
+						fill: "var(--stage-accent, #3b82f6)",
+						opacity: .7
+					}),
+					/* @__PURE__ */ jsx("text", {
+						x: 90,
+						y: TOP - 10,
+						fontSize: 12,
+						fontWeight: 700,
+						fill: "var(--stage-fg)",
+						children: "energy in"
+					}),
+					/* @__PURE__ */ jsxs("text", {
+						x: 90,
+						y: 318,
+						fontSize: 11,
+						fill: "var(--stage-muted)",
+						children: [inputJoules, " J (100%)"]
+					}),
+					inSeg.map((seg, k) => /* @__PURE__ */ jsx("g", { children: ribbon(seg, outSeg[k], colorOf(seg.s)) }, k)),
+					flow,
+					outSeg.map((seg, k) => {
+						const j = seg.s.share / total * inputJoules;
+						return /* @__PURE__ */ jsxs("g", { children: [
+							/* @__PURE__ */ jsx("rect", {
+								x: OUTX,
+								y: seg.y0,
+								width: 6,
+								height: Math.max(2, seg.y1 - seg.y0),
+								fill: colorOf(seg.s)
+							}),
+							/* @__PURE__ */ jsx("text", {
+								x: 532,
+								y: (seg.y0 + seg.y1) / 2 - 2,
+								fontSize: 12,
+								fontWeight: 700,
+								fill: colorOf(seg.s),
+								children: seg.s.label
+							}),
+							/* @__PURE__ */ jsxs("text", {
+								x: 532,
+								y: (seg.y0 + seg.y1) / 2 + 13,
+								fontSize: 11,
+								fill: "var(--stage-muted)",
+								style: { fontVariantNumeric: "tabular-nums" },
+								children: [
+									j.toFixed(0),
+									" J · ",
+									Math.round(seg.s.share / total * 100),
+									"%",
+									seg.s.kind === "useful" ? " ✓ useful" : " wasted"
+								]
+							})
+						] }, k);
+					})
+				]
+			})
+		})
+	});
+	const usefulJ = usefulFrac * inputJoules;
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		aside: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Callout, {
+			tone: "result",
+			children: /* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "grid",
+					gap: 2,
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: [/* @__PURE__ */ jsxs("span", {
+					style: {
+						fontWeight: 800,
+						fontSize: 20
+					},
+					children: [
+						"η = ",
+						Math.round(usefulFrac * 100),
+						"%"
+					]
+				}), /* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: 13,
+						color: "var(--stage-muted)"
+					},
+					children: name
+				})]
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "grid",
+				gap: 8,
+				padding: "8px 2px 0",
+				fontSize: 13
+			},
+			children: [/* @__PURE__ */ jsx(Tex, {
+				tex: "\\eta = \\dfrac{\\text{useful output}}{\\text{total input}}",
+				block: true
+			}), /* @__PURE__ */ jsxs("span", {
+				style: { color: "var(--stage-muted)" },
+				children: [
+					"Of every ",
+					/* @__PURE__ */ jsxs("strong", {
+						style: { color: "var(--stage-fg)" },
+						children: [inputJoules, " J"]
+					}),
+					" in, ",
+					/* @__PURE__ */ jsxs("strong", {
+						style: { color: GREEN },
+						children: [usefulJ.toFixed(0), " J"]
+					}),
+					" comes out useful and ",
+					/* @__PURE__ */ jsxs("strong", {
+						style: { color: HEAT },
+						children: [(inputJoules - usefulJ).toFixed(0), " J"]
+					}),
+					" is wasted (mostly heat). Energy is conserved — efficiency is about how much ends up where you want it."
+				]
+			})]
+		})] }),
+		controls: /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
+			label: "device",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "lab-field-row",
+				style: { flexWrap: "wrap" },
+				children: ORDER.map((k) => /* @__PURE__ */ jsx(Chip, {
+					selected: device === k,
+					onClick: () => setDevice(k),
+					children: PRESETS[k].name
+				}, k))
+			})
+		}) }),
+		children: figure
+	});
+}
+
+//#endregion
+export { EfficiencyLab };

package/dist/physics/electric-field/index.d.mts

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

package/dist/physics/electric-field/preset.d.mts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+//#region src/physics/electric-field/preset.d.ts
+interface ElectricFieldProps {
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+}
+declare function ElectricFieldLab({
+  title,
+  prompt,
+  objectives
+}?: ElectricFieldProps): ReactNode;
+//#endregion
+export { ElectricFieldLab, ElectricFieldProps };

package/dist/physics/electric-field/preset.mjs

@@ -0,0 +1,306 @@
+'use client';
+
+import { Chip } from "../../kit/controls.mjs";
+import { ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
+import { ChallengeCard, useChallenge, useCheckpoint } from "../../kit/pedagogy.mjs";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { MovableDot, Stage, useCoords } from "@classytic/stage";
+import { fieldAt, fieldLines } from "@classytic/stage/field";
+
+//#region src/physics/electric-field/preset.tsx
+/**
+* ElectricFieldLab — Coulomb's field you can see and probe, on the same
+* @classytic/stage `field` kernel that draws magnetism (one kernel → both). Drag
+* two charges (flip either +/−); field lines retrace live, flowing OUT of + into −.
+* Drop the test charge anywhere and a force arrow F = qE appears — toward + or away,
+* depending on its sign. Interactive (recomputed on drag), not a timed sim.
+*/
+const VIEW = {
+	xMin: -6.5,
+	xMax: 6.5,
+	yMin: -4.1,
+	yMax: 4.1
+};
+const EFIELD_CHALLENGE = [{
+	id: "lines",
+	prompt: "Electric field lines point…",
+	choices: [{
+		value: "out",
+		label: "out of + and into −"
+	}, {
+		value: "in",
+		label: "into + and out of −"
+	}],
+	answer: "out",
+	explain: "Field lines flow OUT of a positive charge and INTO a negative one."
+}, {
+	id: "force",
+	prompt: "A positive test charge placed near a + charge feels a force…",
+	choices: [
+		{
+			value: "away",
+			label: "pushing it away"
+		},
+		{
+			value: "toward",
+			label: "pulling it toward"
+		},
+		{
+			value: "none",
+			label: "no force at all"
+		}
+	],
+	answer: "away",
+	explain: "F = qE points along E for a + charge, so it is pushed away from the + charge (like repels like)."
+}];
+const POS = "var(--stage-danger, #e03131)";
+const NEG = "var(--stage-accent, #3b82f6)";
+const FORCE = "var(--stage-good)";
+const mag = (v) => Math.hypot(v.x, v.y) || 1;
+function ChargeFigure({ sources, lines, charges, test, testSign }) {
+	const c = useCoords();
+	const P = (v) => c.toPx(v.x, v.y);
+	const arrow = (a, b, key, color) => {
+		const [ax, ay] = P(a), [bx, by] = P(b);
+		const ang = Math.atan2(by - ay, bx - ax), s = 7;
+		return /* @__PURE__ */ jsx("polygon", {
+			points: `${bx},${by} ${bx - s * Math.cos(ang - .5)},${by - s * Math.sin(ang - .5)} ${bx - s * Math.cos(ang + .5)},${by - s * Math.sin(ang + .5)}`,
+			fill: color
+		}, key);
+	};
+	const E = fieldAt(sources, test);
+	const Em = mag(E);
+	const dir = {
+		x: testSign * E.x / Em,
+		y: testSign * E.y / Em
+	};
+	const fTip = {
+		x: test.x + dir.x * 1.1,
+		y: test.y + dir.y * 1.1
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		lines.map((ln, i) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("polyline", {
+			points: ln.points.map((pt) => P(pt).join(",")).join(" "),
+			fill: "none",
+			stroke: "color-mix(in oklab, var(--stage-accent) 60%, transparent)",
+			strokeWidth: 1.5,
+			strokeLinejoin: "round",
+			strokeLinecap: "round"
+		}), ln.points.length > 24 && (() => {
+			const j = Math.floor(ln.points.length * .45);
+			return arrow(ln.points[j], ln.points[j + 2], `a${i}`, "var(--stage-accent)");
+		})()] }, `l${i}`)),
+		(() => {
+			const [tx, ty] = P(test);
+			const [fx, fy] = P(fTip);
+			return /* @__PURE__ */ jsxs("g", {
+				style: { pointerEvents: "none" },
+				children: [
+					/* @__PURE__ */ jsx("line", {
+						x1: tx,
+						y1: ty,
+						x2: fx,
+						y2: fy,
+						stroke: FORCE,
+						strokeWidth: 3,
+						strokeLinecap: "round"
+					}),
+					arrow(test, fTip, "F", FORCE),
+					/* @__PURE__ */ jsx("text", {
+						x: fx + 6,
+						y: fy + 4,
+						fontSize: 12,
+						fontWeight: 800,
+						fill: FORCE,
+						children: "F"
+					})
+				]
+			});
+		})(),
+		charges.map((ch, i) => {
+			const [x, y] = P(ch.at);
+			return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+				cx: x,
+				cy: y,
+				r: 15,
+				fill: ch.q > 0 ? POS : NEG
+			}), /* @__PURE__ */ jsx("text", {
+				x,
+				y: y + 5,
+				textAnchor: "middle",
+				fontSize: 18,
+				fontWeight: 800,
+				fill: "white",
+				children: ch.q > 0 ? "+" : "−"
+			})] }, `c${i}`);
+		}),
+		(() => {
+			const [x, y] = P(test);
+			return /* @__PURE__ */ jsxs("g", {
+				style: { pointerEvents: "none" },
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: x,
+					cy: y,
+					r: 8,
+					fill: "var(--stage-bg)",
+					stroke: FORCE,
+					strokeWidth: 2.5
+				}), /* @__PURE__ */ jsx("text", {
+					x,
+					y: y + 4,
+					textAnchor: "middle",
+					fontSize: 11,
+					fontWeight: 800,
+					fill: FORCE,
+					children: testSign > 0 ? "+" : "−"
+				})]
+			});
+		})()
+	] });
+}
+function ElectricFieldLab({ title = "Electric field — charges & the force you feel", prompt = "Drag the two charges and flip their signs; field lines flow out of + into −. Drop the test charge and watch the force F = qE.", objectives = [
+	"Read an electric field as field lines (out of +, into −)",
+	"See like charges repel, opposites attract",
+	"Feel the force on a test charge: F = qE"
+] } = {}) {
+	const [a, setA] = useState({
+		x: -2.2,
+		y: 0
+	});
+	const [b, setB] = useState({
+		x: 2.2,
+		y: 0
+	});
+	const [qa, setQa] = useState(1);
+	const [qb, setQb] = useState(-1);
+	const [test, setTest] = useState({
+		x: 0,
+		y: 2.3
+	});
+	const [testSign, setTestSign] = useState(1);
+	const challenge = useChallenge(EFIELD_CHALLENGE);
+	useCheckpoint({
+		solved: challenge.allCorrect,
+		activity: "electric-field"
+	});
+	const charges = useMemo(() => [{
+		at: a,
+		q: qa
+	}, {
+		at: b,
+		q: qb
+	}], [
+		a,
+		b,
+		qa,
+		qb
+	]);
+	const sources = useMemo(() => charges.map((ch) => ({
+		kind: "point",
+		at: ch.at,
+		q: ch.q
+	})), [charges]);
+	const figure = /* @__PURE__ */ jsxs(Stage, {
+		view: VIEW,
+		height: 420,
+		ariaLabel: "Electric field lines from two charges, with a draggable test charge feeling a force",
+		children: [
+			/* @__PURE__ */ jsx(ChargeFigure, {
+				sources,
+				lines: useMemo(() => fieldLines(sources, {
+					perSource: 14,
+					step: .07,
+					maxSteps: 700,
+					bounds: VIEW,
+					seed: .35
+				}), [sources]),
+				charges,
+				test,
+				testSign
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: a,
+				onMove: (p) => setA(p),
+				color: qa > 0 ? POS : NEG,
+				ariaLabel: "charge A",
+				r: 9
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: b,
+				onMove: (p) => setB(p),
+				color: qb > 0 ? POS : NEG,
+				ariaLabel: "charge B",
+				r: 9
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: test,
+				onMove: (p) => setTest(p),
+				color: FORCE,
+				ariaLabel: "test charge",
+				r: 8
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx(Field, {
+				label: "charge A",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "lab-field-row",
+					children: [/* @__PURE__ */ jsx(Chip, {
+						selected: qa > 0,
+						onClick: () => setQa(1),
+						children: "+"
+					}), /* @__PURE__ */ jsx(Chip, {
+						selected: qa < 0,
+						onClick: () => setQa(-1),
+						children: "−"
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "charge B",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "lab-field-row",
+					children: [/* @__PURE__ */ jsx(Chip, {
+						selected: qb > 0,
+						onClick: () => setQb(1),
+						children: "+"
+					}), /* @__PURE__ */ jsx(Chip, {
+						selected: qb < 0,
+						onClick: () => setQb(-1),
+						children: "−"
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "test charge",
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "lab-field-row",
+					children: [/* @__PURE__ */ jsx(Chip, {
+						selected: testSign > 0,
+						onClick: () => setTestSign(1),
+						children: "+ probe"
+					}), /* @__PURE__ */ jsx(Chip, {
+						selected: testSign < 0,
+						onClick: () => setTestSign(-1),
+						children: "− probe"
+					})]
+				})
+			})
+		] }),
+		footer: /* @__PURE__ */ jsx(ChallengeCard, {
+			questions: EFIELD_CHALLENGE,
+			state: challenge,
+			title: "Predict"
+		}),
+		children: figure
+	});
+}
+
+//#endregion
+export { ElectricFieldLab };

package/dist/physics/energy-skate/index.d.mts

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

package/dist/physics/energy-skate/preset.d.mts

@@ -0,0 +1,25 @@
+import { ControlConfig } from "../../kit/frame.mjs";
+import { ReactNode } from "react";
+
+//#region src/physics/energy-skate/preset.d.ts
+interface EnergySkateProps {
+  startHeight?: number;
+  friction?: boolean;
+  mass?: number;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+  /** Lock/hide knobs, e.g. `{ hide: ['friction'] }` to pin friction off (or on). */
+  controlConfig?: ControlConfig;
+}
+declare function EnergySkateLab({
+  startHeight,
+  friction,
+  mass,
+  title,
+  prompt,
+  objectives,
+  controlConfig
+}: EnergySkateProps): ReactNode;
+//#endregion
+export { EnergySkateLab, EnergySkateProps };