@classytic/labs 0.1.0

package/dist/language/transform/preset.mjs

@@ -0,0 +1,137 @@
+'use client';
+
+import { CheckButton, Chip, StatusPill } from "../../kit/controls.mjs";
+import { ControlBar, LabFrame } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { seededShuffle } from "../deck.mjs";
+import { Tile } from "../ui.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/language/transform/preset.tsx
+/**
+* TransformLab — change one sentence into another and SEE what changed.
+*
+* Shows the source sentence (read-only), an instruction ("Make it a question"),
+* and the learner rebuilds the target by tapping tiles. On success the words
+* that are NEW vs the source are ringed — so the rule (e.g. English injects
+* "Do" for a question; Bangla has no do-support) is visible, not just stated.
+*/
+function TransformLab({ from, to, instruction = "Change the sentence.", note, title = "Transform it", targetDir = "ltr" }) {
+	const target = useMemo(() => to.map((t) => t.text).join(" "), [to]);
+	const initialBank = useMemo(() => {
+		let order = seededShuffle(to.map((_, i) => i), to.length * 11 + 2);
+		if (to.length > 1 && order.map((i) => to[i].text).join(" ") === target) order = order.slice().reverse();
+		return order;
+	}, [to, target]);
+	const [bank, setBank] = useState(initialBank);
+	const [line, setLine] = useState([]);
+	const [checked, setChecked] = useState(false);
+	useEffect(() => {
+		setBank(initialBank);
+		setLine([]);
+		setChecked(false);
+	}, [initialBank]);
+	const attempt = line.map((i) => to[i].text).join(" ");
+	const full = line.length === to.length;
+	const correct = full && attempt === target;
+	useCheckpoint({
+		solved: correct,
+		activity: "transform"
+	});
+	const fromWords = useMemo(() => new Set(from.map((t) => t.text.toLowerCase())), [from]);
+	const isNew = (i) => !fromWords.has(to[i].text.toLowerCase());
+	const place = (i) => {
+		setBank((b) => b.filter((x) => x !== i));
+		setLine((l) => [...l, i]);
+		setChecked(false);
+	};
+	const take = (i) => {
+		setLine((l) => l.filter((x) => x !== i));
+		setBank((b) => [...b, i]);
+		setChecked(false);
+	};
+	const reset = () => {
+		setBank(initialBank);
+		setLine([]);
+		setChecked(false);
+	};
+	const figure = /* @__PURE__ */ jsxs("div", {
+		className: "lang-lab",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "lang-from",
+				dir: targetDir,
+				"aria-label": "given sentence",
+				children: from.map((t, i) => /* @__PURE__ */ jsx(Tile, {
+					pos: t.pos,
+					text: t.text,
+					gloss: t.gloss,
+					dir: targetDir,
+					ariaLabel: `${t.text} (given)`
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "lang-arrow",
+				"aria-hidden": true,
+				children: "↓"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "lang-line",
+				"data-state": checked ? correct ? "ok" : "no" : "idle",
+				"aria-label": "your sentence",
+				children: line.length === 0 ? /* @__PURE__ */ jsx("span", {
+					className: "lang-line-empty",
+					children: "Tap the words to build it."
+				}) : line.map((i) => /* @__PURE__ */ jsx(Tile, {
+					pos: to[i].pos,
+					text: to[i].text,
+					gloss: to[i].gloss,
+					dir: targetDir,
+					selected: checked && correct && isNew(i),
+					onClick: () => take(i),
+					ariaLabel: `${to[i].text} — tap to remove`
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "lang-bank",
+				"aria-label": "word bank",
+				children: bank.map((i) => /* @__PURE__ */ jsx(Tile, {
+					pos: to[i].pos,
+					text: to[i].text,
+					gloss: to[i].gloss,
+					dir: targetDir,
+					onClick: () => place(i),
+					ariaLabel: `${to[i].text} — tap to place`
+				}, i))
+			}),
+			checked && correct && note ? /* @__PURE__ */ jsx("p", {
+				className: "lang-why",
+				"data-state": "ok",
+				"aria-live": "polite",
+				children: note
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt: instruction,
+		aside: checked ? /* @__PURE__ */ jsx(StatusPill, {
+			ok: correct,
+			children: correct ? "✓ Done — see what changed" : "Not the right order yet"
+		}) : void 0,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsx(CheckButton, {
+			onClick: () => setChecked(true),
+			disabled: !full,
+			children: "Check"
+		}), /* @__PURE__ */ jsx(Chip, {
+			selected: false,
+			onClick: reset,
+			children: "Reset"
+		})] }),
+		children: figure
+	});
+}
+
+//#endregion
+export { TransformLab };

package/dist/language/ui.d.mts

@@ -0,0 +1,53 @@
+import { DeckItem, Pos } from "./deck.mjs";
+import { ReactNode } from "react";
+
+//#region src/language/ui.d.ts
+/**
+ * True once the browser's TTS voice list is populated (it loads async).
+ *
+ * Starts `false` — NOT seeded from `getVoices()` — so the first client render
+ * matches the server (where there's no `speechSynthesis`). Seeding from the
+ * live voice list would make a TTS-only item render its speaker button on the
+ * client but not the server → a hydration mismatch that forces React to
+ * regenerate the whole subtree on the client. The effect flips it true after
+ * mount, which is a normal post-mount update, not a hydration diff.
+ */
+declare function useVoicesReady(): boolean;
+/**
+ * A speaker button — renders nothing if the item can't be voiced.
+ *
+ * `audioUrl` items can voice on the server too (no browser needed), so they
+ * render the button consistently across SSR/hydration. Browser-TTS items only
+ * become voiceable once `voicesReady` flips post-mount — gating on it (instead
+ * of querying `window.speechSynthesis` during render) keeps the first client
+ * render identical to the server.
+ */
+declare function Speaker({
+  item,
+  lang
+}: {
+  item: DeckItem;
+  lang: string;
+}): ReactNode;
+/** A word tile coloured by part of speech, with an optional L1 gloss beneath. */
+declare function Tile({
+  pos,
+  text,
+  gloss,
+  dir,
+  selected,
+  dimmed,
+  onClick,
+  ariaLabel
+}: {
+  pos?: Pos;
+  text: string;
+  gloss?: string;
+  dir?: 'ltr' | 'rtl';
+  selected?: boolean;
+  dimmed?: boolean;
+  onClick?: () => void;
+  ariaLabel?: string;
+}): ReactNode;
+//#endregion
+export { Speaker, Tile, useVoicesReady };

package/dist/language/ui.mjs

@@ -0,0 +1,88 @@
+'use client';
+
+import { POS_LABEL, hasVoiceFor, speak } from "./deck.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/language/ui.tsx
+/**
+* Shared DOM UI for the language labs — Speaker button + POS-coloured Tile.
+* Themed via the `.lang-*` classes shipped in `@classytic/labs/styles.css`
+* (POS colours come from `--lang-pos-*` tokens). Kept here, not in the generic
+* `kit/controls`, so non-language labs pay nothing for it.
+*/
+/**
+* True once the browser's TTS voice list is populated (it loads async).
+*
+* Starts `false` — NOT seeded from `getVoices()` — so the first client render
+* matches the server (where there's no `speechSynthesis`). Seeding from the
+* live voice list would make a TTS-only item render its speaker button on the
+* client but not the server → a hydration mismatch that forces React to
+* regenerate the whole subtree on the client. The effect flips it true after
+* mount, which is a normal post-mount update, not a hydration diff.
+*/
+function useVoicesReady() {
+	const [ready, setReady] = useState(false);
+	useEffect(() => {
+		if (ready || typeof window === "undefined" || !("speechSynthesis" in window)) return;
+		const sync = () => {
+			if (window.speechSynthesis.getVoices().length > 0) setReady(true);
+		};
+		sync();
+		window.speechSynthesis.addEventListener("voiceschanged", sync);
+		return () => window.speechSynthesis.removeEventListener("voiceschanged", sync);
+	}, [ready]);
+	return ready;
+}
+/**
+* A speaker button — renders nothing if the item can't be voiced.
+*
+* `audioUrl` items can voice on the server too (no browser needed), so they
+* render the button consistently across SSR/hydration. Browser-TTS items only
+* become voiceable once `voicesReady` flips post-mount — gating on it (instead
+* of querying `window.speechSynthesis` during render) keeps the first client
+* render identical to the server.
+*/
+function Speaker({ item, lang }) {
+	const voicesReady = useVoicesReady();
+	if (!(Boolean(item.audioUrl) || voicesReady && hasVoiceFor(lang))) return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "lang-speak",
+		"aria-label": `Play pronunciation of ${item.term}`,
+		onClick: (e) => {
+			e.stopPropagation();
+			speak(item, lang);
+		},
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: "🔊"
+		})
+	});
+}
+/** A word tile coloured by part of speech, with an optional L1 gloss beneath. */
+function Tile({ pos = "other", text, gloss, dir = "ltr", selected, dimmed, onClick, ariaLabel }) {
+	const style = { "--pos": `var(--lang-pos-${pos})` };
+	const label = ariaLabel ?? `${text}${gloss ? `, ${gloss}` : ""} (${POS_LABEL[pos]})`;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "lang-tile",
+		style,
+		"data-sel": selected ? "true" : void 0,
+		"data-dim": dimmed ? "true" : void 0,
+		onClick,
+		"aria-label": label,
+		"aria-pressed": selected,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "lang-tile-text",
+			dir,
+			children: text
+		}), gloss ? /* @__PURE__ */ jsx("span", {
+			className: "lang-tile-gloss",
+			children: gloss
+		}) : null]
+	});
+}
+
+//#endregion
+export { Speaker, Tile, useVoicesReady };

package/dist/language/word-match/index.d.mts

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

package/dist/language/word-match/preset.d.mts

@@ -0,0 +1,22 @@
+import { Deck } from "../deck.mjs";
+import { ReactNode } from "react";
+
+//#region src/language/word-match/preset.d.ts
+interface WordMatchProps {
+  deck: Deck;
+  /** How many pairs to show at once (default min(items, 6)). */
+  count?: number;
+  /** Right column: the translation text, or the item icon (kids/concrete). */
+  show?: 'translation' | 'icon';
+  title?: string;
+  prompt?: string;
+}
+declare function WordMatchLab({
+  deck,
+  count,
+  show,
+  title,
+  prompt
+}: WordMatchProps): ReactNode;
+//#endregion
+export { WordMatchLab, WordMatchProps };

package/dist/language/word-match/preset.mjs

@@ -0,0 +1,148 @@
+'use client';
+
+import { StatusPill } from "../../kit/controls.mjs";
+import { LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { dirFor, seededShuffle } from "../deck.mjs";
+import { Icon } from "../icon.mjs";
+import { Speaker } from "../ui.mjs";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/language/word-match/preset.tsx
+/**
+* WordMatch — pair each word with its meaning (or picture).
+*
+* Tap a word on the left, then its match on the right; a correct pair locks
+* green, a wrong pair flashes. Right side shows the translation, or — for kids /
+* concrete vocab — the item's icon (emoji/SVG), which is where image-based
+* learning genuinely helps (dual coding). Reads its whole content from a `Deck`,
+* so a new language pair is just new data.
+*/
+function WordMatchLab({ deck, count, show = "translation", title = "Match the pairs", prompt = "Tap a word, then tap its match." }) {
+	const n = Math.min(count ?? 6, deck.items.length);
+	const items = useMemo(() => deck.items.slice(0, n), [deck, n]);
+	const rightOrder = useMemo(() => seededShuffle(items.map((_, i) => i), n * 13 + 5), [items, n]);
+	const termDir = dirFor(deck.termLang);
+	const transDir = dirFor(deck.transLang);
+	const [matched, setMatched] = useState(/* @__PURE__ */ new Set());
+	const [pending, setPending] = useState(null);
+	const [wrong, setWrong] = useState(null);
+	const wrongTimer = useRef(null);
+	useEffect(() => {
+		setMatched(/* @__PURE__ */ new Set());
+		setPending(null);
+		setWrong(null);
+	}, [items]);
+	useEffect(() => () => {
+		if (wrongTimer.current) clearTimeout(wrongTimer.current);
+	}, []);
+	const allDone = matched.size === items.length && items.length > 0;
+	useCheckpoint({
+		solved: allDone,
+		activity: "word-match",
+		score: {
+			raw: items.length,
+			max: items.length
+		}
+	});
+	const flashWrong = (idx) => {
+		setWrong(idx);
+		if (wrongTimer.current) clearTimeout(wrongTimer.current);
+		wrongTimer.current = setTimeout(() => setWrong(null), 520);
+	};
+	const tap = (side, idx) => {
+		if (matched.has(idx)) return;
+		if (!pending) {
+			setPending({
+				side,
+				idx
+			});
+			return;
+		}
+		if (pending.side === side) {
+			setPending({
+				side,
+				idx
+			});
+			return;
+		}
+		if (pending.idx === idx) {
+			setMatched((m) => new Set(m).add(idx));
+			setPending(null);
+		} else {
+			flashWrong(idx);
+			flashWrong(pending.idx);
+			setPending(null);
+		}
+	};
+	const cellState = (side, idx) => matched.has(idx) ? "ok" : wrong === idx ? "no" : pending && pending.side === side && pending.idx === idx ? "sel" : "idle";
+	const figure = /* @__PURE__ */ jsxs("div", {
+		className: "lang-lab",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "lang-match",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "lang-col",
+				"aria-label": "words",
+				children: items.map((it, i) => /* @__PURE__ */ jsxs("div", {
+					className: "lang-match-row",
+					children: [/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "lang-match-cell",
+						"data-state": cellState("L", i),
+						disabled: matched.has(i),
+						onClick: () => tap("L", i),
+						"aria-label": `${it.term}${matched.has(i) ? ", matched" : ""}`,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "lang-cell-text",
+							dir: termDir,
+							children: it.term
+						}), it.transliteration ? /* @__PURE__ */ jsx("span", {
+							className: "lang-cell-sub",
+							children: it.transliteration
+						}) : null]
+					}), /* @__PURE__ */ jsx(Speaker, {
+						item: it,
+						lang: deck.termLang
+					})]
+				}, `L${i}`))
+			}), /* @__PURE__ */ jsx("div", {
+				className: "lang-col",
+				"aria-label": "matches",
+				children: rightOrder.map((i) => {
+					const it = items[i];
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "lang-match-cell",
+						"data-state": cellState("R", i),
+						disabled: matched.has(i),
+						onClick: () => tap("R", i),
+						"aria-label": show === "icon" ? `picture for ${it.translation}` : it.translation,
+						children: show === "icon" && it.icon ? /* @__PURE__ */ jsx(Icon, {
+							icon: it.icon,
+							className: "lang-cell-icon",
+							size: 36,
+							decorative: true
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "lang-cell-text",
+							dir: transDir,
+							children: it.translation
+						})
+					}, `R${i}`);
+				})
+			})]
+		}), /* @__PURE__ */ jsx(LiveRegion, { children: allDone ? "All pairs matched" : "" })]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		aside: /* @__PURE__ */ jsx(StatusPill, {
+			ok: allDone,
+			children: allDone ? "✓ All matched" : `${matched.size} / ${items.length} matched`
+		}),
+		children: figure
+	});
+}
+
+//#endregion
+export { WordMatchLab };

package/dist/math/area-model/asset.d.mts

@@ -0,0 +1,6 @@
+import { AssetSpec } from "@classytic/stage";
+
+//#region src/math/area-model/asset.d.ts
+declare const AREA_MODEL_ASSET: AssetSpec;
+//#endregion
+export { AREA_MODEL_ASSET };