@classytic/labs 0.3.0 → 0.4.0

package/dist/physics/stress-strain/preset.mjs

@@ -1,16 +1,18 @@
 'use client';
 
 import { Tex } from "../../core/tex.mjs";
-import { ActivitySelect, Slider } from "../../kit/controls.mjs";
+import { ActionButton, ActivitySelect, Segmented, Slider } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
 import { Field, Readout, Stat, StatList } from "../../kit/frame.mjs";
+import { withAuthoredObjectives } from "../../kit/activity-authoring.mjs";
 import { AuthoredActivityRuntime, AuthoredMetricGate } from "../../kit/authored-activity-runtime.mjs";
-import { Figure, HUE, fmt } from "../../kit/figure/figure.mjs";
+import { Figure, HUE, STROKE, fmt } from "../../kit/figure/figure.mjs";
 import { FigText } from "../../kit/figure/text.mjs";
 import { Block } from "../../kit/figure/body.mjs";
 import { Arrow } from "../../kit/figure/beam.mjs";
 import { Area, Curve, Guide, Marker, PlotFrame, scale } from "../../kit/figure/plot.mjs";
 import { MATERIALS, limitStrain, material, plotStrainMax, plotStressMax, stressStrainCurve, wireState } from "./core.mjs";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/physics/stress-strain/preset.tsx
@@ -238,14 +240,39 @@ const STRESS_STRAIN_ACTIVITY = {
 		}
 	]
 };
-function StressStrainLab({ material: material0 = "steel", diameterMm: diameter0 = .6, lengthM: length0 = 2, loadN: load0 = 40, graph: graph0 = "force-extension", loadAxisN = 100, extensionAxisMm = 5, title = "Stress, strain and the Young modulus", prompt = "A wire stretches when you load it. The force against extension graph describes this one wire. The stress against strain graph describes the material it is made of. Change the wire and see which graph moves.", objectives, activity = "stress-strain" } = {}) {
+function StressStrainLab({ material: material0 = "steel", diameterMm: diameter0 = .6, lengthM: length0 = 2, loadN: load0 = 40, graph: graph0 = "force-extension", loadAxisN = 100, extensionAxisMm = 5, title = "Stress, strain and the Young modulus", prompt = "A wire stretches when you load it. The force against extension graph describes this one wire. The stress against strain graph describes the material it is made of. Change the wire and see which graph moves.", objectives, activity = false } = {}) {
 	const activityId = typeof activity === "string" ? activity : "stress-strain";
-	const authoredActivity = typeof activity === "string" ? STRESS_STRAIN_ACTIVITY : activity;
+	const authoredActivity = typeof activity === "string" || !activity ? STRESS_STRAIN_ACTIVITY : activity;
 	const [materialId, setMaterialId] = useState(material0);
 	const [diameter, setDiameter] = useState(diameter0);
 	const [length, setLength] = useState(length0);
 	const [load, setLoad] = useState(load0);
 	const [graph, setGraph] = useState(graph0);
+	const [showDimensions, setShowDimensions] = useState(false);
+	const [isDraggingLoad, setIsDraggingLoad] = useState(false);
+	const dragStartRef = useRef(null);
+	const handlePointerDown = (e) => {
+		try {
+			e.currentTarget.setPointerCapture(e.pointerId);
+		} catch {}
+		dragStartRef.current = {
+			startY: e.clientY,
+			startLoad: load
+		};
+		setIsDraggingLoad(true);
+	};
+	const handlePointerMove = (e) => {
+		if (!dragStartRef.current) return;
+		const dy = e.clientY - dragStartRef.current.startY;
+		const nextLoad = clamp(Math.round(dragStartRef.current.startLoad + dy * .7), 0, loadAxisN);
+		setLoad(nextLoad);
+	};
+	const handlePointerUp = (e) => {
+		if (dragStartRef.current) {
+			dragStartRef.current = null;
+			setIsDraggingLoad(false);
+		}
+	};
 	const mat = material(materialId);
 	const state = wireState({
 		material: mat,
@@ -278,8 +305,8 @@ function StressStrainLab({ material: material0 = "steel", diameterMm: diameter0
 	});
 	const limitOnPlot = limitData[0] <= xMax && limitData[1] <= yMax;
 	const limitPx = px(limitData);
-	const wirePx = 2 + (clamp(diameter, DIA_MIN, DIA_MAX) - DIA_MIN) / (DIA_MAX - DIA_MIN) * 8;
-	const lengthPx = 100 + (clamp(length, LEN_MIN, LEN_MAX) - LEN_MIN) / (LEN_MAX - LEN_MIN) * 70;
+	const wirePx = 2 + (clamp(diameter, DIA_MIN, DIA_MAX) - DIA_MIN) / 1.9 * 8;
+	const lengthPx = 100 + (clamp(length, LEN_MIN, LEN_MAX) - LEN_MIN) / 2.5 * 70;
 	const restBottom = WIRE_TOP + lengthPx;
 	const extPx = clamp(state.extensionM * 1e3 * 6, 0, 26);
 	const fallenY = restBottom + 26;
@@ -364,7 +391,7 @@ function StressStrainLab({ material: material0 = "steel", diameterMm: diameter0
 					radius: 1
 				}),
 				/* @__PURE__ */ jsx(Guide, {
-					x1: WIRE_X - 64,
+					x1: 88,
 					y1: restBottom,
 					x2: 216,
 					y2: restBottom,
@@ -402,26 +429,72 @@ function StressStrainLab({ material: material0 = "steel", diameterMm: diameter0
 					" mm"
 				]
 			}),
-			/* @__PURE__ */ jsx(Block, {
-				x: WIRE_X - 31,
-				y: loadTop,
-				w: 62,
-				h: 30,
-				color: HUE[3],
-				label: "load",
-				radius: 4
+			/* @__PURE__ */ jsxs("g", {
+				style: {
+					cursor: state.broken ? "default" : isDraggingLoad ? "ns-resize" : "grab",
+					touchAction: "none"
+				},
+				onPointerDown: state.broken ? void 0 : handlePointerDown,
+				onPointerMove: state.broken ? void 0 : handlePointerMove,
+				onPointerUp: state.broken ? void 0 : handlePointerUp,
+				onPointerCancel: state.broken ? void 0 : handlePointerUp,
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						x: 108,
+						y: loadTop - 8,
+						width: 88,
+						height: 52,
+						fill: "transparent"
+					}),
+					/* @__PURE__ */ jsx(Block, {
+						x: 118,
+						y: loadTop,
+						w: 68,
+						h: 32,
+						color: HUE[3],
+						radius: 4,
+						active: isDraggingLoad
+					}),
+					/* @__PURE__ */ jsx("line", {
+						x1: 132,
+						y1: loadTop + 11,
+						x2: 172,
+						y2: loadTop + 11,
+						stroke: "var(--fig-ink)",
+						strokeWidth: STROKE.hair,
+						opacity: .3
+					}),
+					/* @__PURE__ */ jsx("line", {
+						x1: 132,
+						y1: loadTop + 21,
+						x2: 172,
+						y2: loadTop + 21,
+						stroke: "var(--fig-ink)",
+						strokeWidth: STROKE.hair,
+						opacity: .3
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: WIRE_X,
+						y: loadTop + 16,
+						anchor: "middle",
+						baseline: "middle",
+						size: "note",
+						tone: "inverse",
+						children: state.broken ? "snapped" : isDraggingLoad ? `${num(load)} N` : "↕ PULL"
+					})
+				]
 			}),
 			/* @__PURE__ */ jsx(Arrow, {
 				x1: WIRE_X,
-				y1: loadTop + 30,
+				y1: loadTop + 32,
 				x2: WIRE_X,
-				y2: loadTop + 64,
+				y2: loadTop + 62,
 				color: HUE.hot,
 				weight: "edge"
 			}),
 			/* @__PURE__ */ jsxs(FigText, {
 				x: 166,
-				y: loadTop + 52,
+				y: loadTop + 50,
 				baseline: "middle",
 				size: "note",
 				tone: "hot",
@@ -493,6 +566,53 @@ function StressStrainLab({ material: material0 = "steel", diameterMm: diameter0
 		]
 	});
 	const evidence = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "lab-hud-toolbar",
+			style: {
+				border: 0,
+				padding: 0,
+				background: "transparent",
+				boxShadow: "none"
+			},
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "lab-hud-badge",
+					children: [/* @__PURE__ */ jsx("span", { children: isStrain ? "Young E:" : "Stiffness k:" }), /* @__PURE__ */ jsx("strong", { children: isStrain ? `${num(mat.E / 1e9)} GPa` : `${sciText(state.springConstantNPerM)} N/m` })]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "lab-hud-badge",
+					children: [
+						/* @__PURE__ */ jsx("span", { children: "σ:" }),
+						" ",
+						/* @__PURE__ */ jsxs("strong", { children: [num(state.stressPa / 1e6), " MPa"] })
+					]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "lab-hud-badge",
+					children: [
+						/* @__PURE__ */ jsx("span", { children: "ε:" }),
+						" ",
+						/* @__PURE__ */ jsx("strong", { children: sciText(state.strain) })
+					]
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					className: "lab-hud-badge",
+					children: [
+						/* @__PURE__ */ jsx("span", { children: "x:" }),
+						" ",
+						/* @__PURE__ */ jsxs("strong", { children: [num(state.extensionM * 1e3), " mm"] })
+					]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "lab-hud-badge",
+					style: {
+						color: state.broken ? "var(--lab-danger)" : state.beyondLimit ? "var(--lab-warn)" : "var(--lab-good)",
+						borderColor: state.broken ? "var(--lab-danger)" : state.beyondLimit ? "var(--lab-warn)" : "var(--lab-good)"
+					},
+					children: state.broken ? "💥 Snapped" : state.beyondLimit ? "⚠️ Plastic" : "✓ Elastic"
+				})
+			]
+		}),
 		/* @__PURE__ */ jsx(Readout, {
 			label: "gradient of this graph",
 			value: isStrain ? `E = ${num(mat.E / 1e9)} GPa` : `k = ${sciText(state.springConstantNPerM)} N/m`,
@@ -546,78 +666,118 @@ function StressStrainLab({ material: material0 = "steel", diameterMm: diameter0
 			] })
 		})
 	] });
-	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsx(Field, {
-			label: "material",
-			children: /* @__PURE__ */ jsx(ActivitySelect, {
-				ariaLabel: "material",
-				value: materialId,
-				onChange: setMaterialId,
-				options: MATERIALS.map((m) => ({
-					value: m.id,
-					label: m.label
-				}))
-			})
-		}),
-		/* @__PURE__ */ jsx(Field, {
-			label: "graph",
-			children: /* @__PURE__ */ jsx(ActivitySelect, {
-				ariaLabel: "graph",
-				value: graph,
-				onChange: setGraph,
-				options: [{
-					value: "force-extension",
-					label: "force and extension"
-				}, {
-					value: "stress-strain",
-					label: "stress and strain"
-				}]
-			})
-		}),
-		/* @__PURE__ */ jsx(Field, {
-			label: "diameter",
-			value: `${diameter.toFixed(2)} mm`,
-			children: /* @__PURE__ */ jsx(Slider, {
-				value: diameter,
-				min: DIA_MIN,
-				max: DIA_MAX,
-				step: .05,
-				onChange: setDiameter,
-				ariaLabel: "wire diameter in millimetres"
-			})
-		}),
-		/* @__PURE__ */ jsx(Field, {
-			label: "original length",
-			value: `${length.toFixed(1)} m`,
-			children: /* @__PURE__ */ jsx(Slider, {
-				value: length,
-				min: LEN_MIN,
-				max: LEN_MAX,
-				step: .1,
-				onChange: setLength,
-				ariaLabel: "original length in metres"
-			})
-		}),
-		/* @__PURE__ */ jsx(Field, {
-			label: "load",
-			value: `${num(load)} N`,
-			children: /* @__PURE__ */ jsx(Slider, {
-				value: load,
-				min: 0,
-				max: loadAxisN,
-				step: 1,
-				onChange: setLoad,
-				ariaLabel: "load in newtons"
-			})
-		})
-	] });
-	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+	const controls = /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 6,
+			width: "100%",
+			gridColumn: "1 / -1"
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "lab-hud-toolbar",
+			role: "toolbar",
+			"aria-label": "Simulation Controls",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "lab-hud-group",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "lab-hud-badge",
+						children: "Material"
+					}), /* @__PURE__ */ jsx(ActivitySelect, {
+						value: materialId,
+						onChange: (m) => setMaterialId(m),
+						options: MATERIALS.map((m) => ({
+							value: m.id,
+							label: m.label
+						})),
+						ariaLabel: "Material selection"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "lab-hud-group",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "lab-hud-badge",
+						children: "Plot"
+					}), /* @__PURE__ */ jsx(Segmented, {
+						value: graph,
+						onChange: (g) => setGraph(g),
+						options: [{
+							value: "force-extension",
+							label: "F – x (Wire)"
+						}, {
+							value: "stress-strain",
+							label: "σ – ε (Material)"
+						}],
+						ariaLabel: "Graph mode"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "lab-hud-group",
+					style: {
+						flex: "1 1 auto",
+						minWidth: 140
+					},
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "lab-hud-badge",
+						children: ["Load: ", /* @__PURE__ */ jsxs("strong", { children: [num(load), " N"] })]
+					}), /* @__PURE__ */ jsx(Slider, {
+						value: load,
+						min: 0,
+						max: loadAxisN,
+						step: 1,
+						onChange: setLoad,
+						ariaLabel: "Load in newtons"
+					})]
+				}),
+				/* @__PURE__ */ jsxs(ActionButton, {
+					className: `lab-btn-ghost lab-hud-drawer-toggle ${showDimensions ? "open" : ""}`,
+					onClick: () => setShowDimensions((prev) => !prev),
+					"aria-expanded": showDimensions,
+					children: [/* @__PURE__ */ jsxs("span", { children: [
+						"Dimensions (",
+						diameter.toFixed(2),
+						" mm, ",
+						length.toFixed(1),
+						" m)"
+					] }), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: showDimensions ? "▲" : "▼"
+					})]
+				})
+			]
+		}), showDimensions && /* @__PURE__ */ jsxs("div", {
+			className: "lab-hud-drawer",
+			children: [/* @__PURE__ */ jsx(Field, {
+				label: "diameter d",
+				value: `${diameter.toFixed(2)} mm`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: diameter,
+					min: DIA_MIN,
+					max: DIA_MAX,
+					step: .05,
+					onChange: setDiameter,
+					ariaLabel: "wire diameter in millimetres"
+				})
+			}), /* @__PURE__ */ jsx(Field, {
+				label: "original length L",
+				value: `${length.toFixed(1)} m`,
+				children: /* @__PURE__ */ jsx(Slider, {
+					value: length,
+					min: LEN_MIN,
+					max: LEN_MAX,
+					step: .1,
+					onChange: setLength,
+					ariaLabel: "original length in metres"
+				})
+			})]
+		})]
+	});
+	if (activity) return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
 		className: "physics-stress-strain",
 		focusLayout: "immersive",
-		activity: {
-			...authoredActivity,
-			objectives: objectives ?? authoredActivity.objectives
-		},
+		presentation: "investigation",
+		activity: withAuthoredObjectives(authoredActivity, objectives),
 		activityId,
 		eyebrow: "Deformation of solids",
 		title,
@@ -677,6 +837,42 @@ function StressStrainLab({ material: material0 = "steel", diameterMm: diameter0
 			figure
 		] })
 	});
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "physics-stress-strain",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Deformation of Solids",
+				title,
+				description: prompt
+			}), /* @__PURE__ */ jsx(Activity.Status, { children: /* @__PURE__ */ jsxs("span", {
+				className: "lab-status-line",
+				children: [
+					/* @__PURE__ */ jsx("span", { children: mat.label }),
+					/* @__PURE__ */ jsx("span", { children: "·" }),
+					/* @__PURE__ */ jsxs("span", { children: [
+						"x ",
+						num(state.extensionM * 1e3),
+						" mm"
+					] }),
+					/* @__PURE__ */ jsx("span", { children: "·" }),
+					/* @__PURE__ */ jsx("span", { children: state.broken ? "snapped" : state.beyondLimit ? "past the limit" : "proportional" })
+				]
+			}) })] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [
+				/* @__PURE__ */ jsx(Activity.Canvas, {
+					"aria-label": typeof prompt === "string" ? prompt : void 0,
+					children: figure
+				}),
+				/* @__PURE__ */ jsx(Activity.Dock, { children: controls }),
+				/* @__PURE__ */ jsx(Activity.Inspector, {
+					label: "Explore evidence",
+					defaultOpen: false,
+					children: evidence
+				})
+			] }),
+			/* @__PURE__ */ jsx(Activity.Feedback, { message: isStrain ? "Dividing the force by the area and the extension by the original length removes the size of the wire. Only the material is left, so this line holds still while you change the diameter and the length. Its gradient is the Young modulus E." : "This line belongs to one wire. A thicker or shorter wire is stiffer, so the line swings up. The gradient is k = A E / L, and A and L are both yours to change." })
+		]
+	});
 }
 
 //#endregion

package/dist/physics/suspension/index.d.mts

@@ -0,0 +1,2 @@
+import { CarSuspensionLab, CarSuspensionProps, RoadMode } from "./preset.mjs";
+export { CarSuspensionLab, type CarSuspensionProps, type RoadMode };

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

@@ -0,0 +1,26 @@
+import { AuthoredActivity } from "../../kit/activity-authoring.mjs";
+import { ControlConfig } from "../../kit/frame.mjs";
+import { ReactNode } from "react";
+//#region src/physics/suspension/preset.d.ts
+type RoadMode = 'bump' | 'washboard';
+interface CarSuspensionProps {
+  mode?: RoadMode;
+  /** One corner's share of the body, kg. */
+  load?: number;
+  /** Suspension spring stiffness, N/m. */
+  stiffness?: number;
+  /** Damping ratio. 0.3 is a road car; 1 is critical. */
+  damping?: number;
+  /** Road speed on the joints, km/h. */
+  speed?: number;
+  /** Spacing between road joints, metres. */
+  spacing?: number;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+  controlConfig?: ControlConfig;
+  activity?: string | AuthoredActivity | false;
+}
+declare function CarSuspensionLab({ mode, load, stiffness, damping, speed, spacing, title, prompt, objectives, controlConfig, activity }: CarSuspensionProps): ReactNode;
+//#endregion
+export { CarSuspensionLab, CarSuspensionProps, RoadMode };