@classytic/labs 0.2.0 → 0.3.0

package/dist/chem/battery.mjs

@@ -3,9 +3,10 @@
 import { clamp, num } from "../core/util.mjs";
 import { Tex as Tex$1 } from "../core/tex.mjs";
 import { Slider } from "../kit/controls.mjs";
-import { Callout, ControlBar, Field, LabFrame } from "../kit/frame.mjs";
-import { ResistorBox } from "../kit/diagram.mjs";
+import { Field, SceneViewport, Stat, StatList } from "../kit/frame.mjs";
+import { AuthoredActivityRuntime } from "../kit/authored-activity-runtime.mjs";
 import { PlayWrap, usePlayGate } from "../kit/play.mjs";
+import { ResistorBox } from "../kit/diagram/circuit-box.mjs";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Dot, Label, Polygon, Segment, Stage, useFrameLoop } from "@classytic/stage";
@@ -20,6 +21,33 @@ import { Dot, Label, Polygon, Segment, Stage, useFrameLoop } from "@classytic/st
 * Now on the @classytic/stage engine (SVG schematic + flowing electrons,
 * accessible, themed).
 */
+const ACTIVITY = {
+	pattern: "investigation",
+	title: "Galvanic cell: electrons on the move",
+	objectives: ["Trace electrons from anode to cathode", "Relate resistance to current"],
+	steps: [
+		{
+			id: "observe",
+			phase: "observe",
+			title: "Trace electron flow",
+			lead: "Follow electrons from oxidation at the anode to reduction at the cathode.",
+			reveal: ["model"]
+		},
+		{
+			id: "act",
+			phase: "act",
+			title: "Change the load",
+			lead: "Change resistance and compare current while EMF stays fixed.",
+			controls: true
+		},
+		{
+			id: "explain",
+			phase: "explain",
+			title: "Connect the half-reactions",
+			lead: "Use the electrode labels and current as evidence."
+		}
+	]
+};
 const VIEW = {
 	xMin: 0,
 	xMax: 100,
@@ -27,6 +55,7 @@ const VIEW = {
 	yMax: 60
 };
 const LX = 26, RX = 74, BBOT = 6, BTOP = 30, ETOP = 44, WIRE = 53;
+const BRIDGE_Y = 34;
 function rect(cx, halfW, y0, y1) {
 	return [
 		{
@@ -84,7 +113,7 @@ function onWire(u) {
 	}
 	return pts[3];
 }
-function Battery({ emf, title = "Galvanic cell: electrons on the move", height = 320 } = {}) {
+function Battery({ emf, title = "Galvanic cell: electrons on the move", height = 320, activity = ACTIVITY } = {}) {
 	const [E, setE] = useState(clamp(num(emf, 1.1), .1, 5));
 	const [load, setLoad] = useState(10);
 	const gate = usePlayGate();
@@ -98,168 +127,260 @@ function Battery({ emf, title = "Galvanic cell: electrons on the move", height =
 	const speed = clamp(current * .12, .02, .4);
 	const figure = /* @__PURE__ */ jsx(PlayWrap, {
 		gate,
-		children: /* @__PURE__ */ jsxs(Stage, {
-			view: VIEW,
-			height,
-			preserveAspect: false,
-			ariaLabel: `Galvanic cell, ${E.toFixed(2)} V, ${(current * 1e3).toFixed(0)} mA`,
-			children: [
-				/* @__PURE__ */ jsx(Polygon, {
-					points: rect(LX, 16, BBOT, BTOP),
-					color: "var(--stage-fg)",
-					fill: "var(--stage-accent)",
-					fillOpacity: .16,
-					weight: 1.5
-				}),
-				/* @__PURE__ */ jsx(Polygon, {
-					points: rect(RX, 16, BBOT, BTOP),
-					color: "var(--stage-fg)",
-					fill: "var(--stage-accent-2)",
-					fillOpacity: .16,
-					weight: 1.5
-				}),
-				/* @__PURE__ */ jsx(Segment, {
-					from: {
-						x: LX - 16,
-						y: BTOP - 1.2
-					},
-					to: {
-						x: 42,
-						y: BTOP - 1.2
-					},
-					color: "var(--stage-accent)",
-					opacity: .7,
-					weight: 1.5
-				}),
-				/* @__PURE__ */ jsx(Segment, {
-					from: {
-						x: RX - 16,
-						y: BTOP - 1.2
-					},
-					to: {
-						x: 90,
-						y: BTOP - 1.2
-					},
-					color: "var(--stage-accent-2)",
-					opacity: .7,
-					weight: 1.5
-				}),
-				/* @__PURE__ */ jsx(Label, {
-					x: LX,
-					y: BBOT,
-					text: "Zn²⁺",
-					color: "var(--stage-fg)",
-					size: 11,
-					dy: -8
-				}),
-				/* @__PURE__ */ jsx(Label, {
-					x: RX,
-					y: BBOT,
-					text: "Cu²⁺",
-					color: "var(--stage-fg)",
-					size: 11,
-					dy: -8
-				}),
-				/* @__PURE__ */ jsx(Polygon, {
-					points: rect(LX, 1.4, 16, ETOP),
-					color: "none",
-					fill: "var(--stage-fg)",
-					fillOpacity: .6,
-					weight: 0
-				}),
-				/* @__PURE__ */ jsx(Polygon, {
-					points: rect(RX, 1.4, 16, ETOP),
-					color: "none",
-					fill: "var(--stage-fg)",
-					fillOpacity: .6,
-					weight: 0
-				}),
-				/* @__PURE__ */ jsx(Label, {
-					x: LX,
-					y: ETOP,
-					text: "Zn (–) anode",
-					color: "var(--stage-fg)",
-					size: 11,
-					dy: -22
-				}),
-				/* @__PURE__ */ jsx(Label, {
-					x: RX,
-					y: ETOP,
-					text: "Cu (+) cathode",
-					color: "var(--stage-fg)",
-					size: 11,
-					dy: -22
-				}),
-				/* @__PURE__ */ jsx(Segment, {
-					from: {
-						x: LX,
-						y: ETOP
-					},
-					to: {
+		children: /* @__PURE__ */ jsx(SceneViewport, {
+			className: "chem-scene chem-battery-scene",
+			size: "wide",
+			overflow: "scroll",
+			label: "Zinc–copper galvanic cell. Pan horizontally on a narrow screen.",
+			children: /* @__PURE__ */ jsxs(Stage, {
+				view: VIEW,
+				height,
+				preserveAspect: false,
+				ariaLabel: `Zinc copper galvanic cell with a salt bridge, ${E.toFixed(2)} volts, ideal load current ${(current * 1e3).toFixed(0)} milliamps`,
+				children: [
+					/* @__PURE__ */ jsx(Polygon, {
+						points: rect(LX, 16, BBOT, BTOP),
+						color: "var(--stage-fg)",
+						fill: "var(--stage-accent)",
+						fillOpacity: .16,
+						weight: 1.5
+					}),
+					/* @__PURE__ */ jsx(Polygon, {
+						points: rect(RX, 16, BBOT, BTOP),
+						color: "var(--stage-fg)",
+						fill: "var(--stage-accent-2)",
+						fillOpacity: .16,
+						weight: 1.5
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: LX - 16,
+							y: BTOP - 1.2
+						},
+						to: {
+							x: 42,
+							y: BTOP - 1.2
+						},
+						color: "var(--stage-accent)",
+						opacity: .7,
+						weight: 1.5
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: RX - 16,
+							y: BTOP - 1.2
+						},
+						to: {
+							x: 90,
+							y: BTOP - 1.2
+						},
+						color: "var(--stage-accent-2)",
+						opacity: .7,
+						weight: 1.5
+					}),
+					/* @__PURE__ */ jsx(Label, {
 						x: LX,
-						y: WIRE
-					},
-					color: "var(--stage-fg)",
-					opacity: .5,
-					weight: 2
-				}),
-				/* @__PURE__ */ jsx(Segment, {
-					from: {
-						x: LX,
-						y: WIRE
-					},
-					to: {
-						x: RX,
-						y: WIRE
-					},
-					color: "var(--stage-fg)",
-					opacity: .5,
-					weight: 2
-				}),
-				/* @__PURE__ */ jsx(Segment, {
-					from: {
+						y: BBOT,
+						text: "Zn²⁺",
+						color: "var(--stage-fg)",
+						size: 11,
+						dy: -8
+					}),
+					/* @__PURE__ */ jsx(Label, {
 						x: RX,
-						y: WIRE
-					},
-					to: {
+						y: BBOT,
+						text: "Cu²⁺",
+						color: "var(--stage-fg)",
+						size: 11,
+						dy: -8
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: 36,
+							y: BTOP - 5
+						},
+						to: {
+							x: 36,
+							y: BRIDGE_Y
+						},
+						color: "var(--stage-muted-fg)",
+						weight: 7,
+						opacity: .45
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: 36,
+							y: BRIDGE_Y
+						},
+						to: {
+							x: RX - 10,
+							y: BRIDGE_Y
+						},
+						color: "var(--stage-muted-fg)",
+						weight: 7,
+						opacity: .45
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: RX - 10,
+							y: BRIDGE_Y
+						},
+						to: {
+							x: RX - 10,
+							y: BTOP - 5
+						},
+						color: "var(--stage-muted-fg)",
+						weight: 7,
+						opacity: .45
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: 36,
+							y: BTOP - 5
+						},
+						to: {
+							x: 36,
+							y: BRIDGE_Y
+						},
+						color: "var(--stage-accent-2)",
+						weight: 3.5,
+						opacity: .7
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: 36,
+							y: BRIDGE_Y
+						},
+						to: {
+							x: RX - 10,
+							y: BRIDGE_Y
+						},
+						color: "var(--stage-accent-2)",
+						weight: 3.5,
+						opacity: .7
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: RX - 10,
+							y: BRIDGE_Y
+						},
+						to: {
+							x: RX - 10,
+							y: BTOP - 5
+						},
+						color: "var(--stage-accent-2)",
+						weight: 3.5,
+						opacity: .7
+					}),
+					/* @__PURE__ */ jsx(Label, {
+						x: 50,
+						y: BRIDGE_Y,
+						text: "salt bridge · ion flow",
+						color: "var(--stage-fg)",
+						size: 10,
+						dy: 13
+					}),
+					/* @__PURE__ */ jsx(Polygon, {
+						points: rect(LX, 1.4, 16, ETOP),
+						color: "none",
+						fill: "var(--stage-fg)",
+						fillOpacity: .6,
+						weight: 0
+					}),
+					/* @__PURE__ */ jsx(Polygon, {
+						points: rect(RX, 1.4, 16, ETOP),
+						color: "none",
+						fill: "var(--stage-fg)",
+						fillOpacity: .6,
+						weight: 0
+					}),
+					/* @__PURE__ */ jsx(Label, {
+						x: LX,
+						y: ETOP,
+						text: "Zn (–) anode",
+						color: "var(--stage-fg)",
+						size: 11,
+						dy: -22
+					}),
+					/* @__PURE__ */ jsx(Label, {
 						x: RX,
-						y: ETOP
-					},
-					color: "var(--stage-fg)",
-					opacity: .5,
-					weight: 2
-				}),
-				/* @__PURE__ */ jsx(ResistorBox, {
-					center: {
+						y: ETOP,
+						text: "Cu (+) cathode",
+						color: "var(--stage-fg)",
+						size: 11,
+						dy: -22
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: LX,
+							y: ETOP
+						},
+						to: {
+							x: LX,
+							y: WIRE
+						},
+						color: "var(--stage-fg)",
+						opacity: .5,
+						weight: 2
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: LX,
+							y: WIRE
+						},
+						to: {
+							x: RX,
+							y: WIRE
+						},
+						color: "var(--stage-fg)",
+						opacity: .5,
+						weight: 2
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: RX,
+							y: WIRE
+						},
+						to: {
+							x: RX,
+							y: ETOP
+						},
+						color: "var(--stage-fg)",
+						opacity: .5,
+						weight: 2
+					}),
+					/* @__PURE__ */ jsx(ResistorBox, {
+						center: {
+							x: 50,
+							y: WIRE
+						},
+						w: 14,
+						h: 6,
+						color: "var(--stage-good)",
+						label: `${load}Ω`
+					}),
+					/* @__PURE__ */ jsx(Label, {
 						x: 50,
-						y: WIRE
-					},
-					w: 14,
-					h: 6,
-					color: "var(--stage-good)",
-					label: `${load}Ω`
-				}),
-				/* @__PURE__ */ jsx(Label, {
-					x: 50,
-					y: WIRE,
-					text: "e⁻ →",
-					color: "var(--stage-accent)",
-					size: 12,
-					dy: -16
-				}),
-				Array.from({ length: N_E }, (_, k) => {
-					const p = onWire((t * speed + k / N_E) % 1);
-					return /* @__PURE__ */ jsx(Dot, {
-						x: p.x,
-						y: p.y,
-						r: 3.2,
-						color: "var(--stage-accent)"
-					}, `e-${k}`);
-				})
-			]
+						y: WIRE,
+						text: "e⁻ →",
+						color: "var(--stage-accent)",
+						size: 12,
+						dy: -16
+					}),
+					Array.from({ length: N_E }, (_, k) => {
+						const p = onWire((t * speed + k / N_E) % 1);
+						return /* @__PURE__ */ jsx(Dot, {
+							x: p.x,
+							y: p.y,
+							r: 3.2,
+							color: "var(--stage-accent)"
+						}, `e-${k}`);
+					})
+				]
+			})
 		})
 	});
-	const controls = /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
+	const controls = /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Field, {
 		label: "load",
 		value: `${load} Ω`,
 		children: /* @__PURE__ */ jsx(Slider, {
@@ -268,41 +389,44 @@ function Battery({ emf, title = "Galvanic cell: electrons on the move", height =
 			max: 50,
 			step: 1,
 			onChange: (v) => setLoad(Math.round(v)),
-			ariaLabel: "external load",
-			style: { width: 120 }
+			ariaLabel: "external load"
 		})
 	}) });
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt: "Electrons leave the zinc anode, do work in the load, and arrive at the copper cathode.",
-		aside: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Callout, {
-			tone: "result",
-			children: /* @__PURE__ */ jsxs("span", {
-				style: {
-					display: "grid",
-					gap: 4,
-					fontVariantNumeric: "tabular-nums"
-				},
-				children: [/* @__PURE__ */ jsxs("span", { children: [
-					"EMF ",
-					E.toFixed(2),
-					" V"
-				] }), /* @__PURE__ */ jsxs("span", { children: [
-					"I ",
-					(current * 1e3).toFixed(0),
-					" mA"
-				] })]
+	const aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(StatList, { children: [/* @__PURE__ */ jsx(Stat, {
+		label: "EMF",
+		value: `${E.toFixed(2)} V`
+	}), /* @__PURE__ */ jsx(Stat, {
+		label: "ideal load current I = E/R",
+		value: `${(current * 1e3).toFixed(0)} mA`
+	})] }), /* @__PURE__ */ jsxs("div", {
+		className: "chem-equation-stack",
+		children: [
+			/* @__PURE__ */ jsx(Tex$1, { tex: "\\text{anode: } Zn \\to Zn^{2+} + 2e^-" }),
+			/* @__PURE__ */ jsx(Tex$1, { tex: "\\text{cathode: } Cu^{2+} + 2e^- \\to Cu" }),
+			/* @__PURE__ */ jsx("p", {
+				className: "chem-model-note",
+				children: "The salt bridge completes the ionic circuit. The displayed current is an ideal Ohm's-law value; real cells also have internal resistance and polarization losses."
 			})
-		}), /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				gap: 6,
-				padding: "8px 2px 0",
-				fontSize: 14
-			},
-			children: [/* @__PURE__ */ jsx(Tex$1, { tex: "\\text{anode: } Zn \\to Zn^{2+} + 2e^-" }), /* @__PURE__ */ jsx(Tex$1, { tex: "\\text{cathode: } Cu^{2+} + 2e^- \\to Cu" })]
-		})] }),
+		]
+	})] });
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		focusLayout: "immersive",
+		activity,
+		activityId: "battery",
+		eyebrow: "Electrochemistry",
+		title,
+		description: "Electrons leave the zinc anode, pass through the load, and arrive at the copper cathode while ions cross the salt bridge to keep both half-cells neutral.",
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", { children: [E.toFixed(2), " V"] }), /* @__PURE__ */ jsxs("span", { children: [(current * 1e3).toFixed(0), " mA"] })] }),
+		evidence: aside,
 		controls,
+		observation: /* @__PURE__ */ jsx(Fragment$1, { children: "Increasing load resistance reduces the ideal current; the salt bridge closes the ionic circuit." }),
+		transcript: /* @__PURE__ */ jsxs("p", { children: [
+			"Electrons flow from zinc anode to copper cathode through a ",
+			load,
+			" ohm load while ions move through the salt bridge. The idealized load current is ",
+			(current * 1e3).toFixed(0),
+			" milliamps; internal resistance is omitted."
+		] }),
 		children: figure
 	});
 }

package/dist/chem/bohr-atom.d.mts

@@ -1,3 +1,4 @@
+import { AuthoredActivity } from "../kit/activity-authoring.mjs";
 import { ReactNode } from "react";
 
 //#region src/chem/bohr-atom.d.ts
@@ -6,11 +7,13 @@ interface BohrAtomProps {
   protons?: number | string;
   title?: string;
   height?: number;
+  activity?: AuthoredActivity;
 }
 declare function BohrAtom({
   protons,
   title,
-  height
+  height,
+  activity
 }?: BohrAtomProps): ReactNode;
 //#endregion
 export { BohrAtom, BohrAtomProps };