@classytic/labs 0.1.0

package/dist/language/deck.mjs

@@ -0,0 +1,61 @@
+//#region src/language/deck.ts
+const POS_LABEL = {
+	noun: "noun",
+	verb: "verb",
+	article: "article",
+	adjective: "adjective",
+	preposition: "preposition",
+	pronoun: "pronoun",
+	conjunction: "conjunction",
+	adverb: "adverb",
+	other: "word"
+};
+/** Text direction for a BCP-47 language tag (RTL scripts → 'rtl'). */
+function dirFor(lang) {
+	return /^(ar|fa|ur|he|ps|sd)\b/i.test(lang) ? "rtl" : "ltr";
+}
+function hasVoiceFor(lang) {
+	if (typeof window === "undefined" || !("speechSynthesis" in window)) return false;
+	const base = lang.toLowerCase().split("-")[0] ?? lang.toLowerCase();
+	return window.speechSynthesis.getVoices().some((v) => v.lang.toLowerCase().startsWith(base));
+}
+/** Can this item be voiced at all (own audio, or a matching browser voice)? */
+function canSpeak(item, lang) {
+	return Boolean(item.audioUrl) || hasVoiceFor(lang);
+}
+/** Play an item's audio. Returns false if nothing was playable. */
+function speak(item, lang) {
+	if (typeof window === "undefined") return false;
+	if (item.audioUrl) {
+		new Audio(item.audioUrl).play().catch(() => {});
+		return true;
+	}
+	if ("speechSynthesis" in window && hasVoiceFor(lang)) {
+		const u = new SpeechSynthesisUtterance(item.term);
+		u.lang = lang;
+		window.speechSynthesis.cancel();
+		window.speechSynthesis.speak(u);
+		return true;
+	}
+	return false;
+}
+/** Deterministic shuffle (seeded LCG) — same input+seed → same order, so SSR
+*  and client agree. Never uses Math.random at module scope. */
+function seededShuffle(arr, seed = 1) {
+	const a = arr.slice();
+	let s = Math.abs(Math.trunc(seed)) * 1103515245 + 12345 & 2147483647;
+	const rnd = () => {
+		s = s * 1103515245 + 12345 & 2147483647;
+		return s / 2147483647;
+	};
+	for (let i = a.length - 1; i > 0; i--) {
+		const j = Math.floor(rnd() * (i + 1));
+		const t = a[i];
+		a[i] = a[j];
+		a[j] = t;
+	}
+	return a;
+}
+
+//#endregion
+export { POS_LABEL, canSpeak, dirFor, hasVoiceFor, seededShuffle, speak };

package/dist/language/icon.d.mts

@@ -0,0 +1,40 @@
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/language/icon.d.ts
+interface IconRef {
+  kind: 'emoji' | 'svg' | 'image';
+  /** emoji character (kind:'emoji') OR a registered svg id (kind:'svg'). */
+  id?: string;
+  /** image URL (kind:'image'); also accepted as the emoji char if `id` is unset. */
+  src?: string;
+  /** accessible label; '' marks the icon purely decorative. */
+  alt: string;
+}
+/** A plain string is shorthand for an emoji (or a scene backdrop key). */
+type IconValue = string | IconRef;
+/** Register an inline-SVG icon so `{ kind:'svg', id }` resolves to it. */
+declare function registerLabIcon(id: string, render: (p: {
+  size: number;
+  title?: string;
+}) => ReactNode): void;
+/** Normalise any accepted value to an `IconRef` (or null when empty). */
+declare function normalizeIcon(v: IconValue | undefined | null): IconRef | null;
+interface IconProps {
+  icon?: IconValue;
+  /** px size for image/svg (emoji is sized by CSS when `className` is set). */
+  size?: number;
+  className?: string;
+  style?: CSSProperties;
+  /** Decorative → aria-hidden (a parent already labels it). */
+  decorative?: boolean;
+}
+/** Render an `IconValue`: emoji span, inline SVG (registry), or <img>. */
+declare function Icon({
+  icon,
+  size,
+  className,
+  style,
+  decorative
+}: IconProps): ReactNode;
+//#endregion
+export { Icon, IconRef, IconValue, normalizeIcon, registerLabIcon };

package/dist/language/icon.mjs

@@ -0,0 +1,73 @@
+'use client';
+
+import { jsx } from "react/jsx-runtime";
+
+//#region src/language/icon.tsx
+const SVG_ICONS = /* @__PURE__ */ new Map();
+/** Register an inline-SVG icon so `{ kind:'svg', id }` resolves to it. */
+function registerLabIcon(id, render) {
+	SVG_ICONS.set(id, render);
+}
+/** Normalise any accepted value to an `IconRef` (or null when empty). */
+function normalizeIcon(v) {
+	if (v == null || v === "") return null;
+	return typeof v === "string" ? {
+		kind: "emoji",
+		id: v,
+		alt: ""
+	} : v;
+}
+/** Render an `IconValue`: emoji span, inline SVG (registry), or <img>. */
+function Icon({ icon, size = 36, className, style, decorative }) {
+	const ref = normalizeIcon(icon);
+	if (!ref) return null;
+	const labelled = !decorative && !!ref.alt;
+	const a11y = labelled ? {
+		role: "img",
+		"aria-label": ref.alt
+	} : { "aria-hidden": true };
+	if (ref.kind === "image" && ref.src) return /* @__PURE__ */ jsx("img", {
+		src: ref.src,
+		alt: labelled ? ref.alt : "",
+		className,
+		width: size,
+		height: size,
+		loading: "lazy",
+		decoding: "async",
+		style: {
+			objectFit: "contain",
+			...style
+		}
+	});
+	if (ref.kind === "svg" && ref.id) {
+		const render = SVG_ICONS.get(ref.id);
+		if (render) return /* @__PURE__ */ jsx("span", {
+			className,
+			style: {
+				display: "inline-flex",
+				...style
+			},
+			...a11y,
+			children: render({
+				size,
+				title: labelled ? ref.alt : void 0
+			})
+		});
+	}
+	const char = ref.kind === "emoji" ? ref.id ?? ref.src ?? "" : ref.alt;
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		style: {
+			...className ? null : {
+				fontSize: size,
+				lineHeight: 1
+			},
+			...style
+		},
+		...a11y,
+		children: char
+	});
+}
+
+//#endregion
+export { Icon, normalizeIcon, registerLabIcon };

package/dist/language/index.d.mts

@@ -0,0 +1,10 @@
+import { Icon, IconRef, IconValue, normalizeIcon, registerLabIcon } from "./icon.mjs";
+import { Deck, DeckItem, POS_LABEL, Pos, TextDir, canSpeak, dirFor, hasVoiceFor, seededShuffle, speak } from "./deck.mjs";
+import { Speaker, Tile, useVoicesReady } from "./ui.mjs";
+import { SentenceBuilderLab, SentenceBuilderProps, SentenceTile } from "./sentence-builder/preset.mjs";
+import { WordMatchLab, WordMatchProps } from "./word-match/preset.mjs";
+import { Article, ArticleItem, ArticleLensLab, ArticleLensProps } from "./article-lens/preset.mjs";
+import { AgreementItem, AgreementLab, AgreementProps } from "./agreement/preset.mjs";
+import { TransformLab, TransformProps, TransformTile } from "./transform/preset.mjs";
+import { PrepItem, PrepositionProps, PrepositionSceneLab, Relation } from "./preposition-scene/preset.mjs";
+export { type AgreementItem, AgreementLab, type AgreementProps, type Article, type ArticleItem, ArticleLensLab, type ArticleLensProps, Deck, DeckItem, Icon, type IconRef, type IconValue, POS_LABEL, Pos, type PrepItem, type PrepositionProps, PrepositionSceneLab, type Relation, SentenceBuilderLab, type SentenceBuilderProps, type SentenceTile, Speaker, TextDir, Tile, TransformLab, type TransformProps, type TransformTile, WordMatchLab, type WordMatchProps, canSpeak, dirFor, hasVoiceFor, normalizeIcon, registerLabIcon, seededShuffle, speak, useVoicesReady };

package/dist/language/index.mjs

@@ -0,0 +1,11 @@
+import { POS_LABEL, canSpeak, dirFor, hasVoiceFor, seededShuffle, speak } from "./deck.mjs";
+import { Icon, normalizeIcon, registerLabIcon } from "./icon.mjs";
+import { Speaker, Tile, useVoicesReady } from "./ui.mjs";
+import { SentenceBuilderLab } from "./sentence-builder/preset.mjs";
+import { WordMatchLab } from "./word-match/preset.mjs";
+import { ArticleLensLab } from "./article-lens/preset.mjs";
+import { AgreementLab } from "./agreement/preset.mjs";
+import { TransformLab } from "./transform/preset.mjs";
+import { PrepositionSceneLab } from "./preposition-scene/preset.mjs";
+
+export { AgreementLab, ArticleLensLab, Icon, POS_LABEL, PrepositionSceneLab, SentenceBuilderLab, Speaker, Tile, TransformLab, WordMatchLab, canSpeak, dirFor, hasVoiceFor, normalizeIcon, registerLabIcon, seededShuffle, speak, useVoicesReady };

package/dist/language/preposition-scene/index.d.mts

@@ -0,0 +1 @@
+import { PrepItem, PrepositionProps, PrepositionSceneLab, Relation } from "./preset.mjs";

package/dist/language/preposition-scene/preset.d.mts

@@ -0,0 +1,34 @@
+import { IconValue } from "../icon.mjs";
+import { ReactNode } from "react";
+
+//#region src/language/preposition-scene/preset.d.ts
+/** Spatial relations a creator can depict (positions the figure vs the landmark). */
+type Relation = 'in' | 'on' | 'over' | 'above' | 'under' | 'below' | 'beside' | 'between' | 'behind' | 'infront' | 'at';
+interface PrepItem {
+  /** Text before the blank, e.g. "The bird is". */
+  before: string;
+  /** The noun phrase after the preposition, e.g. "the tree.". */
+  noun: string;
+  answer: string;
+  options: string[];
+  /** Spatial relation to depict (positions the figure vs the landmark). */
+  scene: Relation;
+  /** The figure being placed — an emoji string or an `IconRef`. Default a ball. */
+  figure?: IconValue;
+  /** The reference landmark — an emoji/`IconRef`, OR a backdrop key string
+   *  ('sky'|'water'|'ground'|'room'). Default a box. */
+  landmark?: IconValue;
+  note?: string;
+}
+interface PrepositionProps {
+  items: PrepItem[];
+  title?: string;
+  prompt?: string;
+}
+declare function PrepositionSceneLab({
+  items,
+  title,
+  prompt
+}: PrepositionProps): ReactNode;
+//#endregion
+export { PrepItem, PrepositionProps, PrepositionSceneLab, Relation };

package/dist/language/preposition-scene/preset.mjs

@@ -0,0 +1,234 @@
+'use client';
+
+import { CheckButton, StatusPill } from "../../kit/controls.mjs";
+import { ControlBar, LabFrame } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { Icon, normalizeIcon } from "../icon.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/language/preposition-scene/preset.tsx
+/**
+* PrepositionScene — pick the preposition that matches a spatial picture.
+*
+* Prepositions are inherently spatial, so each item shows a little scene (a
+* thing in / on / under / beside a box) and the learner names the relation.
+* The teaching point for Bangla speakers: English puts the preposition BEFORE
+* the noun ("on the box"), where Bangla uses a postposition AFTER it — so the
+* answer slots in front of the noun and the note makes that contrast explicit.
+*/
+const figAt = (left, top, scale = 1, opacity) => ({
+	left,
+	top,
+	transform: `translate(-50%,-50%)${scale !== 1 ? ` scale(${scale})` : ""}`,
+	...opacity != null ? { opacity } : {}
+});
+const FIGURE_POS = {
+	over: figAt("50%", "20%"),
+	above: figAt("50%", "20%"),
+	on: figAt("50%", "34%"),
+	in: figAt("50%", "56%", .6),
+	under: figAt("50%", "84%"),
+	below: figAt("50%", "84%"),
+	beside: figAt("80%", "56%"),
+	between: figAt("50%", "56%"),
+	behind: figAt("60%", "44%", .85, .5),
+	infront: figAt("42%", "64%", 1.1),
+	at: figAt("74%", "82%")
+};
+/** Region landmarks the scene draws as a panel rather than an emoji. */
+const BACKDROP_KEYS = [
+	"sky",
+	"water",
+	"ground",
+	"room"
+];
+function Backdrop({ kind }) {
+	if (kind === "sky") return /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "absolute",
+			inset: 0,
+			background: "linear-gradient(180deg,#bfe1ff,#eef7ff)"
+		},
+		children: /* @__PURE__ */ jsx("span", {
+			style: {
+				position: "absolute",
+				top: 8,
+				right: 14,
+				fontSize: 24
+			},
+			"aria-hidden": true,
+			children: "🌞"
+		})
+	});
+	if (kind === "water") return /* @__PURE__ */ jsx("div", { style: {
+		position: "absolute",
+		left: 0,
+		right: 0,
+		bottom: 0,
+		height: "52%",
+		background: "linear-gradient(180deg,#6aa6e6,#3f81cf)",
+		borderTopLeftRadius: "30px 14px",
+		borderTopRightRadius: "30px 14px"
+	} });
+	if (kind === "ground") return /* @__PURE__ */ jsx("div", { style: {
+		position: "absolute",
+		left: 0,
+		right: 0,
+		bottom: 0,
+		height: "32%",
+		background: "linear-gradient(180deg,#86c06a,#5fa244)"
+	} });
+	if (kind === "room") return /* @__PURE__ */ jsx("div", { style: {
+		position: "absolute",
+		inset: 0,
+		background: "linear-gradient(180deg,#f3eee4 62%,#d8c5a8 62%)"
+	} });
+	return null;
+}
+/** Figure placement over a backdrop (relative to the region, not a centred emoji).
+*  Center-anchored at safe %s for the same no-clip reason as FIGURE_POS. */
+function backdropFigPos(kind, rel) {
+	const hi = rel === "over" || rel === "above";
+	const lo = rel === "under" || rel === "below";
+	if (kind === "water") return rel === "in" ? figAt("50%", "76%") : hi ? figAt("50%", "20%") : figAt("50%", "42%");
+	if (kind === "sky") return figAt("50%", "38%");
+	if (kind === "ground") return hi ? figAt("50%", "20%") : lo ? figAt("50%", "86%") : figAt("50%", "60%");
+	return figAt("50%", "48%");
+}
+/** Plain-text label for an icon value (emoji char or IconRef.alt) — for the
+*  scene's aria-label, since the visuals themselves are decorative. */
+function iconLabel(v) {
+	const r = normalizeIcon(v);
+	return r ? r.alt || (r.kind === "emoji" ? r.id ?? "" : "") : "";
+}
+function SceneView({ relation, figure = "🔵", landmark = "📦" }) {
+	const isBackdrop = typeof landmark === "string" && BACKDROP_KEYS.includes(landmark);
+	const behindLandmark = relation === "behind" && !isBackdrop;
+	const fig = /* @__PURE__ */ jsx(Icon, {
+		icon: figure,
+		className: "lang-prepfig",
+		style: isBackdrop ? backdropFigPos(landmark, relation) : FIGURE_POS[relation] ?? FIGURE_POS.on,
+		decorative: true
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lang-prepscene",
+		role: "img",
+		"aria-label": `${iconLabel(figure)} ${relation} ${iconLabel(landmark)}`.trim(),
+		children: [
+			isBackdrop && /* @__PURE__ */ jsx(Backdrop, { kind: landmark }),
+			!isBackdrop && relation === "between" && /* @__PURE__ */ jsx(Icon, {
+				icon: landmark,
+				className: "lang-preplandmark",
+				style: { left: "28%" },
+				decorative: true
+			}),
+			behindLandmark && fig,
+			!isBackdrop && /* @__PURE__ */ jsx(Icon, {
+				icon: landmark,
+				className: "lang-preplandmark",
+				style: relation === "between" ? { left: "72%" } : void 0,
+				decorative: true
+			}),
+			!behindLandmark && fig
+		]
+	});
+}
+function PrepositionSceneLab({ items, title = "Where is it?", prompt = "Pick the preposition — in English it comes BEFORE the noun." }) {
+	const [idx, setIdx] = useState(0);
+	const [picked, setPicked] = useState(null);
+	const [solvedCount, setSolvedCount] = useState(0);
+	useEffect(() => {
+		setIdx(0);
+		setPicked(null);
+		setSolvedCount(0);
+	}, [items]);
+	const item = items[idx];
+	const correct = picked !== null && item !== void 0 && picked === item.answer;
+	const total = items.length;
+	const allDone = solvedCount >= total && total > 0;
+	useCheckpoint({
+		solved: allDone,
+		activity: "preposition",
+		score: {
+			raw: total,
+			max: total
+		}
+	});
+	if (!item) return null;
+	const pick = (v) => {
+		if (correct) return;
+		setPicked(v);
+		if (v === item.answer) setSolvedCount((s) => Math.min(total, s + 1));
+	};
+	const next = () => {
+		setPicked(null);
+		setIdx((i) => Math.min(total - 1, i + 1));
+	};
+	const isLast = idx === total - 1;
+	const figure = /* @__PURE__ */ jsxs("div", {
+		className: "lang-lab",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "lang-scene",
+				children: /* @__PURE__ */ jsx(SceneView, {
+					relation: item.scene,
+					figure: item.figure,
+					landmark: item.landmark
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "lang-sentence",
+				"aria-label": "sentence",
+				children: [
+					/* @__PURE__ */ jsx("span", { children: item.before }),
+					/* @__PURE__ */ jsx("span", {
+						className: "lang-blank",
+						"data-state": picked === null ? "idle" : correct ? "ok" : "no",
+						children: picked ?? "▢"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "lang-noun",
+						children: item.noun
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "lang-choices",
+				role: "group",
+				"aria-label": "prepositions",
+				children: item.options.map((v) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "lang-choice",
+					"data-state": picked === v ? correct ? "ok" : "no" : "idle",
+					disabled: correct,
+					onClick: () => pick(v),
+					"aria-label": v,
+					children: v
+				}, v))
+			}),
+			picked !== null && /* @__PURE__ */ jsx("p", {
+				className: "lang-why",
+				"data-state": correct ? "ok" : "no",
+				"aria-live": "polite",
+				children: correct ? item.note ?? `English: "${item.answer} ${item.noun}" — the preposition comes first.` : "Not quite — look at the picture."
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		aside: /* @__PURE__ */ jsx(StatusPill, {
+			ok: allDone,
+			children: allDone ? "✓ All correct" : `${solvedCount} / ${total}`
+		}),
+		controls: correct && !isLast ? /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(CheckButton, {
+			onClick: next,
+			children: "Next"
+		}) }) : void 0,
+		children: figure
+	});
+}
+
+//#endregion
+export { PrepositionSceneLab };

package/dist/language/sentence-builder/index.d.mts

@@ -0,0 +1 @@
+import { SentenceBuilderLab, SentenceBuilderProps, SentenceTile } from "./preset.mjs";

package/dist/language/sentence-builder/preset.d.mts

@@ -0,0 +1,32 @@
+import { Pos } from "../deck.mjs";
+import { ReactNode } from "react";
+
+//#region src/language/sentence-builder/preset.d.ts
+interface SentenceTile {
+  text: string;
+  pos?: Pos;
+  /** Optional L1 gloss shown under the tile. */
+  gloss?: string;
+}
+interface SentenceBuilderProps {
+  /** Tiles in the CORRECT order. */
+  tiles: SentenceTile[];
+  /** The meaning / L1 sentence shown above (e.g. "আমি ভাত খাই"). */
+  prompt?: string;
+  /** Direction of the prompt text. */
+  promptDir?: 'ltr' | 'rtl';
+  /** Direction of the tiles' language (target). */
+  targetDir?: 'ltr' | 'rtl';
+  title?: string;
+  hint?: string;
+}
+declare function SentenceBuilderLab({
+  tiles,
+  prompt,
+  promptDir,
+  targetDir,
+  title,
+  hint
+}: SentenceBuilderProps): ReactNode;
+//#endregion
+export { SentenceBuilderLab, SentenceBuilderProps, SentenceTile };

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

@@ -0,0 +1,122 @@
+'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 { 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/sentence-builder/preset.tsx
+/**
+* SentenceBuilder — order the words into a correct sentence.
+*
+* 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 —
+* which is exactly how a Bangla speaker meets English word order: same meaning,
+* different slot order (SOV → SVO).
+*
+* Tap a tile in the bank to place it; tap a placed tile to take it back. No
+* 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." }) {
+	const target = useMemo(() => tiles.map((t) => t.text).join(" "), [tiles]);
+	const initialBank = useMemo(() => {
+		let order = seededShuffle(tiles.map((_, i) => i), tiles.length * 7 + 3);
+		if (tiles.length > 1 && order.map((i) => tiles[i].text).join(" ") === target) order = order.slice().reverse();
+		return order;
+	}, [tiles, 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) => tiles[i].text).join(" ");
+	const full = line.length === tiles.length;
+	const correct = full && attempt === target;
+	useCheckpoint({
+		solved: correct,
+		activity: "sentence-builder"
+	});
+	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: [
+			prompt ? /* @__PURE__ */ jsx("p", {
+				className: "lang-prompt",
+				dir: promptDir,
+				children: prompt
+			}) : null,
+			/* @__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: hint
+				}) : line.map((i) => /* @__PURE__ */ jsx(Tile, {
+					pos: tiles[i].pos,
+					text: tiles[i].text,
+					gloss: tiles[i].gloss,
+					dir: targetDir,
+					onClick: () => take(i),
+					ariaLabel: `${tiles[i].text} — tap to remove`
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "lang-bank",
+				"aria-label": "word bank",
+				children: bank.map((i) => /* @__PURE__ */ jsx(Tile, {
+					pos: tiles[i].pos,
+					text: tiles[i].text,
+					gloss: tiles[i].gloss,
+					dir: targetDir,
+					onClick: () => place(i),
+					ariaLabel: `${tiles[i].text} — tap to place`
+				}, i))
+			}),
+			/* @__PURE__ */ jsx(LiveRegion, { children: checked ? correct ? "Correct word order" : "Not the right order yet" : "" })
+		]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt: hint,
+		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"
+		})] }),
+		children: figure
+	});
+}
+
+//#endregion
+export { SentenceBuilderLab };

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

@@ -0,0 +1 @@
+import { TransformLab, TransformProps, TransformTile } from "./preset.mjs";

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

@@ -0,0 +1,31 @@
+import { Pos } from "../deck.mjs";
+import { ReactNode } from "react";
+
+//#region src/language/transform/preset.d.ts
+interface TransformTile {
+  text: string;
+  pos?: Pos;
+  gloss?: string;
+}
+interface TransformProps {
+  /** Source sentence tiles (correct order) — shown read-only. */
+  from: TransformTile[];
+  /** Target sentence tiles (correct order) — the learner rebuilds these. */
+  to: TransformTile[];
+  /** What to do, e.g. "Make it a question". */
+  instruction?: string;
+  /** One-line explanation shown on success. */
+  note?: string;
+  title?: string;
+  targetDir?: 'ltr' | 'rtl';
+}
+declare function TransformLab({
+  from,
+  to,
+  instruction,
+  note,
+  title,
+  targetDir
+}: TransformProps): ReactNode;
+//#endregion
+export { TransformLab, TransformProps, TransformTile };