@classytic/labs 0.3.0 → 0.4.0

package/dist/physics/alternating-current/preset.mjs

@@ -1,79 +1,41 @@
 'use client';
 
 import { Tex } from "../../core/tex.mjs";
-import { ActivitySelect, Segmented, Slider } from "../../kit/controls.mjs";
+import { ActionButton, Segmented, Slider } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
 import { Field, Readout, Stat, StatList } from "../../kit/frame.mjs";
 import { AuthoredActivityRuntime, AuthoredMetricGate } from "../../kit/authored-activity-runtime.mjs";
-import { Figure, HUE, fmt } from "../../kit/figure/figure.mjs";
+import { Figure, HUE, STROKE, figUrl, useFigureId } from "../../kit/figure/figure.mjs";
 import { FigText } from "../../kit/figure/text.mjs";
 import { Ball, Block } from "../../kit/figure/body.mjs";
-import { Arrow, Track } from "../../kit/figure/beam.mjs";
-import { Area, Curve, Guide, Marker, PlotFrame, scale } from "../../kit/figure/plot.mjs";
-import { acPeriodS, acRectifiedTrace, acState, acWaveTrace, meanRectifiedVoltage } from "./core.mjs";
+import { Arrow } from "../../kit/figure/beam.mjs";
+import { Area, Curve, Guide, Marker } from "../../kit/figure/plot.mjs";
+import { AcSourceGlyph } from "../../kit/electronics/basics.mjs";
+import { DiodeGlyph } from "../../kit/electronics/semiconductor.mjs";
+import { Wire as Wire$1 } from "../../kit/electronics/wire.mjs";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { acPeriodS, acRectifiedTrace, acState, acWaveTrace, meanRectifiedVoltage } from "@classytic/stage/physics/ac";
 
 //#region src/physics/alternating-current/preset.tsx
 /**
 * AlternatingCurrentLab, Cambridge A Level Physics 9702 chapter 21 (alternating currents).
 *
-* One circuit, a sinusoidal supply across a resistor, drawn beside one plot with three views:
+* Professional dual-trace oscilloscope and signal analyzer with three dedicated views:
 *
-*   waveform       v = V0 sin(2 pi f t) and i = v / R, the period T = 1/f and both peaks
-*   r.m.s.         v faint, v squared, the MEASURED mean of v squared, and V_rms = root of it
-*   rectification  one diode or a bridge, then a capacitor that turns ripple into a steady line
+*   waveform       Sinusoidal voltage v(t) = V0 sin(2π f t) and in-phase current i(t) = v/R,
+*                  marking period T = 1/f and peak values V0 and I0 with oscilloscope cursors.
+*   r.m.s.         The heart of the Cambridge 9702 syllabus: Upper trace shows v(t) swinging ±V0
+*                  with mean = 0, while lower trace shows instantaneous power / squared wave v²(t).
+*                  The mean of v² sits exactly at V0²/2. Taking the square root gives V_rms = V0/√2,
+*                  the exact steady d.c. voltage that delivers the same mean heating power.
+*   rectification  Bench schematic with diode(s) and smoothing capacitor above a clean DC output trace.
+*                  Shows ripple reduction as the time constant τ = RC increases.
 *
-* The middle view is the point of the lab. Learners are handed V_rms = V0 / sqrt(2) as a fact and
-* usually guess it is an average of the wave. It is not: the mean of v over a cycle is zero. The
-* plot squares the wave first, so every value is positive, draws the mean of that square (a real
-* number added up by `meanSquareByIntegration`, not the formula), then takes the root. The result
-* is the steady d.c. voltage that would heat the same resistor at the same rate, and the readout
-* says so in watts.
-*
-* All the physics lives in `core.ts`, outside React and free of clocks and random numbers, so the
-* server and the browser draw identical paths.
+* All physics calculations live in `core.ts` outside React and free of side effects.
 */
-const W = 720;
-const H = 400;
-/** Two stacked plots share one time axis: ticks and the axis label sit on the lower one. */
-const PLOT_TOP = {
-	x: 322,
-	y: 62,
-	w: 376,
-	h: 118
-};
-const PLOT_BOT = {
-	x: 322,
-	y: 240,
-	w: 376,
-	h: 114
-};
-/** The single tall plot the rectification view uses. */
-const PLOT_ONE = {
-	x: 322,
-	y: 66,
-	w: 376,
-	h: 268
-};
-const LOOP = {
-	left: 70,
-	right: 252,
-	top: 118,
-	bottom: 298
-};
-const SRC = {
-	cx: 70,
-	cy: 208,
-	r: 24
-};
-const RES = {
-	x: 236,
-	y: 176,
-	w: 32,
-	h: 64
-};
-const RECT_X = 150;
-const CAP_X = 206;
+const W = 540;
+const H = 270;
 const V0_MIN = 5;
 const V0_MAX = 400;
 const F_MIN = 5;
@@ -81,72 +43,34 @@ const F_MAX = 200;
 const R_MIN = 10;
 const R_MAX = 500;
 const C_MAX_UF = 5e3;
-/**
-* Four significant figures, without trailing zeros. Four rather than three because the numbers
-* this lab is judged on are read directly: 229.8 V, not 230 V, and 1056 W, not 1060 W.
-*/
+/** Four significant figures, without trailing zeros. */
 const num = (value, digits = 4) => Number(value.toPrecision(digits)).toString();
-/**
-* A large V² value, grouped in threes so 52813 reads as 52 813.
-*
-* The value is settled to ten significant figures first. The measured mean square arrives from
-* Simpson's rule as 52812.499999999985 while the algebra gives exactly 52812.5, and rounding
-* those two straight to an integer would print 52 812 beside 52 813 in the same panel. The lab's
-* whole claim is that they are the SAME number, so the last few float bits must not show.
-*/
+/** A large V² value, grouped in threes so 52813 reads as 52 813. */
 const grouped = (value) => {
 	const settled = Number(value.toPrecision(10));
 	const rounded = Math.abs(settled) >= 100 ? Math.round(settled) : Number(settled.toFixed(1));
 	return String(rounded).replace(/\B(?=(\d{3})+(?!\d))/g, " ");
 };
-/** An axis tick with a real minus sign rather than a hyphen. */
-const tick = (value, digits = 1) => value < 0 ? `−${fmt(-value, digits)}` : fmt(value, digits);
 function Wire({ x1, y1, x2, y2 }) {
-	return /* @__PURE__ */ jsx(Curve, {
-		points: [[x1, y1], [x2, y2]],
-		color: HUE.metal,
-		weight: "edge"
-	});
+	return /* @__PURE__ */ jsx(Wire$1, { points: [[x1, y1], [x2, y2]] });
 }
-/** The a.c. source symbol: a ring with one cycle of a sine drawn inside it. */
+/** The a.c. source symbol, at the vocabulary's standard body size. */
 function AcSource({ cx, cy, r }) {
-	const ring = `M ${cx - r} ${cy} A ${r} ${r} 0 1 0 ${cx + r} ${cy} A ${r} ${r} 0 1 0 ${cx - r} ${cy}`;
-	const wave = Array.from({ length: 33 }, (_, k) => {
-		const u = k / 32;
-		return [cx - r * .62 + u * r * 1.24, cy - Math.sin(u * 2 * Math.PI) * r * .4];
+	return /* @__PURE__ */ jsx(AcSourceGlyph, {
+		cx,
+		cy,
+		half: r
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Track, {
-		d: ring,
-		color: HUE.ink,
-		weight: "edge",
-		dashed: false
-	}), /* @__PURE__ */ jsx(Curve, {
-		points: wave,
-		color: HUE[1],
-		weight: "line"
-	})] });
 }
-/**
-* A diode: the filled triangle points the way conventional current may pass, and the bar is the
-* wall it cannot pass backwards through. The triangle is an `Area` closed onto its own base, so
-* the schematic still uses nothing but figure-kit primitives.
-*/
+/** Diode symbol with forward triangle and blocking bar. */
 function Diode({ x, y, w, h }) {
-	const half = h / 2;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Area, {
-		points: [
-			[x, y - half],
-			[x + w, y],
-			[x, y + half]
-		],
-		baseY: y + half,
-		color: HUE[1],
-		opacity: 100
-	}), /* @__PURE__ */ jsx(Curve, {
-		points: [[x + w, y - half], [x + w, y + half]],
-		color: HUE[1],
-		weight: "edge"
-	})] });
+	return /* @__PURE__ */ jsx(DiodeGlyph, {
+		cx: x + w / 2,
+		cy: y,
+		half: Math.max(w, 22),
+		conducting: true,
+		live: true
+	});
 }
 const AC_ACTIVITY = {
 	pattern: "investigation",
@@ -286,15 +210,14 @@ const AC_ACTIVITY = {
 		}
 	]
 };
-function AlternatingCurrentLab({ peakVoltageV: peak0 = 325, frequencyHz: freq0 = 50, resistanceOhm: res0 = 50, capacitanceUf: cap0 = 1e3, rectifier: rectifier0 = "full", view: view0 = "waveform", title = "Alternating current: peak, r.m.s. and rectifying", prompt = "A sinusoidal supply drives a resistor. The wave swings between +V0 and -V0, so its mean is zero, yet the resistor still gets hot. The r.m.s. view shows which value does the heating.", objectives, activity = "alternating-current" } = {}) {
-	const activityId = typeof activity === "string" ? activity : "alternating-current";
-	const authoredActivity = typeof activity === "string" ? AC_ACTIVITY : activity;
+function AlternatingCurrentLab({ peakVoltageV: peak0 = 325, frequencyHz: freq0 = 50, resistanceOhm: res0 = 50, capacitanceUf: cap0 = 1e3, rectifier: rectifier0 = "full", view: view0 = "waveform", title = "Alternating current: peak, r.m.s. and rectifying", prompt = "A sinusoidal supply drives a resistor. The wave swings between +V0 and -V0, so its mean is zero, yet the resistor still gets hot. The r.m.s. view shows which value does the heating.", objectives, activity, initialStepId } = {}) {
 	const [peakVoltage, setPeakVoltage] = useState(peak0);
 	const [frequency, setFrequency] = useState(freq0);
 	const [resistance, setResistance] = useState(res0);
 	const [capacitanceUf, setCapacitanceUf] = useState(cap0);
 	const [rectifier, setRectifier] = useState(rectifier0);
 	const [view, setView] = useState(view0);
+	const [drawerOpen, setDrawerOpen] = useState(false);
 	const supply = {
 		peakVoltageV: peakVoltage,
 		frequencyHz: frequency,
@@ -303,190 +226,517 @@ function AlternatingCurrentLab({ peakVoltageV: peak0 = 325, frequencyHz: freq0 =
 	const state = acState(supply);
 	const periodMs = acPeriodS(frequency) * 1e3;
 	const spanMs = 2 * periodMs;
-	const wave = acWaveTrace(supply, 2, 160);
-	const timeTicks = [
-		0,
-		.5,
-		1,
-		1.5,
-		2
-	].map((k) => k * periodMs);
-	const scTop = scale(PLOT_TOP, [0, spanMs], [-1.15 * peakVoltage, 1.15 * peakVoltage]);
-	const vPoints = wave.map((p) => [scTop.x(p.t * 1e3), scTop.y(p.v)]);
 	const peakCurrent = state.peakCurrentA;
-	const scCurrent = scale(PLOT_BOT, [0, spanMs], [-1.15 * peakCurrent, 1.15 * peakCurrent]);
-	const iPoints = wave.map((p) => [scCurrent.x(p.t * 1e3), scCurrent.y(p.i)]);
+	const wave = acWaveTrace(supply, 2, 160);
+	const scW_x = (tMs) => 38 + tMs / spanMs * 464;
+	const scW_yV = (v) => 134 - v / (1.25 * peakVoltage) * 74;
+	const scW_yI = (i) => 134 - i / (1.25 * peakCurrent) * 46;
+	const vPoints = wave.map((p) => [scW_x(p.t * 1e3), scW_yV(p.v)]);
+	const iPoints = wave.map((p) => [scW_x(p.t * 1e3), scW_yI(p.i)]);
+	const figId = useFigureId();
 	const squareMax = peakVoltage * peakVoltage;
-	const scSquare = scale(PLOT_BOT, [0, spanMs], [0, 1.15 * squareMax]);
-	const squarePoints = wave.map((p) => [scSquare.x(p.t * 1e3), scSquare.y(p.v * p.v)]);
-	const meanSquareY = scSquare.y(state.meanSquareVoltageV2);
+	const scRms_yV = (v) => 66 - v / (1.25 * peakVoltage) * 38;
+	const scRms_ySq = (sq) => 240 - sq / (1.18 * squareMax) * 74;
+	const vPointsRms = wave.map((p) => [scW_x(p.t * 1e3), scRms_yV(p.v)]);
+	const squarePoints = wave.map((p) => [scW_x(p.t * 1e3), scRms_ySq(p.v * p.v)]);
+	const meanSquareY = scRms_ySq(state.meanSquareVoltageV2);
+	const squareTopY = scRms_ySq(squareMax);
+	const rmsY = scRms_yV(state.rmsVoltageV);
+	const rmsYNeg = scRms_yV(-state.rmsVoltageV);
+	const capacitanceF = capacitanceUf / 1e6;
 	const rectified = acRectifiedTrace({
 		supply,
-		capacitanceF: capacitanceUf / 1e6,
+		capacitanceF,
 		rectifier,
 		cycles: 2,
 		samplesPerCycle: 180
 	});
-	const scRect = scale(PLOT_ONE, [0, spanMs], [-1.12 * peakVoltage, 1.16 * peakVoltage]);
-	const inputPoints = rectified.points.map((p) => [scRect.x(p.t * 1e3), scRect.y(p.input)]);
-	const rectifiedPoints = rectified.points.map((p) => [scRect.x(p.t * 1e3), scRect.y(p.rectified)]);
-	const outputPoints = rectified.points.map((p) => [scRect.x(p.t * 1e3), scRect.y(p.output)]);
 	const smoothing = capacitanceUf > 0;
 	const barePeak = meanRectifiedVoltage(peakVoltage, rectifier);
+	const scRect_y = (v) => 236 - v / (1.22 * peakVoltage) * 126;
+	const rectInputPoints = rectified.points.map((p) => [scW_x(p.t * 1e3), scRect_y(p.input)]);
+	const rectBasePoints = rectified.points.map((p) => [scW_x(p.t * 1e3), scRect_y(p.rectified)]);
+	const rectOutputPoints = rectified.points.map((p) => [scW_x(p.t * 1e3), scRect_y(p.output)]);
 	const rippleReadable = rectified.rippleV > .04 * peakVoltage;
-	const rippleX = scRect.x(1.25 * periodMs);
+	const rippleX = scW_x(.75 * periodMs);
 	const isRect = view === "rectification";
 	const label = view === "waveform" ? `A supply of peak ${num(peakVoltage)} volts at ${num(frequency)} hertz across ${num(resistance)} ohms. Voltage and current are plotted against time; the period is ${num(periodMs)} milliseconds and the peak current is ${num(peakCurrent)} amperes.` : view === "rms" ? `The same supply, with the voltage above and the square of the voltage below. The mean of the square is ${grouped(state.meanSquareVoltageV2)} volts squared, and its square root, ${num(state.rmsVoltageV)} volts, is drawn on the voltage graph as the r.m.s. value.` : `The same supply through ${rectifier === "half" ? "one diode" : "a bridge of four diodes"} with ${smoothing ? `a ${num(capacitanceUf)} microfarad smoothing capacitor` : "no smoothing capacitor"}. The mean output is ${num(rectified.meanV)} volts with a ripple of ${num(rectified.rippleV)} volts.`;
-	const circuit = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+	const waveformVisual = /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: "18",
+			y: "10",
+			width: "504",
+			height: "250",
+			rx: "8",
+			fill: "var(--fig-surface)",
+			stroke: "var(--fig-card-border)",
+			strokeWidth: "1.5"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "28",
+			y: "38",
+			width: "484",
+			height: "192",
+			rx: "6",
+			fill: "color-mix(in oklab, var(--fig-surface) 88%, black)",
+			stroke: "var(--fig-axis)",
+			strokeWidth: "1"
+		}),
+		/* @__PURE__ */ jsxs(FigText, {
+			x: 36,
+			y: 26,
+			size: "note",
+			tone: "hue-1",
+			children: [
+				"CH1 [V]: ",
+				num(peakVoltage / 3, 2),
+				" V/div"
+			]
+		}),
+		/* @__PURE__ */ jsxs(FigText, {
+			x: 270,
+			y: 26,
+			anchor: "middle",
+			size: "note",
+			tone: "soft",
+			children: [
+				"TIME: ",
+				num(periodMs / 4, 2),
+				" ms/div · f = ",
+				num(frequency),
+				" Hz"
+			]
+		}),
+		/* @__PURE__ */ jsxs(FigText, {
+			x: 504,
+			y: 26,
+			anchor: "end",
+			size: "note",
+			tone: "hue-2",
+			children: [
+				"CH2 [I]: ",
+				num(peakCurrent / 3, 2),
+				" A/div"
+			]
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: 28,
+			y1: 134,
+			x2: 512,
+			y2: 134,
+			stroke: "var(--fig-axis)",
+			strokeWidth: "1",
+			strokeDasharray: "3 3",
+			opacity: .6
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: 270,
+			y1: 38,
+			x2: 270,
+			y2: 230,
+			stroke: "var(--fig-axis)",
+			strokeWidth: "1",
+			strokeDasharray: "3 3",
+			opacity: .6
+		}),
+		/* @__PURE__ */ jsx(Curve, {
+			points: vPoints,
+			color: HUE[1],
+			weight: "line"
+		}),
+		/* @__PURE__ */ jsx(Curve, {
+			points: iPoints,
+			color: HUE[2],
+			weight: "line"
+		}),
+		/* @__PURE__ */ jsx(Marker, {
+			x: scW_x(.25 * periodMs),
+			y: scW_yV(peakVoltage),
+			r: 4,
+			color: HUE[1],
+			label: `V₀ = ${num(peakVoltage)} V`
+		}),
+		/* @__PURE__ */ jsx(Marker, {
+			x: scW_x(1.25 * periodMs),
+			y: scW_yI(peakCurrent),
+			r: 4,
+			color: HUE[2],
+			label: `I₀ = ${num(peakCurrent)} A`
+		}),
+		/* @__PURE__ */ jsx(Arrow, {
+			x1: scW_x(0),
+			y1: 216,
+			x2: scW_x(periodMs),
+			y2: 216,
+			color: HUE.hot,
+			weight: "line",
+			head: 5,
+			double: true,
+			label: `Period T = ${num(periodMs)} ms`
+		}),
+		/* @__PURE__ */ jsxs(FigText, {
+			x: 270,
+			y: 248,
+			anchor: "middle",
+			size: "note",
+			tone: "soft",
+			children: [
+				"Pure Resistive Load R = ",
+				num(resistance),
+				" Ω · Current and Voltage are in phase (φ = 0°)"
+			]
+		})
+	] });
+	const rmsVisual = /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: "18",
+			y: "8",
+			width: "504",
+			height: "254",
+			rx: "8",
+			fill: "var(--fig-surface)",
+			stroke: "var(--fig-card-border)",
+			strokeWidth: "1.5"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "28",
+			y: "16",
+			width: "484",
+			height: "100",
+			rx: "6",
+			fill: "color-mix(in oklab, var(--fig-surface) 88%, black)",
+			stroke: "var(--fig-axis)",
+			strokeWidth: "1"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: 28,
+			y1: 66,
+			x2: 512,
+			y2: 66,
+			stroke: "var(--fig-axis)",
+			strokeWidth: "1",
+			strokeDasharray: "4 4",
+			opacity: .6
+		}),
+		/* @__PURE__ */ jsx(Curve, {
+			points: vPointsRms,
+			color: HUE[1],
+			opacity: .45,
+			weight: "line"
+		}),
+		/* @__PURE__ */ jsx(Guide, {
+			x1: 28,
+			y1: rmsY,
+			x2: 506,
+			y2: rmsY,
+			color: HUE.hot,
+			label: "+V_rms",
+			labelAnchor: "end"
+		}),
+		/* @__PURE__ */ jsx(Guide, {
+			x1: 28,
+			y1: rmsYNeg,
+			x2: 506,
+			y2: rmsYNeg,
+			color: HUE.hot
+		}),
 		/* @__PURE__ */ jsx(FigText, {
-			x: 24,
-			y: 40,
-			size: "title",
-			children: "a.c. supply across R"
+			x: 36,
+			y: 30,
+			size: "note",
+			tone: "soft",
+			children: "v(t), mean zero"
 		}),
-		/* @__PURE__ */ jsx(Wire, {
-			x1: LOOP.left,
-			y1: LOOP.top,
-			x2: LOOP.left,
-			y2: SRC.cy - SRC.r
+		/* @__PURE__ */ jsx("rect", {
+			x: "28",
+			y: "148",
+			width: "484",
+			height: "104",
+			rx: "6",
+			fill: "color-mix(in oklab, var(--fig-surface) 88%, black)",
+			stroke: "var(--fig-axis)",
+			strokeWidth: "1"
 		}),
-		/* @__PURE__ */ jsx(Wire, {
-			x1: LOOP.left,
-			y1: SRC.cy + SRC.r,
-			x2: LOOP.left,
-			y2: LOOP.bottom
+		/* @__PURE__ */ jsx(Guide, {
+			x1: 28,
+			y1: squareTopY,
+			x2: 506,
+			y2: squareTopY,
+			color: HUE.soft
 		}),
-		/* @__PURE__ */ jsx(Wire, {
-			x1: LOOP.left,
-			y1: LOOP.bottom,
-			x2: LOOP.right,
-			y2: LOOP.bottom
+		/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsx("clipPath", {
+			id: `${figId}-sq-above`,
+			children: /* @__PURE__ */ jsx("rect", {
+				x: 28,
+				y: 148,
+				width: 484,
+				height: Math.max(0, meanSquareY - 148)
+			})
+		}), /* @__PURE__ */ jsx("clipPath", {
+			id: `${figId}-sq-below`,
+			children: /* @__PURE__ */ jsx("rect", {
+				x: 28,
+				y: meanSquareY,
+				width: 484,
+				height: Math.max(0, 240 - meanSquareY)
+			})
+		})] }),
+		/* @__PURE__ */ jsx("g", {
+			clipPath: figUrl(figId, "sq-above"),
+			children: /* @__PURE__ */ jsx(Area, {
+				points: squarePoints,
+				baseY: meanSquareY,
+				color: HUE.hot,
+				opacity: 30
+			})
+		}),
+		/* @__PURE__ */ jsx("g", {
+			clipPath: figUrl(figId, "sq-below"),
+			children: /* @__PURE__ */ jsx(Area, {
+				points: squarePoints,
+				baseY: meanSquareY,
+				color: HUE.cold,
+				opacity: 34
+			})
+		}),
+		/* @__PURE__ */ jsx(Curve, {
+			points: squarePoints,
+			color: HUE[2],
+			weight: "line"
+		}),
+		/* @__PURE__ */ jsx(Guide, {
+			x1: 28,
+			y1: meanSquareY,
+			x2: 506,
+			y2: meanSquareY,
+			color: HUE.hot
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: 34,
+			y: squareTopY - 4,
+			size: "note",
+			tone: "soft",
+			children: "V₀²"
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: 34,
+			y: meanSquareY - 4,
+			size: "note",
+			tone: "hot",
+			children: "V₀²/2"
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: 34,
+			y: 236,
+			size: "note",
+			tone: "soft",
+			children: "0"
+		}),
+		[
+			0,
+			1,
+			2
+		].map((n) => /* @__PURE__ */ jsx(Guide, {
+			x1: scW_x(n * periodMs),
+			y1: 240,
+			x2: scW_x(n * periodMs),
+			y2: 244,
+			color: HUE.soft
+		}, n)),
+		/* @__PURE__ */ jsx(FigText, {
+			x: scW_x(periodMs),
+			y: 262,
+			anchor: "middle",
+			size: "note",
+			tone: "soft",
+			children: "the red humps above V₀²/2 exactly fill the blue dips below it"
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: 506,
+			y: 159,
+			anchor: "end",
+			size: "note",
+			tone: "soft",
+			children: "v² never goes negative, so it heats on both halves"
+		})
+	] });
+	const rectificationVisual = /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: "18",
+			y: "10",
+			width: "504",
+			height: "70",
+			rx: "6",
+			fill: "var(--fig-surface)",
+			stroke: "var(--fig-axis)",
+			strokeWidth: "1"
+		}),
+		/* @__PURE__ */ jsx(AcSource, {
+			cx: 52,
+			cy: 45,
+			r: 13
+		}),
+		/* @__PURE__ */ jsxs(FigText, {
+			x: 52,
+			y: 24,
+			anchor: "middle",
+			size: "note",
+			tone: "soft",
+			children: [
+				"V₀ = ",
+				num(peakVoltage),
+				" V"
+			]
 		}),
 		/* @__PURE__ */ jsx(Wire, {
-			x1: LOOP.right,
-			y1: LOOP.bottom,
-			x2: LOOP.right,
-			y2: RES.y + RES.h
+			x1: 65,
+			y1: 33,
+			x2: rectifier === "half" ? 140 : 130,
+			y2: 33
 		}),
 		/* @__PURE__ */ jsx(Wire, {
-			x1: LOOP.right,
-			y1: RES.y,
-			x2: LOOP.right,
-			y2: LOOP.top
+			x1: 65,
+			y1: 57,
+			x2: rectifier === "half" ? 260 : 130,
+			y2: 57
 		}),
-		isRect ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx(Wire, {
-				x1: LOOP.left,
-				y1: LOOP.top,
-				x2: rectifier === "half" ? RECT_X - 16 : RECT_X - 32,
-				y2: LOOP.top
-			}),
-			/* @__PURE__ */ jsx(Wire, {
-				x1: rectifier === "half" ? 166 : 182,
-				y1: LOOP.top,
-				x2: LOOP.right,
-				y2: LOOP.top
-			}),
-			rectifier === "half" ? /* @__PURE__ */ jsx(Diode, {
-				x: RECT_X - 16,
-				y: LOOP.top,
-				w: 32,
-				h: 26
-			}) : /* @__PURE__ */ jsx(Block, {
-				x: RECT_X - 32,
-				y: LOOP.top - 13,
-				w: 64,
-				h: 26,
-				color: HUE[1],
-				label: "bridge",
-				radius: 4
+		rectifier === "half" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Diode, {
+				x: 140,
+				y: 33,
+				w: 24,
+				h: 18
 			}),
 			/* @__PURE__ */ jsx(FigText, {
-				x: RECT_X,
-				y: LOOP.top - 22,
+				x: 152,
+				y: 20,
 				anchor: "middle",
 				size: "note",
 				tone: "soft",
-				children: rectifier === "half" ? "one diode" : "4 diodes"
+				children: "1 diode"
+			}),
+			/* @__PURE__ */ jsx(Wire, {
+				x1: 164,
+				y1: 33,
+				x2: 260,
+				y2: 33
 			})
-		] }) : /* @__PURE__ */ jsx(Wire, {
-			x1: LOOP.left,
-			y1: LOOP.top,
-			x2: LOOP.right,
-			y2: LOOP.top
-		}),
-		isRect && smoothing && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Block, {
+				x: 126,
+				y: 22,
+				w: 62,
+				h: 44,
+				color: HUE[1],
+				label: "Bridge (4×)",
+				radius: 4
+			}),
+			/* @__PURE__ */ jsx(Wire, {
+				x1: 188,
+				y1: 33,
+				x2: 260,
+				y2: 33
+			}),
+			/* @__PURE__ */ jsx(Wire, {
+				x1: 188,
+				y1: 57,
+				x2: 260,
+				y2: 57
+			})
+		] }),
+		smoothing ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx(Wire, {
-				x1: CAP_X,
-				y1: LOOP.top,
-				x2: CAP_X,
-				y2: 192
+				x1: 260,
+				y1: 33,
+				x2: 260,
+				y2: 41
 			}),
 			/* @__PURE__ */ jsx(Curve, {
-				points: [[CAP_X - 16, 192], [222, 192]],
+				points: [[252, 41], [268, 41]],
 				color: HUE[2],
 				weight: "edge"
 			}),
 			/* @__PURE__ */ jsx(Curve, {
-				points: [[CAP_X - 16, 202], [222, 202]],
+				points: [[252, 49], [268, 49]],
 				color: HUE[2],
 				weight: "edge"
 			}),
 			/* @__PURE__ */ jsx(Wire, {
-				x1: CAP_X,
-				y1: 202,
-				x2: CAP_X,
-				y2: LOOP.bottom
+				x1: 260,
+				y1: 49,
+				x2: 260,
+				y2: 57
 			}),
 			/* @__PURE__ */ jsx(Ball, {
-				cx: CAP_X,
-				cy: LOOP.top,
-				r: 3.5,
+				cx: 260,
+				cy: 33,
+				r: 2.5,
 				color: HUE.metal
 			}),
 			/* @__PURE__ */ jsx(Ball, {
-				cx: CAP_X,
-				cy: LOOP.bottom,
-				r: 3.5,
+				cx: 260,
+				cy: 57,
+				r: 2.5,
 				color: HUE.metal
 			}),
-			/* @__PURE__ */ jsx(FigText, {
-				x: CAP_X - 20,
-				y: 201,
-				anchor: "end",
-				baseline: "middle",
+			/* @__PURE__ */ jsxs(FigText, {
+				x: 260,
+				y: 20,
+				anchor: "middle",
 				size: "note",
 				tone: "hue-2",
-				children: "C"
+				children: [
+					"C = ",
+					num(capacitanceUf),
+					" µF"
+				]
 			})
-		] }),
-		/* @__PURE__ */ jsx(AcSource, {
-			cx: SRC.cx,
-			cy: SRC.cy,
-			r: SRC.r
-		}),
-		/* @__PURE__ */ jsxs(FigText, {
-			x: SRC.cx,
-			y: 258,
+		] }) : /* @__PURE__ */ jsx(FigText, {
+			x: 260,
+			y: 45,
 			anchor: "middle",
 			size: "note",
 			tone: "soft",
-			children: [
-				"V₀ = ",
-				num(peakVoltage),
-				" V"
-			]
+			children: "no capacitor"
+		}),
+		/* @__PURE__ */ jsx(Wire, {
+			x1: 260,
+			y1: 33,
+			x2: 410,
+			y2: 33
+		}),
+		/* @__PURE__ */ jsx(Wire, {
+			x1: 260,
+			y1: 57,
+			x2: 410,
+			y2: 57
+		}),
+		/* @__PURE__ */ jsx(Wire, {
+			x1: 410,
+			y1: 33,
+			x2: 410,
+			y2: 37
 		}),
 		/* @__PURE__ */ jsx(Block, {
-			...RES,
+			x: 402,
+			y: 37,
+			w: 16,
+			h: 20,
 			color: HUE[3],
 			label: "R",
-			radius: 4
+			radius: 2
+		}),
+		/* @__PURE__ */ jsx(Wire, {
+			x1: 410,
+			y1: 57,
+			x2: 410,
+			y2: 57
 		}),
 		/* @__PURE__ */ jsxs(FigText, {
-			x: RES.x + RES.w,
-			y: 258,
-			anchor: "end",
+			x: 430,
+			y: 45,
+			anchor: "start",
+			baseline: "middle",
 			size: "note",
 			tone: "soft",
 			children: [
@@ -496,276 +746,88 @@ function AlternatingCurrentLab({ peakVoltageV: peak0 = 325, frequencyHz: freq0 =
 			]
 		}),
 		/* @__PURE__ */ jsx(Arrow, {
-			x1: LOOP.left + 30,
-			y1: LOOP.bottom,
-			x2: isRect ? CAP_X - 30 : LOOP.right - 30,
-			y2: LOOP.bottom,
-			color: isRect ? HUE[2] : HUE.hot,
+			x1: 305,
+			y1: 57,
+			x2: 365,
+			y2: 57,
+			color: HUE.hot,
 			weight: "line",
-			head: 6,
-			double: !isRect,
-			label: isRect ? "one way only" : "i reverses"
-		})
-	] });
-	const waveformPlots = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(PlotFrame, {
-		...PLOT_TOP,
-		arrows: false,
-		title: "voltage against time",
-		yLabel: "v (V)",
-		yTicks: [
-			-peakVoltage,
-			0,
-			peakVoltage
-		].map((v) => ({
-			at: scTop.y(v),
-			label: tick(v, 0)
-		})),
-		children: [
-			/* @__PURE__ */ jsx(Guide, {
-				x1: PLOT_TOP.x,
-				y1: scTop.y(0),
-				x2: PLOT_TOP.x + PLOT_TOP.w,
-				y2: scTop.y(0),
-				color: HUE.soft
-			}),
-			/* @__PURE__ */ jsx(Curve, {
-				points: vPoints,
-				color: HUE[1]
-			}),
-			/* @__PURE__ */ jsx(Marker, {
-				x: scTop.x(periodMs / 4),
-				y: scTop.y(peakVoltage),
-				r: 4.5,
-				color: HUE[1],
-				label: `V₀ = ${num(peakVoltage)} V`
-			}),
-			/* @__PURE__ */ jsx(Arrow, {
-				x1: scTop.x(0),
-				y1: PLOT_TOP.y + PLOT_TOP.h - 5,
-				x2: scTop.x(periodMs),
-				y2: PLOT_TOP.y + PLOT_TOP.h - 5,
-				color: HUE.hot,
-				weight: "line",
-				head: 6,
-				double: true,
-				label: `T = ${num(periodMs)} ms`,
-				labelSide: "right"
-			})
-		]
-	}), /* @__PURE__ */ jsxs(PlotFrame, {
-		...PLOT_BOT,
-		arrows: false,
-		title: "current against time",
-		xLabel: "time (ms)",
-		yLabel: "i (A)",
-		xTicks: timeTicks.map((v) => ({
-			at: scCurrent.x(v),
-			label: fmt(v, 1)
-		})),
-		yTicks: [
-			-peakCurrent,
-			0,
-			peakCurrent
-		].map((v) => ({
-			at: scCurrent.y(v),
-			label: tick(v, 2)
-		})),
-		children: [
-			/* @__PURE__ */ jsx(Guide, {
-				x1: PLOT_BOT.x,
-				y1: scCurrent.y(0),
-				x2: PLOT_BOT.x + PLOT_BOT.w,
-				y2: scCurrent.y(0),
-				color: HUE.soft
-			}),
-			/* @__PURE__ */ jsx(Curve, {
-				points: iPoints,
-				color: HUE[2]
-			}),
-			/* @__PURE__ */ jsx(Marker, {
-				x: scCurrent.x(periodMs / 4),
-				y: scCurrent.y(peakCurrent),
-				r: 4.5,
-				color: HUE[2],
-				label: `I₀ = ${num(peakCurrent)} A`
-			})
-		]
-	})] });
-	const rmsPlots = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsxs(PlotFrame, {
-			...PLOT_TOP,
-			arrows: false,
-			title: "the wave, and the level that heats the same",
-			yLabel: "v (V)",
-			yTicks: [
-				-peakVoltage,
-				0,
-				peakVoltage
-			].map((v) => ({
-				at: scTop.y(v),
-				label: tick(v, 0)
-			})),
-			children: [
-				/* @__PURE__ */ jsx(Guide, {
-					x1: PLOT_TOP.x,
-					y1: scTop.y(0),
-					x2: PLOT_TOP.x + PLOT_TOP.w,
-					y2: scTop.y(0),
-					color: HUE.soft
-				}),
-				/* @__PURE__ */ jsx(Curve, {
-					points: vPoints,
-					color: HUE[1],
-					opacity: .4
-				}),
-				/* @__PURE__ */ jsx(Guide, {
-					x1: PLOT_TOP.x,
-					y1: scTop.y(state.rmsVoltageV),
-					x2: PLOT_TOP.x + PLOT_TOP.w,
-					y2: scTop.y(state.rmsVoltageV),
-					color: HUE.hot,
-					label: `V_rms = ${num(state.rmsVoltageV)} V`,
-					labelAnchor: "end"
-				}),
-				/* @__PURE__ */ jsx(Guide, {
-					x1: PLOT_TOP.x,
-					y1: scTop.y(-state.rmsVoltageV),
-					x2: PLOT_TOP.x + PLOT_TOP.w,
-					y2: scTop.y(-state.rmsVoltageV),
-					color: HUE.hot
-				}),
-				/* @__PURE__ */ jsx(FigText, {
-					x: PLOT_TOP.x + 8,
-					y: scTop.y(0) - 7,
-					size: "note",
-					tone: "soft",
-					children: "the mean of v is zero"
-				})
-			]
+			head: 4,
+			label: "one way"
 		}),
-		/* @__PURE__ */ jsxs(FigText, {
-			x: PLOT_BOT.x,
-			y: 206,
-			size: "label",
-			tone: "hot",
-			children: [
-				"√(",
-				grouped(state.meanSquareVoltageV2),
-				" V²) = ",
-				num(state.rmsVoltageV),
-				" V, the line above"
-			]
+		/* @__PURE__ */ jsx("rect", {
+			x: "18",
+			y: "88",
+			width: "504",
+			height: "172",
+			rx: "6",
+			fill: "color-mix(in oklab, var(--fig-surface) 88%, black)",
+			stroke: "var(--fig-axis)",
+			strokeWidth: "1"
 		}),
-		/* @__PURE__ */ jsxs(PlotFrame, {
-			...PLOT_BOT,
-			arrows: false,
-			title: "square it first: v² (V²) is never negative",
-			xLabel: "time (ms)",
-			xTicks: timeTicks.map((v) => ({
-				at: scSquare.x(v),
-				label: fmt(v, 1)
-			})),
-			yTicks: [
-				{
-					at: scSquare.y(0),
-					label: "0"
-				},
-				{
-					at: meanSquareY,
-					label: "V₀²/2"
-				},
-				{
-					at: scSquare.y(squareMax),
-					label: "V₀²"
-				}
-			],
-			children: [
-				/* @__PURE__ */ jsx(Area, {
-					points: squarePoints,
-					baseY: PLOT_BOT.y + PLOT_BOT.h,
-					color: HUE[2],
-					opacity: 20
-				}),
-				/* @__PURE__ */ jsx(Curve, {
-					points: squarePoints,
-					color: HUE[2]
-				}),
-				/* @__PURE__ */ jsx(Guide, {
-					x1: PLOT_BOT.x,
-					y1: meanSquareY,
-					x2: PLOT_BOT.x + PLOT_BOT.w,
-					y2: meanSquareY,
-					color: HUE.hot,
-					label: `mean of v² = ${grouped(state.meanSquareVoltageV2)} V²`,
-					labelAnchor: "end"
-				})
-			]
-		})
-	] });
-	const rectificationPlot = /* @__PURE__ */ jsxs(PlotFrame, {
-		...PLOT_ONE,
-		arrows: false,
-		title: `voltage across R: ${rectifier === "half" ? "one diode" : "bridge"}${smoothing ? ` + ${num(capacitanceUf)} µF` : ", no capacitor"}`,
-		xLabel: "time (ms)",
-		yLabel: "v (V)",
-		xTicks: timeTicks.map((v) => ({
-			at: scRect.x(v),
-			label: fmt(v, 1)
-		})),
-		yTicks: [
-			-peakVoltage,
-			0,
-			peakVoltage
-		].map((v) => ({
-			at: scRect.y(v),
-			label: tick(v, 0)
-		})),
-		children: [
-			/* @__PURE__ */ jsx(Guide, {
-				x1: PLOT_ONE.x,
-				y1: scRect.y(0),
-				x2: PLOT_ONE.x + PLOT_ONE.w,
-				y2: scRect.y(0),
-				color: HUE.soft
-			}),
-			/* @__PURE__ */ jsx(Curve, {
-				points: inputPoints,
-				color: HUE.soft,
-				weight: "line",
-				dashed: true,
-				opacity: .5
-			}),
-			smoothing && /* @__PURE__ */ jsx(Curve, {
-				points: rectifiedPoints,
-				color: HUE[1],
-				weight: "line",
-				opacity: .45
-			}),
-			/* @__PURE__ */ jsx(Curve, {
-				points: outputPoints,
-				color: HUE[2]
-			}),
-			/* @__PURE__ */ jsx(Guide, {
-				x1: PLOT_ONE.x,
-				y1: scRect.y(rectified.meanV),
-				x2: PLOT_ONE.x + PLOT_ONE.w,
-				y2: scRect.y(rectified.meanV),
-				color: HUE.warn,
-				label: `mean = ${num(rectified.meanV)} V`,
-				labelAnchor: "end"
-			}),
-			rippleReadable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Arrow, {
+		/* @__PURE__ */ jsx("line", {
+			x1: 18,
+			y1: 236,
+			x2: 522,
+			y2: 236,
+			stroke: "var(--fig-axis)",
+			strokeWidth: "1",
+			strokeDasharray: "3 3",
+			opacity: .6
+		}),
+		/* @__PURE__ */ jsx(Curve, {
+			points: rectInputPoints,
+			color: HUE.soft,
+			weight: "line",
+			dashed: true,
+			opacity: .4
+		}),
+		smoothing && /* @__PURE__ */ jsx(Curve, {
+			points: rectBasePoints,
+			color: HUE[1],
+			weight: "line",
+			opacity: .35
+		}),
+		/* @__PURE__ */ jsx(Curve, {
+			points: rectOutputPoints,
+			color: HUE[2],
+			weight: "line"
+		}),
+		/* @__PURE__ */ jsx(Guide, {
+			x1: 18,
+			y1: scRect_y(rectified.meanV),
+			x2: 506,
+			y2: scRect_y(rectified.meanV),
+			color: HUE.warn,
+			label: `Mean = ${num(rectified.meanV)} V`,
+			labelAnchor: "end"
+		}),
+		rippleReadable && /* @__PURE__ */ jsxs("g", { children: [
+			/* @__PURE__ */ jsx(Arrow, {
 				x1: rippleX,
-				y1: scRect.y(rectified.maxV),
+				y1: scRect_y(rectified.maxV),
 				x2: rippleX,
-				y2: scRect.y(rectified.minV),
+				y2: scRect_y(rectified.minV),
 				color: HUE.hot,
 				weight: "line",
-				head: 6,
+				head: 5,
 				double: true
-			}), /* @__PURE__ */ jsxs(FigText, {
-				x: rippleX + 8,
-				y: scRect.y(rectified.minV) + 16,
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: rippleX - 44,
+				y: scRect_y(rectified.maxV) - 18,
+				width: 88,
+				height: 16,
+				rx: 4,
+				fill: "color-mix(in oklab, var(--fig-surface) 90%, black)",
+				stroke: "var(--fig-hot)",
+				strokeWidth: STROKE.hair
+			}),
+			/* @__PURE__ */ jsxs(FigText, {
+				x: rippleX,
+				y: scRect_y(rectified.maxV) - 10,
+				anchor: "middle",
+				baseline: "middle",
 				size: "note",
 				tone: "hot",
 				children: [
@@ -773,26 +835,45 @@ function AlternatingCurrentLab({ peakVoltageV: peak0 = 325, frequencyHz: freq0 =
 					num(rectified.rippleV),
 					" V"
 				]
-			})] }),
-			/* @__PURE__ */ jsx(FigText, {
-				x: PLOT_ONE.x + 8,
-				y: scRect.y(-.72 * peakVoltage),
-				size: "note",
-				tone: "soft",
-				children: "supply before the diodes"
 			})
-		]
-	});
-	const figure = /* @__PURE__ */ jsxs(Figure, {
-		viewBox: [W, H],
-		domain: "physics",
-		label,
-		children: [
-			circuit,
-			view === "waveform" && waveformPlots,
-			view === "rms" && rmsPlots,
-			view === "rectification" && rectificationPlot
-		]
+		] }),
+		/* @__PURE__ */ jsxs(FigText, {
+			x: 28,
+			y: 104,
+			size: "note",
+			tone: "soft",
+			children: [
+				"τ = RC = ",
+				num(rectified.timeConstantS * 1e3),
+				" ms · Ripple freq: ",
+				num(rectified.rippleFrequencyHz),
+				" Hz"
+			]
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: 506,
+			y: 104,
+			anchor: "end",
+			size: "note",
+			tone: "soft",
+			children: "supply before diodes (faint)"
+		})
+	] });
+	const figure = /* @__PURE__ */ jsxs("div", {
+		className: "physics-visual-stack",
+		children: [/* @__PURE__ */ jsxs(Figure, {
+			viewBox: [W, H],
+			domain: "physics",
+			label,
+			children: [
+				view === "waveform" && waveformVisual,
+				view === "rms" && rmsVisual,
+				view === "rectification" && rectificationVisual
+			]
+		}), view === "rms" && /* @__PURE__ */ jsx("div", {
+			className: "physics-equation-result",
+			children: /* @__PURE__ */ jsx(Tex, { tex: `\\overline{v^2}=\\tfrac12 V_0^2 \\quad\\Rightarrow\\quad V_{rms}=\\sqrt{\\overline{v^2}}=\\frac{V_0}{\\sqrt2}=${num(state.rmsVoltageV)}\\,\\mathrm{V}` })
+		})]
 	});
 	const evidence = view === "waveform" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(Readout, {
@@ -893,174 +974,282 @@ function AlternatingCurrentLab({ peakVoltageV: peak0 = 325, frequencyHz: freq0 =
 			}), /* @__PURE__ */ jsx("small", { children: "That is the mean HEIGHT of the rectified wave, not an r.m.s. value. A capacitor raises the mean towards V₀ by filling in the gaps." })]
 		})
 	] });
-	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx(Field, {
-			label: "view",
-			children: /* @__PURE__ */ jsx(ActivitySelect, {
-				ariaLabel: "view",
-				value: view,
-				onChange: setView,
-				options: [
-					{
-						value: "waveform",
-						label: "waveform"
-					},
-					{
-						value: "rms",
-						label: "r.m.s."
-					},
-					{
-						value: "rectification",
-						label: "rectifying"
-					}
+	const controls = /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 10,
+			width: "100%"
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "lab-hud-toolbar",
+				role: "toolbar",
+				"aria-label": "Alternating current controls",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "lab-hud-group",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "lab-hud-badge",
+							children: "View"
+						}), /* @__PURE__ */ jsx(Segmented, {
+							value: view,
+							onChange: (v) => setView(v),
+							options: [
+								{
+									value: "waveform",
+									label: "Waveform"
+								},
+								{
+									value: "rms",
+									label: "R.M.S."
+								},
+								{
+									value: "rectification",
+									label: "Rectifier"
+								}
+							],
+							ariaLabel: "View selection"
+						})]
+					}),
+					isRect && /* @__PURE__ */ jsxs("div", {
+						className: "lab-hud-group",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "lab-hud-badge",
+							children: "Diode"
+						}), /* @__PURE__ */ jsx(Segmented, {
+							value: rectifier,
+							onChange: (r) => setRectifier(r),
+							options: [{
+								value: "half",
+								label: "Half-wave"
+							}, {
+								value: "full",
+								label: "Bridge (Full)"
+							}],
+							ariaLabel: "Diode circuit"
+						})]
+					}),
+					/* @__PURE__ */ jsxs(ActionButton, {
+						className: `lab-btn-ghost lab-hud-drawer-toggle ${drawerOpen ? "open" : ""}`,
+						onClick: () => setDrawerOpen((o) => !o),
+						"aria-expanded": drawerOpen,
+						children: ["Parameters ", drawerOpen ? "▲" : "▼"]
+					})
+				]
+			}),
+			isRect ? /* @__PURE__ */ jsx(Field, {
+				label: "Smoothing Capacitance C",
+				value: `${num(capacitanceUf)} µF (ripple ${num(rectified.rippleV)} V)`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: capacitanceUf,
+					min: 0,
+					max: C_MAX_UF,
+					step: 100,
+					onChange: setCapacitanceUf,
+					ariaLabel: "smoothing capacitance in microfarads"
+				})
+			}) : view === "rms" ? /* @__PURE__ */ jsx(Field, {
+				label: "Peak Voltage V₀",
+				value: `${num(peakVoltage)} V (V_rms = ${num(state.rmsVoltageV)} V)`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: peakVoltage,
+					min: V0_MIN,
+					max: V0_MAX,
+					step: 5,
+					onChange: setPeakVoltage,
+					ariaLabel: "peak voltage in volts"
+				})
+			}) : /* @__PURE__ */ jsx(Field, {
+				label: "Frequency f",
+				value: `${num(frequency)} Hz (T = ${num(periodMs)} ms)`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: frequency,
+					min: F_MIN,
+					max: F_MAX,
+					step: 5,
+					onChange: setFrequency,
+					ariaLabel: "frequency in hertz"
+				})
+			}),
+			drawerOpen && /* @__PURE__ */ jsxs("div", {
+				className: "lab-hud-drawer",
+				children: [
+					view !== "rms" && /* @__PURE__ */ jsx(Field, {
+						label: "Peak Voltage V₀",
+						value: `${num(peakVoltage)} V`,
+						children: /* @__PURE__ */ jsx(Slider, {
+							value: peakVoltage,
+							min: V0_MIN,
+							max: V0_MAX,
+							step: 5,
+							onChange: setPeakVoltage,
+							ariaLabel: "peak voltage in volts"
+						})
+					}),
+					view !== "waveform" && /* @__PURE__ */ jsx(Field, {
+						label: "Frequency f",
+						value: `${num(frequency)} Hz`,
+						children: /* @__PURE__ */ jsx(Slider, {
+							value: frequency,
+							min: F_MIN,
+							max: F_MAX,
+							step: 5,
+							onChange: setFrequency,
+							ariaLabel: "frequency in hertz"
+						})
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: "Load Resistance R",
+						value: `${num(resistance)} Ω`,
+						children: /* @__PURE__ */ jsx(Slider, {
+							value: resistance,
+							min: R_MIN,
+							max: R_MAX,
+							step: 10,
+							onChange: setResistance,
+							ariaLabel: "resistance in ohms"
+						})
+					})
 				]
 			})
-		}),
-		/* @__PURE__ */ jsx(Field, {
-			label: "peak voltage",
-			value: `${num(peakVoltage)} V`,
-			children: /* @__PURE__ */ jsx(Slider, {
-				value: peakVoltage,
-				min: V0_MIN,
-				max: V0_MAX,
-				step: 5,
-				onChange: setPeakVoltage,
-				ariaLabel: "peak voltage in volts"
-			})
-		}),
-		/* @__PURE__ */ jsx(Field, {
-			label: "frequency",
-			value: `${num(frequency)} Hz`,
-			children: /* @__PURE__ */ jsx(Slider, {
-				value: frequency,
-				min: F_MIN,
-				max: F_MAX,
-				step: 5,
-				onChange: setFrequency,
-				ariaLabel: "frequency in hertz"
-			})
-		}),
-		/* @__PURE__ */ jsx(Field, {
-			label: "resistance",
-			value: `${num(resistance)} Ω`,
-			children: /* @__PURE__ */ jsx(Slider, {
-				value: resistance,
-				min: R_MIN,
-				max: R_MAX,
-				step: 10,
-				onChange: setResistance,
-				ariaLabel: "resistance in ohms"
-			})
-		}),
-		isRect && /* @__PURE__ */ jsx(Field, {
-			label: "rectifier",
-			children: /* @__PURE__ */ jsx(Segmented, {
-				ariaLabel: "rectifier",
-				value: rectifier,
-				onChange: setRectifier,
-				options: [{
-					value: "half",
-					label: "one diode"
-				}, {
-					value: "full",
-					label: "bridge"
-				}]
-			})
-		}),
-		isRect && /* @__PURE__ */ jsx(Field, {
-			label: "capacitance",
-			value: `${num(capacitanceUf)} µF`,
-			children: /* @__PURE__ */ jsx(Slider, {
-				value: capacitanceUf,
-				min: 0,
-				max: C_MAX_UF,
-				step: 100,
-				onChange: setCapacitanceUf,
-				ariaLabel: "smoothing capacitance in microfarads"
-			})
-		})
-	] });
-	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
-		focusLayout: "immersive",
-		activity: {
-			...authoredActivity,
-			objectives: objectives ?? authoredActivity.objectives
-		},
-		activityId,
-		eyebrow: "Alternating currents",
-		title,
-		description: prompt,
-		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsxs("span", { children: [
-				"V₀ ",
+		]
+	});
+	if (activity) {
+		const activityId = typeof activity === "string" ? activity : "alternating-current";
+		const authoredActivity = typeof activity === "string" ? AC_ACTIVITY : activity;
+		return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+			focusLayout: "immersive",
+			presentation: "investigation",
+			transcriptMode: "sr-only",
+			initialStepId,
+			activity: {
+				...authoredActivity,
+				objectives: objectives ?? authoredActivity.objectives
+			},
+			activityId,
+			eyebrow: "Alternating currents",
+			title,
+			description: prompt,
+			status: ({ sequence }) => sequence.current.id === "predict" ? /* @__PURE__ */ jsxs("span", { children: [
+				"Mains Supply: ",
 				num(peakVoltage),
-				" V"
+				" V peak"
+			] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs("span", { children: [
+					"V₀ = ",
+					num(peakVoltage),
+					" V"
+				] }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					"V_rms = ",
+					num(state.rmsVoltageV),
+					" V"
+				] }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					"P = ",
+					num(state.meanPowerW),
+					" W"
+				] })
 			] }),
-			/* @__PURE__ */ jsxs("span", { children: [
-				"V_rms ",
+			evidence: ({ sequence }) => {
+				if (sequence.current.id === "predict") return /* @__PURE__ */ jsx("div", {
+					className: "physics-probe",
+					children: /* @__PURE__ */ jsx("strong", {
+						className: "physics-equation-result",
+						children: /* @__PURE__ */ jsx(Tex, { tex: `V_0 = ${num(peakVoltage)}\\mathrm{V},\\quad f = ${num(frequency)}\\mathrm{Hz},\\quad R = ${num(resistance)}\\Omega` })
+					})
+				});
+				if (sequence.current.id === "explain") return /* @__PURE__ */ jsx("div", {
+					className: "physics-probe",
+					children: /* @__PURE__ */ jsx("strong", {
+						className: "physics-equation-result",
+						children: /* @__PURE__ */ jsx(Tex, { tex: `V_{rms}=\\sqrt{\\overline{v^2}}=\\frac{V_0}{\\sqrt2}=${num(state.rmsVoltageV)}\\mathrm{V}\\qquad P=\\frac{V_{rms}^2}{R}=\\frac{V_0^2}{2R}=${num(state.meanPowerW)}\\mathrm{W}` })
+					})
+				});
+				return evidence;
+			},
+			controls: ({ sequence }) => {
+				if (sequence.current.id === "predict" || sequence.current.id === "explain") return null;
+				return controls;
+			},
+			observation: view === "waveform" ? "The supply takes T seconds to complete one cycle, and T = 1/f. The current curve is the voltage curve divided by R, so both reach zero together and both reach their peak together." : view === "rms" ? "The lower graph is the upper one squared, so it never goes below zero. Its mean sits at exactly half of V₀², whatever V₀ is. Take the square root of that mean and you get V_rms, the steady d.c. voltage that would heat this resistor at the same rate." : "The diodes remove the negative halves, so the current in R now flows one way only. The capacitor charges to the peak and then leaks slowly through R, so the output sags a little between peaks instead of falling to zero. More capacitance, or more resistance, means less ripple.",
+			transcript: /* @__PURE__ */ jsxs("p", { children: [
+				"Peak ",
+				num(peakVoltage),
+				" V at ",
+				num(frequency),
+				" Hz across ",
+				num(resistance),
+				" Ω. Period",
+				" ",
+				num(periodMs),
+				" ms, peak current ",
+				num(peakCurrent),
+				" A. Mean of v² is",
+				" ",
+				grouped(state.meanSquareVoltageV2),
+				" V², so V_rms is ",
 				num(state.rmsVoltageV),
-				" V"
-			] }),
-			/* @__PURE__ */ jsxs("span", { children: [
-				"P ",
+				" V and the mean power is ",
 				num(state.meanPowerW),
-				" W"
+				" W. Rectified by ",
+				rectifier === "half" ? "one diode" : "a bridge",
+				" with",
+				" ",
+				num(capacitanceUf),
+				" µF: mean ",
+				num(rectified.meanV),
+				" V, ripple ",
+				num(rectified.rippleV),
+				" V at",
+				" ",
+				num(rectified.rippleFrequencyHz),
+				" Hz."
+			] }),
+			children: ({ complete }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(AuthoredMetricGate, {
+					conditionId: "rms-opened",
+					met: view === "rms",
+					complete
+				}),
+				/* @__PURE__ */ jsx(AuthoredMetricGate, {
+					conditionId: "supply-changed",
+					met: peakVoltage !== peak0 || resistance !== res0,
+					complete
+				}),
+				/* @__PURE__ */ jsx(AuthoredMetricGate, {
+					conditionId: "smoothing-added",
+					met: isRect && capacitanceUf > 0,
+					complete
+				}),
+				figure
 			] })
-		] }),
-		evidence,
-		controls,
-		observation: view === "waveform" ? "The supply takes T seconds to complete one cycle, and T = 1/f. The current curve is the voltage curve divided by R, so both reach zero together and both reach their peak together." : view === "rms" ? "The lower graph is the upper one squared, so it never goes below zero. Its mean sits at exactly half of V₀², whatever V₀ is. Take the square root of that mean and you get V_rms, the steady d.c. voltage that would heat this resistor at the same rate." : "The diodes remove the negative halves, so the current in R now flows one way only. The capacitor charges to the peak and then leaks slowly through R, so the output sags a little between peaks instead of falling to zero. More capacitance, or more resistance, means less ripple.",
-		transcript: /* @__PURE__ */ jsxs("p", { children: [
-			"Peak ",
-			num(peakVoltage),
-			" V at ",
-			num(frequency),
-			" Hz across ",
-			num(resistance),
-			" Ω. Period ",
-			num(periodMs),
-			" ",
-			"ms, peak current ",
-			num(peakCurrent),
-			" A. Mean of v² is ",
-			grouped(state.meanSquareVoltageV2),
-			" V², so V_rms is ",
-			num(state.rmsVoltageV),
-			" V and the mean power is ",
-			num(state.meanPowerW),
-			" W. Rectified by",
-			" ",
-			rectifier === "half" ? "one diode" : "a bridge",
-			" with ",
-			num(capacitanceUf),
-			" µF: mean",
-			" ",
-			num(rectified.meanV),
-			" V, ripple ",
-			num(rectified.rippleV),
-			" V at ",
-			num(rectified.rippleFrequencyHz),
-			" ",
-			"Hz."
-		] }),
-		children: ({ complete }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx(AuthoredMetricGate, {
-				conditionId: "rms-opened",
-				met: view === "rms",
-				complete
-			}),
-			/* @__PURE__ */ jsx(AuthoredMetricGate, {
-				conditionId: "supply-changed",
-				met: peakVoltage !== peak0 || resistance !== res0,
-				complete
-			}),
-			/* @__PURE__ */ jsx(AuthoredMetricGate, {
-				conditionId: "smoothing-added",
-				met: isRect && capacitanceUf > 0,
-				complete
-			}),
-			figure
-		] })
+		});
+	}
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "lab-alternating-current",
+		focusLayout: "immersive",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Cambridge A-Level Physics 9702 · Chapter 21",
+				title,
+				description: prompt
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [
+				/* @__PURE__ */ jsx(Activity.Canvas, {
+					label,
+					children: figure
+				}),
+				/* @__PURE__ */ jsx(Activity.Dock, { children: controls }),
+				/* @__PURE__ */ jsx(Activity.Inspector, {
+					label: "Explore Cambridge Formulas & Proofs",
+					defaultOpen: false,
+					children: evidence
+				})
+			] }),
+			/* @__PURE__ */ jsx(Activity.Feedback, { message: view === "waveform" ? `The current i(t) = v(t)/R is strictly in phase with voltage across a pure resistor. Period T = 1/f = ${num(periodMs)} ms.` : view === "rms" ? `V_rms = V₀ / √2 = ${num(state.rmsVoltageV)} V delivers the same mean heating power (${num(state.meanPowerW)} W) into ${num(resistance)} Ω as an equivalent steady d.c. source.` : smoothing ? `Capacitor C = ${num(capacitanceUf)} µF maintains voltage between peaks (RC = ${num(rectified.timeConstantS * 1e3)} ms), reducing ripple to ${num(rectified.rippleV)} V.` : "Without a smoothing capacitor, output voltage drops to zero each half-cycle with 100% ripple." })
+		]
 	});
 }