@mindexec/cli 0.2.0

package/wwwroot/_content/MindExecution.Shared/js/mind-map-nodes.js

@@ -0,0 +1,4541 @@
+// File: mind-map-nodes.js
+// [Refactor] Core API + state orchestrator for the MindMap node module
+// (Implementation details are delegated to MindMapTextureFactory, MindMapObjectManager, MindMapCss3DManager, MindMapPipeline)
+(function () {
+    // ▼▼▼ [Perf] Debug logging - set to false in production ▼▼▼
+    const DEBUG = false;
+    const log = DEBUG ? console.log.bind(console) : () => { };
+    const warn = DEBUG ? console.warn.bind(console) : () => { };
+    // Keep halo/glow in CSS selected styles; do not render WebGL glow meshes.
+    const ENABLE_WEBGL_GLOW = false;
+    function waitForNonVisualFrame(hiddenDelay = 16) {
+        return new Promise(resolve => {
+            if (typeof requestAnimationFrame === 'function'
+                && !(typeof document !== 'undefined' && document.visibilityState === 'hidden')) {
+                requestAnimationFrame(resolve);
+                return;
+            }
+
+            setTimeout(resolve, hiddenDelay);
+        });
+    }
+    // ▲▲▲ [Perf] ▲▲▲
+
+    const MEMO_SELECTION_THEMES = {
+        coral: { border: 0xf7b08d, accent: 0xff8052 },
+        amber: { border: 0xf4d06f, accent: 0xf59e0b },
+        sun: { border: 0xe7d668, accent: 0xca8a04 },
+        sage: { border: 0xbed79f, accent: 0x65a30d },
+        mint: { border: 0x8fd8c1, accent: 0x10b981 },
+        sky: { border: 0x9dc7f7, accent: 0x3b82f6 },
+        indigo: { border: 0xbcc2ff, accent: 0x6366f1 },
+        violet: { border: 0xd6b8ff, accent: 0x8b5cf6 },
+        rose: { border: 0xf5b2c2, accent: 0xf43f5e },
+        gray: { border: 0xd1d5db, accent: 0x6b7280 },
+        slate: { border: 0xcbd5e1, accent: 0x64748b }
+    };
+    const NODE_TEXT_SELECTION_SELECTORS = '.node-response, .code-body, .text-content, .markdown-body, textarea, .map-node-memo__title, .map-node-memo__body, .map-node-memo__body-view, .map-node-memo__body-view *';
+    const NODE_INTERACTIVE_CONTENT_SELECTORS = `${NODE_TEXT_SELECTION_SELECTORS}, .embed-content, .embed-card, .embed-card *, .embed-action, .embed-play-button, iframe, .map-node-memo__icon-button, .map-node-memo__icon-option, .map-node-memo__icon-popover, .map-node-memo__agent-action, .map-node-memo__agent-result-link, .map-node-memo__agent-plan-panel, .map-node-memo__agent-plan-body, .map-node-memo__agent-plan-body *, .map-node-memo__agent-console-panel, .map-node-memo__agent-console-body, .map-node-memo__agent-console-body *, .map-node-memo__agent-console-resize, .map-node-memo__agent-console-resize *`;
+    const MEMO_EDIT_ONLY_SELECTORS = '.map-node-memo__title, .map-node-memo__body, .map-node-memo__icon-button, .map-node-memo__icon-option, .map-node-memo__icon-popover';
+
+    function getNodeMetadata(nodeModel) {
+        return nodeModel?.metadata || nodeModel?.Metadata || null;
+    }
+
+    function getNodeSemanticType(nodeModel) {
+        const metadata = getNodeMetadata(nodeModel);
+        return String(metadata?.SemanticType || metadata?.semanticType || '').trim();
+    }
+
+    const BUSINESS_AUTOMATION_SEMANTIC_TYPE = 'BusinessAutomationNode';
+    const AUTOMATION_INPUT_PINS_METADATA_KEY = 'AutomationInputPins';
+    const AUTOMATION_OUTPUT_PINS_METADATA_KEY = 'AutomationOutputPins';
+    const AUTOMATION_PIN_RAIL_WIDTH = 118;
+    const AUTOMATION_EDGE_GUTTER_X = 80;
+
+    function parseAutomationPinsFromMetadata(metadata, key) {
+        const raw = metadata?.[key] ?? metadata?.[key.charAt(0).toLowerCase() + key.slice(1)];
+        if (Array.isArray(raw)) {
+            return raw;
+        }
+
+        if (typeof raw !== 'string' || !raw.trim()) {
+            return [];
+        }
+
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        } catch {
+            return [];
+        }
+    }
+
+    function getAutomationPinnedNodeCursorExtraPadding(nodeModel, direction) {
+        if (getNodeSemanticType(nodeModel) !== BUSINESS_AUTOMATION_SEMANTIC_TYPE
+            || String(direction || '').toLowerCase() === 'vertical') {
+            return 0;
+        }
+
+        const metadata = getNodeMetadata(nodeModel);
+        const hasInputPins = parseAutomationPinsFromMetadata(metadata, AUTOMATION_INPUT_PINS_METADATA_KEY).length > 0;
+        const hasOutputPins = parseAutomationPinsFromMetadata(metadata, AUTOMATION_OUTPUT_PINS_METADATA_KEY).length > 0;
+        if (!hasInputPins && !hasOutputPins) {
+            return 0;
+        }
+
+        return (hasInputPins ? AUTOMATION_PIN_RAIL_WIDTH : 0)
+            + (hasOutputPins ? AUTOMATION_PIN_RAIL_WIDTH : 0)
+            + AUTOMATION_EDGE_GUTTER_X;
+    }
+
+    function isAgentStyledMemoNode(nodeModel) {
+        const semanticType = getNodeSemanticType(nodeModel);
+        return semanticType === 'MindCanvasAgent'
+            || semanticType === 'AgentCommand'
+            || semanticType === BUSINESS_AUTOMATION_SEMANTIC_TYPE;
+    }
+
+    function isAgentNodeModel(nodeModel) {
+        const nodeType = String(nodeModel?.nodeType ?? nodeModel?.NodeType ?? '').toLowerCase();
+        if (nodeType.startsWith('agent_')) {
+            return true;
+        }
+
+        const metadata = getNodeMetadata(nodeModel);
+        const agentId = metadata?.agentId ?? metadata?.AgentId;
+        return agentId !== undefined && agentId !== null && String(agentId) !== '';
+    }
+
+    function isInlineEditableNodeModel(nodeModel) {
+        const contentType = String(nodeModel?.contentType ?? nodeModel?.ContentType ?? '').toLowerCase();
+        return contentType === 'note' || contentType === 'memo' || contentType === 'code' || isAgentNodeModel(nodeModel);
+    }
+
+    function isReadOnlyTextSelectionNodeModel(nodeModel) {
+        const contentType = String(nodeModel?.contentType ?? nodeModel?.ContentType ?? '').toLowerCase();
+        return (contentType === 'text' || contentType === 'markdown') && !isAgentNodeModel(nodeModel);
+    }
+
+    function getSelectionBorderColorHex(nodeModel, isSelected) {
+        if (String(nodeModel?.contentType ?? nodeModel?.ContentType ?? '').toLowerCase() !== 'memo') {
+            return isSelected ? 0x7b7ff2 : 0x374151;
+        }
+
+        const fallbackKey = 'coral';
+        const key = String(getNodeMetadata(nodeModel)?.memoColor || fallbackKey).toLowerCase();
+        const theme = MEMO_SELECTION_THEMES[key] || MEMO_SELECTION_THEMES[fallbackKey];
+        return isSelected ? theme.accent : theme.border;
+    }
+
+    function cloneNodeMetadata(nodeModel) {
+        const source = getNodeMetadata(nodeModel);
+        return source && typeof source === 'object' ? { ...source } : {};
+    }
+
+    function captureDeleteSnapshot(module, nodeId) {
+        const fallback = {
+            nodeId: String(nodeId || ''),
+            currentContent: '',
+            currentPrompt: '',
+            metadata: {}
+        };
+
+        const entry = module?.nodeObjectsById?.get(nodeId);
+        if (!entry?.model) {
+            return fallback;
+        }
+
+        const model = entry.model;
+        const contentType = String(model.contentType ?? model.ContentType ?? '').toLowerCase();
+        const metadata = cloneNodeMetadata(model);
+        let currentPrompt = model.prompt ?? model.Prompt ?? '';
+        let currentContent = model.response ?? model.Response ?? '';
+
+        const root = entry.cssObject?.element || null;
+        if (root) {
+            if (contentType === 'memo') {
+                const titleInput = root.querySelector('.map-node-memo__title');
+                const bodyTextarea = root.querySelector('.map-node-memo__body');
+                if (titleInput) {
+                    currentPrompt = titleInput.value ?? '';
+                }
+                if (bodyTextarea) {
+                    currentContent = bodyTextarea.value ?? '';
+                }
+            } else if (contentType === 'note') {
+                const textarea = root.querySelector('textarea, [id^="node-textarea-"]');
+                if (textarea) {
+                    currentContent = textarea.value ?? '';
+                }
+            }
+        }
+
+        model.prompt = currentPrompt;
+        model.Prompt = currentPrompt;
+        model.response = currentContent;
+        model.Response = currentContent;
+        model.metadata = metadata;
+        model.Metadata = metadata;
+
+        return {
+            nodeId: String(nodeId),
+            currentContent,
+            currentPrompt,
+            metadata
+        };
+    }
+
+
+    // ▲▲▲ [Config] ▲▲▲
+
+    // --- Module state (caches, locks, etc.) ---
+    let textureCache = new Map();
+    let imageCache = new Map();
+    const failedImageUrlCache = new Map();
+    let nodeRenderLocks = new Map();
+    let pendingNodeUpdates = new Map();
+
+    // ▼▼▼ [New] Text Render Mode State ('canvas' | 'troika') ▼▼▼
+    let TEXT_RENDER_MODE = 'canvas'; // Default to Canvas 2D
+    // ▲▲▲ [New] ▲▲▲
+
+    // ★ 텍스처 메모리 추적
+    let totalTextureMemoryBytes = 0;
+
+    function calculateTextureMemory(textures, nodeId = 'unknown') {
+        if (!textures) return 0;
+        let bytes = 0;
+
+        // Canvas 텍스처 메모리 = width * height * 4 (RGBA)
+        const calcTexSize = (tex, name) => {
+            if (!tex || !tex.image) return 0;
+            if (tex._isShared) return 0;
+            const img = tex.image;
+            const w = img.width || img.naturalWidth || 0;
+            const h = img.height || img.naturalHeight || 0;
+            const size = w * h * 4; // RGBA
+            if (size > 1024 * 1024) { // 1MB 이상만 로그
+                console.log(`  [TexMem] ${name}: ${w}x${h} = ${(size / 1024 / 1024).toFixed(2)}MB`);
+            }
+            return size;
+        };
+
+        // default body & tail
+        bytes += calcTexSize(textures.default?.body, `${nodeId}.default.body`);
+        bytes += calcTexSize(textures.default?.tail, `${nodeId}.default.tail`);
+        // selected body & tail
+        bytes += calcTexSize(textures.selected?.body, `${nodeId}.selected.body`);
+        bytes += calcTexSize(textures.selected?.tail, `${nodeId}.selected.tail`);
+        // glow
+        bytes += calcTexSize(textures.glow?.texture, `${nodeId}.glow`);
+
+        return bytes;
+    }
+
+    function logTextureMemory(action, nodeId, deltaBytes = 0) {
+        if (!deltaBytes) return;
+        totalTextureMemoryBytes += deltaBytes;
+        const totalMB = (totalTextureMemoryBytes / (1024 * 1024)).toFixed(2);
+        const deltaMB = (Math.abs(deltaBytes) / (1024 * 1024)).toFixed(2);
+        const sign = deltaBytes >= 0 ? '+' : '-';
+        console.log(`[📊 Texture Memory] ${action} ${nodeId}: ${sign}${deltaMB}MB | Total: ${totalMB}MB (${textureCache.size} nodes)`);
+    }
+
+    function estimateTextureCacheMemoryBytes(cache = textureCache) {
+        if (!(cache instanceof Map) || cache.size === 0) {
+            return 0;
+        }
+
+        let bytes = 0;
+        cache.forEach((textures, nodeId) => {
+            bytes += calculateTextureMemory(textures, nodeId);
+        });
+        return bytes;
+    }
+
+    function syncExportedRuntimeCaches() {
+        if (!window.MindMapNodes) return;
+        window.MindMapNodes.textureCache = textureCache;
+        window.MindMapNodes.imageCache = imageCache;
+        window.MindMapNodes.nodeRenderLocks = nodeRenderLocks;
+        window.MindMapNodes.pendingNodeUpdates = pendingNodeUpdates;
+    }
+
+    function replaceRuntimeCaches(nextState = {}) {
+        if (nextState.textureCache instanceof Map) {
+            textureCache = nextState.textureCache;
+        }
+        if (nextState.imageCache instanceof Map) {
+            imageCache = nextState.imageCache;
+        }
+        if (nextState.nodeRenderLocks instanceof Map) {
+            nodeRenderLocks = nextState.nodeRenderLocks;
+        }
+        if (nextState.pendingNodeUpdates instanceof Map) {
+            pendingNodeUpdates = nextState.pendingNodeUpdates;
+        }
+
+        const nextTextureBytes = Number(nextState.totalTextureMemoryBytes);
+        totalTextureMemoryBytes = Number.isFinite(nextTextureBytes)
+            ? Math.max(0, nextTextureBytes)
+            : estimateTextureCacheMemoryBytes(textureCache);
+
+        syncExportedRuntimeCaches();
+    }
+
+    function getRuntimeCacheStats() {
+        return {
+            textureEntryCount: textureCache.size,
+            imageEntryCount: imageCache.size,
+            nodeRenderLockCount: nodeRenderLocks.size,
+            pendingNodeUpdateCount: pendingNodeUpdates.size,
+            textureBytesEstimate: Math.max(0, Number(totalTextureMemoryBytes) || 0)
+        };
+    }
+
+    // ▼▼▼ [Restored] Generate background texture with border for code nodes ▼▼▼
+
+    // ▲▲▲ [Restored] ▲▲▲
+
+    // ▼▼▼ [New] Scrollbar Style Injection ▼▼▼
+    function injectScrollbarStyles() {
+        const styleId = 'mindmap-thin-scrollbar-style';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.innerHTML = `
+            /* Narrow scrollbar width/height (approx 6-8px) */
+            .thin-scrollbar::-webkit-scrollbar {
+                width: 8px;
+                height: 8px;
+            }
+            /* Scrollbar Thumb */
+            .thin-scrollbar::-webkit-scrollbar-thumb {
+                background-color: rgba(0, 0, 0, 0.3);
+                border-radius: 4px;
+            }
+            /* Darken on hover */
+            .thin-scrollbar:hover {
+                scrollbar-color: rgba(0, 0, 0, 0.45) transparent;
+            }
+            .thin-scrollbar::-webkit-scrollbar-thumb:hover {
+                background-color: rgba(0, 0, 0, 0.45);
+            }
+            .thin-scrollbar:hover::-webkit-scrollbar-thumb,
+            .thin-scrollbar::-webkit-scrollbar-thumb:active {
+                background-color: rgba(0, 0, 0, 0.45);
+            }
+            /* Transparent Track */
+            .thin-scrollbar::-webkit-scrollbar-track {
+                background: transparent;
+            }
+            /* Firefox Compatibility */
+            .thin-scrollbar {
+                box-sizing: border-box;
+                scrollbar-gutter: stable;
+                padding-right: 14px;
+                scrollbar-width: thin;
+                scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    // ▲▲▲ [New] ▲▲▲
+
+    // --- Public API functions ---
+
+    // ▼▼▼ [New] Helper to update the node's spatial-grid registration ▼▼▼
+    function getNodeSpatialGridKeys(nodeEntry) {
+        if (nodeEntry?._spatialGridKeys instanceof Set) {
+            return nodeEntry._spatialGridKeys;
+        }
+        if (nodeEntry?.glObject?.userData?.spatialGridKeys instanceof Set) {
+            return nodeEntry.glObject.userData.spatialGridKeys;
+        }
+        if (nodeEntry?.cssObject?.userData?.spatialGridKeys instanceof Set) {
+            return nodeEntry.cssObject.userData.spatialGridKeys;
+        }
+
+        return new Set();
+    }
+
+    function setNodeSpatialGridKeys(nodeEntry, keys) {
+        if (!nodeEntry) return;
+        nodeEntry._spatialGridKeys = keys;
+        if (nodeEntry.glObject) {
+            nodeEntry.glObject.userData ??= {};
+            nodeEntry.glObject.userData.spatialGridKeys = keys;
+        }
+        if (nodeEntry.cssObject) {
+            nodeEntry.cssObject.userData ??= {};
+            nodeEntry.cssObject.userData.spatialGridKeys = keys;
+        }
+    }
+
+    function getNodeWorldBounds(nodeEntry) {
+        const sharedHelper = window.MindMapNodeBounds?.getNodeWorldBounds;
+        if (typeof sharedHelper === 'function') {
+            return sharedHelper(nodeEntry);
+        }
+
+        const model = nodeEntry?.model || null;
+        const obj = nodeEntry?.glObject || nodeEntry?.cssObject || null;
+        if (!model && !obj) {
+            return null;
+        }
+
+        const width = Math.max(1, Number(
+            nodeEntry?.glObject?.userData?.worldWidth
+            ?? nodeEntry?.cssObject?.userData?.worldWidth
+            ?? model?.width
+            ?? 400
+        ));
+        const height = Math.max(1, Number(
+            nodeEntry?.glObject?.userData?.worldHeight
+            ?? nodeEntry?.cssObject?.userData?.worldHeight
+            ?? model?.height
+            ?? 200
+        ));
+        const x = Number(obj?.position?.x ?? model?.positionX ?? model?.x ?? 0);
+        const y = Number(obj?.position?.y ?? model?.positionY ?? model?.y ?? 0);
+        const z = Number(obj?.position?.z ?? model?.positionZ ?? model?.z ?? 0);
+
+        return {
+            minX: x,
+            maxX: x + width,
+            minY: y - height,
+            maxY: y,
+            x,
+            y,
+            z,
+            width,
+            height
+        };
+    }
+
+    function updateNodeSpatialGrid(module, nodeId) {
+        const nodeEntry = module.nodeObjectsById.get(nodeId);
+        if (!nodeEntry) return;
+
+        const bounds = getNodeWorldBounds(nodeEntry);
+        if (!bounds) return;
+
+        const oldKeys = getNodeSpatialGridKeys(nodeEntry);
+        const newKeys = new Set();
+        const startCellX = Math.floor(bounds.minX / module.GRID_CELL_SIZE);
+        const endCellX = Math.floor(bounds.maxX / module.GRID_CELL_SIZE);
+        const startCellY = Math.floor(bounds.minY / module.GRID_CELL_SIZE);
+        const endCellY = Math.floor(bounds.maxY / module.GRID_CELL_SIZE);
+
+        for (let x = startCellX; x <= endCellX; x++) {
+            for (let y = startCellY; y <= endCellY; y++) {
+                newKeys.add(`${x}:${y}`);
+            }
+        }
+
+        // Update only the changed keys
+        oldKeys.forEach(key => {
+            if (!newKeys.has(key)) {
+                const cell = module.spatialGrid.get(key);
+                if (cell) cell.delete(nodeId);
+                if (cell && cell.size === 0) module.spatialGrid.delete(key);
+            }
+        });
+        newKeys.forEach(key => {
+            if (!oldKeys.has(key)) {
+                if (!module.spatialGrid.has(key)) module.spatialGrid.set(key, new Set());
+                module.spatialGrid.get(key).add(nodeId);
+            }
+        });
+
+        setNodeSpatialGridKeys(nodeEntry, newKeys);
+        module.logicWorkerBridge?.upsertNodeEntry?.(nodeEntry, module, {
+            nodeId,
+            bounds,
+            cellKeys: newKeys
+        });
+    }
+
+    function snapNodeFrameDimension(module, value, fallback = null) {
+        const grid = Math.max(1, Number(module?.GRID_SIZE || 10));
+        const raw = Number(value);
+        if (Number.isFinite(raw) && raw > 0) {
+            return Math.max(grid, Math.round(raw / grid) * grid);
+        }
+
+        const fallbackValue = Number(fallback);
+        if (Number.isFinite(fallbackValue) && fallbackValue > 0) {
+            return Math.max(grid, Math.round(fallbackValue / grid) * grid);
+        }
+
+        return grid;
+    }
+
+    function applyNodeWorldPosition(module, nodeEntry, x, y, z = null) {
+        if (!module || !nodeEntry) return;
+
+        const nextX = Number(x || 0);
+        const nextY = Number(y || 0);
+        const nextZ = Number.isFinite(Number(z))
+            ? Number(z)
+            : Number(nodeEntry.model?.positionZ ?? nodeEntry.glObject?.position?.z ?? nodeEntry.cssObject?.position?.z ?? 0);
+
+        if (nodeEntry.model) {
+            nodeEntry.model.positionX = nextX;
+            nodeEntry.model.positionY = nextY;
+            nodeEntry.model.positionZ = nextZ;
+            nodeEntry.model.x = nextX;
+            nodeEntry.model.y = nextY;
+            nodeEntry.model.z = nextZ;
+        }
+
+        if (nodeEntry.glObject) {
+            nodeEntry.glObject.position.set(nextX, nextY, nextZ);
+        }
+
+        if (nodeEntry.cssObject) {
+            const cssParentScene = module.cssScene || module.scene;
+            if (cssParentScene && nodeEntry.cssObject.parent !== cssParentScene) {
+                cssParentScene.add(nodeEntry.cssObject);
+                window.MindMapCss3DManager?.markCssParentRepairNeeded?.(module, nodeEntry.model?.id || nodeEntry.glObject?.userData?.nodeId);
+            }
+            nodeEntry.cssObject.position.set(nextX, nextY, nextZ);
+            nodeEntry.cssObject.updateMatrixWorld(true);
+            window.MindMapCss3DManager?.markNodeTransformDirty?.(module, nodeEntry.model?.id || nodeEntry.glObject?.userData?.nodeId);
+        }
+
+        const nodeId = nodeEntry.model?.id || nodeEntry.glObject?.userData?.nodeId;
+        updateNodeSpatialGrid(module, nodeId);
+        module.lodRenderer?.markPositionsDirty?.(nodeId);
+        module._forceUpdateFrames = Math.max(Number(module._forceUpdateFrames || 0), 2);
+    }
+
+    function moveCursorAfterNodePlacement(module, nodeModel, width, height, options = {}) {
+        if (!module || !nodeModel || typeof module.updateCursorPosition !== 'function') {
+            return;
+        }
+
+        const moveCamera = options.moveCamera === true;
+        const persistViewState = options.persistViewState !== false;
+        const direction = String(options.direction || module.cursorDirection || 'horizontal').toLowerCase();
+        const basePadding = Number.isFinite(Number(options.padding)) ? Number(options.padding) : 30;
+        const padding = basePadding + getAutomationPinnedNodeCursorExtraPadding(nodeModel, direction);
+        const nodeX = Number(nodeModel.positionX || 0);
+        const nodeY = Number(nodeModel.positionY || 0);
+        const nodeWidth = Math.max(1, Number(width || nodeModel.width || 1));
+        const nodeHeight = Math.max(1, Number(height || nodeModel.height || 1));
+
+        let nextCursorX = nodeX;
+        let nextCursorY = nodeY;
+        if (direction === 'vertical') {
+            nextCursorY = nodeY - nodeHeight - padding;
+        } else {
+            nextCursorX = nodeX + nodeWidth + padding;
+        }
+
+        const cameraTarget = {
+            x: nodeX + (nodeWidth / 2),
+            y: nodeY - (nodeHeight / 2)
+        };
+
+        module.updateCursorPosition(nextCursorX, nextCursorY, moveCamera, cameraTarget, persistViewState);
+    }
+
+    function prepareGeneratedImageLayoutUpdate(module, nodeEntry, requestedWidth, requestedHeight, previousResponse, previousIsLoading, nextIsLoading) {
+        const model = nodeEntry?.model;
+        if (!module || !model) {
+            return null;
+        }
+
+        const contentType = String(model.contentType ?? model.ContentType ?? '').toLowerCase();
+        if (contentType !== 'image' || previousIsLoading !== true || nextIsLoading !== false) {
+            return null;
+        }
+
+        const metadata = getNodeMetadata(model);
+        const isNewNode = String(metadata?.IsNew ?? metadata?.isNew ?? '').trim().toLowerCase() === 'true';
+        const hadPlaceholderResponse = !String(previousResponse || '').trim();
+        if (!isNewNode && !hadPlaceholderResponse) {
+            return null;
+        }
+
+        const previousWidth = Math.max(1, Number(model.width || model.Width || 1));
+        const previousHeight = Math.max(1, Number(model.height || model.Height || 1));
+        const nextWidth = snapNodeFrameDimension(module, requestedWidth, previousWidth);
+        const nextHeight = snapNodeFrameDimension(module, requestedHeight, previousHeight);
+        const previousX = Number(model.positionX ?? model.x ?? 0);
+        const previousY = Number(model.positionY ?? model.y ?? 0);
+        const rightEdge = previousX + previousWidth;
+        const bottomEdge = previousY - previousHeight;
+        const snapAxis = typeof module.snapNodeToGrid === 'function'
+            ? module.snapNodeToGrid.bind(module)
+            : (value) => {
+                const grid = Math.max(1, Number(module?.GRID_SIZE || 10));
+                return Math.round(Number(value || 0) / grid) * grid;
+            };
+        const snappedRightEdge = snapAxis(rightEdge);
+        const snappedBottomEdge = snapAxis(bottomEdge);
+        const nextX = snappedRightEdge - nextWidth;
+        const nextY = snappedBottomEdge + nextHeight;
+
+        return {
+            x: nextX,
+            y: nextY,
+            width: nextWidth,
+            height: nextHeight,
+            positionChanged: Math.abs(nextX - previousX) > 0.1 || Math.abs(nextY - previousY) > 0.1,
+            sizeChanged: Math.abs(nextWidth - previousWidth) > 0.1 || Math.abs(nextHeight - previousHeight) > 0.1,
+            shouldMoveCursor: isNewNode
+        };
+    }
+
+    function supportsDeferredShellNode(nodeModel) {
+        const contentType = String(nodeModel?.contentType ?? nodeModel?.ContentType ?? '').toLowerCase();
+        return contentType === 'text' ||
+            contentType === 'note' ||
+            contentType === 'memo' ||
+            contentType === 'markdown' ||
+            contentType === 'code' ||
+            contentType === 'embed';
+    }
+
+    function shouldCreateDeferredShellNode(module, nodeModel) {
+        return module?.isLoading === true && supportsDeferredShellNode(nodeModel);
+    }
+
+    async function ensureDeferredNodeMaterialized(module, nodeEntry, options = {}) {
+        if (!module || !nodeEntry || nodeEntry.isDeferredShell !== true) {
+            return nodeEntry?.glObject || null;
+        }
+
+        const objectManager = window.MindMapObjectManager;
+        const textureFactory = window.MindMapTextureFactory;
+        if (!objectManager?.createOrUpdateCanvasTextureNode || !textureFactory?.generatePlaceholderTextures) {
+            return nodeEntry.glObject || null;
+        }
+
+        const model = nodeEntry.model || {};
+        const oldGroup = nodeEntry.glObject || null;
+        const preservedX = Number(oldGroup?.position?.x ?? model.positionX ?? 0);
+        const preservedY = Number(oldGroup?.position?.y ?? model.positionY ?? 0);
+        const preservedZ = Number(oldGroup?.position?.z ?? model.positionZ ?? 0);
+        const preservedVisible = oldGroup?.visible !== false;
+        const preservedSpatialKeys = new Set(getNodeSpatialGridKeys(nodeEntry));
+        const width = Number(model.width || 400);
+        const height = Number(model.height || 200);
+
+        model.positionX = preservedX;
+        model.positionY = preservedY;
+        model.positionZ = preservedZ;
+
+        let textures = textureCache.get(model.id) || null;
+        if (!textures) {
+            const generated = await textureFactory.generatePlaceholderTextures(module, model, width, height);
+            textures = generated?.textures || null;
+            if (textures) {
+                textureCache.set(model.id, textures);
+            }
+        }
+
+        const materializedGroup = await objectManager.createOrUpdateCanvasTextureNode(
+            module,
+            model,
+            null,
+            preservedZ,
+            textures,
+            width,
+            height
+        );
+        if (!materializedGroup) {
+            return oldGroup;
+        }
+
+        materializedGroup.position.set(preservedX, preservedY, preservedZ);
+        materializedGroup.visible = preservedVisible;
+        materializedGroup.userData ??= {};
+        materializedGroup.userData.spatialGridKeys = preservedSpatialKeys;
+        materializedGroup.userData.isDeferredShell = false;
+
+        if (oldGroup?.parent) {
+            oldGroup.parent.remove(oldGroup);
+        }
+
+        if (options.attachToScene !== false && module.scene && !materializedGroup.parent) {
+            module.scene.add(materializedGroup);
+        }
+
+        nodeEntry.glObject = materializedGroup;
+        nodeEntry.bodyMesh = materializedGroup.getObjectByName?.('body') || null;
+        nodeEntry.tailMesh = materializedGroup.getObjectByName?.('tail') || null;
+        nodeEntry.glowMesh = materializedGroup.getObjectByName?.('glow') || null;
+        nodeEntry.isDeferredShell = false;
+
+        updateNodeSpatialGrid(module, model.id);
+        return materializedGroup;
+    }
+
+    function removeNodeFromSpatialGrid(module, nodeId, nodeEntry = null) {
+        if (!module?.spatialGrid || !nodeId) return;
+
+        const keys = getNodeSpatialGridKeys(nodeEntry);
+        if (keys && typeof keys.forEach === 'function') {
+            keys.forEach(key => {
+                const cell = module.spatialGrid.get(key);
+                if (cell) cell.delete(nodeId);
+                if (cell && cell.size === 0) module.spatialGrid.delete(key);
+            });
+            setNodeSpatialGridKeys(nodeEntry, new Set());
+            return;
+        }
+
+        module.spatialGrid.forEach((cell, key) => {
+            if (!cell?.delete?.(nodeId)) return;
+            if (cell.size === 0) module.spatialGrid.delete(key);
+        });
+    }
+    // ▲▲▲ [New] ▲▲▲
+
+    function ensureNodeMeshCache(entry) {
+        if (!entry?.glObject) return;
+        if (!entry.bodyMesh) entry.bodyMesh = entry.glObject.getObjectByName('body');
+        if (!entry.tailMesh) entry.tailMesh = entry.glObject.getObjectByName('tail');
+        if (!entry.glowMesh) entry.glowMesh = entry.glObject.getObjectByName('glow');
+    }
+
+    function setNodeScrollbarVisibility(entry, visible) {
+        if (!entry?.glObject?.getObjectByName) return;
+        const track = entry.glObject.getObjectByName('scrollbarTrack');
+        const thumb = entry.glObject.getObjectByName('scrollbarThumb');
+        if (track) track.visible = !!visible;
+        if (thumb) thumb.visible = !!visible;
+    }
+
+    const IMAGE_SELECTION_GLOW_PAD = 24;
+    const IMAGE_SELECTION_GLOW_COLOR = 0x1e3a8a;
+    const IMAGE_SELECTION_GLOW_OPACITY = 0.24;
+    const IMAGE_SELECTION_SDF_GLOW_COLOR = 0x3b82f6;
+    const IMAGE_SELECTION_SDF_GLOW_OPACITY = 0.46;
+    const IMAGE_MID_GLOW_COLOR = 0x0f172a;
+    const IMAGE_MID_GLOW_OPACITY = 0.34;
+
+    function getImageLodThresholds() {
+        const thresholds = window.LODRenderer?.LOD_THRESHOLDS || null;
+        const mid = Number.isFinite(thresholds?.MID) ? thresholds.MID : 6000;
+        const far = Number.isFinite(thresholds?.FAR) ? thresholds.FAR : 25000;
+        return { mid, far };
+    }
+
+    function createRoundedRectFilledGeometry(width, height, radius) {
+        const shape = new THREE.Shape();
+        const x = 0;
+        const y = 0;
+        const r = Math.min(radius, width / 2, height / 2);
+        const h = -height;
+
+        shape.moveTo(x + r, y);
+        shape.lineTo(x + width - r, y);
+        shape.quadraticCurveTo(x + width, y, x + width, y - r);
+        shape.lineTo(x + width, y + h + r);
+        shape.quadraticCurveTo(x + width, y + h, x + width - r, y + h);
+        shape.lineTo(x + r, y + h);
+        shape.quadraticCurveTo(x, y + h, x, y + h + r);
+        shape.lineTo(x, y - r);
+        shape.quadraticCurveTo(x, y, x + r, y);
+
+        return new THREE.ShapeGeometry(shape);
+    }
+
+    function syncImageSelectionGlow(group, width, height, baseRenderOrder, isSelected) {
+        if (!group) return null;
+
+        let outline = group.getObjectByName('outline');
+        if (!outline) {
+            outline = new THREE.Mesh(
+                createRoundedRectFilledGeometry(
+                    width + IMAGE_SELECTION_GLOW_PAD,
+                    height + IMAGE_SELECTION_GLOW_PAD,
+                    20 + (IMAGE_SELECTION_GLOW_PAD * 0.5)
+                ),
+                new THREE.MeshBasicMaterial({
+                    color: IMAGE_SELECTION_GLOW_COLOR,
+                    transparent: true,
+                    opacity: 0,
+                    depthWrite: false,
+                    depthTest: false
+                })
+            );
+            outline.name = 'outline';
+            group.add(outline);
+        }
+
+        outline.geometry?.dispose?.();
+        outline.geometry = createRoundedRectFilledGeometry(
+            width + IMAGE_SELECTION_GLOW_PAD,
+            height + IMAGE_SELECTION_GLOW_PAD,
+            20 + (IMAGE_SELECTION_GLOW_PAD * 0.5)
+        );
+        outline.position.set(-(IMAGE_SELECTION_GLOW_PAD / 2), IMAGE_SELECTION_GLOW_PAD / 2, 0);
+        outline.renderOrder = Math.max(0, (baseRenderOrder || 1) - 1);
+        outline.visible = !!isSelected;
+
+        if (outline.material) {
+            outline.material.color.setHex(IMAGE_SELECTION_GLOW_COLOR);
+            outline.material.opacity = isSelected ? IMAGE_SELECTION_GLOW_OPACITY : 0;
+            outline.material.transparent = true;
+            outline.material.depthWrite = false;
+            outline.material.depthTest = false;
+            outline.material.needsUpdate = true;
+        }
+
+        return outline;
+    }
+
+    function syncImageMidLodDecorations(group, width, height, baseRenderOrder, isSelected, visible) {
+        if (!group) return null;
+
+        const existingEdge = group.getObjectByName('imageMidEdge');
+        if (existingEdge) {
+            existingEdge.parent?.remove?.(existingEdge);
+            existingEdge.geometry?.dispose?.();
+            existingEdge.material?.dispose?.();
+        }
+        const existingGlow = group.getObjectByName('imageMidGlow');
+        const visibilityConfig =
+            visible && typeof visible === 'object'
+                ? visible
+                : null;
+        const edgeVisible = false;
+        const glowVisible = visibilityConfig
+            ? !!visibilityConfig.glowVisible
+            : (visible === undefined ? (existingGlow?.visible ?? false) : !!visible);
+        const previousState = group.userData?.imageMidLodDecorState || null;
+
+        if (
+            previousState &&
+            previousState.width === width &&
+            previousState.height === height &&
+            previousState.baseRenderOrder === baseRenderOrder &&
+            previousState.isSelected === !!isSelected &&
+            previousState.edgeVisible === edgeVisible &&
+            previousState.glowVisible === glowVisible &&
+            ((existingGlow && existingGlow.visible === glowVisible) || (!existingGlow && glowVisible === false))
+        ) {
+            return { edge: null, glow: existingGlow || null };
+        }
+
+        group.userData.imageMidLodDecorState = {
+            width,
+            height,
+            baseRenderOrder,
+            isSelected: !!isSelected,
+            edgeVisible,
+            glowVisible
+        };
+
+        let glow = existingGlow;
+        if (window.MindMapGlowShader?.createSDFGlowMesh) {
+            glow = window.MindMapGlowShader.createSDFGlowMesh(width, height, false, 'image', glow || null);
+            glow.name = 'imageMidGlow';
+            glow.raycast = () => { };
+            if (!glow.parent) {
+                group.add(glow);
+            }
+        } else {
+            const glowWidth = Math.max(1, width + 24);
+            const glowHeight = Math.max(1, height + 24);
+            if (!glow) {
+                glow = new THREE.Mesh(
+                    new THREE.PlaneGeometry(glowWidth, glowHeight),
+                    new THREE.MeshBasicMaterial({
+                        color: IMAGE_MID_GLOW_COLOR,
+                        transparent: true,
+                        opacity: IMAGE_MID_GLOW_OPACITY,
+                        depthWrite: false,
+                        depthTest: false,
+                        side: THREE.DoubleSide
+                    })
+                );
+                glow.name = 'imageMidGlow';
+                glow.raycast = () => { };
+                group.add(glow);
+            }
+
+            const glowGeometry = glow.geometry?.parameters;
+            if (!glowGeometry || glowGeometry.width !== glowWidth || glowGeometry.height !== glowHeight) {
+                glow.geometry?.dispose?.();
+                glow.geometry = new THREE.PlaneGeometry(glowWidth, glowHeight);
+            }
+        }
+
+        if (glow) {
+            const glowColor = isSelected ? IMAGE_SELECTION_SDF_GLOW_COLOR : IMAGE_MID_GLOW_COLOR;
+            const glowOpacity = isSelected ? IMAGE_SELECTION_SDF_GLOW_OPACITY : IMAGE_MID_GLOW_OPACITY;
+            glow.position.set(width / 2, -height / 2, -0.02);
+            glow.renderOrder = Math.max(0, (baseRenderOrder || 1) - 3);
+            glow.visible = glowVisible;
+
+            if (glow.material?.uniforms) {
+                glow.material.uniforms.color.value.setHex(glowColor);
+                glow.material.uniforms.opacity.value = glowOpacity;
+                glow.material.depthWrite = false;
+                glow.material.depthTest = false;
+                glow.material.transparent = true;
+                glow.material.needsUpdate = true;
+            } else if (glow.material) {
+                glow.material.color.setHex(glowColor);
+                glow.material.opacity = glowOpacity;
+                glow.material.transparent = true;
+                glow.material.depthWrite = false;
+                glow.material.depthTest = false;
+                glow.material.needsUpdate = true;
+            }
+        }
+
+        return { edge: null, glow };
+    }
+
+    function applyImageCoverUv(bodyMesh, nodeWidth, nodeHeight) {
+        const material = bodyMesh?.material;
+        const texture = material?.map;
+        if (!texture) return;
+
+        const image = texture.image;
+        const imageWidth = Number(image?.videoWidth || image?.naturalWidth || image?.width || 0);
+        const imageHeight = Number(image?.videoHeight || image?.naturalHeight || image?.height || 0);
+        const targetWidth = Number(nodeWidth || bodyMesh?.geometry?.parameters?.width || 0);
+        const targetHeight = Number(nodeHeight || bodyMesh?.geometry?.parameters?.height || 0);
+
+        if (!(imageWidth > 0 && imageHeight > 0 && targetWidth > 0 && targetHeight > 0)) {
+            return;
+        }
+
+        const imageAspect = imageWidth / imageHeight;
+        const targetAspect = targetWidth / targetHeight;
+
+        let repeatX = 1;
+        let repeatY = 1;
+        let offsetX = 0;
+        let offsetY = 0;
+
+        // Match CSS `object-fit: cover` behavior in WebGL mode.
+        if (imageAspect > targetAspect) {
+            repeatX = targetAspect / imageAspect;
+            offsetX = (1 - repeatX) * 0.5;
+        } else if (imageAspect < targetAspect) {
+            repeatY = imageAspect / targetAspect;
+            offsetY = (1 - repeatY) * 0.5;
+        }
+
+        const requiresManualVFlip = texture.userData?.mindMapManualVFlip === true;
+        if (requiresManualVFlip) {
+            repeatY = -repeatY;
+            offsetY = 1 - offsetY;
+        }
+
+        const previousWrapS = texture.wrapS;
+        const previousWrapT = texture.wrapT;
+        const previousCenterX = Number(texture.center?.x ?? 0);
+        const previousCenterY = Number(texture.center?.y ?? 0);
+        const previousRepeatX = Number(texture.repeat?.x ?? 1);
+        const previousRepeatY = Number(texture.repeat?.y ?? 1);
+        const previousOffsetX = Number(texture.offset?.x ?? 0);
+        const previousOffsetY = Number(texture.offset?.y ?? 0);
+        const hasWrapChange =
+            previousWrapS !== THREE.ClampToEdgeWrapping ||
+            previousWrapT !== THREE.ClampToEdgeWrapping;
+        const hasCenterChange =
+            Math.abs(previousCenterX) > 1e-6 ||
+            Math.abs(previousCenterY) > 1e-6;
+        const hasRepeatChange =
+            Math.abs(previousRepeatX - repeatX) > 1e-6 ||
+            Math.abs(previousRepeatY - repeatY) > 1e-6;
+        const hasOffsetChange =
+            Math.abs(previousOffsetX - offsetX) > 1e-6 ||
+            Math.abs(previousOffsetY - offsetY) > 1e-6;
+
+        if (!hasWrapChange && !hasCenterChange && !hasRepeatChange && !hasOffsetChange) {
+            return;
+        }
+
+        texture.wrapS = THREE.ClampToEdgeWrapping;
+        texture.wrapT = THREE.ClampToEdgeWrapping;
+        // Keep center at the origin because offset already describes the centered crop window.
+        // Combining a 0.5 center with the offset shifts the sampled image in MID/FAR WebGL mode.
+        if (texture.center?.set) texture.center.set(0, 0);
+        if (texture.repeat?.set) texture.repeat.set(repeatX, repeatY);
+        if (texture.offset?.set) texture.offset.set(offsetX, offsetY);
+        if (hasWrapChange) {
+            texture.needsUpdate = true;
+        }
+    }
+
+    const IMAGE_STATUS_SPINNER_CYCLE_MS = 900;
+    const IMAGE_STATUS_ANIMATION_FRAME_MS = 140;
+    const IMAGE_STATUS_TEXTURE_MIN_SCALE = 2;
+    const IMAGE_STATUS_TEXTURE_MAX_SCALE = 4;
+    const IMAGE_STATUS_TEXTURE_MIN_BACKING = 160;
+    const IMAGE_STATUS_LOADING_TEXTURE_MIN_SCALE = 1;
+    const IMAGE_STATUS_LOADING_TEXTURE_MAX_SCALE = 2;
+    const IMAGE_STATUS_LOADING_TEXTURE_MIN_BACKING = 128;
+
+    function clampImageStatusMetric(value, min, max) {
+        return Math.max(min, Math.min(max, value));
+    }
+
+    function resolveImageStatusTextureScale(isLoading = false) {
+        const windowDpr = Math.max(1, Number(window.devicePixelRatio || 1));
+        const rendererDpr = Math.max(1, Number(window.mindMap?.renderer?.getPixelRatio?.() || 1));
+        const baseDpr = Math.max(windowDpr, rendererDpr);
+        const boostedScale = Math.ceil(baseDpr * (isLoading ? 1.0 : 1.35));
+        return clampImageStatusMetric(
+            boostedScale,
+            isLoading ? IMAGE_STATUS_LOADING_TEXTURE_MIN_SCALE : IMAGE_STATUS_TEXTURE_MIN_SCALE,
+            isLoading ? IMAGE_STATUS_LOADING_TEXTURE_MAX_SCALE : IMAGE_STATUS_TEXTURE_MAX_SCALE
+        );
+    }
+
+    function getImageStatusTypography(width, height) {
+        const safeWidth = Math.max(160, Number(width || 0));
+        const safeHeight = Math.max(120, Number(height || 0));
+        const base = Math.min(safeWidth, safeHeight);
+        return {
+            titleSize: clampImageStatusMetric(Math.round(base * 0.095), 16, 28),
+            subtitleSize: clampImageStatusMetric(Math.round(base * 0.07), 13, 22),
+            radius: clampImageStatusMetric(base * 0.12, 16, 28),
+            strokeWidth: clampImageStatusMetric(base * 0.018, 3, 5),
+            titleGap: clampImageStatusMetric(base * 0.15, 24, 40),
+            subtitleGap: clampImageStatusMetric(base * 0.28, 44, 68)
+        };
+    }
+
+    function getImageStatusState(nodeModel) {
+        const isLoading = !!(nodeModel?.isLoading ?? nodeModel?.IsLoading ?? false);
+        const contentType = String(nodeModel?.contentType ?? nodeModel?.ContentType ?? '').trim().toLowerCase();
+        const metadata = nodeModel?.metadata ?? nodeModel?.Metadata ?? {};
+        const hasError = !!String(metadata?.ImageGenerationError || '').trim();
+        const readyTitle = contentType === 'video'
+            ? 'Video'
+            : (contentType === 'embed' ? 'Embed' : 'Image');
+        const loadingTitle = contentType === 'video'
+            ? 'Loading video'
+            : (contentType === 'embed' ? 'Loading embed' : 'Generating image');
+
+        return {
+            isLoading,
+            hasError,
+            title: hasError
+                ? 'Image failed'
+                : (isLoading ? loadingTitle : readyTitle),
+            subtitle: hasError
+                ? 'Check console and retry'
+                : (isLoading ? 'Please wait' : 'Preparing preview')
+        };
+    }
+
+    function hasNodeResponseContent(nodeModel) {
+        return !!String(nodeModel?.response ?? nodeModel?.Response ?? '').trim();
+    }
+
+    function shouldUseCssImageLoadingOverlay(nodeModel) {
+        const contentType = String(nodeModel?.contentType ?? nodeModel?.ContentType ?? '').trim().toLowerCase();
+        if (contentType !== 'image') {
+            return false;
+        }
+
+        const isLoading = !!(nodeModel?.isLoading ?? nodeModel?.IsLoading ?? false);
+        return isLoading && !hasNodeResponseContent(nodeModel);
+    }
+
+    function shouldShowImageBodyInCssMode(nodeModel) {
+        const contentType = String(nodeModel?.contentType ?? nodeModel?.ContentType ?? '').trim().toLowerCase();
+        if (contentType !== 'image') {
+            return false;
+        }
+        return nodeModel?._showImageBodyInCssMode === true;
+    }
+
+    function drawImageStatusTextureFrame(ctx, width, height, statusState, rotationRadians = 0) {
+        if (!ctx) {
+            return;
+        }
+
+        const isLoading = statusState?.isLoading === true;
+        const hasError = statusState?.hasError === true;
+        const title = String(statusState?.title || '');
+        const subtitle = String(statusState?.subtitle || '');
+
+        ctx.clearRect(0, 0, width, height);
+        ctx.fillStyle = '#f8fafc';
+        ctx.fillRect(0, 0, width, height);
+
+        ctx.strokeStyle = '#e2e8f0';
+        ctx.lineWidth = 1;
+        ctx.strokeRect(0.5, 0.5, width - 1, height - 1);
+
+        const centerX = width / 2;
+        const centerY = Math.max(52, (height / 2) - 12);
+        const typography = getImageStatusTypography(width, height);
+        const radius = typography.radius;
+
+        ctx.lineCap = 'round';
+        ctx.lineWidth = typography.strokeWidth;
+        if (hasError) {
+            ctx.strokeStyle = '#f59e0b';
+            ctx.beginPath();
+            ctx.moveTo(centerX - radius * 0.6, centerY - radius * 0.6);
+            ctx.lineTo(centerX + radius * 0.6, centerY + radius * 0.6);
+            ctx.moveTo(centerX + radius * 0.6, centerY - radius * 0.6);
+            ctx.lineTo(centerX - radius * 0.6, centerY + radius * 0.6);
+            ctx.stroke();
+        } else {
+            ctx.strokeStyle = 'rgba(148, 163, 184, 0.3)';
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+            ctx.stroke();
+
+            const arcLength = isLoading ? Math.PI * 1.2 : Math.PI * 1.3;
+            const startAngle = isLoading
+                ? (rotationRadians - (Math.PI * 0.5))
+                : (-Math.PI * 0.45);
+            ctx.strokeStyle = isLoading ? '#3b82f6' : '#94a3b8';
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, radius, startAngle, startAngle + arcLength);
+            ctx.stroke();
+        }
+
+        ctx.textAlign = 'center';
+        ctx.fillStyle = '#0f172a';
+        ctx.textBaseline = 'middle';
+        ctx.font = `600 ${typography.titleSize}px "Segoe UI", sans-serif`;
+        ctx.fillText(title, centerX, centerY + radius + typography.titleGap);
+
+        ctx.fillStyle = '#64748b';
+        ctx.font = `500 ${typography.subtitleSize}px "Segoe UI", sans-serif`;
+        ctx.fillText(subtitle, centerX, centerY + radius + typography.subtitleGap);
+    }
+
+    function createImageStatusTexture(nodeModel, nodeWidth, nodeHeight) {
+        const statusState = getImageStatusState(nodeModel);
+        const isLoading = statusState.isLoading === true;
+        const scale = resolveImageStatusTextureScale(isLoading);
+        const canvas = document.createElement('canvas');
+        const minBacking = isLoading
+            ? IMAGE_STATUS_LOADING_TEXTURE_MIN_BACKING
+            : IMAGE_STATUS_TEXTURE_MIN_BACKING;
+        canvas.width = Math.max(minBacking, Math.round((nodeWidth || 300) * scale));
+        canvas.height = Math.max(minBacking, Math.round((nodeHeight || 200) * scale));
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return null;
+        }
+
+        ctx.scale(scale, scale);
+
+        const width = canvas.width / scale;
+        const height = canvas.height / scale;
+        drawImageStatusTextureFrame(ctx, width, height, statusState, 0);
+
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.colorSpace = THREE.SRGBColorSpace;
+        texture.minFilter = THREE.LinearFilter;
+        texture.magFilter = THREE.LinearFilter;
+        texture.generateMipmaps = false;
+        const maxAnisotropy = Number(window.mindMap?.renderer?.capabilities?.getMaxAnisotropy?.() || 1);
+        texture.anisotropy = Math.max(1, Math.min(4, maxAnisotropy));
+        texture.userData = texture.userData || {};
+        texture.userData.mindMapImageStatus = {
+            ctx,
+            logicalWidth: width,
+            logicalHeight: height,
+            state: statusState,
+            lastAnimationBucket: statusState.isLoading ? 0 : -1
+        };
+        texture.needsUpdate = true;
+        return texture;
+    }
+
+    function updateAnimatedImageStatusTexture(texture, now = performance.now()) {
+        const statusInfo = texture?.userData?.mindMapImageStatus;
+        if (!statusInfo || statusInfo.state?.isLoading !== true || !statusInfo.ctx) {
+            return false;
+        }
+
+        const animationBucket = Math.floor(now / IMAGE_STATUS_ANIMATION_FRAME_MS);
+        if (statusInfo.lastAnimationBucket === animationBucket) {
+            return false;
+        }
+
+        statusInfo.lastAnimationBucket = animationBucket;
+        const progress = (now % IMAGE_STATUS_SPINNER_CYCLE_MS) / IMAGE_STATUS_SPINNER_CYCLE_MS;
+        drawImageStatusTextureFrame(
+            statusInfo.ctx,
+            statusInfo.logicalWidth,
+            statusInfo.logicalHeight,
+            statusInfo.state,
+            progress * Math.PI * 2
+        );
+        texture.needsUpdate = true;
+        return true;
+    }
+
+    function updateAnimatedImageStatusTextures(module, now = performance.now(), options = {}) {
+        if (options?.allowAnimation === false) {
+            return;
+        }
+
+        if (!module?.nodeObjectsById?.forEach) {
+            return;
+        }
+
+        module.nodeObjectsById.forEach(nodeEntry => {
+            if (nodeEntry?.model?.contentType !== 'image' || nodeEntry?.glObject?.visible === false) {
+                return;
+            }
+
+            const texture = nodeEntry?.bodyMesh?.material?.map;
+            updateAnimatedImageStatusTexture(texture, now);
+        });
+    }
+
+    function swapImageBodyTexture(bodyMesh, nextTexture) {
+        const material = bodyMesh?.material;
+        if (!material || !nextTexture) {
+            return;
+        }
+
+        const previousTexture = material.map;
+        material.map = nextTexture;
+        material.color?.setHex?.(0xffffff);
+        material.needsUpdate = true;
+        const nodeId = bodyMesh?.userData?.nodeId;
+        if (nodeId) {
+            window.mindMap?.invalidateImageLodTexture?.(nodeId);
+        }
+
+        if (previousTexture && previousTexture !== nextTexture) {
+            try { previousTexture.dispose?.(); } catch { }
+        }
+    }
+
+    function clearImageBodyTexture(bodyMesh, colorHex = 0xffffff) {
+        const material = bodyMesh?.material;
+        if (!material) {
+            return;
+        }
+
+        const previousTexture = material.map;
+        material.map = null;
+        material.color?.setHex?.(colorHex);
+        material.transparent = false;
+        material.opacity = 1;
+        material.needsUpdate = true;
+
+        if (previousTexture) {
+            try { previousTexture.dispose?.(); } catch { }
+        }
+    }
+
+    function normalizeImageAssetUrl(url) {
+        if (typeof url !== 'string') {
+            return '';
+        }
+
+        const trimmed = url.trim();
+        if (!trimmed) {
+            return '';
+        }
+
+        return trimmed
+            .replace(/^http:\/\/localhost(?=:\d+\/assets\/)/i, 'http://127.0.0.1')
+            .replace(/^http:\/\/\[::1\](?=:\d+\/assets\/)/i, 'http://127.0.0.1');
+    }
+
+    function isThumbnailImageUrl(url) {
+        return normalizeImageAssetUrl(url).toLowerCase().includes('/assets/thumbs/');
+    }
+
+    function isAnimatedGifImageUrl(url) {
+        const normalized = normalizeImageAssetUrl(url);
+        if (!normalized) return false;
+        return normalized.split(/[?#]/)[0].toLowerCase().endsWith('.gif');
+    }
+
+    function getMetadataValueCaseInsensitive(metadata, ...keys) {
+        if (!metadata || typeof metadata !== 'object') return '';
+
+        for (const key of keys) {
+            const direct = metadata[key];
+            if (direct !== undefined && direct !== null && String(direct).trim()) {
+                return String(direct).trim();
+            }
+        }
+
+        const wantedKeys = new Set(keys.map(key => String(key || '').toLowerCase()));
+        for (const key of Object.keys(metadata)) {
+            if (wantedKeys.has(String(key || '').toLowerCase())) {
+                const value = metadata[key];
+                if (value !== undefined && value !== null && String(value).trim()) {
+                    return String(value).trim();
+                }
+            }
+        }
+
+        return '';
+    }
+
+    function isAnimatedGifImageNodeModel(nodeModel) {
+        if (!nodeModel || getNodeContentTypeLower(nodeModel) !== 'image') {
+            return false;
+        }
+
+        const metadata = getNodeMetadata(nodeModel) || {};
+        const mimeType = getMetadataValueCaseInsensitive(
+            metadata,
+            'fileMime',
+            'FileMime',
+            'mimeType',
+            'MimeType'
+        ).toLowerCase();
+        if (mimeType === 'image/gif') {
+            return true;
+        }
+
+        return [
+            nodeModel?.response,
+            nodeModel?.Response,
+            metadata?.OriginalPath,
+            metadata?.OriginalUrl,
+            metadata?.originalUrl,
+            metadata?.ImageUrl,
+            metadata?.imageUrl
+        ].some(isAnimatedGifImageUrl);
+    }
+
+    function getAnimatedGifOriginalReference(nodeModel, fallback = '') {
+        const metadata = getNodeMetadata(nodeModel) || {};
+        const candidates = [
+            metadata?.OriginalPath,
+            metadata?.OriginalUrl,
+            metadata?.originalUrl,
+            nodeModel?.response,
+            nodeModel?.Response,
+            fallback
+        ];
+
+        for (const value of candidates) {
+            const normalized = normalizeImageAssetUrl(value);
+            if (normalized && !isThumbnailImageUrl(normalized)) {
+                return normalized;
+            }
+        }
+
+        return '';
+    }
+
+    function getFailedImageUrlCacheKey(url) {
+        const normalized = normalizeImageAssetUrl(url);
+        if (!normalized) {
+            return '';
+        }
+
+        const withoutQuery = normalized.split(/[?#]/)[0];
+        const lower = withoutQuery.toLowerCase();
+        const thumbsMarker = '/assets/thumbs/';
+        const assetsMarker = '/assets/';
+
+        if (lower.includes(thumbsMarker)) {
+            const assetName = withoutQuery.slice(lower.lastIndexOf(thumbsMarker) + thumbsMarker.length).split('/').pop() || '';
+            const dotIndex = assetName.lastIndexOf('.');
+            const assetKey = dotIndex > 0 ? assetName.slice(0, dotIndex) : assetName;
+            return `thumbnail:${assetKey.toLowerCase()}`;
+        }
+
+        if (lower.includes(assetsMarker)) {
+            const assetName = withoutQuery.slice(lower.lastIndexOf(assetsMarker) + assetsMarker.length).split('/').pop() || '';
+            const dotIndex = assetName.lastIndexOf('.');
+            const assetKey = dotIndex > 0 ? assetName.slice(0, dotIndex) : assetName;
+            return `original:${assetKey.toLowerCase()}`;
+        }
+
+        return withoutQuery.toLowerCase();
+    }
+
+    function getFailedImageRetryDelayMs(errorStatus) {
+        return Number(errorStatus || 0) === 404 ? 60 * 1000 : 15 * 1000;
+    }
+
+    function getFailedImageUrlEntry(url) {
+        const cacheKey = getFailedImageUrlCacheKey(url);
+        if (!cacheKey) {
+            return null;
+        }
+
+        const entry = failedImageUrlCache.get(cacheKey) || null;
+        if (!entry) {
+            return null;
+        }
+
+        const now = performance.now();
+        if (Number(entry.retryAfter || 0) <= now) {
+            failedImageUrlCache.delete(cacheKey);
+            return null;
+        }
+
+        return entry;
+    }
+
+    function rememberFailedImageUrl(url, errorStatus, retryAfter = 0) {
+        const cacheKey = getFailedImageUrlCacheKey(url);
+        if (!cacheKey) {
+            return 0;
+        }
+
+        const now = performance.now();
+        const status = Number(errorStatus || 0);
+        const nextRetryAfter = Number(retryAfter || 0) > now
+            ? Number(retryAfter || 0)
+            : now + getFailedImageRetryDelayMs(status);
+
+        failedImageUrlCache.set(cacheKey, {
+            url: normalizeImageAssetUrl(url),
+            errorStatus: status,
+            retryAfter: nextRetryAfter,
+            failedAt: now
+        });
+
+        return nextRetryAfter;
+    }
+
+    function clearFailedImageUrl(url) {
+        const cacheKey = getFailedImageUrlCacheKey(url);
+        if (!cacheKey) {
+            return;
+        }
+
+        failedImageUrlCache.delete(cacheKey);
+    }
+
+    function ensureNodeMetadataObject(nodeModel) {
+        if (!nodeModel) return {};
+
+        const existing = getNodeMetadata(nodeModel);
+        if (existing && typeof existing === 'object') {
+            nodeModel.metadata = existing;
+            nodeModel.Metadata = existing;
+            return existing;
+        }
+
+        const metadata = {};
+        nodeModel.metadata = metadata;
+        nodeModel.Metadata = metadata;
+        return metadata;
+    }
+
+    function getNodeContentTypeLower(nodeModel) {
+        return String(nodeModel?.contentType ?? nodeModel?.ContentType ?? '').toLowerCase();
+    }
+
+    function isMediaNodeModel(nodeModel) {
+        const contentTypeLower = getNodeContentTypeLower(nodeModel);
+        return contentTypeLower === 'image' || contentTypeLower === 'video' || contentTypeLower === 'embed';
+    }
+
+    function isGeneratedImageNodeModel(nodeModel) {
+        if (!nodeModel || getNodeContentTypeLower(nodeModel) !== 'image') {
+            return false;
+        }
+
+        const metadata = getNodeMetadata(nodeModel) || {};
+        const provider = String(metadata.ImageGenerationProvider || metadata.imageGenerationProvider || '').trim();
+        const operation = String(metadata.RequestedMediaOperation || metadata.requestedMediaOperation || '').trim().toLowerCase();
+        return !!provider ||
+            !!(metadata.GeneratedImageSourceWidth || metadata.generatedImageSourceWidth) ||
+            operation === 'text2image' ||
+            operation === 'image2image' ||
+            operation === 'inpaint';
+    }
+
+    function isCss3dRendererEnabledForModule(module) {
+        return module?.renderDebugFlags?.enableCss3d !== false;
+    }
+
+    function syncCss3dMediaFrameForEntry(module, nodeId, entry, options = {}) {
+        if (!entry?.model || !entry?.cssObject || !isMediaNodeModel(entry.model)) {
+            return false;
+        }
+
+        if (window.MindMapCss3DManager?.syncCss3dMediaNodeFrame) {
+            return window.MindMapCss3DManager.syncCss3dMediaNodeFrame(entry.model, entry.cssObject, options) === true;
+        }
+
+        const width = Math.max(1, Math.round(Number(entry.model.width ?? entry.model.Width ?? entry.cssObject.userData?.worldWidth ?? 1)));
+        const height = Math.max(1, Math.round(Number(entry.model.height ?? entry.model.Height ?? entry.cssObject.userData?.worldHeight ?? 1)));
+        const resolutionScale = Math.max(1, Number(entry.cssObject.userData?.resolutionScale || 1));
+        const wrapper = entry.cssObject.element;
+        const inner = wrapper?.firstElementChild;
+        if (wrapper?.style) {
+            wrapper.style.width = `${width * resolutionScale}px`;
+            wrapper.style.height = `${height * resolutionScale}px`;
+            wrapper.style.minWidth = `${width * resolutionScale}px`;
+            wrapper.style.minHeight = `${height * resolutionScale}px`;
+            wrapper.style.maxWidth = `${width * resolutionScale}px`;
+            wrapper.style.maxHeight = `${height * resolutionScale}px`;
+            wrapper.style.overflow = 'hidden';
+        }
+        if (inner?.style) {
+            inner.style.width = `${width}px`;
+            inner.style.height = `${height}px`;
+            inner.style.minWidth = `${width}px`;
+            inner.style.minHeight = `${height}px`;
+            inner.style.maxWidth = `${width}px`;
+            inner.style.maxHeight = `${height}px`;
+            inner.style.transform = `scale(${resolutionScale})`;
+            inner.style.transformOrigin = '0 0';
+            inner.style.overflow = 'hidden';
+        }
+        if (module && nodeId) {
+            updateNodeSpatialGrid(module, nodeId);
+        }
+        return true;
+    }
+
+    function setNodeResponseValue(nodeModel, value) {
+        if (!nodeModel) {
+            return value == null ? '' : String(value);
+        }
+
+        const normalized = value == null ? '' : String(value);
+        nodeModel.response = normalized;
+        nodeModel.Response = normalized;
+        return normalized;
+    }
+
+    function applyCanonicalNodeResponse(nodeModel, nextContent) {
+        const contentTypeLower = getNodeContentTypeLower(nodeModel);
+        if (contentTypeLower !== 'image') {
+            return setNodeResponseValue(nodeModel, nextContent);
+        }
+
+        const metadata = ensureNodeMetadataObject(nodeModel);
+        const normalizedContent = normalizeImageAssetUrl(nextContent);
+        const thumbnailUrl = normalizeImageAssetUrl(metadata?.ThumbnailUrl || metadata?.thumbnailUrl || '');
+        const isAnimatedGif = isAnimatedGifImageNodeModel(nodeModel);
+
+        if (isAnimatedGif) {
+            const originalReference = getAnimatedGifOriginalReference(nodeModel, normalizedContent);
+            if (originalReference) {
+                setNodeImageOriginalReference(nodeModel, originalReference);
+                return setNodeResponseValue(nodeModel, originalReference);
+            }
+        }
+
+        if (normalizedContent && !isThumbnailImageUrl(normalizedContent)) {
+            setNodeImageOriginalReference(nodeModel, normalizedContent);
+        }
+
+        if (thumbnailUrl && !isAnimatedGif) {
+            setNodeImagePreviewUrl(nodeModel, thumbnailUrl);
+            return normalizeImageAssetUrl(nodeModel.response ?? nodeModel.Response ?? '');
+        }
+
+        if (normalizedContent) {
+            if (isThumbnailImageUrl(normalizedContent)) {
+                setNodeImagePreviewUrl(nodeModel, normalizedContent);
+                return normalizeImageAssetUrl(nodeModel.response ?? nodeModel.Response ?? '');
+            }
+
+            return setNodeResponseValue(nodeModel, normalizedContent);
+        }
+
+        return setNodeResponseValue(nodeModel, '');
+    }
+
+    function setNodeImageOriginalUrl(nodeModel, url) {
+        setNodeImageOriginalReference(nodeModel, url);
+    }
+
+    function setNodeImagePreviewUrl(nodeModel, url) {
+        const normalized = normalizeImageAssetUrl(url);
+        if (!normalized || !nodeModel) return;
+
+        setNodeResponseValue(nodeModel, normalized);
+
+        const metadata = ensureNodeMetadataObject(nodeModel);
+        if (isThumbnailImageUrl(normalized)) {
+            metadata.ThumbnailUrl = normalized;
+            metadata.thumbnailUrl = normalized;
+        }
+    }
+
+    function ensureNodeImageUsesPreviewResponse(nodeModel) {
+        if (!nodeModel) return false;
+        const previousResponse = normalizeImageAssetUrl(nodeModel.response ?? nodeModel.Response ?? '');
+        const nextResponse = applyCanonicalNodeResponse(nodeModel, previousResponse);
+        return previousResponse !== nextResponse;
+    }
+
+    function isDirectImageUrl(url) {
+        const normalized = normalizeImageAssetUrl(url).toLowerCase();
+        return normalized.startsWith('http://')
+            || normalized.startsWith('https://')
+            || normalized.startsWith('blob:')
+            || normalized.startsWith('data:')
+            || normalized.startsWith('file:');
+    }
+
+    function setNodeImageOriginalReference(nodeModel, url) {
+        const normalized = normalizeImageAssetUrl(url);
+        if (!normalized || !nodeModel) return;
+
+        const metadata = ensureNodeMetadataObject(nodeModel);
+        if (isDirectImageUrl(normalized)) {
+            metadata.OriginalUrl = normalized;
+            metadata.originalUrl = normalized;
+        } else {
+            metadata.OriginalPath = normalized;
+        }
+    }
+
+    function canUseAsFullResImageUrl(url) {
+        const normalized = normalizeImageAssetUrl(url);
+        return !!normalized && !isThumbnailImageUrl(normalized);
+    }
+
+    function markNodeImageAssetMissing(nodeModel, missingUrl) {
+        if (!nodeModel) return;
+
+        const metadata = ensureNodeMetadataObject(nodeModel);
+        const normalizedMissingUrl = normalizeImageAssetUrl(missingUrl);
+        const responseUrl = normalizeImageAssetUrl(nodeModel.response ?? nodeModel.Response ?? '');
+        const originalPath = normalizeImageAssetUrl(metadata.OriginalPath || '');
+        const originalUrl = normalizeImageAssetUrl(metadata.OriginalUrl || metadata.originalUrl || '');
+        const recoverableFullResUrl = canUseAsFullResImageUrl(originalPath)
+            ? originalPath
+            : (canUseAsFullResImageUrl(originalUrl)
+                ? originalUrl
+                : (canUseAsFullResImageUrl(responseUrl) ? responseUrl : ''));
+
+        if (isThumbnailImageUrl(normalizedMissingUrl)) {
+            delete metadata.ThumbnailUrl;
+            delete metadata.thumbnailUrl;
+        }
+
+        if (normalizedMissingUrl) {
+            metadata.MissingAssetUrl = normalizedMissingUrl;
+        }
+
+        if (recoverableFullResUrl) {
+            if (!responseUrl || isThumbnailImageUrl(responseUrl)) {
+                nodeModel.response = recoverableFullResUrl;
+                nodeModel.Response = recoverableFullResUrl;
+            }
+
+            setNodeImageOriginalReference(nodeModel, recoverableFullResUrl);
+            delete metadata.ImageGenerationError;
+            return;
+        }
+
+        if (normalizedMissingUrl) {
+            delete metadata.ImageGenerationError;
+            return;
+        }
+
+        metadata.ImageGenerationError = 'Image failed';
+    }
+
+    function getNodeImageAssetUrls(nodeModel) {
+        const metadata = getNodeMetadata(nodeModel) || {};
+        const contentTypeLower = getNodeContentTypeLower(nodeModel);
+        const isImageContent = contentTypeLower === 'image';
+        const responseUrl = normalizeImageAssetUrl(nodeModel?.response ?? nodeModel?.Response ?? '');
+        const originalPath = normalizeImageAssetUrl(metadata?.OriginalPath || '');
+        const thumbnailUrl = normalizeImageAssetUrl(metadata?.ThumbnailUrl || metadata?.thumbnailUrl || '');
+        const originalUrl = normalizeImageAssetUrl(metadata?.OriginalUrl || metadata?.originalUrl || '');
+        const snapshotUrl = normalizeImageAssetUrl(metadata?.SnapshotUrl || metadata?.snapshotUrl || '');
+        const previewImageUrl = normalizeImageAssetUrl(
+            metadata?.PreviewUrl ||
+            metadata?.previewUrl ||
+            metadata?.ImageUrl ||
+            metadata?.imageUrl ||
+            ''
+        );
+        const missingAssetUrl = normalizeImageAssetUrl(metadata?.MissingAssetUrl || '');
+        const isGeneratedImageNode = isGeneratedImageNodeModel(nodeModel);
+        const isAnimatedGif = isAnimatedGifImageNodeModel(nodeModel);
+        const responseFullResUrl = isImageContent && canUseAsFullResImageUrl(responseUrl) ? responseUrl : '';
+        const missingFullResUrl = canUseAsFullResImageUrl(missingAssetUrl) ? missingAssetUrl : '';
+        const mediaPreviewUrl = isAnimatedGif ? '' : (thumbnailUrl || snapshotUrl || previewImageUrl);
+        const responsePreviewUrl = isImageContent && !isAnimatedGif ? responseUrl : '';
+        const fullResUrl = isImageContent
+            ? (isGeneratedImageNode
+                ? (originalUrl || responseFullResUrl || originalPath || missingFullResUrl)
+                : (originalUrl || originalPath || responseFullResUrl || missingFullResUrl))
+            : (originalUrl || originalPath || snapshotUrl || previewImageUrl || thumbnailUrl || missingFullResUrl);
+        const previewUrl = isAnimatedGif
+            ? (fullResUrl || responseUrl || originalPath || originalUrl || missingAssetUrl)
+            : (mediaPreviewUrl || responsePreviewUrl || originalPath || originalUrl || missingAssetUrl);
+
+        return {
+            responseUrl,
+            originalPath,
+            thumbnailUrl,
+            originalUrl,
+            snapshotUrl,
+            previewImageUrl,
+            missingAssetUrl,
+            previewUrl,
+            fullResUrl,
+            animatedGif: isAnimatedGif
+        };
+    }
+
+    function hasNodeImagePreviewSource(assetUrls) {
+        if (!assetUrls || typeof assetUrls !== 'object') return false;
+        if (assetUrls.animatedGif === true) return false;
+        return !!(
+            assetUrls.thumbnailUrl ||
+            (assetUrls.responseUrl && isThumbnailImageUrl(assetUrls.responseUrl))
+        );
+    }
+
+    function prewarmImageNodePreviewCache(nodeModel, module) {
+        if (!nodeModel || getNodeContentTypeLower(nodeModel) !== 'image') {
+            return;
+        }
+
+        const textureFactory = window.MindMapTextureFactory;
+        const activeImageCache = window.MindMapNodes?.imageCache || imageCache;
+        if (!textureFactory?.ensureImageCached || !activeImageCache) {
+            return;
+        }
+
+        const nodeId = String(nodeModel.id ?? nodeModel.Id ?? '').trim();
+        if (!nodeId) {
+            return;
+        }
+
+        const assetUrls = getNodeImageAssetUrls(nodeModel);
+        if (!assetUrls.previewUrl) {
+            return;
+        }
+        if (assetUrls.animatedGif === true) {
+            return;
+        }
+
+        const warmKey = `${assetUrls.previewUrl}||${assetUrls.fullResUrl || assetUrls.originalUrl || ''}`;
+        if (nodeModel._previewWarmKey === warmKey) {
+            return;
+        }
+
+        nodeModel._previewWarmKey = warmKey;
+        if (module) {
+            module._boardLoadImagePreviewWarmQueued = Number(module._boardLoadImagePreviewWarmQueued || 0) + 1;
+        }
+
+        Promise.resolve(
+            textureFactory.ensureImageCached(nodeId, assetUrls.previewUrl, activeImageCache, {
+                authToken: module?.authToken || window.mindMap?.authToken || '',
+                resizeWidth: 256,
+                preferOriginal: false,
+                allowOriginalFallback: false,
+                allowOriginalReuseForPreview: false,
+                originalUrl: assetUrls.fullResUrl || assetUrls.originalUrl || '',
+                onMissingAsset: (missingUrl) => {
+                    const normalized = normalizeImageAssetUrl(missingUrl);
+                    if (!normalized) return;
+                    markNodeImageAssetMissing(nodeModel, normalized);
+                    try { window.dotNetHelper?.invokeMethodAsync('ReportMissingNodeAsset', nodeId, normalized); } catch { }
+                },
+                onRefreshedUrl: (refreshedUrl) => {
+                    const normalized = normalizeImageAssetUrl(refreshedUrl);
+                    if (!normalized) return;
+
+                    setNodeImageOriginalUrl(nodeModel, normalized);
+                    if (!hasNodeImagePreviewSource(assetUrls)) {
+                        setNodeImagePreviewUrl(nodeModel, normalized);
+                    }
+                }
+            })
+        ).then((cachedImage) => {
+            if (!module) {
+                return;
+            }
+
+            if (cachedImage?.image && cachedImage?.isError !== true) {
+                module._boardLoadImagePreviewWarmReady = Number(module._boardLoadImagePreviewWarmReady || 0) + 1;
+                return;
+            }
+
+            module._boardLoadImagePreviewWarmFailed = Number(module._boardLoadImagePreviewWarmFailed || 0) + 1;
+        }).catch(() => {
+            if (!module) {
+                return;
+            }
+
+            module._boardLoadImagePreviewWarmFailed = Number(module._boardLoadImagePreviewWarmFailed || 0) + 1;
+        });
+    }
+
+    function getImageTextureResizeWidth(nodeWidth, nodeHeight, preferOriginal, explicitResizeWidth) {
+        const parsedExplicit = Number(explicitResizeWidth);
+        if (Number.isFinite(parsedExplicit) && parsedExplicit > 0) {
+            return Math.max(1, Math.round(parsedExplicit));
+        }
+
+        const maxDimension = Math.max(1, Number(nodeWidth || 0), Number(nodeHeight || 0));
+        const dpr = Math.min(2.5, Math.max(1, window.devicePixelRatio || 1));
+        if (preferOriginal) {
+            return Math.min(3072, Math.max(1024, Math.round(maxDimension * dpr * 2)));
+        }
+
+        return Math.min(768, Math.max(512, Math.round(maxDimension * Math.min(1.5, dpr))));
+    }
+
+    function createImageBodyTextureFromCache(cachedImage) {
+        const image = cachedImage?.image || cachedImage;
+        if (!image) return null;
+
+        const texture = new THREE.Texture(image);
+        texture.userData ??= {};
+        const requiresManualVFlip = cachedImage?.type === 'bitmap';
+        texture.userData.mindMapManualVFlip = requiresManualVFlip;
+        if (requiresManualVFlip) {
+            // ImageBitmap uploads do not honor Texture.flipY consistently, so
+            // NEAR/NORMAL body meshes compensate in UV space instead.
+            texture.flipY = false;
+        }
+        texture.colorSpace = THREE.SRGBColorSpace;
+        texture.wrapS = THREE.ClampToEdgeWrapping;
+        texture.wrapT = THREE.ClampToEdgeWrapping;
+        texture.minFilter = THREE.LinearMipmapLinearFilter;
+        texture.magFilter = THREE.LinearFilter;
+        texture.generateMipmaps = true;
+        texture.needsUpdate = true;
+        return texture;
+    }
+
+    function syncImageNodeBodyTexture(bodyMesh, nodeModel, options = {}) {
+        if (!bodyMesh || !nodeModel) {
+            return;
+        }
+
+        const material = bodyMesh.material;
+        if (!material) {
+            return;
+        }
+
+        const isGeneratedImageNode = isGeneratedImageNodeModel(nodeModel);
+        if (options.preferOriginal !== true && !isGeneratedImageNode) {
+            ensureNodeImageUsesPreviewResponse(nodeModel);
+        }
+
+        const width = Number(bodyMesh.geometry?.parameters?.width || nodeModel.width || 300);
+        const height = Number(bodyMesh.geometry?.parameters?.height || nodeModel.height || 200);
+        const preferOriginal = options.preferOriginal === true || isGeneratedImageNode;
+        const assetUrls = getNodeImageAssetUrls(nodeModel);
+        bodyMesh.userData ??= {};
+        const now = performance.now();
+        const pendingImageRenderKey = String(bodyMesh.userData.pendingImageRenderKey || '');
+        const resolvedImageRenderKey = String(bodyMesh.userData.resolvedImageRenderKey || '');
+        const fullImageRetryAfter = Number(bodyMesh.userData.fullImageRetryAfter || 0);
+        const failedImageRenderKey = String(bodyMesh.userData.failedImageRenderKey || '');
+        const failedImageRetryAfter = Number(bodyMesh.userData.failedImageRetryAfter || 0);
+        const hasDistinctFullResUrl =
+            !!assetUrls.fullResUrl &&
+            assetUrls.fullResUrl !== assetUrls.previewUrl;
+        const shouldHoldPreview =
+            preferOriginal &&
+            hasDistinctFullResUrl &&
+            (
+                fullImageRetryAfter > now ||
+                pendingImageRenderKey.startsWith('image:preview:') ||
+                (!resolvedImageRenderKey.startsWith('image:preview:') &&
+                    !resolvedImageRenderKey.startsWith('image:full:'))
+            );
+        const useOriginalForThisPass = preferOriginal && !shouldHoldPreview;
+        const imageUrl = useOriginalForThisPass
+            ? (assetUrls.fullResUrl || assetUrls.previewUrl)
+            : assetUrls.previewUrl;
+        const resizeWidth = getImageTextureResizeWidth(width, height, useOriginalForThisPass, options.resizeWidth);
+        const isLoading = !!(nodeModel.isLoading ?? nodeModel.IsLoading ?? false);
+        const metadata = getNodeMetadata(nodeModel) || {};
+        const nodeId = String(nodeModel.id ?? nodeModel.Id ?? '').trim();
+        const imageError = String(metadata?.ImageGenerationError || '').trim();
+        const renderKey = imageUrl
+            ? `image:${useOriginalForThisPass ? 'full' : 'preview'}:${resizeWidth}:${imageUrl}`
+            : `placeholder:${isLoading ? 'loading' : (imageError ? 'error' : 'empty')}:${Math.round(width)}x${Math.round(height)}`;
+        if (failedImageRenderKey === renderKey && failedImageRetryAfter > now) {
+            if (imageUrl) {
+                applyImageCoverUv(bodyMesh, width, height);
+            }
+            return;
+        }
+        if (bodyMesh.userData.imageRenderKey === renderKey) {
+            if (imageUrl) {
+                applyImageCoverUv(bodyMesh, width, height);
+            }
+            return;
+        }
+
+        bodyMesh.userData.imageRenderKey = renderKey;
+
+        const preserveResolvedPreviewTexture = (retryAfter = 0) => {
+            bodyMesh.userData.pendingImageUrl = '';
+            bodyMesh.userData.pendingImageRenderKey = '';
+            bodyMesh.userData.imageRenderKey = resolvedImageRenderKey;
+            bodyMesh.userData.failedImageRenderKey = renderKey;
+            const retryAt = Number(retryAfter || 0);
+            bodyMesh.userData.failedImageRetryAfter = retryAt > performance.now()
+                ? retryAt
+                : performance.now() + 1500;
+            bodyMesh.userData.fullImageRetryAfter = bodyMesh.userData.failedImageRetryAfter;
+        };
+
+        const applyImageFallbackTexture = (retryAfter = 0) => {
+            bodyMesh.userData.pendingImageUrl = '';
+            bodyMesh.userData.pendingImageRenderKey = '';
+            bodyMesh.userData.resolvedImageRenderKey = '';
+            bodyMesh.userData.failedImageRenderKey = renderKey;
+            const retryAt = Number(retryAfter || 0);
+            bodyMesh.userData.failedImageRetryAfter = retryAt > performance.now()
+                ? retryAt
+                : performance.now() + 1500;
+            bodyMesh.userData.fullImageRetryAfter = bodyMesh.userData.failedImageRetryAfter;
+            const fallbackTexture = createImageStatusTexture(
+                {
+                    ...nodeModel,
+                    isLoading: false,
+                    metadata: {
+                        ...(nodeModel.metadata ?? nodeModel.Metadata ?? {}),
+                        ImageGenerationError: imageError || 'Image failed'
+                    }
+                },
+                width,
+                height);
+
+            if (fallbackTexture) {
+                swapImageBodyTexture(bodyMesh, fallbackTexture);
+            }
+        };
+
+        if (!imageUrl) {
+            bodyMesh.userData.pendingImageUrl = '';
+            bodyMesh.userData.pendingImageRenderKey = '';
+            bodyMesh.userData.resolvedImageRenderKey = '';
+            bodyMesh.userData.fullImageRetryAfter = 0;
+            bodyMesh.userData.failedImageRenderKey = '';
+            bodyMesh.userData.failedImageRetryAfter = 0;
+            clearImageBodyTexture(bodyMesh, 0xf8fafc);
+            return;
+        }
+
+        const textureFactory = window.MindMapTextureFactory;
+        if (!textureFactory?.ensureImageCached) {
+            applyImageFallbackTexture();
+            return;
+        }
+
+        const stickyFailedImage = getFailedImageUrlEntry(imageUrl);
+        if (stickyFailedImage) {
+            if (useOriginalForThisPass && resolvedImageRenderKey.startsWith('image:preview:')) {
+                preserveResolvedPreviewTexture(stickyFailedImage.retryAfter);
+                applyImageCoverUv(bodyMesh, width, height);
+                return;
+            }
+
+            applyImageFallbackTexture(stickyFailedImage.retryAfter);
+            return;
+        }
+
+        const activeImageCache = window.MindMapNodes?.imageCache || imageCache;
+
+        bodyMesh.userData.pendingImageUrl = imageUrl;
+        bodyMesh.userData.pendingImageRenderKey = renderKey;
+
+        textureFactory.ensureImageCached(nodeId, imageUrl, activeImageCache, {
+            authToken: options.authToken || window.mindMap?.authToken || '',
+            resizeWidth,
+            preferOriginal: useOriginalForThisPass,
+            allowOriginalFallback: useOriginalForThisPass,
+            allowOriginalReuseForPreview: useOriginalForThisPass,
+            originalUrl: assetUrls.fullResUrl || assetUrls.originalUrl || '',
+            onMissingAsset: (missingUrl) => {
+                const normalized = normalizeImageAssetUrl(missingUrl);
+                if (!normalized) return;
+                markNodeImageAssetMissing(nodeModel, normalized);
+                try { window.dotNetHelper?.invokeMethodAsync('ReportMissingNodeAsset', nodeId, normalized); } catch { }
+            },
+            onRefreshedUrl: (refreshedUrl) => {
+                const normalized = normalizeImageAssetUrl(refreshedUrl);
+                if (!normalized) return;
+
+                setNodeImageOriginalUrl(nodeModel, normalized);
+                if (!hasNodeImagePreviewSource(assetUrls)) {
+                    setNodeImagePreviewUrl(nodeModel, normalized);
+                }
+            }
+        })
+            .then((cachedImage) => {
+                if (bodyMesh.userData?.pendingImageRenderKey !== renderKey) {
+                    return;
+                }
+
+                if (!cachedImage || cachedImage.isError === true || !cachedImage.image) {
+                    const retryAfter = rememberFailedImageUrl(
+                        cachedImage?.url || imageUrl,
+                        cachedImage?.errorStatus || 0,
+                        cachedImage?.retryAfter || 0
+                    );
+                    if (useOriginalForThisPass && resolvedImageRenderKey.startsWith('image:preview:')) {
+                        preserveResolvedPreviewTexture(retryAfter);
+                        return;
+                    }
+                    applyImageFallbackTexture(retryAfter);
+                    return;
+                }
+
+                const nextTexture = createImageBodyTextureFromCache(cachedImage);
+                if (!nextTexture) {
+                    const retryAfter = rememberFailedImageUrl(
+                        cachedImage?.url || imageUrl,
+                        cachedImage?.errorStatus || 0,
+                        cachedImage?.retryAfter || 0
+                    );
+                    if (useOriginalForThisPass && resolvedImageRenderKey.startsWith('image:preview:')) {
+                        preserveResolvedPreviewTexture(retryAfter);
+                        return;
+                    }
+                    applyImageFallbackTexture(retryAfter);
+                    return;
+                }
+
+                bodyMesh.userData.assetRefreshAttemptedFor = '';
+                bodyMesh.userData.pendingImageUrl = '';
+                bodyMesh.userData.pendingImageRenderKey = '';
+                bodyMesh.userData.resolvedImageRenderKey = renderKey;
+                bodyMesh.userData.fullImageRetryAfter = 0;
+                bodyMesh.userData.failedImageRenderKey = '';
+                bodyMesh.userData.failedImageRetryAfter = 0;
+                clearFailedImageUrl(cachedImage.url || imageUrl);
+                swapImageBodyTexture(bodyMesh, nextTexture);
+                applyImageCoverUv(bodyMesh, width, height);
+            })
+            .catch(() => {
+                if (bodyMesh.userData?.pendingImageRenderKey !== renderKey) {
+                    return;
+                }
+                bodyMesh.userData.pendingImageUrl = '';
+                bodyMesh.userData.pendingImageRenderKey = '';
+
+                if (useOriginalForThisPass && resolvedImageRenderKey.startsWith('image:preview:')) {
+                    preserveResolvedPreviewTexture(rememberFailedImageUrl(imageUrl, 0));
+                    return;
+                }
+
+                applyImageFallbackTexture(rememberFailedImageUrl(imageUrl, 0));
+            });
+    }
+
+    async function addNode(module, nodeModel) {
+        if (!nodeModel) return;
+
+        // Normalize model shape from both JS (camelCase) and C# interop (PascalCase).
+        const normalizedContentType = nodeModel.contentType ?? nodeModel.ContentType ?? 'text';
+        const fallbackWidth = normalizedContentType === 'video'
+            ? 470
+            : (normalizedContentType === 'image' ? 300 : (module.aiNodeDefaultWidth || 400));
+        const fallbackHeight = normalizedContentType === 'video'
+            ? 264
+            : (normalizedContentType === 'image'
+                ? 300
+                : (normalizedContentType === 'pdf' ? 56 : (module.aiNodeDefaultHeight || 200)));
+
+        const parsedWidth = Number(nodeModel.width ?? nodeModel.Width ?? fallbackWidth);
+        const parsedHeight = Number(nodeModel.height ?? nodeModel.Height ?? fallbackHeight);
+
+        nodeModel = {
+            ...nodeModel,
+            id: String(nodeModel.id ?? nodeModel.Id ?? ''),
+            contentType: normalizedContentType,
+            prompt: nodeModel.prompt ?? nodeModel.Prompt ?? '',
+            response: nodeModel.response ?? nodeModel.Response ?? '',
+            positionX: Number(nodeModel.positionX ?? nodeModel.PositionX ?? 0),
+            positionY: Number(nodeModel.positionY ?? nodeModel.PositionY ?? 0),
+            positionZ: Number(nodeModel.positionZ ?? nodeModel.PositionZ ?? 0),
+            isLoading: !!(nodeModel.isLoading ?? nodeModel.IsLoading ?? false),
+            width: (Number.isFinite(parsedWidth) && parsedWidth > 0) ? parsedWidth : fallbackWidth,
+            height: (Number.isFinite(parsedHeight) && parsedHeight > 0) ? parsedHeight : fallbackHeight,
+            isChunkedText: !!(nodeModel.isChunkedText ?? nodeModel.IsChunkedText ?? false),
+            totalLineCount: Number(nodeModel.totalLineCount ?? nodeModel.TotalLineCount ?? 0),
+            sourceFilePath: nodeModel.sourceFilePath ?? nodeModel.SourceFilePath ?? null,
+            scrollOffset: Number(nodeModel.scrollOffset ?? nodeModel.ScrollOffset ?? 0),
+            maxScroll: Number(nodeModel.maxScroll ?? nodeModel.MaxScroll ?? 0),
+            isExpanded: !!(nodeModel.isExpanded ?? nodeModel.IsExpanded ?? false),
+            originalHeight: Number(nodeModel.originalHeight ?? nodeModel.OriginalHeight ?? 0),
+            metadata: nodeModel.metadata ?? nodeModel.Metadata ?? {}
+        };
+
+        if (normalizedContentType === 'image') {
+            ensureNodeImageUsesPreviewResponse(nodeModel);
+        }
+
+        if (!nodeModel.id) {
+            console.warn('[MindMapNodes] addNode skipped: missing node id');
+            return;
+        }
+
+        const nodeStartTime = performance.now();
+        const timings = {}; // 세부 시간 측정용
+        log(`[addNode] ENTER - Node ID: ${nodeModel.id}, Type: ${nodeModel.contentType}`);
+
+        // ▼▼▼ [Fix] Capture active board ID to detect stale async work after tab switch ▼▼▼
+        const startBoardId = window.mindMap?.activeBoardId || null;
+        const _isBoardStale = () => {
+            const current = window.mindMap?.activeBoardId;
+            return current != null && startBoardId != null && current !== startBoardId;
+        };
+        // ▲▲▲ [Fix] ▲▲▲
+
+        // ▼▼▼ [New] Ensure scrollbar styles are injected ▼▼▼
+        injectScrollbarStyles();
+        // ▲▲▲ [New] ▲▲▲
+
+        // ★ [Add] Safeguard: abort if factory is not loaded yet (avoid crash)
+        // ★ [Add] Safeguard: abort if factory is not loaded yet (avoid crash)
+        // ★ [수정] 텍스처가 필요 없는 CSS3D 타입(text, note, code, markdown)은 팩토리가 없어도 통과시킵니다.
+        const isCss3dType = nodeModel.contentType === 'text' || nodeModel.contentType === 'note' || nodeModel.contentType === 'memo' || nodeModel.contentType === 'code' || nodeModel.contentType === 'markdown' || nodeModel.contentType === 'embed';
+
+        if (!isCss3dType && typeof window.MindMapTextureFactory === 'undefined') {
+            console.error(`[MindMapNodes] Critical: MindMapTextureFactory is missing! Cannot add node ${nodeModel.id}. Retrying in 100ms...`);
+            // Retry after 100ms (addresses a load race condition)
+            setTimeout(() => {
+                if (_isBoardStale()) { log(`[addNode] Board switched, aborting retry for ${nodeModel.id}`); return; }
+                addNode(module, nodeModel);
+            }, 100);
+            return;
+        }
+
+        if (module.nodeObjectsById.has(nodeModel.id)) {
+            log(`[MindMapNodes] Node already exists: ${nodeModel.id}. Skipping (expected during board reload).`);
+            const existingEntry = module.nodeObjectsById.get(nodeModel.id);
+            if (existingEntry) {
+                if (nodeModel.contentType === 'image') {
+                    const imageAssetUrls = getNodeImageAssetUrls(nodeModel);
+                    if (imageAssetUrls.previewUrl) {
+                        await window.MindMapTextureFactory.ensureImageCached(nodeModel.id, imageAssetUrls.previewUrl, imageCache, {
+                            authToken: module.authToken,
+                            allowOriginalFallback: false,
+                            allowOriginalReuseForPreview: false,
+                            originalUrl: imageAssetUrls.fullResUrl || imageAssetUrls.originalUrl || '',
+                            onRefreshedUrl: (refreshedUrl) => {
+                                setNodeImageOriginalUrl(nodeModel, refreshedUrl);
+                                if (!hasNodeImagePreviewSource(imageAssetUrls)) {
+                                    setNodeImagePreviewUrl(nodeModel, refreshedUrl);
+                                }
+                                if (existingEntry.model) {
+                                    setNodeImageOriginalUrl(existingEntry.model, refreshedUrl);
+                                    const existingAssetUrls = getNodeImageAssetUrls(existingEntry.model);
+                                    if (!hasNodeImagePreviewSource(existingAssetUrls)) {
+                                        setNodeImagePreviewUrl(existingEntry.model, refreshedUrl);
+                                    }
+                                }
+                            }
+                        });
+                    }
+                }
+                if (existingEntry.glObject) {
+                    // [Fix] Force Z=0 to eliminate parallax
+                    existingEntry.glObject.position.set(nodeModel.positionX, nodeModel.positionY, 0);
+                }
+                if (existingEntry.cssObject) {
+                    // [Fix] Force Z=0 to eliminate parallax
+                    const cssParentScene = module.cssScene || module.scene;
+                    if (cssParentScene && existingEntry.cssObject.parent !== cssParentScene) {
+                        cssParentScene.add(existingEntry.cssObject);
+                        window.MindMapCss3DManager?.markCssParentRepairNeeded?.(module, nodeModel.id);
+                    }
+                    existingEntry.cssObject.position.set(nodeModel.positionX, nodeModel.positionY, 0);
+                    existingEntry.cssObject.updateMatrixWorld(true);
+                    window.MindMapCss3DManager?.markNodeTransformDirty?.(module, nodeModel.id);
+                }
+            }
+            return;
+        }
+
+        timings.t1_init = performance.now();
+        log(`[addNode] Step 1: Preparing position for ${nodeModel.id}`);
+        let autoPositioned = false;
+        const isNewNode = nodeModel.metadata && nodeModel.metadata['IsNew'] === 'true';
+
+        if (isNewNode && (nodeModel.contentType === 'note' || nodeModel.contentType === 'text' || nodeModel.contentType === 'memo' || nodeModel.contentType === 'image' || nodeModel.contentType === 'video' || nodeModel.contentType === 'embed') && nodeModel.positionX === 0 && nodeModel.positionY === 0) {
+            if (module.cursorPosition) {
+                nodeModel.positionX = module.cursorPosition.x;
+                nodeModel.positionY = module.cursorPosition.y;
+                autoPositioned = true;
+            } else {
+                const targetPos = new THREE.Vector3(0, 0, 0);
+                module.raycaster.setFromCamera({ x: 0, y: 0.4 }, module.camera);
+                module.raycaster.ray.intersectPlane(module.plane, targetPos);
+                nodeModel.positionX = module.snapToGrid(targetPos.x - (nodeModel.width || 400) / 2);
+                nodeModel.positionY = module.snapToGridY(targetPos.y + (nodeModel.height || 200) / 2);
+                autoPositioned = true;
+            }
+        }
+
+        const nodeZ = 0;
+
+        const MAX_SIZE = 4096; // hard limit
+
+        let width = (nodeModel.width ?? nodeModel.Width) || (nodeModel.contentType === 'embed' ? 460 : (nodeModel.contentType === 'video' ? 470 : (nodeModel.contentType === 'image' ? 300 : (module.aiNodeDefaultWidth || 400))));
+        let height = (nodeModel.height ?? nodeModel.Height) || (nodeModel.contentType === 'embed' ? 260 : (nodeModel.contentType === 'video' ? 264 : (nodeModel.contentType === 'image' ? 300 : (nodeModel.contentType === 'pdf' ? 56 : (module.aiNodeDefaultHeight || 200)))));
+
+        // ▼▼▼ [Fix] Initial size cap ▼▼▼
+        width = Math.min(width, MAX_SIZE);
+        height = Math.min(height, MAX_SIZE);
+        nodeModel.width = width;
+        nodeModel.Width = width;
+        nodeModel.height = height;
+        nodeModel.Height = height;
+        // ▲▲▲ [Fix] ▲▲▲
+
+        const zoomLevel = 2;
+
+        log(`[addNode] Step 2: Measuring height for ${nodeModel.id} (type: ${nodeModel.contentType})`);
+        const isTextLikeNode = nodeModel.contentType === 'text' || nodeModel.contentType === 'note';
+        const hasResponseText = !!(`${nodeModel.response ?? nodeModel.Response ?? ''}`.trim());
+        const isLoadingWithoutContent = !!nodeModel.isLoading && !hasResponseText;
+
+        // Keep newly-created AI nodes at configured default height while loading.
+        // This prevents one-line collapse before the first streamed tokens arrive.
+        if (isTextLikeNode && isLoadingWithoutContent) {
+            const minLoadingHeight = module.aiNodeDefaultHeight || 200;
+            height = Math.max(height, minLoadingHeight);
+            nodeModel.height = height;
+            nodeModel.maxScroll = 0;
+            nodeModel.scrollOffset = 0;
+        } else if (isTextLikeNode) {
+            try {
+                // ▼▼▼ [Refactor] Chunk-loading node handling - fetch content directly from C# (no cache) ▼▼▼
+                if (nodeModel.isChunkedText && nodeModel.totalLineCount > 0) {
+                    // For chunk-loading nodes, compute virtual scroll height from totalLineCount
+                    const LINE_HEIGHT = 21; // 14px font * 1.5 line-height
+                    const totalContentHeight = nodeModel.totalLineCount * LINE_HEIGHT;
+                    nodeModel.totalContentHeight = totalContentHeight;
+
+                    // Compute virtual scroll height
+                    nodeModel.maxScroll = Math.max(0, totalContentHeight - height);
+                    nodeModel.scrollOffset = Math.min(nodeModel.scrollOffset || 0, nodeModel.maxScroll);
+
+                    // Fetch content from C# for the current scroll position
+                    if (module.dotNetHelper) {
+                        // ▼▼▼ [Fix] Fast initial retries; self-heal in the background ▼▼▼
+                        const MAX_RETRIES = 2; // 5 → 2 (background retries also run)
+                        const RETRY_DELAY = 200; // 500 → 200ms
+
+                        // ▼▼▼ [Fix] If it fails at the saved scroll position, retry at scrollOffset=0 ▼▼▼
+                        const savedScrollOffset = nodeModel.scrollOffset || 0;
+                        let loadAttemptScrollOffsets = [savedScrollOffset];
+
+                        // If the saved scroll position is not 0, also try 0
+                        if (savedScrollOffset > 0) {
+                            loadAttemptScrollOffsets.push(0);
+                        }
+
+                        for (const tryScrollOffset of loadAttemptScrollOffsets) {
+                            for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
+                                try {
+                                    log(`[addNode] Chunked node ${nodeModel.id}: fetching content for scroll position ${tryScrollOffset}px (attempt ${attempt}/${MAX_RETRIES})...`);
+                                    const result = await module.dotNetHelper.invokeMethodAsync(
+                                        'GetTextByScrollPosition',
+                                        nodeModel.id,
+                                        tryScrollOffset,
+                                        height,
+                                        LINE_HEIGHT
+                                    );
+
+                                    if (result && result.content) {
+                                        nodeModel.response = result.content;
+                                        nodeModel._visibleContent = result.content;
+                                        nodeModel._visibleScrollOffset = result.relativeScrollOffset;
+
+                                        // If loaded at 0, also set scroll position to 0
+                                        if (tryScrollOffset === 0 && savedScrollOffset > 0) {
+                                            nodeModel.scrollOffset = 0;
+                                            log(`[addNode] Content loaded from scroll=0 (saved=${savedScrollOffset}px). Will scroll later after file is registered.`);
+                                        }
+
+                                        log(`[addNode] Content loaded for ${nodeModel.id}: ${result.content.length} chars, startLine=${result.startLine}`);
+                                        break;
+                                    } else {
+                                        if (attempt < MAX_RETRIES) {
+                                            log(`[addNode] Result is null, retrying in ${RETRY_DELAY}ms...`);
+                                            await new Promise(r => setTimeout(r, RETRY_DELAY));
+                                        }
+                                    }
+                                } catch (err) {
+                                    console.warn(`[addNode] Failed to load content for ${nodeModel.id} (attempt ${attempt}):`, err);
+                                    if (attempt < MAX_RETRIES) {
+                                        await new Promise(r => setTimeout(r, RETRY_DELAY));
+                                    }
+                                }
+                            }
+
+                            // If content was loaded, exit loops
+                            if (nodeModel._visibleContent) break;
+
+                            // Log before trying the next scroll offset
+                            if (tryScrollOffset !== 0) {
+                                log(`[addNode] Failed at scroll=${tryScrollOffset}px, trying scroll=0...`);
+                            }
+                        }
+                        // ▲▲▲ [Fix] ▲▲▲
+                    }
+
+                    // If initial load fails, show a fallback message
+                    if (!nodeModel._visibleContent) {
+                        nodeModel._visibleContent = `Loading... (${nodeModel.totalLineCount} lines)`;
+                        nodeModel.response = nodeModel._visibleContent;
+                        log(`[addNode] ⚠️ Using fallback message for ${nodeModel.id}: "${nodeModel._visibleContent}"`);
+
+                        // ▼▼▼ [New] Periodic retry logic - the node retries content loading by itself ▼▼▼
+                        const RETRY_INTERVAL = 2000; // retry every 2 seconds
+                        const MAX_BACKGROUND_RETRIES = 30; // max 30 attempts (~1 minute)
+                        let backgroundRetryCount = 0;
+                        const savedScrollOffset = nodeModel.scrollOffset || 0; // preserve saved scroll position
+
+                        const retryLoadContent = async () => {
+                            // ▼▼▼ [Fix] Abort if board switched since addNode started ▼▼▼
+                            if (_isBoardStale()) {
+                                log(`[addNode] Board switched, aborting background retry for ${nodeModel.id}`);
+                                return;
+                            }
+                            // ▲▲▲ [Fix] ▲▲▲
+                            backgroundRetryCount++;
+                            log(`[addNode] 🔄 Background retry ${backgroundRetryCount}/${MAX_BACKGROUND_RETRIES} for ${nodeModel.id}...`);
+
+                            try {
+                                // Start at 0 first to check whether the file is registered
+                                const result = await module.dotNetHelper.invokeMethodAsync(
+                                    'GetTextByScrollPosition',
+                                    nodeModel.id,
+                                    0,
+                                    height,
+                                    LINE_HEIGHT
+                                );
+                                if (_isBoardStale()) {
+                                    log(`[addNode] Board switched after background fetch, aborting retry for ${nodeModel.id}`);
+                                    return;
+                                }
+
+                                if (result && result.content) {
+                                    log(`[addNode] ✅ Background load SUCCESS for ${nodeModel.id}: ${result.content.length} chars`);
+
+                                    // If a saved scroll position exists, jump to that position
+                                    if (savedScrollOffset > 0) {
+                                        log(`[addNode] 📍 Restoring saved scroll position: ${savedScrollOffset}px`);
+                                        try {
+                                            const savedResult = await module.dotNetHelper.invokeMethodAsync(
+                                                'GetTextByScrollPosition',
+                                                nodeModel.id,
+                                                savedScrollOffset,
+                                                height,
+                                                LINE_HEIGHT
+                                            );
+                                            if (_isBoardStale()) {
+                                                log(`[addNode] Board switched after saved-position fetch, aborting retry for ${nodeModel.id}`);
+                                                return;
+                                            }
+
+                                            if (savedResult && savedResult.content) {
+                                                nodeModel.response = savedResult.content;
+                                                nodeModel._visibleContent = savedResult.content;
+                                                nodeModel._visibleScrollOffset = savedResult.relativeScrollOffset;
+                                                nodeModel.scrollOffset = savedScrollOffset;
+                                                log(`[addNode] ✅ Restored to saved position: ${savedScrollOffset}px`);
+                                            } else {
+                                                // If restoring the saved position fails, fall back to scroll=0
+                                                nodeModel.response = result.content;
+                                                nodeModel._visibleContent = result.content;
+                                                nodeModel._visibleScrollOffset = result.relativeScrollOffset;
+                                                nodeModel.scrollOffset = 0;
+                                            }
+                                        } catch (err) {
+                                            console.warn(`[addNode] Failed to restore saved position, using scroll=0:`, err);
+                                            nodeModel.response = result.content;
+                                            nodeModel._visibleContent = result.content;
+                                            nodeModel._visibleScrollOffset = result.relativeScrollOffset;
+                                            nodeModel.scrollOffset = 0;
+                                        }
+                                    } else {
+                                        nodeModel.response = result.content;
+                                        nodeModel._visibleContent = result.content;
+                                        nodeModel._visibleScrollOffset = result.relativeScrollOffset;
+                                        nodeModel.scrollOffset = 0;
+                                    }
+
+                                    if (_isBoardStale()) {
+                                        log(`[addNode] Board switched before applying retry result for ${nodeModel.id}`);
+                                        return;
+                                    }
+
+                                    // Update texture and re-render
+                                    window.MindMapNodes.pendingNodeUpdates.set(nodeModel.id, {
+                                        content: nodeModel._visibleContent,
+                                        width: nodeModel.width,
+                                        height: nodeModel.height,
+                                        scrollDelta: 0
+                                    });
+                                    await window.MindMapPipeline.processRenderQueue(module, nodeModel.id);
+                                    return; // stop retrying on success
+                                }
+                            } catch (err) {
+                                console.warn(`[addNode] Background retry failed for ${nodeModel.id}:`, err);
+                            }
+
+                            // Check if max retry count is exceeded
+                            if (backgroundRetryCount < MAX_BACKGROUND_RETRIES) {
+                                setTimeout(retryLoadContent, RETRY_INTERVAL);
+                            } else {
+                                log(`[addNode] ⚠️ Giving up background retries for ${nodeModel.id} after ${MAX_BACKGROUND_RETRIES} attempts.`);
+                            }
+                        };
+
+                        // Kick off the first background retry
+                        setTimeout(retryLoadContent, RETRY_INTERVAL);
+                        // ▲▲▲ [New] ▲▲▲
+                    }
+
+                    log(`[MindMapNodes] Chunked text node ${nodeModel.id}: ${nodeModel.totalLineCount} lines, totalContentHeight=${totalContentHeight}, maxScroll=${nodeModel.maxScroll}, hasContent=${!!nodeModel._visibleContent}`);
+                } else {
+                    // ▲▲▲ [Refactor] ▲▲▲
+                    // Normal text node
+
+                    // ▼▼▼ [Optimization] Skip measurement if height was pre-calculated OR already set (loaded from saved board) ▼▼▼
+                    const existingHeight = nodeModel.height ?? nodeModel.Height ?? 0;
+                    const hasPreCalculatedHeight = nodeModel._heightPreCalculated && existingHeight > 0;
+                    const hasSavedHeight = existingHeight > 0 && !nodeModel._heightPreCalculated; // From saved board
+
+                    if (hasPreCalculatedHeight) {
+                        log(`[addNode] Step 2.1: SKIPPED measureHtmlHeightAsync (pre-calculated height=${existingHeight}, maxScroll=${nodeModel.maxScroll})`);
+                        height = existingHeight;
+                        nodeModel.scrollOffset = Math.min(nodeModel.scrollOffset || 0, nodeModel.maxScroll || 0);
+                    } else if (hasSavedHeight) {
+                        // Height was saved from previous session - skip measurement
+                        log(`[addNode] Step 2.1: SKIPPED measureHtmlHeightAsync (saved height=${existingHeight})`);
+                        height = existingHeight;
+                        nodeModel.height = height;
+                        // maxScroll may not be set - calculate it now or leave as is
+                        if (nodeModel.maxScroll === undefined) {
+                            nodeModel.maxScroll = 0; // Will be recalculated if user scrolls
+                        }
+                        nodeModel.scrollOffset = Math.min(nodeModel.scrollOffset || 0, nodeModel.maxScroll || 0);
+                    } else {
+                        // If showFullAiResponse is true, do not constrain height
+                        const defaultMaxHeight = module.aiNodeDefaultHeight || 200;
+                        const effectiveMaxHeight = module.showFullAiResponse ? 10000 : defaultMaxHeight;
+                        // ▼▼▼ [Fix] Pass forcedHeight if height is already set (for loaded nodes) ▼▼▼
+                        const forcedHeight = (existingHeight > 0) ? (existingHeight * zoomLevel) : null;
+                        log(`[addNode] Step 2.1: Calling measureHtmlHeightAsync for ${nodeModel.id}... (forcedHeight=${forcedHeight ? forcedHeight / zoomLevel : 'auto'})`);
+                        const { height: autoHeight, maxScrollPx } = await window.MindMapTextureFactory.measureHtmlHeightAsync(nodeModel, zoomLevel, width * zoomLevel, forcedHeight, effectiveMaxHeight);
+                        if (_isBoardStale()) { log(`[addNode] Board switched after measureHeight, aborting ${nodeModel.id}`); return; }
+                        log(`[addNode] Step 2.2: measureHtmlHeightAsync completed for ${nodeModel.id}. autoHeight=${autoHeight}, maxScrollPx=${maxScrollPx}`);
+                        // ▲▲▲ [Fix] ▲▲▲
+                        if (!existingHeight || existingHeight <= 0) {
+                            height = autoHeight;
+                            nodeModel.height = height;
+                        } else {
+                            // Fixed height should still be capped
+                            height = Math.min(existingHeight, MAX_SIZE);
+                            nodeModel.height = height;
+                        }
+                        nodeModel.maxScroll = maxScrollPx / zoomLevel;
+                        nodeModel.scrollOffset = Math.min(nodeModel.scrollOffset || 0, nodeModel.maxScroll);
+                        log(`[addNode] Step 2.3: maxScroll set to ${nodeModel.maxScroll} for ${nodeModel.id}`);
+                    }
+                    // ▲▲▲ [Optimization] ▲▲▲
+                }
+            } catch (heightError) {
+                console.error(`🔧 [MindMapNodes] Failed to auto-measure height for ${nodeModel.id}, using defaults.`, heightError);
+            }
+        }
+
+        nodeModel.width = width;
+        nodeModel.height = height;
+
+        const shouldUseDeferredShell = shouldCreateDeferredShellNode(module, nodeModel);
+
+        timings.t2_afterMeasure = performance.now();
+        log(`[addNode] Step 3: Generating textures for ${nodeModel.id}`);
+        // ▼▼▼ [Key Fix] For text/note/code, generate hi-res textures immediately when response exists ▼▼▼
+        // ▼▼▼ [Fix] Chunk nodes prefer _visibleContent when available ▼▼▼
+        const contentForTexture = nodeModel.isChunkedText
+            ? (nodeModel._visibleContent || nodeModel.response)
+            : nodeModel.response;
+
+        let textures;
+
+        const isCodeNode = nodeModel.contentType === 'code';
+
+        // ▼▼▼ [Lazy Loading] Always start with placeholder. TextLOD will upgrade visible nodes sequentially.
+        // This prevents main thread freeze during bulk load.
+        // ▼▼▼ [Optimization] Skip expensive WebGL texture generation for CSS3D nodes ▼▼▼
+        // Nodes that primarily use CSS3D (Text, Note, Code, Markdown) only need a lightweight placeholder
+        // for the initial WebGL plane (used for Raycasting and far-distance LOD).
+        // Actual content rendering happens via CSS3D or deferred TextureWorker.
+
+        let glObject;
+        if (shouldUseDeferredShell) {
+            timings.t3_afterTextures = performance.now();
+            timings.t4_beforeWebGL = timings.t3_afterTextures;
+            log(`[addNode] Step 5: Creating deferred shell for ${nodeModel.id}`);
+            glObject = window.MindMapObjectManager?.createDeferredNodeShell?.(
+                nodeModel,
+                width,
+                height,
+                nodeZ,
+                module.nodeZCounter++
+            );
+        } else {
+            log(`[addNode] Step 3.1: Generating placeholder texture for ${nodeModel.id}...`);
+            const result = await window.MindMapTextureFactory.generatePlaceholderTextures(module, nodeModel, width, height);
+            if (_isBoardStale()) { log(`[addNode] Board switched after texture gen, aborting ${nodeModel.id}`); return; }
+            textures = result.textures;
+            // ▲▲▲ [Optimization] ▲▲▲
+            // ▲▲▲ [Key Fix] ▲▲▲
+
+            timings.t3_afterTextures = performance.now();
+            log(`[addNode] Step 4: Caching textures for ${nodeModel.id}`);
+            const previous = textureCache.get(nodeModel.id);
+
+            // ★ 이전 텍스처 메모리 감산
+            if (previous) {
+                const prevMemory = calculateTextureMemory(previous, nodeModel.id);
+                totalTextureMemoryBytes -= prevMemory;
+                try { if (!previous.default.body?._isShared) previous.default.body?.dispose(); } catch { }
+                try { if (!previous.selected.body?._isShared) previous.selected.body?.dispose(); } catch { }
+                try { previous.glow?.texture?.dispose(); } catch { }
+            }
+
+            // ★ 새 텍스처 메모리 가산 및 로그
+            textureCache.set(nodeModel.id, textures);
+            const newMemory = calculateTextureMemory(textures, nodeModel.id);
+            logTextureMemory('ADD', nodeModel.id, newMemory);
+
+            timings.t4_beforeWebGL = performance.now();
+            log(`[addNode] Step 5: Creating WebGL object for ${nodeModel.id}`);
+
+            // [Modified] CSS3D media/embed node implementation (image/video/embed)
+            if (nodeModel.contentType === 'image' || nodeModel.contentType === 'video' || nodeModel.contentType === 'embed') {
+            const node = nodeModel; // Alias for snippet compatibility
+            const width = (node.width ?? node.Width) || (nodeModel.contentType === 'embed' ? 460 : (nodeModel.contentType === 'video' ? 470 : 300));
+            const height = (node.height ?? node.Height) || (nodeModel.contentType === 'embed' ? 260 : (nodeModel.contentType === 'video' ? 264 : 300));
+
+            // 1. WebGL Mesh 생성 (LOD 원거리 표시 및 Raycaster 감지용)
+            const hitGeometry = new THREE.PlaneGeometry(width, height);
+            const initialBodyMap = nodeModel.contentType === 'image'
+                ? null
+                : createImageStatusTexture(node, width, height);
+            const hitMaterial = new THREE.MeshBasicMaterial({
+                map: initialBodyMap,
+                color: 0xffffff,
+                transparent: false,
+                depthWrite: true,
+                depthTest: true,
+                side: THREE.DoubleSide,
+                polygonOffset: true,
+                polygonOffsetFactor: -1,
+                polygonOffsetUnits: -1
+            });
+
+            const hitBody = new THREE.Mesh(hitGeometry, hitMaterial);
+            hitBody.name = 'body'; // 중요: 시스템이 'body' 이름을 통해 노드를 식별함
+            hitBody.castShadow = false;
+            hitBody.receiveShadow = false;
+            hitBody.userData = { nodeId: node.id }; // Ensure nodeId is present for Raycaster
+            const shouldDeferImageBodyTexture =
+                module?.isLoading === true ||
+                module?._bulkAddingNodes === true;
+            if (nodeModel.contentType === 'image' && !shouldDeferImageBodyTexture) {
+                syncImageNodeBodyTexture(hitBody, node);
+            } else if (nodeModel.contentType === 'image') {
+                prewarmImageNodePreviewCache(node, module);
+            }
+
+            // [FIX] Align HitBody Top-Left to Group Origin (Standard behavior)
+            // PlaneGeometry is centered (0,0), so move Right(+w/2) and Down(-h/2)
+            // ▼▼▼ [FIX] Move hitBody back slightly to avoid fighting with CSS3D at z=0 ▼▼▼
+            // parallax 최소화를 위해 z=0으로 설정 (Grid z=0, CSS3D z=0)
+            hitBody.position.set(width / 2, -height / 2, 0.0); // ★ z=0.0
+            // ▲▲▲ [Changed] ▲▲▲
+
+            // Create a Group to hold both the hit mesh and the CSS object
+            glObject = new THREE.Group();
+            glObject.add(hitBody);
+
+            const isSelected = module.selectedNodeIdJs === nodeModel.id || module.multiSelectedNodeIds.has(nodeModel.id);
+            const baseRenderOrder = module.nodeZCounter++;
+            hitBody.renderOrder = baseRenderOrder;
+            glObject.userData.baseRenderOrder = baseRenderOrder;
+
+            syncImageSelectionGlow(glObject, width, height, baseRenderOrder, false);
+            syncImageMidLodDecorations(
+                glObject,
+                width,
+                height,
+                baseRenderOrder,
+                isSelected,
+                {
+                    edgeVisible: false,
+                    glowVisible: true
+                }
+            );
+
+            // Optional WebGL glow (disabled by default)
+            if (ENABLE_WEBGL_GLOW && window.MindMapGlowShader) {
+                const glowMesh = window.MindMapGlowShader.createSDFGlowMesh(width, height, isSelected, nodeModel.contentType === 'video' || nodeModel.contentType === 'embed' ? 'text' : 'image');
+                glowMesh.position.set(width / 2, -height / 2, 0.0); // body(1.0)보다 뒤, 그리드(-10)보다 앞
+                glowMesh.renderOrder = baseRenderOrder - 5;
+                const cameraZ = module.camera?.position?.z ?? Infinity;
+                const threshold = 4000;
+                glowMesh.visible = cameraZ < threshold;
+                glObject.add(glowMesh);
+            }
+
+            // ▼▼▼ [FIX] Add corner resize handles to image nodes ▼▼▼
+            // Image nodes use only corner hit-handles in WebGL; the visible affordance comes from the selection overlay.
+            const HANDLE_SIZE = 16;
+
+            const handleConfigs = [
+                { name: 'resizeHandle_TL', corner: 'TL', x: HANDLE_SIZE / 2, y: -HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE },
+                { name: 'resizeHandle_TR', corner: 'TR', x: width - HANDLE_SIZE / 2, y: -HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE },
+                { name: 'resizeHandle_BL', corner: 'BL', x: HANDLE_SIZE / 2, y: -height + HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE },
+                { name: 'resizeHandle_BR', corner: 'BR', x: width - HANDLE_SIZE / 2, y: -height + HANDLE_SIZE / 2, w: HANDLE_SIZE, h: HANDLE_SIZE }
+            ];
+
+            handleConfigs.forEach(c => {
+                const handleGeom = new THREE.PlaneGeometry(c.w, c.h);
+                // 투명하지만 Raycast 감지 가능하도록 opacity 0.01 설정
+                const handleMat = new THREE.MeshBasicMaterial({
+                    color: 0xff0000,
+                    transparent: true,
+                    opacity: 0.0,
+                    depthWrite: false,
+                    depthTest: false
+                });
+                handleMat.colorWrite = false;
+                const handleMesh = new THREE.Mesh(handleGeom, handleMat);
+                handleMesh.name = c.name;
+                handleMesh.userData = { nodeId: nodeModel.id, isResizeHandle: true, corner: c.corner };
+                handleMesh.renderOrder = baseRenderOrder + 10; // 높은 우선순위
+                handleMesh.position.set(c.x, c.y, 0.0); // ★ Parallax 방지: 노드 평면(Z=0)에 완전 밀착 (renderOrder로 가시성 확보)
+                glObject.add(handleMesh);
+            });
+            // ▲▲▲ [FIX] ▲▲▲
+
+            // 2. CSS3D creation delegated to MindMapCss3DManager (standardized)
+            // Previously manual creation here is removed to avoid duplication.
+
+            // Set Group Position
+            // [Fix] Force Z=0 to eliminate parallax - ignore nodeModel.positionZ completely
+            glObject.position.set(nodeModel.positionX, nodeModel.positionY, 0);
+
+            // Essential Metadata
+            glObject.userData.nodeId = nodeModel.id;
+            glObject.userData.worldWidth = width;
+            glObject.userData.worldHeight = height;
+
+            } else {
+                // [Fix] Force zPos=0 to eliminate parallax
+                glObject = await window.MindMapObjectManager.createOrUpdateCanvasTextureNode(module, nodeModel, null, 0, textures, width, height);
+                if (_isBoardStale()) { log(`[addNode] Board switched after WebGL create, aborting ${nodeModel.id}`); return; }
+            }
+        }
+
+        if (!glObject) {
+            console.error(`[MindMapNodes] Node ${nodeModel.id} failed to create WebGL object. Aborting addNode.`);
+            if (!shouldUseDeferredShell) {
+                textureCache.delete(nodeModel.id);
+            }
+            return;
+        }
+        glObject.userData.nodeId = nodeModel.id;
+
+
+
+        // ★ [LOD] 초기 LOD 레벨 저장 (첫 TextLOD 업데이트에서 품질 재결정)
+        glObject.userData.lodLevel = 'NEEDS_UPDATE';
+
+        const nodeEntry = {
+            glObject: glObject,
+            // [Fix] For image nodes, we stored cssObject in userData. Assign it here for consistency.
+            cssObject: glObject.userData?.css3dObject || null,
+            currentType: 'GL', // Initially GL because (Image=Group, Others=Mesh)
+            model: nodeModel,
+            isDeferredShell: shouldUseDeferredShell,
+            // ▼▼▼ [Optimization] Dirty flag for smart CSS3D sync (캐시 최적화) ▼▼▼
+            isCssDirty: true,  // 초기 생성 시 true (첫 표시 시 sync 필요)
+            glowMesh: glObject?.getObjectByName?.('glow') || null,
+            bodyMesh: glObject?.getObjectByName?.('body') || null,
+            tailMesh: glObject?.getObjectByName?.('tail') || null
+            // ▲▲▲ [Optimization] ▲▲▲
+        };
+        const isNearMode = module.lodRenderer ? !module.lodRenderer.isInLODMode : true;
+
+        // Rich cards use CSS3D in NEAR/NORMAL so wrapper glow/selection stays consistent.
+        if (nodeModel.contentType === 'note' || nodeModel.contentType === 'memo' || nodeModel.contentType === 'text' || nodeModel.contentType === 'markdown' || nodeModel.contentType === 'code' || nodeModel.contentType === 'image' || nodeModel.contentType === 'video' || nodeModel.contentType === 'embed') {
+            log(`[MindMapNodes] Creating cssObject for ${nodeModel.contentType} node ${nodeModel.id}`);
+            const shouldDeferCssObject = module.isLoading && (
+                nodeModel.contentType === 'text' ||
+                nodeModel.contentType === 'note' ||
+                nodeModel.contentType === 'memo' ||
+                nodeModel.contentType === 'markdown' ||
+                nodeModel.contentType === 'code' ||
+                nodeModel.contentType === 'image' ||
+                nodeModel.contentType === 'embed'
+            );
+
+            if (!nodeEntry.cssObject && !shouldDeferCssObject) {
+                nodeEntry.cssObject = window.MindMapCss3DManager.createCss3dObject(module, nodeModel);
+            }
+            if (nodeEntry.cssObject) {
+                const glPos = glObject.position;
+                // [FIX] Parallax issue fix: Set Z to match glObject (was + 0.2)
+                nodeEntry.cssObject.position.set(glPos.x, glPos.y, glPos.z);
+                const shouldAttachCss = isNearMode;
+                if (shouldAttachCss) {
+                    (module.cssScene || module.scene).add(nodeEntry.cssObject);
+                    window.MindMapCss3DManager?.markCssParentRepairNeeded?.(module, nodeModel.id);
+                } else if (nodeEntry.cssObject.parent) {
+                    nodeEntry.cssObject.parent.remove(nodeEntry.cssObject);
+                }
+                nodeEntry.cssObject.updateMatrixWorld(true);
+                window.MindMapCss3DManager?.markNodeTransformDirty?.(module, nodeModel.id);
+
+                // ▼▼▼ [Fix] Apply thin scrollbar class to view mode element ▼▼▼
+                const scrollableEl = nodeEntry.cssObject.element.querySelector('.node-response');
+                if (scrollableEl) {
+                    scrollableEl.classList.add('thin-scrollbar');
+                }
+                // ▲▲▲ [Fix] ▲▲▲
+
+                // ▼▼▼ [Fix] Sync content immediately after CSS3D object creation ▼▼▼
+                if (window.MindMapCss3DManager?.syncCss3dContent) {
+                    window.MindMapCss3DManager.syncCss3dContent(nodeModel, nodeEntry.cssObject);
+                    // ▼▼▼ [Optimization] 초기 sync 완료 후 clean 상태로 설정 ▼▼▼
+                    nodeEntry.isCssDirty = false;
+                    // ▲▲▲ [Optimization] ▲▲▲
+                }
+                // ▲▲▲ [Fix] ▲▲▲
+
+                // ▼▼▼ [Fix] NEAR 모드에서 새 노드 즉시 표시 ▼▼▼
+                // CSS3D 객체는 기본적으로 visible=false로 생성됨
+                // NEAR 모드(isInLODMode=false)일 때 즉시 표시해야 함
+                if (shouldAttachCss) {
+                    nodeEntry.cssObject.visible = true;
+                    if (nodeEntry.cssObject.element) {
+                        nodeEntry.cssObject.element.style.removeProperty('display');
+                        nodeEntry.cssObject.element.style.removeProperty('visibility');
+                        nodeEntry.cssObject.element.style.removeProperty('opacity');
+                        nodeEntry.cssObject.element.style.setProperty('display', 'block', 'important');
+                        nodeEntry.cssObject.element.style.setProperty('visibility', 'visible', 'important');
+                        nodeEntry.cssObject.element.style.setProperty('opacity', '1', 'important');
+                    }
+                    nodeEntry.currentType = 'CSS';
+                    // WebGL body 숨기기 (이중 렌더링 방지)
+                    if (glObject) {
+                        ensureNodeMeshCache(nodeEntry);
+                        glObject.visible = true; // Group은 visible (glow 등 표시 위해)
+                        const body = nodeEntry.bodyMesh;
+                        const tail = nodeEntry.tailMesh;
+                        if (body) body.visible = false;
+                        if (tail) tail.visible = false;
+                        setNodeScrollbarVisibility(nodeEntry, false);
+                    }
+                    log(`[MindMapNodes] ✅ CSS3D visible=true for new node ${nodeModel.id} (NEAR mode)`);
+                }
+                // ▲▲▲ [Fix] ▲▲▲
+            }
+        }
+        // ▲▲▲ [Changed] ▲▲▲
+
+        // ▼▼▼ [UX] Hide nodes while board is loading ▼▼▼
+        if (module.isLoading) {
+            if (glObject) glObject.visible = false;
+            if (nodeEntry.cssObject) nodeEntry.cssObject.visible = false;
+        }
+        // ▲▲▲ [UX] ▲▲▲
+
+        // ▼▼▼ [Fix] Only enqueue when it was not rendered immediately ▼▼▼
+        const alreadyRendered = (nodeModel.contentType === 'text' || nodeModel.contentType === 'note' || nodeModel.contentType === 'code') && nodeModel.response;
+        if (!shouldUseDeferredShell && !alreadyRendered && !pendingNodeUpdates.has(nodeModel.id) && (nodeModel.contentType === 'text' || nodeModel.contentType === 'note' || nodeModel.contentType === 'code')) {
+            pendingNodeUpdates.set(nodeModel.id, {
+                content: nodeModel.response,
+                width: width,
+                height: height
+            });
+            setTimeout(() => window.MindMapPipeline.processRenderQueue(module, nodeModel.id), 0);
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+
+        // ▼▼▼ [Fix] Trigger an immediate render update after image load completes ▼▼▼
+        // Previously: cache only and wait for a C# call -> Now: enqueue rendering when caching succeeds
+        // ▼▼▼ [Modified] Skip async texture load for CSS3D-based Image nodes ▼▼▼
+        // Image nodes now use <img> tags via CSS3D, so we don't need to load the texture into WebGL.
+        if (nodeModel.contentType === 'image' && nodeModel.response) {
+            // WebGL texture is loaded directly in the image block above.
+        }
+        // ▲▲▲ [Modified] ▲▲▲
+
+        if (module.nodeObjectsById.has(nodeModel.id)) {
+            console.warn(`[MindMapNodes] Race condition: Node was added by another call: ${nodeModel.id}`);
+            if (glObject && glObject.geometry) try { glObject.geometry.dispose(); } catch { }
+            return;
+        }
+
+        module.nodeObjectsById.set(nodeModel.id, nodeEntry);
+        const queuedUpdate = pendingNodeUpdates.get(nodeModel.id);
+        if (queuedUpdate) {
+            queuedUpdate.retryCount = 0;
+            setTimeout(() => window.MindMapPipeline?.processRenderQueue?.(module, nodeModel.id), 0);
+        }
+        module.markAgentConsoleVisibilityTrackingDirty?.();
+        scheduleMindCanvasAgentReportAutoFit(module, nodeModel.id);
+
+        if (module.GRID_CELL_SIZE && glObject && glObject.position) {
+            // ▼▼▼ [Fix] Register the node in all occupied cells using the improved helper ▼▼▼
+            updateNodeSpatialGrid(module, nodeModel.id);
+            // ▲▲▲ [Fix] ▲▲▲
+        }
+
+        if (!shouldUseDeferredShell) {
+            module.scene.add(glObject);
+        }
+
+        // Newly added nodes can already be selected programmatically (for example after paste).
+        // Re-apply the current selection state now that the live entry exists so pointer events,
+        // resize affordances, and click-cycle behavior start from a consistent base.
+        const isSelectedOnAdd =
+            module.selectedNodeIdJs === nodeModel.id ||
+            module.multiSelectedNodeIds?.has?.(nodeModel.id) === true;
+        updateNodeSelectionStyle(module, nodeModel.id, isSelectedOnAdd, false, true);
+
+        // Persist initial auto-position/size to C# state so board save captures them.
+        if (module.dotNetHelper?.invokeMethodAsync) {
+            if (autoPositioned) {
+                try {
+                    await module.dotNetHelper.invokeMethodAsync(
+                        'UpdateNodePosition',
+                        nodeModel.id,
+                        Math.round(nodeModel.positionX || 0),
+                        Math.round(nodeModel.positionY || 0)
+                    );
+                } catch (e) {
+                    console.warn('[MindMapNodes] Failed to persist auto-position:', e);
+                }
+            }
+
+            if (isNewNode) {
+                try {
+                    await module.dotNetHelper.invokeMethodAsync(
+                        'UpdateNodeDimensions',
+                        nodeModel.id,
+                        Math.round(width || 0),
+                        Math.round(height || 0)
+                    );
+                } catch (e) {
+                    console.warn('[MindMapNodes] Failed to persist initial dimensions:', e);
+                }
+            }
+        }
+
+        if (autoPositioned) {
+            moveCursorAfterNodePlacement(module, nodeModel, width, height, {
+                padding: 30,
+                moveCamera: true
+            });
+        }
+        const nodeEndTime = performance.now();
+        timings.t5_end = nodeEndTime;
+
+        // ▼▼▼ [Timing] 세부 시간 출력 ▼▼▼
+        const t_init = timings.t1_init - nodeStartTime;
+        const t_measure = (timings.t2_afterMeasure || timings.t1_init) - timings.t1_init;
+        const t_textures = (timings.t3_afterTextures || timings.t2_afterMeasure || timings.t1_init) - (timings.t2_afterMeasure || timings.t1_init);
+        const t_webgl = (timings.t5_end) - (timings.t4_beforeWebGL || timings.t3_afterTextures || timings.t1_init);
+        const t_total = nodeEndTime - nodeStartTime;
+
+        if (!module.isLoading) {
+            log(`[⏱️ Timing] addNode for ${nodeModel.id} (${nodeModel.contentType}):
+  • Init: ${t_init.toFixed(1)}ms
+  • MeasureHeight: ${t_measure.toFixed(1)}ms
+  • Textures: ${t_textures.toFixed(1)}ms
+  • WebGL+Finish: ${t_webgl.toFixed(1)}ms
+  • TOTAL: ${t_total.toFixed(1)}ms`);
+        }
+        // ▲▲▲ [Timing] ▲▲▲
+
+        // ▼▼▼ [Fix] 노드 추가 후 LOD 렌더러 및 frustum culling 즉시 업데이트 ▼▼▼
+        if (!module.isLoading) {
+            if (module.lodRenderer?.requestResidentPatch) {
+                module.lodRenderer.requestResidentPatch('add-node', nodeModel.id || nodeModel.Id);
+            }
+            // Frustum culling 강제 업데이트 (새 노드가 화면에 보이도록)
+            if (module.updateVisibility && module.camera) {
+                module.updateVisibility(module.camera);
+            }
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+
+        if (!module.isLoading) {
+            log(`[MindMapNodes] Node added successfully: ${nodeModel.id} (${t_total.toFixed(1)}ms)`);
+        }
+    }
+
+    function removeNode(module, nodeId, options = null) {
+        const id = String(nodeId || '').trim();
+        if (!module || !id) return false;
+
+        const entry = module.nodeObjectsById.get(id);
+        if (!entry) return false;
+
+        removeNodeFromSpatialGrid(module, id, entry);
+
+        if (entry.cssObject && entry.cssObject.element) {
+            const domElement = entry.cssObject.element;
+            if (domElement.parentElement) {
+                domElement.parentElement.removeChild(domElement);
+            }
+        }
+
+        if (entry.glObject && module.scene) {
+
+
+            try { module.scene.remove(entry.glObject); } catch { }
+            if (entry.glObject.geometry) try { entry.glObject.geometry.dispose(); } catch { }
+            try {
+                entry.glObject.traverse(child => {
+                    if (child.geometry) try { child.geometry.dispose(); } catch { }
+                    if (child.material) {
+                        if (Array.isArray(child.material)) child.material.forEach(m => { try { m.dispose(); } catch { } });
+                        else try { child.material.dispose(); } catch { }
+                    }
+                });
+            } catch { }
+        }
+
+        if (entry.cssObject) {
+            try { (module.cssScene || module.scene).remove(entry.cssObject); } catch { }
+        }
+
+        const cached = textureCache.get(id);
+        if (cached) {
+            // ★ 삭제되는 텍스처 메모리 감산 및 로그
+            const freedMemory = calculateTextureMemory(cached);
+            logTextureMemory('REMOVE', id, -freedMemory);
+
+            if (!cached.default.body?._isShared) try { cached.default.body?.dispose(); } catch { }
+            if (!cached.selected.body?._isShared) try { cached.selected.body?.dispose(); } catch { }
+            try { cached.glow?.texture?.dispose(); } catch { }
+            textureCache.delete(id);
+        }
+        imageCache.delete(id);
+        pendingNodeUpdates.delete(id);
+        nodeRenderLocks.delete(id);
+
+        module.multiSelectedNodeIds?.delete?.(id);
+        module.pendingSelectedActivationNodeIds?.delete?.(id);
+        if (module.selectedNodeIdJs === id) module.selectedNodeIdJs = null;
+        module.setAgentConsoleVisibilityState?.(id, false);
+        module.logicWorkerBridge?.removeNode?.(id, module);
+        module.nodeObjectsById.delete(id);
+
+        if (options?.deferRenderSync !== true) {
+            finalizeRemovedNodes(module, [id]);
+        }
+
+        return true;
+    }
+
+    function removeNodes(module, nodeIds) {
+        if (!module || !Array.isArray(nodeIds) || nodeIds.length === 0) return 0;
+
+        const uniqueIds = Array.from(new Set(
+            nodeIds.map(id => String(id || '').trim()).filter(Boolean)
+        ));
+        const removedIds = [];
+
+        uniqueIds.forEach(id => {
+            if (removeNode(module, id, { deferRenderSync: true })) {
+                removedIds.push(id);
+            }
+        });
+
+        finalizeRemovedNodes(module, removedIds);
+        return removedIds.length;
+    }
+
+    function finalizeRemovedNodes(module, nodeIds) {
+        if (!module || !Array.isArray(nodeIds) || nodeIds.length === 0) return;
+
+        const lodRenderer = module.lodRenderer;
+        if (lodRenderer) {
+            if (typeof lodRenderer.removeNodes === 'function') {
+                lodRenderer.removeNodes(nodeIds);
+            } else if (typeof lodRenderer.removeNode === 'function') {
+                nodeIds.forEach(id => lodRenderer.removeNode(id));
+            } else if (typeof lodRenderer.requestResidentPatch === 'function') {
+                lodRenderer.requestResidentPatch('remove-node');
+            }
+        }
+
+        window.MindMapTextOverlayV2?.invalidateView?.(module);
+
+        if (module.updateVisibility && module.camera) {
+            module.updateVisibility(module.camera);
+        }
+        module._forceUpdateFrames = Math.max(module._forceUpdateFrames || 0, 4);
+    }
+
+    function isMindCanvasAgentReportNode(model) {
+        const metadata = model?.metadata || model?.Metadata || {};
+        return String(metadata?.source || metadata?.Source || '').trim() === 'mind-canvas-agent-report';
+    }
+
+    function measureMindCanvasAgentReportNaturalHeight(entry) {
+        const sourceRoot = entry?.cssObject?.element;
+        if (!sourceRoot) return null;
+
+        const probe = sourceRoot.cloneNode(true);
+        probe.removeAttribute('id');
+        probe.querySelectorAll?.('[id]')?.forEach(el => el.removeAttribute('id'));
+        Object.assign(probe.style, {
+            position: 'absolute',
+            left: '-100000px',
+            top: '-100000px',
+            display: 'block',
+            visibility: 'hidden',
+            pointerEvents: 'none',
+            overflow: 'visible',
+            height: 'auto',
+            zIndex: '-1000'
+        });
+
+        const inner = probe.firstElementChild;
+        if (!inner) return null;
+
+        inner.style.height = 'auto';
+        inner.style.minHeight = '0';
+        inner.style.overflow = 'visible';
+
+        const contentWrapper = inner.querySelector('.node-content-wrapper');
+        if (contentWrapper) {
+            contentWrapper.style.height = 'auto';
+            contentWrapper.style.overflow = 'visible';
+        }
+
+        const responseEl = inner.querySelector(`[id^="node-response-"]`) || inner.querySelector('.node-response');
+        if (responseEl) {
+            responseEl.style.height = 'auto';
+            responseEl.style.flex = '0 0 auto';
+            responseEl.style.overflowY = 'visible';
+            responseEl.style.overflow = 'visible';
+        }
+
+        document.body.appendChild(probe);
+        try {
+            const measured = Math.ceil(Math.max(
+                inner.getBoundingClientRect?.().height || 0,
+                inner.scrollHeight || 0,
+                probe.getBoundingClientRect?.().height || 0
+            ));
+            return Number.isFinite(measured) && measured > 0 ? measured : null;
+        } finally {
+            probe.remove();
+        }
+    }
+
+    function scheduleMindCanvasAgentReportAutoFit(module, nodeId) {
+        const entry = module?.nodeObjectsById?.get?.(nodeId);
+        if (!entry || !isMindCanvasAgentReportNode(entry.model) || entry.model?._agentReportAutoFitScheduled) return;
+
+        entry.model._agentReportAutoFitScheduled = true;
+        setTimeout(() => {
+            const latest = module?.nodeObjectsById?.get?.(nodeId);
+            if (!latest || !isMindCanvasAgentReportNode(latest.model)) return;
+
+            const measured = measureMindCanvasAgentReportNaturalHeight(latest);
+            if (!measured) return;
+
+            const currentHeight = Number(latest.model?.height || latest.model?.Height || latest.cssObject?.userData?.worldHeight || 0);
+            const nextHeight = Math.max(100, Math.min(4000, measured + 2));
+            if (Math.abs(nextHeight - currentHeight) <= 3) return;
+
+            const model = latest.model;
+            const width = Number(model.width || model.Width || latest.cssObject?.userData?.worldWidth || 400);
+            model.height = nextHeight;
+            model.Height = nextHeight;
+
+            pendingNodeUpdates.set(nodeId, {
+                content: model.response ?? model.Response ?? '',
+                width,
+                height: nextHeight,
+                skipMeasure: true
+            });
+
+            window.MindMapPipeline?.processRenderQueue?.(module, nodeId)
+                ?.catch?.(err => console.warn('[MindMapNodes] Failed to auto-fit agent report node:', err));
+        }, 0);
+    }
+
+    async function updateNodeContent(module, nodeId, content, w = null, h = null, isLoading = null) {
+        if (!module.nodeObjectsById.has(nodeId)) {
+            pendingNodeUpdates.set(nodeId, {
+                content,
+                width: w,
+                height: h,
+                isLoading,
+                retryCount: 0,
+                source: 'MindMapNodes.updateNodeContent-missing'
+            });
+            console.warn(`[MindMapNodes] updateNodeContent queued: Node ID not found yet: ${nodeId}`);
+            return;
+        }
+
+        const nodeEntry = module.nodeObjectsById.get(nodeId);
+        const contentType = getNodeContentTypeLower(nodeEntry?.model) || 'unknown';
+        const widthLabel = w ?? 'auto';
+        const heightLabel = h ?? 'auto';
+        const previousResponse = String(nodeEntry?.model?.response ?? nodeEntry?.model?.Response ?? '');
+        const previousIsLoading = !!(nodeEntry?.model?.isLoading ?? nodeEntry?.model?.IsLoading);
+        let nextContent = content;
+        const hasExplicitContent = nextContent !== null && nextContent !== undefined;
+        const model = nodeEntry?.model;
+        if (model && hasExplicitContent) {
+            nextContent = applyCanonicalNodeResponse(model, nextContent);
+        }
+
+        const effectiveContent = hasExplicitContent ? nextContent : previousResponse;
+        const contentLen = effectiveContent ? String(effectiveContent).length : 0;
+        log(`[MindMapNodes] updateNodeContent for ${nodeId}: ContentType=${contentType}, New Size=${widthLabel}x${heightLabel}, ContentLen=${contentLen}, isLoading=${isLoading}`);
+
+        // ▼▼▼ [New] Update isLoading state in JS model ▼▼▼
+        if (model && isLoading !== null) {
+            model.isLoading = isLoading;
+            model.IsLoading = isLoading;
+        }
+        // ▲▲▲ [New] ▲▲▲
+
+        let generatedImageLayoutUpdate = null;
+        if (model) {
+            generatedImageLayoutUpdate = prepareGeneratedImageLayoutUpdate(
+                module,
+                nodeEntry,
+                w,
+                h,
+                previousResponse,
+                previousIsLoading,
+                isLoading
+            );
+
+            if (generatedImageLayoutUpdate) {
+                w = generatedImageLayoutUpdate.width;
+                h = generatedImageLayoutUpdate.height;
+                applyNodeWorldPosition(module, nodeEntry, generatedImageLayoutUpdate.x, generatedImageLayoutUpdate.y);
+                log(
+                    `[MindMapNodes] Generated image frame aligned for ${nodeId}: ` +
+                    `${generatedImageLayoutUpdate.width}x${generatedImageLayoutUpdate.height} @ ` +
+                    `(${generatedImageLayoutUpdate.x}, ${generatedImageLayoutUpdate.y})`
+                );
+            }
+        }
+
+        // ▼▼▼ [New] Auto-grow height during streaming for expanded nodes or full-response mode ▼▼▼
+        const shouldAutoGrow = model && (contentType === 'text' || contentType === 'note') &&
+            (model.isExpanded || !!module.showFullAiResponse);
+
+        // Check whether CSS3D DOM is available for direct measurement (most accurate)
+        const isCss3dVisible = !!(nodeEntry?.cssObject?.visible && window.MindMapCss3DManager?.syncCss3dContent);
+
+        // [Fallback] When CSS3D is NOT visible, use measureHtmlHeightAsync (different CSS, 2x scale)
+        if (shouldAutoGrow && !isCss3dVisible) {
+            try {
+                const zoomLevel = 2;
+                const currentWidth = model.width || 400;
+                const effectiveMaxHeight = 10000;
+                const { height: measuredHeight } = await window.MindMapTextureFactory.measureHtmlHeightAsync(
+                    { ...model, response: nextContent },
+                    zoomLevel,
+                    currentWidth * zoomLevel,
+                    null,
+                    effectiveMaxHeight
+                );
+
+                const SAFETY_BUFFER = 4;
+                const requiredHeight = measuredHeight + SAFETY_BUFFER;
+                const MAX_HEIGHT = 4000;
+                const newHeight = Math.min(requiredHeight, MAX_HEIGHT);
+                const isFinalPass = isLoading === false;
+
+                if ((!isFinalPass && newHeight > model.height) ||
+                    (isFinalPass && Math.abs(newHeight - model.height) > 1)) {
+                    log(`[MindMapNodes] Auto-fit (fallback) node ${nodeId}: ${model.height} -> ${newHeight}px`);
+                    model.height = newHeight;
+                    h = newHeight;
+                    if (nodeEntry.cssObject?.userData) nodeEntry.cssObject.userData.worldHeight = newHeight;
+                    if (nodeEntry.glObject?.userData) nodeEntry.glObject.userData.worldHeight = newHeight;
+                }
+            } catch (err) {
+                console.warn(`[MindMapNodes] Failed to auto-grow expanded node ${nodeId}:`, err);
+            }
+        }
+        // ▲▲▲ [New] ▲▲▲
+
+        // ▼▼▼ [Optimization] 내용 변경 시 dirty 플래그 설정 ▼▼▼
+        if (model && hasExplicitContent && previousResponse !== String(nextContent ?? '')) {
+            nodeEntry.isCssDirty = true;
+        }
+        // ▲▲▲ [Optimization] ▲▲▲
+
+        // ▼▼▼ [Refactor] Update Model & Delegate CSS3D DOM updates to Manager ▼▼▼
+        if (isCss3dVisible && nodeEntry.model) {
+            // 1. Update content in DOM first
+            if (hasExplicitContent) {
+                setNodeResponseValue(nodeEntry.model, nextContent);
+            }
+            window.MindMapCss3DManager.syncCss3dContent(nodeEntry.model, nodeEntry.cssObject);
+
+            // 2. [Primary] Scrollbar-based precise height correction
+            //    After syncCss3dContent, response div has the content rendered.
+            //    If scrollHeight > clientHeight, the content overflows: grow by exactly that amount.
+            //    On final pass (isLoading=false), also allow shrink using auto-height measurement.
+            if (shouldAutoGrow) {
+                try {
+                    const cssRoot = nodeEntry.cssObject.element;
+                    const innerEl = cssRoot?.firstElementChild;
+                    const responseEl = innerEl?.querySelector(`[id^="node-response-"]`) || innerEl?.querySelector('.node-response');
+
+                    if (responseEl) {
+                        const MAX_HEIGHT = 4000;
+                        const MIN_HEIGHT = module.aiNodeDefaultHeight || 60;
+                        const currentHeight = model.height || 0;
+                        const isFinalPass = isLoading === false;
+
+                        const scrollH = responseEl.scrollHeight;
+                        const clientH = responseEl.clientHeight;
+                        const overflow = scrollH - clientH;
+
+                        if (overflow > 1) {
+                            // Content overflows — grow by overflow + small buffer for sub-pixel rounding
+                            const SCROLL_BUFFER = 5;
+                            const GRID = module.GRID_SIZE || 10;
+                            const raw = currentHeight + Math.ceil(overflow) + SCROLL_BUFFER;
+                            const newHeight = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, Math.ceil(raw / GRID) * GRID));
+                            log(`[MindMapNodes] DOM-fit(scroll) node ${nodeId}: ${currentHeight} -> ${newHeight}px (overflow=${overflow})`);
+                            model.height = newHeight;
+                            h = newHeight;
+                            if (nodeEntry.cssObject?.userData) nodeEntry.cssObject.userData.worldHeight = newHeight;
+                            if (nodeEntry.glObject?.userData) nodeEntry.glObject.userData.worldHeight = newHeight;
+                        } else if (isFinalPass && overflow < -10) {
+                            // Final pass: node is too tall (excess whitespace).
+                            // Use auto-height trick to find exact needed height for shrinking.
+                            const wrapperEl = innerEl?.querySelector('.node-content-wrapper');
+                            if (wrapperEl) {
+                                const saved = {
+                                    rootH: cssRoot.style.height, rootOv: cssRoot.style.overflow,
+                                    innerH: innerEl.style.height, innerOv: innerEl.style.overflow,
+                                    wrapperH: wrapperEl.style.height, wrapperOv: wrapperEl.style.overflow,
+                                    responseH: responseEl.style.height, responseFlex: responseEl.style.flex,
+                                    responseOv: responseEl.style.overflowY || responseEl.style.overflow,
+                                };
+                                cssRoot.style.height = 'auto'; cssRoot.style.overflow = 'visible';
+                                innerEl.style.height = 'auto'; innerEl.style.overflow = 'visible';
+                                wrapperEl.style.height = 'auto'; wrapperEl.style.overflow = 'visible';
+                                responseEl.style.height = 'auto'; responseEl.style.flex = '0 0 auto'; responseEl.style.overflowY = 'visible';
+
+                                const naturalHeight = innerEl.scrollHeight;
+
+                                cssRoot.style.height = saved.rootH; cssRoot.style.overflow = saved.rootOv;
+                                innerEl.style.height = saved.innerH; innerEl.style.overflow = saved.innerOv;
+                                wrapperEl.style.height = saved.wrapperH; wrapperEl.style.overflow = saved.wrapperOv;
+                                responseEl.style.height = saved.responseH; responseEl.style.flex = saved.responseFlex;
+                                responseEl.style.overflowY = saved.responseOv;
+
+                                const shrunkHeight = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, Math.ceil(naturalHeight)));
+                                if (shrunkHeight < currentHeight - 1) {
+                                    log(`[MindMapNodes] DOM-fit(shrink) node ${nodeId}: ${currentHeight} -> ${shrunkHeight}px`);
+                                    model.height = shrunkHeight;
+                                    h = shrunkHeight;
+                                    if (nodeEntry.cssObject?.userData) nodeEntry.cssObject.userData.worldHeight = shrunkHeight;
+                                    if (nodeEntry.glObject?.userData) nodeEntry.glObject.userData.worldHeight = shrunkHeight;
+                                }
+                            }
+                        }
+                    }
+                } catch (err) {
+                    console.warn(`[MindMapNodes] DOM height fit failed for ${nodeId}:`, err);
+                }
+            }
+
+            nodeEntry.isCssDirty = false;
+        }
+        // ▲▲▲ [Refactor] ▲▲▲
+
+        if (window.MindMapTextOverlayV2?.invalidateNode) {
+            const invalidateReason = hasExplicitContent ? 'content' : 'layout';
+            window.MindMapTextOverlayV2.invalidateNode(module, nodeId, invalidateReason);
+        }
+
+        pendingNodeUpdates.set(nodeId, { content: effectiveContent, width: w, height: h, isLoading });
+        await window.MindMapPipeline.processRenderQueue(module, nodeId);
+
+        if (generatedImageLayoutUpdate?.shouldMoveCursor) {
+            moveCursorAfterNodePlacement(module, model, model.width, model.height, {
+                padding: 30,
+                moveCamera: false
+            });
+        }
+
+        if ((generatedImageLayoutUpdate?.positionChanged || generatedImageLayoutUpdate?.sizeChanged) && module.dotNetHelper?.invokeMethodAsync) {
+            try {
+                if (generatedImageLayoutUpdate.sizeChanged) {
+                    await module.dotNetHelper.invokeMethodAsync(
+                        'UpdateNodeDimensions',
+                        nodeId,
+                        Math.round(Number(model?.width || generatedImageLayoutUpdate.width || 0)),
+                        Math.round(Number(model?.height || generatedImageLayoutUpdate.height || 0))
+                    );
+                }
+
+                if (generatedImageLayoutUpdate.positionChanged) {
+                    await module.dotNetHelper.invokeMethodAsync(
+                        'UpdateNodePosition',
+                        nodeId,
+                        Math.round(Number(model?.positionX || generatedImageLayoutUpdate.x || 0)),
+                        Math.round(Number(model?.positionY || generatedImageLayoutUpdate.y || 0))
+                    );
+                }
+            } catch (error) {
+                console.warn('[MindMapNodes] Failed to persist generated image layout update:', error);
+            }
+        }
+    }
+
+    function markOverlayStackOrderChanged(module, forceFrames = 3) {
+        if (!module) return;
+
+        module._deferPassiveOverlayRefresh = false;
+        module._overlayDirty = true;
+        module._forceUpdateFrames = Math.max(Number(module._forceUpdateFrames || 0), forceFrames);
+        window.MindMapTextOverlayV2?.invalidateView?.(module);
+    }
+
+    function bringNodeToFront(module, nodeId) {
+        if (!module || !nodeId) return;
+
+        const entry = module.nodeObjectsById?.get(nodeId);
+        if (!entry) return;
+        const contentTypeLower = getNodeContentTypeLower(entry.model);
+        const usesSafeMediaSelectionChrome = contentTypeLower === 'video' || contentTypeLower === 'embed';
+
+        // Keep relative renderOrder offsets (e.g., resize handles above body) and move whole node to top.
+        if (entry.glObject) {
+            let minOrder = Infinity;
+            let maxOrder = -Infinity;
+
+            entry.glObject.traverse(child => {
+                if (child.isMesh || child.isLine) {
+                    const order = child.renderOrder || 0;
+                    if (order < minOrder) minOrder = order;
+                    if (order > maxOrder) maxOrder = order;
+                }
+            });
+
+            if (!Number.isFinite(minOrder)) minOrder = 0;
+            if (!Number.isFinite(maxOrder)) maxOrder = minOrder;
+
+            const targetBaseOrder = module.nodeZCounter++;
+            const delta = targetBaseOrder - minOrder;
+
+            entry.glObject.traverse(child => {
+                if (child.isMesh || child.isLine) {
+                    child.renderOrder = (child.renderOrder || 0) + delta;
+                }
+            });
+
+            const nextTop = maxOrder + delta + 1;
+            if (nextTop > module.nodeZCounter) {
+                module.nodeZCounter = nextTop;
+            }
+        }
+
+        // CSS3DObject re-parenting can trigger a one-frame detach flicker.
+        // Keep DOM attached and raise stacking via z-index instead.
+        if (entry.cssObject) {
+            syncCss3dMediaFrameForEntry(module, nodeId, entry);
+            const cssElement = entry.cssObject.element;
+            if (cssElement) {
+                const z = Math.max(1, module.nodeZCounter - 1);
+                cssElement.style.zIndex = String(z);
+                const hasLiveEmbedIframe =
+                    contentTypeLower === 'embed' &&
+                    window.MindMapCss3DManager?.hasMountedEmbedIframe?.(entry.cssObject) === true;
+                if (usesSafeMediaSelectionChrome && !hasLiveEmbedIframe && cssElement.parentElement) {
+                    cssElement.parentElement.appendChild(cssElement);
+                }
+            }
+        }
+
+        markOverlayStackOrderChanged(module);
+    }
+
+    async function updateNodeSelectionStyle(module, nodeId, isSelected, bringToFront = false, asyncSchedule = false) {
+        if (asyncSchedule) {
+            setTimeout(() => updateNodeSelectionStyle(module, nodeId, isSelected, bringToFront, false), 0);
+            return;
+        }
+
+        if (!isSelected) {
+            window.MindMapCss3DManager?.hideBusinessAutomationFloatingTooltipForNode?.(nodeId);
+        }
+
+        const entry = module.nodeObjectsById.get(nodeId);
+        if (!entry || !entry.glObject) return;
+
+        if (isMediaNodeModel(entry.model)) {
+            syncCss3dMediaFrameForEntry(module, nodeId, entry);
+        }
+
+        // ▼▼▼ [Fix] Keep image nodes visible on selection (avoid LOD/CSS conflicts) ▼▼▼
+        if (entry.model?.contentType === 'image') {
+            ensureNodeMeshCache(entry);
+            entry.glObject.visible = true;
+            const body = entry.bodyMesh;
+            const tail = entry.tailMesh;
+            const usesCssView =
+                entry.currentType === 'CSS' &&
+                !!entry.cssObject?.visible &&
+                isCss3dRendererEnabledForModule(module);
+            const baseRenderOrder = entry.glObject.userData?.baseRenderOrder ?? body?.renderOrder ?? 1;
+            const nodeWidth = entry.model.width || body?.geometry?.parameters?.width || 300;
+            const nodeHeight = entry.model.height || body?.geometry?.parameters?.height || 300;
+            const showImageLodGlow = !usesCssView;
+            syncImageSelectionGlow(entry.glObject, nodeWidth, nodeHeight, baseRenderOrder, false);
+            syncImageMidLodDecorations(entry.glObject, nodeWidth, nodeHeight, baseRenderOrder, !!isSelected, {
+                edgeVisible: false,
+                glowVisible: showImageLodGlow
+            });
+            const outline = entry.glObject.getObjectByName('outline');
+            if (body) body.visible = !usesCssView || shouldShowImageBodyInCssMode(entry.model);
+            if (tail) tail.visible = false;
+            if (outline) {
+                outline.visible = false;
+                if (outline.material) {
+                    outline.material.color.setHex(IMAGE_SELECTION_GLOW_COLOR);
+                    outline.material.opacity = 0;
+                    outline.material.needsUpdate = true;
+                }
+            }
+            if (entry.glObject?.children) {
+                entry.glObject.children.forEach(child => {
+                    if (child?.userData?.isResizeHandle) {
+                        child.visible = !usesCssView;
+                        if (usesCssView) {
+                            child.scale?.setScalar?.(1.0);
+                        }
+                    }
+                });
+            }
+
+            // Keep CSS-based glow in sync for image nodes as well.
+            const imageCssElement = entry.cssObject?.element;
+            const imageInner =
+                imageCssElement?.querySelector('.map-node-image-container') ||
+                imageCssElement?.querySelector('.map-node') ||
+                null;
+            if (imageCssElement?.classList) {
+                imageCssElement.classList.remove('image-selected');
+                imageCssElement.classList.toggle('selected', !!isSelected);
+            }
+            if (imageInner?.classList) {
+                imageInner.classList.toggle('selected', !!isSelected);
+            }
+
+            // ▼▼▼ [Fix] Glow update for image nodes ▼▼▼
+            const glowMesh = entry.glowMesh;
+            if (ENABLE_WEBGL_GLOW && glowMesh && window.MindMapGlowShader) {
+                window.MindMapGlowShader.updateGlowSelection(glowMesh, isSelected);
+            }
+            // ▲▲▲ [Fix] ▲▲▲
+
+            if (bringToFront) {
+                bringNodeToFront(module, nodeId);
+            }
+
+            // Image nodes do not use textureCache/canvas generation logic below.
+            // They rely on the static TextureLoader map assigned at creation.
+            // So we return early to avoid overwriting the texture with a blank canvas.
+            return;
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+
+        // ▼▼▼ [Fix] Sync CSS3D selection glow/border with the node's active theme ▼▼▼
+        const cssElement = entry.cssObject?.element;
+        if (cssElement) {
+            const isEditing = !!(module.isEditingNote && module.selectedNodeIdJs === nodeId);
+            const shouldHighlight = !!(isSelected || isEditing);
+            const bubbleElement =
+                cssElement.querySelector('.map-node-note') ||
+                cssElement.querySelector('.map-node-memo') ||
+                cssElement.querySelector('.map-node-code') ||
+                cssElement.querySelector('.map-node-agent') ||
+                cssElement.querySelector('.map-node-bubble') ||
+                cssElement.querySelector('.map-node') ||
+                cssElement;
+
+            // Keep class-based styling in sync for CSS rules
+            if (bubbleElement?.classList) {
+                bubbleElement.classList.toggle('selected', !!shouldHighlight);
+            }
+
+            // Keep wrapper glow/pointer state in sync for all CSS3D nodes.
+            const contentType = String(entry.model?.contentType ?? entry.model?.ContentType ?? '').toLowerCase();
+            const isMemoNode = contentType === 'memo';
+            const isAgentLikeNode = isAgentNodeModel(entry.model);
+            const usesSafeMediaSelectionChrome = contentType === 'video' || contentType === 'embed';
+
+            if (cssElement.classList) {
+                cssElement.classList.toggle('selected', !usesSafeMediaSelectionChrome && !!shouldHighlight);
+                cssElement.classList.toggle('selected-media-safe', usesSafeMediaSelectionChrome && !!shouldHighlight);
+            }
+
+            if ((isMemoNode || isAgentStyledMemoNode(entry.model) || isAgentLikeNode) && window.MindMapCss3DManager?.applyMemoWrapperTheme) {
+                const themedRoot =
+                    cssElement.querySelector('.map-node-memo') ||
+                    cssElement.querySelector('.map-node-agent') ||
+                    cssElement;
+                window.MindMapCss3DManager.applyMemoWrapperTheme(
+                    themedRoot,
+                    String(entry.model?.metadata?.memoColor || entry.model?.Metadata?.memoColor || 'coral').toLowerCase()
+                );
+            }
+
+            // ▼▼▼ [NEW] 텍스트 기반 노드 선택 시 pointer-events 및 user-select 활성화 ▼▼▼
+            // - note/memo/code/agent 노드: 편집 모드(isEditing)에서만 텍스트 선택 가능
+            // - 일반 text/markdown 노드: 선택 시 텍스트 복사 가능
+            const isNoteNode = contentType === 'note';
+            const isEmbedNode = contentType === 'embed';
+            const isInlineEditableNode = isInlineEditableNodeModel(entry.model);
+            const isReadOnlyTextNode = isReadOnlyTextSelectionNodeModel(entry.model);
+            const isTextBased = isInlineEditableNode || isReadOnlyTextNode;
+
+            if (isEmbedNode && window.MindMapCss3DManager?.syncCss3dEmbedInteractivity) {
+                window.MindMapCss3DManager.syncCss3dEmbedInteractivity(entry.cssObject, {
+                    isInteractive: !!shouldHighlight
+                });
+            }
+
+            if (isTextBased) {
+                // 선택 시 래퍼는 클릭 가능해야 하고, 실제 입력 컨트롤은 편집 중에만 연다.
+                const shouldBeInteractive = isSelected || isEditing;
+
+                if (shouldBeInteractive) {
+                    cssElement.style.pointerEvents = 'auto';
+
+                    // 내부 콘텐츠 영역 pointer-events 활성화
+                    const contentEls = cssElement.querySelectorAll(NODE_INTERACTIVE_CONTENT_SELECTORS);
+                    contentEls.forEach(el => {
+                        const isMemoControl = isMemoNode && el.matches(MEMO_EDIT_ONLY_SELECTORS);
+                        if (isMemoControl && !isEditing) {
+                            el.style.pointerEvents = 'none';
+                            el.style.userSelect = 'none';
+                            el.style.webkitUserSelect = 'none';
+                            el.style.cursor = 'grab';
+                            return;
+                        }
+
+                        el.style.pointerEvents = 'auto';
+
+                        if (el.matches('.map-node-memo__icon-button, .map-node-memo__icon-option')) {
+                            el.style.userSelect = 'none';
+                            el.style.webkitUserSelect = 'none';
+                            el.style.cursor = 'pointer';
+                            return;
+                        }
+
+                        // ▼▼▼ [Fix] 노드 타입에 따라 텍스트 선택 허용 조건 분리 ▼▼▼
+                        // note/memo/code/agent 노드: 편집 모드에서만 텍스트 선택 허용
+                        // 일반 text/markdown 노드: 선택되면 텍스트 선택 허용 (복사를 위해)
+                        const allowTextSelection = isInlineEditableNode ? isEditing : isSelected;
+
+                        if (allowTextSelection) {
+                            el.style.userSelect = 'text';
+                            el.style.webkitUserSelect = 'text';
+                            el.style.cursor = 'text';
+                        } else {
+                            el.style.userSelect = 'none';
+                            el.style.webkitUserSelect = 'none';
+                            el.style.cursor = 'grab';
+                        }
+                        // ▲▲▲ [Fix] ▲▲▲
+                    });
+                } else {
+                    // 선택 해제 시: interaction 차단 + 텍스트 선택 비활성화
+                    cssElement.style.pointerEvents = 'none';
+                    const contentEls = cssElement.querySelectorAll(NODE_INTERACTIVE_CONTENT_SELECTORS);
+                    contentEls.forEach(el => {
+                        el.style.pointerEvents = 'none';
+                        el.style.userSelect = 'none';
+                        el.style.webkitUserSelect = 'none';
+                    });
+                    if (isMemoNode) {
+                        cssElement.querySelectorAll('.map-node-memo__icon-popover.is-open').forEach(popover => {
+                            popover.classList.remove('is-open');
+                        });
+                    }
+                }
+            }
+            // ▲▲▲ [NEW] ▲▲▲
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+
+        if (entry.isDeferredShell === true) {
+            if (bringToFront && entry.cssObject) {
+                bringNodeToFront(module, nodeId);
+            }
+
+            if (module.lodRenderer && typeof module.lodRenderer.updateInstanceSelection === 'function') {
+                module.lodRenderer.updateInstanceSelection(nodeId, isSelected);
+            }
+
+            return;
+        }
+
+        // ▼▼▼ [Fix] CSS3D 모드(HIGH)일 때 WebGL 겹침 방지 및 텍스처 생성 차단 ▼▼▼
+        if (entry.currentType === 'CSS') {
+            ensureNodeMeshCache(entry);
+            const isCssRendererActive = isCss3dRendererEnabledForModule(module);
+            // Image nodes should keep their WebGL body visible to prevent disappearance
+            if (entry.model?.contentType !== 'image') {
+                const bodyMesh = entry.bodyMesh;
+                const tailMesh = entry.tailMesh;
+                if (bodyMesh) {
+                    bodyMesh.visible = !isCssRendererActive && isMediaNodeModel(entry.model);
+                    if (!isCssRendererActive && isMediaNodeModel(entry.model) && bodyMesh.material) {
+                        if (entry.model?.contentType !== 'image' && bodyMesh.material.map) {
+                            bodyMesh.material.map = null;
+                        }
+                        const fallbackBodyHex = entry.model?.contentType === 'video'
+                            ? 0x0f172a
+                            : 0xf8fafc;
+                        bodyMesh.material.color?.setHex?.(fallbackBodyHex);
+                        bodyMesh.material.needsUpdate = true;
+                    }
+                }
+                if (tailMesh) tailMesh.visible = false;
+            }
+
+            // Glow는 업데이트 (선택 표시용) - WebGL Glow는 CSS3D 뒤에 깔려서 보임
+            const glowMesh = entry.glowMesh;
+            if (ENABLE_WEBGL_GLOW && glowMesh && window.MindMapGlowShader) {
+                window.MindMapGlowShader.updateGlowSelection(glowMesh, isSelected);
+            }
+
+            // Note 내용 동기화 (CSS3D가 활성이므로 여기서 처리)
+            if (!isSelected && entry.model.contentType === 'note' && entry.cssObject) {
+                const textarea = entry.cssObject.element?.querySelector('textarea');
+                if (textarea && textarea.value !== entry.model.response) {
+                    entry.model.response = textarea.value;
+                    window.MindMapTextLOD?.invalidateNodeCache?.(nodeId);
+                }
+            }
+
+            // ▼▼▼ [Optimization] CSS3D 모드에서 dirty면 sync ▼▼▼
+            if (entry.isCssDirty && window.MindMapCss3DManager?.syncCss3dContent) {
+                window.MindMapCss3DManager.syncCss3dContent(entry.model, entry.cssObject);
+                entry.isCssDirty = false;
+                if (isMediaNodeModel(entry.model)) {
+                    syncCss3dMediaFrameForEntry(module, nodeId, entry);
+                }
+            }
+            // ▲▲▲ [Optimization] ▲▲▲
+
+            // Z-Order 업데이트
+            if (bringToFront) {
+                bringNodeToFront(module, nodeId);
+            }
+
+            if (module.lodRenderer && typeof module.lodRenderer.updateInstanceSelection === 'function') {
+                module.lodRenderer.updateInstanceSelection(nodeId, isSelected);
+            }
+
+            return; // WebGL 텍스처 업데이트 중단
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+
+        // ▼▼▼ [Fix] Sync CSS3D textarea content to model before deselection ▼▼▼
+        // When deselecting a note node, the textarea may have newer content than model.response.
+        // This can happen if switchToWebGL set currentType='GL' but hasn't completed updateNodeContent yet.
+        // Sync from textarea regardless of currentType as long as cssObject exists and has a textarea.
+        if (!isSelected && entry.model.contentType === 'note' && entry.cssObject) {
+            const textarea = entry.cssObject.element?.querySelector('textarea');
+            if (textarea && textarea.value !== entry.model.response) {
+                log(`[updateNodeSelectionStyle] Syncing CSS3D textarea content for ${nodeId} (${textarea.value.length} chars)`);
+                entry.model.response = textarea.value;
+                // ★ Invalidate LOD cache so zoom-in will regenerate with new content
+                window.MindMapTextLOD?.invalidateNodeCache?.(nodeId);
+            }
+            // Ensure focus-within is cleared so selected styling doesn't stick
+            try { textarea?.blur(); } catch { }
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+
+        if (!textureCache.has(nodeId)) {
+            // [Refactor] Troika support removed. Using standard textures.
+            textureCache.set(nodeId, textures);
+        }
+
+        let textures = textureCache.get(nodeId);
+
+        // ▼▼▼ [Optimization B] On-demand selected texture creation ▼▼▼
+        if (isSelected && (!textures.selected.body || !textures.selected.tail)) {
+            log(`[updateNodeSelectionStyle] Creating selected textures on-demand for ${nodeId}`);
+            const t0 = performance.now();
+
+
+
+            // Canvas 모드: 기존 방식
+            const { textures: newTextures } = await window.MindMapTextureFactory.generateAndCacheTextures(
+                module,
+                entry.model,
+                imageCache,
+                { skipMeasure: true, skipSelected: false }
+            );
+            textures.selected = newTextures.selected;
+            textureCache.set(nodeId, textures);
+
+            const t1 = performance.now();
+            log(`[⏱️ Timing] On-demand selected texture for ${nodeId}: ${(t1 - t0).toFixed(1)}ms`);
+        }
+        // ▲▲▲ [Optimization B] ▲▲▲
+
+        // ▼▼▼ [Fix] Regenerate default texture only when content changed ▼▼▼
+        if (!isSelected && textures.default?.body) {
+            const cachedContent = textures.default._cachedContent ?? '';
+            const currentContent = entry.model.response ?? '';
+
+            const needsContentUpdate = cachedContent !== currentContent;
+
+            if (needsContentUpdate) {
+                log(`[updateNodeSelectionStyle] Regenerating default textures for ${nodeId} (content changed)`);
+                const t0 = performance.now();
+
+                const { textures: newTextures } = await window.MindMapTextureFactory.generateAndCacheTextures(
+                    module,
+                    entry.model,
+                    imageCache,
+                    { skipMeasure: true, skipSelected: true }
+                );
+                // Dispose old default textures
+                try { if (!textures.default.body?._isShared) textures.default.body?.dispose(); } catch { }
+                try { if (!textures.default.tail?._isShared) textures.default.tail?.dispose(); } catch { }
+                textures.default = newTextures.default;
+                textures.default._cachedContent = currentContent;
+                textureCache.set(nodeId, textures);
+
+                const t1 = performance.now();
+                log(`[⏱️ Timing] On-demand default texture regeneration for ${nodeId}: ${(t1 - t0).toFixed(1)}ms`);
+            }
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+
+        const active = isSelected ? textures.selected : textures.default;
+
+        ensureNodeMeshCache(entry);
+        const bodyMesh = entry.bodyMesh;
+        const tailMesh = entry.tailMesh;
+        const outline = entry.glObject.getObjectByName('outline');
+
+        if (outline) {
+            outline.visible = false; // Disabled - using SDF glow instead
+        }
+        if (bodyMesh && bodyMesh.material) {
+            bodyMesh.material.map = active.body;
+            bodyMesh.material.needsUpdate = true;
+        }
+        if (tailMesh && tailMesh.material) {
+            tailMesh.material.map = active.tail;
+            tailMesh.material.needsUpdate = true;
+        }
+
+        const glowMesh = entry.glowMesh;
+        if (ENABLE_WEBGL_GLOW && glowMesh && window.MindMapGlowShader) {
+            window.MindMapGlowShader.updateGlowSelection(glowMesh, isSelected);
+        }
+
+        // ▼▼▼ [Fix] Update SDF body borderColor for Troika code nodes ▼▼▼
+        if (bodyMesh && bodyMesh.material && bodyMesh.material.uniforms && bodyMesh.material.uniforms.borderColor) {
+            bodyMesh.material.uniforms.borderColor.value.setHex(getSelectionBorderColorHex(entry.model, isSelected));
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+
+        // ▼▼▼ [FIX] Update LOD InstancedMesh selection state immediately ▼▼▼
+        if (module.lodRenderer && typeof module.lodRenderer.updateInstanceSelection === 'function') {
+            module.lodRenderer.updateInstanceSelection(nodeId, isSelected);
+        }
+        // ▲▲▲ [FIX] ▲▲▲
+
+        if (bringToFront) {
+            bringNodeToFront(module, nodeId);
+            // ▼▼▼ [Fix] Keep Z position stable to align with grid (avoid perspective lift) ▼▼▼
+            // renderOrder is sufficient for draw order without shifting world Z.
+            // ▲▲▲ [Fix] ▲▲▲
+        }
+    }
+
+    function refreshLodSelectionState(module, changedIds = null) {
+        const lodRenderer = module?.lodRenderer;
+        if (!lodRenderer || lodRenderer.isInLODMode !== true) {
+            if (module) {
+                const currentIds = new Set();
+                if (module.selectedNodeIdJs) {
+                    currentIds.add(module.selectedNodeIdJs);
+                }
+                module.multiSelectedNodeIds?.forEach?.((id) => {
+                    if (id) {
+                        currentIds.add(id);
+                    }
+                });
+                module._lastLodSelectionIds = currentIds;
+            }
+            return;
+        }
+
+        const currentIds = new Set();
+        if (module.selectedNodeIdJs) {
+            currentIds.add(module.selectedNodeIdJs);
+        }
+        module.multiSelectedNodeIds?.forEach?.((id) => {
+            if (id) {
+                currentIds.add(id);
+            }
+        });
+
+        let idsToRefresh = [];
+        if (Array.isArray(changedIds) && changedIds.length > 0) {
+            idsToRefresh = changedIds
+                .map(id => String(id || '').trim())
+                .filter(Boolean);
+        } else {
+            const previousIds = module._lastLodSelectionIds instanceof Set
+                ? module._lastLodSelectionIds
+                : new Set();
+            idsToRefresh = Array.from(new Set([...previousIds, ...currentIds]));
+        }
+
+        for (let i = 0; i < idsToRefresh.length; i++) {
+            const id = idsToRefresh[i];
+            lodRenderer.updateInstanceSelection?.(id, currentIds.has(id));
+        }
+
+        module._lastLodSelectionIds = currentIds;
+        const primarySelectionId = module.selectedNodeIdJs || '';
+        const multiSelectedIds = module.multiSelectedNodeIds;
+        if (!multiSelectedIds || multiSelectedIds.size === 0) {
+            lodRenderer._lastAppliedLodSelectionKey = primarySelectionId;
+        } else if (multiSelectedIds.size === 1) {
+            const onlyId = Array.from(multiSelectedIds)[0] || '';
+            lodRenderer._lastAppliedLodSelectionKey = `${primarySelectionId}|${onlyId}`;
+        } else {
+            lodRenderer._lastAppliedLodSelectionKey = `${primarySelectionId}|${Array.from(multiSelectedIds).sort().join(',')}`;
+        }
+        module._forceUpdateFrames = Math.max(module._forceUpdateFrames || 0, 1);
+    }
+
+    function refreshSelectionOverlayState(module, forceFrames = 2) {
+        if (!module) return;
+
+        module._deferPassiveOverlayRefresh = false;
+        module._overlayDirty = true;
+        module._forceUpdateFrames = Math.max(Number(module._forceUpdateFrames || 0), forceFrames);
+
+        const isMotionInteraction =
+            module.isZooming === true ||
+            module.isPanning === true ||
+            module.isResizing === true ||
+            module.isDraggingNode === true ||
+            module.isDraggingMultipleNodes === true ||
+            module.isWindowResizing === true;
+        if (!isMotionInteraction) {
+            module._cameraNavigationOverlayInputTime = 0;
+            module._passiveOverlayResumeAt = 0;
+            window.MindMapTextOverlayV2?.setPassiveOverlaySuppressed?.(module, false);
+        }
+
+        window.MindMapTextOverlayV2?.invalidateView?.(module);
+    }
+
+    // ▼▼▼ [New] Single selection unified path ▼▼▼
+    function applySingleSelection(module, newNodeId, options = {}) {
+        if (!module) return;
+
+        const { notifyBlazor = true, bringToFront = true } = options;
+        const oldNodeId = module.selectedNodeIdJs || null;
+
+        if (oldNodeId && oldNodeId !== newNodeId) {
+            updateNodeSelectionStyle(module, oldNodeId, false, false, true);
+        }
+
+        // ▼▼▼ [Fix] 다중 선택된 노드들의 스타일도 함께 초기화 ▼▼▼
+        if (typeof clearMultiSelection === 'function') {
+            clearMultiSelection(module, newNodeId); // Clears others and updates styles
+        } else {
+            module.multiSelectedNodeIds?.clear?.();
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+        if (newNodeId) {
+            module.multiSelectedNodeIds?.add?.(newNodeId);
+            module.selectedNodeIdJs = newNodeId;
+            if (bringToFront) {
+                // Selection styling is scheduled, but stack order must update before
+                // overlay/CSS3D overlap filtering runs on the next frame.
+                bringNodeToFront(module, newNodeId);
+            }
+            updateNodeSelectionStyle(module, newNodeId, true, false, true);
+        } else {
+            module.selectedNodeIdJs = null;
+        }
+
+        if (notifyBlazor && module.dotNetHelper) {
+            try { module.dotNetHelper.invokeMethodAsync('SelectNodeInBlazor', newNodeId); } catch { }
+        }
+
+        const changedIds = [];
+        if (oldNodeId && oldNodeId !== newNodeId) {
+            changedIds.push(oldNodeId);
+        }
+        if (newNodeId) {
+            changedIds.push(newNodeId);
+        }
+        refreshLodSelectionState(module, changedIds);
+        refreshSelectionOverlayState(module);
+    }
+    // ▲▲▲ [New] ▲▲▲
+
+    function clearMultiSelection(module, keepId = null) {
+        const toDeselect = Array.from(module.multiSelectedNodeIds).filter(id => id !== keepId);
+        toDeselect.forEach(id => updateNodeSelectionStyle(module, id, false, false, true));
+        if (keepId) {
+            module.multiSelectedNodeIds = new Set([keepId]);
+            module.selectedNodeIdJs = keepId;
+        } else {
+            module.multiSelectedNodeIds.clear();
+            module.selectedNodeIdJs = null;
+        }
+
+        // ▼▼▼ [Fix] Force LOD renderer to rebuild instances so selection borders update in MID/FAR ▼▼▼
+        refreshLodSelectionState(module);
+        // ▲▲▲ [Fix] ▲▲▲
+        refreshSelectionOverlayState(module);
+    }
+
+    function resetState(module) {
+        try {
+            textureCache.forEach(t => {
+                try { if (!t.default.body?._isShared) t.default.body?.dispose(); } catch { }
+                try { if (!t.selected.body?._isShared) t.selected.body?.dispose(); } catch { }
+                try { t.glow?.texture?.dispose(); } catch { }
+            });
+        } catch { }
+        textureCache.clear();
+        imageCache.clear();
+        failedImageUrlCache.clear();
+        window.MindMapTextureFactory.clearCache();
+        nodeRenderLocks.clear();
+        pendingNodeUpdates.clear();
+        totalTextureMemoryBytes = 0;
+
+        if (module) {
+            try { module.nodeObjectsById.clear(); } catch { }
+            try { module.spatialGrid.clear(); } catch { }
+            try { module.multiSelectedNodeIds.clear(); } catch { }
+            try { module.pendingSelectedActivationNodeIds?.clear?.(); } catch { }
+            module.selectedNodeIdJs = null;
+            module.lodUpdateQueue = [];
+        }
+    }
+
+    async function switchToCss3D(module, nodeId) {
+        const nodeEntry = module.nodeObjectsById.get(nodeId);
+        // ▼▼▼ [Log] Reason for skipping switch (SwitchToCss3D) ▼▼▼
+        const supportedTypes = ['note', 'memo', 'code', 'text', 'markdown', 'image', 'video', 'embed'];
+        if (!nodeEntry || !supportedTypes.includes(nodeEntry.model.contentType) || !nodeEntry.cssObject) {
+            log(`[MindMapNodes] SwitchToCss3D(${nodeId}) SKIPPED (Not a valid, initialized text-based node).`);
+            return;
+        }
+        // ▼▼▼ [New] Loading 상태에서는 CSS3D로 전환하지 않음 (WebGL 모드 유지) ▼▼▼
+        const modelIsLoading = nodeEntry.model.isLoading ?? nodeEntry.model.IsLoading ?? false;
+        const isMediaNode = nodeEntry.model.contentType === 'image' || nodeEntry.model.contentType === 'video' || nodeEntry.model.contentType === 'embed';
+        if (modelIsLoading && !isMediaNode) {
+            log(`[MindMapNodes] SwitchToCss3D(${nodeId}) SKIPPED (Node is still loading).`);
+            return;
+        }
+        // ▲▲▲ [New] ▲▲▲
+        if (nodeEntry.currentType === 'CSS') {
+            log(`[MindMapNodes] SwitchToCss3D(${nodeId}) SKIPPED (Already in CSS mode).`);
+            return;
+        }
+        log(`[MindMapNodes] Switching node ${nodeId} to CSS3D mode`);
+        // ▲▲▲ [Log] ▲▲▲
+
+        const glPos = nodeEntry.glObject.position;
+        nodeEntry.cssObject.position.copy(glPos);
+
+        // ▼▼▼ [Fix] Sync CSS3D element size with current model dimensions ▼▼▼
+        const model = nodeEntry.model;
+        const wrapper = nodeEntry.cssObject.element;
+        const resolutionScale = nodeEntry.cssObject.userData?.resolutionScale || 1;
+        const modelWidth = Number(model.width ?? model.Width ?? 400);
+        const modelHeight = Number(model.height ?? model.Height ?? 200);
+        if (isMediaNode) {
+            syncCss3dMediaFrameForEntry(module, nodeId, nodeEntry);
+        } else if (wrapper) {
+            wrapper.style.width = `${modelWidth * resolutionScale}px`;
+            wrapper.style.height = `${modelHeight * resolutionScale}px`;
+
+            // Also update inner content element if exists
+            const innerContent = wrapper.firstElementChild;
+            if (innerContent) {
+                innerContent.style.width = `${modelWidth}px`;
+                innerContent.style.height = `${modelHeight}px`;
+                innerContent.style.transform = `scale(${resolutionScale})`;
+                innerContent.style.transformOrigin = '0 0';
+            }
+
+            // Update textarea size as well
+            const textarea = wrapper.querySelector('textarea');
+            if (textarea) {
+                textarea.style.width = '100%';
+                textarea.style.height = '100%';
+            }
+
+            log(`[MindMapNodes] CSS3D size synced: ${modelWidth}x${modelHeight}px (scale=${resolutionScale})`);
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+
+        if (nodeEntry.glObject) {
+            ensureNodeMeshCache(nodeEntry);
+            nodeEntry.glObject.visible = true;
+            const body = nodeEntry.bodyMesh;
+            const tail = nodeEntry.tailMesh;
+            if (body) body.visible = shouldShowImageBodyInCssMode(nodeEntry.model);
+            if (tail) tail.visible = false;
+            nodeEntry.glObject.children?.forEach?.(child => {
+                if (child?.userData?.isResizeHandle) {
+                    child.visible = false;
+                    child.scale?.setScalar?.(1.0);
+                }
+            });
+            if (isMediaNode) {
+                ['outline', 'imageMidGlow', 'imageMidEdge', 'glow'].forEach(name => {
+                    const decoration = nodeEntry.glObject.getObjectByName?.(name);
+                    if (!decoration) return;
+                    decoration.visible = false;
+                    if (decoration.material) {
+                        decoration.material.opacity = 0;
+                        decoration.material.needsUpdate = true;
+                    }
+                });
+            }
+        }
+
+        nodeEntry.cssObject.visible = true;
+
+        // ▼▼▼ [Optimization] dirty 체크 후 필요시에만 sync ▼▼▼
+        if (nodeEntry.isCssDirty && window.MindMapCss3DManager?.syncCss3dContent) {
+            window.MindMapCss3DManager.syncCss3dContent(nodeEntry.model, nodeEntry.cssObject);
+            nodeEntry.isCssDirty = false;
+            if (isMediaNode) {
+                syncCss3dMediaFrameForEntry(module, nodeId, nodeEntry);
+            }
+        }
+        // ▲▲▲ [Optimization] ▲▲▲
+
+        // ▼▼▼ [Fix] 다른 노드들의 텍스트 선택을 비활성화하여 선택 번짐 방지 ▼▼▼
+        module.nodeObjectsById.forEach((otherEntry, otherId) => {
+            if (otherId === nodeId) return; // 현재 노드는 건너뛰기
+            if (!otherEntry.cssObject?.element) return;
+
+            const otherWrapper = otherEntry.cssObject.element;
+            // 다른 노드들의 텍스트 선택 비활성화
+            const contentEls = otherWrapper.querySelectorAll(NODE_TEXT_SELECTION_SELECTORS);
+            contentEls.forEach(el => {
+                el.style.userSelect = 'none';
+                el.style.webkitUserSelect = 'none';
+            });
+        });
+        // ▲▲▲ [Fix] ▲▲▲
+
+        // ▼▼▼ [Fix] 현재 노드의 텍스트 선택 활성화 ▼▼▼
+        const currentWrapper = nodeEntry.cssObject.element;
+        if (currentWrapper) {
+            const contentEls = currentWrapper.querySelectorAll(NODE_TEXT_SELECTION_SELECTORS);
+            contentEls.forEach(el => {
+                el.style.userSelect = 'text';
+                el.style.webkitUserSelect = 'text';
+            });
+        }
+        // ▲▲▲ [Fix] ▲▲▲
+
+        // Sync CSS3D scroll position with WebGL/model scrollOffset (ratio-based).
+        const textareaEl = nodeEntry.cssObject.element.querySelector('textarea');
+        if (nodeEntry.cssObject?.element) {
+            setTimeout(() => {
+                if (textareaEl) {
+                    textareaEl.focus({ preventScroll: true });
+                }
+
+                const synced = window.MindMapCss3DManager?.syncCss3dScrollFromModel?.(module, nodeId, {
+                    source: 'switchToCss3D'
+                }) === true;
+                if (synced || !textareaEl) {
+                    return;
+                }
+
+                // Fallback for older note editing surfaces.
+                const maxScroll = nodeEntry.model.maxScroll || 1;
+                const scrollOffset = nodeEntry.model.scrollOffset || 0;
+                const scrollRatio = maxScroll > 0 ? (scrollOffset / maxScroll) : 0;
+
+                const maxCssScroll = textareaEl.scrollHeight - textareaEl.clientHeight;
+                const targetScrollTop = Math.round(scrollRatio * maxCssScroll);
+
+                textareaEl.scrollTop = targetScrollTop;
+                log(`[MindMapNodes] CSS3D scroll synced: ratio=${scrollRatio.toFixed(2)}, scrollTop=${targetScrollTop}px`);
+            }, 50);
+        }
+
+        nodeEntry.currentType = 'CSS';
+        setNodeScrollbarVisibility(nodeEntry, false);
+        log(`[MindMapNodes]   ✓ Node ${nodeId} is now in CSS3D mode`);
+    }
+
+    async function switchToWebGL(module, nodeId) {
+        const nodeEntry = module.nodeObjectsById.get(nodeId);
+        // ▼▼▼ [Log] Reason for skipping switch (SwitchToWebGL) ▼▼▼
+        if (!nodeEntry || !nodeEntry.cssObject) {
+            // Note: contentType check removed here to allow generic handling if needed, 
+            // but usually this is for text/note/markdown.
+            return;
+        }
+
+        // ▼▼▼ [Changed] HIGH 모드(CSS3D 유효 구간)에서는 WebGL로 전환 금지 ▼▼▼
+        const cameraZ = module.camera?.position?.z || 0;
+        const threshold = 4000;
+        if (cameraZ < threshold) {
+            const supportsCss3d = nodeEntry.model.contentType === 'text' ||
+                nodeEntry.model.contentType === 'note' ||
+                nodeEntry.model.contentType === 'memo' ||
+                nodeEntry.model.contentType === 'markdown' ||
+                nodeEntry.model.contentType === 'code' ||
+                nodeEntry.model.contentType === 'image' ||
+                nodeEntry.model.contentType === 'video' ||
+                nodeEntry.model.contentType === 'embed';
+            if (supportsCss3d) {
+                console.log(`[MindMapNodes] SwitchToWebGL(${nodeId}) SKIPPED (HIGH Mode - Keeping CSS3D).`);
+                return;
+            }
+        }
+        // ▲▲▲ [Changed] ▲▲▲
+
+        if (nodeEntry.currentType === 'GL') {
+            log(`[MindMapNodes] SwitchToWebGL(${nodeId}) SKIPPED (Already in GL mode).`);
+            return;
+        }
+        log(`[MindMapNodes] Switching node ${nodeId} to WebGL mode`);
+        // ▲▲▲ [Log] ▲▲▲
+
+        if (nodeEntry.isDeferredShell === true) {
+            await ensureDeferredNodeMaterialized(module, nodeEntry, { attachToScene: true });
+        }
+
+        // Store CSS3D textarea scroll ratio into WebGL scrollOffset
+        const textarea = nodeEntry.cssObject.element.querySelector('textarea');
+        if (textarea) {
+            // Compute CSS3D scroll ratio
+            const maxCssScroll = textarea.scrollHeight - textarea.clientHeight;
+            const cssScrollTop = textarea.scrollTop || 0;
+            const scrollRatio = maxCssScroll > 0 ? (cssScrollTop / maxCssScroll) : 0;
+
+            // Apply ratio to WebGL maxScroll to compute scrollOffset
+            const maxScroll = nodeEntry.model.maxScroll || 0;
+            const newScrollOffset = Math.round(scrollRatio * maxScroll);
+
+            if (nodeEntry.model.scrollOffset !== newScrollOffset) {
+                nodeEntry.model.scrollOffset = newScrollOffset;
+                log(`[MindMapNodes] WebGL scroll synced: ratio=${scrollRatio.toFixed(2)}, scrollOffset=${newScrollOffset}px`);
+            }
+
+            if (nodeEntry.model.response !== textarea.value) {
+                // ▼▼▼ [Log] Data sync log ▼▼▼
+                log(`[MindMapNodes]   -> Content updated from textarea (Length: ${textarea.value.length})`);
+                // ▲▲▲ [Log] ▲▲▲
+                nodeEntry.model.response = textarea.value;
+            }
+        }
+
+        const resolutionScale = nodeEntry.cssObject.userData?.resolutionScale || 1;
+        const rawWidth = parseFloat(nodeEntry.cssObject.element.style.width) || nodeEntry.model.width;
+        const rawHeight = parseFloat(nodeEntry.cssObject.element.style.height) || nodeEntry.model.height;
+        const newWidth = rawWidth / resolutionScale;
+        const newHeight = rawHeight / resolutionScale;
+
+        // ▼▼▼ [Log] Data sync log ▼▼▼
+        if (newWidth !== nodeEntry.model.width || newHeight !== nodeEntry.model.height) {
+            log(`[MindMapNodes]   -> Dimensions updated from CSS (${newWidth}x${newHeight})`);
+        }
+        // ▲▲▲ [Log] ▲▲▲
+        nodeEntry.model.width = newWidth;
+        nodeEntry.model.height = newHeight;
+        if (nodeEntry.cssObject?.userData) {
+            nodeEntry.cssObject.userData.worldWidth = newWidth;
+            nodeEntry.cssObject.userData.worldHeight = newHeight;
+        }
+
+        const cssPos = nodeEntry.cssObject.position;
+        // [Fix] Force Z=0 to eliminate parallax
+        nodeEntry.glObject.position.set(cssPos.x, cssPos.y, 0);
+        if (nodeEntry.glObject) {
+            ensureNodeMeshCache(nodeEntry);
+            nodeEntry.glObject.visible = true;
+            const body = nodeEntry.bodyMesh;
+            const tail = nodeEntry.tailMesh;
+            if (body) body.visible = true;
+            if (tail) tail.visible = true;
+            setNodeScrollbarVisibility(nodeEntry, Number(nodeEntry.model?.maxScroll || 0) > 0);
+        }
+
+        nodeEntry.currentType = 'GL';
+        log(`[MindMapNodes]   ✓ Node ${nodeId} is now in WebGL mode`);
+
+        await updateNodeContent(module, nodeId, nodeEntry.model.response, nodeEntry.model.width, nodeEntry.model.height);
+    }
+
+    // ▼▼▼ [New] Update node content type (used for converting text to note) ▼▼▼
+    async function updateNodeContentType(module, nodeId, newContentType) {
+        const nodeEntry = module.nodeObjectsById.get(nodeId);
+        if (!nodeEntry) {
+            console.warn(`[MindMapNodes] updateNodeContentType: Node not found: ${nodeId}`);
+            return;
+        }
+
+        const model = nodeEntry.model;
+        const oldContentType = model.contentType;
+
+        log(`[MindMapNodes] Updating node ${nodeId} content type: ${oldContentType} -> ${newContentType}`);
+
+        // Store current position and data
+        const position = nodeEntry.glObject.position.clone();
+        const nodeData = {
+            id: model.id,
+            contentType: newContentType,
+            prompt: model.prompt,
+            response: model.response,
+            positionX: position.x,
+            positionY: position.y,
+            positionZ: position.z,
+            width: model.width ?? model.Width,
+            height: model.height ?? model.Height,
+            isLoading: false,
+            isAiEnabled: model.isAiEnabled,
+            scrollOffset: model.scrollOffset || 0,
+            maxScroll: model.maxScroll || 0,
+            isChunkedText: model.isChunkedText,
+            totalLineCount: model.totalLineCount,
+            sourceFilePath: model.sourceFilePath,
+            metadata: model.metadata ? { ...model.metadata } : {}
+        };
+
+        // Remove old node
+        removeNode(module, nodeId);
+
+        // Ensure node is fully removed from the map
+        if (module.nodeObjectsById.has(nodeId)) {
+            console.warn(`[MindMapNodes] Node ${nodeId} still in map after removeNode, force deleting...`);
+            module.nodeObjectsById.delete(nodeId);
+        }
+
+        // Wait for a frame to ensure cleanup is complete
+        await waitForNonVisualFrame();
+
+        // Add new node with updated content type
+        log(`[MindMapNodes] Re-adding node ${nodeId} with type ${newContentType}`);
+        await addNode(module, nodeData);
+
+        // If converting to note, switch to CSS3D mode for editing
+        if (newContentType === 'note') {
+            // Wait for node to be fully created
+            await new Promise(resolve => setTimeout(resolve, 150));
+
+            const newEntry = module.nodeObjectsById.get(nodeId);
+            log(`[MindMapNodes] Checking for CSS3D object: exists=${!!newEntry}, hasCssObject=${!!newEntry?.cssObject}`);
+
+            if (newEntry && newEntry.cssObject) {
+                await switchToCss3D(module, nodeId);
+                // Focus the textarea
+                const textarea = newEntry.cssObject.element?.querySelector('textarea');
+                if (textarea) {
+                    textarea.focus();
+                    log(`[MindMapNodes] Focused textarea for node ${nodeId}`);
+                }
+            } else {
+                console.warn(`[MindMapNodes] CSS3D object not ready for node ${nodeId}`);
+            }
+        }
+
+        log(`[MindMapNodes] Node ${nodeId} content type updated successfully`);
+    }
+    // ▲▲▲ [New] ▲▲▲
+
+    // ▼▼▼ [New] Update Troika scroll for code nodes ▼▼▼
+    /**
+     * Update scroll position for Troika code nodes
+     * @param {Object} module - MindMap module
+     * @param {Object} nodeEntry - Node entry from nodeObjectsById
+     * @param {number} scrollOffset - New scroll offset
+     */
+    function updateTroikaScroll(module, nodeEntry, scrollOffset) {
+        if (!nodeEntry || !nodeEntry.glObject) return;
+
+        // Find Troika text mesh in glObject
+        const troikaText = nodeEntry.glObject.userData?.troikaText;
+        if (!troikaText || !troikaText.userData) return;
+
+        const ud = troikaText.userData;
+        const padding = ud.padding || 16;
+        const visibleHeight = ud.visibleHeight || (nodeEntry.model.height - padding * 2);
+        const textWidth = ud.textWidth || (nodeEntry.model.width - padding * 2);
+        const initialY = ud.initialY || -padding;
+
+        // Update scroll state
+        ud.scrollY = Math.max(0, scrollOffset);
+
+        // 1. Move text position UP by scrollY
+        troikaText.position.y = initialY + ud.scrollY;
+
+        // 2. Shift clipRect DOWN to compensate (keep visible window at node top)
+        const clipTop = -ud.scrollY;
+        const clipBottom = -ud.scrollY - visibleHeight;
+        troikaText.clipRect = [0, clipBottom, textWidth, clipTop];
+
+        troikaText.sync();
+
+        // 3. Update scrollbar thumb position (ShapeGeometry anchor is top-left, not center)
+        const scrollbarThumb = nodeEntry.glObject.getObjectByName('scrollbarThumb');
+        if (scrollbarThumb && nodeEntry.model.maxScroll > 0) {
+            const thumbData = scrollbarThumb.userData;
+            const scrollRatio = ud.scrollY / nodeEntry.model.maxScroll;
+            const thumbTravel = thumbData.trackHeight - thumbData.thumbHeight;
+            const thumbY = -thumbData.topMargin - (scrollRatio * thumbTravel);
+            scrollbarThumb.position.y = thumbY;
+        }
+
+        log(`[updateTroikaScroll] Node ${nodeEntry.model.id}: scrollY=${ud.scrollY}, clipRect=[0, ${clipBottom.toFixed(0)}, ${textWidth}, ${clipTop.toFixed(0)}]`);
+    }
+    // ▲▲▲ [New] ▲▲▲
+
+    // Expose MindMapNodes globally
+    window.MindMapNodes = {
+        // Module state (helper modules need access)
+        get textureCache() { return textureCache; },
+        set textureCache(value) {
+            textureCache = value instanceof Map ? value : new Map();
+            totalTextureMemoryBytes = estimateTextureCacheMemoryBytes(textureCache);
+        },
+        get imageCache() { return imageCache; },
+        set imageCache(value) {
+            imageCache = value instanceof Map ? value : new Map();
+        },
+        get nodeRenderLocks() { return nodeRenderLocks; },
+        set nodeRenderLocks(value) {
+            nodeRenderLocks = value instanceof Map ? value : new Map();
+        },
+        get pendingNodeUpdates() { return pendingNodeUpdates; },
+        set pendingNodeUpdates(value) {
+            pendingNodeUpdates = value instanceof Map ? value : new Map();
+        },
+        get totalTextureMemoryBytes() { return totalTextureMemoryBytes; },
+        set totalTextureMemoryBytes(value) {
+            const nextValue = Number(value);
+            totalTextureMemoryBytes = Number.isFinite(nextValue)
+                ? Math.max(0, nextValue)
+                : estimateTextureCacheMemoryBytes(textureCache);
+        },
+
+        // Public API
+        addNode: addNode,
+        removeNode: removeNode,
+        removeNodes: removeNodes,
+        updateNodeContent: updateNodeContent,
+        clearMultiSelection: clearMultiSelection,
+        refreshLodSelectionState: refreshLodSelectionState,
+        bringNodeToFront: bringNodeToFront,
+        updateNodeSelectionStyle: updateNodeSelectionStyle,
+        applySingleSelection: applySingleSelection,
+        resetState: resetState,
+        captureDeleteSnapshot: captureDeleteSnapshot,
+        // ▼▼▼ [New] Expose helper function for external callers ▼▼▼
+        getNodeWorldBounds: getNodeWorldBounds,
+        updateNodeSpatialGrid: updateNodeSpatialGrid,
+        applyImageCoverUv: applyImageCoverUv,
+        syncImageNodeBodyTexture: syncImageNodeBodyTexture,
+        updateAnimatedImageStatusTextures: updateAnimatedImageStatusTextures,
+        applyCanonicalNodeResponse: applyCanonicalNodeResponse,
+        isGeneratedImageNodeModel: isGeneratedImageNodeModel,
+        isAnimatedGifImageNodeModel: isAnimatedGifImageNodeModel,
+        getNodeImageAssetUrls: getNodeImageAssetUrls,
+        setNodeImageOriginalUrl: setNodeImageOriginalUrl,
+        setNodeImagePreviewUrl: setNodeImagePreviewUrl,
+        clearImageBodyTexture: clearImageBodyTexture,
+        shouldUseCssImageLoadingOverlay: shouldUseCssImageLoadingOverlay,
+        shouldShowImageBodyInCssMode: shouldShowImageBodyInCssMode,
+        ensureNodeImageUsesPreviewResponse: ensureNodeImageUsesPreviewResponse,
+        markNodeImageAssetMissing: markNodeImageAssetMissing,
+        syncImageMidLodDecorations: syncImageMidLodDecorations,
+        setNodeScrollbarVisibility: setNodeScrollbarVisibility,
+        estimateTextureCacheMemoryBytes: estimateTextureCacheMemoryBytes,
+        getCacheStats: getRuntimeCacheStats,
+        replaceRuntimeCaches: replaceRuntimeCaches,
+        // ▲▲▲ [New] ▲▲▲
+        // ▼▼▼ [New] Troika scroll update ▼▼▼
+        updateTroikaScroll: updateTroikaScroll,
+        // ▲▲▲ [New] ▲▲▲
+        switchToCss3D: switchToCss3D,
+        switchToWebGL: switchToWebGL,
+        // ▼▼▼ [New] Convert node content type ▼▼▼
+        updateNodeContentType: updateNodeContentType,
+        // ▲▲▲ [New] ▲▲▲
+
+        // ▼▼▼ [New] Text Render Mode API ▼▼▼
+        /**
+         * Get current text rendering mode
+         * @returns {'canvas'|'troika'}
+         */
+        getTextRenderMode: () => TEXT_RENDER_MODE,
+
+        /**
+         * Set text rendering mode
+         * @param {'canvas'|'troika'} mode
+         */
+        setTextRenderMode: (mode) => {
+            if (mode === 'canvas' || mode === 'troika') {
+                TEXT_RENDER_MODE = mode;
+                console.log(`[MindMapNodes] Text render mode changed to: ${mode}`);
+            } else {
+                console.warn(`[MindMapNodes] Invalid render mode: ${mode}. Use 'canvas' or 'troika'.`);
+            }
+        },
+
+        /**
+         * Check if Troika rendering is available
+         * @returns {boolean}
+         */
+        isTroikaAvailable: () => window.MindMapTroikaText?.isTroikaReady() || false,
+        // ▲▲▲ [New] ▲▲▲
+
+        // ▼▼▼ [New] Word wrap toggle for code nodes ▼▼▼
+        /**
+         * Update word wrap setting for a code node (Troika text)
+         * @param {Object} module - MindMap module
+         * @param {string} nodeId - Node ID
+         * @param {boolean} isWordWrap - Whether to wrap text
+         */
+        updateNodeWordWrap: (module, nodeId, isWordWrap) => {
+            const nodeEntry = module?.nodeObjectsById?.get(nodeId);
+            if (!nodeEntry) {
+                console.warn(`[MindMapNodes] updateNodeWordWrap: Node ${nodeId} not found`);
+                return;
+            }
+
+            // ▼▼▼ [FIX] CSS3D Mode Handling (Priority) ▼▼▼
+            if (nodeEntry.cssObject && nodeEntry.cssObject.element) {
+                // Try to find the content element (code-body for code nodes, or generic response)
+                const textElement = nodeEntry.cssObject.element.querySelector('.code-body') ||
+                    nodeEntry.cssObject.element.querySelector('.node-response') ||
+                    nodeEntry.cssObject.element.querySelector('textarea');
+
+                if (textElement) {
+                    console.log(`[MindMapNodes] Updating CSS3D word wrap for ${nodeId}: ${isWordWrap}`);
+                    if (isWordWrap) {
+                        textElement.style.whiteSpace = 'pre-wrap';
+                        textElement.style.wordWrap = 'break-word'; // legacy support
+                        textElement.style.overflowWrap = 'break-word';
+                        textElement.style.overflowX = 'hidden'; // No horizontal scroll needed
+                    } else {
+                        textElement.style.whiteSpace = 'pre';
+                        textElement.style.wordWrap = 'normal';
+                        textElement.style.overflowWrap = 'normal';
+                        textElement.style.overflowX = 'auto'; // Enable horizontal scroll
+                    }
+                    // Continue to Troika check in case it's a hybrid node, or return?
+                    // Usually returning here is safe if we are purely in CSS3D mode for Code nodes.
+                    // But if fallback WebGL text exists, we might want to update that too (though it's likely hidden).
+                    // Let's allow fall-through but don't warn if Troika is missing.
+                }
+            }
+            // ▲▲▲ [FIX] ▲▲▲
+
+            // Find Troika text mesh in the GL object
+            const glObject = nodeEntry.glObject;
+            if (!glObject) return;
+
+            let troikaText = null;
+            glObject.traverse((child) => {
+                if (child.isTroikaText) {
+                    troikaText = child;
+                }
+            });
+
+            if (!troikaText) {
+                // If we already handled CSS3D, don't warn about missing Troika
+                if (!nodeEntry.cssObject) {
+                    console.warn(`[MindMapNodes] updateNodeWordWrap: No Troika text found for ${nodeId}`);
+                }
+                if (window.MindMapTextOverlayV2?.invalidateNode) {
+                    window.MindMapTextOverlayV2.invalidateNode(module, nodeId, 'layout');
+                }
+                return;
+            }
+
+            // Update Troika text properties
+            const padding = 16;
+            const nodeWidth = nodeEntry.model.width || 470;
+
+            if (isWordWrap) {
+                // Enable word wrap
+                troikaText.whiteSpace = 'pre-wrap';
+                troikaText.overflowWrap = 'break-word';
+                troikaText.maxWidth = nodeWidth - (padding * 2);
+            } else {
+                // Disable word wrap - allow horizontal overflow
+                troikaText.whiteSpace = 'pre';
+                troikaText.overflowWrap = 'normal';
+                troikaText.maxWidth = Infinity;
+            }
+
+            // Trigger re-render
+            troikaText.sync();
+
+            if (window.MindMapTextOverlayV2?.invalidateNode) {
+                window.MindMapTextOverlayV2.invalidateNode(module, nodeId, 'layout');
+            }
+
+            console.log(`[MindMapNodes] Troika Word wrap updated for ${nodeId}: ${isWordWrap}, maxWidth: ${troikaText.maxWidth}`);
+        }
+        // ▲▲▲ [New] ▲▲▲
+    };
+
+    log('✅ mind-map-nodes.js loaded (Refactored Core/Orchestrator)');
+})();