@classytic/labs 0.2.0 → 0.4.0

package/dist/domains/chem/soluble-salt-workshop/scene.mjs

@@ -0,0 +1,700 @@
+import { Figure, HUE, STROKE, alpha } from "../../../kit/figure/figure.mjs";
+import { FigText } from "../../../kit/figure/text.mjs";
+import { Glass } from "../../../kit/figure/container.mjs";
+import { pinnedRamp } from "../../../kit/chemistry/observation.mjs";
+import { BunsenBurner, Burette, EvaporatingBasin, FilterFunnel, Tripod, VolumetricPipette } from "../../../kit/chemistry/glassware.mjs";
+import { ROUTE_LABELS, currentSaltCase } from "./model.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/domains/chem/soluble-salt-workshop/scene.tsx
+/**
+* Three salt-preparation benches, drawn on ONE bench.
+*
+* The previous version had the right apparatus and the wrong scene. Four faults, all of them
+* layout rather than draughtsmanship, and all of them fixed here.
+*
+* 1. NOTHING RESTED ON THE BENCH. The bench was a rule at y=358 and every piece was placed by
+*    hand somewhere above it: the conical flask floated 36 units clear, the burette's foot 76.
+*    A bench that nothing touches is a decoration, not a support. Every piece is now seated by
+*    arithmetic off `b.bench` using its own `SEAT` offset, so it cannot drift.
+* 2. THE SCALES DISAGREED. The flask was drawn at roughly twice the visual mass of the pipette
+*    and the burette standing beside it. One `scale` per case now, shared by everything in it.
+* 3. THE BURETTE COLLIDED WITH ITS OWN LABEL, because a burette's caption sits under its stand
+*    and its stand sits under its jet. Apparatus captions now live on ONE band below the bench,
+*    and a stacked pair (burette over flask) gets ONE caption naming the pair, which is what a
+*    caption for that rig should say anyway.
+* 4. TWO BORDERED PANELS COMPETED WITH THE FIGURE: a tinted route pill in the header and a
+*    512x174 rounded card behind the briefing. One container per figure; regions are separated
+*    by hairlines. Both are gone.
+*
+* A fifth problem was pedagogical rather than visual: the scene drew every piece of apparatus at
+* once regardless of the step, so the learner saw a crowded bench instead of the technique. Each
+* step now shows the rig that step is actually about.
+*/
+const M = 40;
+const W = 620;
+/** The apparatus ceiling: nothing is drawn above this, so nothing reaches the title. */
+const TOP = 98;
+/**
+* The frame, per route, because the three benches are genuinely different shapes.
+*
+* A clamped burette delivering into a conical flask is one tall narrow column: the jet has to
+* clear the flask's mouth, so the burette's whole length sits above it, and the rig occupies a
+* third of the width. A precipitation bench is beakers standing side by side. One frame sized for
+* both left the titration case with half the figure empty and the precipitation case with a third
+* of its height empty, which is the dead air that reads as unfinished rather than as spacious.
+*
+* The frame is fixed WITHIN a case, so the figure never resizes as the learner works the steps.
+*/
+const FRAME = {
+	"excess-solid": {
+		bench: 324,
+		w: W
+	},
+	titration: {
+		bench: 350,
+		w: 460
+	},
+	precipitation: {
+		bench: 270,
+		w: W
+	}
+};
+/**
+* Both soluble routes end at the same bench, so they end in the same frame.
+*
+* This is the one place a case changes frame mid-way, and it earns it: the titration rig is
+* dismantled and put away before the solution is concentrated, so the learner is looking at a
+* different bench. Keeping the burette's tall narrow frame for a basin on a tripod left half the
+* figure empty with nothing to explain it.
+*/
+const CRYSTALLISE_FRAME = FRAME["excess-solid"];
+const bands = ({ bench, w }) => ({
+	bench,
+	w,
+	/** One caption band. Every apparatus caption in every route sits here. */
+	caption: bench + 26,
+	rule: bench + 48,
+	status: bench + 76,
+	height: bench + 98
+});
+/**
+* Where each piece meets what holds it up, in its own local units.
+*
+* These are read off the drawings in `kit/chemistry/glassware.tsx`, not guessed: seating by
+* arithmetic is the whole reason a rig can be composed by stacking rather than by nudging
+* numbers until it looks right.
+*/
+const SEAT = {
+	/** The retort stand's foot. */
+	buretteFoot: 218,
+	/** The tip of the burette's jet, where the drop leaves. */
+	buretteJet: 196,
+	/** The tip of the pipette. */
+	pipetteTip: 208,
+	/** The top of the pipette's safety filler. */
+	pipetteTop: -30,
+	/** The lowest point of the basin's bowl. */
+	basin: 71,
+	/** The bottom of the funnel's stem. */
+	funnelStem: 142
+};
+/**
+* Tripod leg length, so a vessel over a burner seats at a known height.
+*
+* It has to clear the BURNER, not just look like a tripod: a bunsen's barrel tops out 86 units
+* above the bench and its flame reaches another 46. A shorter tripod puts the gauze inside the
+* flame, and the flame tip then pokes up past the vessel standing on it.
+*/
+const RIG_H = 132;
+const BEAKER = {
+	w: 104,
+	h: 96
+};
+const FLASK = {
+	w: 104,
+	h: 112
+};
+const BASIN_S = .78;
+const FUNNEL_S = .66;
+const CLEAR = HUE.liquid;
+const CLEAR_FILL = .3;
+const WHITE = HUE.solidWhite;
+const rigTop = (b) => b.bench - RIG_H;
+/** `y` for a `Glass` of height `h` whose base rests on `surface`. */
+const glassOn = (surface, h) => surface - h + STROKE.edge;
+/** `y` for an evaporating basin resting on `surface`. */
+const basinOn = (surface, scale = BASIN_S) => surface - SEAT.basin * scale;
+const left = (cx, w) => cx - w / 2;
+/** A hairline. One container per figure; regions are separated by rules, never by nested cards. */
+function Rule({ y, w = W }) {
+	return /* @__PURE__ */ jsx("path", {
+		d: `M${M} ${y}H${w - M}`,
+		stroke: alpha(HUE.soft, 30),
+		strokeWidth: STROKE.hair
+	});
+}
+function Bench({ b }) {
+	return /* @__PURE__ */ jsx("path", {
+		d: `M${M} ${b.bench}H${b.w - M}`,
+		stroke: HUE.wood,
+		strokeWidth: STROKE.line,
+		strokeLinecap: "round"
+	});
+}
+/**
+* One caption, one grammar: what the thing is, centred under it, on the caption band.
+*
+* A stacked rig gets one caption naming the pair. Captioning a burette and the flask beneath it
+* separately puts two labels at the same x, which is how the collision happened.
+*/
+function Caption({ b, x, children }) {
+	return /* @__PURE__ */ jsx(FigText, {
+		x,
+		y: b.caption,
+		size: "note",
+		anchor: "middle",
+		tone: "soft",
+		children
+	});
+}
+/** Bunsen and gauze-topped tripod. Place the vessel at `rigTop(b)`. */
+function Burner({ b, x, lit }) {
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(Tripod, {
+		x,
+		y: rigTop(b),
+		height: RIG_H
+	}), /* @__PURE__ */ jsx(BunsenBurner, {
+		x,
+		y: b.bench,
+		flame: lit ? "blue" : "off",
+		level: .9
+	})] });
+}
+/**
+* Washed solid blotted between filter papers: a mound on a flat sheet, not a bordered tray.
+*
+* Filter paper is WHITE and so is barium sulfate, which is the awkward part: the shapes have to
+* be told apart by outline rather than by fill, so both are near-paper and the contour does the
+* work. Filling the sheet from the `soft` ramp instead made it a dark grey slab on the bench.
+* `bench` is where the sheet's near corner touches, so it lies on the surface rather than over it.
+*/
+function DriedSolid({ x, bench }) {
+	const paper = pinnedRamp(HUE.solidWhite);
+	const solid = pinnedRamp(HUE.solidWhite);
+	const y = bench - 14;
+	return /* @__PURE__ */ jsxs("g", {
+		role: "img",
+		"aria-label": "Dry white solid between two circular filter papers",
+		"data-apparatus": "dried-solid",
+		children: [
+			/* @__PURE__ */ jsx("ellipse", {
+				cx: x,
+				cy: y,
+				rx: 72,
+				ry: 17,
+				fill: paper.base,
+				stroke: paper.line,
+				strokeWidth: STROKE.edge
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: `M${x - 38} ${y - 1}C${x - 30} ${y - 18} ${x - 8} ${y - 24} ${x + 2} ${y - 19}C${x + 16} ${y - 25} ${x + 34} ${y - 14} ${x + 38} ${y - 1}Z`,
+				fill: solid.light,
+				stroke: solid.line,
+				strokeWidth: STROKE.edge,
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: `M${x + 2} ${y - 19}C${x + 16} ${y - 25} ${x + 34} ${y - 14} ${x + 38} ${y - 1}L${x + 2} ${y - 1}Z`,
+				fill: solid.base
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: `M${x + 44} ${y - 8}C${x + 66} ${y - 6} ${x + 76} ${y + 2} ${x + 70} ${y + 9}C${x + 58} ${y + 3} ${x + 50} ${y - 1} ${x + 44} ${y - 8}Z`,
+				fill: paper.light,
+				stroke: paper.line,
+				strokeWidth: STROKE.edge,
+				strokeLinejoin: "round"
+			})
+		]
+	});
+}
+/** Undissolved solid settled on the floor of a vessel. Drawn as children, so it cannot leak out. */
+function Settled({ x, y, color }) {
+	return /* @__PURE__ */ jsx(Fragment, { children: [
+		-32,
+		-12,
+		10,
+		30
+	].map((dx, index) => /* @__PURE__ */ jsx("circle", {
+		cx: x + dx,
+		cy: y - index % 2 * 5,
+		r: 6,
+		fill: color
+	}, dx)) });
+}
+/**
+* Concentrate, cool, crystallise.
+*
+* These are the last steps of BOTH soluble-salt routes and they are the same steps, so they are
+* drawn once rather than twice with different numbers. Only the colour of the salt differs.
+*
+* The burner and tripod stay on the bench once the basin comes off them. That is what a bench
+* looks like, and it is also what keeps the figure honest at a fixed height: a lone basin at the
+* end of a case sized for a heating rig left two thirds of the frame empty, which reads as a
+* mistake rather than as calm.
+*/
+function Crystallise({ b, phase, color }) {
+	const cx = b.w / 2;
+	const lit = phase === "heating";
+	const basinX = lit ? cx : cx + 108;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx(Burner, {
+			b,
+			x: lit ? cx : cx - 118,
+			lit
+		}),
+		/* @__PURE__ */ jsx(EvaporatingBasin, {
+			x: basinX,
+			y: basinOn(lit ? rigTop(b) : b.bench),
+			scale: BASIN_S,
+			crystals: !lit,
+			liquid: phase !== "dry",
+			material: color
+		}),
+		/* @__PURE__ */ jsx(Caption, {
+			b,
+			x: basinX,
+			children: lit ? "heat gently, never boil dry" : phase === "cooling" ? "off the heat, crystals form" : "filtered off and blotted dry"
+		})
+	] });
+}
+/**
+* A funnel seated in the mouth of a receiving beaker.
+*
+* Two of the three routes filter, and they filter the same way, so this is written once. The
+* funnel's stem goes INTO the beaker: a funnel hovering above its receiver is the detail that
+* makes a bench drawing look like a diagram of a bench rather than a bench.
+*/
+function Filtration({ b, x, filtrate, filtrateFill = .55, residue, active = false }) {
+	const receiverY = glassOn(b.bench, 80);
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(Glass, {
+		x: left(x, BEAKER.w),
+		y: receiverY,
+		w: BEAKER.w,
+		h: 80,
+		shape: "beaker",
+		fill: .42,
+		liquid: filtrate,
+		liquidOpacity: filtrateFill
+	}), /* @__PURE__ */ jsx(FilterFunnel, {
+		x,
+		y: receiverY + 22 - SEAT.funnelStem * FUNNEL_S,
+		scale: FUNNEL_S,
+		residue,
+		active
+	})] });
+}
+/** Acid + insoluble base: warm, add excess, filter it off, concentrate, cool, dry. */
+function ExcessSolidBench({ b, step }) {
+	const cx = b.w / 2;
+	if (step <= 2) {
+		const y = glassOn(rigTop(b), BEAKER.h);
+		return /* @__PURE__ */ jsxs("g", { children: [
+			/* @__PURE__ */ jsx(Burner, {
+				b,
+				x: cx,
+				lit: step === 1
+			}),
+			/* @__PURE__ */ jsx(Glass, {
+				x: left(cx, BEAKER.w),
+				y,
+				w: BEAKER.w,
+				h: BEAKER.h,
+				shape: "beaker",
+				fill: .56,
+				liquid: HUE.cold,
+				liquidOpacity: .6,
+				children: step === 2 ? /* @__PURE__ */ jsx(Settled, {
+					x: cx,
+					y: rigTop(b) - 14,
+					color: HUE.ink
+				}) : null
+			}),
+			/* @__PURE__ */ jsx(Caption, {
+				b,
+				x: cx,
+				children: step === 2 ? "excess copper(II) oxide stays undissolved" : "dilute sulfuric acid, warmed gently"
+			})
+		] });
+	}
+	if (step === 3) return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx(Glass, {
+			x: left(180, BEAKER.w),
+			y: glassOn(b.bench, BEAKER.h),
+			w: BEAKER.w,
+			h: BEAKER.h,
+			shape: "beaker",
+			fill: .18,
+			liquid: HUE.cold,
+			liquidOpacity: .6
+		}),
+		/* @__PURE__ */ jsx(Filtration, {
+			b,
+			x: 430,
+			filtrate: HUE.cold,
+			residue: HUE.ink
+		}),
+		/* @__PURE__ */ jsx(Caption, {
+			b,
+			x: 180,
+			children: "the mixture, poured out"
+		}),
+		/* @__PURE__ */ jsx(Caption, {
+			b,
+			x: 430,
+			children: "black solid held back, blue filtrate through"
+		})
+	] });
+	return /* @__PURE__ */ jsx(Crystallise, {
+		b,
+		phase: step === 4 ? "heating" : step === 5 ? "cooling" : "dry",
+		color: HUE.cold
+	});
+}
+/** Acid + soluble alkali: pipette, indicate, titrate, repeat clean, concentrate, cool. */
+function TitrationBench({ b, step }) {
+	const cx = b.w / 2;
+	if (step >= 5) return /* @__PURE__ */ jsx(Crystallise, {
+		b,
+		phase: step === 5 ? "heating" : "dry",
+		color: WHITE
+	});
+	const flaskY = glassOn(b.bench, FLASK.h);
+	const indicator = step === 2 ? .5 : step === 3 ? .14 : 0;
+	const flask = /* @__PURE__ */ jsx(Glass, {
+		x: left(cx, FLASK.w),
+		y: flaskY,
+		w: FLASK.w,
+		h: FLASK.h,
+		shape: "flask",
+		fill: step === 0 ? 0 : .46,
+		liquid: indicator > 0 ? HUE.danger : CLEAR,
+		liquidOpacity: indicator > 0 ? indicator : CLEAR_FILL
+	});
+	if (step === 0) {
+		const y = flaskY + 18 - SEAT.pipetteTip * .64;
+		return /* @__PURE__ */ jsxs("g", { children: [
+			flask,
+			/* @__PURE__ */ jsx(VolumetricPipette, {
+				x: cx,
+				y,
+				scale: .64,
+				active: true
+			}),
+			/* @__PURE__ */ jsx(Caption, {
+				b,
+				x: cx,
+				children: "pipette delivers a fixed volume"
+			})
+		] });
+	}
+	const buretteY = flaskY - 16 - SEAT.buretteJet * .64;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx(Burette, {
+			x: cx,
+			y: buretteY,
+			scale: .64,
+			stand: (b.bench - buretteY) / .64,
+			standX: -(FLASK.w / 2 + 18) / .64,
+			readingMl: step >= 3 ? 23.4 : 0,
+			dropping: step === 2
+		}),
+		flask,
+		/* @__PURE__ */ jsx(Caption, {
+			b,
+			x: cx,
+			children: step === 1 ? "burette of acid over the alkali" : step === 2 ? "indicator added: the alkali is pink" : step === 3 ? "end-point: the pink just goes" : "clean repeat, no indicator"
+		})
+	] });
+}
+/** Two solutions, one insoluble product: mix, filter, wash, dry. */
+function PrecipitationBench({ b, step }) {
+	const cx = b.w / 2;
+	if (step === 0) {
+		const y = glassOn(b.bench, BEAKER.h);
+		return /* @__PURE__ */ jsxs("g", { children: [
+			[200, 420].map((x) => /* @__PURE__ */ jsx(Glass, {
+				x: left(x, BEAKER.w),
+				y,
+				w: BEAKER.w,
+				h: BEAKER.h,
+				shape: "beaker",
+				fill: .48,
+				liquid: CLEAR,
+				liquidOpacity: CLEAR_FILL
+			}, x)),
+			/* @__PURE__ */ jsx(Caption, {
+				b,
+				x: 200,
+				children: "barium nitrate solution"
+			}),
+			/* @__PURE__ */ jsx(Caption, {
+				b,
+				x: 420,
+				children: "sodium sulfate solution"
+			})
+		] });
+	}
+	if (step === 1) {
+		const y = glassOn(b.bench, BEAKER.h);
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(Glass, {
+			x: left(cx, BEAKER.w),
+			y,
+			w: BEAKER.w,
+			h: BEAKER.h,
+			shape: "beaker",
+			fill: .62,
+			liquid: CLEAR,
+			liquidOpacity: CLEAR_FILL,
+			children: /* @__PURE__ */ jsx(Settled, {
+				x: cx,
+				y: b.bench - 16,
+				color: WHITE
+			})
+		}), /* @__PURE__ */ jsx(Caption, {
+			b,
+			x: cx,
+			children: "a white precipitate forms at once"
+		})] });
+	}
+	if (step <= 3) return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(Filtration, {
+		b,
+		x: cx,
+		filtrate: CLEAR,
+		filtrateFill: CLEAR_FILL,
+		residue: WHITE,
+		active: step === 3
+	}), /* @__PURE__ */ jsx(Caption, {
+		b,
+		x: cx,
+		children: step === 2 ? "the white solid stays on the filter paper" : "distilled water washes the soluble impurities through"
+	})] });
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx(Filtration, {
+			b,
+			x: cx - 130,
+			filtrate: CLEAR,
+			filtrateFill: CLEAR_FILL
+		}),
+		/* @__PURE__ */ jsx(DriedSolid, {
+			x: cx + 140,
+			bench: b.bench
+		}),
+		/* @__PURE__ */ jsx(Caption, {
+			b,
+			x: cx + 140,
+			children: "blotted dry between filter papers"
+		})
+	] });
+}
+/**
+* Before the route is chosen: the goal on the bench, and the one clue that decides the method.
+*
+* The clue used to appear twice, once in a tinted header pill and once inside a bordered card,
+* while the runtime's own readout showed it a third time. It appears once here.
+*/
+function RouteBriefing({ b, saltCase }) {
+	const goal = saltCase.route === "excess-solid" ? HUE.cold : WHITE;
+	const cy = (TOP + b.bench) / 2 + 10;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx(EvaporatingBasin, {
+			x: 178,
+			y: basinOn(b.bench),
+			scale: BASIN_S,
+			crystals: true,
+			liquid: false,
+			material: goal
+		}),
+		/* @__PURE__ */ jsx(Caption, {
+			b,
+			x: 178,
+			children: "what you must end up with"
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: 330,
+			y: cy - 44,
+			size: "eyebrow",
+			tone: "soft",
+			children: "YOUR CLUE"
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: 330,
+			y: cy - 10,
+			size: "measure",
+			children: saltCase.clue
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: 330,
+			y: cy + 22,
+			size: "note",
+			tone: "soft",
+			children: "Pick the method that separates the salt"
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: 330,
+			y: cy + 44,
+			size: "note",
+			tone: "soft",
+			children: "without contaminating or overheating it."
+		})
+	] });
+}
+/** The three routes side by side, once all three are done. Rows, not cards. */
+function CompleteScene() {
+	const rows = [
+		[
+			"Soluble salt, insoluble base",
+			"the base will not dissolve",
+			"add excess, filter, crystallise"
+		],
+		[
+			"Soluble salt, soluble alkali",
+			"nothing is left to filter off",
+			"titrate, repeat clean, crystallise"
+		],
+		[
+			"Insoluble salt",
+			"the product itself drops out",
+			"mix, filter, wash, dry"
+		]
+	];
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, 316],
+		domain: "chem",
+		label: "Three salt preparation routes: excess insoluble solid, acid-alkali titration, and precipitation.",
+		children: [
+			/* @__PURE__ */ jsx(FigText, {
+				x: M,
+				y: 30,
+				size: "eyebrow",
+				tone: "soft",
+				children: "ROUTE MAP COMPLETE"
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: M,
+				y: 62,
+				size: "title",
+				children: "Solubility decides the method"
+			}),
+			/* @__PURE__ */ jsx(Rule, { y: 84 }),
+			rows.map(([target, clue, route], index) => {
+				const y = 124 + index * 72;
+				return /* @__PURE__ */ jsxs("g", { children: [
+					/* @__PURE__ */ jsx(FigText, {
+						x: M,
+						y,
+						size: "label",
+						children: target
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: M,
+						y: y + 24,
+						size: "note",
+						tone: "soft",
+						children: clue
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: 580,
+						y: y + 12,
+						size: "measure",
+						anchor: "end",
+						children: route
+					}),
+					index < rows.length - 1 ? /* @__PURE__ */ jsx(Rule, { y: y + 44 }) : null
+				] }, route);
+			})
+		]
+	});
+}
+/**
+* The briefing keeps ONE frame across all three cases, whatever the bench behind it will be.
+*
+* Choosing a route is a separate screen in the activity sequence, so the frame may change there;
+* making the briefing itself change shape between cases would be a jump with no cause.
+*/
+const BRIEF = {
+	bench: 230,
+	w: W
+};
+function SolubleSaltScene({ state }) {
+	if (state.complete) return /* @__PURE__ */ jsx(CompleteScene, {});
+	const saltCase = currentSaltCase(state);
+	const step = state.actionIndex;
+	const frame = !state.routeChosen ? BRIEF : saltCase.route === "titration" && step >= 5 ? CRYSTALLISE_FRAME : FRAME[saltCase.route];
+	const b = bands(frame);
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [b.w, b.height],
+		domain: "chem",
+		label: `${saltCase.target}. ${saltCase.question} ${state.routeChosen ? saltCase.rule : ""}`,
+		children: [
+			/* @__PURE__ */ jsx(FigText, {
+				x: M,
+				y: 30,
+				size: "eyebrow",
+				tone: "soft",
+				children: `CASE ${state.caseIndex + 1} OF 3 · SALT PREPARATION`
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: M,
+				y: 62,
+				size: "title",
+				children: saltCase.target
+			}),
+			/* @__PURE__ */ jsx(Rule, {
+				y: 84,
+				w: b.w
+			}),
+			!state.routeChosen ? /* @__PURE__ */ jsx(RouteBriefing, {
+				b,
+				saltCase
+			}) : null,
+			state.routeChosen && saltCase.route === "excess-solid" ? /* @__PURE__ */ jsx(ExcessSolidBench, {
+				b,
+				step
+			}) : null,
+			state.routeChosen && saltCase.route === "titration" ? /* @__PURE__ */ jsx(TitrationBench, {
+				b,
+				step
+			}) : null,
+			state.routeChosen && saltCase.route === "precipitation" ? /* @__PURE__ */ jsx(PrecipitationBench, {
+				b,
+				step
+			}) : null,
+			/* @__PURE__ */ jsx(Bench, { b }),
+			/* @__PURE__ */ jsx(Rule, {
+				y: b.rule,
+				w: b.w
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: M,
+				y: b.status,
+				size: "eyebrow",
+				baseline: "middle",
+				tone: state.routeChosen ? "good" : "soft",
+				children: state.routeChosen ? "PREPARATION ROUTE" : "CHOOSE THE ROUTE"
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: b.w - M,
+				y: b.status,
+				size: "measure",
+				baseline: "middle",
+				anchor: "end",
+				tone: state.routeChosen ? "good" : "soft",
+				children: state.routeChosen ? ROUTE_LABELS[saltCase.route] : "?"
+			})
+		]
+	});
+}
+
+//#endregion
+export { SolubleSaltScene };