@classytic/labs 0.1.0

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

@@ -0,0 +1,239 @@
+'use client';
+
+import { CheckButton, StatusPill } from "../../kit/controls.mjs";
+import { LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/biology/genetic-cross/grid.tsx
+/**
+* CrossGrid — the shared Punnett-grid UI (single source of truth for every cross
+* lab: monohybrid, dihybrid, sex-linked). It is PRESENTATIONAL: the parent labs
+* compute the gametes + the combine rule and hand them in; this draws the gametes
+* 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 }) {
+	const [revealed, setRevealed] = useState(!predictFirst);
+	const [highlight, setHighlight] = useState(null);
+	useEffect(() => {
+		setRevealed(!predictFirst);
+		setHighlight(null);
+	}, [resetKey, predictFirst]);
+	const cells = gametes1.map((g1) => gametes2.map((g2) => combine(g1, g2)));
+	const flat = cells.flat();
+	const n = Math.max(gametes1.length, gametes2.length);
+	const cellSize = n <= 2 ? 54 : n === 3 ? 46 : 40;
+	const fontSize = n <= 2 ? 17 : 13;
+	const genoCount = (g) => flat.filter((c) => c.genotype === g).length;
+	const genotypes = [...new Set(flat.map((c) => c.genotype))];
+	const phenoTally = (() => {
+		const m = /* @__PURE__ */ new Map();
+		for (const c of flat) {
+			const e = m.get(c.phenotype.label) ?? {
+				n: 0,
+				color: c.phenotype.color
+			};
+			e.n += 1;
+			m.set(c.phenotype.label, e);
+		}
+		return [...m.entries()].map(([label, v]) => ({
+			label,
+			...v
+		}));
+	})();
+	const genoColor = (g) => flat.find((c) => c.genotype === g).phenotype.color;
+	const reveal = () => {
+		setRevealed(true);
+		onReveal?.();
+	};
+	const Bar = ({ label, parts }) => {
+		const total = parts.reduce((s, p) => s + p.n, 0) || 1;
+		return /* @__PURE__ */ jsxs("div", {
+			style: {
+				flex: 1,
+				minWidth: 200
+			},
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: {
+					fontSize: 11,
+					fontWeight: 700,
+					color: "var(--stage-muted)",
+					marginBottom: 3
+				},
+				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)"
+				},
+				children: parts.filter((p) => p.n).map((p, i) => /* @__PURE__ */ jsx("div", {
+					style: {
+						flex: p.n / total,
+						background: p.color,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						fontSize: 10,
+						fontWeight: 800,
+						color: "var(--stage-bg)"
+					},
+					children: p.n
+				}, i))
+			})]
+		});
+	};
+	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 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"
+		},
+		children: [
+			header,
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "inline-grid",
+					gridTemplateColumns: `${cellSize}px repeat(${gametes2.length}, ${cellSize}px)`,
+					gap: 4
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", {}),
+					gametes2.map((g, i) => /* @__PURE__ */ jsx("div", {
+						style: {
+							textAlign: "center",
+							fontSize,
+							fontWeight: 800,
+							color: "var(--stage-fg)"
+						},
+						children: gameteLabel(g)
+					}, i)),
+					cells.map((row, r) => /* @__PURE__ */ jsxs(Frag, { children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							fontSize,
+							fontWeight: 800,
+							color: "var(--stage-fg)"
+						},
+						children: gameteLabel(gametes1[r])
+					}), row.map((c, ci) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						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
+						},
+						children: revealed ? c.genotype : "?"
+					}, ci))] }, r))
+				]
+			}),
+			!revealed ? /* @__PURE__ */ jsxs("div", {
+				className: "lab-bar",
+				style: { marginTop: 12 },
+				children: [/* @__PURE__ */ jsxs("span", {
+					style: { fontWeight: 600 },
+					children: [
+						"Predict the ",
+						traitLabel,
+						" ratio, then…"
+					]
+				}), /* @__PURE__ */ jsx(CheckButton, {
+					onClick: reveal,
+					children: "Reveal the cross"
+				})]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "lab-bar",
+				style: {
+					marginTop: 14,
+					gap: 16,
+					flexWrap: "wrap"
+				},
+				children: [
+					showGenotypeTally && /* @__PURE__ */ jsx(Bar, {
+						label: "Genotype",
+						parts: genotypes.map((g) => ({
+							n: genoCount(g),
+							color: genoColor(g),
+							tag: g
+						}))
+					}),
+					/* @__PURE__ */ jsx(Bar, {
+						label: traitLabel,
+						parts: phenoTally.map((p) => ({
+							n: p.n,
+							color: p.color,
+							tag: p.label
+						}))
+					}),
+					/* @__PURE__ */ jsxs(StatusPill, {
+						ok: true,
+						children: [
+							phenoTally.map((p) => p.n).join(":"),
+							" ",
+							phenoTally.map((p) => p.label).join(" : ")
+						]
+					})
+				]
+			}),
+			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"
+					},
+					children: [
+						highlight,
+						": ",
+						genoCount(highlight),
+						" of ",
+						flat.length,
+						" (",
+						(genoCount(highlight) / flat.length * 100).toFixed(0),
+						"%) → ",
+						/* @__PURE__ */ jsx("b", {
+							style: { color: c.phenotype.color },
+							children: c.phenotype.label
+						}),
+						c.note ?? ""
+					]
+				});
+			})()
+		]
+	})] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		footer: /* @__PURE__ */ jsx(LiveRegion, { children: revealed ? `${traitLabel} ratio ${phenoTally.map((p) => `${p.n} ${p.label}`).join(", ")}.` : "Predict, then reveal." }),
+		children: figure
+	});
+}
+function Frag({ children }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+
+//#endregion
+export { CrossGrid };

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

@@ -0,0 +1,3 @@
+import { AlleleSpec, BLOOD_TYPE_SPEC, BlendSpec, CROSS_PRESETS, CrossModelSpec, CrossPresetKey, DIHYBRID_LOCI, INCOMPLETE_SPEC, Phenotype, ResolvedModel, monohybridSpec, resolveModel } from "./core.mjs";
+import { GeneticCrossLab, GeneticCrossProps } from "./preset.mjs";
+import { SexLinkedCrossLab, SexLinkedCrossProps } from "./sex-linked.mjs";

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

@@ -0,0 +1,26 @@
+import { CrossModelSpec } from "./core.mjs";
+import { ReactNode } from "react";
+
+//#region src/biology/genetic-cross/preset.d.ts
+interface GeneticCrossProps {
+  spec?: CrossModelSpec;
+  loci?: CrossModelSpec[];
+  parent1?: string[] | string[][];
+  parent2?: string[] | string[][];
+  predictFirst?: boolean;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+}
+declare function GeneticCrossLab({
+  spec,
+  loci,
+  parent1,
+  parent2,
+  predictFirst,
+  title,
+  prompt,
+  objectives
+}: GeneticCrossProps): ReactNode;
+//#endregion
+export { GeneticCrossLab, GeneticCrossProps };

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

@@ -0,0 +1,184 @@
+'use client';
+
+import { CrossGrid } from "./grid.mjs";
+import { comboColorMap, monohybridSpec, resolveModel } from "./core.mjs";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLearner } from "@classytic/stage";
+
+//#region src/biology/genetic-cross/preset.tsx
+/**
+* GeneticCrossLab — ONE authorable cross tool for every Mendelian pattern, now
+* MULTI-LOCUS. The creator declares one model per gene; the lab derives gametes by
+* independent assortment (one allele per locus → 2ⁿ gametes), fills the Punnett
+* grid via the shared CrossGrid, and reads off the genotype + phenotype ratios.
+*
+*  • one locus  → monohybrid / multiple alleles / codominance / incomplete dominance
+*  • two loci   → dihybrid 9:3:3:1 (4×4 grid)
+*
+* The pattern is DATA, not a bespoke widget. PunnettCross is a monohybrid preset of
+* 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 }) {
+	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];
+	};
+	const defaultHet = () => models.map((m) => [m.alleles[0].symbol, m.alleles[Math.min(1, m.alleles.length - 1)].symbol]);
+	const defaultP2 = () => models.map((m) => [m.alleles[0].symbol, m.alleles[m.alleles.length - 1].symbol]);
+	const [p1, setP1] = useState(() => toPairs(parent1, defaultHet()).map((pr, i) => models[i].norm(pr[0], pr[1])));
+	const [p2, setP2] = useState(() => toPairs(parent2, multi ? defaultHet() : defaultP2()).map((pr, i) => models[i].norm(pr[0], pr[1])));
+	const gametes1 = cartesian(p1);
+	const gametes2 = cartesian(p2);
+	const combine = (g1, g2) => {
+		const perLocus = models.map((m, i) => ({
+			geno: m.norm(g1[i], g2[i]),
+			pheno: m.phenotypeOf(g1[i], g2[i]),
+			m,
+			g1: g1[i],
+			g2: g2[i]
+		}));
+		const genotype = perLocus.map((l) => l.geno.join("")).join("");
+		const label = perLocus.map((l) => l.pheno.label).join(" ");
+		const color = multi ? comboColors.get(label) ?? "var(--stage-accent)" : perLocus[0].pheno.color;
+		let note = "";
+		if (!multi) {
+			const [a, b] = perLocus[0].geno;
+			if (a !== b) {
+				const [hi, lo] = models[0].masks(a, b) ? [a, b] : models[0].masks(b, a) ? [b, a] : ["", ""];
+				if (hi) note = ` — the recessive ${lo} is still there, masked`;
+			}
+		}
+		return {
+			genotype,
+			phenotype: {
+				label,
+				color
+			},
+			note
+		};
+	};
+	const cycle = (setter, parent, locus, slot) => {
+		const syms = models[locus].alleles.map((a) => a.symbol);
+		const i = (syms.indexOf(parent[locus][slot]) + 1) % syms.length;
+		const nextPair = slot === 0 ? [syms[i], parent[locus][1]] : [parent[locus][0], syms[i]];
+		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 parentRow = (name, parent, setter) => /* @__PURE__ */ jsxs("span", {
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 8,
+			flexWrap: "wrap"
+		},
+		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", {
+					type: "button",
+					className: "lab-chip",
+					style: {
+						minWidth: 26,
+						fontSize: 16,
+						...alleleStyle(L, s)
+					},
+					onClick: () => cycle(setter, parent, L, ai),
+					"aria-label": `${name} gene ${L + 1} allele ${ai + 1}: ${s}, tap to change`,
+					children: s
+				}, ai))
+			}, L))
+		]
+	});
+	const header = /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			gap: 16,
+			marginBottom: 12,
+			flexWrap: "wrap",
+			alignItems: "center"
+		},
+		children: [
+			parentRow("Parent 1", p1, setP1),
+			parentRow("Parent 2", p2, setP2),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: 12,
+					color: "var(--stage-muted)"
+				},
+				children: "(tap an allele to cycle it)"
+			})
+		]
+	});
+	const legend = /* @__PURE__ */ jsx("p", {
+		style: {
+			fontSize: 12,
+			color: "var(--stage-muted)",
+			margin: "0 0 8px"
+		},
+		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),
+					children: a.symbol
+				}),
+				"=",
+				a.trait,
+				j < m.alleles.length - 1 ? ", " : ""
+			] }, a.symbol)),
+			i < models.length - 1 ? " · " : ""
+		] }, i))
+	});
+	return /* @__PURE__ */ jsx(CrossGrid, {
+		gametes1,
+		gametes2,
+		gameteLabel: (g) => g.join(""),
+		combine,
+		traitLabel,
+		resetKey: JSON.stringify([p1, p2]),
+		predictFirst,
+		header,
+		legend,
+		title: title ?? (multi ? "Dihybrid cross — 9 : 3 : 3 : 1" : "The cross you can count"),
+		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
+				});
+			}
+		}
+	});
+}
+
+//#endregion
+export { GeneticCrossLab };

package/dist/biology/genetic-cross/sex-linked.d.mts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+//#region src/biology/genetic-cross/sex-linked.d.ts
+interface SexLinkedCrossProps {
+  allele?: string;
+  dominant?: string;
+  recessive?: string;
+  mother?: [string, string];
+  father?: string;
+  predictFirst?: boolean;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+}
+declare function SexLinkedCrossLab({
+  allele,
+  dominant,
+  recessive,
+  mother,
+  father,
+  predictFirst,
+  title,
+  prompt,
+  objectives
+}: SexLinkedCrossProps): ReactNode;
+//#endregion
+export { SexLinkedCrossLab, SexLinkedCrossProps };

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

@@ -0,0 +1,226 @@
+'use client';
+
+import { CrossGrid } from "./grid.mjs";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLearner } from "@classytic/stage";
+
+//#region src/biology/genetic-cross/sex-linked.tsx
+/**
+* SexLinkedCrossLab — an X-linked gene cross (colour blindness, haemophilia…) on
+* the shared CrossGrid. The biology that's special — the Y carries no allele, so
+* males are HEMIZYGOUS (a single recessive X shows) — lives here; the grid/tally/
+* predict UI is reused. The payoff: affected sons from a carrier mother, while
+* daughters are carriers, not affected.
+*/
+const SUP = {
+	A: "ᴬ",
+	B: "ᴮ",
+	C: "ᶜ",
+	D: "ᴰ",
+	G: "ᴳ",
+	H: "ᴴ",
+	N: "ᴺ",
+	R: "ᴿ",
+	a: "ᵃ",
+	b: "ᵇ",
+	c: "ᶜ",
+	d: "ᵈ",
+	g: "ᵍ",
+	h: "ʰ",
+	n: "ⁿ",
+	r: "ʳ"
+};
+const xTok = (letter) => `X${SUP[letter] ?? `^${letter}`}`;
+const COL = {
+	domF: "var(--stage-good)",
+	recF: "var(--stage-danger)",
+	domM: "var(--stage-accent)",
+	recM: "var(--stage-warn)"
+};
+function SexLinkedCrossLab({ allele = "B", dominant = "normal", recessive = "colour-blind", mother = ["B", "b"], father = "B", predictFirst = true, title, prompt, objectives }) {
+	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));
+	const gametes1 = [[mom[0]], [mom[1]]];
+	const gametes2 = [[dad], ["Y"]];
+	const isDom = (t) => t === XD;
+	const combine = (g1, g2) => {
+		const mx = g1[0], fx = g2[0];
+		if (fx === "Y") {
+			const affected = !isDom(mx);
+			return {
+				genotype: `${mx}Y`,
+				phenotype: {
+					label: `${affected ? recessive : dominant} ♂`,
+					color: affected ? COL.recM : COL.domM
+				},
+				note: ` — males are hemizygous: one ${Xr} is enough to show ${recessive}`
+			};
+		}
+		const xs = [mx, fx].sort((a, b) => (isDom(a) ? -1 : 1) - (isDom(b) ? -1 : 1));
+		const domPresent = isDom(mx) || isDom(fx);
+		const carrier = domPresent && (!isDom(mx) || !isDom(fx));
+		return {
+			genotype: `${xs[0]}${xs[1]}`,
+			phenotype: {
+				label: `${domPresent ? dominant : recessive} ♀`,
+				color: domPresent ? COL.domF : COL.recF
+			},
+			note: carrier ? ` — a carrier (one ${Xr}), ${dominant} herself but can pass it on` : ""
+		};
+	};
+	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 header = /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			gap: 16,
+			marginBottom: 12,
+			flexWrap: "wrap",
+			alignItems: "center"
+		},
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "inline-flex",
+					alignItems: "center",
+					gap: 4
+				},
+				children: [
+					"Mother ♀:",
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "lab-chip",
+						style: {
+							minWidth: 34,
+							...tokStyle(mom[0])
+						},
+						onClick: () => cycleMom(0),
+						"aria-label": "mother first X allele",
+						children: mom[0]
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "lab-chip",
+						style: {
+							minWidth: 34,
+							...tokStyle(mom[1])
+						},
+						onClick: () => cycleMom(1),
+						"aria-label": "mother second X allele",
+						children: mom[1]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "inline-flex",
+					alignItems: "center",
+					gap: 4
+				},
+				children: [
+					"Father ♂:",
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "lab-chip",
+						style: {
+							minWidth: 34,
+							...tokStyle(dad)
+						},
+						onClick: cycleDad,
+						"aria-label": "father X allele",
+						children: dad
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							fontWeight: 800,
+							color: "var(--stage-muted)"
+						},
+						children: "Y"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				style: {
+					fontSize: 12,
+					color: "var(--stage-muted)"
+				},
+				children: [
+					"(tap an X allele to switch ",
+					XD,
+					"/",
+					Xr,
+					")"
+				]
+			})
+		]
+	});
+	const legend = /* @__PURE__ */ jsxs("p", {
+		style: {
+			fontSize: 12,
+			color: "var(--stage-muted)",
+			margin: "0 0 8px"
+		},
+		children: [
+			"X-linked gene: ",
+			/* @__PURE__ */ jsx("b", {
+				style: { color: "var(--stage-good)" },
+				children: XD
+			}),
+			"=",
+			dominant,
+			" (dominant), ",
+			/* @__PURE__ */ jsx("b", {
+				style: { color: "var(--stage-danger)" },
+				children: Xr
+			}),
+			"=",
+			recessive,
+			" (recessive). The ",
+			/* @__PURE__ */ jsx("b", { children: "Y" }),
+			" carries no copy."
+		]
+	});
+	return /* @__PURE__ */ jsx(CrossGrid, {
+		gametes1,
+		gametes2,
+		gameteLabel: (g) => g[0],
+		combine,
+		traitLabel: "phenotype & sex",
+		resetKey: JSON.stringify([mom, dad]),
+		predictFirst,
+		header,
+		legend,
+		title: title ?? "Sex linkage — why mostly sons are affected",
+		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
+				});
+			}
+		}
+	});
+}
+
+//#endregion
+export { SexLinkedCrossLab };