@mindexec/cli 0.2.0

package/wwwroot/_content/MindExecution.Shared/js/mind-map-texture-factory.js.backup

@@ -0,0 +1,1258 @@
+(function () {
+    'use strict';
+
+    const tailTextureCache = new Map();
+    const renderers = new Map();
+    let sharedMeasurer = null;
+
+    function getSharedMeasurer() {
+        if (sharedMeasurer) return sharedMeasurer;
+        sharedMeasurer = document.createElement('div');
+        Object.assign(sharedMeasurer.style, {
+            position: 'absolute',
+            visibility: 'hidden',
+            left: '-9999px',
+            top: '-9999px',
+            zIndex: '-1000',
+            pointerEvents: 'none',
+            margin: '0',
+            padding: '0',
+            boxSizing: 'border-box',
+            width: 'auto'
+        });
+        document.body.appendChild(sharedMeasurer);
+        return sharedMeasurer;
+    }
+
+    function preprocessMarkdown(text) {
+        if (!text) return '';
+        let processed = text.trim();
+        processed = processed.replace(/([).]*)(\*\*)(?=[가-힣])/g, '$1 $2');
+        processed = processed.replace(/([^\n])\n([\*]{1,2}[\d]+\.|[\d]+\.)/g, '$1\n\n$2');
+        processed = processed.replace(/([^\n])\n([-*] )/g, '$1\n\n$2');
+        return processed;
+    }
+
+    const ICON_SPINNER_SVG = `
+        <svg viewBox="0 0 512 512" style="width:1em; height:1em; fill:currentColor; vertical-align:-0.125em;">
+            <path d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"/>
+        </svg>`;
+
+    const BROKEN_IMAGE_ICON_SVG = `
+        <svg viewBox="0 0 24 24" style="width:100%; height:100%; fill:none; stroke:#9ca3af; stroke-width:2;">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        </svg>`;
+    const BROKEN_IMAGE_ICON_DATA_URL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(BROKEN_IMAGE_ICON_SVG)}`;
+    const brokenImageIcon = new Image();
+    brokenImageIcon.src = BROKEN_IMAGE_ICON_DATA_URL;
+
+    function createTailTexture(color, borderColor, zoomLevel, tailSize, isSelected) {
+        const key = `${color}-${borderColor}-${zoomLevel}-${isSelected}`;
+        if (tailTextureCache.has(key)) return tailTextureCache.get(key);
+
+        const borderWidth = (isSelected ? 4 : 3) * zoomLevel;
+        const tailHeight = tailSize * zoomLevel;
+        const tailWidth = tailHeight * 2;
+        const canvas = document.createElement('canvas');
+        canvas.width = tailWidth + borderWidth * 2;
+        canvas.height = tailHeight + borderWidth;
+        const ctx = canvas.getContext('2d');
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.moveTo(borderWidth, borderWidth / 2);
+        ctx.lineTo(canvas.width / 2, canvas.height - borderWidth / 2);
+        ctx.lineTo(canvas.width - borderWidth, borderWidth / 2);
+        ctx.closePath();
+        ctx.fill();
+
+        ctx.strokeStyle = borderColor;
+        ctx.lineWidth = borderWidth;
+        ctx.beginPath();
+        ctx.moveTo(borderWidth, borderWidth / 2);
+        ctx.lineTo(canvas.width / 2, canvas.height - borderWidth / 2);
+        ctx.lineTo(canvas.width - borderWidth, borderWidth / 2);
+        ctx.stroke();
+
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.generateMipmaps = true;
+        texture.minFilter = THREE.LinearMipmapLinearFilter;
+        texture.magFilter = THREE.LinearFilter;
+        tailTextureCache.set(key, texture);
+        return texture;
+    }
+
+    function createGlowTexture(width, height, radius, zoomLevel) {
+        // ▼▼▼ [수정] glow는 블러 효과이므로 zoomLevel 2로 고정하여 크기 일정하게 유지 ▼▼▼
+        const GLOW_ZOOM = 2;
+        // 입력된 width/height가 zoomLevel 기준이므로, GLOW_ZOOM 기준으로 스케일 조정
+        const scaleFactor = GLOW_ZOOM / zoomLevel;
+        const scaledWidth = width * scaleFactor;
+        const scaledHeight = height * scaleFactor;
+        const scaledRadius = radius * scaleFactor;
+
+        const glowPadding = 30 * GLOW_ZOOM;
+        const canvasWidth = scaledWidth + (glowPadding * 2);
+        const canvasHeight = scaledHeight + (glowPadding * 2);
+        // ▲▲▲ [수정] ▲▲▲
+
+        const canvas = document.createElement('canvas');
+        canvas.width = canvasWidth;
+        canvas.height = canvasHeight;
+        const ctx = canvas.getContext('2d');
+
+        ctx.shadowColor = 'white';
+        ctx.shadowBlur = 25 * GLOW_ZOOM;
+        ctx.shadowOffsetX = 0;
+        ctx.shadowOffsetY = 0;
+        ctx.fillStyle = 'white';
+        const shrink = 3 * GLOW_ZOOM;
+        drawRoundedRect(ctx, glowPadding + shrink, glowPadding + shrink, scaledWidth - (shrink * 2), scaledHeight - (shrink * 2), Math.max(0, scaledRadius - shrink));
+        ctx.fill();
+
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.minFilter = THREE.LinearFilter;
+        texture.magFilter = THREE.LinearFilter;
+
+        return { texture, width: canvasWidth, height: canvasHeight, padding: glowPadding };
+    }
+
+    function drawRoundedRect(ctx, x, y, width, height, radius) {
+        ctx.beginPath();
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + width - radius, y);
+        ctx.arcTo(x + width, y, x + width, y + radius, radius);
+        ctx.lineTo(x + width, y + height - radius);
+        ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+        ctx.lineTo(x + radius, y + height);
+        ctx.lineTo(x, y + height - radius);
+        ctx.lineTo(x, y + radius);
+        ctx.arcTo(x, y, x + radius, y, radius);
+        ctx.closePath();
+    }
+
+    // ▼▼▼ [New] Fully rounded rect for image nodes (all corners rounded) ▼▼▼
+    function drawFullyRoundedRect(ctx, x, y, width, height, radius) {
+        ctx.beginPath();
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(x + width - radius, y);
+        ctx.arcTo(x + width, y, x + width, y + radius, radius);
+        ctx.lineTo(x + width, y + height - radius);
+        ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+        ctx.lineTo(x + radius, y + height);
+        ctx.arcTo(x, y + height, x, y + height - radius, radius); // Bottom-left corner (now rounded)
+        ctx.lineTo(x, y + radius);
+        ctx.arcTo(x, y, x + radius, y, radius);
+        ctx.closePath();
+    }
+    // ▲▲▲ [New] ▲▲▲
+
+    function drawScrollbar(ctx, nodeModel, styleCanvasWidth, styleCanvasHeight, zoomLevel, isHovered = false) {
+        if (!nodeModel.maxScroll || nodeModel.maxScroll <= 1) return;
+
+        const scrollbarWidth = 6 * zoomLevel;
+        const scrollbarPadding = 4 * zoomLevel;
+        const trackColor = 'rgba(0, 0, 0, 0.05)';
+
+        const thumbColor = isHovered ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.25)';
+        const thumbRadius = 3 * zoomLevel;
+        const minThumbHeight = 24 * zoomLevel;
+
+        const topMargin = (nodeModel.contentType === 'note' ? 20 : 16) * zoomLevel;
+        const bottomMargin = 16 * zoomLevel;
+
+        const trackX = styleCanvasWidth - scrollbarWidth - scrollbarPadding;
+        const trackY = topMargin;
+        const trackHeight = styleCanvasHeight - topMargin - bottomMargin;
+
+        if (trackHeight <= minThumbHeight) return;
+
+        ctx.fillStyle = trackColor;
+        drawRoundedRect(ctx, trackX, trackY, scrollbarWidth, trackHeight, thumbRadius);
+        ctx.fill();
+
+        const topPaddingContent = (nodeModel.contentType === 'note' ? 16 : 12) * zoomLevel;
+        const bottomPaddingContent = 16 * zoomLevel;
+        const borderWidth = 3 * zoomLevel;
+        const visibleContentHeight = styleCanvasHeight - (topPaddingContent + borderWidth) - (bottomPaddingContent + borderWidth);
+
+        let totalContentHeight;
+        if (nodeModel.isChunkedText && nodeModel.totalContentHeight > 0) {
+            totalContentHeight = nodeModel.totalContentHeight * zoomLevel;
+        } else {
+            totalContentHeight = visibleContentHeight + (nodeModel.maxScroll * zoomLevel);
+        }
+
+        let thumbHeight = (visibleContentHeight / totalContentHeight) * trackHeight;
+        thumbHeight = Math.max(minThumbHeight, Math.min(trackHeight, thumbHeight));
+
+        const currentScroll = (nodeModel.scrollOffset || 0) * zoomLevel;
+        const maxScrollWorld = nodeModel.maxScroll * zoomLevel;
+
+        let scrollRatio = currentScroll / maxScrollWorld;
+        scrollRatio = Math.max(0, Math.min(1, isNaN(scrollRatio) ? 0 : scrollRatio));
+
+        const availableTrackSpace = trackHeight - thumbHeight;
+        const thumbY = trackY + (availableTrackSpace * scrollRatio);
+
+        ctx.fillStyle = thumbColor;
+        drawRoundedRect(ctx, trackX, thumbY, scrollbarWidth, thumbHeight, thumbRadius);
+        ctx.fill();
+    }
+
+    function getBodyColors(contentType, isSelected) {
+        return {
+            fill: '#fefefe',
+            stroke: isSelected ? '#2563eb' : 'rgba(55, 65, 81, 0.9)'
+        };
+    }
+
+    function drawNodeBodyBackground(ctx, canvasWidth, canvasHeight, zoomLevel, isSelected, contentType = 'text', nodeModel = null) {
+        const radius = 12 * zoomLevel;
+        const borderWidth = 3 * zoomLevel;
+        const halfBorder = borderWidth / 2;
+
+        const x = halfBorder;
+        const y = halfBorder;
+        const w = canvasWidth - borderWidth;
+        const h = canvasHeight - borderWidth;
+        const right = x + w;
+        const bottom = y + h;
+
+        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+        ctx.beginPath();
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(right - radius, y);
+        ctx.quadraticCurveTo(right, y, right, y + radius);
+        ctx.lineTo(right, bottom - radius);
+        ctx.quadraticCurveTo(right, bottom, right - radius, bottom);
+        ctx.lineTo(x + radius, bottom);
+        ctx.quadraticCurveTo(x, bottom, x, bottom - radius);
+        ctx.lineTo(x, y + radius);
+        ctx.quadraticCurveTo(x, y, x + radius, y);
+        ctx.closePath();
+
+        const { fill, stroke } = getBodyColors(contentType, isSelected);
+        ctx.fillStyle = fill;
+        ctx.fill();
+
+        ctx.strokeStyle = stroke;
+        ctx.lineWidth = borderWidth;
+        ctx.stroke();
+    }
+
+    function drawNodeBodyOnCanvas(ctx, nodeModel, canvasWidth, canvasHeight, zoomLevel, isSelected) {
+        drawNodeBodyBackground(ctx, canvasWidth, canvasHeight, zoomLevel, isSelected, nodeModel.contentType, nodeModel);
+        ctx.save();
+
+        const BORDER_WIDTH = 3 * zoomLevel;
+        const CSS_PADDING = 16 * zoomLevel;
+        const totalPadding = CSS_PADDING + BORDER_WIDTH;
+        const topPadding = ((nodeModel.contentType === 'note' ? 16 : 12) * zoomLevel) + BORDER_WIDTH;
+        const paddingBottom = 16 * zoomLevel;
+        const textWidth = canvasWidth - totalPadding * 2;
+        const lineHeight = 14 * zoomLevel * 1.5;
+        let currentY = topPadding;
+
+        ctx.textBaseline = 'top';
+        // 기본 Prompt 값들은 표시하지 않음
+        const defaultPrompts = ['Note', 'Pasted Text', '에이전트 메모'];
+        const nodePrompt = nodeModel.prompt ?? nodeModel.Prompt ?? '';
+        const nodeResponse = nodeModel.response ?? nodeModel.Response ?? '';
+        const shouldShowPrompt = nodePrompt && !defaultPrompts.includes(nodePrompt);
+        if (shouldShowPrompt) {
+            ctx.fillStyle = '#111827';
+            ctx.font = `bold ${14 * zoomLevel}px sans-serif`;
+            ctx.fillText(nodePrompt, totalPadding, currentY, textWidth);
+            currentY += 24 * zoomLevel;
+        }
+
+        ctx.fillStyle = '#1f2937';
+        ctx.font = `${14 * zoomLevel}px sans-serif`;
+        const lines = (nodeResponse || '').split('\n');
+        for (const line of lines) {
+            ctx.fillText(line, totalPadding, currentY, textWidth);
+            currentY += lineHeight;
+        }
+
+        ctx.restore();
+    }
+
+    function normalizeCachedImage(cachedImage) {
+        if (!cachedImage) return { image: null, width: 0, height: 0, isError: false };
+
+        const isError = cachedImage.isError === true;
+
+        if (cachedImage.image) {
+            const img = cachedImage.image;
+            const width = cachedImage.width || img.naturalWidth || img.width || 0;
+            const height = cachedImage.height || img.naturalHeight || img.height || 0;
+            return { image: img, width, height, isError };
+        }
+
+        const img = cachedImage;
+        const width = img.naturalWidth || img.width || 0;
+        const height = img.naturalHeight || img.height || 0;
+        return { image: img, width, height, isError };
+    }
+
+    function drawCachedImageBody(cachedImage, ctx, nodeModel, canvasWidth, canvasHeight, zoomLevel, isSelected) {
+        const radius = 12 * zoomLevel;
+        ctx.save();
+        drawRoundedRect(ctx, 0, 0, canvasWidth, canvasHeight, radius);
+        ctx.clip();
+        ctx.fillStyle = '#fefefe';
+        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+        const { image, width: imgWidth, height: imgHeight, isError } = normalizeCachedImage(cachedImage);
+
+        if (image && imgWidth > 0 && imgHeight > 0) {
+            const canvasAspect = canvasWidth / canvasHeight;
+            const imgAspect = imgWidth / imgHeight;
+            let sx = 0, sy = 0, sWidth = imgWidth, sHeight = imgHeight;
+            if (imgAspect > canvasAspect) {
+                sWidth = imgHeight * canvasAspect;
+                sx = (imgWidth - sWidth) / 2;
+            } else {
+                sHeight = imgWidth / canvasAspect;
+                sy = (imgHeight - sHeight) / 2;
+            }
+            ctx.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, canvasWidth, canvasHeight);
+        }
+        else if (isError) {
+            ctx.fillStyle = '#f3f4f6';
+            ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+            ctx.fillStyle = '#9ca3af';
+            ctx.font = `bold ${16 * zoomLevel}px sans-serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            const textY = canvasHeight * 0.55;
+            ctx.fillText('Image Not Found', canvasWidth / 2, textY);
+
+            if (brokenImageIcon.complete) {
+                const iconSize = Math.min(canvasWidth, canvasHeight) * 0.4;
+                ctx.drawImage(brokenImageIcon, (canvasWidth - iconSize) / 2, (canvasHeight - iconSize) / 2 - (8 * zoomLevel), iconSize, iconSize);
+            } else {
+                ctx.strokeStyle = '#9ca3af';
+                ctx.lineWidth = 2 * zoomLevel;
+                ctx.beginPath();
+                ctx.moveTo(canvasWidth * 0.3, canvasHeight * 0.3);
+                ctx.lineTo(canvasWidth * 0.7, canvasHeight * 0.7);
+                ctx.moveTo(canvasWidth * 0.7, canvasHeight * 0.3);
+                ctx.lineTo(canvasWidth * 0.3, canvasHeight * 0.7);
+                ctx.stroke();
+            }
+
+            ctx.strokeStyle = '#ef4444';
+            ctx.setLineDash([5 * zoomLevel, 5 * zoomLevel]);
+            ctx.lineWidth = 2 * zoomLevel;
+            ctx.strokeRect(0, 0, canvasWidth, canvasHeight);
+            ctx.setLineDash([]);
+        }
+        else {
+            ctx.fillStyle = '#f9fafb';
+            ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+            ctx.fillStyle = '#6b7280';
+            ctx.font = `${14 * zoomLevel}px sans-serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText('Loading...', canvasWidth / 2, canvasHeight / 2);
+        }
+
+        const borderWidth = 3 * zoomLevel;
+        ctx.strokeStyle = isSelected ? '#2563eb' : 'rgba(55, 65, 81, 0.9)';
+        ctx.lineWidth = borderWidth;
+        drawFullyRoundedRect(ctx, borderWidth / 2, borderWidth / 2, canvasWidth - borderWidth, canvasHeight - borderWidth, radius - borderWidth / 2);
+        ctx.stroke();
+        ctx.restore();
+    }
+
+    function getMarkdownStyles(zoomLevel, contentType = 'text') {
+        const z = zoomLevel;
+        const fontStack = "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        const baseFontSize = 14 * z;
+        const baseLineHeight = 1.5;
+        const styles = `
+            div { color: #1f2937; line-height: ${baseLineHeight}; font-family: ${fontStack}; font-size: ${baseFontSize}px; margin: 0; padding: 0; }
+            p { margin: 0 0 ${8 * z}px 0; }
+            h1, h2, h3, h4 { font-size: ${16 * z}px; font-weight: 700; margin: ${12 * z}px 0 ${6 * z}px 0; color: #111827; }
+            ul, ol { margin: ${6 * z}px 0 ${10 * z}px ${20 * z}px; padding: 0; }
+            li { margin-bottom: ${4 * z}px; }
+            .response > *:first-child { margin-top: 0 !important; }
+            .response > *:last-child { margin-bottom: 0 !important; }
+            li:last-child { margin-bottom: 0 !important; }
+            strong, b { font-weight: 700; color: #111827; }
+            .prompt { font-weight: 700; color: #111827; margin: 0 0 ${8 * z}px 0; padding-bottom: 0; display: flex; align-items: center; font-size: ${baseFontSize}px; }
+            .icon-wrapper { display: inline-flex; align-items: center; justify-content: center; width: ${16 * z}px; height: ${16 * z}px; color: #4b5563; }
+            hr.node-separator { border: 0; border-top: ${1 * z}px solid #e5e7eb; margin: ${8 * z}px 0 ${12 * z}px 0; }
+            .thinking { color: #6b7280; font-style: italic; display: flex; align-items: center; gap: ${6 * z}px; }
+            .response { margin: 0; }
+            code { background-color: #e5e7eb; padding: ${2 * z}px ${4 * z}px; border-radius: ${4 * z}px; font-family: Consolas, 'Courier New', monospace; font-size: ${13 * z}px; }
+            pre { background-color: #e5e7eb; padding: ${8 * z}px; border-radius: ${8 * z}px; overflow-x: auto; margin: ${8 * z}px 0; font-family: Consolas, 'Courier New', monospace; }
+            pre code { background-color: transparent; padding: 0; border-radius: 0; }
+            blockquote { border-left: ${4 * z}px solid #d1d5db; padding-left: ${12 * z}px; margin: ${8 * z}px 0; color: #4b5563; }
+            table { border-collapse: collapse; width: 100%; margin: ${8 * z}px 0; font-size: ${13 * z}px; }
+            th, td { border: ${1 * z}px solid #d1d5db; padding: ${6 * z}px ${8 * z}px; text-align: left; }
+            th { background-color: #f3f4f6; font-weight: 600; color: #111827; }
+            tr:nth-child(even) { background-color: #f9fafb; }
+        `;
+        return { styles, fontStack };
+    }
+
+    function escapeHtml(value) {
+        return (value || '').replace(/[&<>\"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
+    }
+
+    const ALLOWED_HTML_TAGS = new Set([
+        'div', 'span', 'p', 'br', 'hr', 'a', 'b', 'i', 'u', 's', 'em', 'strong', 'mark',
+        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+        'ul', 'ol', 'li', 'dl', 'dt', 'dd',
+        'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'caption', 'colgroup', 'col',
+        'pre', 'code', 'blockquote', 'q', 'cite',
+        'sub', 'sup', 'small', 'big', 'abbr', 'acronym', 'ins', 'del',
+        'input', 'label', 'button', 'select', 'option', 'textarea',
+        'figure', 'figcaption', 'article', 'section', 'aside', 'header', 'footer', 'nav', 'main',
+        'details', 'summary', 'time', 'address', 'wbr', 'kbd', 'samp', 'var', 'dfn'
+    ]);
+
+    function sanitizeHtml(html) {
+        if (!html) return '';
+
+        let sanitized = html
+            .replace(/<(script|iframe|object|embed|meta|link|style)[^>]*>[\s\S]*?<\/\1>/gi, '')
+            .replace(/<(script|iframe|object|embed|meta|link)[^>]*\/?>/gi, '');
+
+        sanitized = sanitized.replace(/<img[^>]*\/?>/gi, '');
+
+        sanitized = sanitized.replace(/<([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*)>/g, (match, tagName, attrs) => {
+            if (ALLOWED_HTML_TAGS.has(tagName.toLowerCase())) {
+                return match;
+            }
+            return `&lt;${tagName}${attrs ? ' ' + attrs : ''}&gt;`;
+        });
+
+        sanitized = sanitized.replace(/<\/([a-zA-Z][a-zA-Z0-9]*)>/g, (match, tagName) => {
+            if (ALLOWED_HTML_TAGS.has(tagName.toLowerCase())) {
+                return match;
+            }
+            return `&lt;/${tagName}&gt;`;
+        });
+
+        sanitized = sanitized
+            .replace(/<br\s*\/?>/gi, '<br/>')
+            .replace(/<hr\s*\/?>/gi, '<hr/>')
+            .replace(/<input([^>]*[^\/])>/gi, '<input$1 />');
+
+        sanitized = sanitized.replace(/\]\]>/g, ']]&gt;');
+
+        sanitized = sanitized.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, '');
+
+        return sanitized;
+    }
+
+    function renderMarkdownToCanvasAsync(ctx, texture, nodeModel, canvasWidth, canvasHeight, zoomLevel, isSelected, onComplete = null) {
+        const hasMarked = typeof window !== 'undefined' && window.marked && typeof window.marked.parse === 'function';
+        const promptValue = nodeModel.prompt || '';
+        // 기본 Prompt 값들은 표시하지 않음
+        const defaultPrompts = ['Note', 'Pasted Text', '에이전트 메모'];
+        const shouldShowPrompt = promptValue && !defaultPrompts.includes(promptValue);
+        // C#에서 PascalCase (IsLoading)로 전달될 수 있으므로 둘 다 확인
+        const nodeIsLoading = nodeModel.isLoading ?? nodeModel.IsLoading ?? false;
+        const nodeResponse = nodeModel.response ?? nodeModel.Response ?? '';
+        const isLoadingState = nodeIsLoading && !nodeResponse;
+        // note 타입에서도 프롬프트 표시 (CSS3D와 동일하게)
+        const showPromptNow = shouldShowPrompt;
+        let htmlContent = '';
+
+        if (showPromptNow) {
+            htmlContent += `<div class="prompt">${escapeHtml(promptValue)}</div>`;
+        }
+
+        if (isLoadingState) {
+            if (showPromptNow) {
+                htmlContent += '<hr class="node-separator" />';
+            }
+            htmlContent += `<div class="thinking">AI is generating a response... <span class="icon-wrapper">${ICON_SPINNER_SVG}</span></div>`;
+        } else if (nodeResponse) {
+            // Separator between prompt and response (for both text and note types)
+            if (shouldShowPrompt) {
+                htmlContent += '<hr class="node-separator" />';
+            }
+
+            if (nodeModel.isChunkedText) {
+                const contentToRender = nodeModel._visibleContent || nodeModel.response || '';
+                const escapedText = escapeHtml(contentToRender);
+
+                htmlContent += `<div class="response" style="font-family: 'Consolas', 'Monaco', 'Courier New', monospace; white-space: pre; line-height: 1.5; font-size: ${14 * zoomLevel}px;">${escapedText}</div>`;
+
+                if (nodeModel.totalLineCount > 0 && (nodeModel.scrollOffset || 0) === 0) {
+                    htmlContent += `<div style="margin-top:12px; padding:8px; background:rgba(59,130,246,0.1); border-radius:4px; font-size:0.85em; color:#3b82f6; text-align:center;">
+                        Large file (${nodeModel.totalLineCount.toLocaleString()} lines) - Scroll to view more
+                    </div>`;
+                }
+            } else {
+                const processedResponse = preprocessMarkdown(nodeModel.response);
+
+                let parsed;
+                if (hasMarked) {
+                    try {
+                        const renderer = new window.marked.Renderer();
+
+                        renderer.code = function (codeOrObj, language, isEscaped) {
+                            const code = typeof codeOrObj === 'object' ? codeOrObj.text : codeOrObj;
+                            const lang = typeof codeOrObj === 'object' ? codeOrObj.lang : language;
+
+                            const escaped = escapeHtml(code || '');
+                            const langClass = lang ? ` class="language-${lang}"` : '';
+                            return `<pre><code${langClass}>${escaped}</code></pre>`;
+                        };
+
+                        renderer.codespan = function (codeOrObj) {
+                            const code = typeof codeOrObj === 'object' ? codeOrObj.text : codeOrObj;
+                            return `<code>${escapeHtml(code || '')}</code>`;
+                        };
+
+                        parsed = window.marked.parse(processedResponse, {
+                            breaks: true,
+                            xhtml: true,
+                            renderer: renderer
+                        });
+                    } catch (e) {
+                        console.warn('[TextureFactory] marked.parse with custom renderer failed, using default:', e);
+                        parsed = window.marked.parse(processedResponse, { breaks: true, xhtml: true });
+                    }
+                } else {
+                    parsed = `<div style="white-space: pre-wrap;">${escapeHtml(processedResponse)}</div>`;
+                }
+
+                parsed = parsed.replace(/<br\s*\/?>/gi, '<br/>').replace(/<hr\s*\/?>/gi, '<hr/>');
+                parsed = sanitizeHtml(parsed);
+                htmlContent += `<div class="response">${parsed}</div>`;
+            }
+        } else if (nodeModel.isChunkedText && !nodeModel.response) {
+            htmlContent += `<div style="padding:16px; color:#6b7280; text-align:center;">
+                <span style="animation: pulse 1.5s infinite;">⏳</span> Loading...
+            </div>`;
+        }
+
+        const { styles, fontStack } = getMarkdownStyles(zoomLevel, nodeModel.contentType);
+        const BORDER_WIDTH = 3 * zoomLevel;
+        const CSS_PADDING = 16 * zoomLevel;
+        const totalPaddingX = CSS_PADDING + BORDER_WIDTH;
+        const cssTopPadding = (nodeModel.contentType === 'note' ? 16 : 12) * zoomLevel;
+        const totalPaddingY = cssTopPadding + BORDER_WIDTH;
+        const paddingBottom = 16 * zoomLevel;
+        const textWidth = Math.max(1, canvasWidth - totalPaddingX * 2);
+        const textHeight = Math.max(1, canvasHeight - totalPaddingY - paddingBottom);
+
+        drawNodeBodyBackground(ctx, canvasWidth, canvasHeight, zoomLevel, isSelected, nodeModel.contentType, nodeModel);
+
+        const effectiveScrollOffset = nodeModel.isChunkedText && nodeModel._visibleScrollOffset !== undefined
+            ? nodeModel._visibleScrollOffset
+            : (nodeModel.scrollOffset || 0);
+
+        let svgString;
+
+        if (nodeModel.isChunkedText && nodeModel.prompt) {
+            const headerHeight = 30 * zoomLevel;
+            const bodyHeight = Math.max(1, textHeight - headerHeight);
+
+            const headerHtml = `
+                <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; font-family:${fontStack}; font-size:${14 * zoomLevel}px; line-height:1.5; color:#1f2937;">
+                    <div class="prompt">${escapeHtml(nodeModel.prompt)}</div>
+                    <hr class="node-separator" />
+                </div>`;
+
+            const visibleText = nodeModel._visibleContent || nodeModel.response || '';
+            const bodyContent = visibleText ? escapeHtml(visibleText) : '<span style="color:#9ca3af;">Loading...</span>';
+            const bodyHtml = `
+                <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:auto; font-family:'Consolas', 'Monaco', 'Courier New', monospace; font-size:${14 * zoomLevel}px; line-height:1.5; color:#1f2937; white-space:pre; transform:translateY(-${effectiveScrollOffset * zoomLevel}px);">
+                    ${bodyContent}
+                </div>`;
+
+            svgString = `
+                <svg xmlns="http://www.w3.org/2000/svg" width="${canvasWidth}" height="${canvasHeight}">
+                    <defs>
+                        <style type="text/css"><![CDATA[
+                            ${styles}
+                        ]]></style>
+                    </defs>
+                    <!-- Fixed header -->
+                    <foreignObject x="${totalPaddingX}" y="${totalPaddingY}" width="${textWidth}" height="${headerHeight}">
+                        ${headerHtml}
+                    </foreignObject>
+                    <!-- Scrollable body -->
+                    <foreignObject x="${totalPaddingX}" y="${totalPaddingY + headerHeight}" width="${textWidth}" height="${bodyHeight}">
+                        ${bodyHtml}
+                    </foreignObject>
+                </svg>`;
+        } else {
+            const htmlBlock = `
+                <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:auto; font-family:${fontStack}; font-size:${14 * zoomLevel}px; line-height:1.5; color:#1f2937; overflow-wrap:break-word; transform:translateY(-${effectiveScrollOffset * zoomLevel}px);">
+                    ${htmlContent}
+                </div>`;
+
+            svgString = `
+                <svg xmlns="http://www.w3.org/2000/svg" width="${canvasWidth}" height="${canvasHeight}">
+                    <defs>
+                        <style type="text/css"><![CDATA[
+                            ${styles}
+                        ]]></style>
+                    </defs>
+                    <foreignObject x="${totalPaddingX}" y="${totalPaddingY}" width="${textWidth}" height="${textHeight}">
+                        ${htmlBlock}
+                    </foreignObject>
+                </svg>`;
+        }
+
+        const dataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+        const img = new Image();
+
+        img.onload = () => {
+            ctx.drawImage(img, 0, 0);
+            drawScrollbar(ctx, nodeModel, canvasWidth, canvasHeight, zoomLevel, nodeModel.isScrollbarHovered);
+            texture.needsUpdate = true;
+            if (onComplete) onComplete(true);
+        };
+
+        img.onerror = (err) => {
+            console.error('[TextureFactory] SVG render failed for node:', nodeModel.id);
+
+            try {
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(svgString, 'image/svg+xml');
+                const parseError = doc.querySelector('parsererror');
+
+                if (parseError) {
+                    console.error('[TextureFactory] SVG Parse Error:', parseError.textContent);
+                } else {
+                    console.error('[TextureFactory] SVG parsed OK but Image failed to load');
+                }
+            } catch (e) {
+                console.error('[TextureFactory] DOMParser error:', e);
+            }
+
+            console.error('[TextureFactory] HTML content (first 500 chars):', htmlContent.substring(0, 500));
+            console.error('[TextureFactory] HTML content (last 200 chars):', htmlContent.substring(Math.max(0, htmlContent.length - 200)));
+
+            drawNodeBodyOnCanvas(ctx, nodeModel, canvasWidth, canvasHeight, zoomLevel, isSelected);
+            drawScrollbar(ctx, nodeModel, canvasWidth, canvasHeight, zoomLevel, nodeModel.isScrollbarHovered);
+            texture.needsUpdate = true;
+            if (onComplete) onComplete(false);
+        };
+
+        img.src = dataUrl;
+    }
+
+    async function createRenderedTextureAsync(module, nodeModel, isSelected, imageCache) {
+        const zoomLevel = 2;
+        const styleW = (nodeModel.width || 400) * zoomLevel;
+        const styleH = (nodeModel.height || 200) * zoomLevel;
+
+        const MAX_TEXTURE_WIDTH = 2048;
+        const MAX_TEXTURE_HEIGHT = 8192;
+
+        const scaleX = styleW > MAX_TEXTURE_WIDTH ? MAX_TEXTURE_WIDTH / styleW : 1;
+        const scaleY = styleH > MAX_TEXTURE_HEIGHT ? MAX_TEXTURE_HEIGHT / styleH : 1;
+        const textureScale = Math.min(scaleX, scaleY);
+
+        const renderW = Math.round(styleW * textureScale);
+        const renderH = Math.round(styleH * textureScale);
+
+        const renderResolutionScale = 1;
+        const canvas = document.createElement('canvas');
+        canvas.width = renderW * renderResolutionScale;
+        canvas.height = renderH * renderResolutionScale;
+        const ctx = canvas.getContext('2d');
+        ctx.scale(renderResolutionScale * textureScale, renderResolutionScale * textureScale);
+
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.generateMipmaps = true;
+        texture.minFilter = THREE.LinearMipmapLinearFilter;
+        texture.magFilter = THREE.LinearFilter;
+        texture.anisotropy = module.renderer.capabilities.getMaxAnisotropy();
+
+        const pluginRenderer = renderers.get(nodeModel.contentType);
+        if (pluginRenderer) {
+            try {
+                pluginRenderer.draw(ctx, nodeModel, styleW, styleH, zoomLevel, isSelected);
+                drawScrollbar(ctx, nodeModel, styleW, styleH, zoomLevel, nodeModel.isScrollbarHovered);
+                texture.needsUpdate = true;
+                return texture;
+            } catch (error) {
+                console.error('Plugin renderer failed', error);
+            }
+        }
+
+        if (nodeModel.contentType === 'text' || nodeModel.contentType === 'note') {
+            await new Promise((resolve) => {
+                renderMarkdownToCanvasAsync(ctx, texture, nodeModel, styleW, styleH, zoomLevel, isSelected, () => resolve());
+            });
+        } else if (nodeModel.contentType === 'image') {
+            drawCachedImageBody(imageCache.get(nodeModel.id), ctx, nodeModel, styleW, styleH, zoomLevel, isSelected);
+        } else {
+            drawNodeBodyOnCanvas(ctx, nodeModel, styleW, styleH, zoomLevel, isSelected);
+        }
+
+        drawScrollbar(ctx, nodeModel, styleW, styleH, zoomLevel, nodeModel.isScrollbarHovered);
+        texture.needsUpdate = true;
+        return texture;
+    }
+
+    async function measureHtmlHeightAsync(nodeModel, zoomLevel, canvasWidth, forcedHeight = null, maxHeight = 800) {
+        console.log(`[measureHtmlHeightAsync] ENTER - nodeId: ${nodeModel.id}, responseLen: ${nodeModel.response?.length || 0}`);
+
+        const hasMarked = typeof window !== 'undefined' && window.marked && typeof window.marked.parse === 'function';
+        const { styles, fontStack } = getMarkdownStyles(zoomLevel, nodeModel.contentType);
+        let htmlContent = '';
+
+        const promptValue = nodeModel.prompt ?? nodeModel.Prompt ?? '';
+        // 기본 Prompt 값들은 표시하지 않음
+        const defaultPrompts = ['Note', 'Pasted Text', '에이전트 메모'];
+        const shouldShowPrompt = promptValue && !defaultPrompts.includes(promptValue);
+        // C#에서 PascalCase (IsLoading)로 전달될 수 있으므로 둘 다 확인
+        const nodeIsLoading = nodeModel.isLoading ?? nodeModel.IsLoading ?? false;
+        const nodeResponse = nodeModel.response ?? nodeModel.Response ?? '';
+        const nodeContentType = nodeModel.contentType ?? nodeModel.ContentType ?? 'text';
+        const isLoadingState = nodeIsLoading && !nodeResponse;
+        // note 타입에서도 프롬프트 표시 (CSS3D와 동일하게)
+        const showPromptNow = shouldShowPrompt;
+        if (showPromptNow) {
+            htmlContent += `<div class="prompt">${escapeHtml(promptValue)}</div>`;
+        }
+
+        // Separator between prompt and response (for both text and note types)
+        if (showPromptNow && (nodeResponse || isLoadingState)) {
+            htmlContent += '<hr class="node-separator" />';
+        }
+
+        if (nodeResponse) {
+            console.log(`[measureHtmlHeightAsync] Step 1: Preprocessing markdown...`);
+            const processedResponse = preprocessMarkdown(nodeModel.response);
+            console.log(`[measureHtmlHeightAsync] Step 1: Done. Preprocessed length: ${processedResponse.length}`);
+
+            let parsed;
+            if (hasMarked) {
+                try {
+                    console.log(`[measureHtmlHeightAsync] Step 2: Parsing with marked...`);
+
+                    const renderer = new window.marked.Renderer();
+                    renderer.code = function (codeOrObj, language, isEscaped) {
+                        const code = typeof codeOrObj === 'object' ? codeOrObj.text : codeOrObj;
+                        const lang = typeof codeOrObj === 'object' ? codeOrObj.lang : language;
+                        const escaped = escapeHtml(code || '');
+                        const langClass = lang ? ` class="language-${lang}"` : '';
+                        return `<pre><code${langClass}>${escaped}</code></pre>`;
+                    };
+                    renderer.codespan = function (codeOrObj) {
+                        const code = typeof codeOrObj === 'object' ? codeOrObj.text : codeOrObj;
+                        return `<code>${escapeHtml(code || '')}</code>`;
+                    };
+                    parsed = window.marked.parse(processedResponse, {
+                        breaks: true,
+                        xhtml: true,
+                        renderer: renderer
+                    });
+                    console.log(`[measureHtmlHeightAsync] Step 2: Marked parsing done. Length: ${parsed.length}`);
+                } catch (e) {
+                    console.warn(`[measureHtmlHeightAsync] Marked parse failed, using fallback`, e);
+                    parsed = window.marked.parse(processedResponse, { breaks: true, xhtml: true });
+                }
+            } else {
+                parsed = `<div style="white-space: pre-wrap;">${escapeHtml(processedResponse)}</div>`;
+            }
+
+            console.log(`[measureHtmlHeightAsync] Step 3: Sanitizing HTML...`);
+            parsed = sanitizeHtml(parsed);
+            console.log(`[measureHtmlHeightAsync] Step 3: Sanitizing done. Length: ${parsed.length}`);
+
+            htmlContent += `<div class="response">${parsed}</div>`;
+        } else if (nodeModel.isLoading) {
+            if (nodeModel.prompt) {
+                htmlContent += '<hr class="node-separator" />';
+            }
+            htmlContent += `<div class=\"thinking\">AI is generating a response... <span class=\"icon-wrapper\">${ICON_SPINNER_SVG}</span></div>`;
+        } else {
+            htmlContent += '<div class="response">&nbsp;</div>';
+        }
+
+        console.log(`[measureHtmlHeightAsync] Step 4: Setting measurer innerHTML...`);
+        const measurer = getSharedMeasurer();
+        const BORDER_WIDTH = 3 * zoomLevel;
+        const PADDING_X = 16 * zoomLevel;
+        const PADDING_BOTTOM = 16 * zoomLevel;
+        const PADDING_TOP = (nodeModel.contentType === 'note' ? 16 : 12) * zoomLevel;
+        const totalHorizontalPadding = (PADDING_X + BORDER_WIDTH) * 2;
+
+        const totalVerticalPadding = PADDING_TOP + PADDING_BOTTOM + (BORDER_WIDTH * 2);
+        const contentWidth = Math.max(1, canvasWidth - totalHorizontalPadding);
+        measurer.style.width = `${contentWidth}px`;
+        measurer.style.fontFamily = fontStack;
+        measurer.style.fontSize = `${14 * zoomLevel}px`;
+        measurer.style.lineHeight = '1.5';
+        measurer.style.overflowWrap = 'break-word';
+        measurer.style.whiteSpace = 'normal';
+        measurer.style.overflow = 'hidden';
+        measurer.innerHTML = `<style>${styles}</style>${htmlContent}`;
+        console.log(`[measureHtmlHeightAsync] Step 4: innerHTML set. Total length: ${measurer.innerHTML.length}`);
+
+        console.log(`[measureHtmlHeightAsync] Step 5: Calling getBoundingClientRect...`);
+        const rect = measurer.getBoundingClientRect();
+        const contentHeight = Math.ceil(rect.height);
+        console.log(`[measureHtmlHeightAsync] Step 5: Done. contentHeight: ${contentHeight}`);
+
+        const totalRequiredHeight = contentHeight + totalVerticalPadding;
+
+        const MAX_HEIGHT = maxHeight * zoomLevel;
+        const MIN_HEIGHT = 60 * zoomLevel;
+
+        let visibleHeight;
+        if (forcedHeight !== null && forcedHeight > 0) {
+            visibleHeight = Math.max(forcedHeight, MIN_HEIGHT);
+        } else {
+            visibleHeight = Math.min(Math.max(totalRequiredHeight, MIN_HEIGHT), MAX_HEIGHT);
+        }
+
+        // ▼▼▼ [수정] 스크롤 끝에서 마지막 줄이 잘리지 않도록 여분 추가 ▼▼▼
+        // 콘텐츠 영역의 하단 패딩만큼 추가 스크롤 허용
+        const extraScrollMargin = PADDING_BOTTOM;
+        const maxScrollPx = Math.max(0, totalRequiredHeight - visibleHeight + extraScrollMargin);
+        // ▲▲▲ [수정] ▲▲▲
+
+        return {
+            height: Math.ceil(Math.max(60, visibleHeight / zoomLevel)),
+            maxScrollPx
+        };
+    }
+
+    async function generatePlaceholderTextures(module, nodeModel, width, height) {
+        const zoomLevel = 2;
+        const styleW = width * zoomLevel;
+        const styleH = height * zoomLevel;
+
+        const createBody = (selected) => {
+            const canvas = document.createElement('canvas');
+            canvas.width = styleW;
+            canvas.height = styleH;
+            const ctx = canvas.getContext('2d');
+            drawNodeBodyOnCanvas(ctx, nodeModel, styleW, styleH, zoomLevel, selected);
+            drawScrollbar(ctx, nodeModel, styleW, styleH, zoomLevel, nodeModel.isScrollbarHovered);
+            const tex = new THREE.CanvasTexture(canvas);
+            tex.generateMipmaps = true;
+            tex.minFilter = THREE.LinearMipmapLinearFilter;
+            tex.magFilter = THREE.LinearFilter;
+            return tex;
+        };
+
+        const defaultBody = createBody(false);
+        const selectedBody = createBody(true);
+        const tailDefault = createTailTexture('#fefefe', 'rgba(55, 65, 81, 0.9)', zoomLevel, 12, false);
+        const tailSelected = createTailTexture('#fefefe', '#2563eb', zoomLevel, 12, true);
+
+        const radius = 12 * zoomLevel;
+        const glowData = createGlowTexture(styleW, styleH, radius, zoomLevel);
+
+        return {
+            textures: {
+                default: { body: defaultBody, tail: tailDefault },
+                selected: { body: selectedBody, tail: tailSelected },
+                glow: glowData
+            },
+            width,
+            height
+        };
+    }
+
+    async function ensureImageCached(nodeId, url, imageCache, options = {}) {
+        if (!url) return null;
+
+        if (url.startsWith('⏳') || url.includes('Uploading')) {
+            return null;
+        }
+
+        const existing = imageCache.get(nodeId);
+        const existingUrl = existing?.url || existing?.src || existing?.image?.src;
+        if (existing && existingUrl === url) {
+            return existing;
+        }
+
+        const resizeWidth = options.resizeWidth || 512;
+        let blob = null;
+
+        try {
+            const response = await fetch(url);
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+            blob = await response.blob();
+        } catch (error) {
+            console.warn(`[TextureFactory] Image fetch failed for ${nodeId}:`, error);
+            const errorEntry = { image: null, url, width: 0, height: 0, isError: true };
+            imageCache.set(nodeId, errorEntry);
+            return errorEntry;
+        }
+
+        if (blob && typeof createImageBitmap === 'function') {
+            try {
+                const bitmap = await createImageBitmap(blob, { resizeWidth, resizeQuality: 'medium' });
+                const cached = { image: bitmap, url, width: bitmap.width, height: bitmap.height, type: 'bitmap', isError: false };
+                imageCache.set(nodeId, cached);
+                return cached;
+            } catch (error) {
+                console.warn('[TextureFactory] createImageBitmap failed, fallback to Image()', error);
+            }
+        }
+
+        return new Promise((resolve) => {
+            const img = new Image();
+            if (!url.startsWith('blob:') && !url.startsWith('data:') && !url.startsWith('file:')) {
+                img.crossOrigin = 'anonymous';
+            }
+
+            let objectUrl = null;
+            if (blob) {
+                objectUrl = URL.createObjectURL(blob);
+            }
+
+            img.onload = () => {
+                if (objectUrl) URL.revokeObjectURL(objectUrl);
+                const cached = {
+                    image: img,
+                    url,
+                    width: img.naturalWidth || img.width || 0,
+                    height: img.naturalHeight || img.height || 0,
+                    type: 'image',
+                    isError: false
+                };
+                imageCache.set(nodeId, cached);
+                resolve(cached);
+            };
+
+            img.onerror = () => {
+                if (objectUrl) URL.revokeObjectURL(objectUrl);
+                console.warn(`[TextureFactory] Image load error for ${nodeId}`);
+                const errorEntry = { image: null, url, width: 0, height: 0, isError: true };
+                imageCache.set(nodeId, errorEntry);
+                resolve(errorEntry);
+            };
+
+            img.src = objectUrl || url;
+        });
+    }
+
+    async function generateAndCacheTextures(module, nodeModel, imageCache, updateData = {}) {
+        const t0 = performance.now();
+
+        const defaultWidth = module.aiNodeDefaultWidth || 400;
+        const defaultHeight = module.aiNodeDefaultHeight || 200;
+
+        const effectiveMaxHeight = module.showFullAiResponse ? 10000 : defaultHeight;
+        const width = nodeModel.width || (nodeModel.contentType === 'image' ? 300 : defaultWidth);
+        let height = nodeModel.height || (nodeModel.contentType === 'image' ? 200 : defaultHeight);
+
+        const zoomLevel = 2;
+
+        const t1 = performance.now();
+
+        // ▼▼▼ [Optimization A] Skip measureHeight if already measured ▼▼▼
+        const skipMeasure = updateData.skipMeasure === true;
+
+        if ((nodeModel.contentType === 'text' || nodeModel.contentType === 'note') && !nodeModel.isChunkedText) {
+            if (!skipMeasure) {
+                try {
+                    const forcedHeight = (nodeModel.height && nodeModel.height > 0) ? (nodeModel.height * zoomLevel) : null;
+
+                    const { height: measuredHeight, maxScrollPx } = await measureHtmlHeightAsync(nodeModel, zoomLevel, width * zoomLevel, forcedHeight, effectiveMaxHeight);
+                    if (!nodeModel.height || nodeModel.height <= 0) {
+                        height = measuredHeight;
+                        nodeModel.height = height;
+                    } else {
+                        height = nodeModel.height;
+                    }
+                    nodeModel.maxScroll = maxScrollPx / zoomLevel;
+                    if (updateData.scrollDelta) {
+                        const oldScroll = nodeModel.scrollOffset || 0;
+                        const newScroll = Math.max(0, Math.min(oldScroll + updateData.scrollDelta, nodeModel.maxScroll));
+                        nodeModel.scrollOffset = newScroll;
+                        try { module.dotNetHelper?.invokeMethodAsync('UpdateNodeScroll', nodeModel.id, newScroll); } catch (error) { console.warn(error); }
+                    } else {
+                        nodeModel.scrollOffset = Math.min(nodeModel.scrollOffset || 0, nodeModel.maxScroll);
+                    }
+                } catch (error) {
+                    console.warn('[TextureFactory] height measure failed', error);
+                    if (!nodeModel.height || nodeModel.height <= 0) {
+                        height = 200;
+                        nodeModel.height = height;
+                    }
+                }
+            } else {
+                // Height already measured - just handle scroll
+                height = nodeModel.height || height;
+                // ▼▼▼ [Fix] Ensure scrollOffset is within valid range ▼▼▼
+                if (nodeModel.maxScroll !== undefined && nodeModel.maxScroll >= 0) {
+                    nodeModel.scrollOffset = Math.min(nodeModel.scrollOffset || 0, nodeModel.maxScroll);
+                } else {
+                    // maxScroll not set yet - set to 0 (no scroll needed)
+                    nodeModel.maxScroll = 0;
+                    nodeModel.scrollOffset = 0;
+                }
+                // ▲▲▲ [Fix] ▲▲▲
+                if (updateData.scrollDelta) {
+                    const oldScroll = nodeModel.scrollOffset || 0;
+                    const newScroll = Math.max(0, Math.min(oldScroll + updateData.scrollDelta, nodeModel.maxScroll || 0));
+                    nodeModel.scrollOffset = newScroll;
+                    try { module.dotNetHelper?.invokeMethodAsync('UpdateNodeScroll', nodeModel.id, newScroll); } catch (error) { console.warn(error); }
+                }
+            }
+        } else if (nodeModel.isChunkedText) {
+            height = nodeModel.height || 400;
+            if (updateData.scrollDelta) {
+                const oldScroll = nodeModel.scrollOffset || 0;
+                const newScroll = Math.max(0, Math.min(oldScroll + updateData.scrollDelta, nodeModel.maxScroll || 0));
+                nodeModel.scrollOffset = newScroll;
+                try { module.dotNetHelper?.invokeMethodAsync('UpdateNodeScroll', nodeModel.id, newScroll); } catch (error) { console.warn(error); }
+            }
+        } else {
+            nodeModel.height = height;
+        }
+        // ▲▲▲ [Optimization A] ▲▲▲
+
+        const t2 = performance.now();
+
+        const styleW = width * zoomLevel;
+        const styleH = height * zoomLevel;
+        const radius = 12 * zoomLevel;
+        const glowData = createGlowTexture(styleW, styleH, radius, zoomLevel);
+
+        const t3 = performance.now();
+
+        // ▼▼▼ [Optimization B] Skip selected texture on initial load ▼▼▼
+        const skipSelected = updateData.skipSelected === true;
+
+        let bodyDefault, bodySelected;
+        if (skipSelected) {
+            // Only create default texture for initial load
+            bodyDefault = await createRenderedTextureAsync(module, nodeModel, false, imageCache);
+            bodySelected = null; // Will be created on-demand when selected
+        } else {
+            // Create both textures (for updates, selection changes, etc.)
+            [bodyDefault, bodySelected] = await Promise.all([
+                createRenderedTextureAsync(module, nodeModel, false, imageCache),
+                createRenderedTextureAsync(module, nodeModel, true, imageCache)
+            ]);
+        }
+        // ▲▲▲ [Optimization B] ▲▲▲
+
+        const t4 = performance.now();
+
+        const tailColor = '#fefefe';
+        const tailDefault = createTailTexture(tailColor, '#374151', zoomLevel, 12, false);
+        const tailSelected = skipSelected ? null : createTailTexture(tailColor, '#2563eb', zoomLevel, 12, true);
+
+        const t5 = performance.now();
+
+        // ▼▼▼ [Timing] 세부 시간 측정 로그 ▼▼▼
+        console.log(`[⏱️ Timing] generateAndCacheTextures for ${nodeModel.id} (${nodeModel.contentType}):
+  • Init: ${(t1 - t0).toFixed(1)}ms
+  • MeasureHeight: ${(t2 - t1).toFixed(1)}ms ${skipMeasure ? '(SKIPPED)' : ''}
+  • GlowTexture: ${(t3 - t2).toFixed(1)}ms
+  • BodyTextures: ${(t4 - t3).toFixed(1)}ms ${skipSelected ? '(default only)' : '(x2)'}
+  • TailTextures: ${(t5 - t4).toFixed(1)}ms ${skipSelected ? '(default only)' : '(x2)'}
+  • TOTAL: ${(t5 - t0).toFixed(1)}ms`);
+        // ▲▲▲ [Timing] ▲▲▲
+
+        // ▼▼▼ [New] Generate LOD thumbnail if LODRenderer is enabled ▼▼▼
+        const sourceCanvas = bodyDefault?.image;
+        if (module.useLODRendering && module.lodRenderer && sourceCanvas) {
+            try {
+                module.lodRenderer.addNode(nodeModel.id, sourceCanvas, width, height);
+            } catch (e) {
+                console.warn('[TextureFactory] LOD thumbnail generation failed:', e);
+            }
+        }
+        // ▲▲▲ [New] ▲▲▲
+
+        return {
+            textures: {
+                default: { body: bodyDefault, tail: tailDefault },
+                selected: { body: bodySelected, tail: tailSelected },
+                glow: glowData
+            },
+            width,
+            height,
+            sourceCanvas // For external LOD use if needed
+        };
+    }
+
+    // ========================================
+    // Atlas Integration Functions
+    // ========================================
+
+    /**
+     * Render node texture to a canvas (for Atlas packing)
+     * Returns the canvas instead of a THREE.Texture
+     */
+    async function renderNodeToCanvas(module, nodeModel, isSelected, imageCache) {
+        const zoomLevel = 2;
+        const styleW = (nodeModel.width || 400) * zoomLevel;
+        const styleH = (nodeModel.height || 200) * zoomLevel;
+
+        const MAX_TEXTURE_WIDTH = 2048;
+        const MAX_TEXTURE_HEIGHT = 8192;
+
+        const scaleX = styleW > MAX_TEXTURE_WIDTH ? MAX_TEXTURE_WIDTH / styleW : 1;
+        const scaleY = styleH > MAX_TEXTURE_HEIGHT ? MAX_TEXTURE_HEIGHT / styleH : 1;
+        const textureScale = Math.min(scaleX, scaleY);
+
+        const renderW = Math.round(styleW * textureScale);
+        const renderH = Math.round(styleH * textureScale);
+
+        const canvas = document.createElement('canvas');
+        canvas.width = renderW;
+        canvas.height = renderH;
+        const ctx = canvas.getContext('2d');
+        ctx.scale(textureScale, textureScale);
+
+        const pluginRenderer = renderers.get(nodeModel.contentType);
+        if (pluginRenderer) {
+            try {
+                pluginRenderer.draw(ctx, nodeModel, styleW, styleH, zoomLevel, isSelected);
+                drawScrollbar(ctx, nodeModel, styleW, styleH, zoomLevel, nodeModel.isScrollbarHovered);
+                return { canvas, width: renderW, height: renderH };
+            } catch (error) {
+                console.error('Plugin renderer failed', error);
+            }
+        }
+
+        if (nodeModel.contentType === 'text' || nodeModel.contentType === 'note') {
+            await new Promise((resolve) => {
+                // Create a dummy texture just to satisfy the API
+                const dummyTexture = { needsUpdate: false };
+                renderMarkdownToCanvasAsync(ctx, dummyTexture, nodeModel, styleW, styleH, zoomLevel, isSelected, () => resolve());
+            });
+        } else if (nodeModel.contentType === 'image') {
+            drawCachedImageBody(imageCache.get(nodeModel.id), ctx, nodeModel, styleW, styleH, zoomLevel, isSelected);
+        } else {
+            drawNodeBodyOnCanvas(ctx, nodeModel, styleW, styleH, zoomLevel, isSelected);
+        }
+
+        drawScrollbar(ctx, nodeModel, styleW, styleH, zoomLevel, nodeModel.isScrollbarHovered);
+        return { canvas, width: renderW, height: renderH };
+    }
+
+    /**
+     * Generate textures and add to Atlas (if atlas mode is enabled)
+     * Falls back to regular texture creation if atlas is not available
+     */
+    async function generateTexturesWithAtlas(module, nodeModel, imageCache, updateData = {}) {
+        // Check if atlas rendering is enabled
+        if (!module.useAtlasRendering || !module.atlasManager) {
+            // Fall back to regular texture generation
+            return generateAndCacheTextures(module, nodeModel, imageCache, updateData);
+        }
+
+        const t0 = performance.now();
+        const atlasManager = module.atlasManager;
+
+        // Prepare dimensions
+        const width = nodeModel.width || 400;
+        const height = nodeModel.height || 200;
+        const zoomLevel = 2;
+
+        // Handle height measurement (same as regular path)
+        const defaultHeight = module.aiNodeDefaultHeight || 200;
+        const effectiveMaxHeight = module.showFullAiResponse ? 10000 : defaultHeight;
+        const skipMeasure = updateData.skipMeasure === true;
+
+        if ((nodeModel.contentType === 'text' || nodeModel.contentType === 'note') && !nodeModel.isChunkedText && !skipMeasure) {
+            try {
+                const forcedHeight = (nodeModel.height && nodeModel.height > 0) ? (nodeModel.height * zoomLevel) : null;
+                const { height: measuredHeight, maxScrollPx } = await measureHtmlHeightAsync(nodeModel, zoomLevel, width * zoomLevel, forcedHeight, effectiveMaxHeight);
+                if (!nodeModel.height || nodeModel.height <= 0) {
+                    nodeModel.height = measuredHeight;
+                }
+                nodeModel.maxScroll = maxScrollPx / zoomLevel;
+                nodeModel.scrollOffset = Math.min(nodeModel.scrollOffset || 0, nodeModel.maxScroll);
+            } catch (error) {
+                console.warn('[TextureFactory] Atlas mode height measure failed', error);
+                if (!nodeModel.height || nodeModel.height <= 0) {
+                    nodeModel.height = 200;
+                }
+            }
+        }
+
+        // Render canvases
+        const [bodyCanvasData, selectedCanvasData] = await Promise.all([
+            renderNodeToCanvas(module, nodeModel, false, imageCache),
+            updateData.skipSelected ? Promise.resolve(null) : renderNodeToCanvas(module, nodeModel, true, imageCache)
+        ]);
+
+        // Create glow and tail canvases
+        const styleW = (nodeModel.width || 400) * zoomLevel;
+        const styleH = (nodeModel.height || 200) * zoomLevel;
+        const radius = 12 * zoomLevel;
+        const glowData = createGlowTexture(styleW, styleH, radius, zoomLevel);
+
+        const tailColor = '#fefefe';
+        const tailDefaultCanvas = createTailTexture(tailColor, '#374151', zoomLevel, 12, false);
+        const tailSelectedCanvas = updateData.skipSelected ? null : createTailTexture(tailColor, '#2563eb', zoomLevel, 12, true);
+
+        // Add to Atlas
+        const textures = {
+            body: bodyCanvasData.canvas,
+            selected: selectedCanvasData?.canvas || null,
+            tail: tailDefaultCanvas,
+            tailSelected: tailSelectedCanvas,
+            glow: glowData.canvas
+        };
+
+        const uvMap = atlasManager.addNode(nodeModel.id, textures, {
+            width: bodyCanvasData.width,
+            height: bodyCanvasData.height
+        });
+
+        const t1 = performance.now();
+        console.log(`[⏱️ Atlas] generateTexturesWithAtlas for ${nodeModel.id}: ${(t1 - t0).toFixed(1)}ms, UV: ${uvMap ? 'OK' : 'FAILED'}`);
+
+        // Return in compatible format
+        // Note: For atlas mode, we don't create individual THREE.Textures
+        // The mesh will use shared atlas textures from atlasManager
+        return {
+            textures: {
+                default: { body: null, tail: null, uvMap: uvMap?.body },
+                selected: { body: null, tail: null, uvMap: uvMap?.selected },
+                glow: { texture: null, canvas: glowData.canvas, uvMap: uvMap?.glow }
+            },
+            uvMap,
+            width: nodeModel.width,
+            height: nodeModel.height,
+            isAtlasMode: true
+        };
+    }
+
+    /**
+     * Update a node's texture in the atlas (in-place update)
+     */
+    async function updateAtlasTexture(module, nodeModel, textureType, imageCache) {
+        if (!module.atlasManager) return false;
+
+        const canvasData = await renderNodeToCanvas(module, nodeModel, textureType === 'selected', imageCache);
+        return module.atlasManager.updateNode(nodeModel.id, textureType, canvasData.canvas);
+    }
+
+    window.MindMapTextureFactory = {
+        generateAndCacheTextures,
+        generatePlaceholderTextures,
+        measureHtmlHeightAsync,
+        ensureImageCached,
+        // Atlas integration
+        renderNodeToCanvas,
+        generateTexturesWithAtlas,
+        updateAtlasTexture,
+        clearCache: () => tailTextureCache.clear(),
+        registerRenderer: (type, renderer) => renderers.set(type, renderer)
+    };
+
+    console.log('mind-map-texture-factory.js initialized (folded corners, spinner, atlas support)');
+})();