@tinyweb_dev/oe-exam-sdk 0.2.0 → 0.2.2

package/dist/components/exams/take/utils/question-transformers.d.ts

@@ -5,7 +5,7 @@
  * Each transformer handles specific question type data structure.
  */
 import type { FillBlankQuestion, ChooseBestAnswerQuestion, PictureChooseSubQuestion, PictureFillBlankSubQuestion, ReadingPassageQuestion, LabelThePictureLabel, FillWordHintSubQuestion, ColoringHintItem, ColoringRegion } from '../types';
-export type QuestionType = 'FILL_IN_BLANK' | 'WRITE_CORRECT_VERB_FORM' | 'CHOOSE_THE_CORRECT_ANSWER' | 'CHOOSE_THE_CORRECT_ANSWER_GROUP' | 'CHOOSE_CORRECT_ADJECTIVE' | 'WRITE_A_SHORT_LETTER' | 'READ_AND_COLOR_OBJECTS' | 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER' | 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | 'LOOK_PICTURE_FILL_WORD_HINT' | 'FILL_MISSING_WORDS_IN_GRID' | 'IMAGE_OBJECT_MATCHING' | 'ANSWER_THE_QUESTION' | 'ANSWER_THE_QUESTION_GROUP' | 'TRUE_FALSE' | 'TRUE_FALSE_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'CROSSWORD_PUZZLE' | 'WORD_ORDER_AND_MATCH_GROUP' | 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE' | 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP' | 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE' | 'LISTEN_AND_SPEAK_ANSWER' | 'LISTEN_AND_SPEAK_COMPARE_IMAGES' | 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES' | 'LISTEN_AND_SPEAK_IMAGE_GROUP' | 'LISTEN_AND_SPEAK_ODD_ONE_OUT' | 'LISTEN_AND_SPEAK_QUESTION_LIST' | 'LISTEN_AND_SPEAK_INFO_EXCHANGE' | 'READ_DISPLAYED_CONTENT' | 'SPEAKING_DESCRIBE_IMAGE' | 'SPONTANEOUS_QA' | 'SPONTANEOUS_QA_GROUP' | 'SPEAKING_CONVERSATION' | 'GN_SPEAKING_INTERVIEW' | 'SPEAKING_CUE_CARD';
+export type QuestionType = 'FILL_IN_BLANK' | 'WRITE_CORRECT_VERB_FORM' | 'CHOOSE_THE_CORRECT_ANSWER' | 'CHOOSE_THE_CORRECT_ANSWER_GROUP' | 'CHOOSE_CORRECT_ADJECTIVE' | 'WRITE_A_SHORT_LETTER' | 'READ_AND_COLOR_OBJECTS' | 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER' | 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER' | 'READ_PASSAGE_AND_ANSWER_QUESTIONS' | 'LABEL_THE_PICTURE' | 'LOOK_PICTURE_FILL_WORD_HINT' | 'FILL_MISSING_WORDS_IN_GRID' | 'IMAGE_OBJECT_MATCHING' | 'ANSWER_THE_QUESTION' | 'ANSWER_THE_QUESTION_GROUP' | 'TRUE_FALSE' | 'TRUE_FALSE_GROUP' | 'CROSS_OUT_WORD_GROUP' | 'WORD_ORDERING' | 'WORD_FILL_PARAGRAPH' | 'MATCH_BY_WRITING_ANSWER' | 'WRITE_SENTENCES' | 'WORD_FILL_STRUCTURED_FORM' | 'CROSSWORD_PUZZLE' | 'FIND_WORDS_IN_MATRIX' | 'WORD_ORDER_AND_MATCH_GROUP' | 'LISTEN_AND_CHOOSE_OBJECTS_IN_SCENE' | 'LISTEN_AND_CHOOSE_FROM_ANSWER_GROUP' | 'LISTEN_AND_DRAG_OBJECTS_INTO_SCENE' | 'LISTEN_AND_SPEAK_ANSWER' | 'LISTEN_AND_SPEAK_COMPARE_IMAGES' | 'LISTEN_AND_SPEAK_WITH_STORY_IMAGES' | 'LISTEN_AND_SPEAK_IMAGE_GROUP' | 'LISTEN_AND_SPEAK_ODD_ONE_OUT' | 'LISTEN_AND_SPEAK_QUESTION_LIST' | 'LISTEN_AND_SPEAK_INFO_EXCHANGE' | 'READ_DISPLAYED_CONTENT' | 'SPEAKING_DESCRIBE_IMAGE' | 'SPONTANEOUS_QA' | 'SPONTANEOUS_QA_GROUP' | 'SPEAKING_CONVERSATION' | 'GN_SPEAKING_INTERVIEW' | 'SPEAKING_CUE_CARD';
 export interface ApiQuestion {
     id: string;
     content: any;
@@ -437,3 +437,43 @@ export interface CrosswordPuzzlePartData {
     explanation?: string;
 }
 export declare function transformCrosswordPuzzle(questions: ApiQuestion[]): CrosswordPuzzlePartData;
+export interface FindWordsInMatrixPartData {
+    type?: 'WORD_BANK' | 'CATEGORIZE';
+    title?: string;
+    instruction: string;
+    gridSize: {
+        rows: number;
+        cols: number;
+    };
+    grid: string[][];
+    categories?: Array<{
+        id: string;
+        name: string;
+        color?: string;
+    }>;
+    wordBank: Array<{
+        id: string;
+        word: string;
+        isExample?: boolean;
+        categoryId?: string;
+    }>;
+    exampleSelection?: {
+        wordId: string;
+        categoryId?: string;
+        path: Array<{
+            row: number;
+            col: number;
+        }>;
+    };
+    correctWords: Array<{
+        wordId: string;
+        word?: string;
+        categoryId?: string;
+        path: Array<{
+            row: number;
+            col: number;
+        }>;
+    }>;
+    explanation?: string;
+}
+export declare function transformFindWordsInMatrix(questions: ApiQuestion[]): FindWordsInMatrixPartData;

package/dist/components/exams/take/utils/question-transformers.js

@@ -1204,3 +1204,27 @@ export function transformCrosswordPuzzle(questions) {
         explanation: question?.explanation,
     };
 }
+export function transformFindWordsInMatrix(questions) {
+    const question = questions[0];
+    const content = (question?.content || {});
+    const correctAnswer = (question?.correct_answer || question?.correctAnswer || {});
+    const type = content?.type || (Array.isArray(content?.categories) && content.categories.length > 0 ? 'CATEGORIZE' : 'WORD_BANK');
+    const rows = Number(content?.gridSize?.rows) || (Array.isArray(content?.grid) ? content.grid.length : 14);
+    const cols = Number(content?.gridSize?.cols) || (Array.isArray(content?.grid?.[0]) ? content.grid[0].length : 14);
+    const grid = Array.isArray(content?.grid) ? content.grid : [];
+    const categories = Array.isArray(content?.categories) ? content.categories : undefined;
+    const wordBank = Array.isArray(content?.wordBank) ? content.wordBank : [];
+    const correctWords = Array.isArray(correctAnswer?.words) ? correctAnswer.words : [];
+    return {
+        type,
+        title: content?.title || '',
+        instruction: question?.instruction || content?.instruction || 'Find these words in the wordsearch box.',
+        gridSize: { rows, cols },
+        grid,
+        ...(categories ? { categories } : {}),
+        wordBank,
+        ...(content?.exampleSelection ? { exampleSelection: content.exampleSelection } : {}),
+        correctWords,
+        explanation: question?.explanation,
+    };
+}

package/dist/components/questions/_shared/config/question-types.config.js

@@ -322,6 +322,11 @@ export const QUESTION_TYPE_CONFIG = {
         requiresContent: true,
         hasDedicatedComponent: true,
     },
+    FIND_WORDS_IN_MATRIX: {
+        label: 'Tìm từ trong ma trận (Word Search)',
+        requiresContent: true,
+        hasDedicatedComponent: true,
+    },
 };
 export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'FILL_IN_BLANK',
@@ -368,6 +373,7 @@ export const QUESTION_TYPES_WITH_DEDICATED_COMPONENTS = [
     'SPEAKING_CUE_CARD',
     'WORD_FILL_STRUCTURED_FORM',
     'CROSSWORD_PUZZLE',
+    'FIND_WORDS_IN_MATRIX',
 ];
 export function getQuestionTypeLabel(type) {
     return QUESTION_TYPE_CONFIG[type]?.label || type;

package/dist/components/questions/_shared/types/find-words-in-matrix.type.d.ts

@@ -0,0 +1,18 @@
+import type { FindWordsInMatrixType, MatrixCellCoord, CategoryHeadingItem, WordBankItem, ExampleSelection, CorrectWordItem, FindWordsInMatrixContent, FindWordsInMatrixCorrectAnswer, StudentWordSelectionItem } from '../../../../shared/types/questions/find-words-in-matrix';
+export interface WordBankFormItem extends WordBankItem {
+    path?: MatrixCellCoord[];
+}
+export interface FindWordsInMatrixFormState {
+    type: FindWordsInMatrixType;
+    title?: string;
+    instruction?: string;
+    rows: number;
+    cols: number;
+    grid: string[][];
+    categories: CategoryHeadingItem[];
+    words: WordBankFormItem[];
+    caseSensitive?: boolean;
+    points: number;
+    explanation?: string;
+}
+export type { FindWordsInMatrixType, MatrixCellCoord, CategoryHeadingItem, WordBankItem, ExampleSelection, CorrectWordItem, FindWordsInMatrixContent, FindWordsInMatrixCorrectAnswer, StudentWordSelectionItem, };

package/dist/components/questions/_shared/types/find-words-in-matrix.type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/questions/creator/question-type-registry.js

@@ -44,6 +44,7 @@ import { speakingCueCardRegistration } from '../types/speaking-cue-card/register
 import { wordFillStructuredFormRegistration } from '../types/word-fill-structured-form/register';
 import { wordOrderAndMatchGroupRegistration } from '../types/word-order-and-match-group/register';
 import { crosswordPuzzleRegistration } from '../types/crossword-puzzle/register';
+import { findWordsInMatrixRegistration } from '../types/find-words-in-matrix/register';
 // ─── Registry map ───────────────────────────────────────────────────────────
 export const questionTypeRegistry = {
     CHOOSE_THE_CORRECT_ANSWER: chooseTheCorrectAnswerRegistration,
@@ -91,4 +92,5 @@ export const questionTypeRegistry = {
     SPEAKING_CUE_CARD: speakingCueCardRegistration,
     WORD_FILL_STRUCTURED_FORM: wordFillStructuredFormRegistration,
     CROSSWORD_PUZZLE: crosswordPuzzleRegistration,
+    FIND_WORDS_IN_MATRIX: findWordsInMatrixRegistration,
 };

package/dist/components/questions/question-bank/QuestionEditorRenderer.d.ts

@@ -15,7 +15,8 @@ export declare enum QuestionBankEditorType {
     WRITE_CORRECT_VERB_FORM = "WRITE_CORRECT_VERB_FORM",
     FILL_IN_BLANK = "FILL_IN_BLANK",
     CHOOSE_CORRECT_ADJECTIVE = "CHOOSE_CORRECT_ADJECTIVE",
-    CROSSWORD_PUZZLE = "CROSSWORD_PUZZLE"
+    CROSSWORD_PUZZLE = "CROSSWORD_PUZZLE",
+    FIND_WORDS_IN_MATRIX = "FIND_WORDS_IN_MATRIX"
 }
 /**
  * Renders the appropriate Creator for a question-bank item.

package/dist/components/questions/question-bank/QuestionEditorRenderer.js

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react';
 import { t } from '../../../shared/lib/i18n';
 import { renderChooseCorrectAdjectiveEditor, renderChooseTheCorrectAnswerEditor, renderFillInBlankEditor, renderFillMissingWordsInGridEditor, renderImageObjectMatchingEditor, renderLabelThePictureEditor, renderLookPictureChooseCorrectAnswerEditor, renderLookPictureFillBlankChooseAnswerEditor, renderLookPictureFillWordHintEditor, renderReadAndColorObjectsEditor, renderReadPassageAndAnswerQuestionsEditor, renderWriteAShortLetterEditor, renderWriteCorrectVerbFormEditor, UnsupportedEditorFallback, } from './editor-adapters';
 import { CrosswordPuzzleCreator } from '../types/crossword-puzzle/CrosswordPuzzleCreator';
+import { FindWordsInMatrixCreator } from '../types/find-words-in-matrix/FindWordsInMatrixCreator';
 /** Marketing question types supported by the question-bank editor. */
 export var QuestionBankEditorType;
 (function (QuestionBankEditorType) {
@@ -21,6 +22,7 @@ export var QuestionBankEditorType;
     QuestionBankEditorType["FILL_IN_BLANK"] = "FILL_IN_BLANK";
     QuestionBankEditorType["CHOOSE_CORRECT_ADJECTIVE"] = "CHOOSE_CORRECT_ADJECTIVE";
     QuestionBankEditorType["CROSSWORD_PUZZLE"] = "CROSSWORD_PUZZLE";
+    QuestionBankEditorType["FIND_WORDS_IN_MATRIX"] = "FIND_WORDS_IN_MATRIX";
 })(QuestionBankEditorType || (QuestionBankEditorType = {}));
 /**
  * Renders the appropriate Creator for a question-bank item.
@@ -85,6 +87,20 @@ export function QuestionEditorRenderer({ questionType, content, correctAnswer, e
                         points: data.points ?? points,
                     });
                 } }));
+        case QuestionBankEditorType.FIND_WORDS_IN_MATRIX:
+            return (_jsx(FindWordsInMatrixCreator, { initialData: {
+                    content,
+                    answer: correctAnswer,
+                    explanation,
+                    points,
+                }, onChange: (data) => {
+                    onChange?.({
+                        content: data.content,
+                        answer: data.answer,
+                        explanation: data.explanation || (explanation ?? undefined),
+                        points: data.points ?? points,
+                    });
+                } }));
         default:
             return (_jsx(UnsupportedEditorFallback, { questionType: questionType, content: content, correctAnswer: correctAnswer, explanation: explanation }));
     }

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

@@ -4,8 +4,8 @@ import { useMemo } from 'react';
 export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = false, userAnswers = {}, }) {
     const rows = content?.gridSize?.rows || 12;
     const cols = content?.gridSize?.cols || 12;
-    const acrossClues = content?.clues?.across || [];
-    const downClues = content?.clues?.down || [];
+    const acrossClues = useMemo(() => content?.clues?.across || [], [content?.clues?.across]);
+    const downClues = useMemo(() => content?.clues?.down || [], [content?.clues?.down]);
     // Build grid cell mapping
     const { cellMap, clueNumberMap } = useMemo(() => {
         const cMap = new Map();
@@ -69,12 +69,16 @@ export function CrosswordPuzzleClient({ content, correctAnswer, isReviewMode = f
                                     else if (userAnswers?.[key]) {
                                         previewLetter = userAnswers[key];
                                     }
-                                    let cellBg = isMarked ? 'bg-slate-200' : 'bg-white';
-                                    let textColor = isExample ? 'text-orange-600' : 'text-gray-800';
-                                    if (isReviewMode && previewLetter) {
+                                    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
+                                        ? 'text-orange-600 font-bold italic'
+                                        : isMarked
+                                            ? 'text-gray-950 font-bold'
+                                            : 'text-gray-800 font-bold';
+                                    if (isReviewMode && previewLetter && !isExample) {
                                         textColor = 'text-green-700 font-extrabold';
                                     }
-                                    return (_jsxs("div", { className: `relative flex items-center justify-center rounded border-2 border-gray-400 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));
+                                    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));
                                 });
                             }) }) })] })] }));
 }

package/dist/components/questions/types/find-words-in-matrix/FindWordsInMatrixClient.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { FindWordsInMatrixContent, FindWordsInMatrixCorrectAnswer } from '../../../../shared/types/questions/find-words-in-matrix';
+interface FindWordsInMatrixClientProps {
+    content: FindWordsInMatrixContent;
+    correctAnswer?: FindWordsInMatrixCorrectAnswer;
+    showSolution?: boolean;
+}
+export declare function FindWordsInMatrixClient({ content, correctAnswer, showSolution, }: FindWordsInMatrixClientProps): React.JSX.Element;
+export {};

package/dist/components/questions/types/find-words-in-matrix/FindWordsInMatrixClient.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '../../../../components/ui/card';
+import { Badge } from '../../../../components/ui/badge';
+// 10 Distinct pastel highlighter colors for word selections
+const WORD_COLORS = [
+    { bg: 'bg-amber-100 text-amber-900 border-amber-400', badge: 'bg-amber-500 text-white', stroke: '#f59e0b' },
+    { bg: 'bg-emerald-100 text-emerald-900 border-emerald-400', badge: 'bg-emerald-500 text-white', stroke: '#10b981' },
+    { bg: 'bg-sky-100 text-sky-900 border-sky-400', badge: 'bg-sky-500 text-white', stroke: '#0ea5e9' },
+    { bg: 'bg-purple-100 text-purple-900 border-purple-400', badge: 'bg-purple-500 text-white', stroke: '#a855f7' },
+    { bg: 'bg-rose-100 text-rose-900 border-rose-400', badge: 'bg-rose-500 text-white', stroke: '#f43f5e' },
+    { bg: 'bg-indigo-100 text-indigo-900 border-indigo-400', badge: 'bg-indigo-500 text-white', stroke: '#6366f1' },
+    { bg: 'bg-teal-100 text-teal-900 border-teal-400', badge: 'bg-teal-500 text-white', stroke: '#14b8a6' },
+    { bg: 'bg-yellow-100 text-yellow-900 border-yellow-400', badge: 'bg-yellow-500 text-white', stroke: '#eab308' },
+    { bg: 'bg-pink-100 text-pink-900 border-pink-400', badge: 'bg-pink-500 text-white', stroke: '#ec4899' },
+    { bg: 'bg-cyan-100 text-cyan-900 border-cyan-400', badge: 'bg-cyan-500 text-white', stroke: '#06b6d4' },
+];
+export function FindWordsInMatrixClient({ content, correctAnswer, showSolution = false, }) {
+    const rows = content.gridSize?.rows || content.grid?.length || 14;
+    const cols = content.gridSize?.cols || content.grid?.[0]?.length || 14;
+    const grid = content.grid || [];
+    const wordBank = content.wordBank || [];
+    const isCategorize = content.type === 'CATEGORIZE' && Array.isArray(content.categories) && content.categories.length > 0;
+    const categories = content.categories || [];
+    // Build cell highlight map
+    const cellColorMap = {};
+    // Example selection
+    if (content.exampleSelection?.path) {
+        for (const c of content.exampleSelection.path) {
+            cellColorMap[`${c.row}-${c.col}`] = { colorIdx: 0, word: 'Example' };
+        }
+    }
+    // Solution paths if visible
+    if (showSolution && correctAnswer?.words) {
+        correctAnswer.words.forEach((item, idx) => {
+            const colorIdx = (idx + 1) % WORD_COLORS.length;
+            item.path?.forEach((c) => {
+                cellColorMap[`${c.row}-${c.col}`] = { colorIdx, word: item.word || item.wordId };
+            });
+        });
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [content.title && (_jsx("h3", { className: "text-lg font-bold text-gray-800 dark:text-gray-100", children: content.title })), isCategorize ? (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", children: categories.map((cat) => {
+                    const wordsInCat = wordBank.filter((w) => w.categoryId === cat.id);
+                    return (_jsxs(Card, { className: "p-3.5 bg-gray-50/70 dark:bg-gray-800/40 border", children: [_jsxs("div", { className: "font-bold text-sm text-gray-800 dark:text-gray-200 border-b pb-1.5 mb-2.5 flex items-center justify-between", children: [_jsx("span", { children: cat.name }), _jsx(Badge, { variant: "outline", className: "text-xs", children: wordsInCat.length })] }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: wordsInCat.map((w, idx) => {
+                                    const isExample = Boolean(w.isExample);
+                                    return (_jsxs(Badge, { variant: "outline", className: `px-2.5 py-1 text-xs font-medium ${isExample
+                                            ? 'line-through bg-amber-50 text-amber-800 border-amber-300'
+                                            : 'bg-white dark:bg-gray-800'}`, children: [w.word, isExample && _jsx("span", { className: "ml-1 text-amber-600 font-bold", children: "(Ex)" })] }, w.id || idx));
+                                }) })] }, cat.id));
+                }) })) : (_jsxs(Card, { className: "p-4 bg-gray-50 dark:bg-gray-800/50 border-dashed border-2", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3 flex items-center gap-2", children: _jsxs("span", { children: ["Word Bank (", wordBank.length, " words)"] }) }), _jsx("div", { className: "flex flex-wrap gap-2", children: wordBank.map((w, idx) => {
+                            const isExample = Boolean(w.isExample);
+                            return (_jsxs(Badge, { variant: "outline", className: `px-3 py-1.5 text-sm font-medium transition-all ${isExample
+                                    ? 'line-through bg-amber-50 text-amber-800 border-amber-300'
+                                    : 'bg-white dark:bg-gray-800 hover:shadow-sm'}`, children: [w.word, isExample && (_jsx("span", { className: "ml-1.5 text-xs text-amber-600 font-bold no-underline", children: "(Example)" }))] }, w.id || idx));
+                        }) })] })), _jsx("div", { className: "overflow-x-auto pb-2 flex justify-center", children: _jsx("div", { className: "inline-grid gap-1 p-3 bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800", style: {
+                        gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+                    }, children: Array.from({ length: rows }).map((_, rIdx) => {
+                        const r = rIdx + 1;
+                        return Array.from({ length: cols }).map((_, cIdx) => {
+                            const c = cIdx + 1;
+                            const char = grid[rIdx]?.[cIdx] || '';
+                            const highlight = cellColorMap[`${r}-${c}`];
+                            const colorConfig = highlight ? WORD_COLORS[highlight.colorIdx] : null;
+                            return (_jsx("div", { className: `h-9 w-9 sm:h-11 sm:w-11 flex items-center justify-center font-bold text-sm sm:text-base select-none rounded-md transition-colors border ${colorConfig
+                                    ? `${colorConfig.bg} font-extrabold shadow-sm scale-95`
+                                    : 'border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/30 text-gray-700 dark:text-gray-300'}`, title: highlight ? `${highlight.word} (${r},${c})` : `(${r},${c})`, children: char || '·' }, `${r}-${c}`));
+                        });
+                    }) }) })] }));
+}

package/dist/components/questions/types/find-words-in-matrix/FindWordsInMatrixCreator.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface FindWordsInMatrixCreatorProps {
+    initialData?: any;
+    onChange?: (data: any) => void;
+    onUnsavedChangesChange?: (hasChanges: boolean) => void;
+}
+export declare function FindWordsInMatrixCreator({ initialData, onChange, onUnsavedChangesChange, }: FindWordsInMatrixCreatorProps): React.JSX.Element;
+export {};