@tinyweb_dev/oe-exam-sdk 1.0.8 → 1.0.10

package/dist/components/questions/types/cross-out-word-group/CrossOutWordGroupCreator.js

@@ -13,6 +13,8 @@ import { useDebouncedCallback } from '../../../../shared/lib/hooks';
 import { HelpCircle, Plus, Star, Trash2 } from 'lucide-react';
 import { CompactCreatorHeader, CompactExplanationToggle, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { CrossOutWordGroupClient } from './CrossOutWordGroupClient';
+import { createCrossOutAnswer, createEmptyCrossOutItem, DEFAULT_CROSS_OUT_INSTRUCTION, } from './map-cross-out-word-group-data';
+import { tokenizeCrossOutQuestion } from './tokenize';
 function parsePointsValue(raw, allowZero = false) {
     if (raw === '')
         return allowZero ? 0 : 1;
@@ -22,43 +24,9 @@ function parsePointsValue(raw, allowZero = false) {
     const min = allowZero ? 0 : 1;
     return Math.max(min, parsed);
 }
-const DEFAULT_INSTRUCTION = 'Cross out the extra or incorrect word. If the word is incorrect, write the correct word. If the line is correct, leave it blank.';
-function tokenize(sentence) {
-    return sentence.trim().split(/\s+/).filter(Boolean);
-}
-function createAnswer(type, crossOut = '', replaceWith = '', wordIndex) {
-    const parsedIndex = typeof wordIndex === 'number' && Number.isInteger(wordIndex) && wordIndex >= 0
-        ? wordIndex
-        : wordIndex === null
-            ? null
-            : undefined;
-    if (type === 'CROSS_OUT_AND_REPLACE') {
-        return {
-            type,
-            ...(parsedIndex !== undefined ? { wordIndex: parsedIndex } : {}),
-            crossOut,
-            replaceWith,
-        };
-    }
-    return {
-        type: 'CROSS_OUT',
-        ...(parsedIndex !== undefined ? { wordIndex: parsedIndex } : {}),
-        crossOut,
-    };
-}
-function createEmptyItem(questionNumber) {
-    return {
-        type: 'CROSS_OUT',
-        question: '',
-        correctAnswer: createAnswer('CROSS_OUT'),
-        isExample: false,
-        points: 1,
-        questionNumber,
-    };
-}
 function normalizeItems(rawItems) {
     if (!Array.isArray(rawItems) || rawItems.length === 0) {
-        return [createEmptyItem(1)];
+        return [createEmptyCrossOutItem(1)];
     }
     return rawItems.map((item, index) => {
         const type = item.type === 'CROSS_OUT_AND_REPLACE' ||
@@ -66,7 +34,7 @@ function normalizeItems(rawItems) {
             ? 'CROSS_OUT_AND_REPLACE'
             : 'CROSS_OUT';
         const rawIndex = item.correctAnswer?.wordIndex;
-        const correctAnswer = createAnswer(type, item.correctAnswer?.crossOut || '', item.correctAnswer?.replaceWith || '', rawIndex);
+        const correctAnswer = createCrossOutAnswer(type, item.correctAnswer?.crossOut || '', item.correctAnswer?.replaceWith || '', rawIndex);
         return {
             type,
             question: item.question || '',
@@ -81,7 +49,7 @@ function sumPoints(items) {
     return items.reduce((total, item) => item.isExample ? total : total + (typeof item.points === 'number' ? item.points : 1), 0);
 }
 export function CrossOutWordGroupCreator({ initialData, onChange, externalErrors, onUnsavedChangesChange, validationRef, }) {
-    const [instruction, setInstruction] = useState(initialData?.instruction || DEFAULT_INSTRUCTION);
+    const [instruction, setInstruction] = useState(initialData?.instruction || DEFAULT_CROSS_OUT_INSTRUCTION);
     const [items, setItems] = useState(() => normalizeItems(initialData?.items));
     const [explanation, setExplanation] = useState(initialData?.explanation || '');
     const [isClientMode, setIsClientMode] = useState(false);
@@ -121,7 +89,20 @@ export function CrossOutWordGroupCreator({ initialData, onChange, externalErrors
             if (!item.question.trim()) {
                 nextErrors.push(`Câu ${index + 1}: Nội dung câu không được để trống.`);
             }
+            const wordIndex = item.correctAnswer.wordIndex;
+            if (wordIndex === undefined) {
+                nextErrors.push(`Câu ${index + 1}: Cần chọn từ cần gạch hoặc để trống nếu câu đúng (wordIndex).`);
+            }
+            if (typeof wordIndex === 'number') {
+                const tokens = tokenizeCrossOutQuestion(item.question);
+                if (tokens[wordIndex] !== item.correctAnswer.crossOut) {
+                    nextErrors.push(`Câu ${index + 1}: Từ gạch phải khớp token tại wordIndex.`);
+                }
+            }
             if (item.type === 'CROSS_OUT_AND_REPLACE') {
+                if (typeof wordIndex !== 'number') {
+                    nextErrors.push(`Câu ${index + 1}: Cần chọn từ cần gạch (wordIndex).`);
+                }
                 if (!item.correctAnswer.crossOut.trim()) {
                     nextErrors.push(`Câu ${index + 1}: Cần chọn hoặc nhập từ cần gạch (crossOut).`);
                 }
@@ -160,7 +141,7 @@ export function CrossOutWordGroupCreator({ initialData, onChange, externalErrors
             next[index] = {
                 ...current,
                 type,
-                correctAnswer: createAnswer(type, current.correctAnswer.crossOut, current.correctAnswer.replaceWith || '', current.correctAnswer.wordIndex),
+                correctAnswer: createCrossOutAnswer(type, current.correctAnswer.crossOut, current.correctAnswer.replaceWith || '', current.correctAnswer.wordIndex),
             };
             return next;
         });
@@ -174,7 +155,7 @@ export function CrossOutWordGroupCreator({ initialData, onChange, externalErrors
             const type = current.type;
             next[index] = {
                 ...current,
-                correctAnswer: createAnswer(type, patch.crossOut !== undefined ? patch.crossOut : current.correctAnswer.crossOut, patch.replaceWith !== undefined
+                correctAnswer: createCrossOutAnswer(type, patch.crossOut !== undefined ? patch.crossOut : current.correctAnswer.crossOut, patch.replaceWith !== undefined
                     ? patch.replaceWith
                     : current.correctAnswer.replaceWith || '', patch.wordIndex !== undefined ? patch.wordIndex : current.correctAnswer.wordIndex),
             };
@@ -194,15 +175,14 @@ export function CrossOutWordGroupCreator({ initialData, onChange, externalErrors
             });
         }
         else {
-            const cleanWord = token.replace(/[^\p{L}\p{N}'-]/gu, '') || token;
             updateItemAnswer(itemIndex, {
                 wordIndex: tokenIndex,
-                crossOut: cleanWord,
+                crossOut: token,
             });
         }
     };
     const addItem = () => {
-        setItems((prev) => [...prev, createEmptyItem(prev.length + 1)]);
+        setItems((prev) => [...prev, createEmptyCrossOutItem(prev.length + 1)]);
     };
     const removeItem = (index) => {
         setItems((prev) => {
@@ -217,8 +197,8 @@ export function CrossOutWordGroupCreator({ initialData, onChange, externalErrors
     if (isClientMode) {
         return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(CrossOutWordGroupClient, { 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: "G\u1EA1ch t\u1EEB / S\u1EEDa t\u1EEB (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: DEFAULT_INSTRUCTION, 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 (", 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"] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [items.map((item, index) => {
-                                const tokens = tokenize(item.question);
+    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: "G\u1EA1ch t\u1EEB / S\u1EEDa t\u1EEB (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: DEFAULT_CROSS_OUT_INSTRUCTION, 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 (", 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"] })] }) }), _jsxs(CardContent, { className: "space-y-2.5 px-3 pb-3", children: [items.map((item, index) => {
+                                const tokens = tokenizeCrossOutQuestion(item.question);
                                 const selectedWordIndex = item.correctAnswer.wordIndex;
                                 return (_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 flex-wrap 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 ", index + 1] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "w-52", children: _jsxs(Select, { value: item.type, onValueChange: (value) => updateItemType(index, value), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Lo\u1EA1i c\u00E2u" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "CROSS_OUT", children: "Ch\u1EC9 g\u1EA1ch (CROSS_OUT)" }), _jsx(SelectItem, { value: "CROSS_OUT_AND_REPLACE", children: "G\u1EA1ch + thay (CROSS_OUT_AND_REPLACE)" })] })] }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: `example-${index}`, checked: item.isExample || false, onCheckedChange: (checked) => updateItem(index, {
                                                                         isExample: checked,

package/dist/components/questions/types/cross-out-word-group/index.d.ts

@@ -3,3 +3,4 @@ export * from './CrossOutWordGroupClient';
 export * from './transform';
 export * from './register';
 export * from './map-cross-out-word-group-data';
+export * from './tokenize';

package/dist/components/questions/types/cross-out-word-group/index.js

@@ -3,3 +3,4 @@ export * from './CrossOutWordGroupClient';
 export * from './transform';
 export * from './register';
 export * from './map-cross-out-word-group-data';
+export * from './tokenize';

package/dist/components/questions/types/cross-out-word-group/map-cross-out-word-group-data.js

@@ -14,20 +14,18 @@ function normalizeMode(type) {
 export function createCrossOutAnswer(type, crossOut = '', replaceWith = '', wordIndex) {
     const parsedIndex = typeof wordIndex === 'number' && Number.isInteger(wordIndex) && wordIndex >= 0
         ? wordIndex
-        : wordIndex === null
-            ? null
-            : undefined;
+        : null;
     if (type === 'CROSS_OUT_AND_REPLACE') {
         return {
             type,
-            ...(parsedIndex !== undefined ? { wordIndex: parsedIndex } : {}),
+            wordIndex: parsedIndex,
             crossOut,
             replaceWith,
         };
     }
     return {
         type: 'CROSS_OUT',
-        ...(parsedIndex !== undefined ? { wordIndex: parsedIndex } : {}),
+        wordIndex: parsedIndex,
         crossOut,
     };
 }
@@ -47,10 +45,12 @@ export function mapCrossOutWordGroupItem(item, index, fallbackAnswer) {
     const correctAnswerRaw = asRecord(record.correctAnswer);
     const answerObj = isRecord(correctAnswerRaw.answer)
         ? correctAnswerRaw.answer
-        : isRecord(fallbackAnswer)
-            ? fallbackAnswer
-            : {};
-    const type = normalizeMode(content.type || answerObj.type);
+        : 'crossOut' in correctAnswerRaw || 'wordIndex' in correctAnswerRaw
+            ? correctAnswerRaw
+            : isRecord(fallbackAnswer)
+                ? fallbackAnswer
+                : {};
+    const type = normalizeMode(content.type || record.type || answerObj.type);
     const isExample = record.isExample === true;
     const rawIndex = typeof answerObj.wordIndex === 'number'
         ? answerObj.wordIndex

package/dist/components/questions/types/cross-out-word-group/tokenize.d.ts

@@ -0,0 +1,2 @@
+export declare function normalizeCrossOutQuestionText(question: string): string;
+export declare function tokenizeCrossOutQuestion(question: string): string[];

package/dist/components/questions/types/cross-out-word-group/tokenize.js

@@ -0,0 +1,11 @@
+export function normalizeCrossOutQuestionText(question) {
+    return question
+        .replace(/\\n/g, ' ')
+        .replace(/\r\n|\r|\n/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+export function tokenizeCrossOutQuestion(question) {
+    const normalized = normalizeCrossOutQuestionText(question);
+    return normalized ? normalized.split(' ').filter(Boolean) : [];
+}

package/dist/components/questions/types/cross-out-word-group/transform.js

@@ -16,12 +16,10 @@ function normalizeAnswer(answer, fallbackType) {
     const rawIndex = answer?.wordIndex;
     const wordIndex = typeof rawIndex === 'number' && Number.isInteger(rawIndex) && rawIndex >= 0
         ? rawIndex
-        : rawIndex === null
-            ? null
-            : undefined;
+        : null;
     const result = {
         type,
-        ...(wordIndex !== undefined ? { wordIndex } : {}),
+        wordIndex,
         crossOut: typeof answer?.crossOut === 'string' ? answer.crossOut.trim() : '',
     };
     if (type === 'CROSS_OUT_AND_REPLACE') {

package/dist/components/questions/types/crossword-puzzle/CrosswordPuzzleClient.d.ts

@@ -5,7 +5,8 @@ interface CrosswordPuzzleClientProps {
     correctAnswer?: CrosswordPuzzleCorrectAnswer;
     isReviewMode?: boolean;
     userAnswers?: Record<string, string>;
+    questionNumber?: number;
     onAnswerChange?: (key: string, value: string) => void;
 }
-export declare function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode, userAnswers, }: CrosswordPuzzleClientProps): React.JSX.Element;
+export declare function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode, userAnswers, questionNumber, onAnswerChange, }: CrosswordPuzzleClientProps): React.JSX.Element;
 export {};

package/dist/components/questions/types/crossword-puzzle/CrosswordPuzzleClient.js

@@ -1,9 +1,11 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = false, userAnswers = {}, }) {
+export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = false, userAnswers = {}, questionNumber, onAnswerChange, }) {
     const rows = content?.gridSize?.rows || 12;
     const cols = content?.gridSize?.cols || 12;
+    const instructionText = (content?.instruction || content?.title || '').trim();
+    const displayNumber = questionNumber ?? 1;
     const acrossClues = useMemo(() => content?.clues?.across || [], [content?.clues?.across]);
     const downClues = useMemo(() => content?.clues?.down || [], [content?.clues?.down]);
     // Build grid cell mapping
@@ -30,14 +32,14 @@ export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = f
         }
         return { cellMap: cMap, clueNumberMap: numMap };
     }, [acrossClues, downClues]);
-    return (_jsxs("div", { className: "flex flex-col gap-3 p-3 bg-white rounded-xl border border-gray-200 shadow-sm", children: [content?.title && (_jsx("h3", { className: "text-lg font-bold text-gray-800 text-center", children: content.title })), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-6 items-start", children: [_jsxs("div", { className: "lg:col-span-5 flex flex-col gap-4", children: [_jsxs("div", { className: "rounded-lg border border-blue-200 bg-blue-50/50 p-4", children: [_jsxs("h4", { className: "font-bold text-blue-900 mb-2.5 flex items-center gap-2", children: [_jsx("span", { className: "px-2 py-0.5 rounded bg-blue-600 text-white text-xs font-semibold", children: "Across" }), _jsx("span", { children: "H\u00E0ng ngang" })] }), _jsx("div", { className: "flex flex-col gap-2 max-h-60 overflow-y-auto pr-1", children: acrossClues.map((c) => {
+    return (_jsxs("div", { className: "flex flex-col items-stretch gap-3 text-left", children: [_jsxs("p", { className: "w-full text-left text-sm font-semibold text-gray-800", children: [_jsxs("span", { className: "font-bold", children: [displayNumber, "."] }), instructionText ? ` ${instructionText}` : ''] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-6 items-start", children: [_jsxs("div", { className: "lg:col-span-5 flex flex-col gap-4", children: [_jsxs("div", { className: "rounded-lg border border-blue-200 bg-blue-50/50 p-4", children: [_jsxs("h4", { className: "font-bold text-blue-900 mb-2.5 flex items-center gap-2", children: [_jsx("span", { className: "px-2 py-0.5 rounded bg-blue-600 text-white text-xs font-semibold", children: "Across" }), _jsx("span", { children: "H\u00E0ng ngang" })] }), _jsx("div", { className: "flex flex-col gap-2 max-h-60 overflow-y-auto pr-1", children: acrossClues.map((c) => {
                                             const answer = correctAnswer?.answers?.[`across-${c.number}`];
                                             const userAns = userAnswers[`across-${c.number}`];
-                                            return (_jsxs("div", { className: "flex items-start gap-2 text-sm bg-white p-2 rounded border border-blue-100", children: [_jsxs("span", { className: "font-bold text-blue-700 min-w-[20px]", children: [c.number, "."] }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-gray-800", children: c.clue }), isReviewMode && answer && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: answer }), userAns && userAns !== answer && (_jsx("span", { className: "ml-2 line-through text-red-500 font-semibold", children: userAns }))] }))] }), _jsxs("span", { className: "text-xs text-gray-400", children: ["(", c.length, " ch\u1EEF)"] })] }, `across-${c.number}`));
+                                            return (_jsxs("div", { className: "flex items-start gap-2 text-sm bg-white p-2 rounded border border-blue-100", children: [_jsxs("span", { className: "font-bold text-blue-700 min-w-[20px]", children: [c.number, "."] }), _jsxs("div", { className: "flex-1", children: [_jsxs("span", { className: "text-gray-800", children: [c.clue, c.isExample && (_jsx("span", { className: "ml-1 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-700", children: "Example" }))] }), !isReviewMode && onAnswerChange && !c.isExample ? (_jsx("input", { type: "text", value: userAns || '', maxLength: c.length, onChange: (event) => onAnswerChange(`across-${c.number}`, event.target.value.toUpperCase()), placeholder: `${c.length} chữ`, className: "mt-1.5 w-full rounded border border-blue-200 px-2 py-1 text-sm font-semibold uppercase tracking-wider outline-none focus:border-blue-500" })) : null, isReviewMode && answer && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: answer }), userAns && userAns !== answer && (_jsx("span", { className: "ml-2 line-through text-red-500 font-semibold", children: userAns }))] }))] }), _jsxs("span", { className: "text-xs text-gray-400", children: ["(", c.length, " ch\u1EEF)"] })] }, `across-${c.number}`));
                                         }) })] }), _jsxs("div", { className: "rounded-lg border border-purple-200 bg-purple-50/50 p-4", children: [_jsxs("h4", { className: "font-bold text-purple-900 mb-2.5 flex items-center gap-2", children: [_jsx("span", { className: "px-2 py-0.5 rounded bg-purple-600 text-white text-xs font-semibold", children: "Down" }), _jsx("span", { children: "H\u00E0ng d\u1ECDc" })] }), _jsx("div", { className: "flex flex-col gap-2 max-h-60 overflow-y-auto pr-1", children: downClues.map((c) => {
                                             const answer = correctAnswer?.answers?.[`down-${c.number}`];
                                             const userAns = userAnswers[`down-${c.number}`];
-                                            return (_jsxs("div", { className: "flex items-start gap-2 text-sm bg-white p-2 rounded border border-purple-100", children: [_jsxs("span", { className: "font-bold text-purple-700 min-w-[20px]", children: [c.number, "."] }), _jsxs("div", { className: "flex-1", children: [_jsx("span", { className: "text-gray-800", children: c.clue }), isReviewMode && answer && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: answer }), userAns && userAns !== answer && (_jsx("span", { className: "ml-2 line-through text-red-500 font-semibold", children: userAns }))] }))] }), _jsxs("span", { className: "text-xs text-gray-400", children: ["(", c.length, " ch\u1EEF)"] })] }, `down-${c.number}`));
+                                            return (_jsxs("div", { className: "flex items-start gap-2 text-sm bg-white p-2 rounded border border-purple-100", children: [_jsxs("span", { className: "font-bold text-purple-700 min-w-[20px]", children: [c.number, "."] }), _jsxs("div", { className: "flex-1", children: [_jsxs("span", { className: "text-gray-800", children: [c.clue, c.isExample && (_jsx("span", { className: "ml-1 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-700", children: "Example" }))] }), !isReviewMode && onAnswerChange && !c.isExample ? (_jsx("input", { type: "text", value: userAns || '', maxLength: c.length, onChange: (event) => onAnswerChange(`down-${c.number}`, event.target.value.toUpperCase()), placeholder: `${c.length} chữ`, className: "mt-1.5 w-full rounded border border-purple-200 px-2 py-1 text-sm font-semibold uppercase tracking-wider outline-none focus:border-purple-500" })) : null, isReviewMode && answer && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: answer }), userAns && userAns !== answer && (_jsx("span", { className: "ml-2 line-through text-red-500 font-semibold", children: userAns }))] }))] }), _jsxs("span", { className: "text-xs text-gray-400", children: ["(", c.length, " ch\u1EEF)"] })] }, `down-${c.number}`));
                                         }) })] })] }), _jsx("div", { className: "lg:col-span-7 flex justify-center overflow-x-auto p-4 bg-gray-50 rounded-xl border border-gray-200", children: _jsx("div", { className: "inline-grid gap-1", style: {
                                 gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
                             }, children: Array.from({ length: rows }).map((_, rIdx) => {
@@ -66,8 +68,18 @@ export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = f
                                             previewLetter = word[offset] || '';
                                         }
                                     }
-                                    else if (userAnswers?.[key]) {
-                                        previewLetter = userAnswers[key];
+                                    else {
+                                        if (cellInfo.across) {
+                                            const word = userAnswers[`across-${cellInfo.across.number}`] || '';
+                                            previewLetter = word[c - cellInfo.across.startCol] || '';
+                                        }
+                                        if (!previewLetter && cellInfo.down) {
+                                            const word = userAnswers[`down-${cellInfo.down.number}`] || '';
+                                            previewLetter = word[r - cellInfo.down.startRow] || '';
+                                        }
+                                        if (!previewLetter) {
+                                            previewLetter = userAnswers[key] || '';
+                                        }
                                     }
                                     const cellBg = isMarked ? 'bg-gray-400 border-gray-400 shadow-sm ring-1 ring-gray-400/50' : 'bg-gray-100 border-gray-300';
                                     let textColor = isExample
@@ -80,5 +92,5 @@ export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = f
                                     }
                                     return (_jsxs("div", { className: `relative flex items-center justify-center rounded border-2 font-bold shadow-sm h-8 w-8 sm:h-9 sm:w-9 md:h-10 md:w-10 text-sm sm:text-base md:text-lg ${cellBg} ${textColor}`, children: [clueNum && (_jsx("span", { className: "absolute top-0.5 left-1 text-[9px] font-bold text-gray-500 leading-none", children: clueNum })), _jsx("span", { children: previewLetter })] }, key));
                                 });
-                            }) }) })] })] }));
+                            }) }) })] }), (content?.type === 'HIDDEN_WORD' || content?.markedColumn) && (_jsxs("div", { className: "rounded-lg border border-amber-200 bg-amber-50 p-3", children: [_jsx("label", { className: "block text-sm font-semibold text-amber-900 mb-1", children: "What's the hidden word?" }), !isReviewMode && onAnswerChange ? (_jsx("input", { type: "text", value: userAnswers['hidden-word'] || '', onChange: (event) => onAnswerChange('hidden-word', event.target.value.toUpperCase()), placeholder: "Hidden word", className: "w-full rounded border border-amber-300 px-3 py-1.5 text-sm font-semibold uppercase tracking-wider outline-none focus:border-amber-500" })) : (_jsxs("div", { className: "text-sm", children: [userAnswers['hidden-word'] && (_jsx("span", { className: "font-semibold text-gray-800", children: userAnswers['hidden-word'] })), isReviewMode && correctAnswer?.answers?.['hidden-word'] && (_jsxs("div", { className: "text-xs mt-1", children: [_jsx("span", { className: "text-gray-500", children: "\u0110\u00E1p \u00E1n: " }), _jsx("span", { className: "font-bold text-green-700", children: correctAnswer.answers['hidden-word'] })] }))] }))] }))] }));
 }

package/dist/components/questions/types/crossword-puzzle/CrosswordPuzzleCreator.js

@@ -1,10 +1,25 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { Plus, Trash2, Edit2, Check, AlertCircle, Grid3X3 } from 'lucide-react';
 import { CompactCreatorHeader, CompactFieldCard, CompactPreviewBanner, } from '../../_shared/components/compact';
 import { CrosswordPuzzleClient } from './CrosswordPuzzleClient';
 export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChangesChange, }) {
+    const [instruction, setInstruction] = useState(() => {
+        return initialData?.content?.instruction || initialData?.instruction || initialData?.answer?.instruction || '';
+    });
+    const [puzzleType, setPuzzleType] = useState(() => {
+        return initialData?.content?.type === 'HIDDEN_WORD' || initialData?.answer?.type === 'HIDDEN_WORD'
+            ? 'HIDDEN_WORD'
+            : 'STANDARD';
+    });
+    const [markedColumn, setMarkedColumn] = useState(() => {
+        return Number(initialData?.content?.markedColumn || initialData?.answer?.markedColumn || 1);
+    });
+    const [hiddenWord, setHiddenWord] = useState(() => {
+        const answers = initialData?.answer?.answers || initialData?.correctAnswer?.answers || {};
+        return answers['hidden-word'] || initialData?.answer?.hiddenWord || '';
+    });
     const [title, setTitle] = useState(() => {
         return initialData?.content?.title || 'Nationalities Crossword';
     });
@@ -39,6 +54,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
                 length: a.length,
                 direction: 'across',
                 answer: answers[`across-${a.number}`] || '',
+                isExample: a.isExample === true,
             });
         }
         for (const d of down) {
@@ -51,6 +67,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
                 length: d.length,
                 direction: 'down',
                 answer: answers[`down-${d.number}`] || '',
+                isExample: d.isExample === true,
             });
         }
         return items;
@@ -62,6 +79,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
     const [formAnswer, setFormAnswer] = useState('');
     const [formStartRow, setFormStartRow] = useState(1);
     const [formStartCol, setFormStartCol] = useState(1);
+    const [formIsExample, setFormIsExample] = useState(false);
     const { cellMap, clueNumberMap, conflicts } = useMemo(() => {
         const cMap = new Map();
         const numMap = new Map();
@@ -89,9 +107,17 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
         }
         return { cellMap: cMap, clueNumberMap: numMap, conflicts: conflictList };
     }, [clues]);
+    const onChangeRef = useRef(onChange);
+    const onUnsavedChangesChangeRef = useRef(onUnsavedChangesChange);
+    const previousPayloadRef = useRef('');
+    const skipUnsavedRef = useRef(true);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    useEffect(() => {
+        onUnsavedChangesChangeRef.current = onUnsavedChangesChange;
+    }, [onUnsavedChangesChange]);
     useEffect(() => {
-        if (!onChange)
-            return;
         const across = clues
             .filter((c) => c.direction === 'across')
             .map((c) => ({
@@ -100,6 +126,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
             startRow: c.startRow,
             startCol: c.startCol,
             length: c.length || c.answer.trim().length,
+            ...(c.isExample ? { isExample: true } : {}),
         }));
         const down = clues
             .filter((c) => c.direction === 'down')
@@ -109,6 +136,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
             startRow: c.startRow,
             startCol: c.startCol,
             length: c.length || c.answer.trim().length,
+            ...(c.isExample ? { isExample: true } : {}),
         }));
         const answers = {};
         for (const c of clues) {
@@ -116,20 +144,37 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
                 answers[`${c.direction}-${c.number}`] = c.answer.trim().toUpperCase();
             }
         }
-        onChange({
+        if (puzzleType === 'HIDDEN_WORD' && hiddenWord.trim()) {
+            answers['hidden-word'] = hiddenWord.trim().toUpperCase();
+        }
+        const payload = {
             content: {
+                type: puzzleType,
                 title,
+                instruction,
                 gridSize: { rows, cols },
+                ...(puzzleType === 'HIDDEN_WORD' ? { markedColumn } : {}),
                 clues: { across, down },
             },
             answer: {
                 answers,
                 caseSensitive,
+                hiddenWord: puzzleType === 'HIDDEN_WORD' ? hiddenWord.trim().toUpperCase() : '',
             },
             points,
-        });
-        onUnsavedChangesChange?.(true);
-    }, [title, rows, cols, clues, caseSensitive, points, onChange, onUnsavedChangesChange]);
+        };
+        const serialized = JSON.stringify(payload);
+        if (serialized === previousPayloadRef.current) {
+            return;
+        }
+        previousPayloadRef.current = serialized;
+        onChangeRef.current?.(payload);
+        if (skipUnsavedRef.current) {
+            skipUnsavedRef.current = false;
+            return;
+        }
+        onUnsavedChangesChangeRef.current?.(true);
+    }, [instruction, puzzleType, markedColumn, hiddenWord, title, rows, cols, clues, caseSensitive, points]);
     const handleSaveClue = (e) => {
         e.preventDefault();
         if (!formClue.trim() || !formAnswer.trim())
@@ -147,6 +192,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
                     startRow: formStartRow,
                     startCol: formStartCol,
                     length,
+                    isExample: formIsExample,
                 }
                 : c));
             setEditingClueId(null);
@@ -161,11 +207,13 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
                 startRow: formStartRow,
                 startCol: formStartCol,
                 length,
+                isExample: formIsExample,
             };
             setClues((prev) => [...prev, newClue]);
         }
         setFormClue('');
         setFormAnswer('');
+        setFormIsExample(false);
         setFormNumber((prev) => prev + 1);
     };
     const handleEditClue = (c) => {
@@ -176,6 +224,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
         setFormAnswer(c.answer);
         setFormStartRow(c.startRow);
         setFormStartCol(c.startCol);
+        setFormIsExample(c.isExample === true);
     };
     const handleDeleteClue = (id) => {
         setClues((prev) => prev.filter((c) => c.id !== id));
@@ -194,6 +243,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
             startRow: c.startRow,
             startCol: c.startCol,
             length: c.length || c.answer.trim().length,
+            ...(c.isExample ? { isExample: true } : {}),
         }));
         const down = clues
             .filter((c) => c.direction === 'down')
@@ -203,6 +253,7 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
             startRow: c.startRow,
             startCol: c.startCol,
             length: c.length || c.answer.trim().length,
+            ...(c.isExample ? { isExample: true } : {}),
         }));
         const answers = {};
         for (const c of clues) {
@@ -210,20 +261,26 @@ export function CrosswordPuzzleCreator({ initialData, onChange, onUnsavedChanges
                 answers[`${c.direction}-${c.number}`] = c.answer.trim().toUpperCase();
             }
         }
+        if (puzzleType === 'HIDDEN_WORD' && hiddenWord.trim()) {
+            answers['hidden-word'] = hiddenWord.trim().toUpperCase();
+        }
         return (_jsxs("div", { className: "space-y-4", children: [_jsx(CompactPreviewBanner, { onBack: () => setIsClientMode(false) }), _jsx(CrosswordPuzzleClient, { content: {
+                        type: puzzleType,
                         title,
+                        instruction,
                         gridSize: { rows, cols },
+                        ...(puzzleType === 'HIDDEN_WORD' ? { markedColumn } : {}),
                         clues: { across, down },
-                    }, correctAnswer: { answers, caseSensitive }, isReviewMode: true, userAnswers: answers })] }));
+                    }, correctAnswer: { answers, caseSensitive }, isReviewMode: true, questionNumber: initialData?.questionNumber ?? 1 })] }));
     }
     return (_jsx("div", { className: "space-y-3", children: _jsx(CompactFieldCard, { header: _jsx(CompactCreatorHeader, { icon: _jsx(Grid3X3, { className: "h-3.5 w-3.5" }), title: "\u00D4 ch\u1EEF (Crossword)", points: {
                     value: points,
                     onValueChange: setPoints,
-                }, preview: { onClick: () => setIsClientMode(true) } }), children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 bg-gray-50 rounded-lg border border-gray-200", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "Ti\u00EAu \u0111\u1EC1 \u00F4 ch\u1EEF" }), _jsx("input", { type: "text", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "vd: Nationalities Crossword", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "K\u00EDch th\u01B0\u1EDBc l\u01B0\u1EDBi (H\u00E0ng x C\u1ED9t)" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "number", min: 3, max: 30, value: rows, onChange: (e) => setRows(Math.max(3, parseInt(e.target.value) || 12)), className: "w-20 px-2 py-1.5 text-sm border border-gray-300 rounded outline-none" }), _jsx("span", { className: "text-gray-500 font-bold", children: "x" }), _jsx("input", { type: "number", min: 3, max: 30, value: cols, onChange: (e) => setCols(Math.max(3, parseInt(e.target.value) || 12)), className: "w-20 px-2 py-1.5 text-sm border border-gray-300 rounded outline-none" })] })] }), _jsx("div", { className: "flex items-center pt-5", children: _jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-700 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: caseSensitive, onChange: (e) => setCaseSensitive(e.target.checked), className: "rounded text-blue-600 focus:ring-blue-500 h-4 w-4" }), _jsx("span", { children: "Ph\u00E2n bi\u1EC7t hoa/th\u01B0\u1EDDng" })] }) })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-6", children: [_jsxs("div", { className: "lg:col-span-5 flex flex-col gap-4", children: [_jsxs("form", { onSubmit: handleSaveClue, className: "p-4 rounded-xl border border-blue-200 bg-blue-50/40 flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-bold text-blue-900", children: editingClueId ? 'Chỉnh sửa gợi ý' : 'Thêm gợi ý mới' }), editingClueId && (_jsx("button", { type: "button", onClick: () => {
+                }, preview: { onClick: () => setIsClientMode(true) } }), children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-3 bg-gray-50 rounded-lg border border-gray-200", children: [_jsxs("div", { className: "sm:col-span-2 md:col-span-3", children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "H\u01B0\u1EDBng d\u1EABn b\u00E0i l\u00E0m" }), _jsx("input", { type: "text", value: instruction, onChange: (e) => setInstruction(e.target.value), placeholder: "vd: Read the information and do the crossword. What's the hidden word?", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "D\u1EA1ng \u00F4 ch\u1EEF" }), _jsxs("select", { value: puzzleType, onChange: (e) => setPuzzleType(e.target.value), className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none bg-white", children: [_jsx("option", { value: "STANDARD", children: "STANDARD" }), _jsx("option", { value: "HIDDEN_WORD", children: "HIDDEN_WORD" })] })] }), puzzleType === 'HIDDEN_WORD' && (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "C\u1ED9t t\u1EEB kh\u00F3a (markedColumn)" }), _jsx("input", { type: "number", min: 1, max: cols, value: markedColumn, onChange: (e) => setMarkedColumn(Math.max(1, parseInt(e.target.value) || 1)), className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "T\u1EEB kh\u00F3a b\u00ED \u1EA9n (hidden-word)" }), _jsx("input", { type: "text", value: hiddenWord, onChange: (e) => setHiddenWord(e.target.value.toUpperCase()), placeholder: "vd: BRITAIN", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none uppercase font-semibold" })] })] })), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "Ti\u00EAu \u0111\u1EC1 \u00F4 ch\u1EEF" }), _jsx("input", { type: "text", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "vd: Nationalities Crossword", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:ring-1 focus:ring-blue-500 outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-xs font-bold text-gray-700 mb-1", children: "K\u00EDch th\u01B0\u1EDBc l\u01B0\u1EDBi (H\u00E0ng x C\u1ED9t)" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "number", min: 3, max: 30, value: rows, onChange: (e) => setRows(Math.max(3, parseInt(e.target.value) || 12)), className: "w-20 px-2 py-1.5 text-sm border border-gray-300 rounded outline-none" }), _jsx("span", { className: "text-gray-500 font-bold", children: "x" }), _jsx("input", { type: "number", min: 3, max: 30, value: cols, onChange: (e) => setCols(Math.max(3, parseInt(e.target.value) || 12)), className: "w-20 px-2 py-1.5 text-sm border border-gray-300 rounded outline-none" })] })] }), _jsx("div", { className: "flex items-center pt-5", children: _jsxs("label", { className: "flex items-center gap-2 text-sm text-gray-700 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: caseSensitive, onChange: (e) => setCaseSensitive(e.target.checked), className: "rounded text-blue-600 focus:ring-blue-500 h-4 w-4" }), _jsx("span", { children: "Ph\u00E2n bi\u1EC7t hoa/th\u01B0\u1EDDng" })] }) })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-6", children: [_jsxs("div", { className: "lg:col-span-5 flex flex-col gap-4", children: [_jsxs("form", { onSubmit: handleSaveClue, className: "p-4 rounded-xl border border-blue-200 bg-blue-50/40 flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm font-bold text-blue-900", children: editingClueId ? 'Chỉnh sửa gợi ý' : 'Thêm gợi ý mới' }), editingClueId && (_jsx("button", { type: "button", onClick: () => {
                                                             setEditingClueId(null);
                                                             setFormClue('');
                                                             setFormAnswer('');
-                                                        }, className: "text-xs text-gray-500 hover:text-gray-700 underline", children: "H\u1EE7y ch\u1EC9nh s\u1EEDa" }))] }), _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "S\u1ED1 Clue" }), _jsx("input", { type: "number", min: 1, value: formNumber, onChange: (e) => setFormNumber(parseInt(e.target.value) || 1), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "H\u01B0\u1EDBng" }), _jsxs("select", { value: formDirection, onChange: (e) => setFormDirection(e.target.value), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded outline-none bg-white", children: [_jsx("option", { value: "across", children: "Across (Ngang)" }), _jsx("option", { value: "down", children: "Down (D\u1ECDc)" })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "To\u1EA1 \u0111\u1ED9 (R, C)" }), _jsxs("div", { className: "flex gap-1", children: [_jsx("input", { type: "number", min: 1, max: rows, value: formStartRow, onChange: (e) => setFormStartRow(parseInt(e.target.value) || 1), placeholder: "R", className: "w-1/2 px-1 py-1 text-xs border border-gray-300 rounded text-center" }), _jsx("input", { type: "number", min: 1, max: cols, value: formStartCol, onChange: (e) => setFormStartCol(parseInt(e.target.value) || 1), placeholder: "C", className: "w-1/2 px-1 py-1 text-xs border border-gray-300 rounded text-center" })] })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "C\u00E2u g\u1EE3i \u00FD (Clue)" }), _jsx("input", { type: "text", value: formClue, onChange: (e) => setFormClue(e.target.value), placeholder: "vd: Spain, Capital of France...", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none", required: true })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "T\u1EEB \u0111\u00E1p \u00E1n (Answer Word)" }), _jsx("input", { type: "text", value: formAnswer, onChange: (e) => setFormAnswer(e.target.value), placeholder: "vd: SPANISH", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none uppercase font-semibold", required: true })] }), _jsxs("button", { type: "submit", className: "mt-1 flex items-center justify-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm font-semibold transition", children: [editingClueId ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: editingClueId ? 'Cập nhật gợi ý' : 'Thêm vào danh sách' })] })] }), _jsxs("div", { className: "flex flex-col gap-2 max-h-[420px] overflow-y-auto pr-1", children: [_jsxs("span", { className: "text-xs font-bold text-gray-600", children: ["Danh s\u00E1ch (", clues.length, " t\u1EEB):"] }), clues.length === 0 && (_jsx("p", { className: "text-xs text-gray-400 italic", children: "Ch\u01B0a c\u00F3 g\u1EE3i \u00FD n\u00E0o. H\u00E3y th\u00EAm g\u1EE3i \u00FD \u1EDF tr\u00EAn." })), clues.map((c) => (_jsxs("div", { className: "flex items-center justify-between p-2.5 bg-white rounded-lg border border-gray-200 hover:border-blue-300 transition text-sm shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [_jsx("span", { className: `flex items-center justify-center h-6 w-6 rounded text-xs font-bold text-white ${c.direction === 'across' ? 'bg-blue-600' : 'bg-purple-600'}`, children: c.number }), _jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [_jsx("span", { className: "font-semibold text-gray-800 truncate", children: c.clue }), _jsxs("span", { className: "text-xs text-gray-500 flex items-center gap-2", children: [_jsx("span", { className: "font-bold text-blue-700", children: c.answer }), _jsxs("span", { children: ["(", c.length, " ch\u1EEF)"] }), _jsxs("span", { children: ["[", c.direction === 'across' ? '→ Ngang' : '↓ Dọc', " (", c.startRow, ",", c.startCol, ")]"] })] })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => handleEditClue(c), className: "p-1 text-gray-500 hover:text-blue-600 rounded", title: "S\u1EEDa", children: _jsx(Edit2, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => handleDeleteClue(c.id), className: "p-1 text-gray-500 hover:text-red-600 rounded", title: "X\u00F3a", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }, c.id)))] })] }), _jsxs("div", { className: "lg:col-span-7 flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-bold text-gray-700", children: "Ma tr\u1EADn l\u01B0\u1EDBi \u00F4 ch\u1EEF tr\u1EF1c quan:" }), conflicts.length > 0 && (_jsxs("span", { className: "flex items-center gap-1 text-xs font-bold text-red-600 bg-red-50 px-2 py-0.5 rounded border border-red-200", children: [_jsx(AlertCircle, { className: "h-3.5 w-3.5" }), _jsxs("span", { children: ["C\u00F3 ", conflicts.length, " \u00F4 b\u1ECB xung \u0111\u1ED9t ch\u1EEF c\u00E1i!"] })] }))] }), _jsx("div", { className: "flex justify-center overflow-x-auto p-4 bg-gray-100 rounded-xl border border-gray-300 min-h-[380px]", children: _jsx("div", { className: "inline-grid gap-1", style: {
+                                                        }, className: "text-xs text-gray-500 hover:text-gray-700 underline", children: "H\u1EE7y ch\u1EC9nh s\u1EEDa" }))] }), _jsxs("div", { className: "grid grid-cols-3 gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "S\u1ED1 Clue" }), _jsx("input", { type: "number", min: 1, value: formNumber, onChange: (e) => setFormNumber(parseInt(e.target.value) || 1), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded outline-none" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "H\u01B0\u1EDBng" }), _jsxs("select", { value: formDirection, onChange: (e) => setFormDirection(e.target.value), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded outline-none bg-white", children: [_jsx("option", { value: "across", children: "Across (Ngang)" }), _jsx("option", { value: "down", children: "Down (D\u1ECDc)" })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "To\u1EA1 \u0111\u1ED9 (R, C)" }), _jsxs("div", { className: "flex gap-1", children: [_jsx("input", { type: "number", min: 1, max: rows, value: formStartRow, onChange: (e) => setFormStartRow(parseInt(e.target.value) || 1), placeholder: "R", className: "w-1/2 px-1 py-1 text-xs border border-gray-300 rounded text-center" }), _jsx("input", { type: "number", min: 1, max: cols, value: formStartCol, onChange: (e) => setFormStartCol(parseInt(e.target.value) || 1), placeholder: "C", className: "w-1/2 px-1 py-1 text-xs border border-gray-300 rounded text-center" })] })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "C\u00E2u g\u1EE3i \u00FD (Clue)" }), _jsx("input", { type: "text", value: formClue, onChange: (e) => setFormClue(e.target.value), placeholder: "vd: Spain, Capital of France...", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none", required: true })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-[11px] font-semibold text-gray-600 mb-0.5", children: "T\u1EEB \u0111\u00E1p \u00E1n (Answer Word)" }), _jsx("input", { type: "text", value: formAnswer, onChange: (e) => setFormAnswer(e.target.value), placeholder: "vd: SPANISH", className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded outline-none uppercase font-semibold", required: true })] }), _jsxs("label", { className: "flex items-center gap-2 text-xs text-gray-700 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: formIsExample, onChange: (e) => setFormIsExample(e.target.checked), className: "rounded text-amber-600 focus:ring-amber-500 h-4 w-4" }), _jsx("span", { children: "Example (kh\u00F4ng t\u00EDnh \u0111i\u1EC3m)" })] }), _jsxs("button", { type: "submit", className: "mt-1 flex items-center justify-center gap-1.5 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm font-semibold transition", children: [editingClueId ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: editingClueId ? 'Cập nhật gợi ý' : 'Thêm vào danh sách' })] })] }), _jsxs("div", { className: "flex flex-col gap-2 max-h-[420px] overflow-y-auto pr-1", children: [_jsxs("span", { className: "text-xs font-bold text-gray-600", children: ["Danh s\u00E1ch (", clues.length, " t\u1EEB):"] }), clues.length === 0 && (_jsx("p", { className: "text-xs text-gray-400 italic", children: "Ch\u01B0a c\u00F3 g\u1EE3i \u00FD n\u00E0o. H\u00E3y th\u00EAm g\u1EE3i \u00FD \u1EDF tr\u00EAn." })), clues.map((c) => (_jsxs("div", { className: "flex items-center justify-between p-2.5 bg-white rounded-lg border border-gray-200 hover:border-blue-300 transition text-sm shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [_jsx("span", { className: `flex items-center justify-center h-6 w-6 rounded text-xs font-bold text-white ${c.direction === 'across' ? 'bg-blue-600' : 'bg-purple-600'}`, children: c.number }), _jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [_jsxs("span", { className: "font-semibold text-gray-800 truncate", children: [c.clue, c.isExample && (_jsx("span", { className: "ml-1 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] font-bold text-amber-700", children: "Example" }))] }), _jsxs("span", { className: "text-xs text-gray-500 flex items-center gap-2", children: [_jsx("span", { className: "font-bold text-blue-700", children: c.answer }), _jsxs("span", { children: ["(", c.length, " ch\u1EEF)"] }), _jsxs("span", { children: ["[", c.direction === 'across' ? '→ Ngang' : '↓ Dọc', " (", c.startRow, ",", c.startCol, ")]"] })] })] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => handleEditClue(c), className: "p-1 text-gray-500 hover:text-blue-600 rounded", title: "S\u1EEDa", children: _jsx(Edit2, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => handleDeleteClue(c.id), className: "p-1 text-gray-500 hover:text-red-600 rounded", title: "X\u00F3a", children: _jsx(Trash2, { className: "h-4 w-4" }) })] })] }, c.id)))] })] }), _jsxs("div", { className: "lg:col-span-7 flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-bold text-gray-700", children: "Ma tr\u1EADn l\u01B0\u1EDBi \u00F4 ch\u1EEF tr\u1EF1c quan:" }), conflicts.length > 0 && (_jsxs("span", { className: "flex items-center gap-1 text-xs font-bold text-red-600 bg-red-50 px-2 py-0.5 rounded border border-red-200", children: [_jsx(AlertCircle, { className: "h-3.5 w-3.5" }), _jsxs("span", { children: ["C\u00F3 ", conflicts.length, " \u00F4 b\u1ECB xung \u0111\u1ED9t ch\u1EEF c\u00E1i!"] })] }))] }), _jsx("div", { className: "flex justify-center overflow-x-auto p-4 bg-gray-100 rounded-xl border border-gray-300 min-h-[380px]", children: _jsx("div", { className: "inline-grid gap-1", style: {
                                                 gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
                                             }, children: Array.from({ length: rows }).map((_, rIdx) => {
                                                 const r = rIdx + 1;