@classytic/labs 0.1.0

package/dist/math/interactive/preset.d.mts

@@ -0,0 +1,72 @@
+import { AnswerSpec } from "../../kit/answer-check.mjs";
+import { ReactNode } from "react";
+
+//#region src/math/interactive/preset.d.ts
+interface ProblemParam {
+  name: string;
+  min: number;
+  max: number;
+  step?: number;
+  value: number;
+  label?: string;
+}
+interface ProblemEquation {
+  expr: string;
+  color?: string;
+}
+/** A quantity the engine computes live from the equations + params. */
+type Derived = {
+  kind: 'intersections';
+  of: [number, number];
+  label?: string;
+} | {
+  kind: 'roots';
+  of: number;
+  label?: string;
+} | {
+  kind: 'tangent';
+  of: number;
+  at: number | string;
+} | {
+  kind: 'normal';
+  of: number;
+  at: number | string;
+} | {
+  kind: 'area';
+  between: [number, number];
+  from: number | string;
+  to: number | string;
+  label?: string;
+};
+interface ProblemAsk {
+  prompt: string;
+  answer: AnswerSpec;
+  placeholder?: string;
+}
+interface InteractiveProblemProps {
+  equations: (string | ProblemEquation)[];
+  params?: ProblemParam[];
+  xRange?: [number, number];
+  yRange?: [number, number] | 'auto';
+  derive?: Derived[];
+  ask?: ProblemAsk;
+  title?: string;
+  prompt?: string;
+  height?: number;
+  /** Reporting id for useCheckpoint (defaults to 'interactive-problem'). */
+  activity?: string;
+}
+declare function InteractiveProblem({
+  equations,
+  params,
+  xRange,
+  yRange,
+  derive,
+  ask,
+  title,
+  prompt,
+  height,
+  activity
+}: InteractiveProblemProps): ReactNode;
+//#endregion
+export { Derived, InteractiveProblem, InteractiveProblemProps, ProblemAsk, ProblemEquation, ProblemParam };

package/dist/math/interactive/preset.mjs

@@ -0,0 +1,202 @@
+'use client';
+
+import { Slider } from "../../kit/controls.mjs";
+import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
+import { AskBox } from "../../kit/pedagogy.mjs";
+import { areaBetween, intersections, normalAt, roots, tangentAt } from "../../kit/expr-analysis.mjs";
+import { checkAnswer } from "../../kit/answer-check.mjs";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Axes, Dot, Grid, Plot, Stage, compileExpr } from "@classytic/stage";
+
+//#region src/math/interactive/preset.tsx
+/**
+* InteractiveProblem — the authorable engine: a CREATOR writes a config (equations,
+* params, derived quantities, an optional ask+check) and gets a live, graded
+* interactive graph. No bespoke component per question — the same engine plots any
+* equations, exposes params as sliders, DERIVES what the question needs (roots,
+* intersections, tangent/normal, area) from the symbolic engine, and CHECKS the
+* student's answer symbolically + numerically.
+*
+* This is the spine that makes exam questions AUTHORED CONFIGS, not code. Things a
+* plotter can't draw (phasors, triangles, 3D) are separate authorable representations.
+*/
+const PALETTE = [
+	"var(--stage-accent)",
+	"var(--stage-accent-2)",
+	"var(--stage-good)",
+	"var(--stage-warn)"
+];
+const C_DERIVED = "var(--stage-good)";
+function autoY(curves, xMin, xMax) {
+	const ys = [];
+	for (const cu of curves) {
+		if (!cu.compiled) continue;
+		for (let i = 0; i <= 200; i++) {
+			const y = cu.fn(xMin + (xMax - xMin) * i / 200);
+			if (Number.isFinite(y)) ys.push(y);
+		}
+	}
+	if (!ys.length) return [-10, 10];
+	ys.sort((a, b) => a - b);
+	const lo = ys[Math.floor(ys.length * .02)] ?? 0;
+	const hi = ys[Math.floor(ys.length * .98)] ?? 0;
+	let min = Math.min(lo, 0), max = Math.max(hi, 0);
+	if (min === max) {
+		min -= 1;
+		max += 1;
+	}
+	const pad = (max - min) * .12;
+	return [min - pad, max + pad];
+}
+function InteractiveProblem({ equations, params = [], xRange = [-6.5, 6.5], yRange = "auto", derive = [], ask, title = "Interactive problem", prompt, height = 340, activity = "interactive-problem" }) {
+	const [vals, setVals] = useState(() => Object.fromEntries(params.map((p) => [p.name, p.value])));
+	const resolve = (v) => typeof v === "number" ? v : vals[v] ?? NaN;
+	const curves = useMemo(() => {
+		return equations.map((e, i) => {
+			const eq = typeof e === "string" ? { expr: e } : e;
+			const c = compileExpr(eq.expr);
+			const compiled = c.error !== void 0 ? null : c;
+			const fn = (x) => compiled ? compiled.fn({
+				...vals,
+				x
+			}) : NaN;
+			return {
+				expr: eq.expr,
+				color: eq.color ?? PALETTE[i % PALETTE.length],
+				fn,
+				compiled
+			};
+		});
+	}, [equations, vals]);
+	const [xMin, xMax] = xRange;
+	const [yMin, yMax] = yRange === "auto" ? autoY(curves, xMin, xMax) : yRange;
+	const overlays = [];
+	const readouts = [];
+	derive.forEach((d, di) => {
+		if (d.kind === "intersections") {
+			const [i, j] = d.of;
+			const pts = intersections(curves[i].fn, curves[j].fn, xMin, xMax);
+			pts.forEach((p, k) => overlays.push(/* @__PURE__ */ jsx(Dot, {
+				x: p.x,
+				y: p.y,
+				r: 5,
+				color: C_DERIVED
+			}, `x${di}-${k}`)));
+			readouts.push({
+				label: d.label ?? "intersection points",
+				value: String(pts.length)
+			});
+		} else if (d.kind === "roots") {
+			const rs = roots(curves[d.of].fn, xMin, xMax);
+			rs.forEach((x, k) => overlays.push(/* @__PURE__ */ jsx(Dot, {
+				x,
+				y: 0,
+				r: 5,
+				color: C_DERIVED
+			}, `r${di}-${k}`)));
+			readouts.push({
+				label: d.label ?? "roots",
+				value: rs.map((x) => x.toFixed(2)).join(", ") || "none"
+			});
+		} else if (d.kind === "tangent" || d.kind === "normal") {
+			const c = curves[d.of];
+			if (c.compiled) {
+				const line = (d.kind === "tangent" ? tangentAt : normalAt)(c.compiled.ast, resolve(d.at), "x", vals);
+				if (line) {
+					overlays.push(/* @__PURE__ */ jsx(Plot.OfX, {
+						y: line.f,
+						color: C_DERIVED,
+						weight: 2,
+						dashed: true
+					}, `l${di}`));
+					overlays.push(/* @__PURE__ */ jsx(Dot, {
+						x: line.at.x,
+						y: line.at.y,
+						r: 5,
+						color: C_DERIVED
+					}, `lp${di}`));
+					readouts.push({
+						label: d.kind,
+						value: `y = ${line.m.toFixed(2)}x ${line.c < 0 ? "−" : "+"} ${Math.abs(line.c).toFixed(2)}`
+					});
+				}
+			}
+		} else if (d.kind === "area") {
+			const [i, j] = d.between;
+			const A = areaBetween(curves[i].fn, curves[j].fn, resolve(d.from), resolve(d.to));
+			readouts.push({
+				label: d.label ?? "area",
+				value: A.toFixed(3)
+			});
+		}
+	});
+	const figure = /* @__PURE__ */ jsxs(Stage, {
+		view: {
+			xMin,
+			xMax,
+			yMin,
+			yMax
+		},
+		height,
+		preserveAspect: false,
+		ariaLabel: title,
+		children: [
+			/* @__PURE__ */ jsx(Grid, {}),
+			/* @__PURE__ */ jsx(Axes, {}),
+			curves.map((cu, i) => cu.compiled && /* @__PURE__ */ jsx(Plot.OfX, {
+				y: cu.fn,
+				color: cu.color,
+				weight: 2.5
+			}, i)),
+			overlays
+		]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		aside: readouts.length ? /* @__PURE__ */ jsx(Callout, {
+			tone: "result",
+			children: /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "grid",
+					gap: 6,
+					fontVariantNumeric: "tabular-nums"
+				},
+				children: readouts.map((r, i) => /* @__PURE__ */ jsxs("span", {
+					style: { fontSize: 13 },
+					children: [
+						r.label,
+						": ",
+						/* @__PURE__ */ jsx("strong", { children: r.value })
+					]
+				}, i))
+			})
+		}) : void 0,
+		controls: params.length ? /* @__PURE__ */ jsx(ControlBar, { children: params.map((p) => /* @__PURE__ */ jsx(Field, {
+			label: p.label ?? p.name,
+			value: (vals[p.name] ?? p.value).toFixed(p.step && p.step < 1 ? 2 : 0),
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: vals[p.name] ?? p.value,
+				min: p.min,
+				max: p.max,
+				step: p.step ?? 1,
+				onChange: (n) => setVals((v) => ({
+					...v,
+					[p.name]: n
+				})),
+				ariaLabel: p.label ?? p.name
+			})
+		}, p.name)) }) : void 0,
+		footer: ask ? /* @__PURE__ */ jsx(AskBox, {
+			prompt: ask.prompt,
+			placeholder: ask.placeholder,
+			activity,
+			check: (r) => checkAnswer(ask.answer, r)
+		}) : void 0,
+		children: figure
+	});
+}
+
+//#endregion
+export { InteractiveProblem };

package/dist/math/limit-explorer/index.d.mts

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

package/dist/math/limit-explorer/preset.d.mts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+
+//#region src/math/limit-explorer/preset.d.ts
+interface LimitExplorerProps {
+  equation?: string;
+  xRange?: [number, number];
+  c?: number;
+  title?: string;
+  height?: number;
+}
+declare function LimitExplorer({
+  equation,
+  xRange,
+  c: cInit,
+  title,
+  height
+}?: LimitExplorerProps): ReactNode;
+//#endregion
+export { LimitExplorer, LimitExplorerProps };

package/dist/math/limit-explorer/preset.mjs

@@ -0,0 +1,216 @@
+'use client';
+
+import { clamp } from "../../core/util.mjs";
+import { estimateOneSidedLimit } from "../../core/numeric.mjs";
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { LabStyles } from "../../kit/controls.mjs";
+import { ControlBar, LabFrame } from "../../kit/frame.mjs";
+import { Fragment, useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Axes, Grid, MovableDot, Plot, Point, Segment, Stage, compileExpr, evaluate, toLatex } from "@classytic/stage";
+
+//#region src/math/limit-explorer/preset.tsx
+/**
+* LimitExplorer — "what value does f approach as x → c?", on @classytic/stage.
+* Plots f(x), drops a dashed line at x = c, and walks dots in from both sides
+* (h = 1, 0.1, 0.01, 0.001). When the two sides converge to one value, that's
+* the limit — even where f(c) itself is a hole. Reuses `estimateOneSidedLimit`.
+*/
+const STEPS = [
+	1,
+	.1,
+	.01,
+	.001
+];
+const fmt$1 = (v) => Number.isFinite(v) ? v.toFixed(4) : "—";
+function LimitExplorer({ equation = "(x^2 - 1)/(x - 1)", xRange = [-1, 3], c: cInit = 1, title = "Approaching a limit", height = 320 } = {}) {
+	const [xMin, xMax] = xRange;
+	const [c, setC] = useState(clamp(cInit, xMin, xMax));
+	useEffect(() => {
+		setC(clamp(cInit, xMin, xMax));
+	}, [
+		cInit,
+		xMin,
+		xMax
+	]);
+	const model = useMemo(() => {
+		const res = compileExpr(equation);
+		if (!res.ast) return {
+			ok: false,
+			error: res.error ?? "Invalid expression"
+		};
+		const ast = res.ast;
+		return {
+			ok: true,
+			f: (x) => evaluate(ast, { x }),
+			fLatex: toLatex(ast)
+		};
+	}, [equation]);
+	if (!model.ok) return /* @__PURE__ */ jsxs("div", {
+		className: "not-prose",
+		children: [/* @__PURE__ */ jsx("p", {
+			style: { fontWeight: 600 },
+			children: title
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				padding: 12,
+				fontSize: 13,
+				color: "var(--stage-danger)"
+			},
+			children: [
+				"“",
+				equation,
+				"” — ",
+				model.error
+			]
+		})]
+	});
+	const { f, fLatex } = model;
+	const ys = [];
+	for (let i = 0; i <= 240; i++) {
+		const y = f(xMin + (xMax - xMin) * i / 240);
+		if (Number.isFinite(y)) ys.push(y);
+	}
+	ys.sort((p, q) => p - q);
+	let yMin = ys[Math.floor(ys.length * .04)] ?? -1;
+	let yMax = ys[Math.floor(ys.length * .96)] ?? 1;
+	if (yMin === yMax) {
+		yMin -= 1;
+		yMax += 1;
+	}
+	const pad = (yMax - yMin) * .15;
+	[yMin, yMax] = [yMin - pad, yMax + pad];
+	const left = estimateOneSidedLimit(f, c, -1);
+	const right = estimateOneSidedLimit(f, c, 1);
+	const agrees = left.converging && right.converging && Math.abs(left.value - right.value) < .01 * (1 + Math.abs(left.value));
+	const estimate = agrees ? (left.value + right.value) / 2 : NaN;
+	const atC = f(c);
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LabStyles, {}), /* @__PURE__ */ jsxs(Stage, {
+		view: {
+			xMin,
+			xMax,
+			yMin,
+			yMax
+		},
+		height,
+		ariaLabel: `Limit of ${equation} as x approaches ${c.toFixed(2)}`,
+		children: [
+			/* @__PURE__ */ jsx(Grid, {}),
+			/* @__PURE__ */ jsx(Axes, {}),
+			/* @__PURE__ */ jsx(Plot.OfX, {
+				y: f,
+				domain: [xMin, xMax],
+				color: "var(--stage-accent)",
+				weight: 2.5
+			}),
+			/* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: c,
+					y: yMin
+				},
+				to: {
+					x: c,
+					y: yMax
+				},
+				color: "var(--stage-muted)",
+				weight: 1,
+				dashed: true
+			}),
+			STEPS.map((hstep, i) => {
+				const r = 4 - i * .6;
+				const yl = f(c - hstep);
+				const yr = f(c + hstep);
+				return /* @__PURE__ */ jsxs(Fragment, { children: [Number.isFinite(yl) && /* @__PURE__ */ jsx(Point, {
+					x: c - hstep,
+					y: yl,
+					r,
+					color: "var(--stage-accent-2)"
+				}), Number.isFinite(yr) && /* @__PURE__ */ jsx(Point, {
+					x: c + hstep,
+					y: yr,
+					r,
+					color: "var(--stage-good)"
+				})] }, hstep);
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: {
+					x: c,
+					y: 0
+				},
+				onMove: (p) => setC(clamp(p.x, xMin, xMax)),
+				constrain: "horizontal",
+				color: "var(--stage-fg)",
+				ariaLabel: "approach point c"
+			})
+		]
+	})] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsxs("span", {
+				style: { opacity: .8 },
+				children: ["c = ", /* @__PURE__ */ jsx("strong", { children: c.toFixed(3) })]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					color: "var(--stage-good)",
+					fontWeight: 600
+				},
+				children: agrees ? /* @__PURE__ */ jsx(Tex$1, { tex: `\\text{limit} \\approx ${estimate.toFixed(3)}` }) : "limit DNE"
+			}),
+			!Number.isFinite(atC) && /* @__PURE__ */ jsxs("span", {
+				style: { opacity: .65 },
+				children: [
+					"f(",
+					+c.toFixed(2),
+					") is a hole"
+				]
+			})
+		] }),
+		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				padding: "8px 2px 0",
+				fontSize: 14
+			},
+			children: /* @__PURE__ */ jsx(Tex$1, { tex: `\\lim_{x \\to ${+c.toFixed(2)}} ${fLatex.includes("frac") ? fLatex : `\\left(${fLatex}\\right)`} ${agrees ? `\\approx ${+estimate.toFixed(3)}` : "\\text{ does not exist}"}` })
+		}), /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "grid",
+				gridTemplateColumns: "auto 1fr 1fr",
+				gap: "1px 16px",
+				padding: "6px 2px",
+				fontFamily: "ui-monospace, monospace",
+				fontSize: 12
+			},
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					style: { opacity: .6 },
+					children: /* @__PURE__ */ jsx(Tex$1, { tex: "h" })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: { opacity: .6 },
+					children: /* @__PURE__ */ jsx(Tex$1, { tex: "f(c-h)" })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: { opacity: .6 },
+					children: /* @__PURE__ */ jsx(Tex$1, { tex: "f(c+h)" })
+				}),
+				STEPS.map((h) => /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("span", { children: h }),
+					/* @__PURE__ */ jsx("span", {
+						style: { color: "var(--stage-accent-2)" },
+						children: fmt$1(f(c - h))
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: { color: "var(--stage-good)" },
+						children: fmt$1(f(c + h))
+					})
+				] }, h))
+			]
+		})] }),
+		children: figure
+	});
+}
+
+//#endregion
+export { LimitExplorer };

package/dist/math/linear-system/index.d.mts

@@ -0,0 +1 @@
+import { LinearSystemLab, LinearSystemProps, SystemLine } from "./preset.mjs";

package/dist/math/linear-system/preset.d.mts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+
+//#region src/math/linear-system/preset.d.ts
+interface SystemLine {
+  m: number;
+  b: number;
+  label?: string;
+  color?: string;
+}
+interface LinearSystemProps {
+  /** Two lines y = m·x + b. They must not be parallel. */
+  lines?: [SystemLine, SystemLine];
+  xRange?: [number, number];
+  yRange?: [number, number];
+  title?: string;
+  prompt?: string;
+  height?: number;
+}
+declare function LinearSystemLab({
+  lines,
+  xRange,
+  yRange,
+  title,
+  prompt,
+  height
+}?: LinearSystemProps): ReactNode;
+//#endregion
+export { LinearSystemLab, LinearSystemProps, SystemLine };

package/dist/math/linear-system/preset.mjs

@@ -0,0 +1,164 @@
+'use client';
+
+import { clamp } from "../../core/util.mjs";
+import { StatusPill } from "../../kit/controls.mjs";
+import { ControlBar, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Axes, Dot, Grid, MovableDot, Plot, Stage } from "@classytic/stage";
+
+//#region src/math/linear-system/preset.tsx
+/**
+* LinearSystemLab — two unknowns, two clues, one answer. Each equation is drawn
+* as a LINE: every point on it is an (x, y) pair that obeys that clue. The ONE
+* point that obeys BOTH clues is where the lines cross — the solution to the
+* system. The learner drags a marker to find it; live ✓/✗ tells them whether the
+* point currently satisfies each clue, so the crossing is "where both go green".
+*
+* SVG <Stage> + Plot + a draggable MovableDot — accessible, theme-aware, on the
+* same engine as every other lab. (Lines in slope-intercept y = m·x + b; the
+* intersection is solved exactly.)
+*/
+const snap = (v) => Math.round(v * 2) / 2;
+const DEFAULT_LINES = [{
+	m: 1,
+	b: 1,
+	label: "clue A",
+	color: "var(--stage-accent)"
+}, {
+	m: -1,
+	b: 5,
+	label: "clue B",
+	color: "var(--stage-accent-2)"
+}];
+function LinearSystemLab({ lines = DEFAULT_LINES, xRange = [-1, 7], yRange = [-1, 7], title = "Two unknowns, one answer", prompt = "Drag the point to where BOTH lines cross — that (x, y) obeys both clues.", height = 360 } = {}) {
+	const [l1, l2] = lines;
+	const sol = useMemo(() => {
+		const dm = l1.m - l2.m;
+		if (Math.abs(dm) < 1e-9) return null;
+		const x = (l2.b - l1.b) / dm;
+		return {
+			x,
+			y: l1.m * x + l1.b
+		};
+	}, [
+		l1.m,
+		l1.b,
+		l2.m,
+		l2.b
+	]);
+	const [xMin, xMax] = xRange;
+	const [yMin, yMax] = yRange;
+	const [guess, setGuess] = useState({
+		x: snap((xMin + xMax) / 2),
+		y: snap((yMin + yMax) / 2)
+	});
+	useEffect(() => {
+		setGuess({
+			x: snap((xMin + xMax) / 2),
+			y: snap((yMin + yMax) / 2)
+		});
+	}, [
+		xMin,
+		xMax,
+		yMin,
+		yMax
+	]);
+	const onLine = (l) => Math.abs(l.m * guess.x + l.b - guess.y) < 1e-6;
+	const onA = onLine(l1);
+	const onB = onLine(l2);
+	const solved = onA && onB;
+	useCheckpoint({
+		solved,
+		activity: "linear-system"
+	});
+	const col1 = l1.color ?? "var(--stage-accent)";
+	const col2 = l2.color ?? "var(--stage-accent-2)";
+	const figure = /* @__PURE__ */ jsxs(Stage, {
+		view: {
+			xMin,
+			xMax,
+			yMin,
+			yMax
+		},
+		height,
+		ariaLabel: `Two lines on a grid; drag the point to their crossing. Currently (${guess.x}, ${guess.y}).`,
+		children: [
+			/* @__PURE__ */ jsx(Grid, {}),
+			/* @__PURE__ */ jsx(Axes, { labels: true }),
+			/* @__PURE__ */ jsx(Plot.OfX, {
+				y: (x) => l1.m * x + l1.b,
+				domain: [xMin, xMax],
+				color: col1,
+				weight: 3
+			}),
+			/* @__PURE__ */ jsx(Plot.OfX, {
+				y: (x) => l2.m * x + l2.b,
+				domain: [xMin, xMax],
+				color: col2,
+				weight: 3
+			}),
+			solved && sol && /* @__PURE__ */ jsx(Dot, {
+				x: sol.x,
+				y: sol.y,
+				r: 9,
+				color: "var(--stage-good)",
+				opacity: .3
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: guess,
+				onMove: (p) => setGuess({
+					x: clamp(snap(p.x), xMin, xMax),
+					y: clamp(snap(p.y), yMin, yMax)
+				}),
+				color: solved ? "var(--stage-good)" : "var(--stage-fg)",
+				ariaLabel: "your (x, y) guess"
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsxs("span", {
+				style: {
+					fontVariantNumeric: "tabular-nums",
+					fontWeight: 600
+				},
+				children: [
+					"(x, y) = (",
+					guess.x,
+					", ",
+					guess.y,
+					")"
+				]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				style: { color: onA ? "var(--stage-good)" : "var(--stage-muted)" },
+				children: [
+					onA ? "✓" : "○",
+					" ",
+					l1.label ?? "line A"
+				]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				style: { color: onB ? "var(--stage-good)" : "var(--stage-muted)" },
+				children: [
+					onB ? "✓" : "○",
+					" ",
+					l2.label ?? "line B"
+				]
+			}),
+			/* @__PURE__ */ jsx(StatusPill, {
+				ok: solved,
+				children: solved ? `✓ Solved: x=${guess.x}, y=${guess.y}` : "Not the crossing yet"
+			})
+		] }),
+		footer: /* @__PURE__ */ jsx(LiveRegion, { children: solved ? `Solved: x ${guess.x}, y ${guess.y}` : `Point at ${guess.x}, ${guess.y}; on ${l1.label ?? "A"}: ${onA}; on ${l2.label ?? "B"}: ${onB}` }),
+		children: figure
+	});
+}
+
+//#endregion
+export { LinearSystemLab };