@classytic/labs 0.1.0 → 0.2.0

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

@@ -3,6 +3,7 @@
 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 { ChallengeCard, useChallenge, useCheckpoint } from "../../kit/pedagogy.mjs";
 import { useFrameTick } from "../../kit/anim.mjs";
 import { PlayWrap, usePlayGate } from "../../kit/play.mjs";
 import { useRef, useState } from "react";
@@ -11,24 +12,49 @@ 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
+* 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 —
+* 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
+* 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 PREDICT = [{
+	id: "release",
+	prompt: "You’re whirling a ball on a string in a circle. At the instant you LET GO, which way does the ball fly?",
+	choices: [
+		{
+			value: "tangent",
+			label: "straight, along the tangent (the way it was moving)"
+		},
+		{
+			value: "radial",
+			label: "straight outward, away from the centre"
+		},
+		{
+			value: "curve",
+			label: "it keeps curving for a bit"
+		}
+	],
+	answer: "tangent",
+	explain: "No force acts after release, so by Newton’s first law it travels in a straight line along its velocity — the tangent. It does NOT fly radially outward (that’s the common misconception) and does not keep curving."
+}];
+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 ch = useChallenge(PREDICT);
+	useCheckpoint({
+		solved: ch.allCorrect,
+		activity: "circular-motion-predict"
+	});
 	const ang = useRef(0);
 	const fly = useRef(null);
 	const omega = v / r;
@@ -231,7 +257,7 @@ function CircularMotionLab({ speed = 6, radius = 3, mass = 1, title = "Whirl & c
 						" 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.` })
+				/* @__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: [
@@ -284,6 +310,11 @@ function CircularMotionLab({ speed = 6, radius = 3, mass = 1, title = "Whirl & c
 				})
 			})
 		] }),
+		footer: /* @__PURE__ */ jsx(ChallengeCard, {
+			questions: PREDICT,
+			state: ch,
+			title: "Predict first"
+		}),
 		controlConfig,
 		children: figure
 	});

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

@@ -2,7 +2,7 @@
 
 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 { ChallengeCard, useChallenge, 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";
@@ -10,19 +10,43 @@ import { Dot, Label, Polygon, Segment, Stage, Vector, useInView } from "@classyt
 
 //#region src/physics/collision-track/preset.tsx
 /**
-* CollisionTrackLab — "Sticky or Bouncy?", momentum always survives, KE doesn't.
+* 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
+* 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 PREDICT_Q = [{
+	id: "collision-track-conserved",
+	prompt: "These carts collide and BOUNCE apart (elastic, e = 1). After the crash, which is conserved — total momentum, total kinetic energy, both, or neither?",
+	choices: [
+		{
+			value: "momentum",
+			label: "momentum only"
+		},
+		{
+			value: "both",
+			label: "both"
+		},
+		{
+			value: "ke",
+			label: "kinetic energy only"
+		},
+		{
+			value: "neither",
+			label: "neither"
+		}
+	],
+	answer: "both",
+	explain: "Momentum is always conserved in a collision (no external force). In a perfectly elastic collision (e = 1) the carts bounce with no energy lost to heat or deformation, so kinetic energy is conserved too — hence both. Slide elasticity below 1 and the KE bar will start to leak."
+}];
+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);
@@ -36,8 +60,9 @@ function CollisionTrackLab({ m1 = 1, m2 = 1, u1 = 4, u2 = -2, elasticity = 1, sh
 	const startedRef = useRef(false);
 	const reduce = useReducedMotion();
 	const { ref: viewRef, inView } = useInView();
+	const ch = useChallenge(PREDICT_Q);
 	useCheckpoint({
-		solved: stopped,
+		solved: ch.allCorrect && stopped,
 		activity: "collision-track"
 	});
 	const M = ma + mb;
@@ -344,6 +369,11 @@ function CollisionTrackLab({ m1 = 1, m2 = 1, u1 = 4, u2 = -2, elasticity = 1, sh
 				})
 			})
 		] }),
+		footer: /* @__PURE__ */ jsx(ChallengeCard, {
+			questions: PREDICT_Q,
+			state: ch,
+			title: "Predict first"
+		}),
 		children: figure
 	});
 }

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

@@ -12,9 +12,9 @@ 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). */
+  /** Energy supplied, J (default 100, so shares read as percentages). */
   inputJoules?: number;
-  /** Author your own breakdown — overrides the preset entirely. */
+  /** Author your own breakdown, overrides the preset entirely. */
   streams?: EffStream[];
   title?: string;
   prompt?: string;

package/dist/physics/efficiency/preset.mjs

@@ -10,12 +10,12 @@ 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
+* 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.
+* (≈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
@@ -106,9 +106,9 @@ const ORDER = [
 	"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 = [
+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",
+	"Read a Sankey diagram, ribbon thickness is energy share",
 	"Compare real devices and see where energy is wasted (heat)"
 ] } = {}) {
 	const [device, setDevice] = useState(device0);
@@ -319,7 +319,7 @@ function EfficiencyLab({ device: device0 = "incandescent", deviceName, inputJoul
 						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."
+					" is wasted (mostly heat). Energy is conserved, efficiency is about how much ends up where you want it."
 				]
 			})]
 		})] }),

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

@@ -10,10 +10,10 @@ 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
+* 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,
+* 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 = {
@@ -58,7 +58,7 @@ 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 }) {
+function ChargeFigure({ sources, lines, test, testSign }) {
 	const c = useCoords();
 	const P = (v) => c.toPx(v.x, v.y);
 	const arrow = (a, b, key, color) => {
@@ -118,23 +118,6 @@ function ChargeFigure({ sources, lines, charges, test, testSign }) {
 				]
 			});
 		})(),
-		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", {
@@ -159,7 +142,33 @@ function ChargeFigure({ sources, lines, charges, test, testSign }) {
 		})()
 	] });
 }
-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 = [
+/** The charge discs with their ± sign, drawn ON TOP so the drag handles never hide them. */
+function ChargeSymbols({ charges }) {
+	const c = useCoords();
+	return /* @__PURE__ */ jsx("g", {
+		style: { pointerEvents: "none" },
+		children: charges.map((ch, i) => {
+			const [x, y] = c.toPx(ch.at.x, ch.at.y);
+			return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+				cx: x,
+				cy: y,
+				r: 15,
+				fill: ch.q > 0 ? POS : NEG,
+				stroke: "var(--stage-bg)",
+				strokeWidth: 2
+			}), /* @__PURE__ */ jsx("text", {
+				x,
+				y: y + 5,
+				textAnchor: "middle",
+				fontSize: 18,
+				fontWeight: 800,
+				fill: "white",
+				children: ch.q > 0 ? "+" : "−"
+			})] }, i);
+		})
+	});
+}
+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"
@@ -215,7 +224,6 @@ function ElectricFieldLab({ title = "Electric field — charges & the force you
 					bounds: VIEW,
 					seed: .35
 				}), [sources]),
-				charges,
 				test,
 				testSign
 			}),
@@ -239,7 +247,8 @@ function ElectricFieldLab({ title = "Electric field — charges & the force you
 				color: FORCE,
 				ariaLabel: "test charge",
 				r: 8
-			})
+			}),
+			/* @__PURE__ */ jsx(ChargeSymbols, { charges })
 		]
 	});
 	return /* @__PURE__ */ jsx(LabFrame, {

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

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

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

@@ -0,0 +1,29 @@
+import { LabAskSpec } from "../../kit/ask.mjs";
+import { ReactNode } from "react";
+
+//#region src/physics/electric-flux/preset.d.ts
+interface ElectricFluxProps {
+  /** Field strength in vacuum (arbitrary units). */
+  field?: number;
+  /** Area (length of the flat window, in scene units). */
+  area?: number;
+  /** Initial angle between the area's normal and the field, in degrees. */
+  angleDeg?: number;
+  title?: string;
+  prompt?: string;
+  ask?: LabAskSpec;
+  height?: number;
+  activity?: string;
+}
+declare function ElectricFluxLab({
+  field,
+  area,
+  angleDeg,
+  title,
+  prompt,
+  ask,
+  height,
+  activity
+}?: ElectricFluxProps): ReactNode;
+//#endregion
+export { ElectricFluxLab, ElectricFluxProps };

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

@@ -0,0 +1,264 @@
+'use client';
+
+import { Chip, Slider } from "../../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
+import { AngleArc } from "../../kit/diagram.mjs";
+import { LabAsk } from "../../kit/ask.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, MovableDot, Segment, Stage, Vector } from "@classytic/stage";
+
+//#region src/physics/electric-flux/preset.tsx
+/**
+* ElectricFluxLab, the concept of flux (Φ) made literal: flux is just HOW MANY
+* field lines thread through your area. A uniform field points to the right as a
+* set of evenly spaced lines (denser = stronger E). Drop a flat "area" into it and
+* the lines that actually pass through it light up green; that count IS the flux.
+*
+*   • rotate the area: edge-on to the field, nothing threads it (Φ = 0); face-on,
+*     the maximum threads it (Φ = E·A). In between, Φ = E·A·cosθ, where θ is the
+*     angle between the area's NORMAL and the field.
+*   • resize the area A: a bigger window catches more lines.
+*   • change the medium (permittivity εr): a dielectric weakens the field to
+*     E = E₀/εr, so there are fewer lines to thread, and Φ falls. This is the
+*     Gauss-law statement Φ = Q/(ε₀εr) seen as line-counting.
+*
+* Built from stage primitives; the analogy (lines through a hoop) is the point,
+* not a timed simulation. Authorable via props + an optional checked question.
+*/
+const VIEW = {
+	xMin: -6,
+	xMax: 6,
+	yMin: -4,
+	yMax: 4
+};
+const C_THREAD = "var(--stage-good)";
+const C_FAINT = "color-mix(in oklab, var(--stage-accent) 35%, transparent)";
+const C_AREA = "var(--stage-accent-2)";
+const C_NORMAL = "var(--stage-fg)";
+const MEDIA = [
+	{
+		name: "vacuum",
+		er: 1
+	},
+	{
+		name: "glass",
+		er: 5
+	},
+	{
+		name: "water",
+		er: 80
+	}
+];
+const fmt$1 = (n) => Math.abs(n) < .05 ? "0" : n.toFixed(1);
+function ElectricFluxLab({ field = 6, area = 3, angleDeg = 0, title = "Electric flux: how many lines thread the area", prompt = "Rotate the area and resize it. The lines that pass through light up: that count is the flux Φ = E·A·cosθ.", ask, height = 420, activity = "electric-flux" } = {}) {
+	const [E0, setE0] = useState(field);
+	const [A, setA] = useState(area);
+	const [theta, setTheta] = useState(angleDeg * Math.PI / 180);
+	const [er, setEr] = useState(1);
+	const Eeff = E0 / er;
+	const cos = Math.cos(theta);
+	const phi = Eeff * A * cos;
+	const deg = Math.round(theta * 180 / Math.PI);
+	const C = {
+		x: 0,
+		y: 0
+	};
+	const n = {
+		x: Math.cos(theta),
+		y: Math.sin(theta)
+	};
+	const dir = {
+		x: -Math.sin(theta),
+		y: Math.cos(theta)
+	};
+	const p1 = {
+		x: C.x + dir.x * A / 2,
+		y: C.y + dir.y * A / 2
+	};
+	const p2 = {
+		x: C.x - dir.x * A / 2,
+		y: C.y - dir.y * A / 2
+	};
+	const halfSpan = A / 2 * Math.abs(cos);
+	const nLines = Math.max(4, Math.min(40, Math.round(Eeff * 3)));
+	const y0 = VIEW.yMin + .4, y1 = VIEW.yMax - .4;
+	const ys = Array.from({ length: nLines }, (_, i) => y0 + (y1 - y0) * i / Math.max(1, nLines - 1));
+	const threads = ys.filter((y) => Math.abs(y - C.y) <= halfSpan + 1e-6).length;
+	const rotTip = {
+		x: C.x + n.x * 2.2,
+		y: C.y + n.y * 2.2
+	};
+	const figure = /* @__PURE__ */ jsxs(Stage, {
+		view: VIEW,
+		height,
+		ariaLabel: `Uniform field with a flat area at ${deg} degrees; ${threads} field lines thread it`,
+		children: [
+			ys.map((y, i) => {
+				const on = Math.abs(y - C.y) <= halfSpan + 1e-6;
+				return /* @__PURE__ */ jsx(Segment, {
+					from: {
+						x: VIEW.xMin,
+						y
+					},
+					to: {
+						x: VIEW.xMax,
+						y
+					},
+					color: on ? C_THREAD : C_FAINT,
+					weight: on ? 2.4 : 1.4
+				}, i);
+			}),
+			/* @__PURE__ */ jsx(Vector, {
+				tail: {
+					x: 3.6,
+					y: y1 - .2
+				},
+				tip: {
+					x: 4.7,
+					y: y1 - .2
+				},
+				color: "var(--stage-accent)"
+			}),
+			/* @__PURE__ */ jsx(Label, {
+				x: 4.9,
+				y: y1 - .2,
+				text: "E",
+				color: "var(--stage-accent)",
+				size: 13,
+				anchor: "start"
+			}),
+			/* @__PURE__ */ jsx(Segment, {
+				from: p1,
+				to: p2,
+				color: C_AREA,
+				weight: 7
+			}),
+			/* @__PURE__ */ jsx(Label, {
+				x: p1.x,
+				y: p1.y,
+				text: "area A",
+				color: C_AREA,
+				size: 12,
+				weight: 700,
+				dx: 8,
+				dy: -4,
+				anchor: "start"
+			}),
+			/* @__PURE__ */ jsx(Vector, {
+				tail: C,
+				tip: {
+					x: C.x + n.x * 1.5,
+					y: C.y + n.y * 1.5
+				},
+				color: C_NORMAL
+			}),
+			/* @__PURE__ */ jsx(AngleArc, {
+				at: C,
+				from: {
+					x: 1,
+					y: 0
+				},
+				to: n,
+				rPx: 38,
+				label: `θ=${Math.abs(deg)}°`
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: rotTip,
+				onMove: (p) => setTheta(Math.atan2(p.y - C.y, p.x - C.x)),
+				color: "var(--stage-accent)",
+				ariaLabel: "rotate the area",
+				r: 7
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx(Field, {
+				label: "field E₀",
+				value: fmt$1(E0),
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: E0,
+					min: 1,
+					max: 12,
+					step: 1,
+					onChange: setE0,
+					ariaLabel: "field strength"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "area A",
+				value: fmt$1(A),
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: A,
+					min: 1,
+					max: 6,
+					step: .5,
+					onChange: setA,
+					ariaLabel: "area size"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "angle θ",
+				value: `${Math.abs(deg)}°`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: deg,
+					min: -90,
+					max: 90,
+					step: 5,
+					onChange: (v) => setTheta(v * Math.PI / 180),
+					ariaLabel: "angle of the area"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				label: "medium",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "lab-field-row",
+					children: MEDIA.map((m) => /* @__PURE__ */ jsx(Chip, {
+						selected: er === m.er,
+						onClick: () => setEr(m.er),
+						children: m.name
+					}, m.name))
+				})
+			})
+		] }),
+		aside: /* @__PURE__ */ jsx(Callout, {
+			tone: "result",
+			children: /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "grid",
+					gap: 6,
+					fontVariantNumeric: "tabular-nums",
+					fontSize: 13
+				},
+				children: [
+					/* @__PURE__ */ jsxs("span", { children: ["lines threading the area: ", /* @__PURE__ */ jsx("strong", {
+						style: { color: C_THREAD },
+						children: threads
+					})] }),
+					/* @__PURE__ */ jsxs("span", { children: [
+						"E = E₀/εr = ",
+						/* @__PURE__ */ jsx("strong", { children: fmt$1(Eeff) }),
+						" ",
+						er > 1 ? `(÷${er} in ${MEDIA.find((m) => m.er === er)?.name})` : ""
+					] }),
+					/* @__PURE__ */ jsxs("span", { children: ["Φ = E·A·cosθ = ", /* @__PURE__ */ jsx("strong", { children: fmt$1(phi) })] }),
+					/* @__PURE__ */ jsx("span", {
+						style: { color: "var(--stage-muted)" },
+						children: Math.abs(deg) >= 88 ? "edge-on: nothing threads it, Φ = 0" : Math.abs(deg) < 2 ? "face-on: maximum flux, Φ = E·A" : "tilted: Φ falls with cosθ"
+					})
+				]
+			})
+		}),
+		footer: ask ? /* @__PURE__ */ jsx(LabAsk, {
+			ask,
+			activity
+		}) : void 0,
+		children: figure
+	});
+}
+
+//#endregion
+export { ElectricFluxLab };

package/dist/physics/energy-skate/preset.mjs

@@ -10,14 +10,14 @@ import { Label, Polyline, Segment, Stage, useInView } from "@classytic/stage";
 
 //#region src/physics/energy-skate/preset.tsx
 /**
-* EnergySkateLab — "Where did the energy go?", KE ⇄ PE on a ramp, with friction
+* EnergySkateLab, "Where did the energy go?", KE ⇄ PE on a ramp, with friction
 * bleeding the total into heat.
 *
-* A skater is released from a height on a parabolic ramp. Three stacked bars —
-* potential, kinetic, and thermal — ALWAYS sum to the same total: as the skater
+* A skater is released from a height on a parabolic ramp. Three stacked bars , 
+* potential, kinetic, and thermal, ALWAYS sum to the same total: as the skater
 * drops, the PE bar empties into the KE bar and back on the way up. Turn friction
 * on and a THERMAL bar grows each pass, so the skater can never climb as high
-* again — mechanical energy isn't destroyed, it's moved to heat. (The "LOL" energy
+* again, mechanical energy isn't destroyed, it's moved to heat. (The "LOL" energy
 * bar chart, animated.)
 *
 * This complements WorkEnergyLab (work = area under F–x): here the spotlight is
@@ -30,7 +30,7 @@ const X = 6;
 const H = 5;
 const MU = .08;
 const yAt = (x) => H * (x / X) * (x / X);
-function EnergySkateLab({ startHeight = 4, friction = false, mass = 1, title = "Where did the energy go? — KE ⇄ PE (and heat)", prompt = "Release the skater and watch potential energy pour into kinetic and back. The three bars always add to the same total — unless friction is on, then a heat bar grows and the skater can’t climb as high again.", objectives, controlConfig }) {
+function EnergySkateLab({ startHeight = 4, friction = false, mass = 1, title = "Where did the energy go?: KE ⇄ PE (and heat)", prompt = "Release the skater and watch potential energy pour into kinetic and back. The three bars always add to the same total, unless friction is on, then a heat bar grows and the skater can’t climb as high again.", objectives, controlConfig }) {
 	const [h0, setH0] = useState(clamp(startHeight, 1, H));
 	const [fric, setFric] = useState(friction);
 	const [m] = useState(mass);