@classytic/labs 0.3.0 → 0.4.0

package/dist/kit/authored-response.mjs

@@ -18,7 +18,8 @@ function evaluateAuthoredResponse(question, response) {
 }
 /** Standard renderer for the portable authored response contract. */
 function AuthoredResponse({ question, onRespond }) {
-	const [value, setValue] = useState(question.kind === "ordering" ? question.items.map((item) => item.value) : "");
+	const initialValue = question.kind === "ordering" ? question.items.map((item) => item.value) : "";
+	const [value, setValue] = useState(initialValue);
 	const [result, setResult] = useState(void 0);
 	const feedbackId = `lab-response-feedback-${question.id}`;
 	const submit = (event) => {
@@ -31,7 +32,21 @@ function AuthoredResponse({ question, onRespond }) {
 			correct
 		});
 	};
-	const feedback = result === true ? question.explain ?? "Correct." : result === false ? ("tryAgain" in question ? question.tryAgain : void 0) ?? "Not yet. Revisit the evidence and try again." : result === null ? "Response saved. Compare it with the criteria." : null;
+	/**
+	* What the learner is told, and the one place a lab can beat an explainer.
+	*
+	* A generic "not yet" is the same sentence whichever wrong answer was picked, so it carries no
+	* information: the learner already knew they were wrong. A distractor, though, usually encodes a
+	* specific piece of thinking, and naming that thinking is the whole value. `AuthoredChoice` has
+	* carried a `feedback` field the whole time and nothing read it, so every author who wrote one
+	* had it silently dropped.
+	*
+	* The picked choice's own feedback wins when there is one, for a right answer as much as a wrong
+	* one: an author who writes "Yes, and notice it is the DIFFERENCE that matters" means it to be
+	* read. `explain` and `tryAgain` stay as the question-level fallback.
+	*/
+	const pickedFeedback = (!question.kind || question.kind === "choice") && typeof value === "string" ? question.choices.find((choice) => choice.value === value)?.feedback : void 0;
+	const feedback = result === true ? pickedFeedback ?? question.explain ?? "Correct." : result === false ? pickedFeedback ?? ("tryAgain" in question ? question.tryAgain : void 0) ?? "Not yet. Revisit the evidence and try again." : result === null ? "Response saved. Compare it with the criteria." : null;
 	if (!question.kind || question.kind === "choice") {
 		const responseLayout = choiceResponseLayout(question.choices);
 		const choose = (choiceValue) => {

package/dist/kit/celebrate.d.mts

@@ -1,17 +1,12 @@
 import { ReactNode } from "react";
-
 //#region src/kit/celebrate.d.ts
 /** One confetti burst per rising edge of `play`. Render it INSIDE a
  *  position:relative wrapper (`.lab-celebrate` provides one). */
-declare function Celebrate({
-  play
-}: {
+declare function Celebrate({ play }: {
   play: boolean;
 }): ReactNode;
 /** Success badge plus a single accessible celebration burst. */
-declare function SolvedPill({
-  children
-}: {
+declare function SolvedPill({ children }: {
   children?: ReactNode;
 }): ReactNode;
 //#endregion

package/dist/kit/celebrate.mjs

@@ -52,13 +52,14 @@ function Celebrate({ play }) {
 			const dx = Math.round(Math.cos(angle) * dist);
 			const dy = Math.round(Math.sin(angle) * dist * .85) - 14;
 			const rot = 120 + i * 47 % 240;
-			return /* @__PURE__ */ jsx("span", { style: {
+			const style = {
 				"--dx": `${dx}px`,
 				"--dy": `${dy}px`,
 				"--rot": `${rot}deg`,
 				"--c": COLORS[i % COLORS.length],
 				animationDelay: `${i % 4 * 24}ms`
-			} }, i);
+			};
+			return /* @__PURE__ */ jsx("span", { style }, i);
 		})
 	}, burst);
 }

package/dist/kit/chemistry/composition-evidence.d.mts

@@ -0,0 +1,45 @@
+import { ElementAmount, RatioResult } from "../../chem/ratio-normalizer/core.mjs";
+//#region src/kit/chemistry/composition-evidence.d.ts
+type CompositionEvidence = {
+  kind: 'mass-gain';
+  element: Omit<ElementAmount, 'value'>;
+  startingMass: number;
+  productMass: number;
+  addedElement: Omit<ElementAmount, 'value'>;
+} | {
+  kind: 'combustion';
+  sampleMass: number;
+  carbonDioxideMass: number;
+  waterMass: number;
+  includeOxygenByDifference?: boolean;
+} | {
+  kind: 'hydrate';
+  hydratedMass: number;
+  anhydrousMass: number;
+  anhydrousFormula: string;
+  anhydrousFormulaMass: number;
+};
+interface CompositionEvidenceResult {
+  kind: CompositionEvidence['kind'];
+  measurements: readonly {
+    label: string;
+    value: number;
+    unit: 'g';
+  }[];
+  derived: readonly {
+    label: string;
+    value: number;
+    unit: 'g' | 'mol';
+  }[];
+  conserved: boolean;
+  ratio?: RatioResult;
+  hydrate?: {
+    formula: string;
+    waterRatio: number;
+    anhydrousMoles: number;
+    waterMoles: number;
+  };
+}
+declare function adaptCompositionEvidence(evidence: CompositionEvidence): CompositionEvidenceResult;
+//#endregion
+export { CompositionEvidence, CompositionEvidenceResult, adaptCompositionEvidence };

package/dist/kit/chemistry/composition-evidence.mjs

@@ -0,0 +1,164 @@
+import { normalizeRatio } from "../../chem/ratio-normalizer/core.mjs";
+
+//#region src/kit/chemistry/composition-evidence.ts
+function positive(value, label) {
+	if (!Number.isFinite(value) || value <= 0) throw new Error(`${label} must be a positive finite number.`);
+}
+function tidy(value) {
+	return Number(value.toFixed(5));
+}
+function adaptCompositionEvidence(evidence) {
+	if (evidence.kind === "mass-gain") {
+		positive(evidence.startingMass, "Starting mass");
+		positive(evidence.productMass, "Product mass");
+		if (evidence.productMass <= evidence.startingMass) throw new Error("Product mass must exceed starting mass when an element is gained.");
+		const addedMass = evidence.productMass - evidence.startingMass;
+		const ratio = normalizeRatio({
+			mode: "mass",
+			elements: [{
+				...evidence.element,
+				value: evidence.startingMass
+			}, {
+				...evidence.addedElement,
+				value: addedMass
+			}]
+		});
+		return {
+			kind: evidence.kind,
+			measurements: [{
+				label: `${evidence.element.name ?? evidence.element.symbol} before`,
+				value: evidence.startingMass,
+				unit: "g"
+			}, {
+				label: "compound after",
+				value: evidence.productMass,
+				unit: "g"
+			}],
+			derived: [{
+				label: `${evidence.addedElement.name ?? evidence.addedElement.symbol} gained`,
+				value: tidy(addedMass),
+				unit: "g"
+			}],
+			conserved: Math.abs(evidence.startingMass + addedMass - evidence.productMass) < 1e-8,
+			ratio
+		};
+	}
+	if (evidence.kind === "combustion") {
+		positive(evidence.sampleMass, "Sample mass");
+		positive(evidence.carbonDioxideMass, "Carbon dioxide mass");
+		positive(evidence.waterMass, "Water mass");
+		const carbonMass = evidence.carbonDioxideMass * 12 / 44;
+		const hydrogenMass = evidence.waterMass * 2 / 18;
+		const oxygenMass = evidence.sampleMass - carbonMass - hydrogenMass;
+		if (oxygenMass < -1e-8) throw new Error("Recovered carbon and hydrogen masses exceed the original sample mass.");
+		const elements = [{
+			symbol: "C",
+			name: "carbon",
+			value: carbonMass,
+			relativeAtomicMass: 12
+		}, {
+			symbol: "H",
+			name: "hydrogen",
+			value: hydrogenMass,
+			relativeAtomicMass: 1
+		}];
+		if (evidence.includeOxygenByDifference && oxygenMass > 1e-8) elements.push({
+			symbol: "O",
+			name: "oxygen",
+			value: oxygenMass,
+			relativeAtomicMass: 16
+		});
+		const ratio = normalizeRatio({
+			mode: "mass",
+			elements
+		});
+		return {
+			kind: evidence.kind,
+			measurements: [
+				{
+					label: "compound burned",
+					value: evidence.sampleMass,
+					unit: "g"
+				},
+				{
+					label: "carbon dioxide",
+					value: evidence.carbonDioxideMass,
+					unit: "g"
+				},
+				{
+					label: "water",
+					value: evidence.waterMass,
+					unit: "g"
+				}
+			],
+			derived: [
+				{
+					label: "carbon in sample",
+					value: tidy(carbonMass),
+					unit: "g"
+				},
+				{
+					label: "hydrogen in sample",
+					value: tidy(hydrogenMass),
+					unit: "g"
+				},
+				...evidence.includeOxygenByDifference ? [{
+					label: "oxygen by difference",
+					value: tidy(Math.max(0, oxygenMass)),
+					unit: "g"
+				}] : []
+			],
+			conserved: Math.abs(carbonMass + hydrogenMass + Math.max(0, oxygenMass) - evidence.sampleMass) < 1e-8,
+			ratio
+		};
+	}
+	positive(evidence.hydratedMass, "Hydrated mass");
+	positive(evidence.anhydrousMass, "Anhydrous mass");
+	positive(evidence.anhydrousFormulaMass, "Anhydrous formula mass");
+	if (evidence.hydratedMass <= evidence.anhydrousMass) throw new Error("Hydrated mass must exceed anhydrous mass.");
+	const waterMass = evidence.hydratedMass - evidence.anhydrousMass;
+	const anhydrousMoles = evidence.anhydrousMass / evidence.anhydrousFormulaMass;
+	const waterMoles = waterMass / 18;
+	const rawRatio = waterMoles / anhydrousMoles;
+	const waterRatio = Math.round(rawRatio);
+	if (waterRatio < 1 || Math.abs(rawRatio - waterRatio) > .04) throw new Error("Hydrate measurements do not resolve to a small whole-number water ratio.");
+	return {
+		kind: evidence.kind,
+		measurements: [{
+			label: "hydrated crystals",
+			value: evidence.hydratedMass,
+			unit: "g"
+		}, {
+			label: "anhydrous salt",
+			value: evidence.anhydrousMass,
+			unit: "g"
+		}],
+		derived: [
+			{
+				label: "water lost",
+				value: tidy(waterMass),
+				unit: "g"
+			},
+			{
+				label: "anhydrous salt",
+				value: tidy(anhydrousMoles),
+				unit: "mol"
+			},
+			{
+				label: "water",
+				value: tidy(waterMoles),
+				unit: "mol"
+			}
+		],
+		conserved: Math.abs(evidence.anhydrousMass + waterMass - evidence.hydratedMass) < 1e-8,
+		hydrate: {
+			formula: `${evidence.anhydrousFormula}·${waterRatio}H₂O`,
+			waterRatio,
+			anhydrousMoles: tidy(anhydrousMoles),
+			waterMoles: tidy(waterMoles)
+		}
+	};
+}
+
+//#endregion
+export { adaptCompositionEvidence };

package/dist/kit/chemistry/cycle.mjs

@@ -0,0 +1,147 @@
+import { Figure, HUE, STROKE, alpha, tint } from "../figure/figure.mjs";
+import { FigText } from "../figure/text.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/chemistry/cycle.tsx
+const R = 96;
+const CX = 230;
+const CY = 186;
+const W = 460;
+const point = (deg, radius = R) => {
+	const rad = deg * Math.PI / 180;
+	return [CX + radius * Math.cos(rad), CY + radius * Math.sin(rad)];
+};
+/** A species sitting on the ring: the catalyst in one of its states. */
+function StatePill({ at, label, lit }) {
+	const [x, y] = point(at);
+	const w = Math.min(88, Math.max(46, label.length * 9 + 20));
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+		x: x - w / 2,
+		y: y - 15,
+		width: w,
+		height: 30,
+		rx: 15,
+		fill: lit ? tint(HUE.good, 22) : HUE.paper,
+		stroke: lit ? HUE.good : alpha(HUE.ink, 45),
+		strokeWidth: STROKE.line
+	}), /* @__PURE__ */ jsx(FigText, {
+		x,
+		y,
+		size: "measure",
+		anchor: "middle",
+		baseline: "middle",
+		tone: lit ? "good" : "ink",
+		halo: false,
+		children: label
+	})] });
+}
+/**
+* One step of the ring: an arc with an arrowhead, plus whatever crosses the boundary here.
+*
+* The consumed species points INWARD and the produced species points OUTWARD, which is what makes
+* the ring read as a cycle with traffic through it rather than as a circular flowchart.
+*/
+function Step({ from, to, step, lit }) {
+	const pad = 26;
+	const a0 = from + pad;
+	const a1 = to - pad;
+	const [sx, sy] = point(a0);
+	const [ex, ey] = point(a1);
+	const large = Math.abs(a1 - a0) > 180 ? 1 : 0;
+	const colour = lit ? HUE.good : HUE.ink;
+	const rad = a1 * Math.PI / 180;
+	const tx = -Math.sin(rad);
+	const ty = Math.cos(rad);
+	const head = `M${ex} ${ey}L${ex - tx * 11 - ty * 5} ${ey - ty * 11 + tx * 5}M${ex} ${ey}L${ex - tx * 11 + ty * 5} ${ey - ty * 11 - tx * 5}`;
+	const mid = (a0 + a1) / 2;
+	const crossing = (deg, inward, label) => {
+		const [nearX, nearY] = point(deg, 112);
+		const [farX, farY] = point(deg, 148);
+		const x1 = inward ? farX : nearX;
+		const y1 = inward ? farY : nearY;
+		const x2 = inward ? nearX : farX;
+		const y2 = inward ? nearY : farY;
+		const dx = x2 - x1;
+		const dy = y2 - y1;
+		const len = Math.hypot(dx, dy) || 1;
+		const ux = dx / len;
+		const uy = dy / len;
+		const [lx, ly] = point(deg, 170);
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
+			d: `M${x1} ${y1}L${x2} ${y2}M${x2} ${y2}L${x2 - ux * 9 - uy * 4.5} ${y2 - uy * 9 + ux * 4.5}M${x2} ${y2}L${x2 - ux * 9 + uy * 4.5} ${y2 - uy * 9 - ux * 4.5}`,
+			stroke: inward ? alpha(HUE.ink, 62) : alpha(HUE[2], 90),
+			strokeWidth: STROKE.line,
+			fill: "none",
+			strokeLinecap: "round"
+		}), /* @__PURE__ */ jsx(FigText, {
+			x: lx,
+			y: ly,
+			size: "note",
+			anchor: "middle",
+			baseline: "middle",
+			tone: inward ? "soft" : "hue-2",
+			children: label
+		})] });
+	};
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("path", {
+			d: `M${sx} ${sy}A${R} ${R} 0 ${large} 1 ${ex} ${ey}${head}`,
+			fill: "none",
+			stroke: colour,
+			strokeWidth: lit ? STROKE.edge : STROKE.line,
+			strokeLinecap: "round"
+		}),
+		step.consumes ? crossing(mid - 21, true, step.consumes) : null,
+		step.produces ? crossing(mid + 21, false, step.produces) : null
+	] });
+}
+function CatalyticCycle({ spec, closed = false, label }) {
+	const states = [spec.start, ...spec.steps.slice(0, -1).map((step) => step.to)];
+	const n = states.length;
+	const angleAt = (i) => 180 + i * 360 / n;
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, 386],
+		domain: "chem",
+		label,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: CX,
+				cy: CY,
+				r: R,
+				fill: "none",
+				stroke: alpha(HUE.soft, 18),
+				strokeWidth: STROKE.hair,
+				strokeDasharray: "3 6"
+			}),
+			spec.steps.map((step, i) => /* @__PURE__ */ jsx(Step, {
+				from: angleAt(i),
+				to: angleAt(i + 1),
+				step,
+				lit: closed
+			}, step.to)),
+			states.map((state, i) => /* @__PURE__ */ jsx(StatePill, {
+				at: angleAt(i),
+				label: state,
+				lit: closed && i === 0
+			}, state)),
+			closed ? /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(FigText, {
+				x: CX,
+				y: 174,
+				size: "note",
+				anchor: "middle",
+				tone: "soft",
+				children: "overall"
+			}), /* @__PURE__ */ jsx(FigText, {
+				x: CX,
+				y: 196,
+				size: "note",
+				anchor: "middle",
+				tone: "ink",
+				children: spec.overall
+			})] }) : null
+		]
+	});
+}
+
+//#endregion
+export { CatalyticCycle };

package/dist/kit/chemistry/electrode.d.mts

@@ -0,0 +1,103 @@
+import { ReactNode } from "react";
+//#region src/kit/chemistry/electrode.d.ts
+/** What is seen at the electrode's surface. */
+type ElectrodeEvent = {
+  kind: 'none';
+} |
+/** Gas evolving: bubbles cling to the rod and rise beside it. */
+{
+  kind: 'gas';
+  colour?: string;
+  vigour?: number;
+} |
+/** Metal plating out: a deposit thickens on the rod. */
+{
+  kind: 'plating';
+  colour: string;
+  extent?: number;
+} |
+/** The electrode itself dissolving: it thins, and its metal enters the solution. */
+{
+  kind: 'dissolving';
+  colour: string;
+  extent?: number;
+};
+interface ElectrodeProps {
+  /** Centre line of the rod. */
+  x: number;
+  /** Top of the rod, above the liquid. */
+  y: number;
+  /** Where the liquid surface crosses it. */
+  liquidTop: number;
+  /** Bottom of the rod, under the liquid. */
+  bottom: number;
+  width?: number;
+  /** Graphite reads dark, a metal rod reads metallic. */
+  material?: 'graphite' | 'metal';
+  /**
+   * The sign printed at the terminal.
+   *
+   * Deliberately NOT derived from the role, because the two disagree between the cell types and
+   * that disagreement is examined: in electrolysis the anode is positive, and in a galvanic cell
+   * the anode is negative. A primitive that inferred the sign from the word "anode" would be right
+   * half the time and would teach the confusion rather than expose it.
+   */
+  sign?: '+' | '-';
+  /** Short label under the electrode, e.g. the product. */
+  label?: string;
+  /** The role, announced to assistive technology. */
+  role?: 'anode' | 'cathode';
+  event?: ElectrodeEvent;
+  /** Animation phase, 0..1, from the lab's play gate. */
+  phase?: number;
+}
+declare function Electrode({ x, y, liquidTop, bottom, width, material: rodMaterial, sign, label, role, event, phase }: ElectrodeProps): ReactNode;
+/**
+ * Gas rising in a column against one electrode.
+ *
+ * Separate from {@link Electrode} so a lab that draws its own vessel can still get the one part
+ * that is genuinely hard to get right: bubbles that read as coming OFF a surface rather than
+ * appearing in mid-liquid.
+ *
+ * Bubbles grow as they rise, because the ones stuck to the rod are small and merge on the way up.
+ * That is the real behaviour and it is also what makes the column read as a direction rather than
+ * as scattered dots.
+ */
+declare function ElectrodeGas({ x, width, liquidTop, bottom, phase, colour, vigour }: {
+  x: number;
+  width: number;
+  liquidTop: number;
+  bottom: number;
+  phase: number;
+  colour?: string;
+  vigour?: number;
+}): ReactNode;
+/**
+ * Ions drifting through the solution, cations one way and anions the other.
+ *
+ * The part of electrolysis a still picture cannot show and the part that explains the word:
+ * a current through a solution IS ions moving, not electrons. A learner who has only seen the
+ * electrode equations often believes electrons swim across the liquid.
+ *
+ * Charge sign drives direction, so the two streams cannot be drawn going the same way by mistake.
+ */
+declare function IonDrift({ left, right, y, height, phase, cation, anion, rows }: {
+  /** Cathode side x. */
+  left: number;
+  /** Anode side x. */
+  right: number;
+  y: number;
+  height: number;
+  phase: number;
+  cation: {
+    label: string;
+    colour: string;
+  };
+  anion: {
+    label: string;
+    colour: string;
+  };
+  rows?: number;
+}): ReactNode;
+//#endregion
+export { Electrode, ElectrodeEvent, ElectrodeGas, ElectrodeProps, IonDrift };

package/dist/kit/chemistry/electrode.mjs

@@ -0,0 +1,155 @@
+'use client';
+
+import { HUE, STROKE, alpha, material, shade } from "../figure/figure.mjs";
+import { FigText } from "../figure/text.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/chemistry/electrode.tsx
+/** How many bubbles a vigour of 1 puts on the rod. */
+const BUBBLES_AT_FULL = 9;
+function Electrode({ x, y, liquidTop, bottom, width = 16, material: rodMaterial = "graphite", sign, label, role, event = { kind: "none" }, phase = 0 }) {
+	const ramp = material(rodMaterial === "graphite" ? HUE.solidDark : HUE.metal);
+	const half = width / 2;
+	const submergedHalf = half * (1 - (event.kind === "dissolving" ? Math.min(.45, (event.extent ?? .3) * .45) : 0));
+	return /* @__PURE__ */ jsxs("g", {
+		"aria-label": role ? `${role}: ${label ?? "electrode"}` : label,
+		children: [
+			event.kind === "plating" ? /* @__PURE__ */ jsx("rect", {
+				x: x - half - (2.5 + 8 * (event.extent ?? 1)),
+				y: liquidTop + 3,
+				width: width + 2 * (2.5 + 8 * (event.extent ?? 1)),
+				height: bottom - liquidTop - 3,
+				rx: 3,
+				fill: event.colour,
+				stroke: shade(event.colour, 70),
+				strokeWidth: STROKE.hair
+			}) : null,
+			/* @__PURE__ */ jsx("rect", {
+				x: x - half,
+				y,
+				width,
+				height: liquidTop - y,
+				rx: 2,
+				fill: ramp.base,
+				stroke: ramp.line,
+				strokeWidth: STROKE.hair
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: x - submergedHalf,
+				y: liquidTop,
+				width: submergedHalf * 2,
+				height: bottom - liquidTop,
+				rx: 2,
+				fill: ramp.base,
+				stroke: ramp.line,
+				strokeWidth: STROKE.hair
+			}),
+			event.kind === "gas" ? /* @__PURE__ */ jsx(ElectrodeGas, {
+				x,
+				width,
+				liquidTop,
+				bottom,
+				phase,
+				colour: event.colour,
+				vigour: event.vigour
+			}) : null,
+			sign ? /* @__PURE__ */ jsx(FigText, {
+				x: x + half + 16,
+				y: y + 9,
+				anchor: "start",
+				baseline: "middle",
+				size: "measure",
+				tone: sign === "+" ? "hot" : "ink",
+				children: sign === "+" ? "+" : "−"
+			}) : null,
+			label ? /* @__PURE__ */ jsx(FigText, {
+				x,
+				y: bottom + 20,
+				anchor: "middle",
+				size: "note",
+				tone: "soft",
+				children: label
+			}) : null
+		]
+	});
+}
+/**
+* Gas rising in a column against one electrode.
+*
+* Separate from {@link Electrode} so a lab that draws its own vessel can still get the one part
+* that is genuinely hard to get right: bubbles that read as coming OFF a surface rather than
+* appearing in mid-liquid.
+*
+* Bubbles grow as they rise, because the ones stuck to the rod are small and merge on the way up.
+* That is the real behaviour and it is also what makes the column read as a direction rather than
+* as scattered dots.
+*/
+function ElectrodeGas({ x, width, liquidTop, bottom, phase, colour = "var(--fig-paper)", vigour = 1 }) {
+	const count = Math.max(0, Math.round(BUBBLES_AT_FULL * Math.min(1, vigour)));
+	const span = bottom - liquidTop;
+	const items = [];
+	for (let i = 0; i < count; i++) {
+		const fr = (phase * (.6 + .5 * vigour) + i * .6180339887) % 1;
+		const by = bottom - fr * span;
+		const drift = (i % 2 === 0 ? -1 : 1) * (width / 2 + 3 + fr * 5);
+		items.push(/* @__PURE__ */ jsx("circle", {
+			cx: x + drift,
+			cy: by,
+			r: 1.4 + fr * 2.6,
+			fill: colour,
+			opacity: .75 - fr * .35,
+			stroke: alpha(HUE.ink, 14),
+			strokeWidth: STROKE.hair
+		}, i));
+	}
+	return /* @__PURE__ */ jsx("g", {
+		"aria-hidden": "true",
+		children: items
+	});
+}
+/**
+* Ions drifting through the solution, cations one way and anions the other.
+*
+* The part of electrolysis a still picture cannot show and the part that explains the word:
+* a current through a solution IS ions moving, not electrons. A learner who has only seen the
+* electrode equations often believes electrons swim across the liquid.
+*
+* Charge sign drives direction, so the two streams cannot be drawn going the same way by mistake.
+*/
+function IonDrift({ left, right, y, height, phase, cation, anion, rows = 3 }) {
+	const items = [];
+	const lanes = rows * 2;
+	for (let i = 0; i < lanes; i++) {
+		const positive = i % 2 === 0;
+		const lane = y + (i + .5) / lanes * height;
+		const fr = (phase * .35 + i * .37) % 1;
+		const cx = left + (positive ? 1 - fr : fr) * (right - left);
+		const ion = positive ? cation : anion;
+		items.push(/* @__PURE__ */ jsxs("g", {
+			opacity: .55 + .35 * Math.sin(Math.PI * fr),
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx,
+				cy: lane,
+				r: 7,
+				fill: alpha(ion.colour, 72)
+			}), /* @__PURE__ */ jsx(FigText, {
+				x: cx,
+				y: lane,
+				anchor: "middle",
+				baseline: "middle",
+				size: "eyebrow",
+				tone: "inverse",
+				halo: false,
+				caps: false,
+				children: ion.label
+			})]
+		}, i));
+	}
+	return /* @__PURE__ */ jsx("g", {
+		"aria-hidden": "true",
+		children: items
+	});
+}
+
+//#endregion
+export { Electrode, ElectrodeGas, IonDrift };