@classytic/labs 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Classytic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,105 @@
+# @classytic/labs
+
+**Authorable, domain-organized interactive learning labs — built on the
+[`@classytic/stage`](../stage) engine.** Labs are React components composed from the
+stage primitives — SVG `<Stage>` (accessible, themeable, agent-drivable) plus a zero-dep
+`<CanvasLayer>` for high-element animations — with HTML controls around them, tokenized
+and validated by Zod prop schemas. Some labs are backed by a portable JSON `SceneDoc`
+(typed dependency graph + resolver + command/undo); many are direct primitive
+compositions. Per-domain subpaths so
+you only ship what you import.
+
+The product isn't a fixed widget catalogue — it's a small, sharp engine + reusable
+**lab families** (templates) a teacher composes and configures. Adding a "new lab" =
+registering one family, not new plumbing.
+
+```bash
+npm i @classytic/labs @classytic/stage
+# required peers:  react, react-dom
+# optional peers:  katex (pretty math), zod (template params + /blocks), lucide-react,
+#                  @classytic/cms-ui + @classytic/cms (for /blocks authoring)
+```
+
+```css
+/* in your global CSS, after `@import "tailwindcss";` */
+@import "@classytic/stage/styles.css";   /* engine tokens + asset kit */
+@import "@classytic/labs/styles.css";     /* control-UI kit + lab tokens */
+```
+
+```ts
+// once, if you use any lab that renders equations (DerivativeExplorer, Grapher, …)
+import "katex/dist/katex.min.css";
+```
+
+## Use a lab
+
+```tsx
+import { Grapher, DerivativeExplorer, BalanceAlgebraLab } from '@classytic/labs/math';
+import { LeverBalanceLab } from '@classytic/labs/physics';
+import { CircuitNetworkLab } from '@classytic/labs/circuits';
+
+// type any equation(s) + expose learner-draggable param sliders:
+<Grapher equations={['a*sin(b*x)']} params={[{ name: 'a', min: 0, max: 3, value: 1 }]} />
+
+// drag a point; the secant becomes the EXACT tangent (symbolic f′), shown in KaTeX:
+<DerivativeExplorer equation="x^2" />
+
+// solve 2x + 1 = 7 by balancing the scale:
+<BalanceAlgebraLab coef={2} addend={1} rhs={7} answer={3} />
+```
+
+## The lab-template registry (`@classytic/labs/catalog`)
+
+Families are listable/instantiable units — the basis for a lab "marketplace" and the
+authoring kit. Params are validated against the family's zod schema before a scene is built.
+
+```ts
+import { listLabTemplates, instantiateTemplate } from '@classytic/labs/catalog';
+
+listLabTemplates();                       // [{ id:'balance-algebra', category:'algebra', … }, …]
+const r = instantiateTemplate('balance-algebra', { coef: 3, addend: 1, rhs: 10, answer: 3 });
+if (r.ok) renderScene(r.doc);             // r.doc is a portable SceneDoc
+else console.warn(r.error, r.issues);     // typed validation errors — no broken scene
+```
+
+Built-in families: `balance-algebra`, `area-model`, `growing-pattern`, `balance-lever`,
+`optics`, `circuit` (more as domains migrate).
+
+## Authoring
+
+Labs are authored with the stage **SceneBuilder** in `authoring` mode (place points,
+sliders, labels; live scalar controls; a pedagogy/`LabMeta` editor) and surfaced in a
+host (e.g. Brihot/Mentora) via the `@classytic/cms-ui` `defineBlock` contract. The lab's
+completion/score events flow to the host's learner seam (xAPI) via `useLearner().report`.
+
+## Subpaths
+
+Domain packs (lab components): `@classytic/labs/{math, physics, chem, circuits, geometry,
+language, ict, commerce, biology, geography, discrete, statistics, ml}`. Shared:
+`@classytic/labs/{core, catalog, schemas}`. Editor blocks: `@classytic/labs/blocks` (all)
+or per-domain `@classytic/labs/blocks/{math, physics, chem, circuits, geometry, ict,
+language, accounting, economics, biology, geography, ml, discrete, statistics}`. Import
+only what you need (tree-shaken at the subpath boundary).
+
+## Rendering model (all on @classytic/stage)
+
+**Every lab renders on the stage engine — the legacy canvas engine is gone.** Two backends:
+
+- **SVG `<Stage>`** (the default — accessible, themeable, SceneDoc-portable): all of math,
+  the physics vector/diagram labs (`VectorScene`, `RiverBoat`, `ProjectileLab`,
+  `GravityDrop`), chemistry (`BohrAtom`, `ReactionProfile`, `ReactionLab`, `Battery`),
+  circuits (`CircuitLab`, `CircuitBuilder`, `CircuitNetworkLab`), and geometry
+  (`GeometryBoard`, `GeometryBuilder`, `IntersectingCircles`).
+- **`<CanvasLayer>`** (stage's zero-dependency raw-Canvas2D escape hatch — HiDPI, shares the
+  engine coords + clock) for the genuine high-element-count labs: `GradientDescent` (per-cell
+  heatmap) and `OrbitLab` (fading 260-point trail). This is the deliberate alternative to a
+  heavy GPU dependency; nothing here needs WebGL.
+
+`@classytic/labs/core` is now just a small domain-neutral toolkit on top of stage (lazy-KaTeX
+`<Tex>`, numerical calculus, easing/keyframes, a tiny reactive value, number utils) — the
+coordinate system, primitives, resolver, clock, control surface, and learner seam all live in
+`@classytic/stage`.
+
+## License
+
+MIT

package/dist/biology/enzyme-rate/index.d.mts

@@ -0,0 +1 @@
+import { EnzymeRateLab, EnzymeRateProps } from "./preset.mjs";

package/dist/biology/enzyme-rate/preset.d.mts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+
+//#region src/biology/enzyme-rate/preset.d.ts
+interface EnzymeRateProps {
+  factor?: 'temperature' | 'pH';
+  optimum?: number;
+  factorMin?: number;
+  factorMax?: number;
+  title?: string;
+  prompt?: string;
+  height?: number;
+  objectives?: string[];
+}
+declare function EnzymeRateLab({
+  factor,
+  optimum,
+  factorMin,
+  factorMax,
+  title,
+  prompt,
+  height,
+  objectives
+}: EnzymeRateProps): ReactNode;
+//#endregion
+export { EnzymeRateLab, EnzymeRateProps };

package/dist/biology/enzyme-rate/preset.mjs

@@ -0,0 +1,256 @@
+'use client';
+
+import { clamp } from "../../core/util.mjs";
+import { Slider, StatusPill } from "../../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Axes, Dot, Label, Polygon, Segment, Stage } from "@classytic/stage";
+
+//#region src/biology/enzyme-rate/preset.tsx
+/**
+* EnzymeRateLab — the optimum, then the cliff: enzymes denature.
+*
+* Drag temperature: the rate climbs to an optimum (more kinetic energy → more
+* successful enzyme–substrate collisions) then CRASHES as the lock-and-key active
+* site is mangled — and crucially, cooling back down does NOT restore it
+* (thermal denaturation is irreversible). The bell is BUILT from plotted dots as
+* you sweep, never pre-drawn. pH mode shows the same optimum but reversibly; a
+* "fresh enzyme" reset is the only way back from a denatured run.
+*
+* Reuses core/util + kit/controls; tokenized; reduced-motion safe (no autoplay —
+* the learner drags). The collision-theory vs denaturation split → a MathDerivation.
+*/
+const CLIFF = 16;
+/** A lock-and-key enzyme glyph; `denat` 0 (intact) → 1 (mangled active site). */
+function Enzyme({ denat }) {
+	const d = clamp(denat, 0, 1);
+	const body = d > .05 ? "var(--stage-danger)" : "var(--stage-accent)";
+	const edge = `color-mix(in oklab, ${body} 60%, black)`;
+	const splay = d * 14;
+	const notch = `M ${40 - splay} 26 L 52 ${48 + d * 8} L 64 ${30 - splay * .5} L 76 ${48 + d * 6} L ${88 + splay} 26`;
+	const keySeated = d < .25;
+	return /* @__PURE__ */ jsxs("svg", {
+		width: 150,
+		height: 120,
+		viewBox: "0 0 130 120",
+		"aria-hidden": true,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M 18 30 Q 14 70 30 96 Q 64 110 98 96 Q 114 70 110 30 Z",
+				fill: `color-mix(in oklab, ${body} 22%, var(--stage-bg))`,
+				stroke: edge,
+				strokeWidth: 2
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: notch,
+				fill: "var(--stage-bg)",
+				stroke: edge,
+				strokeWidth: 2.5,
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ jsx("g", {
+				transform: keySeated ? "translate(52 8)" : `translate(58 -8) rotate(${18 + d * 14} 12 14)`,
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M 0 18 L 12 0 L 24 18 Z",
+					fill: keySeated ? "var(--stage-good)" : "var(--stage-warn)",
+					stroke: "color-mix(in oklab, var(--stage-fg) 40%, transparent)",
+					strokeWidth: 1
+				})
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: 64,
+				y: 114,
+				fill: "var(--stage-muted)",
+				fontSize: 10,
+				fontWeight: 700,
+				textAnchor: "middle",
+				children: d > .4 ? "DENATURED" : keySeated ? "substrate fits" : "binding…"
+			})
+		]
+	});
+}
+function EnzymeRateLab({ factor = "temperature", optimum = 40, factorMin = 0, factorMax = 80, title = "The optimum, then the cliff — enzymes denature", prompt = "Drag the temperature. Past the optimum the enzyme denatures — and cooling back down won’t fix it.", height = 240, objectives }) {
+	const reversible = factor === "pH";
+	const [f, setF] = useState(reversible ? optimum - 2 : factorMin + 5);
+	const peak = useRef(f);
+	const pts = useRef(/* @__PURE__ */ new Map());
+	const [, setTick] = useState(0);
+	useCheckpoint({
+		solved: Math.abs(f - optimum) < 1.5,
+		activity: "enzyme-rate"
+	});
+	const denatFrom = (x) => clamp((x - optimum) / CLIFF, 0, 1);
+	const denat = reversible ? denatFrom(f) : denatFrom(peak.current);
+	const rate = clamp(clamp(f / optimum, 0, 1) * (1 - denat), 0, 1);
+	pts.current.set(Math.round(f), rate);
+	const onF = (v) => {
+		setF(v);
+		if (!reversible && v > peak.current) peak.current = v;
+		setTick((t) => t + 1 & 65535);
+	};
+	const reset = () => {
+		pts.current = /* @__PURE__ */ new Map();
+		peak.current = factorMin + 5;
+		setF(factorMin + 5);
+		setTick((t) => t + 1 & 65535);
+	};
+	const view = {
+		xMin: factorMin - (factorMax - factorMin) * .06,
+		xMax: factorMax + 1,
+		yMin: -.12,
+		yMax: 1.12
+	};
+	const unit = reversible ? "" : " °C";
+	const points = [...pts.current.entries()].sort((a, b) => a[0] - b[0]);
+	const state = denat > .5 ? "denatured" : Math.abs(f - optimum) < 2 ? "optimum" : f < optimum ? "climbing" : "falling";
+	const figure = /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			gap: 12,
+			flexWrap: "wrap",
+			alignItems: "center",
+			borderRadius: 14,
+			background: "var(--stage-bg)",
+			border: "1px solid var(--stage-grid)",
+			padding: 12
+		},
+		children: [/* @__PURE__ */ jsx(Enzyme, { denat }), /* @__PURE__ */ jsx("div", {
+			style: {
+				flex: 1,
+				minWidth: 240
+			},
+			children: /* @__PURE__ */ jsxs(Stage, {
+				view,
+				height,
+				preserveAspect: false,
+				ariaLabel: `Enzyme rate vs ${factor}; ${state}`,
+				children: [
+					/* @__PURE__ */ jsx(Axes, { ticks: false }),
+					/* @__PURE__ */ jsx(Label, {
+						x: (factorMin + factorMax) / 2,
+						y: -.08,
+						text: reversible ? "pH →" : "temperature →",
+						color: "var(--stage-muted)",
+						size: 11
+					}),
+					/* @__PURE__ */ jsx(Label, {
+						x: factorMin,
+						y: .55,
+						text: "rate",
+						color: "var(--stage-muted)",
+						size: 11,
+						dx: -6
+					}),
+					!reversible && /* @__PURE__ */ jsx(Polygon, {
+						points: [
+							{
+								x: optimum + CLIFF,
+								y: 0
+							},
+							{
+								x: factorMax,
+								y: 0
+							},
+							{
+								x: factorMax,
+								y: 1.1
+							},
+							{
+								x: optimum + CLIFF,
+								y: 1.1
+							}
+						],
+						color: "var(--stage-danger)",
+						fill: "var(--stage-danger)",
+						fillOpacity: .08,
+						weight: 0
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: optimum,
+							y: 0
+						},
+						to: {
+							x: optimum,
+							y: 1.1
+						},
+						color: "var(--stage-good)",
+						weight: 1,
+						dashed: true,
+						opacity: .5
+					}),
+					/* @__PURE__ */ jsx(Label, {
+						x: optimum,
+						y: 1.1,
+						text: "optimum",
+						color: "var(--stage-good)",
+						size: 10,
+						dy: -4
+					}),
+					points.map(([x, y]) => /* @__PURE__ */ jsx(Dot, {
+						x,
+						y,
+						r: 3,
+						color: "var(--stage-accent)",
+						opacity: .85
+					}, x)),
+					/* @__PURE__ */ jsx(Dot, {
+						x: f,
+						y: rate,
+						r: 6,
+						color: denat > .5 ? "var(--stage-danger)" : "var(--stage-good)"
+					})
+				]
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		aside: /* @__PURE__ */ jsxs(Callout, {
+			tone: state === "optimum" ? "result" : "info",
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: {
+					fontVariantNumeric: "tabular-nums",
+					fontWeight: 600
+				},
+				children: [
+					reversible ? "pH" : "temperature",
+					" ",
+					f.toFixed(0),
+					unit,
+					" · rate ",
+					(rate * 100).toFixed(0)
+				]
+			}), /* @__PURE__ */ jsx(StatusPill, {
+				ok: state === "optimum",
+				children: state === "optimum" ? "at the optimum ✓" : state === "denatured" ? "denatured — no recovery" : state === "falling" ? reversible ? "past optimum" : "denaturing…" : "climbing (more collisions)"
+			})]
+		}),
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsx(Field, {
+			label: reversible ? "pH" : "temperature",
+			value: `${f.toFixed(0)}${unit}`,
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: f,
+				min: factorMin,
+				max: factorMax,
+				step: 1,
+				onChange: onF,
+				ariaLabel: reversible ? "pH" : "temperature"
+			})
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "lab-chip",
+			onClick: reset,
+			children: "↺ fresh enzyme"
+		})] }),
+		footer: /* @__PURE__ */ jsx(LiveRegion, { children: `${reversible ? "pH" : "Temperature"} ${f.toFixed(0)}, rate ${(rate * 100).toFixed(0)}. ${state}.` }),
+		children: figure
+	});
+}
+
+//#endregion
+export { EnzymeRateLab };

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

@@ -0,0 +1,64 @@
+//#region src/biology/genetic-cross/core.d.ts
+/**
+ * Genetics core — a SERIALIZABLE cross model + the rule that turns a genotype into
+ * a phenotype. Authored as data (so agents can declare it via JSON), resolved into
+ * pure functions for the lab. One model covers simple dominance, multiple alleles,
+ * codominance and incomplete dominance:
+ *
+ *  • each allele has a dominance `rank` + the `trait` it expresses
+ *  • phenotype = the trait(s) of the highest-rank allele(s) present; two equal
+ *    top-rank alleles with different traits express together (CODOMINANCE → "AB")
+ *  • an optional `blends` entry overrides a specific heterozygote
+ *    (INCOMPLETE DOMINANCE → red × white = pink)
+ *
+ * No reinvented numerics — this is just the genetics rule; UI lives in the preset.
+ */
+interface AlleleSpec {
+  symbol: string;
+  rank: number;
+  trait: string;
+}
+interface BlendSpec {
+  pair: [string, string];
+  label: string;
+  color?: string;
+}
+interface CrossModelSpec {
+  trait?: string;
+  alleles: AlleleSpec[];
+  blends?: BlendSpec[];
+  colors?: Record<string, string>;
+}
+interface Phenotype {
+  label: string;
+  color: string;
+}
+interface ResolvedModel {
+  trait: string;
+  alleles: AlleleSpec[];
+  /** order a genotype's two alleles by their declared position (stable display). */
+  norm: (a: string, b: string) => [string, string];
+  phenotypeOf: (a: string, b: string) => Phenotype;
+  phenotypeColor: (label: string) => string;
+  /** every possible genotype as a normalised [a,b] pair (for parent pickers). */
+  genotypes: [string, string][];
+  /** true if `a` masks `b` here — a dominant over a present lower-rank allele. */
+  masks: (a: string, b: string) => boolean;
+}
+declare function resolveModel(spec: CrossModelSpec): ResolvedModel;
+/** Simple dominant/recessive — the classic monohybrid (also backs PunnettCross). */
+declare const monohybridSpec: (letter?: string, dominant?: string, recessive?: string) => CrossModelSpec;
+/** ABO blood groups — multiple alleles + codominance (Aᴬ Aᴮ → AB). */
+declare const BLOOD_TYPE_SPEC: CrossModelSpec;
+/** Incomplete dominance — red × white = pink (a blended heterozygote). */
+declare const INCOMPLETE_SPEC: CrossModelSpec;
+declare const CROSS_PRESETS: {
+  readonly monohybrid: CrossModelSpec;
+  readonly 'blood-type': CrossModelSpec;
+  readonly incomplete: CrossModelSpec;
+};
+type CrossPresetKey = keyof typeof CROSS_PRESETS;
+/** Two independent genes — the classic dihybrid 9:3:3:1 (height × seed colour). */
+declare const DIHYBRID_LOCI: CrossModelSpec[];
+//#endregion
+export { AlleleSpec, BLOOD_TYPE_SPEC, BlendSpec, CROSS_PRESETS, CrossModelSpec, CrossPresetKey, DIHYBRID_LOCI, INCOMPLETE_SPEC, Phenotype, ResolvedModel, monohybridSpec, resolveModel };

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

@@ -0,0 +1,147 @@
+//#region src/biology/genetic-cross/core.ts
+const PALETTE = [
+	"var(--stage-accent)",
+	"var(--stage-accent-2)",
+	"var(--stage-good)",
+	"var(--stage-warn)",
+	"var(--stage-danger)",
+	"var(--stage-muted)"
+];
+const blendKey = (x, y) => [x, y].sort().join("|");
+function resolveModel(spec) {
+	const order = new Map(spec.alleles.map((a, i) => [a.symbol, i]));
+	const rank = new Map(spec.alleles.map((a) => [a.symbol, a.rank]));
+	const trait = new Map(spec.alleles.map((a) => [a.symbol, a.trait]));
+	const blends = new Map((spec.blends ?? []).map((b) => [blendKey(b.pair[0], b.pair[1]), b]));
+	const labelOfPair = (a, b) => {
+		const bl = blends.get(blendKey(a, b));
+		if (bl) return bl.label;
+		const maxR = Math.max(rank.get(a) ?? 0, rank.get(b) ?? 0);
+		const tops = [a, b].filter((s) => (rank.get(s) ?? 0) === maxR);
+		const traits = [...new Set(tops.map((s) => trait.get(s) ?? s))];
+		return traits.length === 1 ? traits[0] : traits.join("");
+	};
+	const syms = spec.alleles.map((a) => a.symbol);
+	const genotypes = [];
+	const seen = [];
+	for (let i = 0; i < syms.length; i++) for (let j = i; j < syms.length; j++) {
+		genotypes.push([syms[i], syms[j]]);
+		const l = labelOfPair(syms[i], syms[j]);
+		if (!seen.includes(l)) seen.push(l);
+	}
+	const colorMap = new Map(seen.map((l, idx) => [l, spec.colors?.[l] ?? PALETTE[idx % PALETTE.length]]));
+	for (const b of spec.blends ?? []) if (b.color) colorMap.set(b.label, b.color);
+	const phenotypeColor = (label) => colorMap.get(label) ?? PALETTE[0];
+	return {
+		trait: spec.trait ?? "phenotype",
+		alleles: spec.alleles,
+		norm: (a, b) => (order.get(a) ?? 0) <= (order.get(b) ?? 0) ? [a, b] : [b, a],
+		phenotypeOf: (a, b) => ({
+			label: labelOfPair(a, b),
+			color: phenotypeColor(labelOfPair(a, b))
+		}),
+		phenotypeColor,
+		genotypes,
+		masks: (a, b) => !blends.has(blendKey(a, b)) && (rank.get(a) ?? 0) > (rank.get(b) ?? 0)
+	};
+}
+/** Simple dominant/recessive — the classic monohybrid (also backs PunnettCross). */
+const monohybridSpec = (letter = "A", dominant = "tall", recessive = "short") => ({
+	trait: "trait",
+	alleles: [{
+		symbol: letter.toUpperCase(),
+		rank: 2,
+		trait: dominant
+	}, {
+		symbol: letter.toLowerCase(),
+		rank: 1,
+		trait: recessive
+	}],
+	colors: {
+		[dominant]: "var(--stage-accent)",
+		[recessive]: "var(--stage-muted)"
+	}
+});
+/** ABO blood groups — multiple alleles + codominance (Aᴬ Aᴮ → AB). */
+const BLOOD_TYPE_SPEC = {
+	trait: "blood type",
+	alleles: [
+		{
+			symbol: "A",
+			rank: 2,
+			trait: "A"
+		},
+		{
+			symbol: "B",
+			rank: 2,
+			trait: "B"
+		},
+		{
+			symbol: "O",
+			rank: 1,
+			trait: "O"
+		}
+	],
+	colors: {
+		A: "var(--stage-accent)",
+		B: "var(--stage-accent-2)",
+		AB: "var(--stage-good)",
+		O: "var(--stage-muted)"
+	}
+};
+/** Incomplete dominance — red × white = pink (a blended heterozygote). */
+const INCOMPLETE_SPEC = {
+	trait: "flower colour",
+	alleles: [{
+		symbol: "R",
+		rank: 1,
+		trait: "red"
+	}, {
+		symbol: "W",
+		rank: 1,
+		trait: "white"
+	}],
+	blends: [{
+		pair: ["R", "W"],
+		label: "pink",
+		color: "var(--stage-accent)"
+	}],
+	colors: {
+		red: "var(--stage-danger)",
+		white: "color-mix(in oklab, var(--stage-fg) 82%, var(--stage-bg))"
+	}
+};
+const CROSS_PRESETS = {
+	monohybrid: monohybridSpec(),
+	"blood-type": BLOOD_TYPE_SPEC,
+	incomplete: INCOMPLETE_SPEC
+};
+/** Two independent genes — the classic dihybrid 9:3:3:1 (height × seed colour). */
+const DIHYBRID_LOCI = [monohybridSpec("A", "tall", "short"), monohybridSpec("B", "yellow", "green")];
+/** every distinct phenotype label a single-locus model can show (stable order). */
+function phenotypeLabels(m) {
+	const seen = [];
+	for (const [a, b] of m.genotypes) {
+		const l = m.phenotypeOf(a, b).label;
+		if (!seen.includes(l)) seen.push(l);
+	}
+	return seen;
+}
+const COMBO_PALETTE = [
+	"var(--stage-good)",
+	"var(--stage-accent)",
+	"var(--stage-accent-2)",
+	"var(--stage-warn)",
+	"var(--stage-danger)",
+	"var(--stage-muted)"
+];
+/** stable colour map for the combined phenotype labels of a multi-locus cross. */
+function comboColorMap(models) {
+	const perLocus = models.map(phenotypeLabels);
+	let combos = [""];
+	for (const labels of perLocus) combos = combos.flatMap((c) => labels.map((l) => c ? `${c} ${l}` : l));
+	return new Map(combos.map((c, i) => [c, COMBO_PALETTE[i % COMBO_PALETTE.length]]));
+}
+
+//#endregion
+export { BLOOD_TYPE_SPEC, CROSS_PRESETS, DIHYBRID_LOCI, INCOMPLETE_SPEC, comboColorMap, monohybridSpec, resolveModel };