@classytic/labs 0.6.0 → 0.7.0

package/dist/domains/chem/salts-and-solubility/soap-hard-water/scene.mjs

@@ -0,0 +1,1177 @@
+'use client';
+
+import { FigText } from "../../../../kit/figure/text.mjs";
+import { ACCENT, SCENE } from "../../../../kit/scene/tokens.mjs";
+import { Figure, HUE, STROKE, alpha, shade, useFigureId } from "../../../../kit/figure/figure.mjs";
+import { GripKey } from "../../../../kit/figure/grip.mjs";
+import { useSettle } from "../../../../kit/anim.mjs";
+import { useControl } from "../../../../runtime/use-control.mjs";
+import { Bench, LabelChip } from "../../../../kit/scene/workbench.mjs";
+import { useLabView } from "../../../../runtime/use-lab-view.mjs";
+import { Glass, glassInner } from "../../../../kit/figure/container.mjs";
+import { FigureAction } from "../../../../kit/figure/action.mjs";
+import { FigureValueControl } from "../../../../kit/figure/value-control.mjs";
+import { OBSERVED, Precipitate } from "../../../../kit/chemistry/observation.mjs";
+import { GlassLabel } from "../../../../kit/chemistry/glass-label.mjs";
+import { DropperBottle, HotPlate, ReagentJar, TubeRack, WashBottle } from "../../../../kit/chemistry/bench.mjs";
+import { SAMPLES } from "./samples.mjs";
+import { soapHardWaterModel } from "./model.mjs";
+import { HardIon, ION, Lather, Note, ScumPill, SurfactantIon } from "./parts.mjs";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/domains/chem/salts-and-solubility/soap-hard-water/scene.tsx
+/**
+* Soap and hard water: the picture.
+*
+* `hard` is a bench: a rack of sample tubes, the tube on the hot plate, a soap and a detergent bottle,
+* a jar of washing soda, and a magnified strip beside the tube that shows each calcium ion take two
+* soap ions and become scum. `clean` is one magnified panel: an oil droplet on a cloth, the soap ions
+* that must close a ring round it, and the scum that hard water makes of them.
+*
+* Everything drawn reads the model's reading, which reads stage's `water-hardness` kernel. The
+* picture only maps it to shapes: one ion icon stands for one drop's worth of ion (`dropMmol`), and
+* the lather and flake counts are display scales. The magnified strip and the ring are schematic,
+* and say so on the picture.
+*/
+const W = 440;
+const H = 470;
+/** The tube bench needs less height than the cloth: it ends under the `empty` key. */
+const H_HARD = 442;
+const BENCH = 372;
+const r2 = (n) => Math.round(n * 100) / 100;
+/** Ion icons kept ready to travel into the strip: one per drop, up to a full tube's worth that fits. */
+const MAX_POOL = 24;
+/** A soft settle: no overshoot, so a drop never lands twice. */
+const GLIDE = {
+	duration: .5,
+	bounce: 0
+};
+const TUBE = {
+	cx: 124,
+	w: 56,
+	h: 140,
+	bottom: 322
+};
+const TUBE_X = TUBE.cx - TUBE.w / 2;
+const TUBE_Y = TUBE.bottom - TUBE.h;
+const PLATE = {
+	x: TUBE.cx,
+	y: 322,
+	k: .8
+};
+const PANEL = {
+	x: 178,
+	y: 26,
+	w: 256
+};
+const SLOT = {
+	w: 90,
+	h: 40,
+	col: 2
+};
+/** Where the free soap ions float, and the one ion that names its head and tail. */
+const LANE = PANEL.x + PANEL.w - 58;
+/** Flake positions inside the tube: a fixed scatter in the lower half, so scum looks the same each time. */
+const FLAKES = [
+	[
+		-12,
+		-18,
+		5.5,
+		20
+	],
+	[
+		8,
+		-12,
+		6,
+		-35
+	],
+	[
+		-3,
+		-30,
+		4.5,
+		60
+	],
+	[
+		14,
+		-26,
+		5,
+		10
+	],
+	[
+		-16,
+		-8,
+		4.5,
+		-15
+	],
+	[
+		2,
+		-6,
+		6.5,
+		40
+	],
+	[
+		-8,
+		-40,
+		4,
+		-50
+	],
+	[
+		12,
+		-40,
+		4.5,
+		25
+	],
+	[
+		-14,
+		-28,
+		5,
+		70
+	],
+	[
+		5,
+		-22,
+		5.5,
+		-20
+	],
+	[
+		-2,
+		-46,
+		4,
+		35
+	],
+	[
+		16,
+		-10,
+		4.5,
+		-60
+	],
+	[
+		-10,
+		-14,
+		5,
+		5
+	],
+	[
+		10,
+		-32,
+		4,
+		80
+	],
+	[
+		0,
+		-14,
+		5,
+		-45
+	],
+	[
+		-17,
+		-36,
+		3.8,
+		15
+	],
+	[
+		17,
+		-20,
+		3.8,
+		-25
+	],
+	[
+		-6,
+		-50,
+		3.6,
+		55
+	]
+];
+/** What a tube's own label says: short, and the same words the rack's board prints. */
+const sampleTag = (id) => SAMPLES.find((entry) => entry.id === id)?.tag ?? id;
+const FLAKE_SHAPE = "M-1 -3 3 -2 2 2 -2 3Z";
+/** One outlined next step (and a word saying so), plus the single line that explains a dead control. */
+function Guide({ box, next, hint, hintY }) {
+	return /* @__PURE__ */ jsxs("g", {
+		"data-part": "guide",
+		pointerEvents: "none",
+		children: [box && next ? /* @__PURE__ */ jsxs("g", {
+			"data-part": "next-step",
+			children: [/* @__PURE__ */ jsx("rect", {
+				x: box.x,
+				y: box.y,
+				width: box.w,
+				height: box.h,
+				rx: 12,
+				fill: "none",
+				stroke: ACCENT.coral.base,
+				strokeWidth: STROKE.edge
+			}), /* @__PURE__ */ jsx(LabelChip, {
+				x: box.x + box.w / 2,
+				y: box.y - 2,
+				width: 44,
+				children: "next"
+			})]
+		}) : null, hint ? /* @__PURE__ */ jsx(FigText, {
+			x: W / 2,
+			y: hintY,
+			size: "note",
+			anchor: "middle",
+			caps: false,
+			children: hint
+		}) : null]
+	});
+}
+function HardBench() {
+	const { scenario, state, reading } = useLabView(soapHardWaterModel);
+	const sample = useControl(soapHardWaterModel, "sample");
+	const surfactant = useControl(soapHardWaterModel, "surfactant");
+	const drop = useControl(soapHardWaterModel, "drop");
+	const boil = useControl(soapHardWaterModel, "boil");
+	const soda = useControl(soapHardWaterModel, "soda");
+	const empty = useControl(soapHardWaterModel, "empty");
+	const guess = useControl(soapHardWaterModel, "guess");
+	const h = reading.hard;
+	const soap = state.surfactant === "soap";
+	const inner = glassInner(TUBE_X, TUBE_Y, TUBE.w, TUBE.h, "tube");
+	const fill = h.tube ? .5 + Math.min(state.drops, 30) * .008 : 0;
+	const surfaceY = inner.y + inner.h * (1 - fill);
+	const flakeCount = h.original.total > 0 ? Math.round(FLAKES.length * Math.min(1, h.scumMmol / h.original.total)) : 0;
+	const bedFraction = h.original.total > 0 ? Math.min(1, (h.scale + h.chalk) / h.original.total) : 0;
+	const latherLevel = Math.min(1, h.icons.free / 4);
+	const dropRef = useRef(null);
+	const bubbleRefs = [
+		useRef(null),
+		useRef(null),
+		useRef(null)
+	];
+	const target = useRef({
+		drops: state.drops,
+		boiled: h.boiled
+	});
+	target.current = {
+		drops: state.drops,
+		boiled: h.boiled
+	};
+	useSettle(state.drops, (v) => {
+		const part = v - Math.floor(v);
+		const falling = target.current.drops > v + .001 && part > .02;
+		dropRef.current?.setAttribute("opacity", falling ? "1" : "0");
+		dropRef.current?.setAttribute("transform", `translate(${TUBE.cx} ${r2(TUBE_Y - 34 + part * (surfaceY - TUBE_Y + 28))})`);
+	}, GLIDE);
+	useSettle(h.boiled ? 1 : 0, (v) => {
+		const on = target.current.boiled && v > .03 && v < .97;
+		bubbleRefs.forEach((ref, i) => {
+			ref.current?.setAttribute("opacity", on ? String(r2(Math.sin(Math.PI * v))) : "0");
+			ref.current?.setAttribute("transform", `translate(0 ${r2(-v * (34 + i * 16))})`);
+		});
+	}, {
+		duration: 1.4,
+		bounce: 0
+	});
+	const slotsCa = Math.round(h.icons.ca);
+	const slots = Math.min(8, slotsCa + Math.round(h.icons.mg));
+	const bound = Math.min(2 * slots, Math.round(h.icons.bound));
+	const pool = Math.min(24, state.drops);
+	const gx = PANEL.x + 12;
+	const gy = PANEL.y + 54;
+	const rows = Math.max(1, Math.ceil(scenario.maxHardIons / SLOT.col));
+	const panelH = 54 + rows * SLOT.h + 12;
+	const slotAt = (i) => ({
+		x: gx + i % SLOT.col * SLOT.w,
+		y: gy + Math.floor(i / SLOT.col) * SLOT.h + SLOT.h / 2
+	});
+	const ionSpot = (k) => {
+		if (k >= pool) return {
+			x: LANE + 4,
+			y: PANEL.y + 60,
+			on: false,
+			scale: .8
+		};
+		if (k < bound) {
+			const slot = slotAt(Math.floor(k / 2));
+			return {
+				x: slot.x + 48,
+				y: slot.y + (k % 2 ? 9 : -9),
+				on: true,
+				scale: 1
+			};
+		}
+		const f = k - bound;
+		const n = Math.min(f, 5);
+		return {
+			x: LANE + 4 + n % 2 * 28,
+			y: PANEL.y + 100 + Math.floor(n / 2) * 18,
+			on: true,
+			scale: .8
+		};
+	};
+	const bottleX = {
+		soap: 222,
+		detergent: 288
+	};
+	const bottle = (kind) => {
+		const active = state.surfactant === kind;
+		const props = {
+			x: bottleX[kind],
+			y: BENCH,
+			contents: kind === "soap" ? "soap" : "deterg.",
+			...active && h.tube ? { detail: `${state.drops} ${state.drops === 1 ? "drop" : "drops"}` } : {}
+		};
+		return active ? /* @__PURE__ */ jsxs("g", {
+			"data-selected": "true",
+			children: [/* @__PURE__ */ jsx("rect", {
+				x: bottleX[kind] - 32,
+				y: BENCH - 140,
+				width: 64,
+				height: 146,
+				rx: 12,
+				fill: "none",
+				stroke: HUE.soft,
+				strokeWidth: STROKE.line,
+				strokeDasharray: "5 3",
+				pointerEvents: "none"
+			}), /* @__PURE__ */ jsx(DropperBottle, {
+				...props,
+				control: drop
+			})]
+		}, kind) : /* @__PURE__ */ jsx(FigureAction, {
+			control: surfactant,
+			option: kind,
+			label: kind === "soap" ? "Take the soap bottle" : "Take the detergent bottle",
+			bounds: {
+				x: bottleX[kind] - 30,
+				y: BENCH - 138,
+				width: 60,
+				height: 140
+			},
+			children: /* @__PURE__ */ jsx("g", {
+				opacity: .85,
+				children: /* @__PURE__ */ jsx(DropperBottle, { ...props })
+			})
+		}, kind);
+	};
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, H_HARD],
+		domain: "chem",
+		interactive: true,
+		label: soapHardWaterModel.describe(scenario, state, reading),
+		children: [
+			/* @__PURE__ */ jsx(Bench, {
+				x1: 8,
+				x2: W - 8,
+				y: BENCH
+			}),
+			/* @__PURE__ */ jsx(Bench, {
+				x1: 6,
+				x2: 172,
+				y: 140,
+				depth: 14
+			}),
+			/* @__PURE__ */ jsx(TubeRack, {
+				x: 14,
+				y: 140,
+				pitch: 30,
+				control: sample,
+				tubes: scenario.samples.map((id) => {
+					const entry = SAMPLES.find((x) => x.id === id);
+					return {
+						key: id,
+						label: entry.short,
+						liquid: HUE.liquid,
+						name: `Take ${entry.label}`
+					};
+				})
+			}),
+			!guess.hidden ? /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(Note, {
+				x: 48,
+				y: 206,
+				anchor: "middle",
+				children: "drops to lather?"
+			}), /* @__PURE__ */ jsx(FigureValueControl, {
+				x: 48,
+				y: 214,
+				control: guess,
+				format: (v) => `${v} drops`
+			})] }) : null,
+			/* @__PURE__ */ jsx(FigureAction, {
+				control: boil,
+				label: "Heat the tube on the hot plate",
+				bounds: {
+					x: PLATE.x - 86 * PLATE.k,
+					y: PLATE.y - 10 * PLATE.k,
+					width: 172 * PLATE.k,
+					height: 72 * PLATE.k
+				},
+				children: /* @__PURE__ */ jsx("g", {
+					transform: `translate(${PLATE.x} ${PLATE.y}) scale(${PLATE.k})`,
+					children: /* @__PURE__ */ jsx(HotPlate, {
+						x: 0,
+						y: 0,
+						level: h.boiled ? .8 : 0,
+						reading: h.boiled ? "100°C" : "off"
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs(Glass, {
+				x: TUBE_X,
+				y: TUBE_Y,
+				w: TUBE.w,
+				h: TUBE.h,
+				shape: "tube",
+				fill,
+				liquid: HUE.liquid,
+				liquidOpacity: .34,
+				shadow: false,
+				overlay: h.tube ? /* @__PURE__ */ jsx(Lather, {
+					cx: TUBE.cx,
+					y: surfaceY,
+					level: latherLevel,
+					spread: 1.1
+				}) : null,
+				children: [
+					h.tube ? /* @__PURE__ */ jsx(GlassLabel, {
+						x: TUBE.cx,
+						y: inner.y + 5,
+						w: inner.w - 10,
+						lines: [sampleTag(h.sampleId)]
+					}) : null,
+					h.tube && bedFraction > 0 ? /* @__PURE__ */ jsx(Precipitate, {
+						cx: TUBE.cx,
+						bottom: inner.y + inner.h + 2,
+						colour: OBSERVED.white,
+						w: 16 + 30 * bedFraction
+					}) : null,
+					h.tube ? FLAKES.map(([dx, dy, size, turn], i) => /* @__PURE__ */ jsx("g", {
+						style: {
+							opacity: i < flakeCount ? 1 : 0,
+							transform: `translate(${TUBE.cx + dx}px, ${inner.y + inner.h + dy - 6 + (i < flakeCount ? 0 : -34)}px) rotate(${turn}deg) scale(${size / 4})`,
+							transition: "opacity 0.4s ease-in, transform 0.4s ease-in"
+						},
+						children: /* @__PURE__ */ jsx("path", {
+							d: FLAKE_SHAPE,
+							fill: alpha(HUE.solidWhite, 94),
+							stroke: SCENE.glass.edge,
+							strokeWidth: STROKE.hair
+						})
+					}, i)) : null,
+					[
+						0,
+						1,
+						2
+					].map((i) => /* @__PURE__ */ jsx("g", {
+						ref: bubbleRefs[i],
+						opacity: 0,
+						children: [
+							-12,
+							0,
+							12
+						].map((dx, j) => /* @__PURE__ */ jsx("circle", {
+							cx: TUBE.cx + dx + (i - 1) * 3,
+							cy: inner.y + inner.h - 14 - j * 9 - i * 4,
+							r: 2.4 + (i + j) % 2,
+							fill: alpha(HUE.solidWhite, 75),
+							stroke: SCENE.glass.edge,
+							strokeWidth: STROKE.hair
+						}, j))
+					}, i))
+				]
+			}),
+			h.tube && flakeCount > 0 ? /* @__PURE__ */ jsx(ScumTag, {
+				x: TUBE.cx - TUBE.w / 2 - 6,
+				y: TUBE_Y + TUBE.h - 44,
+				text: "scum",
+				side: "left"
+			}) : null,
+			h.tube && bedFraction > 0 ? /* @__PURE__ */ jsx(ScumTag, {
+				x: TUBE.cx - TUBE.w / 2 - 6,
+				y: TUBE_Y + TUBE.h - 10,
+				text: "CaCO₃",
+				side: "left"
+			}) : null,
+			/* @__PURE__ */ jsx("g", {
+				ref: dropRef,
+				opacity: 0,
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M0 -7C4 -1 5 2 0 5C-5 2 -4 -1 0 -7Z",
+					fill: ACCENT.cobalt.lit,
+					stroke: ACCENT.cobalt.deep,
+					strokeWidth: STROKE.line
+				})
+			}),
+			!empty.hidden ? /* @__PURE__ */ jsx(GripKey, {
+				x: TUBE.cx,
+				y: BENCH + 38,
+				w: 124,
+				h: 24,
+				compact: true,
+				text: "empty the tube",
+				control: empty
+			}) : null,
+			bottle("soap"),
+			bottle("detergent"),
+			/* @__PURE__ */ jsx(ReagentJar, {
+				x: 358,
+				y: BENCH,
+				contents: "soda",
+				color: OBSERVED.white,
+				control: soda
+			}),
+			scenario.showIons && h.tube ? /* @__PURE__ */ jsxs("g", {
+				"data-part": "loupe",
+				"aria-hidden": true,
+				pointerEvents: "none",
+				children: [/* @__PURE__ */ jsx("rect", {
+					x: TUBE_X - 3,
+					y: surfaceY - 8,
+					width: TUBE.w + 6,
+					height: TUBE.bottom - surfaceY + 4,
+					rx: 8,
+					fill: "none",
+					stroke: HUE.soft,
+					strokeWidth: STROKE.hair,
+					strokeDasharray: "3 3"
+				}), /* @__PURE__ */ jsx("path", {
+					d: `M${TUBE_X + TUBE.w + 3} ${surfaceY - 8}L${PANEL.x + 2} ${PANEL.y + panelH}M${TUBE_X + TUBE.w + 3} ${TUBE.bottom - 4}L${PANEL.x + 58} ${PANEL.y + panelH}`,
+					fill: "none",
+					stroke: HUE.soft,
+					strokeWidth: STROKE.hair,
+					strokeDasharray: "3 3"
+				})]
+			}) : null,
+			scenario.showIons ? /* @__PURE__ */ jsxs("g", {
+				"data-part": "ion-strip",
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						x: PANEL.x,
+						y: PANEL.y,
+						width: PANEL.w,
+						height: panelH,
+						rx: 14,
+						fill: HUE.paper,
+						stroke: HUE.soft,
+						strokeWidth: STROKE.edge
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: PANEL.x + 14,
+						y: PANEL.y + 22,
+						size: "note",
+						tone: "soft",
+						caps: false,
+						children: "magnified, not to scale"
+					}),
+					state.drops > 0 && h.tube ? /* @__PURE__ */ jsx(FigText, {
+						x: PANEL.x + 14,
+						y: PANEL.y + 38,
+						size: "note",
+						caps: false,
+						children: state.surfactant === "soap" ? "Ca²⁺ + 2 soap ions make scum" : "Ca²⁺ + detergent ions: no scum"
+					}) : null,
+					Array.from({ length: slots }, (_, i) => {
+						const at = slotAt(i);
+						const done = bound >= 2 * (i + 1);
+						const symbol = i < slotsCa ? "Ca" : "Mg";
+						return /* @__PURE__ */ jsxs("g", { children: [
+							/* @__PURE__ */ jsx("g", {
+								style: {
+									opacity: done ? 1 : 0,
+									transition: "opacity 0.3s ease-out"
+								},
+								children: /* @__PURE__ */ jsx(ScumPill, {
+									x: at.x - 2,
+									y: at.y - 17,
+									w: 82,
+									h: 34
+								})
+							}),
+							/* @__PURE__ */ jsx(HardIon, {
+								x: at.x + 14,
+								y: at.y,
+								symbol
+							}),
+							(state.surfactant === "soap" && state.drops > 0 ? [0, 1] : []).map((j) => /* @__PURE__ */ jsx("circle", {
+								cx: at.x + 48,
+								cy: at.y + (j ? 9 : -9),
+								r: ION.head,
+								fill: "none",
+								stroke: HUE.soft,
+								strokeWidth: STROKE.hair,
+								strokeDasharray: "2 2"
+							}, j))
+						] }, i);
+					}),
+					slots === 0 ? /* @__PURE__ */ jsx(Note, {
+						x: gx + 80,
+						y: gy + 56,
+						anchor: "middle",
+						children: "no Ca²⁺ or Mg²⁺ left"
+					}) : null,
+					/* @__PURE__ */ jsx(SurfactantIon, {
+						x: LANE + 4,
+						y: PANEL.y + 60,
+						kind: state.surfactant,
+						scale: 1.5
+					}),
+					/* @__PURE__ */ jsx(Note, {
+						x: LANE + 4,
+						y: PANEL.y + 82,
+						anchor: "middle",
+						children: "head"
+					}),
+					/* @__PURE__ */ jsx(Note, {
+						x: LANE + 38,
+						y: PANEL.y + 82,
+						anchor: "middle",
+						children: "tail"
+					}),
+					Array.from({ length: Math.min(24, MAX_POOL) }, (_, k) => {
+						const spot = ionSpot(k);
+						return /* @__PURE__ */ jsx("g", {
+							"data-part": "ion-slot",
+							"data-on": spot.on,
+							style: {
+								opacity: spot.on ? 1 : 0,
+								transform: `translate(${r2(spot.x)}px, ${r2(spot.y)}px)`,
+								transition: "transform 0.45s ease-in-out, opacity 0.25s ease-out"
+							},
+							children: /* @__PURE__ */ jsx(SurfactantIon, {
+								x: 0,
+								y: 0,
+								kind: state.surfactant,
+								scale: spot.scale
+							})
+						}, k);
+					})
+				]
+			}) : null,
+			/* @__PURE__ */ jsx(Guide, {
+				next: reading.guide.next !== null,
+				hint: reading.guide.hint,
+				hintY: H_HARD - 6,
+				box: reading.guide.next === "sample" ? {
+					x: 8,
+					y: 14,
+					w: 168,
+					h: 132
+				} : reading.guide.next === "drop" ? {
+					x: bottleX[state.surfactant] - 37,
+					y: BENCH - 146,
+					w: 74,
+					h: 152
+				} : null
+			})
+		]
+	});
+}
+function ScumTag({ x, y, text, side = "right" }) {
+	const w = text.length * 7.4 + 14;
+	return /* @__PURE__ */ jsx(LabelChip, {
+		x: side === "right" ? x + w / 2 : x - w / 2,
+		y,
+		width: w,
+		children: text
+	});
+}
+/**
+* One cloth, one oil droplet in each of two waters, side by side. The learner squeezes soap onto the
+* cloth once and rubs once; both basins answer, so the two outcomes come from the same action. All
+* the counts come from the model's reading (`clean.soft`, `clean.hard`); the picture only places them.
+*/
+const FRAME = {
+	x: 14,
+	y: 14,
+	w: 412,
+	h: 204
+};
+const CLOTH_H = 44;
+const CLOTH_TOP = FRAME.y + FRAME.h - CLOTH_H;
+const HALF = FRAME.w / 2;
+const OIL_R = {
+	6: 22,
+	8: 28,
+	10: 34
+};
+/** Where free soap ions float in a basin (offsets from the basin's top-left), with the way they lie. */
+const FLOAT_SOFT = [
+	[
+		30,
+		110,
+		10
+	],
+	[
+		172,
+		108,
+		-12
+	],
+	[
+		34,
+		132,
+		-8
+	],
+	[
+		168,
+		134,
+		14
+	],
+	[
+		34,
+		86,
+		16
+	],
+	[
+		172,
+		84,
+		-20
+	],
+	[
+		30,
+		62,
+		-14
+	],
+	[
+		172,
+		60,
+		12
+	],
+	[
+		30,
+		40,
+		-18
+	],
+	[
+		172,
+		40,
+		16
+	],
+	[
+		62,
+		46,
+		8
+	],
+	[
+		96,
+		38,
+		20
+	],
+	[
+		130,
+		46,
+		-10
+	]
+];
+/** Hard water keeps its sides for the scum, so its few free ions float above the droplet. */
+const FLOAT_HARD = [
+	[
+		70,
+		44,
+		6
+	],
+	[
+		104,
+		40,
+		-8
+	],
+	[
+		78,
+		62,
+		14
+	],
+	[
+		112,
+		60,
+		-12
+	]
+];
+const r1 = (n) => Math.round(n * 10) / 10;
+/** A soap ion that glides between spots (a CSS transition on transform; none under reduced motion). */
+function GlidingIon({ x, y, angle, kind, opacity = 1, scale = .9 }) {
+	return /* @__PURE__ */ jsx("g", {
+		"data-part": "ion-slot",
+		"data-on": opacity > 0,
+		style: {
+			opacity,
+			transform: `translate(${r1(x)}px, ${r1(y)}px) rotate(${r1(angle)}deg)`,
+			transition: "transform 0.55s ease-in-out, opacity 0.35s ease-out"
+		},
+		children: /* @__PURE__ */ jsx(SurfactantIon, {
+			x: 0,
+			y: 0,
+			kind,
+			scale
+		})
+	});
+}
+function Basin({ side }) {
+	const { state, reading } = useLabView(soapHardWaterModel);
+	const c = reading.clean;
+	const w = c[side];
+	const x0 = FRAME.x + (side === "soft" ? 0 : HALF);
+	const y0 = FRAME.y;
+	const cx = x0 + HALF / 2;
+	const R = OIL_R[c.ring] ?? 28;
+	const cy = CLOTH_TOP - R + 6;
+	const RR = R + 14;
+	const lift = w.clean ? -110 : w.lifted ? -48 : 0;
+	const ions = Math.min(20, Math.floor(w.freeIons + 1e-6));
+	const spots = side === "soft" ? FLOAT_SOFT : FLOAT_HARD;
+	const slots = Math.min(4, Math.round(w.hardIons.ca + w.hardIons.mg));
+	const boundIons = Math.min(2 * slots, Math.round(w.boundIons));
+	const units = Math.floor(boundIons / 2);
+	const kind = state.surfactant;
+	const slotAt = (i) => ({
+		x: x0 + (i % 2 ? 148 : 8),
+		y: y0 + 54 + Math.floor(i / 2) * 38
+	});
+	return /* @__PURE__ */ jsxs("g", {
+		"data-part": "basin",
+		"data-side": side,
+		children: [
+			/* @__PURE__ */ jsx(FigText, {
+				x: x0 + 14,
+				y: y0 + 24,
+				size: "label",
+				caps: false,
+				children: side === "soft" ? "soft water" : "hard water"
+			}),
+			Array.from({ length: slots }, (_, i) => {
+				const at = slotAt(i);
+				const done = i < units;
+				const partial = i === units && boundIons % 2 === 1;
+				return /* @__PURE__ */ jsxs("g", {
+					"data-part": done ? "scum-unit" : "hard-ion",
+					children: [done ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx(ScumPill, {
+							x: at.x,
+							y: at.y - 16,
+							w: 52,
+							h: 32
+						}),
+						/* @__PURE__ */ jsx(SurfactantIon, {
+							x: at.x + 31,
+							y: at.y - 7,
+							kind,
+							scale: .5
+						}),
+						/* @__PURE__ */ jsx(SurfactantIon, {
+							x: at.x + 31,
+							y: at.y + 7,
+							kind,
+							scale: .5
+						})
+					] }) : partial ? /* @__PURE__ */ jsx(SurfactantIon, {
+						x: at.x + 31,
+						y: at.y - 7,
+						kind,
+						scale: .5
+					}) : null, /* @__PURE__ */ jsx(HardIon, {
+						x: at.x + 12,
+						y: at.y,
+						symbol: i < Math.round(w.hardIons.ca) ? "Ca" : "Mg",
+						r: 9
+					})]
+				}, i);
+			}),
+			units > 0 ? /* @__PURE__ */ jsxs("g", {
+				"data-part": "scum-label",
+				children: [/* @__PURE__ */ jsx("path", {
+					d: `M${x0 + 180} ${y0 + 33}V${y0 + 38}`,
+					stroke: HUE.soft,
+					strokeWidth: STROKE.line,
+					strokeLinecap: "round"
+				}), /* @__PURE__ */ jsx(LabelChip, {
+					x: x0 + 180,
+					y: y0 + 22,
+					width: 44,
+					children: "scum"
+				})]
+			}) : null,
+			Array.from({ length: ions }, (_, k) => {
+				const onRing = c.rubbed && k < c.ring;
+				const spot = spots[k % spots.length];
+				const spare = k >= spots.length ? 12 : 0;
+				const a = k * 360 / c.ring - 90;
+				const rx = cx + (RR + 1) * Math.cos(a * Math.PI / 180);
+				const ry = cy + (RR + 1) * Math.sin(a * Math.PI / 180);
+				return onRing ? /* @__PURE__ */ jsx(GlidingIon, {
+					x: rx,
+					y: ry + lift,
+					angle: a + 180,
+					kind,
+					opacity: w.clean ? 0 : 1,
+					scale: .8
+				}, k) : /* @__PURE__ */ jsx(GlidingIon, {
+					x: x0 + spot[0] + spare,
+					y: y0 + spot[1] + spare,
+					angle: spot[2],
+					kind
+				}, k);
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				"data-part": "droplet",
+				"data-lifted": w.lifted || undefined,
+				style: {
+					transform: `translateY(${lift}px)`,
+					opacity: w.clean ? 0 : 1,
+					transition: "transform 0.55s ease-in-out, opacity 0.4s ease-out 0.15s"
+				},
+				children: [
+					/* @__PURE__ */ jsx("circle", {
+						cx,
+						cy,
+						r: R,
+						fill: ACCENT.amber.base,
+						stroke: shade(ACCENT.amber.deep, 60),
+						strokeWidth: STROKE.edge
+					}),
+					/* @__PURE__ */ jsx("ellipse", {
+						cx: cx - R * .3,
+						cy: cy - R * .38,
+						rx: R * .34,
+						ry: R * .2,
+						fill: ACCENT.amber.lit
+					}),
+					/* @__PURE__ */ jsx(LabelChip, {
+						x: cx,
+						y: cy + 1,
+						width: 34,
+						children: "oil"
+					}),
+					c.rubbed && w.ringFilled > 0 ? /* @__PURE__ */ jsx("circle", {
+						cx,
+						cy,
+						r: RR,
+						fill: "none",
+						stroke: HUE.soft,
+						strokeWidth: w.ringClosed ? STROKE.line : STROKE.hair,
+						strokeDasharray: w.ringClosed ? undefined : "3 4"
+					}) : null
+				]
+			}),
+			c.rubbed && !w.ringClosed && w.ringFilled > 0 ? Array.from({ length: c.ring - w.ringFilled }, (_, j) => {
+				const i = w.ringFilled + j;
+				const a = i * 360 / c.ring - 90;
+				return /* @__PURE__ */ jsx("circle", {
+					cx: r1(cx + (RR + 1) * Math.cos(a * Math.PI / 180)),
+					cy: r1(cy + (RR + 1) * Math.sin(a * Math.PI / 180)),
+					r: ION.head - 1,
+					fill: "none",
+					stroke: HUE.soft,
+					strokeWidth: STROKE.hair,
+					strokeDasharray: "2 2"
+				}, i);
+			}) : null,
+			w.lifted && !w.clean ? /* @__PURE__ */ jsx(LabelChip, {
+				x: x0 + 130,
+				y: y0 + 22,
+				width: 54,
+				children: "micelle"
+			}) : null
+		]
+	});
+}
+function CleanBench() {
+	const { scenario, state, reading } = useLabView(soapHardWaterModel);
+	const surfactant = useControl(soapHardWaterModel, "surfactant");
+	const squeeze = useControl(soapHardWaterModel, "squeeze");
+	const wipe = useControl(soapHardWaterModel, "wipe");
+	const rub = useControl(soapHardWaterModel, "rub");
+	const rinse = useControl(soapHardWaterModel, "rinse");
+	const BEN = 392;
+	const bottleX = {
+		soap: 150,
+		detergent: 216
+	};
+	const bottle = (kind) => {
+		const active = state.surfactant === kind;
+		const props = {
+			x: bottleX[kind],
+			y: BEN,
+			contents: kind === "soap" ? "soap" : "deterg.",
+			...active ? { detail: `${state.soap} ${state.soap === 1 ? "ion" : "ions"}` } : {}
+		};
+		return active ? /* @__PURE__ */ jsxs("g", {
+			"data-selected": "true",
+			children: [/* @__PURE__ */ jsx("rect", {
+				x: bottleX[kind] - 32,
+				y: BEN - 140,
+				width: 64,
+				height: 146,
+				rx: 12,
+				fill: "none",
+				stroke: HUE.soft,
+				strokeWidth: STROKE.line,
+				strokeDasharray: "5 3",
+				pointerEvents: "none"
+			}), /* @__PURE__ */ jsx(DropperBottle, {
+				...props,
+				control: squeeze
+			})]
+		}, kind) : /* @__PURE__ */ jsx(FigureAction, {
+			control: surfactant,
+			option: kind,
+			label: kind === "soap" ? "Take the soap bottle" : "Take the detergent bottle",
+			bounds: {
+				x: bottleX[kind] - 30,
+				y: BEN - 138,
+				width: 60,
+				height: 140
+			},
+			children: /* @__PURE__ */ jsx("g", {
+				opacity: .85,
+				children: /* @__PURE__ */ jsx(DropperBottle, { ...props })
+			})
+		}, kind);
+	};
+	const clipId = useFigureId();
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, H],
+		domain: "chem",
+		interactive: true,
+		label: soapHardWaterModel.describe(scenario, state, reading),
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+				id: `${clipId}-frame`,
+				children: /* @__PURE__ */ jsx("rect", {
+					x: FRAME.x,
+					y: FRAME.y,
+					width: FRAME.w,
+					height: FRAME.h,
+					rx: 14
+				})
+			}) }),
+			/* @__PURE__ */ jsx(Bench, {
+				x1: 8,
+				x2: W - 8,
+				y: BEN
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				clipPath: `url(#${clipId}-frame)`,
+				children: [
+					/* @__PURE__ */ jsx("rect", {
+						x: FRAME.x,
+						y: FRAME.y,
+						width: FRAME.w,
+						height: FRAME.h,
+						fill: HUE.paper
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: FRAME.x,
+						y: FRAME.y,
+						width: FRAME.w,
+						height: FRAME.h - CLOTH_H,
+						fill: alpha(HUE.liquid, 24)
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: `M${FRAME.x + HALF} ${FRAME.y}V${CLOTH_TOP}`,
+						stroke: HUE.soft,
+						strokeWidth: STROKE.hair
+					}),
+					/* @__PURE__ */ jsxs("g", {
+						"data-part": "cloth",
+						children: [
+							/* @__PURE__ */ jsx("rect", {
+								x: FRAME.x,
+								y: CLOTH_TOP,
+								width: FRAME.w,
+								height: CLOTH_H,
+								fill: SCENE.plastic.base
+							}),
+							Array.from({ length: 35 }, (_, i) => /* @__PURE__ */ jsx("path", {
+								d: `M${FRAME.x + 6 + i * 12} ${CLOTH_TOP + 3}v${CLOTH_H - 6}`,
+								stroke: SCENE.plastic.edge,
+								strokeWidth: STROKE.hair,
+								opacity: .7
+							}, i)),
+							/* @__PURE__ */ jsx("path", {
+								d: `M${FRAME.x} ${CLOTH_TOP}H${FRAME.x + FRAME.w}`,
+								stroke: SCENE.plastic.edge,
+								strokeWidth: STROKE.line
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Basin, { side: "soft" }),
+			/* @__PURE__ */ jsx(Basin, { side: "hard" }),
+			/* @__PURE__ */ jsx(FigureAction, {
+				control: rub,
+				label: "Rub the cloth",
+				bounds: {
+					x: FRAME.x,
+					y: CLOTH_TOP,
+					width: FRAME.w,
+					height: CLOTH_H
+				},
+				children: /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+					x: FRAME.x,
+					y: CLOTH_TOP,
+					width: FRAME.w,
+					height: CLOTH_H,
+					fill: "transparent"
+				}), /* @__PURE__ */ jsx(LabelChip, {
+					x: FRAME.x + HALF,
+					y: CLOTH_TOP + CLOTH_H / 2,
+					width: 104,
+					children: "rub the cloth"
+				})] })
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: FRAME.x,
+				y: FRAME.y,
+				width: FRAME.w,
+				height: FRAME.h,
+				rx: 14,
+				fill: "none",
+				stroke: HUE.soft,
+				strokeWidth: STROKE.edge,
+				pointerEvents: "none"
+			}),
+			/* @__PURE__ */ jsx(Note, {
+				x: FRAME.x + HALF,
+				y: FRAME.y + FRAME.h + 18,
+				anchor: "middle",
+				children: "magnified, not to scale"
+			}),
+			bottle("soap"),
+			bottle("detergent"),
+			!wipe.hidden ? /* @__PURE__ */ jsx(GripKey, {
+				x: 183,
+				y: BEN + 40,
+				w: 124,
+				h: 24,
+				compact: true,
+				text: "clear the cloth",
+				control: wipe
+			}) : null,
+			/* @__PURE__ */ jsx(WashBottle, {
+				x: 360,
+				y: BEN,
+				control: rinse
+			}),
+			/* @__PURE__ */ jsx(Guide, {
+				next: reading.guide.next !== null,
+				hint: reading.guide.hint,
+				hintY: H - 6,
+				box: reading.guide.next === "squeeze" ? {
+					x: bottleX[state.surfactant] - 37,
+					y: BEN - 146,
+					w: 74,
+					h: 152
+				} : reading.guide.next === "rub" ? {
+					x: FRAME.x,
+					y: CLOTH_TOP,
+					w: FRAME.w,
+					h: CLOTH_H
+				} : reading.guide.next === "rinse" ? {
+					x: 324,
+					y: BEN - 146,
+					w: 72,
+					h: 152
+				} : null
+			})
+		]
+	});
+}
+function SoapHardWaterScene() {
+	const { reading } = useLabView(soapHardWaterModel);
+	return reading.mode === "clean" ? /* @__PURE__ */ jsx(CleanBench, {}) : /* @__PURE__ */ jsx(HardBench, {});
+}
+
+//#endregion
+export { SoapHardWaterScene };