@classytic/labs 0.2.0 → 0.3.0

package/dist/physics/heat-transfer/preset.mjs

@@ -1,11 +1,14 @@
 'use client';
 
 import { Tex } from "../../core/tex.mjs";
-import { Chip, Slider } from "../../kit/controls.mjs";
-import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
+import { ActivitySelect, Slider } from "../../kit/controls.mjs";
+import { Field } from "../../kit/frame.mjs";
+import { figUrl, useFigureId } from "../../kit/figure/figure.mjs";
+import { SceneSurface, SimulationTransport } from "../mechanics/presentation.mjs";
 import { useFrameTick } from "../../kit/anim.mjs";
-import { PlayWrap, usePlayGate } from "../../kit/play.mjs";
+import { usePlayGate } from "../../kit/play.mjs";
 import { BurnerGlyph, thermalColor } from "../../kit/thermal.mjs";
+import { ThermalActivity } from "../thermal/activity.mjs";
 import { useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
@@ -26,24 +29,24 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * Hand-driven on a frame loop (the rates are steady-state formulas; the loop only
 * animates the packets / current / photons). Pure SVG, play-gated, themed.
 */
-const W = 720, H = 380;
+const W = 720, H = 300;
 const SIGMA = 5.67e-8;
 const MATERIALS = {
 	copper: {
 		k: 400,
-		label: "🟧 copper"
+		label: "Copper"
 	},
 	aluminium: {
 		k: 235,
-		label: "⬜ aluminium"
+		label: "Aluminium"
 	},
 	glass: {
 		k: .8,
-		label: "🔲 glass"
+		label: "Glass"
 	},
 	wood: {
 		k: .15,
-		label: "🟫 wood"
+		label: "Wood"
 	}
 };
 const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
@@ -51,7 +54,8 @@ function HeatTransferLab({ mode: mode0 = "conduction", title = "Heat transfer: c
 	"Tell conduction, convection and radiation apart by their mechanism",
 	"See conduction depends on the material: Q̇ = k·A·ΔT/L (copper ≫ wood)",
 	"See radiation obeys T⁴, double the temperature, 16× the power"
-], controlConfig } = {}) {
+], controlConfig, activity } = {}) {
+	const figureId = useFigureId();
 	const [mode, setMode] = useState(mode0);
 	const [material, setMaterial] = useState("copper");
 	const [hotC, setHotC] = useState(100);
@@ -75,115 +79,180 @@ function HeatTransferLab({ mode: mode0 = "conduction", title = "Heat transfer: c
 	let controls;
 	let aside;
 	if (mode === "conduction") {
-		const x0 = 150, x1 = 600, yMid = 175, rodH = 46;
+		const x0 = 150, x1 = 570, yMid = 145, rodH = 52;
 		const len = x1 - x0;
 		const NSEG = 16;
 		const speed = clamp(condRate / 80, .05, 2.5);
 		const nPk = Math.max(0, Math.round(clamp(condRate / 8, 0, 14)));
-		figure = /* @__PURE__ */ jsx(PlayWrap, {
-			gate,
-			children: /* @__PURE__ */ jsx("div", {
-				style: fwrap,
-				children: /* @__PURE__ */ jsxs("svg", {
-					viewBox: `0 0 ${W} ${H}`,
-					width: "100%",
-					role: "img",
-					"aria-label": `Conduction through ${material}, rate ${condRate.toFixed(1)} watts`,
-					children: [
-						/* @__PURE__ */ jsx("rect", {
-							x: 70,
-							y: yMid - 55,
-							width: 80,
-							height: 110,
-							rx: 8,
-							fill: thermalColor(1),
-							opacity: .85
-						}),
-						/* @__PURE__ */ jsxs("text", {
-							x: 110,
-							y: yMid - 62,
-							textAnchor: "middle",
-							fontSize: 12,
-							fontWeight: 700,
-							fill: "var(--stage-fg)",
-							children: [hotC, "°C"]
-						}),
-						/* @__PURE__ */ jsx("rect", {
-							x: x1,
-							y: yMid - 55,
-							width: 80,
-							height: 110,
-							rx: 8,
-							fill: thermalColor(0),
-							opacity: .85
-						}),
-						/* @__PURE__ */ jsx("text", {
-							x: 640,
-							y: yMid - 62,
-							textAnchor: "middle",
-							fontSize: 12,
-							fontWeight: 700,
-							fill: "var(--stage-fg)",
-							children: "0°C"
-						}),
-						Array.from({ length: NSEG }, (_, i) => /* @__PURE__ */ jsx("rect", {
-							x: x0 + i / NSEG * len,
-							y: yMid - rodH / 2,
-							width: 29.125,
-							height: rodH,
-							fill: thermalColor(1 - i / NSEG)
-						}, i)),
-						/* @__PURE__ */ jsx("rect", {
-							x: x0,
-							y: yMid - rodH / 2,
-							width: len,
-							height: rodH,
-							fill: "none",
-							stroke: "var(--stage-metal)",
-							strokeWidth: 2,
-							rx: 4
-						}),
-						Array.from({ length: 11 }, (_, i) => {
-							const fx = i / 10, ax = x0 + fx * len, amp = (1 - fx) * 5 + 1;
-							const jy = Math.sin(t * 11 + i) * amp;
-							return /* @__PURE__ */ jsx("circle", {
-								cx: ax + Math.cos(t * 9 + i * 1.3) * amp * .5,
-								cy: yMid + jy,
-								r: 3,
-								fill: "var(--stage-bg)",
-								opacity: .8
-							}, i);
-						}),
-						Array.from({ length: nPk }, (_, i) => {
-							return /* @__PURE__ */ jsx("circle", {
-								cx: x0 + (t * speed + i / Math.max(1, nPk)) % 1 * len,
-								cy: yMid,
-								r: 5,
-								fill: "var(--stage-warn)",
-								opacity: .9
-							}, i);
-						}),
-						/* @__PURE__ */ jsx(BurnerGlyph, {
-							cx: 110,
-							baseY: 233,
-							w: 66,
-							level: .8,
-							phase: t
+		figure = /* @__PURE__ */ jsx(SceneSurface, {
+			className: "physics-heat-transfer-scene",
+			children: /* @__PURE__ */ jsxs("svg", {
+				viewBox: `0 0 ${W} ${H}`,
+				width: "100%",
+				role: "img",
+				"aria-label": `Conduction through ${material}, rate ${condRate.toFixed(1)} watts`,
+				children: [
+					/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("linearGradient", {
+						id: `${figureId}-conduction-rod`,
+						x1: "0",
+						x2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0",
+							stopColor: thermalColor(1)
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "1",
+							stopColor: thermalColor(0)
+						})]
+					}), /* @__PURE__ */ jsx("marker", {
+						id: `${figureId}-heat-flow-arrow`,
+						markerWidth: "7",
+						markerHeight: "7",
+						refX: "5",
+						refY: "3.5",
+						orient: "auto",
+						children: /* @__PURE__ */ jsx("path", {
+							d: "M0,0 L0,7 L6,3.5 Z",
+							fill: "var(--stage-warn)"
 						})
-					]
-				})
+					})] }),
+					/* @__PURE__ */ jsx("rect", {
+						x: 78,
+						y: yMid - 42,
+						width: 72,
+						height: 84,
+						rx: 10,
+						fill: thermalColor(1),
+						opacity: .88
+					}),
+					/* @__PURE__ */ jsxs("text", {
+						x: 114,
+						y: yMid - 55,
+						textAnchor: "middle",
+						fontSize: 13,
+						fontWeight: 750,
+						fill: "var(--stage-fg)",
+						children: [hotC, "°C"]
+					}),
+					/* @__PURE__ */ jsx("text", {
+						className: "physics-svg-on-fill",
+						x: 114,
+						y: 150,
+						textAnchor: "middle",
+						fontSize: 11,
+						fontWeight: 750,
+						children: "HOT"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: x1,
+						y: yMid - 42,
+						width: 72,
+						height: 84,
+						rx: 10,
+						fill: thermalColor(0),
+						opacity: .88
+					}),
+					/* @__PURE__ */ jsx("text", {
+						x: 606,
+						y: yMid - 55,
+						textAnchor: "middle",
+						fontSize: 13,
+						fontWeight: 750,
+						fill: "var(--stage-fg)",
+						children: "0°C"
+					}),
+					/* @__PURE__ */ jsx("text", {
+						className: "physics-svg-on-fill",
+						x: 606,
+						y: 150,
+						textAnchor: "middle",
+						fontSize: 11,
+						fontWeight: 750,
+						children: "COLD"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: x0,
+						y: yMid - rodH / 2,
+						width: len,
+						height: rodH,
+						fill: figUrl(figureId, "conduction-rod")
+					}),
+					Array.from({ length: NSEG - 1 }, (_, i) => /* @__PURE__ */ jsx("line", {
+						x1: x0 + (i + 1) / NSEG * len,
+						x2: x0 + (i + 1) / NSEG * len,
+						y1: yMid - rodH / 2,
+						y2: 171,
+						stroke: "var(--stage-bg)",
+						opacity: .12
+					}, i)),
+					/* @__PURE__ */ jsx("rect", {
+						x: x0,
+						y: yMid - rodH / 2,
+						width: len,
+						height: rodH,
+						fill: "none",
+						stroke: "var(--stage-metal)",
+						strokeWidth: 2,
+						rx: 4
+					}),
+					/* @__PURE__ */ jsx("line", {
+						x1: 215,
+						y1: 70,
+						x2: 505,
+						y2: 70,
+						stroke: "var(--stage-warn)",
+						strokeWidth: 2,
+						markerEnd: figUrl(figureId, "heat-flow-arrow")
+					}),
+					/* @__PURE__ */ jsx("text", {
+						x: 360,
+						y: 57,
+						textAnchor: "middle",
+						fontSize: 11,
+						fontWeight: 700,
+						fill: "var(--stage-muted)",
+						children: "ENERGY FLOW"
+					}),
+					Array.from({ length: 11 }, (_, i) => {
+						const fx = i / 10, ax = x0 + fx * len, amp = (1 - fx) * 5 + 1;
+						const jy = Math.sin(t * 11 + i) * amp;
+						return /* @__PURE__ */ jsx("circle", {
+							cx: ax + Math.cos(t * 9 + i * 1.3) * amp * .5,
+							cy: yMid + jy,
+							r: 3,
+							fill: "var(--stage-bg)",
+							opacity: .8
+						}, i);
+					}),
+					Array.from({ length: nPk }, (_, i) => {
+						return /* @__PURE__ */ jsx("circle", {
+							cx: x0 + (t * speed + i / Math.max(1, nPk)) % 1 * len,
+							cy: yMid,
+							r: 5,
+							fill: "var(--stage-warn)",
+							opacity: .9
+						}, i);
+					}),
+					/* @__PURE__ */ jsx(BurnerGlyph, {
+						cx: 114,
+						baseY: 192,
+						w: 50,
+						level: .8,
+						phase: t
+					})
+				]
 			})
 		});
-		controls = /* @__PURE__ */ jsxs(ControlBar, { children: [
+		controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			/* @__PURE__ */ jsx(Field, {
 				label: "material",
-				children: /* @__PURE__ */ jsx("span", {
-					className: "lab-field-row",
-					children: Object.entries(MATERIALS).map(([key, m]) => /* @__PURE__ */ jsx(Chip, {
-						selected: material === key,
-						onClick: () => setMaterial(key),
-						children: m.label
-					}, key))
+				children: /* @__PURE__ */ jsx(ActivitySelect, {
+					ariaLabel: "material",
+					value: material,
+					onChange: setMaterial,
+					options: Object.entries(MATERIALS).map(([key, m]) => ({
+						value: key,
+						label: m.label
+					}))
 				})
 			}),
 			/* @__PURE__ */ jsx(Field, {
@@ -211,35 +280,34 @@ function HeatTransferLab({ mode: mode0 = "conduction", title = "Heat transfer: c
 				})
 			})
 		] });
-		aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Callout, {
-			tone: "result",
-			children: /* @__PURE__ */ jsx("span", {
-				style: tnum,
-				children: /* @__PURE__ */ jsxs("strong", {
-					style: { fontSize: 16 },
-					children: [
-						"Q̇ = ",
-						condRate.toFixed(condRate < 10 ? 2 : 0),
-						" W"
-					]
-				})
-			})
+		aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "physics-probe",
+			children: [
+				/* @__PURE__ */ jsx("span", { children: "Transfer rate" }),
+				/* @__PURE__ */ jsxs("strong", { children: [
+					"Q̇ = ",
+					condRate.toFixed(condRate < 10 ? 2 : 0),
+					" W"
+				] }),
+				/* @__PURE__ */ jsxs("small", { children: [
+					MATERIALS[material].label,
+					" · k = ",
+					k,
+					" W/m·K"
+				] })
+			]
 		}), /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				gap: 8,
-				padding: "8px 2px 0",
-				fontSize: 13
-			},
+			className: "physics-thermal-model",
 			children: [/* @__PURE__ */ jsx(Tex, {
 				tex: "\\dot{Q} = \\dfrac{k\\,A\\,\\Delta T}{L}",
 				block: true
 			}), /* @__PURE__ */ jsxs("span", {
-				style: { color: "var(--stage-muted)" },
+				className: "physics-explain",
 				children: [
-					"conduction = atom-to-atom through a solid. ",
+					"conduction = atom-to-atom through a solid.",
+					" ",
 					/* @__PURE__ */ jsx("strong", {
-						style: { color: "var(--stage-fg)" },
+						className: "physics-emphasis",
 						children: MATERIALS[material].label
 					}),
 					" has k = ",
@@ -249,7 +317,7 @@ function HeatTransferLab({ mode: mode0 = "conduction", title = "Heat transfer: c
 			})]
 		})] });
 	} else if (mode === "convection") {
-		const cx = 360, potTop = 110, potBot = 285, potHW = 150;
+		const cx = 360, potTop = 70, potBot = 230, potHW = 150;
 		const loopPts = (sign) => {
 			const pts = [];
 			for (let i = 0; i <= 40; i++) {
@@ -260,7 +328,7 @@ function HeatTransferLab({ mode: mode0 = "conduction", title = "Heat transfer: c
 					y = potBot - u / .25 * (potBot - potTop);
 				} else if (u < .5) {
 					x = cx + sign * ((u - .25) / .25) * (potHW - 16);
-					y = 116;
+					y = 76;
 				} else if (u < .75) {
 					x = cx + sign * (potHW - 16);
 					y = potTop + (u - .5) / .25 * (potBot - potTop);
@@ -277,85 +345,82 @@ function HeatTransferLab({ mode: mode0 = "conduction", title = "Heat transfer: c
 			return pts;
 		};
 		const loops = [loopPts(-1), loopPts(1)];
-		figure = /* @__PURE__ */ jsx(PlayWrap, {
-			gate,
-			children: /* @__PURE__ */ jsx("div", {
-				style: fwrap,
-				children: /* @__PURE__ */ jsxs("svg", {
-					viewBox: `0 0 ${W} ${H}`,
-					width: "100%",
-					role: "img",
-					"aria-label": "Convection currents in a heated fluid",
-					children: [
-						/* @__PURE__ */ jsx("rect", {
-							x: cx - potHW,
-							y: potTop,
-							width: potHW * 2,
-							height: potBot - potTop,
-							rx: 6,
-							fill: "color-mix(in oklab, var(--stage-accent) 16%, transparent)"
-						}),
-						loops.map((pts, li) => /* @__PURE__ */ jsx("polyline", {
-							points: pts.map((p) => `${p.x},${p.y}`).join(" "),
-							fill: "none",
-							stroke: "var(--stage-grid)",
-							strokeWidth: 1,
-							strokeDasharray: "3 4"
-						}, li)),
-						loops.flatMap((pts, li) => Array.from({ length: 7 }, (_, i) => {
-							const u = (t * .16 * (powerC / 140) + i / 7) % 1;
-							const p = pts[Math.min(pts.length - 1, Math.floor(u * pts.length))];
-							return /* @__PURE__ */ jsx("circle", {
-								cx: p.x,
-								cy: p.y,
-								r: 6,
-								fill: thermalColor(p.h),
-								opacity: .92
-							}, `${li}-${i}`);
-						})),
-						/* @__PURE__ */ jsx("text", {
-							x: cx,
-							y: 150,
-							textAnchor: "middle",
-							fontSize: 16,
-							fill: "var(--stage-warn)",
-							children: "↑"
-						}),
-						/* @__PURE__ */ jsx("text", {
-							x: 228,
-							y: potBot - 30,
-							textAnchor: "middle",
-							fontSize: 16,
-							fill: "var(--stage-accent)",
-							children: "↓"
-						}),
-						/* @__PURE__ */ jsx("text", {
-							x: 492,
-							y: potBot - 30,
-							textAnchor: "middle",
-							fontSize: 16,
-							fill: "var(--stage-accent)",
-							children: "↓"
-						}),
-						/* @__PURE__ */ jsx("path", {
-							d: `M ${cx - potHW} ${potTop} L ${cx - potHW} ${potBot} L 510 ${potBot} L 510 ${potTop}`,
-							fill: "none",
-							stroke: "var(--stage-metal)",
-							strokeWidth: 3,
-							strokeLinejoin: "round"
-						}),
-						/* @__PURE__ */ jsx(BurnerGlyph, {
-							cx,
-							baseY: 291,
-							w: 120,
-							level: clamp(powerC / 200, .1, 1),
-							phase: t
-						})
-					]
-				})
+		figure = /* @__PURE__ */ jsx(SceneSurface, {
+			className: "physics-heat-transfer-scene",
+			children: /* @__PURE__ */ jsxs("svg", {
+				viewBox: `0 0 ${W} ${H}`,
+				width: "100%",
+				role: "img",
+				"aria-label": "Convection currents in a heated fluid",
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						x: cx - potHW,
+						y: potTop,
+						width: potHW * 2,
+						height: potBot - potTop,
+						rx: 6,
+						fill: "color-mix(in oklab, var(--stage-accent) 16%, transparent)"
+					}),
+					loops.map((pts, li) => /* @__PURE__ */ jsx("polyline", {
+						points: pts.map((p) => `${p.x},${p.y}`).join(" "),
+						fill: "none",
+						stroke: "var(--stage-grid)",
+						strokeWidth: 1,
+						strokeDasharray: "3 4"
+					}, li)),
+					loops.flatMap((pts, li) => Array.from({ length: 7 }, (_, i) => {
+						const u = (t * .16 * (powerC / 140) + i / 7) % 1;
+						const p = pts[Math.min(pts.length - 1, Math.floor(u * pts.length))];
+						return /* @__PURE__ */ jsx("circle", {
+							cx: p.x,
+							cy: p.y,
+							r: 6,
+							fill: thermalColor(p.h),
+							opacity: .92
+						}, `${li}-${i}`);
+					})),
+					/* @__PURE__ */ jsx("text", {
+						x: cx,
+						y: 110,
+						textAnchor: "middle",
+						fontSize: 16,
+						fill: "var(--stage-warn)",
+						children: "↑"
+					}),
+					/* @__PURE__ */ jsx("text", {
+						x: 228,
+						y: potBot - 30,
+						textAnchor: "middle",
+						fontSize: 16,
+						fill: "var(--stage-accent)",
+						children: "↓"
+					}),
+					/* @__PURE__ */ jsx("text", {
+						x: 492,
+						y: potBot - 30,
+						textAnchor: "middle",
+						fontSize: 16,
+						fill: "var(--stage-accent)",
+						children: "↓"
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: `M ${cx - potHW} ${potTop} L ${cx - potHW} ${potBot} L 510 ${potBot} L 510 ${potTop}`,
+						fill: "none",
+						stroke: "var(--stage-metal)",
+						strokeWidth: 3,
+						strokeLinejoin: "round"
+					}),
+					/* @__PURE__ */ jsx(BurnerGlyph, {
+						cx,
+						baseY: 236,
+						w: 120,
+						level: clamp(powerC / 200, .1, 1),
+						phase: t
+					})
+				]
 			})
 		});
-		controls = /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
+		controls = /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Field, {
 			label: "heat",
 			value: `${powerC} W`,
 			children: /* @__PURE__ */ jsx(Slider, {
@@ -367,40 +432,33 @@ function HeatTransferLab({ mode: mode0 = "conduction", title = "Heat transfer: c
 				ariaLabel: "heating power"
 			})
 		}) });
-		aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Callout, {
-			tone: "result",
-			children: /* @__PURE__ */ jsx("span", {
-				style: tnum,
-				children: /* @__PURE__ */ jsxs("strong", {
-					style: { fontSize: 16 },
-					children: [
-						"Q̇ ≈ ",
-						convRate.toFixed(0),
-						" W"
-					]
-				})
-			})
+		aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "physics-probe",
+			children: [
+				/* @__PURE__ */ jsx("span", { children: "Transfer rate" }),
+				/* @__PURE__ */ jsxs("strong", { children: [
+					"Q̇ ≈ ",
+					convRate.toFixed(0),
+					" W"
+				] }),
+				/* @__PURE__ */ jsx("small", { children: "Bulk flow carries energy" })
+			]
 		}), /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				gap: 8,
-				padding: "8px 2px 0",
-				fontSize: 13
-			},
+			className: "physics-thermal-model",
 			children: [/* @__PURE__ */ jsx(Tex, {
 				tex: "\\dot{Q} = h\\,A\\,\\Delta T",
 				block: true
 			}), /* @__PURE__ */ jsxs("span", {
-				style: { color: "var(--stage-muted)" },
+				className: "physics-explain",
 				children: [
 					"Heated fluid expands → less dense → ",
 					/* @__PURE__ */ jsx("strong", {
-						style: { color: "var(--stage-fg)" },
+						className: "physics-emphasis",
 						children: "rises"
 					}),
 					"; it cools up top, grows denser and ",
 					/* @__PURE__ */ jsx("strong", {
-						style: { color: "var(--stage-fg)" },
+						className: "physics-emphasis",
 						children: "sinks"
 					}),
 					", a rolling current that carries heat with the moving matter. (No solid needed; impossible in a vacuum.)"
@@ -408,108 +466,105 @@ function HeatTransferLab({ mode: mode0 = "conduction", title = "Heat transfer: c
 			})]
 		})] });
 	} else {
-		const cx = 300, cy = 190;
+		const cx = 300, cy = 150;
 		const tFrac = clamp((bodyK - surrK) / 700, 0, 1);
 		const bodyR = 34;
 		const glowR = bodyR + tFrac * 26;
 		const nPhotons = Math.round(clamp((bodyK / surrK) ** 4 * 1.5, 2, 28)) * (.4 + emiss * .6);
-		figure = /* @__PURE__ */ jsx(PlayWrap, {
-			gate,
-			children: /* @__PURE__ */ jsx("div", {
-				style: fwrap,
-				children: /* @__PURE__ */ jsxs("svg", {
-					viewBox: `0 0 ${W} ${H}`,
-					width: "100%",
-					role: "img",
-					"aria-label": `Radiation from a body at ${bodyK} kelvin, ${radP.toFixed(0)} watts`,
-					children: [
-						/* @__PURE__ */ jsxs("text", {
-							x: 20,
-							y: 26,
-							textAnchor: "start",
-							fontSize: 12,
-							fill: "var(--stage-muted)",
-							children: [
-								"surroundings ",
-								surrK,
-								" K"
-							]
-						}),
-						Array.from({ length: Math.round(nPhotons) }, (_, i) => {
-							const ang = i / Math.round(nPhotons) * Math.PI * 2 + i * .7;
-							const u = (t * (.4 + tFrac) + i * .13) % 1;
-							const r = glowR + 6 + u * 150;
-							const px = cx + Math.cos(ang) * r, py = cy + Math.sin(ang) * r;
-							return /* @__PURE__ */ jsxs("g", {
-								opacity: (1 - u) * (.4 + emiss * .6),
-								children: [/* @__PURE__ */ jsx("circle", {
-									cx: px,
-									cy: py,
-									r: 2.5,
-									fill: thermalColor(tFrac)
-								}), /* @__PURE__ */ jsx("line", {
-									x1: cx + Math.cos(ang) * (r - 12),
-									y1: cy + Math.sin(ang) * (r - 12),
-									x2: px,
-									y2: py,
-									stroke: thermalColor(tFrac),
-									strokeWidth: 1.5,
-									opacity: .5
-								})]
-							}, i);
-						}),
-						/* @__PURE__ */ jsx("circle", {
-							cx,
-							cy,
-							r: glowR,
-							fill: thermalColor(tFrac),
-							opacity: .18
-						}),
-						/* @__PURE__ */ jsx("circle", {
-							cx,
-							cy,
-							r: bodyR,
-							fill: emiss > .5 ? thermalColor(tFrac) : "color-mix(in oklab, var(--stage-metal) 60%, var(--stage-bg))",
-							stroke: "var(--stage-metal)",
-							strokeWidth: 2
-						}),
-						/* @__PURE__ */ jsxs("text", {
-							x: cx,
-							y: 195,
-							textAnchor: "middle",
-							fontSize: 13,
-							fontWeight: 800,
-							fill: "var(--stage-bg)",
-							children: [bodyK, " K"]
-						}),
-						/* @__PURE__ */ jsx("text", {
-							x: 520,
-							y: 120,
-							fontSize: 12,
-							fill: "var(--stage-muted)",
-							children: "power ∝ T⁴"
-						}),
-						/* @__PURE__ */ jsx("rect", {
-							x: 520,
-							y: 130,
-							width: 160,
-							height: 16,
-							rx: 4,
-							fill: "var(--stage-grid)"
-						}),
-						/* @__PURE__ */ jsx("rect", {
-							x: 520,
-							y: 130,
-							width: clamp((bodyK / 1e3) ** 4 * 160, 2, 160),
-							height: 16,
-							rx: 4,
-							fill: thermalColor(tFrac)
-						})
-					]
-				})
+		figure = /* @__PURE__ */ jsx(SceneSurface, {
+			className: "physics-heat-transfer-scene",
+			children: /* @__PURE__ */ jsxs("svg", {
+				viewBox: `0 0 ${W} ${H}`,
+				width: "100%",
+				role: "img",
+				"aria-label": `Radiation from a body at ${bodyK} kelvin, ${radP.toFixed(0)} watts`,
+				children: [
+					/* @__PURE__ */ jsxs("text", {
+						x: 20,
+						y: 26,
+						textAnchor: "start",
+						fontSize: 12,
+						fill: "var(--stage-muted)",
+						children: [
+							"surroundings ",
+							surrK,
+							" K"
+						]
+					}),
+					Array.from({ length: Math.round(nPhotons) }, (_, i) => {
+						const ang = i / Math.round(nPhotons) * Math.PI * 2 + i * .7;
+						const u = (t * (.4 + tFrac) + i * .13) % 1;
+						const r = glowR + 6 + u * 150;
+						const px = cx + Math.cos(ang) * r, py = cy + Math.sin(ang) * r;
+						return /* @__PURE__ */ jsxs("g", {
+							opacity: (1 - u) * (.4 + emiss * .6),
+							children: [/* @__PURE__ */ jsx("circle", {
+								cx: px,
+								cy: py,
+								r: 2.5,
+								fill: thermalColor(tFrac)
+							}), /* @__PURE__ */ jsx("line", {
+								x1: cx + Math.cos(ang) * (r - 12),
+								y1: cy + Math.sin(ang) * (r - 12),
+								x2: px,
+								y2: py,
+								stroke: thermalColor(tFrac),
+								strokeWidth: 1.5,
+								opacity: .5
+							})]
+						}, i);
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx,
+						cy,
+						r: glowR,
+						fill: thermalColor(tFrac),
+						opacity: .18
+					}),
+					/* @__PURE__ */ jsx("circle", {
+						cx,
+						cy,
+						r: bodyR,
+						fill: emiss > .5 ? thermalColor(tFrac) : "color-mix(in oklab, var(--stage-metal) 60%, var(--stage-bg))",
+						stroke: "var(--stage-metal)",
+						strokeWidth: 2
+					}),
+					/* @__PURE__ */ jsxs("text", {
+						x: cx,
+						y: 155,
+						textAnchor: "middle",
+						fontSize: 13,
+						fontWeight: 800,
+						fill: "var(--stage-bg)",
+						children: [bodyK, " K"]
+					}),
+					/* @__PURE__ */ jsx("text", {
+						x: 520,
+						y: 120,
+						fontSize: 12,
+						fill: "var(--stage-muted)",
+						children: "power ∝ T⁴"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: 520,
+						y: 130,
+						width: 160,
+						height: 16,
+						rx: 4,
+						fill: "var(--stage-grid)"
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: 520,
+						y: 130,
+						width: clamp((bodyK / 1e3) ** 4 * 160, 2, 160),
+						height: 16,
+						rx: 4,
+						fill: thermalColor(tFrac)
+					})
+				]
 			})
 		});
-		controls = /* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsx(Field, {
+		controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
 			label: "body temperature",
 			value: `${bodyK} K`,
 			children: /* @__PURE__ */ jsx(Slider, {
@@ -522,53 +577,51 @@ function HeatTransferLab({ mode: mode0 = "conduction", title = "Heat transfer: c
 			})
 		}), /* @__PURE__ */ jsx(Field, {
 			label: "surface",
-			children: /* @__PURE__ */ jsxs("span", {
-				className: "lab-field-row",
-				children: [/* @__PURE__ */ jsx(Chip, {
-					selected: emiss > .5,
-					onClick: () => setEmiss(1),
-					children: "matte black (ε≈1)"
-				}), /* @__PURE__ */ jsx(Chip, {
-					selected: emiss <= .5,
-					onClick: () => setEmiss(.1),
-					children: "shiny (ε≈0.1)"
-				})]
+			children: /* @__PURE__ */ jsx(ActivitySelect, {
+				ariaLabel: "surface",
+				value: emiss > .5 ? "matte" : "shiny",
+				onChange: (v) => setEmiss(v === "matte" ? 1 : .1),
+				options: [{
+					value: "matte",
+					label: "matte black (ε≈1)"
+				}, {
+					value: "shiny",
+					label: "shiny (ε≈0.1)"
+				}]
 			})
 		})] });
-		aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Callout, {
-			tone: "result",
-			children: /* @__PURE__ */ jsx("span", {
-				style: tnum,
-				children: /* @__PURE__ */ jsxs("strong", {
-					style: { fontSize: 16 },
-					children: [
-						"P = ",
-						radP.toFixed(radP < 10 ? 1 : 0),
-						" W"
-					]
-				})
-			})
+		aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "physics-probe",
+			children: [
+				/* @__PURE__ */ jsx("span", { children: "Radiated power" }),
+				/* @__PURE__ */ jsxs("strong", { children: [
+					"P = ",
+					radP.toFixed(radP < 10 ? 1 : 0),
+					" W"
+				] }),
+				/* @__PURE__ */ jsxs("small", { children: [
+					"Surroundings ",
+					surrK,
+					" K"
+				] })
+			]
 		}), /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				gap: 8,
-				padding: "8px 2px 0",
-				fontSize: 13
-			},
+			className: "physics-thermal-model",
 			children: [/* @__PURE__ */ jsx(Tex, {
 				tex: "P = \\varepsilon\\,\\sigma\\,A\\,(T^4 - T_0^4)",
 				block: true
 			}), /* @__PURE__ */ jsxs("span", {
-				style: { color: "var(--stage-muted)" },
+				className: "physics-explain",
 				children: [
 					"EM waves, needs ",
 					/* @__PURE__ */ jsx("strong", {
-						style: { color: "var(--stage-fg)" },
+						className: "physics-emphasis",
 						children: "no medium"
 					}),
-					" (this is how the Sun reaches us). The T⁴ is fierce: double the kelvin temperature → ",
+					" (this is how the Sun reaches us). The T⁴ is fierce: double the kelvin temperature →",
+					" ",
 					/* @__PURE__ */ jsx("strong", {
-						style: { color: "var(--stage-fg)" },
+						className: "physics-emphasis",
 						children: "16×"
 					}),
 					" the power. A matte-black surface radiates far more than a shiny one."
@@ -576,51 +629,61 @@ function HeatTransferLab({ mode: mode0 = "conduction", title = "Heat transfer: c
 			})]
 		})] });
 	}
-	return /* @__PURE__ */ jsx(LabFrame, {
+	const mechanismControls = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Field, {
+		label: "mechanism",
+		children: /* @__PURE__ */ jsx(ActivitySelect, {
+			ariaLabel: "mechanism",
+			value: mode,
+			onChange: setMode,
+			options: [
+				{
+					value: "conduction",
+					label: "conduction"
+				},
+				{
+					value: "convection",
+					label: "convection"
+				},
+				{
+					value: "radiation",
+					label: "radiation"
+				}
+			]
+		})
+	}), controls] });
+	const rate = mode === "conduction" ? condRate : mode === "convection" ? convRate : radP;
+	const reset = () => {
+		gate.setPlaying(false);
+		tRef.current = 0;
+	};
+	return /* @__PURE__ */ jsx(ThermalActivity, {
+		activity,
+		className: "physics-heat-transfer",
 		title,
 		prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("strong", { children: mode }),
+			/* @__PURE__ */ jsxs("span", { children: [rate.toFixed(rate < 10 ? 1 : 0), " W"] }),
+			mode === "conduction" ? /* @__PURE__ */ jsx("span", { children: MATERIALS[material].label }) : null
+		] }),
+		figure,
+		instruments: aside,
+		controls: mechanismControls,
+		feedback: mode === "conduction" ? "Energy passes between neighboring particles; high conductivity and a short path increase the rate." : mode === "convection" ? "Warmer, less-dense fluid rises while cooler, denser fluid sinks, creating a circulating energy flow." : "Thermal radiation needs no medium, and its power rises extremely quickly with absolute temperature.",
 		objectives,
-		aside,
-		controlConfig,
-		controls: /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				gap: 10
-			},
-			children: [/* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
-				label: "mechanism",
-				children: /* @__PURE__ */ jsxs("span", {
-					className: "lab-field-row",
-					children: [
-						/* @__PURE__ */ jsx(Chip, {
-							selected: mode === "conduction",
-							onClick: () => setMode("conduction"),
-							children: "conduction"
-						}),
-						/* @__PURE__ */ jsx(Chip, {
-							selected: mode === "convection",
-							onClick: () => setMode("convection"),
-							children: "convection"
-						}),
-						/* @__PURE__ */ jsx(Chip, {
-							selected: mode === "radiation",
-							onClick: () => setMode("radiation"),
-							children: "radiation"
-						})
-					]
-				})
-			}) }), controls]
+		transport: /* @__PURE__ */ jsx(SimulationTransport, {
+			running: gate.playing,
+			onReset: reset,
+			onToggle: () => gate.setPlaying(!gate.playing),
+			state: gate.playing ? "Animating" : "Paused",
+			detail: mode,
+			resetLabel: "Reset heat transfer"
 		}),
-		children: figure
+		controlConfig,
+		canvasLabel: `${mode} heat-transfer visualization`,
+		inspectorLabel: "Transfer rate and variables"
 	});
 }
-const fwrap = {
-	borderRadius: 14,
-	overflow: "hidden",
-	background: "var(--stage-bg)",
-	border: "1px solid var(--stage-grid)"
-};
-const tnum = { fontVariantNumeric: "tabular-nums" };
 
 //#endregion
 export { HeatTransferLab };