@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

package/dist/components/questions/_shared/types/listen-and-speak-odd-one-out.type.js

@@ -1 +1,3 @@
-export{};
+// Frontend/Creator types for LISTEN_AND_SPEAK_ODD_ONE_OUT
+// (Movers Part 3 - Which One Is Different? Why?)
+export {};

package/dist/components/questions/_shared/types/listen-and-speak-question-list.type.js

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

package/dist/components/questions/_shared/types/listen-and-speak-with-story-images.type.js

@@ -1 +1,3 @@
-export{};
+// Frontend/Creator types for LISTEN_AND_SPEAK_WITH_STORY_IMAGES
+// (Movers Part 2 - Tell the Story)
+export {};

package/dist/components/questions/_shared/types/listen-and-tick-answer.type.js

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

package/dist/components/questions/_shared/types/listening-drawline.type.js

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

package/dist/components/questions/_shared/types/look-and-choose-answer.type.js

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

package/dist/components/questions/_shared/types/look-picture-fill-word-hint.type.js

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

package/dist/components/questions/_shared/types/match-by-writing-answer.type.js

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

package/dist/components/questions/_shared/types/multiple-choice.type.d.ts

@@ -10,6 +10,9 @@ export interface MultipleChoiceData {
     answererName?: string;
     isExample?: boolean;
     multipleAnswers?: boolean;
+    questionNumber?: number;
+    points?: number;
+    instruction?: string;
     isGroup?: boolean;
     groupTitle?: string;
     groupSubtitle?: string;
@@ -21,6 +24,8 @@ export interface MultipleChoiceData {
         content: string;
         imageUrl: string;
     }>;
+    passage?: string | string[];
+    glossary?: string | string[];
 }
 export interface MultipleChoiceCreatorProps {
     initialData?: MultipleChoiceData;

package/dist/components/questions/_shared/types/multiple-choice.type.js

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

package/dist/components/questions/_shared/types/question-group.type.js

@@ -1 +1,11 @@
-export{};
+/**
+ * Shared group types for question creators.
+ *
+ * A "group" is a set of questions that share common contextual data
+ * (e.g. a picture, a passage title, or a content snippet).
+ *
+ * Different question types may use different group shapes:
+ *   - BasicGroupData  → ANSWER_THE_QUESTION, CHOOSE_THE_CORRECT_ANSWER, FILL_IN_BLANK
+ *   - (future)        → MATCH_BY_WRITING_ANSWER, LISTENING_*, etc.
+ */
+export {};

package/dist/components/questions/_shared/types/read-and-color-objects.type.js

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

package/dist/components/questions/_shared/types/read-displayed-content.type.js

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

package/dist/components/questions/_shared/types/read-passage-and-answer-questions.type.js

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

package/dist/components/questions/_shared/types/speaking-describe-image.type.js

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

package/dist/components/questions/_shared/types/spontaneous-qa-group.type.d.ts

@@ -0,0 +1,37 @@
+export type SpontaneousQaGroupInputType = 'TEXT' | 'AUDIO';
+export interface SpontaneousQaGroupQuestionData {
+    questionText: string;
+    inputType: SpontaneousQaGroupInputType;
+    audioUrl: string;
+    expectedAnswers: string[];
+    points: number;
+    questionNumber: number;
+}
+export interface SpontaneousQaGroupPartData {
+    partNumber: number;
+    partTitle: string;
+    topic: string;
+    questions: SpontaneousQaGroupQuestionData[];
+}
+export interface SpontaneousQaGroupData {
+    instruction: string;
+    parts: SpontaneousQaGroupPartData[];
+    explanation?: string;
+    points?: number;
+}
+export interface SpontaneousQaGroupCreatorProps {
+    initialData?: SpontaneousQaGroupData;
+    onSave?: (data: SpontaneousQaGroupData) => void;
+    onCancel?: () => void;
+    onChange?: (data: SpontaneousQaGroupData) => void;
+    externalErrors?: string[];
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    validationRef?: React.MutableRefObject<{
+        triggerValidation: () => Promise<boolean>;
+        getFormData?: () => SpontaneousQaGroupData;
+    } | null>;
+}
+export interface SpontaneousQaGroupClientProps {
+    questionData: SpontaneousQaGroupData;
+    isReviewMode?: boolean;
+}

package/dist/components/questions/_shared/types/spontaneous-qa-group.type.js

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

package/dist/components/questions/_shared/types/spontaneous-qa.type.js

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

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

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

package/dist/components/questions/_shared/types/word-fill-paragraph-with-options.type.js

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

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

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

package/dist/components/questions/_shared/types/word-fill-structured-form.type.d.ts

@@ -1,3 +1,5 @@
+/** WFSF blank input width/shape (content.blankStyle). */
+export type WfsfBlankStyle = 'letter' | 'word' | 'phrase' | 'translate';
 /**
  * WORD_FILL_STRUCTURED_FORM — creator / client contracts.
  * wordBank + viewMode: plan 0024 (WITH_OPTIONS) + 0025 (WITH_WORD_BANK).
@@ -16,22 +18,29 @@ export type WfsfWordBankEntry = WfsfSharedWordBankEntry | WfsfOptionsWordBankEnt
 export interface WordFillStructuredFormData {
     title?: string;
     imageUrl?: string;
+    imageUrls?: string[];
+    audioUrl?: string;
+    audioUrls?: string[];
     content: string;
     answers: Record<string, string>;
+    /**
+     * letter = square 1-char box; word = single-word underline; phrase = multi-word; translate = LLM grading.
+     * Default when omitted: word.
+     */
+    blankStyle?: WfsfBlankStyle;
+    /**
+     * WITH_OPTIONS (0024): per-blank options.
+     * WITH_WORD_BANK (0025): shared chip box { word }[] (not 1:1 blanks).
+     * Pure free-type pages omit these fields.
+     */
+    viewMode?: WfsfViewMode | 'DEFAULT' | string | null;
+    /** OPTIONS: index i ↔ {i}; WORD_BANK: shared list of { word }. */
+    wordBank?: WfsfWordBankEntry[];
     points?: number;
     /** Student rubric / page instruction (shown in client header). */
     instruction?: string;
     explanation?: string;
     caseSensitive?: boolean;
-    /** Free-type width hint when not WITH_OPTIONS. */
-    blankStyle?: 'letter' | 'word' | 'phrase' | 'translate';
-    /** Discriminates wordBank shape (0024 / 0025). */
-    viewMode?: WfsfViewMode | null;
-    /**
-     * WITH_OPTIONS: index i ↔ blank {i}; entry null = free-type.
-     * WITH_WORD_BANK: shared list (not 1:1 with blanks).
-     */
-    wordBank?: WfsfWordBankEntry[];
     groupTitle?: string;
     groupSubtitle?: string;
     groupContent?: string;
@@ -68,7 +77,7 @@ export interface WordFillStructuredFormClientProps {
     autoFillCorrectAnswers?: boolean;
     /** Page rubric — prefer over hard-coded type label in header. */
     instruction?: string;
-    /** Optional part/question index for "Bài N" prefix in header. */
-    questionNumber?: number;
     explanation?: string;
+    /** Exercise / question number shown above instruction (e.g. Bài 1). */
+    questionNumber?: number;
 }

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

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

package/dist/components/questions/_shared/types/word-order-and-match-group.type.d.ts

@@ -0,0 +1,38 @@
+import type { MutableRefObject } from 'react';
+export interface WordOrderAndMatchItemAnswer {
+    orderedPhrase: string;
+    matchLabel: string;
+}
+export interface WordOrderAndMatchGroupItemData {
+    scrambledWords: string[];
+    orderedPhrase: string;
+    matchLabel: string;
+    isExample?: boolean;
+    points: number;
+    questionNumber: number;
+}
+export interface WordOrderAndMatchGroupData {
+    instruction: string;
+    matchOptions: string[];
+    items: WordOrderAndMatchGroupItemData[];
+    explanation?: string;
+    points?: number;
+}
+export interface WordOrderAndMatchGroupCreatorProps {
+    initialData?: WordOrderAndMatchGroupData;
+    onSave?: (data: WordOrderAndMatchGroupData) => void;
+    onCancel?: () => void;
+    onChange?: (data: WordOrderAndMatchGroupData) => void;
+    externalErrors?: string[];
+    onUnsavedChangesChange?: (hasUnsavedChanges: boolean) => void;
+    validationRef?: MutableRefObject<{
+        triggerValidation: () => Promise<boolean>;
+        getFormData?: () => WordOrderAndMatchGroupData;
+    } | null>;
+}
+export interface WordOrderAndMatchGroupClientProps {
+    questionData: WordOrderAndMatchGroupData;
+    isReviewMode?: boolean;
+    userAnswers?: Array<WordOrderAndMatchItemAnswer | null | undefined>;
+    onAnswerChange?: (itemIndex: number, answer: WordOrderAndMatchItemAnswer) => void;
+}

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

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

package/dist/components/questions/_shared/types/word-ordering.type.js

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

package/dist/components/questions/_shared/types/write-a-short-letter.type.js

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

package/dist/components/questions/_shared/types/write-correct-verb-form.type.js

@@ -1 +1,3 @@
-export{};
+// BƯỚC 3: Type Definitions for Write Correct Verb Form
+// Loại câu hỏi: Viết dạng đúng của động từ (chỉ 1 câu)
+export {};

package/dist/components/questions/_shared/types/write-sentences.type.js

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

package/dist/components/questions/_shared/types/write-short-paragraph.type.js

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

package/dist/components/questions/_shared/utils/answer-builder.js

@@ -1 +1,79 @@
-export function buildAnswerPayload(e,s){if(e)switch(e){case"LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE":return{audioUrl:s.audioUrl,blanks:s.blanks,caseSensitive:!1,maxPlayCount:3};case"CHOOSE_THE_CORRECT_ANSWER":return{audioUrl:s.audioUrl,options:s.options,correctAnswer:s.correctOption,maxPlayCount:3};case"TICK_TRUE_OR_FALSE":case"TICK_YES_OR_NO":return{statements:s.statements};case"ARRANGE_LETTERS_INTO_WORDS":return s.arrangeLettersData?{subQuestions:s.arrangeLettersData.subQuestions}:void 0;case"READ_PASSAGE_AND_COMPLETE_STORY":return{passage:s.passage,blanks:s.passageBlanks,caseSensitive:!1};case"CHOOSE_THE_CORRECT_ANSWER":return{options:s.options,correctAnswer:s.correctOption,imageUrl:s.mcImageUrl};case"FILL_IN_BLANK":return{mainImageUrl:s.viewImageMainImageUrl,mainTitle:s.viewImageMainTitle,passage:s.viewImagePassage,blanks:s.viewImageBlanks,wordBank:s.viewImageWordBank,caseSensitive:!1};case"CHOOSE_THE_CORRECT_ANSWER":return{imageUrl:s.readChooseBestImageUrl,questionerName:s.readChooseBestQuestionerName,responderName:s.readChooseBestResponderName,subQuestions:s.readChooseBestSubQuestions||[]};case"FILL_MISSING_WORDS_IN_GRID":return{grid:s.fillMissingWordsInGrid||[],rows:s.fillMissingWordsInGridRows||4,columns:s.fillMissingWordsInGridColumns||8,missingLetters:s.fillMissingWordsInGridAnswers||[],caseSensitive:!1};case"LOOK_PICTURE_CHOOSE_CORRECT_ANSWER":case"LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER":case"READ_PASSAGE_AND_ANSWER_QUESTIONS":default:return;case"LOOK_PICTURE_FILL_WORD_HINT":return{subQuestions:s.lookPictureFillWordHintSubQuestions||[],caseSensitive:!1}}}
+export function buildAnswerPayload(questionType, state) {
+    if (!questionType)
+        return undefined;
+    switch (questionType) {
+        case 'LISTEN_AND_FILL_IN_THE_BLANK_WITH_IMAGE':
+            return {
+                audioUrl: state.audioUrl,
+                blanks: state.blanks,
+                caseSensitive: false,
+                maxPlayCount: 3,
+            };
+        case 'CHOOSE_THE_CORRECT_ANSWER':
+            return {
+                audioUrl: state.audioUrl,
+                options: state.options,
+                correctAnswer: state.correctOption,
+                maxPlayCount: 3,
+            };
+        case 'TICK_TRUE_OR_FALSE':
+        case 'TICK_YES_OR_NO':
+            return { statements: state.statements };
+        case 'ARRANGE_LETTERS_INTO_WORDS':
+            return state.arrangeLettersData
+                ? { subQuestions: state.arrangeLettersData.subQuestions }
+                : undefined;
+        case 'READ_PASSAGE_AND_COMPLETE_STORY':
+            return {
+                passage: state.passage,
+                blanks: state.passageBlanks,
+                caseSensitive: false,
+            };
+        case 'CHOOSE_THE_CORRECT_ANSWER':
+            return {
+                options: state.options,
+                correctAnswer: state.correctOption,
+                imageUrl: state.mcImageUrl,
+            };
+        case 'FILL_IN_BLANK':
+            return {
+                mainImageUrl: state.viewImageMainImageUrl,
+                mainTitle: state.viewImageMainTitle,
+                passage: state.viewImagePassage,
+                blanks: state.viewImageBlanks,
+                wordBank: state.viewImageWordBank,
+                caseSensitive: false,
+            };
+        case 'CHOOSE_THE_CORRECT_ANSWER':
+            return {
+                imageUrl: state.readChooseBestImageUrl,
+                questionerName: state.readChooseBestQuestionerName,
+                responderName: state.readChooseBestResponderName,
+                subQuestions: state.readChooseBestSubQuestions || [],
+            };
+        case 'FILL_MISSING_WORDS_IN_GRID':
+            return {
+                grid: state.fillMissingWordsInGrid || [],
+                rows: state.fillMissingWordsInGridRows || 4,
+                columns: state.fillMissingWordsInGridColumns || 8,
+                missingLetters: state.fillMissingWordsInGridAnswers || [],
+                caseSensitive: false,
+            };
+        case 'LOOK_PICTURE_CHOOSE_CORRECT_ANSWER':
+            // This type uses dedicated component, so answer is built by the component itself
+            return undefined;
+        case 'LOOK_PICTURE_FILL_BLANK_CHOOSE_ANSWER':
+            // This type uses dedicated component, so answer is built by the component itself
+            return undefined;
+        case 'LOOK_PICTURE_FILL_WORD_HINT':
+            return {
+                subQuestions: state.lookPictureFillWordHintSubQuestions || [],
+                caseSensitive: false,
+            };
+        case 'READ_PASSAGE_AND_ANSWER_QUESTIONS':
+            // This type uses dedicated component, so answer is built by the component itself
+            return undefined;
+        default:
+            return undefined;
+    }
+}

package/dist/components/questions/_shared/utils/createColorRegionRegistration.js

@@ -1 +1,39 @@
-export function createColorRegionRegistration(t){return{component:t,transformInitialData:t=>{const n=t?.content||t?.answer,e=t?.points??t?.total_points??1,a=t?.explanation||"";return n?{...n,points:e,explanation:a}:{points:e,explanation:a}},getExtraProps:t=>({onUnsavedChangesChange:t.onUnsavedChangesChange,validationRef:t.validationRef}),wrapOnSave:(t,n)=>({type:n.questionType,content:n.state.content,points:t?.points??n.state.points??1,level:n.state.level,difficulty:n.state.difficulty,skill:n.state.skill,answer:t}),wrapOnChange:(t,n)=>({type:n.questionType,content:n.state.content,points:t?.points??n.state.points??1,level:n.state.level,difficulty:n.state.difficulty,skill:n.state.skill,answer:t})}}
+/**
+ * Factory function to create a QuestionTypeRegistration for color-region question types.
+ * Both IMAGE_OBJECT_MATCHING and READ_AND_COLOR_OBJECTS use the exact same registration logic.
+ */
+export function createColorRegionRegistration(component) {
+    return {
+        component,
+        transformInitialData: (initialData) => {
+            const content = initialData?.content || initialData?.answer;
+            const apiPoints = initialData?.points ?? initialData?.total_points ?? 1;
+            const explanation = initialData?.explanation || '';
+            return content
+                ? { ...content, points: apiPoints, explanation }
+                : { points: apiPoints, explanation };
+        },
+        getExtraProps: (ctx) => ({
+            onUnsavedChangesChange: ctx.onUnsavedChangesChange,
+            validationRef: ctx.validationRef,
+        }),
+        wrapOnSave: (data, ctx) => ({
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: data?.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: data,
+        }),
+        wrapOnChange: (data, ctx) => ({
+            type: ctx.questionType,
+            content: ctx.state.content,
+            points: data?.points ?? ctx.state.points ?? 1,
+            level: ctx.state.level,
+            difficulty: ctx.state.difficulty,
+            skill: ctx.state.skill,
+            answer: data,
+        }),
+    };
+}

package/dist/components/questions/_shared/utils/id-generator.js

@@ -1 +1,3 @@
-export function generateObjectId(){return`obj-${Date.now()}`}
+export function generateObjectId() {
+    return `obj-${Date.now()}`;
+}

package/dist/components/questions/_shared/utils/parseFillBlankStem.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Parse FILL_IN_BLANK stem text into display tokens.
+ *
+ * Contract (workbook / Pearson map):
+ * - Bold: lightweight markdown `**text**` (toggle, non-nested)
+ * - Blanks: `{0}`, `{1}`, … left-to-right
+ * - Multi-line: `\n`
+ *
+ * Blank may sit *inside* a bold span (e.g. `**1. {0}:**`). Older viewers
+ * split blanks first then bold, which left orphan `**` in the UI.
+ */
+export type FillBlankStemTextToken = {
+    kind: 'text';
+    text: string;
+    bold: boolean;
+};
+export type FillBlankStemBlankToken = {
+    kind: 'blank';
+    index: number;
+    /** True when blank is inside an open `**…**` span (label bold only; input stays normal weight). */
+    bold: boolean;
+};
+export type FillBlankStemToken = FillBlankStemTextToken | FillBlankStemBlankToken;
+/**
+ * Tokenize one line. Unclosed bold at EOL → remaining text is plain and
+ * dangling `**` markers are dropped so they never show in the UI.
+ */
+export declare function parseFillBlankStemLine(line: string): FillBlankStemToken[];
+/** Split stem on newlines and parse each line. */
+export declare function parseFillBlankStem(stem: string): FillBlankStemToken[][];

package/dist/components/questions/_shared/utils/parseFillBlankStem.js

@@ -0,0 +1,69 @@
+/**
+ * Parse FILL_IN_BLANK stem text into display tokens.
+ *
+ * Contract (workbook / Pearson map):
+ * - Bold: lightweight markdown `**text**` (toggle, non-nested)
+ * - Blanks: `{0}`, `{1}`, … left-to-right
+ * - Multi-line: `\n`
+ *
+ * Blank may sit *inside* a bold span (e.g. `**1. {0}:**`). Older viewers
+ * split blanks first then bold, which left orphan `**` in the UI.
+ */
+/**
+ * Tokenize one line. Unclosed bold at EOL → remaining text is plain and
+ * dangling `**` markers are dropped so they never show in the UI.
+ */
+export function parseFillBlankStemLine(line) {
+    const tokens = [];
+    let bold = false;
+    let textBuf = '';
+    let i = 0;
+    const flushText = () => {
+        if (!textBuf)
+            return;
+        tokens.push({ kind: 'text', text: textBuf, bold });
+        textBuf = '';
+    };
+    while (i < line.length) {
+        // Bold delimiter
+        if (line[i] === '*' && line[i + 1] === '*') {
+            flushText();
+            bold = !bold;
+            i += 2;
+            continue;
+        }
+        // Blank placeholder {n}
+        if (line[i] === '{') {
+            const m = /^\{(\d+)\}/.exec(line.slice(i));
+            if (m) {
+                flushText();
+                tokens.push({ kind: 'blank', index: Number(m[1]), bold });
+                i += m[0].length;
+                continue;
+            }
+        }
+        textBuf += line[i];
+        i += 1;
+    }
+    // Unclosed bold: demote remaining text to plain (markers already consumed)
+    if (bold && textBuf) {
+        tokens.push({ kind: 'text', text: textBuf, bold: false });
+        textBuf = '';
+    }
+    else {
+        flushText();
+    }
+    // Orphan blank tokens that were opened under bold but line never closed —
+    // keep blank.bold as recorded at emit time (still OK for styling label context).
+    if (tokens.length === 0) {
+        return [{ kind: 'text', text: line, bold: false }];
+    }
+    return tokens;
+}
+/** Split stem on newlines and parse each line. */
+export function parseFillBlankStem(stem) {
+    if (!stem)
+        return [[{ kind: 'text', text: '', bold: false }]];
+    const lines = stem.includes('\n') ? stem.split('\n') : [stem];
+    return lines.map((line) => parseFillBlankStemLine(line));
+}

package/dist/components/questions/_shared/utils/question-validation.js

@@ -1 +1,21 @@
-import{QUESTION_TYPE_CONFIG as i}from"../config/question-types.config";export function validateQuestion(n,r){if(!n)return{isValid:!1,error:"Vui lòng chọn loại câu hỏi!"};const o=i[n];return o?o.requiresContent&&!r&&"CHOOSE_THE_CORRECT_ANSWER"!==n&&"READ_PASSAGE_AND_ANSWER_QUESTIONS"!==n?{isValid:!1,error:"Vui lòng điền đầy đủ thông tin!"}:{isValid:!0}:{isValid:!1,error:"Loại câu hỏi không hợp lệ!"}}
+import { QUESTION_TYPE_CONFIG } from '../config/question-types.config';
+export function validateQuestion(questionType, content) {
+    if (!questionType) {
+        return { isValid: false, error: 'Vui lòng chọn loại câu hỏi!' };
+    }
+    const config = QUESTION_TYPE_CONFIG[questionType];
+    if (!config) {
+        return { isValid: false, error: 'Loại câu hỏi không hợp lệ!' };
+    }
+    // MULTIPLE_CHOICE, READ_AND_CHOOSE_BEST_ANSWER, and READ_PASSAGE_AND_ANSWER_QUESTIONS don't require content
+    // MULTIPLE_CHOICE: question is in options
+    // READ_AND_CHOOSE_BEST_ANSWER: questions are in subQuestions
+    // READ_PASSAGE_AND_ANSWER_QUESTIONS: passage and questions are in answer
+    if (config.requiresContent &&
+        !content &&
+        questionType !== 'CHOOSE_THE_CORRECT_ANSWER' &&
+        questionType !== 'READ_PASSAGE_AND_ANSWER_QUESTIONS') {
+        return { isValid: false, error: 'Vui lòng điền đầy đủ thông tin!' };
+    }
+    return { isValid: true };
+}

package/dist/components/questions/components/ColorNode.js

@@ -1 +1,85 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Button as t}from"../../../components/ui/button";import{Badge as n}from"../../../components/ui/badge";import{X as r}from"lucide-react";function i(e){const o=function(e){const o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return o?{r:parseInt(o[1],16),g:parseInt(o[2],16),b:parseInt(o[3],16)}:null}(e);if(!o)return.5;const[t,n,r]=[o.r,o.g,o.b].map(e=>(e/=255)<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4));return.2126*t+.7152*n+.0722*r}function s(e){return i(e)>.5}export function ColorNode({data:i,variant:a="creator"}){const l="client"===a,d="compact"===i.displayMode,c=d?"text-[9px]":"text-[11px]",f=s(i.color);if(l){const t=i.isConnected?"relative flex h-full w-full items-center justify-center overflow-hidden rounded-2xl transition-all duration-200 ease-out":"relative inline-flex min-w-[110px] items-center justify-center overflow-hidden rounded-2xl border-2 px-3 py-2 transition-all duration-200 ease-out hover:border-blue-500 hover:shadow-md cursor-move";return o("div",{className:`${t} ${i.highlightClass??""}`,style:{...i.highlightStyle,backgroundColor:i.color,border:i.isConnected||i.isHighlighted?"none":void 0,borderColor:i.isConnected||i.isHighlighted?"transparent":f?"#666666":"#9ca3af",padding:i.isConnected?0:void 0},children:[i.isConnected&&i.label&&e("span",{className:"pointer-events-none absolute text-xs font-bold drop-shadow-md",style:{color:f?"#000000":"#ffffff"},children:i.label}),!i.isConnected&&!i.isHighlighted&&e("div",{className:"pointer-events-none absolute inset-0 rounded-2xl shadow-inner"})]})}const p=i.isConnected,x=d?"relative inline-flex min-w-[110px] items-center justify-between gap-2 rounded-2xl border-2 px-3 py-2 text-xs transition-all":"relative flex min-w-[180px] items-center justify-between gap-2 rounded-2xl border-2 px-3 py-2 text-sm transition-all";return e("div",{className:p?`${x} ring-2 ring-green-200`:`${x} hover:border-blue-400 hover:shadow-md`,style:{backgroundColor:i.color,borderColor:(u=i.color,m=p,m?"#22c55e":s(u)?"#666666":"#9ca3af")},children:o("div",{className:"flex w-full items-center justify-between",children:[e("span",{className:`font-mono font-medium ${c}`,style:{color:f?"#000000":"#ffffff",textShadow:f?"0 1px 2px rgba(255,255,255,0.8)":"0 1px 2px rgba(0,0,0,0.5)"},children:i.color}),o("div",{className:"flex items-center gap-2",children:[i.isConnected&&e(n,{variant:"outline",className:"border-green-600 bg-green-500/90 text-xs text-white",children:"✓"}),i.isEditMode&&e(t,{size:"icon",variant:"ghost",className:"h-6 w-6 hover:bg-black/20",onClick:e=>{e.stopPropagation(),i.onRemove()},children:e(r,{className:"h-3 w-3",style:{color:f?"#000000":"#ffffff",filter:f?"drop-shadow(0 1px 2px rgba(255,255,255,0.8))":"drop-shadow(0 1px 2px rgba(0,0,0,0.5))"}})})]})]})});var u,m}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button';
+import { Badge } from '../../../components/ui/badge';
+import { X } from 'lucide-react';
+// Helper function to calculate luminance of a color
+function getLuminance(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb)
+        return 0.5;
+    const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((val) => {
+        val = val / 255;
+        return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+// Helper function to convert hex to RGB
+function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+}
+// Check if color is light (luminance > 0.5)
+function isLightColor(color) {
+    return getLuminance(color) > 0.5;
+}
+export function ColorNode({ data, variant = 'creator' }) {
+    const isClientMode = variant === 'client';
+    const isCompact = data.displayMode === 'compact';
+    const textClass = isCompact ? 'text-[9px]' : 'text-[11px]';
+    const isLight = isLightColor(data.color);
+    if (isClientMode) {
+        const baseClass = data.isConnected
+            ? 'relative flex h-full w-full items-center justify-center overflow-hidden rounded-2xl transition-all duration-200 ease-out'
+            : 'relative inline-flex min-w-[110px] items-center justify-center overflow-hidden rounded-2xl border-2 px-3 py-2 transition-all duration-200 ease-out hover:border-blue-500 hover:shadow-md cursor-move';
+        return (_jsxs("div", { className: `${baseClass} ${data.highlightClass ?? ''}`, style: {
+                ...data.highlightStyle,
+                backgroundColor: data.color,
+                // When connected (inside region) or highlighted (intersecting with region), no border
+                border: data.isConnected || data.isHighlighted ? 'none' : undefined,
+                borderColor: data.isConnected || data.isHighlighted
+                    ? 'transparent'
+                    : isLight
+                        ? '#666666'
+                        : '#9ca3af',
+                // Remove padding when connected to fill completely
+                padding: data.isConnected ? 0 : undefined,
+            }, children: [data.isConnected && data.label && (_jsx("span", { className: "pointer-events-none absolute text-xs font-bold drop-shadow-md", style: {
+                        color: isLight ? '#000000' : '#ffffff',
+                    }, children: data.label })), !data.isConnected && !data.isHighlighted && (_jsx("div", { className: "pointer-events-none absolute inset-0 rounded-2xl shadow-inner" }))] }));
+    }
+    const isConnectedCreator = data.isConnected;
+    const baseClassesCreator = isCompact
+        ? 'relative inline-flex min-w-[110px] items-center justify-between gap-2 rounded-2xl border-2 px-3 py-2 text-xs transition-all'
+        : 'relative flex min-w-[180px] items-center justify-between gap-2 rounded-2xl border-2 px-3 py-2 text-sm transition-all';
+    // Determine border color based on background color for better contrast
+    const getBorderColor = (color, isConnected) => {
+        if (isConnected) {
+            return '#22c55e'; // green-500
+        }
+        return isLightColor(color) ? '#666666' : '#9ca3af';
+    };
+    const creatorClass = isConnectedCreator
+        ? `${baseClassesCreator} ring-2 ring-green-200`
+        : `${baseClassesCreator} hover:border-blue-400 hover:shadow-md`;
+    return (_jsx("div", { className: creatorClass, style: {
+            backgroundColor: data.color,
+            borderColor: getBorderColor(data.color, isConnectedCreator),
+        }, children: _jsxs("div", { className: "flex w-full items-center justify-between", children: [_jsx("span", { className: `font-mono font-medium ${textClass}`, style: {
+                        color: isLight ? '#000000' : '#ffffff',
+                        textShadow: isLight ? '0 1px 2px rgba(255,255,255,0.8)' : '0 1px 2px rgba(0,0,0,0.5)',
+                    }, children: data.color }), _jsxs("div", { className: "flex items-center gap-2", children: [data.isConnected && (_jsx(Badge, { variant: "outline", className: "border-green-600 bg-green-500/90 text-xs text-white", children: "\u2713" })), data.isEditMode && (_jsx(Button, { size: "icon", variant: "ghost", className: "h-6 w-6 hover:bg-black/20", onClick: (e) => {
+                                e.stopPropagation();
+                                data.onRemove();
+                            }, children: _jsx(X, { className: "h-3 w-3", style: {
+                                    color: isLight ? '#000000' : '#ffffff',
+                                    filter: isLight
+                                        ? 'drop-shadow(0 1px 2px rgba(255,255,255,0.8))'
+                                        : 'drop-shadow(0 1px 2px rgba(0,0,0,0.5))',
+                                } }) }))] })] }) }));
+}