@classytic/labs 0.2.0 → 0.3.0

package/dist/language/article-lens/preset.mjs

@@ -1,8 +1,10 @@
 'use client';
 
-import { CheckButton, StatusPill } from "../../kit/controls.mjs";
-import { ControlBar, LabFrame } from "../../kit/frame.mjs";
+import { AssessedChoiceGroup } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
 import { HintLadder, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
+import { Speaker } from "../ui.mjs";
+import { LanguageActivity, LanguageAdvance } from "../activity.mjs";
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -27,7 +29,7 @@ const RULE = {
 	the: "the → the specific one we both know",
 	", ": "no article → general or uncountable"
 };
-function ArticleLensLab({ items, objectives, hints: hintList, title = "Choose the article", prompt = "Bangla has no a/an/the: pick what English needs." }) {
+function ArticleLensLab({ items, objectives, hints: hintList, lang, title = "Choose the article", prompt = "Bangla has no a/an/the: pick what English needs." }) {
 	const [idx, setIdx] = useState(0);
 	const [picked, setPicked] = useState(null);
 	const [solvedCount, setSolvedCount] = useState(0);
@@ -79,43 +81,66 @@ function ArticleLensLab({ items, objectives, hints: hintList, title = "Choose th
 						className: "lang-noun",
 						children: item.noun
 					}),
-					item.after ? /* @__PURE__ */ jsx("span", { children: item.after }) : null
+					item.after ? /* @__PURE__ */ jsx("span", { children: item.after }) : null,
+					lang ? /* @__PURE__ */ jsx(Speaker, {
+						item: {
+							term: `${item.before} ${item.answer === ", " ? "" : item.answer} ${item.noun}${item.after ? ` ${item.after}` : ""}`.replace(/\s+/g, " ").trim(),
+							translation: ""
+						},
+						lang
+					}) : null
 				]
 			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "lang-choices",
-				role: "group",
-				"aria-label": "articles",
-				children: CHOICES.map((a) => /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "lang-choice",
-					"data-state": picked === a ? correct ? "ok" : "no" : "idle",
+			/* @__PURE__ */ jsx(AssessedChoiceGroup, {
+				value: picked ?? void 0,
+				onChange: pick,
+				ariaLabel: "Choose the article that completes the sentence",
+				options: CHOICES.map((value) => ({
+					value,
+					label: value === ", " ? "No article" : value,
 					disabled: correct,
-					onClick: () => pick(a),
-					"aria-label": a === ", " ? "no article" : a,
-					children: a === ", " ? "no article" : a
-				}, a))
+					tone: picked === value ? value === item.answer ? "correct" : "wrong" : void 0
+				}))
 			}),
-			picked !== null && /* @__PURE__ */ jsx("p", {
+			picked !== null && (correct ? /* @__PURE__ */ jsx("p", {
 				className: "lang-why",
-				"data-state": correct ? "ok" : "no",
+				"data-state": "ok",
 				"aria-live": "polite",
-				children: correct ? item.why ?? RULE[item.answer] : "Not quite, try another."
-			})
+				children: item.why ?? RULE[item.answer]
+			}) : item.feedback?.[picked] ? /* @__PURE__ */ jsxs("p", {
+				className: "lab-misconception lang-feedback",
+				role: "status",
+				"aria-live": "polite",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						children: "⚠"
+					}),
+					" ",
+					item.feedback[picked]
+				]
+			}) : /* @__PURE__ */ jsx("p", {
+				className: "lang-why",
+				"data-state": "no",
+				"aria-live": "polite",
+				children: "Not quite, try another."
+			}))
 		]
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
+	return /* @__PURE__ */ jsx(LanguageActivity, {
 		title,
 		prompt,
 		objectives,
-		aside: /* @__PURE__ */ jsx(StatusPill, {
-			ok: allDone,
-			children: allDone ? "✓ All correct" : `${solvedCount} / ${total}`
+		progress: /* @__PURE__ */ jsx(Activity.ItemProgress, {
+			done: solvedCount,
+			total,
+			label: "All correct"
 		}),
-		controls: correct && !isLast ? /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(CheckButton, {
-			onClick: next,
-			children: "Next"
-		}) }) : void 0,
+		controls: correct && !isLast ? /* @__PURE__ */ jsx(LanguageAdvance, {
+			current: solvedCount,
+			total,
+			onNext: next
+		}) : void 0,
 		footer: /* @__PURE__ */ jsx(HintLadder, { hints }),
 		children: figure
 	});

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

@@ -0,0 +1 @@
+import { ClozeItem, ClozeLab, ClozeProps } from "./preset.mjs";

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

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+
+//#region src/language/cloze/preset.d.ts
+interface ClozeItem {
+  /** Sentence with each blank written as `___` (three or more underscores). */
+  text: string;
+  /** The correct fill for each blank, in order. */
+  answers: string[];
+  /** Extra wrong tiles for the bank (the answers are always included). */
+  distractors?: string[];
+  /** One-line reason shown once the sentence is complete. */
+  why?: string;
+  /** Optional L1 gloss / translation of the sentence. */
+  gloss?: string;
+  /** Optional audio for the whole sentence (uploaded / external URL). */
+  audioUrl?: string;
+}
+interface ClozeProps {
+  items: ClozeItem[];
+  /** BCP-47 of the sentence, e.g. 'en-US', for the Speaker (browser voice). */
+  lang?: string;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+  hints?: string[];
+}
+declare function ClozeLab({
+  items,
+  lang,
+  title,
+  prompt,
+  objectives,
+  hints: hintList
+}: ClozeProps): ReactNode;
+//#endregion
+export { ClozeItem, ClozeLab, ClozeProps };

package/dist/language/cloze/preset.mjs

@@ -0,0 +1,128 @@
+'use client';
+
+import { Activity } from "../../kit/activity.mjs";
+import { HintLadder, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
+import { Blank, SlotTray, useSlotFill } from "../../kit/slot-fill.mjs";
+import { seededShuffle } from "../deck.mjs";
+import { Speaker } from "../ui.mjs";
+import { LanguageActivity, LanguageAdvance } from "../activity.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/language/cloze/preset.tsx
+/**
+* ClozeLab, "fill the gap": a sentence with one or more blanks the learner
+* completes by tapping words from a bank. The single highest-value language
+* interaction, grammar and vocabulary in real sentence CONTEXT, not isolated
+* choices ("She ___ to school" → goes; "I want ___ apple" → an).
+*
+* Bank-mode (tap tiles) rather than free typing: mobile-first, forgiving of
+* spelling, and consistent with the other language labs. It reuses the tested
+* slot-fill engine (`useSlotFill` + `Blank` + `SlotTray`, tap a filled blank to
+* clear it), so grading, keyboard support, and the tile tray come for free.
+*
+* Data-driven: a creator declares `items` (sentence + answers + optional
+* distractor tiles + a "why" + an L1 gloss); pass `lang` to voice the completed
+* sentence via the shared Speaker (uploaded audio or the browser voice).
+*/
+const BLANK = /_{3,}/g;
+/** One cloze card. Keyed by index in the parent so it remounts (fresh fill state). */
+function ClozeCard({ item, lang, onSolved }) {
+	const segments = item.text.split(BLANK);
+	const nBlanks = segments.length - 1;
+	const fill = useSlotFill(Array.from({ length: nBlanks }, (_, i) => ({
+		id: `b${i}`,
+		answer: item.answers[i] ?? ""
+	})), seededShuffle([...new Set([...item.answers, ...item.distractors ?? []])], 7), "cloze", onSolved);
+	let ai = 0;
+	const spoken = item.text.replace(BLANK, () => item.answers[ai++] ?? "");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lang-lab",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "lang-cloze",
+				"aria-label": "sentence",
+				children: [segments.map((s, i) => /* @__PURE__ */ jsxs("span", { children: [s, i < nBlanks ? /* @__PURE__ */ jsx(Blank, {
+					fill,
+					id: `b${i}`,
+					width: 68
+				}) : null] }, i)), lang ? /* @__PURE__ */ jsx(Speaker, {
+					item: {
+						term: spoken,
+						translation: "",
+						audioUrl: item.audioUrl
+					},
+					lang
+				}) : null]
+			}),
+			item.gloss ? /* @__PURE__ */ jsx("p", {
+				className: "lang-hint",
+				children: item.gloss
+			}) : null,
+			/* @__PURE__ */ jsx(SlotTray, { fill }),
+			fill.solved ? /* @__PURE__ */ jsxs("p", {
+				className: "lang-why",
+				"data-state": "ok",
+				"aria-live": "polite",
+				children: ["✓ ", item.why ?? "Correct"]
+			}) : null
+		]
+	});
+}
+function ClozeLab({ items, lang, title = "Fill the gap", prompt = "Tap the words to complete the sentence.", objectives, hints: hintList }) {
+	const [idx, setIdx] = useState(0);
+	const [solvedCount, setSolvedCount] = useState(0);
+	const [cardSolved, setCardSolved] = useState(false);
+	useEffect(() => {
+		setIdx(0);
+		setSolvedCount(0);
+		setCardSolved(false);
+	}, [items]);
+	const total = items.length;
+	const item = items[idx];
+	const allDone = solvedCount >= total && total > 0;
+	const hints = useHints(hintList);
+	useCheckpoint({
+		solved: allDone,
+		activity: "cloze",
+		score: {
+			raw: total,
+			max: total
+		},
+		hintsUsed: hints.count
+	});
+	if (!item) return null;
+	const onSolved = () => {
+		setCardSolved(true);
+		setSolvedCount((s) => Math.min(total, s + 1));
+	};
+	const next = () => {
+		setCardSolved(false);
+		setIdx((i) => Math.min(total - 1, i + 1));
+	};
+	const isLast = idx === total - 1;
+	return /* @__PURE__ */ jsx(LanguageActivity, {
+		title,
+		prompt,
+		objectives,
+		progress: /* @__PURE__ */ jsx(Activity.ItemProgress, {
+			done: solvedCount,
+			total,
+			label: "All correct"
+		}),
+		controls: cardSolved && !isLast ? /* @__PURE__ */ jsx(LanguageAdvance, {
+			current: solvedCount,
+			total,
+			onNext: next
+		}) : void 0,
+		footer: /* @__PURE__ */ jsx(HintLadder, { hints }),
+		children: /* @__PURE__ */ jsx(ClozeCard, {
+			item,
+			lang,
+			onSolved
+		}, idx)
+	});
+}
+
+//#endregion
+export { ClozeLab };

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

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

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

@@ -0,0 +1,21 @@
+import { Deck } from "../deck.mjs";
+import { ReactNode } from "react";
+
+//#region src/language/dictation/preset.d.ts
+interface DictationProps {
+  deck: Deck;
+  /** Show the meaning as a hint under the input. Default false. */
+  showMeaning?: boolean;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+}
+declare function DictationLab({
+  deck,
+  showMeaning,
+  title,
+  prompt,
+  objectives
+}: DictationProps): ReactNode;
+//#endregion
+export { DictationLab, DictationProps };

package/dist/language/dictation/preset.mjs

@@ -0,0 +1,171 @@
+'use client';
+
+import { CheckButton, StatusPill } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { dirFor, speak } from "../deck.mjs";
+import { ListenButton } from "../ui.mjs";
+import { LanguageActivity, LanguageAdvance } from "../activity.mjs";
+import { useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+//#region src/language/dictation/preset.tsx
+/**
+* DictationLab, "hear it, write it": play a word or phrase, the learner TYPES what
+* they heard. Trains listening + spelling together, the hardest, highest-transfer
+* combination (and the one Bangla speakers most lack, e.g. the silent -e, the -ed
+* ending, doubled letters). Answers are checked forgivingly (case + trailing
+* punctuation ignored). A "show spelling" peek is always available.
+*
+* Data-driven off the shared `Deck`; audio is an uploaded clip or the browser voice.
+*/
+const norm = (s, locale) => s.normalize("NFC").trim().toLocaleLowerCase(locale).replace(/[.,!?;:"']+$/g, "").replace(/\s+/g, " ");
+function DictationLab({ deck, showMeaning = false, title = "Listen and write", prompt = "Tap play, then type exactly what you hear.", objectives }) {
+	const items = deck.items;
+	const total = items.length;
+	const [round, setRound] = useState(0);
+	const [value, setValue] = useState("");
+	const [verdict, setVerdict] = useState(null);
+	const [revealed, setRevealed] = useState(false);
+	const [listened, setListened] = useState(false);
+	const [solvedCount, setSolvedCount] = useState(0);
+	const answerId = useId();
+	const inputRef = useRef(null);
+	useEffect(() => {
+		setRound(0);
+		setValue("");
+		setVerdict(null);
+		setRevealed(false);
+		setListened(false);
+		setSolvedCount(0);
+	}, [deck]);
+	const target = items[round];
+	useCheckpoint({
+		solved: solvedCount >= total && total > 0,
+		activity: "dictation",
+		score: {
+			raw: total,
+			max: total
+		}
+	});
+	if (!target) return null;
+	const solved = verdict === true;
+	const isLast = round === total - 1;
+	const check = () => {
+		if (solved) return;
+		const ok = norm(value, deck.termLang) === norm(target.term, deck.termLang);
+		setVerdict(ok);
+		if (ok) setSolvedCount((s) => Math.min(total, s + 1));
+	};
+	const next = () => {
+		const nr = Math.min(total - 1, round + 1);
+		setRound(nr);
+		setValue("");
+		setVerdict(null);
+		setRevealed(false);
+		setListened(speak(items[nr], deck.termLang));
+		inputRef.current?.focus();
+	};
+	const figure = /* @__PURE__ */ jsxs("div", {
+		className: "lang-lab lang-dictation-card",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "lang-dictation-toolbar",
+				children: [/* @__PURE__ */ jsx(ListenButton, {
+					item: target,
+					lang: deck.termLang,
+					label: listened ? "Play again" : "Listen",
+					onPlay: () => setListened(true)
+				}), /* @__PURE__ */ jsx("span", { children: "Play it again whenever you need." })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "lang-dictation-answer",
+				children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: answerId,
+					children: "Your answer"
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "lang-dictation-input-row",
+					children: [/* @__PURE__ */ jsx(Input, {
+						id: answerId,
+						ref: inputRef,
+						className: "lab-input",
+						value,
+						placeholder: "Type what you hear",
+						disabled: solved || !listened,
+						dir: dirFor(deck.termLang),
+						lang: deck.termLang,
+						onChange: (e) => {
+							setValue(e.currentTarget.value);
+							setVerdict(null);
+						},
+						onKeyDown: (e) => {
+							if (e.key === "Enter" && !e.nativeEvent.isComposing) check();
+						}
+					}), !solved ? /* @__PURE__ */ jsx(CheckButton, {
+						onClick: check,
+						disabled: !listened || !value.trim(),
+						children: "Check"
+					}) : null]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "lang-dictation-foot",
+				children: [
+					verdict === false ? /* @__PURE__ */ jsx(StatusPill, {
+						ok: false,
+						role: "status",
+						children: "Not quite, listen again"
+					}) : null,
+					!solved ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						variant: "outline",
+						className: "lab-reveal-btn",
+						onClick: () => setRevealed(true),
+						children: "Show spelling"
+					}) : null,
+					revealed && !solved ? /* @__PURE__ */ jsx("span", {
+						className: "lang-reveal",
+						lang: deck.termLang,
+						dir: dirFor(deck.termLang),
+						children: target.term
+					}) : null
+				]
+			}),
+			solved ? /* @__PURE__ */ jsxs("p", {
+				className: "lang-why",
+				"data-state": "ok",
+				"aria-live": "polite",
+				children: [/* @__PURE__ */ jsxs("span", {
+					lang: deck.termLang,
+					dir: dirFor(deck.termLang),
+					children: ["✓ ", target.term]
+				}), showMeaning ? /* @__PURE__ */ jsxs("span", {
+					lang: deck.transLang,
+					children: [" = ", target.translation]
+				}) : null]
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ jsx(LanguageActivity, {
+		title,
+		prompt,
+		objectives,
+		progress: /* @__PURE__ */ jsx(Activity.ItemProgress, {
+			done: solvedCount,
+			total,
+			label: "All correct"
+		}),
+		controls: solved && !isLast ? /* @__PURE__ */ jsx(LanguageAdvance, {
+			current: solvedCount,
+			total,
+			onNext: next
+		}) : void 0,
+		children: figure
+	});
+}
+
+//#endregion
+export { DictationLab };

package/dist/language/error-correct/index.d.mts

@@ -0,0 +1 @@
+import { ErrorCorrectLab, ErrorCorrectProps, ErrorItem } from "./preset.mjs";

package/dist/language/error-correct/preset.d.mts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+
+//#region src/language/error-correct/preset.d.ts
+interface ErrorItem {
+  /** The sentence containing exactly one mistake. */
+  text: string;
+  /** The wrong word, exactly as it appears in `text` (first match is flagged). */
+  wrong: string;
+  /** The correction that replaces it. */
+  fix: string;
+  /** Why, shown once the error is caught. */
+  why?: string;
+}
+interface ErrorCorrectProps {
+  items: ErrorItem[];
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+  hints?: string[];
+}
+declare function ErrorCorrectLab({
+  items,
+  title,
+  prompt,
+  objectives,
+  hints: hintList
+}: ErrorCorrectProps): ReactNode;
+//#endregion
+export { ErrorCorrectLab, ErrorCorrectProps, ErrorItem };

package/dist/language/error-correct/preset.mjs

@@ -0,0 +1,134 @@
+'use client';
+
+import { Activity } from "../../kit/activity.mjs";
+import { HintLadder, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
+import { LanguageActivity, LanguageAdvance } from "../activity.mjs";
+import { useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@/components/ui/button";
+
+//#region src/language/error-correct/preset.tsx
+/**
+* ErrorCorrectLab, "spot the mistake": a sentence with ONE error; the learner taps
+* the wrong word and sees it corrected. Proofreading / meta-grammar, the reverse of
+* the drill labs (recognise a rule by catching where it's broken). Perfect for the
+* classic Bangla-L1 slips, "He go", "a apple", "the childs", a missing copula.
+*
+* Tap the word you think is wrong: right → it flips to the fix (green) with a why;
+* wrong → it shakes. Data-driven; the fix is shown IN the sentence, so the correction
+* is seen in context, not just stated.
+*/
+const bare = (s) => s.replace(/[.,!?;:"']+$/g, "").toLowerCase();
+function ErrorCorrectLab({ items, title = "Find the mistake", prompt = "One word is wrong. Tap it to fix it.", objectives, hints: hintList }) {
+	const [round, setRound] = useState(0);
+	const [found, setFound] = useState(false);
+	const [wrongTap, setWrongTap] = useState(null);
+	const [solvedCount, setSolvedCount] = useState(0);
+	useEffect(() => {
+		setRound(0);
+		setFound(false);
+		setWrongTap(null);
+		setSolvedCount(0);
+	}, [items]);
+	const item = items[round];
+	const total = items.length;
+	const allDone = solvedCount >= total && total > 0;
+	const hints = useHints(hintList);
+	useCheckpoint({
+		solved: allDone,
+		activity: "error-correct",
+		score: {
+			raw: total,
+			max: total
+		},
+		hintsUsed: hints.count
+	});
+	if (!item) return null;
+	const tokens = item.text.split(/(\s+)/);
+	const badIdx = tokens.findIndex((t) => t.trim() && bare(t) === bare(item.wrong));
+	const isLast = round === total - 1;
+	const tap = (i) => {
+		if (found) return;
+		if (i === badIdx) {
+			setFound(true);
+			setWrongTap(null);
+			setSolvedCount((s) => Math.min(total, s + 1));
+		} else setWrongTap(i);
+	};
+	const next = () => {
+		setRound((r) => Math.min(total - 1, r + 1));
+		setFound(false);
+		setWrongTap(null);
+	};
+	const figure = /* @__PURE__ */ jsxs("div", {
+		className: "lang-lab",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "lang-errsentence",
+			"aria-label": "sentence, tap the wrong word",
+			children: tokens.map((t, i) => {
+				if (!t.trim()) return /* @__PURE__ */ jsx("span", { children: t }, i);
+				if (i === badIdx) return found ? /* @__PURE__ */ jsx("span", {
+					className: "lang-fix",
+					children: item.fix
+				}, i) : /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					className: "lang-word",
+					"data-state": i === wrongTap ? "no" : "idle",
+					onClick: () => tap(i),
+					children: t
+				}, i);
+				return /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "sm",
+					className: "lang-word",
+					"data-state": i === wrongTap ? "no" : "idle",
+					disabled: found,
+					onClick: () => tap(i),
+					children: t
+				}, i);
+			})
+		}), found ? /* @__PURE__ */ jsxs("p", {
+			className: "lang-why",
+			"data-state": "ok",
+			"aria-live": "polite",
+			children: [
+				"✓",
+				" ",
+				item.why ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					"“",
+					item.wrong,
+					"” → ",
+					/* @__PURE__ */ jsx("b", { children: item.fix })
+				] })
+			]
+		}) : /* @__PURE__ */ jsx("p", {
+			className: wrongTap === null ? "lang-hint" : "lang-why",
+			"data-state": wrongTap === null ? void 0 : "no",
+			"aria-live": "polite",
+			children: wrongTap === null ? "Tap the word that is wrong." : "That word works in this sentence. Compare the subject, verb, and ending, then try another word."
+		})]
+	});
+	return /* @__PURE__ */ jsx(LanguageActivity, {
+		title,
+		prompt,
+		objectives,
+		progress: /* @__PURE__ */ jsx(Activity.ItemProgress, {
+			done: solvedCount,
+			total,
+			label: "All correct"
+		}),
+		controls: found && !isLast ? /* @__PURE__ */ jsx(LanguageAdvance, {
+			current: solvedCount,
+			total,
+			onNext: next
+		}) : void 0,
+		footer: /* @__PURE__ */ jsx(HintLadder, { hints }),
+		children: figure
+	});
+}
+
+//#endregion
+export { ErrorCorrectLab };

package/dist/language/icon.mjs

@@ -29,24 +29,18 @@ function Icon({ icon, size = 36, className, style, decorative }) {
 	if (ref.kind === "image" && ref.src) return /* @__PURE__ */ jsx("img", {
 		src: ref.src,
 		alt: labelled ? ref.alt : "",
-		className,
+		className: ["lang-icon-image", className].filter(Boolean).join(" "),
 		width: size,
 		height: size,
 		loading: "lazy",
 		decoding: "async",
-		style: {
-			objectFit: "contain",
-			...style
-		}
+		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
-			},
+			className: ["lang-icon-svg", className].filter(Boolean).join(" "),
+			style,
 			...a11y,
 			children: render({
 				size,