@classytic/labs 0.1.0 → 0.3.0

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

@@ -0,0 +1,313 @@
+'use client';
+
+import { ActivitySelect, Slider } from "../../kit/controls.mjs";
+import { Field } from "../../kit/frame.mjs";
+import { MechanicsVector, SceneSurface } from "../mechanics/presentation.mjs";
+import { AngleArc } from "../../kit/diagram/annotations.mjs";
+import { FieldActivity } from "../fields/activity.mjs";
+import { LabAsk } from "../../kit/ask.mjs";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Dot, Label, MovableDot, Polygon, Segment, Stage } 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", objectives } = {}) {
+	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 plateHalfWidth = .1;
+	const plate = [
+		{
+			x: p1.x + n.x * plateHalfWidth,
+			y: p1.y + n.y * plateHalfWidth
+		},
+		{
+			x: p1.x - n.x * plateHalfWidth,
+			y: p1.y - n.y * plateHalfWidth
+		},
+		{
+			x: p2.x - n.x * plateHalfWidth,
+			y: p2.y - n.y * plateHalfWidth
+		},
+		{
+			x: p2.x + n.x * plateHalfWidth,
+			y: p2.y + n.y * plateHalfWidth
+		}
+	];
+	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__ */ jsx(SceneSurface, {
+		className: "physics-electric-flux-scene",
+		tone: "grid",
+		children: /* @__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);
+				}),
+				[
+					-2.4,
+					0,
+					2.4
+				].map((y) => /* @__PURE__ */ jsx(MechanicsVector, {
+					tail: {
+						x: 4.05,
+						y
+					},
+					tip: {
+						x: 5.05,
+						y
+					},
+					color: "var(--stage-accent)",
+					label: "E",
+					labelDx: 5
+				}, `field-direction-${y}`)),
+				/* @__PURE__ */ jsx(Polygon, {
+					points: plate,
+					color: C_AREA,
+					fill: C_AREA,
+					fillOpacity: .22,
+					weight: 2.5
+				}),
+				ys.filter((y) => Math.abs(y - C.y) <= halfSpan + 1e-6).map((y) => /* @__PURE__ */ jsx(Dot, {
+					x: -Math.tan(theta) * y,
+					y,
+					r: 2.4,
+					color: C_THREAD
+				}, `crossing-${y}`)),
+				/* @__PURE__ */ jsx(Label, {
+					x: p1.x + n.x * .28,
+					y: p1.y + n.y * .28,
+					text: "A",
+					color: C_AREA,
+					size: 12,
+					weight: 700
+				}),
+				/* @__PURE__ */ jsx(MechanicsVector, {
+					tail: C,
+					tip: {
+						x: C.x + n.x * 1.5,
+						y: C.y + n.y * 1.5
+					},
+					color: C_NORMAL
+				}),
+				Math.abs(deg) > 4 ? /* @__PURE__ */ jsx(AngleArc, {
+					at: C,
+					from: {
+						x: 1,
+						y: 0
+					},
+					to: n,
+					rPx: 46,
+					label: "θ"
+				}) : null,
+				/* @__PURE__ */ jsx(Label, {
+					x: C.x + n.x * 1.72,
+					y: C.y + n.y * 1.72,
+					text: "surface normal",
+					color: C_NORMAL,
+					size: 11,
+					weight: 650,
+					dx: n.x >= 0 ? 7 : -7,
+					anchor: n.x >= 0 ? "start" : "end"
+				}),
+				/* @__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
+				})
+			]
+		})
+	});
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { 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(ActivitySelect, {
+				ariaLabel: "medium",
+				value: MEDIA.find((m) => m.er === er)?.name ?? "",
+				onChange: (name) => setEr(MEDIA.find((m) => m.name === name)?.er ?? 1),
+				options: MEDIA.map((m) => ({
+					value: m.name,
+					label: m.er === 1 ? "Vacuum · εr 1" : `${m.name[0].toUpperCase()}${m.name.slice(1)} · εr ${m.er}`
+				}))
+			})
+		})
+	] });
+	const aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "physics-field-ledger",
+		children: [
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Lines threading area" }), /* @__PURE__ */ jsx("strong", {
+				className: "physics-field-thread-value",
+				children: threads
+			})] }),
+			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: "Effective field · E₀/εr" }), /* @__PURE__ */ jsxs("strong", { children: [fmt$1(Eeff), er > 1 ? ` ÷${er}` : ""] })] }),
+			/* @__PURE__ */ jsxs("div", {
+				"data-highlight": true,
+				children: [/* @__PURE__ */ jsx("span", { children: "Flux · E·A·cosθ" }), /* @__PURE__ */ jsx("strong", { children: fmt$1(phi) })]
+			})
+		]
+	}), /* @__PURE__ */ jsx("p", {
+		className: "physics-explain",
+		children: Math.abs(deg) >= 88 ? "Edge-on: nothing threads the surface, so Φ = 0." : Math.abs(deg) < 2 ? "Face-on: the projected area is largest, so Φ = E·A." : "Tilting reduces projected area by cos θ."
+	})] });
+	const footer = ask ? /* @__PURE__ */ jsx(LabAsk, {
+		ask,
+		activity: typeof activity === "string" ? activity : "electric-flux"
+	}) : void 0;
+	const reset = () => {
+		setE0(field);
+		setA(area);
+		setTheta(angleDeg * Math.PI / 180);
+		setEr(1);
+	};
+	return /* @__PURE__ */ jsx(FieldActivity, {
+		className: "physics-electric-flux",
+		activity,
+		activityId: "electric-flux",
+		title,
+		prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", { children: Math.abs(deg) >= 88 ? "Edge-on" : Math.abs(deg) < 2 ? "Face-on" : "Tilted" }),
+			/* @__PURE__ */ jsxs("span", { children: [threads, " lines"] }),
+			/* @__PURE__ */ jsxs("span", { children: ["Φ ", fmt$1(phi)] }),
+			/* @__PURE__ */ jsxs("span", { children: ["εr ", er] })
+		] }),
+		figure,
+		evidence: aside,
+		controls,
+		observation: Math.abs(deg) >= 88 ? "The area is edge-on to the field, so no field lines cross it and the flux is zero." : Math.abs(deg) < 2 ? "The area faces the field directly, giving the maximum flux E·A." : "Tilting reduces the projected area by cos θ, so fewer field lines cross it.",
+		objectives,
+		onReset: reset,
+		support: footer,
+		transcript: /* @__PURE__ */ jsx("p", { children: `${threads} field lines cross the area at ${Math.abs(deg)} degrees, giving flux ${fmt$1(phi)}.` })
+	});
+}
+
+//#endregion
+export { ElectricFluxLab };

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

@@ -1,3 +1,4 @@
+import { AuthoredActivity } from "../../kit/activity-authoring.mjs";
 import { ControlConfig } from "../../kit/frame.mjs";
 import { ReactNode } from "react";
 
@@ -9,6 +10,7 @@ interface EnergySkateProps {
   title?: string;
   prompt?: string;
   objectives?: string[];
+  activity?: string | AuthoredActivity;
   /** Lock/hide knobs, e.g. `{ hide: ['friction'] }` to pin friction off (or on). */
   controlConfig?: ControlConfig;
 }
@@ -19,7 +21,8 @@ declare function EnergySkateLab({
   title,
   prompt,
   objectives,
-  controlConfig
+  controlConfig,
+  activity
 }: EnergySkateProps): ReactNode;
 //#endregion
 export { EnergySkateLab, EnergySkateProps };

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

@@ -1,23 +1,27 @@
 'use client';
 
 import { clamp } from "../../core/util.mjs";
-import { CheckButton, Chip, Slider } from "../../kit/controls.mjs";
-import { Callout, Control, ControlBar, Field, LabFrame, LiveRegion, MeterBar } from "../../kit/frame.mjs";
+import { Chip, Slider } from "../../kit/controls.mjs";
+import { Control, Field, LiveRegion, MeterBar } from "../../kit/frame.mjs";
+import { MechanicsActivity } from "../mechanics/activity.mjs";
+import { SceneSurface, SimulationTransport } from "../mechanics/presentation.mjs";
 import { useFrameTick, useReducedMotion } from "../../kit/anim.mjs";
+import { energySnapshot, parabolicTrackHeight } from "../mechanics/core.mjs";
+import { SkaterGlyph } from "../mechanics/glyphs.mjs";
 import { useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Label, Polyline, Segment, Stage, useInView } from "@classytic/stage";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Dot, Label, Polygon, 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
@@ -29,8 +33,8 @@ const G = 9.8;
 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 }) {
+const yAt = (x) => parabolicTrackHeight(x, X, H);
+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, activity }) {
 	const [h0, setH0] = useState(clamp(startHeight, 1, H));
 	const [fric, setFric] = useState(friction);
 	const [m] = useState(mass);
@@ -84,29 +88,50 @@ function EnergySkateLab({ startHeight = 4, friction = false, mass = 1, title = "
 	};
 	const x = xRef.current;
 	const y = yAt(x);
-	const pe = m * G * y;
-	const ke = Math.max(0, E0 - pe - qRef.current);
-	const q = qRef.current;
+	const energy = energySnapshot(E0, m, G, y, qRef.current);
+	const pe = energy.potential;
+	const ke = energy.kinetic;
+	const q = energy.thermal;
 	const track = [];
 	for (let i = -6; i <= 6.000000001; i += .25) track.push({
 		x: i,
 		y: yAt(i)
 	});
+	const trackFill = [
+		{
+			x: -6,
+			y: 0
+		},
+		...track,
+		{
+			x: X,
+			y: 0
+		}
+	];
 	const view = {
 		xMin: -7,
 		xMax: 7,
 		yMin: -1,
 		yMax: 6
 	};
-	const figure = /* @__PURE__ */ jsx("div", {
+	const figure = /* @__PURE__ */ jsx(SceneSurface, {
 		ref: viewRef,
-		className: "lab-playwrap",
+		tone: "grid",
+		className: "physics-energy-skate-scene",
 		children: /* @__PURE__ */ jsxs(Stage, {
 			view,
-			height: 240,
+			height: 250,
 			preserveAspect: false,
 			ariaLabel: `Skater on a ramp released from ${h0.toFixed(1)} m${fric ? ", with friction" : ""}`,
 			children: [
+				/* @__PURE__ */ jsx(Polygon, {
+					points: trackFill,
+					fill: "var(--stage-primary)",
+					fillOpacity: .08,
+					color: "var(--stage-primary)",
+					opacity: 0,
+					weight: 0
+				}),
 				/* @__PURE__ */ jsx(Segment, {
 					from: {
 						x: view.xMin,
@@ -134,119 +159,156 @@ function EnergySkateLab({ startHeight = 4, friction = false, mass = 1, title = "
 					weight: 1,
 					dashed: true
 				}),
+				/* @__PURE__ */ jsx(Dot, {
+					x: x0,
+					y: h0,
+					r: 4,
+					color: "var(--stage-primary)"
+				}),
 				/* @__PURE__ */ jsx(Label, {
-					x: view.xMin,
+					x: x0,
 					y: h0,
-					text: `release ${h0.toFixed(1)} m`,
+					text: `${h0.toFixed(1)} m start`,
 					color: "var(--stage-muted)",
 					size: 10,
-					anchor: "start",
-					dy: -3
+					anchor: "middle",
+					dy: -12
 				}),
 				/* @__PURE__ */ jsx(Polyline, {
 					points: track,
-					color: "var(--stage-fg)",
-					weight: 2.5
+					color: "var(--stage-primary)",
+					weight: 4
 				}),
 				/* @__PURE__ */ jsx(Label, {
-					x,
-					y: y + .4,
-					text: "🛹",
-					color: "var(--stage-fg)",
-					size: 30
+					x: 0,
+					y: .35,
+					text: "lowest PE · fastest",
+					color: "var(--stage-muted)",
+					size: 10,
+					anchor: "middle"
+				}),
+				/* @__PURE__ */ jsx(SkaterGlyph, {
+					at: {
+						x,
+						y: y + .18
+					},
+					direction: dirRef.current > 0 ? 1 : -1
 				})
 			]
 		})
 	});
 	const ebar = E0 > 0 ? 1 / E0 : 0;
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		objectives,
-		aside: /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				flexDirection: "column",
-				gap: 8
-			},
+	const aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(MeterBar, {
+			label: "potential PE = mgh",
+			frac: pe * ebar,
+			color: "var(--stage-accent-2)",
+			value: `${pe.toFixed(1)} J`
+		}),
+		/* @__PURE__ */ jsx(MeterBar, {
+			label: "kinetic KE = ½mv²",
+			frac: ke * ebar,
+			color: "var(--stage-good)",
+			value: `${ke.toFixed(1)} J`
+		}),
+		fric && /* @__PURE__ */ jsx(MeterBar, {
+			label: "thermal energy",
+			frac: q * ebar,
+			color: "var(--stage-warn)",
+			value: `${q.toFixed(1)} J`
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "physics-probe",
 			children: [
-				/* @__PURE__ */ jsx(MeterBar, {
-					label: "potential PE = mgh",
-					frac: pe * ebar,
-					color: "var(--stage-accent-2)",
-					value: `${pe.toFixed(1)} J`
-				}),
-				/* @__PURE__ */ jsx(MeterBar, {
-					label: "kinetic KE = ½mv²",
-					frac: ke * ebar,
-					color: "var(--stage-good)",
-					value: `${ke.toFixed(1)} J`
-				}),
-				fric && /* @__PURE__ */ jsx(MeterBar, {
-					label: "thermal (friction) 🔥",
-					frac: q * ebar,
-					color: "var(--stage-warn)",
-					value: `${q.toFixed(1)} J`
+				/* @__PURE__ */ jsx("span", { children: "Energy account" }),
+				/* @__PURE__ */ jsxs("strong", {
+					className: "lab-tabular",
+					children: [
+						"PE + KE",
+						fric ? " + heat" : "",
+						" = ",
+						/* @__PURE__ */ jsxs("strong", { children: [(pe + ke + (fric ? q : 0)).toFixed(1), " J"] })
+					]
 				}),
-				/* @__PURE__ */ jsx(Callout, {
-					tone: "result",
-					children: /* @__PURE__ */ jsxs("span", {
-						style: { fontVariantNumeric: "tabular-nums" },
-						children: [
-							"PE + KE",
-							fric ? " + heat" : "",
-							" = ",
-							/* @__PURE__ */ jsxs("strong", { children: [(pe + ke + (fric ? q : 0)).toFixed(1), " J"] }),
-							" ",
-							"= constant total ",
-							E0.toFixed(1),
-							" J"
-						]
-					})
-				}),
-				/* @__PURE__ */ jsx("p", {
-					style: {
-						fontSize: 12,
-						opacity: .75,
-						margin: 0
-					},
-					children: "Friction off → the skater returns to the same height forever (mechanical energy conserved). Friction on → the heat bar climbs and every peak is lower: energy moved, not lost."
-				}),
-				/* @__PURE__ */ jsx(LiveRegion, { children: `Potential ${pe.toFixed(1)}, kinetic ${ke.toFixed(1)}${fric ? `, heat ${q.toFixed(1)}` : ""} joules; total ${E0.toFixed(1)}.` })
+				/* @__PURE__ */ jsxs("small", { children: [
+					"constant budget ",
+					E0.toFixed(1),
+					" J"
+				] })
 			]
 		}),
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
-			/* @__PURE__ */ jsx(CheckButton, {
-				onClick: release,
-				children: "▶ Release"
-			}),
-			/* @__PURE__ */ jsx(Control, {
-				name: "friction",
-				children: /* @__PURE__ */ jsxs(Chip, {
-					selected: fric,
-					onClick: () => {
-						setFric((c) => !c);
-						setRunning(false);
-						qRef.current = 0;
-					},
-					children: ["friction ", fric ? "on 🔥" : "off"]
-				})
-			}),
-			/* @__PURE__ */ jsx(Field, {
-				label: "start height",
-				value: `${h0.toFixed(1)} m`,
-				children: /* @__PURE__ */ jsx(Slider, {
-					value: h0,
-					min: 1,
-					max: H,
-					step: .5,
-					onChange: onH0,
-					ariaLabel: "release height (m)"
-				})
-			})
+		/* @__PURE__ */ jsx(LiveRegion, { children: `Potential ${pe.toFixed(1)}, kinetic ${ke.toFixed(1)}${fric ? `, heat ${q.toFixed(1)}` : ""} joules; total ${E0.toFixed(1)}.` })
+	] });
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Control, {
+		name: "friction",
+		children: /* @__PURE__ */ jsxs(Chip, {
+			selected: fric,
+			onClick: () => {
+				setFric((c) => !c);
+				setRunning(false);
+				qRef.current = 0;
+			},
+			children: ["friction ", fric ? "on" : "off"]
+		})
+	}), /* @__PURE__ */ jsx(Field, {
+		label: "start height",
+		value: `${h0.toFixed(1)} m`,
+		children: /* @__PURE__ */ jsx(Slider, {
+			value: h0,
+			min: 1,
+			max: H,
+			step: .5,
+			onChange: onH0,
+			ariaLabel: "release height (m)"
+		})
+	})] });
+	const reset = () => {
+		setRunning(false);
+		xRef.current = x0;
+		dirRef.current = 1;
+		qRef.current = 0;
+	};
+	const transport = /* @__PURE__ */ jsx(SimulationTransport, {
+		running,
+		onReset: reset,
+		onToggle: running ? () => setRunning(false) : release,
+		state: running ? "Moving" : "Ready",
+		detail: fric ? "friction on" : "friction off",
+		startLabel: "Release",
+		resetLabel: "Reset skater"
+	});
+	return /* @__PURE__ */ jsx(MechanicsActivity, {
+		activity,
+		className: "physics-energy-skate",
+		title,
+		prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("strong", { children: fric ? "Total energy conserved" : "Mechanical energy conserved" }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				"PE ",
+				pe.toFixed(1),
+				" J"
+			] }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				"KE ",
+				ke.toFixed(1),
+				" J"
+			] }),
+			fric && /* @__PURE__ */ jsxs("span", { children: [
+				"heat ",
+				q.toFixed(1),
+				" J"
+			] })
 		] }),
+		figure,
+		instruments: aside,
+		controls,
+		feedback: fric ? "Mechanical energy becomes thermal energy, but the complete energy account stays constant." : "Potential and kinetic energy trade places while their sum stays constant.",
+		objectives,
+		transport,
 		controlConfig,
-		children: figure
+		canvasLabel: "Skater energy experiment",
+		inspectorLabel: "Energy and experiment controls"
 	});
 }