@tinyweb_dev/oe-exam-sdk 1.0.6 → 1.0.7

package/dist/components/questions/types/true-false-group/TrueFalseGroupClient.js

@@ -7,7 +7,7 @@ export function TrueFalseGroupClient({ questionData, isReviewMode = false, userA
     return (_jsxs("div", { className: "space-y-4", children: [questionData.instruction && (_jsx("div", { className: "rounded-xl border border-indigo-100 bg-indigo-50 px-4 py-3 text-sm font-medium text-indigo-800", children: questionData.instruction })), items.map((item, itemIndex) => {
                 const userValue = userAnswers[itemIndex];
                 const correctAnswer = item.correctAnswer;
-                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-4", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), _jsx("div", { className: "flex items-center gap-3", children: [
+                return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white", children: _jsx(CircleHelp, { className: "h-3.5 w-3.5" }) }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u ", item.questionNumber || itemIndex + 1] }), item.isExample && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-semibold text-amber-700", children: [_jsx(Star, { className: "h-3 w-3" }), "Example"] }))] }), _jsxs("span", { className: "text-xs text-gray-500", children: [item.points || 0, " \u0111i\u1EC3m"] })] }), _jsxs("div", { className: "space-y-3 p-3", children: [_jsx("p", { className: "text-sm font-semibold leading-relaxed text-gray-800", children: item.question || 'Câu hỏi chưa được nhập' }), _jsx("div", { className: "flex items-center gap-3", children: [
                                         { value: true, label: 'True' },
                                         { value: false, label: 'False' },
                                     ].map((opt) => {

package/dist/components/questions/types/true-false-group/TrueFalseGroupCreator.js

@@ -9,7 +9,8 @@ import { PointsInput } from '../../../../components/ui/points-input';
 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 { HelpCircle, Plus, Star, Trash2 } from 'lucide-react';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { TrueFalseGroupClient } from './TrueFalseGroupClient';
 function parsePointsValue(raw, allowZero = false) {
     if (raw === '')
@@ -120,10 +121,13 @@ export function TrueFalseGroupCreator({ initialData, onChange, externalErrors, o
     };
     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 \u0110\u00FAng / Sai (Nh\u00F3m)" }), _jsx("p", { className: "text-sm text-gray-500", children: "Th\u00EAm danh s\u00E1ch c\u00E1c c\u00E2u h\u1ECFi True/False trong 1 nh\u00F3m" })] }), _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 bg-red-50 p-4 border border-red-200", children: _jsx("div", { className: "flex", children: _jsxs("div", { className: "ml-3", children: [_jsx("h3", { className: "text-sm font-medium text-red-800", children: "C\u1EA7n s\u1EEDa c\u00E1c l\u1ED7i sau:" }), _jsx("div", { className: "mt-2 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(TrueFalseGroupClient, { questionData: currentPayload }) })] })) : (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base font-semibold", children: "H\u01B0\u1EDBng d\u1EABn chung (Instruction)" }) }), _jsx(CardContent, { className: "space-y-4", children: _jsxs("div", { children: [_jsx(Label, { htmlFor: "instruction", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx(Input, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "VD: Tick True or False.", className: "mt-1" })] }) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "text-base font-semibold", children: ["Danh s\u00E1ch c\u00E2u h\u1ECFi (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, className: "gap-2", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u00E2u h\u1ECFi"] })] }), _jsx(CardContent, { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "space-y-4 rounded-lg border border-gray-200 bg-gray-50/50 p-4 transition-colors hover:border-gray-300", children: [_jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700", children: item.questionNumber || index + 1 }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u h\u1ECFi ", index + 1] })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, {
-                                                                        isExample: checked,
-                                                                        points: checked ? 0 : 1,
-                                                                    }) }), _jsxs(Label, { htmlFor: `example-${index}`, className: "flex items-center gap-1 text-xs cursor-pointer", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "C\u00E2u m\u1EABu (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: () => removeItem(index), className: "text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: `question-${index}`, children: "N\u1ED9i dung c\u00E2u h\u1ECFi" }), _jsx(Textarea, { id: `question-${index}`, value: item.question, onChange: (e) => updateItem(index, { question: e.target.value }), placeholder: "Nh\u1EADp n\u1ED9i dung c\u00E2u h\u1ECFi...", className: "mt-1 bg-white", rows: 2 })] }), _jsxs("div", { children: [_jsx(Label, { className: "mb-2 block text-xs font-medium text-gray-700", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { type: "button", variant: item.correctAnswer === true ? 'default' : 'outline', size: "sm", onClick: () => updateItem(index, { correctAnswer: true }), className: "w-24", children: "True" }), _jsx(Button, { type: "button", variant: item.correctAnswer === false ? 'default' : 'outline', size: "sm", onClick: () => updateItem(index, { correctAnswer: false }), className: "w-24", children: "False" })] })] })] }, index))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: "Gi\u1EA3i th\u00EDch" }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (event) => setExplanation(event.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3 }) })] })] }))] }));
+    if (isClientMode) {
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(TrueFalseGroupClient, { questionData: currentPayload })] }));
+    }
+    return (_jsxs("div", { className: "space-y-3", children: [displayErrors.length > 0 && (_jsx("div", { className: "rounded-md border border-red-200 bg-red-50 p-2 text-xs text-red-700", children: _jsx("ul", { className: "list-disc space-y-1 pl-4", children: displayErrors.map((err, i) => (_jsx("li", { children: err }, i))) }) })), _jsx(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(HelpCircle, { className: "h-3.5 w-3.5" }), title: "\u0110\u00FAng / Sai (Nh\u00F3m)", preview: { onClick: () => setIsClientMode(true) } }), children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "instruction", className: "text-sm font-semibold text-gray-800", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx(Input, { id: "instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "VD: Tick True or False.", className: "h-10 border-gray-200 bg-white" })] }) }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsxs(CardTitle, { className: "text-sm font-semibold text-gray-800", children: ["Danh s\u00E1ch c\u00E2u h\u1ECFi (", items.length, ")"] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addItem, className: "h-8 gap-1.5 px-2.5 text-xs", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm c\u00E2u h\u1ECFi"] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [items.map((item, index) => (_jsxs("div", { className: "space-y-2.5 rounded-md border border-gray-200 bg-white px-3 py-2.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700", children: item.questionNumber || index + 1 }), _jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["C\u00E2u h\u1ECFi ", index + 1] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, {
+                                                                    isExample: checked,
+                                                                    points: checked ? 0 : 1,
+                                                                }) }), _jsxs(Label, { htmlFor: `example-${index}`, className: "flex cursor-pointer items-center gap-1 text-xs", children: [_jsx(Star, { className: "h-3 w-3 text-amber-500" }), "C\u00E2u m\u1EABu (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: "icon", onClick: () => removeItem(index), className: "h-7 w-7 text-red-500 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] })] }), _jsxs("div", { children: [_jsx(Label, { htmlFor: `question-${index}`, children: "N\u1ED9i dung c\u00E2u h\u1ECFi" }), _jsx(Textarea, { id: `question-${index}`, value: item.question, onChange: (e) => updateItem(index, { question: e.target.value }), placeholder: "Nh\u1EADp n\u1ED9i dung c\u00E2u h\u1ECFi...", className: "mt-1 min-h-[56px] border-gray-200 bg-white", rows: 2 })] }), _jsxs("div", { children: [_jsx(Label, { className: "mb-1.5 block text-xs font-medium text-gray-700", children: "\u0110\u00E1p \u00E1n \u0111\u00FAng" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: item.correctAnswer === true ? 'default' : 'outline', size: "sm", onClick: () => updateItem(index, { correctAnswer: true }), className: "h-8 w-24", children: "True" }), _jsx(Button, { type: "button", variant: item.correctAnswer === false ? 'default' : 'outline', size: "sm", onClick: () => updateItem(index, { correctAnswer: false }), className: "h-8 w-24", children: "False" })] })] })] }, index))), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation, defaultVisible: Boolean(initialData?.explanation) })] })] })] }));
 }

package/dist/components/questions/types/word-fill-paragraph/WordFillParagraphClient.js

@@ -150,9 +150,9 @@ export function WordFillParagraphClient({ questionData, onSubmit, isReviewMode =
         : isDefaultMode
             ? 'bg-gradient-to-br from-indigo-500 to-blue-600'
             : 'bg-gradient-to-br from-teal-500 to-cyan-600';
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded-lg ${headerGradient} text-white shadow-sm`, children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o \u0111o\u1EA1n v\u0103n" })] }), isReviewMode && allFilled && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAllCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isAllCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isAllCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-5 p-5", children: [title && (_jsx("h2", { className: "text-center text-xl font-bold text-gray-900", children: title })), exampleEntries.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-xs font-semibold text-amber-700 shrink-0", children: [_jsx(Star, { className: "h-3.5 w-3.5 fill-amber-400 text-amber-400" }), "\u0110\u00E3 \u0111i\u1EC1n s\u1EB5n (Example):"] }), exampleEntries.map(({ blankIdx, answer }) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-amber-300 bg-white px-2 py-0.5 text-xs font-semibold text-amber-800", children: [_jsx("span", { className: "text-amber-500", children: '{' + blankIdx + '}' }), answer] }, blankIdx)))] })), (imagePreviewUrl || imageUrl) && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: imageLoading ? (_jsx("div", { className: "flex h-48 w-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-teal-500" }) })) : (_jsx("img", { src: imagePreviewUrl || imageUrl, alt: title, className: "max-h-56 w-auto object-contain p-2" })) }) })), _jsxs("div", { className: (emailFrom || emailTo)
+    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded-lg ${headerGradient} text-white shadow-sm`, children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsx("span", { className: "text-sm font-medium text-gray-700", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o \u0111o\u1EA1n v\u0103n" })] }), isReviewMode && allFilled && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAllCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isAllCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isAllCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-3 p-3", children: [title && (_jsx("h2", { className: "text-center text-xl font-bold text-gray-900", children: title })), exampleEntries.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-4 py-2.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-xs font-semibold text-amber-700 shrink-0", children: [_jsx(Star, { className: "h-3.5 w-3.5 fill-amber-400 text-amber-400" }), "\u0110\u00E3 \u0111i\u1EC1n s\u1EB5n (Example):"] }), exampleEntries.map(({ blankIdx, answer }) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-amber-300 bg-white px-2 py-0.5 text-xs font-semibold text-amber-800", children: [_jsx("span", { className: "text-amber-500", children: '{' + blankIdx + '}' }), answer] }, blankIdx)))] })), (imagePreviewUrl || imageUrl) && (_jsx("div", { className: "flex justify-center", children: _jsx("div", { className: "overflow-hidden rounded-lg border border-gray-200 bg-gray-50", children: imageLoading ? (_jsx("div", { className: "flex h-48 w-48 items-center justify-center", children: _jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-teal-500" }) })) : (_jsx("img", { src: imagePreviewUrl || imageUrl, alt: title, className: "max-h-56 w-auto object-contain p-2" })) }) })), _jsxs("div", { className: (emailFrom || emailTo)
                                 ? 'overflow-hidden rounded-xl border border-gray-300 bg-white shadow-sm'
-                                : 'rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50', children: [(emailFrom || emailTo) && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-1.5 border-b border-gray-200 bg-gray-100 px-4 py-2.5", children: [_jsx("span", { className: "h-3 w-3 rounded-full bg-red-400" }), _jsx("span", { className: "h-3 w-3 rounded-full bg-yellow-400" }), _jsx("span", { className: "h-3 w-3 rounded-full bg-green-400" }), _jsxs("div", { className: "ml-3 flex items-center gap-1.5 text-xs text-gray-400", children: [_jsx(Mail, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Email" })] })] }), _jsxs("div", { className: "border-b border-gray-200 bg-gray-50 px-5 py-3 space-y-1.5 text-sm", children: [emailFrom && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: "From" }), _jsx("span", { className: "font-medium text-gray-800", children: emailFrom })] })), emailTo && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: "To" }), _jsx("span", { className: "font-medium text-gray-800", children: emailTo })] }))] })] })), _jsx("div", { className: `text-base leading-loose text-gray-800 whitespace-pre-wrap ${(emailFrom || emailTo) ? 'p-5 bg-white' : 'p-5 bg-gradient-to-r from-gray-50 to-slate-50'}`, children: segments.map((segment, idx) => {
+                                : 'rounded-lg border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50', children: [(emailFrom || emailTo) && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-1.5 border-b border-gray-200 bg-gray-100 px-4 py-2.5", children: [_jsx("span", { className: "h-3 w-3 rounded-full bg-red-400" }), _jsx("span", { className: "h-3 w-3 rounded-full bg-yellow-400" }), _jsx("span", { className: "h-3 w-3 rounded-full bg-green-400" }), _jsxs("div", { className: "ml-3 flex items-center gap-1.5 text-xs text-gray-400", children: [_jsx(Mail, { className: "h-3.5 w-3.5" }), _jsx("span", { children: "Email" })] })] }), _jsxs("div", { className: "border-b border-gray-200 bg-gray-50 px-3 py-2 space-y-1.5 text-sm", children: [emailFrom && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: "From" }), _jsx("span", { className: "font-medium text-gray-800", children: emailFrom })] })), emailTo && (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "w-10 shrink-0 text-xs font-semibold uppercase tracking-wide text-gray-400", children: "To" }), _jsx("span", { className: "font-medium text-gray-800", children: emailTo })] }))] })] })), _jsx("div", { className: `text-base leading-loose text-gray-800 whitespace-pre-wrap ${(emailFrom || emailTo) ? 'p-5 bg-white' : 'p-5 bg-gradient-to-r from-gray-50 to-slate-50'}`, children: segments.map((segment, idx) => {
                                         if (segment.type === 'text') {
                                             return _jsx("span", { children: segment.value }, idx);
                                         }

package/dist/components/questions/types/word-fill-paragraph/WordFillParagraphCreator.js

@@ -6,14 +6,14 @@ import { Button } from '../../../../components/ui/button';
 import { Label } from '../../../../components/ui/label';
 import { Input } from '../../../../components/ui/input';
 import { Textarea } from '../../../../components/ui/textarea';
-import { PointsInput } from '../../../../components/ui/points-input';
 import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { Checkbox } from '../../../../components/ui/checkbox';
 import { Switch } from '../../../../components/ui/switch';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../../components/ui/select';
 import { usePresignedFileUrl, useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { useReactHookForm } from '../../../../shared/lib/hooks/useReactHookForm';
-import { Pencil, Eye, BookOpen, ImageIcon, Lightbulb, FileText, Library, ToggleLeft, Plus, Trash2, ListChecks, CheckCircle2, Mail, Star, } from 'lucide-react';
+import { BookOpen, ImageIcon, FileText, Library, ToggleLeft, Plus, Trash2, ListChecks, CheckCircle2, Mail, Star, } from 'lucide-react';
 import { FileUpload } from '../../../../components/ui/file-upload';
 import { WordFillParagraphClient } from './WordFillParagraphClient';
 import { BasicQuestionGroupCard } from '../../groups/BasicQuestionGroupCard';
@@ -46,13 +46,11 @@ function WordBankImagePreview({ imageUrl, localPreviewUrl, index, }) {
 // Shared header / paragraph / image / points fields
 // ---------------------------------------------------------------------------
 function CommonFields({ form, displayPreviewUrl, setImagePreviewUrl, watchedImageUrl, watchedParagraph, blankCount, externalErrors, showCaseSensitive, watchedCaseSensitive, afterPoints, }) {
-    return (_jsxs(_Fragment, { children: [showCaseSensitive ? (_jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx("div", { className: "flex-1 rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.hasError('points') ? form.getFieldError('points') : undefined }) }), _jsxs("div", { className: `flex items-center gap-3 rounded-xl border-2 px-4 py-3 transition-all ${watchedCaseSensitive
-                            ? 'border-teal-400 bg-teal-50'
-                            : 'border-gray-200 bg-white hover:border-gray-300'}`, children: [_jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded-lg transition-colors ${watchedCaseSensitive ? 'bg-teal-100' : 'bg-gray-100'}`, children: _jsx(ToggleLeft, { className: `h-4 w-4 transition-colors ${watchedCaseSensitive ? 'text-teal-600' : 'text-gray-400'}` }) }), _jsxs("div", { className: "space-y-0.5", children: [_jsx(Label, { htmlFor: "case-sensitive", className: `font-semibold transition-colors ${watchedCaseSensitive ? 'text-teal-800' : 'text-gray-800'}`, children: "Ph\u00E2n bi\u1EC7t hoa/th\u01B0\u1EDDng" }), _jsx("p", { className: `text-sm transition-colors ${watchedCaseSensitive ? 'text-teal-600' : 'text-gray-500'}`, children: watchedCaseSensitive
-                                            ? 'Đang bật — đáp án phân biệt chữ hoa/thường'
-                                            : 'Đang tắt — không phân biệt chữ hoa/thường' })] }), _jsx(Switch, { id: "case-sensitive", checked: watchedCaseSensitive || false, onCheckedChange: (checked) => form.setValue('caseSensitive', !!checked), className: watchedCaseSensitive
-                                    ? 'data-[state=checked]:bg-teal-500'
-                                    : 'data-[state=unchecked]:bg-gray-300' })] })] })) : (_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { ...form.register('points', { valueAsNumber: true }), error: form.hasError('points') ? form.getFieldError('points') : undefined }) })), afterPoints, _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "title", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(FileText, { className: "h-4 w-4 text-teal-500" }), "Ti\u00EAu \u0111\u1EC1"] }), _jsx(Input, { id: "title", ...form.register('title'), placeholder: "V\u00ED d\u1EE5: Dogs, My Family...", className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${form.hasError('title') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('title') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('title') }))] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh minh h\u1ECDa"] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: watchedImageUrl || '', onChange: (url) => form.setValue('imageUrl', url, { shouldValidate: true }), onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload h\u00ECnh \u1EA3nh ho\u1EB7c d\u00E1n URL", autoUpload: true, prefix: "questions" }), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "paragraph", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Library, { className: "h-4 w-4 text-teal-500" }), "\u0110o\u1EA1n v\u0103n ", _jsx("span", { className: "text-red-500", children: "*" }), _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(S\u1EED d\u1EE5ng ", '{0}', ", ", '{1}', ", ... cho ch\u1ED7 tr\u1ED1ng \u2014 T\u00ECm th\u1EA5y ", blankCount, " ch\u1ED7 tr\u1ED1ng)"] })] }), _jsx(Textarea, { id: "paragraph", ...form.register('paragraph'), placeholder: "Monkeys live in the {0} with their family. They can run with their long {1} ...", rows: 5, className: `border-gray-200 bg-white text-sm transition-all focus:border-teal-300 focus:ring-teal-200 ${form.hasError('paragraph') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('paragraph') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('paragraph') }))] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] }));
+    return (_jsxs(_Fragment, { children: [showCaseSensitive && (_jsxs("div", { className: `flex items-center gap-3 rounded-md border px-3 py-2 transition-all ${watchedCaseSensitive
+                    ? 'border-teal-400 bg-teal-50'
+                    : 'border-gray-200 bg-white hover:border-gray-300'}`, children: [_jsx(ToggleLeft, { className: `h-3.5 w-3.5 transition-colors ${watchedCaseSensitive ? 'text-teal-600' : 'text-gray-400'}` }), _jsx(Label, { htmlFor: "case-sensitive", className: `text-sm font-semibold transition-colors ${watchedCaseSensitive ? 'text-teal-800' : 'text-gray-800'}`, children: "Ph\u00E2n bi\u1EC7t hoa/th\u01B0\u1EDDng" }), _jsx(Switch, { id: "case-sensitive", checked: watchedCaseSensitive || false, onCheckedChange: (checked) => form.setValue('caseSensitive', !!checked), className: watchedCaseSensitive
+                            ? 'data-[state=checked]:bg-teal-500'
+                            : 'data-[state=unchecked]:bg-gray-300' })] })), afterPoints, _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "title", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(FileText, { className: "h-4 w-4 text-teal-500" }), "Ti\u00EAu \u0111\u1EC1"] }), _jsx(Input, { id: "title", ...form.register('title'), placeholder: "V\u00ED d\u1EE5: Dogs, My Family...", className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-200 ${form.hasError('title') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('title') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('title') }))] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh minh h\u1ECDa"] }), _jsx(FileUpload, { id: "question-image", label: "", accept: "image/*", value: watchedImageUrl || '', onChange: (url) => form.setValue('imageUrl', url, { shouldValidate: true }), onPresignedUrlChange: setImagePreviewUrl, maxSize: 5, placeholder: "Upload h\u00ECnh \u1EA3nh ho\u1EB7c d\u00E1n URL", autoUpload: true, prefix: "questions" }), displayPreviewUrl && (_jsx(ImagePreview, { src: displayPreviewUrl, alt: "Preview", className: "mt-2 h-48 w-full max-w-md rounded-lg border border-gray-200" }))] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "paragraph", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Library, { className: "h-4 w-4 text-teal-500" }), "\u0110o\u1EA1n v\u0103n ", _jsx("span", { className: "text-red-500", children: "*" }), _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(S\u1EED d\u1EE5ng ", '{0}', ", ", '{1}', ", ... cho ch\u1ED7 tr\u1ED1ng \u2014 T\u00ECm th\u1EA5y ", blankCount, " ch\u1ED7 tr\u1ED1ng)"] })] }), _jsx(Textarea, { id: "paragraph", ...form.register('paragraph'), placeholder: "Monkeys live in the {0} with their family. They can run with their long {1} ...", rows: 5, className: `border-gray-200 bg-white text-sm transition-all focus:border-teal-300 focus:ring-teal-200 ${form.hasError('paragraph') ? 'border-red-400 focus:border-red-500 focus:ring-red-200' : ''}` }), form.hasError('paragraph') && (_jsx("p", { className: "text-sm text-red-600", children: form.getFieldError('paragraph') }))] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, index) => (_jsx("li", { children: error }, index))) })] })] }))] }));
 }
 // ---------------------------------------------------------------------------
 // Unified WordFillParagraphCreator
@@ -506,7 +504,7 @@ export function WordFillParagraphCreator({ initialData, onSave, onCancel, onChan
             emailFrom: isEmail ? emailFrom : undefined,
             emailTo: isEmail ? emailTo : undefined,
         };
-        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(CardTitle, { children: isWithOptions ? 'Điền từ vào đoạn văn - Có lựa chọn (Preview)' : isDefault ? 'Điền từ vào đoạn văn - Mặc định (Xem trước)' : 'Điền từ vào đoạn văn (Xem trước)' }), _jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc \u2014 Hi\u1EC3n th\u1ECB \u0111\u00E1p \u00E1n \u0111\u00FAng" })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i ch\u1EC9nh s\u1EEDa"] })] }) }) }), _jsx(WordFillParagraphClient, { questionData: isWithOptions
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(WordFillParagraphClient, { questionData: isWithOptions
                         ? baseQuestionData
                         : isDefault
                             ? { ...baseQuestionData, exampleAnswer: watchedExampleAnswer }
@@ -520,52 +518,19 @@ export function WordFillParagraphCreator({ initialData, onSave, onCancel, onChan
             : isWithWordBank
                 ? 'Điền từ vào đoạn văn'
                 : 'Điền từ vào đoạn văn';
-    const headerSubtitle = isWithOptions
-        ? 'Đọc đoạn văn, chọn từ đúng từ các lựa chọn và viết vào chỗ trống'
-        : isDefault
-            ? 'Đọc đoạn văn và nhập đáp án trực tiếp cho từng chỗ trống'
-            : isWithWordBank
-                ? 'Đọc đoạn văn và chọn từ đúng từ word bank'
-                : 'Đọc đoạn văn và điền từ vào chỗ trống';
-    const instructionItems = isWithOptions
-        ? [
-            _jsxs(_Fragment, { children: ["Nh\u1EADp ", _jsx("strong", { children: "\u0111o\u1EA1n v\u0103n" }), " v\u1EDBi ch\u1ED7 tr\u1ED1ng d\u1EA1ng ", '{0}', ", ", '{1}', ", ", '{2}', "..."] }),
-            _jsxs(_Fragment, { children: ["H\u1EC7 th\u1ED1ng t\u1EF1 t\u1EA1o ", _jsx("strong", { children: "l\u1EF1a ch\u1ECDn" }), " cho t\u1EEBng ch\u1ED7 tr\u1ED1ng (th\u01B0\u1EDDng 3 l\u1EF1a ch\u1ECDn m\u1ED7i ch\u1ED7)"] }),
-            _jsxs(_Fragment, { children: ["Nh\u1EA5n ", _jsx("strong", { children: "\u00F4 ch\u1EEF c\u00E1i" }), " (A, B, C) b\u00EAn tr\u00E1i \u0111\u1EC3 ch\u1ECDn ", _jsx("strong", { children: "\u0111\u00E1p \u00E1n \u0111\u00FAng" }), " cho t\u1EEBng ch\u1ED7 tr\u1ED1ng"] }),
-            _jsxs(_Fragment, { children: ["\u0110\u00E1nh d\u1EA5u ", _jsx("strong", { children: "Example" }), " cho ch\u1ED7 tr\u1ED1ng m\u1EABu (s\u1EBD \u0111\u01B0\u1EE3c \u0111i\u1EC1n s\u1EB5n cho h\u1ECDc sinh)"] }),
-        ]
-        : isDefault
-            ? [
-                _jsxs(_Fragment, { children: ["Nh\u1EADp ", _jsx("strong", { children: "\u0111o\u1EA1n v\u0103n" }), " v\u1EDBi ch\u1ED7 tr\u1ED1ng d\u1EA1ng ", '{0}', ", ", '{1}', ", ..."] }),
-                _jsxs(_Fragment, { children: ["Nh\u1EADp ", _jsx("strong", { children: "\u0111\u00E1p \u00E1n \u0111\u00FAng" }), " tr\u1EF1c ti\u1EBFp cho t\u1EEBng ch\u1ED7 tr\u1ED1ng b\u00EAn d\u01B0\u1EDBi"] }),
-            ]
-            : isWithWordBank
-                ? [
-                    _jsxs(_Fragment, { children: ["Nh\u1EADp ", _jsx("strong", { children: "\u0111o\u1EA1n v\u0103n" }), " v\u1EDBi ch\u1ED7 tr\u1ED1ng d\u1EA1ng ", '{0}', ", ", '{1}', ", ..."] }),
-                    _jsxs(_Fragment, { children: ["Th\u00EAm c\u00E1c t\u1EEB v\u00E0o ", _jsx("strong", { children: "Word Bank" }), " (bao g\u1ED3m c\u1EA3 \u0111\u00E1p \u00E1n \u0111\u00FAng v\u00E0 t\u1EEB nhi\u1EC5u)"] }),
-                    _jsxs(_Fragment, { children: ["Ch\u1ECDn ", _jsx("strong", { children: "\u0111\u00E1p \u00E1n \u0111\u00FAng" }), " cho t\u1EEBng ch\u1ED7 tr\u1ED1ng t\u1EEB danh s\u00E1ch Word Bank"] }),
-                    _jsxs(_Fragment, { children: ["\u0110\u00E1nh d\u1EA5u ", _jsx("strong", { children: "Example" }), " cho t\u1EEB m\u1EABu (s\u1EBD \u0111\u01B0\u1EE3c \u0111i\u1EC1n s\u1EB5n cho h\u1ECDc sinh)"] }),
-                ]
-                : [
-                    _jsxs(_Fragment, { children: ["Nh\u1EADp ", _jsx("strong", { children: "\u0111o\u1EA1n v\u0103n" }), " v\u1EDBi ch\u1ED7 tr\u1ED1ng d\u1EA1ng ", '{0}', ", ", '{1}', ", ..."] }),
-                    _jsxs(_Fragment, { children: ["Nh\u1EADp ", _jsx("strong", { children: "\u0111\u00E1p \u00E1n \u0111\u00FAng" }), " cho t\u1EEBng ch\u1ED7 tr\u1ED1ng"] }),
-                ];
     const canPreview = isWithOptions
         ? !!watchedParagraph && watchedWordBank.length > 0
         : !!watchedParagraph && blankCount > 0;
-    const gradientBar = isWithOptions
-        ? 'bg-gradient-to-r from-emerald-500 via-teal-500 to-cyan-500'
-        : isDefault
-            ? 'bg-gradient-to-r from-indigo-500 via-blue-500 to-cyan-500'
-            : 'bg-gradient-to-r from-teal-500 via-cyan-500 to-blue-500';
-    const iconBg = isWithOptions
-        ? 'bg-gradient-to-br from-emerald-500 to-teal-600'
-        : isDefault
-            ? 'bg-gradient-to-br from-indigo-500 to-blue-600'
-            : 'bg-gradient-to-br from-teal-500 to-cyan-600';
-    const IconComponent = isWithOptions ? BookOpen : isDefault ? FileText : FileText;
+    const IconComponent = isWithOptions ? BookOpen : FileText;
     // ── Creator UI ─────────────────────────────────────────────────────────────
-    return (_jsxs("div", { className: "space-y-6", children: [isGrouped && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupConfig, uploadIdPrefix: `word-fill-paragraph-${partId ?? 'group'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: `h-1.5 ${gradientBar}` }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-10 w-10 items-center justify-center rounded-xl ${iconBg} shadow-md`, children: _jsx(IconComponent, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: headerTitle }), _jsx("p", { className: "text-sm text-gray-500", children: headerSubtitle })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(true), disabled: !canPreview, className: "gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx("div", { className: "rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-blue-600" }) }), _jsxs("div", { className: "text-sm text-blue-900", children: [_jsx("p", { className: "font-semibold text-blue-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsx("ul", { className: "mt-2 space-y-1.5 text-blue-700", children: instructionItems.map((item, i) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), item] }, i))) })] })] }) }), _jsx(CommonFields, { form: form, displayPreviewUrl: displayPreviewUrl, setImagePreviewUrl: setImagePreviewUrl, watchedImageUrl: watchedImageUrl, watchedParagraph: watchedParagraph, blankCount: blankCount, externalErrors: externalErrors, showCaseSensitive: isWithWordBank, watchedCaseSensitive: watchedCaseSensitive, afterPoints: isEmail ? (_jsxs("div", { className: "space-y-4 rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Mail, { className: "h-4 w-4 text-blue-500" }), "Email"] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "emailFrom", className: "text-sm font-medium text-gray-700", children: "From" }), _jsx(Input, { id: "emailFrom", value: emailFrom, onChange: (e) => setEmailFrom(e.target.value), placeholder: "V\u00ED d\u1EE5: Brenda", className: "border-gray-200 bg-white transition-all focus:border-blue-300 focus:ring-blue-200" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "emailTo", className: "text-sm font-medium text-gray-700", children: "To" }), _jsx(Input, { id: "emailTo", value: emailTo, onChange: (e) => setEmailTo(e.target.value), placeholder: "V\u00ED d\u1EE5: Ewan", className: "border-gray-200 bg-white transition-all focus:border-blue-300 focus:ring-blue-200" })] })] })] })) : undefined })] })] }), isWithOptions && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 to-cyan-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["L\u1EF1a ch\u1ECDn cho t\u1EEBng ch\u1ED7 tr\u1ED1ng (", watchedWordBank.length, ")"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [watchedWordBank.length === 0 && (_jsx("div", { className: "rounded-lg border-2 border-dashed border-gray-200 p-8 text-center", children: _jsxs("p", { className: "text-sm text-gray-500", children: ["Ch\u01B0a c\u00F3 ch\u1ED7 tr\u1ED1ng n\u00E0o. Nh\u1EADp \u0111o\u1EA1n v\u0103n v\u1EDBi ", '{0}', ", ", '{1}', "... \u0111\u1EC3 t\u1EA1o ch\u1ED7 tr\u1ED1ng."] }) })), watchedWordBank.map((blank, blankIndex) => {
+    return (_jsxs("div", { className: "space-y-3", children: [isGrouped && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupConfig, uploadIdPrefix: `word-fill-paragraph-${partId ?? 'group'}` })), _jsx(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(IconComponent, { className: "h-3.5 w-3.5" }), title: headerTitle, points: {
+                        value: watchedPoints,
+                        onValueChange: (value) => form.setValue('points', value, { shouldValidate: true }),
+                        error: form.hasError('points') ? form.getFieldError('points') : undefined,
+                    }, preview: {
+                        onClick: () => setIsClientMode(true),
+                        disabled: !canPreview,
+                    } }), children: _jsx(CommonFields, { form: form, displayPreviewUrl: displayPreviewUrl, setImagePreviewUrl: setImagePreviewUrl, watchedImageUrl: watchedImageUrl, watchedParagraph: watchedParagraph, blankCount: blankCount, externalErrors: externalErrors, showCaseSensitive: isWithWordBank, watchedCaseSensitive: watchedCaseSensitive, afterPoints: isEmail ? (_jsxs("div", { className: "space-y-4 rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 p-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Mail, { className: "h-4 w-4 text-blue-500" }), "Email"] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "emailFrom", className: "text-sm font-medium text-gray-700", children: "From" }), _jsx(Input, { id: "emailFrom", value: emailFrom, onChange: (e) => setEmailFrom(e.target.value), placeholder: "V\u00ED d\u1EE5: Brenda", className: "border-gray-200 bg-white transition-all focus:border-blue-300 focus:ring-blue-200" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "emailTo", className: "text-sm font-medium text-gray-700", children: "To" }), _jsx(Input, { id: "emailTo", value: emailTo, onChange: (e) => setEmailTo(e.target.value), placeholder: "V\u00ED d\u1EE5: Ewan", className: "border-gray-200 bg-white transition-all focus:border-blue-300 focus:ring-blue-200" })] })] })] })) : undefined }) }), isWithOptions && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm shadow-teal-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-400 to-cyan-400" }), _jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["L\u1EF1a ch\u1ECDn cho t\u1EEBng ch\u1ED7 tr\u1ED1ng (", watchedWordBank.length, ")"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [watchedWordBank.length === 0 && (_jsx("div", { className: "rounded-lg border-2 border-dashed border-gray-200 p-8 text-center", children: _jsxs("p", { className: "text-sm text-gray-500", children: ["Ch\u01B0a c\u00F3 ch\u1ED7 tr\u1ED1ng n\u00E0o. Nh\u1EADp \u0111o\u1EA1n v\u0103n v\u1EDBi ", '{0}', ", ", '{1}', "... \u0111\u1EC3 t\u1EA1o ch\u1ED7 tr\u1ED1ng."] }) })), watchedWordBank.map((blank, blankIndex) => {
                                 const selectedAnswer = watchedAnswers[blankIndex] || '';
                                 const isExampleItem = blank.isExample || false;
                                 return (_jsxs("div", { className: `rounded-xl border-2 p-4 transition-all ${isExampleItem
@@ -575,7 +540,7 @@ export function WordFillParagraphCreator({ initialData, onSave, onCancel, onChan
                                                                 : 'bg-gradient-to-br from-teal-500 to-cyan-600'}`, children: blankIndex }), _jsx("span", { className: "text-sm font-semibold text-gray-700", children: isExampleItem ? `Chỗ trống ${blankIndex} (Example)` : `Chỗ trống ${blankIndex}` }), selectedAnswer && (_jsxs("span", { className: "flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700", children: [_jsx(CheckCircle2, { className: "h-3 w-3" }), selectedAnswer] }))] }), _jsxs("label", { className: "flex items-center gap-2 text-xs text-gray-600", children: [_jsx(Checkbox, { checked: isExampleItem, onCheckedChange: (checked) => handleToggleExampleOptions(blankIndex, checked === true) }), "Example"] })] }), _jsxs("div", { className: "space-y-2", children: [(blank.options || []).map((option, optionIndex) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: () => option.trim() && handleSelectAnswerOptions(blankIndex, option), className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-xs font-bold transition-all ${selectedAnswer === option && option.trim()
                                                                 ? 'bg-green-500 text-white shadow-sm'
                                                                 : 'bg-gray-100 text-gray-500 hover:bg-green-100 hover:text-green-600'}`, title: "Ch\u1ECDn l\u00E0m \u0111\u00E1p \u00E1n \u0111\u00FAng", children: String.fromCharCode(65 + optionIndex) }), _jsx(Input, { value: option, onChange: (e) => handleOptionChange(blankIndex, optionIndex, e.target.value), placeholder: `Lựa chọn ${String.fromCharCode(65 + optionIndex)}`, className: "flex-1 border-gray-200 text-sm" }), (blank.options || []).length > 2 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => handleRemoveOption(blankIndex, optionIndex), className: "h-8 w-8 p-0 text-red-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, optionIndex))), _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => handleAddOption(blankIndex), className: "mt-1 gap-1 text-xs text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Plus, { className: "h-3 w-3" }), "Th\u00EAm l\u1EF1a ch\u1ECDn"] })] }), form.formState.errors.answers?.[blankIndex] && (_jsx("p", { className: "mt-2 text-xs font-medium text-red-500", children: form.formState.errors.answers[blankIndex]?.message }))] }, blankIndex));
-                            })] })] })), isWithWordBank && (_jsxs(_Fragment, { children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-purple-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-purple-400 to-pink-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-purple-100", children: _jsx(Library, { className: "h-3.5 w-3.5 text-purple-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["Word Bank (", watchedWordBank.length, " t\u1EEB)"] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddWord, className: "gap-1.5 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm t\u1EEB"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("p", { className: "text-xs text-gray-500", children: ["Th\u00EAm t\u1EA5t c\u1EA3 c\u00E1c t\u1EEB g\u1EE3i \u00FD cho h\u1ECDc sinh (bao g\u1ED3m ", _jsx("strong", { children: "\u0111\u00E1p \u00E1n \u0111\u00FAng" }), " v\u00E0", ' ', _jsx("strong", { children: "t\u1EEB nhi\u1EC5u" }), "). \u0110\u00E1nh d\u1EA5u ", _jsx("strong", { children: "Example" }), " cho t\u1EEB m\u1EABu \u0111\u00E3 \u0111\u01B0\u1EE3c \u0111i\u1EC1n s\u1EB5n."] }), watchedWordBank.length > 0 ? (_jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: watchedWordBank.map((item, index) => (_jsxs("div", { className: `space-y-3 rounded-lg border p-4 transition-all ${item.isExample
+                            })] })] })), isWithWordBank && (_jsxs(_Fragment, { children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm shadow-purple-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-purple-400 to-pink-400" }), _jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-purple-100", children: _jsx(Library, { className: "h-3.5 w-3.5 text-purple-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["Word Bank (", watchedWordBank.length, " t\u1EEB)"] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddWord, className: "gap-1.5 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm t\u1EEB"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("p", { className: "text-xs text-gray-500", children: ["Th\u00EAm t\u1EA5t c\u1EA3 c\u00E1c t\u1EEB g\u1EE3i \u00FD cho h\u1ECDc sinh (bao g\u1ED3m ", _jsx("strong", { children: "\u0111\u00E1p \u00E1n \u0111\u00FAng" }), " v\u00E0", ' ', _jsx("strong", { children: "t\u1EEB nhi\u1EC5u" }), "). \u0110\u00E1nh d\u1EA5u ", _jsx("strong", { children: "Example" }), " cho t\u1EEB m\u1EABu \u0111\u00E3 \u0111\u01B0\u1EE3c \u0111i\u1EC1n s\u1EB5n."] }), watchedWordBank.length > 0 ? (_jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: watchedWordBank.map((item, index) => (_jsxs("div", { className: `space-y-3 rounded-lg border p-4 transition-all ${item.isExample
                                                 ? 'border-amber-300 bg-amber-50/50'
                                                 : 'border-gray-200 bg-gray-50/50 hover:border-gray-300'}`, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: `flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-xs font-bold text-white shadow-sm ${item.isExample
                                                                         ? 'bg-gradient-to-br from-amber-400 to-orange-500'
@@ -589,7 +554,7 @@ export function WordFillParagraphCreator({ initialData, onSave, onCancel, onChan
                                                                 const nb = [...watchedWordBank];
                                                                 nb[index] = { ...nb[index], imageUrl: url };
                                                                 formWithWordBank.setValue('wordBank', nb);
-                                                            }, onPresignedUrlChange: (url) => setWordBankImagePreviews((prev) => ({ ...prev, [index]: url })), maxSize: 5, placeholder: "Upload h\u00ECnh", autoUpload: true, prefix: "questions" }), _jsx(WordBankImagePreview, { imageUrl: item.imageUrl || '', localPreviewUrl: wordBankImagePreviews[index], index: index })] })] }, index))) })) : (_jsxs("div", { className: "flex h-28 flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-200 bg-gray-50", children: [_jsx("p", { className: "text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 t\u1EEB n\u00E0o trong Word Bank" }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddWord, className: "gap-1.5 border-purple-200 text-purple-600", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm t\u1EEB \u0111\u1EA7u ti\u00EAn"] })] })), formWithWordBank.formState.errors.wordBank?.message && (_jsx("p", { className: "text-sm text-red-600", children: formWithWordBank.formState.errors.wordBank.message }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-green-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-green-400 to-emerald-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-green-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-green-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng (", blankCount, " ch\u1ED7 tr\u1ED1ng)"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [blankCount > 0 ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-xs text-gray-500", children: ["Ch\u1ECDn t\u1EEB \u0111\u00FAng t\u1EEB ", _jsx("strong", { children: "Word Bank" }), " cho m\u1ED7i ch\u1ED7 tr\u1ED1ng trong \u0111o\u1EA1n v\u0103n."] }), _jsx("div", { className: "space-y-3", children: placeholderIndices.map((placeholderIdx) => {
+                                                            }, onPresignedUrlChange: (url) => setWordBankImagePreviews((prev) => ({ ...prev, [index]: url })), maxSize: 5, placeholder: "Upload h\u00ECnh", autoUpload: true, prefix: "questions" }), _jsx(WordBankImagePreview, { imageUrl: item.imageUrl || '', localPreviewUrl: wordBankImagePreviews[index], index: index })] })] }, index))) })) : (_jsxs("div", { className: "flex h-28 flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-200 bg-gray-50", children: [_jsx("p", { className: "text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 t\u1EEB n\u00E0o trong Word Bank" }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddWord, className: "gap-1.5 border-purple-200 text-purple-600", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm t\u1EEB \u0111\u1EA7u ti\u00EAn"] })] })), formWithWordBank.formState.errors.wordBank?.message && (_jsx("p", { className: "text-sm text-red-600", children: formWithWordBank.formState.errors.wordBank.message }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm shadow-green-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-green-400 to-emerald-400" }), _jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-green-100", children: _jsx(ListChecks, { className: "h-3.5 w-3.5 text-green-600" }) }), _jsxs(CardTitle, { className: "text-lg font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n \u0111\u00FAng (", blankCount, " ch\u1ED7 tr\u1ED1ng)"] })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [blankCount > 0 ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "text-xs text-gray-500", children: ["Ch\u1ECDn t\u1EEB \u0111\u00FAng t\u1EEB ", _jsx("strong", { children: "Word Bank" }), " cho m\u1ED7i ch\u1ED7 tr\u1ED1ng trong \u0111o\u1EA1n v\u0103n."] }), _jsx("div", { className: "space-y-3", children: placeholderIndices.map((placeholderIdx) => {
                                                     const currentAnswer = watchedAnswers[placeholderIdx] || '';
                                                     const isExampleBlank = watchedWordBank.some((w) => w.isExample && w.word === currentAnswer);
                                                     return (_jsxs("div", { className: `flex items-center gap-4 rounded-lg border p-4 transition-all ${currentAnswer
@@ -609,7 +574,7 @@ export function WordFillParagraphCreator({ initialData, onSave, onCancel, onChan
                                                                                 const isExampleWord = watchedWordBank.find((w) => w.word === word)?.isExample;
                                                                                 return (_jsx(SelectItem, { value: word, disabled: isUsedElsewhere, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: isUsedElsewhere ? 'text-gray-400' : '', children: word }), isExampleWord && (_jsx("span", { className: "rounded bg-amber-100 px-1 py-0.5 text-[10px] font-medium text-amber-600", children: "example" })), isUsedElsewhere && (_jsx("span", { className: "text-[10px] text-gray-400", children: "(\u0111\u00E3 d\u00F9ng)" }))] }) }, `${word}-${wordIdx}`));
                                                                             })) : (_jsx("div", { className: "py-4 text-center text-sm text-gray-400", children: "Ch\u01B0a c\u00F3 t\u1EEB n\u00E0o trong Word Bank" })) })] }) }), _jsx("div", { className: "flex-shrink-0", children: currentAnswer ? (_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-green-100", children: _jsx(ListChecks, { className: "h-4 w-4 text-green-600" }) })) : formWithWordBank.formState.errors.answers?.[placeholderIdx] ? (_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-red-100", children: _jsx("span", { className: "text-xs font-bold text-red-500", children: "!" }) })) : (_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-gray-100", children: _jsx("span", { className: "text-xs text-gray-400", children: "?" }) })) })] }, placeholderIdx));
-                                                }) }), _jsx("div", { className: "rounded-lg border border-gray-200 bg-gray-50 p-3", children: _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsxs("span", { className: "text-gray-600", children: ["\u0110\u00E3 ch\u1ECDn \u0111\u00E1p \u00E1n: ", _jsx("strong", { children: watchedAnswers.filter((a) => a).length }), " / ", blankCount] }), _jsxs("span", { className: "text-gray-600", children: ["T\u1EEB nhi\u1EC5u:", ' ', _jsx("strong", { children: watchedWordBank.length - watchedAnswers.filter((a) => a).length }), " t\u1EEB"] })] }) })] })) : (_jsx("div", { className: "flex h-24 items-center justify-center rounded-lg border-2 border-dashed border-gray-200 bg-gray-50", children: _jsxs("p", { className: "text-sm text-gray-400", children: ["Nh\u1EADp \u0111o\u1EA1n v\u0103n c\u00F3 ", '{0}', ", ", '{1}', ", ... \u0111\u1EC3 t\u1EA1o ch\u1ED7 tr\u1ED1ng"] }) })), formWithWordBank.formState.errors.answers?.message && (_jsx("p", { className: "text-sm text-red-600", children: formWithWordBank.formState.errors.answers.message }))] })] })] })), isDefault && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 via-blue-500 to-cyan-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 shadow-md", children: _jsx(ListChecks, { className: "h-4 w-4 text-white" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "\u0110\u00E1p \u00E1n cho t\u1EEBng ch\u1ED7 tr\u1ED1ng" })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [blankCount > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-3", children: placeholderIndices.map((idx) => {
+                                                }) }), _jsx("div", { className: "rounded-lg border border-gray-200 bg-gray-50 p-3", children: _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsxs("span", { className: "text-gray-600", children: ["\u0110\u00E3 ch\u1ECDn \u0111\u00E1p \u00E1n: ", _jsx("strong", { children: watchedAnswers.filter((a) => a).length }), " / ", blankCount] }), _jsxs("span", { className: "text-gray-600", children: ["T\u1EEB nhi\u1EC5u:", ' ', _jsx("strong", { children: watchedWordBank.length - watchedAnswers.filter((a) => a).length }), " t\u1EEB"] })] }) })] })) : (_jsx("div", { className: "flex h-24 items-center justify-center rounded-lg border-2 border-dashed border-gray-200 bg-gray-50", children: _jsxs("p", { className: "text-sm text-gray-400", children: ["Nh\u1EADp \u0111o\u1EA1n v\u0103n c\u00F3 ", '{0}', ", ", '{1}', ", ... \u0111\u1EC3 t\u1EA1o ch\u1ED7 tr\u1ED1ng"] }) })), formWithWordBank.formState.errors.answers?.message && (_jsx("p", { className: "text-sm text-red-600", children: formWithWordBank.formState.errors.answers.message }))] })] })] })), isDefault && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 via-blue-500 to-cyan-500" }), _jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-blue-600 shadow-md", children: _jsx(ListChecks, { className: "h-4 w-4 text-white" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "\u0110\u00E1p \u00E1n cho t\u1EEBng ch\u1ED7 tr\u1ED1ng" })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [blankCount > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-3", children: placeholderIndices.map((idx) => {
                                             const answerText = (watchedAnswers[idx] || '').trim();
                                             const isExampleAnswer = !!answerText && watchedExampleAnswer.includes(answerText);
                                             return (_jsxs("div", { className: `rounded-xl border-2 p-4 transition-all ${isExampleAnswer
@@ -627,5 +592,5 @@ export function WordFillParagraphCreator({ initialData, onSave, onCancel, onChan
                                                                         : 'border-gray-200 focus:border-indigo-400 focus:ring-indigo-200'}` }), _jsxs("button", { type: "button", disabled: !answerText, onClick: () => handleDefaultToggleExample(idx), title: isExampleAnswer ? 'Bỏ đánh dấu Example' : 'Đánh dấu làm Example', className: `inline-flex h-10 items-center gap-1.5 rounded-lg border px-3 text-sm font-medium transition-colors select-none ${isExampleAnswer
                                                                     ? 'border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100'
                                                                     : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'} ${!answerText ? 'cursor-not-allowed opacity-50' : ''}`, children: [_jsx(Star, { className: `h-4 w-4 ${isExampleAnswer ? 'fill-amber-400 text-amber-400' : ''}` }), "Example"] })] }), formDefault.formState.errors.answers?.[idx] && (_jsx("p", { className: "mt-1.5 ml-13 text-xs text-red-500", children: formDefault.formState.errors.answers[idx]?.message }))] }, idx));
-                                        }) }), _jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-indigo-50/50 px-3 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-indigo-500" }), _jsxs("span", { className: "text-xs text-indigo-700", children: [watchedAnswers.filter((a) => a?.trim()).length, " / ", blankCount, " \u0111\u00E1p \u00E1n \u0111\u00E3 \u0111i\u1EC1n"] })] })] })) : (_jsx("div", { className: "flex h-24 items-center justify-center rounded-lg border-2 border-dashed border-gray-200 bg-gray-50", children: _jsxs("p", { className: "text-sm text-gray-400", children: ["Nh\u1EADp \u0111o\u1EA1n v\u0103n c\u00F3 ", '{0}', ", ", '{1}', ", ... \u0111\u1EC3 t\u1EA1o ch\u1ED7 tr\u1ED1ng"] }) })), formDefault.formState.errors.answers?.message && (_jsx("p", { className: "text-sm text-red-600", children: formDefault.formState.errors.answers.message }))] })] })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-amber-400 to-orange-400" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2.5 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "text-sm text-gray-500 mt-0.5", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { ...form.register('explanation'), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200 resize-none" }) })] })] }));
+                                        }) }), _jsxs("div", { className: "flex items-center gap-2 rounded-lg bg-indigo-50/50 px-3 py-2", children: [_jsx(CheckCircle2, { className: "h-4 w-4 text-indigo-500" }), _jsxs("span", { className: "text-xs text-indigo-700", children: [watchedAnswers.filter((a) => a?.trim()).length, " / ", blankCount, " \u0111\u00E1p \u00E1n \u0111\u00E3 \u0111i\u1EC1n"] })] })] })) : (_jsx("div", { className: "flex h-24 items-center justify-center rounded-lg border-2 border-dashed border-gray-200 bg-gray-50", children: _jsxs("p", { className: "text-sm text-gray-400", children: ["Nh\u1EADp \u0111o\u1EA1n v\u0103n c\u00F3 ", '{0}', ", ", '{1}', ", ... \u0111\u1EC3 t\u1EA1o ch\u1ED7 tr\u1ED1ng"] }) })), formDefault.formState.errors.answers?.message && (_jsx("p", { className: "text-sm text-red-600", children: formDefault.formState.errors.answers.message }))] })] })), _jsx(CompactExplanationToggle, { value: watchedExplanation ?? '', onValueChange: (value) => form.setValue('explanation', value, { shouldValidate: true }) })] }));
 }

package/dist/components/questions/types/word-fill-structured-form/WordFillStructuredFormClient.js

@@ -277,7 +277,7 @@ export function WordFillStructuredFormClient({ questionData, isReviewMode = fals
             .map((node, index) => renderNode(node, `root-${index}`))
             .filter((node) => node !== null);
     }, [content, renderBlank]);
-    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-5 py-3", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [_jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-white shadow-sm", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0", children: [typeof questionNumber === 'number' && questionNumber > 0 ? (_jsxs("p", { className: "text-[11px] font-semibold uppercase tracking-wider text-teal-700", children: ["B\u00E0i ", questionNumber] })) : null, _jsx("span", { className: "block text-sm font-medium leading-snug text-gray-800", children: headerLabel })] })] }), isReviewMode && allFilled && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAllCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isAllCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isAllCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-5 p-5", children: [title && (_jsx("h2", { className: "text-center text-xl font-bold text-gray-900", children: title })), allAudios.length > 0 && (_jsx("div", { className: "flex flex-col items-center gap-2", children: allAudios.map((audio, idx) => (_jsx(ClientAudioItem, { url: audio }, idx))) })), allImages.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: allImages.map((img, idx) => (_jsx(ClientImageItem, { url: img, alt: title ? `${title} (${idx + 1})` : undefined }, idx))) })), bankMode === 'WITH_WORD_BANK' && sharedWords.length > 0 && (_jsxs("div", { className: "rounded-lg border border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 p-3", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Library, { className: "h-4 w-4 text-purple-600" }), _jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-purple-700", children: "Word Bank" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: sharedWords.map((item, index) => {
+    return (_jsx("div", { className: "space-y-4", children: _jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white px-3 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [_jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 text-white shadow-sm", children: _jsx(FileText, { className: "h-4 w-4" }) }), _jsxs("div", { className: "min-w-0", children: [typeof questionNumber === 'number' && questionNumber > 0 ? (_jsxs("p", { className: "text-[11px] font-semibold uppercase tracking-wider text-teal-700", children: ["B\u00E0i ", questionNumber] })) : null, _jsx("span", { className: "block text-sm font-medium leading-snug text-gray-800", children: headerLabel })] })] }), isReviewMode && allFilled && (_jsxs("div", { className: cn('flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold', isAllCorrect ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'), children: [isAllCorrect ? _jsx(Check, { className: "h-3.5 w-3.5" }) : _jsx(X, { className: "h-3.5 w-3.5" }), isAllCorrect ? 'Đúng' : 'Sai'] }))] }), _jsxs("div", { className: "space-y-3 p-3", children: [title && (_jsx("h2", { className: "text-center text-xl font-bold text-gray-900", children: title })), allAudios.length > 0 && (_jsx("div", { className: "flex flex-col items-center gap-2", children: allAudios.map((audio, idx) => (_jsx(ClientAudioItem, { url: audio }, idx))) })), allImages.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-3", children: allImages.map((img, idx) => (_jsx(ClientImageItem, { url: img, alt: title ? `${title} (${idx + 1})` : undefined }, idx))) })), bankMode === 'WITH_WORD_BANK' && sharedWords.length > 0 && (_jsxs("div", { className: "rounded-lg border border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 p-3", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Library, { className: "h-4 w-4 text-purple-600" }), _jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-purple-700", children: "Word Bank" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: sharedWords.map((item, index) => {
                                         const used = usedSharedWords.has(item.word.trim().toLowerCase());
                                         return (_jsxs("span", { className: cn('rounded-full border px-3 py-1 text-sm font-medium', item.isExample
                                                 ? 'border-amber-300 bg-amber-100 text-amber-800'

package/dist/components/questions/types/word-fill-structured-form/WordFillStructuredFormCreator.js

@@ -7,14 +7,14 @@ import TextAlign from '@tiptap/extension-text-align';
 import Underline from '@tiptap/extension-underline';
 import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
 import { Mark, mergeAttributes } from '@tiptap/core';
-import { List, ListOrdered, Bold, Italic, Underline as UnderlineIcon, Strikethrough, AlignLeft, AlignCenter, AlignRight, TableIcon, Plus, Minus, Trash2, Undo2, Redo2, BookOpen, Eye, Pencil, CheckCircle2, PenLine, Info, MessageSquare, ImageIcon, Volume2, Quote, Code, MinusSquare, Eraser, Palette } from 'lucide-react';
+import { List, ListOrdered, Bold, Italic, Underline as UnderlineIcon, Strikethrough, AlignLeft, AlignCenter, AlignRight, TableIcon, Plus, Minus, Trash2, Undo2, Redo2, CheckCircle2, PenLine, Info, MessageSquare, ImageIcon, Volume2, Quote, Code, MinusSquare, Eraser, Palette } from 'lucide-react';
 import { Button } from '../../../../components/ui/button';
 import { Label } from '../../../../components/ui/label';
 import { Input } from '../../../../components/ui/input';
 import { Textarea } from '../../../../components/ui/textarea';
 import { Switch } from '../../../../components/ui/switch';
-import { PointsInput } from '../../../../components/ui/points-input';
 import { Card, CardContent, CardHeader, CardTitle } from '../../../../components/ui/card';
+import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { FileUpload } from '../../../../components/ui/file-upload';
 import { ImagePreview } from '../../../../components/ui/image-preview';
 import { WordFillStructuredFormClient } from './WordFillStructuredFormClient';
@@ -488,33 +488,39 @@ export function WordFillStructuredFormCreator({ initialData, onSave, onCancel, o
     ]);
     // ── Preview mode ───────────────────────────────────────────────────────────
     if (isPreviewMode) {
-        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: _jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-teal-500 to-cyan-600 shadow-sm", children: _jsx(Eye, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB \u2013 Xem tr\u01B0\u1EDBc" }), _jsx("p", { className: "text-xs text-gray-500", children: "Ch\u1EBF \u0111\u1ED9 xem tr\u01B0\u1EDBc v\u1EDBi \u0111\u00E1p \u00E1n \u0111\u00FAng \u0111\u00E3 \u0111\u01B0\u1EE3c \u0111i\u1EC1n s\u1EB5n" })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsPreviewMode(false), className: "gap-2 border-teal-200 text-teal-700 hover:bg-teal-50", children: [_jsx(Pencil, { className: "h-4 w-4" }), "Quay l\u1EA1i Edit"] })] }) }) }), _jsx(WordFillStructuredFormClient, { questionData: buildFormData(), isReviewMode: true, userAnswer: primaryWfsfAnswers(answers), instruction: instruction })] }));
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsPreviewMode(false) }), _jsx(WordFillStructuredFormClient, { questionData: buildFormData(), isReviewMode: true, userAnswer: primaryWfsfAnswers(answers), instruction: instruction })] }));
     }
     // ── Edit mode ──────────────────────────────────────────────────────────────
-    return (_jsxs("div", { className: "space-y-4", children: [isGrouped && effectiveGroupType === 'BASIC' && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `word-fill-structured-${partId ?? 'group'}` })), isGrouped && effectiveGroupType === 'DOCUMENT' && (_jsx(DocumentGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `word-fill-structured-${partId ?? 'document'}` })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-teal-500 via-cyan-500 to-emerald-500" }), _jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gray-100", children: _jsx(PenLine, { className: "h-4 w-4 text-teal-600" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-base font-bold text-gray-900", children: "\u0110i\u1EC1n t\u1EEB v\u00E0o bi\u1EC3u m\u1EABu c\u00F3 c\u1EA5u tr\u00FAc" }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Nh\u1EADp n\u1ED9i dung, \u0111\u1EB7t ch\u1ED7 tr\u1ED1ng b\u1EB1ng ", `{0}`, " ", `{1}`, "\u2026 r\u1ED3i \u0111i\u1EC1n \u0111\u00E1p \u00E1n b\u00EAn d\u01B0\u1EDBi"] })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsPreviewMode(true), disabled: expectedBlankKeys.length === 0 || expectedBlankKeys.some(k => !hasWfsfBlankAnswer(answers[k])), className: "gap-2 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-4 px-4 pb-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "wfsf-instruction", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Info, { className: "h-4 w-4 text-teal-500" }), "Instruction", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(h\u01B0\u1EDBng d\u1EABn b\u00E0i t\u1EADp)" })] }), _jsx(Textarea, { id: "wfsf-instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "VD: Complete the words in the sentences. Use the words in the box.", rows: 2, className: "min-h-[64px] resize-y border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(PointsInput, { value: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }), _jsxs("div", { role: "button", tabIndex: 0, onClick: () => setCaseSensitive(!caseSensitive), onKeyDown: (e) => { if (e.key === ' ' || e.key === 'Enter')
-                                            setCaseSensitive(!caseSensitive); }, style: { paddingBlock: 'calc(var(--spacing) * 1)' }, className: `inline-flex cursor-pointer items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${caseSensitive
-                                            ? 'border-teal-300 bg-teal-50 text-teal-700'
-                                            : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Switch, { checked: caseSensitive, onCheckedChange: setCaseSensitive, className: caseSensitive ? 'data-[state=checked]:bg-teal-500 pointer-events-none' : 'pointer-events-none', tabIndex: -1 }), "Ph\u00E2n bi\u1EC7t Hoa / th\u01B0\u1EDDng"] }), _jsx(BlankStyleSwitch, { value: blankStyle, onChange: setBlankStyle })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "wfsf-title", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-teal-500" }), "Ti\u00EAu \u0111\u1EC1", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(Input, { id: "wfsf-title", value: effectiveTitle, onChange: (e) => setEffectiveTitle(e.target.value), placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 c\u00E2u h\u1ECFi...", className: "border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100" })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-teal-500" }), "File \u00E2m thanh (Audio)", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setAudioUrls((prev) => [...prev, '']), className: "gap-1.5 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm audio"] })] }), audioUrls.length === 0 ? (_jsx("div", { className: "flex items-center justify-between rounded-lg border border-dashed border-gray-200 bg-gray-50/50 p-3 text-xs text-gray-500", children: _jsx("span", { children: "Ch\u01B0a c\u00F3 file audio. Nh\u1EA5n \"Th\u00EAm audio\" \u0111\u1EC3 upload file nghe cho c\u00E2u h\u1ECFi." }) })) : (_jsx("div", { className: "space-y-2.5", children: audioUrls.map((audioUrl, index) => (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50/30 p-2.5", children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700", children: index + 1 }), _jsx("div", { className: "flex-1", children: _jsx(FileUpload, { id: `wfsf-audio-${index}`, label: "", accept: "audio/*", value: audioUrl, onChange: (url) => {
-                                                            setAudioUrls((prev) => {
-                                                                const next = [...prev];
-                                                                next[index] = url;
-                                                                return next;
-                                                            });
-                                                        }, maxSize: 20, placeholder: "Upload file audio ho\u1EB7c paste URL", autoUpload: true, showPlayButton: true, prefix: "audio" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => {
-                                                        setAudioUrls((prev) => prev.filter((_, idx) => idx !== index));
-                                                    }, title: "Xo\u00E1 audio n\u00E0y", className: "h-8 w-8 text-gray-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, index))) }))] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh (Images)", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setImageUrls((prev) => [...prev, '']), className: "gap-1.5 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm h\u00ECnh \u1EA3nh"] })] }), imageUrls.length === 0 ? (_jsx("div", { className: "flex items-center justify-between rounded-lg border border-dashed border-gray-200 bg-gray-50/50 p-3 text-xs text-gray-500", children: _jsx("span", { children: "Ch\u01B0a c\u00F3 h\u00ECnh \u1EA3nh. Nh\u1EA5n \"Th\u00EAm h\u00ECnh \u1EA3nh\" \u0111\u1EC3 upload \u1EA3nh minh ho\u1EA1 cho c\u00E2u h\u1ECFi." }) })) : (_jsx("div", { className: "space-y-3", children: imageUrls.map((imageUrl, index) => (_jsx(ImageUploadItem, { index: index, imageUrl: imageUrl, onChange: (url) => {
-                                                setImageUrls((prev) => {
-                                                    const next = [...prev];
-                                                    next[index] = url;
-                                                    return next;
-                                                });
-                                            }, onRemove: () => {
-                                                setImageUrls((prev) => prev.filter((_, idx) => idx !== index));
-                                            } }, index))) }))] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, i) => _jsx("li", { children: error }, i)) })] })] }))] })] }), showContent && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(ListOrdered, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "N\u1ED9i dung c\u1EA5u tr\u00FAc" })] }), expectedBlankKeys.length > 0 && (_jsxs("span", { className: "inline-flex items-center rounded-full border border-teal-200 bg-teal-50 px-2.5 py-0.5 text-xs font-semibold text-teal-700", children: [expectedBlankKeys.length, " ch\u1ED7 tr\u1ED1ng"] }))] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 transition-all focus-within:border-teal-300 focus-within:ring-2 focus-within:ring-teal-100", children: [_jsx(EditorToolbar, { editor: editor }), _jsx(EditorContent, { editor: editor })] }), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-teal-100 bg-teal-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "mt-0.5 h-4 w-4 shrink-0 text-teal-500" }), _jsxs("p", { className: "text-xs text-teal-700", children: ["Nh\u1EADp ", _jsx("strong", { children: `{0}` }), ", ", _jsx("strong", { children: `{1}` }), ", ", _jsx("strong", { children: `{2}` }), "\u2026 v\u00E0o v\u0103n b\u1EA3n \u0111\u1EC3 t\u1EA1o \u00F4 tr\u1ED1ng. \u0110\u00E1p \u00E1n s\u1EBD t\u1EF1 \u0111\u1ED9ng xu\u1EA5t hi\u1EC7n b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 b\u1EA1n nh\u1EADp."] })] })] })] })), _jsx(WfsfWordBankEditor, { mode: bankMode, onModeChange: handleBankModeChange, sharedBank: sharedBank, onSharedBankChange: setSharedBank, optionsBank: optionsBank, onOptionsBankChange: setOptionsBank, blankKeys: expectedBlankKeys, answers: answers, onAnswerChange: (key, value) => setAnswers((prev) => ({ ...prev, [key]: value })) }), expectedBlankKeys.length > 0 && bankMode !== 'WITH_OPTIONS' && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-teal-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", expectedBlankKeys.length, " ch\u1ED7 tr\u1ED1ng)"] })] })] }) }), _jsxs(CardContent, { className: "px-4 pb-4", children: [_jsx("p", { className: "mb-3 text-xs text-gray-500", children: "M\u1ED7i ch\u1ED7 tr\u1ED1ng c\u00F3 th\u1EC3 c\u00F3 nhi\u1EC1u \u0111\u00E1p \u00E1n \u0111\u00FAng. H\u1ECDc vi\u00EAn \u0111\u00FAng n\u1EBFu kh\u1EDBp m\u1ED9t trong c\u00E1c \u0111\u00E1p \u00E1n." }), _jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4", children: expectedBlankKeys.map((key) => {
+    return (_jsxs("div", { className: "space-y-3", children: [isGrouped && effectiveGroupType === 'BASIC' && (_jsx(BasicQuestionGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `word-fill-structured-${partId ?? 'group'}` })), isGrouped && effectiveGroupType === 'DOCUMENT' && (_jsx(DocumentGroupCard, { groupNumber: currentGroupNumber, title: groupTitle, subtitle: groupSubtitle, content: groupContent, imageUrl: groupImageUrl, onTitleChange: setGroupTitle, onSubtitleChange: setGroupSubtitle, onContentChange: setGroupContent, onImageChange: setGroupImageUrl, groupConfig: groupType ? groupConfig : undefined, isReadOnly: !isFirstInGroup, uploadIdPrefix: `word-fill-structured-${partId ?? 'document'}` })), _jsxs(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(PenLine, { className: "h-3.5 w-3.5" }), title: "\u0110i\u1EC1n t\u1EEB v\u00E0o bi\u1EC3u m\u1EABu c\u00F3 c\u1EA5u tr\u00FAc", points: {
+                        value: points,
+                        onValueChange: setPoints,
+                    }, preview: {
+                        onClick: () => setIsPreviewMode(true),
+                        disabled: expectedBlankKeys.length === 0 || expectedBlankKeys.some(k => !hasWfsfBlankAnswer(answers[k])),
+                    } }), children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "wfsf-instruction", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Info, { className: "h-4 w-4 text-teal-500" }), "Instruction", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(h\u01B0\u1EDBng d\u1EABn b\u00E0i t\u1EADp)" })] }), _jsx(Textarea, { id: "wfsf-instruction", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "VD: Complete the words in the sentences. Use the words in the box.", rows: 2, className: "min-h-[64px] resize-y border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100" })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs("div", { role: "button", tabIndex: 0, onClick: () => setCaseSensitive(!caseSensitive), onKeyDown: (e) => { if (e.key === ' ' || e.key === 'Enter')
+                                    setCaseSensitive(!caseSensitive); }, style: { paddingBlock: 'calc(var(--spacing) * 1)' }, className: `inline-flex cursor-pointer items-center gap-2 rounded-md border px-3.5 text-sm font-medium transition-colors select-none ${caseSensitive
+                                    ? 'border-teal-300 bg-teal-50 text-teal-700'
+                                    : 'border-gray-200 bg-white text-gray-400 hover:text-gray-600'}`, children: [_jsx(Switch, { checked: caseSensitive, onCheckedChange: setCaseSensitive, className: caseSensitive ? 'data-[state=checked]:bg-teal-500 pointer-events-none' : 'pointer-events-none', tabIndex: -1 }), "Ph\u00E2n bi\u1EC7t Hoa / th\u01B0\u1EDDng"] }), _jsx(BlankStyleSwitch, { value: blankStyle, onChange: setBlankStyle })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "wfsf-title", className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-teal-500" }), "Ti\u00EAu \u0111\u1EC1", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsx(Input, { id: "wfsf-title", value: effectiveTitle, onChange: (e) => setEffectiveTitle(e.target.value), placeholder: "Nh\u1EADp ti\u00EAu \u0111\u1EC1 c\u00E2u h\u1ECFi...", className: "border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100" })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Volume2, { className: "h-4 w-4 text-teal-500" }), "File \u00E2m thanh (Audio)", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setAudioUrls((prev) => [...prev, '']), className: "gap-1.5 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm audio"] })] }), audioUrls.length === 0 ? (_jsx("div", { className: "flex items-center justify-between rounded-lg border border-dashed border-gray-200 bg-gray-50/50 p-3 text-xs text-gray-500", children: _jsx("span", { children: "Ch\u01B0a c\u00F3 file audio. Nh\u1EA5n \"Th\u00EAm audio\" \u0111\u1EC3 upload file nghe cho c\u00E2u h\u1ECFi." }) })) : (_jsx("div", { className: "space-y-2.5", children: audioUrls.map((audioUrl, index) => (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50/30 p-2.5", children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700", children: index + 1 }), _jsx("div", { className: "flex-1", children: _jsx(FileUpload, { id: `wfsf-audio-${index}`, label: "", accept: "audio/*", value: audioUrl, onChange: (url) => {
+                                                    setAudioUrls((prev) => {
+                                                        const next = [...prev];
+                                                        next[index] = url;
+                                                        return next;
+                                                    });
+                                                }, maxSize: 20, placeholder: "Upload file audio ho\u1EB7c paste URL", autoUpload: true, showPlayButton: true, prefix: "audio" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => {
+                                                setAudioUrls((prev) => prev.filter((_, idx) => idx !== index));
+                                            }, title: "Xo\u00E1 audio n\u00E0y", className: "h-8 w-8 text-gray-400 hover:bg-red-50 hover:text-red-600", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }, index))) }))] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(ImageIcon, { className: "h-4 w-4 text-teal-500" }), "H\u00ECnh \u1EA3nh (Images)", _jsx("span", { className: "text-sm font-normal text-gray-500", children: "(tu\u1EF3 ch\u1ECDn)" })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setImageUrls((prev) => [...prev, '']), className: "gap-1.5 border-teal-200 text-teal-600 hover:bg-teal-50 hover:text-teal-700", children: [_jsx(Plus, { className: "h-3.5 w-3.5" }), "Th\u00EAm h\u00ECnh \u1EA3nh"] })] }), imageUrls.length === 0 ? (_jsx("div", { className: "flex items-center justify-between rounded-lg border border-dashed border-gray-200 bg-gray-50/50 p-3 text-xs text-gray-500", children: _jsx("span", { children: "Ch\u01B0a c\u00F3 h\u00ECnh \u1EA3nh. Nh\u1EA5n \"Th\u00EAm h\u00ECnh \u1EA3nh\" \u0111\u1EC3 upload \u1EA3nh minh ho\u1EA1 cho c\u00E2u h\u1ECFi." }) })) : (_jsx("div", { className: "space-y-3", children: imageUrls.map((imageUrl, index) => (_jsx(ImageUploadItem, { index: index, imageUrl: imageUrl, onChange: (url) => {
+                                        setImageUrls((prev) => {
+                                            const next = [...prev];
+                                            next[index] = url;
+                                            return next;
+                                        });
+                                    }, onRemove: () => {
+                                        setImageUrls((prev) => prev.filter((_, idx) => idx !== index));
+                                    } }, index))) }))] }), externalErrors && externalErrors.length > 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100", children: _jsx("span", { className: "text-lg", children: "\u274C" }) }), _jsxs("div", { className: "text-sm", children: [_jsx("p", { className: "font-semibold text-red-800", children: "L\u1ED7i:" }), _jsx("ul", { className: "mt-1 list-inside list-disc text-red-700", children: externalErrors.map((error, i) => _jsx("li", { children: error }, i)) })] })] }))] }), showContent && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(ListOrdered, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "N\u1ED9i dung c\u1EA5u tr\u00FAc" })] }), expectedBlankKeys.length > 0 && (_jsxs("span", { className: "inline-flex items-center rounded-full border border-teal-200 bg-teal-50 px-2.5 py-0.5 text-xs font-semibold text-teal-700", children: [expectedBlankKeys.length, " ch\u1ED7 tr\u1ED1ng"] }))] }) }), _jsxs(CardContent, { className: "space-y-3 px-4 pb-4", children: [_jsxs("div", { className: "overflow-hidden rounded-xl border border-gray-200 transition-all focus-within:border-teal-300 focus-within:ring-2 focus-within:ring-teal-100", children: [_jsx(EditorToolbar, { editor: editor }), _jsx(EditorContent, { editor: editor })] }), _jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-teal-100 bg-teal-50/60 px-3 py-2.5", children: [_jsx(Info, { className: "mt-0.5 h-4 w-4 shrink-0 text-teal-500" }), _jsxs("p", { className: "text-xs text-teal-700", children: ["Nh\u1EADp ", _jsx("strong", { children: `{0}` }), ", ", _jsx("strong", { children: `{1}` }), ", ", _jsx("strong", { children: `{2}` }), "\u2026 v\u00E0o v\u0103n b\u1EA3n \u0111\u1EC3 t\u1EA1o \u00F4 tr\u1ED1ng. \u0110\u00E1p \u00E1n s\u1EBD t\u1EF1 \u0111\u1ED9ng xu\u1EA5t hi\u1EC7n b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 b\u1EA1n nh\u1EADp."] })] })] })] })), _jsx(WfsfWordBankEditor, { mode: bankMode, onModeChange: handleBankModeChange, sharedBank: sharedBank, onSharedBankChange: setSharedBank, optionsBank: optionsBank, onOptionsBankChange: setOptionsBank, blankKeys: expectedBlankKeys, answers: answers, onAnswerChange: (key, value) => setAnswers((prev) => ({ ...prev, [key]: value })) }), expectedBlankKeys.length > 0 && bankMode !== 'WITH_OPTIONS' && (_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-sm", children: [_jsx(CardHeader, { className: "px-3 py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-teal-100", children: _jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-teal-600" }) }), _jsxs(CardTitle, { className: "text-base font-semibold text-gray-800", children: ["\u0110\u00E1p \u00E1n ", _jsxs("span", { className: "text-xs font-normal text-gray-500", children: ["(", expectedBlankKeys.length, " ch\u1ED7 tr\u1ED1ng)"] })] })] }) }), _jsxs(CardContent, { className: "px-4 pb-4", children: [_jsx("p", { className: "mb-3 text-xs text-gray-500", children: "M\u1ED7i ch\u1ED7 tr\u1ED1ng c\u00F3 th\u1EC3 c\u00F3 nhi\u1EC1u \u0111\u00E1p \u00E1n \u0111\u00FAng. H\u1ECDc vi\u00EAn \u0111\u00FAng n\u1EBFu kh\u1EDBp m\u1ED9t trong c\u00E1c \u0111\u00E1p \u00E1n." }), _jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4", children: expectedBlankKeys.map((key) => {
                                     const alts = answers[key]?.length ? answers[key] : [''];
                                     const isEmpty = !hasWfsfBlankAnswer(alts);
                                     return (_jsxs("div", { className: `rounded-xl border-2 p-3 transition-all duration-200 ${isEmpty
                                             ? 'border-gray-200 bg-white'
                                             : 'border-teal-200 bg-gradient-to-br from-teal-50 to-cyan-50 shadow-sm shadow-teal-100'}`, children: [_jsxs(Label, { className: "mb-1.5 flex items-center justify-between text-sm font-semibold text-gray-700", children: [_jsxs("span", { children: ["Ch\u1ED7 tr\u1ED1ng ", _jsx("code", { className: "rounded bg-gray-100 px-1 text-teal-700", children: `{${key}}` })] }), isEmpty && (_jsx("span", { className: "text-[10px] font-normal italic text-red-500", children: "*B\u1EAFt bu\u1ED9c" }))] }), _jsx("div", { className: "space-y-1.5", children: alts.map((alt, altIndex) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Input, { value: alt, onChange: (e) => updateAnswerAlt(key, altIndex, e.target.value), placeholder: altIndex === 0 ? 'Đáp án đúng...' : `Đáp án thay thế ${altIndex + 1}`, className: `border-gray-200 bg-white transition-all focus:border-teal-300 focus:ring-teal-100 ${!isEmpty ? 'border-teal-200' : ''}` }), alts.length > 1 && (_jsx("button", { type: "button", title: "X\u00F3a \u0111\u00E1p \u00E1n n\u00E0y", onClick: () => removeAnswerAlt(key, altIndex), className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-gray-400 hover:bg-rose-50 hover:text-rose-600", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, `${key}-${altIndex}`))) }), _jsxs("button", { type: "button", onClick: () => addAnswerAlt(key), className: "mt-2 inline-flex items-center gap-1 text-[11px] font-medium text-teal-700 hover:text-teal-800", children: [_jsx(Plus, { className: "h-3 w-3" }), "Th\u00EAm \u0111\u00E1p \u00E1n \u0111\u00FAng"] })] }, key));
-                                }) }), expectedBlankKeys.some(k => !hasWfsfBlankAnswer(answers[k])) && (_jsxs("div", { className: "mt-4 flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "C\u00F2n ch\u1ED7 tr\u1ED1ng ch\u01B0a c\u00F3 \u0111\u00E1p \u00E1n" }), _jsxs("p", { className: "mt-0.5 text-amber-700", children: ["Vui l\u00F2ng \u0111i\u1EC1n \u0111\u00E1p \u00E1n \u0111\u00FAng cho t\u1EA5t c\u1EA3 c\u00E1c \u00F4 \u0111\u01B0\u1EE3c \u0111\u00E1nh d\u1EA5u ", _jsx("span", { className: "text-red-500 font-medium", children: "*B\u1EAFt bu\u1ED9c" }), "."] })] })] }))] })] })), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-amber-100/50", children: [_jsx(CardHeader, { className: "px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 shadow-sm", children: _jsx(BookOpen, { className: "h-3.5 w-3.5 text-white" }) }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" }), _jsx("span", { className: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-600", children: "Kh\u00F4ng b\u1EAFt bu\u1ED9c" })] }), _jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: "Gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng \u2014 hi\u1EC3n th\u1ECB sau khi h\u1ECDc sinh ho\u00E0n th\u00E0nh c\u00E2u h\u1ECFi" })] })] }) }), _jsx(CardContent, { className: "px-4 pb-4", children: _jsx(Textarea, { value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "VD: C\u00E2u tr\u1EA3 l\u1EDDi \u0111\u00FAng l\u00E0... v\u00EC...", rows: 3, className: "min-h-[80px] resize-none border-gray-200 bg-white transition-all focus:border-amber-300 focus:ring-amber-200" }) })] })] }));
+                                }) }), expectedBlankKeys.some(k => !hasWfsfBlankAnswer(answers[k])) && (_jsxs("div", { className: "mt-4 flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-100", children: _jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }) }), _jsxs("div", { className: "text-sm text-amber-800", children: [_jsx("p", { className: "font-semibold", children: "C\u00F2n ch\u1ED7 tr\u1ED1ng ch\u01B0a c\u00F3 \u0111\u00E1p \u00E1n" }), _jsxs("p", { className: "mt-0.5 text-amber-700", children: ["Vui l\u00F2ng \u0111i\u1EC1n \u0111\u00E1p \u00E1n \u0111\u00FAng cho t\u1EA5t c\u1EA3 c\u00E1c \u00F4 \u0111\u01B0\u1EE3c \u0111\u00E1nh d\u1EA5u ", _jsx("span", { className: "text-red-500 font-medium", children: "*B\u1EAFt bu\u1ED9c" }), "."] })] })] }))] })] })), _jsx(CompactExplanationToggle, { value: explanation, onValueChange: setExplanation })] }));
 }

package/dist/components/questions/types/word-order-and-match-group/WordOrderAndMatchGroupClient.js

@@ -151,15 +151,15 @@ export function WordOrderAndMatchGroupClient({ questionData, isReviewMode = fals
                     const isPhraseCorrect = normalizeStr(userPhrase) === normalizeStr(item.orderedPhrase || '');
                     const isLabelCorrect = (userLabel || '').trim().toUpperCase() === (item.matchLabel || '').trim().toUpperCase();
                     const isItemAllCorrect = isPhraseCorrect && isLabelCorrect;
-                    return (_jsxs("div", { className: cn('rounded-2xl border transition-all p-4 sm:p-5 bg-white shadow-xs', isExample
+                    return (_jsxs("div", { className: cn('overflow-hidden rounded-xl border bg-white shadow-xs transition-all', isExample
                             ? 'border-amber-200 bg-amber-50/30'
                             : isReviewMode
                                 ? isItemAllCorrect
                                     ? 'border-emerald-200 bg-emerald-50/20'
                                     : 'border-rose-200 bg-rose-50/20'
-                                : 'border-gray-200 hover:border-indigo-200'), children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-2 border-b border-gray-100 pb-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn('inline-flex h-6 items-center rounded-md px-2 text-xs font-bold', isExample
+                                : 'border-gray-200 hover:border-indigo-200'), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-gray-100 px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn('inline-flex h-6 items-center rounded-md px-2 text-xs font-bold', isExample
                                                     ? 'bg-amber-100 text-amber-800'
-                                                    : 'bg-indigo-100 text-indigo-800'), children: isExample ? 'Ví dụ (Example)' : `Câu ${item.questionNumber || itemIdx + 1}` }), !isExample && typeof item.points === 'number' && (_jsxs("span", { className: "text-xs font-medium text-gray-500", children: ["(", item.points, " ", item.points > 1 ? 'điểm' : 'điểm', ")"] }))] }), isReviewMode && !isExample && (_jsx("div", { className: "flex items-center gap-1.5", children: isItemAllCorrect ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-bold text-emerald-700", children: [_jsx(Check, { className: "h-3.5 w-3.5" }), " \u0110\u00FAng"] })) : (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-bold text-rose-700", children: [_jsx(X, { className: "h-3.5 w-3.5" }), " Sai"] })) }))] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-12", children: [_jsxs("div", { className: "space-y-3 lg:col-span-8 xl:col-span-9", children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "1. S\u1EAFp x\u1EBFp c\u00E1c t\u1EEB th\u00E0nh c\u00E2u ho\u00E0n ch\u1EC9nh:" }), _jsxs("div", { className: cn('min-h-[52px] rounded-xl border-2 border-dashed p-2.5 transition-colors flex flex-wrap items-center gap-1.5', state.placedIndices.length > 0
+                                                    : 'bg-indigo-100 text-indigo-800'), children: isExample ? 'Ví dụ (Example)' : `Câu ${item.questionNumber || itemIdx + 1}` }), !isExample && typeof item.points === 'number' && (_jsxs("span", { className: "text-xs font-medium text-gray-500", children: ["(", item.points, " ", item.points > 1 ? 'điểm' : 'điểm', ")"] }))] }), isReviewMode && !isExample && (_jsx("div", { className: "flex items-center gap-1.5", children: isItemAllCorrect ? (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-bold text-emerald-700", children: [_jsx(Check, { className: "h-3.5 w-3.5" }), " \u0110\u00FAng"] })) : (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-bold text-rose-700", children: [_jsx(X, { className: "h-3.5 w-3.5" }), " Sai"] })) }))] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 p-3 lg:grid-cols-12", children: [_jsxs("div", { className: "space-y-3 lg:col-span-8 xl:col-span-9", children: [_jsx("div", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "1. S\u1EAFp x\u1EBFp c\u00E1c t\u1EEB th\u00E0nh c\u00E2u ho\u00E0n ch\u1EC9nh:" }), _jsxs("div", { className: cn('min-h-[52px] rounded-xl border-2 border-dashed p-2.5 transition-colors flex flex-wrap items-center gap-1.5', state.placedIndices.length > 0
                                                     ? 'border-indigo-300 bg-indigo-50/40'
                                                     : 'border-gray-300 bg-gray-50/60'), children: [state.placedIndices.length === 0 ? (_jsx("span", { className: "text-xs italic text-gray-400 select-none", children: "Nh\u1EA5n v\u00E0o c\u00E1c t\u1EEB b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 gh\u00E9p c\u00E2u..." })) : (state.placedIndices.map((wordIdx, orderIdx) => {
                                                         const word = item.scrambledWords[wordIdx];