@classytic/labs 0.2.0 → 0.3.0

package/dist/biology/genetic-cross/grid.mjs

@@ -1,9 +1,11 @@
 'use client';
 
-import { CheckButton, StatusPill } from "../../kit/controls.mjs";
-import { ControlBar, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { ActionButton, StatusPill } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { ChallengeCard, useChallenge, useCheckpoint } from "../../kit/pedagogy.mjs";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@/components/ui/button";
 
 //#region src/biology/genetic-cross/grid.tsx
 /**
@@ -13,7 +15,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * on the edges, fills the N×N grid, runs predict-before-reveal, and reads off the
 * genotype + phenotype tally bars. No genetics logic lives here.
 */
-function CrossGrid({ gametes1, gametes2, gameteLabel, combine, traitLabel, resetKey, predictFirst, header, legend, title, prompt, objectives, showGenotypeTally = true, onReveal }) {
+function CrossGrid({ gametes1, gametes2, gameteLabel, combine, traitLabel, resetKey, predictFirst, header, legend, title, prompt, objectives, showGenotypeTally = true, activity = "genetic-cross", onReveal }) {
 	const [revealed, setRevealed] = useState(!predictFirst);
 	const [highlight, setHighlight] = useState(null);
 	useEffect(() => {
@@ -42,6 +44,33 @@ function CrossGrid({ gametes1, gametes2, gameteLabel, combine, traitLabel, reset
 			...v
 		}));
 	})();
+	const ratio = phenoTally.map((part) => part.n).join(":");
+	const ratioChoices = [...new Set([
+		ratio,
+		"1:1",
+		"3:1",
+		"1:2:1",
+		"9:3:3:1",
+		"1:1:1:1"
+	])].slice(0, 4);
+	const prediction = [{
+		id: "offspring-ratio",
+		prompt: `Before revealing the grid, predict the ${traitLabel} ratio.`,
+		choices: ratioChoices.map((value) => ({
+			value,
+			label: value
+		})),
+		answer: ratio,
+		explain: "The ratio follows from counting each equally likely gamete pairing in the grid. Reveal it now and connect every count to its cells."
+	}];
+	const challenge = useChallenge(prediction);
+	useCheckpoint({
+		solved: revealed && (!predictFirst || challenge.allCorrect),
+		activity
+	});
+	useEffect(() => {
+		challenge.reset();
+	}, [resetKey, predictFirst]);
 	const genoColor = (g) => flat.find((c) => c.genotype === g).phenotype.color;
 	const reveal = () => {
 		setRevealed(true);
@@ -50,40 +79,22 @@ function CrossGrid({ gametes1, gametes2, gameteLabel, combine, traitLabel, reset
 	const Bar = ({ label, parts }) => {
 		const total = parts.reduce((s, p) => s + p.n, 0) || 1;
 		return /* @__PURE__ */ jsxs("div", {
-			style: {
-				flex: 1,
-				minWidth: 200
-			},
+			className: "genetic-tally",
 			children: [/* @__PURE__ */ jsxs("div", {
-				style: {
-					fontSize: 11,
-					fontWeight: 700,
-					color: "var(--stage-muted)",
-					marginBottom: 3
-				},
+				className: "genetic-tally-label",
 				children: [
 					label,
-					": ",
+					":",
+					" ",
 					parts.filter((p) => p.n).map((p) => `${p.n} ${p.tag}`).join(" : ")
 				]
 			}), /* @__PURE__ */ jsx("div", {
-				style: {
-					display: "flex",
-					height: 16,
-					borderRadius: 6,
-					overflow: "hidden",
-					border: "1px solid var(--stage-grid)"
-				},
+				className: "genetic-tally-bar",
 				children: parts.filter((p) => p.n).map((p, i) => /* @__PURE__ */ jsx("div", {
+					className: "genetic-tally-segment",
 					style: {
-						flex: p.n / total,
-						background: p.color,
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center",
-						fontSize: 10,
-						fontWeight: 800,
-						color: "var(--stage-bg)"
+						"--genetic-share": p.n / total,
+						"--genetic-color": p.color
 					},
 					children: p.n
 				}, i))
@@ -93,81 +104,52 @@ function CrossGrid({ gametes1, gametes2, gameteLabel, combine, traitLabel, reset
 	const cellBg = (c) => highlight === c.genotype ? `color-mix(in oklab, ${c.phenotype.color} 34%, var(--stage-bg))` : `color-mix(in oklab, ${c.phenotype.color} 13%, var(--stage-bg))`;
 	const cellAria = (c, r, ci) => revealed ? `${gameteLabel(gametes1[r])} × ${gameteLabel(gametes2[ci])} → ${c.genotype}, ${c.phenotype.label}` : `${gameteLabel(gametes1[r])} × ${gameteLabel(gametes2[ci])}, hidden until revealed`;
 	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [legend, /* @__PURE__ */ jsxs("div", {
-		style: {
-			borderRadius: 14,
-			background: "var(--stage-bg)",
-			border: "1px solid var(--stage-grid)",
-			padding: 16,
-			overflowX: "auto"
-		},
+		className: "biology-model-surface genetic-cross-scene",
 		children: [/* @__PURE__ */ jsxs("div", {
 			role: "table",
+			className: "genetic-cross-grid",
 			"aria-label": revealed ? `Punnett grid, ${gametes1.length} by ${gametes2.length}. ${traitLabel} ratio ${phenoTally.map((p) => `${p.n} ${p.label}`).join(", ")}.` : `Punnett grid, ${gametes1.length} by ${gametes2.length}, offspring hidden until you reveal the cross.`,
 			style: {
-				display: "inline-grid",
-				gridTemplateColumns: `${cellSize}px repeat(${gametes2.length}, ${cellSize}px)`,
-				gap: 4
+				"--genetic-cell-size": `${cellSize}px`,
+				"--genetic-columns": gametes2.length,
+				"--genetic-font-size": `${fontSize}px`
 			},
 			children: [/* @__PURE__ */ jsxs("div", {
 				role: "row",
-				style: { display: "contents" },
+				className: "genetic-cross-row",
 				children: [/* @__PURE__ */ jsx("div", {
 					role: "columnheader",
 					"aria-hidden": true,
-					style: { pointerEvents: "none" }
+					className: "genetic-cross-corner"
 				}), gametes2.map((g, i) => /* @__PURE__ */ jsx("div", {
 					role: "columnheader",
-					style: {
-						textAlign: "center",
-						fontSize,
-						fontWeight: 800,
-						color: "var(--stage-fg)"
-					},
+					className: "genetic-cross-column-header",
 					children: gameteLabel(g)
 				}, i))]
 			}), cells.map((row, r) => /* @__PURE__ */ jsxs("div", {
 				role: "row",
-				style: { display: "contents" },
+				className: "genetic-cross-row",
 				children: [/* @__PURE__ */ jsx("div", {
 					role: "rowheader",
-					style: {
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center",
-						fontSize,
-						fontWeight: 800,
-						color: "var(--stage-fg)"
-					},
+					className: "genetic-cross-row-header",
 					children: gameteLabel(gametes1[r])
-				}), row.map((c, ci) => /* @__PURE__ */ jsx("button", {
+				}), row.map((c, ci) => /* @__PURE__ */ jsx(Button, {
 					type: "button",
+					variant: "ghost",
 					role: "cell",
+					className: "genetic-cross-cell",
+					"data-revealed": revealed || void 0,
 					"aria-label": cellAria(c, r, ci),
 					onClick: () => revealed && setHighlight((h) => h === c.genotype ? null : c.genotype),
 					title: revealed ? `${c.genotype} → ${c.phenotype.label}` : void 0,
-					style: {
-						width: cellSize,
-						height: cellSize,
-						borderRadius: 6,
-						border: "1px solid var(--stage-grid)",
-						background: revealed ? cellBg(c) : "var(--stage-bg)",
-						cursor: revealed ? "pointer" : "default",
-						fontSize,
-						fontWeight: 700,
-						color: "var(--stage-fg)",
-						padding: 0
-					},
+					style: { "--genetic-cell-bg": revealed ? cellBg(c) : "var(--stage-bg)" },
 					children: revealed ? c.genotype : "?"
 				}, ci))]
 			}, r))]
 		}), revealed && highlight && (() => {
 			const c = flat.find((x) => x.genotype === highlight);
 			return /* @__PURE__ */ jsxs("p", {
-				style: {
-					fontSize: 12,
-					color: "var(--stage-muted)",
-					margin: "8px 0 0"
-				},
+				className: "genetic-cross-note",
 				children: [
 					highlight,
 					": ",
@@ -176,9 +158,11 @@ function CrossGrid({ gametes1, gametes2, gameteLabel, combine, traitLabel, reset
 					flat.length,
 					" (",
 					(genoCount(highlight) / flat.length * 100).toFixed(0),
-					"%) → ",
+					"%) →",
+					" ",
 					/* @__PURE__ */ jsx("b", {
-						style: { color: c.phenotype.color },
+						className: "genetic-phenotype",
+						style: { "--genetic-color": c.phenotype.color },
 						children: c.phenotype.label
 					}),
 					c.note ?? ""
@@ -186,32 +170,10 @@ function CrossGrid({ gametes1, gametes2, gameteLabel, combine, traitLabel, reset
 			});
 		})()]
 	})] });
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		objectives,
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [header, !revealed && /* @__PURE__ */ jsxs("div", {
-			className: "lab-bar",
-			children: [/* @__PURE__ */ jsxs("span", {
-				style: { fontWeight: 600 },
-				children: [
-					"Predict the ",
-					traitLabel,
-					" ratio, then…"
-				]
-			}), /* @__PURE__ */ jsx(CheckButton, {
-				onClick: reveal,
-				children: "Reveal the cross"
-			})]
-		})] }),
-		aside: revealed ? /* @__PURE__ */ jsxs("div", {
-			className: "lab-bar",
-			style: {
-				gap: 16,
-				flexWrap: "wrap",
-				flexDirection: "column",
-				alignItems: "stretch"
-			},
+	const inspector = /* @__PURE__ */ jsxs("div", {
+		className: "genetic-cross-inspector",
+		children: [header, revealed ? /* @__PURE__ */ jsxs("div", {
+			className: "genetic-tally-stack",
 			children: [
 				showGenotypeTally && /* @__PURE__ */ jsx(Bar, {
 					label: "Genotype",
@@ -238,9 +200,59 @@ function CrossGrid({ gametes1, gametes2, gameteLabel, combine, traitLabel, reset
 					]
 				})
 			]
-		}) : void 0,
-		footer: /* @__PURE__ */ jsx(LiveRegion, { children: revealed ? `${traitLabel} ratio ${phenoTally.map((p) => `${p.n} ${p.label}`).join(", ")}.` : "Predict, then reveal." }),
-		children: figure
+		}) : /* @__PURE__ */ jsx("p", {
+			className: "genetic-control-hint",
+			children: "Choose the parent alleles, commit a ratio prediction, then reveal every equally likely pairing."
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "biology-genetic-cross-activity",
+		focusLayout: "immersive",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Inheritance",
+				title,
+				description: prompt
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: revealed ? `${traitLabel} revealed` : "predict first" }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					gametes1.length,
+					" × ",
+					gametes2.length,
+					" pairings"
+				] }),
+				/* @__PURE__ */ jsx("span", { children: revealed ? `ratio ${ratio}` : challenge.answeredAll ? "prediction committed" : "offspring hidden" })
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Punnett grid and parent gametes",
+				children: figure
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: "Parent alleles and offspring evidence",
+				children: inspector
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: revealed ? `Each box represents one possible offspring outcome. Counting the ${traitLabel} outcomes gives ${ratio}.` : "The offspring stay hidden until you predict, so the grid tests the segregation model instead of merely displaying an answer." })] }),
+			predictFirst ? /* @__PURE__ */ jsx("section", {
+				className: "lab-authored-task",
+				"aria-label": "Predict the offspring ratio",
+				children: /* @__PURE__ */ jsx(ChallengeCard, {
+					questions: prediction,
+					state: challenge,
+					title: "Predict the offspring ratio"
+				})
+			}) : null,
+			/* @__PURE__ */ jsx(Activity.LiveRegion, { children: revealed ? `${traitLabel} ratio ${phenoTally.map((p) => `${p.n} ${p.label}`).join(", ")}.` : challenge.answeredAll ? "Prediction committed; reveal the cross to test it." : "Predict the ratio, then reveal." }),
+			/* @__PURE__ */ jsxs(Activity.Transport, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "lab-transport-state",
+				"aria-live": "polite",
+				children: [/* @__PURE__ */ jsx("strong", { children: revealed ? "Cross revealed" : challenge.answeredAll ? "Prediction ready" : "Predict the ratio" }), /* @__PURE__ */ jsx("span", { children: revealed ? `${flat.length} offspring outcomes` : `${gametes1.length} × ${gametes2.length} grid` })]
+			}), !revealed ? /* @__PURE__ */ jsx(ActionButton, {
+				className: "lab-primary-action",
+				onClick: reveal,
+				disabled: predictFirst && !challenge.answeredAll,
+				children: "Reveal the cross"
+			}) : null] })
+		]
 	});
 }
 

package/dist/biology/genetic-cross/preset.d.mts

@@ -11,6 +11,7 @@ interface GeneticCrossProps {
   title?: string;
   prompt?: string;
   objectives?: string[];
+  activity?: string;
 }
 declare function GeneticCrossLab({
   spec,
@@ -20,7 +21,8 @@ declare function GeneticCrossLab({
   predictFirst,
   title,
   prompt,
-  objectives
+  objectives,
+  activity
 }: GeneticCrossProps): ReactNode;
 //#endregion
 export { GeneticCrossLab, GeneticCrossProps };

package/dist/biology/genetic-cross/preset.mjs

@@ -2,9 +2,9 @@
 
 import { CrossGrid } from "./grid.mjs";
 import { comboColorMap, monohybridSpec, resolveModel } from "./core.mjs";
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useLearner } from "@classytic/stage";
+import { Button } from "@/components/ui/button";
 
 //#region src/biology/genetic-cross/preset.tsx
 /**
@@ -20,13 +20,11 @@ import { useLearner } from "@classytic/stage";
 * this; SexLinkedCrossLab shares the same CrossGrid.
 */
 const cartesian = (pairs) => pairs.reduce((acc, pair) => acc.flatMap((g) => pair.map((a) => [...g, a])), [[]]);
-function GeneticCrossLab({ spec, loci, parent1, parent2, predictFirst = true, title, prompt, objectives }) {
+function GeneticCrossLab({ spec, loci, parent1, parent2, predictFirst = true, title, prompt, objectives, activity = "genetic-cross" }) {
 	const specs = useMemo(() => loci ?? [spec ?? monohybridSpec()], [loci, spec]);
 	const models = useMemo(() => specs.map(resolveModel), [specs]);
 	const multi = models.length > 1;
 	const comboColors = useMemo(() => comboColorMap(models), [models]);
-	const learner = useLearner();
-	const reported = useRef(false);
 	const toPairs = (p, dflt) => {
 		if (!p) return dflt;
 		return Array.isArray(p[0]) ? p : [p];
@@ -72,36 +70,20 @@ function GeneticCrossLab({ spec, loci, parent1, parent2, predictFirst = true, ti
 		setter(parent.map((pr, L) => L === locus ? models[locus].norm(nextPair[0], nextPair[1]) : pr));
 	};
 	const traitLabel = multi ? "phenotype" : models[0].trait;
-	const alleleStyle = (locus, s) => ({
-		color: multi ? "var(--stage-fg)" : models[0].phenotypeColor(models[0].phenotypeOf(s, s).label),
-		fontWeight: 800
-	});
+	const alleleColor = (s) => multi ? "var(--stage-fg)" : models[0].phenotypeColor(models[0].phenotypeOf(s, s).label);
 	const parentRow = (name, parent, setter) => /* @__PURE__ */ jsxs("span", {
-		style: {
-			display: "inline-flex",
-			alignItems: "center",
-			gap: 8,
-			flexWrap: "wrap"
-		},
+		className: "genetic-parent-row",
 		children: [
 			name,
 			":",
 			parent.map((pair, L) => /* @__PURE__ */ jsx("span", {
-				style: {
-					display: "inline-flex",
-					gap: 2,
-					padding: "2px 4px",
-					borderRadius: 8,
-					background: "color-mix(in oklab, var(--stage-fg) 6%, transparent)"
-				},
-				children: pair.map((s, ai) => /* @__PURE__ */ jsx("button", {
+				className: "genetic-allele-pair",
+				children: pair.map((s, ai) => /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
 					type: "button",
-					className: "lab-chip",
-					style: {
-						minWidth: 26,
-						fontSize: 16,
-						...alleleStyle(L, s)
-					},
+					className: "lab-chip genetic-allele-button",
+					style: { "--genetic-color": alleleColor(s) },
 					onClick: () => cycle(setter, parent, L, ai),
 					"aria-label": `${name} gene ${L + 1} allele ${ai + 1}: ${s}, tap to change`,
 					children: s
@@ -110,36 +92,24 @@ function GeneticCrossLab({ spec, loci, parent1, parent2, predictFirst = true, ti
 		]
 	});
 	const header = /* @__PURE__ */ jsxs("div", {
-		style: {
-			display: "flex",
-			gap: 16,
-			marginBottom: 12,
-			flexWrap: "wrap",
-			alignItems: "center"
-		},
+		className: "genetic-parent-controls",
 		children: [
 			parentRow("Parent 1", p1, setP1),
 			parentRow("Parent 2", p2, setP2),
 			/* @__PURE__ */ jsx("span", {
-				style: {
-					fontSize: 12,
-					color: "var(--stage-muted)"
-				},
+				className: "genetic-control-hint",
 				children: "(tap an allele to cycle it)"
 			})
 		]
 	});
 	const legend = /* @__PURE__ */ jsx("p", {
-		style: {
-			fontSize: 12,
-			color: "var(--stage-muted)",
-			margin: "0 0 8px"
-		},
+		className: "genetic-legend",
 		children: models.map((m, i) => /* @__PURE__ */ jsxs("span", { children: [
 			multi ? `Gene ${i + 1}: ` : `Trait: ${m.trait} · `,
 			m.alleles.map((a, j) => /* @__PURE__ */ jsxs("span", { children: [
 				/* @__PURE__ */ jsx("b", {
-					style: alleleStyle(i, a.symbol),
+					className: "genetic-phenotype",
+					style: { "--genetic-color": alleleColor(a.symbol) },
 					children: a.symbol
 				}),
 				"=",
@@ -163,20 +133,7 @@ function GeneticCrossLab({ spec, loci, parent1, parent2, predictFirst = true, ti
 		prompt: prompt ?? (multi ? "Two genes assort independently, four gametes each, sixteen boxes, four phenotype classes." : "Alleles segregate into gametes, recombine, and the ratio falls out."),
 		objectives,
 		showGenotypeTally: !multi,
-		onReveal: () => {
-			if (!reported.current) {
-				reported.current = true;
-				learner?.report({
-					activity: "genetic-cross",
-					correct: true,
-					score: {
-						raw: 1,
-						max: 1
-					},
-					completion: true
-				});
-			}
-		}
+		activity
 	});
 }
 

package/dist/biology/genetic-cross/sex-linked.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { CrossGrid } from "./grid.mjs";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useLearner } from "@classytic/stage";
+import { Button } from "@/components/ui/button";
 
 //#region src/biology/genetic-cross/sex-linked.tsx
 /**
@@ -42,8 +42,6 @@ function SexLinkedCrossLab({ allele = "B", dominant = "normal", recessive = "col
 	const L = allele;
 	const XD = xTok(L.toUpperCase());
 	const Xr = xTok(L.toLowerCase());
-	const learner = useLearner();
-	const reported = useRef(false);
 	const toTok = (letter) => letter.toUpperCase() === letter ? XD : Xr;
 	const [mom, setMom] = useState([toTok(mother[0]), toTok(mother[1])]);
 	const [dad, setDad] = useState(toTok(father));
@@ -77,45 +75,30 @@ function SexLinkedCrossLab({ allele = "B", dominant = "normal", recessive = "col
 	};
 	const cycleMom = (i) => setMom((m) => m.map((t, j) => j === i ? t === XD ? Xr : XD : t));
 	const cycleDad = () => setDad((d) => d === XD ? Xr : XD);
-	const tokStyle = (t) => ({
-		color: isDom(t) ? "var(--stage-good)" : "var(--stage-danger)",
-		fontWeight: 800
-	});
+	const tokColor = (t) => isDom(t) ? "var(--stage-good)" : "var(--stage-danger)";
 	const header = /* @__PURE__ */ jsxs("div", {
-		style: {
-			display: "flex",
-			gap: 16,
-			marginBottom: 12,
-			flexWrap: "wrap",
-			alignItems: "center"
-		},
+		className: "genetic-parent-controls",
 		children: [
 			/* @__PURE__ */ jsxs("span", {
-				style: {
-					display: "inline-flex",
-					alignItems: "center",
-					gap: 4
-				},
+				className: "genetic-parent-row",
 				children: [
 					"Mother ♀:",
-					/* @__PURE__ */ jsx("button", {
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
 						type: "button",
-						className: "lab-chip",
-						style: {
-							minWidth: 34,
-							...tokStyle(mom[0])
-						},
+						className: "lab-chip genetic-allele-button genetic-allele-button-wide",
+						style: { "--genetic-color": tokColor(mom[0]) },
 						onClick: () => cycleMom(0),
 						"aria-label": "mother first X allele",
 						children: mom[0]
 					}),
-					/* @__PURE__ */ jsx("button", {
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
 						type: "button",
-						className: "lab-chip",
-						style: {
-							minWidth: 34,
-							...tokStyle(mom[1])
-						},
+						className: "lab-chip genetic-allele-button genetic-allele-button-wide",
+						style: { "--genetic-color": tokColor(mom[1]) },
 						onClick: () => cycleMom(1),
 						"aria-label": "mother second X allele",
 						children: mom[1]
@@ -123,38 +106,27 @@ function SexLinkedCrossLab({ allele = "B", dominant = "normal", recessive = "col
 				]
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				style: {
-					display: "inline-flex",
-					alignItems: "center",
-					gap: 4
-				},
+				className: "genetic-parent-row",
 				children: [
 					"Father ♂:",
-					/* @__PURE__ */ jsx("button", {
+					/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
 						type: "button",
-						className: "lab-chip",
-						style: {
-							minWidth: 34,
-							...tokStyle(dad)
-						},
+						className: "lab-chip genetic-allele-button genetic-allele-button-wide",
+						style: { "--genetic-color": tokColor(dad) },
 						onClick: cycleDad,
 						"aria-label": "father X allele",
 						children: dad
 					}),
 					/* @__PURE__ */ jsx("span", {
-						style: {
-							fontWeight: 800,
-							color: "var(--stage-muted)"
-						},
+						className: "genetic-y-token",
 						children: "Y"
 					})
 				]
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				style: {
-					fontSize: 12,
-					color: "var(--stage-muted)"
-				},
+				className: "genetic-control-hint",
 				children: [
 					"(tap an X allele to switch ",
 					XD,
@@ -166,22 +138,22 @@ function SexLinkedCrossLab({ allele = "B", dominant = "normal", recessive = "col
 		]
 	});
 	const legend = /* @__PURE__ */ jsxs("p", {
-		style: {
-			fontSize: 12,
-			color: "var(--stage-muted)",
-			margin: "0 0 8px"
-		},
+		className: "genetic-legend",
 		children: [
-			"X-linked gene: ",
+			"X-linked gene:",
+			" ",
 			/* @__PURE__ */ jsx("b", {
-				style: { color: "var(--stage-good)" },
+				className: "genetic-phenotype",
+				style: { "--genetic-color": "var(--stage-good)" },
 				children: XD
 			}),
 			"=",
 			dominant,
-			" (dominant), ",
+			" (dominant),",
+			" ",
 			/* @__PURE__ */ jsx("b", {
-				style: { color: "var(--stage-danger)" },
+				className: "genetic-phenotype",
+				style: { "--genetic-color": "var(--stage-danger)" },
 				children: Xr
 			}),
 			"=",
@@ -205,20 +177,7 @@ function SexLinkedCrossLab({ allele = "B", dominant = "normal", recessive = "col
 		prompt: prompt ?? "The gene rides on the X. A carrier mother passes it to half her sons, who, with no second X, show it.",
 		objectives,
 		showGenotypeTally: true,
-		onReveal: () => {
-			if (!reported.current) {
-				reported.current = true;
-				learner?.report({
-					activity: "sex-linked-cross",
-					correct: true,
-					score: {
-						raw: 1,
-						max: 1
-					},
-					completion: true
-				});
-			}
-		}
+		activity: "sex-linked-cross"
 	});
 }
 

package/dist/biology/index.d.mts

@@ -8,4 +8,15 @@ import { SexLinkedCrossLab, SexLinkedCrossProps } from "./genetic-cross/sex-link
 import { BASE_COLOR, CODON_TABLE, DNA_BASES, DNA_COMPLEMENT, RNA_BASES, SEQUENCE_PRESETS, SequenceKind, SequenceModel, TRANSCRIBE, buildSequenceModel } from "./sequence/core.mjs";
 import { SequenceLab, SequenceLabProps } from "./sequence/preset.mjs";
 import { CentralDogmaLab, CentralDogmaProps } from "./sequence/central-dogma.mjs";
-export { type AlleleSpec, BASE_COLOR, BLOOD_TYPE_SPEC, type BlendSpec, CODON_TABLE, CROSS_PRESETS, CentralDogmaLab, type CentralDogmaProps, type CrossModelSpec, type CrossPresetKey, DIHYBRID_LOCI, DNA_BASES, DNA_COMPLEMENT, EnzymeRateLab, type EnzymeRateProps, GeneticCrossLab, type GeneticCrossProps, INCOMPLETE_SPEC, type Phenotype, PhotosynthesisFactorsLab, type PhotosynthesisFactorsProps, PunnettCrossLab, type PunnettCrossProps, RNA_BASES, type ResolvedModel, RespirationLab, type RespirationProps, SEQUENCE_PRESETS, type SequenceKind, SequenceLab, type SequenceLabProps, type SequenceModel, SexLinkedCrossLab, type SexLinkedCrossProps, TRANSCRIBE, buildSequenceModel, monohybridSpec, resolveModel };
+import { MITOSIS_CHECKPOINTS, MitosisCheckpoint, MitosisState, mitosisState, nextMitosisCheckpoint } from "./cell-division/core.mjs";
+import { MitosisExplorerLab, MitosisExplorerLabProps, MitosisSceneProps, MitosisSemanticScene } from "./cell-division/preset.mjs";
+import { AssortmentOrientation, MEIOSIS_CHECKPOINTS, MeiosisCheckpoint, MeiosisState, meiosisProducts, meiosisState } from "./cell-division/meiosis-core.mjs";
+import { MeiosisSemanticScene } from "./cell-division/meiosis-scene.mjs";
+import { MeiosisExplorerLab, MeiosisExplorerLabProps, MeiosisSceneProps } from "./cell-division/meiosis-preset.mjs";
+import { MembraneTransportState, TRANSPORT_MODES, TransportMode, membraneTransportState } from "./membrane-transport/core.mjs";
+import { MembraneTransportLab, MembraneTransportLabProps, MembraneTransportSceneProps, MembraneTransportSemanticScene } from "./membrane-transport/preset.mjs";
+import { CellEnergyState, cellEnergyState } from "./cell-energy/core.mjs";
+import { CellEnergyLab, CellEnergyLabProps, CellEnergySceneProps, CellEnergySemanticScene } from "./cell-energy/preset.mjs";
+import { CELL_JOURNEY, CellJourneyStep, CellSystemState, ORGANELLE_FAILURES, OrganelleFailure, cellSystemState } from "./cell-system/core.mjs";
+import { CellSystemLab, CellSystemLabProps, CellSystemSceneProps, CellSystemSemanticScene } from "./cell-system/preset.mjs";
+export { type AlleleSpec, type AssortmentOrientation, BASE_COLOR, BLOOD_TYPE_SPEC, type BlendSpec, CELL_JOURNEY, CODON_TABLE, CROSS_PRESETS, CellEnergyLab, type CellEnergyLabProps, type CellEnergySceneProps, CellEnergySemanticScene, type CellEnergyState, type CellJourneyStep, CellSystemLab, type CellSystemLabProps, type CellSystemSceneProps, CellSystemSemanticScene, type CellSystemState, CentralDogmaLab, type CentralDogmaProps, type CrossModelSpec, type CrossPresetKey, DIHYBRID_LOCI, DNA_BASES, DNA_COMPLEMENT, EnzymeRateLab, type EnzymeRateProps, GeneticCrossLab, type GeneticCrossProps, INCOMPLETE_SPEC, MEIOSIS_CHECKPOINTS, MITOSIS_CHECKPOINTS, type MeiosisCheckpoint, MeiosisExplorerLab, type MeiosisExplorerLabProps, type MeiosisSceneProps, MeiosisSemanticScene, type MeiosisState, MembraneTransportLab, type MembraneTransportLabProps, type MembraneTransportSceneProps, MembraneTransportSemanticScene, type MembraneTransportState, type MitosisCheckpoint, MitosisExplorerLab, type MitosisExplorerLabProps, type MitosisSceneProps, MitosisSemanticScene, type MitosisState, ORGANELLE_FAILURES, type OrganelleFailure, type Phenotype, PhotosynthesisFactorsLab, type PhotosynthesisFactorsProps, PunnettCrossLab, type PunnettCrossProps, RNA_BASES, type ResolvedModel, RespirationLab, type RespirationProps, SEQUENCE_PRESETS, type SequenceKind, SequenceLab, type SequenceLabProps, type SequenceModel, SexLinkedCrossLab, type SexLinkedCrossProps, TRANSCRIBE, TRANSPORT_MODES, type TransportMode, buildSequenceModel, cellEnergyState, cellSystemState, meiosisProducts, meiosisState, membraneTransportState, mitosisState, monohybridSpec, nextMitosisCheckpoint, resolveModel };