@classytic/labs 0.2.0 → 0.3.0

package/dist/language/sentence-builder/preset.mjs

@@ -1,12 +1,13 @@
 'use client';
 
-import { CheckButton, Chip, StatusPill } from "../../kit/controls.mjs";
-import { ControlBar, LabFrame, LiveRegion } from "../../kit/frame.mjs";
-import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { ActionButton, CheckButton, StatusPill } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { HintLadder, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
 import { seededShuffle } from "../deck.mjs";
-import { Tile } from "../ui.mjs";
+import { Speaker, Tile } from "../ui.mjs";
+import { LanguageActivity } from "../activity.mjs";
 import { useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/language/sentence-builder/preset.tsx
 /**
@@ -14,7 +15,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 *
 * The flagship grammar lab: tiles are colour-coded by part of speech and carry
 * an optional L1 gloss, so a learner SEES the structure while building it. The
-* `prompt` shows the meaning (e.g. the learner's-language sentence) above , 
+* `prompt` shows the meaning (e.g. the learner's-language sentence) above ,
 * which is exactly how a Bangla speaker meets English word order: same meaning,
 * different slot order (SOV → SVO).
 *
@@ -22,7 +23,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * drag, buttons are touch- and keyboard-friendly. Validates by resulting text,
 * so duplicate/interchangeable words still pass.
 */
-function SentenceBuilderLab({ tiles, prompt, promptDir = "ltr", targetDir = "ltr", title = "Build the sentence", hint = "Tap the words in the right order." }) {
+function SentenceBuilderLab({ tiles, prompt, promptDir = "ltr", targetDir = "ltr", lang, title = "Build the sentence", hint = "Tap the words in the right order.", objectives, hints: hintList }) {
 	const target = useMemo(() => tiles.map((t) => t.text).join(" "), [tiles]);
 	const initialBank = useMemo(() => {
 		let order = seededShuffle(tiles.map((_, i) => i), tiles.length * 7 + 3);
@@ -40,9 +41,12 @@ function SentenceBuilderLab({ tiles, prompt, promptDir = "ltr", targetDir = "ltr
 	const attempt = line.map((i) => tiles[i].text).join(" ");
 	const full = line.length === tiles.length;
 	const correct = full && attempt === target;
+	const hints = useHints(hintList);
 	useCheckpoint({
 		solved: correct,
-		activity: "sentence-builder"
+		activity: "sentence-builder",
+		hintsUsed: hints.count,
+		response: attempt
 	});
 	const place = (i) => {
 		setBank((b) => b.filter((x) => x !== i));
@@ -62,10 +66,16 @@ function SentenceBuilderLab({ tiles, prompt, promptDir = "ltr", targetDir = "ltr
 	const figure = /* @__PURE__ */ jsxs("div", {
 		className: "lang-lab",
 		children: [
-			prompt ? /* @__PURE__ */ jsx("p", {
+			prompt || lang ? /* @__PURE__ */ jsxs("p", {
 				className: "lang-prompt",
 				dir: promptDir,
-				children: prompt
+				children: [prompt, lang ? /* @__PURE__ */ jsx(Speaker, {
+					item: {
+						term: target,
+						translation: ""
+					},
+					lang
+				}) : null]
 			}) : null,
 			/* @__PURE__ */ jsx("div", {
 				className: "lang-line",
@@ -95,25 +105,28 @@ function SentenceBuilderLab({ tiles, prompt, promptDir = "ltr", targetDir = "ltr
 					ariaLabel: `${tiles[i].text}, tap to place`
 				}, i))
 			}),
-			/* @__PURE__ */ jsx(LiveRegion, { children: checked ? correct ? "Correct word order" : "Not the right order yet" : "" })
+			/* @__PURE__ */ jsx(Activity.LiveRegion, { children: checked ? correct ? "Correct word order" : "Not the right order yet" : "" })
 		]
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CheckButton, {
+		onClick: () => setChecked(true),
+		disabled: !full,
+		children: "Check"
+	}), /* @__PURE__ */ jsx(ActionButton, {
+		className: "lab-btn-ghost",
+		onClick: reset,
+		children: "Reset"
+	})] });
+	return /* @__PURE__ */ jsx(LanguageActivity, {
 		title,
 		prompt: hint,
+		objectives,
 		aside: checked ? /* @__PURE__ */ jsx(StatusPill, {
 			ok: correct,
 			children: correct ? "✓ Correct word order" : "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"
-		})] }),
+		footer: hintList?.length ? /* @__PURE__ */ jsx(HintLadder, { hints }) : void 0,
+		controls,
 		children: figure
 	});
 }

package/dist/language/transform/preset.d.mts

@@ -16,16 +16,24 @@ interface TransformProps {
   instruction?: string;
   /** One-line explanation shown on success. */
   note?: string;
+  /** BCP-47 of the sentences, e.g. 'en-US'. Set it to show 🔊 on the source (and
+   *  the transformed result once solved). */
+  lang?: string;
   title?: string;
   targetDir?: 'ltr' | 'rtl';
+  objectives?: string[];
+  hints?: string[];
 }
 declare function TransformLab({
   from,
   to,
   instruction,
   note,
+  lang,
   title,
-  targetDir
+  targetDir,
+  objectives,
+  hints: hintList
 }: TransformProps): ReactNode;
 //#endregion
 export { TransformLab, TransformProps, TransformTile };

package/dist/language/transform/preset.mjs

@@ -1,12 +1,12 @@
 'use client';
 
-import { CheckButton, Chip, StatusPill } from "../../kit/controls.mjs";
-import { ControlBar, LabFrame } from "../../kit/frame.mjs";
-import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { ActionButton, CheckButton, StatusPill } from "../../kit/controls.mjs";
+import { HintLadder, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
 import { seededShuffle } from "../deck.mjs";
-import { Tile } from "../ui.mjs";
+import { Speaker, Tile } from "../ui.mjs";
+import { LanguageActivity } from "../activity.mjs";
 import { useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/language/transform/preset.tsx
 /**
@@ -17,8 +17,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 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" }) {
+function TransformLab({ from, to, instruction = "Change the sentence.", note, lang, title = "Transform it", targetDir = "ltr", objectives, hints: hintList }) {
 	const target = useMemo(() => to.map((t) => t.text).join(" "), [to]);
+	const source = useMemo(() => from.map((t) => t.text).join(" "), [from]);
 	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();
@@ -35,9 +36,12 @@ function TransformLab({ from, to, instruction = "Change the sentence.", note, ti
 	const attempt = line.map((i) => to[i].text).join(" ");
 	const full = line.length === to.length;
 	const correct = full && attempt === target;
+	const hints = useHints(hintList);
 	useCheckpoint({
 		solved: correct,
-		activity: "transform"
+		activity: "transform",
+		hintsUsed: hints.count,
+		response: attempt
 	});
 	const fromWords = useMemo(() => new Set(from.map((t) => t.text.toLowerCase())), [from]);
 	const isNew = (i) => !fromWords.has(to[i].text.toLowerCase());
@@ -59,17 +63,23 @@ function TransformLab({ from, to, instruction = "Change the sentence.", note, ti
 	const figure = /* @__PURE__ */ jsxs("div", {
 		className: "lang-lab",
 		children: [
-			/* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsxs("div", {
 				className: "lang-from",
 				dir: targetDir,
 				"aria-label": "given sentence",
-				children: from.map((t, i) => /* @__PURE__ */ jsx(Tile, {
+				children: [from.map((t, i) => /* @__PURE__ */ jsx(Tile, {
 					pos: t.pos,
 					text: t.text,
 					gloss: t.gloss,
 					dir: targetDir,
 					ariaLabel: `${t.text} (given)`
-				}, i))
+				}, i)), lang ? /* @__PURE__ */ jsx(Speaker, {
+					item: {
+						term: source,
+						translation: ""
+					},
+					lang
+				}) : null]
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "lang-arrow",
@@ -105,30 +115,39 @@ function TransformLab({ from, to, instruction = "Change the sentence.", note, ti
 					ariaLabel: `${to[i].text}, tap to place`
 				}, i))
 			}),
-			checked && correct && note ? /* @__PURE__ */ jsx("p", {
+			checked && correct ? /* @__PURE__ */ jsxs("p", {
 				className: "lang-why",
 				"data-state": "ok",
 				"aria-live": "polite",
-				children: note
+				children: [lang ? /* @__PURE__ */ jsx(Speaker, {
+					item: {
+						term: target,
+						translation: ""
+					},
+					lang
+				}) : null, note ?? "Done, see what changed."]
 			}) : null
 		]
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
+	const controls = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CheckButton, {
+		onClick: () => setChecked(true),
+		disabled: !full,
+		children: "Check"
+	}), /* @__PURE__ */ jsx(ActionButton, {
+		className: "lab-btn-ghost",
+		onClick: reset,
+		children: "Reset"
+	})] });
+	return /* @__PURE__ */ jsx(LanguageActivity, {
 		title,
 		prompt: instruction,
+		objectives,
 		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"
-		})] }),
+		footer: hintList?.length ? /* @__PURE__ */ jsx(HintLadder, { hints }) : void 0,
+		controls,
 		children: figure
 	});
 }

package/dist/language/ui.d.mts

@@ -13,6 +13,16 @@ import { ReactNode } from "react";
  * mount, which is a normal post-mount update, not a hydration diff.
  */
 declare function useVoicesReady(): boolean;
+/**
+ * The speaker glyph, a crisp inline SVG (not the 🔊 emoji, which renders
+ * inconsistently across platforms and can't be theme-coloured or stroke-matched).
+ * Inherits `currentColor` + sizes to `1em`, so it tracks the button's colour/size.
+ */
+declare function SpeakerGlyph({
+  size
+}: {
+  size?: number;
+}): ReactNode;
 /**
  * A speaker button, renders nothing if the item can't be voiced.
  *
@@ -29,12 +39,26 @@ declare function Speaker({
   item: DeckItem;
   lang: string;
 }): ReactNode;
+/** Prominent but compact audio action for listening-led activities. */
+declare function ListenButton({
+  item,
+  lang,
+  label,
+  onPlay
+}: {
+  item: DeckItem;
+  lang: string;
+  label?: string;
+  onPlay?: () => void;
+}): ReactNode;
 /** A word tile coloured by part of speech, with an optional L1 gloss beneath. */
 declare function Tile({
   pos,
   text,
   gloss,
   dir,
+  lang,
+  glossLang,
   selected,
   dimmed,
   onClick,
@@ -44,10 +68,12 @@ declare function Tile({
   text: string;
   gloss?: string;
   dir?: 'ltr' | 'rtl';
+  lang?: string;
+  glossLang?: string;
   selected?: boolean;
   dimmed?: boolean;
   onClick?: () => void;
   ariaLabel?: string;
 }): ReactNode;
 //#endregion
-export { Speaker, Tile, useVoicesReady };
+export { ListenButton, Speaker, SpeakerGlyph, Tile, useVoicesReady };

package/dist/language/ui.mjs

@@ -1,8 +1,10 @@
 'use client';
 
+import { ActionButton } from "../kit/controls.mjs";
 import { POS_LABEL, hasVoiceFor, speak } from "./deck.mjs";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@/components/ui/button";
 
 //#region src/language/ui.tsx
 /**
@@ -35,6 +37,30 @@ function useVoicesReady() {
 	return ready;
 }
 /**
+* The speaker glyph, a crisp inline SVG (not the 🔊 emoji, which renders
+* inconsistently across platforms and can't be theme-coloured or stroke-matched).
+* Inherits `currentColor` + sizes to `1em`, so it tracks the button's colour/size.
+*/
+function SpeakerGlyph({ size = 15 }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		width: size,
+		height: size,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": true,
+		focusable: "false",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M11 5 6 9H2v6h4l5 4V5z" }),
+			/* @__PURE__ */ jsx("path", { d: "M15.5 8.5a5 5 0 0 1 0 7" }),
+			/* @__PURE__ */ jsx("path", { d: "M18.8 5.2a9 9 0 0 1 0 13.6" })
+		]
+	});
+}
+/**
 * 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
@@ -46,26 +72,38 @@ function useVoicesReady() {
 function Speaker({ item, lang }) {
 	const voicesReady = useVoicesReady();
 	if (!(Boolean(item.audioUrl) || voicesReady && hasVoiceFor(lang))) return null;
-	return /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsx(Button, {
 		type: "button",
+		size: "icon-sm",
+		variant: "ghost",
 		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: "🔊"
-		})
+		children: /* @__PURE__ */ jsx(SpeakerGlyph, {})
+	});
+}
+/** Prominent but compact audio action for listening-led activities. */
+function ListenButton({ item, lang, label = "Play audio", onPlay }) {
+	const voicesReady = useVoicesReady();
+	return /* @__PURE__ */ jsxs(ActionButton, {
+		className: "lang-audio-action",
+		onClick: () => {
+			if (speak(item, lang)) onPlay?.();
+		},
+		disabled: !(Boolean(item.audioUrl) || voicesReady && hasVoiceFor(lang)),
+		children: [/* @__PURE__ */ jsx(SpeakerGlyph, { size: 17 }), /* @__PURE__ */ jsx("span", { children: label })]
 	});
 }
 /** 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 }) {
+function Tile({ pos = "other", text, gloss, dir = "ltr", lang, glossLang, selected, dimmed, onClick, ariaLabel }) {
 	const style = { "--pos": `var(--lang-pos-${pos})` };
 	const label = ariaLabel ?? `${text}${gloss ? `, ${gloss}` : ""} (${POS_LABEL[pos]})`;
-	return /* @__PURE__ */ jsxs("button", {
+	return /* @__PURE__ */ jsxs(Button, {
 		type: "button",
+		variant: "outline",
 		className: "lang-tile",
 		style,
 		"data-sel": selected ? "true" : void 0,
@@ -76,13 +114,15 @@ function Tile({ pos = "other", text, gloss, dir = "ltr", selected, dimmed, onCli
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "lang-tile-text",
 			dir,
+			lang,
 			children: text
 		}), gloss ? /* @__PURE__ */ jsx("span", {
 			className: "lang-tile-gloss",
+			lang: glossLang,
 			children: gloss
 		}) : null]
 	});
 }
 
 //#endregion
-export { Speaker, Tile, useVoicesReady };
+export { ListenButton, Speaker, SpeakerGlyph, Tile, useVoicesReady };

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

@@ -10,13 +10,17 @@ interface WordMatchProps {
   show?: 'translation' | 'icon';
   title?: string;
   prompt?: string;
+  objectives?: string[];
+  hints?: string[];
 }
 declare function WordMatchLab({
   deck,
   count,
   show,
   title,
-  prompt
+  prompt,
+  objectives,
+  hints: hintList
 }: WordMatchProps): ReactNode;
 //#endregion
 export { WordMatchLab, WordMatchProps };

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

@@ -1,13 +1,14 @@
 'use client';
 
-import { StatusPill } from "../../kit/controls.mjs";
-import { LabFrame, LiveRegion } from "../../kit/frame.mjs";
-import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { HintLadder, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
 import { dirFor, seededShuffle } from "../deck.mjs";
 import { Icon } from "../icon.mjs";
 import { Speaker } from "../ui.mjs";
+import { LanguageActivity } from "../activity.mjs";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@/components/ui/button";
 
 //#region src/language/word-match/preset.tsx
 /**
@@ -19,7 +20,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 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." }) {
+function WordMatchLab({ deck, count, show = "translation", title = "Match the pairs", prompt = "Tap a word, then tap its match.", objectives, hints: hintList }) {
 	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]);
@@ -27,29 +28,33 @@ function WordMatchLab({ deck, count, show = "translation", title = "Match the pa
 	const transDir = dirFor(deck.transLang);
 	const [matched, setMatched] = useState(/* @__PURE__ */ new Set());
 	const [pending, setPending] = useState(null);
-	const [wrong, setWrong] = useState(null);
+	const [wrong, setWrong] = useState(/* @__PURE__ */ new Set());
+	const [announcement, setAnnouncement] = useState("");
 	const wrongTimer = useRef(null);
 	useEffect(() => {
 		setMatched(/* @__PURE__ */ new Set());
 		setPending(null);
-		setWrong(null);
+		setWrong(/* @__PURE__ */ new Set());
+		setAnnouncement("");
 	}, [items]);
 	useEffect(() => () => {
 		if (wrongTimer.current) clearTimeout(wrongTimer.current);
 	}, []);
 	const allDone = matched.size === items.length && items.length > 0;
+	const hints = useHints(hintList);
 	useCheckpoint({
 		solved: allDone,
 		activity: "word-match",
 		score: {
 			raw: items.length,
 			max: items.length
-		}
+		},
+		hintsUsed: hints.count
 	});
-	const flashWrong = (idx) => {
-		setWrong(idx);
+	const flashWrong = (cells) => {
+		setWrong(new Set(cells.map((cell) => `${cell.side}${cell.idx}`)));
 		if (wrongTimer.current) clearTimeout(wrongTimer.current);
-		wrongTimer.current = setTimeout(() => setWrong(null), 520);
+		wrongTimer.current = setTimeout(() => setWrong(/* @__PURE__ */ new Set()), 520);
 	};
 	const tap = (side, idx) => {
 		if (matched.has(idx)) return;
@@ -58,6 +63,7 @@ function WordMatchLab({ deck, count, show = "translation", title = "Match the pa
 				side,
 				idx
 			});
+			setAnnouncement("First item selected. Choose its match.");
 			return;
 		}
 		if (pending.side === side) {
@@ -65,18 +71,23 @@ function WordMatchLab({ deck, count, show = "translation", title = "Match the pa
 				side,
 				idx
 			});
+			setAnnouncement("Selection changed. Choose from the other column.");
 			return;
 		}
 		if (pending.idx === idx) {
 			setMatched((m) => new Set(m).add(idx));
 			setPending(null);
+			setAnnouncement(`Matched ${items[idx]?.term ?? "pair"}.`);
 		} else {
-			flashWrong(idx);
-			flashWrong(pending.idx);
+			flashWrong([{
+				side,
+				idx
+			}, pending]);
 			setPending(null);
+			setAnnouncement("Those do not match. Try another pair.");
 		}
 	};
-	const cellState = (side, idx) => matched.has(idx) ? "ok" : wrong === idx ? "no" : pending && pending.side === side && pending.idx === idx ? "sel" : "idle";
+	const cellState = (side, idx) => matched.has(idx) ? "ok" : wrong.has(`${side}${idx}`) ? "no" : pending && pending.side === side && pending.idx === idx ? "sel" : "idle";
 	const figure = /* @__PURE__ */ jsxs("div", {
 		className: "lang-lab",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -86,8 +97,9 @@ function WordMatchLab({ deck, count, show = "translation", title = "Match the pa
 				"aria-label": "words",
 				children: items.map((it, i) => /* @__PURE__ */ jsxs("div", {
 					className: "lang-match-row",
-					children: [/* @__PURE__ */ jsxs("button", {
+					children: [/* @__PURE__ */ jsxs(Button, {
 						type: "button",
+						variant: "outline",
 						className: "lang-match-cell",
 						"data-state": cellState("L", i),
 						disabled: matched.has(i),
@@ -96,6 +108,7 @@ function WordMatchLab({ deck, count, show = "translation", title = "Match the pa
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "lang-cell-text",
 							dir: termDir,
+							lang: deck.termLang,
 							children: it.term
 						}), it.transliteration ? /* @__PURE__ */ jsx("span", {
 							className: "lang-cell-sub",
@@ -111,8 +124,9 @@ function WordMatchLab({ deck, count, show = "translation", title = "Match the pa
 				"aria-label": "matches",
 				children: rightOrder.map((i) => {
 					const it = items[i];
-					return /* @__PURE__ */ jsx("button", {
+					return /* @__PURE__ */ jsx(Button, {
 						type: "button",
+						variant: "outline",
 						className: "lang-match-cell",
 						"data-state": cellState("R", i),
 						disabled: matched.has(i),
@@ -126,20 +140,24 @@ function WordMatchLab({ deck, count, show = "translation", title = "Match the pa
 						}) : /* @__PURE__ */ jsx("span", {
 							className: "lang-cell-text",
 							dir: transDir,
+							lang: deck.transLang,
 							children: it.translation
 						})
 					}, `R${i}`);
 				})
 			})]
-		}), /* @__PURE__ */ jsx(LiveRegion, { children: allDone ? "All pairs matched" : "" })]
+		}), /* @__PURE__ */ jsx(Activity.LiveRegion, { children: allDone ? "All pairs matched" : announcement })]
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
+	return /* @__PURE__ */ jsx(LanguageActivity, {
 		title,
 		prompt,
-		aside: /* @__PURE__ */ jsx(StatusPill, {
-			ok: allDone,
-			children: allDone ? "✓ All matched" : `${matched.size} / ${items.length} matched`
+		objectives,
+		progress: /* @__PURE__ */ jsx(Activity.ItemProgress, {
+			done: matched.size,
+			total: items.length,
+			label: "All matched"
 		}),
+		footer: hintList?.length ? /* @__PURE__ */ jsx(HintLadder, { hints }) : void 0,
 		children: figure
 	});
 }

package/dist/logic/ChipScene.d.mts

@@ -0,0 +1,30 @@
+import { ChipId, ChipResult, Wire } from "./ic.mjs";
+import { ReactNode } from "react";
+
+//#region src/logic/ChipScene.d.ts
+interface ChipSceneProps {
+  chip: ChipId;
+  wires: Wire[];
+  inputs: {
+    A: boolean;
+    B: boolean;
+  };
+  result: ChipResult;
+  /** Pin waiting for the other end of a jumper. */
+  pending?: number | null;
+  onPin?: (pin: number) => void;
+  onSwitch?: (which: 'A' | 'B') => void;
+  label: string;
+}
+declare function ChipScene({
+  chip,
+  wires,
+  inputs,
+  result,
+  pending,
+  onPin,
+  onSwitch,
+  label
+}: ChipSceneProps): ReactNode;
+//#endregion
+export { ChipScene, ChipSceneProps };