@tinyweb_dev/oe-exam-sdk 0.1.28 → 0.1.30

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

@@ -1 +1,420 @@
-"use client";import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{useState as o,useRef as a,useCallback as n,useEffect as s}from"react";import{Button as i}from"../../../components/ui/button";import{Label as l}from"../../../components/ui/label";import{Card as d,CardContent as c,CardHeader as m,CardTitle as g}from"../../../components/ui/card";import{PointsInput as h}from"../../../components/ui/points-input";import{X as u,Pencil as p,Eye as b,Plus as x,Trash2 as f,MessageSquare as N,Palette as v,Lightbulb as y,Image as w}from"lucide-react";import{Input as k}from"../../../components/ui/input";import{Textarea as C}from"../../../components/ui/textarea";import{FileUpload as I}from"../../../components/ui/file-upload";import{Select as U,SelectContent as E,SelectItem as M,SelectTrigger as L,SelectValue as j}from"../../../components/ui/select";import{ColorRegionNode as S}from"./ColorRegionNode";import{usePresignedFileUrl as z}from"../../../shared/lib/hooks";import{COLOR_PALETTE as T}from"../_shared/constants/color-palette";import{useReactHookForm as V}from"../../../shared/lib/hooks/useReactHookForm";import{readAndColorObjectsFormSchema as R}from"../../../shared/lib/validation/read-and-color-objects.validation";function A({initialData:A,onSave:$,onCancel:D,onChange:B,onUnsavedChangesChange:H,validationRef:P,config:q,ClientComponent:F}){const[J,O]=o(A?.backgroundImageUrl||""),[X,K]=o(A?.colorNodes||[]),[W,Y]=o(A?.regionNodes||[]),[G,Q]=o(Array.isArray(A?.instructions)?A.instructions:[]),[_,Z]=o(""),[ee,re]=o(""),[te,oe]=o(!1),ae=q.showColorLabel||!1,[ne,se]=o(A?.points||1),[ie,le]=o(A?.explanation||""),de=V({defaultValues:{backgroundImageUrl:J,colorNodes:X,regionNodes:W,instructions:G},zodSchema:R,mode:"onBlur"}),ce=a(A),me=a(!0),ge=a(!1);s(()=>{P&&(P.current={triggerValidation:async()=>Ve(),getFormData:()=>({backgroundImageUrl:J,colorNodes:X,regionNodes:W,instructions:G,points:ne,explanation:ie})})},[P,J,X,W,G,ne,ie]);const{previewUrl:he}=z(J),[ue,pe]=o("");s(()=>{he&&pe(he)},[he]),s(()=>{!(JSON.stringify(ce.current)!==JSON.stringify(A))&&ge.current||(me.current=!0,ce.current=A,ge.current=!0,A?(void 0!==A.backgroundImageUrl&&O(A.backgroundImageUrl),void 0!==A.colorNodes&&K(A.colorNodes),void 0!==A.regionNodes&&Y(A.regionNodes),void 0!==A.instructions&&Q(Array.isArray(A.instructions)?A.instructions:[]),void 0!==A.points&&se(A.points),void 0!==A.explanation&&le(A.explanation)):(O(""),K([]),Y([]),Q([]),se(1),le("")),setTimeout(()=>{me.current=!1},150))},[A]);const be=a(B);s(()=>{be.current=B},[B]);const xe=a("");s(()=>{if(me.current||!ge.current){const e=JSON.stringify({backgroundImageUrl:J,colorNodes:X,regionNodes:W,instructions:G,explanation:ie});return void(xe.current=e)}if(!J&&0===X.length&&0===W.length)return;const e={backgroundImageUrl:J,colorNodes:X,regionNodes:W,instructions:G,points:ne,explanation:ie},r=JSON.stringify(e);xe.current!==r&&(xe.current=r,be.current?.(e))},[J,X,W,G,ne,ie]);const[fe,Ne]=o(!1),[ve,ye]=o(!1),we=a(null),[ke,Ce]=o(null),[Ie,Ue]=o({x:0,y:0}),Ee=n((e,r,t,o)=>{if(!fe&&(o.preventDefault(),Ce(e),we.current)){const e=we.current.getBoundingClientRect(),a=(o.clientX-e.left)/e.width*100,n=(o.clientY-e.top)/e.height*100;Ue({x:a-r,y:n-t})}},[fe]),Me=n(e=>{if(!ke||!we.current)return;const r=we.current.getBoundingClientRect(),t=(e.clientX-r.left)/r.width*100,o=(e.clientY-r.top)/r.height*100;Y(e=>e.map(e=>{if(e.id!==ke)return e;const r=Math.max(0,Math.min(100-e.width,t-Ie.x)),a=Math.max(0,Math.min(100-e.height,o-Ie.y));return{...e,x:Math.round(10*r)/10,y:Math.round(10*a)/10}}))},[ke,Ie]),Le=n(()=>{Ce(null)},[]);s(()=>{if(ke)return window.addEventListener("mousemove",Me),window.addEventListener("mouseup",Le),()=>{window.removeEventListener("mousemove",Me),window.removeEventListener("mouseup",Le)}},[ke,Me,Le]);const je=n(e=>{const r=W.find(r=>r.linkedColorNodeId===e);r&&Y(e=>e.filter(e=>e.id!==r.id)),K(r=>r.filter(r=>r.id!==e))},[W]),Se=n(e=>{Y(r=>r.filter(r=>r.id!==e))},[]),ze=n(()=>{if(!_)return void de.setError("colorNodes",{message:"Vui lòng chọn màu!"});if(X.some(e=>e.color===_))return void de.setError("colorNodes",{message:"Màu này đã được thêm!"});if(!ve)return void de.setError("backgroundImageUrl",{message:"Vui lòng upload ảnh nền trước!"});const e=Date.now(),r={id:`color-${e}`,color:_,...ae&&ee.trim()?{label:ee.trim()}:{}},t={id:`region-${e}`,x:70*Math.random()+10,y:70*Math.random()+10,width:6,height:5,color:_,linkedColorNodeId:r.id};K(e=>[...e,r]),Y(e=>[...e,t]),Z(""),re(""),oe(!1),de.clearErrors()},[_,ee,ae,ve,X,de]),Te=!1!==q.instructionsRequired,Ve=()=>{de.setValue("backgroundImageUrl",J),de.setValue("colorNodes",X),de.setValue("regionNodes",W),de.setValue("instructions",G);const e=R.safeParse({backgroundImageUrl:J,colorNodes:X,regionNodes:W,instructions:Te?G:["placeholder"]});if(!e.success){e.error.issues.forEach(e=>{if(!Te&&"instructions"===e.path[0])return;const r=e.path.join(".");de.setError(r,{message:e.message})});return!e.error.issues.some(e=>Te||"instructions"!==e.path[0])}return!0},Re=(()=>{const e={},r=de.formState.errors.backgroundImageUrl;r&&(e.backgroundImageUrl=r.message);const t=de.formState.errors.colorNodes;t&&"string"==typeof t.message&&(e.colorNodes=t.message);const o=de.formState.errors.regionNodes;o&&"string"==typeof o.message&&(e.regionNodes=o.message);const a=de.formState.errors.instructions;return a&&"string"==typeof a.message&&(e.instructions=a.message),a&&Array.isArray(a)&&(e.instructionItems={},a.forEach((r,t)=>{r&&"string"==typeof r.message&&(e.instructionItems[t]=r.message)})),e})();if(fe){const t={backgroundImageUrl:he||J,colorNodes:X,regionNodes:W,instructions:G,explanation:ie};return r("div",{className:"space-y-6",children:[e(d,{children:e(m,{children:r("div",{className:"flex items-center justify-between",children:[e("div",{children:e(g,{children:q.previewTitle})}),r(i,{variant:"outline",size:"sm",onClick:()=>Ne(!1),children:[e(p,{className:"mr-2 h-4 w-4"}),"Quay lại Edit Mode"]})]})})}),e(F,{questionData:t,onSubmit:()=>{},isReviewMode:!0,explanation:ie})]})}const Ae=T.filter(e=>!X.some(r=>r.color===e));return r("div",{className:"space-y-6",children:[r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-blue-100/50",children:[e("div",{className:"h-1.5 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500"}),e(m,{className:"pb-4",children:r("div",{className:"flex items-center justify-between",children:[r("div",{className:"flex items-center gap-3",children:[e("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:e(v,{className:"h-5 w-5 text-white"})}),r("div",{children:[e(g,{className:"text-xl font-bold text-gray-900",children:q.creatorTitle}),e("p",{className:"text-sm text-gray-500",children:q.creatorSubtitle})]})]}),r(i,{variant:"outline",size:"sm",onClick:()=>Ne(!fe),className:"gap-2 border-indigo-200 text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700",children:[e(b,{className:"h-4 w-4"}),"Xem trước"]})]})}),r(c,{className:"space-y-6",children:[!fe&&e("div",{className:"rounded-xl border border-gray-200 bg-gradient-to-r from-gray-50 to-slate-50 p-4",children:e(h,{value:ne,onChange:e=>se(Number(e.target.value)||1)})}),!fe&&e("div",{className:"rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50 p-5 shadow-sm",children:r("div",{className:"flex items-start gap-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-blue-100",children:e(y,{className:"h-4 w-4 text-blue-600"})}),r("div",{className:"text-sm text-blue-900",children:[e("p",{className:"font-semibold text-blue-800",children:"Hướng dẫn tạo câu hỏi"}),e("ul",{className:"mt-2 space-y-1.5 text-blue-700",children:q.instructionsTips.map((t,o)=>r("li",{className:"flex items-center gap-2",children:[e("span",{className:"h-1.5 w-1.5 rounded-full bg-blue-400"}),t]},o))})]})]})}),!fe&&r("div",{className:"space-y-3",children:[r("div",{className:"flex items-center justify-between",children:[r(l,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(N,{className:"h-4 w-4 text-indigo-500"}),q.instructionsLabel," ",Te&&e("span",{className:"text-red-500",children:"*"})]}),r(i,{onClick:()=>{Q([...G,""]),de.clearErrors("instructions")},className:"gap-2 border-green-200 text-green-600 hover:bg-green-50 hover:text-green-700",size:"sm",variant:"outline",children:[e(x,{className:"h-4 w-4"}),"Thêm câu lệnh"]})]}),Re.instructions&&r("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:[e("span",{className:"text-lg",children:"❌"}),e("p",{className:"text-sm text-red-600",children:Re.instructions})]}),e("div",{className:"space-y-3",children:G.map((t,o)=>{const a=Re.instructionItems?.[o];return r("div",{className:"group relative rounded-xl border-2 p-3 transition-all duration-200 "+(t.trim()?"border-green-200 bg-gradient-to-r from-green-50 to-emerald-50":"border-gray-200 bg-white hover:border-gray-300"),children:[r("div",{className:"flex items-center gap-3",children:[e("div",{className:"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg font-bold transition-all "+(t.trim()?"bg-gradient-to-br from-green-500 to-emerald-600 text-white shadow-md":"bg-gray-100 text-gray-600"),children:o+1}),e(k,{value:t,onChange:e=>{const r=[...G];r[o]=e.target.value,Q(r),de.clearErrors("instructions")},placeholder:`Ví dụ: ${q.instructionPlaceholder}`,className:"flex-1 border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200 "+(a?"border-red-400":"")}),e(i,{size:"sm",variant:"ghost",onClick:()=>{Q(G.filter((e,r)=>r!==o))},className:"text-gray-400 hover:bg-red-50 hover:text-red-500",children:e(f,{className:"h-4 w-4"})})]}),a&&e("p",{className:"ml-11 mt-2 text-sm text-red-600",children:a})]},o)})}),0===G.length&&r("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:[e("span",{className:"text-lg",children:"⚠️"}),e("p",{className:"text-sm text-amber-800",children:'Chưa có hướng dẫn nào. Nhấn "Thêm câu lệnh" để bắt đầu.'})]})]}),r("div",{className:"space-y-2",children:[r(l,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(w,{className:"h-4 w-4 text-indigo-500"}),"Ảnh nền ",e("span",{className:"text-red-500",children:"*"})]}),e(I,{id:"image-upload",label:"Ảnh nền",accept:"image/*",value:J,onChange:e=>{O(e),ye(!1),de.clearErrors()},onPresignedUrlChange:e=>{pe(e),ye(!1)},disabled:fe,maxSize:5,placeholder:"Paste URL hoặc upload file",required:!0,autoUpload:!0,prefix:"questions",onFileLoad:()=>{ye(!1)}}),Re.backgroundImageUrl&&e("p",{className:"mt-1 text-sm text-red-600",children:Re.backgroundImageUrl})]}),!fe&&r("div",{className:"space-y-3",children:[r("div",{className:"flex items-center justify-between",children:[r(l,{className:"flex items-center gap-2 text-base font-semibold text-gray-800",children:[e(v,{className:"h-4 w-4 text-purple-500"}),q.addItemLabel||"Thêm Màu"," ",e("span",{className:"text-red-500",children:"*"})]}),!te&&r(i,{onClick:()=>oe(!0),className:"gap-2 border-purple-200 text-purple-600 hover:bg-purple-50 hover:text-purple-700",size:"sm",variant:"outline",disabled:0===Ae.length,children:[e(x,{className:"h-4 w-4"}),q.addItemLabel||"Thêm màu"]})]}),Re.colorNodes&&r("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:[e("span",{className:"text-lg",children:"❌"}),e("p",{className:"text-sm text-red-600",children:Re.colorNodes})]}),te&&r("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:[ae&&e(k,{value:ee,onChange:e=>re(e.target.value),placeholder:q.colorLabelPlaceholder||"Nhập label (ví dụ: Tom, Apple...)",className:"h-9 border-gray-200 bg-white"}),r("div",{className:"flex gap-2",children:[r(U,{value:_,onValueChange:Z,children:[e(L,{className:"flex-1 border-gray-200 bg-white",children:e(j,{placeholder:"Chọn màu..."})}),e(E,{children:Ae.map(t=>e(M,{value:t,children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"h-4 w-4 rounded border border-gray-300",style:{backgroundColor:t}}),e("span",{className:"font-mono text-xs",children:t})]})},t))})]}),e(i,{size:"sm",onClick:ze,disabled:!_||0===Ae.length||ae&&!ee.trim(),className:"bg-purple-600 hover:bg-purple-700",children:"Tạo"}),e(i,{size:"sm",variant:"outline",onClick:()=>{oe(!1),Z(""),re("")},children:"Hủy"})]})]}),0===X.length&&!te&&r("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:[e("span",{className:"text-lg",children:"⚠️"}),e("p",{className:"text-sm text-amber-800",children:q.emptyItemMessage||'Chưa có màu nào. Nhấn "Thêm màu" để bắt đầu.'})]})]}),Re.regionNodes&&r("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:[e("span",{className:"text-lg",children:"❌"}),e("p",{className:"text-sm text-red-600",children:Re.regionNodes})]})]})]}),r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-indigo-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-indigo-400 to-purple-500"}),e(m,{className:"pb-3",children:r("div",{className:"flex items-center gap-2",children:[e(g,{className:"text-base font-semibold text-gray-800",children:"Workspace — Ảnh nền"}),e("span",{className:"text-xs text-gray-500",children:"Kéo thả region để định vị"})]})}),r(c,{className:"p-0",children:[X.length>0&&e("div",{className:"border-b border-gray-100 px-4 py-3 flex flex-wrap gap-2",children:X.map(t=>r("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:[e("div",{className:"h-4 w-4 rounded border border-gray-300",style:{backgroundColor:t.color}}),t.label?e("span",{className:"text-xs",children:t.label}):e("span",{className:"font-mono text-xs",children:t.color}),!fe&&e("button",{onClick:()=>je(t.id),className:"group rounded p-0.5 transition-all hover:scale-110 hover:bg-red-100",type:"button",children:e(u,{className:"h-3 w-3 text-gray-500 transition-colors group-hover:text-red-600"})})]},t.id))}),e("div",{ref:we,className:"relative w-full overflow-hidden select-none isolate",style:{cursor:ke?"grabbing":"default"},children:ue?r(t,{children:[e("img",{src:ue,alt:"Background",className:"block w-full h-auto",draggable:!1,onLoad:()=>ye(!0),onError:()=>{de.setError("backgroundImageUrl",{message:"Không thể load ảnh!"}),ye(!1)}}),ve&&W.map(r=>{const t=X.find(e=>e.id===r.linkedColorNodeId);return e("div",{style:{position:"absolute",left:`${r.x}%`,top:`${r.y}%`,width:`${r.width}%`,height:`${r.height}%`,cursor:fe?"default":"grab",zIndex:ke===r.id?2:1},onMouseDown:e=>Ee(r.id,r.x,r.y,e),children:e(S,{data:{color:r.color,x:r.x,y:r.y,width:r.width,height:r.height,onRemove:()=>Se(r.id),isEditMode:!fe,isClientMode:fe,label:t?.label||""}})},r.id)})]}):r("div",{className:"flex flex-col items-center justify-center gap-2 py-20 text-gray-400",children:[e("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:e("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"})}),e("p",{className:"text-sm",children:"Chưa có ảnh nền. Hãy upload ảnh ở trên."})]})})]})]}),r(d,{className:"overflow-hidden border-0 bg-white shadow-lg shadow-gray-100/50",children:[e("div",{className:"h-1 bg-gradient-to-r from-gray-300 to-gray-400"}),e(m,{className:"pb-3",children:r("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex h-6 w-6 items-center justify-center rounded-md bg-gray-100",children:e(N,{className:"h-3.5 w-3.5 text-gray-600"})}),e(g,{className:"text-lg font-semibold text-gray-800",children:"Giải thích"})]})}),e(c,{children:e(C,{id:"explanation",value:ie,onChange:e=>le(e.target.value),placeholder:"Nhập giải thích cho đáp án đúng...",rows:3,className:"border-gray-200 bg-white transition-all focus:border-indigo-300 focus:ring-indigo-200"})})]})]})}export function ColorRegionCreator(r){return e(A,{...r})}
+'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 });
+}

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

@@ -1 +1,59 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{memo as o,useState as r,useEffect as d,useRef as i}from"react";import{ColorNode as t}from"./ColorNode";export const ColorRegionNode=o(({data:o})=>{const{color:l,width:n,height:a,isClientMode:s,savedColor:c,isUnassignedRegion:h,isHighlighted:m,label:b}=o,[g,u]=r(c||""),p=i(c||"");d(()=>{s?p.current!==c&&(p.current=c||"",u(c||"")):p.current=""},[s,c]);const x=s?g:l||"";return e("div",{className:"relative rounded-2xl transition-all "+(h?"":s?x||m?"":"rounded-2xl border border-dashed border-red-300 bg-black/10":x?"":"rounded-2xl border border-dashed border-red-300 bg-black/5"),style:h?{width:"100%",height:"100%"}:{width:`${n}%`,height:`${a}%`,minWidth:"60px",minHeight:"40px",borderRadius:"16px"},children:!s&&x&&e("div",{className:"pointer-events-none h-full w-full",children:e(t,{data:{color:x,isConnected:!0,onRemove:()=>{},displayMode:"compact",label:b},variant:"client"})})})});ColorRegionNode.displayName="ColorRegionNode";
+'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';