embroidery-qc-image 1.0.5 → 1.0.7

package/dist/index.esm.js

@@ -31,73 +31,191 @@ function styleInject(css, ref) {
 var css_248z = ".render-embroidery {\r\n  display: inline-block;\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 100%;\r\n}\r\n\r\n.render-embroidery-canvas {\r\n  display: block;\r\n  width: 100%;\r\n  height: auto;\r\n  image-rendering: high-quality;\r\n  background: transparent;\r\n}\r\n";
 styleInject(css_248z);
 
-// Color mapping
+// ============================================================================
+// CONSTANTS
+// ============================================================================
 const COLOR_MAP = {
-    "Army (1394)": "#4B5320",
-    Army: "#4B5320",
-    "Black (8)": "#000000",
-    Black: "#000000",
-    "Bubblegum (1309)": "#FFC1CC",
-    Bubblegum: "#FFC1CC",
-    "Carolina Blue (1274)": "#7BAFD4",
-    "Carolina Blue": "#7BAFD4",
-    "Celadon (1098)": "#ACE1AF",
-    Celadon: "#ACE1AF",
-    "Coffee Bean (1145)": "#6F4E37",
-    "Coffee Bean": "#6F4E37",
-    "Daffodil (1180)": "#FFFF31",
-    Daffodil: "#FFFF31",
-    "Dark Gray (1131)": "#A9A9A9",
-    "Dark Gray": "#A9A9A9",
-    "Doe Skin Beige (1344)": "#F5E6D3",
-    "Doe Skin Beige": "#F5E6D3",
-    "Dusty Blue (1373)": "#6699CC",
-    "Dusty Blue": "#6699CC",
-    "Forest Green (1397)": "#228B22",
-    "Forest Green": "#228B22",
-    "Gold (1425)": "#FFD700",
-    Gold: "#FFD700",
-    "Gray (1118)": "#808080",
-    Gray: "#808080",
-    "Ivory (1072)": "#FFFFF0",
-    Ivory: "#FFFFF0",
-    "Lavender (1032)": "#E6E6FA",
-    Lavender: "#E6E6FA",
-    "Light Denim (1133)": "#B0C4DE",
-    "Light Denim": "#B0C4DE",
-    "Light Salmon (1018)": "#FFA07A",
-    "Light Salmon": "#FFA07A",
-    "Maroon (1374)": "#800000",
-    Maroon: "#800000",
-    "Navy Blue (1044)": "#000080",
-    "Navy Blue": "#000080",
-    "Olive Green (1157)": "#556B2F",
-    "Olive Green": "#556B2F",
-    "Orange (1278)": "#FFA500",
-    Orange: "#FFA500",
-    "Peach Blush (1053)": "#FFCCCB",
-    "Peach Blush": "#FFCCCB",
-    "Pink (1148)": "#FFC0CB",
-    Pink: "#FFC0CB",
-    "Purple (1412)": "#800080",
-    Purple: "#800080",
-    "Red (1037)": "#FF0000",
-    Red: "#FF0000",
-    "Silver Sage (1396)": "#A8A8A8",
-    "Silver Sage": "#A8A8A8",
-    "Summer Sky (1432)": "#87CEEB",
-    "Summer Sky": "#87CEEB",
-    "Terra Cotta (1477)": "#E2725B",
-    "Terra Cotta": "#E2725B",
-    "Sand (1055)": "#F4A460",
-    Sand: "#F4A460",
-    "White (9)": "#FFFFFF",
-    White: "#FFFFFF",
+    "Army (1394)": "#4B5320", Army: "#4B5320",
+    "Black (8)": "#000000", Black: "#000000",
+    "Bubblegum (1309)": "#FFC1CC", Bubblegum: "#FFC1CC",
+    "Carolina Blue (1274)": "#7BAFD4", "Carolina Blue": "#7BAFD4",
+    "Celadon (1098)": "#ACE1AF", Celadon: "#ACE1AF",
+    "Coffee Bean (1145)": "#6F4E37", "Coffee Bean": "#6F4E37",
+    "Daffodil (1180)": "#FFFF31", Daffodil: "#FFFF31",
+    "Dark Gray (1131)": "#A9A9A9", "Dark Gray": "#A9A9A9",
+    "Doe Skin Beige (1344)": "#F5E6D3", "Doe Skin Beige": "#F5E6D3",
+    "Dusty Blue (1373)": "#6699CC", "Dusty Blue": "#6699CC",
+    "Forest Green (1397)": "#228B22", "Forest Green": "#228B22",
+    "Gold (1425)": "#FFD700", Gold: "#FFD700",
+    "Gray (1118)": "#808080", Gray: "#808080",
+    "Ivory (1072)": "#FFFFF0", Ivory: "#FFFFF0",
+    "Lavender (1032)": "#E6E6FA", Lavender: "#E6E6FA",
+    "Light Denim (1133)": "#B0C4DE", "Light Denim": "#B0C4DE",
+    "Light Salmon (1018)": "#FFA07A", "Light Salmon": "#FFA07A",
+    "Maroon (1374)": "#800000", Maroon: "#800000",
+    "Navy Blue (1044)": "#000080", "Navy Blue": "#000080",
+    "Olive Green (1157)": "#556B2F", "Olive Green": "#556B2F",
+    "Orange (1278)": "#FFA500", Orange: "#FFA500",
+    "Peach Blush (1053)": "#FFCCCB", "Peach Blush": "#FFCCCB",
+    "Pink (1148)": "#FFC0CB", Pink: "#FFC0CB",
+    "Purple (1412)": "#800080", Purple: "#800080",
+    "Red (1037)": "#FF0000", Red: "#FF0000",
+    "Silver Sage (1396)": "#A8A8A8", "Silver Sage": "#A8A8A8",
+    "Summer Sky (1432)": "#87CEEB", "Summer Sky": "#87CEEB",
+    "Terra Cotta (1477)": "#E2725B", "Terra Cotta": "#E2725B",
+    "Sand (1055)": "#F4A460", Sand: "#F4A460",
+    "White (9)": "#FFFFFF", White: "#FFFFFF",
 };
-const FONT_BASE_URL = "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/fonts";
-const ICON_BASE_URL = "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/icons";
-const FLORAL_BASE_URL = "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/florals";
-const THREAD_COLOR_BASE_URL = "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/thread-colors";
+const BASE_URLS = {
+    FONT: "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/fonts",
+    ICON: "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/icons",
+    FLORAL: "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/florals",
+    THREAD_COLOR: "https://s3.hn-1.cloud.cmctelecom.vn/god-system-images/embroidery/thread-colors",
+};
+const LAYOUT = {
+    // Font families
+    HEADER_FONT_FAMILY: "Times New Roman",
+    FONT_FAMILY: "Arial",
+    // Font sizes (base values, will be multiplied by scaleFactor)
+    HEADER_FONT_SIZE: 220,
+    TEXT_FONT_SIZE: 200,
+    OTHER_FONT_SIZE: 160,
+    // Colors
+    HEADER_COLOR: "#000000",
+    LABEL_COLOR: "#444444",
+    BACKGROUND_COLOR: "#FFFFFF",
+    // Text alignment
+    TEXT_ALIGN: "left",
+    TEXT_BASELINE: "top",
+    // Spacing
+    LINE_GAP: 40,
+    PADDING: 40,
+    SECTION_SPACING: 60,
+    ELEMENT_SPACING: 100,
+    SWATCH_SPACING: 25,
+    FLORAL_SPACING: 300,
+    // Visual styling
+    SWATCH_HEIGHT_RATIO: 2.025,
+    UNDERLINE_POSITION: 0.9,
+    UNDERLINE_WIDTH: 10,
+    // Swatch reserved space
+    SWATCH_RESERVED_SPACE: 1000,
+    MIN_TEXT_WIDTH: 400,
+};
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+const loadFont = (fontName) => {
+    return new Promise((resolve) => {
+        const fontUrl = `${BASE_URLS.FONT}/${encodeURIComponent(fontName)}.woff2`;
+        const fontFace = new FontFace(fontName, `url(${fontUrl})`);
+        fontFace
+            .load()
+            .then((loadedFont) => {
+            document.fonts.add(loadedFont);
+            resolve();
+        })
+            .catch(() => {
+            console.warn(`Could not load font ${fontName} from CDN`);
+            resolve();
+        });
+    });
+};
+const getImageUrl = (type, value) => {
+    if (type === "icon")
+        return `${BASE_URLS.ICON}/Icon ${value}.png`;
+    if (type === "floral")
+        return `${BASE_URLS.FLORAL}/${value}.png`;
+    return `${BASE_URLS.THREAD_COLOR}/${value}.png`;
+};
+const loadImage = (url, imageRefs, onLoad) => {
+    if (imageRefs.current.has(url))
+        return;
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.src = url;
+    img.onload = onLoad;
+    imageRefs.current.set(url, img);
+};
+const wrapText = (ctx, text, x, y, maxWidth, lineHeight) => {
+    const words = text.split(" ");
+    const lines = [];
+    let currentLine = words[0];
+    for (let i = 1; i < words.length; i++) {
+        const testLine = currentLine + " " + words[i];
+        if (ctx.measureText(testLine).width > maxWidth && currentLine.length > 0) {
+            lines.push(currentLine);
+            currentLine = words[i];
+        }
+        else {
+            currentLine = testLine;
+        }
+    }
+    lines.push(currentLine);
+    let currentY = y;
+    lines.forEach((line) => {
+        ctx.fillText(line, x, currentY);
+        currentY += lineHeight;
+    });
+    return {
+        height: lines.length * lineHeight,
+        lastLineWidth: ctx.measureText(lines[lines.length - 1]).width,
+        lastLineY: y + (lines.length - 1) * lineHeight,
+    };
+};
+const wrapTextMultiColor = (ctx, text, colors, x, y, maxWidth, lineHeight) => {
+    const words = text.split(" ");
+    const lines = [];
+    const lineStartIndices = [0];
+    let currentLine = words[0];
+    let currentCharIndex = words[0].length;
+    for (let i = 1; i < words.length; i++) {
+        const testLine = currentLine + " " + words[i];
+        if (ctx.measureText(testLine).width > maxWidth && currentLine.length > 0) {
+            lines.push(currentLine);
+            lineStartIndices.push(currentCharIndex + 1);
+            currentLine = words[i];
+            currentCharIndex += words[i].length + 1;
+        }
+        else {
+            currentLine = testLine;
+            currentCharIndex += words[i].length + 1;
+        }
+    }
+    lines.push(currentLine);
+    let currentY = y;
+    lines.forEach((line, lineIdx) => {
+        let currentX = x;
+        const startCharIdx = lineIdx > 0 ? lineStartIndices[lineIdx] : 0;
+        for (let i = 0; i < line.length; i++) {
+            const char = line[i];
+            const globalCharIdx = startCharIdx + i;
+            const colorIndex = globalCharIdx % colors.length;
+            const color = colors[colorIndex];
+            ctx.fillStyle = COLOR_MAP[color] || "#000000";
+            ctx.fillText(char, currentX, currentY);
+            currentX += ctx.measureText(char).width;
+        }
+        currentY += lineHeight;
+    });
+    return lines.length * lineHeight;
+};
+const drawSwatches = (ctx, colors, startX, startY, swatchHeight, scaleFactor, imageRefs) => {
+    let swatchX = startX;
+    colors.forEach((color) => {
+        const url = getImageUrl("threadColor", color);
+        const img = imageRefs.current.get(url);
+        if (img && img.complete && img.naturalHeight > 0) {
+            const ratio = img.naturalWidth / img.naturalHeight;
+            const swatchW = Math.max(1, Math.floor(swatchHeight * ratio));
+            ctx.drawImage(img, swatchX, startY, swatchW, swatchHeight);
+            swatchX += swatchW + LAYOUT.SWATCH_SPACING * scaleFactor;
+        }
+    });
+};
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
 const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
     const [canvasSize] = useState({ width: 4200, height: 4800 });
     const [loadedFonts, setLoadedFonts] = useState(new Set());
@@ -107,7 +225,7 @@ const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
     // Load fonts
     useEffect(() => {
         const loadFonts = async () => {
-            if (!config.sides || config.sides.length === 0)
+            if (!config.sides?.length)
                 return;
             const fontsToLoad = new Set();
             config.sides.forEach((side) => {
@@ -118,14 +236,14 @@ const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
                 });
             });
             for (const fontName of fontsToLoad) {
-                if (loadedFonts.has(fontName))
-                    continue;
-                try {
-                    await loadFont(fontName);
-                    setLoadedFonts((prev) => new Set(prev).add(fontName));
-                }
-                catch (error) {
-                    console.warn(`Could not load font ${fontName}:`, error);
+                if (!loadedFonts.has(fontName)) {
+                    try {
+                        await loadFont(fontName);
+                        setLoadedFonts((prev) => new Set(prev).add(fontName));
+                    }
+                    catch (error) {
+                        console.warn(`Could not load font ${fontName}:`, error);
+                    }
                 }
             }
         };
@@ -133,652 +251,410 @@ const EmbroideryQCImage = ({ config, className = "", style = {}, }) => {
     }, [config.sides, loadedFonts]);
     // Load images
     useEffect(() => {
-        const loadImages = async () => {
-            if (!config.sides || config.sides.length === 0)
-                return;
-            // Load mockup image (not background). It will be drawn at bottom-right.
-            if (config.image_url) {
-                // Try with CORS first. If it fails (no CORS headers), retry without CORS
-                const loadMockup = (useCors) => {
-                    const img = new Image();
-                    if (useCors)
-                        img.crossOrigin = "anonymous";
-                    img.onload = () => {
-                        imageRefs.current.set("mockup", img);
-                        setImagesLoaded((prev) => prev + 1);
-                    };
-                    img.onerror = () => {
-                        if (useCors) {
-                            // Retry without CORS; canvas may become tainted on export
-                            loadMockup(false);
-                        }
-                    };
-                    img.src = config.image_url;
+        if (!config.sides?.length)
+            return;
+        const incrementCounter = () => setImagesLoaded((prev) => prev + 1);
+        // Load mockup
+        if (config.image_url) {
+            const loadMockup = (useCors) => {
+                const img = new Image();
+                if (useCors)
+                    img.crossOrigin = "anonymous";
+                img.onload = () => {
+                    imageRefs.current.set("mockup", img);
+                    incrementCounter();
                 };
-                loadMockup(true);
-            }
-            // Load icons
-            config.sides.forEach((side) => {
-                side.positions.forEach((position) => {
-                    if (position.type === "ICON" && position.icon !== 0) {
-                        const iconUrl = `${ICON_BASE_URL}/Icon ${position.icon}.png`;
-                        if (!imageRefs.current.has(iconUrl)) {
-                            const img = new Image();
-                            img.crossOrigin = "anonymous";
-                            img.src = iconUrl;
-                            img.onload = () => setImagesLoaded((prev) => prev + 1);
-                            imageRefs.current.set(iconUrl, img);
-                        }
-                    }
-                    if (position.type === "TEXT" && position.floral_pattern) {
-                        const floralUrl = `${FLORAL_BASE_URL}/${position.floral_pattern}.png`;
-                        if (!imageRefs.current.has(floralUrl)) {
-                            const img = new Image();
-                            img.crossOrigin = "anonymous";
-                            img.src = floralUrl;
-                            img.onload = () => setImagesLoaded((prev) => prev + 1);
-                            imageRefs.current.set(floralUrl, img);
-                        }
+                img.onerror = () => useCors && loadMockup(false);
+                img.src = config.image_url;
+            };
+            loadMockup(true);
+        }
+        // Load all other images
+        config.sides.forEach((side) => {
+            side.positions.forEach((position) => {
+                if (position.type === "ICON") {
+                    if (position.icon !== 0) {
+                        loadImage(getImageUrl("icon", position.icon), imageRefs, incrementCounter);
                     }
-                    // Load thread color images for TEXT positions
-                    if (position.type === "TEXT") {
-                        // Load color image if position has color
-                        if (position.color) {
-                            const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${position.color}.png`;
-                            if (!imageRefs.current.has(threadColorUrl)) {
-                                const img = new Image();
-                                img.crossOrigin = "anonymous";
-                                img.src = threadColorUrl;
-                                img.onload = () => setImagesLoaded((prev) => prev + 1);
-                                imageRefs.current.set(threadColorUrl, img);
-                            }
-                        }
-                        // Load character color images
-                        if (position.character_colors &&
-                            position.character_colors.length > 0) {
-                            position.character_colors.forEach((color) => {
-                                const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${color}.png`;
-                                if (!imageRefs.current.has(threadColorUrl)) {
-                                    const img = new Image();
-                                    img.crossOrigin = "anonymous";
-                                    img.src = threadColorUrl;
-                                    img.onload = () => setImagesLoaded((prev) => prev + 1);
-                                    imageRefs.current.set(threadColorUrl, img);
-                                }
-                            });
-                        }
+                    position.layer_colors?.forEach((color) => {
+                        loadImage(getImageUrl("threadColor", color), imageRefs, incrementCounter);
+                    });
+                }
+                if (position.type === "TEXT") {
+                    if (position.floral_pattern) {
+                        loadImage(getImageUrl("floral", position.floral_pattern), imageRefs, incrementCounter);
                     }
-                    // Load thread color images for ICON positions
-                    if (position.type === "ICON" && position.layer_colors) {
-                        position.layer_colors.forEach((color) => {
-                            const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${color}.png`;
-                            if (!imageRefs.current.has(threadColorUrl)) {
-                                const img = new Image();
-                                img.crossOrigin = "anonymous";
-                                img.src = threadColorUrl;
-                                img.onload = () => setImagesLoaded((prev) => prev + 1);
-                                imageRefs.current.set(threadColorUrl, img);
-                            }
-                        });
+                    if (position.color) {
+                        loadImage(getImageUrl("threadColor", position.color), imageRefs, incrementCounter);
                     }
-                });
+                    position.character_colors?.forEach((color) => {
+                        loadImage(getImageUrl("threadColor", color), imageRefs, incrementCounter);
+                    });
+                }
             });
-        };
-        loadImages();
+        });
     }, [config]);
     // Render canvas
     useEffect(() => {
         const renderCanvas = () => {
-            if (!canvasRef.current || !config.sides || config.sides.length === 0) {
+            if (!canvasRef.current || !config.sides?.length)
                 return;
-            }
             const canvas = canvasRef.current;
             const ctx = canvas.getContext("2d");
             if (!ctx)
                 return;
             canvas.width = canvasSize.width;
             canvas.height = canvasSize.height;
-            // Clear with white background
-            ctx.fillStyle = "#FFFFFF";
+            // Set text alignment once
+            ctx.textAlign = LAYOUT.TEXT_ALIGN;
+            ctx.textBaseline = LAYOUT.TEXT_BASELINE;
+            // Clear background
+            ctx.fillStyle = LAYOUT.BACKGROUND_COLOR;
             ctx.fillRect(0, 0, canvas.width, canvas.height);
-            // Collect floral images (for later drawing)
+            // Collect floral assets
             const floralAssets = [];
             const seenFlorals = new Set();
-            if (config.sides) {
-                config.sides.forEach((side) => {
-                    side.positions.forEach((position) => {
-                        if (position.type === "TEXT" && position.floral_pattern) {
-                            const floralUrl = `${FLORAL_BASE_URL}/${position.floral_pattern}.png`;
-                            if (!seenFlorals.has(floralUrl)) {
-                                const img = imageRefs.current.get(floralUrl);
-                                if (img && img.complete && img.naturalWidth > 0) {
-                                    floralAssets.push(img);
-                                    seenFlorals.add(floralUrl);
-                                }
+            config.sides.forEach((side) => {
+                side.positions.forEach((position) => {
+                    if (position.type === "TEXT" && position.floral_pattern) {
+                        const url = getImageUrl("floral", position.floral_pattern);
+                        if (!seenFlorals.has(url)) {
+                            const img = imageRefs.current.get(url);
+                            if (img?.complete && img.naturalWidth > 0) {
+                                floralAssets.push(img);
+                                seenFlorals.add(url);
                             }
                         }
-                    });
-                });
-            }
-            // Helper function to draw mockup and florals
-            const drawMockupAndFlorals = () => {
-                const mockupImg = imageRefs.current.get("mockup");
-                const margin = 40; // small padding
-                let mockupBox = null;
-                if (mockupImg && mockupImg.complete && mockupImg.naturalWidth > 0) {
-                    const maxTargetWidth = Math.min(1800, canvas.width * 0.375);
-                    const maxTargetHeight = canvas.height * 0.375;
-                    const scale = Math.min(maxTargetWidth / mockupImg.naturalWidth, maxTargetHeight / mockupImg.naturalHeight);
-                    const targetWidth = Math.max(1, Math.floor(mockupImg.naturalWidth * scale));
-                    const targetHeight = Math.max(1, Math.floor(mockupImg.naturalHeight * scale));
-                    const targetX = canvas.width - margin - targetWidth;
-                    const targetY = canvas.height - margin - targetHeight;
-                    mockupBox = {
-                        x: targetX,
-                        y: targetY,
-                        w: targetWidth,
-                        h: targetHeight,
-                    };
-                    ctx.drawImage(mockupImg, targetX, targetY, targetWidth, targetHeight);
-                }
-                // Draw florals to the left of mockup
-                if (mockupBox && floralAssets.length > 0) {
-                    const spacing = 300;
-                    const targetHeight = mockupBox.h;
-                    const floralFixedH = Math.min(900, targetHeight);
-                    let currentX = mockupBox.x - spacing;
-                    for (let i = floralAssets.length - 1; i >= 0; i--) {
-                        const img = floralAssets[i];
-                        const ratio = img.naturalWidth / Math.max(1, img.naturalHeight);
-                        const h = floralFixedH;
-                        const w = Math.max(1, Math.floor(h * ratio));
-                        currentX -= w;
-                        const y = mockupBox.y + (targetHeight - h);
-                        ctx.drawImage(img, currentX, y, w, h);
-                        currentX -= spacing;
                     }
-                }
-            };
-            // New approach: Draw images first (bottom layer), then text on top
-            // This allows text to overlay images when needed
-            // Pass 1: Measure actual height with original size (use offscreen canvas for measurement)
+                });
+            });
+            // Calculate scale factor
             const measureCanvas = document.createElement("canvas");
             measureCanvas.width = canvas.width;
             measureCanvas.height = canvas.height;
             const measureCtx = measureCanvas.getContext("2d");
             if (!measureCtx)
                 return;
-            // Set up measurement context
-            measureCtx.font = ctx.font;
-            measureCtx.textAlign = ctx.textAlign;
-            measureCtx.textBaseline = ctx.textBaseline;
-            let measureY = 40;
-            const measureSpacing = 100;
+            measureCtx.textAlign = LAYOUT.TEXT_ALIGN;
+            measureCtx.textBaseline = LAYOUT.TEXT_BASELINE;
+            let measureY = LAYOUT.PADDING;
+            const measureSpacing = LAYOUT.ELEMENT_SPACING;
             config.sides.forEach((side) => {
-                const sideHeight = renderSide(measureCtx, side, measureY, canvas.width, 1);
+                const sideHeight = renderSide(measureCtx, side, measureY, canvas.width, 1, imageRefs);
                 measureY += sideHeight + measureSpacing;
             });
-            const totalMeasuredHeight = measureY; // Total height used
-            // Calculate scale factor - only scale down when necessary
-            // Keep original font sizes (no scale up) - font size is the maximum
-            const topPadding = 40;
-            // No bottom padding - content can go to bottom, mockup will overlay
-            const targetContentHeight = canvas.height - topPadding;
-            // Only scale down if content exceeds canvas height
-            // Never scale up - preserve original font sizes
-            let scaleFactor = 1;
-            if (totalMeasuredHeight > targetContentHeight) {
-                // Scale down to fit exactly
-                scaleFactor = targetContentHeight / totalMeasuredHeight;
-                scaleFactor = Math.max(0.5, scaleFactor); // Minimum scale to prevent tiny fonts
-            }
-            // If content fits, keep scaleFactor = 1 (original font sizes)
-            // Draw mockup and florals first (bottom layer)
-            drawMockupAndFlorals();
-            // Draw content on top (top layer) - text will overlay images if needed
-            let currentY = topPadding * scaleFactor;
+            const scaleFactor = Math.max(0.5, Math.min(1, (canvas.height - LAYOUT.PADDING) / measureY));
+            // Draw mockup and florals
+            drawMockupAndFlorals(ctx, canvas, floralAssets, imageRefs);
+            // Draw content
+            let currentY = LAYOUT.PADDING * scaleFactor;
             config.sides.forEach((side) => {
-                const sideHeight = renderSide(ctx, side, currentY, canvas.width, scaleFactor);
+                const sideHeight = renderSide(ctx, side, currentY, canvas.width, scaleFactor, imageRefs);
                 currentY += sideHeight + measureSpacing * scaleFactor;
             });
         };
-        // Delay rendering to ensure fonts and images are loaded
         const timer = setTimeout(renderCanvas, 100);
         return () => clearTimeout(timer);
     }, [config, canvasSize, loadedFonts, imagesLoaded]);
-    // Helper function to wrap and draw text with word wrapping
-    // Returns: { height: number, lastLineWidth: number, lastLineY: number }
-    const fillTextWrapped = (ctx, text, x, y, maxWidth, lineHeight) => {
-        const words = text.split(" ");
-        const lines = [];
-        let currentLine = words[0];
-        for (let i = 1; i < words.length; i++) {
-            const word = words[i];
-            const testLine = currentLine + " " + word;
-            const metrics = ctx.measureText(testLine);
-            if (metrics.width > maxWidth && currentLine.length > 0) {
-                lines.push(currentLine);
-                currentLine = word;
-            }
-            else {
-                currentLine = testLine;
-            }
-        }
-        lines.push(currentLine);
-        let currentY = y;
-        lines.forEach((line) => {
-            ctx.fillText(line, x, currentY);
-            currentY += lineHeight;
-        });
-        const lastLineWidth = ctx.measureText(lines[lines.length - 1]).width;
-        const lastLineY = y + (lines.length - 1) * lineHeight;
-        return {
-            height: lines.length * lineHeight,
-            lastLineWidth,
-            lastLineY,
-        };
-    };
-    // Helper to wrap and draw multi-color text (for character_colors)
-    const fillTextWrappedMultiColor = (ctx, text, colors, x, y, maxWidth, lineHeight) => {
-        const words = text.split(" ");
-        const lines = [];
-        const lineStartIndices = [0];
-        let currentLine = words[0];
-        let currentCharIndex = words[0].length;
-        for (let i = 1; i < words.length; i++) {
-            const word = words[i];
-            const testLine = currentLine + " " + word;
-            const metrics = ctx.measureText(testLine);
-            if (metrics.width > maxWidth && currentLine.length > 0) {
-                lines.push(currentLine);
-                lineStartIndices.push(currentCharIndex + 1); // +1 for space
-                currentLine = word;
-                currentCharIndex += word.length + 1;
-            }
-            else {
-                currentLine = testLine;
-                currentCharIndex += word.length + 1;
-            }
+    return (jsx("div", { className: `render-embroidery${className ? ` ${className}` : ""}`, style: style, children: jsx("canvas", { ref: canvasRef, className: "render-embroidery-canvas" }) }));
+};
+// ============================================================================
+// RENDERING FUNCTIONS
+// ============================================================================
+const drawMockupAndFlorals = (ctx, canvas, floralAssets, imageRefs) => {
+    const mockupImg = imageRefs.current.get("mockup");
+    if (!mockupImg?.complete || !mockupImg.naturalWidth)
+        return;
+    const margin = LAYOUT.PADDING;
+    const maxWidth = Math.min(1800, canvas.width * 0.375);
+    const maxHeight = canvas.height * 0.375;
+    const scale = Math.min(maxWidth / mockupImg.naturalWidth, maxHeight / mockupImg.naturalHeight);
+    const width = Math.max(1, Math.floor(mockupImg.naturalWidth * scale));
+    const height = Math.max(1, Math.floor(mockupImg.naturalHeight * scale));
+    const x = canvas.width - margin - width;
+    const y = canvas.height - margin - height;
+    ctx.drawImage(mockupImg, x, y, width, height);
+    // Draw florals
+    if (floralAssets.length > 0) {
+        const floralH = Math.min(900, height);
+        let currentX = x - LAYOUT.FLORAL_SPACING;
+        for (let i = floralAssets.length - 1; i >= 0; i--) {
+            const img = floralAssets[i];
+            const ratio = img.naturalWidth / Math.max(1, img.naturalHeight);
+            const w = Math.max(1, Math.floor(floralH * ratio));
+            currentX -= w;
+            ctx.drawImage(img, currentX, y + height - floralH, w, floralH);
+            currentX -= LAYOUT.FLORAL_SPACING;
         }
-        lines.push(currentLine);
-        let currentY = y;
-        lines.forEach((line, lineIdx) => {
-            let currentX = x;
-            const startCharIdx = lineIdx > 0 ? lineStartIndices[lineIdx] : 0;
-            for (let i = 0; i < line.length; i++) {
-                const char = line[i];
-                const globalCharIdx = startCharIdx + i;
-                const colorIndex = globalCharIdx % colors.length;
-                const color = colors[colorIndex];
-                ctx.fillStyle = COLOR_MAP[color] || "#000000";
-                ctx.fillText(char, currentX, currentY);
-                currentX += ctx.measureText(char).width;
+    }
+};
+const renderSide = (ctx, side, startY, width, scaleFactor, imageRefs) => {
+    let currentY = startY;
+    const padding = LAYOUT.PADDING * scaleFactor;
+    const sideWidth = width - 2 * padding;
+    // Draw header
+    ctx.save();
+    const headerFontSize = LAYOUT.HEADER_FONT_SIZE * scaleFactor;
+    ctx.font = `bold ${headerFontSize}px ${LAYOUT.HEADER_FONT_FAMILY}`;
+    ctx.fillStyle = LAYOUT.HEADER_COLOR;
+    const headerResult = wrapText(ctx, side.print_side.toUpperCase(), padding, currentY, sideWidth, headerFontSize);
+    // Draw underline
+    const underlineY = headerResult.lastLineY + headerFontSize * LAYOUT.UNDERLINE_POSITION;
+    ctx.strokeStyle = LAYOUT.HEADER_COLOR;
+    ctx.lineWidth = LAYOUT.UNDERLINE_WIDTH * scaleFactor;
+    ctx.beginPath();
+    ctx.moveTo(padding, underlineY);
+    ctx.lineTo(padding + headerResult.lastLineWidth, underlineY);
+    ctx.stroke();
+    currentY += headerResult.height + LAYOUT.SECTION_SPACING * scaleFactor;
+    ctx.restore();
+    // Compute uniform properties
+    const textPositions = side.positions.filter((p) => p.type === "TEXT");
+    const uniformProps = computeUniformProperties(textPositions);
+    // Render uniform labels (only if more than 1 TEXT position)
+    if (textPositions.length > 1) {
+        currentY += renderUniformLabels(ctx, uniformProps, padding, currentY, sideWidth, scaleFactor, imageRefs);
+    }
+    // Group text positions by common properties
+    const textGroups = groupTextPositions(textPositions);
+    // Render text positions (with proper spacing between groups)
+    let textCounter = 1;
+    textGroups.forEach((group, groupIndex) => {
+        group.forEach((position, index) => {
+            // Add extra spacing between different groups
+            if (index === 0 && groupIndex !== 0) {
+                currentY += LAYOUT.SECTION_SPACING * scaleFactor;
             }
-            currentY += lineHeight;
-        });
-        return lines.length * lineHeight;
-    };
-    const renderSide = (ctx, side, startY, width, scaleFactor = 1) => {
-        let currentY = startY;
-        const padding = 40 * scaleFactor;
-        const sideWidth = width - 2 * padding;
-        const sectionHeight = 200 * scaleFactor;
-        // No background section anymore - just white background
-        // Group positions by common properties for optimization
-        const textGroups = [];
-        let currentGroup = null;
-        let currentProps = null;
-        side.positions.forEach((position) => {
-            if (position.type === "TEXT") {
-                if (!currentGroup ||
-                    currentProps.font !== position.font ||
-                    currentProps.text_shape !== position.text_shape ||
-                    currentProps.color !== position.color ||
-                    currentProps.character_colors?.join(",") !==
-                        position.character_colors?.join(",")) {
-                    // Start new group
-                    if (currentGroup) {
-                        textGroups.push({
-                            positions: currentGroup,
-                            properties: currentProps,
-                        });
-                    }
-                    currentGroup = [position];
-                    currentProps = {
-                        font: position.font,
-                        text_shape: position.text_shape,
-                        color: position.color,
-                        character_colors: position.character_colors,
-                    };
-                }
-                else {
-                    currentGroup.push(position);
-                }
+            // If only 1 TEXT position, show all labels (no uniform labels rendered)
+            const showLabels = textPositions.length === 1
+                ? { font: true, shape: true, floral: true, color: true }
+                : {
+                    font: !uniformProps.isUniform.font,
+                    shape: !uniformProps.isUniform.shape,
+                    floral: !uniformProps.isUniform.floral,
+                    color: !uniformProps.isUniform.color,
+                };
+            const height = renderTextPosition(ctx, position, padding, currentY, sideWidth, textCounter, showLabels, scaleFactor, imageRefs);
+            if (height > 0) {
+                currentY += height + LAYOUT.PADDING * scaleFactor;
+                textCounter++;
             }
         });
-        if (currentGroup) {
-            textGroups.push({ positions: currentGroup, properties: currentProps });
+    });
+    // Render icon positions
+    currentY += LAYOUT.LINE_GAP * scaleFactor;
+    side.positions.forEach((position) => {
+        if (position.type === "ICON") {
+            currentY += renderIconPosition(ctx, position, padding, currentY, sideWidth, scaleFactor, imageRefs);
+            currentY += LAYOUT.LINE_GAP / 3 * scaleFactor;
         }
-        // Draw side header
-        ctx.save();
-        const headerFontSize = 200 * scaleFactor;
-        ctx.font = `bold ${headerFontSize}px Times New Roman`;
-        ctx.fillStyle = "#000000";
-        ctx.textAlign = "left";
-        ctx.textBaseline = "top";
-        const headerResult = fillTextWrapped(ctx, side.print_side.toUpperCase(), padding, currentY, sideWidth, headerFontSize);
-        currentY += headerResult.height + 50 * scaleFactor;
-        ctx.restore();
-        // Compute side-level uniform properties across all TEXT positions
-        const allTextPositions = [];
-        side.positions.forEach((position) => {
-            if (position.type === "TEXT")
-                allTextPositions.push(position);
-        });
-        const sideFonts = new Set(allTextPositions.map((p) => p.font));
-        const sideShapes = new Set(allTextPositions.map((p) => p.text_shape));
-        const sideFlorals = new Set(allTextPositions.map((p) => p.floral_pattern ?? "None"));
-        const colorKeyOf = (p) => p.character_colors && p.character_colors.length > 0
-            ? p.character_colors.join(",")
-            : p.color ?? "None";
-        const sideColors = new Set(allTextPositions.map((p) => colorKeyOf(p)));
-        const sideUniform = {
-            font: sideFonts.size === 1,
-            shape: sideShapes.size === 1,
-            floral: sideFlorals.size === 1,
-            color: sideColors.size === 1,
+    });
+    return currentY - startY;
+};
+const groupTextPositions = (textPositions) => {
+    const groups = [];
+    let currentGroup = null;
+    let currentProps = null;
+    textPositions.forEach((position) => {
+        const posProps = {
+            font: position.font,
+            text_shape: position.text_shape,
+            color: position.color,
+            character_colors: position.character_colors?.join(","),
         };
-        // Render side-level labels once for uniform properties
-        currentY += renderSideUniformLabels(ctx, {
-            font: sideUniform.font ? [...sideFonts][0] : null,
-            shape: sideUniform.shape ? [...sideShapes][0] : null,
-            floral: sideUniform.floral ? [...sideFlorals][0] : null,
-            color: sideUniform.color ? [...sideColors][0] : null,
-        }, padding, currentY, sideWidth, scaleFactor);
-        // Render text groups first
-        let sideTextCounter = 1;
-        textGroups.forEach((group, groupIndex) => {
-            group.positions.forEach((position, index) => {
-                if (index === 0 && groupIndex !== 0)
-                    currentY += 50 * scaleFactor;
-                const drawnHeight = renderText(ctx, position, padding, currentY, sideWidth, sideTextCounter, {
-                    font: !sideUniform.font,
-                    shape: !sideUniform.shape,
-                    floral: !sideUniform.floral,
-                    color: !sideUniform.color,
-                }, scaleFactor);
-                sideTextCounter += 1;
-                // add padding only if something was actually drawn
-                if (drawnHeight > 0) {
-                    currentY += drawnHeight + 40 * scaleFactor;
-                }
-            });
-        });
-        // Render ICON titles/values (no images here)
-        currentY += 30 * scaleFactor; // minimal spacing before icon labels
-        side.positions.forEach((position) => {
-            if (position.type === "ICON") {
-                currentY += renderIconLabels(ctx, position, padding, currentY, sideWidth, scaleFactor);
-                currentY += 10 * scaleFactor;
+        if (!currentGroup ||
+            currentProps.font !== posProps.font ||
+            currentProps.text_shape !== posProps.text_shape ||
+            currentProps.color !== posProps.color ||
+            currentProps.character_colors !== posProps.character_colors) {
+            if (currentGroup) {
+                groups.push(currentGroup);
             }
-        });
-        return Math.max(currentY - startY, sectionHeight);
-    };
-    const renderSideUniformLabels = (ctx, values, x, y, maxWidth, scaleFactor = 1) => {
-        const labelFontFamily = "Arial";
-        const fontSize = 180 * scaleFactor;
-        const lineGap = 20 * scaleFactor;
-        ctx.save();
-        ctx.font = `${fontSize}px ${labelFontFamily}`;
-        ctx.textAlign = "left";
-        ctx.textBaseline = "top";
-        ctx.fillStyle = "#444444";
-        let cursorY = y;
-        let rendered = 0;
-        if (values.font) {
-            const fontText = `Font: ${values.font}`;
-            const result = fillTextWrapped(ctx, fontText, x, cursorY, maxWidth, fontSize + lineGap);
-            cursorY += result.height;
-            rendered++;
-        }
-        if (values.shape && values.shape !== "None") {
-            const shapeText = `Kiểu chữ: ${values.shape}`;
-            const result = fillTextWrapped(ctx, shapeText, x, cursorY, maxWidth, fontSize + lineGap);
-            cursorY += result.height;
-            rendered++;
-        }
-        if (values.color && values.color !== "None") {
-            const colorText = `Màu chỉ: ${values.color}`;
-            // Reserve space for swatches (estimate: max 5 swatches × 200px each = 1000px)
-            const swatchReserved = 1000 * scaleFactor;
-            const textMaxWidth = Math.max(400 * scaleFactor, maxWidth - swatchReserved);
-            const result = fillTextWrapped(ctx, colorText, x, cursorY, textMaxWidth, fontSize + lineGap);
-            // Draw swatches inline for side-level color, preserving aspect ratio; 75% of previous size
-            // Position swatches after the last line of wrapped text
-            const swatchH = Math.floor(fontSize * 2.025);
-            let swatchX = x + Math.ceil(result.lastLineWidth) + 100 * scaleFactor;
-            const swatchY = result.lastLineY + Math.floor(fontSize / 2 - swatchH / 2);
-            const colorTokens = values.color.includes(",")
-                ? values.color.split(",").map((s) => s.trim())
-                : [values.color];
-            colorTokens.forEach((color) => {
-                const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${color}.png`;
-                const img = imageRefs.current.get(threadColorUrl);
-                if (img && img.complete && img.naturalHeight > 0) {
-                    const ratio = img.naturalWidth / img.naturalHeight;
-                    const swatchW = Math.max(1, Math.floor(swatchH * ratio));
-                    ctx.drawImage(img, swatchX, swatchY, swatchW, swatchH);
-                    swatchX += swatchW + 25 * scaleFactor;
-                }
-            });
-            cursorY += result.height;
-            rendered++;
-        }
-        if (values.floral && values.floral !== "None") {
-            const floralText = `Mẫu hoa: ${values.floral}`;
-            const result = fillTextWrapped(ctx, floralText, x, cursorY, maxWidth, fontSize + lineGap);
-            cursorY += result.height;
-            rendered++;
-        }
-        if (rendered > 0)
-            cursorY += 50 * scaleFactor; // extra gap before first text line
-        ctx.restore();
-        return cursorY - y;
-    };
-    const renderText = (ctx, position, x, y, maxWidth, displayIndex, showLabels, scaleFactor = 1) => {
-        ctx.save();
-        // Info labels
-        // Unified font sizing for labels and content (side title uses its own larger size)
-        const infoLineGap = 30 * scaleFactor;
-        const labelFontFamily = "Arial";
-        // Use a unified content font size for both labels and text content
-        const fontSize = 180 * scaleFactor;
-        const infoFontSize = fontSize;
-        ctx.font = `${infoFontSize}px ${labelFontFamily}`;
-        ctx.textAlign = "left";
-        ctx.textBaseline = "top";
-        ctx.fillStyle = "#444444";
-        let currentYCursor = y;
-        let drawnHeight = 0; // accumulate only when something is actually drawn
-        // Text value with unified font size
-        let displayText = position.text;
-        if (position.change_character_to_heart && displayText.includes("<3")) {
-            displayText = displayText.replace(/<3/g, "❤");
-        }
-        ctx.textAlign = "left";
-        ctx.textBaseline = "top";
-        // Label for text line
-        const textLabel = `Text ${displayIndex}: `;
-        ctx.font = `bold ${fontSize}px ${labelFontFamily}`;
-        const labelWidth = ctx.measureText(textLabel).width;
-        ctx.fillStyle = "#444444";
-        ctx.fillText(textLabel, x, currentYCursor);
-        // Calculate available width for text content
-        const textMaxWidth = maxWidth - labelWidth;
-        // Handle character_colors (alternating colors)
-        if (position.character_colors && position.character_colors.length > 0) {
-            // Switch to content font
-            ctx.font = `${fontSize}px ${position.font}`;
-            const textHeight = fillTextWrappedMultiColor(ctx, displayText, position.character_colors, x + labelWidth, currentYCursor, textMaxWidth, fontSize);
-            currentYCursor += textHeight;
-            drawnHeight += textHeight;
+            currentGroup = [position];
+            currentProps = posProps;
         }
         else {
-            // No color specified
-            // Draw text in content font, black (non-bold)
-            ctx.font = `${fontSize}px ${position.font}`;
-            ctx.fillStyle = COLOR_MAP[position.color ?? "None"] || "#000000";
-            const textResult = fillTextWrapped(ctx, displayText, x + labelWidth, currentYCursor, textMaxWidth, fontSize);
-            currentYCursor += textResult.height;
-            drawnHeight += textResult.height;
-        }
-        // After text, print Kiểu chữ (when not uniform), then Font and Color as needed
-        currentYCursor += infoLineGap;
-        ctx.font = `${infoFontSize}px ${labelFontFamily}`;
-        ctx.fillStyle = "#444444";
-        if (showLabels.shape && position.text_shape) {
-            const shapeLabelAfter = `Kiểu chữ: ${position.text_shape}`;
-            const result = fillTextWrapped(ctx, shapeLabelAfter, x, currentYCursor, maxWidth, infoFontSize + infoLineGap);
-            currentYCursor += result.height;
-            drawnHeight += result.height;
+            currentGroup.push(position);
         }
-        if (showLabels.font && position.font) {
-            const fontLabel = `Font: ${position.font}`;
-            const result = fillTextWrapped(ctx, fontLabel, x, currentYCursor, maxWidth, infoFontSize + infoLineGap);
-            currentYCursor += result.height;
-            drawnHeight += result.height;
-        }
-        if (showLabels.color) {
-            let colorLabelValue = "None";
-            if (position.character_colors && position.character_colors.length > 0) {
-                colorLabelValue = position.character_colors.join(", ");
-            }
-            else if (position.color) {
-                colorLabelValue = position.color;
-            }
-            if (colorLabelValue !== "None") {
-                const colorLabel = `Màu chỉ: ${colorLabelValue}`;
-                // Reserve space for swatches
-                const swatchReserved = 1000 * scaleFactor;
-                const textMaxWidth = Math.max(400 * scaleFactor, maxWidth - swatchReserved);
-                const result = fillTextWrapped(ctx, colorLabel, x, currentYCursor, textMaxWidth, infoFontSize + infoLineGap);
-                // Draw color swatch images inline with Color label for TEXT, preserve aspect ratio; 75% of previous size
-                // Position swatches after the last line of wrapped text
-                const swatchH = Math.floor(infoFontSize * 2.025);
-                let swatchX = x + Math.ceil(result.lastLineWidth) + 100 * scaleFactor; // spacing after text
-                const swatchY = result.lastLineY + Math.floor(infoFontSize / 2 - swatchH / 2);
-                if (position.character_colors && position.character_colors.length > 0) {
-                    position.character_colors.forEach((color) => {
-                        const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${color}.png`;
-                        const img = imageRefs.current.get(threadColorUrl);
-                        if (img && img.complete && img.naturalHeight > 0) {
-                            const ratio = img.naturalWidth / img.naturalHeight;
-                            const swatchW = Math.max(1, Math.floor(swatchH * ratio));
-                            ctx.drawImage(img, swatchX, swatchY, swatchW, swatchH);
-                            swatchX += swatchW + 25 * scaleFactor;
-                        }
-                    });
-                }
-                else if (position.color) {
-                    const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${position.color}.png`;
-                    const img = imageRefs.current.get(threadColorUrl);
-                    if (img && img.complete && img.naturalHeight > 0) {
-                        const ratio = img.naturalWidth / img.naturalHeight;
-                        const swatchW = Math.max(1, Math.floor(swatchH * ratio));
-                        ctx.drawImage(img, swatchX, swatchY, swatchW, swatchH);
-                    }
-                }
-                currentYCursor += result.height;
-                drawnHeight += result.height;
-            }
-        }
-        // Show floral label after color block when not uniform at side level
-        if (showLabels.floral && position.floral_pattern) {
-            const floralText = `Mẫu hoa: ${position.floral_pattern}`;
-            const result = fillTextWrapped(ctx, floralText, x, currentYCursor, maxWidth, infoFontSize + infoLineGap);
-            currentYCursor += result.height;
-            drawnHeight += result.height;
-        }
-        // (Floral per-position label is printed above the text when needed; avoid duplicate after text)
-        ctx.restore();
-        return drawnHeight;
+    });
+    if (currentGroup) {
+        groups.push(currentGroup);
+    }
+    return groups;
+};
+const computeUniformProperties = (textPositions) => {
+    if (textPositions.length === 0) {
+        return {
+            values: { font: null, shape: null, floral: null, color: null },
+            isUniform: { font: false, shape: false, floral: false, color: false },
+        };
+    }
+    const fonts = new Set(textPositions.map((p) => p.font));
+    const shapes = new Set(textPositions.map((p) => p.text_shape));
+    const florals = new Set(textPositions.map((p) => p.floral_pattern ?? "None"));
+    const colors = new Set(textPositions.map((p) => p.character_colors?.length ? p.character_colors.join(",") : p.color ?? "None"));
+    return {
+        values: {
+            font: fonts.size === 1 ? [...fonts][0] : null,
+            shape: shapes.size === 1 ? [...shapes][0] : null,
+            floral: florals.size === 1 ? [...florals][0] : null,
+            color: colors.size === 1 ? [...colors][0] : null,
+        },
+        isUniform: {
+            font: fonts.size === 1,
+            shape: shapes.size === 1,
+            floral: florals.size === 1,
+            color: colors.size === 1,
+        },
     };
-    const renderIconLabels = (ctx, position, x, y, maxWidth, scaleFactor = 1) => {
-        const labelFontFamily = "Arial";
-        const fontSize = 180 * scaleFactor;
-        const lineGap = 30 * scaleFactor;
-        ctx.save();
-        ctx.font = `${fontSize}px ${labelFontFamily}`;
-        ctx.textAlign = "left";
-        ctx.textBaseline = "top";
-        ctx.fillStyle = "#444444";
-        let cursorY = y;
-        const iconText = position.icon === 0
-            ? `Icon: icon mặc định theo file thêu`
-            : `Icon: ${position.icon}`;
-        const iconResult = fillTextWrapped(ctx, iconText, x, cursorY, maxWidth, fontSize + lineGap);
-        // draw icon image inline with text, preserve aspect ratio; match line height
-        if (position.icon !== 0) {
-            const iconUrl = `${ICON_BASE_URL}/Icon ${position.icon}.png`;
-            const img = imageRefs.current.get(iconUrl);
-            if (img && img.complete && img.naturalHeight > 0) {
-                const swatchH = fontSize;
-                const ratio = img.naturalWidth / img.naturalHeight;
-                const swatchW = Math.max(1, Math.floor(swatchH * ratio));
-                // Put icon on last line of wrapped text
-                const iconX = x + Math.ceil(iconResult.lastLineWidth) + 100 * scaleFactor;
-                const iconY = iconResult.lastLineY + Math.floor(fontSize / 2 - swatchH / 2);
-                ctx.drawImage(img, iconX, iconY, swatchW, swatchH);
-            }
+};
+const renderUniformLabels = (ctx, uniformProps, x, y, maxWidth, scaleFactor, imageRefs) => {
+    const { values } = uniformProps;
+    const fontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
+    const lineGap = LAYOUT.LINE_GAP * scaleFactor;
+    ctx.save();
+    ctx.font = `${fontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillStyle = LAYOUT.LABEL_COLOR;
+    let cursorY = y;
+    let rendered = 0;
+    if (values.font) {
+        const result = wrapText(ctx, `Font: ${values.font}`, x, cursorY, maxWidth, fontSize + lineGap);
+        cursorY += result.height;
+        rendered++;
+    }
+    if (values.shape && values.shape !== "None") {
+        const result = wrapText(ctx, `Kiểu chữ: ${values.shape}`, x, cursorY, maxWidth, fontSize + lineGap);
+        cursorY += result.height;
+        rendered++;
+    }
+    if (values.color && values.color !== "None") {
+        const textMaxWidth = Math.max(LAYOUT.MIN_TEXT_WIDTH * scaleFactor, maxWidth - LAYOUT.SWATCH_RESERVED_SPACE * scaleFactor);
+        const result = wrapText(ctx, `Màu chỉ: ${values.color}`, x, cursorY, textMaxWidth, fontSize + lineGap);
+        const swatchH = Math.floor(fontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
+        const swatchX = x + Math.ceil(result.lastLineWidth) + LAYOUT.ELEMENT_SPACING * scaleFactor;
+        const swatchY = result.lastLineY + Math.floor(fontSize / 2 - swatchH / 2);
+        const colors = values.color.includes(",") ? values.color.split(",").map((s) => s.trim()) : [values.color];
+        drawSwatches(ctx, colors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
+        cursorY += result.height;
+        rendered++;
+    }
+    if (values.floral && values.floral !== "None") {
+        const result = wrapText(ctx, `Mẫu hoa: ${values.floral}`, x, cursorY, maxWidth, fontSize + lineGap);
+        cursorY += result.height;
+        rendered++;
+    }
+    if (rendered > 0)
+        cursorY += LAYOUT.SECTION_SPACING * scaleFactor;
+    ctx.restore();
+    return cursorY - y;
+};
+const renderTextPosition = (ctx, position, x, y, maxWidth, displayIndex, showLabels, scaleFactor, imageRefs) => {
+    ctx.save();
+    const textFontSize = LAYOUT.TEXT_FONT_SIZE * scaleFactor;
+    const otherFontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
+    const lineGap = LAYOUT.LINE_GAP * scaleFactor;
+    let currentY = y;
+    let drawnHeight = 0;
+    // Draw label
+    const textLabel = `Text ${displayIndex}: `;
+    ctx.font = `bold ${textFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillStyle = LAYOUT.LABEL_COLOR;
+    const labelWidth = ctx.measureText(textLabel).width;
+    ctx.fillText(textLabel, x, currentY);
+    const textMaxWidth = maxWidth - labelWidth;
+    // Get display text (handle empty/null/undefined)
+    const isEmptyText = !position.text || position.text.trim() === "";
+    // Draw text content
+    if (isEmptyText) {
+        ctx.font = `${textFontSize}px ${LAYOUT.FONT_FAMILY}`;
+        ctx.fillStyle = LAYOUT.LABEL_COLOR;
+        const textResult = wrapText(ctx, "không thay đổi", x + labelWidth, currentY, textMaxWidth, textFontSize);
+        currentY += textResult.height;
+        drawnHeight += textResult.height;
+    }
+    else if (position.character_colors?.length) {
+        ctx.font = `${textFontSize}px ${position.font}`;
+        const textHeight = wrapTextMultiColor(ctx, position.text, position.character_colors, x + labelWidth, currentY, textMaxWidth, textFontSize);
+        currentY += textHeight;
+        drawnHeight += textHeight;
+    }
+    else {
+        ctx.font = `${textFontSize}px ${position.font}`;
+        ctx.fillStyle = COLOR_MAP[position.color ?? "None"] || "#000000";
+        const textResult = wrapText(ctx, position.text, x + labelWidth, currentY, textMaxWidth, textFontSize);
+        currentY += textResult.height;
+        drawnHeight += textResult.height;
+    }
+    // Draw additional labels
+    currentY += lineGap;
+    ctx.font = `${otherFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillStyle = LAYOUT.LABEL_COLOR;
+    if (showLabels.shape && position.text_shape) {
+        const result = wrapText(ctx, `Kiểu chữ: ${position.text_shape}`, x, currentY, maxWidth, otherFontSize + lineGap);
+        currentY += result.height;
+        drawnHeight += result.height;
+    }
+    if (showLabels.font && position.font) {
+        const result = wrapText(ctx, `Font: ${position.font}`, x, currentY, maxWidth, otherFontSize + lineGap);
+        currentY += result.height;
+        drawnHeight += result.height;
+    }
+    if (showLabels.color) {
+        const colorValue = position.character_colors?.join(", ") || position.color;
+        if (colorValue) {
+            const textMaxWidth = Math.max(LAYOUT.MIN_TEXT_WIDTH * scaleFactor, maxWidth - LAYOUT.SWATCH_RESERVED_SPACE * scaleFactor);
+            const result = wrapText(ctx, `Màu chỉ: ${colorValue}`, x, currentY, textMaxWidth, otherFontSize + lineGap);
+            const swatchH = Math.floor(otherFontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
+            const swatchX = x + Math.ceil(result.lastLineWidth) + LAYOUT.ELEMENT_SPACING * scaleFactor;
+            const swatchY = result.lastLineY + Math.floor(otherFontSize / 2 - swatchH / 2);
+            const colors = position.character_colors || [position.color];
+            drawSwatches(ctx, colors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
+            currentY += result.height;
+            drawnHeight += result.height;
         }
-        cursorY += iconResult.height;
-        // Draw color line only when there are layer colors
-        if (position.layer_colors && position.layer_colors.length > 0) {
-            const colorLabelValue = position.layer_colors.join(", ");
-            const colorText = `Màu chỉ: ${colorLabelValue}`;
-            // Reserve space for swatches
-            const swatchReserved = 1000 * scaleFactor;
-            const textMaxWidth = Math.max(400 * scaleFactor, maxWidth - swatchReserved);
-            const colorResult = fillTextWrapped(ctx, colorText, x, cursorY, textMaxWidth, fontSize + lineGap);
-            // Draw color swatch images (only for icon)
-            // Position swatches after the last line of wrapped text
-            const swatchH = Math.floor(fontSize * 2.025); // 75% of previous size
-            let swatchX = x + Math.ceil(colorResult.lastLineWidth) + 100 * scaleFactor; // spacing after text
-            const swatchY = colorResult.lastLineY + Math.floor(fontSize / 2 - swatchH / 2);
-            position.layer_colors.forEach((color) => {
-                const threadColorUrl = `${THREAD_COLOR_BASE_URL}/${color}.png`;
-                const img = imageRefs.current.get(threadColorUrl);
-                if (img && img.complete && img.naturalHeight > 0) {
-                    const ratio = img.naturalWidth / img.naturalHeight;
-                    const swatchW = Math.max(1, Math.floor(swatchH * ratio));
-                    ctx.drawImage(img, swatchX, swatchY, swatchW, swatchH);
-                    swatchX += swatchW + 25 * scaleFactor; // spacing between swatches
-                }
-            });
-            cursorY += colorResult.height;
+    }
+    if (showLabels.floral && position.floral_pattern) {
+        const result = wrapText(ctx, `Mẫu hoa: ${position.floral_pattern}`, x, currentY, maxWidth, otherFontSize + lineGap);
+        currentY += result.height;
+        drawnHeight += result.height;
+    }
+    ctx.restore();
+    return drawnHeight;
+};
+const renderIconPosition = (ctx, position, x, y, maxWidth, scaleFactor, imageRefs) => {
+    const iconFontSize = LAYOUT.OTHER_FONT_SIZE * scaleFactor;
+    const lineGap = LAYOUT.LINE_GAP * scaleFactor;
+    ctx.save();
+    ctx.font = `${iconFontSize}px ${LAYOUT.FONT_FAMILY}`;
+    ctx.fillStyle = LAYOUT.LABEL_COLOR;
+    let cursorY = y;
+    const iconText = position.icon === 0 ? `Icon: icon mặc định theo file thêu` : `Icon: ${position.icon}`;
+    const iconResult = wrapText(ctx, iconText, x, cursorY, maxWidth, iconFontSize + lineGap);
+    // Draw icon image
+    if (position.icon !== 0) {
+        const url = getImageUrl("icon", position.icon);
+        const img = imageRefs.current.get(url);
+        if (img?.complete && img.naturalHeight > 0) {
+            const ratio = img.naturalWidth / img.naturalHeight;
+            const swatchW = Math.max(1, Math.floor(iconFontSize * ratio));
+            const iconX = x + Math.ceil(iconResult.lastLineWidth) + LAYOUT.ELEMENT_SPACING * scaleFactor;
+            const iconY = iconResult.lastLineY + Math.floor(iconFontSize / 2 - iconFontSize / 2);
+            ctx.drawImage(img, iconX, iconY, swatchW, iconFontSize);
         }
-        ctx.restore();
-        return cursorY - y;
-    };
-    const loadFont = (fontName) => {
-        return new Promise((resolve, reject) => {
-            // Try to load from CDN
-            const fontUrl = `${FONT_BASE_URL}/${encodeURIComponent(fontName)}.woff2`;
-            const fontFace = new FontFace(fontName, `url(${fontUrl})`);
-            fontFace
-                .load()
-                .then((loadedFont) => {
-                document.fonts.add(loadedFont);
-                resolve();
-            })
-                .catch(() => {
-                // Font loading failed, will use fallback
-                console.warn(`Could not load font ${fontName} from CDN`);
-                resolve(); // Still resolve to not block rendering
-            });
-        });
-    };
-    return (jsx("div", { className: `render-embroidery${className ? ` ${className}` : ""}`, style: style, children: jsx("canvas", { ref: canvasRef, className: "render-embroidery-canvas" }) }));
+    }
+    cursorY += iconResult.height;
+    // Draw color swatches
+    if (position.layer_colors?.length) {
+        const textMaxWidth = Math.max(LAYOUT.MIN_TEXT_WIDTH * scaleFactor, maxWidth - LAYOUT.SWATCH_RESERVED_SPACE * scaleFactor);
+        const colorResult = wrapText(ctx, `Màu chỉ: ${position.layer_colors.join(", ")}`, x, cursorY, textMaxWidth, iconFontSize + lineGap);
+        const swatchH = Math.floor(iconFontSize * LAYOUT.SWATCH_HEIGHT_RATIO);
+        const swatchX = x + Math.ceil(colorResult.lastLineWidth) + LAYOUT.ELEMENT_SPACING * scaleFactor;
+        const swatchY = colorResult.lastLineY + Math.floor(iconFontSize / 2 - swatchH / 2);
+        drawSwatches(ctx, position.layer_colors, swatchX, swatchY, swatchH, scaleFactor, imageRefs);
+        cursorY += colorResult.height;
+    }
+    ctx.restore();
+    return cursorY - y;
 };
 
 export { EmbroideryQCImage };