@classytic/labs 0.4.0 → 0.5.0

package/dist/domains/chem/organic/organic-formula-studio/pattern-scene.mjs

@@ -0,0 +1,344 @@
+import { Figure, HUE, STROKE, alpha } from "../../../../kit/figure/figure.mjs";
+import { FigText } from "../../../../kit/figure/text.mjs";
+import { Molecule, atomPoints, moleculeBox } from "../../../../kit/chemistry/molecule.mjs";
+import { SPECIES } from "../../../../kit/chemistry/species.mjs";
+import { patternTopic } from "./topics.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/domains/chem/organic/organic-formula-studio/pattern-scene.tsx
+/**
+* The three pattern scenes: a series ladder, a numbered chain, and an isomer pair.
+*
+* All three are the same two moves. Draw the molecules the lesson is about, from the shared engine
+* so nothing is hand-positioned, and then annotate the ONE difference between them: the CH₂ that
+* each step adds, the carbon the double bond starts on, the branch that moved. The annotation is
+* the lesson; the molecules are only what it is attached to.
+*
+* Each scene withholds its annotation until the learner has committed to an answer. Drawing it up
+* front turns every question into a reading comprehension exercise on the figure.
+*/
+const W = 460;
+const M = 32;
+/** A capsule around some atoms, which is how every annotation here points at something. */
+function Marker({ box, label, tone = "good" }) {
+	const colour = tone === "good" ? HUE.good : HUE[1];
+	const h = box.y1 - box.y0;
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+		x: box.x0,
+		y: box.y0,
+		width: box.x1 - box.x0,
+		height: h,
+		rx: Math.min(16, h / 2),
+		fill: alpha(colour, 11),
+		stroke: alpha(colour, 54),
+		strokeWidth: STROKE.hair,
+		strokeDasharray: "5 4"
+	}), label ? /* @__PURE__ */ jsx(FigText, {
+		x: (box.x0 + box.x1) / 2,
+		y: box.y0 - 8,
+		size: "note",
+		anchor: "middle",
+		tone: tone === "good" ? "good" : "hue-1",
+		children: label
+	}) : null] });
+}
+/**
+* Row positions for a stack of molecules, measured rather than assumed.
+*
+* A fixed row height is wrong here because a displayed molecule's height depends on its branches:
+* butane is two hydrogen rows tall and 2-methylpropane is three, and ethane's `+ CH₂` marker is
+* taller again than the molecule it sits on. Stacked at one pitch, every marker ran into the row
+* below and each label landed on the previous molecule's hydrogens.
+*
+* `extra` is headroom for the annotation above each row, which is part of the row's footprint even
+* though it is not part of the molecule.
+*/
+function stackRows(ids, top, gap, extra = 26) {
+	let cursor = top;
+	return ids.map((id) => {
+		const spec = SPECIES[id];
+		const box = spec ? moleculeBox(spec) : {
+			x0: 0,
+			x1: 0,
+			y0: -40,
+			y1: 40
+		};
+		const height = box.y1 - box.y0 + extra;
+		const cy = cursor + extra + (height - extra) / 2;
+		cursor += height + gap;
+		return {
+			id,
+			cy,
+			height
+		};
+	});
+}
+/** Total height of a stack, for the viewBox. */
+const stackBottom = (rows, extra = 26) => rows.length ? rows[rows.length - 1].cy + (rows[rows.length - 1].height - extra) / 2 : 0;
+/**
+* The box around the CARBONS of a group, hydrogens excluded.
+*
+* A double bond is a bond between two carbons, so a marker built on a single vertex marks the wrong
+* thing: over but-1-ene it came out as a narrow vertical capsule around C1 and its two hydrogens,
+* which points at an atom when the name is about a bond. Spanning both carbons and dropping the
+* hydrogens gives a horizontal capsule lying along the bond itself.
+*/
+function bondBox(specId, x, y, vertices, pad = 14) {
+	const spec = SPECIES[specId];
+	if (!spec) return void 0;
+	const atoms = atomPoints(spec, x, y).filter((atom) => vertices.includes(atom.vertex) && atom.el === "C");
+	if (!atoms.length) return void 0;
+	const xs = atoms.map((a) => a.at[0]);
+	const ys = atoms.map((a) => a.at[1]);
+	return {
+		x0: Math.min(...xs) - pad,
+		x1: Math.max(...xs) + pad,
+		y0: Math.min(...ys) - pad,
+		y1: Math.max(...ys) + pad
+	};
+}
+/**
+* The ink box around ONE substituent and anything nested under it.
+*
+* For the branch on 2-methylpropane: the methyl carbon and its three hydrogens, and nothing else.
+* Asking for the whole vertex instead pulled in carbon 2's own hydrogen and produced a capsule the
+* width of the molecule.
+*/
+function branchBox(specId, x, y, vertex, pad = 15) {
+	const spec = SPECIES[specId];
+	if (!spec) return void 0;
+	const index = (spec.chain[vertex]?.subs ?? []).findIndex((sub) => sub.el === "C");
+	if (index < 0) return void 0;
+	const atoms = atomPoints(spec, x, y).filter((atom) => atom.vertex === vertex && atom.sub === index);
+	if (!atoms.length) return void 0;
+	const xs = atoms.map((a) => a.at[0]);
+	const ys = atoms.map((a) => a.at[1]);
+	return {
+		x0: Math.min(...xs) - pad,
+		x1: Math.max(...xs) + pad,
+		y0: Math.min(...ys) - pad,
+		y1: Math.max(...ys) + pad
+	};
+}
+/** The ink box around one chain vertex and everything hanging off it. */
+function vertexBox(specId, x, y, vertex, pad = 15) {
+	const spec = SPECIES[specId];
+	if (!spec) return void 0;
+	const atoms = atomPoints(spec, x, y).filter((atom) => atom.vertex === vertex);
+	if (!atoms.length) return void 0;
+	const xs = atoms.map((a) => a.at[0]);
+	const ys = atoms.map((a) => a.at[1]);
+	return {
+		x0: Math.min(...xs) - pad,
+		x1: Math.max(...xs) + pad,
+		y0: Math.min(...ys) - pad,
+		y1: Math.max(...ys) + pad
+	};
+}
+/**
+* Three alkanes stacked, with the added CH₂ ringed on each step and the general formula under them.
+*
+* Stacked rather than in a row, because these are displayed formulae and three of them side by side
+* would be nine hundred units wide: at that width the figure's own type is unreadable on a phone.
+* Composing tall is the documented way out.
+*/
+function SeriesLadder({ reveal }) {
+	const rows = stackRows([
+		"methane",
+		"ethane",
+		"propane"
+	], 44, 16);
+	const bottom = stackBottom(rows);
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, bottom + 64],
+		domain: "chem",
+		label: reveal ? "Methane, ethane and propane drawn one above the other. Each step down the ladder adds one carbon and two hydrogens, fitting the general formula CnH2n+2." : "Methane, ethane and propane drawn one above the other as displayed formulae.",
+		children: [
+			/* @__PURE__ */ jsx(FigText, {
+				x: M,
+				y: 28,
+				size: "eyebrow",
+				tone: "soft",
+				children: "THE ALKANES"
+			}),
+			rows.map(({ id, cy }, i) => {
+				const spec = SPECIES[id];
+				const box = moleculeBox(spec);
+				const x = 128 - box.x0;
+				const y = cy - (box.y0 + box.y1) / 2;
+				const added = reveal && i > 0 ? vertexBox(id, x, y, spec.chain.length - 1) : void 0;
+				return /* @__PURE__ */ jsxs("g", { children: [
+					/* @__PURE__ */ jsx(FigText, {
+						x: M,
+						y: cy - 8,
+						size: "note",
+						tone: "soft",
+						children: spec.name
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: M,
+						y: cy + 12,
+						size: "note",
+						tone: "ink",
+						children: spec.formula
+					}),
+					added ? /* @__PURE__ */ jsx(Marker, {
+						box: added,
+						label: "+ CH₂"
+					}) : null,
+					/* @__PURE__ */ jsx(Molecule, {
+						spec,
+						x,
+						y
+					})
+				] }, id);
+			}),
+			reveal ? /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
+				d: `M${M} ${bottom + 16}H428`,
+				stroke: alpha(HUE.soft, 30),
+				strokeWidth: STROKE.hair
+			}), /* @__PURE__ */ jsx(FigText, {
+				x: W / 2,
+				y: bottom + 48,
+				size: "measure",
+				anchor: "middle",
+				tone: "good",
+				children: "CₙH₂ₙ₊₂"
+			})] }) : null
+		]
+	});
+}
+/**
+* Two butenes, each with its carbons numbered and its double bond ringed.
+*
+* The numbers are the point, so they are drawn on the molecule rather than described: the same four
+* carbons, counted from the same end, and the ring sitting on carbon 1 in one drawing and carbon 2
+* in the other. That is the entire content of "but-1-ene against but-2-ene".
+*/
+function NumberedChain({ reveal }) {
+	const rows = stackRows(["but-1-ene", "but-2-ene"], 44, 34);
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, stackBottom(rows) + 34],
+		domain: "chem",
+		label: reveal ? "But-1-ene and but-2-ene, each with its four carbons numbered and the double bond marked. The number in the name is the carbon the double bond starts on." : "But-1-ene and but-2-ene drawn one above the other, both C4H8.",
+		children: [/* @__PURE__ */ jsx(FigText, {
+			x: M,
+			y: 28,
+			size: "eyebrow",
+			tone: "soft",
+			children: "BOTH ARE C₄H₈"
+		}), rows.map(({ id, cy }) => {
+			const spec = SPECIES[id];
+			const box = moleculeBox(spec);
+			const x = 54 - box.x0;
+			const y = cy - (box.y0 + box.y1) / 2;
+			const doubleBondAt = spec.group[0] ?? 0;
+			const marked = reveal ? bondBox(id, x, y, spec.group) : void 0;
+			return /* @__PURE__ */ jsxs("g", { children: [
+				marked ? /* @__PURE__ */ jsx(Marker, {
+					box: marked,
+					tone: "accent"
+				}) : null,
+				/* @__PURE__ */ jsx(Molecule, {
+					spec,
+					x,
+					y
+				}),
+				reveal ? spec.chain.map((_, k) => {
+					const atom = atomPoints(spec, x, y).find((a) => a.vertex === k && a.el === "C");
+					if (!atom) return null;
+					return /* @__PURE__ */ jsx(FigText, {
+						x: atom.at[0],
+						y: box.y1 + y + 2,
+						size: "note",
+						anchor: "middle",
+						tone: k === doubleBondAt ? "hue-1" : "soft",
+						children: k + 1
+					}, k);
+				}) : null,
+				/* @__PURE__ */ jsx(FigText, {
+					x: 428,
+					y: cy - 6,
+					size: "measure",
+					anchor: "end",
+					tone: reveal ? "ink" : "soft",
+					children: reveal ? spec.name : "?"
+				}),
+				reveal ? /* @__PURE__ */ jsx(FigText, {
+					x: 428,
+					y: cy + 16,
+					size: "note",
+					anchor: "end",
+					tone: "soft",
+					children: `double bond on C${doubleBondAt + 1}`
+				}) : null
+			] }, id);
+		})]
+	});
+}
+/**
+* Butane and 2-methylpropane, both C₄H₁₀, with the branch marked.
+*
+* Both fully displayed and in the same notation, which is what the nested substituent in the engine
+* was added for. The comparison is only worth anything if the two drawings are drawn the same way:
+* a fully displayed butane beside a methylpropane with its branch written `CH₃` compares two
+* notations, not two molecules.
+*/
+function IsomerPair({ reveal }) {
+	const rows = stackRows(["butane", "methylpropane"], 44, 18);
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, stackBottom(rows) + 28],
+		domain: "chem",
+		label: reveal ? "Butane and 2-methylpropane, both C4H10. The same four carbons, with one of them moved off the end of the chain onto the middle carbon." : "Butane and 2-methylpropane drawn one above the other as displayed formulae.",
+		children: [/* @__PURE__ */ jsx(FigText, {
+			x: M,
+			y: 28,
+			size: "eyebrow",
+			tone: "soft",
+			children: "COUNT THE ATOMS IN BOTH"
+		}), rows.map(({ id, cy }) => {
+			const spec = SPECIES[id];
+			const box = moleculeBox(spec);
+			const x = 66 - box.x0;
+			const y = cy - (box.y0 + box.y1) / 2;
+			const branch = reveal && id === "methylpropane" ? branchBox(id, x, y, 1, 13) : void 0;
+			return /* @__PURE__ */ jsxs("g", { children: [
+				branch ? /* @__PURE__ */ jsx(Marker, {
+					box: branch,
+					label: "the branch"
+				}) : null,
+				/* @__PURE__ */ jsx(Molecule, {
+					spec,
+					x,
+					y
+				}),
+				/* @__PURE__ */ jsx(FigText, {
+					x: 428,
+					y: cy - 6,
+					size: "measure",
+					anchor: "end",
+					children: spec.formula
+				}),
+				reveal ? /* @__PURE__ */ jsx(FigText, {
+					x: 428,
+					y: cy + 16,
+					size: "note",
+					anchor: "end",
+					tone: "soft",
+					children: spec.name
+				}) : null
+			] }, id);
+		})]
+	});
+}
+function PatternScene({ state }) {
+	const topic = patternTopic(state.topicId);
+	if (!topic) return null;
+	const reveal = state.committed;
+	if (topic.id === "series") return /* @__PURE__ */ jsx(SeriesLadder, { reveal });
+	if (topic.id === "naming") return /* @__PURE__ */ jsx(NumberedChain, { reveal });
+	return /* @__PURE__ */ jsx(IsomerPair, { reveal });
+}
+
+//#endregion
+export { PatternScene };

package/dist/domains/chem/organic/organic-formula-studio/runtime.mjs

@@ -0,0 +1,233 @@
+'use client';
+
+import { ActionButton, AssessedChoiceGroup } from "../../../../kit/controls.mjs";
+import { LiveRegion, Readout } from "../../../../kit/frame.mjs";
+import { AuthoredActivityRuntime } from "../../../../kit/authored-activity-runtime.mjs";
+import { activity, patternActivity } from "./activity.mjs";
+import { BOND_PORTS, attachHydrogen, createFormulaState, formulaMatches } from "./model.mjs";
+import { OrganicFormulaScene } from "./scene.mjs";
+import { createPatternState, patternTopic, transitionPattern } from "./topics.mjs";
+import { PatternScene } from "./pattern-scene.mjs";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/domains/chem/organic/organic-formula-studio/runtime.tsx
+const PORT_LABEL = {
+	north: "top",
+	east: "right",
+	south: "bottom",
+	west: "left"
+};
+/**
+* One lab, four sequences.
+*
+* `topic` replaces the old habit of pointing three different lessons at this lab with a different
+* `initialStepId`, which only changed where the SAME sequence began. A homologous series and an
+* isomer pair are not later steps of a formula-translation exercise, and starting that exercise
+* partway through left each of those lessons with a prompt describing a control it did not have.
+*
+* `initialStepId` is kept, because it is still meaningful inside the formula topic.
+*/
+function OrganicFormulaStudio({ title, prompt, topic = "formulae", initialStepId }) {
+	const pattern = patternTopic(topic);
+	if (pattern) return /* @__PURE__ */ jsx(PatternStudio, {
+		topic: pattern,
+		...title ? { title } : {},
+		...prompt ? { prompt } : {}
+	});
+	return /* @__PURE__ */ jsx(FormulaStudio, {
+		title: title ?? "Organic Formula Studio",
+		prompt: prompt ?? "Build carbon correctly, then translate the same molecule between formula languages.",
+		...initialStepId ? { initialStepId } : {}
+	});
+}
+/**
+* The three pattern topics: commit to an answer, read the annotation that appears, state the rule.
+*
+* A wrong answer leaves the state alone, so the figure cannot reveal its annotation by accident.
+* That is the point of asking before marking: the marking IS the answer, and a learner who sees it
+* first is doing reading comprehension on the figure instead of chemistry.
+*/
+function PatternStudio({ topic, title, prompt }) {
+	const [state, setState] = useState(() => createPatternState(topic.id));
+	const [hint, setHint] = useState();
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		activity: patternActivity,
+		activityId: `organic-pattern-${topic.id}`,
+		eyebrow: "Organic chemistry",
+		title: title ?? topic.title,
+		description: prompt ?? topic.question.prompt,
+		presentation: "investigation",
+		focusLayout: "immersive",
+		transcriptMode: "sr-only",
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: state.committed ? "marked" : "unmarked" }), /* @__PURE__ */ jsx("span", { children: state.explained ? "pattern stated" : "decision required" })] }),
+		controls: ({ sequence, complete }) => {
+			const step = sequence.current.id;
+			if (step === "predict") return /* @__PURE__ */ jsx(AssessedChoiceGroup, {
+				ariaLabel: topic.question.prompt,
+				options: topic.question.choices.map((choice) => ({
+					value: choice.value,
+					label: choice.label
+				})),
+				onChange: (choice) => {
+					const after = transitionPattern(state, {
+						type: "COMMIT",
+						choice
+					});
+					if (after === state) {
+						setHint(topic.question.wrong[choice] ?? "Not that. Read the structures again.");
+						return;
+					}
+					setHint(void 0);
+					setState(after);
+					complete("predicted", choice);
+				}
+			});
+			if (step === "explain") return /* @__PURE__ */ jsx(AssessedChoiceGroup, {
+				ariaLabel: topic.explain.prompt,
+				options: topic.explain.choices.map((choice) => ({
+					value: choice.value,
+					label: choice.label
+				})),
+				onChange: (choice) => {
+					if (choice !== topic.explain.answer) {
+						setHint(topic.explain.wrong[choice] ?? "Not that. Look again at what is marked.");
+						return;
+					}
+					setHint(void 0);
+					setState(transitionPattern(state, { type: "EXPLAIN" }));
+					complete("explained", choice);
+				}
+			});
+			return null;
+		},
+		evidence: ({ sequence }) => {
+			if (hint) return /* @__PURE__ */ jsx(Readout, {
+				value: hint,
+				sub: "not that"
+			});
+			const step = sequence.current.id;
+			if (step === "predict") return /* @__PURE__ */ jsx(Readout, {
+				value: topic.question.prompt,
+				sub: "choose one"
+			});
+			if (step === "explain") return /* @__PURE__ */ jsx(Readout, {
+				value: topic.explain.prompt,
+				sub: "read the marking"
+			});
+			return null;
+		},
+		observation: state.explained ? `${topic.rule} ${topic.use}` : void 0,
+		transcript: /* @__PURE__ */ jsx(LiveRegion, { children: `${topic.title}. ${state.explained ? topic.rule : state.committed ? topic.explain.prompt : topic.question.prompt}` }),
+		children: /* @__PURE__ */ jsx(PatternScene, { state })
+	});
+}
+function FormulaStudio({ title, prompt, initialStepId }) {
+	const [formulaState, setFormulaState] = useState(createFormulaState);
+	const [ethaneChoice, setEthaneChoice] = useState();
+	const [ethanolChoice, setEthanolChoice] = useState();
+	const ethaneSolved = formulaMatches("ethane", "structural", ethaneChoice ?? "");
+	const ethanolSolved = formulaMatches("ethanol", "molecular", ethanolChoice ?? "");
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		activity,
+		activityId: "organic-formula-studio",
+		eyebrow: "Organic chemistry",
+		title,
+		description: prompt,
+		presentation: "construction",
+		focusLayout: "immersive",
+		transcriptMode: "sr-only",
+		initialStepId,
+		status: ({ sequence }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: sequence.current.id === "valence" ? `${formulaState.attached.length} / 4 bonds` : "formula translator" }), /* @__PURE__ */ jsx("span", { children: sequence.current.id === "complete" ? "pattern secured" : "decision required" })] }),
+		controls: ({ sequence, complete }) => {
+			if (sequence.current.id === "valence") return /* @__PURE__ */ jsx("div", {
+				className: "chem-formula-bond-controls",
+				"aria-label": "Hydrogen bond sites",
+				children: BOND_PORTS.map((port) => {
+					const attached = formulaState.attached.includes(port);
+					return /* @__PURE__ */ jsx(ActionButton, {
+						className: "lab-btn-ghost",
+						state: attached ? "attached" : void 0,
+						disabled: attached,
+						onClick: () => {
+							const next = attachHydrogen(formulaState, port);
+							setFormulaState(next);
+							if (next.valenceComplete) complete("valence-built", "four single bonds");
+						},
+						"aria-label": `Attach hydrogen at ${PORT_LABEL[port]}`,
+						children: attached ? "H attached" : `Add H · ${PORT_LABEL[port]}`
+					}, port);
+				})
+			});
+			if (sequence.current.id === "ethane") return /* @__PURE__ */ jsx(AssessedChoiceGroup, {
+				value: ethaneChoice,
+				ariaLabel: "Choose the structural formula of ethane",
+				options: [
+					"CH₃CH₃",
+					"CH₂CH₂",
+					"C₂H₆"
+				].map((value) => ({
+					value,
+					label: value,
+					tone: value === ethaneChoice ? value === "CH₃CH₃" ? "correct" : "wrong" : void 0
+				})),
+				onChange: (value) => {
+					setEthaneChoice(value);
+					if (formulaMatches("ethane", "structural", value)) complete("ethane-matched", value);
+				}
+			});
+			if (sequence.current.id === "ethanol") return /* @__PURE__ */ jsx(AssessedChoiceGroup, {
+				value: ethanolChoice,
+				ariaLabel: "Choose the molecular formula of ethanol",
+				options: [
+					"C₂H₆O",
+					"C₂H₅O",
+					"CH₃CH₂OH"
+				].map((value) => ({
+					value,
+					label: value,
+					tone: value === ethanolChoice ? value === "C₂H₆O" ? "correct" : "wrong" : void 0
+				})),
+				onChange: (value) => {
+					setEthanolChoice(value);
+					if (formulaMatches("ethanol", "molecular", value)) complete("ethanol-matched", value);
+				}
+			});
+			return null;
+		},
+		task: ({ sequence }) => {
+			if (sequence.current.id === "ethane" && ethaneChoice && !ethaneSolved) return /* @__PURE__ */ jsx("p", { children: "A molecular formula counts atoms. A structural formula shows their order." });
+			if (sequence.current.id === "ethanol" && ethanolChoice && !ethanolSolved) return /* @__PURE__ */ jsx("p", { children: "Count every C, H and O. Do not copy the structural grouping." });
+			return null;
+		},
+		evidence: ({ sequence }) => {
+			if (sequence.current.id === "valence" && formulaState.valenceComplete) return /* @__PURE__ */ jsx(Readout, {
+				value: "4 bonds",
+				sub: "carbon valence complete"
+			});
+			if (sequence.current.id === "ethane" && ethaneSolved) return /* @__PURE__ */ jsx(Readout, {
+				value: "C₂H₆ ⇄ CH₃CH₃",
+				sub: "same ethane molecule"
+			});
+			if (sequence.current.id === "ethanol" && ethanolSolved) return /* @__PURE__ */ jsx(Readout, {
+				value: "CH₃CH₂OH ⇄ C₂H₆O",
+				sub: "same ethanol molecule"
+			});
+			return null;
+		},
+		observation: ({ sequence }) => sequence.current.id === "complete" ? "Molecular formulae count atoms. Structural formulae show groups and their order. Displayed formulae show every atom and every bond." : void 0,
+		transcript: ({ sequence }) => /* @__PURE__ */ jsx(LiveRegion, { children: sequence.current.id === "valence" ? `Carbon has ${formulaState.attached.length} of four bonds filled.` : sequence.current.id === "ethane" ? `Ethane choice: ${ethaneChoice ?? "none"}.` : sequence.current.id === "ethanol" ? `Ethanol choice: ${ethanolChoice ?? "none"}.` : "Formula translation pattern complete." }),
+		children: ({ sequence }) => {
+			const step = sequence.current.id;
+			const solved = step === "valence" ? formulaState.valenceComplete : step === "ethane" ? ethaneSolved : step === "ethanol" ? ethanolSolved : true;
+			return /* @__PURE__ */ jsx(OrganicFormulaScene, {
+				step,
+				attached: formulaState.attached,
+				solved
+			});
+		}
+	});
+}
+
+//#endregion
+export { OrganicFormulaStudio as default };