@classytic/labs 0.1.0 → 0.2.0

package/dist/kit/slot-fill.mjs

@@ -0,0 +1,207 @@
+'use client';
+
+import { useCheckpoint } from "./pedagogy.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/slot-fill.tsx
+/**
+* SlotFill, the "tap a tile into the blank" answer interaction, the lightweight,
+* mobile-first commit Brilliant uses everywhere (fill Day 1 = ?, "translate by (▢,▢)",
+* "a total of ▢ items"). It beats a typed box for short numeric/word answers: nothing
+* to mistype, it reads as a game, and it works one-thumbed.
+*
+* HEADLESS by design: `useSlotFill` owns the tray + grading + checkpoint, and the
+* presentational pieces (<Blank> for one blank, <SlotTray> for the tile pool) read from
+* it. That's the reuse win, the SAME engine drives a tidy row (<SlotFill>) OR blanks
+* embedded inline in a sentence/expression (a receipt total, a translation vector), so
+* every fill-in lesson shares one tested core instead of re-rolling tile state.
+*/
+const norm = (v) => String(v).trim();
+/** The headless engine: tile pool + per-slot grading + the shared checkpoint report. */
+function useSlotFill(slots, tiles, activity, onSolved) {
+	const [filled, setFilled] = useState({});
+	const [usedTiles, setUsedTiles] = useState(/* @__PURE__ */ new Set());
+	const [wrong, setWrong] = useState(null);
+	const activeId = slots.find((s) => filled[s.id] == null)?.id ?? null;
+	const solved = slots.length > 0 && slots.every((s) => filled[s.id] != null && norm(filled[s.id]) === norm(s.answer));
+	useCheckpoint({
+		solved,
+		activity
+	});
+	const fired = useRef(false);
+	useEffect(() => {
+		if (solved && !fired.current) {
+			fired.current = true;
+			onSolved?.();
+		}
+	}, [solved, onSolved]);
+	const place = (tileIdx) => {
+		if (!activeId || usedTiles.has(tileIdx)) return;
+		const slot = slots.find((s) => s.id === activeId);
+		if (norm(tiles[tileIdx]) === norm(slot.answer)) {
+			setFilled((f) => ({
+				...f,
+				[activeId]: String(tiles[tileIdx])
+			}));
+			setUsedTiles((u) => new Set(u).add(tileIdx));
+			setWrong(null);
+		} else {
+			setWrong({
+				slot: activeId,
+				tile: tileIdx
+			});
+			setTimeout(() => setWrong(null), 450);
+		}
+	};
+	const reset = () => {
+		setFilled({});
+		setUsedTiles(/* @__PURE__ */ new Set());
+		setWrong(null);
+		fired.current = false;
+	};
+	return {
+		filled,
+		activeId,
+		solved,
+		wrong,
+		usedTiles,
+		slots,
+		tiles,
+		place,
+		reset
+	};
+}
+/** One inline blank, drops anywhere in a sentence/expression. Reads `fill` by slot id. */
+function Blank({ fill, id, width = 46 }) {
+	const slot = fill.slots.find((s) => s.id === id);
+	const v = fill.filled[id];
+	const isActive = id === fill.activeId;
+	const isWrong = fill.wrong?.slot === id;
+	return /* @__PURE__ */ jsxs("span", {
+		style: {
+			display: "inline-grid",
+			justifyItems: "center",
+			gap: 3,
+			verticalAlign: "middle"
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-label": v ? `filled ${v}` : isActive ? "active blank" : "blank",
+			style: {
+				minWidth: width,
+				height: 42,
+				padding: "0 8px",
+				borderRadius: 9,
+				display: "grid",
+				placeItems: "center",
+				fontSize: 17,
+				fontWeight: 800,
+				fontVariantNumeric: "tabular-nums",
+				background: v ? "color-mix(in oklab, var(--stage-good) 18%, transparent)" : "transparent",
+				border: `2px ${v ? "solid" : "dashed"} ${v ? "var(--stage-good)" : isActive ? "var(--stage-accent)" : "color-mix(in oklab, var(--stage-fg) 30%, transparent)"}`,
+				color: v ? "var(--stage-good)" : "var(--stage-fg)",
+				animation: isWrong ? "slotfill-shake 0.4s" : void 0,
+				transition: "border-color 0.15s, background 0.15s"
+			},
+			children: v ?? (isActive ? "▾" : "")
+		}), slot?.label != null && /* @__PURE__ */ jsx("span", {
+			style: {
+				fontSize: 11,
+				color: "var(--stage-muted)",
+				fontWeight: 600
+			},
+			children: slot.label
+		})]
+	});
+}
+/** The tile tray, tap a tile and it drops into the active blank. */
+function SlotTray({ fill }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			gap: 10,
+			flexWrap: "wrap",
+			justifyContent: "center",
+			padding: "10px 14px",
+			borderRadius: 12,
+			background: "color-mix(in oklab, var(--stage-fg) 6%, transparent)"
+		},
+		children: [fill.tiles.map((t, i) => {
+			const used = fill.usedTiles.has(i);
+			const isWrong = fill.wrong?.tile === i;
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: used || fill.solved,
+				onClick: () => fill.place(i),
+				"aria-label": `tile ${t}`,
+				style: {
+					minWidth: 44,
+					height: 44,
+					padding: "0 10px",
+					borderRadius: 10,
+					fontSize: 17,
+					fontWeight: 800,
+					fontVariantNumeric: "tabular-nums",
+					cursor: used || fill.solved ? "default" : "pointer",
+					background: used ? "color-mix(in oklab, var(--stage-fg) 10%, transparent)" : "var(--stage-bg)",
+					color: used ? "transparent" : "var(--stage-fg)",
+					border: `2px solid ${isWrong ? "var(--stage-warn)" : used ? "transparent" : "color-mix(in oklab, var(--stage-fg) 26%, transparent)"}`,
+					animation: isWrong ? "slotfill-shake 0.4s" : void 0,
+					transition: "transform 0.1s"
+				},
+				children: used ? "" : t
+			}, i);
+		}), /* @__PURE__ */ jsx("style", { children: `@keyframes slotfill-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}60%{transform:translateX(5px)}}` })]
+	});
+}
+/** Row layout: labelled blanks in a bordered strip + the tray. The common case. */
+function SlotFill({ slots, tiles, activity, prompt, onSolved }) {
+	const fill = useSlotFill(slots, tiles, activity, onSolved);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "not-prose",
+		style: {
+			display: "grid",
+			gap: 12,
+			justifyItems: "center",
+			marginTop: 8
+		},
+		children: [
+			prompt && /* @__PURE__ */ jsx("p", {
+				style: {
+					margin: 0,
+					fontWeight: 600,
+					textAlign: "center"
+				},
+				children: prompt
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					gap: 12,
+					flexWrap: "wrap",
+					justifyContent: "center",
+					padding: "10px 14px",
+					borderRadius: 12,
+					border: "1px solid color-mix(in oklab, var(--stage-fg) 14%, transparent)"
+				},
+				children: slots.map((s) => /* @__PURE__ */ jsx(Blank, {
+					fill,
+					id: s.id
+				}, s.id))
+			}),
+			/* @__PURE__ */ jsx(SlotTray, { fill }),
+			fill.solved && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				style: {
+					margin: 0,
+					color: "var(--stage-good)",
+					fontWeight: 700
+				},
+				children: "✓ Nice, that's the pattern."
+			})
+		]
+	});
+}
+
+//#endregion
+export { Blank, SlotFill, SlotTray, useSlotFill };

package/dist/kit/solve.d.mts

@@ -0,0 +1,21 @@
+import { Complex } from "../math/complex/core.mjs";
+import { fromAst } from "../math/poly/core.mjs";
+import { Node } from "@classytic/stage";
+
+//#region src/kit/solve.d.ts
+/** Coefficients [a0, a1, …] of `node` as a polynomial in `x` (the canonical poly
+ *  engine does the extraction). null if it isn't polynomial in x. */
+declare const polyCoeffs: typeof fromAst;
+interface PolySolution {
+  coeffs: number[];
+  degree: number;
+  roots: Complex[];
+  realRoots: number[];
+  discriminant?: number;
+}
+/** Solve `node` = 0 for x exactly (degree 1 or 2). null if not a usable polynomial. */
+declare function solvePoly(node: Node, x?: string, params?: Record<string, number>): PolySolution | null;
+/** "x = 2 or x = −2" (complex when needed), or "no real solutions" framing. */
+declare function solutionTex(sol: PolySolution, x?: string): string;
+//#endregion
+export { PolySolution, polyCoeffs, solutionTex, solvePoly };

package/dist/kit/solve.mjs

@@ -0,0 +1,75 @@
+import { toStr } from "../math/complex/core.mjs";
+import { fromAst, trim } from "../math/poly/core.mjs";
+
+//#region src/kit/solve.ts
+const cleanNum = (n) => {
+	const r = Math.round(n * 1e9) / 1e9;
+	return Object.is(r, -0) ? 0 : r;
+};
+/** Coefficients [a0, a1, …] of `node` as a polynomial in `x` (the canonical poly
+*  engine does the extraction). null if it isn't polynomial in x. */
+const polyCoeffs = fromAst;
+/** Solve `node` = 0 for x exactly (degree 1 or 2). null if not a usable polynomial. */
+function solvePoly(node, x = "x", params = {}) {
+	const raw = polyCoeffs(node, x, params);
+	if (!raw) return null;
+	const coeffs = trim(raw);
+	const degree = coeffs.length - 1;
+	if (degree === 1) {
+		const a0 = coeffs[0], a1 = coeffs[1];
+		const r = cleanNum(-a0 / a1);
+		return {
+			coeffs,
+			degree,
+			roots: [{
+				re: r,
+				im: 0
+			}],
+			realRoots: [r]
+		};
+	}
+	if (degree === 2) {
+		const c0 = coeffs[0], c1 = coeffs[1], c2 = coeffs[2];
+		const disc = c1 * c1 - 4 * c2 * c0;
+		const twoA = 2 * c2;
+		if (disc >= 0) {
+			const s = Math.sqrt(disc);
+			const real = [cleanNum((-c1 - s) / twoA), cleanNum((-c1 + s) / twoA)].sort((u, v) => u - v);
+			return {
+				coeffs,
+				degree,
+				discriminant: disc,
+				roots: real.map((r) => ({
+					re: r,
+					im: 0
+				})),
+				realRoots: real
+			};
+		}
+		const s = Math.sqrt(-disc), re = cleanNum(-c1 / twoA), im = cleanNum(s / twoA);
+		return {
+			coeffs,
+			degree,
+			discriminant: disc,
+			roots: [{
+				re,
+				im: -im
+			}, {
+				re,
+				im
+			}],
+			realRoots: []
+		};
+	}
+	return null;
+}
+/** "x = 2 or x = −2" (complex when needed), or "no real solutions" framing. */
+function solutionTex(sol, x = "x") {
+	if (sol.roots.length === 1) return `${x} = ${toStr(sol.roots[0])}`;
+	const [r1, r2] = sol.roots;
+	if (r1 && r2 && r1.re === r2.re && r1.im === r2.im) return `${x} = ${toStr(r1)} \\text{ (repeated)}`;
+	return `${x} = ${toStr(r1)} \\text{ or } ${x} = ${toStr(r2)}`;
+}
+
+//#endregion
+export { polyCoeffs, solutionTex, solvePoly };

package/dist/kit/space.mjs

@@ -6,17 +6,17 @@ import { fmt, useCoords } from "@classytic/stage";
 
 //#region src/kit/space.tsx
 /**
-* Space glyph kit — Earth, Sun and a satellite, drawn in the stage's pixel frame
+* Space glyph kit, Earth, Sun and a satellite, drawn in the stage's pixel frame
 * (project the world centre, then size everything off the px radius so the glyph
 * is crisp at any zoom). Kurzgesagt-style: radial body gradient + a rim shadow
 * for spherical depth + a top-left specular highlight, the technique borrowed from
 * my-video's EarthIcon. Gradient ids are made unique per instance so multiple
 * glyphs on one Stage don't collide.
 *
-* These are decorative (pointer-events:none) — drop a draggable MovableDot on top
+* These are decorative (pointer-events:none), drop a draggable MovableDot on top
 * if the body needs to be grabbed.
 */
-/** Earth — blue oceans, a few green landmasses, ice caps, rim + shine + atmosphere. */
+/** Earth, blue oceans, a few green landmasses, ice caps, rim + shine + atmosphere. */
 function EarthGlyph({ center, r, atmosphere = true }) {
 	const c = useCoords();
 	const [cx, cy] = c.toPx(center.x, center.y);
@@ -157,7 +157,7 @@ function EarthGlyph({ center, r, atmosphere = true }) {
 		]
 	});
 }
-/** Sun — glowing core with a corona of rays. */
+/** Sun, glowing core with a corona of rays. */
 function SunGlyph({ center, r }) {
 	const c = useCoords();
 	const [cx, cy] = c.toPx(center.x, center.y);
@@ -245,7 +245,7 @@ function SunGlyph({ center, r }) {
 		]
 	});
 }
-/** Satellite — a body with two solar-panel wings and a dish. */
+/** Satellite, a body with two solar-panel wings and a dish. */
 function SatelliteGlyph({ center, size, tilt = -.4 }) {
 	const c = useCoords();
 	const [cx, cy] = c.toPx(center.x, center.y);

package/dist/kit/steps.mjs

@@ -5,10 +5,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/steps.tsx
 /**
-* In-lab stepper — teach ONE idea at a time (Brilliant-style), instead of dumping
+* In-lab stepper, teach ONE idea at a time (Brilliant-style), instead of dumping
 * a dense screen. A lab declares N steps and reveals layers/captions as the learner
 * hits Continue. Pure UI state; pair with `<StepNav>` (Back / dots / Continue).
-* (Distinct from stage's cross-block StepProgress — this is within a single lab.)
+* (Distinct from stage's cross-block StepProgress, this is within a single lab.)
 */
 function useSteps(total) {
 	const [step, setStep] = useState(0);

package/dist/kit/vessel.d.mts

@@ -0,0 +1,69 @@
+import { ReactNode } from "react";
+
+//#region src/kit/vessel.d.ts
+type GuessTone = 'idle' | 'ok' | 'no';
+interface VesselGlyphProps {
+  /** top-left x,y and size of the vessel bounding box (px). */
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  /** TRUE liquid level, 0..1 of the inner height. */
+  fillFrac: number;
+  /** liquid colour token. */
+  color?: string;
+  /** discrete objects piled at the bottom (count). */
+  objects?: number;
+  /** object colour token. */
+  objectColor?: string;
+  /** optional learner-reading dashed line, 0..1 of the inner height. */
+  guessFrac?: number;
+  /** colour the reading line by correctness. */
+  guessTone?: GuessTone;
+}
+/** The pure <g> vessel, glass + liquid + objects + optional reading line. */
+declare function VesselGlyph({
+  x,
+  y,
+  w,
+  h,
+  fillFrac,
+  color,
+  objects,
+  objectColor,
+  guessFrac,
+  guessTone
+}: VesselGlyphProps): ReactNode;
+interface VesselProps {
+  width?: number;
+  height?: number;
+  /** TRUE liquid level, 0..1. */
+  fillFrac: number;
+  guessFrac?: number;
+  guessTone?: GuessTone;
+  objects?: number;
+  liquidColor?: string;
+  objectColor?: string;
+  label?: string;
+  /** draw a 0..max scale up the right side; pass the axis max + unit for readouts. */
+  scaleMax?: number;
+  scaleStep?: number;
+  unit?: string;
+}
+/** Self-contained vessel (its own <svg>), drops in beside a graph as the concrete twin. */
+declare function Vessel({
+  width,
+  height,
+  fillFrac,
+  guessFrac,
+  guessTone,
+  objects,
+  liquidColor,
+  objectColor,
+  label,
+  scaleMax,
+  scaleStep,
+  unit
+}: VesselProps): ReactNode;
+//#endregion
+export { GuessTone, Vessel, VesselGlyph, VesselGlyphProps, VesselProps };

package/dist/kit/vessel.mjs

@@ -0,0 +1,191 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/vessel.tsx
+const METAL = "var(--stage-metal, #8a8a8a)";
+const GLASS = "color-mix(in oklab, var(--stage-fg) 26%, transparent)";
+const FG = "var(--stage-fg, #222)";
+const MUTED = "var(--stage-muted, #777)";
+const TONE_COLOR = {
+	idle: "var(--stage-accent)",
+	ok: "var(--stage-good)",
+	no: "var(--stage-warn)"
+};
+/** The pure <g> vessel, glass + liquid + objects + optional reading line. */
+function VesselGlyph({ x, y, w, h, fillFrac, color = "var(--stage-accent)", objects = 0, objectColor = "#e85aa6", guessFrac, guessTone = "idle" }) {
+	const lipH = 6;
+	const wall = 3;
+	const innerTop = y + lipH;
+	const innerBot = y + h - 3;
+	const innerH = innerBot - innerTop;
+	const lx = x + wall;
+	const rx = x + w - wall;
+	const innerW = rx - lx;
+	const liq = Math.max(0, Math.min(1, fillFrac));
+	const liquidTop = innerBot - liq * innerH;
+	const cubes = [];
+	if (objects > 0) {
+		const r = Math.max(5, Math.min(11, innerW / 5.5));
+		const perRow = Math.max(1, Math.floor((innerW - 4) / (r * 2)));
+		for (let i = 0; i < objects; i++) {
+			const row = Math.floor(i / perRow);
+			const col = i % perRow;
+			const rowW = Math.min(perRow, objects - row * perRow) * r * 2;
+			const cxp = (lx + rx) / 2 - rowW / 2 + r + col * r * 2 + row % 2 * (r * .5);
+			const cyp = innerBot - r - row * r * 1.7;
+			cubes.push(/* @__PURE__ */ jsxs("g", {
+				style: { animation: `vessel-drop 0.45s cubic-bezier(0.3,1.3,0.6,1) ${i * .08}s backwards` },
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: cxp,
+					cy: cyp,
+					r,
+					fill: objectColor,
+					opacity: .92
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: cxp - r * .32,
+					cy: cyp - r * .32,
+					r: r * .3,
+					fill: "#fff",
+					opacity: .55
+				})]
+			}, `o${i}`));
+		}
+	}
+	const gColor = TONE_COLOR[guessTone];
+	const guessY = guessFrac != null ? innerBot - Math.max(0, Math.min(1, guessFrac)) * innerH : null;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: lx,
+			y: liquidTop,
+			width: innerW,
+			height: Math.max(0, innerBot - liquidTop),
+			fill: color,
+			fillOpacity: .4,
+			style: { transition: "y 0.5s ease-out, height 0.5s ease-out" }
+		}),
+		liq > .02 && /* @__PURE__ */ jsx("ellipse", {
+			cx: (lx + rx) / 2,
+			cy: liquidTop,
+			rx: innerW / 2,
+			ry: 3.5,
+			fill: color,
+			fillOpacity: .7,
+			style: { transition: "cy 0.5s ease-out" }
+		}),
+		cubes,
+		/* @__PURE__ */ jsx("path", {
+			d: `M ${x} ${y} L ${lx} ${innerBot} L ${rx} ${innerBot} L ${x + w} ${y}`,
+			fill: "none",
+			stroke: GLASS,
+			strokeWidth: wall,
+			strokeLinejoin: "round",
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: x - 3,
+			y1: y,
+			x2: x + w + 3,
+			y2: y,
+			stroke: METAL,
+			strokeWidth: 3,
+			strokeLinecap: "round"
+		}),
+		guessY != null && /* @__PURE__ */ jsxs("g", {
+			style: { transition: "transform 0.12s ease-out" },
+			children: [/* @__PURE__ */ jsx("line", {
+				x1: x - 6,
+				y1: guessY,
+				x2: x + w + 6,
+				y2: guessY,
+				stroke: gColor,
+				strokeWidth: 2.5,
+				strokeDasharray: "6 4"
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: x + w + 6,
+				cy: guessY,
+				r: 3.5,
+				fill: gColor
+			})]
+		})
+	] });
+}
+/** Self-contained vessel (its own <svg>), drops in beside a graph as the concrete twin. */
+function Vessel({ width = 150, height = 300, fillFrac, guessFrac, guessTone = "idle", objects = 0, liquidColor = "var(--stage-accent)", objectColor = "#e85aa6", label, scaleMax, scaleStep, unit }) {
+	const padL = scaleMax != null ? 4 : 8;
+	const padR = scaleMax != null ? 34 : 8;
+	const padTop = 10;
+	const padBot = label ? 26 : 10;
+	const vx = padL;
+	const vw = width - padL - padR;
+	const vy = padTop;
+	const vh = height - padTop - padBot;
+	const innerTop = 16;
+	const innerBot = vy + vh - 3;
+	const innerH = innerBot - innerTop;
+	const ticks = [];
+	if (scaleMax != null) {
+		const step = scaleStep ?? scaleMax / 4;
+		for (let v = 0; v <= scaleMax + 1e-6; v += step) {
+			const ty = innerBot - v / scaleMax * innerH;
+			ticks.push(/* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+				x1: vx + vw,
+				y1: ty,
+				x2: vx + vw + 5,
+				y2: ty,
+				stroke: MUTED,
+				strokeWidth: 1.5
+			}), /* @__PURE__ */ jsx("text", {
+				x: vx + vw + 8,
+				y: ty,
+				fontSize: 10,
+				fill: MUTED,
+				dominantBaseline: "middle",
+				children: v
+			})] }, `t${v}`));
+		}
+	}
+	return /* @__PURE__ */ jsxs("svg", {
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		role: "img",
+		"aria-label": label ? `${label}: liquid at ${(fillFrac * 100).toFixed(0)}% of full` : "vessel",
+		children: [
+			ticks,
+			/* @__PURE__ */ jsx(VesselGlyph, {
+				x: vx,
+				y: vy,
+				w: vw,
+				h: vh,
+				fillFrac,
+				color: liquidColor,
+				objects,
+				objectColor,
+				guessFrac,
+				guessTone
+			}),
+			unit && scaleMax != null && /* @__PURE__ */ jsx("text", {
+				x: vx + vw + 8,
+				y: 12,
+				fontSize: 9,
+				fill: MUTED,
+				dominantBaseline: "hanging",
+				children: unit
+			}),
+			label && /* @__PURE__ */ jsx("text", {
+				x: width / 2,
+				y: height - 8,
+				fontSize: 12,
+				fontWeight: 700,
+				fill: FG,
+				textAnchor: "middle",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("style", { children: `@keyframes vessel-drop{from{transform:translateY(-34px);opacity:0}to{transform:translateY(0);opacity:1}}` })
+		]
+	});
+}
+
+//#endregion
+export { Vessel, VesselGlyph };

package/dist/language/agreement/preset.mjs

@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/language/agreement/preset.tsx
 /**
-* AgreementLab — make the verb agree with its subject.
+* AgreementLab, make the verb agree with its subject.
 *
 * Bangla drops the present copula ("He doctor") and has no 3rd-person -s
 * ("She go"), so subject–verb agreement is a core English error. The learner
@@ -90,7 +90,7 @@ function AgreementLab({ items, title = "Make them agree", prompt = "Pick the ver
 				className: "lang-why",
 				"data-state": correct ? "ok" : "no",
 				"aria-live": "polite",
-				children: correct ? item.note ?? `${item.subject} ${item.correct}${item.tail ? " " + item.tail : ""}.` : "Not quite — try another."
+				children: correct ? item.note ?? `${item.subject} ${item.correct}${item.tail ? " " + item.tail : ""}.` : "Not quite, try another."
 			})
 		]
 	});

package/dist/language/article-lens/preset.d.mts

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 
 //#region src/language/article-lens/preset.d.ts
-type Article = 'a' | 'an' | 'the' | '—';
+type Article = 'a' | 'an' | 'the' | ', ';
 interface ArticleItem {
   /** Text before the blank. */
   before: string;