@tinyweb_dev/oe-exam-sdk 0.1.0

package/dist/components/questions/components/ColorRegionCreator.js

@@ -0,0 +1,421 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Button } from '../../../components/ui/button';
+import { Label } from '../../../components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
+import { PointsInput } from '../../../components/ui/points-input';
+import { X, Pencil, Eye, Plus, Trash2, MessageSquare, Palette, Lightbulb, Image } from 'lucide-react';
+import { Input } from '../../../components/ui/input';
+import { Textarea } from '../../../components/ui/textarea';
+import { FileUpload } from '../../../components/ui/file-upload';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../components/ui/select';
+import { ColorRegionNode } from './ColorRegionNode';
+import { usePresignedFileUrl } from '../../../shared/lib/hooks';
+import { COLOR_PALETTE } from '../_shared/constants/color-palette';
+import { useReactHookForm } from '../../../shared/lib/hooks/useReactHookForm';
+import { readAndColorObjectsFormSchema, } from '../../../shared/lib/validation/read-and-color-objects.validation';
+function ColorRegionCreatorContent({ initialData, onSave, onCancel, onChange, onUnsavedChangesChange, validationRef, config, ClientComponent, }) {
+    // State
+    const [backgroundImageUrl, setBackgroundImageUrl] = useState(initialData?.backgroundImageUrl || '');
+    const [colorNodes, setColorNodes] = useState(initialData?.colorNodes || []);
+    const [regionNodes, setRegionNodes] = useState(initialData?.regionNodes || []);
+    // Instructions state
+    const [instructions, setInstructions] = useState(Array.isArray(initialData?.instructions) ? initialData.instructions : []);
+    // Add node state - selected color from palette
+    const [selectedColor, setSelectedColor] = useState('');
+    const [colorLabelValue, setColorLabelValue] = useState('');
+    const [showAddColorPanel, setShowAddColorPanel] = useState(false);
+    // Whether to show label input alongside color picker
+    const showColorLabel = config.showColorLabel || false;
+    // Points state
+    const [points, setPoints] = useState(initialData?.points || 1);
+    // Explanation state
+    const [explanation, setExplanation] = useState(initialData?.explanation || '');
+    // Use react-hook-form with Zod validation
+    const form = useReactHookForm({
+        defaultValues: {
+            backgroundImageUrl: backgroundImageUrl,
+            colorNodes: colorNodes,
+            regionNodes: regionNodes,
+            instructions: instructions,
+        },
+        zodSchema: readAndColorObjectsFormSchema,
+        mode: 'onBlur',
+    });
+    // Track previous initialData to detect changes
+    const previousInitialDataRef = useRef(initialData);
+    const isInitializingRef = useRef(true); // Start as true to prevent onChange on first render
+    const hasInitializedRef = useRef(false); // Track if we've initialized from initialData
+    // NOTE: Status tracking is now handled entirely by ExamCreator via localStorage (exam_question_status_{id})
+    // The onChange callback triggers handleQuestionDraftChange in ExamCreator which updates localStorage
+    // Expose validation function via ref
+    useEffect(() => {
+        if (validationRef) {
+            validationRef.current = {
+                triggerValidation: async () => {
+                    return validateForm();
+                },
+                // Return current form data immediately (not debounced)
+                getFormData: () => ({
+                    backgroundImageUrl,
+                    colorNodes,
+                    regionNodes,
+                    instructions,
+                    points,
+                    explanation,
+                }),
+            };
+        }
+    }, [validationRef, backgroundImageUrl, colorNodes, regionNodes, instructions, points, explanation]);
+    // Use custom hooks for presigned URLs
+    const { previewUrl: backgroundImagePreviewUrl } = usePresignedFileUrl(backgroundImageUrl);
+    const [backgroundPreviewUrl, setBackgroundPreviewUrl] = useState('');
+    // Sync presigned background URL → backgroundPreviewUrl (matches LACOIS pattern)
+    useEffect(() => {
+        if (backgroundImagePreviewUrl)
+            setBackgroundPreviewUrl(backgroundImagePreviewUrl);
+    }, [backgroundImagePreviewUrl]);
+    // Sync state from initialData when it changes (e.g., when switching back to this question)
+    useEffect(() => {
+        const initialDataChanged = JSON.stringify(previousInitialDataRef.current) !== JSON.stringify(initialData);
+        if (initialDataChanged || !hasInitializedRef.current) {
+            isInitializingRef.current = true;
+            previousInitialDataRef.current = initialData;
+            hasInitializedRef.current = true;
+            // Update all state from initialData (handle both defined and undefined cases)
+            if (initialData) {
+                if (initialData.backgroundImageUrl !== undefined) {
+                    setBackgroundImageUrl(initialData.backgroundImageUrl);
+                }
+                if (initialData.colorNodes !== undefined) {
+                    setColorNodes(initialData.colorNodes);
+                }
+                if (initialData.regionNodes !== undefined) {
+                    setRegionNodes(initialData.regionNodes);
+                }
+                if (initialData.instructions !== undefined) {
+                    setInstructions(Array.isArray(initialData.instructions) ? initialData.instructions : []);
+                }
+                if (initialData.points !== undefined) {
+                    setPoints(initialData.points);
+                }
+                if (initialData.explanation !== undefined) {
+                    setExplanation(initialData.explanation);
+                }
+            }
+            else {
+                // Reset to empty state if initialData is undefined
+                setBackgroundImageUrl('');
+                setColorNodes([]);
+                setRegionNodes([]);
+                setInstructions([]);
+                setPoints(1);
+                setExplanation('');
+            }
+            // Reset flag after state updates
+            setTimeout(() => {
+                isInitializingRef.current = false;
+            }, 150); // Increased timeout to ensure state is fully updated
+        }
+    }, [initialData]);
+    // Store onChange callback in ref to avoid dependency issues
+    const onChangeRef = useRef(onChange);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    // Track previous values to prevent unnecessary onChange calls
+    const previousPayloadRef = useRef('');
+    useEffect(() => {
+        // Skip onChange during initialization to prevent infinite loop
+        if (isInitializingRef.current || !hasInitializedRef.current) {
+            // Still update previous payload ref to track current state
+            const currentPayload = JSON.stringify({
+                backgroundImageUrl,
+                colorNodes,
+                regionNodes,
+                instructions,
+                explanation,
+            });
+            previousPayloadRef.current = currentPayload;
+            return;
+        }
+        // Don't call onChange if we have no meaningful data yet
+        // This prevents overwriting API data with empty values
+        if (!backgroundImageUrl && colorNodes.length === 0 && regionNodes.length === 0) {
+            return;
+        }
+        // Create payload
+        const payload = {
+            backgroundImageUrl,
+            colorNodes,
+            regionNodes,
+            instructions,
+            points,
+            explanation,
+        };
+        // Serialize payload for comparison
+        const payloadString = JSON.stringify(payload);
+        // Only call onChange if payload actually changed
+        if (previousPayloadRef.current !== payloadString) {
+            previousPayloadRef.current = payloadString;
+            // Use ref to call onChange to avoid dependency on onChange function reference
+            onChangeRef.current?.(payload);
+        }
+    }, [backgroundImageUrl, colorNodes, regionNodes, instructions, points, explanation]);
+    // UI State
+    const [isClientMode, setIsClientMode] = useState(false);
+    const [imageLoaded, setImageLoaded] = useState(false);
+    // Refs
+    const workspaceRef = useRef(null);
+    // ── LACOIS-style custom drag state ────────────────────────────────────────
+    const [draggingId, setDraggingId] = useState(null);
+    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+    const handleRegionMouseDown = useCallback((regionId, regionX, regionY, e) => {
+        if (isClientMode)
+            return;
+        e.preventDefault();
+        setDraggingId(regionId);
+        if (workspaceRef.current) {
+            const rect = workspaceRef.current.getBoundingClientRect();
+            const mouseXPercent = ((e.clientX - rect.left) / rect.width) * 100;
+            const mouseYPercent = ((e.clientY - rect.top) / rect.height) * 100;
+            setDragOffset({ x: mouseXPercent - regionX, y: mouseYPercent - regionY });
+        }
+    }, [isClientMode]);
+    const handleMouseMove = useCallback((e) => {
+        if (!draggingId || !workspaceRef.current)
+            return;
+        const rect = workspaceRef.current.getBoundingClientRect();
+        const mouseXPercent = ((e.clientX - rect.left) / rect.width) * 100;
+        const mouseYPercent = ((e.clientY - rect.top) / rect.height) * 100;
+        setRegionNodes((prev) => prev.map((region) => {
+            if (region.id !== draggingId)
+                return region;
+            const x = Math.max(0, Math.min(100 - region.width, mouseXPercent - dragOffset.x));
+            const y = Math.max(0, Math.min(100 - region.height, mouseYPercent - dragOffset.y));
+            return { ...region, x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 };
+        }));
+    }, [draggingId, dragOffset]);
+    const handleMouseUp = useCallback(() => {
+        setDraggingId(null);
+    }, []);
+    useEffect(() => {
+        if (draggingId) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+            return () => {
+                window.removeEventListener('mousemove', handleMouseMove);
+                window.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+    }, [draggingId, handleMouseMove, handleMouseUp]);
+    // ─────────────────────────────────────────────────────────────────────────
+    // Remove color node and its linked region
+    const removeColorNode = useCallback((id) => {
+        // Find the region linked to this color node
+        const linkedRegion = regionNodes.find((r) => r.linkedColorNodeId === id);
+        if (linkedRegion) {
+            setRegionNodes((prev) => prev.filter((r) => r.id !== linkedRegion.id));
+        }
+        setColorNodes((prev) => prev.filter((n) => n.id !== id));
+    }, [regionNodes]);
+    // Remove region
+    const removeRegion = useCallback((id) => {
+        setRegionNodes((prev) => prev.filter((r) => r.id !== id));
+    }, []);
+    // Add new color node with auto-generated region
+    const addNewColorNode = useCallback(() => {
+        if (!selectedColor) {
+            form.setError('colorNodes', { message: 'Vui lòng chọn màu!' });
+            return;
+        }
+        // Check if color already exists
+        if (colorNodes.some((n) => n.color === selectedColor)) {
+            form.setError('colorNodes', { message: 'Màu này đã được thêm!' });
+            return;
+        }
+        if (!imageLoaded) {
+            form.setError('backgroundImageUrl', { message: 'Vui lòng upload ảnh nền trước!' });
+            return;
+        }
+        const timestamp = Date.now();
+        // Create color node (with optional label)
+        const newColorNode = {
+            id: `color-${timestamp}`,
+            color: selectedColor,
+            ...(showColorLabel && colorLabelValue.trim() ? { label: colorLabelValue.trim() } : {}),
+        };
+        // Create region at random position (10-80% to avoid edges)
+        const randomX = Math.random() * 70 + 10; // 10-80%
+        const randomY = Math.random() * 70 + 10; // 10-80%
+        const newRegion = {
+            id: `region-${timestamp}`,
+            x: randomX,
+            y: randomY,
+            width: 6, // Smaller default width (6% of image width)
+            height: 5, // Smaller default height (5% of image height)
+            color: selectedColor,
+            linkedColorNodeId: newColorNode.id,
+        };
+        setColorNodes((prev) => [...prev, newColorNode]);
+        setRegionNodes((prev) => [...prev, newRegion]);
+        // Reset selection
+        setSelectedColor('');
+        setColorLabelValue('');
+        setShowAddColorPanel(false);
+        form.clearErrors();
+    }, [selectedColor, colorLabelValue, showColorLabel, imageLoaded, colorNodes, form]);
+    // Get validation errors
+    const getErrors = () => {
+        const errors = {};
+        const bgError = form.formState.errors.backgroundImageUrl;
+        if (bgError) {
+            errors.backgroundImageUrl = bgError.message;
+        }
+        const colorNodesError = form.formState.errors.colorNodes;
+        if (colorNodesError && typeof colorNodesError.message === 'string') {
+            errors.colorNodes = colorNodesError.message;
+        }
+        const regionNodesError = form.formState.errors.regionNodes;
+        if (regionNodesError && typeof regionNodesError.message === 'string') {
+            errors.regionNodes = regionNodesError.message;
+        }
+        const instructionsError = form.formState.errors.instructions;
+        if (instructionsError && typeof instructionsError.message === 'string') {
+            errors.instructions = instructionsError.message;
+        }
+        // Check for individual instruction errors (array item errors)
+        if (instructionsError && Array.isArray(instructionsError)) {
+            errors.instructionItems = {};
+            instructionsError.forEach((err, index) => {
+                if (err && typeof err.message === 'string') {
+                    errors.instructionItems[index] = err.message;
+                }
+            });
+        }
+        return errors;
+    };
+    // Determine if instructions are required based on config (default: true)
+    const instructionsRequired = config.instructionsRequired !== false;
+    // Validate form data
+    const validateForm = () => {
+        // Update form values before validation
+        form.setValue('backgroundImageUrl', backgroundImageUrl);
+        form.setValue('colorNodes', colorNodes);
+        form.setValue('regionNodes', regionNodes);
+        form.setValue('instructions', instructions);
+        // Trigger validation
+        const result = readAndColorObjectsFormSchema.safeParse({
+            backgroundImageUrl,
+            colorNodes,
+            regionNodes,
+            instructions: instructionsRequired ? instructions : ['placeholder'],
+        });
+        if (!result.success) {
+            // Set errors from Zod validation
+            result.error.issues.forEach((issue) => {
+                // Skip instructions errors when not required
+                if (!instructionsRequired && issue.path[0] === 'instructions')
+                    return;
+                const path = issue.path.join('.');
+                form.setError(path, { message: issue.message });
+            });
+            // Check if there are any non-instructions errors
+            const hasRealErrors = result.error.issues.some((issue) => instructionsRequired || issue.path[0] !== 'instructions');
+            return !hasRealErrors;
+        }
+        return true;
+    };
+    // Handle save with validation
+    const handleSave = () => {
+        if (!validateForm()) {
+            return;
+        }
+        // NOTE: Save status is now managed by ExamCreator via localStorage
+        onSave?.({
+            backgroundImageUrl,
+            colorNodes,
+            regionNodes,
+            instructions,
+            points,
+            explanation,
+        });
+    };
+    const errors = getErrors();
+    // If in client mode, render the Client component
+    if (isClientMode) {
+        const questionData = {
+            backgroundImageUrl: backgroundImagePreviewUrl || backgroundImageUrl,
+            colorNodes,
+            regionNodes,
+            instructions,
+            explanation,
+        };
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(Card, { children: _jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { children: _jsx(CardTitle, { children: config.previewTitle }) }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(false), children: [_jsx(Pencil, { className: "mr-2 h-4 w-4" }), "Quay l\u1EA1i Edit Mode"] })] }) }) }), _jsx(ClientComponent, { questionData: questionData, onSubmit: () => { }, isReviewMode: true, explanation: explanation })] }));
+    }
+    // Get available colors (not yet added)
+    const availableColors = COLOR_PALETTE.filter((color) => !colorNodes.some((node) => node.color === color));
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50", children: [_jsx("div", { className: "h-1.5 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500" }), _jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-pink-500 to-purple-600 shadow-md", children: _jsx(Palette, { className: "h-5 w-5 text-white" }) }), _jsxs("div", { children: [_jsx(CardTitle, { className: "text-xl font-bold text-gray-900", children: config.creatorTitle }), _jsx("p", { className: "text-sm text-gray-500", children: config.creatorSubtitle })] })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setIsClientMode(!isClientMode), className: "gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700", children: [_jsx(Eye, { className: "h-4 w-4" }), "Xem tr\u01B0\u1EDBc"] })] }) }), _jsxs(CardContent, { className: "space-y-6", children: [!isClientMode && (_jsx("div", { className: "rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4", children: _jsx(PointsInput, { value: points, onChange: (e) => setPoints(Number(e.target.value) || 1) }) })), !isClientMode && (_jsx("div", { className: "rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 shadow-sm", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100", children: _jsx(Lightbulb, { className: "h-4 w-4 text-blue-600" }) }), _jsxs("div", { className: "text-sm text-blue-900", children: [_jsx("p", { className: "font-semibold text-blue-800", children: "H\u01B0\u1EDBng d\u1EABn t\u1EA1o c\u00E2u h\u1ECFi" }), _jsx("ul", { className: "mt-2 space-y-1.5 text-blue-700", children: config.instructionsTips.map((tip, index) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-blue-400" }), tip] }, index))) })] })] }) })), !isClientMode && (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(MessageSquare, { className: "h-4 w-4 text-indigo-500" }), config.instructionsLabel, " ", instructionsRequired && _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs(Button, { onClick: () => {
+                                                    setInstructions([...instructions, '']);
+                                                    form.clearErrors('instructions');
+                                                }, className: "gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700", size: "sm", variant: "outline", children: [_jsx(Plus, { className: "h-4 w-4" }), "Th\u00EAm c\u00E2u l\u1EC7nh"] })] }), errors.instructions && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("span", { className: "text-lg", children: "\u274C" }), _jsx("p", { className: "text-sm text-red-600", children: errors.instructions })] })), _jsx("div", { className: "space-y-3", children: instructions.map((instruction, index) => {
+                                            const hasError = errors.instructionItems?.[index];
+                                            return (_jsxs("div", { className: `group relative rounded-xl border-2 p-3 transition-all duration-200 ${instruction.trim()
+                                                    ? 'border-green-200 bg-gradient-to-r from-green-50 to-emerald-50'
+                                                    : 'border-gray-200 bg-white hover:border-gray-300'}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg font-bold transition-all ${instruction.trim()
+                                                                    ? 'bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md'
+                                                                    : 'bg-gray-100 text-gray-600'}`, children: index + 1 }), _jsx(Input, { value: instruction, onChange: (e) => {
+                                                                    const newInstructions = [...instructions];
+                                                                    newInstructions[index] = e.target.value;
+                                                                    setInstructions(newInstructions);
+                                                                    form.clearErrors('instructions');
+                                                                }, placeholder: `Ví dụ: ${config.instructionPlaceholder}`, className: `flex-1 border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 ${hasError ? 'border-red-400' : ''}` }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+                                                                    setInstructions(instructions.filter((_, i) => i !== index));
+                                                                }, className: "text-gray-400 hover:bg-red-50 hover:text-red-500", children: _jsx(Trash2, { className: "h-4 w-4" }) })] }), hasError && (_jsx("p", { className: "ml-11 mt-2 text-sm text-red-600", children: hasError }))] }, index));
+                                        }) }), instructions.length === 0 && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }), _jsx("p", { className: "text-sm text-amber-800", children: "Ch\u01B0a c\u00F3 h\u01B0\u1EDBng d\u1EABn n\u00E0o. Nh\u1EA5n \"Th\u00EAm c\u00E2u l\u1EC7nh\" \u0111\u1EC3 b\u1EAFt \u0111\u1EA7u." })] }))] })), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Image, { className: "h-4 w-4 text-indigo-500" }), "\u1EA2nh n\u1EC1n ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(FileUpload, { id: "image-upload", label: "\u1EA2nh n\u1EC1n", accept: "image/*", value: backgroundImageUrl, onChange: (key) => {
+                                            setBackgroundImageUrl(key);
+                                            setImageLoaded(false);
+                                            form.clearErrors();
+                                        }, onPresignedUrlChange: (url) => {
+                                            setBackgroundPreviewUrl(url);
+                                            setImageLoaded(false);
+                                        }, disabled: isClientMode, maxSize: 5, placeholder: "Paste URL ho\u1EB7c upload file", required: true, autoUpload: true, prefix: "questions", onFileLoad: () => {
+                                            setImageLoaded(false);
+                                        } }), errors.backgroundImageUrl && (_jsx("p", { className: "mt-1 text-sm text-red-600", children: errors.backgroundImageUrl }))] }), !isClientMode && (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { className: "flex items-center gap-2 text-base font-semibold text-gray-800", children: [_jsx(Palette, { className: "h-4 w-4 text-purple-500" }), config.addItemLabel || 'Thêm Màu', " ", _jsx("span", { className: "text-red-500", children: "*" })] }), !showAddColorPanel && (_jsxs(Button, { onClick: () => setShowAddColorPanel(true), className: "gap-2 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700", size: "sm", variant: "outline", disabled: availableColors.length === 0, children: [_jsx(Plus, { className: "h-4 w-4" }), config.addItemLabel || 'Thêm màu'] }))] }), errors.colorNodes && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("span", { className: "text-lg", children: "\u274C" }), _jsx("p", { className: "text-sm text-red-600", children: errors.colorNodes })] })), showAddColorPanel && (_jsxs("div", { className: "flex flex-col gap-3 rounded-xl border-2 border-purple-200 bg-gradient-to-r from-purple-50 to-indigo-50 p-4", children: [showColorLabel && (_jsx(Input, { value: colorLabelValue, onChange: (e) => setColorLabelValue(e.target.value), placeholder: config.colorLabelPlaceholder || 'Nhập label (ví dụ: Tom, Apple...)', className: "h-9 border-gray-200 bg-white" })), _jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { value: selectedColor, onValueChange: setSelectedColor, children: [_jsx(SelectTrigger, { className: "flex-1 border-gray-200 bg-white", children: _jsx(SelectValue, { placeholder: "Ch\u1ECDn m\u00E0u..." }) }), _jsx(SelectContent, { children: availableColors.map((color) => (_jsx(SelectItem, { value: color, children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded border border-gray-300", style: { backgroundColor: color } }), _jsx("span", { className: "font-mono text-xs", children: color })] }) }, color))) })] }), _jsx(Button, { size: "sm", onClick: addNewColorNode, disabled: !selectedColor ||
+                                                            availableColors.length === 0 ||
+                                                            (showColorLabel && !colorLabelValue.trim()), className: "bg-purple-600 hover:bg-purple-700", children: "T\u1EA1o" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => {
+                                                            setShowAddColorPanel(false);
+                                                            setSelectedColor('');
+                                                            setColorLabelValue('');
+                                                        }, children: "H\u1EE7y" })] })] })), colorNodes.length === 0 && !showAddColorPanel && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-amber-200 bg-gradient-to-r from-amber-50 to-yellow-50 p-4", children: [_jsx("span", { className: "text-lg", children: "\u26A0\uFE0F" }), _jsx("p", { className: "text-sm text-amber-800", children: config.emptyItemMessage || 'Chưa có màu nào. Nhấn "Thêm màu" để bắt đầu.' })] }))] })), errors.regionNodes && (_jsxs("div", { className: "flex items-start gap-3 rounded-xl border border-red-200 bg-gradient-to-r from-red-50 to-rose-50 p-4", children: [_jsx("span", { className: "text-lg", children: "\u274C" }), _jsx("p", { className: "text-sm text-red-600", children: errors.regionNodes })] }))] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-indigo-400 to-purple-500" }), _jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CardTitle, { className: "text-base font-semibold text-gray-800", children: "Workspace \u2014 \u1EA2nh n\u1EC1n" }), _jsx("span", { className: "text-xs text-gray-500", children: "K\u00E9o th\u1EA3 region \u0111\u1EC3 \u0111\u1ECBnh v\u1ECB" })] }) }), _jsxs(CardContent, { className: "p-0", children: [colorNodes.length > 0 && (_jsx("div", { className: "border-b border-gray-100 px-4 py-3 flex flex-wrap gap-2", children: colorNodes.map((node) => (_jsxs("div", { className: "inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900", children: [_jsx("div", { className: "h-4 w-4 rounded border border-gray-300", style: { backgroundColor: node.color } }), node.label ? (_jsx("span", { className: "text-xs", children: node.label })) : (_jsx("span", { className: "font-mono text-xs", children: node.color })), !isClientMode && (_jsx("button", { onClick: () => removeColorNode(node.id), className: "group rounded p-0.5 transition-all hover:scale-110 hover:bg-red-100", type: "button", children: _jsx(X, { className: "h-3 w-3 text-gray-500 transition-colors group-hover:text-red-600" }) }))] }, node.id))) })), _jsx("div", { ref: workspaceRef, className: "relative w-full overflow-hidden select-none isolate", style: { cursor: draggingId ? 'grabbing' : 'default' }, children: backgroundPreviewUrl ? (_jsxs(_Fragment, { children: [_jsx("img", { src: backgroundPreviewUrl, alt: "Background", className: "block w-full h-auto", draggable: false, onLoad: () => setImageLoaded(true), onError: () => {
+                                                form.setError('backgroundImageUrl', { message: 'Không thể load ảnh!' });
+                                                setImageLoaded(false);
+                                            } }), imageLoaded &&
+                                            regionNodes.map((region) => {
+                                                const linkedColorNode = colorNodes.find((n) => n.id === region.linkedColorNodeId);
+                                                return (_jsx("div", { style: {
+                                                        position: 'absolute',
+                                                        left: `${region.x}%`,
+                                                        top: `${region.y}%`,
+                                                        width: `${region.width}%`,
+                                                        height: `${region.height}%`,
+                                                        cursor: isClientMode ? 'default' : 'grab',
+                                                        zIndex: draggingId === region.id ? 2 : 1,
+                                                    }, onMouseDown: (e) => handleRegionMouseDown(region.id, region.x, region.y, e), children: _jsx(ColorRegionNode, { data: {
+                                                            color: region.color,
+                                                            x: region.x,
+                                                            y: region.y,
+                                                            width: region.width,
+                                                            height: region.height,
+                                                            onRemove: () => removeRegion(region.id),
+                                                            isEditMode: !isClientMode,
+                                                            isClientMode: isClientMode,
+                                                            label: linkedColorNode?.label || '',
+                                                        } }) }, region.id));
+                                            })] })) : (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-20 text-gray-400", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-10 w-10 text-gray-300", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), _jsx("p", { className: "text-sm", children: "Ch\u01B0a c\u00F3 \u1EA3nh n\u1EC1n. H\u00E3y upload \u1EA3nh \u1EDF tr\u00EAn." })] })) })] })] }), _jsxs(Card, { className: "overflow-hidden border-0 bg-white shadow-lg shadow-gray-100/50", children: [_jsx("div", { className: "h-1 bg-gradient-to-r from-gray-300 to-gray-400" }), _jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-md bg-gray-100", children: _jsx(MessageSquare, { className: "h-3.5 w-3.5 text-gray-600" }) }), _jsx(CardTitle, { className: "text-lg font-semibold text-gray-800", children: "Gi\u1EA3i th\u00EDch" })] }) }), _jsx(CardContent, { children: _jsx(Textarea, { id: "explanation", value: explanation, onChange: (e) => setExplanation(e.target.value), placeholder: "Nh\u1EADp gi\u1EA3i th\u00EDch cho \u0111\u00E1p \u00E1n \u0111\u00FAng...", rows: 3, className: "border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200" }) })] })] }));
+}
+export function ColorRegionCreator(props) {
+    return _jsx(ColorRegionCreatorContent, { ...props });
+}
+//# sourceMappingURL=ColorRegionCreator.js.map

package/dist/components/questions/components/ColorRegionCreator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorRegionCreator.js","sourceRoot":"","sources":["../../../../src/components/questions/components/ColorRegionCreator.tsx"],"names":[],"mappings":"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"}

package/dist/components/questions/components/ColorRegionNode.d.ts

@@ -0,0 +1,20 @@
+interface ColorRegionNodeProps {
+    data: {
+        color: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        onRemove?: () => void;
+        isEditMode?: boolean;
+        isClientMode?: boolean;
+        savedColor?: string;
+        onFillColor?: (color: string) => void;
+        isUnassignedRegion?: boolean;
+        isHighlighted?: boolean;
+        label?: string;
+    };
+}
+export declare const ColorRegionNode: import("react").MemoExoticComponent<({ data }: ColorRegionNodeProps) => import("react").JSX.Element>;
+export {};
+//# sourceMappingURL=ColorRegionNode.d.ts.map

package/dist/components/questions/components/ColorRegionNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorRegionNode.d.ts","sourceRoot":"","sources":["../../../../src/components/questions/components/ColorRegionNode.tsx"],"names":[],"mappings":"AAKA,UAAU,oBAAoB;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;QACtB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,YAAY,CAAC,EAAE,OAAO,CAAC;QACvB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,eAAO,MAAM,eAAe,iDAAmB,oBAAoB,iCAkFjE,CAAC"}

package/dist/components/questions/components/ColorRegionNode.js

@@ -0,0 +1,60 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useState, useEffect, useRef } from 'react';
+import { ColorNode } from './ColorNode';
+export const ColorRegionNode = memo(({ data }) => {
+    const { color: propColor, width, height, isClientMode, savedColor: propSavedColor, isUnassignedRegion, isHighlighted, label, } = data;
+    // In creator mode, use propColor directly (no state needed to avoid re-render loops)
+    // In client mode, use state to track propSavedColor changes from drag & drop
+    const [savedColor, setSavedColor] = useState(propSavedColor || '');
+    const prevPropSavedColorRef = useRef(propSavedColor || '');
+    // Only sync state in client mode when propSavedColor actually changes
+    // In creator mode, always use propColor directly - no state updates needed
+    useEffect(() => {
+        if (isClientMode) {
+            // Only update if propSavedColor actually changed
+            if (prevPropSavedColorRef.current !== propSavedColor) {
+                prevPropSavedColorRef.current = propSavedColor || '';
+                setSavedColor(propSavedColor || '');
+            }
+        }
+        else {
+            // Reset ref when switching to creator mode
+            prevPropSavedColorRef.current = '';
+        }
+    }, [isClientMode, propSavedColor]);
+    // Determine the color to use: in creator mode use propColor directly, in client mode use savedColor
+    const displayColor = isClientMode ? savedColor : propColor || '';
+    return (_jsx("div", { className: `relative rounded-2xl transition-all ${
+        // Unassigned region has no visible styling (transparent)
+        isUnassignedRegion
+            ? '' // No border/background for unassigned region
+            : // In client mode, show transparent region (ColorNode will be rendered separately)
+                isClientMode
+                    ? displayColor || isHighlighted
+                        ? '' // No border/background when ColorNode is assigned or when highlighted (node đang drag vào)
+                        : 'rounded-2xl border border-dashed border-red-300 bg-black/10' // Client mode - subtle red border when empty
+                    : displayColor
+                        ? '' // Match client mode when region đã có màu
+                        : 'rounded-2xl border border-dashed border-red-300 bg-black/5' // Creator mode empty — thinner, lighter border
+        }`, style: isUnassignedRegion
+            ? {
+                width: '100%',
+                height: '100%',
+            }
+            : {
+                width: `${width}%`,
+                height: `${height}%`,
+                minWidth: '60px',
+                minHeight: '40px',
+                borderRadius: '16px',
+            }, children: !isClientMode && displayColor && (_jsx("div", { className: "pointer-events-none h-full w-full", children: _jsx(ColorNode, { data: {
+                    color: displayColor,
+                    isConnected: true,
+                    onRemove: () => { },
+                    displayMode: 'compact',
+                    label: label,
+                }, variant: "client" }) })) }));
+});
+ColorRegionNode.displayName = 'ColorRegionNode';
+//# sourceMappingURL=ColorRegionNode.js.map

package/dist/components/questions/components/ColorRegionNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorRegionNode.js","sourceRoot":"","sources":["../../../../src/components/questions/components/ColorRegionNode.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAoBxC,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CAAC,CAAC,EAAE,IAAI,EAAwB,EAAE,EAAE;IACrE,MAAM,EACJ,KAAK,EAAE,SAAS,EAChB,KAAK,EACL,MAAM,EACN,YAAY,EACZ,UAAU,EAAE,cAAc,EAC1B,kBAAkB,EAClB,aAAa,EACb,KAAK,GACN,GAAG,IAAI,CAAC;IAET,qFAAqF;IACrF,6EAA6E;IAC7E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAS,cAAc,IAAI,EAAE,CAAC,CAAC;IAC3E,MAAM,qBAAqB,GAAG,MAAM,CAAS,cAAc,IAAI,EAAE,CAAC,CAAC;IAEnE,sEAAsE;IACtE,2EAA2E;IAC3E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE,CAAC;YACjB,iDAAiD;YACjD,IAAI,qBAAqB,CAAC,OAAO,KAAK,cAAc,EAAE,CAAC;gBACrD,qBAAqB,CAAC,OAAO,GAAG,cAAc,IAAI,EAAE,CAAC;gBACrD,aAAa,CAAC,cAAc,IAAI,EAAE,CAAC,CAAC;YACtC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,2CAA2C;YAC3C,qBAAqB,CAAC,OAAO,GAAG,EAAE,CAAC;QACrC,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC,CAAC;IAEnC,oGAAoG;IACpG,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;IAEjE,OAAO,CACL,cACE,SAAS,EAAE,uCAAuC;QAChD,yDAAyD;QACzD,kBAAkB;YAChB,CAAC,CAAC,EAAE,CAAC,6CAA6C;YAClD,CAAC,CAAC,kFAAkF;gBACpF,YAAY;oBACV,CAAC,CAAC,YAAY,IAAI,aAAa;wBAC7B,CAAC,CAAC,EAAE,CAAC,2FAA2F;wBAChG,CAAC,CAAC,6DAA6D,CAAC,6CAA6C;oBAC/G,CAAC,CAAC,YAAY;wBACZ,CAAC,CAAC,EAAE,CAAC,0CAA0C;wBAC/C,CAAC,CAAC,4DAA4D,CAAC,+CAA+C;QACpH,EAAE,EACJ,KAAK,EACH,kBAAkB;YAChB,CAAC,CAAC;gBACA,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf;YACD,CAAC,CAAC;gBACA,KAAK,EAAE,GAAG,KAAK,GAAG;gBAClB,MAAM,EAAE,GAAG,MAAM,GAAG;gBACpB,QAAQ,EAAE,MAAM;gBAChB,SAAS,EAAE,MAAM;gBACjB,YAAY,EAAE,MAAM;aACrB,YAIJ,CAAC,YAAY,IAAI,YAAY,IAAI,CAChC,cAAK,SAAS,EAAC,mCAAmC,YAChD,KAAC,SAAS,IACR,IAAI,EAAE;oBACJ,KAAK,EAAE,YAAY;oBACnB,WAAW,EAAE,IAAI;oBACjB,QAAQ,EAAE,GAAG,EAAE,GAAG,CAAC;oBACnB,WAAW,EAAE,SAAS;oBACtB,KAAK,EAAE,KAAK;iBACb,EACD,OAAO,EAAC,QAAQ,GAChB,GACE,CACP,GACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC"}