@tinyweb_dev/oe-exam-sdk 0.2.13 → 1.0.0

package/dist/components/questions/types/match-word-to-picture-group/MatchWordToPictureGroupCreator.js

@@ -19,9 +19,10 @@ function parsePointsValue(raw, allowZero = false) {
     return Math.max(min, parsed);
 }
 import { Eye, Pencil, Plus, Star, Trash2 } from 'lucide-react';
+import { RichTextEditor } from '../../../../components/shared/RichTextEditor';
 import { MatchWordToPictureGroupClient } from './MatchWordToPictureGroupClient';
 import { MatchWordToPictureGroupImageField } from './MatchWordToPictureGroupImageField';
-import { MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION } from '../../_shared/types/match-word-to-picture-group.type';
+import { MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION, fromMatchWordToPictureImageUrls, toMatchWordToPictureImageUrls, } from '../../_shared/types/match-word-to-picture-group.type';
 import { createEmptyMatchWordToPictureGroupItem, mapQuestionToMatchWordToPictureGroupData, } from './map-match-word-to-picture-group-data';
 function sumPoints(items) {
     return items.reduce((total, item) => (item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1)), 0);
@@ -30,7 +31,9 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
     const seeded = mapQuestionToMatchWordToPictureGroupData(initialData ? { answer: initialData } : null);
     const [title, setTitle] = useState(initialData?.title || '');
     const [instruction, setInstruction] = useState(initialData?.instruction || seeded.instruction || MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION);
-    const [imageUrl, setImageUrl] = useState(initialData?.imageUrl || '');
+    const [passage, setPassage] = useState(initialData?.passage || seeded.passage || '');
+    const [audioUrl] = useState(initialData?.audioUrl || seeded.audioUrl || '');
+    const [imageUrl, setImageUrl] = useState(toMatchWordToPictureImageUrls(initialData?.imageUrl)[0] || '');
     const [wordBank, setWordBank] = useState(initialData?.wordBank?.length ? initialData.wordBank : seeded.wordBank);
     const [items, setItems] = useState(() => (initialData?.items?.length ? initialData.items : seeded.items));
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
@@ -41,9 +44,11 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
     useEffect(() => {
         onChangeRef.current = onChange;
     }, [onChange]);
-    const buildPayload = (nextTitle = title, nextInstruction = instruction, nextImageUrl = imageUrl, nextWordBank = wordBank, nextItems = items, nextExplanation = explanation) => ({
+    const buildPayload = (nextTitle = title, nextInstruction = instruction, nextPassage = passage, nextImageUrl = imageUrl, nextWordBank = wordBank, nextItems = items, nextExplanation = explanation) => ({
         ...(nextTitle.trim() ? { title: nextTitle } : {}),
         instruction: nextInstruction,
+        ...(nextPassage.trim() ? { passage: nextPassage } : {}),
+        ...(audioUrl.trim() ? { audioUrl: audioUrl.trim() } : {}),
         ...(nextImageUrl.trim() ? { imageUrl: nextImageUrl } : {}),
         wordBank: nextWordBank,
         items: nextItems,
@@ -61,7 +66,7 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
             debouncedOnChange(payload);
             onUnsavedChangesChange?.(true);
         }
-    }, [title, instruction, imageUrl, wordBank, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    }, [title, instruction, passage, audioUrl, imageUrl, wordBank, items, explanation, debouncedOnChange, onUnsavedChangesChange]);
     const validate = () => {
         const nextErrors = [];
         if (!instruction.trim())
@@ -72,7 +77,7 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
         if (items.length < 1)
             nextErrors.push('Cần ít nhất một câu hỏi.');
         items.forEach((item, index) => {
-            if (!imageUrl.trim() && !item.imageUrl?.trim()) {
+            if (!imageUrl.trim() && toMatchWordToPictureImageUrls(item.imageUrl).length === 0) {
                 nextErrors.push(`Câu ${index + 1}: cần ảnh (hoặc ảnh chung).`);
             }
             if (!item.correctAnswer.trim())
@@ -88,15 +93,17 @@ export function MatchWordToPictureGroupCreator({ initialData, onChange, external
                 getFormData: () => buildPayload(),
             };
         }
-    }, [validationRef, title, instruction, imageUrl, wordBank, items, explanation]);
+    }, [validationRef, title, instruction, passage, audioUrl, imageUrl, wordBank, items, explanation]);
     const updateItem = (index, patch) => {
         setItems((prev) => prev.map((item, i) => (i === index ? { ...item, ...patch } : item)));
     };
     const currentPayload = buildPayload();
     const displayErrors = externalErrors && externalErrors.length > 0 ? externalErrors : errors;
-    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: "T\u1EA1o c\u00E2u h\u1ECFi N\u1ED1i t\u1EEB v\u1EDBi tranh (nh\u00F3m)" }), _jsx("p", { className: "text-sm text-gray-500", children: "Word bank d\u00F9ng chung. C\u00F3 th\u1EC3 1 \u1EA3nh chung + \u00F4 s\u1ED1, ho\u1EB7c m\u1ED7i d\u00F2ng m\u1ED9t tranh." })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode((prev) => !prev), className: "gap-2", children: [isClientMode ? _jsx(Pencil, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }), isClientMode ? 'Chế độ chỉnh sửa' : 'Xem trước học sinh'] })] }), displayErrors.length > 0 && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: _jsx("ul", { className: "list-disc space-y-1 pl-5", children: displayErrors.map((err, i) => _jsx("li", { children: err }, i)) }) })), isClientMode ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Xem tr\u01B0\u1EDBc hi\u1EC3n th\u1ECB h\u1ECDc sinh" }) }), _jsx(CardContent, { children: _jsx(MatchWordToPictureGroupClient, { questionData: currentPayload }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Word bank" }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "mwtp-group-title", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "mwtp-group-title", className: "mt-1", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "VOCABULARY" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "mwtp-group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "mwtp-group-instruction", className: "mt-1", value: instruction, onChange: (e) => setInstruction(e.target.value) })] }), _jsx(MatchWordToPictureGroupImageField, { id: "mwtp-group-shared-image", label: "\u1EA2nh chung (optional \u2014 1 b\u1EE9c tranh nhi\u1EC1u \u00F4 s\u1ED1)", value: imageUrl, onChange: setImageUrl }), wordBank.map((word, index) => (_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: word, onChange: (e) => setWordBank((prev) => prev.map((item, i) => (i === index ? e.target.value : item))), placeholder: `Từ ${index + 1}` }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setWordBank((prev) => prev.filter((_, i) => i !== index)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, index))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setWordBank((prev) => [...prev, '']), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Th\u00EAm t\u1EEB"] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["Tranh (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setItems((prev) => [...prev, createEmptyMatchWordToPictureGroupItem(prev.length + 1)]), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Th\u00EAm tranh"] })] }), _jsx(CardContent, { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "space-y-3 rounded-lg border border-gray-200 p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-medium", children: ["C\u00E2u ", item.questionNumber || index + 1] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { className: "flex items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium text-gray-900", children: "T\u1EA1o c\u00E2u h\u1ECFi N\u1ED1i t\u1EEB v\u1EDBi tranh (nh\u00F3m)" }), _jsx("p", { className: "text-sm text-gray-500", children: "Word bank d\u00F9ng chung. C\u00F3 th\u1EC3 1 \u1EA3nh chung + \u00F4 s\u1ED1, ho\u1EB7c m\u1ED7i d\u00F2ng m\u1ED9t tranh." })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode((prev) => !prev), className: "gap-2", children: [isClientMode ? _jsx(Pencil, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }), isClientMode ? 'Chế độ chỉnh sửa' : 'Xem trước học sinh'] })] }), displayErrors.length > 0 && (_jsx("div", { className: "rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: _jsx("ul", { className: "list-disc space-y-1 pl-5", children: displayErrors.map((err, i) => _jsx("li", { children: err }, i)) }) })), isClientMode ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Xem tr\u01B0\u1EDBc hi\u1EC3n th\u1ECB h\u1ECDc sinh" }) }), _jsx(CardContent, { children: _jsx(MatchWordToPictureGroupClient, { questionData: currentPayload }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "Word bank" }) }), _jsxs(CardContent, { className: "space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "mwtp-group-title", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "mwtp-group-title", className: "mt-1", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "VOCABULARY" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "mwtp-group-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "mwtp-group-instruction", className: "mt-1", value: instruction, onChange: (e) => setInstruction(e.target.value) })] }), _jsxs("div", { children: [_jsx(Label, { children: "N\u1ED9i dung b\u00E0i \u0111\u1ECDc (Passage)" }), _jsx("div", { className: "mt-1", children: _jsx(RichTextEditor, { value: passage, onChange: setPassage, minHeightClassName: "min-h-[160px]" }) })] }), _jsx(MatchWordToPictureGroupImageField, { id: "mwtp-group-shared-image", label: "\u1EA2nh chung (optional \u2014 1 b\u1EE9c tranh nhi\u1EC1u \u00F4 s\u1ED1)", value: imageUrl, onChange: setImageUrl }), wordBank.map((word, index) => (_jsxs("div", { className: "flex gap-2", children: [_jsx(Input, { value: word, onChange: (e) => setWordBank((prev) => prev.map((item, i) => (i === index ? e.target.value : item))), placeholder: `Từ ${index + 1}` }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setWordBank((prev) => prev.filter((_, i) => i !== index)), children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, index))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setWordBank((prev) => [...prev, '']), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Th\u00EAm t\u1EEB"] })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["Tranh (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setItems((prev) => [...prev, createEmptyMatchWordToPictureGroupItem(prev.length + 1)]), children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), "Th\u00EAm tranh"] })] }), _jsx(CardContent, { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "space-y-3 rounded-lg border border-gray-200 p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-medium", children: ["C\u00E2u ", item.questionNumber || index + 1] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, { isExample: checked, points: checked ? 0 : 1 }) }), _jsxs(Label, { className: "flex items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] }), !item.isExample && (_jsx("div", { className: "w-24", children: _jsx(PointsInput, { value: item.points, allowZero: true, onChange: (event) => updateItem(index, {
                                                                     points: parsePointsValue(event.target.value, true),
-                                                                }) }) })), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setItems((prev) => prev.filter((_, i) => i !== index).map((entry, i) => ({ ...entry, questionNumber: i + 1 }))), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] })] }), _jsx(MatchWordToPictureGroupImageField, { id: `mwtp-group-image-${index}`, label: "\u1EA2nh", value: item.imageUrl, onChange: (url) => updateItem(index, { imageUrl: url }) }), _jsxs("select", { className: "rounded-md border px-3 py-2 text-sm", value: item.correctAnswer, onChange: (e) => updateItem(index, { correctAnswer: e.target.value }), children: [_jsx("option", { value: "", children: "Ch\u1ECDn t\u1EEB \u0111\u00FAng" }), Array.from(new Set([
+                                                                }) }) })), items.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setItems((prev) => prev.filter((_, i) => i !== index).map((entry, i) => ({ ...entry, questionNumber: i + 1 }))), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] })] }), _jsx(MatchWordToPictureGroupImageField, { id: `mwtp-group-image-${index}`, label: "\u1EA2nh", value: toMatchWordToPictureImageUrls(item.imageUrl)[0] || '', onChange: (url) => updateItem(index, {
+                                                imageUrl: fromMatchWordToPictureImageUrls(url),
+                                            }) }), _jsxs("select", { className: "rounded-md border px-3 py-2 text-sm", value: item.correctAnswer, onChange: (e) => updateItem(index, { correctAnswer: e.target.value }), children: [_jsx("option", { value: "", children: "Ch\u1ECDn t\u1EEB \u0111\u00FAng" }), Array.from(new Set([
                                                     ...wordBank.map((word) => word.trim()).filter(Boolean),
                                                     item.correctAnswer.trim(),
                                                 ].filter(Boolean))).map((word) => (_jsx("option", { value: word, children: word }, word)))] })] }, index))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { value: explanation, onChange: (event) => setExplanation(event.target.value), rows: 3 }) })] })] }))] }));

package/dist/components/questions/types/match-word-to-picture-group/map-match-word-to-picture-group-data.js

@@ -1,4 +1,4 @@
-import { MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION, } from '../../_shared/types/match-word-to-picture-group.type';
+import { MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION, fromMatchWordToPictureImageUrls, } from '../../_shared/types/match-word-to-picture-group.type';
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
@@ -30,7 +30,7 @@ export function mapMatchWordToPictureGroupItem(item, index, fallbackAnswer) {
     const correctAnswer = asRecord(record.correctAnswer);
     const isExample = record.isExample === true;
     return {
-        imageUrl: asString(content.imageUrl) || asString(record.imageUrl),
+        imageUrl: fromMatchWordToPictureImageUrls(content.imageUrl ?? record.imageUrl),
         correctAnswer: asString(correctAnswer.answer) ||
             asString(record.correctAnswer) ||
             asString(fallbackAnswer),
@@ -58,12 +58,17 @@ export function mapQuestionToMatchWordToPictureGroupData(question) {
                 ? asStringList(answer.wordBank)
                 : Array.from(new Set(items.map((item) => item.correctAnswer).filter(Boolean)));
         const title = asString(meta.title) || asString(answer.title);
-        const imageUrl = asString(meta.imageUrl).trim() || asString(answer.imageUrl).trim();
+        const passage = asString(meta.passage).trim() || asString(answer.passage).trim();
+        const audioUrl = asString(meta.audioUrl).trim() || asString(answer.audioUrl).trim();
+        const imageUrl = fromMatchWordToPictureImageUrls(meta.imageUrl)
+            ?? fromMatchWordToPictureImageUrls(answer.imageUrl);
         return {
             ...(title ? { title } : {}),
             instruction: asString(meta.instruction) ||
                 asString(answer.instruction) ||
                 MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION,
+            ...(passage ? { passage } : {}),
+            ...(audioUrl ? { audioUrl } : {}),
             ...(imageUrl ? { imageUrl } : {}),
             wordBank,
             items,

package/dist/components/questions/types/match-word-to-picture-group/transform.js

@@ -1,4 +1,4 @@
-import { MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION, MATCH_WORD_TO_PICTURE_ITEM_TYPE, } from '../../_shared/types/match-word-to-picture-group.type';
+import { MATCH_WORD_TO_PICTURE_GROUP_DEFAULT_INSTRUCTION, MATCH_WORD_TO_PICTURE_ITEM_TYPE, fromMatchWordToPictureImageUrls, } from '../../_shared/types/match-word-to-picture-group.type';
 function sumGradablePoints(items) {
     return items.reduce((total, item) => {
         if (item.isExample)
@@ -12,16 +12,20 @@ export const transformMatchWordToPictureGroup = (question) => {
     const wordBank = Array.isArray(answerData?.wordBank)
         ? answerData.wordBank.filter((word) => typeof word === 'string').map((word) => word.trim()).filter(Boolean)
         : [];
-    const apiItems = items.map((item, index) => ({
-        questionType: MATCH_WORD_TO_PICTURE_ITEM_TYPE,
-        ...(item.isExample ? { isExample: true } : {}),
-        content: {
-            ...(item.imageUrl?.trim() ? { imageUrl: item.imageUrl.trim() } : {}),
-        },
-        correctAnswer: { answer: item.correctAnswer || '' },
-        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
-        questionNumber: item.questionNumber || index + 1,
-    }));
+    const groupImageUrl = fromMatchWordToPictureImageUrls(answerData?.imageUrl);
+    const apiItems = items.map((item, index) => {
+        const itemImageUrl = fromMatchWordToPictureImageUrls(item.imageUrl);
+        return {
+            questionType: MATCH_WORD_TO_PICTURE_ITEM_TYPE,
+            ...(item.isExample ? { isExample: true } : {}),
+            content: {
+                ...(itemImageUrl ? { imageUrl: itemImageUrl } : {}),
+            },
+            correctAnswer: { answer: item.correctAnswer || '' },
+            points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+            questionNumber: item.questionNumber || index + 1,
+        };
+    });
     return {
         apiContent: {
             meta: {
@@ -29,9 +33,13 @@ export const transformMatchWordToPictureGroup = (question) => {
                 ...(typeof answerData?.title === 'string' && answerData.title.trim()
                     ? { title: answerData.title.trim() }
                     : {}),
-                ...(typeof answerData?.imageUrl === 'string' && answerData.imageUrl.trim()
-                    ? { imageUrl: answerData.imageUrl.trim() }
+                ...(typeof answerData?.passage === 'string' && answerData.passage.trim()
+                    ? { passage: answerData.passage }
+                    : {}),
+                ...(typeof answerData?.audioUrl === 'string' && answerData.audioUrl.trim()
+                    ? { audioUrl: answerData.audioUrl.trim() }
                     : {}),
+                ...(groupImageUrl ? { imageUrl: groupImageUrl } : {}),
                 wordBank,
             },
             items: apiItems,

package/dist/components/questions/types/sort-words-into-categories/SortWordsIntoCategoriesBoard.d.ts

@@ -0,0 +1,12 @@
+import type { SortWordsCategory, SortWordsPlacement, SortWordsWordItem } from '../../_shared/types/sort-words-into-categories.type';
+interface SortWordsIntoCategoriesBoardProps {
+    categories: SortWordsCategory[];
+    words: SortWordsWordItem[];
+    placements: SortWordsPlacement[];
+    correctPlacements?: SortWordsPlacement[];
+    onChange?: (next: SortWordsPlacement[]) => void;
+    disabled?: boolean;
+    isReviewMode?: boolean;
+}
+export declare function SortWordsIntoCategoriesBoard({ categories, words, placements, correctPlacements, onChange, disabled, isReviewMode, }: SortWordsIntoCategoriesBoardProps): import("react").JSX.Element;
+export {};

package/dist/components/questions/types/sort-words-into-categories/SortWordsIntoCategoriesBoard.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { cn } from '../../../../shared/lib/utils';
+const POOL_ZONE = '__pool__';
+function placementMap(items) {
+    return new Map(items.map((item) => [item.wordId, item.categoryId]));
+}
+export function SortWordsIntoCategoriesBoard({ categories, words, placements, correctPlacements, onChange, disabled = false, isReviewMode = false, }) {
+    const [selectedWordId, setSelectedWordId] = useState(null);
+    const current = useMemo(() => placementMap(placements), [placements]);
+    const correct = useMemo(() => (correctPlacements ? placementMap(correctPlacements) : new Map()), [correctPlacements]);
+    const wordById = useMemo(() => new Map(words.map((word) => [word.id, word])), [words]);
+    const emit = (wordId, categoryId) => {
+        const word = wordById.get(wordId);
+        if (!word || word.isExample || disabled)
+            return;
+        const next = words.map((item) => ({
+            wordId: item.id,
+            categoryId: item.id === wordId ? categoryId : (current.get(item.id) ?? item.categoryId ?? ''),
+        }));
+        onChange?.(next);
+    };
+    const handleSelect = (wordId) => {
+        const word = wordById.get(wordId);
+        if (!word || word.isExample || disabled)
+            return;
+        setSelectedWordId((prev) => (prev === wordId ? null : wordId));
+    };
+    const handlePlace = (zoneId) => {
+        if (!selectedWordId)
+            return;
+        emit(selectedWordId, zoneId === POOL_ZONE ? '' : zoneId);
+        setSelectedWordId(null);
+    };
+    const handleDrop = (event, zoneId) => {
+        event.preventDefault();
+        const wordId = event.dataTransfer.getData('text/word-id');
+        if (!wordId)
+            return;
+        emit(wordId, zoneId === POOL_ZONE ? '' : zoneId);
+        setSelectedWordId(null);
+    };
+    const poolWords = words.filter((word) => {
+        if (word.isExample)
+            return false;
+        return !(current.get(word.id) || '');
+    });
+    const renderChip = (word) => {
+        const expected = correct.get(word.id) || word.categoryId || '';
+        const actual = current.get(word.id) ?? '';
+        const isSelected = selectedWordId === word.id;
+        const showReview = isReviewMode && !word.isExample && Boolean(expected);
+        const isCorrect = showReview && actual === expected;
+        const isWrong = showReview && actual !== expected;
+        return (_jsxs("button", { type: "button", draggable: !disabled && !word.isExample, onDragStart: (event) => {
+                event.dataTransfer.setData('text/word-id', word.id);
+                event.dataTransfer.effectAllowed = 'move';
+            }, onClick: () => handleSelect(word.id), onDoubleClick: () => {
+                if (!word.isExample)
+                    emit(word.id, '');
+            }, disabled: disabled || word.isExample, className: cn('rounded-md border px-3 py-1.5 text-sm shadow-sm transition-colors', word.isExample && 'cursor-default opacity-80', isSelected && 'border-black bg-black text-white', !isSelected && !isCorrect && !isWrong && 'border-gray-300 bg-white text-gray-900', isCorrect && 'border-emerald-500 bg-emerald-50 text-emerald-900', isWrong && 'border-red-500 bg-red-50 text-red-900'), children: [word.text || word.id, word.isExample && (_jsx("span", { className: "ml-1 text-[10px] uppercase tracking-wide opacity-70", children: "ex" }))] }, word.id));
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "min-h-[56px] rounded-lg border border-gray-200 bg-white p-3", onDragOver: (event) => event.preventDefault(), onDrop: (event) => handleDrop(event, POOL_ZONE), onClick: (event) => {
+                    if (event.target === event.currentTarget)
+                        handlePlace(POOL_ZONE);
+                }, children: _jsx("div", { className: "flex flex-wrap gap-2", children: poolWords.length === 0 ? (_jsx("p", { className: "text-sm text-gray-400", children: disabled ? 'Không còn từ trong pool.' : 'Chọn từ rồi bấm nhóm, hoặc kéo thả. Bấm nền này để trả từ về pool.' })) : (poolWords.map(renderChip)) }) }), _jsx("div", { className: cn('grid gap-4', categories.length <= 2 ? 'md:grid-cols-2' : 'md:grid-cols-3'), children: categories.map((category) => {
+                    const boxed = words.filter((word) => (current.get(word.id) || '') === category.id);
+                    return (_jsxs("section", { className: "overflow-hidden rounded-lg border border-gray-300 bg-white", onDragOver: (event) => event.preventDefault(), onDrop: (event) => handleDrop(event, category.id), children: [_jsx("button", { type: "button", className: "w-full bg-gray-200 px-3 py-2 text-center text-sm font-semibold text-gray-800", onClick: () => handlePlace(category.id), disabled: disabled, children: category.name || category.id }), _jsx("div", { className: "flex min-h-[160px] flex-wrap content-start gap-2 p-3", onClick: (event) => {
+                                    if (event.target === event.currentTarget)
+                                        handlePlace(category.id);
+                                }, children: boxed.map(renderChip) })] }, category.id));
+                }) })] }));
+}

package/dist/components/questions/types/sort-words-into-categories/SortWordsIntoCategoriesClient.d.ts

@@ -0,0 +1,2 @@
+import type { SortWordsIntoCategoriesClientProps } from '../../_shared/types/sort-words-into-categories.type';
+export declare function SortWordsIntoCategoriesClient({ questionData, isReviewMode, userPlacements, onPlacementsChange, }: SortWordsIntoCategoriesClientProps): import("react").JSX.Element;

package/dist/components/questions/types/sort-words-into-categories/SortWordsIntoCategoriesClient.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Lightbulb } from 'lucide-react';
+import { SortWordsIntoCategoriesBoard } from './SortWordsIntoCategoriesBoard';
+import { buildPlacements, padPlacements } from './map-sort-words-into-categories-data';
+export function SortWordsIntoCategoriesClient({ questionData, isReviewMode = false, userPlacements, onPlacementsChange, }) {
+    const correctPlacements = buildPlacements(questionData.words);
+    const exampleLocked = questionData.words.map((word) => ({
+        wordId: word.id,
+        categoryId: word.isExample ? word.categoryId : '',
+    }));
+    const rawPlacements = isReviewMode && !userPlacements
+        ? correctPlacements
+        : (userPlacements ?? exampleLocked);
+    const placements = padPlacements(questionData.words, rawPlacements).map((item) => {
+        const word = questionData.words.find((entry) => entry.id === item.wordId);
+        if (word?.isExample) {
+            return { wordId: item.wordId, categoryId: word.categoryId };
+        }
+        return item;
+    });
+    const canEdit = Boolean(onPlacementsChange) && !isReviewMode;
+    return (_jsxs("div", { className: "space-y-4", children: [(questionData.title || questionData.instruction) && (_jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50 px-4 py-3", children: [questionData.title && (_jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-slate-500", children: questionData.title })), questionData.instruction && (_jsx("p", { className: "text-sm font-medium text-slate-800", children: questionData.instruction }))] })), _jsx(SortWordsIntoCategoriesBoard, { categories: questionData.categories, words: questionData.words, placements: placements, correctPlacements: isReviewMode ? correctPlacements : undefined, onChange: canEdit ? onPlacementsChange : undefined, disabled: !canEdit, isReviewMode: isReviewMode }), isReviewMode && questionData.explanation && (_jsxs("div", { className: "flex items-start gap-2 rounded-xl border border-amber-100 bg-amber-50 px-4 py-3 text-sm text-amber-800", children: [_jsx(Lightbulb, { className: "mt-0.5 h-4 w-4 flex-shrink-0" }), questionData.explanation] }))] }));
+}

package/dist/components/questions/types/sort-words-into-categories/SortWordsIntoCategoriesCreator.d.ts

@@ -0,0 +1,2 @@
+import type { SortWordsIntoCategoriesCreatorProps } from '../../_shared/types/sort-words-into-categories.type';
+export declare function SortWordsIntoCategoriesCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }: SortWordsIntoCategoriesCreatorProps): import("react").JSX.Element;

package/dist/components/questions/types/sort-words-into-categories/SortWordsIntoCategoriesCreator.js

@@ -0,0 +1,171 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../../../components/ui/button';
+import { Label } from '../../../../components/ui/label';
+import { Input } from '../../../../components/ui/input';
+import { PointsInput } from '../../../../components/ui/points-input';
+import { Textarea } from '../../../../components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { Switch } from '../../../../components/ui/switch';
+import { useDebouncedCallback } from '../../../../shared/lib/hooks';
+import { Eye, Pencil, Plus, Star, Trash2 } from 'lucide-react';
+import { SortWordsIntoCategoriesClient } from './SortWordsIntoCategoriesClient';
+import { createEmptyCategory, createEmptyWord, sumGradablePoints, } from './map-sort-words-into-categories-data';
+import { SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION } from '../../_shared/types/sort-words-into-categories.type';
+function normalizeCategories(raw) {
+    if (!Array.isArray(raw) || raw.length < 2) {
+        const first = createEmptyCategory([]);
+        const second = createEmptyCategory([first.id]);
+        return [
+            { ...first, name: raw?.[0]?.name || 'Technology item' },
+            { ...second, name: raw?.[1]?.name || 'Activity using technology' },
+        ];
+    }
+    return raw.map((item, index) => ({
+        id: item.id || `cat_${index + 1}`,
+        name: item.name || '',
+    }));
+}
+function normalizeWords(raw, categories) {
+    const fallbackCategory = categories[0]?.id || '';
+    if (!Array.isArray(raw) || raw.length === 0) {
+        const first = createEmptyWord([], fallbackCategory);
+        const second = createEmptyWord([first.id], categories[1]?.id || fallbackCategory);
+        return [first, second];
+    }
+    return raw.map((item, index) => ({
+        id: item.id || `w${index + 1}`,
+        text: item.text || '',
+        categoryId: item.categoryId || fallbackCategory,
+        isExample: item.isExample === true,
+        points: item.isExample ? 0 : (typeof item.points === 'number' ? item.points : 1),
+    }));
+}
+export function SortWordsIntoCategoriesCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
+    const [title, setTitle] = useState(initialData?.title || '');
+    const [instruction, setInstruction] = useState(initialData?.instruction || SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION);
+    const [categories, setCategories] = useState(() => normalizeCategories(initialData?.categories));
+    const [words, setWords] = useState(() => normalizeWords(initialData?.words, normalizeCategories(initialData?.categories)));
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [errors, setErrors] = useState([]);
+    const onChangeRef = useRef(onChange);
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    const buildPayload = (nextTitle = title, nextInstruction = instruction, nextCategories = categories, nextWords = words, nextExplanation = explanation) => ({
+        title: nextTitle,
+        instruction: nextInstruction,
+        categories: nextCategories,
+        words: nextWords,
+        explanation: nextExplanation,
+        points: sumGradablePoints(nextWords),
+    });
+    const debouncedOnChange = useDebouncedCallback((payload) => {
+        onChangeRef.current?.(payload);
+    }, 300);
+    useEffect(() => {
+        const payload = buildPayload();
+        const serialized = JSON.stringify(payload);
+        if (serialized !== previousPayloadRef.current) {
+            previousPayloadRef.current = serialized;
+            debouncedOnChange(payload);
+            onUnsavedChangesChange?.(true);
+        }
+    }, [title, instruction, categories, words, explanation, debouncedOnChange, onUnsavedChangesChange]);
+    const validate = () => {
+        const nextErrors = [];
+        if (!instruction.trim()) {
+            nextErrors.push('Hướng dẫn (Instruction) không được để trống.');
+        }
+        if (categories.length < 2) {
+            nextErrors.push('Cần ít nhất 2 nhóm.');
+        }
+        const categoryIds = new Set();
+        categories.forEach((category, index) => {
+            if (!category.id.trim())
+                nextErrors.push(`Nhóm ${index + 1}: id không được để trống.`);
+            if (!category.name.trim())
+                nextErrors.push(`Nhóm ${index + 1}: tên không được để trống.`);
+            if (category.id.trim() && categoryIds.has(category.id.trim())) {
+                nextErrors.push(`Nhóm ${index + 1}: id "${category.id}" bị trùng.`);
+            }
+            categoryIds.add(category.id.trim());
+        });
+        if (words.length < 1) {
+            nextErrors.push('Cần ít nhất 1 từ.');
+        }
+        const wordIds = new Set();
+        words.forEach((word, index) => {
+            if (!word.id.trim())
+                nextErrors.push(`Từ ${index + 1}: id không được để trống.`);
+            if (!word.text.trim())
+                nextErrors.push(`Từ ${index + 1}: nội dung không được để trống.`);
+            if (word.id.trim() && wordIds.has(word.id.trim())) {
+                nextErrors.push(`Từ ${index + 1}: id "${word.id}" bị trùng.`);
+            }
+            wordIds.add(word.id.trim());
+            if (!word.categoryId.trim()) {
+                nextErrors.push(`Từ ${index + 1}: chưa chọn nhóm đúng.`);
+            }
+            else if (!categoryIds.has(word.categoryId)) {
+                nextErrors.push(`Từ ${index + 1}: nhóm không hợp lệ.`);
+            }
+        });
+        setErrors(nextErrors);
+        return nextErrors.length === 0;
+    };
+    useEffect(() => {
+        if (!validationRef)
+            return;
+        validationRef.current = {
+            triggerValidation: async () => validate(),
+            getFormData: () => buildPayload(),
+        };
+        return () => {
+            validationRef.current = null;
+        };
+    });
+    const updateCategory = (index, patch) => {
+        setCategories((prev) => prev.map((item, i) => (i === index ? { ...item, ...patch } : item)));
+    };
+    const updateWord = (index, patch) => {
+        setWords((prev) => prev.map((item, i) => {
+            if (i !== index)
+                return item;
+            const next = { ...item, ...patch };
+            if (next.isExample)
+                next.points = 0;
+            return next;
+        }));
+    };
+    const addCategory = () => {
+        setCategories((prev) => [...prev, createEmptyCategory(prev.map((item) => item.id))]);
+    };
+    const removeCategory = (index) => {
+        if (categories.length <= 2)
+            return;
+        const removedId = categories[index]?.id;
+        const nextCategories = categories.filter((_, i) => i !== index);
+        const fallback = nextCategories[0]?.id || '';
+        setCategories(nextCategories);
+        setWords((prev) => prev.map((word) => (word.categoryId === removedId ? { ...word, categoryId: fallback } : word)));
+    };
+    const addWord = () => {
+        setWords((prev) => [
+            ...prev,
+            createEmptyWord(prev.map((item) => item.id), categories[0]?.id || ''),
+        ]);
+    };
+    const removeWord = (index) => {
+        if (words.length <= 1)
+            return;
+        setWords((prev) => prev.filter((_, i) => i !== index));
+    };
+    const displayErrors = [...errors, ...(externalErrors || [])];
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsClientMode((v) => !v), children: [isClientMode ? _jsx(Pencil, { className: "mr-2 h-4 w-4" }) : _jsx(Eye, { className: "mr-2 h-4 w-4" }), isClientMode ? 'Sửa' : 'Xem trước'] }) }), isClientMode ? (_jsx(SortWordsIntoCategoriesClient, { questionData: buildPayload(), isReviewMode: true })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "swc-title", children: "Ti\u00EAu \u0111\u1EC1 (optional)" }), _jsx(Input, { id: "swc-title", value: title, onChange: (event) => setTitle(event.target.value), placeholder: "VOCABULARY" })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "swc-instruction", children: "H\u01B0\u1EDBng d\u1EABn" }), _jsx(Input, { id: "swc-instruction", value: instruction, onChange: (event) => setInstruction(event.target.value), placeholder: SORT_WORDS_INTO_CATEGORIES_DEFAULT_INSTRUCTION })] })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsx(CardTitle, { className: "text-base", children: "Nh\u00F3m (categories)" }), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: addCategory, children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), " Th\u00EAm nh\u00F3m"] })] }), _jsx(CardContent, { className: "space-y-3", children: categories.map((category, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: category.name, onChange: (event) => updateCategory(index, { name: event.target.value }), placeholder: `Nhóm ${index + 1}` }), categories.length > 2 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeCategory(index), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] }, category.id))) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between space-y-0", children: [_jsx(CardTitle, { className: "text-base", children: "T\u1EEB / c\u1EE5m t\u1EEB" }), _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: addWord, children: [_jsx(Plus, { className: "mr-1 h-4 w-4" }), " Th\u00EAm t\u1EEB"] })] }), _jsx(CardContent, { className: "space-y-3", children: words.map((word, index) => (_jsxs("div", { className: "grid gap-2 rounded-lg border p-3 md:grid-cols-[1fr_180px_auto]", children: [_jsx(Input, { value: word.text, onChange: (event) => updateWord(index, { text: event.target.value }), placeholder: `Từ #${index + 1} (VD: press a button)` }), _jsx("select", { className: "h-10 rounded-md border border-input bg-background px-3 text-sm", value: word.categoryId, onChange: (event) => updateWord(index, { categoryId: event.target.value }), children: categories.map((category) => (_jsx("option", { value: category.id, children: category.name || category.id }, category.id))) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Switch, { id: `swc-example-${index}`, checked: word.isExample === true, onCheckedChange: (checked) => updateWord(index, { isExample: checked }) }), _jsxs(Label, { htmlFor: `swc-example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "Example"] })] }), !word.isExample && (_jsx(PointsInput, { value: word.points, allowZero: true, onChange: (event) => updateWord(index, {
+                                                        points: Number.parseInt(event.target.value, 10) || 1,
+                                                    }) })), words.length > 1 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeWord(index), children: _jsx(Trash2, { className: "h-4 w-4 text-red-500" }) }))] })] }, word.id))) })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: "swc-explanation", children: "Gi\u1EA3i th\u00EDch" }), _jsx(Textarea, { id: "swc-explanation", value: explanation, onChange: (event) => setExplanation(event.target.value) })] })] })), displayErrors.length > 0 && (_jsx("ul", { className: "list-disc space-y-1 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700", children: displayErrors.map((error) => (_jsx("li", { children: error }, error))) }))] }));
+}

package/dist/components/questions/types/sort-words-into-categories/index.d.ts

@@ -0,0 +1,4 @@
+export * from './SortWordsIntoCategoriesCreator';
+export * from './SortWordsIntoCategoriesClient';
+export * from './transform';
+export * from './register';

package/dist/components/questions/types/sort-words-into-categories/index.js

@@ -0,0 +1,4 @@
+export * from './SortWordsIntoCategoriesCreator';
+export * from './SortWordsIntoCategoriesClient';
+export * from './transform';
+export * from './register';

package/dist/components/questions/types/sort-words-into-categories/map-sort-words-into-categories-data.d.ts

@@ -0,0 +1,11 @@
+import type { SortWordsCategory, SortWordsIntoCategoriesData, SortWordsPlacement, SortWordsWordItem } from '../../_shared/types/sort-words-into-categories.type';
+export declare function nextPrefixedId(prefix: string, existing: string[]): string;
+export declare function sumGradablePoints(words: SortWordsWordItem[]): number;
+export declare function buildPlacements(words: SortWordsWordItem[]): SortWordsPlacement[];
+export declare function readPlacements(value: unknown): SortWordsPlacement[] | undefined;
+export declare function padPlacements(words: Array<{
+    id: string;
+}>, raw: unknown): SortWordsPlacement[];
+export declare function createEmptyCategory(existingIds: string[]): SortWordsCategory;
+export declare function createEmptyWord(existingIds: string[], categoryId: string): SortWordsWordItem;
+export declare function mapQuestionToSortWordsIntoCategoriesData(question: Record<string, unknown> | null | undefined): SortWordsIntoCategoriesData;