@classytic/labs 0.2.0 → 0.3.0

package/dist/physics/expansion/preset.mjs

@@ -1,9 +1,13 @@
 '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 { Figure, HUE } from "../../kit/figure/figure.mjs";
+import { ResetTransport, SceneSurface } from "../mechanics/presentation.mjs";
+import { DiagramLabel } from "../../kit/annotate.mjs";
 import { thermalColor } from "../../kit/thermal.mjs";
+import { ThermalActivity } from "../thermal/activity.mjs";
 import { useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
@@ -50,12 +54,13 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 	"Use ΔL = αLΔT, and that area grows by 2α and volume by 3α",
 	"See expansion is tiny but real, why rails, bridges and pipes need gaps",
 	"Explain a bimetallic strip / thermostat: unequal α → it bends"
-], controlConfig } = {}) {
+], controlConfig, activity } = {}) {
 	const [mode, setMode] = useState(mode0);
 	const [material, setMaterial] = useState("aluminium");
 	const [dT, setDT] = useState(100);
 	const gid = useId().replace(/:/g, "");
-	const frac = METALS[material].a * dT;
+	const a = METALS[material].a;
+	const frac = a * dT;
 	const tCol = thermalColor(Math.max(0, Math.min(1, dT / 200)));
 	const cold = thermalColor(0);
 	let figure;
@@ -64,11 +69,10 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 		const x0 = 110, y = 180, h = 44, L0 = 320;
 		const L1 = L0 * (1 + frac * MAG);
 		const dLmm = 1e3 * frac;
-		figure = expansionWrap(/* @__PURE__ */ jsxs("svg", {
-			viewBox: `0 0 ${W} ${H}`,
-			width: "100%",
-			role: "img",
-			"aria-label": `Rod expands by ${dLmm.toFixed(2)} millimetres`,
+		figure = expansionWrap(/* @__PURE__ */ jsxs(Figure, {
+			viewBox: [W, H],
+			domain: "physics",
+			label: `Rod expands by ${dLmm.toFixed(2)} millimetres`,
 			children: [
 				/* @__PURE__ */ jsx("rect", {
 					x: x0,
@@ -116,14 +120,19 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 					y2: 224,
 					stroke: "var(--stage-good)",
 					strokeWidth: 2
-				}), /* @__PURE__ */ jsx("text", {
+				}), /* @__PURE__ */ jsx(DiagramLabel, {
 					x: (540 + L1) / 2,
-					y: 240,
-					textAnchor: "middle",
-					fontSize: 11,
+					y: 242,
+					text: "ΔL",
+					tone: "good",
+					fontSize: 13,
 					fontWeight: 700,
-					fill: "var(--stage-good)",
-					children: "ΔL"
+					bounds: {
+						left: 8,
+						right: W - 8,
+						top: 8,
+						bottom: H - 8
+					}
 				})] }),
 				/* @__PURE__ */ jsx("rect", {
 					x: x0 - 12,
@@ -132,19 +141,20 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 					height: 60,
 					fill: "var(--stage-metal)"
 				}),
-				/* @__PURE__ */ jsxs("text", {
+				/* @__PURE__ */ jsx(DiagramLabel, {
 					x: 270,
 					y: y - h / 2 - 16,
-					textAnchor: "middle",
-					fontSize: 11,
-					fill: "var(--stage-muted)",
-					children: [
-						"drawing ×",
-						MAG,
-						" (real ΔL = ",
-						dLmm.toFixed(2),
-						" mm for a 1 m rod)"
-					]
+					text: "original length → heated length",
+					tone: "muted",
+					fontSize: 13,
+					fontWeight: 650,
+					maxChars: 52,
+					bounds: {
+						left: 8,
+						right: W - 8,
+						top: 8,
+						bottom: H - 8
+					}
 				})
 			]
 		}));
@@ -156,9 +166,10 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 			METALS[material].label,
 			" rod warmed ",
 			dT,
-			" °C grows just ",
+			" °C grows just",
+			" ",
 			/* @__PURE__ */ jsxs("strong", {
-				style: { color: "var(--stage-fg)" },
+				className: "physics-emphasis",
 				children: [dLmm.toFixed(2), " mm"]
 			}),
 			", tiny, but a 100 m bridge would grow ",
@@ -169,11 +180,10 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 		const cx = W / 2, cy = 186, s0 = 210;
 		const s1 = s0 * (1 + frac * MAG);
 		const dAcm2 = 1e4 * 2 * frac;
-		figure = expansionWrap(/* @__PURE__ */ jsxs("svg", {
-			viewBox: `0 0 ${W} ${H}`,
-			width: "100%",
-			role: "img",
-			"aria-label": `Plate area grows by ${dAcm2.toFixed(1)} square centimetres`,
+		figure = expansionWrap(/* @__PURE__ */ jsxs(Figure, {
+			viewBox: [W, H],
+			domain: "physics",
+			label: `Plate area grows by ${dAcm2.toFixed(1)} square centimetres`,
 			children: [
 				/* @__PURE__ */ jsx("rect", {
 					x: cx - s0 / 2,
@@ -211,17 +221,20 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 					fill: "var(--stage-good)",
 					children: "↕"
 				}),
-				/* @__PURE__ */ jsxs("text", {
+				/* @__PURE__ */ jsx(DiagramLabel, {
 					x: cx,
 					y: cy - s1 / 2 - 12,
-					textAnchor: "middle",
-					fontSize: 11,
-					fill: "var(--stage-muted)",
-					children: [
-						"drawing ×",
-						MAG,
-						", grows in BOTH directions (2α)"
-					]
+					text: "width and height expand",
+					tone: "muted",
+					fontSize: 13,
+					fontWeight: 650,
+					maxChars: 48,
+					bounds: {
+						left: 8,
+						right: W - 8,
+						top: 8,
+						bottom: H - 8
+					}
 				})
 			]
 		}));
@@ -229,16 +242,18 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 			tex: "\\Delta A = 2\\alpha\\,A\\,\\Delta T",
 			block: true
 		}), `ΔA = ${dAcm2.toFixed(1)} cm²`, /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			"A plate expands along its width AND its length, so the area coefficient is ",
+			"A plate expands along its width AND its length, so the area coefficient is",
+			" ",
 			/* @__PURE__ */ jsx("strong", {
-				style: { color: "var(--stage-fg)" },
+				className: "physics-emphasis",
 				children: "2α"
 			}),
 			". A 1 m² ",
 			METALS[material].label,
 			" sheet warmed ",
 			dT,
-			" °C gains ",
+			" ",
+			"°C gains ",
 			dAcm2.toFixed(1),
 			" cm²."
 		] }));
@@ -246,11 +261,10 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 		const cx = W / 2, cy = 186, r0 = 96;
 		const r1 = r0 * (1 + frac * MAG);
 		const dVcm3 = 1e3 * 3 * frac;
-		figure = expansionWrap(/* @__PURE__ */ jsxs("svg", {
-			viewBox: `0 0 ${W} ${H}`,
-			width: "100%",
-			role: "img",
-			"aria-label": `Volume grows by ${dVcm3.toFixed(1)} cubic centimetres`,
+		figure = expansionWrap(/* @__PURE__ */ jsxs(Figure, {
+			viewBox: [W, H],
+			domain: "physics",
+			label: `Volume grows by ${dVcm3.toFixed(1)} cubic centimetres`,
 			children: [
 				/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsxs("radialGradient", {
 					id: `${gid}-rim`,
@@ -345,17 +359,20 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 					strokeDasharray: "6 5",
 					opacity: .85
 				}),
-				/* @__PURE__ */ jsxs("text", {
+				/* @__PURE__ */ jsx(DiagramLabel, {
 					x: cx,
 					y: cy - r1 - 14,
-					textAnchor: "middle",
-					fontSize: 11,
-					fill: "var(--stage-muted)",
-					children: [
-						"drawing ×",
-						MAG,
-						", grows in ALL three directions (3α)"
-					]
+					text: "every dimension expands",
+					tone: "muted",
+					fontSize: 13,
+					fontWeight: 650,
+					maxChars: 52,
+					bounds: {
+						left: 8,
+						right: W - 8,
+						top: 8,
+						bottom: H - 8
+					}
 				})
 			]
 		}));
@@ -363,9 +380,10 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 			tex: "\\Delta V = 3\\alpha\\,V\\,\\Delta T",
 			block: true
 		}), `ΔV = ${dVcm3.toFixed(1)} cm³`, /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			"A solid swells in all three directions, so the volume coefficient is ",
+			"A solid swells in all three directions, so the volume coefficient is",
+			" ",
 			/* @__PURE__ */ jsx("strong", {
-				style: { color: "var(--stage-fg)" },
+				className: "physics-emphasis",
 				children: "3α"
 			}),
 			". A 1 L ",
@@ -398,11 +416,10 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 		}).join(" ");
 		const tip = center[N];
 		const contactY = 270, on = tip.y >= contactY - 6;
-		figure = expansionWrap(/* @__PURE__ */ jsxs("svg", {
-			viewBox: `0 0 ${W} ${H}`,
-			width: "100%",
-			role: "img",
-			"aria-label": `Bimetallic strip bent ${(theta * 57).toFixed(0)} degrees, contact ${on ? "closed" : "open"}`,
+		figure = expansionWrap(/* @__PURE__ */ jsxs(Figure, {
+			viewBox: [W, H],
+			domain: "physics",
+			label: `Bimetallic strip bent ${(theta * 57).toFixed(0)} degrees, contact ${on ? "closed" : "open"}`,
 			children: [
 				/* @__PURE__ */ jsx("rect", {
 					x: x0 - 16,
@@ -414,7 +431,7 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 				/* @__PURE__ */ jsx("polyline", {
 					points: off(1),
 					fill: "none",
-					stroke: "#c9912f",
+					stroke: HUE.warn,
 					strokeWidth: thick,
 					strokeLinecap: "round"
 				}),
@@ -441,29 +458,37 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 					stroke: "var(--stage-metal)",
 					strokeWidth: 2
 				}),
-				/* @__PURE__ */ jsx("text", {
+				/* @__PURE__ */ jsx(DiagramLabel, {
 					x: tip.x + 16,
 					y: 274,
+					text: on ? "ON" : "off",
+					tone: on ? "good" : "muted",
+					anchor: "start",
 					fontSize: 12,
 					fontWeight: 800,
-					fill: on ? "var(--stage-good)" : "var(--stage-muted)",
-					children: on ? "ON" : "off"
+					bounds: {
+						left: 8,
+						right: W - 8,
+						top: 8,
+						bottom: H - 8
+					}
 				}),
 				/* @__PURE__ */ jsxs("g", {
-					fontSize: 11,
+					fontSize: 13,
+					fontWeight: 650,
 					children: [
 						/* @__PURE__ */ jsx("rect", {
 							x: 470,
 							y: 70,
 							width: 12,
 							height: 12,
-							fill: "#c9912f"
+							fill: HUE.warn
 						}),
-						/* @__PURE__ */ jsx("text", {
+						/* @__PURE__ */ jsx(DiagramLabel, {
 							x: 488,
 							y: 80,
-							fill: "var(--stage-fg)",
-							children: "brass (α high), outside"
+							text: "brass · outer layer",
+							anchor: "start"
 						}),
 						/* @__PURE__ */ jsx("rect", {
 							x: 470,
@@ -472,11 +497,11 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 							height: 12,
 							fill: "color-mix(in oklab, var(--stage-metal) 70%, var(--stage-fg))"
 						}),
-						/* @__PURE__ */ jsx("text", {
+						/* @__PURE__ */ jsx(DiagramLabel, {
 							x: 488,
 							y: 100,
-							fill: "var(--stage-fg)",
-							children: "steel (α low), inside"
+							text: "steel · inner layer",
+							anchor: "start"
 						})
 					]
 				})
@@ -486,67 +511,62 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 			tex: "\\text{brass } \\alpha > \\text{steel } \\alpha",
 			block: true
 		}), on ? "contact CLOSED" : "contact open", /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			"Brass expands more than steel, so when heated it must take the ",
+			"Brass expands more than steel, so when heated it must take the",
+			" ",
 			/* @__PURE__ */ jsx("strong", {
-				style: { color: "var(--stage-fg)" },
+				className: "physics-emphasis",
 				children: "longer, outer"
 			}),
-			" edge of the curve, the strip bends toward the steel. Drag the temperature up until it closes the contact: that's how a ",
+			" edge of the curve, the strip bends toward the steel. Drag the temperature up until it closes the contact: that's how a",
+			" ",
 			/* @__PURE__ */ jsx("strong", {
-				style: { color: "var(--stage-fg)" },
+				className: "physics-emphasis",
 				children: "thermostat"
 			}),
 			" works."
 		] }));
 	}
-	const controls = /* @__PURE__ */ jsxs("div", {
-		style: {
-			display: "grid",
-			gap: 10
-		},
-		children: [/* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(Field, {
 			label: "what expands",
-			children: /* @__PURE__ */ jsxs("span", {
-				className: "lab-field-row",
-				children: [
-					/* @__PURE__ */ jsx(Chip, {
-						selected: mode === "length",
-						onClick: () => setMode("length"),
-						children: "length"
-					}),
-					/* @__PURE__ */ jsx(Chip, {
-						selected: mode === "area",
-						onClick: () => setMode("area"),
-						children: "area"
-					}),
-					/* @__PURE__ */ jsx(Chip, {
-						selected: mode === "volume",
-						onClick: () => setMode("volume"),
-						children: "volume"
-					}),
-					/* @__PURE__ */ jsx(Chip, {
-						selected: mode === "bimetallic",
-						onClick: () => setMode("bimetallic"),
-						children: "bimetallic strip"
-					})
+			children: /* @__PURE__ */ jsx(ActivitySelect, {
+				ariaLabel: "what expands",
+				value: mode,
+				onChange: setMode,
+				options: [
+					{
+						value: "length",
+						label: "Length"
+					},
+					{
+						value: "area",
+						label: "Area"
+					},
+					{
+						value: "volume",
+						label: "Volume"
+					},
+					{
+						value: "bimetallic",
+						label: "Bimetal strip"
+					}
 				]
 			})
-		}) }), /* @__PURE__ */ jsxs(ControlBar, { children: [mode !== "bimetallic" && /* @__PURE__ */ jsx(Field, {
+		}),
+		mode !== "bimetallic" && /* @__PURE__ */ jsx(Field, {
 			label: "material",
-			children: /* @__PURE__ */ jsx("span", {
-				className: "lab-field-row",
-				children: Object.entries(METALS).map(([key, m]) => /* @__PURE__ */ jsxs(Chip, {
-					selected: material === key,
-					onClick: () => setMaterial(key),
-					children: [
-						m.label,
-						" (α=",
-						(m.a * 1e6).toFixed(1),
-						"×10⁻⁶)"
-					]
-				}, key))
+			value: `α ${(a * 1e6).toFixed(1)} × 10⁻⁶ /°C`,
+			children: /* @__PURE__ */ jsx(ActivitySelect, {
+				ariaLabel: "material",
+				value: material,
+				onChange: setMaterial,
+				options: Object.entries(METALS).map(([key, m]) => ({
+					value: key,
+					label: m.label
+				}))
 			})
-		}), /* @__PURE__ */ jsx(Field, {
+		}),
+		/* @__PURE__ */ jsx(Field, {
 			label: "temperature rise ΔT",
 			value: `+${dT} °C`,
 			children: /* @__PURE__ */ jsx(Slider, {
@@ -557,49 +577,61 @@ function ThermalExpansionLab({ mode: mode0 = "length", title = "Thermal expansio
 				onChange: setDT,
 				ariaLabel: "temperature rise (Celsius)"
 			})
-		})] })]
-	});
-	return /* @__PURE__ */ jsx(LabFrame, {
+		})
+	] });
+	const reset = () => {
+		setMode(mode0);
+		setMaterial("aluminium");
+		setDT(100);
+	};
+	return /* @__PURE__ */ jsx(ThermalActivity, {
+		activity,
+		className: "physics-expansion",
 		title,
 		prompt,
-		objectives,
-		aside,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("strong", { children: mode === "bimetallic" ? "Thermostat strip" : `${mode} expansion` }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				"ΔT +",
+				dT,
+				" °C"
+			] }),
+			/* @__PURE__ */ jsx("span", { children: mode === "bimetallic" ? "brass + steel" : METALS[material].label })
+		] }),
+		figure,
+		instruments: aside,
 		controls,
+		feedback: "The drawing magnifies a very small physical change. The numerical result remains the true expansion, so scale and direction stay explicit.",
+		objectives,
+		transport: /* @__PURE__ */ jsx(ResetTransport, {
+			onReset: reset,
+			state: mode,
+			detail: `ΔT +${dT} °C`,
+			resetLabel: "Reset thermal expansion"
+		}),
 		controlConfig,
-		children: figure
+		canvasLabel: "Magnified thermal expansion model",
+		inspectorLabel: "Expansion equation, result, and material controls"
 	});
 }
 function expansionWrap(svg) {
-	return /* @__PURE__ */ jsx("div", {
-		style: {
-			borderRadius: 14,
-			overflow: "hidden",
-			background: "var(--stage-bg)",
-			border: "1px solid var(--stage-grid)"
-		},
+	return /* @__PURE__ */ jsx(SceneSurface, {
+		className: "physics-expansion-scene",
 		children: svg
 	});
 }
 function expansionAside(formula, result, note) {
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Callout, {
-		tone: "result",
-		children: /* @__PURE__ */ jsx("span", {
-			style: {
-				fontVariantNumeric: "tabular-nums",
-				fontWeight: 800,
-				fontSize: 16
-			},
-			children: result
-		})
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "physics-probe",
+		children: [
+			/* @__PURE__ */ jsx("span", { children: "True expansion" }),
+			/* @__PURE__ */ jsx("strong", { children: result }),
+			/* @__PURE__ */ jsxs("small", { children: ["Drawing magnified ×", MAG] })
+		]
 	}), /* @__PURE__ */ jsxs("div", {
-		style: {
-			display: "grid",
-			gap: 8,
-			padding: "8px 2px 0",
-			fontSize: 13
-		},
+		className: "physics-thermal-model",
 		children: [formula, /* @__PURE__ */ jsx("span", {
-			style: { color: "var(--stage-muted)" },
+			className: "physics-explain",
 			children: note
 		})]
 	})] });

package/dist/physics/exponential/asset.mjs

@@ -116,13 +116,13 @@ function chart(P, m, decay, maxV, sy, _sx, frame, curve, tx0, tx1, ty, halfLife,
 		(() => {
 			const [x, y] = P(90, 290);
 			return /* @__PURE__ */ jsx("text", {
+				className: "physics-svg-numeric",
 				x,
 				y,
 				textAnchor: "middle",
 				fontSize: 24,
 				fontWeight: 800,
 				fill: "var(--stage-accent)",
-				style: { fontVariantNumeric: "tabular-nums" },
 				children: valStr
 			});
 		})(),
@@ -204,7 +204,8 @@ function chart(P, m, decay, maxV, sy, _sx, frame, curve, tx0, tx1, ty, halfLife,
 				fill: "var(--stage-muted)",
 				children: [
 					decay ? `half-life ≈ ${halfLife.toFixed(1)} s, each one halves what's left` : `cooling toward room temp · τ ≈ ${m.tau.toFixed(1)} s`,
-					" · t = ",
+					" ",
+					"· t = ",
 					m.tSec.toFixed(1),
 					" s"
 				]